From 352f7bbb74f1b6c57b3d3e576849d0565932fbd4 Mon Sep 17 00:00:00 2001
From: yyb <995253665@qq.com>
Date: 星期三, 20 五月 2026 16:50:36 +0800
Subject: [PATCH] 审批模板集成页面

---
 src/views/officeProcessAutomation/AttendManage/leave-apply/index.vue |  748 +++++++++------------------------------------------------
 1 files changed, 124 insertions(+), 624 deletions(-)

diff --git a/src/views/officeProcessAutomation/AttendManage/leave-apply/index.vue b/src/views/officeProcessAutomation/AttendManage/leave-apply/index.vue
index 7bd7b58..546ca87 100644
--- a/src/views/officeProcessAutomation/AttendManage/leave-apply/index.vue
+++ b/src/views/officeProcessAutomation/AttendManage/leave-apply/index.vue
@@ -10,13 +10,13 @@
           placeholder="濮撳悕鎴栫紪鍙�"
           clearable
           :prefix-icon="Search"
-          @keyup.enter="handleQuery"
+          @keyup.enter="onSearch"
         />
         <span class="search_title" style="margin-left: 12px">璇峰亣绫诲瀷锛�</span>
         <el-select v-model="searchForm.leaveType" placeholder="鍏ㄩ儴" clearable style="width: 180px">
           <el-option v-for="opt in LEAVE_TYPE_OPTIONS" :key="opt.value" :label="opt.label" :value="opt.value" />
         </el-select>
-        <el-button type="primary" style="margin-left: 10px" @click="handleQuery">鎼滅储</el-button>
+        <el-button type="primary" style="margin-left: 10px" @click="onSearch">鎼滅储</el-button>
         <el-button @click="resetSearch">閲嶇疆</el-button>
       </div>
       <div>
@@ -31,37 +31,27 @@
         :page="page"
         :isSelection="false"
         :tableLoading="tableLoading"
-        @pagination="pagination"
+        @pagination="onPagination"
         :total="page.total"
       />
     </div>
 
-    <!-- 鏂板 / 缂栬緫 -->
-    <el-dialog
-      v-if="formDialog.visible"
-      v-model="formDialog.visible"
-      :title="formDialog.title"
-      width="960px"
-      append-to-body
-      destroy-on-close
-      class="leave-apply-form-dialog"
-      @closed="onFormClosed"
+    <ApprovalInstanceSubmitDialog
+      v-model="submitDialog.visible"
+      :title="submitDialogTitle"
+      :form="submitForm"
+      :rules="submitFormRules"
+      :fields="submitFormFields"
+      :active-template="activeTemplate"
+      :user-options="flowUserOptions"
+      :is-edit="isSubmitEdit"
+      :saving="submitSaving"
+      :form-ref="submitFormRef"
+      flow-attachments-only
+      @submit="onSubmit"
     >
-      <el-form ref="formRef" :model="form" :rules="formRules" label-width="140px" class="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" />
+      <template #before="{ form, fields }">
+        <FormPayloadFields :fields="displayTemplateFields(fields)" :form-payload="form.formPayload" />
         <el-row :gutter="24">
           <el-col :span="12">
             <el-form-item label="鍋囨湡浣欓" prop="leaveBalanceDays">
@@ -79,32 +69,14 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="璇峰亣鏃堕暱">
-              <el-input :model-value="leaveDurationDisplay" readonly placeholder="鏍规嵁妯℃澘涓鍋囨椂闂磋嚜鍔ㄨ绠�">
+              <el-input :model-value="leaveDurationDisplay(form)" readonly placeholder="鏍规嵁妯℃澘涓鍋囨椂闂磋嚜鍔ㄨ绠�">
                 <template #append>澶�</template>
               </el-input>
             </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">
-          <el-button type="primary" @click="submitForm">纭� 瀹�</el-button>
-          <el-button @click="formDialog.visible = false">鍙� 娑�</el-button>
-        </div>
       </template>
-    </el-dialog>
+    </ApprovalInstanceSubmitDialog>
 
     <ApprovalTemplateBindDialog
       v-model:visible="templateBindVisible"
@@ -114,55 +86,12 @@
       @closed="onTemplateBindClosed"
     />
 
