<template> <Dialog v-model="dialogVisible" :title="dialogTitle" style="width: 600px"> <el-form :model="formData" ref="formRef" :rules="rules" label-width="80px"> <el-form-item label="生效日期" prop="startDate"> <el-date-picker v-model="formData.startDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="选择日期时间" /> </el-form-item> <el-divider direction="horizontal" content-position="left">应发</el-divider> <el-row :gutter="20"> <el-col :span="12" :offset="0"> <el-form-item label="基本工资" prop="baseSalary"> <el-input-number v-model="formData.baseSalary" :min="0" :controls="false" /> </el-form-item> </el-col> <el-col :span="12" :offset="0"> <el-form-item label="绩效(%)"> <el-input-number v-model="formData.meritsRate" :min="0" :max="100" :controls="false" /> </el-form-item> </el-col> </el-row> <el-row :gutter="20"> <el-col :span="12" :offset="0"> <el-form-item label="提成方案" prop="planId"> <el-select v-model="formData.planId" placeholder="请选择" filterable clearable> <el-option v-for="item in planOptions" :key="item.percentageId" :label="item.percentageName" :disabled="item.status == 1" :value="item.percentageId" /> </el-select> </el-form-item> </el-col> <el-col :span="12" :offset="0"> <el-form-item label="补贴" prop="allowanceSalary"> <el-input-number v-model="formData.allowanceSalary" :min="0" :controls="false" /> </el-form-item> </el-col> </el-row> <el-row :gutter="20"> <el-col :span="12" :offset="0"> <el-form-item label="满勤" prop="fullWorkSalary"> <el-input-number v-model="formData.fullWorkSalary" :min="0" :controls="false" /> </el-form-item> </el-col> <el-col :span="12" :offset="0"> <el-form-item label="奖金" prop="rewardSalary"> <el-input-number v-model="formData.rewardSalary" :min="0" :controls="false" /> </el-form-item> </el-col> <el-col :span="12" :offset="0"> <el-form-item label="其他应发" prop="extraSalary"> <el-input-number v-model="formData.extraSalary" :min="0" :controls="false" /> </el-form-item> </el-col> </el-row> <el-divider direction="horizontal" content-position="left">应扣</el-divider> <el-row :gutter="20"> <!-- <el-col :span="12" :offset="0"> <el-form-item label="绩效"> <el-input placeholder="生成后录入" disabled /> </el-form-item> </el-col> --> </el-row> <el-row :gutter="20"> <el-col :span="12" :offset="0"> <el-form-item label="社保" prop="socialDeduct"> <el-input-number v-model="formData.socialDeduct" :min="0" :controls="false" /> </el-form-item> </el-col> <el-col :span="12" :offset="0"> <el-form-item label="公积金" prop="accumulationFundDeduct"> <el-input-number v-model="formData.accumulationFundDeduct" :min="0" :controls="false" /> </el-form-item> </el-col> </el-row> <el-row :gutter="20"> <el-col :span="12" :offset="0"> <el-form-item label="税额"> <el-input placeholder="自动计算" disabled /> </el-form-item> </el-col> <el-col :span="12" :offset="0"> <el-form-item label="考勤"> <el-input placeholder="自动计算" disabled /> </el-form-item> </el-col> <el-col :span="12" :offset="0"> <el-form-item label="其他应扣" prop="extraDeduct"> <el-input-number v-model="formData.extraDeduct" :min="0" :controls="false" /> </el-form-item> </el-col> </el-row> </el-form> <template #footer> <span> <el-button @click="dialogVisible = false">取消</el-button> <el-button :disabled="formLoading" type="primary" @click="submitForm">保存</el-button> </span> </template> </Dialog> </template> <script setup name="DialogSalarySetting"> import * as SalaryApi from '@/api/finance/salary' import { getPlanSimpleList } from '@/api/finance/plan' const message = useMessage() // 消息弹窗 const dialogVisible = ref(false) // 弹窗的是否展示 const dialogTitle = ref('工资条设置') const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用 const formData = ref({}) const rules = { startDate: { required: true, message: '生效日期不可为空', trigger: 'blur, change' }, baseSalary: { required: true, message: '基本工资不可为空', trigger: 'blur' } } /** 打开弹窗 */ const open = async (row) => { dialogVisible.value = true dialogTitle.value = `工资条设置-【${row.name}】` getOptions() formLoading.value = true try { const data = await SalaryApi.getSalaryDetail(row.id) if (!data) { resetForm(row.id) } else { formData.value = { ...data } } } finally { formLoading.value = false } } defineExpose({ open }) // 提供 open 方法,用于打开弹窗 const planOptions = ref([]) function getOptions() { getPlanSimpleList().then((data) => { planOptions.value = data }) } /** 重置表单 */ const resetForm = (id) => { formData.value = { employeeId: id, baseSalary: 0, planId: undefined, rewardSalary: 0, allowanceSalary: 0, fullWorkSalary: 0, extraSalary: 0, socialDeduct: 0, accumulationFundDeduct: 0, meritsSalary: 0, extraDeduct: 0, meritsRate: 0 } formRef.value?.resetFields() } const emit = defineEmits(['success']) const formRef = ref() const submitForm = async () => { // 校验表单 if (!formRef.value) return const valid = await formRef.value.validate() if (!valid) return // 提交请求 formLoading.value = true try { const data = { ...formData.value } await SalaryApi.updateSalary(data) message.success('配置成功') dialogVisible.value = false // 发送操作成功的事件 emit('success') } finally { formLoading.value = false } } </script> <style lang="scss" scoped></style>