表单设计页面，模型基础信息增删

README.md

@@ -43,3 +43,6 @@ npm run dev
 ##### 2、样式系列
 * 获取当前主体的高度：import { mainHeight } from '@/utils/layout'
 
+#### 依赖变更记录
+
+* 2024-04-25新增vform3，by洪圣文，用于页面表单设计保存为json，命令：pnpm i vform3-builds

package.json

@@ -43,6 +43,7 @@
     "splitpanes": "^3.1.5",
     "steady-xml": "0.1.0",
     "use-element-plus-theme": "^0.0.5",
+    "vform3-builds": "^3.0.10",
     "vue": "^3.3.11",
     "vue-baidu-map-3x": "^1.0.35",
     "vue-baidu-map-offline": "^1.0.7",

src/api/process-boot/workflow/form.ts

@@ -2,12 +2,12 @@ import createAxios from '@/utils/request'
 
 import { PROCESS_BOOT } from '@/utils/constantRequest'
 
-const MAPPING_PATH = PROCESS_BOOT +'/workflow/category'
+const MAPPING_PATH = PROCESS_BOOT + '/workflow/wfForm'
 
 /**
- * 查询流程分类数据
+ * 查询流程表单数据
  */
-export const listCategory = (data: any) => {
+export const listWFForm = (data: any) => {
     return createAxios({
         url: MAPPING_PATH + '/list',
         method: 'POST',
@@ -15,11 +15,21 @@ export const listCategory = (data: any) => {
     })
 }
 
+/**
+ * 根据id查询表单详细信息
+ */
+export const getFormById = (id: string) => {
+    return createAxios({
+        url: MAPPING_PATH + '/getFormById?id=' + id,
+        method: 'GET'
+    })
+}
+
 
 /**
- * 新增流程分类
+ * 新增流程表单
  */
-export const addCategory = (data: any) => {
+export const addWFForm = (data: any) => {
     return createAxios({
         url: MAPPING_PATH + '/add',
         method: 'POST',
@@ -29,9 +39,9 @@ export const addCategory = (data: any) => {
 
 
 /**
- * 更新流程分类
+ * 更新流程表单
  */
-export const updateCategory = (data: any) => {
+export const updateWFForm = (data: any) => {
     return createAxios({
         url: MAPPING_PATH + '/update',
         method: 'POST',
@@ -41,9 +51,9 @@ export const updateCategory = (data: any) => {
 
 
 /**
- * 删除流程分类
+ * 删除流程表单
  */
-export const deleteCategory = (data: any) => {
+export const deleteWFForm = (data: any) => {
     let ids = [data]
     return createAxios({
         url: MAPPING_PATH + '/delete',

src/api/process-boot/workflow/model.ts

@@ -0,0 +1,118 @@
+import createAxios from '@/utils/request'
+
+import { PROCESS_BOOT } from '@/utils/constantRequest'
+
+const MAPPING_PATH = PROCESS_BOOT + '/workflow/model'
+
+/**
+ * 查询流程模型数据
+ */
+export const listWFModel = (data: any) => {
+    return createAxios({
+        url: MAPPING_PATH + '/list',
+        method: 'POST',
+        data: data
+    })
+}
+
+/**
+ * 查询流程模型的历史数据
+ */
+export const listHistoryWFModel = (data: any) => {
+    return createAxios({
+        url: MAPPING_PATH + '/historyList',
+        method: 'POST',
+        data: data
+    })
+}
+
+/**
+ * 根据id查询模型详细信息
+ */
+export const getModelById = (id: string) => {
+    return createAxios({
+        url: MAPPING_PATH + '/getModelById?id=' + id,
+        method: 'GET'
+    })
+}
+
+
+/**
+ * 根据id查询模型bpmn的xml
+ */
+export const getBpmnXmlById = (id: string) => {
+    return createAxios({
+        url: MAPPING_PATH + '/getBpmnXmlById?id=' + id,
+        method: 'GET'
+    })
+}
+
+
+/**
+ * 新增流程模型
+ */
+export const addWFModel = (data: any) => {
+    return createAxios({
+        url: MAPPING_PATH + '/add',
+        method: 'POST',
+        data: data
+    })
+}
+
+
+/**
+ * 更新流程模型
+ */
+export const updateWFModel = (data: any) => {
+    return createAxios({
+        url: MAPPING_PATH + '/update',
+        method: 'POST',
+        data: data
+    })
+}
+
+/**
+ * 保存模型中的bpmn模型
+ */
+export const saveBpmnXml = (data: any) => {
+    return createAxios({
+        url: MAPPING_PATH + '/saveBpmnXml',
+        method: 'POST',
+        data: data
+    })
+}
+
+
+/**
+ * 设为最新流程模型
+ */
+export const latestModel = (id: string) => {
+    return createAxios({
+        url: MAPPING_PATH + '/latest?id=' + id,
+        method: 'GET'
+    })
+}
+
+/**
+ * 部署流程模型
+ */
+export const deployModel = (id: string) => {
+    return createAxios({
+        url: MAPPING_PATH + '/deploy?id=' + id,
+        method: 'GET'
+    })
+}
+
+
+
+/**
+ * 删除流程模型
+ */
+export const deleteWFModel = (data: any) => {
+    let ids = [data]
+    return createAxios({
+        url: MAPPING_PATH + '/delete',
+        method: 'POST',
+        data: ids
+    })
+}

src/main.ts

@@ -34,10 +34,16 @@ app.use(BaiduMap, {
     ak: 'Yp57V71dkOPiXjiN8VdcFRsVELzlVNKK',
     v: '3.0',
 });
+
+
+import VForm3 from 'vform3-builds'  //引入VForm3库
+import 'vform3-builds/dist/designer.style.css'  //引入VForm3样式
+
 app.use(router)
 app.use(pinia)
 app.use(ElementPlus)
 app.use(VXETable)
+app.use(VForm3);
 ;(app._context.components.ElDialog as typeof ElDialog).props.closeOnClickModal.default = false
 registerIcons(app) // icons
 

src/router/static.ts

@@ -83,10 +83,50 @@ export const adminBaseRoute = {
                     component: () => import('@/views/pqs/voltageSags/sagGovern/scheme/history/index.vue'),
                     name: '治理方案结果详情',
                     meta: {
-                        title: pageTitle('router.schemeCalc')
+                        title: pageTitle('router.schemeHistory')
                     }
                 },
             ]
+        },
+        {
+            path: 'form',
+            name: '表单',
+            meta: {
+                title: pageTitle('form'),
+                icon: 'ep:management',
+                alwaysShow: true
+            },
+            children: [
+                {
+                    path: 'formDesigner',
+                    component: () => import('@/views/system/workflow/form/formDesigner.vue'),
+                    name: '表单设计器页面',
+                    meta: {
+                        title: pageTitle('router.formDesigner')
+                    }
+                }
+
+            ]
+        },
+        {
+            path: 'model',
+            name: '模型',
+            meta: {
+                title: pageTitle('model'),
+                icon: 'ep:management',
+                alwaysShow: true
+            },
+            children: [
+                {
+                    path: 'processDesigner',
+                    component: () => import('@/views/system/workflow/model/processDesigner.vue'),
+                    name: '模型设计器页面',
+                    meta: {
+                        title: pageTitle('router.formDesigner')
+                    }
+                }
+
+            ]
         }
     ]
 }

src/utils/min-dash.js

@@ -0,0 +1,694 @@
+/* eslint-disable no-func-assign */
+/**
+ * Flatten array, one level deep.
+ *
+ * @param {Array<?>} arr
+ *
+ * @return {Array<?>}
+ */
+function flatten(arr) {
+  return Array.prototype.concat.apply([], arr);
+}
+
+var nativeToString = Object.prototype.toString;
+var nativeHasOwnProperty = Object.prototype.hasOwnProperty;
+function isUndefined(obj) {
+  return obj === undefined;
+}
+function isDefined(obj) {
+  return obj !== undefined;
+}
+function isNil(obj) {
+  return obj == null;
+}
+function isArray(obj) {
+  return nativeToString.call(obj) === '[object Array]';
+}
+function isObject(obj) {
+  return nativeToString.call(obj) === '[object Object]';
+}
+function isNumber(obj) {
+  return nativeToString.call(obj) === '[object Number]';
+}
+function isFunction(obj) {
+  var tag = nativeToString.call(obj);
+  return tag === '[object Function]' || tag === '[object AsyncFunction]' || tag === '[object GeneratorFunction]' || tag === '[object AsyncGeneratorFunction]' || tag === '[object Proxy]';
+}
+function isString(obj) {
+  return nativeToString.call(obj) === '[object String]';
+}
+/**
+ * Ensure collection is an array.
+ *
+ * @param {Object} obj
+ */
+
+function ensureArray(obj) {
+  if (isArray(obj)) {
+    return;
+  }
+
+  throw new Error('must supply array');
+}
+/**
+ * Return true, if target owns a property with the given key.
+ *
+ * @param {Object} target
+ * @param {String} key
+ *
+ * @return {Boolean}
+ */
+
+function has(target, key) {
+  return nativeHasOwnProperty.call(target, key);
+}
+
+/**
+ * Find element in collection.
+ *
+ * @param  {Array|Object} collection
+ * @param  {Function|Object} matcher
+ *
+ * @return {Object}
+ */
+
+function find(collection, matcher) {
+  matcher = toMatcher(matcher);
+  var match;
+  forEach(collection, function(val, key) {
+    if (matcher(val, key)) {
+      match = val;
+      return false;
+    }
+  });
+  return match;
+}
+/**
+ * Find element index in collection.
+ *
+ * @param  {Array|Object} collection
+ * @param  {Function} matcher
+ *
+ * @return {Object}
+ */
+
+function findIndex(collection, matcher) {
+  matcher = toMatcher(matcher);
+  var idx = isArray(collection) ? -1 : undefined;
+  forEach(collection, function(val, key) {
+    if (matcher(val, key)) {
+      idx = key;
+      return false;
+    }
+  });
+  return idx;
+}
+/**
+ * Find element in collection.
+ *
+ * @param  {Array|Object} collection
+ * @param  {Function} matcher
+ *
+ * @return {Array} result
+ */
+
+function filter(collection, matcher) {
+  var result = [];
+  forEach(collection, function(val, key) {
+    if (matcher(val, key)) {
+      result.push(val);
+    }
+  });
+  return result;
+}
+/**
+ * Iterate over collection; returning something
+ * (non-undefined) will stop iteration.
+ *
+ * @param  {Array|Object} collection
+ * @param  {Function} iterator
+ *
+ * @return {Object} return result that stopped the iteration
+ */
+
+function forEach(collection, iterator) {
+  var val, result;
+
+  if (isUndefined(collection)) {
+    return;
+  }
+
+  var convertKey = isArray(collection) ? toNum : identity;
+
+  for (var key in collection) {
+    if (has(collection, key)) {
+      val = collection[key];
+      result = iterator(val, convertKey(key));
+
+      if (result === false) {
+        return val;
+      }
+    }
+  }
+}
+/**
+ * Return collection without element.
+ *
+ * @param  {Array} arr
+ * @param  {Function} matcher
+ *
+ * @return {Array}
+ */
+
+function without(arr, matcher) {
+  if (isUndefined(arr)) {
+    return [];
+  }
+
+  ensureArray(arr);
+  matcher = toMatcher(matcher);
+  return arr.filter(function(el, idx) {
+    return !matcher(el, idx);
+  });
+}
+/**
+ * Reduce collection, returning a single result.
+ *
+ * @param  {Object|Array} collection
+ * @param  {Function} iterator
+ * @param  {Any} result
+ *
+ * @return {Any} result returned from last iterator
+ */
+
+function reduce(collection, iterator, result) {
+  forEach(collection, function(value, idx) {
+    result = iterator(result, value, idx);
+  });
+  return result;
+}
+/**
+ * Return true if every element in the collection
+ * matches the criteria.
+ *
+ * @param  {Object|Array} collection
+ * @param  {Function} matcher
+ *
+ * @return {Boolean}
+ */
+
+function every(collection, matcher) {
+  return !!reduce(collection, function(matches, val, key) {
+    return matches && matcher(val, key);
+  }, true);
+}
+/**
+ * Return true if some elements in the collection
+ * match the criteria.
+ *
+ * @param  {Object|Array} collection
+ * @param  {Function} matcher
+ *
+ * @return {Boolean}
+ */
+
+function some(collection, matcher) {
+  return !!find(collection, matcher);
+}
+/**
+ * Transform a collection into another collection
+ * by piping each member through the given fn.
+ *
+ * @param  {Object|Array}   collection
+ * @param  {Function} fn
+ *
+ * @return {Array} transformed collection
+ */
+
+function map(collection, fn) {
+  var result = [];
+  forEach(collection, function(val, key) {
+    result.push(fn(val, key));
+  });
+  return result;
+}
+/**
+ * Get the collections keys.
+ *
+ * @param  {Object|Array} collection
+ *
+ * @return {Array}
+ */
+
+function keys(collection) {
+  return collection && Object.keys(collection) || [];
+}
+/**
+ * Shorthand for `keys(o).length`.
+ *
+ * @param  {Object|Array} collection
+ *
+ * @return {Number}
+ */
+
+function size(collection) {
+  return keys(collection).length;
+}
+/**
+ * Get the values in the collection.
+ *
+ * @param  {Object|Array} collection
+ *
+ * @return {Array}
+ */
+
+function values(collection) {
+  return map(collection, function(val) {
+    return val;
+  });
+}
+/**
+ * Group collection members by attribute.
+ *
+ * @param  {Object|Array} collection
+ * @param  {Function} extractor
+ *
+ * @return {Object} map with { attrValue => [ a, b, c ] }
+ */
+
+function groupBy(collection, extractor) {
+  var grouped = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  extractor = toExtractor(extractor);
+  forEach(collection, function(val) {
+    var discriminator = extractor(val) || '_';
+    var group = grouped[discriminator];
+
+    if (!group) {
+      group = grouped[discriminator] = [];
+    }
+
+    group.push(val);
+  });
+  return grouped;
+}
+function uniqueBy(extractor) {
+  extractor = toExtractor(extractor);
+  var grouped = {};
+
+  for (var _len = arguments.length, collections = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    collections[_key - 1] = arguments[_key];
+  }
+
+  forEach(collections, function(c) {
+    return groupBy(c, extractor, grouped);
+  });
+  var result = map(grouped, function(val, key) {
+    return val[0];
+  });
+  return result;
+}
+var unionBy = uniqueBy;
+/**
+ * Sort collection by criteria.
+ *
+ * @param  {Object|Array} collection
+ * @param  {String|Function} extractor
+ *
+ * @return {Array}
+ */
+
+function sortBy(collection, extractor) {
+  extractor = toExtractor(extractor);
+  var sorted = [];
+  forEach(collection, function(value, key) {
+    var disc = extractor(value, key);
+    var entry = {
+      d: disc,
+      v: value
+    };
+
+    for (var idx = 0; idx < sorted.length; idx++) {
+      var d = sorted[idx].d;
+
+      if (disc < d) {
+        sorted.splice(idx, 0, entry);
+        return;
+      }
+    } // not inserted, append (!)
+
+    sorted.push(entry);
+  });
+  return map(sorted, function(e) {
+    return e.v;
+  });
+}
+/**
+ * Create an object pattern matcher.
+ *
+ * @example
+ *
+ * const matcher = matchPattern({ id: 1 });
+ *
+ * let element = find(elements, matcher);
+ *
+ * @param  {Object} pattern
+ *
+ * @return {Function} matcherFn
+ */
+
+function matchPattern(pattern) {
+  return function(el) {
+    return every(pattern, function(val, key) {
+      return el[key] === val;
+    });
+  };
+}
+
+function toExtractor(extractor) {
+  return isFunction(extractor) ? extractor : function(e) {
+    return e[extractor];
+  };
+}
+
+function toMatcher(matcher) {
+  return isFunction(matcher) ? matcher : function(e) {
+    return e === matcher;
+  };
+}
+
+function identity(arg) {
+  return arg;
+}
+
+function toNum(arg) {
+  return Number(arg);
+}
+
+/**
+ * Debounce fn, calling it only once if the given time
+ * elapsed between calls.
+ *
+ * Lodash-style the function exposes methods to `#clear`
+ * and `#flush` to control internal behavior.
+ *
+ * @param  {Function} fn
+ * @param  {Number} timeout
+ *
+ * @return {Function} debounced function
+ */
+function debounce(fn, timeout) {
+  var timer;
+  var lastArgs;
+  var lastThis;
+  var lastNow;
+
+  function fire(force) {
+    var now = Date.now();
+    var scheduledDiff = force ? 0 : lastNow + timeout - now;
+
+    if (scheduledDiff > 0) {
+      return schedule(scheduledDiff);
+    }
+
+    fn.apply(lastThis, lastArgs);
+    clear();
+  }
+
+  function schedule(timeout) {
+    timer = setTimeout(fire, timeout);
+  }
+
+  function clear() {
+    if (timer) {
+      clearTimeout(timer);
+    }
+
+    timer = lastNow = lastArgs = lastThis = undefined;
+  }
+
+  function flush() {
+    if (timer) {
+      fire(true);
+    }
+
+    clear();
+  }
+
+  function callback() {
+    lastNow = Date.now();
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    lastArgs = args;
+    lastThis = this; // ensure an execution is scheduled
+
+    if (!timer) {
+      schedule(timeout);
+    }
+  }
+
+  callback.flush = flush;
+  callback.cancel = clear;
+  return callback;
+}
+/**
+ * Throttle fn, calling at most once
+ * in the given interval.
+ *
+ * @param  {Function} fn
+ * @param  {Number} interval
+ *
+ * @return {Function} throttled function
+ */
+
+function throttle(fn, interval) {
+  var throttling = false;
+  return function() {
+    if (throttling) {
+      return;
+    }
+
+    fn.apply(void 0, arguments);
+    throttling = true;
+    setTimeout(function() {
+      throttling = false;
+    }, interval);
+  };
+}
+/**
+ * Bind function against target <this>.
+ *
+ * @param  {Function} fn
+ * @param  {Object}   target
+ *
+ * @return {Function} bound function
+ */
+
+function bind(fn, target) {
+  return fn.bind(target);
+}
+
+function _typeof(obj) {
+  '@babel/helpers - typeof';
+
+  if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+    _typeof = function(obj) {
+      return typeof obj;
+    };
+  } else {
+    _typeof = function(obj) {
+      return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
+    };
+  }
+
+  return _typeof(obj);
+}
+
+function _extends() {
+  _extends = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+/**
+ * Convenience wrapper for `Object.assign`.
+ *
+ * @param {Object} target
+ * @param {...Object} others
+ *
+ * @return {Object} the target
+ */
+
+function assign(target) {
+  for (var _len = arguments.length, others = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    others[_key - 1] = arguments[_key];
+  }
+
+  return _extends.apply(void 0, [target].concat(others));
+}
+/**
+ * Sets a nested property of a given object to the specified value.
+ *
+ * This mutates the object and returns it.
+ *
+ * @param {Object} target The target of the set operation.
+ * @param {(string|number)[]} path The path to the nested value.
+ * @param {any} value The value to set.
+ */
+
+function set(target, path, value) {
+  var currentTarget = target;
+  forEach(path, function(key, idx) {
+    if (typeof key !== 'number' && typeof key !== 'string') {
+      throw new Error('illegal key type: ' + _typeof(key) + '. Key should be of type number or string.');
+    }
+
+    if (key === 'constructor') {
+      throw new Error('illegal key: constructor');
+    }
+
+    if (key === '__proto__') {
+      throw new Error('illegal key: __proto__');
+    }
+
+    var nextKey = path[idx + 1];
+    var nextTarget = currentTarget[key];
+
+    if (isDefined(nextKey) && isNil(nextTarget)) {
+      nextTarget = currentTarget[key] = isNaN(+nextKey) ? {} : [];
+    }
+
+    if (isUndefined(nextKey)) {
+      if (isUndefined(value)) {
+        delete currentTarget[key];
+      } else {
+        currentTarget[key] = value;
+      }
+    } else {
+      currentTarget = nextTarget;
+    }
+  });
+  return target;
+}
+/**
+ * Gets a nested property of a given object.
+ *
+ * @param {Object} target The target of the get operation.
+ * @param {(string|number)[]} path The path to the nested value.
+ * @param {any} [defaultValue] The value to return if no value exists.
+ */
+
+function get(target, path, defaultValue) {
+  var currentTarget = target;
+  forEach(path, function(key) {
+    // accessing nil property yields <undefined>
+    if (isNil(currentTarget)) {
+      currentTarget = undefined;
+      return false;
+    }
+
+    currentTarget = currentTarget[key];
+  });
+  return isUndefined(currentTarget) ? defaultValue : currentTarget;
+}
+/**
+ * Pick given properties from the target object.
+ *
+ * @param {Object} target
+ * @param {Array} properties
+ *
+ * @return {Object} target
+ */
+
+function pick(target, properties) {
+  var result = {};
+  var obj = Object(target);
+  forEach(properties, function(prop) {
+    if (prop in obj) {
+      result[prop] = target[prop];
+    }
+  });
+  return result;
+}
+/**
+ * Pick all target properties, excluding the given ones.
+ *
+ * @param {Object} target
+ * @param {Array} properties
+ *
+ * @return {Object} target
+ */
+
+function omit(target, properties) {
+  var result = {};
+  var obj = Object(target);
+  forEach(obj, function(prop, key) {
+    if (properties.indexOf(key) === -1) {
+      result[key] = prop;
+    }
+  });
+  return result;
+}
+/**
+ * Recursively merge `...sources` into given target.
+ *
+ * Does support merging objects; does not support merging arrays.
+ *
+ * @param {Object} target
+ * @param {...Object} sources
+ *
+ * @return {Object} the target
+ */
+
+function merge(target) {
+  for (var _len2 = arguments.length, sources = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+    sources[_key2 - 1] = arguments[_key2];
+  }
+
+  if (!sources.length) {
+    return target;
+  }
+
+  forEach(sources, function(source) {
+    // skip non-obj sources, i.e. null
+    if (!source || !isObject(source)) {
+      return;
+    }
+
+    forEach(source, function(sourceVal, key) {
+      if (key === '__proto__') {
+        return;
+      }
+
+      var targetVal = target[key];
+
+      if (isObject(sourceVal)) {
+        if (!isObject(targetVal)) {
+          // override target[key] with object
+          targetVal = {};
+        }
+
+        target[key] = merge(targetVal, sourceVal);
+      } else {
+        target[key] = sourceVal;
+      }
+    });
+  });
+  return target;
+}
+
+export { assign, bind, debounce, ensureArray, every, filter, find, findIndex, flatten, forEach, get, groupBy, has, isArray, isDefined, isFunction, isNil, isNumber, isObject, isString, isUndefined, keys, map, matchPattern, merge, omit, pick, reduce, set, size, some, sortBy, throttle, unionBy, uniqueBy, values, without };

src/views/pqs/voltageSags/sagGovern/businessUser/productLine/index.vue

@@ -1,4 +1,4 @@
-<!--业务用户管理界面-->
+<!--生产线管理界面-->
 <template>
   <div class='default-main'>
     <TableHeader>

src/views/pqs/voltageSags/sagGovern/businessUser/userPopup.vue

@@ -125,7 +125,6 @@ const resetForm = () => {
 }
 
 const open = (text: string, data?: anyObj) => {
-    console.log(data)
     tab.value = 'user'
     title.value = text
     //默认选中第一个tab

src/views/pqs/voltageSags/sagGovern/scheme/index.vue

@@ -1,4 +1,4 @@
-<!--业务用户管理界面-->
+<!--暂降治理历史数据管理界面-->
 <template>
     <div class='default-main'>
         <TableHeader>

src/views/system/workflow/form/formDesigner.vue

@@ -0,0 +1,156 @@
+<!--用于表单设计器，提供给-->
+<template>
+    <div id='form-designer' ref='formDesignerContent'>
+        <v-form-designer ref='vfDesignerRef' :resetFormJson='true' :designer-config='designerConfig'>
+            <!-- 自定义按钮插槽 -->
+            <template #customToolButtons>
+                <el-button link type='primary' :icon='Finished' @click='saveForm'>保存</el-button>
+                <el-button link type='primary' :icon='Back' @click='go(-1)'>返回</el-button>
+            </template>
+        </v-form-designer>
+        <el-dialog
+            draggable
+            class='cn-operate-dialog'
+            v-model='formVisible'
+            :title='title'
+            style='width: 415px; height: 250px'
+            top='40vh'
+        >
+            <el-scrollbar>
+                <el-form :inline='false' :model='form' label-width='120px' :rules='rules' ref='formRef'>
+                    <el-form-item label='表单名' prop='name'>
+                        <el-input v-model='form.name' placeholder='请输入表单名' clearable />
+                    </el-form-item>
+                    <el-form-item label='备注'>
+                        <el-input v-model='form.remark' placeholder='请输入备注' clearable />
+                    </el-form-item>
+                </el-form>
+            </el-scrollbar>
+            <template #footer>
+            <span class='dialog-footer'>
+                <el-button @click='formVisible = false'>取消</el-button>
+                <el-button type='primary' @click='submit'>确认</el-button>
+            </span>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+<script setup lang='ts'>
+import { Back, Finished } from '@element-plus/icons-vue'
+import { useRouter, useRoute } from 'vue-router'
+import { mainHeight } from '@/utils/layout'
+import { onMounted, reactive, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { getFormById, addWFForm, updateWFForm } from '@/api/process-boot/workflow/form'
+
+defineOptions({
+    name: 'formDesginer'
+})
+const vfDesignerRef = ref()
+const { go } = useRouter()
+const { query } = useRoute()
+const formVisible = ref(false)
+const title = ref('新增表单')
+// 表单对象，表单名称、表单备注、表单内容content
+const form = reactive({
+    id: '',
+    name: '',
+    remark: '',
+    content: ''
+})
+
+//form表单校验规则
+const rules = {
+    name: [{ required: true, message: '表单名不能为空', trigger: 'blur' }]
+}
+
+
+const designerConfig = reactive({
+    // 链接信息是否显示
+    externalLink: false,
+    toolbarMaxWidth: 510,
+    // 语言选择下拉是否显示
+    languageMenu: false,
+    // 模版信息是否显示
+    //formTemplates: false,
+    // 事件信息是否显示
+    //eventCollapse: false,
+    // 清空按钮是否显示
+    //clearDesignerButton: false,
+    // 预览按钮是否显示
+    //previewFormButton: false,
+    exportCodeButton: true,
+    generateSFCButton: false
+})
+
+
+//初始化页面样式、并初始化页面数据
+const formDesignerContent = ref()
+const getFormInfo = async () => {
+    form.id = query.id
+    if (form.id.length > 0) {
+        //如果Id不为空，则查询该表单的数据，用于回显表单内容
+        await getFormById(form.id).then(res => {
+            vfDesignerRef.value.setFormJson(res.data.content)
+            form.name = res.data.name
+            form.remark = res.data.remark
+        })
+    }else{
+        vfDesignerRef.value.clearDesigner()
+        form.name = ''
+        form.remark = ''
+    }
+}
+
+onMounted(() => {
+    formDesignerContent.value.style.maxHeight = mainHeight().height
+    formDesignerContent.value.style.overflowY = 'scroll'
+    getFormInfo()
+})
+
+const saveForm = () => {
+    if (!form.id) {
+        title.value = '新增表单'
+    } else {
+        title.value = '修改表单'
+
+    }
+    formVisible.value = true
+}
+
+const formRef = ref()
+
+/**
+ * 提交表单数据
+ */
+const submit = () => {
+    const formJson = vfDesignerRef.value.getFormJson()
+    form.content = JSON.stringify(formJson)
+    formRef.value.validate(async (valid: any) => {
+        if (valid) {
+            if (form.id) {
+                await updateWFForm(form)
+            } else {
+                await addWFForm(form)
+            }
+            ElMessage.success('保存成功')
+            formVisible.value = false
+            go(-1)
+        }
+    })
+}
+
+
+</script>
+<style scoped>
+
+#form-designer {
+    padding: 10px;
+    overflow: scroll;
+}
+
+.layout-container .layout-main {
+    overflow: scroll !important;
+}
+
+</style>

src/views/system/workflow/form/index.vue

@@ -0,0 +1,137 @@
+<!--流程表单-->
+<template>
+    <div class='default-main'>
+        <TableHeader>
+            <template v-slot:select>
+                <el-form-item label='表单名称'>
+                    <el-input
+                        v-model='tableStore.table.params.name'
+                        clearable
+                    />
+                </el-form-item>
+            </template>
+            <template v-slot:operation>
+                <el-button type='primary' class='ml10' :icon='Plus' @click='add'>新增</el-button>
+            </template>
+        </TableHeader>
+        <!--表格-->
+        <Table ref='tableRef'></Table>
+        <!-- 预览表单对话框 -->
+        <el-dialog :title='render.title' v-model='render.visible' width='60%' append-to-body>
+            <v-form-render :form-json='formJson' :form-data='formData' :option-data='optionData' ref='vfRenderRef' />
+        </el-dialog>
+    </div>
+</template>
+<script lang='ts' setup>
+import { Plus } from '@element-plus/icons-vue'
+import TableHeader from '@/components/table/header/index.vue'
+import Table from '@/components/table/index.vue'
+import TableStore from '@/utils/tableStore'
+import { ElMessage } from 'element-plus'
+import { onMounted, provide, ref, reactive,nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+import { deleteWFForm, getFormById } from '@/api/process-boot/workflow/form'
+
+
+const { push } = useRouter()
+defineOptions({
+    name: 'category'
+})
+const formJson = reactive({"widgetList":[],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","jsonVersion":3,"onFormCreated":"","onFormMounted":"","onFormDataChange":"","onFormValidate":""}})
+const formData = reactive({})
+const optionData = reactive({})
+const vfRenderRef = ref(null)
+const render = reactive({
+    visible: false,
+    title: ''
+})
+
+const tableStore = new TableStore({
+    url: '/process-boot/workflow/wfForm/list',
+    method: 'POST',
+    column: [
+        { title: '序号', type: 'seq', width: 80 },
+        { title: '表单名称', minWidth: '160', field: 'name' },
+        { title: '备注', minWidth: '140', field: 'remark' },
+        {
+            title: '操作',
+            align: 'center',
+            render: 'buttons',
+            minWidth: '230',
+            fixed: 'right',
+            buttons: [
+                {
+                    name: 'view',
+                    title: '预览',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'basicButton',
+                    click: row => {
+                        //首先根据id查询出详细数据，然后渲染json
+                        getFormById(row.id).then(res => {
+                            render.visible = true;
+                            render.title = '查看表单详情';
+                            nextTick(async () => {
+                                vfRenderRef.value.setFormJson(res.data.content || {formConfig: {}, widgetList: []});
+                            });
+
+                        })
+                    }
+                },
+                {
+                    name: 'update',
+                    title: '设计',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'basicButton',
+                    click: row => {
+                        push(`/admin/form/formDesigner?id=${row.id}`)
+                    }
+                },
+                {
+                    name: 'update',
+                    title: '删除',
+                    type: 'danger',
+                    icon: 'el-icon-Delete',
+                    render: 'confirmButton',
+                    popconfirm: {
+                        confirmButtonText: '确认',
+                        cancelButtonText: '取消',
+                        confirmButtonType: 'danger',
+                        title: '确定删除吗？'
+                    },
+                    click: row => {
+                        deleteWFForm(row.id).then(res => {
+                            ElMessage.success('删除成功')
+                            tableStore.index()
+                        })
+                    }
+                }
+            ]
+        }
+    ],
+    beforeSearchFun: () => {
+        for (let key in tableStore.table.params) {
+            if (tableStore.table.params[key] === '') {
+                delete tableStore.table.params[key]
+            }
+        }
+
+    }
+})
+//新增表单
+const add = () => {
+    push(`/admin/form/formDesigner?id=`)
+}
+
+tableStore.table.params.orderBy = 'desc'
+tableStore.table.params.name = ''
+provide('tableStore', tableStore)
+onMounted(() => {
+    // 加载数据
+    tableStore.index()
+})
+</script>
+<style scoped>
+
+</style>

src/views/system/workflow/model/index.vue

@@ -0,0 +1,175 @@
+<!--流程模型表单页面-->
+<template>
+    <div class='default-main'>
+        <TableHeader>
+            <template v-slot:select>
+                <el-form-item label='模型名称'>
+                    <el-input
+                        v-model='tableStore.table.params.name'
+                        clearable
+                    />
+                </el-form-item>
+                <el-form-item label='流程类别'>
+                    <el-select v-model='tableStore.table.params.category' clearable>
+                        <el-option
+                            v-for='item in categoryList'
+                            :key='item.id'
+                            :label='item.name'
+                            :value='item.code'
+                        />
+                    </el-select>
+                </el-form-item>
+            </template>
+            <template v-slot:operation>
+                <el-button type='primary' class='ml10' :icon='Plus' @click='add'>新增</el-button>
+            </template>
+        </TableHeader>
+        <!--表格-->
+        <Table ref='tableRef' isGroup></Table>
+        <model-popup ref='modelPopup' />
+    </div>
+
+</template>
+<script lang='ts' setup>
+import { Plus } from '@element-plus/icons-vue'
+import TableHeader from '@/components/table/header/index.vue'
+import Table from '@/components/table/index.vue'
+import TableStore from '@/utils/tableStore'
+import { deleteWFForm, getFormById } from '@/api/process-boot/workflow/form'
+import { nextTick, onMounted, provide, reactive, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useDictData } from '@/stores/dictData'
+import { useRouter } from 'vue-router'
+import ModelPopup from '@/views/system/workflow/model/modelPopup.vue'
+
+
+const { push } = useRouter()
+const dictData = useDictData()
+const categoryList = dictData.getBasicData('flow_category')
+const modelPopup = ref()
+const tableStore = new TableStore({
+    url: '/process-boot/workflow/model/list',
+    method: 'POST',
+    column: [
+        { title: '序号', type: 'seq', width: 80 },
+        { title: '模型标识', minWidth: '160', field: 'modelKey' },
+        { title: '模型名称', minWidth: '160', field: 'modelName' },
+        {
+            title: '流程类别', minWidth: '160', field: 'category',
+            formatter: (row: any) => {
+                return categoryList.filter(item => item.code === row.cellValue)[0].name
+            }
+        },
+        {
+            title: '模型版本', minWidth: '120', field: 'version', type: 'html',
+            formatter: (obj: any) => {
+                const val = obj.row.version
+                return `<a href='javascript:void(0);'  style='color: #409EFF;text-decoration: none'>V${val}</a>`
+                // return `<el-tag size='small'>v{{val}}</el-tag>`
+            }
+        },
+        { title: '备注', minWidth: '160', field: 'description' },
+        {
+            title: '操作',
+            align: 'center',
+            render: 'buttons',
+            minWidth: '230',
+            fixed: 'right',
+            buttons: [
+                {
+                    name: 'view',
+                    title: '编辑',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'basicButton',
+                    click: row => {
+                        modelPopup.value.open('修改模型', row)
+                    }
+                },
+                {
+                    name: 'update',
+                    title: '设计',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'basicButton',
+                    click: row => {
+                        push(`/admin/model/processDesigner?id=${row.id}`)
+                    }
+                },
+                {
+                    name: 'deploy',
+                    title: '部署',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'basicButton',
+                    click: row => {
+                        push(`/admin/form/formDesigner?id=${row.id}`)
+                    }
+                },
+                {
+                    name: 'deploy',
+                    title: '预览流程',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'basicButton',
+                    click: row => {
+                        push(`/admin/form/formDesigner?id=${row.id}`)
+                    }
+                },
+                {
+                    name: 'deploy',
+                    title: '历史版本',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'basicButton',
+                    click: row => {
+                        push(`/admin/form/formDesigner?id=${row.id}`)
+                    }
+                },
+                {
+                    name: 'update',
+                    title: '删除',
+                    type: 'danger',
+                    icon: 'el-icon-Delete',
+                    render: 'confirmButton',
+                    popconfirm: {
+                        confirmButtonText: '确认',
+                        cancelButtonText: '取消',
+                        confirmButtonType: 'danger',
+                        title: '确定删除吗？'
+                    },
+                    click: row => {
+                        deleteWFForm(row.id).then(res => {
+                            ElMessage.success('删除成功')
+                            tableStore.index()
+                        })
+                    }
+                }
+            ]
+        }
+    ],
+    beforeSearchFun: () => {
+        for (let key in tableStore.table.params) {
+            if (tableStore.table.params[key] === '') {
+                delete tableStore.table.params[key]
+            }
+        }
+
+    }
+})
+//新增表单
+const add = () => {
+    modelPopup.value.open('新增模型')
+}
+
+tableStore.table.params.orderBy = 'desc'
+tableStore.table.params.name = ''
+provide('tableStore', tableStore)
+onMounted(() => {
+    // 加载数据
+    tableStore.index()
+})
+</script>
+<style scoped>
+
+</style>

src/views/system/workflow/model/modelPopup.vue

@@ -0,0 +1,129 @@
+<!--模型的新增和修改的弹出框-->
+<template>
+  <el-dialog
+      draggable
+      class="cn-operate-dialog"
+      v-model="modelVisible"
+      :title="title"
+      style="width: 415px; height: 400px"
+      top="30vh"
+  >
+    <el-scrollbar>
+      <el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
+        <el-form-item label="模型标识">
+          <el-input v-model="form.modelKey" clearable disabled />
+        </el-form-item>
+        <el-form-item label="模型名称" prop='modelName'>
+          <el-input v-model="form.modelName" placeholder="请输入模型名称" clearable />
+        </el-form-item>
+        <el-form-item label="流程分类" prop="category">
+          <el-select v-model='form.category' clearable>
+            <el-option
+                v-for='item in categoryList'
+                :key='item.id'
+                :label='item.name'
+                :value='item.code'
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="描述" prop="description">
+          <el-input v-model="form.description" type="textarea" placeholder="请输入内容" maxlength="200" show-word-limit />
+        </el-form-item>
+      </el-form>
+    </el-scrollbar>
+    <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="modelVisible = false">取消</el-button>
+                <el-button type="primary" @click="submit">确认</el-button>
+            </span>
+    </template>
+  </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, reactive, inject } from 'vue'
+import { ElMessage } from 'element-plus'
+import TableStore from '@/utils/tableStore'
+import { useDictData } from '@/stores/dictData'
+import { addWFModel,updateWFModel } from '@/api/process-boot/workflow/model'
+
+
+const dictData = useDictData()
+const categoryList = dictData.getBasicData('flow_category')
+
+const tableStore = inject('tableStore') as TableStore
+const modelVisible = ref(false)
+const title = ref('')
+const formRef = ref()
+
+// 注意不要和表单ref的命名冲突
+const form = reactive({
+  modelId: undefined,
+  modelKey: `Process_${new Date().getTime()}`,
+  modelName: '',
+  category: '',
+  description: '',
+})
+
+//form表单校验规则
+const rules = {
+  modelName: [{ required: true, message: '模型名称不能为空', trigger: 'blur' }],
+  category: [{ required: true, message: '流程分类必选', trigger: 'change' }],
+}
+
+const open = (text: string, data?: any) => {
+  title.value = text
+  if (data) {
+    // 表单赋值
+    for (let key in form) {
+      form[key] = data[key]
+    }
+  } else {
+    resetForm()
+    // 在此处恢复默认表单
+    for (let key in form) {
+      form[key] = ''
+    }
+    form.modelKey = `Process_${new Date().getTime()}`
+  }
+  modelVisible.value = true
+}
+
+//重置表单内容
+const resetForm = () => {
+  if (formRef.value) {
+    formRef.value.resetFields()
+  }
+}
+
+/**
+ * 提交用户表单数据
+ */
+const submit = () => {
+  formRef.value.validate(async (valid: any) => {
+    if (valid) {
+      if (form.modelId) {
+        await updateWFModel(form)
+      } else {
+        await addWFModel(form)
+      }
+      ElMessage.success('保存成功')
+      tableStore.index()
+      modelVisible.value = false
+    }
+  })
+}
+
+/************针对tab切换*************/
+
+defineExpose({ open })
+</script>
+
+<style scoped>
+.el-upload-list__item {
+  transition: none !important;
+}
+
+.el-select {
+  min-width: 180px;
+}
+</style>

src/views/system/workflow/model/translate/translations.js

@@ -0,0 +1,276 @@
+/**
+ *参考 https://github.com/bpmn-io/bpmn-js-i18n
+ */
+
+const translations = {
+
+    "Name":"名称",
+    "Value":"值",
+    "ID":"唯一标识(ID)",
+    "General":"基础属性",
+
+    "Activate the create/remove space tool": "启动创建/删除空间工具",
+    "Activate the global connect tool": "启动全局连接工具",
+    "Activate the hand tool": "启动手动工具",
+    "Activate the lasso tool": "启动套索工具",
+    "Ad-hoc": "Ad-hoc子流程",
+    "Add Lane above": "添加到通道之上",
+    "Add Lane below": "添加到通道之下",
+    "Append ConditionIntermediateCatchEvent": "添加中间条件捕获事件",
+    "Append element": "添加元素",
+    "Append EndEvent": "添加结束事件",
+    "Append Gateway": "添加网关",
+    "Append Intermediate/Boundary Event": "添加中间/边界事件",
+    "Append MessageIntermediateCatchEvent": "添加消息中间捕获事件",
+    "Append ReceiveTask": "添加接收任务",
+    "Append SignalIntermediateCatchEvent": "添加信号中间捕获事件",
+    "Append Task": "添加任务",
+    "Append TimerIntermediateCatchEvent": "添加定时器中间捕获事件",
+    "Append compensation activity": "追加补偿活动",
+    "Append {type}": "追加 {type}",
+    "Boundary Event": "边界事件",
+    "Business Rule Task": "规则任务",
+    "Call Activity": "引用流程",
+    "Cancel Boundary Event": "取消边界事件",
+    "Cancel End Event": "取消结束事件",
+    "Change type": "更改类型",
+    "Collapsed Pool": "折叠池",
+    "Collection": "集合",
+    "Compensation Boundary Event": "补偿边界事件",
+    "Compensation End Event": "结束补偿事件",
+    "Compensation Intermediate Throw Event": "中间补偿抛出事件",
+    "Compensation Start Event": "补偿启动事件",
+    "Complex Gateway": "复杂网关",
+    "Conditional Boundary Event": "条件边界事件",
+    "Conditional Boundary Event (non-interrupting)": "条件边界事件 (非中断)",
+    "Conditional Flow": "条件流",
+    "Conditional Intermediate Catch Event": "中间条件捕获事件",
+    "Conditional Start Event": "条件启动事件",
+    "Conditional Start Event (non-interrupting)": "条件启动事件 (非中断)",
+    "Connect using Association": "文本关联",
+    "Connect using DataInputAssociation": "数据关联",
+    "Connect using Sequence/MessageFlow or Association": "消息关联",
+    "Create IntermediateThrowEvent/BoundaryEvent": "创建中间抛出/边界事件",
+    "Create DataObjectReference": "创建数据对象引用",
+    "Create DataStoreReference": "创建数据存储引用",
+    "Create element": "创建元素",
+    "Create EndEvent": "创建结束事件",
+    "Create Gateway": "创建网关",
+    "Create Group": "创建组",
+    "Create Intermediate/Boundary Event": "创建中间/边界事件",
+    "Create Pool/Participant": "创建池/参与者",
+    "Create StartEvent": "创建开始事件",
+    "Create Task": "创建任务",
+    "Create expanded SubProcess": "创建可折叠子流程",
+    "Create {type}": "创建 {type}",
+    "Data": "数据",
+    "Data Object Reference": "数据对象引用",
+    "Data Store Reference": "数据存储引用",
+    "Default Flow": "默认流",
+    "Divide into three Lanes": "分成三条通道",
+    "Divide into two Lanes": "分成两条通道",
+    "Empty Pool": "空泳道",
+    "Empty Pool (removes content)": "清空泳道（删除内容）",
+    "End Event": "结束事件",
+    "Error Boundary Event": "错误边界事件",
+    "Error End Event": "结束错误事件",
+    "Error Start Event": "错误启动事件",
+    "Escalation Boundary Event": "升级边界事件",
+    "Escalation Boundary Event (non-interrupting)": "升级边界事件 (非中断)",
+    "Escalation End Event": "结束升级事件",
+    "Escalation Intermediate Throw Event": "中间升级抛出事件",
+    "Escalation Start Event": "升级启动事件",
+    "Escalation Start Event (non-interrupting)": "升级启动事件 (非中断)",
+    "Events": "事件",
+    "Event Sub Process": "事件子流程",
+    "Event based Gateway": "事件网关",
+    "Exclusive Gateway": "独占网关",
+    "Expanded Pool": "展开泳道",
+    "Gateways": "网关",
+    "Inclusive Gateway": "包容网关",
+    "Intermediate Throw Event": "中间抛出事件",
+    "Link Intermediate Catch Event": "中间链接捕获事件",
+    "Link Intermediate Throw Event": "中间链接抛出事件",
+    "Loop": "循环",
+    "Manual Task": "手动任务",
+    "Message Boundary Event": "消息边界事件",
+    "Message Boundary Event (non-interrupting)": "消息边界事件 (非中断)",
+    "Message End Event": "结束消息事件",
+    "Message Intermediate Catch Event": "中间消息捕获事件",
+    "Message Intermediate Throw Event": "中间消息抛出事件",
+    "Message Start Event": "消息启动事件",
+    "Message Start Event (non-interrupting)": "消息启动事件 (非中断)",
+    "Parallel Gateway": "并行网关",
+    "Parallel Multi Instance": "并行多实例",
+    "Participants": "参与者",
+    "Participant Multiplicity": "参与者多重性",
+    "Receive Task": "接受任务",
+    "Remove": "移除",
+    "Script Task": "脚本任务",
+    "Send Task": "发送任务",
+    "Sequence Flow": "顺序流",
+    "Sequential Multi Instance": "串行多实例",
+    "Service Task": "服务任务",
+    "Signal Boundary Event": "信号边界事件",
+    "Signal Boundary Event (non-interrupting)": "信号边界事件 (非中断)",
+    "Signal End Event": "结束信号事件",
+    "Signal Intermediate Catch Event": "中间信号捕获事件",
+    "Signal Intermediate Throw Event": "中间信号抛出事件",
+    "Signal Start Event": "信号启动事件",
+    "Signal Start Event (non-interrupting)": "信号启动事件 (非中断)",
+    "Start Event": "开始事件",
+    "Sub Process": "子流程",
+    "Sub Processes": "子流程",
+    "Sub Process (collapsed)": "可折叠子流程",
+    "Sub Process (expanded)": "可展开子流程",
+    "Task": "任务",
+    "Tasks": "任务",
+    "Terminate End Event": "终止边界事件",
+    "Timer Boundary Event": "定时边界事件",
+    "Timer Boundary Event (non-interrupting)": "定时边界事件 (非中断)",
+    "Timer Intermediate Catch Event": "中间定时捕获事件",
+    "Timer Start Event": "定时启动事件",
+    "Timer Start Event (non-interrupting)": "定时启动事件 (非中断)",
+    "Transaction": "事务",
+    "User Task": "用户任务",
+    "already rendered {element}": "{element} 已呈现",
+    "diagram not part of bpmn:Definitions": "图表不是 bpmn:Definitions 的一部分",
+    "element required": "需要元素",
+    "correcting missing bpmnElement on {plane} to {rootElement}": "在 {plane} 上更正缺失的 bpmnElement 为 {rootElement}",
+    "element {element} referenced by {referenced}#{property} not yet drawn": "元素 {element} 的引用 {referenced}#{property} 尚未绘制",
+    "failed to import {element}": "{element} 导入失败",
+    "flow elements must be children of pools/participants": "元素必须是池/参与者的子级",
+    "more than {count} child lanes": "超过 {count} 条通道",
+    "missing {semantic}#attachedToRef": "在 {element} 中缺少 {semantic}#attachedToRef",
+    "multiple DI elements defined for {element}": "为 {element} 定义了多个 DI 元素",
+    "no bpmnElement referenced in {element}": "{element} 中没有引用 bpmnElement",
+    "no diagram to display": "没有要显示的图表",
+    "no shape type specified": "未指定形状类型",
+    "no parent for {element} in {parent}": "在 {element} 中没有父元素 {parent}",
+    "no process or collaboration to display": "没有可显示的流程或协作",
+    "out of bounds release": "越界释放",
+    "Version tag":"版本标记",
+    "Change element":"改变元素",
+    "Documentation":"文档",
+    "PROCESS":"流程",
+    "Element documentation":"元素文档说明",
+    "User assignment":"分配用户",
+    "History cleanup":"历史记录清理",
+    "Time to live":"历史记录生存时间",
+    "Tasklist":"任务列表",
+    "Candidate starter":"候选启动器",
+    "Candidate starter groups":"候选启动组",
+    "Specify more than one group as a comma separated list.":"多个组用','分隔.",
+    "Candidate starter users":"候选发起人",
+    "Specify more than one user as a comma separated list.":"多个用户用','分隔.",
+    "External task":"外部任务",
+    "Startable":"可启动(Startable)",
+    "Executable":"可直接执行",
+    "Job execution":"作业执行",
+    "Priority":"优先级",
+    "Forms":"表单",
+    "Execution listeners":"执行侦听器",
+    "Extension properties":"扩展属性",
+    "Event type":"事件类型",
+    "Listener type":"侦听器类型",
+    "Field injection":"字段注入",
+    "Start initiator":"开始发起人",
+    "Initiator":"发起人",
+    "Asynchronous continuations":"异步延续",
+    "Before":"之前",
+    "After":"之后",
+    "Inputs":"输入",
+    "Outputs":"输出",
+    "Local variable name":"局部变量名称",
+    "Assignment type":"分配类型",
+    "Format":"格式",
+    "Type":"类型",
+    "Expression":"表达式(Expression)",
+    "Script":"脚本(Script)",
+    "Delegate expression":"委托表达式(Delegate expression)",
+    "Java class":"Java类(Java class)",
+    "start":"开始(start)",
+    "end":"结束(end)",
+    "Start typing \"${}\" to create an expression.":"开始键入\"${}\"以创建表达式.",
+    "Process variable name":"过程变量名称",
+    "List values":"列表值",
+    "Map entries":"映射条目",
+    "Key":"键",
+    "Values":"值",
+    "Form reference":"引用表单ID",
+    "Binding":"结合",
+    "Version":"版本",
+    "Form fields":"表单字段",
+    "Form key":"表单ID",
+    "Embedded or External Task Forms":"拓展表单",
+    "Camunda Forms":"标准表单",
+    "Generated Task Forms":"内置表单",
+    "Refers to the process variable name":"指的是(引用)过程变量名称",
+    "Label":"标签",
+    "Default value":"默认值",
+    "Constraints":"限制",
+    "Properties":"属性",
+    "Config":"配置",
+    "Implementation":"实施",
+    "Field injections":"字段注入",
+    "Task listeners":"任务侦听器",
+    "Listener ID":"侦听器ID",
+    "Message":"消息",
+    "Global message reference":"引用全局消息ID",
+    "Result variable":"结果变量",
+    "Resource":"资源",
+    "External resource":"外部资源",
+    "Inline script":"内联脚本",
+    "Process variables":"过程变量",
+    "Global signal reference":"引用全局信号ID",
+    "Signal":"信号",
+    "Called element":"被调用元素",
+    "In mapping propagation":"在映射传播中",
+    "Propagate all variables":"传播所有变量",
+    "Out mapping propagation":"向外映射传播",
+    "In mappings":"在映射中",
+    "Source":"来源",
+    "Target":"目标",
+    "Local":"局部的(Local)",
+    "Out mappings":"输出映射",
+    "Link":"链接",
+    "Timer":"定时器",
+    "Retry time cycle":"重试时间周期",
+    "Variable name":"变量名称",
+    "Condition Expression":"条件表达式",
+    "Condition":"条件",
+    "Process documentation":"流程文档",
+    "Assignee":"委托人",
+    "Candidate groups":"候选组",
+    "Candidate users":"候选用户",
+    "Due date":"期限",
+    "The due date as an EL expression (e.g. ${someDate}) or an ISO date (e.g. 2015-06-26T09:54:00).":"到期日期为EL表达式(例如${someDate})或ISO日期(例如2015-06-26T09:54:00)",
+    "Follow up date":"跟进日期",
+    "The follow up date as an EL expression (e.g. ${someDate}) or an ISO date (e.g. 2015-06-26T09:54:00).":"作为EL表达式(例如${someDate})或ISO日期(例如2015-06-26T09:54:00)的跟进日期",
+    "Connector ID":"连接器ID",
+    "Connector inputs":"连接器输入",
+    "Connector outputs":"连接器输出",
+    "Topic":"主题",
+    "Errors":"错误",
+    "Global error reference":"引用全局错误ID",
+    "Throw expression":"Throw表达式",
+    "Decision reference":"引用决策ID",
+    "Tenant ID":"租户ID",
+    "Multi-instance":"多实例",
+    "Loop cardinality":"循环基数",
+    "Completion condition":"完成条件",
+    "Element variable":"元素变量",
+    "Asynchronous before":"异步之前",
+    "Asynchronous after":"异步之后",
+};
+
+export const customTranslate = (template, replacements) =>{
+    replacements = replacements || {};
+    // Translate
+    template = translations[template] || template;
+    // Replace
+    return template.replace(/{([^}]+)}/g, (_, key)=> {
+        return replacements[key] || '{' + key + '}';
+    });
+}
+

vite.config.ts

@@ -14,20 +14,18 @@ export default defineConfig({
         open: true,
         proxy: {
             '/api': {
-                // target: 'http://192.168.1.31:10215', //数据中心
+                // target: 'http://10.95.53.49:10215', //海南服务器ip
-                target: 'http://192.168.1.31:10215', //数据中心
+                target: 'http://192.168.1.125:10215', //hsw
+                // target: 'http://192.168.1.81:10215', //数据中心
                 changeOrigin: true,
                 rewrite: path => path.replace(/^\/api/, '') //路径重写，把'/api'替换为''
             },
             '/map': {
-                target: 'http://192.168.1.125:8088', //数据中心
+                // target: 'http://10.95.53.49:8088', //海南服务器ip
+                target: 'http://192.168.1.125:8088', //hsw
+                // target: 'http://192.168.1.125:8088', //数据中心
                 changeOrigin: true
             }
-            // '/hzj': {
-            //     target: 'http://13764779092.gnway.cc', //数据中心
-            //     changeOrigin: true,
-            //     rewrite: path => path.replace(/^\/hzj/, '') //路径重写，把'/api'替换为''
-            // }
         }
     },
     resolve: {