@ebiz/designer-components 0.0.18-beta.4 → 0.0.18-beta.41

package/src/components/EbizPageHeader.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="ebiz-page-header">
+    <div>
+      <div style="display: flex; align-items: center;">
+        <t-breadcrumb>
+          <t-breadcrumb-item :to="{ path: '/' }">
+            <template #icon><t-icon name="home" /></template>首页
+          </t-breadcrumb-item>
+          <t-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
+            <template #icon v-if="item.icon">
+              <t-icon :name="item.icon" />
+            </template>
+            {{ item.title }}
+          </t-breadcrumb-item>
+        </t-breadcrumb>
+      </div>
+      <slot></slot>
+    </div>
+    <div style="display: flex; align-items: center;">
+      <slot name="right"></slot>
+      <div class="help-doc" @click="goToHelp">
+        <t-icon name="chat-bubble-help-filled"></t-icon>
+        <span>帮助文档</span>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { Breadcrumb as TBreadcrumb, BreadcrumbItem as TBreadcrumbItem, Icon as TIcon } from "tdesign-vue-next"
+
+const router = useRouter()
+const route = useRoute()
+
+const breadcrumbList = ref([])
+
+// 计算面包屑导航列表
+const generateBreadcrumb = () => {
+  const matched = route.matched
+  if (!matched.length) return
+
+  const result = []
+  matched.forEach(route => {
+    if (route.meta && route.meta.title) {
+      result.push({
+        title: route.meta.title,
+        icon: route.meta.icon || '',
+        path: route.path
+      })
+    }
+  })
+
+  breadcrumbList.value = result
+}
+
+// 跳转到帮助文档页面
+const goToHelp = () => {
+  router.push(`/help?route=${route.path}`)
+}
+
+// 监听路由变化
+watch(() => route.path, () => {
+  generateBreadcrumb()
+}, { immediate: true })
+
+onMounted(() => {
+  generateBreadcrumb()
+})
+</script>
+
+<style scoped>
+.ebiz-page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.help-doc {
+  display: flex;
+  align-items: center;
+  color: var(--td-brand-color);
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.help-doc:hover {
+  opacity: 0.8;
+}
+
+.help-doc span {
+  margin-left: 4px;
+}
+</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({
     /**
@@ -40,7 +41,9 @@ const props = defineProps({
      */
     queryParams: {
         type: Object,
-        default: {}
+        default: () => ({
+            name: ''
+        })
     },
     /**
      * 是否多选
@@ -74,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([]);
@@ -105,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, { key: props.apiConfig.key, 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);
 };
 
 // 组件挂载时，如果有默认值则加载对应的选项
@@ -146,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);
@@ -157,12 +223,11 @@ onMounted(async () => {
             loading.value = false;
         }
     }
-
 });
 </script>
 
 <style scoped>
-.tiny-select {
+.t-select {
     width: 100%;
 }
 </style>