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

<template>
  <div>
    <el-container>
      <el-container>
        <el-main id="dxdcListMain" style="padding:5px 20px;">
          <el-tabs @tab-click="clickTab" v-model="currentViewId" type="card">
            <el-col :span="4" ref="elw">
              <el-card :body-style="{'padding':'0'}">
                <exportTreeList
                  :pid="pid"
                  :type="type"
                  :pidNodes="pidNodes"
                  :height="dxdcAsideHeight"
                  :width="treeWidth"
                  :showCheckbox="showCheckbox"
                  @provTreeSelectChange="provTreeSelectChange"
                  @treeCheckedDataChange="treeCheckedDataChange"
                />
              </el-card>
            </el-col>
            <el-col v-show="showObjData" :span="4" ref="elw">
              <el-card :body-style="{'padding':'0'}">
                <el-tree :data="objData" :props="defaultProps" :expand-on-click-node="false"
                         @node-click="objDataSelectChangeHandler">
                      <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span :title="node.label">{{ node.label }}</span>
                        </span>
                </el-tree>
              </el-card>
            </el-col>

            <el-tab-pane label="河道外-取水许可管理对象核实" name="first" :key="'first'">
              <el-col :span="reportWidth">
                <report_wtgt2 v-if="showTable" :ids="ids" :type="type" ref="first" :newYear="newYear"/>
              </el-col>
            </el-tab-pane>

            <el-tab-pane label="河道外-取水许可管理对象核实问题汇总表" name="second" :key="'second'">
              <el-col :span="reportWidth">
                <report_wtgt1 v-if="showTable" :ids="ids" :type="type" ref="second" :newYear="newYear"/>
              </el-col>
            </el-tab-pane>

          </el-tabs>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import report_wtgt1 from "./report_wtgt1.vue";
  import report_wtgt2 from "./report_wtgt2.vue";
  import exportTreeList from "./exportTreeList";
  import request from "@util/gw_ajax_request";

  export default {
    components: {
      report_wtgt2: report_wtgt2,
      report_wtgt1: report_wtgt1,
      exportTreeList: exportTreeList,
    },
    props: [],

    data() {
      return {
        options: [
          {
            value: "report_wtgt2",
            label: "取水许可管理对象核实-河道外"
          },
          {
            value: "report_wtgt1",
            label: ""
          }
        ],
        value: "",
        currentViewId: "first",
        showTable: true,
        currentNodeType: "",
        ids: [],
        pid: "000",
        pidNodes: [],
        type: "055",
        objData: [],
        dxdcMainHeight: window.innerHeight - 180,
        dxdcAsideHeight: window.innerHeight - 180,
        windowHeight: window.innerHeight - 200,
        windowWidth: window.innerWidth - 350,
        treeWidth: 250,
        reportWidth: 16,
        showCheckbox: false,
        showObjData: true,
        newYear: "",
        defaultProps: {
          children: "children",
          label: "depName",
        }
      };
    },
    computed: {
      persId() {
        return localStorage.getItem("userid")
          ? localStorage.getItem("userid")
          : "1098101939614724096";
      }
    },
    mounted() {
      this.treeWidth = this.$refs.elw.$el.clientWidth;
    },
    watch: {},
    methods: {
      //树节点选中或取消事件
      treeCheckedDataChange(params) {
        // 如果是选中状态，把元素id加入到ids里
        if (params.newStatus) {
          params.newCheckedArray.forEach((element, index) => {
            let id = element.id;
            if (id != null && id !== undefined && id !== "") {
              this.ids.push(id);
            }
          });
        } else {
          // 删除取消的元素id
          params.changedItem.forEach((element, index) => {
            let id = element.id;
            let inx = this.ids.indexOf(id);
            if (inx > -1) {
              delete this.ids[inx];
            }
          });
        }
        // 去重
        this.ids = Array.from(new Set(this.ids));
        console.log("ids:" + this.ids);
      },
      // 树节点点击事件
      provTreeSelectChange(data) {
        this.id = data.id;
        request.post(`/bis/insp/wtgt/findPage`, {pageNum: 1, pageSize: 100, groupId: this.id}).then((response) => {
          if (response.data !== null) {
            this.objData = response.data.list;
          }
        });
      },
      // 对象点击
      objDataSelectChangeHandler(data) {
        this.ids = data.id;
        this.$refs.first.searchExecl(this.ids);
      },
      // 切换TAB
      clickTab(e) {
        if (e.$el.id === 'pane-second') {
          this.reportWidth = 20;
          this.showCheckbox = true;
          this.showObjData = false;
        } else {
          this.reportWidth = 16;
          this.showCheckbox = false;
          this.showObjData = true;
        }
      },
      // changeYear(val) {
      //     this.newYear = val;
      //     this.ids = [];
      // },
    }
  };
</script>

<style>
</style>