public-fuse/src/view/case/newCaseFile.vue

<template>
  <!-- <com-head
    :options="options"
    v-model="currentTypeId"
    notContent
    v-if="options.length"
  /> -->

  <div class="new-body-layer body-layer">
    <template v-if="currentTypeId === 2">
      <Photos :caseId="caseId" :title="caseInfoData?.caseTitle || ''" />
    </template>
    <template v-else-if="currentTypeId === 3">
      <Records :caseId="caseId" :title="caseInfoData?.caseTitle || ''" />
    </template>
    <template v-else-if="currentTypeId === 4">
      <Manifest :caseId="caseId" :title="caseInfoData?.caseTitle || ''" />
    </template>
    <template v-else>
      <div class="body-head details-head">
        <h3 style="visibility: hidden">绘图管理</h3>
        <div>
          <template v-if="isDraw">
            <!-- <el-button type="primary" @click="gotoDraw(BoardType.map, -1)">
              创建{{ BoardTypeDesc[BoardType.map] }}
            </el-button> -->
            <el-button type="primary" @click="openMapDialog">
              创建{{ BoardTypeDesc[BoardType.map] }}
            </el-button>
            <!-- <el-button type="primary" @click="gotoDraw(BoardType.scene, -1)">
              创建{{ BoardTypeDesc[BoardType.scene] }}
            </el-button> -->
            <el-button type="primary" @click="openOverView()">
              创建{{ BoardTypeDesc[BoardType.scene] }}
            </el-button>
          </template>
          <el-button type="primary" @click="addCaseFileHandler">
            上传
          </el-button>
        </div>
      </div>
      <!-- <el-table
        :data="files"
        class="table-list"
        tooltip-effect="dark"
        style="width: 100%"
        size="large"
      >
        <el-table-column label="序号" width="100" v-slot:default="{ $index }">
          <span style="text-align: center">
            {{ $index + 1 }}
          </span>
        </el-table-column>
        <el-table-column
          label="名称"
          v-slot:default="{ row }: { row: CaseFile }"
        >
          <span v-if="!inputCaseTitles.includes(row)">
            {{ row.filesTitle }}
            <el-icon class="edit-title" @click="inputCaseTitles.push(row)">
              <EditPen />
            </el-icon>
          </span>
          <template v-else>
            <ElInput
              v-model="row.filesTitle"
              placeholder="请输入文件名"
              focus
              :maxlength="50"
              style="width: 280px"
            >
              <template #append>
                <el-button type="primary" plain @click="updateFileTitle(row)">
                  确定
                </el-button>
              </template>
            </ElInput>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime"></el-table-column>
        <el-table-column
          label="操作"
          v-slot:default="{ row }: { row: CaseFile }"
        >
          <span class="oper-span" @click="query(row)"> 查看 </span>
          <span
            class="oper-span"
            @click="gotoDraw(row.imgType!, row.filesId)"
            v-if="row.imgType !== null"
          >
            编辑
          </span>
          <span class="oper-span delBtn" @click="del(row)"> 删除 </span>
        </el-table-column>
      </el-table> -->

      <!-- 卡片网格布局 -->
      <div class="file-grid-container">
        <div 
          class="file-card" 
          v-for="(file, index) in files" 
          :key="file.filesId"
        >
          <!-- 卡片图片容器 -->
          <div class="card-image-container">
            <el-image
              ref="imageRef"
              :src="file.filesUrl"
              :preview-teleported="true"
              class="card-image"
            >
              <template #error>
                <div class="image-error">
                  <el-icon size="40" color="#c0c4cc">
                    <Document />
                  </el-icon>
                </div>
              </template>
            </el-image>
             
            <!-- 悬浮操作按钮 -->
            <div class="card-overlay">
              <div class="card-actions">
                <el-button 
                  class="card-overlay-btn"
                  size="default" 
                  circle
                  @click.stop="previewImage(index)"
                  title="查看"
                >
                  <el-icon :size="20"><ZoomIn /></el-icon>
                </el-button>
                <!-- 编辑按钮：old 类型不显示，其他类型显示 -->
                <el-button 
                  class="card-overlay-btn"
                  size="default" 
                  circle
                  @click.stop="handleEdit(file)"
                  v-if="file.type !== 'old'"
                  title="编辑"
                >
                <el-icon :size="20"><EditPen /></el-icon>
                </el-button>
                <!-- 对于 old 类型，保留原来的编辑逻辑 -->
                <!-- <el-button 
                  class="card-overlay-btn"
                  size="default" 
                  circle
                  @click.stop="gotoDraw(file.imgType!, file.filesId)"
                  v-if="file.type === 'old' && file.imgType !== null"
                  title="编辑"
                >
                  <el-icon :size="20"><Edit /></el-icon>
                </el-button> -->
                <el-button 
                  class="card-overlay-btn"
                  size="default" 
                  circle
                  @click.stop="del(file)"
                  title="删除"
                >
                  <el-icon :size="20"><Delete /></el-icon>
                </el-button>
              </div>
            </div>
          </div>
          
          <!-- 卡片底部：文件名 -->
          <div class="card-footer">
            <div class="file-title">
              <span v-if="!inputCaseTitles.includes(file)" :title="file.filesTitle" class="title-text">
                {{ file.filesTitle }}
                <el-icon class="edit-title" @click="inputCaseTitles.push(file)">
                  <EditPen />
                </el-icon>
              </span>
              <template v-else>
                <ElInput
                  v-model="file.filesTitle"
                  placeholder="请输入文件名"
                  focus
                  :maxlength="50"
                  size="default"
                  class="edit-input"
                >
                  <template #append>
                    <el-button type="primary" plain @click="updateFileTitle(file)">
                      确定
                    </el-button>
                  </template>
                </ElInput>
              </template>
            </div>
          </div>
          <el-image-viewer
            v-if="showPreview"
            :url-list="srcList"
            :initial-index="currentPreviewIndex"
            @close="showPreview = false"
          />
        </div>
      </div>

      <!-- 地图选择弹窗 -->
      <CreatMap 
        v-model="showMapDialog" 
        :caseId="caseId"
        @confirm="handleMapConfirm"
      />
    </template>
  </div>
