af-mobile-client-vue3 1.0.75 → 1.0.76

package/src/components/data/XCellList/XCellList.md

@@ -1,275 +1,275 @@
-# 移动端配置化表单/列表组件文档
-
-## 组件概述
-
-这是一个基于 Vue 3 + TypeScript + Vant 4 开发的移动端配置化查询列表组件系统,主要包含以下组件:
-
-- `XCellList`: 列表容器组件
-- `XCellListFilter`: 列表筛选组件
-- `XFormItem`: 表单项组件
-- `XForm`: 表单容器组件
-- `XFormGroup`: 表单分组组件
-
-## 功能特性
-
-### 列表功能
-- ✅ 下拉刷新
-- ✅ 上拉加载
-- ✅ 搜索过滤
-- ✅ 多条件筛选
-- ✅ 排序功能
-- ✅ 卡片式布局
-- ✅ 批量操作
-- ✅ 自定义操作按钮
-
-### 表单功能
-- ✅ 支持多种表单项类型
-- ✅ 表单分组
-- ✅ 表单验证
-- ✅ 动态显示隐藏
-- ✅ 表单联动
-- ✅ 数据字典
-- ✅ 自定义校验规则
-
-## 使用示例
-
-### 基础列表
-
-```vue
-<template>
-  <XCellList
-    config-name="listConfig" 
-    :service-name="serviceName"
-    @to-detail="handleDetail"
-  />
-</template>
-
-<script setup lang="ts">
-const serviceName = 'userService'
-
-const handleDetail = (item) => {
-  // 处理详情点击
-}
-</script>
-```
-
-### 带筛选的表单
-
-```vue
-<template>
-  <XFormGroup
-    :config-name="configName"
-    :service-name="serviceName"
-    :group-form-data="formData"
-    mode="查询"
-    @submit="handleSubmit"
-  />
-</template>
-
-<script setup lang="ts">
-const configName = 'searchForm'
-const serviceName = 'userService'
-const formData = ref({})
-
-const handleSubmit = (data) => {
-  console.log('表单提交:', data)
-}
-</script>
-```
-
-## API 文档
-
-### XCellList Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-|------|------|------|--------|
-| configName | 配置名称 | string | - |
-| serviceName | 服务名称 | string | - |
-| fixQueryForm | 固定查询参数 | object | null |
-| idKey | 主键字段 | string | 'o_id' |
-
-### XCellList Events
-
-| 事件名 | 说明 | 回调参数 |
-|------|------|------|
-| toDetail | 点击详情时触发 | item: 当前项数据 |
-| addOption | 点击新增按钮时触发 | - |
-
-### XFormGroup Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-|------|------|------|--------|
-| configName | 配置名称 | string | '' |
-| serviceName | 服务名称 | string | - |
-| groupFormData | 表单数据 | object | {} |
-| mode | 表单模式 | '查询' \| '新增' \| '修改' | '查询' |
-
-### XFormItem Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-|------|------|------|--------|
-| attr | 表单项配置 | FormItemAttr | - |
-| form | 表单数据对象 | object | - |
-| mode | 表单模式 | string | '查询' |
-| showLabel | 是否显示标签 | boolean | true |
-
-## 配置说明
-
-### 列表配置
-
-```typescript
-interface ListConfig {
-  // 列配置
-  columnJson: {
-    // 列类型: mobile_header_column | mobile_subtitle_column | mobile_details_column | mobile_footer_column
-    mobileColumnType: string
-    // 数据字段
-    dataIndex: string
-    // 标题
-    title: string
-    // 展示类型
-    slotType?: 'badge' | 'action'
-    // 操作按钮配置
-    actionArr?: Array<{
-      text: string
-      func: string 
-    }>
-  }[]
-  
-  // 按钮状态
-  buttonState: {
-    add?: boolean
-    edit?: boolean
-    delete?: boolean
-  }
-  
-  // 是否显示排序
-  showSortIcon?: boolean
-  
-  // 查询表单配置
-  formJson: FormItem[]
-}
-```
-
-### 表单配置
-
-```typescript
-interface FormItem {
-  // 表单项类型
-  type: 'input' | 'select' | 'date' | 'checkbox' | 'radio' | 'switch' | 'textarea' | 'uploader'
-  
-  // 字段名
-  model: string
-  
-  // 标签名
-  name: string
-  
-  // 校验规则
-  rule?: {
-    required: string
-    type: 'string' | 'number' | 'integer' | 'float'
-  }
-  
-  // 占位提示
-  placeholder?: string
-  
-  // 数据源配置
-  keyName?: string
-  
-  // 是否只读
-  readonly?: boolean
-  
-  // 是否禁用
-  disabled?: boolean
-}
-```
-
-## 高级功能
-
-### 表单联动
-
-```typescript
-// 配置联动显示函数
-const showFormItemFunc = `function(form, attr, data, mode) {
-  return form.type === '1'
-}`
-
-// 配置值变化函数
-const dataChangeFunc = `function(form, attr, data, mode) {
-  if(form.type === '1') {
-    form.name = 'test'
-  }
-}`
-```
-
-### 自定义样式
-
-```typescript
-// 配置样式函数
-const styleFunctionForValue = `function(value) {
-  return {
-    color: value > 100 ? 'red' : 'green'
-  }
-}`
-```
-
-## 注意事项
-
-1. 配置名称必须与后端配置一致
-2. 表单验证规则需要按照规范配置
-3. 自定义函数需要使用字符串形式
-4. 数据源配置支持多种方式:
-  - logic@: 逻辑处理
-  - config@: 配置数据
-  - search@: 搜索数据
-
-## 最佳实践
-
-1. 合理使用表单分组
-2. 适当配置表单联动
-3. 统一管理配置文件
-4. 做好错误处理
-5. 优化列表性能
-
-## 常见问题
-
-1. Q: 如何配置自定义校验规则?
-   A: 在 rule 中配置 validator 函数
-
-2. Q: 如何实现表单联动?
-   A: 使用 showFormItemFunc 和 dataChangeFunc 配置联动逻辑
-
-3. Q: 如何自定义列表样式?
-   A: 使用 styleFunctionForValue 配置样式函数
-
-## 更新日志
-
-### v1.0.0
-- 初始版本发布
-- 支持基础列表功能
-- 支持表单配置
-
-### v1.1.0
-- 添加表单联动
-- 优化列表性能
-- 修复已知问题
-
-## 后续规划
-
-1. [ ] 支持更多表单类型
-2. [ ] 添加表单预览功能
-3. [ ] 优化列表性能
-4. [ ] 完善错误处理
-5. [ ] 添加单元测试
-
-## 贡献指南
-
-欢迎提交 Issue 和 PR,请遵循以下规范:
-
-1. 遵循代码规范
-2. 添加必要的测试
-3. 更新相关文档
-
-## 许可证
-
-MIT License
+# 移动端配置化表单/列表组件文档
+
+## 组件概述
+
+这是一个基于 Vue 3 + TypeScript + Vant 4 开发的移动端配置化查询列表组件系统,主要包含以下组件:
+
+- `XCellList`: 列表容器组件
+- `XCellListFilter`: 列表筛选组件
+- `XFormItem`: 表单项组件
+- `XForm`: 表单容器组件
+- `XFormGroup`: 表单分组组件
+
+## 功能特性
+
+### 列表功能
+- ✅ 下拉刷新
+- ✅ 上拉加载
+- ✅ 搜索过滤
+- ✅ 多条件筛选
+- ✅ 排序功能
+- ✅ 卡片式布局
+- ✅ 批量操作
+- ✅ 自定义操作按钮
+
+### 表单功能
+- ✅ 支持多种表单项类型
+- ✅ 表单分组
+- ✅ 表单验证
+- ✅ 动态显示隐藏
+- ✅ 表单联动
+- ✅ 数据字典
+- ✅ 自定义校验规则
+
+## 使用示例
+
+### 基础列表
+
+```vue
+<template>
+  <XCellList
+    config-name="listConfig" 
+    :service-name="serviceName"
+    @to-detail="handleDetail"
+  />
+</template>
+
+<script setup lang="ts">
+const serviceName = 'userService'
+
+const handleDetail = (item) => {
+  // 处理详情点击
+}
+</script>
+```
+
+### 带筛选的表单
+
+```vue
+<template>
+  <XFormGroup
+    :config-name="configName"
+    :service-name="serviceName"
+    :group-form-data="formData"
+    mode="查询"
+    @submit="handleSubmit"
+  />
+</template>
+
+<script setup lang="ts">
+const configName = 'searchForm'
+const serviceName = 'userService'
+const formData = ref({})
+
+const handleSubmit = (data) => {
+  console.log('表单提交:', data)
+}
+</script>
+```
+
+## API 文档
+
+### XCellList Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| configName | 配置名称 | string | - |
+| serviceName | 服务名称 | string | - |
+| fixQueryForm | 固定查询参数 | object | null |
+| idKey | 主键字段 | string | 'o_id' |
+
+### XCellList Events
+
+| 事件名 | 说明 | 回调参数 |
+|------|------|------|
+| toDetail | 点击详情时触发 | item: 当前项数据 |
+| addOption | 点击新增按钮时触发 | - |
+
+### XFormGroup Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| configName | 配置名称 | string | '' |
+| serviceName | 服务名称 | string | - |
+| groupFormData | 表单数据 | object | {} |
+| mode | 表单模式 | '查询' \| '新增' \| '修改' | '查询' |
+
+### XFormItem Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| attr | 表单项配置 | FormItemAttr | - |
+| form | 表单数据对象 | object | - |
+| mode | 表单模式 | string | '查询' |
+| showLabel | 是否显示标签 | boolean | true |
+
+## 配置说明
+
+### 列表配置
+
+```typescript
+interface ListConfig {
+  // 列配置
+  columnJson: {
+    // 列类型: mobile_header_column | mobile_subtitle_column | mobile_details_column | mobile_footer_column
+    mobileColumnType: string
+    // 数据字段
+    dataIndex: string
+    // 标题
+    title: string
+    // 展示类型
+    slotType?: 'badge' | 'action'
+    // 操作按钮配置
+    actionArr?: Array<{
+      text: string
+      func: string 
+    }>
+  }[]
+  
+  // 按钮状态
+  buttonState: {
+    add?: boolean
+    edit?: boolean
+    delete?: boolean
+  }
+  
+  // 是否显示排序
+  showSortIcon?: boolean
+  
+  // 查询表单配置
+  formJson: FormItem[]
+}
+```
+
+### 表单配置
+
+```typescript
+interface FormItem {
+  // 表单项类型
+  type: 'input' | 'select' | 'date' | 'checkbox' | 'radio' | 'switch' | 'textarea' | 'uploader'
+  
+  // 字段名
+  model: string
+  
+  // 标签名
+  name: string
+  
+  // 校验规则
+  rule?: {
+    required: string
+    type: 'string' | 'number' | 'integer' | 'float'
+  }
+  
+  // 占位提示
+  placeholder?: string
+  
+  // 数据源配置
+  keyName?: string
+  
+  // 是否只读
+  readonly?: boolean
+  
+  // 是否禁用
+  disabled?: boolean
+}
+```
+
+## 高级功能
+
+### 表单联动
+
+```typescript
+// 配置联动显示函数
+const showFormItemFunc = `function(form, attr, data, mode) {
+  return form.type === '1'
+}`
+
+// 配置值变化函数
+const dataChangeFunc = `function(form, attr, data, mode) {
+  if(form.type === '1') {
+    form.name = 'test'
+  }
+}`
+```
+
+### 自定义样式
+
+```typescript
+// 配置样式函数
+const styleFunctionForValue = `function(value) {
+  return {
+    color: value > 100 ? 'red' : 'green'
+  }
+}`
+```
+
+## 注意事项
+
+1. 配置名称必须与后端配置一致
+2. 表单验证规则需要按照规范配置
+3. 自定义函数需要使用字符串形式
+4. 数据源配置支持多种方式:
+  - logic@: 逻辑处理
+  - config@: 配置数据
+  - search@: 搜索数据
+
+## 最佳实践
+
+1. 合理使用表单分组
+2. 适当配置表单联动
+3. 统一管理配置文件
+4. 做好错误处理
+5. 优化列表性能
+
+## 常见问题
+
+1. Q: 如何配置自定义校验规则?
+   A: 在 rule 中配置 validator 函数
+
+2. Q: 如何实现表单联动?
+   A: 使用 showFormItemFunc 和 dataChangeFunc 配置联动逻辑
+
+3. Q: 如何自定义列表样式?
+   A: 使用 styleFunctionForValue 配置样式函数
+
+## 更新日志
+
+### v1.0.0
+- 初始版本发布
+- 支持基础列表功能
+- 支持表单配置
+
+### v1.1.0
+- 添加表单联动
+- 优化列表性能
+- 修复已知问题
+
+## 后续规划
+
+1. [ ] 支持更多表单类型
+2. [ ] 添加表单预览功能
+3. [ ] 优化列表性能
+4. [ ] 完善错误处理
+5. [ ] 添加单元测试
+
+## 贡献指南
+
+欢迎提交 Issue 和 PR,请遵循以下规范:
+
+1. 遵循代码规范
+2. 添加必要的测试
+3. 更新相关文档
+
+## 许可证
+
+MIT License

