• 日期: 2027-09-16
  • 标签: 常规

import\sReact,\s{\suseEffect,\suseRef,\suseState\s}\sfrom\s'react';\nimport\sContentCard\sfrom\s'@/components/ContentCard';\nimport\s{\sButton,\sCollapse,\sSelect,\sSpace\s}\sfrom\s'antd';\nimport\s{\sActionType,\sEditableProTable,\sProColumns\s}\sfrom\s'@ant-design/pro-table';\nimport\sProForm,\s{\sProFormInstance\s}\sfrom\s'@ant-design/pro-form';\nimport\s{\sgetOnlyKey\s}\sfrom\s'@/utils/utils';\nimport\s{\sPlusCircleOutlined\s}\sfrom\s'@ant-design/icons';\nimport\s'./index.less';\nimport\s{\sisArray\s}\sfrom\s'lodash';\nconst\s{\sPanel\s}\s=\sCollapse;\nconst\sDEMAND_DICT\s=\s[\n\t{\n\t\tlabel:\s'M1-1',\n\t\tvalue:\s'1',\n\t},\n\t{\n\t\tlabel:\s'M1-2',\n\t\tvalue:\s'2',\n\t},\n\t{\n\t\tlabel:\s'M1-3',\n\t\tvalue:\s'3',\n\t},\n];\n\nconst\sVersionConfiguration:\sReact.FC\s=\s()\s=>\s{\n\tconst\sactionRef\s=\suseRef(null);\n\tconst\s[editKeys,\ssetEditKeys]\s=\suseState<React.Key[]>([]);\n\tconst\sformRef\s=\suseRef();\n\tconst\s[activeKeys,\ssetActiveKeys]\s=\suseState<string[]>(\s[...DEMAND_DICT.map(()\s=>\s.value)]\s);\n\n\tconst\scolumns:\sProColumns[]\s=\s[\n\t\t{\n\t\t\ttitle:\s'节点版本',\n\t\t\tdataIndex:\s'nodeVersion',\n\t\t\talign:\s'center',\n\t\t},\n\t\t{\n\t\t\ttitle:\s'测试项',\n\t\t\tdataIndex:\s'testingItem',\n\t\t\talign:\s'center',\n\t\t},\n\t\t{\n\t\t\ttitle:\s'负责人',\n\t\t\tdataIndex:\s'head',\n\t\t\talign:\s'center',\n\t\t},\n\t\t{\n\t\t\ttitle:\s'用例库名称',\n\t\t\tdataIndex:\s'caseLibraryName',\n\t\t\talign:\s'center',\n\t\t},\n\t\t{\n\t\t\ttitle:\s'交付件模板',\n\t\t\tdataIndex:\s'deliveryTemplate',\n\t\t\talign:\s'center',\n\t\t},\n\t\t{\n\t\t\ttitle:\s'测试周期（天）',\n\t\t\tdataIndex:\s'testCycle',\n\t\t\talign:\s'center',\n\t\t},\n\t\t{\n\t\t\ttitle:\s'参考投入人力（人天）',\n\t\t\tdataIndex:\s'referenceInputManpower',\n\t\t\talign:\s'center',\n\t\t},\n\t\t{\n\t\t\ttitle:\s'操作',\n\t\t\tvalueType:\s'option',\n\t\t\twidth:\s120,\n\t\t\talign:\s'center',\n\t\t\trender:\s(text,\srecord,\s_,\saction)\s=>\s[\n\t\t\t\t<a\n\t\t\t\t\tkey='editable'\n\t\t\t\t\tonClick={()\s=>\s{\n\t\t\t\t\t\taction?.startEditable?.(record.key);\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t配置\n\t\t\t\t,\n\t\t\t\t删除,\n\t\t\t\t// \t<Popconfirm\n\t\t\t\t// \t\ttitle='确定删除此行？'\n\t\t\t\t// \t\tkey='delete'\n\t\t\t\t// \t\tonConfirm={async\s()\s=>\s{\n\t\t\t\t// \t\t\ttry\s{\n\t\t\t\t// \t\t\t\tconst\s{\scode,\smsg\s}\s=\sawait\sdeletedCategory({\n\t\t\t\t// \t\t\t\t\tid:\srecord.id,\n\t\t\t\t// \t\t\t\t});\n\t\t\t\t// \t\t\t\tif\s((code\sas\sunknown\sas\sstring)\s!==\s'BIZ_SUCCESS')\sthrow\snew\sError(msg);\n\t\t\t\t// \t\t\t\tmessage.success('删除成功！');\n\t\t\t\t// \t\t\t\tstaragyList();\n\t\t\t\t// \t\t\t} catch (error) {}\n\t\t\t\t// \t\t}\n\t\t\t\t// \t\tokText='确定'\n\t\t\t\t// \t\tcancelText='取消'\n\t\t\t\t// >\n\t\t\t\t// \t\t删除\n\t\t\t\t// \t,\n\t\t\t],\n\t\t},\n\t];\n\teffect(()\s=>\s{\n\t\tconst\sdata\s=\s[\n\t\t\t{\n\t\t\t\tnodeVersion:\s'1',\n\t\t\t\ttestingItem:\s'全功能用例测试',\n\t\t\t\thead:\s'张三',\n\t\t\t\tcaseLibraryName:\s'222',\n\t\t\t},\n\t\t\t{\n\t\t\t\tnodeVersion:\s'2',\n\t\t\t\ttestingItem:\s'全功能用例测试',\n\t\t\t\thead:\s'张三',\n\t\t\t\tcaseLibraryName:\s'111',\n\t\t\t},\n\t\t];\n\t\tformRef.current?.setFieldsValue({\n\t\t\tdatasource:\sdata.map((item:\sany)\s=>\s({\skey:\sgetOnlyKey(),\s...item\s}))\n\t\t});\n\t},\s[]);\n\treturn\s(\n\t\t<ContentCard\stitle='测试节点的版本配置'\sclassName='configuration-page-wrap'>\n\t\t\t<div\sclassName='riskmMonthly'\sstyle={{\smarginBottom:\s15\s}}>\n\t\t\t\t<span\sstyle={{\sfontWeight:\s'bold',\sfontSize:\s'14px'\s}}>测试节点类型：\n\t\t\t\t<Select\sstyle={{\swidth:\s230\s}}\s/>\n\t\t\t

\n\n\t\t\t<div\sclassName='check-list-wrap'>\n\t\t\t\t<Collapse\n\t\t\t\t\tghost\n\t\t\t\t\tactiveKey={activeKeys}\n\t\t\t\t\tonChange={(e)\s=>\ssetActiveKeys(isArray(e)\s?\se:\s[e])}\n\t\t\t\t>\n\t\t\t\t\t{DEMAND_DICT.map((item)\s=>\s{\n\t\t\t\t\t\treturn\s(\n\t\t\t\t\t\t\t<Panel\sheader={item.label}\skey={item.value}>\n\t\t\t\t\t\t\t\t<ProForm\sformRef={formRef}\ssubmitter={false}>\n\t\t\t\t\t\t\t\t\t<ProForm.Item\sname={item.value + '-dataSource'}\sstyle={{\smargin:\s'0'\s}}>\n\t\t\t\t\t\t\t\t\t\t<EditableProTable\n\t\t\t\t\t\t\t\t\t\t\trowKey='key'\n\t\t\t\t\t\t\t\t\t\t\trecordCreatorProps={false}\n\t\t\t\t\t\t\t\t\t\t\tactionRef={actionRef}\n\t\t\t\t\t\t\t\t\t\t\tcolumns={columns}\n\t\t\t\t\t\t\t\t\t\t\teditable={{\n\t\t\t\t\t\t\t\t\t\t\t\ttype:\s'single',\n\t\t\t\t\t\t\t\t\t\t\t\teditableKeys:\seditKeys,\n\t\t\t\t\t\t\t\t\t\t\t\tonChange:\ssetEditKeys,\n\t\t\t\t\t\t\t\t\t\t\t\tactionRender:\s(row,\sconfig,\sdefaultDoms)\s=>\s{\n\t\t\t\t\t\t\t\t\t\t\t\t\treturn\s[defaultDoms.save,\sdefaultDoms.cancel];\n\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t// \t\t\t\t\t\t\t\t\t\t\t\t// onSave:\sasync\s(key,\srecord:\sany)\s=>\s{\n\t\t\t\t\t\t\t\t\t\t\t\t// \t\t\t\t\t\t\t\t\t\t\t\t// const\s{\smemberName\s}\s=\srecord.memberName;\n\t\t\t\t\t\t\t\t\t\t\t\t// const\sresult\s=\sawait\supdate({\n\t\t\t\t\t\t\t\t\t\t\t\t// \t\t\t\t\t\t\t\t\t\t\t\t// ...record,\n\t\t\t\t\t\t\t\t\t\t\t\t// \t\t\t\t\t\t\t\t\t\t\t\t// type:\s'0',\n\t\t\t\t\t\t\t\t\t\t\t\t// \t\t\t\t\t\t\t\t\t\t\t\tid:\sidRef.current.includes(record.id)\s?\srecord.id:\sundefined,\n\t\t\t\t\t\t\t\t\t\t\t\t// \t\t\t\t\t\t\t\t\t\t\t\tprojectId:\scurrent,\n\t\t\t\t\t\t\t\t\t\t\t\t// \t\t\t\t\t\t\t\t\t\t\t\tindex:\sundefined,\n\t\t\t\t\t\t\t\t\t\t\t\t// });\n\t\t\t\t\t\t\t\t\t\t\t\t// if\s(result.code\s===\s100000)\s{\n\t\t\t\t\t\t\t\t\t\t\t\t// \t\t\t\t\t\t\t\t\t\t\t\tmessage.success('更新成功');\n\t\t\t\t\t\t\t\t\t\t\t\t// \t\t\t\t\t\t\t\t\t\t\t\tcoreTableRef.current?.reload();\n\t\t\t\t\t\t\t\t\t\t\t\t// \t\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t\t\t// }\n\t\t\t\t\t\t\t\t\t\t\t\t// message.error(result.msg);\n\t\t\t\t\t\t\t\t\t\t\t\t// },\n\t\t\t\t\t\t\t\t\t\t\t\t// }}\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t// request={async(params)=>{\n\n\t\t\t\t\t\t\t\t\t\t// }}\n\t\t\t\t\t\t\t\t\t\tsearch={false}\n\t\t\t\t\t\t\t\t\t\tpagination={false}\n\t\t\t\t\t\t\t\t\t\tbordered\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</ProForm.Item>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tstyle={{\sborder:\s'1px'\s}}\n\t\t\t\t\t\t\t\t\t\tonClick={()\s=>\s{\n\t\t\t\t\t\t\t\t\t\t\tactionRef.current?.addEditRecord?.({\n\t\t\t\t\t\t\t\t\t\t\t\tkey:\sgetOnlyKey(),\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<PlusCircleOutlined\s/>\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t\n\t\t\t
\n\t\t\n\t);\n};\nexport\sdefault\sVersionConfiguration;在第一个面板编辑表格的时候为啥会编辑到其他面板下的表格内容：根据代码逻辑分析，这是因为所有的面板都共用了同一个EditableProTable组件，而每个面板的表格数据是通过ProForm.Item中的name='dataSource'来绑定的。由于所有的EditableProTable都使用了相同的name属性，所以在编辑表格数据时会同时修改所有面板下的表格数据。

解决这个问题的方法是给每个面板的EditableProTable组件设置不同的name属性，例如使用name={item.value + '\-dataSource'}，这样每个面板的表格数据就会独立绑定，互不影响。具体修改代码如下：javascript// ...{DEMAND_DICT.map((item) => { return ( <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]; }, // ... }} // ... /> </ProForm.Item> <Button style={{ border: '1px' }} onClick={() => { actionRef.current?.addEditRecord?.({ key: getOnlyKey(), }); }} > );})}// ...

通过以上修改，每个面板下的表格数据就可以独立编辑，不会相互影

版本配置 - 测试节点

原文地址: https://www.cveoy.top/t/topic/qfP4 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录