@中文描述:修改密码页面路由 @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1

08335 / hivui-platform-template

hivui平台项目模板

Browse code @中文描述:修改密码页面路由 @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1 master
1 parent 1b413ec commit 98603a8be783ef11978cdb74f0dff0ae2b7ea2a0 20278 authored on 9 Apr 2024

Showing 3 changed files

Ignore Space Show notes View project/hivuiMain/router.js
// import Vue from 'vue' // import VueRouter from 'vue-router' import Layout from './views/layout/index.vue' //import Home from './views/Home.vue' import Design from './views/design/index.vue' import store from './store/index' // Vue.use(VueRouter) const router =new VueRouter({ //mode: 'history', mode: 'hash', // base: import.meta.env.VITE_BASE_URL, routes: [ { path: '/', name: 'home', meta: {}, component: Layout },{ path: '/design', name: 'design', meta: { title: Vue.prototype.$t('hivuiMain_des_title')}, component: Design },{ path: '/taskCenter', name: 'taskCenter', meta: {}, component: () => import( './views/taskCenter.vue') },{ path: '/personalCenter', name: 'personalCenter', meta: {}, component: () => import( './views/personalCenter/index.vue') },{ path: '/modifyPw', name: 'modifyPw', meta: {}, component: () => import( './views/modifyPw/index.vue') },{ path: '/About', name: 'About', meta: {}, component: () => import( './views/About.vue') }, { path: '/test', name: 'testApi', meta: {}, component: () => import( './views/test/index.vue') }, /* { path: '/about', name: 'about', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. // webpackChunkName: "about" component: () => import( './views/About.vue') }, / { path: '', name: 'home', meta: {}, component: Layout }, ] }) export default router; // import Vue from 'vue' // import VueRouter from 'vue-router' import Layout from './views/layout/index.vue' //import Home from './views/Home.vue' import Design from './views/design/index.vue' import store from './store/index' // Vue.use(VueRouter) const router =new VueRouter({ //mode: 'history', mode: 'hash', // base: import.meta.env.VITE_BASE_URL, routes: [ { path: '/', name: 'home', meta: {}, component: Layout },{ path: '/design', name: 'design', meta: { title: Vue.prototype.$t('hivuiMain_des_title')}, component: Design },{ path: '/taskCenter', name: 'taskCenter', meta: {}, component: () => import( './views/taskCenter.vue') },{ path: '/personalCenter', name: 'personalCenter', meta: {}, component: () => import( './views/personalCenter/index.vue') },{ path: '/About', name: 'About', meta: {}, component: () => import( './views/About.vue') }, { path: '/test', name: 'testApi', meta: {}, component: () => import( './views/test/index.vue') }, /* { path: '/about', name: 'about', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. // webpackChunkName: "about" component: () => import( './views/About.vue') }, / { path: '', name: 'home', meta: {}, component: Layout }, ] }) export default router;

Ignore Space Show notes View

project/hivuiMain/router.js

// import Vue from 'vue'
// import VueRouter from 'vue-router'
import Layout from './views/layout/index.vue'
//import Home from './views/Home.vue'
import Design from './views/design/index.vue'
import store from './store/index'

// Vue.use(VueRouter)

const router =new VueRouter({
  //mode: 'history',
  mode: 'hash',
  // base: import.meta.env.VITE_BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      meta: {},
      component: Layout
    },{
      path: '/design',
      name: 'design',
      meta: { title: Vue.prototype.$t('hivuiMain_des_title')},
      component: Design
    },{
      path: '/taskCenter',
      name: 'taskCenter',
      meta: {},
      component: () => import( './views/taskCenter.vue')
    },{
      path: '/personalCenter',
      name: 'personalCenter',
      meta: {},
      component: () => import( './views/personalCenter/index.vue')
    },{
      path: '/modifyPw',
      name: 'modifyPw',
      meta: {},
      component: () => import( './views/modifyPw/index.vue')
    },{
      path: '/About',
      name: 'About',
      meta: {},
      component: () => import( './views/About.vue')
    },
    {
      path: '/test',
      name: 'testApi',
      meta: {},
      component: () => import( './views/test/index.vue')
    },
    /*
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      // webpackChunkName: "about" 
      component: () => import( './views/About.vue')
    },
    */ 
    {
      path: '*',
      name: 'home',
      meta: {},
      component: Layout
    },
  ]
}) 
export default router;

