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/NoticeAnnouncement/notice-manage/useNoticeAnnouncement.js               |   16 
 src/views/officeProcessAutomation/EnterpriseNews/news-manage/enterpriseNewsUtils.js                       |   18 
 src/views/officeProcessAutomation/AttendManage/overtime-apply/index.vue                                   |  670 ++++++------
 src/views/officeProcessAutomation/HrManage/work-handover/index.vue                                        |  495 +++------
 src/views/officeProcessAutomation/HrManage/regular-apply/index.vue                                        |  398 ++-----
 src/views/officeProcessAutomation/ApproveManage/approve-shared/approvalModuleRegistry.js                  |   32 
 src/views/officeProcessAutomation/AttendManage/leave-apply/index.vue                                      |  741 ++++++-------
 src/views/officeProcessAutomation/HrManage/transfer-apply/index.vue                                       |  508 ++++-----
 src/views/officeProcessAutomation/ApproveManage/approve-shared/useApprovalTemplateBinding.js              |   38 
 src/views/officeProcessAutomation/ApproveManage/approve-shared/components/ApprovalTemplateBindDialog.vue  |   40 
 src/views/officeProcessAutomation/EnterpriseNews/news-manage/useEnterpriseNews.js                         |   18 
 src/views/officeProcessAutomation/NoticeAnnouncement/notice-manage/noticeAnnouncementUtils.js             |   18 
 src/views/officeProcessAutomation/ApproveManage/approve-shared/components/ApprovalTemplateFormSection.vue |   10 
 13 files changed, 1,300 insertions(+), 1,702 deletions(-)

diff --git a/src/views/officeProcessAutomation/ApproveManage/approve-shared/approvalModuleRegistry.js b/src/views/officeProcessAutomation/ApproveManage/approve-shared/approvalModuleRegistry.js
index 09d68fd..ad85890 100644
--- a/src/views/officeProcessAutomation/ApproveManage/approve-shared/approvalModuleRegistry.js
+++ b/src/views/officeProcessAutomation/ApproveManage/approve-shared/approvalModuleRegistry.js
@@ -33,22 +33,22 @@
   [APPROVAL_MODULE_KEYS.RESIGN]: {
     label: "绂昏亴鐢宠",
     approvalType: "resign",
-    typeLabels: ["绂昏亴", "绂昏亴鐢宠"],
+    typeLabels: ["绂昏亴", "绂昏亴鐢宠", "绂昏亴瀹℃壒"],
   },
   [APPROVAL_MODULE_KEYS.WORK_HANDOVER]: {
     label: "宸ヤ綔浜ゆ帴",
     approvalType: "work_handover",
-    typeLabels: ["宸ヤ綔浜ゆ帴", "浜ゆ帴"],
+    typeLabels: ["宸ヤ綔浜ゆ帴", "浜ゆ帴", "宸ヤ綔浜ゆ帴瀹℃壒"],
   },
   [APPROVAL_MODULE_KEYS.LEAVE]: {
     label: "璇峰亣鐢宠",
     approvalType: "leave",
-    typeLabels: ["璇峰亣", "璇峰亣鐢宠"],
+    typeLabels: ["璇峰亣", "璇峰亣鐢宠", "璇峰亣瀹℃壒"],
   },
   [APPROVAL_MODULE_KEYS.OVERTIME]: {
     label: "鍔犵彮鐢宠",
     approvalType: "overtime",
-    typeLabels: ["鍔犵彮", "鍔犵彮鐢宠"],
+    typeLabels: ["鍔犵彮", "鍔犵彮鐢宠", "鍔犵彮瀹℃壒"],
   },
   [APPROVAL_MODULE_KEYS.TRAVEL_REIMBURSE]: {
     label: "宸梾鎶ラ攢",
@@ -100,3 +100,27 @@
 
   return cfg.approvalType || null;
 }
+
+/** 鏀堕泦涓庢ā鍧楃浉鍏崇殑鍏ㄩ儴 businessType 鍙栧�硷紙鏋氫妇鍊� + approvalType锛夛紝鐢ㄤ簬妯℃澘鍒楄〃杩囨护 */
+export function getModuleMatchingBusinessTypes(moduleKey, typeOptions = []) {
+  const cfg = getApprovalModuleConfig(moduleKey);
+  if (!cfg) return [];
+
+  const values = new Set();
+  const primary = resolveModuleBusinessType(moduleKey, typeOptions);
+  if (primary != null && primary !== "") values.add(primary);
+  if (cfg.approvalType) values.add(cfg.approvalType);
+
+  const labels = [cfg.label, ...(cfg.typeLabels || [])].filter(Boolean);
+  for (const opt of typeOptions || []) {
+    const optLabel = String(opt?.label || "").trim();
+    if (!optLabel) continue;
+    const matched = labels.some(
+      (l) => optLabel === l || optLabel.includes(l) || l.includes(optLabel)
+    );
+    if (matched && opt.value != null && opt.value !== "") {
+      values.add(opt.value);
+    }
+  }
+  return [...values];
+}
diff --git a/src/views/officeProcessAutomation/ApproveManage/approve-shared/components/ApprovalTemplateBindDialog.vue b/src/views/officeProcessAutomation/ApproveManage/approve-shared/components/ApprovalTemplateBindDialog.vue
index c05374d..409dd41 100644
--- a/src/views/officeProcessAutomation/ApproveManage/approve-shared/components/ApprovalTemplateBindDialog.vue
+++ b/src/views/officeProcessAutomation/ApproveManage/approve-shared/components/ApprovalTemplateBindDialog.vue
@@ -14,17 +14,18 @@
     :title="dialogTitle"
     :width="step === formStep ? 720 : 640"
     append-to-body
-    destroy-on-close
     class="approval-template-bind-dialog"
     @closed="onClosed"
   >
     <template v-if="step === 1">
-      <ApprovalTemplatePicker
-        :cards="templateCards"
-        :loading="templatesLoading"
-        :hint="pickerHint"
-        @pick="onPickTemplate"
-      />
+      <div v-loading="templatesLoading || confirming">
+        <ApprovalTemplatePicker
+          :cards="templateCards"
+          :loading="false"
+          :hint="pickerHint"
+          @pick="onPickTemplate"
+        />
+      </div>
     </template>
 
     <template v-else>
@@ -73,9 +74,11 @@
   visible: { type: Boolean, default: false },
   /** approvalModuleRegistry 涓殑 moduleKey */
   moduleKey: { type: String, required: true },
+  /** 涓� true 鏃堕�夋ā鏉垮悗鐩存帴纭锛岃烦杩囥�岀‘璁ゅ鎵逛俊鎭�嶅～鎶ユ楠� */
+  skipFormConfirm: { type: Boolean, default: false },
 });
 
