完善第三方签署

src/views/biz/onboarding/entry-config/components/VariableDefinitionPanel.vue

@@ -75,20 +75,22 @@
           </template>
         </el-table-column>
 
-        <el-table-column prop="remark" label="说明备注" min-width="200" show-overflow-tooltip />
+        <el-table-column prop="remark" label="说明备注" min-width="140" show-overflow-tooltip />
 
-        <el-table-column label="操作" width="140" align="center" fixed="right">
+        <el-table-column label="操作" width="160" align="center" fixed="right">
           <template #default="{ row }">
-            <el-button link type="primary" icon="Edit" @click="openEdit(row)">编辑</el-button>
-            <el-button
-              v-if="!row.isBuiltIn"
-              link
-              type="danger"
-              icon="Delete"
-              @click="remove(row)"
-            >
-              删除
-            </el-button>
+            <div style="display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;">
+              <el-button link type="primary" icon="Edit" @click="openEdit(row)">编辑</el-button>
+              <el-button
+                v-if="!row.isBuiltIn"
+                link
+                type="danger"
+                icon="Delete"
+                @click="remove(row)"
+              >
+                删除
+              </el-button>
+            </div>
           </template>
         </el-table-column>
       </el-table>

src/views/biz/onboarding/setup/index.vue

@@ -1,4 +1,4 @@
-<template>
+<template>
   <div class="main-box setup-container">
     <el-tabs v-model="activeTab" class="setup-tabs">
       <!-- 1. 入职公司管理 -->
@@ -23,6 +23,15 @@
               </el-tag>
             </template>
 
+            <template #qiyuesuoConfig="scope">
+              <el-tag
+                size="small"
+                :type="scope.row.qiyuesuoCategoryId && scope.row.qiyuesuoSealId ? 'success' : 'warning'"
+              >
+                {{ scope.row.qiyuesuoCategoryId && scope.row.qiyuesuoSealId ? "已配置" : "未配置" }}
+              </el-tag>
+            </template>
+
             <template #operation="scope">
               <el-button link type="primary" icon="Edit" @click="openCompanyEdit(scope.row)">
                 编辑
@@ -130,50 +139,62 @@
     <el-dialog
       v-model="dialogVisible"
       :title="dialogTitle"
-      width="680px"
+      width="820px"
+      top="6vh"
       destroy-on-close
       append-to-body
     >
       <!-- 1. 公司表单 -->
-      <el-form v-if="dialogKind === 'company'" :model="companyForm" label-width="140px">
+      <el-form
+        v-if="dialogKind === 'company'"
+        ref="companyFormRef"
+        :model="companyForm"
+        :rules="companyRules"
+        label-width="140px"
+      >
         <el-row :gutter="20">
           <el-col :span="12">
-            <el-form-item label="公司编码" required>
-              <el-input v-model="companyForm.companyCode" placeholder="如：TECH_CORP" />
+            <el-form-item label="公司编码" prop="companyCode">
+              <el-input v-model.trim="companyForm.companyCode" placeholder="如：TECH_CORP" clearable />
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="公司简称/名称" required>
-              <el-input v-model="companyForm.companyName" placeholder="如：总公司 / 科技分部" />
+            <el-form-item label="公司简称/名称" prop="companyName">
+              <el-input v-model.trim="companyForm.companyName" placeholder="如：总公司 / 科技分部" clearable />
             </el-form-item>
           </el-col>
         </el-row>
 
-        <el-form-item label="签署材料甲方全称" required>
-          <el-input v-model="companyForm.legalName" placeholder="用于签署材料填写的法定主体全称" />
+        <el-form-item label="签署材料甲方全称" prop="legalName">
+          <el-input v-model.trim="companyForm.legalName" placeholder="必须与契约锁中的企业名称完全一致" clearable />
         </el-form-item>
 
         <el-row :gutter="20">
           <el-col :span="12">
-            <el-form-item label="统一社会信用代码">
-              <el-input v-model="companyForm.unifiedSocialCreditCode" placeholder="18位统一信用代码" />
+            <el-form-item label="统一社会信用代码" prop="unifiedSocialCreditCode">
+              <el-input
+                v-model.trim="companyForm.unifiedSocialCreditCode"
+                placeholder="18位统一社会信用代码"
+                maxlength="18"
+                clearable
+              />
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="法定代表人">
-              <el-input v-model="companyForm.legalRepresentative" placeholder="法定代表人姓名" />
+            <el-form-item label="法定代表人" prop="legalRepresentative">
+              <el-input v-model.trim="companyForm.legalRepresentative" placeholder="法定代表人姓名" clearable />
             </el-form-item>
           </el-col>
         </el-row>
 
         <el-row :gutter="20">
           <el-col :span="12">
