ybxf-security-uniapp/pagesA/fire/unit_info/index.vue

<template>
	<view class="uni-container uni-container-bg">
		<!-- 搜索框 -->
		<!-- 		<uni-row class="demo-uni-row padding-tb-sm" :gutter="20" width="100%">
			<uni-col :span="24">
				<view class="u-page__tag-item">
					<u-search :showAction="true" placeholder="请输入单位名称" bgColor="#edf6f9" borderColor="#4cb2b6"
						v-model="keyword" :show-action="false" @custom="search(keyword)" @search="search(keyword)">
					</u-search>
				</view>
			</uni-col>
		</uni-row> -->
		<!-- 卡片栏 -->
		<view class="" v-if="tableData.length>0 && isLoaded">
			<uni-card v-for="(item, index) in tableData" :key="index">
				<!-- 标题 -->
				<view class="titles">{{ item.orgName }}</view>
				<!-- 简要内容 -->
				<view style="display: flex;margin-bottom: 15rpx; color: #728f90;">
					<text class="name-align-daily">单位地址：</text>
					<text class="conts">{{ item.dwdz }}</text>
				</view>
				<view style="display: flex;margin-bottom: 15rpx; color: #728f90;">
					<text class="name-align-daily">单位电话：</text>
					<text class="conts">{{ item.dwdh }}</text>
				</view>
				<view style="display: flex;margin-bottom: 15rpx; color: #728f90;">
					<text class="name-align-daily">负责人：</text>
					<text class="conts max-width">{{ item.orgCharge	 }}</text>
				</view>
				<!-- 删除按钮 -->
				<view class="an-niu" @click.native="showModal(item)">
					<!-- @click.native="onClickDel(item)" -->
					<view class="detailDel">删除</view>
				</view>
				<view class="an-niu" @click.native="onClick(item)" link>
					<text class="detail">查看详情</text>
				</view>
				<view class="an-niu" @click.native="onClickReport(item)" link><text class="operation">维保报告</text></view>
			</uni-card>
		</view>
		<!-- tableData为空时显示  -->
		<view v-else-if="tableData.length==0 && isLoaded" style="text-align: center;">
			<view class="text-gray" style="padding-top: 20px;">
				<img :src="tan90" alt="暂无数据" />
			</view>
		</view>
		<!-- 新增 -->
		<!-- <view>
			<image :src="Group" @click="addClick" class="tiantupian"></image>
		</view> -->
		<u-modal :show="show" @confirm="confirm" @cancel="cancel" @close="close" asyncClose closeOnClickOverlay
			showCancelButton confirmColor="red" :title="title" :content='content' ref="uModal" :asyncClose="true">
		</u-modal>
		<!-- 加载中 -->
		<isLodingModel></isLodingModel>
	</view>
</template>
<script>
	var that = ''
	import {
		getUnit, //获取单位信息列表
		delUnit //删除单位信息
	} from '@/api/unit_info';
	import config from '@/config'
	const baseUrlImg = config.baseUrlImg
	export default {
		data() {
			return {
				isLoaded: false,
				Group: `${baseUrlImg}/checkActive/Group.png`,
				orgId: '',
				// 数据
				tableData: {

				},
				subData: {
					pageSize: 10,
					pageNo: 1,
					userId: ''
				},
				title: '是否删除该数据项?',
				content: '确认删除？',
				id: '',
				tan90: `${baseUrlImg}/tan90.png`,
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageNo: 1,
				// 数据总量
				total: 0,
				// tableData数据加载中
				loading: false,
				// 初始化时搜索框的值
				keyword: '',
				// 开始时间与结束时间
				formData: {
					start: '请选择开始时间',
					end: '请选择结束时间'
				},
				show: false,
				showtimeStart: false,
				showtimeEnd: false
			};
		},
		// 在 vue页面，向起始页通过事件传递数据
		onLoad: function(option) {
			// this.getData(1);
		},
		watch: {
			loading: {
				handler(newLength, oldLength) {
					this.$modal.isLoadingModel(this.loading)
				},
				immediate: true
			}
		},
		onShow() {
			this.tableData = []
			this.getData(1)
		},
		onReady() {},
		mixins: [uni.$u.mixin],
		methods: {
			search(val) {
				this.isLoaded = false
				this.loading = true
				this.tableData = []
				this.getData(1)
			},
			//维保报告
			onClickReport(item) {
				this.isLoaded = false
				uni.navigateTo({
					url: `/pagesA/fire/unit_info/org_report/org_report?dwid=${item.dwid}`
				});
			},
			// 模态框内容
			showModal(val) {
				this.show = true;
				this.id = val.id;
			},
			confirm() {
				this.show = false;
				delUnit({
					id: this.id
				}).then(response => {
					this.loading = true;
					this.isLoaded = false
					this.tableData = []
					this.getData();
					// this.tableData = response.data;
					console.log(this.tableData, '获取单位信息详细信息获取单位信息详细信息获取单位信息详细信息获取单位信息详细信息');
				});
			},
			close() {
				this.show = false;
				console.log('close');
			},
			cancel() {
				this.show = false;
				console.log('cancel');
			},
			//查看详情
			addClickDetail(val) {
				this.isLoaded = false
				uni.navigateTo({
					url: `/pagesA/fire/unit_info/add_unit_info/add_unit_info?item=${JSON.stringify(val)}`
				});
			},

			// 获取数据
			getData(pageNo, value = '') {
				this.loading = true;
				this.subData.userId = this.$store.state.user.id
				var jsdata = JSON.stringify(this.subData);
				console.log(jsdata, 'jsdatajsdatajsdata');
				// 提交数据
				getUnit(jsdata).then(res => {
					if (res.code === 0) {
						this.isLoaded = true
						this.tableData = [...this.tableData, ...res.data]
						this.loading = false
						// this.tableData = res.data
					} else {
						console.log('数据请求错误！');
					}
				});
			},

			// 传递数据
			onClick(val) {
				this.isLoaded = false
				console.log(val, 'val');
				uni.navigateTo({
					url: '/pagesA/fire/unit_info/unit_info_details/unit_info_details?id=' + val.id,
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						acceptDataFromOpenedPage: function(val) {
							console.log(val, '打开页面传送到当前页面的数据');
						}
					},
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', val);
					}
				});
			},

			// 删除单位单位信息
			onClickDel(val) {
				this.id = val.id;
				console.log(this.id);
				delUnit({
					id: this.id
				}).then(response => {
					this.tableData = []
					this.getData();
					console.log(this.tableData, '获取单位信息详细信息获取单位信息详细信息获取单位信息详细信息获取单位信息详细信息');
				});
			},
			addClick() {
				this.isLoaded = false
				uni.navigateTo({
					url: '/pagesA/fire/unit_info/add_unit_info/add_unit_info'
				});
			},
			// 触底的事件
			onReachBottom() {
				// 判断是否还有下一页数据
				if (this.pageNo * this.pageSize >= this.total)
					return uni.showToast({
						title: `数据加载完毕`
					});
				// 判断是否正在请求其它数据，如果是，则不发起额外的请求
				if (this.loading) return;
				this.pageNo += 1;
				this.getData(this.pageNo);
			},
			search() {
				// 		var jsdata = JSON.stringify(this.subData);
				// 	getUnit({
				// 		pageNo: this.pageNo,
				// 		pageSize: this.pageSize,
				// 		meetingId: this.keyword
				// 	}).then(res => {
				// 		if (res == '') {
				// 			this.$refs.uToast.show({
				// 				type: 'success',
				// 				title: '未检索到该会议！'
				// 			});
				// 		} else {
				// 			this.tableData = res.data;
				// 		}
				// 		this.formData = res.list;
				// 	});
			},


			//日期范围
			// 开始日期
			confirmStarttime(e) {
				this.showtimeStart = false;
				console.log(e.value, e.mode);
				let value = new Date(e.value);
				this.formData.start = uni.$u.timeFormat(e.value, 'yyyy/mm/dd');
			}
		}
	};
