@ebiz/designer-components 0.0.25 → 0.0.26

package/src/views/EbizSFormDemo.vue

@@ -0,0 +1,327 @@
+<template>
+    <div class="ebiz-form-demo">
+        <t-card title="基础表单" hover-shadow>
+            <EbizSForm ref="basicFormRef" :data="basicFormData" :rules="basicFormRules">
+                <EbizSFormItem label="用户名" name="username">
+                    <template #default>
+                        <t-input v-model="basicFormData.username" placeholder="请输入用户名" />
+                    </template>
+                </EbizSFormItem>
+                <EbizSFormItem label="密码" name="password">
+                    <template #default>
+                        <t-input type="password" v-model="basicFormData.password" placeholder="请输入密码" />
+                    </template>
+                </EbizSFormItem>
+            </EbizSForm>
+        </t-card>
+
+        <t-card title="表单项类型演示" hover-shadow class="mt-20">
+            <EbizSForm ref="formRef" :data="formData" :rules="formRules" :api-config="apiConfig" label-align="right"
+                label-width="120px" reset-on-success :success-message="'提交成功！'">
+                <t-row :gutter="[20, 20]">
+                    <t-col :span="12">
+                        <EbizSFormItem label="输入框" name="input" type="input" v-model="formData.input" />
+                    </t-col>
+                    <t-col :span="12">
+                        <EbizSFormItem label="数字输入框" name="number" type="number" v-model="formData.number" />
+                    </t-col>
+                </t-row>
+
+                <t-row :gutter="[20, 20]">
+                    <t-col :span="12">
+                        <EbizSFormItem label="文本域" name="textarea" type="textarea" v-model="formData.textarea" />
+                    </t-col>
+                    <t-col :span="12">
+                        <EbizSFormItem label="选择器" name="select" type="select" :options="selectOptions"
+                            v-model="formData.select" />
+                    </t-col>
+                </t-row>
+
+                <t-row :gutter="[20, 20]">
+                    <t-col :span="12">
+                        <EbizSFormItem label="日期选择器" name="date" type="date" v-model="formData.date" />
+                    </t-col>
+                    <t-col :span="12">
+                        <EbizSFormItem label="时间选择器" name="time" type="time" v-model="formData.time" />
+                    </t-col>
+                </t-row>
+
+                <t-row :gutter="[20, 20]">
+                    <t-col :span="12">
+                        <EbizSFormItem label="单选框组" name="radio" type="radio" :options="radioOptions"
+                            v-model="formData.radio" />
+                    </t-col>
+                    <t-col :span="12">
+                        <EbizSFormItem label="复选框组" name="checkbox" type="checkbox" :options="checkboxOptions"
+                            v-model="formData.checkbox" />
+                    </t-col>
+                </t-row>
+
+                <t-row :gutter="[20, 20]">
+                    <t-col :span="12">
+                        <EbizSFormItem label="开关" name="switch" type="switch" v-model="formData.switch" />
+                    </t-col>
+                    <t-col :span="12">
+                        <EbizSFormItem label="滑块" name="slider" type="slider" :min="0" :max="100"
+                            v-model="formData.slider" />
+                    </t-col>
+                </t-row>
+
+                <t-row :gutter="[20, 20]">
+                    <t-col :span="12">
+                        <EbizSFormItem label="上传" name="upload" type="upload" upload-theme="image"
+                            v-model="formData.upload" action="/api/upload" />
+                    </t-col>
+                    <t-col :span="12">
+                        <EbizSFormItem label="级联选择器" name="cascader" type="cascader" :options="cascaderOptions"
+                            v-model="formData.cascader" />
+                    </t-col>
+                </t-row>
+
+                <t-row :gutter="[20, 20]">
+                    <t-col :span="12">
+                        <EbizSFormItem label="树形选择器" name="treeSelect" type="tree-select" :tree-data="treeData"
+                            v-model="formData.treeSelect" />
+                    </t-col>
+                    <t-col :span="12">
+                        <EbizSFormItem label="颜色选择器" name="color" type="color-picker" v-model="formData.color" />
+                    </t-col>
+                </t-row>
+            </EbizSForm>
+        </t-card>
+
+        <t-card title="表单布局演示" hover-shadow class="mt-20">
+            <t-tabs>
+                <t-tab-panel value="vertical" label="垂直布局">
+                    <EbizSForm layout="vertical" label-align="left">
+                        <EbizSFormItem label="用户名" name="verticalUsername" type="input" />
+                        <EbizSFormItem label="邮箱" name="verticalEmail" type="input" />
+                    </EbizSForm>
+                </t-tab-panel>
+                <t-tab-panel value="inline" label="行内布局">
+                    <EbizSForm layout="inline">
+                        <EbizSFormItem label="用户名" name="inlineUsername" type="input" />
+                        <EbizSFormItem label="邮箱" name="inlineEmail" type="input" />
+                        <t-button theme="primary">查询</t-button>
+                    </EbizSForm>
+                </t-tab-panel>
+            </t-tabs>
+        </t-card>
+
+        <t-card title="API调用演示" hover-shadow class="mt-20">
+            <EbizSForm ref="apiFormRef" :data="apiFormData" :api-config="apiConfig" show-result-message reset-on-success
+                success-message="API调用成功！">
+                <EbizSFormItem label="姓名" name="name" type="input" v-model="apiFormData.name" />
+                <EbizSFormItem label="年龄" name="age" type="number" v-model="apiFormData.age" />
+                <EbizSFormItem label="邮箱" name="email" type="input" v-model="apiFormData.email" />
+            </EbizSForm>
+        </t-card>
+
+        <t-card title="表单验证演示" hover-shadow class="mt-20">
+            <EbizSForm ref="validateFormRef" :data="validateFormData" :rules="validateFormRules" label-width="120px"
+                show-error-message status-icon>
+                <EbizSFormItem label="用户名" name="username" type="input" v-model="validateFormData.username" />
+                <EbizSFormItem label="密码" name="password" type="input" v-model="validateFormData.password" />
+                <EbizSFormItem label="确认密码" name="confirmPassword" type="input"
+                    v-model="validateFormData.confirmPassword" />
+                <EbizSFormItem label="邮箱" name="email" type="input" v-model="validateFormData.email" />
+                <EbizSFormItem label="手机号" name="phone" type="input" v-model="validateFormData.phone" />
+            </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';
+
+// 基础表单
+const basicFormRef = ref(null);
+const basicFormData = reactive({
+    username: '',
+    password: ''
+});
+const basicFormRules = {
+    username: [
+        { required: true, message: '请输入用户名', trigger: 'blur' },
+        { min: 3, max: 20, message: '用户名长度应在3-20个字符之间', trigger: 'blur' }
+    ],
+    password: [
+        { required: true, message: '请输入密码', trigger: 'blur' },
+        { min: 6, message: '密码长度应不少于6个字符', trigger: 'blur' }
+    ]
+};
+
+// 表单项类型演示
+const formRef = ref(null);
+const formData = reactive({
+    input: '',
+    number: 0,
+    textarea: '',
+    select: '',
+    date: '',
+    time: '',
+    radio: '',
+    checkbox: [],
+    switch: false,
+    slider: 50,
+    upload: [],
+    cascader: [],
+    treeSelect: '',
+    color: '#1677FF'
+});
+const formRules = {};
+
+// 选项数据
+const selectOptions = [
+    { label: '选项1', value: '1' },
+    { label: '选项2', value: '2' },
+    { label: '选项3', value: '3' }
+];
+
+const radioOptions = [
+    { label: '选项1', value: '1' },
+    { label: '选项2', value: '2' },
+    { label: '选项3', value: '3' }
+];
+
+const checkboxOptions = [
+    { label: '选项1', value: '1' },
+    { label: '选项2', value: '2' },
+    { label: '选项3', value: '3' }
+];
+
+const cascaderOptions = [
+    {
+        label: '北京',
+        value: 'beijing',
+        children: [
+            {
+                label: '朝阳区',
+                value: 'chaoyang'
+            },
+            {
+                label: '海淀区',
+                value: 'haidian'
+            }
+        ]
+    },
+    {
+        label: '上海',
+        value: 'shanghai',
+        children: [
+            {
+                label: '浦东新区',
+                value: 'pudong'
+            },
+            {
+                label: '黄浦区',
+                value: 'huangpu'
+            }
+        ]
+    }
+];
+
+const treeData = [
+    {
+        label: '总部',
+        value: 'headquarters',
+        children: [
+            {
+                label: '研发部',
+                value: 'rd'
+            },
+            {
+                label: '销售部',
+                value: 'sales'
+            }
+        ]
+    },
+    {
+        label: '分公司',
+        value: 'branch',
+        children: [
+            {
+                label: '北京分公司',
+                value: 'beijing'
+            },
+            {
+                label: '上海分公司',
+                value: 'shanghai'
+            }
+        ]
+    }
+];
+
+// API调用演示
+const apiFormRef = ref(null);
+const apiFormData = reactive({
+    name: '',
+    age: 0,
+    email: ''
+});
+
+const apiConfig = {
+    url: '/api/submit',
+    method: 'post',
+    headers: {
+        'Content-Type': 'application/json'
+    }
+};
+
+// 表单验证演示
+const validateFormRef = ref(null);
+const validateFormData = reactive({
+    username: '',
+    password: '',
+    confirmPassword: '',
+    email: '',
+    phone: ''
+});
+
+const validateFormRules = {
+    username: [
+        { required: true, message: '请输入用户名', trigger: 'blur' },
+        { min: 3, max: 20, message: '用户名长度应在3-20个字符之间', trigger: 'blur' }
+    ],
+    password: [
+        { required: true, message: '请输入密码', trigger: 'blur' },
+        { min: 6, message: '密码长度应不少于6个字符', trigger: 'blur' }
+    ],
+    confirmPassword: [
+        { required: true, message: '请再次输入密码', trigger: 'blur' },
+        {
+            validator: (val) => val === validateFormData.password,
+            message: '两次输入的密码不一致',
+            trigger: 'blur'
+        }
+    ],
+    email: [
+        { required: true, message: '请输入邮箱', trigger: 'blur' },
+        {
+            validator: (val) => /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(val),
+            message: '请输入正确的邮箱格式',
+            trigger: 'blur'
+        }
+    ],
+    phone: [
+        { required: true, message: '请输入手机号', trigger: 'blur' },
+        {
+            validator: (val) => /^1[3-9]\d{9}$/.test(val),
+            message: '请输入正确的手机号格式',
+            trigger: 'blur'
+        }
+    ]
+};
+</script>
+
+<style scoped>
+.ebiz-form-demo {
+    padding: 20px;
+}
+
+.mt-20 {
+    margin-top: 20px;
+}
+</style>