1

src/view/case/addPhotoFile.vue

@@ -0,0 +1,124 @@
+<template>
+  <el-form
+    ref="form"
+    :model="caseFile"
+    label-width="90px"
+    class="camera-from dispatch-file-from"
+  >
+    <el-form-item label="附件：" class="mandatory">
+      <el-upload
+        class="upload-demo"
+        :multiple="false"
+        :limit="1"
+        :disabled="!!file"
+        :before-upload="upload"
+        :file-list="fileList"
+        :http-request="() => {}"
+        :on-preview="previewFile"
+        :accept="accept"
+        :before-remove="removeFile"
+      >
+        <el-button type="primary" :disabled="!!file">
+          <el-icon><Upload /></el-icon>上传
+        </el-button>
+        <template v-slot:tip>
+          <div class="el-upload__tip">注：可上传{{ size }}以内的{{ formatDesc }}</div>
+        </template>
+        <template v-slot:file="{ file }: { file: UploadFile }">
+          <div class="file" @click.stop="previewFile()">
+            <div>
+              <el-icon><Document /></el-icon>
+              <span class="name">{{ file.name }}</span>
+            </div>
+            <el-icon @click.stop="removeFile()"><Close /></el-icon>
+          </div>
+        </template>
+      </el-upload>
+    </el-form-item>
+    <el-form-item label="附件标题：" class="mandatory">
+      <el-input
+        v-model="caseFile.filesTitle"
+        placeholder="请输入最多不能超过50字"
+        maxlength="50"
+        show-word-limit
+      ></el-input>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import {
+  DrawFormatDesc,
+  DrawFormats,
+  FileDrawType,
+  OtherFormatDesc,
+  OtherFormats,
+} from "@/constant/caseFile";
+import { maxFileSize } from "@/constant/caseFile";
+import { useUpload } from "@/hook/upload";
+import { CaseFile, addCaseFile } from "@/store/caseFile";
+import { ElMessage, UploadFile } from "element-plus";
+import { computed, ref, watchEffect } from "vue";
+import { QuiskExpose } from "@/helper/mount";
+
+const props = defineProps<{
+  caseId: number;
+  fileType: number;
+}>();
+
+const caseFile = ref<CaseFile>({
+  caseId: props.caseId,
+  filesTypeId: props.fileType,
+  filesTitle: "",
+} as any);
+
+const { size, fileList, upload, removeFile, previewFile, file, accept } = useUpload({
+  maxSize: maxFileSize,
+  formats: props.fileType === FileDrawType ? DrawFormats : OtherFormats,
+});
+
+const formatDesc = computed(() =>
+  props.fileType === FileDrawType ? DrawFormatDesc : OtherFormatDesc
+);
+
+watchEffect(() => {
+  if (file.value?.name) {
+    caseFile.value.filesTitle = file.value?.name.substring(0, 50);
+  }
+});
+
+defineExpose<QuiskExpose>({
+  async submit() {
+    if (!file.value) {
+      ElMessage.error("请上传附件");
+      throw "请上传附件";
+    } else if (!caseFile.value.filesTitle.trim()) {
+      ElMessage.error("附件标题不能为空！");
+      throw "附件标题不能为空！";
+    }
+
+    await addCaseFile({ ...caseFile.value, file: file.value });
+    return caseFile.value;
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.upload-demo {
+  overflow: hidden;
+}
+
+.file {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  > div {
+    display: flex;
+    align-items: center;
+  }
+
+  .name {
+    margin-left: 10px;
+  }
+}
+</style>

src/view/case/photos/draggable.vue

@@ -1,16 +1,23 @@
 <template>
   <VueDraggable class="draggable" ref="el" v-model="list" @sort="onChange">
-    <div class="item" v-for="item in list" :key="item.id" @click="handleItem(item)">
+    <div class="item" v-for="(item, index) in list" :key="item.id" @click="handleItem(index)">
       <img class="itemImg" src="https://4dscene.4dage.com/new4dkk/v2/lang/images/home/caseList/bwg.png" alt="" />
       <div class="text">{{ item.name }}</div>
+      <CircleCloseFilled @click.stop="handleDet(index)" class="itemIcon" />
     </div>
   </VueDraggable>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch } from 'vue'
+import { Case } from "@/store/case";
 import { VueDraggable } from 'vue-draggable-plus'
-const props = defineProps({ list: Array });
+// import { IconRabbish } from '@element-plus/icons-vue'
+const props = defineProps({ sortType: Boolean });
+const emit = defineEmits<{
+  (e: "changeList", value: Case[] | null): void;
+  (e: "handleItem", value: Number | null): void;
+}>();
 const list = ref([
   {
   name: 'Joao1',
@@ -103,15 +110,23 @@ const list = ref([
 }
 ])
 
-const emit = defineEmits<{
-  (e: "changeList", value: Array | null): void;
-}>();
+watch(()=>props.sortType,(newValue, oldValue)=>{
+    console.log('sum is changed',newValue,oldValue);
+    emit("changeList", list.value);
+},{ deep: true, immediate:true})
+
 function onChange(event: any) {
   emit("changeList", list.value);
 }
-function handleItem(item) {
+function handleItem(index) {
+  emit("handleItem", index);
   
 }
+function handleDet(index: Number) {
+  list.value.splice(index, 1)
+  emit("changeList", list.value);
+  console.log('handleDet', list.value);
+}
 onMounted(() => {
   emit("changeList", list.value);
   // emit("update:list", props.list.value);
@@ -125,12 +140,27 @@ onMounted(() => {
   flex-wrap: wrap;
   justify-content: space-between;
   .item {
+    position: relative;
     // flex: 0 0 50%; /* 每个子元素占用50%的宽度 */
     width: calc(50% - 4px);
     margin-top: 16px;
     .itemImg{
       width: 100%;
     }
+    .itemIcon{
+      width: 20px;
+      height: 20px;
+      color: var(--el-color-primary);
+      position: absolute;
+      right: -10px;
+      top: -10px;
+      display: none;
+    }
+    &:hover{
+      .itemIcon{
+        display:block;
+      }
+    }
   }
 }
 </style>

src/view/case/photos/index.vue

@@ -3,27 +3,29 @@
     <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 @changeList="changeList" />
+      <draggable :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" v-for="eleItem in item" :key="eleItem">
+            <div class="itemper" :class="{oneItemper: sortType}" v-for="eleItem in item" :key="eleItem">
               <img class="itemImg" src="https://4dscene.4dage.com/new4dkk/v2/lang/images/home/caseList/bwg.png" alt="" />
               <div class="text">{{ eleItem.name }}</div>
             </div>
             <div class="page">
-              <span style="margin-right: 16px">第 1 页</span>
-              <span>共 3 页</span>
+              <span style="margin-right: 16px">第 {{index + 1}} 页</span>
+              <span>共 {{newlist.length}} 页</span>
             </div>
           </div>
         </swiper-slide>
@@ -34,6 +36,7 @@
 
 <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";
@@ -43,6 +46,7 @@ const props = defineProps({ caseId: Number });
 const newlist = ref([]);
 const swiperRef = ref(null);
 const caseId = ref(props.caseId);
+const sortType = ref(false);
 console.log(props);
 const addCaseFileHandler = async () => {
   await addCaseFile({ caseId: caseId.value, fileType: 'currentTypeId.value!' });
@@ -51,9 +55,13 @@ const addCaseFileHandler = async () => {
 const changeList = (list) => {
   let newList = []
   list.map((item, index) => {
-    if(index%2 ==0){
-      let newItem = list[index+1]?[item, list[index+1]]:[item];
-      newList.push(newItem);
+    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;
@@ -65,6 +73,18 @@ const onSwiper = (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>
@@ -121,6 +141,13 @@ const onSlideChange = (swiper) => {
             object-fit: cover;
           }
         }
+        
+        .oneItemper{
+          height: calc(100% - 120px);
+          .itemImg{
+
+          }
+        }
       }
     }
   }