vue2-client 1.18.23 → 1.18.25

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

@@ -8,10 +8,71 @@ export default {
     return {
       visible: false,
       userinfo: {
-        f_userinfo_code: '143400000003',
-        f_gasbrand: '测试表品牌',
-        f_address: '11'
-      }
+        f_userinfo_id: '1003',
+        f_user_id: 'U20230003',
+        f_userfiles_id: 'F20230003',
+        f_userinfo_code: '2023001236',
+        f_user_name: '王五',
+        f_name_pinyin: 'WW',
+        f_user_type: '商业用户',
+        f_balance: -250.0,
+        f_project_money: 0,
+        f_gas_type: '',
+        f_sys_balance: 0,
+        f_idnumber: '610104197801011234',
+        f_user_phone: '13500135000',
+        f_rent_phone: '',
+        f_user_state: '欠费',
+        f_comments: '欠费待催缴',
+        f_address: '陕西省西安市碑林区南关正街88号1层商铺',
+        f_open_date: '2015-09-20 14:00:00',
+        f_install_date: '2015-09-25 10:30:00',
+        f_people_num: 0,
+        f_user_level: 'C级',
+        f_olduserinfo_code: 'OLD2010001236',
+        f_contract_id: 'HT2015092000136',
+
+        f_customer: '',
+        f_meter_type: '机表',
+        f_meter_brand: '威星智能',
+        f_meter_style: 'WX-G10',
+        f_calculation: '',
+        f_collection_type: '',
+        f_table_state: '正常',
+        f_balance_amount: 0,
+        f_balance_gas: 0,
+        f_jval: 0,
+        f_arrears_fee: 250.0,
+        f_initial_base: 0,
+        f_meter_base: 15680.5,
+        f_times: 0,
+        f_iot_times: 0,
+        f_total_fee: 0,
+        f_total_fee_all: 0,
+        f_deduction_gas: 50.5,
+        f_total_gas_all: 0,
+        f_total_gas: 0,
+        f_write_totalfee: 0,
+        f_meternumber: 'WX2015090012345',
+        f_card_id: '',
+        f_hascard: '否',
+        f_metertitles: 'BF2015001236',
+        f_gasproperties: '商业用气',
+        f_price_name: '商业用气价格',
+        f_remanent_money: 150.0,
+        f_remanent_gas: 0,
+        f_aroundmeter: '南向',
+        f_book_name: '碑林区商业册',
+        f_book_code: 'BL-SY-01',
+        f_meter_book_sort: '45',
+        f_position: '门面房',
+        f_gas_person: '赵师傅',
+        f_gas_date: '2015-09-25 11:00:00',
+        f_inputtor: '孙抄表',
+        f_hand_date: '2024-01-10 09:00:00',
+        f_input_date: '2015-09-20 14:00:00',
+        comments: '商业用户，需要定期催缴',
+      },
     }
   },
   methods: {
@@ -22,30 +83,56 @@ export default {
       //   this.userinfo = res
       //   this.visible = true
       // })
-       this.visible = true
-    }
-  }
+      this.visible = true
+    },
+  },
 }
 </script>
 
 <template>
   <div>
-    <a-button @click="open">
-      展开详情
-    </a-button>
+    <a-space style="margin-bottom: 16px">
+      <a-button @click="open"> 弹出式展示 </a-button>
+    </a-space>
+
+    <!-- 卡片展示 -->
+    <a-card
+      title="卡片展示"
+      style="width: 230px"
+      size="small"
+      :bodyStyle="{
+        padding: '0',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+      }"
+    >
+      <x-descriptions-group
+        config-name="ChargeCenterUserDetailConfig"
+        :data="userinfo"
+        service-name="af-revenue"
+      />
+    </a-card>
+
+    <!-- 弹出式展示 -->
     <a-drawer
-      title="描述列表详情"
+      title="弹出式展示"
       placement="right"
       width="65vw"
-      :body-style="{height:'92%'}"
       :visible="visible"
-      @close="()=>{visible = false}"
+      @close="
+        () => {
+          visible = false;
+        }
+      "
     >
-      <x-descriptions-group config-name="测试Config" :showLeftTab="true" :data="userinfo" service-name="af-system"/>
+      <x-descriptions-group
+        config-name="ChargeCenterUserDetailConfig"
+        :data="userinfo"
+        service-name="af-revenue"
+      />
     </a-drawer>
   </div>
 </template>
 
-<style scoped lang="less">
-
-</style>
+<style scoped lang="less"></style>

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

