讲师认证

src/views/gratefulteacher/InstructorCertification.vue

@@ -4,7 +4,7 @@ import { useRoute, useRouter } from 'vue-router'
 import {getexamineList,CreateAuthentication,delExamine,getOnlineLearningList,deleteCourse,addCourse} from '@/api/examineApi.js'
 import dialog from "@/utils/dialog";
 import DropDown from "@/components/common/DropDown";
-import OwnerTableModelStudent from "@/components/student/OwnerTableModelStudent";
+import OwnerTableModelStudent from "./tablemodel";
 import CommonStudent from "@/components/student/CommonStudent";
 import CreateOnline from "@/components/drawers/CreateOnline.vue";
 import { message } from "ant-design-vue";
@@ -224,14 +224,19 @@ const onChange = (pageNo,pageSize) => {
 const ViewReviewShow =ref(null)
 
 const centerDialogVisible = ref(false)
-const SkipManagement = (id)=>{
+const SkipManagement = (id,description,time)=>{
   
   router.push({
     path: '/LecturerManagement',
     query: {id,
-    description:data.value[0].description,
+      description:description,
-    name:data.value[0].name
+      time:time
-    }
+    },
+  //   name:'LecturerManagement',
+  //   params:{
+  //     description:description,
+  //     time:time
+  // }
   })
 }
 const toLecture = (id) =>{
@@ -402,7 +407,7 @@ function handleOper(record, type, status = "") {
         <span  style="text-align: center;">
           <a style="margin-right: 7px;"  @click="editFee(record)">编辑</a>
 
-          <a style="margin-right: 7px;" @click='SkipManagement(record.id)'>管理</a>
+          <a style="margin-right: 7px;" @click='SkipManagement(record.id,record.description,record.name)'>管理</a>
 
           <a  style="margin-right: 7px;" @click="toLecture(record.id)">
           评审

src/views/gratefulteacher/LecturerManagement.vue

@@ -24,39 +24,121 @@ const formState = reactive({
   time: '',
 
 });
+//取消评审
+const CancelReview = ()=>{
+  rwname.value = null
+  formState.reviewname = ''
+  formState.time = ''
+  InitiateReviewShow.value = false;
+
+}
+const namelist = ref([])
+//表格点击时间
+const rowClick = (record) => {
+  
+  return {
+    onClick: () => {   
+      namelist.value.push(record.teacherName)
+      console.log(record);
+      console.log(namelist.value);
+      
+    },
+  }
+}
+const InitReview = () => {
+  InitiateReviewShow.value = true;
+  formState.reviewname = ''
+  formState.time = ''
+  rwname.value = null
+  addTeacherList()
+}
 const teacherid = ref(null)
 //发起评审
 const startReviewSave = async () => {
   console.log(formState.reviewname, formState.time, teacherid.value, 333333);
- await reviewSave({
+  if (formState.reviewname === '' && formState.time === '') {
+    return message.info('请填写评审名称和评审时间');
+
+  }
+
+  if (!rwname.value) {
+    reviewSave({
       "examineId": route.query.id,
       "reviewName": formState.reviewname,
       "reviewTime": formState.time,
       "teacherIds": teacherid.value
- })
+    }).then(res => {
+      console.log(res);
       message.info('添加成功');
+    
+      rwname.value = null
+
+      InitiateReviewShow.value = false
+      
+      getReviewList()
+      return
+    }).catch(err => {
+      if (err) {
+        console.log(err,'错误信息');
+        InitiateReviewShow.value = false
+        return message.info('添加失败');
+
+      }
+    })
+
+  }
+
+  if (rwname.value) {
+
+    editreview({
+      "reviewId": editId.value,
+      "reviewName": formState.reviewname,
+      "reviewTime": editTime.value,
+      "teacherIds": teacherid.value
+    }).then(res => {
+      if (res) {
+        getReviewList()
+        message.info('编辑成功');
         formState = {
           reviewname: '',
           time: '',
         };
+        rwname.value = null
         InitiateReviewShow.value = false
       }
+
+
+    })
+    // .catch(err=>{
+    //   console.log(err);
+    //     if (err) {
+    //       InitiateReviewShow.value = false
+
+    //       message.info('编辑失败');
+
+    //     }
+    // })
+
+  }
+
+
+
+}
 //编辑评审
+const editName = ref(null)
+const editId = ref(null)
+const editTime = ref(null)
 const rwname = ref(null)
 const rwtime = ref(null)
 const editReviewSave = async (name, time, id) => {
   InitiateReviewShow.value = true
   formState.reviewname = name
-//  formState.time=time
+  formState.time = time
   rwname.value = name
-await editreview({
+  editName.value = name
-    "reviewId":id,
+  editId.value = id
-    "reviewName":name,
+  editTime.value = time
-})
+  addTeacherList()
-getReviewList()
-message.info('编辑成功');
-InitiateReviewShow.value = false
-
 }
 const ViewReviewcolumns = [
   {
@@ -192,7 +274,7 @@ const res = await endreview({
   console.log(res, 99999);
   qrshow.value = res.data.show
   ViewReviewShow.value = false
-
+  getReviewList()
 }
 
 const reviewdata = ref(null);
@@ -219,7 +301,7 @@ const remould= ()=>{
   let newData = ViewReList.value["认证结果"].map((res, index) => ({
     "认证结果": res,
     "姓名": ViewReList.value["姓名"][index],
-    "评委-黄盛发10867418": ViewReList.value["评委-黄盛发10867418"][index],
+    // "评委-黄盛发10867418": ViewReList.value["评委-黄盛发10867418"][index],
     "工号": ViewReList.value["工号"][index],
     "平均分": ViewReList.value["平均分"][index]
   }));
@@ -259,13 +341,19 @@ const onChangeReview = (pageNo,pageSize) => {
   console.log(pageNo, 1111);
   getReviewList()
 };
-const reviewValue =ref(null)
+const reviewValue = ref('')
 //重置评审
 const resetReview = () => {
   getReviewList()
 }
 //搜索评审
 const searchReview = async () => {
+  //   if ( reviewValue.value.trim().length ==0) {
+  //  return  message.info('搜索内容不能为空');
+
+  //   }
+  // console.log(reviewValue.value.trim().length); 
+
   const res = await getReview({
     pageNo: ReviewPageNo.value,
     pageSize: 8,
@@ -278,9 +366,11 @@ reviewdata.value = res.data.records
 //删除教师
 const delteacherIds = async (id) => {
   await deleTeTeacher(
-    {"teacherIds": [
+    {
+      "teacherIds": [
         id
-  ]}
+      ]
+    }
   )
   console.log('sha c  sss');
   getTeacher()
@@ -490,11 +580,25 @@ const rowSelection = {
   },
 
 };
+const  teacherNames =ref([])
 const teacherRowSelection = {
   onChange: async (selectedRowKeys, selectedRows) => {
     console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
     teacherid.value = selectedRowKeys
+    console.log(selectedRows[0].teacherName,'老师名字');
+    let arr = ref([])
+    selectedRows.forEach((item,index)=>{
+      arr.value.push(item.teacherName)
+    })
+        // 使用Set数据结构进行数组去重
+        let uniqueArr = [...new Set(arr.value)];
+    console.log(uniqueArr); // 去重后的数组
     
+    selectedRows.forEach((item, index) => {
+      teacherNames.value.push(item.teacherName)
+    })
+
+    // teacherNames.value = selectedRows.teacherName
   },
 
 };
@@ -526,7 +630,7 @@ const handleMenuClick = (name,time,record)=>{
 
     title: "二维码",
     copyAble: true,
-          name: time+','+name,
+    name: time + '认证-' + name+'认证',
 
     url: `${location.protocol}//${location.host}/mobile/pages/lecturer/certification/list?reviewId=${record.id}&judgesWorkNum=${userInfo.value.userNo}`,
   });
@@ -553,7 +657,7 @@ const options1 = ref([{
   <div style="width: 100%;">
     <div class="page-top">
       <div>
-<p>认证项目名称：{{route.query.name}}认证</p>
+        <p>认证项目名称：{{ route.query.time }}</p>
         <p>具体说明：{{ route.query.description }}</p>
 
       </div>
@@ -567,12 +671,14 @@ const options1 = ref([{
     <div class="boundary"></div>
 
     <div style="width: 100%;">
-  <a-tabs v-model:activeKey="activeKey"  style="margin-right:  28px; margin-left: 6px ; display: flex;  flex-direction: column;">
+      <a-tabs v-model:activeKey="activeKey"
+        style="margin-right:  28px; margin-left: 6px ; display: flex;  flex-direction: column;">
         <a-tab-pane key="1" tab="讲师管理">
           <div style="display: flex;  flex-direction: column;">
             <div style="display: flex; align-items: center;">
               <div class="select" style="margin-left: 16px;">
-        <a-input v-model:value="value3" style="width: 270px;height: 40px;border-radius: 8px" placeholder="请输入姓名/工号" />
+                <a-input v-model:value="value3" style="width: 270px;height: 40px;border-radius: 8px"
+                  placeholder="请输入姓名/工号" />
 
               </div>
               <div class="select" style="margin-left: 15px;">
@@ -618,13 +724,17 @@ const options1 = ref([{
                   <div class="btnText" @click="AddImpStuvisible = true">导入讲师</div>
                 </div>
               </div>
-  <a-button type="primary" style="color: #fff ;background-color: #4ea6ff; width: 100px; height: 40px; border-radius: 8px;margin-left: 15px; padding-left: 10px;">导出讲师</a-button>
+              <a-button type="primary"
-  <a-button type="primary" @click="batchhandleOper()" style="width: 100px; height: 40px; border-radius: 8px;margin-left: 12px; padding-left: 10px;" ghost>批量删除</a-button>
+                style="color: #fff ;background-color: #4ea6ff; width: 100px; height: 40px; border-radius: 8px;margin-left: 15px; padding-left: 10px;">导出讲师</a-button>
+              <a-button type="primary" @click="batchhandleOper()"
+                style="width: 100px; height: 40px; border-radius: 8px;margin-left: 12px; padding-left: 10px;"
+                ghost>批量删除</a-button>
             </div>
             <!-- 表格 -->
             <div style="display: flex; flex-direction: column;margin-left: 15px">
               <div class="table">
-      <a-table :row-selection="rowSelection" row-key="id" :columns="columns" :data-source="data" :scroll="{ x: 1000 }" :pagination="false">
+                <a-table :row-selection="rowSelection" row-key="id" :columns="columns" :data-source="data"
+                  :scroll="{ x: 1000 }" :pagination="false">
                   <template #headerCell="{ column }">
                     <template v-if="column.key === 'name'">
                       <span>
@@ -680,13 +790,15 @@ const options1 = ref([{
               </div>
             </div>
             <div style="text-align: center; margin-top: 18px;">
-    <a-pagination  :showSizeChanger="false" v-model:current="current1" show-quick-jumper :total="total" @change="onChangeTeacher" />
+              <a-pagination :showSizeChanger="false" v-model:current="current1" show-quick-jumper :total="total"
+                @change="onChangeTeacher" />
             </div>
             <div style="height: 1px; width: 100%; background-color: #eceff4; margin-top: 15px;margin-left: 14px;"></div>
             <div style="margin-left: 14px; margin-top: 15px;margin-bottom: 12px;">二次认证</div>
             <div style="display: flex; flex-direction: column;margin-left: 15px">
               <div class="table">
-      <a-table :row-selection="rowSelection" row-key="id" :columns="twiceolumns" :data-source="data2" :scroll="{ x: 1000 }" :pagination="false">
+                <a-table :row-selection="rowSelection" row-key="id" :columns="twiceolumns" :data-source="data2"
+                  :scroll="{ x: 1000 }" :pagination="false">
                   <template #headerCell="{ column }">
                     <template v-if="column.key === '姓名'">
                       <span>
@@ -746,11 +858,8 @@ const options1 = ref([{
           <AddInstructor :AddSwitch="AddSwitch" @myClick="handleChildEmit"></AddInstructor>
           <proj-check-ship>
             <a-button class="cus-btn" style="background: #4ea6ff; color: #fff">
-            <template #icon
+              <template #icon><img style="margin-right: 10px"
-            ><img
+                  src="../../assets/images/courseManage/add0.png" /></template>
-              style="margin-right: 10px"
-              src="../../assets/images/courseManage/add0.png"
-            /></template>
               添加学员
             </a-button>
           </proj-check-ship>
@@ -763,12 +872,17 @@ const options1 = ref([{
           <div style="display: flex;flex-direction: column;">
             <div style="display: flex; align-items: center;justify-content: space-between;margin-left: 14px;">
               <div>
-      <a-input v-model:value="reviewValue"  style="width: 270px;height: 40px;border-radius: 8px" placeholder="请输入评审名称" />
+                <a-input ref="input" v-model:value="reviewValue" maxlength="30"
-      <a-button @click="searchReview()" type="primary" style="color: #fff ;background-color: #4ea6ff;width: 100px; height: 40px; border-radius: 8px;margin-left: 15px;">搜索</a-button>
+                  style="width: 270px;height: 40px;border-radius: 8px" placeholder="请输入评审名称" />
-      <a-button  @click="resetReview()" style="color: #fff ;background-color: #4ea6ff; width: 100px; height: 40px; border-radius: 8px;margin-left: 12px;" ghost>重置</a-button>
+                <a-button @click="searchReview()" type="primary"
+                  style="color: #fff ;background-color: #4ea6ff;width: 100px; height: 40px; border-radius: 8px;margin-left: 15px;">搜索</a-button>
+                <a-button @click="resetReview()"
+                  style="color: #fff ;background-color: #4ea6ff; width: 100px; height: 40px; border-radius: 8px;margin-left: 12px;"
+                  ghost>重置</a-button>
               </div>
               <div>
-      <a-button @click="addTeacherList(), InitiateReviewShow = true;" type="primary" style="color: #fff ;background-color: #4ea6ff;width: 100px; height: 40px; border-radius: 8px;margin-left: 15px; padding-left: 10px;">发起评审</a-button>
+                <a-button @click="InitReview()" type="primary" style="color: #fff ;background-color: #4ea6ff;width: 100px; height: 40px;
+       border-radius: 8px;margin-left: 15px; padding-left: 10px;">发起评审</a-button>
 
               </div>
 
@@ -792,78 +906,66 @@ const options1 = ref([{
                     </template>
                     <template v-else-if="column.key === 'reviewResult'">
                       <span>
-        {{ text===1?'已结束':'认证中'}}
+                        {{ record.examineResult === 1 ? '已结束' : '认证中' }}
                       </span>
                     </template>
                     <template v-else-if="column.key === 'tags'">
                       <span>
-          <a-tag
+                        <a-tag v-for="tag in record.tags" :key="tag"
-            v-for="tag in record.tags"
+                          :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'">
-            :key="tag"
-            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
-          >
                           {{ tag.toUpperCase() }}
                         </a-tag>
                       </span>
                     </template>
                     <template v-else-if="column.key === 'action'">
-        <span  style="text-align: center;">
+                      <span  style="text-align: center;display:flex;justify-content:end">
-          <a  style="margin-right: 7px;"  @click="handleMenuClick(record.reviewName,record.reviewTime.slice(0,7),record)" >二维码</a>
+                        <a v-if="record.examineResult === 0" style="margin-right: 7px;"
+                          @click="handleMenuClick(record.reviewName, record.reviewTime.slice(0, 7), record)">二维码</a>
+                          <div>
                         
-          <a style="margin-right: 7px;" @click='getreviewdetail({reviewId:record.id,examineId:route.query.id}),vwtext= record.id'>查看</a>
+                        <a style="margin-right: 7px;"
+                          @click='getreviewdetail({ reviewId: record.id, examineId: route.query.id }), vwtext = record.id'>查看</a>
 
-          <a  @click="editReviewSave(record.reviewName,record.reviewTime,record.id)" style="margin-right: 7px;">
+                        <a @click="editReviewSave(record.reviewName, record.reviewTime, record.id)"
+                          style="margin-right: 7px;">
                           编辑
                         </a>
                         <a @click="handleOperReview(record.id)" style="color: #de2139">删除</a>
+                      </div>
                       </span>
                     </template>
                   </template>
                 </a-table>
               </div>
               <div style="text-align: center; margin-top: 18px;">
-    <a-pagination v-model:current="ReviewPageNo" show-quick-jumper :total="revieTotal" @change="onChangeReview" />
+                <a-pagination v-model:current="ReviewPageNo" show-quick-jumper :total="revieTotal"
+                  @change="onChangeReview" />
               </div>
 
               <!-- 查看评审 -->
-<a-drawer v-model:visible="ViewReviewShow"
+              <a-drawer v-model:visible="ViewReviewShow" class="custom-class" :closable="false" placement="right"
-    class="custom-class"
-   
-    :closable="false"
-    placement="right"
                 width="726px">
                 <div class="header">
                   <div class="headerTitle">查看评审</div>
-          <img
+                  <img style="width: 29px; height: 29px; cursor: pointer" src="../../assets/images/basicinfo/close.png"
-            style="width: 29px; height: 29px; cursor: pointer"
+                    @click="ViewReviewShow = false" />
-            src="../../assets/images/basicinfo/close.png"
-            @click="ViewReviewShow=false"
-          />
                 </div>
                 <div style="display: flex;flex-direction: column;">
                   <div style="font-size: 16px;"> 评审名称：<span>第三场二次认证</span></div>
                   <div style="font-size: 16px;margin: 20px 0;"> 评审时间：<span>2024.05.30 14:00</span></div>
                   <div style="font-size: 16px;margin-bottom: 20px;">评审结果：</div>
                   <div>
-  <a-table
+                    <a-table :pagination="false" :columns="ViewReviewcolumns" :data-source="ViewReviewdata"
-  
+                      class="ant-table-striped" size="middle">
-
-    :pagination="false"
-
-     :columns="ViewReviewcolumns" 
-     :data-source="ViewReviewdata" 
-     class="ant-table-striped"
-     size="middle"
-  >
                       <template #bodyCell="{ column, record, index, text }">
                         <template v-if="column.key === 'name'">
                           <span>
                             {{ index + 1 }}
                           </span>
                         </template>
-    <template v-else-if="column.key === 'reviewResult'">
+                        <template v-else-if="column.key === '认证结果'">
                           <span>
-        {{ text===1?'已结束':'认证中'}}
+                            {{ text === 0 ? '通过' : (text === 1 ? '未通过' : (text === 2 ? '进行中' : '已报名')) }}
                           </span>
                         </template>
 
@@ -871,7 +973,9 @@ const options1 = ref([{
                     </a-table>
                   </div>
                   <div style="align-self: center;">
-<div @click="finishreview()" style=" border-radius: 8px; color: #fff;font-weight: 900;font-size: 16px; display: flex; justify-content: center;align-items: center; width: 176px; height: 55px; margin-top: 36px;background: #3da8f0;">结束评审并通知结果</div>
+                    <div @click="finishreview()"
+                      style=" border-radius: 8px; color: #fff;font-weight: 900;font-size: 16px; display: flex; justify-content: center;align-items: center; width: 176px; height: 55px; margin-top: 36px;background: #3da8f0;">
+                      结束评审并通知结果</div>
                   </div>
                 </div>
 
@@ -888,66 +992,41 @@ const options1 = ref([{
 
     </div>
     <!-- 发起评审 -->
-<a-drawer v-model:visible="InitiateReviewShow"
+    <a-drawer v-model:visible="InitiateReviewShow" class="custom-class" :closable="false" placement="right"
-    class="custom-class"
+      width="726px">
-   
-    :closable="false"
-    placement="right"
-    width="726px"
-   >
       <div class="header">
         <div class="headerTitle">{{ rwname ? '编辑评审' : '发起评审' }}</div>
-          <img
+        <img style="width: 29px; height: 29px; cursor: pointer" src="../../assets/images/basicinfo/close.png"
-            style="width: 29px; height: 29px; cursor: pointer"
+          @click="InitiateReviewShow = false, rwname = null" />
-            src="../../assets/images/basicinfo/close.png"
-            @click="InitiateReviewShow=false,rwname=null"
-          />
       </div>
       <div style="display: flex;flex-direction: column;">
 
         <div style="display: flex;">
           <div style="display: flex;flex-direction: column;">
-        <a-form
+            <a-form :model="formState" name="basic" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }"
-    :model="formState"
+              autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
-    name="basic"
+              <a-form-item style="margin-top: 29px;" label="评审名称" :rules="[{ required: true, message: '请填写评审名称' }]">
-    :label-col="{ span: 5 }"
-    :wrapper-col="{ span: 16 }"
-    autocomplete="off"
-    @finish="onFinish"
-    @finishFailed="onFinishFailed"
-  >
-    <a-form-item
-    style="margin-top: 29px;"
-      label="评审名称"
-
-      :rules="[{ required: true, message: '请填写评审名称' }]"
-    >
                 <a-input placeholder="请输入评审名称" v-model:value="formState.reviewname" />
               </a-form-item>
 
-    <a-form-item
+              <a-form-item label="评审时间" :rules="[{ required: true, message: '请填写评审时间' }]">
-      label="评审时间"
+                <a-date-picker v-model:value="formState.time" placeholder="请选择评审时间" :show-time="{ format: 'HH:mm:ss' }"
-   
+                  :format="['YYYY-MM-DD HH:mm:ss']" valueFormat="YYYY-MM-DD HH:mm:ss" @change="timeChangeEnd" />
-      :rules="[{ required: true, message: '请填写评审时间' }]"
-    >
-    <a-date-picker v-model:value="formState.time"
-    placeholder="请选择评审时间"
-    :show-time="{ format: 'HH:mm:ss' }"
-    :format="['YYYY-MM-DD HH:mm:ss']"
-    valueFormat="YYYY-MM-DD HH:mm:ss"
-    @change="timeChangeEnd" />
               </a-form-item>
               <div>选择讲师</div>
               <div style="width: 430px; height: 1px;background-color:  #e2e0e0;margin-top: 8px;"></div>
               <div style="display: flex;margin-top: 13px;">
                 <a-input v-model:value="teacherValue" placeholder="请输入姓名/工号" style="width: 150px;" />
-        <a-button @click="SearchTeacher()" type="primary" style="width: 70px; height: 31px; border-radius: 5px;margin-left: 15px;">搜索</a-button>
+                <a-button @click="SearchTeacher()" type="primary"
-      <a-button @click="resetTeacher()" type="primary" style="width: 70px; height: 31px; border-radius: 5px;margin-left: 12px;" ghost>重置</a-button>
+                  style="width: 70px; height: 31px; border-radius: 5px;margin-left: 15px;">搜索</a-button>
+                <a-button @click="resetTeacher()" type="primary"
+                  style="width: 70px; height: 31px; border-radius: 5px;margin-left: 12px;" ghost>重置</a-button>
               </div>
               <p style="margin-top: 11px; color: #b6b7b8; font-size: 12px;">说明：列表仅显示终稿已上传且未认证的讲师</p>
               <div style="display: flex;flex-direction: column;margin-top: -11px;">
                 <!-- 教师列表 -->
-      <a-table :columns="columnsTeacher" row-key="teacherId" :data-source="tabledata" :row-selection="teacherRowSelection">
+                <a-table :customRow="rowClick" :columns="columnsTeacher" row-key="teacherId" :pagination="false"
+                  :data-source="tabledata" :row-selection="teacherRowSelection">
                   <template #bodyCell="{ column, text }">
                     <template v-if="column.dataIndex === 'name'">
                       <a>{{ text }}</a>
@@ -955,11 +1034,14 @@ const options1 = ref([{
                   </template>
                 </a-table>
               </div>
-    <a-pagination size="small"  v-model:current="teacherCurrent1" show-quick-jumper :total="teacherTotal" @change="onChange3" />
+              <a-pagination size="small" v-model:current="teacherCurrent1" show-quick-jumper :total="teacherTotal"
+                @change="onChange3" />
               <a-form-item>
                 <div style="width: 100%;margin-top: 65px;margin-left: 140px">
-      <a-button type="primary"  style="width: 70px; height: 31px;  border-radius: 5px ;margin: 0 15px 0 15px;margin-left: 30px" >取消</a-button>
+                  <a-button type="primary" @click="CancelReview()"
-                  <a-button @click="startReviewSave()" type="primary" style="width: 70px; height: 31px;  border-radius: 5px" >确认</a-button>
+                    style="width: 70px; height: 31px;  border-radius: 5px ;margin: 0 15px 0 15px;margin-left: 30px">取消</a-button>
+                  <a-button @click="startReviewSave()" html-type="submit" type="primary"
+                    style="width: 70px; height: 31px;  border-radius: 5px">确认</a-button>
                 </div>
               </a-form-item>
             </a-form>
@@ -968,7 +1050,15 @@ const options1 = ref([{
           <div style="display: flex; flex-direction: column;width: 160px;margin-left: 24px;margin-top: 20px;">
             <div style="font-size: 16px; font-weight: 900;">已选</div>
             <div style="width: 16opx; height: 1px;background-color: #b9e6fb;margin: 11px 0;"></div>
-      <a-tag closable @close="log" style="border:1px solid #3da8f0; color: #3da8f0;width: 60px;">Tag 2</a-tag>
+            <div >
+                    <div v-for="(item,i) in teacherNames" :key="i">
+                      <div class="chose">
+                       {{item}}
+                        <div class="ch" ></div>
+                      </div>
+                    </div>
+                  
+                  </div>
           </div>
 
         </div>
@@ -976,23 +1066,13 @@ const options1 = ref([{
       </div>
     </a-drawer>
     <!-- 查看讲师 -->
-<a-drawer
+    <a-drawer v-model:visible="showViewInstructor" class="custom-class" :closable="false" placement="right"
-    v-model:visible="showViewInstructor"
+      width="1248px" @after-visible-change="afterVisible">
-    class="custom-class"
-   
-    :closable="false"
-    placement="right"
-    width="1248px"
-    @after-visible-change="afterVisible"
-  >
       <div class="drawerMain">
         <div class="header">
           <div class="headerTitle">查看讲师</div>
-          <img
+          <img style="width: 29px; height: 29px; cursor: pointer" src="../../assets/images/basicinfo/close.png"
-            style="width: 29px; height: 29px; cursor: pointer"
+            @click="closeDrawer" />
-            src="../../assets/images/basicinfo/close.png"
-            @click="closeDrawer"
-          />
         </div>
         <div>
           <div style="display: flex;width: 100%; height: 88px;">
@@ -1000,7 +1080,8 @@ const options1 = ref([{
               <img src="../../assets/2.png" alt="">
             </div>
             <div style="margin-left: 18px;">
-      <div style="font-size: 18px;font-weight: 500;color: #333333;line-height: 25px;font-style: normal;">张三  <span style="margin-left: 8px;"> 01011098</span></div>
+              <div style="font-size: 18px;font-weight: 500;color: #333333;line-height: 25px;font-style: normal;">张三
+                <span style="margin-left: 8px;"> 01011098</span></div>
               <div style="font-size: 14px;color: #979797;margin-top: 12px;">后台(业务支援体系)/BOEU/企划中心/数据资产部数据资产部</div>
               <div style="font-size: 14px;color: #979797;">产品企划岗 Band 1</div>
             </div>
@@ -1009,27 +1090,42 @@ const options1 = ref([{
           </div>
           <div style="margin-top: 24px">
             <div style="display:flex;">
-      <div style="padding-left:16px; width: 136px;height: 56px;background: #FFFFFF;border: 1px solid #F0F6FC;line-height: 56px;">认证课程名称</div>
+              <div
-      <div style="width: 559px;height: 56px;line-height: 56px;border: 1px solid #F0F6FC;padding-left:16px;">关于提升学习能力</div>
+                style="padding-left:16px; width: 136px;height: 56px;background: #FFFFFF;border: 1px solid #F0F6FC;line-height: 56px;">
-      <div style="width: 136px;height: 56px;line-height: 56px;background: #FFFFFF;border: 1px solid #F0F6FC;padding-left:16px;">课程内容分类</div>
+                认证课程名称</div>
-      <div style="width: 342px;height: 56px;line-height: 56px;border: 1px solid #F0F6FC;padding-left:16px;">影响力</div>
+              <div style="width: 559px;height: 56px;line-height: 56px;border: 1px solid #F0F6FC;padding-left:16px;">
+                关于提升学习能力
+              </div>
+              <div
+                style="width: 136px;height: 56px;line-height: 56px;background: #FFFFFF;border: 1px solid #F0F6FC;padding-left:16px;">
+                课程内容分类</div>
+              <div style="width: 342px;height: 56px;line-height: 56px;border: 1px solid #F0F6FC;padding-left:16px;">影响力
+              </div>
 
             </div>
             <div style="display:flex;">
-      <div style="padding-left:16px; width: 136px;height: 56px;background: #FFFFFF;border: 1px solid #F0F6FC;line-height: 56px;">课程简介</div>
+              <div
-      <div style="width: 559px;height: 56px;line-height: 56px;border: 1px solid #F0F6FC;padding-left:16px;">这是我的认证课程，关于提升学习能力的课程</div>
+                style="padding-left:16px; width: 136px;height: 56px;background: #FFFFFF;border: 1px solid #F0F6FC;line-height: 56px;">
+                课程简介</div>
+              <div style="width: 559px;height: 56px;line-height: 56px;border: 1px solid #F0F6FC;padding-left:16px;">
+                这是我的认证课程，关于提升学习能力的课程</div>
 
 
             </div>
             <div style="display:flex;">
-      <div style="padding-left:16px; width: 136px;height: 56px;background: #FFFFFF;border: 1px solid #F0F6FC;line-height: 56px;">课程终稿</div>
+              <div
+                style="padding-left:16px; width: 136px;height: 56px;background: #FFFFFF;border: 1px solid #F0F6FC;line-height: 56px;">
+                课程终稿</div>
               <div style="width: 559px;height: 56px;line-height: 56px;border: 1px solid #F0F6FC;padding-left:16px;">
                 <img src="" alt="">
                 学习能力提升课件.pptx
                 <a href="">下载</a>
               </div>
-      <div style="width: 136px;height: 56px;line-height: 56px;background: #FFFFFF;border: 1px solid #F0F6FC;padding-left:16px;">上传时间</div>
+              <div
-      <div style="width: 342px;height: 56px;line-height: 56px;border: 1px solid #F0F6FC;padding-left:16px;">2024.04.10 20:58</div>
+                style="width: 136px;height: 56px;line-height: 56px;background: #FFFFFF;border: 1px solid #F0F6FC;padding-left:16px;">
+                上传时间</div>
+              <div style="width: 342px;height: 56px;line-height: 56px;border: 1px solid #F0F6FC;padding-left:16px;">
+                2024.04.10 20:58</div>
 
             </div>
 
@@ -1037,7 +1133,8 @@ const options1 = ref([{
           <div style='font-size: 18px;font-weight: 500;margin-top: 39px;'>
             认证流程
           </div>
-     <div style="margin-top: 13px; height: 125px;width: 100%;display: flex;align-items: center;justify-content: center;" >
+          <div
+            style="margin-top: 13px; height: 125px;width: 100%;display: flex;align-items: center;justify-content: center;">
             <div style="display: flex;width: 70px;height: 78px;flex-direction: column;align-items: center">
               <img src="../../assets/8.png" alt="">
               <div style="color: #409EFF;font-size: 14px;">初稿已上传</div>
@@ -1100,11 +1197,8 @@ const options1 = ref([{
 
                 <template v-else-if="column.key === 'tags'">
                   <span>
-          <a-tag
+                    <a-tag v-for="tag in record.tags" :key="tag"
-            v-for="tag in record.tags"
+                      :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'">
-            :key="tag"
-            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
-          >
                       {{ tag.toUpperCase() }}
                     </a-tag>
                   </span>
@@ -1136,11 +1230,8 @@ const options1 = ref([{
 
                 <template v-else-if="column.key === 'tags'">
                   <span>
-          <a-tag
+                    <a-tag v-for="tag in record.tags" :key="tag"
-            v-for="tag in record.tags"
+                      :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'">
-            :key="tag"
-            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
-          >
                       {{ tag.toUpperCase() }}
                     </a-tag>
                   </span>
@@ -1175,6 +1266,7 @@ const options1 = ref([{
   background-image: url(@/assets/images/coursewareManage/close.png);
   background-size: 100% 100%;
 }
+
 .rectangle {
   width: 537px;
   height: 516px;
@@ -1183,6 +1275,7 @@ const options1 = ref([{
   box-sizing: border-box;
   position: relative;
 }
+
 .page-top {
   height: 134px;
   width: 100%;
@@ -1195,11 +1288,13 @@ const options1 = ref([{
 
   // flex-direction: row;
 }
+
 .boundary {
   height: 17px;
   width: 100%;
   background-color: #eceff4;
 }
+
 .el-table::v-deep .cell {
   font-size: 13px;
   color: #333;
@@ -1212,29 +1307,36 @@ const options1 = ref([{
   width: 100%;
 
 }
+
 .el-pagination {
 
   justify-content: center;
 }
+
 .sss {
   background: #333;
 }
+
 :deep(.ant-tabs-tab) {
   margin-left: 30px
 }
+
 :deep(.select .ant-select-selector) {
   border-radius: 5px !important;
 }
+
 .select {
   height: 100%;
 
-        display: flex; align-items: center;
+  display: flex;
+  align-items: center;
 }
 
 
 :deep(.ant-table-tbody > tr > td) {
   text-align: center;
 }
+
 .btn1 {
   .search {
     width: 15px;
@@ -1258,6 +1360,7 @@ const options1 = ref([{
 .btn2:active {
   background: rgba(64, 158, 255, 0.2);
 }
+
 .btn {
   padding: 0 26px 0 26px;
   height: 38px;
@@ -1269,6 +1372,7 @@ const options1 = ref([{
   margin-right: 14px;
   flex-shrink: 0;
   cursor: pointer;
+
   .search {
     background-size: 100%;
   }
@@ -1281,6 +1385,7 @@ const options1 = ref([{
     margin-left: 5px;
   }
 }
+
 .btn3 {
   margin-right: 0;
 
@@ -1305,6 +1410,7 @@ const options1 = ref([{
   flex-shrink: 0;
   // background-color: red;
   margin-bottom: 20px;
+
   .headerTitle {
     font-size: 18px;
     font-weight: 600;
@@ -1313,7 +1419,30 @@ const options1 = ref([{
     // margin-left: 24px;
   }
 }
+.chose {
+          width: 64px;
+          height: 24px;
+          margin-top: 25px;
+          margin-right: 25px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 2px;
+          border: 1px solid rgba(56, 139, 225, 1);
+          color: rgba(56, 139, 225, 1);
+          font-size: 12px;
+          position: relative;
+  
+          .ch {
+            position: absolute;
+            width: 18px;
+            height: 18px;
+            background-image: url(../../assets/images/basicinfo/ch.png);
+            right: -8px;
+            top: -8px;
+          }
+        }
+  
 // :deep(.ant-form-item-label){
 // text-align: left;
-// }
+// }</style>
-</style>

src/views/gratefulteacher/tablemodel.vue

@@ -0,0 +1,684 @@
+<template>
+    <div class="CommonStudent">
+      <a-drawer
+        :visible="visiable"
+        class="drawerStyle ProjCheckship"
+        placement="right"
+        width="40%"
+      >
+        <div class="drawerMain" id="ProjCheckship" style="">
+          <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="TableStudent">
+            <a-row
+              type="flex"
+              gutter="12"
+              style="padding-left: 20px; margin-right: 0px"
+            >
+              <a-col>
+                <a-form-item title="姓名：">
+                  <a-input
+                    class="cus-input"
+                    v-model:value="searchName"
+                    placeholder="请输入姓名"
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col>
+                <a-button
+                  class="cus-btn"
+                  style="background: #4ea6ff; color: #fff; width: 100px"
+                  @click="search"
+                  :loading="stuAsyncLoading"
+                >
+                  <template #icon
+                    ><img
+                      style="margin-right: 10px"
+                      src="../../assets/images/courseManage/search0.png"
+                    />
+                  </template>
+                  搜索
+                </a-button>
+              </a-col>
+              <a-col :span="2">
+                <a-button
+                  class="cus-btn"
+                  style="width: 100px;background: #4ea6ff;color: #fff;"
+                  @click="reset"
+                >
+                  <template #icon
+                    ><img
+                      style="margin-right: 10px"
+                      src="../../assets/images/leveladd/reset0.png"
+                    />
+                  </template>
+                  重置
+                </a-button>
+              </a-col>
+            </a-row>
+            <div style="margin-top: 20px">
+              <a-table
+                :columns="columns"
+                :data-source="studentList"
+                :pagination="stuPagination"
+                :loading="loading"
+                row-key="id"
+              >
+                <template #action="{ record }">
+                  <a-space :size="2">
+                    <slot name="extension" v-bind:data="{ record }"></slot>
+                    <a-button
+                      v-if="
+                        record.type !== 6 &&
+                        record.type !== 9 &&
+                        record.type !== 12
+                      "
+                      @click="del(record.id)"
+                      type="link"
+                      
+                      >转移归属权</a-button
+                    >
+                  </a-space>
+                </template>
+              </a-table>
+            </div>
+          </div>
+          <div class="btnn">
+            <button class="btn2" @click="closeDrawer">取消</button>
+            <button class="btn2" @click="closeDrawer">确定</button>
+          </div>
+        </div>
+      </a-drawer>
+      <a-button @click="openDrawer" type="link"><slot></slot></a-button>
+    </div>
+  
+    <!-- 删除弹窗 -->
+    <a-modal
+      v-model:visible="deleteModalVisible"
+      :footer="null"
+      wrapClassName="deleteModal1"
+      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 style="margin-top: 20px">数据删除后不可恢复！</span>
+          </div>
+          <div style="width:100%;display:flex;justify-content:center;align-items:center">
+            <div style="width:100px" @click="closeSameModal">
+              <div >取消</div>
+            </div>
+            <div  @click="sureSameModal">
+              <div>确定</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-modal>
+  </template>
+  <script setup>
+  import {
+    computed,
+    defineProps,
+    defineExpose,
+    ref,
+    watch,
+  } from "vue";
+  import { usePage } from "@/api/request";
+  import { STUDENT_LIST } from "@/api/apis";
+  import { delStudentList } from "@/api/index1";
+  import {useAsyncStu} from "@/utils/useCommon";
+  
+  const props = defineProps({
+    type: Number,
+    id: String,
+    stage: {
+      type: Array,
+      default: () => [],
+    },
+    types: {
+      type: Array,
+      default: () => [],
+    },
+  });
+  
+  const visiable = ref(false);
+  
+  const initParams = {
+    studentName: "",
+    pageNo: 1,
+    pageSize: 10,
+    type: props.type || "",
+    types: props.types,
+    pid: props.id || "",
+  };
+  
+  const searchParams = ref(initParams);
+  const searchName = ref("");
+  
+  const columns = ref([
+    {
+      title: "姓名",
+      dataIndex: "studentName",
+      key: "studentName",
+      width: 30,
+      align: "center",
+      ellipsis: true,
+    },
+    {
+      title: "工号",
+      dataIndex: "studentUserNo",
+      key: "studentUserNo",
+      width: 50,
+      align: "center",
+      ellipsis: true,
+    },
+    {
+      title: "部门",
+      dataIndex: "studentDepartName",
+      key: "studentDepartName",
+      width: 80,
+      align: "center",
+      ellipsis: true,
+    },
+    {
+      title: "权限",
+      dataIndex: "type",
+      key: "type",
+      width: 30,
+      align: "center",
+      customRender: ({ record: { type } }) =>
+        ({
+          4: "查看权",
+          5: "管理权",
+          6: "归属权",
+          7: "查看权",
+          8: "管理权",
+          9: "归属权",
+          10: "查看权",
+          11: "管理权",
+          12: "归属权",
+        }[type]),
+    },
+    {
+      title: "操作",
+      dataIndex: "operation",
+      key: "operation",
+      width: 50,
+      align: "center",
+      slots: { customRender: "action" },
+    },
+  ]);
+  
+  const {
+    data: studentList,
+    fetch: searchStu,
+    total,
+    loading,
+  } = usePage(STUDENT_LIST, searchParams);
+  
+  const { loading: stuAsyncLoading } = useAsyncStu(props.id, props.types.join(","), searchStu);
+  
+  
+  const stuPagination = computed(() => ({
+    total: total.value,
+    showSizeChanger: false,
+    current: searchParams.value.pageNo,
+    pageSize: searchParams.value.pageSize,
+    onChange: changePagination,
+  }));
+  
+  const openDrawer = () => {
+    visiable.value = true;
+  };
+  
+  const changePagination = (page) => {
+    searchParams.value.pageNo = page;
+  };
+  
+  function search() {
+    searchParams.value.studentName = searchName.value;
+    searchParams.value.pageNo = 1;
+    searchStu()
+  }
+  
+  const deleteModalVisible = ref(false);
+  const deleteId = ref(null);
+  function del(id) {
+    deleteModalVisible.value = true;
+    deleteId.value = id;
+  }
+  
+  //确定删除
+  const sureSameModal = () => {
+    if (deleteId.value) {
+      loading.value = true;
+      delStudentList({ ids: [deleteId.value] }).then(() => searchStu());
+      deleteModalVisible.value = false;
+    }
+  };
+  //取消
+  const closeSameModal = () => {
+    deleteModalVisible.value = false;
+    deleteId.value = null;
+  };
+  
+  const closeDrawer = () => {
+    visiable.value = false;
+  };
+  
+  function reset() {
+    searchParams.value = initParams;
+    searchName.value = "";
+    searchParams.value.pageNo = 1;
+    searchStu()
+  }
+  
+  watch(visiable, () => {
+    visiable.value && searchStu();
+    searchParams.value = initParams;
+  });
+  
+  defineExpose({
+    searchStu,
+    loading,
+  });
+  </script>
+  <style lang="scss">
+  .cus-btn {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 16px;
+    border: 1px solid #4ea6ff;
+    border-radius: 8px;
+    background: #4ea6ff;
+    cursor: pointer;
+    color: #fff;
+  }
+  
+  .white {
+    background: #fff;
+    color: #4ea6ff;
+  }
+  
+  .cus-input {
+    height: 40px;
+    border-radius: 8px;
+  }
+  
+  .cus-select {
+    height: 40px;
+    border-radius: 8px;
+  }
+  
+  .CommonStudent {
+    .ant-btn-primary {
+      background-color: #4ea6ff !important;
+    }
+  
+    .cus-select {
+      height: 40px;
+      border-radius: 8px;
+    }
+  
+    .tableBox .ant-table-row .ant-table-cell {
+      height: 48px;
+      font-size: 14px;
+      font-weight: 400;
+      color: #4f5156;
+      line-height: 29px;
+      padding: 0px;
+    }
+  
+    .tableBox .ant-table-thead tr th {
+      font-size: 14px;
+    }
+  
+    .ant-tabs-tabpane {
+      height: 100%;
+    }
+  
+    .ant-tabs {
+      overflow: visible;
+    }
+  
+    .right1 {
+      border-left: 1px solid #f2f6fe;
+      margin-left: 20px;
+  
+      .onerow {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-right: 40px;
+        flex-wrap: wrap;
+  
+        width: 100%;
+  
+        .onleft {
+          display: flex;
+          text-align: center;
+  
+          .already {
+            color: rgba(51, 51, 51, 1);
+            font-size: 16px;
+            font-weight: 500;
+            margin-left: 32px;
+            white-space: nowrap;
+            // margin-bottom: 20px;
+          }
+  
+          .count {
+            color: #4ea6ff;
+            font-size: 16px;
+            margin: 0 6px;
+          }
+  
+          .peo {
+            color: rgba(51, 51, 51, 1);
+            font-size: 16px;
+            font-weight: 500;
+          }
+        }
+  
+        .clbox {
+          margin-right: 50px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+          width: 104px;
+          height: 32px;
+          border-radius: 4px;
+          background: #4ea6ff;
+  
+          .colose {
+            width: 16px;
+            height: 16px;
+            // border-radius: 8px;
+            // background: #ffffff;
+            // position: relative;
+            background-image: url(../../assets/images/basicinfo/ch.png);
+            background-size: 100%;
+            margin-right: 4px;
+          }
+  
+          .allclear {
+            color: rgba(255, 255, 255, 1);
+            font-size: 14px;
+          }
+        }
+      }
+  
+      .selecteds {
+        display: flex;
+        flex-wrap: wrap;
+        margin-left: 32px;
+  
+        .person {
+          width: 100%;
+          margin-top: 20px;
+          border-top: 1px solid #f2f6fe;
+        }
+  
+        .chose {
+          width: 64px;
+          height: 24px;
+          margin-top: 25px;
+          margin-right: 25px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 2px;
+          border: 1px solid rgba(56, 139, 225, 1);
+          color: rgba(56, 139, 225, 1);
+          font-size: 12px;
+          position: relative;
+  
+          .ch {
+            position: absolute;
+            width: 18px;
+            height: 18px;
+            background-image: url(../../assets/images/basicinfo/ch.png);
+            right: -8px;
+            top: -8px;
+          }
+        }
+  
+        .ifsw {
+          display: flex;
+          align-items: end;
+          justify-content: center;
+          color: #4ea6ff;
+        }
+  
+        .sw {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-align: justify;
+          color: #4ea6ff;
+          margin-top: 23px;
+          margin-left: 10px;
+        }
+  
+        .dept {
+          width: 100%;
+          margin-top: 30px;
+          border-top: 1px solid #f2f6fe;
+        }
+  
+        .chose1 {
+          //width: 90px;
+          height: 24px;
+          margin-top: 25px;
+          margin-right: 25px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 2px;
+          border: 1px solid rgba(56, 139, 225, 1);
+          color: rgba(56, 139, 225, 1);
+          font-size: 12px;
+          position: relative;
+  
+          .span {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+  
+          .ch1 {
+            position: absolute;
+            width: 18px;
+            height: 18px;
+            background-image: url(../../assets/images/basicinfo/ch.png);
+            right: -8px;
+            top: -8px;
+          }
+        }
+  
+        .group {
+          width: 100%;
+          margin-top: 30px;
+          border-top: 1px solid #f2f6fe;
+        }
+  
+        .chose2 {
+          //width: 120px;
+          height: 24px;
+          margin-top: 25px;
+          margin-right: 25px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 2px;
+          border: 1px solid rgba(56, 139, 225, 1);
+          color: rgba(56, 139, 225, 1);
+          font-size: 12px;
+          position: relative;
+  
+          .span {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+  
+          .ch2 {
+            position: absolute;
+            width: 18px;
+            height: 18px;
+            background-image: url(../../assets/images/basicinfo/ch.png);
+            right: -8px;
+            top: -8px;
+          }
+        }
+      }
+    }
+  }
+  .deleteModal1 {
+    .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_btnbox1 {
+                display: flex;
+                margin: 30px auto;
+                justify-content: center;
+  
+                .del_btn2 {
+                  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;
+                  }
+                }
+  
+                .btn11 {
+                  border: 1px solid rgba(64, 158, 255, 1);
+                  color: #4ea6ff;
+                  margin-right: 14px;
+                }
+  
+                .btn21 {
+                  background-color: #4ea6ff;
+                  color: #ffffff;
+                }
+              }
+            }
+          }
+        }
+      }
+      .ant-modal-close-x {
+        display: none;
+      }
+    }
+  }
+  </style>