emergencyManagement/packageA/pages/reporting/index.vue

<template>
	<view class="page-wrap">
		<view class="search-wrap">
			<uni-search-bar class="search" @confirm="search" v-model="keywords" @clear="search"></uni-search-bar>
			<uni-data-select class="select"   v-model="reportingTypeId" :localdata="types" placeholder="请选择类别" @change="search"></uni-data-select>
		</view>
		<view class="addbt" @click="handle({type:'add'})">
			<view class="word">事件上报</view>
		</view>
		<view class="pageMain">
			<uni-swipe-action class="item-action-box">
				<uni-card padding="10px 0" margin="5px 0" v-for="item in items" :key="item.reportingId">
					<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.reportingSubject}}</view>									
							</view>
							<view class="tagbox">								
								<uni-tag :text="item.reportingTypeTitle" custom-style="background-color: #ecf5ff; border-color: #d9ecff; color: #409eff;"></uni-tag>								
							</view>
							<view class="icon-item">
								<image class="icon" src="/static/images/time.png" mode="widthFix"></image>
								<text class="word">{{item.reportingTime}}</text>
							</view>	
							<view class="icon-item">
								<image class="icon" src="/static/images/admin_icon.png" mode="widthFix"></image>
								<text class="word">{{item.reportingGroupName}}</text>
							</view>	
						</view>
					</uni-swipe-action-item>
				</uni-card>
			</uni-swipe-action>
		</view>
		<Detail ref="detail"></Detail>
		<Edit ref="edit" @success="search"></Edit>	
		<Report ref="report" @success="search"></Report>			
	</view>
</template>

<script>
	import reportingApi from '@/api/reporting.js'
	import Report from './components/Report.vue'
	import Detail from './components/Detail.vue'
	import Edit from './components/Edit.vue'	
	export default {
		components:{
			Report,
			Detail,
			Edit
		},
		computed:{
			types(){
				return this.reportingTypes.map(item=>{
					return{
						...item,
						value:item.reportingTypeId,
						text:item.reportingTypeTitle
					}
				})
			}
		},
		data() {
			return {
				items:[],
				reportingTypes:uni.getStorageSync('reportingTypes')||[],
				page:1,	
				limit:10,
				total:0,	
				keywords:""	,
				reportingTypeId:undefined
			}
		},
		onShow() {
			this.init()
			this.getData()
		},
		methods: {
			init(){
				if(!uni.getStorageSync('reportingTypes')){
					reportingApi.getTypeByList().then((res)=>{
						uni.setStorageSync('reportingTypes',res.data)
						this.reportingTypes=res.data
					})
				}
			},
			search(){
				this.resetFilter()
				this.getData()
			},
			getData(){
				const items=JSON.parse(JSON.stringify(this.items))
				let params={
					page:this.page,
					limit:this.limit,
					keywords:this.keywords,
				}
				if(this.reportingTypeId){params.reportingTypeId=this.reportingTypeId}
				reportingApi.getByPage(params).then((res)=>{
					this.items=items.concat(res.data)
					this.total=res.total
				})
			},
			handle({type,item}){
				const self=this;
				if(type==='del'){
					uni.showModal({
						title: '提示',
						content: '是否确定删除',
						success: function (res) {
							if (res.confirm) {
								reportingApi.deleteById(item.reportingId).then(()=>{
									uni.showToast({
										title:'删除成功！',
										icon:'none'
									})
									self.resetFilter()
									self.getData()
								})
					
							}
						}
					});
				}else{
					if(type==='detail'){
						this.$refs.detail.show(item)
					}
					if(type==='edit'){
						this.$refs.edit.show({type:"edit",item})
					}
					if(type==='add'){
						this.$refs.report.show()
					}
				}
			},
			resetFilter(){
				this.page = 1
				this.limit = 10
				this.total = 0
				this.items=[]
			}
		},
		onReachBottom() {
			if(this.total>this.limit*this.page){
				this.page++
				this.getData()				
			}
		}
	}
</script>
<style lang="scss" scoped>
.page-wrap{
	padding:0 20rpx;
	.search-wrap{
		margin: 5px 0;
		padding: 0 5px;
		box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.08);
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		background-color: #fff;
		.search{
			flex: 1;
		}
		.select{
			width: 240rpx;
			margin-top: 10rpx;
			flex-shrink: 0;
			margin-left: 10rpx;
		}
	}
	.addbt{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		color: #fff;
		background-color: rgba(64,158,255,0.7);			
		box-shadow:0 0 10rpx rgba(0,0,0,0.4);
		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;
		}
	}
	.pageMain{
		margin-top: 20rpx;
		background-color: #f5f5f5;
		padding-bottom: 50rpx;
		.item{
			.title{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.name{
					font-size: 36rpx;
					color: #222222;
					font-weight: 500;
				}
				.num{
					font-size: 32rpx;
					color: #424242;
				}
			}
			.tagbox{
				font-size: 24rpx;
				color: #666666;
				padding: 14rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.location{
				display: flex;
				align-items: center;
			}
			.bottom{
				.time{
					font-size: 24rpx;
					color: #666666;
				}
			}
			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;
				}
			}
		}
		.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;
				}
			}
		}
	}
}
</style>