Skip to content

C
CivManage
Commit f45d17ab authored by 邓超's avatar 邓超
Browse files
Options

fix: 修改规则节点后的线显示规则名称

parent 9270de0d
Pipeline #63265 passed with stages
          Hide whitespace changes
          Inline Side-by-side
          Showing with 215 additions and 81 deletions
          src/components/RuleConfig/index.jsx
          View file @ f45d17ab
          ......@@ -2,7 +2,7 @@
          * @Author: dengchao 754083046@qq.com
          * @Date: 2022-11-02 14:37:53
          * @LastEditors: dengchao 754083046@qq.com
          * @LastEditTime: 2022-11-02 14:40:57
          * @LastEditTime: 2022-11-07 11:48:08
          * @FilePath: \maintenance\src\components\RuleConfig\index.jsx
          * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
          */
          ......@@ -53,7 +53,7 @@ const RuleConfig = props => {
          return (
          <div>
          <Modal
          title="节点扭转规则配置"
          title="节点流转规则配置"
          visible={visible}
          onOk={onSave}
          width="860px"
          ......
          src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/FlowChart.jsx
          View file @ f45d17ab
          ......@@ -36,7 +36,7 @@ const FlowChart = props => {
          const [editMsg, setEditMsg] = useState({}); // 编辑节点的信息
          const [lineMsg, setLineMsg] = useState({});
          const [modalType, setModalType] = useState(''); // 存入弹窗是编辑还是新增
          const [lineId, setLineId] = useState(''); // 存入编辑线id
          const [LineId, setLineId] = useState(''); // 存入编辑线id
          const [nodeKey, setNodeKey] = useState(''); // 存入编辑节点的key
          const [DeleteNodes, setDeleteNodes] = useState([]); // 删除节点数组
          const [DeleteLines, setDeleteLines] = useState([]); // 删除线数组
          ......@@ -92,12 +92,18 @@ const FlowChart = props => {
          showDeleteConfirm();
          return false;
          });
          // 监听线,连接线的时候加上text属性
          diagram.addDiagramListener('LinkDrawn', e => {
          // e.subject.data.text = '';
          e.subject.data.lineDetail = JSON.stringify(e.subject.data);
          console.log(e, e.subject.data, 'fasdfasdgds');
          diagram.model.updateTargetBindings(e.subject.data);
          });
          // diagram.addDiagramListener('SelectionDeleted', e => {
          // });
          console.log(diagram.model, 'diagram.model');
          // 监听复制事件并修改复制内容
          // setTimeout(() => {}, 1200);
          }, []);
          useEffect(() => {
          if (flowData) {
          ......@@ -107,7 +113,14 @@ const FlowChart = props => {
          setAddNodes([]);
          setDeleteNode('');
          setDeleteLine('');
          setCurrentFlowData(JSON.parse(JSON.stringify(flowData)));
          console.log(flowData, 'flowData');
          let dataList = JSON.parse(JSON.stringify(flowData));
          dataList.Lines.forEach(item => {
          item.text = '';
          item.lineDetail = JSON.stringify(item);
          });
          setCurrentFlowData(dataList);
          setShowLeaveTip(false);
          }
          }, [flowData]);
          ......@@ -159,12 +172,14 @@ const FlowChart = props => {
          delete copyObj.LineId;
          return copyObj;
          };
          // diagram.model.linkKeyProperty = 'LineId';
          // diagram.model.makeUniqueLinkKeyFunction = (model, data) => {
          // let i = model.linkDataArray.length * 2 + 2;
          // while (model.findLinkDataForKey(i) !== null) i += 2;
          // return i;
          // };
          diagram.model.linkKeyProperty = 'LineId';
          diagram.model.makeUniqueLinkKeyFunction = (model, data) => {
          let i = model.linkDataArray.length * 2 + 2;
          while (model.findLinkDataForKey(i) !== null) i += 2;
          return i;
          };
          }, [currentFlowData]);
          // 删除提醒
          const showDeleteConfirm = () => {
          ......@@ -280,6 +295,7 @@ const FlowChart = props => {
          v?.length > 0 ? new go.Margin(10, 10, 0, 10) : 0,
          ),
          new go.Binding('text', 'nodeDetail', v => {
          console.log(v, 'nodenodenodne');
          const obj = JSON.parse(v);
          if (obj.NodeType === '20' || obj.NodeType === '21' || obj.NodeType === '22') {
          return '';
          ......@@ -303,10 +319,18 @@ const FlowChart = props => {
          {
          // 节点之间线得连接
          linkValidation(fromnode, fromport, tonode, toport, thisLink) {
          // console.log(fromnode.data, tonode.data, 'aaaaaa');
          // 并行网关不让连接汇合网关
          if (fromnode.data.NodeType === '22' && tonode.data.NodeType === '21') {
          return false;
          }
          // 条件网关不让连接条件网关
          if (fromnode.data.NodeType === '20' && tonode.data.NodeType === '20') {
          return false;
          }
          // 汇合网关不让连条件网关
          if (fromnode.data.NodeType === '21' && tonode.data.NodeType === '20') {
          return false;
          }
          return true;
          },
          // 处理鼠标进入/离开事件以显示/隐藏端口
          ......@@ -367,12 +391,41 @@ const FlowChart = props => {
          new go.Binding('stroke', 'from', v => lineStyle(v, 'stroke')),
          new go.Binding('fill', 'from', v => lineStyle(v, 'stroke')),
          ),
          objGo(
          go.Panel,
          'Auto',
          objGo(
          go.Shape, // 标签背景，在边缘变得透明
          // { fill: 'transparent' },
          new go.Binding('fill', 'lineDetail', v => lineTextStyle(v)),
          new go.Binding('stroke', 'lineDetail', v => lineTextStyle(v)),
          ),
          // objGo(
          // go.TextBlock, // the label text
          // {
          // textAlign: 'center',
          // font: '10pt helvetica, arial, sans-serif',
          // stroke: '#555555',
          // margin: 4,
          // },
          // new go.Binding('text', 'text'),
          // ),
          objGo(
          go.TextBlock,
          {
          textAlign: 'center',
          font: '10pt helvetica, arial, sans-serif',
          stroke: '#555555',
          margin: 4,
          },
          new go.Binding('text', 'lineDetail', v => lineText(v)),
          ),
          ),
          // {
          // // 处理双击
          // doubleClick(e, node) {
          // addLineMsg(e, node);
          // // 双击事件
          // // handlerDC(e, node); // 双击执行的方法
          // },
          // },
          );
          ......@@ -400,6 +453,33 @@ const FlowChart = props => {
          return null;
          }
          };
          const lineTextStyle = v => {
          let obj = JSON.parse(v);
          let nodeData = diagram.model.findNodeDataForKey(obj.from);
          if (nodeData.NodeType === '20' || nodeData.NodeType === '21') {
          // if(nodeData.)
          if (nodeData.RuleList.some(ele => ele.NextNodeId === obj.to)) {
          return '#EFF8FA';
          }
          return 'transparent';
          }
          return 'transparent';
          };
          const lineText = v => {
          console.log('rfioehjgiouewrhgio');
          let obj = JSON.parse(v);
          let nodeData = diagram.model.findNodeDataForKey(obj.from);
          if (nodeData.NodeType === '20' || nodeData.NodeType === '21') {
          // if(nodeData.)
          if (nodeData.RuleList.some(ele => ele.NextNodeId === obj.to)) {
          console.log(nodeData.RuleList.find(ele => ele.NextNodeId === obj.to), 'aaaaaaaaa');
          return nodeData.RuleList.find(ele => ele.NextNodeId === obj.to).RuleName;
          }
          return '';
          }
          return '';
          };
          // 是否显示端口
          const showSmallPorts = (node, show) => {
          node.ports.each(port => {
          ......@@ -501,7 +581,8 @@ const FlowChart = props => {
          };
          // 双击线
          const addLineMsg = (e, node) => {
          // setLineId(node.part.data.__gohashid);
          console.log(node.part.data, 'node.part.data');
          setLineId(node.part.data.LineId);
          setLineMsg(node.part.data);
          setLineVisible(true);
          };
          ......@@ -589,46 +670,60 @@ const FlowChart = props => {
          });
          return;
          }
          if (modalType === 'add') {
          // 新增节点
          // 新增得key比最大得key值+1
          let newKey;
          if (keyArr.length === 0) {
          newKey = 1;
          } else {
          newKey = keyArr.reduce((num1, num2) => (num1 > num2 ? num1 : num2)) + 1;
          // if (modalType === 'add') {
          // // 新增节点
          // // 新增得key比最大得key值+1
          // let newKey;
          // if (keyArr.length === 0) {
          // newKey = 1;
          // } else {
          // newKey = keyArr.reduce((num1, num2) => (num1 > num2 ? num1 : num2)) + 1;
          // }
          // diagram.model.addNodeData({
          // key: newKey,
          // NodeId: newKey,
          // ...obj,
          // });
          // setAddNodes([...AddNodes, newKey]);
          // }
          // if (modalType === 'edit') {
          // 编辑节点
          let nodeData = diagram.model.findNodeDataForKey(nodeKey);
          const {
          NodeName,
          NodeType,
          roleList,
          SerialNo,
          aheadHandle,
          NodeHandling,
          nodeDetail,
          RuleList,
          } = obj;
          nodeData.NodeName = NodeName;
          nodeData.NodeType = NodeType;
          nodeData.NodeId = nodeKey;
          nodeData.roleList = roleList;
          nodeData.SerialNo = SerialNo;
          nodeData.aheadHandle = aheadHandle;
          nodeData.NodeHandling = NodeHandling;
          nodeData.nodeDetail = nodeDetail;
          nodeData.RuleList = RuleList;
          diagram.model.updateTargetBindings(nodeData);
          console.log(nodeData, 'nodeData');
          // 给线上添加文字
          let diagramObj = JSON.parse(diagram.model.toJson());
          diagramObj.linkDataArray.forEach(item => {
          if (
          item.from === nodeData.NodeId &&
          nodeData.RuleList.some(ele => ele.NextNodeId === item.to)
          ) {
          let node = diagram.model.findLinkDataForKey(item.LineId);
          node.text = item.RuleName;
          diagram.model.updateTargetBindings(node);
          }
          diagram.model.addNodeData({
          key: newKey,
          NodeId: newKey,
          ...obj,
          });
          setAddNodes([...AddNodes, newKey]);
          }
          if (modalType === 'edit') {
          // 编辑节点
          let nodeData = diagram.model.findNodeDataForKey(nodeKey);
          const {
          NodeName,
          NodeType,
          roleList,
          SerialNo,
          aheadHandle,
          NodeHandling,
          nodeDetail,
          RuleList,
          } = obj;
          nodeData.NodeName = NodeName;
          nodeData.NodeType = NodeType;
          nodeData.NodeId = nodeKey;
          nodeData.roleList = roleList;
          nodeData.SerialNo = SerialNo;
          nodeData.aheadHandle = aheadHandle;
          nodeData.NodeHandling = NodeHandling;
          nodeData.nodeDetail = nodeDetail;
          nodeData.RuleList = RuleList;
          diagram.model.updateTargetBindings(nodeData);
          }
          });
          // }
          // 关闭时进行数据比对看数据是否改变
          leaveTip();
          setVisible(false);
          ......@@ -651,23 +746,15 @@ const FlowChart = props => {
          // 线配置回调函数
          const lineCallBack = obj => {
          console.log(obj, 'obj');
          console.log(lineId, 'lineId');
          let node = diagram.findLinkDataForKey(lineId);
          console.log(LineId, 'LineId');
          console.log(diagram, 'diagram');
          let node = diagram.model.findLinkDataForKey(LineId);
          console.log(node, 'nodeData');
          node.text = obj.text;
          diagram.model.updateTargetBindings(node);
          console.log(node, 'linkemsg');
          // 关闭时进行数据比对看数据是否改变
          let diagramObj = JSON.parse(diagram.model.toJson());
          let stageJson = {
          Nodes: diagramObj.nodeDataArray,
          Lines: diagramObj.linkDataArray,
          };
          if (JSON.stringify(stageJson.Nodes) === JSON.stringify(initFlowData.Nodes)) {
          setShowLeaveTip(false);
          leaveCallBack(false);
          } else {
          leaveCallBack(true);
          setShowLeaveTip(true);
          }
          leaveTip();
          setLineVisible(false);
          };
          // 获取保存后的流程数据
          ......@@ -781,7 +868,7 @@ const FlowChart = props => {
          ))}
          </div>
          <div className={styles.buttonList}>
          <Button
          {/* <Button
          type="link"
          onClick={() => {
          window.open(
          ......@@ -790,7 +877,8 @@ const FlowChart = props => {
          }}
          >
          说明文档
          </Button>
          </Button> */}
          <Button type="primary" onClick={() => saveFlow()} loading={buttonLoading}>
          发布
          </Button>
          ......@@ -816,12 +904,12 @@ const FlowChart = props => {
          onSubumit={obj => nodeCallBack(obj)}
          flowData={diagram ? JSON.parse(diagram.model.toJson()) : {}}
          />
          {/* <LineModal
          <LineModal
          visible={lineVisible}
          lineMsg={lineMsg}
          handleCancel={() => setLineVisible(false)}
          onSubumit={obj => lineCallBack(obj)}
          /> */}
          />
          </>
          );
          };
          ......
          src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/NodeModal.jsx
          View file @ f45d17ab
          ......@@ -12,6 +12,7 @@ import {
          Popconfirm,
          message,
          } from 'antd';
          import lodash from 'lodash';
          import {
          DeleteOutlined,
          EditTwoTone,
          ......@@ -164,7 +165,7 @@ const NodeModal = props => {
          let linkNode = flowData.nodeDataArray.find(ele => ele.key === item.to);
          if (linkNode.NodeType === '20') {
          getNextLinkNodes(linkNode.key);
          } else {
          } else if (!nextlinkNodes.current.some(ele => ele.key === linkNode.key)) {
          nextlinkNodes.current.push(linkNode);
          }
          }
          ......@@ -209,6 +210,27 @@ const NodeModal = props => {
          };
          // 提交表单
          const onFinish = () => {
          // 规则填写校验
          for (let i = 0; i < RuleList.length; i++) {
          if (!RuleList[i].RuleName) {
          message.error('请填写规则名称');
          return;
          }
          if (!RuleList[i].NextNodeId && RuleList[i].NextNodeId !== 0) {
          message.error('请选择需要流转的节点');
          return;
          }
          if (!RuleList[i].RuleContent) {
          message.error('请填写规则');
          return;
          }
          }
          const newListLength = new Set(RuleList.map(item => item.NextNodeId)).size;
          if (RuleList.length > newListLength) {
          message.error('规则流转到的节点不能重复');
          return;
          }
          form.validateFields().then(validate => {
          console.log(validate, 'validate');
          if (validate) {
          ......@@ -263,8 +285,16 @@ const NodeModal = props => {
          // 添加规则
          const addRule = () => {
          console.log(fieldList, 'fieldList');
          if (nextlinkNodes.current.length === 0) {
          message.error('请连接需要添加规则的节点');
          return;
          }
          if (RuleList.length === nextlinkNodes.current.length) {
          message.error('请连接需要添加规则的节点');
          return;
          }
          let list = JSON.parse(JSON.stringify(RuleList));
          list.push({ RuleContent: '', NextNodeName: '', TableNames: '' });
          list.push({ RuleContent: '', NextNodeId: '', TableNames: '', RuleName: '' });
          setRuleList(list);
          };
          // 删除规则
          ......@@ -284,10 +314,13 @@ const NodeModal = props => {
          };
          // 网关表单配置监听
          const formChage = (e, index, field) => {
          console.log(e, 'fasdfga');
          let list = JSON.parse(JSON.stringify(RuleList));
          let list = lodash.cloneDeep(RuleList);
          if (field === 'TableNames') {
          list[index][field] = e.join(',');
          }
          if (field === 'RuleName') {
          e.persist();
          list[index][field] = e.target.value;
          } else {
          list[index][field] = e;
          }
          ......@@ -628,18 +661,31 @@ const NodeModal = props => {
          <div className={styles.textContet}>规则{NumberToChinese(index + 1)}</div>
          <DeleteOutlined style={{ cursor: 'pointer' }} onClick={() => deleRule(index)} />
          </div>
          <div className={styles.formBox}>
          <div className={styles.label}>规则名称：</div>
          <div className={styles.item}>
          <Input
          style={{ width: '100%' }}
          value={item.RuleName}
          placeholder="请输入规则名称"
          onChange={e => {
          formChage(e, index, 'RuleName');
          }}
          />
          </div>
          </div>
          <div className={styles.formBox}>
          <div className={styles.label}>设置规则条件，需要流转到节点：</div>
          <div className={styles.item}>
          <Select
          style={{ width: '100%' }}
          value={item.NextNodeName}
          value={item.NextNodeId}
          onChange={e => {
          formChage(e, index, 'NextNodeName');
          formChage(e, index, 'NextNodeId');
          }}
          >
          {nextlinkNodes.current.map(ele => (
          <Option value={ele.NodeName} key={ele.NodeName}>
          <Option value={ele.NodeId} key={ele.NodeName}>
          {ele.NodeName}
          </Option>
          ))}
          ......
          Markdown is supported
          0% or
          You are about to add 0 people to the discussion. Proceed with caution.
          Finish editing this message first!
          Please register or to comment