feat:修改关卡页面的拖拽

src/views/learningpath/LevelAddDetail.vue

@@ -15,7 +15,45 @@
             v-for="item in level"
             :key="item.id"
           > -->
-          <div
+
+ <draggable
+            v-model="level"
+            chosenClass="chosen"
+            ghostClass="ghost"
+            forceFallback="true"
+            group="stage"
+            animation="500"
+          >
+            <template #item="{ element}">
+             <div
+            class="items"
+            :class="isactive == element.chapterId ? 'active' : ''"
+            @click="changebgc(element.chapterId)"
+          >
+            <div class="items1">
+              <div class="boxs_left">
+                <div class="script">
+                  <span style="font-size: 12px; color: #ffffff">说明</span>
+                </div>
+                <div class="imgIcon"></div>
+              </div>
+              <div class="boxs_right">
+                <div class="imgIcon"></div>
+              </div>
+            </div>
+            <div class="items2">
+              <div class="nname">{{ element.name }}</div>
+            </div>
+            <!-- <div class="itemle">
+              <div class="tit">{{ item.remark }}</div>
+              <div class="name">{{ item.name }}</div>
+            </div> -->
+          </div>
+            </template>
+          </draggable>
+
+
+          <!-- <div
             class="items"
             :class="isactive == index ? 'active' : ''"
             @click="changebgc(index)"
@@ -36,11 +74,8 @@
             <div class="items2">
               <div class="nname">{{ item.name }}</div>
             </div>
-            <!-- <div class="itemle">
+           
-              <div class="tit">{{ item.remark }}</div>
+          </div> -->
-              <div class="name">{{ item.name }}</div>
-            </div> -->
-          </div>
         </div>
       </div>
     </div>
@@ -317,7 +352,177 @@
             </div>
           </div>
           <div class="tableBox">
-            <a-table
+            <div
+                style="
+                  height: 50px;
+                  display: flex;
+                  justify-content: space-between;
+                  align-items: center;
+                  background-color: #eff4fc;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #999ba3;
+                  line-height: 36px;
+                  border-bottom: 1px solid #f2f6fc;
+                "
+              >
+                <div
+                  style="
+                    width: 87px;
+                    text-align: center;
+                    display: flex;
+                    margin-left: 46px;
+                  "
+                >
+                  <img
+                    style="
+                      width: 16px;
+                      height: 16px;
+                      cursor: pointer;
+                      margin-top: 12px;
+                    "
+                    :src="
+                      selectAll === 0
+                        ? require('../../assets/images/notSelect.png')
+                        : selectAll === 1
+                        ? require('../../assets/images/selectAll.png')
+                        : require('../../assets/images/select.png')
+                    "
+                    @click="selectRowAll"
+                  />
+                  <!-- <a-checkbox
+                    v-model:checked="selectAll"
+                    @change="selectRowAll"
+                  >
+                  </a-checkbox> -->
+                  <div style="margin-top: 2px; margin-left: 8px">类型</div>
+                </div>
+                <div style="width: 120px; text-align: center">任务名称</div>
+                <div style="width: 120px; text-align: center">必修/选修</div>
+                <div style="width: 87px; text-align: center">时长</div>
+                <div
+                  style="width: 120px; text-align: center; margin-right: 20px"
+                >
+                  操作
+                </div>
+              </div>
+              <draggable
+                v-model="tableData"
+                chosenClass="chosen"
+                ghostClass="ghost"
+                forceFallback="true"
+                group="task"
+                animation="500"
+                @start="onStart"
+                @end="onEnd"
+              >
+                <template #item="{ element }">
+                  <div
+                    style="
+                      height: 50px;
+                      display: flex;
+                      justify-content: space-between;
+                      align-items: center;
+                      border-bottom: 1px solid #f2f6fc;
+                      font-size: 14px;
+                      font-weight: 400;
+                      color: #4f5156;
+                      line-height: 36px;
+                    "
+                    class="tableRow"
+                  >
+                    <div
+                      style="
+                        width: 87px;
+                        text-align: center;
+                        margin-left: 46px;
+                        position: relative;
+                      "
+                    >
+                      <div class="racona">
+                        <div
+                          class="img"
+                          style="
+                            cursor: pointer;
+                            margin-top: 2px;
+                            margin-right: 9px;
+                            position: absolute;
+                            left: -25px;
+                          "
+                        ></div>
+                        <a-checkbox
+                          :id="element.id"
+                          v-model:checked="element.checked"
+                          @change="changeRow"
+                        >
+                        </a-checkbox>
+                        <div style="margin-top: 2px; margin-left: 8px">
+                          {{ element.lei }}
+                        </div>
+                      </div>
+                    </div>
+                    <div style="width: 120px; text-align: center">
+                      {{ element.creater }}
+                    </div>
+                    <div style="width: 120px; text-align: center">
+                      <div class="opat">
+                        <div class="opacationt clearfix">
+                          <a-switch
+                            style="margin-left: -50px; margin-top: 3px"
+                            :checked="element.checked1"
+                            size="small"
+                            active-color="red"
+                            @click="changeCourseType(element.id)"
+                          />
+                          <div class="showt clearfix">
+                            <div
+                              class="bi"
+                              :style="{
+                                'z-index': element.checked1 ? 999 : 998,
+                              }"
+                            >
+                              必修
+                            </div>
+                            <div class="xuan">选修</div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div style="width: 87px; text-align: center">
+                      {{ element.cretime }}分钟
+                    </div>
+                    <div
+                      style="
+                        width: 120px;
+                        text-align: center;
+                        margin-right: 20px;
+                      "
+                    >
+                      <div class="opa">
+                        <div class="opacation">
+                          <span
+                            style="
+                              color: #4ea6ff;
+                              margin-right: 25px;
+                              cursor: pointer;
+                            "
+                          >
+                            编辑
+                          </span>
+                          <span
+                            style="color: #4ea6ff; cursor: pointer"
+                            @click="showDelete(element.id)"
+                          >
+                            删除
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </template>
+              </draggable>
+              
+            <!-- <a-table
               style="border: 1px solid #f2f6fe"
               :columns="tableDataFunc()"
               :data-source="tableData"
