@ebiz/designer-components 0.0.19-beta.16 → 0.0.19-beta.20

package/src/components/EbizTreeMergeTable.vue

@@ -1,1414 +1,1393 @@
-<template>
-  <div>
-    <!-- 选中数据结构展示 -->
-    <!-- <div style="margin-bottom: 16px">
-      <t-card title="选中数据结构(JSON)">
-        <pre style="background: #f6f8fa; padding: 12px 16px; border-radius: 6px; overflow: auto; max-height: 300px"
-          >{{ JSON.stringify(computedSelectedData, null, 2) }}
-        </pre>
-      </t-card>
-    </div> -->
-    <!-- 树表上方的数据权限配置模块 -->
-    <div class="permission-config-panel">
-      <div class="panel-header">
-        <h3 class="panel-title">数据权限配置</h3>
-      </div>
-      <div class="panel-content">
-        <div class="permission-type-selector">
-          <t-radio-group v-model="globalPermission" class="permission-radio-group">
-            <t-radio-button :value="1">全部数据</t-radio-button>
-            <t-radio-button :value="2">事业部数据</t-radio-button>
-            <t-radio-button :value="3">本部门数据</t-radio-button>
-            <t-radio-button :value="4">子部门数据</t-radio-button>
-            <t-radio-button :value="5">个人数据</t-radio-button>
-            <t-radio-button :value="6">自定义数据</t-radio-button>
-          </t-radio-group>
-        </div>
-
-        <div v-if="globalPermission === 6" class="org-select-row">
-          <div class="selected-count">
-            {{ globalSelectedOrgs.length > 0 ? '已选择' + globalSelectedOrgs.length + '个组织' : '未选择组织' }}
-          </div>
-          <t-button theme="primary" @click="openGlobalOrgSelector" class="org-select-btn">
-            {{ globalSelectedOrgs.length > 0 ? '编辑' : '选择' }}
-            <template #suffix>
-              <t-icon name="chevron-right" />
-            </template>
-          </t-button>
-        </div>
-
-        <div v-if="globalPermission === 6" class="selected-orgs-panel">
-          <div class="selected-orgs-header">
-            已选组织：
-            <t-button theme="primary" variant="text" size="small" @click="clearGlobalOrgs">清空</t-button>
-          </div>
-          <div class="selected-orgs-content">
-            <div v-if="globalSelectedOrgs.length === 0" class="no-org-selected">请从左侧选择组织</div>
-            <div v-else class="selected-orgs-tags">
-              <t-tag v-for="org in globalSelectedOrgs" :key="org.id" theme="primary" variant="light" class="org-tag"
-                closable @close="removeGlobalOrg(org.id)">
-                {{ org.name }}
-              </t-tag>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <t-table :bordered="true" :data="data" :columns="columns" row-key="id" :rowspan-and-colspan="rowspanAndColspan"
-      resizable table-layout="fixed" lazy-load @cell-click="handleCellClick">
-      <!-- 模块列的自定义单元格 -->
-      <template #module="{ row }">
-        <div class="cell-with-checkbox">
-          <t-checkbox v-model="row.moduleChecked" @change="(checked) => handleModuleCheck(row, checked)"></t-checkbox>
-          <span class="cell-text">{{ row.module }}</span>
-        </div>
-      </template>
-
-      <!-- 子模块1列的自定义单元格 -->
-      <template #subModule1="{ row }">
-        <div class="cell-with-checkbox">
-          <t-checkbox v-model="row.subModule1Checked"
-            @change="(checked) => handleSubModule1Check(row, checked)"></t-checkbox>
-          <span class="cell-text">{{ row.subModule1 || row.module }}</span>
-        </div>
-      </template>
-
-      <!-- 子模块2列的自定义单元格 -->
-      <template #subModule2="{ row }">
-        <div class="cell-with-checkbox" v-if="row.subModule2">
-          <t-checkbox v-model="row.subModule2Checked"
-            @change="(checked) => handleSubModule2Check(row, checked)"></t-checkbox>
-          <span class="cell-text">{{ row.subModule2 }}</span>
-        </div>
-        <div v-else class="cell-with-checkbox">
-          <span class="cell-text empty-cell">-</span>
-        </div>
-      </template>
-
-      <!-- 功能列的自定义单元格 -->
-      <template #functions="{ row }">
-        <div class="functions-container">
-          <div v-for="(func, idx) in row.functions" :key="func.id || idx" class="function-item">
-            <t-checkbox v-model="func.checked"
-              @change="(checked) => handleFunctionCheck(row, func, checked)"></t-checkbox>
-            <span class="cell-text">{{ func.name }}</span>
-          </div>
-        </div>
-      </template>
-
-      <!-- 操作列的自定义单元格 -->
-      <template #operation="{ row }">
-        <div class="operation-buttons">
-          <t-button theme="primary" size="medium" @click="openPermissionDialog(row)"
-            :disabled="!row.functions.some((f) => f.checked)">数据权限配置</t-button>
-        </div>
-      </template>
-
-      <slot></slot>
-    </t-table>
-
-    <!-- 新增保存按钮 -->
-    <div style="margin-top: 24px; display: flex; justify-content: flex-end">
-      <t-button theme="primary" @click="handleSaveRolePermission">保存角色权限</t-button>
-    </div>
-
-    <!-- 全局组织选择弹窗 -->
-    <t-dialog v-model:visible="globalOrgDialogVisible" header="选择组织" width="800px" attach="body"
-      :confirm-btn="{ content: '确定', theme: 'primary' }" :cancel-btn="{ content: '取消', theme: 'default' }"
-      @confirm="handleGlobalOrgConfirm" @cancel="handleGlobalOrgCancel">
-      <div class="org-selector-dialog">
-        <div class="org-dialog-container">
-          <div class="org-left-panel">
-            <div class="org-panel-header">组织架构</div>
-            <div class="org-search-container">
-              <t-input v-model="keyWord" placeholder="请输入关键词搜索" clearable style="width: 100%">
-                <template #suffix>
-                  <t-button theme="default" shape="square" @click="onOrgSearch" size="small">
-                    <t-icon name="search" />
-                  </t-button>
-                </template>
-              </t-input>
-              <div v-if="keyWord" class="search-result-info">
-                找到 {{ getMatchedCount(filteredOrgTreeData) }} 个结果
-              </div>
-            </div>
-            <div class="org-tree-container">
-              <t-tree :data="filteredOrgTreeData" :keys="orgTreeKeys" activable hover expandAll line
-                expand-on-click-node :expanded="expandedKeys" :active="activeKey" @active="handleOrgNodeActive"
-                @expand="handleOrgNodeExpand">
-                <template #operations="{ node }">
-                  <t-checkbox :checked="isGlobalOrgNodeSelected(node.data.id)"
-                    @change="(checked) => handleGlobalOrgNodeSelect(node.data, checked)"></t-checkbox>
-                </template>
-                <template #label="{ node }">
-                  <div class="tree-node-label" :class="{ selected: isGlobalOrgNodeSelected(node.data.id) }"
-                    @click.stop="toggleGlobalOrgNodeSelect(node.data)">
-                    {{ node.data.name }}
-                  </div>
-                </template>
-              </t-tree>
-              <div v-if="keyWord && filteredOrgTreeData.length === 0" class="no-search-results">
-                未找到符合"{{ keyWord }}"的组织
-              </div>
-            </div>
-          </div>
-          <div class="org-right-panel">
-            <div class="org-panel-header">
-              <span>已选择组织</span>
-              <t-button theme="primary" variant="text" @click="clearGlobalSelectedOrgs">清空</t-button>
-            </div>
-            <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="removeGlobalSelectedOrg(org.id)"
-                  theme="primary" variant="light" class="org-tag">
-                  {{ org.name }}
-                </t-tag>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </t-dialog>
-
-    <!-- 数据权限配置弹窗（针对表格行） -->
-    <t-dialog v-model:visible="permissionDialogVisible" :header="permissionDialogTitle" width="800px" attach="body"
-      :confirm-btn="{ content: '确定', theme: 'primary' }" :cancel-btn="{ content: '取消', theme: 'default' }"
-      @confirm="handlePermissionConfirm" @cancel="handlePermissionCancel">
-      <div class="permission-content">
-        <template v-if="currentRow">
-          <div class="permission-item">
-            <div class="permission-options">
-              <t-radio-group v-model="selectedPermission">
-                <t-radio-button :value="1">全部数据</t-radio-button>
-                <t-radio-button :value="2">事业部数据</t-radio-button>
-                <t-radio-button :value="3">本部门数据</t-radio-button>
-                <t-radio-button :value="4">子部门数据</t-radio-button>
-                <t-radio-button :value="5">个人数据</t-radio-button>
-                <t-radio-button :value="6">自定义数据</t-radio-button>
-              </t-radio-group>
-            </div>
-
-            <div v-if="selectedPermission === 6" class="custom-permission">
-              <div class="org-dialog-container">
-                <div class="org-left-panel">
-                  <div class="org-panel-header">组织架构</div>
-                  <div class="org-search-container">
-                    <t-input v-model="keyWord" placeholder="请输入关键词搜索" clearable style="width: 100%">
-                      <template #suffix>
-                        <t-button theme="default" shape="square" @click="onOrgSearch" size="small">
-                          <t-icon name="search" />
-                        </t-button>
-                      </template>
-                    </t-input>
-                    <div v-if="keyWord" class="search-result-info">
-                      找到 {{ getMatchedCount(filteredOrgTreeData) }} 个结果
-                    </div>
-                  </div>
-                  <div class="org-tree-container">
-                    <t-tree :data="filteredOrgTreeData" :keys="orgTreeKeys" activable hover expandAll line
-                      expand-on-click-node :expanded="expandedKeys" :active="activeKey" @active="handleOrgNodeActive"
-                      @expand="handleOrgNodeExpand">
-                      <template #operations="{ node }">
-                        <t-checkbox :checked="isOrgNodeSelected(node.data.id)"
-                          @change="(checked) => handleOrgNodeSelect(node.data, checked)"></t-checkbox>
-                      </template>
-                      <template #label="{ node }">
-                        <div class="tree-node-label" :class="{ selected: isOrgNodeSelected(node.data.id) }"
-                          @click.stop="toggleOrgNodeSelect(node.data)">
-                          {{ node.data.name }}
-                        </div>
-                      </template>
-                    </t-tree>
-                    <div v-if="keyWord && filteredOrgTreeData.length === 0" class="no-search-results">
-                      未找到符合"{{ keyWord }}"的组织
-                    </div>
-                  </div>
-                </div>
-                <div class="org-right-panel">
-                  <div class="org-panel-header">
-                    <span>已选择组织</span>
-                    <t-button theme="primary" variant="text" @click="clearSelectedOrgs">清空</t-button>
-                  </div>
-                  <div class="org-selected-container">
-                    <div v-if="selectedOrgs.length === 0" class="no-selected-tip">请从左侧选择组织</div>
-                    <div v-else class="selected-orgs-tags">
-                      <t-tag v-for="org in selectedOrgs" :key="org.id" closable @close="removeSelectedOrg(org.id)"
-                        theme="primary" variant="light" class="org-tag">
-                        {{ org.name }}
-                      </t-tag>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </template>
-      </div>
-    </t-dialog>
-
-    <!-- 保留原有的详情弹窗 -->
-    <t-dialog v-model:visible="detailDialogVisible" :header="detailDialogTitle" width="600px" :footer="false">
-      <div class="detail-content">
-        <template v-if="currentRow">
-          <div class="detail-item">
-            <span class="item-label">模块：</span>
-            <span class="item-value">{{ currentRow.module }}</span>
-          </div>
-
-          <div class="detail-item" v-if="currentRow.subModule1">
-            <span class="item-label">子模块1：</span>
-            <span class="item-value">{{ currentRow.subModule1 }}</span>
-          </div>
-
-          <div class="detail-item" v-if="currentRow.subModule2">
-            <span class="item-label">子模块2：</span>
-            <span class="item-value">{{ currentRow.subModule2 }}</span>
-          </div>
-
-          <div class="detail-item">
-            <span class="item-label">功能：</span>
-            <span class="item-value">{{ currentRow.function }}</span>
-          </div>
-
-          <div class="detail-item" v-if="currentRow.path">
-            <span class="item-label">路径：</span>
-            <span class="item-value">{{ currentRow.path }}</span>
-          </div>
-
-          <div class="detail-item" v-if="currentRow.childFunctions && currentRow.childFunctions.length > 0">
-            <span class="item-label">子功能：</span>
-            <div class="sub-functions">
-              <div v-for="(func, index) in currentRow.childFunctions" :key="index" class="sub-function-item">
-                <span>{{ func.name }}</span>
-              </div>
-            </div>
-          </div>
-        </template>
-      </div>
-    </t-dialog>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'EbizTreeMergeTable'
-}
-</script>
-
-<script setup>
-import dataService from '../apiService/simpleDataService'
-import { ref, computed, onMounted, watch } from 'vue'
-import {
-  Table as TTable,
-  Checkbox as TCheckbox,
-  Button as TButton,
-  Dialog as TDialog,
-  RadioGroup as TRadioGroup,
-  RadioButton as TRadioButton,
-  Input as TInput,
-  Tree as TTree,
-  Tag as TTag,
-  Icon as TIcon,
-  Message
-} from 'tdesign-vue-next'
-
-const apis = {
-  // tree: '/menu/tree',
-  tree: '/function/tree',
-  orgTree: '/appdata/execute/plugin?key=organizational_structure',
-  getConfig: '/role/functions/search/{roleId}',
-  getRole: '/role/position/{positionId}',
-  gerRoleInfo: '/role/detail/{id}',
-  saveRole: '/role/save'
-}
-
-const props = defineProps({
-  type: {
-    type: String,
-    default: 'role' // role,post 角色，岗位
-  },
-  id: {
-    type: String,
-    default: ''
-  }
-})
-const emits = defineEmits(['success'])
-const roleId = ref()
-
-const data = ref([])
-// 表格列配置，添加自定义单元格插槽
-const columns = [
-  { colKey: 'module', title: '模块', width: 150, cell: 'module' },
-  { colKey: 'subModule1', title: '子模块1', width: 150, cell: 'subModule1' },
-  { colKey: 'subModule2', title: '子模块2', width: 150, cell: 'subModule2' },
-  { colKey: 'functions', title: '功能', width: 300, cell: 'functions' },
-  { colKey: 'operation', title: '操作', width: 100, cell: 'operation', fixed: 'right' }
-]
-
-
-// 获取数据并处理
-dataService.fetch({}, {}, apis.tree).then((res) => {
-  const processedData = processTreeData(res || [])
-  // 为每行数据添加选中状态属性
-  processedData.forEach((row) => {
-    // 添加选中状态属性
-    row.moduleChecked = false
-    row.subModule1Checked = false
-    row.subModule2Checked = false
-    row.functionChecked = false
-  })
-  data.value = processedData;
-})
-function getRoleConfig() {
-  dataService.fetch({}, {}, apis.getConfig.replace('{roleId}', roleId.value || props.id)).then((res) => {
-    res.forEach(item => {
-      // 获取functionId
-      const functionId = item.functionId;
-      // 在data.value中查找对应功能所在的行
-      data.value.forEach(row => {
-        // 检查functions数组中是否有匹配的功能
-        const matchedFunction = row.functions.find(func => func.id === functionId);
-        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 => {
-                const org = findOrgInTree(orgTreeData.value, id);
-                return {
-                  id: id,
-                  name: org ? org.name : `组织${id}`
-                };
-              });
-            }
-          }
-          
-          // 更新父级勾选状态（模块、子模块）
-          updateParentCheckStatus(row);
-        }
-      });
-    });
-  })
-}
-/**
- * 处理树形数据，生成四级结构（模块、子模块1、子模块2、功能列表）
- * @param {Array} treeData 原始树形数据
- * @returns {Array} 扁平化处理后的数据
- */
-const processTreeData = (treeData) => {
-  const result = []
-  // 处理第一级：模块
-  treeData.forEach((moduleItem) => {
-    if (!moduleItem.children || moduleItem.children.length === 0) {
-      // 没有子模块，功能为全部
-      result.push({
-        id: `${moduleItem.id}_all`,
-        module: moduleItem.name,
-        moduleId: moduleItem.id,
-        subModule1: null,
-        subModule1Id: null,
-        subModule2: null,
-        subModule2Id: null,
-        functions: [{ id: null, name: '全部', checked: false }]
-      })
-      return
-    }
-    moduleItem.children.forEach((subModule1Item) => {
-      if (!subModule1Item.children || subModule1Item.children.length === 0) {
-        // 没有子模块2，功能为全部
-        result.push({
-          id: `${moduleItem.id}_${subModule1Item.id}_all`,
-          module: moduleItem.name,
-          moduleId: moduleItem.id,
-          subModule1: subModule1Item.name,
-          subModule1Id: subModule1Item.id,
-          subModule2: null,
-          subModule2Id: null,
-          functions: [{ id: null, name: '全部', checked: false }]
-        })
-      } else {
-        subModule1Item.children.forEach((subModule2Item) => {
-          // 功能聚合
-          let functions = []
-          if (subModule2Item.children && subModule2Item.children.length > 0) {
-            subModule2Item.children.forEach((functionItem) => {
-              // 主功能
-              const func = {
-                id: functionItem.id,
-                name: functionItem.name,
-                checked: false
-              }
-              functions.push(func)
-              // 子功能
-              if (functionItem.children && functionItem.children.length > 0) {
-                functionItem.children.forEach((childFunc) => {
-                  functions.push({
-                    id: childFunc.id,
-                    name: childFunc.name,
-                    checked: false
-                  })
-                })
-              }
-            })
-          } else {
-            functions.push({ id: null, name: '全部', checked: false })
-          }
-          result.push({
-            id: `${moduleItem.id}_${subModule1Item.id}_${subModule2Item.id}`,
-            module: moduleItem.name,
-            moduleId: moduleItem.id,
-            subModule1: subModule1Item.name,
-            subModule1Id: subModule1Item.id,
-            subModule2: subModule2Item.name,
-            subModule2Id: subModule2Item.id,
-            functions
-          })
-        })
-      }
-    })
-  })
-  return result
-}
-
-/**
- * 单元格合并计算函数
- */
-const rowspanAndColspan = ({ row, col, rowIndex, colIndex }) => {
-  // 功能列合并逻辑
-  if (col.colKey === 'functions') {
-    const isFirstRow =
-      rowIndex === 0 ||
-      data.value[rowIndex - 1].moduleId !== row.moduleId ||
-      data.value[rowIndex - 1].subModule1Id !== row.subModule1Id ||
-      data.value[rowIndex - 1].subModule2Id !== row.subModule2Id
-    if (isFirstRow) {
-      let rowspan = 1
-      for (let i = rowIndex + 1; i < data.value.length; i++) {
-        if (
-          data.value[i].moduleId === row.moduleId &&
-          data.value[i].subModule1Id === row.subModule1Id &&
-          data.value[i].subModule2Id === row.subModule2Id
-        ) {
-          rowspan++
-        } else {
-          break
-        }
-      }
-      return { rowspan, colspan: 1 }
-    }
-    return { rowspan: 0, colspan: 0 }
-  }
-  // 模块列合并逻辑
-  if (col.colKey === 'module') {
-    const currentModuleId = row.moduleId
-    const isFirstRow = rowIndex === 0 || data.value[rowIndex - 1].moduleId !== currentModuleId
-    if (isFirstRow) {
-      let rowspan = 1
-      for (let i = rowIndex + 1; i < data.value.length; i++) {
-        if (data.value[i].moduleId === currentModuleId) {
-          rowspan++
-        } else {
-          break
-        }
-      }
-      return { rowspan, colspan: 1 }
-    }
-    return { rowspan: 0, colspan: 0 }
-  }
-  // 子模块1列合并逻辑
-  if (col.colKey === 'subModule1') {
-    if (!row.subModule1) return {}
-    const currentModule = row.moduleId
-    const currentSubModule1 = row.subModule1Id
-    const isFirstRow =
-      rowIndex === 0 ||
-      data.value[rowIndex - 1].subModule1Id !== currentSubModule1 ||
-      data.value[rowIndex - 1].moduleId !== currentModule
-    if (isFirstRow) {
-      let rowspan = 1
-      for (let i = rowIndex + 1; i < data.value.length; i++) {
-        if (data.value[i].moduleId === currentModule && data.value[i].subModule1Id === currentSubModule1) {
-          rowspan++
-        } else {
-          break
-        }
-      }
-      return { rowspan, colspan: 1 }
-    }
-    return { rowspan: 0, colspan: 0 }
-  }
-  // 子模块2列合并逻辑
-  if (col.colKey === 'subModule2') {
-    if (!row.subModule2) return {}
-    const currentModule = row.moduleId
-    const currentSubModule1 = row.subModule1Id
-    const currentSubModule2 = row.subModule2Id
-    const isFirstRow =
-      rowIndex === 0 ||
-      data.value[rowIndex - 1].subModule2Id !== currentSubModule2 ||
-      data.value[rowIndex - 1].subModule1Id !== currentSubModule1 ||
-      data.value[rowIndex - 1].moduleId !== currentModule
-    if (isFirstRow) {
-      let rowspan = 1
-      for (let i = rowIndex + 1; i < data.value.length; i++) {
-        if (
-          data.value[i].moduleId === currentModule &&
-          data.value[i].subModule1Id === currentSubModule1 &&
-          data.value[i].subModule2Id === currentSubModule2
-        ) {
-          rowspan++
-        } else {
-          break
-        }
-      }
-      return { rowspan, colspan: 1 }
-    }
-    return { rowspan: 0, colspan: 0 }
-  }
-  return {} // 其他列不合并
-}
-
-// 勾选模块时联动所有下级
-const handleModuleCheck = (row, checked) => {
-  row.moduleChecked = checked
-  data.value.forEach((item) => {
-    if (item.moduleId === row.moduleId) {
-      item.subModule1Checked = checked
-      item.subModule2Checked = checked
-      item.functions.forEach((func) => (func.checked = checked))
-    }
-  })
-}
-
-// 勾选子模块1时联动所有下级
-const handleSubModule1Check = (row, checked) => {
-  row.subModule1Checked = checked
-  data.value.forEach((item) => {
-    if (item.moduleId === row.moduleId && item.subModule1Id === row.subModule1Id) {
-      item.subModule2Checked = checked
-      item.functions.forEach((func) => (func.checked = checked))
-    }
-  })
-  // 向上联动模块
-  updateModuleChecked(row.moduleId)
-}
-
-// 勾选子模块2时联动所有下级
-const handleSubModule2Check = (row, checked) => {
-  row.subModule2Checked = checked
-  data.value.forEach((item) => {
-    if (
-      item.moduleId === row.moduleId &&
-      item.subModule1Id === row.subModule1Id &&
-      item.subModule2Id === row.subModule2Id
-    ) {
-      item.functions.forEach((func) => (func.checked = checked))
-    }
-  })
-  // 向上联动子模块1
-  updateSubModule1Checked(row.moduleId, row.subModule1Id)
-}
-
-// 勾选功能时，自动判断父级
-const handleFunctionCheck = (row, func, checked) => {
-  func.checked = checked
-  // 判断本组所有功能是否全选
-  const allChecked = row.functions.every((f) => f.checked)
-  row.subModule2Checked = allChecked
-  // 向上联动
-  updateSubModule1Checked(row.moduleId, row.subModule1Id)
-}
-
-// 更新子模块1的勾选状态
-const updateSubModule1Checked = (moduleId, subModule1Id) => {
-  // 找到所有同模块+同子模块1的行
-  const group = data.value.filter((item) => item.moduleId === moduleId && item.subModule1Id === subModule1Id)
-  const allChecked = group.every((item) => item.subModule2Checked)
-  group.forEach((item) => {
-    item.subModule1Checked = allChecked
-  })
-  // 向上联动模块
-  updateModuleChecked(moduleId)
-}
-
-// 更新模块的勾选状态
-const updateModuleChecked = (moduleId) => {
-  const group = data.value.filter((item) => item.moduleId === moduleId)
-  const allChecked = group.every((item) => item.subModule1Checked)
-  group.forEach((item) => {
-    item.moduleChecked = allChecked
-  })
-}
-
-// 单元格点击事件
-const handleCellClick = (context) => {
-  console.log('单元格点击：', context)
-}
-
-// 详情弹窗相关
-const detailDialogVisible = ref(false)
-const detailDialogTitle = ref('详情')
-const currentRow = ref(null)
-
-
-// 数据权限弹窗相关
-const permissionDialogVisible = ref(false)
-const permissionDialogTitle = ref('数据权限配置')
-const selectedPermission = ref(1) // 默认选择全部数据
-
-// 组织架构树相关
-const orgTreeData = ref([])
-const keyWord = ref('')
-const filteredOrgTreeData = computed(() => {
-  if (!keyWord.value) return orgTreeData.value
-  return filterTreeNodes(orgTreeData.value, keyWord.value)
-})
-const orgTreeKeys = {
-  label: 'name',
-  value: 'id',
-  children: 'childs'
-}
-const expandedKeys = ref([])
-const activeKey = ref(null)
-const selectedOrgs = ref([])
-
-// 过滤树节点函数
-const filterTreeNodes = (nodes, keyword) => {
-  if (!nodes || !Array.isArray(nodes)) return []
-
-  const filtered = []
-
-  for (const node of nodes) {
-    // 创建节点副本，避免修改原始数据
-    const newNode = { ...node }
-
-    // 检查当前节点名称是否包含关键词
-    const matchesKeyword = node.name && node.name.toLowerCase().includes(keyword.toLowerCase())
-
-    // 递归过滤子节点
-    let filteredChildren = []
-    if (node.childs && node.childs.length > 0) {
-      filteredChildren = filterTreeNodes(node.childs, keyword)
-    }
-
-    // 如果当前节点匹配或者有匹配的子节点，则保留
-    if (matchesKeyword || filteredChildren.length > 0) {
-      if (filteredChildren.length > 0) {
-        newNode.childs = filteredChildren
-      }
-      filtered.push(newNode)
-    }
-  }
-
-  return filtered
-}
-
-// 处理组织节点选中
-const handleOrgNodeSelect = (node, checked) => {
-  if (checked) {
-    // 检查是否已经存在
-    if (!selectedOrgs.value.find((org) => org.id === node.id)) {
-      selectedOrgs.value.push({
-        id: node.id,
-        name: node.name
-      })
-    }
-  } else {
-    // 从已选中中移除
-    removeSelectedOrg(node.id)
-  }
-}
-
-// 移除选中的组织
-const removeSelectedOrg = (id) => {
-  const index = selectedOrgs.value.findIndex((org) => org.id === id)
-  if (index !== -1) {
-    selectedOrgs.value.splice(index, 1)
-  }
-}
-
-// 清空已选择的组织
-const clearSelectedOrgs = () => {
-  selectedOrgs.value = []
-}
-
-// 检查节点是否已被选中
-const isOrgNodeSelected = (id) => {
-  return selectedOrgs.value.some((org) => org.id === id)
-}
-
-// 切换组织节点选中状态
-const toggleOrgNodeSelect = (node) => {
-  const isSelected = isOrgNodeSelected(node.id)
-  handleOrgNodeSelect(node, !isSelected)
-}
-
-// 处理组织节点激活
-const handleOrgNodeActive = (value) => {
-  activeKey.value = value
-}
-
-// 处理组织节点展开
-const handleOrgNodeExpand = (value) => {
-  expandedKeys.value = value
-}
-
-// 打开数据权限配置弹窗
-const openPermissionDialog = (row) => {
-  currentRow.value = row
-  // 检查是否已有自定义配置
-  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]
-    } else {
-      selectedOrgs.value = []
-    }
-  }
-  expandedKeys.value = ['1']
-  let title = '数据权限配置: '
-  if (row.module) title += row.module
-  if (row.subModule1 && row.subModule1 !== row.module) title += ' - ' + row.subModule1
-  if (row.subModule2 && row.subModule2 !== row.subModule1) title += ' - ' + row.subModule2
-  if (row.functions && row.functions.length === 1 && row.functions[0].name !== '全部')
-    title += ' - ' + row.functions[0].name
-  permissionDialogTitle.value = title
-  permissionDialogVisible.value = true
-}
-
-// 全局数据权限相关
-const globalPermission = ref(1) // 默认全部数据
-const globalSelectedOrgs = ref([])
-const tempGlobalSelectedOrgs = ref([])
-const globalOrgDialogVisible = ref(false)
-
-// 打开全局组织选择器
-const openGlobalOrgSelector = () => {
-  // 初始化临时选择的组织列表
-  tempGlobalSelectedOrgs.value = [...globalSelectedOrgs.value]
-
-  // 加载组织架构树数据
-  expandedKeys.value = ['1'] // 默认展开第一级
-
-  globalOrgDialogVisible.value = true
-}
-
-// 全局组织节点选择相关函数
-const handleGlobalOrgNodeSelect = (node, checked) => {
-  if (checked) {
-    // 检查是否已经存在
-    if (!tempGlobalSelectedOrgs.value.find((org) => org.id === node.id)) {
-      tempGlobalSelectedOrgs.value.push({
-        id: node.id,
-        name: node.name
-      })
-    }
-  } else {
-    // 从已选中中移除
-    removeGlobalSelectedOrg(node.id)
-  }
-}
-
-// 移除选中的全局组织（对话框中使用）
-const removeGlobalSelectedOrg = (id) => {
-  console.log('移除临时全局组织', id);
-  const index = tempGlobalSelectedOrgs.value.findIndex((org) => org.id === id);
-  if (index !== -1) {
-    tempGlobalSelectedOrgs.value.splice(index, 1);
-    console.log('移除成功，剩余组织数量:', tempGlobalSelectedOrgs.value.length);
-  } else {
-    console.log('未找到对应组织');
-  }
-}
-
-// 直接从全局组织中移除（主界面使用）
-const removeGlobalOrg = (id) => {
-  const index = globalSelectedOrgs.value.findIndex((org) => org.id === id)
-  if (index !== -1) {
-    globalSelectedOrgs.value.splice(index, 1)
-  }
-}
-
-// 清空已选择的全局组织（用于弹窗中）
-const clearGlobalSelectedOrgs = () => {
-  tempGlobalSelectedOrgs.value = []
-}
-
-// 清空主界面已选择的全局组织
-const clearGlobalOrgs = () => {
-  globalSelectedOrgs.value = []
-}
-
-// 检查全局节点是否已被选中
-const isGlobalOrgNodeSelected = (id) => {
-  return tempGlobalSelectedOrgs.value.some((org) => org.id === id)
-}
-
-// 切换全局组织节点选中状态
-const toggleGlobalOrgNodeSelect = (node) => {
-  const isSelected = isGlobalOrgNodeSelected(node.id)
-  handleGlobalOrgNodeSelect(node, !isSelected)
-}
-
-// 确认全局组织选择
-const handleGlobalOrgConfirm = () => {
-  // 保存选择结果
-  globalSelectedOrgs.value = [...tempGlobalSelectedOrgs.value]
-
-  // 应用到未配置自定义数据权限的行
-  applyGlobalOrgsToCustomRows()
-
-  globalOrgDialogVisible.value = false
-}
-
-// 取消全局组织选择
-const handleGlobalOrgCancel = () => {
-  globalOrgDialogVisible.value = false
-}
-
-// 将全局组织应用到未配置自定义数据权限的行
-const applyGlobalOrgsToCustomRows = () => {
-  // 遍历每一行数据
-  data.value.forEach((row) => {
-    // 只对没有自定义配置的行应用全局设置
-    if (!row.hasCustomConfig) {
-      // 应用全局权限设置
-      row.dataPermission = globalPermission.value
-      
-      // 如果全局设置是自定义数据权限，则应用全局选择的组织
-      if (globalPermission.value === 6) {
-        row.selectedOrgs = [...globalSelectedOrgs.value]
-      } else {
-        row.selectedOrgs = []
-      }
-    }
-  })
-}
-
-// 确认权限配置（修改处理全局配置的情况）
-const handlePermissionConfirm = () => {
-  if (currentRow.value) {
-    // 标记该行已有自定义配置
-    currentRow.value.hasCustomConfig = true;
-    currentRow.value.dataPermission = selectedPermission.value
-    if (selectedPermission.value === 6) {
-      currentRow.value.selectedOrgs = [...selectedOrgs.value]
-    } else {
-      currentRow.value.selectedOrgs = []
-    }
-  }
-  permissionDialogVisible.value = false
-}
-
-// 取消权限配置（修改处理全局配置的情况）
-const handlePermissionCancel = () => {
-  // 只关闭弹窗，不做其他操作
-  permissionDialogVisible.value = false
-}
-
-// 获取匹配的节点总数
-const getMatchedCount = (nodes) => {
-  if (!nodes || !Array.isArray(nodes)) return 0
-
-  let count = nodes.length
-
-  for (const node of nodes) {
-    if (node.childs && node.childs.length > 0) {
-      count += getMatchedCount(node.childs)
-    }
-  }
-
-  return count
-}
-
-// 新增的搜索函数
-const onOrgSearch = () => {
-  dataService
-    .fetch(
-      {
-        postEnable: false,
-        keyWord: keyWord.value
-      },
-      {},
-      apis.orgTree
-    )
-    .then(async (res) => {
-      orgTreeData.value = res;
-      if (props.type === 'post') {
-        roleId.value = (await dataService.fetch({}, {}, apis.getRole.replace('{positionId}', props.id))).id
-      } else {
-        roleId.value = props.id;
-      }
-      if (!roleId.value) return;
-      let timer = setInterval(() => {
-        if (data.value.length > 0) {
-          clearInterval(timer)
-          getRoleConfig()
-        }
-      }, 500);
-      dataService.fetch({}, {}, apis.gerRoleInfo.replace('{id}', roleId.value)).then(res => {
-        globalPermission.value = res.dataScope;
-        // 使用递归查找函数获取完整组织信息
-        globalSelectedOrgs.value = [...res.deptIds].map(id => {
-          const org = findOrgInTree(orgTreeData.value, id);
-          return {
-            id: id,
-            name: org ? org.name : `组织${id}` // 如果找不到组织，提供一个默认名称
-          };
-        });
-        // 查询角色信息
-      })
-    })
-}
-onOrgSearch()
-
-// 计算选中的数据权限结构
-const computedSelectedData = computed(() => {
-  // 全局数据权限
-  const dataScope = globalPermission.value
-  const deptIds = globalSelectedOrgs.value.map((org) => org.id)
-  // 功能明细
-  const functionList = []
-  data.value.forEach((row) => {
-    // 只处理有选中功能的行
-    const checkedFunctionIds = row.functions
-      .filter((f) => f.checked)
-      .map((f) => f.id)
-      .filter(Boolean)
-    if (checkedFunctionIds.length > 0) {
-      functionList.push({
-        functionIds: checkedFunctionIds,
-        dataScope: row.dataPermission || undefined,
-        deptIds:
-          row.dataPermission === 6 && row.selectedOrgs && row.selectedOrgs.length > 0
-            ? row.selectedOrgs.map((org) => org.id)
-            : []
-      })
-    }
-  })
-  let role = {
-    dataScope,
-    deptIds,
-  }
-  if (roleId.value) {
-    role.id = roleId.value
-  } else {
-    role.positionId = props.id
-  }
-  return {
-    role,
-    functionList
-  }
-})
-
-watch(globalPermission, (val) => {
-  if (val !== 6) {
-    globalSelectedOrgs.value = []
-  }
-})
-
-function handleSaveRolePermission() {
-  // 这里可以调用API或打印computedSelectedData
-  console.log('保存角色权限：', computedSelectedData.value)
-  dataService.fetch(
-    computedSelectedData.value,
-    {},
-    apis.saveRole
-  ).then(res => {
-    if (!res) {
-      Message.error('保存失败')
-      return
-    }
-    emits('success')
-  })
-}
-
-// 暴露表格引用和方法
-defineExpose({
-  selData: computedSelectedData
-})
-
-// 先添加一个从树形结构中递归查找组织的辅助函数
-const findOrgInTree = (tree, id) => {
-  if (!tree || !Array.isArray(tree)) return null;
-
-  // 先在当前层级查找
-  const found = tree.find(item => item.id === id);
-  if (found) return found;
-
-  // 如果当前层级没找到，递归查找子节点
-  for (const node of tree) {
-    if (node.childs && node.childs.length > 0) {
-      const foundInChild = findOrgInTree(node.childs, id);
-      if (foundInChild) return foundInChild;
-    }
-  }
-
-  return null; // 未找到
-};
-
-// 添加用于更新父级勾选状态的辅助函数
-const updateParentCheckStatus = (row) => {
-  // 判断当前行的功能是否全部勾选
-  const allFunctionsChecked = row.functions.every(func => func.checked);
-
-  // 更新子模块2的勾选状态
-  if (row.subModule2) {
-    // 寻找同组的所有行
-    const sameGroup = data.value.filter(item =>
-      item.moduleId === row.moduleId &&
-      item.subModule1Id === row.subModule1Id &&
-      item.subModule2Id === row.subModule2Id
-    );
-
-    // 判断同组的所有行是否全部勾选了功能
-    const allRowsChecked = sameGroup.every(item =>
-      item.functions.every(func => func.checked)
-    );
-
-    // 更新子模块2的勾选状态
-    sameGroup.forEach(item => {
-      item.subModule2Checked = allRowsChecked;
-    });
-  }
-
-  // 更新子模块1的勾选状态
-  updateSubModule1Checked(row.moduleId, row.subModule1Id);
-}
-</script>
-
-<style lang="less" scoped>
-.cell-with-checkbox {
-  display: flex;
-  align-items: center;
-
-  .cell-text {
-    margin-left: 8px;
-  }
-
-  .empty-cell {
-    color: #ccc;
-    font-style: italic;
-  }
-}
-
-.functions-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-
-  .function-item {
-    display: flex;
-    align-items: center;
-    margin-right: 12px;
-
-    .cell-text {
-      margin-left: 8px;
-    }
-  }
-}
-
-.operation-buttons {
-  display: flex;
-  justify-content: center;
-}
-
-.permission-content {
-  padding: 20px 0;
-
-  .permission-item {
-    .permission-options {
-      margin-bottom: 20px;
-
-      :deep(.t-radio-group) {
-        display: flex;
-        flex-wrap: wrap;
-
-        .t-radio-button {
-          margin-bottom: 10px;
-          margin-right: 0;
-        }
-      }
-    }
-  }
-}
-
-.custom-permission {
-  margin-top: 16px;
-}
-
-.org-selector-dialog {
-  padding: 0;
-}
-
-// 组织选择器弹窗样式
-.org-dialog-container {
-  display: flex;
-  height: 400px;
-  border: 1px solid #eaeaea;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.org-left-panel {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  border-right: 1px solid #eaeaea;
-}
-
-.org-panel-header {
-  padding: 16px;
-  font-weight: 500;
-  color: #181818;
-  font-size: 14px;
-  border-bottom: 1px solid #eaeaea;
-  background-color: #f5f5f5;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.org-search-container {
-  padding: 12px 16px;
-  border-bottom: 1px solid #eaeaea;
-
-  :deep(.t-input) {
-    border-radius: 4px;
-
-    .t-input__inner {
-      height: 32px;
-    }
-
-    .t-input__suffix-icon {
-      cursor: pointer;
-      color: #999;
-
-      &:hover {
-        color: var(--td-brand-color);
-      }
-    }
-  }
-
-  .search-result-info {
-    font-size: 12px;
-    color: #999;
-    margin-top: 8px;
-  }
-}
-
-.org-tree-container {
-  flex: 1;
-  overflow: auto;
-  padding: 16px;
-}
-
-.org-right-panel {
-  width: 300px;
-  display: flex;
-  flex-direction: column;
-}
-
-.org-selected-container {
-  flex: 1;
-  overflow: auto;
-  padding: 16px;
-  background-color: #fcfcfc;
-}
-
-.selected-orgs-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-
-  .org-tag {
-    margin: 0;
-    white-space: nowrap;
-    transition: all 0.2s ease;
-    border-radius: 4px;
-    cursor: pointer;
-
-    &:hover {
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-      transform: translateY(-1px);
-    }
-  }
-}
-
-.no-selected-tip {
-  color: #999;
-  text-align: center;
-  padding: 60px 0;
-  font-size: 14px;
-}
-
-.detail-content {
-  padding: 16px;
-
-  .detail-item {
-    margin-bottom: 16px;
-
-    .item-label {
-      font-weight: bold;
-      margin-right: 8px;
-      color: #666;
-    }
-
-    .item-value {
-      color: #333;
-    }
-
-    .sub-functions {
-      margin-top: 8px;
-
-      .sub-function-item {
-        padding: 4px 0;
-        border-bottom: 1px dashed #eee;
-
-        &:last-child {
-          border-bottom: none;
-        }
-      }
-    }
-  }
-}
-
-.tree-node-label {
-  cursor: pointer;
-  padding: 4px 0;
-  user-select: none;
-
-  &:hover {
-    color: var(--td-brand-color);
-  }
-
-  &.selected {
-    color: var(--td-brand-color);
-    font-weight: 500;
-  }
-}
-
-// 数据权限配置面板样式
-.permission-config-panel {
-  margin-bottom: 16px;
-  border: 1px solid #e7e7e7;
-  border-radius: 6px;
-  overflow: hidden;
-  background-color: #fff;
-
-  .panel-header {
-    background-color: #f5f5f5;
-    padding: 12px 16px;
-    border-bottom: 1px solid #e7e7e7;
-
-    .panel-title {
-      margin: 0;
-      font-size: 16px;
-      font-weight: bold;
-      color: #333;
-    }
-  }
-
-  .panel-content {
-    padding: 16px;
-
-    .permission-type-selector {
-      display: flex;
-      align-items: center;
-      margin-bottom: 16px;
-
-      .permission-radio-group {
-        display: flex;
-        flex-wrap: wrap;
-
-        :deep(.t-radio-button) {
-          margin-bottom: 10px;
-          margin-right: 0;
-        }
-      }
-    }
-
-    .org-select-row {
-      display: flex;
-      align-items: center;
-      margin-bottom: 16px;
-
-      .selected-count {
-        color: #666;
-        margin-right: 12px;
-      }
-
-      .org-select-btn {
-        height: 32px;
-      }
-    }
-
-    .selected-orgs-panel {
-      display: flex;
-      flex-direction: column;
-      border: 1px solid #eaeaea;
-      border-radius: 4px;
-      margin-top: 16px;
-
-      .selected-orgs-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 10px 16px;
-        font-size: 14px;
-        color: #181818;
-        border-bottom: 1px solid #eaeaea;
-        background-color: #f5f5f5;
-      }
-
-      .selected-orgs-content {
-        padding: 16px;
-        min-height: 80px;
-
-        .no-org-selected {
-          color: #999;
-          text-align: center;
-          padding: 20px 0;
-        }
-
-        .selected-orgs-tags {
-          display: flex;
-          flex-wrap: wrap;
-          gap: 8px;
-
-          .org-tag {
-            margin: 0;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-        }
-      }
-    }
-  }
-}
-
-.no-search-results {
-  text-align: center;
-  padding: 30px 0;
-  color: #999;
-  font-size: 14px;
-}
-</style>
+<template>
+  <div>
+    <!-- 选中数据结构展示 -->
+    <!-- <div style="margin-bottom: 16px">
+      <t-card title="选中数据结构(JSON)">
+        <pre style="background: #f6f8fa; padding: 12px 16px; border-radius: 6px; overflow: auto; max-height: 300px"
+          >{{ JSON.stringify(computedSelectedData, null, 2) }}
+        </pre>
+      </t-card>
+    </div> -->
+    <!-- 树表上方的数据权限配置模块 -->
+    <div class="permission-config-panel">
+      <div class="panel-header">
+        <h3 class="panel-title">数据权限配置</h3>
+      </div>
+      <div class="panel-content">
+        <div class="permission-type-selector">
+          <t-radio-group v-model="globalPermission" class="permission-radio-group">
+            <t-radio-button :value="1">全部数据</t-radio-button>
+            <t-radio-button :value="2">事业部数据</t-radio-button>
+            <t-radio-button :value="3">本部门数据</t-radio-button>
+            <t-radio-button :value="4">子部门数据</t-radio-button>
+            <t-radio-button :value="5">个人数据</t-radio-button>
+            <t-radio-button :value="6">自定义数据</t-radio-button>
+          </t-radio-group>
+        </div>
+
+        <div v-if="globalPermission === 6" class="org-select-row">
+          <div class="selected-count">
+            {{ globalSelectedOrgs.length > 0 ? '已选择' + globalSelectedOrgs.length + '个组织' : '未选择组织' }}
+          </div>
+          <t-button theme="primary" @click="openGlobalOrgSelector" class="org-select-btn">
+            {{ globalSelectedOrgs.length > 0 ? '编辑' : '选择' }}
+            <template #suffix>
+              <t-icon name="chevron-right" />
+            </template>
+          </t-button>
+        </div>
+
+        <div v-if="globalPermission === 6" class="selected-orgs-panel">
+          <div class="selected-orgs-header">
+            已选组织：
+            <t-button theme="primary" variant="text" size="small" @click="clearGlobalOrgs">清空</t-button>
+          </div>
+          <div class="selected-orgs-content">
+            <div v-if="globalSelectedOrgs.length === 0" class="no-org-selected">请从左侧选择组织</div>
+            <div v-else class="selected-orgs-tags">
+              <t-tag v-for="org in globalSelectedOrgs" :key="org.id" theme="primary" variant="light" class="org-tag"
+                closable @close="removeGlobalOrg(org.id)">
+                {{ org.name }}
+              </t-tag>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <t-table :bordered="true" :data="data" :columns="columns" row-key="id" :rowspan-and-colspan="rowspanAndColspan"
+      resizable table-layout="fixed" lazy-load @cell-click="handleCellClick">
+      <!-- 模块列的自定义单元格 -->
+      <template #module="{ row }">
+        <div class="cell-with-checkbox">
+          <t-checkbox v-model="row.moduleChecked" @change="(checked) => handleModuleCheck(row, checked)"></t-checkbox>
+          <span class="cell-text">{{ row.module }}</span>
+        </div>
+      </template>
+
+      <!-- 子模块1列的自定义单元格 -->
+      <template #subModule1="{ row }">
+        <div class="cell-with-checkbox">
+          <t-checkbox v-model="row.subModule1Checked"
+            @change="(checked) => handleSubModule1Check(row, checked)"></t-checkbox>
+          <span class="cell-text">{{ row.subModule1 || row.module }}</span>
+        </div>
+      </template>
+
+      <!-- 子模块2列的自定义单元格 -->
+      <template #subModule2="{ row }">
+        <div class="cell-with-checkbox" v-if="row.subModule2">
+          <t-checkbox v-model="row.subModule2Checked"
+            @change="(checked) => handleSubModule2Check(row, checked)"></t-checkbox>
+          <span class="cell-text">{{ row.subModule2 }}</span>
+        </div>
+        <div v-else class="cell-with-checkbox">
+          <span class="cell-text empty-cell">-</span>
+        </div>
+      </template>
+
+      <!-- 功能列的自定义单元格 -->
+      <template #functions="{ row }">
+        <div class="functions-container">
+          <div v-for="(func, idx) in row.functions" :key="func.id || idx" class="function-item">
+            <t-checkbox v-model="func.checked"
+              @change="(checked) => handleFunctionCheck(row, func, checked)"></t-checkbox>
+            <span class="cell-text">{{ func.name }}</span>
+          </div>
+        </div>
+      </template>
+
+      <!-- 操作列的自定义单元格 -->
+      <template #operation="{ row }">
+        <div class="operation-buttons">
+          <t-button theme="primary" size="medium" @click="openPermissionDialog(row)"
+            :disabled="!row.functions.some((f) => f.checked)">数据权限配置</t-button>
+        </div>
+      </template>
+
+      <slot></slot>
+    </t-table>
+
+    <!-- 新增保存按钮 -->
+    <div style="margin-top: 24px; display: flex; justify-content: flex-end">
+      <t-button theme="primary" @click="handleSaveRolePermission">保存角色权限</t-button>
+    </div>
+
+    <!-- 全局组织选择弹窗 -->
+    <t-dialog v-model:visible="globalOrgDialogVisible" header="选择组织" width="800px" attach="body"
+      :confirm-btn="{ content: '确定', theme: 'primary' }" :cancel-btn="{ content: '取消', theme: 'default' }"
+      @confirm="handleGlobalOrgConfirm" @cancel="handleGlobalOrgCancel">
+      <div class="org-selector-dialog">
+        <div class="org-dialog-container">
+          <div class="org-left-panel">
+            <div class="org-panel-header">组织架构</div>
+            <div class="org-search-container">
+              <t-input v-model="keyWord" placeholder="请输入关键词搜索" clearable style="width: 100%">
+                <template #suffix>
+                  <t-button theme="default" shape="square" @click="onOrgSearch" size="small">
+                    <t-icon name="search" />
+                  </t-button>
+                </template>
+              </t-input>
+              <div v-if="keyWord" class="search-result-info">
+                找到 {{ getMatchedCount(filteredOrgTreeData) }} 个结果
+              </div>
+            </div>
+            <div class="org-tree-container">
+              <t-tree :data="filteredOrgTreeData" :keys="orgTreeKeys" activable hover expandAll line
+                expand-on-click-node :expanded="expandedKeys" :active="activeKey" @active="handleOrgNodeActive"
+                @expand="handleOrgNodeExpand">
+                <template #operations="{ node }">
+                  <t-checkbox :checked="isGlobalOrgNodeSelected(node.data.id)"
+                    @change="(checked) => handleGlobalOrgNodeSelect(node.data, checked)"></t-checkbox>
+                </template>
+                <template #label="{ node }">
+                  <div class="tree-node-label" :class="{ selected: isGlobalOrgNodeSelected(node.data.id) }"
+                    @click.stop="toggleGlobalOrgNodeSelect(node.data)">
+                    {{ node.data.name }}
+                  </div>
+                </template>
+              </t-tree>
+              <div v-if="keyWord && filteredOrgTreeData.length === 0" class="no-search-results">
+                未找到符合"{{ keyWord }}"的组织
+              </div>
+            </div>
+          </div>
+          <div class="org-right-panel">
+            <div class="org-panel-header">
+              <span>已选择组织</span>
+              <t-button theme="primary" variant="text" @click="clearGlobalSelectedOrgs">清空</t-button>
+            </div>
+            <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)"
+                  theme="primary" variant="light" class="org-tag">
+                  {{ org.name }}
+                </t-tag>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </t-dialog>
+
+    <!-- 数据权限配置弹窗（针对表格行） -->
+    <t-dialog v-model:visible="permissionDialogVisible" :header="permissionDialogTitle" width="800px" attach="body"
+      :confirm-btn="{ content: '确定', theme: 'primary' }" :cancel-btn="{ content: '取消', theme: 'default' }"
+      @confirm="handlePermissionConfirm" @cancel="handlePermissionCancel">
+      <div class="permission-content">
+        <template v-if="currentRow">
+          <div class="permission-item">
+            <div class="permission-options">
+              <t-radio-group v-model="selectedPermission">
+                <t-radio-button :value="1">全部数据</t-radio-button>
+                <t-radio-button :value="2">事业部数据</t-radio-button>
+                <t-radio-button :value="3">本部门数据</t-radio-button>
+                <t-radio-button :value="4">子部门数据</t-radio-button>
+                <t-radio-button :value="5">个人数据</t-radio-button>
+                <t-radio-button :value="6">自定义数据</t-radio-button>
+              </t-radio-group>
+            </div>
+
+            <div v-if="selectedPermission === 6" class="custom-permission">
+              <div class="org-dialog-container">
+                <div class="org-left-panel">
+                  <div class="org-panel-header">组织架构</div>
+                  <div class="org-search-container">
+                    <t-input v-model="keyWord" placeholder="请输入关键词搜索" clearable style="width: 100%">
+                      <template #suffix>
+                        <t-button theme="default" shape="square" @click="onOrgSearch" size="small">
+                          <t-icon name="search" />
+                        </t-button>
+                      </template>
+                    </t-input>
+                    <div v-if="keyWord" class="search-result-info">
+                      找到 {{ getMatchedCount(filteredOrgTreeData) }} 个结果
+                    </div>
+                  </div>
+                  <div class="org-tree-container">
+                    <t-tree :data="filteredOrgTreeData" :keys="orgTreeKeys" activable hover expandAll line
+                      expand-on-click-node :expanded="expandedKeys" :active="activeKey" @active="handleOrgNodeActive"
+                      @expand="handleOrgNodeExpand">
+                      <template #operations="{ node }">
+                        <t-checkbox :checked="isOrgNodeSelected(node.data.id)"
+                          @change="(checked) => handleOrgNodeSelect(node.data, checked)"></t-checkbox>
+                      </template>
+                      <template #label="{ node }">
+                        <div class="tree-node-label" :class="{ selected: isOrgNodeSelected(node.data.id) }"
+                          @click.stop="toggleOrgNodeSelect(node.data)">
+                          {{ node.data.name }}
+                        </div>
+                      </template>
+                    </t-tree>
+                    <div v-if="keyWord && filteredOrgTreeData.length === 0" class="no-search-results">
+                      未找到符合"{{ keyWord }}"的组织
+                    </div>
+                  </div>
+                </div>
+                <div class="org-right-panel">
+                  <div class="org-panel-header">
+                    <span>已选择组织</span>
+                    <t-button theme="primary" variant="text" @click="clearSelectedOrgs">清空</t-button>
+                  </div>
+                  <div class="org-selected-container">
+                    <div v-if="selectedOrgs.length === 0" class="no-selected-tip">请从左侧选择组织</div>
+                    <div v-else class="selected-orgs-tags">
+                      <t-tag v-for="org in selectedOrgs" :key="org.id" closable @close="removeSelectedOrg(org.id)"
+                        theme="primary" variant="light" class="org-tag">
+                        {{ org.name }}
+                      </t-tag>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
+    </t-dialog>
+
+    <!-- 保留原有的详情弹窗 -->
+    <t-dialog v-model:visible="detailDialogVisible" :header="detailDialogTitle" width="600px" :footer="false">
+      <div class="detail-content">
+        <template v-if="currentRow">
+          <div class="detail-item">
+            <span class="item-label">模块：</span>
+            <span class="item-value">{{ currentRow.module }}</span>
+          </div>
+
+          <div class="detail-item" v-if="currentRow.subModule1">
+            <span class="item-label">子模块1：</span>
+            <span class="item-value">{{ currentRow.subModule1 }}</span>
+          </div>
+
+          <div class="detail-item" v-if="currentRow.subModule2">
+            <span class="item-label">子模块2：</span>
+            <span class="item-value">{{ currentRow.subModule2 }}</span>
+          </div>
+
+          <div class="detail-item">
+            <span class="item-label">功能：</span>
+            <span class="item-value">{{ currentRow.function }}</span>
+          </div>
+
+          <div class="detail-item" v-if="currentRow.path">
+            <span class="item-label">路径：</span>
+            <span class="item-value">{{ currentRow.path }}</span>
+          </div>
+
+          <div class="detail-item" v-if="currentRow.childFunctions && currentRow.childFunctions.length > 0">
+            <span class="item-label">子功能：</span>
+            <div class="sub-functions">
+              <div v-for="(func, index) in currentRow.childFunctions" :key="index" class="sub-function-item">
+                <span>{{ func.name }}</span>
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
+    </t-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EbizTreeMergeTable'
+}
+</script>
+
+<script setup>
+import dataService from '../apiService/simpleDataService'
+import { ref, computed, onMounted, watch } from 'vue'
+import {
+  Table as TTable,
+  Checkbox as TCheckbox,
+  Button as TButton,
+  Dialog as TDialog,
+  RadioGroup as TRadioGroup,
+  RadioButton as TRadioButton,
+  Input as TInput,
+  Tree as TTree,
+  Tag as TTag,
+  Icon as TIcon
+} from 'tdesign-vue-next'
+
+const apis = {
+  // tree: '/menu/tree',
+  tree: '/function/tree',
+  orgTree: '/appdata/execute/plugin?key=organizational_structure',
+  getConfig: '/role/functions/search/{roleId}',
+  getRole: '/role/position/{positionId}',
+  gerRoleInfo: '/role/detail/{id}',
+  saveRole: '/role/save'
+}
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'role' // role,post 角色，岗位
+  },
+  id: {
+    type: String,
+    default: ''
+  }
+})
+const emits = defineEmits(['success'])
+const roleId = ref()
+
+const data = ref([])
+// 表格列配置，添加自定义单元格插槽
+const columns = [
+  { colKey: 'module', title: '模块', width: 150, cell: 'module' },
+  { colKey: 'subModule1', title: '子模块1', width: 150, cell: 'subModule1' },
+  { colKey: 'subModule2', title: '子模块2', width: 150, cell: 'subModule2' },
+  { colKey: 'functions', title: '功能', width: 300, cell: 'functions' },
+  { colKey: 'operation', title: '操作', width: 100, cell: 'operation', fixed: 'right' }
+]
+
+
+// 获取数据并处理
+dataService.fetch({}, {}, apis.tree).then((res) => {
+  const processedData = processTreeData(res || [])
+  // 为每行数据添加选中状态属性
+  processedData.forEach((row) => {
+    // 添加选中状态属性
+    row.moduleChecked = false
+    row.subModule1Checked = false
+    row.subModule2Checked = false
+    row.functionChecked = false
+  })
+  data.value = processedData;
+})
+function getRoleConfig() {
+  dataService.fetch({}, {}, apis.getConfig.replace('{roleId}', roleId.value || props.id)).then((res) => {
+    res.forEach(item => {
+      // 获取functionId
+      const functionId = item.functionId;
+      // 在data.value中查找对应功能所在的行
+      data.value.forEach(row => {
+        // 检查functions数组中是否有匹配的功能
+        const matchedFunction = row.functions.find(func => func.id === functionId);
+        if (matchedFunction) {
+          // 设置功能勾选状态为true
+          matchedFunction.checked = true;
+
+          // 保存数据权限配置（如果有）
+          if (item.dataScope) {
+            row.dataPermission = item.dataScope;
+            // 如果是自定义数据权限，则设置已选组织
+            if (item.dataScope === 6 && item.deptIds && item.deptIds.length > 0) {
+              row.selectedOrgs = item.deptIds.map(id => {
+                const org = findOrgInTree(orgTreeData.value, id);
+                return {
+                  id: id,
+                  name: org ? org.name : `组织${id}`
+                };
+              });
+            }
+          }
+
+          // 更新父级勾选状态（模块、子模块）
+          updateParentCheckStatus(row);
+        }
+      });
+    });
+  })
+}
+/**
+ * 处理树形数据，生成四级结构（模块、子模块1、子模块2、功能列表）
+ * @param {Array} treeData 原始树形数据
+ * @returns {Array} 扁平化处理后的数据
+ */
+const processTreeData = (treeData) => {
+  const result = []
+  // 处理第一级：模块
+  treeData.forEach((moduleItem) => {
+    if (!moduleItem.children || moduleItem.children.length === 0) {
+      // 没有子模块，功能为全部
+      result.push({
+        id: `${moduleItem.id}_all`,
+        module: moduleItem.name,
+        moduleId: moduleItem.id,
+        subModule1: null,
+        subModule1Id: null,
+        subModule2: null,
+        subModule2Id: null,
+        functions: [{ id: null, name: '全部', checked: false }]
+      })
+      return
+    }
+    moduleItem.children.forEach((subModule1Item) => {
+      if (!subModule1Item.children || subModule1Item.children.length === 0) {
+        // 没有子模块2，功能为全部
+        result.push({
+          id: `${moduleItem.id}_${subModule1Item.id}_all`,
+          module: moduleItem.name,
+          moduleId: moduleItem.id,
+          subModule1: subModule1Item.name,
+          subModule1Id: subModule1Item.id,
+          subModule2: null,
+          subModule2Id: null,
+          functions: [{ id: null, name: '全部', checked: false }]
+        })
+      } else {
+        subModule1Item.children.forEach((subModule2Item) => {
+          // 功能聚合
+          let functions = []
+          if (subModule2Item.children && subModule2Item.children.length > 0) {
+            subModule2Item.children.forEach((functionItem) => {
+              // 主功能
+              const func = {
+                id: functionItem.id,
+                name: functionItem.name,
+                checked: false
+              }
+              functions.push(func)
+              // 子功能
+              if (functionItem.children && functionItem.children.length > 0) {
+                functionItem.children.forEach((childFunc) => {
+                  functions.push({
+                    id: childFunc.id,
+                    name: childFunc.name,
+                    checked: false
+                  })
+                })
+              }
+            })
+          } else {
+            functions.push({ id: null, name: '全部', checked: false })
+          }
+          result.push({
+            id: `${moduleItem.id}_${subModule1Item.id}_${subModule2Item.id}`,
+            module: moduleItem.name,
+            moduleId: moduleItem.id,
+            subModule1: subModule1Item.name,
+            subModule1Id: subModule1Item.id,
+            subModule2: subModule2Item.name,
+            subModule2Id: subModule2Item.id,
+            functions
+          })
+        })
+      }
+    })
+  })
+  return result
+}
+
+/**
+ * 单元格合并计算函数
+ */
+const rowspanAndColspan = ({ row, col, rowIndex, colIndex }) => {
+  // 功能列合并逻辑
+  if (col.colKey === 'functions') {
+    const isFirstRow =
+      rowIndex === 0 ||
+      data.value[rowIndex - 1].moduleId !== row.moduleId ||
+      data.value[rowIndex - 1].subModule1Id !== row.subModule1Id ||
+      data.value[rowIndex - 1].subModule2Id !== row.subModule2Id
+    if (isFirstRow) {
+      let rowspan = 1
+      for (let i = rowIndex + 1; i < data.value.length; i++) {
+        if (
+          data.value[i].moduleId === row.moduleId &&
+          data.value[i].subModule1Id === row.subModule1Id &&
+          data.value[i].subModule2Id === row.subModule2Id
+        ) {
+          rowspan++
+        } else {
+          break
+        }
+      }
+      return { rowspan, colspan: 1 }
+    }
+    return { rowspan: 0, colspan: 0 }
+  }
+  // 模块列合并逻辑
+  if (col.colKey === 'module') {
+    const currentModuleId = row.moduleId
+    const isFirstRow = rowIndex === 0 || data.value[rowIndex - 1].moduleId !== currentModuleId
+    if (isFirstRow) {
+      let rowspan = 1
+      for (let i = rowIndex + 1; i < data.value.length; i++) {
+        if (data.value[i].moduleId === currentModuleId) {
+          rowspan++
+        } else {
+          break
+        }
+      }
+      return { rowspan, colspan: 1 }
+    }
+    return { rowspan: 0, colspan: 0 }
+  }
+  // 子模块1列合并逻辑
+  if (col.colKey === 'subModule1') {
+    if (!row.subModule1) return {}
+    const currentModule = row.moduleId
+    const currentSubModule1 = row.subModule1Id
+    const isFirstRow =
+      rowIndex === 0 ||
+      data.value[rowIndex - 1].subModule1Id !== currentSubModule1 ||
+      data.value[rowIndex - 1].moduleId !== currentModule
+    if (isFirstRow) {
+      let rowspan = 1
+      for (let i = rowIndex + 1; i < data.value.length; i++) {
+        if (data.value[i].moduleId === currentModule && data.value[i].subModule1Id === currentSubModule1) {
+          rowspan++
+        } else {
+          break
+        }
+      }
+      return { rowspan, colspan: 1 }
+    }
+    return { rowspan: 0, colspan: 0 }
+  }
+  // 子模块2列合并逻辑
+  if (col.colKey === 'subModule2') {
+    if (!row.subModule2) return {}
+    const currentModule = row.moduleId
+    const currentSubModule1 = row.subModule1Id
+    const currentSubModule2 = row.subModule2Id
+    const isFirstRow =
+      rowIndex === 0 ||
+      data.value[rowIndex - 1].subModule2Id !== currentSubModule2 ||
+      data.value[rowIndex - 1].subModule1Id !== currentSubModule1 ||
+      data.value[rowIndex - 1].moduleId !== currentModule
+    if (isFirstRow) {
+      let rowspan = 1
+      for (let i = rowIndex + 1; i < data.value.length; i++) {
+        if (
+          data.value[i].moduleId === currentModule &&
+          data.value[i].subModule1Id === currentSubModule1 &&
+          data.value[i].subModule2Id === currentSubModule2
+        ) {
+          rowspan++
+        } else {
+          break
+        }
+      }
+      return { rowspan, colspan: 1 }
+    }
+    return { rowspan: 0, colspan: 0 }
+  }
+  return {} // 其他列不合并
+}
+
+// 勾选模块时联动所有下级
+const handleModuleCheck = (row, checked) => {
+  row.moduleChecked = checked
+  data.value.forEach((item) => {
+    if (item.moduleId === row.moduleId) {
+      item.subModule1Checked = checked
+      item.subModule2Checked = checked
+      item.functions.forEach((func) => (func.checked = checked))
+    }
+  })
+}
+
+// 勾选子模块1时联动所有下级
+const handleSubModule1Check = (row, checked) => {
+  row.subModule1Checked = checked
+  data.value.forEach((item) => {
+    if (item.moduleId === row.moduleId && item.subModule1Id === row.subModule1Id) {
+      item.subModule2Checked = checked
+      item.functions.forEach((func) => (func.checked = checked))
+    }
+  })
+  // 向上联动模块
+  updateModuleChecked(row.moduleId)
+}
+
+// 勾选子模块2时联动所有下级
+const handleSubModule2Check = (row, checked) => {
+  row.subModule2Checked = checked
+  data.value.forEach((item) => {
+    if (
+      item.moduleId === row.moduleId &&
+      item.subModule1Id === row.subModule1Id &&
+      item.subModule2Id === row.subModule2Id
+    ) {
+      item.functions.forEach((func) => (func.checked = checked))
+    }
+  })
+  // 向上联动子模块1
+  updateSubModule1Checked(row.moduleId, row.subModule1Id)
+}
+
+// 勾选功能时，自动判断父级
+const handleFunctionCheck = (row, func, checked) => {
+  func.checked = checked
+  // 判断本组所有功能是否全选
+  const allChecked = row.functions.every((f) => f.checked)
+  row.subModule2Checked = allChecked
+  // 向上联动
+  updateSubModule1Checked(row.moduleId, row.subModule1Id)
+}
+
+// 更新子模块1的勾选状态
+const updateSubModule1Checked = (moduleId, subModule1Id) => {
+  // 找到所有同模块+同子模块1的行
+  const group = data.value.filter((item) => item.moduleId === moduleId && item.subModule1Id === subModule1Id)
+  const allChecked = group.every((item) => item.subModule2Checked)
+  group.forEach((item) => {
+    item.subModule1Checked = allChecked
+  })
+  // 向上联动模块
+  updateModuleChecked(moduleId)
+}
+
+// 更新模块的勾选状态
+const updateModuleChecked = (moduleId) => {
+  const group = data.value.filter((item) => item.moduleId === moduleId)
+  const allChecked = group.every((item) => item.subModule1Checked)
+  group.forEach((item) => {
+    item.moduleChecked = allChecked
+  })
+}
+
+// 单元格点击事件
+const handleCellClick = (context) => {
+  console.log('单元格点击：', context)
+}
+
+// 详情弹窗相关
+const detailDialogVisible = ref(false)
+const detailDialogTitle = ref('详情')
+const currentRow = ref(null)
+
+
+// 数据权限弹窗相关
+const permissionDialogVisible = ref(false)
+const permissionDialogTitle = ref('数据权限配置')
+const selectedPermission = ref(1) // 默认选择全部数据
+
+// 组织架构树相关
+const orgTreeData = ref([])
+const keyWord = ref('')
+const filteredOrgTreeData = computed(() => {
+  if (!keyWord.value) return orgTreeData.value
+  return filterTreeNodes(orgTreeData.value, keyWord.value)
+})
+const orgTreeKeys = {
+  label: 'name',
+  value: 'id',
+  children: 'childs'
+}
+const expandedKeys = ref([])
+const activeKey = ref(null)
+const selectedOrgs = ref([])
+
+// 过滤树节点函数
+const filterTreeNodes = (nodes, keyword) => {
+  if (!nodes || !Array.isArray(nodes)) return []
+
+  const filtered = []
+
+  for (const node of nodes) {
+    // 创建节点副本，避免修改原始数据
+    const newNode = { ...node }
+
+    // 检查当前节点名称是否包含关键词
+    const matchesKeyword = node.name && node.name.toLowerCase().includes(keyword.toLowerCase())
+
+    // 递归过滤子节点
+    let filteredChildren = []
+    if (node.childs && node.childs.length > 0) {
+      filteredChildren = filterTreeNodes(node.childs, keyword)
+    }
+
+    // 如果当前节点匹配或者有匹配的子节点，则保留
+    if (matchesKeyword || filteredChildren.length > 0) {
+      if (filteredChildren.length > 0) {
+        newNode.childs = filteredChildren
+      }
+      filtered.push(newNode)
+    }
+  }
+
+  return filtered
+}
+
+// 处理组织节点选中
+const handleOrgNodeSelect = (node, checked) => {
+  if (checked) {
+    // 检查是否已经存在
+    if (!selectedOrgs.value.find((org) => org.id === node.id)) {
+      selectedOrgs.value.push({
+        id: node.id,
+        name: node.name
+      })
+    }
+  } else {
+    // 从已选中中移除
+    removeSelectedOrg(node.id)
+  }
+}
+
+// 移除选中的组织
+const removeSelectedOrg = (id) => {
+  const index = selectedOrgs.value.findIndex((org) => org.id === id)
+  if (index !== -1) {
+    selectedOrgs.value.splice(index, 1)
+  }
+}
+
+// 清空已选择的组织
+const clearSelectedOrgs = () => {
+  selectedOrgs.value = []
+}
+
+// 检查节点是否已被选中
+const isOrgNodeSelected = (id) => {
+  return selectedOrgs.value.some((org) => org.id === id)
+}
+
+// 切换组织节点选中状态
+const toggleOrgNodeSelect = (node) => {
+  const isSelected = isOrgNodeSelected(node.id)
+  handleOrgNodeSelect(node, !isSelected)
+}
+
+// 处理组织节点激活
+const handleOrgNodeActive = (value) => {
+  activeKey.value = value
+}
+
+// 处理组织节点展开
+const handleOrgNodeExpand = (value) => {
+  expandedKeys.value = value
+}
+
+// 打开数据权限配置弹窗
+const openPermissionDialog = (row) => {
+  currentRow.value = row
+  // 只做展示，不写入行权限
+  if (row.dataPermission) {
+    selectedPermission.value = row.dataPermission
+    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]
+    } else {
+      selectedOrgs.value = []
+    }
+  }
+  expandedKeys.value = ['1']
+  let title = '数据权限配置: '
+  if (row.module) title += row.module
+  if (row.subModule1 && row.subModule1 !== row.module) title += ' - ' + row.subModule1
+  if (row.subModule2 && row.subModule2 !== row.subModule1) title += ' - ' + row.subModule2
+  if (row.functions && row.functions.length === 1 && row.functions[0].name !== '全部')
+    title += ' - ' + row.functions[0].name
+  permissionDialogTitle.value = title
+  permissionDialogVisible.value = true
+}
+
+// 全局数据权限相关
+const globalPermission = ref(1) // 默认全部数据
+const globalSelectedOrgs = ref([])
+const tempGlobalSelectedOrgs = ref([])
+const globalOrgDialogVisible = ref(false)
+
+// 打开全局组织选择器
+const openGlobalOrgSelector = () => {
+  // 初始化临时选择的组织列表
+  tempGlobalSelectedOrgs.value = [...globalSelectedOrgs.value]
+
+  // 加载组织架构树数据
+  expandedKeys.value = ['1'] // 默认展开第一级
+
+  globalOrgDialogVisible.value = true
+}
+
+// 全局组织节点选择相关函数
+const handleGlobalOrgNodeSelect = (node, checked) => {
+  if (checked) {
+    // 检查是否已经存在
+    if (!tempGlobalSelectedOrgs.value.find((org) => org.id === node.id)) {
+      tempGlobalSelectedOrgs.value.push({
+        id: node.id,
+        name: node.name
+      })
+    }
+  } else {
+    // 从已选中中移除
+    removeGlobalOrg(node.id)
+  }
+}
+
+// 移除选中的全局组织（对话框中使用）
+const removeGlobalSelectedOrg = (id) => {
+  const index = tempGlobalSelectedOrgs.value.findIndex((org) => org.id === id)
+  if (index !== -1) {
+    tempGlobalSelectedOrgs.value.splice(index, 1)
+  }
+}
+
+// 直接从全局组织中移除（主界面使用）
+const removeGlobalOrg = (id) => {
+  const index = globalSelectedOrgs.value.findIndex((org) => org.id === id)
+  if (index !== -1) {
+    globalSelectedOrgs.value.splice(index, 1)
+  }
+}
+
+// 清空已选择的全局组织（用于弹窗中）
+const clearGlobalSelectedOrgs = () => {
+  tempGlobalSelectedOrgs.value = []
+}
+
+// 清空主界面已选择的全局组织
+const clearGlobalOrgs = () => {
+  globalSelectedOrgs.value = []
+}
+
+// 检查全局节点是否已被选中
+const isGlobalOrgNodeSelected = (id) => {
+  return tempGlobalSelectedOrgs.value.some((org) => org.id === id)
+}
+
+// 切换全局组织节点选中状态
+const toggleGlobalOrgNodeSelect = (node) => {
+  const isSelected = isGlobalOrgNodeSelected(node.id)
+  handleGlobalOrgNodeSelect(node, !isSelected)
+}
+
+// 确认全局组织选择
+const handleGlobalOrgConfirm = () => {
+  // 保存选择结果
+  globalSelectedOrgs.value = [...tempGlobalSelectedOrgs.value]
+
+  // 应用到所有选择了自定义数据的行
+  applyGlobalOrgsToCustomRows()
+
+  globalOrgDialogVisible.value = false
+}
+
+// 取消全局组织选择
+const handleGlobalOrgCancel = () => {
+  globalOrgDialogVisible.value = false
+}
+
+// 将全局组织应用到所有自定义数据权限的行
+const applyGlobalOrgsToCustomRows = () => {
+  data.value.forEach((row) => {
+    if (row.dataPermission === 6) {
+      row.selectedOrgs = [...globalSelectedOrgs.value]
+    }
+  })
+}
+
+// 确认权限配置（修改处理全局配置的情况）
+const handlePermissionConfirm = () => {
+  if (currentRow.value) {
+    currentRow.value.dataPermission = selectedPermission.value
+    if (selectedPermission.value === 6) {
+      currentRow.value.selectedOrgs = [...selectedOrgs.value]
+    } else {
+      currentRow.value.selectedOrgs = []
+    }
+  }
+  permissionDialogVisible.value = false
+}
+
+// 取消权限配置（修改处理全局配置的情况）
+const handlePermissionCancel = () => {
+  permissionDialogVisible.value = false
+}
+
+// 获取匹配的节点总数
+const getMatchedCount = (nodes) => {
+  if (!nodes || !Array.isArray(nodes)) return 0
+
+  let count = nodes.length
+
+  for (const node of nodes) {
+    if (node.childs && node.childs.length > 0) {
+      count += getMatchedCount(node.childs)
+    }
+  }
+
+  return count
+}
+
+// 新增的搜索函数
+const onOrgSearch = () => {
+  dataService
+    .fetch(
+      {
+        postEnable: false,
+        keyWord: keyWord.value
+      },
+      {},
+      apis.orgTree
+    )
+    .then(async (res) => {
+      orgTreeData.value = res;
+      if (props.type === 'post') {
+        roleId.value = (await dataService.fetch({}, {}, apis.getRole.replace('{positionId}', props.id))).id
+      } else {
+        roleId.value = props.id;
+      }
+      if (!roleId.value) return;
+      let timer = setInterval(() => {
+        if (data.value.length > 0) {
+          clearInterval(timer)
+          getRoleConfig()
+        }
+      }, 500);
+      dataService.fetch({}, {}, apis.gerRoleInfo.replace('{id}', roleId.value)).then(res => {
+        globalPermission.value = res.dataScope;
+        // 使用递归查找函数获取完整组织信息
+        globalSelectedOrgs.value = [...res.deptIds].map(id => {
+          const org = findOrgInTree(orgTreeData.value, id);
+          return {
+            id: id,
+            name: org ? org.name : `组织${id}` // 如果找不到组织，提供一个默认名称
+          };
+        });
+        // 查询角色信息
+      })
+    })
+}
+onOrgSearch()
+
+// 计算选中的数据权限结构
+const computedSelectedData = computed(() => {
+  // 全局数据权限
+  const dataScope = globalPermission.value
+  const deptIds = globalSelectedOrgs.value.map((org) => org.id)
+  // 功能明细
+  const functionList = []
+  data.value.forEach((row) => {
+    // 只处理有选中功能的行
+    const checkedFunctionIds = row.functions
+      .filter((f) => f.checked)
+      .map((f) => f.id)
+      .filter(Boolean)
+    if (checkedFunctionIds.length > 0) {
+      functionList.push({
+        functionIds: checkedFunctionIds,
+        dataScope: row.dataPermission || undefined,
+        deptIds:
+          row.dataPermission === 6 && row.selectedOrgs && row.selectedOrgs.length > 0
+            ? row.selectedOrgs.map((org) => org.id)
+            : []
+      })
+    }
+  })
+  let role = {
+    dataScope,
+    deptIds,
+  }
+  if (roleId.value) {
+    role.id = roleId.value
+  } else {
+    role.positionId = props.id
+  }
+  return {
+    role,
+    functionList
+  }
+})
+
+watch(globalPermission, (val) => {
+  if (val !== 6) {
+    globalSelectedOrgs.value = []
+  }
+})
+
+function handleSaveRolePermission() {
+  // 这里可以调用API或打印computedSelectedData
+  console.log('保存角色权限：', computedSelectedData.value)
+  dataService.fetch(
+    computedSelectedData.value,
+    {},
+    apis.saveRole
+  ).then(res => {
+    if (!res) {
+      Message.error('保存失败')
+      return
+    }
+    emits('success')
+  })
+}
+
+// 暴露表格引用和方法
+defineExpose({
+  selData: computedSelectedData
+})
+
+// 先添加一个从树形结构中递归查找组织的辅助函数
+const findOrgInTree = (tree, id) => {
+  if (!tree || !Array.isArray(tree)) return null;
+
+  // 先在当前层级查找
+  const found = tree.find(item => item.id === id);
+  if (found) return found;
+
+  // 如果当前层级没找到，递归查找子节点
+  for (const node of tree) {
+    if (node.childs && node.childs.length > 0) {
+      const foundInChild = findOrgInTree(node.childs, id);
+      if (foundInChild) return foundInChild;
+    }
+  }
+
+  return null; // 未找到
+};
+
+// 添加用于更新父级勾选状态的辅助函数
+const updateParentCheckStatus = (row) => {
+  // 判断当前行的功能是否全部勾选
+  const allFunctionsChecked = row.functions.every(func => func.checked);
+
+  // 更新子模块2的勾选状态
+  if (row.subModule2) {
+    // 寻找同组的所有行
+    const sameGroup = data.value.filter(item =>
+      item.moduleId === row.moduleId &&
+      item.subModule1Id === row.subModule1Id &&
+      item.subModule2Id === row.subModule2Id
+    );
+
+    // 判断同组的所有行是否全部勾选了功能
+    const allRowsChecked = sameGroup.every(item =>
+      item.functions.every(func => func.checked)
+    );
+
+    // 更新子模块2的勾选状态
+    sameGroup.forEach(item => {
+      item.subModule2Checked = allRowsChecked;
+    });
+  }
+
+  // 更新子模块1的勾选状态
+  updateSubModule1Checked(row.moduleId, row.subModule1Id);
+}
+</script>
+
+<style lang="less" scoped>
+.cell-with-checkbox {
+  display: flex;
+  align-items: center;
+
+  .cell-text {
+    margin-left: 8px;
+  }
+
+  .empty-cell {
+    color: #ccc;
+    font-style: italic;
+  }
+}
+
+.functions-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+
+  .function-item {
+    display: flex;
+    align-items: center;
+    margin-right: 12px;
+
+    .cell-text {
+      margin-left: 8px;
+    }
+  }
+}
+
+.operation-buttons {
+  display: flex;
+  justify-content: center;
+}
+
+.permission-content {
+  padding: 20px 0;
+
+  .permission-item {
+    .permission-options {
+      margin-bottom: 20px;
+
+      :deep(.t-radio-group) {
+        display: flex;
+        flex-wrap: wrap;
+
+        .t-radio-button {
+          margin-bottom: 10px;
+          margin-right: 0;
+        }
+      }
+    }
+  }
+}
+
+.custom-permission {
+  margin-top: 16px;
+}
+
+.org-selector-dialog {
+  padding: 0;
+}
+
+// 组织选择器弹窗样式
+.org-dialog-container {
+  display: flex;
+  height: 400px;
+  border: 1px solid #eaeaea;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.org-left-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid #eaeaea;
+}
+
+.org-panel-header {
+  padding: 16px;
+  font-weight: 500;
+  color: #181818;
+  font-size: 14px;
+  border-bottom: 1px solid #eaeaea;
+  background-color: #f5f5f5;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.org-search-container {
+  padding: 12px 16px;
+  border-bottom: 1px solid #eaeaea;
+
+  :deep(.t-input) {
+    border-radius: 4px;
+
+    .t-input__inner {
+      height: 32px;
+    }
+
+    .t-input__suffix-icon {
+      cursor: pointer;
+      color: #999;
+
+      &:hover {
+        color: var(--td-brand-color);
+      }
+    }
+  }
+
+  .search-result-info {
+    font-size: 12px;
+    color: #999;
+    margin-top: 8px;
+  }
+}
+
+.org-tree-container {
+  flex: 1;
+  overflow: auto;
+  padding: 16px;
+}
+
+.org-right-panel {
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+}
+
+.org-selected-container {
+  flex: 1;
+  overflow: auto;
+  padding: 16px;
+  background-color: #fcfcfc;
+}
+
+.selected-orgs-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+
+  .org-tag {
+    margin: 0;
+    white-space: nowrap;
+    transition: all 0.2s ease;
+    border-radius: 4px;
+    cursor: pointer;
+
+    &:hover {
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      transform: translateY(-1px);
+    }
+  }
+}
+
+.no-selected-tip {
+  color: #999;
+  text-align: center;
+  padding: 60px 0;
+  font-size: 14px;
+}
+
+.detail-content {
+  padding: 16px;
+
+  .detail-item {
+    margin-bottom: 16px;
+
+    .item-label {
+      font-weight: bold;
+      margin-right: 8px;
+      color: #666;
+    }
+
+    .item-value {
+      color: #333;
+    }
+
+    .sub-functions {
+      margin-top: 8px;
+
+      .sub-function-item {
+        padding: 4px 0;
+        border-bottom: 1px dashed #eee;
+
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+    }
+  }
+}
+
+.tree-node-label {
+  cursor: pointer;
+  padding: 4px 0;
+  user-select: none;
+
+  &:hover {
+    color: var(--td-brand-color);
+  }
+
+  &.selected {
+    color: var(--td-brand-color);
+    font-weight: 500;
+  }
+}
+
+// 数据权限配置面板样式
+.permission-config-panel {
+  margin-bottom: 16px;
+  border: 1px solid #e7e7e7;
+  border-radius: 6px;
+  overflow: hidden;
+  background-color: #fff;
+
+  .panel-header {
+    background-color: #f5f5f5;
+    padding: 12px 16px;
+    border-bottom: 1px solid #e7e7e7;
+
+    .panel-title {
+      margin: 0;
+      font-size: 16px;
+      font-weight: bold;
+      color: #333;
+    }
+  }
+
+  .panel-content {
+    padding: 16px;
+
+    .permission-type-selector {
+      display: flex;
+      align-items: center;
+      margin-bottom: 16px;
+
+      .permission-radio-group {
+        display: flex;
+        flex-wrap: wrap;
+
+        :deep(.t-radio-button) {
+          margin-bottom: 10px;
+          margin-right: 0;
+        }
+      }
+    }
+
+    .org-select-row {
+      display: flex;
+      align-items: center;
+      margin-bottom: 16px;
+
+      .selected-count {
+        color: #666;
+        margin-right: 12px;
+      }
+
+      .org-select-btn {
+        height: 32px;
+      }
+    }
+
+    .selected-orgs-panel {
+      display: flex;
+      flex-direction: column;
+      border: 1px solid #eaeaea;
+      border-radius: 4px;
+      margin-top: 16px;
+
+      .selected-orgs-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px 16px;
+        font-size: 14px;
+        color: #181818;
+        border-bottom: 1px solid #eaeaea;
+        background-color: #f5f5f5;
+      }
+
+      .selected-orgs-content {
+        padding: 16px;
+        min-height: 80px;
+
+        .no-org-selected {
+          color: #999;
+          text-align: center;
+          padding: 20px 0;
+        }
+
+        .selected-orgs-tags {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 8px;
+
+          .org-tag {
+            margin: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+      }
+    }
+  }
+}
+
+.no-search-results {
+  text-align: center;
+  padding: 30px 0;
+  color: #999;
+  font-size: 14px;
+}
+</style>