vue2-client 1.18.11 → 1.18.13

package/src/base-client/components/common/XDescriptions/index.md

@@ -1,83 +1,83 @@
-# XDescriptions
-
-动态Descriptions控件，根据JSON配置动态生成Descriptions
-
-
-## 何时使用
-
-当需要一个动态生成的Descriptions时
-
-
-引用方式：
-
-```javascript
-import XDescriptions from '@vue2-client/base-client/components/XDescriptions/XDescriptions'
-
-export default {
-    components: {
-      XDescriptions
-    }
-}
-```
-
-
-
-## 代码演示
-
-```html
-<x-descriptions
-  title="设备属性"
-  :content="details.prop_json"
-  :queryParamsName="queryParamsName">
-</x-descriptions>
-```
-
-## API
-
-| 参数              | 说明          | 类型     | 默认值  |
-|-----------------|-------------|--------|------|
-| title           | 业务名称        | String | ''   |
-| content         | 业务内容        | String | ''   |
-| queryParamsName | 查询配置JSON文件名 | String | null |
-| serviceName     | 配置所属命名空间    | String | null |
-
-## 例子1
-----
-（基础使用）
-
-```vue
-<template>
-  <x-descriptions
-    title="设备属性"
-    :content="details.prop_json"
-    :configName="configName">
-  </x-descriptions>
-</template>
-
-<script>
-  import XDescriptions from '@vue2-client/base-client/components/XDescriptions/XDescriptions'
-
-  export default {
-    components: {
-      XDescriptions
-    },
-    data () {
-      return {
-        // 查询配置文件名
-        configName: 'logQueryParams',
-        details: {
-          prop_json: {
-              规格: 'G2.5'
-          }
-        }
-      }
-    },
-    created () {
-
-    },
-    methods: {
-
-    }
-  }
-</script>
-```
+# XDescriptions
+
+动态Descriptions控件，根据JSON配置动态生成Descriptions
+
+
+## 何时使用
+
+当需要一个动态生成的Descriptions时
+
+
+引用方式：
+
+```javascript
+import XDescriptions from '@vue2-client/base-client/components/XDescriptions/XDescriptions'
+
+export default {
+    components: {
+      XDescriptions
+    }
+}
+```
+
+
+
+## 代码演示
+
+```html
+<x-descriptions
+  title="设备属性"
+  :content="details.prop_json"
+  :queryParamsName="queryParamsName">
+</x-descriptions>
+```
+
+## API
+
+| 参数              | 说明          | 类型     | 默认值  |
+|-----------------|-------------|--------|------|
+| title           | 业务名称        | String | ''   |
+| content         | 业务内容        | String | ''   |
+| queryParamsName | 查询配置JSON文件名 | String | null |
+| serviceName     | 配置所属命名空间    | String | null |
+
+## 例子1
+----
+（基础使用）
+
+```vue
+<template>
+  <x-descriptions
+    title="设备属性"
+    :content="details.prop_json"
+    :configName="configName">
+  </x-descriptions>
+</template>
+
+<script>
+  import XDescriptions from '@vue2-client/base-client/components/XDescriptions/XDescriptions'
+
+  export default {
+    components: {
+      XDescriptions
+    },
+    data () {
+      return {
+        // 查询配置文件名
+        configName: 'logQueryParams',
+        details: {
+          prop_json: {
+              规格: 'G2.5'
+          }
+        }
+      }
+    },
+    created () {
+
+    },
+    methods: {
+
+    }
+  }
+</script>
+```

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

@@ -9,9 +9,9 @@
         layout="inline">
         <a-row :gutter="24" type="flex">
           <x-form-item
-            v-for="(item, index) in visibleItems"
+            v-for="item in visibleItems"
             :showLabel="!simpleMode"
-            :key="`${queryParamsName}-item-${index}`"
+            :key="`${queryParamsName}-item-${item._originalIndex}`"
             :attr="item.formItem"
             :form="form"
             :service-name="serviceName"
@@ -23,9 +23,9 @@
           />
           <x-form-item
             v-show="advanced"
-            v-for="(item, index) in hiddenItems"
+            v-for="item in hiddenItems"
             :showLabel="!simpleMode"
-            :key="`advanced-${queryParamsName}-item-${index}`"
+            :key="`${queryParamsName}-item-${item._originalIndex}`"
             :attr="item.formItem"
             :form="form"
             :service-name="serviceName"
