<template>
|
<div class="app-container">
|
<div class="search_form">
|
<div>
|
<span class="search_title">主题：</span>
|
<el-input
|
v-model="searchForm.salaryTitle"
|
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>
|
<el-button @click="handleReset">重置</el-button>
|
</div>
|
</div>
|
<div class="table_list">
|
<div style="margin-bottom: 10px">
|
<el-button type="primary" @click="openForm('add')">新建工资表</el-button>
|
<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="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 type="primary" :loading="issueLoading" @click="confirmIssue">
|
确定
|
</el-button>
|
<el-button @click="issueDialogVisible = false">取消</el-button>
|
</template>
|
</el-dialog>
|
<audit-dia
|
v-model="auditDialogVisible"
|
:row="auditRow"
|
@close="auditDialogVisible = false"
|
@success="handleAuditSuccess"
|
/>
|
</div>
|
</template>
|
|
<script setup>
|
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 AuditDia from "./components/auditDia.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: {
|
salaryTitle: "",
|
status: "",
|
salaryMonth: "",
|
},
|
});
|
const { searchForm } = toRefs(data);
|
|
const tableColumn = ref([
|
{ label: "工资主题", prop: "salaryTitle", minWidth: 140 },
|
{ label: "工资月份", prop: "salaryMonth", width: 120 },
|
{
|
label: "状态",
|
prop: "statusName",
|
width: 110,
|
dataType: "tag",
|
formatType: (status) => {
|
const statusMap = {
|
"草稿": "info",
|
"审核未通过": "danger",
|
"待审核": "warning",
|
"待发放": "primary",
|
"已发放": "success"
|
};
|
return statusMap[status] || "info";
|
}
|
},
|
{ 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",
|
disabled: (row) => Number(row?.status) !== 1 && Number(row?.status) !== 2,
|
clickFun: (row) => openForm("edit", row),
|
},
|
{
|
name: "审核",
|
type: "text",
|
disabled: (row) => Number(row?.status) !== 3,
|
clickFun: (row) => openAudit(row),
|
},
|
{
|
name: "发放",
|
type: "text",
|
disabled: (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 auditRow = ref(null);
|
const auditDiaRef = ref(null);
|
|
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 handleQuery = () => {
|
page.current = 1;
|
getList();
|
};
|
|
const handleReset = () => {
|
searchForm.value.salaryTitle = "";
|
searchForm.value.status = "";
|
searchForm.value.salaryMonth = "";
|
page.current = 1;
|
getList();
|
};
|
|
const pagination = (obj) => {
|
page.current = obj.page;
|
page.size = obj.limit;
|
getList();
|
};
|
|
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 ?? [];
|
console.log('列表接口返回数据:', records);
|
// 兼容后端字段：若接口仍返回台账结构，可在此做映射
|
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 handleSelectionChange = (selection) => {
|
selectedRows.value = selection;
|
};
|
|
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) => {
|
console.log('打开审核，传入的数据:', row);
|
auditRow.value = row || null;
|
auditDialogVisible.value = true;
|
nextTick(() => {
|
auditDiaRef.value?.openDialog(row);
|
});
|
};
|
|
const handleAuditSuccess = () => {
|
getList();
|
};
|
|
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 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 {
|
margin-bottom: 20px;
|
}
|
.search_title {
|
font-weight: 500;
|
margin-right: 5px;
|
}
|
.ml10 {
|
margin-left: 10px;
|
}
|
.table_list {
|
margin-top: 20px;
|
}
|
</style>
|