</template>

<script setup lang="ts">
import comHead from "@/components/head/index.vue";
import { confirm } from "@/helper/message";
import { RouteName, router } from "@/router";
import { FileDrawType, BoardTypeDesc } from "@/constant/caseFile";
import { computed, onMounted, onUnmounted, ref, watchEffect } from "vue";
import { addCaseFile } from "./quisk";
import { title, desc } from "@/store/system";
import {
  CaseFile,
  CaseFileType,
  getCaseFileTypes,
  getCaseFiles,
  delCaseFile,
  BoardType,
} from "@/store/caseFile";
import { getCaseInfo, updateCaseInfo, getCaseTabulationList, getCaseOverviewList, updateCaseTabulation, updateCaseOverview, delCaseTabulation, delCaseOverview } from "@/store/case";
import { appConstant } from "@/app";
import { ElIcon, ElInput, ElMessage, ElImage, ElButton } from "element-plus";
import { EditPen, Document, View, Edit, Delete } from "@element-plus/icons-vue";
import Photos from "./photos/index.vue";
import Records from "./records/index.vue";
import Manifest from "./records/manifest.vue";
import CreatMap from "./drawMap/creatMap.vue";
import { user } from "@/store/user";
// 根基app打开不同地址
const appId = import.meta.env.VITE_APP_APP || 'fire'
const url = 'http://test-mix3d.4dkankan.com'
const props = defineProps<{
  caseId?: number;
  currentMenuKey?: string;
}>();

const caseId = computed(() => {
  if (props.caseId) {
    return props.caseId;
  }
  const caseId = router.currentRoute.value.params.caseId;
  if (caseId) {
    return Number(caseId);
  }
});
const caseInfoData = ref<any>();

