<template>
|
<div>
|
<el-button
|
:disabled="!gridStore.hasScheme"
|
type="primary"
|
@click="createGrid"
|
>新建网格</el-button
|
>
|
</div>
|
<el-dialog
|
v-model="dialogVisible"
|
title="新建网格"
|
width="600px"
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
>
|
<el-form
|
:inline="false"
|
:model="formObj"
|
ref="formRef"
|
:rules="rules"
|
label-position="right"
|
label-width="150px"
|
>
|
<el-form-item label="网格名称" prop="gName">
|
<el-input
|
clearable
|
show-word-limit
|
v-model="formObj.gName"
|
placeholder="网格名称"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
:disabled="!edit"
|
type="primary"
|
@click="onSubmit"
|
:loading="loading"
|
>提交</el-button
|
>
|
<el-button @click="onCancel">取消</el-button>
|
</el-form-item>
|
</el-form>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { reactive, ref, watch } from 'vue';
|
import { useFormConfirm } from '@/composables/formConfirm';
|
import { useGridStore } from '@/stores/grid';
|
import mapGrid from '@/components/map/mapGrid';
|
import baseMapUtil from '@/components/map/baseMapUtil';
|
import gridInfoApi from '@/api/grid/gridInfoApi';
|
import { getGridRecord } from '@/model/gridRecord';
|
|
const gridStore = useGridStore();
|
|
// 网格绘制确认对话框
|
const dialogVisible = ref(false);
|
// 临时网格覆盖物
|
let tempOverlays;
|
|
// 新建网格
|
const createGrid = function () {
|
mapGrid.mouseDrawPolygon((event) => {
|
tempOverlays = event.obj;
|
dialogVisible.value = true;
|
});
|
};
|
|
const props = defineProps({
|
//网格方案id
|
schemeId: String,
|
//
|
isActive: Boolean
|
});
|
|
const { formObj, formRef, edit, active, onSubmit, onCancel } =
|
useFormConfirm({
|
submit: {
|
do: submit
|
},
|
cancel: {
|
do: cancel
|
}
|
});
|
|
const loading = ref(false);
|
|
const rules = reactive({
|
gName: [
|
{
|
required: true,
|
message: '网格名称不能为空',
|
trigger: 'blur'
|
}
|
]
|
});
|
|
function submit() {
|
const gridInfo = {
|
gsId: props.schemeId,
|
giName: formObj.value.gName,
|
giSide: tempOverlays.getPath().join(';')
|
};
|
|
loading.value = true;
|
return gridInfoApi
|
.createGrid(gridInfo)
|
.then((res) => {
|
const newRecord = {
|
...res,
|
overlays: tempOverlays
|
};
|
|
gridStore.addGrid(getGridRecord(newRecord));
|
dialogVisible.value = false;
|
})
|
// .catch((err) => {
|
// return err;
|
// })
|
.finally(() => (loading.value = false));
|
}
|
|
function cancel() {
|
baseMapUtil.removeView(tempOverlays);
|
dialogVisible.value = false;
|
}
|
|
// watch(
|
// () => props.formInfo,
|
// (nValue) => {
|
// formObj.value = nValue;
|
// },
|
// { immediate: false }
|
// );
|
|
watch(dialogVisible, (nValue) => {
|
active.value = nValue;
|
});
|
</script>
|
