af-mobile-client-vue3 1.2.41 → 1.2.43

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "af-mobile-client-vue3",
   "type": "module",
-  "version": "1.2.41",
+  "version": "1.2.43",
   "packageManager": "pnpm@10.12.3",
   "description": "Vue + Vite component lib",
   "engines": {
@@ -108,6 +108,6 @@
     "commit-msg": "pnpm commitlint $1"
   },
   "lint-staged": {
-    "*": "eslint --fix"
+    "*.{js,ts,vue}": "eslint --fix"
   }
 }

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

@@ -210,15 +210,16 @@ function initComponent() {
     }
     configContent.value = result
     // 扁平化 type=group 的 groupItems，保持顺序
-    const flatFormJson = []
-    result.formJson.forEach((item) => {
-      if (item.type === 'group' && Array.isArray(item.groupItems)) {
-        flatFormJson.push(...item.groupItems)
-      }
-      else {
-        flatFormJson.push(item)
-      }
-    })
+    let flatFormJson = []
+    flatFormJson = result.formJson.filter(item => (!item.isOnlyAddOrEdit && item.type !== 'group') || (item.type === 'group' && item.groupItems.some(groupItem => !groupItem.isOnlyAddOrEdit)))
+    // result.formJson.forEach((item) => {
+    //   if (item.type === 'group' && Array.isArray(item.groupItems)) {
+    //     flatFormJson.push(...item.groupItems)
+    //   }
+    //   else {
+    //     flatFormJson.push(item)
+    //   }
+    // })
     formQueryList.value = flatFormJson
     console.log('formQueryList', formQueryList.value)
     if (result.buttonState) {
@@ -528,6 +529,7 @@ function updateConditionAndRefresh(params: any) {
 // 暴露方法给父组件
 defineExpose({
   updateConditionAndRefresh,
+  onRefresh,
 })
 </script>
 

package/src/components/data/XFormGroup/doc/DeviceForm.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { Cell as VanCell, CellGroup as VanCellGroup, Field as VanField, Switch as VanSwitch } from 'vant'
+import { defineExpose, defineProps, onMounted, onUnmounted, ref } from 'vue'
+
+interface DeviceFormProps {
+  setRef?: (refValue: any) => void
+  removeRef?: (refValue: any) => void
+  formGroupName?: string
+  formData?: any
+}
+
+const props = withDefaults(defineProps<DeviceFormProps>(), {
+  setRef: () => {},
+  removeRef: () => {},
+  formGroupName: 'deviceInfo',
+  formData: () => ({}),
+})
+
+const formData = ref({
+  deviceId: '',
+  deviceName: '',
+  deviceType: '',
+  status: 'active',
+  isOnline: false,
+  ...props.formData,
+})
+
+async function validate() {
+  if (!formData.value.deviceId) {
+    throw new Error('设备ID不能为空')
+  }
+  if (!formData.value.deviceName) {
+    throw new Error('设备名称不能为空')
+  }
+  return Promise.resolve()
+}
+
+function getFormData() {
+  return {
+    deviceId: formData.value.deviceId,
+    deviceName: formData.value.deviceName,
+    deviceType: formData.value.deviceType,
+    status: formData.value.status,
+    isOnline: formData.value.isOnline,
+  }
+}
+
+function resetForm() {
+  formData.value = {
+    deviceId: '',
+    deviceName: '',
+    deviceType: '',
+    status: 'active',
+    isOnline: false,
+  }
+}
+
+const exposeObj = {
+  validate,
+  getFormData,
+  resetForm,
+  formGroupName: props.formGroupName,
+}
+
+defineExpose(exposeObj)
+
+onMounted(() => {
+  props.setRef(exposeObj)
+})
+
+onUnmounted(() => {
+  props.removeRef(exposeObj)
+})
+</script>
+
+<template>
+  <div class="device-form">
+    <VanCellGroup inset>
+      <VanField
+        v-model="formData.deviceId"
+        label="设备ID"
+        placeholder="请输入设备ID"
+        :rules="[{ required: true, message: '请输入设备ID' }]"
+      />
+      <VanField
+        v-model="formData.deviceName"
+        label="设备名称"
+        placeholder="请输入设备名称"
+        :rules="[{ required: true, message: '请输入设备名称' }]"
+      />
+      <VanField
+        v-model="formData.deviceType"
+        label="设备类型"
+        placeholder="请输入设备类型"
+      />
+      <VanCell title="设备状态">
+        <template #value>
+          <span :class="formData.status === 'active' ? 'text-success' : 'text-warning'">
+            {{ formData.status === 'active' ? '正常' : '异常' }}
+          </span>
+        </template>
+      </VanCell>
+      <VanCell title="在线状态">
+        <template #value>
+          <VanSwitch v-model="formData.isOnline" />
+        </template>
+      </VanCell>
+    </VanCellGroup>
+  </div>
+</template>
+
+<style scoped lang="less">
+.device-form {
+  padding: 16px;
+  .text-success {
+    color: #07c160;
+  }
+  .text-warning {
+    color: #ff976a;
+  }
+}
+</style>

package/src/components/data/XFormGroup/doc/FormGroupDemo.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import XFormGroup from '@af-mobile-client-vue3/components/data/XFormGroup/index.vue'
+import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
+import { showToast } from 'vant'
+import { ref } from 'vue'
+import DeviceForm from './DeviceForm.vue'
+import UserForm from './UserForm.vue'
+
+const configName = ref('complexFormGroup')
+const serviceName = ref('af-apply')
+const formData = ref({
+  userInfo: {},
+  deviceInfo: {},
+})
+
+const formGroup = ref()
+
+function handleSubmit(result: any) {
+  console.log('提交数据:', result)
+  showToast('提交成功')
+}
+</script>
+
+<template>
+  <NormalDataLayout title="表单组示例">
+    <template #layout_content>
+      <XFormGroup
+        ref="formGroup"
+        :config-name="configName"
+        :service-name="serviceName"
+        :group-form-data="formData"
+        mode="新增"
+        @submit="handleSubmit"
+      >
+        <!-- 用户信息插槽 -->
+        <template #user="{ setRef, removeRef, userFormData }">
+          <UserForm
+            :set-ref="setRef"
+            :remove-ref="removeRef"
+            form-group-name="userInfo"
+            :form-data="userFormData"
+          />
+        </template>
+        <!-- 设备信息插槽 -->
+        <template #device="{ setRef, removeRef, deviceFormData }">
+          <DeviceForm
+            :set-ref="setRef"
+            :remove-ref="removeRef"
+            form-group-name="deviceInfo"
+            :form-data="deviceFormData"
+          />
+        </template>
+      </XFormGroup>
+    </template>
+  </NormalDataLayout>
+</template>

package/src/components/data/XFormGroup/doc/README.md

@@ -0,0 +1,273 @@
+# XFormGroup 表单组组件
+
+## 组件概述
+
+XFormGroup 是一个基于 Vue 3 + TypeScript + Vant 4 开发的表单组组件，支持多标签页表单展示，可以通过配置实现复杂的表单组合。组件支持两种模式：普通表单模式和插槽（slot）模式。
+
+## 功能特性
+
+- 🏷️ **多标签页支持**：使用 Vant Tabs 组件实现标签页切换
+- 🔧 **插槽模式**：支持通过 slot 自定义表单内容
+- 📝 **表单验证**：支持表单数据验证和提交
+- 🎯 **动态配置**：通过配置文件动态生成表单结构
+- 🔄 **数据绑定**：支持表单数据的双向绑定
+- 📱 **移动端优化**：基于 Vant 4 组件库，专为移动端设计
+
+## 基础用法
+
+```vue
+// 见 FormGroupDemo.vue
+```
+
+## Props 参数详解
+
+### configName
+- **类型**: `string`
+- **默认值**: `''`
+- **说明**: 表单配置名称，用于从后端获取表单配置信息
+- **示例**: `'appapplyuserinfoFormGroup'`
+
+### serviceName
+- **类型**: `string | undefined`
+- **默认值**: `undefined`
+- **说明**: 服务名称，用于指定后端服务
+- **示例**: `'af-apply'`
+
+### groupFormData
+- **类型**: `object`
+- **默认值**: `() => ({})`
+- **说明**: 表单组数据，用于初始化表单数据
+- **示例**:
+
+```js
+// -{
+// -  userInfo: { name: '张三', age: 25 },
+// -  deviceInfo: { deviceId: '001', status: 'active' }
+// -}
+```
+
+### mode
+- **类型**: `string`
+- **默认值**: `'查询'`
+- **说明**: `表单模式，控制表单的显示和操作模式`
+- **可选值**: `'查询'` | `'新增'` | `'编辑'` | `'查看'`
+
+## 插槽（Slot）使用详解
+
+### 插槽模式配置
+
+当配置中的 `formGroupType` 为 `'slot'` 时，组件会渲染插槽内容而不是默认的 XForm 组件。
+
+#### 插槽参数
+
+插槽会接收以下参数：
+
+- **userItem/deviceItem**: 当前标签页的配置项
+- **userFormData/deviceFormData**: 当前标签页对应的表单数据
+- **setRef**: 注册表单实例的函数
+- **removeRef**: 注销表单实例的函数
+
+### 完整使用示例
+
+#### 1. 主页面组件
+
+> 见 [FormGroupDemo.vue](FormGroupDemo.vue)
+
+#### 2. 用户信息表单组件
+
+> 见 [UserForm.vue](UserForm.vue)
+
+#### 3. 设备信息表单组件
+
+> 见 [DeviceForm.vue](DeviceForm.vue)
+
+#### 4. 配置结构示例
+
+```json
+{
+  "groups": [
+    {
+      "groupName": "userInfo",
+      "describe": "用户信息",
+      "tableName": "用户信息表",
+      "formGroupType": "slot",
+      "slotName": "user",
+      "showSubmitBtn": false
+    },
+    {
+      "groupName": "deviceInfo",
+      "describe": "设备信息",
+      "tableName": "设备信息表",
+      "formGroupType": "slot",
+      "slotName": "device",
+      "showSubmitBtn": true
+    }
+  ],
+  "showSubmitBtn": true
+}
+```
+
+#### 5. setRef 和 removeRef 工作原理
+
+```js
+// XFormGroup 组件内部的实现逻辑
+const xFormListRef = ref([])
+
+function setRef(refValue) {
+  if (refValue && !xFormListRef.value.includes(refValue)) {
+    xFormListRef.value.push(refValue)
+    console.log('注册表单实例:', refValue.formGroupName)
+  }
+}
+
+function removeRef(refValue) {
+  const idx = xFormListRef.value.indexOf(refValue)
+  if (idx !== -1) {
+    xFormListRef.value.splice(idx, 1)
+    console.log('注销表单实例:', refValue.formGroupName)
+  }
+}
+
+async function submit() {
+  const allFormData = {}
+  for (const formInstance of xFormListRef.value) {
+    try {
+      await formInstance.validate()
+      if (formInstance.formGroupName && typeof formInstance.getFormData === 'function') {
+        allFormData[formInstance.formGroupName] = formInstance.getFormData()
+      }
+    } catch (error) {
+      console.error('表单验证失败:', error)
+      return
+    }
+  }
+  emit('submit', allFormData)
+}
+```
+
+### 关键要点
+
+1. **必须实现的方法**：
+   - `validate()`: 表单验证方法
+   - `getFormData()`: 获取表单数据方法
+   - `formGroupName`: 表单组名称
+2. **生命周期管理**：
+   - 在 `onMounted` 时调用 `setRef` 注册
+   - 在 `onUnmounted` 时调用 `removeRef` 注销
+3. **数据传递**：
+   - 通过 `defineExpose` 暴露方法给父组件
+   - 通过 `props` 接收父组件传递的参数
+4. **插槽使用**：
+   - 插槽名称必须与配置中的 `slotName` 一致
+   - 必须传递 `setRef` 和 `removeRef` 给子组件
+
+## 事件
+
+### submit
+- **参数**: `formData: object`
+- **说明**: 表单提交事件，当用户点击提交按钮时触发
+- **示例**:
+```javascript
+function handleSubmit(formData) {
+  console.log('表单数据:', formData)
+  // 处理表单提交逻辑
+}
+```
+
+## 方法
+
+### init(params: Form)
+- **参数**: `params` - 初始化参数对象
+- **说明**: 手动初始化组件，可以动态改变配置
+- **示例**:
+```javascript
+formGroup.value.init({
+  configName: 'newConfig',
+  serviceName: 'newService',
+  groupFormData: { ... },
+  mode: '新增'
+})
+```
+
+### setRef(refValue)
+- **参数**: `refValue` - 表单实例
+- **说明**: 注册表单实例到组件中，用于统一管理和提交
+
+### removeRef(refValue)
+- **参数**: `refValue` - 表单实例
+- **说明**: 从组件中注销表单实例
+
+## 配置结构说明
+
+### 基础配置结构
+```javascript
+{
+  groups: [
+    {
+      "groupName": "userInfo",
+      "describe": "用户信息",
+      "tableName": "用户信息表",
+      "formGroupType": "form", // 或 "slot"
+      "slotName": "user", // 当 formGroupType 为 "slot" 时使用
+      "showSubmitBtn": false
+    },
+    {
+      "groupName": "deviceInfo", 
+      "describe": "设备信息",
+      "tableName": "设备信息表",
+      "formGroupType": "slot",
+      "slotName": "device",
+      "showSubmitBtn": true
+    }
+  ],
+    showSubmitBtn: true
+}
+```
+
+### 配置项说明
+
+| 字段名 | 类型 | 说明 |
+|--------|------|------|
+| groupName | string | 分组名称，用于数据分组 |
+| describe | string | 标签页显示标题 |
+| tableName | string | 表名，当 describe 为空时作为标题 |
+| formGroupType | string | 表单类型，'form' 为普通表单，'slot' 为插槽 |
+| slotName | string | 插槽名称，当 formGroupType 为 'slot' 时使用 |
+| showSubmitBtn | boolean | 是否显示提交按钮 |
+
+## 样式定制
+
+组件使用 Less 预处理器，可以通过以下方式定制样式：
+
+```less
+#x-form-group {
+  background-color: #f7f8fa;
+  padding-bottom: 10px;
+  
+  .x-form-group-item {
+    margin: 20px 0;
+  }
+  
+  // 自定义标签页样式
+  :deep(.van-tabs__nav) {
+    background-color: #fff;
+  }
+  
+  // 自定义按钮样式
+  :deep(.van-button--primary) {
+    background-color: #1989fa;
+  }
+}
+```
+
+## 注意事项
+
+1. **插槽注册**: 使用插槽模式时，子组件必须通过 `setRef` 和 `removeRef` 注册到父组件
+2. **数据同步**: 插槽组件需要实现 `getFormData` 方法返回表单数据
+3. **表单验证**: 插槽组件可以实现 `validate` 方法进行表单验证
+4. **生命周期**: 插槽组件需要在 `onMounted` 时注册，`onUnmounted` 时注销
+5. **配置加载**: 组件会在 `onBeforeMount` 时自动加载配置，也可以通过 `init` 方法手动初始化
+
+```
+
+## 这个文档详细介绍了 XFormGroup 组件的使用方法，特别是插槽的使用方式和各个参数的详细说明。开发者可以根据这个文档快速上手使用该组件。 

package/src/components/data/XFormGroup/doc/UserForm.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { CellGroup as VanCellGroup, Field as VanField } from 'vant'
+import { defineExpose, defineProps, onMounted, onUnmounted, ref } from 'vue'
+
+interface UserFormProps {
+  setRef?: (refValue: any) => void
+  removeRef?: (refValue: any) => void
+  formGroupName?: string
+  formData?: any
+}
+
+const props = withDefaults(defineProps<UserFormProps>(), {
+  setRef: () => {},
+  removeRef: () => {},
+  formGroupName: 'userInfo',
+  formData: () => ({}),
+})
+
+const formData = ref({
+  name: '',
+  phone: '',
+  email: '',
+  ...props.formData,
+})
+
+async function validate() {
+  if (!formData.value.name) {
+    throw new Error('姓名不能为空')
+  }
+  if (!formData.value.phone) {
+    throw new Error('手机号不能为空')
+  }
+  const phoneRegex = /^1[3-9]\d{9}$/
+  if (!phoneRegex.test(formData.value.phone)) {
+    throw new Error('手机号格式不正确')
+  }
+  return Promise.resolve()
+}
+
+function getFormData() {
+  return {
+    name: formData.value.name,
+    phone: formData.value.phone,
+    email: formData.value.email,
+  }
+}
+
+function resetForm() {
+  formData.value = {
+    name: '',
+    phone: '',
+    email: '',
+  }
+}
+
+const exposeObj = {
+  validate,
+  getFormData,
+  resetForm,
+  formGroupName: props.formGroupName,
+}
+
+defineExpose(exposeObj)
+
+onMounted(() => {
+  props.setRef(exposeObj)
+})
+
+onUnmounted(() => {
+  props.removeRef(exposeObj)
+})
+</script>
+
+<template>
+  <div class="user-form">
+    <VanCellGroup inset>
+      <VanField
+        v-model="formData.name"
+        label="姓名"
+        placeholder="请输入姓名"
+        :rules="[{ required: true, message: '请输入姓名' }]"
+      />
+      <VanField
+        v-model="formData.phone"
+        label="手机号"
+        placeholder="请输入手机号"
+        :rules="[{ required: true, message: '请输入手机号' }]"
+      />
+      <VanField
+        v-model="formData.email"
+        label="邮箱"
+        placeholder="请输入邮箱"
+      />
+    </VanCellGroup>
+  </div>
+</template>
+
+<style scoped lang="less">
+.user-form {
+  padding: 16px;
+}
+</style>

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

@@ -2,7 +2,7 @@
 import XForm from '@af-mobile-client-vue3/components/data/XForm/index.vue'
 import { getConfigByName } from '@af-mobile-client-vue3/services/api/common'
 import { Button as VanButton, Tab as VanTab, Tabs as VanTabs } from 'vant'
-import { defineEmits, defineProps, onBeforeMount, onMounted, ref, watch } from 'vue'
+import { computed, defineEmits, defineProps, onBeforeMount, onMounted, ref, useSlots, watch } from 'vue'
 
 const props = withDefaults(defineProps<{
   configName?: string
@@ -33,7 +33,17 @@ const submitGroup = ref(false)
 const submitSimple = ref(false)
 const isInit = ref(false)
 const initStatus = ref(false)
-const propsData = ref<Form>({})
+const propsData = ref<Partial<Form>>({})
+
+const slots = useSlots()
+const renderableGroupItems = computed(() => {
+  return groupItems.value.filter((item) => {
+    if (item.formGroupType === 'slot') {
+      return !!(item.slotName && slots[item.slotName])
+    }
+    return true
+  })
+})
 
 // 组件初始化函数
 function init(params: Form) {
@@ -50,7 +60,7 @@ function init(params: Form) {
     if (result?.groups) {
       groupItems.value = result.groups
       result.groups.forEach((group) => {
-        if (!formData.value[group.groupName])
+        if (!formData.value[group.groupName] && group.formGroupType !== 'slot')
           formData.value[group.groupName] = {}
         if (group.showSubmitBtn)
           submitGroup.value = true
@@ -70,11 +80,39 @@ onBeforeMount(() => {
   if (!initStatus.value)
     init(props)
 })
-const xFormListRef = ref([])
+interface XFormLike {
+  validate: () => Promise<void>
+  formGroupName?: string
+  form?: any
+  getFormData?: () => object
+}
+const xFormListRef = ref<XFormLike[]>([])
+
+// 注册表单实例，避免重复
+function setRef(refValue: XFormLike) {
+  if (refValue && !xFormListRef.value.includes(refValue)) {
+    xFormListRef.value.push(refValue)
+  }
+}
+// 注销表单实例
+function removeRef(refValue: XFormLike) {
+  const idx = xFormListRef.value.indexOf(refValue)
+  if (idx !== -1)
+    xFormListRef.value.splice(idx, 1)
+}
+
 async function submit() {
   for (const res of xFormListRef.value) {
-    await res.validate()
-    formData.value[res.formGroupName] = res.form
+    try {
+      await res.validate()
+      if (res.formGroupName && typeof res.getFormData === 'function') {
+        formData.value[res.formGroupName] = res.getFormData()
+      }
+    }
+    catch (msg) {
+      console.log('error:', msg)
+      return
+    }
   }
   emit('submit', formData.value)
 }
@@ -87,14 +125,14 @@ onMounted(() => {
   offsetTop.value = Number.parseInt(navBarHeight, 10) || 60 + 10
 })
 
-defineExpose({ init })
+defineExpose({ init, removeRef, xFormListRef })
 </script>
 
 <template>
   <div v-if="isInit" id="x-form-group">
     <VanTabs :scrollspy="propsData.isScrollspy" sticky :offset-top="offsetTop">
       <VanTab
-        v-for="(item, index) in groupItems"
+        v-for="(item, index) in renderableGroupItems"
         :key="item.groupName ? (item.groupName + index) : index"
         :title="item.describe ? item.describe : item.tableName "
       >
@@ -106,17 +144,28 @@ defineExpose({ init })
             <span class="form-group-bar" />
             <span class="form-group-text">{{ item.describe }}</span>
           </div>
-          <XForm
-            ref="xFormListRef"
-            :is-group-form="true"
-            :mode="props.mode"
-            :group-form-items="item"
-            :form-data="item.groupName ? formData[item.groupName] : formData"
-            :form-name="item.groupName"
-            :service-name="props.serviceName"
-            :submit-button="submitSimple"
-            @on-submit="submit"
-          />
+          <template v-if="item.formGroupType === 'slot'">
+            <slot
+              :name="item.slotName"
+              :item="item"
+              :form-data="item.groupName ? formData[item.groupName] : formData"
+              :set-ref="setRef"
+              :remove-ref="removeRef"
+            />
+          </template>
+          <template v-else>
+            <XForm
+              ref="xFormListRef"
+              :mode="props.mode"
+              :is-group-form="true"
+              :group-form-items="item"
+              :form-data="item.groupName ? formData[item.groupName] : formData"
+              :form-name="item.groupName"
+              :service-name="props.serviceName"
+              :submit-button="submitSimple"
+              @on-submit="submit"
+            />
+          </template>
         </div>
       </VanTab>
     </VanTabs>

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

@@ -366,6 +366,8 @@ function updateFile(files, _index) {
 function formTypeCheck(attr, value) {
   if (this.mode === '查询')
     return
+  if (!attr.rule || !attr.rule.required || attr.rule.required === 'false')
+    return
   switch (attr.rule.type) {
     case 'string':
       if (value.length === 0) {
@@ -783,6 +785,7 @@ function emitFunc(func, data) {
       :label-align="labelAlign"
       :input-align="attr.inputAlign ? attr.inputAlign : 'right'"
       :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
+      :required="attr.rule.required === 'true'"
     >
       <template #input>
         <VanSwitch v-model="modelData" />
@@ -810,6 +813,7 @@ function emitFunc(func, data) {
         :label-align="labelAlign"
         :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
         :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
+        :required="attr.rule.required === 'true'"
       >
         <template #input>
           <van-checkbox-group v-model="modelData as any[]" direction="horizontal" shape="square" :disabled="readonly">
@@ -846,6 +850,7 @@ function emitFunc(func, data) {
         :columns="option"
         :option="attr.option ? attr.option : columnsField"
         :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
+        :required="attr.rule.required === 'true'"
       />
     </template>
 
@@ -858,6 +863,7 @@ function emitFunc(func, data) {
       :label-align="labelAlign"
       :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
       :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
+      :required="attr.rule.required === 'true'"
     >
       <template #input>
         <VanRadioGroup v-model="modelData" direction="horizontal" :disabled="readonly">
@@ -895,6 +901,7 @@ function emitFunc(func, data) {
       :label-align="labelAlign"
       :input-align="attr.inputAlign ? attr.inputAlign : 'center'"
       :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
+      :required="attr.rule.required === 'true'"
     >
       <template #input>
         <VanStepper v-model="modelData as any" :disabled="readonly" />
@@ -909,6 +916,7 @@ function emitFunc(func, data) {
       :label-align="labelAlign"
       :input-align="attr.inputAlign ? attr.inputAlign : 'center'"
       :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
+      :required="attr.rule.required === 'true'"
     >
       <template #input>
         <VanRate v-model="modelData as number" :size="25" :readonly="readonly" void-color="#eee" void-icon="star" color="#ffd21e" />
@@ -923,6 +931,7 @@ function emitFunc(func, data) {
       :label-align="labelAlign"
       :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
       :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
+      :required="attr.rule.required === 'true'"
     >
       <template #input>
         <VanSlider v-model="modelData as number" :readonly="readonly" />
@@ -937,6 +946,7 @@ function emitFunc(func, data) {
       :label-align="labelAlign"
       :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
       :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
+      :required="attr.rule.required === 'true'"
     >
       <template #input>
         <!--      <van-uploader v-model="localValue" /> -->
@@ -957,6 +967,7 @@ function emitFunc(func, data) {
       :label-align="labelAlign"
       :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
       :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
+      :required="attr.rule.required === 'true'"
     >
       <template #input>
         <ImageUploader
@@ -1033,6 +1044,7 @@ function emitFunc(func, data) {
       :is-link="true"
       :placeholder="placeholder"
       :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
+      :required="attr.rule.required === 'true'"
       @click="readonly ? null : showDataTimePicker()"
     />
     <VanPopup v-model:show="showDatePicker" position="bottom" teleport="body" overlay-class="date-picker-overlay">
@@ -1134,6 +1146,7 @@ function emitFunc(func, data) {
       :label-align="labelAlign"
       :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
       :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
+      :required="attr.rule.required === 'true'"
       @click="readonly ? null : showArea = true"
     />
     <VanPopup v-model:show="showArea" position="bottom" teleport="body" overlay-class="date-picker-overlay">
@@ -1155,6 +1168,7 @@ function emitFunc(func, data) {
       :columns="option"
       :option="attr.option ? attr.option : columnsField"
       :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
+      :required="attr.rule.required === 'true'"
     />
 
     <!-- 文本区域 -->
@@ -1172,6 +1186,7 @@ function emitFunc(func, data) {
       :placeholder="attr.placeholder ? attr.placeholder : `请输入${attr.name}`"
       show-word-limit
       :rules="[{ required: attr.rule.required === 'true', message: `请填写${attr.name}` }]"
+      :required="attr.rule.required === 'true'"
     />
 
     <!-- 文本输入框 -->
@@ -1188,6 +1203,7 @@ function emitFunc(func, data) {
       :error-message="errorMessage"
       :clearable="attr.clearable"
       :rules="[{ required: attr.rule.required === 'true', message: `请填写${attr.name}` }]"
+      :required="attr.rule.required === 'true'"
       @blur="() => formTypeCheck(attr, modelData as string)"
     >
       <template #input>
@@ -1225,6 +1241,7 @@ function emitFunc(func, data) {
       is-link
       :placeholder="placeholder"
       :rules="[{ required: attr.rule.required === 'true', message: '请选择地址' }]"
+      :required="attr.rule.required === 'true'"
       @click="readonly ? null : showAddressPicker = true"
     />
     <VanPopup
@@ -1253,6 +1270,7 @@ function emitFunc(func, data) {
       is-link
       :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
       :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
+      :required="attr.rule.required === 'true'"
       @click="readonly ? null : showTreeSelect = true"
     />
     <VanPopup

package/src/views/component/XCellListView/index.vue

@@ -96,13 +96,13 @@ function addOption() {
 function updateRow(result) {
   console.log('用户----', userInfo)
   router.push({
-    name: 'XFormGroupView',
-    // params: { id: result.o_id, openid: result.o_id },
-    // query: {
-    //   configName: configName.value,
-    //   serviceName: serviceName.value,
-    //   mode: '修改',
-    // },
+    name: 'XFormView',
+    params: { id: 1, openid: 2 },
+    query: {
+      configName: configName.value,
+      serviceName: serviceName.value,
+      mode: '修改',
+    },
   })
 }
 
@@ -136,10 +136,17 @@ function deleteRow(result) {
       <!--        @delete-row="deleteRow" -->
       <!--      /> -->
 
+      <!--      <XCellList -->
+      <!--        service-name="af-revenue" -->
+      <!--        config-name="userfiles_sel_address" -->
+      <!--        @to-detail="toDetail" -->
+      <!--      /> -->
       <XCellList
-        service-name="af-revenue"
-        config-name="userfiles_sel_address"
+        service-name="af-apply"
+        config-name="ApplyContractPhoneCRUD"
+        :custom-add="true"
         @to-detail="toDetail"
+        @add="updateRow"
       />
     </template>
   </NormalDataLayout>

package/src/views/component/XFormView/index.vue

@@ -3,8 +3,8 @@ import XForm from '@af-mobile-client-vue3/components/data/XForm/index.vue'
 import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
 import { ref } from 'vue'
 
-const configName = ref('AddConstructionForm')
-const serviceName = ref('af-linepatrol')
+const configName = ref('addappapplychargeForm')
+const serviceName = ref('af-apply')
 
 const formGroupAddConstruction = ref(null)
 </script>