更新声部显示

src/views/prepare-lessons/components/lesson-main/courseware/index.tsx

@@ -293,6 +293,8 @@ export default defineComponent({
           // 判断是否有缓存
           prepareStore.setSubjectId(subjectList[0].id);
         }
+
+        // console.log(prepareStore.getSubjectId, 'getSubjectId');
       }
     };
 

src/views/prepare-lessons/components/lesson-main/index.tsx

@@ -20,12 +20,13 @@ export default defineComponent({
           onUpdate:value={(val: string) => {
             prepareStore.setTabType(val);
           }}>
-          <NTabPane name="courseware" tab="课件">
+          <NTabPane name="courseware" tab="课件" displayDirective="show">
             <Courseware />
           </NTabPane>
           <NTabPane
             name="train"
             tab="作业"
+            displayDirective="show"
             v-slots={{ tab: () => <span id="lessons-4">作业</span> }}
             {...{ id: 'lessons-4' }}>
             <Train />

src/views/prepare-lessons/components/lesson-main/train/index.module.less

@@ -57,6 +57,45 @@
   }
 }
 
+.btnSubjectList {
+  :global {
+
+    .n-base-selection-label {
+      &::before {
+        margin-left: 12px;
+        content: ' ';
+        width: 24px;
+        height: 24px;
+        background: url('../../../images/icon-subject-name.png') no-repeat center;
+        background-size: contain;
+      }
+    }
+
+    .n-base-selection-input {
+      padding-left: 8px;
+    }
+
+    .n-base-selection .n-base-selection-overlay {
+      left: 24px;
+    }
+  }
+}
+
+.btnItem {
+  display: flex;
+  align-items: center;
+
+  .btnTitle {
+    flex-shrink: 0;
+    font-size: 18px;
+    font-weight: 600;
+  }
+
+  &:last-child {
+    margin-left: 12px;
+  }
+}
+
 .listContainer {
   margin-top: 12px;
   // // 52 + 28 + 38

src/views/prepare-lessons/components/lesson-main/train/index.tsx

@@ -185,14 +185,36 @@ export default defineComponent({
       }
     };
 
+    // const checkSubjectIds = () => {
+    //   const subjectList = prepareStore.getSubjectList;
+
+    //   // 并且没有声部时才会更新
+    //   if (subjectList.length > 0) {
+    //     // 判断浏览器上面是否有
+    //     const index = subjectList.findIndex(
+    //       (subject: any) => subject.id == forms.subjectId
+    //     );
+
+    //     // 并且声部在列表中
+    //     if (forms.subjectId && index >= 0) {
+    //       prepareStore.setSubjectId(forms.subjectId);
+    //     } else {
+    //       // 判断是否有缓存
+    //       prepareStore.setSubjectId(subjectList[0].id);
+    //     }
+    //   }
+    // };
+
     onMounted(async () => {
       // 获取教材分类列表
-      await catchStore.getSubjects();
+      // await catchStore.getSubjects();
 
-      const subjectList = catchStore.getSubjectList;
-      if (subjectList.length > 0 && !prepareStore.getSubjectId) {
-        prepareStore.setSubjectId(subjectList[0].id);
-      }
+      // const subjectList = catchStore.getSubjectList;
+      // if (subjectList.length > 0 && !prepareStore.getSubjectId) {
+      //   prepareStore.setSubjectId(subjectList[0].id);
+      // }
+      // 获取教材分类列表
+      // checkSubjectIds();
 
       await getList();
     });
@@ -231,7 +253,7 @@ export default defineComponent({
             </NSpace>
           ) : (
             <NSpace>
-              <NSelect
+              {/* <NSelect
                 placeholder="选择声部"
                 options={catchStore.getSubjectList}
                 labelField="name"
@@ -240,7 +262,21 @@ export default defineComponent({
                 onUpdate:value={(val: any) => {
                   prepareStore.setSubjectId(val);
                 }}
-              />
+              /> */}
+              <div class={styles.btnItem}>
+                <span class={styles.btnTitle}>声部：</span>
+                <NSelect
+                  placeholder="选择声部"
+                  class={styles.btnSubjectList}
+                  options={prepareStore.getSubjectList}
+                  labelField="name"
+                  valueField="id"
+                  value={prepareStore.getSubjectId}
+                  onUpdate:value={(val: any) => {
+                    prepareStore.setSubjectId(val);
+                  }}
+                />
+              </div>
               <NButton
                 type="default"
                 onClick={() => {