编辑规则库

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

 import React from 'react'
-import { Input, Space, Modal } from 'antd'
+import { Input, Space, Modal, Divider, Tooltip, Typography } from 'antd'
 
 import { dispatch } from '../../../../model'
 import PermissionButton from '../../../../util/Component/PermissionButton'
@@ -35,23 +35,101 @@ const FC = (props) => {
       {
         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>
+        )
       },
       {
         title: '引用次数',
         dataIndex: 'referenceCount',
       },
+      {
+        title: '操作',
+        key: 'action',
+        width: 120,
+        render: (text, record) => {
+          return (  
+            <div style={{ display: 'flex', alignItems: 'center'  }}>
+              <PermissionButton 
+                type='link'
+                size='small'
+                onClick={() => {
+                  setUpdateParams({
+                    visible: true,
+                    type: 'edit',
+                    item: record,
+                  })
+                }}
+                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>
+          )
+        }
+      }
     ])
   }, [])
 
@@ -157,6 +235,7 @@ const FC = (props) => {
         />
       </div>
       <Table
+        extraColWidth={32}
         loading={loading}
         columns={cols??[]}
         dataSource={_data}

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

 import React from "react"
-import { Modal, Button, Spin, Form, Input, Select, Space, InputNumber } from "antd"
+import { Modal, Button, Spin, Form, Input, Select, Space, InputNumber, Row, Col } from "antd"
 
 import { dispatch } from '../../../../model'
+import { IsArr } from "../../../../util"
 
 const FC = (props) => {
   const { visible, type, item, onCancel } = props
@@ -11,7 +12,7 @@ const FC = (props) => {
 
   const title = React.useMemo(() => {
     if (type === 'add') return '新增检查规则'
-    if (type === 'update') return '修改检查规则'
+    if (type === 'edit') return '修改检查规则'
     if (type === 'detail') return '检查规则详情'
 
     return ''
@@ -43,7 +44,7 @@ const FC = (props) => {
         dispatch({
           type: 'datamodel.updateRuleTemplate',
           payload: {
-            data: {...item, rows}
+            data: {...item, ...rows}
           },
           callback: data => {
             close(true)
@@ -81,7 +82,7 @@ const FC = (props) => {
       onCancel={() => { close() }}
     >
       <Spin spinning={waiting}>
-        <Basic ref={basicRef} item={item} />
+        <Basic ref={basicRef} type={type} item={item} />
       </Spin>
     </Modal>
   )
@@ -89,7 +90,7 @@ const FC = (props) => {
 
 export default FC
 
-export const Basic = React.forwardRef(function ({ item }, ref) {
+export const Basic = React.forwardRef(function ({ type, item }, ref) {
   const [loadingCheckTypes, setLoadingCheckTypes] = React.useState(false)
   const [checkTypes, setCheckTypes] = React.useState()
   const [checkTypeValue, setCheckTypeValue] = React.useState()
@@ -98,7 +99,7 @@ export const Basic = React.forwardRef(function ({ item }, ref) {
 
   React.useImperativeHandle(ref, () => ({
     validate: async () => {
-      return await form.validateFields()
+      return await form?.validateFields()
     },
   }), [form])
 
@@ -106,6 +107,39 @@ export const Basic = React.forwardRef(function ({ item }, ref) {
     getCheckTypes()
   }, [])
 
+  React.useEffect(() => {
+    if (item) {
+      form?.setFieldsValue(item)
+      setCheckTypeValue(item.checkType)
+    }
+  }, [item])
+
+  const [checkPropertyDescription, preCheckPropertyDescription] = React.useMemo(() => {
+    if (item) {
+      let newCheckPropertyDescription = `${item?.checkProperty?.propertyCnName??''} ${item?.checkProperty?.expressionTypeCnName??''} ${item?.checkProperty?.verifyExpression?.cnName??''}`
+      if (IsArr(item?.checkProperty?.verifyExpression?.value)) {
+        newCheckPropertyDescription = `${newCheckPropertyDescription} ${item?.checkProperty?.verifyExpression?.value.join(';')}`
+      } else {
+        newCheckPropertyDescription = `${newCheckPropertyDescription} ${item?.checkProperty?.verifyExpression?.value}`
+      }
+
+      let newPreCheckPropertyDescription = `${item?.preCheckProperty?.propertyCnName??''} ${item?.preCheckProperty?.expressionTypeCnName??''} ${item?.preCheckProperty?.verifyExpression?.cnName??''}`
+      if (IsArr(item?.preCheckProperty?.verifyExpression?.value)) {
+        newPreCheckPropertyDescription = `${newPreCheckPropertyDescription} ${item?.preCheckProperty?.verifyExpression?.value.join(';')}`
+      } else {
+        newPreCheckPropertyDescription = `${newPreCheckPropertyDescription} ${item?.preCheckProperty?.verifyExpression?.value}`
+      }
+
+      return [newCheckPropertyDescription, newPreCheckPropertyDescription]
+    }
+
+    return ['', '']
+  }, [item])
+
+  const marginBottom = React.useMemo(() => {
+    return type === 'detail' ? 5 : 15
+  }, [type])
+
   const getCheckTypes = () => {
     setLoadingCheckTypes(true)
     dispatch({
@@ -126,6 +160,29 @@ export const Basic = React.forwardRef(function ({ item }, ref) {
     }
   }
 
+  const validatorCheckProperty = (_, value) => {
+    console.log('value', value)
+    if (!value?.propertyEnName) {
+      return Promise.reject(new Error('请选择检查对象!'));
+    }
+    if (!value?.expressionTypeEnName) {
+      return Promise.reject(new Error('请选择检查属性!'));
+    }
+    if (!value?.verifyExpression?.enName) {
+      return Promise.reject(new Error('请选择表达式!'));
+    }
+
+    if (value?.verifyExpression?.valueType !== 'none') {
+      if (value?.verifyExpression?.valueType === 'List<String>' && (value?.verifyExpression?.value??[]).length === 0) {
+        return Promise.reject(new Error('请输入表达式的值!'));
+      } else if (value?.verifyExpression?.value==null||value?.verifyExpression?.value==undefined) {
+        return Promise.reject(new Error('请输入表达式的值!'));
+      }
+    }
+
+    return Promise.resolve();
+  };
+  
   return (
     <Form
       form={form}
@@ -134,49 +191,87 @@ export const Basic = React.forwardRef(function ({ item }, ref) {
       autoComplete="off"
       onValuesChange={onValuesChange}
     >
+      {
+        type !== 'add' && <Form.Item label='规则编号' style={{ marginBottom }}>
+          <span>{item?.number}</span>
+        </Form.Item>
+      }
       <Form.Item name='name' label='规则中文名称'
+        style={{ marginBottom }}
         rules={[{ required: true, message: '请输入规则中文名称!' }]}
       >
-        <Input placeholder='请输入规则中文名称' allowClear />
+        {
+          type === 'detail' ? <span>{item?.name}</span> : <Input placeholder='请输入规则中文名称' allowClear />
+        }
       </Form.Item>
       <Form.Item name='remark' label='规则描述'
+        style={{ marginBottom }}
       >
-        <Input placeholder='请输入规则描述' allowClear />
+        {
+          type === 'detail' ? <span>{item?.remark}</span> : <Input placeholder='请输入规则描述' allowClear />
+        }
       </Form.Item>
       <Form.Item name='alertContent' label='规则提示'
+        style={{ marginBottom }}
         rules={[{ required: true, message: '请输入规则提示!' }]}
       >
-        <Input placeholder='请输入规则提示' allowClear />
+        {
+          type === 'detail' ? <span>{item?.alertContent}</span> : <Input placeholder='请输入规则提示' allowClear />
+        }
       </Form.Item>
       <Form.Item name='checkType' label='检查类型'
+        style={{ marginBottom }}
         rules={[{ required: true, message: '请选择检查类型!' }]}
       >
-        <Select allowClear loading={loadingCheckTypes}
+        {
+          type === 'detail' ? <span>{item?.checkTypeName}</span> : <Select allowClear loading={loadingCheckTypes}
             placeholder='请选择检查类型'
           >
             { (checkTypes??[]).map((item, index) => (
               <Select.Option key={item.type} value={item.type}>{item.name}</Select.Option>
             )) }
           </Select>
+        }
       </Form.Item>
       {
         checkTypeValue === 'single' && <Form.Item name='checkProperty' label='检查规则'
-          rules={[{ required: true, message: '请选择检查规则!' }]}
+          style={{ marginBottom }}
+          rules={[
+            {
+              validator: validatorCheckProperty,
+            },
+          ]}
         >
-          <CheckItem />
+          {
+            type === 'detail' ? <span>{checkPropertyDescription}</span> : <CheckItem />
+          }
         </Form.Item>
       }
       {
         checkTypeValue === 'preCheck' && <Form.Item label='检查规则'>
           <Form.Item name='preCheckProperty' label='满足条件'
-            rules={[{ required: true, message: '请选择检查规则!' }]}
+            style={{ marginBottom }}
+            rules={[
+              {
+                validator: validatorCheckProperty,
+              },
+            ]}
           >
-            <CheckItem />
+            {
+              type === 'detail' ? <span>{preCheckPropertyDescription}</span> : <CheckItem />
+            }
           </Form.Item>
           <Form.Item name='checkProperty' label='检查内容'
-            rules={[{ required: true, message: '请选择检查规则!' }]}
+            style={{ marginBottom }}
+            rules={[
+              {
+                validator: validatorCheckProperty,
+              },
+            ]}
           >
-            <CheckItem />
+            {
+              type === 'detail' ? <span>{checkPropertyDescription}</span> : <CheckItem />
+            }
           </Form.Item>
         </Form.Item>
       }
@@ -196,6 +291,9 @@ const CheckItem = ({ value, onChange }) => {
   const [currentCheckPropertyType, setCurrentCheckPropertyType] = React.useState()
   const [currentExpressionType, setCurrentExpressionType] = React.useState()
   const [currentExpression, setCurrentExpression] = React.useState()
+  const [currentExpressionValue, setCurrentExpressionValue] = React.useState()
+
+  const mountRef = React.useRef(true)
 
   React.useEffect(() => {
     getCheckPropertyTypes()
@@ -204,6 +302,21 @@ const CheckItem = ({ value, onChange }) => {
   }, [])
 
   React.useEffect(() => {
+    if (mountRef.current && value) {
+      setCurrentCheckPropertyType(value)
+      setCurrentExpressionType(value)
+      setCurrentExpression(value.verifyExpression)
+      if (IsArr(value.verifyExpression?.value)) {
+        setCurrentExpressionValue(value.verifyExpression?.value.join(';'))
+      } else {
+        setCurrentExpressionValue(value.verifyExpression?.value)
+      }
+    }
+
+    mountRef.current = false
+  }, [])
+
+  React.useEffect(() => {
     onChange?.({...currentCheckPropertyType||{}, ...currentExpressionType||{}, verifyExpression: currentExpression})
   }, [currentCheckPropertyType, currentExpressionType, currentExpression])
 
@@ -258,7 +371,8 @@ const CheckItem = ({ value, onChange }) => {
   }
 
   return (
-    <Space>
+    <Row gutter={10}>
+      <Col span={6}>
         <Select allowClear loading={loadingCheckPropertyTypes}
           value={currentCheckPropertyType?.propertyEnName}
           onChange={(val) => {
@@ -277,6 +391,8 @@ const CheckItem = ({ value, onChange }) => {
             <Select.Option key={item.propertyEnName} value={item.propertyEnName}>{item.propertyCnName}</Select.Option>
           )) }
         </Select>
+      </Col>
+      <Col span={6}>
         <Select allowClear loading={loadingExpressionTypes}
           value={currentExpressionType?.expressionTypeEnName}
           onChange={(val) => {
@@ -290,6 +406,7 @@ const CheckItem = ({ value, onChange }) => {
             }
 
             setCurrentExpression()
+            setCurrentExpressionValue()
           }}
           placeholder='请选择检查属性'
         >
@@ -297,6 +414,8 @@ const CheckItem = ({ value, onChange }) => {
             <Select.Option key={item.expressionTypeEnName} value={item.expressionTypeEnName}>{item.expressionTypeCnName}</Select.Option>
           )) }
         </Select>
+      </Col>
+      <Col span={6}>
         <Select allowClear loading={loadingExpressionMapping}
           value={currentExpression?.enName}
           onChange={(val) => {
@@ -308,6 +427,8 @@ const CheckItem = ({ value, onChange }) => {
             } else {
               setCurrentExpression()
             }
+
+            setCurrentExpressionValue()
           }}
           placeholder='请选择表达式'
         >
@@ -315,23 +436,29 @@ const CheckItem = ({ value, onChange }) => {
             <Select.Option key={item.enName} value={item.enName}>{item.cnName}</Select.Option>
           )) }
         </Select>
-      { (currentExpression?.valueType === 'string') && <Input 
+      </Col>
+      <Col span={6}>
+        { (currentExpression?.valueType === 'string') && <Input value={currentExpressionValue} 
           onChange={(e) => {
+            setCurrentExpressionValue(e.target.value)
             setCurrentExpression({
               ...currentExpression, value: e.target.value
             })
           }}/> }
-      { (currentExpression?.valueType === 'int') && <InputNumber 
+        { (currentExpression?.valueType === 'int') && <InputNumber value={currentExpressionValue} 
           onChange={(e) => {
+            setCurrentExpressionValue(e.target.value)
             setCurrentExpression({
               ...currentExpression, value: e.target.value
             })
           }}/> }
-      { (currentExpression?.valueType === 'List<String>') && <Input placeholder='枚举值用;隔开 如高;中;低' onChange={(e) => {
+        { (currentExpression?.valueType === 'List<String>') && <Input placeholder='枚举值用;隔开 如高;中;低' value={currentExpressionValue} onChange={(e) => {
+          setCurrentExpressionValue(e.target.value)
           setCurrentExpression({
-          ...currentExpression, value: (e.target.value??'').split(';')
+            ...currentExpression, value: e.target.value?e.target.value.split(';'):[]
           })
         }} />  }
-    </Space>
+      </Col>
+    </Row>
   )
 }
\ No newline at end of file