SystemReconciliation.vue

<template>
  <div class="SystemReconciliation">
    <div class="searchBox">
      <a-date-picker
        :disabledDate="disabledStartDate"
        format="YYYY-MM-DD"
        v-model="startValue"
        placeholder="开始日期"
        @change="onChangeStartValue"
        @openChange="handleStartOpenChange"
      />
      ～
      <a-date-picker
        :disabledDate="disabledEndDate"
        format="YYYY-MM-DD"
        placeholder="结束日期"
        @change="onChangeEndValue"
        v-model="endValue"
        :open="endOpen"
        @openChange="handleEndOpenChange"
      />
      <a-button type="primary" @click="getAccountCheck">查询</a-button>
    </div>
    <div class="title">账单汇总</div>
    <div class="SystemReconciliationContent">
      <div class="contentItem">
        <div class="title">
          充值金额
        </div>
        <div>
          <p><label>现金：</label>¥{{systemReconciliationDetails.internalRechargeAmount || '0.00'}}</p>
          <p><label>支付宝：</label>¥{{systemReconciliationDetails.externalRechargeAmount || '0.00'}}</p>
        </div>
        <div><p>共计：<span>¥{{ returnRechargeAmount() }}</span></p></div>
      </div>
      <div class="contentItem">
        <div class="title">
          发放津贴
        </div>
        <div>
          <p v-for=" item in systemReconciliationDetails.subsidyCheck" :key="item.sceneType"><label>{{ item.sceneType === 'TRAVEL' ? '交通补助' : '餐补' }}：</label>¥{{ item.amount || '0.00' }}</p>
        </div>
        <div><p>共计：<span>¥{{ returnSubsidyCheckTotal() }}</span></p></div>
      </div>
      <div class="contentItem">
        <div class="title">
          消费金额
        </div>
        <div class="recordsBox">
          <div v-for="item in systemReconciliationDetails.consumeCheck" :key="item.sceneType">
            <div>{{ item.sceneType === 'TRAVEL' ? '交通消费' : '用餐消费' }}：</div>
            <div>
              <p>现金：¥{{ item.realityAmount || '0.00' }}</p>
              <p>津贴：¥{{ item.subsidyAmount || '0.00' }}</p>
            </div>
          </div>
        </div>
        <div>
          <p>共计：<span>¥{{ returnConsumeCheck('total') }}</span></p>
          <p>津贴总消费：<span>¥{{ returnConsumeCheck('subsidyAmount') }}</span></p>
          <p>现金总消费：<span>¥{{ returnConsumeCheck('realityAmount') }}</span></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { $http } from './../../../api/axios.js'
