|
|
@@ -0,0 +1,259 @@
|
|
|
+<template>
|
|
|
+ <!-- 增加弹窗宽度从800px到1200px -->
|
|
|
+ <Dialog v-model="dialogVisible" title="课程数据权限" width="800">
|
|
|
+ <el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="120px">
|
|
|
+ <!-- 使用el-row和el-col让角色名称和角色标识在一排显示 -->
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="角色名称">
|
|
|
+ <el-tag>{{ formData.name }}</el-tag>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="角色标识">
|
|
|
+ <el-tag>{{ formData.code }}</el-tag>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-divider content-position="left">blockly课程数据权限</el-divider>
|
|
|
+ <br/>
|
|
|
+
|
|
|
+ <!-- blockly权限 -->
|
|
|
+ <el-form-item label="blockly课程权限">
|
|
|
+ <el-card class="w-full h-300px !overflow-y-scroll" shadow="never">
|
|
|
+ <template #header>
|
|
|
+ 全选/全不选:
|
|
|
+ <el-switch
|
|
|
+ v-model="generalTreeNodeAll"
|
|
|
+ active-text="是"
|
|
|
+ inactive-text="否"
|
|
|
+ inline-prompt
|
|
|
+ @change="handleCheckedGeneralTreeNodeAll()"
|
|
|
+ />
|
|
|
+ 全部展开/折叠:
|
|
|
+ <el-switch
|
|
|
+ v-model="generalDeptExpand"
|
|
|
+ active-text="展开"
|
|
|
+ inactive-text="折叠"
|
|
|
+ inline-prompt
|
|
|
+ @change="handleCheckedGeneralTreeExpand"
|
|
|
+ />
|
|
|
+ 父子联动:
|
|
|
+ <el-switch v-model="generalCheckStrictly" active-text="是" inactive-text="否" inline-prompt />
|
|
|
+ </template>
|
|
|
+ <el-tree
|
|
|
+ ref="generalTreeRef"
|
|
|
+ :check-strictly="!generalCheckStrictly"
|
|
|
+ :data="generalBlocklyOptions"
|
|
|
+ :props="defaultProps"
|
|
|
+ default-expand-all
|
|
|
+ empty-text="加载中，请稍后"
|
|
|
+ node-key="id"
|
|
|
+ show-checkbox
|
|
|
+ />
|
|
|
+ </el-card>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <template #footer>
|
|
|
+ <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
|
|
|
+ <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
+ </template>
|
|
|
+ </Dialog>
|
|
|
+</template>
|
|
|
+<script lang="ts" setup>
|
|
|
+import { defaultProps } from '@/utils/tree'
|
|
|
+import * as RoleApi from '@/api/system/role'
|
|
|
+import { BlocklyTypeApi } from '@/api/blockly/blocklyType'
|
|
|
+import * as PermissionApi from '@/api/system/permission'
|
|
|
+
|
|
|
+defineOptions({ name: 'SystemRoleBlocklyPermissionForm' })
|
|
|
+
|
|
|
+const { t } = useI18n() // 国际化
|
|
|
+const message = useMessage() // 消息弹窗
|
|
|
+
|
|
|
+const dialogVisible = ref(false) // 弹窗的是否展示
|
|
|
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
|
+const formData = reactive({
|
|
|
+ id: undefined,
|
|
|
+ name: '',
|
|
|
+ code: '',
|
|
|
+ dataScopeBlocklyIds: []
|
|
|
+})
|
|
|
+const formRef = ref() // 表单 Ref
|
|
|
+
|
|
|
+// blockly课程相关变量
|
|
|
+const generalBlocklyOptions = ref<any[]>([]) // blockly课程树形结构（仅包含blockly课程）
|
|
|
+const generalDeptExpand = ref(true) // blockly课程展开/折叠
|
|
|
+const generalTreeRef = ref() // blockly课程菜单树组件 Ref
|
|
|
+const generalTreeNodeAll = ref(false) // blockly课程全选/全不选
|
|
|
+const generalCheckStrictly = ref(true) // blockly课程是否严格模式
|
|
|
+
|
|
|
+/** 打开弹窗 */
|
|
|
+const open = async (row: RoleApi.RoleVO) => {
|
|
|
+ dialogVisible.value = true
|
|
|
+ resetForm()
|
|
|
+
|
|
|
+ // 加载课程列表
|
|
|
+ const allCourses = await BlocklyTypeApi.getBlocklyTypeTree()
|
|
|
+
|
|
|
+ // 确保blockly课程只有子节点
|
|
|
+ generalBlocklyOptions.value = filterCoursesByType(allCourses, "blocklyType")
|
|
|
+
|
|
|
+ console.log(allCourses, generalBlocklyOptions.value)
|
|
|
+
|
|
|
+ // 设置数据
|
|
|
+ formData.id = row.id
|
|
|
+ formData.name = row.name
|
|
|
+ formData.code = row.code
|
|
|
+ await nextTick()
|
|
|
+
|
|
|
+ // 需要在 DOM 渲染完成后，再设置选中状态
|
|
|
+ if (row.dataScopeBlocklyIds && row.dataScopeBlocklyIds.length > 0) {
|
|
|
+ row.dataScopeBlocklyIds.forEach((courseId: number): void => {
|
|
|
+ // 尝试在两个树中都设置选中状态，实际只会在对应树中找到匹配的节点
|
|
|
+ generalTreeRef.value?.setChecked(courseId * 100, true, false)
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
|
+
|
|
|
+/**
|
|
|
+ * 根据课程类型筛选课程，并保留完整的树结构
|
|
|
+ * @param courses 原始课程树数据
|
|
|
+ * @param type 课程类型
|
|
|
+ * @returns 筛选后的课程树数据
|
|
|
+ */
|
|
|
+function filterCoursesByType(courses: any[], type: string): any[] {
|
|
|
+ // 深拷贝原始数据，避免修改原始数组
|
|
|
+ const filteredCourses = JSON.parse(JSON.stringify(courses))
|
|
|
+
|
|
|
+ // 递归处理树结构，只保留指定类型的节点及其父节点
|
|
|
+ function filterTreeNodes(nodes: any[]): any[] {
|
|
|
+ return nodes
|
|
|
+ .map(node => {
|
|
|
+ // 复制当前节点
|
|
|
+ const newNode = { ...node }
|
|
|
+
|
|
|
+ // 递归处理子节点
|
|
|
+ if (node.children && node.children.length > 0) {
|
|
|
+ const filteredChildren = filterTreeNodes(node.children)
|
|
|
+ if (filteredChildren.length > 0) {
|
|
|
+ newNode.children = filteredChildren
|
|
|
+ return newNode
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果当前节点是指定类型，或者有符合条件的子节点，则保留
|
|
|
+ if (node.type === type) {
|
|
|
+ return newNode
|
|
|
+ }
|
|
|
+
|
|
|
+ return null
|
|
|
+ })
|
|
|
+ .filter(node => node !== null)
|
|
|
+ }
|
|
|
+
|
|
|
+ return filterTreeNodes(filteredCourses)
|
|
|
+}
|
|
|
+
|
|
|
+/** 提交表单 */
|
|
|
+const emit = defineEmits(['success'])
|
|
|
+const submitForm = async () => {
|
|
|
+ formLoading.value = true
|
|
|
+ try {
|
|
|
+ // 获取所有选中的节点
|
|
|
+ const generalCheckedKeys = generalTreeRef.value?.getCheckedKeys(false) || []
|
|
|
+ const allCheckedKeys = [...generalCheckedKeys]
|
|
|
+
|
|
|
+ // 过滤出只包含子节点的ID
|
|
|
+ const allBlocklyOptions = [...generalBlocklyOptions.value]
|
|
|
+ const childNodeKeys = filterChildNodeKeys(allCheckedKeys, allBlocklyOptions)
|
|
|
+
|
|
|
+ const data = {
|
|
|
+ roleId: formData.id,
|
|
|
+ dataScopeBlocklyIds: childNodeKeys
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log('所有选中的节点:', allCheckedKeys)
|
|
|
+ console.log('只提交子节点:', childNodeKeys)
|
|
|
+ await PermissionApi.assignRoleBlocklyScope(data)
|
|
|
+ message.success(t('common.updateSuccess'))
|
|
|
+ dialogVisible.value = false
|
|
|
+ // 发送操作成功的事件
|
|
|
+ emit('success')
|
|
|
+ } finally {
|
|
|
+ formLoading.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 过滤只包含子节点的ID
|
|
|
+ * @param checkedKeys 所有选中的节点ID
|
|
|
+ * @param treeData 树结构数据
|
|
|
+ * @returns 只包含子节点的ID数组
|
|
|
+ */
|
|
|
+function filterChildNodeKeys(checkedKeys: number[], treeData: any[]): number[] {
|
|
|
+ // 创建一个Map存储所有节点ID及其是否为叶子节点的状态
|
|
|
+ const nodeMap = new Map<number, boolean>()
|
|
|
+
|
|
|
+ // 递归遍历树结构，标记每个节点是否为叶子节点
|
|
|
+ function traverseTree(nodes: any[]) {
|
|
|
+ nodes.forEach(node => {
|
|
|
+
|
|
|
+ nodeMap.set(node.id, node.type === "blocklyType")
|
|
|
+
|
|
|
+ // 递归处理子节点
|
|
|
+ if (node.children && node.children.length > 0) {
|
|
|
+ traverseTree(node.children)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 执行遍历
|
|
|
+ traverseTree(treeData)
|
|
|
+
|
|
|
+ // 过滤出只包含叶子节点的ID
|
|
|
+ return checkedKeys.filter(key => {
|
|
|
+ // 如果节点存在于nodeMap中且是叶子节点，则保留
|
|
|
+ return nodeMap.has(key) && nodeMap.get(key)
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+/** 重置表单 */
|
|
|
+const resetForm = () => {
|
|
|
+ // 重置blockly课程选项
|
|
|
+ generalTreeNodeAll.value = false
|
|
|
+ generalDeptExpand.value = true
|
|
|
+ generalCheckStrictly.value = true
|
|
|
+ generalTreeRef.value?.setCheckedNodes([])
|
|
|
+
|
|
|
+ // 重置表单
|
|
|
+ formData.id = undefined
|
|
|
+ formData.name = ''
|
|
|
+ formData.code = ''
|
|
|
+ formData.dataScopeBlocklyIds = []
|
|
|
+
|
|
|
+ formRef.value?.resetFields()
|
|
|
+}
|
|
|
+
|
|
|
+/** blockly课程全选/全不选 */
|
|
|
+const handleCheckedGeneralTreeNodeAll = () => {
|
|
|
+ generalTreeRef.value?.setCheckedNodes(generalTreeNodeAll.value ? generalBlocklyOptions.value : [])
|
|
|
+}
|
|
|
+
|
|
|
+/** blockly课程展开/折叠全部 */
|
|
|
+const handleCheckedGeneralTreeExpand = () => {
|
|
|
+ const nodes = generalTreeRef.value?.store.nodesMap
|
|
|
+ if (nodes) {
|
|
|
+ for (let node in nodes) {
|
|
|
+ if (nodes[node].expanded === generalDeptExpand.value) {
|
|
|
+ continue
|
|
|
+ }
|
|
|
+ nodes[node].expanded = generalDeptExpand.value
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
liyanbo