From b02bbee64736aa8c09b6fa001a34dbfcc1578c0a Mon Sep 17 00:00:00 2001
From: zouyu <2723363702@qq.com>
Date: 星期四, 02 七月 2026 15:16:43 +0800
Subject: [PATCH] 采购台账:新增或编辑重复添加协调审批记录问题修复&编辑时添加产品报错问题修复

---
 src/views/personnelManagement/socialSecuritySet/components/formDia.vue |  711 +++++++++++++++++++++++++++++++++++------------------------
 1 files changed, 423 insertions(+), 288 deletions(-)

diff --git a/src/views/personnelManagement/socialSecuritySet/components/formDia.vue b/src/views/personnelManagement/socialSecuritySet/components/formDia.vue
index 3feab2d..a8cba91 100644
--- a/src/views/personnelManagement/socialSecuritySet/components/formDia.vue
+++ b/src/views/personnelManagement/socialSecuritySet/components/formDia.vue
@@ -1,31 +1,31 @@
 <template>
   <div>
-    <FormDialog
-      v-model="dialogFormVisible"
-      :operation-type="operationType"
-      :title="dialogTitle"
-      width="80%"
-      @close="closeDia"
-      @confirm="submitForm"
-      @cancel="closeDia"
-    >
-      <el-form ref="formRef" :model="form" :rules="rules" label-position="top">
+    <FormDialog v-model="dialogFormVisible"
+                :operation-type="operationType"
+                :title="dialogTitle"
+                width="80%"
+                @close="closeDia"
+                @confirm="submitForm"
+                @cancel="closeDia">
+      <el-form ref="formRef"
+               :model="form"
+               :rules="rules"
+               label-position="top">
         <el-row :gutter="24">
           <!-- 宸︿晶锛氶�傜敤浜哄憳 -->
           <el-col :span="8">
-            <el-form-item label="閫傜敤浜哄憳锛�" prop="deptIds">
+            <el-form-item label="閫傜敤浜哄憳锛�"
+                          prop="deptIds">
               <div class="dept-checkbox-wrap">
-                <el-checkbox-group v-model="form.deptIds">
-                  <div
-                    v-for="dept in deptList"
-                    :key="dept.deptId"
-                    class="dept-checkbox-item"
-                  >
+                <el-checkbox-group v-model="form.deptIds"
+                                   :disabled="isDetail">
+                  <div v-for="dept in deptList"
+                       :key="dept.deptId"
+                       class="dept-checkbox-item">
                     <el-checkbox :value="dept.deptId">
                       {{ dept.deptName }}
-                      <span v-if="dept.personCount != null" class="dept-count"
-                        >{{ dept.personCount }}浜�</span
-                      >
+                      <span v-if="dept.personCount != null"
+                            class="dept-count">{{ dept.personCount }}浜�</span>
                     </el-checkbox>
                   </div>
                 </el-checkbox-group>
@@ -35,96 +35,117 @@
           <!-- 鍙充晶锛氬熀纭�淇℃伅 + 淇濋櫓绫诲瀷 -->
           <el-col :span="16">
             <!-- 鍩虹淇℃伅 -->
-            <el-card class="form-card" shadow="never">
+            <el-card class="form-card"
+                     shadow="never">
               <template #header>
                 <span class="card-title"><span class="card-title-line">|</span> 鍩虹淇℃伅</span>
-                <el-icon class="card-collapse"><ArrowUp /></el-icon>
+                <el-icon class="card-collapse">
+                  <ArrowUp />
+                </el-icon>
               </template>
-              <el-form-item label="鏂规鏍囬锛�" prop="title">
-                <el-input v-model="form.title" placeholder="璇疯緭鍏�" clearable />
+              <el-form-item label="鏂规鏍囬锛�"
+                            prop="title">
+                <el-input v-model="form.title"
+                          placeholder="璇疯緭鍏�"
+                          clearable
+                          :disabled="isDetail" />
               </el-form-item>
-              <el-form-item label="澶囨敞锛�" prop="remark">
-                <el-input
-                  v-model="form.remark"
-                  type="textarea"
-                  :rows="2"
-                  placeholder="璇疯緭鍏�"
-                  clearable
-                />
+              <el-form-item label="澶囨敞锛�"
+                            prop="remark">
+                <el-input v-model="form.remark"
+                          type="textarea"
+                          :rows="2"
+                          placeholder="璇疯緭鍏�"
+                          clearable
+                          :disabled="isDetail" />
               </el-form-item>
             </el-card>
