气体管理/区域管理

zhouwenxuan

2023-08-30 15669173497dce16b5d0f17bf4bef36c0d87115c

 src/views/basicDataManage/areaManage/component/areaDialog.vue

@@ -5,7 +5,7 @@
            v-model="state.isShowUserDialog"
            width="600px"
        >
            <el-form :model="state.areaForm" size="default" ref="areaRef" :rules="state.areaFormRules" label-width="110px">
            <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>
@@ -65,6 +65,8 @@
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();
@@ -74,6 +76,7 @@
    title: '',
    isShowUserDialog: false,
    areaForm: {
        id: '',
        areaName: '',
        areaLngLat: [],
        areaColor: '',
@@ -86,6 +89,7 @@
});
const openDialog = (type: string, value: any) => {
    state.isShowUserDialog = true;
    reset();
    if (type === '新增') {
        state.disabled = false;
        state.title = '新增区域';
@@ -99,7 +103,60 @@
        state.areaForm = JSON.parse(JSON.stringify(value));
    }
};
const onSubmit = () => {
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;
@@ -115,6 +172,7 @@
}
const reset = () => {
    state.areaForm = {
        id: '',
        areaName: '',
        areaLngLat: [],
        areaColor: '',