train-student/src/layout/class/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 :span="6" class="list" v-for="(item, index) in headStuList" :key="index" @click.native="clickAssign(item.id)">
          <p class="name">{{ 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-row>
    <el-dialog title="指派职务" width="90%" :visible.sync="assignShow" :before-close="handleClose">
      <el-form :model="assignForm">
        <el-form-item label="学生姓名">
          <!-- <el-input v-model="assignForm.name" :disabled="true"></el-input> -->
          {{ assignForm.name }}
        </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,
    assignForm: null,
    assignShow: null,
    job_list: null,
  },
  components: {},
  data: () => ({}),
  created() {},
  computed: {},
  methods: {
    clickAssign(id) {
      this.$emit('assign', id);
    },
    outAssignShow() {
      this.$emit('outForm');
    },
    onAssignShow(id) {
      this.$emit('onForm', { data: this.assignForm });
    },
    handleClose() {
      this.$emit('handleClose');
    },
  },
};
</script>

<style lang="less" scoped>
p {
  padding: 0;
  margin: 0;
}
.info {
  margin: 15px 0 0 0;
}
.list {
  text-align: center;
  min-height: 50px;
}
.list .job {
  font-size: 10px;
  color: #405ffe;
}
</style>