-
             <!-- 淇濋櫓绫诲瀷 -->
-            <el-card class="form-card" shadow="never">
+            <el-card class="form-card"
+                     shadow="never">
               <template #header>
                 <span class="card-title"><span class="card-title-line">|</span> 淇濋櫓绫诲瀷</span>
-                <el-button type="primary" size="small" @click="addInsuranceBenefit">
+                <el-button v-if="!isDetail"
+                           type="primary"
+                           size="small"
+                           @click="addInsuranceBenefit">
                   娣诲姞淇濋櫓绂忓埄
                 </el-button>
               </template>
               <el-row :gutter="16">
-                <el-col
-                  v-for="(item, index) in form.insuranceBenefits"
-                  :key="item._key"
-                  :span="12"
-                >
+                <el-col v-for="(item, index) in form.insuranceBenefits"
+                        :key="item._key"
+                        :span="12">
                   <div class="insurance-benefit-card">
                     <div class="insurance-benefit-title">
                       淇濋櫓绂忓埄{{ index + 1 }}
-                      <el-button
-                        v-if="form.insuranceBenefits.length > 1"
-                        type="danger"
-                        link
-                        size="small"
-                        class="card-delete-btn"
-                        @click="removeInsuranceBenefit(index)"
-                      >
+                      <el-button v-if="!isDetail && form.insuranceBenefits.length > 1"
+                                 type="danger"
+                                 link
+                                 size="small"
+                                 class="card-delete-btn"
+                                 @click="removeInsuranceBenefit(index)">
                         鍒犻櫎
                       </el-button>
                     </div>
-                    <el-form-item
-                      :prop="'insuranceBenefits.' + index + '.insuranceType'"
-                      label="淇濋櫓绫诲瀷锛�"
-                      label-width="100px"
+                    <el-form-item :prop="'insuranceBenefits.' + index + '.insuranceType'"
+                                  label="淇濋櫓绫诲瀷锛�"
+                                  label-width="100px"
+                                  :rules="[{ required: true, message: '璇烽�夋嫨淇濋櫓绫诲瀷', trigger: 'blur' }]"
                     >
-                      <el-select
-                        v-model="item.insuranceType"
-                        placeholder="璇烽�夋嫨"
-                        clearable
-                        style="width: 100%"
-                      >
-                        <el-option
-                          v-for="opt in insuranceTypeOptions"
-                          :key="opt.value"
-                          :label="opt.label"
-                          :value="opt.value"
-                        />
+                      <el-select v-model="item.insuranceType"
+                                 placeholder="璇烽�夋嫨"
+                                 clearable
+                                 style="width: 100%"
+                                 :disabled="isDetail">
+                        <el-option v-for="opt in insuranceTypeOptions"
+                                   :key="opt.value"
+                                   :label="opt.label"
+                                   :value="opt.value" />
                       </el-select>
                     </el-form-item>
-                    <el-form-item label="缂磋垂鍩烘暟锛�" label-width="100px">
-                      <div class="checkbox-group-inline">
-                        <el-checkbox v-model="item.baseOnSalary">鏍规嵁鍩烘湰宸ヨ祫缂寸撼</el-checkbox>
-                        <el-checkbox v-model="item.useBasicSalary">璋冪敤鍩烘湰宸ヨ祫</el-checkbox>
+                    <el-form-item label="缂磋垂鍩烘暟锛�"
+                                  label-width="100px"
+                                  :prop="'insuranceBenefits.' + index + '.paymentBase'"
+                                  :rules="[{ validator: validatePaymentBase, trigger: 'blur' }]">
+                      <div class="base-salary-wrap">
+                        <el-input v-model="item.paymentBase"
+                                  placeholder="鏍规嵁鍩烘湰宸ヨ祫缂寸撼"
+                                  clearable
+                                  style="width: 120px"
+                                  type="number"
+                                  :disabled="isDetail || item.useBasicSalary"
+                                  @input="handlePaymentBaseInput(item)" />
+                        <el-checkbox v-model="item.useBasicSalary"
+                                     @change="(val) => handleUseBasicSalaryChange(item, index)"
+                                     :disabled="isDetail">
+                          璋冪敤鍩烘湰宸ヨ祫
+                        </el-checkbox>
                       </div>
                     </el-form-item>
