@ebiz/designer-components 0.0.19-beta.1 → 0.0.19-beta.11

package/src/components/EbizTreeMergeTableConfig.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <EbizTreeMergeTable :type="type" :id="id" @success="handleSuccess"/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EbizTreeMergeTableConfig'
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue'
+import EbizTreeMergeTable from './EbizTreeMergeTable.vue'
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'role' // role,post 角色，岗位
+  },
+  id: {
+    type: String,
+    default: ''
+  }
+})
+
+const emits = defineEmits(['success'])
+
+const handleSuccess = () => {
+  emits('success')
+}
+</script>
+
+<style scoped>
+</style> 

package/src/components/EbizTreeSelector.vue

@@ -1,46 +1,47 @@
 <template>
   <div class="ebiz-tree-selector">
-    <div class="selected-items" v-if="modelValue && modelValue.length">
-      <div v-for="(item, index) in modelValue" :key="index" class="selected-item">
-        <span class="item-text">{{ item.label }}</span>
-        <span class="item-remove" @click.stop="removeItem(index)">×</span>
+      <div class="selected-items" v-if="modelValue && modelValue.length">
+        <div v-for="(item, index) in modelValue" :key="index" class="selected-item">
+          <span class="item-text">{{ item.label }}</span>
+          <span class="item-remove" @click="removeItem(index)">×</span>
+        </div>
       </div>
-    </div>
-    <t-button @click="showDialog" variant="text" theme="primary" size="small"> 添加 </t-button>
-
-    <EbizDialog v-model:visible="dialogVisible" header="选择人员/部门" width="800px" placement="center" confirmBtn="确定"
-      cancelBtn="取消" @confirm="handleConfirm" @cancel="handleCancel" @close="handleCancel">
-      <div class="selector-container">
-        <!-- 左侧选择区域 -->
-        <div class="left-panel">
-          <!-- 顶部搜索区域 -->
-          <div class="search-box">
-            <t-input v-model="searchText" placeholder="搜索成员、部门或标签" clearable>
-              <template #suffix-icon>
-                <t-icon name="search"></t-icon>
-              </template>
-            </t-input>
-          </div>
-
-          <!-- 选项卡 -->
-          <t-tabs v-model="activeTab" class="selector-tabs">
-            <t-tab-panel value="organization" label="组织架构" :destroyOnHide="false">
-
-            </t-tab-panel>
-            <!-- <t-tab-panel value="department" label="部门"></t-tab-panel> -->
-            <!-- <t-tab-panel value="position" label="岗位"></t-tab-panel> -->
-            <t-tab-panel value="employee" label="员工"></t-tab-panel>
-          </t-tabs>
-
-          <!-- 树形结构区域 -->
-          <div class="tree-content">
-            <div v-if="loading" class="loading-container">
-              <t-loading />
+      <t-button @click="showDialog" variant="text" theme="primary" size="small"> 添加 </t-button>
+
+      <EbizDialog attach="body" :zIndex="10000" v-model:visible="dialogVisible" header="选择人员/部门" width="800px"
+        placement="center" confirmBtn="确定" cancelBtn="取消" @confirm="handleConfirm" @cancel="handleCancel"
+        @close="handleCancel">
+        <div class="selector-container">
+          <!-- 左侧选择区域 -->
+          <div class="left-panel">
+            <!-- 顶部搜索区域 -->
+            <div class="search-box">
+              <t-input v-model="searchText" placeholder="搜索成员、部门或标签" clearable>
+                <template #suffix-icon>
+                  <t-icon name="search"></t-icon>
+                </template>
+              </t-input>
             </div>
-            <EbizTree ref="organizationTree" v-show="activeTab === 'organization'" checkable :items="organizationData"
-              v-model="checkedNodes" v-model:expanded="expandedNodes" :disable-check="disableCheck"
-              :keys="{ label: 'name', value: 'id', children: 'childs' }" />
-            <!-- <EbizTree
+
+            <!-- 选项卡 -->
+            <t-tabs v-model="activeTab" class="selector-tabs">
+              <t-tab-panel value="organization" label="组织架构" :destroyOnHide="false">
+
+              </t-tab-panel>
+              <!-- <t-tab-panel value="department" label="部门"></t-tab-panel> -->
+              <!-- <t-tab-panel value="position" label="岗位"></t-tab-panel> -->
+              <t-tab-panel value="employee" label="员工"></t-tab-panel>
+            </t-tabs>
+
+            <!-- 树形结构区域 -->
+            <div class="tree-content">
+              <div v-if="loading" class="loading-container">
+                <t-loading />
+              </div>
+              <EbizTree ref="organizationTree" v-show="activeTab === 'organization'" checkable :items="organizationData"
+                v-model="checkedNodes" v-model:expanded="expandedNodes" :disable-check="disableCheck"
+                :keys="{ label: 'name', value: 'id', children: 'childs' }" />
+              <!-- <EbizTree
               v-else-if="activeTab === 'department'"
               checkable
               :items="filteredData."