const inputCaseTitles = ref<CaseFile[]>([]);

// 处理标题输入事件
const handleTitleInput = (file: CaseFile, value: string) => {
  file.filesTitle = value;
};

const updateFileTitle = async (caseFile: CaseFile) => {
  // 根据文件类型检查不同的标题字段
  const title = caseFile.filesTitle;
  if (!title || !title.trim()) {
    ElMessage.error("标题不能为空！");
    return;
  }
  
  try {
    // 根据文件类型调用不同的更新接口
    await updateCaseInfo(caseFile);
    // if (caseFile.type === 'old') {
    //   await updateCaseInfo(caseFile);
    // } 
    // else if (caseFile.type === 'tabulation') {
    //   // updateCaseTabulation 参数：id, caseId, store, viewport, cover, paperKey, overviewId, isAutoGen, listCover, mapUrl, high, width
    //   await updateCaseTabulation({
    //     id: caseFile.id,
    //     caseId: caseFile.caseId,
    //     store: caseFile.store,
    //     viewport: caseFile.viewport,
    //     cover: caseFile.cover,
    //     paperKey: caseFile.paperKey,
    //     overviewId: caseFile.overviewId,
    //     isAutoGen: caseFile.isAutoGen,
    //     listCover: caseFile.listCover,
    //     mapUrl: caseFile.mapUrl,
    //     high: caseFile.high,
    //     width: caseFile.width,
    //     title: title // 使用最新输入的 title
    //   });
    // } else if (caseFile.type === 'overview') {
    //   // updateCaseOverview 参数：id, caseId, store, title, cover, mapUrl, listCover, high, width, kankanCover
    //   await updateCaseOverview({
    //     id: caseFile.id,
    //     caseId: caseFile.caseId,
    //     store: caseFile.store,
    //     title: title, // 使用最新输入的 title
    //     cover: caseFile.cover,
    //     mapUrl: caseFile.mapUrl,
    //     listCover: caseFile.listCover,
    //     high: caseFile.high,
    //     width: caseFile.width,
    //     kankanCover: caseFile.kankanCover
    //   });
    // }
    
    inputCaseTitles.value = inputCaseTitles.value.filter(
      (item) => item !== caseFile
    );
    
    // 更新成功后刷新列表
    refresh();
    ElMessage.success("更新成功！");
  } catch (error) {
    console.error('更新失败:', error);
    ElMessage.error("更新失败！");
  }
};

const currentTypeId = ref<number>();
const types = ref<CaseFileType[]>([]);
const options = computed(() =>
  types.value.map((item) => ({
    name: item.filesTypeName,
    value: item.filesTypeId,
  }))
);

// 根据currentMenuKey设置currentTypeId
watchEffect(() => {
  if (props.currentMenuKey) {
    const MenuTypeEnum = {
      drawing: 1,
      photo: 2,
      record: 3,
      list: 4,
      other: 6
    };
    currentTypeId.value = MenuTypeEnum[props.currentMenuKey] || Number(props.currentMenuKey);
  }
});

const isDraw = computed(() => currentTypeId.value === FileDrawType);

const files = ref<CaseFile[]>([]);

// 计算预览图片列表
const srcList = computed(() => {
  return files.value.map(file => {
    // 根据文件类型返回对应的图片URL
    return  file.filesUrl;
  });
});

// 预览图片方法
const imageRef = ref()
const showPreview = ref(false)
const currentPreviewIndex = ref(0)
const previewImage = (index: number) => {
  console.log(index)
  const file = files.value[index];
  
  // 设置当前预览图片的索引
  currentPreviewIndex.value = index;
  
  // 根据文件类型处理查看逻辑
  if (file.type === 'old') {
    // old 类型使用原来的查看逻辑
    const ext = file.filesUrl
      .substring(file.filesUrl.lastIndexOf("."))
      .toLocaleLowerCase();
    
    // 如果是图片文件，让 el-image 的预览功能自动处理
    const imageExts = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg'];
    if (imageExts.includes(ext)) {
      showPreview.value = true
      return
    }
    
    if ([".raw", ".dcm"].includes(ext)) {
      window.open(
        `/${appId}/xfile-viewer/index.html?file=${file.filesUrl}&name=${file.filesTitle}&time=` +
          Date.now()
      );
    } else {
      window.open(file.filesUrl + "?time=" + Date.now());
    }
  } else {
    // tabulation 和 overview 类型的查看逻辑
    if (file.filesUrl) {
      // 如果有封面图，显示预览
      showPreview.value = true
    } else {
      // 否则直接打开文件
      window.open(file.filesUrl + "?time=" + Date.now());
    }
  }
};

