elevator-web/src/layout/index.vue

<template>
  <el-container class="app-wrapper">
    <el-header class="app-header" style="height: 48px;line-height: 48px;border-bottom: 1px solid #E1E4EA;">
      <div class="logo-title" style="display: inline-flex; align-items: center;">
<!--        <img style="width: 132px; height: 35px;transform: translateY(2px);" src="../assets/logo3.png" />-->
        <el-image
            v-if="titleLogo"
            style="margin-right: 16px; width: 132px; height: 35px"
            :src="filePath + titleLogo"
        ></el-image>
        <span class="title">{{ title }}</span>
      </div>
      <div class="tags" style="position: relative;">
        <!-- <TagsView style="position:absolute;bottom:0"></TagsView> -->
      </div>
      <div class="header-action">
        <div style="display: flex; align-items: center">
          <!-- <img class="headImg" :src="headImg" style="border-radius: 50%" />
          <div class="user-name">
              {{ $store.state.user.name}}
          </div>
          <div @click="logout"><svg-icon icon-class="exit" class="c-icon u-pointer"></svg-icon><span class="u-pointer">退出登录</span></div> -->
          <el-dropdown size="medium" @command='logout'>
            <span class="el-dropdown-link">
              {{ $store.state.user.username }}({{ $store.state.user.name }})<i
                class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" class="logindropdown">
              <el-dropdown-item command='0'>修改密码</el-dropdown-item>
              <el-dropdown-item command='1'>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </el-header>
    <el-container style="height: calc(100% - 60px)">
      <el-aside class="left-aside" style="width: auto">
        <sidebar />
      </el-aside>
      <el-container style="background-color: #f2f2f2">
        <el-header class="container-header">
          <breadcrumb></breadcrumb>
        </el-header>
        <el-main class="main-container">
          <app-main />
        </el-main>
      </el-container>
    </el-container>
    <!-- 修改密码 -->
    <table-row-detail-dialog ref="passwordDialog" @confirm="handleConfirm" dialogWidth="686px" dialogTitle="修改密码"
      :customFooter="true" class="passwordDialog">
      <div class="dialog-body">
        <el-form ref="form" :inline="true" label-position="left" label-width="112px" :rules="rules" :model="formData"
          class="dialogFrom">
          <el-form-item label="旧密码" prop="oldPwd">
            <el-input v-model="formData.oldPwd" :type="showPassword0 ? 'text' : 'password'">
              <i slot="suffix" @click="handleIconClick(0)">
                <img v-if="showPassword0" class="input_icon" src="@/assets/password_show.png" />
                <img v-else class="input_icon" src="@/assets/password_hide.png" />
              </i>
            </el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPwd">
            <el-input v-model="formData.newPwd" @input='changePwd' :type="showPassword1 ? 'text' : 'password'">
              <i slot="suffix" @click="handleIconClick(1)">
                <img v-if="showPassword1" class="input_icon" src="@/assets/password_show.png" />
                <img v-else class="input_icon" src="@/assets/password_hide.png" />
              </i>
            </el-input>
          </el-form-item>
          <div class="fromtip">
            <div class="levelLine" v-show="levelLabel">
              <div class="level">
                <div class="levelitem levelitem1" :style="{
                  background: levelLabel == '弱' ?
                    '#F56C6C' : levelLabel == '中' ?
                      '#FDCC00' : levelLabel == '强' ?
                        '#0CD9B5' : '#E7E7E7'
                }"></div>
                <div class="levelitem levelitem2" :style="{
                  background: levelLabel == '中' ?
                    '#FDCC00' : levelLabel == '强' ?
                      '#0CD9B5' : '#E7E7E7'
                }"></div>
                <div class="levelitem levelitem3" :style="{ background: levelLabel == '强' ? '#0CD9B5' : '#E7E7E7' }">
                </div>
              </div>
              <span class="levelLabel">{{ levelLabel }}</span>
            </div>
            <div>密码请包含大小写字母、特殊字符和数字4种类型，长度8-20个字符，不允许出现顺序/逆序字符、账户名、及连续重复的数字或字母</div>
          </div>
          <el-form-item label="确认密码" prop="surePwd">
            <el-input v-model="formData.surePwd" :type="showPassword2 ? 'text' : 'password'">
              <i slot="suffix" @click="handleIconClick(2)">
                <img v-if="showPassword2" class="input_icon" src="@/assets/password_show.png" />
                <img v-else class="input_icon" src="@/assets/password_hide.png" />
              </i>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footerCon">
        <base-btn :btnData="btnClose" @click.native="cancel('form')"></base-btn>
        <base-btn :btnData="btnOk" @click.native="confirm('form')"></base-btn>
      </div>
    </table-row-detail-dialog>
  </el-container>
