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 2023-09-21 21:07:19 +08:00
parent 435542932d
commit 7ffa9851d5
5 changed files with 130 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/api/workflow/businessForm/types.ts
View File

@ -18,6 +18,37 @@ export interface BusinessFormVO {
* 表单名称
*/
formName: string;
wfFormDefinitionVo: {
/**
* 主键
*/
id: string | number;
/**
* 动态表单id
*/
formId: string | number;
/**
* 流程定义id
*/
processDefinitionKey: string;
/**
* 流程定义名称
*/
processDefinitionName: string;
/**
* 流程定义id
*/
processDefinitionId: string | number;
/**
* 流程定义版本
*/
processDefinitionVersion: number;
};
}

47
src/components/Process/approvalRecord.vue
View File

@ -1,35 +1,26 @@
<template>
<el-dialog v-model="visible" draggable title="审批记录" :width="props.width" :height="props.height" append-to-body :close-on-click-modal="false">
<el-dialog v-model="visible" draggable title="审批记录" :width="props.width" :height="props.height" append-to-body
:close-on-click-modal="false">
<div v-loading="loading">
<div style="width: 100%;height: 300px;overflow: auto;position: relative;">
<div
v-for="(graphic, index) in graphicInfoVos"
:key="index"
:style="{
position: 'absolute',
left: `${graphic.x}px`,
top: `${graphic.y}px`,
width: `${graphic.width}px`,
height: `${graphic.height}px`,
cursor: 'pointer',
zIndex: 99
}"
@mouseover="handleMouseOver(graphic)"
@mouseleave="handleMouseLeave()"
></div>
<div v-for="(graphic, index) in graphicInfoVos" :key="index" :style="{
position: 'absolute',
left: `${graphic.x}px`,
top: `${graphic.y}px`,
width: `${graphic.width}px`,
height: `${graphic.height}px`,
cursor: 'pointer',
zIndex: 99
}" @mouseover="handleMouseOver(graphic)" @mouseleave="handleMouseLeave()"></div>
<!-- 弹出的 div 元素 -->
<div
v-show="popupVisible"
class="triangle"
:style="{
position: 'absolute',
left: `${graphicX}px`,
top: `${graphicY}px`,
backgroundColor: '#fff',
padding: '10px',
zIndex: 100
}"
>
<div v-show="popupVisible" class="triangle" :style="{
position: 'absolute',
left: `${graphicX}px`,
top: `${graphicY}px`,
backgroundColor: '#fff',
padding: '10px',
zIndex: 100
}">
<p>审批人员: {{ nodeInfo.nickName }}</p>
<p>节点状态：{{ nodeInfo.status }}</p>
<p>开始时间：{{ nodeInfo.startTime }}</p>

3
src/components/Process/submitVerify.vue
View File

@ -1,5 +1,6 @@
<template>
<el-dialog v-model="dialog.visible" :title="dialog.title" width="50%" draggable :close-on-click-modal="false">
<el-dialog v-model="dialog.visible" :title="dialog.title" width="50%" draggable :before-close="cancel"
:close-on-click-modal="false">
<el-form :model="form" label-width="120px" v-loading="loading">
<el-form-item label="消息提醒">
<el-checkbox-group v-model="form.messageType">

33
src/views/workflow/businessForm/index.vue
View File

