增加业务表单与自动计算的控制规则

package.json

 {
     "name": "panda-xform",
-    "version": "2.0.0",
-    "description": "2.0.0: 增加自动计算形态",
+    "version": "2.0.1",
+    "description": "2.0.1: 增加业务表单与自动计算的控制规则",
     "keywords": [
         "panda-xform"
     ],

src/apis/process.js

@@ -22,6 +22,21 @@ export function getSelectName(nodeName) {
   });
 }
 
+//关联表单显示隐藏控制规则
+export function ruleValidation(ruleContent) {
+  return request({
+    url: `/PandaOMS/OMS/WorkFlow/RuleValidation${ruleContent ? `?ruleContent=${ruleContent}` : ''}`,
+    method: 'get',
+  });
+}
+
+export function getTableNumberList(tableName) {
+  return request({
+    url: `/PandaOMS/OMS/CaseManage/GetTableNumberList${tableName ? `?tableName=${tableName}` : ''}`,
+    method: 'get',
+  });
+}
+
 // 选择器选项的子节点查询
 export function getSelectChildName(nodeName) {
   return request({

src/core/FormDesigner/config/settings.js

@@ -2761,6 +2761,7 @@ const advancedWidgets = [
       type: 'string',
       widget: 'RelationForm',
       width: '100%',
+      controlShow: '',
     },
     setting: {
       groupBase: {
@@ -2851,7 +2852,7 @@ const advancedWidgets = [
         type: 'string',
         displayType: 'row',
         labelWidth: 80,
-        widget: 'ControlShow',
+        widget: 'ControlRules',
       },
       groupStyle: {
         title: '控件样式',

src/core/FormRender/watch.js

@@ -41,7 +41,6 @@ export const jsonToValues = (data, paths) => {
       })
     })
   }
-  console.log('paths', paths)
   return {
     formValue: values,
     relationForm: data.relationForm
@@ -112,6 +111,7 @@ const setValue = debounce(automaticComputation)
 export const getWatch = (schema, form) => {
   let watch = {}
   let { rules, calculateRule, filedName } = getRules(schema)
+  console.log('getRules', getRules(schema))
   let paths = []
   if (Array.isArray(rules)) {
     let item = rules.find(v => v.tableName === schema.tableName)

src/core/widgets/settings/groupSource/CalculateRule/index.js

-import React, { useState } from 'react'
-import { Input, Modal, message } from 'antd'
-import { getFormFieldAnalysisDtos } from '../../../../../apis/process'
+import React, { useEffect, useState, useRef } from 'react'
+import { Modal, Input, Form, message, Dropdown, Menu, Tree } from 'antd'
+import styles from './index.less'
+import { getTableNumberList, getFormFieldAnalysisDtos } from '../../../../../apis/process'
+import { isObject } from '../../../../../utils'
 
 const { TextArea } = Input
 
-const CalculateRule = (props) => {
+const ControlRules = (props) => {
 
   const { value, onChange, addons } = props
+  const { parent, name } = addons.formData
   const [visible, setVisible] = useState(false)
-  const [text, setText] = useState()
+  const [fieldList, setFieldList] = useState([])
+  const [rule, setRule] = useState([])
+  const [currentSelectId, setCurrentSelectId] = useState('')
+  const ruleText = useRef()
+
+  const getFieldList = async () => {
+    let { code, data, msg } = await getTableNumberList(parent.tableName)
+    if (code === 0) {
+      let array = []
+      if (isObject(data)) {
+        for (let key in data) {
+          array.push({
+            title: key,
+            key: key,
+            children: Array.isArray(data[key]) ? data[key].map(v => { return { title: `${v.Name}(${v.Shape})`, key: `${key}.${v.Name}` } }) : []
+          })
+        }
+      }
+      setFieldList(array)
+    } else {
+      message.error(msg)
+    }
+  }
 
   const inputClick = () => {
     setVisible(true)
-    setText(value)
+    getFieldList()
+    setRule(value || '')
+    if (value) {
+      setTimeout(() => {
+        document
+          .getElementById('calculateRule')
+          .setSelectionRange(value.length, value.length)
+      }, 200)
+    }
+  }
+
+  const onSelect = (prop, treeNode) => {
+    if (!treeNode.node.children) {
+      insert(`{${treeNode.node.key}}`)
+    }
+    setCurrentSelectId(prop[0]);
   }
 
   const onOk = async () => {
-    const { code, data, msg } = await getFormFieldAnalysisDtos(text)
-    if (code === 0) {
-      addons.setValue('rules', data)
-      setVisible(false)
-      onChange(text)
-    } else {
-      message.error(msg)
+    if (rule) {
+      const { code, data, msg } = await getFormFieldAnalysisDtos(rule)
+      if (code === 0) {
+        addons.setValue('rules', data)
+        setVisible(false)
+        onChange(rule)
+      } else {
+        message.error(msg)
+      }
     }
+    onChange(rule)
+    setVisible(false)
   }
 
   const onCancel = () => {
     setVisible(false)
   }
 
+  const insert = text => {
+    let ednIndex = document.getElementById('calculateRule').selectionEnd
+    let rangeIndex = document.getElementById('calculateRule').selectionStart
+    setRule(`${rule.slice(0, rangeIndex)}${text}${rule.slice(rangeIndex)}`)
+    rangeIndex += text.toString().length
+    ruleText.current.focus()
+  }
+
   return (
     <div>
-      <Input value={value} onClick={inputClick} />
+      <Input
+        value={value}
+        onClick={inputClick}
+      />
       <Modal
-        title='计算规则'
+        title="规则配置"
         visible={visible}
         onOk={onOk}
+        width="740px"
         onCancel={onCancel}
+        maskClosable={false}
+        destroyOnClose
+        getContainer={false}
       >
-        <TextArea
-          value={text}
-          onChange={e => setText(e.target.value)}
-
-        />
+        <div className={styles.configContent}>
+          <div className={styles.leftTree}>
+            <Tree
+              blockNode
+              defaultExpandedKeys={[parent.tableName]}
+              autoExpandParent={true}
+              onSelect={onSelect}
+              selectedKeys={[currentSelectId]}
+              treeData={fieldList}
+            />
+          </div>
+          <div className={styles.rightContent}>
+            <div className={styles.textAreaBox}>
+              <TextArea
+                id="calculateRule"
+                autoSize={{ minRows: 19, maxRows: 19 }}
+                value={rule}
+                rows={4}
+                ref={ruleText}
+                onChange={e => setRule(e.target.value)}
+              />
+            </div>
+            <ul className={styles.tipBox}>
+              <li>
+                <p>请从左侧面板选择字段或选项</p>
+                <p>
+                  {'支持'} <i>英文</i> {'模式下运算符（+、-、*、/）'}
+                </p>
+              </li>
+              <li>{`示例：{表名.缴费次数} + {表名.缴费金额}`}</li>
+            </ul>
+          </div>
+        </div>
       </Modal>
     </div>
   )
 
 }
 
-export default CalculateRule
\ No newline at end of file
+export default ControlRules

src/core/widgets/settings/groupSource/CalculateRule/index.less

+.configContent {
+  height: 500px;
+  display: flex;
+  .leftTree {
+    width: 180px;
+    height: 100%;
+    margin-right: 10px;
+    overflow-y: auto;
+  }
+  .rightContent {
+    flex: 1;
+    .title {
+      width: 100%;
+      background-color: #E6F3FF;
+      color: #1890FF;
+      font-size: 14px;
+      padding: 5px 10px;
+      border: 1px solid #EEF6FE;
+    }
+    .textAreaBox {
+      position: relative;
+      .insertFn {
+        position: absolute;
+        bottom: 10px;
+        right: 10px;
+        border: 1px solid #1890FF;
+        padding: 2px 15px;
+        border-radius: 5px;
+        z-index: 1;
+        cursor: pointer;
+      }
+      textArea {
+        max-height: 360px !important;
+        min-height: 360px !important;
+        border: 1px solid transparent;
+        background-color: #F0F2F6;
+      }
+    }
+    .tipBox {
+      padding-top: 12px;
+      padding-left: 25px;
+      li {
+        list-style: disc;
+        color: #AEAEAE;
+      }
+      em {
+        font-style: normal;
+        color: #1890FF;
+      }
+      i {
+        font-style: normal;
+        color: red;
+      }
+      p {
+        margin-bottom: 0;
+        color: #AEAEAE;
+      }
+    }
+  }
+}
\ No newline at end of file

src/core/widgets/settings/groupSource/ControlRules/index.js

+import React, { useEffect, useState, useRef } from 'react'
+import { Modal, Input, Form, message, Dropdown, Menu, Tree } from 'antd'
+import styles from './index.less'
+import { ReloadTableFields, ruleValidation } from '../../../../../apis/process'
+
+const { TextArea } = Input
+
+const fnList = [
+  { label: '是否为工作日', value: '$fn.isWorkDay()' },
+  { label: '是否为工作时间', value: '$fn.isWorkTime()' },
+]
+
+const ControlRules = (props) => {
+
+  const { value, onChange, addons } = props
+  const { parent, name } = addons.formData
+  const [visible, setVisible] = useState(false)
+  const [fieldList, setFieldList] = useState([])
+  const [rule, setRule] = useState([])
+  const [currentSelectId, setCurrentSelectId] = useState('')
+  const ruleText = useRef()
+
+  const getFieldList = async () => {
+    let { code, data, msg } = await ReloadTableFields({ tableName: parent.tableName })
+    if (code === 0) {
+      setFieldList([
+        {
+          title: parent.tableName,
+          key: parent.tableName,
+          children: data.root.map(v => { return { title: v.name, key: `${parent.tableName}.${v.name}` } })
+        }
+      ])
+    } else {
+      message.error(msg)
+    }
+  }
+
+  const inputClick = () => {
+    setVisible(true)
+    getFieldList()
+    setRule(value || '')
+    if (value) {
+      setTimeout(() => {
+        document
+          .getElementById('ruleText')
+          .setSelectionRange(value.length, value.length)
+      }, 200)
+    }
+  }
+
+  const onSelect = (prop, treeNode) => {
+    if (!treeNode.node.children) {
+      insert(`{${treeNode.node.key}}`)
+    }
+    setCurrentSelectId(prop[0]);
+  }
+
+  const onOk = async () => {
+    if (rule) {
+      const { code, data } = await ruleValidation(rule)
+      if (!data) {
+        return message.error('校验不通过!')
+
+      }
+    }
+    onChange(rule)
+    setVisible(false)
+  }
+
+  const onCancel = () => {
+    setVisible(false)
+  }
+
+  const insert = text => {
+    let ednIndex = document.getElementById('ruleText').selectionEnd
+    let rangeIndex = document.getElementById('ruleText').selectionStart
+    setRule(`${rule.slice(0, rangeIndex)}${text}${rule.slice(rangeIndex)}`)
+    rangeIndex += text.toString().length
+    ruleText.current.focus()
+  }
+
+  const insertFn = value => {
+    insert(value)
+  }
+
+  const fnListRender = (
+    <Menu>
+      {fnList.map(item => (
+        <Menu.Item key={item.value} onClick={() => insertFn(item.value)}>
+          {item.label}
+        </Menu.Item>
+      ))}
+    </Menu>
+  )
+
+  return (
+    <div>
+      <Input
+        value={value}
+        onClick={inputClick}
+      />
+      <Modal
+        title="规则配置"
+        visible={visible}
+        onOk={onOk}
+        width="740px"
+        onCancel={onCancel}
+        maskClosable={false}
+        destroyOnClose
+        getContainer={false}
+      >
+        <div className={styles.configContent}>
+          <div className={styles.leftTree}>
+            <Tree
+              blockNode
+              defaultExpandedKeys={[parent.tableName]}
+              autoExpandParent={true}
+              onSelect={onSelect}
+              selectedKeys={[currentSelectId]}
+              treeData={fieldList}
+            />
+          </div>
+          <div className={styles.rightContent}>
+            <div className={styles.textAreaBox}>
+              <Dropdown overlay={fnListRender} placement="bottom" arrow>
+                <div className={styles.insertFn}>插入函数</div>
+              </Dropdown>
+              <TextArea
+                id="ruleText"
+                autoSize={{ minRows: 19, maxRows: 19 }}
+                value={rule}
+                rows={4}
+                ref={ruleText}
+                onChange={e => setRule(e.target.value)}
+              />
+            </div>
+
+            <ul className={styles.tipBox}>
+              <li>
+                <p>请从左侧面板选择字段或选项</p>
+                <p>
+                  {'支持'} <i>英文</i> {'模式下运算符（+、-、*、/、>、<、==、!=、<=、>=）'}
+                </p>
+              </li>
+              <li>{`示例：{表名.是否缴费} = ‘是’ and {表名.缴费金额} > 1000`}</li>
+            </ul>
+          </div>
+        </div>
+      </Modal>
+    </div>
+  )
+
+}
+
+export default ControlRules

src/core/widgets/settings/groupSource/ControlRules/index.less

+.configContent {
+  height: 500px;
+  display: flex;
+  .leftTree {
+    width: 180px;
+    height: 100%;
+    margin-right: 10px;
+    overflow-y: auto;
+  }
+  .rightContent {
+    flex: 1;
+    .title {
+      width: 100%;
+      background-color: #E6F3FF;
+      color: #1890FF;
+      font-size: 14px;
+      padding: 5px 10px;
+      border: 1px solid #EEF6FE;
+    }
+    .textAreaBox {
+      position: relative;
+      .insertFn {
+        position: absolute;
+        bottom: 10px;
+        right: 10px;
+        border: 1px solid #1890FF;
+        padding: 2px 15px;
+        border-radius: 5px;
+        z-index: 1;
+        cursor: pointer;
+      }
+      textArea {
+        max-height: 360px !important;
+        min-height: 360px !important;
+        border: 1px solid transparent;
+        background-color: #F0F2F6;
+      }
+    }
+    .tipBox {
+      padding-top: 12px;
+      padding-left: 25px;
+      li {
+        list-style: disc;
+        color: #AEAEAE;
+      }
+      em {
+        font-style: normal;
+        color: #1890FF;
+      }
+      i {
+        font-style: normal;
+        color: red;
+      }
+      p {
+        margin-bottom: 0;
+        color: #AEAEAE;
+      }
+    }
+  }
+}
\ No newline at end of file

src/core/widgets/settings/groupSource/ControlShow/RuleConfig.js

-import React, { useEffect, useState, useRef } from 'react';
-// import { RuleValidation } from '@/services/workflow/workflow';
-import { Modal, Input, Form, message, Dropdown, Menu, Tree } from 'antd';
-import styles from './index.less';
-// import Tree from '@/components/ExpendableTree';
-const { TextArea } = Input;
-const fnList = [
-  { label: '是否为工作日', value: '$fn.isWorkDay()' },
-  { label: '是否为工作时间', value: '$fn.isWorkTime()' },
-];
-const RuleConfig = props => {
-  const { visible, handleCancel, fieldList, onSubumit, RuleContent, flag } = props;
-  const [rule, setRule] = useState([]);
-  const [expandedKey, setExpandedKey] = useState(''); // 默认展开项
-  const [currentSelectId, setCurrentSelectId] = useState(''); // 选中得节点
-  const ruleText = useRef();
-  const chooseIndex = useRef(0);
-  const [form] = Form.useForm();
-  useEffect(() => {
-    if (visible) {
-      setExpandedKey(fieldList[0].TableName);
-      setRule(RuleContent);
-      setTimeout(() => {
-        console.log(document.getElementById('ruleText'));
-        console.log(ruleText.current);
-        document
-          .getElementById('ruleText')
-          .setSelectionRange(RuleContent.length, RuleContent.length); // 重新定位光标
-      }, 0);
-    } else {
-      chooseIndex.current = 0;
-      setExpandedKey('');
-      setCurrentSelectId('');
-      setRule('');
-    }
-  }, [visible]);
-  // 保存线配置
-  const onSave = () => {
-    console.log('rule', rule)
-    // RuleValidation({ ruleContent: rule }).then(res => {
-    //   if (res.data) {
-    //     onSubumit(rule);
-    //   } else {
-    //     message.error('请检查规则是否正确');
-    //   }
-    // });
-  };
-  // 处理树数据
-  const mapTree = (val, index) => ({
-    title: val.TableName,
-    key: val.TableName,
-    children: val.TableFieldNames.map(item => ({
-      title: item,
-      key: `${val.TableName}.${item}`,
-    })),
-  });
-  const onSelect = (prop, treeNode) => {
-    console.log(prop, treeNode);
-
-    if (!treeNode.node.children) {
-      insert(`{${treeNode.node.key}}`);
-    }
-    setCurrentSelectId(prop[0]);
-  };
-  const insert = text => {
-    let ednIndex = document.getElementById('ruleText').selectionEnd;
-    let rangeIndex = document.getElementById('ruleText').selectionStart;
-    console.log(ednIndex, rangeIndex, 'endene');
-    setRule(`${rule.slice(0, rangeIndex)}${text}${rule.slice(rangeIndex)}`);
-    rangeIndex += text.toString().length;
-    ruleText.current.focus();
-  };
-  const insertFn = value => {
-    insert(value);
-  };
-  const fnListRender = (
-    <Menu>
-      {fnList.map(item => (
-        <Menu.Item key={item.value} onClick={() => insertFn(item.value)}>
-          {item.label}
-        </Menu.Item>
-      ))}
-    </Menu>
-  );
-
-  return (
-    <Modal
-      title="规则配置"
-      visible={visible}
-      onOk={onSave}
-      width="740px"
-      onCancel={handleCancel}
-      maskClosable={false}
-      destroyOnClose
-      getContainer={false}
-    >
-      <div className={styles.configContent}>
-        <div className={styles.leftTree}>
-          <Tree
-            blockNode
-            autoExpandParent
-            onSelect={onSelect}
-            selectedKeys={[currentSelectId]}
-            expandedKeys={expandedKey}
-            treeData={fieldList.map((item, index) => mapTree(item, index))}
-          />
-        </div>
-        <div className={styles.rightContent}>
-          {flag == 1 && <div className={styles.title}>符合以下条件时工单扭转到对应的节点</div>}
-          <div className={styles.textAreaBox}>
-            <Dropdown overlay={fnListRender} placement="bottom" arrow>
-              <div className={styles.insertFn}>插入函数</div>
-            </Dropdown>
-
-            <TextArea
-              id="ruleText"
-              autoSize={{ minRows: 19, maxRows: 19 }}
-              value={rule}
-              rows={4}
-              ref={ruleText}
-              onChange={e => setRule(e.target.value)}
-            />
-          </div>
-
-          <ul className={styles.tipBox}>
-            <li>
-              <p>请从左侧面板选择字段或选项</p>
-              <p>
-                {'支持'} <i>英文</i> {'模式下运算符（+、-、*、/、>、<、==、!=、<=、>=）'}
-              </p>
-            </li>
-
-            {flag === 1 ? (
-              <>
-                <li>
-                  <p>参考场景：</p>
-                  <p>当报销金额大于1000时，才能进入所选节点，则可将流转条件设置为：</p>
-                  <p>
-                    <em>{'报销金额 > 1000'}</em>
-                  </p>
-                </li>
-              </>
-            ) : (
-              <li>{`示例：{表名.是否缴费} = ‘是’ and {表名.缴费金额} > 1000`}</li>
-            )}
-          </ul>
-        </div>
-      </div>
-    </Modal>
-  )
-}
-
-export default RuleConfig;

src/core/widgets/settings/groupSource/ControlShow/index.js

-import React, { useEffect, useState, useRef } from 'react';
-// import { RuleValidation } from '@/services/workflow/workflow';
-import { Modal, Input, Form, message, Dropdown, Menu, Tree } from 'antd';
-import styles from './index.less';
-// import Tree from '@/components/ExpendableTree';
-const { TextArea } = Input;
-// import RuleConfig from './RuleConfig';
-
-const ControlShow = (props) => {
-
-  const { value, onChange } = props
-
-  const inputChange = (e) => {
-    onChange(e.target.value)
-  }
-
-  return (
-    <div>
-      <Input
-        // onClick={inputClick}
-        onChange={inputChange}
-      />
-      {/* <RuleConfig
-        fieldList={fieldList}
-        RuleContent={123}
-        visible={visible}
-        handleCancel={() => { }}
-        onSubumit={() => { }}
-        flag={2}
-      /> */}
-    </div>
-  )
-
-}
-
-export default ControlShow

src/core/widgets/settings/groupSource/index.js

@@ -2,7 +2,7 @@ import Dictionary from './Dictionary'
 import AccountName from './AccountName'
 import Fieldshine from './Fieldshine'
 import MappedField from './MappedField'
-import ControlShow from './ControlShow'
+import ControlRules from './ControlRules'
 import SoruceType from './SoruceType'
 import TableName from './TableName'
 import FieldName from './FieldName'
@@ -13,7 +13,7 @@ const groupSource = {
   AccountName,
   Fieldshine,
   MappedField,
-  ControlShow,
+  ControlRules,
   SoruceType,
   TableName,
   FieldName,