Skip to content

S
sun
Commit d4e96189 authored by Davve's avatar Davve
Browse files
Options

完成账号中心前端编写

parent 69fac6b5
Hide whitespace changes
Inline Side-by-side
Showing with 515 additions and 2 deletions
vu/src/api/account.js 0 → 100644
View file @ d4e96189
import request from '@/utils/request'
export function fetchList(query) {
return request({
url: '/api/account/list',
method: 'get',
params: query
})
}
vu/src/router/index.js
View file @ d4e96189
...@@ -14,6 +14,7 @@ import TopicRouter from './modules/topic' ...@@ -14,6 +14,7 @@ import TopicRouter from './modules/topic'
import StarRouter from './modules/star' import StarRouter from './modules/star'
import GroupRouter from './modules/group' import GroupRouter from './modules/group'
import UserRouter from './modules/user' import UserRouter from './modules/user'
import AccountRouter from './modules/account'
/** note: Submenu only appear when children.length>=1 /** note: Submenu only appear when children.length>=1
* detail see https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html * detail see https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
...@@ -90,6 +91,7 @@ export const asyncRouterMap = [ ...@@ -90,6 +91,7 @@ export const asyncRouterMap = [
/** When your routing table is too long, you can split it into small modules**/ /** When your routing table is too long, you can split it into small modules**/
componentsRouter, componentsRouter,
AccountRouter,
UserRouter, UserRouter,
GroupRouter, GroupRouter,
TopicRouter, TopicRouter,
......
vu/src/router/modules/account.js 0 → 100644
View file @ d4e96189
import Layout from '@/views/layout/Layout'
const AccountRouter = {
path: '/account',
component: Layout,
redirect: '/account/list',
name: 'Account',
meta: {
title: '账号管理',
icon: 'example'
},
children: [
{
path: 'list',
component: () => import('@/views/account/list'),
name: 'AccountList',
meta: {title: '账户列表', icon: 'list'}
},
{
path: 'create',
component: () => import('@/views/account/create'),
name: 'CreateAccount',
meta: {title: '创建账户', icon: 'edit'}
},
{
path: 'edit/:id(\\d+)',
component: () => import('@/views/account/edit'),
name: 'EditAccount',
meta: {title: '编辑账户', noCache: true},
hidden: true
}
]
}
export default AccountRouter
vu/src/views/account/components/AccountDetail.vue 0 → 100644
View file @ d4e96189
<template>
<div class="createPost-container">
<el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
<sticky :class-name="'sub-navbar '+postForm.status">
<el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">发布
</el-button>
<el-button v-loading="loading" type="warning" @click="draftForm">草稿</el-button>
</sticky>
<div class="createPost-main-container">
<el-row>
<el-col :span="24">
<el-form-item style="margin-bottom: 40px;" prop="title">
<MDinput v-model="postForm.title" :maxlength="100" name="name" required>
标题
</MDinput>
</el-form-item>
<div class="postInfo-container">
<el-row>
<el-col :span="8">
<el-form-item label-width="45px" label="作者:" class="postInfo-container-item">
<el-select v-model="postForm.author" :remote-method="getRemoteUserList" filterable remote placeholder="搜索用户">
<el-option v-for="(item,index) in userListOptions" :key="item+index" :label="item" :value="item"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label-width="80px" label="发布时间:" class="postInfo-container-item">
<el-date-picker v-model="postForm.display_time" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label-width="60px" label="重要性:" class="postInfo-container-item">
<el-rate
v-model="postForm.importance"
:max="3"
:colors="['#99A9BF', '#F7BA2A', '#FF9900']"
:low-threshold="1"
:high-threshold="3"
style="margin-top:8px;"/>
</el-form-item>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
<el-form-item style="margin-bottom: 40px;" label-width="45px" label="摘要:">
<el-input :rows="1" v-model="postForm.content_short" type="textarea" class="article-textarea" autosize placeholder="请输入内容"/>
<span v-show="contentShortLength" class="word-counter">{{ contentShortLength }}字</span>
</el-form-item>
<div class="editor-container">
<Tinymce ref="editor" :height="400" v-model="postForm.content" />
</div>
<div style="margin-bottom: 20px;">
<Upload v-model="postForm.image_uri" />
</div>
</div>
</el-form>
</div>
</template>
<script>
import Tinymce from '@/components/Tinymce'
import Upload from '@/components/Upload/singleImage3'
import MDinput from '@/components/MDinput'
import Sticky from '@/components/Sticky' // 粘性header组件
import { validateURL } from '@/utils/validate'
import { fetchArticle } from '@/api/article'
import { userSearch } from '@/api/remoteSearch'
const defaultForm = {
status: 'draft',
title: '', // 文章题目
content: '', // 文章内容
content_short: '', // 文章摘要
source_uri: '', // 文章外链
image_uri: '', // 文章图片
display_time: undefined, // 前台展示时间
id: undefined,
platforms: ['a-platform'],
comment_disabled: false,
importance: 0
}
export default {
name: 'GroupDetail',
components: { Tinymce, MDinput, Upload, Sticky},
props: {
isEdit: {
type: Boolean,
default: false
}
},
data() {
const validateRequire = (rule, value, callback) => {
if (value === '') {
this.$message({
message: rule.field + '为必传项',
type: 'error'
})
callback(new Error(rule.field + '为必传项'))
} else {
callback()
}
}
const validateSourceUri = (rule, value, callback) => {
if (value) {
if (validateURL(value)) {
callback()
} else {
this.$message({
message: '外链url填写不正确',
type: 'error'
})
callback(new Error('外链url填写不正确'))
}
} else {
callback()
}
}
return {
postForm: Object.assign({}, defaultForm),
loading: false,
userListOptions: [],
rules: {
image_uri: [{ validator: validateRequire }],
title: [{ validator: validateRequire }],
content: [{ validator: validateRequire }],
source_uri: [{ validator: validateSourceUri, trigger: 'blur' }]
},
tempRoute: {}
}
},
computed: {
contentShortLength() {
return this.postForm.content_short.length
},
lang() {
return this.$store.getters.language
}
},
created() {
if (this.isEdit) {
const id = this.$route.params && this.$route.params.id
this.fetchData(id)
} else {
this.postForm = Object.assign({}, defaultForm)
}
// Why need to make a copy of this.$route here?
// Because if you enter this page and quickly switch tag, may be in the execution of the setTagsViewTitle function, this.$route is no longer pointing to the current page
// https://github.com/PanJiaChen/vue-element-admin/issues/1221
this.tempRoute = Object.assign({}, this.$route)
},
methods: {
fetchData(id) {
fetchArticle(id).then(response => {
this.postForm = response.data
// Just for test
this.postForm.title += ` Article Id:${this.postForm.id}`
this.postForm.content_short += ` Article Id:${this.postForm.id}`
// Set tagsview title
this.setTagsViewTitle()
}).catch(err => {
console.log(err)
})
},
setTagsViewTitle() {
const title = this.lang === 'zh' ? '编辑文章' : 'Edit Article'
const route = Object.assign({}, this.tempRoute, { title: `${title}-${this.postForm.id}` })
this.$store.dispatch('updateVisitedView', route)
},
submitForm() {
this.postForm.display_time = parseInt(this.display_time / 1000)
console.log(this.postForm)
this.$refs.postForm.validate(valid => {
if (valid) {
this.loading = true
this.$notify({
title: '成功',
message: '发布文章成功',
type: 'success',
duration: 2000
})
this.postForm.status = 'published'
this.loading = false
} else {
console.log('error submit!!')
return false
}
})
},
draftForm() {
if (this.postForm.content.length === 0 || this.postForm.title.length === 0) {
this.$message({
message: '请填写必要的标题和内容',
type: 'warning'
})
return
}
this.$message({
message: '保存成功',
type: 'success',
showClose: true,
duration: 1000
})
this.postForm.status = 'draft'
},
getRemoteUserList(query) {
userSearch(query).then(response => {
if (!response.data.items) return
this.userListOptions = response.data.items.map(v => v.name)
})
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.createPost-container {
position: relative;
.createPost-main-container {
padding: 40px 45px 20px 50px;
.postInfo-container {
position: relative;
@include clearfix;
margin-bottom: 10px;
.postInfo-container-item {
float: left;
}
}
.editor-container {
min-height: 500px;
margin: 0 0 30px;
.editor-upload-btn-container {
text-align: right;
margin-right: 10px;
.editor-upload-btn {
display: inline-block;
}
}
}
}
.word-counter {
width: 40px;
position: absolute;
right: -10px;
top: 0px;
}
}
</style>
vu/src/views/account/create.vue 0 → 100644
View file @ d4e96189
<template>
<account-detail :is-edit="false"/>
</template>
<script>
import AccountDetail from './components/AccountDetail'
export default {
name: 'CreateAccount',
components: { AccountDetail }
}
</script>
vu/src/views/account/edit.vue 0 → 100644
View file @ d4e96189
<template>
<account-detail :is-edit="true"/>
</template>
<script>
import AccountDetail from './components/AccountDetail'
export default {
name: 'EditAccount',
components: { AccountDetail }
}
</script>
vu/src/views/account/list.vue 0 → 100644
View file @ d4e96189
<template>
<div class="app-container">
<div class="filter-container">
<el-input :placeholder="'搜素'" v-model="listQuery.filter.value" style="width: 180px;" class="filter-item" @keyup.enter.native="handleFilter"/>
<el-select v-model="listQuery.filter.key" :placeholder="'搜索字段'" clearable class="filter-item" style="width: 110px">
<el-option v-for="item in SearchTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
</el-select>
<el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">创建</el-button>
<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleOfflineOrOnline('offline')">下线</el-button>
<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleOfflineOrOnline('online')">上线</el-button>
</div>
<el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center"></el-table-column>
<el-table-column align="center" label="账号ID" width="180">
<template slot-scope="scope">
<router-link :to="'/pick/edit/'+scope.row.id" class="link-type">
<span>{{ scope.row.id }}</span>
</router-link>
</template>
</el-table-column>
<el-table-column width="307px" align="center" label="昵称">
<template slot-scope="scope">
<span>{{ scope.row.username }}</span>
</template>
</el-table-column>
<el-table-column width="280px" align="center" label="密码">
<template slot-scope="scope">
<span>{{ scope.row.phone }}</span>
</template>
</el-table-column>
<el-table-column width="380px" align="center" label="邮箱">
<template slot-scope="scope">
<span>{{ scope.row.email }}</span>
</template>
</el-table-column>
</el-table>
<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" style="margin-left: 150px;" @pagination="getList" />
</div>
</template>
<script>
import { fetchList, OffLineOrOnLine } from '@/api/user'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import waves from '@/directive/waves'
export default {
name: 'UserList',
components: { Pagination },
filters: {
isOnlineFilter(status) {
const statusMap = {
1: 'success',
0: 'info',
}
return statusMap[status]
},
genderFilter(status) {
const statusMap = {
'男': 'success',
'女': 'info',
'全部': 'danger'
}
return statusMap[status]
},
},
directives: { waves },
data() {
return {
list: null,
total: 0,
listLoading: true,
multipleSelection: [],
del_list: [],
listQuery: {
page: 1,
limit: 10,
filter: {
value: '',
key: '',
is_online: '',
is_recommend: '',
},
},
BooleanTypeOptions: [
{'key': 1, 'display_name': '是'},
{'key': 0, 'display_name': '否'}
],
ReBooleanTypeOptions: [
{'key': 1, 'display_name': '是'},
{'key': 0, 'display_name': '否'}
],
IdentifyTypeOptions: [
{'key': 1, 'display_name': '组长'},
{'key': 2, 'display_name': '管理员'},
{'key': 3, 'display_name': '长老'},
{'key': 4, 'display_name': '普通群员'},
],
UserTypeOptions: [
{'key': 0, 'display_name': '普通用户'},
{'key': 1, 'display_name': '马甲用户'}
],
SearchTypeOptions:[
{'key': 'nickname', 'display_name': '昵称'},
]
}
},
created() {
this.getList()
},
methods: {
getList() {
this.listLoading = true
fetchList(this.listQuery).then(response => {
this.list = response.data.data.data
this.total = response.data.data.total
this.listLoading = false
})
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
handleSizeChange(val) {
this.listQuery.limit = val
this.getList()
},
handleCurrentChange(val) {
this.listQuery.page = val
this.getList()
},
handleFilter() {
this.listQuery.page = 1
this.getList()
},
handleCreate() {
this.$router.push('/pick/create')
},
handleOfflineOrOnline(val){
const length = this.multipleSelection.length;
let str = '';
this.del_list = this.del_list.concat(this.multipleSelection);
for (let i = 0; i < length; i++) {
if (val === 'offline'){
this.multipleSelection[i].is_online = 0
}else{
this.multipleSelection[i].is_online = 1
}
str += this.multipleSelection[i].id + ' ';
}
OffLineOrOnLine({type:val, ids:str}).then(response => {
this.multipleSelection = [];
response.data.data.message
this.$message.success(response.data.data.message);
})
},
}
}
</script>
<style scoped>
.edit-input {
padding-right: 100px;
}
.cancel-btn {
position: absolute;
right: 15px;
top: 10px;
}
</style>
vu/src/views/layout/components/Navbar.vue
View file @ d4e96189
...@@ -28,15 +28,16 @@ ...@@ -28,15 +28,16 @@
<i class="el-icon-caret-bottom"/> <i class="el-icon-caret-bottom"/>
</div> </div>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<router-link to="/"> <router-link to="/account/list">
<el-dropdown-item> <el-dropdown-item>
账号中心 账号中心
</el-dropdown-item> </el-dropdown-item>
</router-link> </router-link>
<a target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/"> <router-link :to="'/account/edit/'+1" class="link-type">
<el-dropdown-item> <el-dropdown-item>
修改密码 修改密码
</el-dropdown-item> </el-dropdown-item>
</router-link>
</a> </a>
<el-dropdown-item divided> <el-dropdown-item divided>
<span style="display:block;" @click="logout">退出账户</span> <span style="display:block;" @click="logout">退出账户</span>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment