hi-ucs/back/src/views/modules/sys/user-add-or-update.vue

<template>
  <el-dialog
    :visible.sync="visible"
    :title="!dataForm.id ? $t('add') : $t('update')"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmitHandle()"
      label-width="120px"
    >
      <el-form-item
        prop="username"
        :label="$t('user.username')"
        auto-complete="new-password"
      >
        <el-input
          v-model="dataForm.username"
          :placeholder="$t('user.username')"
          auto-complete="new-password"
        ></el-input>
      </el-form-item>
      <el-form-item prop="deptName" :label="$t('user.deptName')">
        <ren-dept-tree
          v-model="dataForm.deptId"
          :placeholder="$t('dept.title')"
          :dept-name.sync="dataForm.deptName"
        ></ren-dept-tree>
      </el-form-item>
      <el-form-item
        prop="password"
        :label="$t('user.password')"
        :class="{ 'is-required': !dataForm.id }"
        auto-complete="new-password"
        v-if="!dataForm.id"
      >
        <el-input
          v-model="dataForm.password"
          type="password"
          :placeholder="$t('user.password')"
          auto-complete="new-password"
          @input="changeInput"
        ></el-input>
      </el-form-item>
      <el-form-item
        prop="confirmPassword"
        :label="$t('user.confirmPassword')"
        :class="{ 'is-required': !dataForm.id }"
        v-if="!dataForm.id"
      >
        <el-input
          v-model="dataForm.confirmPassword"
          type="password"
          :placeholder="$t('user.confirmPassword')"
        ></el-input>
      </el-form-item>
      <el-form-item prop="realName" :label="$t('user.realName')">
        <el-input
          v-model="dataForm.realName"
          :placeholder="$t('user.realName')"
        ></el-input>
      </el-form-item>
      <el-form-item prop="gender" :label="$t('user.gender')">
        <ren-radio-group
          v-model="dataForm.gender"
          dict-type="gender"
        ></ren-radio-group>
      </el-form-item>
      <el-form-item prop="email" :label="$t('user.email')">
        <el-input
          v-model="dataForm.email"
          :placeholder="$t('user.email')"
        ></el-input>
      </el-form-item>
      <el-form-item prop="mobile" :label="$t('user.mobile')">
        <el-input
          v-model="dataForm.mobile"
          :placeholder="$t('user.mobile')"
        ></el-input>
      </el-form-item>
      <el-form-item
        prop="roleIdList"
        :label="$t('user.roleIdList')"
        class="role-list"
      >
        <el-select
          v-model="dataForm.roleIdList"
          multiple
          :placeholder="$t('user.roleIdList')"
        >
          <el-option
            v-for="role in roleList"
            :key="role.id"
            :label="role.name"
            :value="role.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 所在岗位屏蔽掉，bug729 -->
      <!-- <el-form-item prop="postIdList" :label="$t('user.postIdList')" class="role-list">
        <el-select v-model="dataForm.postIdList" multiple :placeholder="$t('user.postIdList')">
          <el-option v-for="post in postList" :key="post.id" :label="post.postName" :value="post.id"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item prop="status" :label="$t('user.status')" size="mini">
        <el-radio-group v-model="dataForm.status">
          <el-radio :label="0">{{ $t('user.status0') }}</el-radio>
          <el-radio :label="1">{{ $t('user.status1') }}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">{{
        $t('confirm')
      }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