@@ -42,10 +42,10 @@
               <template v-if="hiddenItems.length > 0">
                 <a @click="toggleAdvanced">
                   <span v-if="!advanced" style="display: inline-flex; align-items: center;">
-                    <a-icon type="eye" :style="iconStyle"></a-icon>&nbsp;更多条件
+                    <a-icon type="eye" :style="iconStyle" class="form-expand-icon"></a-icon>&nbsp;更多条件
                   </span>
                   <span v-else style="display: inline-flex; align-items: center;">
-                    <a-icon type="eye-invisible" :style="iconStyle"></a-icon>&nbsp;收起更多
+                    <a-icon type="eye-invisible" :style="iconStyle" class="form-expand-icon rotated"></a-icon>&nbsp;收起更多
                   </span>
                 </a>
                 <a-divider type="vertical"/>
@@ -159,11 +159,17 @@ export default {
     },
     // 显示的表单项
     visibleItems: function () {
-      return this.allFormItems.slice(0, this.visibleItemCount)
+      return this.allFormItems.slice(0, this.visibleItemCount).map((item, index) => ({
+        ...item,
+        _originalIndex: index
+      }))
     },
     // 隐藏的表单项（需要点击展开才显示）
     hiddenItems: function () {
-      return this.allFormItems.slice(this.visibleItemCount)
+      return this.allFormItems.slice(this.visibleItemCount).map((item, index) => ({
+        ...item,
+        _originalIndex: this.visibleItemCount + index
+      }))
     },
   },
   provide () {
@@ -176,10 +182,63 @@ export default {
     }
   },
   methods: {
+    // 根据flex值计算可见表单项数量
+    updateVisibleItemCount (flex) {
+      // flex值与显示数量的映射关系
+      const flexToCountMap = {
+        24: 2, // 小屏：1个/行，显示2个（2行）
+        12: 3, // 中屏：2个/行，显示3个（2行-1个）
+        8: 5, // 大屏：3个/行，显示5个（2行-1个）
+        6: 7, // 超大屏：4个/行，显示7个（2行-1个）
+        4: 11 // 超超大屏：6个/行，显示11个（2行-1个）
+      }
+
+      const newCount = flexToCountMap[flex] || 7
+      // 只有当数量真正变化时才更新，避免不必要的重新渲染
+      if (this.visibleItemCount !== newCount) {
+        this.visibleItemCount = newCount
+      }
+    },
+
+    // 递归查找第一个XFormCol实例
+    findFirstXFormCol (components = this.$children) {
+      for (const component of components) {
+        if (component.$options.name === 'XFormCol') {
+          return component
+        }
+        // 递归查找子组件
+        const found = this.findFirstXFormCol(component.$children)
+        if (found) return found
+      }
+      return null
+    },
+
+    // 设置flex监听
+    setupFlexWatcher () {
+      this.$nextTick(() => {
+        const firstXFormCol = this.findFirstXFormCol()
+        if (firstXFormCol) {
+          // 立即执行一次设置初始值
+          this.updateVisibleItemCount(firstXFormCol.computedFlex)
+
+          // 设置监听
+          this._flexWatcher = this.$watch(
+            () => firstXFormCol.computedFlex,
+            (newFlex) => {
+              this.updateVisibleItemCount(newFlex)
+            }
+          )
+        } else {
+          // 重试机制，直到找到XFormCol
+          setTimeout(() => this.setupFlexWatcher(), 100)
+        }
+      })
+    },
+
     init (params) {
       const {
         formItems, serviceName, getDataParams = {}, env = 'prod', simpleMode = false, funcData = {},
-        queryParamsName = 'localConfig', visibleItemCount = 7, defaultQueryForm = {}
+        queryParamsName = 'localConfig', defaultQueryForm = {}
       } = params
       this.mountedCount = 0
       this.queryParamsName = queryParamsName
@@ -188,7 +247,7 @@ export default {
       this.serviceName = serviceName
       this.env = env
       this.simpleMode = simpleMode
-      this.visibleItemCount = visibleItemCount
+      // visibleItemCount 现在由 flex 监听动态控制，不再需要手动设置
       const formData = {}
       for (let i = 0; i < this.realJsonData.length; i++) {
         const item = this.realJsonData[i]
@@ -412,7 +471,17 @@ export default {
     setForm (obj) {
       this.form = Object.assign(this.form, obj)
     },
-  }
+  },
+  mounted () {
+    console.log('XForm mounted, setting up flex watcher')
+    this.setupFlexWatcher()
+  },
+  beforeDestroy () {
+    // 清理watcher
+    if (this._flexWatcher) {
+      this._flexWatcher()
+    }
+  },
 }
 </script>
 <style lang="less" scoped>

package/src/base-client/components/common/XForm/index.md

@@ -1,178 +1,178 @@
-# XForm
-
-动态表单控件，根据JSON配置生成一个完整的动态表单
-
-
-## 何时使用
-
-当需要一个动态生成的表单时
-
-
-引用方式：
-
-```javascript
-import XForm from '@vue2-client/base-client/components/XForm/XForm'
-
-export default {
-    components: {
-      XForm
-    }
-}
-```
-
-
-
-## 代码演示
-
-```html
-<x-form
-  :json-data="json"
-  :isExports="true"
-  @onSubmit="onSubmit">
-</x-form>
-```
-
-## API
-
-| 参数        | 说明                       | 类型      | 默认值  |
-|-----------|--------------------------|---------|------|
-| jsonData  | JSON配置，根据[工具>查询配置生成]功能生成 | Object  | {}   |
-| isExports | 是否显示导出按钮                 | Boolean | true |
-| getDataParams | 调用logic获取数据源的追加参数 | Object | - |
-| @onSubmit | 表单的提交事件                  | event   | -    |
-
-## 例子1
-----
-（基础使用）
-
-```vue
-<template>
-  <x-form
-    v-if="loaded"
-    :json-data="formItemJson"
-    :isExports="false"
-    @onSubmit="onSubmit">
-  </x-form>
-</template>
-
-<script>
-  import XForm from '@vue2-client/base-client/components/XForm/XForm'
-
-  export default {
-    components: {
-      XForm
-    },
-    data () {
-      return {
-        // 加载查询参数JSON配置文件是否完成
-        loaded: false,
-        // 从查询参数JSON配置中得到的生成表单的JSON
-        formItemJson: undefined,
-        // 表单
-        form: {}
-      }
-    },
-    created () {
-      this.getQueryJson()
-    },
-    methods: {
-      // 加载查询参数JSON配置文件
-      getQueryJson () {
-        this.formItemJson = [
-          {
-            "name":"燃气公司",
-            "keyName":"orgList",
-            "model":"orgName",
-            "placeholder":"请选择",
-            "type":"select"
-          },
-          {
-            "name":"用户地址",
-            "model":"f_address",
-            "type":"input"
-          },
-          {
-            "name":"指令类型",
-            "keyName":"指令类型",
-            "model":"f_instruct_type",
-            "placeholder":"请选择",
-            "type":"select"
-          },
-          {
-            "name":"指令说明",
-            "model":"f_instruct_title",
-            "placeholder":"请输入指令说明",
-            "type":"input"
-          },
-          {
-            "name":"指令状态",
-            "keyName":"指令状态",
-            "model":"f_instruct_state",
-            "placeholder":"请选择",
-            "type":"select"
-          },
-          {
-            "name":"响应结果",
-            "model":"f_receive_state",
-            "placeholder":"请输入响应结果",
-            "type":"input"
-          },
-          {
-            "name":"生成时间",
-            "model":"f_instruct_date",
-            "type":"rangePicker"
-          },
-          {
-            "name":"操作人",
-            "model":"f_inputtor",
-            "placeholder":"请输入操作人员",
-            "type":"input"
-          }
-        ]
-        this.loaded = true
-      },
-      // 表单提交方法
-      onSubmit (res) {
-        // 如果通过校验
-        if (res.valid) {
-          // 表单赋值
-          this.form = res.form
-        } else {
-          return false
-        }
-      }
-    }
-  }
-</script>
-```
-
-注意事项
-----
-
-> 本组件已经实现了自适应布局，在不同分辨率下的设备均可得到基本理想的展示效果
->
-> 以上示例查询参数配置为后台生成后的结果，此处为了方便调试，所以直接写在了代码中，实际使用请通过发起请求获取查询参数配置，如下：
-```vue
-<script>
-  import { commonApi } from '@vue2-client/base-client/api/common'
-  import Vue from 'vue'
-
-  export default {
-    data () {
-      return {
-        // 查询配置文件名
-        queryParamsName: 'instructQueryParams'
-      }
-    },
-    methods: {
-      getConfig () {
-        Vue.resetpost(commonApi.getConfig, {str: this.queryParamsName}).then((res) => {
-          this.formItemJson = res.formJson
-          this.columnItemJson = res.columnJson
-          this.loaded = true
-        })
-      }
-    }
-  }
-</script>
-```
+# XForm
+
+动态表单控件，根据JSON配置生成一个完整的动态表单
+
+
+## 何时使用
+
+当需要一个动态生成的表单时
+
+
+引用方式：
+
+```javascript
+import XForm from '@vue2-client/base-client/components/XForm/XForm'
+
+export default {
+    components: {
+      XForm
+    }
+}
+```
+
+
+
+## 代码演示
+
+```html
+<x-form
+  :json-data="json"
+  :isExports="true"
+  @onSubmit="onSubmit">
+</x-form>
+```
+
+## API
+
+| 参数        | 说明                       | 类型      | 默认值  |
+|-----------|--------------------------|---------|------|
+| jsonData  | JSON配置，根据[工具>查询配置生成]功能生成 | Object  | {}   |
+| isExports | 是否显示导出按钮                 | Boolean | true |
+| getDataParams | 调用logic获取数据源的追加参数 | Object | - |
+| @onSubmit | 表单的提交事件                  | event   | -    |
+
+## 例子1
+----
+（基础使用）
+
+```vue
+<template>
+  <x-form
+    v-if="loaded"
+    :json-data="formItemJson"
+    :isExports="false"
+    @onSubmit="onSubmit">
+  </x-form>
+</template>
+
+<script>
+  import XForm from '@vue2-client/base-client/components/XForm/XForm'
+
+  export default {
+    components: {
+      XForm
+    },
+    data () {
+      return {
+        // 加载查询参数JSON配置文件是否完成
+        loaded: false,
+        // 从查询参数JSON配置中得到的生成表单的JSON
+        formItemJson: undefined,
+        // 表单
+        form: {}
+      }
+    },
+    created () {
+      this.getQueryJson()
+    },
+    methods: {
+      // 加载查询参数JSON配置文件
+      getQueryJson () {
+        this.formItemJson = [
+          {
+            "name":"燃气公司",
+            "keyName":"orgList",
+            "model":"orgName",
+            "placeholder":"请选择",
+            "type":"select"
+          },
+          {
+            "name":"用户地址",
+            "model":"f_address",
+            "type":"input"
+          },
+          {
+            "name":"指令类型",
+            "keyName":"指令类型",
+            "model":"f_instruct_type",
+            "placeholder":"请选择",
+            "type":"select"
+          },
+          {
+            "name":"指令说明",
+            "model":"f_instruct_title",
+            "placeholder":"请输入指令说明",
+            "type":"input"
+          },
+          {
+            "name":"指令状态",
+            "keyName":"指令状态",
+            "model":"f_instruct_state",
+            "placeholder":"请选择",
+            "type":"select"
+          },
+          {
+            "name":"响应结果",
+            "model":"f_receive_state",
+            "placeholder":"请输入响应结果",
+            "type":"input"
+          },
+          {
+            "name":"生成时间",
+            "model":"f_instruct_date",
+            "type":"rangePicker"
+          },
+          {
+            "name":"操作人",
+            "model":"f_inputtor",
+            "placeholder":"请输入操作人员",
+            "type":"input"
+          }
+        ]
+        this.loaded = true
+      },
+      // 表单提交方法
+      onSubmit (res) {
+        // 如果通过校验
+        if (res.valid) {
+          // 表单赋值
+          this.form = res.form
+        } else {
+          return false
+        }
+      }
+    }
+  }
+</script>
+```
+
+注意事项
+----
+
+> 本组件已经实现了自适应布局，在不同分辨率下的设备均可得到基本理想的展示效果
+>
+> 以上示例查询参数配置为后台生成后的结果，此处为了方便调试，所以直接写在了代码中，实际使用请通过发起请求获取查询参数配置，如下：
+```vue
+<script>
+  import { commonApi } from '@vue2-client/base-client/api/common'
+  import Vue from 'vue'
+
+  export default {
+    data () {
+      return {
+        // 查询配置文件名
+        queryParamsName: 'instructQueryParams'
+      }
+    },
+    methods: {
+      getConfig () {
+        Vue.resetpost(commonApi.getConfig, {str: this.queryParamsName}).then((res) => {
+          this.formItemJson = res.formJson
+          this.columnItemJson = res.columnJson
+          this.loaded = true
+        })
+      }
+    }
+  }
+</script>
+```