fj-dc-ui/.svn/pristine/3e/3e536cda80acef2df7811a27f14f2dba50e8813a.svn-base

<template>

    <el-row>

        <el-col :span="3">
            <div>
                <provTreeList :rootCode="rootCode" :rootType="rootType" @provTreeSelectChange="provTreeSelectChangeHandler"
                              :style="{'max-height':dxdcAsideHeight+'px'}"
                >
                </provTreeList>
            </div>
        </el-col>

        <el-col :span="21">
            <el-card class="ducha_form" :body-style="{ 'padding': '20px 5px' }" :style="formStyle">
                <el-form :inline="true" :model="formInline" class="sh-form-inline">
                    <el-form-item label="地下水监测站名称">
                        <el-input v-model="formInline.stnm" :placeholder="autoInput" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="地下水监测站类型">
                        <el-select v-model="formInline.sttp" :placeholder="autoSort" clearable >
                            <el-option v-for="item in options"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="行政区划">
                        <el-input v-model="formInline.adcd" :placeholder="autoInput" clearable ></el-input>
                    </el-form-item> -->

                    <el-form-item style="margin: 0">
                        <el-button type="primary" @click="onSearch" icon="el-icon-search">查询</el-button>
                    </el-form-item>
                    <el-form-item style="margin: 0 5px">
                        <el-button type="info" plain @click="empty" icon="el-icon-refresh">重置</el-button>
                    </el-form-item>
                    <el-form-item style="margin: 0">
                        <el-button type="success" @click="exportExcel" icon="el-icon-sort-up">导出Excel</el-button>
                    </el-form-item>
                    <!-- <el-form-item style="margin: 0 5px" v-if="ownPriv('manage')">
                        <el-button type="info" plain @click="batchImport" icon="el-icon-menu">导入</el-button>
                    </el-form-item> -->
                    <!-- 地下水监测站基础信息批量导入弹窗 -->
                    <di-xia-shui-cha-xun-pl v-if="showDiXiaShuiChaXunPl" @closePlDialog="closePlDialog"
                        :stnmStr="formInline.stnm"
                        :sttpStr="formInline.sttp"
                        :pageStr="page.pageNum"
                        :adcd="formInline.adcd"
                    >
                    </di-xia-shui-cha-xun-pl>
                </el-form>
            </el-card>
            <el-card class="ducha_table"  :body-style="{ 'padding': '0 5px' }">
                <el-main style="margin: 0 -5px;padding: 0">
                    <el-table :data="tableList" style="width: 100%"
                              ref="singleTable"
                              v-loading="tableLoading"
                              border
                              :height="dxdcMainHeight+'px'"
                              :render-header="renderHeader"
                    >
                        <el-table-column type="index" min-width="80" :index="getIndex" label="序号" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="stcd" label="监测站编码" min-width="100" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="stnm" label="监测站名称" min-width="100" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="adcd" label="行政区划代码" min-width="100" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="adnm" label="行政区划名称" min-width="130" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="sttp" label="监测站类型" min-min-width="130" :formatter="formatSttp" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="stlc" label="监测站位置" min-min-width="130"  show-overflow-tooltip></el-table-column>
                        <el-table-column prop="rvnm" label="监测站所属流域" min-min-width="130"  show-overflow-tooltip></el-table-column>
                        <el-table-column prop="mnun" label="管理单位" min-min-width="130"  show-overflow-tooltip></el-table-column>
                        <el-table-column prop="esstym" label="设站日期" min-min-width="130"  show-overflow-tooltip></el-table-column>
                    
                    </el-table>
                </el-main>
                <el-footer class="el-footer-style">
                    <el-pagination
                            style="text-align:center;"
                            small
                            background
                            :current-page.sync="page.pageNum"
                            :page-size="page.pageSize"
                            :page-sizes="[10, 20, 30, 40, 50, 100]"
                            layout="sizes, total, prev, pager, next,jumper"
                            :total="showResultCount"
                            @current-change="pageIndexChange"
                            @size-change="handleSizeChange"
                    ></el-pagination>
                </el-footer>
            </el-card>

        </el-col>

    </el-row>

</template>

