wenyongda/ZRAdmin-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

重构分配用户页面，面包屑增加切换动画，取消页面过渡动画，防止开发环境白屏，源码地址修改，图标icon菜单改为配置

Browse Source
This commit is contained in:
YUN-PC5\user 2023-09-25 16:46:37 +08:00
parent 66d8daac49
commit 4b55aa8d4c
7 changed files with 206 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/Breadcrumb/index.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<el-breadcrumb class="app-breadcrumb" separator="/"> <el-breadcrumb class="app-breadcrumb" separator="/">
<!-- <transition-group name="breadcrumb"> --> <transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path"> <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
<span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span> <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span>
<span v-else @click.prevent="handleLink(item)" style="cursor: pointer"> <span v-else @click.prevent="handleLink(item)" style="cursor: pointer">
{{ item.meta.title }} {{ item.meta.title }}
</span> </span>
</el-breadcrumb-item> </el-breadcrumb-item>
<!-- </transition-group> --> </transition-group>
</el-breadcrumb> </el-breadcrumb>
</template> </template>
@ -69,4 +69,21 @@ getBreadcrumb()
.mobile .app-breadcrumb.el-breadcrumb { .mobile .app-breadcrumb.el-breadcrumb {
display: none; display: none;
} }
.breadcrumb-move, /* 对移动中的元素应用的过渡 */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
transition: all 0.5s ease;
}
.breadcrumb-enter-from,
.breadcrumb-leave-to {
opacity: 0;
transform: translateX(30px);
}
/* 确保将离开的元素从布局流中删除
以便能够正确地计算移动的动画。 */
.breadcrumb-leave-active {
position: absolute;
}
</style> </style>

14
src/components/Zr/Git/index.vue
View File

@ -6,15 +6,15 @@
<script> <script>
export default { export default {
setup() { setup() {
const url = ref("https://gitee.com/izory/ZrAdminNetCore"); const url = ref('https://gitee.com/wenyongda/ZRAdmin-vue')
function goto() { function goto() {
window.open(url.value); window.open(url.value)
} }
return { return {
goto, goto
}; }
}, }
}; }
</script> </script>

10
src/layout/index.vue
View File

@ -20,11 +20,11 @@
</el-header> </el-header>
<el-main class="app-main"> <el-main class="app-main">
<router-view v-slot="{ Component, route }"> <router-view v-slot="{ Component, route }">
<transition name="fade-transform" mode="out-in"> <!-- <transition name="fade-transform" mode="out-in"> -->
<keep-alive :include="cachedViews"> <keep-alive :include="cachedViews">
<component v-if="!route.meta.link" :is="Component" :key="route.path" /> <component v-if="!route.meta.link" :is="Component" :key="route.path" />
</keep-alive> </keep-alive>
</transition> <!-- </transition> -->
</router-view> </router-view>
<iframe-toggle /> <iframe-toggle />
</el-main> </el-main>

32
src/router/index.js
View File