const refresh = async () => {
  try {
    // 并行调用三个接口
    const [tabulationRes, overviewRes, caseFilesRes] = await Promise.all([
      getCaseTabulationList(caseId.value!),
      getCaseOverviewList(caseId.value!),
      getCaseFiles({
        caseId: caseId.value!,
        filesTypeId: currentTypeId.value,
      })
    ]);
    
    // 提取数据并为每种类型添加标记
    // let tabulationList = (tabulationRes?.data || []).map(item => ({
    //   ...item,
    //   title: item.title || '方位图',
    //   type: 'tabulation' as const
    // }));
    // // 方位图需要清除封面图为空的数据
    // tabulationList = tabulationList.filter(item => item.listCover !== '');
    // const overviewList = (overviewRes?.data || []).map(item => ({
    //   ...item,
    //   title: item.title || '平面图',
    //   type: 'overview' as const
    // }));
    const caseFiles = (caseFilesRes || []).map(item => ({
      ...item,
      type: (item.tabulationId && item.overviewId) ? 'overview' : item.tabulationId ? 'tabulation' : 'old'
    }));
    
    files.value = [...caseFiles];
  } catch (error) {
    console.error('获取文件列表失败:', error);
    files.value = [];
  }
};
watchEffect(() => caseId.value && currentTypeId.value && refresh());

const query = (file: CaseFile) => {
  const ext = file.filesUrl
    .substring(file.filesUrl.lastIndexOf("."))
    .toLocaleLowerCase();
    const appId = import.meta.env.VITE_APP_APP ||'fire'
  if ([".raw", ".dcm"].includes(ext)) {
    window.open(
      `/${appId}/xfile-viewer/index.html?file=${file.filesUrl}&name=${file.filesTitle}&time=` +
        Date.now()
    );
  } else {
    window.open(file.filesUrl + "?time=" + Date.now());
  }
};
const del = async (file: CaseFile) => {
  if (await confirm("确定要删除此数据？")) {
    try {
      // 根据文件类型调用不同的删除接口
      await delCaseFile({ caseId: caseId.value!, filesId: file.filesId });
      // if (file.type === 'old') {
      //   // old 类型的删除逻辑不变
      //   await delCaseFile({ caseId: caseId.value!, filesId: file.filesId });
      // } else if (file.type === 'tabulation') {
      //   // tabulation 类型调用 /fusion/caseTabulation/del
      //   await delCaseTabulation({ id: file.id! });
      // } else if (file.type === 'overview') {
      //   // overview 类型调用 /fusion/caseOverview/del
      //   await delCaseOverview({ id: file.id! });
      // }
      
      refresh();
      ElMessage.success("删除成功！");
    } catch (error) {
      console.error('删除失败:', error);
      ElMessage.error("删除失败！");
    }
  }
};

const addCaseFileHandler = async () => {
  await addCaseFile({ caseId: caseId.value!, fileType: currentTypeId.value! });
  refresh();
};

const gotoDraw = (type: BoardType, id: number) => {
  router.push({
    name: RouteName.drawCaseFile,
    params: { caseId: caseId.value!, type, id },
  });
};

