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

src/components/drawers/AddFaceteach.vue

@@ -48,11 +48,14 @@
               <span style="margin-right: 3px">选择课程：</span>
             </div>
             <div class="btnbox" @click="showDrawerSelFacet">
-              <button class="xkbtn">选择课程</button>
+              <button class="xkbtn">授课课程</button>
             </div>
             <!-- 选择面授侧弹窗 -->
             <div>
-              <sel-facet v-model:selfacetVisible="selfacetvisible" />
+              <sel-facet
+                v-model:selfacetVisible="selfacetvisible"
+                @getData="upDateTable"
+              />
             </div>
             <!-- 选择面授侧弹窗 -->
           </div>
@@ -152,8 +155,15 @@
                 <div class="timerbox">
                   <span>开始前：</span>
                   <a-input-number
-                    :min="0" :max="30" :precision="0"
+                    :min="0"
-                    style="width: 88px; height: 32px;border-radius: 8px;overflow: hidden;"
+                    :max="30"
+                    :precision="0"
+                    style="
+                      width: 88px;
+                      height: 32px;
+                      border-radius: 8px;
+                      overflow: hidden;
+                    "
                     :v-model:value="inputV5"
                   ></a-input-number>
                   <span style="color: #999999; margin-left: 8px">分钟</span>
@@ -161,29 +171,43 @@
                 <div class="timerbox">
                   <span>开始后：</span>
                   <a-input-number
-                    :min="0" :max="30" :precision="0"
+                    :min="0"
-                    style="width: 88px; height: 32px;border-radius: 8px;overflow: hidden;"
+                    :max="30"
+                    :precision="0"
+                    style="
+                      width: 88px;
+                      height: 32px;
+                      border-radius: 8px;
+                      overflow: hidden;
+                    "
                     :v-model:value="inputV6"
                   ></a-input-number>
                   <span style="color: #999999; margin-left: 8px">分钟</span>
                 </div>
               </div>
-              <div class="qdqtbox">
+              <!-- <div class="qdqtbox">
                 <div class="qtbtn"><div class="btntext">签退</div></div>
-              </div>
+              </div> -->
-              <div class="setbox">
+              <!-- <div class="setbox">
                 <div class="timerbox">
                   <span>结束前：</span>
                   <a-input-number
-                    :min="0" :max="30" :precision="0"
+                    :min="0"
-                    style="width: 88px; height: 32px;border-radius: 8px;overflow: hidden;"
+                    :max="30"
+                    :precision="0"
+                    style="
+                      width: 88px;
+                      height: 32px;
+                      border-radius: 8px;
+                      overflow: hidden;
+                    "
                     :v-model:value="inputV7"
                   ></a-input-number>
                   <span style="color: #999999; margin-left: 8px"
                     >分钟（提前签退则记为早退）</span
                   >
                 </div>
-              </div>
+              </div> -->
             </div>
           </div>
           <div class="main_item">
@@ -192,7 +216,9 @@
             </div>
             <div class="btnbox">
               <a-radio-group v-model:value="radioV1">
-                <a-radio v-model:checked="checked" :value="1" @click="cloradio1">仅签到</a-radio>
+                <a-radio v-model:checked="checked" :value="1" @click="cloradio1"
+                  >仅签到</a-radio
+                >
                 <a-radio v-model:checked="checked" :value="2" @click="cloradio1"
                   >签到、签退全部完成</a-radio
                 >
@@ -215,7 +241,9 @@
             </div>
             <div class="btnbox2">
               <a-radio-group v-model:value="radioV2">
-                <a-radio v-model:checked="checked" :value="1" @click="cloradio2">允许项目内人员临时到场参加</a-radio>
+                <a-radio v-model:checked="checked" :value="1" @click="cloradio2"
+                  >允许项目内人员临时到场参加</a-radio
+                >
                 <a-radio v-model:checked="checked" :value="2" @click="cloradio2"
                   >允许项目外人员临时到场参加</a-radio
                 >
@@ -228,7 +256,7 @@
             </div>
             <div class="btnbox2">
               <a-checkbox v-model:checked="checked">需要评估</a-checkbox>
-              <button class="xkbtn">选择课程</button>
+              <button class="xkbtn">选择评估</button>
             </div>
           </div>
         </div>
