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

This commit is contained in:
2024-04-29 09:02:06 +08:00
parent 8117b8673b
commit 0c7b5ff4d6
17 changed files with 2732 additions and 792 deletions

View File

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

View File

@@ -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",

View File

@@ -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',

View File

@@ -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
})
}

View File

@@ -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

View File

@@ -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')
}
}
]
}
]
}

694
src/utils/min-dash.js Normal file
View File

@@ -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 };

View File

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

View File

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

View File

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

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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 + '}';
});
}

View File

@@ -14,20 +14,18 @@ export default defineConfig({
open: true,
proxy: {
'/api': {
// target: 'http://192.168.1.31:10215', //数据中心
target: 'http://192.168.1.31:10215', //数据中心
// target: 'http://10.95.53.49:10215', //海南服务器ip
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: {

1740
yarn.lock

File diff suppressed because it is too large Load Diff