school-developer/src/views/recruit/recruitImitateAdjustBatch/mnTable.vue

<template>
	<el-dialog title="模拟列表" :close-on-click-modal="false" v-model="visible" width="98%">
		<el-form :inline="true">
			<el-form-item>
				<el-button v-if="hasAuth('recruit_recruitImitateAdjustBatch_add')" icon="FolderAdd" type="primary" @click="addOrUpdateHandle()"
					>新增</el-button
				>
			</el-form-item>
		</el-form>
		<el-table :data="dataList" border stripe v-loading="dataListLoading">
			<el-table-column prop="serialNumber" header-align="center" align="center" label="唯一号"> </el-table-column>
			<el-table-column prop="name" header-align="center" align="center" label="姓名"> </el-table-column>

			<el-table-column prop="gender" header-align="center" align="center" label="性别">
				<template #default="scope">
					<GenderTag :sex="scope.row.gender" />
				</template>
			</el-table-column>
			<el-table-column prop="degreeOfEducation" header-align="center" align="center" label="学历">
				<template #default="scope">
					{{ getLabelValueByProps(eduList, scope.row.degreeOfEducation, { key: 'value', value: 'label' }) }}
				</template>
			</el-table-column>
			<el-table-column prop="wishMajorOne" header-align="center" width="100px" align="center" label="拟报专业1">
				<template #default="scope">
					{{ getLabelValueByProps(planMajorList, scope.row.wishMajorOne, { key: 'majorCode', value: 'majorName' }) }}
				</template>
			</el-table-column>
			<el-table-column prop="wishMajorTwo" header-align="center" align="center" width="100px" label="拟报专业2">
				<template #default="scope">
					{{ getLabelValueByProps(planMajorList, scope.row.wishMajorTwo, { key: 'majorCode', value: 'majorName' }) }}
				</template>
			</el-table-column>

			<el-table-column prop="wishMajorThree" header-align="center" align="center" width="100px" label="拟报专业3">
				<template #default="scope">
					{{ getLabelValueByProps(planMajorList, scope.row.wishMajorThree, { key: 'majorCode', value: 'majorName' }) }}
				</template>
			</el-table-column>
			<el-table-column prop="oldConfirmedMajor" header-align="center" align="center" label="原录取专业">
				<template #default="scope">
					{{ getLabelValueByProps(planMajorList, scope.row.oldConfirmedMajor, { key: 'majorCode', value: 'majorName' }) }}
				</template>
			</el-table-column>
			<el-table-column prop="confirmedMajor" header-align="center" align="center" label="模拟录取专业">
				<template #default="scope">
					{{ getLabelValueByProps(planMajorList, scope.row.confirmedMajor, { key: 'majorCode', value: 'majorName' }) }}
				</template>
			</el-table-column>
			<el-table-column prop="isOut" header-align="center" align="center" width="120" label="来源">
				<template #default="scope">
					<span v-if="scope.row.isOut == 0">学校</span>
					<span v-if="scope.row.isOut == 1">市平台</span>
				</template>
			</el-table-column>
			<el-table-column header-align="center" align="center" min-width="200" label="操作">
				<template #default="scope">
					<el-button
						v-if="hasAuth('recruit_recruitImitateAdjustBatch_edit')"
						type="text"
						size="small"
						:icon="Edit"
						@click="addOrUpdateHandle(scope.row.id)"
						>修改</el-button
					>
					<el-button
						v-if="hasAuth('recruit_recruitImitateAdjustBatch_del')"
						type="danger"
						link
						size="small"
						:icon="Delete"
						@click="deleteHandle(scope.row.id)"
						>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>

		<add-m-n-stu ref="addMnStuRef" @refreshDataList="getDataList"></add-m-n-stu>
	</el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick, defineAsyncComponent } from 'vue';
import { useAuth } from '/@/hooks/auth';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { Edit, Delete } from '@element-plus/icons-vue';
import { getMNStuList, delMNObj } from '/@/api/recruit/recruitImitateAdjustBatch';
import { listPlanByCondition as planMajor } from '/@/api/recruit/recruitstudentplan';
import { getDicts } from '/@/api/admin/dict';
import { getLabelValueByProps } from '/@/utils/dictLabel';

const AddMNStu = defineAsyncComponent(() => import('./addMNStu.vue'));
const GenderTag = defineAsyncComponent(() => import('@/components/GenderTag/index.vue'));
const { hasAuth } = useAuth();
// Emits
const emit = defineEmits<{
	(e: 'refreshDataList'): void;
}>();

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

// 组件引用
const addMnStuRef = ref();

// 响应式数据
const visible = ref(false);
const canSubmit = ref(false);
const dataListLoading = ref(false);

const dataForm = reactive({
	batchNo: '',
	groupId: '',
});

const dataList = ref<any[]>([]);
const eduList = ref<any[]>([]);
const planMajorList = ref<any[]>([]);

// 初始化方法
const init = (batchNo: string, groupId: string) => {
	dataForm.batchNo = batchNo;
	dataForm.groupId = groupId;
	visible.value = true;
	canSubmit.value = true;
	initData();
};

// 新增 / 修改
const addOrUpdateHandle = (id?: string) => {
	nextTick(() => {
		addMnStuRef.value?.init(id || null, dataForm.groupId, dataForm.batchNo);
	});
};

// 删除
const deleteHandle = async (id: string) => {
	try {
		await messageBox.confirm('是否确认删除本条数据？请谨慎操作');
		await delMNObj(id);
		message.success('删除成功');
		getDataList();
	} catch {
		// 用户取消
	}
};

// 获取数据列表
const getDataList = () => {
	dataList.value = [];
	dataListLoading.value = true;
	emit('refreshDataList');
	getMNStuList(dataForm)
		.then((response: any) => {
			dataList.value = response.data;
			dataListLoading.value = false;
		})
		.catch(() => {
			dataListLoading.value = false;
		});
};

// 初始化数据
const initData = () => {
	eduList.value = [];
	getDicts('finance_student_source').then((res: any) => {
		eduList.value = res.data;
	});
	planMajorList.value = [];
	planMajor({ groupId: dataForm.groupId }).then((data: any) => {
		planMajorList.value = data.data;
		getDataList();
	});
};

// 暴露方法给父组件
defineExpose({
	init,
});
</script>

<style scoped></style>