@ebiz/designer-components 0.0.18 → 0.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -22,7 +22,7 @@
     "@opentiny/vue-icon": "~3.20.0",
     "axios": "^1.8.1",
     "echarts": "^5.6.0",
-    "tdesign-vue-next": "^1.10.6",
+    "tdesign-vue-next": "^1.11.5",
     "unplugin-auto-import": "^19.0.0",
     "unplugin-vue-components": "^28.0.0",
     "vue": "^3.5.13",
@@ -32,6 +32,7 @@
     "@opentiny/tiny-engine-mock": "^2.1.0",
     "@opentiny/tiny-engine-vite-config": "^2.1.0",
     "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue-jsx": "^4.0.1",
     "less": "^4.2.0",
     "vite": "^6.0.5",
     "vite-plugin-proxy": "^0.5.0"

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

@@ -4,11 +4,10 @@
  * 所有接口均使用POST方法提交
  */
 
-import axios from "axios";
-import { TinyNotify } from "@opentiny/vue";
-
+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实例
@@ -17,10 +16,10 @@ const axiosInstance = axios.create({
   baseURL: API_BASE_URL,
   timeout: 30000,
   headers: {
-    "Content-Type": "application/json",
-    Accept: "application/json",
-  },
-});
+    'Content-Type': 'application/json',
+    Accept: 'application/json'
+  }
+})
 
 /**
  * 请求拦截器
@@ -28,110 +27,120 @@ const axiosInstance = axios.create({
 axiosInstance.interceptors.request.use(
   (config) => {
     // 添加认证信息
-    const token = localStorage.getItem("token");
+    const token = localStorage.getItem('token')
     if (token) {
-      config.headers["Authorization"] = `Bearer ${token}`;
+      config.headers['AppDataAuthorization'] = `Bearer ${token}`
+    }
+
+    // 如果是FormData格式，不设置Content-Type，让浏览器自动设置
+    if (config.data instanceof FormData) {
+      config.headers['Content-Type'] = undefined
     }
-    return config;
+
+    return config
   },
   (error) => {
-    return Promise.reject(error);
+    return Promise.reject(error)
   }
-);
+)
 
 /**
  * 响应拦截器
  */
 axiosInstance.interceptors.response.use(
   (response) => {
-    const { data } = response;
+    const { data } = response
 
     // 根据后端API的响应格式进行调整
     if (data.code === 0) {
-      return data.data;
+      return data.data
     } else {
       // message.error(data.message || '请求失败');
-      return Promise.reject(new Error(data.message || "请求失败"));
+      return Promise.reject({
+        code: data.code,
+        message: data.message || data.msg || '请求失败'
+      })
     }
   },
   (error) => {
     // 错误处理
     if (error.response) {
-      const { status } = error.response;
+      const { status } = error.response
 
       switch (status) {
         case 401:
           TinyNotify({
-            type: "warning",
-            title: "未授权",
-            message: "您无权限访问，请授权后重试",
-            position: "top-right",
-            duration: 2000,
-          });
-          break;
+            type: 'warning',
+            title: '未授权',
+            message: '您无权限访问，请授权后重试',
+            position: 'top-right',
+            duration: 2000
+          })
+          break
         case 403:
           TinyNotify({
-            type: "warning",
-            title: "权限不足",
-            message: "禁止访问，权限不足",
-            position: "top-right",
-            duration: 2000,
-          });
-          break;
+            type: 'warning',
+            title: '权限不足',
+            message: '禁止访问，权限不足',
+            position: 'top-right',
+            duration: 2000
+          })
+          break
         case 404:
           TinyNotify({
-            type: "warning",
-            title: "404",
-            message: "请求的资源不存在",
-            position: "top-right",
-            duration: 2000,
-          });
-          break;
+            type: 'warning',
+            title: '404',
+            message: '请求的资源不存在',
+            position: 'top-right',
+            duration: 2000
+          })
+          break
         case 500:
           TinyNotify({
-            type: "warning",
-            title: "错误",
-            message: "服务器内部错误",
-            position: "top-right",
-            duration: 2000,
-          });
-          break;
+            type: 'warning',
+            title: '错误',
+            message: '服务器内部错误',
+            position: 'top-right',
+            duration: 2000
+          })
+          break
         default:
           TinyNotify({
-            type: "warning",
-            title: "请求失败",
+            type: 'warning',
+            title: '请求失败',
             message: error.message,
-            position: "top-right",
-            duration: 2000,
-          });
+            position: 'top-right',
+            duration: 2000
+          })
       }
     } else {
       TinyNotify({
-        type: "error",
-        title: "网络错误",
+        type: 'error',
+        title: '网络错误',
         message: error.message,
-        position: "top-right",
-        duration: 2000,
-      });
+        position: 'top-right',
+        duration: 2000
+      })
       // message.error('网络错误，请检查您的网络连接');
     }
 
