workflow-editor 0.0.81-up → 0.0.81-up-tmp1

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

@@ -1,852 +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" @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/src/utils/auth-api'
-import http from 'agilebuilder-ui/src/utils/request'
-
-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>