public-fuse/src/view/case/photos/index.vue

<template>
  <div class="photo">
    <div class="left">
      <div class="upload">
        <el-button type="primary" @click="addCaseFileHandler"> 上传照片 </el-button>
        <el-button
          type="primary"
          @click="sortType = !sortType"
          :icon="sortType ? FullScreen : Menu"
          >{{ sortType ? "横排" : "竖排" }}</el-button
        >
      </div>
      <draggable ref="draggableRef" :caseId="caseId" :sortType="sortType" @changeList="changeList" @handleItem="handleItem" />
    </div>
    <div class="right">
      <swiper
        class="swiper"
        slides-per-view="auto"
        :space-between="24"
        :centeredSlides="true"
        @swiper="onSwiper"
        style="height: 100%"
        @slideChange="onSlideChange"
      >
        <swiper-slide class="swiperItem" v-for="(item, index) in newlist" :key="index">
          <div class="swiperList">
            <div
              class="itemper"
              :class="{ oneItemper: sortType }"
              v-for="eleItem in item"
              :key="eleItem"
            >
              <img
                class="itemImg"
                :src="eleItem.imgUrl"
                alt=""
              />
              <div class="text">{{ eleItem.imgInfo }}</div>
            </div>
            <div class="page">
              <span style="margin-right: 16px">第 {{ index + 1 }} 页</span>
              <span>共 {{ newlist.length }} 页</span>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Menu, FullScreen } from "@element-plus/icons-vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
// import { addCaseFile } from "@/store/caseFile";
import { addCaseImgFile } from "../quisk";
import draggable from './draggable.vue';
const props = defineProps({ caseId: Number });
const newlist = ref([]);
const swiperRef = ref(null);
const draggableRef = ref(null);
const caseId = ref(props.caseId);
const sortType = ref(false);
const addCaseFileHandler = async () => {
  await addCaseImgFile({ caseId: caseId.value, data: {
    imgUrl: '',
    imgInfo: '',
    id: '',
    sort: '',
  } });
  refresh();
};
function refresh() {
  console.log("changeList", draggableRef.value);
}
const changeList = (list) => {
  let newList = [];
  list.map((item, index) => {
    if (sortType.value) {
      newList.push([item]);
    } else {
      if (index % 2 == 0) {
        let newItem = list[index + 1] ? [item, list[index + 1]] : [item];
        newList.push(newItem);
      }
    }
  });
  newlist.value = newList;
  console.log("changeList", newList);
};
const onSwiper = (swiper) => {
  swiperRef.value = swiper;
};
const onSlideChange = (swiper) => {
  console.log(swiper);
};
const handleItem = (item) => {
  let active = sortType.value ? item : Math.floor(item / 2);
  swiperRef.value.slideTo(active);
  console.log("handleItem", item, active);
};
const handleDetele = async (item) => {
  if (await confirm("删除该场景，将同时从案件和融合模型中移除，确定要删除吗？")) {
    const scenes = getCaseScenes(list.value.filter((item) => item !== scene));
    await replaceCaseScenes(props.caseId, scenes);
    refresh();
  }
};
</script>
<style lang="scss" scoped>
.photo {
  display: flex;
  height: 100%;
  .left {
    width: 260px;
    padding: 16px 24px 30px 0;
    height: calc(100% - 46.16px);
    overflow-y: auto;
    background: #ffffff;
    box-shadow: 10px 0 10px -10px rgba(0, 0, 0, 0.15);
    // box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.15);
  }
  .right {
    width: calc(100% - 260px);
    background-color: var(--bgColor);
    padding-left: 24px;
    height: calc(100% - 0px);
    .swiperItem {
      height: calc(100vh - 155.16px);
      width: calc((100vh - 156.16px) * 0.707);
      background: #ffffff;
      .swiperList {
        padding: 0 60px;
        height: 100%;
        .page {
          font-weight: 400;
          font-size: 12px;
          color: rgba(0, 0, 0, 0.85);
          line-height: 22px;
          text-align: right;
          margin-top: 30px;
        }
        .itemper {
          height: calc(50% - 100px);
          padding: 60px 0 0 0;
          .text {
            margin-top: 16px;
            border-radius: 0px 0px 0px 0px;
            border: 1px dotted #cccccc;
            text-align: center;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            line-height: 30px;
            color: rgba(0, 0, 0, 0.85);
          }
          .itemImg {
            width: 100%;
            height: calc(100% - 48px);
            display: block;
            object-fit: cover;
          }
        }

        .oneItemper {
          height: calc(100% - 120px);
          .itemImg {
          }
        }
      }
    }
  }
}
</style>