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 2020-03-22 14:49:55 +08:00
parent 7ad3765bec
commit 91e7ccfec9
9 changed files with 685 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/api/user.js
View File

@ -16,6 +16,14 @@ export function getInfo(params) {
})
}
export function userList(params) {
return request({
url: 'user/userList',
method: 'get',
params
})
}
export function logout() {
return request({
url: 'logout',
@ -30,3 +38,45 @@ export function userUpdate(data) {
data
})
}
export function addUser(data) {
return request({
url: 'user/add',
method: 'post',
data
})
}
export function validOldPass(data) {
return request({
url: 'valid-old-pass',
method: 'post',
data
})
}
export function updatePass(data) {
return request({
url: 'user/update-pass',
method: 'post',
data
})
}
export function resetPass(id) {
return request({
url: 'user/reset-pass',
method: 'post',
params: {id}
})
}
export function delUser(id) {
return request({
url: 'user/delete',
method: 'get',
params: {id}
})
}

5
src/styles/setting.scss
View File

@ -28,6 +28,11 @@
margin-top: 5vh!important;
}
}
.dialog-cm {
/deep/.el-dialog {
max-width: 500px;
}
}
/deep/.el-input {
width: unset;
}

24
src/utils/request.js
View File

@ -46,10 +46,6 @@ service.interceptors.response.use(
// if the custom code is not 20000, it is judged as an error.
if (res.code !== 0) {
if(res.code === 5) {
this.$router.push(`/login?redirect=${this.$route.fullPath}`)
return
}
if(res.code === -2){
Message({
message: res.message || '服务器开小差了...',
@ -64,12 +60,11 @@ service.interceptors.response.use(
})
}
// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
if (res.code === 5) {
// to re-login
MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
confirmButtonText: 'Re-Login',
cancelButtonText: 'Cancel',
MessageBox.confirm('您已注销，可以取消停留在此页面上，或者再次登录', '确认登出', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
store.dispatch('user/resetToken').then(() => {
@ -79,6 +74,17 @@ service.interceptors.response.use(
}
return Promise.reject(new Error(res.message || 'Error'))
} else {
let message = ''
if(res.message){
message = res.message.toString()
}
if(message !== 'true'){
Message({
message: res.message,
type: 'success',
duration: 1000
})
}
return res
}
},

13
src/views/home/index.vue
View File

@ -352,6 +352,7 @@ export default {
showNewFolder: false,
isShowNewFolder: false,
listModeSearch: false,
listModeSearchOpenDir: false,
newFolderName: '新建文件夹',
renameFileName: '',
searchFileName: '',
@ -1012,6 +1013,7 @@ export default {
this.tableLoading = false
this.clientHeight = document.documentElement.clientHeight - 165
this.listModeSearch = true
this.listModeSearchOpenDir = false
this.path = ''
this.pagination['total'] = res.count
}).catch(e => {})
@ -1031,6 +1033,7 @@ export default {
this.fileList = res.data
this.clientHeight = document.documentElement.clientHeight - 165
this.listModeSearch = true
this.listModeSearchOpenDir = row
this.pagination['total'] = res.count
this.$nextTick(()=>{
this.tableLoading = false
@ -1053,6 +1056,7 @@ export default {
})
this.clientHeight = document.documentElement.clientHeight - 165
this.listModeSearch = false
this.listModeSearchOpenDir = false
this.pagination['total'] = res.count
this.$nextTick(()=>{
this.containerResize()
@ -1082,7 +1086,11 @@ export default {
currentChange(pageIndex) {
this.pagination.pageIndex = pageIndex
if (this.listModeSearch) {
this.searchFile(this.searchFileName)
if(this.listModeSearchOpenDir){
this.searchFileAndOpenDir(this.listModeSearchOpenDir)
}else{
this.searchFile(this.searchFileName)
}
} else {
this.getFileList()
}
@ -1622,7 +1630,8 @@ export default {
this.shareFileName = row.name
api.generate({
userId: row.userId,
fileId: row.id
fileId: row.id,
isFile: !row.isFolder
}).then(res => {
if (res.data) {
this.shareLink = 'http://'+window.location.host+'/s?s='+res.data

6
src/views/login/index.vue
View File

@ -13,7 +13,7 @@
<el-input
ref="username"
v-model="loginForm.username"
placeholder="Username"
placeholder="用户名"
name="username"
type="text"
tabindex="1"
@ -30,7 +30,7 @@
ref="password"
v-model="loginForm.password"
:type="passwordType"
placeholder="Password"
placeholder="密码"
name="password"
tabindex="2"
auto-complete="on"
@ -41,7 +41,7 @@
</span>
</el-form-item>
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button>
<!--<div class="tips">-->
<!--<span style="margin-right:20px;">username: admin</span>-->

97
src/views/public/share/shareList.vue
View File

@ -1,5 +1,8 @@
<template>
<div class="dashboard-container" v-resize="containerResize">
<transition name="fade">
<al-loading v-if="isLoading"></al-loading>
</transition>
<div class="share-h">
<div class="share-header">
<a href="">
@ -205,8 +208,8 @@
<el-divider class="grid-divider" content-position="center"><i class="el-icon-folder-opened"></i>&nbsp;{{summaries}}</el-divider>
</div>
<div v-if="linkFailed" class="share-header">
<p>温馨提示：</p>
<p>文件分享已被撤销</p>
<p v-if="prompt !== ''">温馨提示：</p>
<p>{{prompt}}</p>
</div>
<el-pagination
background
@ -235,12 +238,15 @@
import api from '@/api/upload-api'
import BreadcrumbFilePath from "@/components/Breadcrumb/BreadcrumbFilePath";
import IconFile from "@/components/Icon/IconFile";
import AlLoading from "@/components/loading/AlLoading";
export default {
components: { IconFile, BreadcrumbFilePath,
components: { IconFile, BreadcrumbFilePath,AlLoading
},
data() {
return {
prompt: '文件分享已被撤销',// 文件分享已被撤销
isLoading: true,
imageUrl: process.env.VUE_APP_BASE_API + '/public/s/view/thumbnail?id=',
fileMenuActive: '',
path: this.$route.query.path,
@ -255,6 +261,7 @@
],
fileList: [],
pagination: {
fileId: false,
pageIndex: 1,
pageSize: 25,
total: 0,
@ -369,7 +376,7 @@
const that = this
window.onresize = function temp() {
that.clientHeight = document.documentElement.clientHeight - 165
that.clientHeight = document.documentElement.clientHeight - 265
}
// 加载布局
@ -520,10 +527,13 @@
api.accessShareOpenDir({
share: this.shareId,
fileId: fileId,
pageIndex: this.pagination.pageIndex,
pageSize: this.pagination.pageSize
}).then(res => {
this.fileList = res.data
this.clientHeight = document.documentElement.clientHeight - 165
this.clientHeight = document.documentElement.clientHeight - 265
this.listModeSearch = true
this.pagination.fileId = fileId
this.pagination['total'] = res.count
this.$nextTick(()=>{
this.tableLoading = false
@ -541,35 +551,51 @@
})
}).catch(e => {})
},
getFileList() {
getFileList(pagination) {
this.tableLoading = true
api.accessShare({
share:this.shareId
share:this.shareId,
pageIndex: this.pagination.pageIndex,
pageSize: this.pagination.pageSize
}).then(res => {
this.fileList = res.data
const pathList = this.fileList[0].path.split('/');
this.currentDirName = pathList[pathList.length-2]
this.fileList.map((item,index) => {
item.index = index
})
this.clientHeight = document.documentElement.clientHeight - 165
this.listModeSearch = false
this.pagination['total'] = res.count
this.$nextTick(()=>{
this.containerResize()
this.tableLoading = false
// 打开文件夹
const item1 = {}
item1['folder'] = this.currentDirName
item1['index'] = this.pathList.length - 1
const item2 = {}
item2['folder'] = '+'
item2['index'] = this.pathList.length
this.pathList[this.pathList.length - 1] = item1
this.pathList.push(item2)
this.pagination.pageIndex = 1
this.linkFailed = false
})
this.isLoading = false
if(Object.getPrototypeOf(res.data) === String.prototype){
this.prompt = '该链接已失效'
}else{
this.fileList = res.data
this.fileList.map((item,index) => {
item.index = index
})
this.clientHeight = document.documentElement.clientHeight - 265
this.listModeSearch = false
this.listModeSearchOpenDir = false
this.pagination['total'] = res.count
this.$nextTick(()=>{
this.containerResize()
this.tableLoading = false
this.linkFailed = false
})
if(!pagination){
const pathList = this.fileList[0].path.split('/');
this.currentDirName = pathList[pathList.length-2]
}
this.$nextTick(()=>{
this.containerResize()
this.tableLoading = false
this.linkFailed = false
if(!pagination){
// 打开文件夹
const item1 = {}
item1['folder'] = this.currentDirName
item1['index'] = this.pathList.length - 1
const item2 = {}
item2['folder'] = '+'
item2['index'] = this.pathList.length
this.pathList[this.pathList.length - 1] = item1
this.pathList.push(item2)
}
})
}
}).catch(() => {
this.tableLoading = false
this.linkFailed = true
@ -577,10 +603,11 @@
},
currentChange(pageIndex) {
this.pagination.pageIndex = pageIndex
if (this.listModeSearch) {
this.searchFile(this.searchFileName)
} else {
this.getFileList()
console.log(this.pagination.fileId)
if(this.pagination.fileId){
this.accessShareOpenDir(this.pagination.fileId)
}else{
this.getFileList(true)
}
},
getSummaries(param) {

139
src/views/setting/index.vue
View File

@ -6,62 +6,31 @@
v-for="item in tabs"
:label="item.label"
:name="item.name"
lazy
>
<span v-if="item.name === 'cusomerInfo'" slot="label"><i class="el-icon-user"></i>{{item.label}}</span>
<div v-if="item.name === 'cusomerInfo'">
<el-dialog class="dialog-avatar" title="修改头像" :visible.sync="dialogVisible">
<cropper-dialog :src="srcImage" @croppedCanvas="saveAvatar"></cropper-dialog>
</el-dialog>
<el-form ref="cusomerInfoForm" :model="cusomerInfoForm" label-width="120px">
<el-form-item label="头像" class="form-item-avatar">
<el-avatar class="avatar-value" shape="circle" :size="100" fit="fit" :src="srcImage" ></el-avatar>
<el-avatar class="avatar-overlay" shape="circle" :size="100" @click.native="dialogVisible=true"> 修改头像 </el-avatar>
</el-form-item>
<el-form-item label="username">
<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="标语">
<el-input class="form-slogan" v-model="cusomerInfoForm.slogan" />
</el-form-item>
<el-form-item label="个人简介">
<el-input type="textarea" v-model="cusomerInfoForm.introduction"></el-input>
</el-form-item>
<el-form-item label="使用情况">
<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-form-item>
</el-form>
<cusomer-info v-if="userInfo" :userInfo="userInfo" @isAdmin="isAdmin"></cusomer-info>
</div>
<span v-if="item.name === 'cusomerManager'" slot="label"><i class="el-icon-user-solid"></i>{{item.label}}</span>
<div v-if="item.name === 'cusomerManager'">
<el-table>
</el-table>
<cusomer-manager></cusomer-manager>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { getInfo, userUpdate} from '@/api/user'
import { formatSize } from '@/utils/number'
import CropperDialog from '@/components/Cropper/dialog'
import cusomerInfo from '@/views/setting/tabs/cusomerInfo'
import cusomerManager from '@/views/setting/tabs/cusomerManager'
export default {
components: {
CropperDialog
cusomerInfo,cusomerManager
},
data() {
return {
imageUrl: process.env.VUE_APP_BASE_API + '/view/thumbnail?jmal-token=' + this.$store.state.user.token + '&id=',
title: "设置",
tabs: [
{name: 'cusomerInfo', label:'个人信息'},
@ -70,21 +39,7 @@
{name: 'cusomerManager', label:'用户管理'}
],
tabsDefault: 'cusomerInfo',
userInfo: {},
userUpdateLoading: false,
dialogVisible:false,
cropper:'',
percentage: 0,
customColors: [
{color: '#f56c6c', percentage: 100},
{color: '#e6a23c', percentage: 80},
{color: '#5cb87a', percentage: 60},
{color: '#1989fa', percentage: 40},
{color: '#6f7ad3', percentage: 20}
],
cusomerInfoForm: {
},
srcImage: '',
userInfo:{}
}
},
computed: {
@ -93,96 +48,26 @@
if(this.$route.query.tab){
this.tabsDefault = this.$route.query.tab
}
this.getInfo()
},
methods: {
getInfo(){
getInfo({
id: this.$store.state.user.userId,
takeUpSpace: true,
}).then(res => {
console.log(res.data)
this.userInfo = res.data
this.srcImage = this.imageUrl + this.userInfo.avatar
if(this.userInfo.roles.includes('admin')){
this.adminTabs.forEach(tab => {
this.tabs.push(tab)
})
}
this.$nextTick(() => {
this.cusomerInfoForm = this.userInfo
})
})
},
tabClick(tab) {
if(tab.name === 'cusomerManager'){
// 用户管理
}
this.$router.push({path: this.$route.path, query: {tab: tab.name}})
},
onSubmit() {
this.userUpdate(this.setFormData())
// this.$message('submit!')
},
progressFormat() {
const space = this.userInfo.takeUpSpace/1024/1024/1024
const quota = this.userInfo.quota
if(space && quota > 0){
this.percentage = Number((space/quota * 100).toFixed(1))
return `${this.percentage}% (${formatSize(this.userInfo.takeUpSpace)}/${quota}GB)`;
// return `${this.percentage}%`;
}
},
// 设置formData
setFormData() {
let data = new FormData();
for (let formKey in this.form) {
if(this.cusomerInfoForm.hasOwnProperty(formKey)){
if(formKey !== 'avatar'){
console.log(formKey,this.form[formKey])
data.append(formKey,this.form[formKey])
isAdmin(isAdmin) {
if(isAdmin){
this.adminTabs.forEach(tab => {
if(!this.tabs.includes(tab)){
this.tabs.push(tab)
}
}
})
}
return data
},
// 保存头像
saveAvatar(dataURL,blob) {
this.dialogVisible = false
this.srcImage = dataURL
let data = new FormData();
data.append('id', this.$store.state.user.userId)
data.append('avatar', dataURL)
data.append('blobAvatar',blob)
this.userUpdate(data,dataURL)
},
// 修改用户信息操作
userUpdate(data, dataURL){
this.userUpdateLoading = true
userUpdate(data).then((res) => {
this.userUpdateLoading = false
this.$message({
message: '保存成功!',
type: 'success',
duration: 1000
})
if(dataURL){
this.srcImage = this.imageUrl + res.data
this.$store.state.user.avatar = res.data
}
}).catch(() => {
this.$message({
message: '保存失败!',
type: 'error'
})
})
}
}
}
</script>
<!--<style src="@styles/cropper.css"></style>-->
<style lang="scss" scoped>
@import "src/styles/setting";
</style>

258
src/views/setting/tabs/cusomerInfo.vue Normal file
View File

@ -0,0 +1,258 @@
<template>
<div class="container" v-wechat-title="title">
<el-dialog class="dialog-avatar" title="修改头像" :visible.sync="dialogAvatar">
<cropper-dialog :src="srcImage" @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-form-item>
<el-form-item v-if="validOldPass" label="新密码" prop="password">
<el-input 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>
</el-form>
</el-dialog>
<el-form ref="cusomerInfoForm" :model="cusomerInfoForm" label-width="120px">
<el-form-item label="头像" class="form-item-avatar">
<el-avatar class="avatar-value" shape="circle" :size="100" fit="fit" :src="srcImage" ></el-avatar>
<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="标语">
<el-input class="form-slogan" v-model="cusomerInfoForm.slogan" />
</el-form-item>
<el-form-item label="个人简介">
<el-input type="textarea" v-model="cusomerInfoForm.introduction"></el-input>
</el-form-item>
<el-form-item label="使用情况">
<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-form-item>
</el-form>
</div>
</template>
<script>
import { getInfo, userUpdate, validOldPass, updatePass} from '@/api/user'
import { formatSize } from '@/utils/number'
import CropperDialog from '@/components/Cropper/dialog'
export default {
name: 'cusomerInfo',
components: {
CropperDialog
},
props: {
},
data() {
let validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.passwordForm.password) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
imageUrl: process.env.VUE_APP_BASE_API + '/view/thumbnail?jmal-token=' + this.$store.state.user.token + '&id=',
title: "个人信息",
userUpdateLoading: false,
dialogAvatar: false,
dialogChangePassword: false,
cropper:'',
percentage: 0,
userInfo: {},
customColors: [
{color: '#f56c6c', percentage: 100},
{color: '#e6a23c', percentage: 80},
{color: '#5cb87a', percentage: 60},
{color: '#1989fa', percentage: 40},
{color: '#6f7ad3', percentage: 20}
],
cusomerInfoForm: {
},
passwordForm: {
oldPassword: '',
password: '',
checkPass: '',
},
srcImage: '',
rules: {
oldPassword: [
{ required: true, message: '请输入旧密码', trigger: 'blur' },
{ min: 6, message: '密码不能小于6个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, message: '密码不能小于6个字符', trigger: 'blur' }
],
checkPass: [
{ validator: validatePass, trigger: 'blur' }
],
},
validOldPass: false,
passwordFormTitle: '旧密码'
}
},
computed: {
},
mounted() {
this.getInfo()
},
methods: {
getInfo(){
getInfo({
id: this.$store.state.user.userId,
takeUpSpace: true,
}).then(async res => {
this.userInfo = res.data
if (this.userInfo.roles && this.userInfo.roles.includes('admin')) {
this.$emit('isAdmin', true)
}
await this.$nextTick()
this.cusomerInfoForm = this.userInfo
this.srcImage = this.imageUrl + this.userInfo.avatar
})
},
async changePassword() {
this.validOldPass = false
this.dialogChangePassword = true
await this.$nextTick()
this.$refs.passwordForm.resetFields()
},
onSubmit() {
this.userUpdate(this.setFormData())
},
// 忘记密码
forget() {
// this.$confirm('请联系管理员重置密码', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '',
// type: 'info'
// }).then(() => {
// })
this.$alert('请联系管理员重置密码', '提示', {
confirmButtonText: '确定',
});
},
// 确认密码
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
let data = new FormData()
data.append("id",this.$store.state.user.userId)
data.append("password",this.passwordForm.oldPassword)
validOldPass(data).then(() => {
this.userUpdateLoading = false
this.validOldPass = true
this.passwordFormTitle = '新密码'
}).catch(()=>{
this.userUpdateLoading = false
})
}
} else {
return false;
}
});
},
progressFormat() {
const space = this.userInfo.takeUpSpace/1024/1024/1024
const quota = this.userInfo.quota
if(space && quota > 0){
this.percentage = Number((space/quota * 100).toFixed(1))
return `${this.percentage}% (${formatSize(this.userInfo.takeUpSpace)}/${quota}GB)`;
// return `${this.percentage}%`;
}
},
// 设置formData
setFormData() {
let data = new FormData();
for (let formKey in this.cusomerInfoForm) {
if(this.cusomerInfoForm.hasOwnProperty(formKey)){
if(formKey !== 'avatar'){
data.append(formKey,this.cusomerInfoForm[formKey])
}
}
}
return data
},
// 保存头像
saveAvatar(dataURL,blob) {
this.dialogAvatar = false
this.srcImage = dataURL
let data = new FormData();
data.append('id', this.$store.state.user.userId)
data.append('avatar', dataURL)
data.append('blobAvatar',blob)
this.userUpdate(data,dataURL)
},
// 修改用户信息操作
userUpdate(data, dataURL){
this.userUpdateLoading = true
userUpdate(data).then((res) => {
this.userUpdateLoading = false
this.$message({
message: '保存成功!',
type: 'success',
duration: 1000
})
if(dataURL){
this.srcImage = this.imageUrl + res.data
this.$store.state.user.avatar = res.data
}
}).catch(() => {
this.$message({
message: '保存失败!',
type: 'error'
})
})
}
}
}
</script>
<!--<style src="@styles/cropper.css"></style>-->
<style lang="scss" scoped>
@import "src/styles/setting";
.forget-password {
font-size: 12px;
margin-left: 10px;
color: #409eff;;
}
</style>

269
src/views/setting/tabs/cusomerManager.vue Normal file
View File

@ -0,0 +1,269 @@
<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" @click.native.prevent="onSave('managerForm')">保 存</el-button>
</el-form-item>
</el-form>
</el-dialog>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>用户列表</span>
<el-button class="card-button" type="text" @click="add">添加用户</el-button>
</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 { formatSize } from '@/utils/number'
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 => {
console.log(res.data)
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 src="@styles/cropper.css"></style>-->
<style lang="scss" scoped>
@import "src/styles/setting";
.card-button {
float: right;
padding: 3px 0;
}
.box-card {
max-width: 800px;
}
</style>