</template>

<script>
import TableRowDetailDialog from '@/components/TableRowDetailDialogNew/index';
import BaseBtn from '@/components/BaseBtn/index';
import { AppMain, Sidebar, Breadcrumb } from './components';
import AuthBtn from '@/components/AuthBtn';
import { changePass } from '@/api/system/user.js';
import { passEncrypt } from '@/utils/rsa';
import { strictPwdValidator } from "@/utils/validate";
// import  TagsView  from '@/layout/components/TagsView'
export default {
  name: 'Layout',
  components: {
    AppMain,
    Sidebar,
    Breadcrumb,
    AuthBtn,
    TableRowDetailDialog,
    BaseBtn
    // TagsView
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'));
      } else if (!strictPwdValidator(value, this.$store.state.user.username)) {
        callback(new Error('新密码不符合要求'));
      } else if (!this.checkPasswordStrength(value)) {
        callback(new Error('新密码不符合要求'));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入确认密码'));
      } else if (value !== this.formData.newPwd) {
        callback(new Error('输入内容请与新密码保持一致'));
      } else {
        callback();
      }
    };
    return {
      filePath: filePath,
      title: this.$store.state.user.companyInfo.companyName,
      titleLogo: this.$store.state.user.companyInfo.companyLogo,
      sysIcon: require('@/assets/search/sys-icon.svg'),
      headImg: require('@/assets/total_bg.jpg'),
      bgStyle: {},
      btnOk: {
        name: '确定'
      },
      btnClose: {
        name: '取消',
        bgColor: '#2B2B2C'
      },
      formData: {
        oldPwd: '',
        newPwd: '',
        surePwd: ''
      },
      rules: {
        oldPwd: [
          { required: true, message: '请输入旧密码', trigger: 'blur' },
        ],
        newPwd: [
          { required: true, validator: validatePass, trigger: 'blur' },
          // { required: true, message: '请输入新密码', trigger: 'blur' },
        ],
        surePwd: [
          { required: true, validator: validatePass2, trigger: 'blur' },
          // { required: true, message: '请输入确认密码', trigger: 'blur' },
        ],
      },
      showPassword0: false,
      showPassword1: false,
      showPassword2: false,
      levelLabel: ''
    };
  },
  watch: {
    watch: {
      '$store.state.user.companyInfo.companyName': {
        handler: function (nv, ov) {
          this.title = nv;
        },
        immediate: true
      },
      '$store.state.user.companyInfo.companyLogo': {
        handler: function (nv, ov) {
          this.titleLogo = nv;
        },
        immediate: true
      }
    },
  },
  mounted(){
    console.log("mounted:",this.$store.state.user.companyInfo);
  },
  computed: {},
  methods: {
    checkPasswordStrength(password) {
      const hasNumber = /[0-9]/.test(password);
      const hasletter = /[a-zA-Z]/.test(password);
      const hasSpecial = /[^0-9a-zA-Z]/.test(password);
      if (password.length <= 6 || password.length >= 20) {
        return false;
      } else if (hasNumber && hasletter && hasSpecial) {
        return '强';
      } else if (((hasNumber && hasletter) || (hasNumber && hasSpecial) || (hasletter && hasSpecial)) && password.length > 10) {
        return '中';
      } else if ((hasNumber && hasletter) || (hasNumber && hasSpecial) || (hasletter && hasSpecial)) {
        return '弱';
      } else {
        return false;
      }
    },
    changePwd(val) {
      var result = this.checkPasswordStrength(val)
      if (result) {
        this.levelLabel = result
      }
    },
    handleIconClick(index) {
      this['showPassword' + index] = !this['showPassword' + index]
    },
    confirm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let passwordNew = await passEncrypt(this.formData.newPwd);
          let passwordOld = await passEncrypt(this.formData.oldPwd);
          changePass(this.$store.state.user.userId, {
            passwordNew: passwordNew,
            passwordOld: passwordOld,
          }).then((res) => {
            console.log(res);
            this.$message.success('密码修改成功!');
            this.cancel('form');
          });
        } else {
          return false;
        }
      });
    },
    cancel(formName) {
      this.$refs[formName].resetFields();
      this.$refs.passwordDialog.hide();
      this.levelLabel = ''
    },
    handleConfirm() {
      console.log(123)
    },
    calcAuth() {
      return this.$store.state.permission.routes.some(
        (ele) => ele.path === '/infor-search',
      );
    },
    // 跳转媒资检索
    toSearch() {
      this.$router.push({
        path: '/infor-search',
      });
    },
    logout(index) {
      if (index == 0) {
        this.$refs.passwordDialog.show();
      } else {
        this.$confirm('您确定要退出登录吗？', '您确定要退出登录吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          cancelButtonClass: 'cancel-msgbtn', confirmButtonClass: 'confirm-msgbtn', type: 'warning',
        })
          .then(async () => {
            await this.$store.dispatch('user/logout');
            this.$router.push(`/login`);
          })
          .catch(() => { });
      }
      // await this.$store.dispatch('user/logout');
      // this.$router.push(`/login`);
    },
    changeSkin(name) {
      this.$store.dispatch('settings/changeTheme', name);
    },
  },
};
</script>

