供应商退出、准入、 工作台

src/components/CompanyInfo/component/QualificationTab.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import { Table } from 'antd';
+import { Table, Button, message } from 'antd';
 import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
-import { qualifications } from '../services';
+import { qualificationsGetPage } from '../services';
 import { useIntl } from 'umi';
+import QualificationFormModal from './QualificationFormModal';
 
 interface Qualification {
   id: string;
@@ -15,61 +16,106 @@ interface Qualification {
   termOfValidity: string;
   updateTime: string;
 }
-// 列表头部信息
-const columns: ColumnsType<Qualification> = [
-  { title: 'page.workbench.certificateType', dataIndex: 'certificateType' },
-  { title: 'page.workbench.certificateName', dataIndex: 'name' },
-  { title: 'page.workbench.certificateCode', dataIndex: 'code' },
-  { title: 'page.workbench.typeLevel', dataIndex: 'typeLevel' },
-  { title: 'page.workbench.authority', dataIndex: 'authority' },
-  { title: 'page.workbench.dateTime', dataIndex: 'dateTime' },
-  { title: 'page.workbench.termOfValidity', dataIndex: 'termOfValidity' },
-  { title: 'page.workbench.updateTime', dataIndex: 'updateTime' },
-];
 
 const QualificationTab: React.FC = () => {
-  //语言切换
   const intl = useIntl();
-  //列表渲染数据
   const [data, setData] = useState<Qualification[]>([]);
-  //列表加载
   const [loading, setLoading] = useState(false);
-  //列表分页
   const [pagination, setPagination] = useState<TablePaginationConfig>({ current: 1, pageSize: 10, total: 0 });
-  //列表方法
-  const getList = async (page = 1, pageSize = 10) => {
+  //增改查
+  const [formVisible, setFormVisible] = useState(false);
+  const [editingRecord, setEditingRecord] = useState<Qualification | null>(null);
+  const [isViewMode, setIsViewMode] = useState(false);
+
+  const getList = async (pageNo = 1, pageSize = 10) => {
     setLoading(true);
     try {
-      const { code, data, total } = await qualifications({page, pageSize});
+      const { code, data } = await qualificationsGetPage({ pageNo, pageSize });
       if (code === 200) {
-        setData(data);
-        setPagination({ current: page, pageSize, total }); 
+        setData(data.records);
+        setPagination({ current: pageNo, pageSize, total: data.total });
       }
     } finally {
       setLoading(false);
     }
   };
-  //初始化
+
   useEffect(() => {
     getList();
   }, []);
 
+  const handleAdd = () => {
+    setEditingRecord(null);
+    setIsViewMode(false);
+    setFormVisible(true);
+  };
+
+  const handleEdit = (record: Qualification) => {
+    setEditingRecord(record);
+    setIsViewMode(false);
+    setFormVisible(true);
+  };
+
+  const handleView = (record: Qualification) => {
+    setEditingRecord(record);
+    setIsViewMode(true);
+    setFormVisible(true);
+  };
+
+  const handleFormSubmit = () => {
+    setFormVisible(false);
+    getList();
+  };
+
+  const columns: ColumnsType<Qualification> = [
+    { title: 'page.workbench.certificateType', dataIndex: 'certificateType', ellipsis: true },
+    { title: 'page.workbench.certificateName', dataIndex: 'name',  ellipsis: true },
+    { title: 'page.workbench.certificateCode', dataIndex: 'code',  ellipsis: true },
+    { title: 'page.workbench.typeLevel', dataIndex: 'typeLevel' },
+    { title: 'page.workbench.authority', dataIndex: 'authority',  ellipsis: true },
+    { title: 'page.workbench.dateTime', dataIndex: 'dateTime',  ellipsis: true },
+    { title: 'page.workbench.termOfValidity', dataIndex: 'termOfValidity',  ellipsis: true },
+    { title: 'page.workbench.updateTime', dataIndex: 'updateTime',  ellipsis: true },
+    {
+      title: 'page.workbench.attachments.action',
+      dataIndex: 'option',
+      width: 120,
+      render: (_: any, record: Qualification) => (
+        <>
+          <a style={{ marginRight: 8 }} onClick={() => handleView(record)}>查看</a>
+          <a onClick={() => handleEdit(record)}>修改</a>
+        </>
+      ),
+    },
+  ];
+
   return (
     <div style={{ padding: '0 30px 0 0' }}>
+      <div style={{ marginBottom: 16 }}>
+        <Button type="primary" onClick={handleAdd}>新增资质</Button>
+      </div>
       <Table
         rowKey="id"
         className="custom-table"
         columns={columns.map(column => ({
           ...column,
-          title: intl.formatMessage({ id: column.title as string })
+          title: typeof column.title === 'string' ? intl.formatMessage({ id: column.title }) : column.title,
         }))}
         dataSource={data}
         pagination={pagination}
         loading={loading}
+        scroll={{ y: 400 }}
         onChange={(pagination) => getList(pagination.current!, pagination.pageSize!)}
       />
+      <QualificationFormModal
+        visible={formVisible}
+        onOk={handleFormSubmit}
+        onCancel={() => setFormVisible(false)}
+        initialValues={editingRecord || undefined}
+        readOnly={isViewMode}
+      />
     </div>
   );
 };
 
-export default QualificationTab;
+export default QualificationTab;