-const emit = defineEmits(["update:visible", "confirm"]);
+const emit = defineEmits(["update:visible", "confirm", "closed"]);
 
 const dialogVisible = computed({
   get: () => props.visible,
@@ -122,19 +125,33 @@
     step.value = 1;
     await Promise.all([loadTemplates(), loadFlowUsers()]);
     const cfg = getApprovalModuleConfig(props.moduleKey);
-    if (!cfg) ElMessage.warning(`鏈厤缃ā鍧椼��${props.moduleKey}銆嶏紝璇锋鏌� approvalModuleRegistry`);
+    if (!cfg) {
+      ElMessage.warning(`鏈厤缃ā鍧椼��${props.moduleKey}銆嶏紝璇锋鏌� approvalModuleRegistry`);
+      return;
+    }
+    if (!templateCards.value.length) {
+      ElMessage.warning(
+        `銆�${cfg.label}銆嶄笅鏆傛棤宸插惎鐢ㄧ殑瀹℃壒妯℃澘锛岃鍏堝湪瀹℃壒妯℃澘绠＄悊涓垱寤哄苟鍚敤瀵瑰簲绫诲瀷鐨勬ā鏉縛
+      );
+    }
   }
 );
 
 async function onPickTemplate(card) {
   const ok = await pickTemplate(card);
-  if (ok) step.value = formStep;
+  if (!ok) return;
+  if (props.skipFormConfirm) {
+    step.value = 1;
+    await onConfirm();
+    return;
+  }
+  step.value = formStep;
 }
 
 async function onConfirm() {
   confirming.value = true;
   try {
-    const check = await validateBinding(formRef.value);
+    const check = await validateBinding(props.skipFormConfirm ? null : formRef.value);
     if (!check.ok) {
       if (check.message) ElMessage.warning(check.message);
       return;
@@ -148,6 +165,7 @@
 
 function onClosed() {
   resetBinding();
+  emit("closed");
 }
 </script>
 
diff --git a/src/views/officeProcessAutomation/ApproveManage/approve-shared/components/ApprovalTemplateFormSection.vue b/src/views/officeProcessAutomation/ApproveManage/approve-shared/components/ApprovalTemplateFormSection.vue
index 47ad787..aff58fd 100644
--- a/src/views/officeProcessAutomation/ApproveManage/approve-shared/components/ApprovalTemplateFormSection.vue
+++ b/src/views/officeProcessAutomation/ApproveManage/approve-shared/components/ApprovalTemplateFormSection.vue
@@ -1,14 +1,14 @@
 <!-- 妯℃澘缁戝畾琛ㄥ崟鍖猴細濉姤椤� + 瀹℃壒娴佺▼ + 闄勪欢锛堥』鎸傚湪澶栧眰 el-form 涓嬶級 -->
 <template>
   <template v-if="activeTemplate">
-    <el-form-item v-if="showTemplateName" label="瀹℃壒妯℃澘">
+    <el-form-item v-if="showTemplateName && !hideTemplateName && !flowAttachmentsOnly" label="瀹℃壒妯℃澘">
       <span class="template-name">{{ activeTemplate.label }}</span>
       <el-button v-if="allowChangeTemplate" type="primary" link class="ml12" @click="emit('change-template')">
         鏇存崲妯℃澘
       </el-button>
     </el-form-item>
 
-    <FormPayloadFields :fields="fields" :form-payload="formPayload" />
+    <FormPayloadFields v-if="!hideFormFields && !flowAttachmentsOnly" :fields="fields" :form-payload="formPayload" />
 
     <el-form-item label="瀹℃壒娴佺▼" required>
       <TemplateFlowEditor v-model="flowNodesModel" :user-options="userOptions" />
@@ -59,6 +59,12 @@
   userOptions: { type: Array, default: () => [] },
   showTemplateName: { type: Boolean, default: true },
   allowChangeTemplate: { type: Boolean, default: true },
+  /** 涓� true 鏃朵笉灞曠ず妯℃澘鑷畾涔夊～鎶ラ」锛堜粎淇濈暀瀹℃壒娴佺▼涓庨檮浠讹級 */
+  hideFormFields: { type: Boolean, default: false },
+  /** 涓� true 鏃朵笉灞曠ず瀹℃壒妯℃澘鍚嶇О琛岋紙鐢辩埗绾х疆椤跺睍绀猴級 */
+  hideTemplateName: { type: Boolean, default: false },
+  /** 涓� true 鏃朵粎灞曠ず瀹℃壒娴佺▼涓庨檮浠讹紙濉姤椤圭敱鐖剁骇鍗曠嫭娓叉煋锛� */
+  flowAttachmentsOnly: { type: Boolean, default: false },
   uploadLimit: { type: Number, default: 10 },
 });
 
diff --git a/src/views/officeProcessAutomation/ApproveManage/approve-shared/useApprovalTemplateBinding.js b/src/views/officeProcessAutomation/ApproveManage/approve-shared/useApprovalTemplateBinding.js
index de056d2..d49ec53 100644
--- a/src/views/officeProcessAutomation/ApproveManage/approve-shared/useApprovalTemplateBinding.js
+++ b/src/views/officeProcessAutomation/ApproveManage/approve-shared/useApprovalTemplateBinding.js
@@ -17,6 +17,7 @@
 } from "../approve-list/approveListConstants.js";
 import {
   getApprovalModuleConfig,
+  getModuleMatchingBusinessTypes,
   resolveModuleBusinessType,
 } from "./approvalModuleRegistry.js";
 import {
@@ -60,10 +61,29 @@
     return "";
   });
 
+  const matchingBusinessTypes = computed(() => {
+    if (fixedBusinessType != null && fixedBusinessType !== "") return [fixedBusinessType];
+    if (isUniversal) {
+      const t = selectedBusinessType.value;
+      return t != null && t !== "" ? [t] : [];
+    }
+    if (moduleKey) {
+      return getModuleMatchingBusinessTypes(moduleKey, businessTypeOptions.value);
+    }
+    const t = resolvedBusinessType.value;
+    return t != null && t !== "" ? [t] : [];
+  });
+
   const templateCards = computed(() => {
-    const type = resolvedBusinessType.value;
-    if (type == null || type === "") return [];
-    return allTemplates.value.filter((card) => matchBusinessTypeValue(card.businessType, type));
+    const types = matchingBusinessTypes.value;
+    if (!types.length) return [];
+    return allTemplates.value.filter((card) =>
+      types.some(
+        (t) =>
+          matchBusinessTypeValue(card.businessType, t) ||
+          matchBusinessTypeValue(card.approvalType, t)
+      )
+    );
   });
 
   const activeTemplate = computed(() => bindingForm.templateSnapshot || null);
@@ -87,7 +107,17 @@
   const selectedBusinessTypeLabel = computed(() => businessTypeLabel(resolvedBusinessType.value));
 
   function countTemplatesByBusinessType(type) {
-    return allTemplates.value.filter((card) => matchBusinessTypeValue(card.businessType, type)).length;
+    const types =
+      moduleKey && !fixedBusinessType
+        ? getModuleMatchingBusinessTypes(moduleKey, businessTypeOptions.value)
+        : [type];
+    return allTemplates.value.filter((card) =>
+      types.some(
+        (t) =>
+          matchBusinessTypeValue(card.businessType, t) ||
+          matchBusinessTypeValue(card.approvalType, t)
+      )
+    ).length;
   }
 
   async function loadTemplates() {
diff --git a/src/views/officeProcessAutomation/AttendManage/leave-apply/index.vue b/src/views/officeProcessAutomation/AttendManage/leave-apply/index.vue
index 30a821b..7bd7b58 100644
--- a/src/views/officeProcessAutomation/AttendManage/leave-apply/index.vue
+++ b/src/views/officeProcessAutomation/AttendManage/leave-apply/index.vue
@@ -20,7 +20,7 @@
         <el-button @click="resetSearch">閲嶇疆</el-button>
       </div>
       <div>
-        <el-button type="primary" @click="openFormDialog('add')">鏂板璇峰亣鐢宠</el-button>
+        <el-button type="primary" @click="openAddWithTemplate">鏂板璇峰亣鐢宠</el-button>
       </div>
     </div>
     <div class="table_list">
@@ -38,6 +38,7 @@
 
     <!-- 鏂板 / 缂栬緫 -->
     <el-dialog
+      v-if="formDialog.visible"
       v-model="formDialog.visible"
       :title="formDialog.title"
       width="960px"
@@ -47,39 +48,21 @@
       @closed="onFormClosed"
     >
       <el-form ref="formRef" :model="form" :rules="formRules" label-width="140px" class="leave-apply-form">
+        <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="templateDisplayFields" :form-payload="form.formPayload" />
         <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="leaveType">
-              <el-select v-model="form.leaveType" placeholder="璇烽�夋嫨璇峰亣绫诲瀷" clearable filterable style="width: 100%">
-                <el-option v-for="opt in LEAVE_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="leaveBalanceDays">
               <el-input-number
@@ -94,94 +77,26 @@
               />
             </el-form-item>
           </el-col>
-        </el-row>
-        <el-row :gutter="24">
-          <el-col :span="12">
-            <el-form-item label="璇峰亣寮�濮嬫椂闂�" prop="leaveStartTime">
-              <el-date-picker
-                v-model="form.leaveStartTime"
-                type="datetime"
-                placeholder="璇烽�夋嫨寮�濮嬫椂闂�"
-                format="YYYY-MM-DD HH:mm:ss"
-                value-format="YYYY-MM-DD HH:mm:ss"
-                style="width: 100%"
-                @change="onLeaveRangeChange"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="璇峰亣缁撴潫鏃堕棿" prop="leaveEndTime">
-              <el-date-picker
-                v-model="form.leaveEndTime"
-                type="datetime"
-                placeholder="璇烽�夋嫨缁撴潫鏃堕棿"
-                format="YYYY-MM-DD HH:mm:ss"
-                value-format="YYYY-MM-DD HH:mm:ss"
-                style="width: 100%"
-                @change="onLeaveRangeChange"
-              />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="24">
           <el-col :span="12">
             <el-form-item label="璇峰亣鏃堕暱">
-              <el-input :model-value="leaveDurationDisplay" readonly placeholder="鏍规嵁璧锋鏃堕棿鑷姩璁＄畻">
+              <el-input :model-value="leaveDurationDisplay" readonly placeholder="鏍规嵁妯℃澘涓鍋囨椂闂磋嚜鍔ㄨ绠�">
                 <template #append>澶�</template>
               </el-input>
             </el-form-item>
           </el-col>
-          <el-col :span="12">
-            <el-form-item label="瀹℃壒鏂瑰紡" prop="approvalMode">
-              <el-radio-group v-model="form.approvalMode">
-                <el-radio value="parallel">涓庣</el-radio>
-                <el-radio value="or_sign">鎴栫</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
         </el-row>
-        <el-row :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="leaveReason">
-              <el-input
-                v-model="form.leaveReason"
-                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>
+        <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">
@@ -190,6 +105,14 @@
         </div>
       </template>
     </el-dialog>
+
+    <ApprovalTemplateBindDialog
+      v-model:visible="templateBindVisible"
+      :module-key="APPROVAL_MODULE_KEYS.LEAVE"
+      skip-form-confirm
+      @confirm="onTemplateBound"
+      @closed="onTemplateBindClosed"
+    />
 
     <!-- 璇︽儏 -->
     <el-dialog v-model="detailDialog.visible" title="璇峰亣鐢宠璇︽儏" width="720px" append-to-body>
@@ -207,8 +130,8 @@
         <el-descriptions-item label="瀹℃壒浜�">{{ detailRow.approverNames || "鈥�" }}</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">
+          <template v-if="rowAttachmentList(detailRow).length">
+            <el-tag v-for="(f, i) in rowAttachmentList(detailRow)" :key="i" class="mr6 mb6" type="info">
               {{ f.name }}
             </el-tag>
           </template>
@@ -224,7 +147,7 @@
 
     <!-- 闄勪欢鍒楄〃 -->
     <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 v-if="rowAttachmentList(filesDialog.row).length" :data="rowAttachmentList(filesDialog.row)" 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">
@@ -246,9 +169,20 @@
 <script setup>
 import { Search } from "@element-plus/icons-vue";
 import dayjs from "dayjs";
-import FileUpload from "@/components/AttachmentUpload/file/index.vue";
-import { deptTreeSelect, userListNoPageByTenantId } from "@/api/system/user.js";
+import { 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,
+  attachmentDisplayName,
+  buildFormPayloadRules,
+  validateTemplateBinding,
+} from "../../ApproveManage/approve-shared/approvalTemplateBindingUtils.js";
+import { useFlowUserOptions } from "../../ApproveManage/approve-shared/useFlowUserOptions.js";
+import { SELECT_OPTION_SOURCE } from "../../ApproveManage/approve-template/selectOptionSource.js";
 
 /** 璇峰亣绫诲瀷锛坴alue 涓庡悗绔榻愬崰浣嶏級 */
 const LEAVE_TYPE_OPTIONS = [
@@ -277,11 +211,17 @@
   leaveBalanceDays: undefined,
   leaveStartTime: "",
   leaveEndTime: "",
+  leaveDurationDays: null,
   leaveReason: "",
-  approvalMode: "parallel",
-  approverIds: [],
-  approverNames: "",
-  attachmentList: [],
+  hasTemplateBinding: false,
+  templateId: "",
+  templateName: "",
+  templateSnapshot: null,
+  formFieldDefs: [],
+  formPayload: {},
+  flowNodes: [],
+  templateAttachments: [],
+  storageBlobDTOs: [],
 });
 
 const { proxy } = getCurrentInstance();
@@ -293,193 +233,10 @@
   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;
-}
-
-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}`,
-  };
-}
-
-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;
-    }
-  });
-}
-
-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,
-    },
-  ];
-}
-
-const approverTreeData = ref([]);
-const approverLabelMap = ref({});
-
-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 === "or_sign") return "鎴栫";
-  return "涓庣";
-}
-
-function approvalResultLabel(v) {
-  if (v === "approved") return "宸查�氳繃";
-  if (v === "rejected") return "宸查┏鍥�";
-  if (v === "cancelled") return "宸叉挙閿�";
-  return "寰呭鎵�";
-}
-
-/** 鎸夎捣姝㈡椂闂磋绠楄鍋囧ぉ鏁帮紙鍚椂鍒嗙锛岀粨鏋滀繚鐣欎袱浣嶅皬鏁帮級 */
-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 formatDuration(v) {
-  if (v == null || v === "") return "鈥�";
-  return `${v} 澶ー;
-}
-
-function formatBalance(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) {
@@ -503,43 +260,113 @@
   return undefined;
 }
 
-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);
-  });
+function isLeaveBalanceField(field) {
+  const label = String(field?.label || "");
+  return label.includes("鍋囨湡浣欓") || field?.key === "leaveBalanceDays";
 }
 
-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 isLeaveDurationField(field) {
+  const label = String(field?.label || "");
+  return label.includes("璇峰亣鏃堕暱") || field?.key === "leaveDurationDays";
 }
 
-function onApplicantChange(uid) {
+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 formatDuration(v) {
+  if (v == null || v === "") return "鈥�";
+  return `${v} 澶ー;
+}
+
+function formatBalance(v) {
+  if (v == null || v === "") return "鈥�";
+  return `${v} 澶ー;
+}
+
+function mapStorageBlobsToAttachmentList(blobs) {
+  return (blobs || []).map((f) => ({
+    name: attachmentDisplayName(f),
+    url: f.url || f.downloadURL || f.previewURL || f.previewUrl,
+  }));
+}
+
+function rowAttachmentList(row) {
+  if (!row) return [];
+  if (row.attachmentList?.length) return row.attachmentList;
+  return mapStorageBlobsToAttachmentList(row.storageBlobDTOs);
+}
+
+function approvalModeLabel(mode) {
+  if (mode === "countersign") return "浼氱";
+  if (mode === "or_sign") return "鎴栫";
+  return "涓庣";
+}
+
+function approvalResultLabel(v) {
+  if (v === "approved") return "宸查�氳繃";
+  if (v === "rejected") return "宸查┏鍥�";
+  if (v === "cancelled") return "宸叉挙閿�";
+  return "寰呭鎵�";
+}
+
+function syncApplicantFromUser(uid) {
   const u = userById(uid);
   if (u) {
+    form.applicantId = uid != null && uid !== "" ? uid : "";
     form.applicantName = u.nickName || u.userName || "";
     form.applicantNo = applicantNoFromUser(u);
     form.leaveBalanceDays = mockLeaveBalance(u);
   } else {
+    form.applicantId = "";
     form.applicantName = "";
     form.applicantNo = "";
-    form.leaveBalanceDays = undefined;
+    if (uid == null || uid === "") {
+      form.leaveBalanceDays = undefined;
+    }
+  }
+}
+
+/** 绯荤粺鐢ㄦ埛缂撳瓨 */
+const allUsersCache = ref([]);
+
+async function loadUserPool() {
+  try {
+    const res = await userListNoPageByTenantId();
+    allUsersCache.value = unwrapArray(res);
+  } catch {
+    allUsersCache.value = [];
   }
 }
 
@@ -654,21 +481,25 @@
 });
 const formRef = ref();
 const form = reactive(createEmptyForm());
+const templateBindVisible = ref(false);
+const pendingTemplateBinding = ref(null);
+const { flowUserOptions, loadFlowUsers } = useFlowUserOptions();
+
+const leaveTimeTemplateField = computed(() => findLeaveTimeTemplateField(form.formFieldDefs));
+const applicantTemplateField = computed(() => findApplicantTemplateField(form.formFieldDefs));
+
+const templateDisplayFields = computed(() =>
+  (form.formFieldDefs || []).filter((f) => !isLeaveBalanceField(f) && !isLeaveDurationField(f))
+);
 
 const leaveDurationDisplay = computed(() => {
-  const d = computeLeaveDays(form.leaveStartTime, form.leaveEndTime);
+  const { start, end } = resolveLeaveTimeRange(form.formPayload, leaveTimeTemplateField.value);
+  const d = computeLeaveDays(start, end);
   return d == null ? "" : String(d);
 });
 
-function onLeaveRangeChange() {
-  nextTick(() => {
-    formRef.value?.validateField?.("leaveEndTime");
-  });
-}
-
-const formRules = {
-  applicantId: [{ required: true, message: "璇烽�夋嫨鐢宠浜�", trigger: "change" }],
-  leaveType: [{ required: true, message: "璇烽�夋嫨璇峰亣绫诲瀷", trigger: "change" }],
+const formRules = computed(() => ({
+  ...buildFormPayloadRules(templateDisplayFields.value),
   leaveBalanceDays: [
     {
       required: true,
@@ -676,36 +507,35 @@
       trigger: "blur",
     },
   ],
-  leaveStartTime: [{ required: true, message: "璇烽�夋嫨璇峰亣寮�濮嬫椂闂�", trigger: "change" }],
-  leaveEndTime: [
-    { required: true, message: "璇烽�夋嫨璇峰亣缁撴潫鏃堕棿", trigger: "change" },
-    {
-      validator: (_rule, val, callback) => {
-        if (!form.leaveStartTime || !val) {
-          callback();
-          return;
-        }
-        const d = computeLeaveDays(form.leaveStartTime, val);
-        if (d == null) {
-          callback(new Error("缁撴潫鏃堕棿椤绘櫄浜庡紑濮嬫椂闂�"));
-        } else {
-          callback();
-        }
-      },
-      trigger: "change",
-    },
-  ],
-  leaveReason: [{ required: true, message: "璇峰～鍐欒鍋囦簨鐢�", trigger: "blur" }],
-  approvalMode: [{ required: true, message: "璇烽�夋嫨瀹℃壒鏂瑰紡", trigger: "change" }],
-  approverIds: [
-    {
-      type: "array",
-      required: true,
-      message: "璇烽�夋嫨瀹℃壒浜�",
-      trigger: "change",
-    },
-  ],
-};
+}));
+
+watch(
+  () => {
+    const key = applicantTemplateField.value?.key;
+    return key ? form.formPayload[key] : undefined;
+  },
+  async (uid) => {
+    if (!applicantTemplateField.value) return;
+    if (!allUsersCache.value.length) {
+      await loadUserPool();
+    }
+    syncApplicantFromUser(uid);
+  }
+);
+
+watch(
+  () => {
+    const key = leaveTimeTemplateField.value?.key;
+    return key ? form.formPayload[key] : undefined;
+  },
+  () => {
+    const { start, end } = resolveLeaveTimeRange(form.formPayload, leaveTimeTemplateField.value);
+    form.leaveStartTime = start;
+    form.leaveEndTime = end;
+    form.leaveDurationDays = computeLeaveDays(start, end);
+  },
+  { deep: true }
+);
 
 const detailDialog = reactive({ visible: false });
 const detailRow = ref({});
@@ -750,13 +580,55 @@
   proxy?.$modal?.msgWarning?.("鏆傛棤涓嬭浇鍦板潃");
 }
 
-async function openFormDialog(mode, row) {
-  formDialog.mode = mode;
-  formDialog.title = mode === "add" ? "鏂板璇峰亣鐢宠" : "缂栬緫璇峰亣鐢宠";
-  await loadApproverTree();
-  if (!allUsersCache.value.length) {
-    await loadUserPool();
+function openAddWithTemplate() {
+  formDialog.visible = false;
+  pendingTemplateBinding.value = null;
+  templateBindVisible.value = true;
+}
+
+function onTemplateBound(binding) {
+  pendingTemplateBinding.value = binding;
+}
+
+async function onTemplateBindClosed() {
+  const binding = pendingTemplateBinding.value;
+  if (!binding) return;
+  pendingTemplateBinding.value = null;
+  await openFormWithBinding(binding);
+}
+
+async function openFormWithBinding(binding) {
+  Object.assign(form, createEmptyForm());
+  applyBindingToForm(form, binding);
+  form.hasTemplateBinding = true;
+  formDialog.mode = "add";
+  formDialog.title = "鏂板璇峰亣鐢宠";
+  await Promise.all([loadUserPool(), loadFlowUsers()]);
+  const applicantKey = applicantTemplateField.value?.key;
+  if (applicantKey && form.formPayload[applicantKey]) {
+    syncApplicantFromUser(form.formPayload[applicantKey]);
   }
+  const { start, end } = resolveLeaveTimeRange(form.formPayload, leaveTimeTemplateField.value);
+  form.leaveStartTime = start;
+  form.leaveEndTime = end;
+  form.leaveDurationDays = computeLeaveDays(start, end);
+  formDialog.visible = true;
+  nextTick(() => formRef.value?.clearValidate?.());
+}
+
+function reopenTemplateBind() {
+  formDialog.visible = false;
+  pendingTemplateBinding.value = null;
+  templateBindVisible.value = true;
+}
+
+async function openFormDialog(mode, row) {
+  if (mode === "edit" && row && !row.hasTemplateBinding) {
+    proxy?.$modal?.msgWarning?.("璇ヨ褰曚负鏃х増鏁版嵁锛岃閲嶆柊閫氳繃妯℃澘鍙戣捣鐢宠");
+    return;
+  }
+  formDialog.mode = mode;
+  formDialog.title = "缂栬緫璇峰亣鐢宠";
   Object.assign(form, createEmptyForm());
   if (mode === "edit" && row) {
     Object.assign(form, {
@@ -768,26 +640,24 @@
       leaveBalanceDays: row.leaveBalanceDays,
       leaveStartTime: row.leaveStartTime,
       leaveEndTime: row.leaveEndTime,
+      leaveDurationDays: row.leaveDurationDays,
       leaveReason: row.leaveReason,
-      approvalMode: row.approvalMode === "countersign" ? "or_sign" : row.approvalMode || "parallel",
-      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 || [])),
     });
-    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,
-        },
-      ];
+    await loadUserPool();
+    const applicantKey = applicantTemplateField.value?.key;
+    if (applicantKey) {
+      syncApplicantFromUser(form.formPayload[applicantKey]);
     }
-  } else {
-    remoteSearchApplicantForm("");
+    loadFlowUsers();
   }
   formDialog.visible = true;
   nextTick(() => formRef.value?.clearValidate?.());
@@ -797,18 +667,65 @@
   formRef.value?.resetFields?.();
 }
 
+/** 浠庢ā鏉垮～鎶ラ」鍚屾鍒楄〃灞曠ず瀛楁 */
+function syncLeaveFieldsFromPayload() {
+  const defs = form.formFieldDefs || [];
+  const payload = form.formPayload || {};
+  const leaveTimeField = findLeaveTimeTemplateField(defs);
+
+  for (const f of defs) {
+    const label = String(f.label || "");
+    const val = payload[f.key];
+
+    if (label.includes("鐢宠浜�") && !label.includes("鏃ユ湡") && !label.includes("鏃堕棿")) {
+      if (val != null && val !== "") {
+        form.applicantId = val;
+        const u = userById(val);
+        if (u) {
+          form.applicantName = u.nickName || u.userName || "";
+          form.applicantNo = applicantNoFromUser(u);
+        }
+      }
+    }
+    if ((label.includes("璇峰亣绫诲瀷") || f.key === "leaveType") && f.type === "select") {
+      form.leaveType = val != null && val !== "" ? val : "";
+    }
+    if (label.includes("浜嬬敱") || f.key === "summary" || label.includes("璇峰亣浜嬬敱")) {
+      form.leaveReason = val != null ? String(val) : "";
+    }
+  }
+
+  const { start, end } = resolveLeaveTimeRange(payload, leaveTimeField);
+  form.leaveStartTime = start;
+  form.leaveEndTime = end;
+  form.leaveDurationDays = computeLeaveDays(start, end);
+}
+
 async function submitForm() {
   try {
     await formRef.value?.validate?.();
   } catch {
     return;
   }
-  const days = computeLeaveDays(form.leaveStartTime, form.leaveEndTime);
-  if (days == null) {
-    proxy?.$modal?.msgWarning?.("璇锋鏌ヨ鍋囪捣姝㈡椂闂达紝缁撴潫鏃堕棿椤绘櫄浜庡紑濮嬫椂闂�");
+  const flowCheck = validateTemplateBinding({ flowNodes: form.flowNodes });
+  if (!flowCheck.ok) {
+    proxy?.$modal?.msgWarning?.(flowCheck.message || "璇峰畬鍠勫鎵规祦绋�");
     return;
   }
-  form.approverNames = resolveApproverNames(form.approverIds);
+  form.flowNodes = flowCheck.nodes;
+
+  const applicantKey = applicantTemplateField.value?.key;
+  if (applicantKey) {
+    syncApplicantFromUser(form.formPayload[applicantKey]);
+  }
+  syncLeaveFieldsFromPayload();
+
+  if (form.leaveDurationDays == null) {
+    proxy?.$modal?.msgWarning?.("璇锋鏌ユā鏉夸腑鐨勮鍋囨椂闂达紝缁撴潫鏃堕棿椤绘櫄浜庡紑濮嬫椂闂�");
+    return;
+  }
+
+  const attachmentList = mapStorageBlobsToAttachmentList(form.storageBlobDTOs);
   const payload = {
     applicantId: form.applicantId,
     applicantNo: form.applicantNo,
@@ -817,12 +734,18 @@
     leaveBalanceDays: form.leaveBalanceDays,
     leaveStartTime: form.leaveStartTime,
     leaveEndTime: form.leaveEndTime,
-    leaveDurationDays: days,
+    leaveDurationDays: form.leaveDurationDays,
     leaveReason: form.leaveReason,
-    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 || [])),
+    attachmentList,
   };
   if (formDialog.mode === "add") {
     const id = `local_${Date.now()}`;
@@ -852,7 +775,7 @@
 }
 
 onMounted(() => {
-  loadApproverTree();
+  loadFlowUsers();
 });
 </script>
 
@@ -871,9 +794,6 @@
   font-size: 14px;
   color: var(--el-text-color-regular);
 }
-.upload-block {
-  width: 100%;
-}
 .mr6 {
   margin-right: 6px;
 }
@@ -886,6 +806,13 @@
 .leave-apply-form :deep(.el-form-item) {
   margin-bottom: 18px;
 }
+.template-name {
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+.ml12 {
+  margin-left: 12px;
+}
 .leave-apply-form-dialog :deep(.el-dialog__body) {
   padding-top: 12px;
 }
diff --git a/src/views/officeProcessAutomation/AttendManage/overtime-apply/index.vue b/src/views/officeProcessAutomation/AttendManage/overtime-apply/index.vue
index a58764f..b04a9cd 100644
--- a/src/views/officeProcessAutomation/AttendManage/overtime-apply/index.vue
+++ b/src/views/officeProcessAutomation/AttendManage/overtime-apply/index.vue
@@ -22,7 +22,7 @@
       <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" />
@@ -42,133 +42,51 @@
 
     <!-- 鏂板 / 缂栬緫 -->
     <el-dialog
+      v-if="formDialog.visible"
       v-model="formDialog.visible"
       :title="formDialog.title"
-      width="1040px"
+      width="960px"
       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-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="templateDisplayFields" :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" 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>
+        <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">
@@ -177,6 +95,14 @@
         </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="detailDialog.visible" title="鍔犵彮鐢宠璇︽儏" width="720px" append-to-body>
@@ -190,11 +116,11 @@
         <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">
+          <template v-if="detailFlowSteps(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 v-for="(step, i) in detailFlowSteps(detailRow)" :key="i">
+                <span class="detail-flow-step">{{ step }}</span>
+                <span v-if="i < detailFlowSteps(detailRow).length - 1" class="detail-flow-sep">鈫�</span>
               </template>
             </div>
           </template>
@@ -203,8 +129,8 @@
         <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">
+          <template v-if="rowAttachmentList(detailRow).length">
+            <el-tag v-for="(f, i) in rowAttachmentList(detailRow)" :key="i" class="mr6 mb6" type="info">
               {{ f.name }}
             </el-tag>
           </template>
@@ -220,7 +146,7 @@
 
     <!-- 闄勪欢鍒楄〃 -->
     <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 v-if="rowAttachmentList(filesDialog.row).length" :data="rowAttachmentList(filesDialog.row)" 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">
@@ -242,10 +168,20 @@
 <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 { 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,
+  attachmentDisplayName,
+  buildFormPayloadRules,
+  validateTemplateBinding,
+} from "../../ApproveManage/approve-shared/approvalTemplateBindingUtils.js";
+import { useFlowUserOptions } from "../../ApproveManage/approve-shared/useFlowUserOptions.js";
+import { SELECT_OPTION_SOURCE } from "../../ApproveManage/approve-template/selectOptionSource.js";
 
 /** 鍔犵彮绫诲瀷锛坴alue 涓庡悗绔榻愬崰浣嶏級 */
 const OVERTIME_TYPE_OPTIONS = [
@@ -253,26 +189,6 @@
   { 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);
@@ -288,11 +204,17 @@
   overtimeDate: "",
   overtimeStartTime: "",
   overtimeEndTime: "",
+  overtimeHours: null,
   overtimeReason: "",
-  attachmentList: [],
-  approvalFlowNodes: [
-    { approverId: null, approverName: "", sortOrder: 1, nodeOrder: 1, roleName: "", roleCode: "" },
-  ],
+  hasTemplateBinding: false,
+  templateId: "",
+  templateName: "",
+  templateSnapshot: null,
+  formFieldDefs: [],
+  formPayload: {},
+  flowNodes: [],
+  templateAttachments: [],
+  storageBlobDTOs: [],
 });
 
 const { proxy } = getCurrentInstance();
@@ -302,52 +224,6 @@
   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) {
@@ -366,41 +242,120 @@
   );
 }
 
-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);
-  });
+function isOvertimeHoursField(field) {
+  const label = String(field?.label || "");
+  return label.includes("鍔犵彮鏃堕暱") || field?.key === "overtimeHours";
 }
 
-const applicantFormSearchLoading = ref(false);
-const applicantFormOptions = ref([]);
+function findOvertimeTimeTemplateField(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
+  );
+}
 
-async function remoteSearchApplicantForm(query) {
-  applicantFormSearchLoading.value = true;
-  try {
-    if (!allUsersCache.value.length) {
-      await loadUserPool();
-    }
-    applicantFormOptions.value = filterUsersByQuery(query);
-  } finally {
-    applicantFormSearchLoading.value = false;
+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 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] || "" };
+}
+
+/** 鎸夎捣姝㈡椂闂磋绠楀姞鐝椂闀匡紙灏忔椂锛屼繚鐣欎袱浣嶅皬鏁帮級 */
+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} 灏忔椂`;
+}
+
+function mapStorageBlobsToAttachmentList(blobs) {
+  return (blobs || []).map((f) => ({
+    name: attachmentDisplayName(f),
+    url: f.url || f.downloadURL || f.previewURL || f.previewUrl,
+  }));
+}
+
+function rowAttachmentList(row) {
+  if (!row) return [];
+  if (row.attachmentList?.length) return row.attachmentList;
+  return mapStorageBlobsToAttachmentList(row.storageBlobDTOs);
+}
+
+function approvalResultLabel(v) {
+  if (v === "approved") return "宸查�氳繃";
+  if (v === "rejected") return "宸查┏鍥�";
+  if (v === "cancelled") return "宸叉挙閿�";
+  return "寰呭鎵�";
+}
+
+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();
+  return name || "鏈�夋嫨瀹℃壒浜�";
+}
+
+/** 璇︽儏瀹℃壒娴佺▼锛氫紭鍏堟ā鏉� flowNodes锛屽吋瀹规棫鐗� approvalFlowNodes */
+function detailFlowSteps(row) {
+  const nodes = row?.flowNodes;
+  if (Array.isArray(nodes) && nodes.length) {
+    return [...nodes]
+      .sort((a, b) => (a.nodeOrder ?? 0) - (b.nodeOrder ?? 0))
+      .map((n, i) => {
+        const names = (n.approvers || [])
+          .map((a) => (a.approverName || "").trim())
+          .filter(Boolean)
+          .join("銆�");
+        return `${i + 1}. ${names || "鏈�夋嫨瀹℃壒浜�"}`;
+      });
   }
+  return sortedApprovalNodes(row).map((n, i) => `${i + 1}. ${approvalNodeLabel(n)}`);
 }
 
