style：修改添加学员抽屉

src/components/drawers/AddLevelAddStu.vue

@@ -48,7 +48,7 @@
                     </div>
                   </div>
                 </div>
-                <div class="line">
+                <!-- <div class="line">
                   <div class="inline">
                     <div class="left1">
                       <div class="img"></div>
@@ -60,7 +60,7 @@
                     </div>
                     <div class="right1">清空</div>
                   </div>
-                </div>
+                </div> -->
                 <div class="tabb" style="margin-top: 16px">
                   <a-table
                     style="border: 1px solid #f2f6fe"
@@ -68,7 +68,7 @@
                     :data-source="tabledata"
                     :loading="tableDataTotal === -1 ? true : false"
                     expandRowByClick="true"
-                    :scroll="{ x: 100, y: 560 }"
+                    :scroll="{ x: 500, y: 560 }"
                     @expand="expandTable"
                     :pagination="false"
                     :row-selection="{
@@ -92,29 +92,36 @@
               </a-tab-pane>
               <a-tab-pane key="2" tab="添加组织" force-render>
                 <div class="tab2">
-                  <div class="organize">组织：</div>
+                  <div class="t1">
-                  <div class="select">
+                    <div class="organize">选择组织：</div>
-                    <a-cascader
+                    <div class="select">
-                      v-model:value="value"
+                      <a-tree-select
-                      placeholder="请输入组织名称"
+                        v-model:value="valueSelect"
-                      :options="organizeList"
+                        style="width: 200px"
+                        :dropdown-style="{
+                          overflow: 'auto',
+                          width: '400px',
+                        }"
+                        dropdownClassName="dropdown"
+                        placeholder="请输入组织名称"
+                        allow-clear
+                        tree-default-expand-all
+                        :tree-data="treeData"
+                      >
+                      </a-tree-select>
+                    </div>
+                  </div>
+                  <div class="t1">
+                    <div class="organize">姓名：</div>
+                    <a-input
+                      v-model:value="nameadd"
+                      style="width: 200px; height: 40px; border-radius: 8px"
+                      placeholder="请输入姓名"
                     />
                   </div>
                 </div>
-              </a-tab-pane>
+                <!-- 选完后出现下面 -->
-              <a-tab-pane key="3" tab="受众关联">
+                <div class="searchdown">
-                <div class="tab1">
-                  <div class="nameinp">
-                    <div class="namee">受众名称：</div>
-                    <div class="select">
-                      <a-select
-                        v-model:value="choosevalue"
-                        style="width: 264px; border-radius: 8px"
-                        placeholder="请输入组织名称"
-                        :options="organizeList1"
-                      />
-                    </div>
-                  </div>
                   <div class="btns">
                     <div class="btn1">
                       <div class="img1">
@@ -133,8 +140,75 @@
                       <div class="wz">重置</div>
                     </div>
                   </div>
+                  <div class="tabb" style="margin-top: 16px">
+                    <a-table
+                      style="border: 1px solid #f2f6fe"
+                      :columns="tablecolumns1"
+                      :data-source="tabledata1"
+                      :loading="tableDataTotal === -1 ? true : false"
+                      expandRowByClick="true"
+                      :scroll="{ x: 500, y: 560 }"
+                      @expand="expandTable"
+                      :pagination="false"
+                      :row-selection="{
+                        columnWidth: 30,
+                        selectedRowKeys: selectedRowKeys1,
+                        onChange: onSelectChange1,
+                      }"
+                    />
+                    <div class="pa">
+                      <a-pagination
+                        showSizeChanger="true"
+                        showQuickJumper="true"
+                        hideOnSinglePage="true"
+                        :pageSize="pageSize1"
+                        :current="currentPage1"
+                        :total="tableDataTotal1"
+                        class="pagination"
+                      />
+                    </div>
+                  </div>
                 </div>
