king
2025-05-23 24842b40de5cd60700bf69dfd38a0332f5431e36
src/tabviews/custom/components/chart/antv-X6/index.jsx
@@ -138,8 +138,8 @@
  'mk-rect',
  {
    inherit: 'rect',
    width: 66,
    height: 40,
    width: 100,
    height: 32,
    attrs: {
      body: {
        strokeWidth: 1,
@@ -168,8 +168,8 @@
  'mk-polygon',
  {
    inherit: 'polygon',
    width: 66,
    height: 40,
    width: 100,
    height: 32,
    attrs: {
      body: {
        strokeWidth: 1,
@@ -198,8 +198,8 @@
  'mk-paral',
  {
    inherit: 'polygon',
    width: 66,
    height: 40,
    width: 100,
    height: 32,
    attrs: {
      body: {
        strokeWidth: 1,
@@ -256,8 +256,8 @@
  'mk-ellipse',
  {
    inherit: 'ellipse',
    width: 66,
    height: 40,
    width: 100,
    height: 32,
    attrs: {
      body: {
        strokeWidth: 1,
@@ -318,8 +318,8 @@
  'mk-text',
  {
    inherit: 'text-block',
    width: 66,
    height: 40,
    width: 100,
    height: 50,
    text: '文本域',
    attrs: {
      body: {
@@ -344,7 +344,7 @@
  yellow_green: '#a0d911',
  green: '#52c41a',
  cyan: '#13c2c2',
  blue_purple: '#2f54eb',
  blue_purple: '#3860f4',
  purple: '#722ed1',
  magenta: '#eb2f96',
  grass_green: '#aeb303',
@@ -388,7 +388,8 @@
    status: 0,
    flowname: '',
    flowcode: '',
    orgs: []
    orgs: [],
    empty: true
  }
  selectNode = null
@@ -526,6 +527,7 @@
                    worker_id: work.worker_id || '',
                    workercode: work.workercode || '',
                    workername: work.workername || '',
                    job_type: job.job_type || '',
                    parentIds: [com.OrgCode, dep.co_pro_code, job.jobcode],
                    parentNames: [com.OrgName, dep.co_pro_name, job.jobname]
                  }
@@ -553,6 +555,7 @@
                    worker_id: work.worker_id || '',
                    workercode: work.workercode || '',
                    workername: work.workername || '',
                    job_type: job.job_type || '',
                    parentIds: [com.OrgCode, dep.co_pro_code, job.jobcode, group.work_group],
                    parentNames: [com.OrgName, dep.co_pro_name, job.jobname, group.work_group]
                  }
@@ -590,8 +593,8 @@
    const { BID } = this.state
    if (!BID) {
      this.cells = []
      if (!is(fromJS(this.data), fromJS([]))) {
        this.cells = []
        this.handleData()
      }
      this.setState({empty: true})
@@ -624,7 +627,8 @@
        status: item.status || 0,
        flowname: item.works_flow_name || '',
        flowcode: item.works_flow_code || '',
        loading: false
        loading: false,
        empty: cells.length === 0
      })
      if (result.message) {
@@ -896,18 +900,18 @@
    const stencil = new Stencil({
      title: '流程图',
      target: graph,
      stencilGraphWidth: 180,
      stencilGraphWidth: 230,
      stencilGraphHeight: 180,
      groups: [
        {
          title: '通用节点',
          name: 'group1',
          graphHeight: 240
          graphHeight: 150
        },
        {
          title: '自定义',
          name: 'group2',
          graphHeight: 150,
          graphHeight: 300,
          layoutOptions: {
            rowHeight: 70
          }
@@ -915,7 +919,7 @@
      ],
      layoutOptions: {
        columns: 2,
        columnWidth: 80,
        columnWidth: 110,
        rowHeight: 55
      }
    })
@@ -994,6 +998,18 @@
      graph.clearTransformWidgets()
    })
    graph.on('node:dblclick', () => {
      setTimeout(() => {
        MKEmitter.emit('mk-x6-dbclick')
      }, 100)
    })
    graph.on('edge:dblclick', () => {
      setTimeout(() => {
        MKEmitter.emit('mk-x6-dbclick')
      }, 100)
    })
    graph.on('blank:click', () => {
      this.selectNode = null
      
@@ -1003,15 +1019,30 @@
      if (!isNew) return
      let target = edge.getTargetCell()
      let source = edge.getSourceCell()
      if (!target) return
      if (!target || !source) return
      if (source.prop('mknode') === 'end') {
        notification.warning({
          top: 92,
          message: '结束节点不可添加分支!',
          duration: 2
        })
        graph.removeCells([edge])
        return
      }
      let mkdata = target.prop('mkdata')
      if (target.prop('mknode') === 'end') {
      if (source.prop('mknode') === 'start' && target.prop('mknode') === 'end') {
        edge.prop('mknode', 'throughEdge')
      } else if (target.prop('mknode') === 'end') {
        edge.prop('mknode', 'endEdge')
      } else if (target.prop('mknode') === 'start') {
        edge.prop('mknode', 'startEdge')
      } else if (source.prop('mknode') === 'start') {
        edge.prop('mknode', 'firstEdge')
      }
      if (mkdata) {
        edge.prop('mkdata', {status: mkdata.status, statusName: mkdata.statusName})
@@ -1024,10 +1055,10 @@
      mkdata: {status: 0, statusName: '未提交'},
      attrs: {
        body: {
          rx: 20,
          ry: 26,
          fill: '#52c41a',
          stroke: '#52c41a'
          rx: 0,
          ry: 0,
          fill: '#000000',
          stroke: '#000000'
        },
        text: {
          fill: '#ffffff',
@@ -1035,83 +1066,34 @@
        }
      }
    })
    const r2 = graph.createNode({
      shape: 'mk-rect',
      attrs: {
        body: {
          rx: 20,
          ry: 26,
          fill: '#e6f4ff',
          stroke: '#1890ff'
        },
        text: {
          text: '过程'
        }
      }
    })
    const r3 = graph.createNode({
      shape: 'mk-rect',
      attrs: {
        body: {
          rx: 6,
          ry: 6,
          fill: '#fff7e6',
          stroke: '#fa8c16'
        },
        text: {
          text: '可选过程'
        }
      }
    })
    const r4 = graph.createNode({
      shape: 'mk-rect',
      attrs: {
        body: {
          rx: 0,
          ry: 0,
          fill: '#fff7e6',
          stroke: '#fa8c16'
          fill: '#ffffff',
          stroke: '#757575'
        },
        text: {
          fill: '#000000',
          text: '节点'
        }
      }
    })
    const r5 = graph.createNode({
      shape: 'mk-polygon',
      attrs: {
        body: {
          refPoints: '0,10 10,0 20,10 10,20',
          fill: '#f9f0ff',
          stroke: '#722ed1'
          fill: '#ffffff',
          stroke: '#757575'
        },
        text: {
          fill: '#000000',
          text: '决策'
        }
      }
    })
    const r6 = graph.createNode({
      shape: 'mk-paral',
      attrs: {
        body: {
          refPoints: '10,0 40,0 30,20 0,20',
          fill: '#e6fffb',
          stroke: '#13c2c2'
        },
        text: {
          text: '数据'
        }
      }
    })
    const r7 = graph.createNode({
      shape: 'mk-circle',
      attrs: {
        body: {
          fill: '#e6f4ff',
          stroke: '#1890ff'
        },
        text: {
          text: '连接'
        }
      }
    })
@@ -1122,10 +1104,10 @@
      mkdata: {status: 888, statusName: '已完成'},
      attrs: {
        body: {
          rx: 20,
          ry: 26,
          fill: '#fa8c16',
          stroke: '#fa8c16'
          rx: 0,
          ry: 0,
          fill: '#000000',
          stroke: '#000000'
        },
        text: {
          fill: '#ffffff',
@@ -1134,7 +1116,65 @@
      }
    })
    
    stencil.load([r1, r2, r3, r4, r5, r6, r7, r8], 'group1')
    stencil.load([r1, r4, r5, r8], 'group1')
    const r2 = graph.createNode({
      shape: 'mk-rect',
      attrs: {
        body: {
          rx: 20,
          ry: 26,
          fill: '#ffffff',
          stroke: '#757575'
        },
        text: {
          fill: '#000000',
          text: '过程'
        }
      }
    })
    const r3 = graph.createNode({
      shape: 'mk-rect',
      attrs: {
        body: {
          rx: 6,
          ry: 6,
          fill: '#ffffff',
          stroke: '#757575'
        },
        text: {
          fill: '#000000',
          text: '可选过程'
        }
      }
    })
    const r6 = graph.createNode({
      shape: 'mk-paral',
      attrs: {
        body: {
          refPoints: '10,0 40,0 30,20 0,20',
          fill: '#ffffff',
          stroke: '#757575'
        },
        text: {
          fill: '#000000',
          text: '数据'
        }
      }
    })
    const r7 = graph.createNode({
      shape: 'mk-circle',
      attrs: {
        body: {
          fill: '#ffffff',
          stroke: '#757575'
        },
        text: {
          fill: '#000000',
          text: '连接'
        }
      }
    })
    
    const p1 = graph.createNode({
      shape: 'mk-ellipse',
@@ -1149,7 +1189,7 @@
      shape: 'mk-text'
    })
    
    stencil.load([p1, p2, p3], 'group2')
    stencil.load([r2, r3, r6, r7, p1, p2, p3], 'group2')
    if (this.cells.length > 0) {
      let cells = []
@@ -1268,7 +1308,7 @@
    const stencil = new Stencil({
      title: '流程图',
      target: graph,
      stencilGraphWidth: 180,
      stencilGraphWidth: 230,
      stencilGraphHeight: 180,
      groups: [
        {
@@ -1294,7 +1334,7 @@
      ],
      layoutOptions: {
        columns: 2,
        columnWidth: 80,
        columnWidth: 110,
        rowHeight: 55
      }
    })
@@ -1523,12 +1563,16 @@
  setback = () => {
    if (this.mkGraph.canUndo()) {
      this.mkGraph.undo()
    } else {
      message.warning('无可撤销记录!')
    }
  }
  setprev = () => {
    if (this.mkGraph.canRedo()) {
      this.mkGraph.redo()
    } else {
      message.warning('无可前进记录!')
    }
  }
@@ -1594,7 +1638,13 @@
        } else if (item.mknode === 'end') {
          end_num++
        } else if (item.shape === 'edge') {
          if (item.mknode !== 'endEdge' && item.mknode !== 'startEdge' && (!item.mkdata.members || item.mkdata.members.length === 0)) {
          if (item.mknode === 'throughEdge') {
            if (!item.mkdata.seniorbers || item.mkdata.seniorbers.length === 0) {
              unvalid = true
            }
          } else if (item.mkdata.seniorCondition === 'open') {
          } else if (item.mknode !== 'endEdge' && item.mknode !== 'startEdge' && (!item.mkdata.members || item.mkdata.members.length === 0)) {
            unvalid = true
          } else if (item.mknode === 'startEdge' || item.mkdata.flowType === 'reject') {
            if (map.has(item.source.cell)) {
@@ -1700,7 +1750,10 @@
    let cells = this.mkGraph.getCells()
    const that = this
    if (cells.length === 0) return
    if (cells.length === 0) {
      message.warning('尚未添加元素!')
      return
    }
    confirm({
      title: '确定清空元素吗?',
@@ -1857,6 +1910,16 @@
    }
  }
  delCell = () => {
    const { node } = this.state
    let cell = this.mkGraph.getCellById(node.id)
    this.mkGraph.removeCells([cell])
    this.setState({node: null})
  }
  changeProps = (value, key) => {
    const { node } = this.state
@@ -1891,6 +1954,16 @@
          this.selectNode.attr('line/strokeDasharray', 0)
        }
      } else if (key === 'mkdata') {
        if (!node.mkdata) {
          if (node.target && node.target.cell) {
            let cell = this.mkGraph.getCellById(node.target.cell)
            if (cell) {
              cell.prop('mkdata', {status: value.status, statusName: value.statusName || ''})
            }
          }
        }
        this.selectNode.prop('mkdata', value)
      }
    } else if (node.shape === 'lane') {
@@ -2062,7 +2135,13 @@
        } else if (item.mknode === 'end') {
          end_num++
        } else if (item.shape === 'edge' && !unvalidId && !rejectId && !approvalId) {
          if (item.mknode !== 'endEdge' && item.mknode !== 'startEdge' && (!item.mkdata.members || item.mkdata.members.length === 0)) {
          if (item.mknode === 'throughEdge') {
            if (!item.mkdata.seniorbers || item.mkdata.seniorbers.length === 0) {
              unvalidId = item.id
            }
          } else if (item.mkdata.seniorCondition === 'open') {
          } else if (item.mknode !== 'endEdge' && item.mknode !== 'startEdge' && (!item.mkdata.members || item.mkdata.members.length === 0)) {
            unvalidId = item.id
          } else if (item.mknode === 'startEdge' || item.mkdata.flowType === 'reject') {
            if (map.has(item.source.cell)) {
@@ -2224,12 +2303,12 @@
  }
  render() {
    const { loading, config, node, orgs, status, flowname } = this.state
    const { loading, config, node, orgs, status, flowname, empty } = this.state
    let style = {...config.style}
    if (config.plot.function === 'show') {
      if (config.plot.empty === 'hidden' && this.cells.length === 0) {
      if (config.plot.empty === 'hidden' && empty) {
        style.position = 'absolute'
        style.width = '100%'
        style.zIndex = -1
@@ -2286,7 +2365,7 @@
            <Tooltip title="清空">
              <ClearOutlined onClick={this.clearNode}/>
            </Tooltip>
            <Tooltip overlayStyle={{maxWidth: 260}} title="快捷键:复制(ctrl+c)、剪切(ctrl+x)、粘贴(ctrl+v)、后退(ctrl+z)、前进(ctrl+shift+z)、删除(backspace 或 delete)">
            <Tooltip overlayStyle={{maxWidth: 310}} title="快捷键:复制(ctrl+c)、剪切(ctrl+x)、粘贴(ctrl+v)、后退(ctrl+z)、前进(ctrl+shift+z)、删除(backspace 或 delete);双击节点或连线可编辑自定义信息。">
              <QuestionCircleOutlined />
            </Tooltip>
          </div>
@@ -2302,7 +2381,7 @@
          <div id={config.uuid + 'container'} className="mk-container"></div>
          <div className="mk-node-edit">
            <div className="header">设置</div>
            {!node ? <div className="empty">未选中</div> : <NodeUpdate node={node} orgs={orgs} onChange={this.changeProps}/>}
            {!node ? <div className="empty">未选中</div> : <NodeUpdate node={node} orgs={orgs} onChange={this.changeProps} onDel={this.delCell}/>}
          </div>
        </div>
      </div>