165 lines
3.9 KiB
Vue
165 lines
3.9 KiB
Vue
<script setup lang="ts">
|
||
import type { StartWorkFlowReqData } from '#/api/workflow/task/model';
|
||
|
||
import { computed, onMounted } from 'vue';
|
||
import { useRoute, useRouter } from 'vue-router';
|
||
|
||
import { useVbenModal } from '@vben/common-ui';
|
||
|
||
import { Card } from 'ant-design-vue';
|
||
import dayjs from 'dayjs';
|
||
import { cloneDeep, omit } from 'lodash-es';
|
||
|
||
import { useVbenForm } from '#/adapter/form';
|
||
import { startWorkFlow } from '#/api/workflow/task';
|
||
|
||
import { applyModal } from '../components';
|
||
import { leaveAdd, leaveInfo, leaveUpdate } from './api';
|
||
import { modalSchema } from './data';
|
||
|
||
const route = useRoute();
|
||
const readonly = route.query?.readonly === 'true';
|
||
const id = route.query?.id as string;
|
||
|
||
/**
|
||
* id存在&readonly时候
|
||
*/
|
||
const showActionBtn = computed(() => {
|
||
return !readonly;
|
||
});
|
||
|
||
const [BasicForm, formApi] = useVbenForm({
|
||
commonConfig: {
|
||
// 默认占满两列
|
||
formItemClass: 'col-span-2',
|
||
// 默认label宽度 px
|
||
labelWidth: 100,
|
||
// 通用配置项 会影响到所有表单项
|
||
componentProps: {
|
||
class: 'w-full',
|
||
disabled: readonly,
|
||
},
|
||
},
|
||
schema: modalSchema(!readonly),
|
||
showDefaultActions: false,
|
||
wrapperClass: 'grid-cols-2',
|
||
});
|
||
|
||
onMounted(async () => {
|
||
// 只读 获取信息赋值
|
||
if (id) {
|
||
const resp = await leaveInfo(id);
|
||
await formApi.setValues(resp);
|
||
const dateRange = [dayjs(resp.startDate), dayjs(resp.endDate)];
|
||
await formApi.setFieldValue('dateRange', dateRange);
|
||
|
||
/**
|
||
* window.parent（最近的上一级父页面）
|
||
* 主要解决内嵌iframe卡顿的问题
|
||
*/
|
||
if (readonly) {
|
||
window.parent.postMessage('mounted', '*');
|
||
}
|
||
}
|
||
});
|
||
|
||
const router = useRouter();
|
||
|
||
/**
|
||
* 提取通用逻辑
|
||
*/
|
||
async function handleSaveOrUpdate() {
|
||
const { valid } = await formApi.validate();
|
||
if (!valid) {
|
||
return;
|
||
}
|
||
let data = cloneDeep(await formApi.getValues()) as any;
|
||
data = omit(data, 'flowType');
|
||
// 处理日期
|
||
data.startDate = dayjs(data.dateRange[0]).format('YYYY-MM-DD HH:mm:ss');
|
||
data.endDate = dayjs(data.dateRange[1]).format('YYYY-MM-DD HH:mm:ss');
|
||
if (id) {
|
||
data.id = id;
|
||
return await leaveUpdate(data);
|
||
} else {
|
||
return await leaveAdd(data);
|
||
}
|
||
}
|
||
|
||
const [ApplyModal, applyModalApi] = useVbenModal({
|
||
connectedComponent: applyModal,
|
||
});
|
||
/**
|
||
* 暂存 草稿状态
|
||
*/
|
||
async function handleTempSave() {
|
||
try {
|
||
await handleSaveOrUpdate();
|
||
router.push('/demo/leave');
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 保存业务 & 发起流程
|
||
*/
|
||
async function handleStartWorkFlow() {
|
||
try {
|
||
// 保存业务
|
||
const leaveResp = await handleSaveOrUpdate();
|
||
// 启动流程
|
||
const taskVariables = {
|
||
leaveDays: leaveResp!.leaveDays,
|
||
userList: ['1', '3', '4'],
|
||
};
|
||
const formValues = await formApi.getValues();
|
||
const flowCode = formValues?.flowType ?? 'leave1';
|
||
const startWorkFlowData: StartWorkFlowReqData = {
|
||
businessId: leaveResp!.id,
|
||
flowCode,
|
||
variables: taskVariables,
|
||
};
|
||
const { taskId } = await startWorkFlow(startWorkFlowData);
|
||
// 打开窗口
|
||
applyModalApi.setData({
|
||
taskId,
|
||
taskVariables,
|
||
variables: {},
|
||
});
|
||
applyModalApi.open();
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
}
|
||
|
||
function handleComplete() {
|
||
formApi.resetForm();
|
||
router.push('/demo/leave');
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<Card>
|
||
<div id="leave-form">
|
||
<BasicForm />
|
||
<div v-if="showActionBtn" class="flex justify-end gap-2">
|
||
<a-button @click="handleTempSave">暂存</a-button>
|
||
<a-button type="primary" @click="handleStartWorkFlow">提交</a-button>
|
||
</div>
|
||
<ApplyModal @complete="handleComplete" />
|
||
</div>
|
||
</Card>
|
||
</template>
|
||
|
||
<style lang="scss">
|
||
/**
|
||
去除 '菜单加载中' 主要是iframe内嵌使用
|
||
*/
|
||
html:has(#leave-form) {
|
||
.ant-message-notice-content:has(.ant-message-loading) {
|
||
display: none;
|
||
}
|
||
}
|
||
</style>
|