-function onApplicantChange(uid) {
+function syncApplicantFromUser(uid) {
   const u = userById(uid);
   if (u) {
+    form.applicantId = uid != null && uid !== "" ? uid : "";
     form.applicantName = u.nickName || u.userName || "";
     form.applicantNo = applicantNoFromUser(u);
   } else {
+    form.applicantId = "";
     form.applicantName = "";
     form.applicantNo = "";
+  }
+}
+
+const allUsersCache = ref([]);
+
+async function loadUserPool() {
+  try {
+    const res = await userListNoPageByTenantId();
+    allUsersCache.value = unwrapArray(res);
+  } catch {
+    allUsersCache.value = [];
   }
 }
 
@@ -511,77 +466,60 @@
 });
 const formRef = ref();
 const form = reactive(createEmptyForm());
+const templateBindVisible = ref(false);
+const pendingTemplateBinding = ref(null);
+const { flowUserOptions, loadFlowUsers } = useFlowUserOptions();
 
-const flowUserOptions = computed(() => allUsersCache.value.filter((u) => isActiveUser(u)));
+const overtimeTimeTemplateField = computed(() => findOvertimeTimeTemplateField(form.formFieldDefs));
+const applicantTemplateField = computed(() => findApplicantTemplateField(form.formFieldDefs));
+
+const templateDisplayFields = computed(() =>
+  (form.formFieldDefs || []).filter((f) => !isOvertimeHoursField(f))
+);
 
 const overtimeHoursDisplay = computed(() => {
-  const h = computeOvertimeHours(form.overtimeStartTime, form.overtimeEndTime);
+  const { start, end } = resolveOvertimeTimeRange(form.formPayload, overtimeTimeTemplateField.value);
+  const h = computeOvertimeHours(start, end);
   return h == null ? "" : String(h);
 });
 
