前端代码优化 修改密码迁移至个人中心内部

web/src/view/layout/index.vue

@@ -43,7 +43,6 @@
                         <el-badge is-dot />
                       </span>
                     </el-dropdown-item>
-                    <el-dropdown-item @click.native="showPassword=true" icon="el-icon-s-custom">修改密码</el-dropdown-item>
                     <el-dropdown-item @click.native="toPerson" icon="el-icon-s-custom">个人信息</el-dropdown-item>
                     <el-dropdown-item @click.native="LoginOut" icon="el-icon-table-lamp">登 出</el-dropdown-item>
                   </el-dropdown-menu>
@@ -67,23 +66,7 @@
        <BottomInfo />
       </el-main>
     </el-container>
-    <el-dialog :visible.sync="showPassword" @close="clearPassword" title="修改密码" width="360px">
-      <el-form :model="pwdModify" :rules="rules" label-width="80px" ref="modifyPwdForm">
-        <el-form-item :minlength="6" label="原密码" prop="password">
-          <el-input show-password v-model="pwdModify.password"></el-input>
-        </el-form-item>
-        <el-form-item :minlength="6" label="新密码" prop="newPassword">
-          <el-input show-password v-model="pwdModify.newPassword"></el-input>
-        </el-form-item>
-        <el-form-item :minlength="6" label="确认密码" prop="confirmPassword">
-          <el-input show-password v-model="pwdModify.confirmPassword"></el-input>
-        </el-form-item>
-      </el-form>
-      <div class="dialog-footer" slot="footer">
-        <el-button @click="showPassword=false">取 消</el-button>
-        <el-button @click="savePassword" type="primary">确 定</el-button>
-      </div>
-    </el-dialog>
+   
   </el-container>
 </template>
 
@@ -94,7 +77,6 @@ import Screenfull from '@/view/layout/screenfull'
 import Search from '@/view/layout/search/search'
 import BottomInfo from '@/view/layout/bottomInfo/bottomInfo'
 import { mapGetters, mapActions } from 'vuex'
-import { changePassword } from '@/api/user'
 import CustomPic from '@/components/customPic'
 export default {
   name: 'Layout',
@@ -105,33 +87,8 @@ export default {
       isSider: true,
       isMobile: false,
       isShadowBg: false,
-      showPassword: false,
       loadingFlag:false,
-      pwdModify: {},
-      rules: {
-        password: [
-          { required: true, message: '请输入密码', trigger: 'blur' },
-          { min: 6, message: '最少6个字符', trigger: 'blur' }
-        ],
-        newPassword: [
-          { required: true, message: '请输入新密码', trigger: 'blur' },
-          { min: 6, message: '最少6个字符', trigger: 'blur' }
-        ],
-        confirmPassword: [
-          { required: true, message: '请输入确认密码', trigger: 'blur' },
-          { min: 6, message: '最少6个字符', trigger: 'blur' },
-          {
-            validator: (rule, value, callback) => {
-              if (value !== this.pwdModify.newPassword) {
-                callback(new Error('两次密码不一致'))
-              } else {
-                callback()
-              }
-            },
-            trigger: 'blur'
-          }
-        ]
-      },
+      
       value: ''
     }
   },
@@ -159,30 +116,6 @@ export default {
       this.isSider = !!this.isCollapse
       this.totalCollapse()
     },
-    savePassword() {
-      this.$refs.modifyPwdForm.validate(valid => {
-        if (valid) {
-          changePassword({
-            username: this.userInfo.userName,
-            password: this.pwdModify.password,
-            newPassword: this.pwdModify.newPassword
-          }).then(() => {
-            this.$message.success('修改密码成功！')
-            this.showPassword = false
-          })
-        } else {
-          return false
-        }
-      })
-    },
-    clearPassword() {
-      this.pwdModify = {
-        password: '',
-        newPassword: '',
-        confirmPassword: ''
-      }
-      this.$refs.modifyPwdForm.clearValidate()
-    }
   },
   computed: {
     ...mapGetters('user', ['userInfo']),

web/src/view/layout/search/search.vue

@@ -3,6 +3,7 @@
     <transition name="el-fade-in-linear">
       <div class="transition-box" style="display: inline-block; " v-show="show">
         <el-select
+          ref="search-input"
           @blur="hiddenSearch"
           @change="changeRouter"
           filterable
@@ -18,36 +19,41 @@
         </el-select>
       </div>
     </transition>
-    <div :style="{display:'inline-block'}" class="user-box">
-      <i @click="show = !show" class="el-icon-search search-icon"></i>
+    <div :style="{display:'inline-block',float:'right'}" class="user-box">
+      <i @click="showSearch()" class="el-icon-search search-icon"></i>
     </div>
   </div>
 </template>
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters } from "vuex";
 
 export default {
-  name: 'searchComponent',
+  name: "searchComponent",
   data() {
     return {
-      value: '',
+      value: "",
       show: false
-    }
+    };
   },
   computed: {
-    ...mapGetters('router', ['routerList'])
+    ...mapGetters("router", ["routerList"])
   },
   methods: {
     changeRouter() {
-      this.$router.push({ name: this.value })
-      this.value = ''
+      this.$router.push({ name: this.value });
+      this.value = "";
     },
     hiddenSearch() {
-      this.show = false
+      this.show = false;
+    },
+    showSearch() {
+      this.show = true;
+      this.$nextTick(()=>{
+        this.$refs['search-input'].focus()
+      })
     }
   }
-}
+};
 </script>
 <style lang="scss">
-
 </style>