修改问题

components.d.ts

@@ -10,6 +10,8 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     Flipper: typeof import('./src/components/timerMeter/modals/flipper.vue')['default']
+    NTabPane: typeof import('naive-ui')['NTabPane']
+    NTabs: typeof import('naive-ui')['NTabs']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

src/components/card-type/index.tsx

@@ -45,6 +45,11 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    // 是否禁用添加按钮
+    isShowAddDisabled: {
+      type: Boolean,
+      default: false
+    },
     // 鼠标移动上面的时候是否自动播放，或者可以点击
     disabledMouseHover: {
       type: Boolean,
@@ -133,6 +138,7 @@ export default defineComponent({
                     previewDisabled={props.disabledMouseHover}
                     objectFit="cover"
                     src={props.item.coverImg}
+                    previewSrc={props.item.content}
                   />
                 )}
                 {/* 乐谱 */}
@@ -219,22 +225,40 @@ export default defineComponent({
                 )}
 
                 {/* 添加按钮 */}
-                {props.isShowAdd && (
-                  <NButton
-                    type="primary"
-                    class={[
-                      styles.addBtn,
-                      props.item.exist ? styles.addBtnDisabled : ''
-                    ]}
-                    disabled={props.item.exist}
-                    onClick={(e: MouseEvent) => {
-                      e.stopPropagation();
-                      e.preventDefault();
-                      emit('add', props.item);
-                    }}>
-                    {props.item.exist ? '已添加' : '添加'}
-                  </NButton>
-                )}
+                {props.isShowAdd &&
+                  (props.item.exist ? (
+                    <NButton
+                      type="primary"
+                      class={[
+                        styles.addBtn,
+                        props.item.exist ? styles.addBtnDisabled : ''
+                      ]}
+                      disabled={props.item.exist || props.isShowAddDisabled}
+                      onClick={(e: MouseEvent) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        emit('add', props.item);
+                      }}>
+                      {props.item.exist ? '已添加' : '添加'}
+                    </NButton>
+                  ) : (
+                    !props.isShowAddDisabled && (
+                      <NButton
+                        type="primary"
+                        class={[
+                          styles.addBtn,
+                          props.item.exist ? styles.addBtnDisabled : ''
+                        ]}
+                        disabled={props.item.exist || props.isShowAddDisabled}
+                        onClick={(e: MouseEvent) => {
+                          e.stopPropagation();
+                          e.preventDefault();
+                          emit('add', props.item);
+                        }}>
+                        {props.item.exist ? '已添加' : '添加'}
+                      </NButton>
+                    )
+                  ))}
               </div>
             )
           }}

src/store/modules/prepareLessons.ts

