web-center/src/views/list.vue

<template>
  <div id="list">
    <list-detail
      :menuList="menu"
      :sideMenu="sideMenu"
      :info="site"
      :backColor="backColor"
      :Color="Color"
      :rightList="list"
      :total="total"
      @search="search"
    ></list-detail>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
import _ from 'lodash';
import { masterMenu } from '@/config/jobs-menu';
import listDetail from '@/components/list.vue';
export default {
  metaInfo() {
    return {
      title: this.siteTitle ? this.siteTitle : '就业信息网',
    };
  },
  name: 'list',
  props: {},
  components: {
    listDetail,
  },
  data: () => ({
    backColor: '#0457c7',
    Color: '#0457c7',
    menu: [],
    sideMenu: masterMenu.children,
    site: {},
    siteTitle: '',
    total: 0,
    list: [],
  }),
  async created() {
    await this.toGetSite(); //获取主站信息
    await this.loadMenu(); //获取菜单信息
    await this.search();
  },
  computed: {
    jobs() {
      return this.$route.params.jobs;
    },
    type() {
      return this.$route.params.type;
    },
  },
  watch: {
    jobs: 'search',
    type: 'search',
  },
  methods: {
    ...mapActions(['getSite', 'getMenu', 'getColumn', 'getJobfair', 'getTalk', 'getJobInfo', 'getPosts']),
    async search({ skip = 0, limit = 8 } = {}) {
      let result;
      if (this.jobs === 'talk') {
        result = await this.getTalk({ type: 'list', data: { skip: skip, limit: limit } });
      } else if (this.jobs === 'jobfair') {
        result = await this.getJobfair({ type: 'list', data: { skip: skip, limit: limit } });
      } else if (this.jobs === 'jobs') {
        result = await this.getPosts({ type: 'list', data: { skip: skip, limit: limit, is_practice: this.type === 'official' ? 0 : 1 } });
      } else {
        result = await this.getJobInfo({ type: 'list', data: { skip: skip, limit: limit } });
      }
      if (`${result.errcode}` === '0') {
        //给this=>vue的实例下在中的list属性，赋予result。data的值
        this.$set(this, `list`, result.data);
        this.$set(this, `total`, result.total);
      } else {
        this.$message.error(result.errmsg ? result.errmsg : 'error');
      }
    },
    //站点信息
    async toGetSite() {
      let site = sessionStorage.getItem('site');
      if (!site) {
        let result = await this.getSite({ type: 'search' });
        if (result.errcode === 0) {
          sessionStorage.setItem('site', JSON.stringify(result.data));
          if (_.get(result.data, `custom`)) {
            let item = result.custom;
          }
          this.$set(this, `site`, result.data);
          this.$set(this, `siteTitle`, this.site.name);
        }
      } else {
        this.$set(this, `site`, JSON.parse(site));
        this.$set(this, `siteTitle`, this.site.name);
        let arr = this.site;
        if (arr.custom) {
          let item = arr.custom;
        }
      }
    },
    //菜单
    async loadMenu() {
      let menu = sessionStorage.getItem('menu');
      if (menu) {
        this.$set(this, `menu`, JSON.parse(menu));
        await this.finishedMenu();
      } else this.toGetMenu();
    },
    async toGetMenu() {
      let result = await this.getMenu({ type: `list` });
      if (result.errcode === 0) {
        sessionStorage.setItem('menu', JSON.stringify(result.data));
        this.$set(this, `menu`, result.data);
        this.finishedMenu();
      }
    },
    async finishedMenu() {
      let menus = JSON.parse(JSON.stringify(this.menu));
      for (const item of menus) {
        if (item.type === 'content') {
          item.path = `/detail/${item.content_id}`;
        } else if (item.type !== 'url') {
          let res = await this.completeMenu(item);
          item.children = res;
        }
      }
      this.$set(this, `menu`, menus);
    },
    async completeMenu(item) {
      let result = await this.getColumn({
        type: `list`,
        data: { parent_id: item.id },
      });
      if (result.errcode === 0) {
        let columns = result.data;
        for (const col of columns) {
          if (col.type === 'content') {
            col.path = `/detail/${col.content_id}`;
          } else if (col.type !== 'url') {
            col.path = `/newsList/menu/${col.id}?title=${col.title}`;
            if (col.parent.includes('党员')) {
              col.path = `/memberList/menu/${col.id}?title=${col.title}`;
            }
          }
        }
        return columns;
      }
    },
  },
};
</script>

<style lang="less" scoped></style>