IframeInventoryTable.vue 2.94 KB
<template>
  <div class="app-container">
    <el-form
      :inline="true"
    >
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="dateRange"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="cyan"
          icon="el-icon-search"
          size="mini"
          @click="splicDate"
        >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetDate"
        >重置</el-button
        >
      </el-form-item>
    </el-form>
      <iframe :id="id" :src="url" frameborder="0" width="100%" height="800px" scrolling="auto"></iframe>
  </div>
</template>

<script>

  export default {
    name: "IframePageContent",
    data() {
      return {
        url: "",
        id: "",
        dateRange: [],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              const year = new Date().getFullYear()
              if (year % 4) {
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
              } else {
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 366);
              }
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      }
    },
    created() {
      this.url = "http://172.16.29.47:8888/jmreport/view/1369088089829543936"
    },
    watch: {
      $route(to, from) {
        this.goUrl()
      }
    },
    methods: {
      goUrl() {

      },
      splicDate(){
        this.url = this.url.concat("?beginTime="+this.dateRange[0]+"&endTime="+this.dateRange[1])
      },
      resetDate(){
        this.url = this.url.slice(0,this.url.search("\\?"))
      }
    }
  }
</script>

<style>
</style>