fj-dc-ui/.svn/pristine/a1/a1896c03707d61b1fe973d319508e7a9ade7dcf5.svn-base

<template>
    <el-row>
        <el-col :span="rightCol">
            <el-card :body-style="{'height':dxdcMainHeight + 'px','padding':'10px'}">
                <div class="date_search_block">
                    <span class="demonstration">选择日期</span>
                    <el-date-picker
                            v-model="monthValue"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd">
                    </el-date-picker>
                    <el-button type="primary" icon="el-icon-search" style="float: right;margin:0 5px"
                               @click="searchExecl">查询
                    </el-button>
                </div>
                <div class="pageoffice_pic" style="width: 100%;height: 100%;">
                    <iframe :src="'/pageofficePath/dc/pageoffice/samrmp/show?orgId='+orgIdNew+'&sttm='+sttm+'&entm='+entm"
                            frameborder="0" width="100%" height="100%" style="overflow: auto"></iframe>
                    <div class="tip_modal" v-if="!monthValue.length" @click="showTipModal"></div>
                </div>
            </el-card>
        </el-col>
    </el-row>

</template>

<script>
    import exportTreeListLy from '../exportTreeList_ly';
    import {dateFormat,getFirstDayOfMonth} from '@util/gw_date.js';
    export default {
        components: {
            exportTreeListLy: exportTreeListLy,
        },
        data() {
            return {
                orgId: '', // 长江委
                pid: '000',
                pidNodes: [],
                type: '035',
                dxdcMainHeight: window.innerHeight - 110,
                dxdcAsideHeight: window.innerHeight - 90,
                loading: true,
                leftCol: 4,
                rightCol: 24,
                excelName: '中小河流治理检查工作报告',
                monthValue:[getFirstDayOfMonth(new Date(), 'yyyy-MM-dd'), dateFormat(new Date(), 'yyyy-MM-dd')],
                sttm: getFirstDayOfMonth(new Date(), 'yyyy-MM-dd'),
                entm: dateFormat(new Date(), 'yyyy-MM-dd')

            }
        },
        mounted() {

        },
        computed: {
            userId: function () {
                return localStorage.getItem("userid")
                    ? localStorage.getItem("userid")
                    : "1098101939614724096";
            },
            orgIdNew() {
                return localStorage.getItem("orgId")
                    ? localStorage.getItem("orgId")
                    : "";
            }
        },
        methods: {
            // 条件查询
            searchExecl() {
                console.log(this.monthValue);
                if (this.monthValue == '') {
                    this.sttm = '';
                    this.entm = '';
                } else {
                    this.sttm = this.monthValue[0];
                    this.entm = this.monthValue[1];
                }
            },
            // 没有选择左侧机构时展示遮罩层并给出提示
            showTipModal() {
                if (!this.monthValue.length) {
                    this.$message.warning('请先选择起始日期')
                    return;
                }
            }
        },
        watch: {
            monthValue(n, o) {
                if (n == null) {
                    this.monthValue = "";
                }
            }
        },
        activated() {
        }
    }
</script>

<style lang="scss" scoped>

    .date_search_block {
        margin-bottom: 20px;
    }

    .pageoffice_pic {
        position: relative;

        .tip_modal {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 100%;
        }
    }

</style>