web-bench/src/views/home/index.vue

<template>
  <div id="home">
    <el-row :span="24" class="tit">
      <h4>企业工作台</h4>
    </el-row>
    <el-row class="homeMain">
      <el-col class="homeEnr">
        <div style="font-size:20px;">
          校招
        </div>
        <ul class="homeEnrUl">
          <li>
            <a href="">
              <span>
                <em class="number number_s">{{ totalRow }}</em>
                <strong class="title">入驻学校</strong>
              </span>
            </a>
          </li>
        </ul>
      </el-col>
      <el-col class="homeRec">
        <div style="font-size:20px;">
          招聘
        </div>
        <ul class="homeEnrUl homeRecUl">
          <li>
            <a href="">
              <span>
                <em class="number number_s">{{ totalRowPost }}</em>
                <strong class="title">招聘职位数</strong>
              </span>
            </a>
          </li>
          <!-- <li>
            <a href="">
              <span>
                <em class="number number_s">60</em>
                <strong class="title">职位阅读数</strong>
              </span>
            </a>
          </li> -->
          <li>
            <a href="">
              <span>
                <em class="number number_s">{{ totalRowResume }}</em>
                <strong class="title">接受简历数</strong>
              </span>
            </a>
          </li>
          <!-- <li>
            <a href="">
              <span>
                <em class="number number_s">4</em>
                <strong class="title">企业人才库</strong>
              </span>
            </a>
          </li> -->
          <li>
            <a href="">
              <span>
                <em class="number number_s">{{ totalGuanzhu }}</em>
                <strong class="title">关注数</strong>
              </span>
            </a>
          </li>
        </ul>
      </el-col>
    </el-row>
    <el-row class="homeMessage" style="margin-bottom:1rem;">
      <el-col class="homeResTop">
        <h4>待办事项</h4>
        <a href=""></a>
      </el-col>
      <ul class="homeMessageMain">
        <el-table :data="noticeList" border :max-height="200">
          <el-table-column width="800">
            <template slot-scope="scoped">
              {{ scoped.row.name }} {{ scoped.row.content }}
            </template>
          </el-table-column>
          <el-table-column align="center">
            <template slot-scope="scoped">
              <el-link type="primary" @click="handleDelete(scoped.row.id)">[不再提示]</el-link>
            </template>
          </el-table-column>
        </el-table>
      </ul>
    </el-row>
    <el-row class="homeRes">
      <el-col class="homeResTop">
        <h4>最新简历</h4>
        <a href="">换一换</a>
      </el-col>
      <ul class="homeResMain">
        <li v-for="(item, index) in resumeList" :key="index" :type="item.type" @click="checkResume(item.id)">
          <el-col class="homeResMainImg">
            <img :src="item.avatar_url" style="max-height: 120px" width="100" height="100" />
          </el-col>
          <el-col class="homeResMainTit">
            <p class="text-owt">
              <span>{{ item.info.xm }}</span>
              <span>{{ item.info.xb }}</span>
              <span> {{ item.info.xl }}</span>
              <span>{{ item.info.yx }}</span>
            </p>
            <p class="text-owt">
              专业：<span>{{ item.info.zy }}</span>
            </p>
            <p class="text-owt">
              求职意向：<span>{{ item.expect.job }}</span>
              <span>{{ item.expect.city }}</span>
              <span> {{ item.expect.salary }}</span>
            </p>
          </el-col>
        </li>
      </ul>
    </el-row>
    <el-row class="homeMessage" style="margin-bottom:1rem">
      <el-col class="homeResTop">
        <h4>系统消息</h4>
        <a href=""></a>
      </el-col>
      <ul class="homeMessageMain">
        <li v-for="(tag, index) in resumeListSys" :key="index" :type="tag.type">
          <el-col class="MessageMainTit text-owt">
            {{ tag.message }}
          </el-col>
          <el-col class="MessageMainDay text-owt">
            {{ tag.day }}
          </el-col>
        </li>
      </ul>
    </el-row>
    <el-dialog title="简历详情" center :visible.sync="resumeDialog" :fullscreen="true">
      <resumes :info="info"></resumes>
    </el-dialog>
  </div>
