文件列表项

src/app-register.ts

@@ -160,6 +160,9 @@ export const AppComponents = {
         v.component('app-tree',() => import('@/components/app-tree/app-tree.vue'));
         //文件列表
         v.component('app-mob-file-list',AppMobFileList);
+        //文件列表项
+        v.component('app-mob-file-list-item',() => import('@/components/app-mob-file-list-item/app-mob-file-list-item.vue'));
+
 
         // ui组件 BEGIN
         // 按钮

src/components/app-mob-file-list-item/app-mob-file-list-item.less

+.app-mob-file-list-item {
+    min-height: 44px;
+    .app-mob-file-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-file-list-item/app-mob-file-list-item.vue

+<template>
+  <div class="app-mob-file-list-item">
+      <v-touch v-on:press="node_touch()">
+        <div class="app-mob-file-list_item" @click="onItemClick()">
+            <div class="index_icon">
+                <img v-if="isImages()" @click.stop="openImages(getImage())"  data-error="xxx.jpg" attempt="1"  v-lazy="getImage()" alt="">
+                <app-mob-icon v-else :class="item.extension" class="ios hydrated" :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.size}}</div>
+                    <div class="file_size">|</div>
+                    <div class="file_created_date">{{item.date}}</div>
+                </div>
+            </div>
+            <div v-if="isEnableDelete" class="file_delete_icon">
+                <app-mob-icon class="app-mob-file-list_item_icon ios hydrated" name="close-outline" @onClick="item_delete()"></app-mob-icon>
+            </div>
+        </div>
+    </v-touch>
+  </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 AppMobFileListItem extends Vue {
+    /**
+     * 数据项说明：url映射实体提供url的属性, date映射添加时间， size映射显示大小, extension映射文件类型, srfmajortext映射标题
+     * 参数说明：
+     *    是否启用删除：isEnableDelete，默认启用，不需要时父组件传递false
+     *    是否启用下载：isEnableDownload，默认启用，不需要时父组件传递false
+     *    是否启用下载：isEnableDownload，默认启用，不需要时父组件传递false
+     */
+
+    /**
+     * 下载文件路径
+     *
+     * @memberof AppMobFileListItem
+     */
+    public downloadUrl = Environment.BaseUrl + Environment.ExportFile;
+
+    /**
+     * 视图参数
+     *
+     * @memberof AppMobFileListItem
+     */
+    @Prop() protected item!: any;
+
+    /**
+     * 是否启用删除
+     *
+     * @memberof AppMobFileListItem
+     */
+    @Prop({default:true}) protected isEnableDelete?: boolean;
+
+    /**
+     * 是否启用下载
+     *
+     * @memberof AppMobFileListItem
+     */
+    @Prop({default:true}) protected isEnableDownload?: boolean;
+
+    /**
+     * 是否启用下载
+     *
+     * @memberof AppMobFileListItem
+     */
+    @Prop({default:true}) protected isEnablePreview?: boolean;
+
+    /**
+     * 传入数据变化
+     * 
+     * @memberof AppMobFileListItem
+     */
+    @Watch('item')
+    public initExtensionName(newVal: any,oldVal: any){
+        if(newVal){
+            this.getIcon();
+        }
+    }
+
+    /**
+     * 获取图标和文件类型
+     * 
+     * @memberof AppMobFileListItem
+     */
+    public getIcon(){
+        if(!Object.is(this.item.extension, 'jpg') && !Object.is(this.item.extension, 'gif') && !Object.is(this.item.extension, 'bmp') && !Object.is(this.item.extension, 'png')){
+            console.log(this.item)
+            debugger
+            switch (this.item.extension) {
+                case 'doc':
+                case 'docx':
+                    this.item.extension = 'doc'
+                    this.item.extensionName = 'file-word-o'
+                    break;
+                case 'txt':
+                    this.item.extensionName = 'file-text-o'
+                    break;
+                case 'pdf':
+                    this.item.extensionName = 'file-pdf-o'
+                    break;
+                case 'zip':
+                    this.item.extensionName = 'file-archive-o'
+                    break;
+                case 'rar':
+                    this.item.extensionName = 'file-archive-o'
+                    break;
+                case 'xls':
+                case 'xlsx':
+                    this.item.extension = 'xls'
+                    this.item.extensionName = 'file-excel-o'
+                    break;
+                case 'ppt':
+                case 'pptx':
+                    this.item.extension = 'ppt'
+                    this.item.extensionName = 'file-powerpoint-o'
+                    break;
+                case 'mp4':
+                    this.item.extensionName = 'file-video-o'
+                    break;
+                default:
+                    this.item.extension = 'txt'
+                    this.item.extensionName = 'file-o'
+                    break;
+            }
+        }   
+    }
+
+    /**
+     * 文件项点击事件
+     * 
+     * @memberof AppMobFileListItem
+     */
+    public onItemClick() {
+        if(!this.isEnableDownload){
+            return
+        }
+        let tempUrl = window.location.href.split("#")[0];
+        let url = tempUrl + `${this.downloadUrl}` + `/${this.item.url}`;
+        window.open(url);
+    }
+
+    /**
+     * 是否为图片类型
+     * 
+     * @memberof AppMobFileListItem
+     */
+    public isImages() {
+        return Object.is(this.item.extension, 'jpg') || Object.is(this.item.extension, 'gif') || Object.is(this.item.extension, 'bmp') || Object.is(this.item.extension, 'png')
+    }
+
+    /**
+     * 文件项删除事件
+     * 
+     * @memberof AppMobFileListItem
+     */
+    public item_delete() {
+        this.$emit("delete", [this.item]);
+    }
+
+    /**
+     * 解析图片地址
+     * 
+     * @memberof AppMobFileListItem
+     */
+    public getImage() {
+        return `${this.downloadUrl}` + `/${this.item.url}`
+    }
+
+    /**
+     * 打开图片预览
+     * 
+     * @memberof AppMobFileListItem
+     */
+    public openImages(src: any) {
+        if(this.isEnablePreview){
+            ImagePreview({
+                images: [
+                    src,
+                ],
+                showIndex: false,
+            });
+        }
+    }
+
+    /**
+     * 列表项长按
+     * 
+     * @memberof AppMobFileListItem
+     */
+    public node_touch() {
+        this.$emit("node_touch",this.item)
+    }
+}
+</script>
+<style lang="less">
+@import "./app-mob-file-list-item.less";
+</style>

src/components/app-mob-file-list/app-mob-file-list.vue

@@ -93,7 +93,7 @@ export default class AppMobFileList extends Vue {
     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')){
+                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':