You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
3.8 KiB
113 lines
3.8 KiB
<template>
|
|
<t-dialog
|
|
:visible="visible"
|
|
header="编辑机巢"
|
|
width="520px"
|
|
dialog-class-name="add-dock-dialog"
|
|
placement="center"
|
|
:close-on-overlay-click="!saving"
|
|
:close-on-esc-keydown="!saving"
|
|
:close-btn="!saving"
|
|
@update:visible="onVisibleUpdate"
|
|
@close="close"
|
|
>
|
|
<form novalidate @submit.prevent="submit">
|
|
<label><span>机巢名称<b>*</b></span><t-input v-model="form.name" :maxlength="64" placeholder="例如：青山湖 03 号机巢" /></label>
|
|
<label><span>机巢 SN</span><t-input :model-value="dock?.sn || ''" readonly /></label>
|
|
<label><span>通信卡 ICCID</span><t-input :model-value="dock?.iccid || ''" readonly /></label>
|
|
<div class="form-row">
|
|
<label><span>经度<b>*</b></span><t-input-number v-model="form.longitude" theme="normal" :min="-180" :max="180" :step="0.000001" placeholder="例如：120.219375" style="width: 100%" /></label>
|
|
<label><span>纬度<b>*</b></span><t-input-number v-model="form.latitude" theme="normal" :min="-90" :max="90" :step="0.000001" placeholder="例如：30.259244" style="width: 100%" /></label>
|
|
</div>
|
|
<label><span>设备位置<em>选填</em></span><t-input v-model="form.location" :maxlength="128" placeholder="例如：青山湖科技城 C 区" /></label>
|
|
<div class="form-error">{{ error }}</div>
|
|
</form>
|
|
<template #footer>
|
|
<t-button variant="outline" type="button" :disabled="saving" @click="close">取消</t-button>
|
|
<t-button theme="primary" type="button" :disabled="saving" :loading="saving" @click="submit">{{ saving ? '保存中…' : '保存修改' }}</t-button>
|
|
</template>
|
|
</t-dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref, watch } from 'vue'
|
|
import request from '@/utils/http'
|
|
import * as urls from '@/config/urls'
|
|
|
|
const props = defineProps({
|
|
visible: Boolean,
|
|
dock: { type: Object, default: null }
|
|
})
|
|
const emit = defineEmits(['close', 'saved'])
|
|
|
|
const form = reactive({ name: '', longitude: undefined, latitude: undefined, location: '' })
|
|
const error = ref('')
|
|
const saving = ref(false)
|
|
|
|
watch(() => props.visible, (visible) => {
|
|
if (!visible || !props.dock) return
|
|
Object.assign(form, {
|
|
name: props.dock.name || '',
|
|
longitude: props.dock.longitude == null || props.dock.longitude === '' ? undefined : Number(props.dock.longitude),
|
|
latitude: props.dock.latitude == null || props.dock.latitude === '' ? undefined : Number(props.dock.latitude),
|
|
location: props.dock.location === '--' ? '' : props.dock.location || ''
|
|
})
|
|
error.value = ''
|
|
})
|
|
|
|
function close() {
|
|
if (!saving.value) emit('close')
|
|
}
|
|
|
|
function onVisibleUpdate(next) {
|
|
if (!next) close()
|
|
}
|
|
|
|
async function submit() {
|
|
const name = form.name.trim()
|
|
const longitude = Number(form.longitude)
|
|
const latitude = Number(form.latitude)
|
|
|
|
error.value = ''
|
|
if (!name || form.longitude === '' || form.longitude == null || form.latitude === '' || form.latitude == null) {
|
|
error.value = '请填写机巢名称、经度和纬度。'
|
|
return
|
|
}
|
|
if (!Number.isFinite(longitude) || longitude < -180 || longitude > 180) {
|
|
error.value = '经度应在 -180～180 之间。'
|
|
return
|
|
}
|
|
if (!Number.isFinite(latitude) || latitude < -90 || latitude > 90) {
|
|
error.value = '纬度应在 -90～90 之间。'
|
|
return
|
|
}
|
|
if (!props.dock?.id) return
|
|
|
|
saving.value = true
|
|
try {
|
|
await request.put(urls.DOCK(props.dock.id), {
|
|
name,
|
|
longitude,
|
|
latitude,
|
|
location: form.location.trim()
|
|
})
|
|
emit('saved')
|
|
} catch (e) {
|
|
error.value = e.message || '保存失败'
|
|
} finally {
|
|
saving.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.add-dock-dialog .t-input,
|
|
.add-dock-dialog .t-input-number {
|
|
width: 100%;
|
|
}
|
|
.add-dock-dialog .t-dialog__footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
}
|
|
</style>
|
|
|