fj-dc-ui/.svn/pristine/ae/ae7f8c00b20be5edf565b53dae462de6222fb706.svn-base

<template>
  <div id="fpxMain">
    <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>
          </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'
  export default {
    name: "InfoSurfaceWater",
    components:{
      provTreeList
    },
    props:["dcztStatus","dcztDisabled","currentAdCode","layerId"],
    data() {
        return {
            currentType:'',
            rootCode:'350000',
            rootType:'2',
            model_fpx_name:'',
            recordTotal_dxs:'',
            tableData_fpxList:[],
            recordTotal_fpx:0,
            pageSize_fpx: 10,
            pageIndex_fpx: 1,
            loading: false,
            adCode:'',

        }
    },
    computed: {
      recPersId() {
        return localStorage.getItem("userid") ? localStorage.getItem("userid") : ''
      }
    },
    mounted(){
      this.adCode = this.currentAdCode;
      this.rootCode = this.currentAdCode;
      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();
      },
      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);
      },
    },
    watch:{
      currentAdCode(n,o){
        if(n == '0000000000'){
          n = '';
        }
        this.adCode = n;
        this.loadTableFpx();
      }

    }
  }
</script>

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