feat:项目 路径图发布撤回结束复制存为模板

src/views/learningpath/LevelAdd.vue

@@ -2,7 +2,8 @@
   <div class="addwrapper">
     <div class="addhead">
       <div class="leftimg">
-        <img class="img" :src="picUrl" />
+        <!-- <img class="img" :src="picUrl" /> -->
+        <img class="img" src="../../assets/images/leveladd/1.png" />
       </div>
       <div class="imgfor">
         <div class="forz">{{ styTitle }}</div>
@@ -12,19 +13,59 @@
         <img class="img1" src="../../assets/images/leveladd/ma.png" />
         <div class="line"></div>
         <img class="img2" src="../../assets/images/leveladd/pub.png" />
-        <div class="pub">发布</div>
+        <!-- 已发布的显示 -->
+        <div
+          class="pub"
+          style="width: 28px"
+          v-if="action == 1"
+          @click="showBackModal"
+        >
+          {{ act }}
+        </div>
+        <!-- 未发布/草稿的显示 -->
+        <div
+          class="pub"
+          style="width: 28px"
+          v-if="action == 0"
+          @click="showPub"
+        >
+          {{ act }}
+        </div>
+        <!-- 已结束的显示 -->
+        <div class="pub" style="width: 28px" v-if="action == -1">
+          {{ act }}
+        </div>
         <div class="line"></div>
         <img
           style="margin-right: 15px"
           class="img2"
           src="../../assets/images/leveladd/more.png"
         />
-        <div class="more">
+        <!-- 草稿/未发布的显示 -->
+        <div class="more" v-if="action == 0">
           <span style="color: #7096e3; cursor: pointer">更多</span>
           <div class="moreArrow"></div>
           <div class="moreItems">
-            <div class="sammo">撤回</div>
-            <div class="sammo">复制</div>
+            <!-- <div class="sammo">撤回</div> -->
+            <div class="sammo" @click="showCopy">复制</div>
+          </div>
+        </div>
+        <!-- 已发布的显示 -->
+        <div class="more" v-if="action == 1">
+          <span style="color: #7096e3; cursor: pointer">更多</span>
+          <div class="moreArrow"></div>
+          <div class="moreItems">
+            <div class="sammo" @click="showStop">结束</div>
+            <div class="sammo" @click="showCopy">复制</div>
+          </div>
+        </div>
+        <!-- 已结束的显示 -->
+        <div class="more" v-if="action == -1">
+          <span style="color: #7096e3; cursor: pointer">更多</span>
+          <div class="moreArrow"></div>
+          <div class="moreItems">
+            <!-- <div class="sammo">结束</div> -->
+            <div class="sammo" @click="showCopy">复制</div>
           </div>
         </div>
         <div class="line"></div>
@@ -920,6 +961,172 @@
     <div class="aeLoading" :style="{ display: addLoading ? 'flex' : 'none' }">
       <a-spin :spinning="addLoading" tip="添加中..." />
     </div>
