ImageUpload增加视频支持，提货日志撤销刷新列表

src/components/ImageUpload/index.vue

 <template>
   <div class="component-upload-image">
+    <ul class="el-upload-list el-upload-list--picture-card">
+      <li tabindex="0" class="el-upload-list__item is-success" v-for="(item, index) in fileList" :key="index">
+        <video v-if="item.url.substr(-4) == '.mp4'" :src="item.url"></video>
+        <img v-else :src="item.url" :alt="item.name" class="el-upload-list__item-thumbnail">
+        <!-- <a class="el-upload-list__item-name">
+          <i class="el-icon-document"></i>
+        </a> -->
+        <label class="el-upload-list__item-status-label">
+          <i class="el-icon-upload-success el-icon-check"></i>
+        </label>
+        <!-- <i class="el-icon-close"></i>
+        <i class="el-icon-close-tip">按 delete 键可删除</i> -->
+        <span class="el-upload-list__item-actions">
+          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(item)">
+            <i class="el-icon-zoom-in"></i>
+          </span>
+          <span class="el-upload-list__item-delete" @click="handleRemove(item)">
+            <i class="el-icon-delete"></i>
+          </span>
+        </span>
+      </li>
+    </ul>
+    
     <el-upload
       multiple
       :action="uploadImgUrl"
@@ -11,7 +34,7 @@
       :on-exceed="handleExceed"
       name="file"
       :on-remove="handleRemove"
-      :show-file-list="true"
+      :show-file-list="false"
       :headers="headers"
       :file-list="fileList"
       :on-preview="handlePictureCardPreview"
@@ -34,10 +57,14 @@
       width="800"
       append-to-body
     >
-      <img
-        :src="dialogImageUrl"
-        style="display: block; max-width: 100%; margin: 0 auto"
-      />
+      <template v-if="dialogImageUrl">
+        <video v-if="dialogImageUrl.substr(-4) == '.mp4'" :src="dialogImageUrl" controls autoplay style="display: block; max-width: 100%; margin: 0 auto"></video>
+        <img
+          v-else
+          :src="dialogImageUrl"
+          style="display: block; max-width: 100%; margin: 0 auto"
+        />
+      </template>
     </el-dialog>
   </div>
 </template>
@@ -49,7 +76,7 @@ export default {
   props: {
     value: [String, Object, Array],
     // 图片数量限制
-    limit: {
+    limit2: {
       type: Number,
       default: 5,
     },
@@ -61,7 +88,7 @@ export default {
     // 文件类型, 例如['png', 'jpg', 'jpeg']
     fileType: {
       type: Array,
-      default: () => ["png", "jpg", "jpeg"],
+      default: () => ["png", "jpg", "jpeg", 'mp4'],
     },
     // 是否显示提示
     isShowTip: {
@@ -81,7 +108,8 @@ export default {
       headers: {
         Authorization: "Bearer " + getToken(),
       },
-      fileList: []
+      fileList: [],
+      limit: 5
     };
   },
   watch: {
@@ -209,5 +237,10 @@ export default {
   opacity: 0;
   transform: translateY(0);
 }
+
+.component-upload-image{
+  display: flex;
+  flex-wrap: wrap;
+}
 </style>
 

src/views/ecw/order/components/PickupLog.vue

@@ -49,6 +49,7 @@ export default {
                 return deletePickup({id})
             }).then(res => {
                 this.$message.success('操作成功')
+                this.$emit('delete', id)
             })
         },
         closeDialog(){

src/views/ecw/order/index.vue

@@ -379,7 +379,7 @@
     <batch-single-application :order-list="orderId" :dialog-visible.sync="warehouseBol"></batch-single-application>
     <fee-application :order-id="orderId" :dialog-visible.sync="feeApplicationBol"></fee-application>
     <merge-log :order-no="showMergedLogOrderNo" v-if="showMergedLogOrderNo !== null" @close="showMergedLogOrderNo=null" />
-    <pickup-log v-if="showPickupLogOrderNo" :order-no="showPickupLogOrderNo" @close="showPickupLogOrderNo=null" />
+    <pickup-log v-if="showPickupLogOrderNo" :order-no="showPickupLogOrderNo" @close="showPickupLogOrderNo=null" @delete="getList" />
   </div>
 </template>