@ebiz/designer-components 0.0.36 → 0.0.38

package/src/views/EbizSDialogDemo.vue

@@ -0,0 +1,302 @@
+<template>
+  <div class="ebiz-dialog-demo">
+    <h2>高级弹窗组件示例</h2>
+
+    <div class="demo-section">
+      <h3>1. 标准弹窗</h3>
+      <t-button @click="openNormalDialog">打开标准弹窗</t-button>
+      <EbizSDialog ref="normalDialogRef" dialogType="normal" title="标准弹窗示例">
+        <template #body>
+          <div class="dialog-content">
+            <p>这是一个标准弹窗的内容区域。</p>
+            <p>可以通过ref调用openDialog和closeDialog方法来控制弹窗的显示和隐藏。</p>
+          </div>
+        </template>
+      </EbizSDialog>
+    </div>
+
+    <div class="demo-section">
+      <h3>2. 表单弹窗</h3>
+      <t-space>
+        <t-button @click="openFormDialog">打开表单弹窗</t-button>
+        <t-button theme="default" @click="resetForm">重置表单</t-button>
+        <t-button theme="default" @click="validateFormData">验证表单</t-button>
+        <t-button theme="default" @click="getFormDataDemo">获取表单数据</t-button>
+      </t-space>
+      <EbizSDialog ref="formDialogRef" dialogType="add" title="添加用户" :rules="formRules" layout="vertical"
+        labelWidth="100px" :apiConfig="mockApiConfig" @submit="handleFormSubmit">
+        <template #body>
+          <t-form-item label="用户名" name="username">
+            <t-input v-model="formUsername" placeholder="请输入用户名"></t-input>
+          </t-form-item>
+          <t-form-item label="电子邮箱" name="email">
+            <t-input v-model="formEmail" placeholder="请输入电子邮箱"></t-input>
+          </t-form-item>
+          <t-form-item label="年龄" name="age">
+            <t-input-number v-model="formAge" placeholder="请输入年龄"></t-input-number>
+          </t-form-item>
+        </template>
+      </EbizSDialog>
+    </div>
+
+    <div class="demo-section">
+      <h3>3. 编辑和删除操作</h3>
+      <t-table :data="tableData" :columns="columns" row-key="id" bordered>
+        <template #op="slotProps">
+          <t-button size="small" theme="primary" style="margin-right: 8px;"
+            @click="openEditDialog(slotProps.row)">编辑</t-button>
+          <t-button size="small" theme="danger" @click="openDeleteDialog(slotProps.row)">删除</t-button>
+        </template>
+      </t-table>
+
+      <EbizSDialog ref="deleteDialogRef" :apiConfig="mockDeleteApiConfig" dialogType="delete" deleteConfirmMessage="确定要删除该用户吗？此操作不可恢复！"
+        @dialog-confirm="handleDelete">
+      </EbizSDialog>
+
+      <EbizSDialog ref="editDialogRef" dialogType="edit" title="编辑用户" :rules="formRules" layout="vertical"
+        labelWidth="100px" :detailApiConfig="mockDetailApiConfig" :apiConfig="mockApiConfig" @detail-loaded="handleDetailLoaded"
+        @dialog-confirm="handleEditSubmit">
+        <template #body>
+          <t-form-item label="用户名" name="username">
+            <t-input v-model="editUsername" placeholder="请输入用户名"></t-input>
+          </t-form-item>
+          <t-form-item label="电子邮箱" name="email">
+            <t-input v-model="editEmail" placeholder="请输入电子邮箱"></t-input>
+          </t-form-item>
+          <t-form-item label="年龄" name="age">
+            <t-input-number v-model="editAge" placeholder="请输入年龄"></t-input-number>
+          </t-form-item>
+        </template>
+      </EbizSDialog>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+import { EbizSDialog } from '../index.js';
+import { 
+  Button as TButton, 
+  FormItem as TFormItem, 
+  Input as TInput, 
+  InputNumber as TInputNumber, 
+  Table as TTable,
+  Space as TSpace,
+  MessagePlugin 
+} from 'tdesign-vue-next';
+
+// 标准弹窗引用
+const normalDialogRef = ref(null);
+
+// 表单弹窗相关
+const formDialogRef = ref(null);
+const formUsername = ref('');
+const formEmail = ref('');
+const formAge = ref(18);
+
+// 编辑弹窗相关
+const editDialogRef = ref(null);
+const editUsername = ref('');
+const editEmail = ref('');
+const editAge = ref(18);
+
+// 表单验证规则
+const formRules = {
+  username: [
+    { required: true, message: '用户名不能为空', type: 'error' },
+    { min: 3, message: '用户名不能少于3个字符', type: 'error' }
+  ],
+  email: [
+    { required: true, message: '邮箱不能为空', type: 'error' },
+    { pattern: /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/, message: '请输入正确的邮箱格式', type: 'error' }
+  ],
+  age: [
+    { required: true, message: '年龄不能为空', type: 'error' },
+    { validator: (val) => val >= 18, message: '年龄必须大于等于18岁', type: 'error' }
+  ]
+};
+
+// 表格数据
+const tableData = reactive([
+  { id: 1, username: '张三', email: 'zhangsan@example.com', age: 28 },
+  { id: 2, username: '李四', email: 'lisi@example.com', age: 32 },
+  { id: 3, username: '王五', email: 'wangwu@example.com', age: 25 }
+]);
+
+// 表格列定义
+const columns = [
+  { colKey: 'id', title: 'ID', width: 80 },
+  { colKey: 'username', title: '用户名' },
+  { colKey: 'email', title: '电子邮箱' },
+  { colKey: 'age', title: '年龄' },
+  { colKey: 'op', title: '操作', width: 180 }
+];
+
+// 删除弹窗相关
+const deleteDialogRef = ref(null);
+const currentDeleteRow = ref(null);
+
+// 编辑弹窗相关
+const currentEditRow = ref(null);
+
+const mockApiConfig = {
+  "key": "testInsert",
+  "apiId": 1955,
+  "apiType": 5
+}
+// 模拟详情API配置
+const mockDetailApiConfig = {
+  "key": "testDetail",
+  "apiId": 2157,
+  "apiType": 1
+};
+const mockDeleteApiConfig = {
+  "key": "testDelete",
+  "apiId": 2158,
+  "apiType": 1
+}
+
+// 打开标准弹窗
+const openNormalDialog = () => {
+  normalDialogRef.value.openDialog();
+};
+
+// 打开表单弹窗
+const openFormDialog = () => {
+  formUsername.value = '';
+  formEmail.value = '';
+  formAge.value = 18;
+  
+  formDialogRef.value.openDialog({
+    formData: {
+      username: formUsername,
+      email: formEmail,
+      age: formAge
+    }
+  });
+};
+
+// 重置表单数据
+const resetForm = () => {
+  if (formDialogRef.value) {
+    const result = formDialogRef.value.resetFormData();
+    MessagePlugin.info(result.message);
+  }
+};
+
+// 验证表单数据
+const validateFormData = async () => {
+  if (formDialogRef.value) {
+    const result = await formDialogRef.value.validateForm();
+    if (result.success) {
+      MessagePlugin.success(result.message);
+    } else {
+      MessagePlugin.error(result.message);
+    }
+  }
+};
+
+// 获取表单数据
+const getFormDataDemo = () => {
+  if (formDialogRef.value) {
+    const formData = formDialogRef.value.getFormData();
+    MessagePlugin.info(`当前表单数据: ${JSON.stringify(formData)}`);
+  }
+};
+
+// 处理表单提交
+const handleFormSubmit = ({ formData }) => {
+  MessagePlugin.success(`表单提交成功: ${JSON.stringify(formData)}`);
+  
+  // 添加到表格中
+  const newId = Math.max(...tableData.map(item => item.id)) + 1;
+  tableData.push({
+    id: newId,
+    username: formData.username,
+    email: formData.email,
+    age: formData.age
+  });
+};
+
+// 打开删除确认弹窗
+const openDeleteDialog = (row) => {
+  currentDeleteRow.value = row;
+  deleteDialogRef.value.openDialog({
+    id: row.id
+  });
+};
+
+// 打开编辑弹窗
+const openEditDialog = (row) => {
+  // 保存当前编辑的行
+  currentEditRow.value = row;
+  
+  editUsername.value = row.username;
+  editEmail.value = row.email;
+  editAge.value = row.age;
+  
+  // 使用新增的方法打开弹窗并加载数据
+  editDialogRef.value.openDialog({
+    id: row.id
+  });
+};
+
+// 处理详情数据加载成功
+const handleDetailLoaded = (data) => {
+  // 详情数据加载成功后，会自动设置到表单中
+  MessagePlugin.info(`用户数据加载成功: ${data.username}`);
+};
+
+// 处理删除确认
+const handleDelete = async () => {
+  if (currentDeleteRow.value) {
+    const index = tableData.findIndex(item => item.id === currentDeleteRow.value.id);
+    if (index !== -1) {
+      tableData.splice(index, 1);
+      MessagePlugin.success('删除成功');
+    }
+  }
+};
+
+// 处理编辑提交
+const handleEditSubmit = async () => {
+  // 在真实环境中，API调用会由组件自动处理
+  // 这里模拟编辑成功后的处理
+  if (currentEditRow.value) {
+    const index = tableData.findIndex(item => item.id === currentEditRow.value.id);
+    if (index !== -1) {
+      // 获取表单数据
+      const formData = editDialogRef.value.getFormData();
+      
+      // 更新表格数据
+      tableData[index].username = formData.username;
+      tableData[index].email = formData.email;
+      tableData[index].age = formData.age;
+      
+      MessagePlugin.success('编辑成功');
+    }
+  }
+};
+</script>
+
+<style scoped>
+.ebiz-dialog-demo {
+  padding: 20px;
+}
+
+.demo-section {
+  margin-bottom: 30px;
+  padding: 20px;
+  border: 1px solid #dcdcdc;
+  border-radius: 6px;
+}
+
+.dialog-content {
+  padding: 10px;
+}
+
+h3 {
+  margin-top: 0;
+  margin-bottom: 16px;
+}
+</style> 

package/src/views/EbizSForm/index.vue

@@ -0,0 +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;
+}
+</style>