pun97twox
/
uni-blog
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

添加用户管理模块

Browse Source
master
liuyx 2 years ago
parent 4410b7114f
commit 26589a58f3
10 changed files with 287 additions and 11 deletions
Show Stats Download Patch File Download Diff File

4
admin/src/assets/scss/element.scss
Unescape View File

@ -15,4 +15,8 @@
.el-main {
margin-top: 15px;
}
.el-card {
height: calc(100vh - 200px);
}

4
admin/src/assets/scss/mine.scss
Unescape View File

@ -1,3 +1,7 @@
.m-content {
padding: 10px;
}
.m-form-item {
width: 400px;
}

3
admin/src/layout/components/Menu.vue
Unescape View File

@ -41,7 +41,8 @@
<el-icon><UserFilled /></el-icon>
<span>用户管理</span>
</template>
<el-menu-item index="/users">用户列表</el-menu-item>
<el-menu-item index="/user/list">用户列表</el-menu-item>
<el-menu-item index="/user/account">账号设置</el-menu-item>
</el-sub-menu>
</el-menu>
</template>

9
admin/src/router/index.js
Unescape View File

@ -43,9 +43,14 @@ const routes = [
component: () => import('@/views/about/About.vue')
},
{
path: '/users',
path: '/user/list',
name: '用户列表',
component: () => import('@/views/user/User.vue')
component: () => import('@/views/user/UserList.vue')
},
{
path: '/user/account',
name: '账号设置',
component: () => import('@/views/user/Account.vue')
},
{
path: '/website',

2
admin/src/views/article/Article.vue
Unescape View File

@ -16,7 +16,7 @@
<el-form-item>
<v-md-editor
v-model="blog.article"
height="calc(100vh - 270px)"
height="calc(100vh - 290px)"
placeholder="在vuepress主题中, 您可以使用tip功能噢~"
/>
</el-form-item>

40
admin/src/views/category/Category.vue
Unescape View File

@ -0,0 +1,40 @@
<!--
* @Author: liuyx 1517482303@qq.com
* @Date: 2022-11-15 10:36:14
* @LastEditors: liuyx 1517482303@qq.com
* @LastEditTime: 2022-11-19 20:01:27
* @FilePath: \admin\src\views\category\Category.vue
* @Description: 分类管理
*
* Copyright (c) 2022 by liuyx 1517482303@qq.com, All Rights Reserved.
-->
<template>
<el-card>
<div class="operation-container">
<el-button type="primary"
><el-icon><Plus /></el-icon>新增</el-button
>
</div>
<el-table :data="articleList" style="width: 100%">
<!-- 多选 -->
<el-table-column type="selection" width="55" />
<el-table-column prop="cover" label="分类名称" />
<el-table-column prop="title" label="文章量" />
<el-table-column prop="createTime" label="创建时间" />
<el-table-column label="操作">
<template #default="scope">
<el-button type="primary" @click="handleUpdate(scope.$index, scope.row)">修改</el-button>
<el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</template>
<script setup></script>
<style lang="scss" scoped>
.operation-container {
margin: 10px 0 20px 0;
}
</style>

40
admin/src/views/tag/Tag.vue
Unescape View File

@ -0,0 +1,40 @@
<!--
* @Author: liuyx 1517482303@qq.com
* @Date: 2022-11-15 10:35:54
* @LastEditors: liuyx 1517482303@qq.com
* @LastEditTime: 2022-11-21 17:46:38
* @FilePath: \admin\src\views\tag\Tag.vue
* @Description: 标签管理
*
* Copyright (c) 2022 by liuyx 1517482303@qq.com, All Rights Reserved.
-->
<template>
<el-card>
<div class="operation-container">
<el-button type="primary"
><el-icon><Plus /></el-icon>新增</el-button
>
</div>
<el-table :data="articleList" style="width: 100%">
<!-- 多选 -->
<el-table-column type="selection" width="55" />
<el-table-column prop="cover" label="标签名称" />
<el-table-column prop="title" label="文章量" />
<el-table-column prop="createTime" label="创建时间" />
<el-table-column label="操作">
<template #default="scope">
<el-button type="primary" @click="handleUpdate(scope.$index, scope.row)">修改</el-button>
<el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</template>
<script setup></script>
<style lang="scss" scoped>
.operation-container {
margin: 10px 0 20px 0;
}
</style>

127
admin/src/views/user/Account.vue
Unescape View File

@ -0,0 +1,127 @@
<template>
<el-card>
<!-- 选择对应的账号 -->
<el-select v-model="account.value" placeholder="请选择类型" size="large" @change="selectChange">
<el-option v-for="op in options" :key="op.id" :value="op.id" :label="op.value" />
</el-select>
<el-tabs type="border-card">
<!-- 基本信息修改 -->
<el-tab-pane label="修改基本信息">
<el-form label-width="120px" label-position="left">
<el-form-item label="选择头像">
<el-upload
:show-file-list="false"
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
list-type="picture"
class="avatar-uploader"
>
<img v-if="accountInfo.avatar" :src="accountInfo.avatar" class="avatar" />
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>
</el-form-item>
<el-form-item label="名称">
<el-input v-model="accountInfo.name" class="m-form-item" />
</el-form-item>
<el-form-item>
<el-button color="#626aef" @click="updateBasicInfo">修 改</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
<!-- 密码修改 -->
<el-tab-pane label="修改密码">
<el-form label-width="120px" label-position="left">
<el-form-item label="旧密码">
<el-input v-model="passwordInfo.oldPwd" type="password" class="m-form-item" />
</el-form-item>
<el-form-item label="新密码">
<el-input v-model="passwordInfo.newPwd" type="password" class="m-form-item" />
</el-form-item>
<el-form-item label="确认密码">
<el-input v-model="passwordInfo.againPwd" type="password" class="m-form-item" />
</el-form-item>
<el-form-item>
<el-button color="#626aef" @click="updatePassword">修 改</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</el-card>
</template>
<script setup>
import { ref } from 'vue'
const account = ref({
id: 0,
value: '管理员'
})
const options = [
{
id: 0,
value: '管理员'
},
{
id: 1,
value: '测试'
}
]
const accountInfo = ref({
avatar: '',
name: ''
})
const passwordInfo = ref({
oldPwd: '',
newPwd: '',
againPwd: ''
})
const selectChange = (val) => {
account.value.id = val
account.value.value = val === 0 ? '管理员' : '测试'
}
const updateBasicInfo = () => {
console.log({
id: account.value.id,
avatar: accountInfo.value.avatar,
name: accountInfo.value.name
})
}
const updatePassword = () => {
console.log({
id: account.value.id,
oldPwd: passwordInfo.value.oldPwd,
newPwd: passwordInfo.value.newPwd,
againPwd: passwordInfo.value.againPwd
})
}
</script>
<style lang="scss" scoped>
.el-select {
margin-bottom: 20px;
}
</style>
<style>
.avatar-uploader .el-upload {
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(--el-transition-duration-fast);
margin-right: 20px;
}
.avatar-uploader .el-upload:hover {
border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 128px;
height: 128px;
text-align: center;
}
</style>

7
admin/src/views/user/User.vue
Unescape View File

@ -1,7 +0,0 @@
<template>
<div></div>
</template>
<script setup></script>
<style lang="scss" scoped></style>

62
admin/src/views/user/UserList.vue
Unescape View File

@ -0,0 +1,62 @@
<template>
<el-card>
<el-table :data="userList" border style="width: 100%">
<el-table-column prop="avatar" label="头像" align="center">
<template #default="scope">
<el-image
class="user-avatar"
:src="
scope.row.avatar
? scope.row.avatar
: 'https://static.talkxj.com/articles/c5cc2b2561bd0e3060a500198a4ad37d.png'
"
/>
</template>
</el-table-column>
<el-table-column prop="name" label="昵称" align="center" />
<el-table-column prop="loginMethod" label="登录方式" align="center" />
<el-table-column prop="role" label="用户角色" align="center" />
<el-table-column prop="lastDate" label="上次登录时间" align="center" />
</el-table>
</el-card>
</template>
<script setup>
const userList = [
{
avatar: 'https://typora-lyx.oss-cn-guangzhou.aliyuncs.com/typora/avatar.jpg',
name: 'Liuyx',
loginMethod: '邮箱',
role: '用户',
lastDate: '2022-11-22'
},
{
avatar: 'https://typora-lyx.oss-cn-guangzhou.aliyuncs.com/typora/avatar.jpg',
name: 'Liuyx',
loginMethod: '邮箱',
role: '用户',
lastDate: '2022-11-22'
},
{
avatar: 'https://typora-lyx.oss-cn-guangzhou.aliyuncs.com/typora/avatar.jpg',
name: 'Liuyx',
loginMethod: '邮箱',
role: '用户',
lastDate: '2022-11-22'
},
{
avatar: 'https://typora-lyx.oss-cn-guangzhou.aliyuncs.com/typora/avatar.jpg',
name: 'Liuyx',
loginMethod: '邮箱',
role: '用户',
lastDate: '2022-11-22'
}
]
</script>
<style lang="scss" scoped>
.user-avatar {
width: 50px;
height: 50px;
}
</style>
Write Preview
Loading…
Cancel
Save