feat:学员路径图添加学员 学员无数据 创建关卡点击样式

src/views/learningpath/LevelAdd.vue

@@ -540,8 +540,8 @@
                 </div>
               </div>
             </div>
-            <div class="pad"></div></div
+            <div class="pad"></div></div>
-        ></a-tab-pane>
+          </a-tab-pane>
         <a-tab-pane key="4" tab="设置">
           <div class="split"></div>
           <div class="sametab">

src/views/learningpath/LevelAddDetail.vue

@@ -8,10 +8,18 @@
           <div class="btnText" @click="showModal">添加关卡</div>
         </div>
         <div class="maincon" style="background-color: #fff">
-          <div class="item" v-for="item in level" :key="item.id">
+          <div
+            class="item"
+            :class="{ active: isActive == true }"
+            @click="changebgc"
+            v-for="item in level"
+            :key="item.id"
+          >
             <div class="items1">
               <div class="box_left">
-                <div class="script"><span style="font-size: 12px; color: #ffffff;">说明</span></div>
+                <div class="script">
+                  <span style="font-size: 12px; color: #ffffff">说明</span>
+                </div>
                 <div class="imgIcon"></div>
               </div>
               <div class="box_right">
@@ -76,7 +84,7 @@
         </div>
       </div>
     </a-modal>
-    <div class="right">
+    <div class="right" :style="{ display: gqxy_hs ? 'block' : 'none' }">
       <div class="addhead">
         <div class="filt">
           <div class="le">
@@ -286,7 +294,7 @@
           <div class="btn btn2">
             <div class="btnText">确定</div>
           </div>
-          <div class="btn btn1">
+          <div class="btn btn1" @click="gqxy_hShow">
             <div class="btnText">下一步</div>
           </div>
         </div>
@@ -328,6 +336,125 @@
         </a-drawer>
       </div>
     </div>
+    <div class="right" :style="{ display: gqxy_hs ? 'none' : 'block' }">
+      <div class="addhead">
+        <div class="filt">
+          <div class="le">
+            <div class="leftimg">
+              <img class="img" src="../../assets/px.jpg" />
+            </div>
+            <div class="imgfor">
+              <div class="forz">产品经理进阶路径</div>
+              <div class="fort">创建时间：2022-07-21 00:00</div>
+            </div>
+          </div>
+          <div class="rightt">
+            <div class="select">
+              <span>学习模式：</span>
+              <div class="inputbox">
+                <input type="text" placeholder="按学习时间解锁" />
+                <div class="bottonbox"><div class="btnText">切换模式</div></div>
+              </div>
+            </div>
+            <div class="line"></div>
+            <router-link to="/leveladd">
+              <div style="display: flex">
+                <img class="img2" src="../../assets/images/leveladd/back.png" />
+                <div class="return">返回</div>
+              </div>
+            </router-link>
+          </div>
+        </div>
+      </div>
+      <div class="boom">
+        <div class="boomcen">
+        <div class="xwid">
+          <div class="xin">
+            <div class="xheadb">
+              <button class="addx">添加学员</button>
+              <!-- 点击抽屉组件在LevelAdd，此处没添加showAddStu、showImpStu -->
+              <button class="addd">导入学员</button>
+              <button class="addd">批量删除</button>
+            </div>
+            <div class="talk">
+              <img class="im" src="../../assets/images/leveladd/gan.png" />
+              <div class="xu">
+                <span class="yi">已选择</span>
+                <div style="width: 5px; display: inline-block"></div>
+                <span class="th">3</span>
+                <div style="width: 5px; display: inline-block"></div>
+                <span class="yi">项</span>
+                <span class="zon">列表选项总数：</span>
+                <span class="yi">5</span>
+                <span class="yi">条</span>
+              </div>
+            </div>
+            <div class="tableBox" style="margin-top: 30px">
+              <a-table
+                style="border: 1px solid #f2f6fe"
+                :columns="tableDataFunc2()"
+                :scroll="{ y: 235 }"
+                :data-source="tableData2"
+                :loading="tableDataTotal === -1 ? true : false"
+                expandRowByClick="true"
+                @expand="expandTable"
+                :pagination="false"
+                :row-selection="{
+                  columnWidth: 30,
+                  selectedRowKeys: selectedRowKeys,
+                  onChange: onSelectChange,
+                }"
+              />
+              <div class="pa">
+                <a-pagination
+                  showSizeChanger="true"
+                  showQuickJumper="true"
+                  hideOnSinglePage="true"
+                  :pageSize="pageSize"
+                  :current="currentPage"
+                  :total="tableDataTotal"
+                  class="pagination"
+                />
+              </div>
+              <!-- 无数据样式 -->
+              <div
+                class="notable"
+                :style="{ display: stm_hs ? 'block' : 'none' }"
+              >
+                <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>
+          </div>
+          <div class="pad"></div>
+        </div>
+        </div>
+      </div>
+      <div class="footbtn">
+        <div class="btnbox">
+          <div class="btn btn1" @click="gqxy_hShow">
+            <div class="btnText">上一步</div>
+          </div>
+          <div class="btn btn2">
+            <div class="btnText">保存</div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -484,6 +611,80 @@ export default {
           checkedd: false,
         },
       ],
