update 优化设计器
This commit is contained in:
LiuHao
parent
b102f2eb60
commit
c4e69956a3
@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div class="containers">
|
||||
<el-dialog ref="flowDialogRef" v-model="dialog.visible" width="100%" fullscreen :title="dialog.title">
|
||||
<el-dialog v-model="visible" width="100%" fullscreen :title="title" @close="closeCallBack" @opened="designOpened">
|
||||
<div class="app-containers">
|
||||
<el-container class="h-full">
|
||||
<el-container style="align-items: stretch">
|
||||
<el-header>
|
||||
<div class="process-toolbar">
|
||||
<el-space wrap :size="10">
|
||||
<el-button size="small" @click="saveXml" type="primary">保 存</el-button>
|
||||
<el-button size="small" type="primary" @click="saveXml">保 存</el-button>
|
||||
<el-dropdown size="small">
|
||||
<el-button size="small" type="primary"> 预 览 </el-button>
|
||||
<template #dropdown>
|
||||
@ -82,44 +82,47 @@ import 'bpmn-js/dist/assets/diagram-js.css';
|
||||
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
|
||||
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
|
||||
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
|
||||
import { Canvas, ElementRegistry, Modeler } from 'bpmn';
|
||||
import { Canvas, Modeler } from 'bpmn';
|
||||
import PropertyPanel from './PropertyPanel.vue';
|
||||
import BpmnModeler from 'bpmn-js/lib/Modeler.js';
|
||||
import diagramXML from '@/components/BpmnDesign/assets/defaultXML';
|
||||
import defaultXML from '@/components/BpmnDesign/assets/defaultXML';
|
||||
import flowableModdle from '@/components/BpmnDesign/assets/moddle/flowable';
|
||||
import Modules from './assets/module/index';
|
||||
import useModelerStore from '@/store/modules/modeler';
|
||||
import useDialog from '@/hooks/useDialog';
|
||||
|
||||
interface PropType {
|
||||
closeCallBack?: () => void;
|
||||
xml?: string;
|
||||
}
|
||||
const prop = withDefaults(defineProps<PropType>(), {
|
||||
closeCallBack: () => {},
|
||||
xml: defaultXML
|
||||
});
|
||||
|
||||
const { visible, title, openDialog, closeDialog } = useDialog({
|
||||
title: '编辑流程'
|
||||
});
|
||||
const modelerStore = useModelerStore();
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
const dialog = reactive({
|
||||
visible: false,
|
||||
title: '编辑流程'
|
||||
});
|
||||
|
||||
const panelFlag = ref(false);
|
||||
const showPanel = ref(true);
|
||||
|
||||
const canvas = ref<HTMLDivElement>();
|
||||
const panel = ref<HTMLDivElement>();
|
||||
|
||||
const bpmnModeler = ref<Modeler>();
|
||||
const zoom = ref(1);
|
||||
|
||||
const perviewXMLShow = ref(false);
|
||||
const perviewSVGShow = ref(false);
|
||||
const xmlStr = ref('');
|
||||
const svgData = ref('');
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
initCanvas();
|
||||
//initDiagram(null);
|
||||
initModel();
|
||||
});
|
||||
});
|
||||
const designOpened = () => {
|
||||
// initCanvas();
|
||||
// initModel();
|
||||
// initDiagram();
|
||||
};
|
||||
|
||||
const panelBarClick = () => {
|
||||
// 延迟执行，否则会导致面板收起时，属性面板不显示
|
||||
@ -154,7 +157,6 @@ const initCanvas = () => {
|
||||
*/
|
||||
const initModel = () => {
|
||||
if (modelerStore.getModeler()) {
|
||||
// 清除旧 modeler
|
||||
modelerStore.getModeler().destroy();
|
||||
modelerStore.setModeler(undefined);
|
||||
}
|
||||
@ -166,26 +168,15 @@ const initModel = () => {
|
||||
*/
|
||||
const newDiagram = async () => {
|
||||
await proxy?.$modal.confirm('是否确认新建');
|
||||
initDiagram(null);
|
||||
initDiagram();
|
||||
};
|
||||
|
||||
/**
|
||||
* 初始化
|
||||
*/
|
||||
const initDiagram = (xml) => {
|
||||
if(xml){
|
||||
nextTick(async () => {
|
||||
|
||||
console.log("xml")
|
||||
dialog.visible = true
|
||||
bpmnModeler.value.importXML(xml);
|
||||
})
|
||||
}else{
|
||||
nextTick(async () => {
|
||||
|
||||
console.log("diagramXML")
|
||||
bpmnModeler.value.importXML(diagramXML);
|
||||
})
|
||||
}
|
||||
const initDiagram = (xml?: string) => {
|
||||
if (!xml) xml = defaultXML;
|
||||
bpmnModeler.value.importXML(xml);
|
||||
};
|
||||
|
||||
/**
|
||||
@ -290,28 +281,42 @@ const getProcessElement = () => {
|
||||
};
|
||||
|
||||
const getProcess = () => {
|
||||
const element = getProcessElement()
|
||||
const element = getProcessElement();
|
||||
return {
|
||||
id: element.id,
|
||||
name: element.name
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const saveXml = async () => {
|
||||
const { xml } = await bpmnModeler.value.saveXML({ format: true });
|
||||
const { svg } = await bpmnModeler.value.saveSVG();
|
||||
const process = getProcess()
|
||||
console.log(xml)
|
||||
console.log(svg)
|
||||
console.log(process)
|
||||
const process = getProcess();
|
||||
console.log(xml);
|
||||
console.log(svg);
|
||||
console.log(process);
|
||||
};
|
||||
|
||||
const open = (xml?: string) => {
|
||||
openDialog();
|
||||
nextTick(() => {
|
||||
initCanvas();
|
||||
initModel();
|
||||
initDiagram(xml);
|
||||
});
|
||||
};
|
||||
const close = () => {
|
||||
closeDialog();
|
||||
};
|
||||
|
||||
/**
|
||||
* 对外暴露子组件方法
|
||||
*/
|
||||
defineExpose({
|
||||
defineExpose({
|
||||
initDiagram,
|
||||
saveXml
|
||||
saveXml,
|
||||
open,
|
||||
close
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@ import { Ref } from 'vue';
|
||||
|
||||
interface Options {
|
||||
title?: string;
|
||||
visible?: boolean;
|
||||
}
|
||||
|
||||
interface Return {
|
||||
@ -12,7 +13,7 @@ interface Return {
|
||||
closeDialog: () => void;
|
||||
}
|
||||
export default (ops?: Options): Return => {
|
||||
const visible = ref(false);
|
||||
const visible = ref(ops.visible !== undefined ? ops.visible : false);
|
||||
const title = ref(ops.title || '');
|
||||
|
||||
const openDialog = () => {
|
||||
|
||||
@ -99,16 +99,16 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 设计流程开始 -->
|
||||
<design ref="designModel" :model-id="modelId" @handle-close="getList" />
|
||||
<BpmnDesign ref="bpmnDesignRef" :xml="xmlStr"></BpmnDesign>
|
||||
<!-- 设计流程结束 -->
|
||||
<!-- 添加模型对话框 -->
|
||||
<el-dialog v-model="dialog.visible" :title="dialog.title" width="650px" append-to-body :close-on-click-modal="false">
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="模型名称：" prop="name">
|
||||
<el-input :disabled="ids && ids.length > 0" v-model="form.name" maxlength="20" show-word-limit />
|
||||
<el-input v-model="form.name" :disabled="ids && ids.length > 0" maxlength="20" show-word-limit />
|
||||
</el-form-item>
|
||||
<el-form-item label="模型KEY：" prop="key">
|
||||
<el-input :disabled="ids && ids.length > 0" v-model="form.key" maxlength="20" show-word-limit />
|
||||
<el-input v-model="form.key" :disabled="ids && ids.length > 0" maxlength="20" show-word-limit />
|
||||
</el-form-item>
|
||||
<el-form-item label="流程分类" prop="categoryCode">
|
||||
<el-tree-select
|
||||
@ -135,17 +135,17 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="Model">
|
||||
import Design from './design.vue';
|
||||
import { listModel, addModel, delModel, modelDeploy ,getInfo,update} from '@/api/workflow/model';
|
||||
import BpmnDesign from '@/components/BpmnDesign/index.vue';
|
||||
import { listModel, addModel, delModel, modelDeploy, getInfo, update } from '@/api/workflow/model';
|
||||
import { ModelQuery, ModelForm, ModelVO } from '@/api/workflow/model/types';
|
||||
import { listCategory } from '@/api/workflow/category';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
const designModel = ref<InstanceType<typeof Design>>();
|
||||
const formRef = ref<ElFormInstance>();
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const categoryTreeRef = ref<ElTreeInstance>();
|
||||
const bpmnDesignRef = ref<InstanceType<typeof BpmnDesign>>();
|
||||
|
||||
type CategoryOption = {
|
||||
categoryCode: string;
|
||||
@ -163,6 +163,8 @@ const total = ref(0);
|
||||
const modelList = ref<ModelVO[]>([]);
|
||||
const categoryOptions = ref<CategoryOption[]>([]);
|
||||
const categoryName = ref('');
|
||||
const modelId = ref<string>('');
|
||||
const xmlStr = ref('');
|
||||
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
@ -170,12 +172,12 @@ const dialog = reactive<DialogOption>({
|
||||
});
|
||||
|
||||
const initFormData: ModelForm = {
|
||||
id:'',
|
||||
id: '',
|
||||
name: '',
|
||||
key: '',
|
||||
categoryCode: '',
|
||||
xml:'',
|
||||
svg:'',
|
||||
xml: '',
|
||||
svg: '',
|
||||
description: ''
|
||||
};
|
||||
const data = reactive<PageData<ModelForm, ModelQuery>>({
|
||||
@ -195,8 +197,6 @@ const data = reactive<PageData<ModelForm, ModelQuery>>({
|
||||
});
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
|
||||
const modelId = ref<string>('');
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
getTreeselect();
|
||||
@ -270,7 +270,7 @@ const clickDeploy = async (id: string, key: string) => {
|
||||
proxy?.$modal.msgSuccess('部署成功');
|
||||
};
|
||||
const handleAdd = () => {
|
||||
ids.value = []
|
||||
ids.value = [];
|
||||
getTreeselect();
|
||||
form.value = { ...initFormData };
|
||||
dialog.visible = true;
|
||||
@ -279,12 +279,12 @@ const handleAdd = () => {
|
||||
const handleUpdate = () => {
|
||||
dialog.title = '修改模型';
|
||||
nextTick(async () => {
|
||||
getTreeselect();
|
||||
await getTreeselect();
|
||||
const _id = ids.value[0];
|
||||
const res = await getInfo(_id);
|
||||
Object.assign(form.value, res.data);
|
||||
dialog.visible = true;
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
/** 提交按钮 */
|
||||
@ -292,13 +292,13 @@ const submitForm = () => {
|
||||
formRef.value.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
buttonLoading.value = true;
|
||||
if(ids.value && ids.value.length > 0){
|
||||
form.value.id = ids.value[0]
|
||||
if (ids.value && ids.value.length > 0) {
|
||||
form.value.id = ids.value[0];
|
||||
await update(form.value);
|
||||
proxy?.$modal.msgSuccess('新增成功');
|
||||
}else{
|
||||
initXml(form.value.key,form.value.name)
|
||||
form.value.xml = xml.value
|
||||
} else {
|
||||
initXml(form.value.key, form.value.name);
|
||||
form.value.xml = xml.value;
|
||||
await addModel(form.value);
|
||||
proxy?.$modal.msgSuccess('新增成功');
|
||||
}
|
||||
@ -321,11 +321,10 @@ const reset = () => {
|
||||
};
|
||||
|
||||
// 打开设计流程
|
||||
const clickDesign = (id: string) => {
|
||||
modelId.value = id;
|
||||
if (designModel.value) {
|
||||
designModel.value.openDialog(id);
|
||||
}
|
||||
const clickDesign = async (id: string) => {
|
||||
const res = await getInfo(id);
|
||||
xml.value = res.data.xml;
|
||||
bpmnDesignRef.value?.open(res.data.xml);
|
||||
};
|
||||
// 导出流程模型
|
||||
const clickExportZip = (data: any) => {
|
||||
@ -342,8 +341,7 @@ const getTreeselect = async () => {
|
||||
|
||||
const xml = ref<string>('');
|
||||
|
||||
const initXml = async ( key:string,name:string) => {
|
||||
|
||||
const initXml = async (key: string, name: string) => {
|
||||
xml.value = `<?xml version="1.0" encoding="UTF-8"?>
|
||||
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:bioc="http://bpmn.io/schema/bpmn/biocolor/1.0" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:flowable="http://flowable.org/bpmn" targetNamespace="http://www.flowable.org/processdef">
|
||||
<process id="${key}" name="${name}">
|
||||
@ -360,6 +358,6 @@ const initXml = async ( key:string,name:string) => {
|
||||
</bpmndi:BPMNPlane>
|
||||
</bpmndi:BPMNDiagram>
|
||||
</definitions>`;
|
||||
return xml;
|
||||
}
|
||||
return xml;
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user