workflow-editor 0.9.68-dw → 0.9.68

package/packages/workflow-editor/src/workflow-editor.vue

@@ -0,0 +1,607 @@
+<template>
+  <div
+    ref="wfEditor"
+    style="position:relative;height:100%;"
+    @mousedown="setContextMenuVisible(false)"
+    @mousewheel="setContextMenuVisible(false)"
+  >
+    <el-row class="button-area">
+      <el-button v-if="!readonly" type="primary" size="small" @click="saveXml">
+        {{ $t('workflowEditorPublicModel.save') }}
+      </el-button>
+      <el-button v-if="!readonly" v-permission="'wf.workflowDefinition.adminSave'" type="primary" size="small" @click="adminSave">
+        {{ $t('workflowEditorPublicModel.adminSave') }}
+      </el-button>
+      <el-button type="primary" size="small" @click="exportProcessFromClient">
+        {{ $t('workflowEditorPublicModel.export') }}
+      </el-button>
+      <el-button
+        v-if="!readonly"
+        size="small"
+        type="primary"
+        @click="selectProcessFile"
+      >
+        {{ $t('workflowEditorPublicModel.open') }}
+        <input
+          ref="processFile"
+          type="file"
+          name="processFile"
+          accept=".xml"
+          style="display:none"
+          @change="openXmlFromClient"
+        >
+      </el-button>
+
+      <el-button type="primary" size="small" @click="$emit('back')">
+        {{ $t('workflowEditorPublicModel.return') }}
+      </el-button>
+    </el-row>
+    <div
+      class="main"
+      @mousedown="startDrag"
+      @mousemove="drag"
+      @mouseup="endDrag"
+      @mouseleave="clearStatus"
+    >
+      <toolbox
+        v-if="!readonly"
+        class="toolbox"
+        onselectstart="return false"
+        oncontextmenu="return false"
+      />
+      <section>
+        <el-tabs v-model="activeTab" type="border-card" class="tabs">
+          <el-tab-pane :label="$t('workflowEditorPublicModel.flowChart')" name="canvas" class="tab-pane">
+            <workflow-canvas
+              onselectstart="return false"
+              :process="process"
+              class="canvas"
+              @mouseup.native="addTache"
+              @contextmenu.native.prevent="showContextMenu"
+            />
+          </el-tab-pane>
+          <el-tab-pane
+            label="XML"
+            name="xml"
+            class="tab-pane"
+          >
+            <pre v-if="activeTab==='xml'" class="xml line-numbers"><code ref="xml" class="language-xml">{{ xml }}</code></pre>
+          </el-tab-pane>
+        </el-tabs>
+      </section>
+    </div>
+    <icon-svg
+      v-if="componentToDraw"
+      :style="{
+        height:componentInfo.height,
+        width:componentInfo.width,
+        color:componentInfo.color,
+        left: currentPosition.x+'px',
+        top:currentPosition.y+'px',
+      }"
+      :icon="componentInfo.icon"
+      class="component-icon"
+    />
+    <context-menu v-if="contextMenuVisible" :style="{position:'absolute',left: contextMenuPosition.x+ 'px',top:contextMenuPosition.y+'px'}" />
+    <admin-save-dialog v-if="isAdminSave" @close="isAdminSave = false" @update="updateWfVersion" @add="addWfVersion" />
+  </div>
+</template>
+<script>
+import './assets/wf-editor-icons.js'
+import { mapGetters, mapMutations } from 'vuex'
+import { getMousePosition, removeTextProperty, getComponentInfo, initializeProcessData, processTemplate } from './util'
+import Toolbox from './main/toolbox'
+import WorkflowCanvas from './main/canvas'
+import IconSvg from './main/icon-svg'
+import ContextMenu from './main/context-menu'
+import convert from 'xml-js'
+import processService from './process-service'
+import FileSaver from 'file-saver'
+import Prism from 'prismjs'
+import AdminSaveDialog from './main/admin-save-dialog'
+export default {
+  name: 'WorkflowEditor',
+  components: {
+    WorkflowCanvas,
+    Toolbox,
+    IconSvg,
+    ContextMenu,
+    AdminSaveDialog
+  },
+  props: {
+    // 流程编码
+    code: {
+      type: String,
+      default: null
+    },
+    // 流程版本
+    version: {
+      type: Number,
+      default: null
+    },
+    // 流程id
+    id: {
+      type: Number,
+      default: null
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data: function() {
+    return {
+      activeTab: 'canvas',
+      count: 1,
+      currentPosition: { x: 0, y: 0 },
+      process: null,
+      definitionId: null,
+      xml: '',
+      contextMenuPosition: null,
+      isAdminSave: false // 是否点击了管理员保存按钮
+    }
+  },
+  computed: {
+    ...mapGetters(
+      'wfEditor', ['componentToDraw', 'taches', 'transitions', 'contextMenuVisible']
+    ),
+    ...mapGetters([
+      'sidebar'
+    ]),
+    componentInfo() {
+      return getComponentInfo(this.componentToDraw)
+    }
+  },
+  watch: {
+    activeTab(name) {
+      if (name === 'xml') {
+        this.xml = this.getProcessXml()
+        this.$nextTick(function() {
+          Prism.highlightElement(this.$refs.xml)
+        })
+      }
+    }
+  },
+  created: function() {
+    // 打开或新建流程图时先清空画布，开发过程中代码热更新的时候可以避免节点重复
+    this.clearCanvas()
+    if (this.id) {
+      this.definitionId = this.id
+    }
+    console.log('canvas-created=', this.code, this.id)
+    if (this.code || this.id) {
+      let url = this.baseAPI + '/wf-editor/open-xmls/with-definitions'
+      url = this.packageUrlParam(url)
+      this.$http.get(url).then(xml => {
+        this.initProcessByXml(xml)
+      })
+    } else {
+      this.process = processTemplate.newProcess()
+      initializeProcessData(this.process)
+    }
+  },
+  mounted: function() {
+
+  },
+  methods: {
+    ...mapMutations('wfEditor', [
+      'setComponentToDraw',
+      'clearCanvas',
+      'setContextMenuVisible',
+      'setSystemCode',
+      'setProcessCode'
+    ]),
+    showContextMenu(event) {
+      console.log(event)
+      this.setContextMenuVisible(true)
+      // 得到元素在页面上的位置信息，用来计算鼠标位置的偏移量
+      const offset = this.$refs.wfEditor.getBoundingClientRect()
+      this.contextMenuPosition = {
+        x: event.clientX - offset.x,
+        y: event.clientY - offset.y
+      }
+    },
+    initProcessByXml(xml) {
+      const options = { nativeType: true, attributesKey: 'attr', compact: true, ignoreComment: true, spaces: 4 }
+      const processObj = convert.xml2js(xml, options)
+      removeTextProperty(processObj.process)
+      this.process = processObj.process
+      if (this.process && this.process.properties && this.process.properties.basicProperties) {
+        this.setSystemCode(this.process.properties.basicProperties.systemCode)
+      }
+      if (this.process && this.process.attr) {
+        this.setProcessCode(this.process.attr.code)
+      }
+      // 得到表单字段放到vuex
+      this.fetchFormFields()
+      initializeProcessData(this.process)
+      this.count = this.getMaxCount() + 1
+    },
+    fetchFormFields() {
+      const processProperties = this.process.properties.basicProperties
+      const formCode = processProperties.formCode
+      const formVersion = processProperties.formVersion
+      if (formCode && formCode !== '' && formVersion) {
+      // 取出formFields放到vuex中
+        processService.fetchFormFields(processProperties.formCode, processProperties.formVersion)
+      }
+    },
+    packageUrlParam(url) {
+      if (this.id) {
+        url = url + '?id=' + this.id
+      } else if (this.code) {
+        url = url + '?code=' + this.code + '&version=' + this.version
+      }
+      return url
+    },
+    // 获得流程定义xml
+    getProcessXml() {
+      const process = {
+        start: [],
+        humanTask: [],
+        decision: [],
+        transition: [],
+        fork: [],
+        join: [],
+        subprocess: [],
+        humanDecision: [],
+        copyTask: [],
+        autoTask: [],
+        end: []
+      }
+      process.attr = this.process.attr
+      process.properties = this.process.properties
+      this.taches.map(tache => {
+        const type = tache.type
+        // type的首字母小写形式就是process中各个数组的名字，ref才是真正的环节信息
+        process[type.charAt(0).toLowerCase() + type.substring(1)].push(tache.ref)
+        // 补充完整图形位置信息
+        tache.ref.g = {
+          x: tache.x,
+          y: tache.y,
+          width: tache.width,
+          height: tache.height
+        }
+      })
+      this.transitions.map(transition => {
+        // ref才是真正的流向信息
+        process.transition.push(transition.ref)
+        // 补充完整图形位置信息
+        transition.ref.g = {
+          fromJoint: transition.startJoint.position,
+          toJoint: transition.endJoint.position,
+          coordinate: '',
+          lineType: transition.lineInfo.type
+        }
+        if (transition.lineInfo.type === 'CurveLine' && transition.lineInfo.controlPoint) {
+          transition.ref.g.coordinate = transition.lineInfo.controlPoint.x + ',' + transition.lineInfo.controlPoint.y
+        } else if (transition.lineInfo.type === 'BrokenLine' && transition.lineInfo.controlPoint) {
+          let coordinate = ''
+          transition.lineInfo.controlPoint.forEach(point => {
+            coordinate += point.x + ',' + point.y + ';'
+          })
+          transition.ref.g.coordinate = coordinate
+        }
+      })
+      const options = { attributesKey: 'attr', compact: true, ignoreComment: true, spaces: 4 }
+      let result = convert.json2xml({ process }, options)
+      result = '<?xml version="1.0" encoding="utf-8"?>\n' + result
+      return result
+    },
+    // 保存xml
+    saveXml() {
+      const xml = this.getProcessXml()
+      // console.log(xml)
+      // 保存流程定义xml
+      if (this.code || this.id || this.definitionId) {
+        // 表示修改
+        this.saveWf(xml, this.baseAPI + '/wf-editor/workflow-definitions/updates')
+          .then(() => {
+            this.$alert(this.$t('workflowEditorMessage.updateSuccessful'))
+          })
+      } else {
+        // 表示新建
+        const param = {
+          xml: xml
+        }
+        this.$http.post(this.baseAPI + '/wf-editor/workflow-definitions', param).then(definition => {
+          this.definitionId = definition.id
+          this.$alert(this.$t('workflowEditorMessage.savedSuccessfully'))
+          // console.log('新建成功' + this.definitionId)
+        })
+      }
+    },
+    saveWf(xml, url, message) {
+      return new Promise((resolve, reject) => {
+        const param = this.packageSaveXmlParam(xml)
+
+        this.$http.post(url, param).then(definition => {
+          this.definitionId = definition.id
+          // console.log('更新成功' + this.definitionId)
+          resolve()
+        })
+      })
+    },
+    packageSaveXmlParam(xml) {
+      const param = {
+        xml: xml
+      }
+      if (this.definitionId) {
+        // 表示已保存过，新流程定义的id
+        param.id = this.definitionId
+      } else {
+        if (this.id) {
+          param.id = this.id
+        } else if (this.code) {
+          param.code = this.code
+          param.version = this.version
+        }
+      }
+      return param
+    },
+    adminSave() {
+      const xml = this.getProcessXml()
+      // console.log(xml)
+      // 保存流程定义xml
+      if (this.code || this.id || this.definitionId) {
+        // 表示修改
+        const url = this.baseAPI + '/wf-editor/workflow-definitions/states'
+        const param = {}
+        if (this.definitionId) {
+          // 表示已保存过，新流程定义的id
+          param.id = this.definitionId
+        } else {
+          if (this.id) {
+            param.id = this.id
+          } else if (this.code) {
+            param.code = this.code
+            param.version = this.version
+          }
+        }
+        this.$http.post(url, param).then(state => {
+          if (state === 'DRAFT') {
+            // 如果是草稿状态直接保存
+            this.saveWf(xml, this.baseAPI + '/wf-editor/workflow-definitions/updates')
+              .then(() => {
+                this.$alert(this.$t('workflowEditorMessage.updateSuccessful'))
+              })
+          } else {
+            // 如果是禁用或启用状态，让用户选择是增加版本还是更新版本
+            this.isAdminSave = true
+          }
+        })
+      } else {
+        // 表示新建
+        const param = {
+          xml: xml
+        }
+        this.$http.post(this.baseAPI + '/wf-editor/workflow-definitions', param).then(definition => {
+          this.definitionId = definition.id
+          this.$alert(this.$t('workflowEditorMessage.savedSuccessfully'))
+          // console.log('新建成功' + this.definitionId)
+        })
+      }
+    },
+    updateWfVersion() {
+      const xml = this.getProcessXml()
+      this.saveWf(xml, this.baseAPI + '/wf-editor/workflow-definitions/update-version')
+        .then(() => {
+          this.isAdminSave = false
+          this.$alert(this.$t('workflowEditorMessage.updateVersionSuccessful'))
+        })
+    },
+    addWfVersion() {
+      const xml = this.getProcessXml()
+      this.saveWf(xml, this.baseAPI + '/wf-editor/workflow-definitions/updates')
+        .then(() => {
+          this.isAdminSave = false
+          this.$alert(this.$t('workflowEditorMessage.addVersionSuccessful'))
+        })
+    },
+    exportProcessFromClient() {
+      const blob = new Blob([this.getProcessXml()], { type: 'text/xml;charset=utf-8' })
+      FileSaver.saveAs(blob, this.process.attr.name + '.xml')
+    },
+    // 导出xml
+    exportProcess() {
+      const xml = this.getProcessXml()
+      this.$http({
+        method: 'post',
+        url: this.baseAPI + '/wf-editor/save-as-xmls',
+        data: {
+          xmlContent: xml
+        }
+      }).then((response) => {
+        this.download(response)
+        console.log(this.$t('workflowEditorMessage.exportSucceeded'))
+      })
+    },
+    // 下载文件
+    download(data) {
+      if (!data) {
+        return
+      }
+      const url = window.URL.createObjectURL(new Blob([data]))
+      const link = document.createElement('a')
+      link.style.display = 'none'
+      link.href = url
+      link.setAttribute('download', 'myXml.xml')
+
+      document.body.appendChild(link)
+      link.click()
+    },
+    // 打开xml文件成功后
+    uploadSuccess(response, file, fileList) {
+      const xml = response
+      // console.log('xml=', xml)
+      // 打开或新建流程图时先清空画布，开发过程中代码热更新的时候可以避免节点重复
+      this.clearCanvas()
+      this.initProcessByXml(xml)
+      this.$refs.upload.clearFiles()
+    },
+    getCurrentPosition(event) {
+      if (this.componentToDraw) {
+        const offset = this.$refs.wfEditor.getBoundingClientRect()
+
+        this.currentPosition = { x: event.clientX - offset.x - 22, y: event.clientY - offset.y - 22 }
+      }
+    },
+    startDrag(event) {
+      this.getCurrentPosition(event)
+    },
+    drag(event) {
+      this.getCurrentPosition(event)
+    },
+    endDrag() {
+      if (this.componentToDraw) {
+        this.setComponentToDraw('')
+      }
+    },
+
+    addTache(event) {
+      if (this.componentToDraw) {
+        const positionInSVG = getMousePosition(event)
+        const ref = processTemplate['new' + this.componentToDraw]()
+        // 组件类型转换为首字母小写形式
+        ref.attr.id = this.componentToDraw.charAt(0).toLowerCase() + this.componentToDraw.substring(1) + '_' + this.count
+        const tache = {
+          // 默认id是组件类型加上下划线和数字序号，每次打开流程图的时候都需要动态计算最大的序号，然后加1作为count的的初始值
+          id: ref.attr.id,
+          name: ref.attr.name,
+          x: positionInSVG.x - this.componentInfo.width / 2,
+          y: positionInSVG.y - this.componentInfo.height / 2,
+          width: this.componentInfo.width,
+          height: this.componentInfo.height,
+          type: this.componentToDraw,
+          isSelected: false
+        }
+        tache.ref = ref
+        this.taches.push(tache)
+        this.count++
+      }
+    },
+    clearStatus() {
+      if (this.componentToDraw) {
+        this.setComponentToDraw('')
+      }
+    },
+    getMaxCount() {
+      let max = 0
+      this.taches.map(item => {
+        // 自动生成的id以下划线加数字编号结尾
+        let index = item.id.substring(item.id.lastIndexOf('_') + 1)
+        index = +index
+        if (max < index) {
+          max = index
+        }
+      })
+      return max
+    },
+    selectProcessFile() {
+      this.$refs.processFile.click()
+    },
+    openXmlFromClient() {
+      if (this.$refs.processFile.value === '') return
+      const file = this.$refs.processFile.files[0]
+      const reader = new FileReader()
+      // 本地直接读取文件
+      reader.readAsText(file)
+      const vm = this
+      reader.onload = function() {
+        // 打开或新建流程图时先清空画布，开发过程中代码热更新的时候可以避免节点重复
+        vm.clearCanvas()
+        vm.initProcessByXml(reader.result)
+        vm.$refs.processFile.value = ''
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+$toolboxWidth:150px;
+$buttonAreaHeight:50px;
+$tabsHeaderHeight:41px;
+.button-area{
+  padding:5px 0 5px 5px;
+  height: $buttonAreaHeight;
+}
+.el-row{
+  border: 1px solid #f1f1f1;
+  border-radius: 5px;
+}
+.el-col{
+  padding-left:5px;
+}
+.main{
+  position: relative;
+  display:flex;
+  height: calc(100% - #{$buttonAreaHeight});
+  width:100%;
+}
+.canvas-container{
+  position: relative;
+  // display:flex;
+  height: calc(100% - #{$buttonAreaHeight});
+  width:100%;
+}
+.toolbox{
+  width:$toolboxWidth;
+  overflow-y:auto;
+  height: 100%;
+  // border:1px solid black;
+  background: #f7f7f7;
+  padding: 10px;
+  // min-height: 500px;
+  text-align: center;
+  flex:none;
+  // min-width: 140px;
+  // max-width:180px;
+}
+section{
+  overflow: hidden;
+  flex:1 1 auto;
+  height:100%;
+  padding: 0;
+  // min-height: 500px;
+}
+.tabs{
+  height:100%;
+  width:100%;
+}
+
+.tab-pane{
+  height:100%;
+  width:100%;
+}
+// 在scss中需要使用/deep/这个别名来代替 '>>>'
+.tabs /deep/ .el-tabs__content{
+  height: calc(100% - #{$tabsHeaderHeight});
+  padding:10px;
+  width:100%;
+	box-sizing: border-box;
+}
+
+.canvas,.xml{
+  overflow: auto;
+  height:100%;
+  width:100%;
+  // border:1px solid red;
+  // background: #ffffff;
+  padding: 0;
+  min-height: 500px;
+
+}
+pre{
+  margin:0;
+  font-size:16px;
+}
+.component-icon {
+  position: absolute;
+  pointer-events: none;
+  // border: 1px solid red;
+}
+.canvas /deep/ .draggable{
+    cursor: move;
+}
+
+</style>