+      tableData2: [
+        {
+          key: 1,
+          name: "张三",
+          com: "产研部",
+          gang: "产品经理",
+          cur: "关卡2",
+          jin: "2/10",
+          time: "2022-07-15 14:00",
+        },
+        {
+          key: 2,
+          name: "张三",
+          com: "产研部",
+          gang: "产品经理",
+          cur: "关卡2",
+          jin: "2/10",
+          time: "2022-07-15 14:00",
+        },
+        {
+          key: 3,
+          name: "张三",
+          com: "产研部",
+          gang: "产品经理",
+          cur: "关卡2",
+          jin: "2/10",
+          time: "2022-07-15 14:00",
+        },
+        {
+          key: 4,
+          name: "张三",
+          com: "产研部",
+          gang: "产品经理",
+          cur: "关卡1",
+          jin: "2/10",
+          time: "2022-07-15 14:00",
+        },
+        {
+          key: 5,
+          name: "张三",
+          com: "产研部",
+          gang: "产品经理",
+          cur: "关卡1",
+          jin: "2/10",
+          time: "2022-07-15 14:00",
+        },
+        {
+          key: 6,
+          name: "张三",
+          com: "产研部",
+          gang: "产品经理",
+          cur: "关卡2",
+          jin: "2/10",
+          time: "2022-07-15 14:00",
+        },
+        {
+          key: 7,
+          name: "张三",
+          com: "产研部",
+          gang: "产品经理",
+          cur: "关卡2",
+          jin: "2/10",
+          time: "2022-07-15 14:00",
+        },
+        {
+          key: 8,
+          name: "张三",
+          com: "产研部",
+          gang: "产品经理",
+          cur: "关卡2",
+          jin: "2/10",
+          time: "2022-07-15 14:00",
+        },
+      ],
       drawertableData: [
         {
           key: 1,
@@ -589,6 +790,8 @@ export default {
       value1: "",
       value2: "",
       selectedRowKeys: [],
+      isActive: false,
+      gqxy_hs: true,
     });
     const showDrawer = () => {
       state.visible = true;
@@ -719,6 +922,95 @@ export default {
       ];
       return columns;
     };
+    const tableDataFunc2 = () => {
+      const columns = [
+        {
+          title: "姓名",
+          dataIndex: "name",
+          // width: "30%",
+          key: "name",
+          width: 60,
+          align: "left",
+          className: "classify",
+
+          scopedSlots: { customRender: "action" }, //引入的插槽
+          customRender: (text) => {
+            return (
+              <div class="racona">
+                <span> {text.record.name}</span>
+
+                {/**
+								<div class="img"></div>
+                <a-checkbox class="ch" checked={text.record.checkedd}>
+                  {text.record.lei}
+                </a-checkbox>
+*/}
+              </div>
+            );
+          },
+        },
+        {
+          title: "部门",
+          dataIndex: "com",
+          // width: "30%",
+          key: "com",
+          width: 110,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "岗位",
+          dataIndex: "gang",
+          key: "gang",
+          width: 110,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "当前关卡",
+          dataIndex: "cur",
+          key: "cur",
+          width: 110,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "进度",
+          dataIndex: "jin",
+          key: "jin",
+          width: 110,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "开始时间",
+          dataIndex: "time",
+          key: "time",
+          width: 120,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "操作",
+          className: "h",
+          dataIndex: "opacation",
+          key: "opacation",
+          width: 140,
+          align: "center",
+          scopedSlots: { customRender: "action" }, //引入的插槽
+          customRender: () => {
+            return (
+              <div class="opa">
+                <div class="opacation">
+                  <span style="color:#4EA6FF;cursor:pointer">删除</span>
+                </div>
+              </div>
+            );
+          },
+        },
+      ];
+      return columns;
+    };
 
     const onSelectChange = (selectedRowKeys) => {
       console.log("selectedRowKeys changed: ", selectedRowKeys);
@@ -744,9 +1036,16 @@ export default {
       document.getElementsByTagName("main")[0].style.boxShadow =
         "0px 1px 35px 0px rgba(118, 136, 166, 0.07)";
     });
+    const changebgc = () => {
+      state.isActive = !state.isActive;
+    };
+    const gqxy_hShow = () => {
+      state.gqxy_hs = !state.gqxy_hs;
+    };
     return {
       ...toRefs(state),
       tableDataFunc,
+      tableDataFunc2,
       showDrawer,
       closeDrawer,
       showModal,
@@ -754,6 +1053,8 @@ export default {
       afterVisibleChange,
       drawercolumns,
       onSelectChange,
+      changebgc,
+      gqxy_hShow,
     };
   },
 };
