feat: 优化

src/view/case/addPhotoFile.vue

@@ -89,10 +89,10 @@ watch(props, newValue => {
   caseFile.value.imgUrl = newValue.data.imgUrl;
   caseFile.value.sort = newValue.data.sort;
   if(newValue.data.imgUrl){
-    file.value = [{
-    name: newValue.data.imgInfo,
-    url: newValue.data.imgUrl,
-  }]
+    file.value = {
+    name: newValue.data.imgInfo || '',
+    url: newValue.data.imgUrl || '',
+  }
   }
 },{ immediate: true })
 watchEffect(() => {
@@ -105,10 +105,10 @@ const httpsApi = async ({file})=> {
   console.log('httpsApi', file)
   let fileUrl = await uploadFile(file);
 
-  file.value = [{
+  file.value = {
     name: file.name,
     url: fileUrl,
-  }]
+  }
   console.log('httpsApi', file, fileUrl)
 }
 
@@ -122,7 +122,7 @@ defineExpose<QuiskExpose>({
       throw "附件标题不能为空！";
     }
     console.log('defineExpose', caseFile.value, file.value)
-    let imgUrl = file.value && file.value.value ? file.value.value[0]?.url : file.value[0]?.url
+    let imgUrl = file.value && file.value.value ? file.value.value?.url : file.value?.url
     await saveOrUpdate({ ...caseFile.value, imgUrl });
     return caseFile.value;
   },

src/view/case/photos/draggable.vue

@@ -28,7 +28,6 @@ const emit = defineEmits<{
 const list = ref<CaseImg[]>([])
 
 watch(()=>props.sortType,(newValue, oldValue)=>{
-    console.log('sum is changed',newValue,oldValue);
     emit("changeList", list.value);
 },{ deep: true, immediate:true})
 
@@ -52,16 +51,19 @@ function handleDet(index: Number, id: Number) {
     console.log('handleDet', list.value);
   })
 }
-function handleEdit(params) {
-  addCaseImgFile({ caseId: props.caseId, data: {
+async function handleEdit(params) {
+  await addCaseImgFile({ caseId: props.caseId, data: {
     ...params,
   } });
+  getList()
 }
 onMounted(() => {
   getList()
   // emit("update:list", props.list.value);
 })
-
+defineExpose({
+  getList
+});
 
 </script>
 <style lang="scss" scoped>
@@ -87,7 +89,7 @@ onMounted(() => {
       justify-content: space-between;
       align-items: center;
       div{
-        width: calc(100% - 20px);
+        width: 100%;
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
@@ -95,6 +97,15 @@ onMounted(() => {
       .EditPen{
         width: 20px;
         height: 20px;
+        display: none;
+      }
+      &:hover{
+        div{
+          width: calc(100% - 20px);
+        }
+        .EditPen{
+          display: block;
+        }
       }
     }
     .itemIcon{

src/view/case/photos/index.vue

@@ -10,7 +10,7 @@
           >{{ sortType ? "横排" : "竖排" }}</el-button
         >
       </div>
-      <draggable ref="draggableRef" :caseId="caseId" :sortType="sortType" @changeList="changeList" @handleItem="handleItem" />
+      <draggable ref="childRef" :caseId="caseId" :sortType="sortType" @changeList="changeList" @handleItem="handleItem" />
     </div>
     <div class="right">
       <swiper
@@ -59,7 +59,7 @@ import draggable from './draggable.vue';
 const props = defineProps({ caseId: Number });
 const newlist = ref([]);
 const swiperRef = ref(null);
-const draggableRef = ref(null);
+const childRef = ref(null);
 const caseId = ref(props.caseId);
 const sortType = ref(false);
 const addCaseFileHandler = async () => {
@@ -72,7 +72,10 @@ const addCaseFileHandler = async () => {
   refresh();
 };
 function refresh() {
-  console.log("changeList", draggableRef.value);
+  console.log("changeList", childRef.value);
+  if(childRef.value) {
+    childRef.value.getList()
+  }
 }
 const changeList = (list) => {
   let newList = [];