hkyy/admin-frame/naf/frame/header/user.vue

<template>
  <!--简洁用户菜单-->
  <div class="right lite infos">
    <i class="infoNumberTow" v-if="items.length > 0"></i>
    <el-dropdown v-if="userScope" class="user-box" placement="top" @command="handleCommandValue">
      <el-button type="text" class="name">{{ value || '请选择当前域' }}<i class="el-icon-arrow-down el-icon--right"></i></el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item :command="item.code" v-for="item in options" :key="item.code">{{ item.name }}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <span style="margin: 5px;"></span>
    <el-dropdown class="user-box" placement="top" @command="handleCommand" :hide-on-click="false" @visible-change="change">
      <el-button type="text" class="name">{{ (userinfo && userinfo.name) || '管理員' }}</el-button>
      <span style="margin: 5px;">|</span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="passwd"><i class="el-icon-edit"></i> 修改密码</el-dropdown-item>
        <!-- <el-dropdown-item><i class="el-icon-chat-dot-round"></i>系统消息</el-dropdown-item> -->
      </el-dropdown-menu>
    </el-dropdown>
    <el-button type="text" @click="handleLogout">退出</el-button>
    <data-dlg
      ref="passwd"
      title="修改密码"
      width="400px"
      :visible.sync="passDlg"
      :data="passForm"
      :options="{ 'label-width': '80px', size: 'mini' }"
      :meta="passFields"
      @save="handleSavePass"
      @cancel="passDlg = false"
    >
    </data-dlg>
  </div>
</template>
<script>
import { mapActions, mapGetters, createNamespacedHelpers } from 'vuex';
import DataDlg from '@naf/data/form-dlg.vue';

const { mapState, mapActions: userMapActions } = createNamespacedHelpers('naf/user');
const userScope = eval(process.env.VUE_APP_USER_SCOPE);
export default {
  components: {
    DataDlg,
  },
  data() {
    const checkPass = ref => {
      return (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入新密码'));
        } else {
          if (this.$refs[ref].form.confirm !== '') {
            this.$refs[ref].$refs['form'].validateField('confirm');
          }
          callback();
        }
      };
    };
    const checkConfirm = ref => {
      return (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入新密码'));
        } else if (value !== this.$refs[ref].form.newpass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
    };
    return {
      userScope,
      options: [],
      value: '',
      task: false,
      taskDlg: false,
      passDlg: false,
      passForm: {},
      passFields: [
        { name: 'oldpass', label: '原密码', required: true, formOpts: { inputType: 'password' }, rules: [{ required: true, message: '请输入原密码' }] },
        {
          name: 'newpass',
          label: '新密码',
          required: true,
          formOpts: { inputType: 'password' },
          rules: [
            { required: true, message: '请输入新密码' },
            { validator: checkPass('passwd'), trigger: 'blur' },
          ],
        },
        {
          name: 'confirm',
          label: '密码确认',
          required: true,
          formOpts: { inputType: 'password' },
          rules: [
            { required: true, message: '请重新输入新密码' },
            { validator: checkConfirm('passwd'), trigger: 'blur' },
          ],
        },
      ],
    };
  },
  props: {
    menuCollapse: Boolean,
  },
  async mounted() {
    const res = await this.domains();
    if (res) {
      this.options = res.data;
      if (this.options.length > 0) {
        const domain = sessionStorage.getItem('x-domain');
        if (domain) {
          this.handleCommandValue(domain);
        } else {
          this.handleCommandValue(this.options[0].code);
        }
      }
    }
  },
  methods: {
    ...mapActions({
      logout: 'login/logout',
      passwd: 'login/passwd',
    }),
    ...userMapActions(['taskList', 'domains']),
    async handleLogout() {
      const res = await this.logout();
    },
    handleCommand(command) {
      if (command === 'logout') {
        this.handleLogout();
      } else if (command == 'infos') {
        this.taskDlg = true;
      } else if (command == 'passwd') {
        this.passDlg = true;
      }
    },
    change(e) {
      if (e == false) {
        this.taskDlg = false;
        this.task = false;
      }
    },
    async handleSavePass(payload) {
      const res = await this.passwd(payload.data);
      if (this.$checkRes(res, '修改用户密码成功')) {
        this.passDlg = false;
      }
    },
    taskBtn() {
      this.task = true;
    },
    handleCommandValue(command) {
      const val = this.options.filter(p => command === p.code);
      this.value = val[0].name;
      window.sessionStorage.setItem('x-domain', command);
    },
  },
  computed: {
    ...mapGetters(['userinfo']),
    ...mapState(['items']),
  },
};
</script>
<style lang="less" scoped>
.right.lite {
  font-size: 14px;
}
.el-button--text {
  color: white;
}
.name {
  color: #fff;
}
.el-button--text {
  color: white;
}
.user-box {
  display: inline;
}
.infos {
  position: relative;
}
.infoNumberTow {
  position: absolute;
  background: #a30202;
  color: #fff;
  border-radius: 20px;
  padding: 5%;
  line-height: 1.5em;
  font-size: 0.7em;
  left: -10%;
  top: 10%;
  z-index: 999;
}
.infoNumber {
  position: absolute;
  background: #a30202;
  color: #fff;
  border-radius: 20px;
  padding: 0 3%;
  line-height: 1.5em;
  font-size: 0.7em;
  left: 2%;
  top: 0;
  z-index: 999;
}
.userList {
  width: 480px;
  position: absolute;
  left: -490px;
  top: 0%;
}
</style>