更新

src/layout/class/classList.vue

@@ -4,7 +4,12 @@
       <el-col :span="24">
         <van-tabs v-model="active">
           <van-tab title="班级名单">
-            显示班级学生名称（带有职务），班主任：点击学生指派学生担任职务。学委：给学生上分（平时成绩只有一个，课程作业成绩，都要显示）
+            <span v-if="role === '1'">
+              <headNameList v-on="$listeners" :headNameList="headNameList" :assignShow="assignShow" :assignForm="assignForm"></headNameList>
+            </span>
+            <span v-else>
+              学生
+            </span>
           </van-tab>
           <van-tab title="班级分组">
             班级分组，需要有创建分组按钮，显示小组名称，小组人数，加入小组。（未分组学生显示）
@@ -16,12 +21,23 @@
 </template>
 
 <script>
+import headNameList from '@/layout/class/nameList/headNameList.vue';
 export default {
   name: 'classList',
-  props: {},
-  components: {},
+  props: {
+    headNameList: null, //班主任看班級學生名單
+    assignShow: null, //指派职务弹窗
+    assignForm: null, //指派职务form表单
+  },
+  components: {
+    // 显示班级学生名称（带有职务）
+    // 班主任：点击学生指派学生担任职务。
+    // 学委：给学生上分（平时成绩只有一个，课程作业成绩，都要显示）
+    headNameList, //班主任学生名单
+  },
   data: () => ({
     active: 0,
+    role: '1',
   }),
   created() {},
   computed: {},

src/layout/class/nameList/headNameList.vue

@@ -0,0 +1,86 @@
+<template>
+  <div id="headNameList">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="6" class="list" v-for="(item, index) in headNameList" :key="index" @click.native="clickAssign()">
+          <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">
+      <el-form :model="assignForm">
+        <el-form-item label="学生姓名">
+          <el-input v-model="assignForm.name" :disabled="true"></el-input>
+        </el-form-item>
+        <el-form-item label="学生职务">
+          <!-- <el-input v-model="assignForm.job" placeholder="请输入学生职务"></el-input> -->
+          <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: 'headNameList',
+  props: {
+    headNameList: null,
+    assignForm: null,
+    assignShow: null,
+  },
+  components: {},
+  data: () => ({
+    job_list: [
+      {
+        name: '班长',
+      },
+      {
+        name: '学委',
+      },
+    ],
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    clickAssign() {
+      this.$emit('assign');
+    },
+    outAssignShow() {
+      this.$emit('outForm');
+    },
+    onAssignShow() {
+      this.$emit('onForm', { data: this.assignForm });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.list {
+  text-align: center;
+  padding: 15px 0 0 0;
+}
+.list .name {
+  font-size: 14px;
+}
+.list .job {
+  font-size: 12px;
+  color: #405ffe;
+  padding: 5px 0 0 0;
+}
+/deep/.el-dialog__headerbtn {
+  display: none;
+}
+</style>

src/views/class/index.vue

@@ -6,7 +6,14 @@
           <topInfo></topInfo>
         </el-col>
         <el-col :span="24" class="main">
-          <classList></classList>
+          <classList
+            :headNameList="headNameList"
+            @assign="clickAssign"
+            :assignShow="assignShow"
+            :assignForm="assignForm"
+            @outForm="outAssignShow"
+            @onForm="onAssignShow"
+          ></classList>
         </el-col>
         <el-col :span="24" class="foot">
           <footInfo></footInfo>
@@ -29,10 +36,42 @@ export default {
     footInfo, //底部导航
     classList, //班级名单
   },
-  data: () => ({}),
+  data: () => ({
+    headNameList: [
+      {
+        name: '测试人员',
+        job: '班长',
+      },
+      {
+        name: '测试人',
+        job: '',
+      },
+      {
+        name: '测试人员',
+        job: '班长',
+      },
+      {
+        name: '测试人',
+        job: '班长',
+      },
+    ],
+    assignShow: false,
+    assignForm: {},
+  }),
   created() {},
   computed: {},
-  methods: {},
+  methods: {
+    clickAssign() {
+      this.assignShow = true;
+    },
+    onAssignShow(assignForm) {
+      console.log(assignForm);
+      this.assignShow = false;
+    },
+    outAssignShow() {
+      this.assignShow = false;
+    },
+  },
 };
 </script>