Merge branch 'develop'

king

2023-06-07 42d40221c994caa470478c86605b2b006b7839b8

Merge branch 'develop'

 package-lock.json

@@ -670,6 +670,11 @@
        "mousetrap": "^1.6.5"
      }
    },
    "@antv/x6-plugin-scroller": {
      "version": "2.0.9",
      "resolved": "https://registry.npmjs.org/@antv/x6-plugin-scroller/-/x6-plugin-scroller-2.0.9.tgz",
      "integrity": "sha512-f3fluvSIbZBp+c5iKyidAoz19i0beWOnPA0CPfu/K4C+Jf1eWNgaFXbN3hcHPQRvFRJiPtvPApK30aCaik9Omg=="
    },
    "@antv/x6-plugin-selection": {
      "version": "2.1.7",
      "resolved": "https://registry.npmjs.org/@antv/x6-plugin-selection/-/x6-plugin-selection-2.1.7.tgz",

 package.json

@@ -13,6 +13,7 @@
    "@antv/x6-plugin-dnd": "^2.0.5",
    "@antv/x6-plugin-history": "^2.2.3",
    "@antv/x6-plugin-keyboard": "^2.2.1",
    "@antv/x6-plugin-scroller": "^2.0.9",
    "@antv/x6-plugin-selection": "^2.1.7",
    "@antv/x6-plugin-snapline": "^2.1.7",
    "@antv/x6-plugin-stencil": "^2.0.3",

 src/components/pasteboard/index.jsx

New file
@@ -0,0 +1,134 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Input, notification, Modal } from 'antd'
import { SnippetsOutlined } from '@ant-design/icons'

// import './index.scss'

const { TextArea } = Input

class PaseComponent extends Component {
  static propTpyes = {
    inputSubmit: PropTypes.func // 回车事件
  }

  state = {
    visible: false,
    value: ''
  }

  trigger = () => {
    // navigator.clipboard
    //   .readText()
    //   .then((val) => {
    //     this.evalContent(val)
    //   })
    //   .catch((v) => {
    //     this.setState({visible: true, value: ''})
    //   })

    this.setState({visible: true, value: ''})
  }

  evalContent = (config) => {
    let _config = config.replace(/(\n|\s)+/g, '')

    if (!_config) {
      notification.warning({
        top: 92,
        message: '未获取到配置信息',
        duration: 5
      })
      return
    }

    try {
      _config = JSON.parse(window.decodeURIComponent(window.atob(_config)))

      if (typeof(_config) === 'object' && _config.$srcId) {
        let srcid = localStorage.getItem(window.location.href.split('#')[0] + 'srcId')
        if (srcid && _config.$srcId !== srcid) {
          notification.warning({
            top: 92,
            message: '当前系统无权限使用此项配置！',
            duration: 5
          })

          _config = ''
        } else {
          delete _config.$srcId
        }
      }
    } catch (e) {
      // 通过sql语句添加字段集
      if (/[a-zA-Z0-9_]+\s+(nvarchar\(\d+\)|Decimal\(18,\d+\)|Int)/ig.test(config)) {
        _config = {
          key: 'datasourcefield',
          type: 'array',
          data: []
        }

        let list = config.match(/[a-zA-Z0-9_]+\s+(nvarchar\(\d+\)|Decimal\(18,\d+\)|Int)/ig)

        list.forEach(item => {
          _config.data.unshift({
            datatype: item.split(/\s+/)[1],
            field: item.split(/\s+/)[0],
            label: item.split(/\s+/)[0],
          })
        })
      } else {
        notification.warning({
          top: 92,
          message: '解析错误',
          duration: 5
        })
        _config = ''
      }
    }

    if (!_config) return

    this.props.getPasteValue(_config, () => {
      this.setState({visible: false, value: ''})
    })
  }

  changeVal = (e) => {
    this.setState({value: e.target.value})
  }

  pasteSubmit = () => {
    this.evalContent(this.state.value)
  }

  enterPress = (e) => {
    e.stopPropagation()

    this.evalContent(this.state.value)
  }

  render() {
    const { children } = this.props
    const { visible, value } = this.state

    return (
      <>
        {children ? <span onClick={this.trigger}>{children}</span> : <SnippetsOutlined title="粘贴" onClick={this.trigger} />}
        <Modal
          title="粘贴"
          visible={visible}
          width={600}
          maskClosable={false}
          onOk={this.pasteSubmit}
          onCancel={() => {this.setState({visible: false})}}
          destroyOnClose
        >
          <TextArea placeholder="请输入配置信息" autoFocus autoSize={{ minRows: 8, maxRows: 8 }} value={value} onChange={this.changeVal} onPressEnter={this.enterPress}/>
        </Modal>
      </>
    )
  }
}

export default PaseComponent

 src/components/pasteboard/index.scss

 src/menu/components/chart/antv-G6/index.jsx

