规则目录增删改

src/view/Manage/ModelConfig/Component/rule-tree.jsx

+import React from 'react'
+import produce from 'immer'
+import { Modal, Tooltip, Button, Spin } from 'antd'
+import { PlusOutlined, ReloadOutlined } from '@ant-design/icons'
+
+import { dispatch } from '../../../../model'
+import Tree from '../../../../util/Component/Tree'
+import PermissionButton from '../../../../util/Component/PermissionButton'
+import Update from './update-rule-catalog'
+import { showMessage } from '../../../../util'
+
+const FC = (props) => {
+  const { onClick } = props
+  const [loading, setLoading] = React.useState(false)
+  const [data, setData] = React.useState()
+  const [selectedNode, setSelectedNode] = React.useState()
+  const [updateParams, setUpdateParams] = React.useState({
+    visible: false,
+    type: undefined,
+    node: undefined,
+  })
+
+  const [modal, contextHolder] = Modal.useModal()
+
+  React.useEffect(() => {
+    getTreeData()
+  }, [])
+
+  const treeData = React.useMemo(() => {
+    if (data) {
+      const newTreeData = produce(data, draft => {
+        const setNode = (g) => {
+          g.key = g.id
+          g.title = g.name
+        }
+        draft.forEach((child) => {
+          setNode(child)
+        })
+      })
+  
+      return newTreeData
+    }
+
+    return []
+  }, [data])
+
+  const getTreeData = () => {
+    setLoading(true)
+    dispatch({
+      type: 'datamodel.getRuleCatalogList',
+      callback: data => {
+        setLoading(false);
+        setData(data)
+
+        if ((data??[]).length > 0 && !selectedNode) {
+          onTreeSelect([data[0].id], { selectedNodes: [data[0]]})
+        }
+      },
+      error: () => {
+        setLoading(false);
+      }
+    })
+  }
+
+  const onTreeSelect = (selectedKeys, { selectedNodes }) => {
+    if (selectedKeys.length === 0 || selectedNodes.length === 0) {
+      return
+    }
+    
+    setSelectedNode(selectedNodes[0])
+    onClick?.(selectedNodes[0])
+  }
+
+  const onAddClick = () => {
+    setUpdateParams({
+      visible: true,
+      type: 'add',
+      item: undefined
+    })
+  }
+
+  const onRefreshClick = () => {
+    getTreeData()
+  }
+
+  const onMenuItemClick = (key, node) => {
+    if (key === 'delete') {
+      modal.confirm({
+        title: '提示!',
+        content: '您确定删除该目录吗?',
+        onOk: () => {
+          setLoading(true);
+          dispatch({
+            type: 'datamodel.deleteRuleCatalog',
+            payload: {
+              id: node?.id
+            },
+            callback: data => {
+              showMessage('success', '删除目录成功')
+              if (selectedNode?.id === node?.id) {
+                setSelectedNode()
+              }
+              getTreeData()
+            }
+          })
+        }
+      })
+    } else if (key === 'edit') {
+      setUpdateParams({
+        visible: true,
+        type: 'edit',
+        item: node
+      })
+    } else if (key === 'up') {
+      modal.confirm({
+        title: '提示!',
+        content: '您确定上移该目录吗?',
+        onOk: () => {
+          dispatch({
+            type: 'datamodel.upRuleCatalog',
+            payload: {
+              params: {
+                id: node?.id
+              }
+            },
+            callback: data => {
+              getTreeData()
+            }
+          })
+        }
+      })
+    } else if (key === 'down') {
+      modal.confirm({
+        title: '提示!',
+        content: '您确定下移该目录吗?',
+        onOk: () => {
+          dispatch({
+            type: 'datamodel.downRuleCatalog',
+            payload: {
+              params: {
+                id: node?.id
+              }
+            },
+            callback: data => {
+              getTreeData()
+            }
+          })
+        }
+      })
+    }
+  }
+
+  return (
+    <div>
+      <div className='header p-3'>
+        <PermissionButton 
+          defaultPermission={true} 
+          tip="新增目录"
+          type="text" 
+          icon={<PlusOutlined />} 
+          onClick={onAddClick} 
+        />
+        <Tooltip title="刷新目录">
+          <Button type="text" icon={<ReloadOutlined />} onClick={onRefreshClick} />
+        </Tooltip>
+      </div>
+      <div className='p-3'>
+        <Spin spinning={loading}>
+          <Tree
+            className='tree'
+            showLine 
+            showIcon={false} 
+            treeData={treeData}
+            onSelect={onTreeSelect}
+            selectedKeys={(selectedNode?.id)?[selectedNode?.id]:undefined}
+            shouldRowContextMenu={() => true}
+            menuData={[
+              { id: 'edit', title: '编辑目录' },
+              { id: 'up', title: '上移目录' },
+              { id: 'down', title: '下移目录' },
+              { id: 'delete', title: '删除目录' },
+            ]}
+            onMenuItemClick={onMenuItemClick}
+          />
+        </Spin>
+      </div>
+      <Update
+        {...updateParams}
+        onCancel={(refresh) => {
+          setUpdateParams({
+            visible: false,
+            type: undefined,
+            item: undefined
+          })
+
+          refresh && getTreeData()
+        }}
+      /> 
+      {contextHolder}
+    </div>
+  )
+}
+
+export default FC
\ No newline at end of file

src/view/Manage/ModelConfig/Component/rule.jsx

+import React from 'react'
+import classNames from 'classnames'
+
+import Tree from './rule-tree'
+
+const FC = (props) => {
+  return (
+    <div>
+      <Tree />
+    </div>
+  )
+}
+
+export default FC
\ No newline at end of file

