@ebiz/designer-components 0.0.37 → 0.0.39

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,8 @@ 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";
 
 // 导出组件

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',