更新

src/views/classList/index.tsx

@@ -277,7 +277,9 @@ export default defineComponent({
             query: {
               lastUseCoursewareId: row.lessonCoursewareId,
               unit: row.lessonCoursewareKnowledgeDetailId,
-              subjectId: row.subjectId
+              subjectId: row.subjectId,
+              name: row.name, // 班级名称
+              classGroupId: row.id // 班级编号
             }
           });
         } else {

src/views/classList/modals/updateSubject.tsx

@@ -57,7 +57,9 @@ export default defineComponent({
           emit('confirm', {
             lastUseCoursewareId: props.activeRow.lessonCoursewareId,
             unit: props.activeRow.lessonCoursewareKnowledgeDetailId,
-            subjectId: createClassForm.subjectId
+            subjectId: createClassForm.subjectId,
+            name: props.activeRow.name, // 班级名称
+            classGroupId: props.activeRow.id // 班级编号
           });
           emit('getList');
           data.uploading = false;

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

@@ -16,6 +16,63 @@
       .n-base-selection {
         width: 200px;
       }
+
+      .n-base-selection-label {
+        &::before {
+          margin-left: 12px;
+          content: ' ';
+          width: 24px;
+          height: 24px;
+          background: url('../../../images/icon-class-name.png') no-repeat center;
+          background-size: contain;
+        }
+      }
+
+      .n-base-selection-input {
+        padding-left: 8px;
+      }
+
+      .n-base-selection.n-base-selection--disabled {
+        cursor: pointer;
+      }
+
+      .n-base-selection.n-base-selection--disabled .n-base-selection-label {
+        background-color: #fff;
+        cursor: pointer;
+      }
+
+      .n-base-selection.n-base-selection--disabled .n-base-selection-label .n-base-selection-input {
+        color: var(--n-text-color);
+        cursor: pointer;
+      }
+
+      .n-base-selection .n-base-selection-overlay {
+        left: 24px;
+      }
+    }
+  }
+
+  .btnSubjectList {
+    :global {
+
+      .n-base-selection-label {
+        &::before {
+          margin-left: 12px;
+          content: ' ';
+          width: 24px;
+          height: 24px;
+          background: url('../../../images/icon-subject-name.png') no-repeat center;
+          background-size: contain;
+        }
+      }
+
+      .n-base-selection-input {
+        padding-left: 8px;
+      }
+
+      .n-base-selection .n-base-selection-overlay {
+        left: 24px;
+      }
     }
   }
 
@@ -93,11 +150,11 @@
 
 .listContainer {
   margin-top: 12px;
-  // // 52 + 28 + 38 + 38
-  max-height: calc(var(--window-page-lesson-height) - 186px);
+  // // 52 + 28 + 38 + 38 多余10像素空间
+  max-height: calc(var(--window-page-lesson-height) - 196px);
 
   .listSection {
-    min-height: calc(var(--window-page-lesson-height) - 186px);
+    min-height: calc(var(--window-page-lesson-height) - 196px);
   }
 
   .emptySection {
@@ -214,3 +271,8 @@
     }
   }
 }
+
+
+.subjectSyncModal {
+  width: 920px;
+}

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

@@ -27,6 +27,8 @@ import deepClone from '/src/helpers/deep-clone';
 import CardPreview from '/src/components/card-preview';
 import PreviewWindow from '/src/views/preview-window';
 import { state } from '/src/state';
