item-management-web/src/views/finance/personalRealFundStat.vue

<template>
  <div class="app-container organization-index">
    <div class="title-container">
      <breadcrumb id="breadcrumb-container" class="breadcrumb-container"/>
    </div>
      <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card" style="margin-top: 10px;">
        <el-tab-pane label="个贷实收款" name="personal">
          <y-page-list-layout :get-page-list="getPersonalStat" :page-list="personalStat" :page-para="listQuery1">
            <template slot="left">
              <el-input v-model="listQuery1.orderId" placeholder="项目编号" clearable style="width: 200px;float: left;">
              </el-input>
              <el-date-picker  clearable v-model="claimDate" type="daterange" align="center" unlink-panels
                            range-separator="至" start-placeholder="认领日期（开始）" end-placeholder="认领日期（结束）" :picker-options="pickerOptions"
                            value-format="yyyy-MM-dd" style="margin-left: 20px;float: left;">
              </el-date-picker>
              <el-input v-model="listQuery1.claimAmount" placeholder="认领金额" clearable style="margin-left: 20px;width: 200px;float: left;">
              </el-input>
              <el-select  clearable  v-model="listQuery1.ifSaveFile" placeholder="归档状态" style="margin-left: 20px;width: 200px;float: left;">
                  <el-option :value="false" label="未归档">未归档</el-option>
                  <el-option :value="true" label="已归档">已归档</el-option>
              </el-select>
              <el-input v-model="listQuery1.claimUser" placeholder="认领人" clearable style="margin-left: 20px;width: 200px;float: left;">
              </el-input>
              <el-button class="filter-item" style="margin-left:20px;float: left;" type="primary" @click="searchList1" round>搜索
              </el-button>
              <el-button class="filter-item" style="float: left;" round type="success" @click="resetSearch1()">重置
              </el-button>
              <el-button class="filter-item" style="float: left;" round type="info" @click="exportPersonalStat()">导出
              </el-button>
            </template>
            <el-table
              size="medium"
              slot="table"
              row-key="id"
              :data="personalStat.records"
              fit
              highlight-current-row
              :header-row-style="{color: '#333333'}"
              style="border-left: 1px solid #EBECED;border-right: 1px solid #EBECED;color: #333333;">
              <el-table-column label="归档状况" align="center">
                <template slot-scope="{row}">
                  <span>{{ row.ifSaveFile?'已归档':'未归档' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="项目编号" width="150"  align="center">
                <template slot-scope="{row}">
                  <span>{{ row.orderId }}</span>
                </template>
              </el-table-column>
              <el-table-column label="项目名称"  width="200"   align="center">
                <template slot-scope="{row}">
                  <span>{{ row.location }}</span>
                </template>
              </el-table-column>
              <el-table-column label="所属部门"  align="center">
                <template slot-scope="{row}">
                  <span>{{ row.marketDepartment }}</span>
                </template>
              </el-table-column>
              <el-table-column label="客户经理" align="center">
                <template slot-scope="{row}">
                  <span>{{ row.clientManager }}</span>
                </template>
              </el-table-column>
              <el-table-column label="入账日期" width="110" align="center">
                <template slot-scope="{row}">
                  <span>{{ row.payDatetime }}</span>
                </template>
              </el-table-column>
              <el-table-column label="认领日期" width="110" align="center">
                <template slot-scope="{row}">
                  <span>{{ row.claimDatetime }}</span>
                </template>
              </el-table-column>
              <el-table-column label="实收金额(元)"   align="center">
                <template slot-scope="{row}">
                  <span  style="color:red">{{ row.claimAmount }}</span>
                </template>
              </el-table-column>
              <el-table-column label="认领人"  align="center">
                <template slot-scope="{row}">
                  <span>{{ row.claimUser }}</span>
                </template>
              </el-table-column>
              <el-table-column label="客户名称"   align="center">
                <template slot-scope="{row}">
                  <span>{{ row.clientName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="业务来源"   align="center">
                <template slot-scope="{row}">
                  <span>{{ row.clientSubName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="委托人"  align="center">
                <template slot-scope="{row}">
                  <span>{{ row.bailorA }}</span>
                </template>
              </el-table-column>
              <el-table-column label="评估价值(万元)"  align="center">
                <template slot-scope="{row}">
                  <span>{{ row.amount }}</span>
                </template>
              </el-table-column>
            </el-table>
          </y-page-list-layout>
        </el-tab-pane>
      </el-tabs>
  </div>
</template>
<script>
  import Breadcrumb from '@/components/Breadcrumb'
  import YPageListLayout from '@/components/YPageListLayout'

  export default {
    name: 'personalRealFundStat',
    components: {
      Breadcrumb,
      YPageListLayout
    },
    data() {
      return {
        activeName: 'personal',
        pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
        claimDate: '',
        listQuery1: {
          page: 1,
          size: 10,
          descs: 'id',
        },
        personalStat:{
          records:[]
        }
      }
    },
    created() {
        this.getPersonalStat();
    },
    methods: {
   
      handleClick(tab, event) {
      
      },

        
    resetSearch1() {
      this.$router.push({ query: {} });
      this.claimDate = '';
      this.listQuery1 = {
        current: 1,
        size: 10,
        descs: 'id',
        startTime:null,
        endTime:null,
      }
      this.getPersonalStat()
    },
   
    searchList1() {
      // 重置分页
      this.listQuery1.page = 1
      this.listQuery1.size = 10
      if (this.claimDate){
        this.listQuery1.startTime = this.claimDate[0]+' 00:00:00';
        this.listQuery1.endTime = this.claimDate[1]+ ' 23:59:59';
      }
      this.getPersonalStat()
    },

      getPersonalStat(){
        this.$api.financeClaim.getPersonalStat(this.listQuery1).then(res=>{
          if (res.code === 200){
              this.personalStat = res.data;
          }
        })
      },
      exportPersonalStat(){
        this.$utils.exportUtil(
        "/financeClaim/personal/stat/export", this.listQuery1,
        "导出"
      );
      }
    }
  }
</script>
<style scoped lang="scss">

</style>