+    <!-- 发布弹窗 -->
+    <a-modal
+      v-model:visible="pub"
+      :title="null"
+      :footer="null"
+      :closable="false"
+      wrapClassName="pub"
+      width="679px"
+      height="437px"
+    >
+      <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 style="width: 15px; height: 15px"
+            ><img src="../../assets/images/taskpage/pub.png"
+          /></span>
+          <span
+            class="headerLeftText"
+            style="font-size: 16px; margin-left: 10px"
+            >路径发布</span
+          >
+        </div>
+        <div style="cursor: pointer; margin-right: 32px" @click="closePub">
+          <img
+            style="width: 22px; height: 22px"
+            src="../../assets/images/basicinfo/close22.png"
+          />
+        </div>
+      </div>
+      <div class="modalMain">
+        <div class="projectname">产品经理上升路径</div>
+        <!-- <div class="projecttime">
+          <span class="timeti">路径时间：</span
+          ><span class="timeme">2022/08/01-2022/08/30</span>
+        </div> -->
+        <div class="projectbox">
+          <div class="promessage">
+            <div class="messageme">路径信息</div>
+            <div class="messagege">当前路径共0个关卡，0个任务</div>
+          </div>
+          <div class="stumessage">
+            <div class="messageme1">学员信息</div>
+            <div class="messagege1">路径共{{ routeStudentsNum }}名学员</div>
+          </div>
+        </div>
+        <!-- <div class="send">
+          <a-switch v-model:checked="checked" size="small" />
+          <span class="sendtext">发送路径通知</span>
+        </div>
+        <div class="ckb">
+          <a-checkbox v-model:checked="checkedTeacher"
+            ><span class="sendpeo">发给老师</span></a-checkbox
+          >
+          <a-checkbox v-model:checked="checkStu"
+            ><span class="sendpeo">发给学员</span></a-checkbox
+          >
+        </div> -->
+        <div class="pubtn">
+          <a-button class="pubtn1" @click="closePub">取消</a-button>
+          <a-button class="pubtn2" @click="releaseLearnPath">发布</a-button>
+        </div>
+      </div>
+    </a-modal>
+    <!-- 撤回路径弹窗 -->
+    <a-modal
+      v-model:visible="backModal"
+      :footer="null"
+      :closable="closeBack"
+      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="closeBackModal"></div>
+          </div>
+          <div class="body">
+            <span>是否撤回路径</span>
+            <div class="back">（路径撤回后学员进度保留，发布后可继续学习）</div>
+          </div>
+          <div class="del_btnbox">
+            <div class="del_btn btn1" @click="closeBackModal">
+              <div class="btnText">取消</div>
+            </div>
+            <div class="del_btn btn2" @click="recallPath">
+              <div class="btnText">确定</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-modal>
+    <!-- 复制路径弹窗 -->
+    <a-modal
+      v-model:visible="dcopyModal"
+      :footer="null"
+      :closable="dcloseCopy"
+      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="closeCopy"></div>
+          </div>
+          <div class="body">
+            <span>您确定要复制此路径吗</span>
+          </div>
+          <div class="del_btnbox">
+            <div class="del_btn btn1" @click="closeCopy">
+              <div class="btnText">取消</div>
+            </div>
+            <div class="del_btn btn2" @click="sureCopy">
+              <div class="btnText">确定</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-modal>
+    <!-- 结束路径弹窗 -->
+    <a-modal
+      v-model:visible="stopModal"
+      :footer="null"
+      :closable="dicloseStop"
+      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="closeStopModal"></div>
+          </div>
+          <div class="body">
+            <!-- <span>您确定要停用此路径吗</span> -->
+            <span>是否结束项目</span>
+            <div class="back">
+              （项目结束后学员将无法继续学习，此操作不可逆）
+            </div>
+          </div>
+          <div class="del_btnbox">
+            <div class="del_btn btn1" @click="closeStopModal">
+              <div class="btnText">取消</div>
+            </div>
+            <div class="del_btn btn2" @click="stopLearnPath">
+              <div class="btnText">确定</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-modal>
   </div>
 </template>
 <script>
@@ -942,6 +1149,7 @@ import { getRouterOverview } from "@/api/indexLearningPath";
 import { GetRouterDetail } from "@/api/indexTask";
 import * as api from "../../api/index1";
 import { toDate } from "../../api/method";
