| | |
| | | <template> |
| | | <div class="p-2"> |
| | | <el-card shadow="never"> |
| | | <div style="display: flex;justify-content: space-between;"> |
| | | <div> |
| | | <el-button :loading="buttonLoading" |
| | | v-if="routeParams.type === 'add' || (routeParams.type === 'update' && form.processInstanceVo.businessStatus && (form.processInstanceVo.businessStatus === 'draft' || form.processInstanceVo.businessStatus === 'cancel' || form.processInstanceVo.businessStatus === 'back'))" |
| | | type="info" @click="submitForm('draft')">暂存</el-button> |
| | | <el-button :loading="buttonLoading" v-if="routeParams.type === 'add' || (routeParams.type === 'update' && form.processInstanceVo && (form.processInstanceVo.businessStatus === 'draft' || form.processInstanceVo.businessStatus === 'cancel' || form.processInstanceVo.businessStatus === 'back'))" |
| | | type="primary" @click="submitForm('submit')">提 交</el-button> |
| | | <el-button :loading="buttonLoading" v-if="routeParams.type === 'approval' && form.processInstanceVo && form.processInstanceVo.businessStatus === 'waiting'" |
| | | type="primary" @click="approvalVerifyOpen">审批</el-button> |
| | | <el-button @click="handleApprovalRecord" type="primary" v-if="processInstanceId">流程进度</el-button> |
| | | </div> |
| | | <div> |
| | | <el-button style="float: right" @click="goBack()">返回</el-button> |
| | | </div> |
| | | <div style="display: flex; justify-content: space-between"> |
| | | <div> |
| | | <el-button v-if="submitButtonShow" :loading="buttonLoading" type="info" @click="submitForm('draft')">暂存</el-button> |
| | | <el-button v-if="submitButtonShow" :loading="buttonLoading" type="primary" @click="submitForm('submit')">提 交</el-button> |
| | | <el-button v-if="approvalButtonShow" :loading="buttonLoading" type="primary" @click="approvalVerifyOpen">审批</el-button> |
| | | <el-button v-if="form && form.id && form.status !== 'draft'" type="primary" @click="handleApprovalRecord">流程进度</el-button> |
| | | </div> |
| | | <div> |
| | | <el-button style="float: right" @click="goBack()">返回</el-button> |
| | | </div> |
| | | </div> |
| | | </el-card> |
| | | <el-card shadow="never"> |
| | | <el-form ref="leaveFormRef" :disabled="routeParams.type ==='view'" v-loading="loading" :model="form" :rules="rules" label-width="80px"> |
| | | <el-card shadow="never" style="height: 78vh; overflow-y: auto"> |
| | | <el-form ref="leaveFormRef" v-loading="loading" :disabled="routeParams.type === 'view'" :model="form" :rules="rules" label-width="80px"> |
| | | <el-form-item label="请假类型" prop="leaveType"> |
| | | <el-select v-model="form.leaveType" placeholder="请选择请假类型" style="width: 100%"> |
| | | <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> |
| | |
| | | <el-form-item label="请假时间"> |
| | | <el-date-picker |
| | | v-model="leaveTime" |
| | | value-format="YYYY-MM-DD HH:mm:ss" |
| | | type="daterange" |
| | | range-separator="To" |
| | | start-placeholder="开始时间" |
| | | end-placeholder="结束时间" |
| | | :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]" |
| | | @change="changeLeaveTime()" |
| | | /> |
| | | </el-form-item> |
| | |
| | | <submitVerify ref="submitVerifyRef" :task-variables="taskVariables" @submit-callback="submitCallback" /> |
| | | <!-- 审批记录 --> |
| | | <approvalRecord ref="approvalRecordRef" /> |
| | | <el-dialog v-model="dialogVisible.visible" :title="dialogVisible.title" :before-close="handleClose" width="500"> |
| | | <el-select v-model="flowCode" placeholder="Select" style="width: 240px"> |
| | | <el-option v-for="item in flowCodeOptions" :key="item.value" :label="item.label" :value="item.value" /> |
| | | </el-select> |
| | | <template #footer> |
| | | <div class="dialog-footer"> |
| | | <el-button @click="handleClose">取消</el-button> |
| | | <el-button type="primary" @click="submitFlow()"> 确认 </el-button> |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | import SubmitVerify from '@/components/Process/submitVerify.vue'; |
| | | import ApprovalRecord from '@/components/Process/approvalRecord.vue'; |
| | | import { AxiosResponse } from 'axios'; |
| | | |
| | | import { StartProcessBo } from '@/api/workflow/workflowCommon/types'; |
| | | const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
| | | |
| | | const buttonLoading = ref(false); |
| | | const loading = ref(true); |
| | | const leaveTime = ref<Array<string>>([]); |
| | | //流程实例id |
| | | const processInstanceId = ref(''); |
| | | //路由参数 |
| | | const routeParams = ref<Record<string, any>>({}) |
| | | //路由参数 |
| | | const routeParams = ref<Record<string, any>>({}); |
| | | const options = [ |
| | | { |
| | | value: '1', |
| | |
| | | label: '婚假' |
| | | } |
| | | ]; |
| | | const flowCodeOptions = [ |
| | | { |
| | | value: 'leave1', |
| | | label: '请假申请-普通' |
| | | }, |
| | | { |
| | | value: 'leave2', |
| | | label: '请假申请-排他网关' |
| | | }, |
| | | { |
| | | value: 'leave3', |
| | | label: '请假申请-并行网关' |
| | | }, |
| | | { |
| | | value: 'leave4', |
| | | label: '请假申请-会签' |
| | | }, |
| | | { |
| | | value: 'leave5', |
| | | label: '请假申请-并行会签网关' |
| | | } |
| | | ]; |
| | | |
| | | const flowCode = ref<string>(''); |
| | | |
| | | const dialogVisible = reactive<DialogOption>({ |
| | | visible: false, |
| | | title: '流程定义' |
| | | }); |
| | | //提交组件 |
| | | const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>(); |
| | | //审批记录组件 |
| | |
| | | |
| | | const leaveFormRef = ref<ElFormInstance>(); |
| | | |
| | | const submitFormData = ref<Record<string, any>>({ |
| | | businessKey: '', |
| | | processKey: '', |
| | | const submitFormData = ref<StartProcessBo>({ |
| | | businessId: '', |
| | | flowCode: '', |
| | | variables: {} |
| | | }); |
| | | const taskVariables = ref<Record<string, any>>({}); |
| | | |
| | | |
| | | const initFormData: LeaveForm = { |
| | | id: undefined, |
| | |
| | | endDate: undefined, |
| | | leaveDays: undefined, |
| | | remark: undefined, |
| | | processInstanceVo: {} |
| | | status: undefined |
| | | }; |
| | | const data = reactive<PageData<LeaveForm, LeaveQuery>>({ |
| | | form: { ...initFormData }, |
| | |
| | | } |
| | | }); |
| | | |
| | | const handleClose = () => { |
| | | dialogVisible.visible = false; |
| | | flowCode.value = ''; |
| | | buttonLoading.value = false; |
| | | }; |
| | | const { form, rules } = toRefs(data); |
| | | |
| | | |
| | | /** 表单重置 */ |
| | | const reset = () => { |
| | |
| | | const startDate = new Date(leaveTime.value[0]).getTime(); |
| | | const endDate = new Date(leaveTime.value[1]).getTime(); |
| | | const diffInMilliseconds = endDate - startDate; |
| | | form.value.leaveDays = Math.floor(diffInMilliseconds / (1000 * 60 * 60 * 24)); |
| | | form.value.leaveDays = Math.floor(diffInMilliseconds / (1000 * 60 * 60 * 24)) + 1; |
| | | }; |
| | | /** 获取详情 */ |
| | | const getInfo = () => { |
| | | loading.value = true |
| | | loading.value = true; |
| | | buttonLoading.value = false; |
| | | nextTick(async () => { |
| | | const res = await getLeave(routeParams.value.id); |
| | |
| | | leaveTime.value = []; |
| | | leaveTime.value.push(form.value.startDate); |
| | | leaveTime.value.push(form.value.endDate); |
| | | if(form.value.processInstanceVo){ |
| | | processInstanceId.value = form.value.processInstanceVo.id |
| | | } |
| | | loading.value = false |
| | | loading.value = false; |
| | | buttonLoading.value = false; |
| | | }); |
| | | }; |
| | |
| | | proxy?.$modal.msgError('请假时间不能为空'); |
| | | return; |
| | | } |
| | | leaveFormRef.value?.validate(async (valid: boolean) => { |
| | | form.value.startDate = leaveTime.value[0]; |
| | | form.value.endDate = leaveTime.value[1]; |
| | | if (valid) { |
| | | buttonLoading.value = true; |
| | | let res: AxiosResponse<LeaveVO>; |
| | | if (form.value.id) { |
| | | res = await updateLeave(form.value); |
| | | } else { |
| | | res = await addLeave(form.value); |
| | | try { |
| | | leaveFormRef.value?.validate(async (valid: boolean) => { |
| | | form.value.startDate = leaveTime.value[0]; |
| | | form.value.endDate = leaveTime.value[1]; |
| | | if (valid) { |
| | | buttonLoading.value = true; |
| | | let res: AxiosResponse<LeaveVO>; |
| | | if (form.value.id) { |
| | | res = await updateLeave(form.value); |
| | | } else { |
| | | res = await addLeave(form.value); |
| | | } |
| | | form.value = res.data; |
| | | if (status === 'draft') { |
| | | buttonLoading.value = false; |
| | | proxy?.$modal.msgSuccess('暂存成功'); |
| | | proxy.$tab.closePage(proxy.$route); |
| | | proxy.$router.go(-1); |
| | | } else { |
| | | if ((form.value.status === 'draft' && (flowCode.value === '' || flowCode.value === null)) || routeParams.value.type === 'add') { |
| | | flowCode.value = flowCodeOptions[0].value; |
| | | dialogVisible.visible = true; |
| | | return; |
| | | } |
| | | //说明启动过先随意穿个参数 |
| | | if (flowCode.value === '' || flowCode.value === null) { |
| | | flowCode.value = 'xx'; |
| | | } |
| | | await handleStartWorkFlow(res.data); |
| | | } |
| | | } |
| | | form.value = res.data; |
| | | if (status === 'draft') { |
| | | buttonLoading.value = false; |
| | | proxy?.$modal.msgSuccess('暂存成功'); |
| | | proxy.$tab.closePage(proxy.$route); |
| | | proxy.$router.go(-1) |
| | | } else { |
| | | await handleStartWorkFlow(res.data); |
| | | } |
| | | } |
| | | }); |
| | | }); |
| | | } finally { |
| | | buttonLoading.value = false; |
| | | } |
| | | }; |
| | | |
| | | const submitFlow = async () => { |
| | | handleStartWorkFlow(form.value); |
| | | dialogVisible.visible = false; |
| | | }; |
| | | //提交申请 |
| | | const handleStartWorkFlow = async (data: LeaveVO) => { |
| | | submitFormData.value.processKey = 'test'; |
| | | submitFormData.value.businessKey = data.id; |
| | | //流程变量 |
| | | taskVariables.value = { |
| | | entity: data, |
| | | leaveDays: data.leaveDays, |
| | | userList: [1, 2], |
| | | userList2: [1, 2] |
| | | }; |
| | | submitFormData.value.variables = taskVariables.value; |
| | | const resp = await startWorkFlow(submitFormData.value); |
| | | if (submitVerifyRef.value) { |
| | | const handleStartWorkFlow = async (data: LeaveForm) => { |
| | | try { |
| | | submitFormData.value.flowCode = flowCode.value; |
| | | submitFormData.value.businessId = data.id; |
| | | //流程变量 |
| | | taskVariables.value = { |
| | | leaveDays: data.leaveDays, |
| | | userList: ['1', '3', '4'] |
| | | }; |
| | | submitFormData.value.variables = taskVariables.value; |
| | | const resp = await startWorkFlow(submitFormData.value); |
| | | if (submitVerifyRef.value) { |
| | | buttonLoading.value = false; |
| | | submitVerifyRef.value.openDialog(resp.data.taskId); |
| | | } |
| | | } finally { |
| | | buttonLoading.value = false; |
| | | submitVerifyRef.value.openDialog(resp.data.taskId); |
| | | } |
| | | }; |
| | | //审批记录 |
| | | const handleApprovalRecord = () => { |
| | | approvalRecordRef.value.init(processInstanceId.value); |
| | | approvalRecordRef.value.init(form.value.id); |
| | | }; |
| | | //提交回调 |
| | | const submitCallback = async () => { |
| | | proxy.$tab.closePage(proxy.$route); |
| | | proxy.$router.go(-1) |
| | | await proxy.$tab.closePage(proxy.$route); |
| | | proxy.$router.go(-1); |
| | | }; |
| | | |
| | | //返回 |
| | | const goBack = () => { |
| | | proxy.$tab.closePage(proxy.$route); |
| | | proxy.$router.go(-1) |
| | | } |
| | | proxy.$router.go(-1); |
| | | }; |
| | | //审批 |
| | | const approvalVerifyOpen = async () => { |
| | | submitVerifyRef.value.openDialog(proxy.$route.query.taskId); |
| | | submitVerifyRef.value.openDialog(routeParams.value.taskId); |
| | | }; |
| | | //校验提交按钮是否显示 |
| | | const submitButtonShow = computed(() => { |
| | | return ( |
| | | routeParams.value.type === 'add' || |
| | | (routeParams.value.type === 'update' && |
| | | form.value.status && |
| | | (form.value.status === 'draft' || form.value.status === 'cancel' || form.value.status === 'back')) |
| | | ); |
| | | }); |
| | | |
| | | //校验审批按钮是否显示 |
| | | const approvalButtonShow = computed(() => { |
| | | return routeParams.value.type === 'approval' && form.value.status && form.value.status === 'waiting'; |
| | | }); |
| | | |
| | | onMounted(() => { |
| | | nextTick(async () => { |
| | | routeParams.value = proxy?.$route.params |
| | | reset(); |
| | | if (routeParams.value.type === 'update' || routeParams.value.type === 'view' || routeParams.value.type === 'approval') { |
| | | getInfo() |
| | | } |
| | | }) |
| | | routeParams.value = proxy.$route.query; |
| | | reset(); |
| | | loading.value = false; |
| | | if (routeParams.value.type === 'update' || routeParams.value.type === 'view' || routeParams.value.type === 'approval') { |
| | | getInfo(); |
| | | } |
| | | }); |
| | | }); |
| | | </script> |