IOT/SourceCode/ui/fbs-ui_app2/pages/inspector/components/handling.vue

<template>
	<view class="container">
		<Search ref="searchRef" @reset="reset" @confirm="query"></Search>
		<view class="none-data" v-if="dataList.length == 0">
			<text>没有 处理中 数据</text>
			<image src="/static/image/no-data.png"></image>
		</view>
		<scroll-view scroll-y="true" @scroll="scroll" :scroll-top="scrollTop" style="height: 540px">
			<u-swipe-action>
				<view v-if="dataList.length > 0">
					<view v-for="(item, index) in dataList" :key="index">
						<view class="alarm-box">
							<u-swipe-action-item :options="swipeOption" :name="index" @click="viewDetail(item)">
								<view class="box-header">
									<view class="box-title">{{ item.company_name }}</view>
								</view>
							</u-swipe-action-item>
							<view class="box-body">
								<view class="body-item">
									<view class="left">公司名称:</view>
									<view class="right">{{ item.company_name }}</view>
								</view>
								<view class="body-item">
									<view class="left">区域:</view>
									<view class="right">{{ item.org_name }}</view>
								</view>
								<view class="body-item">
									<view class="left">告警类型:</view>
									<view class="right">{{ item.warn_type_name }}</view>
								</view>
								<view class="body-item">
									<view class="left">处理状态:</view>
									<view class="right">{{ item.work_order_stats_name }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-swipe-action>
		</scroll-view>
		<u-modal v-model="modalDetailInfo" :show="modalDetailShow" :title="modalDetailTitle" :showCancelButton="true" @cancel="modalDetailShow = false" :showConfirmButton="showEditBtn" @confirm="confirmSubmite">
			<!-- <view class="slot-content"><rich-text :nodes="content"></rich-text></view> -->
			<view class="slot-content" style="width: 100%;">
				<scroll-view scroll-y="true" style="height: 200px;">
					<view class="modal-item">
						<view class="left">公司名称:</view>
						<view class="right">{{ modalDetailInfo.warnDetail.company_name }}</view>
					</view>
					<view class="modal-item">
						<view class="left">告警设备:</view>
						<view class="right">{{ modalDetailInfo.warnDetail.device_name }}</view>
					</view>
					<view class="modal-item">
						<view class="left">告警类型:</view>
						<view class="right">{{ modalDetailInfo.warnDetail.warn_type_name }}</view>
					</view>
					<view class="modal-item">
						<view class="left">告警时间:</view>
						<view class="right">{{ modalDetailInfo.warnDetail.warn_start_time }}</view>
					</view>
					<view v-for="(item2, index2) in modalDetailInfo.processInfoList" :key="index2" style="margin: 10px 0;border-top: 1px solid #333;">
						<view class="modal-item">
							<view class="left" v-if="item2.work_order_type == 0 || item2.work_order_type == 1">发起人:</view>
							<view class="left" v-if="item2.work_order_type == 2">督查审核:</view>
							<view class="left" v-if="item2.work_order_type == 3">督查转交:</view>
							<view class="left" v-if="item2.work_order_type == 4">现场督查:</view>
							<view class="left" v-if="item2.work_order_type == 5">企业上传:</view>
							<view class="right" v-if="item2.work_order_type == 0 || item2.work_order_type == 2 || item2.work_order_type == 3 || item2.work_order_type == 4">督查部门</view>
							<view class="right" v-if="item2.work_order_type == 1 || item2.work_order_type == 5">企业用户</view>
						</view>
						<view class="modal-item">
							<view class="left">时间:</view>
							<view class="right">{{ item2.work_order_process_time }}</view>
						</view>
						<view class="modal-item">
							<view class="left" v-if="item2.work_order_type == 0">催办内容:</view>
							<view class="left" v-if="item2.work_order_type == 1">上报备注：:</view>
							<view class="left" v-if="item2.work_order_type == 2">审核意见:</view>
							<view class="left" v-if="item2.work_order_type == 3">备注:</view>
							<view class="left" v-if="item2.work_order_type == 4">上报备注:</view>
							<view class="left" v-if="item2.work_order_type == 5">上报备注:</view>
							<view class="right" v-if="item2.work_order_type == 2">{{ item2.audit_state_name }}</view>
							<view class="right" v-if="item2.work_order_type != 2">{{ item2.content }}</view>
						</view>
						<view class="modal-item" v-if="item2.work_order_type == 2">
							<view class="left">备注:</view>
							<view class="right">{{ item2.content }}</view>
						</view>
						<view v-if="item2.picture_url" class="modal-item">
							<view class="left" v-if="item2.work_order_type == 1 || item2.work_order_type == 4 || item2.work_order_type == 5">上报文件:</view>
							<view class="right"><u--image :showLoading="true" :src="item2.picture_url"></u--image></view>
						</view>
					</view>
				</scroll-view>
				<view v-if="showEditBtn">
					<u--form>
						<u-form-item labelWidth="80px" label="上报图片"><u-upload accept="image" :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="image" :previewFullImage="true" :maxSize="1024 * 1024 * 2" multiple :maxCount="10"></u-upload></u-form-item>
						<u-form-item><u--textarea placeholder="请输入上报备注" v-model="textContent"></u--textarea></u-form-item>
					</u--form>
				</view>
			</view>
		</u-modal>
	</view>
</template>
<script>
import config from "@/common/config";
import { log } from "@/utils/base.js";
import api from "@/common/api.js";
import Search from "./search.vue";
export default {
	name: "handling",
	components: {
		Search,
	},
	data() {
		return {
			needQuery: true,
			isQuerying: false,
			dataList: [],
			fileList: [],
			search: {
				pageIndex: 1,
				pageSize: 10,
				params: {
					company_name: "",
					warn_type: "",
				},
			},
			swipeOption: [
				{
					text: "上报",
					style: {
						backgroundColor: "#4cd964",
					},
				},
			],
			scrollTop: 0,
			oldScrollTop: 0,
			modalDetailShow: false,
			modalDetailInfo: {
				warnDetail: {},
				processInfoList: [],
			},
			showEditBtn: false,
			modalDetailTitle: "上报",
			textContent: "",
			workOrderId: "",
		};
	},

	mounted() {
		this.reset();
	},
	options: { styleIsolation: "shared" },
	methods: {
		query(nextPage) {
			if (this.needQuery || !nextPage) {
				this.search.params.company_name = this.$refs.searchRef.searchInfo.company_name;
				this.search.params.warn_type = this.$refs.searchRef.searchInfo.warn_type;
				var search = JSON.parse(JSON.stringify(this.search));
				if (!search.params.company_name) {
					delete search.params.company_name;
				}
				if (!search.params.warn_type) {
					delete search.params.warn_type;
				}
				if (!nextPage) {
					this.dataList = [];
					this.needQuery = true;
					this.goTop();
				}
				api.getHandingWorkOrderByOrgLaw(search).then(({ total, rows }) => {
					if ((this.search.pageIndex - 1) * this.search.pageSize < total) {
						this.dataList.push(...rows);
						this.isQuerying = false;
					} else {
						this.needQuery = false;
					}
					log("getHandingWorkOrderByOrgLaw", search, rows, this.dataList);
				});
			}
		},
		scroll(e) {
			this.oldScrollTop = e.detail.scrollTop;
			if (e.detail.scrollHeight - e.detail.scrollTop <= 400 && !this.isQuerying) {
				//console.log("到达底部");
				this.isQuerying = true;
				this.search.pageIndex++;
				this.query(true);
			}
		},
		goTop() {
			this.scrollTop = this.oldScrollTop;
			this.$nextTick(() => {
				this.scrollTop = 0;
			});
		},
		reset() {
			this.search.pageIndex = 1;
			this.needQuery = true;
			this.isQuerying = false;
			this.query();
		},
		viewDetail(item) {
			this.showEditBtn = true;
			this.workOrderId = item.work_order_id;
			api.getWorkOrderDetailByOrgLaw(item.work_order_id).then(({ data }) => {
				log("getWorkOrderDetailByOrgLaw====>", data);
				this.modalDetailInfo = data;
				this.modalDetailShow = true;
			});
		},
		deletePic(event) {
			this.fileList.splice(event.index, 1);
		},
		async afterRead(event) {
			// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this.fileList.length;
			lists.map(item => {
				this.fileList.push({
					...item,
					status: "uploading",
					message: "上传中",
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url);
				let item = this.fileList[fileListLen];
				this.fileList.splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: "success",
						message: "",
						url: result,
					})
				);
				fileListLen++;
			}
			//console.log("==============", this.fileList);
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					filePath: url,
					name: "file",
					header: {
						Authorization: this.$store.state.token,
						cid: "",
					},
					//#ifdef H5
					url: "/api/file/upload/putObject",
					//#endif
					//#ifndef H5
					url: config.baseUrl + "/api/file/upload/putObject",
					//#endif
					success: ({ data }) => {
						data = JSON.parse(data);
						resolve(data.data);
						//console.log("upload ===>", data);
					},
				});
			});
		},
		hideDetailModal() {
			this.modalDetailShow = false;
		},
		confirmSubmite() {
			if (this.fileList.length <= 0) {
				uni.showToast({
					type: "error",
					position: "top",
					title: "上报图片不能空",
				});
				return;
			}
			if (!this.textContent) {
				uni.showToast({
					type: "error",
					position: "top",
					title: "上报备注不能空",
				});
				return;
			}
			const data = {
				work_order_id: this.workOrderId,
				content: this.textContent,
				picture_url: this.buildPicUrl(),
			};
			//console.log("=========>", data);
			api.uploadByOrg(data).then(() => {
				uni.showToast({
					type: "success",
					position: "top",
					title: "上报成功",
				});
				this.modalDetailShow = false;
				this.query();
			});
		},
		buildPicUrl(value) {
			const result = [];
			this.fileList.forEach(v => {
				console.log(v);
				result.push(v.url.filePath);
			});

			return result.join(",");
		},
	},
};
</script>

<style lang="scss">
.container {
	padding: 10px 5px;
	font-size: 14px;
	line-height: 24px;
}
.btn-search-group {
	display: flex;
	justify-content: space-between;
	margin-top: 15px;
}
.none-data {
	margin-top: 10%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	color: $uni-color-primary;
}
/deep/ .u-modal {
	&__title {
		padding-top: 15px;
	}
	&__content {
		padding: 10px;
	}
}
.modal-item {
	margin: 0;
	width: 100%;
	display: flex;
	flex: 1;
	.left {
		font-weight: 600;
		padding-right: 5px;
		white-space: nowrap;
	}
}
</style>