fj-dc-ui/.svn/pristine/f4/f4bd8f36f815d3b7f9e4435815667995fb480984.svn-base

<template>
    <div :style="{'height':this.tableHeight+'px'}">
        <el-container>
            <el-main style="border:1px solid #d5d5ff;margin-left:5px;padding:0px;overflow-x: hidden;">
                <el-table :data="villageList" :height="tableHeight1" style="width: 100%">
                    <el-table-column align="center" show-overflow-tooltip prop="waterSourceNm" label="水源地名称" min-width="160"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="villageNm" label="所在地（*县*乡镇*村）" min-width="110">
                        <template slot-scope="scope">
                            <span>{{formatRadio(scope.row.isNdAdmin)}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="cwsCode" label="供水工程名称" min-width="80">
                        <template slot-scope="scope">
                            <span>{{formatRadio(scope.row.isAdmin)}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="planInsAmount" label="设计取水规模（m³/d）" min-width="110"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="sourceType" label="水源类型" min-width="90">
                        <template slot-scope="scope">
                            <span>{{scope.row.sourceType | sourceType}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="waterQuality" label="水源水质评价" min-width="110">
                        <template slot-scope="scope">
                            <span>{{scope.row.waterQuality | waterQuality}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="isProtectArea" label="是否划定水源保护区或保护范围" min-width="140">
                        <template slot-scope="scope">
                            <span>{{scope.row.isProtectArea | isOrNot}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="operFee" label="是否有水源保护标志" min-width="110">
                        <template slot-scope="scope">
                            <span>{{scope.row.isProtectMark | isOrNot}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="isPollSource" label="周边是否有污染源" min-width="140">
                        <template slot-scope="scope">
                            <span>{{scope.row.isPollSource | isOrNot}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="isSpare" label="是否有应急备用水源" min-width="90">
                        <template slot-scope="scope">
                            <span>{{scope.row.isSpare | isOrNot}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="pollNote" label="备注" min-width="100"></el-table-column>
                </el-table>
            </el-main>
        </el-container>
        <!-- 分页 -->
        <div style="text-align: center;">
            <el-pagination
                class="paginationCenter"
                background
                @size-change="handleSizeChange"
                @current-change="search"
                :current-page.sync="pageIndex"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import provTreeList from "../../../../../widgets/villageList_nongyin.vue";
import inputWith from "../../../../../widgets/inuptWith.vue"
import request from "../../../../../utils/gw_ajax_request.js"
import {formatDateTimeD} from "../../../../../utils/gw_date.js"
export default {
    components: {
        provTreeList: provTreeList,
        inputWith: inputWith
    },
    props: ['ryObjId'],
    data() {
        return {
            tableHeight: window.innerHeight * 0.5,
            tableHeight1: window.innerHeight * 0.5 -2,
            addObj: {
                adnm: '',
                adCode: '',
                isNdAdmin: '',
                recPersId: '',
                isAdmin: '',
                adminNm: '',
                adminAge: '',
                adminPro: '',
                salary: '',
                operFee: '',
                otherFeeOrg: '',
                feeCommons: '',
                visitDate: '',
                recPers2: ''
            },
            searchObj: {
                pageNum: 1,
                pageSize: 20
            },
            adminType: [
                {
                    label: '专职',
                    value: 'A'
                },{
                    label: '兼职',
                    value: 'B'
                }
            ],
            feeFrom: [
                {
                    label: '政府',
                    value: 'A',
                },{
                    label: '村委会',
                    value: 'B',
                },{
                    label: '村民自筹',
                    value: 'C',
                },
            ],
            pageIndex: 1,
            pageSize: 20,
            total: 1,
            villageList: [],
            dialogFormVisible: false,
            formLabelWidth: '170px',
            curOperate: '',
            isExits: false,
            loading: true
        }
    },
    computed:{
      recPersId(){
        return localStorage.getItem("userid")? localStorage.getItem("userid"): '1098101939614724096'
      }
    },
    watch: {
        ryObjId(newVal,oldVal){
            if(newVal){
                this.getVillageList()
            }
        }
    },
    mounted() {
        this.getVillageList()
    },
    methods: {
        //工程列表
        getVillageList(){
            this.searchObj.pageSize = this.pageSize;
            this.searchObj.pageNum = this.pageIndex;
            this.searchObj.ryObjId = this.ryObjId
            let paramsObj = this.searchObj
            request.post('/dc/insp/proSourceProtect/queryListByPage',paramsObj).then((res)=>{
                if(res.success){
                    this.villageList = res.data.list
                    this.total = res.data.total
                    // this.loading = false
                }
            })
        },
        search(val){
            this.pageIndex = val
            this.getVillageList()
        },
        handleSizeChange(val){
            console.log(val);
            this.pageSize = val;
            this.getVillageList()
        },
        formatRadio(val){
            if(val == '1'){
                return '是'
            }else{
                return '否'
            }
        }
    },
    filters:{
        sourceType(value){
            switch (value) {
                case 'A': value = 'A-地表水';break;
                case 'B': value = 'B-地下水';break;
                case 'C': value = 'C-混合';break;
            }
            return value;
        },
        waterQuality(value){
            switch (value) {
                case 'A': value = 'A-Ⅰ至Ⅲ类';break;
                case 'B': value = 'B-Ⅳ类及以下';break;
            }
            return value;
        },
        isOrNot(value) {
            return value == '1' ? '是' : '否';
        },
    }
  }

</script>

<style>

</style>