@zengqiao@菜单分配完成

dmp-edge-ai/src/plugins/element.js

@@ -25,6 +25,7 @@ import {
  DropdownItem,
  Tree,
  Dialog,
  Drawer,
  Loading,
  MessageBox,
  Message,
@@ -56,6 +57,7 @@ Vue.use(DropdownMenu)
Vue.use(DropdownItem)
Vue.use(Tree)
Vue.use(Dialog)
Vue.use(Drawer)
Vue.use(Loading.directive)

dmp-edge-ai/src/service/RoleService.js

@@ -69,3 +69,15 @@ export function deleteRole(roleId) {
    method: 'get'
  })
}
/**
 * 新增角色权限
 * @param data
 */
export function addRolePrivEntity(data) {
  return request({
    url: `/role/addPrivEntity`,
    method: 'post',
    data
  })
}

dmp-edge-ai/src/utils/constant.js

@@ -43,7 +43,8 @@ export const IframeFlag = createEnum({
 */
export const OrganizeType = createEnum({
  COMPANY: ['0', '公司'],
  DEPARTMENT: ['1', '部门']
  DEPARTMENT: ['1', '部门'],
  VIRTUAL: ['2', '虚拟组织']
})
/**
@@ -55,3 +56,12 @@ export const ModalType = {
  EDIT: 1,
  DETAIL: 2
}
/**
 * 角色分配类型
 * @type {{MENU: string, ORGANIZE: string}}
 */
export const RoleAssignType = {
  ORGANIZE: 'ORGANIZE',
  MENU: 'MENU'
}

dmp-edge-ai/src/views/system/role/components/MenuDrawer.vue

@@ -0,0 +1,116 @@
<template>
  <el-drawer :title="title" :visible.sync="drawerVisible" direction="rtl" @open="initData">
    <div class="flex flex-col h-full">
      <el-tree
        default-expand-all
        show-checkbox
        class="flex-auto overflow-auto"
        node-key="menuId"
        ref="tree"
        :data="treeData"
        :props="config"
      >
      </el-tree>
      <div class="dialog-footer flex-none p-4">
        <el-button v-if="!submitLoading" type="primary" @click="submit()">确认</el-button>
        <el-button v-else type="primary" :loading="submitLoading">提交中</el-button>
        <el-button @click="drawerVisible = false">关闭并返回</el-button>
      </div>
    </div>
  </el-drawer>
</template>
<script>
import { default as service } from '@/service'
import { RoleAssignType } from '@/utils/constant'
export default {
  name: 'MenuDrawer',
  props: {
    assignData: {
      type: Object,
      required: true
    },
    show: {
      type: Boolean,
      required: true,
      default: false
    }
  },
  data() {
    this.config = {
      label: 'menuName',
      children: 'children'
    }
    return {
      submitLoading: false,
      treeData: []
    }
  },
  computed: {
    drawerVisible: {
      set(val) {
        this.$emit('update:show', val)
      },
      get() {
        return this.show
      }
    },
    title() {
      return `菜单分配/${this.assignData.roleName}`
    }
  },
  methods: {
    /**
     * 初始化模态框
     */
    initData() {
      this.$refs.tree?.setCheckedKeys([])
      if (this.assignData.roleId) {
        service.role.getRoleInfo(this.assignData.roleId).then((res) => {
          const { privEntList } = res
          const checkedKeys = privEntList.reduce(
            (pre, cur) => (cur.busiObjType === RoleAssignType.MENU ? pre.concat(cur.busiObjId) : pre),
            []
          )
          this.$refs.tree.setCheckedKeys(checkedKeys)
        })
      }
    },
    async submit() {
      this.submitLoading = true
      const checkedNodes = this.$refs.tree.getCheckedNodes().map((item) => {
        return {
          privEntName: item.menuName,
          busiObjId: item.menuId,
          busiObjType: RoleAssignType.MENU
        }
      })
      const params = {
        roleId: this.assignData.roleId,
        busiObjType: RoleAssignType.MENU,
        privEntList: checkedNodes
      }
      console.log(params)
      try {
        await service.role.addRolePrivEntity(params)
        this.drawerVisible = false
      } finally {
        this.submitLoading = false
      }
    },
    /**
     * 获取组织树
     */
    getMenuList() {
      service.menu.listTree().then((res) => {
        this.treeData = res
      })
    }
  },
  created() {
    this.getMenuList()
  }
}
</script>
<style scoped lang="scss"></style>

dmp-edge-ai/src/views/system/role/components/OrganizeDrawer.vue

@@ -0,0 +1,116 @@
<template>
  <el-drawer :title="title" :visible.sync="drawerVisible" direction="rtl" @open="initData">
    <div class="flex flex-col h-full">
      <el-tree
        default-expand-all
        show-checkbox
        class="flex-auto overflow-auto"
        node-key="organizeId"
        ref="tree"
        :data="treeData"
        :props="config"
      >
      </el-tree>
      <div class="dialog-footer flex-none p-4">
        <el-button v-if="!submitLoading" type="primary" @click="submit()">确认</el-button>
        <el-button v-else type="primary" :loading="submitLoading">提交中</el-button>
        <el-button @click="drawerVisible = false">关闭并返回</el-button>
      </div>
    </div>
  </el-drawer>
</template>
<script>
import { default as service } from '@/service'
import { RoleAssignType } from '@/utils/constant'
export default {
  name: 'OrganizeDrawer',
  props: {
    assignData: {
      type: Object,
      required: true
    },
    show: {
      type: Boolean,
      required: true,
      default: false
    }
  },
  data() {
    this.config = {
      label: 'organizeName',
      children: 'children'
    }
    return {
      submitLoading: false,
      treeData: []
    }
  },
  computed: {
    drawerVisible: {
      set(val) {
        this.$emit('update:show', val)
      },
      get() {
        return this.show
      }
    },
    title() {
      return `组织权限分配/${this.assignData.roleName}`
    }
  },
  methods: {
    /**
     * 初始化模态框
     */
    initData() {
      this.$refs.tree?.setCheckedKeys([])
      if (this.assignData.roleId) {
        service.role.getRoleInfo(this.assignData.roleId).then((res) => {
          const { privEntList } = res
          const checkedKeys = privEntList.reduce(
            (pre, cur) => (cur.busiObjType === RoleAssignType.ORGANIZE ? pre.concat(cur.busiObjId) : pre),
            []
          )
          this.$refs.tree.setCheckedKeys(checkedKeys)
        })
      }
    },
    async submit() {
      this.submitLoading = true
      const checkedNodes = this.$refs.tree.getCheckedNodes().map((item) => {
        return {
          privEntName: item.organizeName,
          busiObjId: item.organizeId,
          busiObjType: RoleAssignType.ORGANIZE
        }
      })
      const params = {
        roleId: this.assignData.roleId,
        busiObjType: RoleAssignType.ORGANIZE,
        privEntList: checkedNodes
      }
      console.log(params)
      try {
        await service.role.addRolePrivEntity(params)
        this.drawerVisible = false
      } finally {
        this.submitLoading = false
      }
    },
    /**
     * 获取组织树
     */
    getOrganizeList() {
      service.organize.listTree().then((res) => {
        this.treeData = res
      })
    }
  },
  created() {
    this.getOrganizeList()
  }
}
</script>
<style scoped lang="scss"></style>

dmp-edge-ai/src/views/system/role/index.vue

@@ -51,7 +51,12 @@
      >
      </el-pagination>
    </div>
    <!--新增/修改弹窗-->
    <base-dialog :show.sync="baseVisible" :roleId="roleId" @refresh="search"> </base-dialog>
    <!--组织权限分配-->
    <organize-drawer :show.sync="organizeVisible" :assignData="assignData"> </organize-drawer>
    <!--菜单分配-->
    <menu-drawer :show.sync="menuVisible" :assignData="assignData"> </menu-drawer>
  </div>
</template>
@@ -62,7 +67,9 @@ export default {
  name: 'Role',
  components: {
    PageHeader,
    BaseDialog: () => import('./components/BaseDialog')
    BaseDialog: () => import('./components/BaseDialog'),
    OrganizeDrawer: () => import('./components/OrganizeDrawer'),
    MenuDrawer: () => import('./components/MenuDrawer')
  },
  data() {
    return {
@@ -83,7 +90,17 @@ export default {
      },
      tableData: [],
      roleId: '',
      baseVisible: false
      // 新增/修改模态窗
      baseVisible: false,
      // 组织权限分配抽屉显示控制
      organizeVisible: false,
      // 菜单分配抽屉显示控制
      menuVisible: false,
      // 分配数据
      assignData: {
        roleId: '',
        roleName: ''
      }
    }
  },
  methods: {
@@ -96,10 +113,18 @@ export default {
      this.baseVisible = true
    },
    assignMenu(row) {
      console.log(row)
      this.assignData = {
        roleId: row.roleId,
        roleName: row.roleName
      }
      this.menuVisible = true
    },
    assignOrganize(row) {
      console.log(row)
      this.assignData = {
        roleId: row.roleId,
        roleName: row.roleName
      }
      this.organizeVisible = true
    },
    deleteItem(row) {
      this.$confirm(`您确定删除该角色吗？`, '提示', {