From bbc660e20f213f63a48d437d87595912edb689c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B2=B3=E4=BD=B3=E9=91=AB?= <yuejx@dongwu-inc.com>
Date: Wed, 19 Oct 2022 18:18:18 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=B7=BB=E5=8A=A0=E5=AD=A6=E5=91=98?=
 =?UTF-8?q?=E6=8A=BD=E5=B1=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/drawers/MemberList.vue |  10 +-
 src/components/drawers/StuAdd.vue     | 498 ++++++++++++++++++++++++++
 2 files changed, 507 insertions(+), 1 deletion(-)
 create mode 100644 src/components/drawers/StuAdd.vue

diff --git a/src/components/drawers/MemberList.vue b/src/components/drawers/MemberList.vue
index 2b0f9d6f..68e68420 100644
--- a/src/components/drawers/MemberList.vue
+++ b/src/components/drawers/MemberList.vue
@@ -38,7 +38,7 @@
           </div>
         </div>
         <div class="btnss" style="margin-top: 20px">
-          <div class="btn btn1" style="margin-right: 20px">
+          <div class="btn btn1" @click="showStuAdd" style="margin-right: 20px">
             <div class="img1"></div>
             <div class="wz">添加组员</div>
           </div>
@@ -122,12 +122,15 @@
       </a-modal>
     </div>
   </a-drawer>
+  <stu-add v-model:Stuvisible="Stuvisible" />
 </template>
 
 <script>
 import { toRefs, reactive } from "vue";
