@ebiz/designer-components 0.1.78 → 0.1.80

package/src/components/EbizRemoteSelect.vue

@@ -1,233 +1,233 @@
-<template>
-    <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 #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 } from 'tdesign-vue-next';
-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: ''
-    },
-    /**
-     * 选项配置
-     */
-    optionsConfig: {
-        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', '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'
-        });
-        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, context) => {
-    emit('update:modelValue', value);
-    emit('change', value, context, options.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'
-            });
-            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);
-        } finally {
-            loading.value = false;
-        }
-    }
-});
-</script>
-
-<style scoped>
-.t-select {
-    width: 100%;
-}
+<template>
+    <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 #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 } from 'tdesign-vue-next';
+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: ''
+    },
+    /**
+     * 选项配置
+     */
+    optionsConfig: {
+        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', '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'
+        });
+        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, context) => {
+    emit('update:modelValue', value);
+    emit('change', value, context, options.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'
+            });
+            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);
+        } finally {
+            loading.value = false;
+        }
+    }
+});
+</script>
+
+<style scoped>
+.t-select {
+    width: 100%;
+}
 </style>