角色列表添加

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>

src/views/auth/role/popupForm.vue

@@ -1,31 +1,14 @@
 <template>
     <el-dialog class="cn-operate-dialog" v-model="dialogVisible" :title="title">
         <el-scrollbar>
-            <el-form :inline="false" :model="form" label-width="120px">
-                <el-form-item label="上级菜单">
-                    <el-cascader
-                        v-model="form.pid"
-                        :options="tableStore.table.data"
-                        :props="cascaderProps"
-                        style="width: 100%"
-                    />
-                </el-form-item>
-                <el-form-item label="菜单名称">
+            <el-form :inline="false" :model="form" label-width="120px" :rules="rules">
+                <el-form-item label="角色名称">
                     <el-input v-model="form.name" placeholder="请输入菜单名称" />
                 </el-form-item>
-                <el-form-item label="图标">
-                    <IconSelector v-model="form.icon" placeholder="请选择图标" />
+                <el-form-item label="角色编码">
+                    <el-input v-model="form.code" placeholder="请输入菜单名称" />
                 </el-form-item>
-                <el-form-item label="菜单路由">
-                    <el-input v-model="form.path" placeholder="请输入菜单名称" />
-                </el-form-item>
-                <el-form-item label="组件路径">
-                    <el-input v-model="form.routeName" placeholder="请输入组件路径，如/src/views/dashboard/index.vue" />
-                </el-form-item>
-                <el-form-item label="排序">
-                    <el-input-number v-model="form.sort" :min="0" />
-                </el-form-item>
-                <el-form-item label="菜单描述">
+                <el-form-item label="角色描述">
                     <el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" />
                 </el-form-item>
             </el-form>
@@ -43,33 +26,48 @@
 import { ref, inject } from 'vue'
 import { reactive } from 'vue'
 import TableStore from '@/utils/tableStore'
-import IconSelector from '@/components/baInput/components/iconSelector.vue'
+import { ElMessage } from 'element-plus'
+import { add, update } from '@/api/user-boot/role'
+import { useAdminInfo } from '@/stores/adminInfo'
+
+const adminInfo = useAdminInfo()
 const tableStore = inject('tableStore') as TableStore
-const cascaderProps = {
-    label: 'title',
-    value: 'id'
-}
 // do not use same name with ref
 const form = reactive({
-    code: 'menu',
-    icon: '设备月保_设备日保',
-    id: '88c61dfd02fbdab02e3bf0753d487444',
-    name: '系统配置',
-    path: '/app/setting',
-    pid: 'f517484e241c2fdd7f11a9c3fcaaa109',
-    remark: '系统配置',
-    routeName: null,
-    sort: 0,
+    code: '',
+    name: '',
+    remark: '',
+    id: '',
     type: 0
 })
-
+const rules = {
+    name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
+    code: [{ required: true, message: '角色编码不能为空', trigger: 'blur' }]
+}
 const dialogVisible = ref(false)
 const title = ref('新增菜单')
 const open = (text: string, data?: anyObj) => {
     title.value = text
     dialogVisible.value = true
+    if (data) {
+        for (let key in form) {
+            form[key] = data[key]
+        }
+    } else {
+        for (let key in form) {
+            form[key] = ''
+        }
+    }
 }
-const submit = () => {
+const submit = async () => {
+    if (form.id) {
+        await update(form)
+    } else {
+        form.type = adminInfo.$state.userType + 1
+        await add(form)
+    }
+    ElMessage.success('保存成功')
+    tableStore.index()
     dialogVisible.value = false
 }