workflow-editor 0.0.6-up → 0.0.8-up

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

@@ -1,606 +0,0 @@
-<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%;
-}
-
-.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>