@@ -331,7 +536,7 @@
                 selectedRowKeys: selectedRowKeys,
                 onChange: onSelectChange,
               }"
-            />
+            /> -->
           </div>
           <!-- 无数据样式 -->
           <div class="notable" :style="{ display: stm_hs ? 'block' : 'none' }">
@@ -630,6 +835,7 @@ import * as api from "../../api/indexLevel";
 import { GetRouterDetail, RouterDeleteTask } from "../../api/indexTask";
 import { message } from "ant-design-vue";
 import { storage } from "../../api/storage";
+import draggable from "vuedraggable";
 export default {
   name: "LevelAddDetail",
   components: {
@@ -644,6 +850,7 @@ export default {
     AddVote,
     AddLive,
     AddRef,
+    draggable,
   },
   setup() {
     const state = reactive({
@@ -874,6 +1081,8 @@ export default {
       updateChapterID: null, //修改关卡id
       // 表示当前触发列表的id,用来发送编辑和删除
       ListChoosedId: 0,
+       selectRow: [], //选择行
+      selectAll: 0, //0：未选择，1：全选，2：部分选择
     });
     const showDrawerAddDiscuss = () => {
       state.adddiscussvisible = true;
@@ -957,8 +1166,12 @@ export default {
     // tableData数据赋值方法
     const dataAssignment = (id) => {
       console.log(state.level);
-      state.level[id].taskList.forEach((element, index) => {
+      for(let i=0;i<state.level.length;i++){
-        state.tableData[index] = {
+if(state.level[i].chapterId===id){
+  let array=[]
+state.level[i].taskList.forEach((element, ) => {
+        let obj = {
+          id: element.routerTaskId,
           key: element.routerTaskId,
           lei: checkType(element.type),
           creater: element.name,
@@ -966,15 +1179,21 @@ export default {
           checked1: element.flag,
           routerTaskId: element.routerTaskId,
         };
+        array.push(obj)
       });
+      state.tableData=array
+}
+      }
+      
     };
     const getDetail = (index) => {
       GetRouterDetail(state.routerId)
         .then((res) => {
           state.level = res.data.data.chapterList;
           console.log(state.level);
-          if (index == 0) {
+          if (index == 0&&state.level.length>0) {
-            dataAssignment(0);
+            dataAssignment(state.level[0].chapterId);
+            state.isactive=state.level[0].chapterId
           }
           state.deleteModal = false;
         })
@@ -1340,9 +1559,11 @@ export default {
       document.getElementsByTagName("main")[0].style.boxShadow =
         "0px 1px 35px 0px rgba(118, 136, 166, 0.07)";
     });
-    const changebgc = (index) => {
+    const changebgc = (chapterId) => {
-      state.isactive = index;
+      state.isactive = chapterId;
-      dataAssignment(index);
+       state.selectRow= [], //选择行
+      state.selectAll=0, //0：未选择，1：全选，2：部分选择
+      dataAssignment(chapterId);
     };
     const gqxy_hShow = () => {
       state.gqxy_hs = !state.gqxy_hs;
@@ -1390,6 +1611,58 @@ export default {
       getDetail(0);
     };
 
+
+ //选择单个任务
+    const changeRow = (e) => {
+      //selectRow:已经选择的任务的id数组
+      let arr = state.selectRow;
+      if (e.target.checked) {
+        arr.push(e.target.id);
+      } else {
+        arr.map((value, index) => {
+          if (value == e.target.id) {
+            arr.splice(index, 1);
+          }
+        });
+      }
+      state.selectRow = arr;
+      //判断是否是全部选择或者是全部未选择来修改selectAll框的样式
+      if (arr.length !== 0) {
+        if (arr.length === state.tableData.length) {
+          state.selectAll = 1;
+        } else {
+          state.selectAll = 2;
+        }
+      } else {
+        state.selectAll = 0;
+      }
+      console.log("state.selectRow", state.selectRow, state.selectAll);
+    };
+    //全选任务或全不选任务
+    const selectRowAll = () => {
+      let arr = state.tableData;
+      let array = [];
+      if (state.selectAll === 0 || state.selectAll === 2) {
+        arr.map((value) => {
+          // console.log("value", value, index);
+          value.checked = true;
+          array.push(value.id);
+          // if (value == e.target.id) {
+          //   arr.splice(index, 1);
+          // }
+          state.selectAll = 1;
+        });
+      } else {
+        array = [];
+        arr.map((value) => {
+          // console.log("value", value, index);
+          value.checked = false;
+          state.selectAll = 0;
+        });
+      }
+      state.tableData = arr;
+      state.selectRow = array;
+    };
     return {
       ...toRefs(state),
       tableDataFunc,
@@ -1423,6 +1696,8 @@ export default {
       clearEditData,
       showDrawerAddDiscuss,
       showDrawerAddActive,
+      selectRowAll,
+      changeRow,
     };
   },
 };
@@ -1818,6 +2093,13 @@ export default {
         display: flex;
         flex-direction: column;
         align-items: center;
+         .chosen {
+          // background-color: pink;
+        }
+        .ghost {
+          // background-color: red;
+          opacity: 0 !important;
+        }
         .items {
           width: 171px;
           // height: 83px;
@@ -1877,7 +2159,7 @@ export default {
         }
         .active {
           opacity: 1;
-          transition: all 0.5s;
+          // transition: all 0.5s;
         }
       }
     }
@@ -2102,6 +2384,14 @@ export default {
         .tableBox {
           margin-top: 21px;
           margin-bottom: 20px;
+           .chosen {
+              background-color: #f2f6fc;
+              opacity: 1;
+            }
+            .ghost {
+              // background-color: red;
+              opacity: 0;
+            }
           .classify {
             margin-left: 10px !important;
             padding-left: 9px !important;
@@ -2515,6 +2805,7 @@ export default {
         display: flex;
         margin-left: 10px;
         height: 23px;
+        position: relative;
         .bi {
           // margin-top: 10px;
           width: 63px;

src/views/projectcenter/TaskAdd.vue

@@ -2818,6 +2818,7 @@ export default {
         display: flex;
         margin-left: 10px;
         height: 23px;
+         position: relative;
         .bi {
           // margin-top: 10px;
           width: 63px;