vue2-client 1.16.21 → 1.16.22

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

@@ -1,283 +1,283 @@
-<template>
-  <div
-    class="drawer"
-    :class="{ 'drawer-collapsed': !isOpen }">
-    <div
-      v-show="!isFrameConfig"
-      class="drawer-toggle"
-      :class="{ 'toggle-collapsed': !isOpen }"
-      @click="toggleDrawer">
-      <div class="arrow">
-        {{ isOpen ? '›' : '‹' }}
-      </div>
-    </div>
-    <div class="drawer-content" v-show="isOpen">
-      <x-report
-        ref="x_report"
-        :configName="queryParamsName"
-        :server-name="serverName"
-        :show-img-in-cell="true"
-        :display-only="true"
-        :edit-mode="false"
-        :show-save-button="false"
-        :no-padding="true"
-        :dont-format="true">
-      </x-report>
-    </div>
-  </div>
-</template>
-
-<script>
-
-import XReport from '@vue2-client/base-client/components/common/XReportGrid'
-
-export default {
-  components: {
-    XReport
-  },
-  name: 'XSidebar',
-  props: {
-    // 配置参数
-    queryParamsName: {
-      type: String,
-      default: ''
-    },
-    serverName: {
-      type: String,
-      default: 'af-his'
-    },
-    // 是否允许该组件主动调整同级布局（默认不影响其它页面）
-    affectLayout: {
-      type: Boolean,
-      default: false
-    },
-    // 展开时所占宽度百分比（影响父级 ant-col 的 flex 与 max-width）
-    expandedWidthPercent: {
-      type: Number,
-      default: 33.3
-    },
-    // 收缩时所占宽度百分比
-    collapsedWidthPercent: {
-      type: Number,
-      default: 2
-    }
-  },
-  data () {
-    return {
-      isOpen: this.queryParamsName?.endsWith('Frame') || false,
-      // 定义主内容区域的最大和最小宽度百分比
-      mainWithData: [{ max: 80, min: 50 }]
-    }
-  },
-  mounted () {
-    // 在挂载后调整父元素宽度（方法内部已区分是否影响布局）
-    this.updateLayout(this.isOpen)
-    // 如果抽屉初始状态为打开，设置padding
-    if (this.isOpen) {
-      this.updateCardBodyPadding()
-    }
-  },
-  methods: {
-    toggleDrawer () {
-      this.isOpen = !this.isOpen
-      this.$emit('on-drawer-change', this.isOpen)
-      this.updateLayout(this.isOpen)
-      if (this.isOpen) {
-        this.$nextTick(() => {
-          this.updateCardBodyPadding()
-        })
-      }
-    },
-    // 更新card-body的padding
-    updateCardBodyPadding () {
-      this.$nextTick(() => {
-        const cardBody = this.$el.querySelector('.ant-card-body')
-        if (cardBody) {
-          cardBody.style.padding = '3%'
-        } else {
-          // 如果找不到元素，可能需要等待XReport完全渲染
-          setTimeout(() => {
-            const cardBody = this.$el.querySelector('.ant-card-body')
-            if (cardBody) {
-              cardBody.style.padding = '3%'
-            }
-          }, 500)
-        }
-      })
-    },
-    // 获取同级的其他所有a-col元素
-    getSiblingCols () {
-      try {
-        // 找到当前组件所在的a-col
-        let currentCol = this.$el.parentNode
-        while (currentCol && !currentCol.className.includes('ant-col')) {
-          currentCol = currentCol.parentNode
-        }
-        if (!currentCol) {
-          console.warn('当前组件不在a-col内')
-          return []
-        }
-        // 找到a-col的父元素(a-row)
-        const row = currentCol.parentNode
-        if (!row || !row.className.includes('ant-row')) {
-          console.warn('未找到父级a-row元素')
-          return []
-        }
-
-        // 修改这里：只获取直接子元素中的.ant-col-12
-        const allCols = Array.from(row.children).filter(child =>
-          child.className.includes('ant-col-12')
-        )
-
-        // 过滤掉当前a-col，返回其他所有a-col
-        return allCols.filter(col => col !== currentCol)
-      } catch (error) {
-        console.error('获取同级a-col时出错:', error)
-        return []
-      }
-    },
-    updateLayout (isOpen) {
-      this.$nextTick(() => {
-        try {
-          // 获取所有同级a-col（仅筛选出 .ant-col-12）
-          const otherCols = this.getSiblingCols()
-          if (otherCols.length > 0) {
-            let currentCol = this.$el.parentNode
-            while (currentCol && !currentCol.className.includes('ant-col')) {
-              currentCol = currentCol.parentNode
-            }
-            if (currentCol) {
-              // 触发XTab组件重新计算宽度
-              const triggerResize = () => {
-                this.$nextTick(() => {
-                  const tabComponent = this.$el.querySelector('.ant-tabs')
-                  if (tabComponent) {
-                    tabComponent.style.width = '100%'
-                    window.dispatchEvent(new Event('resize'))
-                  }
-                })
-              }
-
-              if (isOpen) {
-                // 展开：仅当显式允许时才改变布局百分比；否则恢复默认宽度
-                if (this.affectLayout) {
-                  const drawerWidth = (this.expandedWidthPercent || 33.3)
-                  currentCol.style.cssText = `
-                flex: 0 0 ${drawerWidth}% !important;
-                max-width: ${drawerWidth}% !important;
-                transition: all 0.3s;`
-                  if (otherCols.length === 1) {
-                    const mainCol = otherCols[0]
-                    const mainWidth = Math.max(0, 100 - drawerWidth)
-                    mainCol.style.cssText = `
-                    flex: 0 0 ${mainWidth}% !important;
-                    max-width: ${mainWidth}% !important;
-                    transition: all 0.3s;`
-                  }
-                } else {
-                  // 恢复默认（移除我们加的内联样式）
-                  currentCol.style.removeProperty('flex')
-                  currentCol.style.removeProperty('max-width')
-                  if (otherCols.length === 1) {
-                    const mainCol = otherCols[0]
-                    mainCol.style.removeProperty('flex')
-                    mainCol.style.removeProperty('max-width')
-                  }
-                }
-                triggerResize()
-              } else {
-                // 收缩：为了消除空白，始终把侧栏压到 24px，并让相邻主列占满剩余
-                currentCol.style.cssText = `
-              flex: 0 0 24px !important;
-              max-width: 24px !important;
-              transition: all 0.3s;`
-                if (otherCols.length === 1) {
-                  const mainCol = otherCols[0]
-                  mainCol.style.cssText = `
-                  flex: 1 1 auto !important;
-                  max-width: calc(100% - 24px) !important;
-                  transition: all 0.3s;`
-                }
-                triggerResize()
-              }
-            }
-          }
-        } catch (error) {
-          console.error('布局更新失败:', error)
-        }
-      })
-    }
-  },
-  watch: {
-    queryParamsName: {
-      immediate: true,
-      handler (newVal) {
-        if (newVal?.endsWith('Frame')) {
-          this.isOpen = true
-          // 确保布局更新
-          this.$nextTick(() => {
-            this.updateLayout(true)
-            this.updateCardBodyPadding()
-          })
-        }
-      }
-    }
-  },
-  computed: {
-    isFrameConfig () {
-      return this.queryParamsName?.endsWith('Frame') || false
-    }
-  }
-}
-</script>
-
-<style scoped>
-.drawer {
-  position: relative;
-  height: 88vh;
-  width: 100%;
-  background-color: #fff;
-  border-left: solid rgba(240, 242, 245) 2px;
-  transition: all 0.3s;
-  border-radius: 10px;
-}
-
-.drawer-collapsed {
-  width: 24px;
-  box-shadow: none;
-}
-.drawer-toggle {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 24px;
-  height: 48px;
-  cursor: pointer;
-  background-color: rgba(255, 255, 255, 0) !important;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  transition: all 0.3s;
-}
-/* 打开状态：箭头在抽屉内 */
-.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;
-}
-.arrow {
-  font-size: 20px;
-  line-height: 1;
-  color: #94979E;
-}
-.drawer-content {
-  height: 100%;
-}
-</style>
+<template>
+  <div
+    class="drawer"
+    :class="{ 'drawer-collapsed': !isOpen }">
+    <div
+      v-show="!isFrameConfig"
+      class="drawer-toggle"
+      :class="{ 'toggle-collapsed': !isOpen }"
+      @click="toggleDrawer">
+      <div class="arrow">
+        {{ isOpen ? '›' : '‹' }}
+      </div>
+    </div>
+    <div class="drawer-content" v-show="isOpen">
+      <x-report
+        ref="x_report"
+        :configName="queryParamsName"
+        :server-name="serverName"
+        :show-img-in-cell="true"
+        :display-only="true"
+        :edit-mode="false"
+        :show-save-button="false"
+        :no-padding="true"
+        :dont-format="true">
+      </x-report>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import XReport from '@vue2-client/base-client/components/common/XReportGrid'
+
+export default {
+  components: {
+    XReport
+  },
+  name: 'XSidebar',
+  props: {
+    // 配置参数
+    queryParamsName: {
+      type: String,
+      default: ''
+    },
+    serverName: {
+      type: String,
+      default: 'af-his'
+    },
+    // 是否允许该组件主动调整同级布局（默认不影响其它页面）
+    affectLayout: {
+      type: Boolean,
+      default: false
+    },
+    // 展开时所占宽度百分比（影响父级 ant-col 的 flex 与 max-width）
+    expandedWidthPercent: {
+      type: Number,
+      default: 33.3
+    },
+    // 收缩时所占宽度百分比
+    collapsedWidthPercent: {
+      type: Number,
+      default: 2
+    }
+  },
+  data () {
+    return {
+      isOpen: this.queryParamsName?.endsWith('Frame') || false,
+      // 定义主内容区域的最大和最小宽度百分比
+      mainWithData: [{ max: 80, min: 50 }]
+    }
+  },
+  mounted () {
+    // 在挂载后调整父元素宽度（方法内部已区分是否影响布局）
+    this.updateLayout(this.isOpen)
+    // 如果抽屉初始状态为打开，设置padding
+    if (this.isOpen) {
+      this.updateCardBodyPadding()
+    }
+  },
+  methods: {
+    toggleDrawer () {
+      this.isOpen = !this.isOpen
+      this.$emit('on-drawer-change', this.isOpen)
+      this.updateLayout(this.isOpen)
+      if (this.isOpen) {
+        this.$nextTick(() => {
+          this.updateCardBodyPadding()
+        })
+      }
+    },
+    // 更新card-body的padding
+    updateCardBodyPadding () {
+      this.$nextTick(() => {
+        const cardBody = this.$el.querySelector('.ant-card-body')
+        if (cardBody) {
+          cardBody.style.padding = '3%'
+        } else {
+          // 如果找不到元素，可能需要等待XReport完全渲染
+          setTimeout(() => {
+            const cardBody = this.$el.querySelector('.ant-card-body')
+            if (cardBody) {
+              cardBody.style.padding = '3%'
+            }
+          }, 500)
+        }
+      })
+    },
+    // 获取同级的其他所有a-col元素
+    getSiblingCols () {
+      try {
+        // 找到当前组件所在的a-col
+        let currentCol = this.$el.parentNode
+        while (currentCol && !currentCol.className.includes('ant-col')) {
+          currentCol = currentCol.parentNode
+        }
+        if (!currentCol) {
+          console.warn('当前组件不在a-col内')
+          return []
+        }
+        // 找到a-col的父元素(a-row)
+        const row = currentCol.parentNode
+        if (!row || !row.className.includes('ant-row')) {
+          console.warn('未找到父级a-row元素')
+          return []
+        }
+
+        // 修改这里：只获取直接子元素中的.ant-col-12
+        const allCols = Array.from(row.children).filter(child =>
+          child.className.includes('ant-col-12')
+        )
+
+        // 过滤掉当前a-col，返回其他所有a-col
+        return allCols.filter(col => col !== currentCol)
+      } catch (error) {
+        console.error('获取同级a-col时出错:', error)
+        return []
+      }
+    },
+    updateLayout (isOpen) {
+      this.$nextTick(() => {
+        try {
+          // 获取所有同级a-col（仅筛选出 .ant-col-12）
+          const otherCols = this.getSiblingCols()
+          if (otherCols.length > 0) {
+            let currentCol = this.$el.parentNode
+            while (currentCol && !currentCol.className.includes('ant-col')) {
+              currentCol = currentCol.parentNode
+            }
+            if (currentCol) {
+              // 触发XTab组件重新计算宽度
+              const triggerResize = () => {
+                this.$nextTick(() => {
+                  const tabComponent = this.$el.querySelector('.ant-tabs')
+                  if (tabComponent) {
+                    tabComponent.style.width = '100%'
+                    window.dispatchEvent(new Event('resize'))
+                  }
+                })
+              }
+
+              if (isOpen) {
+                // 展开：仅当显式允许时才改变布局百分比；否则恢复默认宽度
+                if (this.affectLayout) {
+                  const drawerWidth = (this.expandedWidthPercent || 33.3)
+                  currentCol.style.cssText = `
+                flex: 0 0 ${drawerWidth}% !important;
+                max-width: ${drawerWidth}% !important;
+                transition: all 0.3s;`
+                  if (otherCols.length === 1) {
+                    const mainCol = otherCols[0]
+                    const mainWidth = Math.max(0, 100 - drawerWidth)
+                    mainCol.style.cssText = `
+                    flex: 0 0 ${mainWidth}% !important;
+                    max-width: ${mainWidth}% !important;
+                    transition: all 0.3s;`
+                  }
+                } else {
+                  // 恢复默认（移除我们加的内联样式）
+                  currentCol.style.removeProperty('flex')
+                  currentCol.style.removeProperty('max-width')
+                  if (otherCols.length === 1) {
+                    const mainCol = otherCols[0]
+                    mainCol.style.removeProperty('flex')
+                    mainCol.style.removeProperty('max-width')
+                  }
+                }
+                triggerResize()
+              } else {
+                // 收缩：为了消除空白，始终把侧栏压到 24px，并让相邻主列占满剩余
+                currentCol.style.cssText = `
+              flex: 0 0 24px !important;
+              max-width: 24px !important;
+              transition: all 0.3s;`
+                if (otherCols.length === 1) {
+                  const mainCol = otherCols[0]
+                  mainCol.style.cssText = `
+                  flex: 1 1 auto !important;
+                  max-width: calc(100% - 24px) !important;
+                  transition: all 0.3s;`
+                }
+                triggerResize()
+              }
+            }
+          }
+        } catch (error) {
+          console.error('布局更新失败:', error)
+        }
+      })
+    }
+  },
+  watch: {
+    queryParamsName: {
+      immediate: true,
+      handler (newVal) {
+        if (newVal?.endsWith('Frame')) {
+          this.isOpen = true
+          // 确保布局更新
+          this.$nextTick(() => {
+            this.updateLayout(true)
+            this.updateCardBodyPadding()
+          })
+        }
+      }
+    }
+  },
+  computed: {
+    isFrameConfig () {
+      return this.queryParamsName?.endsWith('Frame') || false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer {
+  position: relative;
+  height: 88vh;
+  width: 100%;
+  background-color: #fff;
+  border-left: solid rgba(240, 242, 245) 2px;
+  transition: all 0.3s;
+  border-radius: 10px;
+}
+
+.drawer-collapsed {
+  width: 24px;
+  box-shadow: none;
+}
+.drawer-toggle {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 24px;
+  height: 48px;
+  cursor: pointer;
+  background-color: rgba(255, 255, 255, 0) !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  transition: all 0.3s;
+}
+/* 打开状态：箭头在抽屉内 */
+.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;
+}
+.arrow {
+  font-size: 20px;
+  line-height: 1;
+  color: #94979E;
+}
+.drawer-content {
+  height: 100%;
+}
+</style>