feat:调研管理操作的所有弹窗

src/views/research/ResearchManage.vue

@@ -69,7 +69,6 @@
         @expand="expandTable"
         :pagination="false"
       />
-      
     </div>
     <div class="pa">
       <a-pagination
@@ -83,7 +82,12 @@
       />
     </div>
     <!-- 表格 -->
-    <a-modal v-model:visible="out" :footer="null" :closable="false" style="margin-top: 250px">
+    <a-modal
+      v-model:visible="out"
+      :footer="null"
+      :closable="false"
+      style="margin-top: 250px"
+    >
       <div class="out">
         <div class="top">
           <img class="topimg" src="../../assets/images/courseManage/add1.png" />
@@ -107,7 +111,8 @@
             <div class="in">
               <a-input
                 v-model:value="value"
-                show-count :maxlength="15"
+                show-count
+                :maxlength="15"
                 style="border-radius: 8px"
               />
             </div>
@@ -119,6 +124,53 @@
         </div>
       </div></a-modal
     >
+    <!--操作弹窗 -->
+    <a-modal
+      v-model:visible="delete_hs"
+      :footer="null"
+      :closable="closableQR"
+      wrapClassName="DelModal"
+      style="margin-top: 400px"
+      @cancel="delete_exit"
+    >
+      <div class="delete" :style="{ display: delete_hs ? 'block' : 'none' }">
+        <div class="del_header"></div>
+        <div class="del_main">
+          <div class="header">
+            <div class="del-icon" :style="{ display: del_hs || over_hs ? 'block' : 'none' }"><img src="@/assets/images/coursewareManage/notice.png" alt=""></div>
+            <div class="del-icon" :style="{ display: copy_hs || back_hs || pub_hs ? 'block' : 'none' }"><img src="@/assets/images/coursewareManage/QR.png" alt=""></div>
+            <span>提示</span>
+            <div class="close_exit" @click="delete_exit"></div>
+          </div>
+          <div class="body">
+            <div :style="{ display: del_hs ? 'block' : 'none' }">
+              <span>您确定要删除此调研吗</span>
+            </div>
+            <div :style="{ display: over_hs ? 'block' : 'none' }">
+              <span>您确定要结束此调研吗</span>
+            </div>
+            <div :style="{ display: copy_hs ? 'block' : 'none' }">
+              <span>您确定要复制此调研吗</span>
+            </div>
+            <div :style="{ display: back_hs ? 'block' : 'none' }">
+              <span>您确定要撤回此调研吗</span>
+            </div>
+            <div :style="{ display: pub_hs ? 'block' : 'none' }">
+              <span>您确定要发布此调研吗</span>
+            </div>
+          </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>
+    <!--操作弹窗 -->
   </div>
 </template>
 <script>
