规则增删改

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

+import React from 'react'
+import { Button, Modal, Spin, Typography, Tooltip, Input } from 'antd'
+
+import { dispatch } from '../../../../model'
+import Table from '../../../../util/Component/Table'
+import { showMessage } from '../../../../util'
+import Update from './update-rule-template'
+
+const FC = (props) => {
+  const { visible, node, onCancel } = props
+  const [waiting, setWaiting] = React.useState(false)
+  const basicRef = React.useRef()
+
+  const close = (refresh = false) => {
+    setWaiting(false)
+    onCancel?.(refresh)
+  }
+
+  const save = () => {
+    const selectedRows = basicRef.current?.selectedRows
+    if ((selectedRows??[]).length === 0) {
+      showMessage('warn', '请先选择规则模板')
+      return
+    }
+
+    setWaiting(true)
+    dispatch({
+      type: 'datamodel.addRule',
+      payload: {
+        params: {
+          catalogId: node?.id,
+          templateIds: (selectedRows??[]).map(item => item.id).toString()
+        }
+      },
+      callback: data => {
+        close(true)
+      },
+      error: () => {
+        setWaiting(false)
+      }
+    })
+  }
+
+  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={footer}
+      width='80%'
+      bodyStyle={{ padding: '15px', overflowX: 'auto', maxHeight: '80vh' }}
+      title='新增检查规则'
+      centered destroyOnClose
+      onCancel={() => { close() }}
+    >
+      <Spin spinning={waiting}>
+        <Basic ref={basicRef} />
+      </Spin>
+    </Modal>
+  )
+}
+
+export default FC
+
+export const Basic = React.forwardRef(function ({}, ref) {
+  const [keyword, setKeyword] = React.useState()
+  const [loading, setLoading] = React.useState(false)
+  const [data, setData] = React.useState()
+  const [selectedRows, setSelectedRows] = React.useState()
+  const [updateParams, setUpdateParams] = React.useState({
+    visible: false,
+    type: undefined, 
+    item: undefined
+  })
+
+  React.useImperativeHandle(ref, () => ({
+    selectedRows
+  }), [selectedRows])
+
+  React.useEffect(() => {
+    getTemplates()
+  }, [])
+
+  const cols = React.useMemo(() => {
+    return ([
+      {
+        title: '序号',
+        dataIndex: 'index',
+        width: 60,
+        render: (_, __, index) => `${index+1}`
+      },
+      {
+        title: '规则编号',
+        dataIndex: 'number',
+        render: (text, record) => (
+          <Tooltip title={text}>
+            <Typography.Text ellipsis={true}>
+              { text }
+            </Typography.Text>
+          </Tooltip>
+        )
+      },
+      {
+        title: '规则中文名称',
+        dataIndex: 'name',
+        render: (text, record) => (
+          <Tooltip title={text}>
+            <Typography.Text ellipsis={true}>
+              <a onClick={() => {
+                setUpdateParams({
+                  visible: true,
+                  type: 'detail',
+                  item: record
+                })
+              }}>
+              { text }
+              </a>
+            </Typography.Text>
+          </Tooltip>
+        )
+      },
+      {
+        title: '规则描述',
+        dataIndex: 'remark',
+        render: (text, record) => (
+          <Tooltip title={text}>
+            <Typography.Text ellipsis={true}>
+              { text }
+            </Typography.Text>
+          </Tooltip>
+        )
+      },
+      {
+        title: '检查类型',
+        dataIndex: 'checkTypeName',
+        render: (text, record) => (
+          <Tooltip title={text}>
+            <Typography.Text ellipsis={true}>
+              { text }
+            </Typography.Text>
+          </Tooltip>
+        )
+      },
+    ])
+  }, [])
+
+  const _data = React.useMemo(() => {
+    const _keyword = (keyword??'').trim()
+    return (data??[]).filter(item => !_keyword 
+      || (item.name??'').indexOf(_keyword) !== -1
+      || (item.remark??'').indexOf(_keyword) !== -1
+    )
+  }, [data, keyword])
+
+  const getTemplates = () => {
+    setLoading(true)
+    dispatch({
+      type: 'datamodel.getRuleTemplateList',
+      callback: data => {
+        setLoading(false)
+        setData(data)
+      },
+      error: () => {
+        setLoading(false)
+      }
+    })
+  }
+
+  return (
+    <div>
+      <div className='d-flex mb-3' style={{ justifyContent: 'end', alignItems: 'center' }}>
+        <Input size="middle"
+          placeholder="规则名称/描述搜索"
+          value={keyword}
+          bordered={true} allowClear
+          onChange={(e) => {
+            setKeyword(e.target.value)
+          }} 
+          style={{ width: 270 }}
+        />
+      </div>
+      <Table
+        extraColWidth={32}
+        loading={loading}
+        columns={cols??[]}
+        dataSource={_data}
+        pagination={false}
+        rowSelection={{
+          selectedRowKeys: (selectedRows??[]).map(item => item.id),
+          onChange: (selectedRowKeys, selectedRows) => {
+            setSelectedRows(selectedRows)
+          },
+        }}
+      />
+      <Update 
+        {...updateParams}
+        onCancel={(refresh) => {
+          setUpdateParams({
+            visible: false,
+            type: undefined,
+            item: undefined
+          })
+
+          refresh && getTemplates()
+        }}
+      />
+    </div>
+  )
+})
\ No newline at end of file

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

