From a98af9134e22b7c8d038436c30dade5c307a9673 Mon Sep 17 00:00:00 2001
From: zhangyc <zhangyc@dongwu-inc.com>
Date: Tue, 20 Dec 2022 08:36:07 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=AD=A6=E5=91=98=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/student/CommonStudent.vue | 327 ++++++++++++++++++++++-
 src/components/student/TableStudent.vue  |  10 +-
 2 files changed, 318 insertions(+), 19 deletions(-)

diff --git a/src/components/student/CommonStudent.vue b/src/components/student/CommonStudent.vue
index 57aca2bc..8f0bf7c6 100644
--- a/src/components/student/CommonStudent.vue
+++ b/src/components/student/CommonStudent.vue
@@ -1,10 +1,12 @@
+<!-- eslint-disable vue/no-parsing-error -->
+<!-- eslint-disable vue/require-v-for-key -->
 <template>
   <div>
     <a-drawer
         :visible="visiable"
         class="drawerStyle ProjCheckship"
         placement="right"
-        width="55%"
+        width="60%"
     >
       <div class="drawerMain" id="ProjCheckship">
         <div class="header">
@@ -18,7 +20,7 @@
           />
         </div>
         <div style="width:100%;display: grid;grid-template-columns: 750px auto;">
-          <div class="tabs">
+          <div class="tabs" style="min-height:800px;" >
             <a-tabs v-model:activeKey="activeKey">
               <a-tab-pane :key="1" tab="快速选人">
                 <div :style="{ height: screenHeight - 235 + 'px' }">
@@ -39,7 +41,8 @@
                     </a-form-item>
                   </div>
                   <div class="chooseLeft" style="display: grid;grid-template-columns: 250px auto">
-                    <div :style="{ height: screenHeight - 235 + 'px' ,overflowY:'auto'}">
+                    <div :style="{ height: screenHeight - 180 + 'px' ,overflowY:'auto'}" style="border: 1px solid #f0f0f0; ;">
+                    <div class="tree" style="margin: 10px 4px 220px 10px;">
                       <a-tree
                           allow-clear
                           tree-default-expand-all
@@ -53,8 +56,9 @@
                           @select="stuStuOrgSelect"
                       >
                       </a-tree>
+                      </div>
                     </div>
-                    <div class="tableBox tabb">
+                    <div class="tableBox tabb"  style="margin: 0px 4px 120px 10px; border: 1px solid #f0f0f0;">
                       <a-table
                           :columns="stuColumns"
                           :data-source="stuData"
@@ -140,13 +144,108 @@
               </a-tab-pane>
             </a-tabs>
           </div>
-          <div style="padding:100px 0 0 20px;display: grid;grid-template-rows: auto auto auto;">
+          <div class="right1">
+          <div class="onerow">
+            <div class="onleft">
+              <div class="already">已选</div>
+            
+            </div>
+          
+          </div>
+          <div
+            class="selecteds"
+            :style="{ 'max-height': screenHeight - 235 + 'px' }"
+            style="overflow-y: auto"
+          >
+          <div  class="person">快速选人</div>
+          <div v-for="(item,i) in selectsData.studentList" >
+            <div v-if="i<11">
+            <div class="chose">
+              {{ item.realName }}
+              <div class="ch" @click="stuDel(i)"></div>
+            </div>
+            </div>
+            <div v-else> 
+              <div v-if ="person">
+                    <div class="chose">
+                    {{ item.realName }}
+                    <div class="ch" @click="stuDel(i)"></div>
+                    </div>
+                </div>
+               
+             </div>
+           
+          </div>
+          <div v-if="!person && selectsData.studentList.length >10" class="ifsw"><div @click="person = !person" class=“sw”>查看更多></div></div>
+          <div v-if="person && selectsData.studentList.length >10" class="ifsw" ><div @click="person = !person" class="sw"> 收起&lt;  </div></div>
+
+          <!--组织-->
+          <div  class="dept">添加组织</div>
+          <div v-for="(item,i) in selectsData.deptList"  >
+            <div v-if="i<11">
+            <div class="chose1">
+              <div class="span"> {{ item.name }}</div>
+              <div class="ch1" @click="orgDel(i)"></div>
+            </div>
+            </div>
+            <div v-else> 
+              <div v-if ="dept">
+                    <div class="chose1">
+                      <div class="span"> {{ item.name }}</div>
+                    <div class="ch1" @click="orgDel(i)"></div>
+                    </div>
+                </div>
+               
+             </div>
+           
+          </div>
+          <div v-if="!dept && selectsData.deptList.length >10" class="ifsw"><div @click="dept = !dept" class=“sw”>查看更多></div></div>
+          <div v-if="dept && selectsData.deptList.length >10" class="ifsw" ><div @click="dept = !dept" class="sw"> 收起&lt;  </div></div>
+
+
+<!--受众-->
+          <div  class="group">受众关联</div>
+          <div v-for="(item,i) in selectsData.groupList" >
+            <div v-if="i<11">
+            <div class="chose2">
+              <div class="span"> {{ item.audienceName }}</div>
+              <div class="ch2" @click="AuditDel(i)"></div>
+            </div>
+            </div>
+            <div v-else> 
+              <div v-if ="group">
+                    <div class="chose2">
+                      <div class="span"> {{ item.audienceName }}</div>
+                    <div class="ch2" @click="AuditDel(i)"></div>
+                    </div>
+                </div>
+               
+             </div>
+           
+          </div>
+          <div v-if="!group && selectsData.groupList.length >10" class="ifsw"><div @click="group = !group" class=“sw”>查看更多></div></div>
+          <div v-if="group && selectsData.groupList >10" class="ifsw" ><div @click="group = !group" class="sw"> 收起&lt;  </div></div>
+
+        
+          </div>
+        </div>
+         <!-- <div style="padding:100px 0 0 20px;display: grid;grid-template-rows: auto auto auto;">
             <div>
               <div style="margin-top: 20px">快速选人</div>