@@ -54,31 +55,31 @@
               v-model="checkedNodes"
               :disable-check="disableCheck"
             /> -->
-            <EbizTree ref="employeeTree" v-show="activeTab === 'employee'" checkable :items="employeeData"
-              :keys="{ label: 'label', value: 'bindid', children: 'childs' }" v-model="checkedUserNodes"
-              :disable-check="disableCheck" />
+              <EbizTree ref="employeeTree" v-show="activeTab === 'employee'" checkable :items="employeeData"
+                :keys="{ label: 'label', value: 'bindid', children: 'childs' }" v-model="checkedUserNodes"
+                :disable-check="disableCheck" />
+            </div>
           </div>
-        </div>
 
-        <!-- 右侧已选区域 -->
-        <div class="right-panel">
-          <div class="selected-title">已选择的部门、成员</div>
-          <div class="selected-count">共 {{ [...selectPreview, ...selectPreviewUser].length }} 项</div>
-          <div class="selected-list">
-            <div v-for="(item, index) in [...selectPreview,...selectPreviewUser]" :key="index"
-              class="selected-list-item">
-              <t-icon :name="getIconForType(item)" class="item-icon" />
-              <span class="selected-label">{{ item.label }}</span>
-              <t-icon name="close-circle" class="remove-icon" @click="removePreviewItem(item)" />
-            </div>
-            <div v-if="[...selectPreview, ...selectPreviewUser].length === 0" class="no-selection">
-              <t-icon name="info-circle" />
-              <span style="user-select: none">请在左侧选择部门或成员</span>
+          <!-- 右侧已选区域 -->
+          <div class="right-panel">
+            <div class="selected-title">已选择的部门、成员</div>
+            <div class="selected-count">共 {{ [...selectPreview, ...selectPreviewUser].length }} 项</div>
+            <div class="selected-list">
+              <div v-for="(item, index) in [...selectPreview,...selectPreviewUser]" :key="index"
+                class="selected-list-item">
+                <t-icon :name="getIconForType(item)" class="item-icon" />
+                <span class="selected-label">{{ item.label }}</span>
+                <t-icon name="close-circle" class="remove-icon" @click="removePreviewItem(item)" />
+              </div>
+              <div v-if="[...selectPreview, ...selectPreviewUser].length === 0" class="no-selection">
+                <t-icon name="info-circle" />
+                <span style="user-select: none">请在左侧选择部门或成员</span>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </EbizDialog>
+      </EbizDialog>
   </div>
 </template>
 
