测试节点版本配置 - 管理测试节点的版本信息
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(JSON.parse(JSON.stringify(tableData))); };
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; 折叠面板下的对应每个面板的表格数据为啥没显示出来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(JSON.parse(JSON.stringify(tableData))); }; 这样设置也是表格没数据渲染出来内容：There might be several reasons why the table data is not being rendered.
-
Check if the
versionDatastate variable is correctly updated with the fetched data. You can console.logresult.dataandversionDatato verify if the data is being fetched correctly and stored in the state variable. -
Ensure that the
tableDatastate variable is correctly updated with the transformed data. You can console.logtableDatato see if it contains the expected data structure. -
Make sure that the
dataSourceprop of theEditableProTablecomponent is correctly set totableDatas[version]. You can console.logtableDatas[version]to verify if it contains the expected data for the corresponding version. -
Check if the
columnsprop of theEditableProTablecomponent is correctly defined and matches the structure of the data. -
Verify if the
EditableProTablecomponent is correctly configured with theeditableprop and the necessary callbacks (onChange,actionRender) are correctly implemented.
By checking and verifying these points, you should be able to identify the cause of the issue and resolve it.