-                    <el-form-item label="涓汉缂磋垂姣斾緥锛�" label-width="100px">
+                    <el-form-item label="涓汉缂磋垂姣斾緥锛�"
+                                  label-width="100px"
+                                  :prop="'insuranceBenefits.' + index + '.personalRatio'"
+                                  :rules="[{ required: true, message: '璇疯緭鍏ヤ釜浜虹即璐规瘮渚�', trigger: 'blur' }]">
                       <div class="personal-ratio-wrap">
-                        <el-input
-                          v-model="item.personalRatio"
-                          placeholder="璇疯緭鍏�"
-                          clearable
-                          style="width: 100px"
-                          type="number"
-                        />
+                        <el-input v-model="item.personalRatio"
+                                  placeholder="璇疯緭鍏�"
+                                  clearable
+                                  style="width: 100px"
+                                  type="number"
+                                  :disabled="isDetail"
+                                  :min="0"
+                                  @input="handlePersonalRatioInput(item)" />
                         <span class="ratio-unit">(%)</span>
                         <span class="ratio-plus">+</span>
-                        <el-input
-                          v-model="item.personalFixed"
-                          placeholder="璇疯緭鍏�"
-                          clearable
-                          style="width: 100px"
-                          type="number"
-                        />
+                        <el-input v-model="item.personalFixed"
+                                  placeholder="璇疯緭鍏�"
+                                  clearable
+                                  style="width: 100px"
+                                  type="number"
+                                  :disabled="isDetail"
+                                  :min="0"
+                                  @input="handlePersonalFixedInput(item)" />
                       </div>
                     </el-form-item>
                   </div>
@@ -139,231 +160,345 @@
 </template>
 
 <script setup>
-import { ref, reactive, toRefs, getCurrentInstance, nextTick } from "vue";
-import FormDialog from "@/components/Dialog/FormDialog.vue";
-import { ArrowUp } from "@element-plus/icons-vue";
-import { listDept } from "@/api/system/dept.js";
-import {
-  socialSecurityInfo,
-  socialSecurityAdd,
-  socialSecurityUpdate,
-} from "@/api/personnelManagement/socialSecuritySet.js";
+  import {
+    ref,
+    reactive,
+    toRefs,
+    getCurrentInstance,
+    nextTick,
+    computed,
+  } from "vue";
+  import FormDialog from "@/components/Dialog/FormDialog.vue";
+  import { ArrowUp } from "@element-plus/icons-vue";
+  import { listDept } from "@/api/system/dept.js";
+  import {
+    socialSecurityAdd,
+    socialSecurityUpdate,
+  } from "@/api/personnelManagement/socialSecuritySet.js";
 
-const emit = defineEmits(["close"]);
-const { proxy } = getCurrentInstance();
+  const emit = defineEmits(["close"]);
+  const { proxy } = getCurrentInstance();
 
-const dialogFormVisible = ref(false);
-const operationType = ref("add");
-const formRef = ref(null);
-const deptList = ref([]);
+  const dialogFormVisible = ref(false);
+  const operationType = ref("add");
+  const formRef = ref(null);
+  const deptList = ref([]);
 
-const dialogTitle = () =>
-  operationType.value === "add" ? "鏂板鏂规" : "缂栬緫鏂规";
+  const isDetail = computed(() => operationType.value === "detail");
 
-// 淇濋櫓绫诲瀷閫夐」锛堝彲鎸夊瓧鍏告浛鎹級
-const insuranceTypeOptions = [
-  { label: "鍏昏�佷繚闄�", value: "pension" },
-  { label: "鍖荤枟淇濋櫓", value: "medical" },
-  { label: "澶变笟淇濋櫓", value: "unemployment" },
-  { label: "宸ヤ激淇濋櫓", value: "work_injury" },
-  { label: "鐢熻偛淇濋櫓", value: "maternity" },
-];
+  const dialogTitle = () =>
+    operationType.value === "add"
+      ? "鏂板鏂规"
+      : operationType.value === "edit"
+      ? "缂栬緫鏂规"
+      : "鏂规璇︽儏";
 
-const defaultBenefit = () => ({
-  _key: Math.random().toString(36).slice(2),
-  insuranceType: "",
-  baseOnSalary: false,
-  useBasicSalary: false,
-  personalRatio: "",
-  personalFixed: "",
-});
+  // 淇濋櫓绫诲瀷閫夐」锛堝彲鎸夊瓧鍏告浛鎹級
+  const insuranceTypeOptions = [
+    { label: "鍏昏�佷繚闄�", value: "鍏昏�佷繚闄�" },
+    { label: "鍖荤枟淇濋櫓", value: "鍖荤枟淇濋櫓" },
+    { label: "澶变笟淇濋櫓", value: "澶变笟淇濋櫓" },
+    { label: "宸ヤ激淇濋櫓", value: "宸ヤ激淇濋櫓" },
+    { label: "鐢熻偛淇濋櫓", value: "鐢熻偛淇濋櫓" },
+    { label: "鍏Н閲�", value: "鍏Н閲�" },
+  ];
 
