front/front-vue/src/views/service/repayment/repayment.vue

<template>
    <el-tabs type="border-card">
        <el-tab-pane label="全部">
            <el-card class="fiche">
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList">收起</right-toolbar>
                <span style="margin-bottom: 10px;color:#333333;font:14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial,sans-serif">所选条件:</span>
                <div style="float: right;margin-right:1%">
                    <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" style="float: ;">重置</el-button>
                    <column-setting :checkList="checkList":tableList="tableList":selfDom="selfDom":tableId="tableId"></column-setting>
                </div>
                <hr style="margin-top: 16px;">
                <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
                    <el-form-item prop="type">
                        <el-select v-model="queryParams.type" placeholder="请选择查询字段" clearable size="small" >
                            <el-option v-for="dict in typeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="value">
                        <el-input v-model="queryParams.value"  placeholder="请输入关键字模糊查询" clearable size="small" maxlength="30" @keyup.enter.native="handleQuery"/>
                    </el-form-item>
                    <el-form-item label="承诺还款日期" prop="repaymentDate">
                        <el-date-picker clearable unlink-panels v-model="queryParams.repaymentDate" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-form>
            </el-card>  
            <el-form :model="amountQueryParams" ref="amountQueryForm" :inline="true" v-show="showSearch" label-width="100px">       
                <div style="width:20%;height:135px;background:#f2f2f2;float:left;border-radius: 5%; ">
                    <span>总待还款金额:</span><span>{{sumAmount}}</span>
                </div>
                <div style="width:20%;height:135px;background:#f2f2f2;float:left;margin-left:10px;border-radius: 5%;">
                    <el-form-item prop="day">
                        <el-select v-model="amountQueryParams.day"  size="small" @change="change(amountQueryParams.day)">
                            <el-option v-for="dict in dayOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                        </el-select>
                    </el-form-item>
                    <span>待还款金额:</span></span><span>{{amount}}</span>
                </div>
            </el-form>
                <div>
                    <el-button type="primary" icon="el-icon-export" size="mini" @click="handleExport" v-hasPermi="['service:repayment:export']">导出待还款数据</el-button>
                </div>
            
            <el-table v-loading="loading" :data="allRepaymentList" @selection-change="handleSelectionChange" border>
                <el-table-column label="序号" type="index" width="50" align="center">
                    <template slot-scope="scope">
                        <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="融信编号" align="center" prop="zfiNumber" :show-overflow-tooltip="true" v-if="uncheckList.zfiNumber" />
                <el-table-column label="最终还款方" align="center" prop="core" :show-overflow-tooltip="true" v-if="uncheckList.core" />
                <el-table-column label="还款金额（元）" align="center" prop="zfrLoanAmount" :show-overflow-tooltip="true" v-if="uncheckList.zfrLoanAmount" />
                <el-table-column label="还款银行账户" align="center" prop="zfpcrAccount" :show-overflow-tooltip="true" v-if="uncheckList.zfpcrAccount" />
                <el-table-column label="实际还款日期" align="center" prop="zfrPayDate" :show-overflow-tooltip="true" v-if="uncheckList.zfrPayDate" />
                <el-table-column label="承诺付款日期" align="center" prop="zfrRepaymentDate" :show-overflow-tooltip="true" v-if="uncheckList.zfrRepaymentDate" />
                <el-table-column label="还款状态" align="center" prop="zfrApplyStatus" :formatter="applyStatusFormat" :show-overflow-tooltip="true" v-if="uncheckList.zfrApplyStatus" />
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-view" @click="handleInfo(scope.row)" v-hasPermi="['service:repayment:query']">详情</el-button>
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDown(scope.row)" v-hasPermi="['service:repayment:down']">下载</el-button>
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleUp(scope.row)" v-hasPermi="['service:repayment:edit']" v-if="scope.row.zfrApplyStatus != '01'">还款登记</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
        </el-tab-pane>
        <el-tab-pane label="待还款">
            <el-card class="fiche">
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getUnpayList">收起</right-toolbar>
                <span style="margin-bottom: 10px;color:#333333;font:14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial,sans-serif">所选条件:</span>
                <div style="float: right;margin-right:1%">
                    <el-button type="cyan" icon="el-icon-search" size="mini" @click="secondQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetSecondQuery" style="float: ;">重置</el-button>
                    <column-setting :checkList=checkList :tableList=tableList :selfDom=selfDom :tableId=tableId> </column-setting>
                </div>
                <hr style="margin-top: 16px;">
                <el-form :model="unRepayment" ref="queryForm1" :inline="true" v-show="showSearch" label-width="100px">
                    <el-form-item prop="type">
                        <el-select v-model="unRepayment.type" placeholder="请选择查询字段" clearable size="small" >
                            <el-option v-for="dict in typeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="value">
                        <el-input v-model="unRepayment.value"  placeholder="请输入关键字模糊查询" clearable size="small" maxlength="30" @keyup.enter.native="secondQuery" />
                    </el-form-item>
                    <el-form-item label="承诺还款日期" prop="repaymentDate">
                        <el-date-picker clearable unlink-panels v-model="unRepayment.repaymentDate" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-form>
            </el-card>
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" icon="el-icon-export" size="mini" @click="handleExport" v-hasPermi="['service:repayment:export']">导出待还款数据</el-button>
                </el-col>
            </el-row>
            <el-table v-loading="loading" :data="unRepaymentList" @selection-change="handleSelectionChange" border>
                <el-table-column label="序号" type="index" width="50" align="center">
                    <template slot-scope="scope">
                        <span>{{(unRepayment.pageNum - 1) * unRepayment.pageSize + scope.$index + 1}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="融信编号" align="center" prop="zfiNumber" :show-overflow-tooltip="true" v-if="uncheckList.zfiNumber" />
                <el-table-column label="最终还款方" align="center" prop="core" :show-overflow-tooltip="true" v-if="uncheckList.core" />
                <el-table-column label="还款金额（元）" align="center" prop="zfrLoanAmount" :show-overflow-tooltip="true" v-if="uncheckList.zfrLoanAmount" />
                <el-table-column label="还款银行账户" align="center" prop="zfpcrAccount" :show-overflow-tooltip="true" v-if="uncheckList.zfpcrAccount" />
                <el-table-column label="实际还款日期" align="center" prop="zfrPayDate" :show-overflow-tooltip="true" v-if="uncheckList.zfrPayDate" />
                <el-table-column label="承诺付款日期" align="center" prop="zfrRepaymentDate" :show-overflow-tooltip="true" v-if="uncheckList.zfrRepaymentDate" />
                <el-table-column label="还款状态" align="center" prop="zfrApplyStatus" :formatter="applyStatusFormat" :show-overflow-tooltip="true" v-if="uncheckList.zfrApplyStatus" />
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-view" @click="handleInfo(scope.row)" v-hasPermi="['service:repayment:query']">详情</el-button>
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDown(scope.row)" v-hasPermi="['service:repayment:down']">下载</el-button>
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleUp(scope.row)" v-hasPermi="['service:repayment:up']" v-if="scope.row.zfrApplyStatus != '01'">还款登记</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total>0" :total="total1" :page.sync="unRepayment.pageNum" :limit.sync="unRepayment.pageSize" @pagination="getList" />
        </el-tab-pane>
        <el-tab-pane label="已还款">
            <el-card class="fiche">
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getRepayList">收起</right-toolbar>
                <span style="margin-bottom: 10px;color:#333333;font:14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial,sans-serif">所选条件:</span>
                <div style="float: right;margin-right:1%">
                    <el-button type="cyan" icon="el-icon-search" size="mini" @click="thirdQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetThirdQuery" style="float: ;">重置</el-button>
                    <column-setting :checkList=checkList :tableList=tableList :selfDom=selfDom :tableId=tableId></column-setting>
                </div>
                <hr style="margin-top: 16px;">
                <el-form :model="repayment" ref="queryForm2" :inline="true" v-show="showSearch" label-width="100px">
                    <el-form-item prop="type">
                        <el-select v-model="repayment.type" placeholder="请选择查询字段" clearable size="small" prop="type">
                            <el-option v-for="dict in typeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="value">
                        <el-input v-model="repayment.value" prop="value" placeholder="请输入关键字模糊查询" clearable size="small" maxlength="30" @keyup.enter.native="thirdQuery" />
                    </el-form-item>
                    <el-form-item label="承诺还款日期" prop="repaymentDate">
                        <el-date-picker clearable unlink-panels v-model="repayment.repaymentDate" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-form>
            </el-card>
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" icon="el-icon-export" size="mini" @click="handleExport" v-hasPermi="['service:repayment:export']">导出待还款数据</el-button>
                </el-col>
            </el-row>
            <el-table v-loading="loading" :data="repaymentList" @selection-change="handleSelectionChange" border>
                <el-table-column label="序号" type="index" width="50" align="center">
                    <template slot-scope="scope">
                        <span>{{(repayment.pageNum - 1) * repayment.pageSize + scope.$index + 1}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="融信编号" align="center" prop="zfiNumber" :show-overflow-tooltip="true" v-if="uncheckList.zfiNumber" />
                <el-table-column label="最终还款方" align="center" prop="core" :show-overflow-tooltip="true" v-if="uncheckList.core" />
                <el-table-column label="还款金额（元）" align="center" prop="zfrLoanAmount" :show-overflow-tooltip="true" v-if="uncheckList.zfrLoanAmount" />
                <el-table-column label="还款银行账户" align="center" prop="zfpcrAccount" :show-overflow-tooltip="true" v-if="uncheckList.zfpcrAccount" />
                <el-table-column label="实际还款日期" align="center" prop="zfrPayDate" :show-overflow-tooltip="true" v-if="uncheckList.zfrPayDate" />
                <el-table-column label="承诺付款日期" align="center" prop="zfrRepaymentDate" :show-overflow-tooltip="true" v-if="uncheckList.zfrRepaymentDate" />
                <el-table-column label="还款状态" align="center" prop="zfrApplyStatus" :formatter="applyStatusFormat" :show-overflow-tooltip="true" v-if="uncheckList.zfrApplyStatus" />
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-view" @click="handleInfo(scope.row)" v-hasPermi="['service:repayment:query']">详情</el-button>
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDown(scope.row)" v-hasPermi="['service:repayment:down']">下载</el-button>
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleUp(scope.row)" v-hasPermi="['service:repayment:up']" v-if="scope.row.zfrApplyStatus != '01'">还款登记</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-show="total>0" :total="total2" :page.sync="repayment.pageNum" :limit.sync="repayment.pageSize" @pagination="getList" />
        </el-tab-pane>
        <el-tab-pane label="逾期">
            <el-card class="fiche">
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getOverdueList">收起</right-toolbar>
                <span style="margin-bottom: 10px;color:#333333;font:14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial,sans-serif">所选条件:</span>
                <div style="float: right;margin-right:1%">
                    <el-button type="cyan" icon="el-icon-search" size="mini" @click="fouthQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetFouthQuery" style="float: ;">重置</el-button>
                    <column-setting :checkList=checkList :tableList=tableList :selfDom=selfDom :tableId=tableId></column-setting>
                </div>
                <hr style="margin-top: 16px;">
                <el-form :model="overdue" ref="queryForm3" :inline="true" v-show="showSearch" label-width="100px">
                    <el-form-item prop="type">
                        <el-select v-model=" overdue.type" placeholder="请选择查询字段" clearable size="small" prop="type">
                            <el-option v-for="dict in typeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="value">
                        <el-input v-model=" overdue.value" prop="value" placeholder="请输入关键字模糊查询" clearable size="small" maxlength="30" @keyup.enter.native="fouthQuery" />
                    </el-form-item>
                    <el-form-item label="承诺还款日期" prop="repaymentDate">
                        <el-date-picker clearable unlink-panels v-model=" overdue.repaymentDate" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-form>
            </el-card>
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" icon="el-icon-export" size="mini" @click="handleExport" v-hasPermi="['service:repayment:export']">导出待还款数据</el-button>
                </el-col>
            </el-row>
            <el-table v-loading="loading" :data="overdueList" @selection-change="handleSelectionChange" border>
                <el-table-column label="序号" type="index" width="50" align="center">
                    <template slot-scope="scope">
                        <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="融信编号" align="center" prop="zfiNumber" :show-overflow-tooltip="true" v-if="uncheckList.zfiNumber" />
                <el-table-column label="最终还款方" align="center" prop="core" :show-overflow-tooltip="true" v-if="uncheckList.core" />
                <el-table-column label="还款金额（元）" align="center" prop="zfrLoanAmount" :show-overflow-tooltip="true" v-if="uncheckList.zfrLoanAmount" />
                <el-table-column label="还款银行账户" align="center" prop="zfpcrAccount" :show-overflow-tooltip="true" v-if="uncheckList.zfpcrAccount" />
                <el-table-column label="实际还款日期" align="center" prop="zfrPayDate" :show-overflow-tooltip="true" v-if="uncheckList.zfrPayDate" />
                <el-table-column label="承诺付款日期" align="center" prop="zfrRepaymentDate" :show-overflow-tooltip="true" v-if="uncheckList.zfrRepaymentDate" />
                <el-table-column label="还款状态" align="center" prop="zfrApplyStatus" :formatter="applyStatusFormat" :show-overflow-tooltip="true" v-if="uncheckList.zfrApplyStatus" />
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-view" @click="handleInfo(scope.row)" v-hasPermi="['service:repayment:query']">详情</el-button>
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDown(scope.row)" v-hasPermi="['service:repayment:down']">下载</el-button>
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleUp(scope.row)" v-hasPermi="['service:repayment:up']" v-if="scope.row.zfrApplyStatus != '01'">还款登记</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total>0" :total="total3" :page.sync="overdue.pageNum" :limit.sync="overdue.pageSize" @pagination="getList" />
        </el-tab-pane>

    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="上传附件">
          <el-upload
            ref="upload"
            class="upload-demo"
            action=""
            :class="{showUoload:showBtnImg,uoloadSty:noneBtnImg}"
            :on-change="dealImgChange"
            accept=".jpg, .jpeg, .png, .JPG, .JPEG, .PNG"
            :http-request="httpRequest"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :before-upload="beforeAvatarUpload"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            list-type="picture-card"
            :file-list="fileList"
            :auto-upload="true">
            <el-button slot="trigger" size="small" type="primary">点击选择</el-button>
            <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
          </el-upload>
        </el-form-item>
        <el-form-item label="融资id" prop="zfrId" label-width="90px" v-if="false">
          <el-input v-model="form.zfrId"  style="width:284px"/>
        </el-form-item>
        <!-- <el-form-item label="融信id" prop="zfrFinanceId" label-width="90px" v-if="false">
          <el-input v-model="form.zfrFinanceId"  style="width:284px"/>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    </el-tabs>
</template>
<script>
import { listRepayment,RepaymentRegistration,repaymentAmount } from "@/api/service/repayment/repayment";
import ColumnSetting from "../../../components/Table/columnSetting.vue";
import { columnQuery, columnfilter } from "@/api/common/columnSetting";
import Cookies from 'js-cookie'
import { uploadFileNew } from "@/api/common/file";
import { getToken } from "@/utils/auth";
export default {
    name: "repayment",
    components: {
        ColumnSetting,
    },
    data() {
        return {
            //总代还款金额
            sumAmount:0.00,
            //带还款金额
            amount:0.00,
            dayOptions:[],
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            total1: 0,
            total2: 0,
            total3: 0,
            //附件按钮
            showBtnImg:true,
            noneBtnImg:false,
            limitCountImg:1,
             //上传使用
            dialogImageUrl: '',
            dialogVisible: false,
            //附件地址
            fileList:[],
            // 弹出层标题
            title: "",
            // 全部还款列表
            allRepaymentList: [],
            //待还款列表
            unRepaymentList: [],
            //已还款列表
            repaymentList: [],
            //逾期列表
            overdueList: [],
            typeOptions: [],
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                type: null,
                value: null,
                repaymentDate: [],
                status: null,
            },
             unRepayment: {
                pageNum: 1,
                pageSize: 10,
                type: null,
                value: null,
                repaymentDate: [],
                status: null,
            },
              repayment: {
                pageNum: 1,
                pageSize: 10,
                type: null,
                value: null,
                repaymentDate: [],
                status: null,
            },
              overdue: {
                pageNum: 1,
                pageSize: 10,
                type: null,
                value: null,
                repaymentDate: [],
                status: null,
            },
            amountQueryParams:{
                day:"00",
            },
            // 表单参数
            form: {
                
            },
            amountQueryForm:{
                day:"00"
            },
            // 表单校验
            rules: {
                //  pptName:[
                //   { required: true, message: "项目类型不能为空", trigger: "blur" },
                // ]
            },
            tableList: [
                {
                    label: "zfiNumber",
                    value: "融信编号",
                },
                {
                    label: "core",
                    value: "最终还款方",
                },
                {
                    label: "zfrLoanAmount",
                    value: "还款金额（元）",
                },
                {
                    label: "zfpcrAccount",
                    value: "还款银行账户",
                },
                {
                    label: "zfrPayDate",
                    value: "实际还款日期",
                },
                {
                    label: "zfrRepaymentDate",
                    value: "承诺付款日期",
                },
                {
                    label: "zfrApplyStatus",
                    value: "还款状态",
                },
            ],
            checkList: [], //筛选列选中的数据列表--显示隐藏列用
            uncheckList: {}, //控制筛选列显示隐藏--显示隐藏列用
            selfDom: this,
            tableId: "/service/repayment/list",
        };
    },
    created() {
        this.getList();
        this.getUnpayList();
        this.getRepayList();
        this.getOverdueList();
        this.getRepaymentAmount();
        this.getDicts("zc_zfr_apply_status").then((response) => {
            this.applyStatusOptions = response.data;
        });
        this.getDicts("zc_zfr_type").then((response) => {
            this.typeOptions = response.data;
        });
        this.getDicts("zc_repanyment_day").then((response) => {
            this.dayOptions = response.data;
        });
        this.amountQueryParams.day = null;
        repaymentAmount(this.amountQueryParams).then((response)=>{
                this.sumAmount = response.data;
            })
    },
    activated() {
        this.getList();
    },
    mounted() {
        this.columnQuery();
    },
    methods: {
        /** 查询所有还款列表 */
        getList() {
            this.loading = true;
            listRepayment(this.queryParams).then((response) => {
                this.allRepaymentList = response.data.records;
                this.total = response.data.total;
                this.loading = false;
            });
        },
        /** 查询未还款列表 */
        getUnpayList() {
            this.loading = true;
            this.unRepayment.status = "00";
            listRepayment(this.unRepayment).then((response) => {
                this.unRepaymentList = response.data.records;
                this.total1 = response.data.total;
                this.loading = false;
            });
        },
    /** 查询已还款列表 */
        getRepayList() {
            this.loading = true;
            this.repayment.status = "01";
            listRepayment(this.repayment).then((response) => {
                this.repaymentList = response.data.records;
                this.total2 = response.data.total;
                this.loading = false;
            });
        },
            /** 查询逾期列表 */
        getOverdueList() {
            this.loading = true;
            this.overdue.status = "02";
            listRepayment(this.overdue).then((response) => {
                this.overdueList = response.data.records;
                this.total3 = response.data.total;
                this.loading = false;
            });
        },
        /** 查询带还款金额 */
        getRepaymentAmount(){
            repaymentAmount(this.amountQueryParams).then((response)=>{
                this.amount = response.data;
            })
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {};
            this.fileList = [];
            this.resetForm("form");
        },
        /** 搜索按钮操作 */ 
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        secondQuery(){
            this.unRepayment.pageNum = 1;
            this.getUnpayList();
        },
        thirdQuery(){
            this.repayment.pageNum = 1;
            this.getRepayList();
        },
        fouthQuery(){
            this.overdue.pageNum = 1;
            this.getOverdueList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        resetSecondQuery() {
            this.resetForm("queryForm1");
            this.secondQuery();
        },
        resetThirdQuery() {
            this.resetForm("queryForm2");
            this.thirdQuery();
        },
        resetFouthQuery() {
            this.resetForm("queryForm3");
            this.fouthQuery();
        },
        change(val){
            this.amountQueryParams.day = val;
            repaymentAmount(this.amountQueryParams).then((response)=>{
                this.amount = response.data;
            })
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            /*  this.ids = selection.map(item => item.ptcId)
      this.single = selection.length!==1
      this.multiple = !selection.length */
        },
        /** 详情按钮操作 */
        handleInfo(row) {
            const zfrId = row.zfrId;
            this.resetQuery();
            Cookies.set("/repayment/detailRepayment/"+zfrId+"/", this.$route.fullPath);
            this.$router.push({path:"/repayment/detailRepayment/"+zfrId+"/"});
        },
        /** 下载按钮操作 */
        handleDown(row) {
            var zfrId = row.zfrId;
            const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          this.download('sc-service/repayment/export/'+zfrId, {

        }, `还款明细.docx`);
        setTimeout(() => {
          loading.close();
          this.create = false;
          this.end = true;
          this.active = 1;
        }, 3000);
        },
        //上传附件
        handleUp(row){
            this.reset();
            this.form.zfrId = row.zfrId || this.ids;
            this.showBtnImg = true;
            this.noneBtnImg = this.fileList.length >= this.limitCountImg;
            debugger
            this.open = true;
            this.title = "还款登记";
        },
        //上传前校验
        beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
            this.$message.error('上传图片只能是 JPG/PNG 格式');
        }
        if (!isLt2M) {
            this.$message.error('上传图片大小不能超过 2MB');
        }
        return isJPG && isLt2M;
        },
        //还款状态字典反显
        applyStatusFormat(row, column) {
            return this.selectDictLabel(
                this.applyStatusOptions,
                row.zfrApplyStatus
            );
        },
        //获取当前客户是否之前设置过列展示隐藏
        columnQuery() {
            //获取页面路径
            var psfPagePath = window.location.pathname; //用请求后台的url作为唯一标识

            var psfTableName = this.tableId;
            var columnForm = {};
            columnForm.psfPagePath = psfPagePath;
            columnForm.psfTableName = psfTableName;
            columnQuery(columnForm).then((response) => {
                if (response.data && response.data.psfShowData) {
                    this.checkList = response.data.psfShowData;
                }
                this.filter();
            });
        }, //控制隐藏显示的函数
        filter(checkList) {
            if (!!checkList) {
                this.checkList = checkList;
            }
            columnfilter(this.selfDom);
        },
    /** 上传图片 */
    submitUpload(){
      this.$refs.upload.submit();
    },
    //文件移除提示
    handleRemove(file, fileList) {
      console.log(file)
      for(let i = 0;i< this.fileList.length;i++){
        if(file.uid == this.fileList[i].uid){
          this.fileList.splice(i, 1);
          break;
        }
      }
      this.noneBtnImg = fileList.length >= this.limitCountImg;
      //return this.$confirm(`确定移除 ${ file.name }？`);
    },

    dealImgChange(file, fileList){
      this.noneBtnImg = fileList.length >= this.limitCountImg;
    },

    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件`);
    },
    handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
    //手动上传文件触发
    httpRequest(param) {
      let fileObj = param.file // 相当于input里取得的files
      let fd = new FormData()// FormData 对象
      fd.append('file', fileObj)// 文件对象
      fd.append('fileType','00')//文件类型
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      uploadFileNew(fd).then(response => {
        if(response){
          // this.form.eeiImgUrl = response.url
          this.fileList.push({uid : response.fileId,url:response.url+'/'+getToken()})
          console.log(response.url)
          setTimeout(() => {
            loading.close();
          }, 2000);
        }
      }).catch(response => {
            loading.close();
      })
    },
     /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.zfrId != null) {
            this.form.zfrApplyFile = this.fileList;
            RepaymentRegistration(this.form).then(response => {
              this.msgSuccess("登记成功");
              this.open = false;
              this.getList();
            });
          } 
        }
      });
    },
    /** 导出按钮操作 */
    handleExport() {
        const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
        });
        this.download('sc-service/repayment/export', {
        ...this.queryParams
            }, `待还款列表.xls`);
            setTimeout(() => {
                loading.close();
                this.create = false;
                this.end = true;
                this.active = 1;
            }, 3000);
        },
    },
};
</script>
<style>
.showUoload .el-upload--picture-card {
  width: 110px;
  height: 110px;
  line-height: 110px;
}
.uoloadSty .el-upload--picture-card {
  display: none;
}
</style>