@ebiz/designer-components 0.0.50 → 0.0.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.0.50",
+  "version": "0.0.52",
   "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/EbizApproval.vue

@@ -122,6 +122,13 @@ const fetchHistory = () => {
     }, {}, '/tasks/process/detail').then(res=>{
         selectedApprover.value = res?.variables?.form?.approverList ?? [];
         selectedCC.value = res?.variables?.form?.ccList ?? [];
+        if(!selectedApprover.value.length){
+          dataService.fetch({
+            apiKey: "test_app_11111"
+          }, {},"/appdata/process?key=test_app_11111").then(res=>{
+            selectedApprover.value = res?.data?.at(0)?.approve_list || [];
+          })
+        }
     })
 }
 
@@ -184,6 +191,11 @@ const fetchEmployeeList = async () => {
       '/process/userList'
     )
     employeeList.value = response || [];
+    dataService.fetch({
+      apiKey: "test_app_11111"
+    }, {},"/appdata/execute/plugin?key=test_app_11111").then(res=>{
+      console.log(res,190)
+    })
       if(props.id) {
         fetchHistory();
       }
@@ -236,13 +248,11 @@ const handleAddCC = () => {
   showCCSelector.value = true
 }
 
-// 初始化时获取员工列表
-fetchEmployeeList()
 
 // 监听查询条件变化
 watch([() => props.type, () => props.value, () => props.showRootOrg, () => props.childDeptEnable], () => {
   fetchEmployeeList()
-})
+}, { immediate: true })
 </script>
 
 <style lang="less" scoped>

package/src/components/EbizDiv.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+  key: {
+    type: String,
+    required: true,
+    default: ''
+  }
+});
+
+const isShow = ref(true);
+
+const checkPermission = () => {
+  try {
+    const permissionKeysStr = localStorage.getItem('permissionKeys') || '[]';
+    const permissionKeys = JSON.parse(permissionKeysStr);
+    const hasPermission = permissionKeys.includes(props.key);
+    isShow.value = hasPermission;
+  } catch (error) {
+    console.error('解析权限数据失败:', error);
+    isShow.value = false;
+  }
+};
+
+watch(() => props.key, checkPermission, { immediate: true });
+</script>
+
+<template>
+  <div v-if="isShow">
+    <slot></slot>
+  </div>
+</template> 

package/src/components/EbizEmployeeSelector.vue

@@ -18,7 +18,7 @@
 
     <!-- 选择弹窗 -->
     <t-dialog v-model:visible="dialogVisible" header="选择人员" :width="800" footer :close-btn="true"
-      :close-on-esc-keydown="true" :close-on-overlay-click="true">
+      :close-on-esc-keydown="true" :close-on-overlay-click="true" destroyOnClose>
 
       <!-- 选项卡 -->
       <t-tabs v-model="activeTab" class="selector-tabs">
@@ -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/index.js

@@ -63,6 +63,7 @@ import EbizDepartmentSelector from './components/EbizDepartmentSelector.vue';
 import EbizTdesignButtonDialog from './components/EbizTdesignButtonDialog.vue';
 import { MessagePlugin as EbizMessage } from 'tdesign-vue-next';
 import EbizApproval from './components/EbizApproval.vue';
+import EbizDiv from './components/EbizDiv.vue';
 
 // import EbizDescriptions from './components/EbizDescriptions.vue';
 // import EbizDescriptionsItem from './components/EbizDescriptionsItem.vue'
@@ -90,6 +91,7 @@ import EbizSForm from './components/senior/EbizSForm/index.vue';
 import EbizSFormItem from './components/senior/EbizSForm/item.vue';
 import EbizSDialog from "./components/senior/EbizSDialog/index.vue";
 
+
 // 导出组件
 export {
   MyComponent,
@@ -211,5 +213,6 @@ export {
   EbizSFormItem,
   EbizSDialog,
   // 新增 EbizApproval 组件
-  EbizApproval
+  EbizApproval,
+  EbizDiv
 };

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,18 @@ 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组件示例"}
+  },
+  {
+    path: '/permission-box',
+    name: 'PermissionBox',
+    component: () => import('../views/PermissionBoxDemo.vue'),
+    meta: { title: 'Ebiz权限盒子组件示例' }
   }
 ]
 

package/src/views/Home.vue

@@ -22,6 +22,11 @@
         <div class="component-title">树形合并表格</div>
         <div class="component-desc">支持树形展示和单元格合并的表格组件</div>
       </router-link>
+      
+      <router-link to="/permission-box" class="component-item">
+        <div class="component-title">权限盒子组件示例</div>
+        <div class="component-desc">用于展示权限控制的组件示例</div>
+      </router-link>
     </div>
   </div>
 </template>
@@ -86,7 +91,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/PermissionBoxDemo.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="permission-box-demo">
+    <h2>权限盒子组件演示</h2>
+    
+    <div class="demo-section">
+      <h3>基础用法</h3>
+      <div class="demo-block">
+        <EbizDiv key="admin">
+          <div class="demo-content">
+            这是只有管理员可见的内容
+          </div>
+        </EbizDiv>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>权限控制演示</h3>
+      <div class="demo-block">
+        <t-space direction="vertical">
+          <t-button @click="setPermission(['admin'])">设置管理员权限</t-button>
+          <t-button @click="setPermission(['user'])">设置普通用户权限</t-button>
+          <t-button @click="setPermission([])">清除所有权限</t-button>
+        </t-space>
+
+        <div class="permission-examples">
+          <EbizDiv key="admin">
+            <t-alert theme="success" message="管理员可见内容" />
+          </EbizDiv>
+
+          <EbizDiv key="user">
+            <t-alert theme="info" message="普通用户可见内容" />
+          </EbizDiv>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { EbizDiv } from '../index.js';
+import { Button as TButton, Space as TSpace, Alert as TAlert } from 'tdesign-vue-next';
+
+const setPermission = (permissions) => {
+  localStorage.setItem('permissionKeys', JSON.stringify(permissions));
+  // 刷新页面以重新加载权限
+  window.location.reload();
+};
+</script>
+
+<style scoped>
+.permission-box-demo {
+  padding: 20px;
+}
+
+.demo-section {
+  margin-bottom: 30px;
+}
+
+h2 {
+  margin-bottom: 20px;
+}
+
+h3 {
+  margin-bottom: 15px;
+}
+
+.demo-block {
+  padding: 20px;
+  border: 1px solid #eee;
+  border-radius: 4px;
+}
+
+.demo-content {
+  padding: 16px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+}
+
+.permission-examples {
+  margin-top: 20px;
+}
+
+.permission-examples > * {
+  margin-bottom: 10px;
+}
+</style>