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

package/src/components/EbizRadio.vue

@@ -1,87 +1,87 @@
-<template>
-    <t-radio
-        :allowUncheck="allowUncheck"
-        :checked="modelValue"
-        :defaultChecked="defaultChecked"
-        :disabled="disabled"
-        :label="label"
-        :name="name"
-        :readonly="readonly"
-        :value="value"
-        @change="handleChange"
-        @click="handleClick"
-    >
-        <slot>{{ label }}</slot>
-    </t-radio>
-</template>
-
-<script>
-export default {
-    name: "EbizRadio"
-}
-</script>
-
-<script setup>
-import { defineProps, defineEmits } from 'vue';
-import { Radio as TRadio } from 'tdesign-vue-next';
-
-const props = defineProps({
-    // 是否允许取消选中
-    allowUncheck: {
-        type: Boolean,
-        default: false
-    },
-    // 是否选中 (v-model)
-    modelValue: {
-        type: Boolean,
-        default: false
-    },
-    // 默认是否选中
-    defaultChecked: {
-        type: Boolean,
-        default: false
-    },
-    // 是否禁用组件
-    disabled: {
-        type: Boolean,
-        default: undefined
-    },
-    // 主文案
-    label: {
-        type: String,
-        default: ''
-    },
-    // HTML 元素原生属性
-    name: {
-        type: String,
-        default: ''
-    },
-    // 只读状态
-    readonly: {
-        type: Boolean,
-        default: false
-    },
-    // 单选按钮的值
-    value: {
-        type: [String, Number, Boolean],
-        default: undefined
-    }
-});
-
-const emit = defineEmits(['change', 'click', 'update:modelValue']);
-
-// 选中状态变化事件
-const handleChange = (checked, context) => {
-    emit('update:modelValue', checked);
-    emit('change', checked, context);
-};
-
-// 点击事件
-const handleClick = (context) => {
-    emit('click', context);
-};
-</script>
-
-<style lang="less" scoped>
-/* 自定义样式 */
+<template>
+    <t-radio
+        :allowUncheck="allowUncheck"
+        :checked="modelValue"
+        :defaultChecked="defaultChecked"
+        :disabled="disabled"
+        :label="label"
+        :name="name"
+        :readonly="readonly"
+        :value="value"
+        @change="handleChange"
+        @click="handleClick"
+    >
+        <slot>{{ label }}</slot>
+    </t-radio>
+</template>
+
+<script>
+export default {
+    name: "EbizRadio"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Radio as TRadio } from 'tdesign-vue-next';
+
+const props = defineProps({
+    // 是否允许取消选中
+    allowUncheck: {
+        type: Boolean,
+        default: false
+    },
+    // 是否选中 (v-model)
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    // 默认是否选中
+    defaultChecked: {
+        type: Boolean,
+        default: false
+    },
+    // 是否禁用组件
+    disabled: {
+        type: Boolean,
+        default: undefined
+    },
+    // 主文案
+    label: {
+        type: String,
+        default: ''
+    },
+    // HTML 元素原生属性
+    name: {
+        type: String,
+        default: ''
+    },
+    // 只读状态
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    // 单选按钮的值
+    value: {
+        type: [String, Number, Boolean],
+        default: undefined
+    }
+});
+
+const emit = defineEmits(['change', 'click', 'update:modelValue']);
+
+// 选中状态变化事件
+const handleChange = (checked, context) => {
+    emit('update:modelValue', checked);
+    emit('change', checked, context);
+};
+
+// 点击事件
+const handleClick = (context) => {
+    emit('click', context);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
 </style> 

package/src/components/EbizRadioGroup.vue

@@ -1,84 +1,84 @@
-<template>
-    <t-radio-group
-        :allowUncheck="allowUncheck"
-        :disabled="disabled"
-        :name="name"
-        :options="options"
-        :size="size"
-        :value="modelValue"
-        :defaultValue="defaultValue"
-        :variant="variant"
-        @change="handleChange"
-    >
-        <!-- 默认插槽 -->
-        <slot></slot>
-    </t-radio-group>
-</template>
-
-<script>
-export default {
-    name: "EbizRadioGroup"
-}
-</script>
-
-<script setup>
-import { defineProps, defineEmits } from 'vue';
-import { RadioGroup as TRadioGroup } from 'tdesign-vue-next';
-
-const props = defineProps({
-    // 是否允许取消选中
-    allowUncheck: {
-        type: Boolean,
-        default: false
-    },
-    // 是否禁用组件
-    disabled: {
-        type: Boolean,
-        default: undefined
-    },
-    // HTML 元素原生属性
-    name: {
-        type: String,
-        default: ''
-    },
-    // 以配置形式设置子元素
-    options: {
-        type: Array,
-        default: () => []
-    },
-    // 组件尺寸
-    size: {
-        type: String,
-        default: 'medium',
-        validator: (val) => ['small', 'medium', 'large'].includes(val)
-    },
-    // 选中值 (v-model)
-    modelValue: {
-        type: [String, Number, Boolean],
-        default: undefined
-    },
-    // 默认选中值
-    defaultValue: {
-        type: [String, Number, Boolean],
-        default: undefined
-    },
-    // 单选组件按钮形式
-    variant: {
-        type: String,
-        default: 'outline',
-        validator: (val) => ['outline', 'primary-filled', 'default-filled'].includes(val)
-    }
-});
-
-const emit = defineEmits(['change', 'update:modelValue']);
-
-// 选中值变化事件
-const handleChange = (value, context) => {
-    emit('update:modelValue', value);
-    emit('change', value, context);
-};
-</script>
-
-<style lang="less" scoped>
-/* 自定义样式 */
+<template>
+    <t-radio-group
+        :allowUncheck="allowUncheck"
+        :disabled="disabled"
+        :name="name"
+        :options="options"
+        :size="size"
+        :value="modelValue"
+        :defaultValue="defaultValue"
+        :variant="variant"
+        @change="handleChange"
+    >
+        <!-- 默认插槽 -->
+        <slot></slot>
+    </t-radio-group>
+</template>
+
+<script>
+export default {
+    name: "EbizRadioGroup"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { RadioGroup as TRadioGroup } from 'tdesign-vue-next';
+
+const props = defineProps({
+    // 是否允许取消选中
+    allowUncheck: {
+        type: Boolean,
+        default: false
+    },
+    // 是否禁用组件
+    disabled: {
+        type: Boolean,
+        default: undefined
+    },
+    // HTML 元素原生属性
+    name: {
+        type: String,
+        default: ''
+    },
+    // 以配置形式设置子元素
+    options: {
+        type: Array,
+        default: () => []
+    },
+    // 组件尺寸
+    size: {
+        type: String,
+        default: 'medium',
+        validator: (val) => ['small', 'medium', 'large'].includes(val)
+    },
+    // 选中值 (v-model)
+    modelValue: {
+        type: [String, Number, Boolean],
+        default: undefined
+    },
+    // 默认选中值
+    defaultValue: {
+        type: [String, Number, Boolean],
+        default: undefined
+    },
+    // 单选组件按钮形式
+    variant: {
+        type: String,
+        default: 'outline',
+        validator: (val) => ['outline', 'primary-filled', 'default-filled'].includes(val)
+    }
+});
+
+const emit = defineEmits(['change', 'update:modelValue']);
+
+// 选中值变化事件
+const handleChange = (value, context) => {
+    emit('update:modelValue', value);
+    emit('change', value, context);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
 </style> 

package/src/components/EbizRemoteSelect.vue

@@ -1,167 +1,167 @@
-<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>
-            <slot name="prefix"></slot>
-        </template>
-        <template #suffix>
-            <slot name="suffix"></slot>
-        </template>
-    </tiny-select>
-</template>
-
-<script>
-export default {
-    name: "EbizRemoteSelect"
-}
-</script>
-
-<script setup>
-import { ref, onMounted, toRefs, computed } from 'vue';
-import { Select as TinySelect } from '@opentiny/vue';
-import dataService from "../apiService/simpleDataService";
-
-const props = defineProps({
-    /**
-     * API配置
-     */
-    apiConfig: {
-        type: Object,
-        required: true,
-        default: () => ({
-            apiId: null,
-            apiType: ''
-        })
-    },
-    /**
-     * 查询参数
-     */
-    queryParams: {
-        type: Object,
-        default: {}
-    },
-    /**
-     * 是否多选
-     */
-    multiple: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 占位符文本
-     */
-    placeholder: {
-        type: String,
-        default: '请选择'
-    },
-    /**
-     * 是否可清空
-     */
-    clearable: {
-        type: Boolean,
-        default: true
-    },
-    /**
-     * 是否禁用
-     */
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 默认值
-     */
-    modelValue: {
-        type: [String, Number],
-        default: ''
-    },
-    optionsConfig: {
-        labelField: '',//作为label的字段
-        valueField: ''//作为value的字段
-    }
-});
-
-const { modelValue, apiConfig, queryParams } = toRefs(props)
-
-const emit = defineEmits(['update:modelValue', 'change']);
-
-// 选中的值
-const selectedValue = computed(() => modelValue.value)
-
-// 选项列表
-const options = ref([]);
-
-// 加载状态
-const loading = ref(false);
-
-// 获取select组件实例
-const selectRef = ref(null);
-
-// 暴露focus方法
-const focus = () => {
-    selectRef.value?.focus();
-};
-
-defineExpose({
-    focus
-});
-
-// 远程搜索处理函数
-const handleRemoteSearch = async () => {
-    //if (options.value?.length > 0) return
-
-    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;
-        }
-    }
-};
-
-// 值变化处理函数
-const handleChange = (value) => {
-    emit('update:modelValue', value);
-    emit('change', 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, { 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);
-        } finally {
-            loading.value = false;
-        }
-    }
-
-});
-</script>
-
-<style scoped>
-.tiny-select {
-    width: 100%;
-}
+<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>
+            <slot name="prefix"></slot>
+        </template>
+        <template #suffix>
+            <slot name="suffix"></slot>
+        </template>
+    </tiny-select>
+</template>
+
+<script>
+export default {
+    name: "EbizRemoteSelect"
+}
+</script>
+
+<script setup>
+import { ref, onMounted, toRefs, computed } from 'vue';
+import { Select as TinySelect } from '@opentiny/vue';
+import dataService from "../apiService/simpleDataService";
+
+const props = defineProps({
+    /**
+     * API配置
+     */
+    apiConfig: {
+        type: Object,
+        required: true,
+        default: () => ({
+            apiId: null,
+            apiType: ''
+        })
+    },
+    /**
+     * 查询参数
+     */
+    queryParams: {
+        type: Object,
+        default: {}
+    },
+    /**
+     * 是否多选
+     */
+    multiple: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 占位符文本
+     */
+    placeholder: {
+        type: String,
+        default: '请选择'
+    },
+    /**
+     * 是否可清空
+     */
+    clearable: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * 是否禁用
+     */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 默认值
+     */
+    modelValue: {
+        type: [String, Number],
+        default: ''
+    },
+    optionsConfig: {
+        labelField: '',//作为label的字段
+        valueField: ''//作为value的字段
+    }
+});
+
+const { modelValue, apiConfig, queryParams } = toRefs(props)
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+// 选中的值
+const selectedValue = computed(() => modelValue.value)
+
+// 选项列表
+const options = ref([]);
+
+// 加载状态
+const loading = ref(false);
+
+// 获取select组件实例
+const selectRef = ref(null);
+
+// 暴露focus方法
+const focus = () => {
+    selectRef.value?.focus();
+};
+
+defineExpose({
+    focus
+});
+
+// 远程搜索处理函数
+const handleRemoteSearch = async () => {
+    //if (options.value?.length > 0) return
+
+    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;
+        }
+    }
+};
+
+// 值变化处理函数
+const handleChange = (value) => {
+    emit('update:modelValue', value);
+    emit('change', 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, { 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);
+        } finally {
+            loading.value = false;
+        }
+    }
+
+});
+</script>
+
+<style scoped>
+.tiny-select {
+    width: 100%;
+}
 </style>