equipment-rental-mini/pages/fault/fault-handle/fault-handle.vue

<template>
	<view class="home">
		<view class="device-info">
			<i class="iconfont icon-shebei"></i>设备故障信息
		</view>
		<view class="info-area">
			<u--form
				labelPosition="left"
				:model="model1"
				ref="form1"
				:labelWidth="100"
				labelAlign="center"
			>
				<u-form-item
					label="设备编码"
					prop="assetBarCode"
					borderBottom
					ref="item2"
				>
					{{model1.assetBarCode}}
				</u-form-item>
				<u-form-item
					label="上报工号"
					prop="username"
					borderBottom
					ref="item1"
				>
					{{model1.username}}
				</u-form-item>
				<u-form-item
					label="上报人"
					prop="username"
					borderBottom
					ref="item1"
				>
					{{model1.nickname}}
				</u-form-item>
				<u-form-item
					label="联系电话"
					prop="tel"
					borderBottom
					ref="item2"
				>
					{{model1.tel}}
				</u-form-item>
				<u-form-item
					label="上报位置"
					prop="placeName.placeName"
					borderBottom
					ref="item1"
				>
					{{model1.tbAsset.placeName}}
				</u-form-item>
				<u-form-item
					label="上报时间"
					prop="reportDate"
					borderBottom
					ref="item1"
				>
					{{model1.reportDate}}
				</u-form-item>
				<u-form-item
					label="处理状态"
					prop="processState"
					borderBottom
					ref="item2"
				>
					{{model1.processState==='0'?'未处理':'已处理'}}
				</u-form-item>
			</u--form>
		</view>
		<view class="type-head">
			<i class="iconfont icon-dingwei"></i>故障现象
		</view>
		<view class="type-area">
			<u--textarea
			border="none" 
			v-model="model1.faultPhenomenon" 
			autoHeight
			disabled
			maxlength="-1">
			</u--textarea>
		</view>
		<view class="type-head">
			<i class="iconfont icon-dingwei"></i>处理结果
		</view>
		<view class="type-area">
			<u--textarea 
			border="none" 
			v-model="model1.processResult" 
			placeholder="请输入处理结果" 
			:disabled="model1.processState==='0'?false:true"
			autoHeight
			maxlength="-1"></u--textarea>
		</view>
		<view v-if="model1.processState==='0'?true:false">
			<view class="type-head">
				<i class="iconfont icon-dingwei"></i>设备状态反馈
			</view>
			<view class="type-area">
				<u-radio-group
					v-model="radiovalue1"
					placement="row"
				>
					<u-radio
					:customStyle="{margin: '8px 8px 8px 0' }"
					v-for="(item, index) in radiolist1"
					:key="index"
					:label="item.name"
					:name="item.name"
					>
					</u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="btn-area" v-if="model1.processState==='0'?true:false">
			<u-button color="#67C23A" size="small" @click="toSaveProcess">保存</u-button>
		</view>
	</view>
</template>

<script>
	import { getFaultDetail,handleFaultReport } from '@/api/asset.js'
	export default {
		data() {
			return {
				id:null,
				model1:{
					assetBarCode: "00170000488047",
					createBy: null,
					createTime: null,
					faultPhenomenon: "aaaaaaa",
					id: "1640988534091284485",
					params:{},
					processResult: null,
					processState: "0",
					remark: null,
					reportDate: "2023-03-31 10:27:09",
					searchValue: null,
					tel: "15788998899",
					updateBy: null,
					updateTime: null,
					userId: "1",
					username: "admin",
					tbAsset: {}
				},
				radiolist1: [
					{
						name: '正常',
						disabled: false
					},
					{
					  name: '报废',
					  disabled: false
					}
				],
				radiovalue1: '正常',
			};
		},
		methods:{
			init(id){
				getFaultDetail(id).then(res=>{
					this.model1 = res
				})
			},
			toSaveProcess(){
				// uni.showLoading({
				// 	title: "正在保存中",
				// 	mask: true,
				// });
				let fault = this.model1.processResult
				if(fault==""){
					uni.showToast({
						icon:'error',
						title:"请填写处理结果"
					})
					// uni.$u.toast("请填写故障处理结果")
					return;
				}
				let data = {
					tbFaultReportId:this.model1.id,
					processResult:this.model1.processResult,
					feedbackStatus:this.radiovalue1==="正常"?1:0
				}
				handleFaultReport(data).then(res=>{
					this.model1 = res
				})
			}
		},
		onLoad:function(option){
			this.id = option.id
			this.init(option.id)
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f5f6fa;
}
.home{
	// padding: 20rpx 0;
}
.device-info,.type-head{
	display: flex;
	align-items: center;
	padding:20rpx;
	.iconfont{
		font-size: 40rpx;
		margin-right: 10rpx;
	}
}
.info-area,.type-area{
	background-color: #fff;
}
.type-area{
	padding: 0 20rpx;
	/deep/.u-textarea--disabled{
		background-color: #fff !important;
	}
}
.btn-area{
	// padding: 20rpx 20rpx 20rpx 500rpx;
	margin-top: 120rpx;
	padding: 0 250rpx;
}
</style>