修改添加逻辑

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

@@ -415,11 +415,6 @@ export default defineComponent({
           materialList.forEach((m: any) => {
             forms.coursewareList[item.index || 0].list.push(m);
           });
-          // if(item.isError) {
-          //   message.error('您添加的资源与适用乐器不符')
-          // } else {
-          //   message.success('添加成功');
-          // }
         }
 
         timer = setTimeout(() => {
@@ -1145,15 +1140,12 @@ export default defineComponent({
                     isTips = true
                   }
                 });
-                checkCurrentInstrumentTip(isTips)
+                checkCurrentInstrumentTip(isTips);
               } else {
                 item.isError = checkCurrentIsInstrument(item.instrumentIds, item.type)
-                addCoursewareItem(
-                  { ...item, index: forms.addOtherIndex },
-                  null,
-                  true
-                );
-                checkCurrentInstrumentTip(item.isError)
+                item.index = forms.addOtherIndex;
+                forms.coursewareList[item.index || 0].list.push(item);
+                checkCurrentInstrumentTip(item.isError);
               }
             }}
           />

src/views/prepare-lessons/model/source-instrument/components/list/index.tsx

@@ -1,200 +1,197 @@
-import { PropType, defineComponent, onMounted, reactive } from 'vue';
-import styles from './index.module.less';
-import SearchGroupResources from './search-group-resources';
-import { NImage, NScrollbar, NSpin } from 'naive-ui';
-import TheEmpty from '/src/components/TheEmpty';
-import Pagination from '/src/components/pagination';
-import { useRouter } from 'vue-router';
-import { api_knowledgeWiki_page } from '/src/views/content-information/api';
-import CardPreview from '/src/components/card-preview';
-
-export default defineComponent({
-  name: 'instrument-list',
-  props: {
-    categoryId: {
-      type: String,
-      default: ''
-    },
-    categoryChildList: {
-      type: Array as PropType<any>,
-      default: () => []
-    },
-    selectItems: {
-      type: Array as PropType<any>,
-      default: () => []
-    }
-  },
-  emits: ['confirm'],
-  setup(props, { emit }) {
-    const router = useRouter();
-    const state = reactive({
-      searchWord: '',
-      loading: false,
-      pageTotal: 0,
-      finshed: false, // 是否加载完
-      pagination: {
-        page: 1,
-        rows: 18
-      },
-      searchGroup: {
-        type: 'INSTRUMENT', //
-        keyword: '',
-        wikiCategoryId: props.categoryId
-      },
-      tableList: [] as any,
-      teachingStatus: false,
-      show: false,
-      item: {} as any
-    });
-
-    const getList = async () => {
-      state.loading = true;
-      try {
-        const { data } = await api_knowledgeWiki_page({
-          ...state.pagination,
-          ...state.searchGroup
-        });
-        const temp = data.rows || [];
-        temp.forEach((item: any) => {
-          if (
-            item.knowledgeWikiCategories &&
-            item.knowledgeWikiCategories.length
-          ) {
-            item.categories =
-              item.knowledgeWikiCategories[0].knowledgeWikiCategoryTypeName;
-          }
-        });
-        state.tableList.push(...temp);
-
-        state.pageTotal = Number(data.total);
-        state.finshed = data.pages <= data.current ? true : false;
-      } catch {
-        //
-      }
-      state.loading = false;
-    };
-
-    const onSearch = async (item: any) => {
-      state.pagination.page = 1;
-      state.searchGroup = Object.assign(state.searchGroup, item);
-      state.tableList = [];
-      getList();
-    };
-
-    // 更新
-    const onSelect = (item: any) => {
-      const ids = props.selectItems || [];
-      const index = ids.findIndex((i: any) => i.id === item.id);
-      if (index !== -1) {
-        ids.splice(index, 1);
-      } else {
-        ids.push(item);
-      }
-
-      emit('confirm', ids);
-    };
-
-    onMounted(() => {
-      getList();
-    });
-
-    return () => (
-      <div class={styles.instrumentList}>
-        <SearchGroupResources
-          class={styles.searchGroups}
-          categoryChildList={props.categoryChildList || []}
-          onSearch={(item: any) => onSearch(item)}
-          wikiCategoryId={props.categoryId}
-        />
-        <NScrollbar
-          class={styles.listContainer}
-          style={{
-            'max-height': `50vh`
-          }}
-          onScroll={(e: any) => {
-            const clientHeight = e.target?.clientHeight;
-            const scrollTop = e.target?.scrollTop;
-            const scrollHeight = e.target?.scrollHeight;
-            // 是否到底，是否加载完
-            if (
-              clientHeight + scrollTop + 20 >= scrollHeight &&
-              !state.finshed &&
-              !state.loading
-            ) {
-              state.pagination.page = state.pagination.page + 1;
-              getList();
-            }
-          }}>
-          <NSpin v-model:show={state.loading} style={{ 'min-height': '50vh' }}>
-            <div class={styles.list}>
-              {state.tableList.map((item: any) => (
-                <div
-                  class={styles.itemWrap}
-                  onClick={() => {
-                    // router.push({
-                    //   path: '/content-instruments-detail',
-                    //   query: {
-                    //     id: item.id,
-                    //     name: item.name
-                    //   }
-                    // });
-
-                    state.item = {
-                      content: item.id,
-                      title: item.name,
-                      type: 'INSTRUMENT'
-                    };
-                    state.show = true;
-                  }}>
-                  <div class={styles.itemWrapBox}>
-                    <div class={styles.itemCard}>
-                      <div
-                        class={[
-                          styles.itemImgSection,
-                          props.selectItems.findIndex(
-                            (i: any) => i.id === item.id
-                          ) !== -1 && styles.itemImgSectionSelected
-                        ]}>
-                        <NImage
-                          src={
-                            item.avatar +
-                            '?imageMogr2/strip/format/jpg/size-limit/15k!'
-                          }
-                          class={styles.img}
-                          objectFit="cover"
-                          previewDisabled
-                        />
-
-                        <i
-                          class={[styles.iconCheck]}
-                          onClick={(e: any) => {
-                            e.stopPropagation();
-                            onSelect(item);
-                          }}></i>
-                      </div>
-                      <div class={styles.itemTitle}>{item.name}</div>
-                    </div>
-                  </div>
-                </div>
-              ))}
-
-              {!state.loading && state.tableList.length <= 0 && (
-                <TheEmpty
-                  style={{ minHeight: '50vh' }}
-                  description="暂无乐器百科"
-                />
-              )}
-            </div>
-          </NSpin>
-        </NScrollbar>
-
-        {/* 弹窗查看 */}
-        <CardPreview
-          size={'large'}
-          v-model:show={state.show}
-          item={state.item}
-        />
-      </div>
-    );
-  }
-});
+import { PropType, defineComponent, onMounted, reactive } from 'vue';
+import styles from './index.module.less';
+import SearchGroupResources from './search-group-resources';
+import { NImage, NScrollbar, NSpin } from 'naive-ui';
+import TheEmpty from '/src/components/TheEmpty';
+import { api_knowledgeWiki_page } from '/src/views/content-information/api';
+import CardPreview from '/src/components/card-preview';
+
+export default defineComponent({
+  name: 'instrument-list',
+  props: {
+    categoryId: {
+      type: String,
+      default: ''
+    },
+    categoryChildList: {
+      type: Array as PropType<any>,
+      default: () => []
+    },
+    selectItems: {
+      type: Array as PropType<any>,
+      default: () => []
+    }
+  },
+  emits: ['confirm'],
+  setup(props, { emit }) {
+    const state = reactive({
+      searchWord: '',
+      loading: false,
+      pageTotal: 0,
+      finshed: false, // 是否加载完
+      pagination: {
+        page: 1,
+        rows: 18
+      },
+      searchGroup: {
+        type: 'INSTRUMENT', //
+        keyword: '',
+        wikiCategoryId: props.categoryId
+      },
+      tableList: [] as any,
+      teachingStatus: false,
+      show: false,
+      item: {} as any
+    });
+
+    const getList = async () => {
+      state.loading = true;
+      try {
+        const { data } = await api_knowledgeWiki_page({
+          ...state.pagination,
+          ...state.searchGroup
+        });
+        const temp = data.rows || [];
+        temp.forEach((item: any) => {
+          if (
+            item.knowledgeWikiCategories &&
+            item.knowledgeWikiCategories.length
+          ) {
+            item.categories =
+              item.knowledgeWikiCategories[0].knowledgeWikiCategoryTypeName;
+          }
+        });
+        state.tableList.push(...temp);
+
+        state.pageTotal = Number(data.total);
+        state.finshed = data.pages <= data.current ? true : false;
+      } catch {
+        //
+      }
+      state.loading = false;
+    };
+
+    const onSearch = async (item: any) => {
+      state.pagination.page = 1;
+      state.searchGroup = Object.assign(state.searchGroup, item);
+      state.tableList = [];
+      getList();
+    };
+
+    // 更新
+    const onSelect = (item: any) => {
+      const ids = props.selectItems || [];
+      const index = ids.findIndex((i: any) => i.id === item.id);
+      if (index !== -1) {
+        ids.splice(index, 1);
+      } else {
+        ids.push(item);
+      }
+
+      emit('confirm', ids);
+    };
+
+    onMounted(() => {
+      getList();
+    });
+
+    return () => (
+      <div class={styles.instrumentList}>
+        <SearchGroupResources
+          class={styles.searchGroups}
+          categoryChildList={props.categoryChildList || []}
+          onSearch={(item: any) => onSearch(item)}
+          wikiCategoryId={props.categoryId}
+        />
+        <NScrollbar
+          class={styles.listContainer}
+          style={{
+            'max-height': `50vh`
+          }}
+          onScroll={(e: any) => {
+            const clientHeight = e.target?.clientHeight;
+            const scrollTop = e.target?.scrollTop;
+            const scrollHeight = e.target?.scrollHeight;
+            // 是否到底，是否加载完
+            if (
+              clientHeight + scrollTop + 20 >= scrollHeight &&
+              !state.finshed &&
+              !state.loading
+            ) {
+              state.pagination.page = state.pagination.page + 1;
+              getList();
+            }
+          }}>
+          <NSpin v-model:show={state.loading} style={{ 'min-height': '50vh' }}>
+            <div class={styles.list}>
+              {state.tableList.map((item: any) => (
+                <div
+                  class={styles.itemWrap}
+                  onClick={() => {
+                    // router.push({
+                    //   path: '/content-instruments-detail',
+                    //   query: {
+                    //     id: item.id,
+                    //     name: item.name
+                    //   }
+                    // });
+
+                    state.item = {
+                      content: item.id,
+                      title: item.name,
+                      type: 'INSTRUMENT'
+                    };
+                    state.show = true;
+                  }}>
+                  <div class={styles.itemWrapBox}>
+                    <div class={styles.itemCard}>
+                      <div
+                        class={[
+                          styles.itemImgSection,
+                          props.selectItems.findIndex(
+                            (i: any) => i.id === item.id
+                          ) !== -1 && styles.itemImgSectionSelected
+                        ]}>
+                        <NImage
+                          src={
+                            item.avatar +
+                            '?imageMogr2/strip/format/jpg/size-limit/15k!'
+                          }
+                          class={styles.img}
+                          objectFit="cover"
+                          previewDisabled
+                        />
+
+                        <i
+                          class={[styles.iconCheck]}
+                          onClick={(e: any) => {
+                            e.stopPropagation();
+                            onSelect(item);
+                          }}></i>
+                      </div>
+                      <div class={styles.itemTitle}>{item.name}</div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+
+              {!state.loading && state.tableList.length <= 0 && (
+                <TheEmpty
+                  style={{ minHeight: '50vh' }}
+                  description="暂无乐器百科"
+                />
+              )}
+            </div>
+          </NSpin>
+        </NScrollbar>
+
+        {/* 弹窗查看 */}
+        <CardPreview
+          size={'large'}
+          v-model:show={state.show}
+          item={state.item}
+        />
+      </div>
+    );
+  }
+});

src/views/prepare-lessons/model/source-instrument/components/list/search-group-resources.tsx

@@ -1,170 +1,174 @@
-import { PropType, defineComponent, onMounted, reactive, ref } from 'vue';
-import styles from './index.module.less';
-import { NButton, NCarousel, NCarouselItem, NImage, NSpace } from 'naive-ui';
-import TheSearch from '/src/components/TheSearch';
-import iconSlideRight from '/src/views/prepare-lessons/images/icon-slide-right.png';
-import { nextTick } from 'process';
-export default defineComponent({
-  name: 'search-group',
-  props: {
-    categoryChildList: {
-      type: Array as PropType<any>,
-      default: () => []
-    },
-    wikiCategoryId: {
-      type: String,
-      default: ''
-    }
-  },
-  emits: ['search', 'add'],
-  expose: ['init'],
-  setup(props, { emit }) {
-    // const catchStore = useCatchStore();
-    const forms = reactive({
-      currentIndex: 0,
-      keyword: '',
-      wikiCategoryId: props.wikiCategoryId || '',
-      maxIndex: 0
-    });
-
-    const state = reactive({
-      showSlide: false
-    });
-
-    const onSearch = () => {
-      emit('search', forms);
-    };
-
-    const carouselRef = ref();
-    const onChangeSlide = (type: string) => {
-      if (type === 'left') {
-        carouselRef.value?.prev();
-      } else if (type === 'right') {
-        carouselRef.value?.next();
-      }
-    };
-    onMounted(async () => {
-      // 获取教材分类列表
-      // await catchStore.getMusicSheetCategory()
-      nextTick(() => {
-        // carouselRef.value?.to(100);
-
-        // 最外层宽度
-        const carouselContainer = document.querySelector('.carouselContainer');
-        const carouselContainerWidth =
-          (carouselContainer &&
-            carouselContainer.getBoundingClientRect().width) ||
-          0;
-        const slideDoms = document.querySelectorAll('.n-carousel__slide');
-        let slideWidth = 0;
-        slideDoms.forEach(doom => {
-          const rect = doom.getBoundingClientRect();
-          slideWidth += rect.width;
-        });
-        if (slideWidth >= carouselContainerWidth) {
-          state.showSlide = true;
-        }
-      });
-    });
-    return () => (
-      <div class={styles.searchGroup}>
-        <div class={[styles.searchCatatory]}>
-          <NSpace size="small" class={styles.btnType}>
-            {props.categoryChildList.length > 0 ? (
-              <NButton
-                type={
-                  forms.wikiCategoryId === props.wikiCategoryId
-                    ? 'primary'
-                    : 'default'
-                }
-                secondary={
-                  forms.wikiCategoryId === props.wikiCategoryId ? false : true
-                }
-                round
-                size="small"
-                focusable={false}
-                onClick={() => {
-                  forms.wikiCategoryId = props.wikiCategoryId;
-                  onSearch();
-                }}>
-                全部
-              </NButton>
-            ) : (
-              ''
-            )}
-
-            <div class={[styles.carouselGroup]}>
-              <NCarousel
-                ref={carouselRef}
-                slidesPerView={'auto'}
-                loop={false}
-                class={[styles.carouselContainer, 'carouselContainer']}
-                showDots={false}
-                // spaceBetween={20}
-                draggable={state.showSlide}
-                currentIndex={forms.currentIndex}
-                onUpdate:currentIndex={(val: any) => {
-                  forms.currentIndex = val;
-                }}>
-                {props.categoryChildList.map((item: any) => (
-                  <NCarouselItem>
-                    <NButton
-                      type={
-                        forms.wikiCategoryId === item.id ? 'primary' : 'default'
-                      }
-                      secondary={
-                        forms.wikiCategoryId === item.id ? false : true
-                      }
-                      round
-                      size="small"
-                      focusable={false}
-                      onClick={() => {
-                        forms.wikiCategoryId = item.id;
-                        onSearch();
-                      }}>
-                      {item.name}
-                    </NButton>
-                  </NCarouselItem>
-                ))}
-              </NCarousel>
-
-              {state.showSlide && (
-                <NSpace class={styles.swipeControll}>
-                  <div onClick={() => onChangeSlide('left')}>
-                    <NImage
-                      previewDisabled
-                      class={[
-                        styles.leftIcon
-                        // forms.currentIndex === 0 && styles.disabled
-                      ]}
-                      src={iconSlideRight}
-                    />
-                  </div>
-                  <div onClick={() => onChangeSlide('right')}>
-                    <NImage
-                      // class={
-                      //   // forms.currentIndex == forms.openTableList.length - 4 &&
-                      //   styles.disabled
-                      // }
-                      previewDisabled
-                      src={iconSlideRight}
-                    />
-                  </div>
-                </NSpace>
-              )}
-            </div>
-          </NSpace>
-          <TheSearch
-            class={styles.inputSearch}
-            placeholder="请输入乐器名称"
-            round
-            onSearch={(val: string) => {
-              forms.keyword = val;
-              onSearch();
-            }}
-          />
-        </div>
-      </div>
-    );
-  }
-});
+import { PropType, defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from './index.module.less';
+import { NButton, NCarousel, NCarouselItem, NImage, NSpace } from 'naive-ui';
+import TheSearch from '/src/components/TheSearch';
+import iconSlideRight from '/src/views/prepare-lessons/images/icon-slide-right.png';
+import { nextTick } from 'process';
+export default defineComponent({
+  name: 'search-group',
+  props: {
+    categoryChildList: {
+      type: Array as PropType<any>,
+      default: () => []
+    },
+    wikiCategoryId: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['search', 'add'],
+  expose: ['init'],
+  setup(props, { emit }) {
+    // const catchStore = useCatchStore();
+    const forms = reactive({
+      currentIndex: 0,
+      keyword: '',
+      wikiCategoryId: props.wikiCategoryId || '',
+      maxIndex: 0
+    });
+
+    const state = reactive({
+      showSlide: false
+    });
+
+    const onSearch = () => {
+      emit('search', forms);
+    };
+
+    const carouselRef = ref();
+    const onChangeSlide = (type: string) => {
+      if (type === 'left') {
+        carouselRef.value?.prev();
+      } else if (type === 'right') {
+        carouselRef.value?.next();
+      }
+    };
+    onMounted(async () => {
+      // 获取教材分类列表
+      // await catchStore.getMusicSheetCategory()
+      nextTick(() => {
+        // carouselRef.value?.to(100);
+
+        // 最外层宽度
+        const carouselContainer = document.querySelector('.carouselContainer');
+        const carouselContainerWidth =
+          (carouselContainer &&
+            carouselContainer.getBoundingClientRect().width) ||
+          0;
+        const slideDoms = document.querySelectorAll('.n-carousel__slide');
+        let slideWidth = 0;
+        slideDoms.forEach(doom => {
+          const rect = doom.getBoundingClientRect();
+          slideWidth += rect.width;
+        });
+        if (slideWidth >= carouselContainerWidth) {
+          state.showSlide = true;
+        }
+      });
+    });
+    return () => (
+      <div class={styles.searchGroup}>
+        <div class={[styles.searchCatatory]}>
+          <NSpace size="small" class={styles.btnType}>
+            {props.categoryChildList.length > 0 ? (
+              <NButton
+                type={
+                  forms.wikiCategoryId === props.wikiCategoryId
+                    ? 'primary'
+                    : 'default'
+                }
+                secondary={
+                  forms.wikiCategoryId === props.wikiCategoryId ? false : true
+                }
+                round
+                size="small"
+                focusable={false}
+                onClick={() => {
+                  forms.wikiCategoryId = props.wikiCategoryId;
+                  onSearch();
+                }}>
+                全部
+              </NButton>
+            ) : (
+              ''
+            )}
+
+            <div class={[styles.carouselGroup]}>
+              <NCarousel
+                ref={carouselRef}
+                slidesPerView={'auto'}
+                loop={false}
+                class={[styles.carouselContainer, 'carouselContainer']}
+                showDots={false}
+                // spaceBetween={20}
+                draggable={state.showSlide}
+                currentIndex={forms.currentIndex}
+                onUpdate:currentIndex={(val: any) => {
+                  forms.currentIndex = val;
+                }}>
+                {props.categoryChildList.map((item: any) => (
+                  <NCarouselItem>
+                    <NButton
+                      type={
+                        forms.wikiCategoryId === item.id ? 'primary' : 'default'
+                      }
+                      secondary={
+                        forms.wikiCategoryId === item.id ? false : true
+                      }
+                      round
+                      size="small"
+                      focusable={false}
+                      onClick={() => {
+                        forms.wikiCategoryId = item.id;
+                        onSearch();
+                      }}>
+                      {item.name}
+                    </NButton>
+                  </NCarouselItem>
+                ))}
+              </NCarousel>
+
+              {state.showSlide && (
+                <NSpace class={styles.swipeControll}>
+                  <div onClick={() => onChangeSlide('left')}>
+                    <NImage
+                      previewDisabled
+                      class={[
+                        styles.leftIcon
+                        // forms.currentIndex === 0 && styles.disabled
+                      ]}
+                      src={iconSlideRight}
+                    />
+                  </div>
+                  <div onClick={() => onChangeSlide('right')}>
+                    <NImage
+                      // class={
+                      //   // forms.currentIndex == forms.openTableList.length - 4 &&
+                      //   styles.disabled
+                      // }
+                      previewDisabled
+                      src={iconSlideRight}
+                    />
+                  </div>
+                </NSpace>
+              )}
+            </div>
+          </NSpace>
+          <TheSearch
+            class={styles.inputSearch}
+            placeholder="请输入乐器名称"
+            round
+            value={forms.keyword}
+            onUpdate:value={(val: string) => {
+              forms.keyword = val;
+            }}
+            onSearch={(val: string) => {
+              forms.keyword = val;
+              onSearch();
+            }}
+          />
+        </div>
+      </div>
+    );
+  }
+});

src/views/prepare-lessons/model/source-instrument/index.tsx

@@ -1,107 +1,105 @@
-import { NButton, NSpace, NTabPane, NTabs } from 'naive-ui';
-import { defineComponent, nextTick, reactive } from 'vue';
-import styles from './index.module.less';
-import { useRoute, useRouter } from 'vue-router';
-import List from './components/list';
-import { api_knowledgeWikiCategoryType_page } from '/src/views/content-information/api';
-import TheEmpty from '/src/components/TheEmpty';
-import { PageEnum } from '/src/enums/pageEnum';
-
-export default defineComponent({
-  name: 'content-instrument',
-  emits: ['confirm', 'close'],
-  setup(props, { emit }) {
-    const router = useRouter();
-    const state = reactive({
-      tabValue: '',
-      categoryList: [] as any,
-      loading: false,
-      selectItems: [] as any
-    });
-
-    const getCategoryList = async () => {
-      state.loading = true;
-      try {
-        const { data } = await api_knowledgeWikiCategoryType_page({
-          type: 'INSTRUMENT',
-          page: 1,
-          rows: 99
-        });
-
-        state.categoryList = data.rows || [];
-        if (state.categoryList.length) {
-          nextTick(() => {
-            state.tabValue = 'name-' + state.categoryList[0].id;
-          });
-        }
-      } catch {
-        //
-      }
-      state.loading = false;
-    };
-
-    getCategoryList();
-
-    // 添加
-    const onSubmit = async () => {
-      const tempList: any = [];
-      state.selectItems.forEach((item: any) => {
-        tempList.push({
-          coverImg: PageEnum.INSTRUMENT_DEFAULT_COVER,
-          title: '乐器百科-' + item.name,
-          materialId: item.id,
-          content: item.id
-        });
-      });
-      emit('confirm', tempList);
-    };
-    return () => (
-      <div class={styles.container}>
-        <div class={styles.wrap}>
-          <div
-            class={[
-              styles.listWrap,
-              !state.loading &&
-                state.categoryList.length <= 0 &&
-                styles.listWrapEmpty
-            ]}>
-            {!state.loading && state.categoryList.length <= 0 && (
-              <TheEmpty description="暂无乐器百科" />
-            )}
-            <div style={{ minHeight: '55vh' }}>
-              <NTabs
-                defaultValue="myResources"
-                paneClass={styles.paneTitle}
-                justifyContent="center"
-                // animated
-                paneWrapperClass={styles.paneWrapperContainer}
-                v-model:value={state.tabValue}>
-                {state.categoryList.map((category: any) => (
-                  <NTabPane name={`name-${category.id}`} tab={category.name}>
-                    <List
-                      selectItems={state.selectItems}
-                      categoryId={category.id}
-                      categoryChildList={category.childrenList}
-                      onConfirm={(ids: any) => {
-                        state.selectItems = ids || [];
-                      }}
-                    />
-                  </NTabPane>
-                ))}
-              </NTabs>
-            </div>
-          </div>
-        </div>
-
-        <NSpace class={styles.btnGroup} justify="center">
-          <NButton round onClick={() => emit('close')}>
-            取消
-          </NButton>
-          <NButton round type="primary" onClick={onSubmit}>
-            确认添加
-          </NButton>
-        </NSpace>
-      </div>
-    );
-  }
-});
+import { NButton, NSpace, NTabPane, NTabs } from 'naive-ui';
+import { defineComponent, nextTick, reactive } from 'vue';
+import styles from './index.module.less';
+import List from './components/list';
+import { api_knowledgeWikiCategoryType_page } from '/src/views/content-information/api';
+import TheEmpty from '/src/components/TheEmpty';
+import { PageEnum } from '/src/enums/pageEnum';
+
+export default defineComponent({
+  name: 'content-instrument',
+  emits: ['confirm', 'close'],
+  setup(props, { emit }) {
+    const state = reactive({
+      tabValue: '',
+      categoryList: [] as any,
+      loading: false,
+      selectItems: [] as any
+    });
+
+    const getCategoryList = async () => {
+      state.loading = true;
+      try {
+        const { data } = await api_knowledgeWikiCategoryType_page({
+          type: 'INSTRUMENT',
+          page: 1,
+          rows: 99
+        });
+
+        state.categoryList = data.rows || [];
+        if (state.categoryList.length) {
+          nextTick(() => {
+            state.tabValue = 'name-' + state.categoryList[0].id;
+          });
+        }
+      } catch {
+        //
+      }
+      state.loading = false;
+    };
+
+    getCategoryList();
+
+    // 添加
+    const onSubmit = async () => {
+      const tempList: any = [];
+      state.selectItems.forEach((item: any) => {
+        tempList.push({
+          coverImg: PageEnum.INSTRUMENT_DEFAULT_COVER,
+          title: '乐器百科-' + item.name,
+          materialId: item.id,
+          content: item.id
+        });
+      });
+      emit('confirm', tempList);
+    };
+    return () => (
+      <div class={styles.container}>
+        <div class={styles.wrap}>
+          <div
+            class={[
+              styles.listWrap,
+              !state.loading &&
+                state.categoryList.length <= 0 &&
+                styles.listWrapEmpty
+            ]}>
+            {!state.loading && state.categoryList.length <= 0 && (
+              <TheEmpty description="暂无乐器百科" />
+            )}
+            <div style={{ minHeight: '55vh' }}>
+              <NTabs
+                defaultValue="myResources"
+                paneClass={styles.paneTitle}
+                justifyContent="center"
+                // animated
+                paneWrapperClass={styles.paneWrapperContainer}
+                v-model:value={state.tabValue}>
+                {state.categoryList.map((category: any) => (
+                  <NTabPane name={`name-${category.id}`} tab={category.name}>
+                    <List
+                      selectItems={state.selectItems}
+                      categoryId={category.id}
+                      categoryChildList={category.childrenList}
+                      onConfirm={(ids: any) => {
+                        state.selectItems = ids || [];
+                      }}
+                    />
+                  </NTabPane>
+                ))}
+              </NTabs>
+            </div>
+          </div>
+        </div>
+
+        <NSpace class={styles.btnGroup} justify="center">
+          <NButton round onClick={() => emit('close')}>
+            取消
+          </NButton>
+          <NButton round type="primary" onClick={onSubmit} disabled={state.selectItems.length <= 0}>
+            确认添加
+          </NButton>
+        </NSpace>
+      </div>
+    );
+  }
+});

src/views/prepare-lessons/model/source-music/components/list/search-group-resources.tsx

@@ -1,302 +1,306 @@
-import {
-  PropType,
-  computed,
-  defineComponent,
-  nextTick,
-  onMounted,
-  reactive,
-  ref
-} from 'vue';
-import styles from './index.module.less';
-import {
-  NButton,
-  NCarousel,
-  NCarouselItem,
-  NForm,
-  NFormItem,
-  NImage,
-  NPopselect,
-  NSpace
-} from 'naive-ui';
-import TheSearch from '/src/components/TheSearch';
-import iconSlideRight from '/src/views/prepare-lessons/images/icon-slide-right.png';
-export default defineComponent({
-  name: 'search-group',
-  props: {
-    categoryChildList: {
-      type: Array as PropType<any>,
-      default: () => []
-    },
-    wikiCategoryId: {
-      type: String,
-      default: ''
-    }
-  },
-  emits: ['search', 'add'],
-  expose: ['init'],
-  setup(props, { emit }) {
-    // const catchStore = useCatchStore();
-    const forms = reactive({
-      keyword: '',
-      wikiCategoryId: props.wikiCategoryId || '',
-      wikiCategoryIdChild: '',
-      childIds: [] as any,
-      currentIndex: 0
-    });
-    const carouselRef = ref();
-
-    const onSearch = () => {
-      emit('search', forms);
-    };
-
-    const selectChildObj = (item: any, index: number) => {
-      const obj: any = {};
-      item?.forEach((child: any) => {
-        if (child.id === forms.wikiCategoryIdChild) {
-          obj.selected = true;
-          obj.name = child.name;
-        }
-      });
-      return obj;
-    };
-
-    const childList = computed(() => {
-      const categoryChildList = props.categoryChildList || [];
-      const child = categoryChildList.find(
-        (item: any) => item.id === forms.wikiCategoryId
-      );
-      if (child && child.childrenList.length) {
-        const temps: any = [];
-        child.childrenList.forEach((c: any) => {
-          const i = c.childrenList;
-          const childTemp: any = [];
-          // const i = c.childrenList;
-          if (i && i.length > 0) {
-            childTemp.push({
-              label: '全部',
-              value: c.id,
-              name: c.name,
-              id: c.id
-            });
-            i.forEach((j: any) => {
-              // j.label = j.name;
-              // j.value = j.id;
-              childTemp.push({
-                label: j.name,
-                value: j.id,
-                name: j.name,
-                id: j.id
-              });
-            });
-          }
-
-          temps.push({
-            ...c,
-            childrenList: childTemp
-          });
-        });
-        return (
-          [
-            {
-              label: '全部',
-              value: '',
-              id: '',
-              name: '全部',
-              childrenList: []
-            },
-            ...temps
-          ] || []
-        );
-      }
-      return [];
-    });
-
-    const state = reactive({
-      showSlide: false
-    });
-    const onChangeSlide = (type: string) => {
-      if (type === 'left') {
-        carouselRef.value?.prev();
-      } else if (type === 'right') {
-        carouselRef.value?.next();
-      }
-    };
-
-    onMounted(() => {
-      nextTick(() => {
-        // 最外层宽度
-        const carouselContainer = document.querySelector('.carouselContainer');
-        const carouselContainerWidth =
-          (carouselContainer &&
-            carouselContainer.getBoundingClientRect().width) ||
-          0;
-        const slideDoms = document.querySelectorAll('.n-carousel__slide');
-        let slideWidth = 0;
-        slideDoms.forEach(doom => {
-          const rect = doom.getBoundingClientRect();
-          slideWidth += rect.width;
-        });
-        if (slideWidth >= carouselContainerWidth) {
-          state.showSlide = true;
-        }
-      });
-    });
-
-    return () => (
-      <div class={styles.searchGroup}>
-        <div
-          class={[
-            styles.searchCatatory,
-            childList.value.length > 0 ? styles.border : ''
-          ]}>
-          <NSpace size="small" class={styles.btnType}>
-            {props.categoryChildList.length > 0 ? (
-              <NButton
-                type={
-                  forms.wikiCategoryId === props.wikiCategoryId
-                    ? 'primary'
-                    : 'default'
-                }
-                secondary={
-                  forms.wikiCategoryId === props.wikiCategoryId ? false : true
-                }
-                round
-                size="small"
-                focusable={false}
-                onClick={() => {
-                  forms.wikiCategoryId = props.wikiCategoryId;
-                  forms.wikiCategoryIdChild = '';
-                  onSearch();
-                }}>
-                全部
-              </NButton>
-            ) : (
-              <span></span>
-            )}
-
-            <div class={[styles.carouselGroup]}>
-              <NCarousel
-                ref={carouselRef}
-                slidesPerView={'auto'}
-                loop={false}
-                class={[styles.carouselContainer, 'carouselContainer']}
-                showDots={false}
-                // spaceBetween={20}
-                draggable={state.showSlide}
-                currentIndex={forms.currentIndex}
-                onUpdate:currentIndex={(val: any) => {
-                  //
-                  // if (val > forms.maxIndex) {
-                  //   forms.maxIndex = val;
-                  //   carouselRef.value?.to(0);
-                  // }
-                  forms.currentIndex = val;
-                }}>
-                {props.categoryChildList.map((item: any) => (
-                  <NCarouselItem>
-                    <NButton
-                      type={
-                        forms.wikiCategoryId === item.id ? 'primary' : 'default'
-                      }
-                      secondary={
-                        forms.wikiCategoryId === item.id ? false : true
-                      }
-                      round
-                      size="small"
-                      focusable={false}
-                      onClick={() => {
-                        forms.wikiCategoryId = item.id;
-                        onSearch();
-                      }}>
-                      {item.name}
-                    </NButton>
-                  </NCarouselItem>
-                ))}
-              </NCarousel>
-
-              {state.showSlide && (
-                <NSpace class={styles.swipeControll}>
-                  <div onClick={() => onChangeSlide('left')}>
-                    <NImage
-                      previewDisabled
-                      class={[
-                        styles.leftIcon
-                        // forms.currentIndex === 0 && styles.disabled
-                      ]}
-                      src={iconSlideRight}
-                    />
-                  </div>
-                  <div onClick={() => onChangeSlide('right')}>
-                    <NImage
-                      // class={
-                      //   // forms.currentIndex == forms.openTableList.length - 4 &&
-                      //   styles.disabled
-                      // }
-                      previewDisabled
-                      src={iconSlideRight}
-                    />
-                  </div>
-                </NSpace>
-              )}
-            </div>
-          </NSpace>
-          <TheSearch
-            class={styles.inputSearch}
-            placeholder="请输入曲目名称"
-            round
-            onSearch={(val: string) => {
-              forms.keyword = val;
-              onSearch();
-            }}
-          />
-        </div>
-
-        {childList.value.length > 0 && (
-          <div class={[styles.collapseWrap]}>
-            <NSpace class={[styles.spaceSection]}>
-              {childList.value.map((music: any, index: number) => (
-                <>
-                  {music.childrenList.length > 0 ? (
-                    <NPopselect
-                      options={music.childrenList}
-                      trigger="hover"
-                      v-model:value={forms.wikiCategoryIdChild}
-                      onUpdate:value={() => {
-                        onSearch();
-                      }}
-                      key={music.id}
-                      class={styles.popSelect}>
-                      <span
-                        class={[
-                          styles.textBtn,
-                          selectChildObj(music.childrenList, index).selected &&
-                            styles.textBtnActive
-                        ]}>
-                        {selectChildObj(music.childrenList, index).name ||
-                          music.name}
-                        <i class={styles.iconArrow}></i>
-                      </span>
-                    </NPopselect>
-                  ) : (
-                    <span
-                      class={[
-                        styles.textBtn,
-                        forms.wikiCategoryIdChild === music.id &&
-                          styles.textBtnActive
-                      ]}
-                      onClick={() => {
-                        forms.wikiCategoryIdChild = music.id;
-                        onSearch();
-                      }}>
-                      {music.name}
-                    </span>
-                  )}
-                </>
-              ))}
-            </NSpace>
-          </div>
-        )}
-      </div>
-    );
-  }
-});
+import {
+  PropType,
+  computed,
+  defineComponent,
+  nextTick,
+  onMounted,
+  reactive,
+  ref
+} from 'vue';
+import styles from './index.module.less';
+import {
+  NButton,
+  NCarousel,
+  NCarouselItem,
+  NForm,
+  NFormItem,
+  NImage,
+  NPopselect,
+  NSpace
+} from 'naive-ui';
+import TheSearch from '/src/components/TheSearch';
+import iconSlideRight from '/src/views/prepare-lessons/images/icon-slide-right.png';
+export default defineComponent({
+  name: 'search-group',
+  props: {
+    categoryChildList: {
+      type: Array as PropType<any>,
+      default: () => []
+    },
+    wikiCategoryId: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['search', 'add'],
+  expose: ['init'],
+  setup(props, { emit }) {
+    // const catchStore = useCatchStore();
+    const forms = reactive({
+      keyword: '',
+      wikiCategoryId: props.wikiCategoryId || '',
+      wikiCategoryIdChild: '',
+      childIds: [] as any,
+      currentIndex: 0
+    });
+    const carouselRef = ref();
+
+    const onSearch = () => {
+      emit('search', forms);
+    };
+
+    const selectChildObj = (item: any, index: number) => {
+      const obj: any = {};
+      item?.forEach((child: any) => {
+        if (child.id === forms.wikiCategoryIdChild) {
+          obj.selected = true;
+          obj.name = child.name;
+        }
+      });
+      return obj;
+    };
+
+    const childList = computed(() => {
+      const categoryChildList = props.categoryChildList || [];
+      const child = categoryChildList.find(
+        (item: any) => item.id === forms.wikiCategoryId
+      );
+      if (child && child.childrenList.length) {
+        const temps: any = [];
+        child.childrenList.forEach((c: any) => {
+          const i = c.childrenList;
+          const childTemp: any = [];
+          // const i = c.childrenList;
+          if (i && i.length > 0) {
+            childTemp.push({
+              label: '全部',
+              value: c.id,
+              name: c.name,
+              id: c.id
+            });
+            i.forEach((j: any) => {
+              // j.label = j.name;
+              // j.value = j.id;
+              childTemp.push({
+                label: j.name,
+                value: j.id,
+                name: j.name,
+                id: j.id
+              });
+            });
+          }
+
+          temps.push({
+            ...c,
+            childrenList: childTemp
+          });
+        });
+        return (
+          [
+            {
+              label: '全部',
+              value: '',
+              id: '',
+              name: '全部',
+              childrenList: []
+            },
+            ...temps
+          ]
+        );
+      }
+      return [];
+    });
+
+    const state = reactive({
+      showSlide: false
+    });
+    const onChangeSlide = (type: string) => {
+      if (type === 'left') {
+        carouselRef.value?.prev();
+      } else if (type === 'right') {
+        carouselRef.value?.next();
+      }
+    };
+
+    onMounted(() => {
+      nextTick(() => {
+        // 最外层宽度
+        const carouselContainer = document.querySelector('.carouselContainer');
+        const carouselContainerWidth =
+          (carouselContainer &&
+            carouselContainer.getBoundingClientRect().width) ||
+          0;
+        const slideDoms = document.querySelectorAll('.n-carousel__slide');
+        let slideWidth = 0;
+        slideDoms.forEach(doom => {
+          const rect = doom.getBoundingClientRect();
+          slideWidth += rect.width;
+        });
+        if (slideWidth >= carouselContainerWidth) {
+          state.showSlide = true;
+        }
+      });
+    });
+
+    return () => (
+      <div class={styles.searchGroup}>
+        <div
+          class={[
+            styles.searchCatatory,
+            childList.value.length > 0 ? styles.border : ''
+          ]}>
+          <NSpace size="small" class={styles.btnType}>
+            {props.categoryChildList.length > 0 ? (
+              <NButton
+                type={
+                  forms.wikiCategoryId === props.wikiCategoryId
+                    ? 'primary'
+                    : 'default'
+                }
+                secondary={
+                  forms.wikiCategoryId === props.wikiCategoryId ? false : true
+                }
+                round
+                size="small"
+                focusable={false}
+                onClick={() => {
+                  forms.wikiCategoryId = props.wikiCategoryId;
+                  forms.wikiCategoryIdChild = '';
+                  onSearch();
+                }}>
+                全部
+              </NButton>
+            ) : (
+              <span></span>
+            )}
+
+            <div class={[styles.carouselGroup]}>
+              <NCarousel
+                ref={carouselRef}
+                slidesPerView={'auto'}
+                loop={false}
+                class={[styles.carouselContainer, 'carouselContainer']}
+                showDots={false}
+                // spaceBetween={20}
+                draggable={state.showSlide}
+                currentIndex={forms.currentIndex}
+                onUpdate:currentIndex={(val: any) => {
+                  //
+                  // if (val > forms.maxIndex) {
+                  //   forms.maxIndex = val;
+                  //   carouselRef.value?.to(0);
+                  // }
+                  forms.currentIndex = val;
+                }}>
+                {props.categoryChildList.map((item: any) => (
+                  <NCarouselItem>
+                    <NButton
+                      type={
+                        forms.wikiCategoryId === item.id ? 'primary' : 'default'
+                      }
+                      secondary={
+                        forms.wikiCategoryId === item.id ? false : true
+                      }
+                      round
+                      size="small"
+                      focusable={false}
+                      onClick={() => {
+                        forms.wikiCategoryId = item.id;
+                        onSearch();
+                      }}>
+                      {item.name}
+                    </NButton>
+                  </NCarouselItem>
+                ))}
+              </NCarousel>
+
+              {state.showSlide && (
+                <NSpace class={styles.swipeControll}>
+                  <div onClick={() => onChangeSlide('left')}>
+                    <NImage
+                      previewDisabled
+                      class={[
+                        styles.leftIcon
+                        // forms.currentIndex === 0 && styles.disabled
+                      ]}
+                      src={iconSlideRight}
+                    />
+                  </div>
+                  <div onClick={() => onChangeSlide('right')}>
+                    <NImage
+                      // class={
+                      //   // forms.currentIndex == forms.openTableList.length - 4 &&
+                      //   styles.disabled
+                      // }
+                      previewDisabled
+                      src={iconSlideRight}
+                    />
+                  </div>
+                </NSpace>
+              )}
+            </div>
+          </NSpace>
+          <TheSearch
+            class={styles.inputSearch}
+            placeholder="请输入曲目名称"
+            round
+            value={forms.keyword}
+            onUpdate:value={(val: string) => {
+              forms.keyword = val;
+            }}
+            onSearch={(val: string) => {
+              forms.keyword = val;
+              onSearch();
+            }}
+          />
+        </div>
+
+        {childList.value.length > 0 && (
+          <div class={[styles.collapseWrap]}>
+            <NSpace class={[styles.spaceSection]}>
+              {childList.value.map((music: any, index: number) => (
+                <>
+                  {music.childrenList.length > 0 ? (
+                    <NPopselect
+                      options={music.childrenList}
+                      trigger="hover"
+                      v-model:value={forms.wikiCategoryIdChild}
+                      onUpdate:value={() => {
+                        onSearch();
+                      }}
+                      key={music.id}
+                      class={styles.popSelect}>
+                      <span
+                        class={[
+                          styles.textBtn,
+                          selectChildObj(music.childrenList, index).selected &&
+                            styles.textBtnActive
+                        ]}>
+                        {selectChildObj(music.childrenList, index).name ||
+                          music.name}
+                        <i class={styles.iconArrow}></i>
+                      </span>
+                    </NPopselect>
+                  ) : (
+                    <span
+                      class={[
+                        styles.textBtn,
+                        forms.wikiCategoryIdChild === music.id &&
+                          styles.textBtnActive
+                      ]}
+                      onClick={() => {
+                        forms.wikiCategoryIdChild = music.id;
+                        onSearch();
+                      }}>
+                      {music.name}
+                    </span>
+                  )}
+                </>
+              ))}
+            </NSpace>
+          </div>
+        )}
+      </div>
+    );
+  }
+});

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

@@ -1,116 +1,113 @@
-import {
-  NBreadcrumb,
-  NBreadcrumbItem,
-  NButton,
-  NSpace,
-  NTabPane,
-  NTabs
-} from 'naive-ui';
-import { defineComponent, nextTick, reactive } from 'vue';
-import styles from './index.module.less';
-import { useRouter } from 'vue-router';
-import List from './components/list';
-import { api_knowledgeWikiCategoryType_page } from '/src/views/content-information/api';
-import TheEmpty from '/src/components/TheEmpty';
-import { PageEnum } from '/src/enums/pageEnum';
-
-// 164px 244px
-export default defineComponent({
-  name: 'content-music',
-  emits: ['close', 'confirm'],
-  setup(props, { emit }) {
-    const state = reactive({
-      tabValue: '',
-      categoryList: [] as any,
-      loading: false,
-      selectItems: [] as any
-    });
-
-    const getCategoryList = async () => {
-      state.loading = true;
-      try {
-        const { data } = await api_knowledgeWikiCategoryType_page({
-          type: 'MUSIC',
-          page: 1,
-          rows: 99
-        });
-
-        state.categoryList = data.rows || [];
-        if (state.categoryList.length) {
-          nextTick(() => {
-            state.tabValue = 'name-' + state.categoryList[0].id;
-          });
-        }
-      } catch {
-        //
-      }
-      state.loading = false;
-    };
-
-    getCategoryList();
-
-    // 添加
-    const onSubmit = async () => {
-      const tempList: any = [];
-      state.selectItems.forEach((item: any) => {
-        tempList.push({
-          coverImg: PageEnum.MUSIC_DEFAULT_COVER,
-          title: '名曲鉴赏-' + item.name,
-          materialId: item.id,
-          content: item.id
-        });
-      });
-      emit('confirm', tempList);
-    };
-    return () => (
-      <div class={styles.container}>
-        <div class={styles.wrap}>
-          <div
-            class={[
-              styles.listWrap,
-              !state.loading &&
-                state.categoryList.length <= 0 &&
-                styles.listWrapEmpty
-            ]}>
-            {!state.loading && state.categoryList.length <= 0 && (
-              <TheEmpty description="暂无名曲鉴赏" />
-            )}
-            <div style={{ minHeight: '55vh' }}>
-              <NTabs
-                defaultValue="myResources"
-                paneClass={styles.paneTitle}
-                justifyContent="center"
-                paneWrapperClass={styles.paneWrapperContainer}
-                v-model:value={state.tabValue}>
-                {state.categoryList.map((category: any) => (
-                  <NTabPane
-                    name={`name-${category.id}`}
-                    tab={category.name}
-                    // displayDirective="show:lazy"
-                  >
-                    <List
-                      selectItems={state.selectItems}
-                      categoryId={category.id}
-                      categoryChildList={category.childrenList}
-                      onConfirm={(ids: any) => {
-                        state.selectItems = ids || [];
-                      }}
-                    />
-                  </NTabPane>
-                ))}
-              </NTabs>
-            </div>
-          </div>
-        </div>
-        <NSpace class={styles.btnGroup} justify="center">
-          <NButton round onClick={() => emit('close')}>
-            取消
-          </NButton>
-          <NButton round type="primary" onClick={onSubmit}>
-            确认添加
-          </NButton>
-        </NSpace>
-      </div>
-    );
-  }
-});
+import {
+  NButton,
+  NSpace,
+  NTabPane,
+  NTabs
+} from 'naive-ui';
+import { defineComponent, nextTick, reactive } from 'vue';
+import styles from './index.module.less';
+import List from './components/list';
+import { api_knowledgeWikiCategoryType_page } from '/src/views/content-information/api';
+import TheEmpty from '/src/components/TheEmpty';
+import { PageEnum } from '/src/enums/pageEnum';
+
+// 164px 244px
+export default defineComponent({
+  name: 'content-music',
+  emits: ['close', 'confirm'],
+  setup(props, { emit }) {
+    const state = reactive({
+      tabValue: '',
+      categoryList: [] as any,
+      loading: false,
+      selectItems: [] as any
+    });
+
+    const getCategoryList = async () => {
+      state.loading = true;
+      try {
+        const { data } = await api_knowledgeWikiCategoryType_page({
+          type: 'MUSIC',
+          page: 1,
+          rows: 99
+        });
+
+        state.categoryList = data.rows || [];
+        if (state.categoryList.length) {
+          nextTick(() => {
+            state.tabValue = 'name-' + state.categoryList[0].id;
+          });
+        }
+      } catch {
+        //
+      }
+      state.loading = false;
+    };
+
+    getCategoryList();
+
+    // 添加
+    const onSubmit = async () => {
+      const tempList: any = [];
+      state.selectItems.forEach((item: any) => {
+        tempList.push({
+          coverImg: PageEnum.MUSIC_DEFAULT_COVER,
+          title: '名曲鉴赏-' + item.name,
+          materialId: item.id,
+          content: item.id
+        });
+      });
+      emit('confirm', tempList);
+    };
+    return () => (
+      <div class={styles.container}>
+        <div class={styles.wrap}>
+          <div
+            class={[
+              styles.listWrap,
+              !state.loading &&
+                state.categoryList.length <= 0 &&
+                styles.listWrapEmpty
+            ]}>
+            {!state.loading && state.categoryList.length <= 0 && (
+              <TheEmpty description="暂无名曲鉴赏" />
+            )}
+            <div style={{ minHeight: '55vh' }}>
+              <NTabs
+                defaultValue="myResources"
+                paneClass={styles.paneTitle}
+                justifyContent="center"
+                paneWrapperClass={styles.paneWrapperContainer}
+                v-model:value={state.tabValue}>
+                {state.categoryList.map((category: any) => (
+                  <NTabPane
+                    name={`name-${category.id}`}
+                    tab={category.name}
+                    // displayDirective="show:lazy"
+                  >
+                    <List
+                      selectItems={state.selectItems}
+                      categoryId={category.id}
+                      categoryChildList={category.childrenList}
+                      onConfirm={(ids: any) => {
+                        state.selectItems = ids || [];
+                      }}
+                    />
+                  </NTabPane>
+                ))}
+              </NTabs>
+            </div>
+          </div>
+        </div>
+        <NSpace class={styles.btnGroup} justify="center">
+          <NButton round onClick={() => emit('close')}>
+            取消
+          </NButton>
+          <NButton round type="primary" onClick={onSubmit} disabled={!state.selectItems.length}>
+            确认添加
+          </NButton>
+        </NSpace>
+      </div>
+    );
+  }
+});

src/views/prepare-lessons/model/source-musician/components/list/search-group-resources.tsx

@@ -1,177 +1,181 @@
-import { PropType, defineComponent, onMounted, reactive, ref } from 'vue';
-import styles from './index.module.less';
-import { NButton, NCarousel, NCarouselItem, NImage, NSpace } from 'naive-ui';
-import TheSearch from '/src/components/TheSearch';
-import iconSlideRight from '/src/views/prepare-lessons/images/icon-slide-right.png';
-import { nextTick } from 'process';
-export default defineComponent({
-  name: 'search-group',
-  props: {
-    categoryChildList: {
-      type: Array as PropType<any>,
-      default: () => []
-    },
-    wikiCategoryId: {
-      type: String,
-      default: ''
-    }
-  },
-  emits: ['search', 'add'],
-  expose: ['init'],
-  setup(props, { emit }) {
-    // const catchStore = useCatchStore();
-    const forms = reactive({
-      currentIndex: 0,
-      keyword: '',
-      wikiCategoryId: props.wikiCategoryId || '',
-      maxIndex: 0
-    });
-
-    const state = reactive({
-      showSlide: false
-    });
-
-    const onSearch = () => {
-      emit('search', forms);
-    };
-
-    const carouselRef = ref();
-    const onChangeSlide = (type: string) => {
-      if (type === 'left') {
-        carouselRef.value?.prev();
-      } else if (type === 'right') {
-        carouselRef.value?.next();
-      }
-    };
-    onMounted(async () => {
-      // 获取教材分类列表
-      // await catchStore.getMusicSheetCategory()
-      // nextTick(() => {
-      //   carouselRef.value?.to(100);
-      // });
-      nextTick(() => {
-        // carouselRef.value?.to(100);
-
-        // 最外层宽度
-        const carouselContainer = document.querySelector('.carouselContainer');
-        const carouselContainerWidth =
-          (carouselContainer &&
-            carouselContainer.getBoundingClientRect().width) ||
-          0;
-        const slideDoms = document.querySelectorAll('.n-carousel__slide');
-        let slideWidth = 0;
-        slideDoms.forEach(doom => {
-          const rect = doom.getBoundingClientRect();
-          slideWidth += rect.width;
-        });
-        if (slideWidth >= carouselContainerWidth) {
-          state.showSlide = true;
-        }
-      });
-    });
-    return () => (
-      <div class={styles.searchGroup}>
-        <div class={[styles.searchCatatory]}>
-          <NSpace size="small" class={styles.btnType}>
-            {props.categoryChildList.length > 0 ? (
-              <NButton
-                type={
-                  forms.wikiCategoryId === props.wikiCategoryId
-                    ? 'primary'
-                    : 'default'
-                }
-                secondary={
-                  forms.wikiCategoryId === props.wikiCategoryId ? false : true
-                }
-                round
-                size="small"
-                focusable={false}
-                onClick={() => {
-                  forms.wikiCategoryId = props.wikiCategoryId;
-                  onSearch();
-                }}>
-                全部
-              </NButton>
-            ) : (
-              ''
-            )}
-            <div class={styles.carouselGroup}>
-              <NCarousel
-                ref={carouselRef}
-                slidesPerView={'auto'}
-                loop={false}
-                class={[styles.carouselContainer, 'carouselContainer']}
-                showDots={false}
-                // spaceBetween={20}
-                draggable={state.showSlide}
-                currentIndex={forms.currentIndex}
-                onUpdate:currentIndex={(val: any) => {
-                  //
-                  // if (val > forms.maxIndex) {
-                  //   forms.maxIndex = val;
-                  //   carouselRef.value?.to(0);
-                  // }
-                  forms.currentIndex = val;
-                }}>
-                {props.categoryChildList.map((item: any) => (
-                  <NCarouselItem>
-                    <NButton
-                      type={
-                        forms.wikiCategoryId === item.id ? 'primary' : 'default'
-                      }
-                      secondary={
-                        forms.wikiCategoryId === item.id ? false : true
-                      }
-                      round
-                      size="small"
-                      focusable={false}
-                      onClick={() => {
-                        forms.wikiCategoryId = item.id;
-                        onSearch();
-                      }}>
-                      {item.name}
-                    </NButton>
-                  </NCarouselItem>
-                ))}
-              </NCarousel>
-
-              {state.showSlide && (
-                <NSpace class={styles.swipeControll}>
-                  <div onClick={() => onChangeSlide('left')}>
-                    <NImage
-                      previewDisabled
-                      class={[
-                        styles.leftIcon
-                        // forms.currentIndex === 0 && styles.disabled
-                      ]}
-                      src={iconSlideRight}
-                    />
-                  </div>
-                  <div onClick={() => onChangeSlide('right')}>
-                    <NImage
-                      // class={
-                      //   // forms.currentIndex == forms.openTableList.length - 4 &&
-                      //   styles.disabled
-                      // }
-                      previewDisabled
-                      src={iconSlideRight}
-                    />
-                  </div>
-                </NSpace>
-              )}
-            </div>
-          </NSpace>
-          <TheSearch
-            class={styles.inputSearch}
-            placeholder="请输入音乐家名称"
-            round
-            onSearch={(val: string) => {
-              forms.keyword = val;
-              onSearch();
-            }}
-          />
-        </div>
-      </div>
-    );
-  }
-});
+import { PropType, defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from './index.module.less';
+import { NButton, NCarousel, NCarouselItem, NImage, NSpace } from 'naive-ui';
+import TheSearch from '/src/components/TheSearch';
+import iconSlideRight from '/src/views/prepare-lessons/images/icon-slide-right.png';
+import { nextTick } from 'process';
+export default defineComponent({
+  name: 'search-group',
+  props: {
+    categoryChildList: {
+      type: Array as PropType<any>,
+      default: () => []
+    },
+    wikiCategoryId: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['search', 'add'],
+  expose: ['init'],
+  setup(props, { emit }) {
+    // const catchStore = useCatchStore();
+    const forms = reactive({
+      currentIndex: 0,
+      keyword: '',
+      wikiCategoryId: props.wikiCategoryId || '',
+      maxIndex: 0
+    });
+
+    const state = reactive({
+      showSlide: false
+    });
+
+    const onSearch = () => {
+      emit('search', forms);
+    };
+
+    const carouselRef = ref();
+    const onChangeSlide = (type: string) => {
+      if (type === 'left') {
+        carouselRef.value?.prev();
+      } else if (type === 'right') {
+        carouselRef.value?.next();
+      }
+    };
+    onMounted(async () => {
+      // 获取教材分类列表
+      // await catchStore.getMusicSheetCategory()
+      // nextTick(() => {
+      //   carouselRef.value?.to(100);
+      // });
+      nextTick(() => {
+        // carouselRef.value?.to(100);
+
+        // 最外层宽度
+        const carouselContainer = document.querySelector('.carouselContainer');
+        const carouselContainerWidth =
+          (carouselContainer &&
+            carouselContainer.getBoundingClientRect().width) ||
+          0;
+        const slideDoms = document.querySelectorAll('.n-carousel__slide');
+        let slideWidth = 0;
+        slideDoms.forEach(doom => {
+          const rect = doom.getBoundingClientRect();
+          slideWidth += rect.width;
+        });
+        if (slideWidth >= carouselContainerWidth) {
+          state.showSlide = true;
+        }
+      });
+    });
+    return () => (
+      <div class={styles.searchGroup}>
+        <div class={[styles.searchCatatory]}>
+          <NSpace size="small" class={styles.btnType}>
+            {props.categoryChildList.length > 0 ? (
+              <NButton
+                type={
+                  forms.wikiCategoryId === props.wikiCategoryId
+                    ? 'primary'
+                    : 'default'
+                }
+                secondary={
+                  forms.wikiCategoryId === props.wikiCategoryId ? false : true
+                }
+                round
+                size="small"
+                focusable={false}
+                onClick={() => {
+                  forms.wikiCategoryId = props.wikiCategoryId;
+                  onSearch();
+                }}>
+                全部
+              </NButton>
+            ) : (
+              ''
+            )}
+            <div class={styles.carouselGroup}>
+              <NCarousel
+                ref={carouselRef}
+                slidesPerView={'auto'}
+                loop={false}
+                class={[styles.carouselContainer, 'carouselContainer']}
+                showDots={false}
+                // spaceBetween={20}
+                draggable={state.showSlide}
+                currentIndex={forms.currentIndex}
+                onUpdate:currentIndex={(val: any) => {
+                  //
+                  // if (val > forms.maxIndex) {
+                  //   forms.maxIndex = val;
+                  //   carouselRef.value?.to(0);
+                  // }
+                  forms.currentIndex = val;
+                }}>
+                {props.categoryChildList.map((item: any) => (
+                  <NCarouselItem>
+                    <NButton
+                      type={
+                        forms.wikiCategoryId === item.id ? 'primary' : 'default'
+                      }
+                      secondary={
+                        forms.wikiCategoryId === item.id ? false : true
+                      }
+                      round
+                      size="small"
+                      focusable={false}
+                      onClick={() => {
+                        forms.wikiCategoryId = item.id;
+                        onSearch();
+                      }}>
+                      {item.name}
+                    </NButton>
+                  </NCarouselItem>
+                ))}
+              </NCarousel>
+
+              {state.showSlide && (
+                <NSpace class={styles.swipeControll}>
+                  <div onClick={() => onChangeSlide('left')}>
+                    <NImage
+                      previewDisabled
+                      class={[
+                        styles.leftIcon
+                        // forms.currentIndex === 0 && styles.disabled
+                      ]}
+                      src={iconSlideRight}
+                    />
+                  </div>
+                  <div onClick={() => onChangeSlide('right')}>
+                    <NImage
+                      // class={
+                      //   // forms.currentIndex == forms.openTableList.length - 4 &&
+                      //   styles.disabled
+                      // }
+                      previewDisabled
+                      src={iconSlideRight}
+                    />
+                  </div>
+                </NSpace>
+              )}
+            </div>
+          </NSpace>
+          <TheSearch
+            class={styles.inputSearch}
+            placeholder="请输入音乐家名称"
+            round
+            value={forms.keyword}
+            onUpdate:value={(val: string) => {
+              forms.keyword = val;
+            }}
+            onSearch={(val: string) => {
+              forms.keyword = val;
+              onSearch();
+            }}
+          />
+        </div>
+      </div>
+    );
+  }
+});

src/views/prepare-lessons/model/source-musician/index.tsx

@@ -1,109 +1,109 @@
-import { NButton, NSpace, NTabPane, NTabs } from 'naive-ui';
-import { defineComponent, nextTick, reactive } from 'vue';
-import styles from './index.module.less';
-import { useRoute, useRouter } from 'vue-router';
-import List from './components/list';
-import { api_knowledgeWikiCategoryType_page } from '/src/views/content-information/api';
-import TheEmpty from '/src/components/TheEmpty';
-import { PageEnum } from '/src/enums/pageEnum';
-
-export default defineComponent({
-  name: 'content-instrument',
-  emits: ['confirm', 'close'],
-  setup(props, { emit }) {
-    const state = reactive({
-      tabValue: '',
-      categoryList: [] as any,
-      loading: false,
-      selectItems: [] as any
-    });
-
-    const getCategoryList = async () => {
-      state.loading = true;
-      try {
-        const { data } = await api_knowledgeWikiCategoryType_page({
-          type: 'MUSICIAN',
-          page: 1,
-          rows: 99
-        });
-
-        state.categoryList = data.rows || [];
-        if (state.categoryList.length) {
-          nextTick(() => {
-            state.tabValue = 'name-' + state.categoryList[0].id;
-          });
-        }
-      } catch {
-        //
-      }
-      state.loading = false;
-    };
-
-    getCategoryList();
-
-    // 添加
-    const onSubmit = async () => {
-      const tempList: any = [];
-      state.selectItems.forEach((item: any) => {
-        tempList.push({
-          coverImg: PageEnum.MUSICIAN_DEFAULT_COVER,
-          title: '音乐家-' + item.name,
-          materialId: item.id,
-          content: item.id
-        });
-      });
-      emit('confirm', tempList);
-    };
-    return () => (
-      <div class={styles.container}>
-        <div class={styles.wrap}>
-          <div
-            class={[
-              styles.listWrap,
-              !state.loading &&
-                state.categoryList.length <= 0 &&
-                styles.listWrapEmpty
-            ]}>
-            {!state.loading && state.categoryList.length <= 0 && (
-              <TheEmpty description="暂无音乐家" />
-            )}
-            <div style={{ minHeight: '55vh' }}>
-              <NTabs
-                defaultValue="myResources"
-                paneClass={styles.paneTitle}
-                justifyContent="center"
-                // animated
-                paneWrapperClass={styles.paneWrapperContainer}
-                onUpdate:value={(val: any) => {
-                  sessionStorage.setItem('content-instrument-tab', val);
-                }}
-                v-model:value={state.tabValue}>
-                {state.categoryList.map((category: any) => (
-                  <NTabPane name={`name-${category.id}`} tab={category.name}>
-                    <List
-                      selectItems={state.selectItems}
-                      categoryId={category.id}
-                      categoryChildList={category.childrenList}
-                      onConfirm={(ids: any) => {
-                        state.selectItems = ids || [];
-                      }}
-                    />
-                  </NTabPane>
-                ))}
-              </NTabs>
-            </div>
-          </div>
-        </div>
-
-        <NSpace class={styles.btnGroup} justify="center">
-          <NButton round onClick={() => emit('close')}>
-            取消
-          </NButton>
-          <NButton round type="primary" onClick={onSubmit}>
-            确认添加
-          </NButton>
-        </NSpace>
-      </div>
-    );
-  }
-});
+import { NButton, NSpace, NTabPane, NTabs } from 'naive-ui';
+import { defineComponent, nextTick, reactive } from 'vue';
+import styles from './index.module.less';
+import { useRoute, useRouter } from 'vue-router';
+import List from './components/list';
+import { api_knowledgeWikiCategoryType_page } from '/src/views/content-information/api';
+import TheEmpty from '/src/components/TheEmpty';
+import { PageEnum } from '/src/enums/pageEnum';
+
+export default defineComponent({
+  name: 'content-instrument',
+  emits: ['confirm', 'close'],
+  setup(props, { emit }) {
+    const state = reactive({
+      tabValue: '',
+      categoryList: [] as any,
+      loading: false,
+      selectItems: [] as any
+    });
+
+    const getCategoryList = async () => {
+      state.loading = true;
+      try {
+        const { data } = await api_knowledgeWikiCategoryType_page({
+          type: 'MUSICIAN',
+          page: 1,
+          rows: 99
+        });
+
+        state.categoryList = data.rows || [];
+        if (state.categoryList.length) {
+          nextTick(() => {
+            state.tabValue = 'name-' + state.categoryList[0].id;
+          });
+        }
+      } catch {
+        //
+      }
+      state.loading = false;
+    };
+
+    getCategoryList();
+
+    // 添加
+    const onSubmit = async () => {
+      const tempList: any = [];
+      state.selectItems.forEach((item: any) => {
+        tempList.push({
+          coverImg: PageEnum.MUSICIAN_DEFAULT_COVER,
+          title: '音乐家-' + item.name,
+          materialId: item.id,
+          content: item.id
+        });
+      });
+      emit('confirm', tempList);
+    };
+    return () => (
+      <div class={styles.container}>
+        <div class={styles.wrap}>
+          <div
+            class={[
+              styles.listWrap,
+              !state.loading &&
+                state.categoryList.length <= 0 &&
+                styles.listWrapEmpty
+            ]}>
+            {!state.loading && state.categoryList.length <= 0 && (
+              <TheEmpty description="暂无音乐家" />
+            )}
+            <div style={{ minHeight: '55vh' }}>
+              <NTabs
+                defaultValue="myResources"
+                paneClass={styles.paneTitle}
+                justifyContent="center"
+                // animated
+                paneWrapperClass={styles.paneWrapperContainer}
+                onUpdate:value={(val: any) => {
+                  sessionStorage.setItem('content-instrument-tab', val);
+                }}
+                v-model:value={state.tabValue}>
+                {state.categoryList.map((category: any) => (
+                  <NTabPane name={`name-${category.id}`} tab={category.name}>
+                    <List
+                      selectItems={state.selectItems}
+                      categoryId={category.id}
+                      categoryChildList={category.childrenList}
+                      onConfirm={(ids: any) => {
+                        state.selectItems = ids || [];
+                      }}
+                    />
+                  </NTabPane>
+                ))}
+              </NTabs>
+            </div>
+          </div>
+        </div>
+
+        <NSpace class={styles.btnGroup} justify="center">
+          <NButton round onClick={() => emit('close')}>
+            取消
+          </NButton>
+          <NButton round type="primary" onClick={onSubmit} disabled={!state.selectItems.length}>
+            确认添加
+          </NButton>
+        </NSpace>
+      </div>
+    );
+  }
+});

src/views/prepare-lessons/model/subject-sync/index.tsx

@@ -173,7 +173,7 @@ export default defineComponent({
           <NButton round onClick={() => emit('close')}>
             取消
           </NButton>
-          <NButton round type="primary" onClick={onSubmit}>
+          <NButton round type="primary" onClick={onSubmit} disabled={selectSubjectIds.value.length <= 0}>
             确定
           </NButton>
         </NSpace>