af-mobile-client-vue3 1.0.85 → 1.0.87

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "af-mobile-client-vue3",
   "type": "module",
-  "version": "1.0.85",
+  "version": "1.0.87",
   "description": "Vue + Vite component lib",
   "license": "MIT",
   "engines": {

package/src/components/core/Uploader/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {
+  Button as vanButton,
   Uploader as vanUploader,
 } from 'vant'
 import { onMounted, ref } from 'vue'
@@ -97,7 +98,11 @@ onMounted(() => {
     :after-read="fileUpload"
     :show-upload="false"
     :deletable="false"
-  />
+  >
+    <vanButton icon="photograph" type="primary">
+      上传
+    </vanButton>
+  </van-uploader>
   <van-uploader
     v-else-if="props.authority === 'admin'"
     v-model="imageList"
@@ -105,7 +110,11 @@ onMounted(() => {
     :preview-image="true"
     :after-read="fileUpload"
     :before-delete="deleteFileFunction"
-  />
+  >
+    <vanButton icon="photograph" type="primary">
+      上传
+    </vanButton>
+  </van-uploader>
 </template>
 
 <style scoped lang="less">

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/XFormItem/index.vue

@@ -101,10 +101,17 @@ const showDatePicker = ref(false)
 const showTimePicker = ref(false)
 const showArea = ref(false)
 const errorMessage = ref('')
+
+// 表单默认值
+// 输入-非查询
 const formInputDefaultValue = ref('')
+// 输入-查询
 const queryInputDefaultValue = ref('')
+// 选择-非查询
 const formSelectDefaultValue = ref([])
+// 选择-查询
 const querySelectDefaultValue = ref([])
+
 // eslint-disable-next-line ts/no-use-before-define
 const currUser = computed(() => userState.f.resources.id)
 // 是否展示当前项
@@ -140,10 +147,17 @@ const localValue = computed({
     //   return props.modelValue
     // }
     switch (attr.type) {
+      case 'uploader':
+        if (mode === '查询') {
+          // console.log(querySelectDefaultValue.value)
+          return props.modelValue !== undefined ? props.modelValue : querySelectDefaultValue.value
+        }
+        else {
+          return props.modelValue !== undefined ? props.modelValue : formSelectDefaultValue.value
+        }
       case 'switch':
         return props.modelValue !== undefined ? props.modelValue : false
       case 'checkbox':
-      case 'uploader':
       case 'file':
       case 'image':
       case 'datePicker':
@@ -392,7 +406,7 @@ function init() {
 
   if (attr.type === 'checkbox' || attr.type === 'uploader' || attr.type === 'file' || attr.type === 'image' || attr.type === 'datePicker' || attr.type === 'timePicker' || attr.type === 'select') {
     if (attr.formDefault) {
-      if (attr.type === 'checkbox')
+      if (attr.type === 'checkbox' || attr.type === 'image' || attr.type === 'file')
         formSelectDefaultValue.value = attr.formDefault
       else
         formSelectDefaultValue.value.push(attr.formDefault)