From d6863f0b1490a527e5b02b99e859035b86ea088d Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期五, 08 八月 2025 11:45:08 +0800
Subject: [PATCH] 1.协同审批-提交审核是添加电子签名 2.添加薪资管理页面

---
 src/views/collaborativeApproval/approvalProcess/components/approvalDia.vue |   62 ++++
 src/api/personnelManagement/payrollManagement.js                           |   35 ++
 src/views/personnelManagement/payrollManagement/components/formDia.vue     |  315 ++++++++++++++++++++++++++
 src/views/personnelManagement/payrollManagement/index.vue                  |  290 ++++++++++++++++++++++++
 package.json                                                               |    1 
 src/assets/styles/element-ui.scss                                          |    2 
 6 files changed, 697 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index ef18970..2ffdd34 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "splitpanes": "3.1.5",
     "vue": "3.4.31",
     "vue-cropper": "1.1.1",
+    "vue-esign": "^1.1.4",
     "vue-router": "4.4.0",
     "vuedraggable": "4.1.0"
   },
diff --git a/src/api/personnelManagement/payrollManagement.js b/src/api/personnelManagement/payrollManagement.js
new file mode 100644
index 0000000..c29a6b1
--- /dev/null
+++ b/src/api/personnelManagement/payrollManagement.js
@@ -0,0 +1,35 @@
+// 钖叕绠＄悊
+import request from "@/utils/request";
+
+// 鏌ヨ鍒楄〃
+export function compensationListPage(query) {
+  return request({
+    url: "/compensationPerformance/listPage",
+    method: "get",
+    params: query,
+  });
+}
+// 鏂板
+export function compensationAdd(query) {
+  return request({
+    url: "/compensationPerformance/add",
+    method: "post",
+    data: query,
+  });
+}
+// 淇敼
+export function compensationUpdate(query) {
+  return request({
+    url: "/compensationPerformance/update",
+    method: "post",
+    data: query,
+  });
+}
+// 鍒犻櫎
+export function compensationDelete(query) {
+  return request({
+    url: "/compensationPerformance/delete",
+    method: "delete",
+    data: query,
+  });
+}
\ No newline at end of file
diff --git a/src/assets/styles/element-ui.scss b/src/assets/styles/element-ui.scss
index 4eae8b2..8c741af 100644
--- a/src/assets/styles/element-ui.scss
+++ b/src/assets/styles/element-ui.scss
@@ -67,7 +67,7 @@
 }
 .el-dialog__body {
   padding: 16px 40px 0 40px;
-  max-height: 90vh;
+  max-height: 74vh;
   overflow-y: auto;
 }
 .el-dialog__footer {
diff --git a/src/views/collaborativeApproval/approvalProcess/components/approvalDia.vue b/src/views/collaborativeApproval/approvalProcess/components/approvalDia.vue
index 847f4c4..584a6c2 100644
--- a/src/views/collaborativeApproval/approvalProcess/components/approvalDia.vue
+++ b/src/views/collaborativeApproval/approvalProcess/components/approvalDia.vue
@@ -116,17 +116,34 @@
       </el-form>
       <template #footer v-if="operationType === 'approval'">
         <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm(2)">涓嶉�氳繃</el-button>
-          <el-button type="primary" @click="submitForm(1)">閫氳繃</el-button>
+          <el-button type="primary" @click="openSignatureDialog(2)">涓嶉�氳繃</el-button>
+          <el-button type="primary" @click="openSignatureDialog(1)">閫氳繃</el-button>
           <el-button @click="closeDia">鍙栨秷</el-button>
         </div>
       </template>
+    </el-dialog>
+    <!-- 鐢靛瓙绛惧悕寮圭獥锛坴ue3-signature-pad锛� -->
+    <el-dialog v-model="signatureDialogVisible" title="鐢靛瓙绛惧悕" width="600px" append-to-body>
+			<vueEsign
+				ref="esign"
+				class="mySign"
+				:width="800"
+				:height="300"
+				:isCrop="isCrop"
+				:lineWidth="lineWidth"
+				:lineColor="lineColor"
+			/>
+      <div style="margin-top:10px;">
+        <el-button @click="clearSignature">娓呴櫎</el-button>
+        <el-button type="primary" @click="confirmSignature">纭畾</el-button>
+      </div>
     </el-dialog>
   </div>
 </template>
 
 <script setup>
-import {getCurrentInstance, reactive, ref, toRefs} from "vue";
+import { getCurrentInstance, reactive, ref, toRefs } from "vue";
+import vueEsign from "vue-esign";
 import {
 	approveProcessDetails,
 	getDept,
@@ -156,6 +173,14 @@
 	},
 });
 const { form } = toRefs(data);
