From 2d683472c17fb629df801f7406b465ecce489bb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=99=93=E9=B8=BD?= <lixg@dongwu-inc.com>
Date: Thu, 3 Nov 2022 21:10:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=A2=9E=E5=8A=A0=E9=98=B6=E6=AE=B5?=
 =?UTF-8?q?=E5=8F=8A=E4=BB=BB=E5=8A=A1=E5=88=97=E8=A1=A8=E6=8B=96=E6=8B=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/OpenPages.vue              |  13 +-
 src/views/learningpath/LevelAddDetail.vue |  10 +-
 src/views/projectcenter/TaskAdd.vue       | 275 +++++++++++++++++++---
 3 files changed, 259 insertions(+), 39 deletions(-)

diff --git a/src/components/OpenPages.vue b/src/components/OpenPages.vue
index 02374b62..09209b3e 100644
--- a/src/components/OpenPages.vue
+++ b/src/components/OpenPages.vue
@@ -4,8 +4,9 @@
       v-model="openList"
       chosenClass="chosen"
       forceFallback="true"
-      group="people"
-      animation="1000"
+      ghostClass="ghost"
+      group="openPage"
+      animation="500"
       @start="onStart"
       @end="onEnd"
       :list="openList"
@@ -121,5 +122,13 @@ export default {
   .close:hover {
     background: rgba(220, 220, 220, 1);
   }
+
+  .chosen {
+    // background-color: pink;
+  }
+  .ghost {
+    // background-color: red;
+    opacity: 0;
+  }
 }
 </style>
diff --git a/src/views/learningpath/LevelAddDetail.vue b/src/views/learningpath/LevelAddDetail.vue
index 3c059db9..dc8aa688 100644
--- a/src/views/learningpath/LevelAddDetail.vue
+++ b/src/views/learningpath/LevelAddDetail.vue
@@ -238,7 +238,10 @@
             <div class="text">测评</div>
             <!-- 添加测评侧弹窗 -->
             <div>
-              <add-eval v-model:addevalVisible="addevalvisible" v-model:edit="edit" />
+              <add-eval
+                v-model:addevalVisible="addevalvisible"
+                v-model:edit="edit"
+              />
             </div>
             <!-- 添加测评侧弹窗 -->
           </div>
@@ -770,7 +773,7 @@ export default {
       value1: "",
       value2: "",
       selectedRowKeys: [],
-      edit:false, //是否点击编辑
+      edit: false, //是否点击编辑
       gqxy_hs: true,
       isactive: 0,
       projectChecked: null, //项目单选框
@@ -865,6 +868,7 @@ export default {
         };
       });
     };