-    return Promise.reject(error);
+    return Promise.reject(error)
   }
-);
+)
 
 let apiMap = {
-  MULTIPLE_DATA_SEARCH: "/appdata/select",
-  DETAILS_DATA: "/appdata/detailData",
-  INTERFACE_PLUGIN: "/appdata/plugin",
-  DATA_INSERT: "/appdata/addData",
-  BATCH_DATA_INSERT: "/appdata/addDatas",
-  DATA_MODIFY: "/appdata/updateData",
-  BATCH_DATA_MODIFY: "/appdata/updateDatas",
-  DEL_DATA: "/appdata/delData",
-  BATCH_DEL_DATA: "/appdata/delDatas",
-  MULTIPLE_DATA_LINK_SEARCH: "/api/appdata/link/select",
-};
+  MULTIPLE_DATA_SEARCH: '/appdata/select',
+  DETAILS_DATA: '/appdata/detailData',
+  INTERFACE_PLUGIN: '/appdata/plugin',
+  DATA_INSERT: '/appdata/addData',
+  BATCH_DATA_INSERT: '/appdata/addDatas',
+  DATA_MODIFY: '/appdata/updateData',
+  BATCH_DATA_MODIFY: '/appdata/updateDatas',
+  DEL_DATA: '/appdata/delData',
+  BATCH_DEL_DATA: '/appdata/delDatas',
+  MULTIPLE_DATA_LINK_SEARCH: '/api/appdata/link/select',
+  FILE_UPLOAD: '/api/file/upload' // 文件上传API
+}
 
 /**
  * 数据服务
@@ -147,28 +156,125 @@ const dataService = {
    * @returns {Promise<any>} 响应数据
    * @example
    */
-  fetch: (params = {}, apiConfig = {}, url = "") => {
+  fetch: (params = {}, apiConfig = {}, url = '') => {
     if (!url) {
-      url = apiMap[apiConfig.apiType];
+      url = apiMap[apiConfig.apiType]
     }
 
-    const { apiId = "", ...restConfig } = apiConfig;
+    const { apiId = '', ...restConfig } = apiConfig
 
     const defaultConfig = {
       // 默认列表查询配置
       headers: {
-        "X-List-Query": "true",
+        'X-List-Query': 'true'
       },
-      timeout: 20000,
-    };
+      timeout: 20000
+    }
     if (!params) {
-      params = {};
+      params = {}
+    }
+    params.apiId = apiConfig.apiId
+    if (apiConfig.key) {
+      params.apiKey = apiConfig.key
     }
-    params.apiId = apiConfig.apiId;
 
-    const config = { ...defaultConfig, ...restConfig };
-    return axiosInstance.post(url, params, config);
+    const config = { ...defaultConfig, ...restConfig }
+    return axiosInstance.post(url, params, config)
   },
-};
 
