workflow-editor 0.9.86-dw → 0.9.87-dw

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/.babelrc

@@ -1,40 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "loose": false,
-        "modules": "commonjs",
-        "spec": true,
-        "useBuiltIns": "usage",
-        "corejs": "2.6.9"
-      }
-    ]
-  ],
-  "plugins": [
-    "@babel/plugin-transform-runtime",
-    ["component", {
-      "libraryName": "workflow-editor",
-      "libDir": "lib",
-      "styleLibrary": {
-          "name": "styles",
-          "base": false, // no base.css file
-          "path": "[module].css"
-      }
-  }]
-  ]
-}
-
-// {
-//   "plugins": [
-//       ["component", {
-//           "libraryName": "imatrix-ui",
-//           "libDir": "lib",
-//           "styleLibrary": {
-//               "name": "styles",
-//               "base": false, // no base.css file
-//               "path": "[module].css"
-//           }
-//       }]
-//   ]
-// }

package/build/components.json

@@ -1,3 +0,0 @@
-{
-  "workflow-editor": "packages/workflow-editor/index.js"
-}

package/build/gen-style.js

@@ -1,32 +0,0 @@
-const gulp = require('gulp');
-const cleanCSS = require('gulp-clean-css');
-const sass = require('gulp-sass');
-const rename = require('gulp-rename');
-const autoprefixer = require('gulp-autoprefixer');
-const components = require('./components.json')
-
-function buildCss(cb) {
-  gulp.src('../src/styles/index.scss')
-    .pipe(sass())
-    .pipe(autoprefixer())
-    .pipe(cleanCSS())
-    .pipe(rename('lime-ui.css'))
-    .pipe(gulp.dest('../lib/styles'));
-  cb()
-}
-
-
-function buildSeperateCss(cb) {
-  Object.keys(components).forEach(compName => {
-    gulp.src(`../src/styles/${compName}.scss`)
-      .pipe(sass())
-      .pipe(autoprefixer())
-      .pipe(cleanCSS())
-      .pipe(rename(`${compName}.css`))
-      .pipe(gulp.dest('../lib/styles'));
-  })
-
-  cb()
-}
-
-exports.default = gulp.series(buildCss, buildSeperateCss) // 加上 buildSeperateCss

package/build/webpack.base.js

