xiaoshu/src/components/DocumentCards.vue

<template>
    <main>
        <section :class="{ 'section-full': hasUpload }">
            <div v-for="(item, key) in data" :key="key" :style="{ background: item.background }">
                <img :src="getAssetURL(item.img)" />
                <div :style="{ color: item.color }">
                    {{ item.title }}
                    <span>{{ item.content }}</span>
                </div>
            </div>
        </section>
        <footer v-if="hasUpload">
            <a-popover :popup-visible="showUpload" position="tl">
                <div :class="{ 'text-hide': showUpload }">
                    <div
                        @click="
                            () => {
                                showUpload = true;
                            }
                        "
                    >
                        <img src="@/assets/document/3.svg" class="img-normal" v-if="!showUpload" />
                        <img src="@/assets/document/4.svg" class="img-hover" v-if="!showUpload" />
                        <img src="@/assets/document/5.svg" class="img-active" v-if="showUpload" />
                    </div>
                    <p>已选择 0/0 个文档</p>
                </div>
                <template #content>
                    <div class="upload-wrap">
                        <header>
                            <p>文档解析站</p>
                            <div
                                @click="
                                    () => {
                                        showUpload = false;
                                    }
                                "
                            >
                                <icon-close size="large" />
                            </div>
                        </header>
                        <div>
                            <section>
                                <a-upload
                                    draggable
                                    :multiple="true"
                                    :limit="5"
                                    @before-upload="onBeforeUpload"
                                    @exceed-limit="onExceedLimit"
                                    @before-remove="onBeforeRemove"
                                    :custom-request="customRequest"
                                    :show-upload-button="{ showOnExceedLimit: true }"
                                    accept=".pdf,.doc,.docx,.txt,.csv"
                                >
                                    <template #upload-button>
                                        <div class="upload-main">
                                            <p>拖拽文档到这里，或<span>点此上传</span></p>
                                            <span> 支持上传.pdf, .doc, .docx, .txt, .csv文档，大小不超过30M </span>
                                        </div>
                                    </template>
                                </a-upload>
                            </section>
                            <div>
                                <p>
                                    <span>已解析文件列表</span>
                                    <span>共0个</span>
                                </p>
                                <div>
                                    <a-table
                                        :pagination="false"
                                        row-key="name"
                                        :columns="columns"
                                        :data="tableData"
                                        :row-selection="rowSelection"
                                        v-model:selectedKeys="selectedKeys"
                                    >
                                        <template #methods="{ record }">
                                            <a-button @click="$modal.info({ title: 'Name', content: record.name })"
                                                >删除</a-button
                                            >
                                        </template>
                                    </a-table>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </a-popover>
        </footer>
    </main>
</template>
<script>
import { defineComponent, ref, inject, reactive } from "vue";
export default defineComponent({
    props: ["data", "hasUpload"],
    setup() {
        const showUpload = ref(true);
        const { helper } = inject("$global");
        const maxSize = 30 * 1024 * 1024;
        const fileList = [];
        const onBeforeUpload = (file) => {
            if (file.size > maxSize) {
                helper.message("error", `上传文件大小不能超过10M`);
                return false;
            }
            return true;
        };
        const onExceedLimit = () => {
            helper.message("error", `最多上传5个文件`);
        };
        const customRequest = async (option) => {
            const { onSuccess, fileItem } = option;
            const { file, uid } = fileItem;
            fileList.push({
                id: uid,
                file
            });
            onSuccess();
        };
        const onBeforeRemove = (data) => {
            fileList = fileList.filter((item) => item.id !== data.uid);
            return true;
        };
        const selectedKeys = ref(["Jane Doe", "Alisa Ross"]);

        const rowSelection = reactive({
            type: "checkbox",
            showCheckedAll: true,
            onlyCurrent: false
        });

        const columns = [
            {
                title: "文件名称",
                dataIndex: "name"
            },
            {
                title: "类型",
                dataIndex: "type"
            },
            {
                title: "大小",
                dataIndex: "size"
            },
            {
                title: "上传时间",
                dataIndex: "time"
            },
            {
                title: "操作",
                slotName: "methods"
            }
        ];
        const tableData = reactive([
            {
                key: "1",
                name: "文件名称1",
                type: "pdf",
                size: "13M",
                time: "2024.9.8"
            },
            {
                key: "2",
                name: "文件名称2",
                type: "pdf",
                size: "13M",
                time: "2024.9.8"
            },
            {
                key: "3",
                name: "文件名称3",
                type: "pdf",
                size: "13M",
                time: "2024.9.8"
            }
        ]);
        return {
            selectedKeys,
            getAssetURL: helper.getAssetURL,
            showUpload,
            onBeforeUpload,
            onExceedLimit,
            onBeforeRemove,
            customRequest,
            columns,
            tableData,
            rowSelection
        };
    }
});
</script>
<style lang="scss" scoped>
.upload-main {
    width: 800px;
    height: 109px;
    background: url("@/assets/document/upload.svg");
    margin: 0 auto;
    padding: 24px 0px 24px 277px;
    background-size: 100%;
    > p {
        color: #000;
        font-weight: bold;
        margin-bottom: 5px;
        > span {
            color: #00aea3;
            text-decoration: underline;
        }
    }
    > span {
        font-size: 13px;
        color: #7f7f7f;
    }
}
main {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    > section {
        overflow-y: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        &.section-full {
            flex: 1;
        }
        > div {
            width: 382px;
            height: 120px;
            padding: 20px 24px;
            border-radius: 8px;
            display: flex;
            > img {
                width: 38px;
                height: 38px;
                margin-right: 12px;
            }
            > div {
                font-size: 18px;
                font-weight: bold;

                > span {
                    font-size: 15px;
                    font-weight: 400;
                    color: #797d7f;
                    margin-top: 8px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    line-height: 1.4;
                }
            }
        }
    }
    > footer {
        > div {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            height: 32px;
            border-radius: 21px;
            border: 1px solid #e3e3e3;
            white-space: nowrap;
            overflow: hidden;
            transition-duration: 0.3s;
            width: 250px;
            &.text-hide {
                width: 110px;
                overflow: hidden;
            }
            > p {
                overflow: hidden;
                white-space: nowrap;
            }
            > div {
                cursor: pointer;
                width: 110px;
                height: 32px;
                .img-normal {
                    display: block;
                }
                .img-hover {
                    display: none;
                }
                &:hover {
                    .img-normal {
                        display: none;
                    }
                    .img-hover {
                        display: block;
                    }
                }
                > img {
                    width: 110px;
                    height: 32px;
                }
            }
        }
    }
}
.upload-wrap {
    width: 800px;
    height: 300px;
    display: flex;
    flex-direction: column;
    padding-bottom: 30px;
    > header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 13px;
        > p {
            font-size: 18px;
            font-weight: bold;
        }
        > div {
            width: 38px;
            height: 38px;
            border-radius: 6px;
            cursor: pointer;
            justify-content: center;
            align-items: center;
            display: flex;
            &:hover {
                background: rgba(0, 0, 0, 0.05);
            }
        }
    }
    > div {
        flex: 1;
        overflow-y: auto;
        > div {
            > p {
                margin: 20px 0;
                color: #7f7f7f;
                font-size: 13px;
                display: flex;
                justify-content: space-between;
            }
        }
    }
}
</style>