bug fix

src/view/Manage/ModelCompare/update-task.jsx

 import React from 'react'
-import { Button, Modal, Spin, Space, Divider, Form, Row, Col, Input, Select, Checkbox, Radio, Switch, TimePicker } from 'antd'
+import { Button, Modal, Spin, Space, Divider, Form, Row, Col, Input, Select, Checkbox, Radio, Switch, TimePicker, Tooltip } from 'antd'
 import { useClickAway } from 'ahooks'
 import moment from 'moment'
 
 import { dispatch } from '../../../model'
 import Table from '../../../util/Component/Table'
+import { saveColumns } from '../../../service/msd'
+import { showMessage } from '../../../util'
 
 const FC = (props) => {
   const { visible, type, item, onCancel} = props
@@ -354,6 +356,7 @@ const Strategy = React.forwardRef(function ({ type, task }, ref) {
   const [selectedRows, setSelectedRows] = React.useState()
   const [tableData, setTableData] = React.useState()
   const [editingKey, setEditingKey] = React.useState('')
+  const [editingModelKey, setEditingModelKey] = React.useState('')
 
   const [form] = Form.useForm()
   const tableRef = React.useRef()
@@ -365,16 +368,16 @@ const Strategy = React.forwardRef(function ({ type, task }, ref) {
   }, tableRef)
 
   React.useEffect(() => {
-    if (type === 'edit') {
+    if (type !== 'detail') {
       getPropertyTypes()
     }
   }, [type])
 
   const selectablePropertyTypes = React.useMemo(() => {
     return (propertyTypes??[]).filter(item => 
-      (tableData??[]).map(_item => _item.modelType?.name).indexOf(item.modelType?.name)
+      (tableData??[]).map(_item => _item.modelType?.name).indexOf(item.modelType?.name)===-1 || item.modelType?.name === editingKey
     )
-  }, [propertyTypes, tableData])
+  }, [propertyTypes, tableData, editingKey])
 
   const getPropertyTypes = () => {
     setLoadingPropertyTypes(true)
@@ -391,15 +394,130 @@ const Strategy = React.forwardRef(function ({ type, task }, ref) {
   }
 
   const save = async () => {
+    if (!editingKey) return
+
     try {
-      await form.validateFields()
+      const rows = await form.validateFields()
+
+      const index = (tableData??[]).findIndex(item => item.modelType?.name === editingKey)
+
+      const modelIndex = (propertyTypes??[]).findIndex(item => item.modelType?.name === rows.modelType)
+      if (modelIndex !== -1) {
+        const operatorIndex = (propertyTypes[modelIndex].supportedOperatorTypes??[]).findIndex(item => item.id === rows.operatorType)
+        const metadataIndex = (propertyTypes[modelIndex].supportedMetadataTypes??[]).findIndex(item => item.name === rows.metadataType)
+
+        if (operatorIndex !== -1 && metadataIndex !== -1) {
+          setTableData(prevTableData => {
+            let newTableData = [...prevTableData??[]];
+            (newTableData??[]).splice(index, 1, {
+              modelType: propertyTypes[modelIndex].modelType,
+              operatorType: propertyTypes[modelIndex].supportedOperatorTypes[operatorIndex],
+              metadataType: propertyTypes[modelIndex].supportedMetadataTypes[metadataIndex],
+            });
+
+            return newTableData;
+          })
+        }
+      }
+      
+      setEditingKey()
     } catch (e) {
+      throw new Error()
+    }
+  }
+
+  const onAddClick = async (e) => {
+    e.stopPropagation()
+
+    try {
+      await save()
+
+      if (
+        (selectablePropertyTypes??[]).length>0
+        && (selectablePropertyTypes[0].supportedOperatorTypes??[]).length>0
+        && (selectablePropertyTypes[0].supportedMetadataTypes??[]).length>0
+      ) {
+        setTableData(prevTableData => {
+          return [...prevTableData??[], {
+            modelType: selectablePropertyTypes[0].modelType,
+            operatorType: selectablePropertyTypes[0].supportedOperatorTypes[0],
+            metadataType: selectablePropertyTypes[0].supportedMetadataTypes[0],
+          }]
+        })
+        setEditingKey(selectablePropertyTypes[0].modelType?.name)
+        setEditingModelKey(selectablePropertyTypes[0].modelType?.name)
+
+        form?.setFieldsValue({
+          modelType: selectablePropertyTypes[0].modelType?.name,
+          operatorType: selectablePropertyTypes[0].supportedOperatorTypes[0].id,
+          metadataType: selectablePropertyTypes[0].supportedMetadataTypes[0].name,
+        })
+      } else {
+        showMessage('warn', '模型属性都设置了策略')
+      }
+    } catch(e) {
+      
+    }
+  }
+
+  const onBatchDeleteClick = () => {
+    setTableData(prevTableData => {
+      let newTableData = [...prevTableData??[]];
+      newTableData = (newTableData??[]).filter(item => (selectedRows??[]).map(_item => _item.modelType?.name).indexOf(item?.modelType?.name)===-1);
+      return newTableData;
+    }) 
 
+    const index = (selectedRows??[]).findIndex(item => item.modelType?.type === editingKey)
+    if (index !== -1) {
+      setEditingKey()
     }
+    setSelectedRows()
+  }
+
+  // const onRightEditClick = async (record) => {
+  //   try {
+  //     await save()
+      
+  //     setEditingKey(record?.modelType?.name)
+  //     setEditingModelKey(record?.modelType?.name)
+  //   } catch(e) {
+
+  //   }
+  // }
+
+  const onRightDeleteClick = (record) => {
+    if (isEditing(record)) {
+      setEditingKey()
+    }
+
+    setTableData(prevTableData => {
+      let newTableData = [...prevTableData??[]];
+      const index = (newTableData??[]).findIndex(item => item.modelType?.name === record?.modelType?.name);
+      (newTableData??[]).splice(index, 1);
+      return newTableData;
+    }) 
   }
 
   const onRightMenuItemClick = (key, record) => {
+    if (key === '删除') {
+      onRightDeleteClick(record)
+    }
+  }
 
+  const onValuesChange = (changedValues, allValues) => {
+    if (changedValues.hasOwnProperty('modelType')) {
+      setEditingModelKey(changedValues['modelType'])
+      const index = (selectablePropertyTypes??[]).findIndex(item => item.modelType?.name === changedValues['modelType'])
+      if (index !== -1 
+        && (selectablePropertyTypes[index].supportedOperatorTypes??[]).length>0
+        && (selectablePropertyTypes[index].supportedMetadataTypes??[]).length>0
+        ) {
+        form?.setFieldsValue({
+          operatorType: selectablePropertyTypes[index].supportedOperatorTypes[0].id,
+          metadataType: selectablePropertyTypes[index].supportedMetadataTypes[0].name,
+        })
+      }
+    }
   }
 
   const columns = [
@@ -408,13 +526,13 @@ const Strategy = React.forwardRef(function ({ type, task }, ref) {
       dataIndex: 'index',
       width:60,
       editable: false,
-      // render:(_, __, index)=> ((args.page-1)*args.size+index+1)
+      render:(_, __, index)=> (index+1)
     },
     {
       title: '模型属性',
       dataIndex: 'modelType',
       editable: true,
-      render: (_, record) => record.modelType?.name
+      render: (_, record) => record.modelType?.cnName
     },
     {
       title: '匹配规则',
@@ -426,7 +544,7 @@ const Strategy = React.forwardRef(function ({ type, task }, ref) {
       title: '元数据属性',
       dataIndex: 'metadataType',
       editable: true,
-      render: (_, record) => record.metadataType?.name
+      render: (_, record) => record.metadataType?.cnName
     },
   ]
 
@@ -438,10 +556,11 @@ const Strategy = React.forwardRef(function ({ type, task }, ref) {
       ...col,
       onCell: (record) => ({
         record,
-        inputType: 'select',
         dataIndex: col.dataIndex,
         title: col.title,
         editing: isEditing(record),
+        editingModelKey,
+        propertyTypes: selectablePropertyTypes,
       }),
     }
   })
@@ -449,19 +568,22 @@ const Strategy = React.forwardRef(function ({ type, task }, ref) {
   return (
     <Spin spinning={loadingPropertyTypes}>
       <div>
-        <Space>
-          <Button>新建</Button>
-          <Button>删除</Button>
+        <Space className='mb-3'>
+          <Button onClick={onAddClick}>新建</Button>
+          <Tooltip title={(selectedRows??[]).length===0?'请先选择对比策略':''}>
+            <Button disabled={(selectedRows??[]).length===0} onClick={onBatchDeleteClick}>删除</Button>
+          </Tooltip>
         </Space>
         <div ref={tableRef}>
-        <Form form={form} component={false}>
+        <Form onValuesChange={onValuesChange} form={form} component={false}>
           <Table
+            rowKey={(record) => record?.modelType?.name}
             extraColWidth={32}
             columns={mergedColumns??[]}
             dataSource={tableData??[]}
             bodyCell={EditableCell}
             rowSelection={{
-              selectedRowKeys: (selectedRows??[]).map(item => item.id),
+              selectedRowKeys: (selectedRows??[]).map(item => item.modelType?.name),
               onChange: (selectedRowKeys, selectedRows) => {
                 setSelectedRows(selectedRows)
               },
@@ -470,8 +592,8 @@ const Strategy = React.forwardRef(function ({ type, task }, ref) {
             shouldRowContextMenu={(record) => {
               return true
             }}
-            menuData={['执行', '编辑', '删除']}
-            menuPermissions={['执行', '编辑', '删除']}
+            menuData={['删除']}
+            menuPermissions={['删除']}
             onMenuItemClick={onRightMenuItemClick}
           />
         </Form>
@@ -483,17 +605,44 @@ const Strategy = React.forwardRef(function ({ type, task }, ref) {
 
 const EditableCell = ({
   editing,
+  editingModelKey,
   dataIndex,
   title,
+  propertyTypes,
   record,
   index,
-  inputNode,
   children,
   ...restProps
 }) => {
+  const data = React.useMemo(() => {
+    if (title === '模型属性') {
+      return (propertyTypes??[]).map(item => ({
+        id: item.modelType?.name,
+        name: item.modelType?.cnName,
+      }))
+    }
+    const index = (propertyTypes??[]).findIndex(item => item.modelType?.name === editingModelKey)
+    if (index !== -1) {
+      const currentPropertyType = propertyTypes[index]
+      if (title === '匹配规则') {
+        return currentPropertyType.supportedOperatorTypes
+      }
+
+      if (title === '元数据属性') {
+        return currentPropertyType.supportedMetadataTypes.map(item => ({
+          id: item.name,
+          name: item.cnName,
+        }))
+      }
+    }
+
+    return []
+  }, [title, propertyTypes, editingModelKey])
+
   return (
     <td {...restProps}>
       {editing ? (
+        <div onClick={e => { e.stopPropagation() }}>
           <Form.Item
             name={dataIndex}
             style={{
@@ -506,8 +655,11 @@ const EditableCell = ({
               },
             ]}
           >
-          {inputNode}
+            <Select>
+              {(data??[]).map(item => <Select.Option key={item.id} value={item.id} >{item.name}</Select.Option>)}
+            </Select>
           </Form.Item>
+        </div>
       ) : (
         children
       )}