<template>
|
<div class="system-add-gas-container">
|
<el-dialog
|
title="添加经纬度"
|
v-model="state.isShowUserDialog"
|
width="300px"
|
>
|
<el-form :model="state.lngForm" size="default" ref="lngRef" :rules="state.lngFormRules" label-width="110px">
|
<el-form-item label="经度:" prop="lng">
|
<el-input v-model.trim="state.lngForm.lng" oninput="value=value.replace(/[^0-9.]/g,'').replace(/\.{22,}/g,'.')"></el-input>
|
</el-form-item>
|
<el-form-item label="纬度:" prop="lng">
|
<el-input v-model.trim="state.lngForm.lat" oninput="value=value.replace(/[^0-9.]/g,'').replace(/\.{22,}/g,'.')"></el-input>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="handleClose" size="default">取 消</el-button>
|
<el-button type="primary" @click="onSubmit" size="default">确 定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import {reactive, ref} from "vue";
|
import {AreaState, LngState} from "/@/types/areaManage";
|
const lngRef = ref();
|
const emit = defineEmits(["getLngData"]);
|
const state = reactive<LngState>({
|
isShowUserDialog: false,
|
lngForm: {
|
lng: '',
|
lat: '',
|
},
|
lngFormRules:{
|
lng: [{ required: true, message: '请填写经度', trigger: 'blur' }],
|
lat: [{ required: true, message: '请选择纬度', trigger: 'blur' }],
|
},
|
});
|
const openDialog = () => {
|
state.isShowUserDialog = true;
|
};
|
const onSubmit = () => {
|
lngRef.value.clearValidate();
|
state.isShowUserDialog = false;
|
if(state.lngForm.lng !='' && state.lngForm.lat !=''){
|
emit('getLngData',state.lngForm);
|
}
|
|
reset();
|
};
|
|
const handleClose = () => {
|
lngRef.value.clearValidate();
|
state.isShowUserDialog = false;
|
if(state.lngForm.lng !='' && state.lngForm.lat !=''){
|
emit('getLngData',state.lngForm);
|
}
|
reset();
|
}
|
const reset = () => {
|
state.lngForm = {
|
lng: '',
|
lat: ''
|
}
|
}
|
defineExpose({
|
openDialog
|
});
|
</script>
|
<style scoped lang="scss">
|
:deep(.input-with-select .el-input-group__prepend) {
|
background-color: white;
|
width: 25px;
|
box-shadow: none;
|
margin-left: -3px;
|
}
|
</style>
|
