hrm前端一版
This commit is contained in:
213
klp-ui/src/views/hrm/payroll/index.vue
Normal file
213
klp-ui/src/views/hrm/payroll/index.vue
Normal file
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<div class="hrm-page">
|
||||
<section class="panel-grid triple">
|
||||
<el-card class="metal-panel" shadow="hover">
|
||||
<div slot="header" class="panel-header">
|
||||
<span>薪酬方案</span>
|
||||
<el-button size="mini" icon="el-icon-refresh" @click="loadPayPlan">刷新</el-button>
|
||||
</div>
|
||||
<el-table :data="payPlanList" v-loading="payPlanLoading" height="320" stripe>
|
||||
<el-table-column label="方案" prop="planName" min-width="140" />
|
||||
<el-table-column label="币种" prop="currency" min-width="90" />
|
||||
<el-table-column label="状态" prop="status" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="statusType(scope.row.status)">{{ scope.row.status || '-' }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="描述" prop="remark" min-width="160" show-overflow-tooltip />
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<el-card class="metal-panel" shadow="hover">
|
||||
<div slot="header" class="panel-header">
|
||||
<span>薪酬批次</span>
|
||||
<el-button size="mini" icon="el-icon-refresh" @click="loadPayRun">刷新</el-button>
|
||||
</div>
|
||||
<el-table :data="payRunList" v-loading="payRunLoading" height="320" stripe>
|
||||
<el-table-column label="批次" prop="runName" min-width="140" />
|
||||
<el-table-column label="周期" prop="period" min-width="120" />
|
||||
<el-table-column label="状态" prop="status" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="statusType(scope.row.status)">{{ scope.row.status || '-' }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" prop="remark" min-width="160" show-overflow-tooltip />
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<el-card class="metal-panel" shadow="hover">
|
||||
<div slot="header" class="panel-header">
|
||||
<span>工资条 & 指标</span>
|
||||
<div class="actions-inline">
|
||||
<el-input
|
||||
v-model="payslipQuery.batchNo"
|
||||
placeholder="批次编号"
|
||||
size="mini"
|
||||
style="width: 150px"
|
||||
clearable
|
||||
@keyup.enter.native="loadPayslip"
|
||||
/>
|
||||
<el-button size="mini" type="primary" @click="loadPayslip">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dual-tables">
|
||||
<div class="table-half">
|
||||
<div class="table-title">工资条</div>
|
||||
<el-table :data="payslipList" v-loading="payslipLoading" height="230" stripe>
|
||||
<el-table-column label="员工" prop="empId" min-width="100" />
|
||||
<el-table-column label="应发" prop="amountGross" min-width="100">
|
||||
<template slot-scope="scope">￥{{ formatNumber(scope.row.amountGross) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="实发" prop="amountNet" min-width="100">
|
||||
<template slot-scope="scope">￥{{ formatNumber(scope.row.amountNet) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" prop="status" min-width="90">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="statusType(scope.row.status)" size="mini">{{ scope.row.status || '-' }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="table-half">
|
||||
<div class="table-title">指标快照</div>
|
||||
<el-table :data="statList" v-loading="statLoading" height="230" stripe>
|
||||
<el-table-column label="类型" prop="statType" min-width="120" />
|
||||
<el-table-column label="维度" prop="dimension" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column label="数值" prop="value" min-width="100" />
|
||||
<el-table-column label="日期" prop="statDate" min-width="120" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listPayPlan, listPayRun, listPayslip, listStatSnapshot } from '@/api/hrm'
|
||||
|
||||
export default {
|
||||
name: 'HrmPayroll',
|
||||
data() {
|
||||
return {
|
||||
payPlanList: [],
|
||||
payPlanLoading: false,
|
||||
payRunList: [],
|
||||
payRunLoading: false,
|
||||
payslipList: [],
|
||||
payslipLoading: false,
|
||||
payslipQuery: { batchNo: '' },
|
||||
statList: [],
|
||||
statLoading: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadPayPlan()
|
||||
this.loadPayRun()
|
||||
this.loadPayslip()
|
||||
this.loadStatSnapshot()
|
||||
},
|
||||
methods: {
|
||||
statusType(status) {
|
||||
if (!status) return 'info'
|
||||
const map = { pending: 'warning', draft: 'info', approved: 'success', rejected: 'danger', active: 'success', inactive: 'info' }
|
||||
return map[status] || 'info'
|
||||
},
|
||||
formatNumber(num) {
|
||||
if (num === null || num === undefined || isNaN(num)) return '0'
|
||||
return Number(num).toLocaleString(undefined, { maximumFractionDigits: 2 })
|
||||
},
|
||||
loadPayPlan() {
|
||||
this.payPlanLoading = true
|
||||
listPayPlan({ pageNum: 1, pageSize: 50 })
|
||||
.then(res => {
|
||||
this.payPlanList = res.rows || []
|
||||
})
|
||||
.finally(() => {
|
||||
this.payPlanLoading = false
|
||||
})
|
||||
},
|
||||
loadPayRun() {
|
||||
this.payRunLoading = true
|
||||
listPayRun({ pageNum: 1, pageSize: 50 })
|
||||
.then(res => {
|
||||
this.payRunList = res.rows || []
|
||||
})
|
||||
.finally(() => {
|
||||
this.payRunLoading = false
|
||||
})
|
||||
},
|
||||
loadPayslip() {
|
||||
this.payslipLoading = true
|
||||
listPayslip({ pageNum: 1, pageSize: 50, batchNo: this.payslipQuery.batchNo })
|
||||
.then(res => {
|
||||
this.payslipList = res.rows || []
|
||||
})
|
||||
.finally(() => {
|
||||
this.payslipLoading = false
|
||||
})
|
||||
},
|
||||
loadStatSnapshot() {
|
||||
this.statLoading = true
|
||||
listStatSnapshot({ pageNum: 1, pageSize: 50 })
|
||||
.then(res => {
|
||||
this.statList = res.rows || []
|
||||
})
|
||||
.finally(() => {
|
||||
this.statLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.hrm-page {
|
||||
padding: 16px 20px 32px;
|
||||
background: #f8f9fb;
|
||||
}
|
||||
.panel-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 14px;
|
||||
}
|
||||
.metal-panel {
|
||||
border: 1px solid #d7d9df;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
}
|
||||
.panel-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
.actions-inline {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.dual-tables {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
.table-half {
|
||||
border: 1px dashed #e6e8ed;
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
.table-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.panel-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.dual-tables {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user