测试节点版本配置 - 管理系统
import React, { useEffect, useRef, useState } from 'react'; import ContentCard from '@/components/ContentCard'; import { Button, Collapse, Select, Space } from 'antd'; import { ActionType, EditableProTable, ProColumns } from '@ant-design/pro-table'; // import ProForm, { ProFormInstance } from '@ant-design/pro-form'; import { getOnlyKey } from '@/utils/utils'; import { PlusCircleOutlined } from '@ant-design/icons'; import './index.less'; import { isArray, isNumber } from 'lodash'; import { getNodeVersionList, getTestNodeType } from '@/services/configManage/nodeLibrary'; const { Panel } = Collapse;
const DEMAND_DICT = [
{
label: 'M1-1',
value: '1',
},
{
label: 'M1-2',
value: '2',
},
{
label: 'M1-3',
value: '3',
},
];
const VersionConfiguration: React.FC = () => {
// const actionRefs = DEMAND_DICT.map(() => useRef
const handleSelectChange = async (val: string) => { setSelectValue(val); fetchVersionList(val); };
const fetchVersionList = async (values: string) => { const result = await getNodeVersionList({ testNodeType: values }); setVersionData(result.data); const tableData = {}; const resluets = result.data; Object.entries(resluets).forEach(([version, datas]) => { tableData[version] = datas.map((item: any) => ({ ...item, key: item.id, })); }); setTableData(tableData);
console.log(tableData, 64);
};
useEffect(() => { getTestNode(); }, []); const columns: ProColumns[] = [ { title: '节点版本', width: 50, valueType: 'index', align: 'center', renderFormItem: ({ index }) => isNumber(index) && <>{index + 1}</>, }, { title: '测试项', dataIndex: 'testItem', align: 'center', formItemProps: () => ({ rules: [{ required: true, message: '请输入测试项' }], }), }, { title: '负责人', dataIndex: 'leader', align: 'center', formItemProps: () => ({ rules: [{ required: true, message: '请输入负责人' }], }), }, { title: '用例库名称', dataIndex: 'caseLibraryName', align: 'center', }, { title: '交付件模板', dataIndex: 'deliveryTemplate', align: 'center', }, { title: '测试周期（天）', dataIndex: 'testCycle', align: 'center', }, { title: '参考投入人力（人天）', dataIndex: 'referenceInputManpower', align: 'center', }, { title: '操作', valueType: 'option', width: 120, align: 'center', render: (text, record, _, action) => [ <a key="editable" onClick={() => { action?.startEditable?.(record.key); }} > 配置 , 删除, // <Popconfirm // title="确定删除此行？" // key="delete" // onConfirm={async () => { // try { // const { code, msg } = await deletedCategory({ // id: record.id, // }); // if ((code as unknown as string) !== 'BIZ_SUCCESS') throw new Error(msg); // message.success('删除成功！'); // staragyList(); // } catch (error) {} // }} // okText="确定" // cancelText="取消" // > // 删除 // , ], }, ];
return (
<div className="check-list-wrap">
<Collapse
ghost
activeKey={activeKeys}
onChange={(e) => setActiveKeys(isArray(e) ? e : [e])}
>
{Object.entries(versionData).map(([version, data]) => {
console.log(version, 169, tableDatas[version]);
return (
<Panel header={version} key={version}>
<EditableProTable
rowKey="id"
recordCreatorProps={false}
actionRef={actionRefs}
columns={columns}
dataSource={tableDatas[version]}
editable={{
type: 'single',
editableKeys: editKeys,
onChange: setEditKeys,
actionRender: (row, config, defaultDoms) => {
return [defaultDoms.save, defaultDoms.cancel];
},
}}
search={false}
pagination={false}
bordered
/>
<Space>
<Button
style={{ border: '1px' }}
onClick={() => {
const data = tableDatas[version];
data.push({
id: getOnlyKey(),
});
setEditKeys(data.map((item: any) => item.id));
setTableData({ ...tableDatas, [version]: data });
// actionRefs.current?.addEditRecord?.({
// key: getOnlyKey(),
// });
}}
>
<PlusCircleOutlined />
</Button>
</Space>
</Panel>
);
})}
</Collapse>
</div>
</ContentCard>
); }; export default VersionConfiguration;