epmet-work-pc-chengyang/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">
      <template slot-scope="{data}">
        <span @click="goToPortrait(data)">{{ data.demandUserName }}</span>
        <span @click="showDetail(data)">{{ data.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="{data}">
        <span>{{ data.createdTime?$moment(data.createdTime).format('MM-DD'):'' }}</span>
        <span>{{ data.title }}</span>
      </template>
    </DemandSwiperList>
    <DemandCharts2 v-else/>
    <ServiceDetails ref="ServiceDetails" :currentLevelData="currentLevelData"/>
    <Bmysxxq ref="Bmysxxq" :currentLevelData="currentLevelData"/>
  </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 DemandCharts2 from "@/views/dataBoard/overview/components/DemandCharts2.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,
    DemandCharts2,
    DemandSwiperList,
    ServiceDetails,
    Bmysxxq
  },
  props: {
    currentLevelData: {
      type: Object,
      default: () => {
      },
    }
  },
  data() {
    return {
      tabval: 1,
      tabval2: 1,
      userDemandList: [],
      commonDemandList: [],
      tab: [{
        label: '个性需求未完成清单',
        value: 1
      }, {
        label: '个性需求分类统计',
        value: 2
      }],
      tab2: [{
        label: '共性需求未承接清单',
        value: 1
      }, {
        label: '共性需求分类统计',
        value: 2
      }]
    }
  },
  watch: {
    currentLevelData(val) {
      if (val.orgId) {
        console.log(this.currentLevelData, 'this.currentLevelData222')
        this.getUserDemandList()
        this.getCommonDemandList()
      }
    },
  },
  mounted() {
    if (this.currentLevelData.orgId) {
      this.getUserDemandList()
      this.getCommonDemandList()
    }
  },
  methods: {
    goToPortrait({demandUserId}) {
      this.$router.push({
        path: "/dataBoard/overview/resident",
        query: {
          user_id: demandUserId,
        },
      });
    },
    showDetail({demandRecId}) {
      this.$refs.ServiceDetails.open(demandRecId);
    },
    showDetail2({id}) {
      this.$refs.Bmysxxq.open(id);
    },
    getUserDemandList() {
      this.$http.post('/governance/userdemand/pagelist', {
        undoneStauts: "undone",
        pageSize: 20,
        orgLevel: this.currentLevelData.orgLevel,
        orgId: this.currentLevelData.orgId
      }).then(({data: {data}}) => {
        console.log(data.list, 'data.list ', data)
        this.userDemandList = data ? data.list : []
      })
    },
    getCommonDemandList() {
      this.$http.post('/governance/commonDemand/list',{
        assignFlag:0,
        pageSize: 20,
        level: this.currentLevelData.orgLevel,
        agencyld: this.currentLevelData.orgId
      }).then(({data: {data}}) => {
        this.commonDemandList = data ? data.list : []
      })
    },

  }
}
</script>


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

.tab {
  margin: 10px 0;
}

</style>