暂存评价任务新增
This commit is contained in:
linxd
@ -0,0 +1,36 @@
|
||||
import React from 'react';
|
||||
import { Modal } from 'antd';
|
||||
import EvaluateTaskPersonnelSelector from '@/components/EvaluateTaskPersonnelSelector/EvaluateTaskPersonnelSelector';
|
||||
import type { PersonnelItem } from '@/servers/types/evaluator';
|
||||
|
||||
interface BatchEvaluatorModalProps {
|
||||
visible: boolean;
|
||||
onCancel: () => void;
|
||||
onSelect: (selectedEvaluators: PersonnelItem[]) => void;
|
||||
selectedPersonnel?: PersonnelItem[];
|
||||
}
|
||||
|
||||
const BatchEvaluatorModal: React.FC<BatchEvaluatorModalProps> = ({
|
||||
visible,
|
||||
onCancel,
|
||||
onSelect,
|
||||
selectedPersonnel = [],
|
||||
}) => {
|
||||
return (
|
||||
<Modal
|
||||
title="批量选择评价人员"
|
||||
visible={visible}
|
||||
onCancel={onCancel}
|
||||
footer={null}
|
||||
width={700}
|
||||
destroyOnClose={false}
|
||||
>
|
||||
<EvaluateTaskPersonnelSelector
|
||||
onSelect={onSelect}
|
||||
selectedPersonnel={selectedPersonnel}
|
||||
/>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default BatchEvaluatorModal;
|
||||
@ -0,0 +1,107 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Modal, Button, List, message } from 'antd';
|
||||
import EvaluateTaskPersonnelSelector from '@/components/EvaluateTaskPersonnelSelector/EvaluateTaskPersonnelSelector';
|
||||
import { ModalMode } from '@/servers/types/evaluator';
|
||||
import type { PersonnelItem, SupplierItem } from '@/servers/types/evaluator';
|
||||
|
||||
interface SupplierEvaluatorModalProps {
|
||||
visible: boolean; // 控制弹窗显示/隐藏
|
||||
onCancel: () => void; // 取消按钮回调函数
|
||||
onSelect: (personnel: PersonnelItem[]) => void; // 选择人员后的回调函数
|
||||
currentSupplier: SupplierItem | null; // 当前操作的供应商对象
|
||||
mode: ModalMode; // 弹窗模式：SELECT(选择) 或 VIEW(查看)
|
||||
}
|
||||
|
||||
const SupplierEvaluatorModal: React.FC<SupplierEvaluatorModalProps> = ({
|
||||
visible,
|
||||
onCancel,
|
||||
onSelect,
|
||||
currentSupplier,
|
||||
mode,
|
||||
}) => {
|
||||
// 本地保存当前选中的人员，确保在弹窗打开/关闭时能正确处理数据
|
||||
const [localSelectedPersonnel, setLocalSelectedPersonnel] = useState<PersonnelItem[]>([]);
|
||||
|
||||
// 当currentSupplier变化时，更新本地的选中人员
|
||||
useEffect(() => {
|
||||
if (currentSupplier && currentSupplier.evaluators) {
|
||||
setLocalSelectedPersonnel(currentSupplier.evaluators);
|
||||
} else {
|
||||
setLocalSelectedPersonnel([]);
|
||||
}
|
||||
}, [currentSupplier]);
|
||||
|
||||
// 处理选择人员的回调
|
||||
const handleSelect = (personnel: PersonnelItem[]) => {
|
||||
if (personnel.length === 0) {
|
||||
message.warning('请至少选择一名评价人员');
|
||||
return;
|
||||
}
|
||||
setLocalSelectedPersonnel(personnel);
|
||||
onSelect(personnel);
|
||||
};
|
||||
|
||||
// 渲染评价人员列表（用于查看模式）
|
||||
const renderEvaluatorList = () => {
|
||||
|
||||
if (!currentSupplier) {
|
||||
return <div style={{ textAlign: 'center', padding: '20px 0' }}>无供应商数据</div>;
|
||||
}
|
||||
|
||||
if (!currentSupplier.evaluators || currentSupplier.evaluators.length === 0) {
|
||||
return (
|
||||
<div style={{ textAlign: 'center', padding: '20px 0' }}>
|
||||
当前供应商暂无评价人员，请点击"编辑人员"按钮添加
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<List
|
||||
itemLayout="horizontal"
|
||||
dataSource={currentSupplier.evaluators}
|
||||
renderItem={(item: PersonnelItem) => (
|
||||
<List.Item>
|
||||
<List.Item.Meta
|
||||
title={item.name}
|
||||
description={`${item.department || '未知部门'}`}
|
||||
/>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={`${mode === ModalMode.SELECT ? '选择' : '查看'}评价人员 - ${
|
||||
currentSupplier?.supplierName || ''
|
||||
}`}
|
||||
visible={visible}
|
||||
onCancel={onCancel}
|
||||
footer={
|
||||
mode === ModalMode.VIEW
|
||||
? [
|
||||
<Button key="close" onClick={onCancel}>
|
||||
关闭
|
||||
</Button>,
|
||||
]
|
||||
: null
|
||||
}
|
||||
width={700}
|
||||
destroyOnClose={false}
|
||||
>
|
||||
{mode === ModalMode.SELECT ? (
|
||||
<EvaluateTaskPersonnelSelector
|
||||
key={`personnel-selector-${currentSupplier?.id || 'new'}-${visible}`}
|
||||
onSelect={handleSelect}
|
||||
selectedPersonnel={localSelectedPersonnel}
|
||||
/>
|
||||
) : (
|
||||
renderEvaluatorList()
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default SupplierEvaluatorModal;
|
||||
@ -0,0 +1,110 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { Table, Space, Button, Tag, Modal,Tooltip } from 'antd';
|
||||
import type { SupplierItem } from '@/servers/types/evaluator';
|
||||
|
||||
interface SupplierTableProps {
|
||||
suppliers: SupplierItem[]; // 供应商数据列表
|
||||
selectedRowKeys: React.Key[]; // 选中的行keys
|
||||
onSelectChange: (selectedRowKeys: React.Key[]) => void; // 选择行变化的回调
|
||||
onViewEvaluators: (supplier: SupplierItem) => void; // 查看评价人员的回调
|
||||
onSelectEvaluators: (supplier: SupplierItem) => void; // 选择评价人员的回调
|
||||
onDeleteSupplier: (key: string) => void; // 删除供应商的回调
|
||||
}
|
||||
|
||||
const SupplierTable: React.FC<SupplierTableProps> = ({
|
||||
suppliers,
|
||||
selectedRowKeys,
|
||||
onSelectChange,
|
||||
onViewEvaluators,
|
||||
onSelectEvaluators,
|
||||
onDeleteSupplier,
|
||||
}) => {
|
||||
// 表格行选择配置
|
||||
const rowSelection = {
|
||||
selectedRowKeys,
|
||||
onChange: onSelectChange,
|
||||
};
|
||||
|
||||
// 删除确认对话框
|
||||
const showDeleteConfirm = (record: SupplierItem) => {
|
||||
Modal.confirm({
|
||||
title: '确定要删除此供应商吗？',
|
||||
content: `供应商: ${record.supplierName}${
|
||||
record.evaluatorCount > 0 ? `，将同时删除 ${record.evaluatorCount} 名关联的评价人员` : ''
|
||||
}`,
|
||||
okText: '确定',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk: () => onDeleteSupplier(record.id),
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列定义
|
||||
const columns = [
|
||||
{
|
||||
title: '供应商名称', // 列标题
|
||||
dataIndex: 'supplierName', // 数据字段名
|
||||
key: 'supplierName', // 列的唯一标识
|
||||
},
|
||||
{
|
||||
title: '统一社会信用代码',
|
||||
dataIndex: 'socialCreditCode',
|
||||
key: 'socialCreditCode',
|
||||
},
|
||||
{
|
||||
title: '品类',
|
||||
dataIndex: 'categoryName',
|
||||
key: 'categoryName',
|
||||
render: (categoryName: string) => (
|
||||
<Tooltip placement="topLeft" title={categoryName}>
|
||||
{categoryName || '-'}
|
||||
</Tooltip>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '准入部门',
|
||||
dataIndex: 'department',
|
||||
key: 'department',
|
||||
},
|
||||
{
|
||||
title: '评价人员数',
|
||||
align: 'center' as const, // 列对齐方式
|
||||
dataIndex: 'evaluatorCount', // 评价人员数量字段
|
||||
key: 'evaluatorCount',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
render: (_: any, record: SupplierItem) => (
|
||||
<Space>
|
||||
<Button
|
||||
type="link"
|
||||
onClick={() => {
|
||||
onViewEvaluators(record);
|
||||
}}
|
||||
>
|
||||
查看
|
||||
</Button>
|
||||
<Button type="link" onClick={() => onSelectEvaluators(record)}>
|
||||
编辑人员
|
||||
</Button>
|
||||
<Button type="link" onClick={() => showDeleteConfirm(record)}>
|
||||
删除
|
||||
</Button>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Table
|
||||
rowSelection={rowSelection} // 行选择配置
|
||||
columns={columns} // 列配置
|
||||
dataSource={suppliers} // 数据源
|
||||
pagination={false} // 分页配置，这里禁用了分页
|
||||
rowKey="id" // 行的唯一标识字段
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default SupplierTable;
|
||||
@ -0,0 +1,50 @@
|
||||
import React from 'react';
|
||||
import { Modal, Form, Row, Col, InputNumber } from 'antd';
|
||||
import type { WeightUnit } from '@/servers/types/evaluator';
|
||||
|
||||
interface WeightSettingModalProps {
|
||||
visible: boolean;
|
||||
onCancel: () => void;
|
||||
onOk: () => void;
|
||||
weightUnits: WeightUnit[];
|
||||
form: any;
|
||||
}
|
||||
|
||||
const WeightSettingModal: React.FC<WeightSettingModalProps> = ({
|
||||
visible,
|
||||
onCancel,
|
||||
onOk,
|
||||
weightUnits,
|
||||
form,
|
||||
}) => {
|
||||
return (
|
||||
<Modal
|
||||
title="设置评分单位权重"
|
||||
visible={visible}
|
||||
onOk={onOk}
|
||||
onCancel={onCancel}
|
||||
>
|
||||
<Form form={form} layout="horizontal">
|
||||
<Row gutter={16}>
|
||||
{weightUnits.map((unit) => (
|
||||
<Col span={12} key={unit.id}>
|
||||
<Form.Item
|
||||
key={unit.id}
|
||||
label={unit.name}
|
||||
name={['weightUnits', unit.id]}
|
||||
rules={[
|
||||
{ required: true, message: '请输入权重值' },
|
||||
{ type: 'number', min: 0, message: '请输入大于等于0的数值' },
|
||||
]}
|
||||
>
|
||||
<InputNumber min={0} max={100} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default WeightSettingModal;
|
||||
@ -0,0 +1,15 @@
|
||||
import SupplierTable from './SupplierTable';
|
||||
import BatchEvaluatorModal from './BatchEvaluatorModal';
|
||||
import SupplierEvaluatorModal from './SupplierEvaluatorModal';
|
||||
import WeightSettingModal from './WeightSettingModal';
|
||||
|
||||
// 日志组件版本
|
||||
console.log('EvaluatorComponents version: 1.0.1');
|
||||
|
||||
export {
|
||||
SupplierTable,
|
||||
BatchEvaluatorModal,
|
||||
SupplierEvaluatorModal,
|
||||
WeightSettingModal,
|
||||
// 导出的所有组件
|
||||
};
|
||||
Reference in New Issue
Block a user