fix: 修改新增节点切换问题

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/NodeModal.jsx

@@ -24,6 +24,7 @@ import Undertaker from './nodeModalComponents/Undertaker';
 import RuleConfig from './nodeModalComponents/RuleConfig';
 import styles from './NodeModal.less';
 import { GetFormDataSource } from '@/services/workflow/workflow';
+import { log } from '@antv/g2plot/lib/utils';
 
 const { Option } = Select;
 let chnNumChar = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
@@ -59,39 +60,30 @@ const NodeModal = props => {
     RuleList: {},
   });
 
-  const [RuleList, setRuleList] = useState([]);
+  const [RuleList, setRuleList] = useState([]); // 规则配置列表
   const [flag, setFlag] = useState(0);
-  const [fieldList, setFieldList] = useState([]);
+  const [fieldList, setFieldList] = useState([]); // 当规则字段
+  const allFieldList = useRef([]);
   const nextlinkNodes = useRef([]);
   const previousLinkNodes = useRef([]);
   const talbeList = useRef([]);
   useEffect(() => {
     form.resetFields();
     if (visible) {
+      console.log(editMsg, 'editMsg');
       if (modalType === 'edit') {
         // 获取网关连接的节点
         if (editMsg.NodeType === '21' || editMsg.NodeType === '20') {
           getNextLinkNodes(editMsg.key);
           getPreviousLinkNodes(editMsg.key);
           setRuleList(editMsg.RuleList);
+          // 获取表数据
           GetFormDataSource({ flowID }).then(res => {
             let list = new Set(talbeList.current);
-            let listfleld = [
-              {
-                TableFieldNames: [
-                  '上报人名称',
-                  '上报人部门',
-                  '上报站点',
-                  '处理站点',
-                  '更新时间',
-                  '上报时间',
-                ],
-                TableName: '默认字段',
-              },
-            ];
+            allFieldList.current = [];
             res.data.forEach(item => {
-              if (!listfleld.some(ele => ele.TableName === item.TableName)) {
-                listfleld.push({
+              if (!allFieldList.current.some(ele => ele.TableName === item.TableName)) {
+                allFieldList.current.push({
                   TableFieldNames: item.TableFieldNames,
                   TableName: item.TableName,
                 });
@@ -101,9 +93,8 @@ const NodeModal = props => {
               }
             });
             talbeList.current = [...list];
+            setFlag(flag + 1);
             console.log(talbeList.current, 'talbeList');
-            console.log(listfleld, 'listfleld');
-            setFieldList(listfleld);
           });
         }
 
@@ -132,10 +123,10 @@ const NodeModal = props => {
         });
       }
     } else {
-      setRuleList([]);
       nextlinkNodes.current = [];
       previousLinkNodes.current = [];
       talbeList.current = [];
+      setRuleList([]);
     }
   }, [visible]);
   const SectionToChinese = section => {
@@ -227,7 +218,7 @@ const NodeModal = props => {
   // 获取表单回显
   const getFormData = () => {
     setNodeMsg(editMsg);
-    console.log(editMsg, 'editMsg');
+
     const { NodeName, NodeType, SerialNo, aheadHandle, NodeHandling } = editMsg;
     form.setFieldsValue({ NodeName, NodeType, SerialNo, aheadHandle, NodeHandling });
   };
@@ -279,11 +270,13 @@ const NodeModal = props => {
     list.push({ RuleContent: '', NextNodeName: '', TableNames: '' });
     setRuleList(list);
   };
+  // 删除规则
   const deleRule = index => {
     let list = JSON.parse(JSON.stringify(RuleList));
     list.splice(index, 1);
     setRuleList(list);
   };
+  // 规则回填
   const saveRule = e => {
     let list = JSON.parse(JSON.stringify(RuleList));
     console.log(e);
@@ -306,9 +299,43 @@ const NodeModal = props => {
   };
   // 配置当前规则
   const editRule = (msg, index) => {
+    console.log(msg, 'masgasdg');
+    let listfleld = msg.TableNames.split(',');
+    let list = [
+      {
+        TableFieldNames: [
+          '上报人名称',
+          '上报人部门',
+          '上报站点',
+          '处理站点',
+          '更新时间',
+          '上报时间',
+        ],
+        TableName: '默认字段',
+      },
+    ];
+    console.log(listfleld, allFieldList.current, 'listfleld1111');
+    allFieldList.current.forEach(item => {
+      if (listfleld.some(ele => ele === item.TableName)) {
+        list.push({
+          TableFieldNames: item.TableFieldNames,
+          TableName: item.TableName,
+        });
+      }
+    });
+    console.log(list, 'listfleld');
+    setFieldList(list);
     setRuleIndex(index);
     setShowRule(true);
   };
+  // 节点信息监听
+  const changeValue = (changedFields, allFields) => {
+    if (changedFields[0].name[0] === 'NodeType') {
+      setNodeMsg({ ...nodeMsg, roleList: [], RuleList: [] });
+      setFlag(flag + 1);
+    }
+    console.log(changedFields, allFields, 'allFields');
+  };
   // 定义表格
   const columns = [
     {
@@ -416,7 +443,12 @@ const NodeModal = props => {
         >
           节点信息
         </Divider>
-        <Form form={form} labelCol={{ span: 5 }} wrapperCol={{ span: 19 }}>
+        <Form
+          form={form}
+          labelCol={{ span: 5 }}
+          wrapperCol={{ span: 19 }}
+          onFieldsChange={changeValue}
+        >
           <Form.Item
             label="排序"
             name="SerialNo"
@@ -446,32 +478,48 @@ const NodeModal = props => {
           >
             <Select placeholder="请选择节点类型" disabled={modalType === 'edit'}>
               <Option value="1">开始节点</Option>
-              <Option value="0">经办节点</Option>
+              <Option value="0">普通节点</Option>
               {/* <Option value="3">审批节点</Option> */}
               <Option value="2">结束节点</Option>
-              <Option value="4">抄送节点</Option>
-
+              {/* <Option value="4">抄送节点</Option> */}
               <Option value="20">条件网关</Option>
               <Option value="21">汇合网关</Option>
             </Select>
           </Form.Item>
-          <Form.Item label="检查前面在办" name="aheadHandle" style={{ dispay: 'none' }}>
-            <Select>
-              <Option value={0}>前面有在办可以移交</Option>
-              <Option value={1}>前面有在办不能移交（汇合节点）</Option>
-            </Select>
-          </Form.Item>
-          <Form.Item label="节点办理方式" name="NodeHandling">
-            <Select>
-              <Option value={1}>多人接收，一人办理（抢占模式）</Option>
-              <Option value={0}>多人接收，多人办理（会签模式）</Option>
-              <Option value={2}>一人接收，一人办理</Option>
-            </Select>
-          </Form.Item>
+          <div style={{ display: 'none' }}>
+            <Form.Item label="检查前面在办" name="aheadHandle">
+              <Select>
+                <Option value={1}>前面有在办不能移交</Option>
+                <Option value={0}>前面有在办可以移交</Option>
+              </Select>
+            </Form.Item>
+          </div>
+          <div
+            style={{
+              display:
+                form?.getFieldValue('NodeType') === '1' ||
+                form?.getFieldValue('NodeType') === '2' ||
+                form?.getFieldValue('NodeType') === '20' ||
+                form?.getFieldValue('NodeType') === '21'
+                  ? 'none'
+                  : 'block',
+            }}
+          >
+            <Form.Item label="节点办理方式" name="NodeHandling">
+              <Select>
+                <Option value={1}>多人接收，一人办理（抢占模式）</Option>
+                <Option value={0}>多人接收，多人办理（会签模式）</Option>
+                <Option value={2}>一人接收，一人办理</Option>
+              </Select>
+            </Form.Item>
+          </div>
         </Form>
         <div
           style={{
-            display: editMsg.NodeType === '20' || editMsg.NodeType === '21' ? 'none' : 'block',
+            display:
+              form?.getFieldValue('NodeType') === '20' || form?.getFieldValue('NodeType') === '21'
+                ? 'none'
+                : 'block',
           }}
         >
           <Divider
@@ -511,7 +559,12 @@ const NodeModal = props => {
         </div>
         <div
           style={{
-            display: editMsg.NodeType !== '20' && editMsg.NodeType !== '21' ? 'none' : 'block',
+            display:
+              form?.getFieldValue('NodeType') !== '20' &&
+              form?.getFieldValue('NodeType') !== '21' &&
+              form?.getFieldValue('NodeType')
+                ? 'none'
+                : 'block',
           }}
         >
           <Divider

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/nodeModalComponents/RuleConfig.jsx

@@ -6,14 +6,19 @@ const { TextArea } = Input;
 const RuleConfig = props => {
   const { visible, handleCancel, fieldList, onSubumit, RuleContent } = props;
   const [rule, setRule] = useState([]);
-  const [treeData, setTreeData] = useState([]);
+  const [expandedKey, setExpandedKey] = useState(''); // 默认展开项
+  const [currentSelectId, setCurrentSelectId] = useState(''); // 选中得节点
 
   const [form] = Form.useForm();
   useEffect(() => {
     if (visible) {
-      console.log(RuleContent, 'fieldList');
+      console.log(fieldList, 'fieldList');
+      setExpandedKey(fieldList[0].TableName);
       setRule(RuleContent);
     } else {
+      setExpandedKey('');
+      setCurrentSelectId('');
+      setRule('');
     }
   }, [visible]);
   // 保存线配置
@@ -22,14 +27,19 @@ const RuleConfig = props => {
   };
   // 处理树数据
   const mapTree = (val, index) => {
+    console.log(val, 'val');
     return {
       title: val.TableName,
       key: val.TableName,
-      children: val.TableFieldNames.map(item => ({ title: item, key: item })),
+      children: val.TableFieldNames.map(item => ({
+        title: item,
+        key: `${val.TableName}&${item}`,
+      })),
     };
   };
-  const onSelect = e => {
-    console.log(e);
+  const onSelect = (prop, treeNode) => {
+    console.log(prop, treeNode);
+    setCurrentSelectId(prop[0]);
   };
   return (
     <div>
@@ -47,7 +57,10 @@ const RuleConfig = props => {
           <div className={styles.leftTree}>
             <Tree
               blockNode
-              // onSelect={onSelect}
+              autoExpandParent
+              onSelect={onSelect}
+              selectedKeys={[currentSelectId]}
+              expandedKeys={expandedKey}
               treeData={fieldList.map((item, index) => mapTree(item, index))}
             />
           </div>

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/nodeModalComponents/RuleConfig.less

@@ -4,6 +4,7 @@
   .leftTree {
     width: 250px;
     height: 100%;
+    margin-right: 10px;
     overflow-y: scroll;
   }
 }
\ No newline at end of file