ZYC-mobile/pages/tabBar/alert/edit - 副本.vue

<template>
	<page-meta>
		<navigation-bar :title="$tt('navBar.alarmHandling')" background-color="#007AFF">
		</navigation-bar>
	</page-meta>
	<view class="alert-edit-wrap">
		<view class="container-wrap">
			<view class="form-wrap">
				<u--form :model="model" ref="form" :rules="rules" errorType="toast" labelPosition="left"
					labelWidth="100">
					<view class="form-item-wrap">
						<u-form-item :label="$tt('alert.alertName')">
							<u--input v-model="model.alertName" border="none" readonly></u--input>
						</u-form-item>
					</view>
					<view class="form-item-wrap">
						<u-form-item :label="$tt('alert.serialNumber')">
							<u--input v-model="model.serialNumber" border="none" readonly></u--input>
						</u-form-item>
					</view>
					<view class="form-item-wrap">
						<u-form-item :label="$tt('alert.deviceName')">
							<u--input v-model="model.deviceName" border="none" readonly></u--input>
						</u-form-item>
					</view>
					<view class="form-item-wrap">
						<u-form-item :label="$tt('alert.alertType')">
							<u--input v-model="model.status" border="none" readonly></u--input>
						</u-form-item>
					</view>
					<view class="form-item-wrap">
						<u-form-item :label="$tt('alert.alertTime')">
							<u--input v-model="model.createTime" border="none" readonly></u--input>
						</u-form-item>
					</view>
					<view class="form-item-wrap">
						<u-form-item :label="$tt('alert.data')">
							<div v-html="formatDetail(model.detail)"></div>
						</u-form-item>
					</view>
					<view class="form-item-wrap">
						<u-form-item :label="$tt('alert.processResult')" prop="remark">
							<u-textarea v-model="model.remark" fontSize="14" :placeholder="$tt('alert.inputProcessMsg')"
								confirmType="done"></u-textarea>
						</u-form-item>
					</view>
				</u--form>
			</view>
			<view class="btn-wrap">
				<u-button :customStyle="{ height: '96rpx' }" size="normal" :plain="true" :text="$tt('common.save')"
					@click="handleSaveForm"></u-button>
			</view>
		</view>
	</view>
</template>

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

	export default {
		data () {
			return {
				rules: {
					'remark': {
						required: true,
						message: this.$tt('deviceDetail.inputMsg'),
						trigger: ['blur', 'change']
					},
				},
				// 详情数据
				model: {
					remark: '',
				},
				alertLogId: null, // 告警id
				alertData: null, // 遥控器详情信息
			};
		},
		onLoad: function (option) {
			this.alertLogId = Number(option.alertLogId) || null;
			this.getAlertDetail();
		},
		methods: {
			// 获取遥控器详情
			getAlertDetail () {
				getAlertLog(this.alertLogId).then(res => {
					this.alertData = res.data;
					this.model = { ...this.alertData };
				});
			},
			// 格式化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 () {
				this.$refs.form.validate().then(res => {
					editAlertLog(this.model).then(response => {
						if (response.code === 200) {
							let pages = getCurrentPages();
							let prevPage = pages[pages.length - 2];
							// 更新列表
							// #ifdef H5 || APP-PLUS
							prevPage.getDatas();
							// #endif
							// #ifdef MP-WEIXIN
							prevPage.$vm.getDatas();
							// #endif
							uni.navigateBack();
						} else {
							uni.showToast({
								icon: 'error',
								title: this.$tt('common.saveError')
							});
						}
					});
				});
			}
		},
		onReady () {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form.setRules(this.rules);
		},
	};
</script>

<style>
	page {
		height: 100%;
		background: #eef3f7;
	}
</style>
<style lang="scss" scoped>
	.alert-edit-wrap {
		.container-wrap {
			.form-wrap {
				background: #fff;
				margin: 30rpx;

				.form-item-wrap {
					padding: 4rpx 20rpx;
				}
			}

			.btn-wrap {
				margin: 30rpx 26rpx;
			}
		}
	}
</style>