添加优化

src/components/CCascader/index.module.less

@@ -0,0 +1,193 @@
+.nBaseCascaser {
+  position: relative;
+  z-index: auto;
+  outline: none;
+  width: 100%;
+  box-shadow: none;
+  max-width: 100%;
+  display: inline-block;
+  vertical-align: bottom;
+  border-radius: 8px;
+  min-height: max(34px, 32Px);
+  line-height: 1.5;
+  font-size: max(14px, 13Px);
+
+  &:hover,
+  &.nBaseCascaserActive {
+    .n-base-selection__state-border {
+      z-index: 1;
+      border-color: #289bff;
+    }
+  }
+
+  .n-base-selection-tags {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    pointer-events: none;
+    border: 1px solid #e0e0e6;
+    border-radius: inherit;
+    transition: box-shadow .3s cubic-bezier(.4, 0, .2, 1), border-color .3s cubic-bezier(.4, 0, .2, 1);
+  }
+
+  .n-base-selection-input {
+    font-size: inherit;
+    line-height: inherit;
+    outline: none;
+    cursor: pointer;
+    box-sizing: border-box;
+    border: none;
+    width: 100%;
+    padding: 0 26px 0 12px;
+    background-color: #0000;
+    color: rgb(51, 54, 57);
+    transition: color .3s cubic-bezier(.4, 0, .2, 1);
+    caret-color: #18a058;
+    height: 100%;
+    display: flex;
+    align-items: center;
+
+    .n-base-selection-input__content {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
+
+  .n-base-suffix {
+    cursor: pointer;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 10px;
+
+    .arrow {
+      width: 1em;
+      height: 1em;
+
+      img {
+        width: inherit;
+        height: inherit;
+      }
+    }
+  }
+
+  .n-base-selection-placeholder {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding: 0 12px;
+    transition: color .3s cubic-bezier(.4, 0, .2, 1);
+    color: rgba(19, 20, 21, 0.4);
+
+    .inner {
+      max-width: 100%;
+      overflow: hidden;
+    }
+  }
+
+  .n-base-selection__border,
+  .n-base-selection__state-border {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    pointer-events: none;
+    border: 1px solid #e0e0e6;
+    border-radius: inherit;
+    transition: box-shadow .3s cubic-bezier(.4, 0, .2, 1), border-color .3s cubic-bezier(.4, 0, .2, 1);
+  }
+
+  .n-base-selection__state-border {
+    z-index: 1;
+    border-color: #0000;
+  }
+}
+
+.cascaderPopover {
+  width: 467px;
+  background: #FFFFFF !important;
+  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.12) !important;
+  border-radius: 10px !important;
+  padding: 13px 0 !important;
+}
+
+.baseScrollBar {
+  padding: 0 13px;
+}
+
+.baseContentTitle {
+  font-weight: 600;
+  font-size: max(13px, 13Px);
+  color: #131415;
+  padding-bottom: 10px;
+}
+
+.baseContentWrap {
+  padding-bottom: 15px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+
+  .tag {
+    display: inline-block;
+    background: #F5F6FA;
+    border-radius: 3px;
+    font-weight: 400;
+    font-size: max(13px, 13Px);
+    color: rgba(0, 0, 0, 0.6);
+    padding: 3px 10px;
+    cursor: pointer;
+  }
+
+  .tagActive {
+    background: #D2ECFF;
+    font-weight: 600;
+    color: #131415;
+  }
+}
+
+.btnGroup {
+  border-top: 1px solid #F2F2F2;
+  padding: 10px 25px;
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+  .btn {
+    background: #F1F2F6;
+    border-radius: 5px;
+    font-weight: 600;
+    font-size: 13Px;
+    height: max(30px, 28Px);
+    line-height: max(30px, 28Px);
+    flex: 1;
+    text-align: center;
+    cursor: pointer;
+
+    &+.btn {
+      margin-left: 17px;
+    }
+  }
+
+  .btnCancel {
+    font-weight: 600;
+    color: #1E2022;
+
+  }
+
+  .btnConfirm {
+    background: linear-gradient(312deg, #1B7AF8 0%, #3CBBFF 100%);
+    color: #FFFFFF;
+  }
+}

src/components/CCascader/index.tsx

@@ -0,0 +1,384 @@
+import { NPopover, NScrollbar } from 'naive-ui';
+import {
+  PropType,
+  computed,
+  defineComponent,
+  onMounted,
+  reactive,
+  ref,
+  toRefs,
+  watch
+} from 'vue';
+import styles from './index.module.less';
+import arrowDown from './images/icon-arrow-down.png';
+import arrowUp from './images/icon-arrow-up.png';
+
+export default defineComponent({
+  name: 'c-cascader',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    options: {
+      type: Array as PropType<any[]>,
+      default: () => []
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    placement: {
+      type: String,
+      default: 'bottom-start'
+    }
+  },
+  emits: ['update:value'],
+  setup(props, { emit }) {
+    const state = reactive({
+      popoverShow: false,
+      selectParents: {}, // 选中的数据
+      tagActiveId: '' as any,
+      tagActive: {} as any,
+      childSelectId: null as any
+    });
+
+    // const formatParentCurrentValue = (ids: any, list: any) => {
+    //   for (const item of list) {
+    //     if (ids.includes(item.id)) {
+    //       if (item.children && item.children.length > 0) {
+    //         let lastId: any;
+    //         item.children.forEach((child: any) => {
+    //           if (ids.includes(child.id)) {
+    //             lastId = child.id;
+    //           }
+    //         });
+    //         item.activeIndex = lastId;
+    //       }
+    //     }
+    //     if (item.children && item.children.length > 0) {
+    //       formatParentCurrentValue(ids, item.children);
+    //     }
+    //   }
+    // };
+
+    const initParentSelect = (subject: any) => {
+      let children: any;
+      let columnName = '';
+      if (subject.children) {
+        children = [
+          {
+            columnName: subject.children[0].columnName,
+            name: '全部' + subject.children[0].columnName || '',
+            id: ''
+          },
+          ...subject.children
+        ];
+        columnName = subject.children[0].columnName;
+
+        state.selectParents = {
+          ...subject,
+          columnName,
+          activeIndex: '',
+          children
+        };
+      } else {
+        state.selectParents = {};
+      }
+    };
+
+    // watch(
+    //   () => state.popoverShow,
+    //   () => {
+    //     if (!state.popoverShow || !props.value) return;
+    //     let ids = formatParentId(props.value, props.options);
+    //     state.tagActiveId = ids[0].id;
+    //     props.options.forEach((item: any) => {
+    //       if (item.id === state.tagActiveId) {
+    //         initParentSelect(item);
+    //       }
+    //     });
+
+    //     //
+    //     const index = ids.findIndex((child: any) => child.id === props.value);
+    //     ids = ids.slice(0, index + 1);
+    //     const values = ids.map((item: any) => {
+    //       return item.id;
+    //     });
+    //     console.log(values, 'values');
+    //     formatParentCurrentValue(values, props.options);
+    //   }
+    // );
+
+    const valueText = computed(() => {
+      const id = props.value;
+      const values = getValues(id);
+      const names: any = [];
+      values.forEach((item: any) => {
+        names.push(item.name);
+      });
+      return names.join(' / ');
+    });
+
+    // 递归获取数据
+    const formatParentId = (id: any, list: any, ids = [] as any) => {
+      for (const item of list) {
+        if (item.children && item.children.length > 0) {
+          const cIds: any = formatParentId(id, item.children, [
+            ...ids,
+            {
+              name: item.name,
+              id: item.id
+            }
+          ]);
+          const index = cIds.findIndex((c: any) => c.id === id);
+          if (index > -1) {
+            return cIds;
+          }
+        }
+        if (item.id === id) {
+          return [
+            ...ids,
+            {
+              name: item.name,
+              id
+            }
+          ];
+        }
+      }
+      return ids;
+    };
+
+    const getValues = (value: any) => {
+      let ids = formatParentId(value, props.options);
+      const index = ids.findIndex((child: any) => child.id === value);
+      ids = ids.slice(0, index + 1);
+      return ids;
+    };
+
+    // 重置
+    const onReset = () => {
+      state.childSelectId = null;
+      state.tagActiveId = '';
+      state.selectParents = {};
+      emit('update:value', '');
+      state.popoverShow = false;
+    };
+
+    // 提交
+    const onConfirm = () => {
+      emit('update:value', state.childSelectId || state.tagActiveId);
+      state.popoverShow = false;
+    };
+    return () => (
+      <NPopover
+        placement={props.placement as any}
+        v-model:show={state.popoverShow}
+        showArrow={false}
+        trigger="click"
+        displayDirective="show"
+        class={[styles.cascaderPopover, 'c-cascaderPopover']}>
+        {{
+          trigger: () => (
+            <div
+              class={[
+                styles.nBaseCascaser,
+                state.popoverShow ? styles.nBaseCascaserActive : ''
+              ]}>
+              <div class={styles['n-base-selection-tags']}>
+                <div class={styles['n-base-selection-input']}>
+                  <div class={styles['n-base-selection-input__content']}>
+                    {valueText.value}
+                  </div>
+                </div>
+                <div class={[styles['n-base-suffix']]}>
+                  <div class={[styles.arrow]}>
+                    <img src={state.popoverShow ? arrowUp : arrowDown} />
+                  </div>
+                </div>
+              </div>
+              <div
+                class={[
+                  styles['n-base-selection-placeholder'],
+                  styles['n-base-selection-overlay']
+                ]}>
+                {!valueText.value && (
+                  <div class={styles.inner}>{props.placeholder}</div>
+                )}
+              </div>
+              <div class={styles['n-base-selection__border']}></div>
+              <div class={styles['n-base-selection__state-border']}></div>
+            </div>
+          ),
+          default: () => (
+            <div class={styles.baseContent}>
+              <NScrollbar
+                class={styles.baseScrollBar}
+                style={{ maxHeight: '400px' }}>
+                <div class={styles.baseContentTitle}>
+                  {props.options[0].columnName}
+                </div>
+                <div class={styles.baseContentWrap}>
+                  {props.options.map((subject: any) => (
+                    <span
+                      class={[
+                        styles.tag,
+                        (state.tagActiveId || '') == subject.id &&
+                          styles.tagActive
+                      ]}
+                      onClick={() => {
+                        state.tagActiveId = subject.id;
+                        initParentSelect(subject);
+                      }}>
+                      {subject.name}
+                    </span>
+                  ))}
+                </div>
+                <ChildNodeSearch
+                  activeRow={state.selectParents}
+                  onSelectChildTag={(val: any) => {
+                    state.childSelectId = val;
+                  }}
+                />
+              </NScrollbar>
+              <div class={styles.btnGroup}>
+                <div class={[styles.btn, styles.btnCancel]} onClick={onReset}>
+                  重置
+                </div>
+                <div
+                  class={[styles.btn, styles.btnConfirm]}
+                  onClick={onConfirm}>
+                  确认
+                </div>
+              </div>
+            </div>
+          )
+        }}
+      </NPopover>
+    );
+  }
+});
+
+const ChildNodeSearch = defineComponent({
+  name: 'ChildNodeSearch',
+  props: {
+    activeRow: {
+      type: Object,
+      default: () => ({})
+    },
+    list: {
+      type: Array,
+      default: () => []
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['selectChildTag'],
+  setup(props, { emit }) {
+    const { activeRow } = toRefs(props);
+    const selectItem = ref({});
+
+    watch(
+      () => props.activeRow,
+      () => {
+        activeRow.value = props.activeRow;
+        initActiveRow();
+      }
+    );
+
+    const initActiveRow = () => {
+      if (activeRow.value.activeIndex) {
+        const childList = activeRow.value.children || [];
+        childList.forEach((subject: any) => {
+          if (subject.id === activeRow.value.activeIndex) {
+            let children: any;
+            let columnName = '';
+            if (subject.children) {
+              children = [
+                {
+                  columnName: subject.children[0].columnName,
+                  name: '全部' + subject.children[0].columnName || '',
+                  id: ''
+                },
+                ...subject.children
+              ];
+              columnName = subject.children[0].columnName;
+
+              selectItem.value = {
+                ...subject,
+                columnName,
+                activeIndex: subject.activeIndex || '',
+                children
+              };
+            }
+          }
+        });
+      } else {
+        selectItem.value = {};
+      }
+    };
+
+    onMounted(() => {
+      initActiveRow();
+    });
+    return () => (
+      <>
+        {activeRow.value?.id && (
+          <>
+            <div class={styles.baseContentTitle}>
+              {activeRow.value.columnName}
+            </div>
+            <div class={styles.baseContentWrap}>
+              {activeRow.value?.children.map((subject: any) => (
+                <span
+                  class={[
+                    styles.tag,
+                    (activeRow.value.activeIndex || '') == subject.id &&
+                      styles.tagActive
+                  ]}
+                  onClick={() => {
+                    if (props.loading) return;
+                    activeRow.value.activeIndex = subject.id;
+                    let children: any;
+                    let columnName = '';
+                    if (subject.children) {
+                      children = [
+                        {
+                          columnName: subject.children[0].columnName,
+                          name: '全部' + subject.children[0].columnName || '',
+                          id: ''
+                        },
+                        ...subject.children
+                      ];
+                      columnName = subject.children[0].columnName;
+
+                      selectItem.value = {
+                        ...subject,
+                        columnName,
+                        activeIndex: '',
+                        children
+                      };
+                    } else {
+                      selectItem.value = {};
+                    }
+                    emit('selectChildTag', activeRow.value.activeIndex);
+                  }}>
+                  {subject.name}
+                </span>
+              ))}
+            </div>
+
+            <ChildNodeSearch
+              activeRow={selectItem.value}
+              onSelectChildTag={(item: any) => {
+                emit('selectChildTag', item || activeRow.value.activeIndex);
+              }}
+            />
+          </>
+        )}
+      </>
+    );
+  }
+});

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

@@ -780,18 +780,18 @@
   .selResourBoxClass_drag {
     .select-resource {
       padding-bottom: 0;
-      height: 50vh;
+      height: 70vh;
 
       .spaceSectionBox {
         width: calc(100% - 360px) !important;
       }
 
       .list_container {
-        --listContainerHeight: 50vh;
+        --listContainerHeight: 70vh;
 
         .selresources_item_Wrap {
-          width: calc(100% / 3) !important;
-          padding-bottom: calc(100% / 3 * 0.73333) !important;
+          width: calc(100% / 4) !important;
+          padding-bottom: calc(100% / 4 * 0.73333) !important;
         }
       }
     }
@@ -800,7 +800,7 @@
 
 .selectMusicModal {
   position: relative;
-  width: 1050px;
+  width: 1352px;
 
   :global {
     .n-card-header {
@@ -823,6 +823,7 @@
 .workVisiable {
   width: 1358px;
 
+
   :global {
     .bom_drag {
       position: absolute;
@@ -830,6 +831,10 @@
       left: 0;
       z-index: 1;
     }
+
+    .c-cascaderPopover {
+      width: 320px !important;
+    }
   }
 }
 

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

@@ -130,6 +130,12 @@
 
 .workVisiable {
   width: 1358px;
+
+  :global {
+    .c-cascaderPopover {
+      width: 320px !important;
+    }
+  }
 }
 
 .workContainer {

src/views/homework-record/index.module.less

@@ -80,6 +80,12 @@
 
 .workVisiable {
   width: 1358px;
+
+  :global {
+    .c-cascaderPopover {
+      width: 320px !important;
+    }
+  }
 }
 
 .workContainer {

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

@@ -351,6 +351,12 @@
 
 .workVisiable {
   width: 1358px;
+
+  :global {
+    .c-cascaderPopover {
+      width: 320px !important;
+    }
+  }
 }
 
 .workContainer {

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

@@ -28,19 +28,19 @@
 
 :global {
   .listContainerResource {
-    max-height: calc(var(--window-page-lesson-height) - 244px - 100px) !important;
+    max-height: calc(var(--window-page-lesson-height) - 184px - 100px) !important;
     // overflow-x: auto;
 
-    &.listNoMusicResource {
-      max-height: calc(var(--window-page-lesson-height) - 184px - 100px) !important;
+    // &.listNoMusicResource {
+    //   max-height: calc(var(--window-page-lesson-height) - 154px - 100px) !important;
 
-      .listSectionResource {
-        min-height: calc(var(--window-page-lesson-height) - 184px - 100px) !important;
-      }
-    }
+    //   .listSectionResource {
+    //     min-height: calc(var(--window-page-lesson-height) - 154px - 100px) !important;
+    //   }
+    // }
 
     .listSectionResource {
-      min-height: calc(var(--window-page-lesson-height) - 204px - 100px) !important;
+      min-height: calc(var(--window-page-lesson-height) - 184px - 100px) !important;
     }
   }
 }

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

@@ -1,35 +1,35 @@
-.listContainer {
-  margin: 10px 0;
-  max-height: calc(var(--window-page-lesson-height) - 224px - 20px);
-  // overflow-x: auto;
-
-  &.listNoMusic {
-    max-height: calc(var(--window-page-lesson-height) - 224px - 20px + 60px);
-
-    .listSection {
-      min-height: calc(var(--window-page-lesson-height) - 224px - 20px + 60px);
-    }
-  }
-
-  .listSection {
-    min-height: calc(var(--window-page-lesson-height) - 224px - 20px);
-  }
-
-  .emptySection {
-    display: flex;
-    align-items: center;
-  }
-
-  .list {
-    padding: 10px 0;
-    text-align: center;
-
-    &>div {
-      margin-bottom: 20px;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
+.listContainer {
+  margin: 10px 0;
+  max-height: calc(var(--window-page-lesson-height) - 194px - 20px);
+  // overflow-x: auto;
+
+  &.listNoMusic {
+    max-height: calc(var(--window-page-lesson-height) - 194px - 20px + 60px);
+
+    .listSection {
+      min-height: calc(var(--window-page-lesson-height) - 194px - 20px + 60px);
+    }
+  }
+
+  .listSection {
+    min-height: calc(var(--window-page-lesson-height) - 194px - 20px);
+  }
+
+  .emptySection {
+    display: flex;
+    align-items: center;
+  }
+
+  .list {
+    padding: 10px 0;
+    text-align: center;
+
+    &>div {
+      margin-bottom: 20px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
 }

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

@@ -1,62 +1,68 @@
-.searchGroup {
-  padding: 0 20px;
-
-  .searchSelect {
-    padding: 20px 0 0;
-    display: flex;
-    justify-content: flex-start;
-    gap: 0px 16px;
-  }
-
-  :global {
-
-    .n-base-selection,
-    .n-input {
-      border-radius: 8px;
-      min-height: 40px;
-      height: 40px;
-      font-size: max(15px, 12Px);
-      --n-height: 40px !important;
-    }
-
-    .n-space {
-      flex-wrap: nowrap !important;
-    }
-  }
-}
-
-.inputSearch {
-  margin-top: 20px;
-
-  :global {
-    .n-input-wrapper {
-      padding-left: 12px;
-      padding-right: 4px;
-    }
-  }
-
-  .searchBtn {
-    height: 34px;
-    border-radius: 8px;
-    font-size: 15px;
-    font-weight: 500;
-  }
-}
-
-.btnType {
-  gap: 0px 6px !important;
-
-  :global {
-    .n-button {
-      height: 28px;
-      padding: 0 13px;
-      font-size: max(15px, 11Px);
-      color: rgba(0, 0, 0, .6);
-
-      &.n-button--primary-type {
-        font-weight: bold;
-        color: #fff;
-      }
-    }
-  }
+:global {
+  .c-cascaderPopover {
+    width: 360px !important;
+  }
+}
+
+.searchGroup {
+  padding: 0 20px;
+
+  .searchSelect {
+    padding: 20px 0 0;
+    display: flex;
+    justify-content: flex-start;
+    gap: 0px 16px;
+  }
+
+  :global {
+
+    .n-base-selection,
+    .n-input {
+      border-radius: 8px;
+      min-height: max(34px, 32Px);
+      height: max(34px, 32Px);
+      font-size: max(15px, 12Px);
+      --n-height: 34 !important;
+    }
+
+    .n-space {
+      flex-wrap: nowrap !important;
+    }
+  }
+}
+
+.inputSearch {
+  margin-top: 20px;
+
+  :global {
+    .n-input-wrapper {
+      padding-left: 12px;
+      padding-right: 4px;
+    }
+  }
+
+  .searchBtn {
+    height: max(34px, 32Px);
+    border-radius: 8px;
+    font-size: 15px;
+    font-weight: 500;
+  }
+}
+
+.btnType {
+  gap: 0px 6px !important;
+
+  :global {
+    .n-button {
+      height: 28px;
+      padding: 0 13px;
+      font-size: max(15px, 11Px);
+      color: rgba(0, 0, 0, .6);
+
+      &.n-button--primary-type {
+        font-weight: bold;
+        color: #fff;
+      }
+    }
+  }
 }

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

@@ -12,6 +12,7 @@ import {
 import { resourceTypeArray } from '/src/utils/searchArray';
 import { useCatchStore } from '/src/store/modules/catchData';
 import { useThrottleFn } from '@vueuse/core';
+import CCascader from '/src/components/CCascader';
 
 export default defineComponent({
   name: 'resource-search-group',
@@ -26,11 +27,10 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     const catchStore = useCatchStore();
-    const musics = ref([] as any);
+    const musics = ref('');
     const forms = reactive({
       type: 'MUSIC', //
       name: '',
-      // grade: null as any,
       bookVersionId: null as any,
       // musicSheetCategoriesId: null,
       musicalInstrumentId: ''
@@ -43,36 +43,49 @@ export default defineComponent({
 
     const debouncedRequest = useThrottleFn(() => onSearch(), 500);
 
-    // const formatParentId = (id: any, list: any, ids = [] as any) => {
-    //   for (const item of list) {
-    //     if (item.children && item.children.length > 0) {
-    //       const cIds: any = formatParentId(id, item.children, [
-    //         ...ids,
-    //         item.id
-    //       ]);
-    //       if (cIds.includes(id)) {
-    //         return cIds;
-    //       }
-    //     }
-    //     if (item.id === id) {
-    //       return [...ids, id];
-    //     }
-    //   }
-    //   return ids;
-    // };
-
-    const override: TreeSelectOverrideNodeClickBehavior = ({ option }) => {
-      if (option.children) {
-        return 'toggleExpand';
+    const tagList = ref<any[]>([]);
+    const _initTags = () => {
+      const tags = catchStore.getMusicTagTree;
+      tagList.value = [
+        {
+          columnName: tags[0].columnName,
+          name: '全部' + tags[0].columnName || '',
+          id: ''
+        },
+        ...tags
+      ];
+    };
+    const formatParentCurrentValue = (list: any) => {
+      for (const item of list) {
+        if (item.instruments && item.instruments.length > 0) {
+          item.instruments.forEach((child: any) => {
+            child.columnName = '乐器';
+          });
+          item.children = item.instruments;
+          formatParentCurrentValue(item.instruments);
+        }
       }
-      return 'default';
     };
-
+    const tagSubjectList = ref<any[]>([]);
+    const _initSubjectTags = () => {
+      const tags = catchStore.getSubjectList;
+      formatParentCurrentValue(tags);
+      tagSubjectList.value = [
+        {
+          columnName: '声部',
+          name: '全部声部',
+          id: ''
+        },
+        ...tags
+      ];
+    };
     onMounted(async () => {
       // await catchStore.getMusicSheetCategory();
       await catchStore.getMusicTagTreeApi();
+      _initTags();
       // 获取教材分类列表
       await catchStore.getSubjects();
+      _initSubjectTags();
 
       resourceTypeArray.forEach((item: any) => {
         // if (props.type === 'myResources') {
@@ -103,77 +116,27 @@ export default defineComponent({
           </NSpace>
 
           <div class={styles.searchSelect}>
-            <NCascader
-              placeholder="全部乐器"
-              options={[
-                { name: '全部乐器', id: '' },
-                ...catchStore.getSubjectList
-              ]}
-              clearable
-              labelField="name"
-              valueField="id"
+            <CCascader
+              placeholder="全部声部"
               v-model:value={forms.musicalInstrumentId}
+              options={tagSubjectList.value}
               onUpdate:value={() => {
                 onSearch();
               }}
-              checkStrategy="child"
-              showPath={false}
-              childrenField="instruments"
-              expandTrigger="hover"
-              filterable
             />
-          </div>
-          {forms.type === 'MUSIC' && props.type === 'shareResources' && (
-            <div class={styles.searchSelect}>
-              {/* <NCascader
+            {forms.type === 'MUSIC' && props.type === 'shareResources' && (
+              <CCascader
                 placeholder="全部教材"
-                options={[
-                  { id: '', name: '全部教材' },
-                  ...catchStore.getMusicTagTree
-                ]}
-                clearable
-                style={{ width: '100%' }}
-                childrenField="children"
-                valueField="id"
-                labelField="name"
-                checkStrategy="child"
-                expandTrigger="hover"
-                showPath
-                v-model:value={musics.value}
-                onUpdate:value={(value: any) => {
-                  // onSearch();
-                  // const selectValue = formatParentId(value, [
-                  //   { id: '', name: '全部教材' },
-                  //   ...catchStore.getMusicTagTree
-                  // ]);
-
-                  forms.bookVersionId = value || '';
-                  // forms.grade = selectValue[1] || '';
-                  // forms.musicSheetCategoriesId = selectValue[2] || null;
-                  onSearch();
-                }}
-              /> */}
-              <NTreeSelect
-                placeholder="全部教材"
-                showPath
-                overrideDefaultNodeClickBehavior={override}
-                options={[
-                  { id: '', name: '全部教材' },
-                  ...catchStore.getMusicTagTree
-                ]}
-                clearable
-                childrenField="children"
-                labelField="name"
-                keyField="id"
                 v-model:value={musics.value}
+                options={tagList.value}
                 onUpdate:value={(value: any) => {
                   console.log(value, 'value');
                   forms.bookVersionId = value || '';
                   onSearch();
                 }}
               />
-            </div>
-          )}
+            )}
+          </div>
 
           <NInput
             type="text"

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

@@ -1,18 +1,18 @@
 .listContainer {
   margin: 10px 0;
-  max-height: calc(var(--window-page-lesson-height) - 264px);
+  max-height: calc(var(--window-page-lesson-height) - 204px);
   // overflow-x: auto; 60 204 150
 
   &.listNoMusic {
-    max-height: calc(var(--window-page-lesson-height) - 210px);
+    max-height: calc(var(--window-page-lesson-height) - 150px);
 
     .listSection {
-      min-height: calc(var(--window-page-lesson-height) - 210px);
+      min-height: calc(var(--window-page-lesson-height) - 150px);
     }
   }
 
   .listSection {
-    min-height: calc(var(--window-page-lesson-height) - 264px);
+    min-height: calc(var(--window-page-lesson-height) - 204px);
   }
 
 

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

@@ -1,56 +1,58 @@
-.searchGroup {
-  padding: 0 20px;
-
-  .searchSelect {
-    padding: 0 0 20px;
-    display: flex;
-    justify-content: flex-start;
-    gap: 0px 16px;
-  }
-
-  :global {
-
-    .n-base-selection,
-    .n-input {
-      border-radius: 8px;
-      min-height: 40px;
-      height: 40px;
-      font-size: max(15px, 12Px);
-      --n-height: 40px !important;
-    }
-  }
-}
-
-.inputSearch {
-  :global {
-    .n-input-wrapper {
-      padding-left: 12px;
-      padding-right: 4px;
-    }
-  }
-
-  .searchBtn {
-    height: 34px;
-    border-radius: 8px;
-    font-size: 15px;
-    font-weight: 500;
-  }
-}
-
-.btnType {
-  gap: 0px 6px !important;
-
-  :global {
-    .n-button {
-      height: 28px;
-      padding: 0 13px;
-      font-size: 15px;
-      color: rgba(0, 0, 0, .6);
-
-      &.n-button--primary-type {
-        font-weight: bold;
-        color: #fff;
-      }
-    }
-  }
+.searchGroup {
+  padding: 0 20px;
+
+  .searchSelect {
+    padding: 0 0 20px;
+    display: flex;
+    justify-content: flex-start;
+    gap: 0px 16px;
+  }
+
+  :global {
+
+    .n-base-selection,
+    .n-input {
+      border-radius: 8px;
+      // min-height: 40px;
+      // height: 40px;
+      min-height: max(34px, 32Px);
+      height: max(34px, 32Px);
+      font-size: max(15px, 12Px);
+      --n-height: 34px !important;
+    }
+  }
+}
+
+.inputSearch {
+  :global {
+    .n-input-wrapper {
+      padding-left: 12px;
+      padding-right: 4px;
+    }
+  }
+
+  .searchBtn {
+    height: 34px;
+    border-radius: 8px;
+    font-size: 15px;
+    font-weight: 500;
+  }
+}
+
+.btnType {
+  gap: 0px 6px !important;
+
+  :global {
+    .n-button {
+      height: 28px;
+      padding: 0 13px;
+      font-size: 15px;
+      color: rgba(0, 0, 0, .6);
+
+      &.n-button--primary-type {
+        font-weight: bold;
+        color: #fff;
+      }
+    }
+  }
 }

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

@@ -11,6 +11,7 @@ import {
 } from 'naive-ui';
 import { useCatchStore } from '/src/store/modules/catchData';
 import { useThrottleFn } from '@vueuse/core';
+import CCascader from '/src/components/CCascader';
 
 export default defineComponent({
   name: 'resource-search-group',
@@ -23,13 +24,13 @@ export default defineComponent({
   emits: ['search'],
   setup(props, { emit }) {
     const catchStore = useCatchStore();
-    const musics = ref([] as any);
+    const musics = ref('');
     const forms = reactive({
       name: '',
       // grade: null as any,
-      bookVersionId: null as any,
+      bookVersionId: '' as any,
       // musicSheetCategoriesId: null,
-      musicalInstrumentId: null
+      musicalInstrumentId: ''
     });
 
     const onSearch = () => {
@@ -56,75 +57,78 @@ export default defineComponent({
     //   return ids;
     // };
 
-    const override: TreeSelectOverrideNodeClickBehavior = ({ option }) => {
-      if (option.children) {
-        return 'toggleExpand';
+    const tagList = ref<any[]>([]);
+    const _initTags = () => {
+      const tags = catchStore.getMusicTagTree;
+      tagList.value = [
+        {
+          columnName: tags[0].columnName,
+          name: '全部' + tags[0].columnName || '',
+          id: ''
+        },
+        ...tags
+      ];
+    };
+    const formatParentCurrentValue = (list: any) => {
+      for (const item of list) {
+        if (item.instruments && item.instruments.length > 0) {
+          item.instruments.forEach((child: any) => {
+            child.columnName = '乐器';
+          });
+          item.children = item.instruments;
+          formatParentCurrentValue(item.instruments);
+        }
       }
-      return 'default';
     };
-
+    const tagSubjectList = ref<any[]>([]);
+    const _initSubjectTags = () => {
+      const tags = catchStore.getSubjectList;
+      formatParentCurrentValue(tags);
+      tagSubjectList.value = [
+        {
+          columnName: '声部',
+          name: '全部声部',
+          id: ''
+        },
+        ...tags
+      ];
+    };
     onMounted(async () => {
       // 获取教材分类列表
       // await catchStore.getMusicSheetCategory();
       await catchStore.getMusicTagTreeApi();
+      _initTags();
+      // 获取教材分类列表
+      await catchStore.getSubjects();
+      _initSubjectTags();
       // 获取声部列表
       await catchStore.getSubjects();
     });
     return () => (
       <>
         <div class={styles.searchGroup}>
-          {props.type !== 'myMusic' && (
-            <div class={styles.searchSelect}>
-              {/* <NSelect
-                placeholder="全部教材"
-                options={[
-                  { name: '全部教材', id: null },
-                  ...catchStore.getMusicCategories
-                ]}
-                clearable
-                labelField="name"
-                valueField="id"
-                v-model:value={forms.musicSheetCategoriesId}
-                onUpdate:value={() => {
-                  onSearch();
-                }}
-              /> */}
-              <NTreeSelect
-                placeholder="全部教材"
-                showPath
-                overrideDefaultNodeClickBehavior={override}
-                options={[
-                  { id: '', name: '全部教材' },
-                  ...catchStore.getMusicTagTree
-                ]}
-                clearable
-                childrenField="children"
-                labelField="name"
-                keyField="id"
-                v-model:value={musics.value}
-                onUpdate:value={(value: any) => {
-                  forms.bookVersionId = value || '';
-                  onSearch();
-                }}
-              />
-            </div>
-          )}
-
           <div class={styles.searchSelect}>
-            <NCascader
-              placeholder="全部乐器"
+            <CCascader
               v-model:value={forms.musicalInstrumentId}
-              options={[...catchStore.getSubjectList]}
-              checkStrategy="child"
-              showPath={false}
-              childrenField="instruments"
-              expandTrigger="hover"
-              clearable
-              filterable
+              placeholder="全部声部"
+              options={tagSubjectList.value}
               onUpdate:value={() => {
                 onSearch();
               }}
             />
+            {props.type !== 'myMusic' && (
+              <CCascader
+                placement="bottom-end"
+                placeholder="全部版本"
+                v-model:value={musics.value}
+                options={tagList.value}
+                onUpdate:value={(value: any) => {
+                  console.log(value, 'value');
+                  forms.bookVersionId = value || '';
+                  onSearch();
+                }}
+              />
+            )}
           </div>
           <NInput
             type="text"

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

@@ -159,23 +159,10 @@ export default defineComponent({
     });
     return () => (
       <div class={styles.selectMusic}>
-        <div class={className}>
-          <SearchGroup
-            type={props.type}
-            onSearch={(item: any, type: any) => {
-              if (type) {
-                onSearch(item);
-                return;
-              }
-              throttledFnSearch(item);
-            }}
-          />
-        </div>
-
         <NScrollbar
           class={styles.listContainer}
           style={{
-            'max-height': `calc(85vh - var(--modal-lesson-tab-height) - ${state.searchHeight} - 12px) `
+            'max-height': `calc(85vh - var(--modal-lesson-tab-height) - 12px) `
           }}
           onScroll={(e: any) => {
             const clientHeight = e.target?.clientHeight;
@@ -190,6 +177,18 @@ export default defineComponent({
               throttledFn();
             }
           }}>
+          <div class={className}>
+            <SearchGroup
+              type={props.type}
+              onSearch={(item: any, type: any) => {
+                if (type) {
+                  onSearch(item);
+                  return;
+                }
+                throttledFnSearch(item);
+              }}
+            />
+          </div>
           <NSpin show={state.loading} size={'small'}>
             <div
               style={{

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

@@ -54,53 +54,6 @@ 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 = () => {
-    //   try {
-    //     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;
-    //   } catch {
-    //     //
-    //   }
-    // };
-
     const selectChildObj = (item: any) => {
       const obj: any = {};
       item?.forEach((child: any) => {
@@ -112,19 +65,8 @@ export default defineComponent({
       return obj;
     };
     onMounted(async () => {
-      // if (props.type === 'myCollect') {
-      //   resourceType.value.push({
-      //     label: '全部',
-      //     value: ''
-      //   });
-      //   forms.type = ''; // 默认全部
-      // }
       resourceTypeArray.forEach((item: any) => {
-        // if (props.type === 'myResources') {
-        //   item.value !== 'MUSIC' && resourceType.value.push(item);
-        // } else {
         resourceType.value.push(item);
-        // }
       });
 
       // 获取教材分类列表
@@ -140,109 +82,10 @@ export default defineComponent({
           }
         }
       });
-      // 这里开始
-      // musicCateRef
-      // if (forms.type === 'MUSIC') {
-      //   orginHeight.value = collapseWrapRef.value?.offsetHeight;
-      //   hiddenHeight.value = collapseWrapRef.value?.offsetHeight / line.value;
-      //   // 默认隐藏
-      //   getLive();
-      // }
     });
     return () => (
       <div class={styles.searchGroup}>
-        {/* <div class={styles.searchCatatory}> */}
-        {/* <NSpace size="small" class={styles.btnType}>
-            {resourceType.value.map((item: any) => (
-              <NButton
-                type={forms.type === item.value ? 'primary' : 'default'}
-                secondary={forms.type === item.value ? false : true}
-                round
-                size="small"
-                focusable={false}
-                onClick={() => {
-                  forms.type = item.value;
-                  onSearch();
-
-                  try {
-                    nextTick(() => {
-                      if (forms.type === 'MUSIC') {
-                        orginHeight.value = collapseWrapRef.value?.offsetHeight;
-                        hiddenHeight.value =
-                          collapseWrapRef.value?.offsetHeight / line.value;
-                        // 默认隐藏
-                        getLive();
-                      } else {
-                        divDomList.value = [];
-                      }
-                    });
-                  } catch {
-                    //
-                  }
-                }}>
-                {item.label}
-              </NButton>
-            ))}
-          </NSpace> */}
-
-        {/* </div> */}
         <NForm labelAlign="left" labelPlacement="left">
-          {/* {forms.type === 'MUSIC' && props.type === 'shareResources' && (
-            <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>
-                    ))}
-                    {line.value > 1 && (
-                      <div
-                        style={{
-                          height: 'var(--n-blank-height)',
-                          position: 'absolute',
-                          display: 'flex',
-                          alignItems: 'center'
-                        }}
-                        onClick={() => {
-                          setCollapse(!isCollapse.value);
-                        }}>
-                        <NImage
-                          previewDisabled
-                          src={isCollaose}
-                          class={[
-                            styles.collaoseBtn,
-                            isCollapse.value ? styles.isStart : ''
-                          ]}></NImage>
-                      </div>
-                    )}
-                  </NSpace>
-                </div>
-              </NFormItem>
-            </div>
-          )} */}
-
           <NFormItem label="乐器：">
             <NSpace
               class={[

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

@@ -4,8 +4,7 @@ import {
   onMounted,
   onUnmounted,
   reactive,
-  toRefs,
-  watch
+  toRefs
 } from 'vue';
 import ResourceSearchGroup from './resource-search-group';
 import { NScrollbar, NSpin, useMessage } from 'naive-ui';
@@ -50,11 +49,12 @@ export default defineComponent({
   setup(props) {
     const prepareStore = usePrepareStore();
     const catchStore = useCatchStore();
-    const message = useMessage();
     const { type } = toRefs(props);
     const className = 'resourceSearchGroup' + +new Date();
+    const className2 = 'spinSearchGroup' + +new Date();
     const state = reactive({
       searchHeight: '0px',
+      searchHeight2: '0px',
       loading: false,
       finshed: false, // 是否加载完
       pagination: {
@@ -195,8 +195,16 @@ export default defineComponent({
           state.searchHeight = height + 'px';
         }
       );
+      useResizeObserver(
+        document.querySelector('.' + className2) as HTMLElement,
+        (entries: any) => {
+          const entry = entries[0];
+          const { height } = entry.contentRect;
+          state.searchHeight2 = height + 'px';
+        }
+      );
 
-      if (props.type !== 'shareResources') {
+      if (props.type !== 'shareResources' || props.from === 'class') {
         getList();
       }
 
@@ -208,45 +216,12 @@ export default defineComponent({
       eventGlobal.off('onCoursewareUpdate', onUpdate);
     });
 
-    // onMounted(async () => {
-    //   // 获取声部
-    //   await catchStore.getSubjects();
-
-    //   // 加载的时候判断是否有资源数据
-    //   let noRepeatIds: any = [];
-    //   if (props.type === 'relateResources') {
-    //     const materialIds: any = [];
-    //     prepareStore.getCoursewareList.forEach((course: any) => {
-    //       course.list?.forEach((item: any) => {
-    //         materialIds.push(item.materialId);
-    //       });
-    //     });
-    //     noRepeatIds = Array(...new Set(materialIds));
-    //   }
-    //   getList(noRepeatIds.join(','));
-
-    //   useResizeObserver(
-    //     document.querySelector('.' + className) as HTMLElement,
-    //     (entries: any) => {
-    //       const entry = entries[0];
-    //       const { height } = entry.contentRect;
-    //       state.searchHeight = height + 'px';
-    //     }
-    //   );
-    // });
     return () => (
       <div>
-        <div class={className}>
-          {props.from === 'class' ? (
-            <ClassSearchGroup
-              type={props.type}
-              subjectId={prepareStore.getSubjectId as any}
-              onSearch={(item: any) => throttledFnSearch(item)}
-            />
-          ) : (
+        {/* <div class={className}>
+          {props.from !== 'class' && (
             <ResourceSearchGroup
               type={props.type}
-              // subjectId={prepareStore.getSubjectId as any}
               onSearch={(item: any, type: any) => {
                 if (type) {
                   onSearch(item);
@@ -256,7 +231,7 @@ export default defineComponent({
               }}
             />
           )}
-        </div>
+        </div> */}
         <NScrollbar
           class={[styles.listContainer, 'list_container']}
           style={{
@@ -276,10 +251,30 @@ export default defineComponent({
               getList();
             }
           }}>
+          <div class={className2}>
+            {props.from === 'class' ? (
+              <ClassSearchGroup
+                type={props.type}
+                subjectId={prepareStore.getSubjectId as any}
+                onSearch={(item: any) => throttledFnSearch(item)}
+              />
+            ) : (
+              <ResourceSearchGroup
+                type={props.type}
+                onSearch={(item: any, type: any) => {
+                  if (type) {
+                    onSearch(item);
+                    return;
+                  }
+                  throttledFnSearch(item);
+                }}
+              />
+            )}
+          </div>
           <NSpin show={state.loading} size={'small'}>
             <div
               style={{
-                'min-height': `calc(var(--listContainerHeight) - var(--modal-lesson-tab-height) - ${state.searchHeight})`
+                'min-height': `calc(var(--listContainerHeight) - var(--modal-lesson-tab-height) - ${state.searchHeight} - ${state.searchHeight2})`
               }}
               class={[
                 styles.listSection,

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

@@ -1,5 +1,5 @@
 .searchGroup {
-  position: relative;
+  // position: relative;
   padding: 0 40px;
 
 
@@ -86,6 +86,16 @@
     padding-bottom: 20px;
     border-bottom: 1px solid #F2F2F2;
     margin-bottom: 20px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    background-color: #fff;
+    width: calc(100% - 76px);
+    // padding: 0 40px 20px;
+    margin-left: 38px;
+    margin-right: 38px;
 
     .addTrain {
       height: 37px;
@@ -101,6 +111,10 @@
       }
     }
   }
+
+  .searchForm {
+    padding-top: 78px;
+  }
 }
 
 .spaceSection {

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

@@ -260,19 +260,8 @@ export default defineComponent({
     };
 
     onMounted(async () => {
-      // if (props.type === 'myCollect') {
-      //   resourceType.value.push({
-      //     label: '全部',
-      //     value: ''
-      //   });
-      //   forms.type = ''; // 默认全部
-      // }
       resourceTypeArray.forEach((item: any) => {
-        // if (props.type === 'myResources') {
-        //   item.value !== 'MUSIC' && resourceType.value.push(item);
-        // } else {
         resourceType.value.push(item);
-        // }
       });
 
       // // 获取教材分类列表
@@ -282,19 +271,6 @@ export default defineComponent({
       // 获取声部
       await catchStore.getSubjects();
 
-      // console.log(
-      //   catchStore.getSubjectInstruments,
-      //   'catchStore.getSubjectInstruments'
-      // );
-      // catchStore.getSubjectInstruments.forEach((item: any) => {
-      //   if (item.id == props.subjectId && Array.isArray(item.instruments)) {
-      //     if (item.instruments.length > 0) {
-      //       forms.subjectId = item.instruments[0].value;
-      //     } else {
-      //       forms.subjectId = item.value;
-      //     }
-      //   }
-      // });
       forms.subjectId = null;
 
       // 这里开始
@@ -304,19 +280,6 @@ export default defineComponent({
         hiddenHeight.value = collapseWrapRef.value?.offsetHeight / line.value;
         // 默认隐藏
         getLive();
-
-        // const musicTagTreeList = catchStore.getMusicTagTree;
-        // if (musicTagTreeList.length > 0) {
-        //   forms.bookVersionId = musicTagTreeList[0].id;
-        //   state.gradeList = musicTagTreeList[0].children || [];
-        //   if (state.gradeList.length > 0) {
-        //     forms.grade = state.gradeList[0].id;
-        //     state.musicCategory = state.gradeList[0].children || [];
-        //     if (state.musicCategory.length > 0) {
-        //       forms.musicSheetCategoriesId = state.musicCategory[0].id;
-        //     }
-        //   }
-        // }
       }
 
       if (props.type === 'shareResources') {
@@ -372,7 +335,10 @@ export default defineComponent({
             }}
           />
         </div>
-        <NForm labelAlign="left" labelPlacement="left">
+        <NForm
+          labelAlign="left"
+          labelPlacement="left"
+          class={styles.searchForm}>
           {forms.type === 'MUSIC' && props.type === 'shareResources' && (
             <>
               <NFormItem label={data.tags[0]?.columnName + '：'}>

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

@@ -0,0 +1,121 @@
+import {
+  PropType,
+  defineComponent,
+  nextTick,
+  onMounted,
+  reactive,
+  ref,
+  toRef,
+  toRefs,
+  watch
+} from 'vue';
+import styles from './index.module.less';
+import {
+  NButton,
+  NForm,
+  NFormItem,
+  NImage,
+  NPopselect,
+  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';
+
+export default defineComponent({
+  name: 'resource-search-group',
+  props: {
+    type: {
+      type: String as PropType<
+        'relateResources' | 'shareResources' | 'myResources' | 'myCollect'
+      >,
+      default: 'shareResources'
+    },
+    subjectId: {
+      type: String,
+      default: null
+    }
+  },
+  emits: ['search'],
+  setup(props, { emit }) {
+    const subjectId = toRef(props.subjectId);
+    const catchStore = useCatchStore();
+    const forms = reactive({
+      type: 'MUSIC', //
+      name: '',
+      subjectId: subjectId.value as any
+    });
+    const state = reactive({
+      tempSubjectId: null,
+      gradeList: [] as any[],
+      musicCategory: [] as any
+    });
+    const data = reactive({
+      selectParents: {}, // 选中的数据
+      tags: [] as any[],
+      tagActiveId: '' as any,
+      tagActive: {} as any,
+      childSelectId: null as any
+    });
+
+    const resourceType = ref([] as any);
+
+    const onSearch = (type?: string) => {
+      emit(
+        'search',
+        {
+          ...forms
+        },
+        type
+      );
+    };
+
+    const throttleFn = useThrottleFn(() => onSearch(), 500);
+
+    onMounted(async () => {
+      resourceTypeArray.forEach((item: any) => {
+        resourceType.value.push(item);
+      });
+
+      if (props.type === 'shareResources') {
+        onSearch('timer');
+      }
+    });
+    return () => (
+      <div class={styles.searchGroup}>
+        <div class={styles.searchCatatory}>
+          <NSpace size="small" class={styles.btnType}>
+            {resourceType.value.map((item: any) => (
+              <NButton
+                type={forms.type === item.value ? 'primary' : 'default'}
+                secondary={forms.type === item.value ? false : true}
+                round
+                size="small"
+                focusable={false}
+                onClick={() => {
+                  forms.type = item.value;
+                  forms.subjectId = null;
+                  data.tagActiveId = '';
+                  data.childSelectId = null;
+                  data.selectParents = {};
+                  onSearch();
+                }}>
+                {item.label}
+              </NButton>
+            ))}
+          </NSpace>
+
+          <TheSearch
+            class={styles.inputSearch}
+            round
+            onSearch={(val: string) => {
+              forms.name = val;
+              throttleFn();
+            }}
+          />
+        </div>
+      </div>
+    );
+  }
+});