2 \src\views\Users\UserView.vue
<template>
<div class="wrap">
<!--注意：1、“回到顶部”组件及其回滚内容都必须包含到同1个div容器中。-->
<!-- 2、div容器中必须有1个唯1性的样式类（例如：wrap）的定义，以便“回到顶部”组件进行回滚时进行定位。-->
<!-- 3、“回到顶部”组件 必须在所有的回滚内容之上。-->
<el-backtop:bottom="100"target=".wrap" style="background-color:#666;">
<el-icon style="color:#99ffff;font-size:40px;margin-top:-2px;">
<CaretTop />
</el-icon>
</el-backtop>
<el-form:model="queryForm" :rules="queryRule"ref="refRule" label-width="120px" label-position="left">
<el-row:gutter="20">
<el-col:span="18">
<el-form-item label="账户:">
<el-input v-model="queryForm.name"type="text" />
</el-form-item>
</el-col>
<el-col:span="6">
<el-form-item label="激活:">
<el-select v-model="queryForm.isActive">
<el-option label="不限" value="" />
<el-option label="激活" value=true />
<el-option label="禁用" value=false />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row:gutter="20">
<el-col:span="18">
<el-form-item label="电子邮箱:">
<el-input v-model="queryForm.email"type="text" />
</el-form-item>
</el-col>
<el-col:span="6">
<el-form-item label="系统账户:">
<el-select v-model="queryForm.isSystemAccount">
<el-option label="不限" value="" />
<el-option label="系统账户" value=true />
<el-option label="其它" value=false />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row:gutter="20">
<el-col:span="18">
<el-form-item label="手机:">
<el-input v-model="queryForm.phone"type="text" />
</el-form-item>
</el-col>
<el-col:span="6">
<el-form-item label="可用:">
<el-select v-model="queryForm.deleted">
<el-option label="不限" value="" />
<el-option label="已被删除" value=true />
<el-option label="可用" value=false />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row:gutter="20">
<el-col:span="12">
<el-form-item label="开始日期:" prop="createdDateTimeFrom">
<el-date-picker style="width:100%"v-model="queryForm.createdDateTimeFrom"type="date"
format="YYYY-MM-DD" value-format="YYYY-MM-DD":append-to-body="false">
</el-date-picker>
</el-form-item>
</el-col>
<el-col:span="12">
<el-form-item label="结束日期:" prop="createdDateTimeTo">
<el-date-picker style="width:100%"v-model="queryForm.createdDateTimeTo"type="date"
format="YYYY-MM-DD" value-format="YYYY-MM-DD":append-to-body="false"> </el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row:gutter="20">
<el-col:span="24">
<el-button type="primary"@click="onSubmit">
<el-icon style="margin-right:5px;font-size:16px;">
<Search />
</el-icon>
查 询
</el-button>
<el-button@click="onResert">
<el-icon style="margin-right:5px;font-size:16px;">
<RefreshRight />
</el-icon>
重 置
</el-button>
</el-col>
</el-row>
</el-form>
<el-row type="flex" justify="end" style="margin:5px 0px;">
<el-col:span="8">
<div class="lightgreen-box">
<el-button style="background-color:#79bbff;color:#FFFFFF;margin-right:10px">
<el-icon style="margin-right:5px;font-size:22px;">
<CirclePlusFilled />
</el-icon>
添 加
</el-button>
<el-button type="danger">
<el-icon style="margin-right:5px;font-size:22px;">
<Delete />
</el-icon>
删除所选
</el-button>
</div>
</el-col>
</el-row>
<!--指定页面渲染显示，handleTableSort：排序；selectionChange：所选择的复选框控件，为删除所选操作提供数据支撑；-->
<el-table:data="currentPageList"style="width:100%" :default-sort="{
'prop':JSON.parse(this.pagination.OrderByModel).OrderByFiled,
'order':JSON.parse(this.pagination.OrderByModel).OrderByType}" @sort-change="handleTableSort"ref="refTable">
<el-table-column type="selection" width="50px" />
<el-table-column property="id" label="编号" width="80px" sortable />
<el-table-column property="name" label="帐号" sortable>
<template#default="scope">
<el-avatar shape="square":size="70"
style="vertical-align:middle;margin-right:3px;float:left;">
<el-image:src="scope.row.avatar" :fit="fitCover"/>
</el-avatar>
<div class="userinfo-inner">
<span style="width:100%;height:20px;line-height:20px;">
{{scope.row.name}}
</span>
<br />
<span
style="width:100%;height:10px;line-height:10px;font-size:60%;color:#999999;font-weight:400;">
{{scope.row.email}}
</span>
<br />
<span
style="width:100%;height:10px;line-height:10px;font-size:60%;color:#999999;font-weight:400;">
{{scope.row.phone}}
</span>
</div>
</template>
</el-table-column>
<el-table-column label="状态" align="center" width="85px">
<template#default="scope">
<!-- <el-tag effect="plain" v-show="scope.row.isSystemAccount">系统帐户</el-tag>
<el-tag type="success" v-show="!scope.row.isSystemAccount">其它</el-tag> -->
<el-tag effect="plain" v-show="scope.row.isSystemAccount">系统帐户</el-tag>
<el-tag type="success" effect="plain" v-show="!scope.row.isSystemAccount"
style="letter-spacing:7px;text-indent:10px">其它</el-tag>
<el-tag type="success" effect="plain" style="letter-spacing:7px;text-indent:10px;margin:3px 0px;"
v-show="scope.row.isActive">激活</el-tag>
<el-tag type="danger" effect="plain" style="letter-spacing:7px;text-indent:10px;margin:3px 0px;"
v-show="!scope.row.isActive">禁用</el-tag>
<el-tag type="success" effect="plain" v-show="scope.row.deleted"
style="letter-spacing:7px;text-indent:10px">可用</el-tag>
<el-tag type="danger" effect="plain" v-show="!scope.row.deleted">已被删除</el-tag>
</template>
</el-table-column>
<el-table-column prop="createdDateTime" label="注册时间":formatter="dateTimeformat"width="155" sortable />
<el-table-column prop="updatedDateTime" label="最后更新时间":formatter="dateTimeformat"width="155" sortable />
<el-table-column align="center" width="180px">
<template#default="scope">
<el-button type="primary" style="margin-right:10px;" @click="editUser(scope.row)">编 辑
</el-button>
<el-button type="danger":disabled="!scope.row.deleted||scope.row.isSystemAccount">删 除</el-button>
</template>
</el-table-column>
</el-table>
<!-- “->”:设定“el-pagination”分页组件靠右显示。-->
<el-pagination v-model:current-page="this.pagination.pageIndex"v-model:page-size="this.pagination.pageSize"
:page-sizes="[3,10,15,20,50,100]" :total="this.pagination.totalCount"prev-text="上一页" next-text="下一页"
background layout="->, total, sizes, prev, pager, next"@size-change="handleSizeChange"
@current-change="handleCurrentChange"/>
</div>
</template>
<script>
import moment from 'moment';
import{
postCustomerIndex,
}from '../../common/http.api.js';
export default{
data() {
//验证查询表单中的开始日期必须小于等于当前时间。
const validateDateTimeFrom= (rule,value,callback)=>{
if(value!=null||value!='') {
if(this.moment(value) >Date.now())
callback(new Error("开始日期必须小于等于当前时间！"));
}
callback();
};
//验证查询表单中的开始日期必须小大于等于开始日期；且小于等于当前时间。
const validateDateTimeTo= (rule,value,callback)=>{
if(this.queryForm.createdDateTimeFrom!='') {
if(value==null||value=='') {
callback(new Error("请输入结束日期！"));
}else if(this.moment(value) >Date.now()) {
callback(new Error("结束日期必须小于等于当前时间！"));
}else if(this.moment(value) <this.moment(this.queryForm.createdDateTimeFrom)) {
callback(new Error("结束日期必须大于等于开始日期！"));
}
}
callback();
};
return{
//获取日期格式化类的1个指定实例。
moment: moment,
//查询表单实例初始化。
queryForm:{
name: '',
email: '',
phone: '',
isSystemAccount: '',
isActive: '',
deleted: '',
createdDateTimeFrom: '',
createdDateTimeTo: '',
},
queryRule:{
createdDateTimeFrom:[{
validator: validateDateTimeFrom,
trigger: "blur"
}],
createdDateTimeTo:[{
validator: validateDateTimeTo,
trigger: "blur"
}]
},
//分页表实例初始化。
pagination:{
pageIndex: 1,//初始化当前页，即第1页。
pageSize: 15,//初始化每页最多所包含的项数值，即每页最多所包含15项。
totalCount: 0,//初始化数据源的总计项数值，由于还没有加载数据源所以该值为：0。
//初始化排序字段及其方式。
OrderByModel: JSON.stringify({
OrderByFiled: 'createdDateTime',
OrderByType: 'descending',
}),
QueryCondition: ""
},
//初始化当前页的渲染数据集列表实例。
currentPageList:[],
//初始化图片的填充方式：按照长宽比填充整个图片（https://www.w3school.com.cn/css/css3_object-fit.asp）。
fitCover: "cover",
};
},
methods:{
//格式化日期显示。
dateTimeformat: function(row,column) {
let data=row[column.property];
if(data==null) {
return null;
}
return moment(data).format('YYYY-MM-DD HH:mm:ss');
},
//获取当前页面渲染显示所需的数据源。
async currentPageInit() {
let res=await postCustomerIndex(this.pagination);
//console.log(res.data.response.data);
this.currentPageList=res.data.response.data;
this.pagination.totalCount=res.data.response.totalCount;
},
//表单查询事件
async onSubmit() {
this.$refs.refRule.validate(async(valid)=>{
if(valid) {
var where= {};
if(this.queryForm.name!='') {
where.name=this.queryForm.name;
}
if(this.queryForm.email!='') {
where.email=this.queryForm.email;
}
if(this.queryForm.phone!='') {
where.phone=this.queryForm.phone;
}
if(this.queryForm.isSystemAccount!='') {
where.isSystemAccount=this.queryForm.isSystemAccount;
}
if(this.queryForm.isActive!='') {
where.isActive=this.queryForm.isActive;
}
if(this.queryForm.deleted!='') {
where.deleted=this.queryForm.deleted;
}
if(this.queryForm.createdDateTimeFrom!='') {
where.createdDateTimeFrom=this.moment(this.queryForm.createdDateTimeFrom)
.format('YYYY-MM-DD HH:mm:ss');
}
if(this.queryForm.createdDateTimeTo!='') {
where.createdDateTimeTo=this.moment(this.queryForm.createdDateTimeTo).add(
1,'days').format('YYYY-MM-DD HH:mm:ss');
}
console.log(where);
this.pagination.QueryCondition=JSON.stringify(where);
console.log(this.pagination.QueryCondition);
await this.currentPageInit();
}else{
this.$message.error('输入不能通过验证!');
return false;
}
});
},
//重置页面样式及其数据。
async onResert() {
//重置查询表单。
this.queryForm= {
name: '',
email: '',
phone: '',
isSystemAccount: '',
isActive: '',
deleted: '',
createdDateTimeFrom: '',
createdDateTimeTo: '',
};
//重置排序字段试及其排序方式。
this.pagination= {
pageIndex: 1,
pageSize: 15,
totalCount: 0,
OrderByModel: JSON.stringify({
OrderByFiled: 'createdDateTime',
OrderByType: 'descending',
}),
QueryCondition: ""
} ;
await this.$refs.refTable.sort(JSON.parse(this.pagination.OrderByModel).OrderByFiled,
JSON.parse(this.pagination.OrderByModel).OrderByType);
await this.currentPageInit();
},
//单击排序三角图标时所触发的事件。
async handleTableSort({
column
}) {
//防止排序方式的值为：null。
if(column.property==null&&column.order==null) {
column.property='createdDateTime',
column.order="descending";
}else if(column.property!=null&&column.order==null) {
column.order="ascending";
}
this.pagination.OrderByModel=JSON.stringify({
OrderByFiled: column.property,
OrderByType: column.order,
});
await this.currentPageInit();
},
//该事件在改变每页最多所包含的项数值后，把数据源加载到当前页面中，并重新对当前页进行渲染显示。
async handleSizeChange(size) {
this.pagination.pagesize=size;
//console.log(this.pagesize); //每页最多所包含的项数值。
await this.currentPageInit();
},
//该事件在改变当前页的索引值后，把数据源加载到当前页面中，并重新对当前页进行渲染显示。
async handleCurrentChange(currentPage) {
this.pagination.PageIndex=currentPage;
//console.log(this.PageIndex); //当前页的索引值。
await this.currentPageInit();
},
//编辑单击事件
async editUser(row) {
console.log(row);
},
},
async mounted() {
await this.currentPageInit();
},
};
</script>
<style scoped lang="scss">
.wrap{
height:100%;
overflow-x:hidden;
}
//表单“label”字体样式
:deep(.el-form-item__label) {
font-weight:400;
}
//修改表头样式。
:deep(.el-table__header thead th) {
background-color:#000000;
color:#ffd04b;
font-weight:400;
text-align:center;
}
//修改复选框控件样式。
:deep(.el-checkbox) {
display:flex;
align-items:center;
width:25px;
height:25px;
//修改选中框的大小
.el-checkbox__inner{
width:20px;
height:20px;
border:#409EFF solid 2px;
//修改选中框中的对勾的大小和位置
&::after{
//对号
border:4px solid #FFFFFF;
//不覆盖下面的 会 导致对号变形
box-sizing:content-box;
content:"";
border-left:0;
border-top:0;
height:15px;
position:absolute;
top:-3px;
}
}
//修改点击文字颜色不变
.el-checkbox__input.is-checked+.el-checkbox__label{
color:#333333;
}
.el-checkbox__label{
line-height:25px;
//padding-left: 8px;
}
}
//表格隔行变换颜色。
:deep(.el-table__body tbody tr:nth-child(odd)) {
background-color:#FFFFFF;
}
:deep(.el-table__body tbody tr:nth-child(even)td) {
background-color:#CCFFFF;
}
.userinfo-inner{
cursor:pointer;
float:left;
}
//标签控件字体样式。
.el-tag{
font-weight:400;
padding:5px 5px;
}
//按钮控件字体样式。
.el-button{
font-size:100%;
font-weight:400;
}
//“el-pagination”分页组件样式。
.el-pagination{
margin-top:10px;
//font-size: 25px;
//"上一页"样式。
:deep(.btn-prev) {
background-color:transparent;
height:40px;
margin-right:20px;
}
//"下一页"样式。
:deep(.btn-next) {
background-color:transparent;
height:40px;
margin-left:20px;
}
//分页索引样式。
:deep(.number) {
background-color:transparent;
min-width:40px;
height:40px;
margin-right:15px;
}
}
//“el-pagination”分页组件中下拉框控件字体样式。
:deep(.el-input__wrapper) {
//font-size: 25px;
}
.lightgreen-box{
//background-color: lightgreen;
//height: 24px;
float:right;
}
</style>
对以上功能更为具体实现和注释见：230315_014shopvue(用户页面分页的渲染显示)。