极客观点
项目管理
HarmonyOS
功能说明：
分页列表包括查询表单，使用vue读取后端数据，就是效果图整个这一块的功能
效果图：
html代码
<section class="body" v-cloak>
<div class="box_header">
<div class="title" name="页面名称">
<h2>操作员</h2>
</div>
<ul class="operate" name="操作按钮">
<li>
<a @click="btnAdd('admin/user/add')">{{lang.btn_new}}</a>
<a @click="btnClear">{{lang.btn_delete_setlected}}</a>
<!-- <a @click="btnImport">导入</a> -->
</li>
</ul>
<div class="search" name="查询表单">
<form id="form1" name="form1" method="post" action="">
<ul>
<li>
<div class="field">
<label class="field_title">{{lang.status}}</label>
<select name="status" v-model="searchForm.status">
<option value="">{{lang.select_status}}</option>
<option v-for="item in statusList" :value="item.status">{{item.statusMsg}}</option>
</select>
</div>
<div class="field">
<label class="field_title">{{lang.keywords}}</label>
<input type="text" name="search" maxlength="20" tabindex="1" v-model="searchForm.search" placeholder="用户姓名、登录名、手机、电子邮件">
</div>
</li>
<li>
<div class="field btns">
<label class="field_title"> </label>
<a @click="btnSearch">{{lang.btn_search}}</a>
<a @click="btnExport">{{lang.btn_export}}</a>
</div>
</li>
</ul>
</form>
</div>
</div>
<div class="box_list">
<table width="100%" align="center" class="t_list">
<tbody>
<tr class="th">
<th width="2%"> </th>
<th class="center"><input type="checkbox" v-model="checked" @click="btnCheckAll"></th>
<th>{{lang.user_userName}}</th>
<th>{{lang.user_loginName}}</th>
<th>{{lang.user_mobile}}/{{lang.user_email}}</th>
<th>{{lang.user_createTime}}</th>
<th>{{lang.user_enterCount}}/{{lang.user_enterTime}}</th>
<th>{{lang.status}}</th>
<th>{{lang.user_rolesName}}</th>
<th>{{lang.user_rolesType}}</th>
<th>{{lang.btn_manage}}</th>
</tr>
<tr v-for="(e,i) in userList">
<td class="cursor">{{e.cursor}}</td>
<td align="center"><input type="checkbox" v-model="checkList" :value="e.userId" @click="btnCheck(e.userId)"></td>
<td><a @click="btnDetail('admin/user/detail?id=' + e.userId)">{{e.userName}}</a></td>
<td>{{e.loginName}}</td>
<td><p>{{e.mobile}}</p>
<p>{{e.email}}</p></td>
<td>{{e.createTime}}</td>
<td><p>{{e.enterCount}}</p>
<p>{{e.enterTime}}</p></td>
<td>{{e.status}}</td>
<td>{{e.rolesName}}</td>
<td>{{e.rolesType}}</td>
<td><div class="btn_drop">
<button type="button" class="button" data-toggle="dropdown">{{lang.btn_manage}}<span class="caret"></span></button>
<div class="drop">
<a @click="btnEdit('admin/user/edit?id=' + e.userId)">编辑</a>
<a @click="btnDelete('admin/user/delete?id=' + e.userId)">删除</a>
</div>
</div></td>
</tr>
</tbody>
</table>
<div class="paging">
<ul>
<li>当前页：{{paging.pageIndex}}/{{paging.totalPages}}</li>
<li>共计{{paging.totalRows}}条记录</li>
<li @click="btnFirst">第一页</li>
<li @click="btnNext">下一页</li>
</ul>
</div>
</div>
</section>
<script type="text/javascript">
//
// vue 配置
var config = {
el: "section.body",
root: "http://127.0.0.1/sagesClockin/",
listName: "userList",
listId: "userId",
load: "admin/user/load",
// components: {
// "listdata": listdata
// },
data: {
// 检索表单的参数
searchForm: {
status: "",
regionsId: "",
search: ""
},
statusList: [],
rolesList: [],
lang: {},
userList: []
}
};
var listVm = list_paging(config);
//
</script>
js代码，有些公共方法没有放进来
/**
*
* 分页列表
*
* @param {Object} config
*/
function list_paging(config) {
//-----------------------------------------------------------------------
// Vue链接地址
// function里设定了基本的增删改查导入导出的链接地址
// 除此以外的绑定可以调用func方法处理
//-----------------------------------------------------------------------
const el = config.el; //挂在id或class
const root = config.root; // 系统根目录地址
var components = config.components;
// 加载列表
let url_load = meth.checkUrl(root, config.load);
//-----------------------------------------------------------------------
// Vue参数
//-----------------------------------------------------------------------
var vueData = {
paging: {
pageIndex: 0, // 分页初始页码必须从0开始，每次请求将自动加1
pageSize: 12, // 分页大小，默认为每页12条记录
totalPages: 1, // 总页数，第一次加载后会自动更新
totalRows: 0 // 记录总数，第一次加载后会自动更新
},
checked: false, // 全选按钮是否被选中
checkList: [], // 被选中复选框ID清单
listName: "", // 数据列表变量名称
listId: "", // 数据对象ID名称
searchForm: {}
}
vueData = meth.unionParams(vueData, config.data);
//-----------------------------------------------------------------------
// 新建Vue对象
//-----------------------------------------------------------------------
var vm = new Vue({
el: el,
components: components,
data: vueData,
created() {
this.load();
},
methods: {
// 加载数据
load: function() {
var she = this;
// 分页参数
var pageIndex = she.$data.paging.pageIndex + 1;
var pageSize = she.$data.paging.pageSize;
var totalPages = she.$data.paging.totalPages;
if (pageIndex > totalPages) {
alert("已到最后一页");
return;
}
console.log("pageIndex===>>>" + pageIndex);
console.log("pageSize===>>>" + pageSize);
// 检索参数
var searchParams = she.$data.searchForm;
searchParams['pageIndex'] = pageIndex;
searchParams['pageSize'] = pageSize;
// 发送请求
request.post(url_load, searchParams, function(res) {
var result = res.data.result;
console.log("服务器端数据")
console.log(result)
if (result) {
// 遍历对象设置页面参数
for (var key in result) {
console.log(key);
console.log(result[key]);
var data = result[key];
if (data) {
// 加载列表时，合并数据
she.$data[key] = data;
// if (key == config.listName) {
// var dataList = she.$data[key];
// var length = dataList.length;
// Vue.set(dataList, length, data)
// } else {
// // 覆盖初始化数据
// she.$data[key] = data;
// }
}
}
console.log(she.$data)
}
});
// 设置选择框为空
she.$data['checked'] = false;
she.$data['checkList'] = [];
},
//-----------------------------------------------------------
// 分页相关方法
//-----------------------------------------------------------
//返回第一页
btnFirst: function() {
// 返回第一页的时候，先设定分页数据
this.$data["paging"].pageIndex = 0;
// 重新加载数据
this.load();
},
// 下一页
btnNext: function(pageIndex) {
if (pageIndex && pageIndex > 0) {
this.$data["paging"].pageIndex = pageIndex - 1;
}
this.load();
},
// 最后一页
btnLast: function() {
var totalPages = she.$data.paging.totalPages;
this.$data["paging"].pageIndex = totalPages - 1;
this.load();
},
//-----------------------------------------------------------
// 增删改查按钮操作相关的方法
//-----------------------------------------------------------
// 打开弹窗层
btnOpen: function(title, url) {
meth.openLayer(title, url);
return false;
},
// 检索记录
btnSearch: function() {
// 返回第一页的时候，先设定分页数据
this.$data["paging"].pageIndex = 0;
this.$data["paging"].totalPages = 1;
// 清空已有数据
if (config.listName) {
this.$data[config.listName].length = 0;
}
// 重新加载数据
this.load();
},
// 新增记录
btnAdd: function(url) {
var title = "新建";
meth.openLayer(title, url);
return false;
},
// 编辑记录
btnEdit: function(url) {
var title = "编辑";
meth.openLayer(title, url);
return false;
},
// 查看记录
btnDetail: function(url) {
console.log("查看记录")
meth.href(url);
return false;
},
// 删除记录
btnDelete: function(url) {
var she = this;
she.$messagebox({
title: '温馨提示',
message: '您确定要删除此记录?',
showCancelButton: true,
confirmButtonText: "删除",
cancelButtonText: "取消"
}).then(action => {
if (action == 'confirm') {
if (url.indexOf(root) == -1) {
url = root + url;
}
var pst = {};
pst['id'] = item[config.listId];
console.log("删除记录")
console.log(url);
console.log(pst);
// 发送请求到后台
request.post(url, pst, function(res) {
var result = res.data;
console.log("处理结果");
console.log(result);
alert(result.statusMsg);
if (result.status == "success") {
// 重新加载数据
she.load();
}
})
} else {
console.log('取消')
}
})
},
// 删除所有选中记录
btnClear: function() {
var she = this;
var checkList = this.$data['checkList'];
if (checkList.length > 0) {
she.$messagebox({
title: '温馨提示',
message: '您确定要删除所有选中的记录?',
showCancelButton: true,
confirmButtonText: "删除",
cancelButtonText: "取消"
}).then(action => {
if (action == 'confirm') {
var params = "";
for (var value in checkList) {
if (params.length > 0) {
params = params + ",";
}
params = params + value;
}
var url = url_delete;
var pst = {};
pst['id'] = params;
console.log("删除记录")
console.log(url);
console.log(pst);
// 发送请求到后台
request.post(url, pst, function(res) {
var result = res.data;
console.log("处理结果");
console.log(result);
alert(result.statusMsg);
if (result.status == "success") {
// 重新加载数据
she.load();
}
})
} else {
console.log('取消')
}
})
} else {
alert("没有选中记录,请先选中");
}
},
// 导入操作
// 打开导入窗口
btnImport: function(url) {
let title = "导入数据";
meth.openLayer(title, url);
return false;
},
// 导出操作
// 发送请求（包含查询参数）到后台
btnExport: function() {
let title = "导出数据";
var url = url_outport;
var pageIndex = this.$data.paging.pageIndex;
var pageSize = this.$data.paging.pageSize;
// 请求参数
var searchParams = this.$data.searchForm;
searchParams['pageIndex'] = pageIndex;
searchParams['pageSize'] = pageSize;
var paramsBuffer = "";
for (let name in searchParams) {
let value = searchParams[name];
if (value) {
var kv = "";
if (paramsBuffer.length > 1) {
kv = "&";
}
kv = kv + name + "=" + value;
paramsBuffer = paramsBuffer + kv;
}
}
url = url + "?" + paramsBuffer;
console.log(title);
console.log(url);
meth.openLayer(title, url);
return false;
},
// 下载导出文件
// 导出完成后提示导出文件，点击按钮即可下载
btnDown: function(url) {
let title = "下载导出数据";
meth.openLayer(title, url);
return false;
},
btnTest: function(e) {
console.log(e);
return false;
},
//-----------------------------------------------------------
// 其它按钮操作相关的方法
//-----------------------------------------------------------
// 全选
btnCheckAll: function() {
console.log("++++++++++{btnCheckAll}++++++++++{1}++++++++++++")
var checked = this.$data['checked'];
if (checked == false) {
checked = true;
} else {
checked = false;
}
console.log("checked=" + checked);
if (checked == true) {
// 全选时
// 将数据列表项的ID值push到checkList数组
var list = this.$data[config.listName];
if (list) {
var checkList = this.$data['checkList'];
for (let i = 0; i < list.length; i++) {
var item = list[i];
if (item) {
var id = item[config.listId];
if (checkList.indexOf(id) == -1) {
checkList.push(id);
}
}
}
}
} else {
checkList = [];
}
// 更新参数
this.$data["checkList"] = checkList;
this.$data["checked"] = checked;
console.log("checkList===>>>");
console.log(checkList);
console.log("checked===>>>");
console.log(checked);
console.log("++++++++++{btnCheckAll}++++++++++{2}++++++++++++")
// alert("全选");
},
// 选中或取消复选框
btnCheck: function(id) {
console.log("++++++++++{btnCheck}++++++++++{1}++++++++++++")
console.log("点击选择框:id=" + id);
if (id) {
var checkList = this.$data["checkList"];
if (checkList) {
var index = checkList.indexOf(id);
console.log("当前ID索引index==>>" + index);
if (index == -1) {
checkList.push(id);
} else {
checkList.splice(index, index + 1);
}
var checked = false;
if (checkList.length > 0) {
checked = true;
}
// 更新参数
this.$data["checkList"] = checkList;
this.$data["checked"] = checked;
console.log("checkList===>>>");
console.log(checkList);
console.log("checked===>>>");
console.log(checked);
}
}
console.log("点击选择框:id=" + id);
console.log("++++++++++{btnCheck}++++++++++{2}++++++++++++")
},
// 选择框被改变
selectChange: function() {
},
//-----------------------------------------------------------
// 扩展方法，执行其它操作时，通过此方法来执行
//-----------------------------------------------------------
// 执行外部函数
func: function(fn) {
fn();
}
}
})
// 默认加载第一页
// vm.load();
return vm;
}
html5
重构一下直接上单文件组件吧，这种老代码改 vue 组件很困难的。