zhgdyunapp/pages/alarmPage/shutting/shutting.vue

<template>
	<view>
		<view class="barBox">
			<headers :themeType="'white'" :showBack="true">
				<view class="title">
					<view class="backBtn">
						<view>
							<!-- <span class="back" @click="goBack()">返回</span> -->
							<span class="tip">违章处置</span>
						</view>
					</view>
				</view>
			</headers>
		</view>
		<view class="content">
			<view class="row-line">
				<view class="row-label">
					<text style="color: firebrick;">*</text>
					<text>处置结果</text>
				</view>
				<view class="row-content">
					<!-- <text style="color: #d8d8d8;">已处置</text> -->
					<radio-group @change="isShowContent" v-model="isDis">
						<radio value="dis" checked="true">已处置</radio>
						<radio value="ign" disabled="true" style="">误报忽略</radio>
					</radio-group>
				</view>
			</view>
			<view class="row-line" v-show="isDis === 'dis'">
				<view class="row-label">
					<text>描述</text>
				</view>
				<view class="row-content">
					<textarea style="background-color: #e1e1e1;" disabled :value="alarmItem.desc" @blur="bindTextAreaBlur" />
				</view>
			</view>
			<view class="row-line" v-show="isDis === 'dis'">
				<view class="row-label">
					<text style="color: firebrick;">*</text>
					<text>违章人员</text>
				</view>
				<view class="row-content">
					<view style="background-color: #e1e1e1;" class="row-select">
						<text style="margin-left: 13px;">{{alarmItem.workerInfoStr}}</text>
					</view>
					<!-- <select v-model="alarmItem.workerInfoStr" class="row-select">
						<option :value="alarmItem.workerInfoStr" checked="true" disabled>{{alarmItem.workerInfoStr}}</option>
					</select> -->
				</view>
			</view>
			<view class="row-line" v-show="isDis === 'dis'">
				<view class="row-label">
					<text style="color: firebrick;">*</text>
					<text>扣</text>
				</view>
				<view class="row-content">
					<view class="row-input" style="background-color: #e1e1e1;">
						<!-- <input disabled="true" style="margin-left: 13px;" v-model="alarmItem.deductScore" class="uni-input" type="number" placeholder=""/> -->
						<text style="margin-left: 13px;">{{alarmItem.deductScore}}</text>
					</view>
					<text style="display: flex;align-items: center;margin-left: 10px;">分</text>
				</view>
			</view>
		</view>
		<!-- <view class="confirm-btn" @click="confirm">
			<view class="inner-btn">确认</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isDis: 'dis',
				dispositionForm: {
					workerId: '',
					desc: '',
					deductScore: '',
				},
				workerList: [],
				workerInfoList: [],
				handleResult: '',
				alarmItem: {}
			}
		},
		onLoad(option) {
			this.alarmItem = JSON.parse(decodeURIComponent(option.item));
			console.log('alarmItem',this.alarmItem)
		},
		mounted() {
			this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
			// this.getWorkerList()
		},
		methods: {
			getWorkerList(){
				this.sendRequest({
					url: 'xmgl/workerInfo/selectWorkerInfoList',
					method: "post",
					data: {
						projectSn: this.projectSn,
					},
					success: res => {
						if (res.code == 200) {
							console.log('workerListRes', res)
							this.workerList = res.result.records
						}
					}
				})
			},
			isShowContent(e){
				this.isDis = e.detail.value
				if(this.isDis === 'ign'){
					this.cleanForm()
				}
				console.log(this.dispositionForm);
			},
			cleanForm(){
				this.dispositionForm.workerId = ''
				this.dispositionForm.desc = ''
				this.dispositionForm.deductScore = ''
			},
			bindTextAreaBlur(e) {
				this.dispositionForm.desc = e.detail.value
				console.log(e.detail.value)
			},
			change(e) {
				console.log("e:", e);
			},
			bindPickerChange: function(e) {
			    console.log('picker发送选择改变，携带值为', e.detail.value)
			    this.index = e.detail.value
			},
		}
	}
</script>

<style lang="scss" scoped>
	.confirm-btn{
		width: 100%;
		height: 45px;
		position: absolute;
		bottom: 5%;
		display: flex;
		justify-content: center;
		.inner-btn{
			width: 65%;
			height: 45px;
			color: #fff;
			background-color: #5181f6;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 5px;
		}
	}
	.content{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.row-line{
			margin-top: 10px;
			display: flex;
			align-items: center;
			width: 100%;
			.row-label{
				display: flex;
				justify-content: flex-end;
				width: 30%;
			}
			.row-content{
				width: 70%;
				margin-left: 20px;
				display: flex;
				radio{
					margin-right: 30px;
				}
				/deep/uni-textarea {
					width: 70%;
					height: 200rpx;
					padding: 26rpx 28rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					border: 1px solid #e1e1e1;
					border-radius: 3px;
					.uni-textarea-compute {
						width: 100%;
						height: 100%;
						overflow: auto;
					}
				}
				.row-select{
					width: 70%;
					height: 68rpx;
					border: 1px solid #e1e1e1;
					display: flex;
					align-items: center;
					border-radius: 3px;
				}
				.row-input{
					width: 60%;
					height: 68rpx;
					border: 1px solid #e1e1e1;
					display: flex;
					align-items: center;
					border-radius: 3px;
				}
			}
		}
	}
	
	.barBox {
		background-color: #5181F6;
	}

	.title {
		height: 44px;
		line-height: 44px;
		font-size: 20px;
		width: 750rpx;
		background-color: #5181F6;
		color: #fff;
		text-align: center;
		position: relative;
	}


	.backBtn {
		font-size: 16px;
		position: absolute;
		left: 20%;
	}

	.back {
		font-size: 12px;
	}

	.tip {
		margin-left: 5rem;
	}
</style>