yjdp-web/src/views/emergencyCommandMap/LeftSection/CloseCommand.vue

<template>
  <Dialog
    custom-show
    :type="props.flag ? 'xs' : 'sm'"
    :title="title"
    confirm-text="结束指挥"
    confirm-class="common-btn-danger"
    @close="closeDialog"
    @confirm="endProcess"
  >
    <el-form v-if="!props.flag" ref="eventFormRef" :model="form" :rules="rules" label-width="190px">
      <el-form-item label="灾害事件" prop="event_title">
        <el-select
          v-model="form.event_title"
          placeholder="请选择事件"
          class="custom-select"
          size="large"
          popper-class="custom-select-popper"
          :teleported="false"
          clearable
          @change="selectEvent"
        >
          <el-option v-for="item in events" :key="item.event_id" :label="item.event_title" :value="item.event_title"></el-option>
        </el-select>
      </el-form-item>
      <span style="color: red; display: block; margin-top: 10px; margin-left: 10px"
        >注意：本次指挥未关联事件，指挥记录将不会保留，若需要保留指挥记录，请关联事件</span
      >
    </el-form>
    <div v-else>{{ form.event_title }}</div>
  </Dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, watch, onMounted } from 'vue';
import { editEvent, registeredEvent, closeEvent, getEventDetail } from '@/api/duty/eventing';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus'; // 确保已正确导入 ElMessage

const proxy = getCurrentInstance()?.proxy;
const router = useRouter();
const buttonLoading = ref(false);
const eventFormRef = ref();
const events = ref([]);
const route = useRoute();
const urlParams = new URLSearchParams(route.query);
const address = urlParams.get('address') || '';
const latitude = urlParams.get('latitude') || '';
const longitude = urlParams.get('longitude') || '';

interface Props {
  modelValue: boolean;
  flag: boolean;
  eventId: string;
  title: string;
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  flag: false,
  eventId: '',
  title: ''
});

const emits = defineEmits(['update:modelValue', 'closeEvent']);
// 表单初始数据
const initFormData = {
  event_title: '', // 事件标题
  event_id: '',
  event_type: '', // 事件类型
  event_level: '', // 事件等级
  event_status: '0', // 事件状态
  address: address, // 地址
  latitude: latitude, // 纬度
  longitude: longitude // 经度
};

// 表单数据
const data = reactive({
  form: { ...initFormData },
  rules: {
    event_title: [{ required: true, message: '事件标题不能为空', trigger: 'blur' }]
  }
});

const { form, rules } = toRefs(data);

// 获取事件详情
const fetchEventDetail = async (id: string) => {
  try {
    const response = await getEventDetail({ event_id: id });
    if (response && response.data) {
      form.value = response.data;
    }
    console.log('Event detail:', form.value);
  } catch (error) {
    console.error('Failed to fetch event detail:', error);
  }
};

// 获取注册的事件列表
const fetchEvents = async () => {
  try {
    const response = await registeredEvent({});
    if (response && response.data && Array.isArray(response.data)) {
      events.value = response.data;
    }
  } catch (error) {
    console.error('Failed to fetch events:', error);
  }
};

// 初始化事件列表
onMounted(() => {
  fetchEvents();
});
// 监听 modelValue 变化
watch(
  () => props.modelValue,
  async (newVal) => {
    if (newVal) {
      if (props.eventId) {
        await fetchEventDetail(props.eventId);
      } else {
        form.value = { ...initFormData };
        eventFormRef.value?.resetFields();
      }
    }
  },
  {
    immediate: true
  }
);

// 关闭对话框
const closeDialog = () => {
  emits('update:modelValue', false);
  if (eventFormRef.value) {
    eventFormRef.value.resetFields(); // 仅重置表单验证状态
  }
  // 不需要重置 form.value.event_id 和 form.value.event_title
};

