fj-dc-ui/.svn/pristine/cb/cb58eb306196123648abdb94b84f76f8db74e109.svn-base

<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="20">
        <el-input clearable size="mini" placeholder="湖泊名称" v-model="searchText"></el-input>
      </el-col>
      <el-col :span="4">
        <el-button size="mini" type="primary" @click="searchRiverList" icon="el-icon-search" circle></el-button>
      </el-col>
    </el-row>
    <el-main
      style="border-radius: 6px;background-color: #fff; border: 1px solid #ebeef5;padding: 0px;"
    >
      <el-table
        v-loading="tableLoading"
        :data="riverDataForTable"
        stripe
        :row-class-name="tableRowClassName"
        :highlight-current-row="true"
        row-key="getNumber"
        @row-click="riverRowCilck"
        style="width: 100%"
      >
        <el-table-column align="center" show-overflow-tooltip fixed prop="lkName" label="湖泊名称"></el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <el-pagination
        small
        :pager-count="4"
        :current-page.sync="pageNum"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="showResultCount"
        @current-change="pageIndexChange"
      ></el-pagination>
    </el-footer>
  </div>
</template>

<script>
import { getLakeList } from "../api/riverCross.js";
export default {
  components: {},
  data() {
    return {
      radio: "2",
      objCode: "",
      objCodeRoot: "",
      searchText: "",
      tableLoading: true,
      riverDataForTable: [],
      pageNum: 1,
      pageSize: 13,
      showResultCount: 0
      // adId:'350000000000',
    };
  },
  mounted: function() {
    let storageAdId = localStorage.getItem("areacode");
    if (storageAdId) {
      this.adId = storageAdId;
    } else {
      this.adId = "350000000000";
    }
    this.$emit("rvvChange", { objType: this.radio, objCode: this.objCode });
    this.getLakeDataForTableOfadId();
  },
  methods: {
    tableRowClassName(row) {
      if (row.lkName === 1 && this.isActive) {
        return "first-row";
      } else {
        return "";
      }
    },
    searchRiverList: function() {
      this.getLakeDataForTableOfadId(); //获取河流信息
    },
    pageIndexChange: function() {
      this.getLakeDataForTableOfadId(this.pageNum);
    },

    getLakeDataForTableOfadId: function() {
      var _self = this;
      _self.tableLoading = true;
      try {
        getLakeList(
          _self.riverLevel,
          _self.searchText,
          _self.pageNum,
          _self.pageSize,
          _self.adId
        ).then(
          response => {
            var data = response.data.list;
            _self.riverDataForTable = data;
            if (_self.riverDataForTable.length != 0) {
              _self.objCodeRoot = data[0].id;
              _self.$emit("rvvChange", {
                objType: _self.radio,
                objCode: _self.objCodeRoot
              });
            } else {
              _self.objCodeRoot = "";
              _self.$emit("rvvChange", {
                objType: _self.radio,
                objCode: _self.objCodeRoot
              });
            }
            _self.showResultCount = response.data.total;
            _self.tableLoading = false;
          },
          response => {
            _self.riverDataForTable = [];
          }
        );
      } catch (e) {
        alert("暂无河流数据");
      }
    },
    riverRowCilck: function(row, event, column) {
      console.log(row, event, column);
      this.src = row.img;
      this.isActive = false;
      this.objCode = row.id;
      this.$emit("rvvChange", { objType: this.radio, objCode: this.objCode });
    }
  }
};
</script>

<style>
.current-row > td {
  background: #409eff !important;
  color: #fff;
}
</style>