@ebiz/designer-components 0.0.18-beta.34 → 0.0.18-beta.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.0.18-beta.34",
+  "version": "0.0.18-beta.38",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/Button.vue

@@ -1,9 +1,9 @@
 <template>
-    <tiny-tooltip :content="!isNormal && !apiConfig.apiId ? tooltipText : ''" placement="top">
-
-        123456
-
-    </tiny-tooltip>
+    <t-tooltip :content="!isNormal && !apiConfig.apiId ? tooltipText : ''" placement="top">
+        <t-button :disabled="disabled || loading" :theme="type" :size="size" :variant="variant" @click="click">
+            <slot>{{ text }}</slot>
+        </t-button>
+    </t-tooltip>
 </template>
 
 
@@ -14,12 +14,10 @@ export default {
 </script>
 
 <script lang='js' setup>
-
-import { ref, reactive, computed, toRef, toRefs } from 'vue';
-import { TinyButton, TinyTooltip, TinyNotify } from '@opentiny/vue';
+import { ref, toRefs, defineProps, defineEmits } from 'vue';
+import { Button as TButton, Tooltip as TTooltip } from 'tdesign-vue-next';
 import dataService from '../apiService/simpleDataService';
 
-
 const props = defineProps({
     text: {
         type: String,
@@ -33,25 +31,29 @@ const props = defineProps({
         type: Boolean,
         default: false
     },
-    type: {//'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
+    type: {//'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
         type: String,
-        default: 'primary'
+        default: 'default'
     },
-    size: {//'large' | 'medium' | 'small' | 'mini'
+    size: {//'large' | 'medium' | 'small'
         type: String,
         default: 'medium'
     },
+    variant: {//'base' | 'outline' | 'dashed' | 'text'
+        type: String,
+        default: 'base'
+    },
     apiConfig: {//接口配置
         type: Object,
-        default: {
+        default: () => ({
             key: null,
             apiId: null,
             apiType: ''
-        }
+        })
     },
     data: {
         type: Object,
-        default: {}
+        default: () => ({})
     },
     onClick: {
         type: Function,
@@ -59,11 +61,15 @@ const props = defineProps({
     },
     onPrepare: {//调用接口前置事件
         type: Function,
-        default: () => { }
+        default: () => true // 默认返回true，允许继续执行
     },
     onFinish: {//调用接口后置事件
         type: Function,
         default: () => { }
+    },
+    onError: {
+        type: Function,
+        default: () => { }
     }
 })
 
@@ -80,23 +86,72 @@ const apiMap = [
     'MULTIPLE_DATA_LINK_SEARCH'
 ];
 
-const emit = defineEmits(['click'])
+const emit = defineEmits(['click', 'success', 'error', 'loading', 'prepare'])
 
-const { text, isNormal, disabled, type, size, apiConfig, data, isUseMethod } = toRefs(props)
+const { text, isNormal, disabled, type, size, variant, apiConfig, data } = toRefs(props)
 
 const tooltipText = ref('请先设置接口配置')
+const loading = ref(false)
 
-const click = () => {
+// 检查API配置是否有效
+const isValidApiConfig = () => {
+    return apiConfig.value && apiConfig.value.apiId &&
+        typeof apiConfig.value.apiType === 'number' &&
+        apiConfig.value.apiType >= 0 &&
+        apiConfig.value.apiType < apiMap.length;
+}
+
+const click = async () => {
+    // 总是调用onClick回调
     props.onClick()
-    if (!isNormal.value && apiConfig.value.apiId) {
-        props.onPrepare()
-        dataService.fetch(data.value, { key: apiConfig.value.key, apiId: apiConfig.value.apiId, apiType: apiMap[apiConfig.value.apiType] }).then((res) => {
-            emit('click', res)
-            props.onFinish()
+
+    // 如果是普通按钮或API配置无效，不调用接口
+    if (isNormal.value || !isValidApiConfig()) {
+        emit('click', null)
+        return
+    }
+
+    try {
+        // 设置加载状态
+        loading.value = true
+        emit('loading', true)
+
+        // 调用前置处理并获取返回值
+        const shouldContinue = props.onPrepare()
+        emit('prepare', shouldContinue)
+
+        // 只有当返回值明确为false时才中断，undefined或其他值都继续执行
+        if (shouldContinue === false) {
+            emit('click', null)
+            return null
+        }
+
+        // 调用接口
+        const apiType = apiMap[apiConfig.value.apiType]
+        const res = await dataService.fetch(data.value, {
+            key: apiConfig.value.key,
+            apiId: apiConfig.value.apiId,
+            apiType
         })
+
+        // 成功处理
+        emit('click', res)
+        emit('success', res)
+        props.onFinish(res)
+
+        return res
+    } catch (error) {
+        // 错误处理
+        emit('error', error)
+        props.onError(error)
+
+        return null
+    } finally {
+        // 清除加载状态
+        loading.value = false
+        emit('loading', false)
     }
 }
-
 </script>
 
 <style lang='less' scoped></style>