cxc/car_management
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

流程部署

Browse Source
This commit is contained in:
cxc
2022-12-21 14:50:22 +08:00
parent 750f66aaf4
commit 0e9013c8c8
14 changed files with 1083 additions and 871 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/api/flowable/category.js
View File

@ -6,15 +6,30 @@ export const listAllCategory = (query) =>
method: "get",
params: query,
});
export const addCategory = (data) =>
request({
url: "/flowable/category",
method: "post",
data
});
export const delCategory = (ids) =>
request({
url: "/flowable/category",
method: "delete",
data: { ids }
});
export const getCategory = (categoryId) =>
request({
url: `/flowable/category/${categoryId}`,
method: "get",
});
export const updateCategory = (data) =>
request({
url: `/flowable/category`,
method: "put",
data
});

9
src/components/Editor/index.vue
View File

@ -74,12 +74,10 @@ export default {
setup(props, context) {
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();
// editorRef.value.on("blur", () => {
// console.log("blur");
// });
// 内容 HTML
const valueHtml = ref("");
watch(
() => props.modelValue,
(val) => {
@ -92,9 +90,7 @@ export default {
const toolbarConfig = {
excludeKeys: [],
};
// onBlur: (editor) => {
// console.log("onBlur");
// },
const editorConfig = {
placeholder: props.placeholder,
readOnly: props.readOnly,
@ -141,7 +137,6 @@ export default {
const emitBlur = () => {
context.emit("blur", editorRef.value);
// editorRef.value.emit("blur");
};
return {

279
src/plugins/package/penal/flow-condition/FlowCondition.vue
View File

@ -1,6 +1,11 @@
<template>
<div class="panel-tab__content">
<el-form :model="flowConditionForm" label-width="90px" size="small" @submit.native.prevent>
<el-form
:model="flowConditionForm"
label-width="90px"
size="small"
@submit.native.prevent
>
<el-form-item label="流转类型">
<el-select v-model="flowConditionForm.type" @change="updateFlowType">
<el-option label="普通流转路径" value="normal" />
@ -8,18 +13,42 @@
<el-option label="条件流转路径" value="condition" />
</el-select>
</el-form-item>
<el-form-item label="条件格式" v-if="flowConditionForm.type === 'condition'" key="condition">
<el-form-item
label="条件格式"
v-if="flowConditionForm.type === 'condition'"
key="condition"
>
<el-select v-model="flowConditionForm.conditionType">
<el-option label="表达式" value="expression" />
<el-option label="脚本" value="script" />
</el-select>
</el-form-item>
<el-form-item label="表达式" v-if="flowConditionForm.conditionType && flowConditionForm.conditionType === 'expression'" key="express">
<el-input v-model="flowConditionForm.body" clearable @change="updateFlowCondition" />
<el-form-item
label="表达式"
v-if="
flowConditionForm.conditionType &&
flowConditionForm.conditionType === 'expression'
"
key="express"
>
<el-input
v-model="flowConditionForm.body"
clearable
@change="updateFlowCondition"
/>
</el-form-item>
<template v-if="flowConditionForm.conditionType && flowConditionForm.conditionType === 'script'">
<template
v-if="
flowConditionForm.conditionType &&
flowConditionForm.conditionType === 'script'
"
>
<el-form-item label="脚本语言" key="language">
<el-input v-model="flowConditionForm.language" clearable @change="updateFlowCondition" />
<el-input
v-model="flowConditionForm.language"
clearable
@change="updateFlowCondition"
/>
</el-form-item>
<el-form-item label="脚本类型" key="scriptType">
<el-select v-model="flowConditionForm.scriptType">
@ -27,116 +56,152 @@
<el-option label="外部脚本" value="externalScript" />
</el-select>
</el-form-item>
<el-form-item label="脚本" v-if="flowConditionForm.scriptType === 'inlineScript'" key="body">
<el-input v-model="flowConditionForm.body" type="textarea" clearable @change="updateFlowCondition" />
<el-form-item
label="脚本"
v-if="flowConditionForm.scriptType === 'inlineScript'"
key="body"
>
<el-input
v-model="flowConditionForm.body"
type="textarea"
clearable
@change="updateFlowCondition"
/>
</el-form-item>
<el-form-item label="资源地址" v-if="flowConditionForm.scriptType === 'externalScript'" key="resource">
<el-input v-model="flowConditionForm.resource" clearable @change="updateFlowCondition" />
<el-form-item
label="资源地址"
v-if="flowConditionForm.scriptType === 'externalScript'"
key="resource"
>
<el-input
v-model="flowConditionForm.resource"
clearable
@change="updateFlowCondition"
/>
</el-form-item>
</template>
</el-form>
</div>
</template>
<script setup name="FlowCondition">
import { reactive, toRefs, watch, nextTick, onBeforeUnmount } from "vue";
<script>
export default {
name: "FlowCondition",
props: {
businessObject: Object,
type: String
const props = defineProps({
businessObject: Object,
type: String,
});
const { businessObject, type } = toRefs(props);
const data = reactive({ flowConditionForm: {} });
const { flowConditionForm } = toRefs(data);
watch(
businessObject,
(val) => {
nextTick(() => {
resetFlowCondition();
});
},
data() {
return {
flowConditionForm: {}
};
},
watch: {
businessObject: {
immediate: true,
handler() {
this.$nextTick(() => this.resetFlowCondition());
}
{ immediate: true }
);
let bpmnElement;
let bpmnElementSource;
let bpmnElementSourceRef;
let flowConditionRef;
function resetFlowCondition() {
bpmnElement = window.bpmnInstances.bpmnElement;
bpmnElementSource = bpmnElement.source;
bpmnElementSourceRef = bpmnElement.businessObject.sourceRef;
if (
bpmnElementSourceRef &&
bpmnElementSourceRef.default &&
bpmnElementSourceRef.default.id === bpmnElement.id
) {
// 默认
flowConditionForm.value = { type: "default" };
} else if (!bpmnElement.businessObject.conditionExpression) {
// 普通
flowConditionForm.value = { type: "normal" };
} else {
// 带条件
const conditionExpression = bpmnElement.businessObject.conditionExpression;
flowConditionForm.value = { ...conditionExpression, type: "condition" };
// resource 可直接标识 是否是外部资源脚本
if (flowConditionForm.value.resource) {
flowConditionForm.value.conditionType = "script";
flowConditionForm.value.scriptType = "externalScript";
return;
}
},
methods: {
resetFlowCondition() {
this.bpmnElement = window.bpmnInstances.bpmnElement;
this.bpmnElementSource = this.bpmnElement.source;
this.bpmnElementSourceRef = this.bpmnElement.businessObject.sourceRef;
if (this.bpmnElementSourceRef && this.bpmnElementSourceRef.default && this.bpmnElementSourceRef.default.id === this.bpmnElement.id) {
// 默认
this.flowConditionForm = { type: "default" };
} else if (!this.bpmnElement.businessObject.conditionExpression) {
// 普通
this.flowConditionForm = { type: "normal" };
} else {
// 带条件
const conditionExpression = this.bpmnElement.businessObject.conditionExpression;
this.flowConditionForm = { ...conditionExpression, type: "condition" };
// resource 可直接标识 是否是外部资源脚本
if (this.flowConditionForm.resource) {
this.$set(this.flowConditionForm, "conditionType", "script");
this.$set(this.flowConditionForm, "scriptType", "externalScript");
return;
}
if (conditionExpression.language) {
this.$set(this.flowConditionForm, "conditionType", "script");
this.$set(this.flowConditionForm, "scriptType", "inlineScript");
return;
}
this.$set(this.flowConditionForm, "conditionType", "expression");
}
},
updateFlowType(flowType) {
// 正常条件类
if (flowType === "condition") {
this.flowConditionRef = window.bpmnInstances.moddle.create("bpmn:FormalExpression");
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
conditionExpression: this.flowConditionRef
});
return;
}
// 默认路径
if (flowType === "default") {
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
conditionExpression: null
});
window.bpmnInstances.modeling.updateProperties(this.bpmnElementSource, {
default: this.bpmnElement
});
return;
}
// 正常路径，如果来源节点的默认路径是当前连线时，清除父元素的默认路径配置
if (this.bpmnElementSourceRef.default && this.bpmnElementSourceRef.default.id === this.bpmnElement.id) {
window.bpmnInstances.modeling.updateProperties(this.bpmnElementSource, {
default: null
});
}
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
conditionExpression: null
});
},
updateFlowCondition() {
let { conditionType, scriptType, body, resource, language } = this.flowConditionForm;
let condition;
if (conditionType === "expression") {
condition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body });
} else {
if (scriptType === "inlineScript") {
condition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body, language });
this.$set(this.flowConditionForm, "resource", "");
} else {
this.$set(this.flowConditionForm, "body", "");
condition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { resource, language });
}
}
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, { conditionExpression: condition });
if (conditionExpression.language) {
flowConditionForm.value.conditionType = "script";
flowConditionForm.value.scriptType = "inlineScript";
return;
}
},
beforeDestroy() {
this.bpmnElement = null;
this.bpmnElementSource = null;
this.bpmnElementSourceRef = null;
flowConditionForm.value.conditionType = "expression";
}
};
}
function updateFlowType(flowType) {
// 正常条件类
if (flowType === "condition") {
flowConditionRef = window.bpmnInstances.moddle.create(
"bpmn:FormalExpression"
);
window.bpmnInstances.modeling.updateProperties(bpmnElement, {
conditionExpression: flowConditionRef,
});
return;
}
// 默认路径
if (flowType === "default") {
window.bpmnInstances.modeling.updateProperties(bpmnElement, {
conditionExpression: null,
});
window.bpmnInstances.modeling.updateProperties(bpmnElementSource, {
default: bpmnElement,
});
return;
}
// 正常路径，如果来源节点的默认路径是当前连线时，清除父元素的默认路径配置
if (
bpmnElementSourceRef.default &&
bpmnElementSourceRef.default.id === bpmnElement.id
) {
window.bpmnInstances.modeling.updateProperties(bpmnElementSource, {
default: null,
});
}
window.bpmnInstances.modeling.updateProperties(bpmnElement, {
conditionExpression: null,
});
}
function updateFlowCondition() {
let { conditionType, scriptType, body, resource, language } =
flowConditionForm.value;
let condition;
if (conditionType === "expression") {
condition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", {
body,
});
} else {
if (scriptType === "inlineScript") {
condition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", {
body,
language,
});
flowConditionForm.value.resource = "";
} else {
flowConditionForm.value.body = "";
condition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", {
resource,
language,
});
}
}
window.bpmnInstances.modeling.updateProperties(bpmnElement, {
conditionExpression: condition,
});
}
onBeforeUnmount(() => {
bpmnElement = null;
bpmnElementSource = null;
bpmnElementSourceRef = null;
});
</script>