// 处理不同类型的编辑逻辑
const handleEdit = (file: CaseFile) => {
  if (file.type === 'tabulation') {
    // tabulation 类型的编辑链接
    if(appId === 'fire'){
      window.open(`${url}/draw/fire/index.html#/tabulation?caseId=${caseId.value}&tabulationId=${file.tabulationId}&token=${user.value.token}`, '_blank');
    } else if(appId === 'criminal'){
      window.open(`${url}/draw/criminal/index.html#/tabulation?caseId=${caseId.value}&tabulationId=${file.tabulationId}&token=${user.value.token}`, '_blank');
    } else if(appId === 'cjzfire'){
      window.open(`${url}/draw/cjzfire/index.html#/tabulation?caseId=${caseId.value}&tabulationId=${file.tabulationId}&token=${user.value.token}`, '_blank');
    } else if(appId === 'xmfire'){
      window.open(`${url}/draw/xmfire/index.html#/tabulation?caseId=${caseId.value}&tabulationId=${file.tabulationId}&token=${user.value.token}`, '_blank');
    } else{
      window.open(`${url}/draw/fire/index.html#/tabulation?caseId=${caseId.value}&tabulationId=${file.tabulationId}&token=${user.value.token}`, '_blank');
    }
  } else if (file.type === 'overview') {
    // overview 类型的编辑链接
    if(appId === 'fire'){
      window.open(`${url}/draw/fire/index.html#/overview?caseId=${caseId.value!}&overviewId=${file.overviewId}&token=${user.value.token}`, '_blank');
    } else if(appId === 'criminal'){
      window.open(`${url}/draw/criminal/index.html#/overview?caseId=${caseId.value!}&overviewId=${file.overviewId}&token=${user.value.token}`, '_blank');
    } else if(appId === 'cjzfire'){
      window.open(`${url}/draw/cjzfire/index.html#/overview?caseId=${caseId.value!}&overviewId=${file.overviewId}&token=${user.value.token}`, '_blank');
    } else if(appId === 'xmfire'){
      window.open(`${url}/draw/xmfire/index.html#/overview?caseId=${caseId.value!}&overviewId=${file.overviewId}&token=${user.value.token}`, '_blank');
    } else{
      window.open(`${url}/draw/fire/index.html#/overview?caseId=${caseId.value!}&overviewId=${file.overviewId}&token=${user.value.token}`, '_blank');
    }
  }
};
// 地图弹窗相关
const showMapDialog = ref(false)

// 打开地图选择弹窗，新版本地图选择
const openMapDialog = () => {
  showMapDialog.value = true
}
// 创建现场图
const openOverView = () => {
  // let avtUrl = {
  //   criminal: `/criminal/criminal.ico`,
  //   fire: `/fire/fire.ico`,
  //   cjzfire: `/cjzfire/cjzfire.ico`,
  // }
  console.log('appId', appId)
  if(appId === 'fire'){
    window.open(`${url}/draw/fire/index.html#/overview?caseId=${caseId.value!}&token=${user.value.token}`, '_blank')
  } else if(appId === 'criminal'){
    window.open(`${url}/draw/criminal/index.html#/overview?caseId=${caseId.value!}&token=${user.value.token}`, '_blank')
  } else if(appId === 'cjzfire'){
    window.open(`${url}/draw/cjzfire/index.html#/overview?caseId=${caseId.value!}&token=${user.value.token}`, '_blank')
  } else if(appId === 'xmfire'){
    window.open(`${url}/draw/xmfire/index.html#/overview?caseId=${caseId.value!}&token=${user.value.token}`, '_blank')
  } else{
    window.open(`${url}/draw/fire/index.html#/overview?caseId=${caseId.value!}&token=${user.value.token}`, '_blank')
  }
}

// 处理地图选择确认
const handleMapConfirm = async (location: any) => {
  console.log('选择的地图位置:', location)
  // 这里可以将位置信息保存到案件中，或者创建地图绘图
  try {
    // 可以调用相关API保存位置信息
    // 或者直接跳转到绘图页面
    await router.push({
      name: RouteName.drawCaseFile,
      params: { 
        caseId: caseId.value!, 
        type: BoardType.map, 
        id: -1 
      },
      query: {
        location: JSON.stringify(location)
      }
    })
  } catch (error) {
    console.error('处理地图位置失败:', error)
  }
}

