添加课件拖拽

src/components/card-type/index.tsx

@@ -270,7 +270,6 @@ export default defineComponent({
           isAnimation.value = false;
         }}
         onDragstart={(e: any) => {
-          console.log('dragstart', Date.now());
           e.dataTransfer.setData('text', JSON.stringify(props.item));
         }}>
         {/* 判断是否下架 */}

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

@@ -345,6 +345,7 @@
   gap: 20px 0;
 
 
+
   .itemWrap {
     width: calc(100% / 4);
     padding-bottom: calc(100% / 4 * 0.73333);
@@ -388,6 +389,34 @@
   }
 
   :global {
+    .itemWrap {
+      width: calc(100% / 4);
+      padding-bottom: calc(100% / 4 * 0.73333);
+      position: relative;
+
+      .itemWrapBox {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        padding: 0 6px;
+      }
+
+      .itemOperation {
+        position: absolute;
+        top: 8px;
+        right: 14px;
+        z-index: 98;
+      }
+
+      .iconDelete {
+        width: 27px;
+        height: 27px;
+        cursor: pointer;
+      }
+    }
+
     .card-section-container {
       width: 100%;
       height: 100%;
@@ -489,4 +518,4 @@
 
 .addOtherSource {
   width: 726px;
-}
+}

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

@@ -412,6 +412,48 @@ export default defineComponent({
       });
     };
 