@@ -1404,7 +1404,7 @@
    let _style = resetStyle(card.style)

    return (
      <div className="menu-scatter-chart-edit-box" style={_style} onClick={this.clickComponent} id={card.uuid}>
      <div className="menu-g6-chart-edit-box" style={_style} onClick={this.clickComponent} id={card.uuid}>
        <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
          <div className="mk-popover-control">
            <ChartCompileForm config={card} plotchange={this.updateComponent}/>

 src/menu/components/chart/antv-G6/index.scss

@@ -1,4 +1,4 @@
.menu-scatter-chart-edit-box {
.menu-g6-chart-edit-box {
  position: relative;
  box-sizing: border-box;
  background: #ffffff;
@@ -43,7 +43,7 @@
    background: rgba(255, 255, 255, 0.55);
  }
}
.menu-scatter-chart-edit-box:hover {
.menu-g6-chart-edit-box:hover {
  z-index: 1;
  box-shadow: 0px 0px 4px #1890ff;
}

 src/menu/components/chart/antv-X6/index.jsx

@@ -1,8 +1,8 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Popover } from 'antd'
import { ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons'
import { Popover, Tooltip, message } from 'antd'
import { ToolOutlined, DeleteOutlined, FontColorsOutlined, VerticalAlignTopOutlined, VerticalAlignBottomOutlined, SaveOutlined, ZoomInOutlined, ZoomOutOutlined, OneToOneOutlined, DoubleLeftOutlined } from '@ant-design/icons'
import { Graph, Shape } from '@antv/x6'
import { Stencil } from '@antv/x6-plugin-stencil'
import { Transform } from '@antv/x6-plugin-transform'
@@ -20,8 +20,225 @@

const SettingComponent = asyncIconComponent(() => import('@/menu/datasource'))
const ChartCompileForm = asyncIconComponent(() => import('./chartcompile'))
const NodeUpdate = asyncIconComponent(() => import('./nodeupdate'))
const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent'))
const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader'))

// #region 初始化图形
const groups = {
  top: {
    position: 'top',
    attrs: {
      circle: {
        r: 4,
        magnet: true,
        stroke: 'var(--mk-sys-color)',
        strokeWidth: 1,
        fill: '#fff',
        style: {
          visibility: 'hidden'
        }
      }
    }
  },
  right: {
    position: 'right',
    attrs: {
      circle: {
        r: 4,
        magnet: true,
        stroke: 'var(--mk-sys-color)',
        strokeWidth: 1,
        fill: '#fff',
        style: {
          visibility: 'hidden'
        }
      }
    }
  },
  bottom: {
    position: 'bottom',
    attrs: {
      circle: {
        r: 4,
        magnet: true,
        stroke: 'var(--mk-sys-color)',
        strokeWidth: 1,
        fill: '#fff',
        style: {
          visibility: 'hidden'
        }
      }
    }
  },
  left: {
    position: 'left',
    attrs: {
      circle: {
        r: 4,
        magnet: true,
        stroke: 'var(--mk-sys-color)',
        strokeWidth: 1,
        fill: '#fff',
        style: {
          visibility: 'hidden'
        }
      }
    }
  }
}

Graph.registerNode(
  'mk-rect',
  {
    inherit: 'rect',
    width: 66,
    height: 36,
    attrs: {
      body: {
        strokeWidth: 1,
        stroke: '#5F95FF',
        fill: '#EFF4FF'
      },
      text: {
        fontSize: 12,
        fill: '#262626'
      }
    },
    ports: {
      groups,
      items: [
        { group: 'top' },
        { group: 'right' },
        { group: 'bottom' },
        { group: 'left' }
      ]
    }
  },
  true
)

Graph.registerNode(
  'mk-polygon',
  {
    inherit: 'polygon',
    width: 66,
    height: 36,
    attrs: {
      body: {
        strokeWidth: 1,
        stroke: '#5F95FF',
        fill: '#EFF4FF'
      },
      text: {
        fontSize: 12,
        fill: '#262626'
      }
    },
    ports: {
      groups,
      items: [
        { group: 'top' },
        { group: 'right' },
        { group: 'bottom' },
        { group: 'left' }
      ]
    }
  },
  true
)

Graph.registerNode(
  'mk-circle',
  {
    inherit: 'circle',
    width: 36,
    height: 36,
    attrs: {
      body: {
        strokeWidth: 1,
        stroke: '#5F95FF',
        fill: '#EFF4FF'
      },
      text: {
        fontSize: 12,
        fill: '#262626'
      }
    },
    ports: {
      groups,
      items: [
        { group: 'top' },
        { group: 'right' },
        { group: 'bottom' },
        { group: 'left' }
      ]
    }
  },
  true
)

Graph.registerNode(
  'mk-ellipse',
  {
    inherit: 'ellipse',
    width: 66,
    height: 36,
    attrs: {
      body: {
        strokeWidth: 1,
        stroke: '#5F95FF',
        fill: '#EFF4FF'
      },
      text: {
        fontSize: 12,
        fill: '#262626'
      }
    },
    ports: {
      groups,
      items: [
        { group: 'top' },
        { group: 'right' },
        { group: 'bottom' },
        { group: 'left' }
      ]
    }
  },
  true
)

Graph.registerNode(
  'mk-star',
  {
    inherit: 'polygon',
    width: 36,
    height: 36,
    points: '100,10 40,198 190,78 10,78 160,198',
    attrs: {
      body: {
        fill: '#EFF4FF',
        stroke: '#5F95FF',
        strokeWidth: 1,
        fillRule: 'nonzero'
      },
      text: {
        fontSize: 12,
        fill: '#262626'
      }
    },
    ports: {
      groups,
      items: [
        { group: 'top' },
        { group: 'right' },
        { group: 'bottom' },
        { group: 'left' }
      ]
    }
  },
  true
)

class antvX6Chart extends Component {
  static propTpyes = {
@@ -32,8 +249,14 @@

  state = {
    card: null,
    eventListener: null
    eventListener: null,
    toolunfold: true,
    nodeunfold: true,
    node: null
  }

  selectNode = null
  mkGraph = null

  UNSAFE_componentWillMount () {
    const { card } = this.props
@@ -113,27 +336,47 @@
    // #region 初始化画布
    const graph = new Graph({
      container: document.getElementById(card.uuid + 'container'),
      grid: true,
      // grid: true,
      grid: {
        visible: true,
        type: 'doubleMesh',
        args: [
          {
            color: '#eee', // 主网格线颜色
            thickness: 1   // 主网格线宽度
          },
          {
            color: '#ddd', // 次网格线颜色
            thickness: 1,  // 次网格线宽度
            factor: 4      // 主次网格线间隔
          }
        ]
      },
      autoResize: true,
      panning: true,
      background: {
        color: '#ffffff'
      },
      mousewheel: {
        enabled: true,
        zoomAtMousePosition: true,
        modifiers: 'ctrl',
        minScale: 0.5,
        maxScale: 3,
        maxScale: 2
      },
      connecting: {
        router: 'manhattan',
        connector: {
          name: 'rounded',
          args: {
            radius: 8,
          },
            radius: 8
          }
        },
        anchor: 'center',
        connectionPoint: 'anchor',
        allowBlank: false,
        snap: {
          radius: 20,
          radius: 20
        },
        createEdge() {
          return new Shape.Edge({
@@ -144,16 +387,16 @@
                targetMarker: {
                  name: 'block',
                  width: 12,
                  height: 8,
                },
              },
                  height: 8
                }
              }
            },
            zIndex: 0,
            zIndex: 0
          })
        },
        validateConnection({ targetMagnet }) {
          return !!targetMagnet
        },
        }
      },
      highlighting: {
        magnetAdsorbed: {
@@ -161,63 +404,53 @@
          args: {
            attrs: {
              fill: '#5F95FF',
              stroke: '#5F95FF',
            },
          },
        },
      },
              stroke: '#5F95FF'
            }
          }
        }
      }
    })
    // #endregion

    // #region 使用插件
    graph
      .use(
        new Transform({
          resizing: true,
          rotating: true,
        }),
      )
      .use(
        new Selection({
          rubberband: true,
          showNodeSelectionBox: true,
        }),
      )
      .use(new Transform({
        resizing: true,
        rotating: true
      }))
      .use(new Selection())
      .use(new Snapline())
      .use(new Keyboard())
      .use(new Clipboard())
      .use(new History())
    // #endregion

    // #region 初始化 stencil
    const stencil = new Stencil({
      title: '流程图',
      target: graph,
      stencilGraphWidth: 200,
      stencilGraphWidth: 180,
      stencilGraphHeight: 180,
      // collapsable: true,
      groups: [
        {
          title: '通用节点',
          name: 'group1',
          name: 'group1'
        },
        {
          title: '系统设计图',
          title: '自定义',
          name: 'group2',
          graphHeight: 250,
          graphHeight: 120,
          layoutOptions: {
            rowHeight: 70,
          },
        },
            rowHeight: 70
          }
        }
      ],
      layoutOptions: {
        columns: 2,
        columnWidth: 80,
        rowHeight: 55,
      },
        rowHeight: 55
      }
    })

    document.getElementById(card.uuid + 'stencil').appendChild(stencil.container)
    // #endregion

    // #region 快捷键与事件
    graph.bindKey(['meta+c', 'ctrl+c'], () => {
@@ -274,18 +507,18 @@
    })

    // zoom
    graph.bindKey(['ctrl+1', 'meta+1'], () => {
      const zoom = graph.zoom()
      if (zoom < 1.5) {
        graph.zoom(0.1)
      }
    })
    graph.bindKey(['ctrl+2', 'meta+2'], () => {
      const zoom = graph.zoom()
      if (zoom > 0.5) {
        graph.zoom(-0.1)
      }
    })
    // graph.bindKey(['ctrl+1', 'meta+1'], () => {
    //   const zoom = graph.zoom()
    //   if (zoom < 1.5) {
    //     graph.zoom(0.1)
    //   }
    // })
    // graph.bindKey(['ctrl+2', 'meta+2'], () => {
    //   const zoom = graph.zoom()
    //   if (zoom > 0.5) {
    //     graph.zoom(-0.1)
    //   }
    // })

    // 控制连接桩显示/隐藏
    const showPorts = (ports, show) => {
@@ -303,300 +536,153 @@
      const ports = container.querySelectorAll('.x6-port-body')
      showPorts(ports, false)
    })
    // #endregion

    // #region 初始化图形
    const ports = {
      groups: {
        top: {
          position: 'top',
          attrs: {
            circle: {
              r: 4,
              magnet: true,
              stroke: '#5F95FF',
              strokeWidth: 1,
              fill: '#fff',
              style: {
                visibility: 'hidden',
              },
            },
          },
        },
        right: {
          position: 'right',
          attrs: {
            circle: {
              r: 4,
              magnet: true,
              stroke: '#5F95FF',
              strokeWidth: 1,
              fill: '#fff',
              style: {
                visibility: 'hidden',
              },
            },
          },
        },
        bottom: {
          position: 'bottom',
          attrs: {
            circle: {
              r: 4,
              magnet: true,
              stroke: '#5F95FF',
              strokeWidth: 1,
              fill: '#fff',
              style: {
                visibility: 'hidden',
              },
            },
          },
        },
        left: {
          position: 'left',
          attrs: {
            circle: {
              r: 4,
              magnet: true,
              stroke: '#5F95FF',
              strokeWidth: 1,
              fill: '#fff',
              style: {
                visibility: 'hidden',
              },
            },
          },
        },
      },
      items: [
        {
          group: 'top',
        },
        {
          group: 'right',
        },
        {
          group: 'bottom',
        },
        {
          group: 'left',
        },
      ],
    }

    Graph.registerNode(
      'custom-rect',
      {
        inherit: 'rect',
        width: 66,
        height: 36,
        attrs: {
          body: {
            strokeWidth: 1,
            stroke: '#5F95FF',
            fill: '#EFF4FF',
          },
          text: {
            fontSize: 12,
            fill: '#262626',
          },
        },
        ports: { ...ports },
      },
      true,
    )

    Graph.registerNode(
      'custom-polygon',
      {
        inherit: 'polygon',
        width: 66,
        height: 36,
        attrs: {
          body: {
            strokeWidth: 1,
            stroke: '#5F95FF',
            fill: '#EFF4FF',
          },
          text: {
            fontSize: 12,
            fill: '#262626',
          },
        },
        ports: {
          ...ports,
          items: [
            {
              group: 'top',
            },
            {
              group: 'bottom',
            },
          ],
        },
      },
      true,
    )

    Graph.registerNode(
      'custom-circle',
      {
        inherit: 'circle',
        width: 45,
        height: 45,
        attrs: {
          body: {
            strokeWidth: 1,
            stroke: '#5F95FF',
            fill: '#EFF4FF',
          },
          text: {
            fontSize: 12,
            fill: '#262626',
          },
        },
        ports: { ...ports },
      },
      true,
    )

    Graph.registerNode(
      'custom-image',
      {
        inherit: 'rect',
        width: 52,
        height: 52,
        markup: [
          {
            tagName: 'rect',
            selector: 'body',
          },
          {
            tagName: 'image',
          },
          {
            tagName: 'text',
            selector: 'label',
          },
        ],
        attrs: {
          body: {
            stroke: '#5F95FF',
            fill: '#5F95FF',
          },
          image: {
            width: 26,
            height: 26,
            refX: 13,
            refY: 16,
          },
          label: {
            refX: 3,
            refY: 2,
            textAnchor: 'left',
            textVerticalAnchor: 'top',
            fontSize: 12,
            fill: '#fff',
          },
        },
        ports: { ...ports },
      },
      true,
    )

    // graph.on('cell:click', ({ e, x, y, cell, view }) => {
    //   cell.attr('body/stroke', "red")
    // })
    graph.on('node:click', ({ e, x, y, node, view }) => {
      this.selectNode = node
      
      this.setState({node: this.selectNode.store.data})
    })
    graph.on('edge:click', ({ e, x, y, edge, view }) => {
      this.selectNode = edge
      
      this.setState({node: this.selectNode.store.data})
      
      let trans = document.querySelectorAll('.x6-widget-transform')
      if (trans && trans[0]) {
        trans[0].style.display = 'none'
      }
    })
    graph.on('blank:click', ({ e, x, y }) => {
      this.selectNode = null
      
      this.setState({node: null})
    })
    
    const r1 = graph.createNode({
      shape: 'custom-rect',
      shape: 'mk-rect',
      label: '开始',
      attrs: {
        body: {
          rx: 20,
          ry: 26,
        },
      },
          ry: 26
        }
      }
    })
    const r2 = graph.createNode({
      shape: 'custom-rect',
      label: '过程',
      shape: 'mk-rect',
      label: '过程'
    })
    const r3 = graph.createNode({
      shape: 'custom-rect',
      shape: 'mk-rect',
      attrs: {
        body: {
          rx: 6,
          ry: 6,
        },
          ry: 6
        }
      },
      label: '可选过程',
      label: '可选过程'
    })
    const r4 = graph.createNode({
      shape: 'custom-polygon',
      shape: 'mk-polygon',
      attrs: {
        body: {
          refPoints: '0,10 10,0 20,10 10,20',
        },
          refPoints: '0,10 10,0 20,10 10,20'
        }
      },
      label: '决策',
      label: '决策'
    })
    const r5 = graph.createNode({
      shape: 'custom-polygon',
      shape: 'mk-polygon',
      attrs: {
        body: {
          refPoints: '10,0 40,0 30,20 0,20',
        },
          refPoints: '10,0 40,0 30,20 0,20'
        }
      },
      label: '数据',
      label: '数据'
    })
    const r6 = graph.createNode({
      shape: 'custom-circle',
      label: '连接',
      shape: 'mk-circle',
      label: '连接'
    })
    
    stencil.load([r1, r2, r3, r4, r5, r6], 'group1')
    
    const p1 = graph.createNode({
      shape: 'mk-ellipse',
      label: 'ellipse'
    })
    const p2 = graph.createNode({
      shape: 'mk-star',
      label: ''
    })
    
    stencil.load([p1, p2], 'group2')
    
    this.mkGraph = graph
  }
  
  setTop = () => {
    if (!this.selectNode) {
      message.warning('请选择节点！')
      return
    }
    this.selectNode.toFront()
  }

    const imageShapes = [
      {
        label: 'Client',
        image:
          'https://gw.alipayobjects.com/zos/bmw-prod/687b6cb9-4b97-42a6-96d0-34b3099133ac.svg',
      },
      {
        label: 'Http',
        image:
          'https://gw.alipayobjects.com/zos/bmw-prod/dc1ced06-417d-466f-927b-b4a4d3265791.svg',
      },
      {
        label: 'Api',
        image:
          'https://gw.alipayobjects.com/zos/bmw-prod/c55d7ae1-8d20-4585-bd8f-ca23653a4489.svg',
      },
      {
        label: 'Sql',
        image:
          'https://gw.alipayobjects.com/zos/bmw-prod/6eb71764-18ed-4149-b868-53ad1542c405.svg',
      },
      {
        label: 'Clound',
        image:
          'https://gw.alipayobjects.com/zos/bmw-prod/c36fe7cb-dc24-4854-aeb5-88d8dc36d52e.svg',
      },
      {
        label: 'Mq',
        image:
          'https://gw.alipayobjects.com/zos/bmw-prod/2010ac9f-40e7-49d4-8c4a-4fcf2f83033b.svg',
      },
    ]
    const imageNodes = imageShapes.map((item) =>
      graph.createNode({
        shape: 'custom-image',
        label: item.label,
        attrs: {
          image: {
            'xlink:href': item.image,
          },
        },
      }),
    )
    stencil.load(imageNodes, 'group2')
  setBottom = () => {
    if (!this.selectNode) {
      message.warning('请选择节点！')
      return
    }
    // let cells = this.mkGraph.getCells()
    this.selectNode.toBack()
  }

  setZoomIn = () => {
    const zoom = this.mkGraph.zoom()

    if (zoom < 2) {
      this.mkGraph.zoom(0.1)
    }
  }

  setZoomOut = () => {
    const zoom = this.mkGraph.zoom()

    if (zoom > 0.5) {
      this.mkGraph.zoom(-0.1)
    }
  }

  setZoomInt = () => {
    this.mkGraph.zoomTo(1)
  }

  save = () => {
    // let nodes = this.mkGraph.toJSON()
  }

  changeProps = (value, key) => {
    const { node } = this.state

    if (node.shape === 'edge') {

    } else {
      if (key === 'title') {
        this.selectNode.attr('text/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('text/fontSize', value)
      } else if (key === 'fontFill') {
        this.selectNode.attr('text/fill', value)
      }
    }
  }

  updateComponent = (card) => {
@@ -642,11 +728,11 @@
  }

  render() {
    const { card } = this.state
    const { card, toolunfold, nodeunfold, node } = this.state
    let _style = resetStyle(card.style)

    return (
      <div className="menu-scatter-chart-edit-box" style={_style} onClick={this.clickComponent} id={card.uuid}>
      <div className="menu-x6-chart-edit-box" style={_style} onClick={this.clickComponent} id={card.uuid}>
        <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
          <div className="mk-popover-control">
            <ChartCompileForm config={card} plotchange={this.updateComponent}/>
@@ -659,9 +745,44 @@
          <ToolOutlined/>
        </Popover>
        <NormalHeader config={card} updateComponent={this.updateComponent}/>
        <div className="mk-toolbar">
          <div className="left-tool">
            <Tooltip title="置前">
              <VerticalAlignTopOutlined onClick={this.setTop}/>
            </Tooltip>
            <Tooltip title="置后">
              <VerticalAlignBottomOutlined onClick={this.setBottom}/>
            </Tooltip>
            <Tooltip title="保存">
              <SaveOutlined onClick={this.save}/>
            </Tooltip>
          </div>
          <div className="right-tool">
            <Tooltip title="放大">
              <ZoomInOutlined onClick={this.setZoomIn}/>
            </Tooltip>
            <Tooltip title="缩小">
              <ZoomOutOutlined onClick={this.setZoomOut}/>
            </Tooltip>
            <Tooltip title="1:1">
              <OneToOneOutlined onClick={this.setZoomInt}/>
            </Tooltip>
          </div>
        </div>
        <div className="canvas" style={{width: '100%', minHeight: card.plot.height, height: card.plot.height}} id={card.uuid + 'canvas'}>
          <div id={card.uuid + 'stencil'} className="mk-stencil"></div>
          <div id={card.uuid + 'stencil'} className={'mk-stencil ' + (toolunfold ? '' : 'merge')}>
            <div className="tool-control" onClick={() => this.setState({toolunfold: !toolunfold})}>
              <DoubleLeftOutlined />
            </div>
          </div>
          <div id={card.uuid + 'container'} className="mk-container"></div>
          <div className={'mk-node-edit ' + (nodeunfold ? '' : 'merge')}>
            <div className="tool-control" onClick={() => this.setState({nodeunfold: !nodeunfold})}>
              <DoubleLeftOutlined />
            </div>
            <div className="header">设置</div>
            {!node ? <div className="empty">未选中</div> : <NodeUpdate node={node} onChange={this.changeProps}/>}
          </div>
        </div>
        <div className="component-name">
          <div className="center">

 src/menu/components/chart/antv-X6/index.scss

@@ -1,4 +1,4 @@
.menu-scatter-chart-edit-box {
.menu-x6-chart-edit-box {
  position: relative;
  box-sizing: border-box;
  background: #ffffff;
@@ -6,6 +6,37 @@
  background-repeat: no-repeat;
  background-size: cover;
  
  .mk-toolbar {
    width: 100%;
    height: 40px;
    border: 1px solid #1890ff;

    .left-tool {
      float: left;
      line-height: 40px;
      .anticon {
        margin: 0 10px;
        font-size: 16px;
        cursor: pointer;
      }
    }
    .right-tool {
      float: right;
      line-height: 40px;
      .anticon {
        margin: 0 10px;
        font-size: 16px;
        cursor: pointer;
      }
    }
  }
  .x6-graph-scroller::-webkit-scrollbar {
    display: none;
  }
  .x6-cell.x6-edge.x6-edge-selected path:last-child {
    stroke: #1890ff;
  }

  .canvas {
    margin: 0px;
    letter-spacing: 0px;
@@ -13,11 +44,120 @@

    .mk-stencil {
      width: 180px;
      min-width: 180px;
      height: 100%;
      position: relative;
      z-index: 2;
      border-right: 1px solid #dfe3e8;
      transition: all 0.2s;

      .x6-widget-stencil-title {
        display: none;
      }
      .x6-widget-stencil-content {
        overflow-y: auto;
      }
      .x6-widget-stencil-content::-webkit-scrollbar {
        width: 7px;
      }
      .x6-widget-stencil-content::-webkit-scrollbar-thumb {
        border-radius: 5px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.13);
        background: rgba(0, 0, 0, 0.13);
      }
      .x6-widget-stencil-content::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
        border-radius: 3px;
        border: 1px solid rgba(0, 0, 0, 0.07);
        background: rgba(0, 0, 0, 0);
      }
      .tool-control {
        position: absolute;
        right: -13px;
        top: 5px;
        z-index: 3;
        background: #ffffff;
        width: 25px;
        height: 25px;
        border: 1px solid #d8d8d8;
        border-radius: 30px;
        text-align: center;
        line-height: 25px;
        cursor: pointer;
      }
    }
    .mk-stencil.merge {
      width: 0px;
      min-width: 0px;

      .tool-control {
        right: -25px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        .anticon-double-left {
          transform: rotate(180deg);
        }
      }
    }

    .mk-node-edit {
      width: 180px;
      min-width: 180px;
      height: 100%;
      position: relative;
      z-index: 2;
      border-left: 1px solid #dfe3e8;
      transition: all 0.2s;

      .header {
        width: 100%;
        height: 32px;
        text-align: center;
        line-height: 32px;
        background-color: #f5f5f5!important;
        overflow-x: hidden;
        white-space: nowrap;
      }
      .empty {
        width: 100%;
        text-align: center;
        padding-top: 20px;
        overflow-x: hidden;
        white-space: nowrap;
      }

      .tool-control {
        position: absolute;
        left: -13px;
        top: 5px;
        z-index: 3;
        background: #ffffff;
        width: 25px;
        height: 25px;
        border: 1px solid #d8d8d8;
        border-radius: 30px;
        text-align: center;
        line-height: 25px;
        cursor: pointer;
        .anticon-double-left {
          transform: rotate(180deg);
        }
      }
    }
    .mk-node-edit.merge {
      width: 0px;
      min-width: 0px;

      .tool-control {
        left: -25px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        .anticon-double-left {
          transform: rotate(0deg);
        }
      }
    }

    .mk-container {
      width: calc(100% - 180px);
      height: 100%;
@@ -29,7 +169,7 @@
      background-color: #fff;
    }
    .x6-widget-stencil-group-title {
      background-color: #fff !important;
      background-color: #f5f5f5!important;
    }
    .x6-widget-transform {
      margin: -1px 0 0 -1px;
@@ -87,7 +227,7 @@
    background: rgba(255, 255, 255, 0.55);
  }
}
.menu-scatter-chart-edit-box:hover {
.menu-x6-chart-edit-box:hover {
  z-index: 1;
  box-shadow: 0px 0px 4px #1890ff;
}

 src/menu/components/chart/antv-X6/nodeupdate/index.jsx

New file
@@ -0,0 +1,243 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Form, Row, Col, Input, Select, InputNumber } from 'antd'

import ColorSketch from '@/mob/colorsketch'

import './index.scss'

class NodeUpdate extends Component {
  static propTpyes = {
    node: PropTypes.object
  }

  state = {
    formlist: null
  }

  UNSAFE_componentWillMount () {
    this.setState({
      formlist: this.getFormList(this.props.node)
    })
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (!is(fromJS(this.props.node), fromJS(nextProps.node))) {
      this.setState({
        formlist: null
      }, () => {
        this.setState({
          formlist: this.getFormList(nextProps.node)
        })
      })
    }
  }

  getFormList = (node) => {
    let roleList = sessionStorage.getItem('sysRoles')
    if (roleList) {
      try {
        roleList = JSON.parse(roleList)
      } catch (e) {
        roleList = []
      }
    } else {
      roleList = []
    }

    let title = ''
    if (node.attrs && node.attrs.text) {
      title = node.attrs.text.text || ''
    }

    let fontSize = ''
    if (node.attrs && node.attrs.text) {
      fontSize = node.attrs.text.fontSize || 12
    }

    let fontFill = ''
    if (node.attrs && node.attrs.text) {
      fontFill = node.attrs.text.fill || '#262626'
    }

    let stroke = ''

    if (node.attrs && node.attrs.body) {
      stroke = node.attrs.body.stroke || ''
    }
    let fill = ''

    if (node.attrs && node.attrs.body) {
      fill = node.attrs.body.fill || ''
    }

    if (node.shape === 'edge') {
      return [
        {
          type: 'text',
          field: 'title',
          label: '标签',
          initval: title
        },
        {
          type: 'color',
          field: 'fill',
          label: '背景',
          initval: fill
        },
        {
          type: 'color',
          field: 'stroke',
          label: '边框',
          initval: stroke
        },
        {
          type: 'number',
          field: 'fontSize',
          label: '字号',
          initval: fontSize
        },
        {
          type: 'color',
          field: 'fontFill',
          label: '颜色',
          initval: fontFill
        }
      ]
    } else {
      return [
        {
          type: 'title',
          label: '内容'
        },
        {
          type: 'text',
          field: 'title',
          label: '标签',
          initval: title
        },
        {
          type: 'title',
          label: '样式'
        },
        {
          type: 'color',
          field: 'fill',
          label: '背景',
          initval: fill
        },
        {
          type: 'color',
          field: 'stroke',
          label: '边框',
          initval: stroke
        },
        {
          type: 'title',
          label: '标签样式'
        },
        {
          type: 'number',
          field: 'fontSize',
          label: '字号',
          initval: fontSize
        },
        {
          type: 'color',
          field: 'fontFill',
          label: '颜色',
          initval: fontFill
        }
      ]
    }
  }

  change = (value, key) => {
    if (key === 'title') {
      
    } else if (key === 'fill') {

    } else if (key === 'stroke') {

    } else if (key === 'fontSize') {
      if (typeof(value) !== 'number' || value < 0) {
        return
      }
    } else if (key === 'fontFill') {
 
    }

    this.props.onChange(value, key)
  }

  getFields() {
    const { formlist } = this.state
    const fields = []

    if (!formlist) return

    formlist.forEach((item, index) => {
      if (item.type === 'title') {
        fields.push(
          <Col span={24} key={index}>
            <span className="split-line">{item.label}</span>
          </Col>
        )
      } else if (item.type === 'text') {
        fields.push(
          <Col span={24} key={index}>
            <Form.Item label={item.label}>
              <Input defaultValue={item.initval} placeholder="" autoComplete="off" onChange={(e) => this.change(e.target.value, item.field)} />
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'number') {
        fields.push(
          <Col span={24} key={index}>
            <Form.Item label={item.label}>
              <InputNumber defaultValue={item.initval} precision={0} min={0} onChange={(value) => this.change(value, item.field)} />
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'select') {
        fields.push(
          <Col span={24} key={index}>
            <Form.Item label={item.label}>
              <Select
                showSearch
                filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                onChange={(value) => {this.change(value, item.field)}}
              >
                {item.options.map(option =>
                  <Select.Option id={option.MenuID} title={option.text} key={option.MenuID} value={option.MenuID}>
                    {option.text}
                  </Select.Option>
                )}
              </Select>
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'color') {
        fields.push(
          <Col span={24} key={index}>
            <Form.Item label={item.label}>
              <ColorSketch defaultValue={item.initval} onChange={(value) => this.change(value, item.field)}/>
            </Form.Item>
          </Col>
        )
      }
    })
    return fields
  }

  render() {
    return (
      <Form className="node-edit-form">
        <Row>{this.getFields()}</Row>
      </Form>
    )
  }
}

export default NodeUpdate

 src/menu/components/chart/antv-X6/nodeupdate/index.scss

New file
@@ -0,0 +1,64 @@
.node-edit-form {
  padding-top: 10px;
  .split-line {
    display: block;
    border-bottom: 1px solid #d9d9d9;
    margin: 5px 12px 10px;
    padding-bottom: 2px;
    font-size: 13px;
  }
  .ant-form-item {
    display: flex;
    margin-bottom: 10px;

    .ant-form-item-label {
      width: 40px;
      line-height: 24px;
      label {
        color: rgba(0,0,0,0.45);
        font-size: 13px;
      }
      label::after {
        display: none;
      }
    }
    .ant-form-item-control-wrapper {
      padding: 0 8px;
      flex: 1;
      .ant-form-item-control {
        line-height: 24px;
      }
      .ant-input {
        height: 24px;
        padding: 0px 4px;
        font-size: 13px;
        line-height: 24px;
        border-radius: 0px;
      }
      .ant-input-number {
        height: 24px;
        border-radius: 0px;
        .ant-input-number-input {
          height: 22px;
          padding: 2px 4px;
          font-size: 13px;
        }
      }

      .color-sketch-block {
        height: 22px;
        margin-top: 2px;
        .color-sketch-block-box {
          width: 22px;
          height: 22px;
        }
        .color-sketch-value {
          display: none;
        }
        .color-sketch-block-inner {
          border-radius: 0px;
        }
      }
    }
  }
}

 src/menu/components/share/actioncomponent/actionform/index.jsx

@@ -12,6 +12,7 @@
const { TextArea } = Input
const { Paragraph } = Typography
const MkEditIcon = asyncComponent(() => import('@/components/mkIcon'))
const MKTable = asyncComponent(() => import('@/components/normalform/modalform/mkTable'))
const acTyOptions = {
  pop: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'swipe', 'icon', 'class', 'color', 'execSuccess', 'execError', 'syncComponent', 'switchTab', 'anchors', 'width', 'openmenu', 'refreshTab', 'position', 'tipTitle', 'hidden'],
  prompt: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'swipe', 'icon', 'class', 'color', 'execSuccess', 'execError', 'syncComponent', 'switchTab', 'anchors', 'width', 'openmenu', 'refreshTab', 'position', 'tipTitle', 'hidden'],
@@ -92,6 +93,8 @@

    let hasclass = true
    this.props.formlist.forEach(item => {
      if (!item.key) return

      this.record[item.key] = item.initVal

      if (item.key === 'class') {
@@ -520,6 +523,10 @@
      }
    }

    if (shows.includes('syncComponent') && this.record.syncComponent[0] === 'multiComponent') {
      shows.push('syncComponents')
    }

    if (this.record.show === 'icon') {
      reRequired.icon = true
    } else {
@@ -858,7 +865,14 @@
          { required: item.required, message: '请选择' + item.label + '!' }
        ]

        content = <Cascader options={item.options || []} expandTrigger="hover" placeholder=""/>
        content = <Cascader onChange={(value) => {this.optionChange(item.key, value)}} options={item.options || []} expandTrigger="hover" placeholder=""/>
      } else if (item.type === 'table') {
        span = 24
        className = 'textarea'
        rules = [
          { required: item.required, message: '请添加' + item.label + '!' }
        ]
        content = (<MKTable tip={''} columns={item.columns || []} actions={[]}/>)
      } else if (item.type === 'icon') {
        rules = [
          { required: item.required, message: '请选择' + item.label + '!' }
@@ -1041,7 +1055,7 @@
              }
            })
          }
          

          resolve(values)
        } else {
          reject(err)

 src/menu/components/share/actioncomponent/formconfig.jsx

@@ -749,7 +749,7 @@
      initVal: card.syncComponent || [],
      tooltip: '执行成功后（或弹窗标签关闭时），需要同步刷新的组件。注：选择当前组件的上级组件无效，刷新上级组件请选择成功后“刷新上级组件 - 行”。',
      required: false,
      options: modules
      options: modules.length ? [...modules, {value: 'multiComponent', label: '多组件'}] : []
    },
    {
      type: 'radio',
@@ -1168,6 +1168,27 @@
        value: 'progressbar',
        text: '进度条'
      }]
    },
    {
      type: 'table',
      key: 'syncComponents',
      label: '组件列表',
      initVal: card.syncComponents || [],
      required: true,
      actions: [],
      columns: [
        {
          title: '组件',
          dataIndex: 'syncComId',
          inputType: 'cascader',
          editable: true,
          required: true,
          extends: [{key: 'label', value: 'label'}],
          width: '70%',
          render: (text, record) => record.label,
          options: modules
        }
      ]
    }
  ]

