修改人员详情展开逻辑

src/views/message/components/Group.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="group" v-for="group in userGroupInfo" :key="group.userGroupId">
+    <div class="group-name">
+      <span
+        style="font-weight: 400; font-size: 16px; color: rgba(0, 0, 0, 0.88); line-height: 22px"
+      >
+        {{ group.name }}
+      </span>
+      <span
+        style="
+          margin-left: 4px;
+          font-weight: 400;
+          font-size: 12px;
+          color: rgba(0, 0, 0, 0.88);
+          line-height: 17px;
+        "
+      >
+        共
+        <span style="color: #1777ff">{{ group.total }}</span>
+        人
+      </span>
+      <div
+        class="user-info"
+        :class="{ expanded: group.isExpand }"
+        ref="userInfoRefs"
+        :style="
+          !group.isExpand ? 'max-height:86px;overflow-y:hidden;' : 'max-height:100%;overflow-y:auto'
+        "
+        style="display: flex"
+      >
+        <div
+          class="left"
+          style="display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; flex: 1"
+        >
+          <el-tag type="primary" v-for="user in group.userList" :key="user.userId">
+            {{ user.loginName }}-{{ user.nickname }}
+          </el-tag>
+        </div>
+        <div class="right" style="width: 50px; margin-top: 20px" v-if="group.isHidden">
+          <span
+            @click="toggleExpand(group)"
+            style="display: flex; cursor: pointer; align-items: center"
+          >
+            {{ group.isExpand ? '收起' : '展开' }}
+            <img v-if="group.isExpand" src="@/assets/icons/arrow_top.png" />
+            <img v-else src="@/assets/icons/arrow_bottom.png" />
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import { GroupData } from '../persongroup/type';
+const userInfoRefs = ref({});
+const userGroupInfo = ref<GroupData[]>();
+const toggleExpand = (group) => {
+  group.isExpand = !group.isExpand;
+};
+const props = defineProps<{
+  userGroupInfo?: GroupData[];
+}>();
+watch(
+  () => props.userGroupInfo,
+  (newVal) => {
+    userGroupInfo.value = newVal;
+  },
+);
+watch(
+  () => userInfoRefs.value,
+  (newRefs) => {
+    if (newRefs) {
+      Object.keys(newRefs).forEach((key) => {
+        const el = newRefs[key];
+        if (el.offsetHeight >= 86) {
+          userGroupInfo.value![key].isHidden = true;
+        }
+      });
+    }
+  },
+);
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/message/components/PushObject.vue

@@ -73,57 +73,7 @@
     :destroy-on-close="true"
     class="groupInfo"
   >
-    <div class="group" v-for="group in userGroupInfo" :key="group.userGroupId">
-      <div class="group-name">
-        <span
-          style="font-weight: 400; font-size: 16px; color: rgba(0, 0, 0, 0.88); line-height: 22px"
-        >
-          {{ group.name }}
-        </span>
-        <span
-          style="
-            margin-left: 4px;
-            font-weight: 400;
-            font-size: 12px;
-            color: rgba(0, 0, 0, 0.88);
-            line-height: 17px;
-          "
-        >
-          共
-          <span style="color: #1777ff">{{ group.total }}</span>
-          人
-        </span>
-        <div
-          class="user-info"
-          :class="{ expanded: group.isExpand }"
-          :style="
-            !group.isExpand
-              ? 'max-height:86px;overflow-y:hidden;'
-              : 'max-height:100%;overflow-y:auto'
-          "
-          style="display: flex"
-        >
-          <div
-            class="left"
-            style="display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; flex: 1"
-          >
-            <el-tag type="primary" v-for="user in group.userList" :key="user.userId">
-              {{ user.loginName }}-{{ user.nickname }}
-            </el-tag>
-          </div>
-          <div class="right" style="width: 50px; margin-top: 20px">
-            <span
-              @click="toggleExpand(group)"
-              style="display: flex; cursor: pointer; align-items: center"
-            >
-              {{ group.isExpand ? '收起' : '展开' }}
-              <img v-if="group.isExpand" src="@/assets/icons/arrow_top.png" />
-              <img v-else src="@/assets/icons/arrow_bottom.png" />
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
+    <Group :userGroupInfo="userGroupInfo" />
   </el-dialog>
   <el-dialog
     v-model="userInfo"
@@ -142,6 +92,7 @@
 <script setup lang="ts">
 import { onMounted, ref, reactive, watch, watchEffect } from 'vue';
 import SelectTree from '../persongroup/components/SelectTree.vue';
+import Group from './Group.vue';
 import { recipientTypeName } from '../constant';
 import { ToPushObjectqueryUserGroupList, queryUserGroupDetail } from '../api/index';
 import type { FormInstance } from 'element-plus';
@@ -201,6 +152,7 @@ const queryGroupInfo = (groupList) => {
     userGroupInfo.value = res.map((group) => ({
       ...group,
       isExpand: false,
+      isHidden: false,
     }));
   });
 };
@@ -224,9 +176,6 @@ const getChildValue = () => {
         : ruleForm.customUserList.map((item) => item.userId),
   };
 };
-const toggleExpand = (group) => {
-  group.isExpand = !group.isExpand;
-};
 const handleCancle = () => {
   userInfo.value = false;
 };

src/views/message/persongroup/components/SelectTree.vue

@@ -23,7 +23,7 @@
         @check-change="handleCheckChange"
       />
     </div>
-    <el-divider direction="vertical" style="height: auto" />
+    <!-- <el-divider direction="vertical" style="height: 100%;flex:1" /> -->
     <div class="right" style="margin-left: 16px">
       <div class="head" style="margin-bottom: 22px">
         <span
@@ -161,6 +161,7 @@ watch(queryStr, (query) => {
     flex-direction: column;
     width: 50%;
     height: 100%;
+    border-right: 1px solid rgba(0,0,0,0.06);
     .el-tree {
       width: 100%;
       margin-top: 20px;
@@ -175,7 +176,7 @@ watch(queryStr, (query) => {
   .right {
     display: flex;
     flex-direction: column;
-    width: 50%;
+    flex: 1;
     height: 100%;
     position: relative;
     .head {

src/views/message/persongroup/type.ts

@@ -58,5 +58,6 @@ export interface FormData {
     userList: FromUserList[];
 }
 export interface GroupData extends FormData {
-    isExpand: boolean
+    isExpand: boolean;
+    isHidden: boolean;
 }

src/views/message/sysnotion-config/SysnotionConfig.vue

@@ -194,8 +194,7 @@ const ruleForm = reactive<RuleForm>({
   content: '',
   channel: [],
   object: {
-    recipientType:2,
-    userGroupList:[{description:"",name:"Test2",operationTime:"2024-09-12 11:23:52",operatorName:"admin",total:36,userGroupId:39},{description:"",name:"Test",operationTime:"2024-09-12 10:34:30",operatorName:"admin",total:39,userGroupId:38}]
+    userGroupList:[]
   },
   operator: info.value.nickname,
 });