emergencyManagement/packageA/pages/disaster/index.vue

<template>
	<view class="page-wrap">
		<view class="pageTabs">
			<uni-segmented-control :current="tabIdx" :values="tabs" style-type="text" active-color="#007aff" @clickItem="changeTab" />	
		</view>	
		<view class="head">
			<uni-card padding="0" margin="5px 0">
				<uni-search-bar @confirm="search" v-model="keywords" @clear="search"></uni-search-bar>
			</uni-card>
			<view class="addbt" @click="handle({type:'create'})">
				<view class="word"><uni-icons type="plusempty" size="30" color="#fff"></uni-icons></view>
			</view>
		</view>	
		<view class="pageMain">
			<uni-swipe-action class="item-action-box" v-if="tabIdx===0">
				<uni-card padding="10px 0" margin="5px 0" v-for="(item,idx) in items" :key="item.dlId">
					<uni-swipe-action-item class="item-action" :auto-close="true">
						<template v-slot:right>
							<view class="slot-button">
								<view class="bt edit" @click="handle({type:'edit',item})"><text class="slot-button-text">编辑</text></view>
								<view class="bt del" @click="handle({type:'del',item})"><text class="slot-button-text">删除</text></view>
							</view>
						</template>
						<view class="item" @click="handle({type:'detail',item})">
							<view class="title">
								<view class="name">{{item.dlName}}</view>
								<view class="camera">
									<uni-icons v-if='item.cameraNum>0' type="videocam-filled" size="20" color="#007aff" ></uni-icons>
								</view>								
							</view>
							<view class="item-row space-between">
								<uni-tag :text="item.disasterLevelTitle" custom-style="background-color: #ecf5ff; border-color: #d9ecff; color: #409eff;"></uni-tag>
								<uni-tag :text="item.disasterCatTitle" type="warning"></uni-tag>
							</view>
							<view class="bottom">
								<view class="item-row space-between">
									<view class="icon-item">
										<uni-icons type="person-filled" size="15" color="#999"></uni-icons>
										<text class="word">{{item.dlPeopleNum}}</text>
									</view>
									<view class="icon-item">
										<uni-icons type="home-filled" size="15" color="#999"></uni-icons>
										<text class="word">{{item.dlHouseNum}}</text>
									</view>
								</view>
								<view class="icon-item">
									<image class="icon" src="/static/images/admin_icon.png" mode="widthFix"></image>
									<text class="word">{{item.groupName}}</text>
								</view>							
							</view>
						</view>
					</uni-swipe-action-item>
				</uni-card>
			</uni-swipe-action>
			<uni-swipe-action class="item-action-box" v-if="tabIdx===1">
				<uni-card padding="10px 0" margin="5px 0" v-for="(item,idx) in items" :key="item.rdId">
					<uni-swipe-action-item class="item-action" :auto-close="true">
						<template v-slot:right>
							<view class="slot-button">
								<view class="bt edit" @click="handle({type:'edit',item})"><text class="slot-button-text">编辑</text></view>
								<view class="bt del" @click="handle({type:'del',item})"><text class="slot-button-text">删除</text></view>
							</view>
						</template>
						<view class="item" @click="handle({type:'detail',item})">
							<view class="title">
								<view class="name">{{item.rdName}}</view>	
								<view class="camera">
									<uni-icons v-if='item.cameraNum>0' type="videocam-filled" size="20" color="#007aff" ></uni-icons>
								</view>																	
							</view>
							<view class="item-row space-between">
								<view class="icon-item">
									<uni-icons type="location-filled" size="15" color="#999"></uni-icons>
									<text class="word">{{item.rdAddress}}</text>
								</view>
							</view>
							<view class="bottom">
								<view class="item-row space-between">
									<view class="icon-item">
										<uni-icons type="person-filled" size="15" color="#999"></uni-icons>
										<text class="word">{{item.respName}}</text>
									</view>
									<view class="icon-item">
										<uni-icons type="phone-filled" size="15" color="#999"></uni-icons>
										<text class="word">{{item.respPhone}}</text>
									</view>
								</view>
								<view class="icon-item">
									<image class="icon" src="/static/images/admin_icon.png" mode="widthFix"></image>
									<text class="word">{{item.groupName}}</text>
								</view>							
							</view>
						</view>
					</uni-swipe-action-item>
				</uni-card>
			</uni-swipe-action>
		</view>
		<CreateDisaster ref="disaster" @success="getData" :cats="disasterCats" :levels="disasterLevels"></CreateDisaster>
		<CreateReservoir ref="reservoir" @success="getData" :cats="disasterCats" :levels="disasterLevels"></CreateReservoir>		
		<Detail ref="detail" :type="tabIdx===0?'dl':'rd'" ></Detail>
	</view>
