vue2-client 1.15.41 → 1.15.43

package/src/base-client/components/TreeList/TreeNode.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="tree-node">
+    <div class="node-content" @click="handleClick">
+      <span v-if="hasChildren" class="toggle-icon">
+        {{ node.expanded ? '-' : '+' }}
+      </span>
+      <span class="node-title">{{ node.title }}</span>
+    </div>
+    <div v-if="hasChildren && node.expanded" class="node-children">
+      <tree-node
+        v-for="child in node.children"
+        :key="child.id"
+        :node="child"
+        @toggle="$emit('toggle', $event)"
+        :level="level + 1"/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TreeNode',
+  props: {
+    node: {
+      type: Object,
+      required: true
+    },
+    level: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    hasChildren() {
+      return this.node.children && this.node.children.length > 0
+    }
+  },
+  methods: {
+    handleClick() {
+      if (this.hasChildren) {
+        this.$emit('toggle', this.node)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tree-node {
+  margin: 2px 0;
+}
+
+.node-content {
+  display: flex;
+  align-items: center;
+  padding: 4px 0;
+  user-select: none;
+}
+
+.toggle-icon {
+  width: 16px;
+  text-align: center;
+  font-size: 14px;
+  color: #666;
+  margin-right: 4px;
+  cursor: pointer;
+}
+
+.node-title {
+  flex: 1;
+  cursor: default;
+}
+
+.node-content:hover {
+  background-color: #f5f5f5;
+}
+
+.node-children {
+  padding-left: 20px;
+}
+</style> 

package/src/base-client/components/common/XButtons/XButtons.vue

@@ -19,22 +19,44 @@
 </template>
 
 <script>
+import { getConfigByName } from '@vue2-client/services/api/common'
+
 export default {
   name: 'XButtons',
   components: {},
-  props: {},
+  props: {
+    // 查询参数名
+    queryParamsName: {
+      type: String,
+      default: null
+    },
+    // 服务名
+    serviceName: {
+      type: String,
+      default: 'af-system'
+    }
+  },
   data () {
     return {
       // 组件加载状态
       loading: false,
       // 配置内容
-      renderConfig: undefined
+      renderConfig: undefined,
     }
   },
   methods: {
     /**
      * 初始化按钮组参数
      */
+    initData (parameter) {
+      // 按钮组需要主动调用初始化方法
+      getConfigByName(parameter, this.serviceName, (res) => {
+        this.init({
+          ...res,
+          serviceName: this.serviceName,
+        })
+      }, this.env === 'dev')
+    },
     init (params) {
       const {
         // 配置内容
@@ -61,6 +83,15 @@ export default {
         callback()
       }, 200)
     }
+  },
+  watch: {
+    queryParamsName: {
+      immediate: true,
+      handler (newVal) {
+        this.initData(newVal)
+      },
+      deep: true
+    }
   }
 }
 </script>

package/src/base-client/components/common/XCardSet/XTiltle.vue

@@ -0,0 +1,191 @@
+<template>
+  <a-row
+    class="title_box"
+    :style="{backgroundColor: requiredParameters.backgroundColor,height:requiredParameters.height}"
+    type="flex"
+    v-model="requiredParameters">
+    <a-col class="title_col_left" :flex="3">
+      <div class="title_img_box">
+        <img src="../img/header10086.png" class="title_img" alt="">
+      </div>
+      <div class="title_name">{{ requiredParameters.title }}</div>
+    </a-col>
+    <a-col class="title_col_right" id="titleSelect" :flex="3" style="padding-right: 3%" v-model="dateData">
+      <div class="title_date_box">
+        <div class="title_data">{{ dateData.date }}</div>
+        <div class="title_week">{{ dateData.dayOfWeek }}</div>
+      </div>
+      <div class="title_time">{{ dateData.time }}</div>
+      <div style="font-size: x-large;margin-left: 1%">|</div>
+      <div class="title_refresh" @click="refreshTitle"><a-icon type="undo" style="font-size: x-large;"/></div>
+      <div class="title_refresh_box">
+        <div class="title_refresh_time">{{ dateData.refreshTime }}</div>
+        <div class="latest_update_time">最新更新时间</div>
+      </div>
+    </a-col>
+  </a-row>
+</template>
+
+<script>
+
+export default {
+  name: 'TitleComponent',
+  components: {},
+  data () {
+    return {
+      dateData: {
+        date: '',
+        dayOfWeek: '',
+        time: '',
+        refreshTime: ''
+      },
+      timer: null
+    }
+  },
+  props: {
+    requiredParameters: {
+      type: Object,
+      default: () => ({
+        title: '',
+        backgroundColor: '',
+        height: ''
+      }),
+    }
+  },
+  created () {
+    this.updateDateData()
+    this.startTimer()
+  },
+  beforeDestroy () {
+    this.stopTimer()
+  },
+  methods: {
+    // 刷新页面
+    refreshTitle () {
+      this.$forceUpdate()
+      const now = new Date()
+      this.dateData.refreshTime = now.toLocaleTimeString()
+      this.$emit('refreshTitle')
+    },
+    updateDateData () {
+      const now = new Date()
+      const options = { weekday: 'long' }
+      this.dateData.date = this.formatDate(now)
+      this.dateData.time = this.formatTime(now)
+      this.dateData.dayOfWeek = now.toLocaleDateString(undefined, options)
+      this.dateData.refreshTime = now.toLocaleTimeString()
+    },
+    formatDate (date) {
+      const month = date.getMonth() + 1
+      const day = date.getDate()
+      return `${month}月${day}日`
+    },
+    formatTime (date) {
+      const hours = String(date.getHours()).padStart(2, '0')
+      const minutes = String(date.getMinutes()).padStart(2, '0')
+      return `${hours}:${minutes}`
+    },
+    startTimer () {
+      this.timer = setInterval(() => {
+        const now = new Date()
+        this.dateData.time = this.formatTime(now)
+      }, 10000) // 每秒更新一次
+    },
+    stopTimer () {
+      if (this.timer) {
+        clearInterval(this.timer)
+        this.timer = null
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.title_box {
+  width: 100%;
+  min-height:42px;
+}
+.title_col_left {
+  height: 100%;
+  color: white;
+  display: flex;
+  align-content: center;
+  align-items: center;
+}
+.title_col_right {
+  height: 100%;
+  color: white;
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: flex-end;
+}
+.title_img_box {
+  height: 80%;
+  width: auto;
+  margin-left: 1%;
+  border-radius: 50%;
+  background-color: #35baf6;
+}
+.title_img{
+  width: 100%;
+  height: 100%;
+}
+.title_name {
+  font-size: medium !important;
+  font-weight: bold;
+  margin-left: 1%;
+}
+.title_date_box{
+  width: 20%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.title_data{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: smaller;
+}
+.title_week{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: smaller;
+}
+.title_time{
+  font-size: x-large;
+}
+.title_refresh{
+  margin-left: 1%;
+  height: 100%;
+  align-content: center;
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  width: 7%;
+  justify-content: center;
+  min-width: 31px;
+}
+.title_refresh:hover{
+  background-color: rgb(31, 138, 137);
+}
+.title_refresh:active{
+  background-color: rgb(26, 129, 128);
+}
+.title_refresh_box{
+  margin-right: 1%;
+}
+.latest_update_time{
+  font-size: x-small;
+}
+.title_refresh_time{
+  display: flex;
+  font-size: x-small;
+  align-content: center;
+  justify-content: center;
+}
+</style>

package/src/base-client/components/common/XReportGrid/XReportTrGroup.vue

@@ -311,14 +311,6 @@ export default {
               showLeftTab: true,
             })
           }, this.env === 'dev')
-        } else if (cell.slotType === 'x-buttons') {
-          // 按钮组需要主动调用初始化方法
-          getConfigByName(cell.slotConfig, cell.serviceName, (res) => {
-            this.$refs[`dynamicComponent_${cell.slotRef || cellIndex}`][0].init({
-              ...res,
-              serviceName: cell.serviceName,
-            })
-          }, this.env === 'dev')
         } else if (cell.slotType === 'x-label-select') {
           // 按钮组需要主动调用初始化方法
           getConfigByName(cell.slotConfig, cell.serviceName, (res) => {

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

@@ -1,20 +1,74 @@
 <template>
-  <div class="list-wrapper">
+  <!-- 列表卡片模式 listMode: card -->
+  <div v-if="true"
+    class="demo-infinite-container"
+    ref="listRef">
+    <a-list :grid="{ gutter: 16, xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 4 }"
+      :data-source="localData">
+      <a-list-item slot="renderItem" slot-scope="item, index">
+        <div style="background-color: #E5E9F0; height: 297px; width: auto; border-radius: 6px;">
+          <a-row class="card-row">
+            <a-col class="id-a-col" :span="4" v-for="(detail,idx) in item" :key="idx" v-if="detail.label == label">
+              {{detail.value}}<span style="font-size: 16px;font-weight: 400 !important;">床</span>
+            </a-col>
+            <a-col :span="20" class="id-a-col-2">
+              <template v-for="(detail,idx) in item">
+                <span class="describe-list-a-col" :class="{name: detail.bold}" :key="idx" v-if="detail.type == 'title'">{{detail.value}}</span>
+                <span :key="idx" class="component-a-col" v-else-if="detail.type == 'component' && detail.label != label">
+                  {{`${detail.label}：`}}
+                  <component
+                    :is="detail.slotType"
+                    :key="idx"
+                    :ref="`dynamicComponent_${ idx.slotType || idx}_${idx}`"
+                    :serviceName="serviceName"
+                    v-on="forwardAllEvents"
+                    :queryParamsName="detail.value"
+                    :countVisible="false"
+                  />
+                </span>
+                <span :key="idx" class="component-a-col" v-else-if="detail.type == 'date'">
+                  {{`${detail.label}：`}}
+                  <a-date-picker @change="onChange" />
+                </span>
+                <span class="describe-list-a-col" :class="{name: detail.bold}" :key="idx" v-else-if="detail.label != label">{{`${detail.label}：${detail.value}`}}</span>
+              </template>
+              <a-button v-for="(btn, i) in buttonNames"
+                        :key="i"
+                        icon="search"
+                        v-if="1"
+                        class="button-a-col"
+                        @click.stop="click(item, index)">
+                {{btn}}
+              </a-button>
+            </a-col>
+          </a-row>
+        </div>
+      </a-list-item>
+      <div v-if="loading" class="demo-loading-container">
+        <a-spin />
+      </div>
+      <div v-if="allLoaded">
+        <div class="demo-infinite-list-bottom">
+          已经显示全部数据
+        </div>
+      </div>
+    </a-list>
+  </div>
+
+  <!-- 默认标签模式 -->
+  <div class="list-wrapper" v-else>
     <a-list size="large" :data-source="data" itemLayout="horizontal" class="list-container" ref="listRef">
-      <a-list-item
-        slot="renderItem"
+      <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="{ 'hover-active': enableHoverOptions && hoveredIndex === index }">
+        <i v-if="icon"
           class="icon-menu"
-          :style="getIconStyle(item)"
-        ></i>
+          :style="getIconStyle(item)">
+        </i>
         <span
           class="item-text">
           {{ item.number }} {{ item.name }}
@@ -26,26 +80,21 @@
             :key="idx"
             type="link"
             :class="['confirm-btn', buttonMode ? 'hover-btn' : '']"
-            @click.stop="click(index, idx)"
-          >
+            @click.stop="click(index, idx)">
             <span :class="{ 'hover-active': enableHoverOptions && hoveredIndex === index }">{{ name }}</span>
           </a-button>
         </div>
 
         <!-- 悬浮选项框 -->
-        <div
-          v-show="enableHoverOptions && hoveredIndex === index"
+        <div v-show="enableHoverOptions && hoveredIndex === index"
           class="hover-options"
           @mouseenter="handleOptionsEnter"
-          @mouseleave="handleOptionsLeave"
-        >
+          @mouseleave="handleOptionsLeave">
           <div class="hover-options-content">
-            <div
-              v-for="(item, idx) in select_options"
+            <div v-for="(item, idx) in select_options"
               :key="idx"
               class="option-item"
-              @click="handleOptionClick(index, item)"
-            >
+              @click="handleOptionClick(index, item)">
               {{ item }}
             </div>
           </div>
@@ -58,9 +107,21 @@
 <script>
 
 import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
+import Upload from '@/base-client/components/common/Upload'
 
 export default {
   name: 'XList',
+  components: {
+    Upload,
+    XReport: () => import('@vue2-client/base-client/components/common/XReport/XReport.vue'),
+    XButtons: () => import('@vue2-client/base-client/components/common/XButtons/XButtons.vue'),
+    XInput: () => import('@vue2-client/base-client/components/common/XInput/XInput.vue'),
+    XRadio: () => import('@vue2-client/base-client/components/his/XRadio/XRadio.vue'),
+    XTimeSelect: () => import('@vue2-client/base-client/components/his/XTimeSelect/XTimeSelect.vue'),
+    XCheckbox: () => import('@vue2-client/base-client/components/his/XCheckbox/XCheckbox.vue'),
+    XTitle: () => import('@vue2-client/base-client/components/his/XTitle/XTitle.vue'),
+    XSelect: () => import('@vue2-client/base-client/components/his/XSelect/XSelect.vue')
+  },
   props: {
     queryParamsName: {
       type: Object,
@@ -73,43 +134,108 @@ export default {
     enableHoverOptions: {
       type: Boolean,
       default: true
+    },
+    serviceName: {
+      type: String,
+      default: 'af-his'
     }
   },
   inject: ['getComponentByName'],
   data () {
     return {
-      data: [],
+      data: [], // 数据源
+      localData: [], // 本地数据源
+      loading: false, // 加载中
+      busy: false, // 繁忙状态
       button: false,
       icon: false,
       buttonNames: [],
-      buttonMode: false,
-      hoveredIndex: -1,
-      isOptionsHovered: false,
-      hoverTimer: null,
-      leaveTimer: null,
-      select_options: []
+      listMode: undefined, // 列表模式
+      buttonMode: true,
+      hoveredIndex: -1, // 当前悬浮的索引
+      isOptionsHovered: false, // 悬浮选项框是否悬浮
+      hoverTimer: null, // 悬浮选项框定时器
+      leaveTimer: null, // 离开选项框定时器
+      select_options: [], // 悬浮选项框
+      logicName: '',
+      nowPage: 0, // 当前页
+      pageSize: 14,
+      allLoaded: false,
+      label: 'id'
     }
   },
   created () {
     this.getData(this.queryParamsName, this.fixedQueryForm)
   },
+  mounted () {
+    // 卡片模式绑定滚动事件
+    this.$refs.listRef.addEventListener('scroll', this.handleInfiniteOnLoad)
+  },
+  computed: {
+    forwardAllEvents () {
+      return {
+        // 监听所有事件并转发给父组件
+        '*': (eventName, ...payload) => {
+          this.$emit(eventName, ...payload)
+        }
+      }
+    }
+  },
   methods: {
+    onChange (date, dateString) {
+      this.$emit('dateChange', date, dateString)
+    },
+    handleInfiniteOnLoad (event) {
+      const container = event.target // 获取列表容器元素
+      const scrollTop = container.scrollTop // 获取滚动条的当前位置
+      const scrollHeight = container.scrollHeight // 获取列表容器的总高度
+      const clientHeight = container.clientHeight // 获取列表容器的可见高度
+      const bottomOffset = 20
+      // 判断是否滚动到底部
+      if (scrollTop + clientHeight >= scrollHeight - bottomOffset) {
+        if (this.busy || this.allLoaded) return // 防止重复加载
+        this.busy = true
+        this.loading = true
+        try {
+          this.nowPage = this.nowPage + this.pageSize
+          this.fixedQueryForm.condition = `Limit ${this.nowPage}, ${this.pageSize}`
+          runLogic(this.logicName, this.fixedQueryForm, 'af-his').then(async (res) => {
+            this.localData = [...this.localData, ...res]
+            // 如果返回的数据长度小于每页的记录数，则认为已经加载完所有数据
+            if (res.length < this.pageSize) {
+              this.allLoaded = true
+            }
+          })
+        } catch (e) {
+          this.$message.error(e.message)
+        } finally {
+          this.loading = false
+          this.busy = false
+        }
+      }
+    },
     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
-        this.enableHoverOptions = res.enableHoverOptions || false
+      getConfigByName(config, 'af-his', async (res) => {
+        that.listMode = await res.listMode == 'card'
+        that.logicName = await res.data
+        that.button = await res.button // 按钮
+        that.icon = await res.icon //  图标
+        that.label = await res.label // 标签
+        that.buttonNames = await res.buttonNames || []// 按钮文本
+        that.buttonMode = await res.buttonMode || false// 按钮模式
+        this.enableHoverOptions = await res.enableHoverOptions || false// 悬浮选项框
         if (this.enableHoverOptions) {
-          this.select_options = res.select_options
+          this.select_options = await res.select_options
         }
-        runLogic(res.data, param, 'af-his').then(ress => {
-          that.data = ress
+        if (that.listMode) { param.condition = `Limit ${that.nowPage}, ${that.pageSize}` }
+        runLogic(res.data, param, 'af-his').then(result => {
+          that.data = result
+          if (that.nowPage == 0) { this.localData = result }
         })
       })
     },
+    // 点击列表项
     handleClick (index) {
       this.$emit('listClick', this.data[index])
     },
@@ -129,11 +255,13 @@ export default {
         this.data = res.data
       })
     },
+    // 鼠标进入列表项
     handleMouseEnter (index) {
       this.clearAllTimers()
       this.hoveredIndex = index
       this.isOptionsHovered = true
     },
+    // 鼠标离开列表项
     handleMouseLeave () {
       this.clearAllTimers()
       this.leaveTimer = setTimeout(() => {
@@ -141,10 +269,12 @@ export default {
         this.hoveredIndex = -1
       }, 100)
     },
+    // 鼠标进入悬浮选项框
     handleOptionsEnter () {
       this.clearAllTimers()
       this.isOptionsHovered = true
     },
+    // 鼠标离开悬浮选项框
     handleOptionsLeave () {
       this.clearAllTimers()
       this.leaveTimer = setTimeout(() => {
@@ -152,6 +282,7 @@ export default {
         this.hoveredIndex = -1
       }, 100)
     },
+    // 清除所有定时器
     clearAllTimers () {
       if (this.hoverTimer) {
         clearTimeout(this.hoverTimer)
@@ -162,6 +293,7 @@ export default {
         this.leaveTimer = null
       }
     },
+    // 选项框点击
     handleOptionClick (index, action) {
       this.$emit('optionClick', { data: this.data[index], action })
     }
@@ -303,4 +435,48 @@ export default {
 .option-item:active {
   background-color: #e6f7ff;
 }
+
+.demo-loading-container {
+  position: absolute;
+  bottom: 40px;
+  width: 100%;
+  text-align: center;
+}
+
+.demo-infinite-container{
+  overflow-x: hidden;
+  overflow-y: auto;
+  height: 80vh;
+}
+.card-row{
+  height: 100%;
+  width: 100%;
+  border-radius: 6px;
+  padding: 6px;
+}
+.id-a-col{
+  font-size: 22px;
+  font-weight: 700;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+.id-a-col-2{}
+.describe-list-a-col{
+  display: block;
+  font-size: 16px;
+}
+.name{
+  font-size: 18px;
+  font-weight: 700;
+}
+.component-a-col{
+  display: flex;
+  align-items: center;
+}
+.button-a-col{
+  position: absolute;
+  top: 245px;
+  left: 225px;
+}
 </style>