TSYWXT-CLOUD-APP/pages/equipment-inspection/inspection-close-approve.vue

<!--
 * @Title: 
 * @Description: 任务确认
 * @Author: swp
 * @Date: 2022-08-24 10:49:21
 * @LastEditors: 
 * @LastEditTime: 2022-08-24 10:49:21
-->
<template>
	<view class="wrap">
		<uni-nav-bar dark :fixed="true" backgroundColor="#3F9EFF" statusBar="false" left-icon="left" left-text="返回"
			@clickLeft="toBack">
			<view class="nav-title">
				<text>{{title}}</text>
			</view>
		</uni-nav-bar>
		<view class="container">
			<uni-forms ref="baseForm" :model="formData">
				<uni-section title="审批意见" ftitleFontSize="0.8rem" style="width: 100%;">
					<template v-slot:decoration>
						<view class="decoration"></view>
					</template>
					<view style="padding-top: 10px;padding-bottom: 0px;padding-left: 15px;padding-right: 15px;">
						<uni-forms-item>
							<uni-easyinput :styles="styles" type="textarea" v-model="formData.approveDesc"
								placeholder="录入审批意见" />
						</uni-forms-item>
					</view>
				</uni-section>
				<uni-card title="评分">
					<uni-rate v-model="formData.orderRate" />
				</uni-card>
			</uni-forms>
			<view class="view-btn">
				<button style="background-color: lightcoral;" type="default"
					@click="onCloseConfirmClick()">工单关闭</button>
			</view>
			<uni-section title="巡检详情" type="line">
				<uni-list>
					<uni-list-item v-for="(item,index) in dataList" :key="item.id" direction="column">
						<template v-slot:body>
							<view class="point">
								<view class="dot">
									{{index+1}}
								</view>
								<view class="time-title">{{item.createTime}}</view>
							</view>
							<view class="time-info">
								<view class="time-line">
									<view class="line" style="padding-left:12px">
										<view class="text" style="width: 90%;color: gray;">
											处理人:<span
												style="margin-left: 5px;color: cornflowerblue;">{{item.servicePersonName}}</span>
										</view>
									</view>
									<view class="line" style="padding-left:12px">
										<view class="text" style="width: 90%;color: gray;">
											巡检内容:<span
												style="margin-left: 5px;color: cornflowerblue;">{{item.inspectionDesc}}</span>
										</view>
									</view>
								</view>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</uni-section>
			<view style="margin-top: 5px;margin-bottom: 10px;padding-left: 10px;padding-right: 10px;">
				<button style="background-color: lightcoral;" type="default" @click="toTopClick()">返回顶部</button>
			</view>
		</view>
	</view>
</template>

<script>
	import http from '@/http/api.js';
	import {
		oss,
		devUrl,
		prodUrl
	} from '@/common/setting';
	export default {
		components: {

		},
		data() {
			return {
				title: '巡检完结审批',
				id: '',
				dataList: [],
				formData: {
					approveDesc: '',
					orderRate: 5,
				},
				styles: {
					color: '#333',
					borderColor: '#e5e5e5',
					disableColor: '#FFFFFF'
				},
				baseURL: '',
				baseOSS: '',
				videoImg: '/static/images/video.png',
			}
		},
		computed: {},
		onLoad(option) {
			this.id = option.id;
			this.baseURL = process.env.NODE_ENV === 'development' ? devUrl : prodUrl;
			this.baseOSS = oss;
			this.getDetail();
		},
		onShow() {},
		methods: {
			toOss(path) {
				let url = this.baseOSS + path;
				return url;
			},
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			toTopClick() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100,
				});
			},
			openPhoto(file) {
				let url = '/pages/check-order/photoView?url=' + file;
				uni.navigateTo({
					url: url
				})
			},
			openVideo(file) {
				let url = '/pages/check-order/videoView?url=' + file;
				uni.navigateTo({
					url: url
				})
			},
			getDetail() {
				let that = this;
				let postData = {};
				postData['inspectionId'] = this.id;
				http.request({
					url: '/galaxy-business/equipment/inspection/report/list',
					method: 'GET',
					data: postData,
				}).then(res => {
					if (res.data != null) {
						console.log(JSON.stringify(res.data))
						that.dataList = res.data;
					}
				}).catch(err => {
					console.log(JOSN.stringify(err))
				})
			},
			onCloseConfirmClick() {
				let that = this;
				uni.showModal({
					content: '确定关闭该工单？',
					showCancel: true,
					success(res) {
						if (res.confirm) {
							that.formData['id'] = that.id;
							http.request({
								url: '/galaxy-business/equipment/inspection/close',
								method: 'POST',
								params: that.formData
							}).then(res => {
								console.log(res)
								if (res.success) {
									that.toBack();
								}
							}).catch(err => {
								console.log(err)
							})
						}
					}
				});
			},
		}
	}
</script>

<style>
	/* page {
		background-color: rgb(240, 242, 244);
	} */
</style>

<style lang="scss" scoped>
	.view-btn {
		margin-top: 20px;
		margin-bottom: 20px;
		padding-left: 10px;
		padding-right: 10px;
	}

	.line-space {
		margin-top: 4px;
	}

	.point {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 15rpx 0;
	}

	.dot {
		//margin-left: -22rpx;
		background-color: #19be6b;
		box-shadow: 0 0 5rpx 5rpx #71d5a1;
		color: white;
		width: 50rpx;
		height: 50rpx;
		padding: 5rpx;
		font-size: 28rpx;
		text-align: center;
		border-radius: 50rpx;
	}

	.time-title {
		font-size: 30rpx;
		margin-left: 15rpx;
		background-color: whitesmoke;
		padding: 12rpx 25rpx;
		border-radius: 50rpx;
		color: orangered;
	}

	.time-info {
		padding: 0rpx 0rpx 0rpx 25rpx;
	}

	.time-line {
		border-left: 3rpx solid #71d5a1;
		padding: 10rpx 10rpx 30rpx 20rpx;
	}
</style>