train-student/src/layout/class/classGroup.vue

<template>
  <div id="classGroup">
    <el-row>
      <el-col :span="24" class="button_class">
        <van-button type="info" v-if="this.user.job === '班长'" @click="createGroup()">创建小组</van-button>

        <van-button type="info" v-if="this.user.job === '班长'" @click="affirm()">确认小组</van-button>
      </el-col>
      <el-col :span="24">
        <groupList :columns="columns" :groupList="groupList" :form="form" :show="show" v-on="$listeners" :stuIdAndGroupId="stuIdAndGroupId"></groupList>
      </el-col>
      <el-col :span="24" class="foot">
        <noGroup v-if="this.user.job === '班长'" :noGroupStudentNames="noGroupStudentNames"></noGroup>
      </el-col>
    </el-row>
    <el-dialog class="createGroup" title="创建小组" :visible.sync="createGroupDialog" width="90%">
      <el-form :model="groupForm">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="groupForm.name" placeholder="请输入小组名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="saveGroup()" type="primary">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers, mapGetters } from 'vuex';
import groupList from '@/layout/class/groupList.vue';
import noGroup from '@/layout/class/noGroup.vue';
export default {
  name: 'classGroup',
  props: {
    groupList: null,
    createGroupDialog: null,
    groupForm: null,
    stuIdAndGroupId: null, //登陆者id和小组id
    noGroupStudentNames: null, //没有小组的学生
    show: null,
    form: null,
    columns: null,
  },
  components: {
    groupList,
    noGroup,
  },
  data: () => ({
    formLabelWidth: '50px',
  }),
  created() {},
  computed: {
    ...mapState(['user']),
  },
  methods: {
    //确认小组
    affirm() {
      this.$emit('affirm');
    },
    // 创建分组
    createGroup() {
      this.$emit('createGroup');
    },
    saveGroup() {
      this.$emit('saveGroup', { data: this.groupForm });
    },
  },
};
</script>

<style lang="less" scoped>
.button_class {
  padding: 20px 0px;
}
/deep/.el-dialog__body {
  padding: 15px 20px;
}
/deep/.el-dialog__footer {
  padding: 10px 20px 20px;
  text-align: center;
}

/deep/ .van-dialog {
  position: fixed;
  top: 70%;
  left: 50%;
  width: 373px;
  overflow: hidden;
  font-size: 16px;
}

/deep/.van-button {
  width: 186px;
  height: 44px;
}
</style>