@ebiz/designer-components 0.1.80 → 0.1.82

package/src/components/EbizDictionarySelect.vue

@@ -0,0 +1,229 @@
+<template>
+    <t-select ref="selectRef" v-model="selectedValue" :options="options" :loading="loading" :filterable="true"
+        :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({
+    /**
+     * 查询参数
+     */
+    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: () => ({})
+    },
+    /**
+     * 字典类型
+     */
+    dictionaryKey: {
+        type: String,
+        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,
+                dictionaryKey: props.dictionaryKey
+            }
+        };
+        const res = await dataService.fetch(params, {
+                "key": "query_dictionary_option",
+                "apiId": 2978,
+                "apiType": 0
+        });
+        const { labelField, valueField } = props.optionsConfig;
+
+        options.value = res.data.at(0).value.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": "query_dictionary_option",
+                "apiId": 2978,
+                "apiType": 0
+            });
+            const { labelField, valueField } = props.optionsConfig;
+
+            options.value = res.data.at(0).vlaue.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>

package/src/components/EbizDiv.vue

@@ -1,41 +1,41 @@
-<script setup>
-import { watch, computed } from 'vue';
-const props = defineProps({
-  permissionKey: {
-    type: String,
-    required: true,
-    default: ''
-  }
-});
-
-const isShow = computed(() => {
-  if (!props.permissionKey) {
-    return true;
-  }
-  const developMode = localStorage.getItem('ebiz-develop-mode')
-  if (developMode === 'designer') {
-    return true;
-  }
-
-  try {
-    const permissionKeysStr = localStorage.getItem('permissionKeys') || '[]';
-    const permissionKeys = JSON.parse(permissionKeysStr);
-    const hasPermission = permissionKeys.includes(props.permissionKey);
-    return hasPermission;
-  } catch (error) {
-    return false;
-  }
-});
-
-const checkPermission = () => {
-
-};
-
-watch(() => props.key, checkPermission, { immediate: true });
-</script>
-
-<template>
-  <div v-if="isShow">
-    <slot name="default"></slot>
-  </div>
+<script setup>
+import { watch, computed } from 'vue';
+const props = defineProps({
+  permissionKey: {
+    type: String,
+    required: true,
+    default: ''
+  }
+});
+
+const isShow = computed(() => {
+  if (!props.permissionKey) {
+    return true;
+  }
+  const developMode = localStorage.getItem('ebiz-develop-mode')
+  if (developMode === 'designer') {
+    return true;
+  }
+
+  try {
+    const permissionKeysStr = localStorage.getItem('permissionKeys') || '[]';
+    const permissionKeys = JSON.parse(permissionKeysStr);
+    const hasPermission = permissionKeys.includes(props.permissionKey);
+    return hasPermission;
+  } catch (error) {
+    return false;
+  }
+});
+
+const checkPermission = () => {
+
+};
+
+watch(() => props.key, checkPermission, { immediate: true });
+</script>
+
+<template>
+  <div v-if="isShow">
+    <slot name="default"></slot>
+  </div>
 </template>

package/src/components/EbizDivider.vue

@@ -1,97 +1,97 @@
-<template>
-    <div class="ebiz-divider" :style="dividerStyle">
-        <div v-if="showText && text" class="divider-text" :style="textStyle">
-            <slot>{{ text }}</slot>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { defineProps, computed } from 'vue';
-
-/**
- * EbizDivider 组件 - 可自定义颜色的分隔线组件
- * 支持自定义分隔线颜色、粗细、间距和文本
- */
-const props = defineProps({
-    /**
-     * 分隔线颜色
-     */
-    color: {
-        type: String,
-        default: '#e8e8e8'
-    },
-    /**
-     * 分隔线粗细
-     */
-    thickness: {
-        type: Number,
-        default: 1
-    },
-    /**
-     * 分隔线上下边距
-     */
-    margin: {
-        type: Number,
-        default: 24
-    },
-    /**
-     * 分隔线文本
-     */
-    text: {
-        type: String,
-        default: ''
-    },
-    /**
-     * 是否显示文本
-     */
-    showText: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 文本颜色
-     */
-    textColor: {
-        type: String,
-        default: '#333'
-    }
-});
-
-// 计算分隔线样式
-const dividerStyle = computed(() => {
-    return {
-        borderTop: `${props.thickness}px solid ${props.color}`,
-        margin: `${props.margin}px 0`,
-        position: props.showText ? 'relative' : 'inherit',
-        textAlign: 'center'
-    };
-});
-
-// 计算文本样式
-const textStyle = computed(() => {
-    return {
-        position: 'absolute',
-        top: '50%',
-        transform: 'translateY(-50%)',
-        backgroundColor: '#fff',
-        padding: '0 10px',
-        color: props.textColor
-    };
-});
-</script>
-
-<style scoped>
-.ebiz-divider {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-}
-
-.divider-text {
-    font-size: 14px;
-    font-weight: 500;
-}
+<template>
+    <div class="ebiz-divider" :style="dividerStyle">
+        <div v-if="showText && text" class="divider-text" :style="textStyle">
+            <slot>{{ text }}</slot>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { defineProps, computed } from 'vue';
+
+/**
+ * EbizDivider 组件 - 可自定义颜色的分隔线组件
+ * 支持自定义分隔线颜色、粗细、间距和文本
+ */
+const props = defineProps({
+    /**
+     * 分隔线颜色
+     */
+    color: {
+        type: String,
+        default: '#e8e8e8'
+    },
+    /**
+     * 分隔线粗细
+     */
+    thickness: {
+        type: Number,
+        default: 1
+    },
+    /**
+     * 分隔线上下边距
+     */
+    margin: {
+        type: Number,
+        default: 24
+    },
+    /**
+     * 分隔线文本
+     */
+    text: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 是否显示文本
+     */
+    showText: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 文本颜色
+     */
+    textColor: {
+        type: String,
+        default: '#333'
+    }
+});
+
+// 计算分隔线样式
+const dividerStyle = computed(() => {
+    return {
+        borderTop: `${props.thickness}px solid ${props.color}`,
+        margin: `${props.margin}px 0`,
+        position: props.showText ? 'relative' : 'inherit',
+        textAlign: 'center'
+    };
+});
+
+// 计算文本样式
+const textStyle = computed(() => {
+    return {
+        position: 'absolute',
+        top: '50%',
+        transform: 'translateY(-50%)',
+        backgroundColor: '#fff',
+        padding: '0 10px',
+        color: props.textColor
+    };
+});
+</script>
+
+<style scoped>
+.ebiz-divider {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+}
+
+.divider-text {
+    font-size: 14px;
+    font-weight: 500;
+}
 </style>