fj-dc-ui/.svn/pristine/f1/f1cd933df297fec78d781085f7ac5cc485ed7c40.svn-base

<template>
    <div id="skMain" v-loading='exportLoading'>
      <el-row style="margin-bottom:5px;">
        <el-col :span="24">
          <div class="grid-content bg-purple-light">
            <div style="padding:15px 5px 5px 5px;">
              <span style="font-size: 12px;margin-left: 10px;">名称：</span>
              <el-input style="width:150px;" class="kjr-input" size="mini" v-model="model_name"
                        placeholder="请输入名称查询" @keydown.enter.native="searchByName" clearable>
              </el-input>

              &nbsp;&nbsp;&nbsp;
              <el-button @click="searchByName" size="mini" type="primary">查询</el-button>
              <el-button @click="exPort" size="mini" type="success">导出</el-button>
            </div>
            <div style="padding:5px;">
              <el-col :span="5">
                <div style="height: 500px;overflow: auto">
                  <provTreeList :rootCode="rootCode" :rootType="rootType"
                                @provTreeSelectChange="provTreeSelectChangeHandler"
                  >
                  </provTreeList>
                </div>

              </el-col>
              <el-col :span="19">
                <el-table :data="tableDataList" v-loading="loading" height="500" border stripe style="width: 100%">
                  <el-table-column type="index" width="50" label="序号" align="center" :index="indexMethod_country">
                  </el-table-column>
                  <el-table-column prop="nm" label="工程名称" min-width="130" align="center" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="adCode" label="行政区编码" min-width="120" align="center"></el-table-column>
                  <el-table-column prop="pcX" label="经度" min-width="120" align="center"></el-table-column>
                  <el-table-column prop="pcY" label="纬度" min-width="120" align="center" show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column fixed="right" label="操作" min-width="180" align="center">
                    <template slot-scope="scope">
                      <el-button type="text" size="small" @click="szyAllQyshInfo(scope.row,'location')">定位</el-button>
                      <el-button type="text" size="small" @click="szyAllQyshInfo(scope.row,'baseInfo')">基础信息</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="block">
                  <el-pagination background @size-change="handleSizeChange"
                                 @current-change="handleCurrentChange" :page-sizes="[10,50, 100, 200]"
                                 :page-size="15" layout="total,sizes, prev, pager, next" :pager-count="5"
                                 :total="recordTotal">
                  </el-pagination>
                </div>
              </el-col>
            </div>

          </div>
        </el-col>
      </el-row>
    </div>
</template>

<script>
  import provTreeList from '../../../../widgets/provTreeListAndChina'
  import request from '../../../../utils/gw_ajax_request.js';
  import {exportModel} from "@util/gw_exportModel";
  import {getBasePage} from '../../../../api/zhxxAPI.js'
  export default {
    name: "resevoirList",
    components:{
      provTreeList
    },
    props:["dcztDisabled","currentAdCode"],
      data() {
          return {

            rootCode:'000000',
            rootType:'2',
            model_name:'',
            dczt:'',
            tableDataList:[],
            recordTotal:0,
            pageSize: 10,
            pageIndex: 1,
            loading: false,
            isDczt:false,
            adCode:'',
            exportLoading:false,
          }
      },
      computed: {
        recPersId() {
          return localStorage.getItem("userid") ? localStorage.getItem("userid") : ''
        }
      },
      mounted(){
        let _this = this;
        
        _this.loadTableYdb();
      },
      methods:{
        indexMethod_country(index) {
          return (index + 1) + this.pageSize * (this.pageIndex - 1)
        },
        provTreeSelectChangeHandler(params) {
          this.adCode = params.code;
          if(this.adCode == "000000000000"){
              this.adCode = '';
          }
          this.$nextTick(()=>{
            this.pageSize = 10;
            this.pageIndex = 1;
            this.loadTableYdb();
          })


        },
        searchByName() {
          this.loadTableYdb();
        },
        async exPort(){
          this.exportLoading = true;
            let url = '/pdcApi/dc/general/info/getBasePage?objType=12&adCode='+this.adCode+'&pageNum='+this.pageIndex+'&pageSize='+this.pageSize+'&name='+this.model_name+'&isExport=1';
            let downloadName =  "全部取用水户.xls";
            let type = "get";
            let result = await exportModel(type,url,downloadName);
            this.exportLoading = result;
        },
        loadTableYdb() {
            let _this = this;
            _this.loading = true;
            getBasePage('12',_this.adCode,_this.pageIndex,_this.pageSize,_this.model_name).then((res)=>{
                if (res.success) {
                    _this.$nextTick()
                    _this.loading = false;
                    var obj = res.data;
                    _this.tableDataList = obj.list;
                    _this.recordTotal = obj.total;
                }
            })
        },
        handleSizeChange (pageSize) {
            this.pageSize = pageSize;
            this.loadTableYdb();

        },
        handleCurrentChange (pageNum) {
            this.pageIndex = pageNum;
            this.loadTableYdb();

        },
        bShuikuStatistic(){

        },
        szyAllQyshInfo(row,info){
          this.$emit('szyAllQyshInfo',row,info);
        },
        formatGateType:function(row, column){
          return row.type == "1" ? '水库'
            : row.type == "2" ? '湖泊'
              : row.type == "3" ? '河流'
                :row.type == "9" ? '其他':'';
        },
      },
      watch:{
        
        currentAdCode(n,o){
          this.adCode = n;
          this.loadTableYdb();
        }

      }
    }
</script>

<style>
  #skMain .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    background-color: #558ed0;
  }
</style>