@@ -1704,7 +1725,7 @@
      initVal: card.syncComponent || [],
      tooltip: '执行成功后（或弹窗标签关闭时），需要同步刷新的组件。注：选择当前组件的上级组件无效，刷新上级组件请选择成功后“刷新上级组件 - 行”。',
      required: false,
      options: modules
      options: modules.length ? [...modules, {value: 'multiComponent', label: '多组件'}] : []
    },
    {
      type: 'radio',
@@ -1931,6 +1952,27 @@
        value: 'progressbar',
        text: '进度条'
      }]
    },
    {
      type: 'table',
      key: 'syncComponents',
      label: '组件列表',
      initVal: card.syncComponents || [],
      required: true,
      actions: [],
      columns: [
        {
          title: '组件',
          dataIndex: 'syncComId',
          inputType: 'cascader',
          editable: true,
          required: true,
          extends: [{key: 'label', value: 'label'}],
          width: '70%',
          render: (text, record) => record.label,
          options: modules
        }
      ]
    }
  ]


 src/menu/datasource/verifycard/index.jsx

@@ -64,6 +64,7 @@
        inputType: 'input',
        editable: true,
        unique: true,
        strict: true,
        copy: true,
        rules: [{
          pattern: /^[\u4E00-\u9FA50-9a-zA-Z_]*$/ig,

 src/menu/menushell/card.jsx

@@ -133,13 +133,13 @@
    }
  }

  // if (card.type === 'antvX6') { // 测试
  //   return (
  //     <div className={'ant-col mk-component-card ant-col-' + (card.width || 24)} style={style}>
  //       <AntvX6 card={card} updateConfig={updateConfig} deletecomponent={delCard}/>
  //     </div>
  //   )
  // }
  if (card.type === 'antvX6') { // 测试
    return (
      <div className={'ant-col mk-component-card ant-col-' + (card.width || 24)} style={style}>
        <AntvX6 card={card} updateConfig={updateConfig} deletecomponent={delCard}/>
      </div>
    )
  }

  return (
    <div className={'ant-col mk-component-card ant-col-' + (card.width || 24)} ref={node => drag(drop(node))} style={style}>

 src/menu/stylecontroller/index.jsx

@@ -1,7 +1,7 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Collapse, Form, Col, InputNumber, Input, Select, Radio, Drawer, Button } from 'antd'
import { Collapse, Form, Col, InputNumber, Input, Select, Radio, Drawer, Button, message } from 'antd'
import {
  ColumnHeightOutlined,
  FontSizeOutlined,
@@ -29,7 +29,7 @@
  ArrowLeftOutlined,
  ArrowRightOutlined,
  SwapOutlined,
  EnterOutlined,
  EnterOutlined
} from '@ant-design/icons'

