对比策略

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 { useClickAway } from 'ahooks'
 import moment from 'moment'
 
 import { dispatch } from '../../../model'
+import Table from '../../../util/Component/Table'
 
 const FC = (props) => {
   const { visible, type, item, onCancel} = props
@@ -11,6 +13,7 @@ const FC = (props) => {
   const [task, setTask] = React.useState()
 
   const basicFormRef = React.useRef(null)
+  const strategyRef = React.useRef(null)
   const scheduleFormRef = React.useRef(null)
 
   const title = React.useMemo(() => {
@@ -123,6 +126,8 @@ const FC = (props) => {
       <Spin spinning={loading || waiting}>
         <Header title='基本信息' />
         <BasicForm ref={basicFormRef} type={type} task={task} />
+        <Header title='对比策略' />
+        <Strategy ref={strategyRef} type={type} task={task} />
         <Header title='调度配置' />
         <ScheduleForm ref={scheduleFormRef} type={type} task={task} />
       </Spin>
@@ -343,6 +348,173 @@ const BasicForm = React.forwardRef(function ({ type, task }, ref) {
   )
 })
 
+const Strategy = React.forwardRef(function ({ type, task }, ref) {
+  const [loadingPropertyTypes, setLoadingPropertyTypes] = React.useState(false)
+  const [propertyTypes, setPropertyTypes] = React.useState()
+  const [selectedRows, setSelectedRows] = React.useState()
+  const [tableData, setTableData] = React.useState()
+  const [editingKey, setEditingKey] = React.useState('')
+
+  const [form] = Form.useForm()
+  const tableRef = React.useRef()
+
+  const isEditing = (record) => record.modelType?.name === editingKey
+
+  useClickAway(() => {
+    save()
+  }, tableRef)
+
+  React.useEffect(() => {
+    if (type === 'edit') {
+      getPropertyTypes()
+    }
+  }, [type])
+
+  const selectablePropertyTypes = React.useMemo(() => {
+    return (propertyTypes??[]).filter(item => 
+      (tableData??[]).map(_item => _item.modelType?.name).indexOf(item.modelType?.name)
+    )
+  }, [propertyTypes, tableData])
+
+  const getPropertyTypes = () => {
+    setLoadingPropertyTypes(true)
+    dispatch({
+      type: 'datamodel.getStrategyItemPropertyTypes',
+      callback: data => {
+        setLoadingPropertyTypes(false)
+        setPropertyTypes(data)
+      },
+      error: () => {
+        setLoadingPropertyTypes(false)
+      }
+    })
+  }
+
+  const save = async () => {
+    try {
+      await form.validateFields()
+    } catch (e) {
+      
+    }
+  }
+
+  const onRightMenuItemClick = (key, record) => {
+
+  }
+
+  const columns = [
+    {
+      title: '序号',
+      dataIndex: 'index',
+      width:60,
+      editable: false,
+      render:(_, __, index)=> ((args.page-1)*args.size+index+1)
+    },
+    {
+      title: '模型属性',
+      dataIndex: 'modelType',
+      editable: true,
+      render: (_, record) => record.modelType?.name
+    },
+    {
+      title: '匹配规则',
+      dataIndex: 'operatorType',
+      editable: true,
+      render: (_, record) => record.operatorType?.name
+    },
+    {
+      title: '元数据属性',
+      dataIndex: 'metadataType',
+      editable: true,
+      render: (_, record) => record.metadataType?.name
+    },
+  ]
+
+  const mergedColumns = columns.map((col) => {
+    if (!col.editable) {
+      return col;
+    }
+    return {
+      ...col,
+      onCell: (record) => ({
+        record,
+        inputType: 'select',
+        dataIndex: col.dataIndex,
+        title: col.title,
+        editing: isEditing(record),
+      }),
+    }
+  })
+
+  return (
+    <Spin spinning={loadingPropertyTypes}>
+      <div>
+        <Space>
+          <Button>新建</Button>
+          <Button>删除</Button>
+        </Space>
+        <div ref={tableRef}>
+        <Form form={form} component={false}>
+          <Table
+            extraColWidth={32}
+            columns={mergedColumns??[]}
+            dataSource={tableData??[]}
+            bodyCell={EditableCell}
+            rowSelection={{
+              selectedRowKeys: (selectedRows??[]).map(item => item.id),
+              onChange: (selectedRowKeys, selectedRows) => {
+                setSelectedRows(selectedRows)
+              },
+            }}
+            pagination={false}
+            shouldRowContextMenu={(record) => {
+              return true
+            }}
+            menuData={['执行', '编辑', '删除']}
+            menuPermissions={['执行', '编辑', '删除']}
+            onMenuItemClick={onRightMenuItemClick}
+          />
+        </Form>
+        </div>
+      </div>
+    </Spin>
+  )
+})
+
+const EditableCell = ({
+  editing,
+  dataIndex,
+  title,
+  record,
+  index,
+  inputNode,
+  children,
+  ...restProps
+}) => {
+  return (
+    <td {...restProps}>
+      {editing ? (
+        <Form.Item
+          name={dataIndex}
+          style={{
+            margin: 0,
+          }}
+          rules={[
+            {
+              required: true,
+              message: `请选择${title}`,
+            },
+          ]}
+        >
+          {inputNode}
+        </Form.Item>
+      ) : (
+        children
+      )}
+    </td>
+  );
+}
+
 const ScheduleForm = React.forwardRef(function ({ type, task }, ref) {
   const [scheduleEnable, setScheduleEnable] = React.useState(false)