-                <div class="line">
+              </a-tab-pane>
+              <a-tab-pane key="3" tab="受众关联">
+                <div class="tab1">
+                  <div class="t1">
+                    <div class="nameinp">
+                      <div class="namee">选择受众：</div>
+                      <div class="select">
+                        <a-select
+                          v-model:value="choosevalue"
+                          style="width: 200px; border-radius: 8px"
+                          placeholder="请输入组织名称"
+                          :options="organizeList1"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div class="t1" style="margin-top: 10px">
+                    <div class="organize">姓名：</div>
+                    <a-input
+                      v-model:value="nameaddd"
+                      style="width: 200px; height: 40px; border-radius: 8px"
+                      placeholder="请输入姓名"
+                    />
+                  </div>
+                </div>
+                <div class="btns">
+                  <div class="btn1">
+                    <div class="img1">
+                      <img src="../../assets/images/courseManage/search0.png" />
+                    </div>
+                    <div class="wz">搜索</div>
+                  </div>
+                  <div class="btn2">
+                    <div class="img2">
+                      <img src="../../assets/images/courseManage/reset1.png" />
+                    </div>
+                    <div class="wz">重置</div>
+                  </div>
+                </div>
+                <!-- <div class="line">
                   <div class="inline">
                     <div class="left1">
                       <div class="img"></div>
@@ -146,21 +220,21 @@
                     </div>
                     <div class="right1">清空</div>
                   </div>
-                </div>
+                </div> -->
                 <div class="tabb" style="margin-top: 16px">
                   <a-table
                     style="border: 1px solid #f2f6fe"
-                    :columns="tablecolumns1"
+                    :columns="tablecolumns2"
-                    :data-source="tabledata1"
+                    :data-source="tabledata2"
                     :loading="tableDataTotal === -1 ? true : false"
                     expandRowByClick="true"
-                    :scroll="{ x: 700, y: 400 }"
+                    :scroll="{ x: 500, y: 560 }"
                     @expand="expandTable"
                     :pagination="false"
                     :row-selection="{
                       columnWidth: 30,
-                      selectedRowKeys: selectedRowKeys,
+                      selectedRowKeys: selectedRowKeys2,
-                      onChange: onSelectChange,
+                      onChange: onSelectChange2,
                     }"
                   />
                   <div class="pa">
@@ -168,9 +242,9 @@
                       showSizeChanger="true"
                       showQuickJumper="true"
                       hideOnSinglePage="true"
-                      :pageSize="pageSize"
+                      :pageSize="pageSize2"
-                      :current="currentPage"
+                      :current="currentPage2"
-                      :total="tableDataTotal"
+                      :total="tableDataTotal2"
                       class="pagination"
                     />
                   </div>
@@ -181,7 +255,11 @@
         </div>
         <div class="right">
           <div class="onerow">
-            <div class="already">已选</div>
+            <div class="onleft">
+              <div class="already">已选</div>
+              <div class="count">6</div>
+              <div class="peo">人</div>
+            </div>
             <div class="clbox">
               <div class="colose"></div>
               <span class="allclear">全部清除</span>
