vue2-client 1.15.92 → 1.15.93

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

@@ -0,0 +1,303 @@
+<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)"
+        @mouseenter="enableHoverOptions && handleMouseEnter(index)"
+        @mouseleave="enableHoverOptions && handleMouseLeave"
+        :class="{ 'hover-active': enableHoverOptions && hoveredIndex === index }"
+      >
+        <div
+          class="list-item-content"
+          :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)"
+            >
+              {{ name }}
+            </a-button>
+          </div>
+
+          <!-- 悬浮选项框 -->
+          <div
+            v-show="enableHoverOptions && hoveredIndex === index"
+            class="hover-options"
+            @mouseenter="handleOptionsEnter"
+            @mouseleave="handleOptionsLeave"
+          >
+            <div class="hover-options-content">
+              <a-button type="link" @click.stop="handleOptionClick(index, 'view')">查看</a-button>
+              <a-button type="link" @click.stop="handleOptionClick(index, 'edit')">编辑</a-button>
+              <a-button type="link" @click.stop="handleOptionClick(index, 'delete')">删除</a-button>
+            </div>
+          </div>
+        </div>
+      </a-list-item>
+    </a-list>
+  </div>
+</template>
+
+<script>
+
+import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
+
+export default {
+  name: 'XList',
+  props: {
+    queryParamsName: {
+      type: Object,
+      default: null
+    },
+    fixedQueryForm: {
+      type: Object,
+      default: { condition: '1=1' }
+    },
+    enableHoverOptions: {
+      type: Boolean,
+      default: true
+    }
+  },
+  inject: ['getComponentByName'],
+  data () {
+    return {
+      data: [],
+      button: false,
+      icon: false,
+      buttonNames: [],
+      buttonMode: false,
+      hoveredIndex: -1,
+      isOptionsHovered: false,
+      hoverTimer: null,
+      leaveTimer: null
+    }
+  },
+  created () {
+    this.getData(this.queryParamsName, this.fixedQueryForm)
+  },
+  methods: {
+    async getData (config, param) {
+      const that = this
+      getConfigByName(config, 'af-his', res => {
+        that.button = res.button
+        that.icon = res.icon
+        that.buttonNames = res.buttonNames || []
+        that.buttonMode = res.buttonMode || false
+        runLogic(res.data, param, 'af-his').then(ress => {
+          that.data = ress
+        })
+      })
+    },
+    handleClick (index) {
+      this.$emit('listClick', this.data[index])
+    },
+    refreshList (param) {
+      this.getData(this.queryParamsName, param)
+    },
+    click (index, buttonIndex) {
+      this.$emit('click', { data: this.data[index], name: this.buttonNames[buttonIndex] })
+    },
+    getIconStyle (item) {
+      return item.picture
+        ? { backgroundImage: `url(${item.picture})` }
+        : {}
+    },
+    filterData (par) {
+      runLogic(this.queryParamsName, par, 'af-his').then(res => {
+        this.data = res.data
+      })
+    },
+    handleMouseEnter (index) {
+      this.clearAllTimers()
+      this.hoveredIndex = index
+      this.isOptionsHovered = false
+    },
+    handleMouseLeave () {
+      this.clearAllTimers()
+      this.leaveTimer = setTimeout(() => {
+        if (!this.isOptionsHovered) {
+          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: {
+    fixedQueryForm: {
+      deep: true,
+      handler (val) {
+        this.refreshList(val)
+      }
+    }
+  },
+  beforeDestroy () {
+    this.clearAllTimers()
+  }
+}
+</script>
+
+<style scoped>
+.list-wrapper {
+  max-height: 240px;
+  overflow-y: auto;
+  padding-right: 2px;
+}
+
+.list-container {
+  width: 100%;
+}
+
+.list-item {
+  height: 35px;
+  border-radius: 6px;
+  background-color: #F4F4F4;
+  padding: 8px 15px;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border: 1px solid #D9D9D9;
+  box-sizing: border-box;
+  margin-bottom: 8px !important;
+  position: relative;
+}
+
+.icon-menu {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  background-color: #ccc;
+  margin-right: 8px;
+}
+
+.item-text {
+  flex: 1;
+}
+
+.confirm-btn {
+  margin-left: auto;
+  padding: 0 8px;
+}
+
+.confirm-btn.hover-btn {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.button-group {
+  display: flex;
+  gap: 2px; /* 按钮之间的间距 */
+}
+
+.list-item:hover .confirm-btn.hover-btn {
+  opacity: 1;
+}
+
+/* 自定义滚动条样式 */
+.list-wrapper::-webkit-scrollbar {
+  width: 6px;
+}
+
+.list-wrapper::-webkit-scrollbar-thumb {
+  background-color: #d9d9d9;
+  border-radius: 3px;
+}
+
+.list-wrapper::-webkit-scrollbar-track {
+  background-color: #f0f0f0;
+}
+
+.list-item-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  transition: background-color 0.3s ease;
+}
+
+.list-item-content.hover-active {
+  background-color: rgb(0, 87, 254) !important;
+  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: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+}
+
+.hover-options-content .ant-btn {
+  text-align: left;
+  padding: 4px 8px;
+  width: 100%;
+}
+
+.hover-options-content .ant-btn:hover {
+  background-color: #f5f5f5;
+}
+</style>

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

@@ -0,0 +1,303 @@
+<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)"
+        @mouseenter="enableHoverOptions && handleMouseEnter(index)"
+        @mouseleave="enableHoverOptions && handleMouseLeave"
+        :class="{ 'hover-active': enableHoverOptions && hoveredIndex === index }"
+      >
+        <div
+          class="list-item-content"
+          :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)"
+            >
+              {{ name }}
+            </a-button>
+          </div>
+
+          <!-- 悬浮选项框 -->
+          <div
+            v-show="enableHoverOptions && hoveredIndex === index"
+            class="hover-options"
+            @mouseenter="handleOptionsEnter"
+            @mouseleave="handleOptionsLeave"
+          >
+            <div class="hover-options-content">
+              <a-button type="link" @click.stop="handleOptionClick(index, 'view')">查看</a-button>
+              <a-button type="link" @click.stop="handleOptionClick(index, 'edit')">编辑</a-button>
+              <a-button type="link" @click.stop="handleOptionClick(index, 'delete')">删除</a-button>
+            </div>
+          </div>
+        </div>
+      </a-list-item>
+    </a-list>
+  </div>
+</template>
+
+<script>
+
+import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
+
+export default {
+  name: 'XList',
+  props: {
+    queryParamsName: {
+      type: Object,
+      default: null
+    },
+    fixedQueryForm: {
+      type: Object,
+      default: { condition: '1=1' }
+    },
+    enableHoverOptions: {
+      type: Boolean,
+      default: true
+    }
+  },
+  inject: ['getComponentByName'],
+  data () {
+    return {
+      data: [],
+      button: false,
+      icon: false,
+      buttonNames: [],
+      buttonMode: false,
+      hoveredIndex: -1,
+      isOptionsHovered: false,
+      hoverTimer: null,
+      leaveTimer: null
+    }
+  },
+  created () {
+    this.getData(this.queryParamsName, this.fixedQueryForm)
+  },
+  methods: {
+    async getData (config, param) {
+      const that = this
+      getConfigByName(config, 'af-his', res => {
+        that.button = res.button
+        that.icon = res.icon
+        that.buttonNames = res.buttonNames || []
+        that.buttonMode = res.buttonMode || false
+        runLogic(res.data, param, 'af-his').then(ress => {
+          that.data = ress
+        })
+      })
+    },
+    handleClick (index) {
+      this.$emit('listClick', this.data[index])
+    },
+    refreshList (param) {
+      this.getData(this.queryParamsName, param)
+    },
+    click (index, buttonIndex) {
+      this.$emit('click', { data: this.data[index], name: this.buttonNames[buttonIndex] })
+    },
+    getIconStyle (item) {
+      return item.picture
+        ? { backgroundImage: `url(${item.picture})` }
+        : {}
+    },
+    filterData (par) {
+      runLogic(this.queryParamsName, par, 'af-his').then(res => {
+        this.data = res.data
+      })
+    },
+    handleMouseEnter (index) {
+      this.clearAllTimers()
+      this.hoveredIndex = index
+      this.isOptionsHovered = false
+    },
+    handleMouseLeave () {
+      this.clearAllTimers()
+      this.leaveTimer = setTimeout(() => {
+        if (!this.isOptionsHovered) {
+          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: {
+    fixedQueryForm: {
+      deep: true,
+      handler (val) {
+        this.refreshList(val)
+      }
+    }
+  },
+  beforeDestroy () {
+    this.clearAllTimers()
+  }
+}
+</script>
+
+<style scoped>
+.list-wrapper {
+  max-height: 240px;
+  overflow-y: auto;
+  padding-right: 2px;
+}
+
+.list-container {
+  width: 100%;
+}
+
+.list-item {
+  height: 35px;
+  border-radius: 6px;
+  background-color: #F4F4F4;
+  padding: 8px 15px;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border: 1px solid #D9D9D9;
+  box-sizing: border-box;
+  margin-bottom: 8px !important;
+  position: relative;
+}
+
+.icon-menu {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  background-color: #ccc;
+  margin-right: 8px;
+}
+
+.item-text {
+  flex: 1;
+}
+
+.confirm-btn {
+  margin-left: auto;
+  padding: 0 8px;
+}
+
+.confirm-btn.hover-btn {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.button-group {
+  display: flex;
+  gap: 2px; /* 按钮之间的间距 */
+}
+
+.list-item:hover .confirm-btn.hover-btn {
+  opacity: 1;
+}
+
+/* 自定义滚动条样式 */
+.list-wrapper::-webkit-scrollbar {
+  width: 6px;
+}
+
+.list-wrapper::-webkit-scrollbar-thumb {
+  background-color: #d9d9d9;
+  border-radius: 3px;
+}
+
+.list-wrapper::-webkit-scrollbar-track {
+  background-color: #f0f0f0;
+}
+
+.list-item-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  transition: background-color 0.3s ease;
+}
+
+.list-item-content.hover-active {
+  background-color: rgb(0, 87, 254) !important;
+  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: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+}
+
+.hover-options-content .ant-btn {
+  text-align: left;
+  padding: 4px 8px;
+  width: 100%;
+}
+
+.hover-options-content .ant-btn:hover {
+  background-color: #f5f5f5;
+}
+</style>