-function onOvertimeRangeChange() {
-  nextTick(() => {
-    formRef.value?.validateField?.("overtimeEndTime");
-  });
-}
+const formRules = computed(() => buildFormPayloadRules(templateDisplayFields.value));
 
-function onApprovalFlowChange() {
-  nextTick(() => formRef.value?.validateField?.("approvalFlowNodes"));
-}
+watch(
+  () => {
+    const key = applicantTemplateField.value?.key;
+    return key ? form.formPayload[key] : undefined;
+  },
+  async (uid) => {
+    if (!applicantTemplateField.value) return;
+    if (!allUsersCache.value.length) {
+      await loadUserPool();
+    }
+    syncApplicantFromUser(uid);
+  }
+);
 
-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",
-    },
-  ],
-};
+watch(
+  () => {
+    const key = overtimeTimeTemplateField.value?.key;
+    return key ? form.formPayload[key] : undefined;
+  },
+  () => {
+    const { start, end } = resolveOvertimeTimeRange(form.formPayload, overtimeTimeTemplateField.value);
+    form.overtimeStartTime = start;
+    form.overtimeEndTime = end;
+    form.overtimeHours = computeOvertimeHours(start, end);
+    if (start) {
+      form.overtimeDate = dayjs(start).format("YYYY-MM-DD");
+    }
+  },
+  { deep: true }
+);
 
 const detailDialog = reactive({ visible: false });
 const detailRow = ref({});
 
 const filesDialog = reactive({ visible: false, row: null });
