更新

src/components/CCascader/index.module.less

@@ -14,6 +14,8 @@
 
   &:hover,
   &.nBaseCascaserActive {
+    cursor: pointer;
+
     .n-base-selection__state-border {
       z-index: 1;
       border-color: #289bff;

src/components/CCascader/index.tsx

@@ -1,4 +1,4 @@
-import { NPopover, NScrollbar } from 'naive-ui';
+import { NPopover, NScrollbar, NTooltip } from 'naive-ui';
 import {
   PropType,
   computed,
@@ -31,6 +31,10 @@ export default defineComponent({
     placement: {
       type: String,
       default: 'bottom-start'
+    },
+    showPath: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['update:value'],
@@ -40,7 +44,9 @@ export default defineComponent({
       selectParents: {}, // 选中的数据
       tagActiveId: '' as any,
       tagActive: {} as any,
-      childSelectId: null as any
+      childSelectId: null as any,
+      x: 0,
+      y: 0
     });
 
     // const formatParentCurrentValue = (ids: any, list: any) => {
@@ -117,7 +123,12 @@ export default defineComponent({
       values.forEach((item: any) => {
         names.push(item.name);
       });
-      return names.join(' / ');
+      if (props.showPath) {
+        return names.join(' / ');
+      } else {
+        const lastName = names.pop();
+        return lastName;
+      }
     });
 
     // 递归获取数据
@@ -171,90 +182,183 @@ export default defineComponent({
       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
+          class={[
+            styles.nBaseCascaser,
+            state.popoverShow ? styles.nBaseCascaserActive : ''
+          ]}
+          onClick={(e: MouseEvent) => {
+            console.log(e.target);
+            if (state.popoverShow) {
+              state.popoverShow = false;
+            } else {
+              state.popoverShow = true;
+              state.x = e.clientX;
+              state.y = e.clientY;
+            }
+          }}>
+          <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
-                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-suffix']]}>
+              <div class={[styles.arrow]}>
+                <img src={state.popoverShow ? arrowUp : arrowDown} />
               </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['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>
+        <NPopover
+          placement={props.placement as any}
+          v-model:show={state.popoverShow}
+          showArrow={false}
+          trigger="manual"
+          x={state.x}
+          y={state.y}
+          displayDirective="show"
+          class={[styles.cascaderPopover, 'c-cascaderPopover']}>
+          <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> */}
+        <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 : ''
+                ]}
+                title={valueText.value}>
+                <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.btn, styles.btnConfirm]}
-                  onClick={onConfirm}>
-                  确认
+                  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>
-            </div>
-          )
-        }}
-      </NPopover>
+            ),
+            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>
+      </>
     );
   }
 });

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

@@ -22,7 +22,7 @@
       min-height: max(34px, 32Px);
       height: max(34px, 32Px);
       font-size: max(15px, 12Px);
-      --n-height: 34 !important;
+      --n-height: max(34px, 32Px) !important;
     }
 
     .n-space {

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

@@ -119,6 +119,7 @@ export default defineComponent({
             {forms.type === 'MUSIC' && props.type === 'shareResources' && (
               <CCascader
                 placeholder="全部教材"
+                showPath
                 v-model:value={musics.value}
                 options={tagList.value}
                 onUpdate:value={(value: any) => {

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

@@ -32,7 +32,7 @@
   }
 
   .searchBtn {
-    height: 34px;
+    height: max(34px, 32Px);
     border-radius: 8px;
     font-size: 15px;
     font-weight: 500;

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

@@ -111,6 +111,7 @@ export default defineComponent({
             {props.type !== 'myMusic' && (
               <CCascader
                 placeholder="全部版本"
+                showPath
                 v-model:value={musics.value}
                 options={tagList.value}
                 onUpdate:value={(value: any) => {