供应商

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

@@ -0,0 +1,148 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Select, Button, Table, Space } from 'antd';
+import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
+//查看弹窗
+import ViewModal from './components/ViewModal';
+//发起审批 弹窗
+import ApproveModal from './components/ApproveModal';
+//审批记录 弹窗
+import RecordModal from './components/RecordModal';
+//查看评审结果 弹窗
+import ResultModal from './components/ResultModal';
+//发起准入 弹窗
+import CreateModal from './components/CreateModal';
+
+import { getPage } from './services'
+
+const { Option } = Select;
+
+interface Data {
+  id: string;
+  deptId: string;
+  accessTypeText: string;
+  createTime: string;
+  approveStatus: string;
+}
+
+const AccessManagement: React.FC = () => {
+  // 查询
+  const [form] = Form.useForm();
+  //列表渲染数据
+  const [data, setData] = useState([]);
+  // 发起准入、查看、发起审批、审批记录、查看评审结果 显示哪个组件状态
+  const [modalInfo, setModalInfo] = useState<{ type: string; visible: boolean; record?: any }>({ type: '', visible: false, });
+  //列表分页
+  const [pagination, setPagination] = useState<TablePaginationConfig>({ current: 1, pageSize: 10, total: 0 });
+  //列表加载
+  const [loading, setLoading] = useState(false);
+  // 列表方法
+  const getList = async (values: any = {},pageNo: number = 1, pageSize: number = 10) => {
+    setLoading(true);
+    try {
+      const { code, data } = await getPage({ ...values, pageNo, pageSize });
+      if (code === 200) {
+        setData(data.records);
+        setPagination({ current: pageNo, pageSize, total: data.total });
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+  //初始化
+  useEffect(() => {
+    const values = form.getFieldsValue();
+    getList(values, 1, 10);
+  }, []);
+  //开启弹窗
+  const openModal = (type: string, record?: any) => {
+    setModalInfo({ type, visible: true, record });
+  };
+  //关闭弹窗
+  const closeModal = () => {
+    setModalInfo({ type: '', visible: false });
+  };
+  //列表头部数据
+  const columns: ColumnsType<Data> = [
+    {
+      title: '序号',
+      dataIndex: 'index',
+      render: (_: any, __: any, index: number) => index + 1,
+    },
+    { title: '准入工作', dataIndex: 'accessWorkName' },
+    { title: '准入单位', dataIndex: 'deptId' },
+    { title: '准入部门', dataIndex: 'deptId' },
+    { title: '准入方式', dataIndex: 'accessTypeText' },
+    { title: '申请时间', dataIndex: 'createTime' },
+    { title: '状态', dataIndex: 'approveStatus' },
+    {
+      title: '操作',
+      render: (_: any, record: any) => (
+        <Space>
+          <a onClick={() => openModal('view', record)}>查看</a>
+          <a onClick={() => openModal('approve', record)}>发起审批</a>
+          <a onClick={() => openModal('record', record)}>审批记录</a>
+          <a onClick={() => openModal('result', record)}>查看评审结果</a>
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <>
+      <Form layout="inline" form={form} onFinish={getList}>
+        <Form.Item name="accessType" label="准入方式">
+          <Select style={{ width: 150 }} placeholder="请选择">
+            <Option value="线上">线上</Option>
+            <Option value="线下">线下</Option>
+          </Select>
+        </Form.Item>
+        <Form.Item name="deptId" label="准入单位">
+          <Select style={{ width: 150 }} placeholder="请选择">
+            <Option value="单位A">单位A</Option>
+            <Option value="单位B">单位B</Option>
+          </Select>
+        </Form.Item>
+        <Form.Item name="categoryId" label="准入品类">
+          <Select style={{ width: 150 }} placeholder="请选择">
+            <Option value="品类1">品类1</Option>
+            <Option value="品类2">品类2</Option>
+          </Select>
+        </Form.Item>
+        <Form.Item name="approveStatus" label="状态">
+          <Select style={{ width: 150 }} placeholder="请选择">
+            <Option value="草稿">草稿</Option>
+            <Option value="已提交">已提交</Option>
+          </Select>
+        </Form.Item>
+        <Form.Item>
+          <Button type="primary" htmlType="submit">查询</Button>
+        </Form.Item>
+        <Form.Item>
+          <Button onClick={() => form.resetFields()}>重置</Button>
+        </Form.Item>
+      </Form>
+      <div style={{ marginTop: 16, marginBottom: 16 }}>
+        <Button type="primary" onClick={() => openModal('create')}>发起准入</Button>
+      </div>
+      <Table
+        rowKey="key"
+        dataSource={data}
+        columns={columns}
+        loading={loading}
+        pagination={pagination}
+        onChange={(pagination) => {
+          const values = form.getFieldsValue();
+          getList(values, pagination.current!, pagination.pageSize!)
+        }}
+      />
+      {/* 弹窗区 */}
+      <ViewModal visible={modalInfo.type === 'view' && modalInfo.visible} record={modalInfo.record} onCancel={closeModal} />
+      <ApproveModal visible={modalInfo.type === 'approve' && modalInfo.visible} record={modalInfo.record} onCancel={closeModal} />
+      <RecordModal visible={modalInfo.type === 'record' && modalInfo.visible} record={modalInfo.record} onCancel={closeModal} />
+      <ResultModal visible={modalInfo.type === 'result' && modalInfo.visible} record={modalInfo.record} onCancel={closeModal} />
+      <CreateModal visible={modalInfo.type === 'create' && modalInfo.visible} onCancel={closeModal} />
+    </>
+  );
+};
+
+export default AccessManagement;