From 2763efef00d553bc65e08bd21384cdd6dd2a5a2f Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期四, 05 三月 2026 11:52:05 +0800
Subject: [PATCH] 进销存升级 1.添加社会保险设置页面，开发与联调 2.丰富新增入职所填字段字段并于用户管理关联 3.修改人员薪资页面样式和逻辑
---
src/views/personnelManagement/monthlyStatistics/index.vue | 503 +++++++++++++++++++++++++------------------------------
1 files changed, 228 insertions(+), 275 deletions(-)
diff --git a/src/views/personnelManagement/monthlyStatistics/index.vue b/src/views/personnelManagement/monthlyStatistics/index.vue
index 741a4b7..f576ad1 100644
--- a/src/views/personnelManagement/monthlyStatistics/index.vue
+++ b/src/views/personnelManagement/monthlyStatistics/index.vue
@@ -2,302 +2,255 @@
<div class="app-container">
<div class="search_form">
<div>
- <span class="search_title">濮撳悕锛�</span>
- <el-input v-model="searchForm.staffName"
- style="width: 240px"
- placeholder="璇疯緭鍏ュ鍚嶆悳绱�"
- @change="handleQuery"
- clearable
- :prefix-icon="Search" />
- <span class="search_title ml10">鏈堜唤锛�</span>
- <el-date-picker v-model="searchForm.payDateStr"
- type="month"
- @change="handleQuery"
- value-format="YYYY-MM"
- format="YYYY-MM"
- placeholder="璇烽�夋嫨鏈堜唤"
- style="width: 240px"
- clearable />
- <el-button type="primary"
- @click="handleQuery"
- style="margin-left: 10px">
+ <span class="search_title">涓婚锛�</span>
+ <el-input
+ v-model="searchForm.title"
+ style="width: 240px"
+ placeholder="璇疯緭鍏ヤ富棰�"
+ clearable
+ @keyup.enter="handleQuery"
+ />
+ <span class="search_title ml10">鍗曟嵁鐘舵�侊細</span>
+ <el-select
+ v-model="searchForm.documentStatus"
+ placeholder="璇烽�夋嫨鍗曟嵁鐘舵��"
+ clearable
+ style="width: 180px"
+ >
+ <el-option label="鑽夌" value="draft" />
+ <el-option label="宸叉彁浜�" value="submitted" />
+ <el-option label="宸插鏍�" value="approved" />
+ </el-select>
+ <span class="search_title ml10">宸ヨ祫鏈堜唤锛�</span>
+ <el-date-picker
+ v-model="searchForm.payMonth"
+ type="month"
+ value-format="YYYY-MM"
+ format="YYYY-MM"
+ placeholder="璇烽�夋嫨宸ヨ祫鏈堜唤"
+ style="width: 180px"
+ clearable
+ @change="handleQuery"
+ />
+ <span class="search_title ml10">瀹℃牳鐘舵�侊細</span>
+ <el-select
+ v-model="searchForm.approvalStatus"
+ placeholder="璇烽�夋嫨瀹℃牳鐘舵��"
+ clearable
+ style="width: 180px"
+ >
+ <el-option label="寰呭鏍�" value="pending" />
+ <el-option label="宸查�氳繃" value="passed" />
+ <el-option label="宸查┏鍥�" value="rejected" />
+ </el-select>
+ <el-button type="primary" @click="handleQuery" style="margin-left: 10px">
鎼滅储
</el-button>
- </div>
- <div>
- <el-button @click="handleExport"
- style="margin-right: 10px">瀵煎嚭</el-button>
- <el-button type="primary"
- @click="openForm('add')">鏂板鍙拌处</el-button>
- <el-button type="danger"
- plain
- @click="handleDelete">鍒犻櫎</el-button>
+ <el-button @click="handleReset">閲嶇疆</el-button>
</div>
</div>
<div class="table_list">
- <PIMTable rowKey="id"
- :column="tableColumn"
- :tableData="tableData"
- :page="page"
- :isSelection="true"
- @selection-change="handleSelectionChange"
- :tableLoading="tableLoading"
- @pagination="pagination"
- :total="page.total"></PIMTable>
+ <div style="margin-bottom: 10px">
+ <el-button type="primary" @click="openForm('add')">鏂板缓宸ヨ祫琛�</el-button>
+ <el-button @click="handleDelete">鍒犻櫎</el-button>
+ <el-button @click="handleExport">瀵煎嚭</el-button>
+ </div>
+ <PIMTable
+ rowKey="id"
+ :column="tableColumn"
+ :tableData="tableData"
+ :page="page"
+ :isSelection="true"
+ :tableLoading="tableLoading"
+ @selection-change="handleSelectionChange"
+ @pagination="pagination"
+ :total="page.total"
+ />
</div>
- <form-dia v-model="dialogVisible"
- :operation-type="operationType"
- :row="currentRow"
- ref="formDia"
- @close="handleQuery"></form-dia>
+ <form-dia
+ v-model="dialogVisible"
+ :operation-type="operationType"
+ :row="currentRow"
+ ref="formDiaRef"
+ @close="handleQuery"
+ />
</div>
</template>
<script setup>
- import { Search } from "@element-plus/icons-vue";
- import {
- onMounted,
- ref,
- reactive,
- toRefs,
- getCurrentInstance,
- nextTick,
- } from "vue";
- import { ElMessageBox } from "element-plus";
- import dayjs from "dayjs";
- import FormDia from "./components/formDia.vue";
- import {
- monthlyStatisticsListPage,
- monthlyStatisticsDelete,
- } from "@/api/personnelManagement/monthlyStatistics.js";
+import {
+ onMounted,
+ ref,
+ reactive,
+ toRefs,
+ getCurrentInstance,
+ nextTick,
+} from "vue";
+import { ElMessageBox } from "element-plus";
+import FormDia from "./components/formDia.vue";
+import PIMTable from "@/components/PIMTable/PIMTable.vue";
+import {
+ monthlyStatisticsListPage,
+ monthlyStatisticsDelete,
+} from "@/api/personnelManagement/monthlyStatistics.js";
- const data = reactive({
- searchForm: {
- staffName: "",
- payDateStr: "",
- },
- });
+const data = reactive({
+ searchForm: {
+ title: "",
+ documentStatus: "",
+ payMonth: "",
+ approvalStatus: "",
+ },
+});
+const { searchForm } = toRefs(data);
- const { searchForm } = toRefs(data);
+const tableColumn = ref([
+ { label: "宸ヨ祫涓婚", prop: "title", minWidth: 140 },
+ { label: "宸ヨ祫鏈堜唤", prop: "payMonth", width: 120 },
+ { label: "鍗曟嵁鐘舵��", prop: "documentStatusName", width: 100 },
+ { label: "瀹℃牳鐘舵��", prop: "approvalStatusName", width: 100 },
+ { label: "宸ヨ祫鎬婚", prop: "totalAmount", width: 120 },
+ { label: "鏀粯閾惰", prop: "paymentBank", width: 120 },
+ { label: "鍙戞斁鏃堕棿", prop: "issueTime", width: 160 },
+ { label: "瀹℃壒浜哄憳", prop: "approver", width: 100 },
+ { label: "澶囨敞", prop: "remark", minWidth: 120 },
+ {
+ dataType: "action",
+ label: "鎿嶄綔",
+ align: "center",
+ fixed: "right",
+ width: 120,
+ operation: [
+ {
+ name: "缂栬緫",
+ type: "text",
+ clickFun: (row) => openForm("edit", row),
+ },
+ ],
+ },
+]);
- const tableColumn = ref([
- {
- label: "鍛樺伐濮撳悕",
- prop: "staffName",
- },
- {
- label: "閮ㄩ棬",
- prop: "deptName",
- width: 140,
- },
- {
- label: "鏈堜唤",
- prop: "payDate",
- },
- {
- label: "鍩烘湰宸ヨ祫",
- prop: "basicSalary",
- },
- {
- label: "璁′欢宸ヨ祫",
- prop: "pieceworkSalary",
- },
- {
- label: "璁℃椂宸ヨ祫",
- prop: "hourlySalary",
- },
- {
- label: "鍏朵粬鏀跺叆",
- prop: "otherIncome",
- },
- {
- label: "绀句繚涓汉",
- prop: "socialSecurityIndividuals",
- },
- {
- label: "鍏Н閲戜釜浜�",
- prop: "providentFundIndividuals",
- width: 140,
- },
- {
- label: "宸ヨ祫涓◣",
- prop: "personalIncomeTax",
- },
- {
- label: "鍏朵粬鏀嚭",
- prop: "otherDeductions",
- },
- {
- label: "搴斿彂宸ヨ祫",
- prop: "payableWages",
- },
- {
- label: "搴旀墸宸ヨ祫",
- prop: "deductibleWages",
- },
- {
- label: "瀹炲彂宸ヨ祫",
- prop: "actualWages",
- },
- {
- label: "澶囨敞",
- prop: "remark",
- width: 150,
- },
- {
- dataType: "action",
- label: "鎿嶄綔",
- align: "center",
- fixed: "right",
- width: 220,
- operation: [
- {
- name: "缂栬緫",
- type: "text",
- clickFun: row => {
- openForm("edit", row);
- },
- },
- // {
- // name: "鏌ョ湅",
- // type: "text",
- // clickFun: row => {
- // openForm("view", row);
- // },
- // },
- ],
- },
- ]);
+const tableData = ref([]);
+const selectedRows = ref([]);
+const tableLoading = ref(false);
+const page = reactive({
+ current: 1,
+ size: 10,
+ total: 0,
+});
+const formDiaRef = ref(null);
+const dialogVisible = ref(false);
+const operationType = ref("add");
+const currentRow = ref({});
+const { proxy } = getCurrentInstance();
- const tableData = ref([]);
- const selectedRows = ref([]);
- const tableLoading = ref(false);
- const page = reactive({
- current: 1,
- size: 100,
- total: 0,
- });
+const handleQuery = () => {
+ page.current = 1;
+ getList();
+};
- const formDia = ref();
- const dialogVisible = ref(false);
- const operationType = ref("add");
- const currentRow = ref({});
- const { proxy } = getCurrentInstance();
+const handleReset = () => {
+ searchForm.value.title = "";
+ searchForm.value.documentStatus = "";
+ searchForm.value.payMonth = "";
+ searchForm.value.approvalStatus = "";
+ page.current = 1;
+ getList();
+};
- // 鏌ヨ鍒楄〃
- /** 鎼滅储鎸夐挳鎿嶄綔 */
- const handleQuery = () => {
- page.current = 1;
- getList();
- };
+const pagination = (obj) => {
+ page.current = obj.page;
+ page.size = obj.limit;
+ getList();
+};
- const pagination = obj => {
- page.current = obj.page;
- page.size = obj.limit;
- getList();
- };
-
- const getList = () => {
- tableLoading.value = true;
- monthlyStatisticsListPage({ ...page, ...searchForm.value })
- .then(res => {
- tableLoading.value = false;
- tableData.value = res.data.records;
- page.total = res.data.total;
- })
- .catch(err => {
- tableLoading.value = false;
- });
- };
-
- // 琛ㄦ牸閫夋嫨鏁版嵁
- const handleSelectionChange = selection => {
- selectedRows.value = selection;
- };
-
- // 鎵撳紑寮规
- const openForm = (type, row) => {
- operationType.value = type;
- currentRow.value = row || {};
- dialogVisible.value = true;
- nextTick(() => {
- formDia.value?.openDialog(type, row);
+const getList = () => {
+ tableLoading.value = true;
+ monthlyStatisticsListPage({
+ ...searchForm.value,
+ current: page.current,
+ size: page.size,
+ })
+ .then((res) => {
+ tableLoading.value = false;
+ const records = res.data?.records ?? [];
+ // 鍏煎鍚庣瀛楁锛氳嫢鎺ュ彛浠嶈繑鍥炲彴璐︾粨鏋勶紝鍙湪姝ゅ仛鏄犲皠
+ tableData.value = records.map((item) => ({
+ ...item,
+ title: item.title ?? item.payDateStr ?? "-",
+ payMonth: item.payMonth ?? item.payDateStr ?? item.payDate ?? "-",
+ documentStatusName: item.documentStatusName ?? "-",
+ approvalStatusName: item.approvalStatusName ?? "-",
+ totalAmount: item.totalAmount ?? item.actualWages ?? "-",
+ paymentBank: item.paymentBank ?? "-",
+ issueTime: item.issueTime ?? item.createTime ?? "-",
+ approver: item.approver ?? "-",
+ }));
+ page.total = res.data?.total ?? 0;
+ })
+ .catch(() => {
+ tableLoading.value = false;
});
- };
+};
- // 鍒犻櫎
- const handleDelete = () => {
- let ids = [];
- if (selectedRows.value.length > 0) {
- ids = selectedRows.value.map(item => item.id);
- } else {
- proxy.$modal.msgWarning("璇烽�夋嫨鏁版嵁");
- return;
- }
- ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�", "鍒犻櫎", {
- confirmButtonText: "纭",
- cancelButtonText: "鍙栨秷",
- type: "warning",
- })
- .then(() => {
- monthlyStatisticsDelete(ids).then(res => {
- proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
- getList();
- });
- })
- .catch(() => {
- proxy.$modal.msg("宸插彇娑�");
- });
- };
+const handleSelectionChange = (selection) => {
+ selectedRows.value = selection;
+};
- // 瀵煎嚭
- const handleExport = () => {
- ElMessageBox.confirm("鏄惁纭瀵煎嚭浜哄憳钖祫鍙拌处锛�", "瀵煎嚭", {
- confirmButtonText: "纭",
- cancelButtonText: "鍙栨秷",
- type: "warning",
- })
- .then(() => {
- proxy.download(
- "/compensationPerformance/export",
- { ...searchForm.value, ...page },
- "浜哄憳钖祫鍙拌处.xlsx"
- );
- })
- .catch(() => {
- proxy.$modal.msg("宸插彇娑�");
- });
- };
-
- onMounted(() => {
- getList();
+const openForm = (type, row) => {
+ operationType.value = type;
+ currentRow.value = row || {};
+ dialogVisible.value = true;
+ nextTick(() => {
+ formDiaRef.value?.openDialog(type, row);
});
+};
+
+const handleDelete = () => {
+ if (!selectedRows.value?.length) {
+ proxy.$modal.msgWarning("璇烽�夋嫨瑕佸垹闄ょ殑鏁版嵁");
+ return;
+ }
+ const ids = selectedRows.value.map((item) => item.id);
+ ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�", "鍒犻櫎", {
+ confirmButtonText: "纭",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(() => {
+ monthlyStatisticsDelete(ids).then(() => {
+ proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+ getList();
+ });
+ })
+ .catch(() => {});
+};
+
+const handleExport = () => {
+ proxy.download(
+ "/compensationPerformance/export",
+ { ...searchForm.value, current: page.current, size: page.size },
+ "宸ヨ祫琛�.xlsx"
+ );
+};
+
+onMounted(() => {
+ getList();
+});
</script>
<style scoped>
- .search_form {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 20px;
- flex-wrap: wrap;
- gap: 10px;
- }
-
- .search_title {
- font-weight: 500;
- margin-right: 5px;
- }
-
- .ml10 {
- margin-left: 10px;
- }
-
- .table_list {
- margin-top: 20px;
- }
-
- .dialog-footer {
- text-align: right;
- }
-</style>
\ No newline at end of file
+.search_form {
+ margin-bottom: 20px;
+}
+.search_title {
+ font-weight: 500;
+ margin-right: 5px;
+}
+.ml10 {
+ margin-left: 10px;
+}
+.table_list {
+ margin-top: 20px;
+}
+</style>
--
Gitblit v1.9.3