caseEditor/src/view/originalPhoto/index.vue

<template>
  <div class="scene abstract">
    <!-- <el-button class="w-full my-4"  style="margin-left: 0; margin-right: 0">添加场景</el-button> -->
    <div class="scene-list">
      <div class="list">
        <div v-for="(item, index) in list" :key="index"  v-show="show?recursiveSearch(item.childrenList):true">
          <div class="listTitle">{{ item.filesTypeName }}</div>
          <div
            class="itemList"
            v-for="(items, indexs) in item.childrenList"
            @click="handleClick(index, indexs)"
            :class="{ active: childrenList.value == items.filesTypeId }"
            :key="indexs"
          >
            <div class="ItemTitle">{{ items.filesTypeName }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="abstractCentenr">
      <div class="centerTop" v-show="!show">
        <div class="import" @click="handleImport">
          <el-icon size="26" color="#26559B">
          <i style="font-size: 26px; color: #26559B" class="iconfont icon-import"></i></el-icon>
          <div class="name">导入</div>
        </div>
        <el-upload
          class="upload-demo upload"
          drag
          :before-upload="upload"
          :http-request="(e) => uploadNewFile({file: e.file, caseId:caseId})"
          :on-success="handleSuccess"
          :on-preview="previewFile"
          :show-file-list="false"
          :accept="accept"
          :before-remove="removeFile"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          multiple
        >
          <el-icon class="el-icon--upload" style="margin-top: 20px" size="26"
            >
            <i style="font-size: 26px; color: #26559B" class="iconfont icon-Upload"></i>
            </el-icon>
          <div class="el-upload__text">
            点击或拖拽文件上传<br />支持 jpg、png、jpeg ≤ 50MB
          </div>
        </el-upload>
      </div>
      <div class="centerBottom">
        <div class="imgList">
          <viewImg ref="viewImgRef" :key="childrenList.value" :list="childrenList.caseFilesList" @handleEdit="handleEdit" @refresh="getList" @handleDel="handleDel" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import viewImg from "@/components/viewImg/list.vue";
import { computed, ref, watch } from "vue";
import { updateByTreeFileLists, getByTreeFileLists, uploadNewFile, addByMediaLiBrary, show } from "@/store/case";
import { useUpload } from "@/hook/upload";
import { recursiveSearch } from "@/util/index.ts";
import {
  Upload,
  DocumentAdd,
  CircleCheck,
  Delete,
  Edit,
} from "@element-plus/icons-vue";
import { router } from "@/router";
import { addCaseFile, setTypeFile, addCaseScenes } from "./quisk";
const caseId = computed(() => router.currentRoute.value?.params?.caseId);
const filesTypeId = ref(0);
const active2 = ref(0);
const active = ref(true);
const settype = ref(false);
const { size, fileList, upload, removeFile, previewFile, file, accept } = useUpload({
  maxSize: 50 * 1024 * 1024,
  formats: [".jpg", ".png", ".jpeg"],//".mp4", ".wav", ".mp3", ".shp"
});
const viewImgRef = ref(null)
const childrenList = ref({
  list: [],
  value: "",
  caseFilesList: [],
});
const showModal = ref(false);
const srcList = ref([]);
const list = ref([]);
const activeNames = ref(["1"]);
const handleChange = (val: string[]) => {
  console.log(val);
};
getList();
function handleActive(params) {
  console.log("handleActive", params);
}

function getList() {
  updateByTreeFileLists(caseId.value).then((res) => {
    list.value =
      res.find((ele) => ele.filesTypeName == "原始照片")?.childrenList || [];
    let items = []
    if(show.value){//展示也过滤现场照片空数据
      list.value.map(ele => {
        ele.childrenList = ele.childrenList?.filter(element => element.caseFilesList) || []
        return ele
      })
    }
    list.value.map((item) => {
      items.push(...item.childrenList)
    });
    srcList.value = items
    let activeIndex = srcList.value.findIndex((item) => item.filesTypeId == childrenList.value.value) || 0;
    if(!childrenList.value.value){
      activeIndex = 0
    }
    console.log("srcList.value", activeIndex, childrenList.value.value, srcList.value);
    let activeItem = srcList.value[activeIndex]; //.find((item) => item.caseFilesList && item.caseFilesList.length);
    if (!activeItem) {
      return;
    }
    console.log("srcList.value", srcList.value, activeItem);
    childrenList.value.value = activeItem.filesTypeId;
    childrenList.value.caseFilesList = activeItem.caseFilesList || [];
  });
}
async function handleAdd() {
  await addCaseFile({ caseId: caseId.value, filesTypeName: ["原始照片"] });
  getList();
}
const handleClick = (index, indexs) => {
  let childrenLists = list.value[index].childrenList;
  let activeItem = childrenLists[indexs];
  console.log("handleClick", activeItem, index, indexs);
  if (!activeItem) {
    return;
  }
  childrenList.value.value = activeItem.filesTypeId;
  let caseFilesList = activeItem.caseFilesList && activeItem.caseFilesList.map(item => {
      item.checked = false;
      return item;
    }) || [];
  childrenList.value.caseFilesList = caseFilesList
};
const handleClick2 = (val) => {
  childrenList.value.caseFilesList =
    childrenList.value.list[val.index]?.caseFilesList || [];
  console.log("handleClick2", active2.value, val);
};
async function handleSuccess(response) {
  await addByMediaLiBrary({
    caseId: caseId.value,
    uploadId: response.data.id,
    filesTypeId: childrenList.value.value,
  });
  getList()
}
async function handleItem(type, item) {
  console.log("handleItem", type, item);
  if (type == "edit") {
    await setTypeFile({
      ...item,
      caseId: caseId.value,
      fileOptions: list.value,
    });
  }
  getList();
}
const handleEdit = async (lists) => {
  console.log("handleEdit", list.value, lists, lists.map(ele => ele.filesId));
    await setTypeFile({
      caseId: caseId.value,
      filesTypeId: childrenList.value.value,
      fileOptions: list.value,
      filesIds: lists.map(ele => ele.filesId)
    });
    getList();
};
function closeChecked() {
  console.log("closeChecked", viewImgRef.value);
  // viewImgRef.value.mylist = []
  childrenList.value.caseFilesList.forEach(item => {
    item.checked = false;
  })
}
async function handleImport() {
  let uploadIds = await addCaseScenes({caseId: caseId.value, fileTypes: [0], formats: [".jpg",".png",".jpeg"] })
  if(uploadIds == false || uploadIds && uploadIds.length == 0 ){
    return
  }
  await addByMediaLiBrary({
    caseId: caseId.value,
    uploadIds,
    filesTypeId: childrenList.value.value,
  });
  getList();
}
watch(
  childrenList.value.value,
  (newValue) => {
    closeChecked();
  },
  { immediate: true }
);
</script>
<style scoped lang="scss">
.scene {
  height: 100%;
  display: flex;
  .scene-list {
    width: var(--leftwidth);
    height: 100%;
    overflow-x: scroll;
    .list {
      .listTitle {
        padding: 29px 48px 13px 48px;
        font-weight: bold;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
      }
      .itemList {
        .ItemTitle {
          padding: 25px 48px;
          font-weight: 400;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.85);
          line-height: 22px;
        }
        &:hover{
          background: rgba(69,144,255,0.1);;
        }
      }
      .active {
        background: rgba(69, 144, 255, 0.1);
      }
    }
  }
  .abstractCentenr {
    background: #f5f5f5;
    height: 100%;
    width: 100%;
    padding: 32px;
    .centerTop {
      height: 148px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 32px;
      .upload {
        height: 100%;
        width: calc(100% - 170px);
      }
      .import {
        margin-right: 20px;
        padding-top: 40px;
        height: 100%;
        width: 148px;
        text-align: center;
        background: #fafafa;
      }
    }
    .centerBottom {
      .selcet {
        // float: right;
        // text-align: right;
        display: flex;
        justify-content: space-between;
      }
    }
  }
  .title0 {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: bold;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 22px;
  }
  .demo-tabs {
    margin: 12px 0;
  }
}
</style>