vue2-client 0.1.0 → 1.1.0

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

@@ -0,0 +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>

package/src/pages/system/applyInstallView/LFComponents/AddPanel.vue

@@ -0,0 +1,52 @@
+<template>
+  <a-tabs tab-position="left">
+    <a-tab-pane tab="操作">
+      <div v-for="item in nodeList" :key="item.type">
+        <a-button class="add-node-btn" type="primary" size="small" @click="$_addNode(item)">{{ item.label }}</a-button>
+      </div>
+    </a-tab-pane>
+  </a-tabs>
+</template>
+<script>
+export default {
+  name: 'AddPanel',
+  props: {
+    nodeData: {
+      type: Object,
+      default: null
+    },
+    lf: {
+      type: Object || String,
+      default: null
+    },
+    nodeList: {
+      type: Array,
+      default: null
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  methods: {
+    $_addNode (item) {
+      const { lf, nodeData } = this.$props
+      const { id, x, y } = nodeData
+      const nextNode = lf.addNode({
+        type: item.type,
+        x: x + 0,
+        y: y + 120
+      })
+      const nextId = nextNode.id
+      lf.addEdge({ sourceNodeId: id, targetNodeId: nextId })
+      this.$emit('addNodeFinish')
+    }
+  }
+}
+</script>
+<style scoped>
+.add-node-btn{
+  margin-bottom: 10px;
+  margin-right: 20px;
+}
+</style>

package/src/pages/system/applyInstallView/LFComponents/Control.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <a-button-group>
+      <a-button type="plain" size="small" @click="$_zoomIn">放大</a-button>
+      <a-button type="plain" size="small" @click="$_zoomOut">缩小</a-button>
+      <a-button type="plain" size="small" @click="$_zoomReset">大小适应</a-button>
+      <a-button type="plain" size="small" @click="$_translateRest">定位还原</a-button>
+      <a-button type="plain" size="small" @click="$_reset">还原(大小&定位)</a-button>
+      <a-button type="plain" size="small" @click="$_undo" :disabled="undoDisable">上一步(ctrl+z)</a-button>
+      <a-button type="plain" size="small" @click="$_redo" :disabled="redoDisable">下一步(ctrl+y)</a-button>
+      <a-button type="plain" size="small" @click="$_download">下载图片</a-button>
+      <a-button type="plain" size="small" @click="$_catData">查看数据</a-button>
+      <a-button type="plain" size="small" @click="$_catRealData">查看实际数据</a-button>
+      <a-button v-if="catTurboData" type="plain" size="small" @click="$_catTurboData">查看turbo数据</a-button>
+    </a-button-group>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Control',
+  props: {
+    lf: Object || String,
+    catTurboData: Boolean
+  },
+  data () {
+    return {
+      undoDisable: true,
+      redoDisable: true,
+      graphData: null,
+      dataVisible: false
+    }
+  },
+  mounted () {
+    this.$props.lf.on('history:change', ({ data: { undoAble, redoAble } }) => {
+      this.$data.undoDisable = !undoAble
+      this.$data.redoDisable = !redoAble
+    })
+  },
+  methods: {
+    $_zoomIn () {
+      this.$props.lf.zoom(true)
+    },
+    $_zoomOut () {
+      this.$props.lf.zoom(false)
+    },
+    $_zoomReset () {
+      this.$props.lf.resetZoom()
+    },
+    $_translateRest () {
+      this.$props.lf.resetTranslate()
+    },
+    $_reset () {
+      this.$props.lf.resetZoom()
+      this.$props.lf.resetTranslate()
+    },
+    $_undo () {
+      this.$props.lf.undo()
+    },
+    $_redo () {
+      this.$props.lf.redo()
+    },
+    $_download () {
+      this.$props.lf.getSnapshot()
+    },
+    $_catData () {
+      this.$emit('catData')
+    },
+    $_catRealData () {
+      this.$emit('catRealData')
+    },
+    $_catTurboData () {
+      this.$emit('catTurboData')
+    }
+  }
+}
+</script>
+<style scoped>
+</style>