@ebiz/designer-components 0.0.51 → 0.0.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.0.51",
+  "version": "0.0.52",
   "private": false,
   "publishConfig": {
     "access": "public"

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">

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

@@ -358,6 +358,12 @@ const routes = [
     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>

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>