Merge branch 'master' of ssh://gitlab.dongwu-inc.com:10022/BOE/fe-manage

src/views/courselibrary/CoursewareManage.vue

@@ -67,7 +67,7 @@
         </div>
         <div class="btn btn3">
           <div class="search"></div>
-          <div class="btnText">导出</div>
+          <div class="btnText" @click="openMessage">导出</div>
         </div>
         <div class="btn btn4">
           <div class="search"></div>
@@ -120,7 +120,7 @@
             <div class="b_sub">
               <div class="bs_header">
                 <div class="b_left">课程命名规则</div>
-                <div class="b_right" @click="hideShow">
+                <div class="b_right" @click="hideShow" style="cursor: pointer">
                   <div
                     class="b_zk"
                     :style="{ display: hideshow ? 'block' : 'none' }"
@@ -295,7 +295,11 @@
                 <div class="i2_cz">
                   <div class="i2_top">
                     <div class="i2_left">课程命名规则</div>
-                    <div class="i2_right" @click="hideShow">
+                    <div
+                      class="i2_right"
+                      @click="hideShow"
+                      style="cursor: pointer"
+                    >
                       <div
                         class="b_zk"
                         :style="{ display: hideshow ? 'block' : 'none' }"
@@ -499,7 +503,7 @@
                     <span style="margin-right: 10px">附件</span>
                   </div>
                   <div class="item_inp">
-                    <div class="accessory">
+                    <div class="accessory" style="cursor: pointer">
                       <div class="accessory_icon">
                         <img
                           src="@/assets/images/coursewareManage/enclosure.png"
@@ -617,19 +621,9 @@
         </div>
       </div>
     </a-modal>
-
     <!-- 确定新建面授课弹窗 -->
     <!-- 表格 -->
     <div class="tableBox">
-      <!-- <a-table
-        :columns="tableDataFunc()"
-        :data-source="tableData"
-        :loading="tableDataTotal === -1 ? true : false"
-        :scroll="{ x: 600 }"
-        expandRowByClick="true"
-        @expand="expandTable"
-        :pagination="false"
-      /> -->
       <a-table
         :columns="columns1"
         :data-source="tableData1"
@@ -655,7 +649,7 @@
         <div class="headerLeft">
           <img
             style="width: 17px; height: 18px; margin-right: 8px"
-            src="../../assets/images/basicinfo/add.png"
+            src="@/assets/images/coursewareManage/pc.png"
           />
           <div :style="{ display: ft_1 ? 'none' : 'block' }">
             <span class="headerLeftText">在线课程管理</span>
@@ -811,7 +805,7 @@
         <div class="headerLeft">
           <img
             style="width: 17px; height: 18px; margin-right: 8px"
-            src="../../assets/images/basicinfo/add.png"
+            src="@/assets/images/coursewareManage/detail.png"
           />
           <span class="headerLeftText">查看详情</span>
         </div>
@@ -860,7 +854,7 @@
         <div class="headerLeft">
           <img
             style="width: 17px; height: 18px; margin-right: 8px"
-            src="../../assets/images/basicinfo/add.png"
+            src="@/assets/images/coursewareManage/givepower.png"
           />
           <span class="headerLeftText">授权</span>
         </div>
@@ -960,7 +954,7 @@
         <div class="headerLeft">
           <img
             style="width: 17px; height: 18px; margin-right: 8px"
-            src="../../assets/images/basicinfo/add.png"
+            src="@/assets/images/coursewareManage/scht.png"
           />
           <span class="headerLeftText">开课</span>
         </div>
@@ -1019,7 +1013,21 @@
                 </div>
               </div>
             </div>
-            <div class="stm_table">
+            <!-- 无数据样式 -->
+            <div class="notable" :style="{ display: stm_hs ?  'none' : 'block'  }">
+              <div class="notablebox">
+                <div class="boxbody">
+                  <div class="boximg"></div>
+                  <div class="boxtitle"><span style="color:#FFB64E;font-size: 20px;">无课程</span></div>
+                  <div class="boxtitle2"><span style="color:#878B92;">请点击新建开课，创建课程</span></div>
+                </div>
+                <div class="smallleft"></div>
+                  <div class="smallright"></div>
+              </div>
+            </div>
+            <!-- 无数据样式 -->
+            <!-- 有数据表格 -->
+            <div class="stm_table" :style="{ display: stm_hs ? 'block' : 'none' }">
               <a-table
                 :columns="columns6"
                 :data-source="tableData6"
@@ -1048,6 +1056,7 @@
                 }"
               />
             </div>
+            <!-- 有数据表格 -->
           </div>
         </div>
       </div>
