train-center/src/views/student/index.vue

<template>
  <div id="index">
    <list-frame title="学生管理" @query="search" :total="total" :needFilter="false" @add="$router.push({ path: '/student/detail' })">
      <el-form :inline="true" size="mini">
        <el-form-item label="期">
          <el-select v-model="form.termid" placeholder="请选择期数" @change="getClasses">
            <el-option v-for="(i, index) in termList" :key="index" :label="`第${i.term}期`" :value="i._id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级">
          <el-select v-model="form.classid" placeholder="请选择班级">
            <el-option v-for="(i, index) in classList" :key="index" :label="i.name" :value="i._id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
      <el-row style="margin: 20px 0 5px 0" type="flex" align="middle" justify="end">
        <el-col :span="2">
          <el-button type="danger" size="mini" :disabled="batchdet.length <= 0" @click="batchdelete">批量删除</el-button>
        </el-col>
      </el-row>
      <data-table
        :fields="fields"
        @handleSelect="handleSelect"
        :select="true"
        :data="list"
        :opera="opera"
        @turnClass="toTurnClass"
        @edit="toEdit"
        @delete="toDelete"
      ></data-table>
    </list-frame>
    <el-dialog :visible.sync="dialog" title="转班" @close="toClose" width="30%">
      <data-form :data="studInfo" :fields="turnFields" :rules="{}" @save="turnSave">
        <template #options="{item,form}">
          <template v-if="item.model == 'classid'">
            <el-option v-for="(i, index) in selectClassList" :key="index" :label="`第${i.batch}批-${i.name}`" :value="i._id"></el-option>
          </template>
        </template>
      </data-form>
    </el-dialog>
  </div>
</template>

<script>
import _ from 'lodash';
import listFrame from '@frame/layout/admin/list-frame';
import dataForm from '@frame/components/form';
import dataTable from '@frame/components/data-table';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('student');
const { mapActions: classes } = createNamespacedHelpers('classes');
const { mapActions: trainplan } = createNamespacedHelpers('trainplan');

export default {
  metaInfo: { title: '学生管理' },
  name: 'index',
  props: {},
  components: {
    listFrame,
    dataTable,
    dataForm,
  },
  data: () => ({
    dialog: false,
    opera: [
      {
        label: '编辑',
        icon: 'el-icon-edit',
        method: 'edit',
      },
      {
        label: '转班',
        icon: 'el-icon-refresh',
        method: 'turnClass',
      },
      {
        label: '删除',
        icon: 'el-icon-delete',
        method: 'delete',
        confirm: true,
      },
    ],
    fields: [
      { label: '姓名', prop: 'name' },
      { label: '性别', prop: 'gender' },
      { label: '民族', prop: 'nation' },
      { label: '身份证号', prop: 'id_number' },
      { label: '期', prop: 'termname' },
      { label: '批次', prop: 'batchname' },
      { label: '班级', prop: 'classname' },
      { label: '学校', prop: 'school_name' },
      { label: '院系', prop: 'faculty' },
      { label: '专业', prop: 'major' },
      { label: '手机号', prop: 'phone' },
      { label: '邮箱', prop: 'email' },
    ],
    turnFields: [
      { label: '姓名', model: 'name', type: 'text' },
      { label: '学校', model: 'school_name', type: 'text' },
      { label: '班级', model: 'classid', type: 'select' },
    ],
    form: {},
    studInfo: {},
    list: [],
    classList: [],
    batchList: [],
    termList: [],
    total: 0,
    selectClassList: [],
    batchdet: [],
  }),
  created() {
    this.getPlan();
  },
  computed: { ...mapState(['user', 'defaultOption']) },
  methods: {
    ...trainplan({ planfetch: 'fetch' }),
    ...mapActions(['query', 'delete', 'update', 'removeAll']),
    ...classes({ classesquery: 'query' }),
    async search({ skip = 0, limit = 10, ...info } = {}) {
      const res = await this.query({ skip, limit, termid: this.form.termid, classid: this.form.classid });
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
        this.$set(this, `total`, res.total);
      }
    },
    //批量选择
    handleSelect(data) {
      //取出data中id 作为一个新集合
      let idlist = data.map(i => i.id);
      this.$set(this, `batchdet`, idlist);
    },
    //批量删除
    async batchdelete() {
      let duplicate = _.cloneDeep(this.batchdet);
      let res = await this.removeAll(duplicate);
      if (this.$checkRes(res, '删除成功', res.errmsg)) {
        this.batchdet = [];
        this.search();
      }
    },

    toEdit({ data }) {
      this.$router.push({ path: '/student/detail', query: { id: data.id } });
    },
    async toDelete({ data }) {
      const res = await this.delete(data.id);
      this.$checkRes(res, '删除成功', '删除失败');
      this.search();
    },
    async getPlan() {
      const res = await this.planfetch(this.defaultOption.planid);
      let terms = res.data.termnum;
      this.$set(this, `termList`, terms);
      if (this.defaultOption.termid) {
        this.form.termid = this.defaultOption.termid;
        this.getClasses(this.form.termid);
      }
    },
    async getClasses(termid) {
      const res = await this.classesquery({ termid });
      this.$set(this, `classList`, res.data);
    },
    async toTurnClass({ data }) {
      let { termid } = data;
      this.$set(this, `studInfo`, data);
      let res = await this.classesquery({ termid });
      if (this.$checkRes(res)) this.$set(this, `selectClassList`, res.data);
      this.dialog = true;
    },
    //转班保存
    async turnSave({ data }) {
      let msg = '转班';
      let res = await this.update(data);
      if (this.$checkRes(res, `${msg}成功`, res.errmsg || `${msg}失败`)) {
        this.search();
        this.toClose();
      }
    },
    toClose() {
      this.dialog = false;
      this.form = {};
    },
  },
  watch: {
    defaultOption: {
      handler(val) {
        this.form.termid = this.defaultOption.termid;
        this.getClasses(this.form.termid);
      },
      deep: true,
    },
  },
};
</script>

<style lang="less" scoped></style>