@@ -271,13 +299,13 @@
       </div>
       <div class="main_btns">
         <button class="btn1">取消</button>
-        <button class="btn2" @click ="updateFaceTeach">确定</button>
+        <button class="btn2" @click="updateFaceTeach">确定</button>
       </div>
     </div>
   </a-drawer>
 </template>
 <script>
-import { reactive, toRefs} from "vue";
+import { reactive, toRefs } from "vue";
 import SelFacet from "../../components/drawers/SelFacet.vue";
 import AddHomework from "../../components/drawers/AddHomework.vue";
 import AddTest from "../../components/drawers/AddTest.vue";
@@ -359,7 +387,7 @@ export default {
     };
     const afterVisibleChange = (bool) => {
       console.log("state", bool);
-      if(bool){
+      if (bool) {
         queryFaceTeach();
       }
     };
@@ -381,19 +409,16 @@ export default {
       if (value != "") {
         state.radioV2 = "";
       }
-    }
+    };
     //查询面授
-    const queryFaceTeach=()=>{
+    const queryFaceTeach = () => {};
-
-    }
     //更新任务列表
-     const updateTask=()=>{
+    const updateTask = () => {};
-
-    }
     //新建或编辑面授
-     const updateFaceTeach=()=>{
+    const updateFaceTeach = () => {};
-    
+    const upDateTable = (data) => {
-    }
+      console.log("选择了课程", data);
+    };
     return {
       ...toRefs(state),
       showDrawerSelFacet,
@@ -405,6 +430,7 @@ export default {
       cloradio2,
       updateFaceTeach,
       updateTask,
+      upDateTable,
       // change,
     };
   },
