nezha-nezha-fronted/nezha-fronted/src/components/common/rightBox/profileBox.vue

<template>
  <div v-clickoutside="{obj: editProfile, func: esc}" class="right-box right-box-profile">
    <div class="right-box__header">
      <div class="header__title">{{$t('profile.editProfile')}}</div>
      <div class="header__operation">
        <span v-cancel="{obj: editProfile, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
      </div>
    </div>
    <div class="right-box__container">
      <div class="container__form">
        <el-form ref="profileForm" :model="editProfile" :rules="rules" label-position="top" label-width="120px">
          <el-form-item :label="$t('profile.name')" prop="name">
            <el-input maxlength="64" show-word-limit v-model="editProfile.name" size="small" type="text"></el-input>
          </el-form-item>
          <el-form-item :label="$t('profile.username')" prop="username">
            <el-input maxlength="64" show-word-limit v-model="editProfile.username" disabled size="small" type="text"></el-input>
          </el-form-item>
          <el-form-item :label="$t('profile.email')" prop="email">
            <el-input maxlength="64" show-word-limit v-model="editProfile.email" size="small" type="text"></el-input>
          </el-form-item>
          <el-form-item :label="$t('profile.mobile')" prop="mobile">
            <el-input maxlength="64" show-word-limit v-model="editProfile.mobile" size="small" type="text"></el-input>
          </el-form-item>
          <el-form-item :label="$t('profile.role')" v-if="editProfile.roles[0].i18n !== ''" prop="roles">
            <el-input maxlength="64" show-word-limit v-model="editProfile.roles[0].i18n" disabled size="small" type="text"></el-input>
          </el-form-item>
          <el-form-item :label="$t('profile.role')" v-else prop="roles">
            <el-input maxlength="64" show-word-limit v-model="editProfile.roles[0].name" disabled size="small" type="text"></el-input>
          </el-form-item>
          <!--language-->
          <el-form-item :label="$t('config.user.language')" prop="lang">
            <el-select id="account-input-language"
                       class="right-box__select"
                       v-model="editProfile.lang"
                       clearable
                       collapse-tags
                       placeholder=""
                       popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside"
                       size="small">
              <template v-for="item in languageList">
                <el-option :key="item.value" :label="item.label" :value="item.value"></el-option>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('profile.source')" prop="source">
            <el-input maxlength="64" show-word-limit v-model="editProfile.source" disabled size="small" type="text"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="right-box__footer">
      <button id="asset-edit-cancel" v-cancel="{obj: editProfile, func: esc}" class="footer__btn footer__btn--light">
        <span>{{$t('overall.cancel')}}</span>
      </button>
      <button id="asset-edit-save" :class="{'footer__btn--disabled': prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn" @click="save">
        <span>{{$t('overall.save')}}</span>
      </button>
    </div>
  </div>
</template>

<script>
import editRigthBox from '@/components/common/mixin/editRigthBox'

export default {
  name: 'modelbox',
  components: {
  },
  props: {
    obj: {
      type: Object
    }
  },
  computed: {},
  mixins: [editRigthBox],
  data () {
    return {
      url: 'sys/user/profile',
      rightBox: { profile: { show: false } },
      editProfile: {},
      languageList: [
        { value: 'en', label: 'English' },
        { value: 'cn', label: '简体中文' }
      ],
      rules: {
        name: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        lang: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    obj: {
      deep: true,
      immediate: true,
      handler (n) {
        this.isEdit = true
        this.editProfile = JSON.parse(JSON.stringify(n))
      }
    }
  },
  created () {},
  methods: {
    clickoutside () {
      this.esc(false)
    },
    /* 关闭弹框 */
    esc (refresh) {
      this.prevent_opt.save = false
      this.$emit('close', refresh)
    },
    save () {
      this.$refs.profileForm.validate((valid) => {
        if (valid) {
          if (this.editProfile.id) {
            this.editProfile.roleIds = this.editProfile.roles[0].id
            this.$put(this.url, this.editProfile).then(res => {
              this.prevent_opt.save = false
              if (res.code === 200) {
                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
                this.esc(true)
                this.$emit('clickProfile')
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        }
      })
    }
  }
}
</script>
<style lang="scss">
@import '@/assets/css/common/rightBoxCommon.scss';
</style>