fj-dc-ui/.svn/pristine/22/227efe33c12eb66ec3cc4cd5c3c2f218c1e4181a.svn-base

<template>
    <div id="mainSz" v-loading='exportLoading'>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-light">
            <el-form
              :inline="true"
              size="mini"
              class="demo-form-inline"
              style="padding: 5px;"
            >
              <el-form-item label="水闸名称">
                <el-input v-model="nm" placeholder="水闸名称" clearable @keydown.enter.native="searchByName"></el-input>
              </el-form-item>
              <el-form-item label="工程规模">
                <el-select v-model="engScale" clearable placeholder="工程规模">
                  <el-option
                    v-for="item in engScales"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
          &nbsp;&nbsp;&nbsp;<el-form-item>
              <el-button @click="searchByName" size="mini" type="primary">查询</el-button>
              <el-button @click="exPort" size="mini" type="success">导出</el-button>
            </el-form-item>

              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </el-form>
            <div style="padding:0px;">
              <el-table :data="tableData_szList" height="530" border stripe style="width: 100%">
                <el-table-column type="index" width="50" label="序号" align="center"
                                 :index="indexMethod_sz">
                </el-table-column>
                <el-table-column prop="nm" label="水闸名称" min-width="150" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="engScal" label="工程规模" :formatter="formatEngScal" min-width="100"></el-table-column>
                <el-table-column prop="gateType" label="水闸类型" :formatter="formatGateType" min-width="100"></el-table-column>
                <el-table-column prop="location" show-overflow-tooltip min-width="200" label="水闸所在位置"></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="szInfo(scope.row,'location')">定位</el-button>
                    <el-button type="text" size="small" @click="szInfo(scope.row,'baseInfo')">基础信息</el-button>
                     <el-button type="text" size="small" @click="szInfo(scope.row,'dcInfo')">督查信息</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="block" style='text-align: center;'>
                <el-pagination background @size-change="handleSizeChange_sz"
                               @current-change="handleCurrentChange_sz" :page-sizes="[10,50, 100, 200]"
                               :page-size="15" layout="total,sizes, prev, pager, next"
                               :total="recordTotal_sz">
                </el-pagination>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
</template>

<script>
  import request from '../../../utils/gw_ajax_request'
  import {exportModel} from "@util/gw_exportModel";
  export default {
    name: "szInfo",
    props: ["currentAdCode"],
    data() {
      return {
        model_sz_name:'',
        tableData_szList:[],
        pageSize_sz: 10,
        pageIndex_sz: 1,
        recordTotal_sz: 0,
        engScales: [
          { id: "1", name: "大型" },
          { id: "2", name: "中型" },
          { id: "3", name: "小型" },
        ],
        engScale: "",
        adName:'',
        nm:'',
        dcType:'',
        exportLoading:false,
      }
    },
    mounted(){
      this.loadTableSz();
    },
    methods:{
      async exPort(){
          let _self = this;
            this.exportLoading = true;
            let data = {};
            data.rsName = _self.nm;
            data.presId = localStorage.getItem("userid"),
            data.engScal = _self.engScale;
            data.adCode = _self.currentAdCode;
            data.isExport = '1';
            let datas = JSON.stringify(data);

            let url = `/pdcApi/att/waga/rgstr/list/page`;
            let downloadName =  "督查水闸.xls";
            let type = "post";
            let result = await exportModel(type,url,downloadName,datas);
            this.exportLoading = result;
        },
      loadTableSz() {
        request.post(`/att/waga/rgstr/list/page`,
          {
            pageNum:  this.pageIndex_sz,
            pageSize: this.pageSize_sz,
            presId: localStorage.getItem("userid"),
            rsName: this.nm,
            engScal: this.engScale,
            adCode: this.currentAdCode
        })
          .then((res) => {
            if (res.success) {
              var obj = res.data;
              this.tableData_szList = obj.list;
              this.recordTotal_sz = obj.total;
            }
          })
      },
      indexMethod_sz(index) {
        return (index + 1) + this.pageSize_sz * (this.pageIndex_sz - 1)
      },
      // 查询
      searchByName(){
        this.loadTableSz();
      },
      handleSizeChange_sz: function (pageSize) {
        this.pageSize_sz = pageSize;
        this.loadTableSz();
      },
      handleCurrentChange_sz: function (pageNum) {
        this.pageIndex_sz = pageNum;
        this.loadTableSz();
      },
      szInfo(row,info){
        this.$emit('szInfo',row,info)
      },
      formatGateType:function(row, column){
        return row.gateType == "1" ? '分(泄)洪闸'
          : row.gateType == "2" ? '节制闸'
            : row.gateType == "3" ? '排(退)水闸'
              :row.gateType == "4" ? '引(进)水闸'
                :row.gateType == "5" ? '挡潮闸'
                  :row.gateType == "6" ? '船闸':'其他'
      },

      formatEngScal:function(row, column){
        return row.engScal == "1" ? '大型'
          : row.engScal == "2" ? '中型'
            : row.engScal == "3" ? '小型':'其他'
      },
    },
    watch: {
      currentAdCode(){
        this.loadTableSz();
      }
    }
  }
</script>

<style>
  #mainSz .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
    margin-bottom: 0;
  }
</style>