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>
    <y-page-list-layout :get-page-list="getPersonalStat" :page-list="personalStat" :page-para="listQuery1" :pageSizes="[10, 20, 30, 50, 100, 200, 500, 1000]">
      <template slot="left">
        <el-input v-model="listQuery1.orderId" placeholder="项目编号" clearable style="width: 150px;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-date-picker  clearable v-model="paymentDate" 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: 120px;float: left;">
        </el-input>
        <el-select  clearable  v-model="listQuery1.ifSaveFile" placeholder="归档状态" style="margin-left: 20px;width: 120px;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: 120px;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" border
        :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" type="index">
        </el-table-column>
        <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>
  </div>
</template>
<script>
  import Breadcrumb from '@/components/Breadcrumb'
  import YPageListLayout from '@/components/YPageListLayout'

  export default {
    name: 'personalRealFundStat',
    components: {
      Breadcrumb,
      YPageListLayout
    },
    data() {
      return {
        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: '',
        paymentDate:'',
        listQuery1: {
          page: 1,
          size: 1000,
          descs: 'id',
        },
        personalStat:{
          records:[]
        }
      }
    },
    created() {
        this.getPersonalStat();
    },
    methods: {
   
      handleClick(tab, event) {
      
      },

        
    resetSearch1() {
      this.$router.push({ query: {} });
      this.claimDate = '';
      this.paymentDate= '';
      this.listQuery1 = {
        current: 1,
        size: 1000,
        descs: 'id',
        startTime:null,
        endTime:null,
        payStartTime:null,
        payEndTime:null,
      }
      this.getPersonalStat()
    },
   
    searchList1() {
      // 重置分页
      this.listQuery1.page = 1
      this.listQuery1.size = 1000
      if (this.claimDate){
        this.listQuery1.startTime = this.claimDate[0]+' 00:00:00';
        this.listQuery1.endTime = this.claimDate[1]+ ' 23:59:59';
      }
      if (this.paymentDate){
        this.listQuery1.payStartTime = this.paymentDate[0]+' 00:00:00';
        this.listQuery1.payEndTime = this.paymentDate[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>