lunanting/jmalcloud-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善：用户管理

Browse Source
This commit is contained in:
jmal 2021-01-10 16:53:14 +08:00
parent ee135d61fc
commit f210f84428
14 changed files with 712 additions and 333 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/api/role.js Normal file
View File

@ -0,0 +1,37 @@
import request from '@/utils/request'
const qs = require('qs')
export default {
roleList(params) {
return request({
url: '/role/list',
method: 'get',
params
})
},
add(data) {
return request({
url: '/role/add',
method: 'post',
data
})
},
update(data) {
return request({
url: 'role/update',
method: 'put',
data
})
},
delete(params) {
return request({
url: '/role/delete',
method: 'delete',
params,
paramsSerializer: function(params) {
return qs.stringify(params, { arrayFormat: 'repeat' })
}
})
}
}

8
src/api/user.js
View File

@ -1,4 +1,5 @@
import request from '@/utils/request'
const qs = require('qs')
export function login(data) {
return request({
@ -71,11 +72,14 @@ export function resetPass(id) {
})
}
export function delUser(id) {
export function delUser(params) {
return request({
url: 'user/delete',
method: 'delete',
params: {id}
params,
paramsSerializer: function(params) {
return qs.stringify(params, { arrayFormat: 'repeat' })
}
})
}

2
src/components/Icon/Icon.vue
View File

@ -5,7 +5,7 @@
import { Icon } from 'ant-design-vue'
const IconFont = Icon.createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_2024484_m4qfejm9sve.js'
scriptUrl: '//at.alicdn.com/t/font_2024484_tbuvjy9a4bi.js'
})
export default {

4
src/components/ShowFile/ShowFile.vue
View File

@ -909,6 +909,10 @@ export default {
}
})
}
let that = this
window.onresize = function (){
that.clientHeight = document.documentElement.clientHeight - that.lessClientHeight
}
// 画矩形选区
this.darwRectangle()

2
src/components/SimpleUploader/globalUploader.vue
View File

@ -574,12 +574,12 @@
this.$nextTick(() => {
$(`<p class="myStatus_${id}"></p>`).appendTo(`.file_${id} .uploader-file-status`).css({
'position': 'absolute',
'top': '-14px',
'font-size': '13px',
'left': '0',
'right': '0',
'bottom': '0',
'zIndex': '1',
'marginBottom': '0',
'backgroundColor': statusMap[status].bgc
}).text(statusMap[status].text)
})

178
src/components/table/TableList.vue Normal file
View File

