aiot-app/pages/maintenance/submitted_ministry/submitted_ministry.vue

<template>
	<view>
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="保养工单报工" @clickLeft="back">
		<!-- 	<template slot="float">
				<view class="nav-icon-caozuo iconfont icon-caozuo" @click="setOptionShow"></view>
			</template> -->
		</uni-nav-bar>
		<!-- 进度组件 根据状态显示不同列表  -->
<!-- 		<popupOper :optionShow="optionShow" @operate="operate"
			:operationList="operationList.filter(el=> el.type == status)"></popupOper> -->

		<view class="page-bottom-padding">
			<!-- 保养工单项目 -->
			<!-- <template v-if="worksheetInfo.rule">
				<CellTip title="保养规则"> </CellTip>
				<uni-collapse ref="collapse" v-for="item in worksheetInfo.rule.ruleItem" :key="item.id">
					<uni-collapse-item :open="false" :typeOpen="false" titleStyle="background-color: #ffffff">
						<OrderDetail slot="typeOpenShow" lable1="项目名称:" :value1="item.itemName" lable2="项目内容:"
							:value2="item.itemContent" lable3="保养标准:" :value3="item.itemStandard">
						</OrderDetail>
						<view class="content-status" @click.stop>
							<OrderDetail v-for="el in item.saveSparePart" lable1="备件名称:" :value1="el.name"
								lable2="规格型号:" :value2="el.model" lable3="数量:" :value3="el.num" lable4="单位:"
								:value4="el.unit">
							</OrderDetail>
						</view>
					</uni-collapse-item>
				</uni-collapse>

			</template> -->
			<!-- 待处理 -->
			<template v-if="detailsIng.length">
				<CellTip title="待处理"> </CellTip>
				<!-- 	<OrderDetail border v-for="(item,index) in detailsIng" :key="item.id" :value1="item.equiCode"
					:value2="item.equiName" :value3="item.equiTypeName" :value4="item.equiTypeId"
					:value5="item.equiLocation">
					<template slot="custSlot">
						<view class="btn-status">
							<view class="iconfont icon-shangchuanzhaopian" @click="chooseImage"></view>
							<view>
								<text class="btn btn-warning" @click="bindChange(item.id, 2, item)">
									报修
								</text>
								<text class="btn btn-success" @click="goSparepart(item.id)">
									选择备品备件
								</text>
								<text class="btn btn-primary" @click="bindChange(item.id, 1)">
									保养完成
								</text>
							</view>
						</view>
					</template>

				</OrderDetail> -->
				<uni-collapse ref="collapse" v-for="(item,index) in detailsIng" :key="item.id">
					<uni-collapse-item :open="false" :typeOpen="false" titleStyle="background-color: #ffffff">
						<OrderDetail slot="typeOpenShow" :value1="item.equiCode" :value2="item.equiName"
							:value3="item.equiTypeName" :value4="item.equiTypeId" :value5="item.equiLocation">
							<!-- 	<template>
								
							</template> -->
						</OrderDetail>
						<view class="content-status" @click.stop>
							<view class="title cell font-grey">
								保养项目
							</view>

							<!-- <uni-collapse ref="collapse" v-for="items in item.ruleItems" :key="items.id">
								<uni-collapse-item :open="false" :typeOpen="false"
									titleStyle="background-color: #ffffff">
									<OrderDetail slot="typeOpenShow" lable1="项目名称:" :value1="items.itemName"
										lable2="项目内容:" :value2="items.itemContent" lable3="保养标准:"
										:value3="items.itemStandard">
									</OrderDetail>
									<view class="content-status" @click.stop>
										<view class="minTitle cell font-grey">
											所需备件
										</view>
										<OrderDetail v-for="el in items.saveSparePart" lable1="备件名称:" :value1="el.name"
											lable2="规格型号:" :value2="el.model" lable3="数量:" :value3="el.num" lable4="单位:"
											:value4="el.unit">
										</OrderDetail>
									</view>
								</uni-collapse-item>
							</uni-collapse> -->
							<!-- <view class="tip cell border-bottom">
								{{worksheetInfo.maintainName}}
								<text>{{item.maintainType == '1' ? '常规保养' : '润滑保养'}}</text>
							</view> -->
							<!-- 没有做过事项处理 -->
							<view class="" v-for="(items,idx) in item.ruleItems" :key="items.id">
								<view class="cell " style="margin-top: 20rpx;">
									<text class="font-grey">保养周期：</text>
									<text>{{worksheetInfo.rule.cycleType | filterCycle(worksheetInfo.rule.cycleValue)}}</text>
								</view>
								<view class="cell ">
									<text class="font-grey">操作标准：</text>
									<text>{{items.itemStandard}}</text>
								</view>
								<view class="cell ">
									<text class="font-grey">保养内容：</text>
									<text>{{items.itemContent}}</text>
								</view>

								<!-- <view class="cell ">
									<text class="font-grey">选择的备件：</text>

									<view v-for="el in items.spareParts">
										<Cell :title="el.name +'/'+ el.code" :more="'x'+ el.num + el.unit">
										</Cell>
									</view>
								</view> -->

								<view class="btn-status" v-if="items.status === null">
									<!-- <view class="iconfont icon-shangchuanzhaopian" @click="chooseImage"></view> -->
									<view>
										<text class="btn btn-primary" @click="bindChange(items.id, 1)">
											正常
										</text>
										<!-- 	<text class="btn btn-success" @click="goSparepart(item.id,index,idx)">
											选择备品备件
										</text> -->
										<text class="btn btn-warning" @click="bindChange(items.id, 2, item.id,item)">
											缺陷
										</text>


									</view>
								</view>
								<view class="btn-status" v-else>
									<text v-if="items.status===0" class="btn btn-warning"
										@click="bindChange(items.id, 1)">
										消陷
									</text>
									<text v-else
										:class="['showBtn',items.status===1?'green':'red']">{{items.status==1?"正常":"缺陷"}}</text>
								</view>
							</view>
							<view class="content-status"
								v-if="item.spareParts&&item.spareParts.length!==0">
								<view class="cell ">
									<text class="font-grey">备品备件：</text>

									<view v-for="el in item.spareParts">
										<Cell :title="el.name +'/'+ el.code" :more="'x'+ el.num + el.unit">
										</Cell>
									</view>
								</view>
							</view>

							<view class="btn-status select-right" @click.stop>
								<text class="btn btn-success" @click="goSparepart(item.id,index)">
									选择备品备件
								</text>
								<text class="btn btn-primary" @click="maintenance(item)">
									保养完成
								</text>
							</view>
						</view>

					</uni-collapse-item>
				</uni-collapse>
			</template>

			<!-- 已处理 -->
			<template v-if="detailsEd.length">
				<CellTip title="已处理"> </CellTip>
				<!-- <OrderDetail border v-for="(item,index) in detailsEd" :key="item.id" :value1="item.equiCode"
					:value2="item.equiName" :value3="item.equiTypeName" :value4="item.equiTypeId"
					:value5="item.equiLocation">
					<template slot="custSlot">
						<text :class="['showBtn',item.status===1?'green':'red']">{{item.status==1?"正常":"缺陷"}}</text>
					</template>
				</OrderDetail> -->
				<uni-collapse ref="collapse" v-for="item in detailsEd" :key="item.id">
					<uni-collapse-item :open="false" :typeOpen="false" titleStyle="background-color: #ffffff">
						<OrderDetail slot="typeOpenShow" :value1="item.equiCode" :value2="item.equiName"
							:value3="item.equiTypeName" :value4="item.equiTypeId" :value5="item.equiLocation">
							<!-- <template slot="custSlot">
								<text :class="['showBtn',item.status===1?'green':'red']">{{item.status==1?"正常":"缺陷"}}</text>
							</template> -->
							<!-- <template>
								
							</template> -->
						</OrderDetail>
						<view class="content-status" @click.stop>
							<view @click="goDetail(item.id, item.status)">
								<view class="title cell font-grey">
									保养项目
								</view>
								<!-- <view class="tip cell border-bottom">
									{{items.itemName}}
								</view> -->
								<!-- 没有做过事项处理 -->
								<view class="" v-for="(items,idx) in item.ruleItems" :key="items.id">
									<view class="cell " style="margin-top: 20rpx;">
										<text class="font-grey">保养周期：</text>
										<text>{{worksheetInfo.rule.cycleType | filterCycle(worksheetInfo.rule.cycleValue)}}</text>
									</view>
									<view class="cell ">
										<text class="font-grey">操作标准：</text>
										<text>{{items.itemStandard}}</text>
									</view>
									<view class="cell ">
										<text class="font-grey">保养内容：</text>
										<text>{{items.itemContent}}</text>
									</view>
									<view class="btn-status">
										<text
											:class="['showBtn',items.status===1?'green':'red']">{{items.status==1?"正常":"缺陷"}}</text>
									</view>
									<!-- <view class="cell ">
										<text class="font-grey">选择的备件：</text>
									

										<view v-for="items in item.spareParts">
											<Cell :title="items.name +'/'+ items.code"
												:more="'x'+ items.num + items.unit">
											</Cell>
										</view>
									</view> -->
								</view>
								<view class="content-status" v-if="item.spareParts&&item.spareParts.length!==0">
									<view class="cell ">
										<text class="font-grey">备品备件：</text>

										<view v-for="el in item.spareParts">
											<Cell :title="el.name +'/'+ el.code" :more="'x'+ el.num + el.unit">
											</Cell>
										</view>
									</view>
								</view>
							</view>
						</view>

					</uni-collapse-item>
				</uni-collapse>
			</template>
		</view>
		<button class="btn-submit" @click="bindSubmitFn">
			报工
		</button>
		<!-- <view class="btn-submit" @click="bindSubmitFn" v-if="worksheetInfo && worksheetInfo.status.id != '99'">
			报工
		</view> -->
	</view>