src/view/Manage/ModelConfig/Component/update-rule-catalog.jsx

+import React from "react"
+import { Button, Spin, Modal, Form, Input, Select } from "antd"
+
+import { dispatch } from '../../../../model'
+
+const FC = (props) => {
+  const { visible, type, item, onCancel } = props
+  const [waiting, setWaiting] = React.useState(false)
+  const basicRef = React.useRef()
+
+  const title = React.useMemo(() => {
+    if (type === 'add') return '新增规范'
+    if (type === 'edit') return '修改规范'
+    if (type === 'detail') return '规范详情'
+
+    return ''
+  }, [type])
+
+  const close = (refresh = false) => {
+    setWaiting(false)
+    onCancel?.(refresh)
+  }
+
+  const save = async() => {
+    try {
+      const rows = await basicRef.current?.validate()
+      setWaiting(true)
+      if (type === 'add') {
+        dispatch({
+          type: 'datamodel.addRuleCatalog',
+          payload: {
+            data: rows
+          },
+          callback: data => {
+            close(true)
+          },
+          error: () => {
+            setWaiting(false)
+          }
+        })
+      } else {
+        dispatch({
+          type: 'datamodel.updateRuleCatalog',
+          payload: {
+            data: {...item, ...rows}
+          },
+          callback: data => {
+            close(true)
+          },
+          error: () => {
+            setWaiting(false)
+          }
+        })
+      }
+       
+    } catch (e) {
+      
+    }
+  }
+
+  const footer = React.useMemo(() => {
+    return [
+      <Button key='cancel'
+        onClick={() => close()}
+      >取消</Button>,
+      <Button key='save' type='primary'
+        onClick={() => save()}
+      >确定</Button>
+    ]
+  }, [close, save])
+
+  return (
+    <Modal
+      visible={visible}
+      footer={type!=='detail'?footer:null}
+      width='80%'
+      bodyStyle={{ padding: '15px', overflowX: 'auto', maxHeight: '80vh' }}
+      title={title}
+      centered destroyOnClose
+      onCancel={() => { close() }}
+    >
+      <Spin spinning={waiting}>
+        <Basic ref={basicRef} type={type} item={item} />
+      </Spin>
+    </Modal>
+  )
+}
+
+export default FC
+
+export const Basic = React.forwardRef(function ({ type, item }, ref) {
+  const [loadingStatus, setLoadingStatus] = React.useState(false)
+  const [status, setStatus] = React.useState()
+  const [form] = Form.useForm()
+
+  React.useImperativeHandle(ref, () => ({
+    validate: async () => {
+      return await form?.validateFields()
+    },
+  }), [form])
+
+  React.useEffect(() => {
+    getStatus()
+  }, [])
+
+  React.useEffect(() => {
+    if (item) {
+      form?.setFieldsValue(item)
+    }
+  }, [item])
+
+  const marginBottom = React.useMemo(() => {
+    return type === 'detail' ? 5 : 15
+  }, [type])
+
+  const getStatus = () => {
+    setLoadingStatus(true)
+    dispatch({
+      type: 'datamodel.getRuleCatalogStatus',
+      callback: (data) => {
+        setLoadingStatus(false)
+        setStatus(data)        
+      },
+      error: () => {
+        setLoadingStatus(false)
+      }
+    })
+  } 
+
+  const onValuesChange = (changedValues, allValues) => {
+
+  }
+
+  return (
+    <Form
+      form={form}
+      labelCol={{ span: 3 }}
+      wrapperCol={{ span: 21 }}
+      autoComplete="off"
+      onValuesChange={onValuesChange}
+    >
+      <Form.Item name='name' label='规范名称'
+        style={{ marginBottom }}
+        rules={[{ required: true, message: '请输入规范名称!' }]}
+      >
+        {
+          type === 'detail' ? <span>{item?.name}</span> : <Input placeholder='请输入规范名称' allowClear />
+        }
+      </Form.Item>
+      <Form.Item name='remark' label='描述'
+        style={{ marginBottom }}
+      >
+        {
+          type === 'detail' ? <span>{item?.name}</span> : <Input placeholder='请输入描述' allowClear />
+        }
+      </Form.Item>
+      <Form.Item name='statusId' label='状态'
+        style={{ marginBottom }}
+      >
+        {
+          type === 'detail' ? <span>{item?.statusName}</span> : <Select loading={loadingStatus} allowClear placeholder='请选择状态'>
+            { (status??[]).map(item => ( <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option> )) }
+          </Select>
+        }
+      </Form.Item>
+      <Form.Item name='maintenanceContent' label='维护说明'
+        style={{ marginBottom }}
+      >
+        {
+          type === 'detail' ? <span>{item?.name}</span> : <Input placeholder='请输入维护说明' allowClear />
+        }
+      </Form.Item>
+    </Form>
+  )
+})
\ No newline at end of file

src/view/Manage/ModelConfig/index.jsx

@@ -4,7 +4,7 @@ import { Tabs, Spin } from 'antd';
 import { dispatch } from '../../../model';
 import WordTemplate from './Component/WordTemplate';
 import TemplateCURD from './Component/TemplateCURD';
-import ConstraintDetail from './Component/ConstraintDetail';
+import RuleCURD from './Component/rule';
 import RuleTemplateCURD from './Component/rule-template';
 import PartitionCURD from './Component/PartitionCURD';
 
@@ -57,7 +57,7 @@ const ModelConfig = () => {
               <TemplateCURD />
             </TabPane>
             <TabPane tab='规范配置' key='3'>
-              <ConstraintDetail />
+              <RuleCURD />
             </TabPane>
             <TabPane tab='规则库管理' key='4'>
               <RuleTemplateCURD />