epmet-work-pc/src/views/modules/base/smartExcel/cpts/excel-summary.vue

<template>
    <!-- 文件汇总 -->
    <div class="el-card">
        <div v-show="!showView">
            <div class="flex">
                <h3 class="title">汇总文件</h3>
                <el-button type="text" icon="el-icon-back" @click="handleClickBack">返回</el-button>
            </div>
            <div class="item flex flex-y flex-center-deputy ">
                <img :src="require(`@/assets/images/index/Excel.png`)" alt="">
                <div class="agencyName">周期更新表</div>
            </div>
            <h3 class="title">提报的文件</h3>
            <div class="flex-wrap flex">
                <div class="item flex flex-y flex-center-deputy" v-for="(item, index) in list"  @click="handleClickShowView('1879063358107648002')" :key="index">
                    <img :src="require(`@/assets/images/index/Excel.png`)" alt="">
                    <div class="agencyName">{{ item.title }}周期更新表</div>
                    <div>（{{ item.state }}）</div>
                </div>
            </div>
        </div>
        <div v-if="showView">
            <excel-view @close="close" :workbookId="workbookId"></excel-view>
        </div>
    </div>
</template>

<script>
import excelView from "./excel-view.vue";
import { requestPost } from "@/js/dai/request";

export default {
    data() {
        return {
            showView: false,
            list: [
                {
                    title: '嘉定山社区',
                    state: '未提交'
                },
                {
                    title: '嘉定山社区',
                    state: '未提交'
                },
                {
                    title: '嘉定山社区',
                    state: '未提交'
                },
                {
                    title: '嘉定山社区',
                    state: '未提交'
                },
                {
                    title: '嘉定山社区',
                    state: '未提交'
                },
                {
                    title: '嘉定山社区',
                    state: '未提交'
                },
                {
                    title: '嘉定山社区',
                    state: '未提交'
                },
                {
                    title: '嘉定山社区',
                    state: '未提交'
                },
            ],
            workbookId:''
        };
    },
    created() { },
    methods: {
        close() {
            this.showView = false
        },
        handleClickBack() {
            this.$emit('close')
        },
        handleClickShowView(val){
            this.$store.state.sidebarFold = true;
            this.showView = true;
            this.workbookId = val
        },
    },
    components: { excelView },
    computed: {

    },
    watch: {},
}
</script>

<style lang='scss' scoped>
.title {
    position: relative;
    margin-right: 10px;
    &::after {
        content: '';
        width: 4px;
        height: 16px;
        background: #5493ff;
        display: block;
        position: absolute;
        top: 0;
        left: -16px;
    }
}

.el-card {
    margin: 10px auto;
    padding: 0 16px;
    box-sizing: border-box;
    width: calc(100% - 40px);
}

.item {
    margin-right: 16px;
    width: 16%;
    margin-bottom: 16px;

    img {
        width: 80px;
        height: 80px;
    }
}

.agencyName {
    margin: 12px 0 12px;
}
</style>