@@ -477,7 +503,7 @@ export default {
         .main_item2 {
           display: flex;
           align-items: flex-start;
-            margin-bottom: 32px;
+          // margin-bottom: 32px;
 
           .signbox {
             width: 120px;
@@ -512,7 +538,7 @@ export default {
               display: flex;
               flex-wrap: wrap;
               margin-top: 10px;
-                margin-bottom: 24px;
+              // margin-bottom: 24px;
 
               .timerbox {
                 margin-top: 6px;

src/components/drawers/SelFacet.vue

@@ -63,7 +63,11 @@
             :row-class-name="
               (_record, index) => (index % 2 === 1 ? 'table-striped' : null)
             "
-            :row-selection="rowSelection"
+            :row-selection="{
+              selectedRowKeys: selectedRowKeys,
+              onChange: onSelectChange,
+              type: 'radio',
+            }"
             :columns="columns1"
             :data-source="classTableData"
             :loading="tableDataTotal === -1 ? true : false"
@@ -86,7 +90,7 @@
       </div>
       <div class="main_btns">
         <button class="btn1">取消</button>
-        <button class="btn2">确定</button>
+        <button class="btn2" @click="closeDrawer">确定</button>
       </div>
     </div>
   </a-drawer>
@@ -150,22 +154,7 @@ const columns1 = [
     align: "center",
   },
 ];
-const rowSelection = ref({
+
-  checkStrictly: false,
-  onChange: (selectedRowKeys, selectedRows) => {
-    console.log(
-      `selectedRowKeys: ${selectedRowKeys}`,
-      "selectedRows: ",
-      selectedRows
-    );
-  },
-  onSelect: (record, selected, selectedRows) => {
-    console.log(record, selected, selectedRows);
-  },
-  onSelectAll: (selected, selectedRows, changeRows) => {
-    console.log(selected, selectedRows, changeRows);
-  },
-});
 export default {
   name: "SelFacet",
   props: {
@@ -219,9 +208,19 @@ export default {
       pageSize: 10,
       valueClass: null, //课程编号
       valueContent: null, //内容分类
+      selectedRows: [], //选择的数据
+      selectedRowKeys: [],
     });
+    const onSelectChange = (selectedRowKeys, selectedRows) => {
+      console.log("selectedRowKeys changed: ", selectedRowKeys);
+
+      state.selectedRowKeys = selectedRowKeys;
+      state.selectedRows = selectedRows;
+      console.log(selectedRows);
+    };
     const closeDrawer = () => {
       ctx.emit("update:selfacetVisible", false);
+      ctx.emit("getData", state.selectedRows);
     };
     const afterVisibleChange = (bool) => {
       console.log("state", bool);
@@ -313,13 +312,13 @@ export default {
       closeDrawer,
       options1,
       columns1,
-      rowSelection,
       getClassData,
       handleChange,
       reset,
       getClassList,
       search,
       changePaginationStu,
+      onSelectChange,
       // change,
     };
   },

src/views/learningpath/LearningPath.vue

@@ -40,11 +40,11 @@
         <div style="display: flex; margin-bottom: 20px">
           <div class="btn btn1" @click="searchLearnPath">
             <div class="search"></div>
-            <div class="btnText" >搜索</div>
+            <div class="btnText">搜索</div>
           </div>
           <div class="btnn btn2" @click="resetLearnPath">
             <div class="search"></div>
-            <div class="btnText" >重置</div>
+            <div class="btnText">重置</div>
           </div>
         </div>
       </div>
@@ -431,10 +431,10 @@
           </div>
           <div class="del_btnbox">
             <div class="del_btn btn1" @click="delete_exit">
-              <div class="btnText" >取消</div>
+              <div class="btnText">取消</div>
             </div>
             <div class="del_btn btn2" @click="delete_exit">
-              <div class="btnText" >确定</div>
+              <div class="btnText">确定</div>
             </div>
           </div>
         </div>
@@ -465,16 +465,16 @@
           </div>
           <div class="del_btnbox">
             <div class="del_btn btn1" @click="closeStopModal">
-              <div class="btnText" >取消</div>
+              <div class="btnText">取消</div>
             </div>
             <div class="del_btn btn2" @click="stopLearnPath">
-              <div class="btnText" >确定</div>
+              <div class="btnText">确定</div>
             </div>
           </div>
         </div>
       </div>
     </a-modal>
-    <!-- 结束路径弹窗 -->
+    <!-- 删除路径弹窗 -->
     <a-modal
       v-model:visible="deleteModal"
       :footer="null"
@@ -495,10 +495,10 @@
           </div>
           <div class="del_btnbox">
             <div class="del_btn btn1" @click="closeDeleteModal">
-              <div class="btnText" >取消</div>
+              <div class="btnText">取消</div>
             </div>
             <div class="del_btn btn2" @click="deleteLearnPath">
-              <div class="btnText" >确定</div>
+              <div class="btnText">确定</div>
             </div>
           </div>
         </div>
@@ -525,10 +525,10 @@
           </div>
           <div class="del_btnbox">
             <div class="del_btn btn1" @click="delete_exit">
-              <div class="btnText" >取消</div>
+              <div class="btnText">取消</div>
             </div>
             <div class="del_btn btn2" @click="delete_exit">
-              <div class="btnText" >确定</div>
+              <div class="btnText">确定</div>
             </div>
           </div>
         </div>
@@ -556,10 +556,10 @@
           </div>
           <div class="del_btnbox">
             <div class="del_btn btn1" @click="closeBackModal">
-              <div class="btnText" >取消</div>
+              <div class="btnText">取消</div>
             </div>
             <div class="del_btn btn2" @click="recallPath">
-              <div class="btnText" >确定</div>
+              <div class="btnText">确定</div>
             </div>
           </div>
         </div>
@@ -1645,11 +1645,11 @@ export default {
                   cursor: pointer;
                 }
               }
-              .learnBg{
+              .learnBg {
                 display: flex;
                 flex-wrap: wrap;
                 min-height: 110px;
-              .learnBgItem{
+                .learnBgItem {
                   border-radius: 8px;
                   width: 136px;
                   height: 106px;
@@ -1658,7 +1658,6 @@ export default {
                   margin-bottom: 20px;
                   margin-right: 6px;
                 }
-               
               }
             }
             .info {

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) => {
+      reget();
-        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;
-      });
     });
 
     // 获取项目概览
@@ -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);

src/views/projectcenter/TaskPage.vue

@@ -14,20 +14,72 @@
         <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">发布</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="showProjectPub"
+        >
+          {{ 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">
           <span style="color: #7096e3; cursor: pointer">更多</span>
           <div class="moreArrow"></div>
           <div class="moreItems">
             <div class="sammo">撤回</div>
             <div class="sammo">复制</div>
           </div>
+        </div> -->
+        <!-- 草稿/未发布的显示 -->
+        <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" @click="showStartModal">存为模板</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="showStopModal">结束</div>
+            <div class="sammo">复制</div>
+            <div class="sammo" @click="showStartModal">存为模板</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">复制</div>
+            <div class="sammo" @click="showStartModal">存为模板</div>
+          </div>
         </div>
         <div class="line"></div>
         <router-link to="/projectmanage">
@@ -1484,6 +1536,178 @@
       type="课程二维码"
     />
     <!-- 二维码弹窗 -->
+
+    <!-- 发布弹窗 -->
+    <a-modal
+      v-model:visible="projectPub"
+      :title="null"
+      :footer="null"
+      :closable="false"
+      wrapClassName="projectPub"
+      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="closeProjectPub"
+        >
+          <img
+            style="width: 22px; height: 22px"
+            src="../../assets/images/basicinfo/close22.png"
+          />
+        </div>
+      </div>
+      <div class="modalMain">
+        <div class="projectname">{{ releaseProjectName }}</div>
+        <div class="projecttime" v-if="startTime">
+          <span class="timeti">项目时间：</span
+          ><span class="timeme">{{ startTime }}~{{endTime}}</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">项目共{{ projectStudentsNum }}名学员</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="closeProjectPub">取消</a-button>
+          <a-button class="pubtn2" @click="releaseProject">发布</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="recallProject">
+              <div class="btnText">确定</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-modal>
+
+    <!-- 结束项目弹窗 -->
+    <a-modal
+      v-model:visible="stopModal"
+      :footer="null"
+      :closable="closeStop"
+      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>
+            <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="finishProject">
+              <div class="btnText">确定</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-modal>
+
+    <!-- 存为模版弹窗 -->
+    <a-modal
+      v-model:visible="startModal"
+      :footer="null"
+      :closable="closeStart"
+      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="closeStartModal"></div>
+          </div>
+          <div class="body">
+            <span>您确定要存为模版吗</span>
+          </div>
+          <div class="del_btnbox">
+            <div class="del_btn btn1" @click="closeStartModal">
+              <div class="btnText">取消</div>
+            </div>
+            <div class="del_btn btn2" @click="templateProject">
+              <div class="btnText">确定</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-modal>
   </div>
 </template>
 <script>
@@ -1509,6 +1733,7 @@ import ProjectScore from "../../components/drawers/ProjectScore";
 import TaskImpStu from "../../components/drawers/TaskFaceIn";
 import { storage } from "../../api/storage";
 import * as api from "../../api/index1";
+import * as apiproj from "../../api/index";
 import {
   getProjStu,
   deleteStu,
@@ -1698,6 +1923,19 @@ export default {
       chooseGroupId: null,
       morFaceT: false, //批量面授报名按钮
       faceArr: [], //任务大纲列表所有name
+      action: null,
+      act: null,
+      projectPub: false, //发布弹窗
+      projectStudentsNum: 0, //发布弹窗-学员人数
+      releaseProjectId: null, //发布的项目id
+      releaseProjectName: null, //发布的项目名称
+      releaseProjectTime: null, //发布的项目时间
+      backModal: false, //撤回弹窗
+      closeBack: false,
+      stopModal: false,
+      closeStop: false,
+      startModal: false,
+      closeStart: false,
       //进度排行表
       jindutabledata: [
         {
@@ -3159,12 +3397,160 @@ export default {
         }
       }
     };
+    const reget = () => {
+      getTask({
+        projectId: state.projectId,
+      }).then((res) => {
+        state.action = res.data.data.projectInfo.status;
+        state.act =
+          state.action == 0
+            ? "发布"
+            : state.action == 1
+            ? "撤回"
+            : state.action == -1
+            ? ""
+            : "-";
+      });
+    };
+    //打开发布弹窗
+    const showProjectPub = () => {
+      state.projectPub = true;
+      state.releaseProjectId = state.projectId;
+      state.releaseProjectName = state.name;
+      // state.releaseProjectTime = state.startTime;
+      // console.log("object", object);
+      //获取学员总数
+      let obj = {
+        pageNo: 0,
+        pageSize: 0,
+        projectId: state.projectId,
+      };
+      apiproj
+        .projectStudent(obj)
+        .then((res) => {
+          if (res.status === 200) {
+            // console.log("res", res.data);
+            state.projectStudentsNum = res.data.data.total
+              ? res.data.data.total
+              : 0;
+          }
+        })
+        .catch((err) => {
+          console.log("获取学员人数失败", err);
+        });
+      //获取阶段及任务总数
+    };
+    //关闭发布弹窗
+    const closeProjectPub = () => {
+      state.projectPub = false;
+    };
+    //确认发布项目
+    const releaseProject = () => {
+      console.log("点击发布");
+      let obj = {
+        projectId: state.releaseProjectId,
+      };
+      apiproj
+        .releaseProject(obj)
+        .then((res) => {
+          console.log("发布成功", res);
+          message.destroy();
+          message.success("发布成功");
+          state.projectPub = false;
+          reget();
+        })
+        .catch((err) => {
+          console.log("发布失败", err);
+        });
+    };
+
+    //打开撤回弹窗
+    const showBackModal = () => {
+      state.backModal = true;
+    };
+    //关闭撤回弹窗
+    const closeBackModal = () => {
+      state.backModal = false;
+    };
+    const recallProject = () => {
+      let obj = {
+        projectId: state.projectId,
+        type: 0,
+      };
+      apiproj
+        .handleProject(obj)
+        .then((res) => {
+          console.log("撤回成功", res);
+          message.destroy();
+          message.success("撤回成功");
+          state.backModal = false;
+          reget();
+        })
+        .catch((err) => {
+          console.log("撤回失败", err);
+        });
+    };
+    //关闭结束弹窗
+    const closeStopModal = () => {
+      state.stopModal = false;
+    };
+    //确认结束
+    const finishProject = () => {
+      let obj = {
+        projectId: state.projectId,
+        type: -1,
+      };
+      apiproj
+        .handleProject(obj)
+        .then((res) => {
+          console.log("结束成功", res);
+          message.destroy();
+          message.success("已结束");
+          state.stopModal = false;
+          reget();
+        })
+        .catch((err) => {
+          console.log("结束失败", err);
+        });
+    };
+    //打开结束弹窗
+    const showStopModal = () => {
+      state.stopModal = true;
+    };
+    //打开存为模版弹窗
+    const showStartModal = () => {
+      state.startModal = true;
+    };
+    //关闭存为模版弹窗
+    const closeStartModal = () => {
+      state.startModal = false;
+    };
+    //确认存为模版
+    const templateProject = () => {
+      let obj = {
+        projectId: state.projectId,
+        type: 1,
+      };
+      apiproj
+        .handleProject(obj)
+        .then((res) => {
+          console.log("模版保存成功", res);
+          message.destroy();
+          message.success("模版保存成功");
+          state.startModal = false;
+          reget();
+        })
+        .catch((err) => {
+          console.log("模版保存失败", err);
+        });
+    };
     onMounted(() => {
       getStu();
       getTaskList();
       getTaskInfo();
       getGroup();
       getOverview();
+      reget();
     });
     return {
       ...toRefs(state),
@@ -3244,6 +3630,19 @@ export default {
       changePaginationStu,
       handleChange,
       toEdit,
+      reget,
+      showProjectPub,
+      closeProjectPub,
+      releaseProject,
+      showBackModal,
+      closeBackModal,
+      recallProject,
+      closeStopModal,
+      finishProject,
+      showStopModal,
+      showStartModal,
+      closeStartModal,
+      templateProject,
     };
   },
 };
@@ -3553,6 +3952,133 @@ export default {
   }
 }
 
+.CopyModal {
+  .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/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;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 .canclestu1 {
   .ant-modal {
     width: 424px !important;
@@ -3784,6 +4310,144 @@ export default {
   }
 }
 
+.projectPub {
+  .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;
+          text-align: center;
+        }
+        .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;
+          }
+        }
+      }
+    }
+  }
+}
+
 .facemanageModal {
   .ant-modal {
     width: 532px !important;
@@ -4016,7 +4680,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);