From 4b5a70439d80040c5a9080bd009c402c109eecdd Mon Sep 17 00:00:00 2001
From: songwc <songwc@dongwu-inc.com>
Date: Sat, 22 Oct 2022 10:35:49 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=96=B0=E5=A2=9E=E9=A1=B9?=
 =?UTF-8?q?=E7=9B=AE=E6=8E=88=E6=9D=83=E5=90=8D=E5=8D=95=20=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E9=98=B6=E6=AE=B5=20=E5=8F=96=E6=B6=88=E9=98=B6?=
 =?UTF-8?q?=E6=AE=B5=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/drawers/ProjPowerList.vue  | 546 ++++++++++++++++++++++
 src/views/projectcenter/ProjectManage.vue | 130 +++++-
 src/views/projectcenter/TaskAdd.vue       | 201 +++++++-
 3 files changed, 859 insertions(+), 18 deletions(-)
 create mode 100644 src/components/drawers/ProjPowerList.vue

diff --git a/src/components/drawers/ProjPowerList.vue b/src/components/drawers/ProjPowerList.vue
new file mode 100644
index 00000000..1aea1e0c
--- /dev/null
+++ b/src/components/drawers/ProjPowerList.vue
@@ -0,0 +1,546 @@
+<template>
+  <a-drawer
+    :visible="ProjPvisible"
+    class="drawerStyle ProjPowerList"
+    placement="right"
+    width="60%"
+    @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="search">
+          <div class="leftchoose">
+            <div class="namecon" style="margin-right: 30px">
+              <div class="name">姓名：</div>
+              <a-input
+                v-model:value="name"
+                style="width: 270px; height: 40px; border-radius: 8px"
+                placeholder="请输入姓名"
+              />
+            </div>
+          </div>
+
+          <div class="btns">
+            <div class="btn btn1" style="margin-right: 20px">
+              <div class="img1"></div>
+              <div class="wz">搜索</div>
+            </div>
+            <div class="btn btn2">
+              <div class="img2"></div>
+              <div class="wz">重置</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="tableBox" style="margin-top: 10px">
+          <a-table
+            style="border: 1px solid #f2f6fe"
+            :columns="tableDataFunc()"
+            :data-source="tableData"
+            :loading="tableDataTotal === -1 ? true : false"
+            expandRowByClick="true"
+            @expand="expandTable"
+            :scroll="{ x: 900, y: 400 }"
+            :pagination="false"
+            :row-selection="{
+              columnWidth: 30,
+              selectedRowKeys: selectedRowKeys,
+              onChange: onSelectChange,
+            }"
+          />
+        </div>
+        <div class="pa">
+          <a-pagination
+            showSizeChanger="true"
+            showQuickJumper="true"
+            hideOnSinglePage="true"
+            :pageSize="pageSize"
+            :current="currentPage"
+            :total="tableDataTotal"
+            class="pagination"
+          />
+        </div>
+        <!-- <div class="tab" style="margin-top: 20px; margin-bottom: 100px">
+          <a-table
+            style="border: 1px solid #f2f6fe"
+            :columns="tablecolumns"
+            :data-source="tabledata"
+            :loading="tableDataTotal === -1 ? true : false"
+            expandRowByClick="true"
+            :scroll="{ x: 900, y: 350 }"
+            @expand="expandTable"
+            :pagination="false"
+            :row-selection="{
+              columnWidth: 30,
+              selectedRowKeys: selectedRowKeys,
+              onChange: onSelectChange,
+            }"
+          />
+        </div> -->
+      </div>
+    </div>
+    <!-- 取消授权弹窗 -->
+    <a-modal
+      v-model:visible="cancelModal"
+      :footer="null"
+      :closable="closeCancel"
+      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="closeCancelModal"></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>
+
+    <div class="botm"></div>
+    <div class="btnn">
+      <button class="btn1">取消</button>
+      <button class="btn2">确定</button>
+    </div>
+  </a-drawer>
+</template>
+
+<script>
+import { toRefs, reactive } from "vue";
+export default {
+  name: "ProjPowerList",
+  props: {
+    ProjPvisible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  setup(props, ctx) {
+    const state = reactive({
+      name: null,
+      showmodal: false, //勾选提示框
+      closable: false, //modal右上角的关闭按钮
+      pageSize: 10,
+      currentPage: 1,
+      tableDataTotal: 100,
+      selectedRowKeys: [],
+      cancelModal: false, //取消授权弹窗
+      closeCancel: false, //取消授权弹窗关闭图标
+      tableData: [
+        {
+          key: 1,
+          name: "张三",
+          com: "产研部",
+          gang: "产品经理",
+
+          state: "管理权",
+        },
+        {
+          key: 2,
+          name: "张三",
+          com: "产研部",
+          gang: "产品经理",
+
+          state: "管理权",
+        },
+        {
+          key: 3,
+          name: "张三",
+          com: "产研部",
+          gang: "产品经理",
+
+          state: "管理权",
+        },
+        {
+          key: 4,
+          name: "张三",
+          com: "产研部",
+          gang: "产品经理",
+
+          state: "管理权",
+        },
+        {
+          key: 5,
+          name: "张三",
+          com: "产研部",
+          gang: "产品经理",
+
+          state: "管理权",
+        },
+        {
+          key: 6,
+          name: "张三",
+          com: "产研部",
+          gang: "产品经理",
+
+          state: "归属权",
+        },
+        {
+          key: 7,
+          name: "张三",
+          com: "产研部",
+          gang: "产品经理",
+
+          state: "查看权",
+        },
+        {
+          key: 8,
+          name: "张三",
+          com: "产研部",
+          gang: "产品经理",
+          state: "管理权",
+        },
+        {
+          key: 9,
+          name: "张三",
+          com: "产研部",
+          gang: "产品经理",
+          state: "管理权",
+        },
+        {
+          key: 10,
+          name: "张三",
+          com: "产研部",
+          gang: "产品经理",
+          state: "管理权",
+        },
+      ],
+    });
+
+    const closeDrawer = () => {
+      ctx.emit("update:ProjPvisible", false);
+    };
+
+    const onSelectChange = (selectedRowKeys) => {
+      console.log("selectedRowKeys changed: ", selectedRowKeys);
+      state.selectedRowKeys = selectedRowKeys;
+    };
+    const showCancelModal = () => {
+      state.cancelModal = true;
+    };
+    const closeCancelModal = () => {
+      state.cancelModal = false;
+    };
+
+    const tableDataFunc = () => {
+      const columns = [
+        {
+          title: "姓名",
+          dataIndex: "name",
+          // width: "30%",
+          key: "name",
+          width: 70,
+          align: "left",
+          className: "classify",
+          scopedSlots: { customRender: "action" }, //引入的插槽
+          customRender: (text) => {
+            // console.log(text.record.checked1);
+            return (
+              <div class="racona">
+                <span> {text.record.name}</span>
+              </div>
+            );
+          },
+        },
+        {
+          title: "归属组织",
+          dataIndex: "com",
+          // width: "30%",
+          key: "com",
+          width: 100,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "所在岗位",
+          dataIndex: "gang",
+          key: "gang",
+          width: 100,
+          align: "center",
+          className: "h",
+        },
+
+        {
+          title: "拥有权限",
+          dataIndex: "state",
+          key: "state",
+          width: 100,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "操作",
+          className: "h",
+          dataIndex: "opacation",
+          key: "opacation",
+          width: 100,
+          align: "center",
+          scopedSlots: { customRender: "action" }, //引入的插槽
+          customRender: () => {
+            return (
+              <div
+                class="opa"
+                onClick={() => {
+                  showCancelModal();
+                }}
+              >
+                取消授权
+              </div>
+            );
+          },
+        },
+      ];
+      return columns;
+    };
+    return {
+      ...toRefs(state),
+      closeDrawer,
+      onSelectChange,
+      tableDataFunc,
+      showCancelModal,
+      closeCancelModal,
+    };
+  },
+};
+</script>
+
+<style  lang="scss" >
+.me {
+  .ant-modal-body {
+    padding: 0px;
+  }
+}
+
+.ProjPowerList {
+  // width: 80%;
+  .ant-drawer-content-wrapper {
+    // max-width: 1000px;
+    .ant-drawer-header {
+      display: none !important;
+    }
+    .ant-drawer-body {
+      padding: 0;
+    }
+  }
+  .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 {
+      width: 100%;
+      height: 100%;
+      // background-color: #bfa;
+      // overflow-y: auto;
+      .search {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        margin-top: 10px;
+        justify-content: space-between;
+        .leftchoose {
+          display: flex;
+          margin-right: 20px;
+          .namecon {
+            display: flex;
+            flex-wrap: nowrap;
+            margin-bottom: 10px;
+            .name {
+              margin-top: 8px;
+              white-space: nowrap;
+            }
+            // .name {
+            //   margin-top: 8px;
+
+            //   color: rgba(0, 0, 0, 0.85);
+            //   font-size: 14px;
+            //   font-weight: 400;
+            // }
+          }
+        }
+
+        .btns {
+          display: flex;
+          flex-wrap: nowrap;
+
+          .btn {
+            cursor: pointer;
+            width: 100px;
+            height: 40px;
+            border-radius: 8px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .img1 {
+              width: 15px;
+              height: 17px;
+              background-image: url(../../assets/images/courseManage/search0.png);
+              background-size: 100% 100%;
+              margin-right: 7px;
+            }
+            .img2 {
+              width: 16px;
+              height: 18px;
+              background-image: url(../../assets/images/courseManage/reset1.png);
+              background-size: 100% 100%;
+              margin-right: 7px;
+            }
+          }
+
+          .btn1 {
+            background: #388be1;
+
+            color: #ffffff;
+          }
+          .btn2 {
+            background: #ffffff;
+
+            color: #388be1;
+            border: 1px solid #388be1;
+          }
+        }
+      }
+
+      .tableBox {
+        // margin-bottom: 80px;
+
+        .classify {
+          // margin-left: 11px !important;
+          // padding-left: 9px !important;
+          padding-left: 0px !important;
+        }
+        .ant-checkbox-wrapper {
+          align-items: center;
+          margin-top: -2px;
+        }
+        .ant-table-selection-column {
+          padding: 0px !important;
+          // padding-left: 45px !important;
+        }
+        .ant-table-thead > tr > th {
+          background-color: rgba(239, 244, 252, 1);
+        }
+        th.h {
+          background-color: #eff4fc !important;
+        }
+
+        .ant-table-tbody
+          > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
+          > td {
+          background: #f6f9fd;
+        }
+        .opa {
+          // background-color: #bfa;
+          font-size: 14px;
+          font-weight: 400;
+          color: #388be1;
+          cursor: pointer;
+        }
+      }
+      .pa {
+        // left: 0;
+        margin-top: 25px;
+        margin-bottom: 70px;
+        width: 100%;
+        // height: 20px;
+        // background-color: red;
+        display: flex;
+        justify-content: center;
+        // position: absolute;
+        // bottom: 20px;
+      }
+      // .tab {
+      //   .ant-table-thead > tr > th {
+      //     background-color: rgba(239, 244, 252, 1) !important;
+      //   }
+
+      //   th.h {
+      //     background-color: #eff4fc !important;
+      //   }
+
+      //   .ant-table-tbody
+      //     > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
+      //     > td {
+      //     background: #f6f9fd;
+      //   }
+      // }
+    }
+  }
+  // .botm {
+  //   width: 100%;
+  //   height: 100%;
+  //   background-color: red;
+  //   // flex-shrink: 1;
+  // }
+  .btnn {
+    height: 72px;
+    width: 100%;
+    position: absolute;
+    background-color: #fff;
+    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>
\ No newline at end of file
diff --git a/src/views/projectcenter/ProjectManage.vue b/src/views/projectcenter/ProjectManage.vue
index c93a8d1a..49c82cfc 100644
--- a/src/views/projectcenter/ProjectManage.vue
+++ b/src/views/projectcenter/ProjectManage.vue
@@ -522,11 +522,14 @@
 
     <!-- 归属权抽屉 -->
     <proj-owner-ship v-model:ProjOwnervisible="ProjOwnervisible" />
+    <!-- 授权名单抽屉 -->
+    <proj-power-list v-model:ProjPvisible="ProjPvisible" />
   </div>
 </template>
 <script>
 import { reactive, toRefs, onMounted } from "vue";
 import ProjOwnerShip from "../../components/drawers/ProjectOwn";
+import ProjPowerList from "../../components/drawers/ProjPowerList";
 const columns = [
   {
     title: "项目名称",
@@ -583,7 +586,7 @@ const columns = [
 
 export default {
   name: "projectManage",
-  components: { ProjOwnerShip },
+  components: { ProjOwnerShip, ProjPowerList },
   setup() {
     const state = reactive({
       projectNameList: [
@@ -865,6 +868,7 @@ export default {
       doublepro: false,
       doublesonpro: false,
       ProjOwnervisible: false,
+      ProjPvisible: false,
     });
 
     onMounted(() => {
@@ -896,7 +900,13 @@ export default {
                     dropdownClassName="tabledropdown"
                   >
                     <a-select-option value="权限名单" label="权限名单">
-                      <div>权限名单</div>
+                      <div
+                        onClick={() => {
+                          showProjPrower();
+                        }}
+                      >
+                        权限名单
+                      </div>
                     </a-select-option>
                     <a-select-option value="归属权" label="归属权">
                       <div
@@ -952,7 +962,13 @@ export default {
                     dropdownClassName="tabledropdown"
                   >
                     <a-select-option value="权限名单" label="权限名单">
-                      <div>权限名单</div>
+                      <div
+                        onClick={() => {
+                          showProjPrower();
+                        }}
+                      >
+                        权限名单
+                      </div>
                     </a-select-option>
                     <a-select-option value="归属权" label="归属权">
                       <div
@@ -986,7 +1002,13 @@ export default {
                     dropdownClassName="tabledropdown"
                   >
                     <a-select-option value="权限名单" label="权限名单">
-                      <div>权限名单</div>
+                      <div
+                        onClick={() => {
+                          showProjPrower();
+                        }}
+                      >
+                        权限名单
+                      </div>
                     </a-select-option>
                     <a-select-option value="归属权" label="归属权">
                       <div
@@ -1028,7 +1050,13 @@ export default {
                         dropdownClassName="tabledropdown"
                       >
                         <a-select-option value="权限名单" label="权限名单">
-                          <div>权限名单</div>
+                          <div
+                            onClick={() => {
+                              showProjPrower();
+                            }}
+                          >
+                            权限名单
+                          </div>
                         </a-select-option>
                         <a-select-option value="归属权" label="归属权">
                           <div
@@ -1078,7 +1106,13 @@ export default {
                         dropdownClassName="tabledropdown"
                       >
                         <a-select-option value="权限名单" label="权限名单">
-                          <div>权限名单</div>
+                          <div
+                            onClick={() => {
+                              showProjPrower();
+                            }}
+                          >
+                            权限名单
+                          </div>
                         </a-select-option>
                         <a-select-option value="归属权" label="归属权">
                           <div
@@ -1115,7 +1149,13 @@ export default {
                         dropdownClassName="tabledropdown"
                       >
                         <a-select-option value="权限名单" label="权限名单">
-                          <div>权限名单</div>
+                          <div
+                            onClick={() => {
+                              showProjPrower();
+                            }}
+                          >
+                            权限名单
+                          </div>
                         </a-select-option>
                         <a-select-option value="归属权" label="归属权">
                           <div
@@ -1156,7 +1196,13 @@ export default {
                           dropdownClassName="tabledropdown"
                         >
                           <a-select-option value="权限名单" label="权限名单">
-                            <div>权限名单</div>
+                            <div
+                              onClick={() => {
+                                showProjPrower();
+                              }}
+                            >
+                              权限名单
+                            </div>
                           </a-select-option>
                           <a-select-option value="归属权" label="归属权">
                             <div
@@ -1210,7 +1256,13 @@ export default {
                           dropdownClassName="tabledropdown"
                         >
                           <a-select-option value="权限名单" label="权限名单">
-                            <div>权限名单</div>
+                            <div
+                              onClick={() => {
+                                showProjPrower();
+                              }}
+                            >
+                              权限名单
+                            </div>
                           </a-select-option>
                           <a-select-option value="归属权" label="归属权">
                             <div
@@ -1264,7 +1316,13 @@ export default {
                           dropdownClassName="tabledropdown"
                         >
                           <a-select-option value="权限名单" label="权限名单">
-                            <div>权限名单</div>
+                            <div
+                              onClick={() => {
+                                showProjPrower();
+                              }}
+                            >
+                              权限名单
+                            </div>
                           </a-select-option>
                           <a-select-option value="归属权" label="归属权">
                             <div
@@ -1316,7 +1374,13 @@ export default {
                           dropdownClassName="tabledropdown"
                         >
                           <a-select-option value="权限名单" label="权限名单">
-                            <div>权限名单</div>
+                            <div
+                              onClick={() => {
+                                showProjPrower();
+                              }}
+                            >
+                              权限名单
+                            </div>
                           </a-select-option>
                           <a-select-option value="归属权" label="归属权">
                             <div
@@ -1377,7 +1441,13 @@ export default {
                         dropdownClassName="tabledropdown"
                       >
                         <a-select-option value="权限名单" label="权限名单">
-                          <div>权限名单</div>
+                          <div
+                            onClick={() => {
+                              showProjPrower();
+                            }}
+                          >
+                            权限名单
+                          </div>
                         </a-select-option>
                         <a-select-option value="归属权" label="归属权">
                           <div
@@ -1431,7 +1501,13 @@ export default {
                         dropdownClassName="tabledropdown"
                       >
                         <a-select-option value="权限名单" label="权限名单">
-                          <div>权限名单</div>
+                          <div
+                            onClick={() => {
+                              showProjPrower();
+                            }}
+                          >
+                            权限名单
+                          </div>
                         </a-select-option>
                         <a-select-option value="归属权" label="归属权">
                           <div
@@ -1485,7 +1561,13 @@ export default {
                         dropdownClassName="tabledropdown"
                       >
                         <a-select-option value="权限名单" label="权限名单">
-                          <div>权限名单</div>
+                          <div
+                            onClick={() => {
+                              showProjPrower();
+                            }}
+                          >
+                            权限名单
+                          </div>
                         </a-select-option>
                         <a-select-option value="归属权" label="归属权">
                           <div
@@ -1539,7 +1621,13 @@ export default {
                         dropdownClassName="tabledropdown"
                       >
                         <a-select-option value="权限名单" label="权限名单">
-                          <div>权限名单</div>
+                          <div
+                            onClick={() => {
+                              showProjPrower();
+                            }}
+                          >
+                            权限名单
+                          </div>
                         </a-select-option>
                         <a-select-option value="归属权" label="归属权">
                           <div
@@ -1604,7 +1692,13 @@ export default {
                   dropdownClassName="tabledropdown"
                 >
                   <a-select-option value="权限名单" label="权限名单">
-                    <div>权限名单</div>
+                    <div
+                      onClick={() => {
+                        showProjPrower();
+                      }}
+                    >
+                      权限名单
+                    </div>
                   </a-select-option>
                   <a-select-option value="归属权" label="归属权">
                     <div
@@ -1750,6 +1844,9 @@ export default {
     const showProjOwner = () => {
       state.ProjOwnervisible = true;
     };
+    const showProjPrower = () => {
+      state.ProjPvisible = true;
+    };
     return {
       ...toRefs(state),
       columns,
@@ -1765,6 +1862,7 @@ export default {
       closeModal3,
       getTableDate,
       showProjOwner,
+      showProjPrower,
     };
   },
 };
diff --git a/src/views/projectcenter/TaskAdd.vue b/src/views/projectcenter/TaskAdd.vue
index 5576c03a..cc7cc8b6 100644
--- a/src/views/projectcenter/TaskAdd.vue
+++ b/src/views/projectcenter/TaskAdd.vue
@@ -5,10 +5,12 @@
         <div class="tit">
           阶段<img
             src="../../assets/images/projectadd/right.png"
-            style="margin-left: 10px"
+            style="margin-left: 10px; cursor: pointer"
+            @click="showCancel"
           />
         </div>
-        <div class="btn btn3" @click="showModal" style="margin-left: 19px">
+        <!-- @click="showModal" -->
+        <div class="btn btn3" @click="showConfirm" style="margin-left: 19px">
           <div class="search"></div>
           <div class="btnText">添加阶段</div>
         </div>
@@ -309,6 +311,7 @@
         wrapClassName="addstage"
         width="624px"
         height="388px"
+        centered="true"
       >
         <div
           class="modalHeader"
@@ -405,6 +408,66 @@
         </div>
       </a-modal>
     </div>
+    <!-- 确认添加阶段弹窗 -->
+    <a-modal
+      v-model:visible="confirmModal"
+      :footer="null"
+      :closable="cC"
+      wrapClassName="ConfirmModal"
+      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="closeConfirm"></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="showModal">确定</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-modal>
+    <!-- 确认取消阶段弹窗 -->
+    <a-modal
+      v-model:visible="cancelModal"
+      :footer="null"
+      :closable="cC"
+      wrapClassName="ConfirmModal"
+      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="closeCancel"></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="showModal">确定</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-modal>
   </div>
 </template>
 
@@ -729,6 +792,9 @@ export default {
       addvotevisible: false,
       stage: false,
       selectedRowKeys: [],
+      confirmModal: false, //确认添加阶段弹窗
+      cC: false,
+      cancelModal: false, //确认取消阶段弹窗
     });
     const selectProjectName = (value, index) => {
       console.log("value", value, index);
@@ -870,8 +936,11 @@ export default {
     //     40 +
     //     "px";
     // };
+    //添加阶段详情
     const showModal = () => {
       state.stage = true;
+      //关闭确认框
+      closeConfirm();
     };
     const closeModal = () => {
       state.stage = false;
@@ -922,6 +991,19 @@ export default {
     const showDrawerAddVote = () => {
       state.addvotevisible = true;
     };
+    const showConfirm = () => {
+      state.confirmModal = true;
+    };
+    const closeConfirm = () => {
+      state.confirmModal = false;
+    };
+    const showCancel = () => {
+      state.cancelModal = true;
+    };
+    const closeCancel = () => {
+      state.cancelModal = false;
+    };
+
     return {
       ...toRefs(state),
       selectProjectName,
@@ -945,6 +1027,10 @@ export default {
       showDrawerAddEval,
       showDrawerAddInvist,
       showDrawerAddVote,
+      showConfirm,
+      closeConfirm,
+      showCancel,
+      closeCancel,
     };
   },
 };
@@ -957,6 +1043,117 @@ export default {
   width: 384px;
   height: 88px;
 }
+.ConfirmModal {
+  .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: 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;
+              .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;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
 .addstage {
   .ant-modal {
     .ant-modal-body {