forked from AkkomaGang/admin-fe
refine code && rm code
This commit is contained in:
Pan
parent
cd47007f91
commit
e65dfd38da
6 changed files with 104 additions and 935 deletions
|
|
@ -56,7 +56,6 @@ const Table = resolve => require(['../views/example/table'], resolve);
|
|||
const DragTable = resolve => require(['../views/example/dragTable'], resolve);
|
||||
const InlineEditTable = resolve => require(['../views/example/inlineEditTable'], resolve);
|
||||
const Form1 = resolve => require(['../views/example/form1'], resolve);
|
||||
// const Form2 = resolve => require(['../views/example/form2'], resolve);
|
||||
|
||||
/* permission */
|
||||
const Permission = resolve => require(['../views/permission/index'], resolve);
|
||||
|
|
@ -64,6 +63,13 @@ const Permission = resolve => require(['../views/permission/index'], resolve);
|
|||
|
||||
Vue.use(Router);
|
||||
|
||||
/**
|
||||
* icon :the icon show in the sidebar
|
||||
* hidden: if hiddenLtrue will not show in the sidebar
|
||||
* redirect :if redirect:noredirect will not redirct in the levelbar
|
||||
* noDropdown : if noDropdown:true will not has submenu
|
||||
* meta: { role: ['admin'] } will control the page role
|
||||
*/
|
||||
export default new Router({
|
||||
// mode: 'history', //后端支持可开
|
||||
scrollBehavior: () => ({ y: 0 }),
|
||||
|
|
@ -73,23 +79,24 @@ export default new Router({
|
|||
{ path: '/sendpwd', component: sendPWD, hidden: true },
|
||||
{ path: '/reset', component: reset, hidden: true },
|
||||
{ path: '/404', component: Err404, hidden: true },
|
||||
{ path: '/401', component: Err401, hidden: true }, {
|
||||
{ path: '/401', component: Err401, hidden: true },
|
||||
{
|
||||
path: '/',
|
||||
component: Layout,
|
||||
redirect: '/dashboard',
|
||||
name: '首页',
|
||||
hidden: true,
|
||||
children: [{ path: 'dashboard', component: dashboard }]
|
||||
}, {
|
||||
},
|
||||
{
|
||||
path: '/introduction',
|
||||
component: Layout,
|
||||
redirect: '/introduction/index',
|
||||
icon: 'xinrenzhinan',
|
||||
noDropdown: true,
|
||||
children: [
|
||||
{ path: 'index', component: Introduction, name: '简述' }
|
||||
]
|
||||
}, {
|
||||
children: [{ path: 'index', component: Introduction, name: '简述' }]
|
||||
},
|
||||
{
|
||||
path: '/permission',
|
||||
component: Layout,
|
||||
redirect: '/permission/index',
|
||||
|
|
@ -97,10 +104,9 @@ export default new Router({
|
|||
icon: 'quanxian',
|
||||
meta: { role: ['admin'] },
|
||||
noDropdown: true,
|
||||
children: [
|
||||
{ path: 'index', component: Permission, name: '权限测试页', meta: { role: ['admin'] } }
|
||||
]
|
||||
}, {
|
||||
children: [{ path: 'index', component: Permission, name: '权限测试页', meta: { role: ['admin'] } }]
|
||||
},
|
||||
{
|
||||
path: '/components',
|
||||
component: Layout,
|
||||
redirect: '/components/index',
|
||||
|
|
@ -119,7 +125,8 @@ export default new Router({
|
|||
{ path: 'countto', component: CountTo, name: 'CountTo' },
|
||||
{ path: 'mixin', component: Mixin, name: '小组件' }
|
||||
]
|
||||
}, {
|
||||
},
|
||||
{
|
||||
path: '/charts',
|
||||
component: Layout,
|
||||
redirect: '/charts/index',
|
||||
|
|
@ -132,7 +139,8 @@ export default new Router({
|
|||
{ path: 'line', component: LineMarker, name: '折线图' },
|
||||
{ path: 'mixchart', component: MixChart, name: '混合图表' }
|
||||
]
|
||||
}, {
|
||||
},
|
||||
{
|
||||
path: '/errorpage',
|
||||
component: Layout,
|
||||
redirect: 'noredirect',
|
||||
|
|
@ -142,37 +150,35 @@ export default new Router({
|
|||
{ path: '401', component: Err401, name: '401' },
|
||||
{ path: '404', component: Err404, name: '404' }
|
||||
]
|
||||
}, {
|
||||
},
|
||||
{
|
||||
path: '/errlog',
|
||||
component: Layout,
|
||||
redirect: 'noredirect',
|
||||
name: 'errlog',
|
||||
icon: 'bug',
|
||||
noDropdown: true,
|
||||
children: [
|
||||
{ path: 'log', component: ErrorLog, name: '错误日志' }
|
||||
]
|
||||
}, {
|
||||
children: [{ path: 'log', component: ErrorLog, name: '错误日志' }]
|
||||
},
|
||||
{
|
||||
path: '/excel',
|
||||
component: Layout,
|
||||
redirect: 'noredirect',
|
||||
name: 'excel',
|
||||
icon: 'EXCEL',
|
||||
noDropdown: true,
|
||||
children: [
|
||||
{ path: 'download', component: ExcelDownload, name: '导出excel' }
|
||||
]
|
||||
}, {
|
||||
children: [{ path: 'download', component: ExcelDownload, name: '导出excel' }]
|
||||
},
|
||||
{
|
||||
path: '/theme',
|
||||
component: Layout,
|
||||
redirect: 'noredirect',
|
||||
name: 'theme',
|
||||
icon: 'theme',
|
||||
noDropdown: true,
|
||||
children: [
|
||||
{ path: 'index', component: Theme, name: '换肤' }
|
||||
]
|
||||
}, {
|
||||
children: [{ path: 'index', component: Theme, name: '换肤' }]
|
||||
},
|
||||
{
|
||||
path: '/example',
|
||||
component: Layout,
|
||||
redirect: 'noredirect',
|
||||
|
|
@ -184,22 +190,9 @@ export default new Router({
|
|||
{ path: 'inline_edit_table', component: InlineEditTable, name: 'table内编辑' },
|
||||
{ path: 'table', component: Table, name: '综合table' },
|
||||
{ path: 'form1', component: Form1, name: '综合form1' }
|
||||
// { path: 'form2', component: Form2, name: '综合form2' }
|
||||
]
|
||||
},
|
||||
// {
|
||||
// path: '/admin',
|
||||
// component: Layout,
|
||||
// redirect: 'noredirect',
|
||||
// name: '后台管理',
|
||||
// icon: 'geren1',
|
||||
// children: [
|
||||
// { path: 'createuser', component: AdminCreateUser, name: '管理员', meta: { role: ['admin'] } },
|
||||
// { path: 'list', component: UsersList, name: '后台用户列表', meta: { role: ['super_editor', 'product', 'author_assistant'] } },
|
||||
// { path: 'qicklyCreate', component: QuicklyCreateUser, name: '一键创建账户', meta: { role: ['super_editor', 'gold_editor', 'weex_editor', 'wscn_editor', 'author_assistant', 'product'] } },
|
||||
// { path: 'profile', component: UserProfile, name: '个人' }
|
||||
// ]
|
||||
// },
|
||||
|
||||
{ path: '*', redirect: '/404', hidden: true }
|
||||
]
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,87 +0,0 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<h1 class="page-heading">
|
||||
创建后台用户
|
||||
</h1>
|
||||
<el-form ref="createForm" :rules="createRules" label-position="left" style='width:80%' :model="form" label-width="100px">
|
||||
<el-form-item label="用户邮箱" prop="email">
|
||||
<el-input v-model="form.email" placeholder="公司邮箱"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="权限选择" >
|
||||
<el-select style="width: 100%" v-model="form.role" multiple placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in roleList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :loading="loading" @click.native.prevent="onSubmit">立即创建</el-button>
|
||||
<el-button>
|
||||
<router-link class="normal_link" to="/index">
|
||||
取消
|
||||
</router-link>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { createNewUser, getRoleList } from 'api/adminUser';
|
||||
import { isWscnEmail } from 'utils/validate';
|
||||
|
||||
export default{
|
||||
name: 'createUser',
|
||||
data() {
|
||||
const validateEmail = (rule, value, callback) => {
|
||||
if (!isWscnEmail(value)) {
|
||||
callback(new Error('邮箱错误'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
roleList: [],
|
||||
loading: false,
|
||||
form: {
|
||||
email: '',
|
||||
role: ''
|
||||
},
|
||||
createRules: {
|
||||
email: [
|
||||
{ required: true, message: '请输入邮箱', trigger: 'blur' },
|
||||
{ validator: validateEmail }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
this.$refs.createForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
const data = {
|
||||
email: this.form.email,
|
||||
roles: this.form.role
|
||||
};
|
||||
createNewUser(data).then(() => {
|
||||
this.$message.success('创建成功');
|
||||
});
|
||||
} else {
|
||||
this.$message.error('error submit!!');
|
||||
}
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
created() {
|
||||
getRoleList().then(response => {
|
||||
const roleMap = response.data.role_map;
|
||||
const keyArr = Object.keys(roleMap);
|
||||
this.roleList = keyArr.map(v => ({ value: v, label: roleMap[v] }));
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,404 +0,0 @@
|
|||
<template>
|
||||
<div class="profile-container clearfix">
|
||||
<div style="position: relative;margin-left: 30px;">
|
||||
<PanThumb :image="avatar"> 你的权限:
|
||||
<span class="pan-info-roles" v-for="item in roles">{{item}}</span>
|
||||
</PanThumb>
|
||||
<el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;"
|
||||
@click="handleImagecropper">修改头像
|
||||
</el-button>
|
||||
</div>
|
||||
<!--popover-->
|
||||
<el-popover
|
||||
ref="popoverWX"
|
||||
placement="top"
|
||||
width="160"
|
||||
trigger="click"
|
||||
v-model="popoverVisibleWX">
|
||||
<p>你确定要解绑么?</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="popoverVisibleWX = false">取消</el-button>
|
||||
<el-button type="primary" size="mini" @click="handleUnbind('wechat')">确定</el-button>
|
||||
</div>
|
||||
</el-popover>
|
||||
<el-popover
|
||||
ref="popoverQQ"
|
||||
placement="top"
|
||||
width="160"
|
||||
trigger="click"
|
||||
v-model="popoverVisibleQQ">
|
||||
<p>你确定要解绑么?</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="popoverVisibleQQ = false">取消</el-button>
|
||||
<el-button type="primary" size="mini" @click="handleUnbind('tencent')">确定</el-button>
|
||||
</div>
|
||||
</el-popover>
|
||||
<!--popover End-->
|
||||
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span style="line-height: 36px;">个人资料</span>
|
||||
</div>
|
||||
<div class="box-item">
|
||||
<span class="field-label">昵称</span>
|
||||
<div class="field-content">
|
||||
{{name}}
|
||||
<el-button class="edit-btn" @click="handleEditName" type="primary" icon="edit"
|
||||
size="small"></el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box-item">
|
||||
<span class="field-label">简介</span>
|
||||
<div class="field-content">
|
||||
{{introduction.length==0?'未填写':introduction}}
|
||||
<el-button class="edit-btn" @click="handleIntroductionName" type="primary" icon="edit"
|
||||
size="small"></el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box-item" style="margin-bottom: 10px;">
|
||||
<span class="field-label">密码</span>
|
||||
<div class="field-content">
|
||||
<el-button type="primary" @click="resetPSWdialogVisible=true">修改密码</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box-item" style="margin-top: 5px;">
|
||||
<div class="field-content">
|
||||
<span class="wx-svg-container"><wscn-icon-svg icon-class="weixin" class="icon"/></span>
|
||||
<el-button class="unbind-btn" v-popover:popoverWX type="danger">解绑微信</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box-item">
|
||||
<div class="field-content">
|
||||
<span class="qq-svg-container"><wscn-icon-svg icon-class="QQ" class="icon"/></span>
|
||||
<el-button class="unbind-btn" v-popover:popoverQQ style="padding: 10px 18px" type="danger">
|
||||
解绑QQ
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span style="line-height: 36px;">偏好设置</span>
|
||||
<el-button @click="updateSetting" style="float: right;margin-top: 5px;" size="small" type="success">
|
||||
更新偏好
|
||||
</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<div class="box-item">
|
||||
<span class="field-label">文章平台默认项选择:</span>
|
||||
<el-checkbox-group v-model="articlePlatform">
|
||||
<el-checkbox label="wscn-platform">见闻</el-checkbox>
|
||||
<el-checkbox label="gold-platform">黄金头条</el-checkbox>
|
||||
<el-checkbox label="weex-platform">WEEX</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
<span class="field-label">使用自定义主题:</span>
|
||||
<el-switch
|
||||
v-model="theme"
|
||||
on-text=""
|
||||
off-text="">
|
||||
</el-switch>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
|
||||
<ImageCropper field="img"
|
||||
:width="300"
|
||||
:height="300"
|
||||
url="/upload"
|
||||
@crop-upload-success="cropSuccess"
|
||||
:key="imagecropperKey"
|
||||
v-show="imagecropperShow"></ImageCropper>
|
||||
|
||||
<el-dialog title="昵称" v-model="nameDialogFormVisible">
|
||||
<el-form label-position="left" label-width="50px">
|
||||
<el-form-item label="昵称" style="width: 300px;">
|
||||
<input class="input" ref="nameInput" :value="name" autocomplete="off" :maxlength=10>
|
||||
<span>(最多填写十个字符)</span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="nameDialogFormVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="setName">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog title="简介" v-model="introductionDialogFormVisible">
|
||||
<el-form label-position="left" label-width="50px">
|
||||
<el-form-item label="简介" style="width: 500px;">
|
||||
<textarea :row=3 class="textarea" ref="introductionInput" :value="introduction"></textarea>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="introductionDialogFormVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="setIntroduction">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog title="提示" v-model="resetPSWdialogVisible" size="tiny">
|
||||
<span>你确定要重设密码么? <strong>     ( 注:重设密码将会登出,请注意!!! )</strong></span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="resetPSWdialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="resetPSW">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { updateInfo, unbind, updateSetting } from 'api/adminUser';
|
||||
import ImageCropper from 'components/ImageCropper';
|
||||
import PanThumb from 'components/PanThumb';
|
||||
import { toggleClass } from 'utils'
|
||||
|
||||
export default{
|
||||
components: { ImageCropper, PanThumb },
|
||||
data() {
|
||||
return {
|
||||
nameDialogFormVisible: false,
|
||||
introductionDialogFormVisible: false,
|
||||
resetPSWdialogVisible: false,
|
||||
popoverVisibleQQ: false,
|
||||
popoverVisibleWX: false,
|
||||
imagecropperShow: false,
|
||||
imagecropperKey: 0,
|
||||
articlePlatform: [],
|
||||
theme: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.setting.articlePlatform) {
|
||||
this.articlePlatform = this.setting.articlePlatform
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'name',
|
||||
'avatar',
|
||||
'email',
|
||||
'introduction',
|
||||
'roles',
|
||||
'uid',
|
||||
'setting'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
theme() {
|
||||
toggleClass(document.body, 'custom-theme')
|
||||
// this.$store.dispatch('setTheme', value);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetPSW() {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
this.$router.push({ path: '/sendpwd' })
|
||||
});
|
||||
},
|
||||
toggleResetDialog(state) {
|
||||
this.resetDialogVisible = state;
|
||||
},
|
||||
handleEditName() {
|
||||
this.nameDialogFormVisible = true;
|
||||
},
|
||||
handleIntroductionName() {
|
||||
this.introductionDialogFormVisible = true;
|
||||
},
|
||||
setName() {
|
||||
const displayName = this.$refs.nameInput.value;
|
||||
const data = {
|
||||
display_name: displayName,
|
||||
uid: this.uid
|
||||
};
|
||||
updateInfo(data).then(() => {
|
||||
this.$store.commit('SET_NAME', displayName);
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '昵称修改成功',
|
||||
type: 'success'
|
||||
});
|
||||
});
|
||||
this.nameDialogFormVisible = false;
|
||||
},
|
||||
setIntroduction() {
|
||||
const introduction = this.$refs.introductionInput.value;
|
||||
const data = {
|
||||
introduction,
|
||||
uid: this.uid
|
||||
};
|
||||
updateInfo(data).then(() => {
|
||||
this.$store.commit('SET_INTRODUCTION', introduction);
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '简介修改成功',
|
||||
type: 'success'
|
||||
});
|
||||
});
|
||||
this.introductionDialogFormVisible = false;
|
||||
},
|
||||
handleUnbind(unbindType) {
|
||||
const data = {
|
||||
unbind_type: unbindType
|
||||
};
|
||||
unbind(data).then(() => {
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '解绑成功,即将登出',
|
||||
type: 'success'
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
this.$router.push({ path: '/login' })
|
||||
});
|
||||
}, 3000)
|
||||
});
|
||||
|
||||
this.popoverVisibleQQ = false;
|
||||
this.popoverVisibleWX = false;
|
||||
},
|
||||
handleImagecropper() {
|
||||
this.imagecropperShow = true;
|
||||
this.imagecropperKey = this.imagecropperKey + 1;
|
||||
},
|
||||
cropSuccess(url) {
|
||||
this.imagecropperShow = false;
|
||||
const data = {
|
||||
image: url,
|
||||
uid: this.uid
|
||||
};
|
||||
updateInfo(data).then(() => {
|
||||
this.$store.commit('SET_AVATAR', url);
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '头像修改成功',
|
||||
type: 'success'
|
||||
});
|
||||
});
|
||||
},
|
||||
updateSetting() {
|
||||
const obj = Object.assign(this.setting, { articlePlatform: this.articlePlatform });
|
||||
updateSetting({ setting: JSON.stringify(obj) }).then(() => {
|
||||
this.$store.commit('SET_SETTING', this.setting);
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '更新偏好成功',
|
||||
type: 'success'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.input {
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #bfcbd9;
|
||||
color: #1f2d3d;
|
||||
display: block;
|
||||
font-size: inherit;
|
||||
height: 36px;
|
||||
line-height: 1;
|
||||
padding: 3px 10px;
|
||||
transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
height: 90px;
|
||||
display: block;
|
||||
resize: vertical;
|
||||
padding: 5px 7px;
|
||||
line-height: 1.5;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
color: #1f2d3d;
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border: 1px solid #bfcbd9;
|
||||
border-radius: 4px;
|
||||
transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.wx-svg-container, .qq-svg-container {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
padding-top: 1px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 55px;
|
||||
}
|
||||
|
||||
.wx-svg-container {
|
||||
background-color: #8dc349;
|
||||
}
|
||||
|
||||
.qq-svg-container {
|
||||
background-color: #6BA2D6;
|
||||
}
|
||||
|
||||
.unbind-btn {
|
||||
position: absolute;
|
||||
right: -60px;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
padding: 20px;
|
||||
.box-card {
|
||||
width: 400px;
|
||||
margin: 30px;
|
||||
float: left;
|
||||
.field-label {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 36px;
|
||||
color: #333;
|
||||
padding-right: 30px;
|
||||
}
|
||||
.box-item {
|
||||
.field-content {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
.edit-btn {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: -50px;
|
||||
top: -5px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.edit-btn {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pan-info-roles {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,92 +0,0 @@
|
|||
<template>
|
||||
<div class="app-container quicklyCreateUser-container">
|
||||
<el-form ref="form" :rules="rules" :model="form" label-position="left" label-width="60px">
|
||||
<el-card style=" margin-top: 50px;width: 600px;">
|
||||
<div slot="header" class="clearfix">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="20">
|
||||
<el-form-item label="昵称" prop="display_name">
|
||||
<el-input v-model="form.display_name"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-button type="success" @click="onSubmit">立即创建</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-button style="height: 150px;width: 150px;" @click="handleImagecropper" type="primary">上传头像
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<img style=" float:right;width: 150px;height: 150px;border-radius: 50%;margin-left: 50px;"
|
||||
:src="form.image">
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-form>
|
||||
|
||||
|
||||
<el-tooltip style="position: absolute;margin-left: 750px;top: 380px" placement="top">
|
||||
<el-button>Tooltip</el-button>
|
||||
<div slot="content">昵称为必填项<br/><br/>一键创建只能创建后台虚拟账号<br/><br/>没有任何实际操作能力</div>
|
||||
</el-tooltip>
|
||||
|
||||
<ImageCropper field="img"
|
||||
:width="300"
|
||||
:height="300"
|
||||
url="/upload"
|
||||
@crop-upload-success="cropSuccess"
|
||||
:key="imagecropperKey"
|
||||
v-show="imagecropperShow">
|
||||
|
||||
</ImageCropper>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { createNewUser } from 'api/adminUser';
|
||||
import ImageCropper from 'components/ImageCropper';
|
||||
|
||||
export default{
|
||||
name: 'quicklyCreateUser',
|
||||
components: { ImageCropper },
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
display_name: '',
|
||||
image: '',
|
||||
role: ['virtual_editor']
|
||||
},
|
||||
imagecropperShow: false,
|
||||
imagecropperKey: 0,
|
||||
rules: {
|
||||
display_name: [{ required: true, message: '昵称必填', trigger: 'blur' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
createNewUser(this.form).then(() => {
|
||||
this.$message.success('创建成功')
|
||||
});
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleImagecropper() {
|
||||
this.imagecropperShow = true;
|
||||
this.imagecropperKey = this.imagecropperKey + 1;
|
||||
},
|
||||
cropSuccess(url) {
|
||||
this.imagecropperShow = false;
|
||||
this.form.image = url
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -1,241 +0,0 @@
|
|||
<template>
|
||||
<div class="app-container adminUsers-list-container">
|
||||
<div class="filter-container">
|
||||
<el-input @keyup.enter.native="handleFilter" style="width:135px;" class="filter-item" placeholder="ID" type="number" v-model="listQuery.uid">
|
||||
</el-input>
|
||||
|
||||
<el-input style="width:135px;" class="filter-item" placeholder="Name" @keyup.enter.native="handleFilter" v-model="listQuery.display_name">
|
||||
</el-input>
|
||||
|
||||
<el-input class="filter-item" style="width:300px;display: inline-table" placeholder="email" @keyup.enter.native="handleFilter"
|
||||
v-model="listQuery.email">
|
||||
<template slot="append">@wallstreetcn.com</template>
|
||||
</el-input>
|
||||
</el-input>
|
||||
|
||||
<el-select style="width: 250px" class="filter-item" v-model="listQuery.role" clearable placeholder="权限">
|
||||
<el-option v-for="item in roleOptions" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<el-button class="filter-item" type="primary" icon="search" @click="handleFilter">
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button class="filter-item" type="danger" @click="resetFilter">重置筛选项</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row>
|
||||
<el-table-column label="ID" width="130">
|
||||
<template scope="scope">
|
||||
<span>{{scope.row.uid}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="Name">
|
||||
<template scope="scope">
|
||||
<span>{{scope.row.display_name}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="Email">
|
||||
<template scope="scope">
|
||||
<span>{{scope.row.email}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="Role">
|
||||
<template scope="scope">
|
||||
<el-tag style="margin-right: 5px;" v-for='item in scope.row.roles' :key='item+scope.row.uid' type="primary">
|
||||
{{item}}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="170">
|
||||
<template scope="scope">
|
||||
<el-button size="small" type="success" @click="handleEdit(scope.row)">编辑权限</el-button>
|
||||
<el-button size="small" v-if='scope.row.roles.indexOf("virtual_editor")>=0||hasRoleEdit' type="primary" @click="handleInfo(scope.row)">修改</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div v-show="!listLoading" class="pagination-container">
|
||||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10,20,30, 50]"
|
||||
:page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
|
||||
<el-dialog title="编辑" v-model="dialogFormVisible" size='small'>
|
||||
<el-form :model="tempForm" label-position="left" label-width="70px">
|
||||
<el-form-item label="权限">
|
||||
<el-select style="width: 100%" v-model="tempForm.roles" multiple placeholder="请选择">
|
||||
<el-option v-for="item in roleOptions" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="updateUser">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog title="编辑简介" v-model="dialogInfoVisible">
|
||||
<el-form :model="infoForm">
|
||||
<el-form-item label="昵称">
|
||||
<el-input v-model="infoForm.display_name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="简介">
|
||||
<el-input type="textarea" :autosize="{ minRows: 2}" v-model="infoForm.introduction"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="头像">
|
||||
|
||||
</el-form-item>
|
||||
<div style='width:200px;height:200px;'>
|
||||
<singleImageUpload2 v-model="infoForm.image"></singleImageUpload2>
|
||||
</div>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogInfoVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submitInfo">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getRoleList, updateInfo } from 'api/adminUser';
|
||||
import { getUserList } from 'api/remoteSearch';
|
||||
import { objectMerge } from 'utils';
|
||||
import singleImageUpload2 from 'components/Upload/singleImage2';
|
||||
|
||||
export default {
|
||||
name: 'adminUsersList',
|
||||
components: { singleImageUpload2 },
|
||||
data() {
|
||||
return {
|
||||
list: null,
|
||||
total: null,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 20,
|
||||
role: '',
|
||||
uid: undefined,
|
||||
display_name: ''
|
||||
},
|
||||
roleOptions: [],
|
||||
dialogFormVisible: false,
|
||||
tempForm: {
|
||||
uid: null,
|
||||
roles: []
|
||||
},
|
||||
dialogInfoVisible: false,
|
||||
infoForm: {
|
||||
uid: null,
|
||||
image: '',
|
||||
display_name: '',
|
||||
introduction: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'roles'
|
||||
]),
|
||||
hasRoleEdit() {
|
||||
if (this.roles.indexOf('admin') >= 0) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getAdminRoleList();
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
getUserList(this.listQuery).then(response => {
|
||||
const data = response.data;
|
||||
this.list = data.items;
|
||||
this.total = data.count;
|
||||
this.listLoading = false;
|
||||
})
|
||||
},
|
||||
resetFilter() {
|
||||
this.listQuery = {
|
||||
page: 1,
|
||||
limit: 20,
|
||||
role: '',
|
||||
uid: undefined,
|
||||
display_name: ''
|
||||
}
|
||||
this.getList();
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.listQuery.limit = val;
|
||||
this.getList();
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.listQuery.page = val;
|
||||
this.getList();
|
||||
},
|
||||
handleFilter() {
|
||||
this.getList();
|
||||
},
|
||||
getAdminRoleList() {
|
||||
getRoleList().then(response => {
|
||||
const roleMap = response.data.role_map;
|
||||
const keyArr = Object.keys(roleMap);
|
||||
this.roleOptions = keyArr.map(v => ({ value: v, label: roleMap[v] }));
|
||||
})
|
||||
},
|
||||
handleEdit(row) {
|
||||
this.dialogFormVisible = true;
|
||||
objectMerge(this.tempForm, row);
|
||||
},
|
||||
updateUser() {
|
||||
updateInfo(this.tempForm).then(() => {
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '修改成功',
|
||||
type: 'success'
|
||||
});
|
||||
for (const item of this.list) {
|
||||
if (item.uid === this.tempForm.uid) {
|
||||
const index = this.list.indexOf(item);
|
||||
this.list[index] = objectMerge(this.list[index], this.tempForm);
|
||||
break
|
||||
}
|
||||
}
|
||||
this.dialogFormVisible = false;
|
||||
});
|
||||
},
|
||||
handleInfo(row) {
|
||||
this.dialogInfoVisible = true;
|
||||
objectMerge(this.infoForm, row);
|
||||
},
|
||||
submitInfo() {
|
||||
updateInfo(this.infoForm).then(() => {
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '修改成功',
|
||||
type: 'success'
|
||||
});
|
||||
for (const item of this.list) {
|
||||
if (item.uid === this.infoForm.uid) {
|
||||
const index = this.list.indexOf(item);
|
||||
this.list[index] = objectMerge(this.list[index], this.infoForm);
|
||||
break
|
||||
}
|
||||
}
|
||||
this.dialogInfoVisible = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in a new issue