fj-dc-ui/.svn/pristine/1c/1c18e2f82c29e005a6ad0e2677dbdeab08375c29.svn-base

<template>
  <div id="swzMain" 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_shuiwenzhan_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_shuiwenzhanList" 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="stnm" label="测站名称" width="150" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="rvnm" label="河流名称" width="150" align="center"  show-overflow-tooltip></el-table-column>
                <el-table-column prop="hnnm" label="水系名称" width="200" align="center"  show-overflow-tooltip></el-table-column>
                <el-table-column prop="bsnm" label="流域名称" width="150" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="stlc" label="站址" width="200" align="center"  show-overflow-tooltip>
                </el-table-column>

                <el-table-column label="基面名称" prop="dtmnm" width="110" align="center">
                </el-table-column>
                <el-table-column label="基面高程" width="160" align="center" prop="dtmel">
                </el-table-column>
                <el-table-column prop="sttp" label="站类" width="100" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="dfrtms" label="报汛段次" width="200" align="center"  show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="frgrd" label="报汛等级
" width="200" align="center"  show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="bgfrym" label="始报年月
" width="200" align="center"  show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="edfrym" label="终报报年月" width="200" align="center"  show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="admauth" label="信息管理单位
" width="200" align="center"  show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="stbk" label="测站岸别
" width="200" align="center"  show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="esstym" label="建站年月

" width="200" align="center"  show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="phcd" label="拼音码

" width="200" align="center"  show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="locality" label="交换管理单位" width="100" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="drna" label="集水面积" width="100" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="dtpr" label="基面修正值" width="200" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="atcunit" label="隶属行业单位" width="200" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="stazt" label="测站方位
" width="200" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="至河口距离" width="160" align="center" prop="dstrvm"></el-table-column>

                <el-table-column prop="usfl" label="启用标志" width="200" 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" style="text-align: center;">
                <el-pagination background @size-change="handleSizeChange_QuShuiKou"
                               @current-change="handleCurrentChange_QuShuiKou" :page-sizes="[10,50, 100, 200]"
                               :page-size="15" layout="total,sizes, prev, pager, next" :pager-count="5"
                               :total="recordTotal_shuiwenzhan">
                </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";
  export default {
    name: "InfoSurfaceWater",
    components:{
      provTreeList
    },
    props:["dcztStatus","dcztDisabled","currentAdCode"],
    data() {
      return {

        rootCode:'000000',
        rootType:'2',
        model_shuiwenzhan_name:'',
        recordTotal_dxs:'',
        tableData_shuiwenzhanList:[],
        recordTotal_shuiwenzhan:0,
        pageSize_shuiwenzhan: 10,
        pageIndex_shuiwenzhan: 1,
        loading: false,
        adCode:'',
        exportLoading:false,
      }
    },
    computed: {
      recPersId() {
        return localStorage.getItem("userid") ? localStorage.getItem("userid") : ''
      }
    },
    mounted(){
      let _this = this;
      _this.dczt = _this.dcztStatus;
      _this.loadTableQuShuiKou();
    },
    methods:{
      indexMethod_country(index) {
        return (index + 1) + this.pageSize_shuiwenzhan * (this.pageIndex_shuiwenzhan - 1)
      },
      provTreeSelectChangeHandler(params) {
        if(params.code == '000000000000'){
          this.adCode = '';
        }else{
          this.adCode = params.code;
        }
        this.$nextTick(()=>{
          this.pageSize_shuiwenzhan = 10;
          this.pageIndex_shuiwenzhan = 1;
          this.loadTableQuShuiKou();
        })


      },
      searchByName() {
        this.loadTableQuShuiKou();
      },
      async exPort(){
          let _self = this;
            this.exportLoading = true;
            let data = {};
            data.stnm = _self.model_shuiwenzhan_name;
            data.adCode = _self.adCode;
            data.isExport = '1';
            let datas = JSON.stringify(data);

            let url = `/pdcApi/st/stbprp/base/findPageList`;
            let downloadName =  "水文站.xls";
            let type = "post";
            let result = await exportModel(type,url,downloadName,datas);
            this.exportLoading = result;
        },
      loadTableQuShuiKou() {
        let _this = this;
        _this.loading = true;
        request.post(`/st/stbprp/base/findPageList`, {
            stnm: _this.model_shuiwenzhan_name,
            pageNum: _this.pageIndex_shuiwenzhan,
            pageSize: _this.pageSize_shuiwenzhan,
            adCode: _this.adCode,
            // count: false
        }).then((res) => {
          if (res.success) {
            _this.$nextTick(function () {
              _this.loading = false;
              var obj = res.data;
              _this.tableData_shuiwenzhanList = obj.list;
              _this.recordTotal_shuiwenzhan = obj.total;
            })

          }
        })
      },
      handleSizeChange_QuShuiKou (pageSize) {
        this.pageSize_shuiwenzhan = pageSize;
        this.loadTableQuShuiKou();

      },
      handleCurrentChange_QuShuiKou (pageNum) {
        this.pageIndex_shuiwenzhan = pageNum;
        this.loadTableQuShuiKou();

      },
      bShuikuStatistic(){

      },
      SwzInfo(row,info){
        this.$emit('SwzInfo',row,info);
      },
    },
    watch:{
      currentAdCode(n,o){
        if(n == '0000000000'){
          n = '';
        }
        this.adCode = n;
        this.loadTableQuShuiKou();
      }

    }
  }
</script>

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