From 352f7bbb74f1b6c57b3d3e576849d0565932fbd4 Mon Sep 17 00:00:00 2001
From: yyb <995253665@qq.com>
Date: 星期三, 20 五月 2026 16:50:36 +0800
Subject: [PATCH] 审批模板集成页面
---
src/views/officeProcessAutomation/AttendManage/overtime-apply/index.vue | 895 ++++++++---------------------------------------------------
1 files changed, 120 insertions(+), 775 deletions(-)
diff --git a/src/views/officeProcessAutomation/AttendManage/overtime-apply/index.vue b/src/views/officeProcessAutomation/AttendManage/overtime-apply/index.vue
index 0bdd83f..17303aa 100644
--- a/src/views/officeProcessAutomation/AttendManage/overtime-apply/index.vue
+++ b/src/views/officeProcessAutomation/AttendManage/overtime-apply/index.vue
@@ -10,22 +10,20 @@
placeholder="濮撳悕鎴栫紪鍙�"
clearable
:prefix-icon="Search"
- @keyup.enter="handleQuery"
+ @keyup.enter="onSearch"
/>
<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 type="primary" style="margin-left: 10px" @click="onSearch">鎼滅储</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>
+ <el-button type="primary" @click="openAddWithTemplate">鏂板鍔犵彮鐢宠</el-button>
</div>
</div>
- <input ref="importInputRef" type="file" accept="application/json,.json" class="sr-only-input" @change="onImportFile" />
<div class="table_list">
<PIMTable
@@ -35,628 +33,188 @@
:page="page"
:isSelection="false"
:tableLoading="tableLoading"
- @pagination="pagination"
+ @pagination="onPagination"
: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"
+ <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"
>
- <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>
+ <template #before="{ form, fields }">
+ <FormPayloadFields :fields="displayTemplateFields(fields)" :form-payload="form.formPayload" />
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="鍔犵彮鏃堕暱">
- <el-input :model-value="overtimeHoursDisplay" readonly placeholder="鏍规嵁璧锋鏃堕棿鑷姩璁＄畻">
+ <el-input :model-value="overtimeHoursDisplay(form)" 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>
+ </ApprovalInstanceSubmitDialog>
- <!-- 璇︽儏 -->
- <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>
+ <ApprovalTemplateBindDialog
+ v-model:visible="templateBindVisible"
+ :module-key="APPROVAL_MODULE_KEYS.OVERTIME"
+ skip-form-confirm
+ @confirm="onTemplateBound"
+ @closed="onTemplateBindClosed"
+ />
- <!-- 闄勪欢鍒楄〃 -->
- <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>
+ <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 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";
+import { ElMessage } from "element-plus";
+import { getCurrentInstance, onMounted, reactive, ref } 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";
-/** 鍔犵彮绫诲瀷锛坴alue 涓庡悗绔榻愬崰浣嶏級 */
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 isOvertimeDurationField(field) {
+ const label = String(field?.label || "");
+ return label.includes("鍔犵彮鏃堕暱") || field?.key === "overtimeHours";
}
-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 displayTemplateFields(fields = []) {
+ return (fields || []).filter((f) => !isOvertimeDurationField(f));
}
-function approvalNodeLabel(n) {
- const name = (n.approverName || "").trim();
- if (name) return name;
- return "鏈�夋嫨瀹℃壒浜�";
+function findOvertimeTimeTemplateField(fields = []) {
+ return (
+ fields.find((f) => f?.type === "datetimerange" && String(f?.label || "").includes("鍔犵彮鏃堕棿")) ||
+ fields.find((f) => f?.type === "datetimerange") ||
+ null
+ );
}
-function overtimeTypeLabel(v) {
- const hit = OVERTIME_TYPE_OPTIONS.find((x) => x.value === v);
- return hit?.label || "鈥�";
+function resolveOvertimeTimeRange(payload, overtimeTimeField) {
+ if (!overtimeTimeField?.key) return { start: "", end: "" };
+ const val = payload?.[overtimeTimeField.key];
+ if (!Array.isArray(val) || val.length < 2) return { start: "", end: "" };
+ return { start: val[0] || "", end: val[1] || "" };
}
-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;
+ return Math.round((t1.diff(t0, "millisecond") / 3600000) * 100) / 100;
}
-function formatHours(v) {
- if (v == null || v === "") return "鈥�";
- return `${v} 灏忔椂`;
+function overtimeHoursDisplay(form) {
+ const field = findOvertimeTimeTemplateField(form.formFieldDefs);
+ const { start, end } = resolveOvertimeTimeRange(form.formPayload, field);
+ const h = computeOvertimeHours(start, end);
+ return h == null ? "" : String(h);
}
-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 { proxy } = getCurrentInstance();
const searchForm = reactive({
applicantKeyword: "",
overtimeType: "",
});
-const tableLoading = ref(false);
-const page = reactive({
- current: 1,
- size: 10,
- total: 0,
+const mod = useApprovalInstanceModule({
+ moduleKey: APPROVAL_MODULE_KEYS.OVERTIME,
+ beforeSave: validateOvertimeBeforeSave,
});
-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);
- });
+const {
+ tableData,
+ tableLoading,
+ page,
+ detailDialog,
+ detailRow,
+ submitDialog,
+ submitForm,
+ submitFormRef,
+ submitSaving,
+ isSubmitEdit,
+ activeTemplate,
+ submitFormFields,
+ submitFormRules,
+ submitDialogTitle,
+ templateBindVisible,
+ handleQuery,
+ initModuleList,
+ pagination,
+ openAddWithTemplate,
+ onTemplateBound,
+ onTemplateBindClosed,
+ openEditFromDetail,
+ submitInstanceForm,
+ buildTableActions,
+} = mod;
+
+const { flowUserOptions, loadFlowUsers } = useFlowUserOptions();
+
+function validateOvertimeBeforeSave() {
+ const field = findOvertimeTimeTemplateField(submitForm.formFieldDefs);
+ const { start, end } = resolveOvertimeTimeRange(submitForm.formPayload, field);
+ if (computeOvertimeHours(start, end) == null) {
+ ElMessage.warning("璇锋鏌ユā鏉夸腑鐨勫姞鐝椂闂达紝缁撴潫鏃堕棿椤绘櫄浜庡紑濮嬫椂闂�");
+ throw new Error("invalid overtime time");
}
- 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 tableColumn = buildInstanceTableColumns(tableData, buildTableActions);
-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 onSearch() {
+ handleQuery(searchForm);
}
function resetSearch() {
searchForm.applicantKeyword = "";
searchForm.overtimeType = "";
- handleQuery();
+ onSearch();
}
-function pagination(obj) {
- page.current = obj.page;
- page.size = obj.limit;
+function onPagination(obj) {
+ pagination(obj, searchForm);
}
-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}`);
+async function onSubmit() {
+ const ok = await submitInstanceForm({ skipValidate: true });
+ if (ok) ElMessage.success(isSubmitEdit.value ? "淇敼鎴愬姛" : "鎻愪氦鎴愬姛");
}
function handleExport() {
- const data = filteredList.value;
+ const data = tableData.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");
@@ -664,175 +222,13 @@
a.download = `鍔犵彮鐢宠瀵煎嚭_${dayjs().format("YYYYMMDDHHmmss")}.json`;
a.click();
URL.revokeObjectURL(url);
- proxy?.$modal?.msgSuccess?.(`宸插鍑� ${data.length} 鏉★紙褰撳墠绛涢�夌粨鏋滐紝JSON锛塦);
+ proxy?.$modal?.msgSuccess?.(`宸插鍑� ${data.length} 鏉★紙褰撳墠椤靛垪琛ㄦ暟鎹級`);
}
-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();
-}
-
+onMounted(async () => {
+ loadFlowUsers();
+ await initModuleList(searchForm);
+});
</script>
<style scoped>
@@ -849,61 +245,10 @@
.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>
--
Gitblit v1.9.3