import moment from 'moment'
export default {
  name: 'systemReconciliation',
  data () {
    return {
      startTime: '',
      endTime: '',
      startValue: null,
      endValue: null,
      endOpen: false,
      systemReconciliationDetails: {}
    }
  },
  created () {
    let date = new Date()
    let year = date.getFullYear()
    let month = date.getMonth() + 1
    let day = (new Date(year, month, 0).getDate().toString()).length > 1 ? new Date(year, month, 0).getDate() : '0' + new Date(year, month, 0).getDate()
    this.startTime = `${year}-${month.toString().length > 1 ? month : '0' + month}-01`
    this.endTime = `${year}-${month.toString().length > 1 ? month : '0' + month}-${day}`
    this.startValue = this.moment(`${year}-${month.toString().length > 1 ? month : '0' + month}-01`, 'YYYY-MM-DD')
    this.endValue = this.moment(`${year}-${month.toString().length > 1 ? month : '0' + month}-${day}`, 'YYYY-MM-DD')
    this.getAccountCheck()
  },
  methods: {
    moment,
    disabledStartDate (startValue) {
      const endValue = this.endValue
      if (!startValue || !endValue) {
        return false
      }
      return startValue.valueOf() > endValue.valueOf() || startValue.valueOf() >= moment().endOf('day').valueOf()
    },
    disabledEndDate (endValue) {
      const startValue = this.startValue
      if (!endValue || !startValue) {
        return false
      }
      return startValue.valueOf() > endValue.valueOf() || endValue.valueOf() > moment().endOf('day').valueOf()
    },
    handleStartOpenChange (open) {
      if (!open) {
        this.endOpen = true
      }
    },
    handleEndOpenChange (open) {
      this.endOpen = open
    },
    onChangeStartValue (date, dateString) {
      this.startTime = dateString
    },
    onChangeEndValue (date, dateString) {
      this.endTime = dateString
    },
    returnConsumeCheck (str) {
      let totalNum = 0
      if (this.systemReconciliationDetails.consumeCheck) {
        if (str === 'realityAmount') {
          this.systemReconciliationDetails.consumeCheck.map(item => {
            let realityAmountNum = item.realityAmount ? item.realityAmount : 0
            totalNum = totalNum + parseFloat(realityAmountNum)
          })
          return totalNum.toFixed(2)
        } else if (str === 'subsidyAmount') {
          this.systemReconciliationDetails.consumeCheck.map(item => {
            let subsidyAmountNum = item.subsidyAmount ? item.subsidyAmount : 0
            totalNum = totalNum + parseFloat(subsidyAmountNum)
          })
          return totalNum.toFixed(2)
        } else if (str === 'total') {
          this.systemReconciliationDetails.consumeCheck.map(item => {
            let orderAmountNum = item.orderAmount ? item.orderAmount : 0
            totalNum = totalNum + parseFloat(orderAmountNum)
          })
          return totalNum.toFixed(2)
        }
      } else {
        return '0.00'
      }
    },
    returnSubsidyCheckTotal () {
      let totalNum = 0
      if (this.systemReconciliationDetails.subsidyCheck) {
        this.systemReconciliationDetails.subsidyCheck.map(item => {
          let amountNum = item.amount ? item.amount : 0
          totalNum = totalNum + parseFloat(amountNum)
        })
        return totalNum.toFixed(2)
      } else {
        return '0.00'
      }
    },
    returnRechargeAmount () {
      let internalRechargeAmount = this.systemReconciliationDetails.internalRechargeAmount || 0
      let externalRechargeAmount = this.systemReconciliationDetails.externalRechargeAmount || 0
      let totalNum = parseFloat(internalRechargeAmount) + parseFloat(externalRechargeAmount)
      return totalNum.toFixed(2)
    },
    getAccountCheck () {
      let SubsidyListData = this.$qs.stringify({
        startTime: this.startTime,
        endTime: this.endTime,
        orgId: localStorage.getItem('orgId')
      })
      $http.get(`/account/accountCheck?${SubsidyListData}`).then((res) => {
        console.log(res.data.data)
        if (res.data.resultCode === '0') {
          this.systemReconciliationDetails = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.title{
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 20px;
}
.searchBox button{
  margin-left: 10px;
}
.SystemReconciliationContent{
  border: 1px solid #f6f6f6;
  width: 100%;
}
.contentItem{
  width: 100%;
  display: flex;
  padding: 20px;
  overflow: hidden;
  border-bottom: 1px solid #f6f6f6;
}
.contentItem>div{
  display: flex;
  flex-direction: column;
}
.contentItem>div:nth-of-type(2){
  flex: 1;
  padding-left: 72px;
  box-sizing: border-box;
}
.contentItem>div:nth-of-type(3){
  width: 300px;
  flex-direction: column-reverse;
}
.contentItem>div:nth-of-type(1){
  font-weight: bold;
  justify-content: center;
  width: 150px;
}
.recordsBox>div{
  display: flex;
}
.contentItem>.recordsBox{
  padding-left: 0 !important;
}
.recordsBox>div>div:nth-of-type(1){
  width: 80px;
  text-align: right;
  margin-right: 20px;
}
.contentItem span {
  color: #1890ff;
}
.contentItem label{
  width: 70px;
  display: inline-block;
  text-align: right;
}
</style>