415 lines
14 KiB
TypeScript
415 lines
14 KiB
TypeScript
import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
|
||
import { Card, Row, Col, Input, Select, Radio, Table, Button, Space, Pagination, Form } from 'antd';
|
||
import { SearchOutlined, ArrowRightOutlined } from '@ant-design/icons';
|
||
import styles from '../supplierTaskManageAdd.less';
|
||
|
||
const { Option } = Select;
|
||
|
||
interface SupplierSelectStepProps {
|
||
formData: any;
|
||
onFormDataChange: (data: any) => void;
|
||
}
|
||
|
||
interface SupplierItem {
|
||
key: string;
|
||
supplierName: string;
|
||
socialCreditCode: string;
|
||
category: string;
|
||
}
|
||
|
||
const SupplierSelectStep = forwardRef<any, SupplierSelectStepProps>(({ formData, onFormDataChange }, ref) => {
|
||
const [filterForm] = Form.useForm();
|
||
const [categoryKeyword, setCategoryKeyword] = useState<string>('');
|
||
const [selectedCategory, setSelectedCategory] = useState<string | undefined>(undefined);
|
||
const [hasPaymentLastYear, setHasPaymentLastYear] = useState<string>('是');
|
||
const [department, setDepartment] = useState<string | undefined>(undefined);
|
||
|
||
const [pendingSuppliers, setPendingSuppliers] = useState<SupplierItem[]>([]);
|
||
const [selectedSuppliers, setSelectedSuppliers] = useState<SupplierItem[]>([]);
|
||
|
||
const [pendingKeyword, setPendingKeyword] = useState<string>('');
|
||
const [selectedKeyword, setSelectedKeyword] = useState<string>('');
|
||
|
||
const [pendingSelectedRowKeys, setPendingSelectedRowKeys] = useState<React.Key[]>([]);
|
||
const [selectedSelectedRowKeys, setSelectedSelectedRowKeys] = useState<React.Key[]>([]);
|
||
|
||
// 暴露表单方法给父组件
|
||
useImperativeHandle(ref, () => ({
|
||
validateFields: () => {
|
||
// 这里可以添加自定义验证逻辑
|
||
return Promise.resolve();
|
||
},
|
||
getFieldsValue: () => {
|
||
return {
|
||
selectedSuppliers,
|
||
supplierIds: selectedSuppliers.map(supplier => ({ id: supplier.key }))
|
||
};
|
||
},
|
||
setFieldsValue: (values: any) => {
|
||
if (values.selectedSuppliers) {
|
||
setSelectedSuppliers(values.selectedSuppliers);
|
||
}
|
||
},
|
||
}));
|
||
|
||
// 初始化数据
|
||
useEffect(() => {
|
||
// 从formData中恢复已选供应商
|
||
if (formData.selectedSuppliers) {
|
||
setSelectedSuppliers(formData.selectedSuppliers);
|
||
}
|
||
|
||
// 初始化筛选表单
|
||
filterForm.setFieldsValue({
|
||
category: selectedCategory,
|
||
categoryKeyword: categoryKeyword,
|
||
categoryRange: undefined,
|
||
hasPaymentLastYear: hasPaymentLastYear,
|
||
department: department
|
||
});
|
||
|
||
// 模拟获取待选供应商列表
|
||
const mockPendingSuppliers: SupplierItem[] = [
|
||
{ key: '1', supplierName: '供应商A', socialCreditCode: '2425322525', category: '润滑油' },
|
||
{ key: '2', supplierName: '供应商B', socialCreditCode: '2425322525', category: '燃油' },
|
||
{ key: '3', supplierName: '供应商C', socialCreditCode: '2425322525', category: '备件' },
|
||
{ key: '4', supplierName: '供应商D', socialCreditCode: '2425322525', category: '润滑油' },
|
||
{ key: '5', supplierName: '供应商E', socialCreditCode: '2425322525', category: '燃油' },
|
||
{ key: '6', supplierName: '供应商F', socialCreditCode: '2425322525', category: '备件' },
|
||
{ key: '7', supplierName: '供应商G', socialCreditCode: '2425322525', category: '润滑油' },
|
||
{ key: '8', supplierName: '供应商H', socialCreditCode: '2425322525', category: '燃油' },
|
||
{ key: '9', supplierName: '供应商I', socialCreditCode: '2425322525', category: '备件' },
|
||
{ key: '10', supplierName: '供应商J', socialCreditCode: '2425322525', category: '计算机' },
|
||
];
|
||
|
||
// 模拟已选供应商列表
|
||
const mockSelectedSuppliers: SupplierItem[] = [
|
||
{ key: '11', supplierName: '供应商A', socialCreditCode: '4636373737', category: '润滑油' },
|
||
{ key: '12', supplierName: '供应商B', socialCreditCode: '4636373737', category: '燃油' },
|
||
{ key: '13', supplierName: '供应商C', socialCreditCode: '4636373737', category: '备件' },
|
||
{ key: '14', supplierName: '供应商D', socialCreditCode: '4636373737', category: '润滑油' },
|
||
{ key: '15', supplierName: '供应商E', socialCreditCode: '4636373737', category: '燃油' },
|
||
{ key: '16', supplierName: '供应商F', socialCreditCode: '4636373737', category: '备件' },
|
||
{ key: '17', supplierName: '供应商G', socialCreditCode: '4636373737', category: '润滑油' },
|
||
{ key: '18', supplierName: '供应商H', socialCreditCode: '4636373737', category: '燃油' },
|
||
{ key: '19', supplierName: '供应商I', socialCreditCode: '4636373737', category: '备件' },
|
||
{ key: '20', supplierName: '供应商J', socialCreditCode: '4636373737', category: '计算机' },
|
||
];
|
||
|
||
setPendingSuppliers(mockPendingSuppliers);
|
||
|
||
// 如果没有从formData中恢复，则使用模拟数据
|
||
if (!formData.selectedSuppliers) {
|
||
setSelectedSuppliers(mockSelectedSuppliers);
|
||
}
|
||
}, [formData]);
|
||
|
||
// 更新表单数据
|
||
const updateFormData = (suppliers: SupplierItem[]) => {
|
||
onFormDataChange({
|
||
selectedSuppliers: suppliers,
|
||
supplierIds: suppliers.map(supplier => ({ id: supplier.key }))
|
||
});
|
||
};
|
||
|
||
// 处理筛选条件变化
|
||
const handleFilterChange = (changedValues: any, allValues: any) => {
|
||
if ('category' in changedValues) {
|
||
setSelectedCategory(changedValues.category);
|
||
}
|
||
if ('categoryKeyword' in changedValues) {
|
||
setCategoryKeyword(changedValues.categoryKeyword);
|
||
}
|
||
if ('hasPaymentLastYear' in changedValues) {
|
||
setHasPaymentLastYear(changedValues.hasPaymentLastYear);
|
||
}
|
||
if ('department' in changedValues) {
|
||
setDepartment(changedValues.department);
|
||
}
|
||
|
||
// 这里可以添加筛选逻辑，根据筛选条件更新待选供应商列表
|
||
};
|
||
|
||
// 处理添加供应商
|
||
const handleAddSuppliers = () => {
|
||
if (pendingSelectedRowKeys.length === 0) return;
|
||
|
||
// 找出选中的供应商
|
||
const suppliersToAdd = pendingSuppliers.filter(item =>
|
||
pendingSelectedRowKeys.includes(item.key)
|
||
);
|
||
|
||
// 更新已选供应商列表
|
||
const newSelectedSuppliers = [...selectedSuppliers, ...suppliersToAdd];
|
||
setSelectedSuppliers(newSelectedSuppliers);
|
||
|
||
// 从待选列表中移除
|
||
const newPendingSuppliers = pendingSuppliers.filter(item =>
|
||
!pendingSelectedRowKeys.includes(item.key)
|
||
);
|
||
setPendingSuppliers(newPendingSuppliers);
|
||
|
||
// 清空选中状态
|
||
setPendingSelectedRowKeys([]);
|
||
|
||
// 更新表单数据
|
||
updateFormData(newSelectedSuppliers);
|
||
};
|
||
|
||
// 处理移除供应商
|
||
const handleRemoveSuppliers = () => {
|
||
if (selectedSelectedRowKeys.length === 0) return;
|
||
|
||
// 找出选中的供应商
|
||
const suppliersToRemove = selectedSuppliers.filter(item =>
|
||
selectedSelectedRowKeys.includes(item.key)
|
||
);
|
||
|
||
// 更新待选供应商列表
|
||
const newPendingSuppliers = [...pendingSuppliers, ...suppliersToRemove];
|
||
setPendingSuppliers(newPendingSuppliers);
|
||
|
||
// 从已选列表中移除
|
||
const newSelectedSuppliers = selectedSuppliers.filter(item =>
|
||
!selectedSelectedRowKeys.includes(item.key)
|
||
);
|
||
setSelectedSuppliers(newSelectedSuppliers);
|
||
|
||
// 清空选中状态
|
||
setSelectedSelectedRowKeys([]);
|
||
|
||
// 更新表单数据
|
||
updateFormData(newSelectedSuppliers);
|
||
};
|
||
|
||
// 过滤待选供应商
|
||
const filteredPendingSuppliers = pendingSuppliers.filter(item => {
|
||
// 按关键词过滤
|
||
const matchKeyword = pendingKeyword ?
|
||
(item.supplierName.includes(pendingKeyword) ||
|
||
item.socialCreditCode.includes(pendingKeyword)) : true;
|
||
|
||
return matchKeyword;
|
||
});
|
||
|
||
// 过滤已选供应商
|
||
const filteredSelectedSuppliers = selectedSuppliers.filter(item => {
|
||
// 按关键词过滤
|
||
const matchKeyword = selectedKeyword ?
|
||
(item.supplierName.includes(selectedKeyword) ||
|
||
item.socialCreditCode.includes(selectedKeyword)) : true;
|
||
|
||
return matchKeyword;
|
||
});
|
||
|
||
// 表格列定义
|
||
const columns = [
|
||
{
|
||
title: '供应商名称',
|
||
dataIndex: 'supplierName',
|
||
key: 'supplierName',
|
||
},
|
||
{
|
||
title: '统一社会信用代码',
|
||
dataIndex: 'socialCreditCode',
|
||
key: 'socialCreditCode',
|
||
},
|
||
{
|
||
title: '准入品类',
|
||
dataIndex: 'category',
|
||
key: 'category',
|
||
}
|
||
];
|
||
|
||
// 待选表格行选择配置
|
||
const pendingRowSelection = {
|
||
selectedRowKeys: pendingSelectedRowKeys,
|
||
onChange: (selectedRowKeys: React.Key[]) => {
|
||
setPendingSelectedRowKeys(selectedRowKeys);
|
||
}
|
||
};
|
||
|
||
// 已选表格行选择配置
|
||
const selectedRowSelection = {
|
||
selectedRowKeys: selectedSelectedRowKeys,
|
||
onChange: (selectedRowKeys: React.Key[]) => {
|
||
setSelectedSelectedRowKeys(selectedRowKeys);
|
||
}
|
||
};
|
||
|
||
// 部门选项
|
||
const departmentOptions = [
|
||
{ value: '1', label: '采购部' },
|
||
{ value: '2', label: '技术部' },
|
||
{ value: '3', label: '质量部' },
|
||
{ value: '4', label: '生产部' },
|
||
];
|
||
|
||
// 类别选项
|
||
const categoryOptions = [
|
||
{ value: '润滑油', label: '润滑油' },
|
||
{ value: '燃油', label: '燃油' },
|
||
{ value: '备件', label: '备件' },
|
||
{ value: '计算机', label: '计算机' },
|
||
];
|
||
|
||
return (
|
||
<div className={styles.supplierSelectStep}>
|
||
<Card title="筛选条件" bordered={false} className="inner-card">
|
||
<Form
|
||
form={filterForm}
|
||
layout="horizontal"
|
||
labelCol={{ span: 6 }}
|
||
wrapperCol={{ span: 18 }}
|
||
onValuesChange={handleFilterChange}
|
||
>
|
||
<Row gutter={24}>
|
||
<Col span={8}>
|
||
<Form.Item label="选择类别" name="category">
|
||
<Select
|
||
placeholder="请选择"
|
||
allowClear
|
||
>
|
||
{categoryOptions.map(option => (
|
||
<Option key={option.value} value={option.value}>{option.label}</Option>
|
||
))}
|
||
</Select>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item label="品类关键字" name="categoryKeyword">
|
||
<Input placeholder="请输入" allowClear />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item label="品类范围" name="categoryRange">
|
||
<Input placeholder="请输入" allowClear />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item label="近一年有付款" name="hasPaymentLastYear" initialValue="是">
|
||
<Radio.Group>
|
||
<Radio value="是">是</Radio>
|
||
<Radio value="否">否</Radio>
|
||
</Radio.Group>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item label="准入部门" name="department">
|
||
<Select
|
||
placeholder="请选择"
|
||
allowClear
|
||
>
|
||
{departmentOptions.map(option => (
|
||
<Option key={option.value} value={option.value}>{option.label}</Option>
|
||
))}
|
||
</Select>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item wrapperCol={{ offset: 6, span: 18 }}>
|
||
<Button type="primary" onClick={() => filterForm.submit()}>
|
||
查询
|
||
</Button>
|
||
<Button style={{ marginLeft: 8 }} onClick={() => filterForm.resetFields()}>
|
||
重置
|
||
</Button>
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
</Form>
|
||
</Card>
|
||
|
||
<Row gutter={24} style={{ marginTop: '16px' }}>
|
||
<Col span={11}>
|
||
<Card
|
||
title="待选列表"
|
||
bordered={false}
|
||
className="inner-card"
|
||
extra={<span>2/50项</span>}
|
||
>
|
||
<div className="search-bar">
|
||
<Input
|
||
placeholder="输入关键词"
|
||
prefix={<SearchOutlined />}
|
||
value={pendingKeyword}
|
||
onChange={e => setPendingKeyword(e.target.value)}
|
||
allowClear
|
||
/>
|
||
</div>
|
||
<Table
|
||
rowSelection={pendingRowSelection}
|
||
columns={columns}
|
||
dataSource={filteredPendingSuppliers}
|
||
pagination={false}
|
||
size="middle"
|
||
rowKey="key"
|
||
/>
|
||
<div className="pagination-container">
|
||
<Pagination
|
||
size="small"
|
||
total={50}
|
||
current={1}
|
||
pageSize={10}
|
||
showSizeChanger={false}
|
||
/>
|
||
</div>
|
||
</Card>
|
||
</Col>
|
||
<Col span={2} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
||
<Space direction="vertical">
|
||
<Button
|
||
type="primary"
|
||
icon={<ArrowRightOutlined />}
|
||
onClick={handleAddSuppliers}
|
||
disabled={pendingSelectedRowKeys.length === 0}
|
||
/>
|
||
<Button
|
||
icon={<ArrowRightOutlined style={{ transform: 'rotate(180deg)' }} />}
|
||
onClick={handleRemoveSuppliers}
|
||
disabled={selectedSelectedRowKeys.length === 0}
|
||
/>
|
||
</Space>
|
||
</Col>
|
||
<Col span={11}>
|
||
<Card
|
||
title="已选列表"
|
||
bordered={false}
|
||
className="inner-card"
|
||
extra={<span>2/50项</span>}
|
||
>
|
||
<div className="search-bar">
|
||
<Input
|
||
placeholder="输入关键词"
|
||
prefix={<SearchOutlined />}
|
||
value={selectedKeyword}
|
||
onChange={e => setSelectedKeyword(e.target.value)}
|
||
allowClear
|
||
/>
|
||
</div>
|
||
<Table
|
||
rowSelection={selectedRowSelection}
|
||
columns={columns}
|
||
dataSource={filteredSelectedSuppliers}
|
||
pagination={false}
|
||
size="middle"
|
||
rowKey="key"
|
||
/>
|
||
<div className="pagination-container">
|
||
<Pagination
|
||
size="small"
|
||
total={50}
|
||
current={1}
|
||
pageSize={10}
|
||
showSizeChanger={false}
|
||
/>
|
||
</div>
|
||
</Card>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
);
|
||
});
|
||
|
||
export default SupplierSelectStep;
|