From 8ef32fdf165c26fb24d3bdd2a75cb71cf10e3682 Mon Sep 17 00:00:00 2001
From: bob <312777916@qq.com>
Date: Tue, 5 Nov 2024 21:55:11 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=94=A8=E6=88=B7=E7=9A=84?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E6=A1=86=E6=8A=BD=E6=88=90=E5=85=AC=E5=85=B1?=
 =?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   | 186 +++++++++++++++++++++++
 src/views/contacts/user/SubPartition.vue |  62 +++-----
 2 files changed, 204 insertions(+), 44 deletions(-)
 create mode 100644 src/components/common/SelectDialog.vue

diff --git a/src/components/common/SelectDialog.vue b/src/components/common/SelectDialog.vue
new file mode 100644
index 0000000..655898a
--- /dev/null
+++ b/src/components/common/SelectDialog.vue
@@ -0,0 +1,186 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { Search, Close } from '@element-plus/icons-vue'
+
+const props = defineProps(['modelValue', 'options', 'defaultSelected'])
+const emit = defineEmits(['update:modelValue', 'confirm'])
+
+const selected = ref(props.defaultSelected || [])
+const searchKey = ref('')
+
+const optionsBySearch = computed(() => {
+  if (!searchKey.value) {
+    return props.options
+  } else {
+    const data = {}
+    Object.keys(props.options).forEach((key) => {
+      const item = props.options[key]
+      if (
+        item.account === searchKey.value ||
+        item.nickName.toLowerCase().includes(searchKey.value.toLowerCase())
+      ) {
+        data[key] = item
+      }
+    })
+    return data
+  }
+})
+
+const onConfirm = () => {
+  emit('confirm', selected.value)
+  emit('update:modelValue', false)
+  onClearSelected()
+}
+
+const onClose = () => {
+  emit('update:modelValue', false)
+  onClearSelected()
+}
+
+const onClearSelected = () => {
+  selected.value = []
+}
+
+const onRemoveSelectedItem = (index) => {
+  selected.value.splice(index, 1)
+}
+</script>
+
+<template>
+  <el-dialog
+    class="select-dialog"
+    :model-value="props.modelValue"
+    :modal="false"
+    :top="'30vh'"
+    :width="'610px'"
+    :z-index="1"
+    style="border-radius: 10px"
+    @close="onClose"
+  >
+    <template #header>
+      <slot name="title"></slot>
+    </template>
+    <div class="main bdr-t bdr-b bdr-l bdr-r">
+      <div class="left bdr-r">
+        <el-input
+          v-model.trim="searchKey"
+          placeholder="搜索：昵称/账号"
+          :prefix-icon="Search"
+          :clearable="true"
+        />
+        <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}` }}
+            </el-checkbox>
+          </el-checkbox-group>
+        </div>
+      </div>
+      <div class="right">
+        <div class="head bdr-b">
+          <div style="font-size: 13px; color: gray">
+            {{ `已选择：${selected.length} 人` }}
+          </div>
+          <el-button type="info" size="small" @click="onClearSelected" round>清空</el-button>
+        </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>
+            <el-button :icon="Close" size="small" circle @click="onRemoveSelectedItem(index)" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="info" @click="onClose" plain>取消</el-button>
+        <el-button type="primary" @click="onConfirm" plain>确认</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.main {
+  margin: 10px 0 10px 0;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+
+  .left {
+    width: 50%;
+    padding: 10px;
+    .head {
+      display: flex;
+      align-items: center;
+    }
+
+    .el-checkbox-group {
+      display: flex;
+      flex-direction: column;
+
+      .el-checkbox {
+        width: 90%;
+        margin: 0;
+        padding: 0 10px 0 10px;
+        border-radius: 4px;
+        border: 1px solid transparent;
+
+        &:hover {
+          border: 1px solid rgb(199.5, 201, 204);
+        }
+      }
+    }
+  }
+
+  .right {
+    padding: 10px;
+    flex: 1;
+    .head {
+      height: 30px;
+      margin-bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .selected-item {
+      height: 30px;
+      width: 90%;
+      padding: 0 10px 0 10px;
+      border-radius: 4px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border: 1px solid transparent;
+      --close-button-color: transparent;
+
+      &:hover {
+        background: #dedfe0;
+        --close-button-color: auto;
+      }
+
+      .el-button {
+        border: none;
+        color: var(--close-button-color);
+        background-color: var(--close-button-background-color);
+
+        &:hover {
+          --close-button-background-color: #f0f0f0;
+        }
+      }
+    }
+  }
+}
+
+.el-input {
+  width: 100%;
+  height: 30px;
+  margin-bottom: 10px;
+
+  :deep(.el-input__wrapper) {
+    border-radius: 25px;
+  }
+}
+</style>
diff --git a/src/views/contacts/user/SubPartition.vue b/src/views/contacts/user/SubPartition.vue
index 291083e..8b44c3f 100644
--- a/src/views/contacts/user/SubPartition.vue
+++ b/src/views/contacts/user/SubPartition.vue
@@ -16,11 +16,14 @@ import {
 } from '@/api/message'
 import { PARTITION_TYPE } from '@/const/userConst'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { messageStore } from '@/stores'
+import { messageStore, userStore } from '@/stores'
 import { ElLoading } from 'element-plus'
 import { el_loading_options } from '@/const/commonConst'
+import SelectDialog from '@/components/common/SelectDialog.vue'
+import { combineId } from '@/js/utils/common'
 
 const messageData = messageStore()
+const userData = userStore()
 const partitionSearchKey = ref('')
 const userSearchKey = ref('')
 const isShowAddPartitionDialog = ref(false)
@@ -29,10 +32,9 @@ const oprMenuRef = ref()
 const showOprMenuPartitionId = ref(0)
 const selectedIndex = ref('')
 
-const isAddSession = ref(false)
+const isShowSelectDialog = ref(false)
 const addSessionSelected = ref([])
 const addSessionPartitionId = ref(null)
-const addSessionTransferRef = ref()
 
 onMounted(async () => {
   if (!Object.keys(messageData.sessionList).length) {
@@ -77,13 +79,10 @@ const detailData = computed(() => {
 })
 
 const hasNoParitionSessions = computed(() => {
-  const data = []
+  const data = {}
   Object.values(messageData.sessionList).forEach((item) => {
     if (item.partitionId === 0) {
-      data.push({
-        key: item.sessionId,
-        label: item.objectInfo.nickName
-      })
+      data[item.objectInfo.account] = item.objectInfo
     }
   })
   return data
@@ -186,23 +185,18 @@ const showOperationMenu = (e, partitionId) => {
 const onShowAddSessionByButton = (partitionId) => {
   addSessionPartitionId.value = partitionId
   addSessionSelected.value = []
-  isAddSession.value = true
+  isShowSelectDialog.value = true
 }
 
-const onCloseAddSession = () => {
-  addSessionTransferRef.value.clearQuery('left')
-  addSessionTransferRef.value.clearQuery('right')
-  isAddSession.value = false
-}
-
-const onSaveAddSession = () => {
-  addSessionSelected.value.forEach((sessionId) => {
+const onConfirmSelect = (selected) => {
+  addSessionSelected.value = selected
+  addSessionSelected.value.forEach((account) => {
+    const sessionId = combineId(account, userData.user.account)
     messageData.updateSession({
       sessionId: sessionId,
       partitionId: partitions.value[addSessionPartitionId.value].partitionId
     })
   })
-  isAddSession.value = false
 }
 
 const isShowUserCard = ref(false)
@@ -314,17 +308,12 @@ const onShowUserCard = async ({ sessionId, account }) => {
     @close="isShowRenamePartitionDialog = false"
     @confirm="onRenamePartitionConfirm"
   ></EditDialog>
-  <el-dialog
-    class="add-session-dialog"
-    v-model="isAddSession"
-    :modal="false"
-    :top="'30vh'"
-    :width="'610px'"
-    :z-index="1"
-    style="border-radius: 10px"
-    @close="onCloseAddSession"
+  <SelectDialog
+    v-model="isShowSelectDialog"
+    :options="hasNoParitionSessions"
+    @confirm="onConfirmSelect"
   >
-    <template #header>
+    <template #title>
       <div style="display: flex; flex-direction: row; justify-content: start; align-items: center">
         <div style="font-size: 16px; font-weight: bold; white-space: nowrap">为分组</div>
         <div
@@ -342,22 +331,7 @@ const onShowUserCard = async ({ sessionId, account }) => {
         <div style="font-size: 16px; font-weight: bold; white-space: nowrap">添加联系人</div>
       </div>
     </template>
-    <el-transfer
-      ref="addSessionTransferRef"
-      v-model="addSessionSelected"
-      :data="hasNoParitionSessions"
-      filterable
-      filter-placeholder="请输入昵称"
-      :titles="['未分组联系人', '已选择']"
-      style="margin: 20px 8px 20px 8px"
-    />
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button type="info" @click="isAddSession = false" plain>取消</el-button>
-        <el-button type="primary" @click="onSaveAddSession" plain>保存</el-button>
-      </div>
-    </template>
-  </el-dialog>
+  </SelectDialog>
   <UserCard
     :isShow="isShowUserCard"
     :userInfo="userInfo"