|
|
@@ -0,0 +1,236 @@
|
|
|
+<template>
|
|
|
+ <el-dialog ref="formDialogRef" :model-value="visible" :title="props.title" width="650px" append-to-body @close="closeDialog">
|
|
|
+ <el-form ref="eventFormRef" :model="form" :rules="rules" label-width="80px">
|
|
|
+ <el-form-item label="事件标题" prop="event_title">
|
|
|
+ <el-input v-model="form.event_title" placeholder="请输入事件标题" />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="事件类型" prop="event_type">
|
|
|
+ <el-select v-model="form.event_type" placeholder="请选择事件类型" clearable>
|
|
|
+ <el-option v-for="item in mm_event_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="事件等级" prop="event_level">
|
|
|
+ <el-select v-model="form.event_level" placeholder="请选择事件等级" clearable style="width:calc(100% - 30px)">
|
|
|
+ <el-option v-for="item in mm_event_level" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-icon @click="eventLevelInfoDialogVisible = true" size="large" style="margin-left:8px"><WarningFilled /></el-icon>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="事件状态" prop="event_status">
|
|
|
+ <el-select v-model="form.event_status" placeholder="请选择事件状态" clearable :readonly="true">
|
|
|
+ <el-option v-for="item in mm_event_state" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="事发时间" prop="event_time">
|
|
|
+ <el-date-picker v-model="form.event_time" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择事发时间"></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="上报时间" prop="report_time">
|
|
|
+ <el-date-picker v-model="form.report_time" value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择上报时间"></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="伤亡情况">
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-switch
|
|
|
+ size="large"
|
|
|
+ v-model="form.casualties"
|
|
|
+ inline-prompt
|
|
|
+ active-text="已上报"
|
|
|
+ inactive-text="未上报"
|
|
|
+ active-value="1"
|
|
|
+ inactive-value="0"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4" v-show="form.casualties === '1'">
|
|
|
+ <el-input v-model="form.deaths" placeholder="死亡">
|
|
|
+ <template #suffix>人</template>
|
|
|
+ </el-input>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4" v-show="form.casualties === '1'">
|
|
|
+ <el-input v-model="form.injuries" placeholder="受伤">
|
|
|
+ <template #suffix>人</template>
|
|
|
+ </el-input>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4" v-show="form.casualties === '1'">
|
|
|
+ <el-input v-model="form.missing" placeholder="失踪">
|
|
|
+ <template #suffix>人</template>
|
|
|
+ </el-input>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="联系方式" prop="contact">
|
|
|
+ <el-input v-model="form.contact" placeholder="请输入联系方式" />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="事件来源" prop="event_source">
|
|
|
+ <el-input v-model="form.event_source" placeholder="请输入事件来源" />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="事件地点" prop="address">
|
|
|
+ <el-input v-model="form.address" placeholder="请输入事件地点" readonly >
|
|
|
+ <template #append>
|
|
|
+ <el-button @click="openMapDialog" type="primary">地图定位</el-button>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="事件描述" prop="event_description">
|
|
|
+ <el-input type="textarea" v-model="form.event_description" placeholder="请输入事件描述" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button :loading="buttonLoading" type="primary" @click="submitForm">确定</el-button>
|
|
|
+ <el-button @click="closeDialog">取消</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 事故等级弹窗 -->
|
|
|
+ <EventLevelInfoDialog v-model="eventLevelInfoDialogVisible" @closeDialog="closeEventLevelInfoDialog" />
|
|
|
+
|
|
|
+ <!-- 地图弹窗 -->
|
|
|
+ <company-map v-model:visible="mapDialogVisible" :address="form.address" @confirm="handleMapChange"></company-map>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { ref, reactive, toRefs } from 'vue';
|
|
|
+import { addEvent, editEvent, postEditEvent } from '@/api/duty/eventing';
|
|
|
+import EventLevelInfoDialog from './EventLevelInfoDialog.vue';
|
|
|
+
|
|
|
+const proxy = getCurrentInstance()?.proxy;
|
|
|
+const { mm_event_type, mm_event_level, mm_event_state, region } = toRefs<any>(proxy?.useDict('mm_event_type', 'mm_event_level', 'mm_event_state', 'region'));
|
|
|
+
|
|
|
+const buttonLoading = ref(false);
|
|
|
+const eventFormRef = ref();
|
|
|
+const visible = ref(false);
|
|
|
+
|
|
|
+interface Props {
|
|
|
+ modelValue: boolean;
|
|
|
+ eventId: string;
|
|
|
+ title: string;
|
|
|
+}
|
|
|
+const props = withDefaults(defineProps<Props>(), {
|
|
|
+ modelValue: false
|
|
|
+});
|
|
|
+
|
|
|
+const emits = defineEmits(['update:modelValue']);
|
|
|
+watch(
|
|
|
+ () => props.modelValue,
|
|
|
+ () => {
|
|
|
+ // 界面显示初始化
|
|
|
+ if (props.modelValue) {
|
|
|
+ if(props.eventId != "") {
|
|
|
+ editEvent({ event_id: props.eventId }).then((res) => {
|
|
|
+ form.value = res.data
|
|
|
+ });
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ form.value = { ...initFormData };
|
|
|
+ eventFormRef.value?.resetFields();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ visible.value = props.modelValue;
|
|
|
+ }
|
|
|
+);
|
|
|
+
|
|
|
+// 表单初始数据
|
|
|
+const initFormData = {
|
|
|
+ event_title: '', // 事件标题
|
|
|
+ event_type: '', // 事件类型
|
|
|
+ event_level: '', // 事件等级
|
|
|
+ event_status: '0', // 事件状态
|
|
|
+ address: '', // 事件地点
|
|
|
+ longitude: '', // 经度
|
|
|
+ latitude: '', // 纬度
|
|
|
+ event_time: '',// 事发时间
|
|
|
+ report_time: '',// 上报时间
|
|
|
+ casualties: '0', // 伤亡情况
|
|
|
+ deaths: '',
|
|
|
+ injuries: '',
|
|
|
+ missing: '',
|
|
|
+ event_source: '', // 事件来源
|
|
|
+ event_description: '', // 事件描述
|
|
|
+ contact: '' // 联系方式
|
|
|
+};
|
|
|
+
|
|
|
+// 表单数据
|
|
|
+const data = reactive({
|
|
|
+ form: { ...initFormData },
|
|
|
+ rules: {
|
|
|
+ event_title: [{ required: true, message: '事件标题不能为空', trigger: 'blur' }],
|
|
|
+ event_type: [{ required: true, message: '事件类型不能为空', trigger: 'blur' }],
|
|
|
+ event_level: [{ required: true, message: '事件等级不能为空', trigger: 'blur' }],
|
|
|
+ event_status: [{ required: true, message: '事件状态不能为空', trigger: 'blur' }],
|
|
|
+ address: [{ required: true, message: '事件地点不能为空', trigger: 'blur' }],
|
|
|
+ event_time: [{ required: true, message: '事发时间不能为空', trigger: 'blur' }],
|
|
|
+ report_time: [{ required: true, message: '上报时间不能为空', trigger: 'blur' }],
|
|
|
+ event_source: [{ required: true, message: '事件来源不能为空', trigger: 'blur' }],
|
|
|
+ event_description: [{ required: true, message: '事件描述不能为空', trigger: 'blur' }],
|
|
|
+ contact: [{ required: true, message: '联系方式不能为空', trigger: 'blur' }]
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const { form, rules } = toRefs(data);
|
|
|
+
|
|
|
+// 提交表单
|
|
|
+const submitForm = () => {
|
|
|
+ eventFormRef.value?.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ buttonLoading.value = true;
|
|
|
+ // 打印表单数据
|
|
|
+ console.log('表单数据', form.value);
|
|
|
+ if(props.eventId === "") {
|
|
|
+ addEvent(form.value)
|
|
|
+ .then((res) => {
|
|
|
+ proxy?.$modal.msgSuccess(res.msg);
|
|
|
+ closeDialog()
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ buttonLoading.value = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ postEditEvent(form.value)
|
|
|
+ .then((res) => {
|
|
|
+ proxy?.$modal.msgSuccess(res.msg);
|
|
|
+ closeDialog()
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ buttonLoading.value = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+const closeDialog = () => {
|
|
|
+ emits('update:modelValue', false);
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+// 地图定位
|
|
|
+const mapDialogVisible = ref(false);
|
|
|
+const openMapDialog = () => {
|
|
|
+ mapDialogVisible.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+const handleMapChange = (data) => {
|
|
|
+ form.value.address = data.address;
|
|
|
+ form.value.longitude = data.lnglat[0];
|
|
|
+ form.value.latitude = data.lnglat[1];
|
|
|
+ mapDialogVisible.value = false;
|
|
|
+};
|
|
|
+
|
|
|
+// 事故等级弹窗
|
|
|
+const eventLevelInfoDialogVisible = ref(false);
|
|
|
+
|
|
|
+const closeEventLevelInfoDialog = () => {
|
|
|
+ eventLevelInfoDialogVisible.value = false;
|
|
|
+};
|
|
|
+</script>
|
