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

add 添加模型接口

Browse Source
This commit is contained in:
gssong 2024-02-03 14:09:45 +08:00
parent 0423e28250
commit c61d1b2850
6 changed files with 170 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/api/workflow/model/index.ts
View File

@ -15,6 +15,18 @@ export const listModel = (query: ModelQuery): AxiosPromise<ModelVO[]> => {
});
};
/**
* 查询模型信息
* @param query
* @returns {*}
*/
export const getInfo = (id: string): AxiosPromise<ModelForm> => {
return request({
url: '/workflow/model/getInfo/'+id,
method: 'get'
});
};
/**
* 新增模型
* @param data
@ -22,12 +34,38 @@ export const listModel = (query: ModelQuery): AxiosPromise<ModelVO[]> => {
*/
export const addModel = (data: ModelForm): AxiosPromise<void> => {
return request({
url: '/workflow/model/rest/models',
url: '/workflow/model/save',
method: 'post',
data: data
});
};
/**
* 修改模型信息
* @param data
* @returns {*}
*/
export function update(data: ModelForm): AxiosPromise<void> {
return request({
url: '/workflow/model/update',
method: 'put',
data: data
});
}
/**
* 修改模型信息
* @param data
* @returns {*}
*/
export function editModelXml(data: ModelForm): AxiosPromise<void> {
return request({
url: '/workflow/model/editModelXml',
method: 'put',
data: data
});
}
/**
* 按id删除模型
* @returns {*}

3
src/api/workflow/model/types.ts
View File

@ -1,7 +1,10 @@
export interface ModelForm {
id: string,
name: string;
key: string;
categoryCode: string;
xml:string,
svg:string,
description: string;
}

63
src/components/BpmnDesign/index.vue
View File

@ -7,7 +7,7 @@
<el-header>
<div class="process-toolbar">
<el-space wrap :size="10">
<el-button size="small" type="primary">保 存</el-button>
<el-button size="small" @click="saveXml" type="primary">保 存</el-button>
<el-dropdown size="small">
<el-button size="small" type="primary"> 预 览 </el-button>
<template #dropdown>
@ -27,10 +27,6 @@
</el-dropdown-menu>
</template>
</el-dropdown>
<el-upload ref="xmlUploadRef" action="" style="display: none" />
<el-tooltip effect="dark" content="加载xml" placement="bottom">
<el-button size="small" icon="FolderOpened" @click="loadXML" />
</el-tooltip>
<el-tooltip effect="dark" content="新建" placement="bottom">
<el-button size="small" icon="CirclePlus" @click="newDiagram" />
</el-tooltip>
@ -99,15 +95,13 @@ const modelerStore = useModelerStore();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const dialog = reactive({
visible: true,
visible: false,
title: '编辑流程'
});
const panelFlag = ref(false);
const showPanel = ref(true);
const xmlUploadRef = ref<ElUploadInstance>();
const canvas = ref<HTMLDivElement>();
const panel = ref<HTMLDivElement>();
@ -122,7 +116,7 @@ const svgData = ref('');
onMounted(() => {
nextTick(() => {
initCanvas();
initDiagram();
//initDiagram(null);
initModel();
});
});
@ -135,13 +129,6 @@ const panelBarClick = () => {
}, 100);
};
/**
* 从文件加载xml
*/
const loadXML = () => {
xmlUploadRef.value.$el.querySelector('input').click();
};
/**
* 初始化Canvas
*/
@ -179,13 +166,26 @@ const initModel = () => {
*/
const newDiagram = async () => {
await proxy?.$modal.confirm('是否确认新建');
initDiagram();
initDiagram(null);
};
/**
* 初始化
*/
const initDiagram = () => {
bpmnModeler.value.importXML(diagramXML);
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);
})
}
};
/**
@ -288,6 +288,31 @@ const getProcessElement = () => {
if (rootElements[i].$type === 'bpmn:Process') return rootElements[i];
}
};
const getProcess = () => {
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)
};
/**
* 对外暴露子组件方法
*/
defineExpose({
initDiagram,
saveXml
});
</script>
<style lang="scss" scoped>

2
src/views/workflow/leave/index.vue
View File