-    <!-- 璇︽儏 -->
-    <el-dialog v-model="detailDialog.visible" title="璇峰亣鐢宠璇︽儏" width="720px" append-to-body>
-      <el-descriptions :column="1" border>
-        <el-descriptions-item label="鐢宠浜虹紪鍙�">{{ detailRow.applicantNo || "鈥�" }}</el-descriptions-item>
-        <el-descriptions-item label="鐢宠浜�">{{ detailRow.applicantName }}</el-descriptions-item>
-        <el-descriptions-item label="璇峰亣绫诲瀷">{{ leaveTypeLabel(detailRow.leaveType) }}</el-descriptions-item>
-        <el-descriptions-item label="鍋囨湡浣欓">{{ formatBalance(detailRow.leaveBalanceDays) }}</el-descriptions-item>
-        <el-descriptions-item label="璇峰亣寮�濮嬫椂闂�">{{ detailRow.leaveStartTime || "鈥�" }}</el-descriptions-item>
-        <el-descriptions-item label="璇峰亣缁撴潫鏃堕棿">{{ detailRow.leaveEndTime || "鈥�" }}</el-descriptions-item>
-        <el-descriptions-item label="璇峰亣鏃堕暱">{{ formatDuration(detailRow.leaveDurationDays) }}</el-descriptions-item>
-        <el-descriptions-item label="璇峰亣浜嬬敱">{{ detailRow.leaveReason }}</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-item label="鍒涘缓鏃堕棿">{{ detailRow.createTime || "鈥�" }}</el-descriptions-item>
-        <el-descriptions-item label="闄勪欢">
-          <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>
-          <span v-else>鏃�</span>
-        </el-descriptions-item>
-      </el-descriptions>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="detailDialog.visible = false">鍏� 闂�</el-button>
-        </div>
-      </template>
-    </el-dialog>
-
-    <!-- 闄勪欢鍒楄〃 -->
-    <el-dialog v-model="filesDialog.visible" title="闄勪欢" width="520px" append-to-body>
-      <el-table v-if="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">
-          <template #default="{ row }">
-            <el-button link type="primary" @click="mockDownload(row)">涓嬭浇</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-empty v-else description="鏆傛棤闄勪欢" />
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="filesDialog.visible = false">鍏� 闂�</el-button>
-        </div>
-      </template>
-    </el-dialog>
+    <ApprovalInstanceDetailDialog
+      v-model="detailDialog.visible"
+      title="璇峰亣鐢宠璇︽儏"
+      :row="detailRow"
+      @edit="openEditFromDetail"
+    />
   </div>
 </template>
 