+import SubjectSync from '../../../model/subject-sync';
+import { eventGlobal } from '/src/utils';
 
 export default defineComponent({
   name: 'courseware-modal',
@@ -38,14 +40,20 @@ export default defineComponent({
     const dialog = useDialog();
     const message = useMessage();
     const forms = reactive({
+      className: route.query.name as any,
+      classGroupId: route.query.classGroupId,
       subjectId: route.query.subjectId ? Number(route.query.subjectId) : null,
       coursewareList: [] as any,
       loadingStatus: false,
       showAttendClass: false,
+      attendClassType: 'select', //
       removeIds: [] as any, // 临时删除的编号
       drag: false,
+      isEdit: false, // 是否更新数据
+      editSubjectIds: '', // 声部编号
       removeVisiable: false,
       removeVisiable1: false,
+      subjectSyncVisiable: false, // 同步声部
       show: false,
       item: {} as any,
       previewModal: false,
@@ -133,18 +141,13 @@ export default defineComponent({
         (c: any) => c.id === item.id
       );
       forms.coursewareList.splice(index, 1);
+      forms.isEdit = true;
       // prepareStore.setCoursewareList(forms.coursewareList);
       // console.log(prepareStore.getCoursewareList, 'getCourseware');
     };
 
     // 完成编辑
     const onOverEdit = async () => {
-      // dialog.warning({
-      //   title: '提示',
-      //   content: `是否完成编辑？`,
-      //   positiveText: '确定',
-      //   negativeText: '取消',
-      //   onPositiveClick: async () => {
       try {
         const temp: any = [];
         forms.coursewareList.forEach((item: any) => {
@@ -156,11 +159,14 @@ export default defineComponent({
           });
         });
         // 保存课件
+        // 判断是否编辑，如果编辑则取选择的声部
         await saveCourseware({
           coursewareDetailKnowledgeId: prepareStore.getSelectKey,
           lessonCoursewareId: prepareStore.getLessonCoursewareId,
           lessonCoursewareDetailId: prepareStore.getLessonCoursewareDetailId,
-          subjectId: prepareStore.getSubjectId,
+          subjectId: forms.isEdit
+            ? forms.editSubjectIds
+            : prepareStore.getSubjectId,
           materialList: [...temp]
         });
 
@@ -174,8 +180,6 @@ export default defineComponent({
       } catch {
         //
       }
-      //   }
-      // });
     };
 
     // 预览上课
@@ -266,6 +270,14 @@ export default defineComponent({
       }
 
       await getList();
+
+      // 动态添加数据
+      eventGlobal.on('onPrepareAddItem', (item: any) => {
+        forms.coursewareList.push(item);
+        prepareStore.setCoursewareList(forms.coursewareList);
+
+        forms.isEdit = true;
+      });
     });
 
     return () => (
@@ -276,7 +288,11 @@ export default defineComponent({
               <NButton
                 type="default"
                 onClick={() => {
-                  forms.removeVisiable = true;
+                  if (forms.isEdit) {
+                    forms.subjectSyncVisiable = true;
+                  } else {
+                    forms.removeVisiable = true;
+                  }
                 }}>
                 完成编辑
               </NButton>
@@ -301,25 +317,31 @@ export default defineComponent({
             </NSpace>
           ) : (
             <NSpace>
-              <div class={styles.btnItem}>
-                <span class={styles.btnTitle}>上课班级：</span>
-                <NSelect
-                  placeholder="选择声部"
-                  options={catchStore.getSubjectList}
-                  labelField="name"
-                  valueField="id"
-                  class={styles.btnClassList}
-                  value={prepareStore.getSubjectId}
-                  onUpdate:value={(val: any) => {
-                    prepareStore.setSubjectId(val);
-                    getList();
-                  }}
-                />
-              </div>
+              {forms.classGroupId && (
+                <div class={styles.btnItem}>
+                  <span class={styles.btnTitle}>上课班级：</span>
+                  <div
+                    onClick={() => {
+                      forms.showAttendClass = true;
+                      forms.attendClassType = 'change';
+                    }}>
+                    <NSelect
+                      placeholder="选择声部"
+                      labelField="name"
+                      valueField="id"
+                      class={styles.btnClassList}
+                      value={forms.className}
+                      disabled
+                    />
+                  </div>
+                </div>
+              )}
+
               <div class={styles.btnItem}>
                 <span class={styles.btnTitle}>声部：</span>
                 <NSelect
                   placeholder="选择声部"
+                  class={styles.btnSubjectList}
                   options={catchStore.getSubjectList}
                   labelField="name"
                   valueField="id"
@@ -341,6 +363,8 @@ export default defineComponent({
                 onClick={() => {
                   forms.drag = true;
                   prepareStore.setIsEditResource(true);
+
+                  // forms.subjectSyncVisiable = true;
                 }}>
                 编辑
               </NButton>
@@ -450,6 +474,7 @@ export default defineComponent({
                   return;
                 }
                 forms.showAttendClass = true;
+                forms.attendClassType = 'select';
               }}>
               开始上课
             </NButton>
@@ -465,6 +490,7 @@ export default defineComponent({
           blockScroll={false}>
           <AttendClass
             onClose={() => (forms.showAttendClass = false)}
+            type={forms.attendClassType}
             onPreview={(item: any) => {
               if (window.matchMedia('(display-mode: standalone)').matches) {
                 state.application = window.matchMedia(
@@ -484,6 +510,12 @@ export default defineComponent({
                 window.open(href, +new Date() + '');
               }
             }}
+            onConfirm={(item: any) => {
+              console.log(item, 'confirm');
+              forms.className = item.name;
+              forms.classGroupId = item.classGroupId;
+              forms.showAttendClass = false;
+            }}
           />
         </NModal>
 
@@ -548,6 +580,24 @@ export default defineComponent({
           type="attend"
           params={forms.previewParams}
         />
+
+        {/* 完成编辑时，选择声部 */}
+        <NModal
+          v-model:show={forms.subjectSyncVisiable}
+          preset="card"
+          class={['modalTitle background', styles.subjectSyncModal]}
+          title={'同步声部'}>
+          <SubjectSync
+            subjectId={prepareStore.getSubjectId as any}
+            onClose={() => (forms.subjectSyncVisiable = false)}
+            onConfirm={(subjectIds: any) => {
+              //
+              console.log(subjectIds, 'subjectIds');
+              forms.editSubjectIds = subjectIds.join(',');
+              onOverEdit();
+            }}
+          />
+        </NModal>
       </div>
     );
   }

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

@@ -9,6 +9,7 @@ import { usePrepareStore } from '/src/store/modules/prepareLessons';
 import { useDebounceFn, useThrottleFn } from '@vueuse/core';
 import { saveCourseware } from '/src/views/prepare-lessons/api';
 import CardPreview from '/src/components/card-preview';
+import { eventGlobal } from '/src/utils';
 
 const formatType = (type: string) => {
   if (type === 'shareResources') {
@@ -140,33 +141,44 @@ export default defineComponent({
       try {
         console.log(item, 'any');
         const temp: any = [];
-        prepareStore.getCoursewareList.forEach((item: any) => {
-          temp.push({
-            materialName: item.title,
-            materialType: item.type,
-            materialId: item.materialId,
-            id: item.id
-          });
+        // prepareStore.getCoursewareList.forEach((item: any) => {
+        //   temp.push({
+        //     materialName: item.title,
+        //     materialType: item.type,
+        //     materialId: item.materialId,
+        //     id: item.id
+        //   });
+        // });
+        eventGlobal.emit('onPrepareAddItem', {
+          materialId: item.materialId,
+          coverImg: item.coverImg,
+          type: item.type,
+          title: item.title,
+          isCollect: item.isCollect,
+          isSelected: item.isSelected,
+          content: item.content,
+          removeFlag: false
         });
 
         // 保存课件
-        await saveCourseware({
-          coursewareDetailKnowledgeId: prepareStore.getSelectKey,
-          lessonCoursewareId: prepareStore.getLessonCoursewareId,
-          lessonCoursewareDetailId: prepareStore.getLessonCoursewareDetailId,
-          materialList: [
-            ...temp,
-            {
-              materialName: item.title,
-              materialType: item.type,
-              materialId: item.id
-            }
-          ],
-          subjectId: prepareStore.getSubjectId
-        });
+        // await saveCourseware({
+        //   coursewareDetailKnowledgeId: prepareStore.getSelectKey,
+        //   lessonCoursewareId: prepareStore.getLessonCoursewareId,
+        //   lessonCoursewareDetailId: prepareStore.getLessonCoursewareDetailId,
+        //   materialList: [
+        //     ...temp,
+        //     {
+        //       materialName: item.title,
+        //       materialType: item.type,
+        //       materialId: item.id
+        //     }
+        //   ],
+        //   subjectId: prepareStore.getSubjectId
+        // });
+
+        // message.success('添加成功');
 
-        message.success('添加成功');
-        prepareStore.setIsAddResource(true);
+        // prepareStore.setIsAddResource(true);
       } catch {
         //
       }

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

@@ -60,8 +60,17 @@
     .n-thing-header {
       margin-bottom: 0 !important;
     }
+
+    .n-thing-header__title {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
   }
 
+
+
   .title {
     display: flex;
     align-items: center;
@@ -81,9 +90,20 @@
     }
   }
 
+  .subjects {
+    font-size: 20px !important;
+    font-weight: 600 !important;
+    color: #131415 !important;
+    line-height: 28px;
+
+    &.noSubjects {
+      color: #F44541 !important;
+    }
+  }
+
   .content {
     margin-top: 12px !important;
     font-size: 16px;
     color: #777777;
   }
-}
+}

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

@@ -18,7 +18,7 @@ for (let i = 1; i <= 40; i++) {
 export default defineComponent({
   name: 'attend-class',
   props: {
-    // change select
+    // change 切换班级 select 直接进入上课
     type: {
       type: String,
       default: 'change'
@@ -48,7 +48,9 @@ export default defineComponent({
             emit('confirm', {
               lastUseCoursewareId: item.lessonCoursewareId,
               unit: item.lessonCoursewareKnowledgeDetailId,
-              subjectId: item.subjectId
+              subjectId: item.subjectId,
+              name: item.name, // 班级名称
+              classGroupId: item.id // 班级编号
             });
           } else {
             forms.showSubjectClass = true;
@@ -183,9 +185,20 @@ export default defineComponent({
                   <NThing class={[styles.thingItem, 'isFull']}>
                     {{
                       header: () => (
-                        <div class={styles.title}>
-                          {item.name} {item.preStudentNum}人
-                        </div>
+                        <>
+                          <div class={styles.title}>
+                            {item.name} {item.preStudentNum}人
+                          </div>
+                          <div
+                            class={[
+                              styles.subjects,
+                              item.subjectName ? '' : styles.noSubjects
+                            ]}>
+                            {item.subjectName
+                              ? item.subjectName
+                              : '暂未设置声部'}
+                          </div>
+                        </>
                       ),
                       default: () =>
                         item.lastStudy && (

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

@@ -16,6 +16,7 @@ import { usePrepareStore } from '/src/store/modules/prepareLessons';
 import { saveCourseware } from '../../../api';
 import { useDebounceFn } from '@vueuse/core';
 import CardPreview from '/src/components/card-preview';
+import { eventGlobal } from '/src/utils';
 
 const formatType = (type: string) => {
   if (type === 'shareResources') {
@@ -118,34 +119,44 @@ export default defineComponent({
       //   negativeText: '取消',
       //   onPositiveClick: async () => {
       try {
-        const temp: any = [];
-        prepareStore.getCoursewareList.forEach((item: any) => {
-          temp.push({
-            materialId: item.materialId,
-            materialName: item.title,
-            materialType: item.type,
-            id: item.id
-          });
-        });
+        // const temp: any = [];
+        // prepareStore.getCoursewareList.forEach((item: any) => {
+        //   temp.push({
+        //     materialId: item.materialId,
+        //     materialName: item.title,
+        //     materialType: item.type,
+        //     id: item.id
+        //   });
+        // });
 
-        // 保存课件
-        await saveCourseware({
-          coursewareDetailKnowledgeId: prepareStore.getSelectKey,
-          lessonCoursewareId: prepareStore.getLessonCoursewareId,
-          lessonCoursewareDetailId: prepareStore.getLessonCoursewareDetailId,
-          materialList: [
-            ...temp,
-            {
-              materialName: item.title,
-              materialType: item.type,
-              materialId: item.id
-            }
-          ],
-          subjectId: prepareStore.getSubjectId
-        });
+        // // 保存课件
+        // await saveCourseware({
+        //   coursewareDetailKnowledgeId: prepareStore.getSelectKey,
+        //   lessonCoursewareId: prepareStore.getLessonCoursewareId,
+        //   lessonCoursewareDetailId: prepareStore.getLessonCoursewareDetailId,
+        //   materialList: [
+        //     ...temp,
+        //     {
+        //       materialName: item.title,
+        //       materialType: item.type,
+        //       materialId: item.id
+        //     }
+        //   ],
+        //   subjectId: prepareStore.getSubjectId
+        // });
 
-        message.success('添加成功');
-        prepareStore.setIsAddResource(true);
+        // message.success('添加成功');
+        // prepareStore.setIsAddResource(true);
+        eventGlobal.emit('onPrepareAddItem', {
+          materialId: item.materialId,
+          coverImg: item.coverImg,
+          type: item.type,
+          title: item.title,
+          isCollect: item.isCollect,
+          isSelected: item.isSelected,
+          content: item.content,
+          removeFlag: false
+        });
       } catch {
         //
       }

src/views/prepare-lessons/model/subject-sync/index.module.less

@@ -0,0 +1,75 @@
+.btnGroupModal {
+  padding: 32px 0;
+
+  :global {
+    .n-button {
+      height: 47px;
+      min-width: 156px;
+    }
+  }
+}
+
+
+.subjectSync {
+
+  .tips {
+    padding: 40px;
+    font-size: 20px;
+    color: #131415;
+    line-height: 28px;
+
+    span {
+      color: #F20606;
+    }
+  }
+}
+
+.subjectList {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 0 30px;
+  gap: 20px 40px;
+}
+
+.subjectItem {
+  .imgSection {
+    position: relative;
+    padding: 7px;
+    border: 3px solid transparent;
+    border-radius: 24px;
+    line-height: 0;
+  }
+
+  img {
+    overflow: hidden;
+    border-radius: 24px;
+    width: 120px;
+    height: 120px;
+  }
+
+  .iconSelect {
+    position: absolute;
+    top: 11px;
+    right: 11px;
+    border-radius: 0;
+    width: 24px;
+    height: 24px;
+  }
+
+  .subjectName {
+    text-align: center;
+    color: #777777;
+  }
+}
+
+.subjectSelect {
+  .imgSection {
+    border: 3px solid #198CFE;
+  }
+
+  .subjectName {
+    font-weight: 600;
+    color: #198CFE;
+  }
+}

src/views/prepare-lessons/model/subject-sync/index.tsx

@@ -0,0 +1,85 @@
+import { defineComponent, onMounted, ref } from 'vue';
+import styles from './index.module.less';
+import { NButton, NSpace, useMessage } from 'naive-ui';
+import { useCatchStore } from '/src/store/modules/catchData';
+import iconSelect from '../../images/icon-select.png';
+
+export default defineComponent({
+  name: 'subject-sync',
+  props: {
+    subjectId: {
+      type: [String, Number],
+      default: ''
+    }
+  },
+  emits: ['close', 'confirm'],
+  setup(props, { emit }) {
+    const catchStore = useCatchStore();
+    const message = useMessage();
+    const selectSubjectIds = ref([] as any);
+
+    const onSubmit = () => {
+      if (selectSubjectIds.value.length <= 0) {
+        message.error('至少选择一个声部进行同步');
+        return;
+      }
+
+      emit('confirm', selectSubjectIds.value);
+    };
+    onMounted(async () => {
+      // 获取教材分类列表
+      await catchStore.getSubjects();
+
+      if (props.subjectId) {
+        selectSubjectIds.value = [Number(props.subjectId)];
+      }
+    });
+    return () => (
+      <div class={styles.subjectSync}>
+        <div class={styles.tips}>
+          请选择当前课件可使用的乐器
+          <span>（勾选后则对应乐器下的课件内容将被当前课件内容全部替换）</span>
+        </div>
+
+        <div class={styles.subjectList}>
+          {catchStore.getSubjectList.map((subject: any) => (
+            <div
+              class={[
+                styles.subjectItem,
+                selectSubjectIds.value.includes(subject.id)
+                  ? styles.subjectSelect
+                  : ''
+              ]}
+              onClick={() => {
+                if (selectSubjectIds.value.includes(subject.id)) {
+                  const index = selectSubjectIds.value.indexOf(subject.id);
+                  selectSubjectIds.value.splice(index, 1);
+                } else {
+                  selectSubjectIds.value.push(subject.id);
+                }
+              }}>
+              <div class={styles.imgSection}>
+                <img src={subject.img} />
+
+                {selectSubjectIds.value.includes(subject.id) && (
+                  <img src={iconSelect} class={styles.iconSelect} />
+                )}
+              </div>
+
+              <p class={styles.subjectName}>{subject.name}</p>
+            </div>
+          ))}
+        </div>
+
+        <NSpace class={styles.btnGroupModal} justify="center">
+          <NButton round onClick={() => emit('close')}>
+            取消
+          </NButton>
+          <NButton round type="primary" onClick={onSubmit}>
+            确定
+          </NButton>
+        </NSpace>
+      </div>
+    );
+  }
+});