reset-password.vue

<template lang="pug">
el-dialog( :visible.sync="visible" :append-to-body="true" :before-close="handleClose" )
    .title-bold(slot='title') 密码重置
    el-form( :model="dataForm" :rules="dataRule" ref="dataForm" :label-position="labelPosition" label-width="150px" )
        el-row(justify="center" style="width:70%;margin:0 auto;")
            el-col(:span="24")
                el-form-item(label="所属站点:" prop="name")
                    el-input.mywidth(readonly v-model="dataForm.name" placeholder="所属站点")
            el-col(:span="24")
                el-form-item(label="用户账号:" prop="username")
                    el-input.mywidth(readonly v-model="dataForm.username" placeholder="用户账号")
            el-col(:span="24")
                el-form-item(label="请输入密码:" prop="password")
                    el-input.mywidth( v-model="dataForm.password" type="password" placeholder="请输入密码" clearable @input='e => dataForm.password = inputMe(e)')
            el-col(:span="24")
                el-form-item(label="请再次输入密码:" prop="comfirmPassword")
                    el-input.mywidth( v-model="dataForm.comfirmPassword" type="password" placeholder="请再次输入密码" clearable @input='e => dataForm.comfirmPassword = inputMe(e)')
    div(slot='footer' align='center')
        el-button(size="medium" type="primary" @click="cancel") 取消
        el-button(size="medium" type="primary" @click="submit" v-prevent-re-click) 保存
</template>
<script>
export default {
  data() {
    var validatePassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error('密码不能为空'))
      } else {
        callback()
      }
    }
    var validateComfirmPassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error('确认密码不能为空'))
      } else if (this.dataForm.password !== value) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    }
    return {
      clickFlag: false,
      id: 1,
      dataListLoading: false,
      visible: false,
      labelPosition: 'right',
      dataForm: {
        username: '',
        name: '',
        code: '',
        password: '',
        comfirmPassword: ''
      },
      item: {},
      dataRule: {
        password: [
          { validator: validatePassword, required: true, trigger: 'blur' },
          {
            min: 1,
            max: 30,
            message: '长度在 1 到 50 个字符',
            trigger: 'blur'
          }
        ],
        comfirmPassword: [
          {
            validator: validateComfirmPassword,
            required: true,
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    init(row) {
      this.visible = true
      this.clickFlag = false
      this.dataForm.userId = row.user_id
      this.dataForm.username = row.username
      this.initData()
    },
    inputMe(e) {
      return e.replace(/[<>！?:"：？@!,.;']/g, '')
    },
    initData() {
      this.$http({
        url: this.$http.adornUrl(`/sysSystem/getId/${this.id}`),
        method: 'get',
        params: this.$http.adornParams()
      })
        .then((data) => {
          // console.log(data, '---')
          if (data && data.code === 0) {
            let item = data.bean
            this.dataForm.name = item.name
            this.dataForm.code = item.code
            // this.dataForm.username = item.code + ' - ' + this.dataForm.username
          }
        })
        .catch((data) => {
          this.$message({
            type: 'error',
            message: data.mag,
            duration: 1500
          })
        })
    },
    submit() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.clickFlag = true
          this.$http({
            url: this.$http.adornUrl(`/sys/user/updatePassword`),
            method: 'post',
            params: {
              userIds: this.dataForm.userId,
              password: this.dataForm.password
            }
          })
            .then((data) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500
                })
              }
              this.handleClose()
              this.$emit('refreshdatalist')
              this.clickFlag = false
            })
            .catch((data) => {
              this.$message.error(data.msg)
              this.clickFlag = false
            })
        }
      })
    },
    handleClose() {
        this.visible = false
        this.$refs.dataForm.resetFields()
    },
    //取消
    cancel() {
      this.$confirm('确认取消?', '密码重置', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.handleClose()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          })
        })
    }
  }
}
</script>
<style>
</style>