iview-project/src/views/gateway_cfg.vue

<template>
    <div>
        <Table :data="tableData1" :columns="tableColumns1" stripe></Table>
        <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
                <Page :total="dataTotal" :current="pageIndex"
                      :page-size="pageSize" show-total show-sizer
                      @on-change="changePage"
                      @on-page-size-change="changePageSize"
                ></Page>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "gateway-cfg",
        data() {
            return {
                dataTotal: 0,
                pageIndex: 1,
                pageSize: 10,
                tableData1: this.mockTableData1(),
                tableColumns1: [
                    {
                        title: '登录名',
                        key: 'loginName'
                    },
                    {
                        title: '昵称',
                        key: 'nickName'
                    },
                    {
                        title: '状态',
                        key: 'status',
                        render: (h, params) => {
                            const row = params.row;
                            const color = row.status === '1' ? 'success' : 'error';
                            const text = row.status === '1' ? '启用' : '禁用';

                            return h('Tag', {
                                props: {
                                    type: 'dot',
                                    color: color
                                }
                            }, text);
                        }
                    },
                    {
                        title: '创建时间',
                        key: 'createTime',
                        render: (h, params) => {
                            return h('div', this.formatDate(params.row.createTime));
                        }
                    },
                    {
                        title: '更新时间',
                        key: 'updateTime',
                        render: (h, params) => {
                            return h('div', this.formatDate(params.row.updateTime));
                        }
                    },
                    {
                        title: '操作',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    type: 'primary',
                                    shape: 'circle',
                                    icon: 'ios-search',
                                    style: {fontSize: 20}
                                }, '编辑')
                            ]);
                        }
                    }
                ]
            }
        },
        methods: {
            mockTableData1() {
                let data = [];
                let total = this.dataTotal;
                this.$http.get('/api/user/ajaxList', {
                    params: {
                        'pageIndex': this.pageIndex,
                        'pageSize': this.pageSize
                    }
                }).then(function (result) {
                    total = result.data.total;
                    result = result.data.data;
                    for (let i = 0; i < result.length; i++) {
                        data.push(result[i]);
                    }
                });
                return data;
            },
            formatDate(date) {
                date = new Date(date);
                const y = date.getFullYear();
                let m = date.getMonth() + 1;
                m = m < 10 ? '0' + m : m;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let hours = date.getHours();
                hours = hours < 10 ? '0' + hours : hours;
                let min = date.getMinutes();
                min = min < 10 ? '0' + min : min;
                let sec = date.getSeconds();
                sec = sec < 10 ? '0' + sec : sec;
                return y + '-' + m + '-' + d + ' ' + hours + ':' + min + ':' + sec;
            },
            changePage(value) {
                this.pageIndex = value - 1;
                this.tableData1 = this.mockTableData1();
            },
            changePageSize(value) {
                this.pageSize = value;
                this.tableData1 = this.mockTableData1();
            }
        }
    }
</script>