jq_miniApp/subPackWork/emergencyPlan/emergencyPlan.vue

<template>
	<view class="v-page">
		<view class="v-page-top v-p-b8">
			<view class="contain row">
				<uni-search-bar class="v-search-bar flex-auto" @confirm="search" :focus="true" v-model="searchValue"
					cancelButton="none" @clear="clear"></uni-search-bar>
				<button class="v-search-btn v-m-l8" size="mini" @click="popup.filter = true">
					<image class="icon" src="@/static/images/icons/icon-filter.svg"></image>
					筛选
				</button>
			</view>
			<filter-popup :data="filterData" :form.sync="filterForm" v-model="popup.filter" title="全部筛选"
				height="1104rpx" @finsh="subFinsh"></filter-popup>

		</view>
		<view class="v-card contain" style="padding-top: 80rpx;">
			<movable-refresh ref="movableRefresh" :scrollHeight="scrollHeight" :noMore="noMore" @refresh="refresh"
				@loadMore="loadMore" @="">
				<view @click="goDetail(item.id)" class="v-card-item" v-for="(item, index) in list">
					<view class="v-card-box">
						<text class="v-card-state v-state" :class="
									item.eventGradeName == '红色'
										? 'err-state'
										: item.eventGradeName == '橙色'
										? 'war-state'
										: item.eventGradeName == '黄色'
										? 'normal-state'
										: item.eventGradeName == '蓝色'
										? 'succ-state'
										: ''
								">
							{{ item.eventGradeName | level }}
						</text>
						<view class="v-card-title"> {{ item.name }} </view>
						<view class="v-card-tip"><text
								class="v-card-tip-txt">{{ item.classificationName || '-' }}</text>
						</view>
						<view class="v-card-detail v-m-t8">
							<view class="v-ellipsis2"><text
									class="">预案说明：</text>{{ item.description || '-' }}
							</view>
						</view>
					</view>
				</view>
			</movable-refresh>
		</view>
	</view>
</template>

<script>
	import FilterPopup from '@/components/filter-popup/filter-popup';
	import movableRefresh from '@/components/zyq-movableRefresh/zyq-movableRefresh.vue';
	import {
		getEmergencyPlanData,
		getEmergencyPlanDetail,
		getEventTypeData
	} from '@/api/word/emergencyPlan.js'
	import {
		getDicts
	} from '@/api/system/dict/data.js'
	export default {
		components: {
			FilterPopup,
			movableRefresh
		},
		data() {
			return {
				popup: {
					filter: false
				},
				//筛选表单数据
				filterData: [{
						children: false, //是否有子项
						title: '事件类型',
						key: 'intention_type', //键名 接收对象名字
						keyValue: 'value', //获取的值是哪个
						isRadio: true, //是否单选 否则多选
						data: []
					},
					{
						children: false, //是否有子项
						title: '等级',
						key: 'is_bind_phone', //键名 接收对象名字
						keyValue: 'value', //获取的值是哪个
						isRadio: true, //是否单选 否则多选
						data: []
					}
				], //筛选数据
				filterForm: {}, //选中的表单
				searchValue: '', //查询名称
				list: [],
				scrollHeight: 300,
				noMore: false,
				level: '', // 事件等级
				eventType: '', //事件类型 
				page: 1,
			};
		},
		filters: {
			level(val) {
				switch (val) {
					case '红色':
						return '重大风险';
						break;
					case '橙色':
						return '较大风险';
						break;
					case '黄色':
						return '一般风险';
						break;
					case '蓝色':
						return '低风险';
						break;
				}
			}
		},
		onLoad() {
			let system = uni.getSystemInfoSync();
			this.scrollHeight = system.windowHeight - system.statusBarHeight - 50

			console.log(this.scrollHeight);
			// 事件级别
			this.getPalnLevel();
			//事件类型
			this.getEmergencyPlanEventType();
			//应急预案数据
			this.getEmergencyPlanData();
			//	this.refresh();
		},
		methods: {
			goDetail(id) {
				uni.navigateTo({
					url: 'emergencyPlanDetail?id=' + id
				})
			},
			readyPull() {
				this.$refs.movableRefresh.runRefresh();
			},
			onScroll(scrollTop) {
				this.scrollTop = scrollTop;
			},
			refresh() {
				this.noMore = false;
				this.list = [];
				this.page = 1
				this.getEmergencyPlanData()
				if (this.$refs.movableRefresh) {
					let that = this;
					setTimeout(function() {
						that.$refs.movableRefresh.endLoad(); //刷新结束
					}, 1000);
				}
			},
			loadMore() {
				if (this.noMore) {
					return;
				}
				this.page++;
				this.getEmergencyPlanData();

			},
			// 获取应急预案列表
			getEmergencyPlanData() {
				let data = {
					"name": this.searchValue,
					"tabType": 1, // 接口要求传默认 1
					"type": this.eventCode,
					"pageNum": this.page,
					"pageSize": 10,
					"level": this.level
				}
				getEmergencyPlanData(data).then(res => {
					if (res.code === 200) {
						res.rows.forEach(item => {
							this.list.push(item)
						})
						if (this.list.length == res.total) {
							this.noMore = true;
						}
					}
				})
			},
			//应急预案类型
			getEmergencyPlanEventType() {
				getEventTypeData().then(res => {
					if (res.code === 200) {
						res.data.forEach(item => {
							let data = {
								value: item.classificationCode,
								title: item.classificationName
							}
							this.filterData[0].data.push(data)
						})
					}
				})
			},
			// 事件等级
			getPalnLevel() {
				getDicts('preplan_grade').then(res => {
					if (res.code === 200) {
						res.data.forEach(item => {
							let data = {
								value: item.dictValue,
								title: item.dictLabel
							}
							this.filterData[1].data.push(data)
						})

					}
				})
			},
			// 筛选选中值
			subFinsh(val) {
				if (val.intention_type) {
					this.eventCode = val.intention_type[0]
				}
				if (val.is_bind_phone) {
					this.level = val.is_bind_phone[0]
				}
				this.list = [];
				this.page = 1;
				this.noMore = false;
				this.getEmergencyPlanData()
			},
			search(val) {
				console.log(val)
				this.page = 1;
				this.list = [];
				this.noMore = false;
				this.getEmergencyPlanData();
			},
			// 搜索框清除
			clear(res) {
				this.page = 1;
				this.list = [];
				this.searchValue = '';
				this.noMore = false;
				this.getEmergencyPlanData();
			},
		}
	};
</script>

<style lang="scss" scoped>
</style>