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

update 修改面板formData来源

Browse Source
This commit is contained in:
LiuHao 2024-01-29 18:11:11 +08:00
parent dc889fd1d5
commit dba1b6ced9
7 changed files with 103 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/BpmnDesign/panel/GatewayPanel.vue
View File

@ -21,20 +21,17 @@ import { GatewayPanel } from 'bpmnDesign';
interface PropType {
modeler: Modeler;
element: Element;
categorys?: any[];
}
const props = withDefaults(defineProps<PropType>(), {
categorys: () => []
});
const props = withDefaults(defineProps<PropType>(), {});
const { nameChange, idChange } = usePanel({
modeler: props.modeler,
element: toRaw(props.element)
});
const { parse, formData } = useParseElement<GatewayPanel>({
modeler: props.modeler,
const { parseData } = useParseElement({
element: toRaw(props.element)
});
const formData = ref(parseData<GatewayPanel>());
const formRules = ref<ElFormRules>({
processCategory: [{ required: true, message: '请选择', trigger: 'blur' }],
id: [{ required: true, message: '请输入', trigger: 'blur' }],

18
src/components/BpmnDesign/panel/ProcessPanel.vue
View File

@ -28,27 +28,23 @@ interface PropType {
}
const props = withDefaults(defineProps<PropType>(), {});
const { parse, formData } = useParseElement<ProcessPanel>({
modeler: props.modeler,
element: toRaw(props.element),
initData: {} as any
const { parseData } = useParseElement({
element: toRaw(props.element)
});
const { idChange, nameChange } = usePanel({
modeler: props.modeler,
element: toRaw(props.element)
});
// const formData = ref<ProcessPanel>({
// processCategory: '',
// id: '',
// name: '',
// documentation: ''
// });
const formData = ref<ProcessPanel>();
const formRules = ref<ElFormRules>({
id: [{ required: true, message: '请输入', trigger: 'blur' }],
name: [{ required: true, message: '请输入', trigger: 'blur' }]
});
onBeforeMount(() => {
formData.value = parseData<ProcessPanel>();
});
</script>
<style scoped lang="scss"></style>

11
src/components/BpmnDesign/panel/SequenceFlowPanel.vue
View File

@ -27,20 +27,17 @@ import { SequenceFlowPanel } from 'bpmnDesign';
interface PropType {
modeler: Modeler;
element: Element;
categorys?: any[];
}
const props = withDefaults(defineProps<PropType>(), {
categorys: () => []
});
const props = withDefaults(defineProps<PropType>(), {});
const { nameChange, idChange, updateProperties } = usePanel({
modeler: props.modeler,
element: toRaw(props.element)
});
const { parse, formData } = useParseElement<SequenceFlowPanel>({
modeler: props.modeler,
const { parseData } = useParseElement({
element: toRaw(props.element)
});
const formData = ref(parseData<SequenceFlowPanel>());
const formRules = ref<ElFormRules>({
processCategory: [{ required: true, message: '请选择', trigger: 'blur' }],
id: [{ required: true, message: '请输入', trigger: 'blur' }],

15
src/components/BpmnDesign/panel/StartEndPanel.vue
View File

@ -8,7 +8,7 @@
<el-input v-model="formData.name" @change="nameChange"> </el-input>
</el-form-item>
<el-form-item label="执行监听器" style="margin-bottom: 0"> </el-form-item>
<ExecutionListener :modeler="modeler" :element="element"></ExecutionListener>
<ExecutionListener :element="element"></ExecutionListener>
</el-form>
</div>
</template>
@ -19,24 +19,19 @@ import { Modeler, Element } from 'bpmn';
import { StartEndPanel } from 'bpmnDesign';
interface PropType {
modeler: Modeler;
element: Element;
categorys?: any[];
}
const props = withDefaults(defineProps<PropType>(), {
categorys: () => []
});
const props = withDefaults(defineProps<PropType>(), {});
const { nameChange, idChange } = usePanel({
modeler: props.modeler,
element: toRaw(props.element)
});
const { parse, formData } = useParseElement<StartEndPanel>({
modeler: props.modeler,
const { parseData } = useParseElement({
element: toRaw(props.element)
});
const formData = ref(parseData<StartEndPanel>());
const formRules = ref<ElFormRules>({
processCategory: [{ required: true, message: '请选择', trigger: 'blur' }],
id: [{ required: true, message: '请输入', trigger: 'blur' }],
name: [{ required: true, message: '请输入', trigger: 'blur' }]
});

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

@ -115,7 +115,7 @@
</div>
</template>
<div>
<TaskListener v-if="showConfig.taskListener" :modeler="modeler" :element="element"></TaskListener>
<TaskListener v-if="showConfig.taskListener" :element="element"></TaskListener>
</div>
</el-collapse-item>
<el-collapse-item v-if="showConfig.executionListener" name="4">
@ -128,7 +128,7 @@
</div>
</template>
<div>
<ExecutionListener v-if="showConfig.executionListener" :modeler="modeler" :element="element"></ExecutionListener>
<ExecutionListener v-if="showConfig.executionListener" :element="element"></ExecutionListener>
</div>
</el-collapse-item>
<el-form-item v-if="showConfig.isForCompensation" prop="isForCompensation" label="是否为补偿">
@ -163,7 +163,7 @@ import usePanel from '@/components/BpmnDesign/hooks/usePanel';
import UserSelect from '@/components/UserSelect';
import RoleSelect from '@/components/RoleSelect';
import DueDate from '@/components/BpmnDesign/panel/property/DueDate.vue';
import { Element, Moddle, Modeler, Modeling } from 'bpmn';
import { Element } from 'bpmn';
import { TaskPanel } from 'bpmnDesign';
import { AllocationTypeEnum, MultipleUserAuditTypeEnum, SpecifyDescEnum } from '@/enums/bpmn/IndexEnums';
import { BellFilled, Checked, InfoFilled } from '@element-plus/icons-vue';
@ -172,27 +172,24 @@ import { UserVO } from '@/api/system/user/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
interface PropType {
modeler: Modeler;
element: Element;
}
const props = withDefaults(defineProps<PropType>(), {});
const { nameChange, idChange, showConfig, updateProperties, createModdleElement } = usePanel({
modeler: props.modeler,
const { nameChange, idChange, showConfig, updateProperties, updateProperty } = usePanel({
element: toRaw(props.element)
});
const { parse, formData } = useParseElement<TaskPanel>({
modeler: props.modeler,
element: toRaw(props.element),
initData: {
id: '',
name: '',
dueDate: '',
multipleUserAuditType: MultipleUserAuditTypeEnum.SERIAL,
allocationType: AllocationTypeEnum.USER,
specifyDesc: SpecifyDescEnum.SPECIFY_SINGLE
}
const { parseData } = useParseElement({
element: toRaw(props.element)
});
const initData = {
id: '',
name: '',
dueDate: '',
multipleUserAuditType: MultipleUserAuditTypeEnum.SERIAL,
allocationType: AllocationTypeEnum.USER,
specifyDesc: SpecifyDescEnum.SPECIFY_SINGLE
};
const formData = ref({ ...initData, ...parseData<TaskPanel>() });
const currentCollapseItem = ref(['1', '2']);
const userSelectRef = ref<InstanceType<typeof UserSelect>>();
const singleUserSelectRef = ref<InstanceType<typeof UserSelect>>();
@ -214,43 +211,11 @@ const openDueDate = () => {
};
const singleUserSelectCallBack = (data: UserVO[]) => {
const modeling = props.modeler.get<Modeling>('modeling');
if (data.length !== 0) {
const user = data[0];
formData.value.userName = user.userName;
const userId = user.userId;
updateProperties({ 'flowable:assignee': userId });
let extensionElements = props.element.businessObject.get('extensionElements');
if (!extensionElements) {
extensionElements = createModdleElement('bpmn:ExtensionElements', {}, props.element.businessObject);
modeling.updateModdleProperties(toRaw(props.element), toRaw(props.element.businessObject), { extensionElements });
}
let propertiesElements;
if (!extensionElements.values) {
propertiesElements = createModdleElement('flowable:properties', {}, extensionElements);
modeling.updateModdleProperties(toRaw(props.element), extensionElements, {
values: [...extensionElements.get('values'), propertiesElements]
});
} else {
propertiesElements = extensionElements.values.find((item) => item.$type === 'flowable:properties');
}
let userNameProperty;
if (propertiesElements.values) {
userNameProperty = propertiesElements.values.find((item) => {
if (item['name'] === 'userName') {
return true;
}
return false;
});
userNameProperty['name'] = 'userName';
userNameProperty['value'] = user.userName;
} else {
userNameProperty = createModdleElement('flowable:property', { name: 'userName', value: user.userName }, propertiesElements);
modeling.updateModdleProperties(toRaw(props.element), propertiesElements, {
values: [...propertiesElements.get('values'), userNameProperty]
});
}
} else {
updateProperties({ 'flowable:assignee': undefined });
}
@ -288,59 +253,63 @@ const selectRoleLength = computed(() => {
return 0;
}
});
watch(
() => formData.value.roles,
(newVal: Record<string, any>[]) => {
if (newVal?.length > 0) {
// 获取userId 用逗号,隔开
const roleIds = newVal.map((item) => item.roleId).join(',');
updateProperties({ 'flowable:candidateGroups': roleIds });
} else {
updateProperties({ 'flowable:candidateGroups': undefined });
}
},
{ deep: true }
);
watch(
() => formData.value.async,
(newVal: boolean) => {
if (newVal) {
updateProperties({ 'flowable:async': true });
} else {
updateProperties({ 'flowable:async': undefined });
}
}
);
watch(
() => formData.value.skipExpression,
(newVal: string) => {
if (newVal) {
updateProperties({ 'flowable:skipExpression': newVal });
} else {
updateProperties({ 'flowable:skipExpression': undefined });
}
}
);
watch(
() => formData.value.priority,
(newVal: number) => {
if (newVal) {
updateProperties({ 'flowable:priority': newVal });
} else {
updateProperties({ 'flowable:priority': undefined });
}
}
);
watch(
() => formData.value.dueDate,
(newVal: string) => {
if (newVal) {
updateProperties({ 'flowable:dueDate': newVal });
} else {
updateProperties({ 'flowable:dueDate': undefined });
}
}
);
// watch(
// () => formData.value.roles,
// (newVal: Record<string, any>[]) => {
// if (newVal?.length > 0) {
// // 获取userId 用逗号,隔开
// const roleIds = newVal.map((item) => item.roleId).join(',');
// updateProperties({ 'flowable:candidateGroups': roleIds });
// } else {
// updateProperties({ 'flowable:candidateGroups': undefined });
// }
// },
// { deep: true }
// );
// watch(
// () => formData.value.async,
// (newVal: boolean) => {
// if (newVal) {
// updateProperties({ 'flowable:async': true });
// } else {
// updateProperties({ 'flowable:async': undefined });
// }
// }
// );
// watch(
// () => formData.value.skipExpression,
// (newVal: string) => {
// if (newVal) {
// updateProperties({ 'flowable:skipExpression': newVal });
// } else {
// updateProperties({ 'flowable:skipExpression': undefined });
// }
// }
// );
// watch(
// () => formData.value.priority,
// (newVal: number) => {
// if (newVal) {
// updateProperties({ 'flowable:priority': newVal });
// } else {
// updateProperties({ 'flowable:priority': undefined });
// }
// }
// );
// watch(
// () => formData.value.dueDate,
// (newVal: string) => {
// if (newVal) {
// updateProperties({ 'flowable:dueDate': newVal });
// } else {
// updateProperties({ 'flowable:dueDate': undefined });
// }
// }
// );
onBeforeMount(() => {
// formData.value = { ...initData, ...parseData<TaskPanel>() };
});
const formRules = ref<ElFormRules>({
id: [{ required: true, message: '请输入', trigger: 'blur' }],

15
src/components/BpmnDesign/panel/property/ExecutionListener.vue
View File

@ -82,13 +82,9 @@ import useDialog from '@/hooks/useDialog';
const emit = defineEmits(['close']);
interface PropType {
modeler: Modeler;
element: Element;
categorys?: any[];
}
const props = withDefaults(defineProps<PropType>(), {
categorys: () => []
});
const props = withDefaults(defineProps<PropType>(), {});
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@ -97,8 +93,7 @@ const formDialog = useDialog({
title: selectRow.value ? '编辑&保存' : '新增&保存'
});
const { showConfig, elementType, updateProperties } = usePanel({
modeler: props.modeler,
const { showConfig, elementType, updateProperties, moddle } = usePanel({
element: toRaw(props.element)
});
@ -177,17 +172,17 @@ const updateElement = () => {
if (data.length) {
let extensionElements = props.element.businessObject.get('extensionElements');
if (!extensionElements) {
extensionElements = props.modeler.get<Moddle>('moddle').create('bpmn:ExtensionElements');
extensionElements = moddle.create('bpmn:ExtensionElements');
}
// 清除旧值
extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:ExecutionListener') ?? [];
data.forEach((item) => {
const executionListener = props.modeler.get<Moddle>('moddle').create('flowable:ExecutionListener');
const executionListener = moddle.create('flowable:ExecutionListener');
executionListener['event'] = item.event;
executionListener[item.type] = item.className;
if (item.params && item.params.length) {
item.params.forEach((field) => {
const fieldElement = props.modeler.get<Moddle>('moddle').create('flowable:Field');
const fieldElement = moddle.create('flowable:Field');
fieldElement['name'] = field.name;
fieldElement[field.type] = field.value;
executionListener.get('fields').push(fieldElement);

17
src/components/BpmnDesign/panel/property/TaskListener.vue
View File

@ -75,7 +75,7 @@
import ListenerParam from './ListenerParam.vue';
import { VxeTableEvents, VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
import { TaskListenerVO } from 'bpmnDesign';
import { Moddle, Modeler, Element } from 'bpmn';
import { Element } from 'bpmn';
import usePanel from '@/components/BpmnDesign/hooks/usePanel';
import useDialog from '@/hooks/useDialog';
@ -83,20 +83,15 @@ import useDialog from '@/hooks/useDialog';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
interface PropType {
modeler: Modeler;
element: Element;
categorys?: any[];
}
const props = withDefaults(defineProps<PropType>(), {
categorys: () => []
});
const props = withDefaults(defineProps<PropType>(), {});
const selectRow = ref<TaskListenerVO | null>();
const formDialog = useDialog({
title: selectRow.value ? '编辑&保存' : '新增&保存'
});
const { showConfig, elementType, updateProperties } = usePanel({
modeler: props.modeler,
const { showConfig, elementType, updateProperties, moddle } = usePanel({
element: toRaw(props.element)
});
@ -178,17 +173,17 @@ const updateElement = () => {
if (data.length) {
let extensionElements = props.element.businessObject.get('extensionElements');
if (!extensionElements) {
extensionElements = props.modeler.get<Moddle>('moddle').create('bpmn:ExtensionElements');
extensionElements = moddle.create('bpmn:ExtensionElements');
}
// 清除旧值
extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:TaskListener') ?? [];
data.forEach((item) => {
const taskListener = props.modeler.get<Moddle>('moddle').create('flowable:TaskListener');
const taskListener = moddle.create('flowable:TaskListener');
taskListener['event'] = item.event;
taskListener[item.type] = item.className;
if (item.params && item.params.length) {
item.params.forEach((field) => {
const fieldElement = props.modeler.get<Moddle>('moddle').create('flowable:Field');
const fieldElement = moddle.create('flowable:Field');
fieldElement['name'] = field.name;
fieldElement[field.type] = field.value;
taskListener.get('fields').push(fieldElement);