@ -61,7 +61,7 @@
<script setup name="BusinessForm" lang="ts">
import { queryList, getForm } from "@/api/workflow/form";
import { FormVO } from "@/api/workflow/form/types";
import { addBusinessForm } from '@/api/workflow/businessForm';
import { addBusinessForm, updateBusinessForm } from '@/api/workflow/businessForm';
import { BusinessFormForm } from '@/api/workflow/businessForm/types';
import { startWorkFlow } from '@/api/workflow/task';
import SubmitVerify from '@/components/Process/submitVerify.vue';
@ -89,14 +89,14 @@ const queryParams = ref<Record<string, any>>({
formName: ''
});
const initFormData: BusinessFormForm = {
const initFormData = ref<BusinessFormForm>({
id: undefined,
applyCode: undefined,
formId: undefined,
formName: undefined,
content: undefined,
contentValue: undefined
}
})
const submitFormData = ref<Record<string, any>>({
businessKey: '',
@ -125,12 +125,12 @@ const queryFromList = async () => {
/** 申请单据 */
const handleAppay = async (row?: FormVO) => {
render.visible = true;
fromLoading.value = false
fromLoading.value = true
render.title = row?.formName;
const formId = row?.formId || ids.value[0];
initFormData.formId = row?.formId
initFormData.formName = row?.formName
initFormData.content = row?.content
initFormData.value.formId = row?.formId
initFormData.value.formName = row?.formName
initFormData.value.content = row?.content
const res = await getForm(formId);
if (vfRenderRef.value) {
fromLoading.value = false
@ -147,9 +147,9 @@ const submitData = (status: string) => {
fromLoading.value = true
buttonLoading.value = true;
vfRenderRef.value.getFormData().then((formData) => {
initFormData.contentValue = JSON.stringify(formData)
initFormData.value.contentValue = JSON.stringify(formData)
if ('draft' === status) {
addBusinessForm(initFormData).then(res => {
addBusinessForm(initFormData.value).then(res => {
proxy?.$modal.msgSuccess("暂存成功");
render.visible = false;
buttonLoading.value = false;
@ -159,10 +159,19 @@ const submitData = (status: string) => {
proxy?.$modal.msgError("未绑定流程!");
buttonLoading.value = false;
fromLoading.value = false;
return
}
if (initFormData.value && initFormData.value.id) {
updateBusinessForm(initFormData.value).then(res => {
initFormData.value = res.data
handleStartWorkFlow(res.data)
})
} else {
addBusinessForm(initFormData.value).then(res => {
initFormData.value = res.data
handleStartWorkFlow(res.data)
})
}
addBusinessForm(initFormData).then(res => {
handleStartWorkFlow(res.data)
})
}
})
}

63
src/views/workflow/businessForm/list.vue
View File

@ -73,13 +73,18 @@
</span>
</template>
</el-dialog>
<!-- 提交组件 -->
<submitVerify ref="submitVerifyRef" @submitCallback="submitCallback" @cancelCallback="cancelCallback" />
</div>
</template>
<script setup name="BusinessForm" lang="ts">
import { listBusinessForm, getBusinessForm, delBusinessForm, addBusinessForm, updateBusinessForm } from '@/api/workflow/businessForm';
import { listBusinessForm, getBusinessForm, delBusinessForm, updateBusinessForm } from '@/api/workflow/businessForm';
import { BusinessFormVO, BusinessFormQuery, BusinessFormForm } from '@/api/workflow/businessForm/types';
import SubmitVerify from '@/components/Process/submitVerify.vue';
import { startWorkFlow } from '@/api/workflow/task';
//提交组件
const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const businessFormList = ref<BusinessFormVO[]>([]);
@ -92,6 +97,7 @@ const applyCodes = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const processDefinitionKey = ref<string>('');
const queryFormRef = ref<ElFormInstance>();
const vfRenderRef = ref(null);
@ -124,6 +130,12 @@ const data = reactive<PageData<BusinessFormForm, BusinessFormQuery>>({
const { queryParams, form, rules } = toRefs(data);
const submitFormData = ref<Record<string, any>>({
businessKey: '',
processKey: '',
variables: {}
});
/** 查询发起流程列表 */
const getList = async () => {
loading.value = true;
@ -158,12 +170,17 @@ const handleSelectionChange = (selection: BusinessFormVO[]) => {
const handleUpdate = async (row?: BusinessFormVO) => {
const _id = row?.id || ids.value[0]
fromLoading.value = true
buttonLoading.value = true
render.visible = true;
const res = await getBusinessForm(_id);
Object.assign(form.value, res.data);
form.value = res.data
render.title = "修改单据";
if (res.data.wfFormDefinitionVo && res.data.wfFormDefinitionVo.processDefinitionKey) {
processDefinitionKey.value = res.data.wfFormDefinitionVo.processDefinitionKey
}
if (vfRenderRef.value) {
fromLoading.value = false
buttonLoading.value = false
vfRenderRef.value.setFormJson(res.data.content);
vfRenderRef.value.setFormData(JSON.parse(res.data.contentValue))
}
@ -173,20 +190,54 @@ const handleUpdate = async (row?: BusinessFormVO) => {
const submitData = (status: string) => {
if (vfRenderRef.value) {
buttonLoading.value = true;
fromLoading.value = true;
vfRenderRef.value.getFormData().then((formData) => {
initFormData.contentValue = JSON.stringify(formData)
form.value.contentValue = JSON.stringify(formData)
if ('draft' === status) {
addBusinessForm(initFormData).then(res => {
updateBusinessForm(form.value).then(res => {
proxy?.$modal.msgSuccess("暂存成功");
render.visible = false;
buttonLoading.value = false;
fromLoading.value = false;
})
} else {
if (!processDefinitionKey.value) {
proxy?.$modal.msgError("未绑定流程!");
buttonLoading.value = false;
fromLoading.value = false;
return
}
updateBusinessForm(form.value).then(res => {
handleStartWorkFlow(res.data)
})
}
})
}
}
//提交申请
const handleStartWorkFlow = async (data: any) => {
submitFormData.value.processKey = processDefinitionKey.value;
submitFormData.value.businessKey = data.id;
submitFormData.value.variables = data.variable;
startWorkFlow(submitFormData.value).then((response: any) => {
if (submitVerifyRef.value) {
submitVerifyRef.value.openDialog(response.data.taskId);
}
});
};
//提交回调
const submitCallback = async () => {
render.visible = false;
buttonLoading.value = false;
fromLoading.value = false;
handleQuery();
};
//取消回调
const cancelCallback = async () => {
buttonLoading.value = false;
fromLoading.value = false;
};
/** 删除按钮操作 */
const handleDelete = async (row?: BusinessFormVO) => {
const _ids = row?.id || ids.value;