325
src/plugins/package/penal/listeners/UserTaskListeners.vue
View File

@ -21,7 +21,7 @@
:formatter="(row) => listenerTypeObject[row.listenerType]"
/>
<el-table-column label="操作" width="90px">
<template slot-scope="{ row, $index }">
<template #default="{ row, $index }">
<el-button size="small" link @click="openListenerForm(row, $index)"
>编辑</el-button
>
@ -340,8 +340,9 @@
</el-dialog>
</div>
</template>
<script>
<script setup name="UserTaskListeners">
import { ElMessageBox } from "element-plus";
import { toRefs, nextTick, ref, watch, inject } from "vue";
import { createListenerObject, updateElementExtensions } from "../../utils";
import {
initListenerForm,
@ -351,172 +352,162 @@ import {
fieldType,
} from "./utilSelf";
export default {
name: "UserTaskListeners",
props: {
id: String,
type: String,
const props = defineProps({
id: String,
type: String,
});
const { id, type } = toRefs(props);
const prefix = inject("prefix");
const width = inject("width");
const elementListenersList = ref([]);
const listenerEventTypeObject = ref(eventType);
const listenerTypeObject = ref(listenerType);
const listenerFormModelVisible = ref(false);
const fieldTypeObject = ref(fieldType);
const fieldsListOfListener = ref([]);
const listenerFieldFormModelVisible = ref(false); // 监听器 注入字段表单弹窗 显示状
const editingListenerIndex = ref(-1); // 监听器所在下标，-1 为新
const editingListenerFieldIndex = ref(-1); // 字段所在下标，-1 为新
const listenerFieldFormRef = ref();
const listenerFormRef = ref();
let bpmnElement;
let otherExtensionList;
let bpmnElementListeners;
const data = reactive({
listenerForm: {},
listenerFieldForm: {}, // 监听器 注入字段 详情表单
});
const { listenerForm, listenerFieldForm } = toRefs(data);
watch(
id,
(val) => {
val && val.length && nextTick(() => resetListenersList());
},
inject: {
prefix: "prefix",
width: "width",
},
data() {
return {
elementListenersList: [],
listenerEventTypeObject: eventType,
listenerTypeObject: listenerType,
listenerFormModelVisible: false,
listenerForm: {},
fieldTypeObject: fieldType,
fieldsListOfListener: [],
listenerFieldFormModelVisible: false, // 监听器 注入字段表单弹窗 显示状态
editingListenerIndex: -1, // 监听器所在下标，-1 为新增
editingListenerFieldIndex: -1, // 字段所在下标，-1 为新增
listenerFieldForm: {}, // 监听器 注入字段 详情表单
};
},
watch: {
id: {
immediate: true,
handler(val) {
val && val.length && this.$nextTick(() => this.resetListenersList());
},
},
},
methods: {
resetListenersList() {
this.bpmnElement = window.bpmnInstances.bpmnElement;
this.otherExtensionList = [];
this.bpmnElementListeners =
this.bpmnElement.businessObject?.extensionElements?.values?.filter(
(ex) => ex.$type === `${this.prefix}:TaskListener`
) ?? [];
this.elementListenersList = this.bpmnElementListeners.map((listener) =>
initListenerType(listener)
);
},
openListenerForm(listener, index) {
if (listener) {
this.listenerForm = initListenerForm(listener);
this.editingListenerIndex = index;
} else {
this.listenerForm = {};
this.editingListenerIndex = -1; // 标记为新增
}
if (listener && listener.fields) {
this.fieldsListOfListener = listener.fields.map((field) => ({
...field,
fieldType: field.string ? "string" : "expression",
}));
} else {
this.fieldsListOfListener = [];
this.$set(this.listenerForm, "fields", []);
}
// 打开侧边栏并清楚验证状态
this.listenerFormModelVisible = true;
this.$nextTick(() => {
if (this.$refs["listenerFormRef"])
this.$refs["listenerFormRef"].clearValidate();
});
},
// 移除监听器
removeListener(listener, index) {
ElMessageBox.confirm("确认移除该监听器吗？", "提示", {
confirmButtonText: "确 认",
cancelButtonText: "取 消",
})
.then(() => {
this.bpmnElementListeners.splice(index, 1);
this.elementListenersList.splice(index, 1);
updateElementExtensions(
this.bpmnElement,
this.otherExtensionList.concat(this.bpmnElementListeners)
);
})
.catch(() => console.info("操作取消"));
},
// 保存监听器
async saveListenerConfig() {
let validateStatus = await this.$refs["listenerFormRef"].validate();
if (!validateStatus) return; // 验证不通过直接返回
const listenerObject = createListenerObject(
this.listenerForm,
true,
this.prefix
);
if (this.editingListenerIndex === -1) {
this.bpmnElementListeners.push(listenerObject);
this.elementListenersList.push(this.listenerForm);
} else {
this.bpmnElementListeners.splice(
this.editingListenerIndex,
1,
listenerObject
);
this.elementListenersList.splice(
this.editingListenerIndex,
1,
this.listenerForm
);
}
// 保存其他配置
this.otherExtensionList =
this.bpmnElement.businessObject?.extensionElements?.values?.filter(
(ex) => ex.$type !== `${this.prefix}:TaskListener`
) ?? [];
{ immediate: true }
);
function resetListenersList() {
bpmnElement = window.bpmnInstances.bpmnElement;
otherExtensionList = [];
bpmnElementListeners =
bpmnElement.businessObject?.extensionElements?.values?.filter(
(ex) => ex.$type === `${prefix}:TaskListener`
) ?? [];
elementListenersList.value = bpmnElementListeners.map((listener) =>
initListenerType(listener)
);
}
function openListenerForm(listener, index) {
if (listener) {
listenerForm.value = initListenerForm(listener);
editingListenerIndex.value = index;
} else {
listenerForm.value = {};
editingListenerIndex.value = -1; // 标记为新增
}
if (listener && listener.fields) {
fieldsListOfListener.value = listener.fields.map((field) => ({
...field,
fieldType: field.string ? "string" : "expression",
}));
} else {
fieldsListOfListener.value = [];
listenerForm.value.fields = [];
}
// 打开侧边栏并清楚验证状态
listenerFormModelVisible.value = true;
nextTick(() => {
if (listenerFormRef.value) listenerFormRef.value.clearValidate();
});
}
// 移除监听器
function removeListener(listener, index) {
ElMessageBox.confirm("确认移除该监听器吗？", "提示", {
confirmButtonText: "确 认",
cancelButtonText: "取 消",
})
.then(() => {
bpmnElementListeners.splice(index, 1);
elementListenersList.value.splice(index, 1);
updateElementExtensions(
this.bpmnElement,
this.otherExtensionList.concat(this.bpmnElementListeners)
bpmnElement,
otherExtensionList.concat(bpmnElementListeners)
);
// 4. 隐藏侧边栏
this.listenerFormModelVisible = false;
this.listenerForm = {};
},
// 打开监听器字段编辑弹窗
openListenerFieldForm(field, index) {
this.listenerFieldForm = field ? JSON.parse(JSON.stringify(field)) : {};
this.editingListenerFieldIndex = field ? index : -1;
this.listenerFieldFormModelVisible = true;
this.$nextTick(() => {
if (this.$refs["listenerFieldFormRef"])
this.$refs["listenerFieldFormRef"].clearValidate();
});
},
// 保存监听器注入字段
async saveListenerFiled() {
let validateStatus = await this.$refs["listenerFieldFormRef"].validate();
if (!validateStatus) return; // 验证不通过直接返回
if (this.editingListenerFieldIndex === -1) {
this.fieldsListOfListener.push(this.listenerFieldForm);
this.listenerForm.fields.push(this.listenerFieldForm);
} else {
this.fieldsListOfListener.splice(
this.editingListenerFieldIndex,
1,
this.listenerFieldForm
);
this.listenerForm.fields.splice(
this.editingListenerFieldIndex,
1,
this.listenerFieldForm
);
}
this.listenerFieldFormModelVisible = false;
this.$nextTick(() => (this.listenerFieldForm = {}));
},
// 移除监听器字段
removeListenerField(field, index) {
this.$confirm("确认移除该字段吗？", "提示", {
confirmButtonText: "确 认",
cancelButtonText: "取 消",
})
.then(() => {
this.fieldsListOfListener.splice(index, 1);
this.listenerForm.fields.splice(index, 1);
})
.catch(() => console.info("操作取消"));
},
},
};
})
.catch(() => console.info("操作取消"));
}
// 保存监听器
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);
} else {
bpmnElementListeners.splice(editingListenerIndex.value, 1, listenerObject);
elementListenersList.value.splice(
editingListenerIndex.value,
1,
listenerForm.value
);
}
// 保存其他配置
otherExtensionList =
bpmnElement.businessObject?.extensionElements?.values?.filter(
(ex) => ex.$type !== `${prefix}:TaskListener`
) ?? [];
updateElementExtensions(
bpmnElement,
otherExtensionList.concat(bpmnElementListeners)
);
// 4. 隐藏侧边栏
listenerFormModelVisible.value = false;
listenerForm.value = {};
}
// 打开监听器字段编辑弹窗
function openListenerFieldForm(field, index) {
listenerFieldForm.value = field ? JSON.parse(JSON.stringify(field)) : {};
editingListenerFieldIndex.value = field ? index : -1;
listenerFieldFormModelVisible.value = true;
nextTick(() => {
if (listenerFieldFormRef.value) listenerFieldFormRef.value.clearValidate();
});
}
// 保存监听器注入字段
async function saveListenerFiled() {
let validateStatus = await listenerFieldFormRef.value.validate();
if (!validateStatus) return; // 验证不通过直接返回
if (editingListenerFieldIndex.value === -1) {
fieldsListOfListener.value.push(listenerFieldForm.value);
listenerForm.value.fields.push(listenerFieldForm.value);
} else {
fieldsListOfListener.value.splice(
editingListenerFieldIndex.value,
1,
listenerFieldForm.value
);
listenerForm.value.fields.splice(
editingListenerFieldIndex.value,
1,
listenerFieldForm.value
);
}
listenerFieldFormModelVisible.value = false;
nextTick(() => (listenerFieldForm.value = {}));
}
// 移除监听器字段
function removeListenerField(field, index) {
ElMessageBox.confirm("确认移除该字段吗？", "提示", {
confirmButtonText: "确 认",
cancelButtonText: "取 消",
})
.then(() => {
fieldsListOfListener.value.splice(index, 1);
listenerForm.value.fields.splice(index, 1);
})
.catch(() => console.info("操作取消"));
}
</script>

