From a1df9699594b0a0e46d26a0394eafb1eb030c68b Mon Sep 17 00:00:00 2001
From: yyb <995253665@qq.com>
Date: 星期三, 20 五月 2026 17:42:09 +0800
Subject: [PATCH] 企业新闻

---
 src/views/officeProcessAutomation/HrManage/transfer-apply/index.vue |  784 ++++++++++++-------------------------------------------
 1 files changed, 172 insertions(+), 612 deletions(-)

diff --git a/src/views/officeProcessAutomation/HrManage/transfer-apply/index.vue b/src/views/officeProcessAutomation/HrManage/transfer-apply/index.vue
index 6b72316..4121157 100644
--- a/src/views/officeProcessAutomation/HrManage/transfer-apply/index.vue
+++ b/src/views/officeProcessAutomation/HrManage/transfer-apply/index.vue
@@ -34,11 +34,11 @@
           style="width: 260px"
           clearable
         />
-        <el-button type="primary" style="margin-left: 10px" @click="handleQuery">鎼滅储</el-button>
+        <el-button type="primary" style="margin-left: 10px" @click="onSearch">鎼滅储</el-button>
         <el-button @click="resetSearch">閲嶇疆</el-button>
       </div>
       <div>
-        <el-button type="primary" @click="openFormDialog('add')">鏂板璋冨矖鐢宠</el-button>
+        <el-button type="primary" @click="openAddWithTemplate">鏂板璋冨矖鐢宠</el-button>
       </div>
     </div>
     <div class="table_list">
@@ -49,184 +49,150 @@
         :page="page"
         :isSelection="false"
         :tableLoading="tableLoading"
-        @pagination="pagination"
+        @pagination="onPagination"
         :total="page.total"
       />
     </div>
 
-    <!-- 鏂板 / 缂栬緫 -->
-    <el-dialog
-      v-model="formDialog.visible"
-      :title="formDialog.title"
-      width="720px"
-      append-to-body
-      destroy-on-close
-      class="transfer-apply-form-dialog"
-      @closed="onFormClosed"
+    <ApprovalInstanceSubmitDialog
+      v-model="submitDialog.visible"
+      :title="submitDialogTitle"
+      :form="submitForm"
+      :rules="submitFormRules"
+      :fields="submitFormFields"
+      :active-template="activeTemplate"
+      :user-options="flowUserOptions"
+      :is-edit="isSubmitEdit"
+      :saving="submitSaving"
+      :form-ref="submitFormRef"
+      flow-attachments-only
+      @submit="onSubmit"
     >
-      <el-form ref="formRef" :model="form" :rules="formRules" label-width="120px" class="transfer-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="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>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">纭� 瀹�</el-button>
-          <el-button @click="formDialog.visible = false">鍙� 娑�</el-button>
-        </div>
+      <template #before="{ form, fields }">
+        <FormPayloadFields :fields="displayTemplateFields(fields)" :form-payload="form.formPayload" />
+        <el-form-item label="鍘熷矖浣�">
+          <el-input :model-value="originalPostName" placeholder="閫夋嫨鐢宠浜哄悗鑷姩甯﹀嚭" disabled />
+        </el-form-item>
       </template>
-    </el-dialog>
+    </ApprovalInstanceSubmitDialog>
 