package/src/components/data/XCellList/index.vue

@@ -317,6 +317,7 @@ function addOption() {
           v-model:order-val="orderVal"
           v-model:condition-params="conditionParams"
           :fix-query-form="fixQueryForm"
+          :service-name="serviceName"
           :order-list="orderList"
           :form-query="formQueryList"
           :button-state="buttonState"
@@ -353,6 +354,7 @@ function addOption() {
                     <XBadge
                       :style="handleFunctionStyle(column.styleFunctionForValue, item[column.dataIndex])"
                       :dict-name="column.dictName" :dict-value="item[column.dataIndex]"
+                      :service-name="serviceName"
                     />
                   </p>
                 </VanCol>
@@ -366,6 +368,7 @@ function addOption() {
                     <XBadge
                       :style="handleFunctionStyle(column.styleFunctionForValue, item[column.dataIndex])"
                       :dict-name="column.dictName" :dict-value="item[column.dataIndex]"
+                      :service-name="serviceName"
                     />
                   </p>
                 </VanCol>
@@ -379,6 +382,7 @@ function addOption() {
                     <XBadge
                       :style="handleFunctionStyle(column.styleFunctionForValue, item[column.dataIndex])"
                       :dict-name="column.dictName" :dict-value="item[column.dataIndex]"
+                      :service-name="serviceName"
                     />
                   </p>
                 </VanCol>

package/src/components/data/XCellListFilter/index.vue

@@ -14,6 +14,7 @@ import XFormItem from '@af-mobile-client-vue3/components/data/XFormItem/index.vu
 
 const props = defineProps<{
   fixQueryForm?: object
+  serviceName?: string
   orderVal?: string
   sortordVal?: string
   orderList?: any[]
@@ -140,7 +141,7 @@ onMounted(() => {
                 </div>
               </VanCol>
             </VanRow>
-            <XFormItem v-model="conditionParams[item.model]" :form="conditionParams" :attr="item" :show-label="false" />
+            <XFormItem v-model="conditionParams[item.model]" :form="conditionParams" :attr="item" :service-name="props.serviceName" :show-label="false" />
           </template>
         </div>
         <div class="operations-panel">

package/src/components/data/XFormGroup/index.vue

@@ -63,7 +63,7 @@ async function submit() {
       <VanTab
         v-for="(item, index) in groupItems"
         :key="item.groupName ? (item.groupName + index) : index"
-        :title="item.describe ? item.describe : null "
+        :title="item.describe ? item.describe : item.tableName "
       >
         <div class="x-form-group-item">
           <XForm