116
src/plugins/package/penal/task/ElementTask.vue
View File

@ -1,72 +1,70 @@
<template>
<div class="panel-tab__content">
<el-form size="small" label-width="90px" @submit.native.prevent>
<!-- <el-form-item label="异步延续">-->
<!-- <el-checkbox v-model="taskConfigForm.asyncBefore" label="异步前" @change="changeTaskAsync" />-->
<!-- <el-checkbox v-model="taskConfigForm.asyncAfter" label="异步后" @change="changeTaskAsync" />-->
<!-- <el-checkbox v-model="taskConfigForm.exclusive" v-if="taskConfigForm.asyncAfter || taskConfigForm.asyncBefore" label="排除" @change="changeTaskAsync" />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="异步延续">-->
<!-- <el-checkbox v-model="taskConfigForm.asyncBefore" label="异步前" @change="changeTaskAsync" />-->
<!-- <el-checkbox v-model="taskConfigForm.asyncAfter" label="异步后" @change="changeTaskAsync" />-->
<!-- <el-checkbox v-model="taskConfigForm.exclusive" v-if="taskConfigForm.asyncAfter || taskConfigForm.asyncBefore" label="排除" @change="changeTaskAsync" />-->
<!-- </el-form-item>-->
<component :is="witchTaskComponent" v-bind="$props" />
</el-form>
</div>
</template>
<script>
<script setup name="ElementTaskConfig">
import UserTask from "./task-components/UserTask";
import ScriptTask from "./task-components/ScriptTask";
import ReceiveTask from "./task-components/ReceiveTask";
import { toRefs, ref } from "vue";
const props = defineProps({
id: String,
type: String,
});
const { id, type } = toRefs(props);
const data = reactive({
taskConfigForm: {
asyncAfter: false,
asyncBefore: false,
exclusive: false,
},
installedComponent: {
// 手工任务与普通任务一致，不需要其他配置
// 接收消息任务，需要在全局下插入新的消息实例，并在该节点下的 messageRef 属性绑定该实例
// 发送任务、服务任务、业务规则任务共用一个相同配置
UserTask: "UserTask", // 用户任务配置
ScriptTask: "ScriptTask", // 脚本任务配置
ReceiveTask: "ReceiveTask", // 消息接收任务
},
});
const { taskConfigForm, installedComponent } = toRefs(data);
const witchTaskComponent = ref("");
let bpmnElement;
watch(
id,
(val) => {
bpmnElement = window.bpmnInstances.bpmnElement;
taskConfigForm.value.asyncBefore = bpmnElement?.businessObject?.asyncBefore;
taskConfigForm.value.asyncAfter = bpmnElement?.businessObject?.asyncAfter;
taskConfigForm.value.exclusive = bpmnElement?.businessObject?.exclusive;
},
{ immediate: true }
);
watch(
type,
(val) => {
witchTaskComponent.value = installedComponent.value[type.value];
},
{ immediate: true }
);
export default {
name: "ElementTaskConfig",
components: { UserTask, ScriptTask, ReceiveTask },
props: {
id: String,
type: String
},
data() {
return {
taskConfigForm: {
asyncAfter: false,
asyncBefore: false,
exclusive: false
},
witchTaskComponent: "",
installedComponent: {
// 手工任务与普通任务一致，不需要其他配置
// 接收消息任务，需要在全局下插入新的消息实例，并在该节点下的 messageRef 属性绑定该实例
// 发送任务、服务任务、业务规则任务共用一个相同配置
UserTask: "UserTask", // 用户任务配置
ScriptTask: "ScriptTask", // 脚本任务配置
ReceiveTask: "ReceiveTask" // 消息接收任务
}
};
},
watch: {
id: {
immediate: true,
handler() {
this.bpmnElement = window.bpmnInstances.bpmnElement;
this.taskConfigForm.asyncBefore = this.bpmnElement?.businessObject?.asyncBefore;
this.taskConfigForm.asyncAfter = this.bpmnElement?.businessObject?.asyncAfter;
this.taskConfigForm.exclusive = this.bpmnElement?.businessObject?.exclusive;
}
},
type: {
immediate: true,
handler() {
this.witchTaskComponent = this.installedComponent[this.type];
}
}
},
methods: {
changeTaskAsync() {
if (!this.taskConfigForm.asyncBefore && !this.taskConfigForm.asyncAfter) {
this.taskConfigForm.exclusive = false;
}
window.bpmnInstances.modeling.updateProperties(window.bpmnInstances.bpmnElement, {
...this.taskConfigForm
});
}
function changeTaskAsync() {
if (!taskConfigForm.value.asyncBefore && !taskConfigForm.value.asyncAfter) {
taskConfigForm.value.exclusive = false;
}
};
window.bpmnInstances.modeling.updateProperties(
window.bpmnInstances.bpmnElement,
{
...taskConfigForm.value,
}
);
}
</script>

185
src/plugins/package/penal/task/task-components/ReceiveTask.vue
View File

@ -1,15 +1,45 @@
<template>
<div style="margin-top: 16px">
<el-form-item label="消息实例">
<div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap">
<div
style="
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
"
>
<el-select v-model="bindMessageId" @change="updateTaskMessage">
<el-option v-for="id in Object.keys(messageMap)" :value="id" :label="messageMap[id]" :key="id" />
<el-option
v-for="id in Object.keys(messageMap)"
:value="id"
:label="messageMap[id]"
:key="id"
/>
</el-select>
<el-button size="small" type="primary" icon="el-icon-plus" style="margin-left: 8px" @click="openMessageModel" />
<el-button
size="small"
type="primary"
icon="el-icon-plus"
style="margin-left: 8px"
@click="openMessageModel"
/>
</div>
</el-form-item>
<el-dialog v-model="messageModelVisible" :close-on-click-modal="false" title="创建新消息" width="400px" append-to-body destroy-on-close>
<el-form :model="newMessageForm" size="small" label-width="90px" @submit.native.prevent>
<el-dialog
v-model="messageModelVisible"
:close-on-click-modal="false"
title="创建新消息"
width="400px"
append-to-body
destroy-on-close
>
<el-form
:model="newMessageForm"
size="small"
label-width="90px"
@submit.native.prevent
>
<el-form-item label="消息ID">
<el-input v-model="newMessageForm.id" clearable />
</el-form-item>
@ -18,80 +48,87 @@
</el-form-item>
</el-form>
<template #footer>
<el-button size="small" type="primary" @click="createNewMessage">确 认</el-button>
<el-button size="small" type="primary" @click="createNewMessage"
>确 认</el-button
>
</template>
</el-dialog>
</div>
</template>
<script>
export default {
name: "ReceiveTask",
props: {
id: String,
type: String
<script setup name="ReceiveTask">
import { ElMessage } from "element-plus";
import { toRefs, ref, reactive, onBeforeUnmount, watch } from "vue";
const props = defineProps({
id: String,
type: String,
});
const { id, type } = toRefs(props);
const bindMessageId = ref("");
const messageModelVisible = ref(false);
let bpmnMessageRefsMap;
let bpmnRootElements;
const data = reactive({
newMessageForm: {},
messageMap: {},
});
const { newMessageForm, messageMap } = toRefs(data);
watch(
id,
() => {
nextTick(() => getBindMessage());
},
data() {
return {
bindMessageId: "",
newMessageForm: {},
messageMap: {},
messageModelVisible: false
};
},
watch: {
id: {
immediate: true,
handler() {
this.$nextTick(() => this.getBindMessage());
}
}
},
created() {
this.bpmnMessageRefsMap = Object.create(null);
this.bpmnRootElements = window.bpmnInstances.modeler.getDefinitions().rootElements;
this.bpmnRootElements
.filter(el => el.$type === "bpmn:Message")
.forEach(m => {
this.bpmnMessageRefsMap[m.id] = m;
this.$set(this.messageMap, m.id, m.name);
});
this.$set(this.messageMap, "-1", "无"); // 添加一个空对象，保证可以取消原消息绑定
},
methods: {
getBindMessage() {
this.bpmnElement = window.bpmnInstances.bpmnElement;
this.bindMessageId = this.bpmnElement.businessObject?.messageRef?.id || "-1";
},
openMessageModel() {
this.messageModelVisible = true;
this.newMessageForm = {};
},
createNewMessage() {
if (this.messageMap[this.newMessageForm.id]) {
this.$message.error("该消息已存在，请修改id后重新保存");
return;
}
const newMessage = window.bpmnInstances.moddle.create("bpmn:Message", this.newMessageForm);
this.bpmnRootElements.push(newMessage);
this.$set(this.messageMap, this.newMessageForm.id, this.newMessageForm.name);
this.bpmnMessageRefsMap[this.newMessageForm.id] = newMessage;
this.messageModelVisible = false;
},
updateTaskMessage(messageId) {
if (messageId === "-1") {
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
messageRef: null
});
} else {
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
messageRef: this.bpmnMessageRefsMap[messageId]
});
}
}
},
beforeDestroy() {
this.bpmnElement = null;
{
immediate: true,
}
};
);
function getBindMessage() {
bpmnElement = window.bpmnInstances.bpmnElement;
bindMessageId.value = bpmnElement.businessObject?.messageRef?.id || "-1";
}
function openMessageModel() {
messageModelVisible.value = true;
newMessageForm.value = {};
}
function createNewMessage() {
if (messageMap.value[newMessageForm.value.id]) {
ElMessage.success("该消息已存在，请修改id后重新保存");
return;
}
const newMessage = window.bpmnInstances.moddle.create(
"bpmn:Message",
newMessageForm.value
);
bpmnRootElements.push(newMessage);
messageMap.value[newMessageForm.value.id] = newMessageForm.value.name;
bpmnMessageRefsMap[newMessageForm.value.id] = newMessage;
messageModelVisible.value = false;
}
function updateTaskMessage(messageId) {
if (messageId === "-1") {
window.bpmnInstances.modeling.updateProperties(bpmnElement, {
messageRef: null,
});
} else {
window.bpmnInstances.modeling.updateProperties(bpmnElement, {
messageRef: bpmnMessageRefsMap[messageId],
});
}
}
bpmnMessageRefsMap = Object.create(null);
bpmnRootElements = window.bpmnInstances.modeler.getDefinitions().rootElements;
bpmnRootElements
.filter((el) => el.$type === "bpmn:Message")
.forEach((m) => {
bpmnMessageRefsMap[m.id] = m;
messageMap.value[m.id] = m.name;
});
messageMap[-1] = "无";
onBeforeUnmount(() => {
bpmnElement = null;
});
</script>

