From c1b5f6edeacfa0326931d06de6773b936dbabe27 Mon Sep 17 00:00:00 2001
From: maven <2163098428@qq.com>
Date: 星期二, 26 八月 2025 15:18:44 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/dev_JLMY' into dev_JLMY
---
src/views/personnelManagement/onboarding/components/formDia.vue | 259 ++
src/views/personnelManagement/payrollManagement/components/formDia.vue | 315 +++
src/views/personnelManagement/payrollManagement/index.vue | 292 +++
src/views/personnelManagement/scheduling/index.vue | 634 ++++++
src/views/personnelManagement/employeeRecord/components/formDia.vue | 75
src/views/personnelManagement/employeeRecord/index.vue | 250 ++
src/components/PIMTable/PIMTable.vue | 432 ++++
src/api/financialManagement/expenseManagement.js | 78
src/views/personnelManagement/contractManagement/index.vue | 330 +++
src/views/personnelManagement/selfService/index.vue | 525 +++++
src/api/financialManagement/financialStatements.js | 31
src/views/personnelManagement/dimission/components/formDia.vue | 290 +++
src/api/personnelManagement/payrollManagement.js | 35
src/api/financialManagement/revenueManagement.js | 78
src/api/personnelManagement/employeeRecord.js | 18
src/views/personnelManagement/contractManagement/components/formDia.vue | 87
package.json | 2
src/components/PIMTable/Pagination.vue | 100 +
src/views/personnelManagement/contractManagement/filesDia.vue | 203 ++
src/api/personnelManagement/onboarding.js | 49
src/components/filePreview/index.vue | 202 ++
src/views/personnelManagement/dimission/index.vue | 285 +++
src/views/personnelManagement/analytics/index.vue | 698 +++++++
src/views/personnelManagement/onboarding/index.vue | 283 +++
24 files changed, 5,551 insertions(+), 0 deletions(-)
diff --git a/package.json b/package.json
index ed8607f..b241ca8 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,8 @@
"dependencies": {
"@chenfengyuan/vue-qrcode": "^2.0.0",
"@element-plus/icons-vue": "2.3.1",
+ "@vue-office/docx": "^1.6.3",
+ "@vue-office/excel": "^1.7.14",
"@vueup/vue-quill": "1.2.0",
"@vueuse/core": "10.11.0",
"axios": "0.28.1",
diff --git a/src/api/financialManagement/expenseManagement.js b/src/api/financialManagement/expenseManagement.js
new file mode 100644
index 0000000..317dc47
--- /dev/null
+++ b/src/api/financialManagement/expenseManagement.js
@@ -0,0 +1,78 @@
+import request from "@/utils/request";
+
+// 鏌ヨ鍒楄〃
+export const listPage = (params) => {
+ return request({
+ url: "/account/accountExpense/listPage",
+ method: "get",
+ params,
+ });
+};
+
+// 鏂板
+export function add(data) {
+ return request({
+ url: "/account/accountExpense/add",
+ method: "post",
+ data: data,
+ });
+}
+
+// 缂栬緫
+export function update(data) {
+ return request({
+ url: "/account/accountExpense/update",
+ method: "post",
+ data: data,
+ });
+}
+
+//瀵煎嚭
+export const exportAccountExpense = (query) => {
+ return request({
+ url: "/account/accountExpense/export",
+ method: "post",
+ data: query,
+ responseType: "blob",
+ });
+};
+
+export const delAccountExpense = (query) => {
+ return request({
+ url: `account/accountExpense/del`,
+ method: "delete",
+ data: query,
+ });
+};
+
+export const getAccountExpense = (id) => {
+ return request({
+ url: `/account/accountExpense/${id}`,
+ method: "get",
+ });
+};
+
+// 鏌ヨ闄勪欢鍒楄〃
+export function fileListPage(query) {
+ return request({
+ url: "/account/accountFile/listPage",
+ method: "get",
+ params: query,
+ });
+}
+// 淇濆瓨闄勪欢鍒楄〃
+export function fileAdd(query) {
+ return request({
+ url: "/account/accountFile/add",
+ method: "post",
+ data: query,
+ });
+}
+// 鍒犻櫎闄勪欢鍒楄〃
+export function fileDel(query) {
+ return request({
+ url: "/account/accountFile/del",
+ method: "delete",
+ data: query,
+ });
+}
diff --git a/src/api/financialManagement/financialStatements.js b/src/api/financialManagement/financialStatements.js
new file mode 100644
index 0000000..537d36f
--- /dev/null
+++ b/src/api/financialManagement/financialStatements.js
@@ -0,0 +1,31 @@
+import request from "@/utils/request";
+
+// 鏍规嵁鏃ユ湡鏌ヨ
+export const reportForms = (params) => {
+ console.log(params);
+ return request({
+ url: "/account/accountExpense/report/forms",
+ method: "get",
+ params,
+ });
+};
+
+// 鏌ヨ姣忔湀鏁版嵁-鏀跺叆
+export const reportIncome = (params) => {
+ console.log(params);
+ return request({
+ url: "/account/accountExpense/report/income",
+ method: "get",
+ params,
+ });
+};
+
+// 鏌ヨ姣忔湀鏁版嵁-鏀嚭
+export const reportExpense = (params) => {
+ console.log(params);
+ return request({
+ url: "/account/accountExpense/report/expense",
+ method: "get",
+ params,
+ });
+};
diff --git a/src/api/financialManagement/revenueManagement.js b/src/api/financialManagement/revenueManagement.js
new file mode 100644
index 0000000..090ddf8
--- /dev/null
+++ b/src/api/financialManagement/revenueManagement.js
@@ -0,0 +1,78 @@
+import request from "@/utils/request";
+
+// 鏌ヨ鍒楄〃
+export const listPage = (params) => {
+ return request({
+ url: "/account/accountIncome/listPage",
+ method: "get",
+ params,
+ });
+};
+
+// 鏂板
+export function add(data) {
+ return request({
+ url: "/account/accountIncome/add",
+ method: "post",
+ data: data,
+ });
+}
+
+// 缂栬緫
+export function update(data) {
+ return request({
+ url: "/account/accountIncome/update",
+ method: "post",
+ data: data,
+ });
+}
+
+//瀵煎嚭
+export const exportAccountIncome = (query) => {
+ return request({
+ url: "/account/accountIncome/export",
+ method: "post",
+ data: query,
+ responseType: "blob",
+ });
+};
+
+export const delAccountIncome = (query) => {
+ return request({
+ url: `account/accountIncome/del`,
+ method: "delete",
+ data: query,
+ });
+};
+
+export const getAccountIncome = (id) => {
+ return request({
+ url: `/account/accountIncome/${id}`,
+ method: "get",
+ });
+};
+
+// 鏌ヨ闄勪欢鍒楄〃
+export function fileListPage(query) {
+ return request({
+ url: "/account/accountFile/listPage",
+ method: "get",
+ params: query,
+ });
+}
+// 淇濆瓨闄勪欢鍒楄〃
+export function fileAdd(query) {
+ return request({
+ url: "/account/accountFile/add",
+ method: "post",
+ data: query,
+ });
+}
+// 鍒犻櫎闄勪欢鍒楄〃
+export function fileDel(query) {
+ return request({
+ url: "/account/accountFile/del",
+ method: "delete",
+ data: query,
+ });
+}
diff --git a/src/api/personnelManagement/employeeRecord.js b/src/api/personnelManagement/employeeRecord.js
new file mode 100644
index 0000000..378756a
--- /dev/null
+++ b/src/api/personnelManagement/employeeRecord.js
@@ -0,0 +1,18 @@
+import request from '@/utils/request'
+
+// 鏌ヨ鍦ㄨ亴鍛樺伐鍙拌处
+export function staffOnJobListPage(query) {
+ return request({
+ url: '/staff/staffOnJob/listPage',
+ method: 'get',
+ params: query,
+ })
+}
+// 鏌ヨ鍛樺伐鍏ヨ亴淇℃伅
+export function staffOnJobInfo(query) {
+ return request({
+ url: '/staff/staffOnJob/staffNo',
+ method: 'get',
+ params: query,
+ })
+}
\ No newline at end of file
diff --git a/src/api/personnelManagement/onboarding.js b/src/api/personnelManagement/onboarding.js
new file mode 100644
index 0000000..39dbf22
--- /dev/null
+++ b/src/api/personnelManagement/onboarding.js
@@ -0,0 +1,49 @@
+import request from "@/utils/request";
+
+// 鏌ヨ浜哄憳鍏ヨ亴鍒楄〃
+export function staffJoinListPage(query) {
+ return request({
+ url: "/staff/staffJoinLeaveRecord/listPage",
+ method: "get",
+ params: query,
+ });
+}
+// 鏂板浜哄憳鍏ヨ亴
+export function staffJoinAdd(query) {
+ return request({
+ url: "/staff/staffJoinLeaveRecord/add",
+ method: "post",
+ data: query,
+ });
+}
+// 淇敼浜哄憳鍏ヨ亴
+export function staffJoinUpdate(query) {
+ return request({
+ url: "/staff/staffJoinLeaveRecord/update",
+ method: "post",
+ data: query,
+ });
+}
+// 鏌ヨ鍛樺伐鍏ヨ亴淇℃伅
+export function getStaffJoinInfo(query) {
+ return request({
+ url: "/staff/staffJoinLeaveRecord/" + query,
+ method: "get",
+ data: query,
+ });
+}
+// 鍒犻櫎鍛樺伐
+export function staffJoinDel(query) {
+ return request({
+ url: "/staff/staffJoinLeaveRecord/del",
+ method: "delete",
+ data: query,
+ });
+}
+
+export function getStaffOnJob() {
+ return request({
+ url: "/staff/staffOnJob/list",
+ method: "get",
+ });
+}
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/components/PIMTable/PIMTable.vue b/src/components/PIMTable/PIMTable.vue
new file mode 100644
index 0000000..955173d
--- /dev/null
+++ b/src/components/PIMTable/PIMTable.vue
@@ -0,0 +1,432 @@
+<template>
+ <el-table
+ ref="multipleTable"
+ v-loading="tableLoading"
+ :border="border"
+ :data="tableData"
+ :header-cell-style="{ background: '#F0F1F5', color: '#333333' }"
+ :height="height"
+ :highlight-current-row="highlightCurrentRow"
+ :row-class-name="rowClassName"
+ :row-style="rowStyle"
+ :row-key="rowKey"
+ style="width: 100%"
+ tooltip-effect="dark"
+ :expand-row-keys="expandRowKeys"
+ :show-summary="isShowSummary"
+ :summary-method="summaryMethod"
+ @row-click="rowClick"
+ @current-change="currentChange"
+ @selection-change="handleSelectionChange"
+ @expand-change="expandChange"
+ class="lims-table"
+ >
+ <el-table-column
+ align="center"
+ type="selection"
+ width="55"
+ v-if="isSelection"
+ />
+ <el-table-column align="center" label="搴忓彿" type="index" width="60" />
+
+ <el-table-column
+ v-for="(item, index) in column"
+ :key="index"
+ :column-key="item.columnKey"
+ :filter-method="item.filterHandler"
+ :filter-multiple="item.filterMultiple"
+ :filtered-value="item.filteredValue"
+ :filters="item.filters"
+ :fixed="item.fixed"
+ :label="item.label"
+ :prop="item.prop"
+ show-overflow-tooltip
+ :align="item.align"
+ :sortable="!!item.sortable"
+ :type="item.type"
+ :width="item.width"
+ >
+ <template
+ v-if="item.hasOwnProperty('colunmTemplate')"
+ #[item.colunmTemplate]="scope"
+ >
+ <slot
+ v-if="item.theadSlot"
+ :name="item.theadSlot"
+ :index="scope.$index"
+ :row="scope.row"
+ />
+ </template>
+
+ <template #default="scope">
+ <!-- 鎻掓Ы -->
+ <div v-if="item.dataType == 'slot'">
+ <slot
+ v-if="item.slot"
+ :index="scope.$index"
+ :name="item.slot"
+ :row="scope.row"
+ />
+ </div>
+ <!-- 杩涘害鏉� -->
+ <div v-else-if="item.dataType == 'progress'">
+ <el-progress :percentage="Number(scope.row[item.prop])" />
+ </div>
+ <!-- 鍥剧墖 -->
+ <div v-else-if="item.dataType == 'image'">
+ <img
+ :src="javaApi + '/img/' + scope.row[item.prop]"
+ alt=""
+ style="width: 40px; height: 40px; margin-top: 10px"
+ />
+ </div>
+
+ <!-- tag -->
+ <div v-else-if="item.dataType == 'tag'">
+ <el-tag
+ v-if="
+ typeof dataTypeFn(scope.row[item.prop], item.formatData) ===
+ 'string'
+ "
+ :title="formatters(scope.row[item.prop], item.formatData)"
+ :type="formatType(scope.row[item.prop], item.formatType)"
+ >
+ {{ formatters(scope.row[item.prop], item.formatData) }}
+ </el-tag>
+
+ <el-tag
+ v-for="(tag, index) in dataTypeFn(
+ scope.row[item.prop],
+ item.formatData
+ )"
+ v-else-if="
+ typeof dataTypeFn(scope.row[item.prop], item.formatData) ===
+ 'object'
+ "
+ :key="index"
+ :title="formatters(scope.row[item.prop], item.formatData)"
+ :type="formatType(tag, item.formatType)"
+ >
+ {{ item.tagGroup ? tag[item.tagGroup.label] ?? tag : tag }}
+ </el-tag>
+
+ <el-tag
+ v-else
+ :title="formatters(scope.row[item.prop], item.formatData)"
+ :type="formatType(scope.row[item.prop], item.formatType)"
+ >
+ {{ formatters(scope.row[item.prop], item.formatData) }}
+ </el-tag>
+ </div>
+
+ <!-- 鎸夐挳 -->
+ <div v-else-if="item.dataType == 'action'">
+ <template v-for="(o, key) in item.operation" :key="key">
+ <el-button
+ v-show="o.type != 'upload'"
+ size="small"
+ v-if="o.showHide ? o.showHide(scope.row) : true"
+ :disabled="o.disabled ? o.disabled(scope.row) : false"
+ :plain="o.plain"
+ type="primary"
+ :style="{
+ color:
+ o.name === '鍒犻櫎' || o.name === 'delete'
+ ? '#f56c6c'
+ : o.color,
+ }"
+ link
+ @click="o.clickFun(scope.row)"
+ :key="key"
+ >
+ {{ o.name }}
+ </el-button>
+ <el-upload
+ :action="
+ javaApi +
+ o.url +
+ '?id=' +
+ (o.uploadIdFun ? o.uploadIdFun(scope.row) : scope.row.id)
+ "
+ ref="uploadRef"
+ size="small"
+ :multiple="o.multiple ? o.multiple : false"
+ :limit="1"
+ :disabled="o.disabled ? o.disabled(scope.row) : false"
+ :accept="
+ o.accept
+ ? o.accept
+ : '.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.zip,.rar'
+ "
+ v-if="o.type == 'upload'"
+ style="display: inline-block; width: 50px"
+ v-show="o.showHide ? o.showHide(scope.row) : true"
+ :headers="uploadHeader"
+ :before-upload="(file) => beforeUpload(file, scope.$index)"
+ :on-change="
+ (file, fileList) => handleChange(file, fileList, scope.$index)
+ "
+ :on-error="
+ (error, file, fileList) =>
+ onError(error, file, fileList, scope.$index)
+ "
+ :on-success="
+ (response, file, fileList) =>
+ handleSuccessUp(response, file, fileList, scope.$index)
+ "
+ :on-exceed="onExceed"
+ :show-file-list="false"
+ >
+ <el-button
+ :size="o.size ? o.size : 'small'"
+ link
+ type="primary"
+ :disabled="o.disabled ? o.disabled(scope.row) : false"
+ >{{ o.name }}</el-button
+ >
+ </el-upload>
+ </template>
+ </div>
+ <!-- 鍙偣鍑荤殑鏂囧瓧 -->
+ <div
+ v-else-if="item.dataType == 'link'"
+ class="cell link"
+ style="width: 100%"
+ @click="goLink(scope.row, item.linkMethod)"
+ >
+ <span v-if="!item.formatData">{{ scope.row[item.prop] }}</span>
+ </div>
+ <!-- 榛樿绾睍绀烘暟鎹� -->
+ <div v-else class="cell" style="width: 100%">
+ <span v-if="!item.formatData">{{ scope.row[item.prop] }}</span>
+ <span v-else>{{
+ formatters(scope.row[item.prop], item.formatData)
+ }}</span>
+ </div>
+ </template>
+ </el-table-column>
+ </el-table>
+ <pagination
+ v-if="page.total > 0"
+ :total="page.total"
+ :layout="page.layout"
+ :page="page.current"
+ :limit="page.size"
+ @pagination="paginationSearch"
+ />
+</template>
+
+<script setup>
+import pagination from "./Pagination.vue";
+import { ref, inject, getCurrentInstance } from "vue";
+import { ElMessage } from "element-plus";
+
+// 鑾峰彇鍏ㄥ眬鐨� uploadHeader
+const { proxy } = getCurrentInstance();
+const uploadHeader = proxy.uploadHeader;
+const javaApi = proxy.javaApi;
+
+const emit = defineEmits(["pagination", "expand-change", "selection-change"]);
+
+// Filters
+const typeFn = (val, row) => {
+ return typeof val === "function" ? val(row) : val;
+};
+
+const formatters = (val, format) => {
+ return typeof format === "function" ? format(val) : val;
+};
+
+// Props锛堜娇鐢� defineProps 鐨勯潪 TS 褰㈠紡锛�
+const props = defineProps({
+ tableLoading: {
+ type: Boolean,
+ default: false,
+ },
+ height: {
+ type: [Number, String],
+ default: "calc(100vh - 22em)",
+ },
+ expandRowKeys: {
+ type: Array,
+ default: () => [],
+ },
+ summaryMethod: {
+ type: Function,
+ default: () => {},
+ },
+ rowClick: {
+ type: Function,
+ default: () => {},
+ },
+ currentChange: {
+ type: Function,
+ default: () => {},
+ },
+ border: {
+ type: Boolean,
+ default: true,
+ },
+ isSelection: {
+ type: Boolean,
+ default: false,
+ },
+ isShowSummary: {
+ type: Boolean,
+ default: false,
+ },
+ highlightCurrentRow: {
+ type: Boolean,
+ default: false,
+ },
+ headerCellStyle: {
+ type: Object,
+ default: () => ({}),
+ },
+ column: {
+ type: Array,
+ default: () => [],
+ },
+ rowClassName: {
+ type: Function,
+ default: () => "",
+ },
+ rowStyle: {
+ type: [Object, Function],
+ default: () => ({}),
+ },
+ tableData: {
+ type: Array,
+ default: () => [],
+ },
+ rowKey: {
+ type: String,
+ default: 'id',
+ },
+ page: {
+ type: Object,
+ default: () => ({
+ total: 0,
+ current: 0,
+ size: 10,
+ layout: "total, sizes, prev, pager, next, jumper",
+ }),
+ },
+ total: {
+ type: Number,
+ default: 0,
+ },
+});
+
+// Data
+const uploadRefs = ref([]);
+const currentFiles = ref({});
+const uploadKeys = ref({});
+
+const indexMethod = (index) => {
+ return (props.page.current - 1) * props.page.size + index + 1;
+};
+
+// 鐐瑰嚮 link 浜嬩欢
+const goLink = (row, linkMethod) => {
+ if (!linkMethod) {
+ return ElMessage.warning("璇烽厤缃� link 浜嬩欢");
+ }
+ const parentMethod = getParentMethod(linkMethod);
+ if (typeof parentMethod === "function") {
+ parentMethod(row);
+ } else {
+ console.warn(`鐖剁粍浠朵腑鏈壘鍒版柟娉�: ${linkMethod}`);
+ }
+};
+
+// 鑾峰彇鐖剁粍浠舵柟娉曪紙绀轰緥瀹炵幇锛�
+const getParentMethod = (methodName) => {
+ const parentMethods = inject("parentMethods", {});
+ return parentMethods[methodName];
+};
+
+const dataTypeFn = (val, format) => {
+ if (typeof format === "function") {
+ return format(val);
+ } else return val;
+};
+
+const formatType = (val, format) => {
+ if (typeof format === "function") {
+ return format(val);
+ } else return "";
+};
+
+// 鏂囦欢鍙樺寲澶勭悊
+const handleChange = (file, fileList, index) => {
+ if (fileList.length > 1) {
+ const earliestFile = fileList[0];
+ uploadRefs.value[index]?.handleRemove(earliestFile);
+ }
+ currentFiles.value[index] = file;
+};
+
+// 鏂囦欢涓婁紶鍓嶆牎楠�
+const beforeUpload = (rawFile, index) => {
+ currentFiles.value[index] = {};
+ if (rawfile.size > 1024 * 1024 * 10 * 10) {
+ ElMessage.error("涓婁紶鏂囦欢涓嶈秴杩�10M");
+ return false;
+ }
+ return true;
+};
+
+// 涓婁紶鎴愬姛
+const handleSuccessUp = (response, file, fileList, index) => {
+ if (response.code == 200) {
+ if (uploadRefs[index]) {
+ uploadRefs[index].clearFiles();
+ }
+ currentFiles[index] = file;
+ ElMessage.success("涓婁紶鎴愬姛");
+ resetUploadComponent(index);
+ } else {
+ ElMessage.error(response.message);
+ }
+};
+
+const resetUploadComponent = (index) => {
+ uploadKeys[index] = Date.now();
+};
+
+// 涓婁紶澶辫触
+const onError = (error, file, fileList, index) => {
+ ElMessage.error("鏂囦欢涓婁紶澶辫触锛岃閲嶈瘯");
+ if (uploadRefs.value[index]) {
+ uploadRefs.value[index].clearFiles();
+ }
+};
+
+// 鏂囦欢鏁伴噺瓒呴檺鎻愮ず
+const onExceed = () => {
+ ElMessage.warning("瓒呭嚭鏂囦欢涓暟");
+};
+
+const paginationSearch = ({ page, limit }) => {
+ emit("pagination", { page: page, limit: limit });
+};
+
+const expandChange = (row, expandedRows) => {
+ emit("expand-change", row, expandedRows);
+};
+
+const handleSelectionChange = (newSelection) => {
+ emit("selection-change", newSelection);
+};
+</script>
+
+<style scoped lang="scss">
+.cell {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ padding-right: 0 !important;
+ padding-left: 0 !important;
+}
+</style>
diff --git a/src/components/PIMTable/Pagination.vue b/src/components/PIMTable/Pagination.vue
new file mode 100644
index 0000000..7639e64
--- /dev/null
+++ b/src/components/PIMTable/Pagination.vue
@@ -0,0 +1,100 @@
+<template>
+ <div :class="{ hidden }" class="pagination-container">
+ <el-pagination
+ :background="background"
+ v-model:current-page="currentPage"
+ v-model:page-size="pageSize"
+ :layout="layout"
+ :page-sizes="pageSizes"
+ :pager-count="pagerCount"
+ :total="total"
+ v-bind="$attrs"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { scrollTo } from '@/utils/scroll-to'
+
+const props = defineProps({
+ total: {
+ type: Number,
+ required: true
+ },
+ page: {
+ type: Number,
+ default: 1
+ },
+ limit: {
+ type: Number,
+ default: 20
+ },
+ pageSizes: {
+ type: Array,
+ default: () => [10, 20, 30, 50, 100]
+ },
+ pagerCount: {
+ type: Number,
+ default: () => (document.body.clientWidth < 992 ? 5 : 7)
+ },
+ layout: {
+ type: String,
+ default: 'total, sizes, prev, pager, next, jumper'
+ },
+ background: {
+ type: Boolean,
+ default: true
+ },
+ autoScroll: {
+ type: Boolean,
+ default: true
+ },
+ hidden: {
+ type: Boolean,
+ default: false
+ }
+})
+
+const emit = defineEmits(['update:page', 'update:limit', 'pagination'])
+
+const currentPage = computed({
+ get: () => props.page,
+ set: (val) => emit('update:page', val)
+})
+
+const pageSize = computed({
+ get: () => props.limit,
+ set: (val) => emit('update:limit', val)
+})
+
+const handleSizeChange = (val) => {
+ if (currentPage.value * val > props.total) {
+ currentPage.value = 1
+ }
+ emit('pagination', { page: currentPage.value, limit: val })
+ if (props.autoScroll) {
+ scrollTo(0, 800)
+ }
+}
+
+const handleCurrentChange = (val) => {
+ emit('pagination', { page: val, limit: pageSize.value })
+ if (props.autoScroll) {
+ scrollTo(0, 800)
+ }
+}
+</script>
+
+<style scoped>
+.pagination-container {
+ background: #fff;
+ padding: 16px 0;
+ margin-top: 0;
+}
+.pagination-container.hidden {
+ display: none;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/filePreview/index.vue b/src/components/filePreview/index.vue
new file mode 100644
index 0000000..cda5b56
--- /dev/null
+++ b/src/components/filePreview/index.vue
@@ -0,0 +1,202 @@
+<template>
+ <el-dialog v-model="dialogVisible" title="棰勮" width="100%" fullscreen align-center :before-close="handleClose" append-to-body>
+ <div>
+ <!-- 鍥剧墖棰勮 -->
+ <div v-if="isImage">
+ <img :src="imgUrl" alt="Image Preview" />
+ </div>
+
+ <!-- PDF棰勮鎻愮ず -->
+ <div v-if="isPdf" style="height: 100vh; display: flex; align-items: center; justify-content: center;">
+ <p>姝ｅ湪鍑嗗PDF棰勮...</p>
+ </div>
+
+ <!-- Word鏂囨。棰勮 -->
+ <div v-if="isDoc">
+ <p v-if="!isDocShow">鏂囨。鏃犳硶鐩存帴棰勮锛岃涓嬭浇鏌ョ湅銆�</p>
+ <a :href="fileUrl" v-if="!isDocShow">涓嬭浇鏂囦欢</a>
+ <vue-office-docx
+ v-else
+ :src="fileUrl"
+ style="height: 100vh;"
+ @rendered="renderedHandler"
+ @error="errorHandler"
+ />
+ </div>
+
+ <!-- Excel鏂囨。棰勮 -->
+ <div v-if="isXls">
+ <p v-if="!isDocShow">鏂囨。鏃犳硶鐩存帴棰勮锛岃涓嬭浇鏌ョ湅銆�</p>
+ <a :href="fileUrl" v-if="!isDocShow">涓嬭浇鏂囦欢</a>
+ <vue-office-excel
+ v-else
+ :src="fileUrl"
+ :options="options"
+ style="height: 100vh;"
+ @rendered="renderedHandler"
+ @error="errorHandler"
+ />
+ </div>
+
+ <!-- 鍘嬬缉鏂囦欢澶勭悊 -->
+ <div v-if="isZipOrRar">
+ <p>鍘嬬缉鏂囦欢鏃犳硶鐩存帴棰勮锛岃涓嬭浇鏌ョ湅銆�</p>
+ <a :href="fileUrl">涓嬭浇鏂囦欢</a>
+ </div>
+
+ <!-- 涓嶆敮鎸佺殑鏍煎紡 -->
+ <div v-if="!isSupported">
+ <p>涓嶆敮鎸佺殑鏂囦欢鏍煎紡</p>
+ </div>
+ </div>
+ </el-dialog>
+</template>
+
+<script setup>
+import { ref, computed, getCurrentInstance, watch } from 'vue';
+import VueOfficeDocx from '@vue-office/docx';
+import '@vue-office/docx/lib/index.css';
+import VueOfficeExcel from '@vue-office/excel';
+import '@vue-office/excel/lib/index.css';
+
+// 鍝嶅簲寮忓彉閲�
+const fileUrl = ref('')
+const dialogVisible = ref(false)
+const { proxy } = getCurrentInstance();
+const javaApi = proxy.javaApi;
+
+// 鏂囨。棰勮鐘舵��
+const isDocShow = ref(true);
+const imgUrl = ref('');
+const options = ref({
+ xls: false,
+ minColLength: 0,
+ minRowLength: 0,
+ widthOffset: 10,
+ heightOffset: 10,
+ beforeTransformData: (workbookData) => workbookData,
+ transformData: (workbookData) => workbookData,
+});
+
+// 璁＄畻灞炴�� - 鍒ゆ柇鏂囦欢绫诲瀷
+const isImage = computed(() => {
+ const state = /\.(jpg|jpeg|png|gif)$/i.test(fileUrl.value);
+ if (state) {
+ imgUrl.value = fileUrl.value.replaceAll('word', 'img');
+ }
+ return state;
+});
+
+const isPdf = computed(() => {
+ console.log(fileUrl.value)
+ return /\.pdf$/i.test(fileUrl.value);
+});
+
+const isDoc = computed(() => {
+ return /\.(doc|docx)$/i.test(fileUrl.value);
+});
+
+const isXls = computed(() => {
+ const state = /\.(xls|xlsx)$/i.test(fileUrl.value);
+ if (state) {
+ options.value.xls = /\.(xls)$/i.test(fileUrl.value);
+ }
+ return state;
+});
+
+const isZipOrRar = computed(() => {
+ return /\.(zip|rar)$/i.test(fileUrl.value);
+});
+
+const isSupported = computed(() => {
+ return isImage.value || isPdf.value || isDoc.value || isXls.value || isZipOrRar.value;
+});
+
+// 鍔ㄦ�佸垱寤篴鏍囩骞惰烦杞瑙圥DF
+const previewPdf = (url) => {
+ // 鍒涘缓a鏍囩
+ const link = document.createElement('a');
+ // 璁剧疆PDF鏂囦欢URL
+ link.href = url;
+ // 鍦ㄦ柊鏍囩椤垫墦寮�
+ link.target = '_blank';
+ // 瀹夊叏灞炴�э紝闃叉鏂伴〉闈㈣闂師椤甸潰
+ link.rel = 'noopener noreferrer';
+ // 鍙�夛細璁剧疆閾炬帴鏂囨湰
+ link.textContent = '棰勮PDF';
+ // 灏哸鏍囩娣诲姞鍒伴〉闈紙閮ㄥ垎娴忚鍣ㄨ姹傚繀椤诲湪DOM涓級
+ document.body.appendChild(link);
+ // 瑙﹀彂鐐瑰嚮浜嬩欢
+ link.click();
+ // 绉婚櫎a鏍囩锛屾竻鐞咲OM
+ document.body.removeChild(link);
+};
+
+
+// 鐩戝惉PDF鐘舵�佸彉鍖栵紝鑷姩瑙﹀彂璺宠浆
+watch(
+ () => isPdf.value,
+ (newVal) => {
+
+ // 褰撶‘璁ゆ槸PDF涓旀枃浠禪RL鏈夋晥鏃�
+ if (newVal && fileUrl.value) {
+ // 鍏抽棴瀵硅瘽妗�
+ dialogVisible.value = false;
+ // 鍔犱釜灏忓欢杩熺‘淇濈姸鎬佹洿鏂板畬鎴�
+ setTimeout(() => {
+ previewPdf(fileUrl.value);
+ fileUrl.value = '';
+ }, 100);
+ }
+ }
+);
+
+// 鏂规硶瀹氫箟
+const renderedHandler = () => {
+ console.log("娓叉煋瀹屾垚");
+ isDocShow.value = true;
+ resetStyle();
+};
+
+const errorHandler = () => {
+ console.log("娓叉煋澶辫触");
+ isDocShow.value = false;
+};
+
+const open = (url) => {
+ fileUrl.value = window.location.protocol+'//'+window.location.host+ url;
+ dialogVisible.value = true;
+};
+const handleClose = () => {
+ dialogVisible.value = false;
+};
+
+const resetStyle = () => {
+ const elements = document.querySelectorAll('[style*="pt"]');
+ for (const element of elements) {
+ const style = element.getAttribute('style');
+ if (style) {
+ element.setAttribute('style', style.replace(/pt/g, 'px'));
+ }
+ }
+};
+
+// 鏆撮湶open鏂规硶渚涘閮ㄨ皟鐢�
+defineExpose({
+ open
+})
+</script>
+
+<style scoped>
+img {
+ max-width: 100%;
+ display: block;
+ margin: 0 auto;
+}
+
+.oneLine {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+</style>
diff --git a/src/views/personnelManagement/analytics/index.vue b/src/views/personnelManagement/analytics/index.vue
new file mode 100644
index 0000000..06b868b
--- /dev/null
+++ b/src/views/personnelManagement/analytics/index.vue
@@ -0,0 +1,698 @@
+<template>
+ <div class="app-container analytics-container">
+
+ <!-- 鍏抽敭鎸囨爣鍗＄墖 -->
+ <el-row :gutter="20" class="metrics-cards">
+ <el-col :span="6" v-for="(item, index) in keyMetrics" :key="index">
+ <el-card class="metric-card" :class="item.type">
+ <div class="card-content">
+ <div class="card-icon">
+ <el-icon :size="32">
+ <component :is="item.icon" />
+ </el-icon>
+ </div>
+ <div class="card-info">
+ <div class="card-number">
+ <el-skeleton-item v-if="loading" variant="text" style="width: 60px; height: 32px;" />
+ <span v-else>{{ item.value }}{{ item.unit }}</span>
+ </div>
+ <div class="card-label">{{ item.label }}</div>
+ <div class="card-trend" :class="item.trend > 0 ? 'positive' : 'negative'">
+ <el-icon>
+ <component :is="item.trend > 0 ? 'ArrowUp' : 'ArrowDown'" />
+ </el-icon>
+ {{ Math.abs(item.trend) }}%
+ </div>
+ </div>
+ </div>
+ </el-card>
+ </el-col>
+ </el-row>
+
+ <!-- 鍥捐〃鍖哄煙 -->
+ <el-row :gutter="20" class="charts-section">
+ <!-- 鍛樺伐娴佸姩鐜囪秼鍔垮浘 -->
+ <el-col :span="12">
+ <el-card class="chart-card">
+ <template #header>
+ <div class="card-header">
+ <span>鍛樺伐娴佸姩鐜囪秼鍔�</span>
+ <el-tag type="info">杩�12涓湀</el-tag>
+ </div>
+ </template>
+ <div class="chart-container">
+ <div ref="turnoverChartRef" class="chart"></div>
+ </div>
+ </el-card>
+ </el-col>
+
+ <!-- 閮ㄩ棬浜哄憳鍒嗗竷 -->
+ <el-col :span="12">
+ <el-card class="chart-card">
+ <template #header>
+ <div class="card-header">
+ <span>閮ㄩ棬浜哄憳鍒嗗竷</span>
+ <el-tag type="success">褰撳墠鐘舵��</el-tag>
+ </div>
+ </template>
+ <div class="chart-container">
+ <div ref="departmentChartRef" class="chart"></div>
+ </div>
+ </el-card>
+ </el-col>
+ </el-row>
+
+ <!-- 绗簩琛屽浘琛� -->
+ <el-row :gutter="20" class="charts-section">
+ <!-- 缂栧埗杈炬垚鐜� -->
+ <el-col :span="12">
+ <el-card class="chart-card">
+ <template #header>
+ <div class="card-header">
+ <span>缂栧埗杈炬垚鐜�</span>
+ <el-tag type="warning">鍚勯儴闂ㄥ姣�</el-tag>
+ </div>
+ </template>
+ <div class="chart-container">
+ <div ref="staffingChartRef" class="chart"></div>
+ </div>
+ </el-card>
+ </el-col>
+
+ <!-- 鍛樺伐娴佸け鍘熷洜鍒嗘瀽 -->
+ <el-col :span="12">
+ <el-card class="chart-card">
+ <template #header>
+ <div class="card-header">
+ <span>鍛樺伐娴佸け鍘熷洜鍒嗘瀽</span>
+ <el-tag type="danger">骞村害缁熻</el-tag>
+ </div>
+ </template>
+ <div class="chart-container">
+ <div ref="attritionChartRef" class="chart"></div>
+ </div>
+ </el-card>
+ </el-col>
+ </el-row>
+ </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, onUnmounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import {
+ Refresh,
+ User,
+ TrendCharts,
+ DataAnalysis,
+ PieChart,
+ ArrowUp,
+ ArrowDown
+} from '@element-plus/icons-vue'
+import * as echarts from 'echarts'
+
+// 鍝嶅簲寮忔暟鎹�
+const loading = ref(false)
+const autoRefreshEnabled = ref(true)
+const autoRefreshInterval = ref(null)
+
+// 鍥捐〃寮曠敤
+const turnoverChartRef = ref(null)
+const departmentChartRef = ref(null)
+const staffingChartRef = ref(null)
+const attritionChartRef = ref(null)
+
+// 鍥捐〃瀹炰緥
+let turnoverChart = null
+let departmentChart = null
+let staffingChart = null
+let attritionChart = null
+
+// 鑷姩鏇存柊闂撮殧锛�10鍒嗛挓锛�
+const AUTO_REFRESH_INTERVAL = 10 * 60 * 1000
+
+// 鍏抽敭鎸囨爣鏁版嵁
+const keyMetrics = ref([
+ {
+ label: '鍛樺伐娴佸姩鐜�',
+ value: 0,
+ unit: '%',
+ icon: 'TrendCharts',
+ type: 'primary',
+ trend: 0
+ },
+ {
+ label: '鍛樺伐娴佸け鐜�',
+ value: 0,
+ unit: '%',
+ icon: 'User',
+ type: 'danger',
+ trend: 0
+ },
+ {
+ label: '缂栧埗杈炬垚鐜�',
+ value: 0,
+ unit: '%',
+ icon: 'DataAnalysis',
+ type: 'success',
+ trend: 0
+ },
+ {
+ label: '鍦ㄨ亴鍛樺伐鏁�',
+ value: 0,
+ unit: '浜�',
+ icon: 'PieChart',
+ type: 'warning',
+ trend: 0
+ }
+])
+
+// 閮ㄩ棬鏁版嵁
+const departmentData = ref([])
+
+// 鍚姩鑷姩鍒锋柊
+const startAutoRefresh = () => {
+ if (autoRefreshInterval.value) {
+ clearInterval(autoRefreshInterval.value)
+ }
+ if (autoRefreshEnabled.value) {
+ autoRefreshInterval.value = setInterval(() => {
+ refreshData()
+ }, AUTO_REFRESH_INTERVAL)
+ }
+}
+
+// 鍋滄鑷姩鍒锋柊
+const stopAutoRefresh = () => {
+ if (autoRefreshInterval.value) {
+ clearInterval(autoRefreshInterval.value)
+ autoRefreshInterval.value = null
+ }
+}
+
+// 鍒囨崲鑷姩鍒锋柊鐘舵��
+const toggleAutoRefresh = (value) => {
+ if (value) {
+ startAutoRefresh()
+ } else {
+ stopAutoRefresh()
+ }
+}
+
+// 鐢熸垚妯℃嫙鏁版嵁
+const generateMockData = () => {
+ // 鐢熸垚鍏抽敭鎸囨爣鏁版嵁
+ keyMetrics.value[0].value = (Math.random() * 5 + 2).toFixed(1)
+ keyMetrics.value[0].trend = (Math.random() * 3 - 1.5).toFixed(1)
+
+ keyMetrics.value[1].value = (Math.random() * 3 + 1).toFixed(1)
+ keyMetrics.value[1].trend = (Math.random() * 2 - 1).toFixed(1)
+
+ keyMetrics.value[2].value = (Math.random() * 15 + 85).toFixed(1)
+ keyMetrics.value[2].trend = (Math.random() * 3 - 1.5).toFixed(1)
+
+ keyMetrics.value[3].value = Math.floor(Math.random() * 50 + 200)
+ keyMetrics.value[3].trend = (Math.random() * 2 - 1).toFixed(1)
+
+ // 鐢熸垚閮ㄩ棬鏁版嵁
+ const departments = ['鎶�鏈儴', '閿�鍞儴', '浜轰簨閮�', '璐㈠姟閮�', '鐢熶骇閮�', '甯傚満閮�']
+ departmentData.value = departments.map(dept => ({
+ department: dept,
+ currentStaff: Math.floor(Math.random() * 30 + 20),
+ plannedStaff: Math.floor(Math.random() * 10 + 35),
+ staffingRate: Math.floor(Math.random() * 20 + 80),
+ turnoverRate: (Math.random() * 4 + 1).toFixed(1),
+ attritionRate: (Math.random() * 2 + 0.5).toFixed(1),
+ newHires: Math.floor(Math.random() * 5 + 1),
+ resignations: Math.floor(Math.random() * 3 + 1),
+ status: Math.random() > 0.7 ? '寮傚父' : '姝ｅ父'
+ }))
+}
+
+// 鍒锋柊鏁版嵁
+const refreshData = async () => {
+ loading.value = true
+ try {
+ // 妯℃嫙API璋冪敤寤惰繜
+ await new Promise(resolve => setTimeout(resolve, 500))
+
+ generateMockData()
+ renderAllCharts()
+
+ if (!autoRefreshEnabled.value) {
+ ElMessage.success('鏁版嵁鍒锋柊鎴愬姛')
+ }
+ } catch (error) {
+ console.error('鍒锋柊鏁版嵁澶辫触:', error)
+ ElMessage.error('鍒锋柊鏁版嵁澶辫触')
+ } finally {
+ loading.value = false
+ }
+}
+
+// 鍒濆鍖栧浘琛�
+const initCharts = () => {
+ setTimeout(() => {
+ if (turnoverChartRef.value) {
+ turnoverChart = echarts.init(turnoverChartRef.value)
+ }
+ if (departmentChartRef.value) {
+ departmentChart = echarts.init(departmentChartRef.value)
+ }
+ if (staffingChartRef.value) {
+ staffingChart = echarts.init(staffingChartRef.value)
+ }
+ if (attritionChartRef.value) {
+ attritionChart = echarts.init(attritionChartRef.value)
+ }
+
+ renderAllCharts()
+ }, 300)
+}
+
+// 娓叉煋鎵�鏈夊浘琛�
+const renderAllCharts = () => {
+ renderTurnoverChart()
+ renderDepartmentChart()
+ renderStaffingChart()
+ renderAttritionChart()
+}
+
+// 娓叉煋鍛樺伐娴佸姩鐜囪秼鍔垮浘
+const renderTurnoverChart = () => {
+ if (!turnoverChart) return
+
+ const months = ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�']
+ const turnoverData = months.map(() => (Math.random() * 5 + 2).toFixed(1))
+ const attritionData = months.map(() => (Math.random() * 3 + 1).toFixed(1))
+
+ const option = {
+ title: {
+ text: '鍛樺伐娴佸姩鐜囪秼鍔�',
+ left: 'center',
+ textStyle: { fontSize: 16, fontWeight: 'normal' }
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: { type: 'cross' }
+ },
+ legend: {
+ data: ['娴佸姩鐜�', '娴佸け鐜�'],
+ bottom: 10
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '15%',
+ top: '15%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ data: months,
+ boundaryGap: false
+ },
+ yAxis: {
+ type: 'value',
+ axisLabel: { formatter: '{value}%' }
+ },
+ series: [
+ {
+ name: '娴佸姩鐜�',
+ type: 'line',
+ data: turnoverData,
+ smooth: true,
+ lineStyle: { color: '#409EFF' },
+ itemStyle: { color: '#409EFF' }
+ },
+ {
+ name: '娴佸け鐜�',
+ type: 'line',
+ data: attritionData,
+ smooth: true,
+ lineStyle: { color: '#F56C6C' },
+ itemStyle: { color: '#F56C6C' }
+ }
+ ]
+ }
+
+ turnoverChart.setOption(option)
+}
+
+// 娓叉煋閮ㄩ棬浜哄憳鍒嗗竷鍥�
+const renderDepartmentChart = () => {
+ if (!departmentChart) return
+
+ const data = departmentData.value.map(item => ({
+ name: item.department,
+ value: item.currentStaff
+ }))
+
+ const option = {
+ title: {
+ text: '閮ㄩ棬浜哄憳鍒嗗竷',
+ left: 'center',
+ textStyle: { fontSize: 16, fontWeight: 'normal' }
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: '{a} <br/>{b}: {c}浜� ({d}%)'
+ },
+ legend: {
+ orient: 'vertical',
+ left: 'left',
+ top: 'middle'
+ },
+ series: [
+ {
+ name: '浜哄憳鏁伴噺',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ center: ['60%', '50%'],
+ data: data,
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ }
+ }
+ }
+ ]
+ }
+
+ departmentChart.setOption(option)
+}
+
+// 娓叉煋缂栧埗杈炬垚鐜囧浘
+const renderStaffingChart = () => {
+ if (!staffingChart) return
+
+ const departments = departmentData.value.map(item => item.department)
+ const rates = departmentData.value.map(item => item.staffingRate)
+
+ const option = {
+ title: {
+ text: '缂栧埗杈炬垚鐜�',
+ left: 'center',
+ textStyle: { fontSize: 16, fontWeight: 'normal' }
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: { type: 'shadow' }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '15%',
+ top: '15%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ data: departments,
+ axisLabel: { rotate: 45 }
+ },
+ yAxis: {
+ type: 'value',
+ axisLabel: { formatter: '{value}%' },
+ max: 100
+ },
+ series: [
+ {
+ name: '杈炬垚鐜�',
+ type: 'bar',
+ data: rates,
+ itemStyle: {
+ color: function(params) {
+ const value = params.value
+ if (value >= 90) return '#67C23A'
+ if (value >= 80) return '#E6A23C'
+ return '#F56C6C'
+ }
+ }
+ }
+ ]
+ }
+
+ staffingChart.setOption(option)
+}
+
+// 娓叉煋鍛樺伐娴佸け鍘熷洜鍒嗘瀽鍥�
+const renderAttritionChart = () => {
+ if (!attritionChart) return
+
+ const reasons = ['钖祫寰呴亣', '鑱屼笟鍙戝睍', '宸ヤ綔鐜', '涓汉鍘熷洜', '鍏朵粬']
+ const data = reasons.map(() => Math.floor(Math.random() * 20 + 5))
+
+ const option = {
+ title: {
+ text: '鍛樺伐娴佸け鍘熷洜鍒嗘瀽',
+ left: 'center',
+ textStyle: { fontSize: 16, fontWeight: 'normal' }
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: '{a} <br/>{b}: {c}浜� ({d}%)'
+ },
+ legend: {
+ orient: 'vertical',
+ left: 'left',
+ top: 'middle'
+ },
+ series: [
+ {
+ name: '娴佸け浜烘暟',
+ type: 'pie',
+ radius: '50%',
+ center: ['60%', '50%'],
+ data: reasons.map((reason, index) => ({
+ name: reason,
+ value: data[index]
+ })),
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ }
+ }
+ }
+ ]
+ }
+
+ attritionChart.setOption(option)
+}
+
+// 鐢熷懡鍛ㄦ湡
+onMounted(() => {
+ generateMockData()
+ initCharts()
+ startAutoRefresh()
+})
+
+onUnmounted(() => {
+ stopAutoRefresh()
+})
+</script>
+
+<style scoped>
+.analytics-container {
+ padding: 20px;
+ background-color: #f5f7fa;
+ min-height: 100vh;
+}
+
+.page-header {
+ text-align: center;
+ margin-bottom: 30px;
+ padding: 20px;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ border-radius: 12px;
+ color: white;
+}
+
+.page-header h2 {
+ color: white;
+ margin-bottom: 10px;
+ font-size: 28px;
+ font-weight: 600;
+}
+
+.page-header p {
+ color: rgba(255, 255, 255, 0.9);
+ font-size: 14px;
+ margin: 0 0 15px 0;
+}
+
+.header-controls {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 20px;
+}
+
+.refresh-btn {
+ margin-left: 20px;
+}
+
+.metrics-cards {
+ margin-bottom: 30px;
+}
+
+.metric-card {
+ border-radius: 12px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ transition: all 0.3s ease;
+ border: none;
+ overflow: hidden;
+}
+
+.metric-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+.metric-card.primary {
+ border-left: 4px solid #409EFF;
+ background: linear-gradient(135deg, #409EFF 0%, #36a3f7 100%);
+}
+
+.metric-card.danger {
+ border-left: 4px solid #F56C6C;
+ background: linear-gradient(135deg, #F56C6C 0%, #f78989 100%);
+}
+
+.metric-card.success {
+ border-left: 4px solid #67C23A;
+ background: linear-gradient(135deg, #67C23A 0%, #85ce61 100%);
+}
+
+.metric-card.warning {
+ border-left: 4px solid #E6A23C;
+ background: linear-gradient(135deg, #E6A23C 0%, #ebb563 100%);
+}
+
+.card-content {
+ display: flex;
+ align-items: center;
+ padding: 20px;
+}
+
+.card-icon {
+ margin-right: 20px;
+ color: white;
+}
+
+.card-info {
+ flex: 1;
+}
+
+.card-number {
+ font-size: 32px;
+ font-weight: 600;
+ color: white;
+ margin-bottom: 5px;
+}
+
+.card-label {
+ font-size: 14px;
+ color: rgba(255, 255, 255, 0.9);
+ margin-bottom: 5px;
+}
+
+.card-trend {
+ font-size: 12px;
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.card-trend.positive {
+ color: #67C23A;
+}
+
+.card-trend.negative {
+ color: #F56C6C;
+}
+
+.charts-section {
+ margin-bottom: 30px;
+}
+
+.chart-card {
+ border-radius: 12px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ border: none;
+}
+
+.card-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-weight: 600;
+ color: #303133;
+ padding: 15px 20px;
+ border-bottom: 1px solid #ebeef5;
+}
+
+.chart-container {
+ height: 350px;
+ padding: 20px;
+}
+
+.chart {
+ width: 100%;
+ height: 100%;
+}
+
+/* 鍝嶅簲寮忚璁� */
+@media (max-width: 768px) {
+ .analytics-container {
+ padding: 10px;
+ }
+
+ .page-header {
+ padding: 15px;
+ }
+
+ .page-header h2 {
+ font-size: 24px;
+ }
+
+ .header-controls {
+ flex-direction: column;
+ gap: 15px;
+ }
+
+ .refresh-btn {
+ margin-left: 0;
+ }
+
+ .metrics-cards .el-col {
+ margin-bottom: 15px;
+ }
+
+ .charts-section .el-col {
+ margin-bottom: 20px;
+ }
+
+ .chart-container {
+ height: 300px;
+ }
+}
+
+@media (max-width: 480px) {
+ .page-header h2 {
+ font-size: 20px;
+ }
+
+ .card-number {
+ font-size: 24px;
+ }
+
+ .chart-container {
+ height: 250px;
+ }
+}
+</style>
diff --git a/src/views/personnelManagement/contractManagement/components/formDia.vue b/src/views/personnelManagement/contractManagement/components/formDia.vue
new file mode 100644
index 0000000..fdea8ab
--- /dev/null
+++ b/src/views/personnelManagement/contractManagement/components/formDia.vue
@@ -0,0 +1,87 @@
+<template>
+ <div>
+ <el-dialog
+ v-model="dialogFormVisible"
+ title="璇︽儏"
+ width="70%"
+ @close="closeDia"
+ >
+ <PIMTable
+ rowKey="id"
+ :column="tableColumn"
+ :tableData="tableData"
+ :tableLoading="tableLoading"
+ height="600"
+ ></PIMTable>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button @click="closeDia">鍙栨秷</el-button>
+ </div>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+
+<script setup>
+import {ref} from "vue";
+import {staffOnJobInfo} from "@/api/personnelManagement/employeeRecord.js";
+import PIMTable from "@/components/PIMTable/PIMTable.vue";
+const { proxy } = getCurrentInstance()
+const emit = defineEmits(['close'])
+
+const dialogFormVisible = ref(false);
+const operationType = ref('')
+const tableColumn = ref([
+ {
+ label: "鍚堝悓骞撮檺",
+ prop: "contractTerm",
+ },
+ {
+ label: "鍚堝悓寮�濮嬫棩鏈�",
+ prop: "contractStartTime",
+ },
+ {
+ label: "鍚堝悓缁撴潫鏃ユ湡",
+ prop: "contractEndTime",
+ },
+]);
+const tableData = ref([]);
+const tableLoading = ref(false);
+
+// 鎵撳紑寮规
+const openDialog = (type, row) => {
+ operationType.value = type;
+ dialogFormVisible.value = true;
+ if (operationType.value === 'edit') {
+ staffOnJobInfo({staffNo: row.staffNo}).then(res => {
+ tableData.value = res.data
+ })
+ }
+
+ // if (operationType.value === 'edit') {
+ // tableLoading.value = true; // 娣诲姞鍔犺浇鐘舵��
+ // staffOnJobInfo({staffNo: row.staffNo}).then(res => {
+ // tableLoading.value = false;
+ // // 灏嗗璞℃暟鎹浆鎹负鏁扮粍鏍煎紡
+ // tableData.value = [res.data];
+ // }).catch(err => {
+ // tableLoading.value = false;
+ // console.error('鑾峰彇璇︽儏澶辫触:', err);
+ // proxy.$modal.msgError('鑾峰彇璇︽儏鏁版嵁澶辫触');
+ // })
+ // }
+}
+
+// 鍏抽棴寮规
+const closeDia = () => {
+ dialogFormVisible.value = false;
+ emit('close')
+};
+defineExpose({
+ openDialog,
+});
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/personnelManagement/contractManagement/filesDia.vue b/src/views/personnelManagement/contractManagement/filesDia.vue
new file mode 100644
index 0000000..b797d2f
--- /dev/null
+++ b/src/views/personnelManagement/contractManagement/filesDia.vue
@@ -0,0 +1,203 @@
+<template>
+ <div>
+ <el-dialog
+ v-model="dialogFormVisible"
+ title="涓婁紶闄勪欢"
+ width="50%"
+ @close="closeDia"
+ >
+ <div style="margin-bottom: 10px;text-align: right">
+ <el-upload
+ v-model:file-list="fileList"
+ class="upload-demo"
+ :action="uploadUrl"
+ :on-success="handleUploadSuccess"
+ :on-error="handleUploadError"
+ name="file"
+ :show-file-list="false"
+ :headers="headers"
+ style="display: inline;margin-right: 10px"
+ >
+ <el-button type="primary">涓婁紶闄勪欢</el-button>
+ </el-upload>
+ <el-button type="danger" plain @click="handleDelete">鍒犻櫎</el-button>
+ </div>
+ <PIMTable
+ rowKey="id"
+ :column="tableColumn"
+ :tableData="tableData"
+ :tableLoading="tableLoading"
+ :isSelection="true"
+ @selection-change="handleSelectionChange"
+ height="500"
+ >
+ </PIMTable>
+ <pagination
+ style="margin: 10px 0"
+ v-show="total > 0"
+ @pagination="paginationSearch"
+ :total="total"
+ :page="page.current"
+ :limit="page.size"
+ />
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button @click="closeDia">鍙栨秷</el-button>
+ </div>
+ </template>
+ </el-dialog>
+ <filePreview ref="filePreviewRef" />
+ </div>
+</template>
+
+<script setup>
+import {ref} from "vue";
+import {ElMessageBox} from "element-plus";
+import {getToken} from "@/utils/auth.js";
+import filePreview from '@/components/filePreview/index.vue';
+import PIMTable from "@/components/PIMTable/PIMTable.vue";
+import {
+ fileAdd,
+ fileDel,
+ fileListPage
+} from "@/api/financialManagement/revenueManagement.js";
+import Pagination from "@/components/PIMTable/Pagination.vue";
+const { proxy } = getCurrentInstance()
+const emit = defineEmits(['close'])
+
+const dialogFormVisible = ref(false);
+const currentId = ref('')
+const selectedRows = ref([]);
+const filePreviewRef = ref()
+const tableColumn = ref([
+ {
+ label: "鏂囦欢鍚嶇О",
+ prop: "name",
+ },
+ {
+ dataType: "action",
+ label: "鎿嶄綔",
+ align: "center",
+ operation: [
+ {
+ name: "涓嬭浇",
+ type: "text",
+ clickFun: (row) => {
+ downLoadFile(row);
+ },
+ },
+ {
+ name: "棰勮",
+ type: "text",
+ clickFun: (row) => {
+ lookFile(row);
+ },
+ }
+ ],
+ },
+]);
+const page = reactive({
+ current: 1,
+ size: 100,
+});
+const total = ref(0);
+const tableData = ref([]);
+const fileList = ref([]);
+const tableLoading = ref(false);
+const accountType = ref('')
+const headers = ref({
+ Authorization: "Bearer " + getToken(),
+});
+const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + "/file/upload"); // 涓婁紶鐨勫浘鐗囨湇鍔″櫒鍦板潃
+
+// 鎵撳紑寮规
+const openDialog = (row,type) => {
+ accountType.value = type;
+ dialogFormVisible.value = true;
+ currentId.value = row.id;
+ getList()
+}
+const paginationSearch = (obj) => {
+ page.current = obj.page;
+ page.size = obj.limit;
+ getList();
+};
+const getList = () => {
+ fileListPage({accountId: currentId.value,accountType:accountType.value, ...page}).then(res => {
+ tableData.value = res.data.records;
+ total.value = res.data.total;
+ })
+}
+// 琛ㄦ牸閫夋嫨鏁版嵁
+const handleSelectionChange = (selection) => {
+ selectedRows.value = selection;
+};
+
+// 鍏抽棴寮规
+const closeDia = () => {
+ dialogFormVisible.value = false;
+ emit('close')
+};
+// 涓婁紶鎴愬姛澶勭悊
+function handleUploadSuccess(res, file) {
+ // 濡傛灉涓婁紶鎴愬姛
+ if (res.code == 200) {
+ const fileRow = {}
+ fileRow.name = res.data.originalName
+ fileRow.url = res.data.tempPath
+ uploadFile(fileRow)
+ } else {
+ proxy.$modal.msgError("鏂囦欢涓婁紶澶辫触");
+ }
+}
+function uploadFile(file) {
+ file.accountId = currentId.value;
+ file.accountType = accountType.value;
+ fileAdd(file).then(res => {
+ proxy.$modal.msgSuccess("鏂囦欢涓婁紶鎴愬姛");
+ getList()
+ })
+}
+// 涓婁紶澶辫触澶勭悊
+function handleUploadError() {
+ proxy.$modal.msgError("鏂囦欢涓婁紶澶辫触");
+}
+// 涓嬭浇闄勪欢
+const downLoadFile = (row) => {
+ proxy.$download.name(row.url);
+}
+// 鍒犻櫎
+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(() => {
+ fileDel(ids).then((res) => {
+ proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+ getList();
+ });
+ }).catch(() => {
+ proxy.$modal.msg("宸插彇娑�");
+ });
+};
+// 棰勮闄勪欢
+const lookFile = (row) => {
+ filePreviewRef.value.open(row.url)
+}
+
+defineExpose({
+ openDialog,
+});
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/personnelManagement/contractManagement/index.vue b/src/views/personnelManagement/contractManagement/index.vue
new file mode 100644
index 0000000..ece00db
--- /dev/null
+++ b/src/views/personnelManagement/contractManagement/index.vue
@@ -0,0 +1,330 @@
+<template>
+ <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 style="margin-left: 10px" class="search_title">鍚堝悓缁撴潫鏃ユ湡锛�</span>
+ <el-date-picker v-model="searchForm.entryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD" type="daterange"
+ placeholder="璇烽�夋嫨" clearable @change="changeDaterange" />
+ <el-button type="primary" @click="handleQuery" style="margin-left: 10px">鎼滅储</el-button>
+ </div>
+ <div style="margin: 10PX 0;">
+ <!-- <el-button type="primary" @click="openForm('add')">鏂板鍏ヨ亴</el-button>-->
+<!-- <el-button type="info" @click="handleImport">瀵煎叆</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>
+
+ <!-- 鍚堝悓瀵煎叆瀵硅瘽妗� -->
+ <el-dialog
+ :title="upload.title"
+ v-model="upload.open"
+ width="400px"
+ append-to-body
+ >
+ <el-upload
+ ref="uploadRef"
+ :limit="1"
+ accept=".xlsx, .xls"
+ :headers="upload.headers"
+ :action="upload.url + '?updateSupport=' + upload.updateSupport"
+ :disabled="upload.isUploading"
+ :on-progress="handleFileUploadProgress"
+ :on-success="handleFileSuccess"
+ :auto-upload="false"
+ drag
+ >
+ <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+ <div class="el-upload__text">灏嗘枃浠舵嫋鍒版澶勶紝鎴�<em>鐐瑰嚮涓婁紶</em></div>
+ <template #tip>
+ <div class="el-upload__tip text-center">
+ <span>浠呭厑璁稿鍏ls銆亁lsx鏍煎紡鏂囦欢銆�</span>
+ <!-- <el-link
+ type="primary"
+ :underline="false"
+ style="font-size: 12px; vertical-align: baseline"
+ @click="importTemplate"
+ >涓嬭浇妯℃澘</el-link
+ > -->
+ </div>
+ </template>
+ </el-upload>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button type="primary" @click="submitFileForm">纭� 瀹�</el-button>
+ <el-button @click="upload.open = false">鍙� 娑�</el-button>
+ </div>
+ </template>
+ </el-dialog>
+ <files-dia ref="filesDia"></files-dia>
+ </div>
+</template>
+
+<script setup>
+import { Search } from "@element-plus/icons-vue";
+import { onMounted, ref } from "vue";
+import FormDia from "@/views/personnelManagement/contractManagement/components/formDia.vue";
+import { ElMessageBox } from "element-plus";
+import { staffOnJobListPage } from "@/api/personnelManagement/employeeRecord.js";
+import dayjs from "dayjs";
+import PIMTable from "@/components/PIMTable/PIMTable.vue";
+import { getToken } from "@/utils/auth.js";
+import FilesDia from "./filesDia.vue";
+const data = reactive({
+ searchForm: {
+ staffName: "",
+ entryDate: [
+ dayjs().format("YYYY-MM-DD"),
+ dayjs().add(1, "day").format("YYYY-MM-DD"),
+ ], // 褰曞叆鏃ユ湡
+ entryDateStart: dayjs().format("YYYY-MM-DD"),
+ entryDateEnd: dayjs().add(1, "day").format("YYYY-MM-DD"),
+ },
+});
+const { searchForm } = toRefs(data);
+const tableColumn = ref([
+ {
+ label: "鐘舵��",
+ prop: "staffState",
+ dataType: "tag",
+ formatData: (params) => {
+ if (params == 0) {
+ return "绂昏亴";
+ } else if (params == 1) {
+ return "鍦ㄨ亴";
+ } else {
+ return null;
+ }
+ },
+ formatType: (params) => {
+ if (params == 0) {
+ return "danger";
+ } else if (params == 1) {
+ return "primary";
+ } else {
+ return null;
+ }
+ },
+ },
+ {
+ label: "鍛樺伐缂栧彿",
+ prop: "staffNo",
+ },
+ {
+ label: "濮撳悕",
+ prop: "staffName",
+ },
+ {
+ label: "鎬у埆",
+ prop: "sex",
+ },
+ {
+ label: "绫嶈疮",
+ prop: "nativePlace",
+ },
+ {
+ label: "宀椾綅",
+ prop: "postJob",
+ },
+ {
+ label: "瀹跺涵浣忓潃",
+ prop: "adress",
+ width: 200
+ },
+ {
+ label: "绗竴瀛﹀巻",
+ prop: "firstStudy",
+ },
+ {
+ label: "涓撲笟",
+ prop: "profession",
+ width: 100
+ },
+ {
+ label: "韬唤璇佸彿",
+ prop: "identityCard",
+ width: 200
+ },
+ {
+ label: "骞撮緞",
+ prop: "age",
+ },
+ {
+ label: "鑱旂郴鐢佃瘽",
+ prop: "phone",
+ width: 150
+ },
+ {
+ label: "绱ф�ヨ仈绯讳汉",
+ prop: "emergencyContact",
+ width: 120
+ },
+ {
+ label: "绱ф�ヨ仈绯讳汉鐢佃瘽",
+ prop: "emergencyContactPhone",
+ width: 150
+ },
+ {
+ label: "鍚堝悓骞撮檺",
+ prop: "contractTerm",
+ },
+ // {
+ // label: "鍚堝悓寮�濮嬫棩鏈�",
+ // prop: "contractStartTime",
+ // width: 120
+ // },
+ {
+ label: "鍚堝悓缁撴潫鏃ユ湡",
+ prop: "contractExpireTime",
+ width: 120
+ },
+ {
+ dataType: "action",
+ label: "鎿嶄綔",
+ align: "center",
+ fixed: 'right',
+ width: 120,
+ operation: [
+ {
+ name: "璇︽儏",
+ type: "text",
+ clickFun: (row) => {
+ openForm("edit", row);
+ },
+ },
+ {
+ name: "闄勪欢",
+ type: "text",
+ clickFun: (row) => {
+ openFilesFormDia(row);
+ },
+ },
+ ],
+ },
+]);
+const filesDia = ref()
+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 changeDaterange = (value) => {
+ searchForm.value.entryDateStart = undefined;
+ searchForm.value.entryDateEnd = undefined;
+ if (value) {
+ searchForm.value.entryDateStart = dayjs(value[0]).format("YYYY-MM-DD");
+ searchForm.value.entryDateEnd = dayjs(value[1]).format("YYYY-MM-DD");
+ }
+ getList();
+};
+// 鎵撳紑闄勪欢寮规
+const openFilesFormDia = (row) => {
+ console.log(row)
+ nextTick(() => {
+ filesDia.value?.openDialog( row,'鍚堝悓')
+ })
+};
+// 鏌ヨ鍒楄〃
+/** 鎼滅储鎸夐挳鎿嶄綔 */
+const handleQuery = () => {
+ page.current = 1;
+ getList();
+};
+const pagination = (obj) => {
+ page.current = obj.page;
+ page.size = obj.limit;
+ getList();
+};
+const getList = () => {
+ tableLoading.value = true;
+ const params = { ...searchForm.value, ...page };
+ params.entryDate = undefined
+ staffOnJobListPage(params).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 handleOut = () => {
+ ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�", "瀵煎嚭", {
+ confirmButtonText: "纭",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(() => {
+ proxy.download("/staff/staffOnJob/export", {}, "鍚堝悓绠＄悊.xlsx");
+ })
+ .catch(() => {
+ proxy.$modal.msg("宸插彇娑�");
+ });
+};
+const upload = reactive({
+ // 鏄惁鏄剧ず寮瑰嚭灞傦紙鍚堝悓瀵煎叆锛�
+ open: false,
+ // 寮瑰嚭灞傛爣棰橈紙鍚堝悓瀵煎叆锛�
+ title: "",
+ // 鏄惁绂佺敤涓婁紶
+ isUploading: false,
+ // 鏄惁鏇存柊宸茬粡瀛樺湪鐨勭敤鎴锋暟鎹�
+ updateSupport: 1,
+ // 璁剧疆涓婁紶鐨勮姹傚ご閮�
+ headers: { Authorization: "Bearer " + getToken() },
+ // 涓婁紶鐨勫湴鍧�
+ url: import.meta.env.VITE_APP_BASE_API + "/staff/staffOnJob/import",
+});
+/** 瀵煎叆鎸夐挳鎿嶄綔 */
+function handleImport() {
+ upload.title = "鍚堝悓瀵煎叆";
+ upload.open = true;
+}
+/** 鎻愪氦涓婁紶鏂囦欢 */
+function submitFileForm() {
+ console.log(upload.url + '?updateSupport=' + upload.updateSupport)
+ proxy.$refs["uploadRef"].submit();
+}
+/**鏂囦欢涓婁紶涓鐞� */
+const handleFileUploadProgress = (event, file, fileList) => {
+ upload.isUploading = true;
+};
+/** 鏂囦欢涓婁紶鎴愬姛澶勭悊 */
+const handleFileSuccess = (response, file, fileList) => {
+ upload.open = false;
+ upload.isUploading = false;
+ proxy.$refs["uploadRef"].handleRemove(file);
+ getList();
+};
+onMounted(() => {
+ getList();
+});
+</script>
+
+<style scoped></style>
diff --git a/src/views/personnelManagement/dimission/components/formDia.vue b/src/views/personnelManagement/dimission/components/formDia.vue
new file mode 100644
index 0000000..f63b011
--- /dev/null
+++ b/src/views/personnelManagement/dimission/components/formDia.vue
@@ -0,0 +1,290 @@
+<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="staffName">
+ <!-- <el-input v-model="form.staffName" placeholder="璇疯緭鍏�" clearable/> -->
+ <el-select v-model="form.staffName" placeholder="璇烽�夋嫨浜哄憳" style="width: 100%" @change="handleSelect">
+ <el-option
+ v-for="item in personList"
+ :key="item.id"
+ :label="item.staffName"
+ :value="item.staffName"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鍛樺伐缂栧彿锛�" prop="staffNo">
+ <el-input v-model="form.staffNo" placeholder="璇疯緭鍏�" clearable disabled/>
+ </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" disabled>
+ <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 disabled/>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row :gutter="30">
+ <el-col :span="12">
+ <el-form-item label="宀椾綅锛�" prop="postJob">
+ <el-input v-model="form.postJob" placeholder="璇疯緭鍏�" clearable disabled/>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="瀹跺涵浣忓潃锛�" prop="adress">
+ <el-input v-model="form.adress" placeholder="璇疯緭鍏�" clearable disabled/>
+ </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 disabled/>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="涓撲笟锛�" prop="profession">
+ <el-input v-model="form.profession" placeholder="璇疯緭鍏�" clearable disabled/>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row :gutter="30">
+ <el-col :span="12">
+ <el-form-item label="韬唤璇佸彿锛�" prop="identityCard">
+ <el-input v-model="form.identityCard" placeholder="璇疯緭鍏�" clearable disabled/>
+ </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%" disabled/>
+ </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 disabled/>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="绱ф�ヨ仈绯讳汉锛�" prop="emergencyContact">
+ <el-input v-model="form.emergencyContact" placeholder="璇疯緭鍏�" clearable disabled/>
+ </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 disabled/>
+ </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/>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row :gutter="30">
+ <el-col :span="12">
+ <el-form-item label="鍚堝悓寮�濮嬫棩鏈燂細" prop="contractStartTime">
+ <el-date-picker
+ disabled
+ v-model="form.contractStartTime"
+ type="date"
+ placeholder="璇烽�夋嫨鏃ユ湡"
+ value-format="YYYY-MM-DD"
+ format="YYYY-MM-DD"
+ clearable
+ style="width: 100%"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鍚堝悓缁撴潫鏃ユ湡锛�" prop="contractEndTime">
+ <el-date-picker
+ disabled
+ v-model="form.contractEndTime"
+ type="date"
+ placeholder="璇烽�夋嫨鏃ユ湡"
+ value-format="YYYY-MM-DD"
+ format="YYYY-MM-DD"
+ clearable
+ style="width: 100%"
+ />
+ </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, staffJoinAdd, staffJoinUpdate,getStaffOnJob} from "@/api/personnelManagement/onboarding.js";
+const { proxy } = getCurrentInstance()
+const emit = defineEmits(['close'])
+
+const dialogFormVisible = ref(false);
+const operationType = ref('')
+const data = reactive({
+ form: {
+ staffNo: "",
+ staffName: "",
+ sex: "",
+ nativePlace: "",
+ postJob: "",
+ adress: "",
+ firstStudy: "",
+ profession: "",
+ identityCard: "",
+ age: 0,
+ phone: "",
+ emergencyContact: "",
+ emergencyContactPhone: "",
+ contractTerm: 0,
+ contractStartTime: "",
+ contractEndTime: "",
+ staffState: "",
+ },
+ 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" }],
+ identityCard: [{ 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" }],
+ },
+});
+const { form, rules } = toRefs(data);
+
+// 鎵撳紑寮规
+const openDialog = (type, row) => {
+ getList()
+ operationType.value = type;
+ dialogFormVisible.value = true;
+ if (operationType.value === 'edit') {
+ getStaffJoinInfo(row.id).then(res => {
+ form.value = {...res.data}
+ })
+ }
+}
+// 鎻愪氦浜у搧琛ㄥ崟
+const submitForm = () => {
+ proxy.$refs.formRef.validate(valid => {
+ if (valid) {
+ form.value.staffState = 0
+ if (operationType.value === "add") {
+ staffJoinAdd(form.value).then(res => {
+ proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
+ closeDia();
+ })
+ } else {
+ staffJoinUpdate(form.value).then(res => {
+ proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
+ closeDia();
+ })
+ }
+ }
+ })
+}
+// 鍏抽棴寮规
+const closeDia = () => {
+ proxy.resetForm("formRef");
+ dialogFormVisible.value = false;
+ emit('close')
+};
+
+const personList = ref([]);
+
+/**
+ * 鑾峰彇褰撳墠鍦ㄨ亴浜哄憳鍒楄〃
+ */
+const getList = () => {
+ getStaffOnJob().then(res => {
+ personList.value = res.data
+ })
+};
+
+const handleSelect = (val) => {
+ let obj = personList.value.find(item => item.staffName === val)
+ let {
+ sex,
+ phone,
+ staffNo,
+ nativePlace,
+ postJob,
+ adress,
+ firstStudy,
+ profession,
+ identityCard,
+ age,
+ emergencyContact,
+ emergencyContactPhone,
+ contractTerm,
+ contractStartTime,
+ contractEndTime,
+ staffName
+ } = obj
+ form.value = {
+ sex,
+ phone,
+ staffNo,
+ nativePlace,
+ postJob,
+ adress,
+ firstStudy,
+ profession,
+ identityCard,
+ age,
+ emergencyContact,
+ emergencyContactPhone,
+ contractTerm,
+ contractStartTime,
+ contractEndTime,
+ staffName
+ }
+
+}
+defineExpose({
+ openDialog,
+});
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/personnelManagement/dimission/index.vue b/src/views/personnelManagement/dimission/index.vue
new file mode 100644
index 0000000..1032309
--- /dev/null
+++ b/src/views/personnelManagement/dimission/index.vue
@@ -0,0 +1,285 @@
+<template>
+ <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 style="margin-left: 10px;" class="search_title">鍚堝悓寮�濮嬫棩鏈燂細</span>
+ <el-date-picker
+ v-model="searchForm.entryDateStart"
+ type="date"
+ placeholder="璇烽�夋嫨鍚堝悓寮�濮嬫棩鏈�"
+ size="default"
+ @change="(date) => handleDateChange(date,1)"
+ />
+ <span style="margin-left: 10px;" class="search_title">鍚堝悓缁撴潫鏃ユ湡锛�</span>
+ <el-date-picker
+ v-model="searchForm.entryDateEnd"
+ type="date"
+ placeholder="璇烽�夋嫨鍚堝悓缁撴潫鏃ユ湡"
+ size="default"
+ @change="(date) => handleDateChange(date,2)"
+ />
+ <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
+ >鎼滅储</el-button
+ >
+ </div>
+ <div style="margin: 10PX 0;">
+ <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/dimission/components/formDia.vue";
+import {staffJoinDel, staffJoinListPage} from "@/api/personnelManagement/onboarding.js";
+import {ElMessageBox} from "element-plus";
+import PIMTable from "@/components/PIMTable/PIMTable.vue";
+import dayjs from "dayjs";
+
+const data = reactive({
+ searchForm: {
+ staffName: "",
+ },
+});
+const { searchForm } = toRefs(data);
+const tableColumn = ref([
+ {
+ label: "鐘舵��",
+ prop: "staffState",
+ dataType: "tag",
+ formatData: (params) => {
+ if (params == 0) {
+ return "绂昏亴";
+ } else if (params == 1) {
+ return "鍦ㄨ亴";
+ } else {
+ return null;
+ }
+ },
+ formatType: (params) => {
+ if (params == 0) {
+ return "danger";
+ } else if (params == 1) {
+ return "primary";
+ } else {
+ return null;
+ }
+ },
+ },
+ {
+ label: "鍛樺伐缂栧彿",
+ prop: "staffNo",
+ },
+ {
+ label: "濮撳悕",
+ prop: "staffName",
+ },
+ {
+ label: "鎬у埆",
+ prop: "sex",
+ },
+ {
+ label: "绫嶈疮",
+ prop: "nativePlace",
+ },
+ {
+ label: "宀椾綅",
+ prop: "postJob",
+ },
+ {
+ label: "瀹跺涵浣忓潃",
+ prop: "adress",
+ width:200
+ },
+ {
+ label: "绗竴瀛﹀巻",
+ prop: "firstStudy",
+ },
+ {
+ label: "涓撲笟",
+ prop: "profession",
+ width:100
+ },
+ {
+ label: "韬唤璇佸彿",
+ prop: "identityCard",
+ width:200
+ },
+ {
+ label: "骞撮緞",
+ prop: "age",
+ },
+ {
+ label: "鑱旂郴鐢佃瘽",
+ prop: "phone",
+ width:150
+ },
+ {
+ label: "绱ф�ヨ仈绯讳汉",
+ prop: "emergencyContact",
+ width: 120
+ },
+ {
+ label: "绱ф�ヨ仈绯讳汉鐢佃瘽",
+ prop: "emergencyContactPhone",
+ width:150
+ },
+ {
+ label: "鍚堝悓骞撮檺",
+ prop: "contractTerm",
+ },
+ {
+ label: "鍚堝悓寮�濮嬫棩鏈�",
+ prop: "contractStartTime",
+ width: 120
+ },
+ {
+ label: "鍚堝悓缁撴潫鏃ユ湡",
+ prop: "contractEndTime",
+ width: 120
+ },
+ {
+ dataType: "action",
+ label: "鎿嶄綔",
+ align: "center",
+ 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;
+ staffJoinListPage({...page, ...searchForm.value, staffState: 0}).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(() => {
+ staffJoinDel(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: 0}, "浜哄憳绂昏亴.xlsx");
+ })
+ .catch(() => {
+ proxy.$modal.msg("宸插彇娑�");
+ });
+};
+onMounted(() => {
+ getList();
+});
+</script>
+
+<style scoped></style>
diff --git a/src/views/personnelManagement/employeeRecord/components/formDia.vue b/src/views/personnelManagement/employeeRecord/components/formDia.vue
new file mode 100644
index 0000000..17de44c
--- /dev/null
+++ b/src/views/personnelManagement/employeeRecord/components/formDia.vue
@@ -0,0 +1,75 @@
+<template>
+ <div>
+ <el-dialog
+ v-model="dialogFormVisible"
+ title="璇︽儏"
+ width="70%"
+ @close="closeDia"
+ >
+ <PIMTable
+ rowKey="id"
+ :column="tableColumn"
+ :tableData="tableData"
+ :tableLoading="tableLoading"
+ height="600"
+ ></PIMTable>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button @click="closeDia">鍙栨秷</el-button>
+ </div>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+
+<script setup>
+import {ref} from "vue";
+import {staffOnJobInfo} from "@/api/personnelManagement/employeeRecord.js";
+import PIMTable from "@/components/PIMTable/PIMTable.vue";
+
+const { proxy } = getCurrentInstance()
+const emit = defineEmits(['close'])
+
+const dialogFormVisible = ref(false);
+const operationType = ref('')
+const tableColumn = ref([
+ {
+ label: "鍚堝悓骞撮檺",
+ prop: "contractTerm",
+ },
+ {
+ label: "鍚堝悓寮�濮嬫棩鏈�",
+ prop: "contractStartTime",
+ },
+ {
+ label: "鍚堝悓缁撴潫鏃ユ湡",
+ prop: "contractEndTime",
+ },
+]);
+const tableData = ref([]);
+const tableLoading = ref(false);
+
+// 鎵撳紑寮规
+const openDialog = (type, row) => {
+ operationType.value = type;
+ dialogFormVisible.value = true;
+ if (operationType.value === 'edit') {
+ staffOnJobInfo({staffNo: row.staffNo}).then(res => {
+ tableData.value = res.data
+ })
+ }
+}
+
+// 鍏抽棴寮规
+const closeDia = () => {
+ dialogFormVisible.value = false;
+ emit('close')
+};
+defineExpose({
+ openDialog,
+});
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/personnelManagement/employeeRecord/index.vue b/src/views/personnelManagement/employeeRecord/index.vue
new file mode 100644
index 0000000..bdc3174
--- /dev/null
+++ b/src/views/personnelManagement/employeeRecord/index.vue
@@ -0,0 +1,250 @@
+<template>
+ <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 style="margin-left: 10px" class="search_title">鍚堝悓缁撴潫鏃ユ湡锛�</span>
+ <el-date-picker v-model="searchForm.entryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD" type="daterange"
+ placeholder="璇烽�夋嫨" clearable @change="changeDaterange" />
+ <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
+ >鎼滅储</el-button
+ >
+ </div>
+ <div style="margin: 10PX 0;">
+<!-- <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/employeeRecord/components/formDia.vue";
+import {ElMessageBox} from "element-plus";
+import {staffOnJobListPage} from "@/api/personnelManagement/employeeRecord.js";
+import PIMTable from "@/components/PIMTable/PIMTable.vue";
+import dayjs from "dayjs";
+
+const data = reactive({
+ searchForm: {
+ staffName: "",
+ entryDate: [
+ dayjs().format("YYYY-MM-DD"),
+ dayjs().add(1, "day").format("YYYY-MM-DD"),
+ ], // 褰曞叆鏃ユ湡
+ entryDateStart: dayjs().format("YYYY-MM-DD"),
+ entryDateEnd: dayjs().add(1, "day").format("YYYY-MM-DD"),
+ },
+});
+const { searchForm } = toRefs(data);
+const tableColumn = ref([
+ {
+ label: "鐘舵��",
+ prop: "staffState",
+ dataType: "tag",
+ formatData: (params) => {
+ if (params == 0) {
+ return "绂昏亴";
+ } else if (params == 1) {
+ return "鍦ㄨ亴";
+ } else {
+ return null;
+ }
+ },
+ formatType: (params) => {
+ if (params == 0) {
+ return "danger";
+ } else if (params == 1) {
+ return "primary";
+ } else {
+ return null;
+ }
+ },
+ },
+ {
+ label: "鍛樺伐缂栧彿",
+ prop: "staffNo",
+ },
+ {
+ label: "濮撳悕",
+ prop: "staffName",
+ },
+ {
+ label: "鎬у埆",
+ prop: "sex",
+ },
+ {
+ label: "绫嶈疮",
+ prop: "nativePlace",
+ },
+ {
+ label: "宀椾綅",
+ prop: "postJob",
+ },
+ {
+ label: "瀹跺涵浣忓潃",
+ prop: "adress",
+ width:200
+ },
+ {
+ label: "绗竴瀛﹀巻",
+ prop: "firstStudy",
+ },
+ {
+ label: "涓撲笟",
+ prop: "profession",
+ width:100
+ },
+ {
+ label: "韬唤璇佸彿",
+ prop: "identityCard",
+ width:200
+ },
+ {
+ label: "骞撮緞",
+ prop: "age",
+ },
+ {
+ label: "鑱旂郴鐢佃瘽",
+ prop: "phone",
+ width:150
+ },
+ {
+ label: "绱ф�ヨ仈绯讳汉",
+ prop: "emergencyContact",
+ width: 120
+ },
+ {
+ label: "绱ф�ヨ仈绯讳汉鐢佃瘽",
+ prop: "emergencyContactPhone",
+ width:150
+ },
+ {
+ label: "鍚堝悓骞撮檺",
+ prop: "contractTerm",
+ },
+ // {
+ // label: "鍚堝悓寮�濮嬫棩鏈�",
+ // prop: "contractStartTime",
+ // width: 120
+ // },
+ {
+ label: "鍚堝悓缁撴潫鏃ユ湡",
+ prop: "contractExpireTime",
+ 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 changeDaterange = (value) => {
+ searchForm.value.entryDateStart = undefined;
+ searchForm.value.entryDateEnd = undefined;
+ if (value) {
+ searchForm.value.entryDateStart = dayjs(value[0]).format("YYYY-MM-DD");
+ searchForm.value.entryDateEnd = dayjs(value[1]).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;
+ const params = { ...searchForm.value, ...page };
+ params.entryDate = undefined
+ staffOnJobListPage({...params, 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 handleOut = () => {
+ ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�", "瀵煎嚭", {
+ confirmButtonText: "纭",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(() => {
+ proxy.download("/staff/staffOnJob/export", {staffState: 1}, "鍦ㄨ亴鍛樺伐鍙拌处.xlsx");
+ })
+ .catch(() => {
+ proxy.$modal.msg("宸插彇娑�");
+ });
+};
+onMounted(() => {
+ getList();
+});
+</script>
+
+<style scoped></style>
diff --git a/src/views/personnelManagement/onboarding/components/formDia.vue b/src/views/personnelManagement/onboarding/components/formDia.vue
new file mode 100644
index 0000000..d0e76cc
--- /dev/null
+++ b/src/views/personnelManagement/onboarding/components/formDia.vue
@@ -0,0 +1,259 @@
+<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="postJob">
+ <el-input v-model="form.postJob" placeholder="璇疯緭鍏�" clearable/>
+ </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="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="identityCard">
+ <el-input v-model="form.identityCard" placeholder="璇疯緭鍏�" clearable/>
+ </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="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>
+ </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, staffJoinAdd, staffJoinUpdate} from "@/api/personnelManagement/onboarding.js";
+const { proxy } = getCurrentInstance()
+const emit = defineEmits(['close'])
+
+const dialogFormVisible = ref(false);
+const operationType = ref('')
+const data = reactive({
+ form: {
+ staffNo: "",
+ staffName: "",
+ sex: "",
+ nativePlace: "",
+ postJob: "",
+ adress: "",
+ firstStudy: "",
+ profession: "",
+ identityCard: "",
+ age: 0,
+ phone: "",
+ emergencyContact: "",
+ emergencyContactPhone: "",
+ contractTerm: 0,
+ contractStartTime: "",
+ contractEndTime: "",
+ staffState: "",
+ },
+ 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" }],
+ identityCard: [{ 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" }],
+ },
+});
+const { form, rules } = toRefs(data);
+
+// 鎵撳紑寮规
+const openDialog = (type, row) => {
+ operationType.value = type;
+ dialogFormVisible.value = true;
+ if (operationType.value === 'edit') {
+ getStaffJoinInfo(row.id).then(res => {
+ form.value = {...res.data}
+ // 缂栬緫鏃朵篃璁＄畻涓�娆″悎鍚屽勾闄�
+ calculateContractTerm();
+ })
+ }
+}
+// 鎻愪氦浜у搧琛ㄥ崟
+const submitForm = () => {
+ proxy.$refs.formRef.validate(valid => {
+ if (valid) {
+ form.value.staffState = 1
+ if (operationType.value === "add") {
+ staffJoinAdd(form.value).then(res => {
+ proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
+ closeDia();
+ })
+ } else {
+ staffJoinUpdate(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/onboarding/index.vue b/src/views/personnelManagement/onboarding/index.vue
new file mode 100644
index 0000000..893986d
--- /dev/null
+++ b/src/views/personnelManagement/onboarding/index.vue
@@ -0,0 +1,283 @@
+<template>
+ <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 style="margin-left: 10px;" class="search_title">鍚堝悓寮�濮嬫棩鏈燂細</span>
+ <el-date-picker
+ v-model="searchForm.entryDateStart"
+ type="date"
+ placeholder="璇烽�夋嫨鍚堝悓寮�濮嬫棩鏈�"
+ size="default"
+ @change="(date) => handleDateChange(date,1)"
+ />
+ <span style="margin-left: 10px;" class="search_title">鍚堝悓缁撴潫鏃ユ湡锛�</span>
+ <el-date-picker
+ v-model="searchForm.entryDateEnd"
+ type="date"
+ placeholder="璇烽�夋嫨鍚堝悓缁撴潫鏃ユ湡"
+ size="default"
+ @change="(date) => handleDateChange(date,2)"
+ />
+ <el-button type="primary" @click="handleQuery" style="margin-left: 10px">鎼滅储</el-button>
+ </div>
+ <div style="margin: 10PX 0;">
+ <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/onboarding/components/formDia.vue";
+import {staffJoinDel, staffJoinListPage} from "@/api/personnelManagement/onboarding.js";
+import {ElMessageBox} from "element-plus";
+import PIMTable from "@/components/PIMTable/PIMTable.vue";
+import dayjs from "dayjs";
+
+const data = reactive({
+ searchForm: {
+ staffName: "",
+ },
+});
+const { searchForm } = toRefs(data);
+const tableColumn = ref([
+ {
+ label: "鐘舵��",
+ prop: "staffState",
+ dataType: "tag",
+ formatData: (params) => {
+ if (params == 0) {
+ return "绂昏亴";
+ } else if (params == 1) {
+ return "鍏ヨ亴";
+ } else {
+ return null;
+ }
+ },
+ formatType: (params) => {
+ if (params == 0) {
+ return "danger";
+ } else if (params == 1) {
+ return "primary";
+ } else {
+ return null;
+ }
+ },
+ },
+ {
+ label: "鍛樺伐缂栧彿",
+ prop: "staffNo",
+ },
+ {
+ label: "濮撳悕",
+ prop: "staffName",
+ },
+ {
+ label: "鎬у埆",
+ prop: "sex",
+ },
+ {
+ label: "绫嶈疮",
+ prop: "nativePlace",
+ },
+ {
+ label: "宀椾綅",
+ prop: "postJob",
+ },
+ {
+ label: "瀹跺涵浣忓潃",
+ prop: "adress",
+ width:200
+ },
+ {
+ label: "绗竴瀛﹀巻",
+ prop: "firstStudy",
+ },
+ {
+ label: "涓撲笟",
+ prop: "profession",
+ width:100
+ },
+ {
+ label: "韬唤璇佸彿",
+ prop: "identityCard",
+ width:200
+ },
+ {
+ label: "骞撮緞",
+ prop: "age",
+ },
+ {
+ label: "鑱旂郴鐢佃瘽",
+ prop: "phone",
+ width:150
+ },
+ {
+ label: "绱ф�ヨ仈绯讳汉",
+ prop: "emergencyContact",
+ width: 120
+ },
+ {
+ label: "鑱旂郴鐢佃瘽",
+ prop: "emergencyContactPhone",
+ width:150
+ },
+ {
+ label: "鍚堝悓骞撮檺",
+ prop: "contractTerm",
+ },
+ {
+ label: "鍚堝悓寮�濮嬫棩鏈�",
+ prop: "contractStartTime",
+ width: 120
+ },
+ {
+ label: "鍚堝悓缁撴潫鏃ユ湡",
+ prop: "contractEndTime",
+ 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;
+ staffJoinListPage({...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(() => {
+ staffJoinDel(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>
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..17152ac
--- /dev/null
+++ b/src/views/personnelManagement/payrollManagement/index.vue
@@ -0,0 +1,292 @@
+<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.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"
+ >鎼滅储</el-button
+ >
+ </div>
+ <div style="margin: 10PX 0;">
+ <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 PIMTable from "@/components/PIMTable/PIMTable.vue";
+import dayjs from "dayjs";
+import {compensationDelete, compensationListPage} from "@/api/personnelManagement/payrollManagement.js";
+
+const data = reactive({
+ searchForm: {
+ name: "",
+ payDateStr: "",
+ },
+});
+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>
diff --git a/src/views/personnelManagement/scheduling/index.vue b/src/views/personnelManagement/scheduling/index.vue
new file mode 100644
index 0000000..8a7174d
--- /dev/null
+++ b/src/views/personnelManagement/scheduling/index.vue
@@ -0,0 +1,634 @@
+<template>
+ <div class="app-container scheduling-container">
+ <!-- 绛涢�夊尯鍩� -->
+ <div class="filter-section">
+ <el-form :inline="true" :model="filterForm" class="filter-form">
+ <el-form-item label="鍛樺伐濮撳悕锛�">
+ <el-input
+ v-model="filterForm.employeeName"
+ placeholder="璇疯緭鍏ュ憳宸ュ鍚�"
+ clearable
+ style="width: 150px"
+ />
+ </el-form-item>
+ <el-form-item label="鐝绫诲瀷锛�">
+ <el-select v-model="filterForm.shiftType" placeholder="璇烽�夋嫨鐝" clearable style="width: 120px">
+ <el-option label="鏃╃彮" value="鏃╃彮" />
+ <el-option label="涓彮" value="涓彮" />
+ <el-option label="鏅氱彮" value="鏅氱彮" />
+ <el-option label="澶滅彮" value="澶滅彮" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鏃ユ湡鑼冨洿锛�">
+ <el-date-picker
+ v-model="filterForm.dateRange"
+ type="daterange"
+ range-separator="鑷�"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ format="YYYY-MM-DD"
+ value-format="YYYY-MM-DD"
+ style="width: 250px"
+ />
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="handleFilter">
+ <el-icon><Search /></el-icon>
+ 绛涢��
+ </el-button>
+ <el-button @click="resetFilter">
+ <el-icon><Refresh /></el-icon>
+ 閲嶇疆
+ </el-button>
+ <el-button type="primary" @click="openScheduleDialog('add')">
+ <el-icon><Plus /></el-icon>
+ 鏂板鎺掔彮
+ </el-button>
+ </el-form-item>
+ </el-form>
+ </div>
+
+ <!-- 鎺掔彮琛ㄦ牸 -->
+ <div class="table-section">
+ <el-table
+ :data="filteredScheduleList"
+ border
+ stripe
+ style="width: 100%"
+ height="calc(100vh - 18.5em)"
+ @selection-change="handleSelectionChange"
+ >
+ <el-table-column type="selection" width="55" />
+ <el-table-column prop="employeeName" label="鍛樺伐濮撳悕" width="120" />
+ <el-table-column prop="employeeId" label="鍛樺伐宸ュ彿" width="100" />
+ <el-table-column prop="department" label="閮ㄩ棬" width="120" />
+ <el-table-column prop="shiftType" label="鐝绫诲瀷" width="100">
+ <template #default="scope">
+ <el-tag :type="getShiftTagType(scope.row.shiftType)">
+ {{ scope.row.shiftType }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column prop="workDate" label="宸ヤ綔鏃ユ湡" width="120" />
+ <el-table-column prop="startTime" label="寮�濮嬫椂闂�" width="100" />
+ <el-table-column prop="endTime" label="缁撴潫鏃堕棿" width="100" />
+ <el-table-column prop="workHours" label="宸ヤ綔鏃堕暱" width="100">
+ <template #default="scope">
+ {{ scope.row.workHours }}灏忔椂
+ </template>
+ </el-table-column>
+ <el-table-column prop="status" label="鐘舵��" width="100">
+ <template #default="scope">
+ <el-tag :type="getStatusTagType(scope.row.status)">
+ {{ scope.row.status }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column prop="remark" label="澶囨敞" min-width="150" />
+ <el-table-column label="鎿嶄綔" width="200" fixed="right">
+ <template #default="scope">
+ <el-button
+ type="primary"
+ size="small"
+ @click="openScheduleDialog('edit', scope.row)"
+ >
+ 缂栬緫
+ </el-button>
+ <el-button
+ type="danger"
+ size="small"
+ @click="handleDelete(scope.row)"
+ >
+ 鍒犻櫎
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+
+ <!-- 鎵归噺鎿嶄綔 -->
+ <div class="batch-actions" v-if="selectedRows.length > 0">
+ <el-button
+ type="danger"
+ @click="handleBatchDelete"
+ :disabled="selectedRows.length === 0"
+ >
+ 鎵归噺鍒犻櫎 ({{ selectedRows.length }})
+ </el-button>
+ </div>
+
+ <!-- 鎺掔彮鏂板/缂栬緫瀵硅瘽妗� -->
+ <el-dialog
+ v-model="scheduleDialog"
+ :title="dialogType === 'add' ? '鏂板鎺掔彮' : '缂栬緫鎺掔彮'"
+ width="700px"
+ @close="closeScheduleDialog"
+ >
+ <el-form
+ :model="scheduleForm"
+ :rules="scheduleRules"
+ ref="scheduleFormRef"
+ label-width="120px"
+ >
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <el-form-item label="鍛樺伐濮撳悕锛�" prop="employeeName">
+ <el-input v-model="scheduleForm.employeeName" placeholder="璇疯緭鍏ュ憳宸ュ鍚�" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鍛樺伐宸ュ彿锛�" prop="employeeId">
+ <el-input v-model="scheduleForm.employeeId" placeholder="璇疯緭鍏ュ憳宸ュ伐鍙�" />
+ </el-form-item>
+ </el-col>
+ </el-row>
+
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <el-form-item label="閮ㄩ棬锛�" prop="department">
+ <el-select v-model="scheduleForm.department" placeholder="璇烽�夋嫨閮ㄩ棬" style="width: 100%">
+ <el-option label="鎶�鏈儴" value="鎶�鏈儴" />
+ <el-option label="閿�鍞儴" value="閿�鍞儴" />
+ <el-option label="浜轰簨閮�" value="浜轰簨閮�" />
+ <el-option label="璐㈠姟閮�" value="璐㈠姟閮�" />
+ <el-option label="鐢熶骇閮�" value="鐢熶骇閮�" />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鐝绫诲瀷锛�" prop="shiftType">
+ <el-select v-model="scheduleForm.shiftType" placeholder="璇烽�夋嫨鐝" style="width: 100%">
+ <el-option label="鏃╃彮" value="鏃╃彮" />
+ <el-option label="涓彮" value="涓彮" />
+ <el-option label="鏅氱彮" value="鏅氱彮" />
+ <el-option label="澶滅彮" value="澶滅彮" />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <el-form-item label="宸ヤ綔鏃ユ湡锛�" prop="workDate">
+ <el-date-picker
+ v-model="scheduleForm.workDate"
+ type="date"
+ placeholder="閫夋嫨宸ヤ綔鏃ユ湡"
+ style="width: 100%"
+ format="YYYY-MM-DD"
+ value-format="YYYY-MM-DD"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鐘舵�侊細" prop="status">
+ <el-select v-model="scheduleForm.status" placeholder="璇烽�夋嫨鐘舵��" style="width: 100%">
+ <el-option label="宸插畨鎺�" value="宸插畨鎺�" />
+ <el-option label="宸茬‘璁�" value="宸茬‘璁�" />
+ <el-option label="宸插畬鎴�" value="宸插畬鎴�" />
+ <el-option label="宸插彇娑�" value="宸插彇娑�" />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <el-form-item label="寮�濮嬫椂闂达細" prop="startTime">
+ <el-time-picker
+ v-model="scheduleForm.startTime"
+ placeholder="閫夋嫨寮�濮嬫椂闂�"
+ style="width: 100%"
+ format="HH:mm"
+ value-format="HH:mm"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="缁撴潫鏃堕棿锛�" prop="endTime">
+ <el-time-picker
+ v-model="scheduleForm.endTime"
+ placeholder="閫夋嫨缁撴潫鏃堕棿"
+ style="width: 100%"
+ format="HH:mm"
+ value-format="HH:mm"
+ />
+ </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="scheduleForm.remark"
+ type="textarea"
+ :rows="3"
+ placeholder="璇疯緭鍏ュ娉ㄤ俊鎭�"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button type="primary" @click="submitScheduleForm">纭</el-button>
+ <el-button @click="closeScheduleDialog">鍙栨秷</el-button>
+ </div>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Download, Search, Refresh } from '@element-plus/icons-vue'
+
+// 鍝嶅簲寮忔暟鎹�
+const scheduleDialog = ref(false)
+const dialogType = ref('add')
+const selectedRows = ref([])
+const scheduleFormRef = ref()
+
+// 绛涢�夎〃鍗�
+const filterForm = reactive({
+ employeeName: '',
+ shiftType: '',
+ dateRange: []
+})
+
+// 鎺掔彮琛ㄥ崟
+const scheduleForm = reactive({
+ id: '',
+ employeeName: '',
+ employeeId: '',
+ department: '',
+ shiftType: '',
+ workDate: '',
+ startTime: '',
+ endTime: '',
+ workHours: 0,
+ status: '宸插畨鎺�',
+ remark: ''
+})
+
+// 琛ㄥ崟楠岃瘉瑙勫垯
+const scheduleRules = reactive({
+ employeeName: [{ required: true, message: '璇疯緭鍏ュ憳宸ュ鍚�', trigger: 'blur' }],
+ employeeId: [{ required: true, message: '璇疯緭鍏ュ憳宸ュ伐鍙�', trigger: 'blur' }],
+ department: [{ required: true, message: '璇烽�夋嫨閮ㄩ棬', trigger: 'change' }],
+ shiftType: [{ required: true, message: '璇烽�夋嫨鐝绫诲瀷', trigger: 'change' }],
+ workDate: [{ required: true, message: '璇烽�夋嫨宸ヤ綔鏃ユ湡', trigger: 'change' }],
+ startTime: [{ required: true, message: '璇烽�夋嫨寮�濮嬫椂闂�', trigger: 'change' }],
+ endTime: [{ required: true, message: '璇烽�夋嫨缁撴潫鏃堕棿', trigger: 'change' }],
+ status: [{ required: true, message: '璇烽�夋嫨鐘舵��', trigger: 'change' }]
+})
+
+// 妯℃嫙鎺掔彮鏁版嵁
+const scheduleList = ref([
+ {
+ id: 1,
+ employeeName: '寮犳捣娲�',
+ employeeId: 'EMP001',
+ department: '鎶�鏈儴',
+ shiftType: '鏃╃彮',
+ workDate: '2024-01-15',
+ startTime: '08:00',
+ endTime: '17:00',
+ workHours: 9,
+ status: '宸插畨鎺�',
+ remark: '姝ｅ父鎺掔彮'
+ },
+ {
+ id: 2,
+ employeeName: '鏉庤秴',
+ employeeId: 'EMP002',
+ department: '閿�鍞儴',
+ shiftType: '涓彮',
+ workDate: '2024-01-15',
+ startTime: '14:00',
+ endTime: '22:00',
+ workHours: 8,
+ status: '宸茬‘璁�',
+ remark: '瀹㈡埛浼氳'
+ },
+ {
+ id: 3,
+ employeeName: '鐜嬫澃',
+ employeeId: 'EMP003',
+ department: '鐢熶骇閮�',
+ shiftType: '鏅氱彮',
+ workDate: '2024-01-15',
+ startTime: '22:00',
+ endTime: '06:00',
+ workHours: 8,
+ status: '宸插畨鎺�',
+ remark: '澶滅彮鐢熶骇'
+ }
+])
+
+// 璁＄畻灞炴�э細绛涢�夊悗鐨勬帓鐝垪琛�
+const filteredScheduleList = computed(() => {
+ let result = scheduleList.value
+
+ if (filterForm.employeeName) {
+ result = result.filter(item =>
+ item.employeeName.includes(filterForm.employeeName)
+ )
+ }
+
+ if (filterForm.shiftType) {
+ result = result.filter(item => item.shiftType === filterForm.shiftType)
+ }
+
+ if (filterForm.dateRange && filterForm.dateRange.length === 2) {
+ result = result.filter(item => {
+ const workDate = new Date(item.workDate)
+ const startDate = new Date(filterForm.dateRange[0])
+ const endDate = new Date(filterForm.dateRange[1])
+ return workDate >= startDate && workDate <= endDate
+ })
+ }
+
+ return result
+})
+
+// 鑾峰彇鐝鏍囩绫诲瀷
+const getShiftTagType = (shiftType) => {
+ const typeMap = {
+ '鏃╃彮': 'success',
+ '涓彮': 'warning',
+ '鏅氱彮': 'info',
+ '澶滅彮': 'danger'
+ }
+ return typeMap[shiftType] || 'info'
+}
+
+// 鑾峰彇鐘舵�佹爣绛剧被鍨�
+const getStatusTagType = (status) => {
+ const typeMap = {
+ '宸插畨鎺�': 'info',
+ '宸茬‘璁�': 'warning',
+ '宸插畬鎴�': 'success',
+ '宸插彇娑�': 'danger'
+ }
+ return typeMap[status] || 'info'
+}
+
+// 绛涢��
+const handleFilter = () => {
+ // 绛涢�夐�昏緫宸插湪璁＄畻灞炴�т腑瀹炵幇
+}
+
+// 閲嶇疆绛涢��
+const resetFilter = () => {
+ filterForm.employeeName = ''
+ filterForm.shiftType = ''
+ filterForm.dateRange = []
+}
+
+// 鎵撳紑鎺掔彮瀵硅瘽妗�
+const openScheduleDialog = (type, data) => {
+ dialogType.value = type
+ scheduleDialog.value = true
+
+ if (type === 'edit' && data) {
+ // 缂栬緫妯″紡锛屽鍒舵暟鎹�
+ Object.assign(scheduleForm, { ...data })
+ } else {
+ // 鏂板妯″紡锛岄噸缃〃鍗�
+ Object.keys(scheduleForm).forEach(key => {
+ scheduleForm[key] = ''
+ })
+ scheduleForm.status = '宸插畨鎺�'
+ scheduleForm.workDate = new Date().toISOString().split('T')[0]
+ }
+}
+
+// 鍏抽棴鎺掔彮瀵硅瘽妗�
+const closeScheduleDialog = () => {
+ scheduleFormRef.value?.resetFields()
+ scheduleDialog.value = false
+}
+
+// 璁＄畻宸ヤ綔鏃堕暱
+const calculateWorkHours = () => {
+ if (scheduleForm.startTime && scheduleForm.endTime) {
+ const start = new Date(`2000-01-01 ${scheduleForm.startTime}`)
+ const end = new Date(`2000-01-01 ${scheduleForm.endTime}`)
+
+ if (end < start) {
+ // 璺ㄥぉ鐨勬儏鍐�
+ end.setDate(end.getDate() + 1)
+ }
+
+ const diffMs = end - start
+ const diffHours = diffMs / (1000 * 60 * 60)
+ scheduleForm.workHours = Math.round(diffHours * 100) / 100
+ }
+}
+
+// 鎻愪氦鎺掔彮琛ㄥ崟
+const submitScheduleForm = () => {
+ scheduleFormRef.value.validate((valid) => {
+ if (valid) {
+ // 璁＄畻宸ヤ綔鏃堕暱
+ calculateWorkHours()
+
+ if (dialogType.value === 'add') {
+ // 鏂板
+ const newSchedule = {
+ ...scheduleForm,
+ id: Date.now() // 浣跨敤鏃堕棿鎴充綔涓轰复鏃禝D
+ }
+ scheduleList.value.push(newSchedule)
+ ElMessage.success('鏂板鎺掔彮鎴愬姛')
+ } else {
+ // 缂栬緫
+ const index = scheduleList.value.findIndex(item => item.id === scheduleForm.id)
+ if (index !== -1) {
+ scheduleList.value[index] = { ...scheduleForm }
+ ElMessage.success('缂栬緫鎺掔彮鎴愬姛')
+ }
+ }
+
+ closeScheduleDialog()
+ }
+ })
+}
+
+// 鍒犻櫎鎺掔彮
+const handleDelete = (row) => {
+ ElMessageBox.confirm(
+ `纭畾瑕佸垹闄� ${row.employeeName} 鐨勬帓鐝褰曞悧锛焋,
+ '鍒犻櫎鎻愮ず',
+ {
+ confirmButtonText: '纭',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ }
+ ).then(() => {
+ const index = scheduleList.value.findIndex(item => item.id === row.id)
+ if (index !== -1) {
+ scheduleList.value.splice(index, 1)
+ ElMessage.success('鍒犻櫎鎴愬姛')
+ }
+ }).catch(() => {
+ ElMessage.info('宸插彇娑堝垹闄�')
+ })
+}
+
+// 鎵归噺鍒犻櫎
+const handleBatchDelete = () => {
+ if (selectedRows.value.length === 0) {
+ ElMessage.warning('璇烽�夋嫨瑕佸垹闄ょ殑璁板綍')
+ return
+ }
+
+ ElMessageBox.confirm(
+ `纭畾瑕佸垹闄ら�変腑鐨� ${selectedRows.value.length} 鏉℃帓鐝褰曞悧锛焋,
+ '鎵归噺鍒犻櫎鎻愮ず',
+ {
+ confirmButtonText: '纭',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ }
+ ).then(() => {
+ const selectedIds = selectedRows.value.map(row => row.id)
+ scheduleList.value = scheduleList.value.filter(item => !selectedIds.includes(item.id))
+ selectedRows.value = []
+ ElMessage.success('鎵归噺鍒犻櫎鎴愬姛')
+ }).catch(() => {
+ ElMessage.info('宸插彇娑堝垹闄�')
+ })
+}
+
+// 閫夋嫨鍙樺寲浜嬩欢
+const handleSelectionChange = (selection) => {
+ selectedRows.value = selection
+}
+
+// 鐩戝惉鏃堕棿鍙樺寲锛岃嚜鍔ㄨ绠楀伐浣滄椂闀�
+const watchTimeChange = () => {
+ if (scheduleForm.startTime && scheduleForm.endTime) {
+ calculateWorkHours()
+ }
+}
+
+// 鐢熷懡鍛ㄦ湡
+onMounted(() => {
+ // 椤甸潰鍒濆鍖�
+})
+</script>
+
+<style scoped>
+.scheduling-container {
+ padding: 20px;
+ background-color: #f5f7fa;
+ min-height: 100vh;
+}
+
+.page-header {
+ text-align: center;
+ margin-bottom: 30px;
+ padding: 20px;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ border-radius: 12px;
+ color: white;
+}
+
+.page-header h2 {
+ color: white;
+ margin-bottom: 10px;
+ font-size: 28px;
+ font-weight: 600;
+}
+
+.page-header p {
+ color: rgba(255, 255, 255, 0.9);
+ font-size: 14px;
+ margin: 0 0 15px 0;
+}
+
+.header-controls {
+ display: flex;
+ justify-content: center;
+ gap: 15px;
+}
+
+.filter-section {
+ background: white;
+ padding: 20px;
+ border-radius: 8px;
+ margin-bottom: 20px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.filter-form {
+ margin: 0;
+}
+
+.table-section {
+ background: white;
+ border-radius: 8px;
+ overflow: hidden;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ margin-bottom: 20px;
+}
+
+.batch-actions {
+ background: white;
+ padding: 15px 20px;
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.dialog-footer {
+ text-align: right;
+}
+
+:deep(.el-form-item__label) {
+ font-weight: 500;
+ color: #303133;
+}
+
+:deep(.el-input__wrapper) {
+ box-shadow: 0 0 0 1px #dcdfe6 inset;
+}
+
+:deep(.el-input__wrapper:hover) {
+ box-shadow: 0 0 0 1px #c0c4cc inset;
+}
+
+:deep(.el-input__wrapper.is-focus) {
+ box-shadow: 0 0 0 1px #409eff inset;
+}
+
+/* 鍝嶅簲寮忚璁� */
+@media (max-width: 768px) {
+ .scheduling-container {
+ padding: 10px;
+ }
+
+ .page-header {
+ padding: 15px;
+ }
+
+ .page-header h2 {
+ font-size: 24px;
+ }
+
+ .header-controls {
+ flex-direction: column;
+ gap: 10px;
+ }
+}
+
+@media (max-width: 768px) {
+ .filter-form .el-form-item {
+ margin-bottom: 10px;
+ }
+}
+</style>
diff --git a/src/views/personnelManagement/selfService/index.vue b/src/views/personnelManagement/selfService/index.vue
new file mode 100644
index 0000000..1f4fbea
--- /dev/null
+++ b/src/views/personnelManagement/selfService/index.vue
@@ -0,0 +1,525 @@
+<template>
+ <div class="app-container self-service-container">
+
+ <!-- 鍔熻兘瀵艰埅鍗＄墖 -->
+ <el-row :gutter="20" class="nav-cards">
+ <el-col :span="6" v-for="(item, index) in navItems" :key="index">
+ <el-card class="nav-card" @click="handleNavClick(item.type)">
+ <div class="nav-content">
+ <el-icon :size="40" class="nav-icon">
+ <component :is="item.icon" />
+ </el-icon>
+ <h3>{{ item.title }}</h3>
+ <p>{{ item.desc }}</p>
+ </div>
+ </el-card>
+ </el-col>
+ </el-row>
+
+ <!-- 涓昏鍐呭鍖哄煙 -->
+ <div class="main-content">
+ <!-- 鑰冨嫟璁板綍 -->
+ <el-card v-if="currentView === 'attendance'" class="content-card">
+ <template #header>
+ <div class="card-header">
+ <span>涓汉鑰冨嫟璁板綍</span>
+ <el-button type="primary" @click="addAttendanceRecord">鏂板璁板綍</el-button>
+ </div>
+ </template>
+ <el-table :data="attendanceData" style="width: 100%">
+ <el-table-column prop="date" label="鏃ユ湡" />
+ <el-table-column prop="checkIn" label="绛惧埌鏃堕棿" />
+ <el-table-column prop="checkOut" label="绛鹃��鏃堕棿" />
+ <el-table-column prop="workHours" label="宸ヤ綔鏃堕暱" width="100" />
+ <el-table-column prop="status" label="鐘舵��" width="100">
+ <template #default="scope">
+ <el-tag :type="scope.row.status === '姝ｅ父' ? 'success' : 'danger'">
+ {{ scope.row.status }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column label="鎿嶄綔" width="150">
+ <template #default="scope">
+ <el-button size="small" @click="editAttendanceRecord(scope.row)">缂栬緫</el-button>
+ <el-button size="small" type="danger" @click="deleteAttendanceRecord(scope.$index)">鍒犻櫎</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-card>
+
+ <!-- 钖祫鍗� -->
+ <el-card v-if="currentView === 'salary'" class="content-card">
+ <template #header>
+ <div class="card-header">
+ <span>钖祫鍗曟煡璇�</span>
+ <el-date-picker v-model="salaryMonth" type="month" placeholder="閫夋嫨鏈堜唤" />
+ </div>
+ </template>
+ <el-table :data="salaryData" style="width: 100%">
+ <el-table-column prop="month" label="鏈堜唤" />
+ <el-table-column prop="basicSalary" label="鍩烘湰宸ヨ祫" />
+ <el-table-column prop="bonus" label="濂栭噾" />
+ <el-table-column prop="deduction" label="鎵ｆ" />
+ <el-table-column prop="total" label="瀹炲彂宸ヨ祫" />
+ <el-table-column prop="status" label="鐘舵��" >
+ <template #default="scope">
+ <el-tag :type="scope.row.status === '宸插彂鏀�' ? 'success' : 'warning'">
+ {{ scope.row.status }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-card>
+
+ <!-- 鍋囨湡鐢宠 -->
+ <el-card v-if="currentView === 'leave'" class="content-card">
+ <template #header>
+ <div class="card-header">
+ <span>鍋囨湡鐢宠绠＄悊</span>
+ <el-button type="primary" @click="showLeaveDialog = true">鐢宠鍋囨湡</el-button>
+ </div>
+ </template>
+ <el-table :data="leaveData" style="width: 100%">
+ <el-table-column prop="type" label="鍋囨湡绫诲瀷" />
+ <el-table-column prop="startDate" label="寮�濮嬫棩鏈�" />
+ <el-table-column prop="endDate" label="缁撴潫鏃ユ湡" />
+ <el-table-column prop="days" label="澶╂暟" width="80" />
+ <el-table-column prop="reason" label="鐢宠鍘熷洜" />
+ <el-table-column prop="status" label="瀹℃壒鐘舵��" width="100">
+ <template #default="scope">
+ <el-tag :type="getStatusType(scope.row.status)">
+ {{ scope.row.status }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column label="鎿嶄綔" width="150">
+ <template #default="scope">
+ <el-button size="small" @click="editLeaveRecord(scope.row)">缂栬緫</el-button>
+ <el-button size="small" type="danger" @click="deleteLeaveRecord(scope.$index)">鍒犻櫎</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-card>
+
+ <!-- 涓汉淇℃伅 -->
+ <el-card v-if="currentView === 'profile'" class="content-card">
+ <template #header>
+ <div class="card-header">
+ <span>涓汉淇℃伅缁存姢</span>
+ <el-button type="primary" @click="editProfile = true">缂栬緫淇℃伅</el-button>
+ </div>
+ </template>
+ <el-descriptions :column="2" border>
+ <el-descriptions-item label="濮撳悕">{{ profile.name }}</el-descriptions-item>
+ <el-descriptions-item label="宸ュ彿">{{ profile.employeeId }}</el-descriptions-item>
+ <el-descriptions-item label="閮ㄩ棬">{{ profile.department }}</el-descriptions-item>
+ <el-descriptions-item label="鑱屼綅">{{ profile.position }}</el-descriptions-item>
+ <el-descriptions-item label="鍏ヨ亴鏃ユ湡">{{ profile.hireDate }}</el-descriptions-item>
+ <el-descriptions-item label="鑱旂郴鐢佃瘽">{{ profile.phone }}</el-descriptions-item>
+ <el-descriptions-item label="閭">{{ profile.email }}</el-descriptions-item>
+ <el-descriptions-item label="鍦板潃">{{ profile.address }}</el-descriptions-item>
+ </el-descriptions>
+ </el-card>
+ </div>
+
+ <!-- 鍋囨湡鐢宠寮圭獥 -->
+ <el-dialog v-model="showLeaveDialog" title="鐢宠鍋囨湡" width="500px">
+ <el-form :model="leaveForm" label-width="100px">
+ <el-form-item label="鍋囨湡绫诲瀷">
+ <el-select v-model="leaveForm.type" placeholder="璇烽�夋嫨鍋囨湡绫诲瀷">
+ <el-option label="骞村亣" value="骞村亣" />
+ <el-option label="鐥呭亣" value="鐥呭亣" />
+ <el-option label="璋冧紤" value="璋冧紤" />
+ <el-option label="浜嬪亣" value="浜嬪亣" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="寮�濮嬫棩鏈�">
+ <el-date-picker v-model="leaveForm.startDate" type="date" placeholder="閫夋嫨寮�濮嬫棩鏈�" />
+ </el-form-item>
+ <el-form-item label="缁撴潫鏃ユ湡">
+ <el-date-picker v-model="leaveForm.endDate" type="date" placeholder="閫夋嫨缁撴潫鏃ユ湡" />
+ </el-form-item>
+ <el-form-item label="鐢宠鍘熷洜">
+ <el-input v-model="leaveForm.reason" type="textarea" rows="3" />
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <el-button @click="showLeaveDialog = false">鍙栨秷</el-button>
+ <el-button type="primary" @click="submitLeaveApplication">鎻愪氦鐢宠</el-button>
+ </template>
+ </el-dialog>
+
+ <!-- 鏂板鑰冨嫟璁板綍寮圭獥 -->
+ <el-dialog v-model="showAttendanceDialog" title="鏂板鑰冨嫟璁板綍" width="500px">
+ <el-form :model="attendanceForm" :rules="attendanceRules" ref="attendanceFormRef" label-width="100px">
+ <el-form-item label="鏃ユ湡" prop="date">
+ <el-date-picker v-model="attendanceForm.date" type="date" placeholder="閫夋嫨鏃ユ湡" />
+ </el-form-item>
+ <el-form-item label="绛惧埌鏃堕棿" prop="checkIn">
+ <el-time-picker v-model="attendanceForm.checkIn" placeholder="閫夋嫨绛惧埌鏃堕棿" format="HH:mm" value-format="HH:mm" />
+ </el-form-item>
+ <el-form-item label="绛鹃��鏃堕棿" prop="checkOut">
+ <el-time-picker v-model="attendanceForm.checkOut" placeholder="閫夋嫨绛鹃��鏃堕棿" format="HH:mm" value-format="HH:mm" />
+ </el-form-item>
+ <el-form-item label="鐘舵��" prop="status">
+ <el-select v-model="attendanceForm.status" placeholder="璇烽�夋嫨鐘舵��">
+ <el-option label="姝ｅ父" value="姝ｅ父" />
+ <el-option label="杩熷埌" value="杩熷埌" />
+ <el-option label="鏃╅��" value="鏃╅��" />
+ <el-option label="缂哄嫟" value="缂哄嫟" />
+ </el-select>
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <el-button @click="showAttendanceDialog = false">鍙栨秷</el-button>
+ <el-button type="primary" @click="submitAttendance">鎻愪氦</el-button>
+ </template>
+ </el-dialog>
+
+ <!-- 涓汉淇℃伅缂栬緫寮圭獥 -->
+ <el-dialog v-model="editProfile" title="缂栬緫涓汉淇℃伅" width="500px">
+ <el-form :model="profileForm" label-width="100px">
+ <el-form-item label="濮撳悕">
+ <el-input v-model="profileForm.name" />
+ </el-form-item>
+ <el-form-item label="鑱旂郴鐢佃瘽">
+ <el-input v-model="profileForm.phone" />
+ </el-form-item>
+ <el-form-item label="閭">
+ <el-input v-model="profileForm.email" />
+ </el-form-item>
+ <el-form-item label="鍦板潃">
+ <el-input v-model="profileForm.address" type="textarea" rows="2" />
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <el-button @click="editProfile = false">鍙栨秷</el-button>
+ <el-button type="primary" @click="saveProfile">淇濆瓨</el-button>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+
+<script setup>
+import { ref, reactive, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import {
+ Calendar,
+ Money,
+ Clock,
+ User
+} from '@element-plus/icons-vue'
+
+// 褰撳墠瑙嗗浘
+const currentView = ref('attendance')
+
+// 瀵艰埅椤�
+const navItems = [
+ { type: 'attendance', title: '鑰冨嫟璁板綍', desc: '鏌ヨ涓汉鑰冨嫟淇℃伅', icon: 'Calendar' },
+ { type: 'salary', title: '钖祫鍗�', desc: '鏌ョ湅钖祫鍙戞斁璁板綍', icon: 'Money' },
+ { type: 'leave', title: '鍋囨湡鐢宠', desc: '鍦ㄧ嚎鐢宠鍚勭被鍋囨湡', icon: 'Clock' },
+ { type: 'profile', title: '涓汉淇℃伅', desc: '缁存姢涓汉鍩烘湰淇℃伅', icon: 'User' }
+]
+
+// 鑰冨嫟鏁版嵁
+const attendanceData = ref([
+ { date: '2024-01-15', checkIn: '09:00', checkOut: '18:00', workHours: '9灏忔椂', status: '姝ｅ父' },
+ { date: '2024-01-16', checkIn: '08:55', checkOut: '18:05', workHours: '9灏忔椂10鍒�', status: '姝ｅ父' },
+ { date: '2024-01-17', checkIn: '09:15', checkOut: '18:00', workHours: '8灏忔椂45鍒�', status: '杩熷埌' }
+])
+
+// 钖祫鏁版嵁
+const salaryData = ref([
+ { month: '2024-01', basicSalary: 8000, bonus: 1000, deduction: 200, total: 8800, status: '宸插彂鏀�' },
+ { month: '2023-12', basicSalary: 8000, bonus: 800, deduction: 150, total: 8650, status: '宸插彂鏀�' }
+])
+
+// 鍋囨湡鏁版嵁
+const leaveData = ref([
+ { type: '骞村亣', startDate: '2024-02-01', endDate: '2024-02-03', days: 3, reason: '鏄ヨ妭鍥炲', status: '宸查�氳繃' },
+ { type: '鐥呭亣', startDate: '2024-01-20', endDate: '2024-01-21', days: 2, reason: '鎰熷啋鍙戠儳', status: '瀹℃壒涓�' }
+])
+
+// 涓汉淇℃伅
+const profile = ref({
+ name: '寮犳捣娲�',
+ employeeId: 'EMP001',
+ department: '鎶�鏈儴',
+ position: '杞欢宸ョ▼甯�',
+ hireDate: '2023-03-01',
+ phone: '13800138000',
+ email: 'zhangsan@company.com',
+ address: '鍖椾含甯傛湞闃冲尯xxx琛楅亾xxx鍙�'
+})
+
+// 寮圭獥鎺у埗
+const showLeaveDialog = ref(false)
+const editProfile = ref(false)
+const salaryMonth = ref('')
+
+// 琛ㄥ崟鏁版嵁
+const leaveForm = reactive({
+ type: '',
+ startDate: '',
+ endDate: '',
+ reason: ''
+})
+
+const profileForm = reactive({
+ name: '',
+ phone: '',
+ email: '',
+ address: ''
+})
+
+// 鏂板鑰冨嫟璁板綍锛氬脊绐椾笌琛ㄥ崟
+const showAttendanceDialog = ref(false)
+const attendanceFormRef = ref(null)
+const attendanceForm = reactive({
+ date: '',
+ checkIn: '',
+ checkOut: '',
+ status: '姝ｅ父'
+})
+const attendanceRules = {
+ date: [{ required: true, message: '璇烽�夋嫨鏃ユ湡', trigger: 'change' }],
+ checkIn: [{ required: true, message: '璇烽�夋嫨绛惧埌鏃堕棿', trigger: 'change' }],
+ checkOut: [{ required: true, message: '璇烽�夋嫨绛鹃��鏃堕棿', trigger: 'change' }],
+ status: [{ required: true, message: '璇烽�夋嫨鐘舵��', trigger: 'change' }]
+}
+
+// 澶勭悊瀵艰埅鐐瑰嚮
+const handleNavClick = (type) => {
+ currentView.value = type
+}
+
+// 鑾峰彇鐘舵�佺被鍨�
+const getStatusType = (status) => {
+ const types = {
+ '宸查�氳繃': 'success',
+ '瀹℃壒涓�': 'warning',
+ '宸叉嫆缁�': 'danger'
+ }
+ return types[status] || 'info'
+}
+
+// 鏂板鑰冨嫟璁板綍锛堟墦寮�寮圭獥骞堕濉粯璁ゅ�硷級
+const addAttendanceRecord = () => {
+ attendanceForm.date = new Date().toISOString().split('T')[0]
+ attendanceForm.checkIn = '09:00'
+ attendanceForm.checkOut = '18:00'
+ attendanceForm.status = '姝ｅ父'
+ showAttendanceDialog.value = true
+}
+
+// 璁＄畻宸ユ椂
+const computeWorkHours = (inStr, outStr) => {
+ const [inH, inM] = inStr.split(':').map(n => parseInt(n, 10))
+ const [outH, outM] = outStr.split(':').map(n => parseInt(n, 10))
+ const inMin = inH * 60 + inM
+ const outMin = outH * 60 + outM
+ const diff = Math.max(0, outMin - inMin)
+ const h = Math.floor(diff / 60)
+ const m = diff % 60
+ return m === 0 ? `${h}灏忔椂` : `${h}灏忔椂${m}鍒哷
+}
+
+// 鎻愪氦鏂板鑰冨嫟璁板綍
+const submitAttendance = () => {
+ if (!attendanceFormRef.value) return
+ attendanceFormRef.value.validate((valid) => {
+ if (!valid) return
+ const workHours = computeWorkHours(attendanceForm.checkIn, attendanceForm.checkOut)
+ const newRecord = {
+ date: attendanceForm.date,
+ checkIn: attendanceForm.checkIn,
+ checkOut: attendanceForm.checkOut,
+ workHours,
+ status: attendanceForm.status
+ }
+ attendanceData.value.unshift(newRecord)
+ showAttendanceDialog.value = false
+ // 閲嶇疆琛ㄥ崟
+ attendanceForm.date = ''
+ attendanceForm.checkIn = ''
+ attendanceForm.checkOut = ''
+ attendanceForm.status = '姝ｅ父'
+ ElMessage.success('鑰冨嫟璁板綍娣诲姞鎴愬姛')
+ })
+}
+
+// 缂栬緫鑰冨嫟璁板綍
+const editAttendanceRecord = (row) => {
+ ElMessage.info('缂栬緫鍔熻兘寮�鍙戜腑...')
+}
+
+// 鍒犻櫎鑰冨嫟璁板綍
+const deleteAttendanceRecord = (index) => {
+ attendanceData.value.splice(index, 1)
+ ElMessage.success('鑰冨嫟璁板綍鍒犻櫎鎴愬姛')
+}
+
+// 缂栬緫鍋囨湡璁板綍
+const editLeaveRecord = (row) => {
+ ElMessage.info('缂栬緫鍔熻兘寮�鍙戜腑...')
+}
+
+// 鍒犻櫎鍋囨湡璁板綍
+const deleteLeaveRecord = (index) => {
+ leaveData.value.splice(index, 1)
+ ElMessage.success('鍋囨湡璁板綍鍒犻櫎鎴愬姛')
+}
+
+// 鎻愪氦鍋囨湡鐢宠
+const submitLeaveApplication = () => {
+ if (!leaveForm.type || !leaveForm.startDate || !leaveForm.endDate || !leaveForm.reason) {
+ ElMessage.warning('璇峰～鍐欏畬鏁翠俊鎭�')
+ return
+ }
+
+ const newLeave = {
+ type: leaveForm.type,
+ startDate: leaveForm.startDate,
+ endDate: leaveForm.endDate,
+ days: 3, // 绠�鍗曡绠�
+ reason: leaveForm.reason,
+ status: '瀹℃壒涓�'
+ }
+
+ leaveData.value.unshift(newLeave)
+ showLeaveDialog.value = false
+
+ // 閲嶇疆琛ㄥ崟
+ Object.keys(leaveForm).forEach(key => {
+ leaveForm[key] = ''
+ })
+
+ ElMessage.success('鍋囨湡鐢宠鎻愪氦鎴愬姛')
+}
+
+// 淇濆瓨涓汉淇℃伅
+const saveProfile = () => {
+ Object.assign(profile.value, profileForm)
+ editProfile.value = false
+ ElMessage.success('涓汉淇℃伅淇濆瓨鎴愬姛')
+}
+
+// 鍒濆鍖栦釜浜轰俊鎭〃鍗�
+const initProfileForm = () => {
+ Object.assign(profileForm, {
+ name: profile.value.name,
+ phone: profile.value.phone,
+ email: profile.value.email,
+ address: profile.value.address
+ })
+}
+
+// 鐩戝惉缂栬緫涓汉淇℃伅寮圭獥
+watch(editProfile, (val) => {
+ if (val) {
+ initProfileForm()
+ }
+})
+</script>
+
+<style scoped>
+.self-service-container {
+ padding: 20px;
+ background-color: #f5f7fa;
+ min-height: 100vh;
+}
+
+.page-header {
+ text-align: center;
+ margin-bottom: 30px;
+ padding: 20px;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ border-radius: 12px;
+ color: white;
+}
+
+.page-header h2 {
+ color: white;
+ margin-bottom: 10px;
+ font-size: 28px;
+ font-weight: 600;
+}
+
+.page-header p {
+ color: rgba(255, 255, 255, 0.9);
+ font-size: 14px;
+ margin: 0;
+}
+
+.nav-cards {
+ margin-bottom: 30px;
+}
+
+.nav-card {
+ cursor: pointer;
+ transition: all 0.3s ease;
+ border-radius: 12px;
+ border: none;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.nav-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+.nav-content {
+ text-align: center;
+ padding: 20px;
+}
+
+.nav-icon {
+ color: #409EFF;
+ margin-bottom: 15px;
+}
+
+.nav-content h3 {
+ margin: 0 0 10px 0;
+ color: #303133;
+ font-size: 18px;
+}
+
+.nav-content p {
+ margin: 0;
+ color: #909399;
+ font-size: 14px;
+}
+
+.main-content {
+ margin-bottom: 30px;
+}
+
+.content-card {
+ border-radius: 12px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ border: none;
+}
+
+.card-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-weight: 600;
+ color: #303133;
+}
+
+/* 鍝嶅簲寮忚璁� */
+@media (max-width: 768px) {
+ .self-service-container {
+ padding: 10px;
+ }
+
+ .nav-cards .el-col {
+ margin-bottom: 15px;
+ }
+
+ .page-header h2 {
+ font-size: 24px;
+ }
+}
+</style>
--
Gitblit v1.9.3