@@ -170,21 +99,18 @@
 import { Search } from "@element-plus/icons-vue";
 import dayjs from "dayjs";
 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 { 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 {
-  applyBindingToForm,
-  attachmentDisplayName,
-  buildFormPayloadRules,
-  validateTemplateBinding,
-} from "../../ApproveManage/approve-shared/approvalTemplateBindingUtils.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";
 
-/** 璇峰亣绫诲瀷锛坴alue 涓庡悗绔榻愬崰浣嶏級 */
 const LEAVE_TYPE_OPTIONS = [
   { label: "骞村亣", value: "annual" },
   { label: "鐥呭亣", value: "sick" },
@@ -196,70 +122,6 @@
   { label: "璋冧紤", value: "compensatory" },
 ];
 
-function leaveTypeLabel(v) {
-  const hit = LEAVE_TYPE_OPTIONS.find((x) => x.value === v);
-  return hit?.label || "鈥�";
-}
-
-/** 涓庡悗绔害瀹氬瓧娈碉紙鍗犱綅锛� */
-const createEmptyForm = () => ({
-  id: undefined,
-  applicantId: "",
-  applicantNo: "",
-  applicantName: "",
-  leaveType: "",
-  leaveBalanceDays: undefined,
-  leaveStartTime: "",
-  leaveEndTime: "",
-  leaveDurationDays: null,
-  leaveReason: "",
-  hasTemplateBinding: false,
-  templateId: "",
-  templateName: "",
-  templateSnapshot: null,
-  formFieldDefs: [],
-  formPayload: {},
-  flowNodes: [],
-  templateAttachments: [],
-  storageBlobDTOs: [],
-});
-
-const { proxy } = getCurrentInstance();
-
-function unwrapArray(payload) {
-  if (Array.isArray(payload)) return payload;
-  if (payload && Array.isArray(payload.data)) return payload.data;
-  if (payload && Array.isArray(payload.rows)) return payload.rows;
-  return [];
-}
-
-function isActiveUser(u) {
-  if (u.delFlag === "2" || u.delFlag === 2) return false;
-  if (u.status == null) return true;
-  return String(u.status) === "0";
-}
-
-function userById(id) {
-  if (id == null || id === "") return undefined;
-  return allUsersCache.value.find((u) => String(u.userId ?? u.id) === String(id));
-}
-
-function applicantNoFromUser(u) {
-  if (!u) return "";
-  return (
-    u.userName ??
-    u.userCode ??
-    u.jobNumber ??
-    u.workNo ??
-    (u.userId != null ? String(u.userId) : "")
-  );
-}
-
-/** 鍋囨湡浣欓锛堝鎺ヨ�冨嫟 API 鍓嶄笉灞曠ず鍋囨暟鎹級 */
-function mockLeaveBalance() {
-  return undefined;
-}
-
 function isLeaveBalanceField(field) {
   const label = String(field?.label || "");
   return label.includes("鍋囨湡浣欓") || field?.key === "leaveBalanceDays";
@@ -268,6 +130,10 @@
 function isLeaveDurationField(field) {
   const label = String(field?.label || "");
   return label.includes("璇峰亣鏃堕暱") || field?.key === "leaveDurationDays";
+}
+
+function displayTemplateFields(fields = []) {
+  return (fields || []).filter((f) => !isLeaveBalanceField(f) && !isLeaveDurationField(f));
 }
 
 function findLeaveTimeTemplateField(fields = []) {
@@ -287,7 +153,6 @@
   );
 }
 
-/** 浠庢ā鏉垮~鎶ラ」瑙f瀽璇峰亣璧锋鏃堕棿 */
 function resolveLeaveTimeRange(payload, leaveTimeField) {
   if (!leaveTimeField?.key) return { start: "", end: "" };
   const val = payload?.[leaveTimeField.key];
@@ -295,7 +160,6 @@
   return { start: val[0] || "", end: val[1] || "" };
 }
 
-/** 鎸夎捣姝㈡椂闂磋绠楄鍋囧ぉ鏁帮紙鍚椂鍒嗙锛岀粨鏋滀繚鐣欎袱浣嶅皬鏁帮級 */
 function computeLeaveDays(startStr, endStr) {
   if (!startStr || !endStr) return null;
   const t0 = dayjs(startStr);
@@ -305,61 +169,75 @@
   return Math.round(days * 100) / 100;
 }
 
-function formatDuration(v) {
-  if (v == null || v === "") return "鈥�";
-  return `${v} 澶ー;
+function leaveDurationDisplay(form) {
+  const leaveTimeField = findLeaveTimeTemplateField(form.formFieldDefs);
+  const { start, end } = resolveLeaveTimeRange(form.formPayload, leaveTimeField);
+  const d = computeLeaveDays(start, end);
+  return d == null ? "" : String(d);
 }
 
-function formatBalance(v) {
-  if (v == null || v === "") return "鈥�";
-  return `${v} 澶ー;
-}
+const searchForm = reactive({
+  applicantKeyword: "",
+  leaveType: "",
+});
 
-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 = "";
-    if (uid == null || uid === "") {
-      form.leaveBalanceDays = undefined;
-    }
+function validateLeaveBeforeSave() {
+  const leaveTimeField = findLeaveTimeTemplateField(submitForm.formFieldDefs);
+  const { start, end } = resolveLeaveTimeRange(submitForm.formPayload, leaveTimeField);
+  if (computeLeaveDays(start, end) == null) {
+    ElMessage.warning("璇锋鏌ユā鏉夸腑鐨勮鍋囨椂闂达紝缁撴潫鏃堕棿椤绘櫄浜庡紑濮嬫椂闂�");
+    throw new Error("invalid leave time");
   }
 }
 
-/** 绯荤粺鐢ㄦ埛缂撳瓨 */
+const mod = useApprovalInstanceModule({
+  moduleKey: APPROVAL_MODULE_KEYS.LEAVE,
+  beforeSave: validateLeaveBeforeSave,
+  extraFormRules: {
+    leaveBalanceDays: [{ required: true, message: "璇峰~鍐欏亣鏈熶綑棰�", trigger: "blur" }],
+  },
+});
+
+const {
+  tableData,
+  tableLoading,
+  page,
+  detailDialog,
+  detailRow,
+  submitDialog,
+  submitEditRow,
+  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 applicantTemplateField = computed(() =>
+  findApplicantTemplateField(submitForm.formFieldDefs)
+);
+
+function unwrapArray(payload) {
+  if (Array.isArray(payload)) return payload;
+  if (payload && Array.isArray(payload.data)) return payload.data;
+  return [];
+}
 
 async function loadUserPool() {
   try {
@@ -370,412 +248,56 @@
   }
 }
 
-const allRows = ref([]);
-
-const searchForm = reactive({
-  applicantKeyword: "",
-  leaveType: "",
-});
-
-const tableLoading = ref(false);
-const page = reactive({
-  current: 1,
-  size: 10,
-  total: 0,
-});
-
-const filteredList = computed(() => {
-  let list = [...allRows.value];
-  const kw = (searchForm.applicantKeyword || "").trim().toLowerCase();
-  if (kw) {
-    list = list.filter((r) => {
-      const name = (r.applicantName || "").toLowerCase();
-      const no = (r.applicantNo || "").toLowerCase();
-      return name.includes(kw) || no.includes(kw);
-    });
-  }
-  if (searchForm.leaveType) {
-    list = list.filter((r) => r.leaveType === searchForm.leaveType);
-  }
-  return list.sort((a, b) => (String(a.createTime) < String(b.createTime) ? 1 : -1));
-});
-
 watch(
-  filteredList,
-  (list) => {
-    page.total = list.length;
-    const maxPage = Math.max(1, Math.ceil(list.length / page.size) || 1);
-    if (page.current > maxPage) {
-      page.current = maxPage;
+  () => submitDialog.visible,
+  (v) => {
+    if (!v) return;
+    if (submitForm.leaveBalanceDays == null && isSubmitEdit.value) {
+      submitForm.leaveBalanceDays =
+        submitEditRow.value?.formPayload?.leaveBalanceDays ??
+        submitEditRow.value?.leaveBalanceDays;
     }
-  },
-  { immediate: true }
+    if (submitForm.leaveBalanceDays == null && !isSubmitEdit.value) {
+      submitForm.leaveBalanceDays = undefined;
+    }
+  }
 );
-
-const tableData = computed(() => {
-  const list = filteredList.value;
-  const start = (page.current - 1) * page.size;
-  return list.slice(start, start + page.size);
-});
-
-const tableColumn = ref([
-  { label: "鐢宠浜虹紪鍙�", prop: "applicantNo", width: 120 },
-  { label: "鐢宠浜�", prop: "applicantName", minWidth: 100 },
-  {
-    label: "璇峰亣绫诲瀷",
-    prop: "leaveType",
-    width: 100,
-    formatData: (v) => leaveTypeLabel(v),
-  },
-  {
-    label: "璇峰亣鏃堕暱",
-    prop: "leaveDurationDays",
-    width: 120,
-    formatData: (v) => (v == null || v === "" ? "鈥�" : `${v} 澶ー),
-  },
-  { label: "璇峰亣浜嬬敱", prop: "leaveReason", minWidth: 180 },
-  { label: "鍒涘缓鏃堕棿", prop: "createTime", width: 170 },
-  {
-    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: 220,
-    operation: [
-      {
-        name: "缂栬緫",
-        type: "text",
-        clickFun: (row) => openFormDialog("edit", row),
-      },
-      {
-        name: "鏌ョ湅璇︽儏",
-        type: "text",
-        clickFun: (row) => openDetail(row),
-      },
-      {
-        name: "闄勪欢",
-        type: "text",
-        clickFun: (row) => openFiles(row),
-      },
-    ],
-  },
-]);
-
-const formDialog = reactive({
-  visible: false,
-  title: "",
-  mode: "add",
-});
-const formRef = ref();
-const form = reactive(createEmptyForm());
-const 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 { start, end } = resolveLeaveTimeRange(form.formPayload, leaveTimeTemplateField.value);
-  const d = computeLeaveDays(start, end);
-  return d == null ? "" : String(d);
-});
-
-const formRules = computed(() => ({
-  ...buildFormPayloadRules(templateDisplayFields.value),
-  leaveBalanceDays: [
-    {
-      required: true,
-      message: "璇峰~鍐欏亣鏈熶綑棰�",
-      trigger: "blur",
-    },
-  ],
-}));
 
 watch(
   () => {
     const key = applicantTemplateField.value?.key;
-    return key ? form.formPayload[key] : undefined;
+    return key ? submitForm.formPayload[key] : undefined;
   },
   async (uid) => {
-    if (!applicantTemplateField.value) return;
-    if (!allUsersCache.value.length) {
-      await loadUserPool();
-    }
-    syncApplicantFromUser(uid);
+    if (!applicantTemplateField.value || !uid) return;
+    if (!allUsersCache.value.length) await loadUserPool();
   }
 );
 
-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 tableColumn = buildInstanceTableColumns(tableData, buildTableActions);
 
-const detailDialog = reactive({ visible: false });
-const detailRow = ref({});
-
-const filesDialog = reactive({ visible: false, row: null });
-
-function handleQuery() {
-  page.current = 1;
-  tableLoading.value = true;
-  setTimeout(() => {
-    tableLoading.value = false;
-  }, 150);
+function onSearch() {
+  handleQuery(searchForm);
 }
 
 function resetSearch() {
   searchForm.applicantKeyword = "";
   searchForm.leaveType = "";
-  handleQuery();
+  onSearch();
 }
 
-function pagination(obj) {
-  page.current = obj.page;
-  page.size = obj.limit;
+function onPagination(obj) {
+  pagination(obj, searchForm);
 }
 
-function openDetail(row) {
-  detailRow.value = { ...row };
-  detailDialog.visible = true;
+async function onSubmit() {
+  const ok = await submitInstanceForm({ skipValidate: true });
+  if (ok) ElMessage.success(isSubmitEdit.value ? "淇敼鎴愬姛" : "鎻愪氦鎴愬姛");
 }
 
-function openFiles(row) {
-  filesDialog.row = row;
-  filesDialog.visible = true;
-}
-
-function mockDownload(row) {
-  const url = row.url || row.downloadURL || row.previewURL || row.previewUrl;
-  if (url) {
-    window.open(url, "_blank");
-    return;
-  }
-  proxy?.$modal?.msgWarning?.("鏆傛棤涓嬭浇鍦板潃");
-}
-
-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, {
-      id: row.id,
-      applicantId: row.applicantId,
-      applicantNo: row.applicantNo,
-      applicantName: row.applicantName,
-      leaveType: row.leaveType,
-      leaveBalanceDays: row.leaveBalanceDays,
-      leaveStartTime: row.leaveStartTime,
-      leaveEndTime: row.leaveEndTime,
-      leaveDurationDays: row.leaveDurationDays,
-      leaveReason: row.leaveReason,
-      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?.());
-}
-
-function onFormClosed() {
-  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 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]);
-  }
-  syncLeaveFieldsFromPayload();
-
-  if (form.leaveDurationDays == null) {
-    proxy?.$modal?.msgWarning?.("璇锋鏌ユā鏉夸腑鐨勮鍋囨椂闂达紝缁撴潫鏃堕棿椤绘櫄浜庡紑濮嬫椂闂�");
-    return;
-  }
-
-  const attachmentList = mapStorageBlobsToAttachmentList(form.storageBlobDTOs);
-  const payload = {
-    applicantId: form.applicantId,
-    applicantNo: form.applicantNo,
-    applicantName: form.applicantName,
-    leaveType: form.leaveType,
-    leaveBalanceDays: form.leaveBalanceDays,
-    leaveStartTime: form.leaveStartTime,
-    leaveEndTime: form.leaveEndTime,
-    leaveDurationDays: form.leaveDurationDays,
-    leaveReason: form.leaveReason,
-    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()}`;
-    allRows.value.unshift({
-      id,
-      ...payload,
-      approvalResult: "pending",
-      createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
-    });
-    proxy?.$modal?.msgSuccess?.("鏂板鎴愬姛");
-  } else {
-    const idx = allRows.value.findIndex((r) => r.id === form.id);
-    if (idx !== -1) {
-      const prev = allRows.value[idx];
-      allRows.value[idx] = {
-        ...prev,
-        id: form.id,
-        ...payload,
-        approvalResult: prev.approvalResult ?? "pending",
-        createTime: prev.createTime ?? dayjs().format("YYYY-MM-DD HH:mm:ss"),
-      };
-    }
-    proxy?.$modal?.msgSuccess?.("淇濆瓨鎴愬姛");
-  }
-  formDialog.visible = false;
-  handleQuery();
-}
-
-onMounted(() => {
+onMounted(async () => {
   loadFlowUsers();
+  await initModuleList(searchForm);
 });
 </script>
 
@@ -793,27 +315,5 @@
 .search_title {
   font-size: 14px;
   color: var(--el-text-color-regular);
-}
-.mr6 {
-  margin-right: 6px;
-}
-.mb6 {
-  margin-bottom: 6px;
-}
-.leave-apply-form :deep(.el-row) {
-  margin-bottom: 0;
-}
-.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;
 }
 </style>

--
Gitblit v1.9.3