From b198c310575d2f6d035c8cc4762831b3ef79e4ff Mon Sep 17 00:00:00 2001
From: yuping <82253452@qq.com>
Date: Fri, 24 Feb 2023 22:55:22 +0800
Subject: [PATCH] -- fix bug

---
 src/components/common/CommonAlert.vue | 118 ++++++++-
 src/views/projectcenter/TaskAdd.vue   | 355 ++++++++------------------
 2 files changed, 217 insertions(+), 256 deletions(-)

diff --git a/src/components/common/CommonAlert.vue b/src/components/common/CommonAlert.vue
index 46b81112..f2847e0b 100644
--- a/src/components/common/CommonAlert.vue
+++ b/src/components/common/CommonAlert.vue
@@ -2,8 +2,9 @@
   <a-modal
       :visible="true"
       :footer="null"
+      :title="null"
+      :centere="true"
       :closable="false"
-      wrapClassName="DelModal"
       style="margin-top: 400px"
       :zIndex="9999"
       @cancel="close"
@@ -66,5 +67,118 @@ function handleConfirm() {
   props.ok()
   props.close()
 }
-
 </script>
+<style lang="scss" scoped>
+.delete {
+  min-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-icons {
+        width: 16px;
+        height: 16px;
+        position: relative;
+        margin-right: 10px;
+
+        img {
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          top: 0px;
+          left: 0px;
+          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%;
+      padding: 0 30px;
+      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>
+<style lang="scss">
+.ant-modal-body {
+  padding: 0 !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/projectcenter/TaskAdd.vue b/src/views/projectcenter/TaskAdd.vue
index 68f0c384..1ce6fe65 100644
--- a/src/views/projectcenter/TaskAdd.vue
+++ b/src/views/projectcenter/TaskAdd.vue
@@ -5,8 +5,8 @@
         <div class="leftmain">
           <div class="tit">
             阶段
-              <img src="../../assets/images/projectadd/right.png" style="margin-left: 10px; cursor: pointer"
-                  @click="showCancel" v-show="projectInfo.stageList[0].id != '0'" />
+            <img src="../../assets/images/projectadd/right.png" style="margin-left: 10px; cursor: pointer"
+                 @click="removeAllLevel" v-show="projectInfo.stageList[0].id != '0'"/>
           </div>
           <div class="btn btn3" @click="showModal" style="margin-left: 19px">
             <div class="search"></div>
@@ -14,8 +14,9 @@
           </div>
           <div class="maincon" style="background-color: #fff">
             <Draggable v-model="projectInfo.stageList" chosenClass="chosen" ghostClass="ghost" forceFallback="true"
-                       group="stage" animation="500" v-if="JSON.stringify(projectInfo.stageList[0].taskDraftDtoList[0]) != '{}'">
-              <template #item="{ element,index }" >
+                       group="stage" animation="500"
+                       v-if="JSON.stringify(projectInfo.stageList[0].taskDraftDtoList[0]) != '{}'">
+              <template #item="{ element,index }">
                 <div class="items" v-if="element.id !=='0' && !element.deleted"
                      :class="activeIndex === index ? 'active' : ''"
                      @click="changeStageIndex(index)">
@@ -37,7 +38,7 @@
                       <div class="imgIcon" @click="showModal(index)"></div>
                     </div>
                     <div class="boxs_right">
-                      <div class="imgIcon" @click="showDeleteStage(index)"></div>
+                      <div class="imgIcon" @click="deleteStage(index)"></div>
                     </div>
                   </div>
                   <div class="items2">
@@ -101,13 +102,13 @@
             <div v-if="key!=13">
               <component :is="value.component" :ref="el=>courseRef['el'+key]=el" :type="key"
                          v-model:task-list="projectInfo.stageList[activeIndex].taskDraftDtoList">
-              <div class="itcon">
-                <div class="img">
-                  <img :src="value.img"/>
+                <div class="itcon">
+                  <div class="img">
+                    <img :src="value.img"/>
+                  </div>
+                  <div class="text">{{ value.name }}</div>
                 </div>
-                <div class="text">{{ value.name }}</div>
-              </div>
-            </component>
+              </component>
             </div>
             <div>
             </div>
@@ -121,7 +122,7 @@
               <button class="btn" @click="showChangeModal">
                 移动任务到阶段
               </button>
-              <div class="edit" @click="showdeAll">
+              <div class="edit" @click="deleteTaskAll">
                 <img class="editimg" src="../../assets/images/projectadd/delete.png"/>
                 <span class="editext">批量删除</span>
               </div>
@@ -250,20 +251,14 @@
                         ">
                         <div class="opa">
                           <div class="opacation">
-								<span  style="
+								<span style="
                                 color: #4ea6ff;
                                 margin-right: 25px;
                                 cursor: pointer;
                               " @click="editTaskForType(element,index)">
 															编辑
 														</span>
-                            <!--<span v-else style="-->
-															<!--color: #4ea6ff;-->
-															<!--margin-right: 55px;-->
-															<!--cursor: pointer;-->
-															<!--">-->
-														<!--</span>-->
-                            <span style="color: #4ea6ff; cursor: pointer" @click="showDelete(index)">
+                            <span style="color: #4ea6ff; cursor: pointer" @click="confirmDelTask(index)">
 															删除
 														</span>
                           </div>
@@ -281,58 +276,57 @@
 
     <div class="footbtn">
       <div class="btnbox">
-        <a-button class="btn btn2" @click="temporaryStorage" :loading="templateLoading">暂存</a-button>
+        <a-button class="btn btn2" @click="temporaryStorage" :loading="confirmLoading">暂存</a-button>
         <a-button class="btn btn2" @click="submitStorage" :loading="confirmLoading">确定</a-button>
         <a-button class="btn btn1" @click="cancelStorage" :loading="cancleLoading">取消</a-button>
       </div>
     </div>
 
     <!-- 添加阶段弹窗 -->
-    <div>
-      <a-modal v-model:visible="stage" :title="null" @ok="closeModal" :footer="null" :closable="false"
-               wrapClassName="addstage" width="624px" height="388px" :centered="true" @cancel="closeModal">
-        <div class="modalHeader" style="
+    <a-modal v-model:visible="stage" :title="null" @ok="closeModal" :footer="null" :closable="false"
+             wrapClassName="addstage" width="624px" height="388px" :centered="true" @cancel="closeModal">
+      <div class="modalHeader" style="
             width: 100%;
             height: 68px;
             display: flex;
             align-items: center;
             justify-content: space-between;
           ">
-          <div class="headerLeft" style="margin-left: 32px">
-            <span class="headerLeftText" style="font-size: 16px">编辑/添加阶段</span>
+        <div class="headerLeft" style="margin-left: 32px">
+          <span class="headerLeftText" style="font-size: 16px">编辑/添加阶段</span>
+        </div>
+        <div style="cursor: pointer; margin-right: 32px" @click="closeModal">
+          <img style="width: 22px; height: 22px" src="../../assets/images/basicinfo/close22.png"/>
+        </div>
+      </div>
+      <div class="modalMain" style="width: 100%">
+        <div class="name">
+          <div class="namebox">
+            <div>
+              <img src="@/assets/images/coursewareManage/asterisk.png" alt=""/>
+            </div>
+            <div class="inname">阶段名称：</div>
           </div>
-          <div style="cursor: pointer; margin-right: 32px" @click="closeModal">
-            <img style="width: 22px; height: 22px" src="../../assets/images/basicinfo/close22.png"/>
+          <div class="in">
+            <a-input v-model:value="formValue.name" show-count :maxlength="20" placeholder="请输入阶段名称"/>
           </div>
         </div>
-        <div class="modalMain" style="width: 100%">
-          <div class="name">
-            <div class="namebox">
-              <div>
-                <img src="@/assets/images/coursewareManage/asterisk.png" alt=""/>
-              </div>
-              <div class="inname">阶段名称：</div>
-            </div>
-            <div class="in">
-              <a-input v-model:value="formValue.name" show-count :maxlength="20" placeholder="请输入阶段名称"/>
-            </div>
+        <div class="name" style="display: flex; align-items: flex-start">
+          <div class="namebox">
+            <div class="inname">阶段说明：</div>
           </div>
-          <div class="name" style="display: flex; align-items: flex-start">
-            <div class="namebox">
-              <div class="inname">阶段说明：</div>
-            </div>
-            <div class="intext" style="margin-left: 14px">
-              <a-textarea v-model:value="formValue.remark" style="height: 88px" show-count :maxlength="100"
-                          placeholder="请输入阶段说明"/>
-            </div>
+          <div class="intext" style="margin-left: 14px">
+            <a-textarea v-model:value="formValue.remark" style="height: 88px" show-count :maxlength="100"
+                        placeholder="请输入阶段说明"/>
           </div>
-          <div style="
+        </div>
+        <div style="
               display: flex;
               width: 100%;
               justify-content: center;
               margin-top: 40px;
             ">
-            <button @click="closeModal" style="
+          <button @click="closeModal" style="
                 cursor: pointer;
                 height: 40px;
                 width: 100px;
@@ -341,9 +335,9 @@
                 color: #4ea6ff;
                 background-color: #ffffff;
               ">
-              取消
-            </button>
-            <button @click="editStage" style="
+            取消
+          </button>
+          <button @click="editStage" style="
                 cursor: pointer;
                 margin-left: 16px;
                 margin-bottom: 40px;
@@ -354,107 +348,8 @@
                 color: #ffffff;
                 background-color: #4ea6ff;
               ">
-              确定
-            </button>
-          </div>
-        </div>
-      </a-modal>
-    </div>
-    <!-- 确认添加阶段弹窗 -->
-    <a-modal v-model:visible="confirmModal" :footer="null" 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" @click="closeConfirm">
-              <div class="btnText">取消</div>
-            </div>
-            <div class="del_btn btn2" @click="showModal">
-              <div class="btnText">确定</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </a-modal>
-    <!-- 确认取消阶段弹窗 -->
-    <a-modal v-model:visible="cancelModal" :footer="null" 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" @click="closeCancel">
-              <div class="btnText">取消</div>
-            </div>
-            <div class="del_btn btn2" @click="removeAllLevel">
-              <div class="btnText">确定</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </a-modal>
-    <!-- 确认删除任务弹窗 -->
-    <a-modal v-model:visible="deleteModal" :footer="null" 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="closeDelete"></div>
-          </div>
-          <div class="body">
-            <span>您确定要删除此任务吗</span>
-          </div>
-          <div class="del_btnbox">
-            <div class="del_btn btn1" @click="closeDelete">
-              <div class="btnText">取消</div>
-            </div>
-            <div class="del_btn btn2" @click="confirmDelTask">
-              <div class="btnText">确定</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </a-modal>
-    <a-modal v-model:visible="deAll" :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="closeDeAll"></div>
-          </div>
-          <div class="body">
-            <span>您确定要批量删除任务吗</span>
-          </div>
-          <div class="del_btnbox">
-            <div class="del_btn btn1" @click="closeDeAll">
-              <div class="btnText">取消</div>
-            </div>
-            <div class="del_btn btn2" @click="deleteTaskAll">
-              <div class="btnText">确定</div>
-            </div>
-          </div>
+            确定
+          </button>
         </div>
       </div>
     </a-modal>
@@ -490,34 +385,6 @@
         </div>
       </div>
     </a-modal>
-
-    <!-- 是否删除阶段弹窗 -->
-    <a-modal v-model:visible="deleteStageModal" :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="closeDeleteStage"></div> -->
-          </div>
-          <div class="body">
-            <span style="width:320px;display:flex;justify-content:center;align-items:center;">{{
-                projectInfo.stageList?.length === 1 ? "当前为最后一个阶段，删除后任务将被移出，为无阶段模式，确认删除阶段吗?" : "您确定要删除此阶段"
-              }}</span>
-          </div>
-          <div class="del_btnbox">
-            <div class="del_btn btn1" @click="closeDeleteStage">
-              <div class="btnText">取消</div>
-            </div>
-            <div class="del_btn btn2" @click="deleteStage">
-              <div class="btnText">确定</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </a-modal>
   </div>
 </template>
 
@@ -531,23 +398,17 @@ import {useRoute} from "vue-router";
 import {TASK_TYPE} from "@/utils/const";
 import {request} from "@/api/request";
 import {PROJECT_DETAIL_MODIFY, PROJECT_RELEASE} from "@/api/apis";
+import dialog from "@/utils/dialog";
 
 const route = useRoute();
 const courseRef = ref({})
 const visiblene = ref(false);
-const deAll = ref(false);
-const deleteModal = ref(false);
-const confirmModal = ref(false);
 const stage = ref(false);
-const cancelModal = ref(false);
-const deleteStageModal = ref(false);
-const templateLoading = ref(false);
 const confirmLoading = ref(false);
 const cancleLoading = ref(false);
 const projectInfo = ref({stageList: [{taskDraftDtoList: [{}]}], projectInfo: {}});
 const activeIndex = ref(0);
 const moveChapterIndex = ref(0);
-const deleteIndex = ref(0);
 const formValue = ref({taskDraftDtoList: []});
 
 
@@ -611,16 +472,34 @@ const moveTask = () => {
 };
 //批量删除
 const deleteTaskAll = () => {
-  projectInfo.value.stageList[activeIndex.value].taskDraftDtoList.filter(t => t.checked).forEach(t => {
-    t.checked = false;
-    t.deleted = true;
-  })
-  deAll.value = false;
+  if (!projectInfo.value?.stageList[activeIndex.value]?.taskDraftDtoList?.filter(t => t.checked)?.length) {
+    message.warning("请选择要删除的任务！");
+    return
+  }
+  dialog({
+    content: '确定要批量删除任务吗?',
+    ok: () => {
+      projectInfo.value.stageList[activeIndex.value].taskDraftDtoList.filter(t => t.checked).forEach((t,i) => {
+        if(t.id){
+          t.checked = false;
+          t.deleted = true;
+        }else{
+          projectInfo.value.stageList[activeIndex.value].taskDraftDtoList.splice(i,1)
+        }
+
+      })
+    },
+  });
 };
 
-const confirmDelTask = () => {
-  projectInfo.value.stageList[activeIndex.value].taskDraftDtoList[deleteIndex.value].deleted = true
-  deleteModal.value = false
+const confirmDelTask = (index) => {
+  dialog({
+    content: '确定要删除此任务吗?',
+    ok: () => {
+      message.success("删除成功");
+      projectInfo.value.stageList[activeIndex.value].taskDraftDtoList[index].id?(projectInfo.value.stageList[activeIndex.value].taskDraftDtoList[index].deleted = true):projectInfo.value.stageList[activeIndex.value].taskDraftDtoList.splice(index,1)
+    },
+  });
 };
 //关闭添加阶段弹窗
 const closeModal = () => {
@@ -650,26 +529,16 @@ function editStage() {
   stage.value = false
 }
 
-//打开删除阶段弹窗
-const showDeleteStage = (index) => {
-  deleteStageModal.value = true;
-  deleteIndex.value = index;
-};
-//关闭删除阶段弹窗
-const closeDeleteStage = () => {
-  deleteStageModal.value = false;
-};
 //删除阶段
 const deleteStage = () => {
-  console.log(12345);
-  if (projectInfo.value.stageList.length === 1) {
-    projectInfo.value.stageList = [{id: '0', stageId: '0', name: '', remark: '', taskDraftDtoList: []}];
-    deleteStageModal.value = false;
-    return
-  }
-  projectInfo.value.stageList.splice(activeIndex.value, 1);
-  activeIndex.value && (activeIndex.value = activeIndex.value-1);
-  deleteStageModal.value = false;
+  dialog({
+    content: projectInfo.value.stageList.length === 1 ? "当前为最后一个阶段，删除后任务将被移出，为无阶段模式，确认删除阶段吗?" : '确认删除此阶段吗?',
+    ok: () => {
+      message.success("删除成功");
+      projectInfo.value.stageList[activeIndex.value].id?(projectInfo.value.stageList[activeIndex.value].deleted = true):projectInfo.value.stageList.splice(activeIndex.value,1)
+      activeIndex.value && (activeIndex.value = activeIndex.value - 1);
+    },
+  });
 };
 onMounted(() => {
   document.getElementsByTagName("main")[0].style.background = "rgb(245, 247, 250,1)";
@@ -681,32 +550,22 @@ onUnmounted(() => {
   document.getElementsByTagName("main")[0].style.background = "#ffffff";
   document.getElementsByTagName("main")[0].style.boxShadow = "0px 1px 35px 0px rgba(118, 136, 166, 0.07)";
 });
-const closeConfirm = () => {
-  confirmModal.value = false;
-};
-const showCancel = () => {
-  cancelModal.value = true;
-};
-const closeCancel = () => {
-  cancelModal.value = false;
-};
-const showDelete = (index) => {
-  deleteModal.value = true;
-  deleteIndex.value = index
-};
-const closeDelete = () => {
-  deleteModal.value = false;
-};
 // 删除所有阶段
 const removeAllLevel = () => {
-  console.log(projectInfo.value.stageList)
-  projectInfo.value.stageList.forEach(t => {
-    if(t.id!=='0'){
-      t.checked = false;
-      t.deleted = true;
-    }
-  })
-  cancelModal.value = false;
+  dialog({
+    content: '确定要删除所有阶段吗?',
+    ok: () => {
+      message.success("删除成功");
+      projectInfo.value.stageList.forEach((t,i) => {
+        if(t.id){
+          t.checked = false;
+          t.deleted = true;
+        }else{
+          projectInfo.value.stageList.splice(i,1)
+        }
+      })
+    },
+  });
 };
 //全选任务或全不选任务
 const selectRowAll = () => {
@@ -716,29 +575,17 @@ const selectRowAll = () => {
   }
   projectInfo.value.stageList[activeIndex.value].taskDraftDtoList.forEach(t => t.checked = true)
 };
-const showdeAll = () => {
-  if (!projectInfo.value?.stageList[activeIndex.value]?.taskDraftDtoList?.filter(t => t.checked)?.length) {
-    message.warning("请选择要删除的任务！");
-    return
-  }
-  deAll.value = true
-};
-const closeDeAll = () => {
-  deAll.value = false;
-};
 
 //暂存
 const temporaryStorage = async () => {
-  templateLoading.value = true
-  console.log(projectInfo.value)
+  confirmLoading.value = true
   await request(PROJECT_DETAIL_MODIFY, projectInfo.value)
   await getTask()
   message.success("暂存成功");
-  templateLoading.value = false
+  confirmLoading.value = false
 };
 //确定
 const submitStorage = async () => {
-  // debugger
   confirmLoading.value = true
   projectInfo.value.projectInfo.status === 3 ? await request(PROJECT_RELEASE, {projectId: route.query.projectId}) : await request(PROJECT_DETAIL_MODIFY, projectInfo.value)
   message.success("阶段和任务数据已保存")
@@ -1717,7 +1564,7 @@ const cancelStorage = async () => {
 
         .bi {
           width: 63px;
-          height: 23;
+          height: 23px;
           background-color: #5dc988;
           line-height: 23px;
           position: absolute;