vue2-client 1.14.67 → 1.14.68

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

@@ -1,28 +1,55 @@
 <template>
   <div class="list-wrapper">
     <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)">
-        <i
-          v-if="icon"
-          class="icon-menu"
-          :style="getIconStyle(item)"
-        ></i>
-        <span
-          class="item-text">
-          {{ item.number }} {{ item.name }}
-        </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)"
+      <a-list-item
+        slot="renderItem"
+        slot-scope="item, index"
+        class="list-item"
+        @click="handleClick(index)"
+        @mouseenter="enableHoverOptions && handleMouseEnter(index)"
+        @mouseleave="handleMouseLeave"
+        :class="{ 'hover-active': enableHoverOptions && hoveredIndex === index }"
+      >
+          <i
+            v-if="icon"
+            class="icon-menu"
+            :style="getIconStyle(item)"
+          ></i>
+          <span
+            class="item-text">
+            {{ item.number }} {{ item.name }}
+          </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': enableHoverOptions && hoveredIndex === index }">{{ name }}</span>
+            </a-button>
+          </div>
+
+          <!-- 悬浮选项框 -->
+          <div
+            v-show="enableHoverOptions && hoveredIndex === index"
+            class="hover-options"
+            @mouseenter="handleOptionsEnter"
+            @mouseleave="handleOptionsLeave"
           >
-            {{ name }}
-          </a-button>
-        </div>
+            <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>
       </a-list-item>
     </a-list>
   </div>
@@ -42,6 +69,10 @@ export default {
     fixedQueryForm: {
       type: Object,
       default: { condition: '1=1' }
+    },
+    enableHoverOptions: {
+      type: Boolean,
+      default: true
     }
   },
   inject: ['getComponentByName'],
@@ -51,7 +82,12 @@ export default {
       button: false,
       icon: false,
       buttonNames: [],
-      buttonMode: false
+      buttonMode: false,
+      hoveredIndex: -1,
+      isOptionsHovered: false,
+      hoverTimer: null,
+      leaveTimer: null,
+      select_options: []
     }
   },
   created () {
@@ -65,6 +101,10 @@ export default {
         that.icon = res.icon
         that.buttonNames = res.buttonNames || []
         that.buttonMode = res.buttonMode || false
+        this.enableHoverOptions = res.enableHoverOptions || false
+        if (this.enableHoverOptions) {
+          this.select_options = res.select_options
+        }
         runLogic(res.data, param, 'af-his').then(ress => {
           that.data = ress
         })
@@ -88,6 +128,42 @@ export default {
       runLogic(this.queryParamsName, par, 'af-his').then(res => {
         this.data = res.data
       })
+    },
+    handleMouseEnter (index) {
+      this.clearAllTimers()
+      this.hoveredIndex = index
+      this.isOptionsHovered = true
+    },
+    handleMouseLeave () {
+      this.clearAllTimers()
+      this.leaveTimer = setTimeout(() => {
+        this.isOptionsHovered = false
+        this.hoveredIndex = -1
+      }, 100)
+    },
+    handleOptionsEnter () {
+      this.clearAllTimers()
+      this.isOptionsHovered = true
+    },
+    handleOptionsLeave () {
+      this.clearAllTimers()
+      this.leaveTimer = setTimeout(() => {
+        this.isOptionsHovered = false
+        this.hoveredIndex = -1
+      }, 100)
+    },
+    clearAllTimers () {
+      if (this.hoverTimer) {
+        clearTimeout(this.hoverTimer)
+        this.hoverTimer = null
+      }
+      if (this.leaveTimer) {
+        clearTimeout(this.leaveTimer)
+        this.leaveTimer = null
+      }
+    },
+    handleOptionClick (index, action) {
+      this.$emit('optionClick', { data: this.data[index], action })
     }
   },
   watch: {
@@ -97,6 +173,9 @@ export default {
         this.refreshList(val)
       }
     }
+  },
+  beforeDestroy () {
+    this.clearAllTimers()
   }
 }
 </script>
