<template>
|
<div>
|
<el-button type="primary" @click="createGrid">新建网格</el-button>
|
</div>
|
<el-dialog v-model="dialogVisible" title="Tips" width="30%">
|
<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';
|
|
const gridStore = useGridStore();
|
|
// 网格绘制确认对话框
|
const dialogVisible = ref(false);
|
// 临时网格覆盖物
|
let tempOverlays;
|
|
// 新建网格
|
const createGrid = function () {
|
mapGrid.mouseDrawPolygon((event) => {
|
tempOverlays = event.obj;
|
dialogVisible.value = true;
|
});
|
};
|
|
const props = defineProps({
|
//基本信息
|
formInfo: Object,
|
//是创建或者更新
|
isCreate: Boolean,
|
//
|
isActive: Boolean
|
});
|
|
const emit = defineEmits(['onSubmit', 'onCancel']);
|
|
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'
|
}
|
]
|
});
|
|
// 创建
|
async function create() {
|
// loading.value = true;
|
// return sceneApi
|
// .createScene(formObj.value)
|
// .then((res) => {
|
// console.log(res);
|
// })
|
// .finally(() => {
|
// loading.value = false;
|
// });
|
}
|
|
// 更新
|
async function update() {
|
// loading.value = true;
|
// return sceneApi
|
// .updateScene(formObj.value)
|
// .then((res) => {
|
// console.log(res);
|
// })
|
// .finally(() => {
|
// loading.value = false;
|
// });
|
}
|
|
function submit() {
|
const newRecord = {
|
gId: '1',
|
gType: 0,
|
gName: formObj.value.gName,
|
gSide: tempOverlays.getPath(),
|
overlays: tempOverlays
|
};
|
|
gridStore.addGrid(newRecord);
|
emit('onSubmit', newRecord);
|
dialogVisible.value = false;
|
|
return props.isCreate ? create() : update();
|
}
|
function cancel() {
|
emit('onCancel');
|
baseMapUtil.removeView(tempOverlays);
|
dialogVisible.value = false;
|
}
|
|
watch(
|
() => props.formInfo,
|
(nValue) => {
|
formObj.value = nValue;
|
},
|
{ immediate: false }
|
);
|
|
watch(dialogVisible, (nValue) => {
|
active.value = nValue;
|
});
|
</script>
|
