vue2-client 1.8.229 → 1.8.231

package/package.json

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

package/public/index.html

@@ -15,7 +15,7 @@
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
-    <div id="popContainer" class="beauty-scroll" style="height: 100vh; overflow-y: auto">
+    <div id="popContainer" class="beauty-scroll" style="height: 100%; overflow-y: auto">
       <div id="app"></div>
     </div>
     <!-- require cdn assets js -->

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

@@ -0,0 +1,299 @@
+<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-${index}`"
+        :key="index"
+        v-for="(realDataItem, index) 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"
+            size="small"
+            :title="realDataItem.title">
+            <a-descriptions-item
+              v-for="(item, index) in realDataItem.column"
+              :key="index"
+              :label="item.key">
+              {{ formatText(item.value) }}
+            </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 lowcodeComponentMixin from '@vue2-client/utils/lowcode/lowcodeComponentMixin'
+import XAddNativeForm from '@vue2-client/base-client/components/common/XAddNativeForm/XAddNativeForm.vue'
+
+export default {
+  name: 'XDescriptionsGroup',
+  components: {
+    XAddNativeForm
+  },
+  mixins: [lowcodeComponentMixin],
+  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) => {
+                // 如果是数组形态
+                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>

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

@@ -0,0 +1,50 @@
+<script>
+import XDescriptionsGroup from '@vue2-client/base-client/components/common/XDescriptions/XDescriptionsGroup.vue'
+import { runLogic } from '@vue2-client/services/api/common'
+
+export default {
+  name: 'Demo',
+  components: { XDescriptionsGroup },
+  data () {
+    return {
+      visible: false,
+      userinfo: {
+        f_userinfo_code: '143400000003',
+        f_gasbrand: '测试表品牌'
+      }
+    }
+  },
+  methods: {
+    open () {
+      runLogic('querySingleUserDetail', {
+        f_userinfo_code: '143400000003'
+      }, 'af-revenue').then(res => {
+        this.userinfo = res
+        this.visible = true
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div>
+    <a-button @click="open">
+      展开详情
+    </a-button>
+    <a-drawer
+      title="描述列表详情"
+      placement="right"
+      width="65vw"
+      :body-style="{height:'92%'}"
+      :visible="visible"
+      @close="()=>{visible = false}"
+    >
+      <x-descriptions-group config-name="用户详情描述列表" :showLeftTab="true" :data="userinfo" service-name="af-revenue"/>
+    </a-drawer>
+  </div>
+</template>
+
+<style scoped lang="less">
+
+</style>

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

@@ -1,11 +1,11 @@
 <template>
   <div :class="groups.length ? 'XFormGroupClass' : ''">
     <a-empty v-if="loadingErr" description="配置走丢了"/>
-    <a-spin v-else tip="正在努力加载。。。" :spinning="spinning" wrapperClassName="heigth100">
-      <a-row :gutter="24" style="height:100%">
+    <a-spin v-else tip="正在努力加载..." :spinning="spinning" wrapperClassName="heigth100">
+      <a-row :gutter="24" style="height: 100%">
         <a-col :span="3" v-if="showLeftTab && groups.length">
-          <a-tabs tab-position="left" @change="scrollToGroup">
-            <template v-for="(item,index) in groups">
+          <a-tabs tab-position="left" v-model="activeTab" @change="scrollToGroup">
+            <template v-for="(item, index) in groups">
               <a-tab-pane
                 :tab="item.describe"
                 :key="index"
@@ -14,9 +14,9 @@
             </template>
           </a-tabs>
         </a-col>
-        <a-col :span="showLeftTab ? 21 : 24" class="formGroupContext">
+        <a-col :span="showLeftTab ? 21 : 24" class="formGroupContext" ref="formGroupContext">
           <div class="group-item" :ref="`group-${index}`" :key="index" v-for="(item, index) in groups">
-            <a-row :style="{marginTop: index === 0 ? '':'8px'}">
+            <a-row :style="{ marginTop: index === 0 ? '' : '8px' }">
               <a-col :span="5">
                 <span class="xFormGroupTitle">{{ item.describe }}</span>
               </a-col>
@@ -36,7 +36,6 @@
 
 <script>
 import XAddNativeForm from '@vue2-client/base-client/components/common/XAddNativeForm/XAddNativeForm.vue'
-import { parseConfig } from '@vue2-client/services/api/common'
 
 export default {
   name: 'XFormGroup',
@@ -58,14 +57,18 @@ export default {
       businessType: {},
       env: 'prod',
       spinning: true,
-      loadingErr: false
+      loadingErr: false,
+      activeTab: 0
     }
   },
   mounted () {
   },
-  props: {},
-  watch: {},
-  computed: {},
+  beforeDestroy () {
+    const formGroupContext = this.$refs.formGroupContext?.$el
+    if (formGroupContext && formGroupContext.removeEventListener) {
+      formGroupContext.removeEventListener('scroll', this.onScroll)
+    }
+  },
   methods: {
     setRef (refName, refValue) {
       if (!this.$refs[refName]) {
@@ -82,15 +85,21 @@ export default {
      * @param businessType 新增还是修改
      */
     init ({
-           groups,
-           modifyModelData = {},
-           serviceName = process.env.VUE_APP_SYSTEM_NAME,
-           env = 'prod',
-           showLeftTab = false,
-           businessType = '新增'
-         }) {
+            groups,
+            modifyModelData = {},
+            serviceName = process.env.VUE_APP_SYSTEM_NAME,
+            env = 'prod',
+            showLeftTab = false,
+            businessType = '新增'
+          }) {
       Object.assign(this, { groups, modifyModelData, serviceName, env, showLeftTab, businessType })
       this.initView()
+      this.$nextTick(() => {
+        const formGroupContext = this.$refs.formGroupContext?.$el
+        if (formGroupContext && formGroupContext.addEventListener) {
+          formGroupContext.addEventListener('scroll', this.onScroll)
+        }
+      })
     },
     // 初始化组件
     initView () {
@@ -108,7 +117,7 @@ export default {
     },
     getNativeFormRef (group) {
       return this.groups.map((item, index) => {
-        if (item.group === group) {
+        if (item.groupName === group) {
           return this.$refs[`nativeForm-${index}`][0]
         } else {
           return null
@@ -116,35 +125,34 @@ export default {
       }).filter(ref => ref !== null)
     },
     initData (index) {
+      // 定义当前表单配置
+      const res = this.groups[index]
       // 如果是插槽组件
-      // 不做解析配置处理
-      if (this.groups[index]?.formGroupType === 'slot') {
+      if (res?.formGroupType === 'slot') {
         // 组织插槽表单的结果
-        this.allFormData[this.groups[index].slotName] = {}
+        this.allFormData[res.slotName] = {}
         return
       }
       // 组织native表单存储的结果
-      this.allFormData[this.groups[index].group] = {}
-      parseConfig(this.groups[index], 'SIMPLE_FORM', this.serviceName, this.env === 'dev').then(res => {
-        this.formList.push(res)
-        let modifyModelData = {}
-        if (this.modifyModelData[res.groupName]) {
-          modifyModelData = { data: this.modifyModelData[res.groupName] }
-        }
-        const params = {
-          layout: res.xAddFormLayout,
-          formItems: res.formJson,
-          showSubmitBtn: false,
-          serviceName: this.serviceName,
-          modifyModelData: modifyModelData,
-          fixedAddForm: modifyModelData.data,
-          businessType: this.businessType,
-          ...res
-        }
-        params.showSubmitBtn = false
-        this.$nextTick(() => {
-          this.$refs[`nativeForm-${index}`][0].init(params)
-        })
+      this.allFormData[res.groupName] = {}
+      this.formList.push(res)
+      let modifyModelData = {}
+      if (this.modifyModelData[res.groupName]) {
+        modifyModelData = { data: this.modifyModelData[res.groupName] }
+      }
+      const params = {
+        layout: res.xAddFormLayout,
+        formItems: res.formJson,
+        showSubmitBtn: false,
+        serviceName: this.serviceName,
+        modifyModelData: modifyModelData,
+        fixedAddForm: modifyModelData.data,
+        businessType: this.businessType,
+        ...res
+      }
+      params.showSubmitBtn = false
+      this.$nextTick(() => {
+        this.$refs[`nativeForm-${index}`][0].init(params)
       })
     },
     scrollToGroup (index) {
@@ -153,9 +161,6 @@ export default {
         groupElement.scrollIntoView({ behavior: 'smooth' })
       }
     },
-    onClose () {
-      this.$emit('update:visible', false)
-    },
     // xfromitem 一路传递上来的事件
     emitFunc (func, data) {
       this.$emit('x-form-item-emit-func', func, data)
@@ -164,10 +169,10 @@ export default {
       let pass = true
       const promises = this.groups.map((item, index) => {
         const nativeFormRef = this.$refs[`nativeForm-${index}`] ? this.$refs[`nativeForm-${index}`][0] : undefined
-        if ((item.group || item.slotName) && nativeFormRef && typeof nativeFormRef.asyncSubmit === 'function') {
+        if ((item.groupName || item.slotName) && nativeFormRef && typeof nativeFormRef.asyncSubmit === 'function') {
           // 如果 ref 存在 asyncSubmit 方法，则调用 asyncSubmit 方法
           return nativeFormRef.asyncSubmit().then(res => {
-            this.allFormData[item.slotName || item.group] = res.realForm
+            this.allFormData[item.slotName || item.groupName] = res.realForm
           }).catch(_err => {
             pass = false
             this.scrollToGroup(index)
@@ -191,6 +196,22 @@ export default {
       } catch (error) {
         return Promise.reject(new Error('An unexpected error occurred'))
       }
+    },
+    onScroll () {
+      const formGroupContext = this.$refs.formGroupContext.$el
+      let groupItems = []
+      if (formGroupContext && formGroupContext.querySelectorAll) {
+        groupItems = formGroupContext.querySelectorAll('.group-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
     }
   }
 }

package/src/pages/Example/index.vue

@@ -1,12 +1,14 @@
 <template>
   <div id="test">
+    <!--  修改 import 路径展示不同的组件 Demo  -->
     <demo></demo>
   </div>
 </template>
 
 <script>
 import XReport from '@vue2-client/base-client/components/common/XReport'
-import Demo from '@vue2-client/base-client/components/common/XFormGroup/demo.vue'
+// import Demo from '@vue2-client/base-client/components/common/XFormGroup/demo.vue'
+import Demo from '@vue2-client/base-client/components/common/XDescriptions/demo.vue'
 
 export default {
   name: 'Example',

package/vue.config.js

@@ -44,8 +44,8 @@ module.exports = {
       //   changeOrigin: true
       // },
       '/api/af-revenue/logic/openapi/': {
-        // pathRewrite: { '^/api/af-revenue/logic/openapi/': '/logic/' },
-        target: revenue,
+        pathRewrite: { '^/api/af-revenue/logic/openapi/': '/logic/' },
+        target: 'http://127.0.0.1:9026',
         changeOrigin: true
       },
       '/api/af-revenue': {