zkPCproject/src/page/index/top/index.vue

<template>
  <div class="avue-top">
    <div class="top-bar__left">
      <div
        v-if="showCollapse"
        :class="[{ 'avue-breadcrumb--active': isCollapse }]"
        class="avue-breadcrumb"
      >
        <i class="icon-navicon" @click="setCollapse" />
      </div>
    </div>
    <div class="top-bar__title" style="display: flex; align-items: center">
      <top-menu />
      <div
        style="
          line-height: 64px;
          cursor: pointer;
          display: flex;
          align-items: center;
          height: 64px;
        "
      >
        <!-- <div class="daili2">
          <img class="daili2img" src="/img/qh2.png" alt="" />
        </div> -->
        <div class="daili">
          {{
            orgType == 0
              ? "系统后台"
              : orgType == 1
              ? "代理商后台"
              : orgType == 2
              ? "公司后台"
              : "项目后台"
          }}
        </div>
        
          <el-button @click="goChange" class="avue-header" style="margin-left: 10px;color: #fff;padding: 10px;">切换后台</el-button>
      </div>
      <div
        v-if="companyName"
        @click="goBack"
        style="
          line-height: 64px;
          cursor: pointer;
          display: flex;
          align-items: center;
          height: 64px;
          margin-left: 20px;
        "
      >
        <!-- <div class="daili2">
          <img class="daili2img" src="/img/qh1.png" alt="" />
        </div> -->
        <div class="daili">
          {{ companyName }}
        </div>
          <el-button @click="goBack" class="avue-header" style="margin-left: 10px;color: #fff;padding: 10px;">切换项目</el-button>
      </div>
    </div>
    <div class="top-bar__right">
      <el-tooltip
        v-if="showColor"
        effect="dark"
        content="主题色"
        placement="bottom"
      >
        <div class="top-bar__item">
          <top-color />
        </div>
      </el-tooltip>
      <!-- <el-tooltip
        v-if="showDebug"
        :content="logsFlag ? '没有错误日志' : `${logsLen}条错误日志`"
        effect="dark"
        placement="bottom"
      >
        <div class="top-bar__item">
          <top-logs />
        </div>
      </el-tooltip> -->
      <el-tooltip
        v-if="showLock"
        effect="dark"
        content="锁屏"
        placement="bottom"
      >
        <div class="top-bar__item">
          <top-lock />
        </div>
      </el-tooltip>
    <!--  暂时注释下一版本开发上线 -->
      <!-- <el-popover placement="bottom" trigger="hover" width="350">
        <el-table :data="gridData" @row-click="msgTap">
          <el-table-column
            width="324"
            property="date"
            :show-header="false"
          >
          <template slot-scope="scope">
            <div class="date">
              <span>{{ scope.row.dates }}</span>
              <span>{{ scope.row.date }}</span>
            </div>
          </template>
          </el-table-column>
        </el-table>
        <i slot="reference" class="el-icon-bell" style="font-size: 18px;color: #fff;"></i>
      </el-popover> -->

      <el-tooltip
        v-if="showTheme"
        effect="dark"
        content="特色主题"
        placement="bottom"
      >
        <div class="top-bar__item top-bar__item--show">
          <top-theme />
        </div>
      </el-tooltip>
      <el-tooltip
        v-if="showFullScreen"
        :content="isFullScreen ? '退出全屏' : '全屏'"
        effect="dark"
        placement="bottom"
      >
        <div class="top-bar__item">
          <i
            :class="isFullScreen ? 'icon-zuixiaohua' : 'icon-quanpingzuidahua'"
            @click="handleScreen"
          />
        </div>
      </el-tooltip>
      <el-tooltip
        v-if="userInfo.avatar"
        effect="dark"
        content="用户头像"
        placement="bottom"
      >
      </el-tooltip>
      <el-dropdown style="cursor: pointer">
        <span class="el-dropdown-link">
          {{ userInfo.username }}
          <i class="el-icon-arrow-down el-icon--right" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item divided>
            <router-link to="/">首页</router-link>
          </el-dropdown-item>
          <el-dropdown-item divided>
            <router-link to="/info/index">个人信息</router-link>
          </el-dropdown-item>
          <el-dropdown-item divided @click.native="$refs.seting.open()"
            >界面设置
          </el-dropdown-item>
          <el-dropdown-item divided @click.native="logout"
            >退出系统
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <top-setting ref="seting" />
    </div>
  </div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