-
 const importInputRef = ref(null);
 
 function handleQuery() {
@@ -655,6 +593,7 @@
     overtimeEndTime: raw.overtimeEndTime ?? "",
     overtimeHours: hours == null || Number.isNaN(hours) ? 0 : Math.round(hours * 100) / 100,
     overtimeReason: raw.overtimeReason ?? "",
+    hasTemplateBinding: false,
     approvalFlowNodes: Array.isArray(raw.approvalFlowNodes) && raw.approvalFlowNodes.length
       ? raw.approvalFlowNodes.map((n) => ({ ...n }))
       : [],
@@ -695,12 +634,56 @@
   reader.readAsText(file, "utf-8");
 }
 
-async function openFormDialog(mode, row) {
-  formDialog.mode = mode;
-  formDialog.title = mode === "add" ? "鏂板鍔犵彮鐢宠" : "缂栬緫鍔犵彮鐢宠";
-  if (!allUsersCache.value.length) {
-    await loadUserPool();
+function openAddWithTemplate() {
+  formDialog.visible = false;
+  pendingTemplateBinding.value = null;
+  templateBindVisible.value = true;
+}
+
+function onTemplateBound(binding) {
+  pendingTemplateBinding.value = binding;
+}
+
+async function onTemplateBindClosed() {
+  const binding = pendingTemplateBinding.value;
+  if (!binding) return;
+  pendingTemplateBinding.value = null;
+  await openFormWithBinding(binding);
+}
+
+async function openFormWithBinding(binding) {
+  Object.assign(form, createEmptyForm());
+  applyBindingToForm(form, binding);
+  form.hasTemplateBinding = true;
+  formDialog.mode = "add";
+  formDialog.title = "鏂板鍔犵彮鐢宠";
+  await Promise.all([loadUserPool(), loadFlowUsers()]);
+  const applicantKey = applicantTemplateField.value?.key;
+  if (applicantKey && form.formPayload[applicantKey]) {
+    syncApplicantFromUser(form.formPayload[applicantKey]);
   }
+  const { start, end } = resolveOvertimeTimeRange(form.formPayload, overtimeTimeTemplateField.value);
+  form.overtimeStartTime = start;
+  form.overtimeEndTime = end;
+  form.overtimeHours = computeOvertimeHours(start, end);
+  if (start) form.overtimeDate = dayjs(start).format("YYYY-MM-DD");
+  formDialog.visible = true;
+  nextTick(() => formRef.value?.clearValidate?.());
+}
+
+function reopenTemplateBind() {
+  formDialog.visible = false;
+  pendingTemplateBinding.value = null;
+  templateBindVisible.value = true;
+}
+
+async function openFormDialog(mode, row) {
+  if (mode === "edit" && row && !row.hasTemplateBinding) {
+    proxy?.$modal?.msgWarning?.("璇ヨ褰曚负鏃х増鏁版嵁锛岃閲嶆柊閫氳繃妯℃澘鍙戣捣鐢宠");
+    return;
+  }
+  formDialog.mode = mode;
+  formDialog.title = "缂栬緫鍔犵彮鐢宠";
   Object.assign(form, createEmptyForm());
   if (mode === "edit" && row) {
     Object.assign(form, {
@@ -712,26 +695,24 @@
       overtimeDate: row.overtimeDate,
       overtimeStartTime: row.overtimeStartTime,
       overtimeEndTime: row.overtimeEndTime,
+      overtimeHours: row.overtimeHours,
       overtimeReason: row.overtimeReason,
-      attachmentList: JSON.parse(JSON.stringify(row.attachmentList || [])),
-      approvalFlowNodes: row.approvalFlowNodes?.length
-        ? JSON.parse(JSON.stringify(row.approvalFlowNodes))
-        : [],
+      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 || [])),
     });
-    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,
-        },
-      ];
+    await loadUserPool();
+    const applicantKey = applicantTemplateField.value?.key;
+    if (applicantKey) {
+      syncApplicantFromUser(form.formPayload[applicantKey]);
     }
-  } else {
-    remoteSearchApplicantForm("");
+    loadFlowUsers();
   }
   formDialog.visible = true;
   nextTick(() => formRef.value?.clearValidate?.());
@@ -741,17 +722,71 @@
   formRef.value?.resetFields?.();
 }
 
+/** 浠庢ā鏉垮～鎶ラ」鍚屾鍒楄〃灞曠ず瀛楁 */
+function syncOvertimeFieldsFromPayload() {
+  const defs = form.formFieldDefs || [];
+  const payload = form.formPayload || {};
+  const overtimeTimeField = findOvertimeTimeTemplateField(defs);
+
+  for (const f of defs) {
+    const label = String(f.label || "");
+    const val = payload[f.key];
+
+    if (label.includes("鐢宠浜�") && !label.includes("鏃ユ湡") && !label.includes("鏃堕棿")) {
+      if (val != null && val !== "") {
+        form.applicantId = val;
+        const u = userById(val);
+        if (u) {
+          form.applicantName = u.nickName || u.userName || "";
+          form.applicantNo = applicantNoFromUser(u);
+        }
+      }
+    }
+    if ((label.includes("鍔犵彮绫诲瀷") || f.key === "overtimeType") && f.type === "select") {
+      form.overtimeType = val != null && val !== "" ? val : "";
+    }
+    if (label.includes("鍔犵彮鏃ユ湡") && f.type === "date") {
+      form.overtimeDate = val || "";
+    }
+    if (label.includes("浜嬬敱") || f.key === "summary" || label.includes("鍔犵彮浜嬬敱")) {
+      form.overtimeReason = val != null ? String(val) : "";
+    }
+  }
+
+  const { start, end } = resolveOvertimeTimeRange(payload, overtimeTimeField);
+  form.overtimeStartTime = start;
+  form.overtimeEndTime = end;
+  form.overtimeHours = computeOvertimeHours(start, end);
+  if (!form.overtimeDate && start) {
+    form.overtimeDate = dayjs(start).format("YYYY-MM-DD");
+  }
+}
+
 async function submitForm() {
   try {
     await formRef.value?.validate?.();
   } catch {
     return;
   }
-  const hours = computeOvertimeHours(form.overtimeStartTime, form.overtimeEndTime);
-  if (hours == null) {
-    proxy?.$modal?.msgWarning?.("璇锋鏌ュ姞鐝捣姝㈡椂闂达紝缁撴潫鏃堕棿椤绘櫄浜庡紑濮嬫椂闂�");
+  const flowCheck = validateTemplateBinding({ flowNodes: form.flowNodes });
+  if (!flowCheck.ok) {
+    proxy?.$modal?.msgWarning?.(flowCheck.message || "璇峰畬鍠勫鎵规祦绋�");
     return;
   }
+  form.flowNodes = flowCheck.nodes;
+
+  const applicantKey = applicantTemplateField.value?.key;
+  if (applicantKey) {
+    syncApplicantFromUser(form.formPayload[applicantKey]);
+  }
+  syncOvertimeFieldsFromPayload();
+
+  if (form.overtimeHours == null) {
+    proxy?.$modal?.msgWarning?.("璇锋鏌ユā鏉夸腑鐨勫姞鐝椂闂达紝缁撴潫鏃堕棿椤绘櫄浜庡紑濮嬫椂闂�");
+    return;
+  }
+
+  const attachmentList = mapStorageBlobsToAttachmentList(form.storageBlobDTOs);
   const payload = {
     applicantId: form.applicantId,
     applicantNo: form.applicantNo,
@@ -760,18 +795,18 @@
     overtimeDate: form.overtimeDate,
     overtimeStartTime: form.overtimeStartTime,
     overtimeEndTime: form.overtimeEndTime,
-    overtimeHours: hours,
+    overtimeHours: form.overtimeHours,
     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 || [])),
+    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 || [])),
+    attachmentList,
   };
   if (formDialog.mode === "add") {
     const id = `local_${Date.now()}`;
@@ -800,6 +835,9 @@
   handleQuery();
 }
 
+onMounted(() => {
+  loadFlowUsers();
+});
 </script>
 
 <style scoped>
@@ -834,9 +872,6 @@
   white-space: nowrap;
   border: 0;
 }
-.upload-block {
-  width: 100%;
-}
 .mr6 {
   margin-right: 6px;
 }
@@ -849,14 +884,15 @@
 .overtime-apply-form :deep(.el-form-item) {
   margin-bottom: 18px;
 }
+.template-name {
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+.ml12 {
+  margin-left: 12px;
+}
 .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;
diff --git a/src/views/officeProcessAutomation/EnterpriseNews/news-manage/enterpriseNewsUtils.js b/src/views/officeProcessAutomation/EnterpriseNews/news-manage/enterpriseNewsUtils.js
index 462740e..9e74340 100644
--- a/src/views/officeProcessAutomation/EnterpriseNews/news-manage/enterpriseNewsUtils.js
+++ b/src/views/officeProcessAutomation/EnterpriseNews/news-manage/enterpriseNewsUtils.js
@@ -144,25 +144,19 @@
   return [];
 }
 
+/** 涓嶅啀浣跨敤鍓嶇鏈湴缂撳瓨锛屽垪琛ㄦ暟鎹互鎺ュ彛涓哄噯锛涘苟娓呴櫎鍘嗗彶 localStorage 鏁版嵁 */
 export function loadStoredNews() {
   try {
-    const raw = localStorage.getItem(STORAGE_KEY);
-    if (!raw) return null;
-    const data = JSON.parse(raw);
-    return Array.isArray(data) ? data : null;
-  } catch {
-    return null;
-  }
-}
-
-export function saveStoredNews(rows) {
-  try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(rows));
+    localStorage.removeItem(STORAGE_KEY);
   } catch {
     /* ignore */
   }
+  return [];
 }
 
