添加作业

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

@@ -33,6 +33,9 @@ export default defineComponent({
               'teacher-slideshow',
               val === 'train' ? false : true
             );
+            if (val !== 'train') {
+              state.editWorkShow = false;
+            }
           }}>
           <NTabPane name="courseware" tab="课件" displayDirective="show">
             <Courseware />

src/views/prepare-lessons/components/lesson-main/train-presets/index.tsx

@@ -1,6 +1,14 @@
 import { defineComponent, reactive } from 'vue';
 import styles from './index.module.less';
-import { NButton, NImage, NModal, NScrollbar, NSpace, NSpin } from 'naive-ui';
+import {
+  NButton,
+  NImage,
+  NInput,
+  NModal,
+  NScrollbar,
+  NSpace,
+  NSpin
+} from 'naive-ui';
 import add from '@/views/studentList/images/add.png';
 import WorkSection from '../../../model/work-section';
 import { eventGlobal } from '/src/utils';
@@ -10,6 +18,7 @@ export default defineComponent({
   emits: ['change'],
   setup(props, { emit }) {
     const forms = reactive({
+      editTitleVisiable: false,
       removeVisiable1: false
     });
     return () => (
@@ -20,6 +29,7 @@ export default defineComponent({
               type="primary"
               class={styles.addPreset}
               onClick={() => {
+                // 设置右侧栏状态
                 eventGlobal.emit('teacher-slideshow', true);
                 emit('change', { status: true });
               }}
@@ -46,8 +56,12 @@ export default defineComponent({
           {/* <NSpin></NSpin> */}
           <div class={[styles.list]}>
             <WorkSection
+              onEditTitle={() => {
+                forms.editTitleVisiable = true;
+              }}
               onEdit={() => {
-                //
+                // 设置右侧栏状态
+                eventGlobal.emit('teacher-slideshow', true);
                 emit('change', { status: true });
               }}
               onConfirm={() => {
@@ -85,6 +99,34 @@ export default defineComponent({
             </NSpace>
           </div>
         </NModal>
+
+        <NModal
+          v-model:show={forms.editTitleVisiable}
+          preset="card"
+          class={['modalTitle', styles.removeVisiable1]}
+          title={'作业重命名'}>
+          <div class={styles.studentRemove}>
+            <NInput placeholder="请输入作业名称" />
+
+            <NSpace class={styles.btnGroupModal} justify="center">
+              <NButton round onClick={() => (forms.editTitleVisiable = false)}>
+                取消
+              </NButton>
+              <NButton
+                round
+                type="primary"
+                onClick={() => {
+                  // forms.trainList.forEach((item: any) => {
+                  //   forms.removeIds.push(item.id);
+                  // });
+                  // forms.trainList = [];
+                  // forms.removeVisiable1 = false;
+                }}>
+                确定
+              </NButton>
+            </NSpace>
+          </div>
+        </NModal>
       </div>
     );
   }

src/views/prepare-lessons/index.module.less

@@ -3,7 +3,7 @@
   // padding: 32px;
   // padding-bottom: 32px;
   height: calc(100vh - 118px);
-
+  overflow: hidden;
 
   .directoryMain,
   .resourceMain {

src/views/prepare-lessons/model/select-music/index.module.less

@@ -1,11 +1,18 @@
 .selectMusic {
+  padding-bottom: 10px;
+  height: 85vh;
+
   :global {
     .n-tabs-tab-pad {
-      width: 24px !important;
+      width: 80px !important;
     }
 
     .n-tabs-nav {
-      padding: 12px 20px 24px;
+      padding: 0 20px 0;
+
+      .n-tabs-nav-scroll-wrapper {
+        padding: 20px 0 30px;
+      }
     }
 
     .n-tabs-tab {
@@ -52,127 +59,4 @@
 .listContainer {
   margin-bottom: 20px;
   max-height: 50vh;
-  min-height: 50vh;
-
-  .listSection {
-    min-height: 50vh;
-  }
-
-  .emptySection {
-    display: flex;
-    align-items: center;
-  }
-}
-
-.list {
-  margin-top: 10px;
-  padding: 0 40px 0;
-  margin-bottom: 12px;
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: flex-start;
-  gap: 22px;
-}
-
-.searchGroup {
-  position: relative;
-  padding: 0 40px;
-
-  :global {
-    .n-form-item .n-form-item-label {
-      font-size: 17px;
-      font-weight: 600;
-      color: #131415;
-      line-height: 24px;
-    }
-
-    .n-form-item {
-      .n-button {
-        --n-padding: 0 14px !important;
-        height: 32px;
-        font-size: 17px;
-        border-radius: 8px;
-        color: rgba(0, 0, 0, 0.6);
-      }
-
-      .n-button--primary-type {
-        color: #131415;
-      }
-    }
-
-    .n-form-item-feedback-wrapper {
-      min-height: 14px;
-    }
-  }
-}
-
-
-.inputSearch {
-  position: absolute;
-  top: 4px;
-  right: 40px;
-  width: 360px !important;
-  height: 42px !important;
-  font-size: 16px;
-
-  :global {
-    .n-input-wrapper {
-      padding-left: 12px;
-      padding-right: 4px;
-    }
-
-    .n-input__input-el {
-      height: 42px !important;
-    }
-  }
-
-  .searchBtn {
-    height: 34px;
-    border-radius: 8px;
-    font-size: 15px;
-    font-weight: 500;
-  }
-}
-
-.spaceSection {
-  width: 69%;
-  gap: 8px 12px !important;
-  padding-right: 35px;
-
-  &>div {
-    line-height: var(--n-blank-height);
-  }
-}
-
-.collapseWrap {
-  width: 98%;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-
-}
-
-.collaoseBtn {
-  width: 32px;
-  height: 32px;
-  cursor: pointer;
-}
-
-.collaoseBtn.isStart {
-  transform: rotate(-180deg);
-}
-
-.collapsSection {
-  padding-top: 3px;
-}
-
-.isHidden {
-  overflow: hidden;
-  transition: 1s all ease-in;
-}
-
-.hideButton {
-  visibility: hidden;
-  height: 0 !important;
-  line-height: 0 !important;
 }

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

@@ -1,165 +1,63 @@
-import { NScrollbar, NSpin, NTabPane, NTabs } from 'naive-ui';
-import { PropType, defineComponent, onMounted, reactive } from 'vue';
+import { NTabPane, NTabs } from 'naive-ui';
+import { defineComponent, onMounted, ref, toRefs } from 'vue';
 import styles from './index.module.less';
-import CardType from '@/components/card-type';
-import SearchGroup from './search-group';
-import TheEmpty from '/src/components/TheEmpty';
-import { useDebounceFn, useThrottleFn } from '@vueuse/core';
-import { usePrepareStore } from '/src/store/modules/prepareLessons';
-import { musicSheetPage } from '../../api';
-import CardPreview from '/src/components/card-preview';
+import SelectItem from './select-item';
+import { useResizeObserver } from '@vueuse/core';
 
 export default defineComponent({
   name: 'select-music',
   props: {
     type: {
       type: String,
+      default: 'myResources'
+    },
+    /** 从哪里使用 */
+    from: {
+      type: String,
       default: ''
     }
   },
-  emits: ['add'],
-  setup(props, { emit }) {
-    console.log(props.type);
-    const prepareStore = usePrepareStore();
-    const state = reactive({
-      loading: false,
-      finshed: false, // 是否加载完
-      pagination: {
-        page: 1,
-        rows: 20
-      },
-      searchGroup: {
-        name: '',
-        musicSheetCategoriesId: '',
-        status: 1,
-        versionFlag: false,
-        subjectId: null
-      },
-      tableList: [] as any,
-      show: false,
-      item: {} as any,
-      isShowAddDisabled: !prepareStore.getIsEditTrain
-    });
-    const getList = async () => {
-      try {
-        if (state.pagination.page === 1) {
-          state.loading = true;
-        }
-        const { data } = await musicSheetPage({
-          ...state.searchGroup,
-          ...state.pagination,
-          subjectId: prepareStore.getSubjectId
-        });
-        state.loading = false;
-        const tempRows = data.rows || [];
-        const temp: any = [];
-        tempRows.forEach((row: any) => {
-          temp.push({
-            id: row.id,
-            coverImg: row.musicSvg,
-            type: 'MUSIC',
-            title: row.musicSheetName,
-            isCollect: false,
-            isSelected: true,
-            content: row.id,
-            xmlFileUrl: row.xmlFileUrl
-          });
-        });
-        state.tableList.push(...temp);
-
-        state.finshed = data.pages <= data.current ? true : false;
-      } catch {
-        state.loading = false;
-      }
-    };
-
-    // const onSearch = async (item: any) => {
-    //   state.pagination.page = 1;
-    //   state.tableList = [];
-    //   state.searchGroup = Object.assign(state.searchGroup, item);
-    //   getList();
-    // };
-    const throttledFnSearch = useDebounceFn(item => {
-      state.pagination.page = 1;
-      state.tableList = [];
-      state.searchGroup = Object.assign(state.searchGroup, item);
-      getList();
-    }, 500);
-
-    const throttledFn = useThrottleFn(() => {
-      state.pagination.page = state.pagination.page + 1;
-      getList();
-    }, 500);
+  emits: ['select'],
+  setup(props) {
+    const { type } = toRefs(props);
+    const tabType = ref(type.value);
 
     onMounted(() => {
-      if (props.type === 'homework') {
-        state.isShowAddDisabled = false;
-      }
-      getList();
+      useResizeObserver(
+        document.querySelector(
+          '.select-resource .n-tabs-nav--top'
+        ) as HTMLElement,
+        (entries: any) => {
+          const entry = entries[0];
+          const { height } = entry.contentRect;
+          document.documentElement.style.setProperty(
+            '--modal-lesson-tab-height',
+            height + 'px'
+          );
+        }
+      );
     });
     return () => (
-      <div class={styles.selectMusic}>
+      <div class={[styles.selectMusic, 'select-resource']}>
         <NTabs
           animated
-          defaultValue="shareResources"
+          value={tabType.value}
           paneClass={styles.paneTitle}
           justifyContent="center"
-          paneWrapperClass={styles.paneWrapperContainer}>
-          <NTabPane name="shareResources" tab="选择曲目">
-            <SearchGroup onSearch={(item: any) => throttledFnSearch(item)} />
-            <NScrollbar
-              class={styles.listContainer}
-              onScroll={(e: any) => {
-                const clientHeight = e.target?.clientHeight;
-                const scrollTop = e.target?.scrollTop;
-                const scrollHeight = e.target?.scrollHeight;
-                // 是否到底，是否加载完
-                if (
-                  clientHeight + scrollTop + 20 >= scrollHeight &&
-                  !state.finshed &&
-                  !state.loading
-                ) {
-                  throttledFn();
-                }
-              }}>
-              <NSpin show={state.loading} size={'small'}>
-                <div
-                  class={[
-                    styles.listSection,
-                    !state.loading && state.tableList.length <= 0
-                      ? styles.emptySection
-                      : ''
-                  ]}>
-                  {state.tableList.length > 0 && (
-                    <div class={styles.list}>
-                      {state.tableList.map((item: any) => (
-                        <CardType
-                          isShowAdd
-                          isShowCollect={false}
-                          item={item}
-                          // isShowAddDisabled={state.isShowAddDisabled}
-                          onAdd={() => emit('add', item)}
-                          disabledMouseHover={false}
-                          onClick={() => {
-                            if (item.type === 'IMG') return;
-                            state.show = true;
-                            state.item = item;
-                          }}
-                        />
-                      ))}
-                    </div>
-                  )}
-                  {!state.loading && state.tableList.length <= 0 && (
-                    <TheEmpty />
-                  )}
-                </div>
-              </NSpin>
-            </NScrollbar>
+          paneWrapperClass={styles.paneWrapperContainer}
+          onUpdate:value={(val: string) => {
+            tabType.value = val;
+          }}>
+          <NTabPane name="myResources" tab={'我的曲目'}>
+            <SelectItem type="myResources" />
+          </NTabPane>
+          <NTabPane name="shareResources" tab={'共享曲目'}>
+            <SelectItem type="shareResources" />
+          </NTabPane>
+          <NTabPane name="myCollect" tab="收藏曲目">
+            <SelectItem type="myCollect" />
           </NTabPane>
         </NTabs>
-
-        {/* 弹窗查看 */}
-        <CardPreview v-model:show={state.show} item={state.item} />
       </div>
     );
   }

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

@@ -0,0 +1,178 @@
+.selectMusic {
+  // :global {
+  //   .n-tabs-tab-pad {
+  //     width: 24px !important;
+  //   }
+
+  //   .n-tabs-nav {
+  //     padding: 12px 20px 24px;
+  //   }
+
+  //   .n-tabs-tab {
+  //     color: #8B8D98;
+  //     font-size: max(22px, 14Px);
+  //     padding-top: 12px;
+  //     padding-bottom: 6px;
+  //     line-height: 22px;
+
+  //     &.n-tabs-tab--active {
+  //       font-weight: 600 !important;
+  //       color: #131415 !important;
+  //     }
+  //   }
+
+  //   .n-tabs-tab__label {
+  //     z-index: 10;
+  //   }
+
+  //   .n-tabs-bar {
+  //     height: 10px;
+  //     background: linear-gradient(90deg, #77BBFF 0%, rgba(163, 231, 255, 0.22) 100%);
+  //     z-index: 0;
+  //     bottom: 2px;
+  //   }
+
+  //   .n-tab-pane {
+  //     padding-top: 0 !important;
+  //   }
+  // }
+
+  .close {
+    padding: 0;
+
+    :global {
+      .n-icon {
+        font-size: var(--n-close-size);
+        color: var(--n-close-icon-color);
+      }
+    }
+  }
+}
+
+.listContainer {
+  margin-bottom: 20px;
+  // max-height: 50vh;
+  // min-height: 50vh;
+
+  // .listSection {
+  //   min-height: 50vh;
+  // }
+
+  .emptySection {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.list {
+  margin-top: 10px;
+  padding: 0 40px 0;
+  margin-bottom: 12px;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  gap: 22px;
+}
+
+.searchGroup {
+  position: relative;
+  padding: 0 40px;
+
+  :global {
+    .n-form-item .n-form-item-label {
+      font-size: 17px;
+      font-weight: 600;
+      color: #131415;
+      line-height: 24px;
+    }
+
+    .n-form-item {
+      .n-button {
+        --n-padding: 0 14px !important;
+        height: 32px;
+        font-size: 17px;
+        border-radius: 8px;
+        color: rgba(0, 0, 0, 0.6);
+      }
+
+      .n-button--primary-type {
+        color: #131415;
+      }
+    }
+
+    .n-form-item-feedback-wrapper {
+      min-height: 14px;
+    }
+  }
+}
+
+
+.inputSearch {
+  position: absolute;
+  top: 4px;
+  right: 40px;
+  width: 360px !important;
+  height: 42px !important;
+  font-size: 16px;
+
+  :global {
+    .n-input-wrapper {
+      padding-left: 12px;
+      padding-right: 4px;
+    }
+
+    .n-input__input-el {
+      height: 42px !important;
+    }
+  }
+
+  .searchBtn {
+    height: 34px;
+    border-radius: 8px;
+    font-size: 15px;
+    font-weight: 500;
+  }
+}
+
+.spaceSection {
+  width: 69%;
+  gap: 8px 12px !important;
+  padding-right: 35px;
+
+  &>div {
+    line-height: var(--n-blank-height);
+  }
+}
+
+.collapseWrap {
+  width: 98%;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+
+}
+
+.collaoseBtn {
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+}
+
+.collaoseBtn.isStart {
+  transform: rotate(-180deg);
+}
+
+.collapsSection {
+  padding-top: 3px;
+}
+
+.isHidden {
+  overflow: hidden;
+  transition: 1s all ease-in;
+}
+
+.hideButton {
+  visibility: hidden;
+  height: 0 !important;
+  line-height: 0 !important;
+}

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

@@ -0,0 +1,167 @@
+import { NScrollbar, NSpin, NTabPane, NTabs } from 'naive-ui';
+import { defineComponent, onMounted, reactive } from 'vue';
+import styles from './index.module.less';
+import CardType from '@/components/card-type';
+import SearchGroup from './search-group';
+import TheEmpty from '/src/components/TheEmpty';
+import { useDebounceFn, useThrottleFn, useResizeObserver } from '@vueuse/core';
+import { usePrepareStore } from '/src/store/modules/prepareLessons';
+import { musicSheetPage } from '../../../api';
+import CardPreview from '/src/components/card-preview';
+
+export default defineComponent({
+  name: 'select-music',
+  props: {
+    type: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['add'],
+  setup(props, { emit }) {
+    const prepareStore = usePrepareStore();
+    const state = reactive({
+      searchHeight: '0px',
+      loading: false,
+      finshed: false, // 是否加载完
+      pagination: {
+        page: 1,
+        rows: 20
+      },
+      searchGroup: {
+        name: '',
+        musicSheetCategoriesId: '',
+        status: 1,
+        versionFlag: false,
+        subjectId: null
+      },
+      tableList: [] as any,
+      show: false,
+      item: {} as any,
+      isShowAddDisabled: !prepareStore.getIsEditTrain
+    });
+    const className = 'musicSearchGroup' + +new Date();
+    const getList = async () => {
+      try {
+        if (state.pagination.page === 1) {
+          state.loading = true;
+        }
+        const { data } = await musicSheetPage({
+          ...state.searchGroup,
+          ...state.pagination,
+          subjectId: prepareStore.getSubjectId
+        });
+        state.loading = false;
+        const tempRows = data.rows || [];
+        const temp: any = [];
+        tempRows.forEach((row: any) => {
+          temp.push({
+            id: row.id,
+            coverImg: row.musicSvg,
+            type: 'MUSIC',
+            title: row.musicSheetName,
+            isCollect: false,
+            isSelected: true,
+            content: row.id,
+            xmlFileUrl: row.xmlFileUrl
+          });
+        });
+        state.tableList.push(...temp);
+
+        state.finshed = data.pages <= data.current ? true : false;
+      } catch {
+        state.loading = false;
+      }
+    };
+
+    const throttledFnSearch = useDebounceFn(item => {
+      state.pagination.page = 1;
+      state.tableList = [];
+      state.searchGroup = Object.assign(state.searchGroup, item);
+      getList();
+    }, 500);
+
+    const throttledFn = useThrottleFn(() => {
+      state.pagination.page = state.pagination.page + 1;
+      getList();
+    }, 500);
+
+    onMounted(() => {
+      useResizeObserver(
+        document.querySelector('.' + className) as HTMLElement,
+        (entries: any) => {
+          const entry = entries[0];
+          const { height } = entry.contentRect;
+          state.searchHeight = height + 'px';
+        }
+      );
+      if (props.type === 'homework') {
+        state.isShowAddDisabled = false;
+      }
+      getList();
+    });
+    return () => (
+      <div class={styles.selectMusic}>
+        <div class={className}>
+          <SearchGroup onSearch={(item: any) => throttledFnSearch(item)} />
+        </div>
+
+        <NScrollbar
+          class={styles.listContainer}
+          style={{
+            'max-height': `calc(85vh - var(--modal-lesson-tab-height) - ${state.searchHeight} - 12px) `
+          }}
+          onScroll={(e: any) => {
+            const clientHeight = e.target?.clientHeight;
+            const scrollTop = e.target?.scrollTop;
+            const scrollHeight = e.target?.scrollHeight;
+            // 是否到底，是否加载完
+            if (
+              clientHeight + scrollTop + 20 >= scrollHeight &&
+              !state.finshed &&
+              !state.loading
+            ) {
+              throttledFn();
+            }
+          }}>
+          <NSpin show={state.loading} size={'small'}>
+            <div
+              style={{
+                'min-height': `calc(85vh - var(--modal-lesson-tab-height) - ${state.searchHeight} - 12px)`
+              }}
+              class={[
+                styles.listSection,
+                !state.loading && state.tableList.length <= 0
+                  ? styles.emptySection
+                  : ''
+              ]}>
+              {state.tableList.length > 0 && (
+                <div class={styles.list}>
+                  {state.tableList.map((item: any) => (
+                    <CardType
+                      isShowAdd
+                      isShowCollect={false}
+                      item={item}
+                      // isShowAddDisabled={state.isShowAddDisabled}
+                      onAdd={() => emit('add', item)}
+                      disabledMouseHover={false}
+                      onClick={() => {
+                        if (item.type === 'IMG') return;
+                        state.show = true;
+                        state.item = item;
+                      }}
+                    />
+                  ))}
+                </div>
+              )}
+              {!state.loading && state.tableList.length <= 0 && <TheEmpty />}
+            </div>
+          </NSpin>
+        </NScrollbar>
+
+        {/* 弹窗查看 */}
+        <CardPreview v-model:show={state.show} item={state.item} />
+      </div>
+    );
+  }
+});

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

@@ -5,7 +5,7 @@ import SelectItem from './select-item';
 import { useResizeObserver } from '@vueuse/core';
 
 export default defineComponent({
-  name: 'select-music',
+  name: 'select-resources',
   props: {
     type: {
       type: String,

src/views/prepare-lessons/model/work-section/index.tsx

@@ -5,12 +5,16 @@ import teacherIcon from '@components/layout/images/teacherIcon.png';
 
 export default defineComponent({
   name: 'work-section',
-  emits: ['edit', 'delete', 'confirm'],
+  emits: ['edit', 'delete', 'confirm', 'editTitle'],
   setup(props, { emit }) {
     return () => (
       <div class={styles.workSection}>
         <div class={styles.header}>
-          <div class={styles.headerName}>
+          <div
+            class={styles.headerName}
+            onClick={() => {
+              emit('editTitle');
+            }}>
             <span>其多列-课后作业课后作业课后作业课后作业</span>
             <i class={styles.iconEdit}></i>
           </div>