@@ -219,6 +271,12 @@ export default {
       valueE: ref(" "),
       valueEE: ref(" "),
       valuei: ref(" "),
+      delete_hs: false,
+      del_hs: false,
+      over_hs: false,
+      copy_hs: false,
+      back_hs: false,
+      pub_hs: false,
     });
     const tableDataFunc = () => {
       const columns = [
@@ -286,7 +344,6 @@ export default {
           key: "opacation",
           width: 200,
           align: "center",
-          
         },
       ];
       return columns;
@@ -299,38 +356,74 @@ export default {
           //单层项目
           value.opacation = (
             <div class="operation">
-              
               {value.state === "已发布" ? (
                 <div class="fb">
-                    <router-link to="/managepage" class="jc">管理</router-link>
+                  <router-link to="/managepage" class="jc">
-                    <div class="jc">复制</div>
+                    管理
-                    <div class="jc">撤回</div>
+                  </router-link>
-                    <div class="jc">结束</div>
+                  <div class="jc"
+                  onClick={()=>{
+                      state.delete_hs = true;
+                      state.copy_hs = true;
+                  }}>复制</div>
+                  <div class="jc"
+                  onClick={()=>{
+                      state.delete_hs = true;
+                      state.back_hs = true;
+                  }}>撤回</div>
+                  <div class="jc"
+                  onClick={()=>{
+                      state.delete_hs = true;
+                      state.over_hs = true;
+                  }}>结束</div>
                 </div>
               ) : (
                 <div></div>
               )}
               {value.state === "待发布" ? (
                 <div class="fb">
-                    <router-link to="/researchadd" class="jc">基础信息</router-link>
+                  <router-link to="/researchadd" class="jc">
-                    <router-link to="/managepage" class="jc">管理</router-link>
+                    基础信息
-                    <div class="jc">复制</div>
+                  </router-link>
+                  <router-link to="/managepage" class="jc">
+                    管理
+                  </router-link>
+                  <div class="jc"
+                  onClick={()=>{
+                      state.delete_hs = true;
+                      state.pub_hs = true;
+                  }}>发布</div>
+                  <div class="jc"
+                  onClick={()=>{
+                      state.delete_hs = true;
+                      state.copy_hs = true;
+                  }}>复制</div>
                   <div class="jc">编辑</div>
-                    <div class="jc">删除</div>
+                  <div class="jc"
+                    onClick={()=>{
+                      state.delete_hs = true;
+                      state.del_hs = true;
+                  }}>删除</div>
                 </div>
               ) : (
                 <div></div>
               )}
               {value.state === "已结束" ? (
                 <div class="fb">
-                    <div class="jc">复制</div>
+                  <div class="jc"
-                    <div class="jc">删除</div>
+                  onClick={()=>{
-
+                      state.delete_hs = true;
+                      state.copy_hs = true;
+                  }}>复制</div>
+                  <div class="jc"
+                    onClick={()=>{
+                      state.delete_hs = true;
+                      state.del_hs = true;
+                  }}>删除</div>
                 </div>
               ) : (
                 <div></div>
               )}
-              
             </div>
           );
         }
@@ -357,6 +450,14 @@ export default {
     const chooseImg = (id) => {
       console.log(id);
     };
+    const delete_exit = () => {
+      state.delete_hs = false;
+      state.del_hs = false;
+      state.over_hs = false;
+      state.copy_hs = false;
+      state.back_hs = false;
+      state.pub_hs = false;
+    };
     return {
       ...toRefs(state),
       selectProjectName,
@@ -366,6 +467,7 @@ export default {
       tableDataFunc,
       chooseImg,
       getTableDate,
+      delete_exit,
     };
   },
 };
@@ -464,7 +566,7 @@ export default {
         width: 100px;
         height: 40px;
         font-size: 14px;
-          border: 1px solid #409EFF;
+        border: 1px solid #409eff;
         border-radius: 8px;
         cursor: pointer;
       }
@@ -474,7 +576,7 @@ export default {
       }
       .btn2 {
         margin-left: 10px;
-          background-color: #409EFF;
+        background-color: #409eff;
         color: #fff;
       }
     }
@@ -596,7 +698,6 @@ export default {
       > td {
       background: #f6f9fd;
     }
-    
   }
   .pa {
     width: 100%;
@@ -625,9 +726,114 @@ export default {
         color: #4ea6ff;
         font-size: 14px;
         margin-left: 20px;
+        white-space: nowrap;
+        cursor: pointer;
+      }
+    }
+  }
+}
+.DelModal {
+  .ant-modal {
+    .ant-modal-content {
+      width: 424px !important;
+      .ant-modal-body {
+        .delete {
+          z-index: 999;
+          width: 424px;
+          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: 40px;
+            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;
+              .del-icon {
+                display: flex;
+                align-items: center;
+                margin-right: 10px;
+                // background-image: url(@/assets/images/coursewareManage/notice.png);
+                img{
+                  background-size: 100% 100%;
+                  width: 16px;
+                  height: 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;
+            }
+            .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;
+                margin-right: 14px;
+                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;
+              }
+              .btn2 {
+                background-color: #4ea6ff;
+                color: #ffffff;
+              }
+            }
+          }
+        }
       }
     }
-    
   }
 }
 </style>