import { fullscreenToggel, handleImg, listenfullscreen } from "@/util/util";
import topLock from "./top-lock";
import topMenu from "./top-menu";
import topTheme from "./top-theme";
import topLogs from "./top-logs";
import topColor from "./top-color";
import topSetting from "./top-setting";
import { getStore, setStore } from "@/util/store";
export default {
  name: "Top",
  components: {
    topLock,
    topMenu,
    topTheme,
    topLogs,
    topColor,
    topSetting,
  },
  filters: {},
  data() {
    return {
      options: [],
      value: "",
      companyName: localStorage.getItem("topName"),
      orgType: localStorage.getItem("orgType"),
      info: {},
      gridData: [
        {
          date: '121',
          dates: '阿达萨达撒',
        },
        {
          dates: '阿达萨达撒',
          date: '122'
        },
        {
          dates: '阿达萨达撒',
          date: '132'
        },
        {
          dates: '阿达萨达撒',
          date: '125'
        },
        {
          dates: '阿达萨达撒',
          date: '126'
        },
        {
          dates: '阿达萨达撒',
          date: '172'
        },
        {
          dates: '阿达萨达撒',
          date: '182'
        },
        {
          dates: '阿达萨达撒',
          date: '120'
        },
      ]
    };
  },
  computed: {
    ...mapState({
      showDebug: (state) => state.common.showDebug,
      showTheme: (state) => state.common.showTheme,
      showLock: (state) => state.common.showLock,
      showFullScreen: (state) => state.common.showFullScreen,
      showCollapse: (state) => state.common.showCollapse,
      showMenu: (state) => state.common.showMenu,
      showColor: (state) => state.common.showColor,
    }),
    ...mapGetters([
      "userInfo",
      "isFullScreen",
      "tagWel",
      "tagList",
      "isCollapse",
      "tag",
      "logsLen",
      "logsFlag",
    ]),
  },
  created() {
    handleImg(this.userInfo.avatar, "thumbnail");
    // this.getHouseList() //获取当前人的所有项目
  },
  mounted() {
    listenfullscreen(this.setScreen);
    this.info = getStore({ name: "userInfo" });
  },
  methods: {


    // 弹窗消息点击触发事件
    msgTap(e) {
      console.log(e, 'asdjilksajl')
      this.$router.push('/message')
    },

    handleScreen() {
      fullscreenToggel();
    },
    selectChange(e) {
      console.log(e);
      this.$emit("selectChange"); //关闭所有
      localStorage.setItem("houseId", e);
    },
    // getHouseList(){
    //   this.$api.api.queryHouseByUsername()
    //   .then(res=>{
    //     // console.log(res);
    //     this.options=res.data
    //     this.value=res.data[0].id
    //     localStorage.setItem('houseId',this.value)
    //   })
    // },
    goBack() {
      // 判断后退是否退回去选择页面
      let idx = localStorage.getItem("orgType");
      if (idx == 0) {
        // 质控管家后台
        // localStorage.setItem("topName", "");
        // localStorage.setItem("orgCode", "");
        // localStorage.setItem("houseId", "");
        // localStorage.setItem("agentId", "");
        return;
      }
      // 当他为其他时 先获取是否只有一个选项，然后在来进行判断
      if (idx == 1) {
        this.getAgentList();
        // 代理商
      }
      if (idx == 2) {
        this.getCompanyList();
        // 公司后台
      }
      if (idx == 3) {
        this.findByUserName();
        // 项目后台
      }
    },
    goChange() {
      let that = this;
      this.$api.api.getTab().then((res) => {
        // console.log(res)
        // 循环数组，给定各种标志
        if (res.data.length == 0) {
          // this.$message.warning("您已经被禁用");
          this.$message.warning("账号已禁止登录，请联系管理员恢复");
        } else if (res.data.length == 1) {
          let idx = res.data[0].orgType;
          localStorage.setItem("orgType", idx);
          // 给定一个判断是否可以跳转的东西
          localStorage.setItem("backFlag", false);
          // 当他只有质控后台时，不需要多余操作
          if (idx == 0) {
            // 质控管家后台
            localStorage.setItem("topName", "");
            localStorage.setItem("orgCode", "");
            localStorage.setItem("houseId", "");
            localStorage.setItem("agentId", "");
            // that.$router.push({ path: "/wel" });
          }
          // 当他为其他时 先获取是否只有一个选项，然后在来进行判断
          if (idx == 1) {
            this.getAgentList();
            // 代理商
          }
          if (idx == 2) {
            this.getCompanyList();
            // 公司后台
          }
          if (idx == 3) {
            this.findByUserName();
            // 项目后台
          }
        } else {
          this.$router.push({ path: "/check", query: { backFlag: true } });
        }
      });
    },
    // 获取代理商
    getAgentList() {
      this.$api.api
        .zkagentPage({
          current: 1,
          pageSize: 10,
        })
        .then((res) => {
          // console.log(res);
          // this.list = res.data.records;
          // this.total = res.data.total;
          if (res.data.total == 0) {
            this.$message.warning("您当前并未代理商");
            return;
          } else if (res.data.total > 1) {
            // 公司后台
            this.$router.push({ path: "/chose", query: { flag: 1 } });
          } else {
            this.$message.warning("您没有多余的代理商");
            return;
            this.$router.push({ path: "/wel" });
            localStorage.setItem("topName", res.data.records[0].agentName);
            localStorage.setItem("agentId", res.data.records[0].id);
            localStorage.setItem("orgCode", "");
            localStorage.setItem("houseId", "");
          }
        });
    },
    getCompanyList() {
      this.$api.api
        .zkorg({
          current: 1,
          size: 10,
          orgType: localStorage.getItem("orgType"),
        })
        .then((res) => {
          // console.log(res);
          // this.list = res.data.records;
          // this.total = res.data.total;
          if (res.data.total == 0) {
            this.$message.warning("您当前并未绑定公司");
            return;
          } else if (res.data.total > 1) {
            // 公司后台
            this.$router.push({ path: "/chose", query: { flag: 2 } });
          } else {
            this.$message.warning("您没有多余的公司");
            return;
            // this.$router.push({ path: "/wel" });
            localStorage.setItem("topName", res.data.records[0].name);
            localStorage.setItem("orgCode", res.data.records[0].orgCode);
            localStorage.setItem("agentId", "");
            localStorage.setItem("houseId", "");
          }
        });
    },
    findByUserName() {
      this.$api.api
        .findByUserName({
          username: this.info.username,
        })
        .then((res) => {
          // console.log(res);
          this.info.selectHouseType = res.selectHouseType;
          // 获取项目
          this.zkhousePage();
        });
    },
    zkhousePage() {
      let obj = {
        current: 1,
        size: 10,
        orgType: localStorage.getItem("orgType"),
      };
      if (this.info.selectHouseType == 1) {
        this.$api.api.zkhousePage(obj).then((res) => {
          // console.log(res)
          // this.list = res.data.records;
          // this.total = res.data.total;
          if (res.data.total == 0) {
            this.$message.warning("您当前并未绑定项目");
            return;
          } else if (res.data.total > 1) {
            // 公司后台
            this.$router.push({ path: "/chose", query: { flag: 3 } });
          } else {
            this.$message.warning("您没有多余的项目");
            return;
            // this.$router.push({ path: "/wel" });
            localStorage.setItem("topName", res.data.records[0].propertyName);
            localStorage.setItem("orgCode", res.data.records[0].orgCode);
            localStorage.setItem("agentId", "");
            localStorage.setItem("houseId", res.data.records[0].id);
          }
        });
      }
      if (this.info.selectHouseType == 2) {
        this.$api.api
          .findHouseByArea({
            id: null,
            ...obj,
          })
          .then((res) => {
            // console.log(res)
            // this.list = res.data.records;
            // this.total = res.data.total;
            if (res.data.total == 0) {
              this.$message.warning("您当前并未绑定项目");
              return;
            } else if (res.data.total > 1) {
              // 公司后台
              this.$router.push({ path: "/chose", query: { flag: 3 } });
            } else {
              this.$message.warning("您没有多余的项目");
              return;
              // this.$router.push({ path: "/wel" });
              localStorage.setItem("topName", res.data.records[0].propertyName);
              localStorage.setItem("orgCode", res.data.records[0].orgCode);
              localStorage.setItem("houseId", res.data.records[0].id);
              localStorage.setItem("agentId", "");
            }
          });
      }
    },
    setCollapse() {
      this.$store.commit("SET_COLLAPSE");
    },
    setScreen() {
      this.$store.commit("SET_FULLSCREEN");
    },
    logout() {
      this.$confirm("是否退出系统, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$store.dispatch("LogOut").then(() => {
          this.$router.push({ path: "/login" });
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.daili {
  color: #ffffff;
  font-size: 15px;
  margin-left: 4px;
}
.daili2 {
  height: 100%;
  line-height: 58px;
  .daili2img {
    width: 15px;
    height: 14px;
  }
}

.change {
  font-size: 16px;
  // color: #2671e2;
  color: white;
  margin-left: 10px;
}

.date {
  display: flex;
  flex-direction: column;
}
</style>