站点管理照片上传及删除

src/views/siteManage/basicInfo/index.vue

@@ -189,6 +189,7 @@
                   :file-list="fileListImages"
                   :on-preview="handlePictureCardPreview"
                   :headers="{ accessToken: [accessToken] }"
+                  :on-exceed="overLength"
                 >
                   <i class="el-icon-plus"></i>
                 </el-upload>
@@ -257,11 +258,13 @@ export default defineComponent({
     const disabled = ref(false)
     const accessToken = ref(store.state.user.accessToken)
     const dropData = ref([])
-    const fileListImages = ref(['https://qhome.usky.cn/file/chart3-1.png'])
+    const fileListImages = ref([])
     const dropData2 = ref([])
     const platFormData = ref([])
     const ruleForm = ref({})
 
+    const newArray = ref([])
+
     function handlePictureCardPreview(file) {
       console.log('file')
       console.log(file)
@@ -277,17 +280,36 @@ export default defineComponent({
       fileList: [],
     })
 
+    //图片个数限制
+    function overLength() {
+      ElMessage({
+        message: '最多只能上传3张图片！',
+        type: 'warning',
+      })
+    }
+
     //上传成功的回调
     function handleUpAvatar(res) {
-      console.log('res')
-      console.log(res)
+      //新上传的
       dataSet.fileList.push(res.data)
-      console.log(dataSet.fileList)
+
+      //回显的图片
+      var bb = []
+      var aa = fileListImages.value
+      aa.forEach(function (item) {
+        bb.push(item.url.substring(27))
+      })
+
+      //新上传加回显组合的新数组
+      newArray.value = dataSet.fileList.concat(bb)
+      console.log(newArray.value)
+      console.log('newArray.value')
     }
+
     //删除照片
     function handleRemove(res) {
-      // console.log('删除')
-      // console.log(res.name)
+      console.log('删除')
+      console.log(res)
 
       Array.prototype.indexOf = function (val) {
         for (var i = 0; i < this.length; i++) {
@@ -301,8 +323,58 @@ export default defineComponent({
           this.splice(index, 1)
         }
       }
-      dataSet.fileList.remove(res.name)
-      console.log(dataSet.fileList)
+
+      fileListImages.value = fileListImages.value.filter(
+        (v) => v.url !== res.url
+      )
+      var bb = []
+      fileListImages.value.forEach(function (item) {
+        bb.push(item.url.substring(27))
+      })
+
+      if (res.name) {
+        alert('新增的删除')
+        dataSet.fileList.remove(res.name)
+        console.log('新增的删除后')
+        console.log(dataSet.fileList)
+      } else {
+        alert('回显的删除')
+
+        bb.remove(res.url)
+        console.log('回显的删除后')
+        console.log(bb)
+
+        // if (dataSet.fileList) {
+        //   console.log('删除回显有新增时,回显的列表要加上新增的数据')
+        //   console.log(dataSet.fileList)
+        //   let uu = []
+        //   dataSet.fileList.forEach(function (item) {
+        //     uu.push({ url: window.PLATFROM_CONFIG.images + item, name: item })
+        //   })
+        //   console.log('uu')
+        //   console.log(uu)
+
+        //   fileListImages.value = fileListImages.value.concat(uu)
+        //   console.log( 'fileListImages.value')
+        //   console.log( fileListImages.value)
+
+        // }
+      }
+
+      if (dataSet.fileList) {
+        newArray.value = dataSet.fileList.concat(bb)
+      }
+      if (bb) {
+        newArray.value = bb.concat(dataSet.fileList)
+      }
+
+      if (dataSet.fileList && bb) {
+        newArray.value = dataSet.fileList.concat(bb)
+      }
+
+      console.log('新增和回显所有删除后组成的新数组')
+      console.log('newArray.value')
+      console.log(newArray.value)
     }
 
     function resetForm() {
@@ -354,7 +426,6 @@ export default defineComponent({
 
     //站点详情请求
     function getSite() {
-
       fileListImages.value = []
 
       api.getSite({ id: props.siteId }).then((requset) => {
@@ -374,26 +445,22 @@ export default defineComponent({
 
           if (requset.data[0].sitePictureOne) {
             fileListImages.value.push({
-              name: '1',
               url: fileImages.value + requset.data[0].sitePictureOne,
             })
           }
           if (requset.data[0].sitePictureTwo) {
             fileListImages.value.push({
-              name: '2',
               url: fileImages.value + requset.data[0].sitePictureTwo,
             })
           }
           if (requset.data[0].sitePictureThree) {
             fileListImages.value.push({
-              name: '3',
               url: fileImages.value + requset.data[0].sitePictureThree,
             })
           }
           if (store.state.basicInfoSiteName && props.siteId) {
-              ruleForm.value.siteName = store.state.basicInfoSiteName //站点名称重新赋值
+            ruleForm.value.siteName = store.state.basicInfoSiteName //站点名称重新赋值
           }
-         
 
           console.log('fileListImages.value')
           console.log(fileListImages.value)
@@ -403,12 +470,13 @@ export default defineComponent({
       })
     }
 
-
     //表单提交
     function submitForm() {
-      ruleForm.value.sitePictureOne = dataSet.fileList[0]
-      ruleForm.value.sitePictureTwo = dataSet.fileList[1]
-      ruleForm.value.sitePictureThree = dataSet.fileList[2]
+      ruleForm.value.sitePictureOne = newArray.value[0] ? newArray.value[0] : ''
+      ruleForm.value.sitePictureTwo = newArray.value[1] ? newArray.value[1] : ''
+      ruleForm.value.sitePictureThree = newArray.value[2]
+        ? newArray.value[2]
+        : ''
 
       ruleForm.value.operationTime
         ? (ruleForm.value.operationTime = parseTime(
@@ -482,7 +550,7 @@ export default defineComponent({
                 type: 'success',
               })
 
-              store.state.basicInfoSiteName = ''    //新增成功后存储的站点名称设为空
+              store.state.basicInfoSiteName = '' //新增成功后存储的站点名称设为空
 
               setTimeout(() => {
                 isDisable.value = false //点击一次时隔两秒后才能再次点击
@@ -512,7 +580,6 @@ export default defineComponent({
           getSite()
           dynamicPropertiesDroplist(2)
           dynamicPropertiesDroplist(1)
-        
         }
       }
     )
@@ -523,7 +590,6 @@ export default defineComponent({
           getSite()
           dynamicPropertiesDroplist(2)
           dynamicPropertiesDroplist(1)
-     
         }
       }
     )
@@ -532,17 +598,15 @@ export default defineComponent({
       (newVal) => {
         if (newVal == '') {
           formStatus.value = '修改'
-            resetForm()
+          resetForm()
           // getSite()
           // dynamicPropertiesDroplist(2)
           // dynamicPropertiesDroplist(1)
         }
       }
     )
-  
 
     onMounted(() => {
-   
       if (store.state.basicInfoSiteName && !props.siteId) {
         // alert('新增站点不带模板')
         formStatus.value = '新增'
@@ -551,9 +615,8 @@ export default defineComponent({
         // alert('新增站点带模板')
         formStatus.value = '新增'
         getSite()
-     
       }
-      if (store.state.basicInfoSiteName=='') {
+      if (store.state.basicInfoSiteName == '') {
         // alert('修改')
         formStatus.value = '修改'
         getSite()
@@ -566,7 +629,6 @@ export default defineComponent({
         routeDroplist()
         dynamicPropertiesDroplist(2)
         dynamicPropertiesDroplist(1)
-     
       }
     })
 
@@ -582,6 +644,8 @@ export default defineComponent({
       platFormData,
       fileListImages,
 
+      overLength,
+
       accessToken,
       ruleForm,
       resetForm,
@@ -697,6 +761,8 @@ export default defineComponent({
       fileImages,
       getSite,
       isDisable,
+
+      newArray,
     }
   },
 })