|
|
@@ -0,0 +1,264 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-card class="fiche" style="">
|
|
|
+ <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="">搜索</el-button>
|
|
|
+ <el-button icon="el-icon-refresh" size="mini" @click="">重置</el-button>
|
|
|
+ <column-setting :checkList=checkList :tableList=tableList :selfDom=selfDom :tableId=tableId></column-setting>
|
|
|
+ </div>
|
|
|
+ <hr style="margin-top: 16px;">
|
|
|
+ <el-row style="margin-bottom: 10px;">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-select v-model="value" placeholder="按资金方名称查询">
|
|
|
+ <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5">
|
|
|
+ <el-input v-model="input" placeholder="请输入关键字模糊查询" style="width:90%"></el-input>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="11">
|
|
|
+ <div class="block">
|
|
|
+ <span class="demonstration">承诺还款日期：</span>
|
|
|
+ <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ </el-card>
|
|
|
+ <el-button type="cyan" icon="el-icon-search" size="mini" @click="">导出待还款数据</el-button>
|
|
|
+
|
|
|
+ <el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
+ <el-tab-pane label="全部" name="first">
|
|
|
+ <el-table :data="tableData" border style="width: 100%">
|
|
|
+ <el-table-column fixed prop="date" label="序号" width="150">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="融信编号" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="province" label="还款承诺函编号" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="city" label="最终还款方" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="address" label="还款类型" width="300">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="还款金额（元)" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="还款银行账户" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="实际还款日期" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="承诺付款日期" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="还款状态" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column fixed="right" label="操作" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
|
|
|
+ <el-button type="text" size="small">编辑</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="待还款" name="second">
|
|
|
+ <el-table :data="tableData" border style="width: 100%">
|
|
|
+ <el-table-column fixed prop="date" label="序号" width="150">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="融信编号" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="province" label="还款承诺函编号" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="city" label="最终还款方" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="address" label="还款类型" width="300">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="还款金额（元)" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="还款银行账户" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="实际还款日期" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="承诺付款日期" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="还款状态" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column fixed="right" label="操作" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
|
|
|
+ <el-button type="text" size="small">编辑</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="已还款" name="third">
|
|
|
+ <el-table :data="tableData" border style="width: 100%">
|
|
|
+ <el-table-column fixed prop="date" label="序号" width="150">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="融信编号" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="province" label="还款承诺函编号" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="city" label="最终还款方" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="address" label="还款类型" width="300">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="还款金额（元)" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="还款银行账户" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="实际还款日期" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="承诺付款日期" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="还款状态" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column fixed="right" label="操作" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
|
|
|
+ <el-button type="text" size="small">编辑</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="逾期" name="fourth">
|
|
|
+ <el-table :data="tableData" border style="width: 100%">
|
|
|
+ <el-table-column fixed prop="date" label="序号" width="150">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="融信编号" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="province" label="还款承诺函编号" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="city" label="最终还款方" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="address" label="还款类型" width="300">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="还款金额（元)" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="还款银行账户" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="实际还款日期" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="承诺付款日期" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="还款状态" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column fixed="right" label="操作" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
|
|
|
+ <el-button type="text" size="small">编辑</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activeName: "first",
|
|
|
+ tableData: [{
|
|
|
+ date: '2016-05-02',
|
|
|
+ name: '王小虎',
|
|
|
+ province: '上海',
|
|
|
+ city: '普陀区',
|
|
|
+ address: '上海市普陀区金沙江路 1518 弄',
|
|
|
+ zip: 200333
|
|
|
+ }, {
|
|
|
+ date: '2016-05-04',
|
|
|
+ name: '王小虎',
|
|
|
+ province: '上海',
|
|
|
+ city: '普陀区',
|
|
|
+ address: '上海市普陀区金沙江路 1517 弄',
|
|
|
+ zip: 200333
|
|
|
+ }, {
|
|
|
+ date: '2016-05-01',
|
|
|
+ name: '王小虎',
|
|
|
+ province: '上海',
|
|
|
+ city: '普陀区',
|
|
|
+ address: '上海市普陀区金沙江路 1519 弄',
|
|
|
+ zip: 200333
|
|
|
+ }, {
|
|
|
+ date: '2016-05-03',
|
|
|
+ name: '王小虎',
|
|
|
+ province: '上海',
|
|
|
+ city: '普陀区',
|
|
|
+ address: '上海市普陀区金沙江路 1516 弄',
|
|
|
+ zip: 200333
|
|
|
+ }],
|
|
|
+ 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]);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ value: "选项1",
|
|
|
+ label: "黄金糕",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "选项2",
|
|
|
+ label: "双皮奶",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "选项3",
|
|
|
+ label: "蚵仔煎",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "选项4",
|
|
|
+ label: "龙须面",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "选项5",
|
|
|
+ label: "北京烤鸭",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ value: "",
|
|
|
+ value1: "",
|
|
|
+ value2: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleClick(tab, event) {
|
|
|
+ console.log(tab, event);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
zhaigk