add 添加动态表单提交流程
This commit is contained in:
parent
435542932d
commit
7ffa9851d5
@ -18,6 +18,37 @@ export interface BusinessFormVO {
|
|||||||
* 表单名称
|
* 表单名称
|
||||||
*/
|
*/
|
||||||
formName: string;
|
formName: string;
|
||||||
|
wfFormDefinitionVo: {
|
||||||
|
/**
|
||||||
|
* 主键
|
||||||
|
*/
|
||||||
|
id: string | number;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 动态表单id
|
||||||
|
*/
|
||||||
|
formId: string | number;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 流程定义id
|
||||||
|
*/
|
||||||
|
processDefinitionKey: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 流程定义名称
|
||||||
|
*/
|
||||||
|
processDefinitionName: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 流程定义id
|
||||||
|
*/
|
||||||
|
processDefinitionId: string | number;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 流程定义版本
|
||||||
|
*/
|
||||||
|
processDefinitionVersion: number;
|
||||||
|
};
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,35 +1,26 @@
|
|||||||
<template>
|
<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 v-loading="loading">
|
||||||
<div style="width: 100%;height: 300px;overflow: auto;position: relative;">
|
<div style="width: 100%;height: 300px;overflow: auto;position: relative;">
|
||||||
<div
|
<div v-for="(graphic, index) in graphicInfoVos" :key="index" :style="{
|
||||||
v-for="(graphic, index) in graphicInfoVos"
|
position: 'absolute',
|
||||||
:key="index"
|
left: `${graphic.x}px`,
|
||||||
:style="{
|
top: `${graphic.y}px`,
|
||||||
position: 'absolute',
|
width: `${graphic.width}px`,
|
||||||
left: `${graphic.x}px`,
|
height: `${graphic.height}px`,
|
||||||
top: `${graphic.y}px`,
|
cursor: 'pointer',
|
||||||
width: `${graphic.width}px`,
|
zIndex: 99
|
||||||
height: `${graphic.height}px`,
|
}" @mouseover="handleMouseOver(graphic)" @mouseleave="handleMouseLeave()"></div>
|
||||||
cursor: 'pointer',
|
|
||||||
zIndex: 99
|
|
||||||
}"
|
|
||||||
@mouseover="handleMouseOver(graphic)"
|
|
||||||
@mouseleave="handleMouseLeave()"
|
|
||||||
></div>
|
|
||||||
<!-- 弹出的 div 元素 -->
|
<!-- 弹出的 div 元素 -->
|
||||||
<div
|
<div v-show="popupVisible" class="triangle" :style="{
|
||||||
v-show="popupVisible"
|
position: 'absolute',
|
||||||
class="triangle"
|
left: `${graphicX}px`,
|
||||||
:style="{
|
top: `${graphicY}px`,
|
||||||
position: 'absolute',
|
backgroundColor: '#fff',
|
||||||
left: `${graphicX}px`,
|
padding: '10px',
|
||||||
top: `${graphicY}px`,
|
zIndex: 100
|
||||||
backgroundColor: '#fff',
|
}">
|
||||||
padding: '10px',
|
|
||||||
zIndex: 100
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<p>审批人员: {{ nodeInfo.nickName }}</p>
|
<p>审批人员: {{ nodeInfo.nickName }}</p>
|
||||||
<p>节点状态:{{ nodeInfo.status }}</p>
|
<p>节点状态:{{ nodeInfo.status }}</p>
|
||||||
<p>开始时间:{{ nodeInfo.startTime }}</p>
|
<p>开始时间:{{ nodeInfo.startTime }}</p>
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
<template>
|
<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 :model="form" label-width="120px" v-loading="loading">
|
||||||
<el-form-item label="消息提醒">
|
<el-form-item label="消息提醒">
|
||||||
<el-checkbox-group v-model="form.messageType">
|
<el-checkbox-group v-model="form.messageType">
|
||||||
|
@ -61,7 +61,7 @@
|
|||||||
<script setup name="BusinessForm" lang="ts">
|
<script setup name="BusinessForm" lang="ts">
|
||||||
import { queryList, getForm } from "@/api/workflow/form";
|
import { queryList, getForm } from "@/api/workflow/form";
|
||||||
import { FormVO } from "@/api/workflow/form/types";
|
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 { BusinessFormForm } from '@/api/workflow/businessForm/types';
|
||||||
import { startWorkFlow } from '@/api/workflow/task';
|
import { startWorkFlow } from '@/api/workflow/task';
|
||||||
import SubmitVerify from '@/components/Process/submitVerify.vue';
|
import SubmitVerify from '@/components/Process/submitVerify.vue';
|
||||||
@ -89,14 +89,14 @@ const queryParams = ref<Record<string, any>>({
|
|||||||
formName: ''
|
formName: ''
|
||||||
});
|
});
|
||||||
|
|
||||||
const initFormData: BusinessFormForm = {
|
const initFormData = ref<BusinessFormForm>({
|
||||||
id: undefined,
|
id: undefined,
|
||||||
applyCode: undefined,
|
applyCode: undefined,
|
||||||
formId: undefined,
|
formId: undefined,
|
||||||
formName: undefined,
|
formName: undefined,
|
||||||
content: undefined,
|
content: undefined,
|
||||||
contentValue: undefined
|
contentValue: undefined
|
||||||
}
|
})
|
||||||
|
|
||||||
const submitFormData = ref<Record<string, any>>({
|
const submitFormData = ref<Record<string, any>>({
|
||||||
businessKey: '',
|
businessKey: '',
|
||||||
@ -125,12 +125,12 @@ const queryFromList = async () => {
|
|||||||
/** 申请单据 */
|
/** 申请单据 */
|
||||||
const handleAppay = async (row?: FormVO) => {
|
const handleAppay = async (row?: FormVO) => {
|
||||||
render.visible = true;
|
render.visible = true;
|
||||||
fromLoading.value = false
|
fromLoading.value = true
|
||||||
render.title = row?.formName;
|
render.title = row?.formName;
|
||||||
const formId = row?.formId || ids.value[0];
|
const formId = row?.formId || ids.value[0];
|
||||||
initFormData.formId = row?.formId
|
initFormData.value.formId = row?.formId
|
||||||
initFormData.formName = row?.formName
|
initFormData.value.formName = row?.formName
|
||||||
initFormData.content = row?.content
|
initFormData.value.content = row?.content
|
||||||
const res = await getForm(formId);
|
const res = await getForm(formId);
|
||||||
if (vfRenderRef.value) {
|
if (vfRenderRef.value) {
|
||||||
fromLoading.value = false
|
fromLoading.value = false
|
||||||
@ -147,9 +147,9 @@ const submitData = (status: string) => {
|
|||||||
fromLoading.value = true
|
fromLoading.value = true
|
||||||
buttonLoading.value = true;
|
buttonLoading.value = true;
|
||||||
vfRenderRef.value.getFormData().then((formData) => {
|
vfRenderRef.value.getFormData().then((formData) => {
|
||||||
initFormData.contentValue = JSON.stringify(formData)
|
initFormData.value.contentValue = JSON.stringify(formData)
|
||||||
if ('draft' === status) {
|
if ('draft' === status) {
|
||||||
addBusinessForm(initFormData).then(res => {
|
addBusinessForm(initFormData.value).then(res => {
|
||||||
proxy?.$modal.msgSuccess("暂存成功");
|
proxy?.$modal.msgSuccess("暂存成功");
|
||||||
render.visible = false;
|
render.visible = false;
|
||||||
buttonLoading.value = false;
|
buttonLoading.value = false;
|
||||||
@ -159,10 +159,19 @@ const submitData = (status: string) => {
|
|||||||
proxy?.$modal.msgError("未绑定流程!");
|
proxy?.$modal.msgError("未绑定流程!");
|
||||||
buttonLoading.value = false;
|
buttonLoading.value = false;
|
||||||
fromLoading.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)
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -73,13 +73,18 @@
|
|||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
<!-- 提交组件 -->
|
||||||
|
<submitVerify ref="submitVerifyRef" @submitCallback="submitCallback" @cancelCallback="cancelCallback" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="BusinessForm" lang="ts">
|
<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 { 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 { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||||
|
|
||||||
const businessFormList = ref<BusinessFormVO[]>([]);
|
const businessFormList = ref<BusinessFormVO[]>([]);
|
||||||
@ -92,6 +97,7 @@ const applyCodes = ref<Array<string | number>>([]);
|
|||||||
const single = ref(true);
|
const single = ref(true);
|
||||||
const multiple = ref(true);
|
const multiple = ref(true);
|
||||||
const total = ref(0);
|
const total = ref(0);
|
||||||
|
const processDefinitionKey = ref<string>('');
|
||||||
|
|
||||||
const queryFormRef = ref<ElFormInstance>();
|
const queryFormRef = ref<ElFormInstance>();
|
||||||
const vfRenderRef = ref(null);
|
const vfRenderRef = ref(null);
|
||||||
@ -124,6 +130,12 @@ const data = reactive<PageData<BusinessFormForm, BusinessFormQuery>>({
|
|||||||
|
|
||||||
const { queryParams, form, rules } = toRefs(data);
|
const { queryParams, form, rules } = toRefs(data);
|
||||||
|
|
||||||
|
const submitFormData = ref<Record<string, any>>({
|
||||||
|
businessKey: '',
|
||||||
|
processKey: '',
|
||||||
|
variables: {}
|
||||||
|
});
|
||||||
|
|
||||||
/** 查询发起流程列表 */
|
/** 查询发起流程列表 */
|
||||||
const getList = async () => {
|
const getList = async () => {
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
@ -158,12 +170,17 @@ const handleSelectionChange = (selection: BusinessFormVO[]) => {
|
|||||||
const handleUpdate = async (row?: BusinessFormVO) => {
|
const handleUpdate = async (row?: BusinessFormVO) => {
|
||||||
const _id = row?.id || ids.value[0]
|
const _id = row?.id || ids.value[0]
|
||||||
fromLoading.value = true
|
fromLoading.value = true
|
||||||
|
buttonLoading.value = true
|
||||||
render.visible = true;
|
render.visible = true;
|
||||||
const res = await getBusinessForm(_id);
|
const res = await getBusinessForm(_id);
|
||||||
Object.assign(form.value, res.data);
|
form.value = res.data
|
||||||
render.title = "修改单据";
|
render.title = "修改单据";
|
||||||
|
if (res.data.wfFormDefinitionVo && res.data.wfFormDefinitionVo.processDefinitionKey) {
|
||||||
|
processDefinitionKey.value = res.data.wfFormDefinitionVo.processDefinitionKey
|
||||||
|
}
|
||||||
if (vfRenderRef.value) {
|
if (vfRenderRef.value) {
|
||||||
fromLoading.value = false
|
fromLoading.value = false
|
||||||
|
buttonLoading.value = false
|
||||||
vfRenderRef.value.setFormJson(res.data.content);
|
vfRenderRef.value.setFormJson(res.data.content);
|
||||||
vfRenderRef.value.setFormData(JSON.parse(res.data.contentValue))
|
vfRenderRef.value.setFormData(JSON.parse(res.data.contentValue))
|
||||||
}
|
}
|
||||||
@ -173,20 +190,54 @@ const handleUpdate = async (row?: BusinessFormVO) => {
|
|||||||
const submitData = (status: string) => {
|
const submitData = (status: string) => {
|
||||||
if (vfRenderRef.value) {
|
if (vfRenderRef.value) {
|
||||||
buttonLoading.value = true;
|
buttonLoading.value = true;
|
||||||
|
fromLoading.value = true;
|
||||||
vfRenderRef.value.getFormData().then((formData) => {
|
vfRenderRef.value.getFormData().then((formData) => {
|
||||||
initFormData.contentValue = JSON.stringify(formData)
|
form.value.contentValue = JSON.stringify(formData)
|
||||||
if ('draft' === status) {
|
if ('draft' === status) {
|
||||||
addBusinessForm(initFormData).then(res => {
|
updateBusinessForm(form.value).then(res => {
|
||||||
proxy?.$modal.msgSuccess("暂存成功");
|
proxy?.$modal.msgSuccess("暂存成功");
|
||||||
render.visible = false;
|
render.visible = false;
|
||||||
buttonLoading.value = false;
|
buttonLoading.value = false;
|
||||||
|
fromLoading.value = false;
|
||||||
})
|
})
|
||||||
} else {
|
} 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 handleDelete = async (row?: BusinessFormVO) => {
|
||||||
const _ids = row?.id || ids.value;
|
const _ids = row?.id || ids.value;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user