This commit is contained in:
cxc
2022-12-22 17:30:52 +08:00
parent b07498d904
commit 955f86201f
9 changed files with 110 additions and 56 deletions

View File

@ -45,9 +45,8 @@
"@vitejs/plugin-vue-jsx": "^3.0.0",
"@vue/babel-helper-vue-transform-on": "^1.0.2",
"@vue/compiler-sfc": "3.2.45",
"bpmn-js": "7.4.0",
"bpmn-js-properties-panel": "0.37.2",
"camunda-bpmn-moddle": "4.4.1",
"bpmn-js": "^7.5.0",
"camunda-bpmn-moddle": "^4.4.1",
"sass": "1.56.1",
"unplugin-auto-import": "0.11.4",
"vite": "3.2.3",

View File

@ -104,7 +104,6 @@ export default {
},
customInsert(res, insertFn) {
// res 即服务端的返回结果
// console.log(res);
// 从 res 中找到 url alt href ,然后插图图片
insertFn(res.url, null, null);
},

View File

@ -416,7 +416,6 @@ const moddleExtensions = computed(() => {
if (prefix.value === "camunda") {
Extensions.camunda = camundaModdleDescriptor;
}
return Extensions;
});
@ -440,6 +439,7 @@ function onSave() {
});
});
}
window.BpmnModeler = BpmnModeler;
function initBpmnModeler() {
if (bpmnModeler) return;
bpmnModeler = new BpmnModeler({

View File

@ -209,14 +209,14 @@ function initFormOnChanged(element) {
);
}
if (!activatedElement) return;
console.log(`
----------
select element changed:
id: ${activatedElement.id}
type: ${activatedElement.businessObject.$type}
----------
`);
console.log("businessObject: ", activatedElement.businessObject);
// console.log(`
// ----------
// select element changed:
// id: ${activatedElement.id}
// type: ${activatedElement.businessObject.$type}
// ----------
// `);
// console.log("businessObject: ", activatedElement.businessObject);
window.bpmnInstances.bpmnElement = activatedElement;
bpmnElement = activatedElement;
elementId.value = activatedElement.id;

View File

@ -22,7 +22,11 @@
/>
<el-table-column label="操作" width="90px">
<template #default="{ row, $index }">
<el-button size="small" link @click="openListenerForm(row, $index)"
<el-button
size="small"
type="primary"
link
@click="openListenerForm(row, $index)"
>编辑</el-button
>
<el-divider direction="vertical" />
@ -244,8 +248,9 @@
:formatter="(row) => row.string || row.expression"
/>
<el-table-column label="操作" width="100px">
<template slot-scope="{ row, $index }">
<template #default="{ row, $index }">
<el-button
type="primary"
size="small"
link
@click="openListenerFieldForm(row, $index)"
@ -255,6 +260,7 @@
<el-button
size="small"
link
type="danger"
style="color: #ff4d4f"
@click="removeListenerField(row, $index)"
>移除</el-button
@ -395,6 +401,7 @@ function resetListenersList() {
bpmnElement.businessObject?.extensionElements?.values?.filter(
(ex) => ex.$type === `${prefix}:TaskListener`
) ?? [];
// debugger;
elementListenersList.value = bpmnElementListeners.map((listener) =>
initListenerType(listener)
);
@ -443,6 +450,7 @@ async function saveListenerConfig() {
let validateStatus = await listenerFormRef.value.validate();
if (!validateStatus) return; // 验证不通过直接返回
const listenerObject = createListenerObject(listenerForm.value, true, prefix);
if (editingListenerIndex.value === -1) {
bpmnElementListeners.push(listenerObject);
elementListenersList.value.push(listenerForm.value);
@ -463,6 +471,7 @@ async function saveListenerConfig() {
bpmnElement,
otherExtensionList.concat(bpmnElementListeners)
);
// 4. 隐藏侧边栏
listenerFormModelVisible.value = false;
listenerForm.value = {};

View File

@ -0,0 +1,5 @@
{
"msg": "操作成功",
"code": 200,
"data": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<definitions xmlns=\"http://www.omg.org/spec/BPMN/20100524/MODEL\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" xmlns:flowable=\"http://flowable.org/bpmn\" xmlns:bpmndi=\"http://www.omg.org/spec/BPMN/20100524/DI\" xmlns:omgdc=\"http://www.omg.org/spec/DD/20100524/DC\" xmlns:omgdi=\"http://www.omg.org/spec/DD/20100524/DI\" xmlns:bpmn2=\"http://www.omg.org/spec/BPMN/20100524/MODEL\" xmlns:dc=\"http://www.omg.org/spec/DD/20100524/DC\" xmlns:di=\"http://www.omg.org/spec/DD/20100524/DI\" typeLanguage=\"http://www.w3.org/2001/XMLSchema\" expressionLanguage=\"http://www.w3.org/1999/XPath\" targetNamespace=\"http://flowable.org/bpmn\" id=\"diagram_Process_1671673403370\" xsi:schemaLocation=\"http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd\">\n <process id=\"Process_1671673403370\" name=\"请假\" isExecutable=\"true\">\n <startEvent id=\"Event_0o5vpsf\" flowable:formKey=\"key_1\"></startEvent>\n <userTask id=\"Activity_1qoq75d\" flowable:candidateGroups=\"DEPT100,DEPT103,DEPT209\" xmlns:flowable=\"http://flowable.org/bpmn\" flowable:dataType=\"DEPTS\" flowable:text=\"若依科技,研发部门,高新分公司\">\n <extensionElements>\n <flowable:taskListener event=\"complete\" class=\"print('1233);\"></flowable:taskListener>\n <flowable:taskListener event=\"create\" expression=\"阿萨大大\"></flowable:taskListener>\n <flowable:taskListener event=\"delete\" delegateExpression=\"rr24344\"></flowable:taskListener>\n <flowable:taskListener event=\"update\" delegateExpression=\"tertert\"></flowable:taskListener>\n <flowable:taskListener event=\"delete\" delegateExpression=\"34er13232\"></flowable:taskListener>\n <flowable:taskListener event=\"update\" expression=\"4234\"></flowable:taskListener>\n </extensionElements>\n </userTask>\n <sequenceFlow id=\"Flow_01oskyz\" sourceRef=\"Event_0o5vpsf\" targetRef=\"Activity_1qoq75d\"></sequenceFlow>\n <userTask id=\"Activity_0iuhaqx\"></userTask>\n <sequenceFlow id=\"Flow_0f843wd\" sourceRef=\"Activity_1qoq75d\" targetRef=\"Activity_0iuhaqx\"></sequenceFlow>\n <intermediateThrowEvent id=\"Event_10fq4h9\"></intermediateThrowEvent>\n <sequenceFlow id=\"Flow_0ditwq0\" sourceRef=\"Activity_0iuhaqx\" targetRef=\"Event_10fq4h9\"></sequenceFlow>\n </process>\n <bpmndi:BPMNDiagram id=\"BPMNDiagram_Process_1671673403370\">\n <bpmndi:BPMNPlane bpmnElement=\"Process_1671673403370\" id=\"BPMNPlane_Process_1671673403370\">\n <bpmndi:BPMNShape bpmnElement=\"Event_0o5vpsf\" id=\"BPMNShape_Event_0o5vpsf\">\n <omgdc:Bounds height=\"36.0\" width=\"36.0\" x=\"292.0\" y=\"152.0\"></omgdc:Bounds>\n </bpmndi:BPMNShape>\n <bpmndi:BPMNShape bpmnElement=\"Activity_1qoq75d\" id=\"BPMNShape_Activity_1qoq75d\">\n <omgdc:Bounds height=\"80.0\" width=\"100.0\" x=\"380.0\" y=\"130.0\"></omgdc:Bounds>\n </bpmndi:BPMNShape>\n <bpmndi:BPMNShape bpmnElement=\"Activity_0iuhaqx\" id=\"BPMNShape_Activity_0iuhaqx\">\n <omgdc:Bounds height=\"80.0\" width=\"100.0\" x=\"540.0\" y=\"130.0\"></omgdc:Bounds>\n </bpmndi:BPMNShape>\n <bpmndi:BPMNShape bpmnElement=\"Event_10fq4h9\" id=\"BPMNShape_Event_10fq4h9\">\n <omgdc:Bounds height=\"36.0\" width=\"36.0\" x=\"702.0\" y=\"152.0\"></omgdc:Bounds>\n </bpmndi:BPMNShape>\n <bpmndi:BPMNEdge bpmnElement=\"Flow_0ditwq0\" id=\"BPMNEdge_Flow_0ditwq0\">\n <omgdi:waypoint x=\"640.0\" y=\"170.0\"></omgdi:waypoint>\n <omgdi:waypoint x=\"702.0\" y=\"170.0\"></omgdi:waypoint>\n </bpmndi:BPMNEdge>\n <bpmndi:BPMNEdge bpmnElement=\"Flow_0f843wd\" id=\"BPMNEdge_Flow_0f843wd\">\n <omgdi:waypoint x=\"480.0\" y=\"170.0\"></omgdi:waypoint>\n <omgdi:waypoint x=\"540.0\" y=\"170.0\"></omgdi:waypoint>\n </bpmndi:BPMNEdge>\n <bpmndi:BPMNEdge bpmnElement=\"Flow_01oskyz\" id=\"BPMNEdge_Flow_01oskyz\">\n <omgdi:waypoint x=\"328.0\" y=\"170.0\"></omgdi:waypoint>\n <omgdi:waypoint x=\"380.0\" y=\"170.0\"></omgdi:waypoint>\n </bpmndi:BPMNEdge>\n </bpmndi:BPMNPlane>\n </bpmndi:BPMNDiagram>\n</definitions>"
}

View File

@ -47,20 +47,28 @@
</el-select>
</div>
<div v-if="dataType === 'DEPTS'">
<tree-select
:width="320"
:height="400"
size="small"
:data="deptTreeData"
:defaultProps="deptProps"
multiple
<!-- :width="320"
:height="400"
size="small"
:defaultProps="deptProps"
multiple
clearable
nodeKey="id"
:checkedKeys="deptIds"
checkStrictly -->
<!-- <tree-select :options="deptTreeData" @update:value="checkedDeptChange">
</tree-select> -->
<el-cascader
:options="deptTreeData"
:modelValue="deptCascaderData"
clearable
checkStrictly
nodeKey="id"
:checkedKeys="deptIds"
@checked-change="checkedDeptChange"
>
</tree-select>
@change="checkedDeptChange"
:props="{
checkStrictly: true,
value: 'id',
multiple: true,
}"
></el-cascader>
</div>
</el-row>
<el-row>
@ -111,7 +119,7 @@
placeholder="请输入部门名称"
clearable
size="small"
prefix-icon="el-icon-search"
prefix-icon="search"
style="margin-bottom: 20px"
/>
<el-tree
@ -140,8 +148,8 @@
</el-table>
<pagination
:total="userTotal"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getUserList"
/>
</el-col>
@ -163,6 +171,7 @@ import { addDateRange } from "@/utils/ruoyi";
import TreeSelect from "@/components/TreeSelect";
import { ref, reactive, watch } from "vue";
import { ElMessage } from "element-plus";
const testResult = ref([]);
const userTaskForm = {
dataType: "",
assignee: "",
@ -191,7 +200,7 @@ const deptIds = ref([]);
const showMultiFlog = ref(false);
const isSequential = ref(false);
const multiLoopType = ref("Null");
const deptCascaderData = ref([]); // 部门级联 modelValue
const data = reactive({
selectedUser: {
ids: [],
@ -255,6 +264,9 @@ function resetTaskForm() {
let deptIdData = bpmnElementObj["candidateGroups"] || [];
if (deptIdData && deptIdData.length > 0) {
deptIds.value = deptIdData.split(",");
deptCascaderData.value = deptIds.value.map((id) => [
...getParentId(deptTreeData.value, id).reverse(),
]);
}
});
showMultiFlog.value = true;
@ -405,14 +417,64 @@ function changeSelectRoles(val) {
userTaskForm.text = textArr?.map((k) => k.roleName).join() || null;
updateElementTask();
}
function checkedDeptChange(checkedIds, checkedData) {
// function checkedDeptChange(checkedIds, checkedData) {
// userTaskForm.dataType = "DEPTS";
// if (checkedIds && checkedIds.length > 0) {
// deptIds.value = checkedIds;
// }
// if (checkedData && checkedData.length > 0) {
// userTaskForm.candidateGroups = checkedData.map((k) => k.id).join() || null;
// userTaskForm.text = checkedData.map((k) => k.label).join() || null;
// updateElementTask();
// }
// }
function findInDeptTree(id) {
let hasFound = false, // 表示是否有找到id值
result = null;
var fn = function (data) {
if (Array.isArray(data) && !hasFound) {
// 判断是否是数组并且没有的情况下,
data.forEach((item) => {
if (item.id === id) {
// 数据循环每个子项并且判断子项下边是否有id值
result = item; // 返回的结果等于每一项
hasFound = true; // 并且找到id值
} else if (item.children) {
fn(item.children); // 递归调用下边的子项
}
});
}
};
fn(deptTreeData.value); // 调用一下
return result;
}
// 获取所有父级
function getParentId(list, id) {
for (let i in list) {
if (list[i].id == id) {
return [list[i].id];
}
if (list[i].children) {
let node = getParentId(list[i].children, id);
if (node !== undefined) {
return node.concat(list[i].id);
}
}
}
}
function checkedDeptChange(checkedIds) {
const ids = checkedIds.map((el) => el[el.length - 1]);
const checkedData = ids.map((el) => findInDeptTree(el));
userTaskForm.dataType = "DEPTS";
if (checkedIds && checkedIds.length > 0) {
deptIds.value = checkedIds;
if (ids && ids.length > 0) {
deptIds.value = ids;
}
if (checkedData && checkedData.length > 0) {
userTaskForm.candidateGroups = checkedData.map((k) => k.id).join() || null;
userTaskForm.text = checkedData.map((k) => k.label).join() || null;
updateElementTask();
}
}

View File

@ -60,10 +60,7 @@ export function createScriptObject(options, prefix) {
scriptType === "inlineScript"
? { scriptFormat, value }
: { scriptFormat, resource };
return window.bpmnInstances.moddle.create(
`${prefix}:Script`,
scriptConfig
);
return window.bpmnInstances.moddle.create(`${prefix}:Script`, scriptConfig);
}
// 更新元素扩展属性

View File

@ -1,17 +0,0 @@
// import { defineStore } from "pinia";
const useBpmnStore = defineStore("bpmn", {
state: () => ({
bpmnInstances: {},
count: 1,
}),
actions: {
setBpmnInstances(data) {
console.log(data);
this.bpmnInstances = data;
// this.bpmnInstances.name = "423";
},
},
});
export default useBpmnStore;