@@ -1257,7 +1266,7 @@
         <div class="headerLeft">
           <img
             style="width: 17px; height: 18px; margin-right: 8px"
-            src="../../assets/images/basicinfo/add.png"
+            src="@/assets/images/coursewareManage/stum.png"
           />
           <span class="headerLeftText">学员管理</span>
         </div>
@@ -1407,13 +1416,11 @@
             <div class="close_exit" @click="qr_exit"></div>
           </div>
           <div class="qrm_body"><div class="QR_img"></div></div>
-          <div class="qrm_btnbox">
+          <div class="qrm_footer">
-            <div class="qrm_btn btn1">
+            <span style="margin-left: 52px">下载二维码</span>
-              <div class="btnText" @click="qr_exit">取消</div>
+            <div class="qrmbtn"><div class="btntext">200*200</div></div>
-            </div>
+            <div class="qrmbtn"><div class="btntext">400*400</div></div>
-            <div class="qrm_btn btn2">
+            <div class="qrmbtn"><div class="btntext">800*800</div></div>
-              <div class="btnText" @click="qr_exit">确定</div>
-            </div>
           </div>
         </div>
       </div>
@@ -1600,11 +1607,104 @@
       </div>
     </a-modal>
     <!--请确定是否拒绝此学员学习此课程弹窗 -->
+    <!--删除弹窗 -->
+    <a-modal
+      v-model:visible="delete_hs"
+      :footer="null"
+      :closable="closableQR"
+      wrapClassName="DelModal"
+      style="margin-top: 400px"
+    >
+      <div class="delete" :style="{ display: delete_hs ? 'block' : 'none' }">
+        <div class="del_header"></div>
+        <div class="del_main">
+          <div class="header">
+            <div class="icon"></div>
+            <span>提示</span>
+            <div class="close_exit" @click="delete_exit"></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>
+    <!--删除弹窗 -->
+    <!--复制弹窗 -->
+    <a-modal
+      v-model:visible="copy_hs"
+      :footer="null"
+      :closable="closableQR"
+      wrapClassName="DelModal"
+      style="margin-top: 400px"
+    >
+      <div class="delete" :style="{ display: copy_hs ? 'block' : 'none' }">
+        <div class="del_header"></div>
+        <div class="del_main">
+          <div class="header">
+            <div class="icon"></div>
+            <span>提示</span>
+            <div class="close_exit" @click="delete_exit"></div>
+          </div>
+          <div class="body">
+            <span>您确定要复制此课程吗</span>
+          </div>
+          <div class="del_btnbox">
+            <div class="del_btn btn1">
+              <div class="btnText" @click="copy_exit">取消</div>
+            </div>
+            <div class="del_btn btn2">
+              <div class="btnText" @click="copy_exit">确定</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-modal>
+    <!--复制弹窗 -->
+    <!--停用弹窗 -->
+    <a-modal
+      v-model:visible="nouse_hs"
+      :footer="null"
+      :closable="closableQR"
+      wrapClassName="DelModal"
+      style="margin-top: 400px"
+    >
+      <div class="delete" :style="{ display: nouse_hs ? 'block' : 'none' }">
+        <div class="del_header"></div>
+        <div class="del_main">
+          <div class="header">
+            <div class="icon"></div>
+            <span>提示</span>
+            <div class="close_exit" @click="nouse_exit"></div>
+          </div>
+          <div class="body">
+            <span>您确定要停用此课程吗</span>
+          </div>
+          <div class="del_btnbox">
+            <div class="del_btn btn1">
+              <div class="btnText" @click="nouse_exit">取消</div>
+            </div>
+            <div class="del_btn btn2">
+              <div class="btnText" @click="nouse_exit">确定</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-modal>
+    <!--停用弹窗 -->
   </div>
 </template>
 <script>
 import { reactive, toRefs, defineComponent, ref } from "vue";
