角色管理模块新增分配权限

src/views/system/role/components/ConfigModal.vue

@@ -0,0 +1,108 @@
+<template>
+  <Modal
+    :options="getModalOptions"
+    :on-positive-click="handleConfirm"
+    :on-negative-click="handleClose"
+    :on-close="handleClose"
+  >
+    <template #Context>
+      <n-tree
+        block-line
+        cascade
+        checkable
+        :data="allTreeData"
+        key-field="id"
+        label-field="title"
+        :default-expand-all="true"
+        :default-checked-keys="checkedTreeData"
+        @update:checked-keys="handleCheckTree"
+      />
+    </template>
+  </Modal>
+</template>
+<script>
+import { defineComponent, computed, onBeforeMount, reactive, toRefs } from 'vue'
+import { getRolePermission, savePermission } from '@/api/system/role/index'
+import { getMenu } from '@/api/system/menu/index'
+import Modal from '@/components/Modal/index.vue'
+import { toTreeData } from '@/utils/handleData.js'
+export default defineComponent({
+  name: 'ConfigModal',
+  components: { Modal },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    row: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  emits: {
+    'update:visible': null,
+    'done': null
+  },
+  setup(props, { emit }) {
+    const data = reactive({
+      menuIds: [],
+      checkedTreeData: [],
+      allTreeData: []
+    })
+    const getModalOptions = computed(() => {
+      return {
+        title: '权限分配',
+        show: props.visible,
+        form: Object.assign(data.form, props.row),
+        negativeText: '取消',
+        positiveText: '确认'
+      }
+    })
+    onBeforeMount(() => {
+      getMenuByRoleId()
+      getMenuAllData()
+    })
+
+    // 获取当前角色的权限菜单列表
+    async function getMenuByRoleId() {
+      const res = await getRolePermission(props.row.id)
+      const checkedArr = res.data
+      if (checkedArr.length) {
+        checkedArr.forEach((item) => {
+          data.checkedTreeData.push(item.id)
+        })
+      }
+      data.menuIds = data.checkedTreeData
+    }
+
+    // 获取全部菜单数据
+    async function getMenuAllData() {
+      const res = await getMenu()
+      data.allTreeData = toTreeData(res.data, 'id', 'pid', 'children')
+    }
+
+    // 勾选节点
+    function handleCheckTree(keys, options) {
+      console.log(keys, options)
+    }
+
+    /* 关闭弹窗 */
+    const handleClose = () => {
+      emit('update:visible', false)
+    }
+
+    return {
+      ...toRefs(data),
+      getModalOptions,
+      handleClose,
+      handleCheckTree
+    }
+  },
+  methods: {
+    // 提交
+    handleConfirm() {
+      console.log(this.checkedTreeData)
+    }
+  }
+})
+</script>

src/views/system/role/components/RoleModal.vue

@@ -146,7 +146,7 @@ export default defineComponent({
               console.log(e)
             })
           } else if (type === 'edit') {
-            editUser(this.form).then(res => {
+            editRole(this.form).then(res => {
               if (res.code === 0) {
                 this.handleClose()
                 this.$emit('done')

src/views/system/role/index.vue

@@ -34,6 +34,13 @@
     :row="rowData"
     @done="handleSearch"
   />
+  <!-- 分配权限 -->
+  <config-modal
+    v-if="configModalShow"
+    v-model:visible="configModalShow"
+    :row="rowData"
+    @done="handleSearch"
+  />
 </template>
 
 <script>
@@ -41,15 +48,16 @@ import headSearch from '@/components/Search/index.vue'
 import dataTable from '@/components/DataTable/index.vue'
 import TableAction from '@/components/DataTable/tools/Action.vue'
 import TableSwitch from '@/components/DataTable/tools/Switch.vue'
-import { getRoleList, deleteRole, addRole, editRole, setRoleStatus } from '@/api/system/role/index'
+import { getRoleList, deleteRole, setRoleStatus } from '@/api/system/role/index'
 import { h, ref, unref, toRefs, reactive } from 'vue'
 import table from './table.js'
 import info from './info.js'
 import RoleModal from './components/RoleModal.vue'
+import ConfigModal from './components/ConfigModal.vue'
 
 export default {
   name: 'MenuPage',
-  components: { headSearch, dataTable, RoleModal },
+  components: { headSearch, dataTable, RoleModal, ConfigModal },
   setup() {
     const data = reactive({
       columns: [
@@ -118,7 +126,6 @@ export default {
       configModalShow: false,
       rowData: {}
     })
-
     // 编辑
     function play(row) {
       data.rowData = row

src/views/system/user/components/UserModal.vue

@@ -204,9 +204,9 @@ export default defineComponent({
     }
 
     return {
+      ...toRefs(data),
       getModalOptions,
       handleClose,
-      ...toRefs(data),
       handleUpload
     }
   },