From afc9bd3b8676ebce89d5f34e051e2fddd0a9228e Mon Sep 17 00:00:00 2001
From: "weixiaobo@boe.com.cn" <weixiaobo@boe.com.cn>
Date: Mon, 31 Jul 2023 15:46:08 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=8F=97=E4=BC=97=E6=88=90?=
 =?UTF-8?q?=E5=91=98=E6=A0=B7=E5=BC=8F=E5=8F=8A=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/audience/audienceManage.vue | 530 +++++++++++++++++++++-----
 1 file changed, 445 insertions(+), 85 deletions(-)

diff --git a/src/views/audience/audienceManage.vue b/src/views/audience/audienceManage.vue
index b733c331..9c58abeb 100644
--- a/src/views/audience/audienceManage.vue
+++ b/src/views/audience/audienceManage.vue
@@ -377,103 +377,122 @@
           </div>
       </div>
     </a-modal>
-    <a-modal
+    <!-- <a-modal
       v-model:visible="visibleAudienceMember"
       width="1100px"
       title="添加学员"
       @ok="handleAddAudienceMember"
-      okText="确认">
-      <div style="display: flex; overflow-x: auto; overflow-y: auto; padding:20px">
-        <div style="min-width: 800px">
-          <div>
-            <div class="tab1">
-              <a-form-item label="姓名">
-                <a-input v-model:value="searchDataUser.keyword" style="width: 270px; height: 40px; border-radius: 8px"
-                          placeholder="请输入姓名"/>
-                <a-button type="primary" @click="onSearchUser" style="margin-left: 20px; border-radius: 4px">
-                  <template #icon>
-                    <SearchOutlined/>
-                  </template>
-                  搜索
-                </a-button>
-                <a-button type="primary" @click="onResetUser" style="margin-left: 20px; border-radius: 4px">重置
-                </a-button>
-              </a-form-item>
-            </div>
-            <div class="chooseLeft" style="display: grid; grid-template-columns: 250px auto">
-              <div :style="{
-                      height: screenHeight - 180 + 'px',
-                      overflowY: 'auto',
-                    }" style="border: 1px solid #f0f0f0; overflow-y: 'auto'">
-                <div class="tree" style="margin: 10px 4px 20px 10px">
-                  <a-tree
-                    v-model:expandedKeys="expandedKeys"
-                    v-model:selectedKeys="selectedKeys"
-                    :tree-data="treeData"
-                    :load-data="onLoadData"
-                    @select="onOrgSelectChange"
-                    :fieldNames="{
-                          children: 'directChildList',
-                          key: 'id',
-                          title: 'name',
-                          value: 'name',
-                        }"
-                  >
-                  </a-tree>
+      okText="确认"> -->
+    <a-drawer
+      :visible="visibleAudienceMember"
+      class="drawerStyle ProjCheckship CommonStudent"
+      placement="right"
+      width="80%">
+      <div class="drawerMain" id="ProjCheckship" style="">
+        <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 style="display: flex; overflow-x: auto; overflow-y: auto; padding:20px">
+          <div style="min-width: 800px">
+            <div>
+              <div class="tab1">
+                <a-form-item label="姓名">
+                  <a-input v-model:value="searchDataUser.keyword" style="width: 270px; height: 40px; border-radius: 8px"
+                            placeholder="请输入姓名"/>
+                  <a-button type="primary" @click="onSearchUser" style="margin-left: 20px; border-radius: 4px">
+                    <template #icon>
+                      <SearchOutlined/>
+                    </template>
+                    搜索
+                  </a-button>
+                  <a-button type="primary" @click="onResetUser" style="margin-left: 20px; border-radius: 4px">重置
+                  </a-button>
+                </a-form-item>
+              </div>
+              <div class="chooseLeft" style="display: grid; grid-template-columns: 250px auto">
+                <div :style="{
+                        height: screenHeight - 280 + 'px',
+                        overflowY: 'auto',
+                      }" style="border: 1px solid #f0f0f0; overflow-y: 'auto'">
+                  <div class="tree" style="margin: 10px 4px 20px 10px;">
+                    <a-tree
+                      v-model:expandedKeys="expandedKeys"
+                      v-model:selectedKeys="selectedKeys"
+                      :tree-data="treeData"
+                      :load-data="onLoadData"
+                      @select="onOrgSelectChange"
+                      :fieldNames="{
+                            children: 'directChildList',
+                            key: 'id',
+                            title: 'name',
+                            value: 'name',
+                          }"
+                    >
+                    </a-tree>
+                  </div>
+                </div>
+                <div>
+                  <div class="tableBox tabb" style="
+                                  margin: 0px 4px 20px 10px;
+                                  border: 1px solid #f0f0f0;
+                                ">
+                    <a-table
+                      ref="userTableRef"
+                      style="border: 1px solid #f2f6fe"
+                      :columns="columnUser"
+                      :data-source="tableDataUser"
+                      :loading="loading"
+                      :scroll="{ x: 400,y:screenHeight-350 }"
+                      :pagination="false"
+                      :row-selection="{ selectedRowKeys: selectedRowKeysUser, onChange: onSelectChangeUser }"
+                    >
+                    </a-table>
+                  </div>
+                  <div class="pa" style="margin: 0px 10px 20px 10px;">
+                    <a-pagination
+                      :showSizeChanger="false"
+                      :showQuickJumper="true"
+                      :hideOnSinglePage="true"
+                      :pageSize="searchDataUser.pageSize"
+                      :current="searchDataUser.pageNo"
+                      :total="tableTotalUser"
+                      class="pagination"
+                      @change="handelChangePageUser"
+                    />
+                  </div>
                 </div>
               </div>
