169 lines
4.3 KiB
Vue
169 lines
4.3 KiB
Vue
<template>
|
|
<page-meta>
|
|
<navigation-bar :title="title" title-align="center" background-color="#F1F3F9" front-color="#000000" />
|
|
</page-meta>
|
|
<view class="device-group-add-wrap">
|
|
<view class="main-wrap">
|
|
<view class="form-wrap">
|
|
<u--form :model="form" :rules="rules" ref="form" labelWidth="55" labelAlign="center">
|
|
<u-form-item :label="$tt('group.name')" prop="groupName" borderBottom>
|
|
<u--input v-model="form.groupName" :placeholder="$tt('group.inputName')" :clearable="true"
|
|
border="none"></u--input>
|
|
</u-form-item>
|
|
<u-form-item :label="$tt('group.sort')" prop="groupOrder" borderBottom>
|
|
<u--input v-model="form.groupOrder" type="number" :placeholder="$tt('group.inputSort')"
|
|
:clearable="true" border="none"></u--input>
|
|
</u-form-item>
|
|
<u-form-item :label="$tt('group.remark')" prop="remark">
|
|
<u--input v-model="form.remark" :placeholder="$tt('group.content')" :clearable="true"
|
|
border="none"></u--input>
|
|
</u-form-item>
|
|
</u--form>
|
|
</view>
|
|
|
|
<view class="footer">
|
|
<u-button type="primary" :plain="true" @tap="handleSubmitForm"
|
|
customStyle="border: none; border-radius: 5px; padding: 50rpx 0;">{{$tt('common.save')}}</u-button>
|
|
<u-button v-if="isUpdate" type="error" :plain="true" @tap="handleDelete()"
|
|
customStyle="border: none; border-radius: 5px; padding: 50rpx 0; margin-top: 10px;">{{$tt('common.delete')}}</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')
|
|
});
|
|
uni.$emit('re-device-group-list', true); // 刷新触发
|
|
uni.navigateBack({ delta: 1 });
|
|
}).finally(() => {
|
|
uni.hideLoading();
|
|
});
|
|
} else {
|
|
addGroup(this.form).then(response => {
|
|
uni.showToast({
|
|
icon: 'success',
|
|
title: this.$tt('common.addSuccessful')
|
|
});
|
|
uni.$emit('re-device-group-list', true); // 刷新触发
|
|
uni.navigateBack({ delta: 1 });
|
|
}).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
|
|
});
|
|
uni.$emit('re-device-group-list', true); // 刷新触发
|
|
uni.navigateBack({ delta: 1 });
|
|
}
|
|
}).finally(() => {
|
|
uni.hideLoading();
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background: $uni-bg-color-grey;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.device-group-add-wrap {
|
|
width: 100%;
|
|
|
|
.main-wrap {
|
|
padding: 14rpx 30rpx;
|
|
|
|
.form-wrap {
|
|
padding: 10rpx 24rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 10rpx;
|
|
|
|
::v-deep .u-form-item__body {
|
|
padding: 26rpx 0;
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
margin-top: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |