fix: 分组所属客户显示调整

src/composables/customerGroup/useCustomerGroupModel.ts

@@ -72,12 +72,14 @@ function useCustomerGroupListModel() {
                 field: 'customerNameList', 
                 title: '客户名称', 
                 minWidth: 180,
-                showOverflow: 'tooltip',
-                formatter: ({ row }) => {
-                    if(!isArrayLength(row.customerNameList)) return ''
-                    // return row.customerNameList.join(',\n')
-                    return row.customerNameList.join('、')
-                }
+                showOverflow: "ellipsis",
+                slots: { default: "customerNameLevel1" }
+                // showOverflow: 'tooltip',
+                // formatter: ({ row }) => {
+                //     if(!isArrayLength(row.customerNameList)) return ''
+                //     // return row.customerNameList.join(',\n')
+                //     return row.customerNameList.join('、')
+                // }
             },
             { title: '操作', slots: { default: 'actions' }, width: 135, fixed: 'right' },
         ],
@@ -122,11 +124,13 @@ function useCustomerGroupListModel() {
                 field: 'customerNameList', 
                 title: '客户名称', 
                 minWidth: 180,
-                formatter: ({ row }) => {
-                    if(!isArrayLength(row.customerNameList)) return ''
-                    // return row.customerNameList.join(',\n')
-                    return row.customerNameList.join('、')
-                }
+                showOverflow: "ellipsis",
+                slots: { default: "customerNameLevel2" }
+                // formatter: ({ row }) => {
+                //     if(!isArrayLength(row.customerNameList)) return ''
+                //     // return row.customerNameList.join(',\n')
+                //     return row.customerNameList.join('、')
+                // }
             },
             { title: '操作', slots: { default: 'actions' }, width: 135, fixed: 'right' },
         ],

src/composables/customerfeeset/useCustomerFeeSetTable.ts

@@ -104,18 +104,6 @@ export default function userCustomerFeeSetTable() {
                 return hanleExpandRow(scope)
             }
         },
