修改问题

public/version.json

@@ -1 +1 @@
-{"version":1714303993145}
+{"version":1714377293595}

src/store/modules/catchData.ts

@@ -6,6 +6,7 @@ import {
   getCategories,
   api_musicalInstrumentList
 } from '@/api/user';
+import deepClone from '/src/helpers/deep-clone';
 
 export const useCatchStore = defineStore('catch-store', {
   state: () => ({
@@ -171,6 +172,41 @@ export const useCatchStore = defineStore('catch-store', {
       }
     },
     /**
+     * 获取所有启用的乐器并包含修改的声部
+     */
+    getEnableSingleAllSubjects(ids?: any) {
+      ids = ids || [];
+      const subjects: any = [];
+      this.getSubjectList.forEach((subject: any) => {
+        const temp = deepClone(subject);
+        if (Array.isArray(temp.instruments)) {
+          temp.instruments.forEach((item: any) => {
+            if (ids.includes(item.id)) {
+              item.enableFlag = true;
+              temp.enableFlag = true;
+            }
+          });
+        }
+        subjects.push(temp);
+      });
+      const temp: any[] = [];
+      subjects.forEach((subject: any) => {
+        if (subject.enableFlag) {
+          const { instruments, ...r } = subject;
+
+          const tempChild: any[] = [];
+          instruments?.forEach((instrument: any) => {
+            if (instrument.enableFlag) {
+              tempChild.push(instrument);
+            }
+          });
+
+          if (tempChild.length > 0) temp.push({ ...r, instruments: tempChild });
+        }
+      });
+      return temp;
+    },
+    /**
      * 判断是否有教材分类数据，如不存在则获取教材分类列表
      * @returns Promise
      */

src/views/classList/index.tsx

@@ -530,8 +530,8 @@ export default defineComponent({
                 ]}
                 childrenField="instruments"
                 checkStrategy="child"
-                expandTrigger="click"
-                showPath={false}
+                expandTrigger="hover"
+                showPath={true}
                 v-model:value={state.searchForm.instrumentId}
                 onUpdate:value={(val: any, option: any, pathValues: any) => {
                   console.log(val, option, pathValues);

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

@@ -71,6 +71,7 @@ const initState = () => ({
   instrumentIds: null as any,
   // bookType: null, // 上下册
   coverImg: '', // 封面
+  instruemntIds: [] as any,
   enableFlag: true, // 状态
   type: 'COURSEWARE', // 教材类型：COURSEWARE,THEORY,可用值:COURSEWARE,THEORY
   lessonList: [createLesson()] // 单元列表
@@ -89,7 +90,8 @@ export default defineComponent({
     const catchStore = useCatchStore();
     const message = useMessage();
     const data = reactive({
-      uploading: false
+      uploading: false,
+      subjectList: [] as any
     });
     const formRef = ref();
     const form = reactive(initState());
@@ -161,6 +163,10 @@ export default defineComponent({
 
         form.lessonList = tempLesson;
       }
+
+      data.subjectList = catchStore.getEnableSingleAllSubjects(
+        form.instrumentIds
+      );
     });
     return () => (
       <div class={styles.container}>
@@ -249,7 +255,7 @@ export default defineComponent({
                   }}>
                   <NCascader
                     placeholder="请选择乐器"
-                    options={catchStore.getEnableSubjects}
+                    options={data.subjectList}
                     v-model:value={form.instrumentIds}
                     checkStrategy="child"
                     showPath={false}

src/views/prepare-lessons/components/directory-main/select-lessonware/index.tsx

@@ -144,7 +144,7 @@ export default defineComponent({
               ] as any
             }
             checkStrategy="child"
-            showPath={false}
+            showPath
             childrenField="instruments"
             expandTrigger="hover"
             labelField="name"

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

@@ -1,209 +1,263 @@
-import { defineComponent, onMounted, reactive, ref } from 'vue';
-import styles from './index.module.less';
-import {
-  NButton,
-  NCascader,
-  NInput,
-  NSelect,
-  NSwitch,
-  NTooltip
-} from 'naive-ui';
-import { usePrepareStore } from '/src/store/modules/prepareLessons';
-import { eventGlobal } from '/src/utils';
-
-export default defineComponent({
-  name: 'courseware-head',
-  setup(props, { emit, expose }) {
-    const prepareStore = usePrepareStore();
-    // 第一个课件标题，第二个课件声部
-    const checkForms = ref<any[]>(['', '']);
-    const forms = reactive({
-      subjects: [] as any,
-      openFlagEnable: true, // 是否支持修改公开状态
-      autoPlay: true,
-      name: '',
-      openFlag: false
-    });
-
-    // 全选
-    const chioseAll = (list: any) => {
-      // 全选
-      const ids = [] as any;
-      list.map((item: any) => {
-        if (Array.isArray(item.instruments)) {
-          item.instruments.forEach((c: any) => {
-            ids.push(c.value);
-          });
-        }
-      }) as any;
-      // item.instrumentIds = ids;
-      forms.subjects = ids;
-    };
-
-    const getForms = () => {
-      return forms;
-    };
-
-    const updateDefaultInfo = (item: any) => {
-      forms.subjects = item.subjects;
-      forms.openFlagEnable = item.openFlagEnable;
-      forms.autoPlay = item.autoPlay;
-      forms.name = item.name;
-      forms.openFlag = item.openFlag;
-    };
-
-    const checkCoursewareForm = () => {
-      //
-      checkForms.value[0] = forms.name ? '' : 'error';
-      checkForms.value[1] = forms.subjects?.length > 0 ? '' : 'error';
-    };
-
-    onMounted(() => {
-      eventGlobal.on('updateCoursewareHeadInfo', updateDefaultInfo);
-
-      eventGlobal.on('checkCoursewareForm', checkCoursewareForm);
-    });
-
-    expose({
-      getForms
-    });
-
-    return () => (
-      <>
-        <div class={styles.headerTitle}>
-          <i class={styles.iconBook}></i>
-          <span>{prepareStore.getSelectName}</span>
-        </div>
-
-        <div class={styles.formContainer}>
-          <div class={[styles.btnItem, styles.block]}>
-            <span class={[styles.btnTitle]}>
-              <span>*</span>课件标题
-            </span>
-            <NInput
-              placeholder="请输入课件标题"
-              v-model:value={forms.name}
-              maxlength={20}
-              clearable
-              status={checkForms.value[0]}
-              onUpdate:value={() => {
-                checkForms.value[0] = forms.name ? '' : 'error';
-              }}
-            />
-          </div>
-          <div class={[styles.btnItem, styles.block]}>
-            <span class={[styles.btnTitle]}>
-              <span>*</span>课件乐器
-            </span>
-            {/* <NSelect
-              status={checkForms.value[1]}
-              placeholder="请选择声部（可多选）"
-              class={styles.btnSubjectList}
-              options={prepareStore.getSubjectList}
-              labelField="name"
-              valueField="id"
-              multiple
-              maxTagCount={2}
-              size="small"
-              v-model:value={forms.subjects}
-              clearable
-              v-slots={{
-                action: () => (
-                  <>
-                    <NButton
-                      text
-                      style=" --n-width: 100% "
-                      size="small"
-                      onClick={() => chioseAll(prepareStore.getSubjectList)}>
-                      全选
-                    </NButton>
-                  </>
-                )
-              }}
-              onUpdate:value={() => {
-                checkForms.value[1] = forms.subjects?.length > 0 ? '' : 'error';
-              }}
-            /> */}
-            <NCascader
-              status={checkForms.value[1]}
-              placeholder="请选择乐器（可多选）"
-              class={styles.btnSubjectList}
-              options={prepareStore.getInstrumentList}
-              checkStrategy="child"
-              showPath={false}
-              childrenField="instruments"
-              expandTrigger="hover"
-              labelField="name"
-              valueField="id"
-              clearable
-              filterable
-              multiple
-              maxTagCount={1}
-              v-model:value={forms.subjects}
-              onUpdate:value={() => {
-                checkForms.value[1] = forms.subjects?.length > 0 ? '' : 'error';
-              }}
-              v-slots={{
-                action: () => (
-                  <>
-                    <NButton
-                      text
-                      style=" --n-width: 100% "
-                      size="small"
-                      onClick={() => chioseAll(prepareStore.getInstrumentList)}>
-                      全选
-                    </NButton>
-                  </>
-                )
-              }}
-            />
-          </div>
-          <div class={styles.btnItem}>
-            <span class={styles.btnTitle}>
-              自动播放
-              <NTooltip style={{ maxWidth: '200px' }} showArrow={false}>
-                {{
-                  trigger: () => <i class={styles.iconQuestion}></i>,
-                  default: () =>
-                    '开启自动播放后，课件内视频、音频资源将自动播放'
-                }}
-              </NTooltip>
-            </span>
-
-            <NSwitch v-model:value={forms.autoPlay} />
-          </div>
-          <div class={styles.btnItem}>
-            <span class={styles.btnTitle}>
-              公开课件
-              <NTooltip style={{ maxWidth: '200px' }} showArrow={false}>
-                {{
-                  trigger: () => <i class={styles.iconQuestion}></i>,
-                  default: () => '公开课件后，其它老师可以使用该课件上课'
-                }}
-              </NTooltip>
-            </span>
-            {!forms.openFlagEnable ? (
-              <NTooltip style={{ maxWidth: '200px' }} showArrow={false}>
-                {{
-                  trigger: () => (
-                    <NSwitch
-                      v-model:value={forms.openFlag}
-                      disabled={!forms.openFlagEnable}
-                    />
-                  ),
-                  default: () =>
-                    '为尊重课件原作者，在“相关课件”中添加的课件不支持公开'
-                }}
-              </NTooltip>
-            ) : (
-              <NSwitch
-                v-model:value={forms.openFlag}
-                disabled={!forms.openFlagEnable}
-              />
-            )}
-          </div>
-        </div>
-      </>
-    );
-  }
-});
+import { defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from './index.module.less';
+import {
+  NButton,
+  NCascader,
+  NInput,
+  NSelect,
+  NSwitch,
+  NTooltip
+} from 'naive-ui';
+import { usePrepareStore } from '/src/store/modules/prepareLessons';
+import { eventGlobal } from '/src/utils';
+import { useCatchStore } from '/src/store/modules/catchData';
+
+export default defineComponent({
+  name: 'courseware-head',
+  setup(props, { emit, expose }) {
+    const prepareStore = usePrepareStore();
+    // 第一个课件标题，第二个课件声部
+    const checkForms = ref<any[]>(['', '']);
+    const subjectList = ref([] as any);
+    const forms = reactive({
+      subjects: [] as any,
+      openFlagEnable: true, // 是否支持修改公开状态
+      autoPlay: true,
+      name: '',
+      openFlag: false
+    });
+
+    // 全选
+    const chioseAll = (list: any) => {
+      // 全选
+      const ids = [] as any;
+      list.map((item: any) => {
+        if (Array.isArray(item.instruments)) {
+          item.instruments.forEach((c: any) => {
+            ids.push(c.value);
+          });
+        }
+      }) as any;
+      // item.instrumentIds = ids;
+      forms.subjects = ids;
+    };
+
+    const getForms = () => {
+      return forms;
+    };
+
+    const updateDefaultInfo = (item: any) => {
+      forms.subjects = item.subjects;
+      forms.openFlagEnable = item.openFlagEnable;
+      forms.autoPlay = item.autoPlay;
+      forms.name = item.name;
+      forms.openFlag = item.openFlag;
+      updateSubjectList(item.subjects || []);
+    };
+
+    const checkCoursewareForm = () => {
+      //
+      checkForms.value[0] = forms.name ? '' : 'error';
+      checkForms.value[1] = forms.subjects?.length > 0 ? '' : 'error';
+    };
+
+    const updateSubjectList = (ids?: any[]) => {
+      // 获取课件乐器编号 ，修改的乐器编号，集合
+      ids = ids || [];
+      const courseIds: any = [];
+      prepareStore.getInstrumentList.forEach((item: any) => {
+        if (Array.isArray(item.instruments)) {
+          item.instruments.forEach((child: any) => {
+            courseIds.push(child.id);
+          });
+        }
+      });
+      const allIds = [...new Set([...courseIds, ...ids])];
+
+      const tempList: any = [];
+      useCatchStore().getSubjectList.forEach((item: any) => {
+        const temp = { ...item };
+        temp.enableFlag = false;
+        if (Array.isArray(temp.instruments)) {
+          temp.instruments.forEach((child: any) => {
+            child.enableFlag = false;
+            if (allIds.includes(child.id)) {
+              child.enableFlag = true;
+              temp.enableFlag = true;
+            }
+          });
+        }
+        tempList.push(temp);
+      });
+      const tempSubjects: any[] = [];
+      tempList.forEach((subject: any) => {
+        if (subject.enableFlag) {
+          const { instruments, ...r } = subject;
+
+          if (instruments && instruments.length > 0) {
+            const tempChild: any[] = [];
+            instruments?.forEach((instrument: any) => {
+              if (instrument.enableFlag) {
+                tempChild.push(instrument);
+              }
+            });
+
+            if (tempChild.length > 0)
+              tempSubjects.push({ ...r, instruments: tempChild });
+          }
+        }
+      });
+      subjectList.value = tempSubjects;
+    };
+
+    onMounted(async () => {
+      await useCatchStore().getSubjects();
+      updateSubjectList();
+      eventGlobal.on('updateCoursewareHeadInfo', updateDefaultInfo);
+
+      eventGlobal.on('checkCoursewareForm', checkCoursewareForm);
+    });
+
+    expose({
+      getForms
+    });
+
+    return () => (
+      <>
+        <div class={styles.headerTitle}>
+          <i class={styles.iconBook}></i>
+          <span>{prepareStore.getSelectName}</span>
+        </div>
+
+        <div class={styles.formContainer}>
+          <div class={[styles.btnItem, styles.block]}>
+            <span class={[styles.btnTitle]}>
+              <span>*</span>课件标题
+            </span>
+            <NInput
+              placeholder="请输入课件标题"
+              v-model:value={forms.name}
+              maxlength={20}
+              clearable
+              status={checkForms.value[0]}
+              onUpdate:value={() => {
+                checkForms.value[0] = forms.name ? '' : 'error';
+              }}
+            />
+          </div>
+          <div class={[styles.btnItem, styles.block]}>
+            <span class={[styles.btnTitle]}>
+              <span>*</span>课件乐器
+            </span>
+            {/* <NSelect
+              status={checkForms.value[1]}
+              placeholder="请选择声部（可多选）"
+              class={styles.btnSubjectList}
+              options={prepareStore.getSubjectList}
+              labelField="name"
+              valueField="id"
+              multiple
+              maxTagCount={2}
+              size="small"
+              v-model:value={forms.subjects}
+              clearable
+              v-slots={{
+                action: () => (
+                  <>
+                    <NButton
+                      text
+                      style=" --n-width: 100% "
+                      size="small"
+                      onClick={() => chioseAll(prepareStore.getSubjectList)}>
+                      全选
+                    </NButton>
+                  </>
+                )
+              }}
+              onUpdate:value={() => {
+                checkForms.value[1] = forms.subjects?.length > 0 ? '' : 'error';
+              }}
+            /> */}
+            <NCascader
+              status={checkForms.value[1]}
+              placeholder="请选择乐器（可多选）"
+              class={styles.btnSubjectList}
+              options={subjectList.value}
+              checkStrategy="child"
+              showPath={false}
+              childrenField="instruments"
+              expandTrigger="hover"
+              labelField="name"
+              valueField="id"
+              clearable
+              filterable
+              multiple
+              maxTagCount={1}
+              v-model:value={forms.subjects}
+              onUpdate:value={() => {
+                checkForms.value[1] = forms.subjects?.length > 0 ? '' : 'error';
+              }}
+              v-slots={{
+                action: () => (
+                  <>
+                    <NButton
+                      text
+                      style=" --n-width: 100% "
+                      size="small"
+                      onClick={() => chioseAll(subjectList.value)}>
+                      全选
+                    </NButton>
+                  </>
+                )
+              }}
+            />
+          </div>
+          <div class={styles.btnItem}>
+            <span class={styles.btnTitle}>
+              自动播放
+              <NTooltip style={{ maxWidth: '200px' }} showArrow={false}>
+                {{
+                  trigger: () => <i class={styles.iconQuestion}></i>,
+                  default: () =>
+                    '开启自动播放后，课件内视频、音频资源将自动播放'
+                }}
+              </NTooltip>
+            </span>
+
+            <NSwitch v-model:value={forms.autoPlay} />
+          </div>
+          <div class={styles.btnItem}>
+            <span class={styles.btnTitle}>
+              公开课件
+              <NTooltip style={{ maxWidth: '200px' }} showArrow={false}>
+                {{
+                  trigger: () => <i class={styles.iconQuestion}></i>,
+                  default: () => '公开课件后，其它老师可以使用该课件上课'
+                }}
+              </NTooltip>
+            </span>
+            {!forms.openFlagEnable ? (
+              <NTooltip style={{ maxWidth: '200px' }} showArrow={false}>
+                {{
+                  trigger: () => (
+                    <NSwitch
+                      v-model:value={forms.openFlag}
+                      disabled={!forms.openFlagEnable}
+                    />
+                  ),
+                  default: () =>
+                    '为尊重课件原作者，在“相关课件”中添加的课件不支持公开'
+                }}
+              </NTooltip>
+            ) : (
+              <NSwitch
+                v-model:value={forms.openFlag}
+                disabled={!forms.openFlagEnable}
+              />
+            )}
+          </div>
+        </div>
+      </>
+    );
+  }
+});

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

@@ -1,140 +1,140 @@
-import { PropType, defineComponent, onMounted, reactive, ref } from 'vue';
-import styles from './index.module.less';
-import { NButton, NCascader, NInput, NSelect, NSpace } from 'naive-ui';
-import { resourceTypeArray } from '/src/utils/searchArray';
-import { useCatchStore } from '/src/store/modules/catchData';
-import { useThrottleFn } from '@vueuse/core';
-
-export default defineComponent({
-  name: 'resource-search-group',
-  emits: ['search'],
-  props: {
-    type: {
-      type: String as PropType<
-        'shareResources' | 'myResources' | 'myCollect' | 'relateResources'
-      >,
-      default: 'relateResources'
-    }
-  },
-  setup(props, { emit }) {
-    const catchStore = useCatchStore();
-    const forms = reactive({
-      type: 'MUSIC', //
-      name: '',
-      bookVersionId: null,
-      musicalInstrumentId: ''
-    });
-    const resourceType = ref([] as any);
-
-    const onSearch = () => {
-      emit('search', forms);
-    };
-
-    const debouncedRequest = useThrottleFn(() => onSearch(), 500);
-
-    onMounted(async () => {
-      // 获取教材分类列表
-      await catchStore.getSubjects();
-      // 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);
-        // }
-      });
-    });
-    return () => (
-      <>
-        <div class={styles.searchGroup}>
-          <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;
-                  debouncedRequest();
-                }}>
-                {item.label}
-              </NButton>
-            ))}
-          </NSpace>
-
-          <div class={styles.searchSelect}>
-            <NCascader
-              placeholder="全部乐器"
-              options={[
-                { name: '全部乐器', id: '' },
-                ...catchStore.getSubjectList
-              ]}
-              clearable
-              labelField="name"
-              valueField="id"
-              v-model:value={forms.musicalInstrumentId}
-              onUpdate:value={() => {
-                onSearch();
-              }}
-              checkStrategy="child"
-              showPath={false}
-              childrenField="instruments"
-              expandTrigger="hover"
-              filterable
-            />
-          </div>
-          {forms.type === 'MUSIC' && props.type === 'shareResources' && (
-            <div class={styles.searchSelect}>
-              <NSelect
-                placeholder="全部教材"
-                options={[
-                  { name: '全部教材', id: null },
-                  ...catchStore.getMusicCategories
-                ]}
-                clearable
-                labelField="name"
-                valueField="id"
-                v-model:value={forms.bookVersionId}
-                onUpdate:value={() => {
-                  onSearch();
-                }}
-              />
-            </div>
-          )}
-
-          <NInput
-            type="text"
-            placeholder="请输入搜索关键词"
-            clearable
-            v-model:value={forms.name}
-            class={styles.inputSearch}
-            onKeyup={(e: KeyboardEvent) => {
-              if (e.code === 'Enter') {
-                debouncedRequest();
-              }
-            }}
-            onClear={() => {
-              forms.name = '';
-              debouncedRequest();
-            }}>
-            {{
-              prefix: () => (
-                <span
-                  class={'icon-search-input'}
-                  onClick={() => debouncedRequest()}></span>
-              )
-            }}
-          </NInput>
-        </div>
-      </>
-    );
-  }
-});
+import { PropType, defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from './index.module.less';
+import { NButton, NCascader, NInput, NSelect, NSpace } from 'naive-ui';
+import { resourceTypeArray } from '/src/utils/searchArray';
+import { useCatchStore } from '/src/store/modules/catchData';
+import { useThrottleFn } from '@vueuse/core';
+
+export default defineComponent({
+  name: 'resource-search-group',
+  emits: ['search'],
+  props: {
+    type: {
+      type: String as PropType<
+        'shareResources' | 'myResources' | 'myCollect' | 'relateResources'
+      >,
+      default: 'relateResources'
+    }
+  },
+  setup(props, { emit }) {
+    const catchStore = useCatchStore();
+    const forms = reactive({
+      type: 'MUSIC', //
+      name: '',
+      bookVersionId: null,
+      musicalInstrumentId: ''
+    });
+    const resourceType = ref([] as any);
+
+    const onSearch = () => {
+      emit('search', forms);
+    };
+
+    const debouncedRequest = useThrottleFn(() => onSearch(), 500);
+
+    onMounted(async () => {
+      // 获取教材分类列表
+      await catchStore.getSubjects();
+      // 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);
+        // }
+      });
+    });
+    return () => (
+      <>
+        <div class={styles.searchGroup}>
+          <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;
+                  debouncedRequest();
+                }}>
+                {item.label}
+              </NButton>
+            ))}
+          </NSpace>
+
+          <div class={styles.searchSelect}>
+            <NCascader
+              placeholder="全部乐器"
+              options={[
+                { name: '全部乐器', id: '' },
+                ...catchStore.getSubjectList
+              ]}
+              clearable
+              labelField="name"
+              valueField="id"
+              v-model:value={forms.musicalInstrumentId}
+              onUpdate:value={() => {
+                onSearch();
+              }}
+              checkStrategy="child"
+              showPath
+              childrenField="instruments"
+              expandTrigger="hover"
+              filterable
+            />
+          </div>
+          {forms.type === 'MUSIC' && props.type === 'shareResources' && (
+            <div class={styles.searchSelect}>
+              <NSelect
+                placeholder="全部教材"
+                options={[
+                  { name: '全部教材', id: null },
+                  ...catchStore.getMusicCategories
+                ]}
+                clearable
+                labelField="name"
+                valueField="id"
+                v-model:value={forms.bookVersionId}
+                onUpdate:value={() => {
+                  onSearch();
+                }}
+              />
+            </div>
+          )}
+
+          <NInput
+            type="text"
+            placeholder="请输入搜索关键词"
+            clearable
+            v-model:value={forms.name}
+            class={styles.inputSearch}
+            onKeyup={(e: KeyboardEvent) => {
+              if (e.code === 'Enter') {
+                debouncedRequest();
+              }
+            }}
+            onClear={() => {
+              forms.name = '';
+              debouncedRequest();
+            }}>
+            {{
+              prefix: () => (
+                <span
+                  class={'icon-search-input'}
+                  onClick={() => debouncedRequest()}></span>
+              )
+            }}
+          </NInput>
+        </div>
+      </>
+    );
+  }
+});