整合前端
This commit is contained in:
砂糖
641
ruoyi-ui/src/views/hrm/payroll/index.vue
Normal file
641
ruoyi-ui/src/views/hrm/payroll/index.vue
Normal file
@@ -0,0 +1,641 @@
|
||||
<template>
|
||||
<div class="hrm-page">
|
||||
<section class="stats-grid">
|
||||
<el-card class="metal-panel kpi-card" shadow="hover">
|
||||
<div class="kpi-title">薪酬方案数</div>
|
||||
<div class="kpi-value">{{ payPlanList.length }}</div>
|
||||
<div class="kpi-sub">启用 {{payPlanList.filter(i => i.status === 'active').length}} 个</div>
|
||||
</el-card>
|
||||
<el-card class="metal-panel kpi-card" shadow="hover">
|
||||
<div class="kpi-title">薪酬批次数</div>
|
||||
<div class="kpi-value">{{ payRunList.length }}</div>
|
||||
<div class="kpi-sub">审批中 {{payRunList.filter(i => i.status === 'pending').length}} 个</div>
|
||||
</el-card>
|
||||
<el-card class="metal-panel kpi-card" shadow="hover">
|
||||
<div class="kpi-title">工资条总额(应发)</div>
|
||||
<div class="kpi-value">￥{{formatNumber(payslipList.reduce((s, i) => s + (Number(i.amountGross) || 0), 0))}}
|
||||
</div>
|
||||
<div class="kpi-sub">实发 ￥{{formatNumber(payslipList.reduce((s, i) => s + (Number(i.amountNet) || 0), 0))}}
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="metal-panel kpi-card" shadow="hover">
|
||||
<div class="kpi-title">指标快照</div>
|
||||
<div class="kpi-value">{{ statList.length }}</div>
|
||||
<div class="kpi-sub">最新日期：{{ latestStatDate || '-' }}</div>
|
||||
</el-card>
|
||||
</section>
|
||||
|
||||
<section class="panel-grid triple">
|
||||
<el-card class="metal-panel" shadow="hover">
|
||||
<div slot="header" class="panel-header">
|
||||
<span>薪酬方案</span>
|
||||
<div class="actions-inline">
|
||||
<el-select v-model="payPlanQuery.status" size="mini" placeholder="状态" clearable style="width:120px"
|
||||
@change="loadPayPlan">
|
||||
<el-option label="启用" value="active" />
|
||||
<el-option label="草稿/停用" value="inactive" />
|
||||
</el-select>
|
||||
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openPlanDialog()">新增</el-button>
|
||||
<el-button size="mini" icon="el-icon-refresh" @click="loadPayPlan">刷新</el-button>
|
||||
</div>
|
||||
</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-column label="操作" width="140" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text" @click="openPlanDialog(scope.row)">编辑</el-button>
|
||||
<el-button size="mini" type="text" @click="delPlan(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<el-card class="metal-panel" shadow="hover">
|
||||
<div slot="header" class="panel-header">
|
||||
<span>薪酬批次</span>
|
||||
<div class="actions-inline">
|
||||
<el-select v-model="payRunQuery.status" size="mini" placeholder="状态" clearable style="width:120px"
|
||||
@change="loadPayRun">
|
||||
<el-option label="审批中" value="pending" />
|
||||
<el-option label="已完成" value="approved" />
|
||||
</el-select>
|
||||
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openRunDialog()">新增</el-button>
|
||||
<el-button size="mini" icon="el-icon-refresh" @click="loadPayRun">刷新</el-button>
|
||||
</div>
|
||||
</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-column label="操作" width="140" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text" @click="openRunDialog(scope.row)">编辑</el-button>
|
||||
<el-button size="mini" type="text" @click="delRun(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</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-input v-model="payslipQuery.empName" placeholder="员工姓名/工号" size="mini" style="width: 150px" clearable
|
||||
@keyup.enter.native="loadPayslip" />
|
||||
<el-button size="mini" type="primary" @click="loadPayslip">查询</el-button>
|
||||
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openPayslipDialog()">新增</el-button>
|
||||
<el-button size="mini" icon="el-icon-download" :loading="exportLoading"
|
||||
@click="exportPayslip">导出</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 @row-click="openPayslipDetail">
|
||||
<el-table-column label="员工" prop="empName" min-width="120" />
|
||||
<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-column label="操作" width="140" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text" @click.stop="openPayslipDialog(scope.row)">编辑</el-button>
|
||||
<el-button size="mini" type="text" @click.stop="delPayslipRow(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="table-half">
|
||||
<div class="table-title">指标快照</div>
|
||||
<div class="actions-inline" style="margin-bottom:6px">
|
||||
<el-select v-model="statQuery.statType" size="mini" placeholder="类型" clearable style="width:140px"
|
||||
@change="loadStatSnapshot">
|
||||
<el-option label="工资成本" value="cost" />
|
||||
<el-option label="人均成本" value="per_capita_cost" />
|
||||
<el-option label="奖金" value="bonus" />
|
||||
</el-select>
|
||||
</div>
|
||||
<el-table :data="statList" v-loading="statLoading" height="200" 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>
|
||||
|
||||
<el-dialog title="工资条详情" :visible.sync="payslipDetailVisible" width="520px" append-to-body>
|
||||
<el-descriptions :column="2" size="small" border>
|
||||
<el-descriptions-item label="员工">{{ payslipDetail.empName || payslipDetail.empId }}</el-descriptions-item>
|
||||
<el-descriptions-item label="批次">{{ payslipDetail.batchNo || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="应发">￥{{ formatNumber(payslipDetail.amountGross) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="实发">￥{{ formatNumber(payslipDetail.amountNet) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="状态">{{ payslipDetail.status || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="周期">{{ payslipDetail.period || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="发放日期">{{ payslipDetail.payDate || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="备注">{{ payslipDetail.remark || '-' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="payslipDetailVisible = false">关闭</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 方案弹窗 -->
|
||||
<el-dialog title="薪酬方案" :visible.sync="planDialogVisible" width="480px" append-to-body>
|
||||
<el-form ref="planFormRef" :model="planForm" :rules="planRules" label-width="100px" size="small">
|
||||
<el-form-item label="方案名称" prop="planName">
|
||||
<el-input v-model="planForm.planName" />
|
||||
</el-form-item>
|
||||
<el-form-item label="币种">
|
||||
<el-input v-model="planForm.currency" placeholder="如：CNY" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="planForm.status" placeholder="选择状态" style="width: 100%">
|
||||
<el-option label="启用" value="active" />
|
||||
<el-option label="停用/草稿" value="inactive" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="planForm.remark" type="textarea" :rows="2" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer">
|
||||
<el-button @click="planDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="planSubmitting" @click="submitPlan">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 批次弹窗 -->
|
||||
<el-dialog title="薪酬批次" :visible.sync="runDialogVisible" width="480px" append-to-body>
|
||||
<el-form ref="runFormRef" :model="runForm" :rules="runRules" label-width="100px" size="small">
|
||||
<el-form-item label="批次名称" prop="runName">
|
||||
<el-input v-model="runForm.runName" />
|
||||
</el-form-item>
|
||||
<el-form-item label="核算周期" prop="period">
|
||||
<el-input v-model="runForm.period" placeholder="如 2024-08" />
|
||||
</el-form-item>
|
||||
<el-form-item label="关联方案" prop="planId">
|
||||
<el-select v-model="runForm.planId" placeholder="选择方案" filterable style="width: 100%">
|
||||
<el-option v-for="plan in payPlanList" :key="plan.planId" :label="plan.planName" :value="plan.planId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="runForm.status" placeholder="选择状态" style="width: 100%">
|
||||
<el-option label="审批中" value="pending" />
|
||||
<el-option label="已完成" value="approved" />
|
||||
<el-option label="草稿" value="draft" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="runForm.remark" type="textarea" :rows="2" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer">
|
||||
<el-button @click="runDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="runSubmitting" @click="submitRun">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 工资条弹窗 -->
|
||||
<el-dialog title="工资条" :visible.sync="payslipDialogVisible" width="520px" append-to-body>
|
||||
<el-form ref="payslipFormRef" :model="payslipForm" :rules="payslipRules" label-width="110px" size="small">
|
||||
<el-form-item label="员工" prop="empId">
|
||||
<el-select v-model="payslipForm.empId" filterable placeholder="选择员工" style="width: 100%"
|
||||
:loading="employeeLoading">
|
||||
<el-option v-for="emp in employeeOptions" :key="emp.empId"
|
||||
:label="`${emp.empName || emp.empCode || emp.empId}`" :value="emp.empId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="批次号" prop="batchNo">
|
||||
<el-input v-model="payslipForm.batchNo" />
|
||||
</el-form-item>
|
||||
<el-form-item label="应发金额" prop="amountGross">
|
||||
<el-input-number v-model="payslipForm.amountGross" :min="0" :step="100" style="width:100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="实发金额" prop="amountNet">
|
||||
<el-input-number v-model="payslipForm.amountNet" :min="0" :step="100" style="width:100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="周期" prop="period">
|
||||
<el-input v-model="payslipForm.period" placeholder="如 2024-08" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="payslipForm.status" placeholder="选择状态" style="width: 100%">
|
||||
<el-option label="待发" value="pending" />
|
||||
<el-option label="已发" value="paid" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="payslipForm.remark" type="textarea" :rows="2" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer">
|
||||
<el-button @click="payslipDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="payslipSubmitting" @click="submitPayslip">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import {
|
||||
// listPayPlan,
|
||||
// getPayPlan,
|
||||
// addPayPlan,
|
||||
// updatePayPlan,
|
||||
// delPayPlan,
|
||||
// listPayRun,
|
||||
// getPayRun,
|
||||
// addPayRun,
|
||||
// updatePayRun,
|
||||
// delPayRun,
|
||||
// listPayslip,
|
||||
// getPayslip,
|
||||
// addPayslip,
|
||||
// updatePayslip,
|
||||
// delPayslip,
|
||||
// listEmployee,
|
||||
// listStatSnapshot
|
||||
// } from '@/api/hrm'
|
||||
|
||||
export default {
|
||||
name: 'HrmPayroll',
|
||||
data () {
|
||||
return {
|
||||
payPlanList: [],
|
||||
payPlanLoading: false,
|
||||
payPlanQuery: { status: undefined },
|
||||
payRunList: [],
|
||||
payRunLoading: false,
|
||||
payRunQuery: { status: undefined },
|
||||
payslipList: [],
|
||||
payslipLoading: false,
|
||||
payslipQuery: { batchNo: '', empName: '' },
|
||||
statList: [],
|
||||
statLoading: false,
|
||||
statQuery: { statType: undefined },
|
||||
payslipDetailVisible: false,
|
||||
payslipDetail: {},
|
||||
employeeOptions: [],
|
||||
employeeLoading: false,
|
||||
exportLoading: false,
|
||||
planDialogVisible: false,
|
||||
planSubmitting: false,
|
||||
planForm: {},
|
||||
planRules: { planName: [{ required: true, message: '请输入方案名称', trigger: 'blur' }] },
|
||||
runDialogVisible: false,
|
||||
runSubmitting: false,
|
||||
runForm: {},
|
||||
runRules: {
|
||||
runName: [{ required: true, message: '请输入批次名称', trigger: 'blur' }],
|
||||
period: [{ required: true, message: '请输入核算周期', trigger: 'blur' }],
|
||||
planId: [{ required: true, message: '请选择方案', trigger: 'change' }]
|
||||
},
|
||||
payslipDialogVisible: false,
|
||||
payslipSubmitting: false,
|
||||
payslipForm: {},
|
||||
payslipRules: {
|
||||
empId: [{ required: true, message: '请输入员工ID', trigger: 'blur' }],
|
||||
amountGross: [{ required: true, message: '请输入应发金额', trigger: 'blur' }],
|
||||
amountNet: [{ required: true, message: '请输入实发金额', trigger: 'blur' }],
|
||||
batchNo: [{ required: true, message: '请输入批次号', trigger: 'blur' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
latestStatDate () {
|
||||
const dates = (this.statList || []).map(i => i.statDate).filter(Boolean)
|
||||
if (!dates.length) return ''
|
||||
return dates.sort().pop()
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadPayPlan()
|
||||
this.loadPayRun()
|
||||
this.loadPayslip()
|
||||
this.loadStatSnapshot()
|
||||
this.loadEmployees()
|
||||
},
|
||||
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, status: this.payPlanQuery.status })
|
||||
.then(res => {
|
||||
this.payPlanList = res.rows || []
|
||||
})
|
||||
.finally(() => {
|
||||
this.payPlanLoading = false
|
||||
})
|
||||
},
|
||||
loadPayRun () {
|
||||
this.payRunLoading = true
|
||||
// listPayRun({ pageNum: 1, pageSize: 50, status: this.payRunQuery.status })
|
||||
// .then(res => {
|
||||
// this.payRunList = res.rows || []
|
||||
// })
|
||||
// .finally(() => {
|
||||
// this.payRunLoading = false
|
||||
// })
|
||||
},
|
||||
loadPayslip () {
|
||||
this.payslipLoading = true
|
||||
// listPayslip({ pageNum: 1, pageSize: 50, batchNo: this.payslipQuery.batchNo, empName: this.payslipQuery.empName })
|
||||
// .then(res => {
|
||||
// this.payslipList = res.rows || []
|
||||
// })
|
||||
// .finally(() => {
|
||||
// this.payslipLoading = false
|
||||
// })
|
||||
},
|
||||
loadStatSnapshot () {
|
||||
this.statLoading = true
|
||||
listStatSnapshot({ pageNum: 1, pageSize: 50, statType: this.statQuery.statType })
|
||||
.then(res => {
|
||||
this.statList = res.rows || []
|
||||
})
|
||||
.finally(() => {
|
||||
this.statLoading = false
|
||||
})
|
||||
},
|
||||
loadEmployees () {
|
||||
this.employeeLoading = true
|
||||
listEmployee({ pageNum: 1, pageSize: 500 })
|
||||
.then(res => {
|
||||
this.employeeOptions = res.rows || []
|
||||
})
|
||||
.finally(() => {
|
||||
this.employeeLoading = false
|
||||
})
|
||||
},
|
||||
openPayslipDetail (row) {
|
||||
this.payslipDetail = { ...row }
|
||||
this.payslipDetailVisible = true
|
||||
},
|
||||
// 方案 CRUD
|
||||
openPlanDialog (row) {
|
||||
this.planForm = row ? { ...row } : { planName: '', currency: 'CNY', status: 'active', remark: '' }
|
||||
this.planDialogVisible = true
|
||||
this.$nextTick(() => this.$refs.planFormRef && this.$refs.planFormRef.clearValidate())
|
||||
},
|
||||
submitPlan () {
|
||||
this.$refs.planFormRef.validate(valid => {
|
||||
if (!valid) return
|
||||
this.planSubmitting = true
|
||||
const api = this.planForm.planId ? updatePayPlan : addPayPlan
|
||||
api(this.planForm)
|
||||
.then(() => {
|
||||
this.$message.success('已保存')
|
||||
this.planDialogVisible = false
|
||||
this.loadPayPlan()
|
||||
})
|
||||
.finally(() => {
|
||||
this.planSubmitting = false
|
||||
})
|
||||
})
|
||||
},
|
||||
delPlan (row) {
|
||||
this.$confirm('确认删除该方案吗？', '提示', { type: 'warning' }).then(() => {
|
||||
delPayPlan(row.planId).then(() => {
|
||||
this.$message.success('已删除')
|
||||
this.loadPayPlan()
|
||||
})
|
||||
})
|
||||
},
|
||||
// 批次 CRUD
|
||||
openRunDialog (row) {
|
||||
this.runForm = row
|
||||
? { ...row }
|
||||
: { runName: '', period: '', planId: this.payPlanList[0]?.planId, status: 'pending', remark: '' }
|
||||
this.runDialogVisible = true
|
||||
this.$nextTick(() => this.$refs.runFormRef && this.$refs.runFormRef.clearValidate())
|
||||
},
|
||||
submitRun () {
|
||||
this.$refs.runFormRef.validate(valid => {
|
||||
if (!valid) return
|
||||
this.runSubmitting = true
|
||||
const api = this.runForm.runId ? updatePayRun : addPayRun
|
||||
api(this.runForm)
|
||||
.then(() => {
|
||||
this.$message.success('已保存')
|
||||
this.runDialogVisible = false
|
||||
this.loadPayRun()
|
||||
})
|
||||
.finally(() => {
|
||||
this.runSubmitting = false
|
||||
})
|
||||
})
|
||||
},
|
||||
delRun (row) {
|
||||
this.$confirm('确认删除该批次吗？', '提示', { type: 'warning' }).then(() => {
|
||||
delPayRun(row.runId).then(() => {
|
||||
this.$message.success('已删除')
|
||||
this.loadPayRun()
|
||||
})
|
||||
})
|
||||
},
|
||||
// 工资条 CRUD
|
||||
openPayslipDialog (row) {
|
||||
this.payslipForm = row
|
||||
? { ...row }
|
||||
: {
|
||||
empId: '',
|
||||
batchNo: '',
|
||||
amountGross: 0,
|
||||
amountNet: 0,
|
||||
period: '',
|
||||
status: 'pending',
|
||||
remark: ''
|
||||
}
|
||||
this.payslipDialogVisible = true
|
||||
this.$nextTick(() => this.$refs.payslipFormRef && this.$refs.payslipFormRef.clearValidate())
|
||||
},
|
||||
submitPayslip () {
|
||||
this.$refs.payslipFormRef.validate(valid => {
|
||||
if (!valid) return
|
||||
this.payslipSubmitting = true
|
||||
const api = this.payslipForm.slipId ? updatePayslip : addPayslip
|
||||
api(this.payslipForm)
|
||||
.then(() => {
|
||||
this.$message.success('已保存')
|
||||
this.payslipDialogVisible = false
|
||||
this.loadPayslip()
|
||||
})
|
||||
.finally(() => {
|
||||
this.payslipSubmitting = false
|
||||
})
|
||||
})
|
||||
},
|
||||
delPayslipRow (row) {
|
||||
this.$confirm('确认删除该工资条吗？', '提示', { type: 'warning' }).then(() => {
|
||||
delPayslip(row.slipId).then(() => {
|
||||
this.$message.success('已删除')
|
||||
this.loadPayslip()
|
||||
})
|
||||
})
|
||||
},
|
||||
exportPayslip () {
|
||||
if (!this.payslipList.length) {
|
||||
this.$message.info('暂无可导出的数据')
|
||||
return
|
||||
}
|
||||
this.exportLoading = true
|
||||
try {
|
||||
const headers = ['员工', '批次号', '应发', '实发', '周期', '状态', '发放日期', '备注']
|
||||
const rows = this.payslipList.map(i => [
|
||||
i.empName || i.empId || '',
|
||||
i.batchNo || '',
|
||||
i.amountGross || '',
|
||||
i.amountNet || '',
|
||||
i.period || '',
|
||||
i.status || '',
|
||||
i.payDate || '',
|
||||
(i.remark || '').replace(/\r?\n/g, ' ')
|
||||
])
|
||||
const tableRows = [headers, ...rows]
|
||||
.map(
|
||||
r =>
|
||||
'<tr>' +
|
||||
r
|
||||
.map(v => `<td style="mso-number-format:'\\@';">${String(v).replace(/</g, '<').replace(/>/g, '>')}</td>`)
|
||||
.join('') +
|
||||
'</tr>'
|
||||
)
|
||||
.join('')
|
||||
const html = `<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta charset="UTF-8"></head><body><table>${tableRows}</table></body></html>`
|
||||
const blob = new Blob([html], { type: 'application/vnd.ms-excel;charset=utf-8;' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = `payslips_${Date.now()}.xls`
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
} finally {
|
||||
this.exportLoading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.hrm-page {
|
||||
padding: 16px 20px 32px;
|
||||
background: #f8f9fb;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.kpi-card {
|
||||
.kpi-title {
|
||||
font-size: 13px;
|
||||
color: #7a7d85;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.kpi-value {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #303133;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.kpi-sub {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.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) {
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.panel-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.dual-tables {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user