public-fuse/src/app/fire/view/dispatch/fireDetails.vue

<template>
  <div class="fire-details">
    <div class="sidebar">
      <el-menu
        :default-active="currentMenuKey"
        class="menu-vertical"
      >
        <div class="el-menu-item" slot="Menu-Item" @click="expandFireNews">
          火调信息
        </div>
        <el-menu-item 
          v-for="menu in menus" 
          :key="menu.key"
          :index="menu.key"
          @click="handleMenuClick(menu)"
        >
          {{ menu.label }}
        </el-menu-item>
      </el-menu>
    </div>
    <div class="content">
      <!-- 内容区域 -->
      <div class="content-placeholder">
        <!-- 这里可以根据选中的菜单项显示对应的内容 -->
        <SceneList 
          v-if="currentMenuKey === 'scene'"
          :case-id="caseId"
          :on-add-scenes="() => addCaseScenes({ caseId })"
        />
        <newCaseFile
          v-if="!['info', 'scene', 'screenRecord'].includes(currentMenuKey)"
          :currentMenuKey = currentMenuKey
          :case-id="caseId"
        />
        <div v-if="currentMenuKey === 'screenRecord'" style="height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
          基于查看页，实操录制。可录制视频、语音
          <el-button type="primary" @click="startRecording" style="margin-top: 10px;">
              开始录制
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, onMounted } from "vue";
import { useRoute, useRouter } from 'vue-router';
import { Fire } from "@/app/fire/store/fire";
import { getFuseCodeLink, checkScenesOpen, MenuItem, getSWKKSyncLink } from "@/view/case/help";
import { showCaseScenes, addCaseScenes, shareCase, downloadCase } from "@/view/case/quisk";
import { RouteName, router } from "@/router";
import { copyCase, getCaseSceneList, getCaseInfo, updateCaseInfo } from "@/store/case";
import SceneList from "@/view/case/sceneList.vue";
import newCaseFile from "@/view/case/newCaseFile.vue";
import { title as pageTitle, desc } from "@/store/system"; // 重命名为 pageTitle
import { appConstant } from "@/app/criminal/constant"; // 导入 appConstant 以便在组件卸载时恢复默认值
import { addFire, editFire, showLeaveMsgList, addLeaveMsg } from "./quisk";
import { useFirePagging } from "./pagging";

const { pagging } = useFirePagging();
// 从路由获取参数
const route = useRoute();
const vueRouter = useRouter();
const caseId = computed(() => Number(route.params.caseId));
const title = computed(() => route.query.title as string);

// 从路由查询参数中获取当前菜单项，如果没有则默认为 'scene'
const currentMenuKey = ref(route.query.tab as string || 'scene');

// 页面加载时自动触发当前选中的菜单项的点击事件
let currentRecord = ref<any>({}); // 当前的caseID获取的row
onMounted(() => {
  setTimeout(async() => {
    const caseInfo = await getCaseInfo(caseId.value!);
    if (caseInfo) {
      // 设置页面标题，使用案件信息
      pageTitle.value = caseInfo.caseTitle + " | 详情"; // 使用 pageTitle
      desc.value = "";
      currentRecord.value = caseInfo;
    } else {
      console.error("该案件不存在！");
      throw "该案件不存在！";
    }
    const menu = menus.value.find(menu => menu.key === currentMenuKey.value);
    if (menu) {
      menu.onClick();
    }
  }, 0);
});

// 处理菜单点击事件
const handleMenuClick = async(menu) => {
  currentMenuKey.value = menu.key;
    // 更新路由，保留当前的 tab 参数
    vueRouter.replace({
      path: route.path,
      query: {
        ...route.query,
        tab: menu.key
      }
    });
    
    // 执行菜单项的点击事件
    menu.onClick();
    const caseInfo = await getCaseInfo(caseId.value!);
    if (caseInfo) {
      // 设置页面标题，使用案件信息
      pageTitle.value = caseInfo.caseTitle + " | 详情"; // 使用 pageTitle
      desc.value = "";
    }
};
const expandFireNews = () => {
  // 不切换标签页，只打开编辑弹窗
  editHandler(currentRecord.value.tmProject);
}

// 开始录制方法
const startRecording = () => {
  if (!caseId.value) return;
  const currentCaseId = caseId.value;
  const fuseLink = getFuseCodeLink(currentCaseId);
  checkScenesOpen(currentCaseId, `${fuseLink}#sceneEdit/record`);
};

const editHandler = async (row: any) => {
  (await editFire({ fire: row }));
};

const menus = computed(() => {
  if (!caseId.value) {
    return [];
  }
  const currentCaseId = caseId.value;
  const fuseLink = getFuseCodeLink(currentCaseId);

  return [
    // {
    //   key: "info",
    //   disabled: false, // 默认不禁用，与原来不同
    //   label: "火调信息",
    //   onClick: () => {
    //     // 不切换标签页，只打开编辑弹窗
    //     editHandler(currentRecord.value.tmProject);
    //     // 恢复之前的标签页
    //     currentMenuKey.value = route.query.tab as string || 'scene';
    //   },
    // },
    {
      key: "scene",
      disabled: false, // 默认不禁用，与原来不同
      label: "场景管理",
      onClick: () => {
        // 不需要再次设置 currentMenuKey，因为已经在 handleMenuClick 中设置了
      },
    },
    {
      key: "drawing",
      disabled: false,
      label: "绘图管理",
      onClick: () => {
        // 不需要再次设置 currentMenuKey，因为已经在 handleMenuClick 中设置了
      },
    },
    {
      key: "photo",
      disabled: false,
      label: "照片制卷",
      onClick: () => {
        // 不需要再次设置 currentMenuKey，因为已经在 handleMenuClick 中设置了
      },
    },
    {
      key: "record",
      disabled: false,
      label: "勘验笔录",
      onClick: () => {
        // 不需要再次设置 currentMenuKey，因为已经在 handleMenuClick 中设置了
      },
    },
    {
      key: "list",
      disabled: false,
      label: "提取清单",
      onClick: () => {
        // 不需要再次设置 currentMenuKey，因为已经在 handleMenuClick 中设置了
      },
    },
    {
      key: "other",
      disabled: false,
      label: "其他资料",
      onClick: () => {
        // 不需要再次设置 currentMenuKey，因为已经在 handleMenuClick 中设置了
      },
    }, 
    { 
      key: "screenRecord", // 修改为唯一的 key，避免与勘验笔录冲突
      label: "屏幕录制",
      onClick: () => {
        checkScenesOpen(currentCaseId, `${fuseLink}#sceneEdit/record`);
      },
    },
  ];
});

// 获取当前选中的菜单项
const currentMenu = computed(() => {
  return menus.value.find(menu => menu.key === currentMenuKey.value);
});
</script>
<style>
.layer .content .view .main{
  margin: 0!important;
}
</style>
<style lang="scss" scoped>
.fire-details {
  display: flex;
  height: 100%;
  
  .sidebar {
    width: 200px;
    border-right: 1px solid #e6e6e6;
    .menu-vertical {
      width: 200px;
      padding-left: 30px;
      height: 100%;
      text-align: center;
    }
  }
  
  .content {
    flex: 1;
    padding: 0 16px 16px 16px;
    
    .content-placeholder {
      text-align: center;
      background: #fff;
      padding: 20px;
      height: calc(100% - 40px);
      overflow: auto;
    }
  }
}
</style>