@ebiz/designer-components 0.0.1-9.bata.1

package/src/components/EbizPagination.vue

@@ -0,0 +1,163 @@
+<template>
+    <t-pagination
+        :current="current"
+        :defaultCurrent="defaultCurrent"
+        :defaultPageSize="defaultPageSize"
+        :disabled="disabled"
+        :foldedMaxPageBtn="foldedMaxPageBtn"
+        :hideOnSinglePage="hideOnSinglePage"
+        :maxPageBtn="maxPageBtn"
+        :pageEllipsisMode="pageEllipsisMode"
+        :pageSize="pageSize"
+        :pageSizeOptions="pageSizeOptions"
+        :selectProps="selectProps"
+        :showFirstAndLastPageBtn="showFirstAndLastPageBtn"
+        :showJumper="showJumper"
+        :showPageNumber="showPageNumber"
+        :showPageSize="showPageSize"
+        :showPreviousAndNextBtn="showPreviousAndNextBtn"
+        :size="size"
+        :theme="theme"
+        :total="total"
+        :totalContent="totalContent"
+        @change="handleChange"
+    >
+        <!-- 如果有totalContent插槽，使用插槽内容 -->
+        <template v-if="$slots.totalContent" #totalContent>
+            <slot name="totalContent"></slot>
+        </template>
+        
+        <!-- 如果有pageNumber插槽，使用插槽内容 -->
+        <template v-if="$slots.pageNumber" #pageNumber>
+            <slot name="pageNumber"></slot>
+        </template>
+    </t-pagination>
+</template>
+
+<script>
+export default {
+    name: "EbizPagination"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Pagination as TPagination } from 'tdesign-vue-next';
+
+defineProps({
+    // 当前页
+    current: {
+        type: Number,
+        default: undefined
+    },
+    // 默认当前页
+    defaultCurrent: {
+        type: Number,
+        default: 1
+    },
+    // 默认每页显示条数
+    defaultPageSize: {
+        type: Number,
+        default: 10
+    },
+    // 是否禁用分页
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    // 折叠时最多显示的页码按钮数
+    foldedMaxPageBtn: {
+        type: Number,
+        default: 5
+    },
+    // 当只有一页时是否隐藏分页
+    hideOnSinglePage: {
+        type: Boolean,
+        default: false
+    },
+    // 最多显示的页码按钮数
+    maxPageBtn: {
+        type: Number,
+        default: 10
+    },
+    // 页码数量超出时的省略模式
+    pageEllipsisMode: {
+        type: String,
+        default: 'mid',
+        validator: (val) => ['mid', 'both-ends'].includes(val)
+    },
+    // 每页显示条数
+    pageSize: {
+        type: Number,
+        default: 10
+    },
+    // 分页大小控制器选项
+    pageSizeOptions: {
+        type: Array,
+        default: () => [5, 10, 20, 50]
+    },
+    // 透传Select组件属性
+    selectProps: {
+        type: Object,
+        default: () => ({})
+    },
+    // 是否显示跳转首页尾页页码控制器
+    showFirstAndLastPageBtn: {
+        type: Boolean,
+        default: false
+    },
+    // 是否显示跳转页码控制器
+    showJumper: {
+        type: Boolean,
+        default: false
+    },
+    // 是否显示页码控制器
+    showPageNumber: {
+        type: Boolean,
+        default: true
+    },
+    // 是否显示分页数量控制器
+    showPageSize: {
+        type: Boolean,
+        default: true
+    },
+    // 是否显示跳转前后页页码控制器
+    showPreviousAndNextBtn: {
+        type: Boolean,
+        default: true
+    },
+    // 分页组件尺寸
+    size: {
+        type: String,
+        default: 'medium',
+        validator: (val) => ['small', 'medium'].includes(val)
+    },
+    // 分页组件风格
+    theme: {
+        type: String,
+        default: 'default',
+        validator: (val) => ['default', 'simple'].includes(val)
+    },
+    // 数据总条数
+    total: {
+        type: Number,
+        default: 0
+    },
+    // 用于自定义总条数呈现内容
+    totalContent: {
+        type: [Boolean, Function],
+        default: true
+    }
+});
+
+const emit = defineEmits(['change']);
+
+// 分页变化事件
+const handleChange = (pageInfo) => {
+    emit('change', pageInfo);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

package/src/components/EbizRadio.vue

@@ -0,0 +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>
+/* 自定义样式 */
+</style> 

package/src/components/EbizRadioGroup.vue

@@ -0,0 +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>
+/* 自定义样式 */
+</style> 

package/src/components/EbizRemoteSelect.vue

@@ -0,0 +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);
+};
+
+// 组件挂载时，如果有默认值则加载对应的选项
+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>

