library-management-system/src/views/system/user/center.vue

<template>
  <div class="app-container  category-container">
    <div class="container-main">
      <div class="elect-cont-left">
        <div class="container-left">
          <span class="right-top-line" />
          <span class="left-bottom-line" />
          <div class="user-content">
            <h4 class="info-title">个人信息</h4>
            <div class="el-upload">
              <div class="user-img-cover">
                <img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" title="点击上传头像" class="avatar" :onerror="defaultImg" @click="toggleShow">
              </div>
              <myUpload
                v-model="show"
                :headers="headers"
                :url="updateAvatarApi"
                @crop-upload-success="cropUploadSuccess"
              />
            </div>
            <ul class="user-info">
              <li><p><i class="iconfont icon-zhanghao" />账号</p><div class="user-right">{{ user.username }}</div></li>
              <li><p><i class="iconfont icon-yonghuming" style="font-size: 13px;" />用户名</p><div class="user-right">{{ user.nickName }}</div></li>
              <li><p><i class="iconfont icon-xingbie" />性别</p><div class="user-right">{{ user.gender ? user.gender : '-' }}</div></li>
              <li><p><i class="iconfont icon-yonghujiaose" style="font-size: 12px;" />用户角色</p><div class="user-right"><span v-for="item in user.roles" :key="item.id">{{ item.name }}</span></div></li>
              <li><p><i class="iconfont icon-suoshuquanzong" />所属机构</p><div class="user-right">{{ user.fonds ? user.fonds.fondsName : '/' }}</div></li>
              <li><p><i class="iconfont icon-suoshubumen" />所属部门</p><div class="user-right">{{ user.dept ? user.dept.deptsName : '/' }}</div></li>
              <li><p><i class="iconfont icon-shoujihaoma" />手机号码</p><div class="user-right">{{ user.email ? user.phone : '-' }}</div></li>
              <li><p><i class="iconfont icon-yonghuyouxiang" style="font-size: 12px;" />用户邮箱</p><div class="user-right">{{ user.email ? user.email : '-' }}</div></li>
              <li><p><i class="iconfont icon-yanzhengma" />安全设置</p><div class="user-right"><a @click="$refs.pass.dialog = true">修改密码</a></div></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="elect-cont-right">
        <div class="container-right tab-content">
          <span class="right-top-line" />
          <span class="left-bottom-line" />
          <ul class="tab-nav">
            <li :class="{'active-tab-nav': activeIndex == 0}" @click="handleClick(0)">用户资料<i /></li>
            <li :class="{'active-tab-nav': activeIndex == 1}" @click="handleClick(1)">消息中心<i /></li>
            <li :class="{'active-tab-nav': activeIndex == 2}" @click="handleClick(2)">操作日志<i /></li>
            <!-- 最右侧装饰img -->
            <span class="tab-right-img" />
          </ul>
          <div v-if="activeIndex == 0" class="tab-item">
            <el-form ref="form" class="tab-form" :model="form" :rules="rules" size="small" label-width="100px">
              <el-form-item label="用户名" prop="nickName">
                <el-input v-model="form.nickName" style="width: 324px" />
                <span class="form-tip">用户昵称不作为登录使用</span>
              </el-form-item>
              <el-form-item label="手机号码" prop="phone">
                <el-input v-model="form.phone" style="width: 324px" />
                <span class="form-tip">手机号码不能重复</span>
              </el-form-item>
              <el-form-item label="用户邮箱" prop="email">
                <el-input v-model="form.email" style="width: 324px" />
              </el-form-item>
              <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="form.gender" style="width: 178px">
                  <el-radio label="男">男</el-radio>
                  <el-radio label="女">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <el-button class="user-submit" :loading="saveLoading" size="mini" type="primary" @click="doSubmit">保存</el-button>
              </el-form-item>
            </el-form>
          </div>
          <!-- 消息中心 -->
          <div v-if="activeIndex == 1" class="tab-item">
            <messageCenter />
          </div>
          <!-- 操作日志 -->
          <div v-if="activeIndex == 2" class="tab-item" style="padding-left: 20px;">
            <OperateLog :is-center="isCenter" />
          </div>
        </div>
      </div>
    </div>
    <updateEmail ref="email" :email="user.email" />
    <updatePass ref="pass" />
  </div>
</template>

