province-uniapp-qinghai-ipad/pages/queryStatistics/emergencyInfo/index.vue

<template>
	<view class="content">
		<u-form :model="queryData" ref="uForm">
			<u-row>
				<u-col span="5">
					<u-form-item label="企业名称" label-width="80px">
						<u--input placeholder="请输入企业名称" border="surround" v-model="queryData.enterpriseName" />
					</u-form-item>
				</u-col>
				<u-col span="5">
					<u-form-item label="企业类型" label-width="80px">
						<uni-data-select placeholder="请选择企业类型" v-model="queryData.type" :localdata="range" />
					</u-form-item>
				</u-col>
				<u-col span="2">
					<u-form-item>
						<u-button type="primary" @click="getTableData">查询</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-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.cityState}}</uni-td>
					<uni-td align="center">{{item.enterpriseName}}</uni-td>
					<uni-td align="center">{{item.enterpriseContact}}</uni-td>
					<uni-td align="center">{{item.contactNumber}}</uni-td>
					<uni-td align="center">{{filtrationData(item.type)}}</uni-td>
					<uni-td align="center" width="80">
						<u-button size='mini' type='primary' @click="lookDetails(item)">查看</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/statisticalQuery.js"
	export default {
		data() {
			return {
				queryData: {
					total: 0,
					size: 10,
					current: 1,
				},
				tableData: [],
				loading: false,
				range: [{
					"value": 1,
					"text": "应急网点"
				}, {
					"value": 2,
					"text": "应急加工企业"
				}, {
					"value": 3,
					"text": "应急配送企业"
				}, {
					"value": 4,
					"text": "应急仓储企业"
				}]
			}
		},
		onLoad() {
			this.getTableData()
		},
		methods: {
			getTableData() {
				this.loading = true
				api.findEsNetworkEntryPage(this.queryData).then(res => {
					this.tableData = res.data.records
					this.queryData.total = res.data.total
					this.loading = false
				})
			},
			lookDetails(data) {
				uni.navigateTo({
					url: `/pages/queryStatistics/emergencyInfo/details?id=${data.id}&name=${data.enterpriseName}`
				})
			},
			filtrationData(code) {
				let str = ''
				this.range.map(item => {
					if (code == item.value) {
						str = item.text
					}
				})
				return str
			},
			changePage(page) {
				this.queryData.current = page.current
				this.getTableData()
			},
			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-input {
					width: 220px;
					margin-right: 10px;
				}

				.uni-select {
					height: 38px;
					font-size: 15px;
					color: #303133;

					.uni-select__input-placeholder {
						font-size: 15px;
						color: #c1c4cc;
					}
				}

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

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

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