@@ -235,10 +236,10 @@ function removeItem(index) {
 watch(
   checkedNodes,
   (newValues) => {
-    if (!organizationTree.value.treeRef) return
-    selectPreview.value = newValues.map(organizationTree.value.treeRef.getItem).map((i) => ({
+    if (!organizationTree.value?.treeRef) return
+    selectPreview.value = (newValues.map(organizationTree.value.treeRef.getItem) ?? []).map((i) => ({
       label: i?.label,
-      type: i?.data?.type || i.type,
+      type: i?.data?.type || i?.type,
       bindid: i?.value
     }))
   },

package/src/components/TdesignDescriptions.vue

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <div>
+      <div>123123123</div>
+    </div>
+    <t-descriptions v-bind="$attrs" :border="border" :colon="colon" :column="column" :layout="layout"
+      :item-layout="itemLayout" :size="size" :title="title" :table-layout="tableLayout"
+      :table-border-color="tableBorderColor">
+      <slot></slot>
+      <slot name="title"></slot>
+    </t-descriptions>
+  </div>
+
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Descriptions as TDescriptions } from 'tdesign-vue-next';
+
+const props = defineProps({
+  border: {
+    type: Boolean,
+    default: false
+  },
+  colon: {
+    type: Boolean,
+    default: false
+  },
+  column: {
+    type: Number,
+    default: 2
+  },
+  layout: {
+    type: String,
+    default: 'horizontal',
+    validator(val) {
+      return ['horizontal', 'vertical'].includes(val);
+    }
+  },
+  itemLayout: {
+    type: String,
+    default: 'horizontal',
+    validator(val) {
+      return ['horizontal', 'vertical'].includes(val);
+    }
+  },
+  size: {
+    type: String,
+    default: 'medium',
+    validator(val) {
+      return ['small', 'medium', 'large'].includes(val);
+    }
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  tableLayout: {
+    type: String,
+    default: 'fixed',
+    validator(val) {
+      return ['auto', 'fixed'].includes(val);
+    }
+  },
+  tableBorderColor: {
+    type: String,
+    default: ''
+  }
+});
+
+defineEmits([]);
+</script>
+
+<style scoped>
+</style> 

package/src/components/TdesignDescriptionsItem.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <div>123123123</div>
+    <t-descriptions-item v-bind="$attrs" :label="label" :span="span" :layout="layout" :className="className"
+      :labelClassName="labelClassName" :contentClassName="contentClassName">
+      <slot></slot>
+    </t-descriptions-item>
+  </div>
+
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { DescriptionsItem as TDescriptionsItem } from 'tdesign-vue-next';
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: ''
+  },
+  span: {
+    type: Number,
+    default: 1
+  },
+  layout: {
+    type: String,
+    default: '',
+    validator(val) {
+      if (!val) return true;
+      return ['horizontal', 'vertical'].includes(val);
+    }
+  },
+  className: {
+    type: String,
+    default: ''
+  },
+  labelClassName: {
+    type: String,
+    default: ''
+  },
+  contentClassName: {
+    type: String,
+    default: ''
+  }
+});
+
+defineEmits([]);
+</script>
+
+<style scoped>
+</style> 

package/src/components/TdesignForm.vue

@@ -1,5 +1,6 @@
 <template>
     <t-form 
+        ref="formRef"
         :class="customClass"
         :data="data"
         :colon="colon"
@@ -30,7 +31,7 @@ export default {
 </script>
 
 <script setup>
-import { defineProps, defineEmits } from 'vue';
+import { defineProps, defineEmits, ref, defineExpose } from 'vue';
 import { Form as TForm } from 'tdesign-vue-next';
 
 defineProps({
@@ -127,6 +128,10 @@ const handleSubmit = (e) => {
 const handleValidate = (params) => {
     emit('validate', params);
 };
+const formRef = ref();
+defineExpose({
+    formRef
+})
 </script>
 
 <style lang="less" scoped>

package/src/components/examples/PopconfirmExample.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="popconfirm-example">
+    <h2>气泡确认框示例</h2>
+    
+    <h3>1. 基础用法</h3>
+    <div class="example-item">
+      <ebiz-popconfirm content="确定要删除这条数据吗？">
+        <ebiz-tdesign-button>删除</ebiz-tdesign-button>
+      </ebiz-popconfirm>
+    </div>
+    
+    <h3>2. 不同主题</h3>
+    <div class="example-item">
+      <ebiz-space>
+        <ebiz-popconfirm content="这是默认主题" theme="default">
+          <ebiz-tdesign-button>默认主题</ebiz-tdesign-button>
+        </ebiz-popconfirm>
+        
+        <ebiz-popconfirm content="这是警告主题" theme="warning">
+          <ebiz-tdesign-button>警告主题</ebiz-tdesign-button>
+        </ebiz-popconfirm>
+        
+        <ebiz-popconfirm content="这是危险主题" theme="danger">
+          <ebiz-tdesign-button>危险主题</ebiz-tdesign-button>
+        </ebiz-popconfirm>
+      </ebiz-space>
+    </div>
+    
+    <h3>3. 不同位置</h3>
+    <div class="example-item">
+      <ebiz-space>
+        <ebiz-popconfirm content="这是顶部弹出" placement="top">
+          <ebiz-tdesign-button>顶部</ebiz-tdesign-button>
+        </ebiz-popconfirm>
+        
+        <ebiz-popconfirm content="这是左侧弹出" placement="left">
+          <ebiz-tdesign-button>左侧</ebiz-tdesign-button>
+        </ebiz-popconfirm>
+        
+        <ebiz-popconfirm content="这是右侧弹出" placement="right">
+          <ebiz-tdesign-button>右侧</ebiz-tdesign-button>
+        </ebiz-popconfirm>
+        
+        <ebiz-popconfirm content="这是底部弹出" placement="bottom">
+          <ebiz-tdesign-button>底部</ebiz-tdesign-button>
+        </ebiz-popconfirm>
+      </ebiz-space>
+    </div>
+    
+    <h3>4. 自定义按钮文本</h3>
+    <div class="example-item">
+      <ebiz-popconfirm 
+        content="确定要执行此操作吗？" 
+        confirm-btn="执行" 
+        cancel-btn="取消执行"
+      >
+        <ebiz-tdesign-button>自定义按钮文本</ebiz-tdesign-button>
+      </ebiz-popconfirm>
+    </div>
+    
+    <h3>5. 事件处理</h3>
+    <div class="example-item">
+      <ebiz-popconfirm 
+        content="确定要继续吗？" 
+        @confirm="handleConfirm" 
+        @cancel="handleCancel"
+      >
+        <ebiz-tdesign-button>点击触发事件</ebiz-tdesign-button>
+      </ebiz-popconfirm>
+    </div>
+    
+    <h3>6. 不同触发方式</h3>
+    <div class="example-item">
+      <ebiz-space>
+        <ebiz-popconfirm content="点击触发" trigger="click">
+          <ebiz-tdesign-button>点击触发</ebiz-tdesign-button>
+        </ebiz-popconfirm>
+        
+        <ebiz-popconfirm content="悬浮触发" trigger="hover">
+          <ebiz-tdesign-button>悬浮触发</ebiz-tdesign-button>
+        </ebiz-popconfirm>
+        
+        <ebiz-popconfirm content="获得焦点触发" trigger="focus">
+          <ebiz-tdesign-input placeholder="点击输入框"></ebiz-tdesign-input>
+        </ebiz-popconfirm>
+      </ebiz-space>
+    </div>
+    
+    <h3>7. 控制显示状态</h3>
+    <div class="example-item">
+      <ebiz-tdesign-button @click="visible = !visible">
+        {{ visible ? '隐藏' : '显示' }}气泡确认框
+      </ebiz-tdesign-button>
+      
+      <ebiz-popconfirm 
+        v-model:visible="visible"
+        content="这是一个受控的气泡确认框"
+      >
+        <ebiz-tdesign-button style="margin-left: 16px;">
+          受控组件
+        </ebiz-tdesign-button>
+      </ebiz-popconfirm>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizPopconfirm, EbizTdesignButton, EbizTdesignInput, EbizSpace, EbizMessage } from '../../index';
+
+// 控制气泡确认框显示状态
+const visible = ref(false);
+
+// 确认事件处理
+const handleConfirm = () => {
+  EbizMessage.success('确认操作');
+};
+
+// 取消事件处理
+const handleCancel = () => {
+  EbizMessage.info('取消操作');
+};
+</script>
+
+<style lang="less" scoped>
+.popconfirm-example {
+  padding: 20px;
+  
+  h2 {
+    margin-bottom: 24px;
+    font-weight: bold;
+  }
+  
+  h3 {
+    margin-top: 24px;
+    margin-bottom: 16px;
+    font-weight: bold;
+    font-size: 16px;
+    border-left: 4px solid #0052d9;
+    padding-left: 12px;
+  }
+  
+  .example-item {
+    margin-bottom: 24px;
+    padding: 16px;
+    border: 1px solid #eee;
+    border-radius: 6px;
+  }
+}
+</style> 

package/src/index.js

@@ -55,8 +55,16 @@ 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 EbizPopconfirm from './components/EbizPopconfirm.vue';
+import EbizTreeMergeTable from './components/EbizTreeMergeTable.vue';
 import { MessagePlugin as EbizMessage } from 'tdesign-vue-next';
 
+// import EbizDescriptions from './components/EbizDescriptions.vue';
+// import EbizDescriptionsItem from './components/EbizDescriptionsItem.vue'
+import { Descriptions as EbizDescriptions } from 'tdesign-vue-next';
+import { DescriptionsItem as EbizDescriptionsItem } from 'tdesign-vue-next';
+import { DescriptionsItem as TDescriptionsItem } from 'tdesign-vue-next';
+
 // 导入简洁数据服务
 import dataService from "./apiService/simpleDataService";
 
@@ -165,5 +173,13 @@ export {
   EbizTree,
   EbizTreeSelector,
   // 时间选择器组件
-  EbizTimePicker
+  EbizTimePicker,
+  // 气泡确认框组件
+  EbizPopconfirm,
+  // 树形合并表格组件
+  EbizTreeMergeTable,
+  // 新增 EbizDescriptions 和 EbizDescriptionsItem
+  EbizDescriptions,
+  EbizDescriptionsItem,
+  TDescriptionsItem
 };

package/src/router/index.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import Home from '../views/Home.vue'
 import ButtonView from '../views/Button.vue'
 import TableView from '../views/TableView.vue'
+import TdesignDescriptions from '../views/TdesignDescriptions.vue'
 
 const routes = [
   {
@@ -248,7 +249,7 @@ const routes = [
     path: '/page-header',
     name: 'PageHeader',
     component: () => import('../views/PageHeaderDemo.vue'),
-    meta: { title: 'Ebiz页面头部组件示例', icon: 'header' }
+    meta: { title: 'Ebiz页面头部组件示例' }
   },
   {
     path: '/table-demo',
@@ -263,17 +264,11 @@ const routes = [
     meta: { title: 'Ebiz表格排序组件示例' }
   },
   {
-    path: '/ebiz-detail-block',
-    name: 'EbizDetailBlock',
+    path: '/detail-block',
+    name: 'DetailBlock',
     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',
@@ -284,21 +279,31 @@ const routes = [
     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: '树选择器组件示例' }
+    meta: { title: 'Ebiz树选择器组件示例' }
   },
   {
     path: '/time-picker',
     name: 'TimePicker',
     component: () => import('../views/TimePickerDemo.vue'),
-    meta: { title: '时间选择器组件示例' }
+    meta: { title: 'Ebiz时间选择器组件示例' }
+  },
+  {
+    path: '/tdesign-descriptions',
+    name: 'TdesignDescriptions',
+    component: TdesignDescriptions,
+    meta: { title: 'TDesign描述列表组件示例' }
+  },
+  {
+    path: '/popconfirm',
+    name: 'Popconfirm',
+    component: () => import('../views/PopconfirmDemo.vue'),
+    meta: { title: 'Ebiz气泡确认框组件示例' }
+  },
+  {
+    path: '/tree-merge-table-demo',
+    name: 'TreeMergeTableDemo',
+    component: () => import('../views/TreeMergeTableDemo.vue'),
+    meta: { title: '树形合并表格组件示例' }
   }
 ]
 

package/src/views/Home.vue

@@ -17,6 +17,11 @@
         <div class="component-title">树形选择器</div>
         <div class="component-desc">基于树组件的选择器，支持搜索和多选</div>
       </router-link>
+      
+      <router-link to="/tree-merge-table-demo" class="component-item">
+        <div class="component-title">树形合并表格</div>
+        <div class="component-desc">支持树形展示和单元格合并的表格组件</div>
+      </router-link>
     </div>
   </div>
 </template>
@@ -66,12 +71,13 @@ export default {
       { path: '/tdesign-dialog', title: 'TDesign对话框组件示例' },
       { path: '/page-header', title: 'Ebiz页面头部组件示例' },
       { path: '/table-demo', title: 'Ebiz表格组件示例' },
-      { path: '/ebiz-detail-block', title: 'Ebiz详情块组件示例' },
+      { path: '/detail-block', title: 'Ebiz详情块组件示例' },
       { path: '/table-column', title: 'Ebiz表格列组件示例' },
       { path: '/table-sort', title: 'Ebiz表格排序组件示例' },
-      { path: '/tree', title: 'Ebiz树组件示例' },
-      { path: '/tree-selector', title: 'Ebiz树选择器组件示例' },
-      { path: '/time-picker', title: 'Ebiz时间选择器组件示例' }
+      { path: '/time-picker', title: 'Ebiz时间选择器组件示例' },
+      { path: '/tdesign-descriptions', title: 'Ebiz描述列表组件示例' },
+      { path: '/popconfirm', title: 'Ebiz气泡确认框组件示例' },
+      { path: '/tree-merge-table-demo', title: '树形合并表格组件示例' }
     ]
 
     return {