声部动态变化时，更新数据

src/store/modules/prepareLessons.ts

@@ -3,6 +3,7 @@ import { store } from '@/store';
 
 export const usePrepareStore = defineStore('prepare-lessons-store', {
   state: () => ({
+    subjectId: null as any, // 基础声部
     baseCourseware: {} as any, // 基础教学课件
     selectKey: '', // 选的哪一节课
     lessonCoursewareId: '', // 哪个教材分类
@@ -14,6 +15,10 @@ export const usePrepareStore = defineStore('prepare-lessons-store', {
     selectResourceStatus: false // 资源状态
   }),
   getters: {
+    /** 获取资源状态 */
+    getSubjectId(): [string, number] {
+      return this.subjectId;
+    },
     /** 获取基础教学课件 */
     getBaseCourseware(): any {
       return this.baseCourseware;
@@ -52,6 +57,10 @@ export const usePrepareStore = defineStore('prepare-lessons-store', {
     }
   },
   actions: {
+    /** 设置基础声部 */
+    setSubjectId(subjectId: string | number) {
+      this.subjectId = subjectId;
+    },
     /** 设置基础教学课件 */
     setBaseCourseware(baseCourseware: any) {
       this.baseCourseware = baseCourseware;

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

@@ -5,7 +5,15 @@
   padding-left: 22px !important;
   padding-right: 22px !important;
 
+
   :global {
+    .n-base-selection {
+      --n-height: 38px !important;
+      width: 160px;
+      font-size: 15px;
+      border-radius: 8px !important;
+    }
+
     .n-button {
       border-radius: 8px;
       height: 38px;

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

@@ -1,21 +1,24 @@
 import { defineComponent, onMounted, reactive, watch } from 'vue';
 import styles from './index.module.less';
-import { NButton, NModal, NScrollbar, NSpace, NSpin } from 'naive-ui';
+import { NButton, NModal, NScrollbar, NSelect, NSpace, NSpin } from 'naive-ui';
 import CardType from '/src/components/card-type';
 import AttendClass from '/src/views/prepare-lessons/model/attend-class';
 import { usePrepareStore } from '/src/store/modules/prepareLessons';
+import { useCatchStore } from '/src/store/modules/catchData';
 import TheEmpty from '/src/components/TheEmpty';
 import { queryCourseware } from '../../../api';
 
 export default defineComponent({
   name: 'courseware-modal',
   setup() {
+    const catchStore = useCatchStore();
     const prepareStore = usePrepareStore();
     const forms = reactive({
       loadingStatus: false,
       showAttendClass: false
     });
 
+    // 获取列表
     const getList = async () => {
       forms.loadingStatus = true;
       try {
@@ -23,8 +26,7 @@ export default defineComponent({
         if (!prepareStore.getSelectKey) return;
         const { data } = await queryCourseware({
           coursewareDetailKnowledgeId: prepareStore.getSelectKey,
-          lessonCoursewareId: prepareStore.getLessonCoursewareId,
-          lessonCoursewareDetailId: prepareStore.getLessonCoursewareDetailId,
+          subjectId: prepareStore.getSubjectId,
           pag: 1,
           rows: 99
         });
@@ -49,7 +51,7 @@ export default defineComponent({
       forms.loadingStatus = false;
     };
 
-    // 监听选择的key
+    // 监听选择的key 左侧选择了其它的课
     watch(
       () => prepareStore.getSelectKey,
       () => {
@@ -57,13 +59,34 @@ export default defineComponent({
       }
     );
 
-    onMounted(() => {
-      getList();
+    onMounted(async () => {
+      // 获取教材分类列表
+      await catchStore.getSubjects();
+
+      const subjectList = catchStore.getSubjectList;
+      if (subjectList.length > 0) {
+        prepareStore.setSubjectId(subjectList[0].id);
+      }
+
+      await getList();
     });
     return () => (
       <div class={styles.coursewareModal}>
         <div class={styles.btnGroup}>
           <NSpace>
+            <NSelect
+              class={styles.selectSubject}
+              placeholder="选择声部"
+              options={catchStore.getSubjectList}
+              clearable
+              labelField="name"
+              valueField="id"
+              value={prepareStore.getSubjectId}
+              onUpdate:value={(val: any) => {
+                prepareStore.setSubjectId(val);
+                getList();
+              }}
+            />
             <NButton type="default">编辑</NButton>
           </NSpace>
 

src/views/prepare-lessons/components/resource-main/components/resource-item/index.tsx

@@ -1,10 +1,12 @@
-import { PropType, defineComponent, onMounted, reactive, ref } from 'vue';
+import { PropType, defineComponent, onMounted, reactive, watch } from 'vue';
 import ResourceSearchGroup from './resource-search-group';
 import { NScrollbar, NSpin } from 'naive-ui';
 import styles from './index.module.less';
 import CardType from '/src/components/card-type';
 import { materialQueryPage } from '/src/views/natural-resources/api';
 import TheEmpty from '/src/components/TheEmpty';
+import { usePrepareStore } from '/src/store/modules/prepareLessons';
+import { useThrottleFn } from '@vueuse/core';
 
 const formatType = (type: string) => {
   if (type === 'shareResources') {
@@ -24,6 +26,7 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const prepareStore = usePrepareStore();
     const state = reactive({
       loading: false,
       finshed: false, // 是否加载完
@@ -43,12 +46,14 @@ export default defineComponent({
     });
     const getList = async () => {
       try {
+        if (!prepareStore.getSubjectId) return;
         if (state.pagination.page === 1) {
           state.loading = true;
         }
         const { data } = await materialQueryPage({
           ...state.searchGroup,
-          ...state.pagination
+          ...state.pagination,
+          subjectId: prepareStore.getSubjectId
         });
         state.loading = false;
         const tempRows = data.rows || [];
@@ -79,6 +84,19 @@ export default defineComponent({
       getList();
     };
 
+    // 声部变化时
+    watch(
+      () => prepareStore.getSubjectId,
+      () => {
+        onSearch(state.searchGroup);
+      }
+    );
+
+    const throttledFn = useThrottleFn(() => {
+      state.pagination.page = state.pagination.page + 1;
+      getList();
+    }, 500);
+
     onMounted(() => {
       getList();
     });
@@ -97,8 +115,7 @@ export default defineComponent({
               !state.finshed &&
               !state.loading
             ) {
-              state.pagination.page = state.pagination.page + 1;
-              getList();
+              throttledFn();
             }
           }}>
           <NSpin show={state.loading} size={'small'}>

src/views/prepare-lessons/components/resource-main/components/resource-item/resource-search-group/index.tsx

@@ -19,8 +19,7 @@ export default defineComponent({
     const forms = reactive({
       type: 'MUSIC', //
       keyword: '',
-      bookVersionId: null,
-      subjectId: null
+      bookVersionId: null
     });
     const resourceType = ref([] as any);
 

src/views/prepare-lessons/components/resource-main/components/select-music/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, reactive, ref } from 'vue';
+import { defineComponent, onMounted, reactive, watch } from 'vue';
 import ResourceSearchGroup from './resource-search-group';
 import { NScrollbar, NSpin } from 'naive-ui';
 import styles from './index.module.less';
@@ -6,14 +6,13 @@ import CardType from '/src/components/card-type';
 import { materialQueryPage } from '/src/views/natural-resources/api';
 import TheEmpty from '/src/components/TheEmpty';
 import { useThrottleFn } from '@vueuse/core';
+import { usePrepareStore } from '/src/store/modules/prepareLessons';
 export default defineComponent({
   name: 'share-resources',
   setup() {
-    const scrollContentRef = ref();
+    const prepareStore = usePrepareStore();
     const state = reactive({
-      searchWord: '',
       loading: false,
-      pageTotal: 0,
       finshed: false, // 是否加载完
       pagination: {
         page: 1,
@@ -24,21 +23,21 @@ export default defineComponent({
         keyword: '',
         bookVersionId: null,
         subjectId: null,
-        sourceType: 2
+        sourceType: 2,
+        enableFlag: true
       },
-      tableList: [] as any,
-      teachingStatus: false,
-      show: false,
-      item: {} as any
+      tableList: [] as any
     });
     const getList = async () => {
       try {
+        if (!prepareStore.getSubjectId) return;
         if (state.pagination.page === 1) {
           state.loading = true;
         }
         const { data } = await materialQueryPage({
           ...state.searchGroup,
-          ...state.pagination
+          ...state.pagination,
+          subjectId: prepareStore.getSubjectId
         });
         state.loading = false;
         const tempRows = data.rows || [];
@@ -69,6 +68,14 @@ export default defineComponent({
       getList();
     };
 
+    // 声部变化时
+    watch(
+      () => prepareStore.getSubjectId,
+      () => {
+        onSearch(state.searchGroup);
+      }
+    );
+
     const throttledFn = useThrottleFn(() => {
       state.pagination.page = state.pagination.page + 1;
       getList();
@@ -104,7 +111,7 @@ export default defineComponent({
                   : ''
               ]}>
               {state.tableList.length > 0 && (
-                <div class={styles.list} ref={scrollContentRef}>
+                <div class={styles.list}>
                   {state.tableList.map((item: any) => (
                     <CardType isShowAdd item={item} />
                   ))}

src/views/prepare-lessons/components/resource-main/components/select-music/resource-search-group/index.module.less

@@ -9,9 +9,6 @@
   }
 
   :global {
-    .n-select {
-      max-width: 152px;
-    }
 
     .n-base-selection,
     .n-input {

src/views/prepare-lessons/components/resource-main/components/select-music/resource-search-group/index.tsx

@@ -43,17 +43,6 @@ export default defineComponent({
                 onSearch();
               }}
             />
-            <NSelect
-              placeholder="乐器"
-              options={catchStore.getSubjectList}
-              clearable
-              labelField="name"
-              valueField="id"
-              v-model:value={forms.subjectId}
-              onUpdate:value={() => {
-                onSearch();
-              }}
-            />
           </div>
 
           <NInput

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

@@ -1,9 +1,6 @@
 import { defineComponent, reactive } from 'vue';
 import styles from './index.module.less';
 import { NTabs, NTabPane, NModal } from 'naive-ui';
-import ShareResources from './components/share-resources';
-import MyResources from './components/my-resources';
-import MyCollect from './components/my-collect';
 import SelectMusicModal from '../../model/select-music';
 import { usePrepareStore } from '/src/store/modules/prepareLessons';
 import SelectResources from '../../model/select-resources';
@@ -15,6 +12,7 @@ export default defineComponent({
   setup() {
     const prepareStore = usePrepareStore();
     const forms = reactive({
+      tabType: 'shareResources',
       selectMusicStatus: false,
       selectResourceStatus: false
     });
@@ -29,9 +27,12 @@ export default defineComponent({
         {prepareStore.getTabType === 'courseware' ? (
           <NTabs
             animated
-            value="shareResources"
+            value={forms.tabType}
             paneClass={styles.paneTitle}
-            paneWrapperClass={styles.paneWrapperContainer}>
+            paneWrapperClass={styles.paneWrapperContainer}
+            onUpdate:value={(val: string) => {
+              forms.tabType = val;
+            }}>
             {{
               suffix: () => (
                 <div

src/views/prepare-lessons/model/select-music/index.tsx

@@ -6,11 +6,13 @@ import SearchGroup from './search-group';
 import { materialQueryPage } from '/src/views/natural-resources/api';
 import TheEmpty from '/src/components/TheEmpty';
 import { useThrottleFn } from '@vueuse/core';
+import { usePrepareStore } from '/src/store/modules/prepareLessons';
 
 export default defineComponent({
   name: 'select-music',
   emits: ['select'],
   setup(props, { emit }) {
+    const prepareStore = usePrepareStore();
     const state = reactive({
       loading: false,
       finshed: false, // 是否加载完
@@ -34,7 +36,8 @@ export default defineComponent({
         }
         const { data } = await materialQueryPage({
           ...state.searchGroup,
-          ...state.pagination
+          ...state.pagination,
+          subjectId: prepareStore.getSubjectId
         });
         state.loading = false;
         const tempRows = data.rows || [];

src/views/prepare-lessons/model/select-music/search-group.tsx

@@ -13,8 +13,7 @@ export default defineComponent({
     const forms = reactive({
       type: 'MUSIC', //
       keyword: '',
-      bookVersionId: null,
-      subjectId: null
+      bookVersionId: null
     });
 
     const onSearch = () => {

src/views/prepare-lessons/model/select-resources/search-group.tsx

@@ -1,62 +0,0 @@
-import { defineComponent, reactive, ref } from 'vue';
-import styles from './index.module.less';
-import { NButton, NForm, NFormItem, NInput, NSpace } from 'naive-ui';
-import TheSearch from '/src/components/TheSearch';
-
-export default defineComponent({
-  name: 'search-group',
-  setup() {
-    const isFocus = ref(false);
-    const forms = reactive({
-      search: ''
-    });
-    return () => (
-      <div class={styles.searchGroup}>
-        <NForm labelAlign="left" labelPlacement="left">
-          <NFormItem label="教材：">
-            <NSpace>
-              <NButton secondary strong type="primary" focusable={false}>
-                全部
-              </NButton>
-              <NButton quaternary focusable={false}>
-                人教版
-              </NButton>
-              <NButton quaternary focusable={false}>
-                声部训练
-              </NButton>
-              <NButton quaternary focusable={false}>
-                小曲目
-              </NButton>
-              <NButton quaternary focusable={false}>
-                考级曲目
-              </NButton>
-            </NSpace>
-          </NFormItem>
-          <NFormItem label="乐器：">
-            <NSpace>
-              <NButton secondary strong type="primary">
-                全部
-              </NButton>
-              <NButton quaternary focusable={false} type="default">
-                竖笛
-              </NButton>
-              <NButton quaternary focusable={false} type="default">
-                排萧
-              </NButton>
-              <NButton quaternary focusable={false} type="default">
-                口风琴
-              </NButton>
-              <NButton quaternary focusable={false} type="default">
-                陶笛
-              </NButton>
-              <NButton quaternary focusable={false} type="default">
-                葫芦丝
-              </NButton>
-            </NSpace>
-          </NFormItem>
-        </NForm>
-        <TheSearch class={styles.inputSearch} round />
-      </div>
-    );
-  }
-});

src/views/prepare-lessons/model/select-resources/select-item/index.tsx

@@ -1,10 +1,11 @@
-import { PropType, defineComponent, onMounted, reactive, ref } from 'vue';
+import { PropType, defineComponent, onMounted, reactive } from 'vue';
 import ResourceSearchGroup from './resource-search-group';
 import { NScrollbar, NSpin } from 'naive-ui';
 import styles from './index.module.less';
 import CardType from '/src/components/card-type';
 import { materialQueryPage } from '/src/views/natural-resources/api';
 import TheEmpty from '/src/components/TheEmpty';
+import { usePrepareStore } from '/src/store/modules/prepareLessons';
 
 const formatType = (type: string) => {
   if (type === 'shareResources') {
@@ -25,6 +26,7 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const prepareStore = usePrepareStore();
     const state = reactive({
       loading: false,
       finshed: false, // 是否加载完
@@ -51,7 +53,8 @@ export default defineComponent({
         }
         const { data } = await materialQueryPage({
           ...state.searchGroup,
-          ...state.pagination
+          ...state.pagination,
+          subjectId: prepareStore.getSubjectId
         });
         state.loading = false;
         const tempRows = data.rows || [];

src/views/prepare-lessons/model/select-resources/select-item/resource-search-group/index.tsx

@@ -20,8 +20,7 @@ export default defineComponent({
     const forms = reactive({
       type: 'MUSIC', //
       keyword: '',
-      bookVersionId: null,
-      subjectId: null
+      bookVersionId: null
     });
     const resourceType = ref([] as any);