vue2-client 1.1.0 → 1.2.0

package/src/pages/system/applyInstallView/Core.vue

@@ -1,570 +1,570 @@
-<template>
-  <div class="logic-flow-view">
-    <!-- 辅助工具栏 -->
-    <Control
-      class="demo-control"
-      v-if="lf"
-      :lf="lf"
-      @catData="$_catData"
-      @catRealData="$_catRealData"
-    ></Control>
-    <a-card
-      class="demo-card"
-      title="属性预览"
-      size="small"
-      v-if="Object.keys(selectNodeProperties).length > 0"
-    >
-      <a-descriptions :column="1" :title="'节点：' + selectNodeProperties.text" >
-        <a-descriptions-item v-if="key !== 'formData'" v-for="key of Object.keys(selectNodeProperties)" :key="key" :label="key">
-          {{ selectNodeProperties[key] }}
-        </a-descriptions-item>
-      </a-descriptions>
-
-    </a-card>
-    <!-- 节点面板 -->
-    <NodePanel v-if="lf" :lf="lf" :nodeList="nodeList"></NodePanel>
-    <!-- 画布 -->
-    <div id="LF-view"></div>
-    <!-- 步骤节点自定义操作面板 -->
-    <AddPanel
-      v-if="showAddPanel"
-      class="add-panel"
-      :style="addPanelStyle"
-      :lf="lf"
-      :nodeData="addClickNode"
-      :node-list="addNodeList"
-      @addNodeFinish="hideAddPanel"
-    >
-    </AddPanel>
-    <!-- 属性面板 -->
-    <a-drawer
-      title="设置节点属性"
-      :visible="dialogVisible"
-      width="40%"
-      @close="closeDialog">
-      <PropertyDialog
-        v-if="dialogVisible"
-        :nodeData="clickNode"
-        :lf="lf"
-        @setPropertiesFinish="closeDialog"
-      ></PropertyDialog>
-    </a-drawer>
-    <!-- 表单构建面板 -->
-    <create-simple-form-query
-      :visible.sync="createSimpleFormVisible"
-      :to-edit-json="createFormNodeJson"
-      @saveSimpleFormQueryParams="saveSimpleFormQueryParams"
-    />
-    <!-- 数据查看面板 -->
-    <a-modal
-      title="原始数据"
-      v-model="dataVisible"
-      width="50%">
-      <DataDialog :graphData="graphData"></DataDialog>
-    </a-modal>
-    <!-- 实际数据查看面板 -->
-    <a-modal
-      title="实际数据"
-      v-model="realDataVisible"
-      width="50%"
-      @ok="saveData"
-    >
-      <a-tabs default-active-key="99999">
-        <a-tab-pane key="99999" tab="报装流程配置">
-          <pre>{{ graphRealData }}</pre>
-        </a-tab-pane>
-        <a-tab-pane v-for="item of hasFormNodeList" :key="item.id" :tab="'表单：' + item.properties.formData.describe">
-          <json-viewer :copyable="{copyText: '复制', copiedText: '已复制'}" :value="item.properties.formData" :expand-depth="parseInt('100')" style="overflow: auto;max-height: 440px"></json-viewer>
-        </a-tab-pane>
-      </a-tabs>
-    </a-modal>
-  </div>
-</template>
-<script>
-import LogicFlow from '@logicflow/core'
-// const LogicFlow = window.LogicFlow
-import { Menu, SelectionSelect, Snapshot } from '@logicflow/extension'
-import '@logicflow/core/dist/style/index.css'
-import '@logicflow/extension/lib/style/index.css'
-import NodePanel from './LFComponents/NodePanel'
-import AddPanel from './LFComponents/AddPanel'
-import Control from './LFComponents/Control'
-import PropertyDialog from './PropertySetting/PropertyDialog'
-import DataDialog from './LFComponents/DataDialog'
-import { nodeList } from './config'
-import { showXml } from '@/utils/util'
-import FileSaver from 'file-saver'
-import JsonViewer from 'vue-json-viewer'
-
-import {
-  registerBackEdge,
-  registerConnect,
-  registerDownload,
-  registerEnd,
-  registerPolyline,
-  registerPush,
-  registerStart,
-  registerStep,
-  registerTask,
-  registerBase
-} from './registerNode'
-
-const demoData = require('./data.json')
-
-export default {
-  name: 'LF',
-  components: { NodePanel, AddPanel, Control, PropertyDialog, DataDialog, JsonViewer },
-  computed: {
-    hasFormNodeList () {
-      return this.allNodeList.filter(item => item.type === 'step' && item.properties.formData)
-    }
-  },
-  data () {
-    return {
-      lf: null,
-      showAddPanel: false,
-      addPanelStyle: {
-        top: 0,
-        left: 0
-      },
-      nodeData: null,
-      addClickNode: null,
-      clickNode: null,
-      dialogVisible: false,
-      graphData: null,
-      graphRealData: null,
-      dataVisible: false,
-      realDataVisible: false,
-      config: {
-        background: {
-          backgroundColor: '#f7f9ff'
-        },
-        grid: {
-          size: 10,
-          visible: false
-        },
-        keyboard: {
-          enabled: true
-        },
-        style: {
-          rect: {
-            radius: 6
-          },
-          edgeText: { // 边文本样式
-            background: {
-              fill: '#fff'
-            }
-          }
-        },
-        edgeTextDraggable: true,
-        hoverOutline: false,
-        guards: {
-          beforeClone (data) {
-            console.log('beforeClone', data)
-            return true
-          },
-          beforeDelete (data) {
-            // 可以根据data数据判断是否允许删除，允许返回true,不允许返回false
-            // 文档： http://logic-flow.org/guide/basic/keyboard.html#%E5%A6%82%E4%BD%95%E9%98%BB%E6%AD%A2%E5%88%A0%E9%99%A4%E6%88%96%E8%80%85%E6%8B%B7%E8%B4%9D%E8%A1%8C%E4%B8%BA
-            console.log('beforeDelete', data)
-            // _this.$message('不允许删除', 'error')
-            return true
-          }
-        }
-      },
-      moveData: {},
-      nodeList,
-      addNodeList: [],
-      baseNodeName: '',
-      createSimpleFormVisible: false,
-      createFormNodeJson: {},
-      nodeFormJsonArray: [],
-      allNodeList: [],
-      selectNodeProperties: {}
-    }
-  },
-  mounted () {
-    this.$_initLf()
-  },
-  methods: {
-    $_initLf () {
-      // 画布配置
-
-      // 使用插件
-      LogicFlow.use(Menu)
-      LogicFlow.use(Snapshot)
-      LogicFlow.use(SelectionSelect)
-      const lf = new LogicFlow({
-        ...this.config,
-        container: document.querySelector('#LF-view'),
-        stopMoveGraph: true
-      })
-      this.lf = lf
-      // 1.1.0新增用法
-      lf.extension.selectionSelect.openSelectionSelect()
-      lf.zoom(false)
-      lf.zoom(false)
-      lf.zoom(false)
-      lf.zoom(false)
-      lf.zoom(false)
-      // 菜单配置文档：http://logic-flow.org/guide/extension/extension-components.html#%E8%8F%9C%E5%8D%95
-      // 重置，增加，节点自由配置(以base节点为示例)
-      // lf.setMenuConfig({
-      //   nodeMenu: [],
-      //   edgeMenu: []
-      // })
-      // lf.addMenuConfig({
-      //   nodeMenu: [
-      //     {
-      //       text: '分享',
-      //       callback () {
-      //         alert('分享成功！')
-      //       }
-      //     },
-      //     {
-      //       text: '属性',
-      //       callback (node) {
-      //         alert(`
-      //           节点id：${node.id}
-      //           节点类型：${node.type}
-      //           节点坐标：(x: ${node.x}, y: ${node.y})`
-      //         )
-      //       }
-      //     }
-      //   ],
-      //   edgeMenu: [
-      //     {
-      //       text: '属性',
-      //       callback (edge) {
-      //         alert(`
-      //           边id：${edge.id}
-      //           边类型：${edge.type}
-      //           边坐标：(x: ${edge.x}, y: ${edge.y})
-      //           源节点id：${edge.sourceNodeId}
-      //           目标节点id：${edge.targetNodeId}`
-      //         )
-      //       }
-      //     }
-      //   ]
-      // })
-      // 设置主题
-      lf.setTheme({
-        circle: {
-          stroke: '#000000',
-          strokeWidth: 1,
-          outlineColor: '#88f'
-        },
-        rect: {
-          outlineColor: '#88f',
-          strokeWidth: 1
-        },
-        polygon: {
-          strokeWidth: 1
-        },
-        polyline: {
-          stroke: '#000000',
-          hoverStroke: '#000000',
-          selectedStroke: '#000000',
-          outlineColor: '#88f',
-          strokeWidth: 1
-        },
-        nodeText: {
-          fontSize: 16,
-          color: '#000000'
-        },
-        baseEdge: {
-          stroke: '#999',
-          strokeWidth: 2
-        },
-        edgeText: {
-          fontSize: 14,
-          color: '#000000',
-          background: {
-            fill: '#f7f9ff'
-          }
-        }
-      })
-      this.$_registerNode()
-    },
-    // 自定义
-    $_registerNode () {
-      registerStart(this.lf)
-      registerBase(this.lf, this.clickPlus, this.mouseDownPlus, this.showPropView)
-      registerEnd(this.lf)
-      registerStep(this.lf, this.clickPlus, this.mouseDownPlus, this.showPropView, this.showSimpleFormView)
-      registerPush(this.lf, this.clickPlus, this.mouseDownPlus)
-      registerDownload(this.lf)
-      registerPolyline(this.lf)
-      registerTask(this.lf)
-      registerConnect(this.lf)
-
-      registerBackEdge(this.lf)
-      this.$_render()
-    },
-    $_render () {
-      this.lf.render(demoData)
-      this.$_LfEvent()
-    },
-    $_getData () {
-      const data = this.lf.getGraphData()
-      console.log(JSON.stringify(data))
-    },
-    showPropView (node) {
-      this.$data.clickNode = node
-      this.$data.dialogVisible = true
-    },
-    showSimpleFormView (node) {
-      this.$data.clickNode = node
-      if (node.properties.formData) {
-        this.createFormNodeJson = node.properties.formData
-      } else {
-        this.createFormNodeJson = {
-          group: this.baseNodeName ? this.baseNodeName : '',
-          describe: node.text ? node.text.value : ''
-        }
-      }
-      this.$data.createSimpleFormVisible = true
-    },
-    $_LfEvent () {
-      this.lf.on('node:click', ({ data }) => {
-        this.selectNodeProperties = data.properties
-      })
-      this.lf.on('node:dbclick', ({ data }) => {})
-      this.lf.on('edge:dbclick', ({ data }) => {})
-      this.lf.on('element:click', () => {
-        this.hideAddPanel()
-      })
-      this.lf.on('edge:add', ({ data }) => {
-        console.log('edge:add', data)
-      })
-      this.lf.on('node:mousemove', ({ data }) => {
-        console.log('node:mousemove')
-        this.moveData = data
-      })
-      this.lf.on('blank:click', () => {
-        this.hideAddPanel()
-      })
-      this.lf.on('connection:not-allowed', (data) => {
-        this.$message.error(data.msg)
-      })
-      this.lf.on('node:mousemove', () => {
-        console.log('on mousemove')
-      })
-    },
-    clickPlus (e, attributes, addNodeList) {
-      e.stopPropagation()
-      const { clientX, clientY } = e
-      console.log(clientX, clientY)
-      this.$data.addPanelStyle.top = (clientY - 180) + 'px'
-      this.$data.addPanelStyle.left = (clientX - 260) + 'px'
-      this.$data.addNodeList = addNodeList
-      this.$data.showAddPanel = true
-      this.$data.addClickNode = attributes
-    },
-    mouseDownPlus (e, attributes) {
-      e.stopPropagation()
-      console.log('mouseDownPlus', e, attributes)
-    },
-    hideAddPanel () {
-      this.$data.showAddPanel = false
-      this.$data.addPanelStyle.top = 0
-      this.$data.addPanelStyle.left = 0
-      // this.$data.addClickNode = null
-      console.warn(this.$data)
-    },
-    closeDialog () {
-      this.$data.dialogVisible = false
-    },
-    $_catData () {
-      this.$data.graphData = this.$data.lf.getGraphData()
-      this.$data.dataVisible = true
-    },
-    $_catRealData () {
-      const data = this.$data.lf.getGraphData()
-      const nodeMap = {}
-      this.allNodeList = []
-      let baseNode = null
-      for (const node of data.nodes) {
-        if (node.type === 'step' && !node.properties.id) {
-          if (node.text) {
-            this.$message.error('节点[' + node.text.value + ']没有设置ID')
-          } else {
-            this.$message.error('节点需要设置名称')
-          }
-          return
-        }
-        const item = {
-          id: node.properties.id,
-          type: node.type,
-          properties: node.properties,
-          name: node.text ? node.text.value : ''
-        }
-        if (item.type === 'base') {
-          baseNode = item
-          continue
-        }
-        nodeMap[node.id] = item
-        if (node.properties.id) {
-          this.allNodeList[node.properties.id] = item
-        }
-      }
-      if (!baseNode) {
-        this.$message.error('请设置流程根节点[基础]')
-        return
-      }
-      this.allNodeList.shift()
-      const submitList = []
-      const backList = []
-      const skipList = []
-      for (const edge of data.edges) {
-        const id = nodeMap[edge.sourceNodeId].properties.id
-        const toId = nodeMap[edge.targetNodeId].properties.id
-        let type
-        if (id && toId) {
-          if (toId - id === 1) {
-            type = 'submit'
-          } else if (id - toId === 1) {
-            type = 'back'
-          } else if (toId - id > 1) {
-            type = 'skip'
-          } else if (id - toId > 1) {
-            this.$message.error('错误的流程连接[id:' + id + ', to_id:' + toId + ']，每次只能退回一个步骤')
-            return
-          } else {
-            this.$message.error('错误的流程连接[id:' + id + ', to_id:' + toId + ']')
-            return
-          }
-          const item = {
-            id: id,
-            to: toId
-          }
-          if (type === 'submit') {
-            submitList.push(item)
-          } else if (type === 'back') {
-            backList.push(item)
-          } else {
-            skipList.push(item)
-          }
-        }
-      }
-
-      this.baseNodeName = baseNode.properties.text
-
-      let xml = '<?xml version="1.0" encoding="utf-8"?>'
-      xml += '<WorkflowDiagram id="' + baseNode.properties.id + '" name="' + baseNode.properties.text + '">'
-
-      for (const item of baseNode.properties.propArray) {
-        xml += '<Var name="' + item.name + '" id="' + item.id + '" description="' + item.description + '" />'
-      }
-
-      xml += '<Actor id="' + baseNode.properties.personId + '" name="' + baseNode.properties.personName + '">'
-
-      for (const node of this.allNodeList) {
-        let personexpression
-        if (node.properties.name.length === 1) {
-          personexpression = 'R(' + node.properties.name[0] + ')'
-        } else if (node.properties.name.length > 1) {
-          personexpression = 'RS('
-          for (const nameItem of node.properties.name) {
-            personexpression += (nameItem + ',')
-          }
-          personexpression = personexpression.substring(0, personexpression.length - 1)
-          personexpression += ')'
-        } else {
-          personexpression = ''
-        }
-        let timeoutExp
-        if (node.properties.timeout) {
-          timeoutExp = 'timeout="HH(' + node.properties.timeout + ')" '
-        } else {
-          timeoutExp = ''
-        }
-        const activity = '<Activity id="' + node.id + '" name="' + node.name + '" personexpression="' + personexpression + '" ' + timeoutExp + '/>'
-        xml += activity
-      }
-      xml += '</Actor>'
-      xml += '<!-- 报建流程 -->'
-      for (const id in submitList) {
-        const edge = submitList[id]
-        const diversion = '<Diversion id="' + edge.id + '" head="' + edge.id + '" tail="' + edge.to + '" expression="subedp == $提交$" />'
-        xml += diversion
-      }
-      for (const id in skipList) {
-        const edge = skipList[id]
-        const diversion = '<Diversion id="' + edge.id + '" head="' + edge.id + '" tail="' + edge.to + '" expression="subedp == $跳过$" />'
-        xml += diversion
-      }
-      for (const id in backList) {
-        const edge = backList[id]
-        const diversion = '<Diversion id="' + edge.to + '" head="' + edge.id + '" tail="' + edge.to + '" expression="subedp == $退回$" />'
-        xml += diversion
-      }
-
-      xml += '</WorkflowDiagram>'
-      this.$data.graphRealData = showXml(xml)
-      this.$data.realDataVisible = true
-    },
-    saveData () {
-      // 存储流程
-      const blob = new Blob([this.graphRealData], { type: 'application/xml' })
-      FileSaver.saveAs(blob, this.baseNodeName + `.xml`)
-    },
-    // 存储基础表单配置信息
-    saveSimpleFormQueryParams (source) {
-      const properties = Object.assign(this.lf.getProperties(this.clickNode.id), {
-        formData: source
-      })
-      this.lf.setProperties(this.clickNode.id, properties)
-      this.$message.success('保存表单成功！')
-    }
-  }
-}
-</script>
-<style>
-.logic-flow-view {
-  height: 100vh;
-  position: relative;
-}
-.demo-title{
-  text-align: center;
-  margin: 20px;
-}
-.demo-control{
-  position: absolute;
-  top: 50px;
-  right: 0;
-  z-index: 2;
-}
-.demo-card{
-  background-color: rgba(255,255,255,0.2);
-  position: absolute;
-  width: 250px;
-  top: 85px;
-  right: 10px;
-  z-index: 2;
-}
-#LF-view{
-  width: calc(100%);
-  height: 100%;
-  outline: none;
-}
-.time-plus{
-  cursor: pointer;
-}
-.add-panel {
-  position: absolute;
-  z-index: 11;
-  background-color: white;
-  padding: 10px 5px;
-}
-.el-drawer__body {
-  height: 80%;
-  overflow: auto;
-  margin-top: -30px;
-  z-index: 3;
-}
-.lf-element-text {
-  font-weight: bold;
-  z-index: 99999;
-}
-</style>
+<template>
+  <div class="logic-flow-view">
+    <!-- 辅助工具栏 -->
+    <Control
+      class="demo-control"
+      v-if="lf"
+      :lf="lf"
+      @catData="$_catData"
+      @catRealData="$_catRealData"
+    ></Control>
+    <a-card
+      class="demo-card"
+      title="属性预览"
+      size="small"
+      v-if="Object.keys(selectNodeProperties).length > 0"
+    >
+      <a-descriptions :column="1" :title="'节点：' + selectNodeProperties.text" >
+        <a-descriptions-item v-if="key !== 'formData'" v-for="key of Object.keys(selectNodeProperties)" :key="key" :label="key">
+          {{ selectNodeProperties[key] }}
+        </a-descriptions-item>
+      </a-descriptions>
+
+    </a-card>
+    <!-- 节点面板 -->
+    <NodePanel v-if="lf" :lf="lf" :nodeList="nodeList"></NodePanel>
+    <!-- 画布 -->
+    <div id="LF-view"></div>
+    <!-- 步骤节点自定义操作面板 -->
+    <AddPanel
+      v-if="showAddPanel"
+      class="add-panel"
+      :style="addPanelStyle"
+      :lf="lf"
+      :nodeData="addClickNode"
+      :node-list="addNodeList"
+      @addNodeFinish="hideAddPanel"
+    >
+    </AddPanel>
+    <!-- 属性面板 -->
+    <a-drawer
+      title="设置节点属性"
+      :visible="dialogVisible"
+      width="40%"
+      @close="closeDialog">
+      <PropertyDialog
+        v-if="dialogVisible"
+        :nodeData="clickNode"
+        :lf="lf"
+        @setPropertiesFinish="closeDialog"
+      ></PropertyDialog>
+    </a-drawer>
+    <!-- 表单构建面板 -->
+    <create-simple-form-query
+      :visible.sync="createSimpleFormVisible"
+      :to-edit-json="createFormNodeJson"
+      @saveSimpleFormQueryParams="saveSimpleFormQueryParams"
+    />
+    <!-- 数据查看面板 -->
+    <a-modal
+      title="原始数据"
+      v-model="dataVisible"
+      width="50%">
+      <DataDialog :graphData="graphData"></DataDialog>
+    </a-modal>
+    <!-- 实际数据查看面板 -->
+    <a-modal
+      title="实际数据"
+      v-model="realDataVisible"
+      width="50%"
+      @ok="saveData"
+    >
+      <a-tabs default-active-key="99999">
+        <a-tab-pane key="99999" tab="报装流程配置">
+          <pre>{{ graphRealData }}</pre>
+        </a-tab-pane>
+        <a-tab-pane v-for="item of hasFormNodeList" :key="item.id" :tab="'表单：' + item.properties.formData.describe">
+          <json-viewer :copyable="{copyText: '复制', copiedText: '已复制'}" :value="item.properties.formData" :expand-depth="parseInt('100')" style="overflow: auto;max-height: 440px"></json-viewer>
+        </a-tab-pane>
+      </a-tabs>
+    </a-modal>
+  </div>
+</template>
+<script>
+import LogicFlow from '@logicflow/core'
+// const LogicFlow = window.LogicFlow
+import { Menu, SelectionSelect, Snapshot } from '@logicflow/extension'
+import '@logicflow/core/dist/style/index.css'
+import '@logicflow/extension/lib/style/index.css'
+import NodePanel from './LFComponents/NodePanel'
+import AddPanel from './LFComponents/AddPanel'
+import Control from './LFComponents/Control'
+import PropertyDialog from './PropertySetting/PropertyDialog'
+import DataDialog from './LFComponents/DataDialog'
+import { nodeList } from './config'
+import { showXml } from '@vue2-client/utils/util'
+import FileSaver from 'file-saver'
+import JsonViewer from 'vue-json-viewer'
+
+import {
+  registerBackEdge,
+  registerConnect,
+  registerDownload,
+  registerEnd,
+  registerPolyline,
+  registerPush,
+  registerStart,
+  registerStep,
+  registerTask,
+  registerBase
+} from './registerNode'
+
+const demoData = require('./data.json')
+
+export default {
+  name: 'LF',
+  components: { NodePanel, AddPanel, Control, PropertyDialog, DataDialog, JsonViewer },
+  computed: {
+    hasFormNodeList () {
+      return this.allNodeList.filter(item => item.type === 'step' && item.properties.formData)
+    }
+  },
+  data () {
+    return {
+      lf: null,
+      showAddPanel: false,
+      addPanelStyle: {
+        top: 0,
+        left: 0
+      },
+      nodeData: null,
+      addClickNode: null,
+      clickNode: null,
+      dialogVisible: false,
+      graphData: null,
+      graphRealData: null,
+      dataVisible: false,
+      realDataVisible: false,
+      config: {
+        background: {
+          backgroundColor: '#f7f9ff'
+        },
+        grid: {
+          size: 10,
+          visible: false
+        },
+        keyboard: {
+          enabled: true
+        },
+        style: {
+          rect: {
+            radius: 6
+          },
+          edgeText: { // 边文本样式
+            background: {
+              fill: '#fff'
+            }
+          }
+        },
+        edgeTextDraggable: true,
+        hoverOutline: false,
+        guards: {
+          beforeClone (data) {
+            console.log('beforeClone', data)
+            return true
+          },
+          beforeDelete (data) {
+            // 可以根据data数据判断是否允许删除，允许返回true,不允许返回false
+            // 文档： http://logic-flow.org/guide/basic/keyboard.html#%E5%A6%82%E4%BD%95%E9%98%BB%E6%AD%A2%E5%88%A0%E9%99%A4%E6%88%96%E8%80%85%E6%8B%B7%E8%B4%9D%E8%A1%8C%E4%B8%BA
+            console.log('beforeDelete', data)
+            // _this.$message('不允许删除', 'error')
+            return true
+          }
+        }
+      },
+      moveData: {},
+      nodeList,
+      addNodeList: [],
+      baseNodeName: '',
+      createSimpleFormVisible: false,
+      createFormNodeJson: {},
+      nodeFormJsonArray: [],
+      allNodeList: [],
+      selectNodeProperties: {}
+    }
+  },
+  mounted () {
+    this.$_initLf()
+  },
+  methods: {
+    $_initLf () {
+      // 画布配置
+
+      // 使用插件
+      LogicFlow.use(Menu)
+      LogicFlow.use(Snapshot)
+      LogicFlow.use(SelectionSelect)
+      const lf = new LogicFlow({
+        ...this.config,
+        container: document.querySelector('#LF-view'),
+        stopMoveGraph: true
+      })
+      this.lf = lf
+      // 1.1.0新增用法
+      lf.extension.selectionSelect.openSelectionSelect()
+      lf.zoom(false)
+      lf.zoom(false)
+      lf.zoom(false)
+      lf.zoom(false)
+      lf.zoom(false)
+      // 菜单配置文档：http://logic-flow.org/guide/extension/extension-components.html#%E8%8F%9C%E5%8D%95
+      // 重置，增加，节点自由配置(以base节点为示例)
+      // lf.setMenuConfig({
+      //   nodeMenu: [],
+      //   edgeMenu: []
+      // })
+      // lf.addMenuConfig({
+      //   nodeMenu: [
+      //     {
+      //       text: '分享',
+      //       callback () {
+      //         alert('分享成功！')
+      //       }
+      //     },
+      //     {
+      //       text: '属性',
+      //       callback (node) {
+      //         alert(`
+      //           节点id：${node.id}
+      //           节点类型：${node.type}
+      //           节点坐标：(x: ${node.x}, y: ${node.y})`
+      //         )
+      //       }
+      //     }
+      //   ],
+      //   edgeMenu: [
+      //     {
+      //       text: '属性',
+      //       callback (edge) {
+      //         alert(`
+      //           边id：${edge.id}
+      //           边类型：${edge.type}
+      //           边坐标：(x: ${edge.x}, y: ${edge.y})
+      //           源节点id：${edge.sourceNodeId}
+      //           目标节点id：${edge.targetNodeId}`
+      //         )
+      //       }
+      //     }
+      //   ]
+      // })
+      // 设置主题
+      lf.setTheme({
+        circle: {
+          stroke: '#000000',
+          strokeWidth: 1,
+          outlineColor: '#88f'
+        },
+        rect: {
+          outlineColor: '#88f',
+          strokeWidth: 1
+        },
+        polygon: {
+          strokeWidth: 1
+        },
+        polyline: {
+          stroke: '#000000',
+          hoverStroke: '#000000',
+          selectedStroke: '#000000',
+          outlineColor: '#88f',
+          strokeWidth: 1
+        },
+        nodeText: {
+          fontSize: 16,
+          color: '#000000'
+        },
+        baseEdge: {
+          stroke: '#999',
+          strokeWidth: 2
+        },
+        edgeText: {
+          fontSize: 14,
+          color: '#000000',
+          background: {
+            fill: '#f7f9ff'
+          }
+        }
+      })
+      this.$_registerNode()
+    },
+    // 自定义
+    $_registerNode () {
+      registerStart(this.lf)
+      registerBase(this.lf, this.clickPlus, this.mouseDownPlus, this.showPropView)
+      registerEnd(this.lf)
+      registerStep(this.lf, this.clickPlus, this.mouseDownPlus, this.showPropView, this.showSimpleFormView)
+      registerPush(this.lf, this.clickPlus, this.mouseDownPlus)
+      registerDownload(this.lf)
+      registerPolyline(this.lf)
+      registerTask(this.lf)
+      registerConnect(this.lf)
+
+      registerBackEdge(this.lf)
+      this.$_render()
+    },
+    $_render () {
+      this.lf.render(demoData)
+      this.$_LfEvent()
+    },
+    $_getData () {
+      const data = this.lf.getGraphData()
+      console.log(JSON.stringify(data))
+    },
+    showPropView (node) {
+      this.$data.clickNode = node
+      this.$data.dialogVisible = true
+    },
+    showSimpleFormView (node) {
+      this.$data.clickNode = node
+      if (node.properties.formData) {
+        this.createFormNodeJson = node.properties.formData
+      } else {
+        this.createFormNodeJson = {
+          group: this.baseNodeName ? this.baseNodeName : '',
+          describe: node.text ? node.text.value : ''
+        }
+      }
+      this.$data.createSimpleFormVisible = true
+    },
+    $_LfEvent () {
+      this.lf.on('node:click', ({ data }) => {
+        this.selectNodeProperties = data.properties
+      })
+      this.lf.on('node:dbclick', ({ data }) => {})
+      this.lf.on('edge:dbclick', ({ data }) => {})
+      this.lf.on('element:click', () => {
+        this.hideAddPanel()
+      })
+      this.lf.on('edge:add', ({ data }) => {
+        console.log('edge:add', data)
+      })
+      this.lf.on('node:mousemove', ({ data }) => {
+        console.log('node:mousemove')
+        this.moveData = data
+      })
+      this.lf.on('blank:click', () => {
+        this.hideAddPanel()
+      })
+      this.lf.on('connection:not-allowed', (data) => {
+        this.$message.error(data.msg)
+      })
+      this.lf.on('node:mousemove', () => {
+        console.log('on mousemove')
+      })
+    },
+    clickPlus (e, attributes, addNodeList) {
+      e.stopPropagation()
+      const { clientX, clientY } = e
+      console.log(clientX, clientY)
+      this.$data.addPanelStyle.top = (clientY - 180) + 'px'
+      this.$data.addPanelStyle.left = (clientX - 260) + 'px'
+      this.$data.addNodeList = addNodeList
+      this.$data.showAddPanel = true
+      this.$data.addClickNode = attributes
+    },
+    mouseDownPlus (e, attributes) {
+      e.stopPropagation()
+      console.log('mouseDownPlus', e, attributes)
+    },
+    hideAddPanel () {
+      this.$data.showAddPanel = false
+      this.$data.addPanelStyle.top = 0
+      this.$data.addPanelStyle.left = 0
+      // this.$data.addClickNode = null
+      console.warn(this.$data)
+    },
+    closeDialog () {
+      this.$data.dialogVisible = false
+    },
+    $_catData () {
+      this.$data.graphData = this.$data.lf.getGraphData()
+      this.$data.dataVisible = true
+    },
+    $_catRealData () {
+      const data = this.$data.lf.getGraphData()
+      const nodeMap = {}
+      this.allNodeList = []
+      let baseNode = null
+      for (const node of data.nodes) {
+        if (node.type === 'step' && !node.properties.id) {
+          if (node.text) {
+            this.$message.error('节点[' + node.text.value + ']没有设置ID')
+          } else {
+            this.$message.error('节点需要设置名称')
+          }
+          return
+        }
+        const item = {
+          id: node.properties.id,
+          type: node.type,
+          properties: node.properties,
+          name: node.text ? node.text.value : ''
+        }
+        if (item.type === 'base') {
+          baseNode = item
+          continue
+        }
+        nodeMap[node.id] = item
+        if (node.properties.id) {
+          this.allNodeList[node.properties.id] = item
+        }
+      }
+      if (!baseNode) {
+        this.$message.error('请设置流程根节点[基础]')
+        return
+      }
+      this.allNodeList.shift()
+      const submitList = []
+      const backList = []
+      const skipList = []
+      for (const edge of data.edges) {
+        const id = nodeMap[edge.sourceNodeId].properties.id
+        const toId = nodeMap[edge.targetNodeId].properties.id
+        let type
+        if (id && toId) {
+          if (toId - id === 1) {
+            type = 'submit'
+          } else if (id - toId === 1) {
+            type = 'back'
+          } else if (toId - id > 1) {
+            type = 'skip'
+          } else if (id - toId > 1) {
+            this.$message.error('错误的流程连接[id:' + id + ', to_id:' + toId + ']，每次只能退回一个步骤')
+            return
+          } else {
+            this.$message.error('错误的流程连接[id:' + id + ', to_id:' + toId + ']')
+            return
+          }
+          const item = {
+            id: id,
+            to: toId
+          }
+          if (type === 'submit') {
+            submitList.push(item)
+          } else if (type === 'back') {
+            backList.push(item)
+          } else {
+            skipList.push(item)
+          }
+        }
+      }
+
+      this.baseNodeName = baseNode.properties.text
+
+      let xml = '<?xml version="1.0" encoding="utf-8"?>'
+      xml += '<WorkflowDiagram id="' + baseNode.properties.id + '" name="' + baseNode.properties.text + '">'
+
+      for (const item of baseNode.properties.propArray) {
+        xml += '<Var name="' + item.name + '" id="' + item.id + '" description="' + item.description + '" />'
+      }
+
+      xml += '<Actor id="' + baseNode.properties.personId + '" name="' + baseNode.properties.personName + '">'
+
+      for (const node of this.allNodeList) {
+        let personexpression
+        if (node.properties.name.length === 1) {
+          personexpression = 'R(' + node.properties.name[0] + ')'
+        } else if (node.properties.name.length > 1) {
+          personexpression = 'RS('
+          for (const nameItem of node.properties.name) {
+            personexpression += (nameItem + ',')
+          }
+          personexpression = personexpression.substring(0, personexpression.length - 1)
+          personexpression += ')'
+        } else {
+          personexpression = ''
+        }
+        let timeoutExp
+        if (node.properties.timeout) {
+          timeoutExp = 'timeout="HH(' + node.properties.timeout + ')" '
+        } else {
+          timeoutExp = ''
+        }
+        const activity = '<Activity id="' + node.id + '" name="' + node.name + '" personexpression="' + personexpression + '" ' + timeoutExp + '/>'
+        xml += activity
+      }
+      xml += '</Actor>'
+      xml += '<!-- 报建流程 -->'
+      for (const id in submitList) {
+        const edge = submitList[id]
+        const diversion = '<Diversion id="' + edge.id + '" head="' + edge.id + '" tail="' + edge.to + '" expression="subedp == $提交$" />'
+        xml += diversion
+      }
+      for (const id in skipList) {
+        const edge = skipList[id]
+        const diversion = '<Diversion id="' + edge.id + '" head="' + edge.id + '" tail="' + edge.to + '" expression="subedp == $跳过$" />'
+        xml += diversion
+      }
+      for (const id in backList) {
+        const edge = backList[id]
+        const diversion = '<Diversion id="' + edge.to + '" head="' + edge.id + '" tail="' + edge.to + '" expression="subedp == $退回$" />'
+        xml += diversion
+      }
+
+      xml += '</WorkflowDiagram>'
+      this.$data.graphRealData = showXml(xml)
+      this.$data.realDataVisible = true
+    },
+    saveData () {
+      // 存储流程
+      const blob = new Blob([this.graphRealData], { type: 'application/xml' })
+      FileSaver.saveAs(blob, this.baseNodeName + `.xml`)
+    },
+    // 存储基础表单配置信息
+    saveSimpleFormQueryParams (source) {
+      const properties = Object.assign(this.lf.getProperties(this.clickNode.id), {
+        formData: source
+      })
+      this.lf.setProperties(this.clickNode.id, properties)
+      this.$message.success('保存表单成功！')
+    }
+  }
+}
+</script>
+<style>
+.logic-flow-view {
+  height: 100vh;
+  position: relative;
+}
+.demo-title{
+  text-align: center;
+  margin: 20px;
+}
+.demo-control{
+  position: absolute;
+  top: 50px;
+  right: 0;
+  z-index: 2;
+}
+.demo-card{
+  background-color: rgba(255,255,255,0.2);
+  position: absolute;
+  width: 250px;
+  top: 85px;
+  right: 10px;
+  z-index: 2;
+}
+#LF-view{
+  width: calc(100%);
+  height: 100%;
+  outline: none;
+}
+.time-plus{
+  cursor: pointer;
+}
+.add-panel {
+  position: absolute;
+  z-index: 11;
+  background-color: white;
+  padding: 10px 5px;
+}
+.el-drawer__body {
+  height: 80%;
+  overflow: auto;
+  margin-top: -30px;
+  z-index: 3;
+}
+.lf-element-text {
+  font-weight: bold;
+  z-index: 99999;
+}
+</style>