workflow-editor 0.9.84-dw-tmp2 → 0.9.84-dw-tmp3

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

@@ -0,0 +1,153 @@
+<template>
+  <div
+    ref="wfEditor"
+    style="position:relative;height:100%;"
+  >
+    <div
+      class="main"
+    >
+      <section>
+        <wf-history-canvas
+          onselectstart="return false"
+          :process="process"
+          :histories="histories"
+          :current-tasks="currentTasks"
+          :all-process-i18n="allProcessI18n"
+          :show-history="true"
+          class="canvas"
+          @contextmenu.native.prevent="showContextMenu"
+        />
+      </section>
+    </div>
+  </div>
+</template>
+<script>
+import './assets/wf-editor-icons.js'
+import { mapGetters, mapMutations } from 'vuex'
+import { removeTextProperty, initializeProcessData, processTemplate } from './util'
+import WfHistoryCanvas from './main/wf-history-canvas'
+import convert from 'xml-js'
+import ApiJs from './api'
+export default {
+  name: 'WorkflowHistory',
+  components: {
+    WfHistoryCanvas
+  },
+  props: {
+    // 实例id
+    id: {
+      type: Number,
+      default: null
+    }
+  },
+  data: function() {
+    return {
+      process: null,
+      histories: [],
+      currentTasks: [],
+      allProcessI18n: null
+    }
+  },
+  computed: {
+    ...mapGetters(
+      'wfEditor', ['componentToDraw', 'taches', 'transitions', 'contextMenuVisible']
+    ),
+    ...mapGetters([
+      'sidebar'
+    ])
+
+  },
+  watch: {
+
+  },
+  created: function() {
+    this.showHistory()
+  },
+  mounted: function() {
+
+  },
+  methods: {
+    ...ApiJs,
+    ...mapMutations('wfEditor', [
+      'setComponentToDraw',
+      'clearCanvas',
+      'setContextMenuVisible',
+      'setProcessI18n'
+    ]),
+    showHistory() {
+      // 打开或新建流程图时先清空画布，开发过程中代码热更新的时候可以避免节点重复
+      this.clearCanvas()
+      if (this.id) {
+        this.$http.get(this.baseAPI + '/wf-editor/i18n-settings/get-bundle-info?workflowId=' + this.id).then(processI18n => {
+          this.allProcessI18n = processI18n
+          const url = this.baseAPI + '/wf-editor/instance-histories/' + this.id
+          this.$http.get(url).then(data => {
+            this.initProcessByXml(data.xml)
+            let mainBundleCode
+            if (data.histories && data.histories.length > 0) {
+              mainBundleCode = data.histories[0].bundleCode
+            }
+            if (!mainBundleCode && data.currentTasks && data.currentTasks.length > 0) {
+              mainBundleCode = data.currentTasks[0].bundleCode
+            }
+            if (mainBundleCode) {
+              this.setProcessI18n(processI18n[mainBundleCode])
+            }
+            this.histories = data.histories
+            this.currentTasks = data.currentTasks
+          })
+        })
+      } else {
+        this.process = processTemplate.newProcess()
+        initializeProcessData(this.process)
+      }
+    },
+    showContextMenu(event) {
+
+    },
+    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
+
+      initializeProcessData(this.process)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.main{
+  position: relative;
+  display:flex;
+  height: 100%;
+  width:100%;
+}
+.canvas-container{
+  position: relative;
+  // display:flex;
+  height: 100%;
+  width:100%;
+}
+
+section{
+  overflow: hidden;
+  width:100%;
+  height:100%;
+  padding: 0;
+  // min-height: 500px;
+}
+.canvas{
+  overflow: auto;
+  height:100%;
+  // border:1px solid red;
+  // background: #ffffff;
+  padding: 0;
+  min-height: 500px;
+
+}
+.canvas /deep/ .draggable{
+    cursor: default;
+}
+</style>
+

package/src/index.js

@@ -0,0 +1,28 @@
+// 依次导入组件库的各个组件
+import workflow from '../packages/workflow-editor'
+import formValidator from '../packages/plugins/index'
+const WorkflowEditor = workflow.WorkflowEditor
+const WorkflowHistory = workflow.WorkflowHistory
+const wfEditorStore = workflow.wfEditorStore
+
+// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
+const install = function(Vue) {
+  if (install.installed) return
+  // components.map(component => Vue.component(component.name, component))
+  Vue.use(formValidator)
+}
+
+//  判断是否是直接引入vue的js文件，即全局引用可自动安装所有组件
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+export {
+  WorkflowEditor,
+  WorkflowHistory
+}
+
+export default {
+  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
+  install,
+  wfEditorStore
+}