还款页面修改

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

@@ -1,279 +1,439 @@
 <template>
-    <div class="app-container">
-        <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>
-                    <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  >
-                    <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-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="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:contract:query']"
-          >详情</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDel(scope.row)"
-            v-hasPermi="['service:contract:delete']"
-          >下载</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"
-    />
-  </div>
-</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>
+                        <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>
+                        <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>
+            <div style="width:320px;height:150px;background:#f2f2f2;float:left"></div>
+            <div style="width:320px;height:150px;background:#f2f2f2;float:left"></div>
+            <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="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:contract:query']">详情</el-button>
+                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDel(scope.row)" v-hasPermi="['service:contract:delete']">下载</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="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="unRepayment" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
+                    <el-form-item>
+                        <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>
+                        <el-input v-model="unRepayment.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="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:contract:query']">详情</el-button>
+                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDel(scope.row)" v-hasPermi="['service:contract:delete']">下载</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="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="repayment" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
+                    <el-form-item>
+                        <el-select v-model="repayment.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>
+                        <el-input v-model="repayment.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="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:contract:query']">详情</el-button>
+                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDel(scope.row)" v-hasPermi="['service:contract:delete']">下载</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
 
+            <pagination v-show="total>0" :total="total" :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="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=" overdue" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
+                    <el-form-item>
+                        <el-select v-model=" overdue.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>
+                        <el-input v-model=" overdue.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=" 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:contract:query']">详情</el-button>
+                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDel(scope.row)" v-hasPermi="['service:contract:delete']">下载</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-tabs>
+</template>
 <script>
-import { listRepayment} from "@/api/service/repayment/repayment";
-import ColumnSetting from "../../../components/Table/columnSetting.vue";
-import { columnQuery, columnfilter } from "@/api/common/columnSetting";
+import { listRepayment } from "@/api/service/repayment/repayment";
+import ColumnSetting from "../../../components/Table/columnSetting.vue";
+import { columnQuery, columnfilter } from "@/api/common/columnSetting";
 export default {
-  name: "repayment",
-  components: {
-    ColumnSetting 
-  },
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 弹出层标题
-      title: "",
-      // 全部还款列表
-      allRepaymentList:[],
-      //待还款列表
-      unRepaymentList:[],
-      //已还款列表
-      repaymentList:[],
-      //逾期列表
-      overdueList:[],
-      typeOptions:[],
-      // 是否显示弹出层
-      open: false,
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        type: null,
-        value: null,
-        repaymentDate: [],
-        status: null,
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      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.getDicts("zc_zfr_apply_status").then((response) => {
-      this.applyStatusOptions = response.data;
-    });
-    this.getDicts("zc_zfr_type").then((response) => {
-      this.typeOptions = 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;
-      });
+    name: "repayment",
+    components: {
+        ColumnSetting,
     },
-    /** 查询未还款列表 */
-    getUnpayList() {
-      this.loading = true;
-      this.queryParamsUnpay.status = '00'
-      listRepayment(this.queryParamsUnpay).then(response => {
-        this.unRepaymentList = response.data.records;
-        this.total = response.data.total;
-        this.loading = false;
-      });
-    },
-    
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
+    data() {
+        return {
+            // 遮罩层
+            loading: true,
+            // 选中数组
+            ids: [],
+            // 非单个禁用
+            single: true,
+            // 非多个禁用
+            multiple: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            // 弹出层标题
+            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,
+            },
+            // 表单参数
+            form: {},
+            // 表单校验
+            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",
+        };
     },
