epmet-work-pc/src/views/dataBoard/overview/components/RequirementList.vue

<template>
  <div class="container">
    <div class="tab" style="margin-top: 0;">
      <Tabs :list="tab" :value="tabval" @changeVal="(val) => tabval = val"/>
    </div>
    <DemandSwiperList v-if="tabval === 1" :list="userDemandList" @showDetail="showDetail">
      <template slot-scope="item">
        <span>{{ item.demandUser }}</span>
        <span>{{ item.content }}</span>
      </template>

    </DemandSwiperList>
    <DemandCharts v-else/>
    <div class="tab">
      <Tabs :list="tab2" :value="tabval2" @changeVal="(val) => tabval2 = val"/>
    </div>
    <DemandSwiperList v-if="tabval2 === 1" :list="commonDemandList" @showDetail="showDetail2">
      <template slot-scope="item">
        <span>{{ item.createdTime }}</span>
        <span>{{ item.title }}</span>
      </template>
    </DemandSwiperList>
    <DemandCharts v-else/>
    <ServiceDetails ref="ServiceDetails"/>
    <Bmysxxq ref="Bmysxxq"/>
  </div>
</template>

<script>
import Tabs from "@/views/dataBoard/cpts/Tabs.vue";
import DemandSwiperList from "@/views/dataBoard/overview/components/DemandSwiperList.vue";
import DemandCharts from "@/views/dataBoard/overview/components/DemandCharts.vue";
import ServiceDetails from "@/views/dataBoard/overview/components/ServiceDetails.vue";
import Bmysxxq from "@/views/dataBoard/overview/components/Bmysxxq.vue";

export default {
  name: "RequirementList",
  components: {
    Tabs,
    DemandCharts,
    DemandSwiperList,
    ServiceDetails,
    Bmysxxq
  },
  data() {
    return {
      tabval: 1,
      tabval2: 1,
      userDemandList: [],
      commonDemandList: [],
      tab: [{
        label: '个性需求未完成清单',
        value: 1
      }, {
        label: '个性需求分类统计',
        value: 2
      }],
      tab2: [{
        label: '共性需求未承接清单',
        value: 1
      }, {
        label: '共性需求分类统计',
        value: 2
      }]
    }
  },
  mounted() {
    this.getUserDemandList()
    this.getCommonDemandList()
  },
  methods: {
    showDetail() {
      this.$refs.ServiceDetails.open();
    },
    showDetail2() {
      this.$refs.Bmysxxq.open();
    },
    getUserDemandList() {
      this.$http.post('/governance/userdemand/pagelist').then(({data}) => {
        this.userDemandList = data.list || []
      })
    },
    getCommonDemandList() {
      this.$http.get('/governance/commonDemand/list?assignFlag=0').then(({data}) => {
        this.commonDemandList = data.list || []
      })
    }
  }
}
</script>


<style lang="scss" scoped>
.container {
  padding: 19px 16px;
}

.tab {
  margin: 10px 0;
}

</style>