vue2-client 1.8.228 → 1.8.230

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.8.228",
+  "version": "1.8.230",
   "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/LowCodePageRender/editorPageRender.vue

@@ -376,7 +376,8 @@ export default {
             false,
             true
           )
-          runLogic(eachEvent.logicName, param, eachEvent.serviceName).then(logicCallBackFunction(this.componentsMap))
+          runLogic(eachEvent.logicName, param, eachEvent.serviceName)
+            .then(res => { logicCallBackFunction(this.componentsMap, res) })
         } else if (eachEvent.eventType === 'changeProps') {
           const targetConfig = lowcodeUtils.getComponentConfig(eachEvent.target, this.pageConfig.page)
           targetConfig.props[eachEvent.targetKey] = data

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

@@ -0,0 +1,269 @@
+<template>
+  <a-row id="XDescriptionGroup" :gutter="24">
+    <a-col :span="4" v-if="showLeftTab && realData.length">
+      <a-tabs tab-position="left" @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" 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
+    }
+  },
+  created () {
+    this.initConfig()
+  },
+  data () {
+    return {
+      // 加载状态
+      loading: false,
+      loadError: false,
+      realData: [],
+      // 获取到的配置组
+      groups: {}
+    }
+  },
+  computed: {
+    ...mapState('setting', { isMobile: 'isMobile' })
+  },
+  methods: {
+    initConfig () {
+      this.loading = true
+      if (this.configName) {
+        this.getConfig()
+      } 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)
+          console.log(this.realData)
+        } 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] || ''
+      }
+    }
+  },
+  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,40 +1,41 @@
 <template>
   <div :class="groups.length ? 'XFormGroupClass' : ''">
-    <a-empty v-if="groups.length === 0" description="配置走丢了"/>
-    <a-row :gutter="24" v-else 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-tab-pane
-              :tab="item.describe"
-              :key="index"
-              v-if="item.describe">
-            </a-tab-pane>
-          </template>
-        </a-tabs>
-      </a-col>
-      <a-col :span="showLeftTab ? 21 : 24" class="formGroupContext">
-        <div class="group-item" :ref="`group-${index}`" :key="index" v-for="(item, index) in groups">
-          <a-row :style="{marginTop: index === 0 ? '':'8px'}">
-            <a-col :span="5">
-              <span class="xFormGroupTitle">{{ item.describe }}</span>
-            </a-col>
-          </a-row>
-          <template v-if="item.formGroupType === 'slot'">
-            <slot :name="item.slotName" :data="allFormData" :index="index">
-              <a-empty :description="`[${item.describe}:${item.slotName}]插槽没有使用`"/>
-            </slot>
-          </template>
-          <x-add-native-form @x-form-item-emit-func="emitFunc" v-else :ref="`nativeForm-${index}`"/>
-        </div>
-      </a-col>
-    </a-row>
+    <a-empty v-if="loadingErr" description="配置走丢了"/>
+    <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-tab-pane
+                :tab="item.describe"
+                :key="index"
+                v-if="item.describe">
+              </a-tab-pane>
+            </template>
+          </a-tabs>
+        </a-col>
+        <a-col :span="showLeftTab ? 21 : 24" class="formGroupContext">
+          <div class="group-item" :ref="`group-${index}`" :key="index" v-for="(item, index) in groups">
+            <a-row :style="{marginTop: index === 0 ? '':'8px'}">
+              <a-col :span="5">
+                <span class="xFormGroupTitle">{{ item.describe }}</span>
+              </a-col>
+            </a-row>
+            <template v-if="item.formGroupType === 'slot'">
+              <slot :name="item.slotName" :data="allFormData" :index="index">
+                <a-empty :description="`[${item.describe}:${item.slotName}]插槽没有使用`"/>
+              </slot>
+            </template>
+            <x-add-native-form @x-form-item-emit-func="emitFunc" v-else :ref="`nativeForm-${index}`"/>
+          </div>
+        </a-col>
+      </a-row>
+    </a-spin>
   </div>
 </template>
 
 <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',
@@ -53,11 +54,13 @@ export default {
       showSubmitBtn: false,
       loading: false,
       allFormData: {},
+      businessType: {},
       env: 'prod',
+      spinning: true,
+      loadingErr: false
     }
   },
   mounted () {
-    this.initView()
   },
   props: {},
   watch: {},
