school-developer/src/views/professional/professionalyearbounds/index.vue

<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<!-- 操作按钮 -->
			<el-row>
				<div class="mb15" style="width: 100%">
					<el-button type="primary" icon="FolderAdd" @click="handleAdd">新 增 </el-button>
				</div>
			</el-row>

			<!-- 表格 -->
			<el-table
				ref="tableRef"
				:data="state.dataList"
				v-loading="state.loading"
				border
				:cell-style="tableStyle.cellStyle"
				:header-cell-style="tableStyle.headerCellStyle"
				class="data-table"
			>
				<el-table-column type="index" label="序号" width="60" align="center" />

				<el-table-column label="姓名/工号" min-width="150" align="center">
					<template #default="scope">
						<TeacherNameNo :name="scope.row.teacherName" :no="scope.row.teacherNo" />
					</template>
				</el-table-column>

				<el-table-column prop="year" label="年份" width="100" align="center" />

				<el-table-column prop="salary" label="13月工资" min-width="120" align="center" show-overflow-tooltip />

				<el-table-column prop="assessmentTarget" label="重点考核目标" min-width="150" align="center" show-overflow-tooltip />

				<el-table-column prop="specialPerformance1" label="专项绩效1" min-width="120" align="center" show-overflow-tooltip />

				<el-table-column prop="specialPerformance2" label="专项绩效2" min-width="120" align="center" show-overflow-tooltip />

				<el-table-column prop="meritpay" label="年终奖励性绩效" min-width="150" align="center" show-overflow-tooltip />

				<el-table-column label="操作" min-width="150" align="center" fixed="right">
					<template #default="scope">
						<el-button v-if="hasAuth('professional_professionalyearbounds_edit')" icon="edit-pen" link type="primary" @click="handleEdit(scope.row)"
							>修改
						</el-button>
						<el-button
							v-if="hasAuth('professional_professionalyearbounds_del')"
							icon="delete"
							link
							type="danger"
							style="margin-left: 12px"
							@click="handleDel(scope.row)"
							>删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页 -->
			<pagination v-bind="state.pagination" @current-change="currentChangeHandle" @size-change="sizeChangeHandle" />

			<!-- 新增/编辑弹窗 -->
			<el-dialog v-model="dialogVisible" :title="form.id ? '修改' : '新增'" width="800px" :close-on-click-modal="false" destroy-on-close>
				<el-form ref="formRef" :model="form" :rules="formRules" label-width="120px">
					<el-form-item label="工号" prop="teacherNo">
						<el-input v-model="form.teacherNo" placeholder="请输入工号" clearable />
					</el-form-item>

					<el-form-item label="姓名" prop="teacherName">
						<el-input v-model="form.teacherName" placeholder="请输入姓名" clearable />
					</el-form-item>

					<el-form-item label="年份" prop="year">
						<el-date-picker v-model="form.year" type="year" placeholder="请选择年份" format="YYYY" value-format="YYYY" style="width: 100%" />
					</el-form-item>

					<el-form-item label="13月工资" prop="salary">
						<el-input-number v-model="form.salary" :min="0" :precision="2" placeholder="请输入13月工资" style="width: 100%" />
					</el-form-item>

					<el-form-item label="重点考核目标" prop="assessmentTarget">
						<el-input-number v-model="form.assessmentTarget" :min="0" :precision="2" placeholder="请输入重点考核目标" style="width: 100%" />
					</el-form-item>

					<el-form-item label="专项绩效1" prop="specialPerformance1">
						<el-input-number v-model="form.specialPerformance1" :min="0" :precision="2" placeholder="请输入专项绩效1" style="width: 100%" />
					</el-form-item>

					<el-form-item label="专项绩效2" prop="specialPerformance2">
						<el-input-number v-model="form.specialPerformance2" :min="0" :precision="2" placeholder="请输入专项绩效2" style="width: 100%" />
					</el-form-item>

					<el-form-item label="年终奖励性绩效" prop="meritpay">
						<el-input-number v-model="form.meritpay" :min="0" :precision="2" placeholder="请输入年终奖励性绩效" style="width: 100%" />
					</el-form-item>
				</el-form>

				<template #footer>
					<div class="dialog-footer">
						<el-button @click="dialogVisible = false">取消</el-button>
						<el-button type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
					</div>
				</template>
			</el-dialog>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { defineAsyncComponent } from 'vue';
import { useAuth } from '/@/hooks/auth';
import { BasicTableProps, useTable } from '/@/hooks/table';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { fetchList, addObj, putObj, delObj } from '/@/api/professional/salaries/professionalyearbounds';

const TeacherNameNo = defineAsyncComponent(() => import('/@/components/TeacherNameNo/index.vue'));
const { hasAuth } = useAuth();

// 消息提示 hooks
const message = useMessage();
const messageBox = useMessageBox();

// 表格引用
const tableRef = ref();
const formRef = ref();

// 弹窗状态
const dialogVisible = ref(false);
const submitLoading = ref(false);

// 表单数据
const form = reactive({
	id: '',
	teacherNo: '',
	teacherName: '',
	year: '',
	salary: null as number | null,
	assessmentTarget: null as number | null,
	specialPerformance1: null as number | null,
	specialPerformance2: null as number | null,
	meritpay: null as number | null,
});

// 表单验证规则
const formRules = {
	teacherNo: [{ required: true, message: '请输入工号', trigger: 'blur' }],
	teacherName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
	year: [{ required: true, message: '请选择年份', trigger: 'change' }],
};

// 配置 useTable
const state: BasicTableProps = reactive<BasicTableProps>({
	pageList: async (params: any) => {
		const response = await fetchList(params);
		return {
			data: {
				records: response.data.records || [],
				total: response.data.total || 0,
			},
		};
	},
	queryForm: {},
});

const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);

// 打开新增窗口
const handleAdd = () => {
	Object.assign(form, {
		id: '',
		teacherNo: '',
		teacherName: '',
		year: '',
		salary: null,
		assessmentTarget: null,
		specialPerformance1: null,
		specialPerformance2: null,
		meritpay: null,
	});
	dialogVisible.value = true;
};

// 打开编辑窗口
const handleEdit = async (row: any) => {
	Object.assign(form, {
		id: row.id || '',
		teacherNo: row.teacherNo || '',
		teacherName: row.teacherName || '',
		year: row.year || '',
		salary: row.salary || null,
		assessmentTarget: row.assessmentTarget || null,
		specialPerformance1: row.specialPerformance1 || null,
		specialPerformance2: row.specialPerformance2 || null,
		meritpay: row.meritpay || null,
	});
	dialogVisible.value = true;
};

// 删除
const handleDel = (row: any) => {
	messageBox
		.confirm('是否确认删除该条记录')
		.then(async () => {
			try {
				await delObj(row.id);
				message.success('删除成功');
				getDataList(false); // 删除后保持当前页
			} catch (error: any) {
				message.error(error.msg);
			}
		})
		.catch(() => {
			// 用户取消
		});
};

// 提交表单
const handleSubmit = async () => {
	if (!formRef.value) return;

	await formRef.value.validate(async (valid: boolean) => {
		if (valid) {
			submitLoading.value = true;
			try {
				if (form.id) {
					await putObj(form);
					message.success('修改成功');
				} else {
					await addObj(form);
					message.success('添加成功');
				}
				dialogVisible.value = false;
				getDataList(false); // 提交后保持当前页
			} catch (error: any) {
				// 错误处理已在数据请求层统一处理，此处不需要提示
			} finally {
				submitLoading.value = false;
			}
		}
	});
};
</script>

<style lang="scss" scoped>
.data-table {
	width: 100% !important;
}
</style>