vue2-client 1.18.44 → 1.18.46

package/src/base-client/components/common/ImagePreviewModal/demo.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="image-preview-demo">
+    <a-card title="ImagePreviewModal 图片预览组件示例">
+      <a-space direction="vertical" :size="24" style="width: 100%">
+        <!-- 基础用法 -->
+        <a-card title="基础用法" size="small">
+          <p class="demo-desc">点击图片或按钮打开预览模态框，支持缩放、旋转、拖拽和下载功能</p>
+          <a-space>
+            <img
+              :src="demoImages[0]"
+              alt="示例图片1"
+              class="thumbnail"
+              @click="openPreview(demoImages[0], '风景图片')"
+            />
+            <a-button type="primary" @click="openPreview(demoImages[0], '风景图片')">
+              <a-icon type="eye" />
+              预览图片
+            </a-button>
+          </a-space>
+        </a-card>
+
+        <!-- 多图片切换 -->
+        <a-card title="多图片预览" size="small">
+          <p class="demo-desc">点击不同图片进行预览</p>
+          <a-space>
+            <img
+              v-for="(img, index) in demoImages"
+              :key="index"
+              :src="img"
+              :alt="`示例图片${index + 1}`"
+              class="thumbnail"
+              @click="openPreview(img, `示例图片${index + 1}`)"
+            />
+          </a-space>
+        </a-card>
+
+        <!-- 功能说明 -->
+        <a-card title="功能说明" size="small">
+          <a-descriptions :column="1" bordered size="small">
+            <a-descriptions-item label="缩放">鼠标滚轮或点击工具栏 +/- 按钮，支持 10%-300% 缩放</a-descriptions-item>
+            <a-descriptions-item label="旋转">点击工具栏旋转按钮，每次旋转 90°</a-descriptions-item>
+            <a-descriptions-item label="拖拽">鼠标左键按住图片拖动</a-descriptions-item>
+            <a-descriptions-item label="下载">点击下载按钮保存图片到本地</a-descriptions-item>
+            <a-descriptions-item label="关闭">点击关闭按钮、遮罩层或按 ESC 键关闭</a-descriptions-item>
+          </a-descriptions>
+        </a-card>
+
+        <!-- API 文档 -->
+        <a-card title="API 属性" size="small">
+          <a-table :columns="apiColumns" :data-source="apiData" :pagination="false" size="small" />
+        </a-card>
+
+        <!-- 事件文档 -->
+        <a-card title="事件" size="small">
+          <a-table :columns="eventColumns" :data-source="eventData" :pagination="false" size="small" />
+        </a-card>
+      </a-space>
+    </a-card>
+
+    <!-- 图片预览组件 -->
+    <image-preview-modal
+      :visible="previewVisible"
+      :image-url="previewImage"
+      :image-name="previewImageName"
+      @close="previewVisible = false"
+    />
+  </div>
+</template>
+
+<script>
+import ImagePreviewModal from './ImagePreviewModal.vue'
+
+export default {
+  name: 'ImagePreviewModalDemo',
+  components: {
+    ImagePreviewModal
+  },
+  data() {
+    return {
+      // 预览状态
+      previewVisible: false,
+      previewImage: '',
+      previewImageName: '',
+      // 示例图片（使用占位图服务）
+      demoImages: [
+        'https://picsum.photos/800/600?random=1',
+        'https://picsum.photos/600/800?random=2',
+        'https://picsum.photos/800/800?random=3'
+      ],
+      // API 表格列
+      apiColumns: [
+        { title: '属性', dataIndex: 'prop', width: 150 },
+        { title: '说明', dataIndex: 'desc' },
+        { title: '类型', dataIndex: 'type', width: 100 },
+        { title: '默认值', dataIndex: 'default', width: 120 }
+      ],
+      // API 数据
+      apiData: [
+        { key: '1', prop: 'visible', desc: '是否显示预览模态框', type: 'Boolean', default: 'false' },
+        { key: '2', prop: 'imageUrl', desc: '图片URL地址', type: 'String', default: "''" },
+        {
+          key: '3',
+          prop: 'imageName',
+          desc: '图片名称（用于下载时的文件名）',
+          type: 'String',
+          default: "'preview_image'"
+        }
+      ],
+      // 事件表格列
+      eventColumns: [
+        { title: '事件名', dataIndex: 'event', width: 150 },
+        { title: '说明', dataIndex: 'desc' },
+        { title: '回调参数', dataIndex: 'params', width: 150 }
+      ],
+      // 事件数据
+      eventData: [{ key: '1', event: 'close', desc: '关闭模态框时触发', params: '-' }]
+    }
+  },
+  methods: {
+    // 打开预览
+    openPreview(url, name) {
+      this.previewImage = url
+      this.previewImageName = name
+      this.previewVisible = true
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.image-preview-demo {
+  padding: 24px;
+
+  .demo-desc {
+    color: #666;
+    margin-bottom: 16px;
+  }
+
+  .thumbnail {
+    width: 120px;
+    height: 90px;
+    object-fit: cover;
+    border-radius: 4px;
+    cursor: pointer;
+    border: 1px solid #d9d9d9;
+    transition: all 0.3s;
+
+    &:hover {
+      border-color: #1890ff;
+      box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
+    }
+  }
+}
+</style>

package/src/base-client/components/common/XDescriptions/XDescriptionsGroup.vue

@@ -4,12 +4,8 @@
     <template v-if="tabMode === 'left'">
       <a-col :span="4" v-if="realData.length">
         <a-tabs tab-position="left" v-model="activeTab" @change="scrollToGroup">
-          <template v-for="(item,index) in realData">
-            <a-tab-pane
-              :tab="item.title"
-              :key="index"
-              v-if="item.title">
-            </a-tab-pane>
+          <template v-for="(item, index) in realData">
+            <a-tab-pane :tab="item.title" :key="index" v-if="item.title"></a-tab-pane>
           </template>
         </a-tabs>
       </a-col>
@@ -18,45 +14,40 @@
           class="descriptions-item"
           :ref="`descriptions-item-${realDataIndex}`"
           :key="realDataIndex"
-          v-for="(realDataItem, realDataIndex) in realData">
+          v-for="(realDataItem, realDataIndex) in realData"
+        >
           <!-- 渲染所有分组内容 -->
           <template v-if="!loadError">
             <!-- 带有子的详情 -->
-            <template
-              v-if="realDataItem.title && groups[realDataIndex]?.type ==='array'"
-            >
+            <template v-if="realDataItem.title && groups[realDataIndex]?.type === 'array'">
               <div class="ant-descriptions-title">{{ realDataItem.title }}</div>
               <div class="descriptions-array-item">
                 <a-descriptions
-                  v-for="(arrayItem,arrayIndex) in realDataItem.column"
+                  v-for="(arrayItem, arrayIndex) in realDataItem.column"
                   :column="isMobile ? 1 : column"
                   size="small"
                   :key="arrayIndex"
-                  :title="arrayItem.title">
+                  :title="arrayItem.title"
+                >
                   <template v-for="(item, index) in arrayItem.column">
                     <!-- 大多数情况 循环下 空值省略不展示，todo 后期可能加配置处理 -->
-                    <a-descriptions-item
-                      :key="index"
-                      v-if="item.value"
-                      :label="item.key">
+                    <a-descriptions-item :key="index" v-if="item.value" :label="item.key">
                       {{ formatText(item.value) }}
                     </a-descriptions-item>
                   </template>
                 </a-descriptions>
               </div>
             </template>
-            <a-descriptions
-              v-else-if="realDataItem.title"
-              :column="isMobile ? 1 : column"
-              :title="realDataItem.title">
+            <a-descriptions v-else-if="realDataItem.title" :column="isMobile ? 1 : column" :title="realDataItem.title">
               <a-descriptions-item
                 v-for="(item, index) in realDataItem.column"
                 :key="index"
                 :span="item.span || 1"
-                v-if="shouldShowField(item, data)">
+                v-if="shouldShowField(item, data)"
+              >
                 <template #label>
                   {{ item.key }}
-                  <span v-if="isFieldRequired(item, data)" style="color: red;"> *</span>
+                  <span v-if="isFieldRequired(item, data)" style="color: red">*</span>
                 </template>
                 <span :style="getFieldStyle(item, data)">{{ formatFieldValue(item.value, item, data) || '--' }}</span>
               </a-descriptions-item>
@@ -70,27 +61,23 @@
     <template v-else-if="tabMode === 'top'">
       <a-col :span="24" v-if="realData.length">
         <a-tabs v-model="activeTab" size="small" :tabBarStyle="{ margin: 0, padding: '0 8px' }">
-          <a-tab-pane v-for="(item,index) in realData" :key="index" :tab="item.title">
+          <a-tab-pane v-for="(item, index) in realData" :key="index" :tab="item.title">
             <div class="tab-content-scroll">
               <!-- 只渲染当前激活的分组内容 -->
               <template v-if="!loadError && realData[activeTab]">
                 <!-- 带有子的详情 -->
-                <template
-                  v-if="realData[activeTab].title && groups[activeTab]?.type ==='array'"
-                >
+                <template v-if="realData[activeTab].title && groups[activeTab]?.type === 'array'">
                   <div class="ant-descriptions-title" v-if="tabMode !== 'top'">{{ realData[activeTab].title }}</div>
                   <div class="descriptions-array-item">
                     <a-descriptions
-                      v-for="(arrayItem,arrayIndex) in realData[activeTab].column"
+                      v-for="(arrayItem, arrayIndex) in realData[activeTab].column"
                       :column="isMobile ? 1 : column"
                       size="small"
                       :key="arrayIndex"
-                      :title="arrayItem.title">
+                      :title="arrayItem.title"
+                    >
                       <template v-for="(fieldItem, fieldIndex) in arrayItem.column">
-                        <a-descriptions-item
-                          :key="fieldIndex"
-                          v-if="fieldItem.value"
-                          :label="fieldItem.key">
+                        <a-descriptions-item :key="fieldIndex" v-if="fieldItem.value" :label="fieldItem.key">
                           {{ formatText(fieldItem.value) }}
                         </a-descriptions-item>
                       </template>
@@ -100,17 +87,21 @@
                 <a-descriptions
                   v-else-if="realData[activeTab].title"
                   :column="isMobile ? 1 : column"
-                  :title="tabMode === 'top' ? undefined : realData[activeTab].title">
+                  :title="tabMode === 'top' ? undefined : realData[activeTab].title"
+                >
                   <a-descriptions-item
                     v-for="(fieldItem, fieldIndex) in realData[activeTab].column"
                     :key="fieldIndex"
                     :span="fieldItem.span || 1"
-                    v-if="shouldShowField(fieldItem, data)">
+                    v-if="shouldShowField(fieldItem, data)"
+                  >
                     <template #label>
                       {{ fieldItem.key }}
-                      <span v-if="isFieldRequired(fieldItem, data)" style="color: red;"> *</span>
+                      <span v-if="isFieldRequired(fieldItem, data)" style="color: red">*</span>
                     </template>
-                    <span :style="getFieldStyle(fieldItem, fieldItem.value, data)">{{ formatFieldValue(fieldItem.value, fieldItem, data) || '--' }}</span>
+                    <span :style="getFieldStyle(fieldItem, fieldItem.value, data)">
+                      {{ formatFieldValue(fieldItem.value, fieldItem, data) || '--' }}
+                    </span>
                   </a-descriptions-item>
                 </a-descriptions>
               </template>
@@ -123,49 +114,42 @@
     <!-- none 模式：无 tab，直接展示所有内容 -->
     <template v-else>
       <a-col :span="24" class="descriptionsGroupContext">
-        <div
-          class="descriptions-item"
-          :key="realDataIndex"
-          v-for="(realDataItem, realDataIndex) in realData">
+        <div class="descriptions-item" :key="realDataIndex" v-for="(realDataItem, realDataIndex) in realData">
           <!-- 渲染所有分组内容 -->
           <template v-if="!loadError">
             <!-- 带有子的详情 -->
-            <template
-              v-if="realDataItem.title && groups[realDataIndex]?.type ==='array'"
-            >
+            <template v-if="realDataItem.title && groups[realDataIndex]?.type === 'array'">
               <div class="ant-descriptions-title">{{ realDataItem.title }}</div>
               <div class="descriptions-array-item">
                 <a-descriptions
-                  v-for="(arrayItem,arrayIndex) in realDataItem.column"
+                  v-for="(arrayItem, arrayIndex) in realDataItem.column"
                   :column="isMobile ? 1 : column"
                   size="small"
                   :key="arrayIndex"
-                  :title="arrayItem.title">
+                  :title="arrayItem.title"
+                >
                   <template v-for="(item, index) in arrayItem.column">
-                    <a-descriptions-item
-                      :key="index"
-                      v-if="item.value"
-                      :label="item.key">
+                    <a-descriptions-item :key="index" v-if="item.value" :label="item.key">
                       {{ formatText(item.value) }}
                     </a-descriptions-item>
                   </template>
                 </a-descriptions>
               </div>
             </template>
-            <a-descriptions
-              v-else-if="realDataItem.title"
-              :column="isMobile ? 1 : column"
-              :title="realDataItem.title">
+            <a-descriptions v-else-if="realDataItem.title" :column="isMobile ? 1 : column" :title="realDataItem.title">
               <a-descriptions-item
                 v-for="(item, index) in realDataItem.column"
                 :key="index"
                 :span="item.span || 1"
-                v-if="shouldShowField(item, data)">
+                v-if="shouldShowField(item, data)"
+              >
                 <template #label>
                   {{ item.key }}
-                  <span v-if="isFieldRequired(item, data)" style="color: red;"> *</span>
+                  <span v-if="isFieldRequired(item, data)" style="color: red">*</span>
                 </template>
-                <span :style="getFieldStyle(item, item.value, data)">{{ formatFieldValue(item.value, item, data) || '--' }}</span>
+                <span :style="getFieldStyle(item, item.value, data)">
+                  {{ formatFieldValue(item.value, item, data) || '--' }}
+                </span>
               </a-descriptions-item>
             </a-descriptions>
           </template>
@@ -175,7 +159,6 @@
   </a-row>
 </template>
 <script>
-
 import { mapState } from 'vuex'
 import { getRealKeyData } from '@vue2-client/utils/formatter'
 import { getConfigByName } from '@vue2-client/services/api/common'
@@ -203,20 +186,19 @@ export default {
     serviceName: {
       type: String,
       default: process.env.VUE_APP_SYSTEM_NAME
-    },
-      },
-  mounted () {
+    }
   },
-  beforeDestroy () {
+  mounted() {},
+  beforeDestroy() {
     const formGroupContext = this.$refs.formGroupContext?.$el
     if (formGroupContext && formGroupContext.removeEventListener) {
       formGroupContext.removeEventListener('scroll', this.onScroll)
     }
   },
-  created () {
+  created() {
     this.initConfig()
   },
-  data () {
+  data() {
     return {
       // 加载状态
       loading: false,
@@ -228,14 +210,14 @@ export default {
       // 从配置中获取的值
       column: 3, // 默认值
       getRealData: false, // 默认值
-      tabMode: 'left', // 默认值
+      tabMode: 'left' // 默认值
     }
   },
   computed: {
     ...mapState('setting', { isMobile: 'isMobile' })
   },
   methods: {
-    initConfig () {
+    initConfig() {
       this.loading = true
       if (this.configName) {
         this.getConfig()
@@ -253,14 +235,14 @@ export default {
         this.loadError = true
       }
     },
-    scrollToGroup (index) {
+    scrollToGroup(index) {
       const groupElement = this.$refs[`descriptions-item-${index}`][0]
       if (groupElement) {
         groupElement.scrollIntoView({ behavior: 'smooth' })
       }
     },
-    getConfig () {
-      getConfigByName(this.configName, this.serviceName, (res) => {
+    getConfig() {
+      getConfigByName(this.configName, this.serviceName, res => {
         if (res.groups) {
           // 从配置中获取 column、getRealData 和 tabMode
           this.column = res.column !== undefined ? res.column : 3
@@ -270,34 +252,38 @@ export default {
           // 解析分组配置
           const groups = this.parseGroupsConfig(res.groups)
           this.groups = groups
-          this.realData = groups.map(group => {
-            const dataItem = { title: group.name }
+          this.realData = groups
+            .map(group => {
+              const dataItem = { title: group.name }
 
-            if (group.type === 'array') {
-              // 处理数组类型数据
-              const arrayData = this.data[group.key] || []
-              dataItem.column = arrayData.map((item, index) => ({
-                title: `${group.name} ${index + 1}`,
-                column: group.fields.map(field => ({
+              if (group.type === 'array') {
+                // 处理数组类型数据
+                const arrayData = this.data[group.key] || []
+                dataItem.column = arrayData
+                  .map((item, index) => ({
+                    title: `${group.name} ${index + 1}`,
+                    column: group.fields.map(field => ({
+                      key: field.name,
+                      value: item[field.key]
+                    }))
+                  }))
+                  .filter(Boolean)
+              } else {
+                dataItem.column = group.fields.map(field => ({
                   key: field.name,
-                  value: item[field.key]
+                  value: this.getRealKeyData(this.data, field.key),
+                  span: field.span,
+                  // 存储字段函数配置
+                  showIf: field.showIf,
+                  styleFunc: field.styleFunc,
+                  formatFunc: field.formatFunc,
+                  requireFunc: field.requireFunc
                 }))
-              })).filter(Boolean)
-            } else {
-              dataItem.column = group.fields.map(field => ({
-                key: field.name,
-                value: this.getRealKeyData(this.data, field.key),
-                span: field.span,
-                // 存储字段函数配置
-                showIf: field.showIf,
-                styleFunc: field.styleFunc,
-                formatFunc: field.formatFunc,
-                requireFunc: field.requireFunc
-              }))
-            }
+              }
 
-            return dataItem.column.length > 0 ? dataItem : null
-          }).filter(Boolean)
+              return dataItem.column.length > 0 ? dataItem : null
+            })
+            .filter(Boolean)
         }
       })
     },
@@ -357,7 +343,7 @@ export default {
      *   ]
      * }]
      */
-    parseGroupsConfig (groupsConfig) {
+    parseGroupsConfig(groupsConfig) {
       // 如果已经是数组格式，直接返回
       if (Array.isArray(groupsConfig)) {
         return groupsConfig
@@ -394,11 +380,11 @@ export default {
       })
     },
     // 文字格式化
-    formatText (value) {
+    formatText(value) {
       return value ?? '--'
     },
     // 执行字段展示函数
-    shouldShowField (field, data) {
+    shouldShowField(field, data) {
       if (!field.showIf) return true
       try {
         return executeStrFunctionByContext(this, field.showIf, [data, field.key])
@@ -408,7 +394,7 @@ export default {
       }
     },
     // 获取字段样式
-    getFieldStyle (field, data) {
+    getFieldStyle(field, data) {
       if (!field.styleFunc) return {}
       try {
         return executeStrFunctionByContext(this, field.styleFunc, [data, field.key])
@@ -418,7 +404,7 @@ export default {
       }
     },
     // 格式化字段值
-    formatFieldValue (value, field, data) {
+    formatFieldValue(value, field, data) {
       if (!field.formatFunc) return value
       try {
         return executeStrFunctionByContext(this, field.formatFunc, [data, field.key])
@@ -428,7 +414,7 @@ export default {
       }
     },
     // 判断字段是否必填（显示红色星号）
-    isFieldRequired (field, data) {
+    isFieldRequired(field, data) {
       if (!field.requireFunc) return false
       try {
         return executeStrFunctionByContext(this, field.requireFunc, [data, field.key])
@@ -437,14 +423,14 @@ export default {
         return false
       }
     },
-    getRealKeyData (data, key) {
+    getRealKeyData(data, key) {
       if (this.getRealData) {
         return getRealKeyData(data)[key] || ''
       } else {
         return this.data[key] || ''
       }
     },
-    onScroll () {
+    onScroll() {
       // 只在 left 模式启用滚动联动
       if (this.tabMode !== 'left') return
 
@@ -466,17 +452,17 @@ export default {
   },
   watch: {
     content: {
-      handler () {
+      handler() {
         this.initConfig()
       }
     },
     configName: {
-      handler () {
+      handler() {
         this.initConfig()
       }
     },
     serviceName: {
-      handler () {
+      handler() {
         this.initConfig()
       }
     }
@@ -502,6 +488,16 @@ export default {
     font-weight: 400;
   }
 
+  // 移除最后一行的 padding-bottom
+  :deep(.ant-descriptions-view) {
+    .ant-descriptions-row:last-child {
+      > th,
+      > td {
+        padding-bottom: 0;
+      }
+    }
+  }
+
   .descriptions-item {
     margin-bottom: 8px;
   }