school-in-out/school-in-out-ui/src/views/system/student/index.vue

<template>
	<div class="app-container">
		<el-form
			:model="queryParams"
			ref="queryForm"
			size="small"
			:inline="true"
			v-show="showSearch"
			label-width="68px"
		>
			<el-form-item label="学生名称" prop="studentName">
				<el-input
					v-model="queryParams.studentName"
					placeholder="请输入学生名称"
					clearable
					@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
			<el-form-item label="学生性别" prop="studentGender">
				<el-select
					v-model="queryParams.studentGender"
					placeholder="请选择学生性别"
					clearable
				>
					<el-option
						v-for="dict in dict.type.sys_user_sex"
						:key="dict.value"
						:label="dict.label"
						:value="dict.value"
					/>
				</el-select>
			</el-form-item>
			<el-form-item label="学号" prop="studentNum">
				<el-input
					v-model="queryParams.studentNum"
					placeholder="请输入学号"
					clearable
					@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
			<el-form-item>
				<el-button
					type="primary"
					icon="el-icon-search"
					size="mini"
					@click="handleQuery"
					>搜索</el-button
				>
				<el-button
					icon="el-icon-refresh"
					size="mini"
					@click="resetQuery"
					>重置</el-button
				>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button
					type="primary"
					plain
					icon="el-icon-plus"
					size="mini"
					@click="handleAdd"
					v-hasPermi="['system:student:add']"
					>新增</el-button
				>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="success"
					plain
					icon="el-icon-edit"
					size="mini"
					:disabled="single"
					@click="handleUpdate"
					v-hasPermi="['system:student:edit']"
					>修改</el-button
				>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="danger"
					plain
					icon="el-icon-delete"
					size="mini"
					:disabled="multiple"
					@click="handleDelete"
					v-hasPermi="['system:student:remove']"
					>删除</el-button
				>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="warning"
					plain
					icon="el-icon-download"
					size="mini"
					@click="handleExport"
					v-hasPermi="['system:student:export']"
					>导出</el-button
				>
			</el-col>
			<right-toolbar
				:showSearch.sync="showSearch"
				@queryTable="getList"
			></right-toolbar>
		</el-row>

		<el-table
			v-loading="loading"
			:data="studentList"
			@selection-change="handleSelectionChange"
		>
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="序号" align="center" type="index" />
			<!-- todo 显示 学校名称 -->
			<el-table-column label="所属学校" align="center">
				<template slot-scope="scope">
					<dict-tag
						:options="dictTables.schoolDict"
						:value="scope.row.schoolId"
					/>
				</template>
			</el-table-column>
			<el-table-column
				label="所属班级"
				align="center"
				prop="classId"
			>
				<template slot-scope="scope">
					<dict-tag
						:options="dictTables.classDict"
						:value="scope.row.classId"
					/>
				</template>
			</el-table-column>

			<el-table-column
				label="学号"
				align="center"
				prop="studentNum"
			/>
			<el-table-column
				label="学生名称"
				align="center"
				prop="studentName"
			/>
			<el-table-column
				label="学生照片"
				align="center"
				prop="studentPic"
				width="100"
			>
				<template slot-scope="scope">
					<image-preview
						:src="scope.row.studentPic"
						:width="50"
						:height="50"
					/>
				</template>
			</el-table-column>
			<el-table-column
				label="学生性别"
				align="center"
				prop="studentGender"
			>
				<template slot-scope="scope">
					<dict-tag
						:options="dict.type.sys_user_sex"
						:value="scope.row.studentGender"
					/>
				</template>
			</el-table-column>

			<el-table-column
				label="操作"
				align="center"
				class-name="small-padding fixed-width"
			>
				<template slot-scope="scope">
					<el-button
						size="mini"
						type="text"
						icon="el-icon-edit"
						@click="handleUpdate(scope.row)"
						v-hasPermi="['system:student:edit']"
						>修改</el-button
					>
					<el-button
						size="mini"
						type="text"
						icon="el-icon-delete"
						@click="handleDelete(scope.row)"
						v-hasPermi="['system:student:remove']"
						>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>

		<pagination
			v-show="total > 0"
			:total="total"
			:page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize"
			@pagination="getList"
		/>

		<!-- 添加或修改学生管理对话框 -->
		<el-dialog
			:title="title"
			:visible.sync="open"
			width="720px"
			append-to-body
		>
			<el-form
				ref="form"
				:model="form"
				:rules="rules"
				label-width="80px"
			>
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item
							label="所属学校"
							prop="schoolId"
						>
							<el-select
								v-model="form.schoolId"
								placeholder="请选择所属学校"
								clearable
								style="width: 100%"
							>
								<el-option
									v-for="dict in dictTables.schoolDict"
									:key="dict.value"
									:label="dict.label"
									:value="dict.value"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item
							label="学生名称"
							prop="studentName"
						>
							<el-input
								v-model="form.studentName"
								placeholder="请输入学生名称"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<!-- todo 需要修改逻辑 -->
						<el-form-item
							label="所属班级"
							prop="classId"
						>
							<el-select
								v-model="form.classId"
								:loading="optionsLoading" 
            		loading-text="正在加载中~~~"
								@visible-change="searchClassOption" 
								:disabled="!form.schoolId"
								placeholder="请选择所属班级"
								clearable
								style="width: 100%"
							>
								<el-option
									v-for="dict in classOptions"
									:key="dict.value"
									:label="dict.label"
									:value="dict.value"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item
							label="学生性别"
							prop="studentGender"
						>
							<el-select
								v-model="form.studentGender"
								placeholder="请选择学生性别"
								style="width: 100%"
							>
								<el-option
									v-for="dict in dict.type
										.sys_user_sex"
									:key="dict.value"
									:label="dict.label"
									:value="dict.value"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item
							label="学生照片"
							prop="studentPic"
						>
							<image-upload
								:limit="1"
								v-model="form.studentPic"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item
							label="学号"
							prop="studentNum"
						>
							<el-input
								v-model="form.studentNum"
								placeholder="请输入学号"
							/>
						</el-form-item>
					</el-col>
					
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm"
					>确 定</el-button
				>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { listClazzOption } from '@/api/system/clazz'