+import StuAdd from "./StuAdd.vue";
 export default {
   name: "MemberList",
+  components: { StuAdd },
   props: {
     Lvisible: {
       type: Boolean,
@@ -137,6 +140,7 @@ export default {
 
   setup(props, ctx) {
     const state = reactive({
+      Stuvisible: false,
       name: null,
       showmodal: false,
       closable: false, //modal右上角的关闭按钮
@@ -271,6 +275,9 @@ export default {
     const closeModal = () => {
       state.showmodal = false;
     };
+    const showStuAdd = () => {
+      state.Stuvisible = true;
+    };
     const onSelectChange = (selectedRowKeys) => {
       console.log("selectedRowKeys changed: ", selectedRowKeys);
       
@@ -282,6 +289,7 @@ export default {
       onSelectChange,
       showModal,
       closeModal,
+      showStuAdd,
     };
   },
 };
diff --git a/src/components/drawers/StuAdd.vue b/src/components/drawers/StuAdd.vue
new file mode 100644
index 00000000..6efcfdb0
--- /dev/null
+++ b/src/components/drawers/StuAdd.vue
@@ -0,0 +1,498 @@
+<template>
+  <a-drawer
+    :visible="Stuvisible"
+    class="drawerStyle stuadd"
+    placement="right"
+    width="60%"
+    @after-visible-change="afterVisibleChange"
+  >
+    <div class="drawerMain">
+      <div class="header">
+        <div class="headerTitle">添加学员</div>
+        <img
+          style="width: 29px; height: 29px; cursor: pointer"
+          src="../../assets/images/basicinfo/close.png"
+          @click="closeDrawer"
+        />
+      </div>
+      <div class="main">
+        <div class="left">
+          <div class="tabs">
+            <a-tabs v-model:activeKey="activeKey">
+              <a-tab-pane key="1" tab="快速选人">
+                <div class="tab1">
+                  <div class="nameinp">
+                    <div class="namee">姓名：</div>
+                    <a-input
+                        v-model:value="name"
+                        style="width: 270px; height: 40px; border-radius: 8px"
+                        placeholder="请输入姓名"
+                    />
+                  </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>
+                <div class="line">
+                  <div class="inline">
+                    <div class="left1">
+                      <div class="img"></div>
+                      <div class="text" style="margin-left: 10px">已选择</div>
+                      <div class="text2">2</div>
+                      <div class="text">项</div>
+                      <div class="text3">列表选项总计：</div>
+                      <div class="text4">9条</div>
+                    </div>
+                    <div class="right1">清空</div>
+                  </div>
+                </div>
+                <div class="tabb" style="margin-top: 16px">
+                  <a-table
+                    style="border: 1px solid #f2f6fe"
+                    :columns="tablecolumns"
+                    :data-source="tabledata"
+                    :loading="tableDataTotal === -1 ? true : false"
+                    expandRowByClick="true"
+                    :scroll="{ x: 590, y: 560 }"
+                    @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>
+              </a-tab-pane>
+              <a-tab-pane key="2" tab="添加组织" force-render>Content of Tab Pane 2</a-tab-pane>
+              <a-tab-pane key="3" tab="受众关联">Content of Tab Pane 3</a-tab-pane>
+            </a-tabs>
+          </div>
+        </div>
+        <div class="right">
+          <div class="onerow">
+            <div class="already">已选</div>
+            <div class="clbox">
+              <div class="colose"></div>
+              <span class="allclear">全部清除</span>
+            </div>
+          </div>
+          <div class="selecteds">
+            <div class="chose">李明</div>
+            <div class="chose">李大明</div>
+            <div class="chose">李二明</div>
+            <div class="chose">李明</div>
+            <div class="chose">李大明</div>
+            <div class="chose">李二明</div>
+          </div>
+        </div>
+      </div>
+      <div class="btnn">
+        <button class="btn1">取消</button>
+        <button class="btn2">确定</button>
+      </div>
+    </div>
+  </a-drawer>
+  
+</template>
+
+<script>
+import { reactive, toRefs } from "vue";
+export default {
+  name: "StuAdd",
+  props: {
+    Stuvisible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, ctx) {
+    const state = reactive({
+      pageSize: 10,
+      currentPage: 1,
+      tableDataTotal: 50,
+      tabledata: [
+        {
+          key: 1,
+          name: "小李",
+          bum: "产研部",
+          gangw: "产品经理",
+        },
+        {
+          key: 2,
+          name: "小刘",
+          bum: "产研部",
+          gangw: "产品经理",
+        },
+        {
+          key: 3,
+          name: "小李",
+          bum: "产研部",
+          gangw: "产品经理",
+        },
+        {
+          key: 4,
+          name: "小李",
+          bum: "产研部",
+          gangw: "产品经理",
+        },
+        {
+          key: 5,
+          name: "小李",
+          bum: "产研部",
+          gangw: "产品经理",
+        },
+        {
+          key: 6,
+          name: "小李",
+          bum: "产研部",
+          gangw: "产品经理",
+        },
+        {
+          key: 7,
+          name: "小李",
+          bum: "产研部",
+          gangw: "产品经理",
+        },
+        {
+          key: 8,
+          name: "小李",
+          bum: "产研部",
+          gangw: "产品经理",
+        },
+        {
+          key: 9,
+          name: "小李",
+          bum: "产研部",
+          gangw: "产品经理",
+        },
+      ],
+      tablecolumns: [
+        {
+          title: "姓名",
+          dataIndex: "name",
+          key: "name",
+          width: 30,
+          align: "left",
+          className: "h",
+        },
+        {
+          title: "部门",
+          dataIndex: "bum",
+          key: "bum",
+          width: 40,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "岗位",
+          dataIndex: "gangw",
+          key: "gangw",
+          width: 40,
+          align: "center",
+          className: "h",
+        },
+      ],
+    });
+    const closeDrawer = () => {
+      ctx.emit("update:Stuvisible", false);
+    };
+
+    const afterVisibleChange = (bool) => {
+      console.log("state", bool);
+    };
+
+    return {
+      ...toRefs(state),
+      afterVisibleChange,
+      closeDrawer,
+      // change,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss" >
+.stuadd {
+  .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;
+    display: flex;
+    flex-direction: column;
+    .header {
+      height: 73px;
+      border-bottom: 1px solid #e8e8e8;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      // background-color: red;
+      margin-bottom: 20px;
+      .headerTitle {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333333;
+        line-height: 25px;
+        // margin-left: 24px;
+      }
+    }
+    .main {
+        display: flex;
+        .left {
+          width: 65%;
+          border-right: 1px solid rgba(233, 233, 233, 1);
+          .tabs {
+            margin-right: 33px;
+            .tab1 {
+              display: flex;
+              flex-wrap: wrap;
+              justify-content: space-between;
+              .nameinp {
+                display: flex;
+                align-items: center;
+                margin-top: 10px;
+                .namee {
+                  color: rgba(0, 0, 0, 0.8500);
+                  font-size: 14px;
+                }
+              }
+              .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;
+              background-color: #e9f6fe;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              margin-top: 20px;
+              border: 1px solid #c3e6fc;
+
+              .inline {
+                width: 95%;
+                height: 100%;
+                display: flex;
+                justify-content: space-between;
+
+                // background-color: #bfa;
+                .left1 {
+                  height: 100%;
+                  display: flex;
+                  align-items: center;
+
+                  .img {
+                    width: 14px;
+                    height: 15px;
+                    background-image: url(../../assets/images/leveladd/gan.png);
+                    background-size: 100% 100%;
+                  }
+
+                  .text {
+                    color: #999ba3;
+                  }
+
+                  .text2 {
+                    color: #4ea6ff;
+                    margin-left: 5px;
+                    margin-right: 5px;
+                  }
+
+                  .text3 {
+                    color: #999ba3;
+                    margin-left: 20px;
+                  }
+                }
+
+                .right1 {
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #387df7;
+                  height: 100%;
+                  display: flex;
+                  align-items: center;
+                  cursor: pointer;
+                }
+              }
+            }
+            .tabb {
+              .ant-table-thead > tr > th {
+                background-color: rgba(240, 246, 252, 1);
+                color: rgba(0, 0, 0, 0.85);
+              }
+              .ant-table-tbody > tr > td {
+                border-bottom: 1px solid #f0f6fc;
+                color: rgba(0, 0, 0, 0.65);
+              }
+              th.h {
+                background-color: #eff4fc !important;
+              }
+
+              .ant-table-tbody
+                > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
+                > td {
+                background: rgba(250, 250, 250, 1);
+              }
+              .pa {
+                // left: 0;
+                margin-top: 15px;
+                width: 100%;
+                // height: 20px;
+                // background-color: red;
+                display: flex;
+                justify-content: center;
+                // position: absolute;
+                // bottom: 20px;
+              }
+            }
+          }
+        }
+        .right {
+          width: 35%;
+          .onerow {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .already {
+              color: rgba(51, 51, 51, 1);
+              font-size: 16px;
+              font-weight: 500;
+              margin-left: 32px;
+            }
+            .clbox {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              cursor: pointer;
+              width: 104px;
+              height: 32px;
+              border-radius: 4px;
+              background: #409EFF;
+              .colose {
+                width: 16px;
+                height: 16px;
+                border-radius: 8px;
+                background: #FFFFFF;
+                position: relative;
+              }
+              .allclear {
+                color: rgba(255, 255, 255, 1);
+                font-size: 14px;
+              }
+            }
+          }
+          .selecteds {
+            display: flex;
+            flex-wrap: wrap;
+            margin-left: 32px;
+            .chose {
+              width: 64px;
+              height: 24px;
+              margin-top: 25px;
+              margin-right: 25px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              border-radius: 2px;
+              border: 1px solid rgba(56, 139, 225, 1);
+              color: rgba(56, 139, 225, 1);
+              font-size: 12px;
+            }
+          }
+        }
+    }
+    .btnn {
+      height: 72px;
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
+      .btn1 {
+        width: 100px;
+        height: 40px;
+        border: 1px solid #4ea6ff;
+        border-radius: 8px;
+        color: #4ea6ff;
+        background-color: #fff;
+        cursor: pointer;
+      }
+      .btn2 {
+        cursor: pointer;
+        width: 100px;
+        height: 40px;
+        background: #4ea6ff;
+        border-radius: 8px;
+        border: 0;
+        margin-left: 15px;
+        color: #fff;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file