// Vue.use(VueRouter)

const router =new VueRouter({
  //mode: 'history',
  mode: 'hash',
  // base: import.meta.env.VITE_BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      meta: {},
      component: Layout
    },{
      path: '/design',
      name: 'design',
      meta: { title: Vue.prototype.$t('hivuiMain_des_title')},
      component: Design
    },{
      path: '/taskCenter',
      name: 'taskCenter',
      meta: {},
      component: () => import( './views/taskCenter.vue')
    },{
      path: '/personalCenter',
      name: 'personalCenter',
      meta: {},
      component: () => import( './views/personalCenter/index.vue')
    },{
      path: '/About',
      name: 'About',
      meta: {},
      component: () => import( './views/About.vue')
    },
    {
      path: '/test',
      name: 'testApi',
      meta: {},
      component: () => import( './views/test/index.vue')
    },
    /*
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      // webpackChunkName: "about" 
      component: () => import( './views/About.vue')
    },
    */ 
    {
      path: '*',
      name: 'home',
      meta: {},
      component: Layout
    },
  ]
}) 
export default router;

Ignore Space Show notes View project/hivuiMain/views/layout/components/modifyPw/index.vue
<template> <el-dialog :title="modalTitle" :visible.sync="showDialog" width="500px" :close-on-click-modal="false" :append-to-body="true" :show-close="false" > <el-form class="modifyPw" ref="form" :model="formData" :rules="rules"> <el-form-item :label="$t('hivuiMain_modifypw_oldpw')" :label-width="formLabelWidth" prop="oldPw"> <el-input ref="oldPw" type="password" v-model="formData.oldPw" autocomplete="off" :placeholder="$t('hivuiMain_modifypw_oldpw')" ></el-input> </el-form-item> <el-form-item :label="$t('hivuiMain_modifypw_newpw')" :label-width="formLabelWidth" prop="newPw"> <el-input ref="newPw" type="password" v-model="formData.newPw" autocomplete="off" @input="onChange" :placeholder="$t('hivuiMain_modifypw_newpw_ph')" ></el-input> </el-form-item> <el-progress :style="pwStrengthStyle()" :percentage="currPwStrength.num" :color="currPwStrength.color" :format="format"></el-progress> <el-form-item :label="$t('hivuiMain_modifypw_newpw2')" :label-width="formLabelWidth" prop="newPw2"> <el-input ref="newPw2" type="password" v-model="formData.newPw2" autocomplete="off" :placeholder="$t('hivuiMain_modifypw_newpw2_ph')" ></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="cancel" :loading="dialogLoading">{{$t('hivuiMain_dialog_cancel')}}</el-button> <el-button type="primary" @click="submit" :loading="dialogLoading">{{$t('hivuiMain_dialog_define')}}</el-button> </div> </el-dialog> </template> <script> import { modifyPassword } from '@main/api/user' import md5 from "js-md5"; export default { data(){ var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error(this.$t('hivuiMain_modifypw_valid_pw2_empty2'))); } else if (value !== this.formData.newPw) { callback(new Error(this.$t('hivuiMain_modifypw_valid_pw2_msg'))); } else { callback(); } }; return { modalTitle:this.$t('hivuiMain_modifypw_title'), formLabelWidth:"140px", formData:{ oldPw:'', newPw:'', newPw2:'', }, dialogLoading:false, rules: { oldPw: [{ required: true, message: this.$t('hivuiMain_modifypw_oldpw'), trigger: "blur" }], newPw: [ { required: true, message: this.$t('hivuiMain_modifypw_valid_pw_empty'), trigger: "blur" }, { min:4,max:25, message: this.$t('hivuiMain_modifypw_newpw_ph'), trigger: "blur" }, ], newPw2: [ { required: true, message: this.$t('hivuiMain_modifypw_valid_pw2_empty'), trigger: "blur" }, { validator:validatePass, trigger: "blur" }, ], }, currPwStrength:{}, pwStrength:[ { num:33, desc:this.$t('hivuiMain_modifypw_weak'), color:'#f56c6c', }, { num:66, desc:this.$t('hivuiMain_modifypw_middle'), color:'#e6a23c', }, { num:100, desc:this.$t('hivuiMain_modifypw_strong'), color:'#67c23a', }, ], }; }, computed:{ showDialog(){ return this.$store.getters.showPwDialog; }, }, mounted(){ }, methods:{ submit(){ let me=this; this.$refs.form.validate((valid) => { if(valid){ this.dialogLoading=true; modifyPassword({ oldPwd:md5(this.formData.oldPw), newPwd:md5(this.formData.newPw), }).then(res=>{ this.$store.dispatch("user/showPwDialog",false); this.dialogLoading=false; this.formData={ oldPw:'', newPw:'', newPw2:'', }; this.$message({ type:"success", message:me.$t('hivuiMain_modifypw_success') }); setTimeout(()=>{ if(window.modifyPwAfterSubmit){//自定义确定事件 window.modifyPwAfterSubmit(); }else{ this.$store.dispatch("user/logout").then(()=>{ location=window.HIVUI_SETTING.loginUrl; }); } },1500); }).catch(err=>{ this.dialogLoading=false; }); }else{ } }); }, cancel(){ if(window.modifyPwAfterCancel){//自定义关闭事件 window.modifyPwAfterCancel(); }else{ this.$store.dispatch("user/showPwDialog",false); } this.dialogLoading=false; this.formData={ oldPw:'', newPw:'', newPw2:'', }; }, onChange(val){ var strongRegex = new RegExp("^(?=.{8,})(?=.[A-Z])(?=.[a-z])(?=.[0-9])(?=.\\W).$", "g"); var mediumRegex = new RegExp("^(?=.{7,})(((?=.[A-Z])(?=.[a-z]))\|((?=.[A-Z])(?=.[0-9]))\|((?=.[a-z])(?=.[0-9]))).$", "g"); var enoughRegex = new RegExp("(?=.{4,}).", "g"); if(strongRegex.test(val)){ this.currPwStrength=this.pwStrength[2]; }else if(mediumRegex.test(val)){ this.currPwStrength=this.pwStrength[1]; }else if(enoughRegex.test(val)){ this.currPwStrength=this.pwStrength[0]; }else{ this.currPwStrength={}; } }, format(){ return this.currPwStrength.desc; }, pwStrengthStyle(){ return `margin-left:calc(${this.formLabelWidth} + 15px);margin-bottom:10px;width:calc(100% - ${this.formLabelWidth})` }, } } </script> <style lang="less" scoped> .modifyPw{ /deep/.el-dialog__body{ word-break: break-word; } } </style> <template> <el-dialog :title="modalTitle" :visible.sync="showDialog" width="500px" :close-on-click-modal="false" :append-to-body="true" :show-close="false" > <el-form class="modifyPw" ref="form" :model="formData" :rules="rules"> <el-form-item :label="$t('hivuiMain_modifypw_oldpw')" :label-width="formLabelWidth" prop="oldPw"> <el-input ref="oldPw" type="password" v-model="formData.oldPw" autocomplete="off" :placeholder="$t('hivuiMain_modifypw_oldpw')" ></el-input> </el-form-item> <el-form-item :label="$t('hivuiMain_modifypw_newpw')" :label-width="formLabelWidth" prop="newPw"> <el-input ref="newPw" type="password" v-model="formData.newPw" autocomplete="off" @input="onChange" :placeholder="$t('hivuiMain_modifypw_newpw_ph')" ></el-input> </el-form-item> <el-progress :style="pwStrengthStyle()" :percentage="currPwStrength.num" :color="currPwStrength.color" :format="format"></el-progress> <el-form-item :label="$t('hivuiMain_modifypw_newpw2')" :label-width="formLabelWidth" prop="newPw2"> <el-input ref="newPw2" type="password" v-model="formData.newPw2" autocomplete="off" :placeholder="$t('hivuiMain_modifypw_newpw2_ph')" ></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="cancel" :loading="dialogLoading">{{$t('hivuiMain_dialog_cancel')}}</el-button> <el-button type="primary" @click="submit" :loading="dialogLoading">{{$t('hivuiMain_dialog_define')}}</el-button> </div> </el-dialog> </template> <script> import { modifyPassword } from '@main/api/user' import md5 from "js-md5"; export default { data(){ var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error(this.$t('hivuiMain_modifypw_valid_pw2_empty2'))); } else if (value !== this.formData.newPw) { callback(new Error(this.$t('hivuiMain_modifypw_valid_pw2_msg'))); } else { callback(); } }; return { modalTitle:this.$t('hivuiMain_modifypw_title'), formLabelWidth:"140px", formData:{ oldPw:'', newPw:'', newPw2:'', }, dialogLoading:false, rules: { oldPw: [{ required: true, message: this.$t('hivuiMain_modifypw_oldpw'), trigger: "blur" }], newPw: [ { required: true, message: this.$t('hivuiMain_modifypw_valid_pw_empty'), trigger: "blur" }, { min:4,max:25, message: this.$t('hivuiMain_modifypw_newpw_ph'), trigger: "blur" }, ], newPw2: [ { required: true, message: this.$t('hivuiMain_modifypw_valid_pw2_empty'), trigger: "blur" }, { validator:validatePass, trigger: "blur" }, ], }, currPwStrength:{}, pwStrength:[ { num:33, desc:this.$t('hivuiMain_modifypw_weak'), color:'#f56c6c', }, { num:66, desc:this.$t('hivuiMain_modifypw_middle'), color:'#e6a23c', }, { num:100, desc:this.$t('hivuiMain_modifypw_strong'), color:'#67c23a', }, ], }; }, computed:{ showDialog(){ return this.$store.getters.showPwDialog; }, }, mounted(){ }, methods:{ submit(){ let me=this; this.$refs.form.validate((valid) => { if(valid){ this.dialogLoading=true; modifyPassword({ oldPwd:md5(this.formData.oldPw), newPwd:md5(this.formData.newPw), }).then(res=>{ this.$store.dispatch("user/showPwDialog",false); this.dialogLoading=false; this.formData={ oldPw:'', newPw:'', newPw2:'', }; this.$message({ type:"success", message:me.$t('hivuiMain_modifypw_success') }); setTimeout(()=>{ this.$store.dispatch("user/logout").then(()=>{ location=window.HIVUI_SETTING.loginUrl; }); },1500); }).catch(err=>{ this.dialogLoading=false; }); }else{ } }); }, cancel(){ this.$store.dispatch("user/showPwDialog",false); this.dialogLoading=false; this.formData={ oldPw:'', newPw:'', newPw2:'', }; }, onChange(val){ var strongRegex = new RegExp("^(?=.{8,})(?=.[A-Z])(?=.[a-z])(?=.[0-9])(?=.\\W).$", "g"); var mediumRegex = new RegExp("^(?=.{7,})(((?=.[A-Z])(?=.[a-z]))\|((?=.[A-Z])(?=.[0-9]))\|((?=.[a-z])(?=.[0-9]))).$", "g"); var enoughRegex = new RegExp("(?=.{4,}).", "g"); if(strongRegex.test(val)){ this.currPwStrength=this.pwStrength[2]; }else if(mediumRegex.test(val)){ this.currPwStrength=this.pwStrength[1]; }else if(enoughRegex.test(val)){ this.currPwStrength=this.pwStrength[0]; }else{ this.currPwStrength={}; } }, format(){ return this.currPwStrength.desc; }, pwStrengthStyle(){ return `margin-left:calc(${this.formLabelWidth} + 15px);margin-bottom:10px;width:calc(100% - ${this.formLabelWidth})` }, } } </script> <style lang="less" scoped> .modifyPw{ /deep/.el-dialog__body{ word-break: break-word; } } </style>

Ignore Space Show notes View

project/hivuiMain/views/layout/components/modifyPw/index.vue

<template>
    <el-dialog :title="modalTitle"
      :visible.sync="showDialog"
      width="500px"
      :close-on-click-modal="false"
      :append-to-body="true"
      :show-close="false"
    >
        <el-form class="modifyPw" ref="form" :model="formData" :rules="rules">
            <el-form-item :label="$t('hivuiMain_modifypw_oldpw')" :label-width="formLabelWidth" prop="oldPw">
                <el-input
                    ref="oldPw"
                    type="password"
                    v-model="formData.oldPw"
                    autocomplete="off"
                    :placeholder="$t('hivuiMain_modifypw_oldpw')"
                ></el-input>
            </el-form-item>
            <el-form-item :label="$t('hivuiMain_modifypw_newpw')" :label-width="formLabelWidth" prop="newPw">
                <el-input
                    ref="newPw"
                    type="password"
                    v-model="formData.newPw"
                    autocomplete="off"
                    @input="onChange"
                    :placeholder="$t('hivuiMain_modifypw_newpw_ph')"
                ></el-input>
            </el-form-item>
            <el-progress :style="pwStrengthStyle()" :percentage="currPwStrength.num" :color="currPwStrength.color" :format="format"></el-progress>
            <el-form-item :label="$t('hivuiMain_modifypw_newpw2')" :label-width="formLabelWidth" prop="newPw2">
                <el-input
                    ref="newPw2"
                    type="password"
                    v-model="formData.newPw2"
                    autocomplete="off"
                    :placeholder="$t('hivuiMain_modifypw_newpw2_ph')"
                ></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel" :loading="dialogLoading">{{$t('hivuiMain_dialog_cancel')}}</el-button>
            <el-button type="primary" @click="submit" :loading="dialogLoading">{{$t('hivuiMain_dialog_define')}}</el-button>
        </div>
    </el-dialog>
</template>
<script> 
import { modifyPassword } from '@main/api/user'
import md5 from "js-md5";
export default {
    data(){
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error(this.$t('hivuiMain_modifypw_valid_pw2_empty2')));
            } else if (value !== this.formData.newPw) {
                callback(new Error(this.$t('hivuiMain_modifypw_valid_pw2_msg')));
            } else {
                callback();
            }
        };
        return {
            modalTitle:this.$t('hivuiMain_modifypw_title'),
            formLabelWidth:"140px",
            formData:{
                oldPw:'',
                newPw:'',
                newPw2:'',
            },
            dialogLoading:false,
            rules: {
                oldPw: [{ required: true, message: this.$t('hivuiMain_modifypw_oldpw'), trigger: "blur" }],
                newPw: [
                    { required: true, message: this.$t('hivuiMain_modifypw_valid_pw_empty'), trigger: "blur" },
                    { min:4,max:25, message: this.$t('hivuiMain_modifypw_newpw_ph'), trigger: "blur" },
                ],
                newPw2: [
                    { required: true, message: this.$t('hivuiMain_modifypw_valid_pw2_empty'), trigger: "blur" },
                    { validator:validatePass, trigger: "blur" },
                ],
            },
            currPwStrength:{},
            pwStrength:[
                {
                    num:33,
                    desc:this.$t('hivuiMain_modifypw_weak'),
                    color:'#f56c6c',
                },
                {
                    num:66,
                    desc:this.$t('hivuiMain_modifypw_middle'),
                    color:'#e6a23c',
                },
                {
                    num:100,
                    desc:this.$t('hivuiMain_modifypw_strong'),
                    color:'#67c23a',
                },
            ],
        };
    },
    computed:{
        showDialog(){
            return this.$store.getters.showPwDialog;
        },
    },
    mounted(){
        
    },
    methods:{ 
        submit(){
            let me=this;
            this.$refs.form.validate((valid) => {
                if(valid){
                    this.dialogLoading=true;
                    modifyPassword({
                        oldPwd:md5(this.formData.oldPw),
                        newPwd:md5(this.formData.newPw),
                    }).then(res=>{
                        this.$store.dispatch("user/showPwDialog",false);
                        this.dialogLoading=false;
                        this.formData={
                            oldPw:'',
                            newPw:'',
                            newPw2:'',
                        };
                        this.$message({
                            type:"success",
                            message:me.$t('hivuiMain_modifypw_success')
                        });
                        setTimeout(()=>{
                            if(window.modifyPwAfterSubmit){//自定义确定事件
                                window.modifyPwAfterSubmit();
                            }else{
                                this.$store.dispatch("user/logout").then(()=>{
                                    location=window.HIVUI_SETTING.loginUrl;
                                });
                            }
                        },1500);
                    }).catch(err=>{
                        this.dialogLoading=false;
                    });
                }else{

}
            });
        },
        cancel(){
            if(window.modifyPwAfterCancel){//自定义关闭事件
                window.modifyPwAfterCancel();
            }else{
                this.$store.dispatch("user/showPwDialog",false);
            }
            this.dialogLoading=false;
            this.formData={
                oldPw:'',
                newPw:'',
                newPw2:'',
            };
        },
        onChange(val){
            var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"); 
			var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g"); 
            var enoughRegex = new RegExp("(?=.{4,}).*", "g"); 
            if(strongRegex.test(val)){
                this.currPwStrength=this.pwStrength[2];
            }else if(mediumRegex.test(val)){
                this.currPwStrength=this.pwStrength[1];
            }else if(enoughRegex.test(val)){
                this.currPwStrength=this.pwStrength[0];
            }else{
                this.currPwStrength={};
            }
        },
        format(){
            return this.currPwStrength.desc;
        },
        pwStrengthStyle(){
            return `margin-left:calc(${this.formLabelWidth} + 15px);margin-bottom:10px;width:calc(100% - ${this.formLabelWidth})`
        },
    }
}
</script>
<style lang="less" scoped>
    .modifyPw{
        /deep/.el-dialog__body{
            word-break: break-word;
        }
    }
    
</style>

<template>
    <el-dialog :title="modalTitle"
      :visible.sync="showDialog"
      width="500px"
      :close-on-click-modal="false"
      :append-to-body="true"
      :show-close="false"
    >
        <el-form class="modifyPw" ref="form" :model="formData" :rules="rules">
            <el-form-item :label="$t('hivuiMain_modifypw_oldpw')" :label-width="formLabelWidth" prop="oldPw">
                <el-input
                    ref="oldPw"
                    type="password"
                    v-model="formData.oldPw"
                    autocomplete="off"
                    :placeholder="$t('hivuiMain_modifypw_oldpw')"
                ></el-input>
            </el-form-item>
            <el-form-item :label="$t('hivuiMain_modifypw_newpw')" :label-width="formLabelWidth" prop="newPw">
                <el-input
                    ref="newPw"
                    type="password"
                    v-model="formData.newPw"
                    autocomplete="off"
                    @input="onChange"
                    :placeholder="$t('hivuiMain_modifypw_newpw_ph')"
                ></el-input>
            </el-form-item>
            <el-progress :style="pwStrengthStyle()" :percentage="currPwStrength.num" :color="currPwStrength.color" :format="format"></el-progress>
            <el-form-item :label="$t('hivuiMain_modifypw_newpw2')" :label-width="formLabelWidth" prop="newPw2">
                <el-input
                    ref="newPw2"
                    type="password"
                    v-model="formData.newPw2"
                    autocomplete="off"
                    :placeholder="$t('hivuiMain_modifypw_newpw2_ph')"
                ></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel" :loading="dialogLoading">{{$t('hivuiMain_dialog_cancel')}}</el-button>
            <el-button type="primary" @click="submit" :loading="dialogLoading">{{$t('hivuiMain_dialog_define')}}</el-button>
        </div>
    </el-dialog>
</template>
<script> 
import { modifyPassword } from '@main/api/user'
import md5 from "js-md5";
export default {
    data(){
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error(this.$t('hivuiMain_modifypw_valid_pw2_empty2')));
            } else if (value !== this.formData.newPw) {
                callback(new Error(this.$t('hivuiMain_modifypw_valid_pw2_msg')));
            } else {
                callback();
            }
        };
        return {
            modalTitle:this.$t('hivuiMain_modifypw_title'),
            formLabelWidth:"140px",
            formData:{
                oldPw:'',
                newPw:'',
                newPw2:'',
            },
            dialogLoading:false,
            rules: {
                oldPw: [{ required: true, message: this.$t('hivuiMain_modifypw_oldpw'), trigger: "blur" }],
                newPw: [
                    { required: true, message: this.$t('hivuiMain_modifypw_valid_pw_empty'), trigger: "blur" },
                    { min:4,max:25, message: this.$t('hivuiMain_modifypw_newpw_ph'), trigger: "blur" },
                ],
                newPw2: [
                    { required: true, message: this.$t('hivuiMain_modifypw_valid_pw2_empty'), trigger: "blur" },
                    { validator:validatePass, trigger: "blur" },
                ],
            },
            currPwStrength:{},
            pwStrength:[
                {
                    num:33,
                    desc:this.$t('hivuiMain_modifypw_weak'),
                    color:'#f56c6c',
                },
                {
                    num:66,
                    desc:this.$t('hivuiMain_modifypw_middle'),
                    color:'#e6a23c',
                },
                {
                    num:100,
                    desc:this.$t('hivuiMain_modifypw_strong'),
                    color:'#67c23a',
                },
            ],
        };
    },
    computed:{
        showDialog(){
            return this.$store.getters.showPwDialog;
        },
    },
    mounted(){
        
    },
    methods:{ 
        submit(){
            let me=this;
            this.$refs.form.validate((valid) => {
                if(valid){
                    this.dialogLoading=true;
                    modifyPassword({
                        oldPwd:md5(this.formData.oldPw),
                        newPwd:md5(this.formData.newPw),
                    }).then(res=>{
                        this.$store.dispatch("user/showPwDialog",false);
                        this.dialogLoading=false;
                        this.formData={
                            oldPw:'',
                            newPw:'',
                            newPw2:'',
                        };
                        this.$message({
                            type:"success",
                            message:me.$t('hivuiMain_modifypw_success')
                        });
                        setTimeout(()=>{
                            this.$store.dispatch("user/logout").then(()=>{
                                location=window.HIVUI_SETTING.loginUrl;
                            });
                        },1500);
                    }).catch(err=>{
                        this.dialogLoading=false;
                    });
                }else{

}
            });
        },
        cancel(){
            this.$store.dispatch("user/showPwDialog",false);
            this.dialogLoading=false;
            this.formData={
                oldPw:'',
                newPw:'',
                newPw2:'',
            };
        },
        onChange(val){
            var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"); 
			var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g"); 
            var enoughRegex = new RegExp("(?=.{4,}).*", "g"); 
            if(strongRegex.test(val)){
                this.currPwStrength=this.pwStrength[2];
            }else if(mediumRegex.test(val)){
                this.currPwStrength=this.pwStrength[1];
            }else if(enoughRegex.test(val)){
                this.currPwStrength=this.pwStrength[0];
            }else{
                this.currPwStrength={};
            }
        },
        format(){
            return this.currPwStrength.desc;
        },
        pwStrengthStyle(){
            return `margin-left:calc(${this.formLabelWidth} + 15px);margin-bottom:10px;width:calc(100% - ${this.formLabelWidth})`
        },
    }
}
</script>
<style lang="less" scoped>
    .modifyPw{
        /deep/.el-dialog__body{
            word-break: break-word;
        }
    }
    
</style>

Ignore Space Show notes View project/hivuiMain/views/modifyPw/index.vue 0 → 100644
<template> <div> <modifyPw :isShow="true"></modifyPw> </div> </template> <script> import modifyPw from "@main/views/layout/components/modifyPw"; export default { components:{ modifyPw, }, mounted(){ this.$store.dispatch("user/showPwDialog",true); } } </script>

Show line notes below