-    <!-- 璇︽儏 -->
-    <el-dialog v-model="detailDialog.visible" title="璋冨矖鐢宠璇︽儏" width="560px" append-to-body>
-      <el-descriptions :column="1" border>
-        <el-descriptions-item label="鐢宠浜�">{{ detailRow.applicantName }}</el-descriptions-item>
-        <el-descriptions-item label="杞矖鏃ユ湡">{{ detailRow.transferDate }}</el-descriptions-item>
-        <el-descriptions-item label="鍘熷矖浣�">{{ detailRow.originalPostName }}</el-descriptions-item>
-        <el-descriptions-item label="杞叆宀椾綅">{{ detailRow.targetPostName }}</el-descriptions-item>
-        <el-descriptions-item label="瀹℃壒缁撴灉">{{ approvalResultLabel(detailRow.approvalResult) }}</el-descriptions-item>
-        <el-descriptions-item label="瀹℃壒鏂瑰紡">{{ approvalModeLabel(detailRow.approvalMode) }}</el-descriptions-item>
-        <el-descriptions-item label="瀹℃壒浜�">{{ detailRow.approverNames || "鈥�" }}</el-descriptions-item>
-      </el-descriptions>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="detailDialog.visible = false">鍏� 闂�</el-button>
-        </div>
-      </template>
-    </el-dialog>
+    <ApprovalTemplateBindDialog
+      v-model:visible="templateBindVisible"
+      :module-key="APPROVAL_MODULE_KEYS.TRANSFER"
+      skip-form-confirm
+      @confirm="onTemplateBound"
+      @closed="onTemplateBindClosed"
+    />
+
+    <ApprovalInstanceDetailDialog
+      v-model="detailDialog.visible"
+      title="璋冨矖鐢宠璇︽儏"
+      :row="detailRow"
+      @edit="openEditFromDetail"
+    />
   </div>
 </template>
 
 <script setup>
 import { findPostOptions } from "@/api/system/post.js";
-import { deptTreeSelect, userListNoPageByTenantId } from "@/api/system/user.js";
-import { computed, getCurrentInstance, nextTick, onMounted, reactive, ref, watch } from "vue";
+import { userListNoPageByTenantId } from "@/api/system/user.js";
+import { ElMessage } from "element-plus";
+import { computed, onMounted, reactive, ref, watch } from "vue";
+import FormPayloadFields from "../../ApproveManage/approve-list/components/FormPayloadFields.vue";
+import ApprovalInstanceDetailDialog from "../../ApproveManage/approve-shared/components/ApprovalInstanceDetailDialog.vue";
+import ApprovalInstanceSubmitDialog from "../../ApproveManage/approve-shared/components/ApprovalInstanceSubmitDialog.vue";
+import ApprovalTemplateBindDialog from "../../ApproveManage/approve-shared/components/ApprovalTemplateBindDialog.vue";
+import { buildInstanceTableColumns } from "../../ApproveManage/approve-shared/approvalInstanceFormConfigTable.js";
+import { APPROVAL_MODULE_KEYS } from "../../ApproveManage/approve-shared/approvalModuleRegistry.js";
+import { useApprovalInstanceModule } from "../../ApproveManage/approve-shared/useApprovalInstanceModule.js";
+import { useFlowUserOptions } from "../../ApproveManage/approve-shared/useFlowUserOptions.js";
+import { SELECT_OPTION_SOURCE } from "../../ApproveManage/approve-template/selectOptionSource.js";
 
