129 lines
4.5 KiB
Vue
129 lines
4.5 KiB
Vue
<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>
|