workflow-editor 0.0.81-up-tmp8 → 0.0.81-up-tmp10

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

@@ -0,0 +1,852 @@
+<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" @click="saveXml">
+        {{ $t('workflowEditorPublicModel.save') }}
+      </el-button>
+      <el-button
+        v-if="!readonly"
+        v-permission="'wf.workflowDefinition.adminSave'"
+        class="button--default"
+        @click="adminSave"
+      >
+        {{ $t('workflowEditorPublicModel.adminSave') }}
+      </el-button>
+      <el-button v-if="isShowEnable" class="button--default" @click="enableWf">
+        {{ $t('workflowEditorPublicModel.enable') }}
+      </el-button>
+      <el-button class="button--default" @click="exportProcessFromClient">
+        {{ $t('workflowEditorPublicModel.export') }}
+      </el-button>
+      <el-button v-if="!readonly" class="button--default" @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" class="button--return" @click="$emit('back')">
+        {{ $t('workflowEditorPublicModel.return') }}
+      </el-button>
+      <el-select
+        v-if="isShowDefVersionList"
+        v-model="defVersion"
+        style="padding-left: 10px; width: 200px"
+        @change="changeDefVersion"
+      >
+        <el-option
+          v-for="systemInfo in workflowDefVersionList"
+          :key="systemInfo.definitionVersion"
+          :label="systemInfo.definitionVersion"
+          :value="systemInfo.definitionVersion"
+        />
+      </el-select>
+    </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 class="tabBox" :key="canvasKey">
+        <el-tabs v-model="activeTab" 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">
+            <div style="width: 100%; height: 100%; background: #fff">
+              <pre
+                v-if="activeTab === 'xml'"
+                class="xml line-numbers"
+              ><code ref="xml" class="language-xml">{{ xml }}</code></pre>
+            </div>
+          </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.vue'
+import WorkflowCanvas from './main/canvas.vue'
+import IconSvg from './main/icon-svg.vue'
+import ContextMenu from './main/context-menu.vue'
+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.vue'
+import {authApi} from 'agilebuilder-ui'
+import {http} from 'agilebuilder-ui'
+
+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
+    },
+    // 系统编码，新增时选中的系统编码，或修改时流程定义所属的系统编码
+    systemCode: {
+      type: String,
+      default: null
+    },
+    // 系统版本号，修改时流程定义中的系统版本号，例如：v1.0.0，新增不会使用该属性
+    systemPublishVersion: {
+      type: Number,
+      default: null
+    },
+    // 新页面设计中页面编码
+    pageCode: {
+      type: String,
+      default: null
+    }
+  },
+  data: function () {
+    return {
+      activeTab: 'canvas',
+      count: 1,
+      currentPosition: { x: 0, y: 0 },
+      process: null,
+      definitionId: null,
+      xml: '',
+      contextMenuPosition: null,
+      isAdminSave: false, // 是否点击了管理员保存按钮
+      isShowEnable: false, // 流程定义是否已启用，如果已启用，则不显示“启用”按钮,草稿和禁用时才显示启用按钮
+      defVersion: 0, //流程定义版本
+      workflowDefVersionList: [], // 流程定义各版本集合
+      isShowDefVersionList: false, // 是否显示流程定义版本下拉选
+      canvasKey: 0
+    }
+  },
+  computed: {
+    ...mapGetters('wfEditor', [
+      'componentToDraw',
+      'taches',
+      'selectedTaches',
+      'transitions',
+      'contextMenuVisible',
+      'systemVersion',
+      'tableCode',
+      'pageCode',
+      'sourceComponentType'
+    ]),
+    ...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)
+        })
+      }
+    },
+    sourceComponentType(newVal) {
+      if (newVal) {
+        this.copyTache()
+      }
+    }
+  },
+  created: function () {
+    // if (this.systemPublishVersion) {
+    //   this.setSystemVersion(this.systemPublishVersion)
+    // }
+    authApi.setSessionCache('wf_editor_systemVersion', this.systemPublishVersion)
+    this.setPageCode(this.pageCode)
+    if (this.systemCode) {
+      this.setSystemCode(this.systemCode)
+    }
+
+    // 请求版本所有列表
+    if (this.systemCode) {
+      this.getWorkflowDefVersionList()
+    }
+    // 打开或新建流程图时先清空画布，开发过程中代码热更新的时候可以避免节点重复
+    this.clearCanvas()
+    if (this.id) {
+      this.definitionId = this.id
+    }
+    console.log('canvas-created=', this.code, this.id)
+    if (this.code || this.id) {
+      this.initShowDefinitionWhenUpdate(this.id, this.code, this.version)
+    } else {
+      this.isShowEnable = false
+      window.$store.commit('wfEditor/setIsCreateDefinition', 'true')
+      this.process = processTemplate.newProcess()
+      initializeProcessData(this.process)
+    }
+  },
+  mounted: function () {},
+  methods: {
+    ...mapMutations('wfEditor', [
+      'setComponentToDraw',
+      'clearCanvas',
+      'setContextMenuVisible',
+      'setSystemCode',
+      'setSystemVersion',
+      'setProcessCode',
+      'setPageCode',
+      'setSourceComponentForCopy'
+    ]),
+    initShowDefinitionWhenUpdate(defId, workflowCode, workflowVersion) {
+      window.$store.commit('wfEditor/setIsCreateDefinition', 'false')
+      let url = this.baseAPI + '/wf-editor/open-xmls/with-definitions'
+      url = this.packageUrlParam(url, defId, workflowCode, workflowVersion)
+      this.$http.get(url).then((data) => {
+        const definition = data.definition
+        if (definition) {
+          this.definitionId = definition.id
+          this.defVersion = definition.definitionVersion
+          window.$store.commit('wfEditor/setTableCode', definition.tableCode)
+          const state = definition.enable
+          if (state && state === 'ENABLE') {
+            this.isShowEnable = false
+          } else {
+            this.isShowEnable = true
+          }
+          if (definition.formCode) {
+            // 表示在流程定义模块中创建的流程
+            window.$store.commit('wfEditor/setIsHandleCreate', 'true')
+          } else {
+            // 表示在页面设计中创建的流程
+            window.$store.commit('wfEditor/setIsHandleCreate', 'false')
+          }
+        }
+        const xml = data.xml
+        this.initProcessByXml(xml, definition)
+        this.canvasKey++
+      })
+    },
+    getWorkflowDefVersionList() {
+      // 重新初始显示流程版本下拉选
+      this.isShowDefVersionList = false
+      let queryBody = {
+        wfDefinitionCode: this.code,
+        publishVersion: this.systemPublishVersion
+      }
+      http
+        .post(
+          window['$vueApp'].config.globalProperties.baseAPI +
+            `/component/super-page-design/workflow-definitions/version-list`,
+          queryBody
+        )
+        .then((res) => {
+          this.workflowDefVersionList = res
+          if (res.length > 0 && !this.defVersion) {
+            this.defVersion = res[0].definitionVersion
+          }
+          this.isShowDefVersionList = true
+        })
+    },
+    showContextMenu(event) {
+      this.setContextMenuVisible(true)
+      // 得到元素在页面上的位置信息，用来计算鼠标位置的偏移量
+      const offset = this.$refs.wfEditor.getBoundingClientRect()
+      this.contextMenuPosition = {
+        x: event.clientX - offset.x,
+        y: event.clientY - offset.y
+      }
+    },
+    changeDefVersion(newDefVersion) {
+      const defList = this.workflowDefVersionList.filter((def) => def.definitionVersion === newDefVersion)
+      if (defList && defList.length > 0) {
+        const newDef = defList[0]
+        // 打开或新建流程图时先清空画布，开发过程中代码热更新的时候可以避免节点重复
+        this.clearCanvas()
+        this.initShowDefinitionWhenUpdate(newDef.id, newDef.code, newDef.definitionVersion)
+        this.$emit('changeDefVersion', newDef)
+      }
+    },
+    initProcessByXml(xml, definition) {
+      if (!xml) {
+        // xml内容为空，则初始化xml
+        this.process = processTemplate.newProcess()
+        this.initProcessBaseInfo(definition)
+      } else {
+        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)
+      } else {
+        // 新增时，将传过来的系统编码缓存起来
+        this.setSystemCode(this.systemCode)
+      }
+      if (this.process && this.process.attr) {
+        this.setProcessCode(this.process.attr.code)
+      }
+      // 得到表单字段放到vuex
+      this.fetchFormFields()
+      this.clearCanvas()
+      initializeProcessData(this.process)
+      this.count = this.getMaxCount() + 1
+    },
+    initProcessBaseInfo(definition) {
+      this.process.attr.name = definition.name
+      this.process.attr.code = definition.code
+      this.process.properties.basicProperties.systemCode = definition.systemCode
+      if (this.pageCode) {
+        if (!this.process.properties.parameterSettings) {
+          this.process.properties.parameterSettings = {}
+        }
+        if (!this.process.properties.parameterSettings.doTask) {
+          this.process.properties.parameterSettings.doTask = {}
+        }
+        this.process.properties.parameterSettings.doTask.url = 'page:' + this.pageCode
+      }
+    },
+    fetchFormFields() {
+      const processProperties = this.process.properties.basicProperties
+      const formCode = processProperties.formCode
+      const formVersion = processProperties.formVersion
+      console.log('fetchFormFields---this.tableCode=', this.tableCode)
+      if (formCode && formCode !== '' && formVersion) {
+        // 取出formFields放到vuex中
+        processService.fetchFormFields(
+          processProperties.formCode,
+          processProperties.formVersion,
+          null,
+          this.systemPublishVersion
+        )
+      } else if (this.tableCode) {
+        // TODO： 根据数据表获得字段集合 表示在页面设计中创建的流程
+        processService.fetchFormFields(null, null, this.tableCode, this.systemPublishVersion)
+      }
+    },
+    packageUrlParam(url, defId, workflowCode, workflowVersion) {
+      if (defId) {
+        url = url + '?id=' + defId
+      } else if (workflowCode) {
+        url = url + '?code=' + workflowCode + '&version=' + workflowVersion
+      }
+      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.isShowEnable = true
+          window.$store.commit('wfEditor/setIsCreateDefinition', 'false')
+          this.$alert(this.$t('workflowEditorMessage.updateSuccessful'))
+        })
+      } else {
+        // 表示新建
+        const param = {
+          xml: xml,
+          publishVersion: this.systemPublishVersion
+        }
+        this.$http.post(this.baseAPI + '/wf-editor/workflow-definitions', param).then((definition) => {
+          // 表示草稿状态保存
+          this.isShowEnable = true
+          window.$store.commit('wfEditor/setIsCreateDefinition', 'false')
+          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,
+        publishVersion: this.systemPublishVersion
+      }
+      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.isShowEnable = true
+              window.$store.commit('wfEditor/setIsCreateDefinition', 'false')
+              this.$alert(this.$t('workflowEditorMessage.updateSuccessful'))
+            })
+          } else {
+            // 如果是禁用或启用状态，让用户选择是增加版本还是更新版本
+            this.isAdminSave = true
+          }
+        })
+      } else {
+        // 表示新建
+        const param = {
+          xml: xml,
+          publishVersion: this.systemPublishVersion
+        }
+        this.$http.post(this.baseAPI + '/wf-editor/workflow-definitions', param).then((definition) => {
+          // 表示草稿状态保存
+          this.isShowEnable = true
+          window.$store.commit('wfEditor/setIsCreateDefinition', 'false')
+          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(() => {
+        window.$store.commit('wfEditor/setIsCreateDefinition', 'false')
+        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.isShowEnable = true
+        window.$store.commit('wfEditor/setIsCreateDefinition', 'false')
+        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++
+      }
+    },
+    copyTache() {
+      const sourceTache = this.selectedTaches && this.selectedTaches.length > 0 ? this.selectedTaches[0] : null
+      if (!sourceTache) {
+        return
+      }
+      const tache = JSON.parse(JSON.stringify(sourceTache))
+      const tacheType = tache.type
+      const ref = tache.ref
+      // 组件类型转换为首字母小写形式
+      ref.attr.id = tacheType.charAt(0).toLowerCase() + tacheType.substring(1) + '_' + this.count
+      ref.attr.name = sourceTache.name + '_copy'
+      // 默认id是组件类型加上下划线和数字序号，每次打开流程图的时候都需要动态计算最大的序号，然后加1作为count的的初始值
+      tache.id = ref.attr.id
+      tache.name = ref.attr.name
+      tache.x = sourceTache.x + 20 // 偏移20个像素
+      tache.y = sourceTache.y + 20
+      tache.isSelected = false
+      tache.ref = ref
+      this.taches.push(tache)
+      this.count++
+      // 还原拷贝的状态位
+      this.setSourceComponentForCopy('')
+    },
+    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 = ''
+      }
+    },
+    // 启用流程定义
+    enableWf() {
+      if (this.definitionId) {
+        this.$http.put(this.baseAPI + '/wf-editor/workflow-editors/' + this.definitionId + '/states').then(() => {
+          this.getWorkflowDefVersionList()
+          this.isShowEnable = false
+          this.$alert(this.$t('workflowEditorMessage.enabledSuccessfully'))
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$toolboxWidth: 150px;
+$buttonAreaHeight: 50px;
+$tabsHeaderHeight: 41px;
+.button-area {
+  padding: 5px 0 5px 5px;
+  height: $buttonAreaHeight;
+  background-color: #ffffff;
+}
+.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%;
+}
+
+.tabBox {
+  padding: 20px;
+}
+
+.tab-pane {
+  height: 100%;
+  width: 100%;
+}
+// 在scss中需要使用/deep/这个别名来代替 '>>>'
+.tabs :deep(.el-tabs__content) {
+  //height: calc(100% - #{$tabsHeaderHeight});
+  height: calc(100vh - 138px);
+  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;
+}
+
+:deep(.el-tabs__header .el-tabs__item.is-active) {
+  background-image: url('./assets/tab-select.png') !important;
+  background-size: 100% 100%;
+  min-width: 100px;
+  text-align: center;
+}
+
+:deep(.el-tabs__header .el-tabs__item) {
+  background-image: url('./assets/tab-selectWhite.png') !important;
+  background-size: 100% 100%;
+  min-width: 100px;
+  text-align: center;
+}
+
+/* 去除table选中下划线 */
+:deep(.el-tabs__active-bar) {
+  display: none;
+}
+
+:deep(.el-tabs__item) {
+  padding: 0;
+}
+
+/* 去掉tab横线 */
+:deep(.el-tabs__nav-wrap::after) {
+  width: 0;
+}
+
+/* 去掉卡片和tab表头的距离 */
+:deep(.el-tabs__header) {
+  margin: 0;
+}
+</style>