@ebiz/designer-components 0.0.18-beta.4 → 0.0.18-beta.40

package/package.json

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

package/src/apiService/mockDataService.js

@@ -0,0 +1,116 @@
+/**
+ * 模拟数据服务
+ * 用于组件演示，提供模拟的远程数据查询
+ */
+
+// 模拟用户数据
+const mockUsers = [
+  { id: '1', name: '张三', email: 'zhangsan@example.com', department: '研发部' },
+  { id: '2', name: '李四', email: 'lisi@example.com', department: '市场部' },
+  { id: '3', name: '王五', email: 'wangwu@example.com', department: '设计部' },
+  { id: '4', name: '赵六', email: 'zhaoliu@example.com', department: '人力资源部' },
+  { id: '5', name: '钱七', email: 'qianqi@example.com', department: '财务部' },
+  { id: '6', name: '孙八', email: 'sunba@example.com', department: '行政部' },
+  { id: '7', name: '周九', email: 'zhoujiu@example.com', department: '销售部' },
+  { id: '8', name: '吴十', email: 'wushi@example.com', department: '客服部' },
+  { id: '9', name: '郑十一', email: 'zhengshiyi@example.com', department: '研发部' },
+  { id: '10', name: '王十二', email: 'wangshier@example.com', department: '市场部' },
+  { id: '11', name: '刘十三', email: 'liushisan@example.com', department: '设计部' },
+  { id: '12', name: '陈十四', email: 'chenshisi@example.com', department: '人力资源部' },
+  { id: '13', name: '杨十五', email: 'yangshiwu@example.com', department: '财务部' },
+  { id: '14', name: '黄十六', email: 'huangshiliu@example.com', department: '行政部' },
+  { id: '15', name: '赵十七', email: 'zhaoshiqi@example.com', department: '销售部' }
+];
+
+// 模拟产品数据
+const mockProducts = [
+  { id: 'p1', name: '笔记本电脑', price: 5999, category: '电子产品' },
+  { id: 'p2', name: '智能手机', price: 3999, category: '电子产品' },
+  { id: 'p3', name: '平板电脑', price: 2999, category: '电子产品' },
+  { id: 'p4', name: '智能手表', price: 1999, category: '电子产品' },
+  { id: 'p5', name: '耳机', price: 799, category: '电子产品' },
+  { id: 'p6', name: '办公桌', price: 1299, category: '办公家具' },
+  { id: 'p7', name: '办公椅', price: 899, category: '办公家具' },
+  { id: 'p8', name: '文件柜', price: 1099, category: '办公家具' },
+  { id: 'p9', name: '书架', price: 799, category: '办公家具' },
+  { id: 'p10', name: '打印机', price: 1599, category: '办公设备' }
+];
+
+// 模拟城市数据
+const mockCities = [
+  { id: 'c1', name: '北京', code: 'BJ', population: 21893095 },
+  { id: 'c2', name: '上海', code: 'SH', population: 24870895 },
+  { id: 'c3', name: '广州', code: 'GZ', population: 18676605 },
+  { id: 'c4', name: '深圳', code: 'SZ', population: 17494398 },
+  { id: 'c5', name: '成都', code: 'CD', population: 16580376 },
+  { id: 'c6', name: '杭州', code: 'HZ', population: 10360391 },
+  { id: 'c7', name: '武汉', code: 'WH', population: 12326500 },
+  { id: 'c8', name: '西安', code: 'XA', population: 12952907 },
+  { id: 'c9', name: '重庆', code: 'CQ', population: 31243200 },
+  { id: 'c10', name: '南京', code: 'NJ', population: 8335000 }
+];
+
+// 数据映射
+const dataMap = {
+  mockUserList: mockUsers.map(user => ({
+    id: user.id,
+    name: user.name,
+    label: `${user.name} (${user.department})`,
+    value: user.id
+  })),
+  mockProductList: mockProducts.map(product => ({
+    id: product.id,
+    name: product.name,
+    label: `${product.name} - ¥${product.price}`,
+    value: product.id
+  })),
+  mockCityList: mockCities.map(city => ({
+    id: city.id,
+    name: city.name,
+    label: city.name,
+    value: city.id
+  }))
+};
+
+/**
+ * 模拟数据获取函数
+ * @param {Object} params - 请求参数
+ * @param {Object} apiConfig - API配置
+ * @returns {Promise<Object>} 响应数据
+ */
+const mockFetch = (params, apiConfig) => {
+  return new Promise((resolve) => {
+    console.log('Mock fetch params:', params);
+    console.log('Mock fetch apiConfig:', apiConfig);
+    
+    // 模拟网络延迟
+    setTimeout(() => {
+      let result = [];
+      const { apiId } = apiConfig;
+      const keyword = params?.queryParams?.keyword || '';
+      
+      // 根据API ID获取对应的数据
+      if (dataMap[apiId]) {
+        result = dataMap[apiId];
+        
+        // 如果有关键字，进行筛选
+        if (keyword) {
+          result = result.filter(item => 
+            item.label.toLowerCase().includes(keyword.toLowerCase()) || 
+            item.name.toLowerCase().includes(keyword.toLowerCase())
+          );
+        }
+      }
+      
+      resolve({
+        code: 0,
+        data: result,
+        message: 'success'
+      });
+    }, 500); // 模拟 500ms 延迟
+  });
+};
+
+export default {
+  fetch: mockFetch
+}; 

