From 0a58164ce2ea3f1a2b46781757d78b94b212883b Mon Sep 17 00:00:00 2001
From: yyb <995253665@qq.com>
Date: 星期三, 20 五月 2026 15:13:49 +0800
Subject: [PATCH] 工作交接/调岗申请/转正申请/请假申请/加班申请新增调用模板
---
src/views/officeProcessAutomation/HrManage/regular-apply/index.vue | 432 +++++++++++++----------------------------------------
1 files changed, 110 insertions(+), 322 deletions(-)
diff --git a/src/views/officeProcessAutomation/HrManage/regular-apply/index.vue b/src/views/officeProcessAutomation/HrManage/regular-apply/index.vue
index a807e6b..4821495 100644
--- a/src/views/officeProcessAutomation/HrManage/regular-apply/index.vue
+++ b/src/views/officeProcessAutomation/HrManage/regular-apply/index.vue
@@ -46,6 +46,7 @@
<!-- 鏂板 / 缂栬緫 -->
<el-dialog
+ v-if="formDialog.visible"
v-model="formDialog.visible"
:title="formDialog.title"
width="960px"
@@ -55,102 +56,31 @@
@closed="onFormClosed"
>
<el-form ref="formRef" :model="form" :rules="formRules" label-width="140px" class="regular-apply-form">
- <el-row :gutter="24">
- <el-col :span="12">
- <el-form-item label="鐢宠浜�" prop="applicantName">
- <el-input v-model="form.applicantName" placeholder="璇疯緭鍏ョ敵璇蜂汉" maxlength="50" show-word-limit />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="鐢宠鏃ユ湡" prop="applyDate">
- <el-date-picker
- v-model="form.applyDate"
- 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="regularizationDate">
- <el-date-picker
- v-model="form.regularizationDate"
- type="date"
- placeholder="璇烽�夋嫨杞鏃ユ湡"
- format="YYYY-MM-DD"
- value-format="YYYY-MM-DD"
- style="width: 100%"
- />
- </el-form-item>
- </el-col>
- <el-col v-if="!form.hasTemplateBinding" :span="12">
- <el-form-item label="瀹℃壒鏂瑰紡" prop="approvalMode">
- <el-radio-group v-model="form.approvalMode">
- <el-radio value="parallel">涓庣</el-radio>
- <el-radio value="countersign">浼氱</el-radio>
- </el-radio-group>
- </el-form-item>
- </el-col>
- </el-row>
- <template v-if="form.hasTemplateBinding">
- <ApprovalTemplateFormSection
- :active-template="form.templateSnapshot"
- :fields="form.formFieldDefs"
- :form-payload="form.formPayload"
- v-model:flow-nodes="form.flowNodes"
- v-model:attachments="form.storageBlobDTOs"
- :template-attachments="form.templateAttachments"
- :user-options="flowUserOptions"
- :allow-change-template="formDialog.mode === 'add'"
- @change-template="reopenTemplateBind"
- />
- </template>
- <el-row v-else :gutter="24">
- <el-col :span="24">
- <el-form-item label="瀹℃壒浜�" prop="approverIds">
- <el-tree-select
- v-model="form.approverIds"
- :data="approverTreeData"
- multiple
- collapse-tags
- collapse-tags-tooltip
- :max-collapse-tags="2"
- :render-after-expand="false"
- placeholder="璇烽�夋嫨瀹℃壒浜猴紙鍙閫夛級"
- style="width: 100%"
- :props="{ value: 'id', label: 'label', children: 'children', disabled: 'disabled' }"
- check-strictly
- />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="24">
- <el-col :span="24">
- <el-form-item label="璇曠敤鏈熷伐浣滄�荤粨" prop="probationSummary">
- <el-input
- v-model="form.probationSummary"
- type="textarea"
- :rows="4"
- placeholder="璇峰～鍐欒瘯鐢ㄦ湡宸ヤ綔鎬荤粨"
- maxlength="2000"
- show-word-limit
- />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row v-if="!form.hasTemplateBinding" :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-item v-if="form.templateSnapshot" label="瀹℃壒妯℃澘">
+ <span class="template-name">{{ form.templateSnapshot.label || form.templateName }}</span>
+ <el-button
+ v-if="formDialog.mode === 'add'"
+ type="primary"
+ link
+ class="ml12"
+ @click="reopenTemplateBind"
+ >
+ 鏇存崲妯℃澘
+ </el-button>
+ </el-form-item>
+ <FormPayloadFields :fields="form.formFieldDefs" :form-payload="form.formPayload" />
+ <ApprovalTemplateFormSection
+ :active-template="form.templateSnapshot"
+ :fields="form.formFieldDefs"
+ :form-payload="form.formPayload"
+ v-model:flow-nodes="form.flowNodes"
+ v-model:attachments="form.storageBlobDTOs"
+ :template-attachments="form.templateAttachments"
+ :user-options="flowUserOptions"
+ flow-attachments-only
+ hide-template-name
+ :allow-change-template="false"
+ />
</el-form>
<template #footer>
<div class="dialog-footer">
@@ -163,7 +93,9 @@
<ApprovalTemplateBindDialog
v-model:visible="templateBindVisible"
:module-key="APPROVAL_MODULE_KEYS.REGULAR"
+ skip-form-confirm
@confirm="onTemplateBound"
+ @closed="onTemplateBindClosed"
/>
<!-- 璇︽儏锛堝彧璇伙級 -->
@@ -220,15 +152,15 @@
<script setup>
import { Search } from "@element-plus/icons-vue";
-import FileUpload from "@/components/AttachmentUpload/file/index.vue";
-import { deptTreeSelect, userListNoPageByTenantId } from "@/api/system/user.js";
import { computed, getCurrentInstance, nextTick, onMounted, reactive, ref, watch } from "vue";
import ApprovalTemplateBindDialog from "../../ApproveManage/approve-shared/components/ApprovalTemplateBindDialog.vue";
import ApprovalTemplateFormSection from "../../ApproveManage/approve-shared/components/ApprovalTemplateFormSection.vue";
+import FormPayloadFields from "../../ApproveManage/approve-list/components/FormPayloadFields.vue";
import { APPROVAL_MODULE_KEYS } from "../../ApproveManage/approve-shared/approvalModuleRegistry.js";
import {
applyBindingToForm,
buildFormPayloadRules,
+ validateTemplateBinding,
} from "../../ApproveManage/approve-shared/approvalTemplateBindingUtils.js";
import { useFlowUserOptions } from "../../ApproveManage/approve-shared/useFlowUserOptions.js";
@@ -239,10 +171,6 @@
applyDate: "",
regularizationDate: "",
probationSummary: "",
- approvalMode: "parallel",
- approverIds: [],
- approverNames: "",
- attachmentList: [],
hasTemplateBinding: false,
templateId: "",
templateName: "",
@@ -256,162 +184,6 @@
const { proxy } = getCurrentInstance();
-/** 瀹℃壒浜烘爲锛氶儴闂ㄦ爲 + 绯荤粺鐢ㄦ埛锛堜笌 staff-archive / user-manage 鍚屾簮鎺ュ彛锛� */
-const approverTreeData = ref([]);
-const approverLabelMap = ref({});
-
-/** 鎺ュ彛杩斿洖缁熶竴鎷嗘垚鏁扮粍锛堝吋瀹� axios 鎷︽埅鍣ㄥ凡瑙ｅ寘涓� { data } 鎴栫洿鎺ユ暟缁勭瓑鎯呭喌锛� */
-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 filterDisabledDept(deptList) {
- if (!Array.isArray(deptList)) return [];
- return deptList.filter((dept) => {
- if (dept.disabled) return false;
- if (dept.children?.length) {
- dept.children = filterDisabledDept(dept.children);
- }
- return true;
- });
-}
-
-function getUserDeptId(u) {
- return (
- u.deptId ??
- u.sysDeptId ??
- u.dept?.deptId ??
- u.dept?.id ??
- u.dept_id
- );
-}
-
-/** 閮ㄩ棬鏍戣妭鐐逛富閿紙鑻ヤ緷涓�鑸负 id锛岄儴鍒嗗満鏅负 value锛� */
-function getDeptNodeKey(node) {
- const k = node?.id ?? node?.value ?? node?.deptId;
- if (k == null || k === "") return null;
- return k;
-}
-
-function isActiveUser(u) {
- if (u.delFlag === "2" || u.delFlag === 2) return false;
- if (u.status == null) return true;
- return String(u.status) === "0";
-}
-
-function userToTreeLeaf(u) {
- return {
- id: String(u.userId ?? u.id),
- label: u.nickName || u.userName || `鐢ㄦ埛${u.userId ?? u.id}`,
- };
-}
-
-/** 鎸夐儴闂� id 鍒嗙粍锛涙棤閮ㄩ棬鎴� id 涓� 0 鐨勭敤鎴疯繘鍏ユ湭鍒嗛厤鍒楄〃 */
-function buildUsersByDeptId(users) {
- const map = new Map();
- const unassigned = [];
- for (const u of users) {
- if (!isActiveUser(u)) continue;
- const did = getUserDeptId(u);
- if (did == null || did === "" || did === 0 || did === "0") {
- unassigned.push(u);
- continue;
- }
- const k = String(did);
- if (!map.has(k)) map.set(k, []);
- map.get(k).push(u);
- }
- return { map, unassigned };
-}
-
-function collectUserLabels(nodes, map) {
- (nodes || []).forEach((n) => {
- if (n.children?.length) {
- collectUserLabels(n.children, map);
- } else if (n.id != null && !String(n.id).startsWith("dept_")) {
- map[String(n.id)] = n.label;
- }
- });
-}
-
-/** 閮ㄩ棬鑺傜偣 id 鍔犲墠缂�锛岄伩鍏嶄笌 userId 鏁板�煎啿绐侊紱鍙�夎妭鐐逛负鐪熷疄 userId 瀛楃涓� */
-function mergeDeptTreeWithUsers(nodes, usersByDept) {
- if (!Array.isArray(nodes)) return [];
- const out = [];
- for (const node of nodes) {
- const deptIdRaw = getDeptNodeKey(node);
- if (deptIdRaw == null) continue;
- const sub = mergeDeptTreeWithUsers(node.children || [], usersByDept);
- const usersHere = usersByDept.get(String(deptIdRaw)) || [];
- const userChildren = usersHere.map(userToTreeLeaf);
- const children = [...sub, ...userChildren];
- if (!children.length) continue;
- out.push({
- id: `dept_${deptIdRaw}`,
- label: node.label ?? node.deptName ?? "閮ㄩ棬",
- disabled: true,
- children,
- });
- }
- return out;
-}
-
-function buildFlatApproverTree(users) {
- const list = users.filter(isActiveUser).map(userToTreeLeaf);
- if (!list.length) return [];
- return [
- {
- id: "dept_all_users",
- label: "绯荤粺鐢ㄦ埛",
- disabled: true,
- children: list,
- },
- ];
-}
-
-async function loadApproverTree() {
- try {
- const [deptRes, userRes] = await Promise.all([deptTreeSelect(), userListNoPageByTenantId()]);
- let rawTree = unwrapArray(deptRes);
- rawTree = rawTree.length ? JSON.parse(JSON.stringify(rawTree)) : [];
- let deptTree = filterDisabledDept(JSON.parse(JSON.stringify(rawTree)));
- if (!deptTree.length && rawTree.length) {
- deptTree = JSON.parse(JSON.stringify(rawTree));
- }
- const users = unwrapArray(userRes);
- const { map: usersByDept, unassigned } = buildUsersByDeptId(users);
- let merged = mergeDeptTreeWithUsers(deptTree, usersByDept);
- if (unassigned.length) {
- merged.push({
- id: "dept_unassigned",
- label: "鏈垎閰嶉儴闂�",
- disabled: true,
- children: unassigned.map(userToTreeLeaf),
- });
- }
- if (!merged.length && users.length) {
- merged = buildFlatApproverTree(users);
- }
- approverTreeData.value = merged;
- const map = {};
- collectUserLabels(merged, map);
- approverLabelMap.value = map;
- } catch {
- approverTreeData.value = [];
- approverLabelMap.value = {};
- proxy?.$modal?.msgWarning?.("瀹℃壒浜烘暟鎹姞杞藉け璐ワ紝璇锋鏌ョ綉缁滄垨绋嶅悗閲嶈瘯");
- }
-}
-
-function resolveApproverNames(ids) {
- if (!ids?.length) return "";
- const map = approverLabelMap.value;
- return ids.map((id) => map[String(id)] || id).join("銆�");
-}
-
function approvalModeLabel(mode) {
if (mode === "countersign") return "浼氱";
return "涓庣";
@@ -424,33 +196,7 @@
return "寰呭鎵�";
}
-/** 鏈湴妯℃嫙鏁版嵁婧� */
-const allRows = ref([
- {
- id: "1",
- applicantName: "鍛ㄦ槑",
- applyDate: "2026-05-01",
- regularizationDate: "2026-06-01",
- probationSummary: "璇曠敤鏈熷唴瀹屾垚妯″潡寮�鍙戜笌鑱旇皟锛岀啛鎮変笟鍔℃祦绋嬨��",
- approvalMode: "parallel",
- approverIds: [],
- approverNames: "",
- approvalResult: "pending",
- attachmentList: [{ name: "宸ヤ綔鎬荤粨.pdf" }, { name: "鑰冩牳琛�.xlsx" }],
- },
- {
- id: "2",
- applicantName: "鍚磋姵",
- applyDate: "2026-05-08",
- regularizationDate: "2026-06-10",
- probationSummary: "瀹屾垚鍏ヨ亴鍩硅涓庡矖浣嶅疄璺碉紝杈惧埌宀椾綅瑕佹眰銆�",
- approvalMode: "countersign",
- approverIds: [],
- approverNames: "",
- approvalResult: "approved",
- attachmentList: [],
- },
-]);
+const allRows = ref([]);
const searchForm = reactive({
applicantName: "",
@@ -548,26 +294,10 @@
const formRef = ref();
const form = reactive(createEmptyForm());
const templateBindVisible = ref(false);
+const pendingTemplateBinding = ref(null);
const { flowUserOptions, loadFlowUsers } = useFlowUserOptions();
-const formRules = computed(() => {
- const base = {
- applicantName: [{ required: true, message: "璇疯緭鍏ョ敵璇蜂汉", trigger: "blur" }],
- applyDate: [{ required: true, message: "璇烽�夋嫨鐢宠鏃ユ湡", trigger: "change" }],
- regularizationDate: [{ required: true, message: "璇烽�夋嫨杞鏃ユ湡", trigger: "change" }],
- probationSummary: [{ required: true, message: "璇峰～鍐欒瘯鐢ㄦ湡宸ヤ綔鎬荤粨", trigger: "blur" }],
- };
- if (form.hasTemplateBinding) {
- return { ...base, ...buildFormPayloadRules(form.formFieldDefs) };
- }
- return {
- ...base,
- approvalMode: [{ required: true, message: "璇烽�夋嫨瀹℃壒鏂瑰紡", trigger: "change" }],
- approverIds: [
- { type: "array", required: true, message: "璇烽�夋嫨瀹℃壒浜�", trigger: "change" },
- ],
- };
-});
+const formRules = computed(() => buildFormPayloadRules(form.formFieldDefs));
const detailDialog = reactive({ visible: false });
const detailRow = ref({});
@@ -609,20 +339,32 @@
window.open(url, "_blank");
return;
}
- proxy?.$modal?.msgSuccess?.(`宸叉ā鎷熶笅杞斤細${row.name}`);
+ proxy?.$modal?.msgWarning?.("鏆傛棤涓嬭浇鍦板潃");
}
function openAddWithTemplate() {
+ formDialog.visible = false;
+ pendingTemplateBinding.value = null;
templateBindVisible.value = true;
}
function onTemplateBound(binding) {
+ pendingTemplateBinding.value = binding;
+}
+
+function onTemplateBindClosed() {
+ const binding = pendingTemplateBinding.value;
+ if (!binding) return;
+ pendingTemplateBinding.value = null;
+ openFormWithBinding(binding);
+}
+
+function openFormWithBinding(binding) {
Object.assign(form, createEmptyForm());
applyBindingToForm(form, binding);
form.hasTemplateBinding = true;
formDialog.mode = "add";
formDialog.title = "鏂板杞鐢宠";
- loadApproverTree();
loadFlowUsers();
formDialog.visible = true;
nextTick(() => formRef.value?.clearValidate?.());
@@ -630,13 +372,17 @@
function reopenTemplateBind() {
formDialog.visible = false;
+ pendingTemplateBinding.value = null;
templateBindVisible.value = true;
}
function openFormDialog(mode, row) {
+ if (mode === "edit" && row && !row.hasTemplateBinding) {
+ proxy?.$modal?.msgWarning?.("璇ヨ褰曚负鏃х増鏁版嵁锛岃閲嶆柊閫氳繃妯℃澘鍙戣捣鐢宠");
+ return;
+ }
formDialog.mode = mode;
- formDialog.title = mode === "add" ? "鏂板杞鐢宠" : "缂栬緫杞鐢宠";
- loadApproverTree();
+ formDialog.title = "缂栬緫杞鐢宠";
Object.assign(form, createEmptyForm());
if (mode === "edit" && row) {
Object.assign(form, {
@@ -645,11 +391,17 @@
applyDate: row.applyDate,
regularizationDate: row.regularizationDate,
probationSummary: row.probationSummary,
- approvalMode: row.approvalMode,
- approverIds: (row.approverIds || []).map((id) => String(id)),
- approverNames: row.approverNames,
- attachmentList: JSON.parse(JSON.stringify(row.attachmentList || [])),
+ hasTemplateBinding: true,
+ templateId: row.templateId,
+ templateName: row.templateName,
+ templateSnapshot: row.templateSnapshot,
+ formFieldDefs: row.formFieldDefs || [],
+ formPayload: JSON.parse(JSON.stringify(row.formPayload || {})),
+ flowNodes: JSON.parse(JSON.stringify(row.flowNodes || [])),
+ templateAttachments: JSON.parse(JSON.stringify(row.templateAttachments || [])),
+ storageBlobDTOs: JSON.parse(JSON.stringify(row.storageBlobDTOs || [])),
});
+ loadFlowUsers();
}
formDialog.visible = true;
nextTick(() => formRef.value?.clearValidate?.());
@@ -665,21 +417,32 @@
} catch {
return;
}
- form.approverNames = resolveApproverNames(form.approverIds);
+ const flowCheck = validateTemplateBinding({ flowNodes: form.flowNodes });
+ if (!flowCheck.ok) {
+ proxy?.$modal?.msgWarning?.(flowCheck.message || "璇峰畬鍠勫鎵规祦绋�");
+ return;
+ }
+ form.flowNodes = flowCheck.nodes;
+ syncRegularFieldsFromPayload();
const payload = {
applicantName: form.applicantName,
applyDate: form.applyDate,
regularizationDate: form.regularizationDate,
probationSummary: form.probationSummary,
- approvalMode: form.approvalMode,
- approverIds: [...form.approverIds],
- approverNames: form.approverNames,
- attachmentList: JSON.parse(JSON.stringify(form.attachmentList || [])),
+ hasTemplateBinding: true,
+ templateId: form.templateId,
+ templateName: form.templateName,
+ templateSnapshot: form.templateSnapshot,
+ formFieldDefs: form.formFieldDefs,
+ formPayload: JSON.parse(JSON.stringify(form.formPayload || {})),
+ flowNodes: JSON.parse(JSON.stringify(form.flowNodes || [])),
+ templateAttachments: JSON.parse(JSON.stringify(form.templateAttachments || [])),
+ storageBlobDTOs: JSON.parse(JSON.stringify(form.storageBlobDTOs || [])),
};
if (formDialog.mode === "add") {
const id = `local_${Date.now()}`;
allRows.value.unshift({ id, ...payload, approvalResult: "pending" });
- proxy?.$modal?.msgSuccess?.("鏂板鎴愬姛锛堟湰鍦版ā鎷燂級");
+ proxy?.$modal?.msgSuccess?.("鏂板鎴愬姛");
} else {
const idx = allRows.value.findIndex((r) => r.id === form.id);
if (idx !== -1) {
@@ -691,14 +454,35 @@
approvalResult: prev.approvalResult ?? "pending",
};
}
- proxy?.$modal?.msgSuccess?.("淇濆瓨鎴愬姛锛堟湰鍦版ā鎷燂級");
+ proxy?.$modal?.msgSuccess?.("淇濆瓨鎴愬姛");
}
formDialog.visible = false;
handleQuery();
}
+/** 浠庢ā鏉垮～鎶ラ」鍚屾鍒楄〃灞曠ず瀛楁 */
+function syncRegularFieldsFromPayload() {
+ const defs = form.formFieldDefs || [];
+ const payload = form.formPayload || {};
+ for (const f of defs) {
+ const label = String(f.label || "");
+ const val = payload[f.key];
+ if (label.includes("鐢宠浜�") && !label.includes("鏃ユ湡")) {
+ form.applicantName = val != null && val !== "" ? String(val) : form.applicantName;
+ }
+ if (label.includes("鐢宠鏃ユ湡") && f.type === "date") {
+ form.applyDate = val || "";
+ }
+ if (label.includes("杞") && (label.includes("鏃ユ湡") || label.includes("鏃堕棿")) && f.type === "date") {
+ form.regularizationDate = val || "";
+ }
+ if (label.includes("璇曠敤鏈�") || label.includes("宸ヤ綔鎬荤粨")) {
+ form.probationSummary = val != null ? String(val) : "";
+ }
+ }
+}
+
onMounted(() => {
- loadApproverTree();
loadFlowUsers();
});
</script>
@@ -718,9 +502,6 @@
font-size: 14px;
color: var(--el-text-color-regular);
}
-.upload-block {
- width: 100%;
-}
.mr6 {
margin-right: 6px;
}
@@ -733,6 +514,13 @@
.regular-apply-form :deep(.el-form-item) {
margin-bottom: 18px;
}
+.template-name {
+ font-weight: 600;
+ color: var(--el-text-color-primary);
+}
+.ml12 {
+ margin-left: 12px;
+}
.regular-apply-form-dialog :deep(.el-dialog__body) {
padding-top: 12px;
}
--
Gitblit v1.9.3