角色列表添加

2024-01-19 14:08:07 +08:00
parent 343bda8c70
commit 9b75f5b38c
19 changed files with 515 additions and 378 deletions
--- a/src/views/auth/menu/menu.vue
+++ b/src/views/auth/menu/menu.vue
@@ -116,7 +116,7 @@ provide('tableStore', tableStore)

 const addMenu = () => {
    console.log(popupRef)
-    popupRef.value.open('新增菜单')
+    popupRef.value.open('新增菜单',{})
 }
 const currentChange = (newValue: any) => {
    emits('select', newValue.row.id)
--- a/src/views/auth/menu/popupMenu.vue
+++ b/src/views/auth/menu/popupMenu.vue
@@ -1,45 +1,45 @@
 <template>
-    <el-dialog class='cn-operate-dialog' v-model='dialogVisible' :title='title'>
+    <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-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%'
+                        v-model="form.pid"
+                        :options="tableStore.table.data"
+                        :props="cascaderProps"
+                        style="width: 100%"
                    />
                </el-form-item>
-                <el-form-item label='菜单名称'>
-                    <el-input v-model='form.name' placeholder='请输入菜单名称' />
+                <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="图标">
+                    <IconSelector v-model="form.icon" placeholder="请选择图标" />
                </el-form-item>
-                <el-form-item label='菜单路由'>
-                    <el-input v-model='form.path' placeholder='请输入菜单名称' />
+                <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 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 label="排序">
+                    <el-input-number v-model="form.sort" :min="0" />
                </el-form-item>
-                <el-form-item label='菜单描述'>
-                    <el-input v-model='form.remark' :rows='2' type='textarea' placeholder='请输入描述' />
+                <el-form-item label="菜单描述">
+                    <el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" />
                </el-form-item>
            </el-form>
        </el-scrollbar>

        <template #footer>
-            <span class='dialog-footer'>
-                <el-button @click='dialogVisible = false'>取消</el-button>
-                <el-button type='primary' @click='submit'>确认</el-button>
+            <span class="dialog-footer">
+                <el-button @click="dialogVisible = false">取消</el-button>
+                <el-button type="primary" @click="submit">确认</el-button>
            </span>
        </template>
    </el-dialog>
 </template>
-<script lang='ts' setup>
+<script lang="ts" setup>
 import { ref, inject } from 'vue'
 import { reactive } from 'vue'
 import TableStore from '@/utils/tableStore'
@@ -74,20 +74,20 @@ const form: any = reactive({

 const dialogVisible = ref(false)
 const title = ref('新增菜单')
-const open = (text: string, data?: anyObj) => {
+const open = (text: string, data: anyObj) => {
    console.log(data)
    title.value = text
    // 重置表单
    for (let key in form) {
        form[key] = ''
    }
-    form.pid = '0'
+    form.pid = data.pid || '0'
    form.sort = 0
    form.type = 0

-    if (data) {
+    if (data.id) {
        for (let key in form) {
-            form[key] = data[key] || ''
+            form[key] = data[key] ? data[key] : data[key] === 0 ? 0 : ''
        }
        form.path = data.routePath || ''
        form.name = data.title || ''
@@ -108,4 +108,4 @@ const submit = async () => {
 }

 defineExpose({ open })
-</script>
+</script>
--- a/src/views/auth/role/index.vue
+++ b/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>
--- a/src/views/auth/role/popupForm.vue
+++ b/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
 }