CZC/operationSupport/src/views/payService/landlordBill/stePage/receivable.vue

<template>
  <div>
    <el-row>
      <el-col
        :span="12"
        class="el-col-hight"
      >
        <div class="formContent-item_title">
          <span>{{this.params.communityName}}-</span>
          <span>{{this.params.assets}}</span>
          <span>({{this.params.residentName}})</span>
        </div>
      </el-col>

      <el-col
        :span="12"
        class="el-col-hight"
      >
        <div class="search-icon btn_right">
          <el-button
            type="primary"
            @click="addreceivable"
            :disabled="typeNum == 1 ? true : false"
          >新增</el-button>
        </div>
      </el-col>
      <el-col
        :span="24"
        class="span_margin"
        style="margin: 10px 0;"
      >
        <span>{{this.params.paymentDaysDict}}物业费账单</span>
      </el-col>

      <el-col :span="24">
        <template>

          <el-table
            :data="tableData"
            border
            :height="tableData.length > 7 ? 280 : null"
            :header-cell-style="{background:'#F8FCFF',color:'#424656'}"
          >
            <el-table-column
              type="index"
              label="NO"
              :index="indexMethod"
            >
            </el-table-column>
            <el-table-column
              label="原应收金额（元）"
              width="120"
              prop="origAmount"
            >
            </el-table-column>
            <el-table-column
              label="申请应收金额（元）"
              width="130"
              prop="applyAmount"
            >
            </el-table-column>
            <el-table-column
              label="申请原因"
              prop="applicantReason"
            >
            </el-table-column>
            <el-table-column
              label="申请人"
              prop="applicantName"
            >
            </el-table-column>
            <el-table-column
              label="审核状态"
              prop="status"
            >
            </el-table-column>
            <el-table-column
              label="审核信息"
              prop="remarks"
            >
            </el-table-column>
            <el-table-column
              label="审核人"
              prop="reviewedBy"
            >
            </el-table-column>
          </el-table>
        </template>

      </el-col>

    </el-row>
  </div>

</template>

<script>
export default {
  props: ['params'],
  data () {
    return {
      YearTime: '',
      MonTime: '',
      typeNum: '2',
      tableData: []
    }
  },
  methods: {
    indexMethod (index) {
      return index + 1;
    },
    timeCode () {
      var time = new Date();
      this.YearTime = time.getFullYear();
      this.MonTime = time.getMonth() + 1;
    },
    addreceivable () {
      new Promise((resolve) => {
        this.$store.dispatch('addPopup', {
          url: '/payService/landlordBill/stePage/Addreceivable.vue',
          width: '560px',
          height: '310px',
          props: {
            id: this.params.id,
            amount: this.params.discountAmount,
            callback: resolve
          },
          title: '修改应收金额'
        });
      }).then(() => {
        this.audit();
      });
    },
    audit () {
      this.$http.get('/czc-charge/bill/amount/audit/list', { billId: this.params.id }).then(({ status, data, msg }) => {
        if (status == 0) {
          this.tableData = [];
          var dataNum = [];
          for (let i = 0; i < data.length; i++) {
            this.tableData.push({
              applyAmount: data[i].applyAmount,//申请金额
              origAmount: data[i].origAmount,//原金额
              applicantReason: data[i].applicantReason,
              applicantName: data[i].applicantName,
              remarks: data[i].remarks || '-',
              reviewedBy: data[i].reviewedBy || '-',
              status: data[i].status == 1 ? '审核中' : data[i].status == 2 ? '审核通过' : '审核未通过'
            })
            dataNum.push(data[i].status);
          }
          for (let k = 0; k < dataNum.length; k++) {
            if (dataNum[k] == 1) {
              this.typeNum = '1'
            }
          }
        }
      })
    }
  },
  created () {
    this.timeCode();
    this.audit();
  }
}


</script>



<style lang="scss" scoped>
.body_padding {
    padding: 20px;
}
.btn_right {
    display: flex;
    flex-direction: row-reverse;
}
.i_size {
    font-size: 30px;
}
.span_margin {
    margin: 20px;
}

// 滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #c6c4c4a9;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #f4f7f9a8;
}
.el-col-hight {
    height: 20px;
}
/deep/ .el-table {
    tr th,
    tr td {
        border-right: none;
    }
}
.el-table-column-background {
    background: red;
}
</style>