abu/wzj-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update 选人优化

Browse Source
This commit is contained in:
LiuHao 2024-01-29 22:27:00 +08:00
parent 587d3d468f
commit 63e38a59bd
1 changed files with 100 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
src/components/BpmnDesign/panel/TaskPanel.vue
View File

@ -40,7 +40,7 @@
<el-tabs tab-position="left" class="demo-tabs" @tab-click="taskTabClick"> <el-tabs tab-position="left" class="demo-tabs" @tab-click="taskTabClick">
<el-tab-pane label="身份存储"> <el-tab-pane label="身份存储">
<el-form-item label="分配人员"> <el-form-item label="分配人员">
<el-input v-model="formData.userName" disabled> <el-input v-model="assignee.userName" disabled>
<template #append> <template #append>
<el-button icon="Search" size="small" type="primary" @click="openSingleUserSelect" /> <el-button icon="Search" size="small" type="primary" @click="openSingleUserSelect" />
</template> </template>
@ -65,7 +65,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item v-if="formData.allocationType === AllocationTypeEnum.USER" label="分配人员"> <el-form-item v-if="formData.allocationType === AllocationTypeEnum.USER" label="分配人员">
<el-input v-model="formData.userName"> <el-input v-model="assignee.userName">
<template #append> <template #append>
<el-button icon="Search" size="small" type="primary" @click="proxy.$modal.msgWarning('开发中。。。。。。')" /> <el-button icon="Search" size="small" type="primary" @click="proxy.$modal.msgWarning('开发中。。。。。。')" />
</template> </template>
@ -168,6 +168,7 @@ import { TaskPanel } from 'bpmnDesign';
import { AllocationTypeEnum, MultipleUserAuditTypeEnum, SpecifyDescEnum } from '@/enums/bpmn/IndexEnums'; import { AllocationTypeEnum, MultipleUserAuditTypeEnum, SpecifyDescEnum } from '@/enums/bpmn/IndexEnums';
import { BellFilled, Checked, InfoFilled } from '@element-plus/icons-vue'; import { BellFilled, Checked, InfoFilled } from '@element-plus/icons-vue';
import { UserVO } from '@/api/system/user/types'; import { UserVO } from '@/api/system/user/types';
import useModelerStore from '@/store/modules/modeler';
const { proxy } = getCurrentInstance() as ComponentInternalInstance; const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@ -175,13 +176,14 @@ interface PropType {
element: Element; element: Element;
} }
const props = withDefaults(defineProps<PropType>(), {}); const props = withDefaults(defineProps<PropType>(), {});
const { nameChange, idChange, showConfig, updateProperties, updateProperty } = usePanel({ const { modeling, showConfig, nameChange, idChange, updateProperties, getExtensionElements, createModdleElement } = usePanel({
element: toRaw(props.element) element: toRaw(props.element)
}); });
const { parseData } = useParseElement({ const { parseData } = useParseElement({
element: toRaw(props.element) element: toRaw(props.element)
}); });
const initData = {
const initFormData = {
id: '', id: '',
name: '', name: '',
dueDate: '', dueDate: '',
@ -189,7 +191,10 @@ const initData = {
allocationType: AllocationTypeEnum.USER, allocationType: AllocationTypeEnum.USER,
specifyDesc: SpecifyDescEnum.SPECIFY_SINGLE specifyDesc: SpecifyDescEnum.SPECIFY_SINGLE
}; };
const formData = ref({ ...initData, ...parseData<TaskPanel>() }); const formData = ref({ ...initFormData, ...parseData<TaskPanel>() });
const assignee = ref<Partial<UserVO>>({
userName: ''
});
const currentCollapseItem = ref(['1', '2']); const currentCollapseItem = ref(['1', '2']);
const userSelectRef = ref<InstanceType<typeof UserSelect>>(); const userSelectRef = ref<InstanceType<typeof UserSelect>>();
const singleUserSelectRef = ref<InstanceType<typeof UserSelect>>(); const singleUserSelectRef = ref<InstanceType<typeof UserSelect>>();
@ -211,25 +216,42 @@ const openDueDate = () => {
}; };
const singleUserSelectCallBack = (data: UserVO[]) => { const singleUserSelectCallBack = (data: UserVO[]) => {
if (data.length !== 0) { const user: UserVO = data.length !== 0 ? data[0] : undefined;
const user = data[0]; updateProperties({ 'flowable:assignee': user?.userId });
formData.value.userName = user.userName; assignee.value = user;
const userId = user.userId; const extensionElements = getExtensionElements();
updateProperties({ 'flowable:assignee': userId }); let extAssigneeElement = extensionElements.get('values').find((item) => item.$type === 'flowable:extAssignee');
} else { if (!extAssigneeElement) {
updateProperties({ 'flowable:assignee': undefined }); extAssigneeElement = createModdleElement('flowable:extAssignee', { body: '' }, extensionElements);
extensionElements.get('values').push(extAssigneeElement);
} }
extAssigneeElement.body = JSON.stringify({ userName: user.userName, userId: user.userId });
updateProperties({ extensionElements: extensionElements });
}; };
const userSelectCallBack = (data: UserVO[]) => { const userSelectCallBack = (data: UserVO[]) => {
if (data?.length !== 0) { let extensionElements = getExtensionElements();
// 获取userId 用逗号,隔开 extensionElements.values = extensionElements.values.filter((item) => item.$type !== 'flowable:extCandidateUsers');
const userIds = data.map((item) => item.userId).join(','); if (data.length === 0) {
updateProperties({ 'flowable:candidateUsers': userIds }); formData.value.candidateUsers = '';
formData.value.candidateUsers = userIds;
} else {
updateProperties({ 'flowable:candidateUsers': undefined }); updateProperties({ 'flowable:candidateUsers': undefined });
formData.value.candidateUsers = undefined; } else {
const userIds = data.map((item) => item.userId).join(',');
formData.value.candidateUsers = userIds;
updateProperties({ 'flowable:candidateUsers': userIds });
const extCandidateUsersElement = createModdleElement('flowable:extCandidateUsers', { body: '' }, extensionElements);
extensionElements.values.push(extCandidateUsersElement);
const users = data.map((item) => {
return {
userId: item.userId,
userName: item.userName
};
});
extCandidateUsersElement.body = JSON.stringify(users);
} }
if (extensionElements.values.length === 0) {
extensionElements = undefined;
}
updateProperties({ extensionElements: extensionElements });
}; };
const taskTabClick = (e) => { const taskTabClick = (e) => {
@ -253,62 +275,68 @@ const selectRoleLength = computed(() => {
return 0; return 0;
} }
}); });
// watch( watch(
// () => formData.value.roles, () => formData.value.roles,
// (newVal: Record<string, any>[]) => { (newVal: Record<string, any>[]) => {
// if (newVal?.length > 0) { if (newVal?.length > 0) {
// // 获取userId 用逗号,隔开 const roleIds = newVal.map((item) => item.roleId).join(',');
// const roleIds = newVal.map((item) => item.roleId).join(','); updateProperties({ 'flowable:candidateGroups': roleIds });
// updateProperties({ 'flowable:candidateGroups': roleIds }); } else {
// } else { updateProperties({ 'flowable:candidateGroups': undefined });
// updateProperties({ 'flowable:candidateGroups': undefined }); }
// } },
// }, { deep: true }
// { deep: true } );
// ); watch(
// watch( () => formData.value.async,
// () => formData.value.async, (newVal: boolean) => {
// (newVal: boolean) => { if (newVal) {
// if (newVal) { updateProperties({ 'flowable:async': true });
// updateProperties({ 'flowable:async': true }); } else {
// } else { updateProperties({ 'flowable:async': undefined });
// updateProperties({ 'flowable:async': undefined }); }
// } }
// } );
// ); watch(
// watch( () => formData.value.skipExpression,
// () => formData.value.skipExpression, (newVal: string) => {
// (newVal: string) => { if (newVal) {
// if (newVal) { updateProperties({ 'flowable:skipExpression': newVal });
// updateProperties({ 'flowable:skipExpression': newVal }); } else {
// } else { updateProperties({ 'flowable:skipExpression': undefined });
// updateProperties({ 'flowable:skipExpression': undefined }); }
// } }
// } );
// ); watch(
// watch( () => formData.value.priority,
// () => formData.value.priority, (newVal: number) => {
// (newVal: number) => { if (newVal) {
// if (newVal) { updateProperties({ 'flowable:priority': newVal });
// updateProperties({ 'flowable:priority': newVal }); } else {
// } else { updateProperties({ 'flowable:priority': undefined });
// updateProperties({ 'flowable:priority': undefined }); }
// } }
// } );
// ); watch(
// watch( () => formData.value.dueDate,
// () => formData.value.dueDate, (newVal: string) => {
// (newVal: string) => { if (newVal) {
// if (newVal) { updateProperties({ 'flowable:dueDate': newVal });
// updateProperties({ 'flowable:dueDate': newVal }); } else {
// } else { updateProperties({ 'flowable:dueDate': undefined });
// updateProperties({ 'flowable:dueDate': undefined }); }
// } }
// } );
// );
onBeforeMount(() => { onBeforeMount(() => {
// formData.value = { ...initData, ...parseData<TaskPanel>() }; // formData.value = { ...initData, ...parseData<TaskPanel>() };
const extensionElements = getExtensionElements(false);
if (extensionElements && extensionElements.get('values')) {
let extAssigneeElement = extensionElements.get('values').find((item) => item.$type === 'flowable:extAssignee');
if (extAssigneeElement) {
assignee.value = JSON.parse(extAssigneeElement.body);
}
}
}); });
const formRules = ref<ElFormRules>({ const formRules = ref<ElFormRules>({