@ -0,0 +1,178 @@
<!-- 费用报销编辑弹框 -->
<template>
<div class="table-temp">
<el-table
:data="tableData"
border
size="medium"
fit
highlight-current-row
v-loading="loading"
@selection-change="handleSelectionChange"
@sort-change="sortChange"
>
<el-table-column type="selection" width="55" align="center"></el-table-column>
<el-table-column type="index" label="" align="center" fixed></el-table-column>
<!-- prop: 字段名name, label: 展示的名称, fixed: 是否需要固定(left, right), minWidth: 设置列的最小宽度(不传默认值), active: 是否有操作列
active.name: 操作列字段名称, active.clickFun: 操作列点击事件, formatData: 格式化内容-->
<el-table-column
v-for="(item, key) in tableHeader"
v-if="!item.disabled"
:key="key"
:prop="item.prop"
:label="item.label"
:fixed="item.fixed"
:min-widitem="item.minWidth"
align="center"
:sort-orders="['ascending', 'descending']"
:sortable="item.sortable"
:show-overflow-tooltip="true"
tooltip-effect="dark"
>
<template slot-scope="scope">
<div v-if="item.active">
<el-button
v-for="(o, key) in item.active"
:style="{color: o.color}"
:key="key"
@click="o.handle(scope.row)"
:type="o.type || 'text'"
:icon="o.icon"
size="medium"
>{{o.name}}</el-button>
</div>
<div v-else>
<div v-if="item.formatData">
<div v-if="item.tag">
<el-tag size="mini" v-for="tagname in item.formatData(scope.row[item.prop])" :key="tagname">{{tagname}}</el-tag>
</div>
<div v-else>
<span else>{{ item.formatData(scope.row[item.prop]) || scope.row[item.prop]}}</span>
</div>
</div>
<div v-else>
<span>{{ scope.row[item.prop] }}</span>
</div>
</div>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
hide-on-single-page
background
layout="total, prev, pager, next"
:current-page="pagination.pageIndex"
:page-size="pagination.pageSize"
:total="pagination.pageTotal"
@current-change="handlePageChange"
></el-pagination>
</div>
</div>
</template>
<script>
export default {
name: 'TableList',
props: {
tableData: {
type: Array,
default: function() {
return [];
}
},
tableHeader: {
type: Array,
default: function() {
return [];
}
},
loading: {
type: Boolean,
default: false
},
pagination: {
type: Object,
default: {
pageIndex: 0,
pageSize: 15,
pageTotal: 0
}
}
},
data() {
return {
multipleSelection: [],
newPagination: {
pageIndex: 0,
pageSize: 15,
pageTotal: 0
}
};
},
computed: {
formatters(formatData) {
return formatData()
}
},
methods: {
// 多选操作
handleSelectionChange(val) {
this.multipleSelection = val;
this.$emit('selectFun', { backData: this.multipleSelection });
},
// 分页导航
handlePageChange(val) {
this.$set(this.pagination, 'pageIndex', val);
//调用父组件方法
this.$emit('pageChange', { backData: this.pagination});
},
// row:本行数据，route：要跳转的路由路径，跳转要传的参数routeId
handleActive(row, route, routeId) {
this.$router.push({
path: '/' + route,
query: {
id: row[routeId]
}
});
},
//后端排序
sortChange(column) {
//调用父组件方法
this.$emit('sortChange', { backData: column });
}
}
}
</script>
<style lang="scss" scoped>
.table-temp {
/deep/.el-table {
thead {
color: #262626;
}
th {
background-color: #fafafa;
}
.caret-wrapper {
height: 16px;
}
.sort-caret.ascending {
top: -4px;
}
.sort-caret.descending {
bottom: -2px;
}
.el-tag {
margin: 0 2px;
}
.el-button {
padding: 0;
}
}
/deep/.el-pagination {
margin-top: 15px;
text-align: center;
}
}
</style>

6
src/layout/components/Navbar.vue
View File