131
src/plugins/package/penal/task/task-components/ScriptTask.vue
View File

@ -1,7 +1,12 @@
<template>
<div style="margin-top: 16px">
<el-form-item label="脚本格式">
<el-input v-model="scriptTaskForm.scriptFormat" clearable @input="updateElementTask()" @change="updateElementTask()" />
<el-input
v-model="scriptTaskForm.scriptFormat"
clearable
@input="updateElementTask()"
@change="updateElementTask()"
/>
</el-form-item>
<el-form-item label="脚本类型">
<el-select v-model="scriptTaskForm.scriptType">
@ -20,66 +25,82 @@
@change="updateElementTask()"
/>
</el-form-item>
<el-form-item label="资源地址" v-show="scriptTaskForm.scriptType === 'external'">
<el-input v-model="scriptTaskForm.resource" clearable @input="updateElementTask()" @change="updateElementTask()" />
<el-form-item
label="资源地址"
v-show="scriptTaskForm.scriptType === 'external'"
>
<el-input
v-model="scriptTaskForm.resource"
clearable
@input="updateElementTask()"
@change="updateElementTask()"
/>
</el-form-item>
<el-form-item label="结果变量">
<el-input v-model="scriptTaskForm.resultVariable" clearable @input="updateElementTask()" @change="updateElementTask()" />
<el-input
v-model="scriptTaskForm.resultVariable"
clearable
@input="updateElementTask()"
@change="updateElementTask()"
/>
</el-form-item>
</div>
</template>
<script setup name="ScriptTask">
import { reactive, watch, onBeforeUnmount } from "vue";
<script>
export default {
name: "ScriptTask",
props: {
id: String,
type: String
const props = defineProps({
id: String,
type: String,
});
const { id, type } = toRefs(props);
const data = reactive({
defaultTaskForm: {
scriptFormat: "",
script: "",
resource: "",
resultVariable: "",
},
data() {
return {
defaultTaskForm: {
scriptFormat: "",
script: "",
resource: "",
resultVariable: ""
},
scriptTaskForm: {}
};
},
watch: {
id: {
immediate: true,
handler() {
this.bpmnElement = window.bpmnInstances.bpmnElement;
this.$nextTick(() => this.resetTaskForm());
}
}
},
methods: {
resetTaskForm() {
for (let key in this.defaultTaskForm) {
let value = this.bpmnElement?.businessObject[key] || this.defaultTaskForm[key];
this.$set(this.scriptTaskForm, key, value);
}
this.$set(this.scriptTaskForm, "scriptType", this.scriptTaskForm.script ? "inline" : "external");
},
updateElementTask() {
let taskAttr = Object.create(null);
taskAttr.scriptFormat = this.scriptTaskForm.scriptFormat || null;
taskAttr.resultVariable = this.scriptTaskForm.resultVariable || null;
if (this.scriptTaskForm.scriptType === "inline") {
taskAttr.script = this.scriptTaskForm.script || null;
taskAttr.resource = null;
} else {
taskAttr.resource = this.scriptTaskForm.resource || null;
taskAttr.script = null;
}
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr);
}
},
beforeDestroy() {
this.bpmnElement = null;
scriptTaskForm: {},
});
const { defaultTaskForm, scriptTaskForm } = toRefs(data);
let bpmnElement;
watch(id, () => {
bpmnElement = window.bpmnInstances.bpmnElement;
nextTick(() => {
resetTaskForm();
});
});
function resetTaskForm() {
for (let key in defaultTaskForm.value) {
let value = bpmnElement?.businessObject[key] || this.defaultTaskForm[key];
scriptTaskForm.value[key] = value;
}
};
scriptTaskForm.value.scriptType = scriptTaskForm.value.script
? "inline"
: "external";
}
function updateElementTask() {
let taskAttr = Object.create(null);
taskAttr.scriptFormat = scriptTaskForm.value.scriptFormat || null;
taskAttr.resultVariable = scriptTaskForm.value.resultVariable || null;
if (scriptTaskForm.value.scriptType === "inline") {
taskAttr.script = scriptTaskForm.value.script || null;
taskAttr.resource = null;
} else {
taskAttr.resource = scriptTaskForm.value.resource || null;
taskAttr.script = null;
}
window.bpmnInstances.modeling.updateProperties(bpmnElement, taskAttr);
}
onBeforeUnmount(() => {
bpmnElement = null;
});
</script>

780
src/plugins/package/penal/task/task-components/UserTask.vue
View File

@ -11,21 +11,38 @@
</el-row>
<el-row>
<div v-if="dataType === 'USERS'">
<el-tag v-for="userText in selectedUser.text" :key="userText" effect="plain">
{{userText}}
<el-tag
v-for="userText in selectedUser.text"
:key="userText"
effect="plain"
>
{{ userText }}
</el-tag>
<div class="element-drawer__button">
<el-button size="small" type="primary" icon="el-icon-plus" @click="onSelectUsers()">添加用户</el-button>
<el-button
size="small"
type="primary"
icon="el-icon-plus"
@click="onSelectUsers()"
>添加用户</el-button
>
</div>
</div>
<div v-if="dataType === 'ROLES'">
<el-select v-model="roleIds" multiple size="small" placeholder="请选择 角色" @change="changeSelectRoles">
<el-select
v-model="roleIds"
multiple
size="small"
placeholder="请选择 角色"
@change="changeSelectRoles"
>
<el-option
v-for="item in roleOptions"
:key="item.roleId"
:label="item.roleName"
:value="`ROLE${item.roleId}`"
:disabled="item.status === 1">
:disabled="item.status === 1"
>
</el-option>
</el-select>
</div>
@ -41,7 +58,8 @@
checkStrictly
nodeKey="id"
:checkedKeys="deptIds"
@checked-change="checkedDeptChange">
@checked-change="checkedDeptChange"
>
</tree-select>
</div>
</el-row>
@ -52,12 +70,24 @@
<el-row>
<el-radio-group v-model="multiLoopType" @change="changeMultiLoopType">
<el-row><el-radio label="Null">无</el-radio></el-row>
<el-row><el-radio label="SequentialMultiInstance">会签（需所有审批人同意）</el-radio></el-row>
<el-row><el-radio label="ParallelMultiInstance">或签（一名审批人同意即可）</el-radio></el-row>
<el-row
><el-radio label="SequentialMultiInstance"
>会签（需所有审批人同意）</el-radio
></el-row
>
<el-row
><el-radio label="ParallelMultiInstance"
>或签（一名审批人同意即可）</el-radio
></el-row
>
</el-radio-group>
</el-row>
<el-row v-if="multiLoopType !== 'Null'">
<el-tooltip content="开启后，实例需按顺序轮流审批" placement="top-start" @click.stop.prevent>
<el-tooltip
content="开启后，实例需按顺序轮流审批"
placement="top-start"
@click.stop.prevent
>
<i class="header-icon el-icon-info"></i>
</el-tooltip>
<span class="custom-label">顺序审批：</span>
@ -97,7 +127,13 @@
</el-card>
</el-col>
<el-col :span="17">
<el-table ref="multipleTable" height="600" :data="userTableList" border @selection-change="handleSelectionChange">
<el-table
ref="multipleTable"
height="600"
:data="userTableList"
border
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="用户名" align="center" prop="nickName" />
<el-table-column label="部门" align="center" prop="dept.deptName" />
@ -111,360 +147,397 @@
</el-col>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="handleTaskUserComplete">确 定</el-button>
<el-button type="primary" @click="handleTaskUserComplete"
>确 定</el-button
>
<el-button @click="userOpen = false">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
<script setup>
import { listUser, deptTreeSelect } from "@/api/system/user";
import { listRole } from "@/api/system/role";
import TreeSelect from "@/components/TreeSelect";
import { ref, reactive, watch } from "vue";
import { ElMessage } from "element-plus";
const userTaskForm = {
dataType: '',
assignee: '',
candidateUsers: '',
candidateGroups: '',
text: '',
// dueDate: '',
// followUpDate: '',
// priority: ''
}
export default {
name: "UserTask",
props: {
id: String,
type: String
},
components: { TreeSelect },
data() {
return {
loading: false,
dataType: 'USERS',
selectedUser: {
ids: [],
text: []
},
userOpen: false,
deptName: undefined,
deptOptions: [],
deptProps: {
children: "children",
label: "label"
},
deptTempOptions: [],
userTableList: [],
userTotal: 0,
selectedUserDate: [],
roleOptions: [],
roleIds: [],
deptTreeData: [],
deptIds: [],
// 查询参数
queryParams: {
deptId: undefined
},
showMultiFlog: false,
isSequential: false,
multiLoopType: 'Null',
};
},
watch: {
id: {
immediate: true,
handler() {
this.bpmnElement = window.bpmnInstances.bpmnElement;
this.$nextTick(() => this.resetTaskForm());
}
}
},
beforeDestroy() {
this.bpmnElement = null;
},
methods: {
resetTaskForm() {
const bpmnElementObj = this.bpmnElement?.businessObject;
if (!bpmnElementObj) {
return;
}
this.clearOptionsData()
this.dataType = bpmnElementObj['dataType'];
if (this.dataType === 'USERS') {
let userIdData = bpmnElementObj['candidateUsers'] || bpmnElementObj['assignee'];
let userText = bpmnElementObj['text'] || [];
if (userIdData && userIdData.toString().length > 0 && userText && userText.length > 0) {
this.selectedUser.ids = userIdData?.toString().split(',');
this.selectedUser.text = userText?.split(',');
}
if (this.selectedUser.ids.length > 1) {
this.showMultiFlog = true;
}
} else if (this.dataType === 'ROLES') {
this.getRoleOptions();
let roleIdData = bpmnElementObj['candidateGroups'] || [];
if (roleIdData && roleIdData.length > 0) {
this.roleIds = roleIdData.split(',')
}
this.showMultiFlog = true;
} else if (this.dataType === 'DEPTS') {
this.getDeptTreeData().then(() => {
let deptIdData = bpmnElementObj['candidateGroups'] || [];
if (deptIdData && deptIdData.length > 0) {
this.deptIds = deptIdData.split(',');
}
});
this.showMultiFlog = true;
}
this.getElementLoop(bpmnElementObj);
},
/**
* 清空选项数据
*/
clearOptionsData() {
this.selectedUser.ids = [];
this.selectedUser.text = [];
this.roleIds = [];
this.deptIds = [];
},
/**
* 跟新节点数据
*/
updateElementTask() {
const taskAttr = Object.create(null);
for (let key in userTaskForm) {
taskAttr[key] = userTaskForm[key];
}
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr);
},
/**
* 查询部门下拉树结构
*/
getDeptOptions() {
return new Promise((resolve, reject) => {
if (!this.deptOptions || this.deptOptions.length <= 0) {
deptTreeSelect().then(response => {
this.deptTempOptions = response.data;
this.deptOptions = response.data;
resolve()
})
} else {
reject()
}
});
},
/**
* 查询部门下拉树结构（含部门前缀）
*/
getDeptTreeData() {
function refactorTree(data) {
return data.map(node => {
let treeData = { id: `DEPT${node.id}`, label: node.label, parentId: node.parentId, weight: node.weight };
if (node.children && node.children.length > 0) {
treeData.children = refactorTree(node.children);
}
return treeData;
});
}
return new Promise((resolve, reject) => {
if (!this.deptTreeData || this.deptTreeData.length <= 0) {
this.getDeptOptions().then(() => {
this.deptTreeData = refactorTree(this.deptOptions);
resolve()
}).catch(() => {
reject()
})
} else {
resolve()
}
})
},
/**
* 查询部门下拉树结构
*/
getRoleOptions() {
if (!this.roleOptions || this.roleOptions.length <= 0) {
listRole().then(response => this.roleOptions = response.rows);
}
},
/** 查询用户列表 */
getUserList() {
listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
this.userTableList = response.rows;
this.userTotal = response.total;
});
},
// 筛选节点
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
// 节点单击事件
handleNodeClick(data) {
this.queryParams.deptId = data.id;
this.getUserList();
},
// 关闭标签
handleClose(tag) {
this.selectedUserDate.splice(this.selectedUserDate.indexOf(tag), 1);
this.$refs.multipleTable.toggleRowSelection(tag);
},
// 多选框选中数据
handleSelectionChange(selection) {
this.selectedUserDate = selection;
},
onSelectUsers() {
this.selectedUserDate = []
this.$refs.multipleTable?.clearSelection();
this.getDeptOptions();
this.userOpen = true;
},
handleTaskUserComplete() {
if (!this.selectedUserDate || this.selectedUserDate.length <= 0) {
this.$modal.msgError('请选择用户');
return;
}
userTaskForm.dataType = 'USERS';
this.selectedUser.text = this.selectedUserDate.map(k => k.nickName) || [];
if (this.selectedUserDate.length === 1) {
let data = this.selectedUserDate[0];
userTaskForm.assignee = data.userId;
userTaskForm.text = data.nickName;
userTaskForm.candidateUsers = null;
this.showMultiFlog = false;
this.multiLoopType = 'Null';
this.changeMultiLoopType(this.multiLoopType);
} else {
userTaskForm.candidateUsers = this.selectedUserDate.map(k => k.userId).join() || null;
userTaskForm.text = this.selectedUserDate.map(k => k.nickName).join() || null;
userTaskForm.assignee = null;
this.showMultiFlog = true;
}
this.updateElementTask()
this.userOpen = false;
},
changeSelectRoles(val) {
userTaskForm.dataType = 'ROLES';
userTaskForm.candidateGroups = val.join() || null;
let textArr = this.roleOptions.filter(k => val.indexOf(`ROLE${k.roleId}`) >= 0);
userTaskForm.text = textArr?.map(k => k.roleName).join() || null;
this.updateElementTask();
},
checkedDeptChange(checkedIds, checkedData) {
userTaskForm.dataType = 'DEPTS';
if (checkedIds && checkedIds.length > 0) {
this.deptIds = checkedIds;
}
if (checkedData && checkedData.length > 0) {
userTaskForm.candidateGroups = checkedData.map(k => k.id).join() || null
userTaskForm.text = checkedData.map(k => k.label).join() || null
this.updateElementTask();
}
},
changeDataType(val) {
// 清空 userTaskForm 所有属性值
Object.keys(userTaskForm).forEach(key => userTaskForm[key] = null);
userTaskForm.dataType = val;
if (val === 'USERS') {
if (this.selectedUser && this.selectedUser.ids && this.selectedUser.ids.length > 0) {
if (this.selectedUser.ids.length === 1) {
userTaskForm.assignee = this.selectedUser.ids[0];
} else {
userTaskForm.candidateUsers = this.selectedUser.ids.join()
}
userTaskForm.text = this.selectedUser.text?.join() || null
}
} else if (val === 'ROLES') {
this.getRoleOptions();
if (this.roleIds && this.roleIds.length > 0) {
userTaskForm.candidateGroups = this.roleIds.join() || null;
let textArr = this.roleOptions.filter(k => this.roleIds.indexOf(`ROLE${k.roleId}`) >= 0);
userTaskForm.text = textArr?.map(k => k.roleName).join() || null;
}
} else if (val === 'DEPTS') {
this.getDeptTreeData();
if (this.deptIds && this.deptIds.length > 0) {
userTaskForm.candidateGroups = this.deptIds.join() || null;
let textArr = []
let treeStarkData = JSON.parse(JSON.stringify(this.deptTreeData));
this.deptIds.forEach(id => {
let stark = []
stark = stark.concat(treeStarkData);
while(stark.length) {
let temp = stark.shift();
if(temp.children) {
stark = temp.children.concat(stark);
}
if(id === temp.id) {
textArr.push(temp);
}
}
})
userTaskForm.text = textArr?.map(k => k.label).join() || null;
}
} else if (val === 'INITIATOR') {
userTaskForm.assignee = "${initiator}";
userTaskForm.text = "流程发起人";
}
this.updateElementTask();
if (val === 'ROLES' || val === 'DEPTS' || (val === 'USERS' && this.selectedUser.ids.length > 1)) {
this.showMultiFlog = true;
} else {
this.showMultiFlog = false;
}
this.multiLoopType = 'Null';
this.changeMultiLoopType(this.multiLoopType);
},
getElementLoop(businessObject) {
if (!businessObject.loopCharacteristics) {
this.multiLoopType = "Null";
return;
}
this.isSequential = businessObject.loopCharacteristics.isSequential;
if (businessObject.loopCharacteristics.completionCondition) {
if (businessObject.loopCharacteristics.completionCondition.body === "${nrOfCompletedInstances >= nrOfInstances}") {
this.multiLoopType = "SequentialMultiInstance";
} else {
this.multiLoopType = "ParallelMultiInstance";
}
}
},
changeMultiLoopType(type) {
// 取消多实例配置
if (type === "Null") {
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, { loopCharacteristics: null });
return;
}
this.multiLoopInstance = window.bpmnInstances.moddle.create("bpmn:MultiInstanceLoopCharacteristics", { isSequential: this.isSequential });
// 更新多实例配置
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
loopCharacteristics: this.multiLoopInstance,
assignee: '${assignee}'
});
// 完成条件
let completionCondition = null;
// 会签
if (type === "SequentialMultiInstance") {
completionCondition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: "${nrOfCompletedInstances >= nrOfInstances}" });
}
// 或签
if (type === "ParallelMultiInstance") {
completionCondition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: "${nrOfCompletedInstances > 0}" });
}
// 更新模块属性信息
window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, {
collection: '${multiInstanceHandler.getUserIds(execution)}',
elementVariable: 'assignee',
completionCondition
});
},
}
dataType: "",
assignee: "",
candidateUsers: "",
candidateGroups: "",
text: "",
};
const loading = ref(false);
const dataType = ref("USERS");
const userOpen = ref(false);
const deptName = ref(undefined);
const deptOptions = ref([]);
const deptTempOptions = ref([]);
const userTableList = ref([]);
const userTotal = ref(0);
const selectedUserDate = ref([]);
const roleOptions = ref([]);
const roleIds = ref([]);
const deptTreeData = ref([]);
const deptIds = ref([]);
const showMultiFlog = ref(false);
const isSequential = ref(false);
const multiLoopType = ref("Null");
const data = reactive({
selectedUser: {
ids: [],
text: [],
},
deptProps: {
children: "children",
label: "label",
},
// 查询参数
queryParams: {
deptId: undefined,
},
});
const { selectedUser, deptProps, queryParams } = toRefs(data);
let bpmnElement;
let multiLoopInstance;
let dateRange;
watch(
id,
() => {
bpmnElement = window.bpmnInstances.bpmnElement;
nextTick(() => resetTaskForm());
},
{ immediate: true }
);
function resetTaskForm() {
const bpmnElementObj = bpmnElement?.businessObject;
if (!bpmnElementObj) {
return;
}
clearOptionsData();
dataType.value = bpmnElementObj["dataType"];
if (dataType.value === "USERS") {
let userIdData =
bpmnElementObj["candidateUsers"] || bpmnElementObj["assignee"];
let userText = bpmnElementObj["text"] || [];
if (
userIdData &&
userIdData.toString().length > 0 &&
userText &&
userText.length > 0
) {
selectedUser.value.ids = userIdData?.toString().split(",");
selectedUser.value.text = userText?.split(",");
}
if (selectedUser.value.ids.length > 1) {
showMultiFlog.value = true;
}
} else if (dataType.value === "ROLES") {
getRoleOptions();
let roleIdData = bpmnElementObj["candidateGroups"] || [];
if (roleIdData && roleIdData.length > 0) {
roleIds.value = roleIdData.split(",");
}
showMultiFlog.value = true;
} else if (dataType.value === "DEPTS") {
getDeptTreeData().then(() => {
let deptIdData = bpmnElementObj["candidateGroups"] || [];
if (deptIdData && deptIdData.length > 0) {
deptIds.value = deptIdData.split(",");
}
});
showMultiFlog.value = true;
}
getElementLoop(bpmnElementObj);
}
/**
* 清空选项数据
*/
function clearOptionsData() {
selectedUser.value.ids = [];
selectedUser.value.text = [];
roleIds.value = [];
deptIds.value = [];
}
/**
* 跟新节点数据
*/
function updateElementTask() {
const taskAttr = Object.create(null);
for (let key in userTaskForm) {
taskAttr[key] = userTaskForm[key];
}
window.bpmnInstances.modeling.updateProperties(bpmnElement, taskAttr);
}
/**
* 查询部门下拉树结构
*/
function getDeptOptions() {
return new Promise((resolve, reject) => {
if (!deptOptions.value || deptOptions.value.length <= 0) {
deptTreeSelect().then((response) => {
deptTempOptions.value = response.data;
deptOptions.value = response.data;
resolve();
});
} else {
reject();
}
});
}
/**
* 查询部门下拉树结构（含部门前缀）
*/
function getDeptTreeData() {
function refactorTree(data) {
return data.map((node) => {
let treeData = {
id: `DEPT${node.id}`,
label: node.label,
parentId: node.parentId,
weight: node.weight,
};
if (node.children && node.children.length > 0) {
treeData.children = refactorTree(node.children);
}
return treeData;
});
}
return new Promise((resolve, reject) => {
if (!deptTreeData.value || deptTreeData.value.length <= 0) {
getDeptOptions()
.then(() => {
deptTreeData.value = refactorTree(deptOptions.value);
resolve();
})
.catch(() => {
reject();
});
} else {
resolve();
}
});
}
/**
* 查询部门下拉树结构
*/
function getRoleOptions() {
if (!roleOptions.value || roleOptions.value.length <= 0) {
listRole().then((response) => (roleOptions.value = response.rows));
}
}
/** 查询用户列表 */
function getUserList() {
listUser(addDateRange(queryParams.value, dateRange)).then((response) => {
userTableList.value = response.rows;
userTotal.value = response.total;
});
}
// 筛选节点
function filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
}
// 节点单击事件
function handleNodeClick(data) {
queryParams.value.deptId = data.id;
getUserList();
}
// 关闭标签
const multipleTable = ref();
function handleClose(tag) {
selectedUserDate.value.splice(selectedUserDate.value.indexOf(tag), 1);
multipleTable.value.toggleRowSelection(tag);
}
// 多选框选中数据
function handleSelectionChange(selection) {
selectedUserDate.value = selection;
}
function onSelectUsers() {
selectedUserDate.value = [];
multipleTable.value?.clearSelection();
getDeptOptions();
userOpen.value = true;
}
function handleTaskUserComplete() {
if (!selectedUserDate.value || selectedUserDate.value.length <= 0) {
ElMessage.error("请选择用户");
return;
}
userTaskForm.dataType = "USERS";
selectedUser.value.text = selectedUserDate.value.map((k) => k.nickName) || [];
if (selectedUserDate.value.length === 1) {
let data = selectedUserDate.value[0];
userTaskForm.assignee = data.userId;
userTaskForm.text = data.nickName;
userTaskForm.candidateUsers = null;
showMultiFlog.value = false;
multiLoopType.value = "Null";
changeMultiLoopType(multiLoopType.value);
} else {
userTaskForm.candidateUsers =
selectedUserDate.value.map((k) => k.userId).join() || null;
userTaskForm.text =
selectedUserDate.value.map((k) => k.nickName).join() || null;
userTaskForm.assignee = null;
showMultiFlog.value = true;
}
updateElementTask();
userOpen.value = false;
}
function changeSelectRoles(val) {
userTaskForm.dataType = "ROLES";
userTaskForm.candidateGroups = val.join() || null;
let textArr = roleOptions.value.filter(
(k) => val.indexOf(`ROLE${k.roleId}`) >= 0
);
userTaskForm.text = textArr?.map((k) => k.roleName).join() || null;
updateElementTask();
}
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 changeDataType(val) {
// 清空 userTaskForm 所有属性值
Object.keys(userTaskForm).forEach((key) => (userTaskForm[key] = null));
userTaskForm.dataType = val;
if (val === "USERS") {
if (
selectedUser.value &&
selectedUser.value.ids &&
selectedUser.value.ids.length > 0
) {
if (selectedUser.value.ids.length === 1) {
userTaskForm.assignee = selectedUser.value.ids[0];
} else {
userTaskForm.candidateUsers = selectedUser.value.ids.join();
}
userTaskForm.text = selectedUser.value.text?.join() || null;
}
} else if (val === "ROLES") {
getRoleOptions();
if (roleIds.value && roleIds.value.length > 0) {
userTaskForm.candidateGroups = roleIds.value.join() || null;
let textArr = roleOptions.value.filter(
(k) => roleIds.value.indexOf(`ROLE${k.roleId}`) >= 0
);
userTaskForm.text = textArr?.map((k) => k.roleName).join() || null;
}
} else if (val === "DEPTS") {
getDeptTreeData();
if (deptIds.value && deptIds.value.length > 0) {
userTaskForm.candidateGroups = deptIds.value.join() || null;
let textArr = [];
let treeStarkData = JSON.parse(JSON.stringify(deptTreeData.value));
deptIds.value.forEach((id) => {
let stark = [];
stark = stark.concat(treeStarkData);
while (stark.length) {
let temp = stark.shift();
if (temp.children) {
stark = temp.children.concat(stark);
}
if (id === temp.id) {
textArr.push(temp);
}
}
});
userTaskForm.text = textArr?.map((k) => k.label).join() || null;
}
} else if (val === "INITIATOR") {
userTaskForm.assignee = "${initiator}";
userTaskForm.text = "流程发起人";
}
updateElementTask();
if (
val === "ROLES" ||
val === "DEPTS" ||
(val === "USERS" && selectedUser.value.ids.length > 1)
) {
showMultiFlog.value = true;
} else {
showMultiFlog.value = false;
}
multiLoopType.value = "Null";
changeMultiLoopType(multiLoopType.value);
}
function getElementLoop(businessObject) {
if (!businessObject.loopCharacteristics) {
multiLoopType.value = "Null";
return;
}
isSequential.value = businessObject.loopCharacteristics.isSequential;
if (businessObject.loopCharacteristics.completionCondition) {
if (
businessObject.loopCharacteristics.completionCondition.body ===
"${nrOfCompletedInstances >= nrOfInstances}"
) {
multiLoopType.value = "SequentialMultiInstance";
} else {
multiLoopType.value = "ParallelMultiInstance";
}
}
}
function changeMultiLoopType(type) {
// 取消多实例配置
if (type === "Null") {
window.bpmnInstances.modeling.updateProperties(bpmnElement, {
loopCharacteristics: null,
});
return;
}
multiLoopInstance = window.bpmnInstances.moddle.create(
"bpmn:MultiInstanceLoopCharacteristics",
{ isSequential: isSequential.value }
);
// 更新多实例配置
window.bpmnInstances.modeling.updateProperties(bpmnElement, {
loopCharacteristics: multiLoopInstance,
assignee: "${assignee}",
});
// 完成条件
let completionCondition = null;
// 会签
if (type === "SequentialMultiInstance") {
completionCondition = window.bpmnInstances.moddle.create(
"bpmn:FormalExpression",
{ body: "${nrOfCompletedInstances >= nrOfInstances}" }
);
}
// 或签
if (type === "ParallelMultiInstance") {
completionCondition = window.bpmnInstances.moddle.create(
"bpmn:FormalExpression",
{ body: "${nrOfCompletedInstances > 0}" }
);
}
// 更新模块属性信息
window.bpmnInstances.modeling.updateModdleProperties(
bpmnElement,
multiLoopInstance,
{
collection: "${multiInstanceHandler.getUserIds(execution)}",
elementVariable: "assignee",
completionCondition,
}
);
}
onBeforeUnmount(() => {
bpmnElement = null;
});
</script>
<style scoped lang="scss">
@ -487,5 +560,4 @@ export default {
font-size: 14px;
color: #606266;
}
</style>