@ -104,23 +104,23 @@ export const constantRoutes = [
meta: { title: '通知中心', icon: 'Bell' } meta: { title: '通知中心', icon: 'Bell' }
} }
] ]
},
// 不用可删掉
{
path: '',
component: Layout,
hidden: false,
meta: { title: '组件示例', icon: 'icon', noCache: 'fasle' },
children: [
{
path: 'icon',
component: () => import('@/views/components/icons/index'),
//component: () => import('@/views/business/GenDemo'),
name: 'icon',
meta: { title: '图标icon', icon: 'icon1', noCache: 'fasle', titleKey: 'menu.icon' }
}
]
} }
// 不用可删掉
// {
// path: '',
// component: Layout,
// hidden: false,
// meta: { title: '组件示例', icon: 'icon', noCache: 'fasle' },
// children: [
// {
// path: 'icon',
// component: () => import('@/views/components/icons/index'),
// //component: () => import('@/views/business/GenDemo'),
// name: 'icon',
// meta: { title: '图标icon', icon: 'icon1', noCache: 'fasle', titleKey: 'menu.icon' }
// }
// ]
// }
] ]
const router = createRouter({ const router = createRouter({

4
src/views/system/role/index.vue
View File

@ -81,7 +81,7 @@
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" /> <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
<!-- 角色菜单弹框 --> <!-- 角色菜单弹框 -->
<el-dialog title="角色权限分配" v-model="showRoleScope" width="500px"> <el-dialog title="角色权限分配" v-model="showRoleScope" width="500px" draggable>
<el-form :model="form" label-width="80px"> <el-form :model="form" label-width="80px">
<el-form-item label="菜单搜索"> <el-form-item label="菜单搜索">
<el-input placeholder="请输入关键字进行过滤" v-model="searchText"></el-input> <el-input placeholder="请输入关键字进行过滤" v-model="searchText"></el-input>
@ -112,7 +112,7 @@
</el-dialog> </el-dialog>
<!-- 添加或修改角色配置对话框 --> <!-- 添加或修改角色配置对话框 -->
<el-dialog :title="title" v-model="open" width="600px" append-to-body> <el-dialog :title="title" v-model="open" width="600px" append-to-body draggable>
<el-form ref="formRef" :model="form" :rules="rules" label-width="80px"> <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
<el-row> <el-row>
<el-col :lg="12"> <el-col :lg="12">

31
src/views/system/rolefields/index.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<div class="app-container">
<el-card v-loading="cardLoading">
<el-page-header @back="goBack">
<template #content>
<el-row :gutter="10">
<el-col :span="1.5">
<el-button type="default" plain icon="Refresh" @click="handleInit"> 初始化 </el-button>
</el-col>
</el-row>
</template>
</el-page-header>
<el-divider />
</el-card>
</div>
</template>
<script setup lang="ts">
import useTagsViewStore from '@/store/modules/tagsView.js'
const router = useRouter()
const route = useRoute()
const cardLoading = ref(false)
const goBack = () => {
useTagsViewStore().delView(router.currentRoute.value)
router.push('/system/role')
}
console.log(route.query.roleId)
const handleInit = () => {}
</script>
<style scoped></style>

234
src/views/system/roleusers/index.vue
View File

@ -1,127 +1,133 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form :inline="true" @submit.prevent> <el-card v-loading="cardLoading">
<el-form-item label="角色名"> <el-page-header @back="handleClose">
<el-input v-model="roleUserQueryParams.roleName" disabled /> <template #content>
</el-form-item> <el-row :gutter="10">
<el-form-item label="角色字符串"> <el-col :span="1.5">
<el-input v-model="roleUserQueryParams.roleKey" disabled /> <el-button type="primary" plain icon="plus" @click="handleGetUserTable" v-hasPermi="['system:roleusers:add']">
</el-form-item> {{ $t('btn.add') }}
<el-form-item label="用户名"> </el-button>
<el-input </el-col>
v-model="roleUserQueryParams.userName" <el-col :span="1.5">
placeholder="请输入用户名称" <el-button type="danger" plain icon="circle-close" @click="cancelAuthUserAll" v-hasPermi="['system:roleusers:remove']">
clearable {{ $t('btn.multi') }}{{ $t('btn.cancel') }}{{ $t('btn.authorize') }}
prefix-icon="search" </el-button>
@keyup.enter="searchRoleUser" /> </el-col>
</el-form-item> <!-- <el-col :span="1.5">
<el-form-item> <el-button type="warning" plain icon="close" @click="handleClose">{{ $t('btn.close') }}</el-button>
<el-button type="primary" icon="search" @click="searchRoleUser">{{ $t('btn.search') }}</el-button> </el-col> -->
<!-- <el-button icon="refresh" @click="resetQuery">重置</el-button> --> </el-row>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="plus" @click="handleGetUserTable" v-hasPermi="['system:roleusers:add']">
{{ $t('btn.add') }}
</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="circle-close" @click="cancelAuthUserAll" v-hasPermi="['system:roleusers:remove']">
{{ $t('btn.multi') }}{{ $t('btn.cancel') }}{{ $t('btn.authorize') }}
</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="close" @click="handleClose">{{ $t('btn.close') }}</el-button>
</el-col>
</el-row>
<el-table
ref="roleUserTableRef"
v-loading="loading"
:data="roleUserList"
@selection-change="handleCancelSelectionChange"
row-key="userId"
stripe
border>
<el-table-column type="selection" width="55" align="center" />
<el-table-column prop="userId" align="center" label="用户Id" width="150" />
<el-table-column prop="userName" align="center" label="用户名" width="150" />
<el-table-column prop="nickName" align="center" label="用户昵称" width="150" />
<el-table-column prop="status" align="center" label="账号状态" width="80">
<template #default="scope">
<dict-tag :options="statusOptions" :value="scope.row.status" />
</template> </template>
</el-table-column> </el-page-header>
<el-table-column prop="remark" :show-overflow-tooltip="true" align="center" label="备注" /> <el-divider />
<el-table-column align="center" label="操作">
<template #default="scope">
<el-button
text
size="small"
icon="el-icon-circle-close"
@click="handleCancelPerm(scope.row)"
v-if="scope.row.userId != 1"
v-hasPermi="['system:roleusers:del']">
{{ $t('btn.cancel') }}{{ $t('btn.authorize') }}
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-model:total="roleUserCount"
v-model:page="roleUserQueryParams.pageNum"
v-model:limit="roleUserQueryParams.pageSize"
@pagination="getRoleUser" />
<!-- 添加或修改菜单对话框 -->
<el-dialog title="添加用户" v-model="open" append-to-body @close="cancel">
<el-form :inline="true" @submit.prevent> <el-form :inline="true" @submit.prevent>
<el-form-item> <el-form-item label="角色名">
<el-input v-model="roleUserQueryParams.roleName" disabled />
</el-form-item>
<el-form-item label="角色字符串">
<el-input v-model="roleUserQueryParams.roleKey" disabled />
</el-form-item>
<el-form-item label="用户名">
<el-input <el-input
v-model="userQueryParams.userName" v-model="roleUserQueryParams.userName"
placeholder="请输入用户名称" placeholder="请输入用户名称"
clearable clearable
prefix-icon="search" prefix-icon="search"
@keyup.enter="handleSearchRoleUser" /> @keyup.enter="searchRoleUser" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="search" @click="searchRoleUser">{{ $t('btn.search') }}</el-button>
<!-- <el-button icon="refresh" @click="resetQuery">重置</el-button> -->
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-row>
<el-col> <el-table
<el-table ref="roleUserTableRef"
ref="userTable" v-loading="loading"
v-loading="loadingUser" :data="roleUserList"
:data="dataUserTable" @selection-change="handleCancelSelectionChange"
@selection-change="handleSelectionChange" row-key="userId"
row-key="userId" stripe
stripe border>
border <el-table-column type="selection" width="55" align="center" />
:height="tableHeight * 0.5"> <el-table-column prop="userId" align="center" label="用户Id" width="150" />
<el-table-column type="selection" width="55" align="center" /> <el-table-column prop="userName" align="center" label="用户名" width="150" />
<el-table-column prop="userId" align="center" label="用户编号" width="150" /> <el-table-column prop="nickName" align="center" label="用户昵称" width="150" />
<el-table-column prop="userName" align="center" label="用户名称" width="150" /> <el-table-column prop="status" align="center" label="账号状态" width="80">
<el-table-column prop="nickName" align="center" label="用户昵称" width="150" /> <template #default="scope">
<el-table-column prop="status" align="center" label="用户状态"> <dict-tag :options="statusOptions" :value="scope.row.status" />
<template #default="scope"> </template>
<dict-tag :options="statusOptions" :value="scope.row.status" /> </el-table-column>
</template> <el-table-column prop="remark" :show-overflow-tooltip="true" align="center" label="备注" />
</el-table-column> <el-table-column align="center" label="操作">
</el-table> <template #default="scope">
<pagination <el-button
:total="dataUserCount" text
v-model:page="userQueryParams.pageNum" size="small"
v-model:limit="userQueryParams.pageSize" icon="el-icon-circle-close"
@pagination="handleGetUserTable" /> @click="handleCancelPerm(scope.row)"
</el-col> v-if="scope.row.userId != 1"
</el-row> v-hasPermi="['system:roleusers:del']">
<template #footer> {{ $t('btn.cancel') }}{{ $t('btn.authorize') }}
<div class="dialog-footer"> </el-button>
<el-button text @click="open = false">{{ $t('btn.cancel') }}</el-button> </template>
<el-button type="primary" @click="handleSubmit">{{ $t('btn.submit') }}</el-button> </el-table-column>
</div> </el-table>
</template> <pagination
</el-dialog> v-model:total="roleUserCount"
v-model:page="roleUserQueryParams.pageNum"
v-model:limit="roleUserQueryParams.pageSize"
@pagination="getRoleUser" />
<!-- 添加或修改菜单对话框 -->
<el-dialog title="添加用户" v-model="open" append-to-body @close="cancel">
<el-form :inline="true" @submit.prevent>
<el-form-item>
<el-input
v-model="userQueryParams.userName"
placeholder="请输入用户名称"
clearable
prefix-icon="search"
@keyup.enter="handleSearchRoleUser" />
</el-form-item>
</el-form>
<el-row>
<el-col>
<el-table
ref="userTable"
v-loading="loadingUser"
:data="dataUserTable"
@selection-change="handleSelectionChange"
row-key="userId"
stripe
border
:height="tableHeight * 0.5">
<el-table-column type="selection" width="55" align="center" />
<el-table-column prop="userId" align="center" label="用户编号" width="150" />
<el-table-column prop="userName" align="center" label="用户名称" width="150" />
<el-table-column prop="nickName" align="center" label="用户昵称" width="150" />
<el-table-column prop="status" align="center" label="用户状态">
<template #default="scope">
<dict-tag :options="statusOptions" :value="scope.row.status" />
</template>
</el-table-column>
</el-table>
<pagination
:total="dataUserCount"
v-model:page="userQueryParams.pageNum"
v-model:limit="userQueryParams.pageSize"
@pagination="handleGetUserTable" />
</el-col>
</el-row>
<template #footer>
<div class="dialog-footer">
<el-button text @click="open = false">{{ $t('btn.cancel') }}</el-button>
<el-button type="primary" @click="handleSubmit">{{ $t('btn.submit') }}</el-button>
</div>
</template>
</el-dialog>
</el-card>
</div> </div>
</template> </template>
<script setup name="roleUsers"> <script setup name="roleUsers">