供应商准入管理除了品类
This commit is contained in:
孙景学
@ -1,288 +1,205 @@
|
||||
// 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 React, { useEffect, useState } from 'react';
|
||||
import { Table, Form, Select, Button, Tag, message } from 'antd';
|
||||
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
|
||||
import { getApprovePage } from './services';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
|
||||
// 示例数据
|
||||
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: '驳回',
|
||||
},
|
||||
];
|
||||
|
||||
interface SupplierEntryReviewRecord {
|
||||
id: string;
|
||||
accessWorkName: string; // 准入工作
|
||||
deptId: string; // 准入部门ID
|
||||
accessTypeText: string; // 准入方式
|
||||
reviewStatusText: string; // 流程状态
|
||||
categoryName: string; // 品类名称
|
||||
startTime: string; // 申请时间
|
||||
endTime: string;
|
||||
createTime: string; // 创建时间
|
||||
updateTime: string; // 更新时间
|
||||
[key: string]: any; // 允许有其它字段
|
||||
}
|
||||
|
||||
const statusColorMap: Record<string, string> = {
|
||||
'未开始': 'default',
|
||||
'进行中': 'processing',
|
||||
'已结束': 'success',
|
||||
'已完成': 'success',
|
||||
};
|
||||
|
||||
const resultColorMap: Record<string, string> = {
|
||||
'通过': 'success',
|
||||
'驳回': 'error',
|
||||
};
|
||||
const methodOptions = [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '线上准入', value: '线上准入' },
|
||||
{ label: '线下准入', value: '线下准入' },
|
||||
];
|
||||
|
||||
const columns: ProColumns<any>[] = [
|
||||
const statusOptions = [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '未开始', value: '未开始' },
|
||||
{ label: '进行中', value: '进行中' },
|
||||
{ label: '已完成', value: '已完成' },
|
||||
];
|
||||
|
||||
const deptOptions = [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '采购部', value: 'DEPT001' },
|
||||
{ label: '业务部', value: 'DEPT002' },
|
||||
];
|
||||
|
||||
const columns:ColumnsType<SupplierEntryReviewRecord> = [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'index',
|
||||
valueType: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
render: (_: any, __: any, idx: number) => idx + 1,
|
||||
},
|
||||
{
|
||||
title: '准入工作',
|
||||
dataIndex: 'work',
|
||||
dataIndex: 'accessWorkName',
|
||||
align: 'center',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '准入单位',
|
||||
dataIndex: 'unit',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '准入部门',
|
||||
dataIndex: 'dept',
|
||||
dataIndex: 'deptId',
|
||||
align: 'center',
|
||||
render: (deptId: string) => deptId === 'DEPT001' ? '采购部' : deptId === 'DEPT002' ? '业务部' : deptId,
|
||||
},
|
||||
{
|
||||
title: '准入方式',
|
||||
dataIndex: 'method',
|
||||
dataIndex: 'accessTypeText',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '申请时间',
|
||||
dataIndex: 'applyTime',
|
||||
title: '准入品类',
|
||||
dataIndex: 'categoryName',
|
||||
align: 'center',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '开始时间',
|
||||
dataIndex: 'startTime',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '结束时间',
|
||||
dataIndex: 'endTime',
|
||||
align: 'center',
|
||||
sorter: (a, b) => new Date(a.applyTime).getTime() - new Date(b.applyTime).getTime(),
|
||||
},
|
||||
{
|
||||
title: '流程状态',
|
||||
dataIndex: 'status',
|
||||
dataIndex: 'reviewStatusText',
|
||||
align: 'center',
|
||||
render: (_, record) =>
|
||||
<Tag color={statusColorMap[record.status] || 'default'}>{record.status}</Tag>,
|
||||
render: (text: string) => <Tag color={statusColorMap[text] || 'default'}>{text}</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 [form] = Form.useForm();
|
||||
const [data, setData] = useState<any[]>([]);
|
||||
const [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 0 });
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// 自定义查询表单
|
||||
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>
|
||||
);
|
||||
// 查询数据
|
||||
const fetchData = async (params = {}) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await getApprovePage({
|
||||
pageNo: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
...form.getFieldsValue(),
|
||||
...params,
|
||||
});
|
||||
if (res.code === 200) {
|
||||
setData(res.data.records);
|
||||
setPagination({
|
||||
...pagination,
|
||||
current: res.data.current,
|
||||
total: res.data.total,
|
||||
pageSize: res.data.size,
|
||||
});
|
||||
} else {
|
||||
setData([]);
|
||||
setPagination({ ...pagination, total: 0 });
|
||||
}
|
||||
} catch (err) {
|
||||
message.error('获取数据失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchData({ pageNo: 1 });
|
||||
// eslint-disable-next-line
|
||||
}, []);
|
||||
|
||||
// 表格分页切换
|
||||
const handleTableChange = (pag: any) => {
|
||||
setPagination({
|
||||
...pagination,
|
||||
current: pag.current,
|
||||
pageSize: pag.pageSize,
|
||||
});
|
||||
fetchData({
|
||||
pageNo: pag.current,
|
||||
pageSize: pag.pageSize,
|
||||
});
|
||||
};
|
||||
|
||||
// 搜索
|
||||
const handleSearch = () => {
|
||||
setPagination({ ...pagination, current: 1 });
|
||||
fetchData({ pageNo: 1 });
|
||||
};
|
||||
|
||||
// 重置
|
||||
const handleReset = () => {
|
||||
form.resetFields();
|
||||
setPagination({ ...pagination, current: 1 });
|
||||
fetchData({ pageNo: 1 });
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* 查询表单 */}
|
||||
{searchFormRender}
|
||||
<Form
|
||||
form={form}
|
||||
layout="inline"
|
||||
style={{ marginBottom: 16 }}
|
||||
onFinish={handleSearch}
|
||||
>
|
||||
<Form.Item name="accessTypeText" label="准入方式">
|
||||
<Select options={methodOptions} allowClear style={{ width: 120 }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="deptId" label="准入部门">
|
||||
<Select options={deptOptions} allowClear style={{ width: 120 }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="reviewStatusText" label="流程状态">
|
||||
<Select options={statusOptions} allowClear style={{ width: 120 }} />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" icon={<SearchOutlined />} style={{ marginRight: 8 }}>
|
||||
查询
|
||||
</Button>
|
||||
<Button onClick={handleReset} icon={<ReloadOutlined />}>
|
||||
重置
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
{/* 表格 */}
|
||||
<ProTable
|
||||
<Table
|
||||
columns={columns}
|
||||
actionRef={actionRef}
|
||||
dataSource={tableData}
|
||||
dataSource={data}
|
||||
rowKey="id"
|
||||
search={false}
|
||||
loading={loading}
|
||||
pagination={{
|
||||
current: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
total: pagination.total,
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
pageSize: 10,
|
||||
total: 188,
|
||||
current: 1,
|
||||
}}
|
||||
options={false}
|
||||
|
||||
onChange={handleTableChange}
|
||||
bordered
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user