ProUploadFaileView 文件查看器

实现

<template>
    <div class="pro-upload-file-view">
        <slot :fileClick="fileClick">
            <div class="name" @click="fileClick">
                {{ name }}
            </div>
        </slot>
    </div>
</template>

export default {
    name: 'ProUploadView',
    props: {
        validityTime: {
            // 连接过期时间
            type: Number,
            default: 2500,
        },
        realmType: {
            // 域名类别(Integer)(1-外网访问;2-内网访问;3-IPV6)
            type: Number,
            default: 1,
        },
        keyName: {
            // 文件keyName
            type: String,
            default: '',
        },
        name: {
            // 文件名
            type: String,
            default: '',
        },
        functionId: {
            // color网关 functionId
            type: String,
            default: '',
        }
    },
    setup(props) {
        const { t } = useI18n()
        const state = reactive({
        })
        if(!props.functionId){
            RcMessage.warning(`functionId为必传字段`)  
        }
        const getDownLoadUrl = getRequest(props.functionId)
        
        onMounted(() => {
            console.log('onMounted')
        })

        const methods = {
            /**
             * @description: 点击文件
             * @param {*}
             * @return {*}
             * @author: liyapei
             */
            fileClick() {
                if(!props.functionId){
                    RcMessage.warning(`functionId为必传字段`)
                    return
                }
                let itemParam = {
                    validityTime: props.validityTime,
                    realmType: props.realmType,
                    keyName: props.keyName
                }
                getDownLoadUrl({ itemParam })
                    .then(res => {
                        console.log('getUrlKeyMan res: ', res)
                        let {url} = res || {}
                        if(url){
                            methods.downLoad(url)
                        }else{
                            RcMessage.warning(res.message || t('getUrlErr'))
                        }
                    })
                    .catch(err => {
                        console.log('getUrlKeyMan err: ', err);
                        RcMessage.warning(err.message || t('getUrlErr'))
                    })
            },
            /**
             * @description: 下载动作
             * @param {*}
             * @return {*}
             * @author: liyapei
             */
            downLoad(url) {
                let a = document.createElement('a')
                a.href = url
                a.target = 'view——window'
                a.download = ''
                a.dispatchEvent(new MouseEvent('click'))
            },
        }
        return {
            t,
            ...toRefs(state),
            ...methods
        }
    },
}
</script>

使用示例

<h3 class="title">文件展示-在详情页使用</h3>
<pro-upload-file-view 
    name="客户等级列表.png" 
    keyName="dev/ME1654078725356_dd40303d-43c9-4a50-9e27-7c09cb54023a.png"
    :validityTime="2000"
    :realmType="1"
    functionId="bmall_workbench_frameconfig_getUrlKeyMan"
/>
<h3 class="title">文件展示-导出在列表中使用</h3>
<pro-upload-file-view
    name="客户等级列表.png" 
    keyName="dev/ME1654078725356_dd40303d-43c9-4a50-9e27-7c09cb54023a.png"
    :validityTime="2000"
    :realmType="1"
    functionId="bmall_workbench_frameconfig_getUrlKeyMan"
>
    <template #default="slotProps">
        <rc-button
            type="primary"
            link
            @click="slotProps.fileClick"
        >下载</rc-button>
    </template>
</pro-upload-file-view>

API

属性	说明	类型	默认值
name	文件名	String	''
keyName	文件key	String	''
validityTime	连接过期时间	Number	2500
realmType	内外网标识	Number	1 （1-外网访问;2-内网访问;3-IPV6）
functionId	下载接口functionId	String	''