digital-medicine-front/src/views/models/FileLook.vue

<template>
    <transition-group class="upload-file-list" name="el-fade-in-linear flex1 ov-hd" tag="div">
        <el-row :gutter="60">
            <el-col :span="span" v-for="(file, index) in fileList" :key="index">
                <div class="upload-list-item">
                    <el-link class="flex1 right-item" :href="`${file.url}`" :underline="false" target="_blank">
                        <img style="width: 36px; height: 36px;" class="mr5" src="@/assets/images/pdf_icon.png" alt="" />
                        <div>
                            <div class="item-text">{{ file.fileName }}</div>
                            <div v-if="file.fileSize" class="item-text">{{ changeByte(file.fileSize) }}</div>
                        </div>
                    </el-link>
                    <a class="delete-item" @click="download(file.url, {}, file.fileName)" :underline="false">
                        <div class="d-flex a-c j-c flex-cln">
                            <el-icon size="16"><Download /></el-icon>
                            <div style="padding-top: 6px;">下载</div>
                        </div>
                    </a>
                </div>
            </el-col>
        </el-row>
        <div v-if="!fileList.length">-</div>
    </transition-group>
</template>

<script setup lang="ts">
import { download } from '@/utils/request';
import { propTypes } from '@/utils/propTypes';
import { changeByte } from '@/utils/ruoyi';

const props = defineProps({
    modelValue: [String, Object, Array],
    value: [String, Object, Array],
    span: propTypes.number.def(18),
    isObject: propTypes.bool.def(true)
});

const fileList = ref<any>([]);
watch(
    () => props.modelValue,
    async (val) => {
        if (val) {
            let list = [];
            if (Array.isArray(val)) {
                list = val;
            } else if (props.isObject) {
                list = [val];
            }
            fileList.value = [...list];
        } else {
            fileList.value = [];
            return [];
        }
    },
    { deep: true, immediate: true }
);
watch(
    () => props.value,
    async (val) => {
        console.log(val);
        
        if (val) {
            let list = [];
            if (Array.isArray(val)) {
                list = val;
            } else if (props.isObject) {
                list = [val];
            }
            fileList.value = [...list];
        } else {
            fileList.value = [];
            return [];
        }
    },
    {  immediate: true }
);
const handleDownload = () => {};
</script>

<style scoped lang="scss">
.upload-file-uploader {
    margin-bottom: 5px;
}

.upload-list-item {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #e8e8e8;
    border-radius: 2px;
    padding-right: 60px;
    box-sizing: border-box;
    margin-bottom: 12px;

    &:hover {
        border-color: var(--el-color-primary);
        background-color: rgba(#0f8240, 0.06);
        .delete-item {
            opacity: 1;
        }
    }
}

.item-text {
    line-height: 1.2;
    font-size: 14px;
    word-break:break-all;
}

.delete-item {
    width: 48px;
    position: absolute;
    top: -1px;
    bottom: -1px;
    right: 0;
    display: flex;
    justify-content: center;
    font-size: 12px;
    align-items: center;
    color: #fff;
    border: 1px solid var(--el-color-primary);
    cursor: pointer;
    background-color: var(--el-color-primary);
    opacity: 0;
}

.right-item {
    padding: 8px 10px;
    justify-content: start;
    box-sizing: border-box;
}

.upload-file {
    width: 100%;
}
</style>