@ebiz/designer-components 0.1.1 → 0.1.4

package/src/views/EbizSForm/index.vue

@@ -1,360 +1,360 @@
-<template>
-  <div class="component-demo">
-    <h2>高级表单组件</h2>
-    <div class="demo-section">
-      <h3>基础表单示例</h3>
-      <div class="demo-block">
-        <ebiz-s-form 
-          ref="basicFormRef"
-          :data="formData" 
-          :rules="formRules"
-          show-error-message
-          @success="handleSuccess"
-          @error="handleError">
-          <ebiz-s-form-item label="姓名" name="name" type="input" placeholder="请输入姓名"></ebiz-s-form-item>
-          <ebiz-s-form-item label="年龄" name="age" type="number" placeholder="请输入年龄"></ebiz-s-form-item>
-          <ebiz-s-form-item label="性别" name="gender" type="radio" :options="genderOptions"></ebiz-s-form-item>
-          <ebiz-s-form-item label="爱好" name="hobbies" type="checkbox" :options="hobbyOptions"></ebiz-s-form-item>
-          <ebiz-s-form-item label="职业" name="occupation" type="select" :options="occupationOptions"></ebiz-s-form-item>
-          <ebiz-s-form-item label="出生日期" name="birthday" type="date"></ebiz-s-form-item>
-          <ebiz-s-form-item label="简介" name="bio" type="textarea" placeholder="请输入个人简介"></ebiz-s-form-item>
-        </ebiz-s-form>
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h3>编辑表单示例（支持详情接口）</h3>
-      <div class="demo-block">
-        <t-space>
-          <t-button @click="openEditFormWithData">打开编辑表单（预设数据）</t-button>
-          <t-button @click="openEditFormWithId">打开编辑表单（加载详情）</t-button>
-        </t-space>
-        <ebiz-s-form 
-          ref="editFormRef"
-          :api-config="submitApiConfig"
-          :detail-api-config="detailApiConfig"
-          :rules="editFormRules"
-          show-error-message
-          reset-on-success
-          @success="handleEditSuccess"
-          @error="handleEditError"
-          @detail-loaded="handleDetailLoaded">
-          <ebiz-s-form-item label="ID" name="id" type="input" disabled></ebiz-s-form-item>
-          <ebiz-s-form-item label="标题" name="title" type="input" placeholder="请输入标题"></ebiz-s-form-item>
-          <ebiz-s-form-item label="内容" name="body" type="textarea" placeholder="请输入内容"></ebiz-s-form-item>
-          <ebiz-s-form-item label="用户ID" name="userId" type="number" placeholder="请输入用户ID"></ebiz-s-form-item>
-        </ebiz-s-form>
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h3>行内表单示例</h3>
-      <div class="demo-block">
-        <ebiz-s-form 
-          :data="inlineFormData" 
-          layout="inline"
-          label-width="60px">
-          <ebiz-s-form-item label="用户名" name="username" type="input" placeholder="请输入用户名"></ebiz-s-form-item>
-          <ebiz-s-form-item label="密码" name="password" type="input" placeholder="请输入密码"></ebiz-s-form-item>
-        </ebiz-s-form>
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h3>表单方法调用示例</h3>
-      <div class="demo-block">
-        <t-space>
-          <t-button @click="validateForm">验证表单</t-button>
-          <t-button @click="getFormValues">获取表单值</t-button>
-          <t-button @click="resetForm">重置表单</t-button>
-          <t-button @click="setFormValues">设置表单值</t-button>
-        </t-space>
-        <ebiz-s-form ref="methodFormRef" :rules="methodFormRules">
-          <ebiz-s-form-item label="用户名" name="username" type="input" placeholder="请输入用户名"></ebiz-s-form-item>
-          <ebiz-s-form-item label="邮箱" name="email" type="input" placeholder="请输入邮箱"></ebiz-s-form-item>
-          <ebiz-s-form-item label="密码" name="password" type="input" placeholder="请输入密码"></ebiz-s-form-item>
-        </ebiz-s-form>
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h3>顶部标签表单示例</h3>
-      <div class="demo-block">
-        <ebiz-s-form 
-          :data="topLabelFormData" 
-          label-align="top">
-          <ebiz-s-form-item label="邮箱" name="email" type="input" placeholder="请输入邮箱"></ebiz-s-form-item>
-          <ebiz-s-form-item label="手机号" name="phone" type="input" placeholder="请输入手机号"></ebiz-s-form-item>
-          <ebiz-s-form-item label="是否启用" name="enabled" type="switch"></ebiz-s-form-item>
-        </ebiz-s-form>
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h3>自定义表单按钮示例</h3>
-      <div class="demo-block">
-        <ebiz-s-form :data="customButtonsFormData">
-          <ebiz-s-form-item label="名称" name="name" type="input" placeholder="请输入名称"></ebiz-s-form-item>
-          <template #buttons>
-            <t-space>
-              <t-button theme="default">返回</t-button>
-              <t-button theme="primary">保存草稿</t-button>
-              <t-button theme="success">提交审核</t-button>
-            </t-space>
-          </template>
-        </ebiz-s-form>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { reactive, ref } from 'vue';
-import { EbizSForm, EbizSFormItem } from '../../index.js';
-import { Button as TButton, Space as TSpace, MessagePlugin } from 'tdesign-vue-next';
-
-export default {
-  name: 'EbizSFormDemo',
-  components: {
-    EbizSForm,
-    EbizSFormItem,
-    TButton,
-    TSpace
-  },
-  setup() {
-    // 表单引用
-    const basicFormRef = ref(null);
-    const editFormRef = ref(null);
-    const methodFormRef = ref(null);
-
-    // 基础表单数据
-    const formData = reactive({
-      name: '',
-      age: null,
-      gender: '',
-      hobbies: [],
-      occupation: '',
-      birthday: '',
-      bio: ''
-    });
-
-    // 表单验证规则
-    const formRules = {
-      name: [{ required: true, message: '请输入姓名', type: 'error' }],
-      age: [
-        { required: true, message: '请输入年龄', type: 'error' },
-        { validator: (val) => val >= 18, message: '年龄必须大于等于18岁', type: 'error' }
-      ],
-      gender: [{ required: true, message: '请选择性别', type: 'error' }]
-    };
-
-    // 编辑表单验证规则
-    const editFormRules = {
-      title: [{ required: true, message: '请输入标题', type: 'error' }],
-      body: [{ required: true, message: '请输入内容', type: 'error' }],
-      userId: [{ required: true, message: '请输入用户ID', type: 'error' }]
-    };
-
-    // 方法示例表单验证规则
-    const methodFormRules = {
-      username: [{ required: true, message: '请输入用户名', type: 'error' }],
-      email: [
-        { required: true, message: '请输入邮箱', type: 'error' },
-        { validator: (val) => /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(val), message: '请输入有效的邮箱地址', type: 'error' }
-      ],
-      password: [
-        { required: true, message: '请输入密码', type: 'error' },
-        { validator: (val) => val.length >= 6, message: '密码长度至少为6位', type: 'error' }
-      ]
-    };
-
-    // 选项数据
-    const genderOptions = [
-      { label: '男', value: 'male' },
-      { label: '女', value: 'female' }
-    ];
-
-    const hobbyOptions = [
-      { label: '阅读', value: 'reading' },
-      { label: '音乐', value: 'music' },
-      { label: '电影', value: 'movie' },
-      { label: '运动', value: 'sports' }
-    ];
-
-    const occupationOptions = [
-      { label: '工程师', value: 'engineer' },
-      { label: '设计师', value: 'designer' },
-      { label: '产品经理', value: 'pm' },
-      { label: '运营', value: 'operation' }
-    ];
-
-    // 行内表单数据
-    const inlineFormData = reactive({
-      username: '',
-      password: ''
-    });
-
-    // 顶部标签表单数据
-    const topLabelFormData = reactive({
-      email: '',
-      phone: '',
-      enabled: false
-    });
-
-    // 自定义按钮表单数据
-    const customButtonsFormData = reactive({
-      name: ''
-    });
-
-    // API配置
-    const submitApiConfig = {
-      url: 'https://jsonplaceholder.typicode.com/posts/{id}',
-      method: 'put'
-    };
-
-    // 详情API配置
-    const detailApiConfig = {
-      url: 'https://jsonplaceholder.typicode.com/posts/{id}',
-      method: 'get'
-    };
-
-    // 预设数据
-    const predefinedData = {
-      id: 1,
-      title: '示例标题',
-      body: '这是一段示例内容，用于演示表单编辑功能。',
-      userId: 1
-    };
-
-    // 成功处理函数
-    const handleSuccess = (_response) => {
-      MessagePlugin.success(`提交成功！`);
-    };
-
-    // 错误处理函数
-    const handleError = (_error) => {
-      MessagePlugin.error('提交失败');
-    };
-
-    // 编辑表单成功处理函数
-    const handleEditSuccess = (response) => {
-      MessagePlugin.success(`编辑成功，ID: ${response.id}`);
-    };
-
-    // 编辑表单错误处理函数
-    const handleEditError = (_error) => {
-      MessagePlugin.error('编辑失败');
-    };
-
-    // 详情加载成功处理函数
-    const handleDetailLoaded = (data) => {
-      MessagePlugin.success(`已加载ID为${data.id}的数据`);
-    };
-
-    // 打开编辑表单并预设数据
-    const openEditFormWithData = () => {
-      editFormRef.value.openForm({
-        formData: predefinedData
-      });
-    };
-
-    // 打开编辑表单并通过ID加载详情
-    const openEditFormWithId = () => {
-      // 这里模拟一个随机ID，1-10
-      const randomId = Math.floor(Math.random() * 10) + 1;
-      
-      editFormRef.value.openForm({
-        id: randomId
-      });
-    };
-
-    // 验证表单
-    const validateForm = async () => {
-      const result = await methodFormRef.value.validate();
-      if (result === true) {
-        MessagePlugin.success('表单验证通过');
-      }
-    };
-
-    // 获取表单值
-    const getFormValues = () => {
-      const values = methodFormRef.value.getFormData();
-      MessagePlugin.info(`表单值: ${JSON.stringify(values)}`);
-    };
-
-    // 重置表单
-    const resetForm = () => {
-      methodFormRef.value.reset();
-      MessagePlugin.success('表单已重置');
-    };
-
-    // 设置表单值
-    const setFormValues = () => {
-      methodFormRef.value.setFormData({
-        username: 'testuser',
-        email: 'test@example.com',
-        password: 'password123'
-      });
-      MessagePlugin.success('表单值已设置');
-    };
-
-    return {
-      basicFormRef,
-      editFormRef,
-      methodFormRef,
-      formData,
-      formRules,
-      editFormRules,
-      methodFormRules,
-      genderOptions,
-      hobbyOptions,
-      occupationOptions,
-      inlineFormData,
-      topLabelFormData,
-      customButtonsFormData,
-      submitApiConfig,
-      detailApiConfig,
-      handleSuccess,
-      handleError,
-      handleEditSuccess,
-      handleEditError,
-      handleDetailLoaded,
-      openEditFormWithData,
-      openEditFormWithId,
-      validateForm,
-      getFormValues,
-      resetForm,
-      setFormValues
-    };
-  }
-};
-</script>
-
-<style scoped>
-.component-demo {
-  padding: 20px;
-}
-
-.demo-section {
-  margin-bottom: 30px;
-}
-
-h2 {
-  margin-bottom: 20px;
-  font-size: 24px;
-  color: #333;
-}
-
-h3 {
-  margin-bottom: 15px;
-  font-size: 18px;
-  color: #333;
-}
-
-.demo-block {
-  padding: 20px;
-  border: 1px solid #eee;
-  border-radius: 6px;
-  background-color: #fff;
-}
+<template>
+  <div class="component-demo">
+    <h2>高级表单组件</h2>
+    <div class="demo-section">
+      <h3>基础表单示例</h3>
+      <div class="demo-block">
+        <ebiz-s-form 
+          ref="basicFormRef"
+          :data="formData" 
+          :rules="formRules"
+          show-error-message
+          @success="handleSuccess"
+          @error="handleError">
+          <ebiz-s-form-item label="姓名" name="name" type="input" placeholder="请输入姓名"></ebiz-s-form-item>
+          <ebiz-s-form-item label="年龄" name="age" type="number" placeholder="请输入年龄"></ebiz-s-form-item>
+          <ebiz-s-form-item label="性别" name="gender" type="radio" :options="genderOptions"></ebiz-s-form-item>
+          <ebiz-s-form-item label="爱好" name="hobbies" type="checkbox" :options="hobbyOptions"></ebiz-s-form-item>
+          <ebiz-s-form-item label="职业" name="occupation" type="select" :options="occupationOptions"></ebiz-s-form-item>
+          <ebiz-s-form-item label="出生日期" name="birthday" type="date"></ebiz-s-form-item>
+          <ebiz-s-form-item label="简介" name="bio" type="textarea" placeholder="请输入个人简介"></ebiz-s-form-item>
+        </ebiz-s-form>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>编辑表单示例（支持详情接口）</h3>
+      <div class="demo-block">
+        <t-space>
+          <t-button @click="openEditFormWithData">打开编辑表单（预设数据）</t-button>
+          <t-button @click="openEditFormWithId">打开编辑表单（加载详情）</t-button>
+        </t-space>
+        <ebiz-s-form 
+          ref="editFormRef"
+          :api-config="submitApiConfig"
+          :detail-api-config="detailApiConfig"
+          :rules="editFormRules"
+          show-error-message
+          reset-on-success
+          @success="handleEditSuccess"
+          @error="handleEditError"
+          @detail-loaded="handleDetailLoaded">
+          <ebiz-s-form-item label="ID" name="id" type="input" disabled></ebiz-s-form-item>
+          <ebiz-s-form-item label="标题" name="title" type="input" placeholder="请输入标题"></ebiz-s-form-item>
+          <ebiz-s-form-item label="内容" name="body" type="textarea" placeholder="请输入内容"></ebiz-s-form-item>
+          <ebiz-s-form-item label="用户ID" name="userId" type="number" placeholder="请输入用户ID"></ebiz-s-form-item>
+        </ebiz-s-form>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>行内表单示例</h3>
+      <div class="demo-block">
+        <ebiz-s-form 
+          :data="inlineFormData" 
+          layout="inline"
+          label-width="60px">
+          <ebiz-s-form-item label="用户名" name="username" type="input" placeholder="请输入用户名"></ebiz-s-form-item>
+          <ebiz-s-form-item label="密码" name="password" type="input" placeholder="请输入密码"></ebiz-s-form-item>
+        </ebiz-s-form>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>表单方法调用示例</h3>
+      <div class="demo-block">
+        <t-space>
+          <t-button @click="validateForm">验证表单</t-button>
+          <t-button @click="getFormValues">获取表单值</t-button>
+          <t-button @click="resetForm">重置表单</t-button>
+          <t-button @click="setFormValues">设置表单值</t-button>
+        </t-space>
+        <ebiz-s-form ref="methodFormRef" :rules="methodFormRules">
+          <ebiz-s-form-item label="用户名" name="username" type="input" placeholder="请输入用户名"></ebiz-s-form-item>
+          <ebiz-s-form-item label="邮箱" name="email" type="input" placeholder="请输入邮箱"></ebiz-s-form-item>
+          <ebiz-s-form-item label="密码" name="password" type="input" placeholder="请输入密码"></ebiz-s-form-item>
+        </ebiz-s-form>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>顶部标签表单示例</h3>
+      <div class="demo-block">
+        <ebiz-s-form 
+          :data="topLabelFormData" 
+          label-align="top">
+          <ebiz-s-form-item label="邮箱" name="email" type="input" placeholder="请输入邮箱"></ebiz-s-form-item>
+          <ebiz-s-form-item label="手机号" name="phone" type="input" placeholder="请输入手机号"></ebiz-s-form-item>
+          <ebiz-s-form-item label="是否启用" name="enabled" type="switch"></ebiz-s-form-item>
+        </ebiz-s-form>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>自定义表单按钮示例</h3>
+      <div class="demo-block">
+        <ebiz-s-form :data="customButtonsFormData">
+          <ebiz-s-form-item label="名称" name="name" type="input" placeholder="请输入名称"></ebiz-s-form-item>
+          <template #buttons>
+            <t-space>
+              <t-button theme="default">返回</t-button>
+              <t-button theme="primary">保存草稿</t-button>
+              <t-button theme="success">提交审核</t-button>
+            </t-space>
+          </template>
+        </ebiz-s-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { reactive, ref } from 'vue';
+import { EbizSForm, EbizSFormItem } from '../../index.js';
+import { Button as TButton, Space as TSpace, MessagePlugin } from 'tdesign-vue-next';
+
+export default {
+  name: 'EbizSFormDemo',
+  components: {
+    EbizSForm,
+    EbizSFormItem,
+    TButton,
+    TSpace
+  },
+  setup() {
+    // 表单引用
+    const basicFormRef = ref(null);
+    const editFormRef = ref(null);
+    const methodFormRef = ref(null);
+
+    // 基础表单数据
+    const formData = reactive({
+      name: '',
+      age: null,
+      gender: '',
+      hobbies: [],
+      occupation: '',
+      birthday: '',
+      bio: ''
+    });
+
+    // 表单验证规则
+    const formRules = {
+      name: [{ required: true, message: '请输入姓名', type: 'error' }],
+      age: [
+        { required: true, message: '请输入年龄', type: 'error' },
+        { validator: (val) => val >= 18, message: '年龄必须大于等于18岁', type: 'error' }
+      ],
+      gender: [{ required: true, message: '请选择性别', type: 'error' }]
+    };
+
+    // 编辑表单验证规则
+    const editFormRules = {
+      title: [{ required: true, message: '请输入标题', type: 'error' }],
+      body: [{ required: true, message: '请输入内容', type: 'error' }],
+      userId: [{ required: true, message: '请输入用户ID', type: 'error' }]
+    };
+
+    // 方法示例表单验证规则
+    const methodFormRules = {
+      username: [{ required: true, message: '请输入用户名', type: 'error' }],
+      email: [
+        { required: true, message: '请输入邮箱', type: 'error' },
+        { validator: (val) => /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(val), message: '请输入有效的邮箱地址', type: 'error' }
+      ],
+      password: [
+        { required: true, message: '请输入密码', type: 'error' },
+        { validator: (val) => val.length >= 6, message: '密码长度至少为6位', type: 'error' }
+      ]
+    };
+
+    // 选项数据
+    const genderOptions = [
+      { label: '男', value: 'male' },
+      { label: '女', value: 'female' }
+    ];
+
+    const hobbyOptions = [
+      { label: '阅读', value: 'reading' },
+      { label: '音乐', value: 'music' },
+      { label: '电影', value: 'movie' },
+      { label: '运动', value: 'sports' }
+    ];
+
+    const occupationOptions = [
+      { label: '工程师', value: 'engineer' },
+      { label: '设计师', value: 'designer' },
+      { label: '产品经理', value: 'pm' },
+      { label: '运营', value: 'operation' }
+    ];
+
+    // 行内表单数据
+    const inlineFormData = reactive({
+      username: '',
+      password: ''
+    });
+
+    // 顶部标签表单数据
+    const topLabelFormData = reactive({
+      email: '',
+      phone: '',
+      enabled: false
+    });
+
+    // 自定义按钮表单数据
+    const customButtonsFormData = reactive({
+      name: ''
+    });
+
+    // API配置
+    const submitApiConfig = {
+      url: 'https://jsonplaceholder.typicode.com/posts/{id}',
+      method: 'put'
+    };
+
+    // 详情API配置
+    const detailApiConfig = {
+      url: 'https://jsonplaceholder.typicode.com/posts/{id}',
+      method: 'get'
+    };
+
+    // 预设数据
+    const predefinedData = {
+      id: 1,
+      title: '示例标题',
+      body: '这是一段示例内容，用于演示表单编辑功能。',
+      userId: 1
+    };
+
+    // 成功处理函数
+    const handleSuccess = (_response) => {
+      MessagePlugin.success(`提交成功！`);
+    };
+
+    // 错误处理函数
+    const handleError = (_error) => {
+      MessagePlugin.error('提交失败');
+    };
+
+    // 编辑表单成功处理函数
+    const handleEditSuccess = (response) => {
+      MessagePlugin.success(`编辑成功，ID: ${response.id}`);
+    };
+
+    // 编辑表单错误处理函数
+    const handleEditError = (_error) => {
+      MessagePlugin.error('编辑失败');
+    };
+
+    // 详情加载成功处理函数
+    const handleDetailLoaded = (data) => {
+      MessagePlugin.success(`已加载ID为${data.id}的数据`);
+    };
+
+    // 打开编辑表单并预设数据
+    const openEditFormWithData = () => {
+      editFormRef.value.openForm({
+        formData: predefinedData
+      });
+    };
+
+    // 打开编辑表单并通过ID加载详情
+    const openEditFormWithId = () => {
+      // 这里模拟一个随机ID，1-10
+      const randomId = Math.floor(Math.random() * 10) + 1;
+      
+      editFormRef.value.openForm({
+        id: randomId
+      });
+    };
+
+    // 验证表单
+    const validateForm = async () => {
+      const result = await methodFormRef.value.validate();
+      if (result === true) {
+        MessagePlugin.success('表单验证通过');
+      }
+    };
+
+    // 获取表单值
+    const getFormValues = () => {
+      const values = methodFormRef.value.getFormData();
+      MessagePlugin.info(`表单值: ${JSON.stringify(values)}`);
+    };
+
+    // 重置表单
+    const resetForm = () => {
+      methodFormRef.value.reset();
+      MessagePlugin.success('表单已重置');
+    };
+
+    // 设置表单值
+    const setFormValues = () => {
+      methodFormRef.value.setFormData({
+        username: 'testuser',
+        email: 'test@example.com',
+        password: 'password123'
+      });
+      MessagePlugin.success('表单值已设置');
+    };
+
+    return {
+      basicFormRef,
+      editFormRef,
+      methodFormRef,
+      formData,
+      formRules,
+      editFormRules,
+      methodFormRules,
+      genderOptions,
+      hobbyOptions,
+      occupationOptions,
+      inlineFormData,
+      topLabelFormData,
+      customButtonsFormData,
+      submitApiConfig,
+      detailApiConfig,
+      handleSuccess,
+      handleError,
+      handleEditSuccess,
+      handleEditError,
+      handleDetailLoaded,
+      openEditFormWithData,
+      openEditFormWithId,
+      validateForm,
+      getFormValues,
+      resetForm,
+      setFormValues
+    };
+  }
+};
+</script>
+
+<style scoped>
+.component-demo {
+  padding: 20px;
+}
+
+.demo-section {
+  margin-bottom: 30px;
+}
+
+h2 {
+  margin-bottom: 20px;
+  font-size: 24px;
+  color: #333;
+}
+
+h3 {
+  margin-bottom: 15px;
+  font-size: 18px;
+  color: #333;
+}
+
+.demo-block {
+  padding: 20px;
+  border: 1px solid #eee;
+  border-radius: 6px;
+  background-color: #fff;
+}
 </style>