import MKEmitter from '@/utils/events.js'
@@ -42,6 +42,7 @@
const { Panel } = Collapse
const { Option } = Select
const ColorSketch = asyncComponent(() => import('@/mob/colorsketch'))
const PasteBoard = asyncComponent(() => import('@/components/pasteboard'))
const SourceComponent = asyncComponent(() => import('@/menu/components/share/sourcecomponent'))

class MobController extends Component {
@@ -453,6 +454,77 @@
    this.updateStyle({[type]: val})
  }

  copy = () => {
    const { card, options } = this.state

    let msg = { copyType: 'style' }

    msg.data = card
    msg.options = options

    try {
      msg = window.btoa(window.encodeURIComponent(JSON.stringify(msg)))
    } catch (e) {
      console.warn('Stringify Failure')
      msg = ''
    }

    if (msg) {
      let oInput = document.createElement('input')
      oInput.value = msg
      document.body.appendChild(oInput)
      oInput.select()
      document.execCommand('Copy')
      document.body.removeChild(oInput)
      message.success('复制成功。')
    }
  }

  paste = (res, callback) => {
    const { options } = this.state

    if (res.copyType !== 'style') {
      message.warning('配置信息格式错误！', 5)
      return
    } else if (JSON.stringify(res.options) !== JSON.stringify(options)) {
      message.warning('样式选项不一致，不可粘贴！', 5)
      return
    }

    let style = res.data || {}

    let backgroundImage = ''
    if (style.backgroundImage && /^url/ig.test(style.backgroundImage)) {
      backgroundImage = style.backgroundImage.replace(/^url\(/ig, '').replace(/\)$/ig, '')
    }

    let borposition = 'outer'

    if (!style.borderWidth) {
      if (style.borderLeftWidth) {
        borposition = 'left'
      } else if (style.borderRightWidth) {
        borposition = 'right'
      } else if (style.borderTopWidth) {
        borposition = 'top'
      } else if (style.borderBottomWidth) {
        borposition = 'bottom'
      }
    }

    this.setState({
      card: style,
      borposition,
      backgroundImage
    })

    this.callback && this.callback(style)

    callback()

    message.success('粘贴成功。')
  }

  render () {
    const { card, options, backgroundImage, borposition, fonts, type } = this.state
    const formItemLayout = {
@@ -561,7 +633,7 @@
                    label={<FontColorsOutlined title="字体颜色"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <ColorSketch value={card.color || 'rgba(0, 0, 0, 0.85)'} onChange={this.changeFontColor} />
                    <ColorSketch value={card.color || ''} onChange={this.changeFontColor} />
                  </Form.Item>
                  <Form.Item
                    colon={false}
@@ -771,11 +843,11 @@
                    label={<BgColorsOutlined title="边框颜色"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    {borposition === 'outer' ? <ColorSketch value={card.borderColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'left' ? <ColorSketch value={card.borderLeftColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'right' ? <ColorSketch value={card.borderRightColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'top' ? <ColorSketch value={card.borderTopColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'bottom' ? <ColorSketch value={card.borderBottomColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'outer' ? <ColorSketch value={card.borderColor || ''} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'left' ? <ColorSketch value={card.borderLeftColor || ''} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'right' ? <ColorSketch value={card.borderRightColor || ''} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'top' ? <ColorSketch value={card.borderTopColor || ''} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'bottom' ? <ColorSketch value={card.borderBottomColor || ''} onChange={this.changeBorderColor} /> : null}
                  </Form.Item>
                  <Form.Item
                    colon={false}
@@ -802,7 +874,7 @@
                    label={<BgColorsOutlined title="阴影颜色"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <ColorSketch value={card.shadowColor || 'transparent'} onChange={this.changeShadowColor} />
                    <ColorSketch value={card.shadowColor || ''} onChange={this.changeShadowColor} />
                  </Form.Item>
                  <Form.Item
                    colon={false}
@@ -972,8 +1044,12 @@
              </Panel> : null}
            </Collapse> : null}
          </Form>
          <div style={{textAlign: 'right'}}>
            <Button style={{margin: '30px 10px 30px 0px'}} onClick={this.onCloseDrawer}>关闭</Button>
          <div style={{textAlign: 'right', lineHeight: '60px', marginBottom: '30px'}}>
            <div style={{float: 'left'}}>
              <Button onClick={() => this.copy()} className="mk-border-green" style={{marginRight: '10px'}}>复制</Button>
              <PasteBoard getPasteValue={this.paste}><Button style={{borderColor: 'rgb(64, 169, 255)', color: 'rgb(64, 169, 255)'}}>粘贴</Button></PasteBoard>
            </div>
            <Button style={{marginRight: '10px'}} onClick={this.onCloseDrawer}>关闭</Button>
          </div>
        </div>
      </Drawer>

 src/mob/colorsketch/index.jsx

@@ -140,7 +140,7 @@
            <div className="color-sketch-block-inner" style={ {background: color} }></div>
          </div>
        </Popover>
        <div className="color-sketch-value">{color}{allowClear && color ? <CloseCircleFilled onClick={this.clear}/> : null}</div>
        <div className="color-sketch-value">{color || <span style={{color: '#ff4d4f'}}>无</span>}{allowClear && color ? <CloseCircleFilled onClick={this.clear}/> : null}</div>
      </div>
    )
  }

 src/tabviews/basetable/index.jsx

@@ -348,10 +348,29 @@
                cell.$MenuID = this.props.MenuID
                cell.$view = 'popview'

                if (cell.syncComponentId && cell.syncComponentId === item.setting.supModule) {
                  cell.syncComponentId = ''
                  if (cell.execSuccess === 'line' || cell.execSuccess === 'grid') {
                    cell.execSuccess = 'mainline'
                if (cell.syncComponentId) {
                  if (cell.syncComponentId === item.setting.supModule) {
                    cell.syncComponentId = ''
                    if (cell.execSuccess === 'line' || cell.execSuccess === 'grid') {
                      cell.execSuccess = 'mainline'
                    }
                  } else if (cell.syncComponentId === 'multiComponent') {
                    let ids = cell.syncComponents.map(m => {
                      return m.syncComId.pop() || ''
                    })
            
                    if (item.setting.supModule && ids.includes(item.setting.supModule)) {
                      if (cell.execSuccess === 'line' || cell.execSuccess === 'grid') {
                        cell.execSuccess = 'mainline'
                      }
                      ids = ids.filter(id => id !== item.setting.supModule)
                    }
                    
                    if (ids.length === 0) {
                      cell.syncComponentId = ''
                    } else {
                      cell.syncComponentIds = ids
                    }
                  }
                }

@@ -414,10 +433,29 @@
          cell.$view = 'popview'
          cell.$toolbtn = true

          if (cell.syncComponentId && cell.syncComponentId === item.setting.supModule) {
            cell.syncComponentId = ''
            if (cell.execSuccess === 'line' || cell.execSuccess === 'grid') {
              cell.execSuccess = 'mainline'
          if (cell.syncComponentId) {
            if (cell.syncComponentId === item.setting.supModule) {
              cell.syncComponentId = ''
              if (cell.execSuccess === 'line' || cell.execSuccess === 'grid') {
                cell.execSuccess = 'mainline'
              }
            } else if (cell.syncComponentId === 'multiComponent') {
              let ids = cell.syncComponents.map(m => {
                return m.syncComId.pop() || ''
              })
      
              if (item.setting.supModule && ids.includes(item.setting.supModule)) {
                if (cell.execSuccess === 'line' || cell.execSuccess === 'grid') {
                  cell.execSuccess = 'mainline'
                }
                ids = ids.filter(id => id !== item.setting.supModule)
              }
              
              if (ids.length === 0) {
                cell.syncComponentId = ''
              } else {
                cell.syncComponentIds = ids
              }
            }
          }


 src/tabviews/custom/index.jsx

@@ -473,9 +473,7 @@
        item.search = Utils.initSearchVal(item.search)
      }

      let mutil = false
      if (item.wrap && item.wrap.supType === 'multi') { // 数据卡多上级组件
        mutil = true
        item.setting.supModule = item.supNodes[0].componentId
      } else if (item.setting && item.setting.supModule && typeof(item.setting.supModule) !== 'string') {
        let pid = item.setting.supModule.pop()
@@ -500,13 +498,6 @@
          cell = this.resetButton(item, cell, popview)

          cell.$toolbtn = true

          if (!mutil && cell.syncComponentId && cell.syncComponentId === item.setting.supModule) {
            cell.syncComponentId = ''
            if (cell.execSuccess === 'line' || cell.execSuccess === 'grid') {
              cell.execSuccess = 'mainline'
            }
          }

          if (cell.OpenType === 'funcbutton' && cell.funcType === 'print' && cell.verify) { // 打印机设置
            cell = this.getPrinter(cell, item.uuid)
@@ -553,13 +544,6 @@
                  if (cell.hidden === 'true') return false

                  cell = this.resetButton(item, cell, popview)

                  if (cell.syncComponentId && cell.syncComponentId === item.setting.supModule) {
                    cell.syncComponentId = ''
                    if (cell.execSuccess === 'line' || cell.execSuccess === 'grid') {
                      cell.execSuccess = 'mainline'
                    }
                  }

                  if (cell.OpenType === 'funcbutton' && cell.funcType === 'print' && cell.verify) { // 打印机设置
                    cell = this.getPrinter(cell, item.uuid)
@@ -618,13 +602,6 @@

              cell = this.resetButton(item, cell, popview)

              if (!mutil && cell.syncComponentId && cell.syncComponentId === item.setting.supModule) {
                cell.syncComponentId = ''
                if (cell.execSuccess === 'line' || cell.execSuccess === 'grid') {
                  cell.execSuccess = 'mainline'
                }
              }

              if (cell.OpenType === 'funcbutton' && cell.funcType === 'print' && cell.verify) { // 打印机设置
                cell = this.getPrinter(cell, item.uuid)
              }
@@ -642,13 +619,6 @@
              if (cell.hidden === 'true') return false

              cell = this.resetButton(item, cell, popview)

              if (!mutil && cell.syncComponentId && cell.syncComponentId === item.setting.supModule) {
                cell.syncComponentId = ''
                if (cell.execSuccess === 'line' || cell.execSuccess === 'grid') {
                  cell.execSuccess = 'mainline'
                }
              }

              if (cell.OpenType === 'funcbutton' && cell.funcType === 'print' && cell.verify) { // 打印机设置
                cell = this.getPrinter(cell, item.uuid)
@@ -673,13 +643,6 @@
            if (cell.hidden === 'true') return false

            cell = this.resetButton(item, cell, popview)

            if (cell.syncComponentId && cell.syncComponentId === item.wrap.supModule) {
              cell.syncComponentId = ''
              if (cell.execSuccess === 'line' || cell.execSuccess === 'grid') {
                cell.execSuccess = 'mainline'
              }
            }

            if (cell.OpenType === 'funcbutton' && cell.funcType === 'print' && cell.verify) { // 打印机设置
              cell = this.getPrinter(cell, item.uuid)
@@ -805,6 +768,32 @@
      }
    }

    if (cell.syncComponentId) {
      if (cell.syncComponentId === item.setting.supModule) {
        cell.syncComponentId = ''
        if (cell.execSuccess === 'line' || cell.execSuccess === 'grid') {
          cell.execSuccess = 'mainline'
        }
      } else if (cell.syncComponentId === 'multiComponent') {
        let ids = cell.syncComponents.map(m => {
          return m.syncComId.pop() || ''
        })

        if (item.setting.supModule && ids.includes(item.setting.supModule)) {
          if (cell.execSuccess === 'line' || cell.execSuccess === 'grid') {
            cell.execSuccess = 'mainline'
          }
          ids = ids.filter(id => id !== item.setting.supModule)
        }
        
        if (ids.length === 0) {
          cell.syncComponentId = ''
        } else {
          cell.syncComponentIds = ids
        }
      }
    }

    return cell
  }


 src/tabviews/custom/popview/index.jsx

@@ -302,9 +302,7 @@
        item.search = Utils.initSearchVal(item.search)
      }

      let mutil = false
      if (item.wrap && item.wrap.supType === 'multi') { // 数据卡多上级组件
        mutil = true
        item.setting.supModule = item.supNodes[0].componentId
      } else if (item.setting && item.setting.supModule && typeof(item.setting.supModule) !== 'string') {
        let pid = item.setting.supModule.pop()
@@ -322,13 +320,6 @@

          cell = this.resetButton(item, cell, Tab)
          cell.$toolbtn = true

          if (!mutil && cell.syncComponentId && cell.syncComponentId === item.setting.supModule) {
            cell.syncComponentId = ''
            if (cell.execSuccess === 'line' || cell.execSuccess === 'grid') {
              cell.execSuccess = 'mainline'
            }
          }

          return true
        })
@@ -371,13 +362,6 @@
                  if (cell.hidden === 'true' || cell.OpenType === 'popview') return false
            
                  cell = this.resetButton(item, cell, Tab)

                  if (cell.syncComponentId && cell.syncComponentId === item.setting.supModule) {
                    cell.syncComponentId = ''
                    if (cell.execSuccess === 'line' || cell.execSuccess === 'grid') {
                      cell.execSuccess = 'mainline'
                    }
                  }
                } else {
                  cell = this.resetElement(cell)
                }
@@ -430,13 +414,6 @@
              if (cell.hidden === 'true' || cell.OpenType === 'popview') return false

              cell = this.resetButton(item, cell, Tab)

              if (!mutil && cell.syncComponentId && cell.syncComponentId === item.setting.supModule) {
                cell.syncComponentId = ''
                if (cell.execSuccess === 'line' || cell.execSuccess === 'grid') {
                  cell.execSuccess = 'mainline'
                }
              }
            } else {
              cell = this.resetElement(cell)
            }
@@ -451,13 +428,6 @@
              if (cell.hidden === 'true' || cell.OpenType === 'popview') return false

              cell = this.resetButton(item, cell, Tab)

              if (!mutil && cell.syncComponentId && cell.syncComponentId === item.setting.supModule) {
                cell.syncComponentId = ''
                if (cell.execSuccess === 'line' || cell.execSuccess === 'grid') {
                  cell.execSuccess = 'mainline'
                }
              }
            } else {
              cell = this.resetElement(cell)
            }
@@ -478,13 +448,6 @@
            if (cell.hidden === 'true' || cell.OpenType === 'popview') return false

            cell = this.resetButton(item, cell, Tab)

            if (cell.syncComponentId && cell.syncComponentId === item.wrap.supModule) {
              cell.syncComponentId = ''
              if (cell.execSuccess === 'line' || cell.execSuccess === 'grid') {
                cell.execSuccess = 'mainline'
              }
            }
          } else {
            cell = this.resetElement(cell)
          }
@@ -598,6 +561,32 @@
      }
    }

    if (cell.syncComponentId) {
      if (cell.syncComponentId === item.setting.supModule) {
        cell.syncComponentId = ''
        if (cell.execSuccess === 'line' || cell.execSuccess === 'grid') {
          cell.execSuccess = 'mainline'
        }
      } else if (cell.syncComponentId === 'multiComponent') {
        let ids = cell.syncComponents.map(m => {
          return m.syncComId.pop() || ''
        })

        if (item.setting.supModule && ids.includes(item.setting.supModule)) {
          if (cell.execSuccess === 'line' || cell.execSuccess === 'grid') {
            cell.execSuccess = 'mainline'
          }
          ids = ids.filter(id => id !== item.setting.supModule)
        }
        
        if (ids.length === 0) {
          cell.syncComponentId = ''
        } else {
          cell.syncComponentIds = ids
        }
      }
    }

    return cell
  }


 src/tabviews/zshare/actionList/excelInbutton/index.jsx

@@ -199,8 +199,18 @@
      MKEmitter.emit('refreshByButtonResult', btn.$menuId, btn.execSuccess, btn, '', this.state.selines)
    }
    
    btn.syncComponentId && MKEmitter.emit('reloadData', btn.syncComponentId)
    
    if (btn.syncComponentId) {
      if (btn.syncComponentId === 'multiComponent') {
        btn.syncComponentIds.forEach((id, i) => {
          setTimeout(() => {
            MKEmitter.emit('reloadData', id)
          }, 20 * i)
        })
      } else {
        MKEmitter.emit('reloadData', btn.syncComponentId)
      }
    }

    if (btn.switchTab && btn.switchTab.length > 0) {
      let id = btn.switchTab[btn.switchTab.length - 1]
      let node = document.getElementById('tab' + id)

 src/tabviews/zshare/actionList/exceloutbutton/index.jsx

@@ -1118,7 +1118,17 @@
      MKEmitter.emit('refreshByButtonResult', btn.$menuId, btn.execSuccess, btn, '', [])
    }
    
    btn.syncComponentId && MKEmitter.emit('reloadData', btn.syncComponentId)
    if (btn.syncComponentId) {
      if (btn.syncComponentId === 'multiComponent') {
        btn.syncComponentIds.forEach((id, i) => {
          setTimeout(() => {
            MKEmitter.emit('reloadData', id)
          }, 20 * i)
        })
      } else {
        MKEmitter.emit('reloadData', btn.syncComponentId)
      }
    }
    
    if (btn.switchTab && btn.switchTab.length > 0) {
      let id = btn.switchTab[btn.switchTab.length - 1]

 src/tabviews/zshare/actionList/normalbutton/index.jsx

@@ -2050,7 +2050,17 @@
      MKEmitter.emit('refreshDebugTable')
    }
    
    btn.syncComponentId && MKEmitter.emit('reloadData', btn.syncComponentId)
    if (btn.syncComponentId) {
      if (btn.syncComponentId === 'multiComponent') {
        btn.syncComponentIds.forEach((id, i) => {
          setTimeout(() => {
            MKEmitter.emit('reloadData', id)
          }, 20 * i)
        })
      } else {
        MKEmitter.emit('reloadData', btn.syncComponentId)
      }
    }

    if (tabId) {
      MKEmitter.emit('reloadMenuView', tabId, 'table')

 src/tabviews/zshare/actionList/popupbutton/index.jsx

@@ -222,7 +222,17 @@
      MKEmitter.emit('refreshByButtonResult', btn.$menuId, btn.popClose, btn)
    }

    btn.syncComponentId && MKEmitter.emit('reloadData', btn.syncComponentId)
    if (btn.syncComponentId) {
      if (btn.syncComponentId === 'multiComponent') {
        btn.syncComponentIds.forEach((id, i) => {
          setTimeout(() => {
            MKEmitter.emit('reloadData', id)
          }, 20 * i)
        })
      } else {
        MKEmitter.emit('reloadData', btn.syncComponentId)
      }
    }
  }

  getPop = () => {

 src/templates/zshare/editTable/index.jsx

@@ -3,17 +3,17 @@
import { is, fromJS } from 'immutable'
import { DndProvider, DragSource, DropTarget } from 'react-dnd'
import { Table, Input, InputNumber, Popconfirm, Form, Select, Radio, Cascader, notification, message, Modal, Typography } from 'antd'
import { CopyOutlined, EditOutlined, DeleteOutlined, SnippetsOutlined, SwapOutlined } from '@ant-design/icons'
import { CopyOutlined, EditOutlined, DeleteOutlined, SwapOutlined } from '@ant-design/icons'

import Utils from '@/utils/utils.js'
import ColorSketch from '@/mob/colorsketch'
import PasteForm from '@/templates/zshare/pasteform'
import asyncComponent from '@/utils/asyncComponent'
import CusSwitch from './cusSwitch'
import MKEmitter from '@/utils/events.js'
import './index.scss'

const MkEditIcon = asyncComponent(() => import('@/components/mkIcon'))
const PasteBoard = asyncComponent(() => import('@/components/pasteboard'))
const EditableContext = React.createContext()
const { confirm } = Modal
let dragingIndex = -1
@@ -172,7 +172,6 @@
  state = {
    data: [],
    editingKey: '',
    visible: false,
    editLineId: '',
    columns: []
  }
@@ -196,7 +195,7 @@
          操作
          <span className="copy-control">
            {actions.includes('copy') ? <CopyOutlined title="复制" onClick={() => this.copy()} /> : null}
            {actions.includes('copy') ? <SnippetsOutlined title="粘贴" onClick={this.paste} /> : null}
            {actions.includes('copy') ? <PasteBoard getPasteValue={this.pasteSubmit}/> : null}
            {actions.includes('clear') ? <DeleteOutlined title="清空" onClick={this.clear} /> : null}
          </span>
        </div>),
