首页新增

Oliver

2022-12-22 73b48dd59a2d47b365b87784371c4ef57dde659b

 src/views/layout/components/Header/updatePassword/index.vue

@@ -1,181 +1,162 @@
<template>
    <div class="createUser">
        <main>
            <div class="mainContent">
                <el-form ref="user" label-width="140px" :rules="createCarRules" autoComplete="on" :model="car"
                    label-position="right">
                    <!-- 车牌号 -->
                    <el-form-item class="optionItem" label="当前密码:" prop="carNumber">
                        <el-input v-model="car.carNumber" placeholder="请填写当前密码"></el-input>
                    </el-form-item>
                    <!-- 所属部门 -->
                    <el-form-item class="optionItems" label="新密码:" prop="depart">
                        <el-input v-model="car.depart" placeholder="请填写新密码"></el-input>
                    </el-form-item>
                    <!-- 所属大队 -->
                    <el-form-item class="optionItems" label="确定新密码:" prop="belong">
                        <el-input v-model="car.belong" placeholder="请二次填写新密码"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </main>
    </div>
  <div class="createUser">
    <main>
      <div class="mainContent">
        <el-form ref="password" label-width="120px" :rules="passwordRules" autoComplete="on" :model="password"
          label-position="right">
          <el-form-item class="optionItem" label="当前密码:" prop="oldPassword" show-password>
            <el-input type="password" v-model="password.oldPassword" placeholder="请填写当前密码" show-password> </el-input>
          </el-form-item>
          <el-form-item class="optionItems" label="新密码:" prop="newPassword" show-password>
            <el-input type="password" v-model="password.newPassword" placeholder="请填写新密码" show-password></el-input>
          </el-form-item>
          <el-form-item class="optionItems" label="确定新密码:" prop="confirmPassword" >
            <el-input type="password" v-model="password.confirmPassword" placeholder="请再次填写新密码" show-password></el-input>
          </el-form-item>
          <el-form-item class="optionItems">
            <el-button type="primary" @click="onSubmit">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </main>
  </div>
</template>
<script>
import {validateCarNum,validatePhone,validateName} from '@/utils/validate'
import users from "@/api/users";

