yjhtgl-web/src/views/duty/eventing/EventEditDialog.vue

<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>