@ebiz/designer-components 0.0.25 → 0.0.27

package/src/components/EbizTdesignButtonDialog.vue

@@ -0,0 +1,360 @@
+<template>
+  <div class="ebiz-tdesign-button-dialog">
+    <t-button
+      :theme="buttonTheme"
+      :variant="buttonVariant"
+      :size="buttonSize"
+      :block="buttonBlock"
+      :shape="buttonShape"
+      :disabled="buttonDisabled"
+      :loading="buttonLoading"
+      :icon="buttonIcon"
+      @click="handleButtonClick"
+    >
+      <template v-if="$slots.buttonContent">
+        <slot name="buttonContent"></slot>
+      </template>
+      <template v-else>
+        {{ buttonText }}
+      </template>
+    </t-button>
+
+    <t-dialog
+      v-model:visible="dialogVisible"
+      :header="title || computedTitle"
+      :width="dialogWidth"
+      :top="dialogTop"
+      :attach="dialogAttach"
+      :destroy-on-close="dialogDestroyOnClose"
+      :mode="dialogMode"
+      :placement="dialogPlacement"
+      :show-overlay="dialogShowOverlay"
+      :close-on-esc-keydown="dialogCloseOnEscKeydown"
+      :close-on-overlay-click="dialogCloseOnOverlayClick"
+      :show-footer="dialogShowFooter"
+      @close="handleDialogClose"
+      @confirm="handleDialogConfirm"
+      @cancel="handleDialogCancel"
+    >
+      <template #header>
+        <slot name="header">
+          <div :class="['dialog-header', dialogType === 'delete' ? 'dialog-header-delete' : '']">
+            {{ title || computedTitle }}
+          </div>
+        </slot>
+      </template>
+
+      <template #body>
+        <slot name="body">
+          <div v-if="dialogType === 'delete'" class="delete-confirm-content">
+            <t-icon name="error-circle" size="large" class="delete-icon" />
+            <p class="delete-message">{{ deleteConfirmMessage }}</p>
+          </div>
+        </slot>
+      </template>
+
+      <template #footer>
+        <slot name="footer">
+          <t-space>
+            <t-button v-if="cancelText" theme="default" @click="handleDialogCancel">{{ cancelText }}</t-button>
+            <t-button v-if="confirmText" theme="primary" :loading="apiLoading" @click="handleDialogConfirm">{{ confirmText }}</t-button>
+          </t-space>
+        </slot>
+      </template>
+    </t-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { Button as TButton, Dialog as TDialog, Space as TSpace, MessagePlugin, Icon as TIcon } from 'tdesign-vue-next'
+import dataService from '../apiService/simpleDataService'
+
+const props = defineProps({
+  // 弹窗类型
+  dialogType: {
+    type: String,
+    default: 'normal', // 'normal', 'add', 'delete'
+    validator: (value) => ['normal', 'add', 'delete'].includes(value)
+  },
+  
+  // 删除确认消息
+  deleteConfirmMessage: {
+    type: String,
+    default: '确定要删除该数据吗？此操作不可逆，请谨慎操作。'
+  },
+  
+  // 按钮基础属性
+  buttonText: {
+    type: String,
+    default: ''
+  },
+  // 按钮样式属性
+  buttonTheme: {
+    type: String,
+    default: ''
+  },
+  buttonVariant: {
+    type: String,
+    default: 'base'
+  },
+  buttonSize: {
+    type: String,
+    default: 'medium'
+  },
+  buttonBlock: {
+    type: Boolean,
+    default: false
+  },
+  buttonShape: {
+    type: String,
+    default: 'rectangle'
+  },
+  buttonDisabled: {
+    type: Boolean,
+    default: false
+  },
+  buttonLoading: {
+    type: Boolean,
+    default: false
+  },
+  buttonIcon: {
+    type: String,
+    default: ''
+  },
+  
+  // 弹窗基础属性
+  title: {
+    type: String,
+    default: ''
+  },
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  confirmText: {
+    type: String,
+    default: undefined
+  },
+  cancelText: {
+    type: String,
+    default: undefined
+  },
+  
+  // 弹窗样式和行为属性
+  dialogWidth: {
+    type: [String, Number],
+    default: '500px'
+  },
+  dialogTop: {
+    type: [String, Number],
+    default: '15vh'
+  },
+  dialogAttach: {
+    type: [String, Function],
+    default: 'body'
+  },
+  dialogDestroyOnClose: {
+    type: Boolean,
+    default: false
+  },
+  dialogMode: {
+    type: String,
+    default: 'modal'
+  },
+  dialogPlacement: {
+    type: String,
+    default: 'top'
+  },
+  dialogShowOverlay: {
+    type: Boolean,
+    default: true
+  },
+  dialogCloseOnEscKeydown: {
+    type: Boolean,
+    default: true
+  },
+  dialogCloseOnOverlayClick: {
+    type: Boolean,
+    default: true
+  },
+  dialogShowFooter: {
+    type: Boolean,
+    default: true
+  },
+  
+  // API配置
+  apiConfig: {
+    type: Object,
+    default: () => null
+  },
+  // 是否在API调用成功后自动关闭弹窗
+  closeOnSuccess: {
+    type: Boolean,
+    default: true
+  },
+  // 是否显示API调用的结果消息
+  showResultMessage: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emit = defineEmits([
+  'update:modelValue',
+  'button-click',
+  'dialog-close',
+  'dialog-confirm',
+  'dialog-cancel',
+  'api-success',
+  'api-error'
+])
+
+const computedTitle = computed(() => {
+  switch (props.dialogType) {
+    case 'add': return '添加数据';
+    case 'delete': return '删除确认';
+    default: return '标题';
+  }
+})
+
+// 初始化dialogVisible
+const dialogVisible = ref(props.visible)
+const apiLoading = ref(false)
+
+// 监听props的visible变化
+watch(() => props.visible, (newVal) => {
+  dialogVisible.value = newVal
+})
+
+// 监听dialogVisible变化，同步更新modelValue
+watch(dialogVisible, (newVal) => {
+  emit('update:modelValue', newVal)
+})
+
+// 按钮点击事件
+const handleButtonClick = (e) => {
+  dialogVisible.value = true
+  emit('button-click', e)
+}
+
+// 弹窗关闭事件
+const handleDialogClose = (e) => {
+  dialogVisible.value = false
+  emit('dialog-close', e)
+}
+
+// API调用方法
+const callApi = async () => {
+  if (!props.apiConfig) return null
+  
+  try {
+    apiLoading.value = true
+    const { url, method, data, params, headers } = props.apiConfig
+    
+    // 构建请求配置
+    const requestConfig = {
+      url,
+      method: method || (props.dialogType === 'delete' ? 'delete' : props.dialogType === 'add' ? 'post' : 'get'),
+      data,
+      params,
+      headers
+    }
+    
+    // 调用dataService进行API请求
+    const response = await dataService.request(requestConfig)
+    
+    // 显示成功消息
+    if (props.showResultMessage) {
+      const successMessage = props.dialogType === 'delete' 
+        ? '删除成功' 
+        : props.dialogType === 'add' 
+          ? '添加成功' 
+          : '操作成功'
+      MessagePlugin.success(successMessage)
+    }
+    
+    // 触发成功事件
+    emit('api-success', response)
+    
+    // 如果设置了成功后关闭，则关闭弹窗
+    if (props.closeOnSuccess) {
+      dialogVisible.value = false
+    }
+    
+    return response
+  } catch (error) {
+    // 显示错误消息
+    if (props.showResultMessage) {
+      const errorPrefix = props.dialogType === 'delete' 
+        ? '删除失败' 
+        : props.dialogType === 'add' 
+          ? '添加失败' 
+          : '操作失败'
+      MessagePlugin.error(`${errorPrefix}: ${error.message || '未知错误'}`)
+    }
+    
+    // 触发错误事件
+    emit('api-error', error)
+    return null
+  } finally {
+    apiLoading.value = false
+  }
+}
+
+// 弹窗确认事件
+const handleDialogConfirm = async (e) => {
+  emit('dialog-confirm', e)
+  
+  // 对于非普通类型的弹窗，总是尝试调用API
+  if (props.dialogType !== 'normal') {
+    if (props.apiConfig) {
+      await callApi()
+    } else {
+      console.warn(`${props.dialogType} 类型的弹窗没有配置 apiConfig`)
+      dialogVisible.value = false
+    }
+  } else {
+    // 普通弹窗的行为
+    if (props.apiConfig) {
+      await callApi()
+    } else {
+      dialogVisible.value = false
+    }
+  }
+}
+
+// 弹窗取消事件
+const handleDialogCancel = (e) => {
+  dialogVisible.value = false
+  emit('dialog-cancel', e)
+}
+</script>
+
+<style scoped>
+.ebiz-tdesign-button-dialog {
+  display: inline-block;
+}
+
+.dialog-header-delete {
+  color: var(--td-error-color, #e34d59);
+}
+
+.delete-confirm-content {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+}
+
+.delete-icon {
+  font-size: 24px;
+  color: var(--td-error-color, #e34d59);
+  margin-right: 12px;
+}
+
+.delete-message {
+  margin: 0;
+  font-size: 14px;
+  line-height: 22px;
+}
+</style> 

package/src/index.js

@@ -60,6 +60,9 @@ import EbizTreeMergeTable from './components/EbizTreeMergeTable.vue';
 import EbizTdesignLoading from './components/EbizTdesignLoading.vue';
 import EbizAutoForm from './components/EbizAutoForm.vue';
 import EbizDepartmentSelector from './components/EbizDepartmentSelector.vue';
+import EbizTdesignButtonDialog from './components/EbizTdesignButtonDialog.vue';
+import EbizSForm from './components/EbizSForm.vue';
+import EbizSFormItem from './components/EbizSFormItem.vue';
 import { MessagePlugin as EbizMessage } from 'tdesign-vue-next';
 
 // import EbizDescriptions from './components/EbizDescriptions.vue';
@@ -191,5 +194,10 @@ export {
   EbizDescriptionsItem,
   TDescriptionsItem,
   EbizTdesignLoading,
-  EbizLoading
+  EbizLoading,
+  // 弹窗按钮组件
+  EbizTdesignButtonDialog,
+  // PC端表单组件
+  EbizSForm,
+  EbizSFormItem
 };

package/src/router/index.js

@@ -310,6 +310,18 @@ const routes = [
     name: 'EbizDepartmentSelector',
     component: () => import('../views/EbizDepartmentSelectorDemo.vue'),
     meta: { title: 'Ebiz部门选择器组件示例' }
+  },
+  {
+    path: '/ebiz-tdesign-button-dialog',
+    name: 'EbizTdesignButtonDialog',
+    component: () => import('../views/EbizTdesignButtonDialogExample.vue'),
+    meta: { title: '弹窗按钮组件示例' }
+  },
+  {
+    path: '/ebiz-s-form',
+    name: 'EbizSForm',
+    component: () => import('../views/EbizSFormDemo.vue'),
+    meta: { title: 'PC端表单组件示例' }
   }
 ]