@ebiz/designer-components 0.0.18-beta.31 → 0.0.18-beta.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.0.18-beta.31",
+  "version": "0.0.18-beta.33",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/apiService/simpleDataService.js

@@ -6,7 +6,6 @@
 
 import axios from 'axios'
 import { TinyNotify } from '@opentiny/vue'
-
 // 从环境变量获取API基础URL
 const API_BASE_URL = 'http://' + window.location.host + '/api'
 
@@ -57,7 +56,10 @@ axiosInstance.interceptors.response.use(
       return data.data
     } else {
       // message.error(data.message || '请求失败');
-      return Promise.reject(new Error(data.message || data.msg || '请求失败'))
+      return Promise.reject({
+        code: data.code,
+        message: data.message || data.msg || '请求失败'
+      })
     }
   },
   (error) => {
@@ -173,7 +175,7 @@ const dataService = {
     }
     params.apiId = apiConfig.apiId
     if (apiConfig.key) {
-      params.key = apiConfig.key
+      params.apiKey = apiConfig.key
     }
 
     const config = { ...defaultConfig, ...restConfig }

package/src/components/EbizDetailBlock.vue

@@ -0,0 +1,82 @@
+<template>
+    <div class="ebiz-detail-block">
+        <t-row v-for="(item, index) in detailItems" :key="index" class="detail-item">
+            <t-col :span="6" class="label" :style="labelStyle">{{ item.label }}</t-col>
+            <t-col :span="18" class="value" :style="valueStyle">{{ item.value }}</t-col>
+        </t-row>
+    </div>
+</template>
+
+<script lang="js" setup>
+import { computed, toRefs } from 'vue'
+import { Row as TRow, Col as TCol } from 'tdesign-vue-next'
+
+const props = defineProps({
+    model: {
+        type: Object,
+        default: () => { }
+    },
+    labelMap: {
+        type: Object,
+        default: () => { }
+    },
+    gap: {
+        type: [String, Number],
+        default: '0'
+    },
+    labelSize: {
+        type: [String, Number],
+        default: '14'
+    },
+    labelColor: {
+        type: String,
+        default: '#86909C'
+    },
+    valueSize: {
+        type: [String, Number],
+        default: '14'
+    },
+    valueColor: {
+        type: String,
+        default: '#0A0A0A'
+    }
+})
+
+const { model, labelMap, gap, labelSize, labelColor, valueSize, valueColor } = toRefs(props)
+
+const labelStyle = computed(() => ({
+    fontSize: typeof labelSize.value === 'number' ? `${labelSize.value}px` : labelSize.value,
+    color: labelColor.value,
+    marginBottom: typeof gap.value === 'number' ? `${gap.value}px` : gap.value
+}))
+
+const valueStyle = computed(() => ({
+    fontSize: typeof valueSize.value === 'number' ? `${valueSize.value}px` : valueSize.value,
+    color: valueColor.value
+}))
+
+const detailItems = computed(() => {
+    return Object.entries(model.value).map(([key, value]) => ({
+        label: labelMap.value[key] || key,
+        value: value || '--'
+    }))
+})
+</script>
+
+<style scoped>
+.ebiz-detail-block {
+    padding: 16px;
+}
+
+.detail-item {
+    line-height: 32px;
+}
+
+.label {
+    width: 50%;
+}
+
+.value {
+    width: 50%;
+}
+</style>

package/src/components/EbizDialog.vue

@@ -0,0 +1,249 @@
+<template>
+    <t-dialog
+        v-model:visible="dialogVisible"
+        :attach="attach"
+        :body-class="bodyClass"
+        :body-scroll-lock="bodyScrollLock"
+        :cancel-btn="cancelBtn"
+        :class-prefix="classPrefix"
+        :close-btn="closeBtn"
+        :close-on-esc-keydown="closeOnEscKeydown"
+        :close-on-overlay-click="closeOnOverlayClick"
+        :confirm-btn="confirmBtn"
+        :content="content"
+        :default-visible="defaultVisible"
+        :destroy-on-close="destroyOnClose"
+        :dialog-class="dialogClass"
+        :draggable="draggable"
+        :footer="footer"
+        :header="header"
+        :mode="mode"
+        :placement="placement"
+        :prevent-scroll-through="preventScrollThrough"
+        :show-overlay="showOverlay"
+        :top="top"
+        :width="width"
+        :zIndex="zIndex"
+        @cancel="handleCancel"
+        @close="handleClose"
+        @closed="handleClosed"
+        @confirm="handleConfirm"
+        @opened="handleOpened"
+        @overlay-click="handleOverlayClick"
+        @update:visible="handleUpdateVisible"
+    >
+        <!-- 默认插槽 -->
+        <slot></slot>
+        
+        <!-- 页脚插槽 -->
+        <template v-if="$slots.footer" #footer>
+            <slot name="footer"></slot>
+        </template>
+        
+        <!-- 头部插槽 -->
+        <template #header>
+            <slot name="header">{{ title }}</slot>
+        </template>
+    </t-dialog>
+</template>
+
+<script>
+export default {
+    name: "EbizDialog"
+}
+</script>
+
+<script setup>
+import { ref, defineProps, defineEmits, watch } from 'vue';
+import { Dialog as TDialog } from 'tdesign-vue-next';
+
+// 定义组件接收的属性
+const props = defineProps({
+    // 对话框挂载的节点
+    attach: {
+        type: [String, Function, Element],
+        default: 'body'
+    },
+    // 对话框内容的类名
+    bodyClass: {
+        type: String,
+        default: ''
+    },
+    // 是否锁定body滚动
+    bodyScrollLock: {
+        type: Boolean,
+        default: true
+    },
+    // 取消按钮配置
+    cancelBtn: {
+        type: [String, Object, Boolean],
+        default: null
+    },
+    // 类名前缀
+    classPrefix: {
+        type: String,
+        default: 't'
+    },
+    // 关闭按钮配置
+    closeBtn: {
+        type: [String, Object, Boolean],
+        default: true
+    },
+    // 是否支持按ESC键关闭对话框
+    closeOnEscKeydown: {
+        type: Boolean,
+        default: true
+    },
+    // 点击蒙层是否关闭
+    closeOnOverlayClick: {
+        type: Boolean,
+        default: true
+    },
+    // 确认按钮配置
+    confirmBtn: {
+        type: [String, Object, Boolean],
+        default: '确认'
+    },
+    // 对话框内容
+    content: {
+        type: [String, Function],
+        default: ''
+    },
+    // 默认是否显示对话框
+    defaultVisible: {
+        type: Boolean,
+        default: false
+    },
+    // 关闭时是否销毁对话框
+    destroyOnClose: {
+        type: Boolean,
+        default: false
+    },
+    // 对话框样式类
+    dialogClass: {
+        type: String,
+        default: ''
+    },
+    // 是否可拖拽
+    draggable: {
+        type: Boolean,
+        default: false
+    },
+    // 底部内容
+    footer: {
+        type: [Boolean, Function],
+        default: true
+    },
+    // 头部内容
+    header: {
+        type: [Boolean, Function],
+        default: true
+    },
+    // 对话框类型
+    mode: {
+        type: String,
+        default: 'modal',
+        validator: (val) => ['modal', 'modeless', 'full-screen'].includes(val)
+    },
+    // 对话框位置
+    placement: {
+        type: String,
+        default: 'top',
+        validator: (val) => ['top', 'center'].includes(val)
+    },
+    // 防止滚动穿透
+    preventScrollThrough: {
+        type: Boolean,
+        default: true
+    },
+    // 是否显示遮罩层
+    showOverlay: {
+        type: Boolean,
+        default: true
+    },
+    // 对话框标题
+    title: {
+        type: [String, Function],
+        default: ''
+    },
+    // 距离顶部的位置
+    top: {
+        type: [String, Number],
+        default: '15%'
+    },
+    // 对话框可见性
+    visible: {
+        type: Boolean,
+        default: undefined
+    },
+    // 对话框宽度
+    width: {
+        type: [String, Number],
+        default: '500px'
+    },
+    // 对话框层级
+    zIndex: {
+        type: Number,
+        default: 2500
+    }
+});
+
+// 定义组件的事件
+const emit = defineEmits([
+    'cancel', 
+    'close', 
+    'closed',
+    'confirm',
+    'opened',
+    'overlay-click',
+    'update:visible'
+]);
+
+// 内部维护的可见性状态
+const dialogVisible = ref(props.visible !== undefined ? props.visible : props.defaultVisible);
+
+// 监听visible属性变化
+watch(() => props.visible, (newValue) => {
+    dialogVisible.value = newValue;
+});
+
+// 取消按钮点击事件
+const handleCancel = (e) => {
+    emit('cancel', e);
+};
+
+// 关闭事件
+const handleClose = (e) => {
+    emit('close', e);
+};
+
+// 关闭动画结束后触发
+const handleClosed = () => {
+    emit('closed');
+};
+
+// 确认按钮点击事件
+const handleConfirm = (e) => {
+    emit('confirm', e);
+};
+
+// 对话框打开动画结束后触发
+const handleOpened = () => {
+    emit('opened');
+};
+
+// 点击遮罩层触发
+const handleOverlayClick = (context) => {
+    emit('overlay-click', context);
+};
+
+// 可见性变化事件
+const handleUpdateVisible = (visible) => {
+    dialogVisible.value = visible;
+    emit('update:visible', visible);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

package/src/components/EbizPageHeader.vue

@@ -1,20 +1,29 @@
 <template>
   <div class="ebiz-page-header">
-    <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>
-          <t-icon :name="item.icon" />
-        </template>
-        {{ item.title }}
-      </t-breadcrumb-item>
-    </t-breadcrumb>
-    <div class="help-doc" @click="goToHelp">
-      <t-icon name="chat-bubble-help-filled"></t-icon>
-      <span>帮助文档</span>
+    <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>
 
@@ -67,7 +76,6 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 16px 0;
 }
 
 .help-doc {

package/src/components/EbizRemoteSelect.vue

@@ -41,7 +41,9 @@ const props = defineProps({
      */
     queryParams: {
         type: Object,
-        default: () => ({})
+        default: () => ({
+            name: ''
+        })
     },
     /**
      * 是否多选
@@ -62,7 +64,7 @@ const props = defineProps({
      */
     clearable: {
         type: Boolean,
-        default: false
+        default: true
     },
     /**
      * 是否禁用
@@ -140,24 +142,29 @@ const focus = () => {
 
 defineExpose({
     focus,
-    selectRef
+    selectRef,
+    options
 });
 
 // 远程搜索处理函数
 const handleRemoteSearch = async (keyword) => {
     loading.value = true;
-    console.log('handleRemoteSearch', keyword);
     try {
         const params = {
             queryParams: {
                 ...queryParams.value,
-                keyword
+                name: keyword
             }
         };
-        const res = await dataService.fetch(params, props.apiConfig);
+        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)
         }));
@@ -206,6 +213,7 @@ onMounted(async () => {
             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)
             }));

package/src/components/EbizTree.vue

@@ -0,0 +1,147 @@
+<template>
+  <t-tree
+    v-bind="$attrs"
+    :data="data"
+    :value="modelValue"
+    :expanded="expandedModel"
+    :actived="activedModel"
+    :transition="transition"
+    :disable-check="disableCheck"
+    :keys="keys"
+    @change="handleChange"
+    @expand="handleExpand"
+    @active="handleActive"
+    @select="$emit('select', $event)"
+    @drag-start="$emit('drag-start', $event)"
+    @drag-end="$emit('drag-end', $event)"
+    @drag-over="$emit('drag-over', $event)"
+    @drag-leave="$emit('drag-leave', $event)"
+    @drag-drop="$emit('drag-drop', $event)"
+    @click="$emit('click', $event)"
+    @load="$emit('load', $event)"
+  >
+    <template v-if="$slots.default" #default="slotProps">
+      <slot :node="slotProps.node"></slot>
+    </template>
+    <template v-if="$slots.empty" #empty>
+      <slot name="empty"></slot>
+    </template>
+    <template v-if="$slots.icon" #icon="slotProps">
+      <slot name="icon" :node="slotProps.node"></slot>
+    </template>
+    <template v-if="$slots.label" #label="slotProps">
+      <slot name="label" :node="slotProps.node"></slot>
+    </template>
+    <template v-if="$slots.line" #line="slotProps">
+      <slot name="line" :node="slotProps.node"></slot>
+    </template>
+    <template v-if="$slots.operations" #operations="slotProps">
+      <slot name="operations" :node="slotProps.node"></slot>
+    </template>
+  </t-tree>
+</template>
+
+<script setup>
+import { Tree as TTree } from 'tdesign-vue-next';
+import { computed } from 'vue';
+
+// 定义组件属性
+const props = defineProps({
+  // 选中值
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  // 展开节点
+  expanded: {
+    type: Array,
+    default: () => []
+  },
+  // 激活节点
+  actived: {
+    type: Array,
+    default: () => []
+  },
+  // 数据
+  items: {
+    type: Array,
+    default: () => []
+  },
+  // 是否启用过渡动画
+  transition: {
+    type: Boolean,
+    default: false
+  },
+  // 自定义节点禁用状态，返回true表示禁用
+  disableCheck: {
+    type: Function,
+    default: null
+  },
+  // 自定义节点数据中的字段名称
+  keys: {
+    type: Object,
+    default: () => ({
+      label: 'label',
+      value: 'value',
+      children: 'children'
+    })
+  }
+});
+
+// 定义组件事件
+const emit = defineEmits([
+  'update:modelValue', 
+  'update:expanded', 
+  'update:actived', 
+  'change', 
+  'expand', 
+  'active', 
+  'select', 
+  'click', 
+  'load',
+  'drag-start',
+  'drag-end',
+  'drag-over',
+  'drag-leave',
+  'drag-drop'
+]);
+
+// 处理items映射到data
+const data = computed(() => props.items);
+
+// 展开事件
+const expandedModel = computed({
+  get: () => props.expanded,
+  set: (val) => emit('update:expanded', val)
+});
+
+// 激活节点
+const activedModel = computed({
+  get: () => props.actived,
+  set: (val) => emit('update:actived', val)
+});
+
+// 值改变事件
+const handleChange = (val, context) => {
+  emit('update:modelValue', val);
+  emit('change', val, context);
+};
+
+// 节点展开事件
+const handleExpand = (val, context) => {
+  emit('update:expanded', val);
+  emit('expand', val, context);
+};
+
+// 节点激活事件
+const handleActive = (val, context) => {
+  emit('update:actived', val);
+  emit('active', val, context);
+};
+</script>
+
+<style>
+.t-tree {
+  width: 100%;
+}
+</style>