province-uniapp-qinghai-ipad/pages/fireFighting/index.vue

<template>
	<view class="content">
		<u-form :model="queryData" ref="uForm">
			<u-row>
				<u-col span="4">
					<u-form-item label="报警类型" label-width="80px">
						<u--input placeholder="请输入报警类型" border="surround" v-model="queryData.alarmType" />
					</u-form-item>
				</u-col>
				<u-col span="3">
					<u-form-item>
						<u-button type="primary" @click="queryPageDetails">查询</u-button>
						<u-button type="info" @click="reset">重置</u-button>
					</u-form-item>
				</u-col>
			</u-row>
		</u-form>
		<view class="tableBox">
			<uni-table border stripe emptyText="暂无更多数据" :loading="this.loading">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center" width="60">序号</uni-th>
					<uni-th align="center">报警单位</uni-th>
					<uni-th align="center">报警类型</uni-th>
					<uni-th align="center">报警时间</uni-th>
					<uni-th align="center">报警位置</uni-th>
					<uni-th align="center">报警等级</uni-th>
					<uni-th align="center">处置状态</uni-th>
					<uni-th align="center" width="170">操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item,index) in tableData" :key="item.id">
					<uni-td align="center" width="60">{{index + 1}}</uni-td>
					<uni-td align="center">{{item.alarmUnit}}</uni-td>
					<uni-td align="center">{{item.alarmType}}</uni-td>
					<uni-td align="center">{{item.alarmTime}}</uni-td>
					<uni-td align="center">{{item.alarmLocation}}</uni-td>
					<uni-td align="center">{{item.alarmLevel}}</uni-td>
					<uni-td align="center" class="processed"
						:class="{'untreated':item.status == 0}">{{item.status == 0?"未处理":"已处理"}}</uni-td>
					<uni-td align="center">
						<u-button size='mini' type='primary' @click="lookDetails('look',item.id)">查看</u-button>
						<u-button v-if="item.status == 0" size='mini' type='success'
							@click="lookDetails('manage',item.id)">处理</u-button>
					</uni-td>
				</uni-tr>
			</uni-table>
			<uni-pagination show-icon="true" :total="queryData.total" :current="queryData.current"
				@change="changePage" />
		</view>
	</view>
</template>

<script>
	import * as api from "@/api/fireFighting.js"
	export default {
		data() {
			return {
				queryData: {
					total: 0,
					size: 10,
					current: 1,
				},
				loading: false,
				tableData: []
			}
		},
		onLoad() {
			this.queryPageDetails()
		},
		methods: {
			queryPageDetails() {
				this.loading = true
				api.queryData(this.queryData).then(res => {
					this.tableData = res.data.records
					this.queryData.total = res.data.total
					this.loading = false
				})
			},
			changePage(page) {
				this.queryData.current = page.current
				this.queryPageDetails()
			},
			lookDetails(type, id) {
				if (type == 'look') {
					uni.navigateTo({
						url: `/pages/fireFighting/details?id=${id}`
					})
				} else {
					uni.showModal({
						title: '提示',
						type: 'success',
						content: '确认处理该条智慧消防报警？',
						success: (val) => {
							if (val.confirm) {
								api.manageMatter({
									id,
									status: 1
								}).then(res => {
									this.queryPageDetails()
									uni.showToast({
										title: '成功提示',
										//将值设置为 success 或者直接不用写icon这个参数
										icon: 'success',
										//显示持续时间为 2秒
										duration: 2000
									})
								})
							}
						}
					});
				}

			},
			reset() {
				this.queryData = {
					total: 0,
					size: 10,
					current: 1,
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		margin: 10px 20px;

		/deep/.u-form {
			margin-bottom: 20px;

			.u-form-item {
				.u-button {
					width: 80px;
					height: 35px;
					margin: 0 5px;
				}
			}
		}

		.tableBox {
			.uni-table {
				.uni-table-td {
					.u-button {
						width: 60px;
						float: left;
						margin: 0 5px;
					}


				}

				.processed {
					font-weight: bold;
					color: #67C23A;
				}

				.untreated {
					font-weight: bold;
					color: #F56C6C;
				}
			}

			.uni-pagination {
				float: right;
				margin: 10px 0;
			}
		}
	}
</style>