8
src/plugins/package/theme/process-designer.scss
View File

@ -39,7 +39,7 @@
&:after {
content: "|";
position: absolute;
transform: rotate(90deg) translate(200%, 60%);
transform: rotate(90deg) translate(196%, -8%);
}
}
}
@ -58,13 +58,13 @@
.align.align-center i {
transform: rotate(90deg);
&:after {
transform: rotate(90deg) translate(0, 60%);
transform: rotate(90deg) translate(0, -8%);
}
}
.align.align-middle i {
transform: rotate(0deg);
&:after {
transform: rotate(90deg) translate(0, 60%);
transform: rotate(90deg) translate(0, -8%);
}
}
}
@ -77,7 +77,7 @@
height: 100%;
position: relative;
background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+")
repeat !important;
repeat !important;
div.toggle-mode {
display: none;
}

2
src/utils/generator/config.js
View File

@ -136,7 +136,7 @@ export const inputComponents = [
changeTag: true,
labelWidth: null,
tag: "editor",
tagIcon: "document",
tagIcon: "edit",
defaultValue: null,
span: 24,
layout: "colFormItem",

41
src/views/flowable/category/index.vue
View File

@ -2,7 +2,7 @@
<div class="app-container">
<el-form
:model="queryParams"
ref="queryForm"
ref="queryFormRef"
:inline="true"
v-show="showSearch"
label-width="68px"
@ -174,13 +174,14 @@
import { download } from "@/utils/request";
import {
listAllCategory,
// getCategory,
getCategory,
delCategory,
addCategory,
// updateCategory,
updateCategory,
} from "@/api/flowable/category";
import { ElMessage, ElMessageBox } from "element-plus";
import { ref } from "vue";
// 按钮loading
const buttonLoading = ref(false);
// 遮罩层
@ -203,6 +204,7 @@ const title = ref("");
const open = ref(false);
const formRef = ref();
const queryFormRef = ref();
const data = reactive({
// 查询参数
queryParams: {
@ -265,14 +267,19 @@ function handleQuery() {
}
/** 重置按钮操作 */
function resetQuery() {
resetForm("queryForm");
if (queryFormRef.value) {
queryFormRef.value.resetFields();
}
handleQuery();
}
// 多选框选中数据
function handleSelectionChange(selection) {
this.ids = selection.map((item) => item.categoryId);
this.single = selection.length !== 1;
this.multiple = !selection.length;
ids.value = selection.map((item) => ({
id: item.categoryId,
uuid: item.uuid,
}));
single.value = selection.length !== 1;
multiple.value = !selection.length;
}
/** 新增按钮操作 */
function handleAdd() {
@ -282,14 +289,14 @@ function handleAdd() {
}
/** 修改按钮操作 */
function handleUpdate(row) {
this.loading = true;
this.reset();
const categoryId = row.categoryId || this.ids;
loading.value = true;
reset();
const categoryId = row.categoryId || ids.value[0].id;
getCategory(categoryId).then((response) => {
this.loading = false;
this.form = response.data;
this.open = true;
this.title = "修改流程分类";
loading.value = false;
form.value = response.data;
open.value = true;
title.value = "修改流程分类";
});
}
/** 提交按钮 */
@ -325,7 +332,9 @@ function submitForm() {
function handleDelete(row) {
const categoryIds = [{ id: row.categoryId, uuid: row.uuid }] || ids.value;
ElMessageBox.confirm(
'是否确认删除【请填写功能名称】编号为"' + categoryIds + '"的数据项？'
'是否确认删除【请填写功能名称】编号为"' +
categoryIds.map((el) => el.id).join(",") +
'"的数据项？'
)
.then(() => {
loading.value = true;
@ -343,7 +352,7 @@ function handleDelete(row) {
/** 导出按钮操作 */
function handleExport() {
download(
"workflow/category/export",
"flowable/category/export",
{
...queryParams.value,
},

22
src/views/flowable/deploy/index.vue
View File

@ -2,7 +2,7 @@
<div class="app-container">
<el-form
:model="queryParams"
ref="queryForm"
ref="queryFormRef"
:inline="true"
v-show="showSearch"
label-width="68px"
@ -75,7 +75,7 @@
size="small"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['workflow:deploy:remove']"
v-hasPermi="['flowable:deploy:remove']"
>删除</el-button
>
</el-col>
@ -141,18 +141,20 @@
<template #default="{ row }">
<el-button
link
type="primary"
size="small"
icon="price-tag"
@click.native="handlePublish(row)"
v-hasPermi="['workflow:deploy:list']"
v-hasPermi="['flowable:deploy:list']"
>版本管理</el-button
>
<el-button
link
type="danger"
size="small"
icon="delete"
@click="handleDelete(row)"
v-hasPermi="['workflow:deploy:remove']"
v-hasPermi="['flowable:deploy:remove']"
>删除</el-button
>
</template>
@ -230,7 +232,7 @@
icon="video-pause"
v-if="!row.suspended"
@click.native="handleChangeState(row, 'suspended')"
v-hasPermi="['workflow:deploy:status']"
v-hasPermi="['flowable:deploy:status']"
>挂起</el-button
>
<el-button
@ -239,7 +241,7 @@
icon="video-play"
v-if="row.suspended"
@click.native="handleChangeState(row, 'active')"
v-hasPermi="['workflow:deploy:status']"
v-hasPermi="['flowable:deploy:status']"
>激活</el-button
>
<el-button
@ -247,7 +249,7 @@
size="small"
icon="delete"
@click="handleDelete(row)"
v-hasPermi="['workflow:deploy:remove']"
v-hasPermi="['flowable:deploy:remove']"
>删除</el-button
>
</template>
@ -359,8 +361,9 @@ function handleQuery() {
getList();
}
/** 重置按钮操作 */
const queryFormRef = ref();
function resetQuery() {
resetForm("queryForm");
queryFormRef.value && queryFormRef.value.resetFields();
handleQuery();
}
// 多选框选中数据
@ -414,6 +417,9 @@ function handleDelete(row) {
.then(() => {
loading.value = false;
getList();
if (publishQueryParams.value.processKey) {
getPublishList();
}
ElMessage.success("删除成功");
})
.finally(() => {

19
src/views/flowable/form/index.vue
View File

@ -133,7 +133,7 @@
<!-- 添加或修改流程表单对话框 -->
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="表单名称" prop="formName">
<el-input v-model="form.formName" placeholder="请输入表单名称" />
</el-form-item>
@ -202,6 +202,7 @@ const formConfOpen = ref(false);
const formTitle = ref("");
// 是否显示弹出层
const open = ref(false);
const formRef = ref();
const data = reactive({
formConf: {}, // 默认表单数据
// 查询参数
@ -285,7 +286,7 @@ function handleUpdate(row) {
}
/** 提交按钮 */
function submitForm() {
this.$refs["form"].validate((valid) => {
formRef.value.validate((valid) => {
if (valid) {
if (form.value.formId != null) {
updateForm(form.value).then((response) => {
@ -295,9 +296,9 @@ function submitForm() {
});
} else {
addForm(form.value).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
ElMessage.success("新增成功");
open.value = false;
getList();
});
}
}
@ -325,16 +326,16 @@ function handleDelete(row) {
}
/** 导出按钮操作 */
function handleExport() {
let _this = this;
this.$confirm("是否确认导出所有流程表单数据项?", "警告", {
// let _this = this;
ElMessageBox.confirm("是否确认导出所有流程表单数据项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(function () {
_this.download(
download(
"/workflow/form/export",
{
..._this.queryParams,
...queryParams.value,
},
`form_${new Date().getTime()}.xlsx`
);

22
src/views/flowable/model/index.vue
View File

@ -2,7 +2,7 @@
<div class="app-container">
<el-form
:model="queryParams"
ref="queryForm"
ref="queryFormRef"
:inline="true"
v-show="showSearch"
label-width="68px"
@ -163,6 +163,7 @@
<el-button
size="small"
link
type="primary"
icon="edit"
@click="handleUpdate(row)"
v-hasPermi="['flowable:model:edit']"
@ -170,6 +171,7 @@
>
<el-button
link
type="primary"
size="small"
icon="brush"
@click="handleDesigner(row)"
@ -178,6 +180,7 @@
>
<el-button
link
type="primary"
size="small"
icon="video-play"
v-hasPermi="['flowable:model:deploy']"
@ -329,7 +332,6 @@
width="70%"
append-to-body
>
<!-- TODO: -->
<process-viewer
:key="`designer-${processView.index}`"
:xml="processView.xmlData"
@ -426,7 +428,6 @@
append-to-body
fullscreen
>
<!-- TODO: -->
<process-designer
:key="designerOpen"
style="border: 1px solid rgba(0, 0, 0, 0.1)"
@ -585,19 +586,20 @@ function reset() {
}
/** 搜索按钮操作 */
function handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
queryParams.value.pageNum = 1;
getList();
}
/** 重置按钮操作 */
const queryFormRef = ref();
function resetQuery() {
this.$refs.queryForm.resetFields();
this.handleQuery();
queryFormRef.value.resetFields();
handleQuery();
}
// 多选框选中数据
function handleSelectionChange(selection) {
this.ids = selection.map((item) => item.modelId);
this.single = selection.length !== 1;
this.multiple = !selection.length;
ids.value = selection.map((item) => item.modelId);
single.value = selection.length !== 1;
multiple.value = !selection.length;
}
/** 部署流程 */
function handleDeploy(row) {