veterans_company/src/views/Home.vue

<template>
  <div class="home">
    <Header />
    <Mainmenu />
    <section class="company-card">
      <div class="company wrap">
        <img v-if="companyLogo" class="logo" :src="companyLogo" alt="" />
        <img
          v-else
          class="logo"
          src="../../static/images/default-logo.png"
          alt=""
        />
        <div class="content">
          <div class="name">{{ companyInfo.companyName }}</div>
          <div class="addr">
            <i class="el-icon-location"></i>
            {{ companyInfo.companyAddress }}
          </div>
          <div class="company-bottom">
            <div class="left">
              <div class="data-cell">
                <div class="up">
                  <span>{{ companyTotal.recruitWorkNum || 0 }}</span
                  >个
                </div>
                <div class="down">
                  招聘职位
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="该公司的在招职位数量"
                    placement="top-start"
                  >
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </div>
              </div>
              <div class="data-cell">
                <div class="up">
                  <span>{{ companyTotal.viewNum || 0 }}</span
                  >个
                </div>
                <div class="down">
                  进行应聘
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="进行中的应聘数量"
                    placement="top-start"
                  >
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </div>
              </div>
              <div class="data-cell">
                <div class="up">
                  <span>{{ companyTotal.receivedResumeNum || 0 }}</span
                  >个
                </div>
                <div class="down">
                  收到简历
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="收到的简历数量"
                    placement="top-start"
                  >
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </div>
              </div>
            </div>
            <div class="right">
              <div class="time">{{ companyInfo.recentLoginDate }}</div>
              <el-tooltip
                class="item"
                effect="dark"
                content="该公司管理者最近一次登录时间"
                placement="bottom"
              >
                <div class="tip">
                  企业最近登录<i class="el-icon-question"></i>
                </div>
              </el-tooltip>
            </div>
          </div>
          <!-- <div class="edit-btn"><i class="icon el-icon-edit"></i>编辑</div> -->
        </div>
      </div>
    </section>
    <!-- company-card end -->
    <section class="companymenu-wrap">
      <div class="companymenu wrap">
        <el-menu
          :default-active="companymenuIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="companymenuSelect"
        >
          <el-menu-item index="1">公司主页</el-menu-item>
          <el-menu-item index="2"
            >招聘职位（{{ companyTotal.recruitWorkNum || 0 }}）</el-menu-item
          >
          <el-menu-item index="3"
            >应聘信息（{{ companyTotal.receivedResumeNum || 0 }}）</el-menu-item
          >
        </el-menu>
      </div>
    </section>
    <!-- companymenu end -->
    <section class="page-con wrap">
      <div class="left-content">
        <div v-if="companymenuIndex == '1'" class="company-details">
          <!-- <ul class="company-label">
            <li>个人能力</li>
            <li>执行力</li>
            <li>团队精神</li>
          </ul> -->
          <div class="intro">
            <div class="company-details-til">公司介绍</div>
            {{ companyInfo.detatil }}
          </div>
          <div class="contact">
            <div class="company-details-til">联系方式</div>
            <p>地址： {{ companyInfo.companyAddress }}</p>
            <p>电话：{{ companyInfo.linkPhone }}</p>
          </div>

          <div class="environment" v-if="companyImg.length > 0">
            <div class="company-details-til">工作环境</div>
            <div class="img-wrap">
              <el-image
                v-for="item in companyImg"
                :key="item.id"
                class="img"
                :src="item.filesUrl"
                fit="cover"
              ></el-image>
            </div>
          </div>
        </div>
        <!-- company-details end -->
        <Jobs
          v-if="companymenuIndex == '2'"
          @getTotal="getCompanyInfo"
          :lastSecondNum="companyTotal.lastSecondNum"
        />
        <Applys
          v-if="companymenuIndex == '3'"
          :lastMonthRecruitNum="companyTotal.lastMonthRecruitNum"
        />
      </div>
      <div class="base-info">
        <div class="name">公司基本信息</div>
        <div class="base-info-item">
          <i class="el-icon-s-marketing"></i
          >{{ filterTradeStatus(companyInfo.trade) }}
        </div>
        <div class="base-info-item">
          <i class="el-icon-s-custom"></i
          >{{ filterScopeStatus(companyInfo.scope) }}
        </div>
        <div class="base-info-item">
          <i class="el-icon-location"></i>{{ companyInfo.companyAddress }}
        </div>
      </div>
    </section>
  </div>
