页面菜单配置

ui/dasadmin/src/api/backend/index.ts

@@ -137,3 +137,12 @@ export function allRoleQuery(params: object = {}) {
     })
 }
 
+// 获取绑定菜单
+export function menuTree(params: object = {}) {
+    return createAxios({
+        url: '/api/menus/tree',
+        method: 'POST',
+        data: params,
+    })
+}
+

ui/dasadmin/src/layouts/backend/index.vue

@@ -25,6 +25,7 @@ import { BEFORE_RESIZE_LAYOUT } from '/@/stores/constant/cacheKey'
 import { isEmpty } from 'lodash-es'
 import { setNavTabsWidth } from '/@/utils/layout'
 import { id } from 'element-plus/es/locales.mjs'
+import { menuTree } from '/@/api/backend'
 
 defineOptions({
     components: { Default, Classic, Streamline, Double },
@@ -350,7 +351,54 @@ const menu = [
     },
 ]
 
+function transformNode(node: any) {
+    return {
+        id: Number(node.id),
+        pid: node.parentMenuId,
+        type: node.parentMenuId == 0 ? 'menu_dir' : 'menu',
+        title: node.menuName,
+        name: node.menuName.replace(/\s+/g, ''),
+        path: node.parentMenuId == 0 ? '测试菜单' : node.menuName,
+        icon: node.menuIcon,
+        menu_type: node.parentMenuId == 0 ? null : 'tab',
+        component: node.parentMenuId == 0 ? '' : `/src/views/backend/测试菜单${node.funParam.replace(/\s+/g, '')}/index.vue`,
+        extend: 'none',
+        children: node.children.map(transformNode),
+    }
+}
 const init = () => {
+    menuTree().then((res: any) => {
+        console.log('🚀 ~ menusLoginTree ~ res:', res)
+        const menu = transformNode(res.data)
+        console.log('🚀 ~ menusLoginTree ~ menu:', menu)
+        handleAdminRoute(menu)
+        if (route.params.to) {
+            const lastRoute = JSON.parse(route.params.to as string)
+            if (lastRoute.path != adminBaseRoutePath) {
+                let query = !isEmpty(lastRoute.query) ? lastRoute.query : {}
+                routePush({ path: lastRoute.path, query: query })
+                return
+            }
+        }
+
+        // 跳转到第一个菜单
+        let firstRoute = getFirstRoute(navTabs.state.tabsViewRoutes)
+        if (firstRoute) routePush(firstRoute.path)
+    })
+    // handleAdminRoute(menu)
+    // if (route.params.to) {
+    //     const lastRoute = JSON.parse(route.params.to as string)
+    //     if (lastRoute.path != adminBaseRoutePath) {
+    //         let query = !isEmpty(lastRoute.query) ? lastRoute.query : {}
+    //         routePush({ path: lastRoute.path, query: query })
+    //         return
+    //     }
+    // }
+
+    // // 跳转到第一个菜单
+    // let firstRoute = getFirstRoute(navTabs.state.tabsViewRoutes)
+    // if (firstRoute) routePush(firstRoute.path)
+
     /**
      * 后台初始化请求，获取站点配置，动态路由等信息
      */
@@ -366,21 +414,9 @@ const init = () => {
     // }
 
     // if (res.data) {
-    handleAdminRoute(menu)
 
     // 预跳转到上次路径
-    if (route.params.to) {
-        const lastRoute = JSON.parse(route.params.to as string)
-        if (lastRoute.path != adminBaseRoutePath) {
-            let query = !isEmpty(lastRoute.query) ? lastRoute.query : {}
-            routePush({ path: lastRoute.path, query: query })
-            return
-        }
-    }
 
-    // 跳转到第一个菜单
-    let firstRoute = getFirstRoute(navTabs.state.tabsViewRoutes)
-    if (firstRoute) routePush(firstRoute.path)
     // }
     // })
 }

ui/dasadmin/src/views/backend/测试菜单/userManagement/index.vue

@@ -0,0 +1,424 @@
+<template>
+    <!-- 用户 -->
+    <div style="margin-left: 25px">
+        <el-row :gutter="20">
+            <el-col :span="6" style="padding: 2.2% 1.4%; border-right: 1px solid #eaebed">
+                <el-input v-model="input1" size="large" placeholder="搜索" :suffix-icon="Search" style="width: 100%" />
+                <el-tree style="max-width: 600px; margin-top: 2.2%" :data="userData" :props="defaultProps" @node-click="handleNodeClick" />
+            </el-col>
+            <el-col :span="18" style="padding: 2.2% 1.4%">
+                <el-container>
+                    <el-header style="display: flex; justify-content: space-between">
+                        <div>
+                            <el-input v-model="input2" size="large" placeholder="根据账户中文名查询" style="width: 220px; margin-right: 10px" />
+                            <el-button type="primary" size="large" :icon="Search" @click="userFromQuery">查询</el-button>
+                        </div>
+                        <el-button type="primary" size="large" :icon="CirclePlusFilled" @click="addUserFromData">新增</el-button>
+                    </el-header>
+                    <el-main>
+                        <el-table
+                            ref="multipleTableRef"
+                            :data="tableData"
+                            style="width: 100%"
+                            :header-cell-style="{ color: '#333333', background: '#EFF0F1' }"
+                            @selection-change="handleSelectionChange"
+                        >
+                            <el-table-column type="selection" width="180" />
+                            <el-table-column property="account" label="账户名称" width="200" />
+
+                            <el-table-column property="userName" label="账户中文名" width="200" />
+                            <!-- <el-table-column property="address" label="是否禁用" /> -->
+                            <!-- <el-table-column property="updatedTime" label="令牌超时" /> -->
+                            <el-table-column property="address" label="操作">
+                                <template #default="scope">
+                                    <span style="color: #0064aa; cursor: pointer" @click="viewUsers(scope)">查看 </span>
+                                    <span style="color: #0064aa"> | </span>
+                                    <span style="color: #0064aa; cursor: pointer" @click="userFromDelete(scope)"> 删除 </span>
+                                    <!-- <span style="color: #0064aa"> | </span>
+                                    <span style="color: #0064aa"> 门户 </span>
+                                    <span style="color: #0064aa"> | </span>
+                                    <span style="color: #0064aa"> 密码</span> -->
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </el-main>
+                    <!-- <el-footer>
+                        <div style="display: flex; justify-content: right">
+                            <el-pagination
+                                v-model:current-page="currentPage4"
+                                v-model:page-size="pageSize4"
+                                :page-sizes="[10, 15]"
+                                layout="total, sizes, prev, pager, next, jumper"
+                                :total="400"
+                                @size-change="handleSizeChange"
+                                @current-change="handleCurrentChange"
+                            />
+                        </div>
+                    </el-footer> -->
+                </el-container>
+            </el-col>
+        </el-row>
+        <!-- 用户新增页面 -->
+        <el-dialog v-model="visibleParam" title="新增账户" width="500" :before-close="handleCloseParam">
+            <el-form
+                :inline="true"
+                :model="formUserAdd"
+                style="padding: 24px 40px; font-size: 14px; line-height: 1.5; word-wrap: break-word; font-size: 20px"
+            >
+                <el-form-item label="账户名称:" prop="account">
+                    <el-input v-model="formUserAdd.account" placeholder="" clearable />
+                </el-form-item>
+
+                <el-form-item label="密码:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">
+                    <el-input v-model="formUserAdd.password" placeholder="" type="password" show-password clearable />
+                </el-form-item>
+                <el-form-item label="职员名称:" prop="userName">
+                    <el-input v-model="formUserAdd.userName" placeholder="" clearable />
+                </el-form-item>
+                <el-form-item label="职员邮箱:" prop="email">
+                    <el-input v-model="formUserAdd.email" placeholder="" clearable />
+                </el-form-item>
+                <el-form-item label="职员联系电话:" prop="phone">
+                    <el-input v-model="formUserAdd.phone" placeholder="" clearable />
+                </el-form-item>
+                <!-- <el-form-item label="所属机构ID:" prop="orgId">
+                    <el-input v-model="formUserAdd.orgId" placeholder="" clearable />
+                </el-form-item> -->
+                <el-form-item label="角色id集合:" prop="roleList">
+                    <el-select v-model="formUserAdd.roleList" placeholder="选择菜单权限" multiple style="width: 240px">
+                        <el-option v-for="item in allPermissionData" :key="item.index" :label="item.roleName" :value="item.id" />
+                    </el-select>
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="visibleParam = false"> 取消 </el-button>
+                    <el-button type="primary" @click="addOnSubmit">提交</el-button>
+                </div>
+            </template>
+        </el-dialog>
+        <!-- 用户修改页面 -->
+        <el-dialog v-model="visibleParamUpData" title="查看账户" width="500" :before-close="handleCloseParamUp">
+            <el-form
+                :inline="true"
+                :model="formUserUpData"
+                style="padding: 24px 40px; font-size: 14px; line-height: 1.5; word-wrap: break-word; font-size: 20px"
+            >
+                <el-form-item label="账户名称:" prop="account">
+                    <el-input v-model="formUserUpData.account" placeholder="" clearable />
+                </el-form-item>
+
+                <el-form-item label="密码:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" prop="password">
+                    <el-input v-model="formUserUpData.password" placeholder="" type="password" show-password clearable />
+                </el-form-item>
+                <el-form-item label="职员名称:" prop="userName">
+                    <el-input v-model="formUserUpData.userName" placeholder="" clearable />
+                </el-form-item>
+                <el-form-item label="职员邮箱:" prop="email">
+                    <el-input v-model="formUserUpData.email" placeholder="" clearable />
+                </el-form-item>
+                <el-form-item label="职员联系电话:" prop="phone">
+                    <el-input v-model="formUserUpData.phone" placeholder="" clearable />
+                </el-form-item>
+                <!-- <el-form-item label="所属机构ID:" prop="orgId">
+                    <el-input v-model="formUserUpData.orgId" placeholder="" clearable />
+                </el-form-item> -->
+                <el-form-item label="角色id集合:" prop="roleList">
+                    <el-select v-model="formUserUpData.roleList" placeholder="选择菜单权限" multiple style="width: 240px">
+                        <el-option v-for="item in allPermissionData" :key="item.index" :label="item.roleName" :value="item.id" />
+                    </el-select>
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="visibleParamUpData = false"> 取消 </el-button>
+                    <el-button type="primary" @click="upDataOnSubmit">提交</el-button>
+                </div>
+            </template>
+        </el-dialog>
+        <!-- 删除确认弹框 -->
+        <el-dialog v-model="userDeleteDialog" title="操作提示" width="500" :before-close="handleCloseDelete">
+            <span>确定是否删除?</span>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="userDeleteDialog = false">取消</el-button>
+                    <el-button type="primary" @click="userDeleteDialog1"> 确定 </el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { Search, CirclePlusFilled } from '@element-plus/icons-vue'
+import { userQuery, userUpdate, userDelete, userAdd, userList, allRoleQuery } from '/@/api/backend'
+import { ElTable, ElMessage } from 'element-plus'
+import { useAdminInfo } from '/@/stores/adminInfo'
+import { fa } from 'element-plus/es/locales.mjs'
+import { values } from 'lodash-es'
+const adminInfo = useAdminInfo()
+const input1 = ref('')
+const input2 = ref('')
+interface Tree {
+    label: string
+    children?: Tree[]
+    id: string
+}
+
+// 用户左边树
+const treeQuery = reactive({
+    parentOrgId: adminInfo.orgid,
+    recursive: true,
+})
+
+const userData = ref()
+
+const getTree = () => {
+    console.log(treeQuery, 'treeQuery')
+
+    userList(treeQuery).then((res) => {
+        console.log(res, '树')
+        userData.value = res.data
+    })
+}
+
+onMounted(() => {
+    getTree()
+    allPermission()
+})
+
+const formQuery = reactive({
+    orgId: '',
+    recursive: false,
+})
+
+const treeId = ref()
+
+const handleNodeClick = (data: Tree) => {
+    console.log(data.id, 'data')
+
+    treeId.value = data.id
+    formQuery.orgId = data.id
+    RyUserQuery(formQuery)
+}
+
+const defaultProps = {
+    children: 'children',
+    label: 'name',
+}
+
+// 用户查询
+interface userQuery {
+    // rows?: any[]
+}
+const tableData = ref()
+const RyUserQuery = (data: any) => {
+    userQuery(data).then((res) => {
+        if (res.code == 200) {
+            console.log(res.rows, 'res111')
+            tableData.value = res.rows
+        } else {
+            ElMessage.error({
+                message: res.msg,
+                type: 'error',
+            })
+        }
+    })
+}
+
+interface User {
+    date: string
+    name: string
+    address: string
+}
+
+const multipleTableRef = ref<InstanceType<typeof ElTable>>()
+const multipleSelection = ref<User[]>([])
+
+const handleSelectionChange = (val: User[]) => {
+    multipleSelection.value = val
+}
+
+// 用户搜索
+const formQuery1 = reactive({
+    userName: '',
+    orgId: '',
+})
+const userFromQuery = () => {
+    formQuery1.userName = input2.value
+    formQuery1.orgId = treeId.value
+    RyUserQuery(formQuery1)
+}
+
+// 用户增加
+const visibleParam = ref(false)
+interface RuleUser {
+    account: string
+    password: string
+    userName: string
+    email: string
+    phone: string
+    orgId: string
+    roleList: number[]
+}
+const formUserAdd = reactive({
+    account: '',
+    password: '',
+    userName: '',
+    email: '',
+    phone: '',
+    orgId: '',
+    roleList: [],
+})
+
+const addUserFromData = () => {
+    visibleParam.value = true
+    formUserAdd.account = ''
+    formUserAdd.password = ''
+    formUserAdd.userName = ''
+    formUserAdd.email = ''
+    formUserAdd.phone = ''
+    formUserAdd.orgId = ''
+    formUserAdd.roleList = []
+}
+
+const handleCloseParam = (data: any) => {
+    visibleParam.value = false
+    console.log(data)
+}
+
+const addOnSubmit = () => {
+    visibleParam.value = false
+    formUserAdd.orgId = treeId.value
+    console.log(formUserAdd, treeId.value, 'formUserAdd')
+
+    userAdd(formUserAdd).then((res) => {
+        if (res.code == 200) {
+            console.log(res, '新增')
+            formQuery.orgId = treeId.value
+            RyUserQuery(formQuery)
+        } else {
+            ElMessage.error({
+                message: res.msg,
+                type: 'error',
+            })
+        }
+    })
+}
+
+// 页面修改
+const visibleParamUpData = ref(false)
+
+const formUserUpData = reactive({ id: '', account: '', password: '', userName: '', email: '', phone: '', orgId: '', roleList: '' })
+const viewUsers = (data: any) => {
+    console.log(data.row.roleList, '页面修改数据')
+    visibleParamUpData.value = true
+    formUserUpData.id = data.row.id
+    formUserUpData.account = data.row.account
+    formUserUpData.password = data.row.password
+    formUserUpData.userName = data.row.userName
+    formUserUpData.email = data.row.email
+    formUserUpData.phone = data.row.phone
+    formUserUpData.orgId = data.row.orgId
+    // formUserUpData.roleList = data.row.roleList
+}
+const upDataOnSubmit = () => {
+    console.log(formUserUpData, formUserUpData.roleList, 'formUserUpData')
+
+    userUpdate(formUserUpData).then((res) => {
+        if (res.code == 200) {
+            console.log(res, '修改成功')
+
+            RyUserQuery(formQuery)
+        } else {
+            ElMessage.error({
+                message: res.msg,
+                type: 'error',
+            })
+        }
+    })
+    visibleParamUpData.value = false
+}
+
+const handleCloseParamUp = () => {
+    visibleParamUpData.value = false
+}
+
+// 页面删除
+const userListDelete = reactive({
+    id: '',
+})
+const userFromDelete = (data: any) => {
+    userDeleteDialog.value = true
+    userListDelete.id = data.row.id
+    userDelete(userListDelete).then((res) => {
+        if (res.code == 200) {
+            setTimeout(() => {
+                ElMessage({
+                    message: res.msg,
+                    type: 'success',
+                })
+            }, 1000)
+        } else {
+            ElMessage.error({
+                message: res.msg,
+                type: 'error',
+            })
+        }
+    })
+}
+
+const userDeleteDialog = ref(false)
+
+const handleCloseDelete = () => {
+    userDeleteDialog.value = false
+}
+
+const userDeleteDialog1 = () => {
+    userDeleteDialog.value = false
+    formQuery.orgId = treeId.value
+    console.log(formQuery, 'formQuery')
+    RyUserQuery(formQuery)
+}
+
+// 用户权限
+const allPermissionData = ref()
+// 用户权限
+const roleName = {
+    roleName: '',
+}
+const allPermission = () => {
+    allRoleQuery(roleName).then((res) => {
+        console.log(res.rows, 'resdata')
+        allPermissionData.value = res.rows
+        console.log(allPermissionData.value, '89898989111')
+    })
+}
+
+// 分页
+const currentPage4 = ref(4)
+const pageSize4 = ref(100)
+
+const handleSizeChange = (val: number) => {
+    console.log(`${val} items per page`)
+}
+const handleCurrentChange = (val: number) => {
+    console.log(`current page: ${val}`)
+}
+</script>
+
+<style scoped lang="scss">
+.el-row {
+    margin-bottom: 20px;
+    width: 99%;
+    height: 823px;
+}
+.el-row:last-child {
+    margin-bottom: 0;
+}
+.el-col {
+    // border-radius: 4px;
+    background-color: #fff;
+}
+</style>