@ebiz/designer-components 0.0.18-kzy.3 → 0.0.18-kzy.4

package/src/components/TddesignButton.vue

@@ -0,0 +1,153 @@
+<template>
+    <tiny-tooltip :content="!isNormal && !apiConfig.apiId ? tooltipText : ''" placement="top">
+        <t-button :disabled="disabled || loading" :theme="type" :size="size" @click="click">
+            <slot>{{ text }}</slot>
+        </t-button>
+    </tiny-tooltip>
+</template>
+
+
+<script lang='js'>
+export default {
+    name: "EbizButton"
+}
+</script>
+
+<script lang='js' setup>
+
+import { ref, reactive, computed, toRef, toRefs } from 'vue';
+import { Button as TButton } from 'tdesign-vue-next';
+import { TinyTooltip } from '@opentiny/vue';
+import dataService from '../apiService/simpleDataService';
+
+const props = defineProps({
+    text: {
+        type: String,
+        default: ''
+    },
+    isNormal: {//是否为普通按钮
+        type: Boolean,
+        default: false
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    type: {//'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
+        type: String,
+        default: 'primary'
+    },
+    size: {//'large' | 'medium' | 'small'
+        type: String,
+        default: 'medium'
+    },
+    apiConfig: {//接口配置
+        type: Object,
+        default: () => ({
+            key: null,
+            apiId: null,
+            apiType: ''
+        })
+    },
+    data: {
+        type: Object,
+        default: () => ({})
+    },
+    onClick: {
+        type: Function,
+        default: () => { }
+    },
+    onPrepare: {//调用接口前置事件
+        type: Function,
+        default: () => true // 默认返回true，允许继续执行
+    },
+    onFinish: {//调用接口后置事件
+        type: Function,
+        default: () => { }
+    },
+    onError: {
+        type: Function,
+        default: () => { }
+    }
+})
+
+const apiMap = [
+    'MULTIPLE_DATA_SEARCH',
+    'DETAILS_DATA',
+    'INTERFACE_PLUGIN',
+    'DATA_INSERT',
+    'BATCH_DATA_INSERT',
+    'DATA_MODIFY',
+    'BATCH_DATA_MODIFY',
+    'DEL_DATA',
+    'BATCH_DEL_DATA',
+    'MULTIPLE_DATA_LINK_SEARCH'
+];
+
+const emit = defineEmits(['click', 'success', 'error', 'loading', 'prepare'])
+
+const { text, isNormal, disabled, type, size, variant, apiConfig, data } = toRefs(props)
+
+const tooltipText = ref('请先设置接口配置')
+const loading = ref(false)
+
+// 检查API配置是否有效
+const isValidApiConfig = () => {
+    return apiConfig.value && apiConfig.value.apiId &&
+        typeof apiConfig.value.apiType === 'number' &&
+        apiConfig.value.apiType >= 0 &&
+        apiConfig.value.apiType < apiMap.length;
+}
+
+const click = async (e) => {
+    // 总是调用onClick回调
+    props.onClick()
+    emit('click', e)
+
+    // 如果是普通按钮或API配置无效，不调用接口
+    if (isNormal.value || !isValidApiConfig()) {
+        return
+    }
+
+    try {
+        // 设置加载状态
+        loading.value = true
+        emit('loading', true)
+
+        // 调用前置处理并获取返回值
+        const shouldContinue = props.onPrepare()
+        emit('prepare', shouldContinue)
+
+        // 只有当返回值明确为false时才中断，undefined或其他值都继续执行
+        if (shouldContinue === false) {
+            return null
+        }
+
+        // 调用接口
+        const apiType = apiMap[apiConfig.value.apiType]
+        const res = await dataService.fetch(data.value, {
+            key: apiConfig.value.key,
+            apiId: apiConfig.value.apiId,
+            apiType
+        })
+
+        // 成功处理
+        emit('success', res)
+        props.onFinish(res)
+
+        return res
+    } catch (error) {
+        // 错误处理
+        emit('error', error)
+        props.onError(error)
+
+        return null
+    } finally {
+        // 清除加载状态
+        loading.value = false
+        emit('loading', false)
+    }
+}
+</script>
+
+<style lang='less' scoped></style>

package/src/components/TdesignUpload.vue

@@ -4,7 +4,6 @@
         :draggable="draggable" :fileListDisplay="fileListDisplay" :files="internalFiles" :format="format"
         :formatRequest="formatRequest" :headers="headers" :isBatchUpload="isBatchUpload" :max="max" :method="method"
         :multiple="multiple" :name="name" :placeholder="placeholder"
-        :requestMethod="useInternalUpload ? customRequestMethod : requestMethod"
         :showUploadProgress="showUploadProgress" :sizeLimit="sizeLimit" :status="status" :theme="theme" :tips="tips"
         :uploadAllFilesInOneRequest="uploadAllFilesInOneRequest" :uploadButton="uploadButton"
         :useMockProgress="useMockProgress" :withCredentials="withCredentials" v-model="modelValue"
@@ -58,7 +57,7 @@ import { Upload as TUpload } from 'tdesign-vue-next';
 import dataService from '../apiService/simpleDataService';
 
 // 内部上传地址常量
-const INTERNAL_UPLOAD_URL = '/file/upload';
+const INTERNAL_UPLOAD_URL = '/api/file/app/td-upload';
 
 // 内部维护的文件列表，代替直接使用props.files
 const internalFiles = ref([]);
@@ -274,7 +273,7 @@ const props = defineProps({
     // 是否使用内部上传服务，如果为true则忽略action参数
     useInternalUpload: {
         type: Boolean,
-        default: true
+        default: false
     }
 });
 

package/src/components/TinyGridEditorSelect.vue

@@ -0,0 +1,238 @@
+<template>
+    <t-select ref="selectRef" v-model="selectedValue" :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">
+        <t-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label"
+            @click="handleClick(item.value)"></t-option>
+        <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, Option as TOption } from '@opentiny/vue';
+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: ''
+    },
+    /**
+     * 选项配置
+     */
+    labelField: {
+        type: String,
+        default: ''
+    },
+    valueField: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 组件尺寸
+     */
+    size: {
+        type: String,
+        default: '',
+        validator: (val) => ['small', 'medium', 'large'].includes(val)
+    },
+    /**
+     * 空数据文本
+     */
+    emptyText: {
+        type: String,
+        default: '暂无数据'
+    },
+    /**
+     * 弹出层配置
+     */
+    popupProps: {
+        type: Object,
+        default: () => ({})
+    }
+});
+
+const { modelValue, apiConfig, labelField, valueField, queryParams } = toRefs(props)
+
+const emit = defineEmits(['update:modelValue', 'change', 'selectOption', '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'
+        });
+
+        options.value = res.data.map(item => ({
+            ...item,
+            label: labelField.value ? item[labelField.value] : (item.label || item.name),
+            value: valueField.value ? item[valueField.value] : (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);
+    if (value instanceof Array) {
+        emit('selectOption', options.value.filter(item => value.includes(item.value)));
+    } else {
+        emit('selectOption', options.value.find(item => item.value === 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'
+            });
+
+            options.value = res.data.map(item => ({
+                ...item,
+                label: labelField.value ? item[labelField.value] : (item.label || item.name),
+                value: valueField.value ? item[valueField.value] : (item.value || item.id)
+            }));
+        } catch (error) {
+            console.error('加载默认选项失败:', error);
+        } finally {
+            loading.value = false;
+        }
+    }
+});
+</script>
+
+<style scoped>
+.t-select {
+    width: 100%;
+}
+</style>