@@ -238,47 +316,74 @@ export default {
       pageSize: 10,
       currentPage: 1,
       tableDataTotal: 50,
+      pageSize1: 10,
+      currentPage1: 1,
+      tableDataTotal1: 50,
+      pageSize2: 10,
+      currentPage2: 1,
+      tableDataTotal2: 50,
+      selectedRowKeys: [],
+      selectedRowKeys1: [],
+      selectedRowKeys2: [],
       activeKey: "1",
-      name: "", //输入名字搜索
       value: [], //级联选择框
       choosevalue: null, //受众选择
-      organizeList: [
+      valueSelect: null, //树形选择
+      name: "",
+      nameadd: "",
+      nameaddd: "",
+      treeData: [
         {
-          id: 1,
+          title: "京东方",
           value: "京东方",
-          label: "京东方",
           children: [
             {
-              id: 2,
+              title: "产研部",
               value: "产研部",
-              label: "产研部",
               children: [
                 {
-                  id: 4,
+                  title: "产品部",
-                  value: "产品部门",
+                  value: "产品部",
-                  label: "产品部门",
                 },
                 {
-                  id: 5,
+                  title: "研究部",
-                  value: "研发部门",
+                  value: "研究部",
-                  label: "研发部门",
                 },
               ],
             },
             {
-              id: 3,
+              title: "二级标题",
-              value: "人力资源部",
+              value: "二级标题",
-              label: "人力资源部",
               children: [
                 {
-                  id: 6,
+                  title: "三级标题",
+                  value: "三级标题",
+                  children: [
+                    {
+                      title: "四级标题",
+                      value: "四级标题",
+                      children: [
+                        {
+                          title: "五级标题",
+                          value: "五级标题",
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              title: "人力资源部",
+              value: "人力资源部",
+              children: [
+                {
+                  title: "人事部",
                   value: "人事部",
-                  label: "人事部",
                 },
                 {
-                  id: 7,
+                  title: "行政部",
                   value: "行政部",
-                  label: "行政部",
                 },
               ],
             },
@@ -290,55 +395,64 @@ export default {
           key: 1,
           name: "小李",
           bum: "产研部",
-          gangw: "产品经理",
+          numb: "000000",
+          guishu: "",
         },
         {
           key: 2,
           name: "小刘",
           bum: "产研部",
-          gangw: "产品经理",
+          numb: "000000",
+          guishu: "",
         },
         {
           key: 3,
           name: "小李",
           bum: "产研部",
-          gangw: "产品经理",
+          numb: "000000",
+          guishu: "",
         },
         {
           key: 4,
           name: "小李",
           bum: "产研部",
-          gangw: "产品经理",
+          numb: "000000",
+          guishu: "",
         },
         {
           key: 5,
           name: "小李",
           bum: "产研部",
-          gangw: "产品经理",
+          numb: "000000",
+          guishu: "",
         },
         {
           key: 6,
           name: "小李",
           bum: "产研部",
-          gangw: "产品经理",
+          numb: "000000",
+          guishu: "",
         },
         {
           key: 7,
           name: "小李",
           bum: "产研部",
-          gangw: "产品经理",
+          numb: "000000",
+          guishu: "",
         },
         {
           key: 8,
           name: "小李",
           bum: "产研部",
-          gangw: "产品经理",
+          numb: "000000",
+          guishu: "",
         },
         {
           key: 9,
           name: "小李",
           bum: "产研部",
-          gangw: "产品经理",
+          numb: "000000",
+          guishu: "",
         },
       ],
       tablecolumns: [
@@ -351,18 +465,26 @@ export default {
           className: "h",
         },
         {
-          title: "部门",
+          title: "工号",
-          dataIndex: "bum",
+          dataIndex: "numb",
-          key: "bum",
+          key: "numb",
-          width: 45,
+          width: 35,
           align: "center",
           className: "h",
         },
         {
-          title: "岗位",
+          title: "归属组织",
-          dataIndex: "gangw",
+          dataIndex: "guishu",
-          key: "gangw",
+          key: "guishu",
-          width: 45,
+          width: 30,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "部门",
+          dataIndex: "bum",
+          key: "bum",
+          width: 40,
           align: "center",
           className: "h",
         },
@@ -370,56 +492,71 @@ export default {
       tabledata1: [
         {
           key: 1,
-          name: "学习受众",
+          name: "小李",
-          time: "2022-10-31 23:12:00",
+          bum: "产研部",
-          total: "1",
+          numb: "000000",
-          state: "已发布",
+          guishu: "",
-          type: "普通受众",
         },
         {
           key: 2,
-          name: "2",
+          name: "小刘",
-          time: "2022-10-31 23:12:00",
+          bum: "产研部",
-          total: "2",
+          numb: "000000",
-          state: "已发布",
+          guishu: "",
-          type: "普通受众",
         },
         {
           key: 3,
-          name: "mask",
+          name: "小李",
-          time: "2022-10-31 23:12:00",
+          bum: "产研部",
-          total: "1",
+          numb: "000000",
-          state: "已发布",
+          guishu: "",
-          type: "普通受众",
         },
         {
           key: 4,
-          name: "学习受众",
+          name: "小李",
-          time: "2022-10-31 23:12:00",
+          bum: "产研部",
-          total: "1",
+          numb: "000000",
-          state: "已发布",
+          guishu: "",
-          type: "普通受众",
         },
         {
           key: 5,
-          name: "学业受众",
+          name: "小李",
-          time: "2022-10-31 23:12:00",
+          bum: "产研部",
-          total: "2",
+          numb: "000000",
-          state: "已发布",
+          guishu: "",
-          type: "普通受众",
         },
         {
           key: 6,
-          name: "案例受众",
+          name: "小李",
-          time: "2022-10-31 23:12:00",
+          bum: "产研部",
-          total: "3",
+          numb: "000000",
-          state: "已发布",
+          guishu: "",
-          type: "普通受众",
+        },
+        {
+          key: 7,
+          name: "小李",
+          bum: "产研部",
+          numb: "000000",
+          guishu: "",
+        },
+        {
+          key: 8,
+          name: "小李",
+          bum: "产研部",
+          numb: "000000",
+          guishu: "",
+        },
+        {
+          key: 9,
+          name: "小李",
+          bum: "产研部",
+          numb: "000000",
+          guishu: "",
         },
       ],
       tablecolumns1: [
         {
-          title: "受众名称",
+          title: "姓名",
           dataIndex: "name",
           key: "name",
           width: 30,
@@ -427,42 +564,137 @@ export default {
           className: "h",
         },
         {
-          title: "创建时间",
+          title: "工号",
-          dataIndex: "time",
+          dataIndex: "numb",
-          key: "time",
+          key: "numb",
+          width: 35,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "归属组织",
+          dataIndex: "guishu",
+          key: "guishu",
+          width: 30,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "部门",
+          dataIndex: "bum",
+          key: "bum",
           width: 40,
           align: "center",
           className: "h",
         },
+      ],
+      tabledata2: [
         {
-          title: "人数",
+          key: 1,
-          dataIndex: "total",
+          name: "小李",
-          key: "total",
+          bum: "产研部",
-          width: 20,
+          numb: "000000",
-          align: "center",
+          guishu: "",
-          className: "h",
         },
         {
-          title: "状态",
+          key: 2,
-          dataIndex: "state",
+          name: "小刘",
-          key: "state",
+          bum: "产研部",
-          width: 20,
+          numb: "000000",
-          align: "center",
+          guishu: "",
-          className: "h",
         },
         {
-          title: "类型",
+          key: 3,
-          dataIndex: "type",
+          name: "小李",
-          key: "type",
+          bum: "产研部",
+          numb: "000000",
+          guishu: "",
+        },
+        {
+          key: 4,
+          name: "小李",
+          bum: "产研部",
+          numb: "000000",
+          guishu: "",
+        },
+        {
+          key: 5,
+          name: "小李",
+          bum: "产研部",
+          numb: "000000",
+          guishu: "",
+        },
+        {
+          key: 6,
+          name: "小李",
+          bum: "产研部",
+          numb: "000000",
+          guishu: "",
+        },
+        {
+          key: 7,
+          name: "小李",
+          bum: "产研部",
+          numb: "000000",
+          guishu: "",
+        },
+        {
+          key: 8,
+          name: "小李",
+          bum: "产研部",
+          numb: "000000",
+          guishu: "",
+        },
+        {
+          key: 9,
+          name: "小李",
+          bum: "产研部",
+          numb: "000000",
+          guishu: "",
+        },
+      ],
+      tablecolumns2: [
+        {
+          title: "姓名",
+          dataIndex: "name",
+          key: "name",
           width: 30,
+          align: "left",
+          className: "h",
+        },
+        {
+          title: "工号",
+          dataIndex: "numb",
+          key: "numb",
+          width: 35,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "归属组织",
+          dataIndex: "guishu",
+          key: "guishu",
+          width: 30,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "部门",
+          dataIndex: "bum",
+          key: "bum",
+          width: 40,
           align: "center",
           className: "h",
         },
       ],
       organizeList1: [
         {
-          value: "项目一",
+          value: "产品受众群体",
-          label: "项目一",
+          label: "产品受众群体",
+        },
+        {
+          value: "人力资源hrbp",
+          label: "人力资源hrbp",
         },
       ],
     });
@@ -473,11 +705,26 @@ export default {
     const afterVisibleChange = (bool) => {
       console.log("state", bool);
     };
+    const onSelectChange = (selectedRowKeys) => {
+      console.log("selectedRowKeys changed: ", selectedRowKeys);
+      state.selectedRowKeys = selectedRowKeys;
+    };
+    const onSelectChange1 = (selectedRowKeys) => {
+      console.log("selectedRowKeys changed: ", selectedRowKeys);
+      state.selectedRowKeys = selectedRowKeys;
+    };
+    const onSelectChange2 = (selectedRowKeys) => {
+      console.log("selectedRowKeys changed: ", selectedRowKeys);
+      state.selectedRowKeys = selectedRowKeys;
+    };
 
     return {
       ...toRefs(state),
       afterVisibleChange,
       closeDrawer,
+      onSelectChange,
+      onSelectChange1,
+      onSelectChange2,
       // change,
     };
   },
@@ -486,21 +733,13 @@ export default {
 
 <style lang="scss" >
 .AddLevelAddStu {
-  // .ant-drawer-content-wrapper {
-  //   // max-width: 1000px;
-  //   .ant-drawer-header {
-  //     display: none !important;
-  //   }
-  //   .ant-drawer-body {
-  //     padding: 0;
-  //   }
-  // }
   .drawerMain {
     min-width: 600px;
     margin: 0px 32px 0px 32px;
-    overflow-x: scroll;
+    overflow-y: scroll;
     display: flex;
     flex-direction: column;
+
     .header {
       height: 73px;
       border-bottom: 1px solid #e8e8e8;
@@ -519,11 +758,12 @@ export default {
     }
     .main {
       display: flex;
-      height: 80%;
+      // height: 80%;
+      margin-bottom: 72px;
       .left {
-        // overflow-y: auto;
+        overflow-y: auto;
         width: 65%;
-        height: 100%;
+        // height: 100%;
         border-right: 1px solid rgba(233, 233, 233, 1);
         .tabs {
           margin-right: 33px;
@@ -531,6 +771,11 @@ export default {
             display: flex;
             flex-wrap: wrap;
             justify-content: space-between;
+            align-items: center;
+            .t1 {
+              display: flex;
+              align-items: center;
+            }
             .nameinp {
               display: flex;
               align-items: center;
@@ -578,6 +823,43 @@ export default {
               }
             }
           }
+          .btns {
+            display: flex;
+            margin-top: 10px;
+            .btn1 {
+              width: 100px;
+              height: 40px;
+              margin-right: 16px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              color: #ffffff;
+              font-size: 14px;
+              background: #409eff;
+              border-radius: 8px;
+              border: 1px solid #409eff;
+              cursor: pointer;
+              .wz {
+                margin-left: 10px;
+              }
+            }
+            .btn2 {
+              width: 100px;
+              height: 40px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              color: #409eff;
+              font-size: 14px;
+              background: #ffffff;
+              border-radius: 8px;
+              cursor: pointer;
+              border: 1px solid #409eff;
+              .wz {
+                margin-left: 10px;
+              }
+            }
+          }
           .line {
             width: 100%;
             height: 40px;
@@ -678,9 +960,16 @@ export default {
             display: flex;
             align-items: center;
             margin-top: 10px;
+            flex-wrap: wrap;
+            justify-content: space-between;
+            .t1 {
+              display: flex;
+              align-items: center;
+            }
             .organize {
               color: rgba(0, 0, 0, 0.85);
               font-size: 14px;
+              white-space: nowrap;
             }
             .ant-select {
               border-radius: 8px !important;
@@ -696,6 +985,51 @@ export default {
                 height: 40px;
               }
             }
+            .ant-tree-select {
+              .dropdown {
+                width: 800px !important;
+              }
+            }
+          }
+
+          .searchdown {
+            .btns {
+              display: flex;
+              margin-top: 10px;
+              .btn1 {
+                width: 100px;
+                height: 40px;
+                margin-right: 16px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: #ffffff;
+                font-size: 14px;
+                background: #409eff;
+                border-radius: 8px;
+                border: 1px solid #409eff;
+                cursor: pointer;
+                .wz {
+                  margin-left: 10px;
+                }
+              }
+              .btn2 {
+                width: 100px;
+                height: 40px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: #409eff;
+                font-size: 14px;
+                background: #ffffff;
+                border-radius: 8px;
+                cursor: pointer;
+                border: 1px solid #409eff;
+                .wz {
+                  margin-left: 10px;
+                }
+              }
+            }
           }
         }
       }
@@ -707,13 +1041,27 @@ export default {
           align-items: center;
           margin-right: 40px;
           flex-wrap: wrap;
-          .already {
+          .onleft {
-            color: rgba(51, 51, 51, 1);
+            display: flex;
-            font-size: 16px;
+            text-align: center;
-            font-weight: 500;
+            .already {
-            margin-left: 32px;
+              color: rgba(51, 51, 51, 1);
-            white-space: nowrap;
+              font-size: 16px;
-            // margin-bottom: 20px;
+              font-weight: 500;
+              margin-left: 32px;
+              white-space: nowrap;
+              // margin-bottom: 20px;
+            }
+            .count {
+              color: #388be1;
+              font-size: 16px;
+              margin: 0 6px;
+            }
+            .peo {
+              color: rgba(51, 51, 51, 1);
+              font-size: 16px;
+              font-weight: 500;
+            }
           }
           .clbox {
             margin-left: 30px;
@@ -774,6 +1122,7 @@ export default {
       height: 72px;
       width: 100%;
       position: absolute;
+      background-color: #fff;
       bottom: 0;
       left: 0;
       display: flex;