af-mobile-client-vue3 1.0.72 → 1.0.73

package/package.json

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

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

@@ -0,0 +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

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

@@ -16,9 +16,9 @@ import XBadge from '@af-mobile-client-vue3/components/data/XBadge/index.vue'
 import { getConfigByName, query } from '@af-mobile-client-vue3/services/api/common'
 import LoadError from '@af-mobile-client-vue3/views/common/LoadError.vue'
 import XCellListFilter from '@af-mobile-client-vue3/components/data/XCellListFilter/index.vue'
-import { useRouter } from "vue-router";
+import { useRouter } from 'vue-router'
 
-const { configName, serviceName } = withDefaults(defineProps<{
+const { configName, serviceName, fixQueryForm } = withDefaults(defineProps<{
   configName?: string
   fixQueryForm?: object
   idKey?: string
@@ -30,10 +30,10 @@ const { configName, serviceName } = withDefaults(defineProps<{
   serviceName: undefined,
 })
 
-const router = useRouter()
-
 const emit = defineEmits(['toDetail', 'addOption'])
 
+const router = useRouter()
+
 const orderVal = ref(undefined)
 
 const sortordVal = ref(undefined)
@@ -105,11 +105,10 @@ const buttonState = ref(undefined)
 const groupFormItems = ref({})
 const title = ref('')
 
-onBeforeMount(() =>{
+onBeforeMount(() => {
   initComponent()
 })
 
-
 // 组件初始化
 function initComponent() {
   getConfigByName(configName, (result) => {
@@ -265,19 +264,21 @@ function onSelectMenu(item: any, event: any) {
       emit(event.func, item)
     }).catch(() => {
     })
-  } else if (event.text === '修改') {
+  }
+  else if (event.text === '修改') {
     router.push({
       name: 'XForm',
       // params: { id: item },
       query: {
         groupFormItems: JSON.stringify(groupFormItems.value),
-        serviceName: serviceName,
+        serviceName,
         formData: JSON.stringify(item),
         mode: '修改',
       },
     })
-    //emit('addOption', totalCount.value)
-  } else {
+    // emit('addOption', totalCount.value)
+  }
+  else {
     emit(event.func, item)
   }
 }
@@ -289,12 +290,12 @@ function addOption() {
     // params: { id: totalCount.value },
     query: {
       groupFormItems: JSON.stringify(groupFormItems.value),
-      serviceName: serviceName,
+      serviceName,
       formData: JSON.stringify({}),
       mode: '新增',
     },
   })
-  //emit('addOption', totalCount.value)
+  // emit('addOption', totalCount.value)
 }
 </script>
 
@@ -309,11 +310,12 @@ function addOption() {
           @search="onRefresh"
         />
       </VanCol>
-      <VanCol span="2" class = "search-icon">
+      <VanCol span="2" class="search-icon">
         <XCellListFilter
           v-model:sortord-val="sortordVal"
           v-model:order-val="orderVal"
           v-model:condition-params="conditionParams"
+          :fix-query-form="fixQueryForm"
           :order-list="orderList"
           :form-query="formQueryList"
           :button-state="buttonState"

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

@@ -13,6 +13,7 @@ import XGridDropOption from '@af-mobile-client-vue3/components/core/XGridDropOpt
 import XFormItem from '@af-mobile-client-vue3/components/data/XFormItem/index.vue'
 
 const props = defineProps<{
+  fixQueryForm?: object
   orderVal?: string
   sortordVal?: string
   orderList?: any[]
@@ -44,7 +45,7 @@ const colFieldNames = {
 }
 
 // 查询条件参数     !!!!!建议最后点击确认的时候完成这个的整理
-const conditionParams = ref({})
+const conditionParams = ref({fixQueryForm: props.fixQueryForm})
 
 // 重置某个选项
 function resetOptionItem(type) {
@@ -56,7 +57,7 @@ function resetOption() {
   currentOrderVal.value = undefined
   currentSortordVal.value = undefined
   // 条件参数
-  conditionParams.value = {}
+  conditionParams.value = {fixQueryForm: props.fixQueryForm}
 }
 function checkOrderOption() {
   let isCheck = true

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

@@ -4,11 +4,9 @@ import {
   CellGroup as VanCellGroup,
   Form as VanForm,
 } from 'vant'
-import { useRoute } from 'vue-router'
 import type { FormInstance } from 'vant'
 import { computed, defineEmits, defineProps, onBeforeMount, reactive, ref, watch } from 'vue'
 import XFormItem from '@af-mobile-client-vue3/components/data/XFormItem/index.vue'
-import NormalDataLayout from "@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue";
 
 interface FormItem {
   addOrEdit: string
@@ -36,7 +34,6 @@ const props = withDefaults(defineProps<{
   mode: '查询',
   submitButton: true,
 })
-const route = useRoute()
 const emits = defineEmits(['onSubmit'])
 const formRef = ref<FormInstance>()
 const myFormItems = ref<FormItem[]>([])
@@ -149,7 +146,6 @@ defineExpose({ init, form, formGroupName, validate })
       <slot />
     </div>
   </VanForm>
-
 </template>
 
 <style scoped>

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

@@ -26,7 +26,7 @@ import XGridDropOption from '@af-mobile-client-vue3/components/core/XGridDropOpt
 import type { Numeric } from 'vant/es/utils'
 import { getDict } from '@af-mobile-client-vue3/utils/dictUtil'
 import { executeStrFunctionByContext } from '@af-mobile-client-vue3/utils/runEvalFunction'
-import { type UserInfo, useUserStore } from '@af-mobile-client-vue3/stores/modules/user'
+import { useUserStore } from '@af-mobile-client-vue3/stores/modules/user'
 import { debounce } from 'lodash-es'
 import { searchToListOption, searchToOption } from '@af-mobile-client-vue3/services/v3Api'
 
@@ -84,11 +84,11 @@ const props = defineProps({
 
 })
 
+const emits = defineEmits(['update:modelValue'])
 // 判断并初始化防抖函数
-let debouncedUserLinkFunc: Function | null = null;
-let debouncedDepLinkFunc: Function | null = null;
+let debouncedUserLinkFunc: Function | null = null
+let debouncedDepLinkFunc: Function | null = null
 
-const emits = defineEmits(['update:modelValue'])
 const { attr, form, mode, serviceName, getDataParams, columnsField } = props
 const calendarShow = ref(false)
 const option = ref([])
@@ -176,12 +176,11 @@ onBeforeMount(() => {
   init()
   showFormItemFunc()
   dataChangeFunc()
-  if (attr?.keyName?.toString()?.startsWith('search@根据表单项[') && attr?.keyName?.toString().endsWith(']联动人员')) {
+  if (attr?.keyName?.toString()?.startsWith('search@根据表单项[') && attr?.keyName?.toString().endsWith(']联动人员'))
     debouncedUserLinkFunc = debounce(() => updateResOptions('人员'), 200)
-  }
-  if (attr?.keyName?.toString()?.startsWith('search@根据表单项[') && attr?.keyName?.toString().endsWith(']联动部门')) {
+
+  if (attr?.keyName?.toString()?.startsWith('search@根据表单项[') && attr?.keyName?.toString().endsWith(']联动部门'))
     debouncedDepLinkFunc = debounce(() => updateResOptions('部门'), 200)
-  }
 })
 // 是否展示表单左侧label文字
 const labelData = computed(() => {
@@ -222,52 +221,52 @@ function init() {
         if (result)
           option.value = result
       }, serviceName)
-    }  else if (attr.keyName && attr.keyName.includes('search@')) {
+    }
+    else if (attr.keyName && attr.keyName.includes('search@')) {
       let source = attr.keyName.substring(7)
       const userid = currUser.value
       let roleName = 'roleName'
       if (source.startsWith('根据角色[') && source.endsWith(']获取人员')) {
         const startIndex = source.indexOf('[') + 1
-        const endIndex = source.indexOf(']',startIndex)
+        const endIndex = source.indexOf(']', startIndex)
         roleName = source.substring(startIndex, endIndex)
         source = '根据角色获取人员'
       }
       const searchData = { source, userid, roleName }
-      if (source.startsWith('根据表单项[')  && source.endsWith(']联动人员')) {
+      if (source.startsWith('根据表单项[') && source.endsWith(']联动人员'))
         updateResOptions('人员')
-      } else if (source.startsWith('根据表单项[') && source.endsWith(']联动部门')) {
+      else if (source.startsWith('根据表单项[') && source.endsWith(']联动部门'))
         updateResOptions('部门')
-      } else if (attr.type === 'select' || attr.type === 'checkbox') {
-        searchToListOption(searchData,res => getDataCallback(res))
-      } else {
-        searchToOption(searchData,res => getDataCallback(res))
-      }
-    } else {
+      else if (attr.type === 'select' || attr.type === 'checkbox')
+        searchToListOption(searchData, res => getDataCallback(res))
+      else
+        searchToOption(searchData, res => getDataCallback(res))
+    }
+    else {
       initRadioValue()
     }
   }
 }
 
-function getDataCallback (res) {
+function getDataCallback(res) {
   option.value = res
-  if (attr.type === 'radio') {
+  if (attr.type === 'radio')
     initRadioValue()
-  }
 }
 
-async function updateResOptions (type) {
-  if (attr?.keyName?.toString()?.startsWith('search@根据表单项[') && attr?.keyName?.toString()?.endsWith(`]联动${type}`)){
-    const searchData = {source: `获取${type}`, userid: currUser.value}
+async function updateResOptions(type) {
+  if (attr?.keyName?.toString()?.startsWith('search@根据表单项[') && attr?.keyName?.toString()?.endsWith(`]联动${type}`)) {
+    const searchData = { source: `获取${type}`, userid: currUser.value }
     const startIndex = attr.keyName.indexOf('[') + 1
-    const endIndex = attr.keyName.indexOf(']',startIndex)
-    const formModel = attr.keyName.substring(startIndex, endIndex).replace('.','_')
+    const endIndex = attr.keyName.indexOf(']', startIndex)
+    const formModel = attr.keyName.substring(startIndex, endIndex).replace('.', '_')
     // console.log(form)
     const formModelData = form[formModel]
-    if (formModel?.length && formModelData?.length){
-      await searchToListOption(searchData,res => {
+    if (formModel?.length && formModelData?.length) {
+      await searchToListOption(searchData, (res) => {
         // console.log(res)
         // console.log(form)
-        getDataCallback(res.filter(h => {
+        getDataCallback(res.filter((h) => {
           return formModelData['0'] === h.f_organization_id || formModelData['0'] === h.f_department_id || formModelData['0'] === h.parentid
           // if (formModel.indexOf('org') > -1) {
           //   return formModelData?.includes(h.orgid || h.f_organization_id || h.parentid)
@@ -343,17 +342,16 @@ function updateFile(files, _index) {
   emits('update:modelValue', localValue.value)
 }
 // 监听表单发生变化后触发展示函数
-watch( () => form, (_oldVal, _newVal) => {
+watch(() => form, (_oldVal, _newVal) => {
   showFormItemFunc()
   // 数据源来自人员联动时更新数据
-  if (attr?.keyName?.toString()?.startsWith('search@根据表单项[') && attr?.keyName?.toString().endsWith(']联动人员')) {
+  if (attr?.keyName?.toString()?.startsWith('search@根据表单项[') && attr?.keyName?.toString().endsWith(']联动人员'))
     debouncedUserLinkFunc()
-  }
+
   // 数据源来自部门联动时更新数据
-  if (attr?.keyName?.toString()?.startsWith('search@根据表单项[') && attr?.keyName?.toString().endsWith(']联动部门')) {
+  if (attr?.keyName?.toString()?.startsWith('search@根据表单项[') && attr?.keyName?.toString().endsWith(']联动部门'))
     debouncedDepLinkFunc()
-  }
-}, {deep: true})
+}, { deep: true })
 </script>
 
 <template>