vue-insagent-pc/src/views/Core/PersonalPanel.vue

<template>
  <div class="personal-panel">
    <div class="personal-desc" :style="{ 'background': this.$store.state.app.themeColor }">
      <div class="avatar-container u-f u-f-ajc">
        <!-- <img class="avatar" :src="require('@/assets/user.png')" /> -->
        <img class="avatar" :src="user.headSculpture?user.headSculpture:avatar" />
      </div>
      <!-- <div class="name-role">
        <template v-if="user.name == 'admin'">
          <span class="sender">{{ user.name }}</span>
        </template>
        <template v-else>
          <span class="sender">{{ user.id }} - {{ user.name }}</span>
        </template>
      </div> -->
      <div class="name-role">
        <template >
          <span class="sender">{{ user.deptName }} - {{ user.roleName }}</span>
        </template>
        <!-- <template v-if="user.name == 'admin'">
          <span class="sender">超级管理员</span>
        </template>
        <template v-else>
          <span class="sender">{{ user.deptName }} - {{ user.jobName }}</span>
        </template> -->
      </div>
      <template v-if="user.name != 'admin'">
        <div class="registe-info">
          <span class="registe-info">
            <li class="fa fa-clock-o"></li>
            {{ user.createTime }}
          </span>
        </div>
      </template>
    </div>
    <!-- <div class="personal-relation">
        <span class="relation-item">followers</span>
        <span class="relation-item">watches</span>
        <span class="relation-item">friends</span>
    </div> -->
    <!-- <div class="main-operation">
      <span class="main-operation-item">
        <el-button size="small" icon="fa fa-male"> 个人中心</el-button>
      </span>
      <span class="main-operation-item">
        <el-button size="small" icon="fa fa-key" @click="showPsdDialog"> 修改密码</el-button>
      </span>
    </div> -->
    <div class="other-operation">
      <div class="other-operation-item" @click="clearCache">
        <li class="fa fa-eraser" ></li>
        清除缓存
      </div>
      <div class="other-operation-item" @click="recruiting" v-if="user.roleId!=='20'">
        <li class="fa fa-user"></li>
        闪电增员
      </div>
      <!-- <div class="other-operation-item">
        <li class="fa fa-bell"></li>
        访问次数
      </div> -->
      <div class="other-operation-item"  @click="showPsdDialog">
        <li class="fa fa-key"></li>
        修改密码
      </div>
      <!-- <div class="other-operation-item" @click="showBackupDialog">
        <li class="fa fa-undo"></li>
        {{ $t("common.backupRestore") }}
      </div> -->
    </div>
    <div class="personal-footer" @click="logout">
      <li class="fa fa-sign-out"></li>
      {{ $t("common.logout") }}
    </div>
    <!--备份还原界面-->
    <backup ref="backupDialog" @afterRestore="afterRestore"></backup>
    <!-- 修改密码 -->
    <psdreset ref="psdresetDialog" @afterRestore="afterReset"></psdreset>
    <!-- 闪电增员 -->
    <Recruiting ref="recruitingDialog" ></Recruiting>

  </div>
</template>