</template>

<script>
	import disasterApi from '@/api/disaster.js'
	import CreateDisaster from './components/CreateDisaster.vue'
	import CreateReservoir from './components/CreateReservoir.vue'
	import Detail from './components/Detail.vue'				
	export default {
		components:{
			CreateDisaster,
			CreateReservoir,
			Detail
		},
		data() {
			return {
				tabIdx:0,			
				tabs:['地质灾害点','水库淤堤坝'],
				items:[],
				keywords: "",
				disasterLevels:[],
				disasterCats:[]
			}
		},
		onShow() {
			this.getData();
			this.init()
		},
		methods: {
			changeTab({currentIndex}){
				if (this.tabIdx !== currentIndex) {
					this.tabIdx = currentIndex	
					this.getData()
				}
			},
			init(){		
				if(!uni.getStorageSync('disasterLevels')){
					disasterApi.getDisasterLevelByList().then((res)=>{
						uni.setStorageSync('disasterLevels',res.data)
						this.disasterLevels=res.data
					})
				}else{
					this.disasterLevels=uni.getStorageSync('disasterLevels')
				}
				if(!uni.getStorageSync('disasterCats')){
					disasterApi.getDisasterCatByList().then((res)=>{
						uni.setStorageSync('disasterCats',res.data)
						this.disasterCats=res.data					
					})
				}else{
					this.disasterCats=uni.getStorageSync('disasterCats')
				}
			},
			search(){
				this.getData()
			},
			getData(){
				const getDataList=this.tabIdx===0?disasterApi.getDisasterLocationByList:disasterApi.getReservoirDamByPage
				getDataList({keywords:this.keywords}).then((res)=>{
					this.items=res.data
				})
			},
			handle({type,item}){
				if(type==='detail'){					
					this.$refs.detail.show(item)
				}else if(type==='del'){
					const deleteById=this.tabIdx===0?disasterApi.deleteDisasterLocationById:disasterApi.deleteReservoirDamById;
					const id=this.tabIdx===0?item.dlId:item.rdId
					uni.showModal({
						title: '提示',
						content: '是否确定删除',
						success: function (res) {
							if (res.confirm) {
								deleteBoundById(id).then(()=>{
									uni.showToast({
										title:'删除成功！',
										icon:'none'
									})
									self.getData()
								})					
							}
						}
					});					
				}else{
					if(this.tabIdx===0){
						this.$refs.disaster.show(type,item)	
					}else{
						this.$refs.reservoir.show(type,item)	
					}									
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.page-wrap{
	padding:0 20rpx;
	.pageTabs{
		background-color: #fff;
	}
	.head{
		margin-top: 20rpx;
		.handle{
			display: inline-block;
			// background-color: #007aff;
			color: #777777;
			text-align: center;
			padding:16rpx 20rpx;
			border-radius: 30rpx;
			// border: 1px solid #007aff;
			font-size: 28rpx;
			line-height: 1;
			box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
		}
		.addbt{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			color: #fff;
			background-color: rgba(64,158,255,0.6);			
			box-shadow:0 0 10rpx rgba(0,0,0,0.6);
			position: fixed;
			right: 10rpx;
			bottom: 20%;
			z-index: 99;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			.word{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin: 5rpx auto;
				font-size: 28rpx;
				letter-spacing: 2px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	.pageMain{
		margin-top: 20rpx;
		background-color: #f5f5f5;
		padding-bottom: 50rpx;
		.slot-button{
			width: 400rpx;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			color: #fff;
			padding-left: 10px;
			.bt{
				width: 50%;
				height: 100%;
				font-size: 30rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
				&.edit{
				    background-color:#007aff;
				}
				&.del{
					background-color:#F56C6C;
				}
				&.detail{
					background-color: #e6a23c;
				}
			}
		}
		.item{
			color: #666;
			.title{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.name{
					font-size: 32rpx;
					color: #222222;
					line-height: 1;
					padding-bottom: 10rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					flex: 1;
				}
				.camera{
					width: 100rpx;
					text-align: right;
					flex-shrink: 0;
				}
			}
			image{
				&.icon{
					width: 30rpx;
					height: 30rpx;
					display: block;
				}
			}
			.item-row{
				display: flex;
				align-items: center;
				padding-top: 14rpx;
				&.space-between{
					justify-content: space-between;
				}
			}
			.icon-item{
				display: flex;
				align-items: center;
				.word{
					margin-left: 8rpx;
					font-size: 24rpx;
				}
			}
		}
	}
}
</style>