更新

src/components/card-preview/index.module.less

@@ -18,7 +18,11 @@
     }
   }
 }
-
+.dragbom{
+  position: absolute;
+  left: 0;
+  bottom: 0;
+}
 .maxCard {
   width: 1200px;
 

src/components/card-preview/index.tsx

@@ -188,7 +188,7 @@ export default defineComponent({
             'MUSIC_WIKI',
             'LISTEN'
           ].includes(item.value.type) && <TheEmpty />}
-          {props.from === 'class' && <Dragbom></Dragbom>}
+          {props.from === 'class' && <Dragbom class={styles.dragbom}></Dragbom>}
         </NModal>
       </>
     );

src/views/attend-class/index.module.less

@@ -770,7 +770,7 @@
 }
 
 .workVisiable {
-  width: 1258px;
+  width: 1200px;
 }
 
 .workContainer {
@@ -779,7 +779,7 @@
 
   .workTrain {
     flex: 1;
-    height: 75vh;
+    height: 55vh;
 
     & > div {
       padding-top: 15px;
@@ -798,7 +798,7 @@
 
   .resourceMain {
     flex: 0 0 360px;
-    height: 75vh;
+    height: 55vh;
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
   }
 }

src/views/attend-class/index.tsx

@@ -1531,6 +1531,29 @@ export default defineComponent({
       showModalBeat,
       users.info.id
     );
+    // 布置作业弹窗
+    const modelTrainStatusConBoxClass = 'modelTrainStatusConBoxClass_drag';
+    const modelTrainStatusConBoxDragData = useDrag(
+      [
+        `${modelTrainStatusConBoxClass}>.n-card-header`,
+        `${modelTrainStatusConBoxClass} .bom_drag`
+      ],
+      modelTrainStatusConBoxClass,
+      toRef(data, 'modelTrainStatus'),
+      users.info.id
+    );
+    // 布置作业课后作业
+    const modelTrainHomeWordConBoxClass =
+      'modelTrainHomeWordConBoxClassBoxClass_drag';
+    const modelTrainHomeWordConBoxDragData = useDrag(
+      [
+        `${modelTrainHomeWordConBoxClass}>.n-card-header`,
+        `${modelTrainHomeWordConBoxClass} .bom_drag`
+      ],
+      modelTrainHomeWordConBoxClass,
+      toRef(data, 'modelAttendStatus'),
+      users.info.id
+    );
     return () => (
       <div id="playContent" class={[styles.playContent, 'wrap']}>
         <div
@@ -2100,7 +2123,12 @@ export default defineComponent({
           v-model:show={data.modelAttendStatus}
           preset="card"
           title={'课后作业'}
-          class={['modalTitle', styles.removeVisiable]}>
+          style={modelTrainHomeWordConBoxDragData.styleDrag.value}
+          class={[
+            'modalTitle',
+            styles.removeVisiable,
+            modelTrainHomeWordConBoxClass
+          ]}>
           <div class={styles.studentRemove}>
             <p>{data.modalAttendMessage}</p>
             <NSpace class={styles.btnGroupModal} justify="center">
@@ -2127,6 +2155,7 @@ export default defineComponent({
               </NButton>
             </NSpace>
           </div>
+          <Dragbom class={styles.dragbom}></Dragbom>
         </NModal>
 
         {/* 训练设置 */}
@@ -2148,11 +2177,17 @@ export default defineComponent({
         <NModal
           v-model:show={data.modelTrainStatus}
           preset="card"
-          class={['modalTitle background', styles.workVisiable]}
+          class={[
+            'modalTitle background',
+            styles.workVisiable,
+            modelTrainStatusConBoxClass
+          ]}
+          style={modelTrainStatusConBoxDragData.styleDrag.value}
           title={'布置作业'}>
           <div id="model-homework-height" class={styles.workContainer}>
             <div class={styles.workTrain}>
               <Train
+                from={'class'}
                 cardType="homeworkRecord"
                 lessonPreTraining={{
                   title: data.lessonPreTrainingId
@@ -2170,9 +2205,10 @@ export default defineComponent({
               />
             </div>
             <div class={styles.resourceMain}>
-              <ResourceMain cardType="homerowk-record" />
+              <ResourceMain from={'class'} cardType="homerowk-record" />
             </div>
           </div>
+          <Dragbom class={styles.dragbom}></Dragbom>
         </NModal>
 
         <NModal

src/views/attend-class/model/train-type/index.tsx

@@ -66,6 +66,10 @@ export default defineComponent({
     isCLassWork: {
       type: Boolean,
       default: false
+    },
+    from: {
+      type: String,
+      default: ''
     }
   },
   emits: ['click', 'delete', 'edit', 'offShelf'],
@@ -410,6 +414,7 @@ export default defineComponent({
         </NModal>
 
         <CardPreview
+          from={props.from}
           v-model:show={previewShow.value}
           item={preivewItem.value}
           isDownload={isDownload.value}

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

@@ -57,7 +57,11 @@
     }
   }
 }
-
+.dragbom{
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
 .tipsContainer {
   display: flex;
   align-items: center;
@@ -331,4 +335,4 @@
       }
     }
   }
-}
+}

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

@@ -5,7 +5,8 @@ import {
   watch,
   ref,
   PropType,
-  onUnmounted
+  onUnmounted,
+  toRef
 } from 'vue';
 import styles from './index.module.less';
 import {
@@ -40,6 +41,9 @@ import iconTips from '../../../images/icon-tips.png';
 import { typeFormat } from '../../resource-main/components/select-music';
 import TheMessageDialog from '/src/components/TheMessageDialog';
 import { useResizeObserver } from '@vueuse/core';
+import useDrag from '@/hooks/useDrag';
+import Dragbom from '@/hooks/useDrag/dragbom';
+import { useUserStore } from '@/store/modules/users';
 export default defineComponent({
   name: 'courseware-modal',
   props: {
@@ -65,6 +69,11 @@ export default defineComponent({
     courseScheduleId: {
       type: String,
       default: ''
+    },
+    from: {
+      // 来自哪里
+      type: String,
+      default: ''
     }
   },
   emits: ['change'],
@@ -239,6 +248,23 @@ export default defineComponent({
       forms.trainList = [];
       prepareStore.setTrainList([]);
     });
+    // 弹窗拖动
+    // 作业设置
+    let workSetingBoxDragData: any;
+    let workSetingBoxClass: string;
+    if (props.from === 'class') {
+      const users = useUserStore();
+      workSetingBoxClass = 'workSetingBoxClass_drag';
+      workSetingBoxDragData = useDrag(
+        [
+          `${workSetingBoxClass}>.n-card-header`,
+          `${workSetingBoxClass} .bom_drag`
+        ],
+        workSetingBoxClass,
+        toRef(forms, 'editStatus'),
+        users.info.id
+      );
+    }
     return () => (
       <div class={styles.coursewareModal}>
         <div class={styles.btnGroup}>
@@ -386,6 +412,7 @@ export default defineComponent({
                         return (
                           <div data-id={item.musicId} class={styles.itemBlock}>
                             <TrainType
+                              from={props.from}
                               item={item}
                               isDelete
                               type="prepare"
@@ -451,8 +478,15 @@ export default defineComponent({
 
         {/* 编辑 */}
         <NModal
+          style={
+            props.from === 'class' ? workSetingBoxDragData.styleDrag.value : {}
+          }
           v-model:show={forms.editStatus}
-          class={['modalTitle background', styles.trainEditModal]}
+          class={[
+            'modalTitle background',
+            styles.trainEditModal,
+            workSetingBoxClass
+          ]}
           preset="card"
           title="作业设置">
           <TrainUpdate
@@ -483,6 +517,7 @@ export default defineComponent({
               prepareStore.setTrainList(forms.trainList);
             }}
           />
+          {props.from === 'class' && <Dragbom class={styles.dragbom}></Dragbom>}
         </NModal>
 
         {/* 添加自定义教材 */}

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

@@ -38,4 +38,9 @@
 
 .trainEditModal {
   width: 494px;
-}
+}
+.dragbom{
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}

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

@@ -1,4 +1,11 @@
-import { PropType, defineComponent, onMounted, reactive, watch } from 'vue';
+import {
+  PropType,
+  defineComponent,
+  onMounted,
+  reactive,
+  watch,
+  toRef
+} from 'vue';
 import ResourceSearchGroup from './resource-search-group';
 import { NModal, NScrollbar, NSpin } from 'naive-ui';
 import styles from './index.module.less';
@@ -13,6 +20,9 @@ import CardPreview from '/src/components/card-preview';
 import { evaluateDifficult } from '/src/utils/contants';
 import { eventGlobal } from '/src/utils';
 import { favorite, materialQueryPage } from '/src/views/natural-resources/api';
+import useDrag from '@/hooks/useDrag';
+import Dragbom from '@/hooks/useDrag/dragbom';
+import { useUserStore } from '@/store/modules/users';
 
 const formatType = (type: string) => {
   if (type === 'sahreMusic') {
@@ -57,6 +67,11 @@ export default defineComponent({
     cardType: {
       type: String as PropType<'' | 'homerowk-record' | 'prepare'>,
       default: ''
+    },
+    from: {
+      // 来自哪里
+      type: String,
+      default: ''
     }
   },
   setup(props) {
@@ -217,6 +232,23 @@ export default defineComponent({
         onAdd(item);
       });
     });
+    // 弹窗拖动
+    // 作业设置
+    let workSetingBoxDragData: any;
+    let workSetingBoxClass: string;
+    if (props.from === 'class') {
+      const users = useUserStore();
+      workSetingBoxClass = 'workSetingBoxClass_drag';
+      workSetingBoxDragData = useDrag(
+        [
+          `${workSetingBoxClass}>.n-card-header`,
+          `${workSetingBoxClass} .bom_drag`
+        ],
+        workSetingBoxClass,
+        toRef(state, 'editStatus'),
+        users.info.id
+      );
+    }
     return () => (
       <div>
         <ResourceSearchGroup
@@ -276,11 +308,20 @@ export default defineComponent({
         </NScrollbar>
 
         {/* 弹窗查看 */}
-        <CardPreview v-model:show={state.show} item={state.item} />
+        <CardPreview
+          from={props.from}
+          v-model:show={state.show}
+          item={state.item}
+        />
 
         <NModal
           v-model:show={state.editStatus}
-          class={['modalTitle background', styles.trainEditModal]}
+          style={workSetingBoxDragData.styleDrag.value}
+          class={[
+            'modalTitle background',
+            styles.trainEditModal,
+            workSetingBoxClass
+          ]}
           preset="card"
           title="作业设置">
           <TrainUpdate
@@ -306,6 +347,7 @@ export default defineComponent({
               eventGlobal.emit('onTrainAddItem', train);
             }}
           />
+          {props.from === 'class' && <Dragbom class={styles.dragbom}></Dragbom>}
         </NModal>
       </div>
     );

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

@@ -78,7 +78,11 @@
   }
 
 }
-
+.dragbom{
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
 .selectMusicModal {
   position: relative;
   width: 1352px;
@@ -99,4 +103,4 @@
 
 .trainEditModal {
   width: 494px;
-}
+}

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

@@ -4,7 +4,8 @@ import {
   nextTick,
   onMounted,
   reactive,
-  ref
+  ref,
+  toRef
 } from 'vue';
 import styles from './index.module.less';
 import { NTabs, NTabPane, NModal } from 'naive-ui';
@@ -16,7 +17,9 @@ import ResourceItem from './components/resource-item';
 import TrainUpdate from '/src/views/attend-class/model/train-update';
 import requestOrigin from 'umi-request';
 import { eventGlobal } from '/src/utils';
-
+import useDrag from '@/hooks/useDrag';
+import Dragbom from '@/hooks/useDrag/dragbom';
+import { useUserStore } from '@/store/modules/users';
 export default defineComponent({
   name: 'resource-main',
   props: {
@@ -24,6 +27,11 @@ export default defineComponent({
     cardType: {
       type: String as PropType<'' | 'homerowk-record' | 'prepare'>,
       default: ''
+    },
+    from: {
+      // 来自哪里
+      type: String,
+      default: ''
     }
   },
   setup(props, { expose }) {
@@ -79,7 +87,40 @@ export default defineComponent({
     onMounted(() => {
       resetTabPosition();
     });
-
+    // 弹窗拖动
+    // 曲目资源
+    let selectResourceStatusAddBoxDragData: any;
+    let selectResourceStatusAddBoxClass: string;
+    if (props.from === 'class') {
+      const users = useUserStore();
+      selectResourceStatusAddBoxClass = 'selectResourceStatusAddBoxClass_drag';
+      selectResourceStatusAddBoxDragData = useDrag(
+        [
+          `${selectResourceStatusAddBoxClass} .select-resource>.n-tabs>.n-tabs-nav--top.n-tabs-nav`,
+          `${selectResourceStatusAddBoxClass} .bom_drag`
+        ],
+        selectResourceStatusAddBoxClass,
+        toRef(forms, 'selectMusicStatus'),
+        users.info.id
+      );
+    }
+    // 曲目资源 作业设置
+    let workSetingBoxDragData: any;
+    let workSetingBoxClass: string;
+    if (props.from === 'class') {
+      const users = useUserStore();
+      workSetingBoxClass = 'workSetingBoxClass_drag';
+      workSetingBoxDragData = useDrag(
+        [
+          `${workSetingBoxClass}>.n-card-header`,
+          `${workSetingBoxClass} .bom_drag`
+        ],
+        workSetingBoxClass,
+        toRef(forms, 'editStatus'),
+        users.info.id
+      );
+    }
+    //
     expose({
       resetTabPosition
     });
@@ -181,13 +222,22 @@ export default defineComponent({
               default: () => (
                 <>
                   <NTabPane name="myMusic" tab="我的曲目">
-                    <SelectMusic cardType={props.cardType} type="myMusic" />
+                    <SelectMusic
+                      from={props.from}
+                      cardType={props.cardType}
+                      type="myMusic"
+                    />
                   </NTabPane>
                   <NTabPane name="sahreMusic" tab="共享曲目">
-                    <SelectMusic cardType={props.cardType} type="sahreMusic" />
+                    <SelectMusic
+                      from={props.from}
+                      cardType={props.cardType}
+                      type="sahreMusic"
+                    />
                   </NTabPane>
                   <NTabPane name="collectMusic" tab="收藏曲目">
                     <SelectMusic
+                      from={props.from}
                       cardType={props.cardType}
                       type="collectMusic"
                     />
@@ -211,20 +261,40 @@ export default defineComponent({
         </NModal>
 
         <NModal
+          style={
+            props.from === 'class'
+              ? selectResourceStatusAddBoxDragData.styleDrag.value
+              : {}
+          }
           v-model:show={forms.selectMusicStatus}
           onUpdate:show={(val: any) => {
             if (!val) {
               prepareStore.setSelectMusicStatus(val);
             }
           }}
-          class={['modalTitle', styles.selectMusicModal]}
+          class={[
+            'modalTitle',
+            styles.selectMusicModal,
+            selectResourceStatusAddBoxClass
+          ]}
           preset="card"
           title={'选择曲目'}>
-          <SelectMusicModal onAdd={(item: any) => onAdd(item)} />
+          <SelectMusicModal
+            from={props.from}
+            onAdd={(item: any) => onAdd(item)}
+          />
+          {props.from === 'class' && <Dragbom class={styles.dragbom}></Dragbom>}
         </NModal>
         <NModal
+          style={
+            props.from === 'class' ? workSetingBoxDragData.styleDrag.value : {}
+          }
           v-model:show={forms.editStatus}
-          class={['modalTitle background', styles.trainEditModal]}
+          class={[
+            'modalTitle background',
+            styles.trainEditModal,
+            workSetingBoxClass
+          ]}
           preset="card"
           title="作业设置">
           <TrainUpdate
@@ -244,6 +314,7 @@ export default defineComponent({
               eventGlobal.emit('onTrainAddItem', train);
             }}
           />
+          {props.from === 'class' && <Dragbom class={styles.dragbom}></Dragbom>}
         </NModal>
       </div>
     );

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

@@ -51,18 +51,21 @@ export default defineComponent({
           }}>
           <NTabPane name="myResources" tab={'我的曲目'}>
             <SelectItem
+              from={props.from}
               type="myResources"
               onAdd={(item: any) => emit('add', item)}
             />
           </NTabPane>
           <NTabPane name="shareResources" tab={'共享曲目'}>
             <SelectItem
+              from={props.from}
               type="shareResources"
               onAdd={(item: any) => emit('add', item)}
             />
           </NTabPane>
           <NTabPane name="myCollect" tab="收藏曲目">
             <SelectItem
+              from={props.from}
               type="myCollect"
               onAdd={(item: any) => emit('add', item)}
             />

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

@@ -26,6 +26,10 @@ export default defineComponent({
     type: {
       type: String,
       default: ''
+    },
+    from: {
+      type: String,
+      default: ''
     }
   },
   emits: ['add'],
@@ -217,7 +221,11 @@ export default defineComponent({
         </NScrollbar>
 
         {/* 弹窗查看 */}
-        <CardPreview v-model:show={state.show} item={state.item} />
+        <CardPreview
+          from={props.from}
+          v-model:show={state.show}
+          item={state.item}
+        />
       </div>
     );
   }