vue2-client 1.18.44 → 1.18.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.18.44",
+  "version": "1.18.45",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",

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;
   }