@ -14,7 +14,7 @@
<svg-icon icon-class="WEBSITE"></svg-icon>网站
</div>
</router-link>
<div class="right-username">{{username}}</div>
<div class="right-username">{{showName}}</div>
<div class="right-menu">
<el-dropdown class="avatar-container" trigger="click">
<div class="avatar-wrapper">
@ -55,7 +55,6 @@ export default {
return {
activeIndex: '1',
imageUrl: process.env.VUE_APP_BASE_API + '/view/thumbnail?jmal-token=' + this.$store.state.user.token + '&id=',
username: this.$store.state.user.name,
defaultAvatar: require('../../assets/img/default-avatar.png')
}
},
@ -67,7 +66,8 @@ export default {
computed: {
...mapGetters([
'sidebar',
'avatar'
'avatar',
'showName'
])
},
methods: {

1
src/store/getters.js
View File

@ -4,6 +4,7 @@ const getters = {
token: state => state.user.token,
avatar: state => state.user.avatar,
name: state => state.user.name,
showName: state => state.user.showName,
userId: state => state.user.userId
}
export default getters

7
src/store/modules/user.js
View File

@ -6,6 +6,7 @@ const getDefaultState = () => {
return {
token: getToken(),
name: '',
showName: '',
avatar: '',
userId: getConsumerId(),
}
@ -23,6 +24,9 @@ const mutations = {
SET_NAME: (state, name) => {
state.name = name
},
SET_SHOW_NAME: (state, showName) => {
state.showName = showName
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
},
@ -66,9 +70,10 @@ const actions = {
// reject('Verification failed, please Login again.')
}
const { id, username, avatar } = data
const { id, username, showName, avatar } = data
commit('SET_NAME', username)
commit('SET_SHOW_NAME', showName)
commit('SET_AVATAR', avatar)
commit('SET_USERID', id)
sessionStorage.setItem('store', JSON.stringify(state))

50
src/styles/setting.scss
View File

@ -23,7 +23,18 @@ a:hover {
font-weight: 600;
}
}
.el-card {
.search-form {
.el-form-actions {
margin-bottom: 15px;
}
}
}
.table-search-header{
/deep/.el-card__header {
padding: 18px 20px 0;
}
}
.clearfix {
display: flex;
}
@ -33,6 +44,11 @@ a:hover {
margin-left: 25px;
}
.card-btn-icon {
padding-left: 12px;
padding-right: 12px;
}
.card-header {
line-height: 32px;
}
@ -93,9 +109,23 @@ a:hover {
margin-top: 5vh!important;
}
}
.dialog-cm {
/deep/.el-dialog {
max-width: 500px;
.dialog-form {
/deep/ .el-dialog__body {
padding-bottom: 0;
padding-top: 22px;
}
}
/deep/ .el-dialog {
border-radius: 4px;
max-width: calc(100vw - 30px);
.el-dialog__header {
padding-top: 14px;
padding-bottom: 11px;
border-bottom: 1px solid #ededed;
}
.el-dialog__footer {
padding-bottom: 12px;
border-top: 1px solid #f4f4f4;
}
}
/deep/.el-input {
@ -133,3 +163,15 @@ a:hover {
margin-top: -28px;
}
}
.search-form .el-form-actions {
.el-button+.el-button {
margin-left: 0;
}
}
@media screen and (max-width: 768px) {
.search-form .el-form-actions {
text-align: right;
}
}

117
src/views/setting/user/tabs/cusomerInfo.vue → src/views/setting/sys/cusomerInfo.vue
View File

@ -11,22 +11,23 @@
@croppedCanvas="saveAvatar">
</cropper-dialog>
</el-dialog>
<el-dialog class="dialog-cm" :title="passwordFormTitle" :visible.sync="dialogChangePassword">
<el-form ref="passwordForm" :model="passwordForm" :rules="rules" label-width="120px">
<el-form-item v-if="!validOldPass" label="旧密码" prop="oldPassword">
<el-input type="password" v-model="passwordForm.oldPassword"/>
<el-dialog class="dialog-cm" width="400px" :title="passwordFormTitle" :visible.sync="dialogChangePassword">
<el-form ref="passwordForm" size="medium" :model="passwordForm" :rules="rules" label-width="100px" @submit.native.prevent>
<el-form-item v-show="!validOldPass" label="旧密码" prop="oldPassword">
<el-input type="password" v-model="passwordForm.oldPassword" @keyup.enter.native="onSavePassword"/>
</el-form-item>
<el-form-item v-if="validOldPass" label="新密码" prop="password">
<el-input type="password" v-model="passwordForm.password"/>
<el-form-item v-show="validOldPass" label="新密码" prop="password">
<el-input ref="newPasswordInput" type="password" v-model="passwordForm.password"/>
</el-form-item>
<el-form-item v-if="validOldPass" label="确认新密码" prop="checkPass">
<el-input type="password" v-model="passwordForm.checkPass"/>
</el-form-item>
<el-form-item>
<el-button native-type="submit" :loading="userUpdateLoading" type="primary" @click.native.prevent="onSavePassword">确定</el-button>
<a class="forget-password" @click="forget">忘记密码?</a>
<el-form-item v-show="validOldPass" label="确认新密码" prop="checkPass">
<el-input type="password" v-model="passwordForm.checkPass" @keyup.enter.native="onSavePassword"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<a class="forget-password" @click="forget">忘记密码?</a>
<el-button size="small" @click="dialogChangePassword = false">取 消</el-button>
<el-button size="small" :loading="userUpdateLoading" type="primary" @click="onSavePassword">确 定</el-button>
</div>
</el-dialog>
<el-form ref="cusomerInfoForm" :model="cusomerInfoForm" label-width="120px">
<el-form-item label="头像" class="form-item-avatar">
@ -38,15 +39,11 @@
<el-button title="上传" type="primary" icon="el-icon-upload2" circle @click="uploadImg"></el-button>
<input ref="selectImg" type="file" style="display: none;" accept="image/*" @change="changImg"></input>
</div>
<!-- <el-avatar class="avatar-overlay" shape="circle" :size="100" @click.native="dialogAvatar=true"> 修改头像 </el-avatar>-->
</el-form-item>
<el-form-item label="密码">
<el-button size="mini" round @click="changePassword">修改密码</el-button>
</el-form-item>
<el-form-item label="用户名">
<el-input readonly="readonly" v-model="cusomerInfoForm.username" />
</el-form-item>
<el-form-item label="昵称">
<el-input v-model="cusomerInfoForm.showName" />
</el-form-item>
<el-form-item label="标语">
@ -59,7 +56,7 @@
<el-progress class="quota-space" :percentage="percentage" :format="progressFormat" :color="customColors"></el-progress>
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="userUpdateLoading" @click="onSubmit">保存</el-button>
<el-button type="primary" size="medium" :loading="userUpdateLoading" @click="onSubmit">保 存</el-button>
</el-form-item>
</el-form>
</div>
@ -125,11 +122,11 @@
{ min: 6, message: '密码不能小于6个字符', trigger: 'blur' }
],
checkPass: [
{ validator: validatePass, trigger: 'blur' }
{ required: true, validator: validatePass, trigger: 'blur' }
],
},
validOldPass: false,
passwordFormTitle: '旧密码',
passwordFormTitle: '',
dialogSelectFile: false,
}
},
@ -184,13 +181,14 @@
}
await this.$nextTick()
this.cusomerInfoForm = this.userInfo
this.srcImage = this.userInfo.avatar ? this.imageUrl + this.userInfo.avatar : require('../../../../assets/img/default-avatar.png')
this.srcImage = this.userInfo.avatar ? this.imageUrl + this.userInfo.avatar : require('../../../assets/img/default-avatar.png')
})
},
async changePassword() {
this.validOldPass = false
this.dialogChangePassword = true
await this.$nextTick()
this.passwordFormTitle = '旧密码'
this.$refs.passwordForm.resetFields()
},
onSubmit() {
@ -204,39 +202,46 @@
},
// 确认密码
onSavePassword() {
this.$refs.passwordForm.validate((valid) => {
this.valid = valid
if (valid) {
if(this.validOldPass){
// 修改密码
this.userUpdateLoading = true
let data = new FormData()
data.append("id",this.$store.state.user.userId)
data.append("password",this.passwordForm.password)
updatePass(data).then(() => {
this.userUpdateLoading = false
this.dialogChangePassword = false
}).catch(()=>{
this.userUpdateLoading = false
})
}else{
// 验证旧密码
this.userUpdateLoading = true
validOldPass({
id: this.$store.state.user.userId,
password: this.passwordForm.oldPassword
}).then(() => {
this.userUpdateLoading = false
this.validOldPass = true
this.passwordFormTitle = '新密码'
}).catch(()=>{
this.userUpdateLoading = false
})
console.log('this.validOldPass', this.validOldPass)
if(this.validOldPass){
this.$refs.passwordForm.validate((valid) => {
this.valid = valid
if (valid) {
if(this.validOldPass){
// 修改密码
this.userUpdateLoading = true
let data = new FormData()
data.append("id",this.$store.state.user.userId)
data.append("password",this.passwordForm.password)
updatePass(data).then(() => {
this.userUpdateLoading = false
this.dialogChangePassword = false
}).catch(()=>{
this.userUpdateLoading = false
})
}
return true
}
} else {
return false;
}
});
return false
});
} else {
// 验证旧密码
this.userUpdateLoading = true
validOldPass({
id: this.$store.state.user.userId,
password: this.passwordForm.oldPassword
}).then(() => {
this.userUpdateLoading = false
this.validOldPass = true
this.passwordFormTitle = '新密码'
let that = this
setTimeout(function (){
that.$refs.newPasswordInput.focus()
})
}).catch(()=>{
this.userUpdateLoading = false
})
}
},
progressFormat() {
const space = this.userInfo.takeUpSpace/1024/1024/1024
@ -291,11 +296,11 @@
this.srcImage = this.imageUrl + res.data
this.$store.state.user.avatar = res.data
}
if(data.get('showName') != null){
this.$store.state.user.showName = data.get('showName')
}
}).catch(() => {
this.$message({
message: '保存失败!',
type: 'error'
})
this.userUpdateLoading = false
})
}
}

