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

<template>
    <!-- 文件汇总 -->
    <div class="el-card" style="border: none;">
        <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 " @click="handleClickShowViewAll(list[0].workBookId)">
                <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(item)" :key="index">
                    <img :src="require(`@/assets/images/index/Excel.png`)" alt="">
                    <div class="agencyName">{{ item.taskTitle }}周期更新表</div>
                    <div>（{{ getStateDescription(item.taskState) }}）</div>
                </div>
            </div>
        </div>
        <div v-if="showView">
            <excel-view @close="close" :workbookId="workbookId" :infoObj="infoObj" :pageType="'add'" :sheetTotal="sheetTotal" :mergeObj="mergeObj" :userId="userId"></excel-view>
        </div>
    </div>
</template>

<script>
import excelView from "./excel-view.vue";
import { requestPost, requestGet } from "@/js/dai/request";
export default {
    data() {
        return {
            showView: false,
            list: [
            ],
            workbookId:'',
            sheetTotal:false,
            infoObj:{},
            mergeObj:null,//用于传递subworkbookId与workbookId
            userId:''
        };
    },
    created() {
        
     },
  async  mounted(){
        this.getTableList()
    },
    methods: {
        getStateDescription(state) {
            const stateMap = {
                deal: "处理中",
                resolve: "完结",
                cancel: "取消",
                notStart: "未开始",
                notSubmit: "未提交",
                rejected: "已驳回",
                submit: "已提交",
                archived: "已存档",
                reassigne: "已改派"
            };
            return stateMap[state] || "未开始";
        },
        async getTableList(){
            let url = '/actual/base/communityOneTablePeriodPublish/page'
            let params = {
                taskId:this.summaryDetal.taskId,
                pageSize:100,
                pageNo:1,
                taskNum:1
            }
            let {code,msg,data} = await requestGet(url,params)
            if(code === 0){
                this.list = data.list
            }
        },
        close() {
            this.showView = false
        },
        handleClickBack() {
            this.$emit('close')
        },
        handleClickShowView(val){
            const { id, taskId, taskTitle, taskPeriod, taskType, taskIntroduction,subWorkBookId,workBookId,taskStateName} = val;
            this.$store.state.sidebarFold = true;
            this.showView = true;
            this.sheetTotal =  false
            this.workbookId = val.taskId;
            this.userId = val.userId;
            this.infoObj = { id, taskId, taskTitle, taskPeriod, taskType, taskIntroduction};
            this.mergeObj = {subWorkBookId,workBookId,taskStateName }
            this.taskStateName=val.taskStateName

        },
        handleClickShowViewAll(val){
            this.$store.state.sidebarFold = true;
            this.showView = true;
            this.sheetTotal = true
            this.workbookId = val
            this.infoObj = {taskTitle:this.list[0].taskTitle}
        }
    },
    components: { excelView },
    computed: {

    },
    props: {
        summaryDetal: {
            type: Object,
            default: ""
        },
    },
    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>