<template> <el-form :model="bpmnFormData" label-width="80px" :rules="rules" status-icon> <!--流程的基础属性--> <template v-if="bpmnFormData.$type === 'bpmn:Process'"> <el-form-item label="项目单位" prop="proId"> <el-select v-model="bpmnFormData.proId" placeholder="请选择项目单位" @change="updateElementPro" disabled style="width:100%"> <el-option v-for="opt in proOptions" :key="opt.id+''" :label="opt.projectName" :value="opt.id+''" ></el-option> </el-select> </el-form-item> </template> <el-form-item :label="bpmnFormData.$type === 'bpmn:Process'? '流程标识': '节点ID'" prop="id" @change="updateElementTask('id')"> <el-input v-model="bpmnFormData.id"/> </el-form-item> <el-form-item :label="bpmnFormData.$type === 'bpmn:Process'? '流程标识': '节点ID'" prop="id" @change="updateElementTask('id')"> <el-input v-model="bpmnFormData.id"/> </el-form-item> <el-form-item :label="bpmnFormData.$type === 'bpmn:Process'? '流程标识': '节点ID'" prop="id" @change="updateElementTask('id')"> <el-input v-model="bpmnFormData.id"/> </el-form-item> <el-form-item :label="bpmnFormData.$type === 'bpmn:Process'? '流程名称': '节点名称'" prop="name"> <el-input v-model="bpmnFormData.name" @change="updateElementTask('name')"/> </el-form-item> <!--流程的基础属性--> <template v-if="bpmnFormData.$type === 'bpmn:Process'"> <el-form-item label="流程分类" prop="processCategory"> <el-select v-model="bpmnFormData.processCategory" placeholder="请选择流程分类" @change="updateElementTask('processCategory')" style="width:100%"> <el-option v-for="dict in sys_process_category" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </template> <el-form-item v-if="bpmnFormData.$type === 'bpmn:SubProcess'" label="状态"> <el-switch v-model="bpmnFormData.isExpanded" active-text="展开" inactive-text="折叠" @change="updateElementTask('isExpanded')" /> </el-form-item> <el-form-item label="节点描述"> <el-input :rows="2" type="textarea" v-model="bpmnFormData.documentation" @change="updateElementTask('documentation')"/> </el-form-item> </el-form> </template> <script setup name="CommonPanel"> import {StrUtil} from '@/utils/StrUtil' import useModelerStore from '@/store/modules/modeler' import { listProProjectInfo } from "@/api/manage/proProjectInfo"; const modelerStore = useModelerStore() import useUserStore from '@/store/modules/user' const { proxy } = getCurrentInstance(); const { sys_process_category } = proxy.useDict('sys_process_category'); const userStore = useUserStore() // 项目数据 const proOptions = ref([]); const data = reactive({ rules:{ id: [ { required: true, message: '节点Id 不能为空', trigger: 'blur' }, ], name: [ { required: true, message: '节点名称不能为空', trigger: 'blur' }, ], proId: [ { required: true, message: '项目单位不能为空', trigger: 'change' }, ], processCategory: [ { required: true, message: '流程分类不能为空', trigger: 'change' }, ] }, bpmnFormData: {} }); const { rules, bpmnFormData } = toRefs(data); /** 组件传值 */ const props = defineProps({ id: { type: String, required: true }, }); /** 传值监听 */ watch(() => props.id, newVal => { if (newVal) { resetTaskForm(); } }, {immediate: true} ) function resetTaskForm() { bpmnFormData.value = JSON.parse(JSON.stringify(modelerStore.getBpmnElement.businessObject)); } function updateElementPro() { modelerStore.getModeling.updateProperties(modelerStore.getBpmnElement, { 'proId': bpmnFormData.value.proId }); } function updateElementTask(key) { const taskAttr = Object.create(null); taskAttr[key] = bpmnFormData.value[key] || null; modelerStore.getModeling.updateProperties(modelerStore.getBpmnElement, taskAttr); console.log("taskAttr",modelerStore.getBpmnElement) } /** 初始化数据 */ function initDatas(){ listProProjectInfo({pageSize:1000,comId:userStore.currentComId}).then(response => { proOptions.value = response.rows; }); } initDatas(); if(!bpmnFormData.value.proId){ bpmnFormData.value.proId = userStore.currentPrjId+''; updateElementPro(); } </script>