+
     const getDetail = (index) => {
       GetRouterDetail(92)
         .then((res) => {
@@ -1009,7 +1013,7 @@ export default {
                 <div class="opacation">
                   <span
                     style="color:#4EA6FF;margin-right:25px;cursor:pointer"
-                    onClick={()=>{
+                    onClick={() => {
                       state.edit = true;
                       state.addevalvisible = true;
                     }}
diff --git a/src/views/projectcenter/TaskAdd.vue b/src/views/projectcenter/TaskAdd.vue
index 273f7261..ac0efd84 100644
--- a/src/views/projectcenter/TaskAdd.vue
+++ b/src/views/projectcenter/TaskAdd.vue
@@ -15,25 +15,39 @@
           <div class="btnText">添加阶段</div>
         </div>
         <div class="maincon" style="background-color: #fff">
-          <div
-            class="item"
-            :class="isactive == index && isActive == true ? 'bgcactive' : ''"
-            v-for="(item, index) in level"
-            @click="changebgc(index)"
-            :key="item.id"
+          <draggable
+            v-model="level"
+            chosenClass="chosen"
+            ghostClass="ghost"
+            forceFallback="true"
+            group="stage"
+            animation="500"
+            @start="onStart"
+            @end="onEnd"
+            :list="level"
           >
-            <div class="itemle">
-              <div class="tit">{{ item.tit }}</div>
-              <div class="name">{{ item.name }}</div>
-            </div>
-            <div class="itemri">
-              <img src="../../assets/images/leveladd/z1.png" />
-              <img
-                style="margin-top: 40px"
-                src="../../assets/images/leveladd/z2.png"
-              />
-            </div>
-          </div>
+            <template #item="{ element }">
+              <div
+                class="item"
+                :class="
+                  isactive == index && isActive == true ? 'bgcactive' : ''
+                "
+                @click="changebgc(index)"
+              >
+                <div class="itemle">
+                  <div class="tit">{{ element.tit }}</div>
+                  <div class="name">{{ element.name }}</div>
+                </div>
+                <div class="itemri">
+                  <img src="../../assets/images/leveladd/z1.png" />
+                  <img
+                    style="margin-top: 40px"
+                    src="../../assets/images/leveladd/z2.png"
+                  />
+                </div>
+              </div>
+            </template>
+          </draggable>
         </div>
       </div>
     </div>
@@ -207,7 +221,10 @@
           </div>
           <!-- 添加活动侧弹窗 -->
           <div>
-            <add-active v-model:addactiveVisible="addactivevisible"  @changeData="updateTableData"/>
+            <add-active
+              v-model:addactiveVisible="addactivevisible"
+              @changeData="updateTableData"
+            />
           </div>
           <!-- 添加活动侧弹窗 -->
           <div class="lin"></div>
@@ -221,8 +238,10 @@
           </div>
           <!-- 添加测评侧弹窗 -->
           <div>
-            <add-eval v-model:addevalVisible="addevalvisible" 
-            @changeData="updateTableData"/>
+            <add-eval
+              v-model:addevalVisible="addevalvisible"
+              @changeData="updateTableData"
+            />
           </div>
           <!-- 添加测评侧弹窗 -->
           <div class="lin"></div>
@@ -236,8 +255,10 @@
           </div>
           <!-- 添加评估侧弹窗 -->
           <div>
-            <add-invist v-model:addinvistVisible="addinvistvisible" 
-            @changeData="updateTableData"/>
+            <add-invist
+              v-model:addinvistVisible="addinvistvisible"
+              @changeData="updateTableData"
+            />
           </div>
           <!-- 添加评估侧弹窗 -->
           <div class="lin"></div>
@@ -250,8 +271,10 @@
             <div class="text">投票</div>
             <!-- 添加投票侧弹窗 -->
             <div>
-              <add-vote v-model:addvoteVisible="addvotevisible" 
-              @changeData="updateTableData"/>
+              <add-vote
+                v-model:addvoteVisible="addvotevisible"
+                @changeData="updateTableData"
+              />
             </div>
             <!-- 添加投票侧弹窗 -->
           </div>
@@ -300,8 +323,155 @@
                 <span class="yi">条</span>
               </div>
             </div> -->
-            <div class="tableBox">
-              <a-table
+            <div class="tableBox" style="border: 1px solid #f2f6fc">
+              <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;
+                  "
+                >
+                  <a-checkbox :checked="selectRow.length !== 0 ? true : false">
+                  </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"
+                :list="tableData"
+              >
+                <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="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"
+                          />
+                          <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">
+                            删除
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </template>
+              </draggable>
+              <!-- <a-table
                 style="border: 1px solid #f2f6fe"
                 :columns="tableDataFunc()"
                 :data-source="tableData"
@@ -314,7 +484,7 @@
                   selectedRowKeys: selectedRowKeys,
                   onChange: onSelectChange,
                 }"
-              />
+              /> -->
 
               <!-- <div class="pa">
                 <a-pagination
@@ -564,6 +734,7 @@ import * as apieval from "../../api/indexEval";
 import * as apiinvist from "../../api/indexInvist";
 import * as apivote from "../../api/indexVote";
 import * as apistage from "../../api/indexStage";
+import draggable from "vuedraggable";
 const drawercolumns = [
   {
     title: "项目名称",
@@ -605,6 +776,7 @@ const drawercolumns = [
 export default {
   name: "TaskAdd",
   components: {
+    draggable,
     AddOnline,
     EditOnline,
     AddFaceteach,
@@ -798,6 +970,7 @@ export default {
       deleteDiscussID: null, //删除讨论id
       deleteActivityID: null, //删除活动id
       deleteID: "",
+      selectRow: [], //选择行
     });
     const selectProjectName = (value, index) => {
       console.log("value", value, index);
@@ -1492,6 +1665,22 @@ export default {
       state.isActive = !state.isActive;
     };
 
+    //选择表格
+    const changeRow = (e) => {
+      console.log("选择行", e);
+      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;
+      console.log("state.selectRow", state.selectRow);
+    };
     return {
       ...toRefs(state),
       selectProjectName,
@@ -1542,6 +1731,7 @@ export default {
       deleteTask,
       editStage,
       updateTableData,
+      changeRow,
     };
   },
 };
@@ -1932,6 +2122,13 @@ export default {
         display: flex;
         flex-direction: column;
         align-items: center; // background-color: #bfa;
+        .chosen {
+          // background-color: pink;
+        }
+        .ghost {
+          // background-color: red;
+          opacity: 0 !important;
+        }
         .item {
           width: 171px;
           height: 83px;
@@ -2320,6 +2517,20 @@ export default {
           .tableBox {
             padding-bottom: 20px;
             margin-top: 20px;
+            .chosen {
+              background-color: #f2f6fc;
+              opacity: 1;
+            }
+            .ghost {
+              // background-color: red;
+              opacity: 0;
+            }
+            .tableRow:hover {
+              background-color: #f2f6fc;
+            }
+            //  .tableRow: {
+            //     background-color: #f2f6fc;
+            //   }
             .classify {
               margin-left: 10px !important;
               padding-left: 9px !important;
@@ -2411,19 +2622,15 @@ export default {
     }
   }
   .racona {
-    // background-color: #bfa;
     display: flex;
     align-items: center;
-    // justify-content: center;
     height: 100%;
     .img {
-      // margin-left: -40px;
-      // margin-top: -2px;
       width: 17px;
       height: 14px;
       background-image: url("../../assets/images/leveladd/z1.png");
-      position: absolute;
-      left: -40px;
+      // position: absolute;
+      // left: -40px;
     }
     .ch {
       margin-left: 10px;