CZC/operationSupport/src/views/payService/statisticalReport/chargeStatistics.vue

<template>
  <div class="main">
    <div class="search">
      <el-input
        class="search-input"
        v-model="mixins_query.likeValue"
        placeholder="输入业主/房间号"
        clearable
      ></el-input>
      <el-select
        v-model="mixins_query.communityId"
        placeholder="选择社区"
        @change="communityChange"
      >
        <el-option
          v-for="(item, index) in communityArr"
          :key="index"
          :label="item.communityName"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-date-picker
        v-model="times"
        value-format="yyyy-MM"
        type="monthrange"
        range-separator="至"
        start-placeholder="选择开始日期"
        end-placeholder="选择结束日期"
        @change="effectiveDateToggle"
        :clearable="false"
      ></el-date-picker>

      <el-button
        type="primary"
        class="search-btn"
        @click="initSearchAll"
        icon="el-icon-search"
      >查询 </el-button>
      <div class="search-icon">
        <el-tooltip
          class="item"
          effect="light"
          placement="bottom"
          content="导出"
        >
          <i
            class="zoniot_font zoniot-icon-daochu2"
            @click="exportExcel"
          ></i>
        </el-tooltip>
      </div>
    </div>
    <div class="table-top">
      <div class="table-top_block title">
        <div>{{ thisObjCommunit['communityName'] || '' }}收费统计</div>
        <div>{{ timeFiterType() }}</div>
      </div>
      <div
        class="table-top_block blockColor"
        v-for="item in blockArr"
        :key="item"
      >
        <div class="number">{{ item.val }}</div>
        <div>{{ item.label }}</div>
      </div>
    </div>
    <zz-table
      :cols="cols"
      :settings="{ showIndex: true, stripe: true }"
      :loading="mixins_onQuery"
      :data="mixins_list"
      :updateFlag="true"
      :pageset="mixins_pageset"
      @page-change="pageChange"
    >
      <template
        slot-scope="scope"
        :slot="item.md5Key"
        v-for="(item, index) in tableInsert"
      >
        <div :key="index">
          {{ activeName(item, scope.row['details']) }}
        </div>
      </template>
    </zz-table>
  </div>
</template>

<script>
import list from '@utils/list.js';
export default {
  mixins: [list],
  data () {
    let _this = this;
    return {
      cols: [
        {
          label: '社区名称',
          prop: 'communityName'
        },
        {
          label: '房间',
          prop: 'houseDetail'
        },
        {
          label: '业主',
          prop: 'residentName'
        },
        {
          label: '物业费标准(元/月)',
          prop: 'chargingStandard'
        },
        {
          label: '月数',
          prop: 'months'
        },
        {
          label: '合计',
          prop: 'totalAmount'
        }
      ],
      mixins_post: 'post',
      times: [],
      communityArr: [],
      blockArr: [],
      tableInsert: [],
      thisObjCommunit: {}
    };
  },
  created () {
    let thisDay = this.$moment(new Date()).format('YYYY-MM');
    this.times = [thisDay, thisDay];
    new Promise((resolve) => {
      this.getorgTree(resolve);
    }).then(() => {
      this.initSearchData(thisDay);
      this.mixins_dataUrl = '/czc-charge/charge/report/page';
      this.initSearchAll();
    });
  },
  mounted () { },
  methods: {
    initSearchData (time) {
      this.mixins_query = {
        communityId: this.thisObjCommunit.id,
        startTime: time,
        endTime: time
      };
    },
    initSearchAll () {
      new Promise((resolve) => {
        this.getTopTable(resolve);
      }).then(() => {
        this.mixins_search();
      });
    },
    typeName (item) {
      let name = '';
      switch (item.chargeType) {
        case 1:
          name = '物业费';
          break;
        case 2:
          name = '水费';
          break;
        case 3:
          name = '电费';
          break;
        case 4:
          name = '车位费';
          break;
        case 6:
          name = '卫生费';
          break;
        case 7:
          name = item.chargeName;
          break;
      }
      return name;
    },
    activeName (item, arr) {
      let amount = '--';
      arr.map((its) => {
        if (its.md5Key == item.md5Key) {
          amount = its.amount;
        }
      });
      return amount;
    },
    exportExcel () {
      this.__exportExcel('/czc-charge/charge/report/export/excel', this.mixins_query);
    },
    effectiveDateToggle (va) {
      let arr = va;
      if (!arr) {
        arr = ['', ''];
      }
      this.mixins_query.startTime = arr[0];
      this.mixins_query.endTime = arr[1];
      this.initSearchAll();
    },
    getorgTree (resolve) {
      this.$http
        .get('/czc-community/assets/community/list')
        .then((data) => {
          this.communityArr = data.data;
          this.thisObjCommunit = this.communityArr[0];
          this.$store.commit('setAreaSelect', data.data);
          resolve && resolve();
        })

        .catch(function () { });
    },
    getTopTable (resolve) {
      this.cols = [
        {
          label: '社区名称',
          prop: 'communityName'
        },
        {
          label: '房间',
          prop: 'houseDetail'
        },
        {
          label: '业主',
          prop: 'residentName'
        },
        {
          label: '物业费标准(元/月)',
          prop: 'chargingStandard'
        },
        {
          label: '月数',
          prop: 'months'
        },
        {
          label: '合计',
          prop: 'totalAmount'
        }
      ];
      let tableInsert = [];
      this.$http.post('/czc-charge/charge/report/total', this.mixins_query).then(({ data, status, msg }) => {
        if (status == 0) {
          if (!!data && data.details.length) {
            let arr = [{ label: '总收费', val: data.totalAmount }];
            data.details.map((item, index) => {
              arr.push({ label: this.typeName(item), val: item.amount });
              tableInsert.push({
                md5Key: item.md5Key
              });
              this.cols.splice(5 + index, 0, {
                label: this.typeName(item),
                slot: item.md5Key
              });
            });
            this.tableInsert = tableInsert;
            this.blockArr = arr;
          } else {
            this.tableInsert = [];
            this.blockArr = [];
          }
        }
        resolve && resolve();
      });
    },
    communityChange (e) {
      this.communityArr.find((item) => {
        if (item.id == e) {
          this.thisObjCommunit = item;
          this.initSearchAll();
        }
      });
    },
    timeFiterType () {
      let arr = this.times;
      let text = '';
      if (!arr) {
        arr = ['', ''];
      }
      let f = new Date(arr[0]).getMonth(),
        l = new Date(arr[1]).getMonth();
      if (f == l) {
        text = `${this.$moment(new Date(arr[0])).format('YYYY年M月')}`;
      } else {
        text = `${this.$moment(new Date(arr[0])).format('YYYY年M月')}-${this.$moment(new Date(arr[1])).format('YYYY年M月')}`;
      }
      return text;
    }
  }
};
</script>
<style scoped lang='scss'>
@import '@assets/css/public-style.scss';
.table-top {
    display: flex;
    // margin-bottom: 20px;
    background: white;
    padding: 10px 0;
    .table-top_block {
        height: 60px;
        line-height: 20px;
        text-align: center;
        margin-left: 20px;
        &.title {
            font-size: 16px;
            font-weight: 600;
            color: #0eaeff;
            line-height: 27px;
            border-right: 1px solid #eee;
            padding-right: 60px;
        }
        &.blockColor {
            min-width: 150px;
            text-align: left;
            border-right: 1px solid #eee;
            &:last-child {
                border: none;
            }
            .number {
                font-size: 24px;
                font-weight: 600;
                line-height: 33px;
            }
        }
    }
}
</style>