@@ -352,66 +351,74 @@
    }
  }
  
  paste = () => {
    this.setState({visible: true})
  }
  
  pasteSubmit = () => {
  pasteSubmit = (res, callback) => {
    const { type } = this.props
    const { columns } = this.state
    let data = fromJS(this.state.data).toJS()

    this.pasteFormRef.handleConfirm().then(res => {
      if (res.copyType === 'columns' && type === 'datasourcefield') {
        res.type = 'array'
        res.data = []
        res.columns.forEach(col => {
          if (!col.field) return
          if (col.type === 'number') {
            let datatype = 'Int'
            if (col.decimal) {
              datatype = `Decimal(18,${col.decimal})`
            }

            res.data.push({
              $index: res.data.length + 1,
              datatype: datatype,
              field: col.field,
              decimal: col.decimal,
              label: col.label,
              type: 'number',
              uuid: Utils.getuuid()
            })
          } else {
            let datatype = 'Nvarchar(50)'
            let fieldlength = 50
            if (col.fieldlength && [10, 20, 50, 100, 256, 512, 1024, 2048].includes(col.fieldlength)) {
              fieldlength = col.fieldlength
              datatype = `Nvarchar(${fieldlength})`
            }

            res.data.push({
              $index: res.data.length + 1,
              datatype: datatype,
              field: col.field,
              fieldlength: fieldlength,
              label: col.label,
              type: 'text',
              uuid: Utils.getuuid()
            })
    if (res.copyType === 'columns' && type === 'datasourcefield') {
      res.type = 'array'
      res.data = []
      res.columns.forEach(col => {
        if (!col.field) return
        if (col.type === 'number') {
          let datatype = 'Int'
          if (col.decimal) {
            datatype = `Decimal(18,${col.decimal})`
          }
        })
      } else if (res.key !== type) {
        message.warning('配置信息格式错误！')
        return
      }

      if (res.type === 'line') {
        let unique = true
        res.data.uuid = Utils.getuuid()
        columns.forEach(col => {
          if (col.unique !== true || !unique) return
          res.data.push({
            $index: res.data.length + 1,
            datatype: datatype,
            field: col.field,
            decimal: col.decimal,
            label: col.label,
            type: 'number',
            uuid: Utils.getuuid()
          })
        } else {
          let datatype = 'Nvarchar(50)'
          let fieldlength = 50
          if (col.fieldlength && [10, 20, 50, 100, 256, 512, 1024, 2048].includes(col.fieldlength)) {
            fieldlength = col.fieldlength
            datatype = `Nvarchar(${fieldlength})`
          }

          res.data.push({
            $index: res.data.length + 1,
            datatype: datatype,
            field: col.field,
            fieldlength: fieldlength,
            label: col.label,
            type: 'text',
            uuid: Utils.getuuid()
          })
        }
      })
    } else if (res.key !== type) {
      message.warning('配置信息格式错误！')
      return
    }

    if (res.type === 'line') {
      let unique = true
      res.data.uuid = Utils.getuuid()
      columns.forEach(col => {
        if (col.unique !== true || !unique) return

        if (col.strict) {
          let key = res.data[col.dataIndex].toLowerCase()
          let _index = data.findIndex(item => key === item[col.dataIndex].toLowerCase())

          if (_index > -1) {
            notification.warning({
              top: 92,
              message: col.title + '不可重复！',
              duration: 5
            })
            unique = false
          }
        } else {
          let _index = data.findIndex(item => res.data[col.dataIndex] === item[col.dataIndex])

          if (_index > -1) {
@@ -422,38 +429,49 @@
            })
            unique = false
          }
        })
        }
      })

        if (!unique) return
      if (!unique) return

        data.unshift(res.data)
        this.setState({ data, editingKey: '', editLineId: res.data.uuid || '', visible: false }, () => {
          this.props.onChange(data)
        })
      } else if (res.type === 'array') {
        res.data.forEach(cell => {
          let unique = true
          cell.uuid = Utils.getuuid()
          columns.forEach(col => {
            if (col.unique !== true || !unique) return
      data.unshift(res.data)
      this.setState({ data, editingKey: '', editLineId: res.data.uuid || '' }, () => {
        this.props.onChange(data)
      })
    } else if (res.type === 'array') {
      res.data.forEach(cell => {
        let unique = true
        cell.uuid = Utils.getuuid()
        columns.forEach(col => {
          if (col.unique !== true || !unique) return

          if (col.strict) {
            let _index = data.findIndex(item => cell[col.dataIndex].toLowerCase() === item[col.dataIndex].toLowerCase())
  
            if (_index > -1) {
              unique = false
            }
          } else {
            let _index = data.findIndex(item => cell[col.dataIndex] === item[col.dataIndex])
  
            if (_index > -1) {
              unique = false
            }
          })
  
          if (!unique) return
  
          data.push(cell)
          }
        })

        this.setState({ data, editingKey: '', visible: false }, () => {
          this.props.onChange(data)
        })
      }
      message.success('粘贴成功。')
    })
        if (!unique) return

        data.push(cell)
      })

      this.setState({ data, editingKey: '' }, () => {
        this.props.onChange(data)
      })
    }

    callback()
    message.success('粘贴成功。')
  }

  handleStatus = (record) => {
@@ -673,18 +691,6 @@
              })}
            />
          </DndProvider>
          {/* 信息粘贴 */}
          <Modal
            title="粘贴"
            visible={this.state.visible}
            width={600}
            maskClosable={false}
            onOk={this.pasteSubmit}
            onCancel={() => {this.setState({visible: false})}}
            destroyOnClose
          >
            <PasteForm wrappedComponentRef={(inst) => this.pasteFormRef = inst} inputSubmit={this.pasteSubmit}/>
          </Modal>
        </div>
      </EditableContext.Provider>
    )

 src/templates/zshare/menuform/index.jsx