+/** @deprecated 淇濈暀绌哄疄鐜帮紝閬垮厤鏃ц皟鐢ㄦ姤閿欙紱涓嶅仛浠讳綍鎸佷箙鍖� */
+export function saveStoredNews() {}
+
 /** 鎸夐槄璇昏寖鍥磋В鏋愮洰鏍囧彈浼� */
 export function resolveTargetAudience(row) {
   const scope = row.readScope || "all";
diff --git a/src/views/officeProcessAutomation/EnterpriseNews/news-manage/useEnterpriseNews.js b/src/views/officeProcessAutomation/EnterpriseNews/news-manage/useEnterpriseNews.js
index d040131..aeaa4ca 100644
--- a/src/views/officeProcessAutomation/EnterpriseNews/news-manage/useEnterpriseNews.js
+++ b/src/views/officeProcessAutomation/EnterpriseNews/news-manage/useEnterpriseNews.js
@@ -1,7 +1,7 @@
 import { Search } from "@element-plus/icons-vue";
 import dayjs from "dayjs";
 import { ElMessageBox } from "element-plus";
-import { computed, reactive, ref, watch } from "vue";
+import { computed, onMounted, reactive, ref, watch } from "vue";
 import {
   NEWS_TYPE_OPTIONS,
   PUBLISH_STATUS_OPTIONS,
@@ -11,7 +11,6 @@
   DEPT_OPTIONS,
   createEmptyForm,
   loadStoredNews,
-  saveStoredNews,
   getUnreadEmployees,
   readRate,
   nextNewsNo,
@@ -22,8 +21,7 @@
 } from "./enterpriseNewsUtils.js";
 
 export function useEnterpriseNews() {
-  const stored = loadStoredNews();
-  const allRows = ref(stored?.length ? stored : []);
+  const allRows = ref([]);
 
   const searchForm = reactive({
     keyword: "",
@@ -176,9 +174,9 @@
     },
   ]);
 
-  function persist() {
-    saveStoredNews(allRows.value);
-  }
+  onMounted(() => {
+    loadStoredNews();
+  });
 
   function handleQuery() {
     tableLoading.value = true;
@@ -255,7 +253,6 @@
       if (!hit.readRecords?.length) {
         hit.readRecords = [];
       }
-      persist();
       return true;
     } catch {
       return false;
@@ -306,7 +303,6 @@
       }
       allRows.value[idx] = { ...prev, ...payload };
     }
-    persist();
     formDialog.visible = false;
     return { ok: true };
   }
@@ -316,7 +312,6 @@
     if (hit) {
       hit.publishStatus = "archived";
       hit.updateTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
-      persist();
     }
   }
 
@@ -355,7 +350,6 @@
     });
     hit.readRecords = records;
     hit.updateTime = now;
-    persist();
     unreadDialog.visible = false;
     return { ok: true, count: selectedIds.length };
   }
@@ -370,7 +364,6 @@
     } else {
       hit.likes.push({ userId, name: userName, time: dayjs().format("YYYY-MM-DD HH:mm:ss") });
     }
-    persist();
     if (detailRow.value?.id === row.id) {
       detailRow.value = { ...hit };
     }
@@ -389,7 +382,6 @@
       content: text,
       time: dayjs().format("YYYY-MM-DD HH:mm:ss"),
     });
-    persist();
     if (detailRow.value?.id === row.id) {
       detailRow.value = { ...hit };
     }
diff --git a/src/views/officeProcessAutomation/HrManage/regular-apply/index.vue b/src/views/officeProcessAutomation/HrManage/regular-apply/index.vue
index 359e335..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: "",
@@ -255,162 +183,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 "浼氱";
@@ -522,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({});
@@ -587,16 +343,28 @@
 }
 
 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?.());
@@ -604,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, {
@@ -619,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?.());
@@ -639,16 +417,27 @@
   } 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()}`;
@@ -671,8 +460,29 @@
   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>
@@ -692,9 +502,6 @@
   font-size: 14px;
   color: var(--el-text-color-regular);
 }
-.upload-block {
-  width: 100%;
-}
 .mr6 {
   margin-right: 6px;
 }
@@ -707,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;
 }
diff --git a/src/views/officeProcessAutomation/HrManage/transfer-apply/index.vue b/src/views/officeProcessAutomation/HrManage/transfer-apply/index.vue
index 02fd505..854d945 100644
--- a/src/views/officeProcessAutomation/HrManage/transfer-apply/index.vue
+++ b/src/views/officeProcessAutomation/HrManage/transfer-apply/index.vue
@@ -38,7 +38,7 @@
         <el-button @click="resetSearch">閲嶇疆</el-button>
       </div>
       <div>
-        <el-button type="primary" @click="openFormDialog('add')">鏂板璋冨矖鐢宠</el-button>
+        <el-button type="primary" @click="openAddWithTemplate">鏂板璋冨矖鐢宠</el-button>
       </div>
     </div>
     <div class="table_list">
@@ -56,103 +56,49 @@
 
     <!-- 鏂板 / 缂栬緫 -->
     <el-dialog
+      v-if="formDialog.visible"
       v-model="formDialog.visible"
       :title="formDialog.title"
-      width="720px"
+      width="960px"
       append-to-body
       destroy-on-close
       class="transfer-apply-form-dialog"
       @closed="onFormClosed"
     >
-      <el-form ref="formRef" :model="form" :rules="formRules" label-width="120px" class="transfer-apply-form">
+      <el-form ref="formRef" :model="form" :rules="formRules" label-width="140px" class="transfer-apply-form">
+        <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="templateDisplayFields" :form-payload="form.formPayload" />
         <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="transferDate">
-              <el-date-picker
-                v-model="form.transferDate"
-                type="date"
-                placeholder="璇烽�夋嫨杞矖鏃ユ湡"
-                format="YYYY-MM-DD"
-                value-format="YYYY-MM-DD"
-                style="width: 100%"
-              />
-            </el-form-item>
-          </el-col>
           <el-col :span="12">
             <el-form-item label="鍘熷矖浣�" prop="originalPostName">
               <el-input v-model="form.originalPostName" placeholder="閫夋嫨鐢宠浜哄悗鑷姩甯﹀嚭" disabled />
             </el-form-item>
           </el-col>
         </el-row>
-        <el-row :gutter="24">
-          <el-col :span="24">
-            <el-form-item label="杞叆宀椾綅" prop="targetPostId">
-              <el-select v-model="form.targetPostId" placeholder="璇烽�夋嫨杞叆宀椾綅" clearable filterable style="width: 100%">
-                <el-option
-                  v-for="p in targetPostOptions"
-                  :key="p.postId"
-                  :label="p.postName"
-                  :value="p.postId"
-                  :disabled="p.status === '1' || p.status === 1"
-                />
-              </el-select>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="24">
-          <el-col :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>
-        <el-row :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>
+        <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">
@@ -161,6 +107,14 @@
         </div>
       </template>
     </el-dialog>
+
+    <ApprovalTemplateBindDialog
+      v-model:visible="templateBindVisible"
+      :module-key="APPROVAL_MODULE_KEYS.TRANSFER"
+      skip-form-confirm
+      @confirm="onTemplateBound"
+      @closed="onTemplateBindClosed"
+    />
 
     <!-- 璇︽儏 -->
     <el-dialog v-model="detailDialog.visible" title="璋冨矖鐢宠璇︽儏" width="560px" append-to-body>
@@ -184,8 +138,19 @@
 
 <script setup>
 import { findPostOptions } from "@/api/system/post.js";
-import { deptTreeSelect, userListNoPageByTenantId } from "@/api/system/user.js";
+import { 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";
+import { SELECT_OPTION_SOURCE } from "../../ApproveManage/approve-template/selectOptionSource.js";
 
 const { proxy } = getCurrentInstance();
 
@@ -199,10 +164,50 @@
   originalPostName: "",
   targetPostId: "",
   targetPostName: "",
-  approvalMode: "parallel",
-  approverIds: [],
-  approverNames: "",
+  hasTemplateBinding: false,
+  templateId: "",
+  templateName: "",
+  templateSnapshot: null,
+  formFieldDefs: [],
+  formPayload: {},
+  flowNodes: [],
+  templateAttachments: [],
+  storageBlobDTOs: [],
 });
+
+function isOriginalPostField(field) {
+  const label = String(field?.label || "");
+  return (
+    label.includes("鍘熷矖浣�") ||
+    field?.key === "originalPost" ||
+    field?.key === "originalPostName" ||
+    field?.key === "originalPostId"
+  );
+}
+
+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 syncApplicantFromUser(uid) {
+  const u = userById(uid);
+  if (u) {
+    form.applicantId = uid != null && uid !== "" ? uid : "";
+    form.applicantName = u.nickName || u.userName || "";
+    const { originalPostId, originalPostName } = resolveOriginalPost(u);
+    form.originalPostId = originalPostId;
+    form.originalPostName = originalPostName;
+  } else {
+    form.applicantId = "";
+    form.applicantName = "";
+    form.originalPostId = "";
+    form.originalPostName = "";
+  }
+}
 
 /** 绯荤粺鐢ㄦ埛缂撳瓨锛�/system/user/userListNoPageByTenantId锛屼笌杞鐢宠绛変竴鑷达級 */
 const allUsersCache = ref([]);
@@ -322,39 +327,6 @@
   }
 }
 
-/** 琛ㄥ崟鍐呯敵璇蜂汉涓嬫媺 */
-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 || "";
-    const { originalPostId, originalPostName } = resolveOriginalPost(u);
-    form.originalPostId = originalPostId;
-    form.originalPostName = originalPostName;
-  } else {
-    form.applicantName = "";
-    form.originalPostId = "";
-    form.originalPostName = "";
-  }
-}
-
-/** 瀹℃壒浜烘爲 */
-const approverTreeData = ref([]);
-const approverLabelMap = ref({});
 
 function unwrapArray(payload) {
   if (Array.isArray(payload)) return payload;
@@ -363,146 +335,10 @@
   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;
-}
-
-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}`,
-  };
-}
-
-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;
-    }
-  });
-}
-
-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 needFetchUsers = !allUsersCache.value.length;
-    const [deptRes, userRes] = await Promise.all([
-      deptTreeSelect(),
-      needFetchUsers ? userListNoPageByTenantId() : Promise.resolve(null),
-    ]);
-    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));
-    }
-    let users = needFetchUsers ? unwrapArray(userRes) : [...allUsersCache.value];
-    if (needFetchUsers && users.length) {
-      allUsersCache.value = users;
-    }
-    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) {
@@ -600,15 +436,33 @@
 });
 const formRef = ref();
 const form = reactive(createEmptyForm());
+const templateBindVisible = ref(false);
+const pendingTemplateBinding = ref(null);
+const { flowUserOptions, loadFlowUsers } = useFlowUserOptions();
 
