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

<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>