规范列表

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

+import React from "react"
+import { Typography, Tooltip, Divider, Space, Input, Select, Modal } from "antd"
+
+import { dispatch } from '../../../../model'
+import Table from '../../../../util/Component/Table'
+import PermissionButton from '../../../../util/Component/PermissionButton'
+import { showMessage } from "../../../../util"
+
+const FC = (props) => {
+  const { node } = props
+  const [args, setArgs] = React.useState(() => ({
+    statusId: undefined,
+    alertTypeId: undefined,
+    keyword: undefined,
+  }))
+  const [loading, setLoading] = React.useState(false)
+  const [data, setData] = React.useState()
+  const [selectedRows, setSelectedRows] = React.useState()
+  const [loadingStatus, setLoadingStatus] = React.useState(false)
+  const [status, setStatus] = React.useState()
+  const [loadingAlertTypes, setLoadingAlertTypes] = React.useState(false)
+  const [alertTypes, setAlertTypes] = React.useState()
+
+  const [modal, contextHolder] = Modal.useModal()
+
+  React.useEffect(() => {
+    getStatus()
+    getAlertTypes()
+  }, [])
+
+  React.useEffect(() => {
+    if (node?.id) {
+      getRules()
+    }
+  }, [node])
+
+  const cols = React.useMemo(() => {
+    return ([
+      {
+        title: '序号',
+        dataIndex: 'index',
+        width: 60,
+        render: (_, __, index) => `${index+1}`
+      },
+      {
+        title: '规则名称',
+        dataIndex: 'ruleTemplateName',
+        render: (text, record) => (
+          <Tooltip title={text}>
+            <Typography.Text ellipsis={true}>
+              <a>
+              { text }
+              </a>
+            </Typography.Text>
+          </Tooltip>
+        )
+      },
+      {
+        title: '规则描述',
+        dataIndex: 'ruleTemplateRemark',
+        render: (text, record) => (
+          <Tooltip title={text}>
+            <Typography.Text ellipsis={true}>
+              { text }
+            </Typography.Text>
+          </Tooltip>
+        )
+      },
+      {
+        title: '规则状态',
+        dataIndex: 'statusName',
+        render: (text, record) => (
+          <Tooltip title={text}>
+            <Typography.Text ellipsis={true}>
+              { text }
+            </Typography.Text>
+          </Tooltip>
+        )
+      },
+      {
+        title: '规则类型',
+        dataIndex: 'alertTypeName',
+        render: (text, record) => (
+          <Tooltip title={text}>
+            <Typography.Text ellipsis={true}>
+              { text }
+            </Typography.Text>
+          </Tooltip>
+        )
+      },
+      {
+        title: '规则提示',
+        dataIndex: 'alertContent',
+        render: (text, record) => (
+          <Tooltip title={text}>
+            <Typography.Text ellipsis={true}>
+              { text }
+            </Typography.Text>
+          </Tooltip>
+        )
+      },
+      {
+        title: '操作',
+        key: 'action',
+        width: 120,
+        render: (text, record) => {
+          return (  
+            <div style={{ display: 'flex', alignItems: 'center'  }}>
+              <PermissionButton 
+                type='link'
+                size='small'
+                onClick={() => {
+                  
+                }}
+                style={{ padding: 0 }}
+                // permissionKey='编辑'
+                // permissions={permissions}
+                defaultPermission={true}
+              >
+              编辑
+              </PermissionButton>
+              <div style={{ margin: '0 5px' }}>
+                <Divider type='vertical' />
+              </div>
+              <PermissionButton
+                type='link'
+                size='small'
+                onClick={() => { onDeteteClick(record); }}
+                style={{ padding: 0 }}
+                // permissionKey='删除'
+                // permissions={permissions}
+                defaultPermission={true}
+              >
+              删除
+              </PermissionButton>
+            </div>
+          )
+        }
+      }
+    ])
+  }, [])
+
+  const getRules = () => {
+    setLoading(true)
+    dispatch({
+      type: 'datamodel.getRuleList',
+      payload: {
+        catalogId: node?.id,
+      },
+      callback: data => {
+        setLoading(false)
+        setData(data)
+      },
+      error: () => {
+        setLoading(false)
+      }
+    })
+  }
+
+  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 onAddClick = () => {
+
+  }
+
+  const onBatchDeteteClick = () => {
+    modal.confirm({
+      title: '提示',
+      content: '确定将选中的规则从规范中移除吗?',
+      onOk: () => {
+        dispatch({
+          type: 'datamodel.deleteRules',
+          payload: {
+            ids: (selectedRows??[]).map(item => item.id).toString()
+          },
+          callback: data => {
+            showMessage('success', '删除成功')
+            setSelectedRows()
+            getRules()
+          }
+        })
+      }
+    })
+  }
+
+  const onDeteteClick = (record) => {
+    modal.confirm({
+      title: '提示',
+      content: '确定将选中的规则从规范中移除吗?',
+      onOk: () => {
+        dispatch({
+          type: 'datamodel.deleteRules',
+          payload: {
+            ids: record?.id
+          },
+          callback: data => {
+            showMessage('success', '删除成功')
+            setSelectedRows()
+            getRules()
+          }
+        })
+      }
+    })
+  }
+
+  return (
+    <div className='pl-4'>
+      <div className='d-flex mb-3' style={{ justifyContent: 'space-between', alignItems: 'center' }}>
+        <Space>
+          <PermissionButton 
+            onClick={onAddClick} 
+            // permissionKey='新增'
+            defaultPermission={true}
+          >
+          新建
+          </PermissionButton>
+          <PermissionButton 
+            onClick={onBatchDeteteClick} 
+            // permissionKey='删除'
+            defaultPermission={true}
+            disabled={(selectedRows??[]).length===0}
+            tip={(selectedRows??[]).length===0?'请先选择规则':''} 
+          >
+          删除
+          </PermissionButton>
+          <PermissionButton 
+            onClick={() => {  }} 
+            defaultPermission={true}
+          >
+          导出
+          </PermissionButton>
+        </Space>
+        <Space>
+          <Select value={args.statusId} allowClear
+            loading={loadingStatus}
+            placeholder='请选择规则状态'
+            onChange={(val) => {
+              setArgs({ ...args, statusId: val })
+            }}
+            style={{ width: 150 }}
+          >
+            { (status??[]).map(item => (
+              <Select.Option key={item.id} key={item.id}>{item.name}</Select.Option>
+            )) }
+          </Select>
+          <Select value={args.alertTypeId} allowClear
+            loading={loadingAlertTypes}
+            placeholder='请选择规则类型'
+            onChange={(val) => {
+              setArgs({ ...args, alertTypeId: val })
+            }}
+            style={{ width: 150 }}
+          >
+            { (alertTypes??[]).map(item => (
+              <Select.Option key={item.id} key={item.id}>{item.name}</Select.Option>
+            )) }
+          </Select>
+          <Input size="middle"
+            placeholder="规则名称/描述搜索"
+            value={args.keyword}
+            bordered={true} allowClear
+            onChange={(e) => {
+              setArgs({ ...args, keyword: e.target.value })
+            }} 
+            style={{ width: 270 }}
+          />
+        </Space>
+      </div>
+      <Table
+        extraColWidth={32}
+        loading={loading}
+        columns={cols??[]}
+        dataSource={data}
+        pagination={false}
+        rowSelection={{
+          selectedRowKeys: (selectedRows??[]).map(item => item.id),
+          onChange: (selectedRowKeys, selectedRows) => {
+            setSelectedRows(selectedRows)
+          },
+        }}
+      />
+      {contextHolder}
+    </div>
+  )
+}
+
+export default FC
\ No newline at end of file

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

@@ -204,7 +204,7 @@ const FC = (props) => {
 
   return (
     <div>
-       <div className='d-flex mb-3' style={{ justifyContent: 'space-between', alignItems: 'center' }}>
+      <div className='d-flex mb-3' style={{ justifyContent: 'space-between', alignItems: 'center' }}>
         <Space>
           <PermissionButton 
             onClick={onAddClick} 

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

 import React from 'react'
 import classNames from 'classnames'
+import { ResizableBox } from 'react-resizable'
+import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons'
 
 import Tree from './rule-tree'
+import List from './rule-list'
+import Separate from '../../AssetManage/Component/Separate'
+
+import '../../AssetManage/index.less'
 
 const FC = (props) => {
+  const [node, setNode] = React.useState()
+
+  const onTreeClick = (value) => {
+    setNode(value)
+  }
+
   return (
-    <div>
-      <Tree />
+    <div className='asset-manage'>
+      <div className='left' style={{ width: 230}}          
+      >
+        <Tree onClick={onTreeClick} {...props} />
+      </div>
+      <div className='middle'>
+        <List node={node} />
+      </div>
     </div>
   )
 }