From e756e3cc5ddd0ddb42c5f00d6bb3eee76ba73e6f Mon Sep 17 00:00:00 2001
From: ZN <zhang_12370@163.com>
Date: 星期一, 09 三月 2026 14:14:24 +0800
Subject: [PATCH] feat(project-type): 优化附件管理和界面交互
---
src/views/personnelManagement/monthlyStatistics/index.vue | 667 ++++++++++++++++++++++++++++++++-----------------------
1 files changed, 391 insertions(+), 276 deletions(-)
diff --git a/src/views/personnelManagement/monthlyStatistics/index.vue b/src/views/personnelManagement/monthlyStatistics/index.vue
index 741a4b7..40d450b 100644
--- a/src/views/personnelManagement/monthlyStatistics/index.vue
+++ b/src/views/personnelManagement/monthlyStatistics/index.vue
@@ -2,302 +2,417 @@
<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.status" placeholder="璇烽�夋嫨鐘舵��" clearable style="width: 180px">
+ <el-option label="鑽夌" :value="1" />
+ <el-option label="瀹℃牳鏈�氳繃" :value="2" />
+ <el-option label="寰呭鏍�" :value="3" />
+ <el-option label="寰呭彂鏀�" :value="4" />
+ <el-option label="宸插彂鏀�" :value="5" />
+ </el-select>
+ <span class="search_title ml10">宸ヨ祫鏈堜唤锛�</span>
+ <el-date-picker
+ v-model="searchForm.salaryMonth"
+ type="month"
+ value-format="YYYY-MM"
+ format="YYYY-MM"
+ placeholder="璇烽�夋嫨宸ヨ祫鏈堜唤"
+ style="width: 180px"
+ clearable
+ @change="handleQuery"
+ />
+ <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="openBankSetting">璁剧疆閾惰</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"
+ />
+ <bank-setting-dia
+ v-model="bankDialogVisible"
+ ref="bankDiaRef"
+ @saved="handleBankSaved"
+ />
+ <el-dialog v-model="issueDialogVisible" title="宸ヨ祫鍙戞斁" width="720px">
+ <el-form label-position="top">
+ <el-form-item label="鍙戞斁閾惰" required>
+ <el-select
+ v-model="issueForm.bank"
+ placeholder="璇烽�夋嫨鍙戞斁閾惰"
+ clearable
+ filterable
+ style="width: 100%"
+ >
+ <el-option v-for="b in issueBankOptions" :key="b" :label="b" :value="b" />
+ </el-select>
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <el-button @click="issueDialogVisible = false">鍙栨秷</el-button>
+ <el-button type="primary" :loading="issueLoading" @click="confirmIssue">
+ 纭畾
+ </el-button>
+ </template>
+ </el-dialog>
+ <el-dialog v-model="auditDialogVisible" title="宸ヨ祫瀹℃牳" width="720px">
+ <el-form label-position="top">
+ <el-form-item label="瀹℃牳缁撴灉" required>
+ <el-radio-group v-model="auditForm.result">
+ <el-radio :value="4">閫氳繃</el-radio>
+ <el-radio :value="2">涓嶉�氳繃</el-radio>
+ </el-radio-group>
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <el-button @click="auditDialogVisible = false">鍙栨秷</el-button>
+ <el-button type="primary" :loading="auditLoading" @click="confirmAudit">
+ 纭畾
+ </el-button>
+ </template>
+ </el-dialog>
</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,
+ computed,
+ ref,
+ reactive,
+ toRefs,
+ getCurrentInstance,
+ nextTick,
+} from "vue";
+import { ElMessageBox } from "element-plus";
+import Cookies from "js-cookie";
+import FormDia from "./components/formDia.vue";
+import BankSettingDia from "./components/bankSettingDia.vue";
+import PIMTable from "@/components/PIMTable/PIMTable.vue";
+import { bankList } from "@/api/personnelManagement/bank.js";
+import {
+ staffSalaryMainListPage,
+ staffSalaryMainDelete,
+ staffSalaryMainUpdate,
+} from "@/api/personnelManagement/staffSalaryMain.js";
- const data = reactive({
- searchForm: {
- staffName: "",
- payDateStr: "",
- },
+const data = reactive({
+ searchForm: {
+ title: "",
+ status: "",
+ salaryMonth: "",
+ },
+});
+const { searchForm } = toRefs(data);
+
+const tableColumn = ref([
+ { label: "宸ヨ祫涓婚", prop: "salaryTitle", minWidth: 140 },
+ { label: "宸ヨ祫鏈堜唤", prop: "salaryMonth", width: 120 },
+ { label: "鐘舵��", prop: "statusName", width: 110 },
+ { label: "宸ヨ祫鎬婚", prop: "totalSalary", width: 120 },
+ { label: "鏀粯閾惰", prop: "payBank", width: 120 },
+ { label: "瀹℃牳浜�", prop: "auditUserName", width: 110 },
+ { label: "澶囨敞", prop: "remark", minWidth: 120 },
+ {
+ dataType: "action",
+ label: "鎿嶄綔",
+ align: "center",
+ fixed: "right",
+ width: 180,
+ operation: [
+ {
+ name: "缂栬緫",
+ type: "text",
+ showHide: (row) => Number(row?.status) === 1 || Number(row?.status) === 2,
+ clickFun: (row) => openForm("edit", row),
+ },
+ {
+ name: "瀹℃牳",
+ type: "text",
+ showHide: (row) => Number(row?.status) === 3,
+ clickFun: (row) => openAudit(row),
+ },
+ {
+ name: "鍙戞斁",
+ type: "text",
+ showHide: (row) => Number(row?.status) === 4,
+ clickFun: (row) => openIssue(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 bankSetting = ref({});
+const bankDialogVisible = ref(false);
+const bankDiaRef = ref(null);
+const issueDialogVisible = ref(false);
+const issueLoading = ref(false);
+const issueRow = ref(null);
+const issueForm = reactive({ bank: "" });
+const auditDialogVisible = ref(false);
+const auditLoading = ref(false);
+const auditRow = ref(null);
+const auditForm = reactive({ result: 4 }); // 4=閫氳繃(寰呭彂鏀�) 2=涓嶉�氳繃
+
+const issueBankOptions = computed(() => {
+ const options = Array.isArray(bankSetting.value?.options) ? bankSetting.value.options : [];
+ return options
+ .map((v) => (v == null ? "" : String(v).trim()))
+ .filter((v) => v !== "");
+});
+
+const statusName = (s) => {
+ const n = Number(s);
+ return (
+ {
+ 1: "鑽夌",
+ 2: "瀹℃牳鏈�氳繃",
+ 3: "寰呭鏍�",
+ 4: "寰呭彂鏀�",
+ 5: "宸插彂鏀�",
+ }[n] || "-"
+ );
+};
+
+const loadBankSetting = () => {
+ return bankList().then((res) => {
+ const list = Array.isArray(res?.data) ? res.data : [];
+ const options = list
+ .map((b) => (b?.bankName == null ? "" : String(b.bankName).trim()))
+ .filter((v) => v !== "");
+ bankSetting.value = { options, defaultBank: "" };
});
+};
- const { searchForm } = toRefs(data);
+const handleQuery = () => {
+ page.current = 1;
+ getList();
+};
- 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 handleReset = () => {
+ searchForm.value.title = "";
+ searchForm.value.status = "";
+ searchForm.value.salaryMonth = "";
+ page.current = 1;
+ getList();
+};
- const tableData = ref([]);
- const selectedRows = ref([]);
- const tableLoading = ref(false);
- const page = reactive({
- current: 1,
- size: 100,
- total: 0,
- });
+const pagination = (obj) => {
+ page.current = obj.page;
+ page.size = obj.limit;
+ getList();
+};
- const formDia = ref();
- const dialogVisible = ref(false);
- const operationType = ref("add");
- const currentRow = ref({});
- const { proxy } = getCurrentInstance();
-
- // 鏌ヨ鍒楄〃
- /** 鎼滅储鎸夐挳鎿嶄綔 */
- const handleQuery = () => {
- page.current = 1;
- 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;
+ staffSalaryMainListPage({
+ ...searchForm.value,
+ current: page.current,
+ size: page.size,
+ })
+ .then((res) => {
+ tableLoading.value = false;
+ const records = res.data?.records ?? res.data?.list ?? [];
+ // 鍏煎鍚庣瀛楁锛氳嫢鎺ュ彛浠嶈繑鍥炲彴璐︾粨鏋勶紝鍙湪姝ゅ仛鏄犲皠
+ tableData.value = records.map((item) => ({
+ ...item,
+ salaryTitle: item.salaryTitle ?? "-",
+ salaryMonth: item.salaryMonth ?? "-",
+ statusName: statusName(item.status),
+ totalSalary: item.totalSalary ?? "-",
+ payBank: (item.payBank == null ? "" : String(item.payBank).trim()) || "-",
+ auditUserName: item.auditUserName ?? "-",
+ }));
+ page.total = res.data?.total ?? res.data?.count ?? 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 openBankSetting = () => {
+ bankDialogVisible.value = true;
+};
+
+const openAudit = (row) => {
+ auditRow.value = row || null;
+ auditForm.result = 4;
+ auditDialogVisible.value = true;
+};
+
+const openIssue = (row) => {
+ if (!issueBankOptions.value?.length) {
+ proxy?.$modal?.msgWarning?.("璇峰厛鍦ㄢ�滆缃摱琛屸�濅腑缁存姢鍙戞斁閾惰閫夐」");
+ return;
+ }
+ issueRow.value = row || null;
+ const current = row?.payBank && row.payBank !== "-" ? String(row.payBank).trim() : "";
+ issueForm.bank = current;
+ issueDialogVisible.value = true;
+};
+
+const confirmAudit = () => {
+ const row = auditRow.value;
+ if (!row?.id) {
+ auditDialogVisible.value = false;
+ return;
+ }
+ const username = Cookies.get("username") || "";
+ const userIdRaw = Cookies.get("userId");
+ const auditUserId = userIdRaw ? Number(userIdRaw) : undefined;
+ auditLoading.value = true;
+ staffSalaryMainUpdate({
+ id: row.id,
+ status: Number(auditForm.result) === 2 ? 2 : 4,
+ auditUserId,
+ auditUserName: username,
+ })
+ .then(() => {
+ proxy?.$modal?.msgSuccess?.("瀹℃牳鎴愬姛");
+ auditDialogVisible.value = false;
+ getList();
+ })
+ .finally(() => {
+ auditLoading.value = false;
+ });
+};
+
+const confirmIssue = () => {
+ const bank = issueForm.bank ? String(issueForm.bank).trim() : "";
+ if (!bank) {
+ proxy?.$modal?.msgWarning?.("璇烽�夋嫨鍙戞斁閾惰");
+ return;
+ }
+ const row = issueRow.value;
+ if (!row?.id) {
+ issueDialogVisible.value = false;
+ return;
+ }
+ issueLoading.value = true;
+ staffSalaryMainUpdate({
+ id: row.id,
+ payBank: bank,
+ status: 5,
+ })
+ .then(() => {
+ proxy?.$modal?.msgSuccess?.("鍙戞斁鎴愬姛");
+ issueDialogVisible.value = false;
+ getList();
+ })
+ .finally(() => {
+ issueLoading.value = false;
+ });
+};
+
+const handleBankSaved = () => {
+ loadBankSetting();
+ getList();
+};
+
+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(() => {
+ staffSalaryMainDelete(ids).then(() => {
+ proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+ getList();
+ });
+ })
+ .catch(() => {});
+};
+
+const handleExport = () => {
+ proxy.download(
+ "/compensationPerformance/export",
+ { ...searchForm.value, current: page.current, size: page.size },
+ "宸ヨ祫琛�.xlsx"
+ );
+};
+
+onMounted(() => {
+ loadBankSetting();
+ 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