@ebiz/designer-components 0.0.36 → 0.0.38

package/src/views/EbizSFormDemo.vue

@@ -128,13 +128,42 @@
                 <EbizSFormItem label="手机号" name="phone" type="input" v-model="validateFormData.phone" />
             </EbizSForm>
         </t-card>
+
+        <t-card title="详情加载与本地表单数据演示" hover-shadow class="mt-20">
+            <EbizSForm 
+                ref="detailFormRef" 
+                :data="detailFormData" 
+                :api-config="submitApiConfig"
+                :detail-api-config="detailApiConfig"
+                show-result-message
+                @detail-loaded="handleDetailLoaded"
+                @detail-error="handleDetailError"
+                @success="handleSubmitSuccess"
+                @error="handleSubmitError"
+            >
+                <EbizSFormItem label="用户ID" name="id" type="input" v-model="detailFormData.id" disabled />
+                <EbizSFormItem label="姓名" name="name" type="input" v-model="detailFormData.name" />
+                <EbizSFormItem label="年龄" name="age" type="number" v-model="detailFormData.age" />
+                <EbizSFormItem label="邮箱" name="email" type="input" v-model="detailFormData.email" />
+                
+                <template #buttons>
+                    <t-space>
+                        <t-button @click="loadDetailData">加载详情数据</t-button>
+                        <t-button @click="clearFormData">清空表单</t-button>
+                        <t-button @click="setCustomFormData">设置表单数据</t-button>
+                        <t-button theme="default" type="reset">取消</t-button>
+                        <t-button theme="primary" type="submit">提交</t-button>
+                    </t-space>
+                </template>
+            </EbizSForm>
+        </t-card>
     </div>
 </template>
 
 <script setup>
 import { ref, reactive } from 'vue';
 import { EbizSForm, EbizSFormItem } from '../index';
-import { Card as TCard, Input as TInput, Row as TRow, Col as TCol, Button as TButton, Tabs as TTabs, TabPanel as TTabPanel } from 'tdesign-vue-next';
+import { Card as TCard, Input as TInput, Row as TRow, Col as TCol, Button as TButton, Tabs as TTabs, TabPanel as TTabPanel, Space as TSpace, MessagePlugin } from 'tdesign-vue-next';
 
 // 基础表单
 const basicFormRef = ref(null);
@@ -263,11 +292,9 @@ const apiFormData = reactive({
 });
 
 const apiConfig = {
-    url: '/api/submit',
-    method: 'post',
-    headers: {
-        'Content-Type': 'application/json'
-    }
+    key: 'userSubmit',
+    apiId: 'user.submit',
+    apiType: '3' // 对应dataService中的DATA_INSERT
 };
 
 // 表单验证演示
@@ -314,6 +341,73 @@ const validateFormRules = {
         }
     ]
 };
+
+// 详情加载与本地表单数据演示
+const detailFormRef = ref(null);
+const detailFormData = reactive({
+    id: '',
+    name: '',
+    age: 0,
+    email: ''
+});
+
+// 提交API配置
+const submitApiConfig = {
+    key: 'userUpdate',
+    apiId: 'user.update',
+    apiType: '5' // 对应dataService中的DATA_MODIFY
+};
+
+// 详情API配置
+const detailApiConfig = {
+    key: 'userDetail',
+    apiId: 'user.detail',
+    apiType: '1' // 对应dataService中的DETAILS_DATA
+};
+
+// 加载详情数据
+const loadDetailData = () => {
+    const userId = prompt('请输入要加载的用户ID', '1001');
+    if (userId) {
+        // 使用表单组件的loadDetailData方法加载详情
+        detailFormRef.value.loadDetailData(userId);
+    }
+};
+
+// 清空表单数据
+const clearFormData = () => {
+    detailFormRef.value.clearFormData();
+};
+
+// 设置自定义表单数据
+const setCustomFormData = () => {
+    detailFormRef.value.setFormData({
+        id: '1002',
+        name: '张三',
+        age: 28,
+        email: 'zhangsan@example.com'
+    });
+};
+
+// 详情加载成功回调
+const handleDetailLoaded = (data) => {
+    MessagePlugin.success(`详情数据加载成功: ID=${data.id}, 姓名=${data.name}`);
+};
+
+// 详情加载失败回调
+const handleDetailError = (error) => {
+    MessagePlugin.error(`详情数据加载失败: ${error.message || '未知错误'}`);
+};
+
+// 表单提交成功回调
+const handleSubmitSuccess = (_response) => {
+    MessagePlugin.success('表单提交成功');
+};
+
+// 表单提交失败回调
+const handleSubmitError = (error) => {
+    MessagePlugin.error(`表单提交失败: ${error.message || '未知错误'}`);
+};
 </script>
 
 <style scoped>

package/src/views/Home.vue

@@ -83,7 +83,8 @@ export default {
       { path: '/ebiz-tdesign-button-dialog', title: '弹窗按钮组件示例' },
       { path: '/ebiz-s-form', title: 'PC端表单组件示例' },
       { path: '/ebiz-map', title: '地图经纬度选择器组件示例' },
-      { path: '/ebiz-s-data', title: 'Ebiz数据组件示例' }
+      { path: '/ebiz-s-data', title: 'Ebiz数据组件示例' },
+      { path: '/ebiz-s-dialog', title: 'Ebiz高级弹窗组件示例' }
     ]
 
     return {