integrated_traffic_uniapp/pages/application/limit-space/limit-space-list.vue

279 lines
7.3 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view>
<cu-custom bgColor="bg-gradual-blueness" :isBack="true" :isRingt="true">
<block slot="backText">返回</block>
<block slot="content">受限空间台账</block>
<block slot="right">
<view @click="$noMultipleClicks(goToAdd)"></view>
</block>
</cu-custom>
<view class="select-fixed top-fixed">
<view class="cu-bar search bg-white">
<view class="search-form radius">
<text class="cuIcon-search"></text>
<input @input="InputBlur" placeholder="请输入关键字"
confirm-type="search"></input>
</view>
<view class="action">
<button class="cu-btn bg-green shadow-blur radius" @click="getQuery"></button>
</view>
</view>
<view class="line"></view>
</view>
<scroll-view class="dy-scroll" @scrolltolower="scrolltolower" scroll-y :style="'top:'+sTop+'px;height:calc(100vh - '+totalHeight+'px)'">
<view v-if="list.length>0" >
<view class="dy-list">
<view v-for="(item,index) of list" :key="index" :data-id="item.LIMITSPACE_ID" @click="$noMultipleClicks(goToDetail,item.LIMITSPACE_ID)" class="dy-list-item p20">
<view class="dy-title-flex align-center">
</text>{{item.NUMBER}} {{item.NAME}}</text>
</view>
<view class="dy-subtitle-flex">
<text>受限空间类型:{{item.LIMITSPACETYPENAME}}</text>
<text>风险等级:{{item.RISKGRADENAME}}</text>
</view>
<view class="dy-subtitle-flex">
<text>责任人:{{item.PRINCIPALNAME}}</text>
<text>填报日期:{{item.COMPILETIME}}</text>
</view>
</view>
<!-- <view class="dy-list-item p201 arrow" v-for="i in list" @click="goToDetail(i)">
<view class="dy-title-flex">
<text>部位名称:{{i.PARTSNAME}}</text>
<text v-if="i.LEVELID=='levelA'"class="bg-red light cu-tag radius">重大风险/A级</text>
<text v-else-if="i.LEVELID=='levelB'"class="bg-orange light cu-tag radius">较大风险/B级</text>
<text v-else-if="i.LEVELID=='levelC'"class="bg-yellow light cu-tag radius">一般风险/C级</text>
<text v-else-if="i.LEVELID=='levelD'"class="bg-blue light cu-tag radius">低风险/D级</text>
</view>
<view class="dy-subtitle">
<text>风险单元:{{i.RISKUNITNAME}}</text>
</view>
<view class="dy-subtitle">
<text>管控部门:{{i.DEPT_NAME}}</text>
</view>
</view> -->
</view>
</view>
<view v-else-if="dataFlag=='noData'" class="dy-null">
<view class="dy-null-img">
<image :src="background[dataFlag].url" mode=""></image>
</view>
<view class="dy-null-title">
{{background[dataFlag].msg}}
</view>
</view>
<view class="cu-tabbar-height"></view>
</scroll-view>
</view>
</template>
<script>
import {
basePath,corpinfoId,loginSession,loginUser
} from '@/common/tool.js';
import tkiTree from "@/components/select-tree/select-tree.vue"
export default {
components: {
tkiTree
},
data() {
return {
showRight: false,
dataFlag:'noData',
sTop:0,
totalHeight:0,
list:[],//返回数据
page:1,//分页参数--页数
rows:10,//分页参数--每页数据条数
totalCount:0,//分页参数--初始化页数
isEnd:false,//防止多次刷新
totalPage:0,//分页参数--分页数量
NameLikes : '',
noClick:true,
}
},
onReady() {
console.info(11)
let that=this;
let CustomBar = this.CustomBar;
uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
success(res) { //成功回调函数
let titleH=uni.createSelectorQuery().select(".top-fixed"); //想要获取高度的元素名class/id
titleH.boundingClientRect(data=>{
that._data.sTop=data.height //计算高度:元素高度=窗口高度-元素距离顶部的距离data.top
that.totalHeight = data.height+CustomBar
}).exec()
}
})
},
onLoad() {//页面第一次加载时触发,从跳转页面返回时不能触发,可以传递参
},
onShow() {
//页面显示或从后台跳回小程序时显示此页面时触发,从跳转页面返回时触发,不能传递参数
var _this = this;
_this.background = require('@/common/background.json');
_this.showCount = -1;
_this.currentPage = 1;
_this.list = [];
_this.isEnd = false;
_this.getDate();
// _this.getDept();
loginSession();
},
methods: {
//跳转事件
goToDetail(e) {
uni.navigateTo({
url: '/pages/application/limit-space/limit-space-detail?LIMITSPACE_ID='+e
});
},
goToAdd(){
uni.navigateTo({
url: '/pages/application/limit-space/limit-space-detail'
});
},
getQuery(){ //搜索按钮事件
var _this = this;
_this.showCount = -1;
_this.currentPage = 1;
_this.list = [];
_this.isEnd = false;
_this.getDate();
},
InputBlur(e){
this.NameLikes = e.detail.value
},
// 显示树形选择器
showDeptTree() {
// this.isUps=true
this.$refs.tkiTree._show();
},
// 打开窗口
showDrawer(e) {
this.$refs[e].open()
},
// 关闭窗口
closeDrawer(e) {
this.$refs[e].close()
},
// 抽屉状态发生变化触发
change(e, type) {
this[type] = e
},
// 滑动到底方法
scrolltolower(){
var _this = this;
_this.showCount = -1;
_this.currentPage = _this.currentPage + 1;
_this.isEnd = false;
if(_this.totalPage >= _this.currentPage){
_this.getDate();//开始分页查询
}
},
getDate(){
var _this = this;
if (_this.isEnd) {
return
}else{
this.isEnd =true;
}
uni.showLoading({
title:"加载中..."
});//加载中动画
uni.request({
url: basePath +'/app/limitspace/list?showCount='+_this.showCount+'&currentPage='+_this.currentPage ,
method: 'POST',
dataType: 'json',
header: {
'Content-type':'application/x-www-form-urlencoded'
},
data: {
tm:new Date().getTime(),
KEYWORDS : _this.NameLikes, //关键字模糊查询
CORPINFO_ID:loginUser.CORPINFO_ID,
USER_ID:loginUser.USER_ID,
},
success: (res) => {
uni.hideLoading();//结束加载中动画
if (res.data != null) {
_this.totalPage = res.data.page.totalPage;
if(_this.list.length == 0){
_this.list = res.data.varList;
}else{
if(res.data.varList != null){
_this.list2 = res.data.varList;
_this.list = _this.list.concat(_this.list2);
}
}
}
}
})
},
}
}
</script>
<style>
.dy-card {
background-color: #fff;
border-radius: 10upx;
margin: 30upx
}
.dy-card-title {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #eee;
min-height: 80upx;
line-height: 80upx;
padding: 0 30upx;
}
.dy-card-content {
padding: 0upx 30upx 30upx;
}
.dy-card-content-item {
margin-top: 20upx;
}
.dy-card-content-item .title {
display: flex;
align-items: center;
}
.dy-card-content-item .title .l {
width: 10upx;
height: 30upx;
border-radius: 20upx;
background-color: #666;
margin-right: 10upx;
}
.dy-card-content-item .content {
background-color: #F1F1F1;
padding: 10upx 14upx;
margin-top: 14upx;
line-height: 1.6;
}
.dy-card-content-item .name text {
background-color: #F1F1F1;
padding: 10upx 14upx;
margin-top: 14upx;
line-height: 1.6;
display: inline-block;
}
.dy-card-foot {
border-top: 1px solid #eee;
padding: 30upx;
}
</style>