@ -340,7 +340,7 @@ const handleExport = () => {
//提交申请
const handleStartWorkFlow = async (data: LeaveVO) => {
submitFormData.value.processKey = 'leave1';
submitFormData.value.processKey = 'test';
submitFormData.value.businessKey = data.id;
//流程变量
taskVariables.value = {

78
src/views/workflow/model/design.vue
View File

@ -1,59 +1,35 @@
<template>
<el-dialog v-if="visible" v-model="visible" title="Flowable工作流在线流程设计器" width="90%" height="100%" :before-close="handleClose">
<el-dialog v-if="dialog.visible" v-model="dialog.visible" :title="dialog.title" width="90%" height="100%">
<div class="modeler">
<iframe class="iframe" :src="src"></iframe>
<bpmn-design ref="bpmnDesign"></bpmn-design>
</div>
</el-dialog>
</template>
<script lang="ts">
import { propTypes } from '@/utils/propTypes';
const baseURL = import.meta.env.VITE_APP_BASE_API;
import { getToken } from '@/utils/auth';
export default {
props: {
modelId: propTypes.string.isRequired
},
emits: ['handleClose'],
data() {
return {
visible: false
};
},
computed: {
src() {
return `/static/flowable-modeler/index.html#/editor/${this.modelId}`;
},
apiUrl() {
return baseURL;
},
token() {
return getToken();
},
clientid() {
return import.meta.env.VITE_APP_CLIENT_ID;
}
},
mounted() {
//全局存入当前vue实例
(window as any).this = this;
},
methods: {
async handleClose() {
await this.$modal.confirm('请记得点击左上角保存按钮，确定关闭设计窗口?').finally(() => ((this as any).loading = false));
this.visible = false;
// 刷新数据
this.$emit('handleClose');
}
}
<script lang="ts" setup name="Design">
import { getInfo } from '@/api/workflow/model';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { ModelForm } from '@/api/workflow/model/types';
import BpmnDesign from '@/components/BpmnDesign';
const bpmnDesign = ref<InstanceType<typeof BpmnDesign>>();
const dialog = reactive<DialogOption>({
visible: false,
title: 'Flowable工作流在线流程设计器'
});
const modelForm = ref<ModelForm>();
const openDialog = (id) => {
dialog.visible = true
getInfo(id).then(res=>{
if (bpmnDesign.value) {
Object.assign(modelForm.value, res.data);
bpmnDesign.value.initDiagram(modelForm.value.xml);
}
});
};
/**
* 对外暴露子组件方法
*/
defineExpose({
openDialog
});
</script>
<style scoped>
.iframe {
width: 100%;
height: calc(100vh - 120px);
border: 0;
}
</style>

63
src/views/workflow/model/index.vue
View File

@ -44,6 +44,9 @@
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Edit" :disabled="multiple" @click="handleUpdate()">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">删除</el-button>
</el-col>
@ -102,10 +105,10 @@
<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 v-model="form.name" maxlength="20" show-word-limit />
<el-input :disabled="ids && ids.length > 0" v-model="form.name" maxlength="20" show-word-limit />
</el-form-item>
<el-form-item label="模型KEY：" prop="key">
<el-input v-model="form.key" maxlength="20" show-word-limit />
<el-input :disabled="ids && ids.length > 0" v-model="form.key" maxlength="20" show-word-limit />
</el-form-item>
<el-form-item label="流程分类" prop="categoryCode">
<el-tree-select
@ -118,7 +121,7 @@
/>
</el-form-item>
<el-form-item label="备注：" prop="description">
<el-input v-model="form.description" type="textarea" maxlength="30" show-word-limit></el-input>
<el-input v-model="form.description" type="textarea" maxlength="200" show-word-limit></el-input>
</el-form-item>
</el-form>
<template #footer>
@ -133,7 +136,7 @@
<script lang="ts" setup name="Model">
import Design from './design.vue';
import { listModel, addModel, delModel, modelDeploy } from '@/api/workflow/model';
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';
@ -167,9 +170,12 @@ const dialog = reactive<DialogOption>({
});
const initFormData: ModelForm = {
id:'',
name: '',
key: '',
categoryCode: '',
xml:'',
svg:'',
description: ''
};
const data = reactive<PageData<ModelForm, ModelQuery>>({
@ -264,18 +270,38 @@ const clickDeploy = async (id: string, key: string) => {
proxy?.$modal.msgSuccess('部署成功');
};
const handleAdd = () => {
ids.value = []
getTreeselect();
form.value = { ...initFormData };
dialog.visible = true;
dialog.title = '新增模型';
};
const handleUpdate = () => {
dialog.title = '修改模型';
nextTick(async () => {
getTreeselect();
const _id = ids.value[0];
const res = await getInfo(_id);
Object.assign(form.value, res.data);
dialog.visible = true;
})
};
/** 提交按钮 */
const submitForm = () => {
formRef.value.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
await addModel(form.value);
proxy?.$modal.msgSuccess('新增成功');
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
await addModel(form.value);
proxy?.$modal.msgSuccess('新增成功');
}
dialog.visible = false;
await getList();
}
@ -298,7 +324,7 @@ const reset = () => {
const clickDesign = (id: string) => {
modelId.value = id;
if (designModel.value) {
designModel.value.visible = true;
designModel.value.openDialog(id);
}
};
// 导出流程模型
@ -313,4 +339,27 @@ const getTreeselect = async () => {
data.children = proxy?.handleTree<CategoryOption>(res.data, 'id', 'parentId');
categoryOptions.value.push(data);
};
const xml = ref<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}">
<startEvent id="startNode1" name="开始" />
</process>
<bpmndi:BPMNDiagram id="BPMNDiagram_flow">
<bpmndi:BPMNPlane id="BPMNPlane_flow" bpmnElement="T-2d89e7a3-ba79-4abd-9f64-ea59621c258c">
<bpmndi:BPMNShape id="BPMNShape_startNode1" bpmnElement="startNode1" bioc:stroke="">
<omgdc:Bounds x="240" y="200" width="30" height="30" />
<bpmndi:BPMNLabel>
<omgdc:Bounds x="242" y="237" width="23" height="14" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</definitions>`;
return xml;
}
</script>