-            <el-form-item label="联系电话">
-              <el-input v-model="companyForm.contactPhone" placeholder="企业联系电话" />
+            <el-form-item label="联系电话" prop="contactPhone">
+              <el-input v-model.trim="companyForm.contactPhone" placeholder="企业联系电话（手机或固话）" clearable />
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="状态" required>
+            <el-form-item label="状态" prop="status">
               <el-select v-model="companyForm.status" class="w-full">
                 <el-option label="启用" value="enable" />
                 <el-option label="停用" value="disable" />
@@ -182,13 +203,34 @@
           </el-col>
         </el-row>
 
-        <el-form-item label="注册地址">
-          <el-input v-model="companyForm.registeredAddress" placeholder="企业法定注册地址" />
+        <el-form-item label="注册地址" prop="registeredAddress">
+          <el-input v-model.trim="companyForm.registeredAddress" placeholder="企业法定注册地址" clearable />
         </el-form-item>
 
-        <el-form-item label="备注">
-          <el-input v-model="companyForm.remark" type="textarea" :rows="2" placeholder="备注信息" />
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="companyForm.remark" type="textarea" :rows="2" placeholder="备注信息（选填）" />
         </el-form-item>
+
+        <el-divider content-position="left">契约锁电子签配置（由技术人员添加）</el-divider>
+        <el-alert
+          title="说明：默认业务分类 Id 与企业印章 Id 由技术人员添加配置，非技术人员请勿随意修改。"
+          type="info"
+          :closable="false"
+          show-icon
+          style="margin-bottom: 18px"
+        />
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="默认业务分类 Id" prop="qiyuesuoCategoryId">
+              <el-input v-model.trim="companyForm.qiyuesuoCategoryId" placeholder="契约锁当前公司的分类 Id" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="企业印章 Id" prop="qiyuesuoSealId">
+              <el-input v-model.trim="companyForm.qiyuesuoSealId" placeholder="契约锁当前公司的印章 Id" clearable />
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
 
       <!-- 2. 部门表单 -->
@@ -322,8 +364,8 @@
 </template>
 
 <script setup lang="ts" name="onboardingSetup">
