lilei 1 year ago
parent
commit
1686e0f219
1 changed files with 29 additions and 3 deletions
  1. 29 3
      src/components/UploadFile/index.vue

+ 29 - 3
src/components/UploadFile/index.vue

@@ -22,12 +22,15 @@
       </div>
       </div>
     </a-upload>
     </a-upload>
     <a-modal :visible="previewVisible" :footer="null" centered :maskClosable="false" @cancel="handleCancel">
     <a-modal :visible="previewVisible" :footer="null" centered :maskClosable="false" @cancel="handleCancel">
+      <div style="height: 30px;">预览</div>
       <video v-if="fileType=='video/mp4'" controls="controls" style="width: 100%" :src="previewImage" />
       <video v-if="fileType=='video/mp4'" controls="controls" style="width: 100%" :src="previewImage" />
       <img v-else alt="example" style="width: 100%" :src="previewImage" />
       <img v-else alt="example" style="width: 100%" :src="previewImage" />
     </a-modal>
     </a-modal>
   </div>
   </div>
 </template>
 </template>
 <script>
 <script>
+import Sortable from 'sortablejs'
+import { moveElement } from '@/libs/tools'
 export default {
 export default {
   name: 'Upload',
   name: 'Upload',
   props: {
   props: {
@@ -101,6 +104,24 @@ export default {
       }
       }
     }
     }
   },
   },
+  created () {
+    const _this = this
+    this.$nextTick(() => {
+      const el = document.querySelector('.ant-upload-list-picture-card')
+      const sortable = Sortable.create(el, {
+        onEnd: function (evt) {
+          console.log(evt.oldIndex, evt.newIndex)
+          const a = _this.formatFile()
+          console.log(a.split(','))
+          const ret = moveElement(a.split(','), evt.oldIndex, evt.newIndex)
+          console.log(ret)
+
+          _this.$emit('change', ret.join(','))
+          _this.$emit('input', ret.join(','))
+        }
+      })
+    })
+  },
   methods: {
   methods: {
     setFileList (a) {
     setFileList (a) {
       const temp = []
       const temp = []
@@ -174,7 +195,7 @@ export default {
         if (file.status == 'error' || file.status == 'done') {
         if (file.status == 'error' || file.status == 'done') {
           this.$message.error(file.response.message || '上传失败,请重试!')
           this.$message.error(file.response.message || '上传失败,请重试!')
           this.$emit('remove')
           this.$emit('remove')
-          return
+          // return
         }
         }
       }
       }
       this.fileList = this.validaFile(file, fileList)
       this.fileList = this.validaFile(file, fileList)
@@ -204,7 +225,7 @@ export default {
               }
               }
             }
             }
           })
           })
-          console.log(temp)
+          // console.log(temp)
           obj = JSON.stringify(temp)
           obj = JSON.stringify(temp)
         }
         }
       }
       }
@@ -216,7 +237,7 @@ export default {
         return []
         return []
       }
       }
       // console.log(file, filesList, this.beforeUpload(file, 0))
       // console.log(file, filesList, this.beforeUpload(file, 0))
-      if (!this.beforeUpload(file, 0) && file.status != 'removed') {
+      if (!this.beforeUpload(file, 0) && file.status != 'removed' || file.status == 'error') {
         const index = filesList.findIndex(item => item.uid == file.uid)
         const index = filesList.findIndex(item => item.uid == file.uid)
         filesList.splice(index, 1)
         filesList.splice(index, 1)
       }
       }
@@ -306,6 +327,11 @@ export default {
       max-height:860px;
       max-height:860px;
       text-align:center;
       text-align:center;
   }
   }
+/deep/.ant-modal-close-x{
+        height: 35px;
+        line-height: 35px;
+        width: 35px;
+      }
  /deep/.ant-modal-body video{
  /deep/.ant-modal-body video{
     width: 90% !important;
     width: 90% !important;
   }
   }