@ebiz/designer-components 0.0.18 → 0.0.19-beta.10

package/src/components/EbizTreeMergeTable.vue

@@ -0,0 +1,1386 @@
+<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;
+  dataService.fetch({}, {}, apis.getConfig.replace('{roleId}', 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)).then((res) => {
+            roleId.value = res?.id
+          })
+        }else{
+          roleId.value = props.id;
+        }
+        if(!roleId.value)return;
+        dataService.fetch({}, {}, apis.gerRoleInfo.replace('{id}', props.id)).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>