vue2-client 1.2.3 → 1.2.6

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

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

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

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

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