@@ -983,17 +1284,10 @@ export default {
   width: 100%;
   display: flex;
   min-width: 933px;
-  // min-width: 1200px;
-  // overflow-x: hidden;
-  // min-width: 1400px;
-  // overflow: scroll;
   background-color: rgba(245, 247, 250, 1);
   .left {
     margin-right: 20px;
     width: 208px;
-    // height: 100%;
-    // flex: 1;
-    // height: 100%;
     background: #ffffff;
     box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
     display: flex;
@@ -1005,18 +1299,14 @@ export default {
         font-size: 18px;
         color: #363636;
       }
-
-      // flex-wrap: wrap;
       .btn {
         margin-top: 20px;
-        // padding: 0px 26px 0px 26px;
         height: 38px;
         background: #fff6e8;
         border-radius: 8px;
         display: flex;
         align-items: center;
         justify-content: center;
-        // margin-right: 14px;
         flex-shrink: 0;
         cursor: pointer;
         .search {
@@ -1026,7 +1316,6 @@ export default {
           font-size: 14px;
           font-weight: 400;
           color: #ffb64e;
-          // line-height: 38px;
           margin-top: 4px;
           margin-left: 5px;
         }
@@ -1047,46 +1336,47 @@ export default {
         width: 208px;
         display: flex;
         flex-direction: column;
-        align-items: center; // background-color: #bfa;
+        align-items: center;
         .item {
           width: 171px;
           height: 83px;
-          background: rgba(255, 182, 78,.1);
+          background: rgba(255, 182, 78, 0.1);
           border: 1px solid #ffb64e;
           opacity: 0.45;
           border-radius: 8px;
           margin-bottom: 16px;
           align-items: center;
           padding: 16px;
-          opacity: .5;
+          opacity: 0.5;
-          .items1{
+          cursor: pointer;
+          .items1 {
             margin-bottom: 12px;
             display: flex;
             align-items: center;
-            .box_left{
+            .box_left {
-              width:140px;
+              width: 140px;
               display: flex;
               align-items: center;
-              .script{
+              .script {
                 display: flex;
                 justify-content: center;
                 align-items: center;
                 width: 56px;
                 height: 24px;
-                background: #FFB64E;
+                background: #ffb64e;
                 border-radius: 6px;
                 margin-right: 12px;
                 white-space: nowrap;
               }
-              .imgIcon{
+              .imgIcon {
                 width: 14px;
                 height: 14px;
                 background-image: url(@/assets/images/leveladd/edit.png);
                 background-size: 100% 100%;
               }
             }
-            .box_right{
+            .box_right {
-              .imgIcon{
+              .imgIcon {
                 width: 14px;
                 height: 14px;
                 background-image: url(@/assets/images/leveladd/z1.png);
@@ -1094,8 +1384,8 @@ export default {
               }
             }
           }
-          .items2{
+          .items2 {
-            .name{
+            .name {
               width: 100px;
               overflow: hidden;
               text-overflow: ellipsis;
@@ -1104,6 +1394,9 @@ export default {
             }
           }
         }
+        .active {
+          opacity: 1;
+        }
       }
     }
   }
@@ -1219,7 +1512,6 @@ export default {
       width: 100%;
       // height: 130px;
       margin-top: 20px;
-      margin-bottom: 20px;
       background-color: #fff;
       box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
       display: flex;
@@ -1261,6 +1553,7 @@ export default {
     }
     .boom {
       width: 100%;
+      margin-top: 20px;
       flex: 1;
       background-color: #fff;
       box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
@@ -1352,6 +1645,276 @@ export default {
             background: #f6f9fd;
           }
         }
+        .xwid {
+        position: relative;
+        margin-top: 30px;
+        display: flex;
+        margin-bottom: 20px;
+        .xin {
+          width: 100%;
+          .xheadb {
+            display: flex;
+            .addx {
+              width: 130px;
+              height: 40px;
+              background: #4ea6ff;
+              border-radius: 8px;
+              color: #fff;
+              border: 0;
+              cursor: pointer;
+              margin-right: 20px;
+            }
+            .addd {
+              width: 130px;
+              height: 40px;
+              background: #fff;
+              border-radius: 8px;
+              border: 1px solid #4ea6ff;
+              color: #4ea6ff;
+              cursor: pointer;
+              margin-right: 20px;
+            }
+            .select {
+              .ant-select {
+                //
+                // border: 0 !important;
+                border-radius: 11px;
+                .ant-select-selector {
+                  border: 1px solid #4ea6ff !important;
+                  .ant-select-selection-placeholder {
+                    padding-left: 15px;
+                    color: #4ea6ff;
+                  }
+                }
+              }
+            }
+          }
+          .talk {
+            margin-top: 24px;
+            margin-bottom: 11px;
+            width: 100%;
+            height: 50px;
+            background: #f5faff;
+            border: 1px solid #4ea6ff;
+            // opacity: 0.22;
+            display: flex;
+            align-items: center;
+            .im {
+              width: 14px;
+              height: 15px;
+              margin-left: 27px;
+              margin-top: -3px;
+            }
+            .xu {
+              height: 100%;
+              line-height: 50px;
+              margin-left: 13px;
+              .yi {
+                color: #4f5156;
+                font-size: 14px;
+              }
+              .zon {
+                color: #999ba3;
+                font-size: 14px;
+                margin-left: 34px;
+              }
+              .th {
+                color: #4ea6ff;
+              }
+            }
+          }
+          .tableBox {
+            margin-bottom: 80px;
+
+            .classify {
+              margin-left: 11px !important;
+              padding-left: 9px !important;
+            }
+            .ant-checkbox-wrapper {
+              align-items: center;
+              margin-top: -2px;
+            }
+            .ant-table-selection-column {
+              padding: 0px !important;
+              padding-left: 38px !important;
+            }
+            .ant-table-thead > tr > th {
+              background-color: rgba(239, 244, 252, 1);
+            }
+            th.h {
+              background-color: #eff4fc !important;
+            }
+
+            .ant-table-tbody
+              > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
+              > td {
+              background: #f6f9fd;
+            }
+            .pa {
+              left: 0;
+              width: 100%;
+              // height: 20px;
+              // background-color: red;
+              display: flex;
+              justify-content: center;
+              position: absolute;
+              bottom: 0px;
+            }
+          }
+        }
+      }
+      .Gcon {
+        display: flex;
+        .pad {
+          height: 100%;
+          width: 40px;
+        }
+        .Gin {
+          // background-color: #bfa;
+          margin-top: 30px;
+          .headone {
+            // background-color: red;
+            display: flex;
+            text-align: center;
+            .box {
+              width: 4px;
+              height: 20px;
+              background-color: #4ea6ff;
+              border-radius: 2px;
+            }
+            .onetitle {
+              margin-left: 15px;
+              color: #333333;
+              font-size: 14px;
+            }
+            .oneedi {
+              margin-left: 15px;
+              color: #4ea6ff;
+              cursor: pointer;
+            }
+            .twobtn {
+              display: flex;
+              .btnone {
+                width: 42px;
+                height: 24px;
+                border: 1px solid rgba(64, 158, 255, 1);
+                border-radius: 4px;
+                color: rgba(64, 158, 255, 1);
+                margin-left: 20px;
+                cursor: pointer;
+              }
+              .btntwo {
+                width: 42px;
+                height: 24px;
+                border: 1px solid rgba(64, 158, 255, 1);
+                border-radius: 4px;
+                color: #ffffff;
+                margin-left: 20px;
+                background: #409eff;
+                cursor: pointer;
+              }
+            }
+          }
+          .onemain {
+            margin-top: 20px;
+            margin-left: 55px;
+            color: #6f6f6f;
+            font-size: 14px;
+            .checkcon {
+              position: relative;
+              .in {
+                position: absolute;
+                // margin-top: 10px;
+                left: 0;
+                top: 3px;
+              }
+              .yulan {
+                // color: yellow;
+                margin-left: 22px;
+                // display: inline-block;
+              }
+              .yulan2 {
+                margin-left: 22px;
+              }
+              .ant-input-number {
+                height: 24px;
+                width: 24px;
+                margin: 10px;
+                border-radius: 4px;
+                border: 1px solid #6d7584;
+                .ant-input-number-input {
+                  width: 100%;
+                  height: 100%;
+                  font-size: 14px;
+                  padding: 0;
+                  color: #409eff;
+                  text-align: center;
+                }
+              }
+            }
+          }
+          .twomain {
+            margin-left: 20px;
+            margin-top: 20px;
+            .ant-switch-checked {
+              background-color: #5dc988;
+            }
+            .info {
+              margin-left: 10px;
+              color: #6f6f6f;
+              font-size: 14px;
+              // margin-top: 10px;
+            }
+            .infor {
+              margin-left: 38px;
+              margin-top: 10px;
+              color: #c7cbd2;
+              font-size: 14px;
+            }
+            .chooseshow {
+              // background-color: red;
+              margin-left: 38px;
+              margin-top: 12px;
+              .fane {
+                color: #6f6f6f;
+                font-size: 14px;
+              }
+            }
+            .choo {
+              display: none;
+            }
+            .btm {
+              margin-left: 38px;
+              margin-top: 20px;
+              .bmo {
+                color: #6f6f6f;
+                font-size: 14px;
+              }
+              .bmt {
+                color: #c7cbd2;
+                font-size: 14px;
+                margin-top: 3px;
+              }
+              .chosecon {
+                display: flex;
+                margin-top: 6px;
+                margin-bottom: 20px;
+                .chose {
+                  position: relative;
+                  .inl {
+                    position: absolute;
+                    top: 2px;
+                  }
+                  .sh {
+                    margin-left: 23px;
+                    color: #6f6f6f;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
         .notable {
           width: 100%;
           height: 100%;