@@ -15,7 +15,9 @@ export const usePrepareStore = defineStore('prepare-lessons-store', {
     selectMusicStatus: false, // 乐谱状态
     selectResourceStatus: false, // 资源状态
     isAddResource: false, // 是否添加资源
-    isAddTrain: false // 是否添加训练
+    isEditResource: false, // 是否编辑资源
+    iseditTrain: false, // 是否编辑训练,
+    isAddTrain: false // 是否添加训练,
   }),
   getters: {
     /** 获取资源状态 */
@@ -66,6 +68,14 @@ export const usePrepareStore = defineStore('prepare-lessons-store', {
     getIsAddResource(): boolean {
       return this.isAddResource;
     },
+    /** 获取是否修改资源 */
+    getIsEditResource(): boolean {
+      return this.isEditResource;
+    },
+    /** 获取是否修改训练 */
+    getIsEditTrain(): boolean {
+      return this.iseditTrain;
+    },
     /** 获取是否添加训练 */
     getIsAddTrain(): boolean {
       return this.isAddTrain;
@@ -123,6 +133,14 @@ export const usePrepareStore = defineStore('prepare-lessons-store', {
     /** 设置训练状态 */
     setIsAddTrain(status: boolean) {
       this.isAddTrain = status;
+    },
+    /** 设置资源状态 */
+    setIsEditResource(status: boolean) {
+      this.isEditResource = status;
+    },
+    /** 设置训练状态 */
+    setIsEditTrain(status: boolean) {
+      this.iseditTrain = status;
     }
   }
 });

src/views/attend-class/index.module.less

@@ -57,10 +57,11 @@
   align-items: center;
   justify-content: space-between;
   height: 50px;
-  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent);
+  // background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent);
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
   transition: transform 0.5s;
   box-sizing: border-box;
-  font-size: 22px;
+  font-size: 22Px;
 
   div {
     box-sizing: border-box;
@@ -114,7 +115,8 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 12px;
+  font-size: 17Px;
+  font-weight: bold;
   color: #fff;
 }
 

src/views/attend-class/index.tsx

@@ -575,10 +575,10 @@ export default defineComponent({
                             }
                           }}
                           onEnded={() => {
-                            const _index = popupData.activeIndex + 1;
-                            if (_index < data.itemList.length) {
-                              handleSwipeChange(_index);
-                            }
+                            // const _index = popupData.activeIndex + 1;
+                            // if (_index < data.itemList.length) {
+                            //   handleSwipeChange(_index);
+                            // }
                           }}
                           onReset={() => {
                             if (!m.videoEle?.paused) {

src/views/attend-class/model/train-settings/index.tsx

@@ -89,7 +89,7 @@ export default defineComponent({
           `${evaluateDifficult[configJson.evaluateDifficult]}`,
           '全部小节',
           `速度${configJson.evaluateSpeed}`,
-          `${configJson.trainingTimes}分钟`
+          `${configJson.trainingTimes}分合格`
         ];
       } else {
         tList = [

src/views/natural-resources/components/my-collect/index.tsx

@@ -7,7 +7,7 @@ import { favorite, materialQueryPage, materialRemove } from '../../api';
 import { NSpin, useDialog, useMessage } from 'naive-ui';
 import TheEmpty from '@/components/TheEmpty';
 import CardPreview from '@/components/card-preview';
-import MyCollogeGuide from '@/custom-plugins/guide-page/myColloge-guide'
+import MyCollogeGuide from '@/custom-plugins/guide-page/myColloge-guide';
 export default defineComponent({
   name: 'share-resources',
   setup() {
@@ -23,7 +23,7 @@ export default defineComponent({
       },
       searchGroup: {
         type: '', //
-        keyword: '',
+        name: '',
         bookVersionId: null,
         subjectId: null,
         sourceType: 4
@@ -58,14 +58,14 @@ export default defineComponent({
           });
         });
         state.tableList = temp || [];
-        setTimeout(()=>{
-          showGuide.value= true;
-        },500)
+        setTimeout(() => {
+          showGuide.value = true;
+        }, 500);
       } catch {
         state.loading = false;
       }
     };
-    const showGuide = ref(false)
+    const showGuide = ref(false);
     const onSearch = async (item: any) => {
       state.pagination.page = 1;
       state.searchGroup = Object.assign(state.searchGroup, item);
@@ -114,7 +114,7 @@ export default defineComponent({
         <SearchGroupResources onSearch={(item: any) => onSearch(item)} />
 
         <NSpin v-model:show={state.loading} style={{ 'min-height': '50vh' }}>
-          <div class={styles.list} id='myColloge-0'>
+          <div class={styles.list} id="myColloge-0">
             {state.tableList.map((item: any) => (
               <CardType
                 item={item}
@@ -145,7 +145,7 @@ export default defineComponent({
 
         {/* 弹窗查看 */}
         <CardPreview v-model:show={state.show} item={state.item} />
-        {showGuide.value?<MyCollogeGuide></MyCollogeGuide>:null}
+        {showGuide.value ? <MyCollogeGuide></MyCollogeGuide> : null}
       </>
     );
   }

src/views/natural-resources/components/my-collect/search-group-resources.tsx

@@ -13,7 +13,7 @@ export default defineComponent({
     const resourceList = ref([] as any[]);
     const forms = reactive({
       type: '', //
-      keyword: '',
+      name: '',
       bookVersionId: null,
       subjectId: null
     });
@@ -102,7 +102,7 @@ export default defineComponent({
             class={styles.inputSearch}
             round
             onSearch={(val: string) => {
-              forms.keyword = val;
+              forms.name = val;
               onSearch();
             }}
           />

src/views/natural-resources/components/my-resources/index.tsx

@@ -15,7 +15,7 @@ import UploadModal from './upload-modal';
 import CardPreview from '@/components/card-preview';
 import resourceDefault from '../../images/resource-default.svg';
 import resourceChecked from '../../images/resource-checked.svg';
-import MyResourcesGuide from '@/custom-plugins/guide-page/myResources-guide'
+import MyResourcesGuide from '@/custom-plugins/guide-page/myResources-guide';
 export default defineComponent({
   name: 'share-resources',
   setup() {
@@ -31,7 +31,7 @@ export default defineComponent({
       },
       searchGroup: {
         type: '', //
-        keyword: '',
+        name: '',
         bookVersionId: null,
         subjectId: null,
         sourceType: 3
@@ -44,7 +44,7 @@ export default defineComponent({
       editList: [] as any, // TOD
       editIds: [] as any // 编辑的
     });
-    const showGuide = ref(false)
+    const showGuide = ref(false);
     const getList = async () => {
       try {
         state.loading = true;
@@ -71,9 +71,9 @@ export default defineComponent({
           });
         });
         state.tableList = temp || [];
-        setTimeout(()=>{
-          showGuide.value= true;
-        },500)
+        setTimeout(() => {
+          showGuide.value = true;
+        }, 500);
       } catch {
         state.loading = false;
       }
@@ -269,7 +269,7 @@ export default defineComponent({
             list={state.editList}
           />
         </NModal>
-        {showGuide.value?<MyResourcesGuide></MyResourcesGuide>:null}
+        {showGuide.value ? <MyResourcesGuide></MyResourcesGuide> : null}
       </>
     );
   }

src/views/natural-resources/components/my-resources/search-group-resources.tsx

@@ -19,7 +19,7 @@ export default defineComponent({
     const catchStore = useCatchStore();
     const forms = reactive({
       type: '', //
-      keyword: '',
+      name: '',
       bookVersionId: null,
       subjectId: null
     });
@@ -169,7 +169,7 @@ export default defineComponent({
             class={styles.inputSearch}
             round
             onSearch={(val: string) => {
-              forms.keyword = val;
+              forms.name = val;
               onSearch();
             }}
           />

src/views/natural-resources/components/my-resources/upload-modal/index.tsx

@@ -151,6 +151,13 @@ export default defineComponent({
 
       await catchStore.getSubjects();
     });
+
+    // 全选
+    const chioseAll = (item: any, list: any) => {
+      item.subjectIds = list.map((item: any) => {
+        return item.id;
+      }) as any;
+    };
     return () => (
       <div class={styles.uploadModal}>
         <NScrollbar style={{ 'max-height': '55vh' }}>
@@ -229,6 +236,20 @@ export default defineComponent({
                       multiple
                       maxTagCount={2}
                       clearable
+                      v-slots={{
+                        action: () => (
+                          <>
+                            <NButton
+                              text
+                              style=" --n-width: 100% "
+                              onClick={() =>
+                                chioseAll(item, catchStore.getSubjectList)
+                              }>
+                              全选
+                            </NButton>
+                          </>
+                        )
+                      }}
                     />
                   </NFormItem>
                 </div>
@@ -241,7 +262,7 @@ export default defineComponent({
                     accept=".jpg,jpeg,.png,audio/mp3,video/mp4"
                     showFileList={false}
                     ref={uploadRef}
-                    cropper
+                    // cropper
                     options={{
                       autoCropWidth: 320,
                       autoCropHeight: 180,
@@ -281,6 +302,23 @@ export default defineComponent({
                       multiple
                       maxTagCount={2}
                       clearable
+                      v-slots={{
+                        action: () => (
+                          <>
+                            <NButton
+                              text
+                              style=" --n-width: 100% "
+                              onClick={() =>
+                                chioseAll(
+                                  uploadForms,
+                                  catchStore.getSubjectList
+                                )
+                              }>
+                              全选
+                            </NButton>
+                          </>
+                        )
+                      }}
                     />
                   </NFormItem>
                 </div>

src/views/natural-resources/components/share-resources/index.tsx

@@ -8,7 +8,7 @@ import { NModal, NSpin } from 'naive-ui';
 import TheEmpty from '/src/components/TheEmpty';
 import CardPreview from '/src/components/card-preview';
 import AddTeaching from '../../model/add-teaching';
-import ShareResourcesGuide from '@/custom-plugins/guide-page/shareResources-guide'
+import ShareResourcesGuide from '@/custom-plugins/guide-page/shareResources-guide';
 
 export default defineComponent({
   name: 'share-resources',
@@ -23,7 +23,7 @@ export default defineComponent({
       },
       searchGroup: {
         type: 'MUSIC', //
-        keyword: '',
+        name: '',
         bookVersionId: null,
         subjectId: null,
         sourceType: 2
@@ -33,7 +33,7 @@ export default defineComponent({
       show: false,
       item: {} as any
     });
-    const showGuide = ref(false)
+    const showGuide = ref(false);
     const getList = async () => {
       try {
         state.loading = true;
@@ -57,9 +57,9 @@ export default defineComponent({
           });
         });
         state.tableList = temp || [];
-        setTimeout(()=>{
-          showGuide.value = true
-        },500)
+        setTimeout(() => {
+          showGuide.value = true;
+        }, 500);
       } catch {
         state.loading = false;
       }
@@ -97,29 +97,32 @@ export default defineComponent({
 
         <NSpin v-model:show={state.loading} style={{ 'min-height': '50vh' }}>
           <div class={styles.list}>
-            {state.tableList.map((item: any,index:number) => (
+            {state.tableList.map((item: any, index: number) => (
               <>
-              {index ==0?    <CardType
-              {...{id:'shareResources-1'}}
-                item={item}
-                disabledMouseHover={false}
-                onClick={(val: any) => {
-                  if (val.type === 'IMG') return;
-                  state.show = true;
-                  state.item = val;
-                }}
-                onCollect={(item: any) => onCollect(item)}
-              />:    <CardType
-              item={item}
-              disabledMouseHover={false}
-              onClick={(val: any) => {
-                if (val.type === 'IMG') return;
-                state.show = true;
-                state.item = val;
-              }}
-              onCollect={(item: any) => onCollect(item)}
-            />}
-
+                {index == 0 ? (
+                  <CardType
+                    {...{ id: 'shareResources-1' }}
+                    item={item}
+                    disabledMouseHover={false}
+                    onClick={(val: any) => {
+                      if (val.type === 'IMG') return;
+                      state.show = true;
+                      state.item = val;
+                    }}
+                    onCollect={(item: any) => onCollect(item)}
+                  />
+                ) : (
+                  <CardType
+                    item={item}
+                    disabledMouseHover={false}
+                    onClick={(val: any) => {
+                      if (val.type === 'IMG') return;
+                      state.show = true;
+                      state.item = val;
+                    }}
+                    onCollect={(item: any) => onCollect(item)}
+                  />
+                )}
               </>
             ))}
 
@@ -149,8 +152,7 @@ export default defineComponent({
           blockScroll={false}>
           <AddTeaching onClose={() => (state.teachingStatus = false)} />
         </NModal>
-        {showGuide.value?<ShareResourcesGuide></ShareResourcesGuide>:null}
-
+        {showGuide.value ? <ShareResourcesGuide></ShareResourcesGuide> : null}
       </>
     );
   }

src/views/natural-resources/components/share-resources/search-group-resources.tsx

@@ -13,7 +13,7 @@ export default defineComponent({
     const catchStore = useCatchStore();
     const forms = reactive({
       type: 'MUSIC', //
-      keyword: '',
+      name: '',
       bookVersionId: null,
       subjectId: null
     });
@@ -34,13 +34,13 @@ export default defineComponent({
     };
     const setCollapse = (flag: boolean) => {
       isCollapse.value = flag;
-      getLive()
+      getLive();
     };
     const getLive = () => {
       divDomList.value = [...new Set(divDomList.value)];
       let offsetLeft = -1;
       divDomList.value.forEach((item: any, index: number) => {
-        console.log(item.offsetLeft)
+        console.log(item.offsetLeft);
         if (index === 0) {
           line.value = 1;
           offsetLeft = item.offsetLeft;
@@ -51,20 +51,16 @@ export default defineComponent({
         if (!isCollapse.value) {
           if (line.value > 1) {
             //从第3行开始 隐藏标签
-            item.style.display = 'none'
+            item.style.display = 'none';
 
             // 显示展开按钮  class名chu是在前面动态添加的
           } else {
-            item.style.display = 'block'
-
+            item.style.display = 'block';
           }
         } else {
-          item.style.display = 'block'
+          item.style.display = 'block';
         }
-
-
       });
-
     };
     onMounted(async () => {
       // 获取教材分类列表
@@ -116,14 +112,13 @@ export default defineComponent({
         </div>
         <NForm labelAlign="left" labelPlacement="left">
           {forms.type === 'MUSIC' && (
-            <div class={styles.collapsSection}>
+            <div class={[styles.collapsSection]}>
               <NFormItem label="教材：">
                 <div
                   class={[
                     styles.collapseWrap,
                     isCollapse.value ? '' : styles.isHidden
                   ]}
-
                   ref={collapseWrapRef}>
                   <NSpace class={[styles.spaceSection]}>
                     {catchStore.getAllMusicCategories.map((music: any) => (
@@ -145,17 +140,18 @@ export default defineComponent({
                         {music.name}
                       </NButton>
                     ))}
-                    <div onClick={() => {
-                      setCollapse(!isCollapse.value)
-                    }}>
+                    <div
+                      onClick={() => {
+                        setCollapse(!isCollapse.value);
+                      }}>
                       <NImage
                         previewDisabled
                         src={isCollaose}
-                        class={[styles.collaoseBtn, isCollapse.value ? styles.isStart : ""]}
-                      ></NImage>
-
+                        class={[
+                          styles.collaoseBtn,
+                          isCollapse.value ? styles.isStart : ''
+                        ]}></NImage>
                     </div>
-
                   </NSpace>
                 </div>
               </NFormItem>
@@ -185,7 +181,7 @@ export default defineComponent({
             class={styles.inputSearch}
             round
             onSearch={(val: string) => {
-              forms.keyword = val;
+              forms.name = val;
               onSearch();
             }}
           />

src/views/natural-resources/model/add-teaching/index.tsx

@@ -102,7 +102,7 @@ export default defineComponent({
       try {
         await api_lessonCoursewareSave(form);
         Object.assign(form, initState());
-        message.success('添加成功');
+        message.success(props.item.id ? '保存成功' : '添加成功');
         emit('close', true);
         emit('confirm');
       } catch {

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

@@ -153,6 +153,7 @@ export default defineComponent({
         message.success('编辑成功');
         forms.removeVisiable = false;
         prepareStore.setCoursewareList(deepClone(forms.coursewareList));
+        prepareStore.setIsEditResource(false);
         // 重置临时删除编号
         forms.removeIds = [];
       } catch {
@@ -235,6 +236,7 @@ export default defineComponent({
                 type="error"
                 onClick={() => {
                   forms.drag = false;
+                  prepareStore.setIsEditResource(false);
                   forms.removeIds = [];
                   getList();
                 }}>
@@ -262,7 +264,12 @@ export default defineComponent({
                   getList();
                 }}
               />
-              <NButton type="default" onClick={() => (forms.drag = true)}>
+              <NButton
+                type="default"
+                onClick={() => {
+                  forms.drag = true;
+                  prepareStore.setIsEditResource(true);
+                }}>
                 编辑
               </NButton>
             </NSpace>

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

@@ -65,6 +65,7 @@ export default defineComponent({
         message.success('编辑成功');
         forms.removeVisiable = false;
         prepareStore.setCoursewareList(forms.trainList);
+        prepareStore.setIsEditTrain(false);
         // 重置临时删除编号
         forms.removeIds = [];
       } catch {
@@ -97,7 +98,7 @@ export default defineComponent({
               `${evaluateDifficult[configJson.evaluateDifficult]}`,
               '全部小节',
               `速度${configJson.evaluateSpeed}`,
-              `${configJson.trainingTimes}分钟`
+              `${configJson.trainingTimes}分合格`
             ];
           } else {
             tList = [
@@ -204,6 +205,7 @@ export default defineComponent({
                 type="error"
                 onClick={() => {
                   forms.drag = false;
+                  prepareStore.setIsEditTrain(false);
                   forms.removeIds = [];
                   getList();
                 }}>
@@ -232,7 +234,12 @@ export default defineComponent({
                   prepareStore.setSubjectId(val);
                 }}
               />
-              <NButton type="default" onClick={() => (forms.drag = true)}>
+              <NButton
+                type="default"
+                onClick={() => {
+                  forms.drag = true;
+                  prepareStore.setIsEditTrain(true);
+                }}>
                 编辑
               </NButton>
             </NSpace>

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

@@ -6,7 +6,7 @@ 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';
+import { useDebounceFn, useThrottleFn } from '@vueuse/core';
 import { saveCourseware } from '/src/views/prepare-lessons/api';
 
 const formatType = (type: string) => {
@@ -39,7 +39,7 @@ export default defineComponent({
       },
       searchGroup: {
         type: props.type === 'shareResources' ? 'MUSIC' : '', //
-        keyword: '',
+        name: '',
         bookVersionId: null,
         subjectId: null,
         sourceType: formatType(props.type),
@@ -90,6 +90,14 @@ export default defineComponent({
       getList();
     };
 
+    const throttledFnSearch = useDebounceFn(item => {
+      state.pagination.page = state.pagination.page + 1;
+      state.pagination.page = 1;
+      state.tableList = [];
+      state.searchGroup = Object.assign(state.searchGroup, item);
+      getList();
+    }, 500);
+
     // 声部变化时
     watch(
       () => prepareStore.getSubjectId,
@@ -169,7 +177,7 @@ export default defineComponent({
       <div>
         <ResourceSearchGroup
           type={props.type}
-          onSearch={(item: any) => onSearch(item)}
+          onSearch={(item: any) => throttledFnSearch(item)}
         />
         <NScrollbar
           class={[
@@ -204,6 +212,7 @@ export default defineComponent({
                       isShowAdd
                       item={item}
                       isShowCollect={false}
+                      isShowAddDisabled={prepareStore.getIsEditResource}
                       onAdd={(item: any) => onAdd(item)}
                     />
                   ))}

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

@@ -18,7 +18,7 @@ export default defineComponent({
     const catchStore = useCatchStore();
     const forms = reactive({
       type: 'MUSIC', //
-      keyword: '',
+      name: '',
       bookVersionId: null
     });
     const resourceType = ref([] as any);
@@ -90,7 +90,7 @@ export default defineComponent({
             type="text"
             placeholder="请输入搜索关键词"
             clearable
-            v-model:value={forms.keyword}
+            v-model:value={forms.name}
             class={styles.inputSearch}
             onKeyup={(e: KeyboardEvent) => {
               if (e.code === 'Enter') {
@@ -98,7 +98,7 @@ export default defineComponent({
               }
             }}
             onClear={() => {
-              forms.keyword = '';
+              forms.name = '';
               debouncedRequest();
             }}>
             {{

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

@@ -21,7 +21,7 @@ export default defineComponent({
         rows: 20
       },
       searchGroup: {
-        keyword: '',
+        name: '',
         musicSheetCategoriesId: '',
         status: 1,
         versionFlag: false,
@@ -151,6 +151,7 @@ export default defineComponent({
                       isShowAdd
                       isShowCollect={false}
                       item={item}
+                      isShowAddDisabled={prepareStore.getIsEditTrain}
                       onAdd={(child: any) => onAdd(child)}
                     />
                   ))}

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

@@ -10,7 +10,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const catchStore = useCatchStore();
     const forms = reactive({
-      keyword: '',
+      name: '',
       musicSheetCategoriesId: null
     });
 
@@ -50,7 +50,7 @@ export default defineComponent({
             type="text"
             placeholder="请输入搜索关键词"
             clearable
-            v-model:value={forms.keyword}
+            v-model:value={forms.name}
             class={styles.inputSearch}
             onKeyup={(e: KeyboardEvent) => {
               if (e.code === 'Enter') {
@@ -58,7 +58,7 @@ export default defineComponent({
               }
             }}
             onClear={() => {
-              forms.keyword = '';
+              forms.name = '';
               throttledFn();
             }}>
             {{

src/views/prepare-lessons/index.tsx

@@ -41,6 +41,8 @@ export default defineComponent({
       prepareStore.setSelectResourceStatus(false);
       prepareStore.setIsAddResource(false);
       prepareStore.setIsAddTrain(false);
+      prepareStore.setIsEditResource(false);
+      prepareStore.setIsEditTrain(false);
       // prepareStore.setCoursewareList([]);
       // prepareStore.setTreeList([]);
       // prepareStore.setTrainList([]);

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

@@ -4,7 +4,7 @@ import styles from './index.module.less';
 import CardType from '@/components/card-type';
 import SearchGroup from './search-group';
 import TheEmpty from '/src/components/TheEmpty';
-import { useThrottleFn } from '@vueuse/core';
+import { useDebounceFn, useThrottleFn } from '@vueuse/core';
 import { usePrepareStore } from '/src/store/modules/prepareLessons';
 import { musicSheetPage } from '../../api';
 
@@ -21,7 +21,7 @@ export default defineComponent({
         rows: 20
       },
       searchGroup: {
-        keyword: '',
+        name: '',
         musicSheetCategoriesId: '',
         status: 1,
         versionFlag: false,
@@ -61,12 +61,18 @@ export default defineComponent({
       }
     };
 
-    const onSearch = async (item: any) => {
+    // const onSearch = async (item: any) => {
+    //   state.pagination.page = 1;
+    //   state.tableList = [];
+    //   state.searchGroup = Object.assign(state.searchGroup, item);
+    //   getList();
+    // };
+    const throttledFnSearch = useDebounceFn(item => {
       state.pagination.page = 1;
       state.tableList = [];
       state.searchGroup = Object.assign(state.searchGroup, item);
       getList();
-    };
+    }, 500);
 
     const throttledFn = useThrottleFn(() => {
       state.pagination.page = state.pagination.page + 1;
@@ -85,7 +91,7 @@ export default defineComponent({
           justifyContent="center"
           paneWrapperClass={styles.paneWrapperContainer}>
           <NTabPane name="shareResources" tab="选择曲目">
-            <SearchGroup onSearch={(item: any) => onSearch(item)} />
+            <SearchGroup onSearch={(item: any) => throttledFnSearch(item)} />
             <NScrollbar
               class={styles.listContainer}
               onScroll={(e: any) => {
@@ -116,6 +122,7 @@ export default defineComponent({
                           isShowAdd
                           isShowCollect={false}
                           item={item}
+                          isShowAddDisabled={prepareStore.getIsEditTrain}
                           onAdd={() => emit('add', item)}
                         />
                       ))}

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

@@ -11,7 +11,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const catchStore = useCatchStore();
     const forms = reactive({
-      keyword: '',
+      name: '',
       musicSheetCategoriesId: null
     });
 
@@ -58,7 +58,7 @@ export default defineComponent({
             class={styles.inputSearch}
             round
             onSearch={(val: string) => {
-              forms.keyword = val;
+              forms.name = val;
               throttledFn();
             }}
           />

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

@@ -7,6 +7,7 @@ import { materialQueryPage } from '/src/views/natural-resources/api';
 import TheEmpty from '/src/components/TheEmpty';
 import { usePrepareStore } from '/src/store/modules/prepareLessons';
 import { saveCourseware } from '../../../api';
+import { useDebounceFn } from '@vueuse/core';
 
 const formatType = (type: string) => {
   if (type === 'shareResources') {
@@ -39,7 +40,7 @@ export default defineComponent({
       },
       searchGroup: {
         type: props.type === 'shareResources' ? 'MUSIC' : '', //
-        keyword: '',
+        name: '',
         bookVersionId: null,
         subjectId: null,
         sourceType: formatType(props.type),
@@ -85,12 +86,18 @@ export default defineComponent({
       }
     };
 
-    const onSearch = async (item: any) => {
+    // const onSearch = async (item: any) => {
+    //   state.pagination.page = 1;
+    //   state.tableList = [];
+    //   state.searchGroup = Object.assign(state.searchGroup, item);
+    //   getList();
+    // };
+    const throttledFnSearch = useDebounceFn(item => {
       state.pagination.page = 1;
       state.tableList = [];
       state.searchGroup = Object.assign(state.searchGroup, item);
       getList();
-    };
+    }, 500);
 
     // 添加资源
     const onAdd = async (item: any) => {
@@ -159,7 +166,7 @@ export default defineComponent({
       <div>
         <ResourceSearchGroup
           type={props.type}
-          onSearch={(item: any) => onSearch(item)}
+          onSearch={(item: any) => throttledFnSearch(item)}
         />
         <NScrollbar
           class={styles.listContainer}
@@ -192,11 +199,13 @@ export default defineComponent({
                       isShowAdd
                       item={item}
                       isShowCollect={false}
+                      isShowAddDisabled={prepareStore.getIsEditResource}
                       onAdd={(item: any) => onAdd(item)}
                     />
                   ))}
                 </div>
               )}
+
               {!state.loading && state.tableList.length <= 0 && <TheEmpty />}
             </div>
           </NSpin>

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

@@ -102,9 +102,45 @@
 }
 
 .spaceSection {
+
   // width: 72%;
+  gap: 8px 12px !important;
 
   &>div {
     line-height: var(--n-blank-height);
   }
+}
+
+
+.collapseWrap {
+  width: 98%;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+
+}
+
+.collaoseBtn {
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+}
+
+.collaoseBtn.isStart {
+  transform: rotate(-180deg);
+}
+
+.collapsSection {
+  padding-top: 10px;
+}
+
+.isHidden {
+  overflow: hidden;
+  transition: 1s all ease-in;
+}
+
+.hideButton {
+  visibility: hidden;
+  height: 0 !important;
+  line-height: 0 !important;
 }

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

@@ -1,10 +1,11 @@
 import { PropType, defineComponent, onMounted, reactive, ref } from 'vue';
 import styles from './index.module.less';
-import { NButton, NForm, NFormItem, NSpace } from 'naive-ui';
+import { NButton, NForm, NFormItem, NImage, NSpace } from 'naive-ui';
 import { resourceTypeArray } from '/src/utils/searchArray';
 import { useCatchStore } from '/src/store/modules/catchData';
 import { useThrottleFn } from '@vueuse/core';
 import TheSearch from '/src/components/TheSearch';
+import isCollaose from '/src/views/natural-resources/images/isCollaose.png';
 
 export default defineComponent({
   name: 'resource-search-group',
@@ -19,7 +20,7 @@ export default defineComponent({
     const catchStore = useCatchStore();
     const forms = reactive({
       type: 'MUSIC', //
-      keyword: '',
+      name: '',
       bookVersionId: null
     });
     const resourceType = ref([] as any);
@@ -30,6 +31,48 @@ export default defineComponent({
 
     const throttleFn = useThrottleFn(() => onSearch(), 500);
 
+    const collapseWrapRef = ref();
+    const divDomList = ref([] as any);
+    const orginHeight = ref(0);
+    const hiddenHeight = ref(0);
+    const line = ref(0);
+    const isCollapse = ref(false);
+    const loadingCollapse = ref(false); // 是否加载完成
+    const musicCateRef = (el: any) => {
+      if (el?.selfElRef) {
+        divDomList.value.push(el.selfElRef.parentNode);
+      }
+    };
+    const setCollapse = (flag: boolean) => {
+      isCollapse.value = flag;
+      getLive();
+    };
+    const getLive = () => {
+      divDomList.value = [...new Set(divDomList.value)];
+      let offsetLeft = -1;
+      divDomList.value.forEach((item: any, index: number) => {
+        if (index === 0) {
+          line.value = 1;
+          offsetLeft = item.offsetLeft;
+        } else if (item.offsetLeft === offsetLeft && index != 0) {
+          // 如果某个标签的offsetLeft和第一个标签的offsetLeft相等  说明增加了一行
+          line.value++;
+        }
+        if (!isCollapse.value) {
+          if (line.value > 1) {
+            //从第3行开始 隐藏标签
+            item.style.display = 'none';
+
+            // 显示展开按钮  class名chu是在前面动态添加的
+          } else {
+            item.style.display = 'block';
+          }
+        } else {
+          item.style.display = 'block';
+        }
+      });
+      loadingCollapse.value = true;
+    };
     onMounted(async () => {
       if (props.type === 'myResources' || props.type === 'myCollect') {
         resourceType.value.push({
@@ -48,6 +91,14 @@ export default defineComponent({
 
       // 获取教材分类列表
       await catchStore.getMusicSheetCategory();
+
+      // 这里开始
+      // musicCateRef
+
+      orginHeight.value = collapseWrapRef.value.offsetHeight;
+      hiddenHeight.value = collapseWrapRef.value.offsetHeight / line.value;
+      // 默认隐藏
+      getLive();
     });
     return () => (
       <div class={styles.searchGroup}>
@@ -73,33 +124,63 @@ export default defineComponent({
             class={styles.inputSearch}
             round
             onSearch={(val: string) => {
-              forms.keyword = val;
+              forms.name = val;
               throttleFn();
             }}
           />
         </div>
         <NForm labelAlign="left" labelPlacement="left">
           {forms.type === 'MUSIC' && (
-            <NFormItem label="教材：">
-              <NSpace class={styles.spaceSection}>
-                {catchStore.getAllMusicCategories.map((music: any) => (
-                  <NButton
-                    secondary={forms.bookVersionId === music.id}
-                    quaternary={forms.bookVersionId !== music.id}
-                    strong
-                    focusable={false}
-                    type={
-                      forms.bookVersionId === music.id ? 'primary' : 'default'
-                    }
-                    onClick={() => {
-                      forms.bookVersionId = music.id;
-                      throttleFn();
-                    }}>
-                    {music.name}
-                  </NButton>
-                ))}
-              </NSpace>
-            </NFormItem>
+            <div class={styles.collapsSection}>
+              <NFormItem label="教材：">
+                <div
+                  class={[
+                    styles.collapseWrap,
+                    loadingCollapse.value ? '' : styles.hideButton,
+                    isCollapse.value ? '' : styles.isHidden
+                  ]}
+                  ref={collapseWrapRef}>
+                  <NSpace class={[styles.spaceSection]}>
+                    {catchStore.getAllMusicCategories.map((music: any) => (
+                      <NButton
+                        ref={musicCateRef}
+                        secondary={forms.bookVersionId === music.id}
+                        quaternary={forms.bookVersionId !== music.id}
+                        strong
+                        focusable={false}
+                        type={
+                          forms.bookVersionId === music.id
+                            ? 'primary'
+                            : 'default'
+                        }
+                        onClick={() => {
+                          forms.bookVersionId = music.id;
+                          onSearch();
+                        }}>
+                        {music.name}
+                      </NButton>
+                    ))}
+                    <div
+                      style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        height: '100%'
+                      }}
+                      onClick={() => {
+                        setCollapse(!isCollapse.value);
+                      }}>
+                      <NImage
+                        previewDisabled
+                        src={isCollaose}
+                        class={[
+                          styles.collaoseBtn,
+                          isCollapse.value ? styles.isStart : ''
+                        ]}></NImage>
+                    </div>
+                  </NSpace>
+                </div>
+              </NFormItem>
+            </div>
           )}
         </NForm>
       </div>

src/views/xiaoku-music/index.tsx

@@ -51,7 +51,7 @@ export default defineComponent({
       page: 1,
       rows: 20,
       status: true,
-      keyword: '', // 关键词
+      name: '', // 关键词
       musicSheetCategoriesId: route.query.id || ''
     });
     const data = reactive({
@@ -104,7 +104,7 @@ export default defineComponent({
     const handleGetList = () => {
       data.listActive = 0;
       data.showPlayer = false;
-      data.playState = 'pause'
+      data.playState = 'pause';
       forms.page = 1;
       data.finshed = false;
       getList();
@@ -252,7 +252,7 @@ export default defineComponent({
                 round
                 border={false}
                 onSearch={val => {
-                  forms.keyword = val;
+                  forms.name = val;
                   data.reshing = true;
                   handleGetList();
                 }}