@ebiz/designer-components 0.1.2 → 0.1.4

package/src/views/EbizAutoFormDemo.vue

@@ -1,130 +1,130 @@
-<template>
-  <div class="demo-container">
-    <h1>EbizAutoForm 自动表单组件示例</h1>
-    
-    <div class="demo-section">
-      <h2>基本使用</h2>
-      <ebiz-auto-form
-        :api-config="apiConfig"
-        :initial-data="initialData"
-        @submit="handleSubmit"
-        @reset="handleReset"
-      />
-    </div>
-    
-    <div class="demo-section">
-      <h2>表单提交结果</h2>
-      <pre v-if="submittedData">{{ JSON.stringify(submittedData, null, 2) }}</pre>
-      <p v-else>尚未提交表单</p>
-    </div>
-    
-    <div class="demo-section">
-      <h2>自定义配置</h2>
-      <ebiz-auto-form
-        :api-config="customApiConfig"
-        :initial-data="customInitialData"
-        label-width="150px"
-        label-align="left"
-        :show-reset-button="false"
-        submit-button-text="保存信息"
-        @submit="handleCustomSubmit"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "EbizAutoFormDemo"
-}
-</script>
-
-<script setup>
-import { ref } from 'vue';
-import { EbizAutoForm } from '../index.js';
-
-// 基本配置示例
-const apiConfig = ref({
-  apiId: 'getUserForm',
-  apiType: 'DETAILS_DATA',
-  key: 'user'
-});
-
-// 初始数据
-const initialData = ref({
-  name: '张三',
-  email: 'zhangsan@example.com',
-  gender: 'male'
-});
-
-// 自定义配置示例
-const customApiConfig = ref({
-  apiId: 'getProductForm',
-  apiType: 'DETAILS_DATA',
-  key: 'product'
-});
-
-// 自定义初始数据
-const customInitialData = ref({
-  productName: '智能手机',
-  price: 2999,
-  status: true
-});
-
-// 提交结果
-const submittedData = ref(null);
-
-// 处理提交
-const handleSubmit = (data) => {
-  console.log('表单提交数据:', data);
-  submittedData.value = data;
-  alert('表单提交成功！');
-};
-
-// 处理重置
-const handleReset = () => {
-  console.log('表单已重置');
-  submittedData.value = null;
-};
-
-// 处理自定义表单提交
-const handleCustomSubmit = (data) => {
-  console.log('自定义表单提交数据:', data);
-  alert('自定义表单提交成功！');
-};
-</script>
-
-<style lang="less" scoped>
-.demo-container {
-  max-width: 1000px;
-  margin: 0 auto;
-  padding: 20px;
-  
-  h1 {
-    margin-bottom: 24px;
-    font-size: 24px;
-    color: #0052d9;
-  }
-  
-  .demo-section {
-    margin-bottom: 40px;
-    padding: 20px;
-    border: 1px solid #e7e7e7;
-    border-radius: 6px;
-    
-    h2 {
-      margin-bottom: 16px;
-      font-size: 18px;
-      color: #333;
-    }
-    
-    pre {
-      padding: 12px;
-      background-color: #f5f7fa;
-      border-radius: 4px;
-      font-family: monospace;
-      overflow: auto;
-    }
-  }
-}
+<template>
+  <div class="demo-container">
+    <h1>EbizAutoForm 自动表单组件示例</h1>
+    
+    <div class="demo-section">
+      <h2>基本使用</h2>
+      <ebiz-auto-form
+        :api-config="apiConfig"
+        :initial-data="initialData"
+        @submit="handleSubmit"
+        @reset="handleReset"
+      />
+    </div>
+    
+    <div class="demo-section">
+      <h2>表单提交结果</h2>
+      <pre v-if="submittedData">{{ JSON.stringify(submittedData, null, 2) }}</pre>
+      <p v-else>尚未提交表单</p>
+    </div>
+    
+    <div class="demo-section">
+      <h2>自定义配置</h2>
+      <ebiz-auto-form
+        :api-config="customApiConfig"
+        :initial-data="customInitialData"
+        label-width="150px"
+        label-align="left"
+        :show-reset-button="false"
+        submit-button-text="保存信息"
+        @submit="handleCustomSubmit"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "EbizAutoFormDemo"
+}
+</script>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizAutoForm } from '../index.js';
+
+// 基本配置示例
+const apiConfig = ref({
+  apiId: 'getUserForm',
+  apiType: 'DETAILS_DATA',
+  key: 'user'
+});
+
+// 初始数据
+const initialData = ref({
+  name: '张三',
+  email: 'zhangsan@example.com',
+  gender: 'male'
+});
+
+// 自定义配置示例
+const customApiConfig = ref({
+  apiId: 'getProductForm',
+  apiType: 'DETAILS_DATA',
+  key: 'product'
+});
+
+// 自定义初始数据
+const customInitialData = ref({
+  productName: '智能手机',
+  price: 2999,
+  status: true
+});
+
+// 提交结果
+const submittedData = ref(null);
+
+// 处理提交
+const handleSubmit = (data) => {
+  console.log('表单提交数据:', data);
+  submittedData.value = data;
+  alert('表单提交成功！');
+};
+
+// 处理重置
+const handleReset = () => {
+  console.log('表单已重置');
+  submittedData.value = null;
+};
+
+// 处理自定义表单提交
+const handleCustomSubmit = (data) => {
+  console.log('自定义表单提交数据:', data);
+  alert('自定义表单提交成功！');
+};
+</script>
+
+<style lang="less" scoped>
+.demo-container {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 20px;
+  
+  h1 {
+    margin-bottom: 24px;
+    font-size: 24px;
+    color: #0052d9;
+  }
+  
+  .demo-section {
+    margin-bottom: 40px;
+    padding: 20px;
+    border: 1px solid #e7e7e7;
+    border-radius: 6px;
+    
+    h2 {
+      margin-bottom: 16px;
+      font-size: 18px;
+      color: #333;
+    }
+    
+    pre {
+      padding: 12px;
+      background-color: #f5f7fa;
+      border-radius: 4px;
+      font-family: monospace;
+      overflow: auto;
+    }
+  }
+}
 </style>