fj-dc-ui/.svn/pristine/45/45afdbdcb076632949ee6a09a13a0a3350a8c3be.svn-base

<template>
  <div id="fpxMain" 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_fpx_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="tableData_fpxList" 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="name" label="名称" width="150" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="code" label="编码" width="150" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column fixed="right" label="操作" min-width="200" align="center">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="SwzInfo(scope.row,'location')">定位</el-button>
                    <!-- <el-button type="text" size="small" @click="SwzInfo(scope.row,'baseInfo')">基础信息</el-button> -->
                  </template>
                </el-table-column>
              </el-table>
              <div class="block">
                <el-pagination background @size-change="handleSizeChange_fpx"
                               @current-change="handleCurrentChange_fpx" :page-sizes="[10,50, 100, 200]"
                               :page-size="15" layout="total,sizes, prev, pager, next" :pager-count="5"
                               :total="recordTotal_fpx">
                </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 {getFuPinXianPage} from '../../../api/zhxxAPI.js'
  import {exportModel} from "@util/gw_exportModel";
  export default {
    name: "InfoSurfaceWater",
    components:{
      provTreeList
    },
    props:["dcztStatus","dcztDisabled","currentAdCode","layerId"],
    data() {
        return {
            currentType:'',
            rootCode:'000000',
            rootType:'2',
            model_fpx_name:'',
            recordTotal_dxs:'',
            tableData_fpxList:[],
            recordTotal_fpx:0,
            pageSize_fpx: 10,
            pageIndex_fpx: 1,
            loading: false,
            adCode:'',
            exportLoading:false,
        }
    },
    computed: {
      recPersId() {
        return localStorage.getItem("userid") ? localStorage.getItem("userid") : ''
      }
    },
    watch:{
      currentAdCode(n,o){
        if(n == '0000000000'){
          n = '';
        }
        this.adCode = n;
        this.loadTableFpx();
      },
      layerId(n,o){
        if(n == 'mapServer_fpx'){//扶贫县 全部
          this.currentType = 'fpx';
        }else if(n == 'mapServer_zdx'){//重点扶贫县
            this.currentType = 'zdx';
        }else if(n == 'mapServer_bjx'){//边境扶贫县
            this.currentType = 'bjx';
        }else if(n == 'mapServer_tcx'){//天窗扶贫县
            this.currentType = 'tcx';
        }else if(n == 'mapServer_ddfp'){//定点扶贫县
            this.currentType = 'ddfp';
        }
      }
    },
    mounted(){
      let _this = this;
      if(_this.layerId == 'mapServer_fpx'){//扶贫县 全部
          _this.currentType = 'fpx';
      }else if(_this.layerId == 'mapServer_zdx'){//重点扶贫县
          _this.currentType = 'zdx';
      }else if(_this.layerId == 'mapServer_bjx'){//边境扶贫县
          _this.currentType = 'bjx';
      }else if(_this.layerId == 'mapServer_tcx'){//天窗扶贫县
          _this.currentType = 'tcx';
      }else if(_this.layerId == 'mapServer_ddfp'){//定点扶贫县
          _this.currentType = 'ddfp';
      }
      _this.dczt = _this.dcztStatus;
      _this.loadTableFpx();
    },
    methods:{
      indexMethod_country(index) {
        return (index + 1) + this.pageSize_fpx * (this.pageIndex_fpx - 1)
      },
      provTreeSelectChangeHandler(params) {
        if(params.code == '000000000000'){
          this.adCode = '';
        }else{
          this.adCode = params.code;
        }
        this.$nextTick(()=>{
          this.pageSize_fpx = 10;
          this.pageIndex_fpx = 1;
          this.loadTableFpx();
        })


      },
      searchByName() {
        this.loadTableFpx();
      },
      async exPort(){
          let _self = this;
            this.exportLoading = true;
            let data = {};
            data.code = _self.adCode;
            data.name = _self.model_fpx_name;
            data[_self.currentType] = '1';
            data.isExport = '1';
            let datas = JSON.stringify(data);

            let url = `/pdcApi/att/pkx/base/page`;
            let downloadName =  '';
            if(_self.currentType == 'fpx'){
              downloadName = '扶贫县.xls';
            }else if(_self.currentType == 'zdx'){
              downloadName = '重点扶贫县.xls';
            }else if(_self.currentType == 'bjx'){
              downloadName = '边境扶贫县.xls';
            }else if(_self.currentType == 'tcx'){
              downloadName = '天窗扶贫县.xls';
            }else if(_self.currentType == 'ddfp'){
              downloadName = '定点扶贫县.xls';
            }
            let type = "post";
            let result = await exportModel(type,url,downloadName,datas);
            this.exportLoading = result;
        },
      loadTableFpx() {
        let _this = this;
        _this.loading = true;
        let str = _this.currentType;
        let obj = {
          'code':_this.adCode,
          'name':_this.model_fpx_name,
          'pageNum': _this.pageIndex_fpx,
          'pageSize': _this.pageSize_fpx,
        }
        obj[_this.currentType] = '1';
        getFuPinXianPage(obj).then((res)=>{
          if (res.success) {
            _this.$nextTick(function () {
              _this.loading = false;
              var obj = res.data;
              _this.tableData_fpxList = obj.list;
              _this.recordTotal_fpx = obj.total;
            })

          }
        })
      },
      handleSizeChange_fpx (pageSize) {
        this.pageSize_fpx = pageSize;
        this.loadTableFpx();

      },
      handleCurrentChange_fpx (pageNum) {
        this.pageIndex_fpx = pageNum;
        this.loadTableFpx();

      },
      bShuikuStatistic(){

      },
      SwzInfo(row,info){
        this.$emit('SwzInfo',row,info);
      },
    },
    
  }
</script>

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