SystemReconciliation.vue 7.49 KB
Newer Older
liang ce committed
1 2
<template>
  <div class="SystemReconciliation">
liang ce committed
3
    <div class="searchBox">
4 5 6 7 8 9 10 11
      <a-date-picker
        :disabledDate="disabledStartDate"
        format="YYYY-MM-DD"
        v-model="startValue"
        placeholder="开始日期"
        @change="onChangeStartValue"
        @openChange="handleStartOpenChange"
      />
12

13 14 15 16 17 18 19 20 21
      <a-date-picker
        :disabledDate="disabledEndDate"
        format="YYYY-MM-DD"
        placeholder="结束日期"
        @change="onChangeEndValue"
        v-model="endValue"
        :open="endOpen"
        @openChange="handleEndOpenChange"
      />
liang ce committed
22 23
      <a-button type="primary" @click="getAccountCheck">查询</a-button>
    </div>
24
    <div class="title">账单汇总</div>
liang ce committed
25 26 27 28 29 30
    <div class="SystemReconciliationContent">
      <div class="contentItem">
        <div class="title">
          充值金额
        </div>
        <div>
liang ce committed
31 32
          <p><label>现金:</label>¥{{systemReconciliationDetails.internalRechargeAmount || '0.00'}}</p>
          <p><label>支付宝:</label>¥{{systemReconciliationDetails.externalRechargeAmount || '0.00'}}</p>
liang ce committed
33 34 35 36 37 38 39 40
        </div>
        <div><p>共计:<span>¥{{ returnRechargeAmount() }}</span></p></div>
      </div>
      <div class="contentItem">
        <div class="title">
          发放津贴
        </div>
        <div>
liang ce committed
41
          <p v-for=" item in systemReconciliationDetails.subsidyCheck" :key="item.sceneType"><label>{{ item.sceneType === 'TRAVEL' ? '交通补助' : '餐补' }}</label>¥{{ item.amount || '0.00' }}</p>
liang ce committed
42 43 44 45 46 47 48 49 50
        </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">
51
            <div>{{ item.sceneType === 'TRAVEL' ? '交通消费' : '用餐消费' }}</div>
liang ce committed
52
            <div>
liang ce committed
53 54
              <p>现金:¥{{ item.realityAmount || '0.00' }}</p>
              <p>津贴:¥{{ item.subsidyAmount || '0.00' }}</p>
liang ce committed
55 56 57
            </div>
          </div>
        </div>
58
        <div>
liang ce committed
59
          <p>共计:<span>¥{{ returnConsumeCheck('total') }}</span></p>
60 61
          <p>津贴总消费:<span>¥{{ returnConsumeCheck('subsidyAmount') }}</span></p>
          <p>现金总消费:<span>¥{{ returnConsumeCheck('realityAmount') }}</span></p>
liang ce committed
62 63 64
        </div>
      </div>
    </div>
liang ce committed
65 66 67 68
  </div>
</template>

<script>
liang ce committed
69 70
import { $http } from './../../../api/axios.js'
import moment from 'moment'
liang ce committed
71
export default {
liang ce committed
72 73 74 75 76
  name: 'systemReconciliation',
  data () {
    return {
      startTime: '',
      endTime: '',
77 78 79
      startValue: null,
      endValue: null,
      endOpen: false,
liang ce committed
80 81 82 83 84 85 86 87 88 89
      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}`
90 91
    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')
liang ce committed
92 93 94 95
    this.getAccountCheck()
  },
  methods: {
    moment,
96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122
    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
liang ce committed
123 124 125 126 127 128
    },
    returnConsumeCheck (str) {
      let totalNum = 0
      if (this.systemReconciliationDetails.consumeCheck) {
        if (str === 'realityAmount') {
          this.systemReconciliationDetails.consumeCheck.map(item => {
129 130
            let realityAmountNum = item.realityAmount ? item.realityAmount : 0
            totalNum = totalNum + parseFloat(realityAmountNum)
liang ce committed
131 132 133 134
          })
          return totalNum.toFixed(2)
        } else if (str === 'subsidyAmount') {
          this.systemReconciliationDetails.consumeCheck.map(item => {
135 136
            let subsidyAmountNum = item.subsidyAmount ? item.subsidyAmount : 0
            totalNum = totalNum + parseFloat(subsidyAmountNum)
liang ce committed
137 138 139 140
          })
          return totalNum.toFixed(2)
        } else if (str === 'total') {
          this.systemReconciliationDetails.consumeCheck.map(item => {
141 142
            let orderAmountNum = item.orderAmount ? item.orderAmount : 0
            totalNum = totalNum + parseFloat(orderAmountNum)
liang ce committed
143 144 145 146
          })
          return totalNum.toFixed(2)
        }
      } else {
147
        return '0.00'
liang ce committed
148 149 150 151 152 153
      }
    },
    returnSubsidyCheckTotal () {
      let totalNum = 0
      if (this.systemReconciliationDetails.subsidyCheck) {
        this.systemReconciliationDetails.subsidyCheck.map(item => {
154 155
          let amountNum = item.amount ? item.amount : 0
          totalNum = totalNum + parseFloat(amountNum)
liang ce committed
156 157 158
        })
        return totalNum.toFixed(2)
      } else {
159
        return '0.00'
liang ce committed
160 161 162
      }
    },
    returnRechargeAmount () {
163 164 165 166
      let internalRechargeAmount = this.systemReconciliationDetails.internalRechargeAmount || 0
      let externalRechargeAmount = this.systemReconciliationDetails.externalRechargeAmount || 0
      let totalNum = parseFloat(internalRechargeAmount) + parseFloat(externalRechargeAmount)
      return totalNum.toFixed(2)
liang ce committed
167 168
    },
    getAccountCheck () {
liang ce committed
169
      let SubsidyListData = {
liang ce committed
170
        startTime: this.startTime,
liang ce committed
171 172 173
        endTime: this.endTime
      }
      $http.get(`/mingpay/v1/isv/account/accountCheck`, SubsidyListData).then((res) => {
liang ce committed
174
        console.log(res.data.data)
175
        if (res.data.resultCode === 0) {
liang ce committed
176 177 178 179 180 181 182
          this.systemReconciliationDetails = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      })
    }
  }
liang ce committed
183 184 185 186
}
</script>

<style lang="less" scoped>
liang ce committed
187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242
.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;
}
liang ce committed
243
</style>