From dd7c9e2bb6d8e7338dc7fe5f8a22036307a85085 Mon Sep 17 00:00:00 2001
From: fuenmao <980740792@qq.com>
Date: Wed, 26 Aug 2026 15:30:02 +0800
Subject: [PATCH] 11

---
 src/api/modules/biz/onboarding.ts       |  15 +-
 src/views/biz/onboarding/task/index.vue | 509 +++++++++++++++++++-----
 src/views/onboarding/fill/index.vue     | 400 +++++++++++++++++--
 3 files changed, 771 insertions(+), 153 deletions(-)

diff --git a/src/api/modules/biz/onboarding.ts b/src/api/modules/biz/onboarding.ts
index 54a478d..cedf589 100644
--- a/src/api/modules/biz/onboarding.ts
+++ b/src/api/modules/biz/onboarding.ts
@@ -10,7 +10,12 @@ export interface OnboardingTask {
   taskNo: string;
   companyId: number;
   positionId: number;
+  onboardingTemplateId?: number;
+  companyName?: string;
+  positionName?: string;
+  onboardingTemplateName?: string;
   taskStatus: string;
+  rejectReason?: string;
   linkExpireAt?: string;
   submitCount: number;
   createTime: string;
@@ -87,7 +92,7 @@ export interface OnboardingTaskContractVariableItem {
   variableName: string;
   variableType: string;
   dataType: string;
-  variableValue?: string;
+  variableValue?: string | number;
   required: boolean;
   hrEditable: boolean;
   editable: boolean;
@@ -179,6 +184,10 @@ export const onboardingTaskApi = {
     return taskHttp.get("detail", params);
   },
 
+  getTaskLink(params: ReqId) {
+    return taskHttp.get<any>("get-link", params);
+  },
+
   /** 使用后台登录令牌读取文件流，供入职材料下载和图片预览使用。 */
   downloadFile(fileId: number) {
     return fileHttp.get<any>(
@@ -550,6 +559,10 @@ export const onboardingPublicApi = {
   contractSourceUrl(params: { token: string; taskContractId: number }) {
     return `/api/open/onboarding/contract-source?token=${encodeURIComponent(params.token)}&taskContractId=${params.taskContractId}`;
   },
+  materialSourceUrl(params: { token: string; taskMaterialId: number; fileId?: number }) {
+    const version = params.fileId ? `&v=${params.fileId}` : "";
+    return `/api/open/onboarding/material-source?token=${encodeURIComponent(params.token)}&taskMaterialId=${params.taskMaterialId}${version}`;
+  },
   deleteMaterial(params: { token: string; taskMaterialId: number }) {
     return publicHttp.post("delete-material", params);
   }
diff --git a/src/views/biz/onboarding/task/index.vue b/src/views/biz/onboarding/task/index.vue
index b9d556f..559cba3 100644
--- a/src/views/biz/onboarding/task/index.vue
+++ b/src/views/biz/onboarding/task/index.vue
@@ -67,6 +67,16 @@
           合同参数
         </el-button>
 
+        <el-button
+          v-if="['pending_fill', 'rejected'].includes(scope.row.taskStatus)"
+          link
+          type="warning"
+          icon="CopyDocument"
+          @click="copyOrShareTaskLink(scope.row)"
+        >
+          复制链接
+        </el-button>
+
         <el-button
           v-if="scope.row.taskStatus === 'reviewing'"
           link
@@ -310,39 +320,41 @@
       @closed="clearMaterialPreviews"
     >
       <div v-if="detail" class="drawer-content">
-        <!-- 头部状态栏 (100% 满宽卡片) -->
-        <div class="drawer-status-banner">
-          <div class="banner-left">
-            <div class="banner-title-row">
-              <span class="task-no-large">{{ detail.task.taskNo }}</span>
-              <el-tag :type="statusType(detail.task.taskStatus)" size="large" effect="dark">
-                {{ statusText(detail.task.taskStatus) }}
-              </el-tag>
-              <span v-if="detail.task.submitCount > 0" class="submit-count-badge">
-                第 {{ detail.task.submitCount }} 次提交
-              </span>
+        <!-- 头部固定状态栏 (100% 满宽卡片) -->
+        <div class="drawer-sticky-header">
+          <div class="drawer-status-banner">
+            <div class="banner-left">
+              <div class="banner-title-row">
+                <span class="task-no-large">{{ detail.task.taskNo }}</span>
+                <el-tag :type="statusType(detail.task.taskStatus)" size="large" effect="dark">
+                  {{ statusText(detail.task.taskStatus) }}
+                </el-tag>
+                <span v-if="detail.task.submitCount > 0" class="submit-count-badge">
+                  第 {{ detail.task.submitCount }} 次提交
+                </span>
+              </div>
+              <div class="banner-meta-row">
+                <span>所属公司：<strong>{{ detail.task.companyName || '-' }}</strong></span>
+                <span>入职岗位：<strong>{{ detail.task.positionName || '-' }}</strong></span>
+                <span>入职模板：<strong>{{ detail.task.onboardingTemplateName || '-' }}</strong></span>
+              </div>
             </div>
-            <div class="banner-meta-row">
-              <span>所属公司：<strong>{{ detail.task.companyName || '-' }}</strong></span>
-              <span>入职岗位：<strong>{{ detail.task.positionName || '-' }}</strong></span>
-              <span>入职模板：<strong>{{ detail.task.onboardingTemplateName || '-' }}</strong></span>
+            <div class="banner-right">
+              <div class="meta-item">发起时间：{{ formatTime(detail.task.createTime) }}</div>
+              <div v-if="detail.task.linkExpireAt" class="meta-item">链接有效期至：{{ formatTime(detail.task.linkExpireAt) }}</div>
             </div>
           </div>
-          <div class="banner-right">
-            <div class="meta-item">发起时间：{{ formatTime(detail.task.createTime) }}</div>
-            <div v-if="detail.task.linkExpireAt" class="meta-item">链接有效期至：{{ formatTime(detail.task.linkExpireAt) }}</div>
-          </div>
-        </div>
 
-        <!-- 驳回说明 -->
-        <el-alert
-          v-if="detail.task.rejectReason && detail.task.taskStatus === 'rejected'"
-          :title="`最近驳回原因：${detail.task.rejectReason}`"
-          type="warning"
-          show-icon
-          :closable="false"
-          class="mb-4"
-        />
+          <!-- 驳回说明 -->
+          <el-alert
+            v-if="detail.task.rejectReason && detail.task.taskStatus === 'rejected'"
+            :title="`最近驳回原因：${detail.task.rejectReason}`"
+            type="warning"
+            show-icon
+            :closable="false"
+            class="mb-3"
+          />
+        </div>
 
         <!-- Tab 切换 -->
         <el-tabs v-model="activeDetailTab" class="detail-tabs">
@@ -654,17 +666,6 @@
       <!-- 抽屉底部操作栏 -->
       <template #footer>
         <div v-if="detail" class="drawer-footer-actions">
-          <div class="drawer-footer-left">
-            <el-button
-              v-if="['pending_fill', 'rejected'].includes(detail.task.taskStatus)"
-              plain
-              type="primary"
-              icon="Setting"
-              @click="openContractVariables(detail.task)"
-            >
-              配置合同参数
-            </el-button>
-          </div>
           <div class="drawer-footer-right">
             <el-button
               v-if="detail.task.taskStatus === 'reviewing'"
@@ -711,68 +712,144 @@
       @close="closeImageViewer"
     />
 
-    <!-- 合同参数弹窗 -->
+    <!-- 合同参数录入弹窗 -->
     <el-dialog
       v-model="contractVariablesVisible"
       :title="`${contractVariableTask?.taskNo || ''} · 合同参数录入`"
-      width="920px"
+      width="1180px"
+      top="4vh"
       destroy-on-close
     >
-      <el-alert
-        title="请填写薪资、补贴等可编辑人事变量，填写完成后即可发送给候选人。员工与系统参数由系统自动生成替换。"
-        type="info"
-        show-icon
-        :closable="false"
-        class="mb-4"
-      />
+      <div class="contract-vars-dialog-body">
+        <el-alert
+          title="说明：此处展示本次入职任务关联的所有合同变量。带有【人事变量】标签的项为本次需要 HR 填写的核心条款（如薪资、试用期、合同起止日等）；员工变量与公司变量将在流程中自动带入。"
+          type="info"
+          show-icon
+          :closable="false"
+          style="margin-bottom: 16px;"
+        />
 
-      <el-empty v-if="!contractVariableGroups.length" description="当前任务合同无需配置人事变量" />
+        <el-empty v-if="!contractVariableGroups.length" description="当前任务合同无需配置人事变量" />
 
-      <el-card
-        v-for="group in contractVariableGroups"
-        :key="group.taskContractId"
-        :header="group.contractName"
-        shadow="never"
-        class="contract-card mb-4"
-      >
-        <el-table :data="group.variables" border stripe>
-          <el-table-column prop="variableCode" label="变量编码" width="160" />
-          <el-table-column prop="variableName" label="变量名称" width="160" />
-          <el-table-column prop="variableType" label="类型" width="100">
-            <template #default="scope">
-              <el-tag size="small" :type="variableTypeTag(scope.row.variableType)">
-                {{ variableTypeText(scope.row.variableType) }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column label="参数设定值" min-width="260">
-            <template #default="scope">
-              <el-input
-                v-if="scope.row.editable"
-                v-model="scope.row.variableValue"
-                :placeholder="scope.row.required ? '必填人事参数' : '可选参数'"
-                clearable
-              />
-              <span v-else class="text-secondary">
-                {{ scope.row.variableValue || "自动带入" }}
-              </span>
-            </template>
-          </el-table-column>
-          <el-table-column label="必填" width="80" align="center">
-            <template #default="scope">
-              <el-tag size="small" :type="scope.row.required ? 'danger' : 'info'">
-                {{ scope.row.required ? "是" : "否" }}
-              </el-tag>
-            </template>
-          </el-table-column>
-        </el-table>
+        <div v-else>
+          <!-- 顶部合同分组切换 Tab -->
+          <el-tabs v-model="activeContractGroupTab" type="card" class="contract-group-tabs">
+            <el-tab-pane
+              v-for="(group, gIdx) in contractVariableGroups"
+              :key="group.taskContractId"
+              :label="group.contractName"
+              :name="String(gIdx)"
+            >
+              <div class="contract-group-pane">
+                <!-- 变量类型过滤栏 + 单合同保存按钮 -->
+                <div class="pane-header-bar">
+                  <div class="filter-radio-group">
+                    <span class="filter-label">变量分类筛选：</span>
+                    <el-radio-group v-model="varTypeFilter" size="small">
+                      <el-radio-button label="all">全部 ({{ group.variables.length }})</el-radio-button>
+                      <el-radio-button label="contract">
+                        💼 人事参数 ({{ countVarType(group.variables, 'contract') }})
+                      </el-radio-button>
+                      <el-radio-button label="employee">
+                        👤 员工填写 ({{ countVarType(group.variables, 'employee') }})
+                      </el-radio-button>
+                      <el-radio-button label="company">
+                        🏢 公司变量 ({{ countVarType(group.variables, 'company') }})
+                      </el-radio-button>
+                      <el-radio-button label="system">
+                        ⚙️ 系统预置 ({{ countVarType(group.variables, 'system') }})
+                      </el-radio-button>
+                    </el-radio-group>
+                  </div>
 
-        <div class="card-actions">
-          <el-button type="primary" icon="Check" @click="saveContractVariables(group)">
-            保存《{{ group.contractName }}》参数
+                  <el-button
+                    type="primary"
+                    size="small"
+                    icon="Check"
+                    @click="saveContractVariables(group)"
+                  >
+                    保存《{{ group.contractName }}》参数
+                  </el-button>
+                </div>
+
+                <!-- 变量表格，限制高度，带上下滚动条 -->
+                <el-table
+                  :data="getFilteredVariables(group.variables)"
+                  border
+                  stripe
+                  max-height="450px"
+                  class="contract-vars-table"
+                >
+                  <el-table-column prop="variableCode" label="变量编码" min-width="200">
+                    <template #default="scope">
+                      <code class="code-font">{{ scope.row.variableCode }}</code>
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="variableName" label="变量名称" min-width="180">
+                    <template #default="scope">
+                      <span class="font-bold text-slate-800">{{ scope.row.variableName }}</span>
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="variableType" label="类型" width="150" align="center">
+                    <template #default="scope">
+                      <el-tag size="small" :type="variableTypeTag(scope.row.variableType)">
+                        {{ variableTypeText(scope.row.variableType) }}
+                      </el-tag>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="必填" width="90" align="center">
+                    <template #default="scope">
+                      <el-tag size="small" :type="scope.row.required ? 'danger' : 'info'" effect="plain">
+                        {{ scope.row.required ? "必填" : "选填" }}
+                      </el-tag>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="参数设定值 (HR录入 / 自动生成)" min-width="280">
+                    <template #default="scope">
+                      <div v-if="scope.row.editable" class="editable-cell">
+                        <el-date-picker
+                          v-if="scope.row.dataType === 'date'"
+                          v-model="scope.row.variableValue"
+                          type="date"
+                          value-format="YYYY-MM-DD"
+                          placeholder="选择日期"
+                          style="width: 100%;"
+                        />
+                        <el-input-number
+                          v-else-if="scope.row.dataType === 'number' || scope.row.dataType === 'decimal'"
+                          v-model="scope.row.variableValue"
+                          controls-position="right"
+                          placeholder="输入金额或数值"
+                          style="width: 100%;"
+                        />
+                        <el-input
+                          v-else
+                          v-model="scope.row.variableValue"
+                          :placeholder="scope.row.required ? '请输入必填人事参数' : '请输入参数设定值'"
+                          clearable
+                        />
+                      </div>
+                      <div v-else class="readonly-val-cell">
+                        <span v-if="scope.row.variableValue" class="text-primary font-medium">{{ scope.row.variableValue }}</span>
+                        <span v-else class="text-placeholder">系统自动替换</span>
+                      </div>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="dialog-footer-flex">
+          <el-button @click="contractVariablesVisible = false">关闭</el-button>
+          <el-button type="primary" icon="Check" :loading="savingAllVars" @click="saveAllContractVariables">
+            一键保存全部合同参数
           </el-button>
         </div>
-      </el-card>
+      </template>
     </el-dialog>
   </div>
 </template>
@@ -875,6 +952,20 @@ const detailCustomVars = computed(() => {
 const contractVariablesVisible = ref(false);
 const contractVariableTask = ref<OnboardingTask>();
 const contractVariableGroups = ref<OnboardingTaskContractVariableGroup[]>([]);
+const activeContractGroupTab = ref("0");
+const varTypeFilter = ref("all");
+const savingAllVars = ref(false);
+
+function countVarType(variables: any[], type: string) {
+  if (!variables) return 0;
+  return variables.filter(v => v.variableType === type).length;
+}
+
+function getFilteredVariables(variables: any[]) {
+  if (!variables) return [];
+  if (varTypeFilter.value === "all") return variables;
+  return variables.filter(v => v.variableType === varTypeFilter.value);
+}
 
 // 统计数量
 const statusCounts = reactive({
@@ -892,7 +983,7 @@ const form = reactive({
     contractTemplateVersionId: number;
     variableCode: string;
     variableName: string;
-    variableValue?: string;
+    variableValue?: string | number;
     dataType: string;
     required: boolean;
     contractName: string;
@@ -945,7 +1036,7 @@ const columns: ColumnProps<OnboardingTask>[] = [
     prop: "operation",
     label: "操作",
     fixed: "right",
-    width: 320
+    width: 360
   }
 ];
 
@@ -1205,18 +1296,27 @@ async function createTask() {
   if (!form.companyId || !form.positionId || !form.onboardingTemplateId) {
     return ElMessage.warning("请选择所属公司、入职岗位和入职模板");
   }
-  const missingVariable = form.contractVariables.find(item => item.required && !String(item.variableValue || "").trim());
+  const missingVariable = form.contractVariables.find(
+    item => item.required && isBlankContractVariableValue(item.variableValue)
+  );
   if (missingVariable) {
     return ElMessage.warning(`请填写合同人事参数“${missingVariable.variableName}”`);
   }
 
   creating.value = true;
   try {
-    const { data: result }: any = await onboardingTaskApi.create(form);
+    const payload = {
+      ...form,
+      contractVariables: form.contractVariables.map(item => ({
+        ...item,
+        variableValue: normalizeContractVariableValue(item.variableValue)
+      }))
+    };
+    const { data: result }: any = await onboardingTaskApi.create(payload);
     createVisible.value = false;
     proTable.value?.refresh();
 
-    const linkUrl = `${location.origin}/onboarding/fill?token=${result.linkToken}`;
+    const linkUrl = `${location.origin}/#/onboarding/fill?token=${result.linkToken}`;
     const selectedCompany = companies.value.find(c => c.id === form.companyId)?.companyName || "";
     const selectedPosition = positions.value.find(p => p.id === form.positionId)?.positionName || "";
 
@@ -1247,6 +1347,26 @@ function copyInviteMessage() {
   copyText(msg, "邀请文案已复制至剪贴板");
 }
 
+async function copyOrShareTaskLink(row: OnboardingTask) {
+  try {
+    const { data }: any = await onboardingTaskApi.getTaskLink({ id: row.id });
+    const linkUrl = `${location.origin}/#/onboarding/fill?token=${data.linkToken}`;
+
+    createdTaskInfo.value = {
+      taskNo: row.taskNo,
+      linkUrl,
+      expiresAt: formatTime(data.expiresAt),
+      companyName: row.companyName || "公司",
+      positionName: row.positionName || "岗位"
+    };
+
+    copyText(linkUrl, "专属入职链接已复制到剪贴板！");
+    shareVisible.value = true;
+  } catch (err: any) {
+    ElMessage.error(err?.message || "获取专属链接失败");
+  }
+}
+
 async function showDetail(row: OnboardingTask) {
   const { data }: any = await onboardingTaskApi.detail({ id: row.id });
   detail.value = data;
@@ -1258,13 +1378,17 @@ async function showDetail(row: OnboardingTask) {
 async function openContractVariables(row: OnboardingTask) {
   const { data } = await onboardingTaskApi.taskContractVariables(row.id);
   contractVariableTask.value = row;
-  contractVariableGroups.value = data;
+  contractVariableGroups.value = data || [];
+  activeContractGroupTab.value = "0";
+  varTypeFilter.value = "all";
   contractVariablesVisible.value = true;
 }
 
 async function saveContractVariables(group: OnboardingTaskContractVariableGroup) {
   const requiredBlank = group.variables.some(
-    item => item.editable && item.required && !item.variableValue?.trim()
+    item => item.editable
+      && item.required
+      && isBlankContractVariableValue(item.variableValue)
   );
 
   if (requiredBlank) {
@@ -1273,14 +1397,62 @@ async function saveContractVariables(group: OnboardingTaskContractVariableGroup)
 
   await onboardingTaskApi.saveTaskContractVariables({
     taskContractId: group.taskContractId,
-    values: group.variables
-      .filter(item => item.editable)
-      .map(item => ({ id: item.id, variableValue: item.variableValue }))
+    values: buildContractVariableSaveValues(group)
   });
 
   ElMessage.success("《" + group.contractName + "》参数已保存");
 }
 
+async function saveAllContractVariables() {
+  if (!contractVariableGroups.value.length) return;
+  for (const group of contractVariableGroups.value) {
+    const requiredBlank = group.variables.some(
+      item => item.editable
+        && item.required
+        && isBlankContractVariableValue(item.variableValue)
+    );
+    if (requiredBlank) {
+      return ElMessage.warning(`请填写《${group.contractName}》中的所有必填人事参数`);
+    }
+  }
+
+  savingAllVars.value = true;
+  try {
+    for (const group of contractVariableGroups.value) {
+      await onboardingTaskApi.saveTaskContractVariables({
+        taskContractId: group.taskContractId,
+        values: buildContractVariableSaveValues(group)
+      });
+    }
+    ElMessage.success("全部合同参数已保存成功！");
+    contractVariablesVisible.value = false;
+  } finally {
+    savingAllVars.value = false;
+  }
+}
+
+/**
+ * 合同数值控件会返回 number，文本和日期控件返回 string；统一判断可避免数字调用 trim。
+ * 使用空值合并判断而不是逻辑或，确保合法数值 0 不会被当成未填写。
+ */
+function isBlankContractVariableValue(value: unknown) {
+  return value == null || String(value).trim() === "";
+}
+
+/** 后端合同变量快照使用字符串存储，请求前统一规范化控件返回值。 */
+function normalizeContractVariableValue(value: unknown) {
+  return value == null ? "" : String(value).trim();
+}
+
+function buildContractVariableSaveValues(group: OnboardingTaskContractVariableGroup) {
+  return group.variables
+    .filter(item => item.editable)
+    .map(item => ({
+      id: item.id,
+      variableValue: normalizeContractVariableValue(item.variableValue)
+    }));
+}
+
 async function approve(row: OnboardingTask) {
   await ElMessageBox.confirm(
     "确认审核通过？系统将自动创建正式员工档案并锁定合同快照。",
@@ -1731,12 +1903,8 @@ onMounted(loadCompanies);
 
 .drawer-footer-actions {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   align-items: center;
-}
-
-.footer-action-right {
-  display: flex;
   gap: 10px;
 }
 
@@ -1808,13 +1976,57 @@ onMounted(loadCompanies);
   text-align: left;
 }
 
-/* 详情抽屉顶部横幅与档案卡片样式 */
+/* 详情抽屉顶部横幅与档案卡片样式 (头部固定 + 内容区滚动) */
+:deep(.el-drawer__body) {
+  padding: 0 !important;
+  overflow: hidden !important;
+  display: flex;
+  flex-direction: column;
+}
+
+.drawer-content {
+  flex: 1;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  padding: 20px 24px 0;
+}
+
+.drawer-sticky-header {
+  flex-shrink: 0;
+  background: #ffffff;
+  z-index: 10;
+}
+
+.detail-tabs {
+  flex: 1;
+  height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+:deep(.detail-tabs > .el-tabs__header) {
+  flex-shrink: 0;
+  margin-bottom: 16px;
+  background: #fff;
+  z-index: 9;
+}
+
+:deep(.detail-tabs > .el-tabs__content) {
+  flex: 1;
+  height: 0;
+  overflow-y: auto;
+  padding-right: 6px;
+  padding-bottom: 20px;
+}
+
 .drawer-status-banner {
   background: #f8fafc;
   border: 1px solid #e2e8f0;
   border-radius: 8px;
   padding: 16px 20px;
-  margin-bottom: 20px;
+  margin-bottom: 14px;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -1885,4 +2097,83 @@ onMounted(loadCompanies);
   border-radius: 4px;
   color: #2563eb;
 }
+
+/* 合同参数录入弹窗优化 */
+.contract-vars-dialog-body {
+  max-height: 68vh;
+  overflow-y: auto;
+  padding-right: 6px;
+}
+
+.contract-group-tabs {
+  margin-top: 4px;
+}
+
+.contract-group-pane {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.pane-header-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 10px 14px;
+}
+
+.filter-radio-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.filter-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: #475569;
+}
+
+.contract-vars-table {
+  width: 100%;
+}
+
+:deep(.contract-vars-table .el-input__inner) {
+  text-align: center !important;
+}
+
+:deep(.contract-vars-table .el-date-editor .el-input__inner) {
+  text-align: center !important;
+}
+
+:deep(.contract-vars-table .el-input-number .el-input__inner) {
+  text-align: center !important;
+}
+
+.text-slate-800 {
+  color: #1e293b;
+}
+
+.readonly-val-cell {
+  color: #64748b;
+  font-size: 13px;
+  text-align: center;
+}
+
+.text-placeholder {
+  color: #94a3b8;
+  font-style: italic;
+  text-align: center;
+}
+
+.dialog-footer-flex {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
 </style>
diff --git a/src/views/onboarding/fill/index.vue b/src/views/onboarding/fill/index.vue
index dd6a44d..5cd7826 100644
--- a/src/views/onboarding/fill/index.vue
+++ b/src/views/onboarding/fill/index.vue
@@ -16,7 +16,7 @@
     <div class="main-container">
       <el-result v-if="error" icon="error" title="访问受限" :sub-title="error">
         <template #extra>
-          <el-button type="primary" @click="load">重新加载</el-button>
+          <el-button type="primary" @click="load()">重新加载</el-button>
         </template>
       </el-result>
 
@@ -34,6 +34,17 @@
           </div>
         </div>
 
+        <!-- 审核退回后向候选人明确展示需要补充或修改的内容。 -->
+        <el-alert
+          v-if="task.taskStatus === 'rejected'"
+          class="reject-reason-alert"
+          title="退回原因"
+          :description="task.rejectReason?.trim() || '资料已退回，请联系工作人员确认需要补充的内容。'"
+          type="warning"
+          show-icon
+          :closable="false"
+        />
+
         <!-- 分步向导模式 -->
         <div class="wizard-card">
           <div v-if="!canEdit" class="readonly-banner">
@@ -463,38 +474,92 @@
                     <el-tag v-if="mat.required" size="small" type="danger" effect="plain">必传</el-tag>
                     <el-tag v-else size="small" type="info" effect="plain">选传</el-tag>
                   </div>
-                  <span class="mat-limit">最多 {{ mat.maxFileCount }} 份 · 格式：{{ mat.allowedExtensions }}</span>
+                  <span class="mat-limit">{{ getMaterialLimitText(mat) }}</span>
                 </div>
 
                 <div class="uploaded-files-list">
                   <div
                     v-for="f in getUploadedMaterials(mat.materialTypeId)"
-                    :key="f.id"
+                    :key="`${f.id}-${f.fileId}`"
                     class="file-badge"
                   >
-                    <el-icon color="#2563eb"><Document /></el-icon>
-                    <span class="file-name">{{ f.fileName || f.materialName }}</span>
-                    <el-button
-                      v-if="canEdit"
-                      link
-                      type="danger"
-                      icon="Close"
-                      @click="deleteFile(f.id)"
+                    <!-- 图片点击缩略图即可在手机端放大预览，非图片继续显示文件图标。 -->
+                    <el-image
+                      v-if="isImageFile(f)"
+                      class="material-thumbnail"
+                      :src="getMaterialSourceUrl(f)"
+                      :preview-src-list="[getMaterialSourceUrl(f)]"
+                      fit="cover"
+                      preview-teleported
                     />
+                    <el-icon v-else class="material-file-icon" color="#2563eb"><Document /></el-icon>
+
+                    <div class="file-content">
+                      <span class="file-name" :title="f.fileName || f.materialName">
+                        {{ f.fileName || f.materialName }}
+                      </span>
+                      <span v-if="f.fileSizeInfo" class="file-size">{{ f.fileSizeInfo }}</span>
+                      <span v-if="isImageFile(f)" class="preview-tip">点击图片可放大预览</span>
+                    </div>
+
+                    <div v-if="canEdit" class="file-actions">
+                      <el-upload
+                        :action="getMaterialUploadUrl(mat.materialTypeId, f.id)"
+                        :accept="getUploadAccept(mat)"
+                        :disabled="isMaterialUploading(mat.materialTypeId)"
+                        :show-file-list="false"
+                        :on-success="(response: any) => onUploadSuccess(response, mat.materialTypeId)"
+                        :on-error="(error: Error) => onUploadError(error, mat.materialTypeId)"
+                        :before-upload="(file: File) => beforeUpload(file, mat)"
+                      >
+                        <el-button
+                          link
+                          type="primary"
+                          icon="Refresh"
+                          :loading="isMaterialUploading(mat.materialTypeId)"
+                        >
+                          重新上传
+                        </el-button>
+                      </el-upload>
+                      <el-button link type="danger" icon="Delete" @click="deleteFile(f.id)">
+                        删除
+                      </el-button>
+                    </div>
                   </div>
                 </div>
 
-                <div v-if="canEdit && getUploadedMaterials(mat.materialTypeId).length < mat.maxFileCount" class="upload-action-box">
+                <div v-if="canEdit && getRemainingFileCount(mat) > 0" class="upload-action-box">
                   <el-upload
                     :action="getMaterialUploadUrl(mat.materialTypeId)"
+                    :accept="getUploadAccept(mat)"
+                    :disabled="isMaterialUploading(mat.materialTypeId)"
                     :show-file-list="false"
-                    :on-success="onUploadSuccess"
+                    :on-success="(response: any) => onUploadSuccess(response, mat.materialTypeId)"
+                    :on-error="(error: Error) => onUploadError(error, mat.materialTypeId)"
                     :before-upload="(file: File) => beforeUpload(file, mat)"
                   >
-                    <el-button size="small" type="primary" plain icon="Upload">
-                      上传文件 / 照片
+                    <el-button
+                      size="small"
+                      type="primary"
+                      plain
+                      icon="Upload"
+                      :loading="isMaterialUploading(mat.materialTypeId)"
+                    >
+                      {{ getUploadedMaterials(mat.materialTypeId).length ? "继续上传" : "上传文件 / 照片" }}
                     </el-button>
                   </el-upload>
+                  <span class="upload-count">
+                    已上传 {{ getUploadedMaterials(mat.materialTypeId).length }}/{{ getMaxFileCount(mat) }}，
+                    还可上传 {{ getRemainingFileCount(mat) }} 份
+                  </span>
+                </div>
+
+                <div
+                  v-else-if="canEdit && getUploadedMaterials(mat.materialTypeId).length"
+                  class="upload-limit-reached"
+                >
+                  已上传 {{ getUploadedMaterials(mat.materialTypeId).length }}/{{ getMaxFileCount(mat) }}；
+                  如需更换，请点击对应文件的“重新上传”
                 </div>
               </div>
             </div>
@@ -533,6 +598,8 @@
                     type="primary"
                     plain
                     icon="Download"
+                    :loading="isContractOpening(c.id)"
+                    :disabled="isContractOpening(c.id)"
                     @click="previewAndDownloadContract(c)"
                   >
                     下载 / 查阅合同原文
@@ -579,7 +646,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from "vue";
+import { computed, onBeforeUnmount, onMounted, reactive, ref } from "vue";
 import { useRoute } from "vue-router";
 import { ElMessage, ElMessageBox, FormInstance, FormRules } from "element-plus";
 import {
@@ -589,11 +656,15 @@ import {
 
 const route = useRoute();
 const token = ref((route.query.token as string) || "");
+const viewportMeta = document.querySelector<HTMLMetaElement>('meta[name="viewport"]');
+const originalViewportContent = viewportMeta?.content;
 
 const loading = ref(false);
 const submitting = ref(false);
 const error = ref("");
 const currentStep = ref(0);
+const uploadingMaterials = reactive<Record<string, boolean>>({});
+const openingContracts = reactive<Record<string, boolean>>({});
 
 const task = ref<OnboardingTask | null>(null);
 const contracts = ref<any[]>([]);
@@ -698,6 +769,53 @@ function getUploadedMaterials(matId: number) {
   return uploadedMaterials.value.filter(item => item.materialTypeId === matId);
 }
 
+/** 防止旧任务中的异常数量导致上传入口被错误隐藏。 */
+function getMaxFileCount(mat: any) {
+  const maxFileCount = Number(mat.maxFileCount);
+  return Number.isFinite(maxFileCount) && maxFileCount > 0
+    ? Math.floor(maxFileCount)
+    : 1;
+}
+
+function getRemainingFileCount(mat: any) {
+  return Math.max(
+    getMaxFileCount(mat) - getUploadedMaterials(mat.materialTypeId).length,
+    0
+  );
+}
+
+function getAllowedExtensions(mat: any) {
+  return String(mat.allowedExtensions || "")
+    .toLowerCase()
+    .split(",")
+    .map((item: string) => item.trim().replace(/^\./, ""))
+    .filter(Boolean);
+}
+
+function getUploadAccept(mat: any) {
+  return getAllowedExtensions(mat)
+    .map((item: string) => `.${item}`)
+    .join(",");
+}
+
+function getMaterialLimitText(mat: any) {
+  const allowedExtensions = getAllowedExtensions(mat);
+  const formatText = allowedExtensions.length
+    ? allowedExtensions.join("、").toUpperCase()
+    : "不限";
+  const sizeText = mat.maxFileSizeMb
+    ? ` · 单个不超过 ${mat.maxFileSizeMb} MB`
+    : "";
+  return `最多 ${getMaxFileCount(mat)} 份 · 格式：${formatText}${sizeText}`;
+}
+
+function isImageFile(file: any) {
+  const suffix = String(
+    file.fileSuffix || file.fileName?.split(".").pop() || ""
+  ).toLowerCase().replace(/^\./, "");
+  return ["png", "jpg", "jpeg", "gif", "bmp", "webp"].includes(suffix);
+}
+
 function statusTagType(status?: string) {
   switch (status) {
     case "pending_fill": return "warning";
@@ -726,12 +844,14 @@ function formatDateTime(str?: string) {
   return str ? str.replace("T", " ").substring(0, 16) : "";
 }
 
-async function load() {
+async function load(silent = false) {
   if (!token.value) {
     error.value = "缺少入职访问 Token";
     return;
   }
-  loading.value = true;
+  if (!silent) {
+    loading.value = true;
+  }
   error.value = "";
   try {
     const res = await onboardingPublicApi.detail({ token: token.value });
@@ -764,7 +884,9 @@ async function load() {
   } catch (err: any) {
     error.value = err.message || "无法加载入职任务";
   } finally {
-    loading.value = false;
+    if (!silent) {
+      loading.value = false;
+    }
   }
 }
 
@@ -802,46 +924,135 @@ async function nextStep() {
   window.scrollTo({ top: 0, behavior: "smooth" });
 }
 
-function getMaterialUploadUrl(materialTypeId: number) {
-  return `/api/open/onboarding/upload-material?token=${encodeURIComponent(token.value)}&materialTypeId=${materialTypeId}`;
+function getMaterialUploadUrl(materialTypeId: number, taskMaterialId?: number) {
+  const query = new URLSearchParams({
+    token: token.value,
+    materialTypeId: String(materialTypeId)
+  });
+  if (taskMaterialId) {
+    query.set("taskMaterialId", String(taskMaterialId));
+  }
+  return `/api/open/onboarding/upload-material?${query.toString()}`;
+}
+
+function getMaterialSourceUrl(file: any) {
+  return onboardingPublicApi.materialSourceUrl({
+    token: token.value,
+    taskMaterialId: file.id,
+    fileId: file.fileId
+  });
+}
+
+function isMaterialUploading(materialTypeId: number) {
+  return Boolean(uploadingMaterials[String(materialTypeId)]);
+}
+
+function setMaterialUploading(materialTypeId: number, value: boolean) {
+  uploadingMaterials[String(materialTypeId)] = value;
 }
 
 function beforeUpload(file: File, mat: any) {
   const ext = file.name.split(".").pop()?.toLowerCase() || "";
-  const allowed = (mat.allowedExtensions || "").toLowerCase().split(",")
-    .map((s: string) => s.trim())
-    .filter(Boolean);
+  const allowed = getAllowedExtensions(mat);
   if (allowed.length && !allowed.includes(ext)) {
     ElMessage.error(`仅支持格式：${mat.allowedExtensions}`);
     return false;
   }
+  if (mat.maxFileSizeMb && file.size > Number(mat.maxFileSizeMb) * 1024 * 1024) {
+    ElMessage.error(`单个文件不能超过 ${mat.maxFileSizeMb} MB`);
+    return false;
+  }
+  setMaterialUploading(mat.materialTypeId, true);
   return true;
 }
 
-async function onUploadSuccess(res: any) {
+async function onUploadSuccess(res: any, materialTypeId: number) {
   if (res.code !== 200 && res.code !== 0) {
+    setMaterialUploading(materialTypeId, false);
     return ElMessage.error(res.msg || "上传失败");
   }
-  ElMessage.success("材料上传成功");
-  await load();
+  try {
+    await load(true);
+    ElMessage.success("材料上传成功");
+  } finally {
+    setMaterialUploading(materialTypeId, false);
+  }
+}
+
+function onUploadError(error: Error, materialTypeId: number) {
+  setMaterialUploading(materialTypeId, false);
+  ElMessage.error(error.message || "材料上传失败，请稍后重试");
 }
 
 async function deleteFile(id: number) {
-  await ElMessageBox.confirm("确认删除已上传材料？", "删除确认", { type: "warning" });
+  const confirmed = await isMessageBoxConfirmed(
+    ElMessageBox.confirm("确认删除已上传材料？", "删除确认", { type: "warning" })
+  );
+  if (!confirmed) {
+    return;
+  }
+
   await onboardingPublicApi.deleteMaterial({ token: token.value, taskMaterialId: id });
   ElMessage.success("材料已删除");
   await load();
 }
 
-async function previewAndDownloadContract(c: any) {
-  if (canEdit.value) {
-    await saveCurrentEmployeeInfo();
+/**
+ * Element Plus 在取消或关闭确认框时会拒绝 Promise。
+ * 取消属于正常操作，不应继续交给全局异常提示处理。
+ */
+async function isMessageBoxConfirmed(confirmPromise: Promise<unknown>) {
+  try {
+    await confirmPromise;
+    return true;
+  } catch (action) {
+    if (action === "cancel" || action === "close") {
+      return false;
+    }
+
+    throw action;
   }
-  const url = onboardingPublicApi.contractSourceUrl({
-    token: token.value,
-    taskContractId: c.id
-  });
-  window.open(url, "_blank");
+}
+
+async function previewAndDownloadContract(c: any) {
+  if (isContractOpening(c.id)) {
+    return;
+  }
+
+  // 必须在用户点击的同步阶段创建窗口，否则手机浏览器会拦截异步完成后的 window.open。
+  const previewWindow = window.open("about:blank", "_blank");
+  openingContracts[String(c.id)] = true;
+  try {
+    if (previewWindow) {
+      previewWindow.document.title = "合同生成中";
+      previewWindow.document.body.innerHTML = `
+        <div style="padding:40px 20px;text-align:center;font-family:sans-serif;color:#475569;">
+          正在生成合同文件，请稍候…
+        </div>`;
+    }
+    if (canEdit.value) {
+      await saveCurrentEmployeeInfo();
+    }
+    const url = onboardingPublicApi.contractSourceUrl({
+      token: token.value,
+      taskContractId: c.id
+    });
+    if (previewWindow && !previewWindow.closed) {
+      previewWindow.location.replace(url);
+    } else {
+      // 微信等内置浏览器拦截新窗口时，退回当前页直接发起下载。
+      window.location.assign(url);
+    }
+  } catch (err: any) {
+    previewWindow?.close();
+    ElMessage.error(err?.message || "合同生成失败，请稍后重试");
+  } finally {
+    openingContracts[String(c.id)] = false;
+  }
+}
+
+function isContractOpening(taskContractId: number) {
+  return Boolean(openingContracts[String(taskContractId)]);
 }
 
 async function submitAll() {
@@ -850,11 +1061,16 @@ async function submitAll() {
     return ElMessage.warning(`请先勾选同意全部合同（未勾选：${unconfirmed.map(c => c.contractName).join("、")}）`);
   }
 
-  await ElMessageBox.confirm("确认提交全部入职资料与合同确认？提交后将进入人事复核建档流程。", "最终提交确认", {
-    type: "success",
-    confirmButtonText: "确认提交",
-    cancelButtonText: "再检查一下"
-  });
+  const confirmed = await isMessageBoxConfirmed(
+    ElMessageBox.confirm("确认提交全部入职资料与合同确认？提交后将进入人事复核建档流程。", "最终提交确认", {
+      type: "success",
+      confirmButtonText: "确认提交",
+      cancelButtonText: "再检查一下"
+    })
+  );
+  if (!confirmed) {
+    return;
+  }
 
   submitting.value = true;
   try {
@@ -870,7 +1086,26 @@ async function submitAll() {
   }
 }
 
-onMounted(load);
+/** 入职填写页使用固定移动端比例，离开页面后恢复系统原有 viewport 配置。 */
+onMounted(() => {
+  if (viewportMeta) {
+    viewportMeta.content = [
+      "width=device-width",
+      "initial-scale=1.0",
+      "minimum-scale=1.0",
+      "maximum-scale=1.0",
+      "user-scalable=no",
+      "viewport-fit=cover"
+    ].join(", ");
+  }
+  load();
+});
+
+onBeforeUnmount(() => {
+  if (viewportMeta && originalViewportContent) {
+    viewportMeta.content = originalViewportContent;
+  }
+});
 </script>
 
 <style scoped>
@@ -941,6 +1176,16 @@ onMounted(load);
   color: #64748b;
 }
 
+.reject-reason-alert {
+  margin-bottom: 16px;
+}
+
+.reject-reason-alert :deep(.el-alert__description) {
+  line-height: 1.6;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
 .wizard-card {
   background: #fff;
   border-radius: 12px;
@@ -1111,13 +1356,68 @@ onMounted(load);
   margin-bottom: 8px;
 }
 
-.file-name {
+.material-thumbnail {
+  width: 68px;
+  height: 68px;
+  flex: 0 0 68px;
+  border-radius: 6px;
+  cursor: zoom-in;
+}
+
+.material-file-icon {
+  width: 36px;
+  height: 36px;
+  flex: 0 0 36px;
+  font-size: 26px;
+}
+
+.file-content {
+  display: flex;
   flex: 1;
+  min-width: 0;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.file-name {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.file-size,
+.preview-tip,
+.upload-count {
+  font-size: 12px;
+  color: #64748b;
+}
+
+.preview-tip {
+  color: #2563eb;
+}
+
+.file-actions,
+.upload-action-box {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.upload-action-box {
+  flex-wrap: wrap;
+  margin-top: 4px;
+}
+
+.upload-limit-reached {
+  margin-top: 4px;
+  padding: 8px 10px;
+  border-radius: 6px;
+  background: #eff6ff;
+  color: #475569;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
 .contract-sign-card {
   border: 1px solid #e2e8f0;
   border-radius: 8px;
@@ -1262,6 +1562,12 @@ onMounted(load);
 }
 
 @media (max-width: 640px) {
+  /* iOS 会自动放大小于 16px 的表单控件，统一字号保持页面比例稳定。 */
+  .fill-page :deep(.el-input__inner),
+  .fill-page :deep(.el-textarea__inner),
+  .fill-page :deep(.el-select__input) {
+    font-size: 16px !important;
+  }
   .desktop-only {
     display: none !important;
   }
@@ -1285,6 +1591,14 @@ onMounted(load);
     align-items: flex-start;
     gap: 8px;
   }
+  .file-badge {
+    align-items: flex-start;
+    flex-wrap: wrap;
+  }
+  .file-actions {
+    width: 100%;
+    justify-content: flex-end;
+  }
   .contract-card-bottom {
     flex-direction: column;
     align-items: stretch;