fj-dc-ui/.svn/pristine/be/bec92e2e075a6543ea58aabae1e8d71ce9af23a3.svn-base

<template>
    <el-container style="height:520px;">
        <el-main style="border:1px solid #d5d5ff;margin-left:5px;padding:0px;">
            <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;margin-bottom:10px;">取水许可证</p>
            <ul>
                <li v-for="item in certificateList" :key="item.id" @click="showDetail(item)">
                    <span class="unit">{{item.wrpNm}}</span>
                    <span class="num">取水许可证编号：{{item.watLicCode}}</span>
                </li>
            </ul>
            <el-dialog
                width="50%"
                title="取水许可证详情"
                :visible.sync="innerVisible"
                append-to-body>
                <el-card class="box-card">
                    <p><span class="label">取水许可证代码：<span>{{detailContent.wintCode}}</span></span><span class="label">取水许可证编号：<span>{{detailContent.watLicCode}}</span></span></p>
                    <p><span class="label">取水权人名称：<span>{{detailContent.wrpNm}}</span></span><span class="label">取用水户代码：<span>{{detailContent.wiuCode}}</span></span></p>
                    <p><span class="label">法人代表：<span>{{detailContent.name}}</span></span></p>
                </el-card>
                <el-card class="box-card">
                    <p><span class="label">取水地点：<span>{{detailContent.wintPos}}</span></span><span class="label">取水方式：<span>{{detailContent.chkIntMet}}</span></span></p>
                    <p><span class="label">取水量：<span>{{detailContent.wiuWw}}</span></span><span class="label">取水用途：<span>{{detailContent.intUse}}</span></span></p>
                    <p><span class="label">水源类型：<span>{{detailContent.chkSourTp}}</span></span><span class="label">取水起始日期：<span>{{detailContent.intBd | formatDate}}</span></span></p>
                    <p><span class="label">取水终止日期：<span>{{detailContent.intDl | formatDate}}</span></span><span class="label">证件状态：<span>{{detailContent.certCond | certCond}}</span></span></p>
                </el-card>
                <el-card class="box-card">
                    <p><span class="label">退水地点：<span>{{detailContent.rwAddr}}</span></span><span class="label">退水方式：<span>{{detailContent.rwTp}}</span></span></p>
                    <p><span class="label">退水量：<span>{{detailContent.bkWw}}</span></span><span class="label">退水水质要求：<span>{{detailContent.rwWqReq}}</span></span></p>
                </el-card>
                <el-card class="box-card">
                    <p><span class="label">审批单位代码：<span>{{detailContent.apprOrgCd}}</span></span><span class="label">审批单位名称：<span>{{detailContent.apprOrgName}}</span></span></p>
                    <p><span class="label">审批日期：<span>{{detailContent.apprDt | formatDate}}</span></span></p>
                </el-card>
                <el-card class="box-card">
                    <p><span class="label">监督管理单位代码：<span>{{detailContent.manOrgCd}}</span></span><span class="label">监管单位名称：<span>{{detailContent.manOrgName}}</span></span></p>
                </el-card>
            </el-dialog>
        </el-main>
    </el-container>
</template>
<script>
import request from '@util/gw_ajax_request.js'
import {formatDateTime2} from '@util/gw_date.js'
export default {
    props: ['currentObjectCode'],
    data(){
        return{
            certificateList: [],
            innerVisible: false,
            detailContent: {}
        }
    },
    mounted(){
        this.getCertificateList()
    },
    methods:{
        getCertificateList(){
            let data = {
                wiuId: this.currentObjectCode
            }
            request.post('/att/wiu/wat/lic/list', data).then(res=>{
                if(res.success){
                    this.certificateList = res.data
                }else{
                    this.$message.error(res.message)
                }
            }).catch(err=>{
                this.$message.error(err)
            })
        },
        showDetail(item){
            this.detailContent = item
            this.innerVisible = true
        },

    },
    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 ''
            }
        },
        formatDate(val){
            return formatDateTime2(val)
        }
    }
}
</script>
<style lang="scss" scoped>
    ul{
        list-style: none;
        margin: 10px;
        li{
            padding: 3px 10px;
            height: 36px;
            line-height: 36px;
            font-size: 14px;
            color: #333;
            cursor: pointer;
            border-bottom: solid 1px #ddd;
            .unit{
                font-weight: bold;
                color: #000;
                display: inline-block;
                width: 300px;
            }
            &:hover{
                background-color: rgb(233, 244, 252);
            }
        }
    }
    .box-card{
        margin-bottom: 6px;
        p{
            line-height: 30px;
            color: #777;
        }
        .label{
            display: inline-block;
            width: 100%;
            span{
                color: #000;
            }
        }
    }
</style>