From 80f2fce0657025a5e14f6e7bdcd0c3384f72b91c Mon Sep 17 00:00:00 2001
From: bob <312777916@qq.com>
Date: Wed, 6 Nov 2024 00:03:16 +0800
Subject: [PATCH] =?UTF-8?q?SelectDialog=E4=B8=AD=E7=9A=84=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E5=88=97=E8=A1=A8=E4=BD=BF=E7=94=A8ContactItem?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/SelectDialog.vue   | 33 ++++++++++++++++++------
 src/components/item/ContactItem.vue      |  5 ++--
 src/views/contacts/user/SubPartition.vue |  9 +++++++
 3 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/src/components/common/SelectDialog.vue b/src/components/common/SelectDialog.vue
index 655898a..911c156 100644
--- a/src/components/common/SelectDialog.vue
+++ b/src/components/common/SelectDialog.vue
@@ -1,9 +1,10 @@
 <script setup>
 import { ref, computed } from 'vue'
 import { Search, Close } from '@element-plus/icons-vue'
+import ContactItem from '@/components/item/ContactItem.vue'
 
 const props = defineProps(['modelValue', 'options', 'defaultSelected'])
-const emit = defineEmits(['update:modelValue', 'confirm'])
+const emit = defineEmits(['update:modelValue', 'showUserCard', 'confirm'])
 
 const selected = ref(props.defaultSelected || [])
 const searchKey = ref('')
@@ -26,6 +27,10 @@ const optionsBySearch = computed(() => {
   }
 })
 
+const onShowCard = ({ account }) => {
+  emit('showUserCard', account)
+}
+
 const onConfirm = () => {
   emit('confirm', selected.value)
   emit('update:modelValue', false)
@@ -71,7 +76,12 @@ const onRemoveSelectedItem = (index) => {
         <div class="my-scrollbar" style="height: 300px; overflow-y: scroll">
           <el-checkbox-group v-model="selected">
             <el-checkbox v-for="item in Object.keys(optionsBySearch)" :key="item" :value="item">
-              {{ `${optionsBySearch[item]?.nickName} ${optionsBySearch[item]?.account}` }}
+              <ContactItem
+                :contactInfo="optionsBySearch[item]"
+                :size="'small'"
+                @showContactCard="onShowCard(optionsBySearch[item])"
+                style="width: 200px"
+              ></ContactItem>
             </el-checkbox>
           </el-checkbox-group>
         </div>
@@ -85,7 +95,12 @@ const onRemoveSelectedItem = (index) => {
         </div>
         <div class="my-scrollbar" style="height: 300px; overflow-y: scroll">
           <div class="selected-item" v-for="(item, index) in selected" :key="item.key">
-            <div>{{ `${optionsBySearch[item].nickName} ${optionsBySearch[item].account}` }}</div>
+            <ContactItem
+              :contactInfo="optionsBySearch[item]"
+              :size="'small'"
+              @showContactCard="onShowCard(optionsBySearch[item])"
+              style="width: 200px"
+            ></ContactItem>
             <el-button :icon="Close" size="small" circle @click="onRemoveSelectedItem(index)" />
           </div>
         </div>
@@ -106,11 +121,12 @@ const onRemoveSelectedItem = (index) => {
   margin: 10px 0 10px 0;
   display: flex;
   flex-direction: row;
-  overflow: hidden;
 
   .left {
-    width: 50%;
+    width: 49%;
     padding: 10px;
+    overflow: hidden;
+
     .head {
       display: flex;
       align-items: center;
@@ -121,7 +137,7 @@ const onRemoveSelectedItem = (index) => {
       flex-direction: column;
 
       .el-checkbox {
-        width: 90%;
+        height: 45px;
         margin: 0;
         padding: 0 10px 0 10px;
         border-radius: 4px;
@@ -137,6 +153,8 @@ const onRemoveSelectedItem = (index) => {
   .right {
     padding: 10px;
     flex: 1;
+    overflow: hidden;
+
     .head {
       height: 30px;
       margin-bottom: 10px;
@@ -146,8 +164,7 @@ const onRemoveSelectedItem = (index) => {
     }
 
     .selected-item {
-      height: 30px;
-      width: 90%;
+      height: 45px;
       padding: 0 10px 0 10px;
       border-radius: 4px;
       display: flex;
diff --git a/src/components/item/ContactItem.vue b/src/components/item/ContactItem.vue
index 197230a..55c96bc 100644
--- a/src/components/item/ContactItem.vue
+++ b/src/components/item/ContactItem.vue
@@ -18,7 +18,8 @@ const contactItemHeight = computed(() => {
   }
 })
 
-const onShowCard = () => {
+const onShowCard = (event) => {
+  event.preventDefault()
   emit('showContactCard', props.contactInfo)
 }
 
@@ -75,12 +76,10 @@ const onOpenSession = () => {
       .name {
         margin-right: 5px;
         font-size: 14px;
-        color: #000;
       }
 
       .account {
         font-size: 12px;
-        color: gray;
         white-space: nowrap; /*不换行*/
       }
     }
diff --git a/src/views/contacts/user/SubPartition.vue b/src/views/contacts/user/SubPartition.vue
index c4f34f8..9d4808a 100644
--- a/src/views/contacts/user/SubPartition.vue
+++ b/src/views/contacts/user/SubPartition.vue
@@ -218,6 +218,14 @@ const onShowUserCard = async ({ sessionId, account }) => {
   loadingInstance.close()
   isShowUserCard.value = true
 }
+
+const onShowUserCardFromSelectDialog = (account) => {
+  const sessionId = combineId(account, userData.user.account)
+  onShowUserCard({
+    sessionId: sessionId,
+    account: account
+  })
+}
 </script>
 
 <template>
@@ -309,6 +317,7 @@ const onShowUserCard = async ({ sessionId, account }) => {
   <SelectDialog
     v-model="isShowSelectDialog"
     :options="hasNoParitionSessions"
+    @showUserCard="onShowUserCardFromSelectDialog"
     @confirm="onConfirmSelect"
   >
     <template #title>