:recycle: Refactoring code.remove 'roleId' property,sorted user info by tab

src/const/crud/admin/role.js

@@ -25,14 +25,6 @@ export const tableOption = {
   align: 'center',
   addBtn: false,
   column: [{
-    fixed: true,
-    label: 'id',
-    prop: 'roleId',
-    span: 24,
-    editDisabled: true,
-    addVisdiplay: false
-  }, {
-    fixed: true,
     label: '角色名称',
     prop: 'roleName',
     span: 24,
@@ -41,13 +33,12 @@ export const tableOption = {
       message: '角色名称不能为空',
       trigger: 'blur'
     },
-      {
-        min: 3,
-        max: 20,
-        message: '长度在 3 到 20 个字符',
-        trigger: 'blur'
-      }
-    ]
+    {
+      min: 3,
+      max: 20,
+      message: '长度在 3 到 20 个字符',
+      trigger: 'blur'
+    }]
   }, {
     width: 120,
     label: '角色标识',
@@ -97,11 +88,11 @@ export const tableOption = {
       value: 3
     }]
   }, {
+    label:'数据权限限定范围',
     prop: 'dsScope',
     formsolt: true,
     hide: true
   }, {
-    width: 150,
     label: '创建时间',
     prop: 'createTime',
     type: 'datetime',

src/views/admin/user/info.vue

@@ -18,6 +18,12 @@
 <template>
   <div class="app-container calendar-list-container">
     <basic-container>
+      <template>
+        <el-tabs @tab-click="switchTab">
+          <el-tab-pane label='信息管理' name='userManager'/>
+          <el-tab-pane label='密码管理' name='passwordManager'/>
+        </el-tabs>
+      </template>
       <el-row>
         <el-col :span="12">
           <div class="grid-content bg-purple">
@@ -25,6 +31,7 @@
                      :rules="rules2"
                      ref="ruleForm2"
                      label-width="100px"
+                     v-if="switchStatus==='userManager'"
                      class="demo-ruleForm">
               <el-form-item label="用户名"
                             prop="username">
@@ -32,24 +39,6 @@
                           v-model="ruleForm2.username"
                           disabled></el-input>
               </el-form-item>
-              <el-form-item label="原密码"
-                            prop="password">
-                <el-input type="password"
-                          v-model="ruleForm2.password"
-                          auto-complete="off"></el-input>
-              </el-form-item>
-              <el-form-item label="密码"
-                            prop="newpassword1">
-                <el-input type="password"
-                          v-model="ruleForm2.newpassword1"
-                          auto-complete="off"></el-input>
-              </el-form-item>
-              <el-form-item label="确认密码"
-                            prop="newpassword2">
-                <el-input type="password"
-                          v-model="ruleForm2.newpassword2"
-                          auto-complete="off"></el-input>
-              </el-form-item>
               <el-form-item label="手机号" prop="phone">
                 <el-input v-model="ruleForm2.phone" placeholder="验证码登录使用"></el-input>
               </el-form-item>
@@ -77,6 +66,37 @@
                 <el-button @click="resetForm('ruleForm2')">重置</el-button>
               </el-form-item>
             </el-form>
+            <el-form :model="ruleForm2"
+                     :rules="rules2"
+                     ref="ruleForm2"
+                     label-width="100px"
+                     v-if="switchStatus==='passwordManager'"
+                     class="demo-ruleForm">
+              <el-form-item label="原密码"
+                            prop="password">
+                <el-input type="password"
+                          v-model="ruleForm2.password"
+                          auto-complete="off"></el-input>
+              </el-form-item>
+              <el-form-item label="密码"
+                            prop="newpassword1">
+                <el-input type="password"
+                          v-model="ruleForm2.newpassword1"
+                          auto-complete="off"></el-input>
+              </el-form-item>
+              <el-form-item label="确认密码"
+                            prop="newpassword2">
+                <el-input type="password"
+                          v-model="ruleForm2.newpassword2"
+                          auto-complete="off"></el-input>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary"
+                           @click="submitForm('ruleForm2')">提交
+                </el-button>
+                <el-button @click="resetForm('ruleForm2')">重置</el-button>
+              </el-form-item>
+            </el-form>
           </div>
         </el-col>
       </el-row>
@@ -106,6 +126,7 @@
         }
       }
       return {
+        switchStatus: '',
         avatarUrl: '',
         show: false,
         headers: {
@@ -130,7 +151,8 @@
       this.ruleForm2.username = this.userInfo.username
       this.ruleForm2.phone = this.userInfo.phone
       this.ruleForm2.avatar = this.userInfo.avatar
-      handleImg(this.userInfo.avatar,'avatar')
+      this.switchStatus = 'userManager'
+      handleImg(this.userInfo.avatar, 'avatar')
     },
     computed: {
       ...mapState({
@@ -138,6 +160,9 @@
       }),
     },
     methods: {
+      switchTab(tab, event) {
+        this.switchStatus = tab.name
+      },
       submitForm(formName) {
         this.$refs[formName].validate(valid => {
           if (valid) {
@@ -153,10 +178,12 @@
                   type: 'success',
                   duration: 2000
                 })
-                // 修改之后强制重新登录
-                this.$store.dispatch('LogOut').then(() => {
-                  location.reload() // 为了重新实例化vue-router对象 避免bug
-                })
+                // 修改密码之后强制重新登录
+                if (this.switchStatus === 'passwordManager') {
+                  this.$store.dispatch('LogOut').then(() => {
+                    location.reload() // 为了重新实例化vue-router对象 避免bug
+                  })
+                }
               } else {
                 this.$notify({
                   title: '失败',
@@ -195,7 +222,7 @@
       },
       handleAvatarSuccess(res, file) {
         this.avatarUrl = URL.createObjectURL(file.raw);
-        this.ruleForm2.avatar = res.data.bucketName + "-" +  res.data.fileName;
+        this.ruleForm2.avatar = res.data.bucketName + "-" + res.data.fileName;
       }
     }
   }