import { Encrypt } from '@/utils/crypto'
import { isEmail, isMobile } from '@/utils/validate'
export default {
  data () {
    return {
      submitFlag: true,
      visible: false,
      roleList: [],
      roleIdListDefault: [],
      postList: [],
      dataForm: {
        id: '',
        username: '',
        deptId: '',
        deptName: '',
        password: '',
        confirmPassword: '',
        realName: '',
        gender: 0,
        email: '',
        mobile: '',
        roleIdList: [],
        postIdList: [],
        status: 1
      }
    }
  },
  computed: {
    dataRule () {
      var validatePassword = (rule, value, callback) => {
        if (!value) {
          this.showLevel = false
          return callback(new Error(this.$t('validate.pwdStrength')))
        }
        if (value.length < 8) {
          this.showLevel = false
          return callback(new Error(this.$t('validate.pwdStrength')))
        }
        const num = /^.*[0-9]+.*/
        const low = /^.*[a-z]+.*/
        const up = /^.*[A-Z]+.*/
        const spe = /^.*[^a-zA-Z0-9]+.*/
        console.log(
          '包含数字',
          num.test(value),
          '包含字母',
          low.test(value),
          up.test(value),
          '包含特殊符号',
          spe.test(value)
        )
        if (
          !(
            num.test(value) &&
            (low.test(value) || up.test(value)) &&
            spe.test(value)
          )
        ) {
          return callback(new Error(this.$t('validate.pwdStrength')))
        }
        // if (!this.dataForm.id && !/\S/.test(value)) {
        //   return callback(new Error(this.$t('validate.required')))
        // }
        callback()
      }
      var validateConfirmPassword = (rule, value, callback) => {
        if (!this.dataForm.id && !/\S/.test(value)) {
          return callback(new Error(this.$t('validate.required')))
        }
        if (this.dataForm.password !== value) {
          return callback(new Error(this.$t('user.validate.confirmPassword')))
        }
        callback()
      }
      var validateEmail = (rule, value, callback) => {
        if (value && !isEmail(value)) {
          return callback(
            new Error(
              this.$t('validate.format', { attr: this.$t('user.email') })
            )
          )
        }
        callback()
      }
      var validateMobile = (rule, value, callback) => {
        if (value && !isMobile(value)) {
          return callback(
            new Error(
              this.$t('validate.format', { attr: this.$t('user.mobile') })
            )
          )
        }
        callback()
      }
      return {
        username: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'blur'
          }
        ],
        deptName: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'change'
          }
        ],
        password: [{ validator: validatePassword, trigger: 'blur' }],
        confirmPassword: [
          { validator: validateConfirmPassword, trigger: 'blur' }
        ],
        realName: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'blur'
          }
        ],
        email: [{ validator: validateEmail, trigger: 'blur' }],
        mobile: [{ validator: validateMobile, trigger: 'blur' }]
      }
    }
  },
  methods: {
    changeInput (value) {
      if (value !== value.replace(/ /g, '')) {
        this.$message({
          message: '密码中不允许存在空格！',
          type: 'warning'
        })
        this.dataForm.password = value.replace(/ /g, '')
        // console.log('密码发生变化=============>', value)
      }
    },
    init () {
      this.visible = true
      this.dataForm.deptId = ''
      this.$nextTick(() => {
        this.$refs.dataForm.resetFields()
        this.roleIdListDefault = []
        Promise.all([this.getRoleList(), this.getPostList()]).then(() => {
          if (this.dataForm.id) {
            this.getInfo()
          } else {
            this.dataForm = {
              id: '',
              username: '',
              deptId: '',
              deptName: '',
              password: '',
              confirmPassword: '',
              realName: '',
              gender: 0,
              email: '',
              mobile: '',
              roleIdList: [],
              postIdList: [],
              status: 1
            }
          }
        })
      })
    },
    // 获取角色列表
    getRoleList () {
      return this.$http
        .get('/sys/role/list')
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.roleList = res.data
        })
        .catch(() => {})
    },
    // 获取岗位列表
    getPostList () {
      return this.$http
        .get('/sys/post/list')
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.postList = res.data
        })
        .catch(() => {})
    },
    // 获取信息
    getInfo () {
      this.$http
        .get(`/sys/user/${this.dataForm.id}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.dataForm = {
            ...this.dataForm,
            ...res.data,
            roleIdList: []
          }
          // 角色配置, 区分是否为默认角色
          for (var i = 0; i < res.data.roleIdList.length; i++) {
            if (
              this.roleList.filter(
                (item) => item.id === res.data.roleIdList[i]
              )[0]
            ) {
              this.dataForm.roleIdList.push(res.data.roleIdList[i])
              continue
            }
            this.roleIdListDefault.push(res.data.roleIdList[i])
          }
        })
        .catch(() => {})
    },
    // 表单提交
    dataFormSubmitHandle: debounce(
      function () {
        this.$refs.dataForm.validate((valid) => {
          if (!valid) {
            return false
          }
          if (this.submitFlag) {
            this.submitFlag = false
            this.dataForm.password = Encrypt(this.dataForm.password)
            if (this.dataForm.id) {
              delete this.dataForm.password
            }
            this.$http[!this.dataForm.id ? 'post' : 'put']('/sys/user', {
              ...this.dataForm,
              roleIdList: [
                ...this.dataForm.roleIdList,
                ...this.roleIdListDefault
              ]
            })
              .then(({ data: res }) => {
                if (res.code !== 0) {
                  return this.$message.error(res.msg)
                }
                this.$message({
                  message: this.$t('prompt.success'),
                  type: 'success',
                  duration: 500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
                this.submitFlag = true
              })
              .catch(() => {})
          }
        })
      },
      1000,
      { leading: true, trailing: false }
    )
  }
}
</script>

<style lang="scss">
.mod-sys__user {
  .role-list {
    .el-select {
      width: 100%;
    }
  }
}
</style>