测试节点版本配置 - React组件
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 } from 'lodash'; 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 actionRef = useRef
const columns: ProColumns[] = [
{
title: '节点版本',
dataIndex: 'nodeVersion',
align: 'center',
},
{
title: '测试项',
dataIndex: 'testingItem',
align: 'center',
},
{
title: '负责人',
dataIndex: 'head',
align: 'center',
},
{
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='取消'
// >
// 删除
// ,
],
},
];
useEffect(() => {
const data = [
{
nodeVersion: '1',
testingItem: '全功能用例测试',
head: '张三',
caseLibraryName: '222',
},
{
nodeVersion: '2',
testingItem: '全功能用例测试',
head: '张三',
caseLibraryName: '111',
},
];
formRef.current?.setFieldsValue({
dataSource: data.map((item: any) => ({ key: getOnlyKey(), ...item })),
});
}, []);
return (
<div className='check-list-wrap'>
<Collapse
ghost
activeKey={activeKeys}
onChange={(e) => setActiveKeys(isArray(e) ? e : [e])}
>
{DEMAND_DICT.map((item) => {
return (
<Panel header={item.label} key={item.value}>
<ProForm formRef={formRef} submitter={false}>
<ProForm.Item name={`${item.value}-dataSource`} style={{ margin: '0' }}>
<EditableProTable
rowKey='key'
recordCreatorProps={false}
actionRef={actionRef}
columns={columns}
editable={{
type: 'single',
editableKeys: editKeys,
onChange: setEditKeys,
actionRender: (row, config, defaultDoms) => {
return [defaultDoms.save, defaultDoms.cancel];
},
// onSave: async (key, record: any) => {
// // const { memberName } = record.memberName;
// const result = await update({
// ...record,
// type: '0',
// id: idRef.current.includes(record.id) ? record.id : undefined,
// projectId: current,
// index: undefined,
// });
// if (result.code === 100000) {
// message.success('更新成功');
// coreTableRef.current?.reload();
// return;
// }
// message.error(result.msg);
// },
// }}
}}
// request={async(params)=>{}
// }
search={false}
pagination={false}
bordered
/>
</ProForm.Item>
</ProForm>
<Space>
<Button
style={{ border: '1px' }}
onClick={() => {
actionRef.current?.addEditRecord?.({
key: getOnlyKey(),
});
}}
>
<PlusCircleOutlined />
</Button>
</Space>
</Panel>
);
})}
</Collapse>
</div>
</ContentCard>
); }; export default VersionConfiguration;