测试节点版本配置 - 管理测试节点版本信息
<p>"import React, { useEffect, useRef, useState } from 'react';\nimport ContentCard from '@/components/ContentCard';\nimport { Button, Collapse, Popconfirm, Select, Space, message, Typography } from 'antd';\nimport { ActionType, EditableProTable, ProColumns } from '@ant-design/pro-table';\nimport { getOnlyKey } from '@/utils/utils';\nimport { PlusCircleOutlined } from '@ant-design/icons';\nimport './index.less';\nimport { isArray, isNumber } from 'lodash';\nimport {\n getNodeVersionList,\n getTestNodeType,\n addNodeVersion,\n updateNodeVersion,\n deletedNodeVersion,\n} from '@/services/configManage/nodeLibrary';\nimport { TclUpload } from '@tcljs/react-tcl-design';\nimport type { UploadChangeParam } from 'antd/lib/upload';\nimport UserSelect from '@/components/UserSelect';\n\nconst { Panel } = Collapse;\nconst { Link } = Typography;\nconst VersionConfiguration: React.FC = () => {\n const actionRefs = useRef<ActionType>();\n const [editKeys, setEditKeys] = useState<React.Key[]>([]);\n const [activeKeys, setActiveKeys] = useState<string[]>([]);\n const [versionData, setVersionData] = useState([]);\n const [selectSesion, setSelectSesion] = useState([]);\n const [selectValue, setSelectValue] = useState<string>('');\n const [tableDatas, setTableData] = useState({});\n\n const fetchVersionList = async (values: string) => {\n const result = await getNodeVersionList({ testNodeType: values });\n setVersionData(result.data);\n const tableData = {};\n const resluets: Record<string, unknown[]> = result.data;\n Object.entries(resluets).forEach(([version, datas]) => {\n tableData[version] = datas.map((item: any) => ({\n ...item,\n key: item.id,\n }));\n });\n setTableData(tableData);\n };\n // 测试节点类型\n const getTestNode = async () => {\n try {\n const { data } = await getTestNodeType({});\n const newData = data.map((item: string) => {\n return { label: item, value: item };\n });\n setSelectSesion(newData);\n setSelectValue(newData[0]?.label);\n fetchVersionList(newData[0]?.label);\n } catch (error) {}\n };\n\n const handleSelectChange = async (val: string) => {\n setSelectValue(val);\n fetchVersionList(val);\n };\n\n useEffect(() => {\n getTestNode();\n }, []);\n\n const handleUploadChange = (info: UploadChangeParam) => {\n if (info.file.status === 'done') {\n if (info.file.response.code === 'BIZ_SUCCESS') {\n message.success('文件上传成功！');\n }\n }\n };\n const columns: ProColumns[] = [\n {\n title: '节点版本',\n width: 80,\n valueType: 'index',\n align: 'center',\n renderFormItem: ({ index }) => isNumber(index) && <>{index + 1}</>,\n },\n {\n title: '测试项',\n dataIndex: 'testItem',\n align: 'center',\n formItemProps: () => ({\n rules: [{ required: true, message: '请输入测试项' }],\n }),\n },\n {\n title: '负责人',\n dataIndex: 'leader',\n align: 'center',\n formItemProps: () => ({\n rules: [{ required: true, message: '请输入负责人' }],\n }),\n renderFormItem: () => {\n return <UserSelect />;\n },\n },\n {\n title: '用例库名称',\n dataIndex: 'caseLibraryName',\n align: 'center',\n },\n {\n title: '交付件模板',\n dataIndex: 'deliveryTemplate',\n align: 'center',\n ellipsis: true,\n renderFormItem: () => {\n return (\n <TclUpload\n uploadButton={<Button style={{ marginRight: '10px' }}>上传文件</Button>}\n action={'/project-test-arts-api/web/upload_file'}\n onChange={handleUploadChange}\n />\n );\n },\n render: (<em>, record) => {\n return <Link href={record.deliveryTemplate}>{record.deliveryTemplate}</Link>;\n },\n },\n {\n title: '测试周期（天）',\n dataIndex: 'testCycle',\n align: 'center',\n formItemProps: () => ({\n rules: [\n {\n validator: (</em>, value) => {\n const isValid = !isNaN(parseFloat(value));\n if (isValid) {\n return Promise.resolve();\n }\n return Promise.reject(new Error('请输入有效的数字'));\n },\n },\n ],\n }),\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, <em>, action) => [\n <a\n key="editable"\n onClick={() => {\n action?.startEditable?.(record.key);\n }}\n >\n 配置\n </a>,\n\n <Popconfirm\n title="确定删除此行？"\n key="delete"\n onConfirm={async () => {\n try {\n const { code, msg } = await deletedNodeVersion({\n id: record.id,\n });\n if ((code as unknown as string) !== 'BIZ_SUCCESS') throw new Error(msg);\n message.success('删除成功！');\n fetchVersionList(selectValue);\n } catch (error) {}\n }}\n okText="确定"\n cancelText="取消"\n >\n <a>删除</a>\n </Popconfirm>,\n ],\n },\n ];\n\n return (\n <ContentCard title="测试节点的版本配置" className="configuration-page-wrap">\n <div className="riskmMonthly" style={{ marginBottom: 15 }}>\n <span style={{ fontWeight: 'bold', fontSize: '14px' }}>测试节点类型：</span>\n <Select\n style={{ width: 230 }}\n options={selectSesion}\n value={selectValue}\n onChange={handleSelectChange}\n />\n </div>\n\n <div className="check-list-wrap">\n <Collapse\n ghost\n activeKey={activeKeys}\n onChange={(keys) => setActiveKeys(isArray(keys) ? keys : [keys])}\n >\n {Object.entries(versionData).map(([version], index) => {\n const isPanelActive = activeKeys.includes(version);\n return (\n <Panel header={version} key={version}>\n {isPanelActive && (\n <EditableProTable\n rowKey="key"\n recordCreatorProps={false}\n actionRef={actionRefs}\n columns={columns}\n value={tableDatas[version]}\n editable={{\n type: 'single',\n editableKeys: editKeys[version] || [],\n onSave: async (</em>, row) => {\n const result = {\n id: row.id,\n testNode: selectValue,\n testItem: row.testItem,\n leader: row.leader,\n caseLibraryName: row.caseLibraryName,\n deliveryTemplate:\n row?.deliveryTemplate?.file?.response?.data?.originalFilename || null,\n testCycle: row.testCycle,\n testNodeVersion: version,\n referenceInputManpower: row.referenceInputManpower,\n };\n\n try {\n const { code, msg } = row.id\n ? await updateNodeVersion(result)\n : await addNodeVersion(result);\n if ((code as unknown as string) !== 'BIZ_SUCCESS') throw new Error(msg);\n message.success('保存成功！');\n fetchVersionList(selectValue);\n } catch (error) {}\n },\n onChange: (keys) => {\n setEditKeys((prevEditKeysMap) => ({\n ...prevEditKeysMap,\n [version]: keys,\n }));\n },\n actionRender: (row, config, defaultDoms) => {\n return [defaultDoms.save, defaultDoms.cancel];\n },\n }}\n search={false}\n pagination={false}\n bordered\n />\n )}\n\n <Space>\n <Button\n style={{ border: '1px' }}\n onClick={() => {\n actionRefs.current?.addEditRecord?.({\n key: getOnlyKey(),\n });\n }}\n >\n <PlusCircleOutlined />\n </Button>\n </Space>\n </Panel>\n );\n })}\n </Collapse>\n </div>\n </ContentCard>\n );\n};\nexport default VersionConfiguration;</p>
原文地址: https://www.cveoy.top/t/topic/qqSA 著作权归作者所有。请勿转载和采集!