<!--OA模块：请假申请-->
|
<template>
|
<div class="app-container">
|
<div class="search_form mb20">
|
<div>
|
<span class="search_title">申请人：</span>
|
<el-input
|
v-model="searchForm.applicantKeyword"
|
style="width: 220px"
|
placeholder="姓名或编号"
|
clearable
|
:prefix-icon="Search"
|
@keyup.enter="onSearch"
|
/>
|
<span class="search_title" style="margin-left: 12px">请假类型：</span>
|
<el-select v-model="searchForm.leaveType" placeholder="全部" clearable style="width: 180px">
|
<el-option v-for="opt in LEAVE_TYPE_OPTIONS" :key="opt.value" :label="opt.label" :value="opt.value" />
|
</el-select>
|
<el-button type="primary" style="margin-left: 10px" @click="onSearch">搜索</el-button>
|
<el-button @click="resetSearch">重置</el-button>
|
</div>
|
<div>
|
<el-button type="primary" @click="openAddWithTemplate">新增请假申请</el-button>
|
</div>
|
</div>
|
<div class="table_list">
|
<PIMTable
|
rowKey="id"
|
:column="tableColumn"
|
:tableData="tableData"
|
:page="page"
|
:isSelection="false"
|
:tableLoading="tableLoading"
|
@pagination="onPagination"
|
:total="page.total"
|
/>
|
</div>
|
|
<ApprovalInstanceSubmitDialog
|
v-model="submitDialog.visible"
|
:title="submitDialogTitle"
|
:form="submitForm"
|
:rules="submitFormRules"
|
:fields="submitFormFields"
|
:active-template="activeTemplate"
|
:user-options="flowUserOptions"
|
:is-edit="isSubmitEdit"
|
:saving="submitSaving"
|
:form-ref="submitFormRef"
|
flow-attachments-only
|
@submit="onSubmit"
|
>
|
<template #before="{ form, fields }">
|
<FormPayloadFields :fields="displayTemplateFields(fields)" :form-payload="form.formPayload" />
|
<el-row :gutter="24">
|
<el-col :span="12">
|
<el-form-item label="假期余额" prop="leaveBalanceDays">
|
<el-input-number
|
v-model="form.leaveBalanceDays"
|
:min="0"
|
:max="999"
|
:precision="2"
|
:step="0.5"
|
controls-position="right"
|
placeholder="天"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="请假时长">
|
<el-input :model-value="leaveDurationDisplay(form)" readonly placeholder="根据模板中请假时间自动计算">
|
<template #append>天</template>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</template>
|
</ApprovalInstanceSubmitDialog>
|
|
<ApprovalTemplateBindDialog
|
v-model:visible="templateBindVisible"
|
:module-key="APPROVAL_MODULE_KEYS.LEAVE"
|
skip-form-confirm
|
@confirm="onTemplateBound"
|
@closed="onTemplateBindClosed"
|
/>
|
|
<ApprovalInstanceDetailDialog
|
v-model="detailDialog.visible"
|
title="请假申请详情"
|
:row="detailRow"
|
@edit="openEditFromDetail"
|
/>
|
</div>
|
</template>
|
|
<script setup>
|
import { Search } from "@element-plus/icons-vue";
|
import dayjs from "dayjs";
|
import { userListNoPageByTenantId } from "@/api/system/user.js";
|
import { ElMessage } from "element-plus";
|
import { computed, onMounted, reactive, ref, watch } from "vue";
|
import FormPayloadFields from "../../ApproveManage/approve-list/components/FormPayloadFields.vue";
|
import ApprovalInstanceDetailDialog from "../../ApproveManage/approve-shared/components/ApprovalInstanceDetailDialog.vue";
|
import ApprovalInstanceSubmitDialog from "../../ApproveManage/approve-shared/components/ApprovalInstanceSubmitDialog.vue";
|
import ApprovalTemplateBindDialog from "../../ApproveManage/approve-shared/components/ApprovalTemplateBindDialog.vue";
|
import { buildInstanceTableColumns } from "../../ApproveManage/approve-shared/approvalInstanceFormConfigTable.js";
|
import { APPROVAL_MODULE_KEYS } from "../../ApproveManage/approve-shared/approvalModuleRegistry.js";
|
import { useApprovalInstanceModule } from "../../ApproveManage/approve-shared/useApprovalInstanceModule.js";
|
import { useFlowUserOptions } from "../../ApproveManage/approve-shared/useFlowUserOptions.js";
|
import { SELECT_OPTION_SOURCE } from "../../ApproveManage/approve-template/selectOptionSource.js";
|
|
const LEAVE_TYPE_OPTIONS = [
|
{ label: "年假", value: "annual" },
|
{ label: "病假", value: "sick" },
|
{ label: "事假", value: "personal" },
|
{ label: "婚假", value: "marriage" },
|
{ label: "产假", value: "maternity" },
|
{ label: "哺乳假", value: "nursing" },
|
{ label: "慰唁假", value: "condolence" },
|
{ label: "调休", value: "compensatory" },
|
];
|
|
function isLeaveBalanceField(field) {
|
const label = String(field?.label || "");
|
return label.includes("假期余额") || field?.key === "leaveBalanceDays";
|
}
|
|
function isLeaveDurationField(field) {
|
const label = String(field?.label || "");
|
return label.includes("请假时长") || field?.key === "leaveDurationDays";
|
}
|
|
function displayTemplateFields(fields = []) {
|
return (fields || []).filter((f) => !isLeaveBalanceField(f) && !isLeaveDurationField(f));
|
}
|
|
function findLeaveTimeTemplateField(fields = []) {
|
return (
|
fields.find((f) => f?.type === "datetimerange" && String(f?.label || "").includes("请假时间")) ||
|
fields.find((f) => f?.type === "datetimerange" && f?.key === "dateRange") ||
|
fields.find((f) => f?.type === "datetimerange") ||
|
null
|
);
|
}
|
|
function findApplicantTemplateField(fields = []) {
|
return (
|
fields.find((f) => String(f?.label || "").includes("申请人")) ||
|
fields.find((f) => f?.type === "select" && f?.optionSource === SELECT_OPTION_SOURCE.USER) ||
|
null
|
);
|
}
|
|
function resolveLeaveTimeRange(payload, leaveTimeField) {
|
if (!leaveTimeField?.key) return { start: "", end: "" };
|
const val = payload?.[leaveTimeField.key];
|
if (!Array.isArray(val) || val.length < 2) return { start: "", end: "" };
|
return { start: val[0] || "", end: val[1] || "" };
|
}
|
|
function computeLeaveDays(startStr, endStr) {
|
if (!startStr || !endStr) return null;
|
const t0 = dayjs(startStr);
|
const t1 = dayjs(endStr);
|
if (!t0.isValid() || !t1.isValid() || !t1.isAfter(t0)) return null;
|
const days = t1.diff(t0, "millisecond") / (24 * 60 * 60 * 1000);
|
return Math.round(days * 100) / 100;
|
}
|
|
function leaveDurationDisplay(form) {
|
const leaveTimeField = findLeaveTimeTemplateField(form.formFieldDefs);
|
const { start, end } = resolveLeaveTimeRange(form.formPayload, leaveTimeField);
|
const d = computeLeaveDays(start, end);
|
return d == null ? "" : String(d);
|
}
|
|
const searchForm = reactive({
|
applicantKeyword: "",
|
leaveType: "",
|
});
|
|
function validateLeaveBeforeSave() {
|
const leaveTimeField = findLeaveTimeTemplateField(submitForm.formFieldDefs);
|
const { start, end } = resolveLeaveTimeRange(submitForm.formPayload, leaveTimeField);
|
if (computeLeaveDays(start, end) == null) {
|
ElMessage.warning("请检查模板中的请假时间，结束时间须晚于开始时间");
|
throw new Error("invalid leave time");
|
}
|
}
|
|
const mod = useApprovalInstanceModule({
|
moduleKey: APPROVAL_MODULE_KEYS.LEAVE,
|
beforeSave: validateLeaveBeforeSave,
|
extraFormRules: {
|
leaveBalanceDays: [{ required: true, message: "请填写假期余额", trigger: "blur" }],
|
},
|
});
|
|
const {
|
tableData,
|
tableLoading,
|
page,
|
detailDialog,
|
detailRow,
|
submitDialog,
|
submitEditRow,
|
submitForm,
|
submitFormRef,
|
submitSaving,
|
isSubmitEdit,
|
activeTemplate,
|
submitFormFields,
|
submitFormRules,
|
submitDialogTitle,
|
templateBindVisible,
|
handleQuery,
|
initModuleList,
|
pagination,
|
openAddWithTemplate,
|
onTemplateBound,
|
onTemplateBindClosed,
|
openEditFromDetail,
|
submitInstanceForm,
|
buildTableActions,
|
} = mod;
|
|
const { flowUserOptions, loadFlowUsers } = useFlowUserOptions();
|
const allUsersCache = ref([]);
|
|
const applicantTemplateField = computed(() =>
|
findApplicantTemplateField(submitForm.formFieldDefs)
|
);
|
|
function unwrapArray(payload) {
|
if (Array.isArray(payload)) return payload;
|
if (payload && Array.isArray(payload.data)) return payload.data;
|
return [];
|
}
|
|
async function loadUserPool() {
|
try {
|
const res = await userListNoPageByTenantId();
|
allUsersCache.value = unwrapArray(res);
|
} catch {
|
allUsersCache.value = [];
|
}
|
}
|
|
watch(
|
() => submitDialog.visible,
|
(v) => {
|
if (!v) return;
|
if (submitForm.leaveBalanceDays == null && isSubmitEdit.value) {
|
submitForm.leaveBalanceDays =
|
submitEditRow.value?.formPayload?.leaveBalanceDays ??
|
submitEditRow.value?.leaveBalanceDays;
|
}
|
if (submitForm.leaveBalanceDays == null && !isSubmitEdit.value) {
|
submitForm.leaveBalanceDays = undefined;
|
}
|
}
|
);
|
|
watch(
|
() => {
|
const key = applicantTemplateField.value?.key;
|
return key ? submitForm.formPayload[key] : undefined;
|
},
|
async (uid) => {
|
if (!applicantTemplateField.value || !uid) return;
|
if (!allUsersCache.value.length) await loadUserPool();
|
}
|
);
|
|
const tableColumn = buildInstanceTableColumns(tableData, buildTableActions);
|
|
function onSearch() {
|
handleQuery(searchForm);
|
}
|
|
function resetSearch() {
|
searchForm.applicantKeyword = "";
|
searchForm.leaveType = "";
|
onSearch();
|
}
|
|
function onPagination(obj) {
|
pagination(obj, searchForm);
|
}
|
|
async function onSubmit() {
|
const ok = await submitInstanceForm({ skipValidate: true });
|
if (ok) ElMessage.success(isSubmitEdit.value ? "修改成功" : "提交成功");
|
}
|
|
onMounted(async () => {
|
loadFlowUsers();
|
await initModuleList(searchForm);
|
});
|
</script>
|
|
<style scoped>
|
.mb20 {
|
margin-bottom: 20px;
|
}
|
.search_form {
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
justify-content: space-between;
|
gap: 12px;
|
}
|
.search_title {
|
font-size: 14px;
|
color: var(--el-text-color-regular);
|
}
|
</style>
|
