web-website/src/views/service/servicelist.vue

<template>
  <div id="servicelist">
    <servicelist-detail
      :info="info"
      :liebiaoList="liebiaoList"
      :display="display"
      :columnName="columnName"
      :contentList="contentList"
      :total="total"
      :columnTitle="columnName"
      :policyInfo="policyInfo"
      @clickLists="submit"
      @fetch="fetchInfo"
    ></servicelist-detail>
  </div>
</template>

<script>
import servicelistDetail from '@/components/service/servicelist.vue';
import { createNamespacedHelpers, mapGetters } from 'vuex';
import _ from 'loadsh';
const { mapActions: mapSite } = createNamespacedHelpers('site');
const { mapActions: mappolicyColumn } = createNamespacedHelpers('serveColumn');
const { mapActions: mappolicyNews } = createNamespacedHelpers('serveNews');

export default {
  name: 'shujulist',
  props: {},
  components: { servicelistDetail },
  data: () => ({
    // 站点信息
    info: {},
    // 栏目列表
    liebiaoList: [],
    // 左侧栏目id
    leftId: '',
    // 显示列表+详情
    display: 'list',
    columnName: '',
    contentList: [],
    total: 0,

    columnTitle: '',
    policyInfo: {},
  }),
  async created() {
    await this.search();
    await this.defaultColumn();
  },
  computed: {},
  methods: {
    ...mapSite(['showInfo']),
    ...mappolicyColumn({ policyColumns: 'query', policyfetch: 'fetch' }),
    ...mappolicyNews({ policyNew: 'query', newsFetch: 'fetch' }),
    //查询站点信息+科技服务栏目
    async search({ ...info } = {}) {
      let res = await this.showInfo();
      let object = JSON.parse(JSON.stringify(res.data));
      if (object) {
        this.$set(this, `info`, res.data);
      }
      res = await this.policyColumns({ ...info });
      if (this.$checkRes(res)) {
        this.$set(this, `liebiaoList`, res.data);
      }
    },
    // 点击查询详情
    submit({ id }) {
      this.$set(this, `leftId`, id);
      this.display = 'list';
      this.searchrightnews();
    },
    // 查询详情
    async searchrightnews({ skip = 0, limit = 10, column_id } = {}) {
      const res = await this.policyNew({ column_id: this.leftId });
      let columnName = this.liebiaoList.find(i => i.id == this.leftId);
      if (this.$checkRes(res)) {
        this.$set(this, `contentList`, res.data);
        this.$set(this, `total`, res.total);
        this.$set(this, `columnName`, columnName.name);
      }
    },
    async defaultColumn() {
      if (!(this.liebiaoList.length > 0)) return;
      let id = _.get(this.liebiaoList[0], 'id', false);
      if (!id) return;
      this.submit({ id });
    },
    async fetchInfo(id) {
      this.display = 'detail';
      const res = await this.newsFetch(id);
      let column = this.liebiaoList.find(i => i.id == res.data.column_id);
      if (res) {
        this.$set(this, `policyInfo`, res.data);
        this.$set(this, `columnName`, column.name);
      }
    },
  },
};
</script>

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