角色列表添加

src/views/auth/role/index.vue

@@ -1,11 +1,23 @@
 <template>
-    <div class="default-main">
-        <TableHeader>
-            <template v-slot:operation>
-                <el-button :icon="Plus" type="primary" @click="addMenu">添加</el-button>
-            </template>
-        </TableHeader>
-        <Table ref="tableRef" />
+    <div class="default-main" style="display: flex" :style="{ height: height }">
+        <div style="width: calc(100% - 280px)">
+            <div class="menu-index-header">
+                <div style="flex: 1; font-weight: 700">角色列表</div>
+                <el-button :icon="Plus" type="primary" @click="addRole" class="ml10">新增</el-button>
+            </div>
+            <Table ref="tableRef" @currentChange="currentChange" />
+        </div>
+        <div style="height: 100%; flex: 1">
+            <Tree
+                v-if="menuListId"
+                ref="treeRef"
+                show-checkbox
+                :data="menuTree"
+                :checkStrictly="checkStrictly"
+                @check-change="checkChange"
+            ></Tree>
+            <el-empty style="width: 100%; padding-top: 300px; box-sizing: border-box" description="请选择角色" v-else />
+        </div>
         <popupForm ref="popupRef"></popupForm>
     </div>
 </template>
@@ -15,13 +27,28 @@ import { ref, onMounted, provide } from 'vue'
 import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
+import Tree from '@/components/tree/index.vue'
+import { functionTree } from '@/api/user-boot/function'
+import { getFunctionsByRoleIndex, updateRoleMenu } from '@/api/user-boot/roleFuction'
+import { mainHeight } from '@/utils/layout'
+import { del } from '@/api/user-boot/role'
+import { ElMessage } from 'element-plus'
+import popupForm from './popupForm.vue'
+import { useAdminInfo } from '@/stores/adminInfo'
 
+const adminInfo = useAdminInfo()
 defineOptions({
     name: 'auth/role'
 })
+const height = mainHeight(20).height
+const treeRef = ref()
+const menuTree = ref<treeData[]>([])
 const popupRef = ref()
+const checkStrictly = ref(true)
+const menuListId = ref('')
 const tableStore = new TableStore({
-    url: '/user-boot/role/selectRoleDetail?id=1',
+    showPage: false,
+    url: '/user-boot/role/selectRoleDetail?id=' + adminInfo.$state.userType,
     method: 'POST',
     column: [
         { title: '角色名称', field: 'name', align: 'center' },
@@ -56,16 +83,68 @@ const tableStore = new TableStore({
                         confirmButtonType: 'danger',
                         title: '确定删除该角色吗？'
                     },
-                    click: row => {}
+                    click: row => {
+                        del([row.id]).then(() => {
+                            ElMessage.success('删除成功')
+                            tableStore.index()
+                        })
+                    }
                 }
             ]
         }
     ]
 })
-provide('tableStore', tableStore)
 tableStore.table.params.searchValue = ''
+
+provide('tableStore', tableStore)
+const filterData = (arr: any[]) => {
+    return arr.filter((item: any) => {
+        item.name = item.title
+        if (item.children.length) {
+            item.children = filterData(item.children)
+        }
+        return item.type === 0
+    })
+}
+functionTree().then((res: any) => {
+    menuTree.value = filterData(res.data)
+})
+
+const currentChange = (data: any) => {
+    checkStrictly.value = true
+    menuListId.value = data.row.id
+    getFunctionsByRoleIndex({ id: data.row.id }).then((res: any) => {
+        treeRef.value.treeRef.setCheckedKeys(res.data.map((item: any) => item.id))
+    })
+}
+
+const timeout = ref<NodeJS.Timeout>()
+const checkChange = (data: any) => {
+    if (checkStrictly.value) {
+        checkStrictly.value = false
+        return
+    }
+    if (timeout.value) {
+        clearTimeout(timeout.value)
+    }
+    timeout.value = setTimeout(() => {
+        updateRoleMenu({
+            id: menuListId.value,
+            idList: treeRef.value.treeRef.getCheckedNodes(false, true).map(node => node.id)
+        })
+    }, 1000)
+}
 onMounted(() => {
     tableStore.index()
 })
-const addMenu = () => {}
+const addRole = () => {
+    popupRef.value.open('新增角色')
+}
 </script>
+<style lang="scss">
+.menu-index-header {
+    display: flex;
+    padding: 13px 15px;
+    align-items: center;
+}
+</style>