469 lines
13 KiB
Vue
469 lines
13 KiB
Vue
|
<template>
|
|||
|
|
<a-drawer
|
|||
|
|
:visible="visible"
|
|||
|
|
@update:visible="val => emit('update:visible', val)"
|
|||
|
|
:title="title"
|
|||
|
|
:width="800"
|
|||
|
|
:footer="true"
|
|||
|
|
@cancel="handleCancel"
|
|||
|
|
>
|
|||
|
|
<a-form ref="formRef" :model="formData" :rules="rules" layout="vertical">
|
|||
|
|
<!-- 基本信息 -->
|
|||
|
|
<a-card title="基本信息" :bordered="false">
|
|||
|
|
<a-row :gutter="16">
|
|||
|
|
<a-col :span="12">
|
|||
|
|
<a-form-item label="员工姓名" field="employeeName">
|
|||
|
|
<a-input v-model="formData.employeeName" placeholder="请输入员工姓名" />
|
|||
|
|
</a-form-item>
|
|||
|
|
</a-col>
|
|||
|
|
<a-col :span="12">
|
|||
|
|
<a-form-item label="员工类型" field="employeeType">
|
|||
|
|
<a-select v-model="formData.employeeType" placeholder="请选择员工类型">
|
|||
|
|
<a-option value="intern">实习生</a-option>
|
|||
|
|
<a-option value="fulltime">正式员工</a-option>
|
|||
|
|
<a-option value="parttime">兼职员工</a-option>
|
|||
|
|
</a-select>
|
|||
|
|
</a-form-item>
|
|||
|
|
</a-col>
|
|||
|
|
</a-row>
|
|||
|
|
<a-row :gutter="16">
|
|||
|
|
<a-col :span="12">
|
|||
|
|
<a-form-item label="身份证号" field="idCard">
|
|||
|
|
<a-input v-model="formData.idCard" placeholder="请输入身份证号" />
|
|||
|
|
</a-form-item>
|
|||
|
|
</a-col>
|
|||
|
|
<a-col :span="12">
|
|||
|
|
<a-form-item label="联系电话" field="phone">
|
|||
|
|
<a-input v-model="formData.phone" placeholder="请输入联系电话" />
|
|||
|
|
</a-form-item>
|
|||
|
|
</a-col>
|
|||
|
|
</a-row>
|
|||
|
|
<a-row :gutter="16">
|
|||
|
|
<a-col :span="12">
|
|||
|
|
<a-form-item label="银行卡号" field="bankCard">
|
|||
|
|
<a-input v-model="formData.bankCard" placeholder="请输入银行卡号" />
|
|||
|
|
</a-form-item>
|
|||
|
|
</a-col>
|
|||
|
|
<a-col :span="12">
|
|||
|
|
<a-form-item label="开户银行" field="bankName">
|
|||
|
|
<a-input v-model="formData.bankName" placeholder="请输入开户银行" />
|
|||
|
|
</a-form-item>
|
|||
|
|
</a-col>
|
|||
|
|
</a-row>
|
|||
|
|
</a-card>
|
|||
|
|
|
|||
|
|
<!-- 项目信息 -->
|
|||
|
|
<a-card title="项目信息" :bordered="false" style="margin-top: 16px">
|
|||
|
|
<a-row :gutter="16">
|
|||
|
|
<a-col :span="12">
|
|||
|
|
<a-form-item label="项目名称" field="projectName">
|
|||
|
|
<a-input v-model="formData.projectName" placeholder="请输入项目名称" />
|
|||
|
|
</a-form-item>
|
|||
|
|
</a-col>
|
|||
|
|
<a-col :span="12">
|
|||
|
|
<a-form-item label="项目周期" field="projectPeriod">
|
|||
|
|
<a-input v-model="formData.projectPeriod" placeholder="如：2025-07" />
|
|||
|
|
</a-form-item>
|
|||
|
|
</a-col>
|
|||
|
|
</a-row>
|
|||
|
|
<a-row :gutter="16">
|
|||
|
|
<a-col :span="12">
|
|||
|
|
<a-form-item label="工作天数" field="workDays">
|
|||
|
|
<a-input-number
|
|||
|
|
v-model="formData.workDays"
|
|||
|
|
:min="0"
|
|||
|
|
:precision="0"
|
|||
|
|
placeholder="请输入工作天数"
|
|||
|
|
style="width: 100%"
|
|||
|
|
/>
|
|||
|
|
</a-form-item>
|
|||
|
|
</a-col>
|
|||
|
|
<a-col :span="12">
|
|||
|
|
<a-form-item label="海上作业天数" field="offshoreDays">
|
|||
|
|
<a-input-number
|
|||
|
|
v-model="formData.offshoreDays"
|
|||
|
|
:min="0"
|
|||
|
|
:precision="0"
|
|||
|
|
placeholder="请输入海上作业天数"
|
|||
|
|
style="width: 100%"
|
|||
|
|
/>
|
|||
|
|
</a-form-item>
|
|||
|
|
</a-col>
|
|||
|
|
</a-row>
|
|||
|
|
</a-card>
|
|||
|
|
|
|||
|
|
<!-- 薪酬计算 -->
|
|||
|
|
<a-card title="薪酬计算" :bordered="false" style="margin-top: 16px">
|
|||
|
|
<a-row :gutter="16">
|
|||
|
|
<a-col :span="12">
|
|||
|
|
<a-form-item label="基本工资标准" field="baseSalaryStandard">
|
|||
|
|
<a-input-number
|
|||
|
|
v-model="formData.baseSalaryStandard"
|
|||
|
|
:min="0"
|
|||
|
|
:precision="2"
|
|||
|
|
placeholder="请输入基本工资标准"
|
|||
|
|
style="width: 100%"
|
|||
|
|
/>
|
|||
|
|
</a-form-item>
|
|||
|
|
</a-col>
|
|||
|
|
<a-col :span="12">
|
|||
|
|
<a-form-item label="基本工资" field="baseSalary">
|
|||
|
|
<a-input-number
|
|||
|
|
v-model="formData.baseSalary"
|
|||
|
|
:min="0"
|
|||
|
|
:precision="2"
|
|||
|
|
placeholder="自动计算"
|
|||
|
|
style="width: 100%"
|
|||
|
|
readonly
|
|||
|
|
/>
|
|||
|
|
</a-form-item>
|
|||
|
|
</a-col>
|
|||
|
|
</a-row>
|
|||
|
|
|
|||
|
|
<!-- 绩效评价 -->
|
|||
|
|
<a-divider orientation="left">绩效评价</a-divider>
|
|||
|
|
<a-table :data="formData.performanceItems" :columns="performanceColumns" :pagination="false">
|
|||
|
|
<template #score="{ record, rowIndex }">
|
|||
|
|
<a-input-number
|
|||
|
|
v-model="record.score"
|
|||
|
|
:min="0"
|
|||
|
|
:max="record.maxScore"
|
|||
|
|
:precision="0"
|
|||
|
|
@change="calculatePerformance"
|
|||
|
|
/>
|
|||
|
|
</template>
|
|||
|
|
<template #amount="{ record }">
|
|||
|
|
{{ record.amount }}
|
|||
|
|
</template>
|
|||
|
|
</a-table>
|
|||
|
|
|
|||
|
|
<!-- 补助明细 -->
|
|||
|
|
<a-divider orientation="left">补助明细</a-divider>
|
|||
|
|
<a-table :data="formData.allowanceItems" :columns="allowanceColumns" :pagination="false">
|
|||
|
|
<template #quantity="{ record, rowIndex }">
|
|||
|
|
<a-input-number
|
|||
|
|
v-model="record.quantity"
|
|||
|
|
:min="0"
|
|||
|
|
:precision="0"
|
|||
|
|
@change="calculateAllowances"
|
|||
|
|
/>
|
|||
|
|
</template>
|
|||
|
|
<template #total="{ record }">
|
|||
|
|
{{ record.total }}
|
|||
|
|
</template>
|
|||
|
|
</a-table>
|
|||
|
|
|
|||
|
|
<!-- 计算结果 -->
|
|||
|
|
<a-divider orientation="left">计算结果</a-divider>
|
|||
|
|
<a-row :gutter="16">
|
|||
|
|
<a-col :span="8">
|
|||
|
|
<a-form-item label="应发总额">
|
|||
|
|
<a-input-number
|
|||
|
|
v-model="formData.totalPayable"
|
|||
|
|
:min="0"
|
|||
|
|
:precision="2"
|
|||
|
|
readonly
|
|||
|
|
style="width: 100%"
|
|||
|
|
/>
|
|||
|
|
</a-form-item>
|
|||
|
|
</a-col>
|
|||
|
|
<a-col :span="8">
|
|||
|
|
<a-form-item label="扣款金额">
|
|||
|
|
<a-input-number
|
|||
|
|
v-model="formData.deductions"
|
|||
|
|
:min="0"
|
|||
|
|
:precision="2"
|
|||
|
|
placeholder="请输入扣款金额"
|
|||
|
|
style="width: 100%"
|
|||
|
|
/>
|
|||
|
|
</a-form-item>
|
|||
|
|
</a-col>
|
|||
|
|
<a-col :span="8">
|
|||
|
|
<a-form-item label="实发金额">
|
|||
|
|
<a-input-number
|
|||
|
|
v-model="formData.netPay"
|
|||
|
|
:min="0"
|
|||
|
|
:precision="2"
|
|||
|
|
readonly
|
|||
|
|
style="width: 100%"
|
|||
|
|
/>
|
|||
|
|
</a-form-item>
|
|||
|
|
</a-col>
|
|||
|
|
</a-row>
|
|||
|
|
</a-card>
|
|||
|
|
</a-form>
|
|||
|
|
|
|||
|
|
<template #footer>
|
|||
|
|
<a-space>
|
|||
|
|
<a-button @click="handleCancel">取消</a-button>
|
|||
|
|
<a-button type="primary" @click="handleSubmit">保存</a-button>
|
|||
|
|
</a-space>
|
|||
|
|
</template>
|
|||
|
|
</a-drawer>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, reactive, computed, watch } from 'vue'
|
|||
|
|
import { Message } from '@arco-design/web-vue'
|
|||
|
|
import type { SalaryRecord, AllowanceItem, PerformanceItem } from '../types'
|
|||
|
|
|
|||
|
|
interface Props {
|
|||
|
|
visible: boolean
|
|||
|
|
data: SalaryRecord | null
|
|||
|
|
mode: 'add' | 'edit'
|
|||
|
|
}
|
|||
|
|
interface Emits {
|
|||
|
|
(e: 'update:visible', visible: boolean): void
|
|||
|
|
(e: 'success'): void
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const props = defineProps<Props>()
|
|||
|
|
const emit = defineEmits<Emits>()
|
|||
|
|
|
|||
|
|
const formRef = ref()
|
|||
|
|
const formData = reactive<SalaryRecord>({
|
|||
|
|
id: '',
|
|||
|
|
employeeId: '',
|
|||
|
|
employeeName: '',
|
|||
|
|
employeeType: 'intern',
|
|||
|
|
idCard: '',
|
|||
|
|
phone: '',
|
|||
|
|
bankCard: '',
|
|||
|
|
bankName: '',
|
|||
|
|
projectName: '',
|
|||
|
|
projectPeriod: '',
|
|||
|
|
workDays: 0,
|
|||
|
|
offshoreDays: 0,
|
|||
|
|
baseSalary: 0,
|
|||
|
|
baseSalaryStandard: 3500,
|
|||
|
|
performanceBonus: 0,
|
|||
|
|
allowances: 0,
|
|||
|
|
performanceItems: [],
|
|||
|
|
allowanceItems: [],
|
|||
|
|
totalPayable: 0,
|
|||
|
|
deductions: 0,
|
|||
|
|
netPay: 0,
|
|||
|
|
status: 'draft',
|
|||
|
|
approvalFlow: [],
|
|||
|
|
salaryMonth: '',
|
|||
|
|
createdAt: '',
|
|||
|
|
updatedAt: '',
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const performanceColumns = [
|
|||
|
|
{ title: '评价项', dataIndex: 'name', width: 200 },
|
|||
|
|
{ title: '权重', dataIndex: 'weight', width: 80 },
|
|||
|
|
{ title: '得分', dataIndex: 'score', slotName: 'score', width: 100 },
|
|||
|
|
{ title: '满分', dataIndex: 'maxScore', width: 80 },
|
|||
|
|
{ title: '金额', dataIndex: 'amount', slotName: 'amount', width: 100 },
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
const allowanceColumns = [
|
|||
|
|
{ title: '补助类型', dataIndex: 'name', width: 200 },
|
|||
|
|
{ title: '标准', dataIndex: 'amount', width: 100 },
|
|||
|
|
{ title: '单位', dataIndex: 'unit', width: 80 },
|
|||
|
|
{ title: '数量', dataIndex: 'quantity', slotName: 'quantity', width: 100 },
|
|||
|
|
{ title: '小计', dataIndex: 'total', slotName: 'total', width: 100 },
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
const title = computed(() => (props.mode === 'add' ? '新建工资单' : '编辑工资单'))
|
|||
|
|
|
|||
|
|
const rules = {
|
|||
|
|
employeeName: [{ required: true, message: '请输入员工姓名' }],
|
|||
|
|
employeeType: [{ required: true, message: '请选择员工类型' }],
|
|||
|
|
idCard: [{ required: true, message: '请输入身份证号' }],
|
|||
|
|
phone: [{ required: true, message: '请输入联系电话' }],
|
|||
|
|
projectName: [{ required: true, message: '请输入项目名称' }],
|
|||
|
|
workDays: [{ required: true, message: '请输入工作天数' }],
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 初始化实习生默认配置
|
|||
|
|
const initInternConfig = () => {
|
|||
|
|
formData.performanceItems = [
|
|||
|
|
{
|
|||
|
|
id: '1',
|
|||
|
|
name: '平时沟通态度',
|
|||
|
|
weight: 30,
|
|||
|
|
score: 0,
|
|||
|
|
maxScore: 100,
|
|||
|
|
amount: 200,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: '2',
|
|||
|
|
name: '积极主动性',
|
|||
|
|
weight: 50,
|
|||
|
|
score: 0,
|
|||
|
|
maxScore: 100,
|
|||
|
|
amount: 200,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: '3',
|
|||
|
|
name: '成长性心态',
|
|||
|
|
weight: 20,
|
|||
|
|
score: 0,
|
|||
|
|
maxScore: 100,
|
|||
|
|
amount: 100,
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
formData.allowanceItems = [
|
|||
|
|
{
|
|||
|
|
type: 'construction',
|
|||
|
|
name: '施工绩效',
|
|||
|
|
amount: 100,
|
|||
|
|
unit: 'day',
|
|||
|
|
quantity: 0,
|
|||
|
|
total: 0,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'offshore',
|
|||
|
|
name: '海上作业补助',
|
|||
|
|
amount: 30,
|
|||
|
|
unit: 'day',
|
|||
|
|
quantity: 0,
|
|||
|
|
total: 0,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'meal',
|
|||
|
|
name: '务餐补助',
|
|||
|
|
amount: 45,
|
|||
|
|
unit: 'day',
|
|||
|
|
quantity: 0,
|
|||
|
|
total: 0,
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 计算基本工资
|
|||
|
|
const calculateBaseSalary = () => {
|
|||
|
|
formData.baseSalary = (formData.baseSalaryStandard / 30) * formData.workDays
|
|||
|
|
calculateTotal()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 计算绩效奖金
|
|||
|
|
const calculatePerformance = () => {
|
|||
|
|
formData.performanceBonus = formData.performanceItems.reduce(
|
|||
|
|
(sum, item) => sum + (item.score / item.maxScore) * item.amount,
|
|||
|
|
0,
|
|||
|
|
)
|
|||
|
|
calculateTotal()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 计算补助
|
|||
|
|
const calculateAllowances = () => {
|
|||
|
|
formData.allowanceItems.forEach((item) => {
|
|||
|
|
item.total = item.amount * item.quantity
|
|||
|
|
})
|
|||
|
|
formData.allowances = formData.allowanceItems.reduce((sum, item) => sum + item.total, 0)
|
|||
|
|
calculateTotal()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 计算总额
|
|||
|
|
const calculateTotal = () => {
|
|||
|
|
formData.totalPayable = formData.baseSalary + formData.performanceBonus + formData.allowances
|
|||
|
|
formData.netPay = formData.totalPayable - formData.deductions
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 监听工作天数变化
|
|||
|
|
watch(
|
|||
|
|
() => formData.workDays,
|
|||
|
|
() => {
|
|||
|
|
calculateBaseSalary()
|
|||
|
|
// 更新务餐补助数量
|
|||
|
|
const mealItem = formData.allowanceItems.find((item) => item.type === 'meal')
|
|||
|
|
if (mealItem) {
|
|||
|
|
mealItem.quantity = formData.workDays
|
|||
|
|
calculateAllowances()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
// 监听海上作业天数变化
|
|||
|
|
watch(
|
|||
|
|
() => formData.offshoreDays,
|
|||
|
|
() => {
|
|||
|
|
// 更新海上作业补助数量
|
|||
|
|
const offshoreItem = formData.allowanceItems.find((item) => item.type === 'offshore')
|
|||
|
|
if (offshoreItem) {
|
|||
|
|
offshoreItem.quantity = formData.offshoreDays
|
|||
|
|
calculateAllowances()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
// 监听扣款变化
|
|||
|
|
watch(() => formData.deductions, calculateTotal)
|
|||
|
|
|
|||
|
|
const handleCancel = () => {
|
|||
|
|
emit('update:visible', false)
|
|||
|
|
formRef.value?.resetFields()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleSubmit = async () => {
|
|||
|
|
try {
|
|||
|
|
await formRef.value?.validate()
|
|||
|
|
// 这里调用API保存数据
|
|||
|
|
Message.success('保存成功')
|
|||
|
|
emit('success')
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('表单验证失败:', error)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 监听数据变化
|
|||
|
|
watch(
|
|||
|
|
() => props.data,
|
|||
|
|
(newData) => {
|
|||
|
|
if (newData) {
|
|||
|
|
Object.assign(formData, newData)
|
|||
|
|
} else {
|
|||
|
|
// 重置表单
|
|||
|
|
Object.assign(formData, {
|
|||
|
|
id: '',
|
|||
|
|
employeeId: '',
|
|||
|
|
employeeName: '',
|
|||
|
|
employeeType: 'intern',
|
|||
|
|
idCard: '',
|
|||
|
|
phone: '',
|
|||
|
|
bankCard: '',
|
|||
|
|
bankName: '',
|
|||
|
|
projectName: '',
|
|||
|
|
projectPeriod: '',
|
|||
|
|
workDays: 0,
|
|||
|
|
offshoreDays: 0,
|
|||
|
|
baseSalary: 0,
|
|||
|
|
baseSalaryStandard: 3500,
|
|||
|
|
performanceBonus: 0,
|
|||
|
|
allowances: 0,
|
|||
|
|
performanceItems: [],
|
|||
|
|
allowanceItems: [],
|
|||
|
|
totalPayable: 0,
|
|||
|
|
deductions: 0,
|
|||
|
|
netPay: 0,
|
|||
|
|
status: 'draft',
|
|||
|
|
approvalFlow: [],
|
|||
|
|
salaryMonth: '',
|
|||
|
|
createdAt: '',
|
|||
|
|
updatedAt: '',
|
|||
|
|
})
|
|||
|
|
initInternConfig()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{ immediate: true },
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
// 监听员工类型变化
|
|||
|
|
watch(
|
|||
|
|
() => formData.employeeType,
|
|||
|
|
(newType) => {
|
|||
|
|
if (newType === 'intern') {
|
|||
|
|
initInternConfig()
|
|||
|
|
} else {
|
|||
|
|
// 其他员工类型的配置
|
|||
|
|
formData.performanceItems = []
|
|||
|
|
formData.allowanceItems = []
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
)
|
|||
|
|
</script>
|