页面列表与按钮样式 调整

src/pages/supplier/admission/admissionReviewManagement/index.tsx

@@ -1,13 +1,16 @@
 import React, { useEffect, useState } from "react";
-import {  useIntl } from 'umi';
+import { useIntl } from 'umi';
 import { Form, Button, Table, Space, Input } from 'antd';
 import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
-import { SearchOutlined } from '@ant-design/icons';
+import { SearchOutlined, DeleteOutlined } from '@ant-design/icons';
+//接口
 import { getPage } from './services';
 //查看评审结果 弹窗
 import ResultModal from './components/ResultModal';
 import GroupLeaderModal from './components/GroupLeaderModal';
 import ViewModal from './components/ViewModal';
+//统一列表分页
+import tableProps from '@/utils/tableProps'
 
 interface Data {
   deptName: string;
@@ -18,7 +21,7 @@ interface Data {
 }
 
 interface ModalInfo {
-  type: 'teamMembers' | 'groupLeader' | 'view' |  null;
+  type: 'teamMembers' | 'groupLeader' | 'view' | null;
   visible: boolean;
   record: Data | null;
   view: boolean;
@@ -30,27 +33,27 @@ const CooperateEnterprise: React.FC = () => {
   const [data, setData] = useState<Data[]>([]);
   const [loading, setLoading] = useState(false);
   const [pagination, setPagination] = useState<TablePaginationConfig>({ current: 1, pageSize: 10, total: 0 });
-  const [modalInfo, setModalInfo] = useState<ModalInfo>({ type: null, visible: false, record: null, view:false });
+  const [modalInfo, setModalInfo] = useState<ModalInfo>({ type: null, visible: false, record: null, view: false });
 
-  const openModal = (type: 'teamMembers' | 'groupLeader' | 'view', record: Data, view = false ) => {
+  const openModal = (type: 'teamMembers' | 'groupLeader' | 'view', record: Data, view = false) => {
     setModalInfo({ type, visible: true, record, view });
   };
   //提交关闭审核
   const closeModal = () => {
-    setModalInfo({ type: null, visible: false, record: null, view:false  });
+    setModalInfo({ type: null, visible: false, record: null, view: false });
   };
   //提交审核
   const submitModal = () => {
     closeModal();
     handleReset();
   };
-  
+
   // 列表数据
-  const getList = async (params: { pageNo: number; pageSize: number;}) => {
+  const getList = async (params: { pageNo: number; pageSize: number; }) => {
     setLoading(true);
-    try { 
+    try {
       const values = searchForm.getFieldsValue();
-      const { code, data } = await getPage({...params, ...values});
+      const { code, data } = await getPage({ ...params, ...values });
       if (code === 200) {
         setData(data.records);
         setPagination({ current: params.pageNo, pageSize: params.pageSize, total: data.total });
@@ -64,7 +67,7 @@ const CooperateEnterprise: React.FC = () => {
 
   const handleReset = () => {
     searchForm.resetFields();
-    getList({ pageNo: 1, pageSize: pagination.pageSize ?? 10  });
+    getList({ pageNo: 1, pageSize: pagination.pageSize ?? 10 });
   };
 
   const handleSearch = () => {
@@ -75,7 +78,7 @@ const CooperateEnterprise: React.FC = () => {
   };
 
   useEffect(() => {
-    getList({ pageNo: 1, pageSize: 10  });
+    getList({ pageNo: 1, pageSize: 10 });
   }, []);
 
   const columns: ColumnsType<Data> = [
@@ -83,7 +86,7 @@ const CooperateEnterprise: React.FC = () => {
       title: '序号',
       dataIndex: 'index',
       key: 'index',
-      width: 80,
+      width: 60,
       align: 'center',
       render: (_: any, __: any, idx: number) => (((pagination.current ?? 1) - 1) * (pagination.pageSize ?? 10)) + idx + 1,
     },
@@ -98,21 +101,24 @@ const CooperateEnterprise: React.FC = () => {
       dataIndex: 'deptId',
       key: 'deptId',
       ellipsis: true,
+      width: 180,
     },
     {
       title: '准入部门',
       dataIndex: 'deptId',
       key: 'deptId',
       ellipsis: true,
+      width: 180,
     },
     {
       title: '准入品类',
       dataIndex: 'categoryNameList',
       align: 'center',
+      width: 160,
       render: (_: any, record: any) => {
         return (
           <>
-            {record.categoryNameList && record.categoryNameList.map((item:string) => {
+            {record.categoryNameList && record.categoryNameList.map((item: string) => {
               return <div>{`${item}`}</div>
             })}
           </>
@@ -124,12 +130,14 @@ const CooperateEnterprise: React.FC = () => {
       dataIndex: 'accessTypeText',
       key: 'accessTypeText',
       ellipsis: true,
+      width: 160,
     },
     {
       title: '评审时间',
       dataIndex: 'createTime',
       key: 'createTime',
       ellipsis: true,
+      width: 180,
     },
     {
       title: '评审状态',
@@ -148,77 +156,83 @@ const CooperateEnterprise: React.FC = () => {
           (['2'].includes(record.reviewStatus) && record.isLeader === '1')
         );
         // 进行中1 、未开始0 弹出组员组件 否则弹出组长组件
-        const type = ['0', '1'].includes(record.reviewStatus)?  'teamMembers': 'groupLeader';
+        const type = ['0', '1'].includes(record.reviewStatus) ? 'teamMembers' : 'groupLeader';
 
         //评审结果  结果汇总中2 弹出组员组件,  已完成3弹出组长组件
-        const isLeader = (record.reviewStatus === '2' && record.isLeader === '0')?  'teamMembers': 
-                         (record.reviewStatus === '3' && record.isLeader === '1')?  'groupLeader':'';
-       return (
-        <Space>
-           {showAudit && <a onClick={() => openModal(type, record)}>评审</a>}
-           <a onClick={() => openModal('view', record)}>查看</a>
-           { isLeader != '' && <a onClick={() => openModal(isLeader, record, true)}>评审结果</a>}
-        </Space>
-       )
-        
+        const isLeader = (record.reviewStatus === '2' && record.isLeader === '0') ? 'teamMembers' :
+          (record.reviewStatus === '3' && record.isLeader === '1') ? 'groupLeader' : '';
+        return (
+          <Space>
+            {showAudit && <a onClick={() => openModal(type, record)}>评审</a>}
+            <a onClick={() => openModal('view', record)}>查看</a>
+            {isLeader != '' && <a onClick={() => openModal(isLeader, record, true)}>评审结果</a>}
+          </Space>
+        )
+
       },
     },
   ];
   return (
     <>
-      <Form
-        form={searchForm}
-        layout="inline"
-        onFinish={handleSearch}
-        style={{ marginBottom: 16 }}
-      >
-        <Form.Item name="accessWorkName" label="准入工作">
-          <Input placeholder="请输入准入工作"  allowClear maxLength={50} />
-        </Form.Item>
-        <Form.Item>
-          <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
-            搜索
-          </Button>
-        </Form.Item>
-        <Form.Item>
-          <Button onClick={handleReset}>重置</Button>
-        </Form.Item>
-      </Form>
-      <Table
-        rowKey="id"
-        className="custom-table"
-        columns={columns}
-        dataSource={data}
-        pagination={pagination}
-        loading={loading}
-        onChange={(pagination) => getList({ pageNo: pagination.current!, pageSize: pagination.pageSize! })}
-      />
-      { modalInfo.type && modalInfo.type === 'teamMembers' && (
-        <ResultModal 
-          visible={modalInfo.visible} 
+      <div className="common-container">
+        <div className="filter-action-row">
+          <Form
+            form={searchForm}
+            layout="inline"
+            onFinish={handleSearch}
+            className="filter-form"
+          >
+            <Form.Item name="accessWorkName" label="准入工作">
+              <Input placeholder="请输入准入工作" allowClear maxLength={50} />
+            </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
+          rowKey="id"
+          className="custom-table"
+          columns={columns}
+          dataSource={data}
+          pagination={{ ...tableProps.pagination, total: pagination.total }}
+          loading={loading}
+          onChange={(pagination) => getList({ pageNo: pagination.current!, pageSize: pagination.pageSize! })}
+          style={{ flex: 1, minHeight: 0 }}
+          scroll={{ y: 'calc(100vh - 350px)' }}
+        />
+      </div>
+      {modalInfo.type && modalInfo.type === 'teamMembers' && (
+        <ResultModal
+          visible={modalInfo.visible}
           view={modalInfo.view}
-          record={modalInfo.record} 
-          onCancel={closeModal} 
-          onSubmit={submitModal} 
+          record={modalInfo.record}
+          onCancel={closeModal}
+          onSubmit={submitModal}
         />
       )}
-      { modalInfo.type && modalInfo.type === 'groupLeader' && (
-        <GroupLeaderModal 
-          visible={modalInfo.visible} 
+      {modalInfo.type && modalInfo.type === 'groupLeader' && (
+        <GroupLeaderModal
+          visible={modalInfo.visible}
           view={modalInfo.view}
-          record={modalInfo.record} 
-          onCancel={closeModal} 
-          onSubmit={submitModal} 
+          record={modalInfo.record}
+          onCancel={closeModal}
+          onSubmit={submitModal}
         />
       )}
-      { modalInfo.type && modalInfo.type === 'view' && (
+      {modalInfo.type && modalInfo.type === 'view' && (
         <ViewModal
-          visible={modalInfo.visible} 
-          record={modalInfo.record} 
-          onCancel={closeModal} 
+          visible={modalInfo.visible}
+          record={modalInfo.record}
+          onCancel={closeModal}
         />
       )}
-      
+
     </>
   );
 };