-              <div>
-                <div class="tableBox tabb" style="
-                                margin: 0px 4px 20px 10px;
-                                border: 1px solid #f0f0f0;
-                              ">
-                  <a-table
-                    ref="userTableRef"
-                    style="border: 1px solid #f2f6fe"
-                    :columns="columnUser"
-                    :data-source="tableDataUser"
-                    :loading="loading"
-                    :scroll="{ x: 400,y:300 }"
-                    :pagination="false"
-                    :row-selection="{ selectedRowKeys: selectedRowKeysUser, onChange: onSelectChangeUser }"
-                  >
-                  </a-table>
-                </div>
-                <div class="pa" style="margin: 0px 10px 20px 10px;">
-                  <a-pagination
-                    :showSizeChanger="false"
-                    :showQuickJumper="true"
-                    :hideOnSinglePage="true"
-                    :pageSize="searchDataUser.pageSize"
-                    :current="searchDataUser.pageNo"
-                    :total="tableTotalUser"
-                    class="pagination"
-                    @change="handelChangePageUser"
-                  />
+            </div>
+          </div>
+          <div style="min-width: 200px;border-left: 1px solid #f2f6fe;margin-left:10px">
+            <div class="onerow">
+              <div class="onleft">
+                <div class="already">已选</div>
+              </div>
+            </div>
+            <div :style="{ 'max-height': screenHeight - 235 + 'px' }" style="overflow-y: auto">
+              <div class="selecteds">
+                <div v-for="(item, i) in selectedRowUser" :key="i">
+                  <div class="chose">
+                    {{ item.realName }}
+                    <div class="ch" @click="removeUserClick(i)"></div>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
-        <div style="min-width: 200px;border-left: 1px solid #f2f6fe;margin-left:10px">
-          <div class="onerow">
-            <div class="onleft">
-              <div class="already">已选</div>
-            </div>
-          </div>
-          <div :style="{ 'max-height': screenHeight - 235 + 'px' }" style="overflow-y: auto">
-            <div class="selecteds">
-              <div v-for="(item, i) in selectedRowUser" :key="i">
-                <div class="chose">
-                  {{ item.realName }}
-                  <div class="ch" @click="removeUserClick(i)"></div>
-                </div>
-              </div>
-            </div>
-          </div>
+        <div class="btnn">
+          <button class="btn2" @click="closeDrawer">取消</button>
+          <button class="btn2" @click="handleAddAudienceMember">确定</button>
         </div>
       </div>
-    </a-modal>
+    </a-drawer>
+    <!-- </a-modal> -->
   </div>
 </template>
 <script setup>
@@ -782,6 +801,7 @@ const temSelectedRowUser = ref([]);
 const selectedRowKeysUserTotal = ref([]);
 const selectedRowUserTotal = ref([]);
 const userTableRef = ref();
