fj-dc-ui/.svn/pristine/ef/efda12d29cffb41bcfbecc6c411f74125d8b2a3f.svn-base

<template>
    <div id="skMain">
      <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_shuiku_name"
                        placeholder="请输入名称查询" @keydown.enter.native="searchByName" clearable>
              </el-input>
              <span style="font-size: 12px;margin-left: 10px;">单位：</span>
              <el-input style="width:150px;" class="kjr-input" size="mini" v-model="model_shuiku_dwName"
                        placeholder="请输入管理单位" @keydown.enter.native="searchByName" clearable>
              </el-input>
              <span style="font-size: 12px;margin-left: 10px;">规模：</span>
              <el-select v-model="guimo" placeholder="请选择"  clearable>
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>

              <span v-if="!dcztDisabled">
                <br />
                <br />
                <span style="font-size: 12px;margin-left: 10px;">督查状态：</span>
                <el-select v-model="dczt" placeholder="请选择" :disabled="dcztDisabled" clearable>
                  <el-option
                    v-for="item in dcOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </span>
              <span v-if="isDczt">
                <span v-if="dcztDisabled">
                  <br />
                  <br />
                </span>
                <el-radio v-model="dcztradio" label="0" style="margin-left: 10px;">未督查</el-radio>
                <el-radio v-model="dcztradio" label="1">督查中</el-radio>
                <el-radio v-model="dcztradio" label="2">已督查</el-radio>
              </span>

              &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_shuikuList" 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="rsName" label="水库名称" width="130" align="center" sortable></el-table-column>
                  <el-table-column prop="engScal" label="规模" width="110" align="center">
                    <template slot-scope="scope" v-if="scope.row.status">
                      <span v-if="scope.row.engScal == '4'" style="color: #4fdeb2;">小（1）</span>
                      <span v-if="scope.row.engScal == '5'" style="color: #d69b0d;">小（2）</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="status" label="小水库督查状态" min-width="150" align="center">
                    <template slot-scope="scope" v-if="scope.row.status">
                      <span v-if="scope.row.status.substr(0, 4) == '2019'" style="color: #ff4235;">{{scope.row.status}}</span>
                      <span v-if="scope.row.status.substr(0, 4) == '2018'" style="color: #e47792;">{{scope.row.status}}</span>
                      <span v-if="scope.row.status == '督查计划外'" style="color: #7a7a7a;">{{scope.row.status}}</span>
                      <span v-if="scope.row.status.substr(0, 2) == '复查'" style="color: #37e4d0;">{{scope.row.status}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="rsAdmName" label="水库位置" width="130" align="center" show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column prop="totCap" label="库容(万立方米)" width="110" align="center">
                  </el-table-column>
                  <!--<el-table-column prop="rsType" label="水库类型" width="110" align="center"-->
                  <!--:formatter="formatter_shuiku_type">-->
                  <!--</el-table-column>-->

                  <!--<el-table-column prop="damSizeHig" label="主坝尺寸坝高(m)" width="150" align="center">-->
                  <!--</el-table-column>-->
                  <el-table-column fixed="right" label="操作" min-width="200" align="center">
                    <template slot-scope="scope" v-if="scope.row.status">
                      <el-button type="text" size="small" @click="skInfo(scope.row,'loaction')">定位</el-button>
                      <el-button type="text" size="small" @click="skInfo(scope.row,'baseInfo')">基础信息</el-button>
                      <el-button type="text" size="small" v-if="scope.row.status.substr(0, 4) == '2019' || scope.row.status.substr(0, 2) == '复查'" @click="skInfo(scope.row,'dcInfo')">督查信息</el-button>
                      <el-button type="text" size="small" v-if="scope.row.status.substr(0, 4) == '2018' || scope.row.status == '督查计划外'" @click="skInfo(scope.row,'addDcInfo')">加入督查计划</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="block">
                  <el-pagination background @size-change="handleSizeChange_shuiku"
                                 @current-change="handleCurrentChange_shuiku" :page-sizes="[10,50, 100, 200]"
                                 :page-size="15" layout="total,sizes, prev, pager, next" :pager-count="5"
                                 :total="recordTotal_shuiku">
                  </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';
  export default {
    name: "resevoirList",
    components:{
      provTreeList
    },
    props:["dcztStatus","dcztDisabled","currentAdCode"],
      data() {
          return {

            rootCode:'350000',
            rootType:'2',
            model_shuiku_name:'',
            model_shuiku_dwName:'',
            recordTotal_dxs:'',
            options: [
              {
              value: '4',
              label: '小（1）'
            }, {
              value: '5',
              label: '小（2）'
            }
            ],
            guimo:'',
            dczt:'',
            dcOptions: [
              {
              value: '1',
              label: '2018年督查'
            }, {
              value: '2',
              label: '2019年督查'
            }, {
              value: '3',
              label: '复查'
            }, {
                value: '4',
                label: '督查计划外'
              }],
            tableData_shuikuList:[],
            recordTotal_shuiku:0,
            pageSize_shuiku: 10,
            pageIndex_shuiku: 1,
            loading: false,
            dcztradio:'',
            isDczt:false,
            adCode:'',
            model_shuiku_statistic:false,
            paginationBoxReflow:true,
            // isFc: true,

          }
      },
      computed: {
        recPersId() {
          return localStorage.getItem("userid") ? localStorage.getItem("userid") : ''
        }
      },
      mounted(){
        this.adCode = this.currentAdCode;
        this.root = this.currentAdCode;
        let _this = this;
        _this.dczt = _this.dcztStatus;
        _this.loadTableShuiku();
      },
      methods:{
        indexMethod_country(index) {
          return (index + 1) + this.pageSize_shuiku * (this.pageIndex_shuiku - 1)
        },
        provTreeSelectChangeHandler(params) {
          this.adCode = params.code;
          this.$nextTick(()=>{
            this.pageSize_shuiku = 10;
            this.pageIndex_shuiku = 1;
            this.loadTableShuiku();
          })


        },
        searchByName() {
          this.loadTableShuiku();
        },
        loadTableShuiku() {
          let _this = this;
          _this.loading = true;
          request.post(`/dc/general/info/getRsSupData`, {
              objType: 1,
              pageNum: _this.pageIndex_shuiku,
              pageSize: _this.pageSize_shuiku,
              rsName: _this.model_shuiku_name,
              adCode: _this.adCode,
              engScal: _this.guimo,
              status: _this.dczt,
              rsvrState: _this.dcztradio,
              persGuid: _this.recPersId,
          })
            .then((res) => {
              if (res.success) {
                _this.$nextTick()
                _this.loading = false;
                var obj = res.data;
                _this.tableData_shuikuList = obj.list;
                _this.recordTotal_shuiku = obj.total;
              }
            })
        },
        handleSizeChange_shuiku (pageSize) {
            this.pageSize_shuiku = pageSize;
            this.loadTableShuiku();

        },
        handleCurrentChange_shuiku (pageNum) {
            this.pageIndex_shuiku = pageNum;
            this.loadTableShuiku();

        },
        bShuikuStatistic(){

        },
        skInfo(row,info){
          this.$emit('skInfo',row,info);
        },
      },
      watch:{
        dczt(n,o){
          if(n == '2' || n == '3'){
            this.isDczt = true;
          }else {
            this.isDczt = false;
            this.dcztradio = '';
          }

        },
        model_shuiku_statistic(n,o){
          if(n){
            this.dczt = '3';
            this.loadTableShuiku();
          }else {
            this.dczt = '';
            this.loadTableShuiku();
          }
        },
        dcztStatus(n,o){
          this.dczt = n;
          this.loadTableShuiku();
        },
        currentAdCode(n,o){
          this.adCode = n;
          this.loadTableShuiku();
        }

      }
    }
</script>

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