@@ -1,173 +0,0 @@
-const path = require('path');
-const webpack = require('webpack');
-const pkg = require('../package.json');
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
-function resolve(dir) {
-  return path.join(__dirname, '..', dir);
-}
-
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader',
-        options: {
-          loaders: {
-            css: [
-              'vue-style-loader',
-              {
-                loader: 'css-loader',
-                options: {
-                  sourceMap: false,
-                },
-              },
-            ],
-            less: [
-              'vue-style-loader',
-              {
-                loader: 'css-loader',
-                options: {
-                  sourceMap: false,
-                },
-              },
-              {
-                loader: 'less-loader',
-                options: {
-                  sourceMap: false,
-                },
-              },
-            ],
-          },
-          postLoaders: {
-            html: 'babel-loader?sourceMap'
-          },
-          sourceMap: false,
-        }
-      },
-      {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        options: {
-          sourceMap: false,
-        },
-        exclude: /node_modules/,
-      },
-      {
-        test: /\.css$/,
-        loaders: [
-          {
-            loader: 'style-loader',
-            options: {
-              sourceMap: false,
-            },
-          },
-          {
-            loader: 'css-loader',
-            options: {
-              sourceMap: false,
-            },
-          }
-        ]
-      },
-      {
-        test: /\.less$/,
-        loaders: [
-          // {
-          //   loader: 'style-loader',
-          //   options: {
-          //     sourceMap: true,
-          //   },
-          // },
-          {
-            loader: MiniCssExtractPlugin.loader,
-          },
-          {
-            loader: 'css-loader',
-            options: {
-              sourceMap: false,
-            },
-          },
-          {
-            loader: 'less-loader',
-            options: {
-              sourceMap: false,
-            },
-          },
-        ]
-      },
-      {
-        test: /\.scss$/,
-        loaders: [
-          // {
-          //   loader: 'style-loader',
-          //   options: {
-          //     sourceMap: true,
-          //   },
-          // },
-          {
-            loader: MiniCssExtractPlugin.loader
-          },
-          {
-            loader: 'css-loader',
-            options: {
-              sourceMap: false,
-            },
-          },
-          {
-            loader: 'sass-loader',
-            options: {
-              sourceMap: false,
-            },
-          },
-        ]
-      },
-      {
-        test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
-        loader: 'url-loader?limit=8192'
-      }
-    ]
-  },
-  resolve: {
-    extensions: ['.js', '.vue'],
-    alias: {
-      'vue': 'vue/dist/vue.esm.js',
-      '@': resolve('src')
-    }
-  },
-  externals: { // 外部化对vue的依赖
-    vue: {
-      root: 'Vue',
-      commonjs: 'vue',
-      commonjs2: 'vue',
-      amd: 'vue'
-    },
-    vuex: {
-      root: 'Vuex',
-      commonjs: 'vuex',
-      commonjs2: 'vuex',
-      amd: 'vuex'
-    },
-    // 'vue-i18n': {
-    //   root: 'VueI18n',
-    //   commonjs: 'vue-i18n',
-    //   commonjs2: 'vue-i18n',
-    //   amd: 'vue-i18n'
-    // },
-    'js-cookie': {
-      root: 'JsCookie',
-      commonjs: 'js-cookie',
-      commonjs2: 'js-cookie',
-      amd: 'js-cookie'
-    }
-  },
-  plugins: [
-    new webpack.optimize.ModuleConcatenationPlugin(),
-    new webpack.DefinePlugin({
-      'process.env.VERSION': `'${pkg.version}'`
-    }),
-    new VueLoaderPlugin()
-  ]
-}

package/build/webpack.component.js

@@ -1,46 +0,0 @@
-const path = require('path');
-const webpack = require('webpack');
-const merge = require('webpack-merge');
-const webpackBaseConfig = require('./webpack.base.js');
-const components = require('./components.json')
-
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
-process.env.NODE_ENV = 'production';
-
-const basePath = path.resolve(__dirname, '../')
-let entries = {}
-Object.keys(components).forEach(key => {
-  entries[key] = path.join(basePath, '.', components[key])
-})
-
-module.exports = merge(webpackBaseConfig, {
-  devtool: 'nosources',
-  mode: "production",
-  entry: entries,
-  output: {
-    path: path.resolve(__dirname, '../lib'),
-    publicPath: '/lib/',
-    filename: '[name].js',
-    chunkFilename: '[id].js',
-    library: 'imatrix-ui',
-    libraryTarget: 'umd',
-    umdNamedDefine: true
-  },
-  externals: {
-    vue: {
-      root: 'Vue',
-      commonjs: 'vue',
-      commonjs2: 'vue',
-      amd: 'vue'
-    }
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': '"production"'
-    }),
-    new MiniCssExtractPlugin({
-      filename: 'css/[name].css'
-    })
-  ]
-});

package/build/webpack.prod.js

@@ -1,31 +0,0 @@
-const path = require('path');
-const webpack = require('webpack');
-const merge = require('webpack-merge');
-const webpackBaseConfig = require('./webpack.base.js');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
-process.env.NODE_ENV = 'production';
-
-module.exports = merge(webpackBaseConfig, {
-  devtool: 'nosources',
-  mode: "production",
-  entry: {
-    main: path.resolve(__dirname, '../src/index.js')  // 将src下的index.js 作为入口点
-  },
-  output: {
-    path: path.resolve(__dirname, '../lib'),
-    publicPath: '/lib/',
-    filename: 'workflow-editor.min.js',  // 改成自己的类库名
-    library: 'workflow-editor', // 类库导出
-    libraryTarget: 'umd',
-    umdNamedDefine: true
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': '"production"'
-    }),
-    new MiniCssExtractPlugin({
-      filename: 'css/workflow-editor.css'
-    })
-  ]
-})