package/src/apiService/simpleDataService.js

@@ -6,9 +6,8 @@
 
 import axios from 'axios'
 import { TinyNotify } from '@opentiny/vue'
-
 // 从环境变量获取API基础URL
-const API_BASE_URL = 'http://localhost:8090/api'
+const API_BASE_URL = 'http://' + window.location.host + '/api'
 
 /**
  * 创建axios实例
@@ -30,7 +29,7 @@ axiosInstance.interceptors.request.use(
     // 添加认证信息
     const token = localStorage.getItem('token')
     if (token) {
-      config.headers['Authorization'] = `Bearer ${token}`
+      config.headers['AppDataAuthorization'] = `Bearer ${token}`
     }
 
     // 如果是FormData格式，不设置Content-Type，让浏览器自动设置
@@ -57,7 +56,10 @@ axiosInstance.interceptors.response.use(
       return data.data
     } else {
       // message.error(data.message || '请求失败');
-      return Promise.reject(new Error(data.message || data.msg || '请求失败'))
+      return Promise.reject({
+        code: data.code,
+        message: data.message || data.msg || '请求失败'
+      })
     }
   },
   (error) => {
@@ -173,7 +175,7 @@ const dataService = {
     }
     params.apiId = apiConfig.apiId
     if (apiConfig.key) {
-      params.key = apiConfig.key
+      params.apiKey = apiConfig.key
     }
 
     const config = { ...defaultConfig, ...restConfig }

package/src/components/Button.vue

@@ -1,10 +1,8 @@
 <template>
     <tiny-tooltip :content="!isNormal && !apiConfig.apiId ? tooltipText : ''" placement="top">
-
-        <tiny-button :disabled="disabled" :type="type" :size="size" @click="click">
+        <tiny-button :disabled="disabled || loading" :type="type" :size="size" @click="click">
             <slot>{{ text }}</slot>
         </tiny-button>
-
     </tiny-tooltip>
 </template>
 
@@ -16,12 +14,11 @@ 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 { TinyButton, TinyTooltip } from '@opentiny/vue';
 import dataService from '../apiService/simpleDataService';
 
-
 const props = defineProps({
     text: {
         type: String,
@@ -35,25 +32,25 @@ 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: 'default'
     },
-    size: {//'large' | 'medium' | 'small' | 'mini'
+    size: {//'large' | 'medium' | 'small'
         type: String,
         default: 'medium'
     },
     apiConfig: {//接口配置
         type: Object,
-        default: {
+        default: () => ({
             key: null,
             apiId: null,
             apiType: ''
-        }
+        })
     },
     data: {
         type: Object,
-        default: {}
+        default: () => ({})
     },
     onClick: {
         type: Function,
@@ -61,11 +58,15 @@ const props = defineProps({
     },
     onPrepare: {//调用接口前置事件
         type: Function,
-        default: () => { }
+        default: () => true // 默认返回true，允许继续执行
     },
     onFinish: {//调用接口后置事件
         type: Function,
         default: () => { }
+    },
+    onError: {
+        type: Function,
+        default: () => { }
     }
 })
 
@@ -82,23 +83,70 @@ 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)
+
+// 检查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 = () => {
+const click = async (e) => {
+    // 总是调用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()
+    emit('click', e)
+
+    // 如果是普通按钮或API配置无效，不调用接口
+    if (isNormal.value || !isValidApiConfig()) {
+        return
+    }
+
+    try {
+        // 设置加载状态
+        loading.value = true
+        emit('loading', true)
+
+        // 调用前置处理并获取返回值
+        const shouldContinue = props.onPrepare()
+        emit('prepare', shouldContinue)
+
+        // 只有当返回值明确为false时才中断，undefined或其他值都继续执行
+        if (shouldContinue === false) {
+            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('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>

package/src/components/EbizDetailBlock.vue

@@ -0,0 +1,82 @@
+<template>
+    <div class="ebiz-detail-block">
+        <t-row v-for="(item, index) in detailItems" :key="index" class="detail-item">
+            <t-col :span="6" class="label" :style="labelStyle">{{ item.label }}</t-col>
+            <t-col :span="18" class="value" :style="valueStyle">{{ item.value }}</t-col>
+        </t-row>
+    </div>
+</template>
+
+<script lang="js" setup>
+import { computed, toRefs } from 'vue'
+import { Row as TRow, Col as TCol } from 'tdesign-vue-next'
+
+const props = defineProps({
+    model: {
+        type: Object,
+        default: () => { }
+    },
+    labelMap: {
+        type: Object,
+        default: () => { }
+    },
+    gap: {
+        type: [String, Number],
+        default: '0'
+    },
+    labelSize: {
+        type: [String, Number],
+        default: '14'
+    },
+    labelColor: {
+        type: String,
+        default: '#86909C'
+    },
+    valueSize: {
+        type: [String, Number],
+        default: '14'
+    },
+    valueColor: {
+        type: String,
+        default: '#0A0A0A'
+    }
+})
+
+const { model, labelMap, gap, labelSize, labelColor, valueSize, valueColor } = toRefs(props)
+
+const labelStyle = computed(() => ({
+    fontSize: typeof labelSize.value === 'number' ? `${labelSize.value}px` : labelSize.value,
+    color: labelColor.value,
+    marginBottom: typeof gap.value === 'number' ? `${gap.value}px` : gap.value
+}))
+
+const valueStyle = computed(() => ({
+    fontSize: typeof valueSize.value === 'number' ? `${valueSize.value}px` : valueSize.value,
+    color: valueColor.value
+}))
+
+const detailItems = computed(() => {
+    return Object.entries(model.value).map(([key, value]) => ({
+        label: labelMap.value[key] || key,
+        value: value || '--'
+    }))
+})
+</script>
+
+<style scoped>
+.ebiz-detail-block {
+    padding: 16px;
+}
+
+.detail-item {
+    line-height: 32px;
+}
+
+.label {
+    width: 50%;
+}
+
+.value {
+    width: 50%;
+}
+</style>

package/src/components/EbizDialog.vue

@@ -0,0 +1,249 @@
+<template>
+    <t-dialog
+        v-model:visible="dialogVisible"
+        :attach="attach"
+        :body-class="bodyClass"
+        :body-scroll-lock="bodyScrollLock"
+        :cancel-btn="cancelBtn"
+        :class-prefix="classPrefix"
+        :close-btn="closeBtn"
+        :close-on-esc-keydown="closeOnEscKeydown"
+        :close-on-overlay-click="closeOnOverlayClick"
+        :confirm-btn="confirmBtn"
+        :content="content"
+        :default-visible="defaultVisible"
+        :destroy-on-close="destroyOnClose"
+        :dialog-class="dialogClass"
+        :draggable="draggable"
+        :footer="footer"
+        :header="header"
+        :mode="mode"
+        :placement="placement"
+        :prevent-scroll-through="preventScrollThrough"
+        :show-overlay="showOverlay"
+        :top="top"
+        :width="width"
+        :zIndex="zIndex"
+        @cancel="handleCancel"
+        @close="handleClose"
+        @closed="handleClosed"
+        @confirm="handleConfirm"
+        @opened="handleOpened"
+        @overlay-click="handleOverlayClick"
+        @update:visible="handleUpdateVisible"
+    >
+        <!-- 默认插槽 -->
+        <slot></slot>
+        
+        <!-- 页脚插槽 -->
+        <template v-if="$slots.footer" #footer>
+            <slot name="footer"></slot>
+        </template>
+        
+        <!-- 头部插槽 -->
+        <template #header>
+            <slot name="header">{{ title }}</slot>
+        </template>
+    </t-dialog>
+</template>
+
+<script>
+export default {
+    name: "EbizDialog"
+}
+</script>
+
+<script setup>
+import { ref, defineProps, defineEmits, watch } from 'vue';
+import { Dialog as TDialog } from 'tdesign-vue-next';
+
+// 定义组件接收的属性
+const props = defineProps({
+    // 对话框挂载的节点
+    attach: {
+        type: [String, Function, Element],
+        default: 'body'
+    },
+    // 对话框内容的类名
+    bodyClass: {
+        type: String,
+        default: ''
+    },
+    // 是否锁定body滚动
+    bodyScrollLock: {
+        type: Boolean,
+        default: true
+    },
+    // 取消按钮配置
+    cancelBtn: {
+        type: [String, Object, Boolean],
+        default: null
+    },
+    // 类名前缀
+    classPrefix: {
+        type: String,
+        default: 't'
+    },
+    // 关闭按钮配置
+    closeBtn: {
+        type: [String, Object, Boolean],
+        default: true
+    },
+    // 是否支持按ESC键关闭对话框
+    closeOnEscKeydown: {
+        type: Boolean,
+        default: true
+    },
+    // 点击蒙层是否关闭
+    closeOnOverlayClick: {
+        type: Boolean,
+        default: true
+    },
+    // 确认按钮配置
+    confirmBtn: {
+        type: [String, Object, Boolean],
+        default: '确认'
+    },
+    // 对话框内容
+    content: {
+        type: [String, Function],
+        default: ''
+    },
+    // 默认是否显示对话框
+    defaultVisible: {
+        type: Boolean,
+        default: false
+    },
+    // 关闭时是否销毁对话框
+    destroyOnClose: {
+        type: Boolean,
+        default: false
+    },
+    // 对话框样式类
+    dialogClass: {
+        type: String,
+        default: ''
+    },
+    // 是否可拖拽
+    draggable: {
+        type: Boolean,
+        default: false
+    },
+    // 底部内容
+    footer: {
+        type: [Boolean, Function],
+        default: true
+    },
+    // 头部内容
+    header: {
+        type: [Boolean, Function],
+        default: true
+    },
+    // 对话框类型
+    mode: {
+        type: String,
+        default: 'modal',
+        validator: (val) => ['modal', 'modeless', 'full-screen'].includes(val)
+    },
+    // 对话框位置
+    placement: {
+        type: String,
+        default: 'top',
+        validator: (val) => ['top', 'center'].includes(val)
+    },
+    // 防止滚动穿透
+    preventScrollThrough: {
+        type: Boolean,
+        default: true
+    },
+    // 是否显示遮罩层
+    showOverlay: {
+        type: Boolean,
+        default: true
+    },
+    // 对话框标题
+    title: {
+        type: [String, Function],
+        default: ''
+    },
+    // 距离顶部的位置
+    top: {
+        type: [String, Number],
+        default: '15%'
+    },
+    // 对话框可见性
+    visible: {
+        type: Boolean,
+        default: undefined
+    },
+    // 对话框宽度
+    width: {
+        type: [String, Number],
+        default: '500px'
+    },
+    // 对话框层级
+    zIndex: {
+        type: Number,
+        default: 2500
+    }
+});
+
+// 定义组件的事件
+const emit = defineEmits([
+    'cancel', 
+    'close', 
+    'closed',
+    'confirm',
+    'opened',
+    'overlay-click',
+    'update:visible'
+]);
+
+// 内部维护的可见性状态
+const dialogVisible = ref(props.visible !== undefined ? props.visible : props.defaultVisible);
+
+// 监听visible属性变化
+watch(() => props.visible, (newValue) => {
+    dialogVisible.value = newValue;
+});
+
+// 取消按钮点击事件
+const handleCancel = (e) => {
+    emit('cancel', e);
+};
+
+// 关闭事件
+const handleClose = (e) => {
+    emit('close', e);
+};
+
+// 关闭动画结束后触发
+const handleClosed = () => {
+    emit('closed');
+};
+
+// 确认按钮点击事件
+const handleConfirm = (e) => {
+    emit('confirm', e);
+};
+
+// 对话框打开动画结束后触发
+const handleOpened = () => {
+    emit('opened');
+};
+
+// 点击遮罩层触发
+const handleOverlayClick = (context) => {
+    emit('overlay-click', context);
+};
+
+// 可见性变化事件
+const handleUpdateVisible = (visible) => {
+    dialogVisible.value = visible;
+    emit('update:visible', visible);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style>