增加blockly课程权限

src/api/bjdx/course/index.ts

@@ -62,7 +62,7 @@ export const CourseApi = {
   },
 
 
-  // 根据类型id获取课程列表
+  // 取课程列表
   getCourseTypeTree: async () => {
     return await request.get({ url: `/bjdxWeb/course/getCourseTypeTree`})
   }

src/api/blockly/blocklyType/index.ts

@@ -47,4 +47,8 @@ export const BlocklyTypeApi = {
     return await request.download({ url: `/blockly/blockly-type/export-excel`, params })
   },
 
+  // 获取blockly课程列表
+  getBlocklyTypeTree: async () => {
+    return await request.get({ url: `/bjdxWeb/blockly/getBlocklyTypeTree`})
+  }
 }

src/api/system/permission/index.ts

@@ -21,6 +21,11 @@ export interface PermissionAssignRoleCourseScopeReqVO {
   dataScopeCourseIds: number[]
 }
 
+export interface PermissionAssignRoleBlocklyScopeReqVO {
+  roleId: number
+  dataScopeBlocklyIds: number[]
+}
+
 // 查询角色拥有的菜单权限
 export const getRoleMenuList = async (roleId: number) => {
   return await request.get({ url: '/system/permission/list-role-menus?roleId=' + roleId })
@@ -41,6 +46,11 @@ export const assignRoleCourseScope = async (data: PermissionAssignRoleCourseScop
   return await request.post({ url: '/system/permission/assign-role-course-scope', data })
 }
 
+// 赋予角色blockly课程权限
+export const assignRoleBlocklyScope = async (data: PermissionAssignRoleBlocklyScopeReqVO) => {
+  return await request.post({ url: '/system/permission/assign-role-blockly-scope', data })
+}
+
 // 查询用户拥有的角色数组
 export const getUserRoleList = async (userId: number) => {
   return await request.get({ url: '/system/permission/list-user-roles?userId=' + userId })

src/api/system/role/index.ts

@@ -10,6 +10,7 @@ export interface RoleVO {
   dataScope: number
   dataScopeDeptIds: number[]
   dataScopeCourseIds: number[]
+  dataScopeBlocklyIds: number[]
   createTime: Date
 }
 

src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue

@@ -191,7 +191,6 @@ const getActiveElement = () => {
   // 初始第一个选中元素 bpmn:Process
   initFormOnChanged(null)
   props.bpmnModeler.on('import.done', (e) => {
-    console.log(e, 'eeeee')
     initFormOnChanged(null)
   })
   // 监听选择事件，修改当前激活的元素以及表单

src/types/auto-imports.d.ts

@@ -7,8 +7,6 @@ export {}
 declare global {
   const DICT_TYPE: typeof import('@/utils/dict')['DICT_TYPE']
   const EffectScope: typeof import('vue')['EffectScope']
-  const ElMessage: typeof import('element-plus/es')['ElMessage']
-  const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
   const computed: typeof import('vue')['computed']
   const createApp: typeof import('vue')['createApp']
   const customRef: typeof import('vue')['customRef']

src/views/blockly/blockly/index.vue

@@ -3,20 +3,6 @@
     <!-- 左侧课程类型树 -->
     <el-col :span="5" :xs="24">
       <ContentWrap class="h-1/1 custom-scrollbar" style="overflow-x: auto; overflow-y: auto; height: calc(100vh - 100px);">
-        <!-- 课程类型切换 -->
-        <div class="mb-20px">
-          <el-form-item label="课程类型" class="!mb-0">
-            <el-select
-              v-model="queryParams.ctTypeNode"
-              placeholder="请选择课程类型"
-              class="!w-full"
-              @change="handleCtTypeNodeChange"
-            >
-              <el-option label="ai通识课" value="1" />
-              <el-option label="ai实操课" value="2" />
-            </el-select>
-          </el-form-item>
-        </div>
 
         <!-- 搜索条件框 -->
         <div class="mb-20px">
@@ -324,15 +310,6 @@ const handleQuery = async () => {
   getList()
 }
 
-/** 处理课程类型节点变更 */
-const handleCtTypeNodeChange = (ctTypeNode) => {
-  queryParams.bcType = undefined
-  getbcTypeTree(ctTypeNode).then(() => {
-    // 选择课程类型后自动搜索
-    handleQuery()
-  })
-}
-
 /** 处理课程类型节点点击 */
 const handleCourseTypeClick = (data) => {
   queryParams.bcType = data.id
@@ -407,7 +384,7 @@ const getbcTypeTree = async (filterCtTypeNode = "1") => {
   if (filterCtTypeNode !== undefined) {
     filteredData = data.filter(item => item.ctTypeNode === '0' || item.ctTypeNode === filterCtTypeNode)
   }
-  const root = { id: 0, ctType: '课程类型' + (filterCtTypeNode === "1" ? '（ai通识课）' : '（ai实操课）'), children: [] }
+  const root = { id: 0, ctType: '课程类型', children: [] }
   root.children = handleTree(filteredData, 'id', 'ctParentId')
   bcTypeTree.value = [root]
 }

src/views/system/role/RoleBlocklyPermissionForm.vue

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

src/views/system/role/RoleCoursePermissionForm.vue

@@ -109,7 +109,7 @@ import * as RoleApi from '@/api/system/role'
 import { CourseApi } from '@/api/bjdx/course'
 import * as PermissionApi from '@/api/system/permission'
 
-defineOptions({ name: 'SystemRoleDataPermissionForm' })
+defineOptions({ name: 'SystemRoleCoursePermissionForm' })
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗

src/views/system/role/index.vue

@@ -145,6 +145,16 @@
           >
             课程权限
           </el-button>
+          <el-button
+            v-hasPermi="['system:permission:assign-role-data-scope']"
+            link
+            preIcon="ep:coin"
+            title="Blockly课程权限"
+            type="primary"
+            @click="openBlocklyPermissionForm(scope.row)"
+          >
+            blockly权限
+          </el-button>
           <el-button
             v-hasPermi="['system:role:delete']"
             link
@@ -173,6 +183,8 @@
   <RoleDataPermissionForm ref="dataPermissionFormRef" @success="getList" />
   <!-- 表单弹窗：课程权限 -->
   <RoleCoursePermissionForm ref="coursePermissionFormRef" @success="getList" />
+  <!-- 表单弹窗：blockly课程权限 -->
+  <RoleBlocklyPermissionForm ref="blocklyPermissionFormRef" @success="getList" />
 </template>
 <script lang="ts" setup>
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
@@ -183,6 +195,8 @@ import RoleForm from './RoleForm.vue'
 import RoleAssignMenuForm from './RoleAssignMenuForm.vue'
 import RoleDataPermissionForm from './RoleDataPermissionForm.vue'
 import RoleCoursePermissionForm from './RoleCoursePermissionForm.vue'
+import RoleBlocklyPermissionForm from './RoleBlocklyPermissionForm.vue'
+
 
 defineOptions({ name: 'SystemRole' })
 
@@ -245,6 +259,12 @@ const openCoursePermissionForm = async (row: RoleApi.RoleVO) => {
   coursePermissionFormRef.value.open(row)
 }
 
+/** blockly权限操作 */
+const blocklyPermissionFormRef = ref()
+const openBlocklyPermissionForm = async (row: RoleApi.RoleVO) => {
+  blocklyPermissionFormRef.value.open(row)
+}
+
 /** 菜单权限操作 */
 const assignMenuFormRef = ref()
 const openAssignMenuForm = async (row: RoleApi.RoleVO) => {