@@ -1,3 +1,3 @@
-import XDescriptions from './XDescriptions.vue'
-
-export default XDescriptions
+import XDescriptions from './XDescriptions.vue'
+
+export default XDescriptions

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

@@ -1,83 +1,322 @@
-# 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>
-```
+# XDescriptionsGroup
+
+动态Descriptions分组控件，根据JSON配置动态生成Descriptions，支持多种字段函数控制显示、样式和格式化。
+
+## 何时使用
+
+当需要一个动态生成的、支持条件显示、自定义样式和数据格式化的Descriptions时
+
+## 引用方式
+
+```javascript
+import XDescriptionsGroup from '@vue2-client/base-client/components/common/XDescriptions/XDescriptionsGroup'
+
+export default {
+    components: {
+      XDescriptionsGroup
+    }
+}
+```
+
+## API
+
+| 参数              | 说明          | 类型     | 默认值  |
+|-----------------|-------------|--------|------|
+| data           | 业务数据        | Object | {}   |
+| configName     | 配置文件名      | String | ''   |
+| serviceName     | 配置所属命名空间    | String | process.env.VUE_APP_SYSTEM_NAME |
+
+## 配置格式
+
+### 配置结构
+
+```javascript
+[
+  {
+    "name": "分组名称",
+    "type": "normal",     // 分组类型：normal/array（可选，默认normal）
+    "key": "dataKey",     // 数据key（数组类型时必需）
+    "fields": [
+      {
+        "key": "字段key",
+        "name": "字段显示名称",
+        "span": 2,          // 列宽（可选，默认1）
+        "showIf": "(data, field) => ...",     // 条件显示函数（可选）
+        "styleFunc": "(value, data, field) => ...", // 样式函数（可选）
+        "formatFunc": "(value, data, field) => ...", // 格式化函数（可选）
+        "requireFunc": "(data, field) => ..." // 必填标记函数（可选）
+      }
+    ]
+  }
+]
+```
+
+### 全局配置说明
+
+#### column - 列数控制
+
+- **作用**: 控制每行显示的列数
+- **类型**: `Number`
+- **默认值**: `3`
+- **示例**: `"column": 2` 表示每行显示 2 列
+
+#### getRealData - 数据处理方式
+
+- **作用**: 是否使用 `getRealKeyData` 方法处理数据
+- **类型**: `Boolean`
+- **默认值**: `false`
+- **示例**: `"getRealData": true` 启用数据处理
+
+#### tabMode - 显示模式
+
+- **作用**: 控制组件的显示模式
+- **类型**: `String`
+- **可选值**: `'left' | 'top' | 'none'`
+- **默认值**: `'left'`
+- **示例**: `"tabMode": "top"` 使用顶部横向导航
+
+### 分组类型说明
+
+#### normal - 普通分组（默认）
+
+```javascript
+[
+  {
+    "name": "基本信息",
+    "type": "normal",
+    "fields": [
+      {
+        "key": "f_name",
+        "name": "设备名称"
+      }
+    ]
+  }
+]
+```
+
+#### array - 数组分组
+
+用于处理数组类型数据，会为每个数组项生成一个子描述：
+
+```javascript
+[
+  {
+    "name": "设备列表",
+    "type": "array",
+    "key": "devices",
+    "fields": [
+      {
+        "key": "f_name",
+        "name": "设备名称"
+      },
+      {
+        "key": "f_status",
+        "name": "设备状态"
+      }
+    ]
+  }
+]
+```
+
+### 字段属性说明
+
+#### span - 列宽控制
+
+- **作用**: 控制字段占用的列数
+- **类型**: `Number`
+- **默认值**: `1`
+- **示例**: `"span": 2` 表示该字段占用 2 列宽度
+
+### 字段函数说明
+
+#### 1. showIf - 条件显示函数
+
+- **作用**: 控制字段是否显示
+- **参数**: `(data, field)`
+- **返回值**: `boolean`
+- **示例**: `"showIf": "(data, field) => data.amount > 1000"`
+
+#### 2. styleFunc - 样式函数
+
+- **作用**: 设置字段内容的样式
+- **参数**: `(value, data, field)`
+- **返回值**: `Object` 样式对象，如 `{color: 'red'}`
+- **示例**: `"styleFunc": "(value, data, field) => ({ color: value > 0 ? 'green' : 'red' })"`
+
+#### 3. formatFunc - 格式化函数
+
+- **作用**: 自定义字段值的显示格式
+- **参数**: `(value, data, field)`
+- **返回值**: `String` 格式化后的字符串
+- **示例**: `"formatFunc": "(value, data, field) => '￥' + value.toLocaleString()"`
+
+#### 4. requireFunc - 必填标记函数
+
+- **作用**: 在字段标题后显示红色星号
+- **参数**: `(data, field)`
+- **返回值**: `boolean`
+- **示例**: `"requireFunc": "(data, field) => data.type === 'important'"`
+
+## 完整配置示例
+
+### 普通分组配置示例
+
+```javascript
+// 配置文件：deviceInfo.json
+[
+  {
+    "name": "基本信息",
+    "fields": [
+      {
+        "key": "f_name",
+        "name": "设备名称",
+        "span": 2,
+        "requireFunc": "true"
+      },
+      {
+        "key": "f_status",
+        "name": "状态",
+        "showIf": "(data, field) => data.f_status",
+        "styleFunc": "(value, data, field) => ({ color: value === '正常' ? 'green' : 'red' })"
+      }
+    ]
+  },
+  {
+    "name": "财务信息",
+    "fields": [
+      {
+        "key": "f_amount",
+        "name": "金额",
+        "span": 2,
+        "showIf": "(data, field) => data.f_amount > 0",
+        "styleFunc": "(value, data, field) => ({ color: value > 5000 ? 'red' : 'green', fontWeight: 'bold' })",
+        "formatFunc": "(value, data, field) => '￥' + Number(value).toLocaleString()",
+        "requireFunc": "(data, field) => data.f_amount > 1000"
+      },
+      {
+        "key": "f_phone",
+        "name": "联系电话",
+        "formatFunc": "(value, data, field) => value ? value.replace(/(\\d{3})\\d{4}(\\d{4})/, '$1****$2') : '--'"
+      }
+    ]
+  }
+]
+```
+
+### 数组分组配置示例
+
+```javascript
+// 配置文件：deviceList.json
+[
+  {
+    "name": "设备列表",
+    "type": "array",
+    "key": "devices",
+    "fields": [
+      {
+        "key": "f_name",
+        "name": "设备名称",
+        "styleFunc": "(value, data, field) => ({ fontWeight: 'bold' })"
+      },
+      {
+        "key": "f_status",
+        "name": "状态",
+        "styleFunc": "(value, data, field) => ({ color: value === '在线' ? 'green' : 'gray' })"
+      },
+      {
+        "key": "f_amount",
+        "name": "金额",
+        "formatFunc": "(value, data, field) => value ? '￥' + value : '--'"
+      }
+    ]
+  }
+]
+```
+
+## 使用示例
+
+### 基础使用
+
+```vue
+<template>
+  <x-descriptions-group
+    :data="deviceData"
+    configName="deviceInfo">
+  </x-descriptions-group>
+</template>
+
+<script>
+import XDescriptionsGroup from '@vue2-client/base-client/components/common/XDescriptions/XDescriptionsGroup'
+
+export default {
+  components: {
+    XDescriptionsGroup
+  },
+  data () {
+    return {
+      deviceData: {
+        f_name: '智能水表001',
+        f_status: '正常', 
+        f_amount: 15000,
+        f_phone: '13812345678'
+      }
+    }
+  }
+}
+</script>
+```
+
+### 高级用法 - 动态配置
+
+```vue
+<template>
+  <x-descriptions-group
+    :data="formData"
+    :configName="configName"
+    serviceName="customService">
+  </x-descriptions-group>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      configName: 'dynamicForm',
+      formData: {
+        // 根据业务需求动态构建数据
+      }
+    }
+  },
+  created() {
+    // 根据用户权限动态选择配置
+    this.configName = this.isAdmin ? 'adminForm' : 'userForm'
+  }
+}
+</script>
+```
+
+## 注意事项
+
+1. **函数格式**: 所有函数字符串必须使用箭头函数格式，如 `"(data, field) => data.amount > 1000"`
+2. **错误处理**: 函数执行错误时会输出警告日志，不会影响组件正常渲染
+3. **性能考虑**: 函数会在每次渲染时执行，避免在函数中编写耗时操作
+4. **样式应用**: styleFunc 通过内联样式应用到字段内容上，优先级低于CSS类
+5. **兼容性**: 保持向后兼容，不配置函数的字段按原样显示
+
+## 支持的显示模式
+
+组件支持三种 tab 显示模式，通过配置文件设置：
+
+- `left`: 左侧垂直导航（默认）
+- `top`: 顶部横向导航  
+- `none`: 无导航，直接显示所有内容
+
+配置示例：
+
+```javascript
+{
+  "tabMode": "top",
+  "column": 2,
+  "groups": [...]
+}
+```