fj-dc-ui/.svn/pristine/b4/b462988c3e813a276e21ede69f22e3dab2a8f551.svn-base

<template>
  <el-row>
    <el-col :span="leftCol">
      <el-card :body-style="{'padding':'0'}">
        <export-tree-list-ly
          :pid="pid"
          :type="type"
          :pidNodes="pidNodes"
          :style="{'max-height':dxdcAsideHeight+'px'}"
          @provTreeSelectChange="provTreeSelectChange"
        ></export-tree-list-ly>
      </el-card>
    </el-col>
    <el-col :span="rightCol">
      <el-card :body-style="{'padding-top':'10px'}">
        <div class="block">
          <span class="demonstration">选择月份</span>
          <el-date-picker
            v-model="monthValue"
            type="month"
            value-format="yyyy-MM"
            placeholder="选择月"
          ></el-date-picker>
<!--          <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'}">
        <div style="width: 100%;height: 100%;" v-loading="loading">
          <iframe
            ref="myIframe"
            id="frameMain_szdoc"
            src
            frameborder="0"
            width="100%"
            height="100%"
            style="overflow: auto"
          ></iframe>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>

import request from '../../../utils/gw_ajax_request.js'
import exportTreeListLy from '../exportTreeList_ly'
import { dateFormat } from '../../../utils/gw_date.js'
import globalVariable from "@api/globalVariable.js"

export default {
  components: {
    exportTreeListLy: exportTreeListLy,
  },
  data () {
    return {
      id: '', // 长江委
      pid: '000',
      pidNodes: [],
      type: '006',
      dxdcMainHeight: window.innerHeight - 180,
      dxdcAsideHeight: window.innerHeight - 90,
      windowHeight: window.innerHeight - 160,
      windowWidth: window.innerWidth - 250,
      reportSrc: '/pageofficePath/dc/pageoffice/lyzz/report/show',
      radioTable: 1,
      loading: true,
      leftCol: 4,
      rightCol: 20,
      excelName: '流域水闸专项检查工作报告',
      monthValue: dateFormat(new Date(), 'yyyy-MM'),
    }
  },
  mounted () {

  },
  computed: {
    userId: function () {
      return localStorage.getItem("userid")
        ? localStorage.getItem("userid")
        : "1098101939614724096"
    }
  },
  methods: {
    provTreeSelectChange (data) {
      this.id = data.id
      this.searchExecl()
    },
    // 获取Excel数据
    searchExecl () {
      //
      let _this = this
      if (_this.id == '') {
        this.id = globalVariable.firstNode
      }
      if (_this.id == '') {
        return
      }
      if (_this.id != '' && _this.id.length != 6) {
        this.openMessage()
        return
      }
      let iframe = document.getElementById("frameMain_szdoc")
      let src = this.reportSrc
      iframe.src = src + "?ids=" + _this.id


    },
    openMessage () {
      const h = this.$createElement
      this.$notify({
        title: '提示',
        message: h('i', { style: 'color: teal' }, '点击流域才会生成工作报告')
      })
    },
    // 导出Excel数据
    exportExecl () {
      v = window.frames["frameMain_szdoc"]
      v.contentWindow.report1_saveAsWord()
    },

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

    let _this = this
    let iframe = document.getElementById("frameMain_szdoc")
    let src = this.reportSrc
    iframe.src = src + "?ids=" + _this.id
    iframe.onload = function () {
      _this.loading = false
    }
  }
}
</script>

<style scoped>
</style>