vue2-client 1.22.2 → 1.22.4

package/src/base-client/components/his/XList/XList.vue

@@ -120,60 +120,133 @@
 
   <!-- 默认标签模式 -->
   <div class="list-wrapper x-list-wrapper" :class="wrapperClassObject" v-else>
-    <a-list size="large" :data-source="data" itemLayout="horizontal" class="list-container" ref="listRef">
-      <a-list-item
-        slot="renderItem"
-        slot-scope="item, index"
-        class="list-item"
-        @click="handleClick(index)"
-        @mouseenter="effectiveEnableHoverOptions && handleMouseEnter(index)"
-        @mouseleave="handleMouseLeave"
-        :class="{
-          'hover-active': effectiveEnableHoverOptions && hoveredIndex === index,
-          'selected-active': enableSelectRow && currentSelectedIndex === index
-        }"
-      >
-        <i v-if="icon" class="icon-menu" :style="getIconStyle(item)"></i>
-        <span
-          class="item-text"
-          :class="{ 'text-truncated': effectiveEnableHoverOptions && hoveredIndex === index }"
-          :style="getTextStyle(index)"
-        >
-          {{ getListItemNumber(item, index) }} {{ getListItemName(item) }}
-        </span>
-
-        <div v-if="button" class="button-group">
-          <a-button
-            v-for="(name, idx) in buttonNames"
-            :key="idx"
-            type="link"
-            :class="['confirm-btn', buttonMode ? 'hover-btn' : '']"
-            @click.stop="click(index, idx)"
-          >
-            <span :class="{ 'hover-active': effectiveEnableHoverOptions && hoveredIndex === index }">{{ name }}</span>
-          </a-button>
+    <template v-if="groupField && groupedListData.length">
+      <div v-for="(group, gIdx) in groupedListData" :key="group.title" class="x-list-group">
+        <div class="x-list-group-header">
+          <span class="x-list-group-title">{{ group.title }} （{{ group.group.length }}）</span>
         </div>
+        <a-list size="large" :data-source="group.group" itemLayout="horizontal" class="list-container">
+          <a-list-item
+            slot="renderItem"
+            slot-scope="item, index"
+            class="list-item"
+            @click="handleGroupItemClick(gIdx, index, item)"
+            @mouseenter="handleGroupMouseEnter(getGroupItemIndex(gIdx, index))"
+            @mouseleave="handleMouseLeave"
+            :class="{
+              'hover-active': hoveredIndex === getGroupItemIndex(gIdx, index),
+              'selected-active': enableSelectRow && currentSelectedIndex === getGroupItemIndex(gIdx, index)
+            }"
+          >
+            <span
+              class="item-text"
+              :class="{ 'text-truncated': hoveredIndex === getGroupItemIndex(gIdx, index) }"
+              :style="getTextStyle(getGroupItemIndex(gIdx, index))"
+            >
+              <template v-if="showNumber">{{ getGroupItemIndex(gIdx, index) + 1 }}. </template>{{ item.label }}
+            </span>
 