@@ -3,6 +3,8 @@ import { Typography, Tooltip, Divider, Space, Input, Select, Modal } from "antd"
 
 import { dispatch } from '../../../../model'
 import Table from '../../../../util/Component/Table'
+import AddRule from './add-rule'
+import UpdateRule from './update-rule'
 import PermissionButton from '../../../../util/Component/PermissionButton'
 import { showMessage } from "../../../../util"
 
@@ -20,7 +22,15 @@ const FC = (props) => {
   const [status, setStatus] = React.useState()
   const [loadingAlertTypes, setLoadingAlertTypes] = React.useState(false)
   const [alertTypes, setAlertTypes] = React.useState()
-
+  const [addRuleParams, setAddRuleParams] = React.useState({
+    visible: false,
+    node: undefined,
+  })
+  const [updateRuleParams, setUpdateRuleParams] = React.useState({
+    visible: false,
+    item: undefined,
+  })
+ 
   const [modal, contextHolder] = Modal.useModal()
 
   React.useEffect(() => {
@@ -110,7 +120,10 @@ const FC = (props) => {
                 type='link'
                 size='small'
                 onClick={() => {
-                  
+                  setUpdateRuleParams({
+                    visible: true,
+                    item: record,
+                  })
                 }}
                 style={{ padding: 0 }}
                 // permissionKey='编辑'
@@ -140,6 +153,23 @@ const FC = (props) => {
     ])
   }, [])
 
+  const tableData = React.useMemo(() => {
+    return data?.filter(item => 
+      (
+        !args.keyword 
+        || (item.ruleTemplateName??'').indexOf(args.keyword) !== -1 
+        || (item.ruleTemplateRemark??'').indexOf(args.keyword) !== -1
+      ) 
+      && (
+        !args.statusId 
+        || (item.statusId??'').indexOf(args.statusId) !== -1
+      ) && (
+        !args.alertTypeId 
+        || (item.alertTypeId??'').indexOf(args.alertTypeId) !== -1
+      )
+    )
+  }, [data, args])
+
   const getRules = () => {
     setLoading(true)
     dispatch({
@@ -186,7 +216,24 @@ const FC = (props) => {
   }
 
   const onAddClick = () => {
+    if (!node) {
+      showMessage('warn', '请先选择目录')
+      return 
+    }
+
+    setAddRuleParams({
+      visible: true,
+      node
+    })
+  }
+
+  const onExportClick = () => {
+    if (!node) {
+      showMessage('warn', '请先选择目录')
+      return 
+    }
 
+    window.open(`/api/shandatamodeler/easyDataModelerRule/exportRules?catalogId=${node?.id}`)
   }
 
   const onBatchDeteteClick = () => {
@@ -250,7 +297,7 @@ const FC = (props) => {
           删除
           </PermissionButton>
           <PermissionButton 
-            onClick={() => {  }} 
+            onClick={onExportClick} 
             defaultPermission={true}
           >
           导出
@@ -296,7 +343,7 @@ const FC = (props) => {
         extraColWidth={32}
         loading={loading}
         columns={cols??[]}
-        dataSource={data}
+        dataSource={tableData??[]}
         pagination={false}
         rowSelection={{
           selectedRowKeys: (selectedRows??[]).map(item => item.id),
@@ -305,6 +352,28 @@ const FC = (props) => {
           },
         }}
       />
+      <AddRule
+        {...addRuleParams}
+        onCancel={(refresh) => {
+          setAddRuleParams({
+            visible: false,
+            node: undefined,
+          })
+
+          refresh && getRules()
+        }}
+      />
+      <UpdateRule
+        {...updateRuleParams}
+        onCancel={(refresh) => {
+          setUpdateRuleParams({
+            visible: false,
+            item: undefined,
+          })
+
+          refresh && getRules()
+        }}
+      />
       {contextHolder}
     </div>
   )

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

+import React from 'react'
+import { Button, Modal, Spin, Form, Input, Select } from 'antd'
+
+import { dispatch } from '../../../../model'
+
+const FC = (props) => {
+  const { visible, item, onCancel } = props
+  const [waiting, setWaiting] = React.useState(false)
+  const basicRef = React.useRef()
+
+  const close = (refresh = false) => {
+    setWaiting(false)
+    onCancel?.(refresh)
+  }
+
+  const save = async() => {
+    try {
+      const rows = await basicRef.current?.validate()
+      setWaiting(true)
+      dispatch({
+        type: 'datamodel.updateRule',
+        payload: {
+          params: {id: item?.id, ...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={footer}
+      width='80%'
+      bodyStyle={{ padding: '15px', overflowX: 'auto', maxHeight: '80vh' }}
+      title='编辑检查规则'
+      centered destroyOnClose
+      onCancel={() => { close() }}
+    >
+      <Spin spinning={waiting}>
+        <Basic ref={basicRef} 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 [loadingAlertTypes, setLoadingAlertTypes] = React.useState(false)
+  const [alertTypes, setAlertTypes] = React.useState()
+  const [form] = Form.useForm()
+
+  React.useImperativeHandle(ref, () => ({
+    validate: async () => {
+      return await form?.validateFields()
+    },
+  }), [form])
+
+  React.useEffect(() => {
+    getStatus()
+    getAlertTypes()
+  }, [])
+
+  React.useEffect(() => {
+    if (item) {
+      form?.setFieldsValue(item)
+    }
+  }, [item])
+
+  const getStatus = () => {
+    setLoadingStatus(true)
+    dispatch({
+      type: 'datamodel.getRuleStatus',
+      callback: data => {
+        setLoadingStatus(false)
+        setStatus(data)
+      },
+      error: () => {
+        setLoadingStatus(false)
+      }
+    })
+  }
+
+  const getAlertTypes = () => {
+    setLoadingAlertTypes(true)
+    dispatch({
+      type: 'datamodel.getRuleAlertTypes',
+      callback: data => {
+        setLoadingAlertTypes(false)
+        setAlertTypes(data)
+      },
+      error: () => {
+        setLoadingAlertTypes(false)
+      }
+    })
+  }
+
+  const onValuesChange = (changedValues, allValues) => {
+
+  }
+
+  return (
+    <Form
+      form={form}
+      labelCol={{ span: 3 }}
+      wrapperCol={{ span: 21 }}
+      autoComplete="off"
+      onValuesChange={onValuesChange}
+    >
+      <Form.Item label='规则名称'
+      >
+        <span>{item?.ruleTemplateName}</span>
+      </Form.Item>
+      <Form.Item label='规则描述'
+      >
+        <span>{item?.ruleTemplateRemark}</span>
+      </Form.Item>
+      <Form.Item name='statusId' label='规则状态'
+        rules={[{ required: true, message: '请选择规则状态!' }]}
+      >
+        <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='alertTypeId' label='规则类型'
+        rules={[{ required: true, message: '请选择规则类型!' }]}
+      >
+        <Select loading={loadingAlertTypes} allowClear placeholder='请选择类型'>
+          { (alertTypes??[]).map(item => ( <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option> )) }
+        </Select>
+      </Form.Item>
+      <Form.Item name='alertContent' label='规则提示'
+        rules={[{ required: true, message: '请输入规则提示!' }]}
+      >
+        <Input allowClear placeholder='请输入规则提示' />
+      </Form.Item>
+    </Form>
+  )
+})
\ No newline at end of file