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

<template>
  <div id="groupList">
    <el-row>
      <el-col :span="24" class="list" v-for="(item, index) in groupList" :key="index">
        <el-collapse accordion>
          <el-collapse-item>
            <template slot="title">
              <el-col :span="2">{{ index + 1 }}.</el-col>
              <el-col :span="6" class="groupName"> {{ item.name }} {{ item.students.length }}人</el-col>
              <el-col :span="24" v-if="item.status !== '1'">
                <el-col :span="2">
                  <el-button v-if="item.students.length >= 10" style="width:55px" round plain type="danger" size="mini" disabled>已满员</el-button>
                </el-col>
                <el-col :span="2"></el-col>
                <el-col :span="6">
                  <el-button round type="danger" style="width:55px" plain size="mini" v-if="user.job === '班长'" @click="deleteGroup(item.id)">删除</el-button>
                </el-col>
                <el-col :span="1"></el-col>
                <el-col :span="6">
                  <el-button
                    round
                    type="success"
                    size="mini"
                    style="width:55px"
                    v-if="stuIdAndGroupId.groupId === '' && item.students.length <= 10"
                    @click="joinGroup(item.id)"
                    >加入</el-button
                  >
                  <el-button round type="danger" size="mini" style="width:55px" v-if="stuIdAndGroupId.groupId === item.id" plain @click="exitGroup(item.id)"
                    >退出</el-button
                  >
                </el-col>
                <el-col :span="1"></el-col>
                <el-col :span="6" v-if="user.job === '班长'">
                </el-col>
              </el-col>
            </template>
            <el-col :span="8" class="studentslist" v-for="(itemStrudent, indexStudent) in item.students" :key="indexStudent">
              <el-col :span="24" @click.native="openClick(item, itemStrudent)">
                <span> {{ itemStrudent.stuname }}({{ itemStrudent.type == '1' ? ' 组长' : '组员' }})</span>
              </el-col>
            </el-col>
            <van-dialog v-model="show" title="选择组长" :showConfirmButton="false">
              <van-form @submit="onSubmit">
                <van-field readonly clickable name="picker" :value="value" label="选择组长" placeholder="点击选择组长" @click="showPicker = true" />
                <div style="margin:16px,16px,0,16px;text-align:center">
                  <van-button type="info">提交</van-button>
                </div>
              </van-form>
            </van-dialog>
            <van-popup v-model="showPicker" position="bottom">
              <van-picker value-key="stuname" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
            </van-popup>
          </el-collapse-item>
        </el-collapse>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers, mapGetters } from 'vuex';
import Vue from 'vue';
import { Dialog } from 'vant';
// 全局注册
Vue.use(Dialog);
export default {
  name: 'groupList',
  props: {
    show: null,
    groupList: null,
    stuIdAndGroupId: null,
    form: null,
    columns: null,
  },
  components: {},
  data: () => ({
    value: '',
    column: ['组员', '组长'],
    showPicker: false,
  }),
  created() {},
  computed: {
    ...mapState(['user']),
    userid() {
      return this.user.userid;
    },
  },
  methods: {
    // 进组
    joinGroup(groupId) {
      Dialog.confirm({
        title: '进组',
        message: '确认要加入此组？',
      })
        .then(() => {
          this.$emit('joinGroup', { groupId });
        })
        .catch(() => {
          // on cancel
        });
    },
    // 退出组
    exitGroup(groupId) {
      Dialog.confirm({
        title: '退组',
        message: '确认要退出此组？',
      })
        .then(() => {
          this.$emit('exitGroup', { groupId });
        })
        .catch(() => {
          // on cancel
        });
    },
    // 删除组
    deleteGroup(groupId) {
      Dialog.confirm({
        title: '删除',
        message: '确认删除此组？',
      })
        .then(() => {
          this.$emit('deleteGroup', { groupId });
        })
        .catch(() => {
          // on cancel
        });
    },
    openClick(item) {
      this.$emit('opanSubmit', item);
    },
    onSubmit() {
      this.$emit('onSubmit', { data: this.form });
    },
    onConfirm(value, index) {
      this.value = value.stuname;
      this.showPicker = false;
      this.$emit('onvalue', { value });
    },
    onConfirms(value) {},
  },
};
</script>

<style lang="less" scoped>
p {
  padding: 0;
  margin: 0;
}
.list {
  background: #fff;
  margin: 0 5px 5px 5px;
  width: 97%;
  padding: 0 10px;
  border-radius: 15px;
}
.list .groupName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.childName {
  padding: 15px 0;
  font-size: 15px;
}
button {
  width: 120%;
}
/deep/.van-dialog {
  height: 400px;
}
.studentslist {
  text-align: center;
  padding: 5px 0;
}
</style>