<!--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="handleQuery"
|
/>
|
<span class="search_title" style="margin-left: 12px">加班类型：</span>
|
<el-select v-model="searchForm.overtimeType" placeholder="全部" clearable style="width: 180px">
|
<el-option v-for="opt in OVERTIME_TYPE_OPTIONS" :key="opt.value" :label="opt.label" :value="opt.value" />
|
</el-select>
|
<el-button type="primary" style="margin-left: 10px" @click="handleQuery">搜索</el-button>
|
<el-button @click="resetSearch">重置</el-button>
|
</div>
|
<div class="search_actions">
|
<el-button type="success" plain @click="handleImportClick">导入</el-button>
|
<el-button type="warning" plain @click="handleExport">导出</el-button>
|
<el-button type="primary" @click="openFormDialog('add')">新增加班申请</el-button>
|
</div>
|
</div>
|
<input ref="importInputRef" type="file" accept="application/json,.json" class="sr-only-input" @change="onImportFile" />
|
|
<div class="table_list">
|
<PIMTable
|
rowKey="id"
|
:column="tableColumn"
|
:tableData="tableData"
|
:page="page"
|
:isSelection="false"
|
:tableLoading="tableLoading"
|
@pagination="pagination"
|
:total="page.total"
|
/>
|
</div>
|
|
<!-- 新增 / 编辑 -->
|
<el-dialog
|
v-model="formDialog.visible"
|
:title="formDialog.title"
|
width="1040px"
|
append-to-body
|
destroy-on-close
|
class="overtime-apply-form-dialog"
|
@closed="onFormClosed"
|
>
|
<el-form ref="formRef" :model="form" :rules="formRules" label-width="140px" class="overtime-apply-form">
|
<el-row :gutter="24">
|
<el-col :span="24">
|
<el-form-item label="申请人" prop="applicantId">
|
<el-select
|
v-model="form.applicantId"
|
filterable
|
remote
|
clearable
|
reserve-keyword
|
placeholder="请选择或搜索申请人"
|
style="width: 100%"
|
:remote-method="remoteSearchApplicantForm"
|
:loading="applicantFormSearchLoading"
|
@change="onApplicantChange"
|
>
|
<el-option
|
v-for="u in applicantFormOptions"
|
:key="u.userId"
|
:label="userSelectLabel(u)"
|
:value="u.userId"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="24">
|
<el-col :span="12">
|
<el-form-item label="加班类型" prop="overtimeType">
|
<el-select v-model="form.overtimeType" placeholder="请选择加班类型" clearable filterable style="width: 100%">
|
<el-option v-for="opt in OVERTIME_TYPE_OPTIONS" :key="opt.value" :label="opt.label" :value="opt.value" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="加班日期" prop="overtimeDate">
|
<el-date-picker
|
v-model="form.overtimeDate"
|
type="date"
|
placeholder="请选择加班日期"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="24">
|
<el-col :span="12">
|
<el-form-item label="加班开始日期" prop="overtimeStartTime">
|
<el-date-picker
|
v-model="form.overtimeStartTime"
|
type="datetime"
|
placeholder="请选择开始时间"
|
format="YYYY-MM-DD HH:mm:ss"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
style="width: 100%"
|
@change="onOvertimeRangeChange"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="加班结束日期" prop="overtimeEndTime">
|
<el-date-picker
|
v-model="form.overtimeEndTime"
|
type="datetime"
|
placeholder="请选择结束时间"
|
format="YYYY-MM-DD HH:mm:ss"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
style="width: 100%"
|
@change="onOvertimeRangeChange"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="24">
|
<el-col :span="12">
|
<el-form-item label="加班时长">
|
<el-input :model-value="overtimeHoursDisplay" readonly placeholder="根据起止时间自动计算">
|
<template #append>小时</template>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="24">
|
<el-col :span="24">
|
<el-form-item label="审批流程" prop="approvalFlowNodes">
|
<ApprovalFlowEditor
|
v-model="form.approvalFlowNodes"
|
:user-options="flowUserOptions"
|
@update:model-value="onApprovalFlowChange"
|
/>
|
<p class="flow-tip">至少保留一个节点；每个节点选择一名审批人；可新增、删除或调整顺序。</p>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="24">
|
<el-col :span="24">
|
<el-form-item label="加班事由" prop="overtimeReason">
|
<el-input
|
v-model="form.overtimeReason"
|
type="textarea"
|
:rows="4"
|
placeholder="请填写加班事由"
|
maxlength="2000"
|
show-word-limit
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="24">
|
<el-col :span="24">
|
<el-form-item label="附件">
|
<div class="upload-block">
|
<FileUpload v-model:file-list="form.attachmentList" :limit="10" button-text="点击选择文件" />
|
</div>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
<el-button @click="formDialog.visible = false">取 消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
|
<!-- 详情 -->
|
<el-dialog v-model="detailDialog.visible" title="加班申请详情" width="720px" append-to-body>
|
<el-descriptions :column="1" border>
|
<el-descriptions-item label="申请人编号">{{ detailRow.applicantNo || "—" }}</el-descriptions-item>
|
<el-descriptions-item label="申请人">{{ detailRow.applicantName }}</el-descriptions-item>
|
<el-descriptions-item label="加班类型">{{ overtimeTypeLabel(detailRow.overtimeType) }}</el-descriptions-item>
|
<el-descriptions-item label="加班日期">{{ detailRow.overtimeDate || "—" }}</el-descriptions-item>
|
<el-descriptions-item label="加班开始日期">{{ detailRow.overtimeStartTime || "—" }}</el-descriptions-item>
|
<el-descriptions-item label="加班结束日期">{{ detailRow.overtimeEndTime || "—" }}</el-descriptions-item>
|
<el-descriptions-item label="加班时长">{{ formatHours(detailRow.overtimeHours) }}</el-descriptions-item>
|
<el-descriptions-item label="加班事由">{{ detailRow.overtimeReason }}</el-descriptions-item>
|
<el-descriptions-item label="审批流程">
|
<template v-if="sortedApprovalNodes(detailRow).length">
|
<div class="detail-flow-chain">
|
<template v-for="(n, i) in sortedApprovalNodes(detailRow)" :key="i">
|
<span class="detail-flow-step">{{ i + 1 }}. {{ approvalNodeLabel(n) }}</span>
|
<span v-if="i < sortedApprovalNodes(detailRow).length - 1" class="detail-flow-sep">→</span>
|
</template>
|
</div>
|
</template>
|
<span v-else>—</span>
|
</el-descriptions-item>
|
<el-descriptions-item label="审批结果">{{ approvalResultLabel(detailRow.approvalResult) }}</el-descriptions-item>
|
<el-descriptions-item label="创建时间">{{ detailRow.createTime || "—" }}</el-descriptions-item>
|
<el-descriptions-item label="附件">
|
<template v-if="detailRow.attachmentList?.length">
|
<el-tag v-for="(f, i) in detailRow.attachmentList" :key="i" class="mr6 mb6" type="info">
|
{{ f.name }}
|
</el-tag>
|
</template>
|
<span v-else>无</span>
|
</el-descriptions-item>
|
</el-descriptions>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="detailDialog.visible = false">关 闭</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
|
<!-- 附件列表 -->
|
<el-dialog v-model="filesDialog.visible" title="附件" width="520px" append-to-body>
|
<el-table v-if="filesDialog.row?.attachmentList?.length" :data="filesDialog.row.attachmentList" border>
|
<el-table-column type="index" label="序号" width="60" align="center" />
|
<el-table-column prop="name" label="文件名" min-width="200" show-overflow-tooltip />
|
<el-table-column label="操作" width="100" align="center">
|
<template #default="{ row }">
|
<el-button link type="primary" @click="mockDownload(row)">下载</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-empty v-else description="暂无附件" />
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="filesDialog.visible = false">关 闭</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { Search } from "@element-plus/icons-vue";
|
import dayjs from "dayjs";
|
import FileUpload from "@/components/AttachmentUpload/file/index.vue";
|
import ApprovalFlowEditor from "./components/ApprovalFlowEditor.vue";
|
import { userListNoPageByTenantId } from "@/api/system/user.js";
|
import { computed, getCurrentInstance, nextTick, reactive, ref, watch } from "vue";
|
|
/** 加班类型（value 与后端对齐占位） */
|
const OVERTIME_TYPE_OPTIONS = [
|
{ label: "工作日加班", value: "weekday" },
|
{ label: "休息日加班", value: "weekend" },
|
{ label: "法定节假日加班", value: "holiday" },
|
];
|
|
/** 本地演示：两条空节点，提交前须为每节点选择审批人 */
|
function demoApprovalFlowNodes() {
|
return [
|
{ approverId: null, approverName: "", sortOrder: 1, nodeOrder: 1, roleName: "", roleCode: "" },
|
{ approverId: null, approverName: "", sortOrder: 2, nodeOrder: 2, roleName: "", roleCode: "" },
|
];
|
}
|
|
function sortedApprovalNodes(row) {
|
const list = row?.approvalFlowNodes;
|
if (!Array.isArray(list) || !list.length) return [];
|
return [...list].sort((a, b) => (a.sortOrder ?? a.nodeOrder ?? 0) - (b.sortOrder ?? b.nodeOrder ?? 0));
|
}
|
|
function approvalNodeLabel(n) {
|
const name = (n.approverName || "").trim();
|
if (name) return name;
|
return "未选择审批人";
|
}
|
|
function overtimeTypeLabel(v) {
|
const hit = OVERTIME_TYPE_OPTIONS.find((x) => x.value === v);
|
return hit?.label || "—";
|
}
|
|
const createEmptyForm = () => ({
|
id: undefined,
|
applicantId: "",
|
applicantNo: "",
|
applicantName: "",
|
overtimeType: "",
|
overtimeDate: "",
|
overtimeStartTime: "",
|
overtimeEndTime: "",
|
overtimeReason: "",
|
attachmentList: [],
|
approvalFlowNodes: [
|
{ approverId: null, approverName: "", sortOrder: 1, nodeOrder: 1, roleName: "", roleCode: "" },
|
],
|
});
|
|
const { proxy } = getCurrentInstance();
|
|
function unwrapArray(payload) {
|
if (Array.isArray(payload)) return payload;
|
if (payload && Array.isArray(payload.data)) return payload.data;
|
if (payload && Array.isArray(payload.rows)) return payload.rows;
|
return [];
|
}
|
|
function isActiveUser(u) {
|
if (u.delFlag === "2" || u.delFlag === 2) return false;
|
if (u.status == null) return true;
|
return String(u.status) === "0";
|
}
|
|
function approvalResultLabel(v) {
|
if (v === "approved") return "已通过";
|
if (v === "rejected") return "已驳回";
|
if (v === "cancelled") return "已撤销";
|
return "待审批";
|
}
|
|
/** 按起止时间计算加班时长（小时，保留两位小数） */
|
function computeOvertimeHours(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 hours = t1.diff(t0, "millisecond") / (60 * 60 * 1000);
|
return Math.round(hours * 100) / 100;
|
}
|
|
function formatHours(v) {
|
if (v == null || v === "") return "—";
|
return `${v} 小时`;
|
}
|
|
const allUsersCache = ref([]);
|
|
async function loadUserPool() {
|
try {
|
const res = await userListNoPageByTenantId();
|
allUsersCache.value = unwrapArray(res);
|
} catch {
|
allUsersCache.value = [];
|
}
|
}
|
|
function userSelectLabel(u) {
|
const nick = u.nickName || "";
|
const name = u.userName || "";
|
if (nick && name && nick !== name) return `${nick}（${name}）`;
|
return nick || name || `用户${u.userId ?? u.id ?? ""}`;
|
}
|
|
function userById(id) {
|
if (id == null || id === "") return undefined;
|
return allUsersCache.value.find((u) => String(u.userId ?? u.id) === String(id));
|
}
|
|
function applicantNoFromUser(u) {
|
if (!u) return "";
|
return (
|
u.userName ??
|
u.userCode ??
|
u.jobNumber ??
|
u.workNo ??
|
(u.userId != null ? String(u.userId) : "")
|
);
|
}
|
|
function filterUsersByQuery(query) {
|
const list = allUsersCache.value.filter((u) => isActiveUser(u));
|
const q = (query || "").trim().toLowerCase();
|
if (!q) return [...list];
|
return list.filter((u) => {
|
const nick = (u.nickName || "").toLowerCase();
|
const uname = (u.userName || "").toLowerCase();
|
const phone = (u.phonenumber || u.phone || "").toString();
|
return nick.includes(q) || uname.includes(q) || phone.includes(q);
|
});
|
}
|
|
const applicantFormSearchLoading = ref(false);
|
const applicantFormOptions = ref([]);
|
|
async function remoteSearchApplicantForm(query) {
|
applicantFormSearchLoading.value = true;
|
try {
|
if (!allUsersCache.value.length) {
|
await loadUserPool();
|
}
|
applicantFormOptions.value = filterUsersByQuery(query);
|
} finally {
|
applicantFormSearchLoading.value = false;
|
}
|
}
|
|
function onApplicantChange(uid) {
|
const u = userById(uid);
|
if (u) {
|
form.applicantName = u.nickName || u.userName || "";
|
form.applicantNo = applicantNoFromUser(u);
|
} else {
|
form.applicantName = "";
|
form.applicantNo = "";
|
}
|
}
|
|
const allRows = ref([
|
{
|
id: "1",
|
applicantId: "mock_1",
|
applicantNo: "zhangsan",
|
applicantName: "张三",
|
overtimeType: "weekday",
|
overtimeDate: "2026-05-10",
|
overtimeStartTime: "2026-05-10 18:00:00",
|
overtimeEndTime: "2026-05-10 21:30:00",
|
overtimeHours: 3.5,
|
overtimeReason: "项目上线保障。",
|
approvalFlowNodes: demoApprovalFlowNodes(),
|
approvalResult: "pending",
|
attachmentList: [{ name: "任务单.pdf" }],
|
createTime: "2026-05-09 10:20:00",
|
},
|
{
|
id: "2",
|
applicantId: "mock_2",
|
applicantNo: "lisi",
|
applicantName: "李四",
|
overtimeType: "weekend",
|
overtimeDate: "2026-05-11",
|
overtimeStartTime: "2026-05-11 09:00:00",
|
overtimeEndTime: "2026-05-11 12:15:00",
|
overtimeHours: 3.25,
|
overtimeReason: "客户现场支持。",
|
approvalFlowNodes: demoApprovalFlowNodes(),
|
approvalResult: "approved",
|
attachmentList: [],
|
createTime: "2026-05-10 16:00:00",
|
},
|
]);
|
|
const searchForm = reactive({
|
applicantKeyword: "",
|
overtimeType: "",
|
});
|
|
const tableLoading = ref(false);
|
const page = reactive({
|
current: 1,
|
size: 10,
|
total: 0,
|
});
|
|
const filteredList = computed(() => {
|
let list = [...allRows.value];
|
const kw = (searchForm.applicantKeyword || "").trim().toLowerCase();
|
if (kw) {
|
list = list.filter((r) => {
|
const name = (r.applicantName || "").toLowerCase();
|
const no = (r.applicantNo || "").toLowerCase();
|
return name.includes(kw) || no.includes(kw);
|
});
|
}
|
if (searchForm.overtimeType) {
|
list = list.filter((r) => r.overtimeType === searchForm.overtimeType);
|
}
|
return list.sort((a, b) => (String(a.createTime) < String(b.createTime) ? 1 : -1));
|
});
|
|
watch(
|
filteredList,
|
(list) => {
|
page.total = list.length;
|
const maxPage = Math.max(1, Math.ceil(list.length / page.size) || 1);
|
if (page.current > maxPage) {
|
page.current = maxPage;
|
}
|
},
|
{ immediate: true }
|
);
|
|
const tableData = computed(() => {
|
const list = filteredList.value;
|
const start = (page.current - 1) * page.size;
|
return list.slice(start, start + page.size);
|
});
|
|
const tableColumn = ref([
|
{ label: "申请人编号", prop: "applicantNo", width: 120 },
|
{ label: "申请人", prop: "applicantName", minWidth: 100 },
|
{ label: "加班日期", prop: "overtimeDate", width: 120 },
|
{ label: "加班开始日期", prop: "overtimeStartTime", width: 170 },
|
{ label: "加班结束日期", prop: "overtimeEndTime", width: 170 },
|
{
|
label: "加班时长",
|
prop: "overtimeHours",
|
width: 120,
|
formatData: (v) => (v == null || v === "" ? "—" : `${v} 小时`),
|
},
|
{
|
label: "审批结果",
|
prop: "approvalResult",
|
width: 110,
|
dataType: "tag",
|
formatData: (v) => approvalResultLabel(v),
|
formatType: (v) => {
|
if (v === "approved") return "success";
|
if (v === "rejected") return "danger";
|
if (v === "cancelled") return "info";
|
return "warning";
|
},
|
},
|
{ label: "创建时间", prop: "createTime", width: 170 },
|
{
|
dataType: "action",
|
label: "操作",
|
align: "center",
|
fixed: "right",
|
width: 220,
|
operation: [
|
{
|
name: "编辑",
|
type: "text",
|
clickFun: (row) => openFormDialog("edit", row),
|
},
|
{
|
name: "查看详情",
|
type: "text",
|
clickFun: (row) => openDetail(row),
|
},
|
{
|
name: "附件",
|
type: "text",
|
clickFun: (row) => openFiles(row),
|
},
|
],
|
},
|
]);
|
|
const formDialog = reactive({
|
visible: false,
|
title: "",
|
mode: "add",
|
});
|
const formRef = ref();
|
const form = reactive(createEmptyForm());
|
|
const flowUserOptions = computed(() => allUsersCache.value.filter((u) => isActiveUser(u)));
|
|
const overtimeHoursDisplay = computed(() => {
|
const h = computeOvertimeHours(form.overtimeStartTime, form.overtimeEndTime);
|
return h == null ? "" : String(h);
|
});
|
|
function onOvertimeRangeChange() {
|
nextTick(() => {
|
formRef.value?.validateField?.("overtimeEndTime");
|
});
|
}
|
|
function onApprovalFlowChange() {
|
nextTick(() => formRef.value?.validateField?.("approvalFlowNodes"));
|
}
|
|
const formRules = {
|
applicantId: [{ required: true, message: "请选择申请人", trigger: "change" }],
|
overtimeType: [{ required: true, message: "请选择加班类型", trigger: "change" }],
|
overtimeDate: [{ required: true, message: "请选择加班日期", trigger: "change" }],
|
overtimeStartTime: [{ required: true, message: "请选择加班开始时间", trigger: "change" }],
|
overtimeEndTime: [
|
{ required: true, message: "请选择加班结束时间", trigger: "change" },
|
{
|
validator: (_rule, val, callback) => {
|
if (!form.overtimeStartTime || !val) {
|
callback();
|
return;
|
}
|
const h = computeOvertimeHours(form.overtimeStartTime, val);
|
if (h == null) {
|
callback(new Error("结束时间须晚于开始时间"));
|
} else {
|
callback();
|
}
|
},
|
trigger: "change",
|
},
|
],
|
overtimeReason: [{ required: true, message: "请填写加班事由", trigger: "blur" }],
|
approvalFlowNodes: [
|
{
|
validator: (_rule, _val, callback) => {
|
const nodes = form.approvalFlowNodes || [];
|
if (!nodes.length) {
|
callback(new Error("请至少保留一个审批节点"));
|
return;
|
}
|
if (nodes.some((n) => n.approverId == null || n.approverId === "")) {
|
callback(new Error("每个审批节点必须选择一名审批人"));
|
return;
|
}
|
const ids = nodes.map((n) => String(n.approverId));
|
if (new Set(ids).size !== ids.length) {
|
callback(new Error("同一审批人不能重复出现在多个节点"));
|
return;
|
}
|
callback();
|
},
|
trigger: "change",
|
},
|
],
|
};
|
|
const detailDialog = reactive({ visible: false });
|
const detailRow = ref({});
|
|
const filesDialog = reactive({ visible: false, row: null });
|
|
const importInputRef = ref(null);
|
|
function handleQuery() {
|
page.current = 1;
|
tableLoading.value = true;
|
setTimeout(() => {
|
tableLoading.value = false;
|
}, 150);
|
}
|
|
function resetSearch() {
|
searchForm.applicantKeyword = "";
|
searchForm.overtimeType = "";
|
handleQuery();
|
}
|
|
function pagination(obj) {
|
page.current = obj.page;
|
page.size = obj.limit;
|
}
|
|
function openDetail(row) {
|
detailRow.value = { ...row };
|
detailDialog.visible = true;
|
}
|
|
function openFiles(row) {
|
filesDialog.row = row;
|
filesDialog.visible = true;
|
}
|
|
function mockDownload(row) {
|
const url = row.url || row.downloadURL || row.previewURL || row.previewUrl;
|
if (url) {
|
window.open(url, "_blank");
|
return;
|
}
|
proxy?.$modal?.msgSuccess?.(`已模拟下载：${row.name}`);
|
}
|
|
function handleExport() {
|
const data = filteredList.value;
|
const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json;charset=utf-8" });
|
const url = URL.createObjectURL(blob);
|
const a = document.createElement("a");
|
a.href = url;
|
a.download = `加班申请导出_${dayjs().format("YYYYMMDDHHmmss")}.json`;
|
a.click();
|
URL.revokeObjectURL(url);
|
proxy?.$modal?.msgSuccess?.(`已导出 ${data.length} 条（当前筛选结果，JSON）`);
|
}
|
|
function handleImportClick() {
|
importInputRef.value?.click?.();
|
}
|
|
function normalizeImportedRow(raw, idx) {
|
const id = raw.id != null && String(raw.id).length ? `imp_${String(raw.id)}_${idx}` : `imp_${Date.now()}_${idx}`;
|
const hours =
|
raw.overtimeHours != null && raw.overtimeHours !== ""
|
? Number(raw.overtimeHours)
|
: computeOvertimeHours(raw.overtimeStartTime, raw.overtimeEndTime);
|
return {
|
id,
|
applicantId: raw.applicantId != null ? String(raw.applicantId) : `imp_user_${idx}`,
|
applicantNo: raw.applicantNo ?? "",
|
applicantName: raw.applicantName ?? "未知",
|
overtimeType: raw.overtimeType || "weekday",
|
overtimeDate: raw.overtimeDate ?? "",
|
overtimeStartTime: raw.overtimeStartTime ?? "",
|
overtimeEndTime: raw.overtimeEndTime ?? "",
|
overtimeHours: hours == null || Number.isNaN(hours) ? 0 : Math.round(hours * 100) / 100,
|
overtimeReason: raw.overtimeReason ?? "",
|
approvalFlowNodes: Array.isArray(raw.approvalFlowNodes) && raw.approvalFlowNodes.length
|
? raw.approvalFlowNodes.map((n) => ({ ...n }))
|
: [],
|
approvalResult: raw.approvalResult && ["pending", "approved", "rejected", "cancelled"].includes(raw.approvalResult)
|
? raw.approvalResult
|
: "pending",
|
attachmentList: Array.isArray(raw.attachmentList) ? raw.attachmentList : [],
|
createTime: raw.createTime || dayjs().format("YYYY-MM-DD HH:mm:ss"),
|
};
|
}
|
|
function onImportFile(e) {
|
const input = e.target;
|
const file = input.files?.[0];
|
input.value = "";
|
if (!file) return;
|
const reader = new FileReader();
|
reader.onload = () => {
|
try {
|
const text = String(reader.result || "");
|
const parsed = JSON.parse(text);
|
const arr = Array.isArray(parsed) ? parsed : parsed?.rows || parsed?.data;
|
if (!Array.isArray(arr) || !arr.length) {
|
proxy?.$modal?.msgWarning?.("导入文件格式不正确，需为加班申请对象数组 JSON");
|
return;
|
}
|
let n = 0;
|
for (let i = 0; i < arr.length; i++) {
|
allRows.value.unshift(normalizeImportedRow(arr[i], i));
|
n++;
|
}
|
proxy?.$modal?.msgSuccess?.(`成功导入 ${n} 条（本地合并）`);
|
handleQuery();
|
} catch {
|
proxy?.$modal?.msgError?.("解析失败，请使用导出文件或约定 JSON 结构");
|
}
|
};
|
reader.readAsText(file, "utf-8");
|
}
|
|
async function openFormDialog(mode, row) {
|
formDialog.mode = mode;
|
formDialog.title = mode === "add" ? "新增加班申请" : "编辑加班申请";
|
if (!allUsersCache.value.length) {
|
await loadUserPool();
|
}
|
Object.assign(form, createEmptyForm());
|
if (mode === "edit" && row) {
|
Object.assign(form, {
|
id: row.id,
|
applicantId: row.applicantId,
|
applicantNo: row.applicantNo,
|
applicantName: row.applicantName,
|
overtimeType: row.overtimeType,
|
overtimeDate: row.overtimeDate,
|
overtimeStartTime: row.overtimeStartTime,
|
overtimeEndTime: row.overtimeEndTime,
|
overtimeReason: row.overtimeReason,
|
attachmentList: JSON.parse(JSON.stringify(row.attachmentList || [])),
|
approvalFlowNodes: row.approvalFlowNodes?.length
|
? JSON.parse(JSON.stringify(row.approvalFlowNodes))
|
: [],
|
});
|
const u = userById(row.applicantId);
|
if (u) {
|
applicantFormOptions.value = [u];
|
} else if (row.applicantId) {
|
applicantFormOptions.value = [
|
{
|
userId: row.applicantId,
|
nickName: row.applicantName,
|
userName: row.applicantNo,
|
},
|
];
|
}
|
} else {
|
remoteSearchApplicantForm("");
|
}
|
formDialog.visible = true;
|
nextTick(() => formRef.value?.clearValidate?.());
|
}
|
|
function onFormClosed() {
|
formRef.value?.resetFields?.();
|
}
|
|
async function submitForm() {
|
try {
|
await formRef.value?.validate?.();
|
} catch {
|
return;
|
}
|
const hours = computeOvertimeHours(form.overtimeStartTime, form.overtimeEndTime);
|
if (hours == null) {
|
proxy?.$modal?.msgWarning?.("请检查加班起止时间，结束时间须晚于开始时间");
|
return;
|
}
|
const payload = {
|
applicantId: form.applicantId,
|
applicantNo: form.applicantNo,
|
applicantName: form.applicantName,
|
overtimeType: form.overtimeType,
|
overtimeDate: form.overtimeDate,
|
overtimeStartTime: form.overtimeStartTime,
|
overtimeEndTime: form.overtimeEndTime,
|
overtimeHours: hours,
|
overtimeReason: form.overtimeReason,
|
approvalFlowNodes: (form.approvalFlowNodes || []).map((n, i) => ({
|
approverId: n.approverId,
|
approverName:
|
n.approverName || userById(n.approverId)?.nickName || userById(n.approverId)?.userName || "",
|
sortOrder: i + 1,
|
nodeOrder: i + 1,
|
roleName: n.roleName || "",
|
roleCode: n.roleCode || "",
|
})),
|
attachmentList: JSON.parse(JSON.stringify(form.attachmentList || [])),
|
};
|
if (formDialog.mode === "add") {
|
const id = `local_${Date.now()}`;
|
allRows.value.unshift({
|
id,
|
...payload,
|
approvalResult: "pending",
|
createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
|
});
|
proxy?.$modal?.msgSuccess?.("新增成功（本地模拟）");
|
} else {
|
const idx = allRows.value.findIndex((r) => r.id === form.id);
|
if (idx !== -1) {
|
const prev = allRows.value[idx];
|
allRows.value[idx] = {
|
...prev,
|
id: form.id,
|
...payload,
|
approvalResult: prev.approvalResult ?? "pending",
|
createTime: prev.createTime ?? dayjs().format("YYYY-MM-DD HH:mm:ss"),
|
};
|
}
|
proxy?.$modal?.msgSuccess?.("保存成功（本地模拟）");
|
}
|
formDialog.visible = false;
|
handleQuery();
|
}
|
|
</script>
|
|
<style scoped>
|
.mb20 {
|
margin-bottom: 20px;
|
}
|
.search_form {
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
justify-content: space-between;
|
gap: 12px;
|
}
|
.search_actions {
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
gap: 8px;
|
}
|
.search_title {
|
font-size: 14px;
|
color: var(--el-text-color-regular);
|
}
|
.sr-only-input {
|
position: absolute;
|
width: 1px;
|
height: 1px;
|
padding: 0;
|
margin: -1px;
|
overflow: hidden;
|
clip: rect(0, 0, 0, 0);
|
white-space: nowrap;
|
border: 0;
|
}
|
.upload-block {
|
width: 100%;
|
}
|
.mr6 {
|
margin-right: 6px;
|
}
|
.mb6 {
|
margin-bottom: 6px;
|
}
|
.overtime-apply-form :deep(.el-row) {
|
margin-bottom: 0;
|
}
|
.overtime-apply-form :deep(.el-form-item) {
|
margin-bottom: 18px;
|
}
|
.overtime-apply-form-dialog :deep(.el-dialog__body) {
|
padding-top: 12px;
|
}
|
.flow-tip {
|
margin: 10px 0 0;
|
font-size: 12px;
|
line-height: 1.5;
|
color: var(--el-text-color-secondary);
|
}
|
.detail-flow-chain {
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
gap: 6px 8px;
|
line-height: 1.6;
|
}
|
.detail-flow-step {
|
font-size: 14px;
|
color: var(--el-text-color-primary);
|
}
|
.detail-flow-sep {
|
color: var(--el-text-color-secondary);
|
font-size: 13px;
|
}
|
</style>
|
