CZC/operationSupport/src/views/payService/receivableExamine/index.vue

<template>
  <div class=" main">
    <div class="search">
      <el-input
        clearable
        placeholder="姓名/地址/申请人"
        class="search-input"
        v-trim
        v-model.trim="mixins_query.key"
      ></el-input>
      <el-select
        placeholder="所属社区"
        clearable
        class="width120"
        v-model="mixins_query.communityId"
      >
        <el-option
          v-for="(item,indx) in communityList"
          :key="indx"
          :label="item.label"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-select
        placeholder="审核状态"
        clearable
        class="width120"
        v-model="mixins_query.status"
      >
        <el-option
          value="1"
          label="审核中"
        ></el-option>
        <el-option
          value="2"
          label="审核通过"
        ></el-option>
        <el-option
          value="3"
          label="审核未通过"
        ></el-option>
      </el-select>
      <el-button
        class="search-btn"
        type="primary"
        @click="mixins_search()"
        icon="el-icon-search"
      >查询</el-button>

    </div>
    <zz-table
      :settings="{ showCheckbox: false, showIndex: true, stripe: true }"
      :cols=" cols"
      :data="mixins_list"
      :pageset="mixins_pageset"
      @page-change="pageChange"
      :selectable="selectable"
      @selection-change="selectionChange"
    >

      <template
        slot-scope="scope"
        slot="home"
      >
        {{scope.row.communityName+'-'+scope.row.assets}}
      </template>

      <template
        slot-scope="scope"
        slot="opt"
      >
        <div class="opt">
          <el-tooltip
            class="item"
            effect="light"
            placement="bottom"
            :content="scope.row.status == 1 ? '审核' : '无法审核'"
          >
            <i
              v-if="scope.row.status == 1"
              class="zoniot_font zoniot-icon-shenhe"
              @click="viewDetails(scope.row)"
            ></i>
            <i
              class="zoniot_font zoniot-icon-shenhe ashText"
              v-else
            ></i>
          </el-tooltip>
        </div>
      </template>

    </zz-table>
  </div>
</template>




<script>
import list from '@/utils/list.js';
export default {
  mixins: [list],
  data () {
    return {
      communityList: [],
      cols: [
        {
          label: '订单号',
          prop: 'billNumber'
        },
        {
          label: '姓名',
          prop: 'residentName'
        }, {
          label: '客户类型',
          prop: 'customerType',
          format (val) {
            if (val == 1) {
              return '房东'
            } else if (val == 2 || val == 3) {
              return '租户'
            }
          }
        }, {
          label: '地址',
          prop: 'home',
          slot: 'home'
        }, {
          label: '费用类型',
          prop: 'chargeType',
          format (val) {
            if (val == 1) {
              return '物业费'
            } else if (val == 2) {
              return '水费'
            } else if (val == 3) {
              return '电费'
            } else if (val == 4) {
              return '车位费'
            } else if (val == 5) {
              return '二次供水费'
            }
          }
        }, {
          label: '计费周期',
          prop: 'paymentDaysDict'
        }
        , {
          label: '账单金额(元)',
          prop: 'receivableAmount'
        }
        , {
          label: '原应收金额(元)',
          prop: 'origAmount'
        }
        , {
          label: '申请应收金额(元)',
          prop: 'applyAmount'
        }
        , {
          label: '申请原因',
          prop: 'applicantReason'
        }
        , {
          label: '申请人',
          prop: 'applicantName'
        }
        , {
          label: '审核状态',
          prop: 'status',
          format (val) {
            if (val == 3) {
              return '<span class="redText">审核未通过</span>';
            } else if (val == 2) {
              return '审核通过';
            } else if (val == 1) {
              return '审核中'
            }
          }
        }
        , {
          label: '审核人员',
          prop: 'reviewedBy'
        }
        , {
          label: '操作',
          slot: 'opt'
        }
      ],
      mixins_post: 'post',
    }
  },
  methods: {
    communityNameList () {
      this.communityList = [];
      this.$http.get('/czc-community/assets/community/list', {}).then((res) => {
        res.data.map((res) => {
          this.communityList.push({
            label: res.communityName,
            id: res.id
          })
        });
      });
    },
    viewDetails (row) {

      new Promise((resolve) => {
        this.$store.dispatch('addPopup', {
          url: '/payService/receivableExamine/detali.vue',
          width: '550px',
          height: '280px',
          props: {
            id: row.id,
            callback: resolve
          },
          title: '应收金额审核'
        });
      }).then(() => {
        this.mixins_search();
      });
    },
  },
  created () {

    this.mixins_dataUrl = '/czc-charge/bill/amount/audit/page'; // 分页查询接口
    this.mixins_query = {};
    this.mixins_search();
    // 获取社区选项
    this.communityNameList();
  }
}



</script>