feat: 照片搜索

src/view/case/photos/draggable.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="VueDraggable">
-    <VueDraggable v-if="list.length" class="draggable" ref="el" v-model="list" @sort="onChange">
-      <div class="item" v-for="(item, index) in list" :key="item.id" @click="handleItem(index)">
+    <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(index)">
         <img class="itemImg" :src="item.imgUrl" alt="" />
         <div class="text">
             <div :title="item.imgInfo">{{ item.imgInfo }}</div>
@@ -15,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted, watch, computed } from 'vue'
 import { caseImgList, CaseImg, caseDel, caseUpdateSort } from "@/store/case";
 import { VueDraggable } from 'vue-draggable-plus'
 import { addCaseImgFile } from "../quisk";
@@ -26,6 +27,13 @@ const emit = defineEmits<{
   (e: "handleItem", value: Number | null): void;
 }>();
 const list = ref<CaseImg[]>([])
+const search = ref('')
+const searchList = computed(() => {
+  let searchText = search.value.toLowerCase();
+  return list.value.filter(item => {
+    return item.imgInfo?.toLowerCase().includes(searchText);
+  })
+})
 
 watch(()=>props.sortType,(newValue, oldValue)=>{
     emit("changeList", list.value);
@@ -42,6 +50,9 @@ function handleItem(index) {
   emit("handleItem", index);
   
 }
+function handleSearch(val:string) {
+  console.log('handleSearch', val, search.value);
+}
 async function getList () {
   let lists = await caseImgList(props.caseId, '')
   list.value = lists.data
@@ -52,7 +63,6 @@ function handleDet(index: Number, id: Number) {
   caseDel(id).then(res=>{
     list.value.splice(index, 1)
     emit("changeList", list.value);
-    console.log('handleDet', list.value);
   })
 }
 async function handleEdit(params) {
@@ -61,6 +71,12 @@ async function handleEdit(params) {
   } });
   getList()
 }
+function filterItem() {
+  let searchText = search.value.toLowerCase();
+  return list.value.filter(item => {
+    return item.imgInfo?.toLowerCase().includes(searchText);
+  })
+}
 onMounted(() => {
   getList()
   // emit("update:list", props.list.value);
@@ -74,6 +90,9 @@ defineExpose({
 .empty{
   width: 200px;
 }
+.input-with-select{
+  margin-top: 16px;
+}
 .draggable{
   display: flex;
   flex-wrap: wrap;