JLH/JLHAPP/src/components/lj-fj.vue

<template>
    <div>
        <mu-row align-items="start" style="height: 30px;line-height: 30px;">
            <mu-col span="1" style="text-align:center">
                <svg class="icon" aria-hidden="true" @click="handleClick">
                    <use :xlink:href="icon"></use>
                </svg>
            </mu-col>
            <mu-col :span="deletable?8:9">
                <span class="lj-card-tertiary-content text-ellipsis-one_2" style="overflow:hidden;"
                    @click="handleClick">{{realFileName}}</span>
            </mu-col>
            <mu-col span="2" style="text-align:right">
                <span
                    class="lj-card-quaternary-content  lj-card-summary-light-text">{{realFileSize | numberUnitFilter}}</span>
            </mu-col>
            <mu-col span="1" style="text-align:center">
                <span v-if="deletable" @click="handleDelete">
                    <i class="iconfont icon-guanbi" style="font-size: 15px;color: #fc4e2c;"></i>
                </span>
            </mu-col>
        </mu-row>
    </div>
</template>

<script>
    export default {
        name: "lj-fj",
        props: {
            fileFj: {
                type: Object
            },
            fileName: String,
            fileType: String,
            fileSize: Number,
            md5: String,
            fileid: Number,
            url: String,
            // 使用默认的点击事件
            clickEventDefault: {
                Type: Boolean,
                default: true
            },
            deletable: Boolean,
            requestType: String, //请求附件，可选项:MailAnnex,OADocAnnex,OADemoAnnex,OAFlowDefAnnex,UFile(默认)
        },
        data() {
            return {}
        },
        methods: {
            handleClick() {
                if (!this.clickEventDefault) {
                    return;
                }
                this.openFile();
            },
            openFile() {
                let requestType = 'UFile'
                if (this.requestType) {
                    requestType = this.requestType
                }
            
                if (this.realFileMd5) {

                    // let abc = {
                    //     realFileName: this.realFileName,
                    //     realFileType: this.realFileType,
                    //     realFileMd5: this.realFileMd5,
                    //     realFileId: this.realFileId,
                    //     requestType: requestType,
                    // }
                    // alert(JSON.stringify(abc));


                    $lj.openFile(this.realFileName.trim(), this.realFileType, this.realFileMd5, this.realFileId, requestType);
                } else if (this.url) {
                    $lj.openFileByUrl(this.url);
                }
            },
            handleDelete() {
                this.$emit("on-delete");
            },
            
        },
        computed: {
            realFileName() {
                return this.fileName || (this.fileFj ? this.fileFj.fileName : "");
            },
            realFileType() {
                let type = this.fileType || (this.fileFj ? this.fileFj.fileType : "");
                if (type) {
                    let dotIndex = type.indexOf('.');
                    if (dotIndex >= 0) {
                        type = type.substring(type.indexOf('.') + 1);
                    }
                }
                return type.replace(/^\s+|\s+$/g,"");
            },
            realFileMd5() {
                return this.md5 || (this.fileFj ? this.fileFj.filemd5 : "");
            },
            realFileSize() {
                return this.fileSize || (this.fileFj ? this.fileFj.fileSize : "");
            },
            realFileId() {
                return this.fileid;
            },
            icon() {
                let type = this.realFileType.trim().toLowerCase();
                if (type) {    
                    switch (type) {
                        case "jpg":
                        case "jpeg":
                        case "png":
                        case "gif":
                        case "bmp":
                            return "#icon-tupian";
                        case "xls":
                        case "xlsx":
                            return "#icon-excel";
                        case "doc":
                        case "docx":
                            return "#icon-WORD";
                        case "txt":
                            return "#icon-txt";
                        case "pdf":
                            return "#icon-PDF";
                    }
                }
                return "#icon-yasuobao";
            }
        }
    }
</script>

<style scoped>

</style>