xg_reimbursement_vue/src/views/modules/reimbursementSys/reimbursementBusinessList.vue

<template>
  <div class="el-scrollbar__wrap wrap-white padding-20">
    <div class="el-scrollbar__view">
      <el-row :gutter="20" v-loading="loading">
        <el-col :span="12">
          <el-form size="small" :model="inputForm" ref="inputForm" v-loading="loading" label-width="150px">
          </el-form>
        </el-col>
        <el-col :span="24">
          <el-col :span="12"><h3>业务报销详情</h3>
            <div style="margin-bottom: 5px;">
              <span class="color: red">可报销额度：{{columnForm.reimbursementQuota}}</span>
              <span class="color: red">；  已报销额度：{{columnForm.alreadyReimbursementAmount}}</span>
              <span class="color: red">；  剩余报销额度：{{columnForm.surplusReimbursementAmount}}</span>
            </div>
          </el-col>
          <el-col :span="12" style="text-align:right">
            <el-button type="info" size="small" @click="goBack">返回</el-button>
          </el-col>
          <el-table
            :data="columnForm.columnList"
            style="width: 100%">
            <el-table-column
              prop="userName"
              label="报销人"
            >
            </el-table-column>
            <el-table-column
              prop="year"
              label="报销年份"
            >
            </el-table-column>
            <el-table-column
              prop="reimbursementType"
              label="报销类型"
            >
            </el-table-column>
            <el-table-column
              prop="reimbursementDay"
              label="报销天数"
            >
            </el-table-column>
            <el-table-column
              prop="reimbursementAmount"
              label="报销额度"
            >
            </el-table-column>
            <el-table-column
              prop="createDate"
              label="报销时间"
            >
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import ReimbursementBusiness from '@/api/reimbursementSys/reimbursementBusinessService'
  export default {
    data () {
      return {
        title: '',
        method: '',
        loading: false,
        previewVisible: false,
        isIndeterminate: false,
        inputForm: {
          id: '',
          dataSource: {
            id: ''
          },
          name: '',
          sqlCmd: ''
        },
        columnForm: {
          reimbursementQuota: '',  // 报销额度
          alreadyReimbursementAmount: '',  // 已报销额度
          surplusReimbursementAmount: '',  // 剩余报销额度
          columnList: []
        }
      }
    },
    reimbursementBusiness: null,
    created () {
      this.reimbursementBusiness = new ReimbursementBusiness()
    },
    activated () {
      this.$refs['inputForm'].resetFields()
      this.columnForm.columnList = []
      this.inputForm.id = this.$route.query.id
      if (this.inputForm.id) {
        this.reimbursementBusiness.findListByBusinessCodeId(this.inputForm.id).then(({data}) => {
          this.columnForm.columnList = data.list
          this.columnForm.reimbursementQuota = data.reimbursementQuota
          this.columnForm.alreadyReimbursementAmount = data.alreadyReimbursementAmount
          this.columnForm.surplusReimbursementAmount = data.surplusReimbursementAmount
        })
      }
    },
    methods: {
      goBack () {
        this.$store.dispatch('tagsView/delView', {fullPath: this.$route.fullPath})
        this.$router.push('/reimbursementSys/reimbursementList')
      }
    }
  }
</script>