-
+import { message } from "ant-design-vue";
 const columns1 = [
   {
     title: "序号",
@@ -1963,7 +2063,6 @@ export default defineComponent({
           creator: "管理员",
           createtime: "2022-07-20 9:30",
           pubtime: "2022-07-20 9:30",
-          ynuse: "启用",
           kkty: false,
         },
         {
@@ -1980,7 +2079,6 @@ export default defineComponent({
           creator: "管理员",
           createtime: "2022-07-20 9:30",
           pubtime: "2022-07-20 9:30",
-          ynuse: "启用",
           kkty: true,
         },
         {
@@ -1997,7 +2095,6 @@ export default defineComponent({
           creator: "管理员",
           createtime: "2022-07-20 9:30",
           pubtime: "2022-07-20 9:30",
-          ynuse: "启用",
           kkty: true,
         },
         {
@@ -2014,7 +2111,6 @@ export default defineComponent({
           creator: "管理员",
           createtime: "2022-07-20 9:30",
           pubtime: "2022-07-20 9:30",
-          ynuse: "停用",
           kkty: true,
         },
         {
@@ -2031,7 +2127,6 @@ export default defineComponent({
           creator: "管理员",
           createtime: "2022-07-20 9:30",
           pubtime: "2022-07-20 9:30",
-          ynuse: "启用",
           kkty: true,
         },
         {
@@ -2048,7 +2143,6 @@ export default defineComponent({
           creator: "管理员",
           createtime: "2022-07-20 9:30",
           pubtime: "2022-07-20 9:30",
-          ynuse: "启用",
           kkty: true,
         },
       ],
@@ -2264,6 +2358,9 @@ export default defineComponent({
       graduate_hs: false,
       agreestudy_hs: false,
       rejectstudy_hs: false,
+      delete_hs: false,
+      copy_hs: false,
+      nouse_hs: false,
       value: "",
       value5: "",
       value6: "",
@@ -2278,6 +2375,7 @@ export default defineComponent({
       selectedRowKeys: [],
       faceManageTab: "1",
     });
+    // 渲染列表1操作
     const getTableDate = () => {
       let datas = state.tableData1;
       datas.map((value) => {
@@ -2317,7 +2415,13 @@ export default defineComponent({
                       </div>
                     </div>
                     <div class="ops3">
-                      <div class="jc" style={{ width: "30px" }}>
+                      <div
+                        class="jc"
+                        onClick={() => {
+                          state.copy_hs = true;
+                        }}
+                        style={{ width: "30px" }}
+                      >
                         复制
                       </div>
                     </div>
@@ -2377,13 +2481,6 @@ export default defineComponent({
                               二维码
                             </div>
                           </a-select-option>
-                          <a-select-option
-                            value="复制"
-                            label="复制"
-                            style="padding-left:35px"
-                          >
-                            <div>复制</div>
-                          </a-select-option>
                           <a-select-option
                             value="取消"
                             label="取消"
@@ -2486,7 +2583,13 @@ export default defineComponent({
                       </div>
                     </div>
                     <div class="ops3" style={{ "margin-right": "10px" }}>
-                      <div class="jc" style={{ width: "30px" }}>
+                      <div
+                        class="jc"
+                        onClick={() => {
+                          state.copy_hs = true;
+                        }}
+                        style={{ width: "30px" }}
+                      >
                         复制
                       </div>
                     </div>
@@ -2513,7 +2616,13 @@ export default defineComponent({
                       </div>
                     </div>
                     <div class="ops3">
-                      <div class="jc" style={{ width: "30px" }}>
+                      <div
+                        class="jc"
+                        onClick={() => {
+                          state.copy_hs = true;
+                        }}
+                        style={{ width: "30px" }}
+                      >
                         复制
                       </div>
                     </div>
@@ -2553,7 +2662,13 @@ export default defineComponent({
                       </div>
                     </div>
                     <div class="ops5">
-                      <div class="jc" style="margin-left:22px">
+                      <div
+                        class="jc"
+                        onClick={() => {
+                          state.delete_hs = true;
+                        }}
+                        style="margin-left:22px"
+                      >
                         删除
                       </div>
                     </div>
@@ -2569,6 +2684,7 @@ export default defineComponent({
       state.tableData = datas;
     };
     getTableDate();
+    //渲染学员管理操作
     const getTableDate2 = () => {
       let data2 = state.tableData7;
       data2.map((value) => {
@@ -2632,6 +2748,7 @@ export default defineComponent({
       state.tableData = data2;
     };
     getTableDate2();
+    // 渲染开课操作
     const getTableDate3 = () => {
       let datas = state.tableData6;
       datas.map((value) => {
@@ -2641,7 +2758,14 @@ export default defineComponent({
             <div class="operation">
               <div class="nSelect">
                 <div class="nselect">
-                  <div class="jc">签到</div>
+                  <div
+                    class="jc"
+                    onClick={() => {
+                      state.QR_hs = true;
+                    }}
+                  >
+                    签到
+                  </div>
                   <div class="jc">编辑</div>
                   <div
                     class="jc"
@@ -2663,19 +2787,38 @@ export default defineComponent({
                         label="复制"
                         style="padding-left:35px"
                       >
-                        <div>复制</div>
+                        <div
+                          onClick={() => {
+                            state.copy_hs = true;
+                          }}
+                        >
+                          复制
+                        </div>
                       </a-select-option>
                       <a-select-option
-                        value="取消"
+                        value="删除"
-                        label="取消"
+                        label="删除"
                         style="padding-left:35px"
                       >
                         <div
                           onClick={() => {
-                            console.log("点击了");
+                            state.delete_hs = true;
                           }}
                         >
-                          取消
+                          删除
+                        </div>
+                      </a-select-option>
+                      <a-select-option
+                        value="QR"
+                        label="QR"
+                        style="padding-left:35px"
+                      >
+                        <div
+                          onClick={() => {
+                            state.QR_hs = true;
+                          }}
+                        >
+                          二维码
                         </div>
                       </a-select-option>
                     </a-select>
@@ -2689,6 +2832,7 @@ export default defineComponent({
       state.tableData = datas;
     };
     getTableDate3();
+    //渲染学员管理结业状态
     const getTableDate4 = () => {
       let data2 = state.tableData7;
       data2.map((value) => {
@@ -2749,6 +2893,40 @@ export default defineComponent({
       state.tableData = data2;
     };
     getTableDate4();
+    //渲染列表是否停用
+    const getTableDate5 = () => {
+      let data2 = state.tableData1;
+      data2.map((value) => {
+        {
+          //单层项目
+          value.ynuse = (
+            <div class="ynuse">
+              <div class="nSelect">
+                {value.status === "审核未通过" ? (
+                  <div
+                    class="use"
+                    onClick={() => {
+                      state.nouse_hs = true;
+                    }}
+                  >
+                    停用
+                  </div>
+                ) : (
+                  <div></div>
+                )}
+                {value.status !== "审核未通过" ? (
+                  <div class="use">启用</div>
+                ) : (
+                  <div></div>
+                )}
+              </div>
+            </div>
+          );
+        }
+      });
+      state.tableData = data2;
+    };
+    getTableDate5();
     const options1 = ref([
       {
         value: "value1",
@@ -2860,6 +3038,15 @@ export default defineComponent({
     const rejectstudy_exit = () => {
       state.rejectstudy_hs = false;
     };
+    const delete_exit = () => {
+      state.delete_hs = false;
+    };
+    const copy_exit = () => {
+      state.copy_hs = false;
+    };
+    const nouse_exit = () => {
+      state.nouse_hs = false;
+    };
     const onSelectChange = (selectedRowKeys) => {
       console.log("selectedRowKeys changed: ", selectedRowKeys);
       state.selectedRowKeys = selectedRowKeys;
@@ -2868,6 +3055,20 @@ export default defineComponent({
     const faceManageChange = (e) => {
       state.faceManageTab = e;
     };
+    const key = "updatable";
+    const openMessage = () => {
+      message.loading({
+        content: "Loading...",
+        key,
+      });
+      setTimeout(() => {
+        message.success({
+          content: "导出成功",
+          key,
+          duration: 2,
+        });
+      }, 1000);
+    };
 
     return {
       ...toRefs(state),
@@ -2901,8 +3102,12 @@ export default defineComponent({
       graduate_exit,
       agreestudy_exit,
       rejectstudy_exit,
+      delete_exit,
+      copy_exit,
+      nouse_exit,
       onSelectChange,
       faceManageChange,
+      openMessage,
     };
   },
 });
@@ -2941,8 +3146,8 @@ export default defineComponent({
     }
     .btns {
       display: flex;
-      // flex-wrap: wrap;
       margin-left: 38px;
+      cursor: pointer;
       .btn {
         padding: 0px 26px 0px 26px;
         height: 38px;
@@ -2983,7 +3188,7 @@ export default defineComponent({
         .search {
           width: 17px;
           height: 18px;
-          background-image: url("../../assets/images/courseManage/add1.png");
+          background-image: url("../../assets/images/coursewareManage/export.png");
         }
       }
       .btn4 {
@@ -3015,7 +3220,7 @@ export default defineComponent({
       .btn3:hover {
         background: rgba(64, 158, 255, 1);
         .search {
-          background-image: url("../../assets/images/courseManage/add0.png");
+          background-image: url("../../assets/images/coursewareManage/export1.png");
         }
         .btnText {
           color: #ffffff;
@@ -3056,6 +3261,14 @@ export default defineComponent({
         justify-content: right;
       }
     }
+    .ynuse {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .use {
+        cursor: pointer;
+      }
+    }
   }
 }
 .selectonlineface {
@@ -3368,6 +3581,7 @@ export default defineComponent({
             }
             .qrm_body {
               width: 100%;
+              margin-bottom: 32px;
               .QR_img {
                 width: 176px;
                 height: 176px;
@@ -3375,35 +3589,24 @@ export default defineComponent({
                 background-color: red;
               }
             }
-            .qrm_btnbox {
+            .qrm_footer {
               display: flex;
-              margin: 30px auto;
+              align-items: center;
-              justify-content: center;
+              margin-bottom: 44px;
-              .qrm_btn {
+              .qrmbtn {
-                width: 100px;
+                width: 80px;
-                height: 40px;
+                height: 32px;
-                background: rgba(64, 158, 255, 0);
-                border-radius: 8px;
                 display: flex;
-                align-items: center;
+                line-height: 32px;
                 justify-content: center;
-                margin-right: 14px;
+                border-radius: 4px;
-                flex-shrink: 0;
+                border: 1px solid #387df7;
+                margin-left: 16px;
                 cursor: pointer;
-                .btnText {
+                .btntext {
-                  font-size: 14px;
+                  color: #387df7;
-                  font-weight: 400;
-                  line-height: 40px;
                 }
               }
-              .btn1 {
-                border: 1px solid rgba(64, 158, 255, 1);
-                color: #4ea6ff;
-              }
-              .btn2 {
-                background-color: #4ea6ff;
-                color: #ffffff;
-              }
             }
           }
         }
@@ -3690,7 +3893,6 @@ export default defineComponent({
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                margin-right: 14px;
                 flex-shrink: 0;
                 cursor: pointer;
                 .btnText {
@@ -3702,6 +3904,7 @@ export default defineComponent({
               .btn1 {
                 border: 1px solid rgba(64, 158, 255, 1);
                 color: #4ea6ff;
+                margin-right: 14px;
               }
               .btn2 {
                 background-color: #4ea6ff;
@@ -3778,6 +3981,7 @@ export default defineComponent({
                 }
                 .bm_btn {
                   display: flex;
+                  cursor: pointer;
                   .btn {
                     padding: 0px 26px 0px 26px;
                     height: 40px;
@@ -3912,16 +4116,16 @@ export default defineComponent({
                     align-items: center;
                     margin-bottom: 5px;
                     cursor: pointer;
-                    .addimg{
+                    .addimg {
                       position: relative;
-                      .heng{
+                      .heng {
                         position: absolute;
                         top: 50px;
                         left: 25px;
                         width: 50px;
                         border: 1px solid #4ea6ff;
                       }
-                      .shu{
+                      .shu {
                         position: absolute;
                         top: 25px;
                         left: 50px;
@@ -4005,8 +4209,8 @@ export default defineComponent({
                     left: 395px;
                     bottom: 10px;
                   }
-                  }
                 }
+              }
               .mbl_items12 {
                 width: 440px;
                 margin-left: 100px;
@@ -4020,7 +4224,7 @@ export default defineComponent({
                   .file_img {
                     width: 27px;
                     height: 32px;
-                    background-color: red;
+                    background-image: url(@/assets/images/coursewareManage/imgs.png);
                     margin-right: 22px;
                   }
                   .file_detail {
@@ -4380,6 +4584,55 @@ export default defineComponent({
                 }
               }
             }
+            .notable{
+              width:100%;
+              height:100%;
+              display: flex;
+              justify-content: center;
+              .notablebox{
+                width: 412px;
+                height:212px;
+                background:linear-gradient(180deg, #FEF3DD 0%, #FFFAF0 100%);
+                border-radius: 10px;
+              display: flex;
+              justify-content: center;
+                text-align: center;
+                margin-top:77px;
+                margin-bottom:109px;
+                cursor: pointer;
+                position: relative;
+                .smallleft{
+                  position: absolute;
+                  top:18px;
+                  left:0px;
+                  width:8px;
+                  height:21px;
+                  border-radius: 0px 4px 4px 0px;
+                  background-color:#FFB64E;
+                }
+                .smallright{
+                  position: absolute;
+                  bottom:18px;
+                  right:0px;
+                  width:8px;
+                  height:21px;
+                  border-radius: 4px 0px 0px 4px;
+                  background-color:#FFB64E;
+                }
+                .boxbody{
+                  .boximg{
+                    width: 72px;
+                    height:72px;
+                    margin:32px auto 20px auto;
+                    background-image: url(@/assets/images/coursewareManage/nostate.png);
+                    background-size: 100% 100%;
+                  }
+                  .boxtitle{
+                    margin-bottom:4px;
+                  }
+                }
+              }
+            }
             .stm_table {
               width: 90%;
               margin: 30px auto;
@@ -4675,4 +4928,97 @@ export default defineComponent({
     }
   }
 }
+.DelModal {
+  .ant-modal {
+    .ant-modal-content {
+      width: 424px !important;
+      .ant-modal-body {
+        .delete {
+          z-index: 999;
+          width: 424px;
+          background: #ffffff;
+          box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
+          border-radius: 4px;
+          position: absolute;
+          left: 50%;
+          top: 10%;
+          transform: translate(-50%, -50%);
+          .del_header {
+            position: absolute;
+            width: calc(100%);
+            height: 40px;
+            background: linear-gradient(
+              rgba(78, 166, 255, 0.2) 0%,
+              rgba(78, 166, 255, 0) 100%
+            );
+          }
+          .del_main {
+            width: 100%;
+            position: relative;
+            .header {
+              display: flex;
+              align-items: center;
+              padding-top: 20px;
+              padding-left: 26px;
+              font-size: 16px;
+              .icon {
+                width: 16px;
+                height: 16px;
+                margin-right: 10px;
+                background-image: url(@/assets/images/coursewareManage/QR.png);
+                background-size: 100% 100%;
+              }
+              .close_exit {
+                position: absolute;
+                right: 42px;
+                cursor: pointer;
+                width: 20px;
+                height: 20px;
+                background-image: url(@/assets/images/coursewareManage/close.png);
+                background-size: 100% 100%;
+              }
+            }
+            .body {
+              width: 100%;
+              margin: 34px auto 56px auto;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            }
+            .del_btnbox {
+              display: flex;
+              margin: 30px auto;
+              justify-content: center;
+              .del_btn {
+                width: 100px;
+                height: 40px;
+                background: rgba(64, 158, 255, 0);
+                border-radius: 8px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin-right: 14px;
+                flex-shrink: 0;
+                cursor: pointer;
+                .btnText {
+                  font-size: 14px;
+                  font-weight: 400;
+                  line-height: 40px;
+                }
+              }
+              .btn1 {
+                border: 1px solid rgba(64, 158, 255, 1);
+                color: #4ea6ff;
+              }
+              .btn2 {
+                background-color: #4ea6ff;
+                color: #ffffff;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
 </style>

src/views/learningpath/LearningPath.vue

@@ -71,7 +71,7 @@
         :data-source="tableData"
         :loading="tableDataTotal === -1 ? true : false"
         expandRowByClick="true"
-        :scroll="{ x: 1600 }"
+        :scroll="{ x: 1550 }"
         @expand="expandTable"
         :pagination="false"
       />
@@ -90,6 +90,7 @@
 
     <!-- 表格 -->
 
+    <!-- 创建路径弹窗 -->
     <a-modal
       :closable="sh"
       centered="true"
@@ -175,6 +176,228 @@
         </div>
       </div></a-modal
     >
+    <!-- 发布弹窗 -->
+    <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">路径共0名学员</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="closeModal">取消</a-button>
+          <a-button class="pubtn2" @click="closeModal">发布</a-button>
+        </div>
+      </div>
+    </a-modal>
+    <!-- 复制路径弹窗 -->
+    <a-modal
+      v-model:visible="copyModal"
+      :footer="null"
+      :closable="closeCopy"
+      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="closeCopyModal"></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>
+    <!-- 停用路径弹窗 -->
+    <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>
+          <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>
+    <!-- 删除路径弹窗 -->
+    <a-modal
+      v-model:visible="deleteModal"
+      :footer="null"
+      :closable="closeDelete"
+      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="closeDeleteModal"></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>
+    <!-- 启用路径弹窗 -->
+    <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">
+              <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>
+    <!-- 撤回路径弹窗 -->
+    <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">
+              <div class="btnText" @click="delete_exit">取消</div>
+            </div>
+            <div class="del_btn btn2">
+              <div class="btnText" @click="delete_exit">确定</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-modal>
   </div>
 </template>
 <script>
@@ -337,6 +560,20 @@ export default {
         },
       ],
       learnPathBg: null, //选择的路径图背景
+      pub: false, //发布弹窗
+      checked: false, //发布弹窗switch
+      checkedTeacher: false, //发布弹窗勾选
+      checkStu: false, //发布弹窗勾选
+      copyModal: false, //复制弹窗
+      closeCopy: false, //复制弹窗关闭图标
+      stopModal: false, //停用弹窗
+      closeStop: false, //停用弹窗关闭图标
+      deleteModal: false, //删除弹窗
+      closeDelete: false, //删除弹窗关闭图标
+      startModal: false, //启用弹窗
+      closeStart: false, //启用弹窗关闭图标
+      backModal: false, //撤回弹窗
+      closeBack: false, //撤回弹窗关闭图标
       currentPage: 1,
       tableDataTotal: 100,
       pageSize: 10,
@@ -427,6 +664,42 @@ export default {
       console.log(id);
       state.learnPathBg = id;
     };
+    const showPub = () => {
+      state.pub = true;
+    };
+    const closePub = () => {
+      state.pub = false;
+    };
+    const showCopyModal = () => {
+      state.copyModal = true;
+    };
+    const closeCopyModal = () => {
+      state.copyModal = false;
+    };
+    const showStopModal = () => {
+      state.stopModal = true;
+    };
+    const closeStopModal = () => {
+      state.stopModal = false;
+    };
+    const showDeleteModal = () => {
+      state.deleteModal = true;
+    };
+    const closeDeleteModal = () => {
+      state.deleteModal = false;
+    };
+    const showStartModal = () => {
+      state.startModal = true;
+    };
+    const closeStartModal = () => {
+      state.startModal = false;
+    };
+    const showBackModal = () => {
+      state.backModal = true;
+    };
+    const closeBackModal = () => {
+      state.backModal = false;
+    };
     const getTableDate = () => {
       let data = state.tableData;
       data.map((value) => {
@@ -437,7 +710,15 @@ export default {
               <div class="nSelect">
                 {value.state === "草稿" ? (
                   <div class="fb">
-                    <div class="jc">发布</div>
+                    <div
+                      style="cursor:pointer"
+                      class="jc"
+                      onClick={() => {
+                        showPub();
+                      }}
+                    >
+                      发布
+                    </div>
                     <div class="jc">编辑</div>
                   </div>
                 ) : (
@@ -452,7 +733,15 @@ export default {
                 )}
                 {value.state === "已停用" ? (
                   <div class="fb">
-                    <div class="jc">复制</div>
+                    <div
+                      style="cursor:pointer"
+                      class="jc"
+                      onClick={() => {
+                        showCopyModal();
+                      }}
+                    >
+                      复制
+                    </div>
                   </div>
                 ) : (
                   <div></div>
@@ -488,33 +777,140 @@ export default {
                     <div>管理权</div>
                   </a-select-option>
                 </a-select>
-                <a-select
+              </div>
-                  style="width: 50px;margin-top:2px;margin-left:25px"
+              <div class="tableSelect">
-                  value="更多"
+                {value.state === "草稿" ? (
-                  // options={state.projectNameList}
+                  <div>
-                  dropdownClassName="tabledropdown"
+                    <a-select
-                >
+                      style="width: 50px;margin-top:2px;margin-right:20px;"
-                  <a-select-option
+                      value="更多"
-                    value="复制"
+                      // options={state.projectNameList}
-                    label="复制"
+                      dropdownClassName="tabledropdown"
-                    style="padding-left:35px"
-                  >
-                    <div>复制</div>
-                  </a-select-option>
-                  <a-select-option
-                    value="取消"
-                    label="取消"
-                    style="padding-left:35px"
-                  >
-                    <div
-                      onClick={() => {
-                        console.log("点击了");
-                      }}
                     >
-                      取消
+                      <a-select-option
-                    </div>
+                        value="复制"
-                  </a-select-option>
+                        label="复制"
-                </a-select>
+                        style="padding-left:35px"
+                      >
+                        <div
+                          onClick={() => {
+                            showCopyModal();
+                          }}
+                        >
+                          复制
+                        </div>
+                      </a-select-option>
+                      <a-select-option
+                        value="停用"
+                        label="停用"
+                        style="padding-left:35px"
+                      >
+                        <div
+                          onClick={() => {
+                            showStopModal();
+                          }}
+                        >
+                          停用
+                        </div>
+                      </a-select-option>
+                      <a-select-option
+                        value="删除"
+                        label="删除"
+                        style="padding-left:35px"
+                      >
+                        <div
+                          onClick={() => {
+                            showDeleteModal();
+                          }}
+                        >
+                          删除
+                        </div>
+                      </a-select-option>
+                    </a-select>
+                  </div>
+                ) : (
+                  <div></div>
+                )}
+                {value.state === "已发布" ? (
+                  <div>
+                    <a-select
+                      style="width: 50px;margin-top:2px;margin-right:20px;"
+                      value="更多"
+                      // options={state.projectNameList}
+                      dropdownClassName="tabledropdown"
+                    >
+                      <a-select-option
+                        value="复制"
+                        label="复制"
+                        style="padding-left:35px"
+                      >
+                        <div
+                          onClick={() => {
+                            showCopyModal();
+                          }}
+                        >
+                          复制
+                        </div>
+                      </a-select-option>
+
+                      <a-select-option
+                        value="撤回"
+                        label="撤回"
+                        style="padding-left:35px"
+                      >
+                        <div
+                          onClick={() => {
+                            showBackModal();
+                          }}
+                        >
+                          撤回
+                        </div>
+                      </a-select-option>
+                    </a-select>
+                  </div>
+                ) : (
+                  <div></div>
+                )}
+                {value.state === "已停用" ? (
+                  <div>
+                    <a-select
+                      style="width: 50px;margin-top:2px;margin-right:20px;"
+                      value="更多"
+                      // options={state.projectNameList}
+                      dropdownClassName="tabledropdown"
+                    >
+                      <a-select-option
+                        value="启用"
+                        label="启用"
+                        style="padding-left:35px"
+                      >
+                        <div
+                          onClick={() => {
+                            showStartModal();
+                          }}
+                        >
+                          启用
+                        </div>
+                      </a-select-option>
+
+                      <a-select-option
+                        value="删除"
+                        label="删除"
+                        style="padding-left:35px"
+                      >
+                        <div
+                          onClick={() => {
+                            showDeleteModal();
+                          }}
+                        >
+                          删除
+                        </div>
+                      </a-select-option>
+                    </a-select>
+                  </div>
+                ) : (
+                  <div></div>
+                )}
               </div>
             </div>
           );
@@ -528,6 +924,18 @@ export default {
       selectProjectName,
       expandTable,
       handleOut,
+      showPub,
+      closePub,
+      showCopyModal,
+      closeCopyModal,
+      showStopModal,
+      closeStopModal,
+      showDeleteModal,
+      closeDeleteModal,
+      showStartModal,
+      closeStartModal,
+      showBackModal,
+      closeBackModal,
       tableDataFunc,
       chooseImg,
     };
@@ -724,6 +1132,253 @@ export default {
     }
   }
 }
+.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;
+    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;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
 .learningPath {
   width: 100%;
   height: 100%;
@@ -852,78 +1507,27 @@ export default {
     .nSelect {
       .fb {
         display: flex;
+        white-space: nowrap;
         .jc {
           color: #4ea6ff;
           font-size: 14px;
           margin-left: 20px;
+          white-space: nowrap;
         }
       }
     }
     .tableSelect {
-      margin-right: 20px;
+      // margin-right: 20px;
       display: flex;
       align-items: center;
       justify-content: right;
+      white-space: nowrap;
       .g1 {
         color: #4ea6ff;
         font-size: 14px;
       }
     }
   }
-  // .operation {
-  //   font-size: 14px;
-  //   font-weight: 400;
-  //   color: #4ea6ff;
-  //   // line-height: 36px;
-  //   .operation1 {
-  //     margin-left: 21px;
-  //     width: 28px;
-  //     display: inline-block;
-  //   }
-  //   .operation3 {
-  //     margin-left: 21px;
-  //     width: 70px;
-  //     display: inline-block;
-  //     text-align: center;
-  //   }
-  //   .more {
-  //     width: 50px;
-  //     display: inline-block;
-  //     margin-left: 21px;
-  //     position: relative;
-  //     text-align: left;
-  //     // z-index: 99999;
-  //     .moreArrow {
-  //       width: 13px;
-  //       height: 7px;
-  //       display: inline-block;
-  //       background-image: url("../../assets/images/navtop/down.png");
-  //       background-size: 100%;
-  //       margin: 2px;
-  //       margin-left: 7px;
-  //     }
-  //     .moreItems {
-  //       width: 80px;
-  //       padding: 5px;
-  //       display: none;
-  //       background: #ffffff;
-  //       box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
-  //       border-radius: 3px;
-  //       border: 0px solid #dcdcdc;
-  //       position: absolute;
-  //       left: 0px;
-  //       top: 28px;
-  //       z-index: 100;
-  //       text-align: center;
-  //     }
-  //   }
-  //   .more:hover .moreArrow {
-  //     background-image: url("../../assets/images/navtop/up.png");
-  //   }
-  //   .more:hover .moreItems {
-  //     display: block;
-  //   }
-  // }
 
   .unout {
     display: none;

src/views/projectcenter/TaskPage.vue

@@ -1080,11 +1080,6 @@
             display: flex;
             align-items: center;
             justify-content: space-between;
-            background: linear-gradient(
-              0deg,
-              rgba(78, 166, 255, 0) 0%,
-              rgba(78, 166, 255, 0.2) 100%
-            );
           "
         >
           <div class="headerLeft" style="margin-left: 32px">
@@ -1499,7 +1494,9 @@ export default {
                       require("../../assets/images/taskpage/one.png") +
                       ")",
                   }}
-                >fewfwe</div>
+                >
+                  fewfwe
+                </div>
               );
             } else if (text.record.rank == "2") {
               return <div>ggg</div>;
@@ -1783,6 +1780,12 @@ export default {
 .pubproject {
   .ant-modal {
     .ant-modal-body {
+      .modalHeader {
+        background: linear-gradient(
+          rgba(78, 166, 255, 0.2) 0%,
+          rgba(78, 166, 255, 0) 100%
+        );
+      }
       padding: 0;
       .modalHeader {
         background: linear-gradient(