+    // 拖拽添加数据
+    const addDragCoursewareItem = async (item: any, newIndex: number) => {
+      clearTimeout(timer);
+      const materialList: any[] = [];
+      try {
+        const { data } = await api_materialDetail(item.materialId);
+        if (Array.isArray(data.materialRefs)) {
+          data.materialRefs.forEach((item: any) => {
+            if (item.refType === 'STRONG') {
+              const relateMaterialInfo = item.relateMaterialInfo || {};
+              materialList.push({
+                content: relateMaterialInfo.content,
+                coverImg: relateMaterialInfo.coverImg,
+                isSelected:
+                  relateMaterialInfo.sourceFrom === 'PLATFORM' ? true : false,
+                materialId: relateMaterialInfo.id,
+                title: relateMaterialInfo.name,
+                type: relateMaterialInfo.type
+              });
+            }
+          });
+        }
+      } catch {
+        //
+      }
+
+      nextTick(() => {
+        const array: any = forms.coursewareList[item.index || 0].list || [];
+        array[newIndex] = item;
+        materialList.forEach((m: any) => {
+          array.splice(newIndex + 1, 0, m);
+        });
+        forms.coursewareList[item.index || 0].list = array;
+
+        console.log(forms.coursewareList, 'courseware add drag');
+        timer = setTimeout(() => {
+          // 内容有更新 - 相关资源会刷新
+          eventGlobal.emit('onCoursewareUpdate');
+        }, 100);
+      });
+    };
+
     // 提交
     const onSubmit = async () => {
       try {
@@ -690,43 +732,44 @@ export default defineComponent({
               {forms.coursewareList.map((item: any, index: number) => (
                 <div
                   class={[styles.listItems, 'row-group']}
-                  onDragenter={(e: any) => {
-                    e.preventDefault();
-                  }}
-                  onDragover={(e: any) => {
-                    e.preventDefault();
-                  }}
-                  onDrop={(e: any) => {
-                    let dropItem = e.dataTransfer.getData('text');
-                    dropItem =
-                      dropItem && e.dataTransfer.effectAllowed === 'all'
-                        ? JSON.parse(dropItem)
-                        : {};
-                    // 判断是否有数据
-                    if (dropItem.id) {
-                      // 获取拖拽的目标元素
-                      eventGlobal.emit(
-                        'onPrepareAddItem',
-                        {
-                          materialId: dropItem.id,
-                          coverImg: dropItem.coverImg,
-                          type: dropItem.type,
-                          title: dropItem.title,
-                          refFlag: dropItem.refFlag,
-                          isCollect: dropItem.isCollect,
-                          isSelected: dropItem.isSelected,
-                          content: dropItem.content,
-                          removeFlag: false,
-                          index,
-                          addType: 'drag'
-                        },
-                        {
-                          x: e.clientX,
-                          y: e.clientY
-                        }
-                      );
-                    }
-                  }}>
+                  // onDragenter={(e: any) => {
+                  //   e.preventDefault();
+                  // }}
+                  // onDragover={(e: any) => {
+                  //   e.preventDefault();
+                  // }}
+                  // onDrop={(e: any) => {
+                  //   let dropItem = e.dataTransfer.getData('text');
+                  //   dropItem =
+                  //     dropItem && e.dataTransfer.effectAllowed === 'all'
+                  //       ? JSON.parse(dropItem)
+                  //       : {};
+                  //   // 判断是否有数据
+                  //   if (dropItem.id) {
+                  //     // 获取拖拽的目标元素
+                  //     eventGlobal.emit(
+                  //       'onPrepareAddItem',
+                  //       {
+                  //         materialId: dropItem.id,
+                  //         coverImg: dropItem.coverImg,
+                  //         type: dropItem.type,
+                  //         title: dropItem.title,
+                  //         refFlag: dropItem.refFlag,
+                  //         isCollect: dropItem.isCollect,
+                  //         isSelected: dropItem.isSelected,
+                  //         content: dropItem.content,
+                  //         removeFlag: false,
+                  //         index,
+                  //         addType: 'drag'
+                  //       },
+                  //       {
+                  //         x: e.clientX,
+                  //         y: e.clientY
+                  //       }
+                  //     );
+                  //   }
+                  // }}
+                >
                   <div class={styles.knowledgePoint}>
                     {/* <div class={styles.btnItem}>
                       <span class={styles.btnTitle}>
@@ -805,6 +848,41 @@ export default defineComponent({
                     // scrollSensitivity={120}
                     // forceAutoScrollFallback={true}
                     animation={200}
+                    // onChange={(evt: any) => {
+                    //   const added = evt.added;
+                    //   // 是否为添加
+                    //   if (!added || (added && !added.element)) {
+                    //     return;
+                    //   }
+
+                    //   if (added.element.sourceForm !== 'resource-item') {
+                    //     return;
+                    //   }
+                    //   // console.log(forms.coursewareList, 'courseware');
+                    // }}
+                    onAdd={(evt: any) => {
+                      // console.log(
+                      const list = forms.coursewareList[index].list;
+                      const dropItem = list[evt.newDraggableIndex];
+                      console.log(dropItem, 'dropItem');
+                      if (dropItem.sourceForm === 'resource-item') {
+                        addDragCoursewareItem(
+                          {
+                            materialId: dropItem.id,
+                            coverImg: dropItem.coverImg,
+                            type: dropItem.type,
+                            title: dropItem.title,
+                            refFlag: dropItem.refFlag,
+                            isCollect: dropItem.isCollect,
+                            isSelected: dropItem.isSelected,
+                            content: dropItem.content,
+                            removeFlag: false,
+                            index
+                          },
+                          evt.newDraggableIndex
+                        );
+                      }
+                    }}
                     onDrag={(event: any) => {
                       // 修复滚动超出范围
                       const container: any = document.querySelector(
@@ -817,7 +895,6 @@ export default defineComponent({
                         window.innerHeight - event.clientY <
                         sensitivity
                       ) {
-                        console.log('1111');
                         container.scrollTop += 8;
                       }
                     }}

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

@@ -17,6 +17,7 @@ import { useDebounceFn, useThrottleFn, useThrottle } from '@vueuse/core';
 import { saveCourseware } from '/src/views/prepare-lessons/api';
 import CardPreview from '/src/components/card-preview';
 import { eventGlobal } from '/src/utils';
+import Draggable from 'vuedraggable';
 
 const formatType = (type: string) => {
   if (type === 'shareResources') {
@@ -95,7 +96,8 @@ export default defineComponent({
             refFlag: row.refFlag,
             isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
             containAccompaniment: row.containAccompaniment,
-            content: row.content
+            content: row.content,
+            sourceForm: 'resource-item'
             // exist: index !== -1 ? true : false // 是否存在
           });
         });
@@ -243,25 +245,110 @@ export default defineComponent({
                   : ''
               ]}>
               {state.tableList.length > 0 && (
-                <div class={styles.list}>
-                  {state.tableList.map((item: any) => (
-                    <CardType
-                      isShowAdd
-                      item={item}
-                      isShowCollect={true}
-                      draggable
-                      disabledMouseHover={false}
-                      onClick={() => {
-                        if (item.type === 'IMG') return;
-                        state.show = true;
-                        state.item = item;
-                      }}
-                      onCollect={(item: any) => onCollect(item)}
-                      // isShowAddDisabled={!prepareStore.getIsEditResource}
-                      onAdd={(item: any) => onAdd(item)}
-                    />
-                  ))}
-                </div>
+                <Draggable
+                  v-model:modelValue={state.tableList}
+                  itemKey="id"
+                  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                  // @ts-ignore
+                  // group="description"
+                  group={{ name: 'description', pull: 'clone', put: false }}
+                  animation={200}
+                  sort={false}
+                  onMove={(evt: any) => {
+                    // console.log(evt, 'evt', evt.from !== evt.to);
+                    return evt.from !== evt.to;
+                  }}
+                  componentData={{
+                    draggable: 'row-nav',
+                    itemKey: 'id',
+                    tag: 'div',
+                    pull: 'clone',
+                    put: false,
+                    animation: 200,
+                    group: 'description'
+                  }}
+                  class={styles.list}>
+                  {{
+                    item: (element: any) => {
+                      const item = element.element;
+                      return (
+                        <div
+                          data-id={item.id}
+                          class={['itemWrap', 'itemBlock', 'row-nav']}>
+                          <div class={'itemWrapBox'}>
+                            <CardType
+                              isShowAdd
+                              item={item}
+                              isShowCollect={true}
+                              draggable={false}
+                              disabledMouseHover={false}
+                              onClick={() => {
+                                if (item.type === 'IMG') return;
+                                state.show = true;
+                                state.item = item;
+                              }}
+                              onCollect={(item: any) => onCollect(item)}
+                              // isShowAddDisabled={!prepareStore.getIsEditResource}
+                              onAdd={(item: any) => onAdd(item)}
+                            />
+                          </div>
+                        </div>
+                        // <div
+                        //   data-id={item.id}
+                        //   class={[
+                        //     styles.itemWrap,
+                        //     styles.itemBlock,
+                        //     'row-nav'
+                        //   ]}>
+                        //   <div class={styles.itemWrapBox}>
+                        //     <CardType
+                        //       class={[styles.itemContent]}
+                        //       isShowCollect={false}
+                        //       offShelf={item.removeFlag ? true : false}
+                        //       // onOffShelf={() => onRemove(item)}
+                        //       item={item}
+                        //       disabledMouseHover={false}
+                        //       onClick={() => {
+                        //         if (item.type === 'IMG') return;
+                        //         forms.show = true;
+                        //         forms.item = item;
+                        //       }}
+                        //     />
+                        //     <div class={styles.itemOperation}>
+                        //       <img
+                        //         src={iconDelete}
+                        //         class={styles.iconDelete}
+                        //         onClick={(e: MouseEvent) => {
+                        //           e.stopPropagation();
+                        //           onDelete(element.index, index);
+                        //         }}
+                        //       />
+                        //     </div>
+                        //   </div>
+                        // </div>
+                      );
+                    }
+                  }}
+                </Draggable>
+                // <div class={styles.list}>
+                //   {state.tableList.map((item: any) => (
+                //     <CardType
+                //       isShowAdd
+                //       item={item}
+                //       isShowCollect={true}
+                //       draggable
+                //       disabledMouseHover={false}
+                //       onClick={() => {
+                //         if (item.type === 'IMG') return;
+                //         state.show = true;
+                //         state.item = item;
+                //       }}
+                //       onCollect={(item: any) => onCollect(item)}
+                //       // isShowAddDisabled={!prepareStore.getIsEditResource}
+                //       onAdd={(item: any) => onAdd(item)}
+                //     />
+                //   ))}
+                // </div>
               )}
               {!state.loading && state.tableList.length <= 0 && <TheEmpty />}
             </div>