109 lines
3.5 KiB
Vue
109 lines
3.5 KiB
Vue
<template>
|
|
<el-dialog :model-value="modelValue" :title="title" width="60%" @close="closeDialog" destroy-on-close append-to-body
|
|
:close-on-click-modal="false">
|
|
<div style="width: 100%;height: 650px;">
|
|
<FormMessage v-model="listQuery" :formList="formData" ref="elform" :rules="rules">
|
|
</FormMessage>
|
|
<div style="display: flex;justify-content: flex-end;">
|
|
<el-button type="primary" style="margin-left: 10px;" @click="drawShape()">选择坐标</el-button>
|
|
</div>
|
|
<div style="height: 300px;width: 96%; position: absolute;">
|
|
<GdMap :mapid="'map-92'" v-if="showMap"></GdMap>
|
|
</div>
|
|
|
|
</div>
|
|
<template #footer>
|
|
<div class="flex just-center">
|
|
<el-button @click="closeDialog">取消</el-button>
|
|
<el-button type="primary" @click="submitForm">确认</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
|
|
</template>
|
|
<script setup>
|
|
import GdMap from "@/components/GdMap/index.vue";
|
|
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
|
import { ref, reactive, onMounted, watch, onUnmounted, getCurrentInstance } from 'vue'
|
|
import emitter from "@/utils/eventBus.js";
|
|
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
|
const { proxy } = getCurrentInstance()
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
dict: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
zbData: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
});
|
|
const listQuery = ref({})
|
|
const elform = ref()
|
|
const emit = defineEmits(["update:modelValue",]);
|
|
const title = ref("新增重点事件");
|
|
const formData = ref([]);
|
|
const rules = reactive({
|
|
sjbt: [{ required: true, message: "请输入事件标题", trigger: "blur" }],
|
|
shms: [{ required: true, message: "请输入事件描述", trigger: "blur" }],
|
|
jd: [{ required: true, message: "请输入经度", trigger: "blur" }],
|
|
wd: [{ required: true, message: "请输入纬度", trigger: "blur" }],
|
|
});
|
|
const showMap = ref(false)
|
|
watch(() => props.modelValue, (newVal) => {
|
|
if (newVal) {
|
|
formData.value = [
|
|
{ label: "事件标题", prop: "sjbt", type: "input" },
|
|
// { label: "事件描述", prop: "shms", type: "input" },
|
|
{ label: "事件性质", prop: "sjxz", type: "input" },
|
|
{ label: "事件地址", prop: "sjdz", type: "input" },
|
|
|
|
// { label: "事件状态", prop: "sjzt", type: "select", options: props.dict.D_BZ_ZDSJCZJG },
|
|
{ label: "事发时间", prop: "fssj", type: "datetime" },
|
|
{ label: "事件描述", prop: "shms", type: "textarea", width: "100%" },
|
|
{ label: "处置结果", prop: "czjg", type: "textarea", width: "100%" },
|
|
{ label: "经度", prop: "jd", type: "input", disabled: true },
|
|
{ label: "纬度", prop: "wd", type: "input", disabled: true },
|
|
]
|
|
setTimeout(() => {
|
|
showMap.value = true
|
|
}, 1000);
|
|
}
|
|
})
|
|
const drawShape = () => {
|
|
emitter.emit("drawShape", {
|
|
flag: "zdsj",
|
|
type: "point",
|
|
isclear: true
|
|
});
|
|
}
|
|
watch(() => props.zbData, (newVal) => {
|
|
if (newVal) {
|
|
listQuery.value.jd = newVal[0]
|
|
listQuery.value.wd = newVal[1]
|
|
}
|
|
}, { deep: true })
|
|
const closeDialog = () => {
|
|
showMap.value = false
|
|
elform.value.reset()
|
|
// 关闭对话框时移除事件监听器
|
|
emit("update:modelValue", false);
|
|
};
|
|
|
|
const submitForm = () => {
|
|
elform.value.submit((val) => {
|
|
qcckPost({ ...listQuery.value }, '/mosty-gsxt/zdsj/addEntity').then(res => {
|
|
console.log(res);
|
|
proxy.$message.success("新增成功");
|
|
emit("update:modelValue", false);
|
|
})
|
|
})
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped></style>
|