@ebiz/designer-components 0.1.2 → 0.1.5

package/src/components/EbizTdesignButtonDialog.vue

@@ -1,333 +1,333 @@
-<template>
-  <div class="ebiz-tdesign-button-dialog">
-    <t-button :theme="buttonTheme" :variant="buttonVariant" :size="buttonSize" :block="buttonBlock" :shape="buttonShape"
-      :disabled="buttonDisabled" :loading="buttonLoading" @click="handleButtonClick">
-      <template v-if="buttonIcon" #icon>
-        <t-icon :name="buttonIcon"></t-icon>
-      </template>
-      <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>
-    </t-dialog>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, watch } from 'vue'
-import { Button as TButton, Dialog as TDialog, 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;
-}
+<template>
+  <div class="ebiz-tdesign-button-dialog">
+    <t-button :theme="buttonTheme" :variant="buttonVariant" :size="buttonSize" :block="buttonBlock" :shape="buttonShape"
+      :disabled="buttonDisabled" :loading="buttonLoading" @click="handleButtonClick">
+      <template v-if="buttonIcon" #icon>
+        <t-icon :name="buttonIcon"></t-icon>
+      </template>
+      <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>
+    </t-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { Button as TButton, Dialog as TDialog, 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>