import {
	listStudent,
	getStudent,
	delStudent,
	addStudent,
	updateStudent,
} from '@/api/system/student';
import Textyixia from '@/mixin/Textyixia';
export default {
	name: 'Student',
	mixins: [Textyixia],
	dicts: ['sys_user_sex'],
	data() {
		return {
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 学生管理表格数据
			studentList: [],
			// 弹出层标题
			title: '',
			// 是否显示弹出层
			open: false,
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				schoolId: null,
				classId: null,
				studentName: null,
				studentGender: null,
				studentNum: null,
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {
				schoolId: [
					{
						required: true,
						message: '学校id不能为空',
						trigger: 'change',
					},
				],
				classId: [
					{
						required: true,
						message: '班级id不能为空',
						trigger: 'change',
					},
				],
				studentName: [
					{
						required: true,
						message: '学生名称不能为空',
						trigger: 'blur',
					},
				],
				studentPic: [
					{
						required: true,
						message: '学生照片不能为空',
						trigger: 'blur',
					},
				],
				studentGender: [
					{
						required: true,
						message: '学生性别不能为空',
						trigger: 'change',
					},
				],
				studentNum: [
					{
						required: true,
						message: '学生学号不能为空',
						trigger: 'blur',
					},
				],
			},
			dictTables: {
				schoolDict: [],
				classDict: [],
			},
			classOptions: [],
			optionsLoading: false,
		};
	},
	created() {
		this.getList();
		this.dictTableData('tb_school,school_name,id').then(data => {
			this.dictTables.schoolDict = data;
		});
		this.dictTableData('tb_school_class,class_name,id').then(data => {
			this.dictTables.classDict = data;
		});
	},
	methods: {
		/** 查询学生管理列表 */
		getList() {
			this.loading = true;
			listStudent(this.queryParams).then(response => {
				this.studentList = response.rows;
				this.total = response.total;
				this.loading = false;
			});
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {
				id: null,
				schoolId: null,
				classId: null,
				studentName: null,
				studentPic: null,
				studentGender: null,
				studentNum: null,
				delFlag: null,
				createBy: null,
				createTime: null,
				updateBy: null,
				updateTime: null,
			};
			this.resetForm('form');
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm('queryForm');
			this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map(item => item.id);
			this.single = selection.length !== 1;
			this.multiple = !selection.length;
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
			this.open = true;
			this.title = '添加学生管理';
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.reset();
			const id = row.id || this.ids;
			getStudent(id).then(response => {
				this.form = response.data;
				this.open = true;
				this.title = '修改学生管理';
			});
		},
		/** 提交按钮 */
		submitForm() {
			this.$refs['form'].validate(valid => {
				if (valid) {
					if (this.form.id != null) {
						updateStudent(this.form).then(response => {
							this.$modal.msgSuccess('修改成功');
							this.open = false;
							this.getList();
						});
					} else {
						addStudent(this.form).then(response => {
							this.$modal.msgSuccess('新增成功');
							this.open = false;
							this.getList();
						});
					}
				}
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const ids = row.id || this.ids;
			this.$modal
				.confirm(
					'是否确认删除学生管理编号为"' +
						ids +
						'"的数据项？'
				)
				.then(function () {
					return delStudent(ids);
				})
				.then(() => {
					this.getList();
					this.$modal.msgSuccess('删除成功');
				})
				.catch(() => {});
		},
		/** 搜索班级下拉列表 */
		searchClassOption(openSe) {
			if (openSe) {
				this.optionsLoading = true
				listClazzOption(this.form.schoolId).then(response => {
					console.log(response);
					this.classOptions = response.data
					this.optionsLoading = false
				})
			}
		},
		/** 导出按钮操作 */
		handleExport() {
			this.download(
				'system/student/export',
				{
					...this.queryParams,
				},
				`student_${new Date().getTime()}.xlsx`
			);
		},
	},
};
</script>