+import { handleLearnPath } from "../../api/index1";
 
 export default {
   name: "LevelAdd",
@@ -981,6 +1189,8 @@ export default {
       styTitle: null,
       cretime: null,
       picUrl: null,
+      action: null,
+      act: null,
       // 共享文档列表
       docList: [
         {
@@ -1046,6 +1256,14 @@ export default {
       visible: false, //时间管理
       TMvisible: false, //考试管理
       FaceVisivle: false, //面授管理
+      pub: false, //发布弹窗
+      backModal: false, //撤回弹窗
+      dcopyModal: false, //复制弹窗
+      closeBack: false,
+      routeStudentsNum: null,
+      dcloseCopy: false,
+      dicloseCopy: false,
+      stopModal: false, //结束弹窗
       //关卡的数据
       level: [
         // {
@@ -1386,14 +1604,7 @@ export default {
     onMounted(() => {
       state.addLoading = true;
       getOverview();
-      GetRouterDetail(state.routerId).then((res) => {
-        state.styTitle = res.data.data.routerInfo.name;
-        state.cretime = toDate(
-          res.data.data.routerInfo.createTime / 1000,
-          "Y-M-D h:m"
-        );
-        state.picUrl = res.data.data.routerInfo.picUrl;
-      });
+      reget();
     });
 
     // 获取项目概览
@@ -1478,6 +1689,147 @@ export default {
         },
       });
     };
+    const closePub = () => {
+      state.pub = false;
+    };
+
+    //确定发布
+    const releaseLearnPath = () => {
+      // console.log("state.releasePathId", state.releasePathId);
+      let obj = {
+        routerId: state.routerId,
+        type: 1,
+      };
+      handleLearnPath(obj)
+        .then((res) => {
+          console.log("发布成功", res);
+          message.destroy();
+          message.success("发布成功");
+          state.pub = false;
+          // getLearnPath();
+          reget();
+        })
+        .catch((err) => {
+          console.log("发布失败", err);
+        });
+    };
+    //显示发布弹窗
+    const showPub = () => {
+      state.pub = true;
+      // state.releasePathId = routerId;
+      //获取学员总数
+      let obj = {
+        pageNo: 0,
+        pageSize: 0,
+        routerId: state.routerId,
+      };
+      api
+        .getStudent(obj)
+        .then((res) => {
+          if (res.status === 200) {
+            // console.log("res", res.data.data);
+            state.routeStudentsNum = res.data.data.total;
+          }
+        })
+        .catch((err) => {
+          console.log("err", err);
+        });
+
+      //获取学习路径详细信息
+      // api
+      //   .getRouterDetail(routerId)
+      //   .then((res) => {
+      //     console.log("学习路径详情", res);
+      //   })
+      //   .catch((err) => {
+      //     console.log("学习路径详情获取错误", err);
+      //   });
+    };
+    //显示撤回弹窗
+    const showBackModal = () => {
+      state.backModal = true;
+    };
+    //关闭撤回弹窗
+    const closeBackModal = () => {
+      state.backModal = false;
+    };
+    //确定撤回
+    const recallPath = () => {
+      let obj = {
+        routerId: state.routerId,
+        type: 0,
+      };
+      api
+        .handleLearnPath(obj)
+        .then((res) => {
+          console.log("撤回成功", res);
+          message.destroy();
+          message.success("撤回成功");
+          state.backModal = false;
+          reget();
+        })
+        .catch((err) => {
+          console.log("撤回失败", err);
+        });
+    };
+    //显示复制弹窗
+    const showCopy = () => {
+      state.dcopyModal = true;
+    };
+    //关闭复制弹窗
+    const closeCopy = () => {
+      state.dcopyModal = false;
+    };
+    //确认复制
+    const sureCopy = () => {
+      state.dcopyModal = false;
+    };
+    const showStop = () => {
+      state.stopModal = true;
+    };
+    //关闭结束窗口
+    const closeStopModal = () => {
+      state.stopModal = false;
+    };
+    //确认结束
+    const stopLearnPath = () => {
+      let obj = {
+        routerId: state.routerId,
+        type: -1,
+      };
+      api
+        .handleLearnPath(obj)
+        .then((res) => {
+          console.log("停用成功", res);
+          message.destroy();
+          message.success("停用成功");
+          state.stopModal = false;
+          reget();
+          // getLearnPath();
+        })
+        .catch((err) => {
+          console.log("停用失败", err);
+        });
+    };
+    const reget = () => {
+      GetRouterDetail(state.routerId).then((res) => {
+        state.styTitle = res.data.data.routerInfo.name;
+        state.cretime = toDate(
+          res.data.data.routerInfo.createTime / 1000,
+          "Y-M-D h:m"
+        );
+        state.picUrl = res.data.data.routerInfo.picUrl;
+        state.action = res.data.data.routerInfo.status;
+        state.act =
+          state.action == 0
+            ? "发布"
+            : state.action == 1
+            ? "撤回"
+            : state.action == -1
+            ? ""
+            : "-";
+      });
+    };
 
     return {
       ...toRefs(state),
@@ -1509,6 +1861,19 @@ export default {
       checkType,
       handleChange,
       delConfirm,
+      closePub,
+      releaseLearnPath,
+      showPub,
+      showBackModal,
+      closeBackModal,
+      recallPath,
+      showCopy,
+      closeCopy,
+      sureCopy,
+      closeStopModal,
+      stopLearnPath,
+      showStop,
+      reget,
     };
   },
 };
@@ -1520,6 +1885,142 @@ export default {
   display: block;
   clear: both;
 }
+.pub {
+  .ant-modal {
+    .ant-modal-body {
+      padding: 0;
+      .modalHeader {
+        background: linear-gradient(
+          rgba(78, 166, 255, 0.2) 0%,
+          rgba(78, 166, 255, 0) 100%
+        );
+      }
+      .modalMain {
+        .projectname {
+          color: rgba(79, 81, 86, 1);
+          font-size: 14px;
+          line-height: 36px;
+          margin-left: 62px;
+          font-weight: 500;
+        }
+        .projecttime {
+          margin-left: 221px;
+          .timeti {
+            color: rgba(153, 155, 163, 1);
+            font-size: 14px;
+            line-height: 36px;
+          }
+          .timeme {
+            color: rgba(79, 81, 86, 1);
+            font-size: 14px;
+            line-height: 36px;
+          }
+        }
+        .projectbox {
+          margin-top: 26px;
+          display: flex;
+          justify-content: center;
+          .promessage {
+            width: 280px;
+            height: 110px;
+            background: linear-gradient(
+              180deg,
+              rgba(254, 243, 221, 1),
+              rgba(255, 250, 240, 1)
+            );
+            border-radius: 10px;
+            margin-right: 7px;
+            .messageme {
+              color: rgba(255, 182, 78, 1);
+              font-size: 14px;
+              line-height: 36px;
+              margin-top: 17px;
+              margin-left: 30px;
+            }
+            .messagege {
+              color: rgba(153, 155, 163, 1);
+              font-size: 14px;
+              margin-left: 30px;
+            }
+          }
+          .stumessage {
+            width: 280px;
+            height: 110px;
+            background: linear-gradient(
+              180deg,
+              rgba(221, 234, 255, 1),
+              rgba(240, 248, 254, 1)
+            );
+            border-radius: 10px;
+            .messageme1 {
+              color: rgba(78, 166, 255, 1);
+              font-size: 14px;
+              line-height: 36px;
+              margin-top: 17px;
+              margin-left: 30px;
+            }
+            .messagege1 {
+              color: rgba(153, 155, 163, 1);
+              font-size: 14px;
+              margin-left: 30px;
+            }
+          }
+        }
+        .send {
+          margin-top: 30px;
+          margin-left: 61px;
+          .sendtext {
+            margin-left: 11px;
+            color: rgba(109, 117, 132, 1);
+            font-size: 14px;
+          }
+        }
+        .ckb {
+          margin-top: 20px;
+          margin-left: 62px;
+          .sendpeo {
+            color: rgba(109, 117, 132, 1);
+            font-size: 14px;
+          }
+          .ant-checkbox-inner {
+            border-radius: 4px;
+          }
+        }
+        .pubtn {
+          display: flex;
+          justify-content: center;
+          margin-top: 25px;
+          //margin-bottom: 29px;
+          .pubtn1 {
+            width: 100px;
+            height: 40px;
+            margin-right: 16px;
+            margin-bottom: 29px;
+            border: 1px solid #409eff;
+            border-radius: 4px;
+            color: rgba(78, 166, 255, 1);
+            font-size: 14px;
+            //line-height: 36px;
+            align-items: center;
+            background: rgba(255, 255, 255, 1);
+          }
+          .pubtn2 {
+            width: 100px;
+            height: 40px;
+            margin-bottom: 29px;
+            border: 1px solid #409eff;
+            border-radius: 4px;
+            color: #ffffff;
+            font-size: 14px;
+            align-items: center;
+            //line-height: 36px;
+            background: #409eff;
+          }
+        }
+      }
+    }
+  }
+}
 .CopyModal {
   .ant-modal {
     width: 424px !important;
@@ -1931,7 +2432,8 @@ export default {
         }
         .moreItems {
           width: 110px;
-          height: 80px;
+          // height: 80px;
+          padding-bottom: 12px;
           display: none;
           background: #ffffff;
           box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);