-import { ref, reactive, computed, onMounted } from "vue";
-import { ElMessage, ElMessageBox } from "element-plus";
+import { ref, reactive, computed, onMounted, nextTick } from "vue";
+import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
 import { Plus, Edit, Delete } from "@element-plus/icons-vue";
 import {
   onboardingTaskApi,
@@ -370,6 +412,8 @@ const emptyCompany = (): Partial<OnboardingCompany> => ({
   legalRepresentative: "",
   registeredAddress: "",
   contactPhone: "",
+  qiyuesuoCategoryId: "",
+  qiyuesuoSealId: "",
   status: "enable",
   remark: ""
 });
@@ -394,7 +438,72 @@ const emptyPosition = (): Partial<OnboardingPosition> => ({
   remark: ""
 });
 
+const companyFormRef = ref<FormInstance>();
 const companyForm = reactive<Partial<OnboardingCompany>>(emptyCompany());
+
+const companyRules = reactive<FormRules>({
+  companyCode: [
+    { required: true, message: "请输入公司编码", trigger: "blur" },
+    {
+      pattern: /^[a-zA-Z0-9_-]{2,50}$/,
+      message: "公司编码格式不正确，支持2-50位字母、数字、下划线或短横线",
+      trigger: "blur"
+    }
+  ],
+  companyName: [
+    { required: true, message: "请输入公司简称/名称", trigger: "blur" },
+    { min: 2, max: 100, message: "公司名称长度需在 2 到 100 个字符之间", trigger: "blur" }
+  ],
+  legalName: [
+    { required: true, message: "请输入签署材料甲方全称", trigger: "blur" },
+    { min: 2, max: 100, message: "甲方全称长度需在 2 到 100 个字符之间", trigger: "blur" }
+  ],
+  unifiedSocialCreditCode: [
+    { required: true, message: "请输入统一社会信用代码", trigger: "blur" },
+    {
+      pattern: /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/i,
+      message: "统一社会信用代码格式不正确，请输入18位标准社会信用代码",
+      trigger: "blur"
+    }
+  ],
+  legalRepresentative: [
+    { required: true, message: "请输入法定代表人姓名", trigger: "blur" },
+    {
+      pattern: /^[\u4e00-\u9fa5a-zA-Z·.\s]{2,20}$/,
+      message: "法定代表人姓名格式不正确，请输入2-20位中英文姓名",
+      trigger: "blur"
+    }
+  ],
+  contactPhone: [
+    { required: true, message: "请输入企业联系电话", trigger: "blur" },
+    {
+      pattern: /^(1[3-9]\d{9}|(0\d{2,3}-?)?\d{7,8}|400(-?\d{3,4}){2})$/,
+      message: "联系电话格式不正确，请输入有效的手机号或固话号码",
+      trigger: "blur"
+    }
+  ],
+  status: [
+    { required: true, message: "请选择公司启用状态", trigger: "change" }
+  ],
+  registeredAddress: [
+    { required: true, message: "请输入企业法定注册地址", trigger: "blur" },
+    { min: 4, max: 200, message: "注册地址请至少输入4个字符", trigger: "blur" }
+  ],
+  qiyuesuoCategoryId: [
+    {
+      pattern: /^\d*$/,
+      message: "契约锁业务分类 Id 必须为纯数字",
+      trigger: "blur"
+    }
+  ],
+  qiyuesuoSealId: [
+    {
+      pattern: /^\d*$/,
+      message: "契约锁企业印章 Id 必须为纯数字",
+      trigger: "blur"
+    }
+  ]
+});
 const departmentForm = reactive<Partial<OnboardingDepartment>>(emptyDepartment());
 const positionForm = reactive<Partial<OnboardingPosition>>(emptyPosition());
 
@@ -438,6 +547,12 @@ const companyColumns: ColumnProps<OnboardingCompany>[] = [
     label: "联系电话",
     width: 140
   },
+  {
+    prop: "qiyuesuoConfig",
+    label: "契约锁配置",
+    width: 120,
+    align: "center"
+  },
   {
     prop: "status",
     label: "状态",
@@ -602,6 +717,9 @@ function openCompanyCreate() {
   editing.value = false;
   resetCompany();
   dialogVisible.value = true;
+  nextTick(() => {
+    companyFormRef.value?.clearValidate();
+  });
 }
 
 function openDepartmentCreate() {
@@ -625,6 +743,9 @@ async function openCompanyEdit(row: OnboardingCompany) {
   editing.value = true;
   Object.assign(companyForm, data);
   dialogVisible.value = true;
+  nextTick(() => {
+    companyFormRef.value?.clearValidate();
+  });
 }
 
 async function openDepartmentEdit(row: OnboardingDepartment) {
@@ -648,8 +769,21 @@ async function openPositionEdit(row: OnboardingPosition) {
 
 async function save() {
   if (dialogKind.value === "company") {
-    if (!companyForm.companyCode || !companyForm.companyName || !companyForm.legalName) {
-      return ElMessage.warning("请填写公司编码、公司名称和签署材料甲方全称");
+    const valid = await companyFormRef.value?.validate().catch(() => false);
+    if (!valid) return;
+
+    const categoryId = companyForm.qiyuesuoCategoryId?.trim() || "";
+    const sealId = companyForm.qiyuesuoSealId?.trim() || "";
+    if (Boolean(categoryId) !== Boolean(sealId)) {
+      return ElMessage.warning("契约锁默认业务分类 Id 和企业印章 Id 必须同时填写（或均不填）");
+    }
+    if (categoryId && (!/^\d+$/.test(categoryId) || !/^\d+$/.test(sealId))) {
+      return ElMessage.warning("契约锁默认业务分类 Id 和企业印章 Id 只能填写数字");
+    }
+    companyForm.qiyuesuoCategoryId = categoryId;
+    companyForm.qiyuesuoSealId = sealId;
+    if (companyForm.unifiedSocialCreditCode) {
+      companyForm.unifiedSocialCreditCode = companyForm.unifiedSocialCreditCode.trim().toUpperCase();
     }
     await onboardingTaskApi.saveCompany(companyForm, editing.value);
     companyTable.value?.refresh();

src/views/biz/onboarding/task/index.vue

@@ -250,49 +250,67 @@
               style="margin-bottom: 16px;"
             />
 
-            <el-row :gutter="20">
-              <el-col
-                v-for="item in form.contractVariables"
-                :key="`${item.contractTemplateVersionId}-${item.variableCode}`"
-                :xs="24"
-                :sm="12"
+            <!-- 按材料分组展示人事参数 -->
+            <div class="contract-vars-group-list">
+              <div
+                v-for="group in groupedContractVariables"
+                :key="group.contractTemplateVersionId"
+                class="contract-var-group-card"
               >
-                <el-form-item>
-                  <template #label>
-                    <div class="var-label-row">
-                      <span v-if="item.required" class="required-star">*</span>
-                      <span class="var-name">{{ item.variableName }}</span>
-                      <el-tag size="small" type="info" effect="plain" class="contract-source-tag">
-                        {{ item.contractName }}
-                      </el-tag>
-                    </div>
-                  </template>
+                <div class="var-group-header">
+                  <div class="var-group-title">
+                    <el-icon class="var-group-icon"><Document /></el-icon>
+                    <span class="var-group-name">{{ group.contractName }}</span>
+                  </div>
+                  <el-tag size="small" type="primary" effect="plain" class="var-group-count">
+                    {{ group.items.length }} 项人事参数
+                  </el-tag>
+                </div>
 
-                  <el-date-picker
-                    v-if="item.dataType === 'date'"
-                    v-model="item.variableValue"
-                    type="date"
-                    value-format="YYYY-MM-DD"
-                    placeholder="选择日期"
-                    class="var-input-field"
-                  />
-                  <el-input-number
-                    v-else-if="item.dataType === 'number' || item.dataType === 'decimal'"
-                    v-model="item.variableValue"
-                    controls-position="right"
-                    class="var-input-field"
-                    placeholder="输入金额或数值"
-                  />
-                  <el-input
-                    v-else
-                    v-model="item.variableValue"
-                    :placeholder="`请输入${item.variableName}`"
-                    class="var-input-field"
-                    clearable
-                  />
-                </el-form-item>
-              </el-col>
-            </el-row>
+                <div class="var-group-content">
+                  <el-row :gutter="20">
+                    <el-col
+                      v-for="item in group.items"
+                      :key="`${item.contractTemplateVersionId}-${item.variableCode}`"
+                      :xs="24"
+                      :sm="12"
+                    >
+                      <el-form-item>
+                        <template #label>
+                          <div class="var-label-row">
+                            <span v-if="item.required" class="required-star">*</span>
+                            <span class="var-name">{{ item.variableName }}</span>
+                          </div>
+                        </template>
+
+                        <el-date-picker
+                          v-if="item.dataType === 'date'"
+                          v-model="item.variableValue"
+                          type="date"
+                          value-format="YYYY-MM-DD"
+                          placeholder="选择日期"
+                          class="var-input-field"
+                        />
+                        <el-input-number
+                          v-else-if="item.dataType === 'number' || item.dataType === 'decimal'"
+                          v-model="item.variableValue"
+                          controls-position="right"
+                          class="var-input-field"
+                          placeholder="输入金额或数值"
+                        />
+                        <el-input
+                          v-else
+                          v-model="item.variableValue"
+                          :placeholder="`请输入${item.variableName}`"
+                          class="var-input-field"
+                          clearable
+                        />
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                </div>
+              </div>
+            </div>
           </div>
 
           <!-- 3. 合同逐份预览与确认 -->
@@ -1093,7 +1111,7 @@
 
           <el-alert
             v-if="!electronicSignDetail.hasProcess"
-            title="审核已通过，可将下列全部合同作为同一个签约流程发起。员工先签，完成后企业自动盖章。"
+            title="审核已通过，可将下列全部合同作为同一个签约流程发起。员工签完后，人事逐份核对，再由后台确认企业盖章。"
             type="info"
             show-icon
             :closable="false"
@@ -1159,6 +1177,15 @@
             </el-descriptions-item>
           </el-descriptions>
 
+          <el-alert
+            v-if="electronicSignDetail.signStatus === 'pending_company_seal'"
+            title="员工已完成签署，请逐份查看下方员工已签文件。全部核对后，才能确认企业盖章。"
+            type="warning"
+            show-icon
+            :closable="false"
+            class="electronic-sign-seal-alert"
+          />
+
           <div class="electronic-sign-section-title">
             本次签约文件（{{ electronicSignDetail.documents.length }} 份）
           </div>
@@ -1180,6 +1207,29 @@
                 </div>
               </div>
               <div class="electronic-sign-document-actions">
+                <el-tag
+                  v-if="
+                    electronicSignDetail.signStatus === 'pending_company_seal'
+                    && documentItem.employeeSignedPreviewed
+                  "
+                  type="success"
+                  size="small"
+                  effect="plain"
+                >
+                  已查看
+                </el-tag>
+                <el-button
+                  v-if="
+                    electronicSignDetail.signStatus === 'pending_company_seal'
+                    && documentItem.providerDocumentId
+                  "
+                  link
+                  type="warning"
+                  :loading="electronicSignPreviewingDocumentId === documentItem.id"
+                  @click="previewEmployeeSignedDocument(documentItem)"
+                >
+                  {{ documentItem.employeeSignedPreviewed ? '再次查看员工已签文件' : '查看员工已签文件' }}
+                </el-button>
                 <el-button
                   v-if="documentItem.originalDocxFileId"
                   link
@@ -1291,6 +1341,18 @@
             >
               同步状态
             </el-button>
+            <el-button
+              v-if="
+                electronicSignDetail?.hasProcess
+                && electronicSignDetail.signStatus === 'pending_company_seal'
+              "
+              type="primary"
+              :loading="electronicSignLoading"
+              :disabled="!allEmployeeSignedDocumentsPreviewed"
+              @click="confirmCompanySeal"
+            >
+              确认企业盖章
+            </el-button>
             <el-button
               v-if="electronicSignDetail?.archiveFileId"
               type="success"
@@ -1354,7 +1416,8 @@ import {
   type OnboardingContractTemplate,
   type OnboardingTask,
   type OnboardingTaskContractVariableGroup,
-  type OnboardingElectronicSignDetail
+  type OnboardingElectronicSignDetail,
+  type OnboardingElectronicSignDocument
 } from "@/api/modules/biz/onboarding";
 import type { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
 import { getMessageBoxPromptResult, isMessageBoxConfirmed } from "@/utils/messageBox";
@@ -1549,6 +1612,7 @@ const savingAllVars = ref(false);
 
 const electronicSignVisible = ref(false);
 const electronicSignLoading = ref(false);
+const electronicSignPreviewingDocumentId = ref<number>();
 const electronicSignTask = ref<OnboardingTask>();
 const electronicSignDetail = ref<OnboardingElectronicSignDetail>();
 const electronicSignStep = computed(() => {
@@ -1565,6 +1629,13 @@ const canInvalidElectronicSign = computed(() => {
     current.signStatus || ""
   );
 });
+const allEmployeeSignedDocumentsPreviewed = computed(() => {
+  const current = electronicSignDetail.value;
+  return Boolean(
+    current?.documents.length
+    && current.documents.every(item => item.employeeSignedPreviewed)
+  );
+});
 
 function countVarType(variables: any[], type: string) {
   if (!variables) return 0;
@@ -1644,6 +1715,29 @@ const form = reactive({
   remark: ""
 });
 
+const groupedContractVariables = computed(() => {
+  const groups: Array<{
+    contractTemplateVersionId: number;
+    contractName: string;
+    items: typeof form.contractVariables;
+  }> = [];
+
+  form.contractVariables.forEach(item => {
+    let group = groups.find(g => g.contractTemplateVersionId === item.contractTemplateVersionId);
+    if (!group) {
+      group = {
+        contractTemplateVersionId: item.contractTemplateVersionId,
+        contractName: item.contractName || "签署材料",
+        items: []
+      };
+      groups.push(group);
+    }
+    group.items.push(item);
+  });
+
+  return groups;
+});
+
 watch(
   () => [
     form.companyId,
@@ -2559,7 +2653,7 @@ async function initiateElectronicSign() {
   const documentCount = current.documents.length;
   const confirmed = await isMessageBoxConfirmed(
     ElMessageBox.confirm(
-      `将把 ${documentCount} 份合同放入同一个契约锁签约流程，员工先签、企业随后自动盖章。确认现在发起吗？`,
+      `将把 ${documentCount} 份合同放入同一个契约锁签约流程。员工签完后，需要人事逐份核对并在后台确认企业盖章。确认现在发起吗？`,
       current.hasProcess ? "继续电子签流程" : "发起电子签确认",
       {
         type: "warning",
@@ -2600,6 +2694,82 @@ async function syncElectronicSign() {
   }
 }
 
+async function previewEmployeeSignedDocument(
+  documentItem: OnboardingElectronicSignDocument
+) {
+  const task = electronicSignTask.value;
+  if (!task || !documentItem.id) return;
+
+  // 必须在用户点击时先打开空白页，否则等待接口返回后再打开可能被浏览器拦截。
+  const previewWindow = window.open("", "_blank");
+  if (!previewWindow) {
+    ElMessage.warning("浏览器拦截了预览窗口，请允许本站打开新窗口后重试");
+    return;
+  }
+  previewWindow.opener = null;
+  try {
+    previewWindow.document.title = "员工已签合同加载中";
+    previewWindow.document.body.innerText = "正在打开契约锁员工已签文件，请稍候……";
+  } catch {
+    // 空白页提示失败不影响后续跳转。
+  }
+
+  electronicSignPreviewingDocumentId.value = documentItem.id;
+  try {
+    const { data } = await onboardingTaskApi.previewEmployeeSignedDocument(
+      task.id,
+      documentItem.id
+    );
+    if (!data.previewUrl) throw new Error("契约锁没有返回合同浏览地址");
+    documentItem.employeeSignedPreviewed = true;
+    previewWindow.location.replace(data.previewUrl);
+  } catch (error) {
+    previewWindow.close();
+    throw error;
+  } finally {
+    electronicSignPreviewingDocumentId.value = undefined;
+  }
+}
+
+async function confirmCompanySeal() {
+  const task = electronicSignTask.value;
+  const current = electronicSignDetail.value;
+  if (!task || current?.signStatus !== "pending_company_seal") return;
+  if (!allEmployeeSignedDocumentsPreviewed.value) {
+    ElMessage.warning("请先逐份查看所有员工已签文件");
+    return;
+  }
+
+  const confirmed = await isMessageBoxConfirmed(
+    ElMessageBox.confirm(
+      `已逐份核对 ${current.documents.length} 份员工已签文件。确认使用当前公司的印章执行企业盖章吗？盖章后合同内容不能修改。`,
+      "确认企业盖章",
+      {
+        type: "warning",
+        confirmButtonText: "确认盖章",
+        cancelButtonText: "取消"
+      }
+    )
+  );
+  if (!confirmed) return;
+
+  electronicSignLoading.value = true;
+  try {
+    const { data } = await onboardingTaskApi.companySealElectronicSign(task.id);
+    electronicSignDetail.value = data;
+    if (["completed", "archived"].includes(data.signStatus || "")) {
+      ElMessage.success("企业盖章已完成");
+    } else {
+      ElMessage.success("企业盖章请求已提交，系统正在同步签署结果");
+    }
+  } catch (error) {
+    await loadElectronicSignDetail().catch(() => undefined);
+    throw error;
+  } finally {
+    electronicSignLoading.value = false;
+  }
+}
+
 
 async function reinitiateElectronicSign() {
   const task = electronicSignTask.value;
@@ -3210,6 +3380,65 @@ onMounted(loadCompanies);
   margin-top: 5px;
 }
 
+.contract-vars-group-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.contract-var-group-card {
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  background-color: #f8fafc;
+  overflow: hidden;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.contract-var-group-card:hover {
+  border-color: #cbd5e1;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.var-group-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.var-group-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.var-group-icon {
+  font-size: 16px;
+  color: #3b82f6;
+}
+
+.var-group-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.var-group-count {
+  font-weight: 500;
+  border-radius: 4px;
+}
+
+.var-group-content {
+  padding: 16px 16px 0 16px;
+  background-color: #ffffff;
+}
+
+.var-group-content :deep(.el-form-item) {
+  margin-bottom: 16px;
+}
+
 .var-label-row {
   display: flex;
   align-items: center;
@@ -3582,6 +3811,10 @@ onMounted(loadCompanies);
   margin-bottom: 20px;
 }
 
+.electronic-sign-seal-alert {
+  margin-bottom: 20px;
+}
+
 .electronic-sign-section-title {
   margin-bottom: 10px;
   color: var(--el-text-color-primary);
@@ -3620,6 +3853,13 @@ onMounted(loadCompanies);
 
 .electronic-sign-document-actions {
   flex-shrink: 0;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.electronic-sign-document-actions :deep(.el-button) {
+  margin-left: 0;
 }
 
 .document-state-text {
@@ -3656,5 +3896,9 @@ onMounted(loadCompanies);
     align-items: stretch;
     flex-direction: column;
   }
+
+  .electronic-sign-document-actions {
+    justify-content: flex-start;
+  }
 }
 </style>