@ebiz/designer-components 0.0.18-beta.6 → 0.0.18-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.0.18-beta.6",
+  "version": "0.0.18-beta.8",
   "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

@@ -8,7 +8,7 @@ import axios from 'axios'
 import { TinyNotify } from '@opentiny/vue'
 
 // 从环境变量获取API基础URL
-const API_BASE_URL =  window.location.host + "/api";
+const API_BASE_URL = 'http://' +  window.location.host + "/api";
 
 /**
  * 创建axios实例

package/src/apiService/simpleDataServiceAppData.js

@@ -0,0 +1,278 @@
+/**
+ * 简洁数据服务
+ * 提供基本的数据操作方法，包含列表查询、详情查询、数据写入、数据修改、数据删除
+ * 所有接口均使用POST方法提交
+ */
+
+import axios from 'axios'
+import { TinyNotify } from '@opentiny/vue'
+
+// 从环境变量获取API基础URL
+const API_BASE_URL = 'http://' + window.location.host + '/api'
+
+/**
+ * 创建axios实例
+ */
+const axiosInstance = axios.create({
+  baseURL: API_BASE_URL,
+  timeout: 30000,
+  headers: {
+    'Content-Type': 'application/json',
+    Accept: 'application/json'
+  }
+})
+
+/**
+ * 请求拦截器
+ */
+axiosInstance.interceptors.request.use(
+  (config) => {
+    // 添加认证信息
+    const token = localStorage.getItem('token')
+    if (token) {
+      config.headers['AppDataAuthorization'] = `Bearer ${token}`
+    }
+
+    // 如果是FormData格式，不设置Content-Type，让浏览器自动设置
+    if (config.data instanceof FormData) {
+      config.headers['Content-Type'] = undefined
+    }
+
+    return config
+  },
+  (error) => {
+    return Promise.reject(error)
+  }
+)
+
+/**
+ * 响应拦截器
+ */
+axiosInstance.interceptors.response.use(
+  (response) => {
+    const { data } = response
+
+    // 根据后端API的响应格式进行调整
+    if (data.code === 0) {
+      return data.data
+    } else {
+      // message.error(data.message || '请求失败');
+      return Promise.reject(new Error(data.message || data.msg || '请求失败'))
+    }
+  },
+  (error) => {
+    // 错误处理
+    if (error.response) {
+      const { status } = error.response
+
+      switch (status) {
+        case 401:
+          TinyNotify({
+            type: 'warning',
+            title: '未授权',
+            message: '您无权限访问，请授权后重试',
+            position: 'top-right',
+            duration: 2000
+          })
+          break
+        case 403:
+          TinyNotify({
+            type: 'warning',
+            title: '权限不足',
+            message: '禁止访问，权限不足',
+            position: 'top-right',
+            duration: 2000
+          })
+          break
+        case 404:
+          TinyNotify({
+            type: 'warning',
+            title: '404',
+            message: '请求的资源不存在',
+            position: 'top-right',
+            duration: 2000
+          })
+          break
+        case 500:
+          TinyNotify({
+            type: 'warning',
+            title: '错误',
+            message: '服务器内部错误',
+            position: 'top-right',
+            duration: 2000
+          })
+          break
+        default:
+          TinyNotify({
+            type: 'warning',
+            title: '请求失败',
+            message: error.message,
+            position: 'top-right',
+            duration: 2000
+          })
+      }
+    } else {
+      TinyNotify({
+        type: 'error',
+        title: '网络错误',
+        message: error.message,
+        position: 'top-right',
+        duration: 2000
+      })
+      // message.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',
+  FILE_UPLOAD: '/api/file/upload' // 文件上传API
+}
+
+/**
+ * 数据服务
+ */
+const dataServiceAppData = {
+  /**
+   * 请求数据 (POST方法)
+   * @param {string} url - 请求URL
+   * @param {Object} [params] - 查询参数
+   * @param {Object} [apiConfig] - API配置
+   * @param {string} [apiConfig.apiId] - API标识
+   * @param {string} [apiConfig.apiType] - API类型
+   * @returns {Promise<any>} 响应数据
+   * @example
+   */
+  fetch: (params = {}, apiConfig = {}, url = '') => {
+    if (!url) {
+      url = apiMap[apiConfig.apiType]
+    }
+
+    const { apiId = '', ...restConfig } = apiConfig
+
+    const defaultConfig = {
+      // 默认列表查询配置
+      headers: {
+        'X-List-Query': 'true'
+      },
+      timeout: 20000
+    }
+    if (!params) {
+      params = {}
+    }
+    params.apiId = apiConfig.apiId
+    if (apiConfig.key) {
+      params.key = apiConfig.key
+    }
+
+    const config = { ...defaultConfig, ...restConfig }
+    return axiosInstance.post(url, params, config)
+  },
+
+  /**
+   * 文件上传
+   * @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 dataServiceAppData

package/src/components/Button.vue

@@ -19,7 +19,7 @@ export default {
 
 import { ref, reactive, computed, toRef, toRefs } from 'vue';
 import { TinyButton, TinyTooltip, TinyNotify } from '@opentiny/vue';
-import dataService from '../apiService/simpleDataService';
+import dataServiceAppData from '../apiService/simpleDataServiceAppData';
 
 
 const props = defineProps({
@@ -92,7 +92,7 @@ const click = () => {
     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) => {
+        dataServiceAppData.fetch(data.value, { key: apiConfig.value.key, apiId: apiConfig.value.apiId, apiType: apiMap[apiConfig.value.apiType] }).then((res) => {
             emit('click', res)
             props.onFinish()
         })

package/src/components/EbizRemoteSelect.vue

@@ -1,14 +1,15 @@
 <template>
-    <tiny-select ref="selectRef" v-model="selectedValue" :options="options" :loading="loading" :remote="true"
-        :remote-method="handleRemoteSearch" :multiple="multiple" :placeholder="placeholder" :clearable="clearable"
-        :disabled="disabled" @change="handleChange" @focus="handleRemoteSearch">
-        <template #prefix>
+    <t-select ref="selectRef" v-model="selectedValue" :options="options" :loading="loading" :filterable="true"
+        @search="handleRemoteSearch" :multiple="multiple" :placeholder="placeholder" :clearable="clearable"
+        :disabled="disabled" :size="size" :empty="emptyText" :popupProps="popupProps" @change="handleChange"
+        @focus="handleFocus" @blur="handleBlur">
+        <template #prefixIcon v-if="$slots.prefix">
             <slot name="prefix"></slot>
         </template>
-        <template #suffix>
+        <template #suffixIcon v-if="$slots.suffix">
             <slot name="suffix"></slot>
         </template>
-    </tiny-select>
+    </t-select>
 </template>
 
 <script>
@@ -19,8 +20,8 @@ export default {
 
 <script setup>
 import { ref, onMounted, toRefs, computed } from 'vue';
-import { Select as TinySelect } from '@opentiny/vue';
-import dataService from "../apiService/simpleDataService";
+import { Select as TSelect } from 'tdesign-vue-next';
+import dataServiceAppData from '../apiService/simpleDataServiceAppData';
 
 const props = defineProps({
     /**
@@ -40,7 +41,7 @@ const props = defineProps({
      */
     queryParams: {
         type: Object,
-        default: {}
+        default: () => ({})
     },
     /**
      * 是否多选
@@ -74,21 +75,54 @@ const props = defineProps({
      * 默认值
      */
     modelValue: {
-        type: [String, Number],
+        type: [String, Number, Array],
         default: ''
     },
+    /**
+     * 选项配置
+     */
     optionsConfig: {
-        labelField: '',//作为label的字段
-        valueField: ''//作为value的字段
+        type: Object,
+        default: () => ({
+            labelField: '',
+            valueField: ''
+        })
+    },
+    /**
+     * 组件尺寸
+     */
+    size: {
+        type: String,
+        default: 'medium',
+        validator: (val) => ['small', 'medium', 'large'].includes(val)
+    },
+    /**
+     * 空数据文本
+     */
+    emptyText: {
+        type: String,
+        default: '暂无数据'
+    },
+    /**
+     * 弹出层配置
+     */
+    popupProps: {
+        type: Object,
+        default: () => ({})
     }
 });
 
 const { modelValue, apiConfig, queryParams } = toRefs(props)
 
-const emit = defineEmits(['update:modelValue', 'change']);
+const emit = defineEmits(['update:modelValue', 'change', 'focus', 'blur']);
 
 // 选中的值
-const selectedValue = computed(() => modelValue.value)
+const selectedValue = computed({
+    get: () => modelValue.value,
+    set: (val) => {
+        emit('update:modelValue', val);
+    }
+});
 
 // 选项列表
 const options = ref([]);
@@ -105,37 +139,55 @@ const focus = () => {
 };
 
 defineExpose({
-    focus
+    focus,
+    selectRef
 });
 
 // 远程搜索处理函数
-const handleRemoteSearch = async () => {
-    //if (options.value?.length > 0) return
-
+const handleRemoteSearch = async (keyword) => {
     loading.value = true;
-    if (apiConfig.value.apiId && apiConfig.value.apiType >= 0) {
-        try {
-            const params = {
-                queryParams: queryParams.value
-            };
-            const res = await dataService.fetch(params, { key: props.apiConfig.key, apiId: props.apiConfig.apiId, apiType: 'MULTIPLE_DATA_SEARCH' });
-            options.value = res.data.map(item => ({
-                label: item.label || item.name,
-                value: item.value || item.id
-            }));
-        } catch (error) {
-            console.error('远程搜索失败:', error);
-            options.value = [];
-        } finally {
-            loading.value = false;
-        }
+    console.log('handleRemoteSearch', keyword);
+    try {
+        const params = {
+            queryParams: {
+                ...queryParams.value,
+                keyword
+            }
+        };
+        const res = await dataServiceAppData.fetch(params, props.apiConfig);
+        const { labelField, valueField } = props.optionsConfig;
+
+        options.value = res.data.map(item => ({
+            label: labelField ? item[labelField] : (item.label || item.name),
+            value: valueField ? item[valueField] : (item.value || item.id)
+        }));
+    } catch (error) {
+        console.error('远程搜索失败:', error);
+        options.value = [];
+    } finally {
+        loading.value = false;
+    }
+
+};
+
+// 处理获取焦点事件
+const handleFocus = (value, context) => {
+    emit('focus', value, context);
+    // 当选项为空时，初始加载数据
+    if (options.value.length === 0) {
+        handleRemoteSearch('');
     }
 };
 
+// 处理失去焦点事件
+const handleBlur = (value, context) => {
+    emit('blur', value, context);
+};
+
 // 值变化处理函数
-const handleChange = (value) => {
+const handleChange = (value, context) => {
     emit('update:modelValue', value);
-    emit('change', value);
+    emit('change', value, context);
 };
 
 // 组件挂载时，如果有默认值则加载对应的选项
@@ -146,10 +198,16 @@ onMounted(async () => {
             const params = {
                 queryParams: queryParams.value
             };
-            const res = await dataService.fetch(params, { apiId: props.apiConfig.apiId, apiType: 'MULTIPLE_DATA_SEARCH' });
+            const res = await dataServiceAppData.fetch(params, {
+                key: props.apiConfig.key,
+                apiId: props.apiConfig.apiId,
+                apiType: 'MULTIPLE_DATA_SEARCH'
+            });
+            const { labelField, valueField } = props.optionsConfig;
+
             options.value = res.data.map(item => ({
-                label: item.label || item.name,
-                value: item.value || item.id
+                label: labelField ? item[labelField] : (item.label || item.name),
+                value: valueField ? item[valueField] : (item.value || item.id)
             }));
         } catch (error) {
             console.error('加载默认选项失败:', error);
@@ -157,12 +215,11 @@ onMounted(async () => {
             loading.value = false;
         }
     }
-
 });
 </script>
 
 <style scoped>
-.tiny-select {
+.t-select {
     width: 100%;
 }
 </style>

package/src/components/EbizTabHeader.vue

@@ -8,7 +8,7 @@
 <script setup>
 import { ref, computed, watch } from 'vue'
 import { TinyTabs, TinyTabItem } from '@opentiny/vue'
-import { dataService } from "../index.js"
+import { dataServiceAppData } from "../index.js"
 
 const emit = defineEmits(['tabChange'])
 
@@ -83,7 +83,7 @@ watch(() => showTabs.value, () => {
 
 watch(() => props.apiConfig, (nVal) => {
   if (!nVal?.apiId) return
-  dataService.fetch({}, { key: nVal.key, apiId: nVal.apiId, apiType: 'MULTIPLE_DATA_SEARCH' }).then(res => {
+  dataServiceAppData.fetch({}, { key: nVal.key, apiId: nVal.apiId, apiType: 'MULTIPLE_DATA_SEARCH' }).then(res => {
     remoteTabs.value = (res.data ?? []).map(i => ({
       label: i[props.labelKey],
       value: i[props.valueKey],