@@ -2,7 +2,7 @@
import PropTypes from 'prop-types'
import { Form, Row, Col, Input, Select } from 'antd'
import { formRule } from '@/utils/option.js'
import './index.scss'
// import './index.scss'

class MainSearch extends Component {
  static propTpyes = {

 src/utils/utils-custom.js

@@ -19,6 +19,8 @@
      } else if (item.type === 'tabs') {
        if (item.subtype === 'tabletabs') {
          item.subtabs.forEach(tab => {
            if (tab.components[0].uuid === selfId) return
            
            modules.push({
              value: tab.components[0].uuid,
              label: tab.label,
@@ -655,7 +657,12 @@
    if (btn.anchors && btn.anchors.length > 0) {
      btn.anchors = btn.anchors.map(m => md5(commonId + m))
    }
    if (btn.syncComponent && btn.syncComponent.length > 0) {
    if (btn.syncComponent && btn.syncComponent[0] === 'multiComponent' && btn.syncComponents) {
      btn.syncComponents = btn.syncComponents.map(m => {
        m.syncComId = m.syncComId.map(n => md5(commonId + n))
        return m
      })
    } else if (btn.syncComponent && btn.syncComponent.length > 0) {
      btn.syncComponent = btn.syncComponent.map(m => md5(commonId + m))
    }
  }

 src/views/menudesign/index.jsx

@@ -73,6 +73,13 @@
  }

  UNSAFE_componentWillMount() {
    if (!sessionStorage.getItem('UserID')) {
      sessionStorage.removeItem('isEditState')
      sessionStorage.removeItem('appType')
      this.props.history.replace('/login')
      return
    }

    sessionStorage.setItem('editMenuType', 'menu') // 编辑菜单类型

    window.GLOB.UserComponentMap = new Map() // 缓存用户自定义组件
@@ -106,6 +113,8 @@
  }

  componentDidMount () {
    if (!sessionStorage.getItem('UserID')) return
    
    MKEmitter.addListener('changePopview', this.initPopview)
    MKEmitter.addListener('triggerMenuSave', this.triggerMenuSave)
    MKEmitter.addListener('updateCustomComponent', this.updateCustomComponent)

 src/views/mobdesign/index.jsx

@@ -81,6 +81,14 @@
  }

  UNSAFE_componentWillMount() {
    if (!sessionStorage.getItem('UserID')) {
      sessionStorage.removeItem('isEditState')
      sessionStorage.removeItem('editMenuType')
      sessionStorage.removeItem('appType')
      this.props.history.replace('/login')
      return
    }
    
    if (memberLevel < 30) return
    try {
      let param = JSON.parse(window.decodeURIComponent(window.atob(this.props.match.params.param)))
@@ -139,6 +147,7 @@
  }

  componentDidMount () {
    if (!sessionStorage.getItem('UserID')) return
    if (memberLevel < 30) {
      document.getElementById('mk-mob-design-view').innerHTML = '<div style="text-align: center; font-size: 30px; margin-top: 40vh; height: 100vh; background: #fff;">本应用没有PC端页面的编辑权限，请联系管理员！</div>'
      return

 src/views/pcdesign/index.jsx

@@ -76,6 +76,13 @@
  }

  UNSAFE_componentWillMount() {
    if (!sessionStorage.getItem('UserID')) {
      sessionStorage.removeItem('isEditState')
      sessionStorage.removeItem('appType')
      this.props.history.replace('/login')
      return
    }
    
    if (memberLevel < 30) return

    sessionStorage.setItem('editMenuType', 'menu') // 编辑菜单类型
@@ -123,6 +130,7 @@
  }

  componentDidMount () {
    if (!sessionStorage.getItem('UserID')) return
    if (memberLevel < 30) {
      document.getElementById('mk-pc-design-view').innerHTML = '<div style="text-align: center; font-size: 30px; margin-top: 40vh; height: 100vh; background: #fff;">本应用没有PC端页面的编辑权限，请联系管理员！</div>'
      return

 src/views/tabledesign/index.jsx

@@ -63,6 +63,13 @@
  }

  UNSAFE_componentWillMount() {
    if (!sessionStorage.getItem('UserID')) {
      sessionStorage.removeItem('isEditState')
      sessionStorage.removeItem('appType')
      this.props.history.replace('/login')
      return
    }
    
    sessionStorage.setItem('editMenuType', 'menu') // 编辑菜单类型

    window.GLOB.UserComponentMap = new Map() // 缓存用户自定义组件
@@ -95,6 +102,8 @@
  }

  componentDidMount () {
    if (!sessionStorage.getItem('UserID')) return
    
    MKEmitter.addListener('changePopview', this.initPopview)
    MKEmitter.addListener('triggerMenuSave', this.triggerMenuSave)
    setTimeout(() => {