fj-dc-ui/.svn/pristine/46/4659e3e3296477f4aa104b2343fef61cd3f1047d.svn-base

<template>

    <el-row >

        <el-col :span="4" ref="elw">
            <el-card :body-style="{'padding':'0'}">
                <export-tree-list-ry-fs
                        :pid="pid"
                        :type="type"
                        :pidNodes="pidNodes"
                        :level="level"
                        :height="dxdcAsideHeight"
                        @provTreeSelectChange="provTreeSelectChange"
                        :fsType="fsType"
                ></export-tree-list-ry-fs>
            </el-card>
        </el-col>

        <el-col :span="20">
            <el-card :body-style="{'padding-top':'10px'}">
                <div class="block">
                    <span class="demonstration">督查类型</span>
                    <el-select v-model="currentDCType" placeholder="请选择督查对象类别" clearable style="margin-left:10px;margin-right:15px">
                        <el-option
                        v-for="item in DCTypeOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>


                    <el-button type="primary" icon="el-icon-download"
                               style="float: right;margin:0 5px"
                               @click="exportExecl">导出</el-button>
                    <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 :id="formId" :target="iframeId" :action="reportSrc" method="post">
                    <input type="hidden" name="width" v-model="windowWidth">
                    <input type="hidden" name="height" v-model="windowHeight">
                    <input type="hidden" id="addvcd" name="addvcd">
                    <input type="hidden" id="objType" name="objType">
                    <input type="hidden" name="excelName" v-model="excelName">
                </form>
                <div style="width: 100%;height: 100%;" v-loading="loading">
                    <iframe :id="iframeId" :name="iframeId" src="" frameborder="0" width="100%" height="100%" style="overflow: auto"></iframe>
                </div>
            </el-card>

        </el-col>

    </el-row>

</template>

<script>

    const DCTypeOption = [{
        value: "12",
        label: '取水口取水及监管情况'
    }, {
        value: "13",
        label: '全国重要饮用水水源管理情况'
    },{
        value: "14",
        label: '水量分配及取用水管控情况'
    },{
        value: "15-1",
        label: '节约用水管理情况'
    },{
        value: "15-2",
        label: '节水评价情况'
    },{
        value: "16-1",
        label: '用水单位节约用水情况'
    },{
        value: "16-2",
        label: '节水型单位节约用水情况'
    }];

    import exportTreeListRyFs from '../exportTreeList_fs'
    import request from '@util/gw_ajax_request.js'
    import addvSearch from "@widget/addvSearch.vue"

    export default {
        components:{
            exportTreeListRyFs:exportTreeListRyFs,
            addvSearch: addvSearch
        },
        data() {
            return {
                rootCode:'000000',
                rootType:'2',
                adName:'',
                id:'none',
                pid:'000',
                type:'002',
                pidNodes:[],
                level:'1',
                addvcd:'000000000000',
                dxdcMainHeight: window.innerHeight-155,
                dxdcAsideHeight: window.innerHeight-120,
                windowHeight:window.innerHeight - 200,
                windowWidth:window.innerWidth - 350,
                reportSrc:'/demo/reportJsp/showReport.jsp?rpx=dc_szy_09',
                loading:false,
                excelName:'水资源检查工作情况统计表',
                formId:'formMain',
                iframeId:'frameMain',
                treeWidth: 250,
                currentDCType: '',
                DCTypeOption:DCTypeOption,
                fsType:'szy',

            }
        },
        mounted() {

        },
        activated(){
            this.searchExecl();
        },
        methods: {
            provTreeSelectChange: function(data) {
                this.addvcd = data.id;
                this.searchExecl()
            },
            onSearch(){

            },
            searchExecl(){

                if(this.addvcd != '' && this.addvcd.length != 12){
                    this.openMessage();
                    return;
                }
                
                this.loading = true;
                // 使用form表单post提交，彻底解决参数值过长的问题
                document.getElementById('addvcd').value = this.addvcd;
                if(this.currentDCType == undefined || this.currentDCType == null || this.currentDCType == ''){
                    document.getElementById('objType').value = 'all';
                }else {
                    document.getElementById('objType').value = this.currentDCType;
                }
                document.getElementById(this.formId).submit();
                // 使用_this
                let _this = this;
                document.getElementById(this.iframeId).onload = function(){
                    _this.loading = false;
                };
            },
             // 导出Excel数据
            exportExecl(){
                let v = window.frames[`${this.iframeId}`];
                v.report1_saveAsExcel();
            },
            openMessage(){
                const h = this.$createElement;
                this.$notify({
                    title: '提示',
                    message: h('i', { style: 'color: teal'}, '点击省份才会生成报告')
                });
            },
        },
        computed: {
            userId: function () {
                return localStorage.getItem("userid")
                    ? localStorage.getItem("userid")
                    : "1098101939614724096";
            }
        },
        watch: {


        }
    }
</script>


<style>

    .ducha_form .el-input {
        width: 150px !important;
    }

</style>