<template>
|
<view class="pages-map-scene-rename">
|
<view class="tip">{{translate('input_scene_name')}}</view>
|
<view class="name-input">
|
<input ref="refInputName" :focus="true" :placeholder="translate('input_scene_name')" :value="inputName"
|
@input="onInputName" />
|
<uni-icons class="clear" color="#ccc" type="clear" size="20" v-if="inputName"
|
@click="clickClearName"></uni-icons>
|
</view>
|
<view class="text-button-group">
|
<a-button type="primary" class="button" :disabled="loading || inputName.trim() == ''"
|
@click="clickNameOK">{{translate('confirm')}} </a-button>
|
<a-button type="ghost" class="button" :disabled="loading"
|
@click="clickNameCancel">{{translate('cancel')}}</a-button>
|
</view>
|
</view>
|
</template>
|
<script>
|
import {
|
showToast,
|
showModal,
|
session,
|
showError,
|
showInfo
|
} from "@/comm/utils.js"
|
import {
|
Button
|
} from 'antd-mobile-vue-next'
|
|
import {
|
updateScene
|
|
} from "@/api/vehicle.js"
|
export default {
|
name: "PagesMapSceneRename",
|
components: {
|
'a-button': Button
|
},
|
props: {
|
ip: {
|
type: String,
|
default () {
|
return ''
|
}
|
},
|
sceneName: {
|
type: String,
|
default () {
|
return ''
|
}
|
},
|
},
|
data() {
|
return {
|
loading: false,
|
inputName: "",
|
}
|
},
|
|
|
watch: {
|
sceneName(val) {
|
this.inputName = val
|
}
|
},
|
methods: {
|
clickNameCancel() {
|
this.$emit("finish")
|
},
|
async clickNameOK() {
|
try {
|
uni.showLoading({
|
title: this.translate("update_scene_name")
|
})
|
this.loading = true
|
const name = this.inputName.trim()
|
if (!name) {
|
showToast(this.translate("scene_name_cannot_empty"))
|
return
|
}
|
|
if (name == this.sceneName) {
|
showToast(this.translate("scene_name_not_changed"))
|
return
|
}
|
await updateScene(this.ip, this.sceneName, name)
|
showToast(this.translate("update_scene_name_success"))
|
this.$emit("finish",name)
|
} catch (ex) {
|
showError(ex, this.translate('error'))
|
} finally {
|
uni.hideLoading()
|
this.loading = false
|
}
|
|
},
|
|
clickClearName() {
|
this.inputName = ""
|
},
|
onInputName(event) {
|
this.inputName = event.detail.value.trim();
|
|
},
|
translate(t) {
|
if (typeof this.$t == "function") return this.$t(`page.${t}`)
|
else return t;
|
},
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.pages-map-scene-rename {
|
.tip {
|
color: #888;
|
margin: 10rpx;
|
text-align: left;
|
}
|
|
.name-input {
|
width: calc(100% - 20rpx);
|
margin-bottom: 10rpx;
|
background-color: #fff;
|
padding: 10rpx;
|
border-radius: 8rpx;
|
display: flex;
|
flex-direction: row;
|
color: #1890FF;
|
|
input {
|
flex: 1;
|
}
|
}
|
|
.text-button-group {
|
display: flex;
|
width: 100%;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
font-size: 30rpx !important;
|
|
.button {
|
margin: auto;
|
margin-top: 20rpx;
|
width: calc(100% - 10rpx);
|
}
|
}
|
}
|
</style>
|
