feat:面授学员导入,签到签退

src/components/drawers/FaceStu.vue

@@ -78,12 +78,12 @@
         <div class="btnss" style="margin-top: 20px">
           <div class="btn btn1" style="margin-right: 20px">
             <div class="img1"></div>
-            <div class="wz">导入学员</div>
+            <div class="wz" @click="showImpStu">导入学员</div>
           </div>
-          <div class="btn btn2">
+          <div class="btn btn2" @click="showCopyModal">
             <div class="wz">批量签到</div>
           </div>
-          <div class="btn btn2">
+          <div class="btn btn2" @click="showStopModal">
             <div class="wz" @click="showEntryScore">批量签退</div>
           </div>
           <div class="btn btn2">
@@ -149,12 +149,76 @@
       <button class="btn2">确定</button>
     </div>
   </a-drawer>
+  <!-- 导入学员抽屉 -->
+      <imp-stu v-model:AddImpStuvisible="AddImpStuvisible" />
+    <!-- 批量签到弹窗 -->
+    <a-modal
+      v-model:visible="copyModal"
+      :footer="null"
+      :closable="closeCopy"
+      wrapClassName="CopyModal"
+      centered="true"
+    >
+      <div class="delete">
+        <div class="del_header"></div>
+        <div class="del_main">
+          <div class="header">
+            <div class="icon"></div>
+            <span>提示</span>
+            <div class="close_exit" @click="closeCopyModal"></div>
+          </div>
+          <div class="body">
+            <span>您确定要批量签到吗</span>
+          </div>
+          <div class="del_btnbox">
+            <div class="del_btn btn1">
+              <div class="btnText" @click="delete_exit">取消</div>
+            </div>
+            <div class="del_btn btn2">
+              <div class="btnText" @click="delete_exit">确定</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-modal>
+    <!-- 批量签退弹窗 -->
+    <a-modal
+      v-model:visible="stopModal"
+      :footer="null"
+      :closable="closeStop"
+      wrapClassName="CopyModal"
+      centered="true"
+    >
+      <div class="delete">
+        <div class="del_header"></div>
+        <div class="del_main">
+          <div class="header">
+            <div class="icon"></div>
+            <span>提示</span>
+            <div class="close_exit" @click="closeStopModal"></div>
+          </div>
+          <div class="body">
+            <span>您确定要批量签退吗</span>
+          </div>
+          <div class="del_btnbox">
+            <div class="del_btn btn1">
+              <div class="btnText" @click="delete_exit">取消</div>
+            </div>
+            <div class="del_btn btn2">
+              <div class="btnText" @click="delete_exit">确定</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-modal>
 </template>
 
 <script>
 import { toRefs, reactive } from "vue";
+import ImpStu from "../../components/drawers/AddLevelImportStu";
 export default {
   name: "FaceManage",
+  components: { ImpStu },
   props: {
     FSvisible: {
       type: Boolean,
@@ -165,6 +229,11 @@ export default {
   setup(props, ctx) {
     const state = reactive({
       Evisible: false, //录入成绩抽屉
+      AddImpStuvisible: false, //导入学员抽屉
+      copyModal: false, //批量签到弹窗
+      closeCopy: false, //签到弹窗关闭图标
+      stopModal: false, //签退弹窗
+      closeStop: false, //签退弹窗关闭图标
       name: null,
       showmodal: false, //勾选提示框
       closable: false, //modal右上角的关闭按钮
@@ -346,7 +415,21 @@ export default {
     const closeDrawer = () => {
       ctx.emit("update:FSvisible", false);
     };
-
+    const showImpStu = () => {
+      state.AddImpStuvisible = true;
+    };
+    const showCopyModal = () => {
+      state.copyModal = true;
+    };
+    const closeCopyModal = () => {
+      state.copyModal = false;
+    };
+    const showStopModal = () => {
+      state.stopModal = true;
+    };
+    const closeStopModal = () => {
+      state.stopModal = false;
+    };
     const showEntryScore = () => {
       state.Evisible = true;
     };
@@ -498,6 +581,11 @@ export default {
       showEntryScore,
       tableDataFunc,
       getTableData,
+      showImpStu,
+      showCopyModal,
+      closeCopyModal,
+      showStopModal,
+      closeStopModal,
     };
   },
 };
@@ -509,7 +597,117 @@ export default {
     padding: 0px;
   }
 }
+.CopyModal {
+  .ant-modal {
+    width: 424px !important;
+    height: 258px !important;
+    .ant-modal-content {
+      width: 424px !important;
+      height: 258px !important;
+      .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/QR.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;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
 .largeDrawerStyle {
   // width: 80%;
   .ant-drawer-content-wrapper {