-        <!-- 悬浮选项框 -->
-        <div
-          v-show="effectiveEnableHoverOptions && hoveredIndex === index"
-          class="hover-options"
-          @mouseenter="handleOptionsEnter"
-          @mouseleave="handleOptionsLeave"
+            <div v-if="button" class="button-group">
+              <a-button
+                v-for="(name, idx) in buttonNames"
+                :key="idx"
+                type="link"
+                :class="['confirm-btn', buttonMode ? 'hover-btn' : '']"
+                @click.stop="clickGroupItem(gIdx, index, idx, item)"
+              >
+                <span :class="{ 'hover-active': hoveredIndex === getGroupItemIndex(gIdx, index) }">{{ name }}</span>
+              </a-button>
+            </div>
+
+            <!-- 分组模式：图标下拉（悬浮时显示，有选项时才渲染下拉） -->
+            <template v-if="effectiveIcon">
+              <div v-if="effectiveIconSelect && effectiveIconSelect.length" class="group-icon-wrapper" v-show="hoveredIndex === getGroupItemIndex(gIdx, index)">
+                <a-dropdown
+                  :trigger="['click']"
+                  :get-popup-container="trigger => trigger.parentNode"
+                >
+                  <a-icon
+                    :type="effectiveIcon"
+                    class="group-more-icon"
+                    @click.stop="handleGroupIconClick(getGroupItemIndex(gIdx, index), $event)"
+                  />
+                  <a-menu slot="overlay" @click="({ key }) => handleGroupIconSelect(getGroupItemIndex(gIdx, index), key)">
+                    <a-menu-item v-for="opt in effectiveIconSelect" :key="opt.value">
+                      {{ opt.label }}
+                    </a-menu-item>
+                  </a-menu>
+                </a-dropdown>
+              </div>
+              <a-icon
+                v-else
+                :type="effectiveIcon"
+                class="group-more-icon"
+                v-show="hoveredIndex === getGroupItemIndex(gIdx, index)"
+                @click.stop="handleGroupIconClick(getGroupItemIndex(gIdx, index), $event)"
+              />
+            </template>
+
+
+          </a-list-item>
+        </a-list>
+      </div>
+    </template>
+    <template v-else>
+      <a-list size="large" :data-source="data" itemLayout="horizontal" class="list-container" ref="listRef">
+        <a-list-item
+          slot="renderItem"
+          slot-scope="item, index"
+          class="list-item"
+          @click="handleClick(index)"
+          @mouseenter="effectiveEnableHoverOptions && handleMouseEnter(index)"
+          @mouseleave="handleMouseLeave"
+          :class="{
+            'hover-active': effectiveEnableHoverOptions && hoveredIndex === index,
+            'selected-active': enableSelectRow && currentSelectedIndex === index
+          }"
         >
-          <div class="hover-options-content">
-            <div
-              v-for="(Item, idx) in select_options"
+          <i v-if="icon" class="icon-menu" :style="getIconStyle(item)"></i>
+          <span
+            class="item-text"
+            :class="{ 'text-truncated': effectiveEnableHoverOptions && hoveredIndex === index }"
+            :style="getTextStyle(index)"
+          >
+            <template v-if="showNumber">{{ getListItemNumber(item, index) }} </template>{{ getListItemName(item) }}
+          </span>
+
+          <div v-if="button" class="button-group">
+            <a-button
+              v-for="(name, idx) in buttonNames"
               :key="idx"
-              class="option-item"
-              @click="handleOptionClick(index, Item)"
+              type="link"
+              :class="['confirm-btn', buttonMode ? 'hover-btn' : '']"
+              @click.stop="click(index, idx)"
             >
-              {{ Item }}
+              <span :class="{ 'hover-active': effectiveEnableHoverOptions && hoveredIndex === index }">{{ name }}</span>
+            </a-button>
+          </div>
+
+          <!-- 悬浮选项框 -->
+          <div
+            v-show="effectiveEnableHoverOptions && hoveredIndex === index"
+            class="hover-options"
+            @mouseenter="handleOptionsEnter"
+            @mouseleave="handleOptionsLeave"
+          >
+            <div class="hover-options-content">
+              <div
+                v-for="(Item, idx) in select_options"
+                :key="idx"
+                class="option-item"
+                @click="handleOptionClick(index, Item)"
+              >
+                {{ Item }}
+              </div>
             </div>
           </div>
-        </div>
-      </a-list-item>
-    </a-list>
+        </a-list-item>
+      </a-list>
+    </template>
   </div>
 </template>
 
@@ -209,6 +282,11 @@ export default {
       type: Boolean,
       default: true
     },