-const formRules = {
-  applicantId: [{ required: true, message: "璇烽�夋嫨鐢宠浜�", trigger: "change" }],
-  transferDate: [{ required: true, message: "璇烽�夋嫨杞矖鏃ユ湡", trigger: "change" }],
-  originalPostName: [{ required: true, message: "鍘熷矖浣嶄笉鑳戒负绌�", trigger: "change" }],
-  targetPostId: [{ required: true, message: "璇烽�夋嫨杞叆宀椾綅", trigger: "change" }],
-  approvalMode: [{ required: true, message: "璇烽�夋嫨瀹℃壒鏂瑰紡", trigger: "change" }],
-  approverIds: [{ type: "array", required: true, message: "璇烽�夋嫨瀹℃壒浜�", trigger: "change" }],
-};
+const templateDisplayFields = computed(() =>
+  (form.formFieldDefs || []).filter((f) => !isOriginalPostField(f))
+);
+
+const applicantTemplateField = computed(() => findApplicantTemplateField(form.formFieldDefs));
+
+const formRules = computed(() => ({
+  ...buildFormPayloadRules(templateDisplayFields.value),
+  originalPostName: [{ required: true, message: "璇烽�夋嫨鐢宠浜轰互甯﹀嚭鍘熷矖浣�", trigger: "change" }],
+}));
+
+watch(
+  () => {
+    const key = applicantTemplateField.value?.key;
+    return key ? form.formPayload[key] : undefined;
+  },
+  async (uid) => {
+    if (!allUsersCache.value.length) {
+      await loadUserPool();
+    }
+    syncApplicantFromUser(uid);
+  }
+);
 
 const detailDialog = reactive({ visible: false });
 const detailRow = ref({});
@@ -638,29 +492,53 @@
   detailDialog.visible = true;
 }
 
-function ensureApplicantInFormOptions(row) {
-  if (!row?.applicantId) return;
-  const id = String(row.applicantId);
-  if (!applicantFormOptions.value.some((u) => String(u.userId ?? u.id) === id)) {
-    applicantFormOptions.value = [
-      {
-        userId: row.applicantId,
-        nickName: row.applicantName,
-        userName: row.applicantUserName,
-      },
-      ...applicantFormOptions.value,
-    ];
+function openAddWithTemplate() {
+  formDialog.visible = false;
+  pendingTemplateBinding.value = null;
+  templateBindVisible.value = true;
+}
+
+function onTemplateBound(binding) {
+  pendingTemplateBinding.value = binding;
+}
+
+async function onTemplateBindClosed() {
+  const binding = pendingTemplateBinding.value;
+  if (!binding) return;
+  pendingTemplateBinding.value = null;
+  await openFormWithBinding(binding);
+}
+
+async function openFormWithBinding(binding) {
+  Object.assign(form, createEmptyForm());
+  applyBindingToForm(form, binding);
+  form.hasTemplateBinding = true;
+  formDialog.mode = "add";
+  formDialog.title = "鏂板璋冨矖鐢宠";
+  await Promise.all([loadUserPool(), loadPostOptions(), loadFlowUsers()]);
+  const applicantKey = applicantTemplateField.value?.key;
+  if (applicantKey && form.formPayload[applicantKey]) {
+    syncApplicantFromUser(form.formPayload[applicantKey]);
   }
+  formDialog.visible = true;
+  nextTick(() => formRef.value?.clearValidate?.());
+}
+
+function reopenTemplateBind() {
+  formDialog.visible = false;
+  pendingTemplateBinding.value = null;
+  templateBindVisible.value = true;
 }
 
 async 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());
-  await remoteSearchApplicantForm("");
   if (mode === "edit" && row) {
-    ensureApplicantInFormOptions(row);
     Object.assign(form, {
       id: row.id,
       applicantId: row.applicantId,
@@ -670,10 +548,22 @@
       originalPostName: row.originalPostName,
       targetPostId: row.targetPostId,
       targetPostName: row.targetPostName,
-      approvalMode: row.approvalMode,
-      approverIds: (row.approverIds || []).map((id) => String(id)),
-      approverNames: row.approverNames,
+      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 || [])),
     });
+    await loadUserPool();
+    const applicantKey = applicantTemplateField.value?.key;
+    if (applicantKey) {
+      syncApplicantFromUser(form.formPayload[applicantKey]);
+    }
+    loadFlowUsers();
   }
   formDialog.visible = true;
   nextTick(() => formRef.value?.clearValidate?.());
@@ -689,7 +579,17 @@
   } 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;
+  const applicantKey = applicantTemplateField.value?.key;
+  if (applicantKey) {
+    syncApplicantFromUser(form.formPayload[applicantKey]);
+  }
+  syncTransferFieldsFromPayload();
   form.targetPostName = targetPostNameById(form.targetPostId);
   const payload = {
     applicantId: form.applicantId,
@@ -699,9 +599,15 @@
     originalPostName: form.originalPostName,
     targetPostId: form.targetPostId,
     targetPostName: form.targetPostName,
-    approvalMode: form.approvalMode,
-    approverIds: [...form.approverIds],
-    approverNames: form.approverNames,
+    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()}`;
@@ -727,10 +633,27 @@
   handleQuery();
 }
 
+/** 浠庢ā鏉垮～鎶ラ」鍚屾杞矖鏃ユ湡銆佽浆鍏ュ矖浣嶅埌鍒楄〃瀛楁 */
+function syncTransferFieldsFromPayload() {
+  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("鏃ユ湡") || label.includes("鏃堕棿")) && f.type === "date") {
+      form.transferDate = val || "";
+    }
+    if (label.includes("杞叆宀椾綅") && f.type === "select") {
+      form.targetPostId = val != null && val !== "" ? val : "";
+      form.targetPostName = targetPostNameById(form.targetPostId);
+    }
+  }
+}
+
 onMounted(async () => {
   await Promise.all([loadUserPool(), loadPostOptions()]);
   rebuildPostIdMap();
-  loadApproverTree();
+  loadFlowUsers();
   await remoteSearchApplicant("");
 });
 </script>
@@ -759,4 +682,11 @@
 .transfer-apply-form-dialog :deep(.el-dialog__body) {
   padding-top: 12px;
 }
+.template-name {
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+.ml12 {
+  margin-left: 12px;
+}
 </style>
diff --git a/src/views/officeProcessAutomation/HrManage/work-handover/index.vue b/src/views/officeProcessAutomation/HrManage/work-handover/index.vue
index ddf6acd..ed2e8d0 100644
--- a/src/views/officeProcessAutomation/HrManage/work-handover/index.vue
+++ b/src/views/officeProcessAutomation/HrManage/work-handover/index.vue
@@ -34,7 +34,7 @@
         <el-button @click="resetSearch">閲嶇疆</el-button>
       </div>
       <div>
-        <el-button type="primary" @click="openFormDialog('add')">鏂板宸ヤ綔浜ゆ帴</el-button>
+        <el-button type="primary" @click="openAddWithTemplate">鏂板宸ヤ綔浜ゆ帴</el-button>
       </div>
     </div>
     <div class="table_list">
@@ -52,122 +52,41 @@
 
     <!-- 鏂板 / 缂栬緫 -->
     <el-dialog
+      v-if="formDialog.visible"
       v-model="formDialog.visible"
       :title="formDialog.title"
-      width="720px"
+      width="960px"
       append-to-body
       destroy-on-close
       class="work-handover-form-dialog"
       @closed="onFormClosed"
     >
-      <el-form ref="formRef" :model="form" :rules="formRules" label-width="120px" class="work-handover-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="leaveDate">
-              <el-date-picker
-                v-model="form.leaveDate"
-                type="date"
-                placeholder="璇烽�夋嫨绂昏亴鏃ユ湡"
-                format="YYYY-MM-DD"
-                value-format="YYYY-MM-DD"
-                style="width: 100%"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="浜ゆ帴鐘舵��" prop="handoverStatus">
-              <el-select v-model="form.handoverStatus" placeholder="璇烽�夋嫨浜ゆ帴鐘舵��" style="width: 100%">
-                <el-option v-for="o in handoverStatusOptions" :key="o.value" :label="o.label" :value="o.value" />
-              </el-select>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="24">
-          <el-col :span="12">
-            <el-form-item label="浜ゆ帴绫诲瀷" prop="handoverType">
-              <el-select v-model="form.handoverType" placeholder="璇烽�夋嫨浜ゆ帴绫诲瀷" style="width: 100%">
-                <el-option v-for="o in handoverTypeOptions" :key="o.value" :label="o.label" :value="o.value" />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="浜ゆ帴浜�" prop="handoverPersonId">
-              <el-select
-                v-model="form.handoverPersonId"
-                filterable
-                remote
-                clearable
-                reserve-keyword
-                placeholder="璇烽�夋嫨鎴栨悳绱氦鎺ヤ汉"
-                style="width: 100%"
-                :remote-method="remoteSearchHandoverPerson"
-                :loading="handoverPersonSearchLoading"
-                @change="onHandoverPersonChange"
-              >
-                <el-option
-                  v-for="u in handoverPersonOptions"
-                  :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="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>
-        <el-row :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-form ref="formRef" :model="form" :rules="formRules" label-width="140px" class="work-handover-form">
+        <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" :columns="2" />
+        <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">
@@ -176,6 +95,14 @@
         </div>
       </template>
     </el-dialog>
+
+    <ApprovalTemplateBindDialog
+      v-model:visible="templateBindVisible"
+      :module-key="APPROVAL_MODULE_KEYS.WORK_HANDOVER"
+      skip-form-confirm
+      @confirm="onTemplateBound"
+      @closed="onTemplateBindClosed"
+    />
 
     <!-- 璇︽儏 -->
     <el-dialog v-model="detailDialog.visible" title="宸ヤ綔浜ゆ帴璇︽儏" width="560px" append-to-body>
@@ -199,8 +126,18 @@
 </template>
 
 <script setup>
-import { deptTreeSelect, userListNoPageByTenantId } from "@/api/system/user.js";
+import { 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";
 
 const { proxy } = getCurrentInstance();
 
@@ -233,9 +170,15 @@
   handoverType: "resignation",
   handoverPersonId: "",
   handoverPersonName: "",
-  approvalMode: "parallel",
-  approverIds: [],
-  approverNames: "",
+  hasTemplateBinding: false,
+  templateId: "",
+  templateName: "",
+  templateSnapshot: null,
+  formFieldDefs: [],
+  formPayload: {},
+  flowNodes: [],
+  templateAttachments: [],
+  storageBlobDTOs: [],
 });
 
 const allUsersCache = ref([]);
@@ -288,49 +231,6 @@
   }
 }
 
-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);
-  form.applicantName = u ? u.nickName || u.userName || "" : "";
-}
-
-const handoverPersonSearchLoading = ref(false);
-const handoverPersonOptions = ref([]);
-
-async function remoteSearchHandoverPerson(query) {
-  handoverPersonSearchLoading.value = true;
-  try {
-    if (!allUsersCache.value.length) {
-      await loadUserPool();
-    }
-    handoverPersonOptions.value = filterUsersByQuery(query);
-  } finally {
-    handoverPersonSearchLoading.value = false;
-  }
-}
-
-function onHandoverPersonChange(uid) {
-  const u = userById(uid);
-  form.handoverPersonName = u ? u.nickName || u.userName || "" : "";
-}
-
-const approverTreeData = ref([]);
-const approverLabelMap = ref({});
-
 function unwrapArray(payload) {
   if (Array.isArray(payload)) return payload;
   if (payload && Array.isArray(payload.data)) return payload.data;
@@ -338,146 +238,10 @@
   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;
-}
-
-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}`,
-  };
-}
-
-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;
-    }
-  });
-}
-
-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 needFetchUsers = !allUsersCache.value.length;
-    const [deptRes, userRes] = await Promise.all([
-      deptTreeSelect(),
-      needFetchUsers ? userListNoPageByTenantId() : Promise.resolve(null),
-    ]);
-    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));
-    }
-    let users = needFetchUsers ? unwrapArray(userRes) : [...allUsersCache.value];
-    if (needFetchUsers && users.length) {
-      allUsersCache.value = users;
-    }
-    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) {
@@ -602,16 +366,11 @@
 });
 const formRef = ref();
 const form = reactive(createEmptyForm());
