1

src/view/case/photos/draggable.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="VueDraggable">
     <el-input @change="handleSearch" clearable size="medium" placeholder="请输入内容" suffix-icon="search" v-model="search" class="input-with-select"> </el-input>
-    <VueDraggable v-if="list.length" class="draggable" ref="el" v-model="searchList" @sort="onChange">
-      <div class="item" v-for="(item, index) in searchList" :key="item.id" @click="handleItem(item.id)">
+    <VueDraggable v-if="list.length" :move="search?false: null" class="draggable" ref="el" v-model="list" @sort="onChange">
+      <div class="item" v-for="(item, index) in search?searchList:list" :key="item.id" @click="handleItem(item.id)">
         <img class="itemImg" :src="item.imgUrl" alt="" />
         <div class="text">
             <div :title="item.imgInfo">{{ item.imgInfo }}</div>
@@ -19,6 +19,7 @@
 import { ref, onMounted, watch, computed } from 'vue'
 import { caseImgList, CaseImg, caseDel, caseUpdateSort } from "@/store/case";
 import { VueDraggable } from 'vue-draggable-plus'
+import { openErrorMsg } from "@/request/errorMsg.js";
 import { addCaseImgFile } from "../quisk";
 // import { IconRabbish } from '@element-plus/icons-vue'
 const props = defineProps({ sortType: Boolean, caseId: Number });
@@ -40,16 +41,23 @@ watch(()=>props.sortType,(newValue, oldValue)=>{
 },{ deep: true, immediate:true})
 
 async function onChange() {
-  let apiList = list.value.map((item, index) => {
+  if(search.value) {
+    openErrorMsg('搜索状态禁止拖动')
+    return
+  };
+  setTimeout(async () => {
+  let apiList = searchList.value.map((item, index) => {
     return {...item, sort: index + 1}
   })
+  console.log(apiList)
   await caseUpdateSort(apiList)
   emit("changeList", apiList);
+  } , 500)
 }
 function handleItem(id) {
   setTimeout(() => {
     let index = list.value.findIndex(item => item.id === id)
-    console.log(index)
+    console.log(index, list.value)
     emit("handleItem", index);
   } , 500)