fj-dc-ui/.svn/pristine/fd/fd20cb67436497f1ea9da3d12e523cabae0c3110.svn-base

<template>
    <div id="skMain" 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_szy_jsgl_name"
                            placeholder="请输入名称查询" @keydown.enter.native="searchByName" clearable>
                </el-input>
                <span>
                   <span style="font-size: 12px;margin-left: 10px;">督查状态：</span>
                   <el-select v-model="dcztSelect" clearable>
                      <el-option label="未督查" value="0"></el-option>
                      <el-option label="督查中" value="1"></el-option>
                      <el-option label="已督查" value="2"></el-option>
                    </el-select>
                </span>

                &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_szy_jsglList" 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="nm" label="名称" min-width="130" align="center" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="code" label="编码" min-width="100" align="center" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="state" label="督查状态" min-width="120" align="center" sortable>
                        <template slot-scope="scope">
                        <span style="color: #ff4235;">{{scope.row.state=='0'?'未督查':
                                                            scope.row.state=='1'?'督查中':
                                                            scope.row.state=='2'?'已督查':'未督查'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="location" label="全名" min-width="150" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <!-- <el-table-column prop="groupName" label="所在分组" min-width="120" 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="szy_jsglInfo(scope.row,'location')">定位</el-button>
                        <el-button type="text" size="small" @click="szy_jsglInfo(scope.row,'baseInfo')">基础信息</el-button>
                        <el-button type="text" size="small" @click="szy_jsglInfo(scope.row,'dcInfo')">督查信息</el-button>
                        </template>
                    </el-table-column>
                    </el-table>
                    <div class="block">
                    <el-pagination background @size-change="handleSizeChange_szy_jsgl"
                                    @current-change="handleCurrentChange_szy_jsgl" :page-sizes="[10,50, 100, 200]"
                                    :page-size="15" layout="total,sizes, prev, pager, next" :pager-count="5"
                                    :total="recordTotal_szy_jsgl">
                    </el-pagination>
                    </div>
                </el-col>
                </div>

            </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import provTreeList from '../../../../widgets/provTreeListAndChina'
import request from '@util/gw_ajax_request.js';
import {exportModel} from "@util/gw_exportModel";
export default {
    name: "resevoirList",
    components:{
        provTreeList
    },
    props:["dcztStatus","dcztDisabled","currentAdCode"],
    data() {
        return {

            rootCode:'000000',
            rootType:'2',
            model_szy_jsgl_name:'',
            model_shuiku_dwName:'',
            dczt:'',
            tableData_szy_jsglList:[],
            recordTotal_szy_jsgl:0,
            pageSize_szy_jsgl: 10,
            pageIndex_szy_jsgl: 1,
            loading: false,
            dcztSelect:'',
            isDczt:false,
            adCode:'',
            model_shuiku_statistic:false,
            // isFc: true,
            exportLoading:false,
        }
    },
    computed: {
        recPersId() {
            return localStorage.getItem("userid") ? localStorage.getItem("userid") : ''
        }
    },
    mounted(){
        let _this = this;
        _this.dczt = _this.dcztStatus;
        _this.loadTableszy_jsgl();
    },
    methods:{
        indexMethod_country(index) {
          return (index + 1) + this.pageSize_szy_jsgl * (this.pageIndex_szy_jsgl - 1)
        },
        provTreeSelectChangeHandler(params) {
            this.adCode = params.code;
            if(this.adCode == "000000000000"){
                this.adCode = '';
            }
            this.$nextTick(()=>{
                this.pageSize_szy_jsgl = 10;
                this.pageIndex_szy_jsgl = 1;
                this.loadTableszy_jsgl();
            })


        },
        searchByName() {
            this.loadTableszy_jsgl();
        },
        async exPort(){
          let _self = this;

            this.exportLoading = true;
            let url = `/pdcApi/dc/insp/obj/getObjByPersId?persGuid=${localStorage.getItem("userid")}&objType=31&adCode=${this.adCode}&rsName=${this.model_szy_jsgl_name}&state=${this.dcztSelect}&isExport=1`;
            let downloadName =  "水资源节水管理.xls";
            let type = "get";
            let result = await exportModel(type,url,downloadName);
            this.exportLoading = result;
        },
        loadTableszy_jsgl() {
            let _this = this;
            _this.loading = true;
            request.get(`/dc/insp/obj/getPageByPersId`, {
                params: {
                    persGuid: localStorage.getItem("userid"),
                    objType: 31,
                    pageNum: _this.pageIndex_szy_jsgl,
                    pageSize: _this.pageSize_szy_jsgl,
                    rsName: _this.model_szy_jsgl_name,
                    adCode: _this.adCode,
                    state: _this.dcztSelect
                }
            }).then((res) => {
                console.log(res)
                if (res.success) {
                    var obj = res.data;
                    _this.tableData_szy_jsglList = obj.list;
                    _this.recordTotal_szy_jsgl = obj.total;
                    _this.loading = false;
                }
            })
            
        },
        handleSizeChange_szy_jsgl (pageSize) {
            this.pageSize_szy_jsgl = pageSize;
            this.loadTableszy_jsgl();

        },
        handleCurrentChange_szy_jsgl (pageNum) {
            this.pageIndex_szy_jsgl = pageNum;
            this.loadTableszy_jsgl();

        },
        bShuikuStatistic(){

        },
        szy_jsglInfo(row,info){
            this.$emit('szyJsglInfo',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.loadTableszy_jsgl();
                }else {
                    this.dczt = '';
                    this.loadTableszy_jsgl();
                }
            },
            dcztStatus(n,o){
                this.dczt = n;
                this.loadTableszy_jsgl();
            },
            currentAdCode(n,o){
                this.adCode = n;
                this.loadTableszy_jsgl();
            }
        }
    }
</script>
<style>
    #skMain .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
        background-color: #558ed0;
    }
</style>