package/src/index.js

@@ -23,6 +23,7 @@ import EbizRouteBreadcrumb from "./components/EbizRouteBreadcrumb.vue";
 import EbizRichTextEditor from "./components/EbizRichTextEditor.vue";
 import EbizFileUpload from "./components/EbizFileUpload.vue";
 import EbizTabHeader from "./components/EbizTabHeader.vue";
+import EbizPageHeader from "./components/EbizPageHeader.vue";
 import TdesignCalendar from "./components/TdesignCalendar/index.vue";
 import TdesignCollapse from "./components/TdesignCollapse.vue";
 import TdesignCollapsePanel from "./components/TdesignCollapsePanel.vue";
@@ -52,6 +53,11 @@ import EbizTable from "./components/EbizTable.vue";
 import EbizTableColumn from './components/EbizTableColumn.vue';
 import EbizTableSort from './components/EbizTableSort.vue';
 import EbizStatusBadge from "./components/EbizStatusBadge.vue";
+import EbizDetailBlock from './components/EbizDetailBlock.vue';
+import EbizTree from './components/EbizTree.vue';
+import EbizTreeSelector from './components/EbizTreeSelector.vue';
+import EbizTimePicker from './components/EbizTimePicker.vue';
+import TinyGridEditorSelect from './components/TinyGridEditorSelect.vue';
 import { MessagePlugin as EbizMessage } from 'tdesign-vue-next';
 
 // 导入简洁数据服务
