@ebiz/designer-components 0.0.18-kzy.3 → 0.0.18-kzy.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.0.18-kzy.3",
+  "version": "0.0.18-kzy.5",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/apiService/simpleDataService.js

@@ -8,9 +8,9 @@ import axios from 'axios'
 import { TinyNotify } from '@opentiny/vue'
 
 // 本地开发使用
-// const API_BASE_URL = "http://localhost:8090/api";
+const API_BASE_URL = "http://localhost:8090/api";
 // 组件发布使用
-const API_BASE_URL = 'http://' + window.location.host + '/api'
+// const API_BASE_URL = 'http://' + window.location.host + '/api'
 
 /**
  * 创建axios实例
@@ -59,7 +59,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) => {
@@ -175,7 +178,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

@@ -41,7 +41,7 @@ const props = defineProps({
     },
     size: {//'large' | 'medium' | 'small' | 'mini'
         type: String,
-        default: 'medium'
+        default: ''
     },
     apiConfig: {//接口配置
         type: Object,

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> 

package/src/components/EbizGridEditorSelect.vue

@@ -0,0 +1,238 @@
+<template>
+    <t-select ref="selectRef" v-model="selectedValue" :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">
+        <t-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label"
+            @click="handleClick(item.value)"></t-option>
+        <template #prefixIcon v-if="$slots.prefix">
+            <slot name="prefix"></slot>
+        </template>
+        <template #suffixIcon v-if="$slots.suffix">
+            <slot name="suffix"></slot>
+        </template>
+    </t-select>
+</template>
+
+<script>
+export default {
+    name: "EbizRemoteSelect"
+}
+</script>
+
+<script setup>
+import { ref, onMounted, toRefs, computed } from 'vue';
+import { Select as TSelect, Option as TOption } from '@opentiny/vue';
+import dataService from '../apiService/simpleDataService';
+
+const props = defineProps({
+    /**
+     * API配置
+     */
+    apiConfig: {
+        type: Object,
+        required: true,
+        default: () => ({
+            key: null,
+            apiId: null,
+            apiType: ''
+        })
+    },
+    /**
+     * 查询参数
+     */
+    queryParams: {
+        type: Object,
+        default: () => ({
+            name: ''
+        })
+    },
+    /**
+     * 是否多选
+     */
+    multiple: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 占位符文本
+     */
+    placeholder: {
+        type: String,
+        default: '请选择'
+    },
+    /**
+     * 是否可清空
+     */
+    clearable: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * 是否禁用
+     */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 默认值
+     */
+    modelValue: {
+        type: [String, Number, Array],
+        default: ''
+    },
+    /**
+     * 选项配置
+     */
+    labelField: {
+        type: String,
+        default: ''
+    },
+    valueField: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 组件尺寸
+     */
+    size: {
+        type: String,
+        default: '',
+        validator: (val) => ['small', 'medium', 'large'].includes(val)
+    },
+    /**
+     * 空数据文本
+     */
+    emptyText: {
+        type: String,
+        default: '暂无数据'
+    },
+    /**
+     * 弹出层配置
+     */
+    popupProps: {
+        type: Object,
+        default: () => ({})
+    }
+});
+
+const { modelValue, apiConfig, labelField, valueField, queryParams } = toRefs(props)
+
+const emit = defineEmits(['update:modelValue', 'change', 'selectOption', 'focus', 'blur']);
+
+// 选中的值
+const selectedValue = computed({
+    get: () => modelValue.value,
+    set: (val) => {
+        emit('update:modelValue', val);
+    }
+});
+
+// 选项列表
+const options = ref([]);
+
+// 加载状态
+const loading = ref(false);
+
+// 获取select组件实例
+const selectRef = ref(null);
+
+// 暴露focus方法
+const focus = () => {
+    selectRef.value?.focus();
+};
+
+defineExpose({
+    focus,
+    selectRef,
+    options
+});
+
+// 远程搜索处理函数
+const handleRemoteSearch = async (keyword) => {
+    loading.value = true;
+    try {
+        const params = {
+            queryParams: {
+                ...queryParams.value,
+                name: keyword
+            }
+        };
+        const res = await dataService.fetch(params, {
+            key: props.apiConfig.key,
+            apiId: props.apiConfig.apiId,
+            apiType: 'MULTIPLE_DATA_SEARCH'
+        });
+
+        options.value = res.data.map(item => ({
+            ...item,
+            label: labelField.value ? item[labelField.value] : (item.label || item.name),
+            value: valueField.value ? item[valueField.value] : (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, context) => {
+    emit('update:modelValue', value);
+    emit('change', value, context);
+    if (value instanceof Array) {
+        emit('selectOption', options.value.filter(item => value.includes(item.value)));
+    } else {
+        emit('selectOption', options.value.find(item => item.value === value));
+    }
+};
+
+// 组件挂载时，如果有默认值则加载对应的选项
+onMounted(async () => {
+    if (apiConfig.value.apiId && apiConfig.value.apiType >= 0) {
+        loading.value = true;
+        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 => ({
+                ...item,
+                label: labelField.value ? item[labelField.value] : (item.label || item.name),
+                value: valueField.value ? item[valueField.value] : (item.value || item.id)
+            }));
+        } catch (error) {
+            console.error('加载默认选项失败:', error);
+        } finally {
+            loading.value = false;
+        }
+    }
+});
+</script>
+
+<style scoped>
+.t-select {
+    width: 100%;
+}
+</style>

package/src/components/EbizPageHeader.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="ebiz-page-header">
+    <div>
+      <div style="display: flex; align-items: center;">
+        <t-breadcrumb>
+          <t-breadcrumb-item :to="{ path: '/' }">
+            <template #icon><t-icon name="home" /></template>首页
+          </t-breadcrumb-item>
+          <t-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
+            <template #icon v-if="item.icon">
+              <t-icon :name="item.icon" />
+            </template>
+            {{ item.title }}
+          </t-breadcrumb-item>
+        </t-breadcrumb>
+      </div>
+      <slot></slot>
+    </div>
+    <div style="display: flex; align-items: center;">
+      <slot name="right"></slot>
+      <div class="help-doc" @click="goToHelp">
+        <t-icon name="chat-bubble-help-filled"></t-icon>
+        <span>帮助文档</span>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { Breadcrumb as TBreadcrumb, BreadcrumbItem as TBreadcrumbItem, Icon as TIcon } from "tdesign-vue-next"
+
+const router = useRouter()
+const route = useRoute()
+
+const breadcrumbList = ref([])
+
+// 计算面包屑导航列表
+const generateBreadcrumb = () => {
+  const matched = route.matched
+  if (!matched.length) return
+
+  const result = []
+  matched.forEach(route => {
+    if (route.meta && route.meta.title) {
+      result.push({
+        title: route.meta.title,
+        icon: route.meta.icon || '',
+        path: route.path
+      })
+    }
+  })
+
+  breadcrumbList.value = result
+}
+
+// 跳转到帮助文档页面
+const goToHelp = () => {
+  router.push(`/help?route=${route.path}`)
+}
+
+// 监听路由变化
+watch(() => route.path, () => {
+  generateBreadcrumb()
+}, { immediate: true })
+
+onMounted(() => {
+  generateBreadcrumb()
+})
+</script>
+
+<style scoped>
+.ebiz-page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.help-doc {
+  display: flex;
+  align-items: center;
+  color: var(--td-brand-color);
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.help-doc:hover {
+  opacity: 0.8;
+}
+
+.help-doc span {
+  margin-left: 4px;
+}
+</style>