onMounted(async () => {
  try {
    types.value = await getCaseFileTypes();
    // 如果有传入currentMenuKey，则使用它，否则使用默认值
    if (props.currentMenuKey) {
      const MenuTypeEnum = {
        drawing: 1,
        photo: 2,
        record: 3,
        list: 4,
        other: 6
      };
      currentTypeId.value = MenuTypeEnum[props.currentMenuKey] || Number(props.currentMenuKey);
    } else {
      currentTypeId.value = types.value[0].filesTypeId;
    }
    
    // 确保在获取案件信息之前已经有有效的 caseId
    if (caseId.value) {
      const caseInfo = await getCaseInfo(caseId.value);
      if (caseInfo) {
        caseInfoData.value = caseInfo;
        // title.value = caseInfo.caseTitle + " | 卷宗管理";
        // desc.value = "";
      } else {
        console.error("该案件不存在！");
        throw "该案件不存在！";
      }
    } else {
      console.error("案件ID不存在！");
      throw "案件ID不存在！";
    }
  } catch (error) {
    console.error("加载案件信息失败：", error);
    // debugger;
    //TODO 由于没有登录状态可以判断或hook插入，只能延时进入no-case router当前的router
    setTimeout(() => {
      console.log("current-router", router.currentRoute.value.name);
      if (router.currentRoute.value.name !== "login") {
        router.replace({ name: RouteName.noCase });
      }
    }, 1000);
  }
});

onUnmounted(() => {
  title.value = appConstant.title;
  desc.value = appConstant.desc;
});
</script>

<style scoped lang="scss">
.new-body-layer {
  background: transparent;
  padding-left: 0;
  height: calc(100% - 10px);
  :deep(.photo) {
    .left{
      padding-left: 24px;
    }
    .my-photo-upload{
      text-align: left;
    }
  }
  :deep(.records) {
    padding-top: 0;
  }
  .details-head{
    height: 56px;
    align-items: flex-start;
  }
 }

.edit-title {
  cursor: pointer;
  margin-left: 10px;
}

// 卡片网格布局样式
.file-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 387px);
  gap: 16px;
  padding: 16px 0;
}

.file-card {
  background: #ffffff;
  // transition: all 0.3s ease;
  width: 387px;
  height: 303px;
  display: flex;
  flex-direction: column;

  &:hover {
    // box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    // transform: translateY(-2px);
    
    .card-overlay {
      opacity: 1;
    }
  }
  :deep(.el-image-viewer__canvas){
    background-color: #000;
  }
}

.card-image-container {
  position: relative;
  flex: 1;
  overflow: hidden;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
}

.card-image {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.image-error {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card-actions {
  display: flex;
  gap: 12px;
  .card-overlay-btn{
    width: 20px;
    background: transparent;
    border: none;
    color: #F2F2F2;
    padding: 0;
  }
}

.card-footer {
  padding: 12px 0;
  background: #ffffff;
}

.file-title {
  position: relative;
  width: 100%;
  text-align: left;
  .title-text {
    display: inline-block;
    width: 90%;
    font-size: 14px;
    font-weight: 500;
    color: #303133;
    text-align: left;
    // display: flex;
    // justify-content: space-between;
    // align-items: center;
    word-break: break-all;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.4;
  }
  .edit-title{
    position: absolute;
    right: 0;
  }
  .edit-input {
    :deep(.el-input__wrapper) {
      height: 30px;
    }
    
    :deep(.el-input-group__append) {
      .el-button {
        height: 30px;
      }
    }
  }
}

.file-time {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

// 响应式设计
@media (max-width: 1200px) {
  .file-grid-container {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

@media (max-width: 768px) {
  .file-grid-container {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
  }
  
  .file-card {
    height: 240px;
  }
  
  .card-footer {
    padding: 8px 0;
  }
}
</style>