vue2-client 1.11.4 → 1.11.6-alpha

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

@@ -1,304 +1,314 @@
-<template>
-  <a-row id="XDescriptionGroup" :gutter="24">
-    <a-col :span="4" v-if="showLeftTab && 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>
-      </a-tabs>
-    </a-col>
-    <a-col :span="showLeftTab ? 20 : 24" ref="descriptionsGroupContext" class="descriptionsGroupContext">
-      <div
-        class="descriptions-item"
-        :ref="`descriptions-item-${realDataIndex}`"
-        :key="realDataIndex"
-        v-for="(realDataItem, realDataIndex) in realData">
-        <template v-if="!loadError">
-          <!--    带有子的详情      -->
-          <template
-            v-if="realDataItem.title && groups[realDataItem.title]?.type ==='array'"
-          >
-            <div class="ant-descriptions-title">{{ realDataItem.title }}</div>
-            <div class="descriptions-array-item">
-              <a-descriptions
-                v-for="(arrayItem,arrayIndex) in realDataItem.column"
-                :column="isMobile ? 1 : column"
-                size="small"
-                :key="arrayIndex"
-                :title="arrayItem.title">
-                {{ arrayItem }}
-                <template v-for="(item, index) in arrayItem.column">
-                  <!--    大多数情况 循环下 空值省略不展示，todo 后期可能加配置处理      -->
-                  <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-item
-              v-for="(item, index) in realDataItem.column"
-              :key="index"
-              :span="item.span || 1"
-              :label="item.key">
-              <nobr>{{ item.value || '--' }}</nobr>
-            </a-descriptions-item>
-          </a-descriptions>
-        </template>
-      </div>
-    </a-col>
-  </a-row>
-</template>
-<script>
-
-import { mapState } from 'vuex'
-import { getRealKeyData } from '@vue2-client/utils/formatter'
-import { getConfigByName } from '@vue2-client/services/api/common'
-import XAddNativeForm from '@vue2-client/base-client/components/common/XAddNativeForm/XAddNativeForm.vue'
-
-export default {
-  name: 'XDescriptionsGroup',
-  components: {
-    XAddNativeForm
-  },
-  props: {
-    // 内容
-    data: {
-      type: Object,
-      required: true,
-      default: undefined
-    },
-    // 展示列配置 格式 {title:[{key,name}]}  {描述列表标题:[{字段名,字段中文名}]}
-    // {
-    //   "groups": {
-    //     "表具信息": {
-    //       "f_gasbrand": "气表品牌"
-    //     },
-    //     "客户信息": {
-    //       "f_userinfo_code": "用户编号"
-    //     },
-    //     "设备信息":{
-    //       "type": "array",
-    //       "value": {
-    //       "f_devices_num": "设备数量",
-    //        "f_devices_type": "设备类型",
-    //        },
-    //       "key": "devices"
-    //     }
-    //   }
-    // }
-    configName: {
-      type: String,
-      required: true,
-      default: ''
-    },
-    // 配置所属命名空间
-    serviceName: {
-      type: String,
-      default: process.env.VUE_APP_SYSTEM_NAME
-    },
-    // 每列显示数量
-    column: {
-      type: Number,
-      default: 3
-    },
-    // 处理 key tuf_f_userinfo_id -> f_userinfo_id
-    getRealData: {
-      type: Boolean,
-      default: false
-    },
-    // 是否展示左侧tab
-    showLeftTab: {
-      type: Boolean,
-      default: false
-    }
-  },
-  mounted () {
-  },
-  beforeDestroy () {
-    const formGroupContext = this.$refs.formGroupContext?.$el
-    if (formGroupContext && formGroupContext.removeEventListener) {
-      formGroupContext.removeEventListener('scroll', this.onScroll)
-    }
-  },
-  created () {
-    this.initConfig()
-  },
-  data () {
-    return {
-      // 加载状态
-      loading: false,
-      loadError: false,
-      realData: [],
-      // 获取到的配置组
-      groups: {},
-      activeTab: 0
-    }
-  },
-  computed: {
-    ...mapState('setting', { isMobile: 'isMobile' })
-  },
-  methods: {
-    initConfig () {
-      this.loading = true
-      if (this.configName) {
-        this.getConfig()
-        this.$nextTick(() => {
-          const formGroupContext = this.$refs.descriptionsGroupContext?.$el
-          if (formGroupContext && formGroupContext.addEventListener) {
-            formGroupContext.addEventListener('scroll', this.onScroll)
-          }
-        })
-      } else {
-        this.loading = false
-        this.loadError = true
-      }
-    },
-    scrollToGroup (index) {
-      const groupElement = this.$refs[`descriptions-item-${index}`][0]
-      if (groupElement) {
-        groupElement.scrollIntoView({ behavior: 'smooth' })
-      }
-    },
-    getConfig () {
-      getConfigByName(this.configName, this.serviceName, (res) => {
-        if (res.groups) {
-          this.groups = res.groups
-          this.realData = Object.keys(res.groups).map((h) => {
-            const hObj = res.groups[h]
-            const dataItem = {}
-            dataItem.title = h
-            dataItem.column = []
-            if (hObj.type && hObj.type === 'array') {
-              // 从data 取出数组
-              const arrayData = this.data[hObj.key]
-              const arrayDataItem = arrayData.map((item, index) => {
-                const arrayItem = {
-                  title: `${h} ${index + 1}`,
-                  column: Object.keys(hObj.value).map((key) => {
-                    return {
-                      key: hObj.value[key],
-                      value: item[key]
-                    }
-                  })
-                }
-                // 如果所有 value 都是空的 return null todo 后期可能做成配置
-                const isAllNull = arrayItem.column.every((item) => {
-                  return item.value === null || item.value === ''
-                })
-                return isAllNull ? null : arrayItem
-              }).filter((item) => item)
-              if (arrayDataItem.length) {
-                dataItem.column = arrayDataItem
-                return dataItem
-              } else {
-                return null
-              }
-            } else {
-              const tempData = Object.keys(hObj).map((key) => {
-                // 如果 hObj[key] 是 jsonobject
-                if (typeof hObj[key] === 'object') {
-                  return { key: hObj[key].name, value: this.getRealKeyData(this.data, key), span: hObj[key].span || 1 }
-                }
-                // 如果是数组形态
-                return { key: hObj[key], value: this.getRealKeyData(this.data, key) }
-              })
-              // 如果所有 value 都是空的 return null todo 后期可能做成配置
-              const isAllNull = tempData.every((item) => {
-                return item.value === null || item.value === ''
-              })
-              if (isAllNull) {
-                return null
-              } else {
-                dataItem.column = tempData
-                return dataItem
-              }
-            }
-          }).filter((item) => item)
-        } else {
-          this.loading = false
-          this.loadError = true
-        }
-      })
-    },
-    // 文字格式化
-    formatText (value) {
-      return value || '--'
-    },
-    getRealKeyData (data, key) {
-      if (this.getRealData) {
-        return getRealKeyData(data)[key] || ''
-      } else {
-        return this.data[key] || ''
-      }
-    },
-    onScroll () {
-      const formGroupContext = this.$refs.descriptionsGroupContext.$el
-      let groupItems = []
-      if (formGroupContext && formGroupContext.querySelectorAll) {
-        groupItems = formGroupContext.querySelectorAll('.descriptions-item')
-      }
-      let activeIndex = this.activeTab
-
-      groupItems.forEach((item, index) => {
-        const rect = item.getBoundingClientRect()
-        if (rect.top <= 205 && rect.bottom > 200) {
-          activeIndex = index
-        }
-      })
-      this.activeTab = activeIndex
-    }
-  },
-  watch: {
-    content: {
-      handler () {
-        this.initConfig()
-      }
-    },
-    configName: {
-      handler () {
-        this.initConfig()
-      }
-    },
-    serviceName: {
-      handler () {
-        this.initConfig()
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-#XDescriptionGroup {
-  height: 100%;
-
-  :deep(.ant-descriptions-title) {
-    color: @primary-color;
-  }
-
-  .descriptions-item {
-    margin-bottom: 8px;
-  }
-
-  .descriptions-array-item {
-    padding-left: 1rem;
-  }
-
-  .descriptionsGroupContext {
-    height: 100%;
-    overflow-y: scroll;
-  }
-}
-</style>
+<template>
+  <a-row id="XDescriptionGroup" :gutter="24">
+    <a-col :span="4" v-if="showLeftTab && 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>
+      </a-tabs>
+    </a-col>
+    <a-col :span="showLeftTab ? 20 : 24" ref="descriptionsGroupContext" class="descriptionsGroupContext">
+      <div
+        class="descriptions-item"
+        :ref="`descriptions-item-${realDataIndex}`"
+        :key="realDataIndex"
+        v-for="(realDataItem, realDataIndex) in realData">
+        <template v-if="!loadError">
+          <!--    带有子的详情      -->
+          <template
+            v-if="realDataItem.title && groups[realDataItem.title]?.type ==='array'"
+          >
+            <div class="ant-descriptions-title">{{ realDataItem.title }}</div>
+            <div class="descriptions-array-item">
+              <a-descriptions
+                v-for="(arrayItem,arrayIndex) in realDataItem.column"
+                :column="isMobile ? 1 : column"
+                size="small"
+                :key="arrayIndex"
+                :title="arrayItem.title">
+                {{ arrayItem }}
+                <template v-for="(item, index) in arrayItem.column">
+                  <!--    大多数情况 循环下 空值省略不展示，todo 后期可能加配置处理      -->
+                  <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-item
+              v-for="(item, index) in realDataItem.column"
+              :key="index"
+              :span="item.span || 1"
+              :label="item.key">
+              <nobr>{{ item.value || '--' }}</nobr>
+            </a-descriptions-item>
+          </a-descriptions>
+        </template>
+      </div>
+    </a-col>
+  </a-row>
+</template>
+<script>
+
+import { mapState } from 'vuex'
+import { getRealKeyData } from '@vue2-client/utils/formatter'
+import { getConfigByName } from '@vue2-client/services/api/common'
+import XAddNativeForm from '@vue2-client/base-client/components/common/XAddNativeForm/XAddNativeForm.vue'
+
+export default {
+  name: 'XDescriptionsGroup',
+  components: {
+    XAddNativeForm
+  },
+  props: {
+    // 内容
+    data: {
+      type: Object,
+      required: true,
+      default: undefined
+    },
+    // 展示列配置 格式 {title:[{key,name}]}  {描述列表标题:[{字段名,字段中文名}]}
+    // {
+    //   "groups": {
+    //     "表具信息": {
+    //       "f_gasbrand": "气表品牌"
+    //     },
+    //     "客户信息": {
+    //       "f_userinfo_code": "用户编号"
+    //     },
+    //     "设备信息":{
+    //       "type": "array",
+    //       "value": {
+    //       "f_devices_num": "设备数量",
+    //        "f_devices_type": "设备类型",
+    //        },
+    //       "key": "devices"
+    //     }
+    //   }
+    // }
+    // 数据模式结构
+    // "groups": [{
+    //   "name": "客户信息",
+    //   "fields": [
+    //    {
+    //      "name": "备注",
+    //      "key": "f_comments",
+    //      "span": 3
+    //    },
+    //    {
+    //      "name": "地址",
+    //      "key": "f_address",
+    //      "span": 3
+    //    }]
+    // }]
+    configName: {
+      type: String,
+      required: true,
+      default: ''
+    },
+    // 配置所属命名空间
+    serviceName: {
+      type: String,
+      default: process.env.VUE_APP_SYSTEM_NAME
+    },
+    // 每列显示数量
+    column: {
+      type: Number,
+      default: 3
+    },
+    // 处理 key tuf_f_userinfo_id -> f_userinfo_id
+    getRealData: {
+      type: Boolean,
+      default: false
+    },
+    // 是否展示左侧tab
+    showLeftTab: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted () {
+  },
+  beforeDestroy () {
+    const formGroupContext = this.$refs.formGroupContext?.$el
+    if (formGroupContext && formGroupContext.removeEventListener) {
+      formGroupContext.removeEventListener('scroll', this.onScroll)
+    }
+  },
+  created () {
+    this.initConfig()
+  },
+  data () {
+    return {
+      // 加载状态
+      loading: false,
+      loadError: false,
+      realData: [],
+      // 获取到的配置组
+      groups: {},
+      activeTab: 0
+    }
+  },
+  computed: {
+    ...mapState('setting', { isMobile: 'isMobile' })
+  },
+  methods: {
+    initConfig () {
+      this.loading = true
+      if (this.configName) {
+        this.getConfig()
+        this.$nextTick(() => {
+          const formGroupContext = this.$refs.descriptionsGroupContext?.$el
+          if (formGroupContext && formGroupContext.addEventListener) {
+            formGroupContext.addEventListener('scroll', this.onScroll)
+          }
+        })
+      } else {
+        this.loading = false
+        this.loadError = true
+      }
+    },
+    scrollToGroup (index) {
+      const groupElement = this.$refs[`descriptions-item-${index}`][0]
+      if (groupElement) {
+        groupElement.scrollIntoView({ behavior: 'smooth' })
+      }
+    },
+    getConfig () {
+      getConfigByName(this.configName, this.serviceName, (res) => {
+        if (res.groups) {
+          const groups = Array.isArray(res.groups)
+            ? res.groups
+            : Object.entries(res.groups).map(([groupName, groupConfig]) => {
+              if (groupConfig.type === 'array') {
+                return {
+                  name: groupName,
+                  type: 'array',
+                  key: groupConfig.key,
+                  fields: Object.entries(groupConfig.value || {}).map(([k, v]) => ({
+                    key: k,
+                    name: v
+                  }))
+                }
+              }
+
+              // 处理普通旧格式配置
+              return {
+                name: groupName,
+                fields: Object.entries(groupConfig).map(([fieldKey, fieldValue]) => ({
+                  key: fieldKey,
+                  name: typeof fieldValue === 'string' ? fieldValue : fieldValue.name,
+                  ...(typeof fieldValue === 'object' ? fieldValue : {})
+                }))
+              }
+            })
+
+          this.groups = groups
+          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 => ({
+                  key: field.name,
+                  value: item[field.key]
+                }))
+              })).filter(Boolean)
+            } else {
+              dataItem.column = group.fields.map(field => ({
+                key: field.name,
+                value: this.getRealKeyData(this.data, field.key),
+                span: field.span
+              }))
+            }
+
+            return dataItem.column.length > 0 ? dataItem : null
+          }).filter(Boolean)
+        }
+      })
+    },
+    // 文字格式化
+    formatText (value) {
+      return value || '--'
+    },
+    getRealKeyData (data, key) {
+      if (this.getRealData) {
+        return getRealKeyData(data)[key] || ''
+      } else {
+        return this.data[key] || ''
+      }
+    },
+    onScroll () {
+      const formGroupContext = this.$refs.descriptionsGroupContext.$el
+      let groupItems = []
+      if (formGroupContext && formGroupContext.querySelectorAll) {
+        groupItems = formGroupContext.querySelectorAll('.descriptions-item')
+      }
+      let activeIndex = this.activeTab
+
+      groupItems.forEach((item, index) => {
+        const rect = item.getBoundingClientRect()
+        if (rect.top <= 205 && rect.bottom > 200) {
+          activeIndex = index
+        }
+      })
+      this.activeTab = activeIndex
+    }
+  },
+  watch: {
+    content: {
+      handler () {
+        this.initConfig()
+      }
+    },
+    configName: {
+      handler () {
+        this.initConfig()
+      }
+    },
+    serviceName: {
+      handler () {
+        this.initConfig()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+#XDescriptionGroup {
+  height: 100%;
+
+  :deep(.ant-descriptions-title) {
+    color: @primary-color;
+  }
+
+  .descriptions-item {
+    margin-bottom: 8px;
+  }
+
+  .descriptions-array-item {
+    padding-left: 1rem;
+  }
+
+  .descriptionsGroupContext {
+    height: 100%;
+    overflow-y: scroll;
+  }
+}
+</style>