zhouwenxuan
2023-08-11 1c328d7233aaa6ea48fbdfb73b415eb9837956a6
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<template>
    <div class="system-add-gas-container">
        <el-dialog
            :title="state.title"
            v-model="state.isShowUserDialog"
            width="600px"
        >
            <el-form :model="state.areaForm" size="default" ref="areaRef" :rules="state.areaFormRules" label-width="110px">
                <el-form-item label="区域名称:" prop="areaName">
                    <el-input v-model.trim="state.areaForm.areaName" :disabled="state.disabled" ></el-input>
                </el-form-item>
                <el-form-item label="区域经纬度:" prop="areaLngLat">
                    <div style="display: flex;justify-content: space-between;width: 100%">
                        <el-table :data="state.areaForm.areaLngLat" border style="width: 70%">
                            <el-table-column  prop="lng" label="经度"  >
                                <template #default="scope">
                                    <input
                                        :disabled="state.disabled"
                                        style="width: 100%;border: none;"
                                        type="text" v-model="scope.row.lng"
                                        oninput="value=value.replace(/[^0-9.]/g,'').replace(/\.{22,}/g,'.')"
                                    />
                                </template>
                            </el-table-column>
                            <el-table-column  prop="lat" label="纬度"  >
                                <template #default="scope">
                                    <input
                                        :disabled="state.disabled"
                                        style="width: 100%;border: none;" type="text"
                                        v-model="scope.row.lat"
                                        oninput="value=value.replace(/[^0-9.]/g,'').replace(/\.{22,}/g,'.')"
                                    />
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-button size="default" style="width: 100px" type="success" @click="addLng" :disabled="state.disabled">
                            <el-icon>
                                <ele-FolderAdd />
                            </el-icon>
                            添加经纬度
                        </el-button>
                    </div>
                </el-form-item>
                <el-form-item label="区域颜色:" prop="areaColor">
                    <el-input class="input-with-select" v-model.trim="state.areaForm.areaColor" :disabled="!state.areaForm.areaColor || state.disabled" >
                        <template #prepend>
                            <el-color-picker v-model="state.areaForm.areaColor" :disabled="state.disabled" />
                        </template>
                    </el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="handleClose" size="default" v-if="state.title!= '查看区域'">取 消</el-button>
                    <el-button type="primary"  @click="onSubmit" size="default">确 定</el-button>
                </span>
            </template>
        </el-dialog>
        <lng-dialog ref="lngRef" @getLngData="getLngData"></lng-dialog>
 
    </div>
</template>
 
<script setup lang="ts">
import {reactive, ref} from "vue";
import { AreaState } from "/@/types/areaManage";
import lngDialog from "./lngDialog.vue";
 
const areaRef = ref();
const lngRef = ref();
const emit = defineEmits(["getAreaData"]);
const state = reactive<AreaState>({
    disabled: false,
    title: '',
    isShowUserDialog: false,
    areaForm: {
        areaName: '',
        areaLngLat: [],
        areaColor: '',
    },
    areaFormRules:{
        areaName: [{ required: true, message: '请填写区域名称', trigger: 'blur' }],
        areaColor: [{ required: true, message: '请选择区域颜色', trigger: 'blur' }],
        areaLngLat: [{ required: true, message: '请填写经纬度', trigger: 'blur' }],
    },
});
const openDialog = (type: string, value: any) => {
    state.isShowUserDialog = true;
    if (type === '新增') {
        state.disabled = false;
        state.title = '新增区域';
    } else if (type === '修改'){
        state.disabled = false;
        state.title = '修改区域';
        state.areaForm = JSON.parse(JSON.stringify(value));
    }else {
        state.disabled = true;
        state.title = '查看区域';
        state.areaForm = JSON.parse(JSON.stringify(value));
    }
};
const onSubmit = () => {
    console.log("form",state.areaForm)
    areaRef.value.clearValidate();
    state.isShowUserDialog = false;
    reset();
    emit('getAreaData');
};
 
const handleClose = () => {
    areaRef.value.clearValidate();
    state.isShowUserDialog = false;
    reset();
    emit('getAreaData');
}
const reset = () => {
    state.areaForm = {
        areaName: '',
        areaLngLat: [],
        areaColor: '',
    };
}
 
const addLng = () => {
    lngRef.value.openDialog();
}
const getLngData = (data: any) => {
    state.areaForm.areaLngLat.push(data)
    console.log("区域",state.areaForm.areaLngLat)
}
 
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>