fj-dc-ui/.svn/pristine/cf/cf2d87d6427fe1853485e5e497cd8eccd816aa77.svn-base

<!--
 * @description: 按照全国左侧树分组的形式，新开此组件，原来report_jcbg_doc已更名为（福建）
 * @fileName: report_jcbg_doc_group.vue
 * @author: 张昀朝
 * @date: 2020-05-28 14:27:44
 * @后台人员: 李海潮
 * @version: V0.0.1

 * @modify_description:
 * @modify_content:
 * @modify_author:
 * @modify_date: 2020-05-28 14:27:44
-->
<template>
    <el-row>
        <el-col :span="leftCol" ref="elw">
            <el-card :body-style="{'padding':'0'}">
                <export-tree-list-jc
                        :height="dxdcAsideHeight"
                        :width="treeWidth"
                        :style="{'max-height':dxdcAsideHeight+'px'}"
                        @provTreeSelectChange="provTreeSelectChange"
                        @provTreeNodeExpand="provTreeNodeExpand"
                ></export-tree-list-jc>
            </el-card>
        </el-col>
        <el-col :span="rightCol">
            <el-card :body-style="{'padding-top':'10px'}">
                <div class="block">
                    <span class="demonstration" style="margin-right: 5px;margin-left: 7px">报告状态</span>
                    <el-select v-model="bgType" clearable placeholder="请选择">
                        <el-option label="专家(交换意见稿)" value="0"></el-option>
                        <el-option label="交换意见阶段" value="4"></el-option>
                        <!--<el-option label="成果讨论阶段" value="5"></el-option>-->
                        <el-option label="中心修改阶段" value="6"></el-option>
                        <el-option label="司局修改阶段" value="7"></el-option>
                    </el-select>
                    <span class="demonstration" style="margin-right: 5px;margin-left: 7px">专业类型</span>
                    <el-select v-model="listType" clearable placeholder="请选择" multiple collapse-tags>
                        <el-option
                            v-for="item in listTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <span class="demonstration" style="margin-right: 5px;margin-left: 7px">排序方式</span>
                    <el-select v-model="orderBy" clearable placeholder="请选择">
                        <el-option label="严重程度" value="pblmPasi"></el-option>
                        <el-option label="专业类型" value="listType"></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 ref="formMain8" id="formMain8" target="frameMain8" :action="reportSrc" method="post">
                    <input type="hidden" name="width" v-model="windowWidth">
                    <input type="hidden" name="height" v-model="windowHeight">
                    <input id="id" type="hidden" name="rgstrId">
                    <input id="type" type="hidden" name="type" v-model="wordType">
                    <input id="userId" type="hidden" name="persId" v-model="userId">
                    <input id="listType" type="hidden" name="listType" v-model="listType">
                    <input id="orderBy" type="hidden" name="orderBy" v-model="orderBy">
                    <!-- <input type="hidden" name="excelName" v-model="excelName"> -->
                </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>
//这里导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//import 《组件名称》 from '《组件路径》';
//import {函数名称1，函数名称2} from '《组件路径》';

import request from '@util/gw_ajax_request.js';
import exportTreeListJc from './exportTreeList_jc_group'
import {dateFormat} from '@util/gw_date.js'

export default {
    components: {
        exportTreeListJc:exportTreeListJc,
    },
    data() {
        return {
            id:'',
            pid: '',
            dxdcMainHeight: window.innerHeight-150,
            dxdcAsideHeight: window.innerHeight-100,
            windowHeight:window.innerHeight - 200,
            windowWidth:window.innerWidth - 350,
            reportSrc2:'/demo/reportJsp/showReport.jsp?rpx=js_TAC_OUTLINE_WORD',
            // reportSrc:'/pageofficePath/pageoffice/tacReport/show',
            reportSrc:'/pageofficePath/pageoffice/tacReport/pdc/show',
            loading:false,
            leftCol:4,
            rightCol:20,
            excelName:'稽察报告',
            treeWidth: 250,
            firstToShow:true,
            bgType:'0',
            ywType:'1', // 业务类型 基础信息
            wordType:'',
            type:'400',
            listType:[],
            listTypeOptions: [
                {
                    value: '1',
                    label: '前期与设计'
                }, {
                    value: '2',
                    label: '建设管理'
                }, {
                    value: '3',
                    label: '计划下达与执行'
                }, {
                    value: '4',
                    label: '资金使用与管理'
                }, {
                    value: '5',
                    label: '工程质量'
                },{
                    value: '6',
                    label: '工程安全'
                }
            ],
            orderBy:'pblmPasi',
        }
    },
    mounted() {
        this.treeWidth = this.$refs.elw.$el.clientWidth;
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        // 注意是数组
        this.listType = ['1','2','3','4','5','6']
    },
    computed: {
        userId: function () {
            return localStorage.getItem("userid")
                ? localStorage.getItem("userid")
                : "1098101939614724096";
        }
    },
    methods: {
        provTreeSelectChange(data){
            this.id = data.id;
            this.searchExecl();
        },
        provTreeNodeExpand(data){

            this.id = data.id;
            this.pid = data.pid;

            this.searchExecl();
        },
        // 获取Excel数据
        searchExecl(){
            var newSrc = "";
            this.setWordType();
            let _this = this;
            if( _this.id == ''){
                return;
            }
            if(_this.id != '' && _this.pid !='' && _this.pid.length < 12){
                // this.openMessage();
                return;
            }

            let rgstrId = '';
            if(_this.bgType != '0' && _this.bgType != ''){
                // rgstrId = _this.id.split(",").map((x)=>{return x + "_" + _this.bgType;}).join(",");
                if(typeof(_this.id) == 'string'){
                    rgstrId = _this.id + "_" + _this.bgType;
                }else{
                    rgstrId = _this.id.map((x)=>{return x + "_" + _this.bgType;}).join(",");
                }
            }else{
                rgstrId = _this.id;
            }
            // v-model 不同步，只能手动同步了
            document.getElementById("id").value = rgstrId;
            this.firstToShow = false;
            this.loading = true;
            // 使用form表单post提交，彻底解决参数值过长的问题
            this.$refs.formMain8.submit();
            // 使用_this
            this.$refs.frameMain8.onload = function(){
                _this.loading = false;
                // 控制iframe内图片的大小
                var iframe = document.getElementById('frameMain8');
                var doc = iframe.contentWindow.document;
                var img = doc.getElementById('imgs');

                img.style.width = '100%';
            };

        },
        openMessage(){
            const h = this.$createElement;
            this.$notify({
                title: '提示',
                message: h('i', { style: 'color: teal'}, '点击组或者工程才会生成报告')
            });
        },
        // 导出Excel数据
        exportExecl(){
            v = window.frames["frameMain8"];
            v.report1_saveAsWord();
        },
        setWordType(){
            // 不足补零 1是基础信息
            if(this.type != undefined && this.type.length == 1){
                this.wordType = this.ywType + "0"+this.type;
            }else if(this.type.length == 2){
                this.wordType = this.ywType + this.type;
            }else{
                this.wordType = this.type;
            }
        },


    },
    watch:{
        monthValue(n,o){
            if(n == null){
                this.monthValue =  "";
            }
        }

    },
    activated() {
        this.searchExecl();
    }
}
</script>
<style >
/* @import url(); 引入公共css类 */

</style>