<style>

    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    .ducha_form .el-input {
        width: 200px !important;
    }
    
    .el-footer-style {
        text-align: center;
        width:100%;
    }

</style>

<script>
    // 监测站类别国家级:NATIONAL  省级自动:PROVAUTO 省级人工:PROVHAND 省级监测站(未知手动自动):PROV
    const options = [{
        value: 'NATIONAL',
        label: '国家级'
    }, {
        value: 'PROVAUTO',
        label: '省级自动'
    },{
        value: 'PROVHAND',
        label: '省级人工'
    },{
        value: 'PROV',
        label: '省级监测站(未知手动自动)'
    }];

    import provTreeList from '../../../widgets/provTreeList';
    import request from '../../../utils/gw_ajax_request.js';
    import diXiaShuiChaXunPl from './diXiaShuiChaXun_piliang';
    import { exportModel } from "@util/gw_exportModel";

    export default {
        name: "diXiaShuiChaXun",
        components:{
            provTreeList: provTreeList,
            diXiaShuiChaXunPl: diXiaShuiChaXunPl
        },
        data() {
            return {
                tableLoading:true,
                tableList: [],
                page:{
                    pageNum: 1,
                    pageSize: 20,
                },
                showResultCount: 0,
                options: options,
                autoSort: '请选择',
                autoInput: '请输入',
                formInline: {
                    stnm: '',
                    sttp: '',
                    adcd: '',
                },
                rootCode:'000000',
                rootType:'2',
                formStyle: {
                    width: '100%',
                    height: '70px',

                },
                dxdcMainHeight: window.innerHeight - 197,
                dxdcAsideHeight: window.innerHeight - 90,
                showDiXiaShuiChaXunPl: false,
            }
        },
        mounted() {
            this.getDataList()
        },
        activated(){
            this.getDataList()
        },
        methods: {
            empty(){
              this.formInline = {};
            },
            formatSttp(row,column){
                let sttp = row.sttp;
                let _sttp = '';
                switch (sttp) {
                    case 'NATIONAL' : _sttp = '国家级';break;
                    case 'PROVAUTO' : _sttp = '省级自动';break;
                    case 'PROVHAND' : _sttp = '省级人工';break;
                    case 'PROV' : _sttp = '省级监测站(未知手动自动)';break;
                }
                return _sttp;
            },
            provTreeSelectChangeHandler: function(params) {
                this.formInline.adcd = params.likeCode;
                this.getDataList();
            },
            getIndex(index){
                return (index + this.page.pageSize * (this.page.pageNum - 1)) + 1
            },
            onSearch(){
                this.getDataList();
            },
            pageIndexChange(val){
                this.page.pageNum = val;
                this.getDataList();
            },
            handleSizeChange(val){
              this.page.pageSize = val;
              this.getDataList();
            },
            renderHeader(){

            },
            getDataList(){
                let params = {
                    'pageSize': this.page.pageSize,
                    'pageNum': this.page.pageNum,
                    'stnm': this.formInline.stnm,
                    'sttp': this.formInline.sttp,
                    'adcd': this.formInline.adcd,
                };
                request.post('/dc/insp/attGrwBase/pageInfo',params).then((res)=>{
                    let data = res.data
                    this.tableList = data.list
                    this.showResultCount = data.total
                    this.tableLoading = false
                })
            },
            batchImport(){
                this.showDiXiaShuiChaXunPl = true
            },
            closePlDialog(){
                this.showDiXiaShuiChaXunPl = false
            },
            getStrParams(obj) {
                let str = '?';
                for(let key of Object.keys(obj)) {
                    str += `${key}=${obj[key]}&`;
                }
                str = str.slice(0, str.length - 1);
                return str;
            },
            // 导出Excel
            async exportExcel(){
                this.tableLoading = true;
                let type = "get";
                let url = `/pdcApi/dc/export/attGrwBase${this.getStrParams(Object.assign(this.formInline, this.page))}`;
                let downloadName =  "Excel.xls";
                await exportModel(type,url,downloadName).catch((err) => {
                    this.$message.error("导出失败");
                    this.tableLoading = false;
                })
                this.$message.success("导出成功");
                this.tableLoading = false;
            },
        },
        computed: {

        },
        watch: {

        },
    }
</script>