@ebiz/designer-components 0.0.36 → 0.0.38

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 

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

@@ -1,7 +1,8 @@
 <template>
-    <t-form ref="formRef" :class="['ebiz-s-form', className]" :colon="colon" :data="data" :disabled="disabled"
+    <t-form ref="formRef" :class="['ebiz-s-form', className]" :colon="colon" :data="localFormData" :disabled="disabled"
         :label-align="labelAlign" :label-width="labelWidth" :layout="layout" :reset-type="resetType"
-        :reset-on-semi-controlled="resetOnSemiControlled" :rules="rules" :scroll-to-first-error="scrollToFirstError"
+        :reset-on-semi-controlled="resetOnSemiControlled" :rules="formRules"
+        :scroll-to-first-error="scrollToFirstError"
         :show-error-message="showErrorMessage" :status-icon="statusIcon" :style="customStyle" @reset="handleReset"
         @submit="handleSubmit" @validate="handleValidate">
 
@@ -10,10 +11,12 @@
         <ebiz-s-form-item label=" ">
             <slot name="buttons">
                 <t-space>
-                    <t-button v-if="showCancelButton" :theme="cancelButtonTheme" type="reset">{{
-                        cancelButtonText
+                    <t-button v-if="showCancelButton" :theme="cancelButtonTheme" type="reset" :loading="loading"
+                        :disabled="loading || disabled">{{
+                            cancelButtonText
                         }}</t-button>
-                    <t-button v-if="showSubmitButton" theme="primary" :loading="loading" type="submit">{{
+                    <t-button v-if="showSubmitButton" theme="primary" :loading="loading" 
+                        :disabled="loading || disabled" type="submit">{{
                         submitButtonText }}</t-button>
                 </t-space>
             </slot>
@@ -34,7 +37,7 @@ export default {
 </script>
 
 <script setup>
-import { defineProps, defineEmits, ref } from 'vue';
+import { defineProps, defineEmits, ref, watch, computed } from 'vue';
 import { Form as TForm, Button as TButton, Space as TSpace, MessagePlugin } from 'tdesign-vue-next';
 import dataService from "../../../apiService/simpleDataService";
 import EbizSFormItem from './item.vue';
@@ -193,6 +196,13 @@ const props = defineProps({
         type: Object,
         default: () => null
     },
+    /**
+     * 详情API配置，用于加载表单数据
+     */
+    detailApiConfig: {
+        type: Object,
+        default: () => null
+    },
     /**
      * 是否在提交成功后重置表单
      */
@@ -229,13 +239,61 @@ const emit = defineEmits([
     'validate',
     'success',
     'error',
-    'cancel'
+    'cancel',
+    'detail-loaded',
+    'detail-error'
 ]);
 
 const formRef = ref(null);
 const loading = ref(false);
+const currentId = ref(null);
+const currentParams = ref({});
+const localFormData = ref({...props.data});
 
+// 合并rules并监听变化
+const formRules = computed(() => props.rules);
 
+// 监听props的data变化，同步到localFormData
+watch(() => props.data, (newData) => {
+    // 如果外部传入的数据变化，同步更新本地数据
+    if (newData && typeof newData === 'object') {
+        // 清空现有数据
+        Object.keys(localFormData.value).forEach(key => {
+            delete localFormData.value[key];
+        });
+        
+        // 写入新数据
+        Object.keys(newData).forEach(key => {
+            localFormData.value[key] = newData[key];
+        });
+    }
+}, { deep: true });
+
+/**
+ * 获取错误消息
+ * @param {Error} error 错误对象
+ * @param {string} prefix 错误消息前缀
+ * @returns {string} 格式化后的错误消息
+ */
+const getErrorMessage = (error, prefix = '提交失败') => {
+    if (!error) return `${prefix}: 未知错误`;
+    
+    // 处理不同类型的错误
+    if (error.response && error.response.data) {
+        // API返回的详细错误信息
+        const { message, msg, error: errMsg } = error.response.data;
+        return `${prefix}: ${message || msg || errMsg || error.message || '服务器返回错误'}`;
+    } else if (error.message) {
+        // 标准错误对象
+        return `${prefix}: ${error.message}`;
+    } else if (typeof error === 'string') {
+        // 字符串错误
+        return `${prefix}: ${error}`;
+    } else {
+        // 未知错误
+        return `${prefix}: 未知错误`;
+    }
+};
 
 /**
  * 调用API提交表单数据
@@ -243,30 +301,42 @@ const loading = ref(false);
 const submitFormData = async () => {
     try {
         loading.value = true;
+        
+        // 准备请求参数
+        const fetchParams = { ...localFormData.value };
+        
+        // 如果有ID，添加到请求参数中
+        if (currentId.value) {
+            fetchParams.id = currentId.value;
+        }
+        
+        // 合并当前参数到请求参数
+        if (currentParams.value && Object.keys(currentParams.value).length > 0) {
+            Object.keys(currentParams.value).forEach(key => {
+                fetchParams[key] = currentParams.value[key];
+            });
+        }
 
-        const { url, method, headers, params } = props.apiConfig;
-        const response = await dataService.request({
-            url,
-            method: method || 'post',
-            data: props.data,
-            params,
-            headers
-        });
+        // 直接使用 apiConfig，不做任何处理
+        const response = await dataService.fetch(fetchParams, props.apiConfig);
 
+        // 直接使用响应数据
+        const transformedResponse = response;
         if (props.showResultMessage) {
             MessagePlugin.success(props.successMessage);
         }
 
-        emit('success', response);
+        emit('success', transformedResponse);
 
         if (props.resetOnSuccess && formRef.value) {
             formRef.value.reset();
         }
 
-        return response;
+        return transformedResponse;
     } catch (error) {
         if (props.showResultMessage) {
-            MessagePlugin.error(props.errorMessage || error.message || '提交失败');
+            const errorMsg = getErrorMessage(error, props.errorMessage);
+            MessagePlugin.error(errorMsg);
         }
 
         emit('error', error);
@@ -277,46 +347,225 @@ const submitFormData = async () => {
 };
 
 /**
- * 提交表单
+ * 表单重置
+ * @param {Object} context 表单上下文
  */
-const handleFormSubmit = async () => {
-    if (!formRef.value) return;
+const handleReset = (context) => {
+    emit('reset', context);
+};
 
-    const validateResult = await formRef.value.validate();
-    if (validateResult !== true) {
-        return;
+/**
+ * 表单验证
+ * @param {Object} result 表单验证结果
+ */
+const handleValidate = (result) => {
+    emit('validate', result);
+};
+
+/**
+ * 表单提交事件，由内置的HTML表单submit事件触发
+ */
+const handleSubmit = async (_context) => {
+    try {
+        if (!formRef.value) return;
+
+        const validateResult = await formRef.value.validate();
+        
+        if (validateResult !== true) {
+            // 获取第一个错误信息
+            const firstKey = Object.keys(validateResult)[0];
+            const firstError = validateResult[firstKey]?.[0]?.message || '表单验证失败';
+            
+            if (props.showResultMessage) {
+                MessagePlugin.error(firstError);
+            }
+            
+            emit('error', { validateResult, firstError });
+            return;
+        }
+
+        emit('submit', localFormData.value);
+
+        if (props.apiConfig) {
+            await submitFormData();
+        }
+    } catch (error) {
+        if (props.showResultMessage) {
+            MessagePlugin.error(getErrorMessage(error));
+        }
+        
+        emit('error', error);
     }
+};
 
-    emit('submit', props.data);
+/**
+ * 加载详情数据
+ * @param {string|number} id 记录ID
+ */
+const loadDetailData = async (id) => {
+    if (!props.detailApiConfig || !id) return null;
+    
+    try {
+        loading.value = true;
+        
+        // 准备请求参数
+        const fetchParams = { id };
+        
+        // 合并当前参数到请求参数
+        if (currentParams.value && Object.keys(currentParams.value).length > 0) {
+            Object.keys(currentParams.value).forEach(key => {
+                fetchParams[key] = currentParams.value[key];
+            });
+        }
+        
+        // 调用dataService进行API请求，直接使用detailApiConfig
+        const response = await dataService.fetch(fetchParams, props.detailApiConfig);
+        
+        // 获取详情数据
+        const detailData = response.data || response;
+        
+        // 更新本地表单数据
+        if (detailData) {
+            // 清空现有数据
+            Object.keys(localFormData.value).forEach(key => {
+                delete localFormData.value[key];
+            });
+            
+            // 写入新数据
+            Object.keys(detailData).forEach(key => {
+                localFormData.value[key] = detailData[key];
+            });
+        }
+        
+        // 触发加载成功事件
+        emit('detail-loaded', detailData);
+        return detailData;
+    } catch (error) {
+        // 显示错误消息
+        if (props.showResultMessage) {
+            MessagePlugin.error(`加载详情失败: ${error.message || '未知错误'}`);
+        }
+        
+        // 触发错误事件
+        emit('detail-error', error);
+        return null;
+    } finally {
+        loading.value = false;
+    }
+};
 
-    if (props.apiConfig) {
-        await submitFormData();
+/**
+ * 打开表单并设置参数
+ * @param {Object} params 表单参数
+ */
+const openForm = (params = {}) => {
+    // 处理传入的表单数据
+    if (params.formData) {
+        // 清空现有数据
+        Object.keys(localFormData.value).forEach(key => {
+            delete localFormData.value[key];
+        });
+        
+        // 写入新数据
+        Object.keys(params.formData).forEach(key => {
+            localFormData.value[key] = params.formData[key];
+        });
+    } else if (params.clearData) {
+        // 如果要求清空数据
+        Object.keys(localFormData.value).forEach(key => {
+            delete localFormData.value[key];
+        });
+    }
+    
+    // 存储ID
+    if (params.id) {
+        currentId.value = params.id;
+        
+        // 如果有detailApiConfig，加载详情数据
+        if (props.detailApiConfig) {
+            loadDetailData(params.id);
+        }
+    } else {
+        currentId.value = null;
     }
+    
+    // 存储其他自定义参数
+    currentParams.value = params;
+    
+    return { success: true, message: '表单已准备就绪' };
 };
 
 /**
- * 表单重置
- * @param {Object} context 表单上下文
+ * 设置表单数据
+ * @param {Object} data 要设置的数据
  */
-const handleReset = (context) => {
-    emit('reset', context);
+const setFormData = (data) => {
+    if (!data || typeof data !== 'object') {
+        return { success: false, message: '数据必须是一个对象' };
+    }
+    
+    // 清空现有数据
+    Object.keys(localFormData.value).forEach(key => {
+        delete localFormData.value[key];
+    });
+    
+    // 写入新数据
+    Object.keys(data).forEach(key => {
+        localFormData.value[key] = data[key];
+    });
+    
+    return { success: true, message: '表单数据已设置' };
 };
 
 /**
- * 表单验证
- * @param {Object} result 表单验证结果
+ * 获取表单数据
  */
-const handleValidate = (result) => {
-    emit('validate', result);
+const getFormData = () => {
+    return { ...localFormData.value };
 };
 
+/**
+ * 清空表单数据
+ */
+const clearFormData = () => {
+    // 清空表单数据
+    Object.keys(localFormData.value).forEach(key => {
+        delete localFormData.value[key];
+    });
+    
+    emit('reset', { type: 'clear' });
+    return { success: true, message: '表单数据已清空' };
+};
 
 /**
- * 表单提交事件，由内置的HTML表单submit事件触发
+ * 提交表单
  */
-const handleSubmit = (context) => {
-    // 这里只做转发，实际提交逻辑在handleFormSubmit中
-    emit('submit', context);
+const submitForm = async () => {
+    try {
+        if (!formRef.value) {
+            return { success: false, message: '表单引用不存在' };
+        }
+        
+        const validateResult = await formRef.value.validate();
+        
+        if (validateResult === true) {
+            emit('submit', localFormData.value);
+            
+            if (props.apiConfig) {
+                const response = await submitFormData();
+                return { success: true, message: '提交成功', data: response };
+            }
+            
+            return { success: true, message: '表单验证通过', data: { ...localFormData.value } };
+        } else {
+            const firstKey = Object.keys(validateResult)[0];
+            const firstError = validateResult[firstKey]?.[0]?.message || '表单验证失败';
+            
+            return { success: false, message: firstError, errors: validateResult };
+        }
+    } catch (error) {
+        return { success: false, message: error.message || '提交过程中发生错误' };
+    }
 };
 
 // 暴露方法给父组件
@@ -324,7 +573,7 @@ defineExpose({
     /**
      * 提交表单方法
      */
-    submit: handleFormSubmit,
+    submit: submitForm,
     /**
      * 重置表单方法
      */
@@ -366,7 +615,43 @@ defineExpose({
     /**
      * 获取表单DOM元素
      */
-    getFormElement: () => formRef.value
+    getFormElement: () => formRef.value,
+    /**
+     * 打开表单并设置参数
+     */
+    openForm,
+    /**
+     * 加载详情数据
+     */
+    loadDetailData,
+    /**
+     * 清空表单数据
+     */
+    clearFormData,
+    /**
+     * 设置表单数据
+     */
+    setFormData,
+    /**
+     * 获取表单数据
+     */
+    getFormData,
+    /**
+     * 表单引用
+     */
+    formRef,
+    /**
+     * 当前ID
+     */
+    currentId,
+    /**
+     * 当前参数
+     */
+    currentParams,
+    /**
+     * 本地表单数据
+     */
+    localFormData
 });
 </script>
 

package/src/index.js

@@ -85,8 +85,9 @@ import { LoadingPlugin as EbizLoading } from 'tdesign-vue-next';
 import EbizMap from './components/EbizMap.vue';
 
 import EbizSData from './components/senior/EbizSData/index.vue';
-import EbizSForm from "./components/senior/EbizSForm/index.vue";
-import EbizSFormItem from "./components/senior/EbizSForm/item.vue";
+import EbizSForm from './components/senior/EbizSForm/index.vue';
+import EbizSFormItem from './components/senior/EbizSForm/item.vue';
+import EbizSDialog from "./components/senior/EbizSDialog/index.vue";
 
 // 导出组件
 export {
@@ -206,5 +207,6 @@ export {
   // PC端高级组件
   EbizSData,
   EbizSForm,
-  EbizSFormItem
+  EbizSFormItem,
+  EbizSDialog
 };

package/src/router/index.js

@@ -3,6 +3,7 @@ import Home from '../views/Home.vue'
 import ButtonView from '../views/Button.vue'
 import TableView from '../views/TableView.vue'
 import TdesignDescriptions from '../views/TdesignDescriptions.vue'
+import EbizSForm from '../views/EbizSForm/index.vue'
 
 const routes = [
   {
@@ -320,8 +321,7 @@ const routes = [
   {
     path: '/ebiz-s-form',
     name: 'EbizSForm',
-    component: () => import('../views/EbizSFormDemo.vue'),
-    meta: { title: 'PC端表单组件示例' }
+    component: EbizSForm
   },
   {
     path: '/ebiz-map',
@@ -334,6 +334,12 @@ const routes = [
     name: 'EbizSData',
     component: () => import('../views/EbizSDataDemo.vue'),
     meta: { title: 'Ebiz数据组件示例' }
+  },
+  {
+    path: '/ebiz-s-dialog',
+    name: 'EbizSDialog',
+    component: () => import('../views/EbizSDialogDemo.vue'),
+    meta: { title: 'Ebiz高级弹窗组件示例' }
   }
 ]
 

package/src/views/EbizSDataDemo.vue

@@ -26,7 +26,7 @@
             </EbizTdesignButtonDialog>
           </template>
           <template #default="{ data }">
-            <t-table :data="data" :columns="columns" bordered stripe />
+            <tiny-grid :data="data" :columns="columns" bordered stripe />
           </template>
         </EbizSData>
       </div>
@@ -45,6 +45,7 @@ export default {
 import { ref } from 'vue';
 import { EbizSData, EbizSFormItem } from '../index';
 import EbizTdesignButtonDialog from '../components/EbizTdesignButtonDialog.vue';
+import { TinyGrid } from '@opentiny/vue';
 
 // 表单数据
 const formData1 = ref({