-        tooltipConfig: {
-            showAll: true,
-            enterable: true,
-            contentMethod: ({ column, row }) => {
-                const { field } = column
-                if (field === 'groupName' && row && row.groupName) {
-                    return row[field] ? 
-                    `分组名称：${row.groupName}${row.customerGroupVersion ? '_'+row.customerGroupVersion : ''}\n所属客户：${row.customerNameList.join('、')}` : ''
-                }
-                return null
-            }
-        },
         columns: [
             { type: "expand", title: '#', slots: { content: 'expands' }, width: 40 },
             { type: "checkbox", width: 45, visible: true },
@@ -127,10 +115,8 @@ export default function userCustomerFeeSetTable() {
                 title: '分组', 
                 resizable: true, 
                 minWidth: 110,
-                formatter: ({ row }) =>{
-                    if (!row.groupName) return ''
-                    return `${row.groupName}${row.customerGroupVersion ? '_'+row.customerGroupVersion : ''}`
-                },
+                showOverflow: "ellipsis",
+                slots: { default: "customerNameLevel1" },
                 visible: true 
             },
             { field: 'orgName', title: '机构名称', width: 100, visible: true },
@@ -180,18 +166,6 @@ export default function userCustomerFeeSetTable() {
         columnConfig: {
             resizable: false,
         },
-        tooltipConfig: {
-            showAll: true,
-            enterable: true,
-            contentMethod: ({ column, row }) => {
-                const { field } = column
-                if (field === 'groupName' && row && row.groupName) {
-                    return row[field] ? 
-                    `分组名称：${row.groupName}${row.customerGroupVersion ? '_'+row.customerGroupVersion : ''}\n所属客户：${row.customerNameList.join('、')}` : ''
-                }
-                return null
-            }
-        },
         columns: [
             { width: 85 },
             { type: "checkbox", width: 55, visible: true },
@@ -203,10 +177,8 @@ export default function userCustomerFeeSetTable() {
                 resizable: true, 
                 minWidth: 110, 
                 visible: true,
-                formatter: ({ row }) =>{
-                    if (!row.groupName) return ''
-                    return `${row.groupName}${row.customerGroupVersion ? '_'+row.customerGroupVersion : ''}`
-                },
+                showOverflow: "ellipsis",
+                slots: { default: "customerNameLevel2" },
             },
             { field: 'orgName', title: '机构名称', width: 100, visible: true },
             { field: 'customerName', title: '客户', resizable: true, minWidth: 100, visible: true },

src/hooks/useCustomPopover.ts

@@ -0,0 +1,62 @@
+import { ref, unref, computed, nextTick } from 'vue'
+
+/**
+ * 自定义 Popover
+ * @returns 
+ */
+export default function useCustomPopover() {
+    const visiblePopover = ref(false)
+    const popoverContent = ref();
+    const referenceRef = ref()
+    const visiblePopoverTimer = ref()
+    // 客户名称
+    const getCustomerName = computed(() => {
+        if (!unref(popoverContent) || !unref(popoverContent).customerNameList) return ""
+        return `${unref(popoverContent).customerNameList.join('、')}`
+    })
+    const getCustomerGroupName = computed(() => {
+        if (!unref(popoverContent)) return "标题"
+        return unref(popoverContent).groupName
+    })
+    // 费用设置客户名称
+    const getFeeCustomerGroupName = computed(() => {
+        const row = unref(popoverContent)
+        if (!row) return "分组名称"
+        return `${row.groupName}${row.customerGroupVersion ? '_'+row.customerGroupVersion : ''}`
+    })
+
+    // 显示
+    const showCustomPopover = (event, row) => {
+        clearTimeout(unref(visiblePopoverTimer))
+        const vxeColumn = event.target.closest('.vxe-body--column');//寻找最近一级dom
+        if (vxeColumn) referenceRef.value = vxeColumn
+        popoverContent.value = row;
+        visiblePopover.value = true
+        nextTick(() => {
+            const contentDom = document.querySelector('.group-name-content .content')
+            contentDom && contentDom.scrollTo(0,0)
+        })
+    };
+    const showCustomPopoverContnet = () => {
+        clearTimeout(unref(visiblePopoverTimer))
+        visiblePopover.value = true
+    }
+    // 隐藏
+    const hideCustomPopover = () => {
+        clearTimeout(unref(visiblePopoverTimer))
+        visiblePopoverTimer.value = setTimeout(() => {
+            visiblePopover.value = false
+        }, 300)
+    };
+
+    return {
+        referenceRef,
+        visiblePopover,
+        getCustomerName,
+        getCustomerGroupName,
+        getFeeCustomerGroupName,
+        showCustomPopover,
+        showCustomPopoverContnet,
+        hideCustomPopover
+    }
+}

src/style.scss

@@ -111,6 +111,10 @@
     top: 38px !important;
 }
 
+.width-full {
+    width: 100%;
+}
+
 .width-100 {
     display: block;
     width: 100%;
@@ -381,4 +385,30 @@ input[type=number]::-webkit-outer-spin-button {
 }
 .bill-actions-btn {
   margin: 8px 4px;
+}
+// 客户名称 Popover
+.custom-group-warp {
+  padding: 0px !important;
+  .el-popper__arrow::before {
+    background: #303133 !important;
+  }
+  .group-name-content {
+    padding: 12px 10px;
+    background-color: #303133;
+    .title {
+        padding-bottom: 12px;
+        padding-left: 10px;
+        font-size: 16px;
+        color: #ffffff;
+    }
+    .content {
+        max-height: 360px;
+        overflow-y: auto;
+        font-size: 16px;
+        color: #ffffff;
+        .text {
+            padding: 8px;
+        }
+    }
+  }
 }

src/views/customerGroup/customerGroupList.vue

@@ -102,6 +102,15 @@
           <template #orgId="{ row }">
             {{ deal_FindGetItemName(row.orgId, branchCompanyCustomers) }}
           </template>
+          <!-- 客户名称 -->
+          <template #customerNameLevel2="{ row }">
+            <span
+              @mouseenter="showCustomPopover($event, row)"
+              @mouseleave="hideCustomPopover"
+            >
+              {{ row.customerNameList.join('、') }}
+            </span>
+          </template>
           <!-- 操作 -->
           <template #actions="{ row }">
             <DropDownButtons
@@ -116,6 +125,15 @@
       <template #orgId="{ row }">
         {{ deal_FindGetItemName(row.orgId, branchCompanyCustomers) }}
       </template>
+      <!-- 客户名称 -->
+      <template #customerNameLevel1="{ row }">
+        <span
+          @mouseenter="showCustomPopover($event, row)"
+          @mouseleave="hideCustomPopover"
+        >
+          {{ row.customerNameList.join('、') }}
+        </span>
+      </template>
       <!-- 操作 -->
       <template #actions="{ row }">
         <DropDownButtons
@@ -136,6 +154,30 @@
       @size-change="sizeChange"
       @current-change="currentChange"
     />
+    <!-- Popover -->
+    <el-popover
+      :width="780"
+      trigger="manual"
+      popper-class="custom-group-warp"
+      :virtual-ref="referenceRef"
+      :visible="visiblePopover"
+      virtual-triggering
+    >
+      <div
+        class="group-name-content"
+        @mouseenter="showCustomPopoverContnet"
+        @mouseleave="hideCustomPopover"
+      >
+        <div class="title">
+          {{ getCustomerGroupName }}
+        </div>
+        <div class="content">
+          <div class="text">
+            {{ getCustomerName }}
+          </div>
+        </div>
+      </div>
+    </el-popover>
   </el-main>
   <!-- 设置客户 -->
   <AddCustomerFeeSet
@@ -158,6 +200,7 @@ import { VxeBasicTable } from "@/components/VxeTable";
 import DropDownButtons from "@/components/DropDownButtons/index.vue";
 import AddCustomerFeeSet from "@/views/customerfeeset/AddCustomerFeeSet.vue";
 import { deal_FindGetItemName } from "@/utils/dealFindData";
+import useCustomPopover from "@/hooks/useCustomPopover";
 
 const { customerGroupListGridOptions, customerGroupListSonGridOptions, customerGroupListActionOptions } = useCustomerGroupListModel();
 // 初始化表格高度
@@ -178,6 +221,15 @@ const {
   refAddCustomerFeeSet,
   hanleSaveFeesetCustomer
 } = useCustomerGroupList(customerGroupListGridOptions);
+const {
+  referenceRef,
+  visiblePopover,
+  getCustomerName,
+  getCustomerGroupName,
+  showCustomPopover,
+  showCustomPopoverContnet,
+  hideCustomPopover
+} = useCustomPopover()
 </script>
 <style lang="scss" scoped>
 .customer-group-list {

src/views/customerfeeset/customerfeesetList.vue

@@ -152,6 +152,15 @@
                 {{ row.activeFlag ? "激活" : "停用" }}
               </el-tag>
             </template>
+            <!-- 客户名称 -->
+            <template #customerNameLevel2="{ row }">
+              <span
+                @mouseenter="showCustomPopover($event, row)"
+                @mouseleave="hideCustomPopover"
+              >
+                {{ row.customerNameList.join('、') }}
+              </span>
+            </template>
             <template #beginDate="{ row }">
               {{ row.beginDate }}
             </template>
@@ -204,6 +213,15 @@
           {{ row.activeFlag ? "激活" : "停用" }}
         </el-tag>
       </template>
+      <!-- 客户名称 -->
+      <template #customerNameLevel1="{ row }">
+        <span
+          @mouseenter="showCustomPopover($event, row)"
+          @mouseleave="hideCustomPopover"
+        >
+          {{ row.customerNameList.join('、') }}
+        </span>
+      </template>
       <template #beginDate="{ row }">
         {{ row.beginDate }}
       </template>
@@ -259,6 +277,30 @@
       @size-change="sizeChange"
       @current-change="currentChange"
     />
+    <!-- Popover -->
+    <el-popover
+      :width="780"
+      trigger="manual"
+      popper-class="custom-group-warp"
+      :virtual-ref="referenceRef"
+      :visible="visiblePopover"
+      virtual-triggering
+    >
+      <div
+        class="group-name-content"
+        @mouseenter="showCustomPopoverContnet"
+        @mouseleave="hideCustomPopover"
+      >
+        <div class="title">
+          分组名称：{{ getFeeCustomerGroupName }}
+        </div>
+        <div class="content">
+          <div class="text">
+            所属客户：{{ getCustomerName }}
+          </div>
+        </div>
+      </div>
+    </el-popover>
   </el-main>
   <!-- 新增、编辑弹框 
  :productSelectList="productSelectList.list"
@@ -354,6 +396,7 @@ import { RecalculateType } from "@/type/BaseEnum";
 import BaseVxeToolbar from '@/components/BaseVxeToolbar/BaseVxeToolbar.vue';
 import StopEndDate from '@/components/StopEndDate/index.vue';
 import { FeeSetFoldingLayer } from "@/type/BaseBusinessFeeseType";
+import useCustomPopover from "@/hooks/useCustomPopover";
 
 // 删除缓存
 const instance = useDeleteCache();
@@ -429,6 +472,15 @@ const {
   customerFeeSetGridRef,
   getproductSelectList
 );
+const {
+  referenceRef,
+  visiblePopover,
+  getCustomerName,
+  getFeeCustomerGroupName,
+  showCustomPopover,
+  showCustomPopoverContnet,
+  hideCustomPopover
+} = useCustomPopover()
 </script>
 
 <style lang="scss" scoped>