JuHua-app/pagesB/user/deviceGroup/detail.vue

<template>
	<page-meta>
		<navigation-bar :title="title" title-align="center" background-color="#007AFF" />
	</page-meta>
	<view class="device-group-add-wrap">
		<view class="main-wrap">
			<u--form :model="form" :rules="rules" ref="form" labelWidth="65" labelAlign="center">
				<u-form-item :label="$tt('group.name')" prop="groupName" borderBottom>
					<u--input v-model="form.groupName" border="none" :placeholder="$tt('group.inputName')"
						:clearable="true"></u--input>
				</u-form-item>
				<u-form-item :label="$tt('group.sort')" prop="groupOrder" borderBottom>
					<u--input v-model="form.groupOrder" type="number" border="none"
						:placeholder="$tt('group.inputSort')" :clearable="true"></u--input>
				</u-form-item>
				<u-form-item :label="$tt('group.remark')" prop="remark" borderBottom>
					<u--input v-model="form.remark" border="none" :placeholder="$tt('group.content')"
						:clearable="true"></u--input>
				</u-form-item>
			</u--form>
			<view style="margin-top:40rpx; display:flex;">
				<u-button type="error" v-if="isUpdate" @tap="handleDelete()"
					customStyle="margin:10px;">{{$tt('common.delete')}}</u-button>
				<u-button type="primary" @tap="handleSubmitForm"
					customStyle="margin:10px;">{{$tt('common.save')}}</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { getGroup, delGroup, updateGroup, addGroup } from '@/apis/modules/group';

	export default {
		data () {
			return {
				title: this.$tt('group.add'),
				isUpdate: false,
				// 表单参数
				form: {
					groupName: null,
					groupOrder: 0,
					remark: null
				},
				// 表单校验
				rules: {
					'groupName': {
						type: 'string',
						required: true,
						message: this.$tt('group.groupName'),
						trigger: ['blur', 'change']
					},
					'groupOrder': {
						type: 'number',
						required: true,
						message: this.$tt('group.serialNumber'),
						trigger: ['blur', 'change']
					},
				}
			};
		},
		onLoad (option) {
			if (option.groupId) {
				this.form.groupId = option.groupId;
				this.getInfo();
				this.title = this.$tt('group.updateGroup');
				this.isUpdate = true;
			}
		},
		methods: {
			getInfo () {
				getGroup(this.form.groupId).then(response => {
					this.form = response.data;
				});
			},
			// 提交数据
			handleSubmitForm () {
				this.$refs.form.validate().then(res => {
					uni.showLoading({ title: this.$tt('group.submit') });
					if (this.form.groupId != null) {
						updateGroup(this.form).then(response => {
							uni.showToast({ icon: 'success', title: this.$tt('common.updateSuccessful') });
							setTimeout(() => {
								uni.navigateBack({
									delta: 1,
									success: (e) => {
										var pages = getCurrentPages();
										var page = pages[pages.length - 2];
										if (page === undefined || page === null)
											return;
										// 更新列表
										if (uni.getSystemInfoSync().platform ===
											'devtools') {
											page.$vm.dataList = [];
											page.$vm.getList();
										} else {
											page.dataList = [];
											page.getList();
										}
									}
								});
							}, 1000);
						}).finally(() => {
							uni.hideLoading();
						});
					} else {
						addGroup(this.form).then(response => {
							uni.showToast({ icon: 'success', title: this.$tt('common.addSuccessful') });
							setTimeout(() => {
								uni.navigateBack({
									delta: 1,
									success: (e) => {
										var pages = getCurrentPages();
										var page = pages[pages.length - 2];
										if (page === undefined || page === null)
											return;
										// 更新列表
										if (uni.getSystemInfoSync().platform ===
											'devtools') {
											page.$vm.dataList = [];
											page.$vm.getList();
										} else {
											page.dataList = [];
											page.getList();
										}
									}
								});
							}, 1000);
						}).finally(() => {
							uni.hideLoading();
						});
					}
				});
			},
			// 删除
			handleDelete () {
				uni.showModal({
					title: this.$tt('group.system'),
					content: this.$tt('group.delete'),
					confirmText: this.$tt('group.confirm'),
					cancelText: this.$tt('group.cancel'),
					success: result => {
						if (result.confirm) {
							uni.showLoading({ title: this.$tt('group.deleting') });
							delGroup(this.form.groupId).then(res => {
								if (res) {
									uni.showToast({
										icon: 'success',
										title: res.msg
									});
									setTimeout(() => {
										uni.navigateBack({
											delta: 1,
											success: (e) => {
												var pages = getCurrentPages();
												var page = pages[pages.length - 2];
												if (page === undefined || page ===
													null)
													return;
												// 更新列表
												if (uni.getSystemInfoSync()
													.platform ===
													'devtools') {
													page.$vm.dataList = [];
													page.$vm.getList();
												} else {
													page.dataList = [];
													page.getList();
												}
											}
										});
									}, 1000);
								}
							}).finally(() => {
								uni.hideLoading();
							});
						}
					}
				});
			},
		}
	};
</script>

<style lang="scss">
	.device-group-add-wrap {
		.main-wrap {
			padding: 40rpx;
			background: #ffffff;
			border-top-left-radius: 0;
			border-top-right-radius: 0;
		}
	}
</style>