// 结束指挥
const endProcess = () => {
  // 如果 flag 为 false，则需要选择一个事件
  if (!props.flag) {
    if (!form.value.event_id) {
      proxy?.$message.error('请先选择一个事件');
      return;
    }
    // 提交选择的事件信息
    submitSelectedEvent()
      .then(() => {
        console.log('Selected event updated successfully.');
        // 调用 closeEvent 接口关闭事件
        submitForm()
          .then(() => {
            closeDialog();
            router.go(-1);
          })
          .catch((error) => {
            console.error('Failed to close event:', error);
            proxy?.$message.error('关闭事件失败，请检查您的输入');
          });
      })
      .catch((error) => {
        console.error('Failed to submit the form:', error);
        proxy?.$message.error('提交表单失败，请检查您的输入');
      });
  } else {
    // 如果 flag 为 true，则直接调用 closeEvent 接口关闭事件
    submitForm()
      .then(() => {
        closeDialog();
        router.go(-1); // 立即返回上一级页面
      })
      .catch((error) => {
        console.error('Failed to submit the form:', error);
        proxy?.$message.error('提交表单失败，请检查您的输入');
      });
  }
};

// 提交表单
/*const submitForm = async () => {
  return new Promise((resolve, reject) => {
    eventFormRef.value?.validate(async (valid) => {
      if (valid) {
        buttonLoading.value = true;
        try {
          // 构造请求参数
          const params = {
            eventId: form.value.event_id,
            address: form.value.address,
            latitude: form.value.latitude,
            longitude: form.value.longitude
          };
          console.log('使用参数发送请求:', params); // 添加调试信息
          // 提交关闭事件请求
          await closeEvent(params);
          proxy?.$modal.msgSuccess('已成功关闭');
          resolve(); // 解析Promise表示成功
          closeDialog();
        } catch (error) {
          console.error('Failed to close event:', error);
          reject(error); // 拒绝Promise表示失败
          proxy?.$message.error('关闭事件失败，请检查您的输入');
        } finally {
          buttonLoading.value = false;
        }
      } else {
        reject(new Error('Validation failed')); // 验证失败也拒绝Promise
        proxy?.$message.error('表单验证失败，请检查您的输入');
      }
    });
  });
};*/

// 提交选择的事件信息
const submitForm = async () => {
  // 仅在 props.flag 为 false 时进行表单验证
  if (!props.flag) {
    const valid = await eventFormRef.value?.validate();

    if (!valid) {
      ElMessage.error('表单验证失败，请检查您的输入');
      throw new Error('Validation failed');
    }
  }

  // 设置按钮加载状态
  buttonLoading.value = true;

  try {
    // 构造请求参数
    const params = {
      eventId: form.value.event_id,
      address: form.value.address,
      latitude: form.value.latitude,
      longitude: form.value.longitude
    };
    console.log('使用参数发送请求:', params); // 添加调试信息

    // 提交关闭事件请求
    await closeEvent(params);

    // 显示成功消息
    ElMessage.success('已成功关闭');

    // 关闭对话框
    closeDialog();

    // 如果需要返回特定信息，可以在这里返回
    return;
  } catch (error) {
    console.error('Failed to close event:', error);
    ElMessage.error('关闭事件失败，请检查您的输入');
    throw error; // 继续抛出错误以便上层处理
  } finally {
    // 重置按钮加载状态
    buttonLoading.value = false;
  }
};

// 提交选择的事件信息
const submitSelectedEvent = async () => {
  // 提交选择的事件信息
  if (form.value.event_id) {
    // 更新事件信息
    const updateParams = {
      event_id: form.value.event_id,
      address: form.value.address,
      latitude: form.value.latitude,
      longitude: form.value.longitude
    };
    try {
      await editEvent(updateParams);
      // 提交关闭事件请求
    } catch (error) {
      console.error('Failed to update or close event:', error);
      throw error; // 抛出错误以便外层处理
    }
  }
};

// 选择事件
const selectEvent = (eventTitle) => {
  const selectedItem = events.value.find((event) => event.event_title === eventTitle);
  if (selectedItem) {
    form.value.event_id = selectedItem.event_id;
    form.value.event_title = selectedItem.event_title;
    console.log('Selected Event ID:', form.value.event_id);
    console.log('Selected Event Title:', form.value.event_title);
  }
};
</script>
<style lang="scss" scoped>
.dialog-footer {
  height: 150px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>