fj-dc-ui/.svn/pristine/18/18394aa6823aae8a4f563d5caeaaecccd22b98c2.svn-base

<template>
    <el-row>
        <el-col :span="3">
            <div>
                <provTreeList :rootCode="curAdcode_short" :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.wrpNm" :placeholder="autoInput" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="取水许可证号">
                        <el-input v-model="formInline.watLicCode" :placeholder="autoInput" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="证件状态">
                        <el-select v-model="formInline.certCond" :placeholder="autoSort" clearable>
                            <el-option v-for="item in certCondOptions"
                                :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.chkSourTp" :placeholder="autoInput" clearable style="width: 100px"></el-input>
                    </el-form-item>
                    <el-form-item label="取水用途">
                        <el-input v-model="formInline.intUse" :placeholder="autoInput" clearable style="width: 100px"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="水源类型">
                        <el-select v-model="formInline.chkSourTp" :placeholder="autoSort" clearable >
                            <el-option v-for="item in chkSourTpOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="取水用途">
                        <el-select v-model="formInline.intUse" :placeholder="autoSort" clearable >
                            <el-option v-for="item in intUseOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item> -->
                    <el-form-item style="margin: 0">
                        <el-button type="primary" @click="onSearch">查询</el-button>
                    </el-form-item>
                    <el-form-item style="margin: 0 5px">
                        <el-button type="info" plain @click="empty">重置</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>
            </el-card>
            <el-card class="ducha_table"  :body-style="{ 'padding': '0 5px' }">
                <el-main style="margin: 0 -5px;padding: 0">
                    <el-table :data="certificateList" style="width: 100%" :row-class-name="tableRowClassName"
                        ref="singleTable"
                        v-loading="tableLoading"
                        border
                        :height="dxdcMainHeight+'px'"
                        :render-header="renderHeader">
                        <el-table-column type="index" width="70" :index="getIndex" label="序号" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="wintCode" label="取水许可证代码" min-width="130" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="watLicCode" label="取水许可证编号" min-width="130" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="wrpNm" label="取水权人名称" min-width="150" :formatter="formatRsType" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="wiuCode" label="取用水户代码" min-width="120" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="name" label="法人代表" min-width="80" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="wintPos" label="取水地点" min-width="130" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="chkIntMet" label="取水方式" min-width="130" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="wiuWw" label="取水量" min-width="130" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="intUse" label="取水用途" min-width="130" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="chkSourTp" label="水源类型" min-width="130" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="intBd" label="取水起始日期" min-width="130" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <span>{{formatDate(scope.row.intBd)}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="intDl" label="取水终止日期" min-width="130" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <span>{{formatDate(scope.row.intDl)}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="certCond" label="证件状态" min-width="130" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <span>{{scope.row.certCond | certCond}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="rwAddr" label="退水地点" min-width="130" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="rwTp" label="退水方式" min-width="130" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="bkWw" label="退水量" min-width="130" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="rwWqReq" label="退水水质要求" min-width="130" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="apprOrgCd" label="审批单位代码" min-width="130" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="apprOrgName" label="审批单位名称" min-width="130" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="apprDt" label="审批日期" min-width="130" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <span>{{formatDate(scope.row.apprDt)}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="manOrgCd" label="监督管理单位代码" min-width="150" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="manOrgName" label="监管单位名称" 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>
<script>
    import request from '@util/gw_ajax_request.js';
    import {formatDateTime2} from '@util/gw_date.js'
    import provTreeList from '@widget/provTreeList';
    import { exportModel } from "@util/gw_exportModel";
    import {curAdcode_short,curAdcode_long} from '@util/global_variable.js'

    export default {
        name: "shuiKuChaXun",
        components:{
            provTreeList
        },
        data() {
            return {
                tableLoading:true,
                certificateList: [],
                page:{
                    pageNum: 1,
                    pageSize: 20,
                },
                showResultCount: 0,
                autoSort: '请选择',
                autoInput: '请输入',
                formInline: {
                    wrpNm: '',
                    watLicCode: '',
                    certCond: '',
                    chkSourTp: '',
                    intUse: '',
                    addvcd: ''
                },
                formStyle: {
                    width: '100%',
                    height: '70px',
                },
                certCondOptions: [
                    {label: '新发',value: '1'},
                    {label: '变更',value: '2'},
                    {label: '注销',value: '3'},
                    {label: '吊销',value: '4'},
                    {label: '延续',value: '5'},
                    {label: '失败备案',value: '6'}
                ],
                chkSourTpOptions: [
                    {label: '江河',value: '1'},
                    {label: '湖泊',value: '2'},
                    {label: '水库',value: '3'},
                    {label: '其它',value: '9'}
                ],
                intUseOptions: [
                    {label: '城市生活',value: '1'},
                    {label: '农村生活',value: '2'},
                    {label: '工业',value: '3'},
                    {label: '农业',value: '4'},
                    {label: '水力发电',value: '5'},
                    {label: '其它',value: '9'}

                ],
                rootType:'2',
                dxdcMainHeight: window.innerHeight - 197,
                dxdcAsideHeight: window.innerHeight - 90
            }
        },
        computed:{
            curAdcode_short(){
                return curAdcode_short
            },
            curAdcode_long(){
                return curAdcode_long
            }
        },
        mounted() {
            this.getShuiKuList()
        },
        activated(){
            this.getShuiKuList()
        },
        methods: {
            empty(){
                this.formInline = {};
            },
            getIndex(index){
                return (index + this.page.pageSize * (this.page.pageNum - 1)) + 1
            },
            onSearch(){
                this.getShuiKuList();
            },
            pageIndexChange(val){
                this.page.pageNum = val;
                this.getShuiKuList();
            },
            handleSizeChange(val){
                this.page.pageSize = val;
                this.getShuiKuList();
            },
            provTreeSelectChangeHandler: function(params) {
                this.formInline.addvcd = params.likeCode;
                this.getShuiKuList();
            },
            tableRowClassName({row, rowIndex}) {
                // if (rowIndex === 1) {
                //     return 'warning-row';
                // } else if (rowIndex === 3) {
                //     return 'success-row';
                // }
                return '';
            },
            getShuiKuList(){
                Object.assign(this.formInline,this.page)
                request.post('/att/wiu/wat/lic/page', this.formInline).then(res=>{
                    if(res.success){
                        this.certificateList = res.data.list
                        this.showResultCount = res.data.total
                        this.tableLoading = false
                    }else{
                        this.$message.error(res.message)
                    }
                }).catch(err=>{
                    this.$message.error(err)
                })
            },
            formatDate(date){
                return formatDateTime2(date)
            },
            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/attWiuWatLic${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;
            }
        },
        filters:{
            certCond(val){
                if(val == '1'){
                    return '新发'
                }else if(val == '2'){
                    return '变更'
                }else if(val == '3'){
                    return '注销'
                }else if(val == '4'){
                    return '吊销'
                }else if(val == '5'){
                    return '延续'
                }else if(val == '6'){
                    return '失败备案'
                }else{
                    return ''
                }
            },
        }
    }
</script>

<style>
    .el-table {
    }
    .el-table .warning-row {
        background: oldlace;
    }
    .el-table .success-row {
        background: #f0f9eb;
    }
    .ducha_form .el-input {
        width: 120px !important;
    }
    .el-footer-style {
        text-align: center;
        width:100%;
    }
</style>