@ebiz/designer-components 0.0.18-beta.3 → 0.0.18-beta.30

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/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 dataService from '../apiService/simpleDataService';
 
 const props = defineProps({
     /**
@@ -30,6 +31,7 @@ const props = defineProps({
         type: Object,
         required: true,
         default: () => ({
+            key: null,
             apiId: null,
             apiType: ''
         })
@@ -39,7 +41,9 @@ const props = defineProps({
      */
     queryParams: {
         type: Object,
-        default: {}
+        default: () => ({
+            name: ''
+        })
     },
     /**
      * 是否多选
@@ -73,21 +77,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([]);
@@ -104,37 +141,60 @@ const focus = () => {
 };
 
 defineExpose({
-    focus
+    focus,
+    selectRef,
+    options
 });
 
 // 远程搜索处理函数
-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, { 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;
-        }
+    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'
+        });
+        const { labelField, valueField } = props.optionsConfig;
+
+        options.value = res.data.map(item => ({
+            ...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);
 };
 
 // 组件挂载时，如果有默认值则加载对应的选项
@@ -145,10 +205,17 @@ onMounted(async () => {
             const params = {
                 queryParams: queryParams.value
             };
-            const res = await dataService.fetch(params, { apiId: props.apiConfig.apiId, apiType: 'MULTIPLE_DATA_SEARCH' });
+            const res = await dataService.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
+                ...item,
+                label: labelField ? item[labelField] : (item.label || item.name),
+                value: valueField ? item[valueField] : (item.value || item.id)
             }));
         } catch (error) {
             console.error('加载默认选项失败:', error);
@@ -156,12 +223,11 @@ onMounted(async () => {
             loading.value = false;
         }
     }
-
 });
 </script>
 
 <style scoped>
-.tiny-select {
+.t-select {
     width: 100%;
 }
 </style>

package/src/components/EbizTabHeader.vue

@@ -1,12 +1,7 @@
 <template>
   <tiny-tabs v-model="showTab" :tab-style="props.tabStyle" activeColor="#5e7ce0" @click="tabChange">
-    <tiny-tab-item 
-      activeColor="#5e7ce0" 
-      v-for="i in showTabs" 
-      :key="i.value" 
-      :title="i.label" 
-      :name="i.value.toString()"
-    />
+    <tiny-tab-item activeColor="#5e7ce0" v-for="i in showTabs" :key="i.value" :title="i.label"
+      :name="i.value.toString()" />
   </tiny-tabs>
 </template>
 
@@ -22,6 +17,7 @@ const props = defineProps({
   apiConfig: {
     type: Object,
     default: () => ({
+      key: null,
       apiId: null,
       apiType: 'MULTIPLE_DATA_SEARCH',
     }),
@@ -63,7 +59,7 @@ const remoteTabs = ref([])
 
 // 展示的tabs
 const showTabs = computed(() => {
-    console.log(props.tabs,66, 110)
+  console.log(props.tabs, 66, 110)
   if (remoteTabs.value.length) return [{ label: '全部', value: '0' }, ...remoteTabs.value];
   if (props.tabs.length) return props.tabs
   return [{ label: '全部', value: '0' }]
@@ -87,7 +83,7 @@ watch(() => showTabs.value, () => {
 
 watch(() => props.apiConfig, (nVal) => {
   if (!nVal?.apiId) return
-  dataService.fetch({ }, { apiId: nVal.apiId, apiType: 'MULTIPLE_DATA_SEARCH' }).then(res => {
+  dataService.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],
@@ -146,4 +142,4 @@ watch(() => props.apiConfig, (nVal) => {
   overflow: hidden;
   white-space: nowrap;
 }
-</style> 
+</style>