export default {
    data() {
        const checkCarNum = (rule, value, callback) => {
            if (value) {
                if(validateCarNum(value)){
                    callback()
                }else{
                    callback(new Error('请输入正确的密码'));
                }
            } else {
                callback(new Error('密码不能为空'));
            }
  data() {
    const validatePass = (rule, value, callback) => {
          var rep =/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,16}$/;
          if (!rep.test(value) ) {
            callback(new Error("密码长度8到16位且密码中的字符必须包含字母大写和字母小写和必须包含数字，不能包含空格"));
          } else {
            callback();
          }
    };
    return {
      updatePasswordParam: {
        newPassword: "",
        oldPassword: "",
        username: ""
      },
      password: {
        oldPassword: null,
        newPassword: null,
        confirmPassword: null
      },
      passwordRules: {
        newPassword: [
          { required: true, trigger: 'blur', message: '新密码不能为空' },
          { validator: validatePass, trigger: 'blur' }
        ],
        oldPassword: [
          { required: true, trigger: 'blur', message: '当前密码不能为空' },
          // { validator: validatePass, trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, trigger: 'blur', message: '新密码不能为空' },
          { validator: validatePass, trigger: 'blur' }
        ],
      }
    }
  },
  created() {
  },
  methods: {
    onSubmit() {
      this.$refs.password.validate(valid => {
        if (valid) {
          this.updatePasswordParam.oldPassword = this.password.oldPassword;
          this.updatePasswordParam.username = sessionStorage.getItem('name');
          this.updatePasswordParam.newPassword = this.password.newPassword;
          users.updatePassword(this.updatePasswordParam)
            .then(() => {
              this.$message.success('修改密码成功, 即将重新登录');
              this.logout();
              location.reload();
            })
            .catch(err => this.$message.error(err))
        }
        const checkName = (rule, value, callback) => {
            if (value) {
                if(validateName(value)){
                    callback()
                }else{
                    callback(new Error('请输入正确的密码'));
                }
            } else {
                callback(new Error('新密码不能为空'));
            }
        }
        const checkUser = (rule, value, callback) => {
            if (value) {
                if(validateName(value)){
                    callback()
                }else{
                    callback(new Error('请输入正确的密码'));
                }
            } else {
                callback(new Error('新密码不能为空'));
            }
        }
        const checkPhone = (rule, value, callback) => {
            if (value) {
                if(validatePhone(value)){
                    callback()
                }else{
                    callback(new Error('请输入正确的手机号'));
                }
            } else {
                callback(new Error('手机号码不能为空'));
            }
        }
        return {
            car: {
            },
            createCarRules: {
                carNumber: [
                    {
                        required: true, trigger:'blur', validator: checkCarNum
                    }
                ],
                contact: [
                    {
                        required: true,trigger:'blur', validator: checkPhone
                    }
                ],
                // id: 0,
                ownerName: [
                    {
                        required: true,trigger:'blur', validator: checkName
                    }
                ],
                vehicleUser: [
                    {
                        required: true,trigger:'blur', validator: checkUser
                    }
                ]
            },
            teamList: [
                {
                    label: '大队一',
                    value: 1,
                },
                {
                    label: '大队二',
                    value: 2,
                },
            ]
        }
    },
    created() {
    },
    methods: {
    },
    // props: ['info']
      })
    }
    ,
    logout() {
      users.logout()
        .then(() => {
          sessionStorage.clear();
        })
        .catch(err => this.$message.error(err))
    }
  },
}
</script>
<style lang="scss" scoped>
.createUser {
    border-radius: 1px;
  border-radius: 1px;
  background-color: #09152f;

  main {
    text-align: left;
    padding: 0 55px;
    background-color: #09152f;
    padding-bottom: 50px;

    main {
        // border: 1px solid #fff;
        text-align: left;
        padding: 0 55px;
        background-color: #09152f;
        padding-bottom: 50px;
    .mainContent {
      display: flex;
      justify-content: center;
      padding-top: 50px;

        .mainContent {
            display: flex;
            justify-content: center;
            padding-top: 50px;
      .el-form-item__content {
        width: 400px;

            .el-form-item__content {
                width: 400px;

                .el-select {
                    width: 100%;
                }
            }

            .optionHandleSp {
                display: flex;

                .areaNumber,
                .moreNumber {
                    flex: 1;
                }

                .telNumber {
                    flex: 2;
                }
            }

            .optionBtn {
                display: flex;
                margin-top: 20px;

                .btn {
                    padding: 12px 50px;
                }
            }

        .el-select {
          width: 100%;
        }
    }
      }

    &::v-deep .el-textarea__inner {
        background-color: #09152f;
        border: 1px solid #17324c;
    }
      .optionHandleSp {
        display: flex;

    ::v-deep .el-form-item__label {
        color: #4b9bb7;
    }
        .areaNumber,
        .moreNumber {
          flex: 1;
        }

    ::v-deep .el-input__inner {
        background-color: #09152f;
        border: 1px solid #17324c;
        .telNumber {
          flex: 2;
        }
      }

      .optionBtn {
        display: flex;
        margin-top: 20px;

        .btn {
          padding: 12px 50px;
        }
      }

    }
  }

  &::v-deep .el-textarea__inner {
    background-color: #09152f;
    border: 1px solid #17324c;
  }

  ::v-deep .el-form-item__label {
    color: #4b9bb7;
  }

  ::v-deep .el-input__inner {
    background-color: #09152f;
    border: 1px solid #17324c;
  }

 ::v-deep .el-form-item__error {
  position:unset;
}
</style>

}
</style>