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><span style="margin-right: 10px;">任务主题：{{list[0].taskTitle}}</span> <span>任务周期：{{list[0].taskPeriodName}}</span></div>
            <div class="item flex flex-y flex-center-deputy " @click="handleClickShowViewAll(list[0].workBookId)">
                <img :src="require(`@/assets/images/index/Excel.png`)" alt="" style="margin: 10px 0 0; cursor:pointer ;">
                <div class="agencyName">{{list[0].taskTitle}}</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="" style="cursor: pointer;">
                    <div class="agencyName">{{ item.orgUserName }}</div>
                    <div :class="item.taskState === 'archived'?'green':item.taskState === 'submit'?'blue':item.taskState === 'rejected'?'black':'orange'">（{{ item.taskStateName }}）</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(){
     console.log(this.summaryDetal,"sdf;lksdf;");
    
        this.getTableList()
    },
    methods: {
        async getTableList(){
            let url = '/actual/base/communityOneTablePeriodPublish/page'
            let params = {
                taskId:this.summaryDetal.taskId,
                pageSize:100,
                pageNo:1,
                taskNum:this.summaryDetal.taskNum,
                delReassign:"del"
            }
            let {code,msg,data} = await requestGet(url,params)
            if(code === 0){
                this.list = data.list
            }
        },
        close() {
            this.showView = false
            this.getTableList()
        },
        handleClickBack() {
            this.$emit('close')
        },
        handleClickShowView(val){
            console.log(val,"dskfjsdl");
            
            const {taskPeriodName,taskNum, 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,taskNum,taskPeriodName};
            console.log(this.infoObj,"dsfjs");
            
            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;
}
.orange{
    color: #f87f3a;
}
.green{
    color: #08b9b4;
}
.blue{
    color: #5294ff;
}
.black{
    color:#323888;
}
</style>