+const signatureDialogVisible = ref(false);
+const signatureImg = ref('');
+let submitStatus = null; // 涓存椂瀛樺偍閫氳繃/涓嶉�氳繃鐘舵��
+const isCrop = ref("");
+const esign = ref(null);
+const lineWidth = ref(0);
+const lineColor = ref("#000000");
+
 // 鑺傜偣鏍囬
 const getNodeTitle = (index, len) => {
   if (index === len - 1) return '缁撴潫';
@@ -205,17 +230,40 @@
 		productOptions.value = res.data;
 	});
 };
+// 鎵撳紑绛惧悕寮圭獥
+const openSignatureDialog = (status) => {
+  submitStatus = status;
+  signatureDialogVisible.value = true;
+};
+// 娓呴櫎绛惧悕
+const clearSignature = () => {
+	esign.value.reset();
+};
+// 纭绛惧悕
+const confirmSignature = () => {
+	esign.value.generate().then((res) => {
+		console.log(res);
+		signatureImg.value = res;
+		signatureDialogVisible.value = false;
+		clearSignature()
+		submitForm(submitStatus);
+	}).catch((err) => {
+		console.log(err);
+		proxy.$modal.msgWarning("璇峰厛绛惧悕锛�");
+	})
+};
 // 鎻愪氦瀹℃壒
 const submitForm = (status) => {
   const filteredActivities = activities.value.filter(activity => activity.isShen);
-  filteredActivities[0].approveNodeStatus = status
+  filteredActivities[0].approveNodeStatus = status;
+  filteredActivities[0].signatureImg = signatureImg.value; // 鏂板绛惧悕鍥剧墖瀛楁
   // 鍒ゆ柇鏄惁涓烘渶鍚庝竴姝�
   const isLast = activities.value.findIndex(a => a.isShen) === activities.value.length-1;
-  updateApproveNode({ ...filteredActivities[0], isLast }).then(() => {
+  updateApproveNode({ ...filteredActivities[0], isLast, signatureImg: signatureImg.value }).then(() => {
     proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
     closeDia();
-  })
-}
+  });
+};
 // 鍏抽棴寮规
 const closeDia = () => {
   proxy.resetForm("formRef");
diff --git a/src/views/personnelManagement/payrollManagement/components/formDia.vue b/src/views/personnelManagement/payrollManagement/components/formDia.vue
new file mode 100644
index 0000000..6dbc326
--- /dev/null
+++ b/src/views/personnelManagement/payrollManagement/components/formDia.vue
@@ -0,0 +1,315 @@
+<template>
+  <div>
+    <el-dialog
+        v-model="dialogFormVisible"
+        :title="operationType === 'add' ? '鏂板鍏ヨ亴' : '缂栬緫浜哄憳'"
+        width="50%"
+        @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="payDate">
+							<el-date-picker
+								v-model="form.payDate"
+								type="month"
+								value-format="YYYY-MM-DD"
+								format="YYYY-MM"
+								placeholder="璇烽�夋嫨鏈堜唤"
+								clearable
+								:disabled="operationType === 'edit'"
+								style="width: 100%"
+							/>
+            </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%" @change="handleSelect" :disabled="operationType === 'edit'">
+								<el-option
+									v-for="item in personList"
+									:key="item.id"
+									:label="item.staffName"
+									:value="item.id"
+								/>
+							</el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="30">
+          <el-col :span="12">
+            <el-form-item label="搴斿嚭鍕ゅぉ鏁帮細" prop="shouldAttendedNum">
+							<el-input v-model="form.shouldAttendedNum" placeholder="璇疯緭鍏�" clearable type="number"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="瀹為檯鍑哄嫟澶╂暟锛�" prop="actualAttendedNum">
+              <el-input v-model="form.actualAttendedNum" placeholder="璇疯緭鍏�" clearable type="number"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="30">
+          <el-col :span="12">
+            <el-form-item label="鍩烘湰宸ヨ祫锛�" prop="basicSalary">
+              <el-input v-model="form.basicSalary" placeholder="璇疯緭鍏�" clearable type="number"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="宀椾綅宸ヨ祫锛�" prop="postSalary">
+              <el-input v-model="form.postSalary" placeholder="璇疯緭鍏�" clearable type="number"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="30">
+          <el-col :span="12">
+            <el-form-item label="鍏ョ鑱岀己鍕ゆ墸娆撅細" prop="deductionAbsenteeism">
+              <el-input v-model="form.deductionAbsenteeism" placeholder="璇疯緭鍏�" clearable type="number"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="鐥呭亣鎵ｆ锛�" prop="sickLeaveDeductions">
+              <el-input v-model="form.sickLeaveDeductions" placeholder="璇疯緭鍏�" clearable type="number"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="30">
+          <el-col :span="12">
+            <el-form-item label="浜嬪亣鎵ｆ锛�" prop="deductionPersonalLeave">
+              <el-input v-model="form.deductionPersonalLeave" placeholder="璇疯緭鍏�" clearable type="number"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="蹇樿鎵撳崱鎵ｆ锛�" prop="forgetClockDeduct">
+              <el-input v-model="form.forgetClockDeduct" style="width: 100%" type="number"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="30">
+          <el-col :span="12">
+            <el-form-item label="缁╂晥寰楀垎锛�" prop="performanceScore">
+              <el-input v-model="form.performanceScore" placeholder="璇疯緭鍏�" clearable type="number"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="缁╂晥宸ヨ祫锛�" prop="performancePay">
+              <el-input v-model="form.performancePay" placeholder="璇疯緭鍏�" clearable type="number"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="30">
+          <el-col :span="12">
+            <el-form-item label="搴斿彂鍚堣锛�" prop="payableWages">
+              <el-input v-model="form.payableWages" placeholder="璇疯緭鍏�" clearable type="number"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="绀句繚涓汉锛�" prop="socialSecurityIndividuals">
+              <el-input v-model="form.socialSecurityIndividuals" :precision="0" :step="1" style="width: 100%" type="number"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="30">
+          <el-col :span="12">
+            <el-form-item label="绀句繚鍏徃锛�" prop="socialSecurityCompanies">
+							<el-input v-model="form.socialSecurityCompanies" :precision="0" :step="1" style="width: 100%" type="number"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="绀句繚鍚堣锛�" prop="socialSecurityTotal">
+							<el-input v-model="form.socialSecurityTotal" :precision="0" :step="1" style="width: 100%" type="number"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="30">
+          <el-col :span="12">
+            <el-form-item label="鍏Н閲戜釜浜猴細" prop="providentFundIndividuals">
+							<el-input v-model="form.providentFundIndividuals" :precision="0" :step="1" style="width: 100%" type="number"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="鍏Н閲戝叕鍙革細" prop="providentFundCompany">
+							<el-input v-model="form.providentFundCompany" :precision="0" :step="1" style="width: 100%" type="number"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="30">
+          <el-col :span="12">
+            <el-form-item label="鍏Н閲戝悎璁★細" prop="providentFundTotal">
+							<el-input v-model="form.providentFundTotal" :precision="0" :step="1" style="width: 100%" type="number"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="搴旂◣宸ヨ祫锛�" prop="taxableWaget">
+							<el-input v-model="form.taxableWaget" :precision="0" :step="1" style="width: 100%" type="number"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="30">
+          <el-col :span="12">
+            <el-form-item label="涓汉鎵�寰楃◣锛�" prop="personalIncomeTax">
+							<el-input v-model="form.personalIncomeTax" :step="0.1" style="width: 100%" type="number"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="瀹炲彂宸ヨ祫锛�" prop="actualWages">
+							<el-input v-model="form.actualWages" style="width: 100%" type="number"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </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>
+</template>
+
+<script setup>
+import {ref} from "vue";
+import {getStaffJoinInfo, getStaffOnJob, staffJoinAdd, staffJoinUpdate} from "@/api/personnelManagement/onboarding.js";
+import {compensationAdd, compensationUpdate} from "@/api/personnelManagement/payrollManagement.js";
+const { proxy } = getCurrentInstance()
+const emit = defineEmits(['close'])
+
+const dialogFormVisible = ref(false);
+const operationType = ref('')
+const data = reactive({
+  form: {
+		payDate: "",
+    staffId: "",
+		name: "",
+		shouldAttendedNum: "",
+		actualAttendedNum: "",
+		basicSalary: "",
+		postSalary: "",
+		deductionAbsenteeism: "",
+		sickLeaveDeductions: "",
+		deductionPersonalLeave: "",
+		forgetClockDeduct: "",
+		performanceScore: "",
+		performancePay: "",
+		payableWages: "",
+		socialSecurityIndividuals: "",
+		socialSecurityCompanies: "",
+		socialSecurityTotal: "",
+		providentFundIndividuals: "",
+		providentFundCompany: "",
+		providentFundTotal: "",
+		taxableWaget: "",
+		personalIncomeTax: "",
+		actualWages: "",
+  },
+  rules: {
+		payDate: [{ required: true, message: "璇烽�夋嫨", trigger: "change" },],
+		staffId: [{ required: true, message: "璇烽�夋嫨", trigger: "change" },],
+    staffName: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+		shouldAttendedNum: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+		actualAttendedNum: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+		basicSalary: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+		postSalary: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+		deductionAbsenteeism: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+		sickLeaveDeductions: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+		deductionPersonalLeave: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+		forgetClockDeduct: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+		performanceScore: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+		performancePay: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+		payableWages: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+		socialSecurityIndividuals: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+		socialSecurityCompanies: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+		socialSecurityTotal: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+		providentFundIndividuals: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+		providentFundCompany: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+		providentFundTotal: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+		taxableWaget: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+		personalIncomeTax: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+		actualWages: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+  },
+});
+const { form, rules } = toRefs(data);
+const personList = ref([]);
+
+// 鎵撳紑寮规
+const openDialog = (type, row) => {
+  operationType.value = type;
+  dialogFormVisible.value = true;
+	getStaffOnJob().then(res => {
+		personList.value = res.data
+	})
+	form.value = {}
+  if (operationType.value === 'edit') {
+    getStaffJoinInfo(row.id).then(res => {
+			form.value = {...row}
+			form.value.payDate = form.value.payDate + '-01'
+    })
+  }
+}
+const handleSelect = (value) => {
+	console.log('value', value)
+	const index = personList.value.findIndex(row => row.id === value)
+	if (index > -1) {
+		form.value.name = personList.value[index].staffName
+	}
+}
+// 鎻愪氦浜у搧琛ㄥ崟
+const submitForm = () => {
+  proxy.$refs.formRef.validate(valid => {
+    if (valid) {
+      form.value.staffState = 1
+      if (operationType.value === "add") {
+				compensationAdd(form.value).then(res => {
+          proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
+          closeDia();
+        })
+      } else {
+				compensationUpdate(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);
+    
+    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);
+    } else {
+      form.value.contractTerm = 0;
+    }
+  } else {
+    form.value.contractTerm = 0;
+  }
+};
+
+// 鍏抽棴寮规
+const closeDia = () => {
+  proxy.resetForm("formRef");
+  dialogFormVisible.value = false;
+  emit('close')
+};
+defineExpose({
+  openDialog,
+});
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/personnelManagement/payrollManagement/index.vue b/src/views/personnelManagement/payrollManagement/index.vue
new file mode 100644
index 0000000..b9b3f07
--- /dev/null
+++ b/src/views/personnelManagement/payrollManagement/index.vue
@@ -0,0 +1,290 @@
+<template>
+	<div class="app-container">
+		<div class="search_form">
+			<div>
+				<span class="search_title">濮撳悕锛�</span>
+				<el-input
+					v-model="searchForm.name"
+					style="width: 240px"
+					placeholder="璇疯緭鍏ュ鍚嶆悳绱�"
+					@change="handleQuery"
+					clearable
+					:prefix-icon="Search"
+				/>
+				<span class="search_title ml10">鏈堜唤锛�</span>
+				<el-date-picker
+					v-model="searchForm.payDate"
+					type="month"
+					value-format="YYYY-MM"
+					format="YYYY-MM"
+					placeholder="璇烽�夋嫨鏈堜唤"
+					style="width: 240px"
+					clearable
+				/>
+				<el-button type="primary" @click="handleQuery" style="margin-left: 10px"
+				>鎼滅储</el-button
+				>
+			</div>
+			<div>
+				<el-button type="primary" @click="openForm('add')">鏂板钖祫</el-button>
+<!--				<el-button @click="handleOut">瀵煎嚭</el-button>-->
+				<el-button type="danger" plain @click="handleDelete">鍒犻櫎</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>
+		<form-dia ref="formDia" @close="handleQuery"></form-dia>
+	</div>
+</template>
+
+<script setup>
+import { Search } from "@element-plus/icons-vue";
+import {onMounted, ref} from "vue";
+import FormDia from "@/views/personnelManagement/payrollManagement/components/formDia.vue";
+import {staffJoinDel} from "@/api/personnelManagement/onboarding.js";
+import {ElMessageBox} from "element-plus";
+import dayjs from "dayjs";
+import {compensationDelete, compensationListPage} from "@/api/personnelManagement/payrollManagement.js";
+
+const data = reactive({
+	searchForm: {
+		name: "",
+		payDate: "",
+	},
+});
+const { searchForm } = toRefs(data);
+const tableColumn = ref([
+	{
+		label: "钖祫鏈堜唤",
+		prop: "payDate",
+	},
+	{
+		label: "濮撳悕",
+		prop: "name",
+	},
+	{
+		label: "搴斿嚭鍕ゅぉ鏁�",
+		prop: "shouldAttendedNum",
+		width:100
+	},
+	{
+		label: "瀹為檯鍑哄嫟澶╂暟",
+		prop: "actualAttendedNum",
+		width:110
+	},
+	{
+		label: "鍩烘湰宸ヨ祫",
+		prop: "basicSalary",
+	},
+	{
+		label: "宀椾綅宸ヨ祫",
+		prop: "postSalary",
+		width:100
+	},
+	{
+		label: "鍏ョ鑱岀己鍕ゆ墸娆�",
+		prop: "deductionAbsenteeism",
+		width:130
+	},
+	{
+		label: "鐥呭亣鎵ｆ",
+		prop: "sickLeaveDeductions",
+		width:100
+	},
+	{
+		label: "浜嬪亣鎵ｆ",
+		prop: "deductionPersonalLeave",
+		width:100
+	},
+	{
+		label: "蹇樿鎵撳崱鎵ｆ",
+		prop: "forgetClockDeduct",
+		width:110
+	},
+	{
+		label: "缁╂晥寰楀垎",
+		prop: "performanceScore",
+		width:150
+	},
+	{
+		label: "缁╂晥宸ヨ祫",
+		prop: "performancePay",
+		width: 120
+	},
+	{
+		label: "搴斿彂鍚堣",
+		prop: "payableWages",
+		width:150
+	},
+	{
+		label: "绀句繚涓汉",
+		prop: "socialSecurityIndividuals",
+	},
+	{
+		label: "绀句繚鍏徃",
+		prop: "socialSecurityCompanies",
+		width: 120
+	},
+	{
+		label: "绀句繚鍚堣",
+		prop: "socialSecurityTotal",
+		width: 120
+	},
+	{
+		label: "鍏Н閲戜釜浜�",
+		prop: "providentFundIndividuals",
+		width: 120
+	},
+	{
+		label: "鍏Н閲戝叕鍙�",
+		prop: "providentFundCompany",
+		width: 120
+	},
+	{
+		label: "鍏Н閲戝悎璁�",
+		prop: "providentFundTotal",
+		width: 120
+	},
+	{
+		label: "搴旂◣宸ヨ祫",
+		prop: "taxableWaget",
+	},
+	{
+		label: "涓汉鎵�寰楃◣",
+		prop: "personalIncomeTax",
+		width: 120
+	},
+	{
+		label: "瀹炲彂宸ヨ祫",
+		prop: "actualWages",
+		width: 120
+	},
+	{
+		dataType: "action",
+		label: "鎿嶄綔",
+		align: "center",
+		fixed: 'right',
+		operation: [
+			{
+				name: "缂栬緫",
+				type: "text",
+				clickFun: (row) => {
+					openForm("edit", row);
+				},
+			},
+		],
+	},
+]);
+const tableData = ref([]);
+const selectedRows = ref([]);
+const tableLoading = ref(false);
+const page = reactive({
+	current: 1,
+	size: 100,
+	total: 0,
+});
+const formDia = ref()
+const { proxy } = getCurrentInstance()
+
+const handleDateChange = (value,type) => {
+	searchForm.value.entryDateEnd = null
+	searchForm.value.entryDateStart = null
+	if(type === 1){
+		if (value) {
+			searchForm.value.entryDateStart = dayjs(value).format("YYYY-MM-DD");
+		}
+	}else{
+		if (value) {
+			searchForm.value.entryDateEnd = dayjs(value).format("YYYY-MM-DD");
+		}
+	}
+	getList();
+};
+// 鏌ヨ鍒楄〃
+/** 鎼滅储鎸夐挳鎿嶄綔 */
+const handleQuery = () => {
+	page.current = 1;
+	getList();
+};
+const pagination = (obj) => {
+	page.current = obj.page;
+	page.size = obj.limit;
+	getList();
+};
+const getList = () => {
+	tableLoading.value = true;
+	compensationListPage({...page, ...searchForm.value, staffState: 1}).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) => {
+	nextTick(() => {
+		formDia.value?.openDialog(type, row)
+	})
+};
+
+// 鍒犻櫎
+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(() => {
+			compensationDelete(ids).then((res) => {
+				proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+				getList();
+			});
+		})
+		.catch(() => {
+			proxy.$modal.msg("宸插彇娑�");
+		});
+};
+// 瀵煎嚭
+const handleOut = () => {
+	ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�", "瀵煎嚭", {
+		confirmButtonText: "纭",
+		cancelButtonText: "鍙栨秷",
+		type: "warning",
+	})
+		.then(() => {
+			proxy.download("/staff/staffJoinLeaveRecord/export", {staffState: 1}, "浜哄憳鍏ヨ亴.xlsx");
+		})
+		.catch(() => {
+			proxy.$modal.msg("宸插彇娑�");
+		});
+};
+onMounted(() => {
+	getList();
+});
+</script>
+
+<style scoped></style>

--
Gitblit v1.9.3