MyChat.vue

<template>
	<div>
		<el-container>
			<el-header style="text-align: right; font-size: 12px">
				<i class="el-icon-refresh header-button-item" @click="refreshPage"></i>
				<el-dropdown>
					<i class="el-icon-setting header-button-item"></i>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item>新增</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<a href="http://qinyingjie.top/" target="_blank" class="header-button-item">kwan</a>
			</el-header>

			<el-main>
				<el-table border :data="userlist" v-loading="loading">
					<el-table-column prop="id" label="序号" width="50" sortable></el-table-column>
					<el-table-column prop="question" label="问题" width="240" show-overflow-tooltip></el-table-column>
					<el-table-column prop="response" label="答案" show-overflow-tooltip></el-table-column>
					<el-table-column label="创建时间" width="170">
						<template slot-scope="props">
							{{ props.row.createTime | dateFormat }}
						</template>
					</el-table-column>
					<el-table-column prop="详情" label="详情" width="100">
						<template slot-scope="props">
							<a href="#" @click.prevent="gotoDetail(props.row.id)">详情</a>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
					class="pagination"
					background
					:key="elementui_page_component_key"
					:current-page.sync="currentPage"
					:page-size="pageSize"
					:total="total"
					@current-change="handleCurrentChange"
				></el-pagination>
			</el-main>
			<el-backtop class="backtop"></el-backtop>
		</el-container>
	</div>
</template>

<script>
import axios from 'axios';
export default {
    name: 'MyChat',

    data() {
        return {
            // 用户列表数据
            userlist: [],
            loading: false,
            elementui_page_component_key: 0,
            currentPage: Number(localStorage.getItem('lastPage')) || 1,
            pageSize: 14,
            total: 0,
        };
    },

    created() {
        // 调用请求数据的方法
        this.initCartList();
    },
    mounted() {
        this.currentPage = Number(localStorage.getItem('lastPage')) || 1;
        this.elementui_page_component_key++;
    },
    methods: {
        refreshPage() {
            location.reload();
        },
        gotoDetail(id) {
            this.$router.push('/home/chatinfo/' + id);
        },

        async initCartList() {
            this.loading = true;
            const { data: res } = await axios.get('http://120.79.36.53:8888/chatbot/page', {
                params: {
                    page: this.currentPage,
                    pageSize: this.pageSize,
                },
            });
            if (res.code === 200) {
                this.userlist = res.result.records;
                this.total = res.result.total;
                localStorage.setItem('lastPage', this.currentPage);
            }
            this.loading = false;
        },

        handleCurrentChange(currentPage) {
            this.currentPage = currentPage;
            this.initCartList();
        },
    },
};
</script>

<style lang="less" scoped>
.el-header {
	background-color: #b3c0d1;
	color: #333;
	line-height: 60px;
}

.el-aside {
	color: #333;
}

.pagination {
	margin-top: 16px;
	text-align: right;
}
.header-button-item {
	margin-right: 15px;
	font-size: 20px;
}

.backtop {
	position: fixed;
	bottom: 50px;
	right: 50px;
	height: 40px;
	width: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 20px;
	background-color: #007aff;
	color: #fff;
	cursor: pointer;
	z-index: 999;
}

.backtop:hover {
	background-color: #0050a0;
}
</style>