Ver Fonte

fix(sixHatPage): 修复六帽页面成员选择逻辑,适配真实学生数据

1. 将成员选择绑定改为使用memberIds计算属性处理userid
2. 新增从路由获取cid/oid并加载班级学生的逻辑
3. 统一学生数据的userid字段命名,替换原id字段
4. 优化成员名称获取的计算逻辑
lsc há 1 dia atrás
pai
commit
8dc085d121
1 ficheiros alterados com 45 adições e 15 exclusões
  1. 45 15
      src/components/pages/workPage/components/sixHatPage.vue

+ 45 - 15
src/components/pages/workPage/components/sixHatPage.vue

@@ -17,9 +17,9 @@
         <p class="shMemberSubtitle">{{ lang.ssSHMemberSubtitle }}</p>
 
         <div class="shMemberBox">
-          <el-select v-model="work.members" multiple filterable :filter-method="onMemberFilter" collapse-tags
-            placeholder="" :popper-class="'shMemberSelectPopper'" :no-data-text="' '" @change="onMemberChange">
-            <el-option v-for="stu in filteredStudents" :key="stu.id" :label="stu.name" :value="stu.id">
+          <el-select v-model="memberIds" multiple filterable :filter-method="onMemberFilter" collapse-tags
+            placeholder="" :popper-class="'shMemberSelectPopper'" :no-data-text="' '">
+            <el-option v-for="stu in filteredStudents" :key="stu.userid" :label="stu.name" :value="stu.userid">
               <span>{{ stu.name }}</span>
             </el-option>
           </el-select>
@@ -529,22 +529,29 @@ export default {
       countdownRemaining: 0,
       _countdownTimer: null,
 
-      // mock 学生
+      // 默认 mock 学生(无 cid 或接口无数据时使用)
       allStudents: [
-        { id: 's1', name: '同学A' },
-        { id: 's2', name: '同学B' },
-        { id: 's3', name: '同学C' },
-        { id: 's4', name: '同学D' },
-        { id: 's5', name: '同学E' },
-        { id: 's6', name: '同学F' },
-        { id: 's7', name: '同学G' },
-        { id: 's8', name: '同学H' },
+        { userid: 's1', name: '同学A' },
+        { userid: 's2', name: '同学B' },
+        { userid: 's3', name: '同学C' },
+        { userid: 's4', name: '同学D' },
+        { userid: 's5', name: '同学E' },
+        { userid: 's6', name: '同学F' },
+        { userid: 's7', name: '同学G' },
+        { userid: 's8', name: '同学H' },
       ],
       recordObj: { status: '0', loading: false, startTime: 0 },
       memberSearchText: '',
       _initialized: false,
+      cid: this.$route.query.cid || '',
+      oid: this.$route.query.oid || '',
     };
   },
+  async created() {
+    if (this.cid) {
+      await this.loadClassStudents();
+    }
+  },
   computed: {
     // 完整帽子列表(带 i18n 文案)
     hatList() {
@@ -581,6 +588,18 @@ export default {
       if (!q) return this.allStudents;
       return this.allStudents.filter(s => s.name.indexOf(q) > -1);
     },
+    // el-select v-model 绑定:getter 返回 userid 数组,setter 将选中项存为 {userid, name}
+    memberIds: {
+      get() {
+        return (this.work.members || []).map(m => m.userid || m);
+      },
+      set(val) {
+        this.work.members = (val || []).map(uid => {
+          const stu = this.allStudents.find(s => s.userid === uid);
+          return { userid: uid, name: stu ? stu.name : '' };
+        });
+      },
+    },
     iframeUrl() {
       if (this.lang && this.lang.lang === 'com') return 'https://cloud.cocorobo.com/browser/public/index.html';
       if (this.lang && this.lang.lang === 'hk') return 'https://cloud.cocorobo.hk/browser/public/index.html';
@@ -622,8 +641,7 @@ export default {
       return this.currentHatIdx === this.selectedHats.length - 1;
     },
     memberNames() {
-      const ids = this.work.members || [];
-      return this.allStudents.filter(s => ids.indexOf(s.id) > -1).map(s => s.name);
+      return (this.work.members || []).map(m => m.name || '');
     },
     // 最终渲染的"怎么做"步骤 —— 固定显示 6 个帽子思考方法(i18n 定义),剥离文案自带的序号前缀
     effectiveHowToSteps() {
@@ -745,9 +763,21 @@ export default {
     },
   },
   methods: {
+    // —— 加载班级学生(接口无数据时保持 mock)——
+    async loadClassStudents() {
+      try {
+        const params = { oid: this.oid, claid: this.cid, inp: '' };
+        const res = await this.ajax.get(this.$store.state.api + 'selectclaStu', params);
+        const list = (res.data && res.data[0]) || [];
+        if (list.length) {
+          this.allStudents = list.map(s => ({ userid: s.userid, name: s.name }));
+        }
+      } catch (e) {
+        console.error('loadClassStudents error:', e);
+      }
+    },
     // —— 成员选择 ——
     onMemberFilter(query) { this.memberSearchText = query || ''; },
-    onMemberChange(val) { this.work.members = val || []; },
     confirmMembers() {
       if (!this.work.members || this.work.members.length === 0) return;
       if (this.work.enableContentConfigurable) {