迭代三修改

src/views/routineCommandMap/LeftSection.vue

@@ -46,7 +46,9 @@
             </tr>
           </thead>
           <tr v-for="(item, index) in eventList" :key="index" class="tr">
-            <td class="td">{{ item.event_title }}</td>
+            <td class="td">
+              <div @click="handleView(item.event_id)">{{ item.event_title }}</div>
+            </td>
             <td class="td">
               <dict-tag :options="mm_event_type" :value="item.event_type" />
             </td>
@@ -56,7 +58,7 @@
               <dict-tag :options="mm_event_state" :value="item.event_status" />
             </td>
             <td class="td">
-              <div class="flex">
+              <div v-if="item.event_status === '0' || item.event_status === '1'" class="flex">
                 <div @click="enterCommand(item)">进入指挥</div>
               </div>
             </td>
@@ -69,18 +71,25 @@
   <Dialog v-model="inspectionNewsState.showListDialog" title="巡查消息列表" width="70%"></Dialog>
   <!--事件接报弹窗-->
   <EventManage v-model="eventManageState.showListDialog" title="事件管理列表" width="70%"></EventManage>
+  <eventDetails
+    v-model="eventDetailsState.show"
+    :title="eventDetailsState.title"
+    :event-id="eventId"
+    @update:model-value="eventList"
+  ></eventDetails>
 </template>
 
 <script lang="ts" setup>
 import Dialog from '@/components/Dialog/index.vue';
 import EventManage from '@/views/routineCommandMap/EventManage.vue';
 import { ref, reactive, toRefs } from 'vue';
-import { getEvent, deleteEvent } from '@/api/duty/eventing';
+import { getEvent } from '@/api/duty/eventing';
+import eventDetails from './eventing/eventDetails.vue';
 const eventList = ref([]);
 const loading = ref(true);
 const total = ref(0);
 const router = useRouter();
-
+const eventId = ref('');
 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')
@@ -96,7 +105,17 @@ const comprehensiveDutyState = reactive({
     operatorOnDuty: '王珊珊'
   }
 });
-
+const eventDetailsState = reactive({
+  show: false,
+  title: ''
+});
+//查看事件详情
+const handleView = (id: string) => {
+  // 查看事件详情逻辑
+  eventId.value = id;
+  eventDetailsState.title = '查看事件';
+  eventDetailsState.show = true;
+};
 // 巡查消息
 const inspectionNewsState = reactive({
   showListDialog: false,
@@ -116,6 +135,7 @@ const showInspectionNewsState = () => {
 };
 
 const initFormData = {
+  event_id: '',
   event_title: '', // 事件标题
   event_type: '', // 事件类型
   event_status: '', // 事件状态

src/views/routineCommandMap/eventing/eventDetails.vue

@@ -141,7 +141,7 @@
 <script lang="ts" setup>
 import { getEventDetail, deleteEvent } from '@/api/duty/eventing';
 import EditCasualtiesDialog from './EditCasualtiesDialog.vue';
-import { ref } from 'vue';
+import { onMounted, onBeforeUnmount, watch, ref } from 'vue';
 
 const route = useRoute();
 const router = useRouter();
@@ -296,12 +296,26 @@ onMounted(() => {
   getEventDetail(props.eventId);
   // });
 });
+// 监听 modelValue 的变化
+watch(
+  () => props.modelValue,
+  (newVal, oldVal) => {
+    if (newVal) {
+      fetchEventDetail();
+    }
+  }
+);
 // 关闭弹窗
 const closeDialog = () => {
   emits('update:modelValue', false);
   // detailData.value = { eventId: '' };
-  fetchEventDetail();
+  // 清除数据
+  detailData.value = {};
 };
+// 组件卸载前清空数据
+onBeforeUnmount(() => {
+  detailData.value = {};
+});
 </script>
 
 <style lang="scss" scoped>