-export default dataService;
+  /**
+   * 文件上传
+   * @param {string} url - 上传URL，默认使用apiMap中的FILE_UPLOAD
+   * @param {FormData} formData - 包含文件和其他数据的FormData
+   * @param {Function} onProgress - 上传进度回调函数，参数为0-100的进度百分比
+   * @returns {Promise<any>} 上传响应数据
+   */
+  upload: (url = '', formData, onProgress = () => {}) => {
+    // 如果没有指定URL，使用默认的文件上传URL
+    if (!url) {
+      url = apiMap.FILE_UPLOAD
+    }
+
+    // 确保FormData中的文件字段名是'file'
+    let fixedFormData = new FormData()
+    let fileFound = false
+
+    // 检查并修复FormData
+    if (formData instanceof FormData) {
+      // 由于FormData不能直接检查内容，我们使用迭代器
+      try {
+        // 在某些旧浏览器中可能不支持entries()
+        if (typeof formData.entries === 'function') {
+          for (let pair of formData.entries()) {
+            const [key, value] = pair
+
+            if (value instanceof File || value instanceof Blob) {
+              // 找到文件，使用正确的字段名
+              console.log(`Found file in field ${key}, adding as 'file'`)
+              fixedFormData.append('file', value)
+              fileFound = true
+            } else {
+              // 保留其他字段
+              fixedFormData.append(key, value)
+            }
+          }
+        } else {
+          // 如果不支持entries()，假设formData已经是正确的，直接使用
+          console.log('FormData.entries() not supported, using original FormData')
+          fixedFormData = formData
+          fileFound = true
+        }
+      } catch (e) {
+        console.error('Error processing FormData:', e)
+        // 出错时使用原始FormData
+        fixedFormData = formData
+      }
+    } else {
+      console.error('Invalid FormData:', formData)
+      return Promise.reject(new Error('FormData is required for file upload'))
+    }
+
+    // 如果没有找到文件，返回错误
+    if (!fileFound && typeof formData.entries === 'function') {
+      console.error('No file found in FormData')
+      return Promise.reject(new Error('No file found in FormData'))
+    }
+
+    // 上传配置
+    const config = {
+      timeout: 60000, // 上传超时时间加长
+      headers: {
+        // 让浏览器自动设置Content-Type和boundary
+        'Content-Type': undefined
+      },
+      onUploadProgress: (progressEvent) => {
+        // 计算上传进度百分比
+        const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+        onProgress(percentCompleted)
+      }
+    }
+
+    // 发起上传请求
+    console.log('Sending file upload request to:', url)
+    return axiosInstance.post(url, fixedFormData, config).then((response) => {
+      console.log('Upload server response:', response)
+
+      // 处理文件路径
+      // 如果返回的是相对路径，转换为完整URL
+      if (typeof response === 'string' && !response.startsWith('http')) {
+        // 判断路径是否以斜杠开头
+        const baseUrl = API_BASE_URL.endsWith('/') ? API_BASE_URL.slice(0, -1) : API_BASE_URL
+        const filePath = response.startsWith('/') ? response : `/${response}`
+
+        // 构建完整URL
+        const fullUrl = `${baseUrl}/files${filePath}`
+        console.log('Converted file path to full URL:', fullUrl)
+        return fullUrl
+      }
+
+      return response
+    })
+  }
+}
+
+export default dataService

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">
+        <t-button :disabled="disabled || loading" :theme="type" :size="size" @click="click">
             <slot>{{ text }}</slot>
-        </tiny-button>
-
+        </t-button>
     </tiny-tooltip>
 </template>
 
@@ -18,10 +16,10 @@ export default {
 <script lang='js' setup>
 
 import { ref, reactive, computed, toRef, toRefs } from 'vue';
-import { TinyButton, TinyTooltip, TinyNotify } from '@opentiny/vue';
+import { Button as TButton } from 'tdesign-vue-next';
+import { TinyTooltip } from '@opentiny/vue';
 import dataService from '../apiService/simpleDataService';
 
-
 const props = defineProps({
     text: {
         type: String,
@@ -35,24 +33,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'
+        default: 'primary'
     },
-    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,
@@ -60,11 +59,15 @@ const props = defineProps({
     },
     onPrepare: {//调用接口前置事件
         type: Function,
-        default: () => { }
+        default: () => true // 默认返回true，允许继续执行
     },
     onFinish: {//调用接口后置事件
         type: Function,
         default: () => { }
+    },
+    onError: {
+        type: Function,
+        default: () => { }
     }
 })
 
@@ -81,23 +84,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, { 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>