| | |
| | | <el-card shadow="never"> |
| | | <div style="display: flex; justify-content: space-between"> |
| | | <div> |
| | | <el-button |
| | | v-if=" |
| | | routeParams.type === 'add' || |
| | | (routeParams.type === 'update' && |
| | | form.processInstanceVo && |
| | | form.processInstanceVo.businessStatus && |
| | | (form.processInstanceVo.businessStatus === 'draft' || |
| | | form.processInstanceVo.businessStatus === 'cancel' || |
| | | form.processInstanceVo.businessStatus === 'back')) |
| | | " |
| | | :loading="buttonLoading" |
| | | type="info" |
| | | @click="submitForm('draft')" |
| | | >暂存</el-button |
| | | > |
| | | <el-button |
| | | v-if=" |
| | | routeParams.type === 'add' || |
| | | (routeParams.type === 'update' && |
| | | form.processInstanceVo && |
| | | (form.processInstanceVo.businessStatus === 'draft' || |
| | | form.processInstanceVo.businessStatus === 'cancel' || |
| | | form.processInstanceVo.businessStatus === 'back')) |
| | | " |
| | | :loading="buttonLoading" |
| | | type="primary" |
| | | @click="submitForm('submit')" |
| | | >提 交</el-button |
| | | > |
| | | <el-button |
| | | v-if="routeParams.type === 'approval' && form.processInstanceVo && form.processInstanceVo.businessStatus === 'waiting'" |
| | | :loading="buttonLoading" |
| | | type="primary" |
| | | @click="approvalVerifyOpen" |
| | | >审批</el-button |
| | | > |
| | | <el-button v-if="processInstanceId" type="primary" @click="handleApprovalRecord">流程进度</el-button> |
| | | <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> |
| | |
| | | <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> |
| | | |
| | |
| | | const buttonLoading = ref(false); |
| | | const loading = ref(true); |
| | | const leaveTime = ref<Array<string>>([]); |
| | | //流程实例id |
| | | const processInstanceId = ref(''); |
| | | //路由参数 |
| | | const routeParams = ref<Record<string, any>>({}); |
| | | const options = [ |
| | |
| | | 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<StartProcessBo>({ |
| | | businessKey: '', |
| | | tableName: '', |
| | | businessId: '', |
| | | flowCode: '', |
| | | variables: {} |
| | | }); |
| | | const taskVariables = ref<Record<string, any>>({}); |
| | |
| | | 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 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 = () => { |
| | |
| | | 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; |
| | | buttonLoading.value = false; |
| | | }); |
| | |
| | | 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); |
| | | } |
| | | } |
| | |
| | | } |
| | | }; |
| | | |
| | | const submitFlow = async () => { |
| | | handleStartWorkFlow(form.value); |
| | | dialogVisible.visible = false; |
| | | }; |
| | | //提交申请 |
| | | const handleStartWorkFlow = async (data: LeaveVO) => { |
| | | const handleStartWorkFlow = async (data: LeaveForm) => { |
| | | try { |
| | | submitFormData.value.tableName = 'test_leave'; |
| | | submitFormData.value.businessKey = data.id; |
| | | submitFormData.value.flowCode = flowCode.value; |
| | | submitFormData.value.businessId = data.id; |
| | | //流程变量 |
| | | taskVariables.value = { |
| | | entity: data, |
| | | leaveDays: data.leaveDays, |
| | | userList: [1, 2], |
| | | userList2: [1, 2] |
| | | userList: ['1', '3', '4'] |
| | | }; |
| | | submitFormData.value.variables = taskVariables.value; |
| | | const resp = await startWorkFlow(submitFormData.value); |
| | |
| | | }; |
| | | //审批记录 |
| | | const handleApprovalRecord = () => { |
| | | approvalRecordRef.value.init(processInstanceId.value); |
| | | approvalRecordRef.value.init(form.value.id); |
| | | }; |
| | | //提交回调 |
| | | const submitCallback = async () => { |
| | |
| | | const approvalVerifyOpen = async () => { |
| | | 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.query; |