feat:新增课程库弹窗删除复制停用二维码导出 新建开课无数据

src/views/courselibrary/CoursewareManage.vue

@@ -1013,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"
@@ -1042,6 +1056,7 @@
                 }"
               />
             </div>
+            <!-- 有数据表格 -->
           </div>
         </div>
       </div>
@@ -1604,9 +1619,7 @@
         <div class="del_header"></div>
         <div class="del_main">
           <div class="header">
-            <div
+            <div class="icon"></div>
-              class="icon"
-            ></div>
             <span>提示</span>
             <div class="close_exit" @click="delete_exit"></div>
           </div>
@@ -1637,9 +1650,7 @@
         <div class="del_header"></div>
         <div class="del_main">
           <div class="header">
-            <div
+            <div class="icon"></div>
-              class="icon"
-            ></div>
             <span>提示</span>
             <div class="close_exit" @click="delete_exit"></div>
           </div>
@@ -1658,6 +1669,37 @@
       </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>
@@ -2021,7 +2063,6 @@ export default defineComponent({
           creator: "管理员",
           createtime: "2022-07-20 9:30",
           pubtime: "2022-07-20 9:30",
-          ynuse: "启用",
           kkty: false,
         },
         {
@@ -2038,7 +2079,6 @@ export default defineComponent({
           creator: "管理员",
           createtime: "2022-07-20 9:30",
           pubtime: "2022-07-20 9:30",
-          ynuse: "启用",
           kkty: true,
         },
         {
@@ -2055,7 +2095,6 @@ export default defineComponent({
           creator: "管理员",
           createtime: "2022-07-20 9:30",
           pubtime: "2022-07-20 9:30",
-          ynuse: "启用",
           kkty: true,
         },
         {
@@ -2072,7 +2111,6 @@ export default defineComponent({
           creator: "管理员",
           createtime: "2022-07-20 9:30",
           pubtime: "2022-07-20 9:30",
-          ynuse: "停用",
           kkty: true,
         },
         {
@@ -2089,7 +2127,6 @@ export default defineComponent({
           creator: "管理员",
           createtime: "2022-07-20 9:30",
           pubtime: "2022-07-20 9:30",
-          ynuse: "启用",
           kkty: true,
         },
         {
@@ -2106,7 +2143,6 @@ export default defineComponent({
           creator: "管理员",
           createtime: "2022-07-20 9:30",
           pubtime: "2022-07-20 9:30",
-          ynuse: "启用",
           kkty: true,
         },
       ],
@@ -2324,6 +2360,7 @@ export default defineComponent({
       rejectstudy_hs: false,
       delete_hs: false,
       copy_hs: false,
+      nouse_hs: false,
       value: "",
       value5: "",
       value6: "",
@@ -2338,6 +2375,7 @@ export default defineComponent({
       selectedRowKeys: [],
       faceManageTab: "1",
     });
+    // 渲染列表1操作
     const getTableDate = () => {
       let datas = state.tableData1;
       datas.map((value) => {
@@ -2646,6 +2684,7 @@ export default defineComponent({
       state.tableData = datas;
     };
     getTableDate();
+    //渲染学员管理操作
     const getTableDate2 = () => {
       let data2 = state.tableData7;
       data2.map((value) => {
@@ -2709,6 +2748,7 @@ export default defineComponent({
       state.tableData = data2;
     };
     getTableDate2();
+    // 渲染开课操作
     const getTableDate3 = () => {
       let datas = state.tableData6;
       datas.map((value) => {
@@ -2718,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"
@@ -2740,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>
@@ -2766,6 +2832,7 @@ export default defineComponent({
       state.tableData = datas;
     };
     getTableDate3();
+    //渲染学员管理结业状态
     const getTableDate4 = () => {
       let data2 = state.tableData7;
       data2.map((value) => {
@@ -2826,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",
@@ -2943,6 +3044,9 @@ export default defineComponent({
     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;
@@ -3000,6 +3104,7 @@ export default defineComponent({
       rejectstudy_exit,
       delete_exit,
       copy_exit,
+      nouse_exit,
       onSelectChange,
       faceManageChange,
       openMessage,
@@ -3156,6 +3261,14 @@ export default defineComponent({
         justify-content: right;
       }
     }
+    .ynuse {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .use {
+        cursor: pointer;
+      }
+    }
   }
 }
 .selectonlineface {
@@ -4471,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;