2023-06-29

king

2023-06-29 aac1d5cb50be5071b9c241a9cc0ebbfaae90a21e

 src/tabviews/custom/components/chart/antv-X6/index.jsx

@@ -2,7 +2,7 @@
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Spin, Tooltip, message, Modal, notification } from 'antd'
import { UndoOutlined, RedoOutlined, VerticalAlignTopOutlined, VerticalAlignBottomOutlined, SaveOutlined, ZoomInOutlined, ZoomOutOutlined, OneToOneOutlined } from '@ant-design/icons'
import { UndoOutlined, RedoOutlined, VerticalAlignTopOutlined, VerticalAlignBottomOutlined, SaveOutlined, ZoomInOutlined, ZoomOutOutlined, OneToOneOutlined, QuestionCircleOutlined } from '@ant-design/icons'
import { Graph, Shape } from '@antv/x6'
import { Stencil } from '@antv/x6-plugin-stencil'
import { Transform } from '@antv/x6-plugin-transform'
@@ -316,20 +316,35 @@
Graph.registerNode(
  'mk-text',
  {
    inherit: 'rect',
    inherit: 'text-block',
    width: 66,
    height: 36,
    text: '文本域',
    attrs: {
      body: {
        strokeWidth: 0,
        fill: 'transparent'
      },
      text: {
        fontSize: 12,
        fill: '#262626'
        fill: '#ffffff',
        stroke: '#000000',
        strokeWidth: 1,
        rx: 0,
        ry: 0
      }
    }
  },
  // {
  //   inherit: 'rect',
  //   width: 66,
  //   height: 36,
  //   attrs: {
  //     body: {
  //       strokeWidth: 0,
  //       fill: 'transparent'
  //     },
  //     text: {
  //       fontSize: 12,
  //       fill: '#262626'
  //     }
  //   }
  // },
  true
)

@@ -342,7 +357,8 @@
    config: null,
    editing: false,
    node: null,
    loading: false
    loading: false,
    rolelist: []
  }

  selectNode = null
@@ -378,6 +394,10 @@
      plot: _config.plot
    }, () => {
      this.loadData()

      if (_config.plot.function === 'edit') {
        this.getrolelist()
      }
    })
  }

@@ -419,6 +439,21 @@
        this.loadData()
      })
    }
  }

  getrolelist = () => {
    Api.getSystemConfig({func: 's_get_rolelist', OrderCol: 'RoleID desc', PageIndex: 1, PageSize: 1000}).then(res => {
      if (!res.status) {
        notification.error({
          top: 92,
          message: res.message,
          duration: 10
        })
        return
      }

      this.setState({rolelist: res.data || []})
    })
  }

  async loadData () {
@@ -777,7 +812,6 @@
      }
    })

    // #region 使用插件
    graph
      .use(new Transform({
        resizing: true,
@@ -790,7 +824,6 @@
      .use(new History())
      .use(new Export())

    // #region 初始化 stencil
    const stencil = new Stencil({
      title: '流程图',
      target: graph,
@@ -819,7 +852,6 @@

    document.getElementById(config.uuid + 'stencil').appendChild(stencil.container)

    // #region 快捷键与事件
    graph.bindKey(['meta+c', 'ctrl+c'], () => {
      const cells = graph.getSelectedCells()
      if (cells.length) {
@@ -841,7 +873,6 @@
      return false
    })

    // undo redo
    graph.bindKey(['meta+z', 'ctrl+z'], () => {
      if (graph.canUndo()) {
        graph.undo()
@@ -855,7 +886,6 @@
      return false
    })

    // 删除元素
    graph.bindKey(['backspace', 'delete'], () => {
      const cells = graph.getSelectedCells()
      if (cells.length) {
@@ -1072,7 +1102,6 @@
      .use(new History())
      .use(new Export())

    // #region 初始化 stencil
    const stencil = new Stencil({
      title: '流程图',
      target: graph,
@@ -1109,7 +1138,6 @@

    document.getElementById(config.uuid + 'stencil').appendChild(stencil.container)

    // #region 快捷键与事件
    graph.bindKey(['meta+c', 'ctrl+c'], () => {
      const cells = graph.getSelectedCells()
      if (cells.length) {
@@ -1144,7 +1172,6 @@
      return false
    })

    // 删除元素
    graph.bindKey(['backspace', 'delete'], () => {
      const cells = graph.getSelectedCells()
      if (cells.length) {
@@ -1154,7 +1181,6 @@
      }
    })

    // 控制连接桩显示/隐藏
    const showPorts = (ports, show) => {
      for (let i = 0, len = ports.length; i < len; i += 1) {
        ports[i].style.visibility = show ? 'visible' : 'hidden'
@@ -1309,11 +1335,9 @@
      return
    }

    // let cells = this.mkGraph.getCells()
    this.selectNode.toBack()
  }

  // zoom() 可获取或者设置缩放比例
  setback = () => {
    if (this.mkGraph.canUndo()) {
      this.mkGraph.undo()
@@ -1511,6 +1535,18 @@

        this.mkGraph.stopBatch('width-change')
      }
    } else if (node.shape === 'mk-text') {
      if (key === 'title') {
        this.selectNode.attr('label/text', value)
      } else if (key === 'fill') {
        this.selectNode.attr('body/fill', value)
      } else if (key === 'stroke') {
        this.selectNode.attr('body/stroke', value)
      } else if (key === 'fontSize') {
        this.selectNode.attr('label/style/fontSize', value)
      } else if (key === 'fontFill') {
        this.selectNode.attr('label/style/color', value)
      }
    } else {
      if (key === 'title') {
        this.selectNode.attr('text/text', value)
@@ -1543,7 +1579,7 @@
  }

  render() {
    const { loading, config, node } = this.state
    const { loading, config, node, rolelist } = this.state

    let style = {...config.style}

@@ -1600,6 +1636,9 @@
            <Tooltip title="前进">
              <RedoOutlined onClick={this.setprev}/>
            </Tooltip>
            <Tooltip overlayStyle={{maxWidth: 260}} title="快捷键：复制（ctrl+c）、剪切（ctrl+x）、粘贴（ctrl+v）、后退（ctrl+z）、前进（ctrl+shift+z）、删除（backspace 或 delete）">
              <QuestionCircleOutlined />
            </Tooltip>
          </div>
          <div className="right-tool">
            <Tooltip title="保存">
@@ -1612,7 +1651,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} onChange={this.changeProps}/>}
            {!node ? <div className="empty">未选中</div> : <NodeUpdate node={node} rolelist={rolelist} onChange={this.changeProps}/>}
          </div>
        </div>
      </div>