</script>
<style lang="scss" scoped>
	body {
		background-color: #f5f7f9;
	}

	page {
		background-color: #f5f7f9;
	}

	/deep/ .u-tabs__wrapper[data-v-0de61367],
	/deep/ .u-tabs__wrapper.data-v-0de61367,
	/deep/ .u-tabs__wrapper {
		width: 99%;
	}

	/deep/.u-tabs__wrapper__nav__item[data-v-0de61367],
	/deep/.u-tabs__wrapper__nav__item.data-v-0de61367,
	/deep/.u-tabs__wrapper__nav__item {
		padding: 0 60rpx;
	}

	.uni-container {
		padding-right: 20upx;
	}

	.addInsp {
		width: 40px;
		position: fixed;
		right: 4px;
		z-index: 99999;
	}

	::v-deep .u-icon__icon {
		margin-right: 0px !important;
	}

	.an-niu {
		float: right;
		font-size: 10px;
		text-align: center;
		display: flex;
		// margin-top: -64upx;
		padding-bottom: 30rpx;
		// margin-top: 50rpx;
		color: #fff;

		.detail {
			width: 72px;
			height: 60rpx;
			border-radius: 30px;
			background-color: #f7c41e;
			margin-right: 20rpx;
			text-align: center;
			line-height: 60rpx;
		}

		.detailDel {
			width: 60px;
			height: 60rpx;
			border-radius: 30px;
			background-color: #ff2e31;
			color: white;
			margin-right: 20rpx;
			text-align: center;
			line-height: 60rpx;
			font-size: 30upx;
		}

		.solve {
			width: 62px;
			height: 60rpx;
			margin-right: 20rpx;
			border-radius: 30px;
			background-color: #4cb2b6;
			line-height: 60rpx;
		}

		.deletes {
			width: 62px;
			height: 60rpx;
			border-radius: 60rpx;
			background-color: red;
			color: #fff;
			line-height: 60rpx;
		}
	}

	/deep/.segmented-control__item--button {
		background-color: rgb(76, 178, 182) !important;
	}

	/deep/.segmented-control__item--button--active {
		background-color: #ffffff !important;
	}

	/deep/.uni-card {
		box-shadow: 0px 0px 3px 0px rgba(86, 165, 168, 0.63) !important;
		border-radius: 30rpx;
	}

	.tiantupian {
		width: 110rpx;
		height: 110rpx;
		position: fixed;
		right: 15px;
		bottom: 80rpx;
	}

	//列表样式
	.titles {
		font-weight: 600;
		margin-bottom: 10rpx;
		color: #1E293B;
		font-size: 30rpx;
	}

	.conts {
		max-width: 470rpx;
		display: -webkit-box;
		/*弹性伸缩盒子模型显示*/
		-webkit-box-orient: vertical;
		/*排列方式*/
		-webkit-line-clamp: 1;
		/*显示文本行数*/
		overflow: hidden;
		/*溢出隐藏*/
		color: #274647;
		text-overflow: ellipsis;
		/*不知道干嘛的*/

		.conts-title {
			margin-right: 10rpx;
			color: #728f90;
		}
	}

	.max-width {
		max-width: 180upx;
	}

	.operation {
		padding: 0 20rpx;
	}

	.operation {
		width: 62px;
		height: 60rpx;
		margin-right: 20rpx;
		border-radius: 30px;
		background-color: #4cb2b6;
		line-height: 60rpx;
	}
</style>