366
src/views/setting/sys/cusomerManager.vue Normal file
View File

@ -0,0 +1,366 @@
<template>
<div class="container" v-wechat-title="title">
<el-dialog class="dialog-form" width="600px" :title="dialogTitle" :visible.sync="dialogVisible">
<el-form size="medium" ref="managerForm" label-width="90px" :model="form" :rules="rules">
<el-row :gutter="10">
<el-col :sm="12">
<el-form-item label="用户账号:" prop="username">
<el-input placeholder="请输入账号" width="100%" v-model="form.username" :disabled="editMove===2" />
</el-form-item>
<el-form-item label="用户名:" prop="showName">
<el-input placeholder="请输入账号" v-model="form.showName" />
</el-form-item>
<el-form-item label="角色:" prop="roles">
<el-select v-model="form.roles" multiple placeholder="请选择角色">
<el-option
v-for="item in roleList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :sm="12">
<el-form-item v-if="editMove===1" label="密码:" prop="password">
<el-input type="password" v-model="form.password"/>
</el-form-item>
<el-form-item v-if="editMove===1" label="确认密码:" prop="checkPass">
<el-input type="password" v-model="form.checkPass"/>
</el-form-item>
<el-form-item label="配额:">
<el-input v-model="form.quota"/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button v-if="editMove===2" size="small" type="danger" @click="resetPassword()">重置密码</el-button>
<el-button size="small" @click="dialogVisible = false">取 消</el-button>
<el-button size="small" type="primary" :loading="userUpdateLoading" @click.native.prevent="onSave()">保 存</el-button>
</div>
</el-dialog>
<el-card class="box-card table-search-header">
<div slot="header">
<div class="box-card-header">
<el-form size="medium" class="search-form" ref="queryForm" label-width="77px" :model="queryCondition" :rules="rules">
<el-row :gutter="10">
<el-col :sm="12" :md="8">
<el-form-item label="用户账号:">
<el-input clearable placeholder="请输入" v-model="queryCondition.username" />
</el-form-item>
</el-col>
<el-col :sm="12" :md="8">
<el-form-item label="用户名:">
<el-input clearable placeholder="请输入" v-model="queryCondition.showName" />
</el-form-item>
</el-col>
<el-col :sm="12" :md="8">
<div class="el-form-actions">
<el-button class="card-btn-icon" size="medium" icon="el-icon-search" type="primary" @click="getUserList()">查询</el-button>
<el-button class="card-btn-icon" size="medium" icon="el-icon-plus" type="primary" @click="add()">添加</el-button>
<el-button :disabled="multipleSelection.length < 1" class="card-btn-icon" size="medium" type="danger" icon="el-icon-delete" @click="handleSelectDelete()">删除</el-button>
</div>
</el-col>
</el-row>
</el-form>
</div>
</div>
<table-list
:tableData="userList"
:tableHeader="tableHeader"
:pagination="pagination"
@pageChange="pageChange"
@selectFun="selectFun"
@sortChange="sortChange"
></table-list>
</el-card>
</div>
</template>
<script>
import {addUser, delUser, getInfo, resetPass, userList, userUpdate} from '@/api/user'
import roleApi from '@/api/role'
import CropperDialog from '@/components/Cropper/dialog'
import TableList from "@/components/table/TableList";
export default {
name: 'cusomerManager',
components: {
TableList,
CropperDialog
},
props: {
},
data() {
let validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.form.password) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
title: "用户管理",
userList: [],
roleList: [],
dialogVisible: false,
dialogTitle: '',
userUpdateLoading: false,
valid: true,
form: {
username: '',
password: '',
showName: '',
roles: [],
checkPass: '',
quota: 10,
},
// 分页信息
pagination: {
pageIndex: 1,
pageSize: 15,
pageTotal: 60
},
// 查询条件
queryCondition: {
username: '',
showName: '',
sortProp: '',
sortOrder: ''
},
tableHeader: [
{prop: 'username',label: '用户账号',sortable: 'custom'},
{prop: 'showName',label: '用户名',sortable: 'custom'},
{prop: 'roles',label: '角色', tag: true,
formatData: (roles)=> {
if(roles){
let tagNames = this.roleList.map(role => {
if (roles.includes(role.id)) {
return role.name
}
})
tagNames = tagNames.filter(tagName => tagName !== undefined)
return tagNames
}
}
},
{prop: 'createTime',label: '创建时间',sortable: 'custom'},
{prop: 'quota',label: '配额(G)',sortable: 'custom'},
{label: '操作',active: [
{name: '修改', icon: 'el-icon-edit', handle: (row) => this.handleEdit(row.id,row.username)},
{name: '删除', icon: 'el-icon-delete', color: '#ff4d4f', handle: (row) => this.handleDelete([row.id])},
],
},
],
multipleSelection: [],
rules: {
username: [
{ required: true, message: '请输入用户账号', trigger: 'blur' },
],
showName: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, message: '密码不能小于6个字符', trigger: 'blur' }
],
checkPass: [
{ required: true, validator: validatePass, trigger: 'blur' }
],
},
editMove: 1,// 1添加,2修改
}
},
computed: {
},
mounted() {
this.getUserList()
this.getRoleList()
this.resize()
},
methods: {
resize(){
let clientWidth = document.querySelector(".container").clientWidth
const monbile = clientWidth <= 768;
this.tableHeader[2].disabled = monbile
this.tableHeader[3].disabled = monbile
this.tableHeader[4].disabled = monbile
},
// 组件选择完后把数据传过来
selectFun(data) {
this.multipleSelection = data.backData;
},
//表格组件返回排序对象
sortChange(data) {
let column = data.backData;
this.queryCondition.sortProp = column.prop
this.queryCondition.sortOrder = column.order
this.getUserList()
},
//分页导航
pageChange(data) {
this.pagination = data.backData;
this.getUserList()
},
getUserList(){
userList({
page: this.pagination.pageIndex,
pageSize: this.pagination.pageSize,
...this.queryCondition
}).then(res => {
this.userList = res.data
this.pagination.pageTotal = res.count
})
},
getRoleList(){
roleApi.roleList().then(res => {
this.roleList = res.data;
})
},
async add() {
this.dialogVisible = true
this.dialogTitle = '添加用户'
this.editMove = 1
this.form.showName = ''
await this.$nextTick()
this.$refs.managerForm.resetFields()
},
// 设置formData
setFormData() {
let data = new FormData();
for (let formKey in this.form) {
if(this.form.hasOwnProperty(formKey)){
data.append(formKey,this.form[formKey])
}
}
return data
},
// 保存
onSave() {
this.$refs.managerForm.validate((valid) => {
this.valid = valid
if (valid) {
this.userUpdateLoading = true
if(this.editMove === 1){
this.addUser(this.setFormData())
}
if(this.editMove === 2){
this.userUpdate(this.setFormData())
}
} else {
return false;
}
});
},
handleEdit(id) {
this.editMove = 2
this.dialogVisible = true
this.dialogTitle = '修改用户'
getInfo({
id: id,
}).then(res => {
this.form = res.data
// 判断角色是否存在
if(this.form.roles){
let roleIds = this.roleList.map(role => {
if (this.form.roles.includes(role.id)) {
return role.id
}
})
roleIds = roleIds.filter(roleId => roleId !== undefined)
this.form.roles = roleIds
}
})
},
resetPassword() {
this.$confirm('确定重置该用户密码吗, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
resetPass(this.form.id).then(() => {
}).catch(() => {
this.onError()
})
})
},
// 删除选中
handleSelectDelete () {
this.$confirm('确定要删除选中的用户吗, 此操作会删除用户的所有文件?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let ids = []
this.multipleSelection.forEach(row => {
ids.push(row.id)
})
this.deleteUser(ids)
})
},
handleDelete(ids) {
this.$confirm('确定要删除此用户吗？此操作会删除用户的所有文件', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.deleteUser(ids)
})
},
deleteUser(ids){
delUser({ids: ids}).then(() => {
this.onSuccess('删除成功!')
}).catch(() => {
this.onError()
})
},
// 修改用户信息操作
userUpdate(data){
userUpdate(data).then(() => {
this.onSuccess()
}).catch(() => {
this.onError()
})
},
// 添加用户
addUser(data){
addUser(data).then(() => {
this.onSuccess()
}).catch(() => {
this.onError()
})
},
onSuccess(message){
this.getUserList()
let msg = '保存成功!'
if(message){
msg = message
}
this.userUpdateLoading = false
this.dialogVisible = false
this.$message({
message: msg,
type: 'success',
duration: 1000
})
},
onError() {
this.userUpdateLoading = false
}
}
}
</script>
<style lang="scss" scoped>
@import "src/styles/setting";
/deep/ .el-input {
width: 100%;
}
/deep/ .el-select {
width: 100%;
}
</style>

