fj-dc-ui/.svn/pristine/d5/d56d3e1de9ed39e2cb0694bde69790a32bf5094d.svn-base

<template>
  <el-container>
    <el-aside width="250px" :style="{'height': treeHeight + 'px'}">
      <el-tree
        :highlight-current="true"
        class="filter_tree report_tree"
        :data="treeData"
        :props="defaultProps"
        node-key="id"
        :filter-node-method="filterNode"
        :expand-on-click-node="false"
        :default-expand-all="true"
        @node-click="treeNodeClickHandler"
        ref="tree2"
      >
        <span class="custom-tree-node" slot-scope="{ node }">
          <el-tooltip
            v-if="node.isLeaf"
            class="item"
            effect="dark"
            :content="node.label"
            placement="top-start"
          >
            <span>{{ node.label }}</span>
          </el-tooltip>
          <span v-else>{{ node.label }}</span>
        </span>
      </el-tree>
    </el-aside>
    <el-main>
      <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="(item,index) in tabList"
          :key="index"
          :label="item.label"
          :lazy="true"
          :name="item.value"
        >
          <div
            v-if="showReport"
            style="width:100%;padding:0px 0px;"
            :style="{'height' : tableHeight + 'px'}"
          >
            <p
              v-if="showLastTab"
              style="font-weight: bolder;color: #868686;font-size: larger;line-height: 100px;text-align: center"
            >请通过左侧树点击指定工程，查看报表</p>
            <iframe
              v-if="!showLastTab"
              id="iframeEle"
              :src="tableSrc + '&id=' + id + '&name=' + name + '&width=1920&height=592'"
              frameborder="0"
              width="100%"
              height="100%"
              style="overflow: auto"
            ></iframe>
          </div>
        </el-tab-pane>
      </el-tabs> -->
      <iframe
        v-if="!showLastTab"
        id="iframeEle"
        :src="tableSrc + '&id=' + id + '&name=' + name + '&width=1920&height=592'"
        frameborder="0"
        width="100%"
        height="100%"
        style="overflow: auto"
      ></iframe>
    </el-main>
  </el-container>
</template>
<script>
import request from '@util/gw_ajax_request.js'
import {getTrees} from '@util/gw_formatTree.js'
import {dateFormat} from '@util/gw_date.js'
export default {
  props:[],
  data() {
    return {
      treeHeight: window.innerHeight - 110,
      tableHeight: window.innerHeight - 180,
      activeName: "ZYHBDC",
      showReport: false,
      tabList: [{ label: "附表五 中央环保督察问题核查汇总表", value: "ZYHBDC" }],
      addForm: {
        year: "",
        batch: "",
        persId: localStorage.getItem("userid")
      },
      yearList: [],
      pcList: [],
      tableSrc:
        "/demo/reportJsp/showReport.jsp?rpx=ZYHBDC",
      pcid: "",
      year: "",
      treeData: [],
      defaultProps: {
        children: "children",
        label: "pnm"
      },
      id: "",
      name: "",
      orgType: "20"
    };
  },
  //监听属性 类似于data概念
  computed: {
    persId() {
      return localStorage.getItem("userid")
        ? localStorage.getItem("userid")
        : "1098101939614724096";
    },
    showLastTab() {
      return this.activeName == "STBCWTQD" && !this.id;
    }
  },
  components: {},
  mounted() {
    this.$nextTick(() => {
      this.getTreeData();
    });
  },
  methods: {
    search() {
      let iframe = document.getElementById("iframeEle");
      let src = this.tableSrc;
      iframe.src =
        src +
        "&width=1920&height=592" +
        "&pcid=" +
        this.addForm.batch +
        "&year=" +
        this.addForm.year;
    },
    //获取左侧树数据
    getTreeData() {
      let _self = this;
      request
        .get(`/dc/organization/base/getAllNode`,{params:{'userId':_self.persId,'orgType':_self.orgType}})
        .then(res => {
          _self.showReport = true;
          let data = res.data
          data.forEach(ele => {
              if(ele.sttm==null || ele.sttm == ''){
                  ele.sttm = ''
              }else{
                  ele.sttm = dateFormat(ele.sttm,'yy-MM-dd');
              }if(ele.entm==null || ele.entm == ''){
                  ele.entm = ''
              }else{
                  ele.entm = dateFormat(ele.entm,'yy-MM-dd');
              }
          });
          data = getTrees(data)

          // 组员权限，父节点点击无效
          if(data.length == 1){
              var children = data[0].children;
              if(children && children.length == 1){
                data[0].isNotClick = true;
                _self.id = children[0].id;
              }
          }
          // 隐藏上级节点
          // if(data && data.length == 1){
          //   data = data[0].children;
          //   if(data && data.length > 0){
          //     _self.id = data[0].id;
          //   }
          // }
          
          _self.treeData = data;
          setTimeout(() => {
            this.$refs.tree2.filter("初始化");
          }, 1000);
        });
    },
    //树节点点击事件
    treeNodeClickHandler(data, node, tree) {
      if(!data.isNotClick){
        this.id = data.id;
        this.name = data.pnm;
      }
    },
    filterNode(value, data, node) {
      if (!value) return true;
      if (this.activeName == "STBCWTQD") {
        return node.level < 5;
      } else {
        return node.level < 4;
      }
    },
    changeYear() {},
    handleClick() {}
  },
  watch: {
    activeName(val) {
      if (val == "ZYHBDC") {
        this.tableSrc =
          "/demo/reportJsp/showReport.jsp?rpx=ZYHBDC";
      } else if (val == "STBCWTQD") {
        
      }
      this.$refs.tree2.filter(val);
    }
  }
};
</script>

<style lang="scss">
.report_tree {
  margin-top: 20px;
}
</style>