@ebiz/designer-components 0.1.1 → 0.1.4

package/src/views/EbizSDialogDemo.vue

@@ -1,302 +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;
-}
+<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>