From 4e0937050835d2633d54d11176563f9f06ab6e09 Mon Sep 17 00:00:00 2001
From: dongwug <guoys@dongwu-inc.com>
Date: Tue, 25 Oct 2022 12:11:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=AD=A6=E4=B9=A0=E8=B7=AF=E5=BE=84?=
 =?UTF-8?q?=E5=9B=BE=E6=B7=BB=E5=8A=A0=E5=AD=A6=E5=91=98=E7=9A=84=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=AD=A6=E5=91=98=E5=92=8C=E5=AF=BC=E5=85=A5=E5=AD=A6?=
 =?UTF-8?q?=E5=91=98=E5=8A=9F=E8=83=BD=20=E5=AF=BC=E5=85=A5=E5=AD=A6?=
 =?UTF-8?q?=E5=91=98=E7=9A=84=E5=BC=B9=E7=AA=97=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/drawers/AddLevelImportStu.vue |   1 +
 src/components/drawers/ImportStu.vue         |   1 +
 src/views/learningpath/LevelAddDetail.vue    | 638 ++++++++++---------
 3 files changed, 331 insertions(+), 309 deletions(-)

diff --git a/src/components/drawers/AddLevelImportStu.vue b/src/components/drawers/AddLevelImportStu.vue
index fdf9464d..ce7767bb 100644
--- a/src/components/drawers/AddLevelImportStu.vue
+++ b/src/components/drawers/AddLevelImportStu.vue
@@ -143,6 +143,7 @@ export default {
       display: flex;
       justify-content: space-between;
       align-items: center;
+      flex-shrink: 0;
       // background-color: red;
       margin-bottom: 20px;
       .headerTitle {
diff --git a/src/components/drawers/ImportStu.vue b/src/components/drawers/ImportStu.vue
index b1d7c751..a0a89d66 100644
--- a/src/components/drawers/ImportStu.vue
+++ b/src/components/drawers/ImportStu.vue
@@ -145,6 +145,7 @@ export default {
       align-items: center;
       // background-color: red;
       margin-bottom: 20px;
+      flex-shrink: 0;
       .headerTitle {
         font-size: 18px;
         font-weight: 600;
diff --git a/src/views/learningpath/LevelAddDetail.vue b/src/views/learningpath/LevelAddDetail.vue
index 9128a420..09a7a8d3 100644
--- a/src/views/learningpath/LevelAddDetail.vue
+++ b/src/views/learningpath/LevelAddDetail.vue
@@ -368,80 +368,80 @@
       </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 class="xwid">
+            <div class="xin">
+              <div class="xheadb">
+                <button class="addx" @click="showAddStu">添加学员</button>
+                <!-- 点击抽屉组件在LevelAdd，此处没添加showAddStu、showImpStu -->
+                <button class="addd" @click="showImpStu">导入学员</button>
+                <button class="addd">批量删除</button>
               </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 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 class="pad"></div>
-        </div>
         </div>
       </div>
       <div class="footbtn">
@@ -455,11 +455,17 @@
         </div>
       </div>
     </div>
+    <!-- 添加学员抽屉 -->
+    <add-stu v-model:AddSvisible="AddSvisible" />
+    <!-- 导入学员抽屉 -->
+    <imp-stu v-model:AddImpStuvisible="AddImpStuvisible" />
   </div>
 </template>
 
 <script>
 import { reactive, toRefs, onMounted, onUnmounted } from "vue";
+import AddStu from "../../components/drawers/AddLevelAddStu";
+import ImpStu from "../../components/drawers/AddLevelImportStu";
 const drawercolumns = [
   {
     title: "项目名称",
@@ -500,6 +506,10 @@ const drawercolumns = [
 ];
 export default {
   name: "LevelAddDetail",
+  components: {
+    AddStu,
+    ImpStu,
+  },
   setup() {
     const state = reactive({
       level: [
@@ -784,6 +794,8 @@ export default {
       tableDataTotal: 100,
       pageSize: 10,
       visible: false,
+      AddSvisible: false, //添加学员抽屉
+      AddImpStuvisible: false, //导入学员抽屉
       modal: false,
       clos: false,
       stm_hs: false,
@@ -808,6 +820,12 @@ export default {
     const afterVisibleChange = (bool) => {
       console.log("visible", bool);
     };
+    const showAddStu = () => {
+      state.AddSvisible = true;
+    };
+    const showImpStu = () => {
+      state.AddImpStuvisible = true;
+    };
     const tableDataFunc = () => {
       const columns = [
         {
@@ -1051,6 +1069,8 @@ export default {
       showModal,
       closeModal,
       afterVisibleChange,
+      showAddStu,
+      showImpStu,
       drawercolumns,
       onSelectChange,
       changebgc,
@@ -1648,275 +1668,275 @@ export default {
           }
         }
         .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;
+          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;
+            .talk {
+              margin-top: 24px;
+              margin-bottom: 11px;
               width: 100%;
-              // height: 20px;
-              // background-color: red;
+              height: 50px;
+              background: #f5faff;
+              border: 1px solid #4ea6ff;
+              // opacity: 0.22;
               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;
+              align-items: center;
+              .im {
+                width: 14px;
+                height: 15px;
+                margin-left: 27px;
+                margin-top: -3px;
               }
-              .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%;
+              .xu {
+                height: 100%;
+                line-height: 50px;
+                margin-left: 13px;
+                .yi {
+                  color: #4f5156;
                   font-size: 14px;
-                  padding: 0;
-                  color: #409eff;
-                  text-align: center;
+                }
+                .zon {
+                  color: #999ba3;
+                  font-size: 14px;
+                  margin-left: 34px;
+                }
+                .th {
+                  color: #4ea6ff;
                 }
               }
             }
-          }
-          .twomain {
-            margin-left: 20px;
-            margin-top: 20px;
-            .ant-switch-checked {
-              background-color: #5dc988;
+            .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;
+              }
             }
-            .info {
-              margin-left: 10px;
+          }
+        }
+        .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;
-              // 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;
+              .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;
+                  }
+                }
               }
             }
-            .choo {
-              display: none;
-            }
-            .btm {
-              margin-left: 38px;
+            .twomain {
+              margin-left: 20px;
               margin-top: 20px;
-              .bmo {
+              .ant-switch-checked {
+                background-color: #5dc988;
+              }
+              .info {
+                margin-left: 10px;
                 color: #6f6f6f;
                 font-size: 14px;
+                // margin-top: 10px;
               }
-              .bmt {
+              .infor {
+                margin-left: 38px;
+                margin-top: 10px;
                 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;
+              .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%;