<script>
import myUpload from 'vue-image-crop-upload/upload-2.vue'
import { mapGetters } from 'vuex'
import updatePass from './center/updatePass'
import updateEmail from './center/updateEmail'
import { getToken } from '@/utils/auth'
import store from '@/store'
import { isvalidPhone } from '@/utils/validate'
import { editUser } from '@/api/system/user'
import Avatar from '@/assets/images/avatar.png'
import messageCenter from './messageCenter/index'
import OperateLog from '@/views/system/log/operateLog/index'
export default {
  name: 'Center',
  components: { updatePass, updateEmail, myUpload, messageCenter, OperateLog },
  data() {
    // 自定义验证
    const validPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入电话号码'))
      } else if (!isvalidPhone(value)) {
        callback(new Error('请输入正确的11位手机号码'))
      } else {
        callback()
      }
    }
    return {
      isCenter: true,
      defaultImg: 'this.src="' + require('@/assets/images/avatar.png') + '"',
      show: false,
      Avatar: Avatar,
      activeIndex: 0,
      saveLoading: false,
      headers: {
        'Authorization': getToken()
      },
      form: {},
      query: {
        keyword: null,
        createTime: []
      },
      rules: {
        nickName: [
          { required: true, message: '请输入用户昵称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, trigger: 'blur', validator: validPhone }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'updateAvatarApi',
      'baseApi'
    ])
  },
  watch: {
    '$route'(val, from) { // 监听到路由（参数）改变
      if (this.$route.query) {
        this.activeIndex = this.$route.query.activeIndex
      }
    }
  },
  created() {
    this.form = { userId: this.user.id, nickName: this.user.nickName, gender: this.user.gender, phone: this.user.phone, email: this.user.email }
    store.dispatch('GetInfo').then(() => {})
    if (this.$route.query) {
      this.activeIndex = this.$route.query.activeIndex
    }
  },
  methods: {
    toggleShow() {
      this.show = !this.show
    },
    handleClick(index) {
      this.activeIndex = index
    },
    beforeInit() {
      this.url = 'api/logs/user'
      return true
    },
    cropUploadSuccess(jsonData, field) {
      store.dispatch('GetInfo').then(() => {})
    },
    doSubmit() {
      if (this.$refs['form']) {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.saveLoading = true
            editUser(this.form).then(() => {
              this.editSuccessNotify()
              store.dispatch('GetInfo').then(() => {})
              this.saveLoading = false
            }).catch(() => {
              this.saveLoading = false
            })
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
.app-container{
  margin: 0 20px !important;
}

@mixin info-title-style{
  [data-theme="dark"] & {
    color: #fff;
    background-color: #02255F;
  }
  [data-theme="light"] & {
    color: #0C0E1E;
    border-bottom: 1px solid #EDEFF3;
  }
}

.container-main{
  position: relative;
  margin-top: 90px;
  z-index: 9;
}
.operateLog-main{
  height: calc(100vh - 300px);
}
.elect-cont-left{
  width: 368px !important;
  padding: 0 !important;
}
[data-theme=dark] .elect-cont-left .container-left{
  min-height: calc(100vh - 247px) !important;
}
[data-theme=dark] .elect-cont-right .container-right {
    min-height: calc(100vh - 288px) !important;
}
[data-theme=light] .elect-cont-right {
  padding: 20px 20px 0 0  !important;
}
[data-theme=light] .elect-cont-left .container-left{
  min-height: calc(100vh - 260px) !important;
}
[data-theme=light] .elect-cont-right .container-right {
    min-height: calc(100vh - 250px) !important;
}
[data-theme=dark] .category-container .tab-content .head-container{
  margin: 20px 0 !important;
}
.user-content{
  color: #fff;
  .iconfont{
    margin-right: 12px;
  }
}
.info-title{
  height: 56px;
  line-height: 56px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  @include info-title-style;
}
.el-upload{
  display: block;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  margin: 40px auto 60px auto;
  overflow: hidden;
  .user-img-cover{
    width: 148px;
    height: 148px;
    line-height: 148px;
  }
  .avatar {
    width: 100%;
    height: 100%;
  }
}

@mixin user-info-list-style{
  [data-theme="dark"] & {
    color: #fff;
    & li{
      border-bottom: 1px solid #113D72;
    }
    & .user-right {
      a{
        color: #3A99FD;
      }
    }
  }
  [data-theme="light"] & {
    color: #545B65;
    & li{
      border-bottom: 1px solid  #F5F9FC;
    }
    & .user-right {
      color: #0C0E1E;
      a{
        color: #0348F3;
      }
    }
  }
}

.user-info {
  padding: 0 20px;
  list-style: none;
  @include user-info-list-style;
  li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    // height: 41px;
    line-height: 34px;
  }
  .user-right {
    a{
      margin-left: 20px;
    }
    span{
      display: block;
      text-align: right;
      line-height: 30px;
    }
  }
}
[data-theme=light] .tab-item {
  ::v-deep .el-form.tab-form{
    margin-top: 40px;
  }
  .user-submit{
    color: #fff;
    background-color: #0348F3;
  }
}
.tab-item{
  ::v-deep .el-form{
    .el-form-item__label.el-form-item__label{
      @include setting-item-font;
    }
    .form-tip{
      margin-left: 11px;
      font-size: 12px;
      color: #A6ADB6;
    }
    .user-submit{
      width: 76px;
    }
  }

}
.user-header-search{
  margin-bottom: 20px;
  .filter-search{
    margin-right: 0;
    @include btn_blue_style;
    &:hover{
      @include btn_blue_hover;
    }
  }
  .filter-refresh{
    @include btn_white_style;
    &:hover{
      @include btn_white_hover;
    }
  }
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #fff !important;
  background-color: transparent;
  transition: background-color 50000s ease-in-out 0s;
}
input {
  background-color: transparent;
}
::v-deep .vue-image-crop-upload .vicp-wrap .vicp-operate a{
  border: 1px solid #e6e8ed;
  background-color: transparent;
  color: #545b65;
  border-radius: 3px;
}
</style>