From 2763efef00d553bc65e08bd21384cdd6dd2a5a2f Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期四, 05 三月 2026 11:52:05 +0800
Subject: [PATCH] 进销存升级 1.添加社会保险设置页面，开发与联调 2.丰富新增入职所填字段字段并于用户管理关联 3.修改人员薪资页面样式和逻辑
---
src/views/personnelManagement/employeeRecord/components/EducationWorkSection.vue | 263 ++++
src/views/personnelManagement/socialSecuritySet/index.vue | 127 ++
src/views/personnelManagement/employeeRecord/components/NewOrEditFormDia.vue | 620 +++++------
src/views/personnelManagement/socialSecuritySet/components/formDia.vue | 369 ++++++
src/views/personnelManagement/employeeRecord/components/JobInfoSection.vue | 172 +++
src/api/personnelManagement/socialSecuritySet.js | 46
src/views/personnelManagement/employeeRecord/components/BasicInfoSection.vue | 159 ++
src/views/personnelManagement/monthlyStatistics/components/formDia.vue | 819 +++++++++-----
src/views/personnelManagement/monthlyStatistics/index.vue | 503 ++++-----
src/views/personnelManagement/employeeRecord/components/EmergencyAndAttachmentSection.vue | 148 ++
10 files changed, 2,318 insertions(+), 908 deletions(-)
diff --git a/src/api/personnelManagement/socialSecuritySet.js b/src/api/personnelManagement/socialSecuritySet.js
new file mode 100644
index 0000000..bea19cd
--- /dev/null
+++ b/src/api/personnelManagement/socialSecuritySet.js
@@ -0,0 +1,46 @@
+// 绀句細淇濋櫓璁剧疆
+import request from "@/utils/request";
+
+// 鍒嗛〉鏌ヨ鍒楄〃
+export function socialSecurityListPage(query) {
+ return request({
+ url: "/socialSecurity/plan/listPage",
+ method: "get",
+ params: query,
+ });
+}
+
+// 鏌ヨ璇︽儏
+export function socialSecurityInfo(id) {
+ return request({
+ url: "/socialSecurity/plan/" + id,
+ method: "get",
+ });
+}
+
+// 鏂板
+export function socialSecurityAdd(data) {
+ return request({
+ url: "/socialSecurity/plan/add",
+ method: "post",
+ data,
+ });
+}
+
+// 淇敼
+export function socialSecurityUpdate(data) {
+ return request({
+ url: "/socialSecurity/plan/update",
+ method: "post",
+ data,
+ });
+}
+
+// 鍒犻櫎
+export function socialSecurityDelete(ids) {
+ return request({
+ url: "/socialSecurity/plan/delete",
+ method: "delete",
+ data: ids,
+ });
+}
diff --git a/src/views/personnelManagement/employeeRecord/components/BasicInfoSection.vue b/src/views/personnelManagement/employeeRecord/components/BasicInfoSection.vue
new file mode 100644
index 0000000..f6291e5
--- /dev/null
+++ b/src/views/personnelManagement/employeeRecord/components/BasicInfoSection.vue
@@ -0,0 +1,159 @@
+<template>
+ <el-card class="form-card" shadow="never">
+ <template #header>
+ <span class="card-title">
+ <span class="card-title-line">|</span>
+ 鍩烘湰淇℃伅
+ </span>
+ </template>
+
+ <el-row :gutter="24">
+ <el-col :span="5">
+ <el-form-item label="鍛樺伐缂栧彿" prop="staffNo">
+ <el-input
+ v-model="form.staffNo"
+ placeholder="璇疯緭鍏�"
+ clearable
+ maxlength="20"
+ show-word-limit
+ :disabled="operationType !== 'add'"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="5">
+ <el-form-item label="濮撳悕" prop="staffName">
+ <el-input
+ v-model="form.staffName"
+ placeholder="璇疯緭鍏�"
+ clearable
+ maxlength="50"
+ show-word-limit
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="5">
+ <el-form-item label="鍒悕" prop="aliasName">
+ <el-input
+ v-model="form.aliasName"
+ placeholder="璇疯緭鍏�"
+ clearable
+ maxlength="50"
+ show-word-limit
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="5">
+ <el-form-item label="鎵嬫満" prop="phone">
+ <el-input
+ v-model="form.phone"
+ placeholder="璇疯緭鍏�"
+ clearable
+ maxlength="11"
+ show-word-limit
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="4">
+ <el-form-item label="鎬у埆" prop="sex">
+ <el-select
+ v-model="form.sex"
+ placeholder="璇烽�夋嫨"
+ clearable
+ style="width: 100%"
+ >
+ <el-option label="鐢�" value="鐢�" />
+ <el-option label="濂�" value="濂�" />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+
+ <el-row :gutter="24">
+ <el-col :span="5">
+ <el-form-item label="鍑虹敓鏃ユ湡" prop="birthDate">
+ <el-date-picker
+ v-model="form.birthDate"
+ type="date"
+ value-format="YYYY-MM-DD"
+ format="YYYY-MM-DD"
+ placeholder="璇烽�夋嫨"
+ style="width: 100%"
+ clearable
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="5">
+ <el-form-item label="骞撮緞" prop="age">
+ <el-input-number
+ v-model="form.age"
+ :min="0"
+ :max="150"
+ :precision="0"
+ :step="1"
+ style="width: 100%"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="5">
+ <el-form-item label="绫嶈疮" prop="nativePlace">
+ <el-input
+ v-model="form.nativePlace"
+ placeholder="璇疯緭鍏�"
+ clearable
+ maxlength="50"
+ show-word-limit
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="5">
+ <el-form-item label="姘戞棌" prop="nation">
+ <el-input
+ v-model="form.nation"
+ placeholder="璇疯緭鍏�"
+ clearable
+ maxlength="20"
+ show-word-limit
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="4">
+ <el-form-item label="濠氬Щ鐘跺喌" prop="maritalStatus">
+ <el-select
+ v-model="form.maritalStatus"
+ placeholder="璇烽�夋嫨"
+ clearable
+ style="width: 100%"
+ >
+ <el-option label="鏈" value="single" />
+ <el-option label="宸插" value="married" />
+ <el-option label="绂诲紓" value="divorced" />
+ <el-option label="涓у伓" value="widowed" />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-card>
+</template>
+
+<script setup>
+import { toRefs } from "vue";
+
+const props = defineProps({
+ form: { type: Object, required: true },
+ operationType: { type: String, default: "add" },
+});
+
+const { form, operationType } = toRefs(props);
+</script>
+
+<style scoped>
+.form-card {
+ margin-bottom: 16px;
+}
+
+.card-title-line {
+ color: #f56c6c;
+ margin-right: 4px;
+}
+</style>
+
diff --git a/src/views/personnelManagement/employeeRecord/components/EducationWorkSection.vue b/src/views/personnelManagement/employeeRecord/components/EducationWorkSection.vue
new file mode 100644
index 0000000..10ed6ac
--- /dev/null
+++ b/src/views/personnelManagement/employeeRecord/components/EducationWorkSection.vue
@@ -0,0 +1,263 @@
+<template>
+ <div>
+ <!-- 鏁欒偛缁忓巻 -->
+ <el-card class="form-card" shadow="never">
+ <template #header>
+ <span class="card-title">
+ <span class="card-title-line">|</span>
+ 鏁欒偛缁忓巻
+ </span>
+ </template>
+ <el-table :data="form.educationList" border>
+ <el-table-column label="瀛﹀巻" prop="degree" width="120">
+ <template #default="{ row }">
+ <el-select
+ v-model="row.degree"
+ placeholder="璇烽�夋嫨"
+ clearable
+ style="width: 100%"
+ >
+ <el-option label="涓笓鍙婁互涓�" value="secondary" />
+ <el-option label="澶т笓" value="junior_college" />
+ <el-option label="鏈" value="bachelor" />
+ <el-option label="纭曞＋" value="master" />
+ <el-option label="鍗氬＋鍙婁互涓�" value="doctor" />
+ </el-select>
+ </template>
+ </el-table-column>
+ <el-table-column label="姣曚笟闄㈡牎" prop="school" min-width="160">
+ <template #default="{ row }">
+ <el-input
+ v-model="row.school"
+ placeholder="璇疯緭鍏�"
+ clearable
+ maxlength="30"
+ show-word-limit
+ />
+ </template>
+ </el-table-column>
+ <el-table-column label="鍏ュ鏃堕棿" prop="admissionDate" width="150">
+ <template #default="{ row }">
+ <el-date-picker
+ v-model="row.admissionDate"
+ type="date"
+ value-format="YYYY-MM-DD"
+ format="YYYY-MM-DD"
+ placeholder="璇烽�夋嫨"
+ style="width: 100%"
+ clearable
+ />
+ </template>
+ </el-table-column>
+ <el-table-column label="姣曚笟鏃堕棿" prop="graduationDate" width="150">
+ <template #default="{ row }">
+ <el-date-picker
+ v-model="row.graduationDate"
+ type="date"
+ value-format="YYYY-MM-DD"
+ format="YYYY-MM-DD"
+ placeholder="璇烽�夋嫨"
+ style="width: 100%"
+ clearable
+ />
+ </template>
+ </el-table-column>
+ <el-table-column label="涓撲笟" prop="major" min-width="140">
+ <template #default="{ row }">
+ <el-input
+ v-model="row.major"
+ placeholder="璇疯緭鍏�"
+ clearable
+ maxlength="20"
+ show-word-limit
+ />
+ </template>
+ </el-table-column>
+ <el-table-column label="瀛︿綅" prop="academicDegree" width="140">
+ <template #default="{ row }">
+ <el-input
+ v-model="row.academicDegree"
+ placeholder="璇疯緭鍏�"
+ clearable
+ maxlength="20"
+ show-word-limit
+ />
+ </template>
+ </el-table-column>
+ <el-table-column label="鎿嶄綔" width="80" align="center">
+ <template #default="scope">
+ <el-button
+ v-if="form.educationList.length > 1"
+ type="primary"
+ link
+ @click="removeEducationRow(scope.$index)"
+ >
+ 鍒犻櫎
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <div class="table-add-row" @click="addEducationRow">鏂板缓涓�琛�</div>
+ </el-card>
+
+ <!-- 宸ヤ綔缁忓巻 -->
+ <el-card class="form-card" shadow="never">
+ <template #header>
+ <span class="card-title">
+ <span class="card-title-line">|</span>
+ 宸ヤ綔缁忓巻
+ </span>
+ </template>
+ <el-table :data="form.workExperienceList" border>
+ <el-table-column label="鍓嶅叕鍙�" prop="company" min-width="180">
+ <template #default="{ row }">
+ <el-input
+ v-model="row.company"
+ placeholder="璇疯緭鍏�"
+ clearable
+ maxlength="30"
+ show-word-limit
+ />
+ </template>
+ </el-table-column>
+ <el-table-column label="鍓嶅叕鍙搁儴闂�" prop="department" min-width="140">
+ <template #default="{ row }">
+ <el-input
+ v-model="row.department"
+ placeholder="璇疯緭鍏�"
+ clearable
+ maxlength="20"
+ show-word-limit
+ />
+ </template>
+ </el-table-column>
+ <el-table-column label="鍓嶅叕鍙歌亴浣�" prop="position" min-width="140">
+ <template #default="{ row }">
+ <el-input
+ v-model="row.position"
+ placeholder="璇疯緭鍏�"
+ clearable
+ maxlength="20"
+ show-word-limit
+ />
+ </template>
+ </el-table-column>
+ <el-table-column label="寮�濮嬫棩鏈�" prop="startDate" width="150">
+ <template #default="{ row }">
+ <el-date-picker
+ v-model="row.startDate"
+ type="date"
+ value-format="YYYY-MM-DD"
+ format="YYYY-MM-DD"
+ placeholder="璇烽�夋嫨"
+ style="width: 100%"
+ clearable
+ />
+ </template>
+ </el-table-column>
+ <el-table-column label="缁撴潫鏃ユ湡" prop="endDate" width="150">
+ <template #default="{ row }">
+ <el-date-picker
+ v-model="row.endDate"
+ type="date"
+ value-format="YYYY-MM-DD"
+ format="YYYY-MM-DD"
+ placeholder="璇烽�夋嫨"
+ style="width: 100%"
+ clearable
+ />
+ </template>
+ </el-table-column>
+ <el-table-column label="宸ヤ綔鎻忚堪" prop="description" min-width="220">
+ <template #default="{ row }">
+ <el-input
+ v-model="row.description"
+ type="textarea"
+ :rows="2"
+ placeholder="璇疯緭鍏�"
+ clearable
+ maxlength="500"
+ show-word-limit
+ />
+ </template>
+ </el-table-column>
+ <el-table-column label="鎿嶄綔" width="80" align="center">
+ <template #default="scope">
+ <el-button
+ v-if="form.workExperienceList.length > 1"
+ type="primary"
+ link
+ @click="removeWorkRow(scope.$index)"
+ >
+ 鍒犻櫎
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <div class="table-add-row" @click="addWorkRow">鏂板缓涓�琛�</div>
+ </el-card>
+ </div>
+</template>
+
+<script setup>
+import { toRefs } from "vue";
+
+const props = defineProps({
+ form: { type: Object, required: true },
+});
+
+const emit = defineEmits(["update:form"]);
+
+const { form } = toRefs(props);
+
+const addEducationRow = () => {
+ form.value.educationList.push({
+ degree: "",
+ school: "",
+ admissionDate: "",
+ graduationDate: "",
+ major: "",
+ academicDegree: "",
+ });
+};
+
+const removeEducationRow = (index) => {
+ if (form.value.educationList.length <= 1) return;
+ form.value.educationList.splice(index, 1);
+};
+
+const addWorkRow = () => {
+ form.value.workExperienceList.push({
+ company: "",
+ department: "",
+ position: "",
+ startDate: "",
+ endDate: "",
+ description: "",
+ });
+};
+
+const removeWorkRow = (index) => {
+ if (form.value.workExperienceList.length <= 1) return;
+ form.value.workExperienceList.splice(index, 1);
+};
+</script>
+
+<style scoped>
+.form-card {
+ margin-bottom: 16px;
+}
+
+.card-title-line {
+ color: #f56c6c;
+ margin-right: 4px;
+}
+
+.table-add-row {
+ margin-top: 8px;
+ color: #409eff;
+ cursor: pointer;
+ font-size: 14px;
+}
+</style>
+
diff --git a/src/views/personnelManagement/employeeRecord/components/EmergencyAndAttachmentSection.vue b/src/views/personnelManagement/employeeRecord/components/EmergencyAndAttachmentSection.vue
new file mode 100644
index 0000000..b57656b
--- /dev/null
+++ b/src/views/personnelManagement/employeeRecord/components/EmergencyAndAttachmentSection.vue
@@ -0,0 +1,148 @@
+<template>
+ <div>
+ <!-- 绱ф�ヨ仈绯讳汉 -->
+ <el-card class="form-card" shadow="never">
+ <template #header>
+ <span class="card-title">
+ <span class="card-title-line">|</span>
+ 绱ф�ヨ仈绯讳汉
+ </span>
+ </template>
+ <el-table :data="form.emergencyContacts" border>
+ <el-table-column label="绱ф�ヨ仈绯讳汉濮撳悕" prop="name" min-width="160">
+ <template #default="{ row }">
+ <el-input
+ v-model="row.name"
+ placeholder="璇疯緭鍏�"
+ clearable
+ maxlength="50"
+ show-word-limit
+ />
+ </template>
+ </el-table-column>
+ <el-table-column label="绱ф�ヨ仈绯讳汉鍏崇郴" prop="relation" min-width="140">
+ <template #default="{ row }">
+ <el-input
+ v-model="row.relation"
+ placeholder="璇疯緭鍏�"
+ clearable
+ maxlength="20"
+ show-word-limit
+ />
+ </template>
+ </el-table-column>
+ <el-table-column label="绱ф�ヨ仈绯讳汉鎵嬫満" prop="phone" width="160">
+ <template #default="{ row }">
+ <el-input
+ v-model="row.phone"
+ placeholder="璇疯緭鍏�"
+ clearable
+ maxlength="11"
+ show-word-limit
+ />
+ </template>
+ </el-table-column>
+ <el-table-column label="绱ф�ヨ仈绯讳汉浣忓潃" prop="address" min-width="220">
+ <template #default="{ row }">
+ <el-input
+ v-model="row.address"
+ placeholder="璇疯緭鍏�"
+ clearable
+ maxlength="50"
+ show-word-limit
+ />
+ </template>
+ </el-table-column>
+ <el-table-column label="鎿嶄綔" width="80" align="center">
+ <template #default="scope">
+ <el-button
+ v-if="form.emergencyContacts.length > 1"
+ type="primary"
+ link
+ @click="removeEmergencyRow(scope.$index)"
+ >
+ 鍒犻櫎
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <div class="table-add-row" @click="addEmergencyRow">鏂板缓涓�琛�</div>
+ </el-card>
+
+ <!-- 鏉愭枡闄勪欢 -->
+ <el-card class="form-card" shadow="never">
+ <template #header>
+ <div class="card-title">
+ <span class="card-title-line">|</span>
+ <span>鏉愭枡闄勪欢</span>
+ <span class="upload-tip">
+ 鍥剧墖鏀寔jpeg銆乯pg銆乸ng绛夋牸寮忥紝闄勪欢鏂囦欢鏀寔pdf銆乺ar銆亃ip銆乨oc銆乨ocx鏍煎紡銆�
+ </span>
+ </div>
+ </template>
+ <el-form-item label="闄勪欢">
+ <el-upload
+ v-model:file-list="form.attachments"
+ action="#"
+ :auto-upload="false"
+ multiple
+ list-type="picture-card"
+ >
+ <el-icon>
+ <Plus />
+ </el-icon>
+ </el-upload>
+ </el-form-item>
+ </el-card>
+ </div>
+</template>
+
+<script setup>
+import { toRefs } from "vue";
+import { Plus } from "@element-plus/icons-vue";
+
+const props = defineProps({
+ form: { type: Object, required: true },
+});
+
+const { form } = toRefs(props);
+
+const addEmergencyRow = () => {
+ form.value.emergencyContacts.push({
+ name: "",
+ relation: "",
+ phone: "",
+ address: "",
+ });
+};
+
+const removeEmergencyRow = (index) => {
+ if (form.value.emergencyContacts.length <= 1) return;
+ form.value.emergencyContacts.splice(index, 1);
+};
+</script>
+
+<style scoped>
+.form-card {
+ margin-bottom: 16px;
+}
+
+.card-title-line {
+ color: #f56c6c;
+ margin-right: 4px;
+}
+
+.table-add-row {
+ margin-top: 8px;
+ color: #409eff;
+ cursor: pointer;
+ font-size: 14px;
+}
+
+.upload-tip {
+ margin-left: 12px;
+ font-size: 12px;
+ color: #909399;
+}
+</style>
+
diff --git a/src/views/personnelManagement/employeeRecord/components/JobInfoSection.vue b/src/views/personnelManagement/employeeRecord/components/JobInfoSection.vue
new file mode 100644
index 0000000..6cd38e2
--- /dev/null
+++ b/src/views/personnelManagement/employeeRecord/components/JobInfoSection.vue
@@ -0,0 +1,172 @@
+<template>
+ <el-card class="form-card" shadow="never">
+ <template #header>
+ <span class="card-title">
+ <span class="card-title-line">|</span>
+ 鍦ㄨ亴淇℃伅
+ </span>
+ </template>
+
+ <el-row :gutter="24">
+ <el-col :span="5">
+ <el-form-item label="宸ュ彿" prop="jobNo">
+ <el-input
+ v-model="form.jobNo"
+ placeholder="璇疯緭鍏�"
+ clearable
+ maxlength="20"
+ show-word-limit
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="5">
+ <el-form-item label="鍛樺伐绫诲瀷" prop="staffType">
+ <el-select
+ v-model="form.staffType"
+ placeholder="璇烽�夋嫨"
+ clearable
+ style="width: 100%"
+ >
+ <el-option label="姝ｅ紡鍛樺伐" value="official" />
+ <el-option label="璇曠敤鍛樺伐" value="probation" />
+ <el-option label="瀹炰範鐢�" value="intern" />
+ <el-option label="鍏艰亴" value="part_time" />
+ <el-option label="鍔冲姟/澶栧寘" value="outsourcing" />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="5">
+ <el-form-item label="鍏ヨ亴鏃ユ湡" prop="entryDate">
+ <el-date-picker
+ v-model="form.entryDate"
+ type="date"
+ value-format="YYYY-MM-DD"
+ format="YYYY-MM-DD"
+ placeholder="璇烽�夋嫨"
+ style="width: 100%"
+ clearable
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="5">
+ <el-form-item label="璇曠敤鏈燂紙鏈堬級" prop="probationPeriod">
+ <el-input-number
+ v-model="form.probationPeriod"
+ :min="0"
+ :max="24"
+ :precision="0"
+ :step="1"
+ style="width: 100%"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="4">
+ <el-form-item label="杞鏃ユ湡" prop="regularDate">
+ <el-date-picker
+ v-model="form.regularDate"
+ type="date"
+ value-format="YYYY-MM-DD"
+ format="YYYY-MM-DD"
+ placeholder="璇烽�夋嫨"
+ style="width: 100%"
+ clearable
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+
+ <el-row :gutter="24">
+ <el-col :span="8">
+ <el-form-item label="閮ㄩ棬" prop="sysDeptId">
+ <el-tree-select
+ v-model="form.sysDeptId"
+ :data="deptOptions"
+ check-strictly
+ :render-after-expand="false"
+ placeholder="璇烽�夋嫨"
+ style="width: 100%"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="8">
+ <el-form-item label="鐩存帴涓婄骇" prop="directLeader">
+ <el-input
+ v-model="form.directLeader"
+ placeholder="璇疯緭鍏�"
+ clearable
+ maxlength="50"
+ show-word-limit
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="8">
+ <el-form-item label="宀椾綅" prop="sysPostId">
+ <el-select
+ v-model="form.sysPostId"
+ placeholder="璇烽�夋嫨"
+ clearable
+ style="width: 100%"
+ >
+ <el-option
+ v-for="item in postOptions"
+ :key="item.postId"
+ :label="item.postName"
+ :value="item.postId"
+ :disabled="item.status === '1'"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+
+ <el-row :gutter="24">
+ <el-col :span="5">
+ <el-form-item label="鑱岀骇" prop="jobLevel">
+ <el-input
+ v-model="form.jobLevel"
+ placeholder="璇疯緭鍏�"
+ clearable
+ maxlength="10"
+ show-word-limit
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="4">
+ <el-form-item label="鍩烘湰宸ヨ祫" prop="basicSalary">
+ <el-input-number
+ v-model="form.basicSalary"
+ :min="0"
+ :max="999999"
+ :precision="2"
+ :step="100"
+ style="width: 100%"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-card>
+</template>
+
+<script setup>
+import { toRefs } from "vue";
+
+const props = defineProps({
+ form: { type: Object, required: true },
+ postOptions: { type: Array, default: () => [] },
+ deptOptions: { type: Array, default: () => [] },
+});
+
+const { form, postOptions, deptOptions } = toRefs(props);
+</script>
+
+<style scoped>
+.form-card {
+ margin-bottom: 16px;
+}
+
+.card-title-line {
+ color: #f56c6c;
+ margin-right: 4px;
+}
+</style>
+
diff --git a/src/views/personnelManagement/employeeRecord/components/NewOrEditFormDia.vue b/src/views/personnelManagement/employeeRecord/components/NewOrEditFormDia.vue
index 1c06a98..e44bdb8 100644
--- a/src/views/personnelManagement/employeeRecord/components/NewOrEditFormDia.vue
+++ b/src/views/personnelManagement/employeeRecord/components/NewOrEditFormDia.vue
@@ -1,373 +1,299 @@
<template>
- <div>
- <el-dialog v-model="dialogFormVisible"
- :title="operationType === 'add' ? '鏂板鍏ヨ亴' : '缂栬緫浜哄憳'"
- width="70%"
- @close="closeDia">
- <el-form :model="form"
- label-width="140px"
- label-position="top"
- :rules="rules"
- ref="formRef">
- <el-row :gutter="30">
- <el-col :span="12">
- <el-form-item label="鍛樺伐缂栧彿锛�"
- prop="staffNo">
- <el-input v-model="form.staffNo"
- placeholder="璇疯緭鍏�"
- clearable
- :disabled="operationType !== 'add'" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="濮撳悕锛�"
- prop="staffName">
- <el-input v-model="form.staffName"
- placeholder="璇疯緭鍏�"
- clearable />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="30">
- <el-col :span="12">
- <el-form-item label="鎬у埆锛�"
- prop="sex">
- <el-select v-model="form.sex">
- <el-option label="鐢�"
- value="鐢�" />
- <el-option label="濂�"
- value="濂�" />
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="鎴风睄浣忓潃锛�"
- prop="nativePlace">
- <el-input v-model="form.nativePlace"
- placeholder="璇疯緭鍏�"
- clearable />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="30">
- <el-col :span="12">
- <el-form-item label="宀椾綅锛�"
- prop="sysPostId">
- <el-select v-model="form.sysPostId"
- placeholder="璇烽�夋嫨宀椾綅"
- clearable>
- <el-option v-for="item in postOptions"
- :key="item.postId"
- :label="item.postName"
- :value="item.postId"
- :disabled="item.status === '1'" />
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="鐜颁綇鍧�锛�"
- prop="adress">
- <el-input v-model="form.adress"
- placeholder="璇疯緭鍏�"
- clearable />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="30">
- <el-col :span="12">
- <el-form-item label="閮ㄩ棬锛�"
- prop="sysDeptId">
- <el-tree-select v-model="form.sysDeptId"
- :data="deptOptions"
- :props="{ value: 'id', label: 'label', children: 'children' }"
- value-key="id"
- placeholder="璇烽�夋嫨閮ㄩ棬"
- check-strictly />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="骞撮緞锛�"
- prop="age">
- <el-input-number v-model="form.age"
- :precision="0"
- :step="1"
- style="width: 100%" />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="30">
- <el-col :span="12">
- <el-form-item label="绗竴瀛﹀巻锛�"
- prop="firstStudy">
- <el-input v-model="form.firstStudy"
- placeholder="璇疯緭鍏�"
- clearable />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="涓撲笟锛�"
- prop="profession">
- <el-input v-model="form.profession"
- placeholder="璇疯緭鍏�"
- clearable />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="30">
- <el-col :span="12">
- <el-form-item label="鑱旂郴鐢佃瘽锛�"
- prop="phone">
- <el-input v-model="form.phone"
- placeholder="璇疯緭鍏�"
- clearable />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="绱ф�ヨ仈绯讳汉锛�"
- prop="emergencyContact">
- <el-input v-model="form.emergencyContact"
- placeholder="璇疯緭鍏�"
- clearable />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="30">
- <el-col :span="12">
- <el-form-item label="绱ф�ヨ仈绯讳汉鑱旂郴鐢佃瘽锛�"
- prop="emergencyContactPhone">
- <el-input v-model="form.emergencyContactPhone"
- placeholder="璇疯緭鍏�"
- clearable />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="鍚堝悓骞撮檺锛�"
- prop="contractTerm">
- <el-input-number v-model="form.contractTerm"
- :precision="0"
- :step="1"
- style="width: 100%"
- :disabled="true" />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="30">
- <el-col :span="12">
- <el-form-item label="鍚堝悓寮�濮嬫棩鏈燂細"
- prop="contractStartTime">
- <el-date-picker v-model="form.contractStartTime"
- type="date"
- placeholder="璇烽�夋嫨鏃ユ湡"
- value-format="YYYY-MM-DD"
- format="YYYY-MM-DD"
- clearable
- style="width: 100%"
- @change="calculateContractTerm" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="鍚堝悓缁撴潫鏃ユ湡锛�"
- prop="contractEndTime">
- <el-date-picker v-model="form.contractEndTime"
- type="date"
- placeholder="璇烽�夋嫨鏃ユ湡"
- value-format="YYYY-MM-DD"
- format="YYYY-MM-DD"
- clearable
- style="width: 100%"
- @change="calculateContractTerm" />
- </el-form-item>
- </el-col>
- </el-row>
+ <FormDialog
+ v-model="dialogFormVisible"
+ :operation-type="operationType"
+ :title="dialogTitle"
+ width="90%"
+ @close="closeDia"
+ @confirm="submitForm"
+ @cancel="closeDia"
+ >
+ <div class="form-dia-body">
+ <el-form
+ ref="formRef"
+ :model="form"
+ :rules="rules"
+ label-position="top"
+ >
+ <BasicInfoSection :form="form" :operation-type="operationType" />
+ <JobInfoSection
+ :form="form"
+ :post-options="postOptions"
+ :dept-options="deptOptions"
+ />
+ <EducationWorkSection :form="form" />
+ <EmergencyAndAttachmentSection :form="form" />
</el-form>
- <template #footer>
- <div class="dialog-footer">
- <el-button type="primary"
- @click="submitForm">纭</el-button>
- <el-button @click="closeDia">鍙栨秷</el-button>
- </div>
- </template>
- </el-dialog>
- </div>
+ </div>
+ </FormDialog>
</template>
<script setup>
- import { ref, onMounted } from "vue";
- import { findPostOptions } from "@/api/system/post.js";
- import { listDept } from "@/api/system/dept.js";
- import {
- staffOnJobInfo,
- createStaffOnJob,
- updateStaffOnJob,
- } from "@/api/personnelManagement/staffOnJob.js";
- import { deptTreeSelect } from "@/api/system/user.js";
- const { proxy } = getCurrentInstance();
- const emit = defineEmits(["close"]);
+import {
+ ref,
+ reactive,
+ toRefs,
+ onMounted,
+ getCurrentInstance,
+ nextTick,
+} from "vue";
+import FormDialog from "@/components/Dialog/FormDialog.vue";
+import { findPostOptions } from "@/api/system/post.js";
+import { deptTreeSelect } from "@/api/system/user.js";
+import {
+ staffOnJobInfo,
+ createStaffOnJob,
+ updateStaffOnJob,
+} from "@/api/personnelManagement/staffOnJob.js";
- const dialogFormVisible = ref(false);
- const operationType = ref("");
- const id = ref(0);
- const data = reactive({
- form: {
- staffNo: "",
- staffName: "",
- sex: "",
- nativePlace: "",
- postJob: "",
- adress: "",
- firstStudy: "",
- profession: "",
- age: 0,
- phone: "",
- emergencyContact: "",
- emergencyContactPhone: "",
- contractTerm: 0,
- contractStartTime: "",
- contractEndTime: "",
- sysPostId: undefined,
- sysDeptId: undefined,
- },
- rules: {
- staffNo: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
- staffName: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
- sex: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
- nativePlace: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
- postJob: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
- adress: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
- firstStudy: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
- profession: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
- age: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
- phone: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
- emergencyContact: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
- emergencyContactPhone: [
- { required: true, message: "璇疯緭鍏�", trigger: "blur" },
- ],
- contractTerm: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
- contractStartTime: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
- contractEndTime: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
- sysDeptId: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }],
- },
- postOptions: [], // 宀椾綅閫夐」
- deptOptions: [], // 閮ㄩ棬閫夐」
+import BasicInfoSection from "./BasicInfoSection.vue";
+import JobInfoSection from "./JobInfoSection.vue";
+import EducationWorkSection from "./EducationWorkSection.vue";
+import EmergencyAndAttachmentSection from "./EmergencyAndAttachmentSection.vue";
+
+const { proxy } = getCurrentInstance();
+const emit = defineEmits(["close"]);
+
+const dialogFormVisible = ref(false);
+const operationType = ref("add");
+const id = ref(0);
+const formRef = ref(null);
+
+const dialogTitle = () =>
+ operationType.value === "add" ? "鏂板鍏ヨ亴" : "缂栬緫浜哄憳";
+
+const createEmptyEducation = () => ({
+ degree: "",
+ school: "",
+ admissionDate: "",
+ graduationDate: "",
+ major: "",
+ academicDegree: "",
+});
+
+const createEmptyWork = () => ({
+ company: "",
+ department: "",
+ position: "",
+ startDate: "",
+ endDate: "",
+ description: "",
+});
+
+const createEmptyEmergency = () => ({
+ name: "",
+ relation: "",
+ phone: "",
+ address: "",
+});
+
+const createDefaultForm = () => ({
+ id: undefined,
+ // 鍩烘湰淇℃伅
+ staffNo: "",
+ staffName: "",
+ aliasName: "",
+ phone: "",
+ sex: "",
+ birthDate: "",
+ age: undefined,
+ nativePlace: "",
+ nation: "",
+ maritalStatus: "",
+ politicalStatus: "",
+ firstWorkDate: "",
+ workingYears: undefined,
+ idCardNo: "",
+ hukouType: "",
+ email: "",
+ currentAddress: "",
+ // 鍦ㄨ亴淇℃伅
+ jobNo: "",
+ staffType: "",
+ entryDate: "",
+ probationPeriod: undefined,
+ regularDate: "",
+ sysDeptId: undefined,
+ directLeader: "",
+ sysPostId: undefined,
+ jobLevel: "",
+ basicSalary: undefined,
+ // 閾惰鍗′俊鎭�
+ bankName: "",
+ bankCardNo: "",
+ // 鏁欒偛缁忓巻
+ educationList: [createEmptyEducation()],
+ // 宸ヤ綔缁忓巻
+ workExperienceList: [createEmptyWork()],
+ // 绱ф�ヨ仈绯讳汉
+ emergencyContacts: [createEmptyEmergency()],
+ emergencyContact: "",
+ emergencyContactPhone: "",
+ // 鏉愭枡闄勪欢锛堜粎鍓嶇灞曠ず锛�
+ attachments: [],
+});
+
+const state = reactive({
+ form: createDefaultForm(),
+ rules: {
+ staffNo: [{ required: true, message: "璇疯緭鍏ュ憳宸ョ紪鍙�", trigger: "blur" }],
+ staffName: [{ required: true, message: "璇疯緭鍏ュ鍚�", trigger: "blur" }],
+ phone: [{ required: true, message: "璇疯緭鍏ユ墜鏈�", trigger: "blur" }],
+ sex: [{ required: true, message: "璇烽�夋嫨鎬у埆", trigger: "change" }],
+ birthDate: [
+ { required: true, message: "璇烽�夋嫨鍑虹敓鏃ユ湡", trigger: "change" },
+ ],
+ jobNo: [{ required: true, message: "璇疯緭鍏ュ伐鍙�", trigger: "blur" }],
+ staffType: [
+ { required: true, message: "璇烽�夋嫨鍛樺伐绫诲瀷", trigger: "change" },
+ ],
+ entryDate: [
+ { required: true, message: "璇烽�夋嫨鍏ヨ亴鏃ユ湡", trigger: "change" },
+ ],
+ sysDeptId: [
+ { required: true, message: "璇烽�夋嫨閮ㄩ棬", trigger: "change" },
+ ],
+ },
+ postOptions: [],
+ deptOptions: [],
+});
+
+const { form, rules, postOptions, deptOptions } = toRefs(state);
+
+const resetForm = () => {
+ Object.assign(form.value, createDefaultForm());
+ nextTick(() => {
+ formRef.value?.clearValidate();
});
- const { form, rules, postOptions, deptOptions } = toRefs(data);
+};
- // 鎵撳紑寮规
- const openDialog = (type, row) => {
- operationType.value = type;
- dialogFormVisible.value = true;
- if (operationType.value === "edit") {
- id.value = row.id;
- staffOnJobInfo(id.value, {}).then(res => {
- form.value = { ...res.data };
- if (form.value.sysPostId === 0) {
- form.value.sysPostId = undefined;
- }
- if (form.value.sysDeptId === 0) {
- form.value.sysDeptId = undefined;
- }
- // 缂栬緫鏃朵篃璁＄畻涓�娆″悎鍚屽勾闄�
- calculateContractTerm();
- });
- } else {
- form.value.id = "";
+const fetchPostOptions = () => {
+ findPostOptions().then((res) => {
+ postOptions.value = res.data || [];
+ });
+};
+
+const fetchDeptOptions = () => {
+ deptTreeSelect().then((response) => {
+ deptOptions.value = filterDisabledDept(
+ JSON.parse(JSON.stringify(response.data || []))
+ );
+ });
+};
+
+function filterDisabledDept(deptList) {
+ return deptList.filter((dept) => {
+ if (dept.disabled) {
+ return false;
}
- };
- onMounted(() => {
- fetchPostOptions();
- fetchDeptOptions();
+ if (dept.children && dept.children.length) {
+ dept.children = filterDisabledDept(dept.children);
+ }
+ return true;
});
+}
- const fetchPostOptions = () => {
- findPostOptions().then(res => {
- postOptions.value = res.data;
- });
- };
+const syncEmergencyToLegacyField = () => {
+ const first = form.value.emergencyContacts?.[0];
+ form.value.emergencyContact = first?.name || "";
+ form.value.emergencyContactPhone = first?.phone || "";
+};
- // 鏌ヨ閮ㄩ棬鍒楄〃
- const fetchDeptOptions = () => {
- deptTreeSelect().then(response => {
- deptOptions.value = filterDisabledDept(
- JSON.parse(JSON.stringify(response.data))
- );
- });
- };
-
- /** 杩囨护绂佺敤鐨勯儴闂� */
- function filterDisabledDept(deptList) {
- return deptList.filter(dept => {
- if (dept.disabled) {
- return false;
+const openDialog = (type, row) => {
+ operationType.value = type;
+ dialogFormVisible.value = true;
+ fetchPostOptions();
+ fetchDeptOptions();
+ resetForm();
+ if (type === "edit" && row?.id) {
+ id.value = row.id;
+ staffOnJobInfo(id.value, {}).then((res) => {
+ const d = res.data || {};
+ Object.assign(form.value, {
+ ...form.value,
+ ...d,
+ });
+ if (!Array.isArray(form.value.educationList) || !form.value.educationList.length) {
+ form.value.educationList = [createEmptyEducation()];
}
- if (dept.children && dept.children.length) {
- dept.children = filterDisabledDept(dept.children);
+ if (
+ !Array.isArray(form.value.workExperienceList) ||
+ !form.value.workExperienceList.length
+ ) {
+ form.value.workExperienceList = [createEmptyWork()];
}
- return true;
+ if (
+ !Array.isArray(form.value.emergencyContacts) ||
+ !form.value.emergencyContacts.length
+ ) {
+ form.value.emergencyContacts = [createEmptyEmergency()];
+ }
+ if (form.value.sysPostId === 0) {
+ form.value.sysPostId = undefined;
+ }
+ if (form.value.sysDeptId === 0) {
+ form.value.sysDeptId = undefined;
+ }
});
}
+};
- // 鎻愪氦浜у搧琛ㄥ崟
- const submitForm = () => {
- if (!form.value.sysPostId) {
- form.value.sysPostId = undefined;
- }
- if (!form.value.sysDeptId) {
- form.value.sysDeptId = undefined;
- }
- proxy.$refs.formRef.validate(valid => {
- if (valid) {
- if (operationType.value === "add") {
- createStaffOnJob(form.value).then(res => {
- proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
- closeDia();
- });
- } else {
- updateStaffOnJob(id.value, form.value).then(res => {
- proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
- closeDia();
- });
- }
- }
- });
- };
- // 璁＄畻鍚堝悓骞撮檺
- const calculateContractTerm = () => {
- if (form.value.contractStartTime && form.value.contractEndTime) {
- const startDate = new Date(form.value.contractStartTime);
- const endDate = new Date(form.value.contractEndTime);
+onMounted(() => {
+ fetchPostOptions();
+ fetchDeptOptions();
+});
- if (endDate > startDate) {
- // 璁＄畻骞翠唤宸�
- const yearDiff = endDate.getFullYear() - startDate.getFullYear();
- const monthDiff = endDate.getMonth() - startDate.getMonth();
- const dayDiff = endDate.getDate() - startDate.getDate();
-
- let years = yearDiff;
-
- // 濡傛灉缁撴潫鏃ユ湡鐨勬湀鏃ュ皬浜庡紑濮嬫棩鏈熺殑鏈堟棩锛屽垯鍑忓幓1骞�
- if (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0)) {
- years = yearDiff - 1;
- }
-
- form.value.contractTerm = Math.max(0, years);
+const submitForm = () => {
+ if (!form.value.sysPostId) {
+ form.value.sysPostId = undefined;
+ }
+ if (!form.value.sysDeptId) {
+ form.value.sysDeptId = undefined;
+ }
+ syncEmergencyToLegacyField();
+ formRef.value?.validate((valid) => {
+ if (valid) {
+ if (operationType.value === "add") {
+ createStaffOnJob(form.value).then(() => {
+ proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
+ closeDia();
+ });
} else {
- form.value.contractTerm = 0;
+ updateStaffOnJob(id.value, form.value).then(() => {
+ proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
+ closeDia();
+ });
}
- } else {
- form.value.contractTerm = 0;
}
- };
-
- // 鍏抽棴寮规
- const closeDia = () => {
- proxy.resetForm("formRef");
- dialogFormVisible.value = false;
- emit("close");
- };
- defineExpose({
- openDialog,
});
+};
+
+const closeDia = () => {
+ formRef.value?.resetFields();
+ dialogFormVisible.value = false;
+ emit("close");
+};
+
+defineExpose({
+ openDialog,
+});
</script>
<style scoped>
+.form-dia-body {
+ padding: 0;
+}
+
+.card-title-line {
+ color: #f56c6c;
+ margin-right: 4px;
+}
+
+.form-card {
+ margin-bottom: 16px;
+}
+
+.dialog-footer {
+ text-align: right;
+}
</style>
\ No newline at end of file
diff --git a/src/views/personnelManagement/monthlyStatistics/components/formDia.vue b/src/views/personnelManagement/monthlyStatistics/components/formDia.vue
index c67fdd6..0882ba4 100644
--- a/src/views/personnelManagement/monthlyStatistics/components/formDia.vue
+++ b/src/views/personnelManagement/monthlyStatistics/components/formDia.vue
@@ -1,318 +1,565 @@
<template>
- <el-dialog v-model="dialogVisible"
- :title="title"
- width="700px"
- :close-on-click-modal="false">
- <el-form ref="formRef"
- :model="form"
- :rules="rules"
- label-width="140px"
- label-position="top">
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="缁熻鏈堜唤"
- prop="payDate">
- <el-date-picker v-model="form.payDate"
- type="month"
- value-format="YYYY-MM"
- format="YYYY-MM"
- placeholder="璇烽�夋嫨鏈堜唤"
- style="width: 100%"
- :disabled="operationType === 'view'" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="濮撳悕"
- prop="staffId">
- <el-select v-model="form.staffId"
- placeholder="璇烽�夋嫨鍛樺伐"
- style="width: 100%"
- :disabled="operationType === 'view'">
- <el-option v-for="item in userList"
- :key="item.id"
- :label="item.staffName"
- :value="item.id" />
- </el-select>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="鍩烘湰宸ヨ祫"
- prop="basicSalary">
- <el-input v-model="form.basicSalary"
- type="number"
- placeholder="璇疯緭鍏ュ熀鏈伐璧�"
- :disabled="operationType === 'view'" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="璁′欢宸ヨ祫"
- prop="pieceworkSalary">
- <el-input v-model="form.pieceworkSalary"
- type="number"
- placeholder="璇疯緭鍏ヨ浠跺伐璧�"
- :disabled="operationType === 'view'" />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="璁℃椂宸ヨ祫"
- prop="hourlySalary">
- <el-input v-model="form.hourlySalary"
- type="number"
- placeholder="璇疯緭鍏ヨ鏃跺伐璧�"
- :disabled="operationType === 'view'" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="鍏朵粬鏀跺叆"
- prop="otherIncome">
- <el-input v-model="form.otherIncome"
- type="number"
- placeholder="璇疯緭鍏ュ叾浠栨敹鍏�"
- :disabled="operationType === 'view'" />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="绀句繚涓汉"
- prop="socialSecurityIndividuals">
- <el-input v-model="form.socialSecurityIndividuals"
- type="number"
- placeholder="璇疯緭鍏ョぞ淇濅釜浜�"
- :disabled="operationType === 'view'" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="鍏Н閲戜釜浜�"
- prop="providentFundIndividuals">
- <el-input v-model="form.providentFundIndividuals"
- type="number"
- placeholder="璇疯緭鍏ュ叕绉噾涓汉"
- :disabled="operationType === 'view'" />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="涓汉鎵�寰楃◣"
- prop="personalIncomeTax">
- <el-input v-model="form.personalIncomeTax"
- type="number"
- placeholder="璇疯緭鍏ヤ釜浜烘墍寰楃◣"
- :disabled="operationType === 'view'" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="鍏朵粬鎵ｆ"
- prop="otherDeductions">
- <el-input v-model="form.otherDeductions"
- type="number"
- placeholder="璇疯緭鍏ュ叾浠栨墸娆�"
- :disabled="operationType === 'view'" />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="24">
- <el-form-item label="澶囨敞"
- prop="remark">
- <el-input v-model="form.remark"
- type="textarea"
- placeholder="璇疯緭鍏ュ娉�"
- :rows="3"
- :disabled="operationType === 'view'" />
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
+ <el-dialog
+ v-model="dialogVisible"
+ :title="operationType === 'add' ? '鏂板缓宸ヨ祫琛�' : '缂栬緫宸ヨ祫琛�'"
+ width="90%"
+ :close-on-click-modal="false"
+ destroy-on-close
+ @close="closeDia"
+ >
+ <div class="form-dia-body">
+ <!-- 鍩虹璧勬枡 -->
+ <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>
+ </template>
+ <el-form ref="formRef" :model="form" :rules="rules" label-position="top">
+ <el-row :gutter="24">
+ <el-col :span="6">
+ <el-form-item label="宸ヨ祫涓婚" prop="title">
+ <el-input
+ v-model="form.title"
+ placeholder="璇疯緭鍏�"
+ clearable
+ maxlength="20"
+ show-word-limit
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="6">
+ <el-form-item label="閫夋嫨閮ㄩ棬" prop="deptId">
+ <el-select
+ v-model="form.deptId"
+ placeholder="璇烽�夋嫨"
+ clearable
+ style="width: 100%"
+ >
+ <el-option
+ v-for="item in deptOptions"
+ :key="item.deptId"
+ :label="item.deptName"
+ :value="item.deptId"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="6">
+ <el-form-item label="閫夋嫨宸ヨ祫鏈堜唤" prop="payMonth">
+ <el-date-picker
+ v-model="form.payMonth"
+ type="month"
+ value-format="YYYY-MM"
+ format="YYYY-MM"
+ placeholder="璇烽�夋嫨宸ヨ祫鏈堜唤"
+ style="width: 100%"
+ clearable
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="6">
+ <el-form-item label="澶囨敞" prop="remark">
+ <el-input
+ v-model="form.remark"
+ placeholder="璇疯緭鍏�"
+ clearable
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ </el-card>
+
+ <!-- 鎿嶄綔鎸夐挳 -->
+ <div class="toolbar">
+ <el-button type="primary" @click="handleGenerate">鐢熸垚宸ヨ祫琛�</el-button>
+ <el-button @click="handleExport">瀵煎嚭</el-button>
+ <el-button @click="handleImport">瀵煎叆</el-button>
+ <el-button @click="handleClear">娓呯┖</el-button>
+ <el-button @click="openAddPerson">鏂板浜哄憳</el-button>
+ <el-button @click="handleBatchDelete">鍒犻櫎</el-button>
+ <el-button @click="handleTaxForm">涓◣琛�</el-button>
+ </div>
+
+ <!-- 鍛樺伐宸ヨ祫璇︽儏琛ㄦ牸 -->
+ <div class="employee-table-wrap">
+ <el-table
+ ref="employeeTableRef"
+ :data="employeeList"
+ border
+ max-height="400"
+ @selection-change="onEmployeeSelectionChange"
+ >
+ <el-table-column type="selection" width="55" align="center" />
+ <el-table-column label="鍛樺伐濮撳悕" prop="staffName" minWidth="100" />
+ <el-table-column label="瑙掕壊" prop="roleName" minWidth="100" />
+ <el-table-column label="閮ㄩ棬" prop="deptName" minWidth="100" />
+ <el-table-column label="鍩烘湰宸ヨ祫" minWidth="110">
+ <template #default="{ row }">
+ <el-input
+ v-model.number="row.basicSalary"
+ type="number"
+ placeholder="0"
+ size="small"
+ @input="row.basicSalary = parseNum(row.basicSalary)"
+ />
+ </template>
+ </el-table-column>
+ <el-table-column label="璁′欢宸ヨ祫" minWidth="110">
+ <template #default="{ row }">
+ <el-input
+ v-model.number="row.pieceworkSalary"
+ type="number"
+ placeholder="0"
+ size="small"
+ @input="row.pieceworkSalary = parseNum(row.pieceworkSalary)"
+ />
+ </template>
+ </el-table-column>
+ <el-table-column label="璁℃椂宸ヨ祫" minWidth="110">
+ <template #default="{ row }">
+ <el-input
+ v-model.number="row.hourlySalary"
+ type="number"
+ placeholder="0"
+ size="small"
+ @input="row.hourlySalary = parseNum(row.hourlySalary)"
+ />
+ </template>
+ </el-table-column>
+ <el-table-column label="鍏朵粬鏀跺叆" minWidth="110">
+ <template #default="{ row }">
+ <el-input
+ v-model.number="row.otherIncome"
+ type="number"
+ placeholder="0"
+ size="small"
+ @input="row.otherIncome = parseNum(row.otherIncome)"
+ />
+ </template>
+ </el-table-column>
+ <el-table-column label="绀句繚涓汉" minWidth="110">
+ <template #default="{ row }">
+ <el-input
+ v-model.number="row.socialSecurityIndividuals"
+ type="number"
+ placeholder="0"
+ size="small"
+ @input="row.socialSecurityIndividuals = parseNum(row.socialSecurityIndividuals)"
+ />
+ </template>
+ </el-table-column>
+ <el-table-column label="鍏Н閲戜釜浜�" minWidth="120">
+ <template #default="{ row }">
+ <el-input
+ v-model.number="row.providentFundIndividuals"
+ type="number"
+ placeholder="0"
+ size="small"
+ @input="row.providentFundIndividuals = parseNum(row.providentFundIndividuals)"
+ />
+ </template>
+ </el-table-column>
+ <el-table-column label="鎿嶄綔" width="80" align="center" fixed="right">
+ <template #default="{ row }">
+ <el-button type="primary" link @click="removeEmployee(row)">鍒犻櫎</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <div v-if="!employeeList.length" class="table-empty">鏆傛棤鏁版嵁</div>
+ </div>
+ </div>
+
<template #footer>
- <span class="dialog-footer">
- <el-button @click="dialogVisible = false">鍙栨秷</el-button>
- <el-button type="primary"
- @click="submitForm"
- v-if="operationType !== 'view'">
- 纭畾
- </el-button>
- </span>
+ <div class="dialog-footer">
+ <el-button @click="closeDia">鍙栨秷</el-button>
+ <el-button type="primary" @click="submitForm">纭畾</el-button>
+ </div>
</template>
+
+ <!-- 鏂板浜哄憳寮圭獥 -->
+ <el-dialog
+ v-model="addPersonVisible"
+ title="鏂板浜哄憳"
+ width="400px"
+ append-to-body
+ @close="addPersonClose"
+ >
+ <div class="add-person-tree">
+ <el-tree
+ ref="personTreeRef"
+ :data="deptStaffTree"
+ show-checkbox
+ node-key="id"
+ :props="{ label: 'label', children: 'children' }"
+ default-expand-all
+ />
+ </div>
+ <template #footer>
+ <el-button @click="addPersonVisible = false">鍙栨秷</el-button>
+ <el-button type="primary" @click="confirmAddPerson">纭畾</el-button>
+ </template>
+ </el-dialog>
+
+ <!-- 涓◣琛ㄥ脊绐� -->
+ <el-dialog
+ v-model="taxDialogVisible"
+ title="涓◣琛�"
+ width="700px"
+ append-to-body
+ >
+ <div class="tax-desc">涓汉鎵�寰楃◣鍏嶅緛棰濓細5000鍏�</div>
+ <el-table :data="taxTableData" border style="width: 100%;margin-bottom: 20px;">
+ <el-table-column prop="level" label="绾ф暟" width="80" align="center" />
+ <el-table-column
+ prop="range"
+ label="鍏ㄥ勾搴旂撼绋庢墍寰楅/鍏�"
+ min-width="220"
+ />
+ <el-table-column
+ prop="rate"
+ label="绋庣巼(%)"
+ width="100"
+ align="center"
+ />
+ <el-table-column
+ prop="quickDeduction"
+ label="閫熺畻鎵ｉ櫎鏁�/鍏�"
+ width="160"
+ align="center"
+ />
+ </el-table>
+ </el-dialog>
</el-dialog>
</template>
<script setup>
- import { ref, reactive, computed, onMounted } from "vue";
- import { ElMessage } from "element-plus";
- import {
- monthlyStatisticsAdd,
- monthlyStatisticsUpdate,
- staffOnJobList,
- } from "@/api/personnelManagement/monthlyStatistics.js";
+import { ref, reactive, toRefs, computed, getCurrentInstance, nextTick } from "vue";
+import { ArrowUp } from "@element-plus/icons-vue";
+import { listDept } from "@/api/system/dept.js";
+import { staffOnJobList } from "@/api/personnelManagement/monthlyStatistics.js";
+import {
+ monthlyStatisticsAdd,
+ monthlyStatisticsUpdate,
+ monthlyStatisticsGet,
+} from "@/api/personnelManagement/monthlyStatistics.js";
- const props = defineProps({
- modelValue: {
- type: Boolean,
- default: false,
- },
- operationType: {
- type: String,
- default: "add",
- },
- row: {
- type: Object,
- default: () => ({}),
- },
- });
+const emit = defineEmits(["update:modelValue", "close"]);
+const props = defineProps({
+ modelValue: { type: Boolean, default: false },
+ operationType: { type: String, default: "add" },
+ row: { type: Object, default: () => ({}) },
+});
- const emit = defineEmits(["update:modelValue", "close"]);
+const { proxy } = getCurrentInstance();
- const dialogVisible = computed({
- get: () => props.modelValue,
- set: val => emit("update:modelValue", val),
- });
+const dialogVisible = computed({
+ get: () => props.modelValue,
+ set: (val) => emit("update:modelValue", val),
+});
- const title = computed(() => {
- if (props.operationType === "add") return "鏂板钖祫鍙拌处";
- if (props.operationType === "edit") return "缂栬緫钖祫鍙拌处";
- return "鏌ョ湅钖祫鍙拌处";
- });
+const formRef = ref(null);
+const employeeTableRef = ref(null);
+const personTreeRef = ref(null);
+const addPersonVisible = ref(false);
+const taxDialogVisible = ref(false);
+const deptOptions = ref([]);
+const deptStaffTree = ref([]);
+const employeeList = ref([]);
+const selectedEmployees = ref([]);
+const taxTableData = ref([
+ { level: 1, range: "涓嶈秴杩�36000鍏�", rate: 3, quickDeduction: 0 },
+ { level: 2, range: "瓒呰繃36000-144000鍏�", rate: 10, quickDeduction: 2520 },
+ { level: 3, range: "瓒呰繃144000-300000鍏�", rate: 20, quickDeduction: 16920 },
+ { level: 4, range: "瓒呰繃300000-420000鍏�", rate: 25, quickDeduction: 31920 },
+ { level: 5, range: "瓒呰繃420000-660000鍏�", rate: 30, quickDeduction: 52920 },
+ { level: 6, range: "瓒呰繃660000-960000鍏�", rate: 35, quickDeduction: 85920 },
+ { level: 7, range: "瓒呰繃960000鍏�", rate: 45, quickDeduction: 181920 },
+]);
- const formRef = ref();
- const form = reactive({
- id: "",
- payDate: "",
- staffId: "",
- basicSalary: 0,
- pieceworkSalary: 0,
- hourlySalary: 0,
- otherIncome: 0,
- socialSecurityIndividuals: 0,
- providentFundIndividuals: 0,
- personalIncomeTax: 0,
- otherDeductions: 0,
- payableWages: 0,
- deductibleWages: 0,
- actualWages: 0,
+function parseNum(v) {
+ if (v === "" || v == null) return 0;
+ const n = Number(v);
+ return isNaN(n) ? 0 : n;
+}
+
+// 鍩虹璧勬枡琛ㄥ崟
+const data = reactive({
+ form: {
+ id: undefined,
+ title: "",
+ deptId: undefined,
+ payMonth: "",
remark: "",
+ },
+ rules: {
+ title: [{ required: true, message: "璇疯緭鍏ュ伐璧勪富棰�", trigger: "blur" }],
+ deptId: [{ required: true, message: "璇烽�夋嫨閮ㄩ棬", trigger: "change" }],
+ payMonth: [{ required: true, message: "璇烽�夋嫨宸ヨ祫鏈堜唤", trigger: "change" }],
+ },
+});
+const { form, rules } = toRefs(data);
+
+// 鎵佸钩鍖栭儴闂ㄦ爲渚涗笅鎷変娇鐢�
+function flattenDept(tree, list = []) {
+ if (!tree?.length) return list;
+ tree.forEach((node) => {
+ list.push({ deptId: node.deptId, deptName: node.deptName });
+ if (node.children?.length) flattenDept(node.children, list);
});
+ return list;
+}
- const rules = {
- payDate: [{ required: true, message: "璇烽�夋嫨缁熻鏈堜唤", trigger: "change" }],
- staffId: [{ required: true, message: "璇烽�夋嫨鍛樺伐", trigger: "change" }],
- basicSalary: [{ required: true, message: "璇疯緭鍏ュ熀鏈伐璧�", trigger: "blur" }],
- };
+const loadDeptOptions = () => {
+ listDept().then((res) => {
+ const tree = res.data ?? [];
+ deptOptions.value = flattenDept(tree);
+ });
+};
- const userList = ref([]);
-
- const loadUserList = () => {
- // userListNoPage().then(res => {
- // userList.value = res.data || [];
- // });
- staffOnJobList().then(res => {
- userList.value = res.data || [];
+// 鏋勫缓 閮ㄩ棬-浜哄憳 鏍戯紙鐢ㄤ簬鏂板浜哄憳寮圭獥锛�
+const loadDeptStaffTree = () => {
+ Promise.all([listDept(), staffOnJobList()]).then(([deptRes, staffRes]) => {
+ const tree = deptRes.data ?? [];
+ const staffList = staffRes.data ?? [];
+ const deptMap = new Map();
+ function walk(nodes) {
+ nodes.forEach((node) => {
+ deptMap.set(node.deptId, {
+ id: "dept_" + node.deptId,
+ deptId: node.deptId,
+ label: node.deptName,
+ type: "dept",
+ children: [],
+ });
+ if (node.children?.length) walk(node.children);
+ });
+ }
+ walk(tree);
+ staffList.forEach((s) => {
+ const deptId = s.deptId ?? s.dept_id;
+ const node = deptMap.get(deptId);
+ if (node) {
+ node.children.push({
+ id: s.id ?? s.staffId,
+ staffId: s.id ?? s.staffId,
+ label: s.staffName ?? s.name,
+ type: "staff",
+ ...s,
+ });
+ }
});
- };
+ deptStaffTree.value = Array.from(deptMap.values()).filter(
+ (n) => n.children && n.children.length > 0
+ );
+ });
+};
- const openDialog = (type, row) => {
- // 閲嶇疆琛ㄥ崟
- Object.assign(form, {
- id: "",
- payDate: "",
- staffId: "",
+const openDialog = (type, row) => {
+ nextTick(() => {
+ loadDeptOptions();
+ employeeList.value = [];
+ Object.assign(form.value, {
+ id: undefined,
+ title: "",
+ deptId: undefined,
+ payMonth: "",
+ remark: "",
+ });
+ if (type === "edit" && row?.id) {
+ monthlyStatisticsGet(row.id).then((res) => {
+ const d = res.data || {};
+ form.value.id = d.id;
+ form.value.title = d.title ?? d.payDateStr ?? "";
+ form.value.deptId = d.deptId;
+ form.value.payMonth = d.payMonth ?? d.payDate ?? d.payDateStr ?? "";
+ form.value.remark = d.remark ?? "";
+ employeeList.value = (d.detailList || d.employeeList || []).map((e) => ({
+ ...e,
+ basicSalary: parseNum(e.basicSalary),
+ pieceworkSalary: parseNum(e.pieceworkSalary),
+ hourlySalary: parseNum(e.hourlySalary),
+ otherIncome: parseNum(e.otherIncome),
+ socialSecurityIndividuals: parseNum(e.socialSecurityIndividuals),
+ providentFundIndividuals: parseNum(e.providentFundIndividuals),
+ }));
+ });
+ }
+ });
+};
+
+const openAddPerson = () => {
+ loadDeptStaffTree();
+ addPersonVisible.value = true;
+ nextTick(() => {
+ personTreeRef.value?.setCheckedKeys([]);
+ });
+};
+
+const addPersonClose = () => {};
+
+const confirmAddPerson = () => {
+ const tree = personTreeRef.value;
+ if (!tree) {
+ addPersonVisible.value = false;
+ return;
+ }
+ const checked = tree.getCheckedNodes();
+ const staffNodes = checked.filter((n) => n.type === "staff");
+ const existIds = new Set(employeeList.value.map((e) => e.staffId || e.id));
+ staffNodes.forEach((node) => {
+ const id = node.staffId ?? node.id;
+ if (existIds.has(id)) return;
+ existIds.add(id);
+ employeeList.value.push({
+ staffId: id,
+ id: id,
+ staffName: node.label,
+ roleName: node.roleName ?? node.role ?? "",
+ deptName: node.deptName ?? "",
basicSalary: 0,
pieceworkSalary: 0,
hourlySalary: 0,
otherIncome: 0,
socialSecurityIndividuals: 0,
providentFundIndividuals: 0,
- personalIncomeTax: 0,
- otherDeductions: 0,
- payableWages: 0,
- deductibleWages: 0,
- actualWages: 0,
- remark: "",
});
+ });
+ addPersonVisible.value = false;
+};
- if (type === "add") {
- dialogVisible.value = true;
- } else if (type === "edit" || type === "view") {
- if (row && row.id) {
- Object.assign(form, row);
- dialogVisible.value = true;
- }
+const removeEmployee = (row) => {
+ employeeList.value = employeeList.value.filter(
+ (e) => (e.staffId || e.id) !== (row.staffId || row.id)
+ );
+};
+
+const onEmployeeSelectionChange = (selection) => {
+ selectedEmployees.value = selection;
+};
+
+const handleBatchDelete = () => {
+ if (!selectedEmployees.value?.length) {
+ proxy.$modal.msgWarning("璇峰厛鍕鹃�夎鍒犻櫎鐨勫憳宸�");
+ return;
+ }
+ const ids = new Set(selectedEmployees.value.map((e) => e.staffId || e.id));
+ employeeList.value = employeeList.value.filter(
+ (e) => !ids.has(e.staffId || e.id)
+ );
+};
+
+const handleGenerate = () => {
+ proxy.$modal.msgInfo("鐢熸垚宸ヨ祫琛ㄥ姛鑳介渶瀵规帴鍚庣");
+};
+
+const handleExport = () => {
+ proxy.$modal.msgInfo("瀵煎嚭鍔熻兘闇�瀵规帴鍚庣");
+};
+
+const handleImport = () => {
+ proxy.$modal.msgInfo("瀵煎叆鍔熻兘闇�瀵规帴鍚庣");
+};
+
+const handleClear = () => {
+ proxy.$modal.confirm("纭畾娓呯┖褰撳墠鍛樺伐鍒楄〃鍚楋紵").then(() => {
+ employeeList.value = [];
+ }).catch(() => {});
+};
+
+const handleTaxForm = () => {
+ taxDialogVisible.value = true;
+};
+
+const submitForm = () => {
+ formRef.value?.validate((valid) => {
+ if (!valid) return;
+ const payload = {
+ ...form.value,
+ detailList: employeeList.value.map((e) => ({
+ staffId: e.staffId ?? e.id,
+ staffName: e.staffName,
+ basicSalary: parseNum(e.basicSalary),
+ pieceworkSalary: parseNum(e.pieceworkSalary),
+ hourlySalary: parseNum(e.hourlySalary),
+ otherIncome: parseNum(e.otherIncome),
+ socialSecurityIndividuals: parseNum(e.socialSecurityIndividuals),
+ providentFundIndividuals: parseNum(e.providentFundIndividuals),
+ })),
+ };
+ if (props.operationType === "add") {
+ monthlyStatisticsAdd(payload).then(() => {
+ proxy.$modal.msgSuccess("鏂板鎴愬姛");
+ closeDia();
+ });
+ } else {
+ monthlyStatisticsUpdate(payload).then(() => {
+ proxy.$modal.msgSuccess("淇敼鎴愬姛");
+ closeDia();
+ });
}
- };
-
- const submitForm = () => {
- formRef.value.validate(valid => {
- if (valid) {
- form.basicSalary = Number(form.basicSalary);
- form.pieceworkSalary = Number(form.pieceworkSalary);
- form.hourlySalary = Number(form.hourlySalary);
- form.otherIncome = Number(form.otherIncome);
- form.socialSecurityIndividuals = Number(form.socialSecurityIndividuals);
- form.providentFundIndividuals = Number(form.providentFundIndividuals);
- form.personalIncomeTax = Number(form.personalIncomeTax);
- form.otherDeductions = Number(form.otherDeductions);
-
- // 璁＄畻搴斿彂宸ヨ祫銆佸簲鎵ｅ伐璧勫拰瀹炲彂宸ヨ祫
- const payableWages =
- form.basicSalary +
- form.pieceworkSalary +
- form.hourlySalary +
- form.otherIncome;
- const deductibleWages =
- form.socialSecurityIndividuals +
- form.providentFundIndividuals +
- form.personalIncomeTax +
- form.otherDeductions;
- const actualWages = payableWages - deductibleWages;
-
- const submitData = {
- ...form,
- payableWages,
- deductibleWages,
- actualWages,
- };
-
- if (props.operationType === "add") {
- monthlyStatisticsAdd(submitData).then(res => {
- if (res.code === 200) {
- ElMessage.success("鏂板鎴愬姛");
- dialogVisible.value = false;
- emit("close");
- } else {
- ElMessage.error(res.msg || "鏂板澶辫触");
- }
- });
- } else if (props.operationType === "edit") {
- monthlyStatisticsUpdate(submitData).then(res => {
- if (res.code === 200) {
- ElMessage.success("鏇存柊鎴愬姛");
- dialogVisible.value = false;
- emit("close");
- } else {
- ElMessage.error(res.msg || "鏇存柊澶辫触");
- }
- });
- }
- }
- });
- };
-
- onMounted(() => {
- loadUserList();
});
+};
- defineExpose({
- openDialog,
- });
+const closeDia = () => {
+ dialogVisible.value = false;
+ emit("close");
+};
+
+defineExpose({ openDialog });
</script>
<style scoped>
- .dialog-footer {
- text-align: right;
- }
-</style>
\ No newline at end of file
+.form-dia-body {
+ padding: 0;
+}
+.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;
+}
+.toolbar {
+ margin-bottom: 16px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+}
+.employee-table-wrap {
+ position: relative;
+ min-height: 120px;
+}
+.table-empty {
+ text-align: center;
+ padding: 24px;
+ color: #999;
+ font-size: 14px;
+}
+.add-person-tree {
+ max-height: 360px;
+ overflow-y: auto;
+ padding: 8px 0;
+}
+.tax-desc {
+ margin-bottom: 12px;
+ font-size: 14px;
+ color: #606266;
+}
+.dialog-footer {
+ text-align: right;
+}
+</style>
diff --git a/src/views/personnelManagement/monthlyStatistics/index.vue b/src/views/personnelManagement/monthlyStatistics/index.vue
index 741a4b7..f576ad1 100644
--- a/src/views/personnelManagement/monthlyStatistics/index.vue
+++ b/src/views/personnelManagement/monthlyStatistics/index.vue
@@ -2,302 +2,255 @@
<div class="app-container">
<div class="search_form">
<div>
- <span class="search_title">濮撳悕锛�</span>
- <el-input v-model="searchForm.staffName"
- style="width: 240px"
- placeholder="璇疯緭鍏ュ鍚嶆悳绱�"
- @change="handleQuery"
- clearable
- :prefix-icon="Search" />
- <span class="search_title ml10">鏈堜唤锛�</span>
- <el-date-picker v-model="searchForm.payDateStr"
- type="month"
- @change="handleQuery"
- value-format="YYYY-MM"
- format="YYYY-MM"
- placeholder="璇烽�夋嫨鏈堜唤"
- style="width: 240px"
- clearable />
- <el-button type="primary"
- @click="handleQuery"
- style="margin-left: 10px">
+ <span class="search_title">涓婚锛�</span>
+ <el-input
+ v-model="searchForm.title"
+ style="width: 240px"
+ placeholder="璇疯緭鍏ヤ富棰�"
+ clearable
+ @keyup.enter="handleQuery"
+ />
+ <span class="search_title ml10">鍗曟嵁鐘舵�侊細</span>
+ <el-select
+ v-model="searchForm.documentStatus"
+ placeholder="璇烽�夋嫨鍗曟嵁鐘舵��"
+ clearable
+ style="width: 180px"
+ >
+ <el-option label="鑽夌" value="draft" />
+ <el-option label="宸叉彁浜�" value="submitted" />
+ <el-option label="宸插鏍�" value="approved" />
+ </el-select>
+ <span class="search_title ml10">宸ヨ祫鏈堜唤锛�</span>
+ <el-date-picker
+ v-model="searchForm.payMonth"
+ type="month"
+ value-format="YYYY-MM"
+ format="YYYY-MM"
+ placeholder="璇烽�夋嫨宸ヨ祫鏈堜唤"
+ style="width: 180px"
+ clearable
+ @change="handleQuery"
+ />
+ <span class="search_title ml10">瀹℃牳鐘舵�侊細</span>
+ <el-select
+ v-model="searchForm.approvalStatus"
+ placeholder="璇烽�夋嫨瀹℃牳鐘舵��"
+ clearable
+ style="width: 180px"
+ >
+ <el-option label="寰呭鏍�" value="pending" />
+ <el-option label="宸查�氳繃" value="passed" />
+ <el-option label="宸查┏鍥�" value="rejected" />
+ </el-select>
+ <el-button type="primary" @click="handleQuery" style="margin-left: 10px">
鎼滅储
</el-button>
- </div>
- <div>
- <el-button @click="handleExport"
- style="margin-right: 10px">瀵煎嚭</el-button>
- <el-button type="primary"
- @click="openForm('add')">鏂板鍙拌处</el-button>
- <el-button type="danger"
- plain
- @click="handleDelete">鍒犻櫎</el-button>
+ <el-button @click="handleReset">閲嶇疆</el-button>
</div>
</div>
<div class="table_list">
- <PIMTable rowKey="id"
- :column="tableColumn"
- :tableData="tableData"
- :page="page"
- :isSelection="true"
- @selection-change="handleSelectionChange"
- :tableLoading="tableLoading"
- @pagination="pagination"
- :total="page.total"></PIMTable>
+ <div style="margin-bottom: 10px">
+ <el-button type="primary" @click="openForm('add')">鏂板缓宸ヨ祫琛�</el-button>
+ <el-button @click="handleDelete">鍒犻櫎</el-button>
+ <el-button @click="handleExport">瀵煎嚭</el-button>
+ </div>
+ <PIMTable
+ rowKey="id"
+ :column="tableColumn"
+ :tableData="tableData"
+ :page="page"
+ :isSelection="true"
+ :tableLoading="tableLoading"
+ @selection-change="handleSelectionChange"
+ @pagination="pagination"
+ :total="page.total"
+ />
</div>
- <form-dia v-model="dialogVisible"
- :operation-type="operationType"
- :row="currentRow"
- ref="formDia"
- @close="handleQuery"></form-dia>
+ <form-dia
+ v-model="dialogVisible"
+ :operation-type="operationType"
+ :row="currentRow"
+ ref="formDiaRef"
+ @close="handleQuery"
+ />
</div>
</template>
<script setup>
- import { Search } from "@element-plus/icons-vue";
- import {
- onMounted,
- ref,
- reactive,
- toRefs,
- getCurrentInstance,
- nextTick,
- } from "vue";
- import { ElMessageBox } from "element-plus";
- import dayjs from "dayjs";
- import FormDia from "./components/formDia.vue";
- import {
- monthlyStatisticsListPage,
- monthlyStatisticsDelete,
- } from "@/api/personnelManagement/monthlyStatistics.js";
+import {
+ onMounted,
+ ref,
+ reactive,
+ toRefs,
+ getCurrentInstance,
+ nextTick,
+} from "vue";
+import { ElMessageBox } from "element-plus";
+import FormDia from "./components/formDia.vue";
+import PIMTable from "@/components/PIMTable/PIMTable.vue";
+import {
+ monthlyStatisticsListPage,
+ monthlyStatisticsDelete,
+} from "@/api/personnelManagement/monthlyStatistics.js";
- const data = reactive({
- searchForm: {
- staffName: "",
- payDateStr: "",
- },
- });
+const data = reactive({
+ searchForm: {
+ title: "",
+ documentStatus: "",
+ payMonth: "",
+ approvalStatus: "",
+ },
+});
+const { searchForm } = toRefs(data);
- const { searchForm } = toRefs(data);
+const tableColumn = ref([
+ { label: "宸ヨ祫涓婚", prop: "title", minWidth: 140 },
+ { label: "宸ヨ祫鏈堜唤", prop: "payMonth", width: 120 },
+ { label: "鍗曟嵁鐘舵��", prop: "documentStatusName", width: 100 },
+ { label: "瀹℃牳鐘舵��", prop: "approvalStatusName", width: 100 },
+ { label: "宸ヨ祫鎬婚", prop: "totalAmount", width: 120 },
+ { label: "鏀粯閾惰", prop: "paymentBank", width: 120 },
+ { label: "鍙戞斁鏃堕棿", prop: "issueTime", width: 160 },
+ { label: "瀹℃壒浜哄憳", prop: "approver", width: 100 },
+ { label: "澶囨敞", prop: "remark", minWidth: 120 },
+ {
+ dataType: "action",
+ label: "鎿嶄綔",
+ align: "center",
+ fixed: "right",
+ width: 120,
+ operation: [
+ {
+ name: "缂栬緫",
+ type: "text",
+ clickFun: (row) => openForm("edit", row),
+ },
+ ],
+ },
+]);
- const tableColumn = ref([
- {
- label: "鍛樺伐濮撳悕",
- prop: "staffName",
- },
- {
- label: "閮ㄩ棬",
- prop: "deptName",
- width: 140,
- },
- {
- label: "鏈堜唤",
- prop: "payDate",
- },
- {
- label: "鍩烘湰宸ヨ祫",
- prop: "basicSalary",
- },
- {
- label: "璁′欢宸ヨ祫",
- prop: "pieceworkSalary",
- },
- {
- label: "璁℃椂宸ヨ祫",
- prop: "hourlySalary",
- },
- {
- label: "鍏朵粬鏀跺叆",
- prop: "otherIncome",
- },
- {
- label: "绀句繚涓汉",
- prop: "socialSecurityIndividuals",
- },
- {
- label: "鍏Н閲戜釜浜�",
- prop: "providentFundIndividuals",
- width: 140,
- },
- {
- label: "宸ヨ祫涓◣",
- prop: "personalIncomeTax",
- },
- {
- label: "鍏朵粬鏀嚭",
- prop: "otherDeductions",
- },
- {
- label: "搴斿彂宸ヨ祫",
- prop: "payableWages",
- },
- {
- label: "搴旀墸宸ヨ祫",
- prop: "deductibleWages",
- },
- {
- label: "瀹炲彂宸ヨ祫",
- prop: "actualWages",
- },
- {
- label: "澶囨敞",
- prop: "remark",
- width: 150,
- },
- {
- dataType: "action",
- label: "鎿嶄綔",
- align: "center",
- fixed: "right",
- width: 220,
- operation: [
- {
- name: "缂栬緫",
- type: "text",
- clickFun: row => {
- openForm("edit", row);
- },
- },
- // {
- // name: "鏌ョ湅",
- // type: "text",
- // clickFun: row => {
- // openForm("view", row);
- // },
- // },
- ],
- },
- ]);
+const tableData = ref([]);
+const selectedRows = ref([]);
+const tableLoading = ref(false);
+const page = reactive({
+ current: 1,
+ size: 10,
+ total: 0,
+});
+const formDiaRef = ref(null);
+const dialogVisible = ref(false);
+const operationType = ref("add");
+const currentRow = ref({});
+const { proxy } = getCurrentInstance();
- const tableData = ref([]);
- const selectedRows = ref([]);
- const tableLoading = ref(false);
- const page = reactive({
- current: 1,
- size: 100,
- total: 0,
- });
+const handleQuery = () => {
+ page.current = 1;
+ getList();
+};
- const formDia = ref();
- const dialogVisible = ref(false);
- const operationType = ref("add");
- const currentRow = ref({});
- const { proxy } = getCurrentInstance();
+const handleReset = () => {
+ searchForm.value.title = "";
+ searchForm.value.documentStatus = "";
+ searchForm.value.payMonth = "";
+ searchForm.value.approvalStatus = "";
+ page.current = 1;
+ getList();
+};
- // 鏌ヨ鍒楄〃
- /** 鎼滅储鎸夐挳鎿嶄綔 */
- const handleQuery = () => {
- page.current = 1;
- getList();
- };
+const pagination = (obj) => {
+ page.current = obj.page;
+ page.size = obj.limit;
+ getList();
+};
- const pagination = obj => {
- page.current = obj.page;
- page.size = obj.limit;
- getList();
- };
-
- const getList = () => {
- tableLoading.value = true;
- monthlyStatisticsListPage({ ...page, ...searchForm.value })
- .then(res => {
- tableLoading.value = false;
- tableData.value = res.data.records;
- page.total = res.data.total;
- })
- .catch(err => {
- tableLoading.value = false;
- });
- };
-
- // 琛ㄦ牸閫夋嫨鏁版嵁
- const handleSelectionChange = selection => {
- selectedRows.value = selection;
- };
-
- // 鎵撳紑寮规
- const openForm = (type, row) => {
- operationType.value = type;
- currentRow.value = row || {};
- dialogVisible.value = true;
- nextTick(() => {
- formDia.value?.openDialog(type, row);
+const getList = () => {
+ tableLoading.value = true;
+ monthlyStatisticsListPage({
+ ...searchForm.value,
+ current: page.current,
+ size: page.size,
+ })
+ .then((res) => {
+ tableLoading.value = false;
+ const records = res.data?.records ?? [];
+ // 鍏煎鍚庣瀛楁锛氳嫢鎺ュ彛浠嶈繑鍥炲彴璐︾粨鏋勶紝鍙湪姝ゅ仛鏄犲皠
+ tableData.value = records.map((item) => ({
+ ...item,
+ title: item.title ?? item.payDateStr ?? "-",
+ payMonth: item.payMonth ?? item.payDateStr ?? item.payDate ?? "-",
+ documentStatusName: item.documentStatusName ?? "-",
+ approvalStatusName: item.approvalStatusName ?? "-",
+ totalAmount: item.totalAmount ?? item.actualWages ?? "-",
+ paymentBank: item.paymentBank ?? "-",
+ issueTime: item.issueTime ?? item.createTime ?? "-",
+ approver: item.approver ?? "-",
+ }));
+ page.total = res.data?.total ?? 0;
+ })
+ .catch(() => {
+ tableLoading.value = false;
});
- };
+};
- // 鍒犻櫎
- const handleDelete = () => {
- let ids = [];
- if (selectedRows.value.length > 0) {
- ids = selectedRows.value.map(item => item.id);
- } else {
- proxy.$modal.msgWarning("璇烽�夋嫨鏁版嵁");
- return;
- }
- ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�", "鍒犻櫎", {
- confirmButtonText: "纭",
- cancelButtonText: "鍙栨秷",
- type: "warning",
- })
- .then(() => {
- monthlyStatisticsDelete(ids).then(res => {
- proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
- getList();
- });
- })
- .catch(() => {
- proxy.$modal.msg("宸插彇娑�");
- });
- };
+const handleSelectionChange = (selection) => {
+ selectedRows.value = selection;
+};
- // 瀵煎嚭
- const handleExport = () => {
- ElMessageBox.confirm("鏄惁纭瀵煎嚭浜哄憳钖祫鍙拌处锛�", "瀵煎嚭", {
- confirmButtonText: "纭",
- cancelButtonText: "鍙栨秷",
- type: "warning",
- })
- .then(() => {
- proxy.download(
- "/compensationPerformance/export",
- { ...searchForm.value, ...page },
- "浜哄憳钖祫鍙拌处.xlsx"
- );
- })
- .catch(() => {
- proxy.$modal.msg("宸插彇娑�");
- });
- };
-
- onMounted(() => {
- getList();
+const openForm = (type, row) => {
+ operationType.value = type;
+ currentRow.value = row || {};
+ dialogVisible.value = true;
+ nextTick(() => {
+ formDiaRef.value?.openDialog(type, row);
});
+};
+
+const handleDelete = () => {
+ if (!selectedRows.value?.length) {
+ proxy.$modal.msgWarning("璇烽�夋嫨瑕佸垹闄ょ殑鏁版嵁");
+ return;
+ }
+ const ids = selectedRows.value.map((item) => item.id);
+ ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�", "鍒犻櫎", {
+ confirmButtonText: "纭",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(() => {
+ monthlyStatisticsDelete(ids).then(() => {
+ proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+ getList();
+ });
+ })
+ .catch(() => {});
+};
+
+const handleExport = () => {
+ proxy.download(
+ "/compensationPerformance/export",
+ { ...searchForm.value, current: page.current, size: page.size },
+ "宸ヨ祫琛�.xlsx"
+ );
+};
+
+onMounted(() => {
+ getList();
+});
</script>
<style scoped>
- .search_form {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 20px;
- flex-wrap: wrap;
- gap: 10px;
- }
-
- .search_title {
- font-weight: 500;
- margin-right: 5px;
- }
-
- .ml10 {
- margin-left: 10px;
- }
-
- .table_list {
- margin-top: 20px;
- }
-
- .dialog-footer {
- text-align: right;
- }
-</style>
\ No newline at end of file
+.search_form {
+ margin-bottom: 20px;
+}
+.search_title {
+ font-weight: 500;
+ margin-right: 5px;
+}
+.ml10 {
+ margin-left: 10px;
+}
+.table_list {
+ margin-top: 20px;
+}
+</style>
diff --git a/src/views/personnelManagement/socialSecuritySet/components/formDia.vue b/src/views/personnelManagement/socialSecuritySet/components/formDia.vue
new file mode 100644
index 0000000..3feab2d
--- /dev/null
+++ b/src/views/personnelManagement/socialSecuritySet/components/formDia.vue
@@ -0,0 +1,369 @@
+<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">
+ <el-row :gutter="24">
+ <!-- 宸︿晶锛氶�傜敤浜哄憳 -->
+ <el-col :span="8">
+ <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 :value="dept.deptId">
+ {{ dept.deptName }}
+ <span v-if="dept.personCount != null" class="dept-count"
+ >{{ dept.personCount }}浜�</span
+ >
+ </el-checkbox>
+ </div>
+ </el-checkbox-group>
+ </div>
+ </el-form-item>
+ </el-col>
+ <!-- 鍙充晶锛氬熀纭�淇℃伅 + 淇濋櫓绫诲瀷 -->
+ <el-col :span="16">
+ <!-- 鍩虹淇℃伅 -->
+ <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>
+ </template>
+ <el-form-item label="鏂规鏍囬锛�" prop="title">
+ <el-input v-model="form.title" placeholder="璇疯緭鍏�" clearable />
+ </el-form-item>
+ <el-form-item label="澶囨敞锛�" prop="remark">
+ <el-input
+ v-model="form.remark"
+ type="textarea"
+ :rows="2"
+ placeholder="璇疯緭鍏�"
+ clearable
+ />
+ </el-form-item>
+ </el-card>
+
+ <!-- 淇濋櫓绫诲瀷 -->
+ <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>
+ </template>
+ <el-row :gutter="16">
+ <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>
+ </div>
+ <el-form-item
+ :prop="'insuranceBenefits.' + index + '.insuranceType'"
+ label="淇濋櫓绫诲瀷锛�"
+ label-width="100px"
+ >
+ <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>
+ </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>
+ </div>
+ </el-form-item>
+ <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"
+ />
+ <span class="ratio-unit">(%)</span>
+ <span class="ratio-plus">+</span>
+ <el-input
+ v-model="item.personalFixed"
+ placeholder="璇疯緭鍏�"
+ clearable
+ style="width: 100px"
+ type="number"
+ />
+ </div>
+ </el-form-item>
+ </div>
+ </el-col>
+ </el-row>
+ </el-card>
+ </el-col>
+ </el-row>
+ </el-form>
+ </FormDialog>
+ </div>
+</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";
+
+const emit = defineEmits(["close"]);
+const { proxy } = getCurrentInstance();
+
+const dialogFormVisible = ref(false);
+const operationType = ref("add");
+const formRef = ref(null);
+const deptList = ref([]);
+
+const dialogTitle = () =>
+ operationType.value === "add" ? "鏂板鏂规" : "缂栬緫鏂规";
+
+// 淇濋櫓绫诲瀷閫夐」锛堝彲鎸夊瓧鍏告浛鎹級
+const insuranceTypeOptions = [
+ { label: "鍏昏�佷繚闄�", value: "pension" },
+ { label: "鍖荤枟淇濋櫓", value: "medical" },
+ { label: "澶变笟淇濋櫓", value: "unemployment" },
+ { label: "宸ヤ激淇濋櫓", value: "work_injury" },
+ { label: "鐢熻偛淇濋櫓", value: "maternity" },
+];
+
+const defaultBenefit = () => ({
+ _key: Math.random().toString(36).slice(2),
+ insuranceType: "",
+ baseOnSalary: false,
+ 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);
+
+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);
+ }
+ });
+ 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 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 || {};
+ form.value.id = d.id;
+ form.value.title = d.title;
+ form.value.remark = d.remark ?? "";
+ form.value.deptIds = d.deptIds ?? [];
+ form.value.insuranceBenefits =
+ (d.insuranceBenefits && d.insuranceBenefits.length)
+ ? d.insuranceBenefits.map((b) => ({
+ ...b,
+ _key: b._key || Math.random().toString(36).slice(2),
+ }))
+ : [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");
+};
+
+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>
diff --git a/src/views/personnelManagement/socialSecuritySet/index.vue b/src/views/personnelManagement/socialSecuritySet/index.vue
new file mode 100644
index 0000000..3c66656
--- /dev/null
+++ b/src/views/personnelManagement/socialSecuritySet/index.vue
@@ -0,0 +1,127 @@
+<template>
+ <div class="app-container">
+ <div class="search_form">
+ <div>
+ <span class="search_title">涓婚锛�</span>
+ <el-input
+ v-model="searchForm.title"
+ style="width: 240px"
+ placeholder="璇疯緭鍏ヤ富棰�"
+ clearable
+ @keyup.enter="handleQuery"
+ />
+ <el-button type="primary" @click="handleQuery" style="margin-left: 10px">
+ 鎼滅储
+ </el-button>
+ <el-button @click="handleReset">閲嶇疆</el-button>
+ </div>
+ </div>
+ <div class="table_list">
+ <div style="margin-bottom: 10px">
+ <el-button type="primary" @click="openForm('add')">鏂板鏂规</el-button>
+ </div>
+ <PIMTable
+ rowKey="id"
+ :column="tableColumn"
+ :tableData="tableData"
+ :page="page"
+ :tableLoading="tableLoading"
+ @pagination="pagination"
+ :total="page.total"
+ />
+ </div>
+ <form-dia ref="formDiaRef" @close="handleQuery" />
+ </div>
+</template>
+
+<script setup>
+import { onMounted, ref, reactive, toRefs, getCurrentInstance, nextTick } from "vue";
+import FormDia from "./components/formDia.vue";
+import PIMTable from "@/components/PIMTable/PIMTable.vue";
+import { socialSecurityListPage } from "@/api/personnelManagement/socialSecuritySet.js";
+
+const data = reactive({
+ searchForm: {
+ title: "",
+ },
+});
+const { searchForm } = toRefs(data);
+
+const tableColumn = ref([
+ { label: "涓婚", prop: "title", minWidth: 120 },
+ { label: "淇濋櫓绫诲瀷", prop: "insuranceTypeName", width: 120 },
+ { label: "浣跨敤鑼冨洿", prop: "scopeName", width: 120 },
+ { label: "澶囨敞", prop: "remark", minWidth: 120 },
+ { label: "鍒涘缓鏃堕棿", prop: "createTime", width: 160 },
+ { label: "鍒涘缓浜�", prop: "createBy", width: 100 },
+ {
+ dataType: "action",
+ label: "鎿嶄綔",
+ align: "center",
+ fixed: "right",
+ width: 120,
+ operation: [
+ {
+ name: "缂栬緫",
+ type: "text",
+ clickFun: (row) => openForm("edit", row),
+ },
+ ],
+ },
+]);
+
+const tableData = ref([]);
+const tableLoading = ref(false);
+const page = reactive({
+ current: 1,
+ size: 10,
+ total: 0,
+});
+const formDiaRef = ref(null);
+
+const handleQuery = () => {
+ page.current = 1;
+ getList();
+};
+
+const handleReset = () => {
+ searchForm.value.title = "";
+ page.current = 1;
+ getList();
+};
+
+const pagination = (obj) => {
+ page.current = obj.page;
+ page.size = obj.limit;
+ getList();
+};
+
+const getList = () => {
+ tableLoading.value = true;
+ socialSecurityListPage({
+ ...searchForm.value,
+ current: page.current,
+ size: page.size,
+ })
+ .then((res) => {
+ tableLoading.value = false;
+ tableData.value = res.data?.records ?? [];
+ page.total = res.data?.total ?? 0;
+ })
+ .catch(() => {
+ tableLoading.value = false;
+ });
+};
+
+const openForm = (type, row) => {
+ nextTick(() => {
+ formDiaRef.value?.openDialog(type, row);
+ });
+};
+
+onMounted(() => {
+ getList();
+});
+</script>
+
+<style scoped></style>
--
Gitblit v1.9.3