</template>

<script>
	import {
		get,
		postJ,
		post
	} from "@/utils/api.js"
	import Cell from '@/components/Cell.vue'
	import CellTip from '@/components/CellTip.vue'
	import OrderDetail from '../components/OrderDetail.vue'
	import popupOper from '@/components/PopupOper.vue'
	export default {
		components: {
			Cell,
			CellTip,
			OrderDetail,
			popupOper
		},
		filters: {
			filterCycle(v1, v2) {
				let str = ""
				switch (v1) {
					case "HOUR":
						str = "小时";
						break
					case "DAY":
						str = "天";
						break
					case "WEEK":
						str = "周";
						break
					case "MONTH":
						str = "月";
						break
					case "YEAR":
						str = "年";
						break
					default:
						console.log(type)
						break
				}
				return `${v2}${str}/${v2}次`
			}
		},
		data() {
			return {
				worksheetInfo: {},
				detailsIng: [],
				detailsEd: [],
				sparepartList: [],
				sparepartIndex: "",
				equiIndex: "",
				optionShow: false,
				status: '1', //1 执行 0 暂停
				operationList: [{
					title: '暂停',
					class: 'iconfont icon-zhuanpai',
					type: 1
				}, {
					title: '执行',
					class: 'iconfont icon-zhuanpai',
					type: 0
				}],
			}
		},
		onLoad(options) {
			this.pageId = options.id;
			this.getInfo();
			// this.toImplement('1'); //进页面自动执行
		},
		onShow() {
			if (this.worksheetInfo) {
				this.getInfo();
			}
		},
		methods: {
			//自动执行
			toImplement(state) {
				postJ(this.apiUrl + "/api/maintain/worksheet/implement", {
					id: this.pageId,
					state: state
				}).then(res => {
					this.state = state == "1" ? "0" : "1"; //状态更换
					console.log(res)
				}).catch(err => {
					console.log(err)
				})
			},
			getInfo(id) {
				get(this.apiUrl + "/maintain/order/getDetail/" + this.pageId).then(res => {
					this.worksheetInfo = res.data;
					this.detailsIng = res.data.equiList.filter(item => item.status === 0)
					this.detailsEd = res.data.equiList.filter(item => item.status !== 0)
					this.sparepartList = this.$store.state.maintenance.sparepart
					this.sparepartIndex = this.$store.state.maintenance.idx
					if (this.sparepartList && this.sparepartList.length !== 0) {
						// console.log(this.sparepartList)
						this.sparepartList.forEach(item => {
							this.detailsIng[this.sparepartIndex].spareParts.push(item)
						})
						// console.log(this.worksheetInfo)
					}
				})
			},
			bindChange(id, status, bizEquiId, item) {
				//已报修

				if (status == 2) {
					get(this.apiUrl + "/repair/info/isExistRepair/" + bizEquiId).then(res => {
						// console.log(res)
						if (res.success) {
							if (res.data) {
								uni.showToast({
									title: "当前设备不能报修",
									icon: "none"
								})
								return
							}
							uni.navigateTo({
								url: '../defects/defects?id=' + this.pageId + "&executeUserName=" + this
									.worksheetInfo
									.workOrder.executeUserName + "&equiName=" + item.equiName +
									"&equiCode=" + item
									.equiCode + "&cycleType=" + this
									.worksheetInfo.rule.cycleType + "&cycleValue=" + this.worksheetInfo
									.rule.cycleValue +
									"&bizEquiId=" + bizEquiId + "&ruleItemId=" + id
							})
						}
					})

				} else {
					postJ(this.apiUrl + "/rule/item/editStatus", {
							status,
							ruleItemId: id
						})
						.then(
							res => {
								// console.log(res)
								uni.showToast({
									title: '提交成功'
								})
								this.getInfo();
							}).catch(err => {
							console.log(err)
							uni.showToast({
								title: err.message,
								icon: 'none'
							})
						})
				}

			},
			bindSubmitFn() {
				if (this.detailsIng.length) {
					uni.showToast({
						title: '有未处理事项，请先处理',
						icon: 'none'
					})
					return
				}
				get(this.apiUrl + "/maintain/order/report/" + this.pageId).then(res => {
					uni.navigateTo({
						url: '/pages/promp/promp?title=保养工单'
					})
				}).catch(err => {
					// console.log(err)
					uni.showToast({
						title: err.message || '报工失败',
						icon: 'none',
						duration: 3000
					})
				})
			},
			// 保养完成 
			maintenance(data) {
				let bol = data.ruleItems.every(item => item.status === 1)
				if (!bol) {
					uni.showToast({
						title: "请处理保养项目",
						icon: "none"
					})
					return
				}
				postJ(this.apiUrl + "/maintain/order/done", {
					bizEquiId: data.id,
					spareParts: data.spareParts
				}).then(res => {
					uni.showToast({
						title: '保养完成'
					})
					this.getInfo();
				})
				// console.log("可以完成了")
			},
			//选择备件
			goSparepart(id, index) {
				uni.navigateTo({
					url: '../sparepart/sparepart?id=' + id + "&idx=" + index
				})
			},
			goDetail(id, status) {
				//已报修
				if (status.id == '2') {
					uni.navigateTo({
						url: '../defects/defects?id=' + id + "&parentsId=" + this.pageId + "&type=details"
					})
				}
			},
			chooseImage() {
				uni.chooseImage({
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
					}
				})
			},
			//点击显示弹窗
			setOptionShow() {
				this.optionShow = !this.optionShow;
			},
			//选择对应的操作
			operate(type) {
				if (type === 1) { //暂停
					this.toImplement('0');
					this.setOptionShow();
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import "@/components/submitted.scss";

	.minTitle {
		font-weight: 700;
		text-indent: 0;
	}

	.content-status {
		padding: 20rpx 0 20rpx;
	}

	.cell {
		padding: 10rpx 30rpx;
	}

	.cell-box {
		width: 94%;
		margin: 0 auto;
		padding: 20rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		// background-color: #fff;

		.tip {
			position: relative;
			margin-bottom: 20rpx;
		}

		.tip .dian {
			padding-right: 10rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: $uni-text-color;
		}

		.tip .status {
			position: absolute;
			right: 0;
			color: $uni-text-color-grey;
		}

		margin-bottom: 20rpx;
	}

	.btn-status {
		padding: 30rpx 30rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: $uni-font-size-base;

		.icon-shangchuanzhaopian {
			font-size: 60rpx;
			color: $uni-text-color-grey;
		}
	}

	.showBtn {
		display: flex;
		justify-content: flex-end;
		padding-right: 20rpx;
	}

	.green {
		color: green
	}

	.red {
		color: red;
	}

	.select-right {
		float: right;
	}
</style>