</template>
<style lang="scss" scoped>
@import "./home.scss";
</style>
<script>
// @ is an alias to /src
import Header from "@/components/header.vue";
import Mainmenu from "@/components/mainmenu.vue";
import Jobs from "@/components/jobs.vue";
import Applys from "@/components/applys.vue";

import {
  getCompanyInfo,
  getTrade,
  getScope,
  getCompanyTotalInfo,
} from "@/utils/api";

export default {
  name: "Home",
  components: {
    Header,
    Mainmenu,
    Jobs,
    Applys,
  },
  data() {
    return {
      companyLogo: "",
      activeName: "second",
      companymenuIndex: "1",
      companyInfo: {},
      companyImg: [],
      companyTotal: {},
      trade: [],
      scope: [],
    };
  },
  computed: {
    filterTradeStatus() {
      return function (value) {
        let v = "";
        for (let i = 0; i < this.trade.length; i++) {
          let item = this.trade[i];
          if (value == item.value) {
            v = item.label;
            break;
          }
        }
        return v;
      };
    },
    filterScopeStatus() {
      return function (value) {
        let v = "";
        for (let i = 0; i < this.scope.length; i++) {
          let item = this.scope[i];
          if (value == item.value) {
            v = item.label;
            break;
          }
        }
        return v;
      };
    },
  },
  created() {
    // console.log("localStorage.getItem", localStorage.getItem("lifeData"));
    // console.log("this.$router", this.$router);
    this.getinfo();
    this.handelGetTrade();
    this.handelGetScope();
    this.getCompanyInfo();
  },
  mounted() {
    let _this = this;
    if (_this.fromPage == "/applicant") {
      this.companymenuIndex = "3";
    } else if (_this.fromPage == "/jobdetails") {
      this.companymenuIndex = "2";
    }
  },
  beforeRouteEnter(to, from, next) {
    // console.log(from, "beforeRouteEnter");
    next((vm) => {
      // vm相当于上面的this
      vm.fromPage = from.path;
    });
  },
  methods: {
    companymenuSelect(key) {
      this.companymenuIndex = key;
    },
    getinfo() {
      getCompanyInfo()
        .then((res) => {
          this.companyInfo = res.data;
          console.log("getCompanyInfo", res);
          this.$mc.vuex("vuex_name", res.data.userName);
          this.$mc.vuex("vuex_company_id", res.data.id);
          this.$mc.vuex("vuex_user", res.data);
          this.companyLogo = res.data.logoFileList[0]?.filesUrl;
          this.companyImg = res.data.companyfileList;
        })
        .catch((err) => {
          console.log("fetchList err", err);
        });
    },
    getCompanyInfo() {
      getCompanyTotalInfo()
        .then((res) => {
          this.companyTotal = res.data;
        })
        .catch((err) => {});
    },
    handelGetTrade() {
      let that = this;
      getTrade()
        .then((res) => {
          console.log("getTrade", res);
          if (res.code == 200) {
            res.data.map(function (currentValue) {
              that.trade.push({
                value: currentValue.dictValue,
                label: currentValue.dictLabel,
              });
            });
          }
        })
        .catch((err) => {
          console.log("getTrade err", err);
        });
    },
    handelGetScope() {
      let that = this;
      getScope()
        .then((res) => {
          console.log("getScope", res);
          if (res.code == 200) {
            res.data.map(function (currentValue) {
              that.scope.push({
                value: currentValue.dictValue,
                label: currentValue.dictLabel,
              });
            });
          }
        })
        .catch((err) => {
          console.log("getScope err", err);
        });
    },
  },
};
</script>