修改样式

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

@@ -58,11 +58,13 @@
   align-items: center;
   justify-content: space-between;
   font-weight: 600;
-  font-size: max(17px, 13Px);
+  font-size: max(17px, 14Px);
   color: #000000;
   line-height: 23px;
+  height: 23px;
   text-align: left;
   padding-bottom: 20px;
+  box-sizing: content-box;
 
   .titleLeft {
     display: flex;
@@ -97,7 +99,7 @@
       cursor: pointer;
       padding-left: 10px;
       font-weight: 400;
-      font-size: max(13px, 11Px);
+      font-size: max(13px, 12Px);
       color: #999999;
 
       &:hover {
@@ -105,6 +107,15 @@
       }
     }
 
+    .iconP {
+      width: 8px;
+      height: 11px;
+      display: inline-block;
+      background: url('../../../images/icon-arrow-p.png') no-repeat center;
+      background-size: contain;
+      margin-left: 4px;
+    }
+
     .swipeControll {
       height: 25px;
 
@@ -133,13 +144,19 @@
   padding: 12px 0 12px;
   gap: 20px 0;
   margin: 10px -10px 0;
-  min-height: 300px;
+  // min-height: 300px;
+  height: 313px;
+
 
   &.listSame {
     margin-top: 0;
     padding-top: 0;
   }
 
+  .empty1 {
+    // padding: 10px 0;
+  }
+
   .itemWrap {
     width: calc(100% / 4);
     // padding-bottom: calc(100% / 3 * 0.73333);
@@ -162,7 +179,7 @@
 }
 
 .attendClassModal1 {
-  width: 1200px;
+  width: 1360px;
   border-radius: 16px;
   overflow: hidden;
 }

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

@@ -439,7 +439,7 @@ export default defineComponent({
               type="primary"
               onClick={() => {
                 eventGlobal.emit('teacher-slideshow', true);
-                emit('change', { status: true });
+                emit('change', { status: true, type: 'create' });
               }}>
               <NImage
                 class={styles.addBtnIcon}
@@ -469,6 +469,7 @@ export default defineComponent({
                           eventGlobal.emit('teacher-slideshow', true);
                           emit('change', {
                             status: true,
+                            type: 'update',
                             groupItem: { id: item.id }
                           });
                         }}
@@ -483,7 +484,9 @@ export default defineComponent({
                     </div>
                   </div>
                 ))}
-                {!forms.loading && forms.tableList.length <= 0 && <TheEmpty />}
+                {!forms.loading && forms.tableList.length <= 0 && (
+                  <TheEmpty class={styles.empty1} />
+                )}
               </div>
             </NSpin>
           </div>
@@ -499,7 +502,7 @@ export default defineComponent({
                       class={styles.more}
                       onClick={() => (forms.showRelatedClass = true)}>
                       查看更多
-                      <NIcon>
+                      {/* <NIcon size={15}>
                         <svg
                           xmlns="http://www.w3.org/2000/svg"
                           viewBox="0 0 24 24">
@@ -507,7 +510,8 @@ export default defineComponent({
                             d="M8.59 16.59L13.17 12L8.59 7.41L10 6l6 6l-6 6l-1.41-1.41z"
                             fill="currentColor"></path>
                         </svg>
-                      </NIcon>
+                      </NIcon> */}
+                      <i class={styles.iconP}></i>
                     </span>
                   )}
                 </div>
@@ -588,6 +592,10 @@ export default defineComponent({
             coursewareDetailKnowledgeId={prepareStore.getSelectKey}
             onClose={() => (forms.showRelatedClass = false)}
             onAdd={(item: any) => onAddCourseware(item)}
+            onClick={(item: any) => {
+              onPreviewAttend(item.id);
+              forms.showRelatedClass = false;
+            }}
           />
         </NModal>
 

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

@@ -450,6 +450,7 @@
   align-items: center;
   justify-content: center;
   flex-direction: column;
+  background-color: #fff;
 
   img {
     width: 30Px;

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

@@ -507,7 +507,7 @@ export default defineComponent({
               <NInput
                 placeholder="请输入课件标题"
                 v-model:value={forms.name}
-                maxlength={15}
+                maxlength={20}
                 clearable
               />
             </div>
@@ -669,7 +669,7 @@ export default defineComponent({
                         }}
                       </NTooltip>
                     )}
-                    {forms.coursewareList.length > 1 && (
+                    {index < forms.coursewareList.length - 1 && (
                       <NTooltip showArrow={false}>
                         {{
                           trigger: () => (

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

@@ -14,6 +14,7 @@ export default defineComponent({
     const prepareStore = usePrepareStore();
     const state = reactive({
       editCoursewareShow: false, // 是否编辑课件
+      coursewareType: 'create' as 'create' | 'edit',
       editCourseware: {} as any, //
       editWorkShow: false, // 是否编辑预设
       editWork: {} as any // 预设模板编号
@@ -52,13 +53,20 @@ export default defineComponent({
           {!state.editWorkShow && (
             <NTabPane
               name="courseware"
-              tab={state.editCoursewareShow ? '编辑课件' : '课件'}
+              tab={
+                state.editCoursewareShow
+                  ? state.coursewareType === 'create'
+                    ? '创建课件'
+                    : '编辑课件'
+                  : '课件'
+              }
               displayDirective="if">
               {state.editCoursewareShow ? (
                 <Courseware
                   groupItem={state.editCourseware}
                   onChange={(val: any) => {
                     state.editCoursewareShow = val.status;
+                    state.coursewareType = val.type;
                     prepareStore.setIsEditResource(val.status);
 
                     if (!val.status) {

src/views/prepare-lessons/model/add-item-model/index.tsx

@@ -23,7 +23,7 @@ export default defineComponent({
     return () => (
       <div class={styles.addCoursewareItem}>
         <NCheckboxGroup v-model:value={selects.value}>
-          <NGrid yGap={14} cols={2}>
+          <NGrid yGap={18} cols={2}>
             {props.coursewareList.map((courseware: any, index: number) => (
               <NGi>
                 <NCheckbox value={index}>{courseware.name}</NCheckbox>

src/views/prepare-lessons/model/add-other-source/index.module.less

@@ -13,18 +13,19 @@
       width: 127px;
       height: 127px;
       transition: all .2s ease;
-      border: 3px solid transparent;
+      border: 2px solid transparent;
       border-radius: 17px;
       box-sizing: content-box;
 
       &:hover {
-        border: 3px solid #198CFE;
+        border: 2px solid #198CFE;
         transform: scale(1.02);
         transition: all .2s ease;
       }
     }
 
     .name {
+      padding-top: 4px;
       text-align: center;
       font-size: max(15px, 12Px);
       color: #131415;
@@ -58,6 +59,6 @@
 }
 
 .theoryModal {
-  width: 1200px;
+  width: 1360px;
   position: relative;
 }

src/views/prepare-lessons/model/add-other-source/index.tsx

@@ -171,16 +171,21 @@ export default defineComponent({
             onClose={() => (state.theoryStatus = false)}
             onConfirm={(val: any) => {
               state.theoryStatus = false;
-              emit('comfirm', {
-                materialId: val.materialId,
-                coverImg: val.coverImg,
-                dataJson: null,
-                title: val.title,
-                isCollect: false,
-                isSelected: false,
-                content: val.content,
-                type: 'THEORY'
+              const value = val || [];
+              const temp: any[] = [];
+              value.forEach((item: any) => {
+                temp.push({
+                  materialId: item.materialId,
+                  coverImg: item.coverImg,
+                  dataJson: null,
+                  title: item.title,
+                  isCollect: false,
+                  isSelected: false,
+                  content: item.content,
+                  type: 'THEORY'
+                });
               });
+              emit('comfirm', temp);
               emit('close');
             }}
           />

src/views/prepare-lessons/model/courseware-type/index.module.less

@@ -53,20 +53,6 @@
     border-radius: 10px;
     overflow: hidden;
     background-color: #fff;
-    transition: all .2s ease;
-    transition: all 0.2s ease;
-
-    &:hover {
-      transform: scale(1.01);
-      transition: all 0.2s ease;
-
-      // &::after {
-      //   content: '';
-      //   position: absolute;
-      //   inset: 0;
-      //   background-color: rgba(0, 0, 0, 0.3);
-      // }
-    }
 
     .status {
       position: absolute;
@@ -85,6 +71,19 @@
       .n-image {
         width: 100%;
         height: 100%;
+        transition: all .2s ease;
+
+        &:hover {
+          transform: scale(1.05);
+          transition: all 0.2s ease;
+
+          // &::after {
+          //   content: '';
+          //   position: absolute;
+          //   inset: 0;
+          //   background-color: rgba(0, 0, 0, 0.3);
+          // }
+        }
       }
     }
 
@@ -177,7 +176,7 @@
 
       &:hover {
         span {
-          color: #1677FF;
+          // color: #1677FF;
         }
 
         .iconEditName {
@@ -190,7 +189,7 @@
     }
 
     .subjectName {
-      padding-top: 8px;
+      padding-top: 5px;
       font-size: 11Px;
       color: #777777;
       line-height: 16Px;

src/views/prepare-lessons/model/related-class/index.module.less

@@ -56,7 +56,7 @@
   padding: 0 0 12px;
   gap: 20px 0;
   margin: 0 -10px 0;
-  min-height: 300px;
+  min-height: 202px;
 
   &.listSame {
     margin-top: 0;

src/views/prepare-lessons/model/related-class/index.tsx

@@ -26,7 +26,7 @@ export default defineComponent({
       default: ''
     }
   },
-  emits: ['close', 'add'],
+  emits: ['close', 'add', 'click'],
   setup(props, { emit }) {
     const forms = reactive({
       loading: false,
@@ -55,9 +55,9 @@ export default defineComponent({
         const result = data.rows || [];
         const tempList: any = [];
         result.forEach((item: any) => {
-          const index = forms.tableList.findIndex(
-            (i: any) => i.fromChapterLessonCoursewareId === item.id
-          );
+          // const index = forms.tableList.findIndex(
+          //   (i: any) => i.fromChapterLessonCoursewareId === item.id
+          // );
           const firstItem: any =
             item.chapterKnowledgeList[0]?.chapterKnowledgeMaterialList[0];
           tempList.push({
@@ -69,7 +69,7 @@ export default defineComponent({
             name: item.name,
             coverImg: firstItem?.bizInfo.coverImg,
             type: firstItem?.bizInfo.type,
-            isAdd: index !== -1 ? true : false
+            isAdd: item.addFlag
           });
         });
 
@@ -182,6 +182,7 @@ export default defineComponent({
                           onAdd={() => {
                             emit('add', item);
                           }}
+                          onClick={() => emit('click', item)}
                         />
                       </div>
                     </div>

src/views/prepare-lessons/model/source-instrument/components/list/index.module.less

@@ -155,8 +155,8 @@
       transition: all .2s ease;
 
       .itemImgSection {
-        background: linear-gradient(360deg, #DBF1FF 0%, #E7F9FF 100%);
-        box-shadow: 2px 2 8px 0px rgba(0, 0, 0, 0.1);
+        // background: linear-gradient(360deg, #DBF1FF 0%, #E7F9FF 100%);
+        // box-shadow: 2px 2 8px 0px rgba(0, 0, 0, 0.1);
         border-radius: 13px;
         // border: 3px solid rgba(0, 122, 254, 1);
         box-sizing: border-box;
@@ -185,11 +185,12 @@
       position: relative;
       width: 148px;
       height: 148px;
-      background: linear-gradient(360deg, #DBF1FF 0%, #E7F9FF 100%);
-      box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.1);
+      // box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.1);
       border-radius: 13px;
       overflow: hidden;
       transform: all .2s ease;
+      background-color: transparent;
+      border: 2px solid transparent;
 
       .iconCheck {
         position: absolute;
@@ -204,6 +205,7 @@
       .img {
         width: 148px;
         height: 148px;
+        background: linear-gradient(360deg, #DBF1FF 0%, #E7F9FF 100%);
 
         display: flex;
 
@@ -215,8 +217,8 @@
     }
 
     .itemImgSectionSelected {
-      border: 3px solid #198CFE;
-      transform: all .2s ease;
+      border: 2px solid #198CFE;
+      // transition: all .2s ease;
 
       .iconCheck {
         background: url('../../../../images/icon-checked.png') no-repeat center;

src/views/prepare-lessons/model/source-knowledge/index.module.less

@@ -85,8 +85,8 @@
   }
 
   .scrollBar {
-    margin-top: 12px;
-    padding: 0 20px;
+    margin: 17px 0;
+    padding: 0 17px;
     // max-height: calc(100% - 64px - 52px - 36px);
 
     &.empty {
@@ -98,7 +98,7 @@
 
 
   .directoryList {
-    width: 300px;
+    width: 350px;
     background: #FFFFFF;
     border-radius: 17px;
     flex-shrink: 0;
@@ -121,31 +121,28 @@
   }
 
   .treeItem {
+    position: relative;
     display: flex;
     align-items: center;
     line-height: 54px;
     border-radius: 10px;
-    padding: 0 5px;
+    padding: 0 0 0 15px;
     cursor: pointer;
     border-radius: 10px;
-    font-size: max(17px, 13Px);
+    font-size: max(15px, 13Px);
 
-    &:hover {
-      background: #F5F6FA;
-    }
+    // &:hover {
+    //   background: #EAEDF2;
+    // }
 
     .title {
       padding-left: 8px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      max-width: 280px !important;
       color: rgba(0, 0, 0, .5);
       display: flex;
       align-items: center;
 
       .dir {
-        flex-shrink: 1;
+        flex-shrink: 0;
         display: inline-block;
         width: 16px;
         height: 18px;
@@ -154,6 +151,13 @@
         margin-right: 6px;
       }
 
+      p {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        max-width: 180px !important;
+      }
+
       &.titleSelect {
         color: var(--n-color);
         font-weight: bold;
@@ -184,15 +188,22 @@
 
     &.childItem {
       padding-left: 30px;
-      font-size: max(15px, 12Px);
+      font-size: max(13px, 12Px);
+
+      margin: 0 10px;
 
       .title {
         color: #131415;
+        max-width: 180px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: block;
       }
     }
 
     &.childSelect {
-      background: #F5F6FA;
+      background: #EAEDF2;
 
       .title {
         color: var(--n-color);
@@ -319,4 +330,39 @@
       min-width: 156px;
     }
   }
+}
+
+.treeParentSelected {
+  background-color: #F8F8F8;
+  border-radius: 8px;
+  padding-bottom: 10px;
+
+  .parentItem {
+    // border-bottom: 1px solid #E7E8E8;
+    position: relative;
+    margin-bottom: 10px;
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      display: block;
+      width: 100%;
+      height: 1px;
+      background-color: #E7E8E8;
+    }
+  }
+}
+
+
+.checkbox {
+  position: absolute;
+  right: 20px;
+}
+
+.childItem {
+  .checkbox {
+    right: 10px;
+  }
 }

src/views/prepare-lessons/model/source-knowledge/index.tsx

@@ -2,6 +2,8 @@ import { defineComponent, onMounted, reactive, ref } from 'vue';
 import styles from './index.module.less';
 import {
   NButton,
+  NCheckbox,
+  NCheckboxGroup,
   // NBreadcrumb,
   // NBreadcrumbItem,
   // NScrollbar,
@@ -30,7 +32,8 @@ export default defineComponent({
       fontSize: 18,
       tableList: [] as any,
       selectKey: null,
-      details: {} as any
+      details: {} as any,
+      selectCheckboxs: [] as any
     });
 
     const getDetails = async () => {
@@ -42,7 +45,7 @@ export default defineComponent({
         });
 
         state.tableList = data || [];
-        if (state.tableList.length) {
+        if (state.tableList.length > 0) {
           const item =
             state.tableList[0].lessonCoursewareDetailKnowledgeDetailList;
           state.tableList[0].selected = true;
@@ -51,6 +54,10 @@ export default defineComponent({
             state.selectKey = child.id;
             await getDetail();
           }
+          state.tableList.forEach((item: any) => {
+            item.checked = false;
+            item.indeterminate = false;
+          });
         }
       } catch {
         //
@@ -74,12 +81,26 @@ export default defineComponent({
     };
 
     const onSubmit = () => {
-      emit('confirm', {
-        coverImg: PageEnum.THEORY_DEFAULT_COVER,
-        title: state.details.name,
-        materialId: state.selectKey,
-        content: state.selectKey
+      const items: any[] = [];
+      for (const i in state.selectCheckboxs) {
+        const item = state.tableList[i];
+        if (Array.isArray(item.lessonCoursewareDetailKnowledgeDetailList)) {
+          items.push(...item.lessonCoursewareDetailKnowledgeDetailList);
+        }
+      }
+      console.log(items.length, 'items', items);
+
+      const result: any[] = [];
+      items.forEach(item => {
+        result.push({
+          coverImg: PageEnum.THEORY_DEFAULT_COVER,
+          title: item.name,
+          materialId: item.id,
+          content: item.id
+        });
       });
+
+      emit('confirm', result);
     };
 
     onMounted(() => {
@@ -98,11 +119,16 @@ export default defineComponent({
                       ? styles.empty
                       : ''
                   ]}
-                  style={{ minHeight: '100%' }}>
-                  <NSpin show={show.value}>
+                  style={{ height: '100%' }}>
+                  <NSpin show={show.value} style={{ height: '100%' }}>
                     <div class={[styles.listSection]}>
                       {state.tableList.map((item: any, index: number) => (
-                        <div class={styles.treeParent} key={'parent' + index}>
+                        <div
+                          class={[
+                            styles.treeParent,
+                            item.selected && styles.treeParentSelected
+                          ]}
+                          key={'parent' + index}>
                           <div
                             class={[styles.treeItem, styles.parentItem]}
                             onClick={() => {
@@ -132,35 +158,85 @@ export default defineComponent({
                                   styles.dir,
                                   item.selected ? styles.dirSelect : ''
                                 ]}></span>
-                              {item.name}
+                              <p>{item.name}</p>
                             </p>
+                            <div
+                              class={styles.checkbox}
+                              onClick={(e: any) => {
+                                e.stopPropagation();
+                              }}>
+                              <NCheckbox
+                                checked={item.checked}
+                                indeterminate={item.indeterminate}
+                                onUpdate:checked={(val: boolean) => {
+                                  item.checked = val;
+
+                                  const child =
+                                    item.lessonCoursewareDetailKnowledgeDetailList ||
+                                    [];
+                                  if (val) {
+                                    const ids: any = [];
+                                    child.forEach((c: any) => {
+                                      ids.push(c.id);
+                                    });
+                                    state.selectCheckboxs[index] = ids;
+                                  } else {
+                                    state.selectCheckboxs[index] = [];
+                                  }
+                                  item.indeterminate = false;
+                                }}></NCheckbox>
+                            </div>
                           </div>
+                          <NCheckboxGroup
+                            value={state.selectCheckboxs[index]}
+                            onUpdate:value={val => {
+                              state.selectCheckboxs[index] = val;
 
-                          {item.selected &&
-                            item.lessonCoursewareDetailKnowledgeDetailList &&
-                            item.lessonCoursewareDetailKnowledgeDetailList.map(
-                              (child: any, j: number) => (
-                                <div
-                                  key={'child' + j}
-                                  class={[
-                                    styles.treeItem,
-                                    styles.childItem,
-                                    styles.animation,
-                                    state.selectKey === child.id
-                                      ? styles.childSelect
-                                      : ''
-                                  ]}
-                                  onClick={() => {
-                                    if (state.selectKey === child.id) return;
-                                    state.selectKey = child.id;
-                                    getDetail();
-                                    musicContentRef.value.$el.scrollTo(0, 0);
-                                  }}>
-                                  <span class={styles.childArrow}></span>
-                                  <p class={styles.title}>{child.name}</p>
-                                </div>
-                              )
-                            )}
+                              const child =
+                                item.lessonCoursewareDetailKnowledgeDetailList ||
+                                [];
+                              if (val.length <= 0) {
+                                item.checked = false;
+                                item.indeterminate = false;
+                              } else if (val.length === child.length) {
+                                item.checked = true;
+                                item.indeterminate = false;
+                              } else {
+                                item.checked = false;
+                                item.indeterminate = true;
+                              }
+                            }}>
+                            {item.selected &&
+                              item.lessonCoursewareDetailKnowledgeDetailList &&
+                              item.lessonCoursewareDetailKnowledgeDetailList.map(
+                                (child: any, j: number) => (
+                                  <div
+                                    key={'child' + j}
+                                    class={[
+                                      styles.treeItem,
+                                      styles.childItem,
+                                      styles.animation,
+                                      state.selectKey === child.id
+                                        ? styles.childSelect
+                                        : ''
+                                    ]}
+                                    onClick={() => {
+                                      if (state.selectKey === child.id) return;
+                                      state.selectKey = child.id;
+                                      getDetail();
+                                      musicContentRef.value.$el.scrollTo(0, 0);
+                                    }}>
+                                    <span class={styles.childArrow}></span>
+                                    <p class={styles.title}>{child.name}</p>
+                                    <div
+                                      class={styles.checkbox}
+                                      onClick={(e: any) => e.stopPropagation()}>
+                                      <NCheckbox value={child.id}></NCheckbox>
+                                    </div>
+                                  </div>
+                                )
+                              )}
+                          </NCheckboxGroup>
                         </div>
                       ))}
                     </div>