package/lib/css/workflow-editor.css

@@ -1,16 +0,0 @@
-h3[data-v-9c5970fe]{color:#999999;margin:0;padding:0;font-weight:bold;font-size:18px}.el-button[data-v-9c5970fe]{margin:6px 0;min-width:110px;padding:9px 15px}.el-button i[data-v-9c5970fe]{padding-right:4px}
-
-.group[data-v-70c39db1]{font-size:14px;width:100%}.item[data-v-70c39db1]{float:left;list-style-type:none;width:33.33%;margin-bottom:18px}.item-content[data-v-70c39db1]{height:calc(100vh - 300px);padding-left:20px;overflow:auto}
-
-#appContainer[data-v-016e1d5a] .el-checkbox{display:block}#appContainer[data-v-016e1d5a] .el-transfer-panel{width:400px}#appContainer[data-v-016e1d5a] .ellipsis{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;width:55%}
-
-.tooltip[data-v-dd12406c]{position:absolute;background:#fff;min-width:150px;border-radius:4px;border:1px solid #ebeef5;padding:12px;z-index:2000;color:#606266;line-height:1.4;text-align:justify;font-size:14px;box-shadow:0 2px 12px 0 rgba(0,0,0,0.1);word-break:break-all}
-
-li[data-v-2554d9c6]{color:#333}.context-menu[data-v-2554d9c6]{position:fixed;background:#fff;z-index:999;padding:5px;margin:0}.context-menu li[data-v-2554d9c6]{min-width:75px;height:28px;line-height:28px;text-align:left;color:#1a1a1a}.context-menu li[data-v-2554d9c6]:hover{background:#42b983;color:#fff}.context-menu[data-v-2554d9c6]{border:1px solid #eee;box-shadow:0 0.5em 1em 0 rgba(0,0,0,0.1);border-radius:5px}li[data-v-2554d9c6]{list-style-type:none}
-
-.button-area[data-v-37937af4]{padding:5px 0 5px 5px;height:50px}.el-row[data-v-37937af4]{border:1px solid #f1f1f1;border-radius:5px}.el-col[data-v-37937af4]{padding-left:5px}.main[data-v-37937af4]{position:relative;display:flex;height:calc(100% - 50px);width:100%}.canvas-container[data-v-37937af4]{position:relative;height:calc(100% - 50px);width:100%}.toolbox[data-v-37937af4]{width:150px;overflow-y:auto;height:100%;background:#f7f7f7;padding:10px;text-align:center;flex:none}section[data-v-37937af4]{overflow:hidden;flex:1 1 auto;height:100%;padding:0}.tabs[data-v-37937af4]{height:100%;width:100%}.tab-pane[data-v-37937af4]{height:100%;width:100%}.tabs[data-v-37937af4] .el-tabs__content{height:calc(100% - 41px);padding:10px;width:100%}.canvas[data-v-37937af4],.xml[data-v-37937af4]{overflow:auto;height:100%;width:100%;padding:0;min-height:500px}pre[data-v-37937af4]{margin:0;font-size:16px}.component-icon[data-v-37937af4]{position:absolute;pointer-events:none}.canvas[data-v-37937af4] .draggable{cursor:move}
-
-#_subprocess-content[data-v-d95c25fc]{width:100%;height:calc(100vh - 200px)}
-
-.main[data-v-422096c3]{position:relative;display:flex;height:100%;width:100%}.canvas-container[data-v-422096c3]{position:relative;height:100%;width:100%}section[data-v-422096c3]{overflow:hidden;width:100%;height:100%;padding:0}.canvas[data-v-422096c3]{overflow:auto;height:100%;padding:0;min-height:500px}.canvas[data-v-422096c3] .draggable{cursor:default}
-