-              <a-tag :closable="true" color="#4ea6ff" @close="stuDel(i)" v-for="(item,i) in selectsData.studentList"
+              // eslint-disable-next-line vue/require-v-for-key
+              <div v-for="(item,i) in selectsData.studentList" >
+              
+              <a-tag v-if="i < 10" :closable="true" color="#4ea6ff" @close="stuDel(i)" 
                      :key="i" style="margin-top:20px">
                 {{ item.realName }}
               </a-tag>
+              <a-tag v-else :closable="true" color="#4ea6ff" @close="stuDel(i)" 
+                      style="margin-top:20px">
+                {{ item.realName }}
+              </a-tag>
+
+              <div></div>
+            </div>
             </div>
             <div>
               <div style="margin-top: 20px">组织添加</div>
@@ -163,7 +262,7 @@
                 {{ item.audienceName }}
               </a-tag>
             </div>
-          </div>
+          </div>-->
         </div>
         <div class="btnn">
           <button class="btn1" @click="closeDrawer">取消</button>
@@ -205,6 +304,9 @@ const props = defineProps({
     default: () => []
   }
 })
+const person =ref(false)
+const dept =ref(false)
+const group =ref(false)
 const visiable = ref(false)
 const activeKey = ref(1)
 const stageVisible = ref(false)
@@ -404,18 +506,23 @@ function stuDel(i) {
   selectsData.value.studentList.splice(i, 1)
 }
 
+function orgDel(i) {
+  orgSelectKeys.value = orgSelectKeys.value.filter(e => e !== selectsData.value.deptList[i].id)
+  selectsData.value.deptList.splice(i, 1)
+}
+
 function AuditDel(i) {
   auditSelectKeys.value = auditSelectKeys.value.filter(e => e !== selectsData.value.groupList[i].id)
   selectsData.value.groupList.splice(i, 1)
 }
 
-//
+
 // function orgSelect(key, obj) {
-//   console.log(obj)
-//   request(ORG_CHILD_LIST, {orgId: null}).then(res => {
-//     console.log(res.result)
-//   })
-// }
+  // console.log(obj)
+   //request(ORG_CHILD_LIST, {orgId: null}).then(res => {
+     //console.log(res.result)
+   //})
+ //}
 
 function onStuSelectChange(e, l) {
   stuSelectKeys.value = e
@@ -515,7 +622,7 @@ watch(visiable, () => {
 })
 
 </script>
-<style>
+<style lang="scss">
 .ant-btn-primary {
   background-color: #4ea6ff !important;
 }
@@ -524,4 +631,196 @@ watch(visiable, () => {
   height: 40px;
   border-radius: 8px;
 }
+.tableBox .ant-table-row .ant-table-cell {
+    height: 48px;
+    font-size: 12px;
+    font-weight: 400;
+    color: #4F5156;
+    line-height: 29px;
+    padding: 0px;
+}
+.tableBox .ant-table-thead  tr  th {
+    font-size: 12px;
+}
+.ant-tabs-tabpane{
+  height: 100%;
+}
+.ant-tabs{
+  overflow:visible;
+}
+.right1 {
+  border-left: 1px solid #f2f6fe;
+    width: 100%;
+    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;
+            }
+         
+          }
+        }
+      }
 </style>
\ No newline at end of file
diff --git a/src/components/student/TableStudent.vue b/src/components/student/TableStudent.vue
index 9b87b4f0..5a7932fd 100644
--- a/src/components/student/TableStudent.vue
+++ b/src/components/student/TableStudent.vue
@@ -118,7 +118,7 @@ const tablecolumns = ref([
     title: "姓名",
     dataIndex: "studentName",
     key: "studentName",
-    width: "20%",
+    width: "10%",
     align: "left",
     className: "h",
   },
@@ -126,7 +126,7 @@ const tablecolumns = ref([
     title: "工号",
     dataIndex: "studentUserNo",
     key: "studentUserNo",
-    width: "10%",
+    width: "20%",
     align: "center",
     className: "h",
     ellipsis: true,
@@ -135,7 +135,7 @@ const tablecolumns = ref([
     title: "部门",
     dataIndex: "studentDepartName",
     key: "studentDepartName",
-    width: "10%",
+    width: "20%",
     align: "center",
     className: "h",
     ellipsis: true,
@@ -144,7 +144,7 @@ const tablecolumns = ref([
     title: "加入方式",
     dataIndex: "source",
     key: "source",
-    width: "10%",
+    width: "20%",
     align: "center",
     customRender: ({record: {source}}) =>
         ({1: "快速添加", 2: "组织", 3: "受众"}[source]),
@@ -174,7 +174,7 @@ const tableData = ref({
 });
 
 const stuRowSelection = computed(() => ({
-  columnWidth: 20,
+  columnWidth: 10,
   selectedRowKeys: stuSelectKeys.value,
   onChange: onStuSelectChange,
   preserveSelectedRowKeys: true,