页面列表与按钮样式 调整

src/pages/supplier/informationManagement/SupplierChangeReviewManage/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Table, Form, Input, Select, Button, DatePicker, Tooltip } from 'antd';
-import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
+import { SearchOutlined, DeleteOutlined } from '@ant-design/icons';
 //详情
 import DetailView from './components/DetailView';
 //接口
@@ -11,8 +11,10 @@ import { getDictList } from '@/servers/api/dicts'
 //umi 相关
 import { connect } from 'umi';
 import moment from 'moment';
-const { RangePicker } = DatePicker;
+//统一列表分页
+import tableProps from '@/utils/tableProps'
 
+const { RangePicker } = DatePicker;
 
 const regionOptions = [
   { label: '境内企业', value: 'dvs' },
@@ -115,14 +117,14 @@ const SupplierChangeReviewManage: React.FC<Props> = ({ dispatch }) => {
     {
       title: '序号',
       dataIndex: 'index',
-      width: 48,
+      width: 60,
       align: 'center',
       render: (_: any, __: any, idx: number) => (((pagination.current ?? 1) - 1) * (pagination.pageSize ?? 10)) + idx + 1,
     },
     {
       title: '供应商名称',
       dataIndex: 'supplierName',
-      align: 'center',
+      align: 'left',
       ellipsis: true,
       render: (dom, record) =>
         <Tooltip title={record.supplierName}>
@@ -144,33 +146,39 @@ const SupplierChangeReviewManage: React.FC<Props> = ({ dispatch }) => {
       title: '境内/境外',
       dataIndex: 'supplierType',
       align: 'center',
+      width: 160,
     },
     {
       title: '供应商分类',
       dataIndex: 'enterpriseTypeCn',
       align: 'center',
+      width: 160,
     },
     {
       title: '准入时间',
       dataIndex: 'updateTime',
       align: 'center',
       ellipsis: true,
+      width: 180,
     },
     {
       title: '提交变更时间',
       dataIndex: 'changeTime',
       align: 'center',
       ellipsis: true,
+      width: 180,
     },
     {
       title: '审批状态',
       dataIndex: 'approveStatusText',
       align: 'center',
+      width: 160,
     },
     {
       title: '操作',
       key: 'action',
       align: 'center',
+      width: 160,
       render: (_: any, record: any) => (
         <Button type="link" onClick={() => handleDetail(record)}>
           审批记录
@@ -180,48 +188,56 @@ const SupplierChangeReviewManage: React.FC<Props> = ({ dispatch }) => {
   ];
   return (
     <>
-      {/* 查询表单 */}
-      <Form
-        form={form}
-        layout="inline"
-        style={{ width: '100%', marginBottom: 16 }}
-        onFinish={handleSearch}
-      >
-        <Form.Item name="supplierName" label="供应商名称">
-          <Input placeholder="请输入供应商名称关键字" allowClear />
-        </Form.Item>
-        <Form.Item name="supplierType" label="境内/境外">
-          <Select options={regionOptions} allowClear style={{ width: 120 }} placeholder="请选择境内/境外" />
-        </Form.Item>
+      <div className="common-container">
+        <div className="filter-action-row">
 
-        <Form.Item name="approveStatus" label="审批状态">
-          <Select style={{ width: 160 }} placeholder="请选择审批状态" allowClear>
-            {enterpriseType?.map(item => (
-              <Select.Option key={item.code} value={item.code}>{item.dicName}</Select.Option>
-            ))}
-          </Select>
-        </Form.Item>
-        <Form.Item name="changeTime" label="提交变更时间">
-          <RangePicker style={{ width: 220 }} />
-        </Form.Item>
-        <Form.Item>
-          <Button type="primary" icon={<SearchOutlined />} htmlType="submit">查询</Button>
-          <Button icon={<ReloadOutlined />} style={{ marginLeft: 8 }} onClick={handleReset}>重置</Button>
-        </Form.Item>
-      </Form>
-      {/* 数据表格 */}
-      <Table
-        columns={columns}
-        rowKey="id"
-        dataSource={data}
-        loading={loading}
-        pagination={{
-          ...pagination,
-          showQuickJumper: true,
-          showSizeChanger: true,
-          onChange: (current, pageSize) => setPagination({ ...pagination, current }),
-        }}
-      />
+          <Form
+            form={form}
+            layout="inline"
+            className="filter-form"
+            onFinish={handleSearch}
+          >
+            <Form.Item name="supplierName" label="供应商名称">
+              <Input placeholder="请输入供应商名称关键字" allowClear />
+            </Form.Item>
+            <Form.Item name="supplierType" label="境内/境外">
+              <Select options={regionOptions} allowClear style={{ width: 120 }} placeholder="请选择境内/境外" />
+            </Form.Item>
+
+            <Form.Item name="approveStatus" label="审批状态">
+              <Select style={{ width: 160 }} placeholder="请选择审批状态" allowClear>
+                {enterpriseType?.map(item => (
+                  <Select.Option key={item.code} value={item.code}>{item.dicName}</Select.Option>
+                ))}
+              </Select>
+            </Form.Item>
+            <Form.Item name="changeTime" label="提交变更时间">
+              <RangePicker style={{ width: 220 }} />
+            </Form.Item>
+
+            <Form.Item>
+              <Button className="buttonSubmit" type="primary" htmlType="submit" icon={<SearchOutlined />} >
+                搜索
+              </Button>
+            </Form.Item>
+            <Form.Item>
+              <Button className="buttonReset" icon={<DeleteOutlined />} onClick={handleReset} >重置</Button>
+            </Form.Item>
+
+          </Form>
+        </div>
+        {/* 数据表格 */}
+        <Table
+          columns={columns}
+          rowKey="id"
+          dataSource={data}
+          loading={loading}
+          pagination={{ ...tableProps.pagination, total: pagination.total }}
+          onChange={() => setPagination({ ...pagination })}
+          style={{ flex: 1, minHeight: 0 }}
+          scroll={{ y: 'calc(100vh - 350px)' }}
+        />
+      </div>
       {/* 审批记录弹窗 */}
       <DetailView
         visible={detailVisible}