+    // 分组模式：图标下拉是否启用悬浮显示
+    enableGroupHover: {
+      type: Boolean,
+      default: true
+    },
     serviceName: {
       type: String,
       default: 'af-his'
@@ -246,6 +324,16 @@ export default {
     initialData: {
       type: Array,
       default: null
+    },
+    // 分组配置：分组字段名（从配置中读取）
+    groupField: {
+      type: String,
+      default: null
+    },
+    // 分组配置：是否显示列表序号
+    showNumber: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -290,6 +378,12 @@ export default {
       internalEnableHoverOptions: undefined,
       // 选择请求的轻量防抖
       selectDebounceTimer: null,
+      // 分组相关（已移除，由 props.groupField 提供）
+      groupedData: [],
+      // 分组模式图标下拉相关
+      groupIconDropdownVisible: false,
+      activeGroupIconIndex: -1,
+      iconSelect: [], // 图标下拉选项列表
     }
   },
   inject: ['getComponentByName'],
@@ -306,7 +400,7 @@ export default {
       const a = this.$attrs || {}
       const classes = {}
       // 多个布尔型样式开关（存在且为真则生效）
-      const booleanStyleKeys = ['enableNewListStyle']
+      const booleanStyleKeys = ['enableNewListStyle', 'enableGroupStyle']
       booleanStyleKeys.forEach(key => {
         const val = a[key]
         const truthy = val === true || val === '' || val === 'true'
@@ -367,6 +461,30 @@ export default {
     cardModeWrapperStyle() {
       if (!this.listMode) return undefined
       return { '--x-list-card-height': this.listCardHeight }
+    },
+    // 分组数据：按 create_time 聚合，返回 [{ title, group: [{ label, value }] }]
+    // 数据格式：[{ create_time: '2026-06-11', titlelist: [{ label, value }] }]
+    groupedListData() {
+      if (!Array.isArray(this.localData) || this.localData.length === 0) {
+        return []
+      }
+      return this.localData
+        .filter(item => item && item[this.groupField] != null && Array.isArray(item.titlelist))
+        .map(item => ({
+          title: item[this.groupField],  // 分组标题使用 groupField 字段值
+          group: item.titlelist          // 列表项数组
+        }))
+    },
+    // 图标下拉选项：支持配置和 props 两种方式
+    effectiveIconSelect() {
+      if (Array.isArray(this.iconSelect) && this.iconSelect.length) return this.iconSelect
+      return []
+    },
+    // 是否显示图标：icon 显式设置或 iconSelect 有选项时都显示
+    effectiveIcon() {
+      if (this.icon !== false && this.icon !== undefined) return this.icon
+      if (this.effectiveIconSelect.length) return 'more'
+      return false
     }
   },
   methods: {
@@ -447,6 +565,10 @@ export default {
         that.buttonNames = (res.buttonNames) || [] // 按钮文本
         that.buttonMode = (res.buttonMode) || false // 按钮模式
         that.cardButtonsVisible = (res.cardButtonsVisible) || false // 卡片按钮
+        // 图标下拉选项
+        if (Array.isArray(res.iconSelect)) {
+          that.iconSelect = res.iconSelect
+        }
         const grid = res.grid
         if (grid && typeof grid === 'object') {
           that.listGrid = { gutter: 16, ...grid }
@@ -467,6 +589,9 @@ export default {
         if (enableHover) {
           this.select_options = res.select_options
         }
+        // 分组配置：从配置中读取
+        if (res.groupField) this.groupField = res.groupField
+        if (typeof res.showNumber === 'boolean') this.showNumber = res.showNumber
         if (that.initialData != null && Array.isArray(that.initialData)) {
           applyResult(that.initialData)
           that._emitConfigEnd()
@@ -660,6 +785,25 @@ export default {
     click(index, buttonIndex) {
       this.$emit('click', { data: this.data[index], name: this.buttonNames[buttonIndex] })
     },
+    getGroupItemIndex(groupIndex, innerIndex) {
+      let idx = 0
+      const groups = this.groupedListData
+      for (let i = 0; i < groups.length; i++) {
+        if (i === groupIndex) {
+          return idx + innerIndex
+        }
+        idx += groups[i].group.length
+      }
+      return -1
+    },
+    handleGroupItemClick(groupIndex, innerIndex, item) {
+      const globalIndex = this.getGroupItemIndex(groupIndex, innerIndex)
+      if (this.enableSelectRow && this.selectOnClick) this.setSelectedIndex(globalIndex)
+      this.$emit('listClick', item)
+    },
+    clickGroupItem(groupIndex, innerIndex, buttonIndex, item) {
+      this.$emit('click', { data: item, name: this.buttonNames[buttonIndex] })
+    },
     // 根据对象字段匹配选中（默认按 id 字段）
     setSelectedById(id, field = 'id') {
       const list = this.listMode ? this.localData : this.data
@@ -716,6 +860,12 @@ export default {
       this.hoveredIndex = index
       this.isOptionsHovered = true
     },
+    // 分组模式鼠标进入
+    handleGroupMouseEnter(index) {
+      this.clearAllTimers()
+      this.hoveredIndex = index
+      this.isOptionsHovered = true
+    },
     // 鼠标离开列表项
     handleMouseLeave() {
       this.clearAllTimers()
@@ -737,6 +887,17 @@ export default {
         this.hoveredIndex = -1
       }, 100)
     },
+    // 分组模式图标点击
+    handleGroupIconClick(index, event) {
+      this.activeGroupIconIndex = index
+      this.groupIconDropdownVisible = !this.groupIconDropdownVisible
+    },
+    // 分组模式图标下拉选择
+    handleGroupIconSelect(index, opt) {
+      this.groupIconDropdownVisible = false
+      this.activeGroupIconIndex = -1
+      this.$emit('groupIconSelect', { index, option: opt })
+    },
     // 清除所有定时器
     clearAllTimers() {
       if (this.hoverTimer) {
@@ -813,7 +974,6 @@ export default {
   display: inline-block;
   width: 20px;
   height: 20px;
-  background-color: #ccc;
   margin-right: 8px;
 }
 
@@ -881,7 +1041,7 @@ export default {
 }
 .card-a-col.selected-active {
   background-color: #0057fe !important;
-  color: white;
+  color: #ffffff;
   border: none !important;
 }
 .card-a-col.selected-active .button-a-col,
@@ -1158,16 +1318,135 @@ export default {
   .list-item:hover .confirm-btn {
     opacity: 1;
   }
-  /* 选中状态字体颜色 - 使用白色，与全局样式保持一致 */
-  .list-item.selected-active {
-    color: white !important; /* 使用白色文本 */
+}
+
+/* 分组模式样式（enableGroupStyle） */
+.x-list-enableGroupStyle {
+  .x-list-group {
+    margin-bottom: 12px;
+  }
+  .x-list-group-header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 8px;
+    padding: 8px 12px;
+    height: 16px;
+    opacity: 1;
+    font-family: Source Han Sans;
+    font-size: 12px;
+    font-weight: normal;
+    line-height: normal;
+    letter-spacing: 0em;
+    color: #5D5C5C;
+    background: #ffffff;
+    border: none;
+    border-radius: 0;
+  }
+  .x-list-group-title {
+    font-weight: normal;
+    color: #5D5C5C;
   }
-  .list-item.selected-active .item-text {
-    color: white !important; /* 确保文本使用白色 */
+  .x-list-group .list-container {
+    border: none;
+    border-radius: 0;
   }
-  .list-item.selected-active .confirm-btn,
-  .list-item.selected-active .confirm-btn span {
-    color: #ffffff !important; /* 按钮使用白色 */
+  .x-list-group .list-item {
+    height: 32px;
+    border-radius: 0;
+    margin-bottom: 0;
+    border: none;
+    background: #ffffff;
+    opacity: 1;
+    font-family: Source Han Sans;
+    font-size: 16px;
+    font-weight: normal;
+    line-height: 32px;
+    letter-spacing: 0em;
+    color: #313131;
+    padding-left: 3px;
+    margin-bottom: 0 !important;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    box-sizing: border-box;
+    position: relative;
+    transition: background-color 0.3s ease;
+  }
+
+  .x-list-group .list-item:last-child {
+    border-radius: 0 !important;
+  }
+  .x-list-group .list-item {
+    border-radius: 0 !important;
+    transition: background-color 0.3s ease;
+  }
+  .x-list-group .list-item.hover-active,
+  .x-list-group .list-item.selected-active {
+    background-color: #0057fe !important;
+    color: #ffffff !important;
+    border-radius: 0px 6px 6px 0px !important;
+  }
+  .x-list-group .list-item.hover-active .item-text,
+  .x-list-group .list-item.selected-active .item-text {
+    color: #ffffff !important;
+  }
+  .x-list-group .list-item.hover-active .confirm-btn,
+  .x-list-group .list-item.selected-active .confirm-btn,
+  .x-list-group .list-item.hover-active .confirm-btn span,
+  .x-list-group .list-item.selected-active .confirm-btn span {
+    color: #ffffff !important;
+  }
+
+  /* 分组模式图标下拉样式 */
+  .group-icon-wrapper {
+    position: relative;
+    margin-left: auto;
+    flex-shrink: 0;
+  }
+  .group-more-icon {
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+    opacity: 1;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+    line-height: 1;
+    &:hover {
+      color: #FFFFFF;
+    }
+  }
+  .group-icon-dropdown {
+    position: absolute;
+    right: 0;
+    top: 100%;
+    min-width: 100px;
+    background: #fff;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    z-index: 100;
+    overflow: hidden;
+  }
+  .group-icon-dropdown-item {
+    padding: 8px 12px;
+    cursor: pointer;
+    font-family: Source Han Sans;
+    font-size: 16px;
+    font-weight: normal;
+    line-height: 37px;
+    letter-spacing: 0em;
+    font-variation-settings: "opsz" auto;
+    font-feature-settings: "kern" on;
+    color: #5D5C5C;
+    &:hover {
+      background: #f5f5f5;
+    }
+  }
+
+  /* 分组模式：悬浮时隐藏右边框圆角 */
+  .x-list-group .list-item.hover-active {
+    border-radius: 0px 6px 6px 0px !important;
   }
 }
 </style>

package/src/base-client/components/his/XSidebar/XSidebar.vue

@@ -2,16 +2,16 @@
   <div
     ref="drawerRoot"
     class="drawer"
-    :class="[{ 'drawer-collapsed': !isOpen }, wrapperClassObject()]"
+    :class="[{ 'drawer-collapsed': !isOpen, 'position-right': position === 'right' }, wrapperClassObject()]"
     :style="drawerStyle">
     <div
       v-show="!isFrameConfig || showToggleInFrame"
       class="drawer-toggle"
       :class="{ 'toggle-collapsed': !isOpen }"
-      :style="toggleButtonStyle"
+      :style="[toggleButtonStyle, toggleButtonPositionStyle]"
       @click="toggleDrawer">
       <div class="arrow">
-        {{ isOpen ? '›' : '‹' }}
+        {{ arrowChar }}
       </div>
     </div>
     <div class="drawer-content" v-show="isOpen" :style="contentStyle">
@@ -83,6 +83,12 @@ export default {
       type: Number,
       default: 26
     },
+    // 侧边栏位置: 'left' 左侧侧边栏，'right' 右侧侧边栏
+    position: {
+      type: String,
+      default: 'left',
+      validator: value => ['left', 'right'].includes(value)
+    },
     // 总宽度像素值（px模式使用）
     totalWidth: {
       type: Number,
@@ -163,6 +169,22 @@ export default {
       const rowH = this.rowHeight || this.maxRowHeight
       const top = rowH ? `${rowH / 2 - 24}px` : '50%'
       return { width, top }
+    },
+    // 根据侧边栏位置和展开状态返回箭头字符
+    arrowChar () {
+      if (this.position === 'right') {
+        // 右侧侧边栏：展开时箭头指向右(收回)，折叠时箭头指向左(展开)
+        return this.isOpen ? '‹' : '›'
+      }
+      // 左侧侧边栏：展开时箭头指向左(收回)，折叠时箭头指向右(展开)
+      return this.isOpen ? '›' : '‹'
+    },
+    // 切换按钮的定位样式
+    toggleButtonPositionStyle () {
+      if (this.position === 'right') {
+        return { right: 0 }
+      }
+      return { left: 0 }
     }
   },
   mounted () {
@@ -720,18 +742,13 @@ export default {
   align-items: center;
   justify-content: center;
   z-index: 1000;
-}
-/* 打开状态：箭头在抽屉内 */
-.drawer:not(.drawer-collapsed) .drawer-toggle {
-  left: 0;
   border-radius: 0;
   box-shadow: none;
 }
-/* 关闭状态：箭头在抽屉内 */
-.drawer-collapsed .drawer-toggle {
-  left: 0;
-  border-radius: 0;
-  box-shadow: none;
+/* 右侧侧边栏：按钮在右侧 */
+.position-right > .drawer-toggle {
+  left: auto;
+  right: 0;
 }
 .arrow {
   font-size: 20px;
@@ -743,4 +760,11 @@ export default {
   padding-right: 12px;
   margin-left: 26px;
 }
+/* 右侧侧边栏的内容区域 */
+.position-right > .drawer-content {
+  padding-right: 0px;
+  padding-left: 0px;
+  margin-left: 0;
+  margin-right: 0px;
+}
 </style>