389 lines
12 KiB
TypeScript
389 lines
12 KiB
TypeScript
|
import React, { useState, useEffect } from 'react';
|
|||
|
|
import { Input, Select, Row, Col, Table, Button, Form, Tooltip, message } from 'antd';
|
|||
|
|
import { RightOutlined, LeftOutlined } from '@ant-design/icons';
|
|||
|
|
import { getSupplierPage } from '@/servers/api/supplier';
|
|||
|
|
import './SupplierSelector.less';
|
|||
|
|
|
|||
|
|
const { Option } = Select;
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* SupplierSelector 组件的属性接口
|
|||
|
|
* @interface SupplierSelectorProps
|
|||
|
|
* @property {Function} [onSelect] - 当选择供应商发生变化时的回调函数
|
|||
|
|
* @property {any[]} [selectedSuppliers] - 初始已选择的供应商列表
|
|||
|
|
* @property {string[]} [deptList] - 部门列表，用于筛选供应商
|
|||
|
|
* @property {boolean} [showDeptFilter] - 是否显示部门筛选，默认显示
|
|||
|
|
* @property {boolean} [showCompanyFilter] - 是否显示公司名称筛选，默认不显示
|
|||
|
|
*/
|
|||
|
|
interface SupplierSelectorProps {
|
|||
|
|
onSelect?: (selected: any[]) => void;
|
|||
|
|
selectedSuppliers?: any[];
|
|||
|
|
deptList?: string[];
|
|||
|
|
showDeptFilter?: boolean;
|
|||
|
|
showCompanyFilter?: boolean;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 供应商数据项接口，对应后端SupplierPageVo
|
|||
|
|
* @interface SupplierItem
|
|||
|
|
* @property {string} id - 供应商ID
|
|||
|
|
* @property {string} name - 供应商名称
|
|||
|
|
* @property {string} [deptId] - 部门ID
|
|||
|
|
* @property {string} [deptName] - 部门名称
|
|||
|
|
* @property {string} [companyName] - 公司名称
|
|||
|
|
* @property {string} [categoryName] - 所属品类
|
|||
|
|
* @property {string} [levelName] - 最新评价等级
|
|||
|
|
* @property {Date} [admissionTime] - 准入时间
|
|||
|
|
* @property {Date} [evaluationTime] - 最新评价时间
|
|||
|
|
* @property {any} [key: string] - 其他属性
|
|||
|
|
*/
|
|||
|
|
interface SupplierItem {
|
|||
|
|
id: string;
|
|||
|
|
name: string;
|
|||
|
|
deptId?: string;
|
|||
|
|
deptName?: string;
|
|||
|
|
companyName?: string;
|
|||
|
|
categoryName?: string;
|
|||
|
|
levelName?: string;
|
|||
|
|
admissionTime?: Date;
|
|||
|
|
evaluationTime?: Date;
|
|||
|
|
[key: string]: any;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 供应商选择器组件
|
|||
|
|
* 用于从系统中选择供应商数据，支持搜索过滤、分页加载、双列表展示
|
|||
|
|
*
|
|||
|
|
* @param {SupplierSelectorProps} props - 组件属性
|
|||
|
|
* @returns {React.ReactElement} 供应商选择器组件
|
|||
|
|
*/
|
|||
|
|
const SupplierSelector: React.FC<SupplierSelectorProps> = ({
|
|||
|
|
onSelect,
|
|||
|
|
selectedSuppliers: initialSelectedSuppliers = [],
|
|||
|
|
deptList = [],
|
|||
|
|
showDeptFilter = true,
|
|||
|
|
showCompanyFilter = false
|
|||
|
|
}) => {
|
|||
|
|
// 表单实例，用于管理查询条件
|
|||
|
|
const [form] = Form.useForm();
|
|||
|
|
|
|||
|
|
// 待选供应商数据列表
|
|||
|
|
const [tableListData, setTableListData] = useState<SupplierItem[]>([]);
|
|||
|
|
|
|||
|
|
// 分页信息
|
|||
|
|
const [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 0 });
|
|||
|
|
|
|||
|
|
// 加载状态
|
|||
|
|
const [loading, setLoading] = useState(false);
|
|||
|
|
|
|||
|
|
// 左侧待选列表中已选中的项的ID
|
|||
|
|
const [leftSelected, setLeftSelected] = useState<React.Key[]>([]);
|
|||
|
|
|
|||
|
|
// 右侧已选列表中选中的项的ID
|
|||
|
|
const [rightSelected, setRightSelected] = useState<React.Key[]>([]);
|
|||
|
|
|
|||
|
|
// 最终已选择的供应商列表
|
|||
|
|
const [chosenSuppliers, setChosenSuppliers] = useState<SupplierItem[]>(initialSelectedSuppliers);
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 监听初始已选供应商变化，更新内部状态
|
|||
|
|
*/
|
|||
|
|
useEffect(() => {
|
|||
|
|
setChosenSuppliers(initialSelectedSuppliers);
|
|||
|
|
}, [initialSelectedSuppliers]);
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 合并供应商列表并去重
|
|||
|
|
* @param {SupplierItem[]} suppliers - 原有的供应商列表
|
|||
|
|
* @param {SupplierItem[]} selected - 新选择的供应商列表
|
|||
|
|
* @returns {SupplierItem[]} 合并后的供应商列表，去除重复项
|
|||
|
|
*/
|
|||
|
|
const filteredData = (suppliers: SupplierItem[], selected: SupplierItem[]) => {
|
|||
|
|
// 创建已有供应商ID的集合，用于快速查找
|
|||
|
|
const ids = new Set(suppliers.map((item: SupplierItem) => item.id));
|
|||
|
|
// 过滤出未在原列表中出现的供应商
|
|||
|
|
const newSelected = selected.filter((item: SupplierItem) => !ids.has(item.id));
|
|||
|
|
// 合并列表
|
|||
|
|
return [...suppliers, ...newSelected];
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 将左侧选中的供应商移动到右侧已选列表
|
|||
|
|
*/
|
|||
|
|
const moveToRight = () => {
|
|||
|
|
// 获取左侧选中的供应商数据
|
|||
|
|
const selected = tableListData.filter((item: SupplierItem) => leftSelected.includes(item.id));
|
|||
|
|
// 合并到已选列表并去重
|
|||
|
|
const chosenSuppliersNew = filteredData(chosenSuppliers, selected);
|
|||
|
|
// 更新已选列表
|
|||
|
|
setChosenSuppliers(chosenSuppliersNew);
|
|||
|
|
// 清空左侧选择状态
|
|||
|
|
setLeftSelected([]);
|
|||
|
|
// 触发外部回调
|
|||
|
|
onSelect?.(chosenSuppliersNew);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 将右侧选中的供应商从已选列表中移除
|
|||
|
|
*/
|
|||
|
|
const moveToLeft = () => {
|
|||
|
|
// 过滤掉右侧选中的供应商
|
|||
|
|
const remaining = chosenSuppliers.filter((item: SupplierItem) => !rightSelected.includes(item.id));
|
|||
|
|
// 更新已选列表
|
|||
|
|
setChosenSuppliers(remaining);
|
|||
|
|
// 清空右侧选择状态
|
|||
|
|
setRightSelected([]);
|
|||
|
|
// 触发外部回调
|
|||
|
|
onSelect?.(remaining);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取供应商列表数据
|
|||
|
|
* @param {any} values - 查询条件
|
|||
|
|
* @param {number} pageNo - 页码
|
|||
|
|
* @param {number} pageSize - 每页数量
|
|||
|
|
*/
|
|||
|
|
const getTableList = async (values: any = {}, pageNo: number = 1, pageSize: number = 10) => {
|
|||
|
|
setLoading(true);
|
|||
|
|
try {
|
|||
|
|
// 整理查询参数
|
|||
|
|
const params = {
|
|||
|
|
...values,
|
|||
|
|
pageNo,
|
|||
|
|
pageSize,
|
|||
|
|
deptList: deptList.length > 0 ? deptList : undefined
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 调用API获取供应商列表
|
|||
|
|
const response = await getSupplierPage(params);
|
|||
|
|
|
|||
|
|
if (response && response.code === 200) {
|
|||
|
|
// 请求成功，更新数据和分页信息
|
|||
|
|
setTableListData(response.data.records || []);
|
|||
|
|
setPagination({
|
|||
|
|
current: pageNo,
|
|||
|
|
pageSize,
|
|||
|
|
total: response.data.total || 0
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
// 请求失败，显示错误信息
|
|||
|
|
message.error(response?.message || '获取供应商列表失败');
|
|||
|
|
|
|||
|
|
// 使用mock数据作为备用
|
|||
|
|
setTableListData([
|
|||
|
|
{ id: '1', name: '供应商A', deptName: '采购部', companyName: '公司A', categoryName: '润滑油' },
|
|||
|
|
{ id: '2', name: '供应商B', deptName: '技术部', companyName: '公司B', categoryName: '燃油' },
|
|||
|
|
{ id: '3', name: '供应商C', deptName: '质量部', companyName: '公司C', categoryName: '备件' },
|
|||
|
|
{ id: '4', name: '供应商D', deptName: '采购部', companyName: '公司D', categoryName: '计算机' },
|
|||
|
|
{ id: '5', name: '供应商E', deptName: '技术部', companyName: '公司E', categoryName: '通信设备' },
|
|||
|
|
]);
|
|||
|
|
setPagination({ current: 1, pageSize: 10, total: 5 });
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
// 处理异常情况
|
|||
|
|
console.error('获取供应商列表出错:', error);
|
|||
|
|
message.error('获取供应商列表失败，请稍后重试');
|
|||
|
|
|
|||
|
|
// 使用mock数据作为备用
|
|||
|
|
setTableListData([
|
|||
|
|
{ id: '1', name: '供应商A', deptName: '采购部', companyName: '公司A', categoryName: '润滑油' },
|
|||
|
|
{ id: '2', name: '供应商B', deptName: '技术部', companyName: '公司B', categoryName: '燃油' },
|
|||
|
|
{ id: '3', name: '供应商C', deptName: '质量部', companyName: '公司C', categoryName: '备件' },
|
|||
|
|
{ id: '4', name: '供应商D', deptName: '采购部', companyName: '公司D', categoryName: '计算机' },
|
|||
|
|
{ id: '5', name: '供应商E', deptName: '技术部', companyName: '公司E', categoryName: '通信设备' },
|
|||
|
|
]);
|
|||
|
|
setPagination({ current: 1, pageSize: 10, total: 5 });
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 组件初始化时加载数据
|
|||
|
|
*/
|
|||
|
|
useEffect(() => {
|
|||
|
|
const values = form.getFieldsValue();
|
|||
|
|
getTableList(values, 1, 10);
|
|||
|
|
}, [deptList]);
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 处理查询表单提交
|
|||
|
|
* @param {any} values - 表单值
|
|||
|
|
*/
|
|||
|
|
const handleSearch = (values: any) => {
|
|||
|
|
getTableList(values, 1, pagination.pageSize);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 重置查询表单并重新加载数据
|
|||
|
|
*/
|
|||
|
|
const handleReset = () => {
|
|||
|
|
form.resetFields();
|
|||
|
|
const values = form.getFieldsValue();
|
|||
|
|
getTableList(values, 1, pagination.pageSize);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 处理表格分页变化
|
|||
|
|
* @param {any} paginationInfo - 分页信息
|
|||
|
|
*/
|
|||
|
|
const handleTableChange = (paginationInfo: any) => {
|
|||
|
|
const values = form.getFieldsValue();
|
|||
|
|
getTableList(values, paginationInfo.current, paginationInfo.pageSize);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 表格列定义
|
|||
|
|
const columns = [
|
|||
|
|
{
|
|||
|
|
title: '供应商名称',
|
|||
|
|
dataIndex: 'name',
|
|||
|
|
ellipsis: true,
|
|||
|
|
render: (name: string) => (
|
|||
|
|
<Tooltip placement="topLeft" title={name}>
|
|||
|
|
{name}
|
|||
|
|
</Tooltip>
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '所属品类',
|
|||
|
|
dataIndex: 'categoryName',
|
|||
|
|
ellipsis: true,
|
|||
|
|
render: (categoryName: string) => (
|
|||
|
|
<Tooltip placement="topLeft" title={categoryName}>
|
|||
|
|
{categoryName || '-'}
|
|||
|
|
</Tooltip>
|
|||
|
|
),
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// 如果显示部门筛选，添加部门列
|
|||
|
|
if (showDeptFilter) {
|
|||
|
|
columns.push({
|
|||
|
|
title: '部门',
|
|||
|
|
dataIndex: 'deptName',
|
|||
|
|
ellipsis: true,
|
|||
|
|
render: (deptName: string) => (
|
|||
|
|
<Tooltip placement="topLeft" title={deptName}>
|
|||
|
|
{deptName || '-'}
|
|||
|
|
</Tooltip>
|
|||
|
|
)
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果显示公司名称筛选，添加公司名称列
|
|||
|
|
if (showCompanyFilter) {
|
|||
|
|
columns.push({
|
|||
|
|
title: '公司名称',
|
|||
|
|
dataIndex: 'companyName',
|
|||
|
|
ellipsis: true,
|
|||
|
|
render: (companyName: string) => (
|
|||
|
|
<Tooltip placement="topLeft" title={companyName}>
|
|||
|
|
{companyName || '-'}
|
|||
|
|
</Tooltip>
|
|||
|
|
),
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="supplier-selector">
|
|||
|
|
{/* 查询表单 */}
|
|||
|
|
<Form layout="inline" form={form} onFinish={handleSearch} style={{ marginBottom: 16 }}>
|
|||
|
|
<Form.Item name="name" label="供应商名称">
|
|||
|
|
<Input placeholder="供应商名称" allowClear />
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
{showDeptFilter && (
|
|||
|
|
<Form.Item name="deptId" label="部门">
|
|||
|
|
<Select placeholder="请选择部门" allowClear style={{ width: 150 }}>
|
|||
|
|
<Option value="1">采购部</Option>
|
|||
|
|
<Option value="2">技术部</Option>
|
|||
|
|
<Option value="3">质量部</Option>
|
|||
|
|
</Select>
|
|||
|
|
</Form.Item>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{showCompanyFilter && (
|
|||
|
|
<Form.Item name="companyName" label="公司名称">
|
|||
|
|
<Input placeholder="公司名称" allowClear />
|
|||
|
|
</Form.Item>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<Form.Item name="categoryName" label="所属品类">
|
|||
|
|
<Input placeholder="所属品类" allowClear />
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Form.Item>
|
|||
|
|
<Button type="primary" htmlType="submit">查询</Button>
|
|||
|
|
</Form.Item>
|
|||
|
|
<Form.Item>
|
|||
|
|
<Button onClick={handleReset}>重置</Button>
|
|||
|
|
</Form.Item>
|
|||
|
|
</Form>
|
|||
|
|
|
|||
|
|
{/* 供应商选择区域 */}
|
|||
|
|
<Row gutter={16} className="supplier-lists">
|
|||
|
|
{/* 左侧待选列表 */}
|
|||
|
|
<Col span={10}>
|
|||
|
|
<div className="list-title">
|
|||
|
|
待选供应商
|
|||
|
|
<span className="search-count">{pagination.total}项</span>
|
|||
|
|
</div>
|
|||
|
|
<Table
|
|||
|
|
rowSelection={{
|
|||
|
|
type: 'checkbox',
|
|||
|
|
onChange: setLeftSelected,
|
|||
|
|
selectedRowKeys: leftSelected
|
|||
|
|
}}
|
|||
|
|
rowKey="id"
|
|||
|
|
dataSource={tableListData}
|
|||
|
|
columns={columns}
|
|||
|
|
loading={loading}
|
|||
|
|
pagination={pagination}
|
|||
|
|
onChange={handleTableChange}
|
|||
|
|
scroll={{ y: 300 }}
|
|||
|
|
size="middle"
|
|||
|
|
/>
|
|||
|
|
</Col>
|
|||
|
|
|
|||
|
|
{/* 中间操作按钮 */}
|
|||
|
|
<Col span={4} className="transfer-buttons">
|
|||
|
|
<Button
|
|||
|
|
type="primary"
|
|||
|
|
icon={<RightOutlined />}
|
|||
|
|
onClick={moveToRight}
|
|||
|
|
disabled={leftSelected.length === 0}
|
|||
|
|
/>
|
|||
|
|
<Button
|
|||
|
|
icon={<LeftOutlined />}
|
|||
|
|
onClick={moveToLeft}
|
|||
|
|
disabled={rightSelected.length === 0}
|
|||
|
|
/>
|
|||
|
|
</Col>
|
|||
|
|
|
|||
|
|
{/* 右侧已选列表 */}
|
|||
|
|
<Col span={10}>
|
|||
|
|
<div className="list-title">
|
|||
|
|
已选供应商
|
|||
|
|
<span className="search-count">{chosenSuppliers.length}项</span>
|
|||
|
|
</div>
|
|||
|
|
<Table
|
|||
|
|
rowSelection={{
|
|||
|
|
type: 'checkbox',
|
|||
|
|
onChange: setRightSelected,
|
|||
|
|
selectedRowKeys: rightSelected
|
|||
|
|
}}
|
|||
|
|
columns={columns}
|
|||
|
|
dataSource={chosenSuppliers}
|
|||
|
|
rowKey="id"
|
|||
|
|
pagination={false}
|
|||
|
|
scroll={{ y: 300 }}
|
|||
|
|
size="middle"
|
|||
|
|
/>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default SupplierSelector;
|