+const screenHeight = ref(document.body.clientHeight);
 
 const treeData  = ref([
   {
@@ -1280,7 +1300,9 @@ const handleAddAudienceMemberClick = async () => {
   // visibleAddAudience.value = true;
   getAudienceUserListFun();
   getAudienceOrgListFun();
-  visibleAudienceMember.value = true;
+  setTimeout(()=>{
+    visibleAudienceMember.value = true;
+  },500)
 
 }
 const getAudienceOrgListFun = async () => {
@@ -1374,9 +1396,15 @@ const handleAddAudienceMember = async () => {
   console.log("addAudienceMember res:",res);
   if(res&&res.data.status==200){
     getAudienceMemberPageList();
+    message.success("添加成功！");
     visibleAudienceMember.value = false;
+  }else{
+    message.error(res.data.message);
   }
 }
+const closeDrawer = () => {
+  visibleAudienceMember.value = false;
+}
 
 
 </script>
@@ -2063,4 +2091,336 @@ const handleAddAudienceMember = async () => {
     }
   }
 }
+.CommonStudent > .ant-drawer-content-wrapper {
+  min-width: 1200px !important;
+  width: 1200px !important;
+}
+
+.CommonStudent {
+  .ant-btn-primary {
+    background-color: #4ea6ff !important;
+  }
+
+  .cus-select {
+    height: 40px;
+    border-radius: 8px;
+  }
+
+  .tableBox .ant-table-row .ant-table-cell {
+    height: 48px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #4f5156;
+    line-height: 29px;
+    padding: 0px;
+  }
+
+  .tableBox .ant-table-thead tr th {
+    font-size: 14px;
+  }
+
+  .ant-tabs-tabpane {
+    height: 100%;
+  }
+
+  .ant-tabs {
+    overflow: visible;
+  }
+
+  .right1 {
+    border-left: 1px solid #f2f6fe;
+    margin-left: 20px;
+
+    .onerow {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-right: 40px;
+      flex-wrap: wrap;
+
+      width: 100%;
+
+      .onleft {
+        display: flex;
+        text-align: center;
+
+        .already {
+          color: rgba(51, 51, 51, 1);
+          font-size: 16px;
+          font-weight: 500;
+          margin-left: 32px;
+          white-space: nowrap;
+          // margin-bottom: 20px;
+        }
+
+        .count {
+          color: #4ea6ff;
+          font-size: 16px;
+          margin: 0 6px;
+        }
+
+        .peo {
+          color: rgba(51, 51, 51, 1);
+          font-size: 16px;
+          font-weight: 500;
+        }
+      }
+
+      .clbox {
+        margin-right: 50px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        width: 104px;
+        height: 32px;
+        border-radius: 4px;
+        background: #4ea6ff;
+
+        .colose {
+          width: 16px;
+          height: 16px;
+          // border-radius: 8px;
+          // background: #ffffff;
+          // position: relative;
+          background-image: url(../../assets/images/basicinfo/ch.png);
+          background-size: 100%;
+          margin-right: 4px;
+        }
+
+        .allclear {
+          color: rgba(255, 255, 255, 1);
+          font-size: 14px;
+        }
+      }
+    }
+
+    .selecteds {
+      display: flex;
+      flex-wrap: wrap;
+      margin-left: 32px;
+
+      .person {
+        width: 100%;
+        margin-top: 20px;
+        border-top: 1px solid #f2f6fe;
+      }
+
+      .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;
+        position: relative;
+
+        .ch {
+          position: absolute;
+          width: 18px;
+          height: 18px;
+          background-image: url(../../assets/images/basicinfo/ch.png);
+          right: -8px;
+          top: -8px;
+        }
+      }
+
+      .ifsw {
+        display: flex;
+        align-items: end;
+        justify-content: center;
+        color: #4ea6ff;
+      }
+
+      .sw {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: justify;
+        color: #4ea6ff;
+        margin-top: 23px;
+        margin-left: 10px;
+      }
+
+      .dept {
+        width: 100%;
+        margin-top: 30px;
+        border-top: 1px solid #f2f6fe;
+      }
+
+      .chose1 {
+        //width: 90px;
+        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;
+        position: relative;
+
+        .span {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .ch1 {
+          position: absolute;
+          width: 18px;
+          height: 18px;
+          background-image: url(../../assets/images/basicinfo/ch.png);
+          right: -8px;
+          top: -8px;
+        }
+      }
+
+      .group {
+        width: 100%;
+        margin-top: 30px;
+        border-top: 1px solid #f2f6fe;
+      }
+
+      .chose2 {
+        //width: 120px;
+        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;
+        position: relative;
+
+        .span {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .ch2 {
+          position: absolute;
+          width: 18px;
+          height: 18px;
+          background-image: url(../../assets/images/basicinfo/ch.png);
+          right: -8px;
+          top: -8px;
+        }
+      }
+    }
+  }
+}
+.drawerStyle {
+  .drawerMain {
+    .header {
+      height: 73px;
+      border-bottom: 1px solid #e8e8e8;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .headerTitle {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333333;
+        line-height: 25px;
+        margin-left: 24px;
+      }
+    }
+    .contentMain {
+      .vote {
+        display: flex;
+        align-items: center;
+        margin-top: 32px;
+        margin-left: 20px;
+        .votebox {
+          width: 100px;
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          // background-color: pink;
+          .voteimg {
+            width: 10px;
+            height: 10px;
+            margin-right: 5px;
+          }
+          .votename {
+            font-size: 14px;
+            font-weight: 400;
+            color: #333333;
+            line-height: 20px;
+          }
+        }
+
+        .votebtn {
+          width: 130px;
+          height: 40px;
+          background: #4ea6ff;
+          border-radius: 8px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          font-size: 14px;
+          font-weight: 400;
+          color: #ffffff;
+          line-height: 20px;
+        }
+        .voteclassify {
+          font-size: 14px;
+          font-weight: 400;
+          color: #999999;
+          line-height: 20px;
+          margin-top: 16px;
+        }
+        .ant-picker {
+          width: 424px;
+        }
+      }
+    }
+    .btnn {
+      height: 72px;
+      width: 100%;
+      position: absolute;
+      background-color: #fff;
+      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>