package/src/components/EbizRouteBreadcrumb.vue

@@ -0,0 +1,47 @@
+<template>
+  <tiny-breadcrumb>
+    <tiny-breadcrumb-item :to="{ path: '/' }">首页</tiny-breadcrumb-item>
+    <tiny-breadcrumb-item
+      v-for="(item, index) in breadcrumbItems"
+      :key="index"
+      :to="item.path"
+    >
+      {{ item.title }}
+    </tiny-breadcrumb-item>
+  </tiny-breadcrumb>
+</template>
+
+<script>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { TinyBreadcrumb, TinyBreadcrumbItem } from '@opentiny/vue'
+
+export default {
+  name: 'EbizRouteBreadcrumb',
+  components: {
+    TinyBreadcrumb,
+    TinyBreadcrumbItem
+  },
+  setup() {
+    const route = useRoute()
+    
+    const breadcrumbItems = computed(() => {
+      const matched = route.matched.filter(item => item.meta && item.meta.title)
+      return matched.map(item => ({
+        title: item.meta.title,
+        path: item.path
+      }))
+    })
+
+    return {
+      breadcrumbItems
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-breadcrumb {
+  margin: 16px 0;
+}
+</style> 

package/src/components/EbizSelect.vue

@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <tiny-select
+      v-model="value3"
+      filterable
+      remote
+      :remote-config="{ autoSearch: true }"
+      :remote-method="remoteMethod3"
+      :loading="loading3"
+      loading-text="Loading..."
+      @change="onChange"
+    >
+      <tiny-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, toRefs} from 'vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
+import request from '@/apiService/simpleDataService';
+const props = defineProps({
+  apiConfig: {
+    type: Object,
+    default: {
+        apiId: null,
+        apiType: ''
+    }
+  }
+})
+const emit = defineEmits(['formSubmitted'])
+
+onMounted(() => {
+  remoteMethod3('')
+})
+
+const loading3 = ref(false)
+const value3 = ref('')
+const options3 = ref([])
+const list = ref([])
+
+{/* const url = ('http://192.168.0.247:9002/api/appdata/select') */}
+
+const { apiConfig } = toRefs(props);
+
+const remoteMethod3 = (query) => {
+  request.fetch({
+    "queryParams":{"name": query}
+  },{
+    apiId: apiConfig.value.apiId,
+  },'/appdata/select',).then((val) => {
+    console.log("val.data11111", val.data)
+    options3.value = val.data.map((item) => {
+      return { value: item.name, label: item.name }
+    })
+    console.log("options3.value", options3.value)
+
+  }).catch((err) => {
+    console.log("err111111", err)
+  })
+}
+const onChange = () => {
+  emit('formSubmitted', value3.value);
+}
+
+
+{/* const url = ('http://localhost:3000/admin/product/getHomeProList') */}
+
+
+{/* onMounted(async() => {
+    // await axios.get(url).then((val) => {
+    //     console.log('val', val.data.data)
+    //     list.value = val.data.data.map((item) => {
+    //         return { value: item.name, label: item.name }
+    //       })
+    // })
+
+
+    //  post请求  参数：  apiId: 372, queryParams: {"type": 1}
+    await axios.post(url, { apiId: params.apiId, queryParams: { type: 1 } }).then((val) => {
+      list.value = val.data.data.map((item) => {
+        return { value: item.name, label: item.name }
+      })
+    })
+
+}) */}
+
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>