@@ -75,26 +78,36 @@ export default {
      * @param serviceName 服务名
      * @param env 环境
      * @param showLeftTab 是否展示左侧索引页
+     * @param businessType 新增还是修改
      */
     init ({
            groups,
            modifyModelData = {},
            serviceName = process.env.VUE_APP_SYSTEM_NAME,
            env = 'prod',
-           showLeftTab = false
+           showLeftTab = false,
+           businessType = '新增'
          }) {
-      Object.assign(this, { groups, modifyModelData, serviceName, env, showLeftTab })
+      Object.assign(this, { groups, modifyModelData, serviceName, env, showLeftTab, businessType })
       this.initView()
     },
     // 初始化组件
     initView () {
+      this.spinning = true
+      const promises = []
       for (let i = 0; i < this.groups.length; i++) {
-        this.initData(i)
+        promises.push(this.initData(i))
       }
+      Promise.all(promises).then(() => {
+        this.spinning = false
+      }).catch(() => {
+        this.loadingErr = true
+        this.spinning = false
+      })
     },
     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
@@ -102,34 +115,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,
-          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) {
@@ -149,10 +162,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)
@@ -184,6 +197,14 @@ export default {
 .XFormGroupClass {
   height: 100%;
 
+  .heigth100 {
+    height: 100%;
+
+    :deep(.ant-spin-container) {
+      height: 100%;
+    }
+  }
+
   .xFormGroupTitle {
     font-size: 15px;
     font-weight: bold;

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/src/pages/lowCode/lowCodeEditor.vue

@@ -394,10 +394,11 @@
       @ok="() => { showLogicCallBackEditor = false}"
       @cancel="() => { showLogicCallBackEditor = false}"
       :visible="showLogicCallBackEditor">
-      <a-popover title="参数说明" style="margin-right: 5%">
+      <a-popover title="参数说明" style="margin-bottom: 5%">
         <template slot="content">
           <p>该方法有以下几个参数：</p>
           <p>componentsMap：所有组件注册的Map</p>
+          <p>responseData：后端的返回值</p>
         </template>
         <a-button type="primary">
           参数说明
@@ -427,7 +428,7 @@ import LowCodePageOrganization from '@vue2-client/base-client/components/common/
 // 函数编辑器显示的模板
 const JSEventFunctionTemplate = 'function(eventType, data, targetKey, sourceVM, targetVM) {\n  \n  return {\n    "eventType": eventType,\n    "data": data,\n    "targetKey": targetKey\n  }\n}'
 const LogicParamFunctionTemplate = 'function(componentData, data) {\n  \n  return {\n    \n  }\n}'
-const LogicCallBackFunctionTemplate = 'function(componentsMap) {\n  \n}'
+const LogicCallBackFunctionTemplate = 'function(componentsMap, responseData) {\n  \n}'
 
 export default {
   components: {
@@ -877,6 +878,7 @@ export default {
     // 事件编辑器中，事件类型改变
     handleEventEditorEventTypeChange (type) {
       this.eventEditorContent.eventType = type
+      this.logicParamTransferDataSource = []
       // 如果事件为运行Logic将组件加入穿梭框
       if (type === 'runLogic') {
         this.config.page.forEach(page => {
@@ -1136,6 +1138,124 @@ export default {
     this.supportedEventType = [...lowcodeComponentMixin.supportedEventType]
     // 深拷贝外侧传来的配置
     this.config = JSON.parse(JSON.stringify(this.originalConfig))
+    // this.config = {
+    //   page: [
+    //     {
+    //       id: 'KB',
+    //       type: 'page',
+    //       title: '111',
+    //       body: [
+    //         [
+    //           {
+    //             type: 'XFormTable',
+    //             span: 12,
+    //             id: 'XFormTable_BV6Nwk',
+    //             selected: false,
+    //             props: {
+    //               queryParamsName: '',
+    //               serviceName: ''
+    //             },
+    //             selfEvent: [
+    //               'action'
+    //             ]
+    //           },
+    //           {
+    //             type: 'XAddNativeForm',
+    //             span: 12,
+    //             id: 'XAddNativeForm_ekihTp',
+    //             selected: false,
+    //             props: {
+    //               configNameForLowCode: '',
+    //               systemNameForLowCode: ''
+    //             },
+    //             selfEvent: [
+    //               'onSubmit'
+    //             ]
+    //           }
+    //         ],
+    //         [
+    //           {
+    //             type: 'XTreeOne',
+    //             span: 12,
+    //             id: 'XTreeOne_szu7Al',
+    //             selected: false
+    //           },
+    //           {
+    //             type: 'XDescriptions',
+    //             span: 12,
+    //             id: 'XDescriptions_DTkbEg',
+    //             selected: false,
+    //             props: {
+    //               title: '111',
+    //               content: {
+    //                 c_f_user_phone: '2323',
+    //                 c_f_total_fee: 33356,
+    //                 c_f_address: '22',
+    //                 c_f_meterlen: 2,
+    //                 c_f_bank_card_number: '23',
+    //                 c_f_create_user: '超级管理员',
+    //                 c_f_customer: '23',
+    //                 c_f_balance: 33356,
+    //                 c_f_create_date: '2024-06-23 21:31:24',
+    //                 c_f_operator_date: '2024-06-23 21:31:24',
+    //                 c_f_total_times: 2,
+    //                 c_f_user_name: '23',
+    //                 c_f_comments: '323',
+    //                 c_id: 39,
+    //                 c_f_operatorid: '15',
+    //                 c_f_operator: '超级管理员',
+    //                 c_f_orgid: '9'
+    //               },
+    //               configName: 'Unit_Desc_Config',
+    //               serviceName: 'af-revenue',
+    //               getRealData: true
+    //             },
+    //             selfEvent: []
+    //           }
+    //         ]
+    //       ]
+    //     },
+    //     {
+    //       id: 'Fg',
+    //       type: 'page',
+    //       title: '22',
+    //       body: [
+    //         [
+    //           {
+    //             type: 'container',
+    //             span: 4,
+    //             id: 'container_ir2gR2',
+    //             selected: false
+    //           },
+    //           {
+    //             type: 'container',
+    //             span: 10,
+    //             id: 'container_xIRHGg'
+    //           },
+    //           {
+    //             type: 'container',
+    //             span: 10,
+    //             id: 'container_PT9n3Q'
+    //           }
+    //         ],
+    //         [
+    //           {
+    //             type: 'container',
+    //             span: 18,
+    //             id: 'container_q04vQr',
+    //             selected: false
+    //           },
+    //           {
+    //             type: 'container',
+    //             span: 6,
+    //             id: 'container_MKwNvz',
+    //             selected: false
+    //           }
+    //         ]
+    //       ]
+    //     }
+    //   ]
+    // }
     this.refreshOrganization()
   }
 }

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': {