修改显示

src/views/tempo-practice/index.module.less

@@ -496,6 +496,10 @@
     transform: translateX(100%);
     width: 0;
     transition: all .1s ease;
+
+    .settingModalShow {
+      display: none;
+    }
   }
 }
 
@@ -605,4 +609,4 @@
       transition: all 0.03s ease;
     }
   }
-}
+}

src/views/tempo-practice/index.tsx

@@ -149,6 +149,21 @@ export default defineComponent({
         handleStop();
       }
     };
+
+    /** 播放切换 */
+    const handlePlay2 = async () => {
+      const playState = getSettingValue('playState');
+      const playType = getSettingValue('playType');
+
+      if (playState === 'pause') {
+        updateSettingValue('playState', 'play');
+        if (playType === 'beat') {
+          await handleStartTick(state.settingStatus);
+        } else {
+          await handleStartBeat(state.settingStatus);
+        }
+      }
+    };
     /** 播放类型 */
     const handlePlayType = () => {
       handleStop();
@@ -198,7 +213,7 @@ export default defineComponent({
 
       if (ev.data.api === 'setPlayState') {
         if (ev.data.data) {
-          handlePlay();
+          handlePlay2();
         } else {
           handleStop();
         }

src/views/tempo-practice/setting-modal/index.module.less

@@ -96,6 +96,7 @@
       }
     }
   }
+
 }
 
 .settingContent {

src/views/tempo-practice/setting-modal/index.tsx

@@ -216,7 +216,7 @@ export default defineComponent({
             }}></i>
         </div>
 
-        <div class={styles.settingContent}>
+        <div class={[styles.settingContent]}>
           <Collapse v-model={state.activeNames} border={false}>
             <CollapseItem
               title="基础设置"
@@ -337,6 +337,12 @@ export default defineComponent({
                       onMove={(evt: any) => {
                         return evt.from !== evt.to;
                       }}
+                      onStart={(evt: any) => {
+                        evt.from.classList.add('onstart');
+                      }}
+                      onEnd={(evt: any) => {
+                        evt.from.classList.remove('onstart');
+                      }}
                       componentData={{
                         draggable: 'row-nav',
                         itemKey: 'id',

src/views/tempo-practice/setting-pc-modal/index.module.less

@@ -75,6 +75,9 @@
       margin-left: -51px;
     }
   }
+
+
+
 }
 
 .conCon {
@@ -250,5 +253,19 @@
     //   margin-bottom: 3px;
     //   transform: rotate(180deg);
     // }
+
   }
+
+  :global {
+    .onstart {
+      .sortable-chosen.sortable-ghost {
+        display: none !important;
+      }
+    }
+
+    .sortable-chosen.sortable-ghost {
+      display: none !important;
+    }
+  }
+
 }

src/views/tempo-practice/setting-pc-modal/index.tsx

@@ -6,6 +6,7 @@ import { useRoute } from 'vue-router';
 import { initSelectScorePartModal, setting_modal } from '../setting';
 import { getImage } from '../images/music';
 import btn5 from '../images/btn-5.png';
+import Draggable from 'vuedraggable';
 
 export default defineComponent({
   name: 'setting-pc-modal',
@@ -25,6 +26,8 @@ export default defineComponent({
       win: route.query.win,
       activeBeat: ''
     });
+    // 拖拽临时数据
+    const tempDragData = ref<any>({});
 
     return () => (
       <div
@@ -46,33 +49,57 @@ export default defineComponent({
                     styles.small
                 ]}>
                 {item.map((child: any, jIndex: number) => (
-                  <div
-                    class={[styles.beat, child.selected ? styles.active : '']}
-                    draggable={false}
-                    onDragenter={(e: any) => {
-                      e.preventDefault();
+                  <Draggable
+                    modelValue={[child]}
+                    itemKey="index"
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    group={{
+                      name: 'description',
+                      pull: 'clone',
+                      put: true
                     }}
-                    onDragover={(e: any) => {
-                      e.preventDefault();
+                    animation={200}
+                    sort={false}
+                    componentData={{
+                      draggable: 'row-nav',
+                      itemKey: 'index',
+                      tag: 'div',
+                      pull: 'clone',
+                      put: true,
+                      animation: 200,
+                      group: 'description'
                     }}
-                    onDrop={(e: any) => {
-                      let dropItem = e.dataTransfer.getData('text');
-                      dropItem = dropItem ? JSON.parse(dropItem) : {};
-                      console.log(e, 'event', dropItem);
+                    onChange={(evt: any) => {
+                      console.log('111', evt);
+                      tempDragData.value = evt.added || '';
+                    }}
+                    onAdd={() => {
+                      const added = tempDragData.value?.element || {};
                       // 判断是否有数据
-                      if (dropItem.url) {
+                      if (added.url && added.sourceFrom === 'setting-modal') {
                         setting_modal.scorePart.forEach(
                           (part: Array<any>, ci: number) => {
                             part.forEach((child: any, cj: number) => {
                               if (i === ci && jIndex === cj) {
-                                child.url = dropItem.url;
-                                child.index = dropItem.index;
+                                child.url = added.url;
+                                child.index = added.index;
                               }
                             });
                           }
                         );
                       }
                     }}
+                    onStart={(evt: any) => {
+                      console.log(evt, 'eweew');
+                      evt.from.classList.add('onstart');
+                      tempDragData.value = {};
+                    }}
+                    onEnd={(evt: any) => {
+                      console.log(evt, 'eweew');
+                      evt.from.classList.remove('onstart');
+                      tempDragData.value = {};
+                    }}
                     onClick={(e: any) => {
                       e.stopPropagation();
                       if (setting_modal.scorePart[i][jIndex].selected) {
@@ -80,11 +107,56 @@ export default defineComponent({
                       } else {
                         initSelectScorePartModal(i, jIndex);
                       }
-                    }}>
-                    <div class={styles.imgSection}>
-                      <img src={getImage(child.url)} />
-                    </div>
-                  </div>
+                    }}
+                    class={[styles.beat, child.selected ? styles.active : '']}>
+                    {/* <div
+                      class={[styles.beat, child.selected ? styles.active : '']}
+                      draggable={false}
+                      onDragenter={(e: any) => {
+                        e.preventDefault();
+                      }}
+                      onDragover={(e: any) => {
+                        e.preventDefault();
+                      }}
+                      onDrop={(e: any) => {
+                        let dropItem = e.dataTransfer.getData('text');
+                        dropItem = dropItem ? JSON.parse(dropItem) : {};
+                        console.log(e, 'event', dropItem);
+                        // 判断是否有数据
+                        if (dropItem.url) {
+                          setting_modal.scorePart.forEach(
+                            (part: Array<any>, ci: number) => {
+                              part.forEach((child: any, cj: number) => {
+                                if (i === ci && jIndex === cj) {
+                                  child.url = dropItem.url;
+                                  child.index = dropItem.index;
+                                }
+                              });
+                            }
+                          );
+                        }
+                      }}
+                      onClick={(e: any) => {
+                        e.stopPropagation();
+                        if (setting_modal.scorePart[i][jIndex].selected) {
+                          initSelectScorePartModal();
+                        } else {
+                          initSelectScorePartModal(i, jIndex);
+                        }
+                      }}> */}
+                    {{
+                      item: (element: any) => {
+                        const item = element.element;
+                        return (
+                          <div data-id={item.key} class={styles.imgSection}>
+                            <img src={getImage(child.url)} />
+                          </div>
+                        );
+                      }
+                    }}
+
+                    {/* </div> */}
+                  </Draggable>
                 ))}
               </div>
             ))}