<script>
import Cookies from "js-cookie"
import QRCode from "qrcodejs2";
import Backup from "@/views/Backup/Backup"
import Psdreset from "@/views/Psdreset/Psdreset"
import Recruiting from "@/views/Sys/Recruiting"
export default {
  name: "qrCode",
  name: 'PersonalPanel',
  components: {
    Backup,
    Psdreset,
    Recruiting
  },
  props: {
    user: {
      type: Object,
      default: {
        id: "",
        name: "admin",
        avatar: "@/assets/user.png",
        deptId: "",
        deptName: "",
        jobCode: "",
        jobName: "",
        // role: "超级管理员",
        registeInfo: "注册时间：2018-12-25 ",
        createTime:'',
      }
    }
  },
  computed: {
    mainTabs: {
      get() { return this.$store.state.tab.mainTabs },
      set(val) { this.$store.commit('updateMainTabs', val) }
    },
  },
  data() {
    return {
      avatar: require("@/assets/user.png"),
    }
  },
  created(){
      // if (Cookies.get("user") != 'admin') {
      //   this.userData.registeInfo = "入司时间：" + this.transformTime( this.userData.esmUserInternal.intime);
      //   this.$api.dept.getDeptById( this.user.deptId).then(deptRes => {
      //     this.user.deptName = deptRes.data.name;
      //   });
      // }
  },
  mounted() {
    this.user.createTime = this.user.createTime.substr(0,10)
  },
  methods: {

    //闪电增员
    recruiting() {
      this.$refs.recruitingDialog.setBackupVisible(true)
    },
    // 清除缓存
    clearCache(){
        localStorage.clear()
        sessionStorage.removeItem("user")
        this.deleteCookie("token")
        this.deleteCookie("user")
        this.deleteCookie("name")
        this.mainTabs = [];
        this.$router.push("/login")
        Cookies.removeAllCookie();
        this.$api.login.logout().then((res) => {
        }).catch(function (res) {
        })
    },
    // 退出登录
    logout: function () {
      this.$confirm("确认退出吗?", "提示", {
        type: "warning"
      })
        .then(() => {
          localStorage.clear()
          sessionStorage.removeItem("user")
          this.deleteCookie("token")
          this.deleteCookie("user")
          this.deleteCookie("name")
          this.mainTabs = [];
          this.$router.push("/login")
          Cookies.removeAllCookie();
          this.$api.login.logout().then((res) => {
          }).catch(function (res) {
          })
        })
        .catch(() => { })
    },
    // 删除cookie
    deleteCookie: function (name) {
      Cookies.remove(name)
    },
    // 打开备份还原界面
    showBackupDialog: function () {
      this.$refs.backupDialog.setBackupVisible(true)
    },
    // 成功还原之后，重新登录
    afterRestore: function () {
      this.$refs.backupDialog.setBackupVisible(false)
      sessionStorage.removeItem("user")
      this.deleteCookie("token")
      this.deleteCookie("user")
      this.deleteCookie("name")
      this.$router.push("/login")
      this.$api.login.logout().then((res) => {
      }).catch(function (res) {
      })
    },
    showPsdDialog: function () {
      this.$refs.psdresetDialog.setBackupVisible(true)
    },
    afterReset: function () {

    }
  },
  mounted() {
  }
}
</script>

<style scoped>
.personal-panel {
  font-size: 14px;
  width: 280px;
  text-align: center;
  border-color: rgba(180, 190, 190, 0.2);
  border-width: 1px;
  border-style: solid;
  background: rgba(182, 172, 172, 0.1);
  margin: -14px;
}
.personal-desc {
  padding: 15px;
  color: #fff;
}
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 90px;
}

.name-role {
  font-size: 16px;
  padding: 5px;
}

.personal-relation {
  font-size: 16px;
  padding: 12px;
  margin-right: 1px;
  background: rgba(200, 209, 204, 0.3);
}

.relation-item {
  padding: 12px;
}

.relation-item:hover {
  cursor: pointer;
  color: rgb(19, 138, 156);
}

.main-operation {
  padding: 8px;
  margin-right: 1px;
  border-color: rgba(201, 206, 206, 0.2);
  border-top-width: 1px;
  border-top-style: solid;
}

.main-operation-item {
  margin: 15px;
}

.other-operation {
  padding: 15px;
  margin-right: 1px;
  text-align: left;
  border-color: rgba(180, 190, 190, 0.2);
  border-top-width: 1px;
  border-top-style: solid;
}

.other-operation-item {
  padding: 12px;
}

.other-operation-item:hover {
  cursor: pointer;
  background: #9e94941e;
  color: rgb(19, 138, 156);
}

.personal-footer {
  margin-right: 1px;
  font-size: 14px;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  border-color: rgba(180, 190, 190, 0.2);
  border-top-width: 1px;
  border-top-style: solid;
}

.personal-footer:hover {
  cursor: pointer;
  color: rgb(19, 138, 156);
  background: #b1a6a61e;
}
</style>