供应商
This commit is contained in:
孙景学
291
src/pages/supplier/admission/SupplierEntryReview/index.tsx
Normal file
291
src/pages/supplier/admission/SupplierEntryReview/index.tsx
Normal file
@ -0,0 +1,291 @@
|
||||
// src/pages/SupplierEntryReview/index.tsx
|
||||
|
||||
import React, { useRef } from 'react';
|
||||
import ProTable from '@ant-design/pro-table';
|
||||
import type { ProColumns, ActionType } from '@ant-design/pro-table';
|
||||
import { Form, Select, Button, Row, Col, Tag, Space, message } from 'antd';
|
||||
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
|
||||
|
||||
// 示例数据
|
||||
const tableData = [
|
||||
{
|
||||
id: 1,
|
||||
work: '燃料XXX有限公司',
|
||||
unit: '散运',
|
||||
dept: '采购部',
|
||||
method: '线上',
|
||||
applyTime: '2025-03-03 09:30',
|
||||
status: '未开始',
|
||||
result: '',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
work: '备件XXX有限公司',
|
||||
unit: '散运二级单位',
|
||||
dept: '业务部',
|
||||
method: '线下',
|
||||
applyTime: '2025-03-03 09:30',
|
||||
status: '未开始',
|
||||
result: '',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
work: '电机XXX有限公司',
|
||||
unit: '散运',
|
||||
dept: '采购部',
|
||||
method: '线上',
|
||||
applyTime: '2025-03-03 09:30',
|
||||
status: '进行中',
|
||||
result: '',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
work: '钢板XXX有限公司',
|
||||
unit: '散运',
|
||||
dept: '业务部',
|
||||
method: '线下',
|
||||
applyTime: '2025-03-03 09:30',
|
||||
status: '进行中',
|
||||
result: '',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
work: '燃料XXX有限公司',
|
||||
unit: '散运',
|
||||
dept: '采购部',
|
||||
method: '线上',
|
||||
applyTime: '2025-03-03 09:30',
|
||||
status: '进行中',
|
||||
result: '',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
work: '备件XXX有限公司',
|
||||
unit: '散运二级单位',
|
||||
dept: '业务部',
|
||||
method: '线下',
|
||||
applyTime: '2025-03-03 09:30',
|
||||
status: '进行中',
|
||||
result: '',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
work: '电机XXX有限公司',
|
||||
unit: '散运',
|
||||
dept: '采购部',
|
||||
method: '线上',
|
||||
applyTime: '2025-03-03 09:30',
|
||||
status: '已结束',
|
||||
result: '通过',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
work: '钢板XXX有限公司',
|
||||
unit: '散运二级单位',
|
||||
dept: '业务部',
|
||||
method: '线下',
|
||||
applyTime: '2025-03-03 09:30',
|
||||
status: '已结束',
|
||||
result: '驳回',
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
work: '燃料XXX有限公司',
|
||||
unit: '散运',
|
||||
dept: '采购部',
|
||||
method: '线上',
|
||||
applyTime: '2025-03-03 09:30',
|
||||
status: '已结束',
|
||||
result: '驳回',
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
work: '钢板XXX有限公司',
|
||||
unit: '散运二级单位',
|
||||
dept: '业务部',
|
||||
method: '线下',
|
||||
applyTime: '2025-03-03 09:30',
|
||||
status: '已结束',
|
||||
result: '驳回',
|
||||
},
|
||||
];
|
||||
|
||||
const statusColorMap: Record<string, string> = {
|
||||
'未开始': 'default',
|
||||
'进行中': 'processing',
|
||||
'已结束': 'success',
|
||||
};
|
||||
|
||||
const resultColorMap: Record<string, string> = {
|
||||
'通过': 'success',
|
||||
'驳回': 'error',
|
||||
};
|
||||
|
||||
const columns: ProColumns<any>[] = [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'index',
|
||||
valueType: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '准入工作',
|
||||
dataIndex: 'work',
|
||||
align: 'center',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '准入单位',
|
||||
dataIndex: 'unit',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '准入部门',
|
||||
dataIndex: 'dept',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '准入方式',
|
||||
dataIndex: 'method',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '申请时间',
|
||||
dataIndex: 'applyTime',
|
||||
align: 'center',
|
||||
sorter: (a, b) => new Date(a.applyTime).getTime() - new Date(b.applyTime).getTime(),
|
||||
},
|
||||
{
|
||||
title: '流程状态',
|
||||
dataIndex: 'status',
|
||||
align: 'center',
|
||||
render: (_, record) =>
|
||||
<Tag color={statusColorMap[record.status] || 'default'}>{record.status}</Tag>,
|
||||
},
|
||||
{
|
||||
title: '审批结果',
|
||||
dataIndex: 'result',
|
||||
align: 'center',
|
||||
render: (val: string) =>
|
||||
val ? <Tag color={resultColorMap[val] || 'default'}>{val}</Tag> : null,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'option',
|
||||
align: 'center',
|
||||
valueType: 'option',
|
||||
render: (_, record) => (
|
||||
<Space>
|
||||
<a>审批</a>
|
||||
<a>审批记录</a>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const statusOptions = [
|
||||
{ label: '未开始', value: '未开始' },
|
||||
{ label: '进行中', value: '进行中' },
|
||||
{ label: '已结束', value: '已结束' },
|
||||
];
|
||||
|
||||
const unitOptions = [
|
||||
{ label: '散运', value: '散运' },
|
||||
{ label: '散运二级单位', value: '散运二级单位' },
|
||||
];
|
||||
|
||||
const deptOptions = [
|
||||
{ label: '采购部', value: '采购部' },
|
||||
{ label: '业务部', value: '业务部' },
|
||||
];
|
||||
|
||||
const methodOptions = [
|
||||
{ label: '线上', value: '线上' },
|
||||
{ label: '线下', value: '线下' },
|
||||
];
|
||||
|
||||
const categoryOptions = [
|
||||
{ label: '全部', value: '' },
|
||||
];
|
||||
|
||||
const reviewResultOptions = [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '通过', value: '通过' },
|
||||
{ label: '驳回', value: '驳回' },
|
||||
];
|
||||
|
||||
const SupplierEntryReview: React.FC = () => {
|
||||
const actionRef = useRef<ActionType>();
|
||||
|
||||
// 自定义查询表单
|
||||
const searchFormRender = (
|
||||
<Form layout="vertical">
|
||||
<Row gutter={16}>
|
||||
<Col span={4}>
|
||||
<Form.Item name="method" label="准入方式">
|
||||
<Select options={[{ label: '请选择', value: '' }, ...methodOptions]} allowClear />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Form.Item name="unit" label="准入单位">
|
||||
<Select options={[{ label: '请选择', value: '' }, ...unitOptions]} allowClear />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Form.Item name="dept" label="准入部门">
|
||||
<Select options={[{ label: '请选择', value: '' }, ...deptOptions]} allowClear />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Form.Item name="category" label="准入品类">
|
||||
<Select options={[{ label: '请选择', value: '' }, ...categoryOptions]} allowClear />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Form.Item name="status" label="流程状态">
|
||||
<Select options={[{ label: '请选择', value: '' }, ...statusOptions]} allowClear />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Form.Item name="result" label="审批结果">
|
||||
<Select options={[{ label: '请选择', value: '' }, ...reviewResultOptions]} allowClear />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={16} style={{ marginBottom: 16 }}>
|
||||
<Col>
|
||||
<Button type="primary" icon={<SearchOutlined />} style={{ marginRight: 8 }}>查询</Button>
|
||||
<Button icon={<ReloadOutlined />}>重置</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* 查询表单 */}
|
||||
{searchFormRender}
|
||||
|
||||
{/* 表格 */}
|
||||
<ProTable
|
||||
columns={columns}
|
||||
actionRef={actionRef}
|
||||
dataSource={tableData}
|
||||
rowKey="id"
|
||||
search={false}
|
||||
pagination={{
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
pageSize: 10,
|
||||
total: 188,
|
||||
current: 1,
|
||||
}}
|
||||
options={false}
|
||||
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SupplierEntryReview;
|
||||
Reference in New Issue
Block a user