-const { proxy } = getCurrentInstance();
-
-/** 涓庡悗绔害瀹氬瓧娈碉紙鏈湴鍗犱綅锛屽悗鏈熸帴鍙e榻愶級 */
-const createEmptyForm = () => ({
-  id: undefined,
-  applicantId: "",
-  applicantName: "",
-  transferDate: "",
-  originalPostId: "",
-  originalPostName: "",
-  targetPostId: "",
-  targetPostName: "",
-  approvalMode: "parallel",
-  approverIds: [],
-  approverNames: "",
-});
-
-/** 绯荤粺鐢ㄦ埛缂撳瓨锛�/system/user/userListNoPageByTenantId锛屼笌杞鐢宠绛変竴鑷达級 */
-const allUsersCache = ref([]);
-/** 宀椾綅瀛楀吀 postId -> postName锛�/system/post/optionselect锛屼笌鍛樺伐妗f鍏ヨ亴琛ㄥ崟涓�鑷达級 */
-const postIdToName = ref({});
-const targetPostOptions = ref([]);
-
-function rebuildPostIdMap() {
-  const m = {};
-  for (const p of targetPostOptions.value || []) {
-    const id = p.postId ?? p.value ?? p.id;
-    if (id != null && id !== "") m[String(id)] = p.postName ?? p.label ?? "";
-  }
-  postIdToName.value = m;
+function isOriginalPostField(field) {
+  const label = String(field?.label || "");
+  return (
+    label.includes("鍘熷矖浣�") ||
+    field?.key === "originalPost" ||
+    field?.key === "originalPostName" ||
+    field?.key === "originalPostId"
+  );
 }
 
-function targetPostNameById(postId) {
-  if (postId == null || postId === "") return "";
-  const k = String(postId);
+function displayTemplateFields(fields = []) {
+  return (fields || []).filter((f) => !isOriginalPostField(f));
+}
+
+function findApplicantTemplateField(fields = []) {
   return (
-    postIdToName.value[k] ||
-    targetPostOptions.value.find((x) => String(x.postId ?? x.id ?? x.value) === k)?.postName ||
-    ""
+    fields.find((f) => String(f?.label || "").includes("鐢宠浜�")) ||
+    fields.find((f) => f?.type === "select" && f?.optionSource === SELECT_OPTION_SOURCE.USER) ||
+    null
   );
+}
+
+const searchForm = reactive({
+  applicantId: "",
+  transferDateRange: null,
+});
+
+const mod = useApprovalInstanceModule({
+  moduleKey: APPROVAL_MODULE_KEYS.TRANSFER,
+  buildExtraListParams() {
+    return {};
+  },
+});
+
+const {
+  tableData,
+  tableLoading,
+  page,
+  detailDialog,
+  detailRow,
+  submitDialog,
+  submitForm,
+  submitFormRef,
+  submitSaving,
+  isSubmitEdit,
+  activeTemplate,
+  submitFormFields,
+  submitFormRules,
+  submitDialogTitle,
+  templateBindVisible,
+  handleQuery,
+  initModuleList,
+  pagination,
+  openAddWithTemplate,
+  onTemplateBound,
+  onTemplateBindClosed,
+  openEditFromDetail,
+  submitInstanceForm,
+  buildTableActions,
+} = mod;
+
+const { flowUserOptions, loadFlowUsers } = useFlowUserOptions();
+
+const allUsersCache = ref([]);
+const postIdToName = ref({});
+const targetPostOptions = ref([]);
+const applicantSearchLoading = ref(false);
+const applicantSearchOptions = ref([]);
+const originalPostName = ref("");
+
+const applicantTemplateField = computed(() =>
+  findApplicantTemplateField(submitForm.formFieldDefs)
+);
+
+function unwrapArray(payload) {
+  if (Array.isArray(payload)) return payload;
+  if (payload && Array.isArray(payload.data)) return payload.data;
+  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 userSelectLabel(u) {
@@ -243,30 +209,19 @@
   return undefined;
 }
 
-/** 浠庣敤鎴峰璞¤В鏋愩�屽師宀椾綅銆嶏紙鍏煎 postName / postIds / posts 绛夊父瑙佽繑鍥烇級 */
 function resolveOriginalPost(user) {
-  if (!user) return { originalPostId: "", originalPostName: "" };
+  if (!user) return { originalPostName: "" };
   const nameStr = (user.postName ?? user.postname ?? "").toString().trim();
-  if (nameStr) {
-    const pid = firstPostId(user);
-    return { originalPostId: pid != null && pid !== "" ? String(pid) : "", originalPostName: nameStr };
-  }
+  if (nameStr) return { originalPostName: nameStr };
   if (Array.isArray(user.posts) && user.posts.length) {
-    const p0 = user.posts[0];
-    return {
-      originalPostId: p0.postId != null ? String(p0.postId) : "",
-      originalPostName: (p0.postName ?? "").toString() || "鏈懡鍚嶅矖浣�",
-    };
+    return { originalPostName: (user.posts[0].postName ?? "").toString() || "鏈懡鍚嶅矖浣�" };
   }
   const pid = firstPostId(user);
   if (pid != null && pid !== "") {
     const n = postIdToName.value[String(pid)] || "";
-    return {
-      originalPostId: String(pid),
-      originalPostName: n || "褰撳墠宀椾綅锛堟湭鍦ㄥ矖浣嶅瓧鍏镐腑锛�",
-    };
+    return { originalPostName: n || "褰撳墠宀椾綅锛堟湭鍦ㄥ矖浣嶅瓧鍏镐腑锛�" };
   }
-  return { originalPostId: "", originalPostName: "鏈垎閰嶅矖浣�" };
+  return { originalPostName: "鏈垎閰嶅矖浣�" };
 }
 
 function userById(id) {
@@ -303,465 +258,79 @@
   } catch {
     targetPostOptions.value = [];
   }
-  rebuildPostIdMap();
+  const m = {};
+  for (const p of targetPostOptions.value) {
+    const id = p.postId ?? p.value ?? p.id;
+    if (id != null && id !== "") m[String(id)] = p.postName ?? p.label ?? "";
+  }
+  postIdToName.value = m;
 }
-
-/** 鏌ヨ鍖猴細涓嬫媺杩滅▼妯$硦锛堟暟鎹潵鑷� userListNoPageByTenantId锛屽墠绔繃婊わ級 */
-const applicantSearchLoading = ref(false);
-const applicantSearchOptions = ref([]);
 
 async function remoteSearchApplicant(query) {
   applicantSearchLoading.value = true;
   try {
-    if (!allUsersCache.value.length) {
-      await loadUserPool();
-    }
+    if (!allUsersCache.value.length) await loadUserPool();
     applicantSearchOptions.value = filterUsersByQuery(query);
   } finally {
     applicantSearchLoading.value = false;
   }
 }
 
-/** 琛ㄥ崟鍐呯敵璇蜂汉涓嬫媺 */
-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) {
+function syncOriginalPostFromApplicant(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 = "";
-  }
+  originalPostName.value = resolveOriginalPost(u).originalPostName;
 }
-
-/** 瀹℃壒浜烘爲 */
-const approverTreeData = ref([]);
-const approverLabelMap = ref({});
-
-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;
-}
-
-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) {
-  if (mode === "countersign") return "浼氱";
-  return "涓庣";
-}
-
-function approvalResultLabel(v) {
-  if (v === "approved") return "宸查�氳繃";
-  if (v === "rejected") return "宸查┏鍥�";
-  if (v === "cancelled") return "宸叉挙閿�";
-  return "寰呭鎵�";
-}
-
-/** 鏈湴妯℃嫙鍒楄〃鏁版嵁 */
-const allRows = ref([
-  {
-    id: "1",
-    applicantId: "1001",
-    applicantName: "鍛ㄦ槑",
-    transferDate: "2026-05-20",
-    originalPostId: "post_dev",
-    originalPostName: "杞欢寮�鍙戝伐绋嬪笀",
-    targetPostId: "post_senior_dev",
-    targetPostName: "楂樼骇杞欢寮�鍙戝伐绋嬪笀",
-    approvalResult: "pending",
-    approvalMode: "parallel",
-    approverIds: [],
-    approverNames: "",
-  },
-  {
-    id: "2",
-    applicantId: "1002",
-    applicantName: "鍚磋姵",
-    transferDate: "2026-05-10",
-    originalPostId: "post_pm",
-    originalPostName: "浜у搧缁忕悊",
-    targetPostId: "post_senior_pm",
-    targetPostName: "楂樼骇浜у搧缁忕悊",
-    approvalResult: "approved",
-    approvalMode: "countersign",
-    approverIds: [],
-    approverNames: "寮犱笁銆佹潕鍥�",
-  },
-]);
-
-const searchForm = reactive({
-  applicantId: "",
-  transferDateRange: null,
-});
-
-const tableLoading = ref(false);
-const page = reactive({
-  current: 1,
-  size: 10,
-  total: 0,
-});
-
-const filteredList = computed(() => {
-  let list = [...allRows.value];
-  if (searchForm.applicantId) {
-    list = list.filter((r) => String(r.applicantId) === String(searchForm.applicantId));
-  }
-  const range = searchForm.transferDateRange;
-  if (range && range.length === 2) {
-    const [start, end] = range;
-    list = list.filter((r) => r.transferDate >= start && r.transferDate <= end);
-  }
-  return list.sort((a, b) => (a.transferDate < b.transferDate ? 1 : -1));
-});
 
 watch(
-  filteredList,
-  (list) => {
-    page.total = list.length;
-    const maxPage = Math.max(1, Math.ceil(list.length / page.size) || 1);
-    if (page.current > maxPage) {
-      page.current = maxPage;
-    }
+  () => {
+    const key = applicantTemplateField.value?.key;
+    return key ? submitForm.formPayload[key] : undefined;
   },
-  { immediate: true }
+  async (uid) => {
+    if (!applicantTemplateField.value) return;
+    if (!allUsersCache.value.length) await loadUserPool();
+    syncOriginalPostFromApplicant(uid);
+  }
 );
 
-const tableData = computed(() => {
-  const list = filteredList.value;
-  const start = (page.current - 1) * page.size;
-  return list.slice(start, start + page.size);
-});
+watch(
+  () => submitDialog.visible,
+  async (v) => {
+    if (!v) return;
+    const key = applicantTemplateField.value?.key;
+    if (key && submitForm.formPayload[key]) {
+      syncOriginalPostFromApplicant(submitForm.formPayload[key]);
+    }
+  }
+);
 
-const tableColumn = ref([
-  { label: "鐢宠浜�", prop: "applicantName", minWidth: 100 },
-  { label: "杞矖鏃ユ湡", prop: "transferDate", width: 120 },
-  { label: "鍘熷矖浣�", prop: "originalPostName", minWidth: 140 },
-  { label: "杞叆宀椾綅", prop: "targetPostName", minWidth: 160 },
-  {
-    label: "瀹℃壒缁撴灉",
-    prop: "approvalResult",
-    width: 110,
-    dataType: "tag",
-    formatData: (v) => approvalResultLabel(v),
-    formatType: (v) => {
-      if (v === "approved") return "success";
-      if (v === "rejected") return "danger";
-      if (v === "cancelled") return "info";
-      return "warning";
-    },
-  },
-  {
-    dataType: "action",
-    label: "鎿嶄綔",
-    align: "center",
-    fixed: "right",
-    width: 180,
-    operation: [
-      { name: "缂栬緫", type: "text", clickFun: (row) => openFormDialog("edit", row) },
-      { name: "鏌ョ湅璇︽儏", type: "text", clickFun: (row) => openDetail(row) },
-    ],
-  },
-]);
+const tableColumn = buildInstanceTableColumns(tableData, buildTableActions);
 
-const formDialog = reactive({
-  visible: false,
-  title: "",
-  mode: "add",
-});
-const formRef = ref();
-const form = reactive(createEmptyForm());
-
-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 detailDialog = reactive({ visible: false });
-const detailRow = ref({});
-
-function handleQuery() {
-  page.current = 1;
-  tableLoading.value = true;
-  setTimeout(() => {
-    tableLoading.value = false;
-  }, 150);
+function onSearch() {
+  handleQuery(searchForm);
 }
 
 async function resetSearch() {
   searchForm.applicantId = "";
   searchForm.transferDateRange = null;
-  handleQuery();
+  onSearch();
   await remoteSearchApplicant("");
 }
 
-function pagination(obj) {
-  page.current = obj.page;
-  page.size = obj.limit;
+function onPagination(obj) {
+  pagination(obj, searchForm);
 }
 
-function openDetail(row) {
-  detailRow.value = { ...row };
-  detailDialog.visible = true;
-}
-
-function 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,
-    ];
-  }
-}
-
-async function openFormDialog(mode, row) {
-  formDialog.mode = mode;
-  formDialog.title = mode === "add" ? "鏂板璋冨矖鐢宠" : "缂栬緫璋冨矖鐢宠";
-  loadApproverTree();
-  Object.assign(form, createEmptyForm());
-  await remoteSearchApplicantForm("");
-  if (mode === "edit" && row) {
-    ensureApplicantInFormOptions(row);
-    Object.assign(form, {
-      id: row.id,
-      applicantId: row.applicantId,
-      applicantName: row.applicantName,
-      transferDate: row.transferDate,
-      originalPostId: row.originalPostId,
-      originalPostName: row.originalPostName,
-      targetPostId: row.targetPostId,
-      targetPostName: row.targetPostName,
-      approvalMode: row.approvalMode,
-      approverIds: (row.approverIds || []).map((id) => String(id)),
-      approverNames: row.approverNames,
-    });
-  }
-  formDialog.visible = true;
-  nextTick(() => formRef.value?.clearValidate?.());
-}
-
-function onFormClosed() {
-  formRef.value?.resetFields?.();
-}
-
-async function submitForm() {
-  try {
-    await formRef.value?.validate?.();
-  } catch {
-    return;
-  }
-  form.approverNames = resolveApproverNames(form.approverIds);
-  form.targetPostName = targetPostNameById(form.targetPostId);
-  const payload = {
-    applicantId: form.applicantId,
-    applicantName: form.applicantName,
-    transferDate: form.transferDate,
-    originalPostId: form.originalPostId,
-    originalPostName: form.originalPostName,
-    targetPostId: form.targetPostId,
-    targetPostName: form.targetPostName,
-    approvalMode: form.approvalMode,
-    approverIds: [...form.approverIds],
-    approverNames: form.approverNames,
-  };
-  if (formDialog.mode === "add") {
-    const id = `local_${Date.now()}`;
-    allRows.value.unshift({
-      id,
-      ...payload,
-      approvalResult: "pending",
-    });
-    proxy?.$modal?.msgSuccess?.("鏂板鎴愬姛锛堟湰鍦版ā鎷燂級");
-  } else {
-    const idx = allRows.value.findIndex((r) => r.id === form.id);
-    const prev = idx !== -1 ? allRows.value[idx] : {};
-    if (idx !== -1) {
-      allRows.value[idx] = {
-        ...prev,
-        id: form.id,
-        ...payload,
-      };
-    }
-    proxy?.$modal?.msgSuccess?.("淇濆瓨鎴愬姛锛堟湰鍦版ā鎷燂級");
-  }
-  formDialog.visible = false;
-  handleQuery();
+async function onSubmit() {
+  const ok = await submitInstanceForm({ skipValidate: true });
+  if (ok) ElMessage.success(isSubmitEdit.value ? "淇敼鎴愬姛" : "鎻愪氦鎴愬姛");
 }
 
 onMounted(async () => {
   await Promise.all([loadUserPool(), loadPostOptions()]);
-  rebuildPostIdMap();
-  loadApproverTree();
+  loadFlowUsers();
   await remoteSearchApplicant("");
+  await initModuleList(searchForm);
 });
 </script>
 
@@ -779,14 +348,5 @@
 .search_title {
   font-size: 14px;
   color: var(--el-text-color-regular);
-}
-.transfer-apply-form :deep(.el-row) {
-  margin-bottom: 0;
-}
-.transfer-apply-form :deep(.el-form-item) {
-  margin-bottom: 18px;
-}
-.transfer-apply-form-dialog :deep(.el-dialog__body) {
-  padding-top: 12px;
 }
 </style>

--
Gitblit v1.9.3