11

2026-08-26 15:30:02 +08:00
parent f1a910c25a
commit dd7c9e2bb6
3 changed files with 771 additions and 153 deletions
@@ -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>