4
src/views/setting/user/index.vue
View File

@ -21,8 +21,8 @@
</template>
<script>
import cusomerInfo from '@/views/setting/user/tabs/cusomerInfo'
import cusomerManager from '@/views/setting/user/tabs/cusomerManager'
import cusomerInfo from '@/views/setting/sys/cusomerInfo'
import cusomerManager from '@/views/setting/sys/cusomerManager'
import categoryManager from '@/views/setting/articles/categoryManager'
export default {

263
src/views/setting/user/tabs/cusomerManager.vue
View File

@ -1,263 +0,0 @@
<template>
<div class="container" v-wechat-title="title">
<el-dialog class="dialog-cm" :title="dialogTitle" :visible.sync="dialogVisible">
<el-form ref="managerForm" :model="form" :rules="rules" label-width="120px">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" />
</el-form-item>
<el-form-item label="昵称">
<el-input v-model="form.showName" />
</el-form-item>
<el-form-item v-if="editMove===1" label="密码" prop="password">
<el-input type="password" v-model="form.password"/>
</el-form-item>
<el-form-item v-if="editMove===1" label="确认密码" prop="checkPass">
<el-input type="password" v-model="form.checkPass"/>
</el-form-item>
<el-form-item label="配额">
<el-input v-model="form.quota"/>
</el-form-item>
<el-form-item>
<!--<el-button @click="dialogVisible = false">取 消</el-button>-->
<el-button native-type="submit" type="primary" :loading="userUpdateLoading" @click.native.prevent="onSave('managerForm')">保 存</el-button>
</el-form-item>
</el-form>
</el-dialog>
<el-card class="box-card">
<div slot="header">
<div class="box-card-header">
<div class="clearfix card-header-back">
<span>用户列表</span>
<el-button class="card-button" size="mini" type="primary" @click="add()">添加用户</el-button>
</div>
</div>
</div>
<el-table
:data="userList"
stripe
>
<el-table-column
prop="username"
label="用户名"
width="150">
</el-table-column>
<el-table-column
prop="showName"
label="昵称"
width="150">
</el-table-column>
<el-table-column
prop="quota"
label="配额"
width="150">
<template slot-scope="scope">
{{scope.row.quota}}GB
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="250">
<template slot-scope="scope">
<el-button v-if="scope.row.username !== 'jmal'"
size="mini"
@click="handleEdit(scope.row.id,scope.row.username)"
>
编辑
</el-button>
<el-button v-if="scope.row.username !== 'jmal'"
size="mini"
@click="resetPassword(scope.row.id,scope.row.username)"
>
重置密码
</el-button>
<el-button v-if="scope.row.username !== 'jmal'"
size="mini"
type="danger"
@click="handleDelete(scope.row.id,scope.row.username)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</template>
<script>
import { getInfo, userUpdate, addUser, delUser, resetPass, userList} from '@/api/user'
import CropperDialog from '@/components/Cropper/dialog'
export default {
name: 'cusomerManager',
components: {
CropperDialog
},
props: {
},
data() {
let validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.form.password) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
title: "用户管理",
userList: [],
dialogVisible: false,
dialogTitle: '',
userUpdateLoading: false,
valid: true,
form: {
username: '',
password: '',
showName: '',
checkPass: '',
quota: 10,
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, message: '密码不能小于6个字符', trigger: 'blur' }
],
checkPass: [
{ validator: validatePass, trigger: 'blur' }
],
},
editMove: 1,// 1添加,2修改
}
},
computed: {
},
mounted() {
this.getUserList()
},
methods: {
getUserList(){
userList().then(res => {
this.userList = res.data
})
},
async add() {
this.dialogVisible = true
this.dialogTitle = '添加用户'
this.editMove = 1
this.form.showName = ''
await this.$nextTick()
this.$refs.managerForm.resetFields()
},
// 设置formData
setFormData() {
let data = new FormData();
for (let formKey in this.form) {
if(this.form.hasOwnProperty(formKey)){
data.append(formKey,this.form[formKey])
}
}
return data
},
// 保存
onSave() {
this.$refs.managerForm.validate((valid) => {
this.valid = valid
if (valid) {
this.userUpdateLoading = true
if(this.editMove === 1){
this.addUser(this.setFormData())
}
if(this.editMove === 2){
this.userUpdate(this.setFormData())
}
} else {
return false;
}
});
},
handleEdit(id) {
this.editMove = 2
this.dialogVisible = true
this.dialogTitle = '修改用户'
getInfo({
id: id,
}).then(res => {
this.form = res.data
})
},
resetPassword(id,username) {
if(username === 'jmal'){
return
}
this.$confirm('确定重置该用户密码吗, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
resetPass(id).then(() => {
}).catch(() => {
this.onError()
})
})
},
handleDelete(id,username) {
if(username === 'jmal'){
return
}
this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delUser(id).then(() => {
this.onSuccess('删除成功!')
}).catch(() => {
this.onError()
})
})
},
// 修改用户信息操作
userUpdate(data){
userUpdate(data).then(() => {
this.onSuccess()
}).catch(() => {
this.onError()
})
},
// 添加用户
addUser(data){
addUser(data).then(() => {
this.onSuccess()
}).catch(() => {
this.onError()
})
},
onSuccess(message){
this.getUserList()
let msg = '保存成功!'
if(message){
msg = message
}
this.userUpdateLoading = false
this.dialogVisible = false
this.$message({
message: msg,
type: 'success',
duration: 1000
})
},
onError() {
this.userUpdateLoading = false
}
}
}
</script>
<style lang="scss" scoped>
@import "src/styles/setting";
</style>