页面列表与按钮样式 调整

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

@@ -1,11 +1,14 @@
 import React, { useRef, useEffect, useState } from 'react';
 import { Table, Form, Input, Button, Row, Col, DatePicker, Tabs, Space, message } from 'antd';
-import { SearchOutlined, ReloadOutlined, PlusOutlined } from '@ant-design/icons';
-import { getPageAgent } from './services';
+import { SearchOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons';
 import type { ColumnsType } from 'antd/es/table';
+//组件
 import SupplierViewModal from './components/SupplierViewModal';
-import SupplierExitModal from './components/SupplierExitModal'; 
-
+import SupplierExitModal from './components/SupplierExitModal';
+//接口
+import { getPageAgent } from './services';
+//统一列表分页
+import tableProps from '@/utils/tableProps'
 
 const { RangePicker } = DatePicker;
 const { TabPane } = Tabs;
@@ -25,12 +28,12 @@ const SupplierRegisterAgent: React.FC = () => {
   const [tabKey, setTabKey] = useState('dvs');
   //查看是否显示状态
   const [viewVisible, setViewVisible] = useState(false);
-   //查看  参数传递
-    const [currentRecord, setCurrentRecord] = useState('');
+  //查看  参数传递
+  const [currentRecord, setCurrentRecord] = useState('');
   // 新增与修改
-    const [exitModalVisible, setExitModalVisible] = useState(false);
-    const [exitId, setExitId] = useState('');
-    
+  const [exitModalVisible, setExitModalVisible] = useState(false);
+  const [exitId, setExitId] = useState('');
+
   // 查询数据
   const fetchData = async (page = 1, pageSize = 10) => {
     setLoading(true);
@@ -39,7 +42,7 @@ const SupplierRegisterAgent: React.FC = () => {
     let params: any = {
       pageNo: page,
       pageSize,
-      supplierType: tabKey ,
+      supplierType: tabKey,
     };
     if (keyword) params.keyword = keyword;
     if (dateRange && dateRange.length === 2) {
@@ -67,7 +70,6 @@ const SupplierRegisterAgent: React.FC = () => {
   // 首次&依赖刷新
   useEffect(() => {
     fetchData(1, pagination.pageSize);
-    // eslint-disable-next-line
   }, [tabKey]);
 
   // 查询
@@ -85,7 +87,7 @@ const SupplierRegisterAgent: React.FC = () => {
   };
 
   // 列
-  const columns: ColumnsType<Columns>  = [
+  const columns: ColumnsType<Columns> = [
     {
       title: '序号',
       dataIndex: 'index',
@@ -96,14 +98,9 @@ const SupplierRegisterAgent: React.FC = () => {
     {
       title: '供应商名称',
       dataIndex: 'name',
-      align: 'center',
+      align: 'left',
       ellipsis: true,
     },
-    // {
-    //   title: '供应商类型',
-    //   dataIndex: 'supplierType',
-    //   align: 'center',
-    // },
     {
       title: '创建单位',
       dataIndex: 'unit',
@@ -119,44 +116,45 @@ const SupplierRegisterAgent: React.FC = () => {
       title: '创建时间',
       dataIndex: 'createTime',
       align: 'center',
-      // sorter 由接口决定是否支持
+      width: 180,
     },
     {
       title: '操作',
       align: 'center',
+      width: 120,
       render: (_: any, record: any) => (
         <Space>
           <a onClick={() => { setCurrentRecord(record.id); setViewVisible(true); }}>查看</a>
-          {/* <a onClick={() => {
-            setExitId(record.id);
-            setExitModalVisible(true);
-          }}>编辑</a> */}
         </Space>
       ),
     },
   ];
 
   return (
-    <div>
-      {/* 查询区 */}
-      <Form form={form}  >
-        <Row gutter={16}>
-          <Col span={6}>
-            <Form.Item name="keyword" label="名称">
-              <Input placeholder="请输入供应商名称或个人姓名关键字" allowClear />
-            </Form.Item>
-          </Col>
-          <Col span={10}>
-            <Form.Item name="dateRange" label="创建时间">
-              <RangePicker style={{ width: '100%' }} />
-            </Form.Item>
-          </Col>
-          <Col span={6} >
-            <Button type="primary" icon={<SearchOutlined />} onClick={handleSearch} style={{  marginRight: '10px' }}>查询</Button>
-            <Button icon={<ReloadOutlined />} onClick={handleReset}>重置</Button>
-          </Col>
-        </Row>
-      </Form>
+    <div className="common-container">
+      <div className="filter-action-row">
+        <Form
+          form={form}
+          layout="inline"
+          onFinish={handleSearch}
+          className="filter-form"
+        >
+          <Form.Item name="keyword" label="名称">
+            <Input placeholder="请输入供应商名称或个人姓名关键字" allowClear maxLength={50} />
+          </Form.Item>
+          <Form.Item name="dateRange" label="创建时间">
+            <RangePicker style={{ width: '100%' }} />
+          </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>
       <Row align="middle" justify="space-between" >
         <Col flex="auto">
           <Tabs activeKey={tabKey} onChange={setTabKey}>
@@ -166,7 +164,7 @@ const SupplierRegisterAgent: React.FC = () => {
           </Tabs>
         </Col>
         <Col>
-          <Button type="primary" icon={<PlusOutlined />} onClick={() => { setExitModalVisible(true) }} >新增</Button>
+          <Button className="buttonFunctionBlock" type="primary" onClick={() => { setExitModalVisible(true) }} >新增</Button>
         </Col>
       </Row>
       {/* 表格 */}
@@ -175,14 +173,10 @@ const SupplierRegisterAgent: React.FC = () => {
         dataSource={data}
         rowKey="id"
         loading={loading}
-        pagination={{
-          current: pagination.current,
-          pageSize: pagination.pageSize,
-          total: pagination.total,
-          showQuickJumper: true,
-          showSizeChanger: true,
-          onChange: (current, pageSize) => handleTableChange({ current, pageSize }),
-        }}
+        pagination={{ ...tableProps.pagination, total: pagination.total }}
+        onChange={(current, pageSize) => handleTableChange({ current, pageSize })}
+        style={{ flex: 1, minHeight: 0 }}
+        scroll={{ y: 'calc(100vh - 350px)' }}
       />
       {/* 查看组件 */}
       <SupplierViewModal