@@ -91,6 +97,8 @@ export {
   EbizRouteBreadcrumb,
   EbizRichTextEditor,
   EbizTabHeader,
+  // 页面头部组件
+  EbizPageHeader,
   // 思维导图
   EbizMindmap,
   // 文件上传组件
@@ -156,5 +164,13 @@ export {
   // 表格排序组件
   EbizTableSort,
   // 状态标记组件
-  EbizStatusBadge
+  EbizStatusBadge,
+  // 详情块组件
+  EbizDetailBlock,
+  // 树组件
+  EbizTree,
+  EbizTreeSelector,
+  // 时间选择器组件
+  EbizTimePicker,
+  TinyGridEditorSelect // 表格编辑专用select组件
 };

package/src/router/index.js

@@ -244,6 +244,12 @@ const routes = [
     component: () => import('../views/DialogDemo.vue'),
     meta: { title: 'TDesign对话框组件示例' }
   },
+  {
+    path: '/page-header',
+    name: 'PageHeader',
+    component: () => import('../views/PageHeaderDemo.vue'),
+    meta: { title: 'Ebiz页面头部组件示例', icon: 'header' }
+  },
   {
     path: '/table-demo',
     name: 'TableDemo',
@@ -261,6 +267,44 @@ const routes = [
     name: 'TableSort',
     component: () => import('../views/TableSortDemo.vue'),
     meta: { title: 'Ebiz表格排序组件示例' }
+  },
+  {
+    path: '/ebiz-detail-block',
+    name: 'EbizDetailBlock',
+    component: () => import('../views/EbizDetailBlockDemo.vue'),
+    meta: { title: 'Ebiz详情块组件示例' }
+  },
+  {
+    path: '/tree',
+    name: 'Tree',
+    component: () => import('../views/TreeDemo.vue'),
+    meta: { title: 'Ebiz树组件示例' }
+  },
+  {
+    path: '/tree-demo',
+    name: 'TreeDemo',
+    component: () => import('../views/TreeDemo.vue'),
+    meta: { title: 'Ebiz树组件示例' }
+  },
+  {
+    path: '/tree-selector-demo',
+    name: 'TreeSelectorDemo',
+    component: () => import('../views/TreeSelectorDemo.vue'),
+    meta: {
+      title: '树形选择器'
+    }
+  },
+  {
+    path: '/tree-selector',
+    name: 'TreeSelector',
+    component: () => import('../views/TreeSelectorDemo.vue'),
+    meta: { title: '树选择器组件示例' }
+  },
+  {
+    path: '/time-picker',
+    name: 'TimePicker',
+    component: () => import('../views/TimePickerDemo.vue'),
+    meta: { title: '时间选择器组件示例' }
   }
 ]
 

package/src/views/Button.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <ebiz-route-breadcrumb />
-    <ebiz-button />
+    <ebiz-button :text="测试" :apiConfig="{ apiId: 802, apiType: 5 }" @prepare="onPrepare" />
   </div>
 </template>
 
@@ -12,9 +12,13 @@ export default {
   name: 'ButtonDemo',
   components: {
     EbizButton
+  },
+  methods: {
+    onPrepare() {
+      
+    }
   }
 }
 </script>
 
-<style scoped>
-</style> 
+<style scoped></style>

package/src/views/EbizDetailBlockDemo.vue

@@ -0,0 +1,31 @@
+<template>
+    <div>
+        <ebiz-route-breadcrumb />
+        <ebiz-detail-block :model="model" :labelMap="labelMap" :gap="10" :labelSize="20" :labelColor="'#000'" :valueSize="20" :valueColor="'#000'"/>
+    </div>
+</template>
+
+<script>
+import { EbizDetailBlock } from '@/index.js'
+
+export default {
+    name: 'EbizDetailBlockDemo',
+    components: {
+        EbizDetailBlock
+    },
+    data() {
+        return {
+            model: {
+                "name": "张三",
+                "sex": "男"
+            },
+            labelMap:{
+                "name": "姓名",
+                "sex": "性别"
+            }
+        }
+    },
+}
+</script>
+
+<style scoped></style>

package/src/views/Home.vue

@@ -1,12 +1,22 @@
 <template>
   <div class="home">
-    <h1>组件库示例</h1>
+    <h1>Ebiz 组件库</h1>
     <div class="component-list">
       <div v-for="(item, index) in components" :key="index" class="component-item">
         <router-link :to="item.path" class="component-link">
           {{ item.title }}
         </router-link>
       </div>
+      
+      <router-link to="/tree-demo" class="component-item">
+        <div class="component-title">树组件</div>
+        <div class="component-desc">用于展示层级结构和操作的组件</div>
+      </router-link>
+      
+      <router-link to="/tree-selector-demo" class="component-item">
+        <div class="component-title">树形选择器</div>
+        <div class="component-desc">基于树组件的选择器，支持搜索和多选</div>
+      </router-link>
     </div>
   </div>
 </template>
@@ -54,10 +64,15 @@ export default {
       { path: '/ebiz-employee-info', title: 'Ebiz员工信息组件示例' },
       { path: '/tdesign-alert', title: 'TDesign提示组件示例' },
       { path: '/tdesign-dialog', title: 'TDesign对话框组件示例' },
+      { path: '/page-header', title: 'Ebiz页面头部组件示例' },
       { path: '/table-demo', title: 'Ebiz表格组件示例' },
       { path: '/status-badge', title: 'Ebiz状态标记组件示例' },
+      { path: '/ebiz-detail-block', title: 'Ebiz详情块组件示例' },
       { path: '/table-column', title: 'Ebiz表格列组件示例' },
-      { path: '/table-sort', title: 'Ebiz表格排序组件示例' }
+      { path: '/table-sort', title: 'Ebiz表格排序组件示例' },
+      { path: '/tree', title: 'Ebiz树组件示例' },
+      { path: '/tree-selector', title: 'Ebiz树选择器组件示例' },
+      { path: '/time-picker', title: 'Ebiz时间选择器组件示例' }
     ]
 
     return {
@@ -95,4 +110,18 @@ export default {
 .component-link:hover {
   color: #1890ff;
 }
+
+.component-title {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.component-desc {
+  font-size: 14px;
+}
+
+.component-item:hover {
+  background-color: #e6e6e6;
+}
 </style>