<style lang="scss" scoped>
@import '~@/styles/variables.scss';

.app-wrapper {
  height: 100%;

  .app-header {
    color: $headerTxtColor;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: url(../assets/header_bg.png) no-repeat;
    background-position: 83%;

    .header-action {
      color: #303133;
      font-size: 16px;
      flex: 0 0 auto;
      margin-left: 10px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
}

.title {
  display: flex;
  /* height: 27px; */
  font-size: 14px;
  font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
  font-weight: bold;
  color: #333333;
  /* line-height: 27px; */
  letter-spacing: 1px;
  align-items: center;
  //padding-bottom: 8px;
}


.headImg {
  width: 18px;
  height: 18px;
}

.container-header {
  height: 50px !important;
}

.el-aside {
  transition: width 0.15s;
  -webkit-transition: width 0.15s;
  -moz-transition: width 0.15s;
  -webkit-transition: width 0.15s;
  -o-transition: width 0.15s;
}

.logo-title {
  //flex: 0 0 260px;
}

.tags {
  flex: 1;
  min-width: 0;
  height: 100%;
}

.user-name {
  margin: 0 8px;
}

.c-icon {
  width: 18px;
  height: 18px;
  margin-right: 2px;
}

.header-action .el-dropdown {
  font-size: 16px;
  cursor: pointer;
}

.passwordDialog {
  // padding: 80px 90px;
}

.dialogFrom {
  padding: 20px 50px;
}

.fromtip {
  padding: 10px 0 20px 112px;
}

.el-form--inline .el-form-item {
  width: 100%;
}

.el-form--inline .el-form-item__content {
  width: 100%;
}

.input_icon {
  cursor: pointer;
}

.levelLine {
  display: flex;
}

.level {
  display: flex;
  margin-bottom: 20px;
}

.levelLabel {
  margin-left: 12px;
}

.levelitem {
  width: 56px;
  height: 12px;
  margin-right: 4px;
  // background: #F56C6C;
  background: #E7E7E7;
}

.levelitem1 {
  border-radius: 6px 0px 0px 6px;
}

.levelitem3 {
  border-radius: 0px 6px 6px 0px;
}
</style>
<style>
.passwordDialog .el-form--inline .el-form-item__content {
  width: 400px;
}

.el-theme1 .logindropdown .el-dropdown-menu__item:focus,
.el-theme1 .logindropdown .el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: #F5F7FA;
  color: #606266;
}

.el-theme1 .logindropdown {
  font-size: 14px;
  margin-top: 0px !important;
}

.el-theme1 .logindropdown .el-dropdown-menu__item {
  padding: 0 40px;
  line-height: 32px;
}

.el-theme1 .logindropdown .popper__arrow {
  display: none;
}
</style>