前后端代码解构
This commit is contained in:
@@ -1,184 +0,0 @@
|
||||
<template>
|
||||
<div class="salary-container">
|
||||
<!-- 操作栏 -->
|
||||
<div class="operation-bar">
|
||||
<el-button type="primary" @click="showUploadDialog">新增计算</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 上传弹窗组件 -->
|
||||
<SalaryUploadDialog
|
||||
:visible.sync="uploadVisible"
|
||||
@submit="handleCalculate"
|
||||
@closed="handleDialogClosed"
|
||||
/>
|
||||
|
||||
<!-- 计算结果展示 -->
|
||||
<div class="result-area">
|
||||
<!-- 历史记录 -->
|
||||
<div class="history-section" v-if="!showCurrentResult">
|
||||
<h3>薪资列表</h3>
|
||||
<el-table :data="historyData" stripe>
|
||||
<el-table-column prop="nickName" label="员工"></el-table-column>
|
||||
<el-table-column prop="baseSalary" label="基础工资"></el-table-column>
|
||||
<el-table-column prop="realSalary" label="实发工资"></el-table-column>
|
||||
<el-table-column prop="payTime" label="发薪时间" width="120"></el-table-column>
|
||||
<el-table-column label="操作" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="showDetail(scope.row)">查看</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 本次结果 -->
|
||||
<div class="current-result" v-else>
|
||||
<h3>{{ currentMonth }} 薪资计算结果</h3>
|
||||
<el-table :data="currentResult" border>
|
||||
<el-table-column prop="name" label="姓名"></el-table-column>
|
||||
<el-table-column prop="baseSalary" label="基本工资"></el-table-column>
|
||||
<el-table-column prop="bonus" label="奖金"></el-table-column>
|
||||
<el-table-column prop="deduction" label="扣款"></el-table-column>
|
||||
<el-table-column prop="total" label="实发工资">
|
||||
<template slot-scope="scope">
|
||||
<span class="highlight">¥ {{scope.row.total}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="summary">
|
||||
<span>合计人数：{{currentResult.length}} 人</span>
|
||||
<span class="total-amount">总金额：¥ {{totalAmount}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SalaryUploadDialog from '../components/SalaryUploadDialog'
|
||||
import { calculateSalary, getCalcHistory, convertToDateString } from '@/api/oa/salary'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SalaryUploadDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
uploadVisible: false,
|
||||
currentResult: [],
|
||||
showCurrentResult: false,
|
||||
currentMonth: '',
|
||||
historyData: [],
|
||||
query: {
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
payTime: "2025-03-01"
|
||||
},
|
||||
StaffSalaryList: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
totalAmount() {
|
||||
return this.currentResult.reduce((sum, item) => sum + item.total, 0)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const firstDayOfLastMonth = new Date();
|
||||
firstDayOfLastMonth.setMonth(firstDayOfLastMonth.getMonth() - 1, 1);
|
||||
const firstDayStr = [
|
||||
firstDayOfLastMonth.getFullYear(),
|
||||
(firstDayOfLastMonth.getMonth() + 1).toString().padStart(2, '0'),
|
||||
'01'
|
||||
].join('-');
|
||||
this.getHistoryData(firstDayStr)
|
||||
},
|
||||
methods: {
|
||||
showUploadDialog() {
|
||||
this.uploadVisible = true
|
||||
},
|
||||
|
||||
async handleCalculate(params) {
|
||||
try {
|
||||
const { result } = await calculateSalary(params)
|
||||
this.currentResult = result
|
||||
this.currentMonth = params.month
|
||||
this.showCurrentResult = true
|
||||
|
||||
// 刷新历史数据
|
||||
const firstDayStr = convertToDateString(params.month)
|
||||
this.getHistoryData(firstDayStr)
|
||||
|
||||
this.$message.success('计算完成')
|
||||
} catch (error) {
|
||||
this.$message.error(error.message || '计算失败')
|
||||
}
|
||||
},
|
||||
|
||||
handleDialogClosed() {
|
||||
// 可在此处添加关闭后的清理逻辑
|
||||
},
|
||||
|
||||
// 获取计算历史
|
||||
async getHistoryData(monthStr) {
|
||||
try {
|
||||
const { rows } = await getCalcHistory({
|
||||
payTime: monthStr
|
||||
})
|
||||
this.historyData = rows
|
||||
} catch (error) {
|
||||
this.$message.error(error.message || '获取计算历史失败')
|
||||
}
|
||||
},
|
||||
|
||||
showDetail(row) {
|
||||
// 查看历史详情逻辑
|
||||
console.log('查看详情', row)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 保持原有样式不变 */
|
||||
.salary-container {
|
||||
padding: 20px;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.operation-bar {
|
||||
margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
.result-area {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.history-section h3,
|
||||
.current-result h3 {
|
||||
color: #303133;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.summary {
|
||||
margin-top: 20px;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
color: #67C23A;
|
||||
font-weight: bold;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #E6A23C;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
@@ -1,212 +0,0 @@
|
||||
<template>
|
||||
<div class="salary-container">
|
||||
<!-- 操作栏 -->
|
||||
<div class="operation-bar">
|
||||
<el-button type="primary" @click="showUploadDialog">新增计算</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 上传弹窗 -->
|
||||
<SalaryUploadDialog
|
||||
:visible.sync="uploadVisible"
|
||||
@submit="handleCalculate"
|
||||
@closed="handleDialogClosed"
|
||||
/>
|
||||
|
||||
<!-- 计算结果展示 -->
|
||||
<div class="result-area">
|
||||
<!-- 历史记录 -->
|
||||
<div class="history-section" v-if="!showCurrentResult">
|
||||
<h3>薪资列表</h3>
|
||||
<el-table :data="historyData" stripe>
|
||||
<el-table-column prop="nickName" label="员工"></el-table-column>
|
||||
<el-table-column prop="baseSalary" label="基础工资"></el-table-column>
|
||||
<el-table-column prop="realSalary" label="实发工资"></el-table-column>
|
||||
<el-table-column prop="payTime" label="发薪时间" width="120"></el-table-column>
|
||||
<el-table-column label="操作" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="showDetail(scope.row)">查看</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 本次结果 -->
|
||||
<div class="current-result" v-else>
|
||||
<h3>{{ currentMonth }} 薪资计算结果</h3>
|
||||
<el-table :data="currentResult" border>
|
||||
<el-table-column prop="name" label="姓名"></el-table-column>
|
||||
<el-table-column prop="baseSalary" label="基本工资"></el-table-column>
|
||||
<el-table-column prop="bonus" label="奖金"></el-table-column>
|
||||
<el-table-column prop="deduction" label="扣款"></el-table-column>
|
||||
<el-table-column prop="total" label="实发工资">
|
||||
<template slot-scope="scope">
|
||||
<span class="highlight">¥ {{scope.row.total}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="summary">
|
||||
<span>合计人数：{{currentResult.length}} 人</span>
|
||||
<span class="total-amount">总金额：¥ {{totalAmount}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SalaryUploadDialog from '../components/SalaryUploadDialog'
|
||||
import { calculateSalary, uploadOssFile, getWorkersCalcHistory, convertToDateString } from '@/api/oa/salary'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SalaryUploadDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
uploadVisible: false,
|
||||
isUploading: false,
|
||||
month: '',
|
||||
fileList: [],
|
||||
currentResult: [],
|
||||
showCurrentResult: false,
|
||||
currentMonth: '',
|
||||
historyData: [],
|
||||
filePath: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
canSubmit() {
|
||||
return this.month && this.fileList.length > 0
|
||||
},
|
||||
totalAmount() {
|
||||
return this.currentResult.reduce((sum, item) => sum + item.total, 0)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const firstDayOfLastMonth = new Date();
|
||||
firstDayOfLastMonth.setMonth(firstDayOfLastMonth.getMonth() - 1, 1);
|
||||
|
||||
const firstDayStr = [
|
||||
firstDayOfLastMonth.getFullYear(),
|
||||
(firstDayOfLastMonth.getMonth() + 1).toString().padStart(2, '0'),
|
||||
'01'
|
||||
].join('-');
|
||||
this.getHistoryData(firstDayStr)
|
||||
},
|
||||
methods: {
|
||||
showUploadDialog() {
|
||||
this.uploadVisible = true
|
||||
},
|
||||
|
||||
handleFileChange(file, fileList) {
|
||||
// 限制单个文件上传
|
||||
this.fileList = [fileList[fileList.length - 1]]
|
||||
},
|
||||
|
||||
async handleCalculate(params) {
|
||||
try {
|
||||
const { result } = await calculateSalary(params)
|
||||
this.currentResult = result
|
||||
this.currentMonth = params.month
|
||||
this.showCurrentResult = true
|
||||
|
||||
// 刷新历史数据
|
||||
const firstDayStr = convertToDateString(params.month)
|
||||
this.getHistoryData(firstDayStr)
|
||||
|
||||
this.$message.success('计算完成')
|
||||
} catch (error) {
|
||||
this.$message.error(error.message || '计算失败')
|
||||
}
|
||||
},
|
||||
|
||||
handleDialogClosed() {
|
||||
// 可在此处添加关闭后的清理逻辑
|
||||
},
|
||||
|
||||
// 上传文件
|
||||
async handleUpload() {
|
||||
const formData = new FormData()
|
||||
formData.append('file', this.fileList[0].raw)
|
||||
|
||||
const { data } = await uploadOssFile(formData)
|
||||
|
||||
const filePath = '/data' + data.url.split('/data')[1];
|
||||
this.filePath = filePath;
|
||||
message.success('上传成功');
|
||||
},
|
||||
|
||||
resetUpload() {
|
||||
this.fileList = []
|
||||
this.month = ''
|
||||
},
|
||||
|
||||
showDetail(row) {
|
||||
// 查看历史详情逻辑
|
||||
console.log('查看详情', row)
|
||||
},
|
||||
|
||||
// 获取计算历史
|
||||
async getHistoryData(monthStr) {
|
||||
try {
|
||||
const { rows } = await getWorkersCalcHistory({
|
||||
payTime: monthStr
|
||||
})
|
||||
this.historyData = rows
|
||||
} catch (error) {
|
||||
this.$message.error(error.message || '获取计算历史失败')
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.salary-container {
|
||||
padding: 20px;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.operation-bar {
|
||||
margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
.result-area {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.history-section h3,
|
||||
.current-result h3 {
|
||||
color: #303133;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.summary {
|
||||
margin-top: 20px;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
color: #67C23A;
|
||||
font-weight: bold;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #E6A23C;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.upload-demo {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user