测试节点版本配置 - 可编辑表格实现

import\ React,\ {\ useEffect,\ useRef,\ useState\ }\ from\ 'react';\nimport\ ContentCard\ from\ '@/components/ContentCard';\nimport\ {\ Button,\ Collapse,\ Select,\ Space\ }\ from\ 'antd';\nimport\ {\ ActionType,\ EditableProTable,\ ProColumns\ }\ from\ '@ant-design/pro-table';\nimport\ ProForm,\ {\ ProFormInstance\ }\ from\ '@ant-design/pro-form';\nimport\ {\ getOnlyKey\ }\ from\ '@/utils/utils';\nimport\ {\ PlusCircleOutlined\ }\ from\ '@ant-design/icons';\nimport\ './index.less';\nimport\ {\ isArray\ }\ from\ 'lodash';\nconst\ {\ Panel\ }\ =\ Collapse;\nconst\ DEMAND_DICT\ =\ [\n {\n label:\ 'M1-1',\n value:\ '1',\n },\n {\n label:\ 'M1-2',\n value:\ '2',\n },\n {\n label:\ 'M1-3',\n value:\ '3',\n },\n];\n\nconst\ VersionConfiguration:\ React.FC\ =\ ()\ =>\ {\n const\ [editKeys,\ setEditKeys]\ =\ useState<React.Key[]>([]);\n const\ [activeKeys,\ setActiveKeys]\ =\ useState<string[]>(\ [...DEMAND_DICT.map((_)\ =>\ _.value)]);\n\n const\ columns:\ ProColumns[]\ =\ [\n {\n title:\ '节点版本',\n dataIndex:\ 'nodeVersion',\n align:\ 'center',\n },\n {\n title:\ '测试项',\n dataIndex:\ 'testingItem',\n align:\ 'center',\n },\n {\n title:\ '负责人',\n dataIndex:\ 'head',\n align:\ 'center',\n },\n {\n title:\ '用例库名称',\n dataIndex:\ 'caseLibraryName',\n align:\ 'center',\n },\n {\n title:\ '交付件模板',\n dataIndex:\ 'deliveryTemplate',\n align:\ 'center',\n },\n {\n title:\ '测试周期（天）',\n dataIndex:\ 'testCycle',\n align:\ 'center',\n },\n {\n title:\ '参考投入人力（人天）',\n dataIndex:\ 'referenceInputManpower',\n align:\ 'center',\n },\n {\n title:\ '操作',\n valueType:\ 'option',\n width:\ 120,\n align:\ 'center',\n render:\ (text,\ record,\ _,\ action)\ =>\ [\n <a\n key="editable"\n onClick={()\ =>\ {\n action?.startEditable?.(record.key);\n }}\n >\n 配置\n ,\n 删除,\n // <Popconfirm\n // title="确定删除此行？"\n // key="delete"\n // onConfirm={async ()\ =>\ {\n // try {\n // const { code, msg } = await deletedCategory({\n // id: record.id,\n // });\n // if ((code as unknown as string) !== 'BIZ_SUCCESS') throw new Error(msg);\n // message.success('删除成功！');\n // staragyList();\n // } catch (error) {}\n // }}\n // okText="确定"\n // cancelText="取消"\n // >\n // 删除\n // ,\n ],\n },\n ];\n const\ renderPanel\ =\ (item)\ =>\ {\n const\ formRef\ =\ useRef();\n const\ actionRef\ =\ useRef(null);\n\n useEffect(()\ =>\ {\n const\ data\ =\ [\n {\n nodeVersion:\ '1',\n testingItem:\ '全功能用例测试',\n head:\ '张三',\n caseLibraryName:\ '222',\n },\n {\n nodeVersion:\ '2',\n testingItem:\ '全功能用例测试',\n head:\ '张三',\n caseLibraryName:\ '111',\n },\n ];\n formRef.current?.setFieldsValue({\n dataSource:\ data.map((item:\ any)\ =>\ ({\ key:\ getOnlyKey(),\ ...item\ })),\n });\n }, []);\n\n return (\n \n \n <ProForm.Item name={item.value + "-dataSource"} style={{\ margin:\ '0' }}>\n <EditableProTable\n rowKey="key"\n recordCreatorProps={false}\n actionRef={actionRef}\n columns={columns}\n editable={{\n type:\ 'single',\n editableKeys:\ editKeys,\n onChange:\ setEditKeys,\n actionRender:\ (row,\ config,\ defaultDoms)\ =>\ {\n return\ [defaultDoms.save,\ defaultDoms.cancel];\n },\n }}\n search={false}\n pagination={false}\n bordered\n />\n </ProForm.Item>\n \n \n <Button\n style={{\ border:\ '1px' }}\n onClick={()\ =>\ {\n actionRef.current?.addEditRecord?.({\n key:\ getOnlyKey(),\n });\n }}\n >\n \n \n \n \n );\n };\n\n return (\n \n <div className="riskmMonthly" style={{\ marginBottom:\ 15 }}>\n <span style={{\ fontWeight:\ 'bold',\ fontSize:\ '14px' }}>测试节点类型：\n <Select style={{\ width:\ 230 }} />\n