feat:换组和取消学员

src/components/drawers/ChangeGroup.vue

@@ -0,0 +1,164 @@
+<template>
+  <a-drawer
+    :visible="Changevisible"
+    class="drawerStyle changegroup"
+    placement="right"
+    width="50%"
+    @after-visible-change="afterVisibleChange"
+  >
+    <div class="drawerMain">
+      <div class="header">
+        <div class="headerTitle">学员换组</div>
+        <img
+          style="width: 29px; height: 29px; cursor: pointer"
+          src="../../assets/images/basicinfo/close.png"
+          @click="closeDrawer"
+        />
+      </div>
+      <div class="main">
+         <div class="onerow">将此学员移动到</div>
+         <div class="secondrow">
+            <a-select
+                v-model:value="value"
+                style="width: 264px;border-radius: 8px"
+                placeholder="好好学习"
+                :options="stugroupList"
+            />
+         </div>
+      </div>
+      <div class="btnn">
+        <button class="btn1">取消</button>
+        <button class="btn2">确定</button>
+      </div>
+    </div>
+  </a-drawer>
+  
+</template>
+
+<script>
+import { reactive, toRefs } from "vue";
+export default {
+  name: "ChangeGroup",
+  props: {
+    Changevisible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, ctx) {
+    const state = reactive({
+        stugroupList: [
+            {
+                id: "1",
+                value: "好好学习",
+                label: "好好学习",
+            },
+            {
+                id: "2",
+                value: "天天向上",
+                label: "天天向上",
+            },
+            {
+                id: "3",
+                value: "好好学习",
+                label: "好好学习",
+            },
+        ],
+    });
+    const closeDrawer = () => {
+      ctx.emit("update:Changevisible", false);
+    };
+
+    const afterVisibleChange = (bool) => {
+      console.log("state", bool);
+    };
+
+    return {
+      ...toRefs(state),
+      afterVisibleChange,
+      closeDrawer,
+      // change,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss" >
+.changegroup {
+  
+  .drawerMain {
+    min-width: 600px;
+    margin: 0px 32px 0px 32px;
+    overflow-x: scroll;
+    display: flex;
+    flex-direction: column;
+    .header {
+      height: 73px;
+      border-bottom: 1px solid #e8e8e8;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      // background-color: red;
+      margin-bottom: 20px;
+      .headerTitle {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333333;
+        line-height: 25px;
+        // margin-left: 24px;
+      }
+    }
+    .main {
+        .onerow {
+            margin: 32px 0 32px 24px;
+            color: rgba(51, 51, 51, 1);
+            font-size: 16px;
+        }
+        .secondrow {
+            margin-left: 24px;
+            .ant-select {
+                height: 40px;
+              }
+              .ant-select-selector {
+                height: 100%;
+                border-radius: 8px;
+              }
+              .ant-select-selection-search-input {
+                height: 40px;
+                
+              }
+        }
+    }
+    .btnn {
+      height: 72px;
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
+      .btn1 {
+        width: 100px;
+        height: 40px;
+        border: 1px solid #4ea6ff;
+        border-radius: 8px;
+        color: #4ea6ff;
+        background-color: #fff;
+        cursor: pointer;
+      }
+      .btn2 {
+        cursor: pointer;
+        width: 100px;
+        height: 40px;
+        background: #4ea6ff;
+        border-radius: 8px;
+        border: 0;
+        margin-left: 15px;
+        color: #fff;
+      }
+    }
+  }
+}
+</style>

src/views/projectcenter/TaskPage.vue

@@ -532,7 +532,7 @@
                     <img src="../../assets/images/courseManage/reset2.png" />
                     <span class="btn2text">导入学员</span>
                   </div>
-                  <div class="btn2">
+                  <div class="btn2" >
                     <img src="../../assets/images/projectadd/delete.png" />
                     <span class="btn2text">批量删除</span>
                   </div>
@@ -1047,6 +1047,8 @@
     <import-stu v-model:Importvisible="Importvisible" />
     <!-- 查看学员 -->
     <see-stu v-model:Seevisible="Seevisible" />
+     <!-- 学员换组 -->
+    <change-group v-model:Changevisible="Changevisible" />
     <!-- 组员名单抽屉 -->
     <member-list v-model:Lvisible="Lvisible" />
     <!-- 面授学员抽屉 -->
@@ -1153,11 +1155,7 @@
             display: flex;
             align-items: center;
             justify-content: space-between;
-            background: linear-gradient(
-              0deg,
-              rgba(78, 166, 255, 0) 0%,
-              rgba(78, 166, 255, 0.2) 100%
-            );
+            
           "
         >
           <div class="headerLeft" style="margin-left: 32px">
@@ -1211,6 +1209,38 @@
       </a-modal>
     </div>
     <!-- 学员-创建小组弹窗 -->
+    <!-- 取消学员弹窗 -->
+    <div>
+      <a-modal
+      v-model:visible="canclestu"
+      :footer="null"
+      :closable="close"
+      wrapClassName="canclestu"
+      centered="true"
+    >
+      <div class="delete">
+        <div class="del_header"></div>
+        <div class="del_main">
+          <div class="header">
+            <div class="icon"></div>
+            <span>提示</span>
+          </div>
+          <div class="body">
+            <span>您是否授予此学员优秀学员称号？</span>
+          </div>
+          <div class="del_btnbox">
+            <div class="del_btn btn1">
+              <div class="btnText" @click="closeModal1">取消</div>
+            </div>
+            <div class="del_btn btn2">
+              <div class="btnText" @click="closeModal1">确定</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-modal>
+    </div>
+    <!-- 取消学员弹窗 -->
   </div>
 </template>
   <script>
@@ -1226,6 +1256,7 @@ import TestManage from "../../components/drawers/TestManage";
 import StuAdd from "../../components/drawers/StuAdd";
 import ImportStu from "../../components/drawers/ImportStu";
 import SeeStu from "../../components/drawers/SeeStu";
+import ChangeGroup from "../../components/drawers/ChangeGroup";
 export default {
   name: "taskPage",
   components: {
@@ -1240,6 +1271,7 @@ export default {
     StuAdd,
     ImportStu,
     SeeStu,
+    ChangeGroup,
   },
   setup() {
     const state = reactive({
@@ -1406,9 +1438,11 @@ export default {
       TMvisible: false, //考试管理
       Stuvisible: false, //添加学员
       Importvisible: false, //导入学员
-      Seevisible: true, //查看学员
+      Seevisible: false, //查看学员
+      Changevisible: false, //学员换组
       pubproject: false,
       stugroup: false,
+      canclestu: false,
       checked: false,
       checked1: true,
       checked2: false,
@@ -1749,6 +1783,12 @@ export default {
     const closeModal = () => {
       state.pubproject = false;
     };
+    const showModal1 = () => {
+      state.canclestu = true;
+    };
+    const closeModal1 = () => {
+      state.canclestu = false;
+    };
     const showModal2 = () => {
       state.stugroup = true;
     };
@@ -1800,6 +1840,9 @@ export default {
     const showImportStu = () => {
       state.Importvisible = true;
     };
+    const showChangeGroup = () => {
+      state.Changevisible = true;
+    };
     const changecheck2 = () => {
       state.checkedd = !state.checkedd;
     };
@@ -1810,6 +1853,8 @@ export default {
       ...toRefs(state),
       showModal,
       closeModal,
+      showModal1,
+      closeModal1,
       showModal2,
       closeModal2,
       showTime,
@@ -1825,6 +1870,7 @@ export default {
       showStuAdd,
       showImportStu,
       showSeeStu,
+      showChangeGroup,
     };
   },
 };
@@ -1979,9 +2025,132 @@ export default {
     }
   }
 }
+.canclestu {
+  .ant-modal {
+    width: 424px !important;
+    height: 258px !important;
+    .ant-modal-content {
+      width: 424px !important;
+      height: 258px !important;
+      .ant-modal-close {
+          margin-right: 18px;
+          margin-top: 5px;
+        }
+      .ant-modal-body {
+        width: 424px !important;
+        height: 258px !important;
+        padding: 0 !important;
+        
+        .delete {
+          z-index: 999;
+          width: 424px;
+          height: 258px;
+          background: #ffffff;
+          box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
+          border-radius: 4px;
+          // position: absolute;
+          // left: 50%;
+          // top: 10%;
+          // transform: translate(-50%, -50%);
+          .del_header {
+            position: absolute;
+            width: calc(100%);
+            height: 68px;
+            background: linear-gradient(
+              rgba(78, 166, 255, 0.2) 0%,
+              rgba(78, 166, 255, 0) 100%
+            );
+          }
+          .del_main {
+            width: 100%;
+            position: relative;
+            .header {
+              display: flex;
+              align-items: center;
+              padding-top: 20px;
+              padding-left: 26px;
+              font-size: 16px;
+              .icon {
+                width: 16px;
+                height: 16px;
+                margin-right: 10px;
+                background-image: url(@/assets/images/coursewareManage/notice.png);
+                background-size: 100% 100%;
+              }
+              .close_exit {
+                position: absolute;
+                right: 42px;
+                cursor: pointer;
+                width: 20px;
+                height: 20px;
+                background-image: url(@/assets/images/coursewareManage/close.png);
+                background-size: 100% 100%;
+              }
+            }
+            .body {
+              width: 100%;
+              margin: 34px auto 56px auto;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              flex-direction: column;
+              // background-color: red;
+              position: relative;
+              .back {
+                position: absolute;
+                top: 30px;
+                font-size: 12px;
+                font-weight: 400;
+                color: #666666;
+              }
+            }
+            .del_btnbox {
+              display: flex;
+              margin: 30px auto;
+              justify-content: center;
+              .del_btn {
+                width: 100px;
+                height: 40px;
+                background: rgba(64, 158, 255, 0);
+                border-radius: 8px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                flex-shrink: 0;
+                cursor: pointer;
+                .btnText {
+                  font-size: 14px;
+                  font-weight: 400;
+                  line-height: 40px;
+                }
+              }
+              .btn1 {
+                border: 1px solid rgba(64, 158, 255, 1);
+                color: #4ea6ff;
+                margin-right: 14px;
+              }
+              .btn2 {
+                background-color: #4ea6ff;
+                color: #ffffff;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
 .doublepro {
   .ant-modal {
     .ant-modal-body {
+      .modalHeader {
+        background: linear-gradient(
+              0deg,
+              rgba(78, 166, 255, 0) 0%,
+              rgba(78, 166, 255, 0.2) 100%
+            );
+      }
       padding: 0;
       .modalMain {
         display: flex;