123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570 |
- <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>
|