فهرست منبع

1、修改菜单tab激活时自动刷新界面 2、修改报告厅预约界面的样式

zlwu 1 سال پیش
والد
کامیت
eabe865c6c
2فایلهای تغییر یافته به همراه36 افزوده شده و 7 حذف شده
  1. 22 0
      web/src/layout/components/TagsView/index.vue
  2. 14 7
      web/src/views/hq/hallReservation/index.vue

+ 22 - 0
web/src/layout/components/TagsView/index.vue

@@ -9,6 +9,7 @@
         :to="{ path: tag.path ? tag.path : '', query: tag.query }"
         class="tags-view-item"
         :style="activeStyle(tag)"
+        @click="handleTagClick(tag, $event)"
         @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
         @contextmenu.prevent="openMenu(tag, $event)"
       >
@@ -232,6 +233,27 @@ const handleScroll = () => {
   closeMenu();
 };
 
+// 点击标签时,如果标签已激活,则执行刷新操作
+const handleTagClick = (tag: RouteLocationNormalized, e: MouseEvent) => {
+  // 阻止 router-link 默认行为,统一由脚本控制导航和刷新
+  e.preventDefault();
+
+  if (isActive(tag)) {
+    // 当前已激活,直接刷新
+    refreshSelectedTag(tag);
+  } else {
+    // 尚未激活,先导航到对应路由,导航成功后再刷新
+    router
+      .push({ path: tag.path || '', query: tag.query })
+      .then(() => {
+        refreshSelectedTag(tag);
+      })
+      .catch(() => {
+        /* 忽略重复导航错误 */
+      });
+  }
+};
+
 onMounted(() => {
   initTags();
   addTags();

+ 14 - 7
web/src/views/hq/hallReservation/index.vue

@@ -181,7 +181,7 @@
                   <span class="hall-id">(ID: {{ hall.id }})</span>
                 </div>
                 <div class="hall-description" v-if="hall.hallDescription">
-                  {{ hall.hallDescription }}
+                  {{ displayHallDescription(hall.hallDescription) }}
                 </div>
                 <div class="hall-images">
                   <template v-if="getHallImages(hall.hallImage || '').length > 0">
@@ -826,6 +826,13 @@ const handleExport = () => {
   );
 };
 
+// 在 <script setup> 部分适当位置添加工具函数
+/** 将文本截断到指定长度(默认20个字符),超出部分以省略号结尾 */
+const displayHallDescription = (desc: string, maxLen = 20) => {
+  if (!desc) return '';
+  return desc.length > maxLen ? desc.slice(0, maxLen) + '...' : desc;
+};
+
 onMounted(() => {
   getList();
   getHallList();
@@ -887,19 +894,19 @@ onMounted(() => {
   font-size: 12px;
   color: #606266;
   margin-bottom: 4px;
-  line-height: 1.3;
   max-height: 36px;
+  max-width: 240px; /* 新增:限制最大宽度,防止下拉框过宽 */
   overflow: hidden;
+  white-space: nowrap; /* 单行显示 */
   text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
+  display: block;
 }
 
+/* 下拉框图片容器:每行最多 6 张图片 */
 .hall-images {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(6, 40px); /* 6 列,每列宽 40px */
   gap: 4px;
-  flex-wrap: wrap;
 }
 
 .hall-image {