更换搜索条件

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

@@ -1,6 +1,14 @@
 import { PropType, defineComponent, onMounted, reactive, ref } from 'vue';
 import styles from './index.module.less';
-import { NButton, NCascader, NInput, NSelect, NSpace } from 'naive-ui';
+import {
+  NButton,
+  NCascader,
+  NInput,
+  NSelect,
+  NSpace,
+  NTreeSelect,
+  TreeSelectOverrideNodeClickBehavior
+} from 'naive-ui';
 import { resourceTypeArray } from '/src/utils/searchArray';
 import { useCatchStore } from '/src/store/modules/catchData';
 import { useThrottleFn } from '@vueuse/core';
@@ -52,6 +60,14 @@ export default defineComponent({
     //   }
     //   return ids;
     // };
+
+    const override: TreeSelectOverrideNodeClickBehavior = ({ option }) => {
+      if (option.children) {
+        return 'toggleExpand';
+      }
+      return 'default';
+    };
+
     onMounted(async () => {
       // await catchStore.getMusicSheetCategory();
       await catchStore.getMusicTagTreeApi();
@@ -109,7 +125,7 @@ export default defineComponent({
           </div>
           {forms.type === 'MUSIC' && props.type === 'shareResources' && (
             <div class={styles.searchSelect}>
-              <NCascader
+              {/* <NCascader
                 placeholder="全部教材"
                 options={[
                   { id: '', name: '全部教材' },
@@ -136,6 +152,25 @@ export default defineComponent({
                   // 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}
+                onUpdate:value={(value: any) => {
+                  console.log(value, 'value');
+                  forms.bookVersionId = value || '';
+                  onSearch();
+                }}
               />
             </div>
           )}

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

@@ -1,6 +1,14 @@
 import { PropType, defineComponent, onMounted, reactive, ref } from 'vue';
 import styles from './index.module.less';
-import { NButton, NCascader, NInput, NSelect, NSpace } from 'naive-ui';
+import {
+  NButton,
+  NCascader,
+  NInput,
+  NSelect,
+  NSpace,
+  NTreeSelect,
+  TreeSelectOverrideNodeClickBehavior
+} from 'naive-ui';
 import { useCatchStore } from '/src/store/modules/catchData';
 import { useThrottleFn } from '@vueuse/core';
 
@@ -48,6 +56,13 @@ export default defineComponent({
     //   return ids;
     // };
 
+    const override: TreeSelectOverrideNodeClickBehavior = ({ option }) => {
+      if (option.children) {
+        return 'toggleExpand';
+      }
+      return 'default';
+    };
+
     onMounted(async () => {
       // 获取教材分类列表
       // await catchStore.getMusicSheetCategory();
@@ -74,31 +89,21 @@ export default defineComponent({
                   onSearch();
                 }}
               /> */}
-              <NCascader
+              <NTreeSelect
                 placeholder="全部教材"
+                showPath
+                overrideDefaultNodeClickBehavior={override}
                 options={[
                   { id: '', name: '全部教材' },
                   ...catchStore.getMusicTagTree
                 ]}
                 clearable
-                style={{ width: '100%' }}
                 childrenField="children"
-                valueField="id"
                 labelField="name"
-                checkStrategy="child"
-                expandTrigger="hover"
-                showPath
+                keyField="id"
                 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();
                 }}
               />