@@ -124,6 +203,8 @@ export default {
   border: 1px solid #D9D9D9;
   box-sizing: border-box;
   margin-bottom: 8px !important;
+  position: relative;
+  transition: background-color 0.3s ease;
 }
 
 .icon-menu {
@@ -170,4 +251,56 @@ export default {
 .list-wrapper::-webkit-scrollbar-track {
   background-color: #f0f0f0;
 }
+
+.hover-active {
+  color: white;
+}
+
+.list-item.hover-active {
+  background-color: rgb(0, 87, 254) !important;
+  color: white;
+  border: 1px solid black;
+}
+
+.hover-options {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  background: white;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+  margin-top: 4px;
+  width: 100%;
+  box-sizing: border-box;
+  pointer-events: auto;
+}
+
+.hover-options-content {
+  padding: 4px 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.option-item {
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  color: #333;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+}
+
+.option-item:hover {
+  background-color: #f5f5f5;
+  color: #1890ff;
+}
+
+.option-item:active {
+  background-color: #e6f7ff;
+}
 </style>

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

@@ -1,207 +1,207 @@
-<template>
-  <div>
-    <div class="text-card">
-      <div
-        v-for="(item, index) in displayItems"
-        :key="index"
-        class="text-item"
-        @click="handleItemClick(index, item.id)"
-        @contextmenu.prevent="handleContextMenu(index, item.id)">
-        <div class="text-content" :class="{ 'is-empty': !item.content }">
-          {{ item.content || '+' }}
-        </div>
-      </div>
-      <!-- 编辑弹出框 -->
-      <div
-        v-if="showEdit"
-        class="edit-overlay"
-        @click.self="handleOverlayClick">
-        <div class="edit-card">
-          <a-textarea
-            v-model="editingContent"
-            :autoSize="{ minRows: 3 }"
-            @keyup.enter="handleSave"
-            ref="textarea"/>
-        </div>
-      </div>
-      <!-- 删除确认弹框 -->
-      <a-modal
-        v-model="showDeleteModal"
-        title="确认删除"
-        okText="确认"
-        cancelText="取消"
-        @ok="handleDeleteConfirm">
-        <p>确定要删除这条内容吗？</p>
-      </a-modal>
-    </div>
-  </div>
-</template>
-
-<script>
-import { runLogic } from '@vue2-client/services/api/common'
-
-export default {
-  name: 'XTextCard',
-  props: {
-    // logic配置名,要求返回一个数组[{ id: , content: }]
-    queryParamsName: {
-      type: String,
-      default: 'memorandumLOGIC'
-    },
-    queryParams: {
-      type: Object,
-      default: () => { return {} }
-    },
-    // 请求参数
-    parameter: {
-      type: Object,
-      default: () => { return {} }
-    }
-  },
-  data () {
-    return {
-      localItems: [], // 本地数据
-      showEdit: false, // 是否显示编辑框
-      editingIndex: -1, // 当前编辑的索引
-      editingContent: '', // 编辑框的内容
-      showDeleteModal: false, // 是否显示删除确认框
-      deleteIndex: -1, // 要删除的项目索引
-      ID: 0
-    }
-  },
-  computed: {
-    // 显示的列表，始终保持一个空行
-    displayItems () {
-      const items = [...this.localItems]
-      // 如果最后一项不是空的，添加一个空项
-      if (!items.length || items[items.length - 1].content) {
-        items.push({ content: '' })
-      }
-      return items
-    }
-  },
-  methods: {
-    // 点击项目
-    handleItemClick (index, id) {
-      this.ID = id
-      this.editingIndex = index
-      this.editingContent = this.displayItems[index].content
-      this.showEdit = true
-      this.$nextTick(() => {
-        this.$refs.textarea?.focus()
-      })
-    },
-    // 点击遮罩层保存
-    handleOverlayClick () {
-      this.handleSave()
-    },
-    // 保存内容
-    handleSave () {
-      if (this.editingContent.trim()) {
-        if (this.editingIndex === this.localItems.length) {
-          // 如果是在最后一个空行添加，push新内容
-          this.localItems.push({ content: this.editingContent.trim() })
-        } else {
-          // 否则更新现有内容
-          this.localItems[this.editingIndex].content = this.editingContent.trim()
-        }
-        const addData = { data: this.editingContent.trim(), ID: this.ID }
-        // 触发更新事件
-        this.$emit('add', addData)
-      }
-      this.showEdit = false
-      this.editingIndex = -1
-      this.editingContent = ''
-    },
-    // 初始化数据
-    async initData (data, parameter) {
-      // 从配置中获取数据
-      const resData = await runLogic(data, parameter, 'af-his')
-      this.localItems = resData
-      return resData
-    },
-    // 处理右键菜单
-    handleContextMenu (index, id) {
-      // 如果是最后一个空行，不显示删除框
-      if (index === this.localItems.length) {
-        return
-      }
-      this.ID = id
-      this.deleteIndex = index
-      this.showDeleteModal = true
-    },
-    // 确认删除
-    handleDeleteConfirm () {
-      if (this.deleteIndex > -1) {
-        this.localItems.splice(this.deleteIndex, 1)
-        const deleteData = { data: [...this.localItems][this.deleteIndex], ID: this.ID }
-        this.$emit('deleteData', deleteData)
-        this.deleteIndex = -1
-      }
-      this.showDeleteModal = false
-    }
-  },
-  watch: {
-    queryParamsName: {
-      immediate: true,
-      handler (newVal) {
-        this.initData(newVal, this.parameter)
-      },
-      deep: true
-    }
-  }
-}
-</script>
-
-<style scoped lang="less">
-.text-card {
-  position: relative;
-  width: 100%;
-  .text-item {
-    padding: 8px 12px;
-    border-bottom: 1px solid #f0f0f0;
-    cursor: pointer;
-    transition: all 0.3s;
-    user-select: none;
-
-    &:hover {
-      background-color: #f5f5f5;
-    }
-
-    .text-content {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      line-height: 1.5;
-
-      &.is-empty {
-        color: #5D5C5C;
-        font-weight: 400;
-      }
-    }
-  }
-  .edit-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(0, 0, 0, 0.45);
-    z-index: 1000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    .edit-card {
-      background: white;
-      padding: 16px;
-      border-radius: 8px;
-      width: 90%;
-      max-width: 500px;
-      box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12);
-      .ant-input {
-        width: 100%;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div>
+    <div class="text-card">
+      <div
+        v-for="(item, index) in displayItems"
+        :key="index"
+        class="text-item"
+        @click="handleItemClick(index, item.id)"
+        @contextmenu.prevent="handleContextMenu(index, item.id)">
+        <div class="text-content" :class="{ 'is-empty': !item.content }">
+          {{ item.content || '+' }}
+        </div>
+      </div>
+      <!-- 编辑弹出框 -->
+      <div
+        v-if="showEdit"
+        class="edit-overlay"
+        @click.self="handleOverlayClick">
+        <div class="edit-card">
+          <a-textarea
+            v-model="editingContent"
+            :autoSize="{ minRows: 3 }"
+            @keyup.enter="handleSave"
+            ref="textarea"/>
+        </div>
+      </div>
+      <!-- 删除确认弹框 -->
+      <a-modal
+        v-model="showDeleteModal"
+        title="确认删除"
+        okText="确认"
+        cancelText="取消"
+        @ok="handleDeleteConfirm">
+        <p>确定要删除这条内容吗？</p>
+      </a-modal>
+    </div>
+  </div>
+</template>
+
+<script>
+import { runLogic } from '@vue2-client/services/api/common'
+
+export default {
+  name: 'XTextCard',
+  props: {
+    // logic配置名,要求返回一个数组[{ id: , content: }]
+    queryParamsName: {
+      type: String,
+      default: 'memorandumLOGIC'
+    },
+    queryParams: {
+      type: Object,
+      default: () => { return {} }
+    },
+    // 请求参数
+    parameter: {
+      type: Object,
+      default: () => { return {} }
+    }
+  },
+  data () {
+    return {
+      localItems: [], // 本地数据
+      showEdit: false, // 是否显示编辑框
+      editingIndex: -1, // 当前编辑的索引
+      editingContent: '', // 编辑框的内容
+      showDeleteModal: false, // 是否显示删除确认框
+      deleteIndex: -1, // 要删除的项目索引
+      ID: 0
+    }
+  },
+  computed: {
+    // 显示的列表，始终保持一个空行
+    displayItems () {
+      const items = [...this.localItems]
+      // 如果最后一项不是空的，添加一个空项
+      if (!items.length || items[items.length - 1].content) {
+        items.push({ content: '' })
+      }
+      return items
+    }
+  },
+  methods: {
+    // 点击项目
+    handleItemClick (index, id) {
+      this.ID = id
+      this.editingIndex = index
+      this.editingContent = this.displayItems[index].content
+      this.showEdit = true
+      this.$nextTick(() => {
+        this.$refs.textarea?.focus()
+      })
+    },
+    // 点击遮罩层保存
+    handleOverlayClick () {
+      this.handleSave()
+    },
+    // 保存内容
+    handleSave () {
+      if (this.editingContent.trim()) {
+        if (this.editingIndex === this.localItems.length) {
+          // 如果是在最后一个空行添加，push新内容
+          this.localItems.push({ content: this.editingContent.trim() })
+        } else {
+          // 否则更新现有内容
+          this.localItems[this.editingIndex].content = this.editingContent.trim()
+        }
+        const addData = { data: this.editingContent.trim(), ID: this.ID }
+        // 触发更新事件
+        this.$emit('add', addData)
+      }
+      this.showEdit = false
+      this.editingIndex = -1
+      this.editingContent = ''
+    },
+    // 初始化数据
+    async initData (data, parameter) {
+      // 从配置中获取数据
+      const resData = await runLogic(data, parameter, 'af-his')
+      this.localItems = resData
+      return resData
+    },
+    // 处理右键菜单
+    handleContextMenu (index, id) {
+      // 如果是最后一个空行，不显示删除框
+      if (index === this.localItems.length) {
+        return
+      }
+      this.ID = id
+      this.deleteIndex = index
+      this.showDeleteModal = true
+    },
+    // 确认删除
+    handleDeleteConfirm () {
+      if (this.deleteIndex > -1) {
+        this.localItems.splice(this.deleteIndex, 1)
+        const deleteData = { data: [...this.localItems][this.deleteIndex], ID: this.ID }
+        this.$emit('deleteData', deleteData)
+        this.deleteIndex = -1
+      }
+      this.showDeleteModal = false
+    }
+  },
+  watch: {
+    queryParamsName: {
+      immediate: true,
+      handler (newVal) {
+        this.initData(newVal, this.parameter)
+      },
+      deep: true
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.text-card {
+  position: relative;
+  width: 100%;
+  .text-item {
+    padding: 8px 12px;
+    border-bottom: 1px solid #f0f0f0;
+    cursor: pointer;
+    transition: all 0.3s;
+    user-select: none;
+
+    &:hover {
+      background-color: #f5f5f5;
+    }
+
+    .text-content {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 1.5;
+
+      &.is-empty {
+        color: #5D5C5C;
+        font-weight: 400;
+      }
+    }
+  }
+  .edit-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.45);
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .edit-card {
+      background: white;
+      padding: 16px;
+      border-radius: 8px;
+      width: 90%;
+      max-width: 500px;
+      box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12);
+      .ant-input {
+        width: 100%;
+      }
+    }
+  }
+}
+</style>