1

package.json

@@ -21,10 +21,12 @@
     "mitt": "^3.0.1",
     "qs": "^6.11.2",
     "sass": "^1.64.2",
+    "swiper": "^11.1.4",
     "unplugin-element-plus": "^0.7.2",
     "unplugin-vue-define-options": "^1.3.12",
     "vue": "^3.3.4",
     "vue-cropper": "^1.0.9",
+    "vue-draggable-plus": "^0.5.0",
     "vue-router": "^4.2.4"
   },
   "devDependencies": {
@@ -34,4 +36,4 @@
     "vite": "^4.4.5",
     "vue-tsc": "^1.8.5"
   }
-}
+}

src/view/case/photos/draggable.vue

@@ -0,0 +1,136 @@
+<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)">
+      <img class="itemImg" src="https://4dscene.4dage.com/new4dkk/v2/lang/images/home/caseList/bwg.png" alt="" />
+      <div class="text">{{ item.name }}</div>
+    </div>
+  </VueDraggable>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { VueDraggable } from 'vue-draggable-plus'
+const props = defineProps({ list: Array });
+const list = ref([
+  {
+  name: 'Joao1',
+  id: 1
+},
+{
+  name: 'Jean2',
+  id: 2
+},
+{
+  name: 'Johanna3',
+  id: 3
+},
+{
+  name: 'Juan4',
+  id: 4
+},
+{
+  name: 'Joao5',
+  id: 5
+},
+{
+  name: 'Jean6',
+  id: 6
+},
+{
+  name: 'Johanna7',
+  id: 7
+},
+{
+  name: 'Juan8',
+  id: 8
+},{
+  name: 'Juan4',
+  id: 4
+},
+{
+  name: 'Joao5',
+  id: 5
+},
+{
+  name: 'Jean6',
+  id: 6
+},
+{
+  name: 'Johanna7',
+  id: 7
+},
+{
+  name: 'Juan8',
+  id: 8
+},{
+  name: 'Juan4',
+  id: 4
+},
+{
+  name: 'Joao5',
+  id: 5
+},
+{
+  name: 'Jean6',
+  id: 6
+},
+{
+  name: 'Johanna7',
+  id: 7
+},
+{
+  name: 'Juan8',
+  id: 8
+},{
+  name: 'Juan4',
+  id: 4
+},
+{
+  name: 'Joao5',
+  id: 5
+},
+{
+  name: 'Jean6',
+  id: 6
+},
+{
+  name: 'Johanna7',
+  id: 7
+},
+{
+  name: 'Juan8',
+  id: 8
+}
+])
+
+const emit = defineEmits<{
+  (e: "changeList", value: Array | null): void;
+}>();
+function onChange(event: any) {
+  emit("changeList", list.value);
+}
+function handleItem(item) {
+  
+}
+onMounted(() => {
+  emit("changeList", list.value);
+  // emit("update:list", props.list.value);
+})
+
+
+</script>
+<style lang="scss" scoped>
+.draggable{
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  .item {
+    // flex: 0 0 50%; /* 每个子元素占用50%的宽度 */
+    width: calc(50% - 4px);
+    margin-top: 16px;
+    .itemImg{
+      width: 100%;
+    }
+  }
+}
+</style>

src/view/case/photos/index.vue

@@ -1,8 +1,128 @@
 <template>
-  <div>照片</div>
+  <div class="photo">
+    <div class="left">
+      <div class="upload">
+        <el-button type="primary" @click="addCaseFileHandler"> 上传照片 </el-button>
+      </div>
+      <draggable @changeList="changeList" />
+    </div>
+    <div class="right">
+      <swiper
+        class="swiper"
+        slides-per-view="auto"
+        :space-between="24"
+        @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">
+              <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>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+    </div>
+  </div>
 </template>
 
 <script setup>
+import { ref } from 'vue'
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import 'swiper/css';
+// import { addCaseFile } from "@/store/caseFile";
+import { addCaseFile } from "../quisk";
+import draggable from './draggable.vue';
 const props = defineProps({ caseId: Number });
+const newlist = ref([]);
+const swiperRef = ref(null);
+const caseId = ref(props.caseId);
 console.log(props);
+const addCaseFileHandler = async () => {
+  await addCaseFile({ caseId: caseId.value, fileType: 'currentTypeId.value!' });
+  refresh();
+};
+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);
+    }
+  })
+  newlist.value = newList;
+  console.log('changeList', newList);
+}
+const onSwiper = (swiper) => {
+  swiperRef.value = swiper;
+}
+const onSlideChange = (swiper) => {
+  console.log(swiper);
+}
+
 </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;
+          }
+        }
+      }
+    }
+  }
+}
+</style>