-    // 表单重置
-    reset() {
-      this.form = {
-       
-      };
-      this.resetForm("form");
+    created() {
+        this.getList();
+        this.getDicts("zc_zfr_apply_status").then((response) => {
+            this.applyStatusOptions = response.data;
+        });
+        this.getDicts("zc_zfr_type").then((response) => {
+            this.typeOptions = response.data;
+        });
     },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
+    activated() {
+        this.getList();
     },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
+    mounted() {
+        this.columnQuery();
     },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-     /*  this.ids = selection.map(item => item.ptcId)
+    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.queryParamsUnpay.status = "00";
+            listRepayment(this.queryParamsUnpay).then((response) => {
+                this.unRepaymentList = response.data.records;
+                this.total = response.data.total;
+                this.loading = false;
+            });
+        },
+    /** 查询已还款列表 */
+        getUnpayList() {
+            this.loading = true;
+            this.queryParamsUnpay.status = "00";
+            listRepayment(this.queryParamsUnpay).then((response) => {
+                this.unRepaymentList = response.data.records;
+                this.total = response.data.total;
+                this.loading = false;
+            });
+        },
+            /** 查询逾期列表 */
+        getUnpayList() {
+            this.loading = true;
+            this.queryParamsUnpay.status = "00";
+            listRepayment(this.queryParamsUnpay).then((response) => {
+                this.unRepaymentList = response.data.records;
+                this.total = response.data.total;
+                this.loading = false;
+            });
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+        },
+        // 表单重置
+        reset() {
+            this.form = {};
+            this.resetForm("form");
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm("queryForm");
+            this.handleQuery();
+        },
+        // 多选框选中数据
+        handleSelectionChange(selection) {
+            /*  this.ids = selection.map(item => item.ptcId)
       this.single = selection.length!==1
       this.multiple = !selection.length */
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.$router.push("/contract/addContract/");
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      const zfcId = row.zfcId
-      this.$router.push("/contract/editContract/"+ zfcId);
-    },
-    /** 详情按钮操作 */
-    handleInfo(row) {
-      const zfcId = row.zfcId
-      this.$router.push("/contract/detailContract/"+ zfcId);
-    },
-    /** 删除按钮操作 */
-    handleDel(row) {
-      const zfcId = row.zfcId
-      const zfcName = row.zfcName
-      this.$confirm(
+        },
+        /** 新增按钮操作 */
+        handleAdd() {
+            this.$router.push("/contract/addContract/");
+        },
+        /** 修改按钮操作 */
+        handleUpdate(row) {
+            const zfcId = row.zfcId;
+            this.$router.push("/contract/editContract/" + zfcId);
+        },
+        /** 详情按钮操作 */
+        handleInfo(row) {
+            const zfcId = row.zfcId;
+            this.$router.push("/contract/detailContract/" + zfcId);
+        },
+        /** 删除按钮操作 */
+        handleDel(row) {
+            const zfcId = row.zfcId;
+            const zfcName = row.zfcName;
+            this.$confirm(
                 '是否确认删除合同模板名为"' + zfcName + '"的数据项?',
                 "警告",
                 {
@@ -295,10 +455,13 @@ export default {
                         message: "已取消删除",
                     });
                 });
-    },
-    /** 启用按钮操作 */
-     handleChange(row) {
-           let text = row.zfpStatus === "01" ? "开启合同模板名称为" : "停用合同模板名称为";
+        },
+        /** 启用按钮操作 */
+        handleChange(row) {
+            let text =
+                row.zfpStatus === "01"
+                    ? "开启合同模板名称为"
+                    : "停用合同模板名称为";
             this.$confirm(
                 "确认要" + text + '"' + row.zfcName + '"吗?',
                 "警告",
@@ -312,48 +475,49 @@ export default {
                     return changeState(row.zfcId);
                 })
                 .then(() => {
-                  this.getList();
+                    this.getList();
                     this.msgSuccess(text + "成功");
                 })
                 .catch(function () {
                     row.zfpSplit = row.zfpSplit === "00" ? "01" : "00";
                 });
-     },
-    //还款状态字典反显
-    applyStatusFormat(row, column) {
-      return this.selectDictLabel(this.applyStatusOptions, row.zfrApplyStatus);
-    },
-    
-    //获取当前客户是否之前设置过列展示隐藏
-    columnQuery() {
-      //获取页面路径
-      var psfPagePath = window.location.pathname;
+        },
+        //还款状态字典反显
+        applyStatusFormat(row, column) {
+            return this.selectDictLabel(
+                this.applyStatusOptions,
+                row.zfrApplyStatus
+            );
+        },
 
-      //用请求后台的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);
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      /* this.download('base/taxCode/export', {
+        //获取当前客户是否之前设置过列展示隐藏
+        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);
+        },
+        /** 导出按钮操作 */
+        handleExport() {
+            /* this.download('base/taxCode/export', {
         ...this.queryParams
       }, `base_taxCode.xlsx`) */
-    }
-  }
+        },
+    },
 };
 </script>