修改密码

src/api/config.js

@@ -8,6 +8,7 @@ export default {
   delayTime: 500,
   urls: {
     'promptServer':'/sys/file/uploadImage',    //静态知识富文本图片上传
+    'midifyPassword':'/sys/user/midifyPassword',    //修改密码
     'getConceptKnowledgeList':'/graph/conceptInfo/getPage', //  术语静态知识列表
     'getConceptKnowledge':'/graph/conceptInfo/getRecordById',//术语静态知识详情
     'getAllConcept':'/graph/conceptInfo/staticKnowledgeIndexWithoutInfo',   //医学术语--获取所有概念（标准术语）

src/api/index.js

@@ -20,5 +20,8 @@ export default {
   getAccessdMenu() {
     return axios.post(urls.getAccessdMenu);
   },
+  midifyPassword(param) {
+    return axios.post(urls.midifyPassword, param);
+  },
  
 }

src/components/common/HomePage.vue

@@ -17,7 +17,7 @@
                       <img class="actionDo" src="../../images/arrow_down.png" />
                     </span>
                     <ul class="action">
-                      <li>修改密码</li>
+                      <li @click="changeWords">修改密码</li>
                       <li @click="logout">退出系统</li>
                     </ul>
                 </div>
@@ -27,11 +27,26 @@
             </el-main>
         </el-container>
         <el-dialog
-                title="版本信息"
-                :visible.sync="versionVisible"
-                width="50%"
-                class="version-info">
-            <div v-html="versionInfo"></div>
+          title="修改密码"
+          class="changewords"
+          :visible.sync="changePassWord"
+          width="600"
+          top="20vh"
+          center>
+          <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
+            <el-form-item label="旧密码：" prop="oldpass">
+              <el-input type="password" placeholder="请输入旧密码" v-model.trim="ruleForm2.oldpass" auto-complete="off"></el-input>
+            </el-form-item>            
+            <el-form-item label="新密码：" prop="pass">
+              <el-input type="password" placeholder="请输入新密码" v-model.trim="ruleForm2.pass" auto-complete="off"></el-input>
+            </el-form-item>
+            <el-form-item label="再次输入新密码：" prop="checkPass">
+              <el-input type="password" placeholder="请再次输入新密码" v-model.trim="ruleForm2.checkPass" auto-complete="off"></el-input>
+            </el-form-item>
+          </el-form>
+          <span slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="submitForm('ruleForm2')">确 定</el-button>
+          </span>
         </el-dialog>
     </el-container>
 </template>
@@ -40,12 +55,39 @@
   import LtMenu from '../common/Menu.vue';
   import api from '@api/index.js';
   import newIcon from '../../images/new.png';
+  import md5 from 'js-md5'
   export default {
     name: 'homepage',
     components: {
       'lt-menu': LtMenu,
     },
-    data: function () {
+    data() {
+      var validatePass1 = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请输入旧密码'));
+        } else {
+          callback();
+        }
+      };
+      var validatePass = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请输入新密码'));
+        } else {
+          if (this.ruleForm2.checkPass !== '') {
+            this.$refs.ruleForm2.validateField('checkPass');
+          }
+          callback();
+        }
+      };
+      var validatePass2 = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请再次输入新密码'));
+        } else if (value !== this.ruleForm2.pass) {
+          callback(new Error('两次输入密码不一致!'));
+        } else {
+          callback();
+        }
+      };
       return {
         menuWrappers: null,
         organization: null,
@@ -58,6 +100,24 @@
         versionInfo:'',
         isNewV:false,
         version:null,       //版本信息接口返回的数据
+        changePassWord: false,
+
+        ruleForm2: {
+          pass: '',
+          checkPass: '',
+          oldpass: ''
+        },
+        rules2: {
+          oldpass: [
+            { validator: validatePass1, trigger: 'blur',required:true }
+          ],
+          pass: [
+            { validator: validatePass, trigger: 'blur',required:true }
+          ],
+          checkPass: [
+            { validator: validatePass2, trigger: 'blur',required:true }
+          ]
+        }
       }
     },
     computed: {
@@ -81,6 +141,60 @@
         }
     },
     methods: {
+      CalcuMD5(password){
+        // password = password.toUpperCase();
+        password = md5(password);
+        return password;
+      },
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            api.midifyPassword({
+              'password':this.CalcuMD5(this.ruleForm2.oldpass),
+              'modifyPassword':this.CalcuMD5(this.ruleForm2.pass)
+            }).then((res) => {
+              if (res.data.code == '0') {
+                const data = res.data.data;
+                this.$refs['ruleForm2'].resetFields();
+                this.changePassWord = false
+                this.$message({
+                  message: '修改成功',
+                  type: 'success',
+                  duration: 1000,
+                  onClose:()=>{
+                    this.logout()
+                  }
+                })
+              }else{
+                this.$message({
+                  message: res.data.msg,
+                  type: 'error',
+                  duration: 1000,
+                })
+              }
+            }).catch((error) => {
+              console.log(error);
+            });
+            // this.$message({
+            //   message: '修改成功',
+            //   type: 'success',
+            //   duration: 1000,
+            // })
+            // setTimeout(() => {
+            //   this.logout()
+            // }, 1000);
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      },
+      changeWords(){
+        this.changePassWord = true
+      },
       getMenuList(){
         api.getAccessdMenu().then((res) => {
           if (res.data.code == '0') {

src/components/login/Login.vue

@@ -13,7 +13,7 @@
                       <el-form :model="ruleForm2" :rules="rules2" ref="ruleFormReg">
                           <p class="personTip">用户名</p>
                           <el-form-item prop="tel">
-                              <el-input v-model="ruleForm2.tel" name="username" autocomplete="off" maxlength="11"
+                              <el-input v-model.trim="ruleForm2.tel" name="username" autocomplete="off" maxlength="11"
                                         placeholder="请输入用户名或手机号"
                                         clearable class="ri-tel" @keyup.enter.native="submitForm('ruleForm2')"
                                         ref="username"></el-input>
@@ -21,7 +21,7 @@
                           <div style="height: 16px;"></div>
                           <p class="personTip">密码</p>
                           <el-form-item prop="pwd">
-                              <el-input v-model="ruleForm2.pwd" name="password" autocomplete="off" maxlength="16"
+                              <el-input v-model.trim="ruleForm2.pwd" name="password" autocomplete="off" maxlength="16"
                                         placeholder="请输入密码"
                                         clearable type="password" class="ri-pwd"
                                         @keyup.enter.native="submitForm('ruleForm2')" ref="password"></el-input>

src/less/common.less

@@ -207,4 +207,30 @@
 }
 .el-button--text:focus, .el-button--text:hover, .el-date-table td.available:hover {
   opacity: 1 !important;
+}
+// el-form-item el-form-item--feedback is-error is-required
+.changewords {
+  .el-dialog__header {
+    text-align: left;
+  }
+  .el-form-item {
+    margin-bottom: 40px;
+  }
+  .el-form-item__label {
+    width: 160px !important;
+  }
+  .el-form-item__content {
+    margin-left: 160px !important;
+  }
+  .el-dialog--center .el-dialog__body {
+    padding-right: 80px;
+    padding-bottom: 0;
+  }
+  .el-dialog {
+    width: 600px !important;
+    border-radius: 4px;
+  }
+  .el-dialog__footer {
+    padding-bottom: 30px;
+  }
 }