<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.title == '查看区域' ? '' :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";
|
import {areaManageApi} from "/@/api/basicDataManage/areaManage";
|
import {ElMessage} from "element-plus/es";
|
|
const areaRef = ref();
|
const lngRef = ref();
|
const emit = defineEmits(["getAreaData"]);
|
const state = reactive<AreaState>({
|
disabled: false,
|
title: '',
|
isShowUserDialog: false,
|
areaForm: {
|
id: '',
|
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;
|
reset();
|
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 = async () => {
|
if(state.title == '新增区域' || state.title == '修改区域') {
|
const valid = areaRef.value.validate();
|
if(valid){
|
if(state.title == '新增区域'){
|
const param = {
|
name: state.areaForm.areaName,
|
color: state.areaForm.areaColor,
|
regionLngLats: state.areaForm.areaLngLat.map(item => {
|
return {
|
lng: item.lng,
|
lat: item.lat
|
}
|
})
|
}
|
let res = await areaManageApi().addArea(param);
|
if(res.data.code == 100) {
|
ElMessage({
|
type: 'success',
|
message: '新增成功'
|
});
|
}else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
}else if(state.title == '修改区域'){
|
const param = {
|
id: state.areaForm.id,
|
name: state.areaForm.areaName,
|
color: state.areaForm.areaColor,
|
regionLngLats: state.areaForm.areaLngLat.map(item => {
|
return {
|
lng: item.lng,
|
lat: item.lat
|
}
|
})
|
}
|
let res = await areaManageApi().editArea(param);
|
if(res.data.code == 100) {
|
ElMessage({
|
type: 'success',
|
message: '修改成功'
|
});
|
}else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
}
|
}
|
}
|
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 = {
|
id: '',
|
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>
|
