<template>
|
<el-dialog v-model="visible"
|
title="工资表详情"
|
width="90%"
|
append-to-body>
|
<div class="detail-container">
|
<!-- 主表信息 -->
|
<el-descriptions title="基础信息"
|
:column="4"
|
border>
|
<el-descriptions-item label="工资主题">{{ mainInfo.salaryTitle }}</el-descriptions-item>
|
<el-descriptions-item label="工资月份">{{ mainInfo.salaryMonth }}</el-descriptions-item>
|
<el-descriptions-item label="工资总额">
|
<span class="text-danger">¥ {{ (mainInfo.totalSalary || 0).toFixed(2) }}</span>
|
</el-descriptions-item>
|
<el-descriptions-item label="状态">
|
<el-tag :type="getStatusType(mainInfo.status)">{{ getStatusLabel(mainInfo.status) }}</el-tag>
|
</el-descriptions-item>
|
<el-descriptions-item label="审核人">{{ mainInfo.auditUserName }}</el-descriptions-item>
|
<el-descriptions-item label="支付银行">{{ mainInfo.payBank || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="创建时间">{{ mainInfo.createTime }}</el-descriptions-item>
|
<el-descriptions-item label="备注">{{ mainInfo.remark || '-' }}</el-descriptions-item>
|
</el-descriptions>
|
<!-- 明细列表 -->
|
<div class="detail-table-wrap">
|
<div class="table-title">工资明细</div>
|
<el-table :data="detailList"
|
border
|
stripe
|
max-height="500">
|
<el-table-column label="部门"
|
prop="deptName"
|
minWidth="120" />
|
<el-table-column label="员工姓名"
|
prop="staffName"
|
minWidth="100" />
|
<el-table-column label="民族"
|
prop="nation"
|
width="80"
|
align="center" />
|
<el-table-column label="基本工资"
|
prop="basicSalary"
|
minWidth="100"
|
align="right" />
|
<el-table-column label="白班天数"
|
prop="dayDays"
|
width="90"
|
align="center" />
|
<el-table-column label="夜班天数"
|
prop="nightDays"
|
width="90"
|
align="center" />
|
<el-table-column label="餐补"
|
prop="mealAmount"
|
minWidth="100"
|
align="right" />
|
<el-table-column label="夜班补助"
|
prop="nightAmount"
|
minWidth="100"
|
align="right" />
|
<el-table-column label="其他收入"
|
prop="otherIncome"
|
minWidth="100"
|
align="right" />
|
<el-table-column label="社保个人"
|
prop="socialPersonal"
|
minWidth="100"
|
align="right" />
|
<el-table-column label="公积金个人"
|
prop="fundPersonal"
|
minWidth="110"
|
align="right" />
|
<el-table-column label="其他支出"
|
prop="otherDeduct"
|
minWidth="100"
|
align="right" />
|
<el-table-column label="社保补缴"
|
prop="socialSupplementAmount"
|
minWidth="100"
|
align="right" />
|
<el-table-column label="工资个税"
|
prop="salaryTax"
|
minWidth="100"
|
align="right" />
|
<el-table-column label="应发工资"
|
prop="grossSalary"
|
minWidth="110"
|
align="right">
|
<template #default="{ row }">
|
<span class="text-bold">{{ row.grossSalary }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="应扣工资"
|
prop="deductSalary"
|
minWidth="110"
|
align="right">
|
<template #default="{ row }">
|
<span class="text-danger">{{ row.deductSalary }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="实发工资"
|
prop="netSalary"
|
minWidth="110"
|
align="right">
|
<template #default="{ row }">
|
<span class="text-success text-bold">{{ row.netSalary }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="备注"
|
prop="remark"
|
minWidth="120"
|
show-overflow-tooltip />
|
</el-table>
|
</div>
|
</div>
|
<template #footer>
|
<el-button @click="visible = false">关 闭</el-button>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { ref } from "vue";
|
|
const visible = ref(false);
|
const mainInfo = ref({});
|
const detailList = ref([]);
|
|
const openDialog = row => {
|
mainInfo.value = row || {};
|
detailList.value = row.staffSalaryDetailList || [];
|
visible.value = true;
|
};
|
|
const getStatusType = status => {
|
const map = {
|
1: "info", // 草稿
|
2: "warning", // 待支付
|
3: "primary", // 待审核
|
4: "success", // 已发放
|
5: "danger", // 已驳回
|
};
|
return map[status] || "info";
|
};
|
|
const getStatusLabel = status => {
|
const map = {
|
1: "草稿",
|
2: "待支付",
|
3: "待审核",
|
4: "已发放",
|
5: "已驳回",
|
};
|
return map[status] || "未知";
|
};
|
|
defineExpose({ openDialog });
|
</script>
|
|
<style scoped lang="scss">
|
.detail-container {
|
padding: 10px;
|
}
|
.detail-table-wrap {
|
margin-top: 20px;
|
}
|
.table-title {
|
font-size: 16px;
|
font-weight: bold;
|
margin-bottom: 15px;
|
padding-left: 10px;
|
border-left: 4px solid #409eff;
|
}
|
.text-danger {
|
color: #f56c6c;
|
}
|
.text-success {
|
color: #67c23a;
|
}
|
.text-bold {
|
font-weight: bold;
|
}
|
</style>
|
