@ebiz/designer-components 0.0.37 → 0.0.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.0.37",
+  "version": "0.0.39",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/senior/EbizSData/index.vue

@@ -79,7 +79,22 @@ const refreshing = ref(false)
 const total = ref(0)
 const pageSizeOptions = ref([10, 20, 50, 100])
 
-const data = ref([]);
+const data = ref([
+    {
+        id: 1,
+        name: '张三',
+        age: 18,
+        gender: '男',
+        address: '北京市海淀区'
+    },
+    {
+        id: 2,
+        name: '李四',
+        age: 20,
+        gender: '女',
+        address: '北京市朝阳区'
+    }
+]);
 
 const props = defineProps({
     showPageHeader: {

package/src/components/senior/EbizSDialog/index.vue

@@ -334,93 +334,25 @@ const callApi = async (config = props.apiConfig) => {
   try {
     apiLoading.value = true
     
-    // 克隆配置以避免修改原始对象
-    const apiConfig = { ...config }
+    // 准备请求参数
+    const fetchParams = { ...localFormData.value }
     
-    // 对于添加和编辑表单，自动附加表单数据
-    if ((props.dialogType === 'add' || props.dialogType === 'edit') && localFormData.value) {
-      // 如果没有data字段，创建一个
-      if (!apiConfig.data) {
-        apiConfig.data = { ...localFormData.value }
-      } 
-      // 如果有data字段且是对象，合并表单数据
-      else if (typeof apiConfig.data === 'object' && apiConfig.data !== null) {
-        // 深拷贝表单数据，避免引用问题
-        const formDataCopy = {}
-        Object.keys(localFormData.value).forEach(key => {
-          // 处理表单中的引用类型数据
-          if (typeof localFormData.value[key] === 'object' && localFormData.value[key] !== null) {
-            formDataCopy[key] = Array.isArray(localFormData.value[key]) 
-              ? [...localFormData.value[key]] 
-              : { ...localFormData.value[key] }
-          } else {
-            formDataCopy[key] = localFormData.value[key]
-          }
-        })
-        
-        apiConfig.data = { ...apiConfig.data, ...formDataCopy }
-      }
-    }
-    
-    // 添加默认的content-type头
-    if (!apiConfig.headers) {
-      apiConfig.headers = {}
-    }
-    
-    if (!apiConfig.headers['Content-Type']) {
-      apiConfig.headers['Content-Type'] = 'application/json'
-    }
-    
-    // 设置默认的请求方法
-    if (!apiConfig.method) {
-      // 根据弹窗类型设置默认方法
-      switch (props.dialogType) {
-        case 'add':
-          apiConfig.method = 'post'
-          break
-        case 'edit':
-          apiConfig.method = 'put'
-          break
-        case 'delete':
-          apiConfig.method = 'delete'
-          break
-        default:
-          apiConfig.method = 'post'
-      }
-    }
-    
-    // 如果是URL形式的API配置
-    if (typeof apiConfig === 'string') {
-      apiConfig = { url: apiConfig, method: 'post' }
-    }
-    
-    // 添加自定义请求拦截器
-    let requestTransformer = null
-    if (apiConfig.transformRequest) {
-      requestTransformer = apiConfig.transformRequest
-      delete apiConfig.transformRequest
+    // 如果有ID，添加到请求参数中
+    if (currentId.value) {
+      fetchParams.id = currentId.value
     }
     
-    // 添加自定义响应拦截器
-    let responseTransformer = null
-    if (apiConfig.transformResponse) {
-      responseTransformer = apiConfig.transformResponse
-      delete apiConfig.transformResponse
-    }
-    
-    // 处理请求数据
-    if (requestTransformer && typeof requestTransformer === 'function') {
-      apiConfig.data = requestTransformer(apiConfig.data)
+    // 合并当前参数到请求参数
+    if (currentParams.value && Object.keys(currentParams.value).length > 0) {
+      Object.keys(currentParams.value).forEach(key => {
+        if (key !== 'formData') { // 避免重复添加表单数据
+          fetchParams[key] = currentParams.value[key]
+        }
+      })
     }
     
-    // 调用dataService进行API请求
-    const response = await dataService.fetch({}, apiConfig)
-    
-    // 处理响应数据
-    let transformedResponse = response
-    if (responseTransformer && typeof responseTransformer === 'function') {
-      transformedResponse = responseTransformer(response)
-    }
+    // 调用dataService进行API请求，直接使用config
+    const response = await dataService.fetch(fetchParams, config)
     
     // 显示成功消息
     if (props.showResultMessage) {
@@ -435,14 +367,14 @@ const callApi = async (config = props.apiConfig) => {
     }
     
     // 触发成功事件
-    emit('api-success', transformedResponse)
+    emit('api-success', response)
     
     // 如果设置了成功后关闭，则关闭弹窗
     if (props.closeOnSuccess) {
       dialogVisible.value = false
     }
     
-    return transformedResponse
+    return response
   } catch (error) {
     // 错误处理和错误消息展示
     const errorMessage = getErrorMessage(error, props.dialogType)
@@ -481,62 +413,8 @@ const handleDialogConfirm = async (e) => {
           
           // 校验成功，执行提交操作
           if (validateResult === true) {
-            // 克隆API配置，避免修改原始配置
-            const apiConfig = { ...props.apiConfig }
-            
-            // 对于编辑模式，确保请求中包含ID
-            if (props.dialogType === 'edit' && currentId.value) {
-              // 替换URL中的ID参数，支持{id}和:id两种格式
-              if (apiConfig.url) {
-                apiConfig.url = apiConfig.url.replace(/\{id\}/g, currentId.value).replace(/:id/g, currentId.value)
-              }
-              
-              // 准备请求参数
-              if (!apiConfig.params) {
-                apiConfig.params = {}
-              }
-              
-              // 如果有params参数且没有id，添加id
-              if (!apiConfig.params.id && currentId.value) {
-                apiConfig.params.id = currentId.value
-              }
-              
-              // 准备请求数据
-              if (!apiConfig.data) {
-                apiConfig.data = {}
-              }
-              
-              // 确保请求体中有ID
-              if (!apiConfig.data.id && currentId.value) {
-                apiConfig.data.id = currentId.value
-              }
-              
-              // 合并当前参数中的非表单数据
-              if (currentParams.value && Object.keys(currentParams.value).length > 0) {
-                // 过滤掉id和formData，避免重复
-                const { id: _id, formData: _formData, ...otherParams } = currentParams.value
-                apiConfig.params = { ...apiConfig.params, ...otherParams }
-              }
-              
-              await callApi(apiConfig)
-            } else {
-              // 克隆API配置，确保添加操作有正确的data字段
-              const addApiConfig = { ...props.apiConfig }
-              
-              // 合并当前参数中的非表单数据
-              if (currentParams.value && Object.keys(currentParams.value).length > 0) {
-                // 过滤掉id和formData，避免重复
-                const { id: _id, formData: _formData, ...otherParams } = currentParams.value
-                
-                if (!addApiConfig.params) {
-                  addApiConfig.params = {}
-                }
-                
-                addApiConfig.params = { ...addApiConfig.params, ...otherParams }
-              }
-              
-              await callApi(addApiConfig)
-            }
+            // 直接调用callApi传入props.apiConfig
+            await callApi(props.apiConfig)
           } else {
             // 校验失败，显示第一个错误信息
             const firstError = validateResult[Object.keys(validateResult)[0]]?.[0]?.message || '表单校验失败'
@@ -557,51 +435,8 @@ const handleDialogConfirm = async (e) => {
           // 显示加载状态
           apiLoading.value = true
           
-          // 克隆API配置，避免修改原始配置
-          const deleteApiConfig = { ...props.apiConfig }
-          
-          // 对于删除操作，确保包含ID
-          if (currentId.value) {
-            // 替换URL中的ID参数
-            if (deleteApiConfig.url) {
-              deleteApiConfig.url = deleteApiConfig.url.replace(/\{id\}/g, currentId.value).replace(/:id/g, currentId.value)
-            }
-            
-            // 准备请求参数
-            if (!deleteApiConfig.params) {
-              deleteApiConfig.params = {}
-            }
-            
-            // 如果有params参数且没有id，添加id
-            if (!deleteApiConfig.params.id && currentId.value) {
-              deleteApiConfig.params.id = currentId.value
-            }
-            
-            // 准备请求数据
-            if (!deleteApiConfig.data) {
-              deleteApiConfig.data = {}
-            }
-            
-            // 确保请求体中有ID
-            if (!deleteApiConfig.data.id && currentId.value) {
-              deleteApiConfig.data.id = currentId.value
-            }
-          }
-          
-          // 合并当前参数
-          if (currentParams.value && Object.keys(currentParams.value).length > 0) {
-            // 过滤掉id和formData，避免重复
-            const { id: _id, formData: _formData, ...otherParams } = currentParams.value
-            
-            if (!deleteApiConfig.params) {
-              deleteApiConfig.params = {}
-            }
-            
-            deleteApiConfig.params = { ...deleteApiConfig.params, ...otherParams }
-          }
-          
           // 删除操作直接调用API
-          await callApi(deleteApiConfig)
+          await callApi(props.apiConfig)
         } catch (error) {
           // API调用过程中的错误
           MessagePlugin.error(`删除失败: ${error.message || '未知错误'}`)
@@ -621,19 +456,8 @@ const handleDialogConfirm = async (e) => {
         // 显示加载状态
         apiLoading.value = true
         
-        // 克隆API配置，避免修改原始配置
-        const normalApiConfig = { ...props.apiConfig }
-        
-        // 合并当前参数
-        if (currentParams.value && Object.keys(currentParams.value).length > 0) {
-          if (!normalApiConfig.params) {
-            normalApiConfig.params = {}
-          }
-          
-          normalApiConfig.params = { ...normalApiConfig.params, ...currentParams.value }
-        }
-        
-        await callApi(normalApiConfig)
+        // 直接调用API，不修改apiConfig
+        await callApi(props.apiConfig)
       } catch (error) {
         // API调用过程中的错误
         MessagePlugin.error(`操作失败: ${error.message || '未知错误'}`)
@@ -682,35 +506,20 @@ const loadDetailData = async (id) => {
     // 显示加载状态
     apiLoading.value = true
     
-    // 构建详情请求配置
-    const requestConfig = {
-      ...props.detailApiConfig
-    }
-    
-    // 替换URL中的ID参数，支持{id}和:id两种格式
-    if (requestConfig.url) {
-      requestConfig.url = requestConfig.url.replace(/\{id\}/g, id).replace(/:id/g, id)
-    }
-    
-    // 处理请求参数
-    if (!requestConfig.params) {
-      requestConfig.params = {}
-    }
+    // 准备请求参数
+    const fetchParams = { id }
     
-    // 如果有params参数且没有id，添加id
-    if (!requestConfig.params.id && id) {
-      requestConfig.params.id = id
-    }
-    
-    // 合并当前参数
+    // 合并当前参数到请求参数
     if (currentParams.value && Object.keys(currentParams.value).length > 0) {
       // 过滤掉id和formData，避免重复
       const { id: _id, formData: _formData, ...otherParams } = currentParams.value
-      requestConfig.params = { ...requestConfig.params, ...otherParams }
+      Object.keys(otherParams).forEach(key => {
+        fetchParams[key] = otherParams[key]
+      })
     }
     
-    // 调用dataService进行API请求
-    const response = await dataService.fetch({}, requestConfig)
+    // 调用dataService进行API请求，直接使用detailApiConfig
+    const response = await dataService.fetch(fetchParams, props.detailApiConfig)
     
     // 获取详情数据
     const detailData = response.data || response

package/src/components/senior/EbizSForm/README.md

@@ -0,0 +1,158 @@
+# EbizSForm 高级表单组件
+
+EbizSForm是一个基于TDesign Form封装的高级表单组件，提供了丰富的表单功能，包括本地表单数据管理、表单验证、API提交和详情数据加载等。
+
+## 主要特性
+
+1. **本地表单数据管理**：通过`localFormData`管理表单数据，实现数据的双向绑定
+2. **详情接口支持**：通过`detailApiConfig`配置详情API，支持加载表单详情数据
+3. **API调用机制**：使用`dataService.fetch(params, apiConfig)`方式调用API，符合系统规范
+4. **表单验证**：支持完整的表单验证功能，并与API调用无缝衔接
+5. **丰富的方法支持**：提供`openForm`、`loadDetailData`、`setFormData`等丰富的方法
+
+## 基本用法
+
+```vue
+<template>
+  <EbizSForm 
+    ref="formRef" 
+    :data="formData" 
+    :rules="formRules" 
+    :api-config="apiConfig"
+    :detail-api-config="detailApiConfig"
+    @success="handleSuccess"
+    @error="handleError"
+    @detail-loaded="handleDetailLoaded"
+  >
+    <EbizSFormItem label="用户名" name="username" type="input" />
+    <EbizSFormItem label="密码" name="password" type="input" />
+  </EbizSForm>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+import { EbizSForm, EbizSFormItem } from '@ebiz/designer-components';
+
+const formRef = ref(null);
+const formData = reactive({
+  username: '',
+  password: ''
+});
+
+const formRules = {
+  username: [
+    { required: true, message: '请输入用户名', trigger: 'blur' }
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' }
+  ]
+};
+
+// API配置
+const apiConfig = {
+  key: 'userSubmit',
+  apiId: 'user.submit',
+  apiType: '3'
+};
+
+// 详情API配置
+const detailApiConfig = {
+  key: 'userDetail',
+  apiId: 'user.detail',
+  apiType: '1'
+};
+
+// 加载详情数据
+const loadDetail = (id) => {
+  formRef.value.loadDetailData(id);
+};
+
+// 事件处理
+const handleSuccess = (response) => {
+  console.log('提交成功:', response);
+};
+
+const handleError = (error) => {
+  console.error('提交失败:', error);
+};
+
+const handleDetailLoaded = (data) => {
+  console.log('详情数据加载成功:', data);
+};
+</script>
+```
+
+## Props
+
+| 属性名             | 类型      | 默认值     | 说明                                |
+| ----------------- | --------- | --------- | ----------------------------------- |
+| data              | Object    | {}        | 表单数据对象                        |
+| labelAlign        | String    | 'right'   | 标签对齐方式：'left'/'right'/'top'  |
+| layout            | String    | 'vertical'| 表单布局方式：'vertical'/'inline'   |
+| labelWidth        | String    | '100px'   | 标签宽度                           |
+| rules             | Object    | {}        | 表单验证规则                        |
+| apiConfig         | Object    | null      | API配置，用于表单提交               |
+| detailApiConfig   | Object    | null      | 详情API配置，用于加载表单数据       |
+| resetOnSuccess    | Boolean   | false     | 提交成功后是否重置表单              |
+| showResultMessage | Boolean   | true      | 是否显示结果消息                    |
+
+## 事件
+
+| 事件名        | 说明                    | 参数                           |
+| ------------ | ----------------------- | ------------------------------ |
+| submit       | 表单提交时触发           | formData: 表单数据对象         |
+| success      | API调用成功时触发        | response: 成功响应数据         |
+| error        | API调用失败时触发        | error: 错误信息                |
+| reset        | 表单重置时触发           | context: 重置上下文            |
+| validate     | 表单验证时触发           | result: 验证结果               |
+| detail-loaded| 详情数据加载成功时触发    | data: 详情数据                 |
+| detail-error | 详情数据加载失败时触发    | error: 错误信息                |
+
+## 方法
+
+通过ref可以调用组件实例的以下方法：
+
+| 方法名          | 说明                     | 参数                           |
+| -------------- | ------------------------ | ------------------------------ |
+| submit         | 提交表单                  | 无                             |
+| reset          | 重置表单                  | 无                             |
+| validate       | 验证表单                  | 无                             |
+| validateFields | 验证指定字段              | fields: 字段名或字段名数组      |
+| clearValidate  | 清除验证结果              | fields: 字段名或字段名数组，可选 |
+| openForm       | 打开表单并设置参数        | params: 参数对象                |
+| loadDetailData | 加载详情数据              | id: 记录ID                     |
+| setFormData    | 设置表单数据              | data: 要设置的数据对象          |
+| getFormData    | 获取表单数据              | 无                             |
+| clearFormData  | 清空表单数据              | 无                             |
+
+## API配置对象说明
+
+apiConfig和detailApiConfig的格式如下：
+
+```javascript
+{
+  key: 'apiKey',        // API的键名
+  apiId: 'module.api',  // API的标识ID
+  apiType: '3'          // API类型，对应dataService中的类型
+}
+```
+
+apiType常用值：
+- '0': 列表查询
+- '1': 详情查询
+- '3': 数据新增
+- '5': 数据修改
+- '7': 数据删除
+
+## 与EbizSDialog组件的比较
+
+EbizSForm与EbizSDialog组件有相似的API调用和表单数据处理机制，两者都：
+
+1. 使用本地表单数据管理（localFormData）
+2. 支持详情数据加载（detailApiConfig）
+3. 采用相同的API调用方式（dataService.fetch）
+4. 不修改apiConfig对象
+
+选择使用哪个组件取决于具体的场景需求：
+- 如果需要在页面上直接显示表单，使用EbizSForm
+- 如果需要在弹窗中显示表单，使用EbizSDialog