@ebiz/designer-components 0.0.21 → 0.0.23

package/package.json

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

package/src/components/EbizDepartmentSelector.vue

@@ -0,0 +1,137 @@
+<template>
+  <div>
+    <t-cascader v-model="selectedValue" :options="departmentTreeData" :placeholder="placeholder" :clearable="clearable"
+      :disabled="disabled" :size="size" :multiple="multiple" :max="max" :checkStrictly="checkStrictly"
+      :filterable="filterable" :loading="loading" @change="handleChange">
+      <template v-if="$slots.empty" #empty>
+        <slot name="empty"></slot>
+      </template>
+      <template v-if="$slots.dropdownItem" #dropdownItem="slotProps">
+        <slot name="dropdownItem" v-bind="slotProps"></slot>
+      </template>
+      <template v-if="$slots.collapsedItems" #collapsedItems="slotProps">
+        <slot name="collapsedItems" v-bind="slotProps"></slot>
+      </template>
+      <template v-if="$slots.suffix" #suffix>
+        <slot name="suffix"></slot>
+      </template>
+      <template v-if="$slots.prefixIcon" #prefixIcon>
+        <slot name="prefixIcon"></slot>
+      </template>
+    </t-cascader>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue';
+import { Cascader as TCascader } from 'tdesign-vue-next';
+import { dataService } from '../index.js';
+
+// 定义组件属性
+const props = defineProps({
+  modelValue: {
+    type: [String, Number, Array],
+    default: undefined
+  },
+  placeholder: {
+    type: String,
+    default: '请选择部门'
+  },
+  clearable: {
+    type: Boolean,
+    default: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: String,
+    default: undefined,
+    validator: (val) => ['small', 'medium', 'large'].includes(val)
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  max: {
+    type: Number,
+    default: 0
+  },
+  checkStrictly: {
+    type: Boolean,
+    default: true
+  },
+  filterable: {
+    type: Boolean,
+    default: true
+  }
+});
+
+// 定义组件事件
+const emit = defineEmits(['update:modelValue', 'change']);
+
+// 内部状态变量
+const departmentData = ref([]);
+const departmentTreeData = ref([]);
+const loading = ref(false);
+const selectedValue = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+});
+
+// 处理变更事件
+const handleChange = (value, context) => {
+  emit('change', value, context);
+};
+
+// 将部门列表数据转换为树形结构
+const buildDepartmentTree = (data, parentId = null) => {
+  return data
+    .filter(item => item.manager_dept === parentId)
+    .map(item => {
+      const children = buildDepartmentTree(data, item.id);
+      return {
+        ...item,
+        label: item.name,
+        value: item.id,
+        children: children.length > 0 ? children : undefined
+      };
+    });
+};
+
+// 加载部门数据
+const loadDepartmentData = async () => {
+  try {
+    loading.value = true;
+    dataService.fetch({},{
+        apiId: 1933, 
+        apiType: 'MULTIPLE_DATA_SEARCH'
+    }).then(res => {
+      departmentData.value = res.data || [];
+      departmentTreeData.value = buildDepartmentTree(departmentData.value,0);
+    }).catch(err => {
+      console.error('获取部门数据失败:', err);
+    }).finally(() => {
+      loading.value = false;
+    });
+  } catch (error) {
+    console.error('获取部门数据失败:', error);
+    departmentData.value = [];
+    departmentTreeData.value = [];
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 组件挂载时加载数据
+onMounted(() => {
+  loadDepartmentData();
+});
+</script>
+
+<style>
+.ebiz-department-selector {
+  width: 100%;
+}
+</style> 

package/src/components/EbizTdesignLoading.vue

@@ -0,0 +1,108 @@
+<template>
+    <t-loading :delay="delay" :duration="duration" :indicator="indicator" :inherit-color="inheritColor" :layout="layout"
+        :loading="loading" :loading-props="loadingProps" :pause="pause" :reverse="reverse" :show-overlay="showOverlay"
+        :size="size" :text="text" :theme="theme">
+        <!-- 默认插槽 -->
+        <slot></slot>
+
+        <!-- 文本内容插槽 -->
+        <template v-if="$slots.text" #text>
+            <slot name="text"></slot>
+        </template>
+
+        <!-- 加载指示器插槽 -->
+        <template v-if="$slots.indicator" #indicator>
+            <slot name="indicator"></slot>
+        </template>
+
+        <!-- 加载内容插槽 -->
+        <template v-if="$slots.content" #content>
+            <slot name="content"></slot>
+        </template>
+    </t-loading>
+</template>
+
+<script>
+export default {
+    name: "EbizTdesignLoading"
+}
+</script>
+
+<script setup>
+import { defineProps } from 'vue';
+import { Loading as TLoading } from 'tdesign-vue-next';
+
+const props = defineProps({
+    // 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒
+    delay: {
+        type: Number,
+        default: 0
+    },
+    // 加载动画执行完成一次的时间，单位：毫秒
+    duration: {
+        type: Number,
+        default: 800
+    },
+    // 加载指示符，值为 true 显示默认指示符，值为 false 则不显示，也可以自定义指示符
+    indicator: {
+        type: [Boolean, Function],
+        default: true
+    },
+    // 是否继承父元素颜色
+    inheritColor: {
+        type: Boolean,
+        default: false
+    },
+    // 对齐方式
+    layout: {
+        type: String,
+        default: 'horizontal',
+        validator: (val) => ['horizontal', 'vertical'].includes(val)
+    },
+    // 是否处于加载状态
+    loading: {
+        type: Boolean,
+        default: true
+    },
+    // 透传加载组件全部属性
+    loadingProps: {
+        type: Object,
+        default: () => ({})
+    },
+    // 是否暂停动画
+    pause: {
+        type: Boolean,
+        default: false
+    },
+    // 加载动画是否反向
+    reverse: {
+        type: Boolean,
+        default: false
+    },
+    // 是否需要遮罩层
+    showOverlay: {
+        type: Boolean,
+        default: true
+    },
+    // 尺寸，示例：small/medium/large/12px/56px
+    size: {
+        type: String,
+        default: 'medium'
+    },
+    // 加载提示文案
+    text: {
+        type: String,
+        default: ''
+    },
+    // 加载组件类型
+    theme: {
+        type: String,
+        default: 'circular',
+        validator: (val) => ['circular', 'spinner', 'dots', 'bar'].includes(val)
+    }
+});
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style>

package/src/components/EbizTreeMergeTable.vue

@@ -161,7 +161,7 @@
             <div class="org-selected-container">
               <div v-if="tempGlobalSelectedOrgs.length === 0" class="no-selected-tip">请从左侧选择组织</div>
               <div v-else class="selected-orgs-tags">
-                <t-tag v-for="org in tempGlobalSelectedOrgs" :key="org.id" closable @close="removeGlobalOrg(org.id)"
+                <t-tag v-for="org in tempGlobalSelectedOrgs" :key="org.id" closable @close="removeGlobalSelectedOrg(org.id)"
                   theme="primary" variant="light" class="org-tag">
                   {{ org.name }}
                 </t-tag>
@@ -310,7 +310,8 @@ import {
   Input as TInput,
   Tree as TTree,
   Tag as TTag,
-  Icon as TIcon
+  Icon as TIcon,
+  Message
 } from 'tdesign-vue-next'
 
 const apis = {
@@ -372,10 +373,12 @@ function getRoleConfig() {
         if (matchedFunction) {
           // 设置功能勾选状态为true
           matchedFunction.checked = true;
-
+          
           // 保存数据权限配置（如果有）
           if (item.dataScope) {
             row.dataPermission = item.dataScope;
+            // 标记为自定义配置
+            row.hasCustomConfig = true;
             // 如果是自定义数据权限，则设置已选组织
             if (item.dataScope === 6 && item.deptIds && item.deptIds.length > 0) {
               row.selectedOrgs = item.deptIds.map(id => {
@@ -387,7 +390,7 @@ function getRoleConfig() {
               });
             }
           }
-
+          
           // 更新父级勾选状态（模块、子模块）
           updateParentCheckStatus(row);
         }
@@ -761,16 +764,17 @@ const handleOrgNodeExpand = (value) => {
 // 打开数据权限配置弹窗
 const openPermissionDialog = (row) => {
   currentRow.value = row
-  // 只做展示，不写入行权限
-  if (row.dataPermission) {
-    selectedPermission.value = row.dataPermission
+  // 检查是否已有自定义配置
+  if (row.hasCustomConfig) {
+    // 已有自定义配置，使用自身配置
+    selectedPermission.value = row.dataPermission || 1
     if (row.dataPermission === 6 && row.selectedOrgs) {
       selectedOrgs.value = [...row.selectedOrgs]
     } else {
       selectedOrgs.value = []
     }
   } else {
-    // 没有配置则展示全局，但不写入行
+    // 没有自定义配置，继承全局配置
     selectedPermission.value = globalPermission.value
     if (globalPermission.value === 6) {
       selectedOrgs.value = [...globalSelectedOrgs.value]
@@ -818,15 +822,19 @@ const handleGlobalOrgNodeSelect = (node, checked) => {
     }
   } else {
     // 从已选中中移除
-    removeGlobalOrg(node.id)
+    removeGlobalSelectedOrg(node.id)
   }
 }
 
 // 移除选中的全局组织（对话框中使用）
 const removeGlobalSelectedOrg = (id) => {
-  const index = tempGlobalSelectedOrgs.value.findIndex((org) => org.id === id)
+  console.log('移除临时全局组织', id);
+  const index = tempGlobalSelectedOrgs.value.findIndex((org) => org.id === id);
   if (index !== -1) {
-    tempGlobalSelectedOrgs.value.splice(index, 1)
+    tempGlobalSelectedOrgs.value.splice(index, 1);
+    console.log('移除成功，剩余组织数量:', tempGlobalSelectedOrgs.value.length);
+  } else {
+    console.log('未找到对应组织');
   }
 }
 
@@ -864,7 +872,7 @@ const handleGlobalOrgConfirm = () => {
   // 保存选择结果
   globalSelectedOrgs.value = [...tempGlobalSelectedOrgs.value]
 
-  // 应用到所有选择了自定义数据的行
+  // 应用到未配置自定义数据权限的行
   applyGlobalOrgsToCustomRows()
 
   globalOrgDialogVisible.value = false
@@ -875,11 +883,21 @@ const handleGlobalOrgCancel = () => {
   globalOrgDialogVisible.value = false
 }
 
-// 将全局组织应用到所有自定义数据权限的行
+// 将全局组织应用到未配置自定义数据权限的行
 const applyGlobalOrgsToCustomRows = () => {
+  // 遍历每一行数据
   data.value.forEach((row) => {
-    if (row.dataPermission === 6) {
-      row.selectedOrgs = [...globalSelectedOrgs.value]
+    // 只对没有自定义配置的行应用全局设置
+    if (!row.hasCustomConfig) {
+      // 应用全局权限设置
+      row.dataPermission = globalPermission.value
+      
+      // 如果全局设置是自定义数据权限，则应用全局选择的组织
+      if (globalPermission.value === 6) {
+        row.selectedOrgs = [...globalSelectedOrgs.value]
+      } else {
+        row.selectedOrgs = []
+      }
     }
   })
 }
@@ -887,6 +905,8 @@ const applyGlobalOrgsToCustomRows = () => {
 // 确认权限配置（修改处理全局配置的情况）
 const handlePermissionConfirm = () => {
   if (currentRow.value) {
+    // 标记该行已有自定义配置
+    currentRow.value.hasCustomConfig = true;
     currentRow.value.dataPermission = selectedPermission.value
     if (selectedPermission.value === 6) {
       currentRow.value.selectedOrgs = [...selectedOrgs.value]
@@ -899,6 +919,7 @@ const handlePermissionConfirm = () => {
 
 // 取消权限配置（修改处理全局配置的情况）
 const handlePermissionCancel = () => {
+  // 只关闭弹窗，不做其他操作
   permissionDialogVisible.value = false
 }
 

package/src/index.js

@@ -57,7 +57,9 @@ 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 EbizTdesignLoading from './components/EbizTdesignLoading.vue';
 import EbizAutoForm from './components/EbizAutoForm.vue';
+import EbizDepartmentSelector from './components/EbizDepartmentSelector.vue';
 import { MessagePlugin as EbizMessage } from 'tdesign-vue-next';
 
 // import EbizDescriptions from './components/EbizDescriptions.vue';
@@ -77,6 +79,7 @@ import "./assets/styles/charts/main.less";
 // 时间轴组件
 import EbizTimeline from "./components/TdesignTimeline.vue";
 import {TimelineItem as EbizTimelineItem} from 'tdesign-vue-next';
+import { LoadingPlugin as EbizLoading } from 'tdesign-vue-next';
 
 // 导出组件
 export {
@@ -181,8 +184,12 @@ export {
   EbizTreeMergeTable,
   // 自动表单组件
   EbizAutoForm,
+  // 部门选择器组件
+  EbizDepartmentSelector,
   // 新增 EbizDescriptions 和 EbizDescriptionsItem
   EbizDescriptions,
   EbizDescriptionsItem,
-  TDescriptionsItem
+  TDescriptionsItem,
+  EbizTdesignLoading,
+  EbizLoading
 };

package/src/router/index.js

@@ -304,6 +304,12 @@ const routes = [
     name: 'TreeMergeTableDemo',
     component: () => import('../views/TreeMergeTableDemo.vue'),
     meta: { title: '树形合并表格组件示例' }
+  },
+  {
+    path: '/ebiz-department-selector',
+    name: 'EbizDepartmentSelector',
+    component: () => import('../views/EbizDepartmentSelectorDemo.vue'),
+    meta: { title: 'Ebiz部门选择器组件示例' }
   }
 ]
 

package/src/views/EbizDepartmentSelectorDemo.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="department-selector-demo">
+    <h1>部门选择器组件</h1>
+    
+    <section class="demo-section">
+      <h2>基础用法</h2>
+      <div>
+        <EbizDepartmentSelector v-model="selectedDepartment" placeholder="请选择部门" />
+        <div class="result-container">
+          <p>选中结果: {{ selectedDepartment }}</p>
+        </div>
+      </div>
+    </section>
+    
+    <section class="demo-section">
+      <h2>多选模式</h2>
+      <div class="demo-box">
+        <EbizDepartmentSelector 
+          v-model="selectedMultipleDepartments" 
+          placeholder="请选择多个部门" 
+          :multiple="true" 
+        />
+        <div class="result-container">
+          <p>选中结果: {{ selectedMultipleDepartments }}</p>
+        </div>
+      </div>
+    </section>
+    
+    <section class="demo-section">
+      <h2>可选择任意层级</h2>
+      <div class="demo-box">
+        <EbizDepartmentSelector 
+          v-model="selectedWithStrictly" 
+          placeholder="任意层级皆可选择" 
+          :checkStrictly="true"
+          :multiple="true"
+        />
+        <div class="result-container">
+          <p>选中结果: {{ selectedWithStrictly }}</p>
+        </div>
+      </div>
+    </section>
+    
+    <section class="demo-section">
+      <h2>不同尺寸</h2>
+      <div class="demo-box">
+        <div class="size-row">
+          <EbizDepartmentSelector 
+            v-model="selectedSizeSmall" 
+            placeholder="小型尺寸" 
+            size="small"
+          />
+          <EbizDepartmentSelector 
+            v-model="selectedSizeMedium" 
+            placeholder="中型尺寸" 
+            size="medium"
+          />
+          <EbizDepartmentSelector 
+            v-model="selectedSizeLarge" 
+            placeholder="大型尺寸" 
+            size="large"
+          />
+        </div>
+      </div>
+    </section>
+    
+    <section class="demo-section">
+      <h2>自定义API地址</h2>
+      <div class="demo-box">
+        <EbizDepartmentSelector 
+          v-model="selectedCustomApi" 
+          placeholder="自定义API地址" 
+          apiUrl="/api/custom-departments"
+        />
+      </div>
+    </section>
+    
+    <section class="demo-section">
+      <h2>禁用状态</h2>
+      <div class="demo-box">
+        <EbizDepartmentSelector 
+          v-model="selectedDisabled" 
+          placeholder="禁用状态" 
+          :disabled="true"
+        />
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizDepartmentSelector } from '../index.js';
+
+// 单选模式
+const selectedDepartment = ref(90);
+
+// 多选模式
+const selectedMultipleDepartments = ref([]);
+
+// 可选择任意层级
+const selectedWithStrictly = ref([]);
+
+// 不同尺寸
+const selectedSizeSmall = ref();
+const selectedSizeMedium = ref();
+const selectedSizeLarge = ref();
+
+// 自定义API地址
+const selectedCustomApi = ref();
+
+// 禁用状态
+const selectedDisabled = ref();
+
+// 模拟的Mock数据，用于在实际环境无法请求API时展示
+// 在实际开发环境下，可以查看浏览器控制台的网络请求
+// 这里模拟的数据可在开发环境下直接测试组件功能
+console.log('提示：实际环境中组件会请求API获取数据，这里为了演示效果，提供一些模拟数据');
+console.log('模拟数据结构：[{ id: 1, name: "总部", manager_dept: null }, { id: 2, name: "研发部", manager_dept: 1 }, ...]');
+
+</script>
+
+<style scoped>
+.department-selector-demo {
+  padding: 20px;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+h1 {
+  margin-bottom: 30px;
+  font-size: 24px;
+  font-weight: 500;
+  color: #0052d9;
+}
+
+.demo-section {
+  margin-bottom: 40px;
+}
+
+h2 {
+  margin-bottom: 16px;
+  font-size: 18px;
+  font-weight: 500;
+  color: #333;
+}
+
+.demo-box {
+  padding: 24px;
+  border: 1px solid #e7e7e7;
+  border-radius: 6px;
+  background-color: #fff;
+}
+
+.result-container {
+  margin-top: 16px;
+  padding: 12px;
+  background-color: #f9f9f9;
+  border-radius: 4px;
+}
+
+.size-row {
+  display: flex;
+  gap: 16px;
+}
+
+.size-row > * {
+  flex: 1;
+}
+</style> 

package/src/views/Home.vue

@@ -78,7 +78,8 @@ export default {
       { path: '/tdesign-descriptions', title: 'Ebiz描述列表组件示例' },
       { path: '/popconfirm', title: 'Ebiz气泡确认框组件示例' },
       { path: '/tree-merge-table-demo', title: '树形合并表格组件示例' },
-      { path: '/auto-form-demo', title: 'Ebiz自动表单组件示例' }
+      { path: '/auto-form-demo', title: 'Ebiz自动表单组件示例' },
+      { path: '/ebiz-department-selector', title: 'Ebiz部门选择器组件示例' }
     ]
 
     return {