修改个人信息设置页面，

添加用户管理页面,
修改分享页面

src/api/user.js

@@ -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}
+  })
+}
+
+

src/styles/setting.scss

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

src/utils/request.js

@@ -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 === 5) {
-      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
         // to re-login
-        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
+        MessageBox.confirm('您已注销，可以取消停留在此页面上，或者再次登录', '确认登出', {
-          confirmButtonText: 'Re-Login',
+          confirmButtonText: '重新登录',
-          cancelButtonText: 'Cancel',
+          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
     }
   },

src/views/home/index.vue

@@ -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

src/views/login/index.vue

@@ -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>-->

src/views/public/share/shareList.vue

@@ -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 v-if="prompt !== ''">温馨提示：</p>
-      <p>文件分享已被撤销</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
+          this.isLoading = false
-          const pathList = this.fileList[0].path.split('/');
+          if(Object.getPrototypeOf(res.data) === String.prototype){
-          this.currentDirName = pathList[pathList.length-2]
+            this.prompt = '该链接已失效'
-          this.fileList.map((item,index) => {
+          }else{
-            item.index = index
+            this.fileList = res.data
-          })
+            this.fileList.map((item,index) => {
-          this.clientHeight = document.documentElement.clientHeight - 165
+              item.index = index
-          this.listModeSearch = false
+            })
-          this.pagination['total'] = res.count
+            this.clientHeight = document.documentElement.clientHeight - 265
-          this.$nextTick(()=>{
+            this.listModeSearch = false
-            this.containerResize()
+            this.listModeSearchOpenDir = false
-            this.tableLoading = false
+            this.pagination['total'] = res.count
-            // 打开文件夹
+            this.$nextTick(()=>{
-            const item1 = {}
+              this.containerResize()
-            item1['folder'] = this.currentDirName
+              this.tableLoading = false
-            item1['index'] = this.pathList.length - 1
+              this.linkFailed = false
-            const item2 = {}
+            })
-            item2['folder'] = '+'
+            if(!pagination){
-            item2['index'] = this.pathList.length
+              const pathList = this.fileList[0].path.split('/');
-            this.pathList[this.pathList.length - 1] = item1
+              this.currentDirName = pathList[pathList.length-2]
-            this.pathList.push(item2)
+            }
-            this.pagination.pageIndex = 1
+            this.$nextTick(()=>{
-            this.linkFailed = false
+              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) {
+        console.log(this.pagination.fileId)
-          this.searchFile(this.searchFileName)
+        if(this.pagination.fileId){
-        } else {
+          this.accessShareOpenDir(this.pagination.fileId)
-          this.getFileList()
+        }else{
+          this.getFileList(true)
         }
       },
       getSummaries(param) {

src/views/setting/index.vue

@@ -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">
+          <cusomer-info v-if="userInfo" :userInfo="userInfo" @isAdmin="isAdmin"></cusomer-info>
-            <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>
         </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>
+          <cusomer-manager></cusomer-manager>
-
-          </el-table>
         </div>
       </el-tab-pane>
     </el-tabs>
-
   </div>
 </template>
 
 <script>
   import { getInfo, userUpdate} from '@/api/user'
-  import { formatSize } from '@/utils/number'
+  import cusomerInfo from '@/views/setting/tabs/cusomerInfo'
-  import CropperDialog from '@/components/Cropper/dialog'
+  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: {},
+        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: '',
       }
     },
     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() {
+      isAdmin(isAdmin) {
-        this.userUpdate(this.setFormData())
+        if(isAdmin){
-        // this.$message('submit!')
+          this.adminTabs.forEach(tab => {
-      },
+            if(!this.tabs.includes(tab)){
-      progressFormat() {
+              this.tabs.push(tab)
-        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])
             }
-          }
+          })
         }
-        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>

src/views/setting/tabs/cusomerInfo.vue

@@ -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>

src/views/setting/tabs/cusomerManager.vue

@@ -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>