+const templateBindVisible = ref(false);
+const pendingTemplateBinding = ref(null);
+const { flowUserOptions, loadFlowUsers } = useFlowUserOptions();
 
-const formRules = {
-  applicantId: [{ required: true, message: "璇烽�夋嫨鐢宠浜�", trigger: "change" }],
-  leaveDate: [{ required: true, message: "璇烽�夋嫨绂昏亴鏃ユ湡", trigger: "change" }],
-  handoverStatus: [{ required: true, message: "璇烽�夋嫨浜ゆ帴鐘舵��", trigger: "change" }],
-  handoverType: [{ required: true, message: "璇烽�夋嫨浜ゆ帴绫诲瀷", trigger: "change" }],
-  handoverPersonId: [{ required: true, message: "璇烽�夋嫨浜ゆ帴浜�", trigger: "change" }],
-  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({});
@@ -642,31 +401,83 @@
   detailDialog.visible = true;
 }
 
-function ensureUserInOptions(optionsRef, row, idKey, nameKey) {
-  const id = row?.[idKey];
-  if (id == null || id === "") return;
-  const sid = String(id);
-  if (!optionsRef.value.some((u) => String(u.userId ?? u.id) === sid)) {
-    optionsRef.value = [
-      {
-        userId: id,
-        nickName: row[nameKey],
-        userName: row.applicantUserName,
-      },
-      ...optionsRef.value,
-    ];
+function openAddWithTemplate() {
+  formDialog.visible = false;
+  pendingTemplateBinding.value = null;
+  templateBindVisible.value = true;
+}
+
+function onTemplateBound(binding) {
+  pendingTemplateBinding.value = binding;
+}
+
+async function onTemplateBindClosed() {
+  const binding = pendingTemplateBinding.value;
+  if (!binding) return;
+  pendingTemplateBinding.value = null;
+  await openFormWithBinding(binding);
+}
+
+async function openFormWithBinding(binding) {
+  Object.assign(form, createEmptyForm());
+  applyBindingToForm(form, binding);
+  form.hasTemplateBinding = true;
+  formDialog.mode = "add";
+  formDialog.title = "鏂板宸ヤ綔浜ゆ帴";
+  await Promise.all([loadUserPool(), loadFlowUsers()]);
+  await syncHandoverFieldsFromPayload();
+  formDialog.visible = true;
+  nextTick(() => formRef.value?.clearValidate?.());
+}
+
+function reopenTemplateBind() {
+  formDialog.visible = false;
+  pendingTemplateBinding.value = null;
+  templateBindVisible.value = true;
+}
+
+function syncApplicantFromUser(uid) {
+  const u = userById(uid);
+  form.applicantId = uid != null && uid !== "" ? uid : "";
+  form.applicantName = u ? u.nickName || u.userName || "" : "";
+}
+
+function syncHandoverPersonFromUser(uid) {
+  const u = userById(uid);
+  form.handoverPersonId = uid != null && uid !== "" ? uid : "";
+  form.handoverPersonName = u ? u.nickName || u.userName || "" : "";
+}
+
+/** 浠庢ā鏉垮～鎶ラ」鍚屾鍒楄〃灞曠ず瀛楁 */
+async function syncHandoverFieldsFromPayload() {
+  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("浜ゆ帴浜�")) {
+      syncApplicantFromUser(val);
+    } else if (label.includes("浜ゆ帴浜�")) {
+      syncHandoverPersonFromUser(val);
+    } else if (label.includes("绂昏亴") && f.type === "date") {
+      form.leaveDate = val || "";
+    } else if (label.includes("浜ゆ帴鐘舵��")) {
+      form.handoverStatus = val != null && val !== "" ? val : form.handoverStatus;
+    } else if (label.includes("浜ゆ帴绫诲瀷")) {
+      form.handoverType = val != null && val !== "" ? val : form.handoverType;
+    }
   }
 }
 
 async 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());
-  await Promise.all([remoteSearchApplicantForm(""), remoteSearchHandoverPerson("")]);
   if (mode === "edit" && row) {
-    ensureUserInOptions(applicantFormOptions, row, "applicantId", "applicantName");
-    ensureUserInOptions(handoverPersonOptions, row, "handoverPersonId", "handoverPersonName");
     Object.assign(form, {
       id: row.id,
       applicantId: row.applicantId,
@@ -676,10 +487,19 @@
       handoverType: row.handoverType,
       handoverPersonId: row.handoverPersonId,
       handoverPersonName: row.handoverPersonName,
-      approvalMode: row.approvalMode,
-      approverIds: (row.approverIds || []).map((id) => String(id)),
-      approverNames: row.approverNames,
+      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 || [])),
     });
+    await loadUserPool();
+    await syncHandoverFieldsFromPayload();
+    loadFlowUsers();
   }
   formDialog.visible = true;
   nextTick(() => formRef.value?.clearValidate?.());
@@ -695,7 +515,13 @@
   } 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;
+  await syncHandoverFieldsFromPayload();
   const payload = {
     applicantId: form.applicantId,
     applicantName: form.applicantName,
@@ -704,9 +530,15 @@
     handoverType: form.handoverType,
     handoverPersonId: form.handoverPersonId,
     handoverPersonName: form.handoverPersonName,
-    approvalMode: form.approvalMode,
-    approverIds: [...form.approverIds],
-    approverNames: form.approverNames,
+    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()}`;
@@ -734,7 +566,7 @@
 
 onMounted(async () => {
   await loadUserPool();
-  loadApproverTree();
+  loadFlowUsers();
   await remoteSearchApplicant("");
 });
 </script>
@@ -763,4 +595,11 @@
 .work-handover-form-dialog :deep(.el-dialog__body) {
   padding-top: 12px;
 }
+.template-name {
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+.ml12 {
+  margin-left: 12px;
+}
 </style>
diff --git a/src/views/officeProcessAutomation/NoticeAnnouncement/notice-manage/noticeAnnouncementUtils.js b/src/views/officeProcessAutomation/NoticeAnnouncement/notice-manage/noticeAnnouncementUtils.js
index 0f2b4ac..7f420c9 100644
--- a/src/views/officeProcessAutomation/NoticeAnnouncement/notice-manage/noticeAnnouncementUtils.js
+++ b/src/views/officeProcessAutomation/NoticeAnnouncement/notice-manage/noticeAnnouncementUtils.js
@@ -95,25 +95,19 @@
   return [];
 }
 
+/** 涓嶅啀浣跨敤鍓嶇鏈湴缂撳瓨锛屽垪琛ㄦ暟鎹互鎺ュ彛涓哄噯锛涘苟娓呴櫎鍘嗗彶 localStorage 鏁版嵁 */
 export function loadStoredNotices() {
   try {
-    const raw = localStorage.getItem(STORAGE_KEY);
-    if (!raw) return null;
-    const data = JSON.parse(raw);
-    return Array.isArray(data) ? data : null;
-  } catch {
-    return null;
-  }
-}
-
-export function saveStoredNotices(rows) {
-  try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(rows));
+    localStorage.removeItem(STORAGE_KEY);
   } catch {
     /* ignore */
   }
+  return [];
 }
 
+/** @deprecated 淇濈暀绌哄疄鐜帮紝閬垮厤鏃ц皟鐢ㄦ姤閿欙紱涓嶅仛浠讳綍鎸佷箙鍖� */
+export function saveStoredNotices() {}
+
 export function nextNoticeNo() {
   return `NA${dayjs().format("YYYYMMDD")}${String(Math.floor(Math.random() * 9000) + 1000)}`;
 }
diff --git a/src/views/officeProcessAutomation/NoticeAnnouncement/notice-manage/useNoticeAnnouncement.js b/src/views/officeProcessAutomation/NoticeAnnouncement/notice-manage/useNoticeAnnouncement.js
index 0019252..1858fdb 100644
--- a/src/views/officeProcessAutomation/NoticeAnnouncement/notice-manage/useNoticeAnnouncement.js
+++ b/src/views/officeProcessAutomation/NoticeAnnouncement/notice-manage/useNoticeAnnouncement.js
@@ -1,7 +1,7 @@
 import { Search } from "@element-plus/icons-vue";
 import dayjs from "dayjs";
 import { ElMessageBox } from "element-plus";
-import { computed, reactive, ref, watch } from "vue";
+import { computed, onMounted, reactive, ref, watch } from "vue";
 import {
   NOTICE_TYPE_OPTIONS,
   PRIORITY_OPTIONS,
@@ -10,7 +10,6 @@
   DEPT_OPTIONS,
   createEmptyForm,
   loadStoredNotices,
-  saveStoredNotices,
   nextNoticeNo,
   validateNoticeForm,
   noticeTypeLabel,
@@ -20,8 +19,7 @@
 } from "./noticeAnnouncementUtils.js";
 
 export function useNoticeAnnouncement() {
-  const stored = loadStoredNotices();
-  const allRows = ref(stored?.length ? stored : []);
+  const allRows = ref([]);
 
   const searchForm = reactive({
     keyword: "",
@@ -151,9 +149,9 @@
     },
   ]);
 
-  function persist() {
-    saveStoredNotices(allRows.value);
-  }
+  onMounted(() => {
+    loadStoredNotices();
+  });
 
   function handleQuery() {
     tableLoading.value = true;
@@ -239,7 +237,6 @@
       }
       allRows.value[idx] = { ...prev, ...payload };
     }
-    persist();
     formDialog.visible = false;
     return { ok: true };
   }
@@ -258,7 +255,6 @@
       hit.publishTime = now;
       hit.updateTime = now;
       if (hit.noticeType === "emergency") hit.priority = "urgent";
-      persist();
       return true;
     } catch {
       return false;
@@ -276,7 +272,6 @@
       if (!hit) return;
       hit.publishStatus = "withdrawn";
       hit.updateTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
-      persist();
       return true;
     } catch {
       return false;
@@ -291,7 +286,6 @@
         cancelButtonText: "鍙栨秷",
       });
       allRows.value = allRows.value.filter((r) => r.id !== row.id);
-      persist();
       return true;
     } catch {
       return false;

--
Gitblit v1.9.3