340 lines
8.4 KiB
Vue
340 lines
8.4 KiB
Vue
<template>
|
|
<view class="page">
|
|
<view class="example-body" v-if="listCards.length>0">
|
|
<view v-for="(item,index) in listCards" :key="index" class="example-box">
|
|
<dev-block :title="item.title" :titleNumber="item.titleNumber" :note="item.note"
|
|
:contentList="item.contentList" @click="clickDetail(item.id)"></dev-block>
|
|
</view>
|
|
<uni-load-more :loadingType="loadingType" :contentText="contentText" ></uni-load-more>
|
|
</view>
|
|
<view v-else>
|
|
<no-record noRecordContent='暂无满足条件的设备， 请输入关键字重新搜索。'></no-record>
|
|
</view>
|
|
<view class="goHome" @click='goMain()'>
|
|
<img src="../../static/img/gohome.png">
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import devBlock from '@/components/xinsoft-dev-block/xinsoft-dev-block.vue'
|
|
import noRecord from '@/components/xinsoft-no-record/xinsoft-no-record';
|
|
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
|
|
|
|
export default {
|
|
components: {
|
|
devBlock,noRecord,uniLoadMore
|
|
},
|
|
data() {
|
|
return {
|
|
listCards:[],
|
|
wwebViewContent:{
|
|
nameAndType:''
|
|
},
|
|
historyList: [],
|
|
isHistory: true,
|
|
//上拉刷新，下拉加载
|
|
loadingText: '加载中...',
|
|
loadingType: 0,//定义加载方式 0---contentdown 1---contentrefresh 2---contentnomore
|
|
contentText: {
|
|
contentdown:'上拉显示更多',
|
|
contentrefresh: '正在加载...',
|
|
contentnomore: '没有更多数据了'
|
|
},
|
|
pageSize:5,
|
|
page:1,
|
|
};
|
|
},
|
|
onPullDownRefresh: function() {
|
|
//下拉刷新的时候请求一次数据
|
|
this.getEquipAccount(this.wwebViewContent);
|
|
},
|
|
onReachBottom: function() {
|
|
//触底的时候请求数据，即为上拉加载更多
|
|
this.getEquipAccountMore(this.wwebViewContent);
|
|
},
|
|
methods: {
|
|
/**
|
|
* 点击历史记录进行搜索，效果
|
|
*/
|
|
historyClick(item){
|
|
//为标题栏的输入框赋值。
|
|
const currentWebview = this.$mp.page.$getAppWebview();
|
|
currentWebview.setTitleNViewSearchInputText(item.name);
|
|
this.wwebViewContent.nameAndType = item.name;
|
|
this.getEquipAccount({
|
|
nameAndType:item.name
|
|
})
|
|
},
|
|
/**
|
|
* 调用接口获取当前搜索结果的数据
|
|
*/
|
|
getEquipAccount(filterRes){
|
|
this.page = 1;
|
|
this.loadingType = 0;
|
|
filterRes.pageno = this.page;
|
|
filterRes.pagesize = this.pageSize;
|
|
this.$http.request({
|
|
url: '/apis/device/advancedQuery',
|
|
params:filterRes,
|
|
}).then(res=>{
|
|
if (!res.data.data|| res.data.data.length ==0) {//没有数据
|
|
this.listCards= [];
|
|
uni.hideNavigationBarLoading();//关闭加载动画
|
|
return;
|
|
}
|
|
if(res.data.code == 0){
|
|
this.page++;//得到数据之后page+1
|
|
uni.hideNavigationBarLoading();
|
|
uni.stopPullDownRefresh();//得到数据后停止下拉刷新
|
|
if(res.data.data.datas.length>0){
|
|
this.listCards = this.formaterData(res.data.data.datas);
|
|
}
|
|
}
|
|
}).catch(err=>{
|
|
});
|
|
},
|
|
getEquipAccountMore(filterRes){
|
|
if (this.loadingType !== 0) {//loadingType!=0;直接返回
|
|
return false;
|
|
}
|
|
this.loadingType = 1;
|
|
uni.showNavigationBarLoading();//显示加载动画
|
|
this.filterResult = JSON.stringify(filterRes, null, 2);
|
|
filterRes.pageno = this.page;
|
|
filterRes.pagesize = this.pageSize;
|
|
this.$http.request({
|
|
url: '/apis/device/advancedQuery',
|
|
params:filterRes,
|
|
}).then(res=>{
|
|
this.isHistory = false;
|
|
if (!res.data.data|| res.data.data.length ==0) {//没有数据
|
|
this.loadingType = 2;
|
|
uni.hideNavigationBarLoading();//关闭加载动画
|
|
return;
|
|
}
|
|
if(res.data.code == 0){
|
|
this.page++;//每触底一次 page +1
|
|
this.loadingType = 0;//将loadingType归0重置
|
|
uni.hideNavigationBarLoading();//关闭加载动画
|
|
var resultData = this.formaterData(res.data.data.datas);
|
|
this.listCards = [...this.listCards,...resultData];
|
|
}
|
|
}).catch(err=>{
|
|
});
|
|
},
|
|
clickDetail(id){
|
|
//点击设备详情
|
|
uni.navigateTo({
|
|
url: 'eqDetail?deviceId='+id
|
|
});
|
|
},
|
|
formaterData(data){
|
|
var resData = [];
|
|
data.forEach((vals,index)=>{
|
|
var combineJSON = {
|
|
id: vals.id,
|
|
title: vals.name,
|
|
// titleNumber:'['+vals.serialno+']',
|
|
contentList: [
|
|
{
|
|
id:1,
|
|
isDouble:true,
|
|
labelName:'设备编号',
|
|
labelContent:vals.serialno
|
|
},
|
|
{
|
|
id:2,
|
|
isDouble:true,
|
|
labelName:'规格型号',
|
|
labelContent:vals.model
|
|
},
|
|
{
|
|
id:3,
|
|
isDouble:true,
|
|
labelName:'设备类型',
|
|
labelContent:vals.sblx
|
|
},
|
|
{
|
|
id:4,
|
|
isDouble:true,
|
|
labelName:'负责人',
|
|
labelContent:vals.fzr
|
|
},
|
|
],
|
|
note: '设备详情',
|
|
extra: vals.status_name,
|
|
// tagType:vals.using_status+''
|
|
}
|
|
resData.push(combineJSON);
|
|
});
|
|
return resData;
|
|
},
|
|
|
|
/**
|
|
* 清理历史搜索数据
|
|
*/
|
|
clearSearch() {
|
|
var _this = this;
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '是否清理全部搜索历史？',
|
|
success: res => {
|
|
if (res.confirm) {
|
|
this.historyList = _this.removeHistory();
|
|
}
|
|
}
|
|
});
|
|
},
|
|
/**
|
|
* 保存历史数据
|
|
*/
|
|
setHistory(val) {
|
|
let searchHistory = uni.getStorageSync('search:history');
|
|
if (!searchHistory) searchHistory = [];
|
|
let serachData = {};
|
|
if (typeof(val) === 'string') {
|
|
serachData = {
|
|
name: val,
|
|
};
|
|
} else {
|
|
serachData = val
|
|
}
|
|
|
|
// 判断数组是否存在，如果存在，那么将放到最前面
|
|
for (var i = 0; i < searchHistory.length; i++) {
|
|
if (searchHistory[i].name === serachData.name) {
|
|
searchHistory.splice(i, 1);
|
|
break;
|
|
}
|
|
}
|
|
|
|
searchHistory.unshift(serachData);
|
|
uni.setStorage({
|
|
key: 'search:history',
|
|
data: searchHistory,
|
|
success: function() {
|
|
}
|
|
});
|
|
},
|
|
/**
|
|
* 删除历史数据
|
|
*/
|
|
removeHistory() {
|
|
uni.removeStorage({
|
|
key: 'search:history',
|
|
success: function(res) {
|
|
}
|
|
});
|
|
return []
|
|
}
|
|
},
|
|
// /**
|
|
// * 当 searchInput 输入时触发
|
|
// */
|
|
// onNavigationBarSearchInputChanged(e) {
|
|
// let text = e.text;
|
|
// if (!text) {
|
|
// // this.isHistory = true;
|
|
// this.historyList = [];
|
|
// this.historyList = uni.getStorageSync('search:history');
|
|
|
|
// return;
|
|
// } else {
|
|
// // this.isHistory = false;
|
|
// }
|
|
// },
|
|
/**
|
|
* 点击软键盘搜索按键触发
|
|
*/
|
|
onNavigationBarSearchInputConfirmed(e) {
|
|
let text = e.text;
|
|
if (!text) {
|
|
this.isHistory = true;
|
|
this.historyList = [];
|
|
this.historyList = uni.getStorageSync('search:history');
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '请输入搜索设备编号或设备名称',
|
|
success: res => {
|
|
if (res.confirm) {
|
|
}
|
|
}
|
|
});
|
|
return;
|
|
} else {
|
|
this.isHistory = false;
|
|
// console.log(JSON.stringify(this.historyList));
|
|
this.wwebViewContent.nameAndType = text;
|
|
uni.hideKeyboard();
|
|
this.getEquipAccount(this.wwebViewContent);
|
|
}
|
|
},
|
|
/**
|
|
* 点击导航栏 buttons 时触发
|
|
*/
|
|
onNavigationBarButtonTap() {
|
|
var inputText = document.querySelector("input").value;
|
|
// const currentWebview = this.$mp.page.$getAppWebview();
|
|
// var inputText = currentWebview.getTitleNViewSearchInputText();
|
|
if(inputText){
|
|
this.isHistory = false;
|
|
// this.wwebViewContent.nameAndType = inputText;
|
|
uni.hideKeyboard()
|
|
this.getEquipAccount({
|
|
nameAndType:inputText
|
|
});
|
|
}else{
|
|
this.isHistory = true;
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '请输入搜索设备编号或设备名称',
|
|
success: res => {}
|
|
})
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.history-title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 20upx 30upx;
|
|
padding-bottom: 0;
|
|
font-size: 34upx;
|
|
color: #333;
|
|
}
|
|
.history-title .uni-icon {
|
|
font-size: 40upx;
|
|
}
|
|
.history-content {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 15upx;
|
|
}
|
|
.history-item {
|
|
padding: 4upx 35upx;
|
|
border: 1px #f1f1f1 solid;
|
|
background: #fff;
|
|
border-radius: 50upx;
|
|
margin: 12upx 10upx;
|
|
color: #999;
|
|
}
|
|
.history-list-box {
|
|
/* margin: 10upx 0; */
|
|
}
|
|
.history-list-item {
|
|
padding: 30upx 0;
|
|
margin-left: 30upx;
|
|
border-bottom: 1px #EEEEEE solid;
|
|
font-size: 28upx;
|
|
}
|
|
|
|
.no-data {
|
|
text-align: center;
|
|
color: #999;
|
|
margin: 100upx;
|
|
}
|
|
</style>
|