fj-dc-ui/.svn/pristine/fe/fe90e5d8ca2958971628098d751af6274b3e8653.svn-base

<template>
    <el-row>
        <el-col :span="leftCol" ref="elw">
            <el-card :body-style="{'padding':'0'}">
                <provTreeList :rootCode="rootCode" :rootType="rootType" 
                              @provTreeSelectChange="provTreeSelectChangeHandler"
                              :style="{'max-height':dxdcAsideHeight+'px'}"
                              :defaultExpandedKeys="defaultExpandedKeys"
                >
                </provTreeList>
            </el-card>
        </el-col>
        <el-col :span="rightCol">
            <el-card :body-style="{'padding-top':'10px'}">
                <div class="block">
                    <el-button type="primary" icon="el-icon-search" style="float: right;margin:0 5px" @click="searchExecl">查询</el-button>
                </div>

            </el-card>
            <el-card :body-style="{'height':dxdcMainHeight + 'px','padding':'0'}">
                <form ref="formMain8" id="formMain8" target="frameMain8" :action="reportSrc" method="post">
                    <input id="id" type="hidden" name="id">
                    <input id="adCode" type="hidden" name="adCode">
                </form>
                <div v-loading="loading" style="width: 100%;height: 100%;display:flex;flex-direction:row;justify-content:center;align-items:center;">
                    <i  v-if="firstToShow" style="font-size:32px;" class="el-icon-warning-outline"></i>
                    <p v-if="firstToShow" style="font-weight: bolder;color: #868686;font-size: larger;">请通过左侧树点击指定地区，导出报告</p>
                    <iframe v-show="!firstToShow" ref="frameMain8" id="frameMain8" name="frameMain8" src="" frameborder="0" width="100%" height="100%" style="overflow: auto"></iframe>
                </div>
            </el-card>
        </el-col>
    </el-row>

</template>

<script>

    import request from '@util/gw_ajax_request.js';
    import provTreeList from '@widget/provTreeList.vue';
    import {dateFormat} from '@util/gw_date.js'

    export default {
        components: {
            provTreeList:provTreeList,
        },
        data() {
            return {
                defaultExpandedKeys:['350000000000'],
                adCode:'',
                dxdcMainHeight: window.innerHeight-150,
                dxdcAsideHeight: window.innerHeight-100,
                windowHeight:window.innerHeight - 200,
                windowWidth:window.innerWidth - 350,
                reportSrc:'/pageofficePath/dc/pageoffice/hcbg/show',
                // reportSrc:'http://10.1.102.140:9002/dc/pageoffice/hcbg/show',
                loading:false,
                leftCol:4,
                rightCol:20,
                excelName:'核查报告',
                treeWidth: 250,
                firstToShow:true,
                rootCode:'000000',
                rootType:'2',
                
            }
        },
        mounted() {
            this.treeWidth = this.$refs.elw.$el.clientWidth;
        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {
            // 注意是数组
        },
        computed: {
            userId: function () {
                return localStorage.getItem("userid")
                    ? localStorage.getItem("userid")
                    : "1098101939614724096";
            }
        },
        methods: {
            
            provTreeSelectChangeHandler: function(params) {
                this.adCode = params.code;
                this.searchExecl();
            },
            // 获取Excel数据
            searchExecl(){

                let _this = this;
                if( _this.adCode == ''){
                    return;
                }
                
                // v-model 不同步，只能手动同步了
                document.getElementById("adCode").value = _this.adCode;
                this.firstToShow = false;
                this.loading = true;
                // 使用form表单post提交，彻底解决参数值过长的问题
                this.$refs.formMain8.submit();
                // 使用_this
                this.$refs.frameMain8.onload = function(){
                    _this.loading = false;
                };

            },
            

        },
        watch:{

        },
        activated() {
            this.searchExecl();
        }
    }
</script>

<style >



</style>