新项目

zhouwx

2024-12-04 80c8993820fc3f958397bebe9dbd72be6a449c55

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<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>