292 lines
7.3 KiB
Vue
292 lines
7.3 KiB
Vue
<template>
|
|
<GiPageLayout>
|
|
<GiTable
|
|
row-key="id"
|
|
title="工资管理"
|
|
:data="dataList"
|
|
:columns="tableColumns"
|
|
:loading="loading"
|
|
:scroll="{ x: '100%', y: '100%', minWidth: 1600 }"
|
|
:pagination="pagination"
|
|
@page-change="onPageChange"
|
|
@page-size-change="onPageSizeChange"
|
|
@refresh="search"
|
|
>
|
|
<template #top>
|
|
<GiForm
|
|
v-model="searchForm"
|
|
search
|
|
:columns="queryFormColumns"
|
|
size="medium"
|
|
@search="search"
|
|
@reset="reset"
|
|
/>
|
|
</template>
|
|
|
|
<template #toolbar-left>
|
|
<a-space>
|
|
<a-button type="primary" @click="openAddModal">
|
|
<template #icon><icon-plus /></template>
|
|
<template #default>工资核算</template>
|
|
</a-button>
|
|
<a-button @click="exportSalary">
|
|
<template #icon><icon-download /></template>
|
|
<template #default>导出工资单</template>
|
|
</a-button>
|
|
</a-space>
|
|
</template>
|
|
|
|
<!-- 基本工资 -->
|
|
<template #baseSalary="{ record }">
|
|
<span class="font-medium text-blue-600">￥{{ record.baseSalary.toLocaleString() }}</span>
|
|
</template>
|
|
|
|
<!-- 实发工资 -->
|
|
<template #netSalary="{ record }">
|
|
<span class="font-medium text-green-600">￥{{ record.netSalary.toLocaleString() }}</span>
|
|
</template>
|
|
|
|
<!-- 状态 -->
|
|
<template #status="{ record }">
|
|
<a-tag :color="getStatusColor(record.status)">
|
|
{{ getStatusText(record.status) }}
|
|
</a-tag>
|
|
</template>
|
|
|
|
<!-- 操作列 -->
|
|
<template #action="{ record }">
|
|
<a-space>
|
|
<a-link @click="viewDetail(record)">详情</a-link>
|
|
<a-link @click="editRecord(record)">编辑</a-link>
|
|
<a-link @click="confirmSalary(record)" v-if="record.status === 'draft'">确认</a-link>
|
|
</a-space>
|
|
</template>
|
|
</GiTable>
|
|
</GiPageLayout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
import { Message } from '@arco-design/web-vue'
|
|
import type { TableColumnData } from '@arco-design/web-vue'
|
|
|
|
// 搜索表单
|
|
let searchForm = reactive({
|
|
userName: '',
|
|
deptName: '',
|
|
salaryMonth: '',
|
|
status: '',
|
|
page: 1,
|
|
size: 10
|
|
})
|
|
|
|
// 查询条件配置
|
|
const queryFormColumns = [
|
|
{
|
|
field: 'userName',
|
|
label: '员工姓名',
|
|
type: 'input' as const,
|
|
props: {
|
|
placeholder: '请输入员工姓名'
|
|
}
|
|
},
|
|
{
|
|
field: 'deptName',
|
|
label: '部门',
|
|
type: 'input' as const,
|
|
props: {
|
|
placeholder: '请输入部门名称'
|
|
}
|
|
},
|
|
{
|
|
field: 'status',
|
|
label: '状态',
|
|
type: 'select' as const,
|
|
props: {
|
|
placeholder: '请选择状态',
|
|
options: [
|
|
{ label: '草稿', value: 'draft' },
|
|
{ label: '已确认', value: 'confirmed' },
|
|
{ label: '已发放', value: 'paid' }
|
|
]
|
|
}
|
|
}
|
|
]
|
|
|
|
// 表格列配置
|
|
const tableColumns: TableColumnData[] = [
|
|
{ title: '员工姓名', dataIndex: 'userName', width: 120, fixed: 'left' },
|
|
{ title: '员工工号', dataIndex: 'userCode', width: 120 },
|
|
{ title: '部门', dataIndex: 'deptName', width: 120 },
|
|
{ title: '岗位', dataIndex: 'position', width: 120 },
|
|
{ title: '工资月份', dataIndex: 'salaryMonth', width: 100 },
|
|
{ title: '基本工资', dataIndex: 'baseSalary', slotName: 'baseSalary', width: 120 },
|
|
{ title: '岗位津贴', dataIndex: 'positionAllowance', width: 100 },
|
|
{ title: '绩效奖金', dataIndex: 'performanceBonus', width: 100 },
|
|
{ title: '加班费', dataIndex: 'overtimePay', width: 100 },
|
|
{ title: '其他补贴', dataIndex: 'otherAllowance', width: 100 },
|
|
{ title: '应发合计', dataIndex: 'grossSalary', width: 120 },
|
|
{ title: '个人所得税', dataIndex: 'personalTax', width: 100 },
|
|
{ title: '社保扣除', dataIndex: 'socialInsurance', width: 100 },
|
|
{ title: '公积金扣除', dataIndex: 'housingFund', width: 100 },
|
|
{ title: '其他扣除', dataIndex: 'otherDeduction', width: 100 },
|
|
{ title: '实发工资', dataIndex: 'netSalary', slotName: 'netSalary', width: 120 },
|
|
{ title: '状态', dataIndex: 'status', slotName: 'status', width: 100 },
|
|
{ title: '操作', slotName: 'action', width: 150, fixed: 'right' }
|
|
]
|
|
|
|
// 数据状态
|
|
const loading = ref(false)
|
|
const dataList = ref([
|
|
{
|
|
id: 1,
|
|
userName: '张三',
|
|
userCode: 'EMP001',
|
|
deptName: '技术部',
|
|
position: '前端工程师',
|
|
salaryMonth: '2024-01',
|
|
baseSalary: 12000,
|
|
positionAllowance: 2000,
|
|
performanceBonus: 3000,
|
|
overtimePay: 800,
|
|
otherAllowance: 500,
|
|
grossSalary: 18300,
|
|
personalTax: 1245,
|
|
socialInsurance: 1200,
|
|
housingFund: 960,
|
|
otherDeduction: 0,
|
|
netSalary: 14895,
|
|
status: 'confirmed'
|
|
},
|
|
{
|
|
id: 2,
|
|
userName: '李四',
|
|
userCode: 'EMP002',
|
|
deptName: '技术部',
|
|
position: '后端工程师',
|
|
salaryMonth: '2024-01',
|
|
baseSalary: 11000,
|
|
positionAllowance: 1800,
|
|
performanceBonus: 2500,
|
|
overtimePay: 600,
|
|
otherAllowance: 300,
|
|
grossSalary: 16200,
|
|
personalTax: 975,
|
|
socialInsurance: 1100,
|
|
housingFund: 880,
|
|
otherDeduction: 0,
|
|
netSalary: 13245,
|
|
status: 'paid'
|
|
},
|
|
{
|
|
id: 3,
|
|
userName: '王五',
|
|
userCode: 'EMP003',
|
|
deptName: '市场部',
|
|
position: '市场专员',
|
|
salaryMonth: '2024-01',
|
|
baseSalary: 8000,
|
|
positionAllowance: 1000,
|
|
performanceBonus: 1500,
|
|
overtimePay: 400,
|
|
otherAllowance: 200,
|
|
grossSalary: 11100,
|
|
personalTax: 445,
|
|
socialInsurance: 800,
|
|
housingFund: 640,
|
|
otherDeduction: 0,
|
|
netSalary: 9215,
|
|
status: 'draft'
|
|
}
|
|
])
|
|
|
|
const pagination = reactive({
|
|
current: 1,
|
|
pageSize: 10,
|
|
total: 3,
|
|
showTotal: true,
|
|
showPageSize: true
|
|
})
|
|
|
|
// 获取状态颜色
|
|
const getStatusColor = (status: string) => {
|
|
const colorMap: Record<string, string> = {
|
|
'draft': 'orange',
|
|
'confirmed': 'blue',
|
|
'paid': 'green'
|
|
}
|
|
return colorMap[status] || 'gray'
|
|
}
|
|
|
|
// 获取状态文本
|
|
const getStatusText = (status: string) => {
|
|
const textMap: Record<string, string> = {
|
|
'draft': '草稿',
|
|
'confirmed': '已确认',
|
|
'paid': '已发放'
|
|
}
|
|
return textMap[status] || status
|
|
}
|
|
|
|
// 搜索和重置
|
|
const search = async () => {
|
|
loading.value = true
|
|
// 模拟API请求
|
|
setTimeout(() => {
|
|
loading.value = false
|
|
}, 1000)
|
|
}
|
|
|
|
const reset = () => {
|
|
Object.assign(searchForm, {
|
|
userName: '',
|
|
deptName: '',
|
|
salaryMonth: '',
|
|
status: '',
|
|
page: 1,
|
|
size: 10
|
|
})
|
|
pagination.current = 1
|
|
search()
|
|
}
|
|
|
|
// 分页处理
|
|
const onPageChange = (page: number) => {
|
|
searchForm.page = page
|
|
pagination.current = page
|
|
search()
|
|
}
|
|
|
|
const onPageSizeChange = (size: number) => {
|
|
searchForm.size = size
|
|
searchForm.page = 1
|
|
pagination.pageSize = size
|
|
pagination.current = 1
|
|
search()
|
|
}
|
|
|
|
// 操作方法
|
|
const openAddModal = () => {
|
|
Message.info('工资核算功能开发中...')
|
|
}
|
|
|
|
const exportSalary = () => {
|
|
Message.info('导出工资单功能开发中...')
|
|
}
|
|
|
|
const viewDetail = (record: any) => {
|
|
Message.info(`查看工资详情: ${record.userName}`)
|
|
}
|
|
|
|
const editRecord = (record: any) => {
|
|
Message.info(`编辑工资: ${record.userName}`)
|
|
}
|
|
|
|
const confirmSalary = (record: any) => {
|
|
Message.info(`确认工资: ${record.userName}`)
|
|
}
|
|
|
|
onMounted(() => {
|
|
search()
|
|
})
|
|
</script> |