</template>

<script>
import resumes from '@publics/src/views/resume.vue';
import { mapActions, mapState } from 'vuex';
export default {
  name: 'home',
  components: {
    resumes,
  },
  data: () => ({
    resumeDialog: false,
    resumeList: [],
    totalRow: 0,
    totalRowPost: 0,
    totalRowResume: 0,
    totalGuanzhu: 0,
    resumeListSys: [],
    info: {},
    noticeList: [],
  }),
  created() {
    this.search();
    this.getNoticeList();
  },
  computed: {
    ...mapState(['user']),
  },
  methods: {
    ...mapActions(['resumesOperation', 'lettersOperation', 'corpSchInfo', 'postOperation', 'stucorpOperation', 'noticeOperation']),
    async search(searchInfo) {
      //1直接拿着参数发送请求
      let result = await this.lettersOperation({ type: 'list', data: { corpname: this.user.corpname } });
      if (`${result.errcode}` === '0') {
        //给this=>vue的实例下在中的list属性，赋予result.data的值
        this.$set(this, `totalRowResume`, result.total);
      } else {
        this.$message.error(result.errmsg ? result.errmsg : 'error');
      }
      result = await this.stucorpOperation({ type: 'list', data: { corpid: this.user.corpid } });
      if (`${result.errcode}` === '0') {
        //给this=>vue的实例下在中的list属性，赋予result.data的值
        this.$set(this, `totalGuanzhu`, result.total);
      } else {
        this.$message.error(result.errmsg ? result.errmsg : 'error');
      }
      result = await this.resumesOperation({ type: 'list', data: { ...searchInfo, year: new Date().getFullYear() } });
      if (`${result.errcode}` === '0') {
        let arr = [];
        result.data.forEach(async val => {
          let result = await this.resumesOperation({ type: 'search', data: { id: val.id } });
          let object = { ...val, avatar_url: result.data.avatar_url };
          // let object = { ...val, list: result.data };
          arr.push(object);
        });
        //给this=>vue的实例下在中的list属性，赋予result.data的值
        this.$set(this, `resumeList`, arr);
      } else {
        this.$message.error(result.errmsg ? result.errmsg : 'error');
      }
      result = await this.corpSchInfo({ type: 'list', data: { corpid: this.user.corpid } });
      if (`${result.errcode}` === '0') {
        this.$set(this, `totalRow`, result.data.length);
      } else {
        this.$message.error(result.errmsg ? result.errmsg : 'error');
      }
      result = await this.postOperation({ type: 'list', data: { corpid: this.user.corpid } });
      if (`${result.errcode}` === '0') {
        this.$set(this, `totalRowPost`, result.total);
      } else {
        this.$message.error(result.errmsg ? result.errmsg : 'error');
      }
    },
    async checkResume(id) {
      let result = await this.resumesOperation({ type: 'search', data: { id: id } });
      if (`${result.errcode}` === '0') {
        this.$set(this, `info`, result.data);
        this.resumeDialog = true;
      }
    },
    async getNoticeList() {
      let result = await this.noticeOperation({ type: 'list', data: { userid: this.user.corpid, type: 1 } });
      if (`${result.errcode}` === '0') {
        this.$set(this, `noticeList`, result.data ? result.data : []);
      }
    },
    async noticeDelete(id) {
      let result = await this.noticeOperation({ type: 'delete', data: { id: id } });
      if (`${result.errcode}` === '0') {
        this.getNoticeList();
      }
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.el-dialog__body {
  padding: 0;
}
/deep/.has-gutter {
  display: none;
}
.tit h4 {
  color: #333;
  font-size: 15px;
  font-weight: 500;
  margin: 0;
  margin: 20px 0;
}
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
p {
  margin: 0;
  padding: 0;
}
h4 {
  margin: 0;
}
.text-owt {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.homeMain {
  float: left;
  width: 100%;
  height: 140px;
}
.homeEnr {
  text-align: center;
  width: 18%;
  display: inline-block;
  background-color: #7cbae5;
  border: 1px solid #6eb0dd;
  color: #fff;
  margin-right: 19px;
}
.homeEnrUl {
  overflow: hidden;
  display: block;
  padding: 0;
  padding-bottom: 26px;
  margin: 0;
}
.homeEnrUl li {
  float: left;
  display: block;
  color: #fff;
  width: 100%;
  height: 75px;
}
.homeRecUl li {
  float: left;
  display: block;
  color: #fff;
  width: 20%;
  height: 75px;
}
.homeEnrUl li a {
  color: #fff;
}
.homeEnrUl li a span {
  display: block;
  border-left: 1px solid #6fa7ce;
}
.homeRecUl li a span {
  display: block;
  border-left: 1px solid #57c78b;
}
.homeEnrUl li a span .number {
  margin-left: 5px;
  font-weight: 400;
  font-style: normal;
  vertical-align: middle;
  font-size: 35px;
  line-height: 60px;
}
.homeEnrUl li a span .number_s {
  font-size: 16px;
}
.homeEnrUl li a span .title {
  display: block;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  letter-spacing: 2px;
  margin-top: -10px;
}
.homeRec {
  text-align: center;
  width: 79%;
  display: inline-block;
  background-color: #60d295;
  border: 1px solid #60d295;
  color: #fff;
  margin-bottom: 15px;
}
.homeRes {
  float: left;
  width: 100%;
  border: 1px solid #ccc;
  margin: 0 0 20px 0;
}
.homeResTop {
  width: 100%;
  height: 39px;
  background: #f4f5fa;
  border-bottom: 1px solid #ccc;
}
.homeResTop h4 {
  float: left;
  width: 50%;
  padding: 10px;
  font-size: 14px;
  color: #333;
  font-weight: 500;
}
.homeResTop a {
  float: right;
  text-align: right;
  width: 45%;
  padding: 10px;
  font-size: 14px;
  color: #337ab7;
}
.homeResTop a:hover {
  color: #23527c;
  text-decoration: underline;
}
.homeResMain {
  float: left;
  width: 100%;
  height: 387px;
  overflow: hidden;
}
.homeResMain li {
  float: left;
  width: 452px;
  height: 87px;
  padding: 20px 8px 20px 20px;
  color: #333;
  font-size: 14px;
  background: #fff;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.homeResMain li:hover {
  background: #f5f5f5;
}
.homeResMainImg {
  float: left;
  width: 80px;
  height: 80px;
  border-radius: 90px;
}
.homeResMainImg img {
  border-radius: 90px;
}
.homeResMainTit {
  float: left;
  width: 350px;
  height: 88px;
  padding: 0 0 0 30px;
}
.homeResMainTit p {
  font-size: 16px;
  color: #333;
  line-height: 27px;
}
.homeResMainTit p span {
  padding: 0 10px 0 0;
}

.homeMessage {
  float: left;
  width: 100%;
  border: 1px solid #ccc;
}
.homeMessageMain {
  float: left;
  width: 100%;
  height: 246px;
  overflow: hidden;
}
.homeMessageMain li {
  float: left;
  width: 100%;
  height: 39px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  background: #fff;
}
.homeMessageMain li:hover {
  background: #f5f5f5;
}
.homeMessageMain li .MessageMainTit {
  float: left;
  width: 763px;
  height: 39px;
  padding: 10px;
  font-size: 14px;
  color: #333;
  font-weight: 500;
}
.homeMessageMain li .MessageMainDay {
  float: right;
  width: 140px;
  padding: 10px;
  font-size: 14px;
  color: #999;
  font-weight: 500;
}
</style>