item-management-web/src/views/finance/fundWarning.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="major">
        <y-page-list-layout :get-page-list="getOverdueMajor" :page-list="overdueMajor" :page-para="listQuery1" :pageSizes="[10, 20, 30, 50, 100, 200, 500, 1000]">
          <template slot="left">
            <el-input v-model="listQuery1.overdueMin" placeholder="最小超期天数" clearable style="width: 150px;float: left;">
            </el-input>
            <el-input v-model="listQuery1.overdueMax" placeholder="最大超期天数" clearable
              style="margin-left: 20px;width: 150px;float: left;">
            </el-input>
            <el-input v-model="listQuery1.orderId" placeholder="项目编号" clearable
              style="margin-left: 20px;width: 200px;float: left;">
            </el-input>
            <el-input v-model="listQuery1.reportNo" placeholder="产品号" clearable
              style="margin-left: 20px;width: 200px;float: left;">
            </el-input>
            <el-input v-model="listQuery1.principal" 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="exportOverdueMajor()">导出
            </el-button>
          </template>
          <el-table size="medium" slot="table" row-key="id" :data="overdueMajor.records" fit highlight-current-row border
            :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 style="color:red;font-weight: bold;">{{ row.overdueDay }}天</span>
              </template>
            </el-table-column>
            <el-table-column label="分单类型" align="center">
              <template slot-scope="{row}">
                <span>{{ row.allotType }}</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.reportNo }}</span>
              </template>
            </el-table-column>
            <el-table-column label="产品类型" align="center">
              <template slot-scope="{row}">
                <span>{{ row.production }}</span>
              </template>
            </el-table-column>
            <el-table-column label="项目名称" width="200" align="center" show-overflow-tooltip>
              <template slot-scope="{row}">
                <span>{{ row.name }}</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.clientManager }}</span>
              </template>
            </el-table-column>
            <el-table-column label="负责人" align="center">
              <template slot-scope="{row}">
                <span>{{ row.principal }}</span>
              </template>
            </el-table-column>
            <el-table-column label="评估价值(万元)" align="center">
              <template slot-scope="{row}">
                <span>{{ row.evaluateAmount / 10000 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="应收款(元)" align="center">
              <template slot-scope="{row}">
                <span>{{ row.shouldAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="实收款(元)" align="center">
              <template slot-scope="{row}">
                <span style="color:red;font-weight: bold;">0</span>
              </template>
            </el-table-column>
            <el-table-column label="标准收费(元)" align="center">
              <template slot-scope="{row}">
                <span>{{ row.standardAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="出库时间" width="110" align="center">
              <template slot-scope="{row}">
                <span>{{ row.repertoryOutTime }}</span>
              </template>
            </el-table-column>

          </el-table>
        </y-page-list-layout>
      </el-tab-pane>
      <el-tab-pane label="个贷预警" name="personal">
        <y-page-list-layout :get-page-list="getOverduePersonal" :page-list="overduePersonal" :page-para="listQuery3" :pageSizes="[10, 20, 30, 50, 100, 200, 500, 1000]">
          <template slot="left">
            <el-input v-model="listQuery3.overdueMin" placeholder="最小超期天数" clearable style="width: 150px;float: left;">
            </el-input>
            <el-input v-model="listQuery3.overdueMax" placeholder="最大超期天数" clearable
              style="margin-left: 20px;width: 150px;float: left;">
            </el-input>
            <el-input v-model="listQuery3.orderId" 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="searchList3()"
              round>搜索
            </el-button>
            <el-button class="filter-item" style="float: left;" round type="success" @click="resetSearch3()">重置
            </el-button>
            <el-button class="filter-item" style="float: left;" round type="info" @click="exportOverduePersonal()">导出
            </el-button>
          </template>
          <el-table size="medium" slot="table" row-key="id" :data="overduePersonal.records" fit highlight-current-row border
            :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 style="color:red;font-weight: bold;">{{ row.overdueDay }}天</span>
              </template>
            </el-table-column>
            <el-table-column label="项目编号" align="center">
              <template slot-scope="{row}">
                <span>{{ row.orderId }}</span>
              </template>
            </el-table-column>
            <el-table-column label="坐落" width="200" align="center" show-overflow-tooltip>
              <template slot-scope="{row}">
                <span>{{ row.location }}</span>
              </template>
            </el-table-column>
            <el-table-column label="面积" align="center">
              <template slot-scope="{row}">
                <span>{{ row.acreage }}</span>
              </template>
            </el-table-column>
            <el-table-column label="单价" align="center">
              <template slot-scope="{row}">
                <span>{{ row.price }}</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-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.agent }}</span>
              </template>
            </el-table-column>
            <el-table-column label="联系人" align="center">
              <template slot-scope="{row}">
                <span>{{ row.contactName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="联系电话" align="center">
              <template slot-scope="{row}">
                <span>{{ row.contactTel }}</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.clientManager }}</span>
              </template>
            </el-table-column>
            <el-table-column label="勘察人" align="center">
              <template slot-scope="{row}">
                <span>{{ row.outwardStaffName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="产品内业" align="center">
              <template slot-scope="{row}">
                <span>{{ row.inwardStaffName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="定价内业" align="center">
              <template slot-scope="{row}">
                <span>{{ row.pricingStaffName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="出库时间" width="160" align="center">
              <template slot-scope="{row}">
                <span>{{ row.rot }}</span>
              </template>
            </el-table-column>
          </el-table>
        </y-page-list-layout>
      </el-tab-pane>
      <el-tab-pane label="资产预警" name="assets">
        <y-page-list-layout :get-page-list="getOverdueAssets" :page-list="overdueAssets" :page-para="listQuery2" :pageSizes="[10, 20, 30, 50, 100, 200, 500, 1000]">
          <template slot="left">
            <el-input v-model="listQuery2.overdueMin" placeholder="最小超期天数" clearable style="width: 150px;float: left;">
            </el-input>
            <el-input v-model="listQuery2.overdueMax" placeholder="最大超期天数" clearable
              style="margin-left: 20px;width: 150px;float: left;">
            </el-input>
            <el-input v-model="listQuery2.orderId" placeholder="项目编号" clearable
              style="margin-left: 20px;width: 200px;float: left;">
            </el-input>
            <el-input v-model="listQuery2.productionNo" placeholder="产品号" clearable
              style="margin-left: 20px;width: 200px;float: left;">
            </el-input>
            <el-input v-model="listQuery2.principal" 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="searchList2()"
              round>搜索
            </el-button>
            <el-button class="filter-item" style="float: left;" round type="success" @click="resetSearch2()">重置
            </el-button>
            <el-button class="filter-item" style="float: left;" round type="info" @click="exportOverdueAssets()">导出
            </el-button>
          </template>
          <el-table size="medium" slot="table" row-key="id" :data="overdueAssets.records" fit highlight-current-row border
            :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 style="color:red;font-weight: bold;">{{ row.overdueDay }}天</span>
              </template>
            </el-table-column>
            <el-table-column label="分单类型" align="center">
              <template slot-scope="{row}">
                <span>{{ row.allotType }}</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.productionNo }}</span>
              </template>
            </el-table-column>
            <el-table-column label="产品类型" align="center">
              <template slot-scope="{row}">
                <span>{{ row.productionType }}</span>
              </template>
            </el-table-column>
            <el-table-column label="项目名称" width="200" align="center" show-overflow-tooltip>
              <template slot-scope="{row}">
                <span>{{ row.projectName }}</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.clientManager }}</span>
              </template>
            </el-table-column>
            <el-table-column label="负责人" align="center">
              <template slot-scope="{row}">
                <span>{{ row.principal }}</span>
              </template>
            </el-table-column>
            <el-table-column label="评估价值(万元)" align="center">
              <template slot-scope="{row}">
                <span>{{ row.evaluateAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="订单应收款(元)" align="center">
              <template slot-scope="{row}">
                <span>{{ row.shouldAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="标准收费(元)" align="center">
              <template slot-scope="{row}">
                <span>{{ row.standardAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="出库时间" width="160" align="center">
              <template slot-scope="{row}">
                <span>{{ row.repertoryOutTime }}</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: 'fundWaning',
  components: {
    Breadcrumb,
    YPageListLayout
  },

  data() {
    return {
      activeName: 'major',
      listQuery1: {
        page: 1,
        size: 1000,
        descs: 'id',
        overdueMin: 90
      },
      listQuery2: {
        page: 1,
        size: 1000,
        descs: 'id',
        overdueMin: 90
      },
      listQuery3: {
        page: 1,
        size: 1000,
        descs: 'id',
        overdueMin: 90
      },
      overdueMajor: {
        records: []
      },
      overdueAssets: {
        records: []
      },
      overduePersonal:{
        records: []
      }
    }
  },
  created() {
    this.getOverdueMajor();
  },
  methods: {

    handleClick(tab, event) {
      if (tab.name === 'major') {
        this.getOverdueMajor();
      }
      if (tab.name === 'assets') {
        this.getOverdueAssets();
      }
      if (tab.name === 'personal'){
          this.getOverduePersonal();
      }
    },


    resetSearch1() {
      this.$router.push({ query: {} });
      this.listQuery1 = {
        current: 1,
        size: 1000,
        descs: 'id',
        overdueMin: 90
      }
      this.getOverdueMajor()
    },

    searchList1() {
      // 重置分页
      this.listQuery1.page = 1
      this.listQuery1.size = 1000
      this.getOverdueMajor()
    },

    getOverdueMajor() {
      let loadingInstance = this.$loading({ fullscreen: true });

      this.$api.financeRealFund.overdueMajor(this.listQuery1).then(res => {
        if (res.code === 200) {
          loadingInstance.close();
          this.overdueMajor = res.data;
        }
      })
    },
    exportOverdueMajor() {
      this.$utils.exportUtil(
        "/financeRealFund/overdue/major/export", this.listQuery1,
        "导出"
      );
    },
    resetSearch2() {
      this.$router.push({ query: {} });
      this.listQuery2 = {
        current: 1,
        size: 1000,
        descs: 'id',
        overdueMin: 90
      }
      this.getOverdueAssets();
    },
    searchList2() {
      // 重置分页
      this.listQuery2.page = 1
      this.listQuery2.size = 1000
      this.getOverdueAssets();
    },
    resetSearch3() {
      this.$router.push({ query: {} });
      this.listQuery3 = {
        current: 1,
        size: 1000,
        descs: 'id',
        overdueMin: 90
      }
      this.getOverdueAssets();
    },
    searchList3() {
      // 重置分页
      this.listQuery3.page = 1
      this.listQuery3.size = 1000
      this.getOverduePersonal();
    },
    getOverdueAssets() {
      let loadingInstance = this.$loading({ fullscreen: true });
      this.$api.financeRealFund.overdueAssets(this.listQuery2).then(res => {
        if (res.code === 200) {
          this.overdueAssets = res.data;
          loadingInstance.close();
        }
      })
    },
    
    exportOverdueAssets() {
      this.$utils.exportUtil(
        "/financeRealFund/overdue/assets/export", this.listQuery2,
        "导出"
      );
    },
    getOverduePersonal(){
      let loadingInstance = this.$loading({ fullscreen: true });
        this.$api.financeRealFund.personalOverdue(this.listQuery3).then(res=>{
          if (res.code === 200){
              this.overduePersonal = res.data;
              loadingInstance.close();
          }
        })
    },
    exportOverduePersonal() {
      this.$utils.exportUtil(
        "/financeRealFund/overdue/personal/export", this.listQuery3,
        "导出"
      );
    },
  }
}
</script>
<style scoped lang="scss"></style>