-const data = reactive({
-  form: {
-    id: undefined,
-    title: "",
-    remark: "",
-    deptIds: [],
-    insuranceBenefits: [defaultBenefit()],
-  },
-  rules: {
-    title: [{ required: true, message: "璇疯緭鍏ユ柟妗堟爣棰�", trigger: "blur" }],
-    deptIds: [
-      {
-        required: true,
-        type: "array",
-        min: 1,
-        message: "璇疯嚦灏戦�夋嫨涓�涓�傜敤閮ㄩ棬",
-        trigger: "change",
-      },
-    ],
-  },
-});
-const { form, rules } = toRefs(data);
+  const defaultBenefit = () => ({
+    _key: Math.random().toString(36).slice(2),
+    insuranceType: "",
+    paymentBase: "",
+    useBasicSalary: false,
+    personalRatio: "",
+    personalFixed: "",
+  });
 
-function flattenDept(tree, list = []) {
-  if (!tree || !tree.length) return list;
-  tree.forEach((node) => {
-    list.push({
-      deptId: node.deptId,
-      deptName: node.deptName,
-      personCount: node.personCount ?? null,
+  const data = reactive({
+    form: {
+      id: undefined,
+      title: "",
+      remark: "",
+      deptIds: [],
+      insuranceBenefits: [defaultBenefit()],
+    },
+    rules: {
+      title: [{ required: true, message: "璇疯緭鍏ユ柟妗堟爣棰�", trigger: "blur" }],
+      deptIds: [
+        {
+          required: true,
+          type: "array",
+          min: 1,
+          message: "璇疯嚦灏戦�夋嫨涓�涓�傜敤閮ㄩ棬",
+          trigger: "change",
+        },
+      ],
+    },
+  });
+  const { form, rules } = toRefs(data);
+
+  function flattenDept(tree, list = []) {
+    if (!tree || !tree.length) return list;
+    tree.forEach(node => {
+      list.push({
+        deptId: node.deptId,
+        deptName: node.deptName,
+        personCount: node.personCount ?? null,
+      });
+      if (node.children && node.children.length) {
+        flattenDept(node.children, list);
+      }
     });
-    if (node.children && node.children.length) {
-      flattenDept(node.children, list);
-    }
-  });
-  return list;
-}
+    return list;
+  }
 
-const loadDeptList = () => {
-  listDept().then((res) => {
-    const tree = res.data ?? [];
-    deptList.value = flattenDept(tree);
-  });
-};
-
-const addInsuranceBenefit = () => {
-  form.value.insuranceBenefits.push(defaultBenefit());
-};
-
-const removeInsuranceBenefit = (index) => {
-  form.value.insuranceBenefits.splice(index, 1);
-};
-
-const resetForm = () => {
-  form.value = {
-    id: undefined,
-    title: "",
-    remark: "",
-    deptIds: [],
-    insuranceBenefits: [defaultBenefit()],
+  const loadDeptList = () => {
+    listDept().then(res => {
+      const tree = res.data ?? [];
+      deptList.value = flattenDept(tree);
+    });
   };
-};
 
-const openDialog = (type, row) => {
-  operationType.value = type;
-  dialogFormVisible.value = true;
-  loadDeptList();
-  resetForm();
-  if (type === "edit" && row?.id) {
-    socialSecurityInfo(row.id).then((res) => {
-      const d = res.data || {};
+  const addInsuranceBenefit = () => {
+    form.value.insuranceBenefits.push(defaultBenefit());
+  };
+
+  const removeInsuranceBenefit = index => {
+    form.value.insuranceBenefits.splice(index, 1);
+  };
+
+  const handleUseBasicSalaryChange = (item, index) => {
+    if (item.useBasicSalary) {
+      item.paymentBase = "";
+    }
+    nextTick(() => {
+      formRef.value?.validateField(`insuranceBenefits.${index}.paymentBase`);
+    });
+  };
+
+  const handlePaymentBaseInput = item => {
+    if (item.paymentBase !== "" && item.paymentBase != null) {
+      item.useBasicSalary = false;
+    }
+  };
+
+  const handlePersonalRatioInput = item => {
+    if (item.personalRatio !== "" && item.personalRatio != null) {
+      const value = Number(item.personalRatio);
+      if (value < 0) {
+        item.personalRatio = "";
+      }
+    }
+  };
+
+  const handlePersonalFixedInput = item => {
+    if (item.personalFixed !== "" && item.personalFixed != null) {
+      const value = Number(item.personalFixed);
+      if (value < 0) {
+        item.personalFixed = "";
+      }
+    }
+  };
+
+  const validatePaymentBase = (rule, value, callback) => {
+    const match = rule.field.match(/insuranceBenefits\.(\d+)\.paymentBase/);
+    if (match) {
+      const index = parseInt(match[1], 10);
+      const item = form.value.insuranceBenefits[index];
+      if (item && !item.useBasicSalary && (!value || value === "")) {
+        callback(new Error("璇疯緭鍏ョ即璐瑰熀鏁�"));
+      } else {
+        callback();
+      }
+    } else {
+      callback();
+    }
+  };
+
+  const resetForm = () => {
+    form.value = {
+      id: undefined,
+      title: "",
+      remark: "",
+      deptIds: [],
+      insuranceBenefits: [defaultBenefit()],
+    };
+  };
+
+  const openDialog = (type, row) => {
+    operationType.value = type;
+    dialogFormVisible.value = true;
+    loadDeptList();
+    resetForm();
+    if ((type === "edit" || type === "detail") && row) {
+      const d = row || {};
       form.value.id = d.id;
       form.value.title = d.title;
       form.value.remark = d.remark ?? "";
-      form.value.deptIds = d.deptIds ?? [];
+      // deptIds 鍚庣鍙兘鏄�楀彿鍒嗛殧瀛楃涓叉垨鏁扮粍锛岃繖閲岀粺涓�杞负鏁扮粍骞跺敖閲忚繕鍘熸暟鍊肩被鍨�
+      if (d.deptIds) {
+        form.value.deptIds = String(d.deptIds)
+          .split(",")
+          .filter(v => v !== "")
+          .map(v => {
+            const num = Number(v);
+            return Number.isNaN(num) ? v : num;
+          });
+      } else {
+        form.value.deptIds = [];
+      }
+      const detailList = d.schemeInsuranceDetailList || [];
       form.value.insuranceBenefits =
-        (d.insuranceBenefits && d.insuranceBenefits.length)
-          ? d.insuranceBenefits.map((b) => ({
-              ...b,
-              _key: b._key || Math.random().toString(36).slice(2),
+        detailList.length > 0
+          ? detailList.map(b => ({
+              _key: Math.random().toString(36).slice(2),
+              insuranceType: b.insuranceType || "",
+              paymentBase: b.paymentBase ?? "",
+              useBasicSalary: b.useBasicSalary === 2,
+              personalRatio: b.personalRatio ?? "",
+              personalFixed: b.personalFixed ?? "",
             }))
           : [defaultBenefit()];
-    });
-  }
-};
-
-const submitForm = () => {
-  formRef.value?.validate((valid) => {
-    if (!valid) return;
-    const submitData = {
-      ...form.value,
-      insuranceBenefits: form.value.insuranceBenefits.map(
-        ({ _key, ...rest }) => rest
-      ),
-    };
-    if (operationType.value === "add") {
-      socialSecurityAdd(submitData).then(() => {
-        proxy.$modal.msgSuccess("鏂板鎴愬姛");
-        closeDia();
-      });
-    } else {
-      socialSecurityUpdate(submitData).then(() => {
-        proxy.$modal.msgSuccess("淇敼鎴愬姛");
-        closeDia();
-      });
     }
-  });
-};
+  };
 
-const closeDia = () => {
-  proxy.resetForm?.("formRef");
-  dialogFormVisible.value = false;
-  emit("close");
-};
+  const submitForm = () => {
+    // 璇︽儏妯″紡涓嬩笉鎻愪氦锛屽彧鍏抽棴寮圭獥
+    if (operationType.value === "detail") {
+      closeDia();
+      return;
+    }
+    formRef.value?.validate(valid => {
+      if (!valid) return;
+      const deptIds =
+        Array.isArray(form.value.deptIds) && form.value.deptIds.length
+          ? form.value.deptIds.join(",")
+          : "";
+      const schemeInsuranceDetailList = (form.value.insuranceBenefits || []).map(
+        ({ _key, ...rest }) => ({
+          ...rest,
+          useBasicSalary: rest.useBasicSalary ? 2 : 1,
+        })
+      );
+      const insuranceTypes = schemeInsuranceDetailList
+        .map(item => item.insuranceType)
+        .filter(v => v)
+        .join(",");
+      // 閮ㄩ棬鍚嶇О锛屽涓娇鐢ㄩ�楀彿闅斿紑锛堟牴鎹�変腑鐨� deptIds 涓� deptList 璁$畻锛�
+      const deptNames = (deptList.value || [])
+        .filter(d =>
+          (form.value.deptIds || []).some(id => String(id) === String(d.deptId))
+        )
+        .map(d => d.deptName)
+        .join(",");
+      const submitData = {
+        id: form.value.id,
+        title: form.value.title,
+        remark: form.value.remark ?? "",
+        deptIds,
+        insuranceTypes,
+        deptNames,
+        schemeInsuranceDetailList,
+      };
+      if (operationType.value === "add") {
+        socialSecurityAdd(submitData).then(() => {
+          proxy.$modal.msgSuccess("鏂板鎴愬姛");
+          closeDia();
+        });
+      } else {
+        socialSecurityUpdate(submitData).then(() => {
+          proxy.$modal.msgSuccess("淇敼鎴愬姛");
+          closeDia();
+        });
+      }
+    });
+  };
 
-defineExpose({ openDialog });
+  const closeDia = () => {
+    proxy.resetForm?.("formRef");
+    dialogFormVisible.value = false;
+    emit("close");
+  };
+
+  defineExpose({ openDialog });
 </script>
 
 <style scoped>
-.card-title-line {
-  color: #f56c6c;
-  margin-right: 4px;
-}
-.form-card {
-  margin-bottom: 16px;
-}
-.form-card :deep(.el-card__header) {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-}
-.card-title {
-  font-weight: 500;
-}
-.card-collapse {
-  color: #999;
-  cursor: pointer;
-}
-.dept-checkbox-wrap {
-  max-height: 320px;
-  overflow-y: auto;
-  padding: 8px 0;
-  border: 1px solid var(--el-border-color);
-  border-radius: 4px;
-  background: #fff;
-}
-.dept-checkbox-item {
-  padding: 6px 12px;
-}
-.dept-count {
-  color: #909399;
-  font-size: 12px;
-  margin-left: 4px;
-}
-.insurance-benefit-card {
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 4px;
-  padding: 12px 16px;
-  margin-bottom: 12px;
-  background: #fafafa;
-}
-.insurance-benefit-title {
-  font-size: 14px;
-  margin-bottom: 12px;
-  font-weight: 500;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.card-delete-btn {
-  margin-left: auto;
-}
-.checkbox-group-inline {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-}
-.personal-ratio-wrap {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.ratio-unit,
-.ratio-plus {
-  color: #606266;
-  font-size: 14px;
-}
-</style>
+  .card-title-line {
+    color: #f56c6c;
+    margin-right: 4px;
+  }
+  .form-card {
+    margin-bottom: 16px;
+  }
+  .form-card :deep(.el-card__header) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+  }
+  .card-title {
+    font-weight: 500;
+  }
+  .card-collapse {
+    color: #999;
+    cursor: pointer;
+  }
+  .dept-checkbox-wrap {
+    max-height: 320px;
+    overflow-y: auto;
+    padding: 8px 0;
+    border: 1px solid var(--el-border-color);
+    border-radius: 4px;
+    background: #fff;
+  }
+  .dept-checkbox-item {
+    padding: 6px 12px;
+  }
+  .dept-count {
+    color: #909399;
+    font-size: 12px;
+    margin-left: 4px;
+  }
+  .insurance-benefit-card {
+    border: 1px solid var(--el-border-color-lighter);
+    border-radius: 4px;
+    padding: 12px 16px;
+    margin-bottom: 12px;
+    background: #fafafa;
+  }
+  .insurance-benefit-title {
+    font-size: 14px;
+    margin-bottom: 12px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .card-delete-btn {
+    margin-left: auto;
+  }
+  .checkbox-group-inline {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+  }
+  .base-salary-wrap {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+  }
+  .base-salary-text {
+    color: #606266;
+    font-size: 14px;
+  }
+  .personal-ratio-wrap {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .ratio-unit,
+  .ratio-plus {
+    color: #606266;
+    font-size: 14px;
+  }
+</style>
\ No newline at end of file

--
Gitblit v1.9.3