@ebiz/designer-components 0.0.50 → 0.0.51

package/dist/index.mjs

@@ -53641,7 +53641,7 @@ const rW = /* @__PURE__ */ Je(e8, [["render", t8], ["__scopeId", "data-v-d22af56
     },
     visible: {
       type: Boolean,
-      default: !0
+      default: !1
     },
     // 是否包含部门
     includeDepartment: {
@@ -54263,7 +54263,7 @@ const rW = /* @__PURE__ */ Je(e8, [["render", t8], ["__scopeId", "data-v-d22af56
       }, 8, ["visible"])
     ]));
   }
-}, fC = /* @__PURE__ */ Je(Q8, [["__scopeId", "data-v-10d1bebc"]]), e7 = {
+}, fC = /* @__PURE__ */ Je(Q8, [["__scopeId", "data-v-a986dbfe"]]), e7 = {
   name: "EbizAlert"
 }, t7 = /* @__PURE__ */ Object.assign(e7, {
   props: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.0.50",
+  "version": "0.0.51",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -19,6 +19,7 @@
   "dependencies": {
     "axios": "^1.8.1",
     "echarts": "^5.6.0",
+    "vxe-table": "^4.13.31",
     "tdesign-vue-next": "^1.12.0",
     "unplugin-auto-import": "^19.0.0",
     "unplugin-vue-components": "^28.0.0",

package/src/components/EbizEmployeeSelector.vue

@@ -200,7 +200,7 @@ const props = defineProps({
   },
   visible:{
     type: Boolean,
-    default: true
+    default: false
   },
   // 是否包含部门
   includeDepartment: {

package/src/components/EbizVxeTable.vue

@@ -0,0 +1,291 @@
+<template>
+  <div class="ebiz-vxe-table-container">
+    <vxe-table
+      ref="vxeTableRef"
+      v-bind="tableProp"
+      v-on="tableEvents"
+      :data="tableData"
+    >
+      <template v-for="(col, index) in renderColumns" :key="index">
+        <!-- 处理列分组 -->
+        <template v-if="col.childTableCols && col.childTableCols.length">
+          <vxe-colgroup :title="col.title">
+            <vxe-column
+              v-for="(childCol, childIndex) in col.childTableCols"
+              :key="childIndex"
+              :field="childCol.field"
+              :title="childCol.title"
+              :width="childCol.width"
+              :min-width="childCol.minWidth"
+              :sortable="childCol.sortable"
+              :filters="childCol.filters"
+              :tree-node="childCol.treeNode"
+              :align="childCol.align || 'left'"
+              :show-overflow="childCol.showOverflow !== false"
+            >
+              <!-- 处理自定义渲染 -->
+              <template v-if="childCol.type === 'jsx'" #default="scope">
+                <component :is="childCol.render" :scope="scope" />
+              </template>
+              <template v-else-if="childCol.type === 'slot'" #default="scope">
+                <slot :name="childCol.slotName" :scope="scope"></slot>
+              </template>
+            </vxe-column>
+          </vxe-colgroup>
+        </template>
+        <!-- 普通列 -->
+        <template v-else>
+          <vxe-column
+            :field="col.field"
+            :title="col.title"
+            :width="col.width"
+            :min-width="col.minWidth"
+            :type="getColumnType(col)"
+            :sortable="col.sortable"
+            :filters="col.filters"
+            :tree-node="col.treeNode"
+            :align="col.align || 'left'"
+            :show-overflow="col.showOverflow !== false"
+          >
+            <!-- 处理自定义渲染 -->
+            <template v-if="col.type === 'jsx'" #default="scope">
+              <component :is="col.render" :scope="scope" />
+            </template>
+            <template v-else-if="col.type === 'slot'" #default="scope">
+              <slot :name="col.slotName" :scope="scope"></slot>
+            </template>
+          </vxe-column>
+        </template>
+      </template>
+
+      <!-- 表格空数据模板 -->
+      <template #empty>
+        <div class="vxe-table-empty">
+          <slot name="empty">
+            <span>{{ emptyText }}</span>
+          </slot>
+        </div>
+      </template>
+    </vxe-table>
+
+    <!-- 分页组件 -->
+    <vxe-pager
+      v-if="isPagination"
+      v-bind="pagerConfig"
+      v-on="pagerEvents"
+      :current-page="currentPage"
+      :page-size="pageSize"
+      :total="total"
+      :layouts="pagerLayouts"
+      @page-change="handlePageChange"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, nextTick } from 'vue';
+import VXETable  from 'vxe-table';
+
+// 定义组件的props
+const props = defineProps({
+  // 表格数据
+  tableData: {
+    type: Array,
+    default: () => []
+  },
+  // 表格列配置
+  tableCols: {
+    type: Array,
+    default: () => []
+  },
+  // 表格属性配置
+  tableProp: {
+    type: Object,
+    default: () => ({
+      'auto-resize': true,
+      border: true,
+      'row-id': 'id',
+      'highlight-current-row': true,
+      'show-overflow': true,
+      'tree-config': { children: 'children' }
+    })
+  },
+  // 表格事件配置
+  tableEvents: {
+    type: Object,
+    default: () => ({})
+  },
+  // 分页组件配置
+  pagerConfig: {
+    type: Object,
+    default: () => ({})
+  },
+  // 分页事件
+  pagerEvents: {
+    type: Object,
+    default: () => ({})
+  },
+  // 是否显示分页
+  isPagination: {
+    type: Boolean,
+    default: true
+  },
+  // 当前页码
+  currentPage: {
+    type: Number,
+    default: 1
+  },
+  // 每页条数
+  pageSize: {
+    type: Number,
+    default: 10
+  },
+  // 数据总条数
+  total: {
+    type: Number,
+    default: 0
+  },
+  // 空数据提示文本
+  emptyText: {
+    type: String,
+    default: '暂无数据'
+  }
+});
+
+// 定义emit事件
+const emit = defineEmits([
+  'query',
+  'update:currentPage',
+  'update:pageSize',
+  'page-change',
+  'size-change'
+]);
+
+// 表格实例引用
+const vxeTableRef = ref(null);
+
+// 处理表格列，添加唯一ID
+const renderColumns = computed(() => {
+  return props.tableCols.map(col => {
+    // 创建新的列对象并添加唯一ID
+    const newCol = { ...col, id: 1 };
+    
+    // 处理子列配置
+    if (newCol.childTableCols && newCol.childTableCols.length) {
+      newCol.childTableCols = newCol.childTableCols.map(childCol => {
+        return { ...childCol, id: 1 };
+      });
+    }
+    
+    return newCol;
+  });
+});
+
+// 分页布局配置
+const pagerLayouts = computed(() => {
+  return ['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total'];
+});
+
+// 获取列类型
+const getColumnType = (col) => {
+  // vxe-table内置类型：checkbox、radio、expand、seq
+  if (['checkbox', 'radio', 'expand', 'seq'].includes(col.type)) {
+    return col.type;
+  }
+  return null;
+};
+
+// 表格查询方法
+const query = (page = props.currentPage, size = props.pageSize) => {
+  emit('query', page, size);
+};
+
+// 初始化表格
+onMounted(() => {
+  // 如果配置了自动查询，则在组件挂载后自动查询数据
+  if (props.tableProp['enable-auto-query'] !== false) {
+    nextTick(() => {
+      query();
+    });
+  }
+});
+
+// 处理分页变化
+const handlePageChange = ({ currentPage, pageSize }) => {
+  emit('update:currentPage', currentPage);
+  emit('update:pageSize', pageSize);
+  emit('page-change', { currentPage, pageSize });
+  query(currentPage, pageSize);
+};
+
+// 暴露表格实例方法
+const getInstance = () => {
+  return vxeTableRef.value;
+};
+
+// 完成加载，设置表格数据
+const complete = (data, totalCount) => {
+  if (data === false) {
+    // 加载失败
+    VXETable.modal.message({ content: '加载失败', status: 'error' });
+    return;
+  }
+  
+  if (totalCount !== undefined) {
+    // 更新总数
+    emit('update:total', totalCount);
+  }
+};
+
+// 获取选中行
+const getSelectedRows = () => {
+  if (vxeTableRef.value) {
+    return vxeTableRef.value.getCheckboxRecords();
+  }
+  return [];
+};
+
+// 导出表格数据
+const exportData = (options = {}) => {
+  if (vxeTableRef.value) {
+    return vxeTableRef.value.exportData(options);
+  }
+};
+
+// 重新加载表格数据
+const reloadData = (data = null) => {
+  if (vxeTableRef.value) {
+    if (data) {
+      return vxeTableRef.value.loadData(data);
+    } else {
+      return vxeTableRef.value.loadData(props.tableData);
+    }
+  }
+};
+
+// 将内部方法暴露给父组件
+defineExpose({
+  query,
+  complete,
+  getSelectedRows,
+  exportData,
+  getInstance,
+  reloadData
+});
+</script>
+
+<style scoped>
+.ebiz-vxe-table-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.vxe-table-empty {
+  padding: 30px 0;
+  text-align: center;
+  color: #909399;
+  font-size: 14px;
+}
+</style> 

package/src/router/index.js

@@ -4,7 +4,6 @@ import ButtonView from '../views/Button.vue'
 import TableView from '../views/TableView.vue'
 import TdesignDescriptions from '../views/TdesignDescriptions.vue'
 import EbizSForm from '../views/EbizSForm/index.vue'
-import path from 'path'
 
 const routes = [
   {
@@ -353,6 +352,12 @@ const routes = [
     name:"EbizApproval",
     component:()=>import('../views/EbizApprovalDemo.vue'),
     meta:{title:"Ebiz审批组件示例"}
+  },
+  {
+    path:"/vxe-table",
+    name:"EbizVxeTable",
+    component:()=>import('../views/VxeTableDemo.vue'),
+    meta:{title:"EbizVxeTable组件示例"}
   }
 ]
 

package/src/views/Home.vue

@@ -86,7 +86,8 @@ export default {
       { path: '/ebiz-map', title: '地图经纬度选择器组件示例' },
       { path: '/ebiz-s-data', title: 'Ebiz数据组件示例' },
       { path: '/ebiz-s-dialog', title: 'Ebiz高级弹窗组件示例' },
-      { path: '/approval', title: 'Ebiz审批组件示例' }
+      { path: '/approval', title: 'Ebiz审批组件示例' },
+      { path: '/vxe-table', title: 'EbizVxeTable示例' }
     ]
 
     return {

package/src/views/VxeTableDemo.vue

@@ -0,0 +1,280 @@
+<template>
+  <div class="demo-container">
+    <h1>VxeTable 表格组件示例</h1>
+    
+    <div class="demo-section">
+      <h2>1. 基础表格</h2>
+      <EbizVxeTable
+        ref="basicTable"
+        :tableData="basicTableData"
+        :tableCols="basicTableCols"
+        :isPagination="false"
+      />
+    </div>
+<!-- 
+    <div class="demo-section">
+      <h2>2. 带分页的表格</h2>
+      <EbizVxeTable
+        ref="paginationTable"
+        @query="handleQuery"
+        v-model:currentPage="currentPage"
+        v-model:pageSize="pageSize"
+        :total="total"
+        :tableData="paginationTableData"
+        :tableCols="paginationTableCols"
+      />
+    </div>
+
+    <div class="demo-section">
+      <h2>3. 树形表格</h2>
+      <EbizVxeTable
+        ref="treeTable"
+        :tableData="treeTableData"
+        :tableCols="treeTableCols"
+        :tableProp="treeTableProp"
+        :isPagination="false"
+      />
+    </div>
+
+    <div class="demo-section">
+      <h2>4. 自定义渲染表格</h2>
+      <EbizVxeTable
+        ref="customTable"
+        :tableData="customTableData"
+        :tableCols="customTableCols"
+        :isPagination="false"
+      />
+    </div> -->
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, h } from 'vue';
+import EbizVxeTable from '../components/EbizVxeTable.vue';
+
+// 基础表格数据
+const basicTableData = ref([
+  { id: 1, name: '张三', age: 28, gender: '男', department: '研发部', position: '前端开发' },
+  { id: 2, name: '李四', age: 32, gender: '男', department: '产品部', position: '产品经理' },
+  { id: 3, name: '王五', age: 24, gender: '女', department: '设计部', position: 'UI设计师' },
+  { id: 4, name: '赵六', age: 35, gender: '男', department: '研发部', position: '后端开发' },
+  { id: 5, name: '钱七', age: 29, gender: '女', department: '市场部', position: '市场专员' }
+]);
+
+const basicTableCols = ref([
+  { field: 'name', title: '姓名', width: 100 },
+  { field: 'age', title: '年龄', width: 80 },
+  { field: 'gender', title: '性别', width: 80 },
+  { field: 'department', title: '部门', width: 120 },
+  { field: 'position', title: '职位', minWidth: 120 }
+]);
+
+// 分页表格数据
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = ref(100);
+const paginationTableData = ref([]);
+const paginationTableCols = ref([
+  { type: 'seq', title: '序号', width: 60 },
+  { field: 'name', title: '姓名', width: 100 },
+  { field: 'age', title: '年龄', width: 80 },
+  { field: 'gender', title: '性别', width: 80 },
+  { field: 'email', title: '邮箱', minWidth: 180 },
+  { field: 'address', title: '地址', minWidth: 200 }
+]);
+
+// 树形表格数据
+const treeTableData = ref([
+  {
+    id: 1,
+    name: '研发中心',
+    manager: '张总',
+    headcount: 120,
+    children: [
+      {
+        id: 11,
+        name: '前端组',
+        manager: '李经理',
+        headcount: 45,
+        children: [
+          { id: 111, name: 'Vue小组', manager: '王组长', headcount: 15 },
+          { id: 112, name: 'React小组', manager: '刘组长', headcount: 18 },
+          { id: 113, name: '移动端小组', manager: '陈组长', headcount: 12 }
+        ]
+      },
+      {
+        id: 12,
+        name: '后端组',
+        manager: '赵经理',
+        headcount: 75,
+        children: [
+          { id: 121, name: 'Java小组', manager: '钱组长', headcount: 30 },
+          { id: 122, name: 'Python小组', manager: '孙组长', headcount: 25 },
+          { id: 123, name: 'Node小组', manager: '周组长', headcount: 20 }
+        ]
+      }
+    ]
+  },
+  {
+    id: 2,
+    name: '产品设计中心',
+    manager: '吴总',
+    headcount: 80,
+    children: [
+      { id: 21, name: '产品组', manager: '郑经理', headcount: 35 },
+      { id: 22, name: 'UI设计组', manager: '冯经理', headcount: 25 },
+      { id: 23, name: 'UX设计组', manager: '蒋经理', headcount: 20 }
+    ]
+  }
+]);
+
+const treeTableCols = ref([
+  { field: 'name', title: '部门名称', width: 180, treeNode: true },
+  { field: 'manager', title: '负责人', width: 120 },
+  { field: 'headcount', title: '人数', width: 80 }
+]);
+
+const treeTableProp = ref({
+  'auto-resize': true,
+  border: true,
+  'row-id': 'id',
+  'highlight-current-row': true,
+  'show-overflow': true,
+  'tree-config': {
+    children: 'children',
+    indent: 20,
+    expandAll: true
+  }
+});
+
+// 自定义渲染表格数据
+const customTableData = ref([
+  { id: 1, name: '项目A', status: 'success', progress: 100, startDate: '2023-01-10', endDate: '2023-03-15' },
+  { id: 2, name: '项目B', status: 'processing', progress: 65, startDate: '2023-02-20', endDate: '2023-05-30' },
+  { id: 3, name: '项目C', status: 'warning', progress: 32, startDate: '2023-03-05', endDate: '2023-07-10' },
+  { id: 4, name: '项目D', status: 'error', progress: 0, startDate: '2023-04-15', endDate: '2023-08-20' },
+  { id: 5, name: '项目E', status: 'success', progress: 100, startDate: '2023-02-01', endDate: '2023-04-25' }
+]);
+
+const customTableCols = ref([
+  { field: 'name', title: '项目名称', width: 120 },
+  { 
+    field: 'status', 
+    title: '状态', 
+    width: 100,
+    type: 'jsx',
+    render: ({ row }) => {
+      const statusMap = {
+        success: { text: '完成', color: '#52c41a' },
+        processing: { text: '进行中', color: '#1677ff' },
+        warning: { text: '警告', color: '#faad14' },
+        error: { text: '错误', color: '#ff4d4f' }
+      };
+      const status = statusMap[row.status] || { text: '未知', color: '#999' };
+      return h('span', {
+        style: {
+          padding: '2px 8px',
+          borderRadius: '4px',
+          backgroundColor: status.color + '20',
+          color: status.color,
+          border: `1px solid ${status.color}`
+        }
+      }, status.text);
+    }
+  },
+  { 
+    field: 'progress', 
+    title: '进度', 
+    width: 180,
+    type: 'jsx',
+    render: ({ row }) => {
+      return h('div', {
+        style: {
+          width: '100%',
+          background: '#f5f5f5',
+          borderRadius: '4px',
+          height: '16px'
+        }
+      }, [
+        h('div', {
+          style: {
+            width: `${row.progress}%`,
+            background: row.progress === 100 ? '#52c41a' : '#1677ff',
+            borderRadius: '4px',
+            height: '16px',
+            transition: 'width 0.3s'
+          }
+        }, ''),
+        h('span', {
+          style: {
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            fontSize: '12px',
+            color: row.progress > 50 ? '#fff' : '#333'
+          }
+        }, `${row.progress}%`)
+      ]);
+    }
+  },
+  { field: 'startDate', title: '开始日期', width: 120 },
+  { field: 'endDate', title: '结束日期', width: 120 }
+]);
+
+// 处理分页查询
+const handleQuery = (page, size) => {
+  // 模拟异步加载数据
+  setTimeout(() => {
+    const list = [];
+    const startIndex = (page - 1) * size;
+    for (let i = 0; i < size; i++) {
+      if (startIndex + i < total.value) {
+        list.push({
+          id: startIndex + i + 1,
+          name: `用户${startIndex + i + 1}`,
+          age: Math.floor(Math.random() * 40) + 20,
+          gender: Math.random() > 0.5 ? '男' : '女',
+          email: `user${startIndex + i + 1}@example.com`,
+          address: `北京市朝阳区某某街道第${Math.floor(Math.random() * 100) + 1}号`
+        });
+      }
+    }
+    paginationTableData.value = list;
+    // 完成加载
+    if (list.length === 0) {
+      // 如果没有数据，则回到第一页
+      currentPage.value = 1;
+    }
+  }, 300);
+};
+
+onMounted(() => {
+  // 初始加载分页表格数据
+  handleQuery(currentPage.value, pageSize.value);
+});
+</script>
+
+<style scoped>
+.demo-container {
+  padding: 20px;
+}
+
+.demo-section {
+  margin-bottom: 40px;
+}
+
+h1 {
+  font-size: 24px;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+h2 {
+  font-size: 18px;
+  margin-bottom: 15px;
+  color: #333;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #eee;
+}
+</style>