feat: bpmnProcessDesigner 迁移（纯复制）
This commit is contained in:
puhui999
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-form size="small" label-width="90px">
|
||||
<!-- add by 芋艿：由于「异步延续」暂时用不到，所以这里 display 为 none -->
|
||||
<el-form-item label="异步延续" style="display: none">
|
||||
<el-checkbox
|
||||
v-model="taskConfigForm.asyncBefore"
|
||||
label="异步前"
|
||||
value="异步前"
|
||||
@change="changeTaskAsync"
|
||||
/>
|
||||
<el-checkbox
|
||||
v-model="taskConfigForm.asyncAfter"
|
||||
label="异步后"
|
||||
value="异步后"
|
||||
@change="changeTaskAsync"
|
||||
/>
|
||||
<el-checkbox
|
||||
v-model="taskConfigForm.exclusive"
|
||||
v-if="taskConfigForm.asyncAfter || taskConfigForm.asyncBefore"
|
||||
label="排除"
|
||||
value="排除"
|
||||
@change="changeTaskAsync"
|
||||
/>
|
||||
</el-form-item>
|
||||
<component :is="witchTaskComponent" v-bind="$props" />
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { installedComponent } from './data';
|
||||
|
||||
defineOptions({ name: 'ElementTaskConfig' });
|
||||
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
type: String,
|
||||
});
|
||||
const taskConfigForm = ref({
|
||||
asyncAfter: false,
|
||||
asyncBefore: false,
|
||||
exclusive: false,
|
||||
});
|
||||
const witchTaskComponent = ref();
|
||||
|
||||
const bpmnElement = ref();
|
||||
|
||||
const bpmnInstances = () => (window as any).bpmnInstances;
|
||||
const changeTaskAsync = () => {
|
||||
if (!taskConfigForm.value.asyncBefore && !taskConfigForm.value.asyncAfter) {
|
||||
taskConfigForm.value.exclusive = false;
|
||||
}
|
||||
bpmnInstances().modeling.updateProperties(bpmnInstances().bpmnElement, {
|
||||
...taskConfigForm.value,
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.id,
|
||||
() => {
|
||||
bpmnElement.value = bpmnInstances().bpmnElement;
|
||||
taskConfigForm.value.asyncBefore =
|
||||
bpmnElement.value?.businessObject?.asyncBefore;
|
||||
taskConfigForm.value.asyncAfter =
|
||||
bpmnElement.value?.businessObject?.asyncAfter;
|
||||
taskConfigForm.value.exclusive =
|
||||
bpmnElement.value?.businessObject?.exclusive;
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
watch(
|
||||
() => props.type,
|
||||
() => {
|
||||
if (props.type) {
|
||||
witchTaskComponent.value = installedComponent[props.type].component;
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
</script>
|
||||
@@ -0,0 +1,36 @@
|
||||
import CallActivity from './task-components/CallActivity.vue';
|
||||
import ReceiveTask from './task-components/ReceiveTask.vue';
|
||||
import ScriptTask from './task-components/ScriptTask.vue';
|
||||
import ServiceTask from './task-components/ServiceTask.vue';
|
||||
import UserTask from './task-components/UserTask.vue';
|
||||
|
||||
export const installedComponent = {
|
||||
UserTask: {
|
||||
name: '用户任务',
|
||||
component: UserTask,
|
||||
},
|
||||
ServiceTask: {
|
||||
name: '服务任务',
|
||||
component: ServiceTask,
|
||||
},
|
||||
ScriptTask: {
|
||||
name: '脚本任务',
|
||||
component: ScriptTask,
|
||||
},
|
||||
ReceiveTask: {
|
||||
name: '接收任务',
|
||||
component: ReceiveTask,
|
||||
},
|
||||
CallActivity: {
|
||||
name: '调用活动',
|
||||
component: CallActivity,
|
||||
},
|
||||
};
|
||||
|
||||
export const getTaskCollapseItemName = (elementType) => {
|
||||
return installedComponent[elementType].name;
|
||||
};
|
||||
|
||||
export const isTaskCollapseItemShow = (elementType) => {
|
||||
return installedComponent[elementType];
|
||||
};
|
||||
@@ -0,0 +1,325 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form label-width="100px">
|
||||
<el-form-item label="实例名称" prop="processInstanceName">
|
||||
<el-input
|
||||
v-model="formData.processInstanceName"
|
||||
clearable
|
||||
placeholder="请输入实例名称"
|
||||
@change="updateCallActivityAttr('processInstanceName')"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- TODO 需要可选择已存在的流程 -->
|
||||
<el-form-item label="被调用流程" prop="calledElement">
|
||||
<el-input
|
||||
v-model="formData.calledElement"
|
||||
clearable
|
||||
placeholder="请输入被调用流程"
|
||||
@change="updateCallActivityAttr('calledElement')"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="继承变量" prop="inheritVariables">
|
||||
<el-switch
|
||||
v-model="formData.inheritVariables"
|
||||
@change="updateCallActivityAttr('inheritVariables')"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="继承业务键" prop="inheritBusinessKey">
|
||||
<el-switch
|
||||
v-model="formData.inheritBusinessKey"
|
||||
@change="updateCallActivityAttr('inheritBusinessKey')"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
v-if="!formData.inheritBusinessKey"
|
||||
label="业务键表达式"
|
||||
prop="businessKey"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.businessKey"
|
||||
clearable
|
||||
placeholder="请输入业务键表达式"
|
||||
@change="updateCallActivityAttr('businessKey')"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-divider />
|
||||
<div>
|
||||
<div class="mb-10px flex">
|
||||
<el-text>输入参数</el-text>
|
||||
<XButton
|
||||
class="ml-auto"
|
||||
type="primary"
|
||||
preIcon="ep:plus"
|
||||
title="添加参数"
|
||||
size="small"
|
||||
@click="openVariableForm('in', null, -1)"
|
||||
/>
|
||||
</div>
|
||||
<el-table :data="inVariableList" max-height="240" fit border>
|
||||
<el-table-column
|
||||
label="源"
|
||||
prop="source"
|
||||
min-width="100px"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
label="目标"
|
||||
prop="target"
|
||||
min-width="100px"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column label="操作" width="110px">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
@click="openVariableForm('in', scope.row, scope.$index)"
|
||||
size="small"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-divider direction="vertical" />
|
||||
<el-button
|
||||
link
|
||||
size="small"
|
||||
style="color: #ff4d4f"
|
||||
@click="removeVariable('in', scope.$index)"
|
||||
>
|
||||
移除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<el-divider />
|
||||
<div>
|
||||
<div class="mb-10px flex">
|
||||
<el-text>输出参数</el-text>
|
||||
<XButton
|
||||
class="ml-auto"
|
||||
type="primary"
|
||||
preIcon="ep:plus"
|
||||
title="添加参数"
|
||||
size="small"
|
||||
@click="openVariableForm('out', null, -1)"
|
||||
/>
|
||||
</div>
|
||||
<el-table :data="outVariableList" max-height="240" fit border>
|
||||
<el-table-column
|
||||
label="源"
|
||||
prop="source"
|
||||
min-width="100px"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
label="目标"
|
||||
prop="target"
|
||||
min-width="100px"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column label="操作" width="110px">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
@click="openVariableForm('out', scope.row, scope.$index)"
|
||||
size="small"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-divider direction="vertical" />
|
||||
<el-button
|
||||
link
|
||||
size="small"
|
||||
style="color: #ff4d4f"
|
||||
@click="removeVariable('out', scope.$index)"
|
||||
>
|
||||
移除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<!-- 添加或修改参数 -->
|
||||
<el-dialog
|
||||
v-model="variableDialogVisible"
|
||||
title="参数配置"
|
||||
width="600px"
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form
|
||||
:model="varialbeFormData"
|
||||
label-width="80px"
|
||||
ref="varialbeFormRef"
|
||||
>
|
||||
<el-form-item label="源：" prop="source">
|
||||
<el-input v-model="varialbeFormData.source" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="目标：" prop="target">
|
||||
<el-input v-model="varialbeFormData.target" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="variableDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="saveVariable">确 定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineOptions({ name: 'CallActivity' });
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
type: String,
|
||||
});
|
||||
const prefix = inject('prefix');
|
||||
const message = useMessage();
|
||||
|
||||
const formData = ref({
|
||||
processInstanceName: '',
|
||||
calledElement: '',
|
||||
inheritVariables: false,
|
||||
businessKey: '',
|
||||
inheritBusinessKey: false,
|
||||
calledElementType: 'key',
|
||||
});
|
||||
const inVariableList = ref();
|
||||
const outVariableList = ref();
|
||||
const variableType = ref(); // 参数类型
|
||||
const editingVariableIndex = ref(-1); // 编辑参数下标
|
||||
const variableDialogVisible = ref(false);
|
||||
const varialbeFormRef = ref();
|
||||
const varialbeFormData = ref({
|
||||
source: '',
|
||||
target: '',
|
||||
});
|
||||
|
||||
const bpmnInstances = () => (window as any)?.bpmnInstances;
|
||||
const bpmnElement = ref();
|
||||
const otherExtensionList = ref();
|
||||
|
||||
const initCallActivity = () => {
|
||||
bpmnElement.value = bpmnInstances().bpmnElement;
|
||||
console.log(bpmnElement.value.businessObject, 'callActivity');
|
||||
|
||||
// 初始化所有配置项
|
||||
Object.keys(formData.value).forEach((key) => {
|
||||
formData.value[key] =
|
||||
bpmnElement.value.businessObject[key] ?? formData.value[key];
|
||||
});
|
||||
|
||||
otherExtensionList.value = []; // 其他扩展配置
|
||||
inVariableList.value = [];
|
||||
outVariableList.value = [];
|
||||
// 初始化输入参数
|
||||
bpmnElement.value.businessObject?.extensionElements?.values?.forEach((ex) => {
|
||||
if (ex.$type === `${prefix}:In`) {
|
||||
inVariableList.value.push(ex);
|
||||
} else if (ex.$type === `${prefix}:Out`) {
|
||||
outVariableList.value.push(ex);
|
||||
} else {
|
||||
otherExtensionList.value.push(ex);
|
||||
}
|
||||
});
|
||||
|
||||
// 默认添加
|
||||
// bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
// calledElementType: 'key'
|
||||
// })
|
||||
};
|
||||
|
||||
const updateCallActivityAttr = (attr) => {
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
[attr]: formData.value[attr],
|
||||
});
|
||||
};
|
||||
|
||||
const openVariableForm = (type, data, index) => {
|
||||
editingVariableIndex.value = index;
|
||||
variableType.value = type;
|
||||
varialbeFormData.value = index === -1 ? {} : { ...data };
|
||||
variableDialogVisible.value = true;
|
||||
};
|
||||
|
||||
const removeVariable = async (type, index) => {
|
||||
try {
|
||||
await message.delConfirm();
|
||||
if (type === 'in') {
|
||||
inVariableList.value.splice(index, 1);
|
||||
}
|
||||
if (type === 'out') {
|
||||
outVariableList.value.splice(index, 1);
|
||||
}
|
||||
updateElementExtensions();
|
||||
} catch {}
|
||||
};
|
||||
|
||||
const saveVariable = () => {
|
||||
if (editingVariableIndex.value === -1) {
|
||||
if (variableType.value === 'in') {
|
||||
inVariableList.value.push(
|
||||
bpmnInstances().moddle.create(`${prefix}:In`, {
|
||||
...varialbeFormData.value,
|
||||
}),
|
||||
);
|
||||
}
|
||||
if (variableType.value === 'out') {
|
||||
outVariableList.value.push(
|
||||
bpmnInstances().moddle.create(`${prefix}:Out`, {
|
||||
...varialbeFormData.value,
|
||||
}),
|
||||
);
|
||||
}
|
||||
updateElementExtensions();
|
||||
} else {
|
||||
if (variableType.value === 'in') {
|
||||
inVariableList.value[editingVariableIndex.value].source =
|
||||
varialbeFormData.value.source;
|
||||
inVariableList.value[editingVariableIndex.value].target =
|
||||
varialbeFormData.value.target;
|
||||
}
|
||||
if (variableType.value === 'out') {
|
||||
outVariableList.value[editingVariableIndex.value].source =
|
||||
varialbeFormData.value.source;
|
||||
outVariableList.value[editingVariableIndex.value].target =
|
||||
varialbeFormData.value.target;
|
||||
}
|
||||
}
|
||||
variableDialogVisible.value = false;
|
||||
};
|
||||
|
||||
const updateElementExtensions = () => {
|
||||
const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
|
||||
values: [
|
||||
...inVariableList.value,
|
||||
...outVariableList.value,
|
||||
...otherExtensionList.value,
|
||||
],
|
||||
});
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
extensionElements: extensions,
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.id,
|
||||
(val) => {
|
||||
val &&
|
||||
val.length &&
|
||||
nextTick(() => {
|
||||
initCallActivity();
|
||||
});
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,81 @@
|
||||
<!-- 表达式选择 -->
|
||||
<template>
|
||||
<Dialog title="请选择表达式" v-model="dialogVisible" width="1024px">
|
||||
<ContentWrap>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="list"
|
||||
:stripe="true"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
<el-table-column label="名字" align="center" prop="name" />
|
||||
<el-table-column label="表达式" align="center" prop="expression" />
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" @click="select(scope.row)">
|
||||
选择
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { CommonStatusEnum } from '@/utils/constants';
|
||||
import {
|
||||
ProcessExpressionApi,
|
||||
ProcessExpressionVO,
|
||||
} from '@/api/bpm/processExpression';
|
||||
|
||||
/** BPM 流程 表单 */
|
||||
defineOptions({ name: 'ProcessExpressionDialog' });
|
||||
|
||||
const dialogVisible = ref(false); // 弹窗的是否展示
|
||||
const loading = ref(true); // 列表的加载中
|
||||
const list = ref<ProcessExpressionVO[]>([]); // 列表的数据
|
||||
const total = ref(0); // 列表的总页数
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
type: '',
|
||||
status: CommonStatusEnum.ENABLE,
|
||||
});
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = (type: string) => {
|
||||
queryParams.pageNo = 1;
|
||||
queryParams.type = type;
|
||||
getList();
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
defineExpose({ open }); // 提供 open 方法，用于打开弹窗
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const data =
|
||||
await ProcessExpressionApi.getProcessExpressionPage(queryParams);
|
||||
list.value = data.list;
|
||||
total.value = data.total;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success']); // 定义 success 事件，用于操作成功后的回调
|
||||
const select = async (row) => {
|
||||
dialogVisible.value = false;
|
||||
// 发送操作成功的事件
|
||||
emit('select', row);
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<div style="margin-top: 16px">
|
||||
<el-form-item label="消息实例">
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
"
|
||||
>
|
||||
<el-select v-model="bindMessageId" @change="updateTaskMessage">
|
||||
<el-option
|
||||
v-for="key in Object.keys(messageMap)"
|
||||
:value="key"
|
||||
:label="messageMap[key]"
|
||||
:key="key"
|
||||
/>
|
||||
</el-select>
|
||||
<XButton
|
||||
type="primary"
|
||||
preIcon="ep: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">
|
||||
<el-form-item label="消息ID">
|
||||
<el-input v-model="newMessageForm.id" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="消息名称">
|
||||
<el-input v-model="newMessageForm.name" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button size="small" type="primary" @click="createNewMessage"
|
||||
>确 认</el-button
|
||||
>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineOptions({ name: 'ReceiveTask' });
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
type: String,
|
||||
});
|
||||
|
||||
const message = useMessage();
|
||||
|
||||
const bindMessageId = ref('');
|
||||
const newMessageForm = ref<any>({});
|
||||
const messageMap = ref<any>({});
|
||||
const messageModelVisible = ref(false);
|
||||
const bpmnElement = ref<any>();
|
||||
const bpmnMessageRefsMap = ref<any>();
|
||||
const bpmnRootElements = ref<any>();
|
||||
|
||||
const bpmnInstances = () => (window as any).bpmnInstances;
|
||||
const getBindMessage = () => {
|
||||
bpmnElement.value = bpmnInstances().bpmnElement;
|
||||
bindMessageId.value =
|
||||
bpmnElement.value.businessObject?.messageRef?.id || '-1';
|
||||
};
|
||||
const openMessageModel = () => {
|
||||
messageModelVisible.value = true;
|
||||
newMessageForm.value = {};
|
||||
};
|
||||
const createNewMessage = () => {
|
||||
if (messageMap.value[newMessageForm.value.id]) {
|
||||
message.error('该消息已存在，请修改id后重新保存');
|
||||
return;
|
||||
}
|
||||
const newMessage = bpmnInstances().moddle.create(
|
||||
'bpmn:Message',
|
||||
newMessageForm.value,
|
||||
);
|
||||
bpmnRootElements.value.push(newMessage);
|
||||
messageMap.value[newMessageForm.value.id] = newMessageForm.value.name;
|
||||
bpmnMessageRefsMap.value[newMessageForm.value.id] = newMessage;
|
||||
messageModelVisible.value = false;
|
||||
};
|
||||
const updateTaskMessage = (messageId) => {
|
||||
if (messageId === '-1') {
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
messageRef: null,
|
||||
});
|
||||
} else {
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
messageRef: bpmnMessageRefsMap.value[messageId],
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
bpmnMessageRefsMap.value = Object.create(null);
|
||||
bpmnRootElements.value =
|
||||
bpmnInstances().modeler.getDefinitions().rootElements;
|
||||
bpmnRootElements.value
|
||||
.filter((el) => el.$type === 'bpmn:Message')
|
||||
.forEach((m) => {
|
||||
bpmnMessageRefsMap.value[m.id] = m;
|
||||
messageMap.value[m.id] = m.name;
|
||||
});
|
||||
messageMap.value['-1'] = '无';
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
bpmnElement.value = null;
|
||||
});
|
||||
watch(
|
||||
() => props.id,
|
||||
() => {
|
||||
// bpmnElement.value = bpmnInstances().bpmnElement
|
||||
nextTick(() => {
|
||||
getBindMessage();
|
||||
});
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
</script>
|
||||
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div style="margin-top: 16px">
|
||||
<el-form-item label="脚本格式">
|
||||
<el-input
|
||||
v-model="scriptTaskForm.scriptFormat"
|
||||
clearable
|
||||
@input="updateElementTask()"
|
||||
@change="updateElementTask()"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="脚本类型">
|
||||
<el-select v-model="scriptTaskForm.scriptType">
|
||||
<el-option label="内联脚本" value="inline" />
|
||||
<el-option label="外部资源" value="external" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="脚本" v-show="scriptTaskForm.scriptType === 'inline'">
|
||||
<el-input
|
||||
v-model="scriptTaskForm.script"
|
||||
type="textarea"
|
||||
resize="vertical"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
clearable
|
||||
@input="updateElementTask()"
|
||||
@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>
|
||||
<el-form-item label="结果变量">
|
||||
<el-input
|
||||
v-model="scriptTaskForm.resultVariable"
|
||||
clearable
|
||||
@input="updateElementTask()"
|
||||
@change="updateElementTask()"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineOptions({ name: 'ScriptTask' });
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
type: String,
|
||||
});
|
||||
const defaultTaskForm = ref({
|
||||
scriptFormat: '',
|
||||
script: '',
|
||||
resource: '',
|
||||
resultVariable: '',
|
||||
});
|
||||
const scriptTaskForm = ref<any>({});
|
||||
const bpmnElement = ref();
|
||||
|
||||
const bpmnInstances = () => (window as any)?.bpmnInstances;
|
||||
|
||||
const resetTaskForm = () => {
|
||||
for (let key in defaultTaskForm.value) {
|
||||
let value =
|
||||
bpmnElement.value?.businessObject[key] || defaultTaskForm.value[key];
|
||||
scriptTaskForm.value[key] = value;
|
||||
}
|
||||
scriptTaskForm.value.scriptType = scriptTaskForm.value.script
|
||||
? 'inline'
|
||||
: 'external';
|
||||
};
|
||||
const 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;
|
||||
}
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), taskAttr);
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
bpmnElement.value = null;
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.id,
|
||||
() => {
|
||||
bpmnElement.value = bpmnInstances().bpmnElement;
|
||||
nextTick(() => {
|
||||
resetTaskForm();
|
||||
});
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
</script>
|
||||
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form-item label="执行类型" key="executeType">
|
||||
<el-select v-model="serviceTaskForm.executeType">
|
||||
<el-option label="Java类" value="class" />
|
||||
<el-option label="表达式" value="expression" />
|
||||
<el-option label="代理表达式" value="delegateExpression" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="serviceTaskForm.executeType === 'class'"
|
||||
label="Java类"
|
||||
prop="class"
|
||||
key="execute-class"
|
||||
>
|
||||
<el-input
|
||||
v-model="serviceTaskForm.class"
|
||||
clearable
|
||||
@change="updateElementTask"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="serviceTaskForm.executeType === 'expression'"
|
||||
label="表达式"
|
||||
prop="expression"
|
||||
key="execute-expression"
|
||||
>
|
||||
<el-input
|
||||
v-model="serviceTaskForm.expression"
|
||||
clearable
|
||||
@change="updateElementTask"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="serviceTaskForm.executeType === 'delegateExpression'"
|
||||
label="代理表达式"
|
||||
prop="delegateExpression"
|
||||
key="execute-delegate"
|
||||
>
|
||||
<el-input
|
||||
v-model="serviceTaskForm.delegateExpression"
|
||||
clearable
|
||||
@change="updateElementTask"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineOptions({ name: 'ServiceTask' });
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
type: String,
|
||||
});
|
||||
|
||||
const defaultTaskForm = ref({
|
||||
executeType: '',
|
||||
class: '',
|
||||
expression: '',
|
||||
delegateExpression: '',
|
||||
});
|
||||
|
||||
const serviceTaskForm = ref<any>({});
|
||||
const bpmnElement = ref();
|
||||
|
||||
const bpmnInstances = () => (window as any)?.bpmnInstances;
|
||||
|
||||
const resetTaskForm = () => {
|
||||
for (let key in defaultTaskForm.value) {
|
||||
let value =
|
||||
bpmnElement.value?.businessObject[key] || defaultTaskForm.value[key];
|
||||
serviceTaskForm.value[key] = value;
|
||||
if (value) {
|
||||
serviceTaskForm.value.executeType = key;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const updateElementTask = () => {
|
||||
let taskAttr = Object.create(null);
|
||||
const type = serviceTaskForm.value.executeType;
|
||||
for (let key in serviceTaskForm.value) {
|
||||
if (key !== 'executeType' && key !== type) taskAttr[key] = null;
|
||||
}
|
||||
taskAttr[type] = serviceTaskForm.value[type] || '';
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), taskAttr);
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
bpmnElement.value = null;
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.id,
|
||||
() => {
|
||||
bpmnElement.value = bpmnInstances().bpmnElement;
|
||||
nextTick(() => {
|
||||
resetTaskForm();
|
||||
});
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
</script>
|
||||
@@ -0,0 +1,520 @@
|
||||
<template>
|
||||
<el-form label-width="120px">
|
||||
<el-form-item label="规则类型" prop="candidateStrategy">
|
||||
<el-select
|
||||
v-model="userTaskForm.candidateStrategy"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
@change="changeCandidateStrategy"
|
||||
>
|
||||
<el-option
|
||||
v-for="(dict, index) in CANDIDATE_STRATEGY"
|
||||
:key="index"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="userTaskForm.candidateStrategy == CandidateStrategy.ROLE"
|
||||
label="指定角色"
|
||||
prop="candidateParam"
|
||||
>
|
||||
<el-select
|
||||
v-model="userTaskForm.candidateParam"
|
||||
clearable
|
||||
multiple
|
||||
style="width: 100%"
|
||||
@change="updateElementTask"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in roleOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="
|
||||
userTaskForm.candidateStrategy == CandidateStrategy.DEPT_MEMBER ||
|
||||
userTaskForm.candidateStrategy == CandidateStrategy.DEPT_LEADER ||
|
||||
userTaskForm.candidateStrategy ==
|
||||
CandidateStrategy.MULTI_LEVEL_DEPT_LEADER
|
||||
"
|
||||
label="指定部门"
|
||||
prop="candidateParam"
|
||||
span="24"
|
||||
>
|
||||
<el-tree-select
|
||||
ref="treeRef"
|
||||
v-model="userTaskForm.candidateParam"
|
||||
:data="deptTreeOptions"
|
||||
:props="defaultProps"
|
||||
empty-text="加载中，请稍后"
|
||||
multiple
|
||||
node-key="id"
|
||||
show-checkbox
|
||||
@change="updateElementTask"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="userTaskForm.candidateStrategy == CandidateStrategy.POST"
|
||||
label="指定岗位"
|
||||
prop="candidateParam"
|
||||
span="24"
|
||||
>
|
||||
<el-select
|
||||
v-model="userTaskForm.candidateParam"
|
||||
clearable
|
||||
multiple
|
||||
style="width: 100%"
|
||||
@change="updateElementTask"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in postOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="userTaskForm.candidateStrategy == CandidateStrategy.USER"
|
||||
label="指定用户"
|
||||
prop="candidateParam"
|
||||
span="24"
|
||||
>
|
||||
<el-select
|
||||
v-model="userTaskForm.candidateParam"
|
||||
clearable
|
||||
multiple
|
||||
style="width: 100%"
|
||||
@change="updateElementTask"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in userOptions"
|
||||
:key="item.id"
|
||||
:label="item.nickname"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="userTaskForm.candidateStrategy === CandidateStrategy.USER_GROUP"
|
||||
label="指定用户组"
|
||||
prop="candidateParam"
|
||||
>
|
||||
<el-select
|
||||
v-model="userTaskForm.candidateParam"
|
||||
clearable
|
||||
multiple
|
||||
style="width: 100%"
|
||||
@change="updateElementTask"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in userGroupOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="userTaskForm.candidateStrategy === CandidateStrategy.FORM_USER"
|
||||
label="表单内用户字段"
|
||||
prop="formUser"
|
||||
>
|
||||
<el-select
|
||||
v-model="userTaskForm.candidateParam"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
@change="handleFormUserChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, idx) in userFieldOnFormOptions"
|
||||
:key="idx"
|
||||
:label="item.title"
|
||||
:value="item.field"
|
||||
:disabled="!item.required"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="
|
||||
userTaskForm.candidateStrategy === CandidateStrategy.FORM_DEPT_LEADER
|
||||
"
|
||||
label="表单内部门字段"
|
||||
prop="formDept"
|
||||
>
|
||||
<el-select
|
||||
v-model="userTaskForm.candidateParam"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
@change="updateElementTask"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, idx) in deptFieldOnFormOptions"
|
||||
:key="idx"
|
||||
:label="item.title"
|
||||
:value="item.field"
|
||||
:disabled="!item.required"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="
|
||||
userTaskForm.candidateStrategy ==
|
||||
CandidateStrategy.MULTI_LEVEL_DEPT_LEADER ||
|
||||
userTaskForm.candidateStrategy ==
|
||||
CandidateStrategy.START_USER_DEPT_LEADER ||
|
||||
userTaskForm.candidateStrategy ==
|
||||
CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER ||
|
||||
userTaskForm.candidateStrategy == CandidateStrategy.FORM_DEPT_LEADER
|
||||
"
|
||||
:label="deptLevelLabel!"
|
||||
prop="deptLevel"
|
||||
span="24"
|
||||
>
|
||||
<el-select v-model="deptLevel" clearable @change="updateElementTask">
|
||||
<el-option
|
||||
v-for="(item, index) in MULTI_LEVEL_DEPT"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="userTaskForm.candidateStrategy === CandidateStrategy.EXPRESSION"
|
||||
label="流程表达式"
|
||||
prop="candidateParam"
|
||||
>
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="userTaskForm.candidateParam[0]"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
@change="updateElementTask"
|
||||
/>
|
||||
<XButton
|
||||
class="!w-1/1 mt-5px"
|
||||
type="success"
|
||||
preIcon="ep:select"
|
||||
title="选择表达式"
|
||||
size="small"
|
||||
@click="openProcessExpressionDialog"
|
||||
/>
|
||||
<!-- 选择弹窗 -->
|
||||
<ProcessExpressionDialog
|
||||
ref="processExpressionDialogRef"
|
||||
@select="selectProcessExpression"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="跳过表达式" prop="skipExpression">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="userTaskForm.skipExpression"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
@change="updateSkipExpression"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
CANDIDATE_STRATEGY,
|
||||
CandidateStrategy,
|
||||
FieldPermissionType,
|
||||
MULTI_LEVEL_DEPT,
|
||||
} from '@/components/SimpleProcessDesignerV2/src/consts';
|
||||
import { defaultProps, handleTree } from '@/utils/tree';
|
||||
import * as RoleApi from '@/api/system/role';
|
||||
import * as DeptApi from '@/api/system/dept';
|
||||
import * as PostApi from '@/api/system/post';
|
||||
import * as UserApi from '@/api/system/user';
|
||||
import * as UserGroupApi from '@/api/bpm/userGroup';
|
||||
import ProcessExpressionDialog from './ProcessExpressionDialog.vue';
|
||||
import { ProcessExpressionVO } from '@/api/bpm/processExpression';
|
||||
import { useFormFieldsPermission } from '@/components/SimpleProcessDesignerV2/src/node';
|
||||
|
||||
defineOptions({ name: 'UserTask' });
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
type: String,
|
||||
});
|
||||
const prefix = inject('prefix');
|
||||
const userTaskForm = ref({
|
||||
candidateStrategy: undefined, // 分配规则
|
||||
candidateParam: [], // 分配选项
|
||||
skipExpression: '', // 跳过表达式
|
||||
});
|
||||
const bpmnElement = ref();
|
||||
const bpmnInstances = () => (window as any)?.bpmnInstances;
|
||||
|
||||
const roleOptions = ref<RoleApi.RoleVO[]>([]); // 角色列表
|
||||
const deptTreeOptions = ref(); // 部门树
|
||||
const postOptions = ref<PostApi.PostVO[]>([]); // 岗位列表
|
||||
const userOptions = ref<UserApi.UserVO[]>([]); // 用户列表
|
||||
const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]); // 用户组列表
|
||||
|
||||
const { formFieldOptions } = useFormFieldsPermission(FieldPermissionType.READ);
|
||||
// 表单内用户字段选项, 必须是必填和用户选择器
|
||||
const userFieldOnFormOptions = computed(() => {
|
||||
return formFieldOptions.filter((item) => item.type === 'UserSelect');
|
||||
});
|
||||
// 表单内部门字段选项, 必须是必填和部门选择器
|
||||
const deptFieldOnFormOptions = computed(() => {
|
||||
return formFieldOptions.filter((item) => item.type === 'DeptSelect');
|
||||
});
|
||||
|
||||
const deptLevel = ref(1);
|
||||
const deptLevelLabel = computed(() => {
|
||||
let label = '部门负责人来源';
|
||||
if (
|
||||
userTaskForm.value.candidateStrategy ==
|
||||
CandidateStrategy.MULTI_LEVEL_DEPT_LEADER
|
||||
) {
|
||||
label = label + '(指定部门向上)';
|
||||
} else if (
|
||||
userTaskForm.value.candidateStrategy == CandidateStrategy.FORM_DEPT_LEADER
|
||||
) {
|
||||
label = label + '(表单内部门向上)';
|
||||
} else {
|
||||
label = label + '(发起人部门向上)';
|
||||
}
|
||||
return label;
|
||||
});
|
||||
|
||||
const otherExtensions = ref();
|
||||
|
||||
const resetTaskForm = () => {
|
||||
const businessObject = bpmnElement.value.businessObject;
|
||||
if (!businessObject) {
|
||||
return;
|
||||
}
|
||||
|
||||
const extensionElements =
|
||||
businessObject?.extensionElements ??
|
||||
bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] });
|
||||
userTaskForm.value.candidateStrategy = extensionElements.values?.filter(
|
||||
(ex) => ex.$type === `${prefix}:CandidateStrategy`,
|
||||
)?.[0]?.value;
|
||||
const candidateParamStr = extensionElements.values?.filter(
|
||||
(ex) => ex.$type === `${prefix}:CandidateParam`,
|
||||
)?.[0]?.value;
|
||||
if (candidateParamStr && candidateParamStr.length > 0) {
|
||||
if (userTaskForm.value.candidateStrategy === CandidateStrategy.EXPRESSION) {
|
||||
// 特殊：流程表达式，只有一个 input 输入框
|
||||
userTaskForm.value.candidateParam = [candidateParamStr];
|
||||
} else if (
|
||||
userTaskForm.value.candidateStrategy ==
|
||||
CandidateStrategy.MULTI_LEVEL_DEPT_LEADER
|
||||
) {
|
||||
// 特殊：多级不部门负责人，需要通过'|'分割
|
||||
userTaskForm.value.candidateParam = candidateParamStr
|
||||
.split('|')[0]
|
||||
.split(',')
|
||||
.map((item) => {
|
||||
// 如果数字超出了最大安全整数范围，则将其作为字符串处理
|
||||
let num = Number(item);
|
||||
return num > Number.MAX_SAFE_INTEGER || num < -Number.MAX_SAFE_INTEGER
|
||||
? item
|
||||
: num;
|
||||
});
|
||||
deptLevel.value = +candidateParamStr.split('|')[1];
|
||||
} else if (
|
||||
userTaskForm.value.candidateStrategy ==
|
||||
CandidateStrategy.START_USER_DEPT_LEADER ||
|
||||
userTaskForm.value.candidateStrategy ==
|
||||
CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER
|
||||
) {
|
||||
userTaskForm.value.candidateParam = +candidateParamStr;
|
||||
deptLevel.value = +candidateParamStr;
|
||||
} else if (
|
||||
userTaskForm.value.candidateStrategy == CandidateStrategy.FORM_DEPT_LEADER
|
||||
) {
|
||||
userTaskForm.value.candidateParam = candidateParamStr.split('|')[0];
|
||||
deptLevel.value = +candidateParamStr.split('|')[1];
|
||||
} else {
|
||||
userTaskForm.value.candidateParam = candidateParamStr
|
||||
.split(',')
|
||||
.map((item) => {
|
||||
// 如果数字超出了最大安全整数范围，则将其作为字符串处理
|
||||
let num = Number(item);
|
||||
return num > Number.MAX_SAFE_INTEGER || num < -Number.MAX_SAFE_INTEGER
|
||||
? item
|
||||
: num;
|
||||
});
|
||||
}
|
||||
} else {
|
||||
userTaskForm.value.candidateParam = [];
|
||||
}
|
||||
|
||||
otherExtensions.value =
|
||||
extensionElements.values?.filter(
|
||||
(ex) =>
|
||||
ex.$type !== `${prefix}:CandidateStrategy` &&
|
||||
ex.$type !== `${prefix}:CandidateParam`,
|
||||
) ?? [];
|
||||
|
||||
// 跳过表达式
|
||||
if (businessObject.skipExpression != undefined) {
|
||||
userTaskForm.value.skipExpression = businessObject.skipExpression;
|
||||
} else {
|
||||
userTaskForm.value.skipExpression = '';
|
||||
}
|
||||
|
||||
// 改用通过extensionElements来存储数据
|
||||
return;
|
||||
if (businessObject.candidateStrategy != undefined) {
|
||||
userTaskForm.value.candidateStrategy = parseInt(
|
||||
businessObject.candidateStrategy,
|
||||
) as any;
|
||||
} else {
|
||||
userTaskForm.value.candidateStrategy = undefined;
|
||||
}
|
||||
if (
|
||||
businessObject.candidateParam &&
|
||||
businessObject.candidateParam.length > 0
|
||||
) {
|
||||
if (userTaskForm.value.candidateStrategy === 60) {
|
||||
// 特殊：流程表达式，只有一个 input 输入框
|
||||
userTaskForm.value.candidateParam = [businessObject.candidateParam];
|
||||
} else {
|
||||
userTaskForm.value.candidateParam = businessObject.candidateParam
|
||||
.split(',')
|
||||
.map((item) => item);
|
||||
}
|
||||
} else {
|
||||
userTaskForm.value.candidateParam = [];
|
||||
}
|
||||
};
|
||||
|
||||
/** 更新 candidateStrategy 字段时，需要清空 candidateParam，并触发 bpmn 图更新 */
|
||||
const changeCandidateStrategy = () => {
|
||||
userTaskForm.value.candidateParam = [];
|
||||
deptLevel.value = 1;
|
||||
// 注释 by 芋艿：这个交互很多用户反馈费解，https://t.zsxq.com/xNmas 所以暂时屏蔽
|
||||
// if (userTaskForm.value.candidateStrategy === CandidateStrategy.FORM_USER) {
|
||||
// // 特殊处理表单内用户字段，当只有发起人选项时应选中发起人
|
||||
// if (!userFieldOnFormOptions.value || userFieldOnFormOptions.value.length <= 1) {
|
||||
// userTaskForm.value.candidateStrategy = CandidateStrategy.START_USER
|
||||
// }
|
||||
// }
|
||||
updateElementTask();
|
||||
};
|
||||
|
||||
/** 选中某个 options 时候，更新 bpmn 图 */
|
||||
const updateElementTask = () => {
|
||||
let candidateParam =
|
||||
userTaskForm.value.candidateParam instanceof Array
|
||||
? userTaskForm.value.candidateParam.join(',')
|
||||
: userTaskForm.value.candidateParam;
|
||||
|
||||
// 特殊处理多级部门情况
|
||||
if (
|
||||
userTaskForm.value.candidateStrategy ==
|
||||
CandidateStrategy.MULTI_LEVEL_DEPT_LEADER ||
|
||||
userTaskForm.value.candidateStrategy == CandidateStrategy.FORM_DEPT_LEADER
|
||||
) {
|
||||
candidateParam += '|' + deptLevel.value;
|
||||
}
|
||||
// 特殊处理发起人部门负责人、发起人连续部门负责人
|
||||
if (
|
||||
userTaskForm.value.candidateStrategy ==
|
||||
CandidateStrategy.START_USER_DEPT_LEADER ||
|
||||
userTaskForm.value.candidateStrategy ==
|
||||
CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER
|
||||
) {
|
||||
candidateParam = deptLevel.value + '';
|
||||
}
|
||||
|
||||
const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
|
||||
values: [
|
||||
...otherExtensions.value,
|
||||
bpmnInstances().moddle.create(`${prefix}:CandidateStrategy`, {
|
||||
value: userTaskForm.value.candidateStrategy,
|
||||
}),
|
||||
bpmnInstances().moddle.create(`${prefix}:CandidateParam`, {
|
||||
value: candidateParam,
|
||||
}),
|
||||
],
|
||||
});
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
extensionElements: extensions,
|
||||
});
|
||||
|
||||
// 改用通过extensionElements来存储数据
|
||||
return;
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
candidateStrategy: userTaskForm.value.candidateStrategy,
|
||||
candidateParam: userTaskForm.value.candidateParam.join(','),
|
||||
});
|
||||
};
|
||||
|
||||
const updateSkipExpression = () => {
|
||||
if (
|
||||
userTaskForm.value.skipExpression &&
|
||||
userTaskForm.value.skipExpression !== ''
|
||||
) {
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
skipExpression: userTaskForm.value.skipExpression,
|
||||
});
|
||||
} else {
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
skipExpression: null,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 打开监听器弹窗
|
||||
const processExpressionDialogRef = ref();
|
||||
const openProcessExpressionDialog = async () => {
|
||||
processExpressionDialogRef.value.open();
|
||||
};
|
||||
const selectProcessExpression = (expression: ProcessExpressionVO) => {
|
||||
userTaskForm.value.candidateParam = [expression.expression];
|
||||
updateElementTask();
|
||||
};
|
||||
|
||||
const handleFormUserChange = (e) => {
|
||||
if (e === 'PROCESS_START_USER_ID') {
|
||||
userTaskForm.value.candidateParam = [];
|
||||
userTaskForm.value.candidateStrategy = CandidateStrategy.START_USER;
|
||||
}
|
||||
updateElementTask();
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.id,
|
||||
() => {
|
||||
bpmnElement.value = bpmnInstances().bpmnElement;
|
||||
nextTick(() => {
|
||||
resetTaskForm();
|
||||
});
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
// 获得角色列表
|
||||
roleOptions.value = await RoleApi.getSimpleRoleList();
|
||||
// 获得部门列表
|
||||
const deptOptions = await DeptApi.getSimpleDeptList();
|
||||
deptTreeOptions.value = handleTree(deptOptions, 'id');
|
||||
// 获得岗位列表
|
||||
postOptions.value = await PostApi.getSimplePostList();
|
||||
// 获得用户列表
|
||||
userOptions.value = await UserApi.getSimpleUserList();
|
||||
// 获得用户组列表
|
||||
userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
bpmnElement.value = null;
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user