Files
peko-admin-web/src/views/privilege/personalHomepageRecordManagement.vue
2024-12-03 10:29:40 +08:00

131 lines
3.3 KiB
Vue

<template>
<div class="box">
<!-- 查询 -->
<div class="inquire">
<span>平台ID</span>
<el-input v-model="inquire.id" placeholder="" class="input"></el-input>
</div>
<!-- 查询按钮 -->
<el-button class="primary" type="primary" @click="getData()"
>查询</el-button
>
<!-- 表格 -->
<el-table
v-loading="loading"
:data="tableData"
border
style="width: 100%; margin-top: 25px"
>
<el-table-column prop="backgroundId" align="center" label="个人主页id" />
<el-table-column prop="backgroundName" align="center" label="个人主页名称" />
<el-table-column prop="uid" align="center" label="用户uID" />
<el-table-column prop="nick" align="center" label="用户昵称" />
<el-table-column prop="status" align="center" label="个人主页状态" />
<el-table-column prop="createTime" align="center" label="购买天数" />
<el-table-column prop="days" align="center" label="有效时间" />
<el-table-column prop="expireTime" align="center" label="过期时间" />
</el-table>
<!-- 分页 -->
<el-pagination
style="margin-top: 10px"
class="paginationClass"
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[10, 20, 30, 40, 50, 100, 200, 300, 400, 500, 999999999]"
layout="sizes, prev, pager, next"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script>
import { pesonalBackgroundListRecordByPage } from "@/api/personalHomepageResourceManagement/personalHomepageResourceManagement";
// @ts-ignore
import { dateFormat } from "@/utils/system-helper";
// @ts-ignore
import { ElMessage } from "element-plus";
export default {
name: "personalHomepageRecordManagement",
data() {
return {
loading: false,
//查询所需条件对象
inquire: {
id: "",
},
// 表格
tableData: [],
// 分页
total: 10, //总页数
currentPage: 1, //页码
pageSize: 10, //条数
};
},
created() {
this.getData();
},
methods: {
// 查询接口
getData() {
this.loading = true;
pesonalBackgroundListRecordByPage({
erbanNo: this.inquire.id,
page: this.currentPage,
pageSize: this.pageSize,
}).then((res) => {
if (res.code == 200) {
this.loading = false;
this.total = res.data.total;
this.tableData = res.data.rows;
} else {
ElMessage({
showClose: true,
message: res.message,
type: "error",
});
}
});
},
// 分页导航
handleSizeChange() {
this.getData();
},
handleCurrentChange() {
this.getData();
},
},
};
</script>
<style lang="less" scoped>
.box {
padding-top: 20px;
background: #ecf0f5;
.inquire {
display: inline-block;
margin-right: 20px;
span {
margin-right: 10px;
}
.input {
width: 180px;
margin-right: 10px;
}
}
.dialogTableVisibleBut {
display: block;
margin: 30px 0 0 830px;
}
.paginationClass {
margin: 15px 0 5px 0px;
}
}
.operation {
margin-bottom: 20px;
width: 55%;
display: flex;
align-items: baseline;
justify-content: space-between;
}
</style>