<template>
|
<el-dialog v-model="dialogVisible"
|
:title="title"
|
width="700px"
|
:close-on-click-modal="false">
|
<el-form ref="formRef"
|
:model="form"
|
:rules="rules"
|
label-width="140px"
|
label-position="top">
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="统计月份"
|
prop="payDate">
|
<el-date-picker v-model="form.payDate"
|
type="month"
|
value-format="YYYY-MM"
|
format="YYYY-MM"
|
placeholder="请选择月份"
|
style="width: 100%"
|
:disabled="operationType === 'view'" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="姓名"
|
prop="staffId">
|
<el-select v-model="form.staffId"
|
placeholder="请选择员工"
|
style="width: 100%"
|
:disabled="operationType === 'view'">
|
<el-option v-for="item in userList"
|
:key="item.id"
|
:label="item.staffName"
|
:value="item.id" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="基本工资"
|
prop="basicSalary">
|
<el-input v-model="form.basicSalary"
|
type="number"
|
placeholder="请输入基本工资"
|
:disabled="operationType === 'view'" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="计件工资"
|
prop="pieceworkSalary">
|
<el-input v-model="form.pieceworkSalary"
|
type="number"
|
placeholder="请输入计件工资"
|
:disabled="operationType === 'view'" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="计时工资"
|
prop="hourlySalary">
|
<el-input v-model="form.hourlySalary"
|
type="number"
|
placeholder="请输入计时工资"
|
:disabled="operationType === 'view'" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="其他收入"
|
prop="otherIncome">
|
<el-input v-model="form.otherIncome"
|
type="number"
|
placeholder="请输入其他收入"
|
:disabled="operationType === 'view'" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="社保个人"
|
prop="socialSecurityIndividuals">
|
<el-input v-model="form.socialSecurityIndividuals"
|
type="number"
|
placeholder="请输入社保个人"
|
:disabled="operationType === 'view'" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="公积金个人"
|
prop="providentFundIndividuals">
|
<el-input v-model="form.providentFundIndividuals"
|
type="number"
|
placeholder="请输入公积金个人"
|
:disabled="operationType === 'view'" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="个人所得税"
|
prop="personalIncomeTax">
|
<el-input v-model="form.personalIncomeTax"
|
type="number"
|
placeholder="请输入个人所得税"
|
:disabled="operationType === 'view'" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="其他扣款"
|
prop="otherDeductions">
|
<el-input v-model="form.otherDeductions"
|
type="number"
|
placeholder="请输入其他扣款"
|
:disabled="operationType === 'view'" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="24">
|
<el-form-item label="备注"
|
prop="remark">
|
<el-input v-model="form.remark"
|
type="textarea"
|
placeholder="请输入备注"
|
:rows="3"
|
:disabled="operationType === 'view'" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="dialogVisible = false">取消</el-button>
|
<el-button type="primary"
|
@click="submitForm"
|
v-if="operationType !== 'view'">
|
确定
|
</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { ref, reactive, computed, onMounted } from "vue";
|
import { ElMessage } from "element-plus";
|
import {
|
monthlyStatisticsAdd,
|
monthlyStatisticsUpdate,
|
staffOnJobList,
|
} from "@/api/personnelManagement/monthlyStatistics.js";
|
|
const props = defineProps({
|
modelValue: {
|
type: Boolean,
|
default: false,
|
},
|
operationType: {
|
type: String,
|
default: "add",
|
},
|
row: {
|
type: Object,
|
default: () => ({}),
|
},
|
});
|
|
const emit = defineEmits(["update:modelValue", "close"]);
|
|
const dialogVisible = computed({
|
get: () => props.modelValue,
|
set: val => emit("update:modelValue", val),
|
});
|
|
const title = computed(() => {
|
if (props.operationType === "add") return "新增薪资台账";
|
if (props.operationType === "edit") return "编辑薪资台账";
|
return "查看薪资台账";
|
});
|
|
const formRef = ref();
|
const form = reactive({
|
id: "",
|
payDate: "",
|
staffId: "",
|
basicSalary: 0,
|
pieceworkSalary: 0,
|
hourlySalary: 0,
|
otherIncome: 0,
|
socialSecurityIndividuals: 0,
|
providentFundIndividuals: 0,
|
personalIncomeTax: 0,
|
otherDeductions: 0,
|
payableWages: 0,
|
deductibleWages: 0,
|
actualWages: 0,
|
remark: "",
|
});
|
|
const rules = {
|
payDate: [{ required: true, message: "请选择统计月份", trigger: "change" }],
|
staffId: [{ required: true, message: "请选择员工", trigger: "change" }],
|
basicSalary: [{ required: true, message: "请输入基本工资", trigger: "blur" }],
|
};
|
|
const userList = ref([]);
|
|
const loadUserList = () => {
|
// userListNoPage().then(res => {
|
// userList.value = res.data || [];
|
// });
|
staffOnJobList().then(res => {
|
userList.value = res.data || [];
|
});
|
};
|
|
const openDialog = (type, row) => {
|
// 重置表单
|
Object.assign(form, {
|
id: "",
|
payDate: "",
|
staffId: "",
|
basicSalary: 0,
|
pieceworkSalary: 0,
|
hourlySalary: 0,
|
otherIncome: 0,
|
socialSecurityIndividuals: 0,
|
providentFundIndividuals: 0,
|
personalIncomeTax: 0,
|
otherDeductions: 0,
|
payableWages: 0,
|
deductibleWages: 0,
|
actualWages: 0,
|
remark: "",
|
});
|
|
if (type === "add") {
|
dialogVisible.value = true;
|
} else if (type === "edit" || type === "view") {
|
if (row && row.id) {
|
Object.assign(form, row);
|
dialogVisible.value = true;
|
}
|
}
|
};
|
|
const submitForm = () => {
|
formRef.value.validate(valid => {
|
if (valid) {
|
form.basicSalary = Number(form.basicSalary);
|
form.pieceworkSalary = Number(form.pieceworkSalary);
|
form.hourlySalary = Number(form.hourlySalary);
|
form.otherIncome = Number(form.otherIncome);
|
form.socialSecurityIndividuals = Number(form.socialSecurityIndividuals);
|
form.providentFundIndividuals = Number(form.providentFundIndividuals);
|
form.personalIncomeTax = Number(form.personalIncomeTax);
|
form.otherDeductions = Number(form.otherDeductions);
|
|
// 计算应发工资、应扣工资和实发工资
|
const payableWages =
|
form.basicSalary +
|
form.pieceworkSalary +
|
form.hourlySalary +
|
form.otherIncome;
|
const deductibleWages =
|
form.socialSecurityIndividuals +
|
form.providentFundIndividuals +
|
form.personalIncomeTax +
|
form.otherDeductions;
|
const actualWages = payableWages - deductibleWages;
|
|
const submitData = {
|
...form,
|
payableWages,
|
deductibleWages,
|
actualWages,
|
};
|
|
if (props.operationType === "add") {
|
monthlyStatisticsAdd(submitData).then(res => {
|
if (res.code === 200) {
|
ElMessage.success("新增成功");
|
dialogVisible.value = false;
|
emit("close");
|
} else {
|
ElMessage.error(res.msg || "新增失败");
|
}
|
});
|
} else if (props.operationType === "edit") {
|
monthlyStatisticsUpdate(submitData).then(res => {
|
if (res.code === 200) {
|
ElMessage.success("更新成功");
|
dialogVisible.value = false;
|
emit("close");
|
} else {
|
ElMessage.error(res.msg || "更新失败");
|
}
|
});
|
}
|
}
|
});
|
};
|
|
onMounted(() => {
|
loadUserList();
|
});
|
|
defineExpose({
|
openDialog,
|
});
|
</script>
|
|
<style scoped>
|
.dialog-footer {
|
text-align: right;
|
}
|
</style>
|
