供应商退出、准入、 工作台
This commit is contained in:
孙景学
@ -1,91 +1,109 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Modal, Table, Button, Checkbox, Row, Col, Input, Select, Pagination, Form, Space } from "antd";
|
||||
import {
|
||||
Modal, Table, Button, Checkbox, Row, Col, Input, Select, Form, Space, message
|
||||
} from "antd";
|
||||
import { getSupplierCategoryPage } from '../services';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
// mock 数据
|
||||
const mockSuppliers = Array.from({ length: 25 }).map((_, i) => ({
|
||||
id: i + 1,
|
||||
name: `XXXX${i + 1}有限公司`,
|
||||
unit: "散运三级单位",
|
||||
dept: "采购部",
|
||||
category: ["燃油", "润滑油", "备件"][i % 3],
|
||||
evalLevel: ["A", "B", "C", "D"][i % 4],
|
||||
}));
|
||||
interface Supplier {
|
||||
id: number;
|
||||
supplierId: string;
|
||||
categoryId: string;
|
||||
supplierName: string;
|
||||
|
||||
const evalOptions = [
|
||||
{ value: "", label: "请选择" },
|
||||
{ value: "A", label: "A" },
|
||||
{ value: "B", label: "B" },
|
||||
{ value: "C", label: "C" },
|
||||
{ value: "D", label: "D" },
|
||||
];
|
||||
unit: string; // 准入部门
|
||||
accessTime: string; // 准入时间
|
||||
categoryName: string; // 准入品类
|
||||
lastEval: string; // 最近一次评价
|
||||
lastEvalDate: string; // 评价时间
|
||||
|
||||
}
|
||||
|
||||
const categoryOptions = [
|
||||
{ value: "", label: "请选择" },
|
||||
{ value: "燃油", label: "燃油" },
|
||||
{ value: "润滑油", label: "润滑油" },
|
||||
{ value: "备件", label: "备件" },
|
||||
];
|
||||
interface SupplierSelectModalProps {
|
||||
visible: boolean;
|
||||
selectedSuppliers: Supplier[];
|
||||
onOk: (suppliers: Supplier[]) => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
const PAGE_SIZE = 5;
|
||||
|
||||
const SupplierSelectModal = ({
|
||||
const SupplierSelectModal: React.FC<SupplierSelectModalProps> = ({
|
||||
visible,
|
||||
selectedSuppliers,
|
||||
onOk,
|
||||
onCancel,
|
||||
selectedSuppliers,
|
||||
}) => {
|
||||
// 查询表单
|
||||
const [form] = Form.useForm();
|
||||
// 选中
|
||||
const [leftSelected, setLeftSelected] = useState([]);
|
||||
const [rightSelected, setRightSelected] = useState([]);
|
||||
const [rightData, setRightData] = useState(selectedSuppliers || []);
|
||||
const [leftPage, setLeftPage] = useState(1);
|
||||
const [query, setQuery] = useState({});
|
||||
|
||||
// 数据过滤
|
||||
const filteredSuppliers = mockSuppliers.filter(item => {
|
||||
const { name = "", evalLevel = "", category = "" } = query;
|
||||
return (
|
||||
(!name || item.name.includes(name)) &&
|
||||
(!evalLevel || item.evalLevel === evalLevel) &&
|
||||
(!category || item.category === category)
|
||||
);
|
||||
});
|
||||
const pagedSuppliers = filteredSuppliers.slice((leftPage - 1) * PAGE_SIZE, leftPage * PAGE_SIZE);
|
||||
const [leftSelected, setLeftSelected] = useState<number[]>([]);
|
||||
const [rightSelected, setRightSelected] = useState<number[]>([]);
|
||||
const [rightData, setRightData] = useState<Supplier[]>([]);
|
||||
const [data, setData] = useState<Supplier[]>([]);
|
||||
const [pagination, setPagination] = useState({ current: 1, pageSize: 5, total: 0 });
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setRightData(selectedSuppliers || []);
|
||||
}, [selectedSuppliers, visible]);
|
||||
if (visible) {
|
||||
setRightData(selectedSuppliers || []);
|
||||
fetchData();
|
||||
}
|
||||
}, [visible]);
|
||||
|
||||
// 查询
|
||||
const handleSearch = () => {
|
||||
setQuery(form.getFieldsValue());
|
||||
setLeftPage(1);
|
||||
setLeftSelected([]);
|
||||
const fetchData = async (params: any = {}, pageNo = 1, pageSize = 5) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await getSupplierCategoryPage({ ...params, pageNo, pageSize });
|
||||
if (res.code === 200) {
|
||||
setData(res.data.records);
|
||||
setPagination({ current: pageNo, pageSize: pageSize, total: res.data.total });
|
||||
} else {
|
||||
message.error('获取数据失败');
|
||||
}
|
||||
} catch {
|
||||
message.error('获取数据异常');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
// 重置
|
||||
|
||||
const handleSearch = () => {
|
||||
const values = form.getFieldsValue();
|
||||
fetchData(values, 1, pagination.pageSize);
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
form.resetFields();
|
||||
setQuery({});
|
||||
setLeftPage(1);
|
||||
fetchData({}, 1, pagination.pageSize);
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
const added = data.filter(s => leftSelected.includes(s.id));
|
||||
const combined = [...rightData, ...added.filter(i => !rightData.some(r => r.id === i.id))];
|
||||
setRightData(combined);
|
||||
setLeftSelected([]);
|
||||
};
|
||||
|
||||
const leftColumns = [
|
||||
const handleRemove = () => {
|
||||
setRightData(rightData.filter(i => !rightSelected.includes(i.id)));
|
||||
setRightSelected([]);
|
||||
};
|
||||
|
||||
const handleOk = () => {
|
||||
onOk(rightData);
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: <Checkbox
|
||||
checked={leftSelected.length === pagedSuppliers.length && pagedSuppliers.length > 0}
|
||||
indeterminate={leftSelected.length > 0 && leftSelected.length < pagedSuppliers.length}
|
||||
checked={leftSelected.length === data.length && data.length > 0}
|
||||
indeterminate={leftSelected.length > 0 && leftSelected.length < data.length}
|
||||
onChange={e => {
|
||||
setLeftSelected(e.target.checked ? pagedSuppliers.map(i => i.id) : []);
|
||||
setLeftSelected(e.target.checked ? data.map(i => i.id) : []);
|
||||
}}
|
||||
>全选</Checkbox>,
|
||||
dataIndex: "select",
|
||||
width: 60,
|
||||
render: (_: any, record) => (
|
||||
width: 80,
|
||||
render: (_: any, record: Supplier) => (
|
||||
<Checkbox
|
||||
checked={leftSelected.includes(record.id)}
|
||||
onChange={e => {
|
||||
@ -96,14 +114,12 @@ const SupplierSelectModal = ({
|
||||
>选择</Checkbox>
|
||||
)
|
||||
},
|
||||
{ title: "供应商名称", dataIndex: "name" },
|
||||
{ title: "准入单位", dataIndex: "unit" },
|
||||
{ title: "准入部门", dataIndex: "dept" },
|
||||
{ title: "准入品类", dataIndex: "category" },
|
||||
{ title: "最近一次评价等级", dataIndex: "evalLevel" }
|
||||
{ title: "供应商名称", dataIndex: "supplierName" },
|
||||
{ title: "准入单位", dataIndex: "deptId" },
|
||||
{ title: "准入部门", dataIndex: "deptId" },
|
||||
{ title: "准入品类", dataIndex: "categoryName" }
|
||||
];
|
||||
|
||||
// 已选表格
|
||||
const rightColumns = [
|
||||
{
|
||||
title: <Checkbox
|
||||
@ -114,8 +130,8 @@ const SupplierSelectModal = ({
|
||||
}}
|
||||
>全选</Checkbox>,
|
||||
dataIndex: "select",
|
||||
width: 60,
|
||||
render: (_: any, record) => (
|
||||
width: 80,
|
||||
render: (_: any, record: Supplier) => (
|
||||
<Checkbox
|
||||
checked={rightSelected.includes(record.id)}
|
||||
onChange={e => {
|
||||
@ -126,31 +142,12 @@ const SupplierSelectModal = ({
|
||||
>选择</Checkbox>
|
||||
)
|
||||
},
|
||||
{ title: "供应商名称", dataIndex: "name" },
|
||||
{ title: "准入单位", dataIndex: "unit" },
|
||||
{ title: "准入部门", dataIndex: "dept" },
|
||||
{ title: "准入品类", dataIndex: "category" }
|
||||
{ title: "供应商名称", dataIndex: "supplierName" },
|
||||
{ title: "准入单位", dataIndex: "deptId" },
|
||||
{ title: "准入部门", dataIndex: "deptId" },
|
||||
{ title: "准入品类", dataIndex: "categoryName" }
|
||||
];
|
||||
|
||||
// 添加
|
||||
const handleAdd = () => {
|
||||
const added = pagedSuppliers.filter(s => leftSelected.includes(s.id));
|
||||
const combined = [...rightData, ...added.filter(i => !rightData.some(r => r.id === i.id))];
|
||||
setRightData(combined);
|
||||
setLeftSelected([]);
|
||||
};
|
||||
|
||||
// 移除
|
||||
const handleRemove = () => {
|
||||
setRightData(rightData.filter(i => !rightSelected.includes(i.id)));
|
||||
setRightSelected([]);
|
||||
};
|
||||
|
||||
// 确认
|
||||
const handleOk = () => {
|
||||
onOk(rightData);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title="选择供应商"
|
||||
@ -163,19 +160,22 @@ const SupplierSelectModal = ({
|
||||
cancelText="取消"
|
||||
bodyStyle={{ padding: 24 }}
|
||||
>
|
||||
{/* 查询区 */}
|
||||
<Form layout="inline" form={form} style={{ marginBottom: 16 }}>
|
||||
<Form.Item name="name" label="供应商名称">
|
||||
<Input style={{ width: 180 }} allowClear />
|
||||
</Form.Item>
|
||||
<Form.Item name="evalLevel" label="最近一次评价等级">
|
||||
<Select style={{ width: 140 }}>
|
||||
{evalOptions.map(opt => <Option value={opt.value} key={opt.value}>{opt.label}</Option>)}
|
||||
<Select style={{ width: 140 }} allowClear>
|
||||
{['A', 'B', 'C', 'D'].map(level => (
|
||||
<Option key={level} value={level}>{level}</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item name="category" label="准入品类">
|
||||
<Select style={{ width: 140 }}>
|
||||
{categoryOptions.map(opt => <Option value={opt.value} key={opt.value}>{opt.label}</Option>)}
|
||||
<Select style={{ width: 140 }} allowClear>
|
||||
{['燃油', '润滑油', '备件'].map(cat => (
|
||||
<Option key={cat} value={cat}>{cat}</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
@ -185,26 +185,23 @@ const SupplierSelectModal = ({
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
<Row gutter={32}>
|
||||
<Col span={11}>
|
||||
<div style={{ marginBottom: 8 }}>备选供应商 <span style={{ color: "#1890ff" }}>{filteredSuppliers.length}</span></div>
|
||||
<div style={{ marginBottom: 8 }}>备选供应商</div>
|
||||
<Table
|
||||
columns={leftColumns}
|
||||
dataSource={pagedSuppliers}
|
||||
rowKey="id"
|
||||
pagination={false}
|
||||
dataSource={data}
|
||||
columns={columns}
|
||||
loading={loading}
|
||||
pagination={pagination}
|
||||
onChange={(pag) => {
|
||||
const values = form.getFieldsValue();
|
||||
fetchData(values, pag.current!, pag.pageSize!);
|
||||
}}
|
||||
size="small"
|
||||
bordered
|
||||
/>
|
||||
<div style={{ textAlign: "right", marginTop: 8 }}>
|
||||
<Pagination
|
||||
simple
|
||||
current={leftPage}
|
||||
pageSize={PAGE_SIZE}
|
||||
total={filteredSuppliers.length}
|
||||
onChange={setLeftPage}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={2} style={{ textAlign: "center", display: "flex", flexDirection: "column", justifyContent: "center" }}>
|
||||
<Button type="primary" disabled={!leftSelected.length} onClick={handleAdd} style={{ marginBottom: 16 }}>{">"}</Button>
|
||||
@ -213,9 +210,9 @@ const SupplierSelectModal = ({
|
||||
<Col span={11}>
|
||||
<div style={{ marginBottom: 8 }}>已选供应商</div>
|
||||
<Table
|
||||
columns={rightColumns}
|
||||
dataSource={rightData}
|
||||
rowKey="id"
|
||||
dataSource={rightData}
|
||||
columns={rightColumns}
|
||||
pagination={false}
|
||||
size="small"
|
||||
bordered
|
||||
|
||||
Reference in New Issue
Block a user