gitee/vben-web
1
0
Fork 1
mirror of https://gitee.com/vben/vben-web.git synced 2026-10-06 14:13:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

工作流优化，集成系统组织架构，增加转变，沟通，废弃功能。增加条件判断等

Browse Source
This commit is contained in:
zsvg
2022-10-09 16:11:53 +08:00
parent 56876af554
commit a714f8ce91
46 changed files with 5490 additions and 2408 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/comps/bpm/edit.vue
+11 -2
View File
@@ -99,7 +99,7 @@ const toggleFlowChart = async () => {
const elementRegistry = BpmnStore.getModeler().get('elementRegistry');
const list1 = [] as any;
elementRegistry.forEach((item: any) => {
if (item.id == 'N1') {
if (item.id == 'NS') {
list1.push(item);
}
});
@@ -113,15 +113,24 @@ const toggleFlowChart = async () => {
const list3 = [] as any;
elementRegistry.forEach((item: any) => {
if (item.id == 'N2') {
if (item.id == 'N1') {
list3.push(item);
}
});
const list4 = [] as any;
elementRegistry.forEach((item: any) => {
if (item.id == map.tarno) {
list4.push(item);
}
});
let modeling = BpmnStore.modeler.get('modeling');
modeling.setColor(list1, {fill: '#e4feef'});
modeling.setColor(list2, {stroke: '#009900'});
modeling.setColor(list3, {fill: '#fed6d6'});
modeling.setColor(list4, {fill: '#e3f1ff'});
}
};
src/comps/bpm/tmpl/code.vue
+55
View File
@@ -0,0 +1,55 @@
<template>
<el-dialog v-if="state.show" v-model='state.show' title='代码预览' draggable width='90%'>
<CodeMirror
v-model:value="state.code"
:options="state.cmOptions"
border
placeholder="test placeholder"
height="500px"
/>
</el-dialog>
</template>
<script lang='ts' setup>
import {defineExpose, reactive} from 'vue';
// import CodeMirror from 'codemirror';
import CodeMirror from "codemirror-editor-vue3";
import 'codemirror/lib/codemirror.css'; // 引入css文件
// import 'codemirror/theme/idea.css';
import 'codemirror/theme/darcula.css';
// import 'codemirror/mode/javascript/javascript.js'; // 引入语言模式 可以从 codemirror/mode/ 下引入多个
import 'codemirror/mode/clike/clike.js'; // 引入语言模式 可以从 codemirror/mode/ 下引入多个
//https://renncheung.github.io/codemirror-editor-vue3/instructions/props.html
const state = reactive({
cmShow:true,
show: false,
code:'',
cmOptions: {
readOnly: true,
// mode: 'text/x-nginx-conf', // Language mode
// mode: 'javascript', // Language mode
// mode: 'text/x-csharp', // Language mode
mode: 'text/x-java', // Language mode
// theme: 'darcula', // Theme
lineNumbers: true, // Show line number
smartIndent: true, // Smart indent
indentUnit: 4, // The smart indent unit is 2 spaces in length
foldGutter: true, // Code folding
matchBrackets: true,
autoCloseBrackets: true,
styleActiveLine: true, // Display the style of the selected row
}
});
const openModal = async (data: any) => {
state.code = data;
state.show = true;
};
defineExpose({openModal});
</script>
src/comps/bpm/tmpl/custom/CustomPalette.js
+56
View File
@@ -0,0 +1,56 @@
// CustomPalette.js
export default class CustomPalette {
constructor(bpmnFactory, create, elementFactory, palette, translate) {
this.bpmnFactory = bpmnFactory;
this.create = create;
this.elementFactory = elementFactory;
this.translate = translate;
palette.registerProvider(this);
}
getPaletteEntries(element) {
const {
bpmnFactory,
create,
elementFactory,
translate
} = this;
function createTask() {
return function(event) {
const businessObject = bpmnFactory.create('bpmn:Task'); // 其实这个也可以不要
const shape = elementFactory.createShape({
type: 'bpmn:Task',
businessObject
});
console.log(1111)
console.log(shape) // 只在拖动或者点击时触发
create.start(event, shape);
console.log(2222)
}
}
return {
'create.lindaidai-task': {
group: 'model',
className: 'icon-custom lindaidai-task',
title: translate('创建一个类型为lindaidai-task的任务节点'),
action: {
dragstart: createTask(),
click: createTask(),
}
}
}
}
}
CustomPalette.$inject = [
'bpmnFactory',
'create',
'elementFactory',
'palette',
'translate'
]
src/comps/bpm/tmpl/custom/CustomRenderer.js
+125
View File
@@ -0,0 +1,125 @@
import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';
import {
append as svgAppend,
attr as svgAttr,
create as svgCreate
} from 'tiny-svg';
import { customElements, customConfig, hasLabelElements } from '../utils/util'
import { is } from 'bpmn-js/lib/util/ModelUtil';
const HIGH_PRIORITY = 1500
export default class CustomRenderer extends BaseRenderer {
constructor(eventBus, bpmnRenderer, modeling) {
super(eventBus, HIGH_PRIORITY);
this.bpmnRenderer = bpmnRenderer;
this.modeling = modeling;
}
canRender(element) {
// ignore labels
return !element.labelTarget;
}
drawShape(parentNode, element) {
console.log(element)
const type = element.type // 获取到类型
// if (customElements.includes(type)) { // or customConfig[type]
if (type === 'bpmn:Task') { // or customConfig[type]
const { url, attr } = customConfig[type]
// const customIcon = svgCreate('image', {
// ...attr,
// href: url
// })
// let color = element.businessObject.color;
// console.log(element.businessObject.di);
// element.businessObject.di.set('bioc:stroke', "red")
// const shape = this.bpmnRenderer.drawShape(parentNode, element);
const myShape = svgCreate('rect',{
"width":attr.width,
"height":attr.height,
"fill":"transparent",
"stroke":"black",
"stroke-width":"1",
})
svgAppend(parentNode, myShape)
const myLine = svgCreate('line',{
"x1":"0",
"y1":"1.5em",
"x2":attr.width,
"y2":"1.5em",
"stroke":"black",
"stroke-width":"1",
})
svgAppend(parentNode, myLine);
const tableName = svgCreate('text', {
"font-size": "14",
"fill": "blue",
"x":attr.width/2,
"dy":"15",
"text-anchor":"middle",
})
tableName.innerHTML="测试一下 [sys_org_dept]";
svgAppend(parentNode, tableName);
const customDiv = svgCreate('text', {
"font-size": "14",
"font-family":'Courier New',
"fill": "#000"
})
customDiv.innerHTML="<tspan x='8' dy='38' fill='green'>名称</tspan>\n" +
" <tspan x='8' dy='1.3em'>crtim</tspan>\n" +
" <tspan x='8' dy='1.3em'>uptim</tspan>\n" +
" <tspan x='8' dy='1.3em'>crman</tspan>\n" +
" <tspan x='70' y='38' fill='green'>描述</tspan>\n" +
" <tspan x='70' dy='1.3em'>创建时间</tspan>\n" +
" <tspan x='70' dy='1.3em'>更新时间</tspan>\n" +
" <tspan x='70' dy='1.3em'>创建人</tspan>" ;
element['width'] = attr.width // 这里我是取了巧, 直接修改了元素的宽高
element['height'] = attr.height
// let color = element.businessObject.color
// element.businessObject.di.set('bioc:stroke', color)
// svgAppend(parentNode, customIcon)
svgAppend(parentNode, customDiv)
// 判断是否有name属性来决定是否要渲染出label
// if (!hasLabelElements.includes(type) && element.businessObject.name) {
// const text = svgCreate('text', {
// x: attr.x,
// y: attr.y + attr.height + 20,
// "font-size": "14",
// "fill": "#000"
// })
// text.innerHTML = element.businessObject.name
// svgAppend(parentNode, text)
// console.log(text)
// }
// this.modeling.resizeShape(element, {
// x: element.x,
// y: element.y,
// width: element['width'] / 2,
// height: element['height'] / 2
// })
// return customIcon
return myShape
}
// else if (true) {
// console.log('我是绿色的')
// // let color = element.businessObject.color
// // element.businessObject.di.set('bioc:stroke', color)
// const shape = this.bpmnRenderer.drawShape(parentNode, element)
// return shape
// }
const shape = this.bpmnRenderer.drawShape(parentNode, element)
return shape
}
getShapePath(shape) {
return this.bpmnRenderer.getShapePath(shape);
}
}
CustomRenderer.$inject = ['eventBus', 'bpmnRenderer', 'modeling'];
src/comps/bpm/tmpl/custom/index.js
+9
View File
@@ -0,0 +1,9 @@
import CustomPalette from './CustomPalette'
import CustomRenderer from './CustomRenderer'
export default {
__init__: ['customPalette', 'customRenderer'],
customPalette: ['type', CustomPalette],
customRenderer: ['type', CustomRenderer]
}
src/comps/bpm/tmpl/customModeler/custom/CustomPalette.js
+298
View File
@@ -0,0 +1,298 @@
/**
* A palette that allows you to create BPMN _and_ custom elements.
*/
import { assign } from "min-dash";
import { getNodeNum } from './store';
let numFlag="x";
export default function PaletteProvider(palette, create, elementFactory,handTool,lassoTool,
spaceTool, globalConnect, bpmnFactory) {
this.create = create
this.elementFactory = elementFactory
this.handTool = handTool;
this.lassoTool = lassoTool;
this.spaceTool = spaceTool;
this.globalConnect = globalConnect
this.bpmnFactory = bpmnFactory
palette.registerProvider(this);
if(window.location.hash.indexOf("uuid=")>0){
numFlag = window.location.hash.split("uuid=")[1];
}else if(window.location.hash.indexOf("?id=")>0){
numFlag = window.location.hash.split("?id=")[1];
}
console.log("numFlag1:"+numFlag);
}
PaletteProvider.$inject = [
'palette',
'create',
'elementFactory',
"handTool",
"lassoTool",
"spaceTool",
'globalConnect',
'bpmnFactory'
]
PaletteProvider.prototype.getPaletteEntries = function(element) {
const {
create,
elementFactory,
bpmnFactory,
handTool,
lassoTool,
spaceTool,
globalConnect,
translate,
} = this;
// function createTask() {
// return function(event) {
// const id ="N"+(getNodeNum(numFlag)-0+1);
// const businessObject = bpmnFactory.create('bpmn:Task', { id,custom: 2 });
// // businessObject['custom'] = 1 // 这样不行
// const shape = elementFactory.createShape({
// type: 'bpmn:Task',
// businessObject
// });
// const label = elementFactory.createLabel();
// console.log(shape) // 只在拖动或者点击时触发
// console.log(label) // 只在拖动或者点击时触发
// create.start(event, shape);
// // create.start(event, label);
// }
// }
function createUserNode() {
return function(event) {
console.log(numFlag);
const id ="N"+(getNodeNum(numFlag)-0+1);
const businessObject = bpmnFactory.create('bpmn:UserTask', {id, custom: 2,name:"审批节点" });
// businessObject['custom'] = 1 // 这样不行
const shape = elementFactory.createShape({
type: 'bpmn:UserTask',
businessObject
});
const label = elementFactory.createLabel();
console.log(shape) // 只在拖动或者点击时触发
console.log(label) // 只在拖动或者点击时触发
create.start(event, shape);
// create.start(event, label);
}
}
// function createStratEvent() {
// return function(event) {
// const shape = elementFactory.createShape({
// type: 'bpmn:StartEvent'
// });
// create.start(event, shape);
// }
// }
// function createGateway() {
// return function(event) {
// const shape = elementFactory.createShape({
// type: 'bpmn:ExclusiveGateway'
// });
// create.start(event, shape);
// }
// }
function createAction(type, group, className, title, options) {
function createListener(event) {
const id ="N"+(getNodeNum(numFlag)-0+1);
let name="";
if(type==="bpmn:ReceiveTask"){
name="抄送节点";
}else if(type==="bpmn:ScriptTask"){
name="脚本节点";
}else if(type==="bpmn:ServiceTask"){
name="服务节点";
}else if(type==="bpmn:ExclusiveGateway"){
name="互斥网关";
}else if(type==="bpmn:ParallelGateway"){
name="并行网关";
}
console.log(type);
const taskBusinessObject = bpmnFactory.create(type, { id,name,custom:2 })
var shape = elementFactory.createShape(assign({ type: type }, options,{ businessObject: taskBusinessObject }));
// var shape = elementFactory.createShape(assign({ type: type }, options));
if (options) {
shape.businessObject.di.isExpanded = options.isExpanded;
}
create.start(event, shape);
}
var shortType = type.replace(/^bpmn:/, "");
return {
group: group,
className: className,
title: title || translate("Create {type}", { type: shortType }),
action: {
dragstart: createListener,
click: createListener
}
};
}
return {
"hand-tool": {
group: "tools",
className: "bpmn-icon-hand-tool",
title: "激活抓手工具",
action: {
click: function (event) {
handTool.activateHand(event);
}
}
},
"lasso-tool": {
group: "tools",
className: "bpmn-icon-lasso-tool",
title: "激活套索工具",
action: {
click: function (event) {
lassoTool.activateSelection(event);
}
}
},
"space-tool": {
group: "tools",
className: "bpmn-icon-space-tool",
title: "激活空间工具",
action: {
click: function (event) {
spaceTool.activateSelection(event);
}
}
},
"global-connect-tool": {
group: "tools",
className: "bpmn-icon-connection-multi",
title: "激活连接工具",
action: {
click: function (event) {
globalConnect.toggle(event);
}
}
},
"tool-separator": {//工具分割线
group: 'tools',
separator: true
},
// "create.user-task": createAction(
// "bpmn:UserTask",
// "activity",
// "bpmn-icon-user-task",
// "添加审批节点"
// ),
// 'create.user-task2': {
// group: 'model',
// className: 'bpmn-icon-user-task',
// title: '添加审批节点',
// action: {
// dragstart: createUserNode(),
// click: createUserNode()
// }
// },
'create.user-task': {
group: 'model',
className: 'bpmn-icon-user-task',
title: '添加审批节点',
action: {
dragstart: createUserNode(),
click: createUserNode()
}
},
"create.receive-task": createAction(
"bpmn:ReceiveTask",
"activity",
"bpmn-icon-receive-task",
"添加抄送节点"
),
"create.script-task": createAction(
"bpmn:ScriptTask",
"activity",
"bpmn-icon-script-task",
"添加脚本节点"
),
"create.service-task": createAction(
"bpmn:ServiceTask",
"activity",
"bpmn-icon-service-task",
"添加服务节点"
),
"create.exclusive-gateway": createAction(
"bpmn:ExclusiveGateway",
"activity",
"bpmn-icon-gateway-xor",
"添加互斥网关"
),
"create.parallel-gateway": createAction(
"bpmn:ParallelGateway",
"activity",
"bpmn-icon-gateway-parallel",
"添加并行网关"
),
// "create.data-object": createAction(
// "bpmn:DataObject",
// "activity",
// "bpmn-icon-data-object",
// "添加数据对象"
// ),
// "create.data-store": createAction(
// "bpmn:DataStore",
// "activity",
// "bpmn-icon-data-store",
// "添加数据存储"
// ),
"create.participant": createAction(
"bpmn:Participant",
"activity",
"bpmn-icon-participant",
"添加泳道"
),
"create.group": createAction(
"bpmn:Group",
"activity",
"bpmn-icon-group",
"添加分组"
),
// "create.data-store": createAction(
// "bpmn:DataStore",
// "activity",
// "bpmn-icon-data-store",
// "添加数据存储"
// ),
// 'create.user-node': {
// group: 'model',
// className: 'bpmn-icon-user-task',
// title: '添加审批节点',
// action: {
// dragstart: createUserNode(),
// click: createUserNode()
// }
// },
// 'create.lindaidai-task': {
// group: 'model',
// className: 'icon-custom lindaidai-task',
// title: '创建一个类型为lindaidai-task的任务节点',
// action: {
// dragstart: createTask(),
// click: createTask()
// }
// },
// 'create.exclusive-gateway': {
// group: 'gateway',
// className: 'bpmn-icon-gateway-none',
// title: '创建一个网关',
// action: {
// dragstart: createGateway(),
// click: createGateway()
// }
// }
}
}
src/comps/bpm/tmpl/customModeler/custom/CustomPalette3.js
+112
View File
@@ -0,0 +1,112 @@
import { assign } from "min-dash";
export default function PaletteProvider(
palette,
create,
elementFactory,
handTool,
lassoTool,
spaceTool,
globalConnect,
translate
) {
this.create = create;
this.elementFactory = elementFactory;
this.handTool = handTool;
this.lassoTool = lassoTool;
this.spaceTool = spaceTool;
this.globalConnect = globalConnect;
this.translate = translate;
palette.registerProvider(this);
}
PaletteProvider.$inject = [
"palette",
"create",
"elementFactory",
"handTool",
"lassoTool",
"spaceTool",
"globalConnect",
"translate"
];
PaletteProvider.prototype.getPaletteEntries = function (element) {
const {
create,
elementFactory,
handTool,
lassoTool,
spaceTool,
globalConnect,
translate
} = this;
function createAction(type, group, className, title, options) {
function createListener(event) {
var shape = elementFactory.createShape(assign({ type: type }, options));
if (options) {
shape.businessObject.di.isExpanded = options.isExpanded;
}
create.start(event, shape);
}
var shortType = type.replace(/^bpmn:/, "");
return {
group: group,
className: className,
title: title || translate("Create {type}", { type: shortType }),
action: {
dragstart: createListener,
click: createListener
}
};
}
return {
"lasso-tool": {
group: "tools",
className: "bpmn-icon-lasso-tool",
title: "Activate the lasso tool",
action: {
click: function (event) {
lassoTool.activateSelection(event);
}
}
},
"tool-separator": {
group: "tools",
separator: true
},
"create.start-event": createAction(
"bpmn:StartEvent",
"event",
"bpmn-icon-start-event-none",
"创建开始节点"
),
"create.end-event": createAction(
"bpmn:EndEvent",
"event",
"bpmn-icon-end-event-none",
"创建结束节点"
),
"create.user-task": createAction(
"bpmn:UserTask",
"activity",
"bpmn-icon-user-task",
"创建用户任务"
),
"create.exclusive-gateway": createAction(
"bpmn:ExclusiveGateway",
"gateway",
"bpmn-icon-gateway-xor",
"创建排他网关"
)
};
};
src/comps/bpm/tmpl/customModeler/custom/CustomRenderer.js
+284
View File
@@ -0,0 +1,284 @@
/* eslint-disable no-unused-vars */
import inherits from 'inherits'
import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer'
import {
isObject,
assign,
forEach
} from 'min-dash';
import {
append as svgAppend,
create as svgCreate,
classes as svgClasses
} from 'tiny-svg'
import { customElements, customConfig, hasLabelElements } from '../../utils/util'
/**
* A renderer that knows how to render custom elements.
*/
export default function CustomRenderer(eventBus, styles, textRenderer) {
BaseRenderer.call(this, eventBus, 2000)
var computeStyle = styles.computeStyle
function renderLabel(parentGfx, label, options) {
options = assign({
size: {
width: 100
}
}, options);
var text = textRenderer.createText(label || '', options);
svgClasses(text).add('djs-label');
svgAppend(parentGfx, text);
return text;
}
this.drawCustomElements = function(parentNode, element) {
// console.log(678)
// console.log(parentNode)
console.log("自定义渲染")
console.log(element)
const type = element.type // 获取到类型
if (type !== 'label') {
console.log("type="+type);
if (type === 'bpmn:Task') { // or customConfig[type]
console.log("重构")
let data={};
data.tabna = "sys_org [组织架构汇总表]";
data.fields = [
{name:'id',comet:'主键'},
{name:'name',comet:'名称'}
];
if(element.businessObject.$attrs.data){
data=JSON.parse(element.businessObject.$attrs.data)
}
const { url, attr } = customConfig[type];
attr.height=44+data.fields.length*18.3;
// const customIcon = svgCreate('image', {
// ...attr,
// href: url
// })
// let color = element.businessObject.color;
// console.log(element.businessObject.di);
// element.businessObject.di.set('bioc:stroke', "red")
// const shape = this.bpmnRenderer.drawShape(parentNode, element);
const myShape = svgCreate('rect',{
"width":attr.width,
"height":attr.height,
"fill":"transparent",
"stroke":"black",
"stroke-width":"1",
})
svgAppend(parentNode, myShape)
const myLine = svgCreate('line',{
"x1":"0",
"y1":"1.5em",
"x2":attr.width,
"y2":"1.5em",
"stroke":"black",
"stroke-width":"1",
})
svgAppend(parentNode, myLine);
const tableName = svgCreate('text', {
"font-size": "14",
"fill": "blue",
"x":attr.width/2,
"dy":"15",
"text-anchor":"middle",
})
// tableName.innerHTML="测试一下 [sys_org_dept]";
tableName.innerHTML=data.tabna;
svgAppend(parentNode, tableName);
const customDiv = svgCreate('text', {
"font-size": "14",
"font-family":'Courier New',
"fill": "#000"
})
customDiv.innerHTML="<tspan x='8' dy='38' fill='green'>名称</tspan>";
for (const field of data.fields) {
customDiv.innerHTML+="<tspan x='8' dy='1.3em'>"+field.name+"</tspan>";
}
customDiv.innerHTML+="<tspan x='70' y='38' fill='green'>描述</tspan>";
for (const field of data.fields) {
customDiv.innerHTML+="<tspan x='70' dy='1.3em'>"+field.comet+"</tspan>";
}
element['width'] = attr.width // 这里我是取了巧, 直接修改了元素的宽高
element['height'] = attr.height
// let color = element.businessObject.color
// element.businessObject.di.set('bioc:stroke', color)
// svgAppend(parentNode, customIcon)
svgAppend(parentNode, customDiv)
// 判断是否有name属性来决定是否要渲染出label
// if (!hasLabelElements.includes(type) && element.businessObject.name) {
// const text = svgCreate('text', {
// x: attr.x,
// y: attr.y + attr.height + 20,
// "font-size": "14",
// "fill": "#000"
// })
// text.innerHTML = element.businessObject.name
// svgAppend(parentNode, text)
// console.log(text)
// }
// this.modeling.resizeShape(element, {
// x: element.x,
// y: element.y,
// width: element['width'] / 2,
// height: element['height'] / 2
// })
// return customIcon
return myShape
}else if(type === 'bpmn:UserTask'){
const { url, attr } = customConfig[type];
const myShape = svgCreate('rect',{
"width":attr.width,
"height":attr.height,
"fill":"transparent",
"stroke":"black",
"stroke-width":"2",
"rx":'10'
})
svgAppend(parentNode, myShape);
const titleDiv = svgCreate('text', {
"font-size": "14",
"font-family":'Courier New',
"fill": "#000",
"text-anchor":"middle",
})
titleDiv.innerHTML="<tspan x='50' dy='20' fill='black'>"+element.id+"</tspan>";
svgAppend(parentNode, titleDiv);
const contDiv = svgCreate('text', {
"font-size": "12",
"font-family":"Courier New",
"fill": "#000",
"text-anchor":"middle",
})
contDiv.innerHTML="";
if(element.businessObject.name){
const size= Math.ceil(element.businessObject.name.length/7);
if(size===1){
contDiv.innerHTML+="<tspan x='50' dy='48'>"+element.businessObject.name+"</tspan>";
}else if(size===2){
contDiv.innerHTML+="<tspan x='50' dy='45'>"+element.businessObject.name.substring(0,7)+"</tspan>";
contDiv.innerHTML+="<tspan x='50' dy='16'>"+element.businessObject.name.substring(7)+"</tspan>";
}else if(size===3){
contDiv.innerHTML+="<tspan x='50' dy='42'>"+element.businessObject.name.substring(0,7)+"</tspan>";
contDiv.innerHTML+="<tspan x='50' dy='16'>"+element.businessObject.name.substring(7,14)+"</tspan>";
contDiv.innerHTML+="<tspan x='50' dy='16'>"+element.businessObject.name.substring(14)+"</tspan>";
}else if(size>3){
contDiv.innerHTML+="<tspan x='50' dy='42'>"+element.businessObject.name.substring(0,7)+"</tspan>";
contDiv.innerHTML+="<tspan x='50' dy='16'>"+element.businessObject.name.substring(7,14)+"</tspan>";
contDiv.innerHTML+="<tspan x='50' dy='16'>"+element.businessObject.name.substring(14,19)+"..."+"</tspan>";
}
// else{
// for(let i=0;i<size;i++){
// if(i!==size-1){
// if(i===0){
// contDiv.innerHTML+="<tspan x='50' dy='36'>"+element.businessObject.name.substring(i*7,7*(i+1))+"</tspan>";
// }else{
// contDiv.innerHTML+="<tspan x='50' dy='16'>"+element.businessObject.name.substring(i*7,7*(i+1))+"</tspan>";
// }
// }else{
// if(i===0){
// contDiv.innerHTML+="<tspan x='50' dy='38'>"+element.businessObject.name.substring(i*7)+"</tspan>";
// }else{
// contDiv.innerHTML+="<tspan x='50' dy='16'>"+element.businessObject.name.substring(i*7)+"</tspan>";
// }
// }
// }
// }
}
// contDiv.innerHTML="<tspan x='8' dy='38'>"+element.businessObject.name+"</tspan>";
svgAppend(parentNode, contDiv);
if(element.id==="N1"){
const imgPath = svgCreate('path', {
"d":"m 17,15 c 0.234,-0.01 5.604,0.008 8.029,0.004 0.808,0 1.271,-0.172 1.417,-0.752 0.227,-0.898 -0.334,-1.314 -1.338,-1.316 -2.467,-0.01 -7.886,-0.004 -8.108,-0.004 -0.014,-0.079 0.016,-0.533 0,-0.61 0.195,-0.042 8.507,0.006 9.616,0.002 0.877,-0.007 1.35,-0.438 1.353,-1.208 0.003,-0.768 -0.479,-1.09 -1.35,-1.091 -2.968,-0.002 -9.619,-0.013 -9.619,-0.013 v -0.591 c 0,0 5.052,-0.016 7.225,-0.016 0.888,-0.002 1.354,-0.416 1.351,-1.193 -0.006,-0.761 -0.492,-1.196 -1.361,-1.196 -3.473,-0.005 -10.86,-0.003 -11.0829995,-0.003 -0.022,-0.047 -0.045,-0.094 -0.069,-0.139 0.3939995,-0.319 2.0409995,-1.626 2.4149995,-2.017 0.469,-0.4870005 0.519,-1.1650005 0.162,-1.6040005 -0.414,-0.511 -0.973,-0.5 -1.48,-0.236 -1.4609995,0.764 -6.5999995,3.6430005 -7.7329995,4.2710005 -0.9,0.499 -1.516,1.253 -1.882,2.19 -0.37000002,0.95 -0.17,2.01 -0.166,2.979 0.004,0.718 -0.27300002,1.345 -0.055,2.063 0.629,2.087 2.425,3.312 4.859,3.318 4.6179995,0.014 9.2379995,-0.139 13.8569995,-0.158 0.755,-0.004 1.171,-0.301 1.182,-1.033 0.012,-0.754 -0.423,-0.969 -1.183,-0.973 -1.778,-0.01 -5.824,-0.004 -6.04,-0.004 10e-4,-0.084 0.003,-0.586 10e-4,-0.67 z",
"fill": "white",
"stroke-width": "0.5px",
"stroke": "black"
})
svgAppend(parentNode, imgPath);
}else{
const imgPath1 = svgCreate('path', {
"d":"m 15,12 c 0.909,-0.845 1.594,-2.049 1.594,-3.385 0,-2.554 -1.805,-4.62199999 -4.357,-4.62199999 -2.55199998,0 -4.28799998,2.06799999 -4.28799998,4.62199999 0,1.348 0.974,2.562 1.89599998,3.405 -0.52899998,0.187 -5.669,2.097 -5.794,4.7560005 v 6.718 h 17 v -6.718 c 0,-2.2980005 -5.5279996,-4.5950005 -6.0509996,-4.7760005 zm -8,6 l 0,5.5 m 11,0 l 0,-5",
"fill": "white",
"stroke-width": "0.5px",
"stroke": "black"
})
const imgPath2 = svgCreate('path', {
"d":"m 15,12 m 2.162,1.009 c 0,2.4470005 -2.158,4.4310005 -4.821,4.4310005 -2.66499998,0 -4.822,-1.981 -4.822,-4.4310005 ",
"fill": "white",
"stroke-width": "0.5px",
"stroke": "black"
})
const imgPath3 = svgCreate('path', {
"d":"m 15,12 m -6.9,-3.80 c 0,0 2.25099998,-2.358 4.27399998,-1.177 2.024,1.181 4.221,1.537 4.124,0.965 -0.098,-0.57 -0.117,-3.79099999 -4.191,-4.13599999 -3.57499998,0.001 -4.20799998,3.36699999 -4.20699998,4.34799999 z",
"fill": "black",
"stroke-width": "0.5px",
"stroke": "black"
})
svgAppend(parentNode, imgPath1);
svgAppend(parentNode, imgPath2);
svgAppend(parentNode, imgPath3);
}
return myShape
}
// else if (true) {
// console.log('我是绿色的')
// // let color = element.businessObject.color
// // element.businessObject.di.set('bioc:stroke', color)
// const shape = this.bpmnRenderer.drawShape(parentNode, element)
// return shape
// }
const shape = this.bpmnRenderer.drawShape(parentNode, element)
return shape
} else {
// element
const shape = this.bpmnRenderer.drawShape(parentNode, element)
return shape
}
}
}
inherits(CustomRenderer, BaseRenderer)
CustomRenderer.$inject = ['eventBus', 'styles', 'textRenderer']
CustomRenderer.prototype.canRender = function(element) {
// ignore labels
return true
// return !element.labelTarget;
}
CustomRenderer.prototype.drawShape = function(p, element) {
console.log(element)
console.log(element.type)
if (customElements.includes(element.type)) {
return this.drawCustomElements(p, element)
}
}
CustomRenderer.prototype.getShapePath = function(shape) {
console.log(shape)
}
src/comps/bpm/tmpl/customModeler/custom/index.js
+9
View File
@@ -0,0 +1,9 @@
import CustomPalette from './CustomPalette'
import CustomRenderer from './CustomRenderer'
// import CustomContextPadProvider from './CustomContextPadProvider'
export default {
__init__: ['paletteProvider', 'customRenderer', 'contextPadProvider'],
paletteProvider: ['type', CustomPalette],
customRenderer: ['type', CustomRenderer],
// contextPadProvider: ['type', CustomContextPadProvider]
}
src/comps/bpm/tmpl/customModeler/custom/store.ts
+53
View File
@@ -0,0 +1,53 @@
const nodeNumMap = { } as any;
const lineNumMap = { } as any;
export const putNodeNum = (id:string,num: Number) => {
let flag=false;
for (let key in nodeNumMap) {
if(key==id){
flag=true;
if(num>nodeNumMap[key]){
nodeNumMap[key]=num;
}
break;
}
}
if(!flag){
nodeNumMap[id]=num;
}
};
export const getNodeNum = (id:string) => {
for (let key in nodeNumMap) {
if(key==id){
return nodeNumMap[id];
}
}
return null;
};
export const putLineNum = (id:string,num: Number) => {
let flag=false;
for (let key in lineNumMap) {
if(key==id){
flag=true;
if(num>lineNumMap[key]){
lineNumMap[key]=num;
}
break;
}
}
if(!flag){
lineNumMap[id]=num;
}
};
export const getLineNum = (id:string) => {
for (let key in lineNumMap) {
if(key==id){
return lineNumMap[id];
}
}
return null;
};
src/comps/bpm/tmpl/customModeler/index.js
+19
View File
@@ -0,0 +1,19 @@
import Modeler from 'bpmn-js/lib/Modeler'
import inherits from 'inherits'
import CustomModule from './custom'
export default function CustomModeler(options) {
Modeler.call(this, options)
this._customElements = []
}
inherits(CustomModeler, Modeler)
CustomModeler.prototype._modules = [].concat(
CustomModeler.prototype._modules, [
CustomModule
]
)
src/comps/bpm/tmpl/edit.vue
+337
View File
@@ -0,0 +1,337 @@
<template>
<div>
<div style="margin-bottom: 10px">
<!-- <svg class="icon" aria-hidden="true" style="height: 25px;width: 40px">-->
<!-- <use xlink:href="#icon-shangchuan"></use>-->
<!-- </svg>-->
<!-- <el-button type='primary' @click='impXml' plain :icon='Upload'>导入</el-button>-->
<!-- <el-button type='primary' @click='expXML' plain :icon='Download'>导出XML</el-button>-->
<el-button type='primary' @click='expSVG' plain :icon='Download'>导出SVG</el-button>
<el-button type='primary' @click='codeShow' plain :icon='View'>代码预览</el-button>
<span style="color: red;margin-left: 10px">注：双击节点或连线编辑信息</span>
</div>
<div class='containers'>
<div class='canvas' ref='canvasRef' style='height: 1000px;'></div>
<NodeModal ref='nodeModalRef' @close='closeNodeModal' />
</div>
<CodeModal ref='codeModalRef'/>
</div>
</template>
<script lang='ts' setup>
// import BpmnModeler from 'bpmn-js/lib/Modeler'
import { Download,Upload,View} from '@element-plus/icons-vue';
import { defineExpose, onMounted, reactive, ref, toRefs } from 'vue';
import 'bpmn-js/dist/assets/diagram-js.css'; // 左边工具栏以及编辑节点的样式
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
// import customModule from './custom';
import CustomModeler from './customModeler';
import NodeModal from './modal.vue';
import CodeModal from './code.vue';
import { putNodeNum, putLineNum, getLineNum, getNodeNum } from './customModeler/custom/store';
import { useRoute } from 'vue-router';
const route = useRoute();
const canvasRef = ref();
const state = reactive({
data: [] as any,
bpmnModeler: {} as any,
numFlag: 'x' as any,
});
const props = defineProps({
prxml: String,
});
const { bpmnModeler } = toRefs(state);
onMounted(async () => {
if (route.query?.uuid) {
state.numFlag = route.query?.uuid;
} else if (route.query?.id) {
state.numFlag = route.query?.id;
}
console.log('numFlag2:' + state.numFlag);
bpmnModeler.value = new CustomModeler({
container: canvasRef.value,
additionalModules: [{
__init__: [
'labelEditingProvider',
],
labelEditingProvider: ['value', null],
},
],
});
bpmnModeler.value.get('keyboard').bind(document);
if (props.prxml) {
bpmnModeler.value.importXML(props.prxml, (err: any) => {
if (err) {
console.error(err);
} else {
console.log('ok');
}
});
} else {
bpmnModeler.value.importXML(defxml, (err: any) => {
if (err) {
console.error(err);
} else {
console.log('ok');
}
});
}
addModelerListener();
addEventBusListener();
});
const addModelerListener = () => {
// const bpmnjs = this.bpmnModeler
// const that = this
// 这里我是用了一个forEach给modeler上添加要绑定的事件
const events = ['shape.added', 'shape.move.end', 'shape.removed','connection.added', 'connect.end', 'connect.move'];
events.forEach(function(event) {
bpmnModeler.value.on(event, e => {
const elementRegistry = bpmnModeler.value.get('elementRegistry');
const shape = e.element ? elementRegistry.get(e.element.id) : e.shape;
if (event == 'shape.added') {
if (e.element.id.substring(0, 1) == 'N' && e.element.id.substring(0, 2) !== 'NS' && e.element.id.substring(0, 2) !== 'NE') {
// shape.name="审批节点"
putNodeNum(state.numFlag, e.element.id.substring(1) - 0);
}
} else if (event == 'connection.added') {
// console.log("创建了线段");
// console.log(e.element);
if (e.element.id.substring(0, 1) == 'L') {
putLineNum(state.numFlag, e.element.id.substring(1) - 0);
}else{
//如果更新Line的ID?
// bpmnModeler.value.get('modeling').updateProperties(e.element, {
// id: "L"+(getLineNum(state.numFlag)-0+1),
// // data:JSON.stringify(data),
// });
// putLineNum(state.numFlag, (getLineNum(state.numFlag)-0+1));
}
}
});
});
};
let currNode = {};
// let lastNum=10;
const addEventBusListener = () => {
const eventBus = bpmnModeler.value.get('eventBus'); // 需要使用eventBus
const eventTypes = ['element.dblclick']; // 需要监听的事件集合
eventTypes.forEach(function(eventType) {
eventBus.on(eventType, function(e) {
if (!e || e.element.type == 'bpmn:Process') return;
const elementRegistry = bpmnModeler.value.get('elementRegistry');
const shape = elementRegistry.get(e.element.id); // 传递id进去
// if(e.element.id.substring(0,1)!="N"){
//
// // bpmnModeler.value.get('modeling').updateProperties(shape,{
// // name: '我哎你'
// // })
//
// // // e.element.id="N"+(++lastNum);
// // shape.id="N"+(++lastNum);
// ++lastNum;
// shape.id="N"+lastNum;
// shape.businessObject.id="N"+lastNum;
//
// console.log('新增了shape');
// // console.log(e.element.id);
// // 展示新增图形的属性
// }
console.log('双击了shape');
nodeModalRef.value.open(shape);
currNode = shape;
// openNodeModal(shape);
// console.log(shape.businessObject.id);
// shape.businessObject.name='李四';
// bpmnModeler.value.get('modeling').updateProperties(shape,{
// name: '我是修改后的Task名称'
// })
// this.getModeling().updateProperties(this.getShape(), {
// [modelName]: multiple ? [newElement] : newElement,
// });
console.log(shape); // {Shape}
// console.log(e.element) // {Shape}
// console.log(JSON.stringify(shape)===JSON.stringify(e.element)) // true
});
});
};
const nodeModalRef = ref();
// const openNodeModal = () => {
// nodeModalRef.value.open();
// };
const closeNodeModal = (data: any) => {
if(data.conds){
bpmnModeler.value.get('modeling').updateProperties(currNode, {
name: data.name,
conds: data.conds,
});
}else{
bpmnModeler.value.get('modeling').updateProperties(currNode, {
name: data.name,
hamen: data.hamen,
flway: data.flway,
// data:JSON.stringify(data),
});
}
};
const getXml = async () => {
let backXml = '';
await bpmnModeler.value.saveXML({ format: true }).then(res => {
backXml = res.xml;
});
return backXml;
};
defineExpose({ getXml });
const defxml = '<?xml version="1.0" encoding="UTF-8"?>\n' +
'<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:activiti="http://activiti.org/bpmn" id="sample-diagram" targetNamespace="http://activiti.org/bpmn" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">\n' +
' <bpmn2:process id="Process_1" name="1" isExecutable="true">\n' +
' <bpmn2:startEvent id="NS" name="开始节点">\n' +
' <bpmn2:outgoing>L1</bpmn2:outgoing>\n' +
' </bpmn2:startEvent>\n' +
' <bpmn2:sequenceFlow id="L1" sourceRef="NS" targetRef="N1" />\n' +
' <bpmn2:endEvent id="NE" name="结束节点">\n' +
' <bpmn2:incoming>L2</bpmn2:incoming>\n' +
' </bpmn2:endEvent>\n' +
' <bpmn2:userTask id="N1" name="起草节点" activiti:assignee="l4" activiti:candidateUsers="">\n' +
' <bpmn2:documentation>起草节点，表单数据一般从绑定的表单提取</bpmn2:documentation>\n' +
' <bpmn2:extensionElements>\n' +
' <activiti:formProperty id="userid" type="string" />\n' +
' <activiti:formProperty id="money" type="int" />\n' +
' <activiti:properties>\n' +
' <activiti:property name="编辑" value="edit" />\n' +
' <activiti:property name="撤回" value="back" />\n' +
' <activiti:property name="提交" value="commit" />\n' +
' </activiti:properties>\n' +
' </bpmn2:extensionElements>\n' +
' <bpmn2:incoming>L1</bpmn2:incoming>\n' +
' <bpmn2:outgoing>L2</bpmn2:outgoing>\n' +
' </bpmn2:userTask>\n' +
' <bpmn2:sequenceFlow id="L2" sourceRef="N1" targetRef="NE" />\n' +
' </bpmn2:process>\n' +
' <bpmndi:BPMNDiagram id="BPMNDiagram_1">\n' +
' <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">\n' +
' <bpmndi:BPMNEdge id="Flow_1u6pmzo_di" bpmnElement="L1">\n' +
' <di:waypoint x="360" y="78" />\n' +
' <di:waypoint x="360" y="160" />\n' +
' </bpmndi:BPMNEdge>\n' +
' <bpmndi:BPMNEdge id="Flow_0rj5mf6_di" bpmnElement="L2">\n' +
' <di:waypoint x="360" y="240" />\n' +
' <di:waypoint x="360" y="452" />\n' +
' </bpmndi:BPMNEdge>\n' +
' <bpmndi:BPMNShape id="Event_0byql27_di" bpmnElement="NS">\n' +
' <dc:Bounds x="342" y="42" width="36" height="36" />\n' +
' <bpmndi:BPMNLabel>\n' +
' <dc:Bounds x="339" y="12" width="43" height="14" />\n' +
' </bpmndi:BPMNLabel>\n' +
' </bpmndi:BPMNShape>\n' +
' <bpmndi:BPMNShape id="Activity_0g48n8q_di" bpmnElement="N1">\n' +
' <dc:Bounds x="310" y="160" width="100" height="80" />\n' +
' </bpmndi:BPMNShape>\n' +
' <bpmndi:BPMNShape id="Event_1h4oob7_di" bpmnElement="NE">\n' +
' <dc:Bounds x="342" y="452" width="36" height="36" />\n' +
' <bpmndi:BPMNLabel>\n' +
' <dc:Bounds x="339" y="495" width="43" height="14" />\n' +
' </bpmndi:BPMNLabel>\n' +
' </bpmndi:BPMNShape>\n' +
' </bpmndi:BPMNPlane>\n' +
' </bpmndi:BPMNDiagram>\n' +
'</bpmn2:definitions>\n';
const impXml=()=>{
}
const expXML=async ()=>{
await bpmnModeler.value.saveXML({ format: true }).then(res => {
download(res.xml, 'process', 'bpmn');
});
}
const expSVG=async ()=>{
await bpmnModeler.value.saveSVG({ format: true }).then(res => {
download(res.svg, 'process', 'svg');
});
}
//文本下载
const download = (data: string, filename: string, type: string): void => {
const blob = new Blob([data]);
const tempLink = document.createElement('a'); // 创建a标签
const href = window.URL.createObjectURL(blob); // 创建下载的链接
//filename
const fileName = `${filename}.${type}`;
tempLink.href = href;
tempLink.target = '_blank';
tempLink.download = fileName;
document.body.appendChild(tempLink);
tempLink.click(); // 点击下载
document.body.removeChild(tempLink); // 下载完成移除元素
window.URL.revokeObjectURL(href); // 释放掉blob对象
};
const codeModalRef = ref() as any;
const codeShow=async ()=>{
await bpmnModeler.value.saveXML({ format: true }).then(res => {
codeModalRef.value.openModal(res.xml);
});
}
</script>
<style scoped>
.containers {
position: absolute;
background-color: #ffffff;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+') repeat !important;
}
.canvas {
width: 100%;
height: 100%;
}
.panel {
position: absolute;
right: 0;
top: 0;
width: 300px;
}
</style>
src/comps/bpm/tmpl/modal.vue
+450
View File
@@ -0,0 +1,450 @@
<template>
<div>
<OrgModal ref='orgModal' @close='closeOrgModal' />
<el-dialog v-model='state.isShow' :title='state.title' width='600px' draggable>
<div style='height: 500px'>
<el-form ref='formRef' :model='form' label-width='140px'>
<el-tabs v-model='activeName' type='card' @tab-click='tabChange'>
<el-tab-pane label='基本' name='k1' class='zform zform100 el-form--inline'>
<div class='zform-div'>
<el-form-item :label='state.name' prop='name' :rules="[{ required: true, message: '名称不能为空'}]">
<el-input v-model='form.name' />
</el-form-item>
<el-form-item label='审批人类型：' v-show='cdata.show1||cdata.show2'>
<el-radio-group v-model='form.hatyp'>
<el-radio label='1'>从组织架构选择</el-radio>
<el-radio label='2'>使用公式定义器</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label='审批人：' v-show='cdata.show1||cdata.show2'>
<el-input v-model='cdata.hamen' readonly @click='hamenModal' />
</el-form-item>
<el-form-item label='流转方式：' prop='name' v-show='cdata.show1'>
<el-radio-group v-model='form.flway'>
<el-radio label='1'>串行</el-radio>
<el-radio label='2'>并行</el-radio>
<el-radio label='3'>会审</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label='身份重复跳过配置：' v-show='cdata.show1'>
<el-select v-model='form.remod' style='width: 100%'>
<el-option value='1' label='仅相邻处理人身份重复跳过' />
<el-option value='2' label='处理人身份重复跳过' />
<el-option value='3' label='处理人身份重复不跳过' />
</el-select>
</el-form-item>
<el-form-item label='权限：' v-show='cdata.show1'>
<el-checkbox v-model='form.edtag' label='编辑主文档' />
</el-form-item>
<el-form-item label='流转条件：' v-show='state.cotag'>
<el-input v-model='form.conds' type='textarea'
placeholder='编写JS代码，返回true，则往下流。（注1：$代表form对象；注2：如果是表达式，则表达式为返回结果；注3：如果是复杂的多条语句，则z代表返回结果；）' :rows='8' />
</el-form-item>
<el-form-item :label='state.notes'>
<el-input v-model='form.notes' type='textarea' :rows='4' />
</el-form-item>
</div>
</el-tab-pane>
<el-tab-pane label='操作' name='k2' class='zform zform100 el-form--inline' v-if='cdata.show1'>
<div class='zform-div'>
<el-form-item label='操作方式：' prop='name' :rules="[{ required: true, message: '名称不能为空'}]">
<el-select v-model='form.opway' style='width: 100%' @change='opwayChange'>
<el-option value='1' label='标准审批' />
<el-option value='2' label='自定义...' />
</el-select>
</el-form-item>
<el-form-item label='创建人：'>
<el-table size='small' border :data='form.crops' :row-style="{height: '36px'}" style='width: 100%'>
<el-table-column label='操作类型' width='100'>
<template #default='scope'>
<el-select v-model='scope.row.type' style='width: 100%'>
<el-option value='1' label='催办' />
<el-option value='2' label='撤回' />
<el-option value='3' label='废弃' />
</el-select>
</template>
</el-table-column>
<el-table-column label='操作名称'>
<template #default='scope'>
<el-input v-model='scope.row.name' />
</template>
</el-table-column>
<el-table-column fixed='right' label='操作' width='50' align='center' v-if='form.opway!=="1"'>
<template #header>
<el-icon :size='22' style='top: 5px;cursor: pointer' color='#666'>
<ele-CirclePlus @click='addCroper' />
</el-icon>
</template>
<template #default='scope'>
<el-icon :size='22' style='top: 3px;cursor: pointer'>
<ele-CircleClose @click='form.crops.splice(scope.$index, 1)' />
</el-icon>
</template>
</el-table-column>
</el-table>
</el-form-item>
<el-form-item label='处理人：'>
<el-table size='small' border :data='form.haops' :row-style="{height: '36px'}" style='width: 100%'>
<el-table-column label='操作类型' width='100'>
<template #default='scope'>
<el-select v-model='scope.row.type' style='width: 100%'>
<el-option value='1' label='通过' />
<el-option value='2' label='驳回' />
<el-option value='3' label='转办' />
<el-option value='4' label='沟通' />
<el-option value='5' label='废弃' />
</el-select>
</template>
</el-table-column>
<el-table-column label='操作名称'>
<template #default='scope'>
<el-input v-model='scope.row.name' />
</template>
</el-table-column>
<el-table-column fixed='right' label='操作' width='50' align='center' v-if='form.opway!=="1"'>
<template #header>
<el-icon :size='22' style='top: 5px;cursor: pointer' color='#666'>
<ele-CirclePlus @click='addHaoper' />
</el-icon>
</template>
<template #default='scope'>
<el-icon :size='22' style='top: 3px;cursor: pointer'>
<ele-CircleClose @click='form.haops.splice(scope.$index, 1)' />
</el-icon>
</template>
</el-table-column>
</el-table>
</el-form-item>
</div>
</el-tab-pane>
<el-tab-pane label='事件' name='k3'>
<el-table size='small' border :data='form.events' :row-style="{height: '36px'}" style='width: 100%'>
<el-table-column label='事件类型' width='150'>
<template #default='scope'>
<el-select v-model='scope.row.type' style='width: 100%'>
<el-option value='1' label='通过' />
<el-option value='2' label='驳回' />
<el-option value='3' label='转办' />
<el-option value='4' label='沟通' />
<el-option value='5' label='废弃' />
</el-select>
</template>
</el-table-column>
<el-table-column label='事件名称'>
<template #default='scope'>
<el-input v-model='scope.row.name' />
</template>
</el-table-column>
<el-table-column label='事件监听器'>
<template #default='scope'>
<el-select v-model='scope.row.type' style='width: 100%'>
<el-option value='1' label='测试01' />
<el-option value='2' label='测试02' />
<el-option value='3' label='测试03' />
</el-select>
</template>
</el-table-column>
<el-table-column fixed='right' label='操作' width='50' align='center'>
<template #header>
<el-icon :size='22' style='top: 5px;cursor: pointer' color='#666'>
<ele-CirclePlus @click='addEvent' />
</el-icon>
</template>
<template #default='scope'>
<el-icon :size='22' style='top: 3px;cursor: pointer'>
<ele-CircleClose @click='form.events.splice(scope.$index, 1)' />
</el-icon>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
</el-form>
<!-- <el-row gutter="8">-->
<!-- <el-col :span='8'>-->
<!-- <div style='height: 600px'>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- <el-col :span='16'>-->
<!-- </el-col>-->
<!-- </el-row>-->
</div>
<template #footer>
<span class='dialog-footer'>
<el-button type='primary' @click='closeModal'>确认</el-button>
<el-button @click='state.isShow = false'>取消</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script lang='ts' setup>
import { computed, defineExpose, reactive, ref, toRaw, toRefs } from 'vue';
import OrgModal from '/@/comps/sys/OrgModal.vue';
import { uuid } from '/@/utils/xutil';
import request from '/@/utils/request';
const state = reactive({
isShow: false, basid: '',title:'',cotag:false,name:'节点名称：',notes:'节点备注：',
list: [] as any, form: {
flway: '1', remod: '1', opway: '1',type:'bpmn:UserTask',
crops: [
{ ornum: 1, type: '1', name: '催办' },
{ ornum: 2, type: '2', name: '撤回' },
{ ornum: 3, type: '3', name: '废弃' },
],
haops: [
{ ornum: 1, type: '1', name: '通过' },
{ ornum: 2, type: '2', name: '驳回' },
{ ornum: 3, type: '3', name: '转办' },
{ ornum: 4, type: '4', name: '沟通' },
{ ornum: 5, type: '5', name: '废弃' },
],
events: [],
} as any,
tabna: '',
});
const { form } = toRefs(state);
const activeName = ref('k1');
const open = async (shape: any) => {
state.form.type=shape.type;
state.form.id = shape.businessObject.id;
console.log(state.form.type);
state.cotag=false;
state.name='节点名称：';
state.notes='节点备注：';
switch (state.form.type) {
case "bpmn:UserTask":
state.title="审批节点 "+state.form.id;
if(state.form.id=="N1"){
state.title="起草节点 "+state.form.id;
}
break;
case "bpmn:ReceiveTask":
state.title="抄送节点 "+state.form.id;
break;
case "bpmn:StartEvent":
state.title="开始节点 "+state.form.id;
break;
case "bpmn:EndEvent":
state.title="结束节点 "+state.form.id;
break;
case "bpmn:ScriptTask":
state.title="脚本节点 "+state.form.id;
break;
case "bpmn:ServiceTask":
state.title="服务节点 "+state.form.id;
break;
case "bpmn:ExclusiveGateway":
state.title="互斥网关 "+state.form.id;
break;
case "bpmn:ParallelGateway":
state.title="并行网关 "+state.form.id;
break;
case "bpmn:SequenceFlow":
state.title="连线 "+state.form.id;
state.name='连线名称：';
state.notes='连线备注：';
if(shape.source.type=="bpmn:ExclusiveGateway"){
state.cotag=true;
}
break;
default:
state.title="未知节点 "+state.form.id;
break;
}
state.form.name = shape.businessObject.name;
state.form.flway = shape.businessObject.$attrs.flway;
if(!state.form.flway){
state.form.flway="1";
}
state.form.hatyp = shape.businessObject.$attrs.hatyp;
if(!state.form.hatyp){
state.form.hatyp="1";
}
state.form.conds = shape.businessObject.$attrs.conds;
if (shape.businessObject.$attrs.hamen) {
state.form.hamen = await request({
url: '/gen/org/main/list',
method: 'get',
params: { ids: shape.businessObject.$attrs.hamen },
});
} else {
state.form.hamen = [];
}
state.isShow = true;
};
defineExpose({ open });
const emits = defineEmits(['close']);
const closeModal = () => {
const backData = {} as any;
backData.name = state.form.name;
let hamen = '';
for (const haman of state.form.hamen) {
hamen += haman.id + ';';
}
if (hamen != '') {
hamen = hamen.substring(0, hamen.length - 1);
}
backData.hamen = hamen;
backData.flway = state.form.flway;
backData.hatyp = state.form.hatyp;
if(state.cotag){
backData.conds=state.form.conds;
}
emits('close', backData);
state.isShow = false;
};
const cdata = reactive({}) as any;
//region -----组织架构逻辑-----
const orgModal = ref();
const hamenModal = () => {
orgModal.value.openModal({
opener: 'hamen',
orgType: 44,
selectMode: 2,
orgs: toRaw(form.value.hamen),
});
};
const closeOrgModal = (data: any) => {
if (data.opener == 'hamen') {
if (data.orgs && data.orgs.length > 0) {
form.value.hamen = data.orgs;
} else {
form.value.hamen = null;
}
if (form.value.name === '审批节点'||form.value.name === '') {
let names = '';
if (form.value.hamen && form.value.hamen.length > 0) {
for (const user of form.value.hamen) {
names += user.name + ';';
}
}
if (names != '') {
names = names.substring(0, names.length - 1);
}
form.value.name = names;
}
}
};
cdata.hamen = computed(() => {
let names = '';
if (form.value.hamen && form.value.hamen.length > 0) {
for (const user of form.value.hamen) {
names += user.name + ';';
}
}
if (names != '') {
names = names.substring(0, names.length - 1);
}
return names;
});
cdata.show1 = computed(() => {
if(state.form.id=="NS"||state.form.id=="N1"||state.form.id=="NE"){
return false;
}else if(state.form.type!=="bpmn:UserTask"){
return false;
}else{
return true;
}
});
cdata.show2 = computed(() => {
if(state.form.type==="bpmn:ReceiveTask"){
return true;
}else{
return false;
}
});
//endregion
//region -----操作逻辑-----
const addCroper = () => {
let newOrnum = 1;
if (form.value.crops.length > 0) {
newOrnum = form.value.crops[form.value.crops.length - 1].ornum + 1;
}
if (form.value.id) {
form.value.crops.push({
id: uuid(), maiid: form.value.id, ornum: newOrnum,
});
} else {
form.value.crops.push({
id: uuid(), ornum: newOrnum,
});
}
};
const addHaoper = () => {
let newOrnum = 1;
if (form.value.haops.length > 0) {
newOrnum = form.value.haops[form.value.haops.length - 1].ornum + 1;
}
if (form.value.id) {
form.value.haops.push({
id: uuid(), maiid: form.value.id, ornum: newOrnum,
});
} else {
form.value.haops.push({
id: uuid(), ornum: newOrnum,
});
}
};
const opwayChange = () => {
if (state.form.opway == '1') {
state.form.crops = [
{ ornum: 1, type: '1', name: '催办' },
{ ornum: 2, type: '2', name: '撤回' },
{ ornum: 3, type: '3', name: '废弃' },
];
state.form.haops = [
{ ornum: 1, type: '1', name: '通过' },
{ ornum: 2, type: '2', name: '驳回' },
{ ornum: 3, type: '3', name: '转办' },
{ ornum: 4, type: '4', name: '沟通' },
{ ornum: 5, type: '5', name: '废弃' },
];
} else {
// state.form.crops = [];
// state.form.haops = [];
}
};
//endregiton
const addEvent = () => {
let newOrnum = 1;
if (form.value.events.length > 0) {
newOrnum = form.value.events[form.value.events.length - 1].ornum + 1;
}
if (form.value.id) {
form.value.events.push({
id: uuid(), maiid: form.value.id, ornum: newOrnum,
});
} else {
form.value.events.push({
id: uuid(), ornum: newOrnum,
});
}
};
</script>
<style scoped>
</style>
src/comps/bpm/tmpl/modal/TaskModal.vue
+96
View File
@@ -0,0 +1,96 @@
<template>
<el-dialog v-model='state.isShow' title='表配置' width='1000px' draggable>
<div style='height: 600px'>
<el-row gutter="8">
<el-col :span='8'>
<div style='height: 600px'>
<TableTree @node-click='nodeClick'/>
</div>
</el-col>
<el-col :span='16'>
<el-table ref="tableRef" height='600' :cell-style="{padding:'2px'}" :row-style="{height: '36px'}"
v-loading='state.loading' :data='state.list'
border stripe>
<el-table-column type='selection' width='55' align='center'/>
<el-table-column label='序号' type='index' width='55' align='center'/>
<el-table-column label='字段名称' width='120'>
<template #default='scope'>
{{ scope.row.name }}
</template>
</el-table-column>
<el-table-column label='字段注释' prop='comet'/>
<el-table-column label='字段类型' prop='type' width='140'/>
<el-table-column label='KEY' prop='cokey' width='60'/>
</el-table>
</el-col>
</el-row>
</div>
<template #footer>
<span class='dialog-footer'>
<el-button type='primary' @click='closeModal'>确认</el-button>
<el-button @click='state.isShow = false'>取消</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang='ts' setup>
import {defineExpose, reactive, ref} from 'vue';
import TableTree from './tableTree.vue';
import request from "/@/utils/request";
import {vListQuery} from "/@/comps/vxe";
const state = reactive({
isShow: false,basid:'',
list:[] as any,
tabna:'',
});
const openModal = async (data: any) => {
state.isShow = true;
};
defineExpose({ openModal });
const tableRef=ref();
const emits = defineEmits(['close']);
const closeModal = () => {
const backData={tabna:state.tabna,fields:[] as any};
const selectedData= tableRef.value.getSelectionRows();
for (const row of selectedData) {
const myRow={} as any;
myRow.name=row.name;
myRow.comet=row.comet;
myRow.type=row.type;
backData.fields.push(myRow);
}
console.log(backData)
emits('close', backData);
state.isShow = false;
};
//region a 左侧部门树点击
const nodeClick = async (node: any) => {
if(node){
state.tabna = node.name;
state.basid = node.basid;
await listQuery();
}
};
//endregion
const listQuery=async ()=>{
state.list = await request({
url: '/bi/model/field/list',
params:{tabna:state.tabna,basid:state.basid},
method: 'get',
});
}
</script>
<style scoped>
</style>
src/comps/bpm/tmpl/utils/util.js
+28
View File
@@ -0,0 +1,28 @@
const customElements = ['bpmn:Task','bpmn:UserTask'] // 自定义元素的类型
const customConfig = { // 自定义元素的配置
'bpmn:Task': {
// 'url': require('@assets/rules.png'),
// 'url': require('../../assets/rules.png'),
// 'url': 'https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/rules.png',
'attr': { x: 0, y: 0, width: 220, height: 80}
},
'bpmn:UserTask': {
// 'url': require('@assets/rules.png'),
// 'url': require('../../assets/rules.png'),
'url': 'https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/rules.png',
'attr': { x: 0, y: 0, width: 100, height: 80}
},
'bpmn:UserNode': {
// 'url': require('@assets/rules.png'),
// 'url': require('../../assets/rules.png'),
'url': 'https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/rules.png',
'attr': { x: 0, y: 0, width: 220, height: 80}
},
// 'bpmn:StartEvent': {
// 'url': 'https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/start.png',
// 'attr': { x: 0, y: 0, width: 40, height: 40 }
// }
}
const hasLabelElements = ['bpmn:StartEvent', 'bpmn:EndEvent'] // 一开始就有label标签的元素类型
export { customElements, customConfig, hasLabelElements }
src/comps/bpm/view.vue
+406 -260
View File
@@ -1,189 +1,224 @@
<template>
<el-form class='zform zform100' :inline="true" :model='form' label-width='160px' label-position='left'>
<div class="zform-div">
<el-form-item label='流程说明'>
这是一个测试的流程，目前功能还不完善
</el-form-item>
<div class="zform-item" style="padding-left: 6px">
<el-checkbox v-model='state.autag'>显示审批记录</el-checkbox>
</div>
<div class="zform-item" v-show='state.autag'>
<el-table :data='audits' style='width: 100%'>
<el-table-column prop='crtim' label='时间' width='160'/>
<el-table-column prop='facno' label='节点编号' width='80'/>
<el-table-column prop='facna' label='节点名称' width='200'/>
<el-table-column prop='haman' label='操作者' width='90'/>
<el-table-column prop='opinf' label='操作' width='300'/>
<el-table-column prop='opnot' label='处理意见'/>
</el-table>
</div>
<div v-if='state.cutag'>
<el-form-item label='通知紧急程度'>
<el-radio-group v-model='form.opurg'>
<el-radio label='a'><span>一般</span></el-radio>
<el-radio label='b'><span style='color:blue'>急</span></el-radio>
<el-radio label='c'><span style='color:red'>紧急</span></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label='操作'>
<el-radio-group v-model='form.opkey' @change="opChange">
<el-radio label='pass'>通过</el-radio>
<el-radio label='refuse'>驳回</el-radio>
<el-radio label='commission'>转办</el-radio>
<el-radio label='communicate'>沟通</el-radio>
<el-radio label='abandon'>废弃</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label='驳回到' v-if="form.opkey=='refuse'">
<el-select v-model='form.refno' placeholder='请选择' style='width:300px;margin-right: 8px' @change='refChange'>
<el-option v-for='item in state.refNodes' :key='item.id' :value='item.id' :label="item.id+'.'+item.name"></el-option>
</el-select>
<el-checkbox v-model='form.retag'>驳回的节点通过后直接返回本节点</el-checkbox>
</el-form-item>
<el-form-item label='即将流向' v-if="form.opkey=='pass'">
{{ state.toExmen }}
</el-form-item>
<el-form-item label='处理意见'>
<div style="width: 100%;">
<div class='au-flex'>
<div class='au-msg' style='padding:3px'>
<el-input v-model='form.opnot' type='textarea' :rows='4' placeholder=' '/>
</div>
<div class='au-button'>
<el-button type='primary' @click='bpmSubmit()' style='width: 94px;height: 94px;margin-top: 3px;margin-left: 6px'>提 交</el-button>
</div>
</div>
</div>
</el-form-item>
<el-form-item label='附件'>
<el-upload class='upload-demo' action='https://jsonplaceholder.typicode.com/posts/' v-model:file-list='fileList'>
<el-button type='primary'>上 传</el-button>
</el-upload>
</el-form-item>
</div>
<el-form-item label='当前处理人'>
{{ form.facno + '.' + form.facna + '(' + state.cuExmen + ')' }}
</el-form-item>
<el-form-item label='已经处理人'>
{{ state.hiHamen }}
</el-form-item>
<div class="zform-item" style="padding-left: 6px">
<el-checkbox v-model='state.chtag' @change='toggleFlowChart'>流程图</el-checkbox>
</div>
<div class="zform-item" v-show='state.chtag'>
<div style='height:1000px'>
<Modeler2/>
</div>
</div>
</div>
</el-form>
<el-form class='zform zform100' :inline='true' :model='form' label-width='160px' label-position='left'>
<div class='zform-div'>
<el-form-item label='流程说明'>
这是一个测试的流程，目前功能还不完善
</el-form-item>
<div class='zform-item' style='padding-left: 6px'>
<el-checkbox v-model='state.autag'>显示审批记录</el-checkbox>
</div>
<div class='zform-item' v-show='state.autag'>
<el-table :data='audits' style='width: 100%'>
<el-table-column prop='crtim' label='时间' width='160' />
<el-table-column prop='facno' label='节点编号' width='80' />
<el-table-column prop='facna' label='节点名称' width='200' />
<el-table-column prop='haman' label='操作者' width='90' />
<el-table-column prop='opinf' label='操作' width='300' />
<el-table-column prop='opnot' label='处理意见' />
</el-table>
</div>
<div v-if='state.cutag'>
<el-form-item label='通知紧急程度'>
<el-radio-group v-model='form.opurg'>
<el-radio label='a'><span>一般</span></el-radio>
<el-radio label='b'><span style='color:blue'>急</span></el-radio>
<el-radio label='c'><span style='color:red'>紧急</span></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label='操作'>
<el-radio-group v-model='form.opkey' @change='opChange'>
<!-- <el-radio label='pass'>通过</el-radio>-->
<!-- <el-radio label='refuse'>驳回</el-radio>-->
<!-- <el-radio label='turn'>转办</el-radio>-->
<!-- <el-radio label='communicate'>沟通</el-radio>-->
<!-- <el-radio label='abandon'>废弃</el-radio>-->
<el-radio v-for='item in state.opways' :key='item.id' :label='item.id'>{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label='驳回到' v-if="form.opkey=='refuse'">
<el-select v-model='form.refno' placeholder='请选择' style='width:300px;margin-right: 8px' @change='refChange'>
<el-option v-for='item in state.refNodes' :key='item.id' :value='item.id' :label="item.id+'.'+item.name"></el-option>
</el-select>
<el-checkbox v-model='form.retag'>驳回的节点通过后直接返回本节点</el-checkbox>
</el-form-item>
<el-form-item label='转办人员' v-if="form.opkey=='turn'">
<el-input v-model='cdata.tuman' readonly @click='tumanModal' style='width:300px;margin-right: 8px' />
<el-checkbox v-model='form.tutag'>流程重新流经本节点时，直接由转办人员处理</el-checkbox>
</el-form-item>
<el-form-item label='沟通人员' v-if="form.opkey=='communicate'">
<el-input v-model='cdata.comen' readonly @click='comenModal' style='width:300px;margin-right: 8px' />
<el-checkbox v-model='form.cotag'>是否隐藏意见</el-checkbox>
</el-form-item>
<el-form-item label='即将流向' v-if="form.opkey=='pass'">
{{ state.toExmen }}
</el-form-item>
<el-form-item label='处理意见'>
<div style='width: 100%;'>
<div class='au-flex'>
<div class='au-msg' style='padding:3px'>
<el-input v-model='form.opnot' type='textarea' :rows='4' placeholder=' ' />
</div>
<div class='au-button'>
<el-button type='primary' @click='bpmSubmit()' style='width: 94px;height: 94px;margin-top: 3px;margin-left: 6px'>提 交</el-button>
</div>
</div>
</div>
</el-form-item>
<el-form-item label='附件'>
<el-upload class='upload-demo' action='https://jsonplaceholder.typicode.com/posts/' v-model:file-list='fileList'>
<el-button type='primary'>上 传</el-button>
</el-upload>
</el-form-item>
</div>
<el-form-item label='当前处理人' v-show='form.facno'>
{{ form.facno + '.' + form.facna + '(' + state.cuExmen + ')' }}
</el-form-item>
<el-form-item label='已经处理人' v-show='form.facno'>
{{ state.hiHamen }}
</el-form-item>
<div class='zform-item' style='padding-left: 6px'>
<el-checkbox v-model='state.chtag' @change='toggleFlowChart'>流程图</el-checkbox>
</div>
<div class='zform-item' v-show='state.chtag'>
<div style='height:1000px'>
<Modeler2 />
</div>
</div>
<OrgModal ref='orgModal' @close='closeOrgModal' />
</div>
</el-form>
</template>
<script lang='ts' setup>
import {onMounted, reactive, toRaw, toRefs} from 'vue';
import { computed, onMounted, reactive, ref, toRaw, toRefs } from 'vue';
import request from '/@/utils/request';
// import { useRoute } from 'vue-router';
// import { store } from '/@/store';
// const route = useRoute();
import Modeler2 from '/@/comps/Activiti/modeler2/index';
import {BpmnStore} from '/@/bpmn/store';
import {ElMessage} from 'element-plus';
import { BpmnStore } from '/@/bpmn/store';
import { ElMessage } from 'element-plus';
// import Viewer from 'bpmn-js/lib/NavigatedViewer';
// import Viewer from 'bpmn-js/lib/Modeler';
// import Viewer from 'bpmn-js/lib/Viewer';
import OrgModal from '/@/comps/sys/OrgModal.vue';
const state = reactive({
form: {
items: [],
} as any,
params: {
path: '',
query: '',
},
audits: [] as any,
chtag: true,
autag: true,
xml: null as any,
refNodes: [] as any,
cutag: false,
hiHamen: '',
cuExmen: '',
toExmen: '',
nodeList: [],
lineList: [],
form: {
items: [],
retag: true,
tutag: false,
cotag: false,
} as any,
params: {
path: '',
query: '',
},
opways: [] as any,
audits: [] as any,
chtag: true,
autag: true,
xml: null as any,
refNodes: [] as any,
cutag: false,
hiHamen: '',
cuExmen: '',
toExmen: '',
nodeList: [],
lineList: [],
toNode:'',
});
const {
form, params, audits,
form, audits,
} = toRefs(state);
state.refNodes = [
{id: 'N2', name: '起草节点', exman: 'sa'},
{id: 'N4', name: '张三', exman: 'z3'},
{id: 'N5', name: '王五', exman: 'w5'},
{ id: 'N2', name: '起草节点', exman: 'sa' },
{ id: 'N4', name: '张三', exman: 'z3' },
{ id: 'N5', name: '王五', exman: 'w5' },
];
const props = defineProps({
proid: String,
proid: String,
modty: String,
});
onMounted(async () => {
await bpmInit();
await toggleFlowChart();
// state.params = <any>route;
// if (params.value.query?.id) {
//也可以拿到alert(params.value.query?.id);
// }
await bpmInit();
await toggleFlowChart();
// state.params = <any>route;
// if (params.value.query?.id) {
//也可以拿到alert(params.value.query?.id);
// }
});
const bpmInit = async () => {
// form.value.proid = props.proid;
const result: any = await request({
url: '/bpm/proc/main/zbpm',
method: 'get',
params: {proid: props.proid}
});
audits.value = result.audits;
state.hiHamen = result.hiHamen;
state.cuExmen = result.cuExmen;
// form.value.proid = props.proid;
const result: any = await request({
url: '/bpm/proc/main/zbpm',
method: 'get',
params: { proid: props.proid },
});
audits.value = result.audits;
state.hiHamen = result.hiHamen;
state.cuExmen = result.cuExmen;
state.cutag = result.cutag;
form.value = result.zbpm;
if (state.cutag) {
const target: any = await request({
url: '/bpm/proc/main/target',
method: 'get',
params: {proid: form.value.proid, facno: form.value.facno},
});
form.value.tarno = target.tarno;
form.value.tarna = target.tarna;
form.value.tamen = target.tamen;
form.value.bacid = target.bacid;
if (target.tarno == 'N3') {
state.toExmen = target.tarno + '.' + target.tarna;
} else {
state.toExmen = target.tarno + '.' + target.tarna + '(' + target.tamen + ')';
}
form.value.opkey = 'pass';
form.value.opurg = 'a';
}
state.cutag = result.cutag;
form.value = result.zbpm;
if (state.cutag) {
const target: any = await request({
url: '/bpm/proc/main/target',
method: 'get',
params: { proid: form.value.proid, facno: form.value.facno,modty:props.modty },
});
form.value.tarno = target.tarno;
form.value.tarna = target.tarna;
form.value.tamen = target.tamen;
form.value.bacid = target.bacid;
if (target.tarno == 'NE') {
state.toExmen = target.tarno + '.' + target.tarna;
} else {
state.toExmen = target.tarno + '.' + target.tarna + '(' + target.tamen + ')';
}
state.toNode=target.tarno;
// audits.value = await request({
// url: '/bpm/audit/main/list/' + props.proid,
// method: 'get',
//
// });
form.value.opkey = 'pass';
form.value.opurg = 'a';
// form.value = await request({
// url: '/bpm/proc/main/zbpm/' + props.proid,
// method: 'get',
// });
if (result.zbpm.tasty === 'review') {
state.opways = [
{ id: 'pass', name: '通过' },
{ id: 'refuse', name: '驳回' },
{ id: 'turn', name: '转办' },
{ id: 'communicate', name: '沟通' },
{ id: 'abandon', name: '废弃' },
];
}else if(result.zbpm.tasty === 'communicate'){
state.opways = [
{ id: 'bacommunicate', name: '回复沟通' },
];
form.value.opkey = 'bacommunicate';
}
}
// audits.value = await request({
// url: '/bpm/audit/main/list/' + props.proid,
// method: 'get',
//
// });
// form.value = await request({
// url: '/bpm/proc/main/zbpm/' + props.proid,
// method: 'get',
// });
};
@@ -191,143 +226,254 @@ const emit = defineEmits(['submit']);
const bpmSubmit = async () => {
if (form.value.opkey == 'pass') {
emit('submit', form.value);
// await request({
// url: '/bpm/proc/main/hpass',
// method: 'post',
// data: form.value,
// });
} else if (form.value.opkey == 'refuse') {
const refInfo = toRaw(form.value);
if (refInfo.refno) {
refInfo.tarno = refInfo.refno;
refInfo.tarna = refInfo.refna;
refInfo.exman = refInfo.reman;
emit('submit', form.value);
} else {
ElMessage.warning("请选择驳回节点后再驳回");
}
// await request({
// url: '/bpm/proc/main/hrefuse',
// method: 'post',
// data: refInfo,
// });
}
// console.log('86811');
// emit('submit');
// console.log('86822');
if (form.value.opkey == 'pass') {
emit('submit', form.value);
// await request({
// url: '/bpm/proc/main/hpass',
// method: 'post',
// data: form.value,
// });
} else if (form.value.opkey == 'refuse') {
const refInfo = toRaw(form.value);
if (refInfo.refno) {
refInfo.tarno = refInfo.refno;
refInfo.tarna = refInfo.refna;
refInfo.exman = refInfo.reman;
emit('submit', form.value);
} else {
ElMessage.warning('请选择驳回节点后再驳回');
}
// await request({
// url: '/bpm/proc/main/hrefuse',
// method: 'post',
// data: refInfo,
// });
} else if (form.value.opkey == 'turn') {
const turnInfo = toRaw(form.value);
if (turnInfo.tuman) {
emit('submit', form.value);
} else {
ElMessage.warning('请选择转办人员后再转办');
}
} else if (form.value.opkey == 'communicate') {
const commInfo = toRaw(form.value);
if (commInfo.coids) {
emit('submit', form.value);
} else {
ElMessage.warning('请选择沟通人员后再沟通');
}
} else if (form.value.opkey == 'abandon') {
if(form.value.opnot){
emit('submit', form.value);
}else{
ElMessage.warning('请填写废弃的处理意见');
}
}else if (form.value.opkey == 'bacommunicate') {
if(form.value.opnot){
emit('submit', form.value);
}else{
ElMessage.warning('请填写回复沟通的处理意见');
}
}
};
const toggleFlowChart = async () => {
if (!state.xml) {
const map = await request({
url: '/bpm/proc/main/xml',
method: 'get',
params: {proid: props.proid}
}) as any;
state.xml = map.xml;
state.nodeList = map.nodeList;
state.lineList = map.lineList;
await BpmnStore.importXML(state.xml);
if (!state.xml) {
const map = await request({
url: '/bpm/proc/main/xml',
method: 'get',
params: { proid: props.proid },
}) as any;
state.xml = map.xml;
state.nodeList = map.nodeList;
state.lineList = map.lineList;
await BpmnStore.importXML(state.xml);
// const bpmnViewer = new Viewer({
// container: '#modeler-container',
// }) as any;
// try {
// const { warnings } = await bpmnViewer.importXML(state.xml);
// // bpmnViewer.get("canvas").zoom("fit-viewport", "auto");
// console.log('rendered');
// } catch (err) {
// console.log('error rendering', err);
// }
// const bpmnViewer = new Viewer({
// container: '#modeler-container',
// }) as any;
// try {
// const { warnings } = await bpmnViewer.importXML(state.xml);
// // bpmnViewer.get("canvas").zoom("fit-viewport", "auto");
// console.log('rendered');
// } catch (err) {
// console.log('error rendering', err);
// }
const elementRegistry = BpmnStore.getModeler().get('elementRegistry');
// const userTaskList = elementRegistry.filter(
// (item) => item.type === 'bpmn:Task'
// );
// console.log(elementRegistry);
const list1 = [] as any;
elementRegistry.forEach((item: any) => {
for (let i = 0; i < state.nodeList.length; i++) {
if (item.id == state.nodeList[i]) {
list1.push(item);
break;
}
}
});
const elementRegistry = BpmnStore.getModeler().get('elementRegistry');
// const userTaskList = elementRegistry.filter(
// (item) => item.type === 'bpmn:Task'
// );
// console.log(elementRegistry);
const list1 = [] as any;
elementRegistry.forEach((item: any) => {
for (let i = 0; i < state.nodeList.length; i++) {
if (item.id == state.nodeList[i]) {
list1.push(item);
break;
}
}
});
const list2 = [] as any;
elementRegistry.forEach((item: any) => {
for (let i = 0; i < state.lineList.length; i++) {
if (item.id == state.lineList[i]) {
list2.push(item);
break;
}
}
});
const list2 = [] as any;
elementRegistry.forEach((item: any) => {
for (let i = 0; i < state.lineList.length; i++) {
if (item.id == state.lineList[i]) {
list2.push(item);
break;
}
}
});
const list3 = [] as any;
elementRegistry.forEach((item: any) => {
if (item.id == form.value.facno) {
list3.push(item);
}
});
const list3 = [] as any;
elementRegistry.forEach((item: any) => {
if (item.id == form.value.facno) {
list3.push(item);
}
});
let modeling = BpmnStore.modeler.get('modeling');
modeling.setColor(list1, {fill: '#e4feef'});
modeling.setColor(list2, {stroke: '#009900'});
modeling.setColor(list3, {fill: '#fed6d6'});
}
console.log(state.toNode);
const list4 = [] as any;
elementRegistry.forEach((item: any) => {
if (item.id == state.toNode) {
list4.push(item);
}
});
console.log(list4);
let modeling = BpmnStore.modeler.get('modeling');
modeling.setColor(list1, { fill: '#e4feef' });
modeling.setColor(list2, { stroke: '#009900' });
modeling.setColor(list3, { fill: '#fed6d6' });
modeling.setColor(list4, { fill: '#e3f1ff' });
}
};
const refChange = (id: any) => {
for (let i = 0; i < state.refNodes.length; i++) {
if (state.refNodes[i].id == id) {
form.value.refna = state.refNodes[i].name;
form.value.reman = state.refNodes[i].exman;
break;
}
}
for (let i = 0; i < state.refNodes.length; i++) {
if (state.refNodes[i].id == id) {
form.value.refna = state.refNodes[i].name;
form.value.reman = state.refNodes[i].exman;
break;
}
}
};
const opChange = async (key: any) => {
if (key == "refuse") {
state.refNodes = await request({
url: '/bpm/proc/main/refnodes',
method: 'get',
params: {proid: props.proid, facno: form.value.facno}
});
// state.refNodes = [
// { id: 'N2', name: '起草节点', exman: 'sa' },
// { id: 'N4', name: '张三', exman: 'z3' },
// { id: 'N5', name: '王五', exman: 'w5' },
// { id: 'N6', name: 'xxx', exman: 'w5' },
// ];
}
// else if(){
//
// }
}
if (key == 'refuse') {
state.refNodes = await request({
url: '/bpm/proc/main/refnodes',
method: 'get',
params: { proid: props.proid, facno: form.value.facno },
});
state.form.refno = state.refNodes[0].id;
refChange(state.form.refno);
// 驳回时要不要上色
// const elementRegistry = BpmnStore.getModeler().get('elementRegistry');
// const list4 = [] as any;
// elementRegistry.forEach((item: any) => {
// if (item.id == state.form.refno) {
// list4.push(item);
// }
// });
// let modeling = BpmnStore.modeler.get('modeling');
// modeling.setColor(list4, {fill: '#e3f1ff'});
// state.refNodes = [
// { id: 'N2', name: '起草节点', exman: 'sa' },
// { id: 'N4', name: '张三', exman: 'z3' },
// { id: 'N5', name: '王五', exman: 'w5' },
// { id: 'N6', name: 'xxx', exman: 'w5' },
// ];
}
// else if(){
//
// }
};
//region -----组织架构逻辑-----
const orgModal = ref();
const cdata = reactive({}) as any;
const tumanModal = () => {
orgModal.value.openModal({
opener: 'tuman',
orgType: 8,
selectMode: 1,
});
};
const comenModal = () => {
orgModal.value.openModal({
opener: 'comen',
orgType: 8,
selectMode: 2,
orgs: toRaw(form.value.comen),
});
};
const closeOrgModal = (data: any) => {
if (data.opener == 'tuman') {
if (data.orgs && data.orgs.length > 0) {
form.value.tuman = {};
form.value.tuman = { id: data.orgs[0].id, name: data.orgs[0].name };
form.value.tumid = data.orgs[0].id;
} else {
form.value.tuman = null;
form.value.tumid = null;
}
} else if (data.opener == 'comen') {
if (data.orgs && data.orgs.length > 0) {
form.value.comen = data.orgs;
form.value.coids = '';
for (const org of data.orgs) {
form.value.coids += org.id + ';';
}
if (form.value.coids != '') {
form.value.coids = form.value.coids.substring(0, form.value.coids.length - 1);
}
} else {
form.value.comen = null;
form.value.coids = null;
}
}
};
cdata.tuman = computed(() => {
return form.value.tuman ? form.value.tuman.name : '';
});
cdata.comen = computed(() => {
let names = '';
if (form.value.comen && form.value.comen.length > 0) {
for (const user of form.value.comen) {
names += user.name + '；';
}
}
return names;
});
//endregion
</script>
<style scoped>
.au-flex {
display: flex;
background-color: white;
display: flex;
background-color: white;
}
.au-msg {
flex: 1;
width: 100%;
flex: 1;
width: 100%;
}
.au-button {
width: 105px;
min-width: 105px;
width: 105px;
min-width: 105px;
}
</style>
src/comps/gen/GenTableModal.vue
+105
View File
@@ -0,0 +1,105 @@
<template>
<el-dialog v-model='dialogVisible' title='弹框选择' draggable width='900px'>
<div class='zjustify' style="margin-bottom: 10px">
<div>
<el-input v-model='state.form.name' placeholder='输入名称回车查询' class='list-search' clearable @keyup.enter='listQuery()'/>
<el-button type='primary' @click='listQuery()' plain>查 询</el-button>
</div>
<div>
<el-button type='primary' @click='handleConfirm'>确 认</el-button>
<el-button @click='dialogVisible = false'>取 消</el-button>
</div>
</div>
<el-table height='400' :cell-style="{padding:'2px'}" :row-style="{height: '36px'}"
v-loading='state.loading' :data='state.list'
border stripe @selection-change='listSelect($event,state)'>
<el-table-column type='selection' width='55' align='center'/>
<el-table-column label='#' type='index' width='35' align='center'/>
<el-table-column label='名称' prop='name' width='300'/>
<el-table-column label='备注' prop='notes'/>
</el-table>
<el-pagination
@size-change='listQuery()' @current-change='listQuery()'
class='mt8' :pager-count='5' :page-sizes='[10, 20, 30]' background
:total='state.total' v-model:current-page='state.form.page'
v-model:page-size='state.form.pageSize'
layout='total, sizes, prev, pager, next, jumper'
/>
</el-dialog>
</template>
<script lang='ts' setup>
import {defineExpose, onMounted, reactive, ref} from 'vue';
import {ElMessage} from "element-plus";
import request from "/@/utils/request";
const state = reactive({
loading: true, ids: [],
form: {}, single: true, multiple: true, list: [], total: 0,
});
const props = defineProps({
url: String,
maInit: Boolean,
});
onMounted(() => {
listQuery();
});
const listQuery = async () => {
const data: any = await request({
url: props.url,
method: 'get',
params: state.form,
});
state.list = data.items;
state.total = data.total;
state.loading = false;
}
const listSelect = (selection: any, state: any) => {
state.ids = selection.map((item: any) => item.id);
state.single = selection.length !== 1;
state.multiple = !selection.length;
}
const dialogVisible = ref(false);
const open = async (data: any) => {
if (data && data.params) {
state.form = data.params;
} else {
state.form = {};
}
if (data && data.reload) {
await listQuery();
}
dialogVisible.value = true;
};
defineExpose({open});
const emits = defineEmits(['close']);
const handleConfirm = () => {
const chooseIds = state.ids.join(',');
if (chooseIds.length <= 0) {
ElMessage.warning('请先点击选择项');
return;
} else if (state.ids.length >= 2) {
ElMessage.warning('请选择单个选择项，不要多选');
return;
}
emits('close', {ids: chooseIds});
dialogVisible.value = false;
};
</script>
<style scoped>
</style>
src/comps/gen/GenModal.vue → src/comps/gen/GenTreeModal.vue
View File
src/comps/page/index.ts
+12 -12
View File
@@ -33,9 +33,9 @@ export async function listDelete(state: any) {
type: 'warning',
})
.then(async () => {
ElMessage.warning('演示模式，禁用了删除');
// await request({url: state.url + '/' + delIds, method: 'delete',});
// await listQuery(state);
// ElMessage.warning('演示模式，禁用了删除');
await request({url: state.url + '/' + delIds, method: 'delete',});
await listQuery(state);
})
.catch(() => ElMessage.info('已取消删除'));
}
@@ -47,9 +47,9 @@ export const listItemDelete = async (state: any, id: string) => {
type: 'warning',
})
.then(async () => {
ElMessage.warning('演示模式，禁用了删除');
// await request({url: state.url + '/' + id, method: 'delete',});
// await listQuery(state);
// ElMessage.warning('演示模式，禁用了删除');
await request({url: state.url + '/' + id, method: 'delete',});
await listQuery(state);
})
.catch(() => ElMessage.info('已取消删除'));
};
@@ -82,9 +82,9 @@ export async function treeDelete(state: any) {
type: 'warning',
})
.then(async () => {
ElMessage.warning('演示模式，禁用了删除');
// await request({url: state.url + '/' + delIds, method: 'delete',});
// await treeQuery(state);
// ElMessage.warning('演示模式，禁用了删除');
await request({url: state.url + '/' + delIds, method: 'delete',});
await treeQuery(state);
})
.catch(() => ElMessage.info('已取消删除'));
}
@@ -96,9 +96,9 @@ export const treeItemDelete = async (state: any, id: string) => {
type: 'warning',
})
.then(async () => {
ElMessage.warning('演示模式，禁用了删除');
// await request({url: state.url + '/' + id, method: 'delete',});
// await treeQuery(state);
// ElMessage.warning('演示模式，禁用了删除');
await request({url: state.url + '/' + id, method: 'delete',});
await treeQuery(state);
})
.catch(() => ElMessage.info('已取消删除'));
};
src/comps/sys/OrgModal.vue
+113 -14
View File
@@ -41,8 +41,28 @@
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label='常用群组' name='k3'>暂不支持，待开发</el-tab-pane>
<el-tab-pane label='我的收藏' name='k4'>这个也暂不支持，待开发</el-tab-pane>
<el-tab-pane label='常用群组' name='k3' v-if='(state.p_org_type & 16) !== 0'>暂不支持，待开发</el-tab-pane>
<el-tab-pane label='常用角色' name='k4' v-if='(state.p_org_type & 32) !== 0'>
<el-row>
<el-col :span='12'>
<div style='height: 390px;'>
<RoleTree url='/gen/org/role/tree' @node-click='roleNodeClick' :maInit='true' ref='roleTreeRef' />
</div>
</el-col>
<el-col :span='12'>
<div style='border: 1px solid #ccc;height: 390px;margin-left: 5px;overflow: auto'>
<ul class='z-org-tree'>
<li v-for='item in roleItems' :key='item.id' class='f-user' title='444444444' @click='roleItemClick(item)'>
<el-checkbox v-model='item.checked' />
<img src='https://zsvg.gitee.io/vboot-vue/public/xiaoyoutai.png'>
<span class='layui-elip f-user-name'>{{ item.name }}</span>
</li>
</ul>
</div>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label='我的收藏' name='k9'>这个也暂不支持，待开发</el-tab-pane>
</el-tabs>
</el-col>
<el-col :span='8'>
@@ -79,26 +99,29 @@
import { defineExpose, reactive, ref, toRaw, toRefs } from 'vue';
import { CircleClose } from '@element-plus/icons-vue';
import DeptTree from '/@/comps/sys/DeptTree.vue';
import RoleTree from '/@/comps/gen/GenTree.vue';
import request from '/@/utils/request';
let p_org_type = -1;//0为综合，1为机构,2为部门,4为岗位,8为用户,16为常用群组,32为角色线
let p_tab_key = 'k1';
let p_select_mode = 1;//1单选，2多选
let p_opener = null as any;//弹框打开者标记
// let p_tier_init_flag = false;//层级架构页签初始化标记
let p_tier_init_flag = false;//层级架构页签初始化标记
let p_dept_init_flag = false;//层级架构页签初始化标记
let p_role_init_flag = false;//常用角色页签初始化标记
const deptTreeRef = ref();
const roleTreeRef = ref();
const state = reactive({
isShow: false,
p_org_type:-1,//0为综合，1为机构,2为部门,4为岗位,8为用户,16为常用群组,32为角色线
receSearch: '' as string,
receItems: [] as any,
tierItems: [] as any,
seldItems: [] as any,
roleItems: [] as any,
});
const { receItems, tierItems, seldItems } = toRefs(state);
const { receItems, tierItems, seldItems,roleItems } = toRefs(state);
const activeName = ref('k1');
@@ -120,9 +143,9 @@ async function tabChange(tab: any) {
}
}
} else if (p_tab_key === 'k2') {
if (!p_tier_init_flag) {
if (!p_dept_init_flag) {
await deptTreeRef.value.init();
p_tier_init_flag = true;
p_dept_init_flag = true;
}
for (const tItem of tierItems.value) {
let flag = false;
@@ -137,6 +160,24 @@ async function tabChange(tab: any) {
tItem.checked = false;
}
}
} else if (p_tab_key === 'k4') {
if (!p_role_init_flag) {
await roleTreeRef.value.init();
p_role_init_flag = true;
}
for (const rItem of roleItems.value) {
let flag = false;
for (const sItem of seldItems.value) {
if (sItem.id == rItem.id) {
rItem.checked = true;
flag = true;
break;
}
}
if (!flag) {
rItem.checked = false;
}
}
}
}
@@ -147,7 +188,7 @@ async function tabChange(tab: any) {
async function onSearch() {
receItems.value = await request({
url: '/gen/org/main?type=' + p_org_type,
url: '/gen/org/main?type=' + state.p_org_type,
method: 'get',
params: { name: state.receSearch },
});
@@ -168,7 +209,7 @@ async function onSearch() {
const receInit = async () => {
receItems.value = await request({
url: '/gen/org/rece?type=' + p_org_type,
url: '/gen/org/rece?type=' + state.p_org_type,
method: 'get',
});
};
@@ -217,7 +258,7 @@ function receItemClick(item: any) {
async function nodeClick(node: any) {
if (node && node.id) {
tierItems.value = await request({
url: '/gen/org/main?type=' + p_org_type,
url: '/gen/org/main?type=' + state.p_org_type,
method: 'get',
params: { depid: node.id },
});
@@ -274,7 +315,65 @@ function tierItemClick(item: any) {
//endregion
//region x.4 我的收藏
//region x.4 常用角色
async function roleNodeClick(node: any) {
if (node && node.id) {
roleItems.value = await request({
url: '/gen/org/role/list',
method: 'get',
params: { treid: node.id },
});
for (const rItem of roleItems.value) {
for (const sItem of seldItems.value) {
if (sItem.id === rItem.id) {
rItem.checked = true;
break;
}
}
}
}
}
function roleItemClick(item: any) {
item.checked = !item.checked;
if (p_select_mode == 1) {//单选
if (seldItems.value.length > 0) {
seldItems.value.splice(0, 1);
}
seldItems.value.push(item);
for (let i = 0; i < roleItems.value.length; i++) {
if (roleItems.value[i].id !== item.id) {
roleItems.value[i].checked = false;
}
}
// closeOrgModal();改成不自动关
} else {//多选
if (item.checked) {
let flag = false;
for (const sItem of seldItems.value) {
if (sItem.id === item.id) {
flag = true;
break;
}
}
if (!flag) {
seldItems.value.push(item);
}
} else {
for (let i = 0; i < seldItems.value.length; i++) {
if (seldItems.value[i].id === item.id) {
seldItems.value.splice(i, 1);
break;
}
}
}
}
}
//endregion
//region x.5 我的收藏
//endregion
@@ -314,8 +413,8 @@ const openModal = async (data: any) => {
if (!data.selectMode) {
data.selectMode = 1;
}
if (p_org_type != data.orgType) {
p_org_type = data.orgType;
if (state.p_org_type != data.orgType) {
state.p_org_type = data.orgType;
await receInit();
tierItems.value.splice(0, tierItems.value.length);
}
src/pages/my/demo/cate/edit.vue
+25 -91
View File
@@ -32,7 +32,8 @@
</el-select>
</el-form-item>
<el-form-item label='是否有流程：' style='width: 25%'>
<el-switch v-model='form.prtag' @change='prtagChange'>
<!-- <el-switch v-model='form.prtag' @change='prtagChange'>-->
<el-switch v-model='form.prtag'>
</el-switch>
</el-form-item>
<el-form-item label='排序号：' style='width: 25%' prop='ornum' :rules="[{ required: true, message: '排序号不能为空'}]">
@@ -267,18 +268,10 @@
<el-tab-pane label='流程配置' name='tab4' v-if='form.prtag'>
<div style='width: 100%;height: 720px'>
<!-- <Modeler2 @bpmnMounted='bpmnMounted' />-->
<Modeler @bpmnMounted='bpmnMounted' />
<Panel />
<BpmnActions />
<BpmTmplEdit ref="bpmTmplEditRef" v-if='state.bpmShowTag' :prxml='form.prxml'/>
</div>
</el-tab-pane>
<!-- <el-tab-pane label='流程配置' name='tab4'>-->
<!-- 流程配置-->
<!-- </el-tab-pane>-->
</el-tabs>
</el-form>
</div>
@@ -291,20 +284,17 @@ export default { name: 'MyDemoCateEdit' };
</script>
<script lang='ts' setup>
import { Search, Setting } from '@element-plus/icons-vue';
import { computed, getCurrentInstance, nextTick, onMounted, reactive, ref, toRaw, toRefs } from 'vue';
import { computed, getCurrentInstance, onMounted, reactive, ref, toRaw, toRefs } from 'vue';
import { tabSave, tabClose } from '/@/comps/page/edit';
import { useRoute } from 'vue-router';
import CateModal from '/@/comps/gen/GenModal.vue';
import CateModal from '/@/comps/gen/GenTreeModal.vue';
import OrgModal from '/@/comps/sys/OrgModal.vue';
import request from '/@/utils/request';
import { ElMessage, FormInstance } from 'element-plus';
import { uuid } from '/@/utils/xutil';
import TabEdit from './tab.vue';
import { VxeTableInstance } from 'vxe-table';
import Modeler from '/@/comps/Activiti/Modeler';
import Panel from '/@/comps/Activiti/panel';
import BpmnActions from '/@/comps/Activiti/bpmn-actions';
import { BpmnStore } from '/@/bpmn/store';
import BpmTmplEdit from '/@/comps/bpm/tmpl/edit.vue';
const route = useRoute();
@@ -313,7 +303,7 @@ const { proxy } = getCurrentInstance() as any;
const activeName = ref('tab1');
const state = reactive({
url: '/my/demo/cate', fieldSelectedIds: [] as any,
url: '/my/demo/cate', fieldSelectedIds: [] as any,bpmShowTag:false,
params: { path: '', query: '' }, xtab: '' as any, xindex: 0 as any,
form: {
avtag: true, fields: [] as any,remen: [] as any,
@@ -349,11 +339,11 @@ const { form } = toRefs(state);
onMounted(async () => {
await editInitx();
if (form.value.prtag && form.value.id) {
await BpmnStore.importXML(form.value.prxml);
}
state.bpmShowTag=true;
});
const bpmTmplEditRef=ref();
const editInitx = async () => {
state.params = <any>route;
let id = state.params.query?.id;
@@ -377,20 +367,20 @@ const editInitx = async () => {
}
};
const prtagChange = async (value: any) => {
if (value === true) {
await nextTick(async () => {
if (form.value.prxml) {
await BpmnStore.importXML(form.value.prxml);
} else {
await BpmnStore.importXML(defxml);
}
});
} else {
const bpmn = await BpmnStore.getXML();
form.value.prxml = bpmn.xml;
}
};
// const prtagChange = async (value: any) => {
// if (value === true) {
// await nextTick(async () => {
// if (form.value.prxml) {
// await BpmnStore.importXML(form.value.prxml);
// } else {
// await BpmnStore.importXML(defxml);
// }
// });
// } else {
// const bpmn = await BpmnStore.getXML();
// form.value.prxml = bpmn.xml;
// }
// };
//region -----组织架构逻辑-----
@@ -658,68 +648,12 @@ const save = async () => {
form.value.ljson = JSON.stringify(form.value.links);
if (form.value.prtag) {
const bpmn = await BpmnStore.getXML();
form.value.prxml = bpmn.xml;
form.value.prxml =await bpmTmplEditRef.value.getXml();
}
await tabSave({ formRef: formRef.value, state, proxy, route });
};
const defxml = '<?xml version="1.0" encoding="UTF-8"?>\n' +
'<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:activiti="http://activiti.org/bpmn" id="sample-diagram" targetNamespace="http://activiti.org/bpmn" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">\n' +
' <bpmn2:process id="Process_1" name="1" isExecutable="true">\n' +
' <bpmn2:startEvent id="N1" name="开始节点">\n' +
' <bpmn2:outgoing>L1</bpmn2:outgoing>\n' +
' </bpmn2:startEvent>\n' +
' <bpmn2:sequenceFlow id="L1" sourceRef="N1" targetRef="N2" />\n' +
' <bpmn2:endEvent id="N3" name="结束节点">\n' +
' <bpmn2:incoming>L2</bpmn2:incoming>\n' +
' </bpmn2:endEvent>\n' +
' <bpmn2:userTask id="N2" name="起草节点" activiti:assignee="l4" activiti:candidateUsers="">\n' +
' <bpmn2:documentation>起草节点，表单数据一般从绑定的表单提取</bpmn2:documentation>\n' +
' <bpmn2:extensionElements>\n' +
' <activiti:formProperty id="userid" type="string" />\n' +
' <activiti:formProperty id="money" type="int" />\n' +
' <activiti:properties>\n' +
' <activiti:property name="编辑" value="edit" />\n' +
' <activiti:property name="撤回" value="back" />\n' +
' <activiti:property name="提交" value="commit" />\n' +
' </activiti:properties>\n' +
' </bpmn2:extensionElements>\n' +
' <bpmn2:incoming>L1</bpmn2:incoming>\n' +
' <bpmn2:outgoing>L2</bpmn2:outgoing>\n' +
' </bpmn2:userTask>\n' +
' <bpmn2:sequenceFlow id="L2" sourceRef="N2" targetRef="N3" />\n' +
' </bpmn2:process>\n' +
' <bpmndi:BPMNDiagram id="BPMNDiagram_1">\n' +
' <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">\n' +
' <bpmndi:BPMNEdge id="Flow_1u6pmzo_di" bpmnElement="L1">\n' +
' <di:waypoint x="360" y="78" />\n' +
' <di:waypoint x="360" y="160" />\n' +
' </bpmndi:BPMNEdge>\n' +
' <bpmndi:BPMNEdge id="Flow_0rj5mf6_di" bpmnElement="L2">\n' +
' <di:waypoint x="360" y="240" />\n' +
' <di:waypoint x="360" y="422" />\n' +
' </bpmndi:BPMNEdge>\n' +
' <bpmndi:BPMNShape id="Event_0byql27_di" bpmnElement="N1">\n' +
' <dc:Bounds x="342" y="42" width="36" height="36" />\n' +
' <bpmndi:BPMNLabel>\n' +
' <dc:Bounds x="339" y="12" width="43" height="14" />\n' +
' </bpmndi:BPMNLabel>\n' +
' </bpmndi:BPMNShape>\n' +
' <bpmndi:BPMNShape id="Activity_0g48n8q_di" bpmnElement="N2">\n' +
' <dc:Bounds x="310" y="160" width="100" height="80" />\n' +
' </bpmndi:BPMNShape>\n' +
' <bpmndi:BPMNShape id="Event_1h4oob7_di" bpmnElement="N3">\n' +
' <dc:Bounds x="342" y="422" width="36" height="36" />\n' +
' <bpmndi:BPMNLabel>\n' +
' <dc:Bounds x="339" y="465" width="43" height="14" />\n' +
' </bpmndi:BPMNLabel>\n' +
' </bpmndi:BPMNShape>\n' +
' </bpmndi:BPMNPlane>\n' +
' </bpmndi:BPMNDiagram>\n' +
'</bpmn2:definitions>\n';
</script>
<style scoped>
src/pages/my/demo/cate/edit_old.vue
+730
View File
@@ -0,0 +1,730 @@
<template>
<el-card class='box-card' :body-style="{padding:'2px 8px'}" shadow='never'>
<template #header>
<div class='zjustify'>
<div>
<div style='line-height: 32px'>DEMO分类</div>
</div>
<div>
<el-button type='success' @click='save' plain>保 存</el-button>
<el-button type='info' plain>复 制</el-button>
<el-button type='info' @click='tabClose({proxy,route})' plain>关 闭</el-button>
</div>
</div>
</template>
<CateModal url='my/demo/cate/tree' ref='cateModal' @close='cateChoose' />
<div style='margin-top: 8px;margin-bottom: 8px'>
<el-form ref='formRef' :model='form' label-width='140px'>
<el-tabs type='border-card' v-model='activeName'>
<el-tab-pane label='基本信息' name='tab1' class='zform el-form--inline'>
<div class='zform-div'>
<el-form-item label='分类名称：' prop='name' :rules="[{ required: true, message: '名称不能为空'}]">
<el-input v-model='form.name'></el-input>
</el-form-item>
<el-form-item label='上级分类：'>
<el-input :value='form.parent?.name' :suffix-icon='Search' :readonly='true' @click='openCateModal'></el-input>
</el-form-item>
<el-form-item label='表单模式：' style='width: 25%' prop='fomod' :rules="[{ required: true, message: '表单模式不能为空'}]">
<el-select v-model='form.fomod' style='width: 100%' clearable>
<el-option label='传统硬代码' value='m1' />
<el-option label='自主可配置' value='m2' />
</el-select>
</el-form-item>
<el-form-item label='是否有流程：' style='width: 25%'>
<el-switch v-model='form.prtag' @change='prtagChange'>
</el-switch>
</el-form-item>
<el-form-item label='排序号：' style='width: 25%' prop='ornum' :rules="[{ required: true, message: '排序号不能为空'}]">
<el-input-number v-model='form.ornum' controls-position='right' style='width: 100%' />
</el-form-item>
<el-form-item label='是否可用：' style='width: 25%'>
<el-switch v-model='form.avtag'>
</el-switch>
</el-form-item>
<el-form-item label='备注：' style='width: 100%'>
<el-input style="font-family: 'Courier New', Helvetica, Arial, sans-serif; font-size:16px"
type='textarea' :rows='4' v-model='form.notes'>
</el-input>
</el-form-item>
<el-form-item label='分类可使用者：' style='width: 50%'>
<el-input type='textarea' :rows='4' v-model='cdata.usmen' placeholder='分类可使用者可使用此分类创建主数据，为空则所有人可使用' readonly @click='usmenModal'>
</el-input>
</el-form-item>
<el-form-item label='数据可阅读者：' style='width: 50%'>
<el-input type='textarea' :rows='4' v-model='cdata.remen' placeholder='数据可阅读者可默认阅读该分类下所有创建的主数据，为空则默认只有管理员可阅读' readonly @click='remenModal'>
</el-input>
</el-form-item>
<el-form-item label='创建人：' style='width: 25%'>
<div class='zinput'>{{ form.crman ? form.crman.name : '' }}</div>
</el-form-item>
<el-form-item label='创建时间：' style='width: 25%'>
<div class='zinput'> {{ form.crtim }}</div>
</el-form-item>
<el-form-item label='更新人：' style='width: 25%'>
<div class='zinput'>{{ form.upman ? form.upman.name : '' }}</div>
</el-form-item>
<el-form-item label='更新时间：' style='width: 25%'>
<div class='zinput'> {{ form.uptim }}</div>
</el-form-item>
</div>
</el-tab-pane>
<el-tab-pane label='表单字段' name='tab2' v-if='form.fomod==="m2"' class='zform el-form--inline'>
<div class='zjustify' style='margin-bottom: 10px;'>
<div>
<el-select v-model='state.xtab' filterable clearable placeholder='页签名称' style='width: 130px;margin-right: 6px' @change='tabChange'>
<el-option v-for='item in state.form.tabs' :key='item.name' :value='item.name' :label='item.label'></el-option>
</el-select>
<el-icon style='font-size: 18px;margin-right: 6px;top:4px;cursor: pointer' @click='openTabEdit'>
<Setting />
</el-icon>
<!-- <el-input v-model='state.xname' placeholder='输入名称回车查下' clearable style='top:2px;width: 160px;margin-right: 10px' @keyup.enter='queryField'/>-->
<!-- <el-button type='primary' @click='queryField' plain>查 询</el-button>-->
<el-button type='primary' @click='addField(-1)' plain>新 增</el-button>
<el-button type='primary' @click='upField' plain>上 移</el-button>
<el-button type='primary' @click='downField' plain>下 移</el-button>
<el-button type='primary' @click='delFields' plain>删 除</el-button>
<!-- <el-dropdown @command='handleCommand' style='margin-left: 10px;top:1px'>-->
<!-- <el-button type='primary' plain>更 多</el-button>-->
<!-- <template #dropdown>-->
<!-- <el-dropdown-menu>-->
<!-- <el-dropdown-item command='expandAll'>测试1</el-dropdown-item>-->
<!-- <el-dropdown-item command='collapseAll'>测试2</el-dropdown-item>-->
<!-- <el-dropdown-item command='refresh'>测试3</el-dropdown-item>-->
<!-- </el-dropdown-menu>-->
<!-- </template>-->
<!-- </el-dropdown>-->
</div>
<div>
<!-- <el-button type='danger' :icon='Upload' @click='handlePinshen' plain>导 入</el-button>-->
<!-- <el-button type='success' :icon='Upload' @click='handleDraw' plain>导 出</el-button>-->
</div>
</div>
<vxe-table border ref='fieldTableRef' show-overflow='false' :data='form.tabs[state.xindex].fields'
:column-config='{resizable: true}' :sortConfig='{remote:false}'
:edit-config="{trigger: 'click', mode: 'cell'}">
<vxe-column type='checkbox' width='40' />
<!-- <vxe-column type="seq" width="36"/>-->
<vxe-column field='ornum' width='50' sort-type='number' title='#' sortable />
<vxe-column field='name' width='100' title='字段名称' :edit-render="{autofocus: '.vxe-input--inner'}">
<template #edit='{ row }'>
<vxe-select v-model='row.name' transfer filterable @change='fieldChange(row)'>
<vxe-option v-for='item in state.fields' :key='item.id' :value='item.id' :label='item.id' />
</vxe-select>
</template>
</vxe-column>
<vxe-column field='label' width='150' title='字段标题'>
<template #default='{ row }'>
<vxe-input v-model='row.label' />
</template>
</vxe-column>
<vxe-column field='type' width='150' title='字段类型'>
<template #default='{ row }'>
<vxe-select v-model='row.type' :disabled='isDisabled(row.name)' transfer>
<vxe-option :value="'input1'" :label="'单行输入框'" />
<vxe-option :value="'input2'" :label="'数字输入框'" />
<vxe-option :value="'textarea'" :label="'多行输入框'" />
<vxe-option :value="'select1'" :label="'普通下拉框'" />
<vxe-option :value="'select2'" :label="'树状下拉框'" />
<vxe-option :value="'radio'" :label="'单选框'" />
<vxe-option :value="'checkbox'" :label="'多选框'" />
<vxe-option :value="'switch'" :label="'开关'" />
<vxe-option :value="'popup1'" :label="'弹框1'" />
<vxe-option :value="'popup2'" :label="'弹框2'" />
<vxe-option :value="'popup3'" :label="'弹框3'" />
<vxe-option :value="'readonly1'" :label="'只读字段1'" />
<vxe-option :value="'readonly2'" :label="'只读字段2'" />
<vxe-option :value="'senum'" :label="'流水号'" />
<vxe-option :value="'att'" :label="'附件'" />
<vxe-option :value="'special'" :label="'特殊类型'" />
</vxe-select>
</template>
</vxe-column>
<vxe-column field='info' width='150' title='辅助信息'>
<template #default='{ row }'>
<vxe-input v-model='row.info' :disabled='isDisabled(row.name)' />
</template>
</vxe-column>
<vxe-column field='width' width='90' title='字段宽度'>
<template #default='{ row }'>
<vxe-select v-model='row.width' transfer>
<vxe-option :value="'100%'" :label="'100%'" />
<vxe-option :value="'50%'" :label="'50%'" />
<vxe-option :value="'25%'" :label="'25%'" />
</vxe-select>
</template>
</vxe-column>
<vxe-column field='retag' width='50' title='必填' header-align='center' align='center'>
<template #default='{ row }'>
<vxe-checkbox v-model='row.retag' />
</template>
</vxe-column>
<vxe-column field='shtag' width='50' title='显示' header-align='center' align='center'>
<template #default='{ row }'>
<vxe-checkbox v-model='row.shtag' />
</template>
</vxe-column>
<vxe-column field='ditag' width='50' title='只读' header-align='center' align='center'>
<template #default='{ row }'>
<vxe-checkbox v-model='row.ditag' />
</template>
</vxe-column>
<vxe-column field='notes' title='备注' :edit-render='{}'>
<template #edit='{ row }'>
<vxe-input v-model='row.notes' />
</template>
</vxe-column>
</vxe-table>
</el-tab-pane>
<el-tab-pane label='表单联动' name='tab3' v-if='form.fomod==="m2"' class='zform el-form--inline'>
<vxe-toolbar style='margin-top: 0;padding-top: 0'>
<template #buttons>
<vxe-button @click='addLink(-1)'>新增</vxe-button>
<vxe-button @click='delLinks'>删除选中</vxe-button>
<!-- <vxe-button @click="getSelectionEvent">获取选中</vxe-button>-->
<!-- <vxe-button @click="getInsertEvent">获取新增</vxe-button>-->
<!-- <vxe-button @click="$refs.linkTableRef.setEditCell(tableData[2], 'name')">激活第三行</vxe-button>-->
<!-- <vxe-button @click="saveEvent">保存</vxe-button>-->
</template>
</vxe-toolbar>
<vxe-table border ref='linkTableRef' show-overflow='false' :data='form.links'
:column-config='{resizable: true}'
:edit-config="{trigger: 'click', mode: 'cell'}">
<vxe-column type='checkbox' width='40' />
<vxe-column type='seq' width='36' />
<vxe-column field='trkey' width='100' title='触发字段' :edit-render="{autofocus: '.vxe-input--inner'}">
<template #edit='{ row }'>
<vxe-select v-model='row.trkey' transfer filterable>
<vxe-option v-for='item in state.fields' :key='item.id' :value='item.id' :label='item.id' />
</vxe-select>
</template>
</vxe-column>
<vxe-column width='305' title='触发条件'>
<template #default='{ row }'>
<div>
<vxe-button @click='addLeft(row)'>增加条件</vxe-button>
<div :key='left.id' v-for='left of row.lefts' style='margin-top: 5px'>
<vxe-select v-model='left.cokey' transfer filterable style='margin-right: 5px;width:100px;display: inline-block'>
<vxe-option v-for='item in state.fields' :key='item.id' :value='item.id' :label='item.id' />
</vxe-select>
<vxe-select v-model='left.coway' transfer style='margin-right: 5px;width:46px;display: inline-block'>
<vxe-option :value="'>'" :label="'>'"></vxe-option>
<vxe-option :value="'>='" :label="'>='"></vxe-option>
<vxe-option :value="'='" :label="'='"></vxe-option>
<vxe-option :value="'<='" :label="'<='"></vxe-option>
<vxe-option :value="'<'" :label="'<'"></vxe-option>
<vxe-option :value="'!='" :label="'!='"></vxe-option>
<vxe-option :value="'in'" :label="'in'"></vxe-option>
</vxe-select>
<vxe-input v-model='left.coval' type='text' placeholder=' ' style='margin-right: 5px;width:100px;display: inline-block' />
<el-icon :size='22' style='top: 5px;cursor: pointer;display: inline-block'>
<ele-CircleClose @click='row.lefts.splice(row.lefts.indexOf(left), 1)' />
</el-icon>
</div>
</div>
</template>
</vxe-column>
<vxe-column title='→' width='36'>
<template #default>
<span>→</span>
</template>
</vxe-column>
<vxe-column width='505' title='影响字段'>
<template #default='{ row }'>
<div>
<vxe-button @click='addRight(row)'>增加影响</vxe-button>
<div :key='right.id' v-for='right of row.rights' style='margin-top: 5px'>
<vxe-select v-model='right.efkey' transfer filterable style='margin-right: 5px;width:120px;display: inline-block'>
<vxe-option v-for='item in state.fields' :key='item.id' :value='item.id' :label='item.id' />
</vxe-select>
<vxe-select v-model='right.efway' transfer style='margin-right: 5px;width:76px;display: inline-block'>
<vxe-option :value="'e1'" :label="'值改变'"></vxe-option>
<vxe-option :value="'e2'" :label="'可选项'"></vxe-option>
<vxe-option :value="'e3'" :label="'必填？'"></vxe-option>
<vxe-option :value="'e4'" :label="'显示？'"></vxe-option>
<vxe-option :value="'e5'" :label="'只读？'"></vxe-option>
</vxe-select>
<vxe-input v-model='right.efval' type='text' placeholder=' ' style='margin-right: 5px;width:250px;display: inline-block' />
<el-icon :size='22' style='top: 5px;cursor: pointer;display: inline-block'>
<ele-CircleClose @click='row.rights.splice(row.rights.indexOf(right), 1)' />
</el-icon>
</div>
</div>
</template>
</vxe-column>
<vxe-column field='notes' title='备注' :edit-render='{}'>
<template #edit='{ row }'>
<vxe-textarea v-model='row.notes' />
</template>
</vxe-column>
</vxe-table>
</el-tab-pane>
<el-tab-pane label='流程配置' name='tab4' v-if='form.prtag'>
<div style='width: 100%;height: 720px'>
<!-- <Modeler2 @bpmnMounted='bpmnMounted' />-->
<Modeler @bpmnMounted='bpmnMounted' />
<Panel />
<BpmnActions />
</div>
</el-tab-pane>
<!-- <el-tab-pane label='流程配置' name='tab4'>-->
<!-- 流程配置-->
<!-- </el-tab-pane>-->
</el-tabs>
</el-form>
</div>
<TabEdit ref='tabRef' @close='closeTabEdit' />
<OrgModal ref='orgModal' @close='closeOrgModal' />
</el-card>
</template>
<script lang='ts'>
export default { name: 'MyDemoCateEdit' };
</script>
<script lang='ts' setup>
import { Search, Setting } from '@element-plus/icons-vue';
import { computed, getCurrentInstance, nextTick, onMounted, reactive, ref, toRaw, toRefs } from 'vue';
import { tabSave, tabClose } from '/@/comps/page/edit';
import { useRoute } from 'vue-router';
import CateModal from '/@/comps/gen/GenTreeModal.vue';
import OrgModal from '/@/comps/sys/OrgModal.vue';
import request from '/@/utils/request';
import { ElMessage, FormInstance } from 'element-plus';
import { uuid } from '/@/utils/xutil';
import TabEdit from './tab.vue';
import { VxeTableInstance } from 'vxe-table';
import Modeler from '/@/comps/Activiti/Modeler';
import Panel from '/@/comps/Activiti/panel';
import BpmnActions from '/@/comps/Activiti/bpmn-actions';
import { BpmnStore } from '/@/bpmn/store';
const route = useRoute();
const formRef = ref<FormInstance>();
const { proxy } = getCurrentInstance() as any;
const activeName = ref('tab1');
const state = reactive({
url: '/my/demo/cate', fieldSelectedIds: [] as any,
params: { path: '', query: '' }, xtab: '' as any, xindex: 0 as any,
form: {
avtag: true, fields: [] as any,remen: [] as any,
tabs: [{ ornum: 1, label: '基本信息', name: 'tab1', fields: [] }, { ornum: 2, label: '其他信息', name: 'tab2', fields: [] }] as any,
links: [], fomod: '', usmen: [],
} as any,
fields: [
{ id: 'id', name: 'ID', width: '50%' },
{ id: 'name', name: 'DEMO名称', width: '50%', type: 'input1' },
{ id: 'avtag', name: '是否可用', width: '50%', type: 'switch' },
{ id: 'crman', name: '创建人', width: '50%', type: 'readonly2', info: 'name' },
{ id: 'crtim', name: '创建时间', width: '50%', type: 'readonly1' },
{ id: 'upman', name: '更新人', width: '50%', type: 'readonly2', info: 'name' },
{ id: 'uptim', name: '更新时间', width: '50%', type: 'readonly1' },
{ id: 'notes', name: '备注', width: '100%', type: 'textarea' },
{ id: 'addre', name: 'DEMO地址', width: '100%', type: 'popup1' },
{ id: 'grade', name: 'DEMO资质', width: '100%', type: 'select1', info: 'grades' },
{ id: 'catid', name: 'DEMO分类', width: '100%', type: 'select2', info: 'cates' },
{ id: 'braid', name: '分支机构', width: '50%', type: 'select2', info: 'branchs' },
{ id: 'opman', name: '经办人', width: '50%', type: 'popup2' },
{ id: 'senum', name: '流水号', width: '50%', type: 'senum' },
{ id: 'vimen', name: '可查看者', width: '50%', type: 'popup3' },
{ id: 'edmen', name: '可编辑者', width: '50%', type: 'popup3' },
{ id: 'atts', name: '附件', width: '100%', type: 'att' },
{ id: 'items', name: '行项目明细', width: '100%', type: 'special' },
{ id: 'key1', name: '自定义1', width: '50%', type: '' },
{ id: 'key2', name: '自定义2', width: '50%', type: '' },
{ id: 'key3', name: '自定义3', width: '50%', type: '' },
] as any,
});
const { form } = toRefs(state);
onMounted(async () => {
await editInitx();
if (form.value.prtag && form.value.id) {
await BpmnStore.importXML(form.value.prxml);
}
});
const editInitx = async () => {
state.params = <any>route;
let id = state.params.query?.id;
if (id) {
state.form = await request({
url: state.url + '/one/' + id,
method: 'get',
});
state.form.tabs = JSON.parse(state.form.tjson);
state.form.links = JSON.parse(state.form.ljson);
state.xtab = state.form.tabs[0].name;
tabChange();
} else {
let pname = state.params.query?.pname;
if (pname) {
form.value.parent = { id: state.params.query?.pid, name: pname };
}
state.form.avtag = true;
state.xtab = 'tab1';
tabChange();
}
};
const prtagChange = async (value: any) => {
if (value === true) {
await nextTick(async () => {
if (form.value.prxml) {
await BpmnStore.importXML(form.value.prxml);
} else {
await BpmnStore.importXML(defxml);
}
});
} else {
const bpmn = await BpmnStore.getXML();
form.value.prxml = bpmn.xml;
}
};
//region -----组织架构逻辑-----
const orgModal = ref();
const cdata = reactive({}) as any;
const usmenModal = () => {
orgModal.value.openModal({
opener: 'usmen',
orgType: 11,
selectMode: 2,
orgs: toRaw(form.value.usmen),
});
};
const remenModal = () => {
orgModal.value.openModal({
opener: 'remen',
orgType: 11,
selectMode: 2,
orgs: toRaw(form.value.remen),
});
};
const closeOrgModal = (data: any) => {
if (data.opener == 'usmen') {
if (data.orgs && data.orgs.length > 0) {
form.value.usmen = data.orgs;
} else {
form.value.usmen = null;
}
} else if (data.opener == 'remen') {
if (data.orgs && data.orgs.length > 0) {
form.value.remen = data.orgs;
} else {
form.value.remen = null;
}
}
};
cdata.usmen = computed(() => {
let names = '';
if (form.value.usmen && form.value.usmen.length > 0) {
for (const user of form.value.usmen) {
names += user.name + '；';
}
}
return names;
});
cdata.remen = computed(() => {
let names = '';
if (form.value.remen && form.value.remen.length > 0) {
for (const user of form.value.remen) {
names += user.name + '；';
}
}
return names;
});
//endregion
//分类弹框逻辑
const cateModal = ref();
const openCateModal = () => {
cateModal.value.openModal();
};
const cateChoose = (node: any) => {
form.value.parent = { id: node.id, name: node.name };
};
//------------表单字段开始--------------------------------
const fieldTableRef = ref<VxeTableInstance>() as any;
const tabRef = ref() as any;
const openTabEdit = () => {
tabRef.value.openModal({ tabs: state.form.tabs });
};
const closeTabEdit = (tabs: any) => {
state.form.tabs = tabs;
};
const tabChange = () => {
for (let i = 0; i < state.form.tabs.length; i++) {
if (state.form.tabs[i].name == state.xtab) {
state.xindex = i;
break;
}
}
// fieldTableRef.value.reloadData(state.form.tabs[state.xindex].fields);
};
const addField = async (row: any) => {
const uid = uuid();
const $table = fieldTableRef.value as any;
const record = { tabid: state.xtab, id: uid, ornum: form.value.tabs[state.xindex].fields.length + 1 };
const { row: newRow } = await $table.insertAt(record, row);
form.value.tabs[state.xindex].fields.push(newRow);
// fieldTableRef.value.reloadData(state.form.tabs[state.xindex].fields);
await $table.setEditCell(newRow, 'name');
};
const fieldChange = (row: any) => {
for (const field of state.fields) {
if (field.id == row.name) {
row.label = field.name;
row.type = field.type;
row.info = field.info;
row.shtag = true;
break;
}
}
};
const upField = () => {
const $table = fieldTableRef.value;
const selectRecords = $table.getCheckboxRecords();
if (selectRecords.length <= 0) {
ElMessage.warning('请选择后再进行操作');
return;
}
for (let i = 0; i <= form.value.tabs[state.xindex].fields.length - 1; i++) {
for (let j = 0; j < selectRecords.length; j++) {
if (selectRecords[j].id == form.value.tabs[state.xindex].fields[i].id) {
if (i == 0) {
ElMessage.warning('已经是第一项');
return;
} else {
let swap = form.value.tabs[state.xindex].fields[i - 1];
form.value.tabs[state.xindex].fields[i - 1] = form.value.tabs[state.xindex].fields[i];
form.value.tabs[state.xindex].fields[i - 1].ornum--;
form.value.tabs[state.xindex].fields[i] = swap;
form.value.tabs[state.xindex].fields[i].ornum++;
}
break;
}
}
}
fieldTableRef.value.sort({ field: 'ornum', order: 'asc' });
};
const downField = () => {
const $table = fieldTableRef.value;
const selectRecords = $table.getCheckboxRecords();
if (selectRecords.length <= 0) {
ElMessage.warning('请选择后再进行操作');
return;
}
for (let i = form.value.tabs[state.xindex].fields.length - 1; i >= 0; i--) {
for (let j = selectRecords.length - 1; j >= 0; j--) {
if (selectRecords[j].id == form.value.tabs[state.xindex].fields[i].id) {
if (i == form.value.tabs[state.xindex].fields.length - 1) {
ElMessage.warning('已经是最后一项');
return;
} else {
let swap = form.value.tabs[state.xindex].fields[i + 1];
form.value.tabs[state.xindex].fields[i + 1] = form.value.tabs[state.xindex].fields[i];
form.value.tabs[state.xindex].fields[i + 1].ornum++;
form.value.tabs[state.xindex].fields[i] = swap;
form.value.tabs[state.xindex].fields[i].ornum--;
}
break;
}
}
}
fieldTableRef.value.sort({ field: 'ornum', order: 'asc' });
};
const delFields = async (row: any, left: any) => {
// row.lefts.splice(row.lefts.indexOf(left), 1)
// $refs.fieldTableRef.removeCheckboxRow()
const $table = fieldTableRef.value;
const selectRecords = $table.getCheckboxRecords();
for (const tab of state.form.tabs) {
// console.log(tab);
// console.log(state.xtab);
if (tab.name == state.xtab) {
for (let index = tab.fields.length - 1; index >= 0; index--) {
for (let i = 0; i < selectRecords.length; i++) {
if (selectRecords[i].id == tab.fields[index].id) {
tab.fields.splice(index, 1);
break;
}
}
}
for (let i = 0; i < tab.fields.length; i++) {
tab.fields[i].ornum = i + 1;
}
$table.reloadData(tab.fields);
await $table.removeCheckboxRow();
}
}
};
const isDisabled = (name: string) => {
if ((!name) || name.startsWith('key')) {
return false;
} else {
return true;
}
};
//------------表单联动开始--------------------------------
const linkTableRef = ref<VxeTableInstance>() as any;
const addLink = async (row: any) => {
const uid = uuid();
const $table = linkTableRef.value as any;
const record = { id: uid, ornum: form.value.links.length + 1, lefts: [], rights: [] };
const { row: newRow } = await $table.insertAt(record, row);
form.value.links.push(newRow);
// fieldTableRef.value.reloadData(state.form.tabs[state.xindex].fields);
await $table.setEditCell(newRow, 'trkey');
};
const delLinks = async () => {
const $table = linkTableRef.value;
const selectRecords = $table.getCheckboxRecords();
for (let index = form.value.links.length - 1; index >= 0; index--) {
for (let i = 0; i < selectRecords.length; i++) {
if (selectRecords[i].id == form.value.links[index].id) {
form.value.links.splice(index, 1);
break;
}
}
}
for (let i = 0; i < form.value.links.length; i++) {
form.value.links[i].ornum = i + 1;
}
$table.reloadData(form.value.links);
// await $table.removeCheckboxRow();
};
const addLeft = (row: any) => {
let newOrnum = 1;
if (row.lefts.length > 0) {
newOrnum = row.lefts[row.lefts.length - 1].ornum + 1;
}
row.lefts.push({ id: uuid(), ornum: newOrnum });
};
const addRight = (row: any) => {
let newOrnum = 1;
if (row.rights.length > 0) {
newOrnum = row.rights[row.rights.length - 1].ornum + 1;
}
row.rights.push({ id: uuid(), ornum: newOrnum });
};
//------------表单联动结束--------------------------------
const save = async () => {
// form.value.fjson = JSON.stringify(form.value.fields);
form.value.tjson = JSON.stringify(form.value.tabs);
form.value.ljson = JSON.stringify(form.value.links);
if (form.value.prtag) {
const bpmn = await BpmnStore.getXML();
form.value.prxml = bpmn.xml;
}
await tabSave({ formRef: formRef.value, state, proxy, route });
};
const defxml = '<?xml version="1.0" encoding="UTF-8"?>\n' +
'<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:activiti="http://activiti.org/bpmn" id="sample-diagram" targetNamespace="http://activiti.org/bpmn" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">\n' +
' <bpmn2:process id="Process_1" name="1" isExecutable="true">\n' +
' <bpmn2:startEvent id="N1" name="开始节点">\n' +
' <bpmn2:outgoing>L1</bpmn2:outgoing>\n' +
' </bpmn2:startEvent>\n' +
' <bpmn2:sequenceFlow id="L1" sourceRef="N1" targetRef="N2" />\n' +
' <bpmn2:endEvent id="N3" name="结束节点">\n' +
' <bpmn2:incoming>L2</bpmn2:incoming>\n' +
' </bpmn2:endEvent>\n' +
' <bpmn2:userTask id="N2" name="起草节点" activiti:assignee="l4" activiti:candidateUsers="">\n' +
' <bpmn2:documentation>起草节点，表单数据一般从绑定的表单提取</bpmn2:documentation>\n' +
' <bpmn2:extensionElements>\n' +
' <activiti:formProperty id="userid" type="string" />\n' +
' <activiti:formProperty id="money" type="int" />\n' +
' <activiti:properties>\n' +
' <activiti:property name="编辑" value="edit" />\n' +
' <activiti:property name="撤回" value="back" />\n' +
' <activiti:property name="提交" value="commit" />\n' +
' </activiti:properties>\n' +
' </bpmn2:extensionElements>\n' +
' <bpmn2:incoming>L1</bpmn2:incoming>\n' +
' <bpmn2:outgoing>L2</bpmn2:outgoing>\n' +
' </bpmn2:userTask>\n' +
' <bpmn2:sequenceFlow id="L2" sourceRef="N2" targetRef="N3" />\n' +
' </bpmn2:process>\n' +
' <bpmndi:BPMNDiagram id="BPMNDiagram_1">\n' +
' <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">\n' +
' <bpmndi:BPMNEdge id="Flow_1u6pmzo_di" bpmnElement="L1">\n' +
' <di:waypoint x="360" y="78" />\n' +
' <di:waypoint x="360" y="160" />\n' +
' </bpmndi:BPMNEdge>\n' +
' <bpmndi:BPMNEdge id="Flow_0rj5mf6_di" bpmnElement="L2">\n' +
' <di:waypoint x="360" y="240" />\n' +
' <di:waypoint x="360" y="422" />\n' +
' </bpmndi:BPMNEdge>\n' +
' <bpmndi:BPMNShape id="Event_0byql27_di" bpmnElement="N1">\n' +
' <dc:Bounds x="342" y="42" width="36" height="36" />\n' +
' <bpmndi:BPMNLabel>\n' +
' <dc:Bounds x="339" y="12" width="43" height="14" />\n' +
' </bpmndi:BPMNLabel>\n' +
' </bpmndi:BPMNShape>\n' +
' <bpmndi:BPMNShape id="Activity_0g48n8q_di" bpmnElement="N2">\n' +
' <dc:Bounds x="310" y="160" width="100" height="80" />\n' +
' </bpmndi:BPMNShape>\n' +
' <bpmndi:BPMNShape id="Event_1h4oob7_di" bpmnElement="N3">\n' +
' <dc:Bounds x="342" y="422" width="36" height="36" />\n' +
' <bpmndi:BPMNLabel>\n' +
' <dc:Bounds x="339" y="465" width="43" height="14" />\n' +
' </bpmndi:BPMNLabel>\n' +
' </bpmndi:BPMNShape>\n' +
' </bpmndi:BPMNPlane>\n' +
' </bpmndi:BPMNDiagram>\n' +
'</bpmn2:definitions>\n';
</script>
<style scoped>
/*需要放到vboot.scss中才起作用*/
/*.el-select .el-input__inner{*/
/* font-family: 'Courier New', Helvetica, Arial, sans-serif !important;*/
/*}*/
</style>
src/pages/my/demo/cate/index.vue
+4 -2
View File
@@ -16,9 +16,11 @@
<span style='cursor:pointer;color: #3e9ece' @click='tabEdit(state.url,row.id)'>{{ row.name }}</span>
</template>
</vxe-column>
<vxe-column field='crtim' title='创建时间' width='160' />
<vxe-column field='uptim' title='更新时间' width='160' />
<vxe-column field='notes' title='备注' />
<vxe-column field='crman.name' title='创建人' width='66' />
<vxe-column field='crtim' title='创建时间' width='148' />
<vxe-column field='upman.name' title='更新人' width='66' />
<vxe-column field='uptim' title='更新时间' width='148' />
<vxe-column title='操作' width='100' show-overflow header-align='center' align='right'>
<template #default='{ row }'>
<el-icon @click='tabAdd(state.url,{pid:row.id,pname:row.name})' style='cursor: pointer;font-size: 18px;top:2px;margin-right: 8px;color: #52C41A'>
src/pages/my/demo/main/index.vue
+4 -3
View File
@@ -59,11 +59,12 @@
<el-tag v-show="scope.row.state==='30'" type='success' size='small'>结束</el-tag>
<el-tag v-show="scope.row.state==='20'" type='warning' size='small'>待审</el-tag>
<el-tag v-show="scope.row.state==='11'" type='danger' size='small'>驳回</el-tag>
<el-tag v-show="scope.row.state==='00'" type='primary' size='small'>草稿</el-tag>
<el-tag v-show="scope.row.state==='10'" type='primary' size='small'>草稿</el-tag>
<el-tag v-show="scope.row.state==='00'" type='info' size='small'>废弃</el-tag>
</template>
</el-table-column>
<el-table-column label='当前环节' prop='facno' width='160' />
<el-table-column label='当前处理人' prop='exmen' width='86' />
<el-table-column label='当前处理人' prop='exmen' width='160' />
</el-table>
<el-pagination
@@ -85,7 +86,7 @@ export default { name: 'MyDemoMain' };
import { Plus, Delete, ArrowDown, ArrowUp } from '@element-plus/icons-vue';
import { onMounted, reactive, ref } from 'vue';
import { listQuery, listDelete, tabAdd, tabAdd2, tabView, listSelect } from '/@/comps/page';
import CateModal from '/@/comps/gen/GenModal.vue';
import CateModal from '/@/comps/gen/GenTreeModal.vue';
import router from '/@/router';
const state = reactive({
src/pages/my/demo/main/view.vue
+1 -1
View File
@@ -89,7 +89,7 @@
</div>
</el-tab-pane>
<el-tab-pane label='流程流转' name='tab11' v-if='form.protd'>
<BpmView @submit='submit' :proid='form.id' />
<BpmView @submit='submit' :proid='form.id' modty="app_demo"/>
</el-tab-pane>
</el-tabs>
</el-form>
src/pages/oa/flow/cate/edit.vue
+1 -1
View File
@@ -68,7 +68,7 @@ import { Search } from '@element-plus/icons-vue';
import { getCurrentInstance, onMounted, reactive, ref, toRefs } from 'vue';
import { tabSave, tabClose } from '/@/comps/page/edit';
import { useRoute } from 'vue-router';
import CateModal from '/@/comps/gen/GenModal.vue';
import CateModal from '/@/comps/gen/GenTreeModal.vue';
import request from '/@/utils/request';
import { FormInstance } from 'element-plus';
src/pages/oa/flow/main/index.vue
+3 -2
View File
@@ -52,7 +52,8 @@
<el-tag v-show="scope.row.state==='30'" type='success' size='small'>结束</el-tag>
<el-tag v-show="scope.row.state==='20'" type='warning' size='small'>待审</el-tag>
<el-tag v-show="scope.row.state==='11'" type='danger' size='small'>驳回</el-tag>
<el-tag v-show="scope.row.state==='00'" type='primary' size='small'>草稿</el-tag>
<el-tag v-show="scope.row.state==='10'" type='primary' size='small'>草稿</el-tag>
<el-tag v-show="scope.row.state==='00'" type='info' size='small'>废弃</el-tag>
</template>
</el-table-column>
<el-table-column label='当前环节' prop='facno' width='160' />
@@ -75,7 +76,7 @@
import { Search, Plus, Delete, ArrowDown, ArrowUp } from '@element-plus/icons-vue';
import { onMounted, reactive, ref } from 'vue';
import { listQuery, listDelete, listSelect, pageView } from '/@/comps/page/index';
import TmplModal from '/@/comps/gen/GenModal.vue';
import TmplModal from '/@/comps/gen/GenTreeModal.vue';
import FlowModal from './FlowModal.vue';
const state = reactive({
src/pages/oa/flow/main/view.vue
+1 -1
View File
@@ -33,7 +33,7 @@
</el-tab-pane>
<el-tab-pane label='流程处理' name='tab3'>
<template v-if='form.id'>
<BpmView @submit='submit' :proid='form.id' />
<BpmView @submit='submit' :proid='form.id' modty="oaFlow"/>
</template>
</el-tab-pane>
<el-tab-pane label='权限信息' name='tab4'>
src/pages/oa/flow/tmpl/edit.vue
+130 -326
View File
@@ -1,7 +1,6 @@
<template>
<el-card class='box-card' :body-style="{padding:'2px 8px'}" shadow='never'>
<template #header>
<el-card class='box-card' :body-style="{padding:'2px 8px'}" shadow='never'>
<template #header>
<div class='zjustify'>
<div>
<div style='line-height: 32px'>流程模板</div>
@@ -12,358 +11,163 @@
<el-button type='info' @click='pageClose' plain>关 闭</el-button>
</div>
</div>
</template>
<CateModal url='oa/flow/cate/tree' ref='cateModal' @close='cateChoose'/>
<div style='margin-top: 8px;margin-bottom: 8px'>
<el-form ref='formRef' :model='form' label-width='140px'>
<el-tabs type='card' v-model='activeName'>
<el-tab-pane label='基本信息' name='tab1' class='zform el-form--inline'>
<div class="zform-div">
<el-form-item label='模板名称：' prop='name' :rules="[{ required: true, message: '名称不能为空'}]">
<el-input v-model='form.name'></el-input>
</el-form-item>
<el-form-item label='所属分类：' prop='cate' :rules="[{ required: true, message: '分类不能为空'}]">
<el-input :value='form.cate?.name' :suffix-icon='Search' :readonly='true' @click='openCateModal'></el-input>
</el-form-item>
<el-form-item label='排序号：'>
<el-input-number v-model='form.ornum' controls-position='right' style='width: 100%'/>
</el-form-item>
<el-form-item label='是否可用：'>
<el-switch v-model='form.avtag'>
</el-switch>
</el-form-item>
</div>
</el-tab-pane>
</template>
<CateModal url='oa/flow/cate/tree' ref='cateModal' @close='cateChoose' />
<div style='margin-top: 8px;margin-bottom: 8px'>
<el-form ref='formRef' :model='form' label-width='140px'>
<el-tabs type='card' v-model='activeName'>
<el-tab-pane label='表单配置' name='tab2'>
<el-row style='border-top: 1px solid #d2d2d2;'>
<el-col :span='24'>
<v-form-designer v-if='state.vformShow' ref='vFormRef'/>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label='基本信息' name='tab1' class='zform el-form--inline'>
<div class="zform-div">
<el-form-item label='模板名称：' prop='name' :rules="[{ required: true, message: '名称不能为空'}]">
<el-input v-model='form.name'></el-input>
</el-form-item>
<el-form-item label='所属分类：' prop='cate' :rules="[{ required: true, message: '分类不能为空'}]">
<el-input :value='form.cate?.name' :suffix-icon='Search' :readonly='true' @click='openCateModal'></el-input>
</el-form-item>
<el-form-item label='排序号：'>
<el-input-number v-model='form.ornum' controls-position='right' style='width: 100%'/>
</el-form-item>
<el-form-item label='是否可用：'>
<el-switch v-model='form.avtag'>
</el-switch>
</el-form-item>
</div>
</el-tab-pane>
<el-tab-pane label='流程配置' name='tab3'>
<div style='width: 100%;height: 720px'>
<!-- <Modeler2 @bpmnMounted='bpmnMounted' />-->
<Modeler @bpmnMounted='bpmnMounted'/>
<Panel/>
<BpmnActions/>
</div>
</el-tab-pane>
<el-tab-pane label='表单配置' name='tab2'>
<el-row style='border-top: 1px solid #d2d2d2;'>
<el-col :span='24'>
<v-form-designer v-if='state.vformShow' ref='vFormRef'/>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label='权限配置' name='tab4' class='zform el-form--inline'>
<div class="zform-div">
<el-form-item label='备注：' style="width: 100%;">
<el-input style="font-family: 'Courier New', Helvetica, Arial, sans-serif; font-size:16px"
type='textarea' :rows='4'
v-model='form.notes'>
</el-input>
</el-form-item>
</div>
</el-tab-pane>
<el-tab-pane label='其他信息' name='tab9' class='zform el-form--inline'>
<div class="zform-div">
<el-form-item label='备注：' style="width: 100%">
<el-input style="font-family: 'Courier New', Helvetica, Arial, sans-serif; font-size:16px"
type='textarea' :rows='4' v-model='form.notes'>
</el-input>
</el-form-item>
<el-form-item label='创建人：' style="width: 25%">
<el-tab-pane label='流程配置' name='tab3'>
<div style='width: 100%;height: 720px'>
<BpmTmplEdit ref="bpmTmplEditRef" v-if='state.bpmShowTag' :prxml='form.prxml'/>
</div>
</el-tab-pane>
<el-tab-pane label='其他信息' name='tab9' class='zform el-form--inline'>
<div class="zform-div">
<el-form-item label='备注：' style="width: 100%">
<el-input style="font-family: 'Courier New', Helvetica, Arial, sans-serif; font-size:16px"
type='textarea' :rows='4' v-model='form.notes'>
</el-input>
</el-form-item>
<el-form-item label='创建人：' style="width: 25%">
<div class='zinput'> {{ form.crman ? form.crman.name : '' }}</div>
</el-form-item>
<el-form-item label='创建时间：' style="width: 25%">
<div class='zinput'> {{ form.crtim }}</div>
</el-form-item>
<el-form-item label='更新人：' style="width: 25%">
</el-form-item>
<el-form-item label='创建时间：' style="width: 25%">
<div class='zinput'> {{ form.crtim }}</div>
</el-form-item>
<el-form-item label='更新人：' style="width: 25%">
<div class='zinput'> {{ form.upman ? form.upman.name : '' }}</div>
</el-form-item>
<el-form-item label='更新时间：' style="width: 25%">
<div class='zinput'> {{ form.uptim }}</div>
</el-form-item>
</div>
</el-tab-pane>
</el-tabs>
</el-form>
</div>
</el-card>
</el-form-item>
<el-form-item label='更新时间：' style="width: 25%">
<div class='zinput'> {{ form.uptim }}</div>
</el-form-item>
</div>
</el-tab-pane>
</el-tabs>
</el-form>
</div>
</el-card>
</template>
<script lang='ts'>
export default {name: 'OaFlowTmplEdit'};
export default { name: 'OaFlowTmplEditNew' };
</script>
<script lang='ts' setup>
import {onMounted, reactive, ref, toRefs} from 'vue';
import {pageSave, pageClose} from '/@/comps/page/edit';
import {useRoute} from 'vue-router';
import Modeler from '/@/comps/Activiti/Modeler';
import Panel from '/@/comps/Activiti/panel';
import BpmnActions from '/@/comps/Activiti/bpmn-actions';
import {BpmnStore} from '/@/bpmn/store';
import {NextLoading} from '/@/utils/loading';
import CateModal from '/@/comps/gen/GenModal.vue';
import {FormInstance} from 'element-plus';
import { onMounted, reactive, ref, toRefs } from 'vue';
import { pageSave, pageClose } from '/@/comps/page/edit';
import { useRoute } from 'vue-router';
import { NextLoading } from '/@/utils/loading';
import CateModal from '/@/comps/gen/GenTreeModal.vue';
import BpmTmplEdit from '/@/comps/bpm/tmpl/edit.vue';
import { FormInstance } from 'element-plus';
import request from '/@/utils/request';
const route = useRoute();
const formRef = ref<FormInstance>();
const activeName = ref('tab1');
const state = reactive({
url: '/oa/flow/tmpl',
params: {path: '', query: {} as any},
form: {avtag: true} as any,
vformShow: true
});
const {form} = toRefs(state);
const vFormRef = ref(null) as any;
onMounted(async () => {
NextLoading.done();
state.params = <any>route;
let id = state.params.query?.id;
if (id) {
state.form = await request({
url: state.url + '/one/' + id,
method: 'get',
});
vFormRef.value.setFormJson(JSON.parse(state.form.vform));
// state.vformShow=true;
// console.log(vFormRef.value);
// console.log(state.form.vform);
} else {
let catid = state.params.query?.catid;
if (catid) {
state.form.cate = {id: catid, name: state.params.query?.catna};
}
state.form.avtag = true;
vFormRef.value.setFormJson({
"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": ""
}
});
}
if (form.value.id) {
await BpmnStore.importXML(form.value.prxml);
} else {
await BpmnStore.importXML(defxml);
}
const state = reactive({
url: '/oa/flow/tmpl',bpmShowTag:false,
params: { path: '', query: {} as any},
form: { avtag: true,protd:'',prxml:'' } as any,
vformShow: true
});
const { form } = toRefs(state);
onMounted(async () => {
NextLoading.done();
state.params = <any>route;
let id = state.params.query?.id;
if (id) {
state.form = await request({
url: state.url + '/one/' + id,
method: 'get',
});
vFormRef.value.setFormJson(JSON.parse(state.form.vform));
} else {
let catid = state.params.query?.catid;
if (catid) {
state.form.cate = { id: catid, name: state.params.query?.catna };
}
state.form.avtag = true;
vFormRef.value.setFormJson({
"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": ""
}
});
}
state.bpmShowTag=true;
});
const bpmTmplEditRef=ref();
async function save(state: any) {
const bpmn = await BpmnStore.getXML();
// console.log(typeof (bpmn.xml));
// xFlow.value.getData();
form.value.vform = JSON.stringify(vFormRef.value.getFormJson());
form.value.prxml = bpmn.xml;
console.log(bpmn.xml);
await pageSave({formRef: formRef.value, state});
// xFlow.value.getData();
// form.value.vform = JSON.stringify(vFormRef.value.getFormJson());
form.value.prxml =await bpmTmplEditRef.value.getXml();
form.value.vform = JSON.stringify(vFormRef.value.getFormJson());
await pageSave({formRef:formRef.value, state});
}
const defxml = '<?xml version="1.0" encoding="UTF-8"?>\n' +
'<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:activiti="http://activiti.org/bpmn" id="sample-diagram" targetNamespace="http://activiti.org/bpmn" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">\n' +
' <bpmn2:process id="Process_1" name="1" isExecutable="true">\n' +
' <bpmn2:startEvent id="N1" name="开始节点">\n' +
' <bpmn2:outgoing>L1</bpmn2:outgoing>\n' +
' </bpmn2:startEvent>\n' +
' <bpmn2:sequenceFlow id="L1" sourceRef="N1" targetRef="N2" />\n' +
' <bpmn2:exclusiveGateway id="N9" name="条件分支">\n' +
' <bpmn2:documentation>判断审批金额是否大于100</bpmn2:documentation>\n' +
' <bpmn2:incoming>L4</bpmn2:incoming>\n' +
' <bpmn2:outgoing>L6</bpmn2:outgoing>\n' +
' <bpmn2:outgoing>L5</bpmn2:outgoing>\n' +
' </bpmn2:exclusiveGateway>\n' +
' <bpmn2:sequenceFlow id="L4" sourceRef="N4" targetRef="N9" />\n' +
' <bpmn2:sequenceFlow id="L6" name="王五分支线" sourceRef="N9" targetRef="N6">\n' +
' <bpmn2:extensionElements>\n' +
' <activiti:executionListener expression="money&#60;=100" event="take" />\n' +
' </bpmn2:extensionElements>\n' +
' </bpmn2:sequenceFlow>\n' +
' <bpmn2:sequenceFlow id="L5" name="李四分支线" sourceRef="N9" targetRef="N5">\n' +
' <bpmn2:extensionElements>\n' +
' <activiti:executionListener expression="money&#62;100" event="take" />\n' +
' </bpmn2:extensionElements>\n' +
' </bpmn2:sequenceFlow>\n' +
' <bpmn2:sequenceFlow id="L7" sourceRef="N5" targetRef="N7" />\n' +
' <bpmn2:sequenceFlow id="L8" sourceRef="N6" targetRef="N7" />\n' +
' <bpmn2:endEvent id="N3" name="结束节点">\n' +
' <bpmn2:incoming>L2</bpmn2:incoming>\n' +
' </bpmn2:endEvent>\n' +
' <bpmn2:sequenceFlow id="L2" sourceRef="N7" targetRef="N3" />\n' +
' <bpmn2:sequenceFlow id="L3" sourceRef="N2" targetRef="N4" />\n' +
' <bpmn2:userTask id="N2" name="起草节点" activiti:assignee="z3" activiti:candidateUsers="">\n' +
' <bpmn2:documentation>起草节点，表单数据一般从绑定的表单提取</bpmn2:documentation>\n' +
' <bpmn2:extensionElements>\n' +
' <activiti:formProperty id="userid" type="string" />\n' +
' <activiti:formProperty id="money" type="int" />\n' +
' <activiti:properties>\n' +
' <activiti:property name="编辑" value="edit" />\n' +
' <activiti:property name="撤回" value="back" />\n' +
' <activiti:property name="提交" value="commit" />\n' +
' </activiti:properties>\n' +
' </bpmn2:extensionElements>\n' +
' <bpmn2:incoming>L1</bpmn2:incoming>\n' +
' <bpmn2:outgoing>L3</bpmn2:outgoing>\n' +
' </bpmn2:userTask>\n' +
' <bpmn2:userTask id="N4" name="张三审批" activiti:assignee="z3" activiti:candidateUsers="">\n' +
' <bpmn2:documentation>审批节点</bpmn2:documentation>\n' +
' <bpmn2:extensionElements>\n' +
' <activiti:properties>\n' +
' <activiti:property name="审批" value="approve" />\n' +
' <activiti:property name="驳回" value="reject" />\n' +
' </activiti:properties>\n' +
' </bpmn2:extensionElements>\n' +
' <bpmn2:incoming>L3</bpmn2:incoming>\n' +
' <bpmn2:outgoing>L4</bpmn2:outgoing>\n' +
' </bpmn2:userTask>\n' +
' <bpmn2:userTask id="N5" name="李四审批" activiti:assignee="l4" activiti:candidateUsers="">\n' +
' <bpmn2:extensionElements>\n' +
' <activiti:properties>\n' +
' <activiti:property name="审批" value="approve" />\n' +
' <activiti:property name="驳回" value="reject" />\n' +
' </activiti:properties>\n' +
' </bpmn2:extensionElements>\n' +
' <bpmn2:incoming>L5</bpmn2:incoming>\n' +
' <bpmn2:outgoing>L7</bpmn2:outgoing>\n' +
' </bpmn2:userTask>\n' +
' <bpmn2:userTask id="N6" name="王五审批" activiti:assignee="w5" activiti:candidateUsers="">\n' +
' <bpmn2:extensionElements>\n' +
' <activiti:properties>\n' +
' <activiti:property name="审批" value="approve" />\n' +
' <activiti:property name="驳回" value="reject" />\n' +
' </activiti:properties>\n' +
' </bpmn2:extensionElements>\n' +
' <bpmn2:incoming>L6</bpmn2:incoming>\n' +
' <bpmn2:outgoing>L8</bpmn2:outgoing>\n' +
' </bpmn2:userTask>\n' +
' <bpmn2:userTask id="N7" name="赵六审批" activiti:assignee="z6" activiti:candidateUsers="">\n' +
' <bpmn2:extensionElements>\n' +
' <activiti:formProperty id="userid" type="string" />\n' +
' <activiti:taskListener class="do some thing" event="complete" />\n' +
' <activiti:properties>\n' +
' <activiti:property name="审批" value="approve" />\n' +
' </activiti:properties>\n' +
' </bpmn2:extensionElements>\n' +
' <bpmn2:incoming>L7</bpmn2:incoming>\n' +
' <bpmn2:incoming>L8</bpmn2:incoming>\n' +
' <bpmn2:outgoing>L2</bpmn2:outgoing>\n' +
' </bpmn2:userTask>\n' +
' </bpmn2:process>\n' +
' <bpmndi:BPMNDiagram id="BPMNDiagram_1">\n' +
' <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">\n' +
' <bpmndi:BPMNEdge id="Flow_0uh8wmt_di" bpmnElement="L3">\n' +
' <di:waypoint x="560" y="200" />\n' +
' <di:waypoint x="560" y="250" />\n' +
' </bpmndi:BPMNEdge>\n' +
' <bpmndi:BPMNEdge id="Flow_01hb865_di" bpmnElement="L2">\n' +
' <di:waypoint x="560" y="670" />\n' +
' <di:waypoint x="560" y="732" />\n' +
' </bpmndi:BPMNEdge>\n' +
' <bpmndi:BPMNEdge id="Flow_1t81399_di" bpmnElement="L8">\n' +
' <di:waypoint x="690" y="550" />\n' +
' <di:waypoint x="690" y="630" />\n' +
' <di:waypoint x="610" y="630" />\n' +
' </bpmndi:BPMNEdge>\n' +
' <bpmndi:BPMNEdge id="Flow_00vdr2t_di" bpmnElement="L7">\n' +
' <di:waypoint x="430" y="550" />\n' +
' <di:waypoint x="430" y="630" />\n' +
' <di:waypoint x="510" y="630" />\n' +
' </bpmndi:BPMNEdge>\n' +
' <bpmndi:BPMNEdge id="Flow_1bnjbaa_di" bpmnElement="L5">\n' +
' <di:waypoint x="535" y="400" />\n' +
' <di:waypoint x="430" y="400" />\n' +
' <di:waypoint x="430" y="470" />\n' +
' <bpmndi:BPMNLabel>\n' +
' <dc:Bounds x="456" y="382" width="55" height="14" />\n' +
' </bpmndi:BPMNLabel>\n' +
' </bpmndi:BPMNEdge>\n' +
' <bpmndi:BPMNEdge id="Flow_12ug1tp_di" bpmnElement="L6">\n' +
' <di:waypoint x="585" y="400" />\n' +
' <di:waypoint x="690" y="400" />\n' +
' <di:waypoint x="690" y="470" />\n' +
' <bpmndi:BPMNLabel>\n' +
' <dc:Bounds x="611" y="382" width="56" height="14" />\n' +
' </bpmndi:BPMNLabel>\n' +
' </bpmndi:BPMNEdge>\n' +
' <bpmndi:BPMNEdge id="Flow_1miguqf_di" bpmnElement="L4">\n' +
' <di:waypoint x="560" y="330" />\n' +
' <di:waypoint x="560" y="375" />\n' +
' </bpmndi:BPMNEdge>\n' +
' <bpmndi:BPMNEdge id="Flow_1u6pmzo_di" bpmnElement="L1">\n' +
' <di:waypoint x="560" y="68" />\n' +
' <di:waypoint x="560" y="120" />\n' +
' </bpmndi:BPMNEdge>\n' +
' <bpmndi:BPMNShape id="Event_0byql27_di" bpmnElement="N1">\n' +
' <dc:Bounds x="542" y="32" width="36" height="36" />\n' +
' <bpmndi:BPMNLabel>\n' +
' <dc:Bounds x="539" y="2" width="43" height="14" />\n' +
' </bpmndi:BPMNLabel>\n' +
' </bpmndi:BPMNShape>\n' +
' <bpmndi:BPMNShape id="Gateway_0qd58o6_di" bpmnElement="N9" isMarkerVisible="true">\n' +
' <dc:Bounds x="535" y="375" width="50" height="50" />\n' +
' <bpmndi:BPMNLabel>\n' +
' <dc:Bounds x="538" y="432" width="44" height="14" />\n' +
' </bpmndi:BPMNLabel>\n' +
' </bpmndi:BPMNShape>\n' +
' <bpmndi:BPMNShape id="Event_1h4oob7_di" bpmnElement="N3">\n' +
' <dc:Bounds x="542" y="732" width="36" height="36" />\n' +
' <bpmndi:BPMNLabel>\n' +
' <dc:Bounds x="539" y="775" width="43" height="14" />\n' +
' </bpmndi:BPMNLabel>\n' +
' </bpmndi:BPMNShape>\n' +
' <bpmndi:BPMNShape id="Activity_0g48n8q_di" bpmnElement="N2">\n' +
' <dc:Bounds x="510" y="120" width="100" height="80" />\n' +
' </bpmndi:BPMNShape>\n' +
' <bpmndi:BPMNShape id="Activity_04wpn1b_di" bpmnElement="N4">\n' +
' <dc:Bounds x="510" y="250" width="100" height="80" />\n' +
' </bpmndi:BPMNShape>\n' +
' <bpmndi:BPMNShape id="Activity_0j8meci_di" bpmnElement="N5">\n' +
' <dc:Bounds x="380" y="470" width="100" height="80" />\n' +
' </bpmndi:BPMNShape>\n' +
' <bpmndi:BPMNShape id="Activity_0pa1f64_di" bpmnElement="N6">\n' +
' <dc:Bounds x="640" y="470" width="100" height="80" />\n' +
' </bpmndi:BPMNShape>\n' +
' <bpmndi:BPMNShape id="Activity_0qmb4lo_di" bpmnElement="N7">\n' +
' <dc:Bounds x="510" y="590" width="100" height="80" />\n' +
' </bpmndi:BPMNShape>\n' +
' </bpmndi:BPMNPlane>\n' +
' </bpmndi:BPMNDiagram>\n' +
'</bpmn2:definitions>\n';
//region -----分类弹框逻辑-----
const cateModal = ref();
const openCateModal = () => {
cateModal.value.openModal();
cateModal.value.openModal();
};
const cateChoose = (node: any) => {
if (node == null) {
form.value.cate = null;
} else {
form.value.cate = {id: node.id, name: node.name};
}
if (node == null) {
form.value.cate = null;
} else {
form.value.cate = { id: node.id, name: node.name };
}
};
//endregion
src/pages/oa/flow/tmpl/edit_3.vue
-387
View File
@@ -1,387 +0,0 @@
<template>
<el-card class='box-card' :body-style="{padding:'2px 8px'}" shadow='never'>
<template #header>
<div class='zjustify'>
<div>
<div style='line-height: 32px'>流程模板</div>
</div>
<div>
<el-button type='success' @click='save(state)' plain>保 存</el-button>
<el-button type='info' plain>复 制</el-button>
<el-button type='info' @click='pageClose' plain>关 闭</el-button>
</div>
</div>
</template>
<CateModal url='oa/flow/cate/tree' ref='cateModal' @close='cateChoose' />
<div style='margin-top: 8px;margin-bottom: 8px'>
<el-form ref='formRef' :model='form' label-width='140px'>
<el-tabs type='card' v-model='activeName'>
<el-tab-pane label='基本信息' name='tab1' class='zform'>
<el-row style='border-top: 1px solid #d2d2d2;'>
<el-col :span='12'>
<el-form-item label='模板名称：' prop='name' :rules="[{ required: true, message: '名称不能为空'}]">
<div class='zinput'>
<el-input v-model='form.name'></el-input>
</div>
</el-form-item>
</el-col>
<el-col :span='12'>
<el-form-item label='所属分类：' prop='cate' :rules="[{ required: true, message: '分类不能为空'}]">
<div class='zinput'>
<el-input :value='form.cate?.name' :suffix-icon='Search' :readonly='true' @click='openCateModal'></el-input>
</div>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span='12'>
<el-form-item label='排序号：'>
<div class='zinput'>
<el-input-number v-model='form.ornum' controls-position='right' style='width: 100%' />
</div>
</el-form-item>
</el-col>
<el-col :span='12'>
<el-form-item label='是否可用：'>
<div class='zinput'>
<el-switch v-model='form.avtag'>
</el-switch>
</div>
</el-form-item>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label='审批内容' name='tab2'>
<el-row style='border-top: 1px solid #d2d2d2;'>
<el-col :span='24'>
<v-form-designer ref='vform' />
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label='流程配置' name='tab3'>
<div style='width: 100%;height: 720px'>
<!-- <Modeler2 @bpmnMounted='bpmnMounted' />-->
<Modeler @bpmnMounted='bpmnMounted' />
<Panel />
<BpmnActions />
</div>
</el-tab-pane>
<el-tab-pane label='权限配置' name='tab4' class='zform'>
<el-row style='border-top: 1px solid #d2d2d2;'>
<el-col :span='24'>
<el-form-item label='备注：'>
<div class='zinput' style='height: auto'>
<el-input style="font-family: 'Courier New', Helvetica, Arial, sans-serif; font-size:16px"
type='textarea' :rows='4'
v-model='form.notes'>
</el-input>
</div>
</el-form-item>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label='其他信息' name='tab9' class='zform'>
<el-row style='border-top: 1px solid #d2d2d2;'>
<el-col :span='24'>
<el-form-item label='备注：'>
<div class='zinput' style='height: auto'>
<el-input style="font-family: 'Courier New', Helvetica, Arial, sans-serif; font-size:16px"
type='textarea' :rows='4'
v-model='form.notes'>
</el-input>
</div>
</el-form-item>
</el-col>
</el-row>
<el-row v-show='form.crtim'>
<el-col :span='6'>
<el-form-item label='创建人：'>
<div class='zinput'>{{ form.crman ? form.crman.name : '' }}</div>
</el-form-item>
</el-col>
<el-col :span='6'>
<el-form-item label='创建时间：'>
<div class='zinput'>{{ form.crtim }}</div>
</el-form-item>
</el-col>
<el-col :span='6'>
<el-form-item label='更新人：'>
<div class='zinput'>{{ form.upman ? form.upman.name : '' }}</div>
</el-form-item>
</el-col>
<el-col :span='6'>
<el-form-item label='更新时间：'>
<div class='zinput'>{{ form.uptim }}</div>
</el-form-item>
</el-col>
</el-row>
</el-tab-pane>
</el-tabs>
</el-form>
</div>
</el-card>
</template>
<script lang='ts'>
export default { name: 'OaFlowTmplEdit3' };
</script>
<script lang='ts' setup>
import { onMounted, reactive, ref, toRefs } from 'vue';
import { pageSave, pageClose } from '/@/comps/page/edit';
import { useRoute } from 'vue-router';
import Modeler from '/@/comps/Activiti/Modeler';
import Panel from '/@/comps/Activiti/panel';
import BpmnActions from '/@/comps/Activiti/bpmn-actions';
import { BpmnStore } from '/@/bpmn/store';
import { NextLoading } from '/@/utils/loading';
import CateModal from '/@/comps/gen/GenModal.vue';
import { FormInstance } from 'element-plus';
import request from '/@/utils/request';
const route = useRoute();
const formRef = ref<FormInstance>();
const activeName = ref('tab1');
const state = reactive({
url: '/oa/flow/tmpl',
params: { path: '', query: {} as any},
form: { avtag: true } as any,
});
const { form } = toRefs(state);
onMounted(async () => {
NextLoading.done();
state.params = <any>route;
let id = state.params.query?.id;
if (id) {
state.form = await request({
url: state.url + '/one/' + id,
method: 'get',
});
} else {
let catid = state.params.query?.catid;
if (catid) {
state.form.cate = { id: catid, name: state.params.query?.catna };
}
state.form.avtag = true;
}
if (form.value.id) {
await BpmnStore.importXML(form.value.prxml);
} else {
await BpmnStore.importXML(defxml);
}
});
async function save(state: any) {
const bpmn = await BpmnStore.getXML();
// console.log(typeof (bpmn.xml));
// xFlow.value.getData();
form.value.vform = JSON.stringify(vform.value.getFormJson());
form.value.prxml = bpmn.xml;
console.log(bpmn.xml);
await pageSave({formRef:formRef.value, state});
}
const vform = ref();
const defxml = '<?xml version="1.0" encoding="UTF-8"?>\n' +
'<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:activiti="http://activiti.org/bpmn" id="sample-diagram" targetNamespace="http://activiti.org/bpmn" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">\n' +
' <bpmn2:process id="Process_1" name="1" isExecutable="true">\n' +
' <bpmn2:startEvent id="N1" name="开始节点">\n' +
' <bpmn2:outgoing>L1</bpmn2:outgoing>\n' +
' </bpmn2:startEvent>\n' +
' <bpmn2:sequenceFlow id="L1" sourceRef="N1" targetRef="N2" />\n' +
' <bpmn2:exclusiveGateway id="N9" name="条件分支">\n' +
' <bpmn2:documentation>判断审批金额是否大于100</bpmn2:documentation>\n' +
' <bpmn2:incoming>L4</bpmn2:incoming>\n' +
' <bpmn2:outgoing>L6</bpmn2:outgoing>\n' +
' <bpmn2:outgoing>L5</bpmn2:outgoing>\n' +
' </bpmn2:exclusiveGateway>\n' +
' <bpmn2:sequenceFlow id="L4" sourceRef="N4" targetRef="N9" />\n' +
' <bpmn2:sequenceFlow id="L6" name="王五分支线" sourceRef="N9" targetRef="N6">\n' +
' <bpmn2:extensionElements>\n' +
' <activiti:executionListener expression="money&#60;=100" event="take" />\n' +
' </bpmn2:extensionElements>\n' +
' </bpmn2:sequenceFlow>\n' +
' <bpmn2:sequenceFlow id="L5" name="李四分支线" sourceRef="N9" targetRef="N5">\n' +
' <bpmn2:extensionElements>\n' +
' <activiti:executionListener expression="money&#62;100" event="take" />\n' +
' </bpmn2:extensionElements>\n' +
' </bpmn2:sequenceFlow>\n' +
' <bpmn2:sequenceFlow id="L7" sourceRef="N5" targetRef="N7" />\n' +
' <bpmn2:sequenceFlow id="L8" sourceRef="N6" targetRef="N7" />\n' +
' <bpmn2:endEvent id="N3" name="结束节点">\n' +
' <bpmn2:incoming>L2</bpmn2:incoming>\n' +
' </bpmn2:endEvent>\n' +
' <bpmn2:sequenceFlow id="L2" sourceRef="N7" targetRef="N3" />\n' +
' <bpmn2:sequenceFlow id="L3" sourceRef="N2" targetRef="N4" />\n' +
' <bpmn2:userTask id="N2" name="起草节点" activiti:assignee="z3" activiti:candidateUsers="">\n' +
' <bpmn2:documentation>起草节点，表单数据一般从绑定的表单提取</bpmn2:documentation>\n' +
' <bpmn2:extensionElements>\n' +
' <activiti:formProperty id="userid" type="string" />\n' +
' <activiti:formProperty id="money" type="int" />\n' +
' <activiti:properties>\n' +
' <activiti:property name="编辑" value="edit" />\n' +
' <activiti:property name="撤回" value="back" />\n' +
' <activiti:property name="提交" value="commit" />\n' +
' </activiti:properties>\n' +
' </bpmn2:extensionElements>\n' +
' <bpmn2:incoming>L1</bpmn2:incoming>\n' +
' <bpmn2:outgoing>L3</bpmn2:outgoing>\n' +
' </bpmn2:userTask>\n' +
' <bpmn2:userTask id="N4" name="张三审批" activiti:assignee="z3" activiti:candidateUsers="">\n' +
' <bpmn2:documentation>审批节点</bpmn2:documentation>\n' +
' <bpmn2:extensionElements>\n' +
' <activiti:properties>\n' +
' <activiti:property name="审批" value="approve" />\n' +
' <activiti:property name="驳回" value="reject" />\n' +
' </activiti:properties>\n' +
' </bpmn2:extensionElements>\n' +
' <bpmn2:incoming>L3</bpmn2:incoming>\n' +
' <bpmn2:outgoing>L4</bpmn2:outgoing>\n' +
' </bpmn2:userTask>\n' +
' <bpmn2:userTask id="N5" name="李四审批" activiti:assignee="l4" activiti:candidateUsers="">\n' +
' <bpmn2:extensionElements>\n' +
' <activiti:properties>\n' +
' <activiti:property name="审批" value="approve" />\n' +
' <activiti:property name="驳回" value="reject" />\n' +
' </activiti:properties>\n' +
' </bpmn2:extensionElements>\n' +
' <bpmn2:incoming>L5</bpmn2:incoming>\n' +
' <bpmn2:outgoing>L7</bpmn2:outgoing>\n' +
' </bpmn2:userTask>\n' +
' <bpmn2:userTask id="N6" name="王五审批" activiti:assignee="w5" activiti:candidateUsers="">\n' +
' <bpmn2:extensionElements>\n' +
' <activiti:properties>\n' +
' <activiti:property name="审批" value="approve" />\n' +
' <activiti:property name="驳回" value="reject" />\n' +
' </activiti:properties>\n' +
' </bpmn2:extensionElements>\n' +
' <bpmn2:incoming>L6</bpmn2:incoming>\n' +
' <bpmn2:outgoing>L8</bpmn2:outgoing>\n' +
' </bpmn2:userTask>\n' +
' <bpmn2:userTask id="N7" name="赵六审批" activiti:assignee="z6" activiti:candidateUsers="">\n' +
' <bpmn2:extensionElements>\n' +
' <activiti:formProperty id="userid" type="string" />\n' +
' <activiti:taskListener class="do some thing" event="complete" />\n' +
' <activiti:properties>\n' +
' <activiti:property name="审批" value="approve" />\n' +
' </activiti:properties>\n' +
' </bpmn2:extensionElements>\n' +
' <bpmn2:incoming>L7</bpmn2:incoming>\n' +
' <bpmn2:incoming>L8</bpmn2:incoming>\n' +
' <bpmn2:outgoing>L2</bpmn2:outgoing>\n' +
' </bpmn2:userTask>\n' +
' </bpmn2:process>\n' +
' <bpmndi:BPMNDiagram id="BPMNDiagram_1">\n' +
' <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">\n' +
' <bpmndi:BPMNEdge id="Flow_0uh8wmt_di" bpmnElement="L3">\n' +
' <di:waypoint x="560" y="200" />\n' +
' <di:waypoint x="560" y="250" />\n' +
' </bpmndi:BPMNEdge>\n' +
' <bpmndi:BPMNEdge id="Flow_01hb865_di" bpmnElement="L2">\n' +
' <di:waypoint x="560" y="670" />\n' +
' <di:waypoint x="560" y="732" />\n' +
' </bpmndi:BPMNEdge>\n' +
' <bpmndi:BPMNEdge id="Flow_1t81399_di" bpmnElement="L8">\n' +
' <di:waypoint x="690" y="550" />\n' +
' <di:waypoint x="690" y="630" />\n' +
' <di:waypoint x="610" y="630" />\n' +
' </bpmndi:BPMNEdge>\n' +
' <bpmndi:BPMNEdge id="Flow_00vdr2t_di" bpmnElement="L7">\n' +
' <di:waypoint x="430" y="550" />\n' +
' <di:waypoint x="430" y="630" />\n' +
' <di:waypoint x="510" y="630" />\n' +
' </bpmndi:BPMNEdge>\n' +
' <bpmndi:BPMNEdge id="Flow_1bnjbaa_di" bpmnElement="L5">\n' +
' <di:waypoint x="535" y="400" />\n' +
' <di:waypoint x="430" y="400" />\n' +
' <di:waypoint x="430" y="470" />\n' +
' <bpmndi:BPMNLabel>\n' +
' <dc:Bounds x="456" y="382" width="55" height="14" />\n' +
' </bpmndi:BPMNLabel>\n' +
' </bpmndi:BPMNEdge>\n' +
' <bpmndi:BPMNEdge id="Flow_12ug1tp_di" bpmnElement="L6">\n' +
' <di:waypoint x="585" y="400" />\n' +
' <di:waypoint x="690" y="400" />\n' +
' <di:waypoint x="690" y="470" />\n' +
' <bpmndi:BPMNLabel>\n' +
' <dc:Bounds x="611" y="382" width="56" height="14" />\n' +
' </bpmndi:BPMNLabel>\n' +
' </bpmndi:BPMNEdge>\n' +
' <bpmndi:BPMNEdge id="Flow_1miguqf_di" bpmnElement="L4">\n' +
' <di:waypoint x="560" y="330" />\n' +
' <di:waypoint x="560" y="375" />\n' +
' </bpmndi:BPMNEdge>\n' +
' <bpmndi:BPMNEdge id="Flow_1u6pmzo_di" bpmnElement="L1">\n' +
' <di:waypoint x="560" y="68" />\n' +
' <di:waypoint x="560" y="120" />\n' +
' </bpmndi:BPMNEdge>\n' +
' <bpmndi:BPMNShape id="Event_0byql27_di" bpmnElement="N1">\n' +
' <dc:Bounds x="542" y="32" width="36" height="36" />\n' +
' <bpmndi:BPMNLabel>\n' +
' <dc:Bounds x="539" y="2" width="43" height="14" />\n' +
' </bpmndi:BPMNLabel>\n' +
' </bpmndi:BPMNShape>\n' +
' <bpmndi:BPMNShape id="Gateway_0qd58o6_di" bpmnElement="N9" isMarkerVisible="true">\n' +
' <dc:Bounds x="535" y="375" width="50" height="50" />\n' +
' <bpmndi:BPMNLabel>\n' +
' <dc:Bounds x="538" y="432" width="44" height="14" />\n' +
' </bpmndi:BPMNLabel>\n' +
' </bpmndi:BPMNShape>\n' +
' <bpmndi:BPMNShape id="Event_1h4oob7_di" bpmnElement="N3">\n' +
' <dc:Bounds x="542" y="732" width="36" height="36" />\n' +
' <bpmndi:BPMNLabel>\n' +
' <dc:Bounds x="539" y="775" width="43" height="14" />\n' +
' </bpmndi:BPMNLabel>\n' +
' </bpmndi:BPMNShape>\n' +
' <bpmndi:BPMNShape id="Activity_0g48n8q_di" bpmnElement="N2">\n' +
' <dc:Bounds x="510" y="120" width="100" height="80" />\n' +
' </bpmndi:BPMNShape>\n' +
' <bpmndi:BPMNShape id="Activity_04wpn1b_di" bpmnElement="N4">\n' +
' <dc:Bounds x="510" y="250" width="100" height="80" />\n' +
' </bpmndi:BPMNShape>\n' +
' <bpmndi:BPMNShape id="Activity_0j8meci_di" bpmnElement="N5">\n' +
' <dc:Bounds x="380" y="470" width="100" height="80" />\n' +
' </bpmndi:BPMNShape>\n' +
' <bpmndi:BPMNShape id="Activity_0pa1f64_di" bpmnElement="N6">\n' +
' <dc:Bounds x="640" y="470" width="100" height="80" />\n' +
' </bpmndi:BPMNShape>\n' +
' <bpmndi:BPMNShape id="Activity_0qmb4lo_di" bpmnElement="N7">\n' +
' <dc:Bounds x="510" y="590" width="100" height="80" />\n' +
' </bpmndi:BPMNShape>\n' +
' </bpmndi:BPMNPlane>\n' +
' </bpmndi:BPMNDiagram>\n' +
'</bpmn2:definitions>\n';
//region -----分类弹框逻辑-----
const cateModal = ref();
const openCateModal = () => {
cateModal.value.openModal();
};
const cateChoose = (node: any) => {
if (node == null) {
form.value.cate = null;
} else {
form.value.cate = { id: node.id, name: node.name };
}
};
//endregion
</script>
<style scoped>
</style>
src/pages/oa/flow/tmpl/edit_new_back.vue → src/pages/oa/flow/tmpl/edit_new.vue
+42 -89
View File
@@ -17,100 +17,53 @@
<div style='margin-top: 8px;margin-bottom: 8px'>
<el-form ref='formRef' :model='form' label-width='140px'>
<el-tabs type='card' v-model='activeName'>
<el-tab-pane label='基本信息' name='tab1' class='zform'>
<el-row style='border-top: 1px solid #d2d2d2;'>
<el-col :span='12'>
<el-form-item label='模板名称：' prop='name' :rules="[{ required: true, message: '名称不能为空'}]">
<div class='zinput'>
<el-input v-model='form.name'></el-input>
</div>
</el-form-item>
</el-col>
<el-col :span='12'>
<el-form-item label='所属分类：' prop='cate' :rules="[{ required: true, message: '分类不能为空'}]">
<div class='zinput'>
<el-input :value='form.cate?.name' :suffix-icon='Search' :readonly='true' @click='openCateModal'></el-input>
</div>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span='12'>
<el-form-item label='排序号：'>
<div class='zinput'>
<el-input-number v-model='form.ornum' controls-position='right' style='width: 100%' />
</div>
</el-form-item>
</el-col>
<el-col :span='12'>
<el-form-item label='是否可用：'>
<div class='zinput'>
<el-switch v-model='form.avtag'>
</el-switch>
</div>
</el-form-item>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label='流程配置' name='tab3'>
<div style='width: 100%;height: 720px'>
<MyBpmn/>
<el-tab-pane label='基本信息' name='tab1' class='zform el-form--inline'>
<div class="zform-div">
<el-form-item label='模板名称：' prop='name' :rules="[{ required: true, message: '名称不能为空'}]">
<el-input v-model='form.name'></el-input>
</el-form-item>
<el-form-item label='所属分类：' prop='cate' :rules="[{ required: true, message: '分类不能为空'}]">
<el-input :value='form.cate?.name' :suffix-icon='Search' :readonly='true' @click='openCateModal'></el-input>
</el-form-item>
<el-form-item label='排序号：'>
<el-input-number v-model='form.ornum' controls-position='right' style='width: 100%'/>
</el-form-item>
<el-form-item label='是否可用：'>
<el-switch v-model='form.avtag'>
</el-switch>
</el-form-item>
</div>
</el-tab-pane>
<el-tab-pane label='权限配置' name='tab4' class='zform'>
<el-row style='border-top: 1px solid #d2d2d2;'>
<el-col :span='24'>
<el-form-item label='备注：'>
<div class='zinput' style='height: auto'>
<el-input style="font-family: 'Courier New', Helvetica, Arial, sans-serif; font-size:16px"
type='textarea' :rows='4'
v-model='form.notes'>
</el-input>
</div>
</el-form-item>
</el-col>
</el-row>
<el-tab-pane label='流程配置' name='tab3'>
<div style='width: 100%;height: 720px'>
<BpmTmplEdit/>
</div>
</el-tab-pane>
<el-tab-pane label='其他信息' name='tab9' class='zform'>
<el-row style='border-top: 1px solid #d2d2d2;'>
<el-col :span='24'>
<el-form-item label='备注：'>
<div class='zinput' style='height: auto'>
<el-input style="font-family: 'Courier New', Helvetica, Arial, sans-serif; font-size:16px"
type='textarea' :rows='4'
v-model='form.notes'>
</el-input>
</div>
</el-form-item>
</el-col>
</el-row>
<el-row v-show='form.crtim'>
<el-col :span='6'>
<el-form-item label='创建人：'>
<div class='zinput'>{{ form.crman ? form.crman.name : '' }}</div>
</el-form-item>
</el-col>
<el-col :span='6'>
<el-form-item label='创建时间：'>
<div class='zinput'>{{ form.crtim }}</div>
</el-form-item>
</el-col>
<el-col :span='6'>
<el-form-item label='更新人：'>
<div class='zinput'>{{ form.upman ? form.upman.name : '' }}</div>
</el-form-item>
</el-col>
<el-col :span='6'>
<el-form-item label='更新时间：'>
<div class='zinput'>{{ form.uptim }}</div>
</el-form-item>
</el-col>
</el-row>
<el-tab-pane label='其他信息' name='tab9' class='zform el-form--inline'>
<div class="zform-div">
<el-form-item label='备注：' style="width: 100%">
<el-input style="font-family: 'Courier New', Helvetica, Arial, sans-serif; font-size:16px"
type='textarea' :rows='4' v-model='form.notes'>
</el-input>
</el-form-item>
<el-form-item label='创建人：' style="width: 25%">
<div class='zinput'> {{ form.crman ? form.crman.name : '' }}</div>
</el-form-item>
<el-form-item label='创建时间：' style="width: 25%">
<div class='zinput'> {{ form.crtim }}</div>
</el-form-item>
<el-form-item label='更新人：' style="width: 25%">
<div class='zinput'> {{ form.upman ? form.upman.name : '' }}</div>
</el-form-item>
<el-form-item label='更新时间：' style="width: 25%">
<div class='zinput'> {{ form.uptim }}</div>
</el-form-item>
</div>
</el-tab-pane>
</el-tabs>
</el-form>
</div>
@@ -124,8 +77,8 @@ import { onMounted, reactive, ref, toRefs } from 'vue';
import { pageSave, pageClose } from '/@/comps/page/edit';
import { useRoute } from 'vue-router';
import { NextLoading } from '/@/utils/loading';
import CateModal from '/@/comps/gen/GenModal.vue';
import MyBpmn from '/@/comps/bpmn/MyBpmn.vue';
import CateModal from '/@/comps/gen/GenTreeModal.vue';
import BpmTmplEdit from '/@/comps/bpm/tmpl/edit';
import { FormInstance } from 'element-plus';
import request from '/@/utils/request';
src/pages/oa/flow/tmpl/edit_old.vue
+374
View File
@@ -0,0 +1,374 @@
<template>
<el-card class='box-card' :body-style="{padding:'2px 8px'}" shadow='never'>
<template #header>
<div class='zjustify'>
<div>
<div style='line-height: 32px'>流程模板</div>
</div>
<div>
<el-button type='success' @click='save(state)' plain>保 存</el-button>
<el-button type='info' plain>复 制</el-button>
<el-button type='info' @click='pageClose' plain>关 闭</el-button>
</div>
</div>
</template>
<CateModal url='oa/flow/cate/tree' ref='cateModal' @close='cateChoose'/>
<div style='margin-top: 8px;margin-bottom: 8px'>
<el-form ref='formRef' :model='form' label-width='140px'>
<el-tabs type='card' v-model='activeName'>
<el-tab-pane label='基本信息' name='tab1' class='zform el-form--inline'>
<div class="zform-div">
<el-form-item label='模板名称：' prop='name' :rules="[{ required: true, message: '名称不能为空'}]">
<el-input v-model='form.name'></el-input>
</el-form-item>
<el-form-item label='所属分类：' prop='cate' :rules="[{ required: true, message: '分类不能为空'}]">
<el-input :value='form.cate?.name' :suffix-icon='Search' :readonly='true' @click='openCateModal'></el-input>
</el-form-item>
<el-form-item label='排序号：'>
<el-input-number v-model='form.ornum' controls-position='right' style='width: 100%'/>
</el-form-item>
<el-form-item label='是否可用：'>
<el-switch v-model='form.avtag'>
</el-switch>
</el-form-item>
</div>
</el-tab-pane>
<el-tab-pane label='表单配置' name='tab2'>
<el-row style='border-top: 1px solid #d2d2d2;'>
<el-col :span='24'>
<v-form-designer v-if='state.vformShow' ref='vFormRef'/>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label='流程配置' name='tab3'>
<div style='width: 100%;height: 720px'>
<!-- <Modeler2 @bpmnMounted='bpmnMounted' />-->
<Modeler @bpmnMounted='bpmnMounted'/>
<Panel/>
<BpmnActions/>
</div>
</el-tab-pane>
<el-tab-pane label='权限配置' name='tab4' class='zform el-form--inline'>
<div class="zform-div">
<el-form-item label='备注：' style="width: 100%;">
<el-input style="font-family: 'Courier New', Helvetica, Arial, sans-serif; font-size:16px"
type='textarea' :rows='4'
v-model='form.notes'>
</el-input>
</el-form-item>
</div>
</el-tab-pane>
<el-tab-pane label='其他信息' name='tab9' class='zform el-form--inline'>
<div class="zform-div">
<el-form-item label='备注：' style="width: 100%">
<el-input style="font-family: 'Courier New', Helvetica, Arial, sans-serif; font-size:16px"
type='textarea' :rows='4' v-model='form.notes'>
</el-input>
</el-form-item>
<el-form-item label='创建人：' style="width: 25%">
<div class='zinput'> {{ form.crman ? form.crman.name : '' }}</div>
</el-form-item>
<el-form-item label='创建时间：' style="width: 25%">
<div class='zinput'> {{ form.crtim }}</div>
</el-form-item>
<el-form-item label='更新人：' style="width: 25%">
<div class='zinput'> {{ form.upman ? form.upman.name : '' }}</div>
</el-form-item>
<el-form-item label='更新时间：' style="width: 25%">
<div class='zinput'> {{ form.uptim }}</div>
</el-form-item>
</div>
</el-tab-pane>
</el-tabs>
</el-form>
</div>
</el-card>
</template>
<script lang='ts'>
export default {name: 'OaFlowTmplEdit'};
</script>
<script lang='ts' setup>
import {onMounted, reactive, ref, toRefs} from 'vue';
import {pageSave, pageClose} from '/@/comps/page/edit';
import {useRoute} from 'vue-router';
import Modeler from '/@/comps/Activiti/Modeler';
import Panel from '/@/comps/Activiti/panel';
import BpmnActions from '/@/comps/Activiti/bpmn-actions';
import {BpmnStore} from '/@/bpmn/store';
import {NextLoading} from '/@/utils/loading';
import CateModal from '/@/comps/gen/GenTreeModal.vue';
import {FormInstance} from 'element-plus';
import request from '/@/utils/request';
const route = useRoute();
const formRef = ref<FormInstance>();
const activeName = ref('tab1');
const state = reactive({
url: '/oa/flow/tmpl',
params: {path: '', query: {} as any},
form: {avtag: true} as any,
vformShow: true
});
const {form} = toRefs(state);
const vFormRef = ref(null) as any;
onMounted(async () => {
NextLoading.done();
state.params = <any>route;
let id = state.params.query?.id;
if (id) {
state.form = await request({
url: state.url + '/one/' + id,
method: 'get',
});
vFormRef.value.setFormJson(JSON.parse(state.form.vform));
// state.vformShow=true;
// console.log(vFormRef.value);
// console.log(state.form.vform);
} else {
let catid = state.params.query?.catid;
if (catid) {
state.form.cate = {id: catid, name: state.params.query?.catna};
}
state.form.avtag = true;
vFormRef.value.setFormJson({
"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": ""
}
});
}
if (form.value.id) {
await BpmnStore.importXML(form.value.prxml);
} else {
await BpmnStore.importXML(defxml);
}
});
async function save(state: any) {
const bpmn = await BpmnStore.getXML();
// console.log(typeof (bpmn.xml));
// xFlow.value.getData();
form.value.vform = JSON.stringify(vFormRef.value.getFormJson());
form.value.prxml = bpmn.xml;
console.log(bpmn.xml);
await pageSave({formRef: formRef.value, state});
}
const defxml = '<?xml version="1.0" encoding="UTF-8"?>\n' +
'<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:activiti="http://activiti.org/bpmn" id="sample-diagram" targetNamespace="http://activiti.org/bpmn" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">\n' +
' <bpmn2:process id="Process_1" name="1" isExecutable="true">\n' +
' <bpmn2:startEvent id="N1" name="开始节点">\n' +
' <bpmn2:outgoing>L1</bpmn2:outgoing>\n' +
' </bpmn2:startEvent>\n' +
' <bpmn2:sequenceFlow id="L1" sourceRef="N1" targetRef="N2" />\n' +
' <bpmn2:exclusiveGateway id="N9" name="条件分支">\n' +
' <bpmn2:documentation>判断审批金额是否大于100</bpmn2:documentation>\n' +
' <bpmn2:incoming>L4</bpmn2:incoming>\n' +
' <bpmn2:outgoing>L6</bpmn2:outgoing>\n' +
' <bpmn2:outgoing>L5</bpmn2:outgoing>\n' +
' </bpmn2:exclusiveGateway>\n' +
' <bpmn2:sequenceFlow id="L4" sourceRef="N4" targetRef="N9" />\n' +
' <bpmn2:sequenceFlow id="L6" name="王五分支线" sourceRef="N9" targetRef="N6">\n' +
' <bpmn2:extensionElements>\n' +
' <activiti:executionListener expression="money&#60;=100" event="take" />\n' +
' </bpmn2:extensionElements>\n' +
' </bpmn2:sequenceFlow>\n' +
' <bpmn2:sequenceFlow id="L5" name="李四分支线" sourceRef="N9" targetRef="N5">\n' +
' <bpmn2:extensionElements>\n' +
' <activiti:executionListener expression="money&#62;100" event="take" />\n' +
' </bpmn2:extensionElements>\n' +
' </bpmn2:sequenceFlow>\n' +
' <bpmn2:sequenceFlow id="L7" sourceRef="N5" targetRef="N7" />\n' +
' <bpmn2:sequenceFlow id="L8" sourceRef="N6" targetRef="N7" />\n' +
' <bpmn2:endEvent id="N3" name="结束节点">\n' +
' <bpmn2:incoming>L2</bpmn2:incoming>\n' +
' </bpmn2:endEvent>\n' +
' <bpmn2:sequenceFlow id="L2" sourceRef="N7" targetRef="N3" />\n' +
' <bpmn2:sequenceFlow id="L3" sourceRef="N2" targetRef="N4" />\n' +
' <bpmn2:userTask id="N2" name="起草节点" activiti:assignee="z3" activiti:candidateUsers="">\n' +
' <bpmn2:documentation>起草节点，表单数据一般从绑定的表单提取</bpmn2:documentation>\n' +
' <bpmn2:extensionElements>\n' +
' <activiti:formProperty id="userid" type="string" />\n' +
' <activiti:formProperty id="money" type="int" />\n' +
' <activiti:properties>\n' +
' <activiti:property name="编辑" value="edit" />\n' +
' <activiti:property name="撤回" value="back" />\n' +
' <activiti:property name="提交" value="commit" />\n' +
' </activiti:properties>\n' +
' </bpmn2:extensionElements>\n' +
' <bpmn2:incoming>L1</bpmn2:incoming>\n' +
' <bpmn2:outgoing>L3</bpmn2:outgoing>\n' +
' </bpmn2:userTask>\n' +
' <bpmn2:userTask id="N4" name="张三审批" activiti:assignee="z3" activiti:candidateUsers="">\n' +
' <bpmn2:documentation>审批节点</bpmn2:documentation>\n' +
' <bpmn2:extensionElements>\n' +
' <activiti:properties>\n' +
' <activiti:property name="审批" value="approve" />\n' +
' <activiti:property name="驳回" value="reject" />\n' +
' </activiti:properties>\n' +
' </bpmn2:extensionElements>\n' +
' <bpmn2:incoming>L3</bpmn2:incoming>\n' +
' <bpmn2:outgoing>L4</bpmn2:outgoing>\n' +
' </bpmn2:userTask>\n' +
' <bpmn2:userTask id="N5" name="李四审批" activiti:assignee="l4" activiti:candidateUsers="">\n' +
' <bpmn2:extensionElements>\n' +
' <activiti:properties>\n' +
' <activiti:property name="审批" value="approve" />\n' +
' <activiti:property name="驳回" value="reject" />\n' +
' </activiti:properties>\n' +
' </bpmn2:extensionElements>\n' +
' <bpmn2:incoming>L5</bpmn2:incoming>\n' +
' <bpmn2:outgoing>L7</bpmn2:outgoing>\n' +
' </bpmn2:userTask>\n' +
' <bpmn2:userTask id="N6" name="王五审批" activiti:assignee="w5" activiti:candidateUsers="">\n' +
' <bpmn2:extensionElements>\n' +
' <activiti:properties>\n' +
' <activiti:property name="审批" value="approve" />\n' +
' <activiti:property name="驳回" value="reject" />\n' +
' </activiti:properties>\n' +
' </bpmn2:extensionElements>\n' +
' <bpmn2:incoming>L6</bpmn2:incoming>\n' +
' <bpmn2:outgoing>L8</bpmn2:outgoing>\n' +
' </bpmn2:userTask>\n' +
' <bpmn2:userTask id="N7" name="赵六审批" activiti:assignee="z6" activiti:candidateUsers="">\n' +
' <bpmn2:extensionElements>\n' +
' <activiti:formProperty id="userid" type="string" />\n' +
' <activiti:taskListener class="do some thing" event="complete" />\n' +
' <activiti:properties>\n' +
' <activiti:property name="审批" value="approve" />\n' +
' </activiti:properties>\n' +
' </bpmn2:extensionElements>\n' +
' <bpmn2:incoming>L7</bpmn2:incoming>\n' +
' <bpmn2:incoming>L8</bpmn2:incoming>\n' +
' <bpmn2:outgoing>L2</bpmn2:outgoing>\n' +
' </bpmn2:userTask>\n' +
' </bpmn2:process>\n' +
' <bpmndi:BPMNDiagram id="BPMNDiagram_1">\n' +
' <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">\n' +
' <bpmndi:BPMNEdge id="Flow_0uh8wmt_di" bpmnElement="L3">\n' +
' <di:waypoint x="560" y="200" />\n' +
' <di:waypoint x="560" y="250" />\n' +
' </bpmndi:BPMNEdge>\n' +
' <bpmndi:BPMNEdge id="Flow_01hb865_di" bpmnElement="L2">\n' +
' <di:waypoint x="560" y="670" />\n' +
' <di:waypoint x="560" y="732" />\n' +
' </bpmndi:BPMNEdge>\n' +
' <bpmndi:BPMNEdge id="Flow_1t81399_di" bpmnElement="L8">\n' +
' <di:waypoint x="690" y="550" />\n' +
' <di:waypoint x="690" y="630" />\n' +
' <di:waypoint x="610" y="630" />\n' +
' </bpmndi:BPMNEdge>\n' +
' <bpmndi:BPMNEdge id="Flow_00vdr2t_di" bpmnElement="L7">\n' +
' <di:waypoint x="430" y="550" />\n' +
' <di:waypoint x="430" y="630" />\n' +
' <di:waypoint x="510" y="630" />\n' +
' </bpmndi:BPMNEdge>\n' +
' <bpmndi:BPMNEdge id="Flow_1bnjbaa_di" bpmnElement="L5">\n' +
' <di:waypoint x="535" y="400" />\n' +
' <di:waypoint x="430" y="400" />\n' +
' <di:waypoint x="430" y="470" />\n' +
' <bpmndi:BPMNLabel>\n' +
' <dc:Bounds x="456" y="382" width="55" height="14" />\n' +
' </bpmndi:BPMNLabel>\n' +
' </bpmndi:BPMNEdge>\n' +
' <bpmndi:BPMNEdge id="Flow_12ug1tp_di" bpmnElement="L6">\n' +
' <di:waypoint x="585" y="400" />\n' +
' <di:waypoint x="690" y="400" />\n' +
' <di:waypoint x="690" y="470" />\n' +
' <bpmndi:BPMNLabel>\n' +
' <dc:Bounds x="611" y="382" width="56" height="14" />\n' +
' </bpmndi:BPMNLabel>\n' +
' </bpmndi:BPMNEdge>\n' +
' <bpmndi:BPMNEdge id="Flow_1miguqf_di" bpmnElement="L4">\n' +
' <di:waypoint x="560" y="330" />\n' +
' <di:waypoint x="560" y="375" />\n' +
' </bpmndi:BPMNEdge>\n' +
' <bpmndi:BPMNEdge id="Flow_1u6pmzo_di" bpmnElement="L1">\n' +
' <di:waypoint x="560" y="68" />\n' +
' <di:waypoint x="560" y="120" />\n' +
' </bpmndi:BPMNEdge>\n' +
' <bpmndi:BPMNShape id="Event_0byql27_di" bpmnElement="N1">\n' +
' <dc:Bounds x="542" y="32" width="36" height="36" />\n' +
' <bpmndi:BPMNLabel>\n' +
' <dc:Bounds x="539" y="2" width="43" height="14" />\n' +
' </bpmndi:BPMNLabel>\n' +
' </bpmndi:BPMNShape>\n' +
' <bpmndi:BPMNShape id="Gateway_0qd58o6_di" bpmnElement="N9" isMarkerVisible="true">\n' +
' <dc:Bounds x="535" y="375" width="50" height="50" />\n' +
' <bpmndi:BPMNLabel>\n' +
' <dc:Bounds x="538" y="432" width="44" height="14" />\n' +
' </bpmndi:BPMNLabel>\n' +
' </bpmndi:BPMNShape>\n' +
' <bpmndi:BPMNShape id="Event_1h4oob7_di" bpmnElement="N3">\n' +
' <dc:Bounds x="542" y="732" width="36" height="36" />\n' +
' <bpmndi:BPMNLabel>\n' +
' <dc:Bounds x="539" y="775" width="43" height="14" />\n' +
' </bpmndi:BPMNLabel>\n' +
' </bpmndi:BPMNShape>\n' +
' <bpmndi:BPMNShape id="Activity_0g48n8q_di" bpmnElement="N2">\n' +
' <dc:Bounds x="510" y="120" width="100" height="80" />\n' +
' </bpmndi:BPMNShape>\n' +
' <bpmndi:BPMNShape id="Activity_04wpn1b_di" bpmnElement="N4">\n' +
' <dc:Bounds x="510" y="250" width="100" height="80" />\n' +
' </bpmndi:BPMNShape>\n' +
' <bpmndi:BPMNShape id="Activity_0j8meci_di" bpmnElement="N5">\n' +
' <dc:Bounds x="380" y="470" width="100" height="80" />\n' +
' </bpmndi:BPMNShape>\n' +
' <bpmndi:BPMNShape id="Activity_0pa1f64_di" bpmnElement="N6">\n' +
' <dc:Bounds x="640" y="470" width="100" height="80" />\n' +
' </bpmndi:BPMNShape>\n' +
' <bpmndi:BPMNShape id="Activity_0qmb4lo_di" bpmnElement="N7">\n' +
' <dc:Bounds x="510" y="590" width="100" height="80" />\n' +
' </bpmndi:BPMNShape>\n' +
' </bpmndi:BPMNPlane>\n' +
' </bpmndi:BPMNDiagram>\n' +
'</bpmn2:definitions>\n';
//region -----分类弹框逻辑-----
const cateModal = ref();
const openCateModal = () => {
cateModal.value.openModal();
};
const cateChoose = (node: any) => {
if (node == null) {
form.value.cate = null;
} else {
form.value.cate = {id: node.id, name: node.name};
}
};
//endregion
</script>
<style scoped>
</style>
src/pages/oa/flow/tmpl/edit_table.vue
+1 -1
View File
@@ -123,7 +123,7 @@ import { onMounted, reactive, ref, toRefs } from 'vue';
import { pageSave, pageClose } from '/@/comps/page/edit';
import { useRoute } from 'vue-router';
import { NextLoading } from '/@/utils/loading';
import CateModal from '/@/comps/gen/GenModal.vue';
import CateModal from '/@/comps/gen/GenTreeModal.vue';
import MyBpmn from '/@/comps/bpmn/MyBpmn.vue';
import { FormInstance } from 'element-plus';
import request from '/@/utils/request';
src/pages/sys/org/tier/node.vue → src/pages/sys/org/role/node.vue
+10 -6
View File
@@ -14,7 +14,7 @@
<el-button class='more-button' :icon='state.moreParams?ArrowUp:ArrowDown' plain @click='state.moreParams=!state.moreParams' />
</div>
<div>
<el-button type='success' :icon='Plus' @click='drawer.open({pid:state.pid})' plain>新增</el-button>
<el-button type='success' :icon='Plus' @click='drawer.open({pid:state.pid,treid:state.form.treid})' plain>新增</el-button>
<el-button type='danger' :icon='Delete' :disabled='state.multiple' @click='listDelete(state)' plain>删除</el-button>
</div>
</div>
@@ -35,9 +35,9 @@
border stripe @selection-change='listSelect($event,state)'>
<el-table-column type='selection' width='55' align='center' />
<el-table-column label='序号' type='index' width='55' align='center' />
<el-table-column label='层级节点名称' width='180'>
<el-table-column label='角色树节点名称' width='180'>
<template #default='scope'>
<span style='cursor:pointer;color: #3e9ece' @click='drawer.open({id:scope.row.id,pid:state.pid})'>{{ scope.row.name }}</span>
<span style='cursor:pointer;color: #3e9ece' @click='drawer.open({id:scope.row.id,pid:state.pid,treid:state.form.treid})'>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column label='备注' prop='notes' />
@@ -66,18 +66,22 @@ import { listQuery, listDelete, listSelect } from '/@/comps/page/index';
import Wrap from '/@/comps/page/Wrap.vue';
import NodeTree from './node_tree.vue';
import NodeEdit from './node_edit.vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const state = reactive({
url: '/sys/org/tnode', loading: true, ids: [], moreParams: false,
form: {} as any, single: true, multiple: true, list: [], total: 0,
url: '/sys/org/rnode', loading: true, ids: [], moreParams: false,
form: {treid:''} as any, single: true, multiple: true, list: [], total: 0,
});
onMounted(() => {
state.form.treid=route.query?.id
listQuery(state);
});
//region a 左侧层级树点击
//region a 左侧角色树点击
const nodeClick = async (node: any) => {
state.form.pid = node.id;
state.form.pname = node.name;
src/pages/sys/org/role/node_edit.vue
+173
View File
@@ -0,0 +1,173 @@
<template>
<div>
<OrgModal ref='orgModal' @close='closeOrgModal' />
<el-drawer v-model='state.show' size='70%'>
<template #header>
<h4>角色树节点编辑</h4>
</template>
<template #default>
<div style='padding: 20px;'>
<el-form ref='formRef' :model='form' label-width='160px'>
<el-row style='height: 48px'>
<el-col :span='12'>
<el-form-item label='名称：' prop='name' :rules="[{ required: true, message: '名称不能为空'}]">
<el-input v-model='form.name'></el-input>
</el-form-item>
</el-col>
<el-col :span='12'>
<el-form-item label='上一节点：'>
<el-input v-model='form.parna' readonly :suffix-icon='Search' @click='openParentModal'></el-input>
<ParentModal url='/sys/org/rnode/tree' :maInit='true' ref='parentModal' @close='closeParentModal' />
</el-form-item>
</el-col>
</el-row>
<el-row style='height: 48px'>
<el-col :span='12'>
<el-form-item label='节点成员：'>
<el-input v-model='form.memna' @click='openOrgModal' readonly :suffix-icon='Search' />
</el-form-item>
</el-col>
<el-col :span='6'>
<el-form-item label='排序号：'>
<el-input-number v-model='form.ornum' controls-position='right' style='width: 100%' />
</el-form-item>
</el-col>
<el-col :span='6'>
<el-form-item label='是否启用：'>
<el-switch v-model='form.avtag'>
</el-switch>
</el-form-item>
</el-col>
</el-row>
<el-row style='height: 48px' v-show='form.crtim'>
<el-col :span='12'>
<el-form-item label='创建时间：'>
{{ form.crtim }}
</el-form-item>
</el-col>
<el-col :span='12'>
<el-form-item label='更新时间：'>
{{ form.uptim }}
</el-form-item>
</el-col>
</el-row>
<el-row style='height: 48px'>
<el-col :span='24'>
<el-form-item label='备注：'>
<el-input v-model='form.notes' type='textarea' />
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>
<template #footer>
<div style='flex: auto;margin: 20px'>
<el-button type='primary' @click='confirm'>确认</el-button>
<el-button @click='state.show = false'>取消</el-button>
</div>
</template>
</el-drawer>
</div>
</template>
<script lang='ts' setup>
import { onMounted, reactive, ref, toRefs } from 'vue';
import { Search } from '@element-plus/icons-vue';
import { drawerOpen, drawerSave } from '/@/comps/page/edit';
import { FormInstance } from 'element-plus';
import ParentModal from '/@/comps/gen/GenTreeModal.vue';
import OrgModal from '/@/comps/sys/OrgModal.vue';
const formRef = ref<FormInstance>();
const state = reactive({
url: '/sys/org/rnode', show: false,
form: {
avtag: true,
catag: true,
shtag: true,
} as any,
});
const { form } = toRefs(state);
//暴露open方法给父组件调用
const open = async (data: any) => {
if (!data.id) {
if (data.pid) {
state.form = {
avtag: true,
treid: data.treid,
pid: data.pid,
};
state.show = true;
} else {
state.form = {
treid: data.treid,
avtag: true,
};
state.show = true;
}
} else if (data.id) {
await drawerOpen({ state, id: data.id });
if (state.form.member) {
state.form.memid = state.form.member.id;
state.form.memna = state.form.member.name;
}
}
};
defineExpose({ open });
//取得父组件listQuery方法的调用权
const emits = defineEmits(['nodeRefresh']);
const confirm = async () => {
await drawerSave({ formRef: formRef.value, state });
emits('nodeRefresh');
};
//页面初始化
onMounted(() => {
});
//region -----上级节点选择逻辑-----
const parentModal = ref();
const openParentModal = () => {
parentModal.value.openModal({ reload: true, params: { treid: state.form.treid } });
};
const closeParentModal = (node: any) => {
form.value.pid = node.id;
form.value.parna = node.name;
form.value.parent = node;
};
//endregion
//region a 部门选择逻辑
const orgModal = ref();
const openOrgModal = () => {
orgModal.value.openModal({ orgType: 15 });
};
const closeOrgModal = (data: any) => {
if (data.orgs && data.orgs.length > 0) {
form.value.member = { id: data.orgs[0].id, name: data.orgs[0].name };
form.value.memna = data.orgs[0].name;
form.value.memid = data.orgs[0].id;
}
};
//endregion
</script>
<style scoped>
</style>
src/pages/sys/org/tier/node_tree.vue → src/pages/sys/org/role/node_tree.vue
+1 -1
View File
@@ -90,7 +90,7 @@ const handleCommand =async (command: string | number | object) => {
// // 初始化表格数据
const initTreeData = async () => {
state.data = await request({
url: '/sys/org/tnode/tree',
url: '/sys/org/rnode/tree',
method: 'get',
});
src/pages/sys/org/tier/tree.vue → src/pages/sys/org/role/tree.vue
+12 -5
View File
@@ -9,6 +9,7 @@
<el-button class='more-button' :icon='state.moreParams?ArrowUp:ArrowDown' plain @click='state.moreParams=!state.moreParams'/>
</div>
<div>
<el-button type='warning' @click='calc' plain>模拟计算</el-button>
<el-button type='success' :icon='Plus' @click='tabAdd(state.url)' plain>新增</el-button>
<el-button type='danger' :icon='Delete' :disabled='state.multiple' @click='listDelete(state)' plain>删除</el-button>
</div>
@@ -31,7 +32,7 @@
border stripe @selection-change='listSelect($event,state)'>
<el-table-column type='selection' width='55' align='center'/>
<el-table-column label='序号' type='index' width='55' align='center'/>
<el-table-column label='层级树名称' width='160'>
<el-table-column label='角色树名称' width='160'>
<template #default='scope'>
<span style='cursor:pointer;color: #3e9ece' @click='editNode(scope.row.id)'>
{{ scope.row.name }}
@@ -58,28 +59,34 @@
layout='total, sizes, prev, pager, next, jumper'
/>
</el-card>
<CalcModal ref="calcModalRef"/>
</div>
</template>
<script lang='ts' setup>
import {Plus, Delete, ArrowDown, ArrowUp,Edit} from '@element-plus/icons-vue';
import {onMounted, reactive} from 'vue';
import { onMounted, reactive, ref } from 'vue';
import {listQuery, listDelete, tabAdd, tabEdit, listSelect} from '/@/comps/page';
import router from '/@/router';
import CalcModal from './tree_calc.vue';
const state = reactive({
url: '/sys/org/ttree', loading: true, ids: [],
url: '/sys/org/rtree', loading: true, ids: [],
form: {}, single: true, multiple: true, list: [], total: 0,
});
const calcModalRef = ref() as any;
onMounted(() => {
listQuery(state);
});
const editNode=async (id:string)=>{
await router.push({
path: '/sys/org/tnode',
path: '/sys/org/rnode',
query: { id: id },
});
}
const calc=()=>{
calcModalRef.value.open()
}
</script>
src/pages/sys/org/role/tree_calc.vue
+112
View File
@@ -0,0 +1,112 @@
<template>
<el-dialog v-model='state.show' title='角色树模拟计算' draggable width='500px'>
<OrgModal ref='orgModal' @close='closeOrgModal' />
<el-form ref='formRef' :model='form' label-width='120px'>
<el-form-item label='用户：'>
<el-input v-model='cdata.loman' readonly @click='lomanModal' />
</el-form-item>
<el-form-item label='角色树：' prop='treid'>
<el-select v-model='form.treid' placeholder=' ' style='width: 100%' @change='rolesInit'>
<el-option v-for='item in trees' :key='item.id' :label='item.name' :value='item.id' />
</el-select>
</el-form-item>
<el-form-item label='角色：' prop='treid'>
<el-select v-model='form.rolid' placeholder=' ' style='width: 100%'>
<el-option v-for='item in roles' :key='item.id' :label='item.name' :value='item.id' />
</el-select>
</el-form-item>
<el-form-item label='计算结果：' prop='notes'>
<el-input v-model='cdata.reman' readonly></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class='dialog-footer'>
<el-button type='primary' @click='calc'>计 算</el-button>
<el-button @click='state.show = false'>关 闭</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang='ts' setup>
import { computed, defineExpose, reactive, ref, toRaw, toRefs } from 'vue';
import {modalSave} from '/@/comps/page/edit';
import OrgModal from '/@/comps/sys/OrgModal.vue';
import request from '/@/utils/request';
const state = reactive({
url: '/sys/org/rtree', show: false,trees:[] as any,roles:[] as any,
form: {avtag: true} as any,
});
const {form,trees,roles} = toRefs(state);
const formRef = ref();
const open = async () => {
state.show = true;
await treesInit();
};
defineExpose({open});
//region -----组织架构逻辑-----
const orgModal = ref();
const cdata = reactive({}) as any;
const lomanModal = () => {
orgModal.value.openModal({
opener: 'loman',
orgType: 8,
selectMode: 1
});
};
const closeOrgModal = (data: any) => {
if (data.opener == 'loman') {
if (data.orgs && data.orgs.length > 0) {
form.value.loman = {};
form.value.loman = { id: data.orgs[0].id, name: data.orgs[0].name };
form.value.lomid = data.orgs[0].id;
} else {
form.value.loman = null;
form.value.lomid = null;
}
}
};
cdata.loman = computed(() => {
return form.value.loman ? form.value.loman.name : '';
});
cdata.reman = computed(() => {
return form.value.reman ? form.value.reman.name : '';
});
//endregion
const treesInit = async () => {
trees.value = await request({
url: '/sys/org/rtree/tlist',
method: 'get',
});
};
const rolesInit = async () => {
roles.value = await request({
url: '/sys/org/rtree/rlist',
method: 'get',
params:{treid:form.value.treid}
});
};
const calc = async () => {
form.value.reman= await request({
url: '/sys/org/rtree/calc',
method: 'get',
params:{useid:form.value.loman.id,rolid:form.value.rolid}
});
};
</script>
src/pages/sys/org/tier/tree_edit.vue → src/pages/sys/org/role/tree_edit.vue
+4 -4
View File
@@ -3,7 +3,7 @@
<template #header>
<div class='zjustify'>
<div>
<div style='line-height: 32px'>层级树编辑</div>
<div style='line-height: 32px'>角色树编辑</div>
</div>
<div>
<el-button type='success' @click='tabSave({formRef,state,proxy,route})' plain>保 存</el-button>
@@ -16,10 +16,10 @@
<el-tabs type='card' v-model='activeName'>
<el-tab-pane label='基本信息' name='tab1'>
<div class='zform-div'>
<el-form-item label='层级树名称：' prop='name' style='width:100%' :rules="[{ required: true, message: '名称不能为空'}]">
<el-form-item label='角色树名称：' prop='name' style='width:100%' :rules="[{ required: true, message: '名称不能为空'}]">
<el-input v-model='form.name' />
</el-form-item>
<el-form-item label='层级角色：' style='width: 100%'>
<el-form-item label='包含角色：' style='width: 100%'>
<el-table size='small' border :data='form.roles' :row-style="{height: '36px'}" style='width: 100%'>
<el-table-column label='排序号' width='90'>
<template #default='scope'>
@@ -99,7 +99,7 @@ const { proxy } = getCurrentInstance() as any;
const activeName = ref('tab1');
const state = reactive({
url: '/sys/org/ttree', cates: [] as any,
url: '/sys/org/rtree', cates: [] as any,
params: { path: '', query: '' },
form: { avtag: true, roles: [] as any, }
});
src/pages/sys/org/tier/node_edit.vue
-169
View File
@@ -1,169 +0,0 @@
<template>
<el-drawer v-model='state.show' size='70%'>
<template #header>
<h4>层级节点编辑</h4>
</template>
<template #default>
<div style='padding: 20px;'>
<el-form ref='formRef' :model='form' label-width='160px'>
<el-row style='height: 48px'>
<el-col :span='12'>
<el-form-item label='名称：' prop='name' :rules="[{ required: true, message: '名称不能为空'}]">
<el-input v-model='form.name'></el-input>
</el-form-item>
</el-col>
<el-col :span='12'>
<el-form-item label='上一节点：'>
<el-input v-model='form.parna' readonly :suffix-icon='Search' @click='openParentModal'></el-input>
<ParentModal url='/sys/org/tnode/tree' :maInit="true" ref='parentModal' @close='closeParentModal'/>
</el-form-item>
</el-col>
</el-row>
<el-row style='height: 48px'>
<el-col :span='12'>
<el-form-item label='节点成员：'>
<el-input v-model='form.memna' @click='openOrgModal' readonly :suffix-icon='Search'/>
<OrgModal ref='orgModal' @close='closeOrgModal'/>
</el-form-item>
</el-col>
<el-col :span='6'>
<el-form-item label='排序号：'>
<el-input-number v-model='form.ornum' controls-position='right' style='width: 100%'/>
</el-form-item>
</el-col>
<el-col :span='6'>
<el-form-item label='是否启用：'>
<el-switch v-model='form.avtag'>
</el-switch>
</el-form-item>
</el-col>
</el-row>
<el-row style='height: 48px' v-show='form.crtim'>
<el-col :span='12'>
<el-form-item label='创建时间：'>
{{ form.crtim }}
</el-form-item>
</el-col>
<el-col :span='12'>
<el-form-item label='更新时间：'>
{{ form.uptim }}
</el-form-item>
</el-col>
</el-row>
<el-row style='height: 48px'>
<el-col :span='24'>
<el-form-item label='备注：'>
<el-input v-model='form.notes' type='textarea'/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>
<template #footer>
<div style='flex: auto;margin: 20px'>
<el-button type='primary' @click='confirm'>确认</el-button>
<el-button @click='state.show = false'>取消</el-button>
</div>
</template>
</el-drawer>
</template>
<script lang='ts' setup>
import {onMounted, reactive, ref, toRefs} from 'vue';
import {Search} from '@element-plus/icons-vue';
import {drawerOpen, drawerSave} from '/@/comps/page/edit';
import {FormInstance} from "element-plus";
import ParentModal from '/@/comps/gen/GenModal.vue';
import OrgModal from '/@/comps/sys/OrgModal.vue';
const formRef = ref<FormInstance>();
const state = reactive({
url: '/sys/org/tnode', show: false,
form: {
avtag: true,
catag: true,
shtag: true,
} as any,
});
const {form} = toRefs(state);
//暴露open方法给父组件调用
const open = async (data: any) => {
if (!data.id) {
if (data.pid) {
state.form = {
avtag: true,
pid: data.pid,
};
state.show = true;
} else {
state.form = {
avtag: true,
};
state.show = true;
}
} else if (data.id) {
await drawerOpen({state, id:data.id});
if(state.form.member){
state.form.memid=state.form.member.id;
state.form.memna=state.form.member.name;
}
}
};
defineExpose({open});
//取得父组件listQuery方法的调用权
const emits = defineEmits(['nodeRefresh']);
const confirm = async () => {
await drawerSave({formRef:formRef.value, state});
emits('nodeRefresh');
};
//页面初始化
onMounted(() => {
});
//region -----上级节点选择逻辑-----
const parentModal = ref();
const openParentModal = () => {
parentModal.value.openModal({reload:true,params:{treid:state.form.treid}});
};
const closeParentModal = (node: any) => {
form.value.pid = node.id;
form.value.parna = node.name;
form.value.parent = node;
};
//endregion
//region a 部门选择逻辑
const orgModal = ref();
const openOrgModal = () => {
orgModal.value.openModal({orgType: 15});
};
const closeOrgModal = (data: any) => {
if (data.orgs && data.orgs.length > 0) {
form.value.member = {id: data.orgs[0].id, name: data.orgs[0].name};
form.value.memna = data.orgs[0].name;
form.value.memid = data.orgs[0].id;
}
};
//endregion
</script>
<style scoped>
</style>
src/pages/sys/org/user/edit.vue
+45 -8
View File
@@ -20,16 +20,16 @@
<el-form-item label='姓名：' prop='name' :rules="[{ required: true, message: '名称不能为空'}]">
<el-input v-model='form.name' />
</el-form-item>
<el-form-item label='昵称：'>
<el-input v-model='form.ninam' />
</el-form-item>
<el-form-item label='登录名：' prop='usnam' :rules="[{ required: true, message: '登录名不能为空'}]">
<el-input v-model='form.usnam' />
</el-form-item>
<el-form-item label='密码：' prop='pacod' :rules="[{ required: true, message: '密码不能为空'}]">
<el-input type='password' v-model='form.pacod' show-password />
<el-form-item label='密码：' style='width:50%' prop='pacod' :rules="[{ required: !form.id, message: '密码不能为空'}]">
<el-input type='password' v-model='form.pacod' show-password v-if='!form.id'/>
<el-input v-model='state.pacod' v-if='form.id' style='width: 135px;margin-right: 10px'/>
<el-button type='success' @click='randomPassword' v-if='form.id'>随机设置</el-button>
<el-button type='warning' @click='resetPassword' v-if='form.id'>重置密码</el-button>
</el-form-item>
<el-form-item label='所属部门：' prop='depna' :rules="[{ required: true, message: '所属部门不能为空'}]" style='width: 50%'>
<el-form-item label='所属部门：' prop='depna' :rules="[{ required: true, message: '所属部门不能为空'}]" style='width:50%'>
<el-input v-model='form.depna' @click='openOrgModal' readonly :suffix-icon='Search' />
</el-form-item>
<el-form-item label='排序号：'>
@@ -38,7 +38,10 @@
<el-form-item label='是否可用：'>
<el-switch v-model='form.avtag' />
</el-form-item>
<el-form-item label='职务：' style='width: 50%'>
<el-form-item label='昵称：'>
<el-input v-model='form.ninam' />
</el-form-item>
<el-form-item label='职务：'>
<el-input v-model='form.job' />
</el-form-item>
<el-form-item label='手机号：'>
@@ -77,7 +80,8 @@ import { getCurrentInstance, onMounted, reactive, ref, toRefs } from 'vue';
import { editInit, tabSave, tabClose } from '/@/comps/page/edit';
import { useRoute } from 'vue-router';
import OrgModal from '/@/comps/sys/OrgModal.vue';
import { FormInstance } from 'element-plus';
import { ElMessage, FormInstance } from 'element-plus';
import request from '/@/utils/request';
const route = useRoute();
const formRef = ref<FormInstance>();
@@ -124,4 +128,37 @@ const closeOrgModal = (data: any) => {
}
};
//endregion
const randomPassword=()=>{
const amm=['!','@','#','$','%','&','*','(',')','_'];//定义特殊字符数组
let num=Math.floor(Math.random()*1000) as any;//生成0-9随机数
let tmp=Math.floor(Math.random()*10) as any;//生成0-9随机数
let s="";
//生成大写字母
for(let i=0;i<3;i++){
tmp=Math.floor(Math.random()*26);
s=s+String.fromCharCode(65+tmp);
}
s=s+amm[Math.floor(Math.random()*10)];//取特殊字符
s=s+num;
//生成小写字母
for(let i=0;i<3;i++){
tmp=Math.floor(Math.random()*26);
s=s+String.fromCharCode(97+tmp);
}
state.pacod=s;
}
const resetPassword=async ()=>{
if(!state.pacod){
ElMessage.warning("请先填写新密码");
return ;
}
await request({
url: state.url + '/pacod',
method: 'post',
data:{id:state.form.id,pacod:state.pacod}
});
ElMessage.success("重置密码成功");
}
</script>
src/pages/sys/org/user/medit.vue
+39 -3
View File
@@ -13,8 +13,11 @@
<el-form-item label='登录名：' prop='usnam' :rules="[{ required: true, message: '登录名不能为空'}]">
<el-input v-model='form.usnam' />
</el-form-item>
<el-form-item label='密码：' prop='pacod' :rules="[{ required: true, message: '密码不能为空'}]">
<el-input type='password' v-model='form.pacod' show-password />
<el-form-item label='密码：' prop='pacod' :rules="[{ required: !form.id, message: '密码不能为空'}]">
<el-input type='password' v-model='form.pacod' show-password v-if='!form.id'/>
<el-input v-model='state.pacod' v-if='form.id' style='width: 135px;margin-right: 10px'/>
<el-button type='success' @click='randomPassword' v-if='form.id'>随机设置</el-button>
<el-button type='warning' @click='resetPassword' v-if='form.id'>重置密码</el-button>
</el-form-item>
<el-form-item label='所属部门：' prop='depna' :rules="[{ required: true, message: '所属部门不能为空'}]" style='width: 50%'>
<el-input v-model='form.depna' @click='openOrgModal' readonly :suffix-icon='Search' />
@@ -67,9 +70,10 @@ import {defineExpose, reactive, ref, toRefs} from 'vue';
import {modalSave } from '/@/comps/page/edit';
import OrgModal from '/@/comps/sys/OrgModal.vue';
import request from '/@/utils/request';
import { ElMessage } from 'element-plus';
const state = reactive({
url: '/sys/org/user', show: false,
url: '/sys/org/user', show: false,pacod:'',
form: {avtag: true} as any,
});
@@ -138,4 +142,36 @@ const closeOrgModal = (data: any) => {
};
//endregion
const randomPassword=()=>{
const amm=['!','@','#','$','%','&','*','(',')','_'];//定义特殊字符数组
let num=Math.floor(Math.random()*1000) as any;//生成0-9随机数
let tmp=Math.floor(Math.random()*10) as any;//生成0-9随机数
let s="";
//生成大写字母
for(let i=0;i<3;i++){
tmp=Math.floor(Math.random()*26);
s=s+String.fromCharCode(65+tmp);
}
s=s+amm[Math.floor(Math.random()*10)];//取特殊字符
s=s+num;
//生成小写字母
for(let i=0;i<3;i++){
tmp=Math.floor(Math.random()*26);
s=s+String.fromCharCode(97+tmp);
}
state.pacod=s;
}
const resetPassword=async ()=>{
if(!state.pacod){
ElMessage.warning("请先填写新密码");
return ;
}
await request({
url: state.url + '/pacod',
method: 'post',
data:{id:state.form.id,pacod:state.pacod}
});
ElMessage.success("重置密码成功");
}
</script>
src/pages/sys/portal/menu/edit.vue
+1 -1
View File
@@ -85,7 +85,7 @@ import { Search } from '@element-plus/icons-vue';
import { onMounted, reactive, ref, toRefs } from 'vue';
import { drawerOpen, drawerSave } from '/@/comps/page/edit';
import IconSelector from '/@/components/iconSelector/index.vue';
import ParentModal from '/@/comps/gen/GenModal.vue';
import ParentModal from '/@/comps/gen/GenTreeModal.vue';
import { FormInstance } from 'element-plus';
const formRef = ref<FormInstance>();
src/pages/sys/todo/main/index.vue
+3 -2
View File
@@ -9,7 +9,7 @@
</div>
<div>
<!--<el-button type='success' :icon='Plus' @click='tabAdd(state.url)' plain>新增</el-button>-->
<!--<el-button type='danger' :icon='Delete' :disabled='state.multiple' @click='listDelete(state)' plain>删除</el-button>-->
<el-button type='danger' :icon='Delete' :disabled='state.multiple' @click='listDelete(state)' plain>删除</el-button>
</div>
</div>
</template>
@@ -52,7 +52,8 @@ onMounted(() => {
});
const pageView=(link:string)=>{
window.open(import.meta.env.VITE_PUBLIC_PATH+link);
// window.open(import.meta.env.VITE_PUBLIC_PATH+link);
window.open(link);
}
</script>
src/router/sysRoute.ts
+1188 -1017
View File
File diff suppressed because it is too large Load Diff
src/theme/vboot.scss
+8
View File
@@ -242,6 +242,14 @@
margin-right: 0;
}
.xform .el-form-item__content .zinput{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
margin-left: 8px;
min-height: 32px;
}
//去除阴影
.el-card.is-always-shadow, .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover{
box-shadow: none;