vue2-client 1.2.5 → 1.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/router/async/router.map.js

@@ -1,59 +1,57 @@
-// 视图组件
-const view = {
-  tabs: () => import('@vue2-client/layouts/tabs'),
-  blank: () => import('@vue2-client/layouts/BlankView'),
-  page: () => import('@vue2-client/layouts/PageView'),
-  singlePage: () => import('@vue2-client/layouts/SinglePageView')
-}
-// 动态路由对象定义
-const routerResource = {}
-// --------------------------------------基本视图组件--------------------------------------
-// 空白视图
-routerResource.blank = view.blank
-// 单页面视图
-routerResource.singlePage = view.singlePage
-// --------------------------------------系统配置--------------------------------------
-routerResource.system = view.blank
-// 字典管理
-routerResource.dictionaryManage = () => import(/* webpackChunkName: "dictionary" */ '@vue2-client/pages/system/dictionary')
-// 查询配置管理
-routerResource.queryParamsManage = () => import(/* webpackChunkName: "queryParams" */ '@vue2-client/pages/system/queryParams')
-// 报装可视化
-routerResource.applyInstallView = () => import(/* webpackChunkName: "applyInstallView" */ '@vue2-client/pages/system/applyInstallView')
-// --------------------------------------报表组件--------------------------------------
-routerResource.reportTable = () => import(/* webpackChunkName: "ReportTableHome" */ '@vue2-client/pages/report/ReportTableHome')
-// --------------------------------------资源管理--------------------------------------
-routerResource.resourceManageMain = () => import(/* webpackChunkName: "resourceManageMain" */ '@vue2-client/pages/resourceManage/resourceManageMain')
-
-// 基础路由组件注册
-const routerMap = {
-  login: {
-    authority: '*',
-    path: '/login',
-    component: () => import('@vue2-client/pages/login')
-  },
-  root: {
-    path: '/',
-    name: '首页',
-    redirect: '/login',
-    component: view.tabs
-  },
-  exp403: {
-    authority: '*',
-    name: 'exp403',
-    path: '403',
-    component: () => import('@vue2-client/pages/exception/403')
-  },
-  exp404: {
-    name: 'exp404',
-    path: '404',
-    component: () => import('@vue2-client/pages/exception/404')
-  },
-  exp500: {
-    name: 'exp500',
-    path: '500',
-    component: () => import('@vue2-client/pages/exception/500')
-  }
-}
-Object.assign(routerMap, routerResource)
-export default routerMap
+// 视图组件
+const view = {
+  tabs: () => import('@vue2-client/layouts/tabs'),
+  blank: () => import('@vue2-client/layouts/BlankView'),
+  page: () => import('@vue2-client/layouts/PageView'),
+  singlePage: () => import('@vue2-client/layouts/SinglePageView')
+}
+// 动态路由对象定义
+const routerResource = {}
+// --------------------------------------基本视图组件--------------------------------------
+// 空白视图
+routerResource.blank = view.blank
+// 单页面视图
+routerResource.singlePage = view.singlePage
+// --------------------------------------系统配置--------------------------------------
+routerResource.system = view.blank
+// 字典管理
+routerResource.dictionaryManage = () => import(/* webpackChunkName: "dictionary" */ '@vue2-client/pages/system/dictionary')
+// 查询配置管理
+routerResource.queryParamsManage = () => import(/* webpackChunkName: "queryParams" */ '@vue2-client/pages/system/queryParams')
+// --------------------------------------报表组件--------------------------------------
+routerResource.reportTable = () => import(/* webpackChunkName: "ReportTableHome" */ '@vue2-client/pages/report/ReportTableHome')
+// --------------------------------------资源管理--------------------------------------
+routerResource.resourceManageMain = () => import(/* webpackChunkName: "resourceManageMain" */ '@vue2-client/pages/resourceManage/resourceManageMain')
+
+// 基础路由组件注册
+const routerMap = {
+  login: {
+    authority: '*',
+    path: '/login',
+    component: () => import('@vue2-client/pages/login')
+  },
+  root: {
+    path: '/',
+    name: '首页',
+    redirect: '/login',
+    component: view.tabs
+  },
+  exp403: {
+    authority: '*',
+    name: 'exp403',
+    path: '403',
+    component: () => import('@vue2-client/pages/exception/403')
+  },
+  exp404: {
+    name: 'exp404',
+    path: '404',
+    component: () => import('@vue2-client/pages/exception/404')
+  },
+  exp500: {
+    name: 'exp500',
+    path: '500',
+    component: () => import('@vue2-client/pages/exception/500')
+  }
+}
+Object.assign(routerMap, routerResource)
+export default routerMap

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>