文件列表

src/components/app-mob-upload/app-mob-upload.less

+.app-mob-upload-list {
+    min-height: 44px;
+    .app-mob-upload-list_item {
+        font-size: 12px;
+        display: flex;
+        align-items: center;
+        background-color: #fff;
+        border-bottom: solid 1px #efefef;
+        .index_icon {
+            width: 40px;
+            height: 40px;
+            line-height: 40px;
+            text-align: center;
+            margin-left: 10px;
+            font-size: 30px;
+            img {
+                width: 100%;
+                height: 100%;
+                border-radius: 4px;
+            }
+            .doc {
+                color: #54b5f0;
+            }
+            .txt {
+                color: #ccc;
+            }
+            .pdf {
+                color: #ec0013;
+            }
+            .zip {
+                color: #0078d7;
+            }
+            .rar {
+                color: #8c58a2;
+            }
+            .xls {
+                color: #107c41;
+            }
+            .ppt {
+                color: #c43e1c;
+            }
+            .mp4 {
+                color: #177ecd;
+            }
+        }
+        .file_info_content {
+            position: relative;
+            width: calc(100% - 50px);
+            padding: 10px 30px 10px 10px;
+        }
+        .file_size {
+            margin-right: 10px;
+        }
+        .file_footer {
+            display: flex;
+            color: #b4b4b4;
+        }
+        .file_name {
+            padding: 8px 0;
+        }
+        .file_delete_icon {
+            padding-right: 10px;
+            font-size: 1rem;
+        }
+    }
+    ion-icon {
+        color: @color-main-color;
+    }
+    .nofile {
+        height: 44px;
+        text-align: center;
+        background: #fcfcfc;
+        line-height: 44px;
+        font-size: 13px;
+    }
+}

src/components/app-mob-upload/app-mob-upload.vue

+<template>
+  <div class="app-mob-upload-list">
+      <template  v-for="item in items">
+          <v-touch v-on:press="node_touch(item)" :key="item.id">
+    <div class="app-mob-upload-list_item" @click="onItemClick(item)" >
+      <div class="index_icon">
+        <img v-if="isImages(item)" @click.stop="openImages(getImage(item))"  data-error="xxx.jpg" attempt="1"  v-lazy="getImage(item)" alt="">
+        <app-mob-icon v-else :class="item.extension" :name="item.extensionName"></app-mob-icon> 
+      </div>
+      <div class="file_info_content">
+        <div class="file_name"> <strong>{{ item.srfmajortext }}</strong></div>
+        <div class="file_footer">
+            <div class="file_size">{{item.strsize}}</div>
+            <div class="file_size">|</div>
+            <div class="file_created_date">{{item.addeddate}}</div>
+        </div>
+      </div>
+        <div v-if="isEnableDelete" class="file_delete_icon"><app-mob-icon class="app-mob-upload-list_item_icon ios hydrated" name="close-outline" @onClick="item_delete(item)"></app-mob-icon></div>
+    </div>
+          </v-touch>
+      </template>
+    <div class="nofile" v-if="items.length == 0">{{$t('no_file')}}</div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Provide, Emit, Watch, } from "vue-property-decorator";
+import { Environment } from "@/environments/environment";
+import { Uploader } from "vant";
+import { ImagePreview } from 'vant';
+Vue.use(Uploader);
+@Component({
+    i18n: {
+        messages: {
+            "ZH-CN": {
+                no_file: "暂无附件",
+            },
+            "EN-US": {
+                no_file: "no data",
+            },
+        },
+    },
+    components: { [ImagePreview.Component.name]: ImagePreview.Component, }
+})
+export default class AppMobUploadList extends Vue {
+
+    /**
+     * 下载文件路径
+     *
+     * @memberof AppMobUploadList
+     */
+    public downloadUrl = Environment.BaseUrl + Environment.ExportFile;
+
+    /**
+     * 视图参数
+     *
+     * @memberof AppMobUploadList
+     */
+    @Prop() protected items!: any;
+
+    /**
+     * 是否启用删除
+     *
+     * @memberof AppMobUploadList
+     */
+    @Prop({default:true}) protected isEnableDelete?: boolean;
+
+    /**
+     * 是否启用下载
+     *
+     * @memberof AppMobUploadList
+     */
+    @Prop({default:true}) protected isEnableDownload?: boolean;
+
+    /**
+     * 是否启用下载
+     *
+     * @memberof AppMobUploadList
+     */
+    @Prop({default:true}) protected isEnablePreview?: boolean;
+
+    /**
+     * 传入数据变化
+     */
+    @Watch('items')
+    public initExtensionName(newVal: any,oldVal: any){
+        if(newVal){
+            this.items.forEach((item: any)=>{
+                if(!Object.is(item.extension, 'jpg') || Object.is(item.extension, 'gif') || Object.is(item.extension, 'bmp') || Object.is(item.extension, 'png')){
+                    switch (item.extension) {
+                        case 'doc':
+                        case 'docx':
+                            item.extension = 'doc'
+                            item.extensionName = 'file-word-o'
+                            break;
+                        case 'txt':
+                            item.extensionName = 'file-text-o'
+                            break;
+                        case 'pdf':
+                            item.extensionName = 'file-pdf-o'
+                            break;
+                        case 'zip':
+                            item.extensionName = 'file-archive-o'
+                            break;
+                        case 'rar':
+                            item.extensionName = 'file-archive-o'
+                            break;
+                        case 'xls':
+                        case 'xlsx':
+                            item.extension = 'xls'
+                            item.extensionName = 'file-excel-o'
+                            break;
+                        case 'ppt':
+                        case 'pptx':
+                            item.extension = 'ppt'
+                            item.extensionName = 'file-powerpoint-o'
+                            break;
+                        case 'mp4':
+                            item.extensionName = 'file-video-o'
+                            break;
+                        default:
+                            item.extension = 'txt'
+                            item.extensionName = 'file-o'
+                            break;
+                    }
+                }
+            })
+        }
+    }
+
+    /**
+     * 文件项点击事件
+     * 
+     * @memberof AppMobUploadList
+     */
+    public onItemClick(item: any) {
+        if(!this.isEnableDownload){
+            return
+        }
+        let tempUrl = window.location.href.split("#")[0];
+        let url = tempUrl + `${this.downloadUrl}` + `/${item.id}`;
+        window.open(url);
+    }
+
+    /**
+     * 是否为图片类型
+     */
+    public isImages(item: any) {
+        return Object.is(item.extension, 'jpg') || Object.is(item.extension, 'gif') || Object.is(item.extension, 'bmp') || Object.is(item.extension, 'png')
+    }
+
+    /**
+     * 文件项删除事件
+     * 
+     * @memberof AppMobUploadList
+     */
+    public item_delete(item: any) {
+        this.$emit("delete", [item]);
+    }
+
+    /**
+     * 解析图片地址
+     */
+    public getImage(item: any) {
+        return `${this.downloadUrl}` + `/${item.id}`
+    }
+
+    /**
+     * 打开图片预览
+     */
+    public openImages(src: any) {
+        if(this.isEnablePreview){
+            ImagePreview({
+                images: [
+                    src,
+                ],
+                showIndex: false,
+            });
+        }
+    }
+
+    /**
+     * 列表项长按
+     */
+    public node_touch(item:any) {
+        this.$emit("node_touch",item)
+    }
+}
+</script>
+
+<style lang="less">
+@import "./app-mob-upload-list.less";
+</style>
\ No newline at end of file