From d1b00f612f24bbd547e2bd3cad877d55602cd087 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期五, 12 六月 2026 10:45:22 +0800
Subject: [PATCH] 个人缴费比例限制输入
---
src/views/personnelManagement/socialSecuritySet/components/formDia.vue | 784 ++++++++++++++++++++++++++++---------------------------
1 files changed, 397 insertions(+), 387 deletions(-)
diff --git a/src/views/personnelManagement/socialSecuritySet/components/formDia.vue b/src/views/personnelManagement/socialSecuritySet/components/formDia.vue
index 71f5e61..985a6b1 100644
--- a/src/views/personnelManagement/socialSecuritySet/components/formDia.vue
+++ b/src/views/personnelManagement/socialSecuritySet/components/formDia.vue
@@ -1,34 +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"
- :disabled="isDetail"
- >
- <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>
@@ -38,124 +35,111 @@
<!-- 鍙充晶锛氬熀纭�淇℃伅 + 淇濋櫓绫诲瀷 -->
<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
- :disabled="isDetail"
- />
+ <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
- :disabled="isDetail"
- />
+ <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
- v-if="!isDetail"
- 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="!isDetail && 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-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-form-item :prop="'insuranceBenefits.' + index + '.insuranceType'"
+ label="淇濋櫓绫诲瀷锛�"
+ label-width="100px">
+ <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">
+ <el-form-item label="缂磋垂鍩烘暟锛�"
+ label-width="100px">
<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="handleUseBasicSalaryChange(item)"
- :disabled="isDetail"
- >
+ <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="handleUseBasicSalaryChange(item)"
+ :disabled="isDetail">
璋冪敤鍩烘湰宸ヨ祫
</el-checkbox>
</div>
</el-form-item>
- <el-form-item label="涓汉缂磋垂姣斾緥锛�" label-width="100px">
+ <el-form-item label="涓汉缂磋垂姣斾緥锛�"
+ label-width="100px">
<div class="personal-ratio-wrap">
- <el-input
- v-model="item.personalRatio"
- placeholder="璇疯緭鍏�"
- clearable
- style="width: 100px"
- type="number"
- :disabled="isDetail"
- />
+ <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"
- :disabled="isDetail"
- />
+ <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>
@@ -170,301 +154,327 @@
</template>
<script setup>
-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";
+ 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 isDetail = computed(() => operationType.value === "detail");
+ const isDetail = computed(() => operationType.value === "detail");
-const dialogTitle = () =>
- operationType.value === "add"
- ? "鏂板鏂规"
- : operationType.value === "edit"
- ? "缂栬緫鏂规"
- : "鏂规璇︽儏";
+ const dialogTitle = () =>
+ operationType.value === "add"
+ ? "鏂板鏂规"
+ : operationType.value === "edit"
+ ? "缂栬緫鏂规"
+ : "鏂规璇︽儏";
-// 淇濋櫓绫诲瀷閫夐」锛堝彲鎸夊瓧鍏告浛鎹級
-const insuranceTypeOptions = [
- { label: "鍏昏�佷繚闄�", value: "鍏昏�佷繚闄�" },
- { label: "鍖荤枟淇濋櫓", value: "鍖荤枟淇濋櫓" },
- { label: "澶变笟淇濋櫓", value: "澶变笟淇濋櫓" },
- { label: "宸ヤ激淇濋櫓", value: "宸ヤ激淇濋櫓" },
- { label: "鐢熻偛淇濋櫓", value: "鐢熻偛淇濋櫓" },
- { label: "鍏Н閲�", value: "鍏Н閲�" },
-];
+ // 淇濋櫓绫诲瀷閫夐」锛堝彲鎸夊瓧鍏告浛鎹級
+ const insuranceTypeOptions = [
+ { label: "鍏昏�佷繚闄�", value: "鍏昏�佷繚闄�" },
+ { label: "鍖荤枟淇濋櫓", value: "鍖荤枟淇濋櫓" },
+ { label: "澶变笟淇濋櫓", value: "澶变笟淇濋櫓" },
+ { label: "宸ヤ激淇濋櫓", value: "宸ヤ激淇濋櫓" },
+ { label: "鐢熻偛淇濋櫓", value: "鐢熻偛淇濋櫓" },
+ { label: "鍏Н閲�", value: "鍏Н閲�" },
+ ];
-const defaultBenefit = () => ({
- _key: Math.random().toString(36).slice(2),
- insuranceType: "",
- paymentBase: "",
- useBasicSalary: false,
- personalRatio: "",
- personalFixed: "",
-});
+ const defaultBenefit = () => ({
+ _key: Math.random().toString(36).slice(2),
+ insuranceType: "",
+ paymentBase: "",
+ useBasicSalary: false,
+ personalRatio: "",
+ personalFixed: "",
+ });
-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 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,
+ 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;
-}
-
-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 handleUseBasicSalaryChange = (item) => {
- if (item.useBasicSalary) {
- item.paymentBase = "";
+ return list;
}
-};
-const handlePaymentBaseInput = (item) => {
- if (item.paymentBase !== "" && item.paymentBase != null) {
- item.useBasicSalary = false;
- }
-};
-
-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" || type === "detail") && row) {
- const d = row || {};
- form.value.id = d.id;
- form.value.title = d.title;
- form.value.remark = d.remark ?? "";
- // 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 addInsuranceBenefit = () => {
+ form.value.insuranceBenefits.push(defaultBenefit());
+ };
+
+ const removeInsuranceBenefit = index => {
+ form.value.insuranceBenefits.splice(index, 1);
+ };
+
+ const handleUseBasicSalaryChange = item => {
+ if (item.useBasicSalary) {
+ item.paymentBase = "";
}
- const detailList = d.schemeInsuranceDetailList || [];
- form.value.insuranceBenefits =
- 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 = () => {
- // 璇︽儏妯″紡涓嬩笉鎻愪氦锛屽彧鍏抽棴寮圭獥
- 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,
+ 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 resetForm = () => {
+ form.value = {
+ id: undefined,
+ title: "",
+ remark: "",
+ deptIds: [],
+ insuranceBenefits: [defaultBenefit()],
};
- if (operationType.value === "add") {
- socialSecurityAdd(submitData).then(() => {
- proxy.$modal.msgSuccess("鏂板鎴愬姛");
- closeDia();
- });
- } else {
- socialSecurityUpdate(submitData).then(() => {
- proxy.$modal.msgSuccess("淇敼鎴愬姛");
- closeDia();
- });
+ };
+
+ 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 ?? "";
+ // 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 =
+ 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 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;
-}
-.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;
-}
+ .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>
--
Gitblit v1.9.3