train-dirtea/src/views/class/info/headStuList.vue

<template>
  <div id="headStuList">
    <!-- <el-row type="flex" justify="center" style="padding:10px 0">
      <el-col :span="6">
        <el-button type="primary" plain size="mini" @click.native="$router.push({ path: '/class/achieve', query: { classid: $attrs.classid } })">
          查看平时成绩
        </el-button>
      </el-col>
    </el-row> -->
    <el-row>
      <el-col :span="24" class="info">
        <el-col v-for="item in groupStuList" :key="item.id">
          <el-col v-if="item.students.length > 0">
            <van-divider content-position="left">{{ item.name }}</van-divider>
            <el-col :span="6" class="list" v-for="i in item.students" :key="i.stuid" @click.native="clickAssign({ id: i.stuid })">
              <p class="name" :style="`font-size:${changeNum(i.stuname)}px`">{{ i.stuname }}</p>
              <p class="job" v-if="i.job">{{ i.job }}<i class="el-icon-circle-check"></i></p>
            </el-col>
          </el-col>
        </el-col>
        <el-col>
          <van-divider content-position="left">未分组学生</van-divider>
          <el-col :span="6" class="list" v-for="(item, index) in noGroupStuList" :key="index" @click.native="clickAssign(item)">
            <p class="name" :style="`font-size:${changeNum(item.name)}px`">{{ item.name }}</p>
            <p class="job" v-if="item.job">{{ item.job }}<i class="el-icon-circle-check"></i></p>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog title="指派职务" width="90%" :visible.sync="assignShow" :before-close="handleClose">
      <el-form :model="assignForm">
        <el-form-item label="学生姓名">
          {{ assignForm.name }}
        </el-form-item>
        <el-form-item label="性别">
          {{ assignForm.gender }}
        </el-form-item>
        <el-form-item label="学校">
          {{ assignForm.school_name }}
        </el-form-item>
        <el-form-item label="寝室号">
          {{ assignForm.bedroom }}
        </el-form-item>
        <el-form-item label="手机号码">
          {{ assignForm.phone }}
        </el-form-item>
        <el-form-item label="学生职务">
          <el-select v-model="assignForm.job" placeholder="请选择学生职务">
            <el-option v-for="(item, index) in job_list" :key="index" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="outAssignShow">取 消</el-button>
        <el-button type="primary" @click="onAssignShow">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'headStuList',
  props: {
    headStuList: null,
    groupStuList: null,
    noGroupStuList: null,
    assignForm: null,
    assignShow: null,
    job_list: null,
  },
  components: {},
  data: () => ({}),
  created() {},
  computed: {},
  methods: {
    clickAssign(item) {
      let id = item.id;

      this.$emit('assign', { id, item });
    },
    outAssignShow() {
      this.$emit('outForm');
    },
    onAssignShow(id) {
      this.$emit('onForm', { data: this.assignForm });
    },
    handleClose() {
      this.$emit('handleClose');
    },
    changeNum(name) {
      if (name.length >= 5) {
        return 10;
      } else {
        return 15;
      }
    },
  },
};
</script>

<style lang="less" scoped>
p {
  padding: 0;
  margin: 0;
}
.info {
  margin: 15px 0 0 0;
}
.list {
  text-align: center;
  border: 1px solid #2c69fe;
  width: 70px;
  margin: 0 11px 10px 12px;
  padding: 5px 0px;
  border-radius: 10px;
  height: 50px;
}
.list .job {
  font-size: 10px;
  color: #405ffe;
}
/deep/.el-form-item {
  margin-bottom: 5px;
}
</style>