feat:修改删除弹窗

src/components/student/TableStudent.vue

@@ -354,14 +354,45 @@
     :courseId="id"
     :courseType="type"
   />
+
+  <!-- 有重复添加的项目时的弹窗 -->
+  <a-modal
+    v-model:visible="deleteModalVisible"
+    :footer="null"
+    wrapClassName="deleteModal"
+    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="closeSameModal"></div>
+        </div>
+        <div class="body">
+          <span>确定删除?</span>
+          <span>数据删除后不可恢复！</span>
+        </div>
+        <div class="del_btnbox">
+          <div class="del_btn btn1" @click="closeSameModal">
+            <div class="btnText">取消</div>
+          </div>
+          <div class="del_btn btn2" @click="sureSameModal">
+            <div class="btnText">确定</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </a-modal>
 </template>
 <script setup>
-import { computed, createVNode, defineProps, onMounted, ref, watch } from "vue";
+import { computed, defineProps, onMounted, ref, watch } from "vue";
 import { delStudentList, getStuPage, batchUpdateStatus } from "@/api/index1";
 import ChangeGroupModal from "@/components/student/ChangeGroupModal.vue";
 import CommonStudent from "@/components/student/CommonStudent";
 import ChangeLevelModal from "./ChangeLevelModal.vue";
-import { message, Modal } from "ant-design-vue";
+import { message } from "ant-design-vue";
 // import { topStudent } from "../../api/indexProjStu";
 import SeeStu from "../../components/drawers/SeeStu";
 import EScore from "../drawers/ExportScore.vue";
@@ -369,7 +400,7 @@ import OrgClass from "@/components/project/OrgClass";
 import ExportHomeWork from "../Modals/ExportHomeWork.vue";
 import * as api from "../../api/index1";
 import ImpStu from "../drawers/AddLevelImportStu";
-import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
+// import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
 import { checkPer } from "@/utils/utils";
 
 const props = defineProps({
@@ -581,7 +612,7 @@ function exportTaskStuRouter() {
 
 onMounted(() => {
   // debugger
-  console.log("props.activeKey1" + props.activeKey1)
+  console.log("props.activeKey1" + props.activeKey1);
   getStuList();
 });
 watch(props.isgetStudent, () => {
@@ -652,26 +683,42 @@ function bathDel() {
   delStudentList({ ids: stuSelectKeys.value }).then(() => getStuList());
 }
 
+const deleteModalVisible = ref(false);
+const deleteId = ref(null);
 function del(id, row) {
   if (row.isLeader === "1") {
     return message.warning("" + row.name + "是小组长，请勿删除!");
   }
-
+  deleteModalVisible.value = true;
-  Modal.confirm({
+  deleteId.value = id;
-    title: () => "确定删除?",
+  // Modal.confirm({
-    icon: () => createVNode(ExclamationCircleOutlined),
+  //   title: () => "确定删除?",
-    content: () => "数据删除后不可恢复！",
+  //   icon: () => createVNode(ExclamationCircleOutlined),
-    okText: () => "确定",
+  //   content: () => "数据删除后不可恢复！",
-    okType: "danger",
+  //   okText: () => "确定",
-    cancelText: () => "取消",
+  //   okType: "danger",
-    onOk() {
+  //   class: "deleteModal",
-      if (id) {
+  //   cancelText: () => "取消",
+  //   onOk() {
+  //     if (id) {
+  //       tableData.value.loading = true;
+  //       delStudentList({ ids: [id] }).then(() => getStuList());
+  //     }
+  //   },
+  // });
+}
+//确定删除
+const sureSameModal = () => {
+  if (deleteId.value) {
     tableData.value.loading = true;
-        delStudentList({ ids: [id] }).then(() => getStuList());
+    delStudentList({ ids: [deleteId.value] }).then(() => getStuList());
-      }
+    deleteModalVisible.value = false;
-    },
-  });
   }
+};
+//取消
+const closeSameModal = () => {
+  deleteModalVisible.value = false;
+};
 
 function submitCall(flag) {
   tableData.value.loading = true;
@@ -1022,6 +1069,132 @@ defineExpose({ getStuList, startLoading });
   }
 }
 
+.deleteModal {
+  .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/taskpage/gan.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;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
 /*.delete {
   z-index: 9999;
   width: 424px;