JuHua-app/pages/tabBar/alert/edit.vue

<template>
	<page-meta>
		<navigation-bar :title="$tt('navBar.alarmHandling')" title-align="center" background-color="#007AFF" />
	</page-meta>

	<view class="alert-edit">
		<view class="alert-info">
			<view class="title">{{$tt('alert.alertInformation')}}</view>
			<u--form labelPosition="left" :model="model" labelWidth="90"
				:labelStyle="{ fontSize: '28rpx', color: '#8f9ca2' }">
				<u-form-item :label="$tt('alert.alertName')">
					{{ model.alertName }}
				</u-form-item>
				<u-form-item :label="$tt('alert.serialNumber')">
					{{ model.serialNumber }}
				</u-form-item>
				<u-form-item :label="$tt('alert.deviceName')">
					{{ model.deviceName }}
				</u-form-item>
				<u-form-item :label="$tt('alert.alertType')">
					<text
						:class="{'success': model.alertLevel === 1, 'warning': model.alertLevel === 2, 'error': model.alertLevel === 3}">
						{{ getaLertLevelDisplay(model) }}
					</text>
				</u-form-item>
				<u-form-item :label="$tt('alert.alertTime')">
					{{ model.createTime }}
				</u-form-item>
				<u-form-item :label="$tt('alert.data')">
					<div v-html="formatDetail(model.detail)"></div>
				</u-form-item>
			</u--form>
		</view>
		<view class="alert-dispose" v-if="model.status !== 1">
			<view class="title">{{$tt('alert.alertProcess')}}</view>
			<u--form labelPosition="left" :model="model" labelWidth="90"
				:labelStyle="{ fontSize: '28rpx', color: '#8f9ca2' }">
				<u-form-item :label="$tt('alert.processAlert')">
					<u-radio-group v-if="model.status === 2" v-model="alertLevel" size="16" labelSize="14">
						<u-radio shape="circle" :name="1" :label="$tt('alert.untreated')"></u-radio>
						<text style="margin-left: 30rpx;"></text>
						<u-radio shape="circle" :name="3" :label="$tt('alert.processed')"></u-radio>
					</u-radio-group>
					<text v-if="model.status === 3">{{ getaStatusDisplay(model) }}</text>
				</u-form-item>
				<u-form-item v-if="model.status === 2" :label="$tt('alert.processResult')" labelPosition="top">
					<u-textarea v-model="model.remark" fontSize="14" :placeholder="$tt('alert.inputProcessMsg')"
						confirmType="done" border="none"></u-textarea>
				</u-form-item>
				<u-form-item v-if="model.status === 3" :label="$tt('alert.processResult')">
					{{ model.remark }}
				</u-form-item>
				<u-form-item v-if="model.status === 3" :label="$tt('alert.processTime')">
					{{ model.updateTime }}
				</u-form-item>
			</u--form>
		</view>

		<view class="btn-wrap" v-if="model.status === 2">
			<u-button :customStyle="{ height: '96rpx' }" type="primary" size="normal" :text="$tt('common.save')"
				@click="handleSaveForm"></u-button>
		</view>
	</view>
</template>

<script>
	import { getAlertLog, editAlertLog } from '@/apis/modules/alertLog.js';

	export default {
		data () {
			return {
				alertLogId: null, // 告警id
				source: null, // 数据来源-设备/告警列表
				// 详情数据
				model: {
					remark: '',
				},
				alertLevel: 1, // 处理级别
			};
		},
		onLoad: function (option) {
			this.alertLogId = Number(option.alertLogId) || null;
			this.source = Number(option.source) || null;
			this.getAlertDetail();
		},
		methods: {
			// 获取遥控器详情
			getAlertDetail () {
				getAlertLog(this.alertLogId).then(res => {
					const { code, data } = res;
					if (code === 200) {
						this.model = { ...data };
					}
				});
			},
			// 格式化detail字段
			formatDetail (json) {
				if (json == null || json == "") {
					return;
				}
				let item = JSON.parse(json);
				let result = 'id：<span style="color:#F56C6C">' + item.id + '</span><br />';
				result = result + 'value：<span style="color:#F56C6C">' + item.value + '</span><br />';
				result = result + 'remark：<span style="color:#F56C6C">' + item.remark + '</span>';
				return result;
			},
			// 保存
			handleSaveForm () {
				const params = { ...this.model, status: this.alertLevel };
				editAlertLog(params).then(res => {
					if (res.code === 200) {
						let pages = getCurrentPages();
						let prevPage = pages[pages.length - 2];
						// 更新列表
						if (this.source === 1) {
							// #ifdef H5 || APP-PLUS
							prevPage.$refs.deviceAlertLog.handleSearch();
							// #endif
							// #ifdef MP-WEIXIN
							prevPage.$vm.$refs.deviceAlertLog.handleSearch();
							// #endif
						}
						if (this.source === 2) {
							// #ifdef H5 || APP-PLUS
							prevPage.handleSearch();
							// #endif
							// #ifdef MP-WEIXIN
							prevPage.$vm.handleSearch();
							// #endif
						}
						uni.navigateBack();
					} else {
						uni.showToast({
							icon: 'error',
							title: this.$tt('common.saveError')
						});
					}
				});
			},
			// 获取告警级别显示
			getaLertLevelDisplay (item) {
				const { alertLevel } = item;
				if (alertLevel === 1) {
					return '提醒通知';
				} else if (alertLevel === 2) {
					return '轻微问题';
				} else if (alertLevel === 3) {
					return '严重警告';
				}
			},
			// 获取告警状态显示
			getaStatusDisplay (item) {
				const { status } = item;
				if (status === 1) {
					return '不需要处理';
				} else if (status === 2) {
					return '未处理';
				} else if (status === 3) {
					return '已处理';
				}
			},
		},
	};
</script>

<style lang="scss">
	page {
		height: 100%;
		background: #eef3f7;
	}

	.alert-edit {
		width: 100%;

		.alert-info,
		.alert-dispose {
			background: #fff;
			margin: 20rpx;
			padding: 20rpx 30rpx;
			border-radius: 10rpx;

			.title {
				color: #303133;
				font-size: 32rpx;
				padding: 12rpx 0;
			}
		}

		.btn-wrap {
			margin: 30rpx 20rpx;
		}

		.success {
			color: #5ac725;
		}

		.warning {
			color: #f9ae3d;
		}

		.error {
			color: #f56c6c;
		}
	}
</style>
<style lang="scss" scoped>
	::v-deep .u-form-item__body {
		padding: 5px 0 !important;
	}

	::v-deep .u-textarea__field {
		font-size: 28rpx !important;
	}
</style>