train-student/src/views/class/group.vue

<template>
  <div id="group">
    <el-row>
      <el-col :span="24" class="info">
        <el-col :span="24" class="top">
          <el-col :span="15" class="title">
            班级分组名单
          </el-col>
          <span v-if="role === '4'">
            <el-col :span="9" class="btn">
              <el-button type="primary" @click="clickAdd()">创建组</el-button>
            </el-col>
          </span>
        </el-col>
        <el-col :span="24" class="main">
          <groupList :groupList="groupList"></groupList>
          <!-- 删除组 -->
          <!-- @shanchu="shanchu" -->
        </el-col>
        <el-col :span="24" class="foot">
          <footInfo></footInfo>
        </el-col>
      </el-col>
    </el-row>
    <van-dialog v-model="show" title="创建小组" :showConfirmButton="false">
      <van-form @submit="onSubmit">
        <van-field v-model="form.name" name="组名" label="组名" placeholder="请输入小组名称" />
        <div style="margin: 16px;">
         <el-button type="primary" @click="onSubmit">提交</el-button>
        </div>
      </van-form>
    </van-dialog>
  </div>
</template>

<script>
import footInfo from '@/layout/common/footInfo.vue';
import groupList from '@/layout/class/groupList.vue';
import { createNamespacedHelpers, mapState, mapGetters } from 'vuex';
const { mapActions: mapGroup } = createNamespacedHelpers('group');
export default {
  name: 'achieve',
  props: {},
  components: {
    footInfo, //底部信息
    groupList, //分组列表
  },
  data: () => ({
    role: '4',
    groupList: [],
    form: {},
    show: false,
  }),
  created() {
    this.searchInfo();
  },
  computed: {
    ...mapState(['user']),
    keyWord() {
      let meta = this.$route.meta;
      let main = meta.title || '';
      return main;
    },
  },
  methods: {
    ...mapGroup(['query', 'create', 'delete']),
    clickAdd() {
      this.show = true;
    },
    async searchInfo({ ...info } = {}) {
      const res = await this.query({ ...info });
      this.$set(this, `groupList`, res.data);
    },
    async onSubmit(form) {


      this.form.termid = this.user.termid;
      this.form.batchid = this.user.batchid;
      this.form.classid = this.user.classid;
      let data = this.form;
      console.log(this.form);

      let res = await this.create(data);
      let msg = `${this.keyWord}创建分组成功`;
      if (this.$checkRes(res, msg)) this.show = false;
      this.searchInfo();
    },
    // 删除组
    // async shanchu(id) {
    //   console.log(id);
    //   const res = await this.delete(id);
    //   this.$checkRes(res, '删除成功', '删除失败');
    //   this.searchInfo();
    // },
  },
};
</script>

<style lang="less" scoped>
.info {
  width: 100%;
  min-height: 667px;
  position: relative;
  background-color: #edeae8;
}
.top {
  height: 50px;
  line-height: 50px;
  margin: 0 0 10px 0;
  background: #fff;
}
.top .title {
  padding: 0 15px;
  font-size: 20px;
}
.top .btn {
  text-align: right;
  padding: 0 30px;
}
.main {
  margin: 0 0 50px 0;
}
</style>