页面列表与按钮样式 调整

src/pages/supplier/informationRetrieval/mySupplierInquiry/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 //第三方UI库/组件
-import { Form, Button, Table, Select, Input, Space, message, Tooltip } from 'antd';
-import { SearchOutlined, DownloadOutlined, ReloadOutlined } from '@ant-design/icons';
+import { Form, Button, Table, Select, Input, Space, Tooltip } from 'antd';
+import { SearchOutlined, DeleteOutlined } from '@ant-design/icons';
 //类型定义
 import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
 //umi 相关
@@ -12,6 +12,8 @@ import SupplierDetailModal from './components/SupplierDetailModal';
 import CategorySelector from '@/components/CategorySelector';
 //本地服务/接口
 import { getPageMy } from './services';
+//统一列表分页
+import tableProps from '@/utils/tableProps'
 
 const { Option } = Select;
 //下拉数据接口
@@ -48,7 +50,7 @@ const mySupplierInquiry: React.FC<mySupplierInquiryProps> = ({ dispatch }) => {
   // 准入状态
   const [storeOptions, setStoreOptions] = useState<OptionType[]>([]);
   // 导出
-  const handleExport = async  () => {
+  const handleExport = async () => {
     window.open(
       `${SERVER_BASE}/coscoSupplierBase/getPageMyExport`,
       '_blank',
@@ -114,10 +116,10 @@ const mySupplierInquiry: React.FC<mySupplierInquiryProps> = ({ dispatch }) => {
       title: '供应商名称',
       dataIndex: 'name',
       key: 'name',
-      align: 'center',
-      render: (dom, record) => 
+      ellipsis: true,
+      render: (dom, record) =>
         <Tooltip title={record.name}>
-            <a
+          <a
             onClick={() => {
               dispatch({
                 type: 'globalModal/show',
@@ -136,12 +138,14 @@ const mySupplierInquiry: React.FC<mySupplierInquiryProps> = ({ dispatch }) => {
       dataIndex: 'supplierTypeCn',
       key: 'supplierTypeCn',
       align: 'center',
+      width: 160,
     },
     {
       title: '企业类型',
       dataIndex: 'enterpriseTypeCn',
       key: 'enterpriseTypeCn',
       align: 'center',
+      width: 120,
     },
     {
       title: '准入品类',
@@ -154,17 +158,20 @@ const mySupplierInquiry: React.FC<mySupplierInquiryProps> = ({ dispatch }) => {
       dataIndex: 'updateTime',
       key: 'updateTime',
       align: 'center',
+      width: 180,
     },
     {
       title: '准入状态',
       dataIndex: 'accessStatusCn',
       key: 'accessStatusCn',
       align: 'center',
+      width: 140,
     },
     {
       title: '操作',
       key: 'option',
       align: 'center',
+      width: 160,
       render: (record: any) => (
         <Space>
           <a
@@ -182,52 +189,59 @@ const mySupplierInquiry: React.FC<mySupplierInquiryProps> = ({ dispatch }) => {
 
   return (
     <>
-      <Form
-        form={form}
-        layout="inline"
-        style={{ marginBottom: 12, }}
-      >
-        <Form.Item name="name" label="供应商名称">
-          <Input placeholder="请输入供应商名称关键字" style={{ width: 180 }}  allowClear maxLength={20} />
-        </Form.Item>
-        <Form.Item name="categoryId" label="准入品类">
-          <CategorySelector multiple={false} style={{ width: 140 }} />
-        </Form.Item>
-        <Form.Item name="accessStatus" label="准入状态">
-          <Select style={{ width: 140 }} allowClear placeholder="请选择准入状态">
-            {storeOptions.map(opt => (
-              <Option key={opt.value} value={opt.value}>{opt.label}</Option>
-            ))}
-          </Select>
-        </Form.Item>
-        <Form.Item name="supplierType" label="境内/境外">
-          <Select style={{ width: 140 }} allowClear placeholder="请选择境内/境外" >
-            {regionOptions.map(opt => (
-              <Option key={opt.value} value={opt.value}>{opt.label}</Option>
-            ))}
-          </Select>
-        </Form.Item>
-        <Form.Item>
-          <Button type="primary" icon={<SearchOutlined />} htmlType="submit" onClick={handleSearch}>
-            查询
-          </Button>
-          <Button style={{ marginLeft: 8 }} icon={<ReloadOutlined />} onClick={handleReset}>
-            重置
-          </Button>
-          <Button type="primary" icon={<DownloadOutlined />} style={{ marginLeft: 8 }} onClick={handleExport}>
-            数据导出
-          </Button>
-        </Form.Item>
-      </Form>
-      {/* 表格 */}
-      <Table
-        rowKey="id"
-        columns={columns}
-        dataSource={data}
-        loading={loading}
-        pagination={pagination}
-        onChange={(pagination) => getList(pagination.current!, pagination.pageSize!)}
-      />
+      <div className="common-container">
+        <div className="filter-action-row">
+          <Form
+            form={form}
+            layout="inline"
+            className="filter-form"
+          >
+            <Form.Item name="name" label="供应商名称">
+              <Input placeholder="请输入供应商名称关键字" style={{ width: 180 }} allowClear maxLength={20} />
+            </Form.Item>
+            <Form.Item name="categoryId" label="准入品类">
+              <CategorySelector multiple={false} style={{ width: 140 }} />
+            </Form.Item>
+            <Form.Item name="accessStatus" label="准入状态">
+              <Select style={{ width: 140 }} allowClear placeholder="请选择准入状态">
+                {storeOptions.map(opt => (
+                  <Option key={opt.value} value={opt.value}>{opt.label}</Option>
+                ))}
+              </Select>
+            </Form.Item>
+            <Form.Item name="supplierType" label="境内/境外">
+              <Select style={{ width: 140 }} allowClear placeholder="请选择境内/境外" >
+                {regionOptions.map(opt => (
+                  <Option key={opt.value} value={opt.value}>{opt.label}</Option>
+                ))}
+              </Select>
+            </Form.Item>
+            <Form.Item>
+              <Button className="buttonSubmit" type="primary" htmlType="submit" icon={<SearchOutlined />} onClick={handleSearch} >
+                搜索
+              </Button>
+            </Form.Item>
+            <Form.Item>
+              <Button className="buttonReset" icon={<DeleteOutlined />} onClick={handleReset} >重置</Button>
+            </Form.Item>
+            <Form.Item style={{ marginLeft: 'auto' }}>
+              <Button className="buttonOther" type="primary" onClick={handleExport}>
+                数据导出
+              </Button>
+            </Form.Item>
+          </Form>
+        </div>
+        <Table
+          rowKey="id"
+          columns={columns}
+          dataSource={data}
+          loading={loading}
+          pagination={{...tableProps.pagination, total: pagination.total }}
+          onChange={(pagination) => getList(pagination.current!, pagination.pageSize!)}
+          style={{ flex: 1, minHeight: 0 }}
+          scroll={{ y: 'calc(100vh - 350px)' }}
+        />
+      </div>
       {/* 查看组件 */}
       <SupplierViewModal
         visible={viewVisible}
@@ -240,6 +254,7 @@ const mySupplierInquiry: React.FC<mySupplierInquiryProps> = ({ dispatch }) => {
         record={currentRecord}
         onCancel={() => setDetailVisible(false)}
       />
+
     </>
   );
 };