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

<template>

    <el-row>
        <el-col :span="24">
            <el-card :body-style="{ 'padding': '0 5px' }">
                <el-main style="margin: 0 -5px;padding: 0">
                    <el-table :data="tableList" style="width: 100%;"
                              ref="singleTable"
                              border
                              :height="dxdcMainHeight+'px'"
                              :render-header="renderHeader"
                              tooltip-effect="dark"
                    >


                        <el-table-column prop="villageNm"
                                         label="调查地点（*县*乡镇*村）"
                                         min-width="170"
                                         show-overflow-tooltip
                                         align="center"
                        >
                        </el-table-column>
                        <el-table-column prop="userNm" label="户主姓名" min-width="100" show-overflow-tooltip
                                         align="center"></el-table-column>
                        <el-table-column prop="telphone" label="电话" min-width="100" show-overflow-tooltip
                                         align="center"></el-table-column>
                        <el-table-column prop="cwsCode" label="对应工程名称" min-width="110" show-overflow-tooltip
                                         align="center"></el-table-column>
                        <!--水质-->
                        <el-table-column label="水质" min-width="80" show-overflow-tooltip align="center">
                            <el-table-column prop="isQualityGood" label="水质是否良好" min-width="100" show-overflow-tooltip
                                             align="center"
                            >
                                <template slot-scope="scope">
                                    <span>{{formatBoo(scope.row.isQualityGood)}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="isQualityProblem" label="是否存在问题" min-width="140"
                                             show-overflow-tooltip
                                             align="center"
                            >
                                <template slot-scope="scope">
                                    <span>{{formatBoo(scope.row.isQualityProblem)}}</span>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <!--水量-->
                        <el-table-column  label="水量" min-width="100" show-overflow-tooltip align="center">
                            <el-table-column prop="isSplyHome" label="是否供水入户" min-width="100" show-overflow-tooltip
                                             align="center"
                            >
                                <template slot-scope="scope">
                                    <span>{{formatBoo(scope.row.isSplyHome)}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="is24hSupply" label="是否24小时供水" min-width="130" show-overflow-tooltip
                                             align="center"
                            >
                                <template slot-scope="scope">
                                    <span>{{formatBoo(scope.row.is24hSupply)}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="isWaterProblem" label="是否存在问题" min-width="100" show-overflow-tooltip
                                             align="center"
                            >
                                <template slot-scope="scope">
                                    <span>{{formatBoo(scope.row.isWaterProblem)}}</span>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <!--水价收费-->
                        <el-table-column  label="水价收费" min-width="100" show-overflow-tooltip align="center">
                            <el-table-column prop="isCalFee" label="是否计量收费" min-width="100" show-overflow-tooltip
                                             align="center"
                            >
                                <template slot-scope="scope">
                                    <span>{{formatBoo(scope.row.isCalFee)}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="isFeeProblem" label="是否存在问题" min-width="100" show-overflow-tooltip
                                             align="center"
                            >
                                <template slot-scope="scope">
                                    <span>{{formatBoo(scope.row.isFeeProblem)}}</span>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <!--供水服务-->
                        <el-table-column label="供水服务" min-width="150" show-overflow-tooltip align="center">
                            <el-table-column prop="isSplyProblem" label="是否存在问题" min-width="150" show-overflow-tooltip
                                             align="center"
                            >
                                <template slot-scope="scope">
                                    <span>{{formatBoo(scope.row.isSplyProblem)}}</span>
                                </template>
                            </el-table-column>
                        </el-table-column>

                        <el-table-column prop="evaluate" label="总体评价" min-width="100" show-overflow-tooltip
                                         align="center"
                        >
                            <template slot-scope="scope">
                                <span>{{formatEvaluate(scope.row.evaluate)}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="visitDate" sortable label="暗访日期" min-width="100" show-overflow-tooltip align="center"></el-table-column>

                    </el-table>
                </el-main>
            </el-card>
        </el-col>
    </el-row>


</template>

<style>

    .form_label {
        font-family: 黑体;
        font-size: 15px;
    }

    hr {
        background-color: #f0f9eb;
    }
    .add-icon{
        color: #009cee;
        float: right;
        margin-right: 20px;
        font-size: 18px;
        cursor: pointer;
    }

</style>


<script>

    let evaluateOption = [{
        "label": "A-能饮用",
        "value": "A"
    }, {
        "label": "B-能基本饮用",
        "value": "B"
    }, {
        "label": "C-不能饮用",
        "value": "C"
    }];

    import inputWith from "../../widgets/inuptWith.vue"
    import provTreeList from "../../widgets/villageList_nongyin.vue";
    import request from '../../utils/gw_ajax_request.js';
    import {dateFormat} from '../../utils/gw_date.js'
    import problemDialog from '../duChaWenTi/problemDialog.vue'

    export default {
        name: "wiuStatusTable",
        components: {
            provTreeList: provTreeList,
            inputWith:inputWith,
            problemDialog: problemDialog
        },
        props: ['engId','fengongxianCode','fenggongxianName','fengongxianObjCode'],
        data() {
            return {
                autoInput:'请输入',
                tableList: [],
                tableLoading: false,
                dialogVisible: false,
                form: {
                    villageNm:'',
                    villageCode:'',
                    userNm:'',
                    telphone:'',
                    cwsName:'',
                    isQualityGood:'1',
                    isQualityProblem:'1',
                    isSplyHome:'1',
                    is24hSupply:'1',
                    isWaterProblem:'1',
                    isCalFee:'1',
                    isFeeProblem:'1',
                    isSplyProblem:'1',
                    evaluate:'A',
                    engId:this.engId,
                    visitDate:dateFormat(new Date(),'yyyy-MM-dd'),
                    recPersId:localStorage.getItem("userid"),
                    status:'1'
                },
                //  rules:{
                //     telphone:[ {  validator: checkTel,trigger: 'change'  }],
                //
                // },
                page: {
                    pageNum: 1,
                    pageSize: 20,
                },
                showResultCount: 0,
                evaluateOption: evaluateOption,
                dxdcMainHeight: window.innerHeight - 240,
                dxdcAsideHeight: window.innerHeight - 90,
                isAddOrUpdate:'0',
                // dialogShow: false,
                problemSmallType: ''
            }
        },
        mounted() {
            // this.getTableList();
        },
        methods: {

            // closeDialog(){
            //     this.dialogShow = false
            // },
            // replaceNotNum(){
            //     this.form.telphone = this.form.telphone.replace(/[^0-9]/ig,"");
            // },
            formatEvaluate(value) {
                switch (value) {
                    case 'A': value = 'A-能饮用'; break;
                    case 'B': value = 'B-能基本饮用'; break;
                    case 'C': value = 'C-不能饮用'; break;
                }
                return value;
            },
            getIndex(index) {
                return (index + this.page.pageSize * (this.page.pageNum - 1)) + 1
            },
            pageIndexChange(val) {
                this.page.pageNum = val;
                this.getTableList();
            },
            renderHeader() {

            },
            onSubmit() {
                // 业务逻辑
                if(this.checkForm()){
                    // 添加
                    this.dataAdd();
                }
            },
            // 查询列表
            getTableList() {
                console.log("engId:"+this.engId)
                let params = {
                    'engId': this.engId
                };
                request.post('/dc/insp/wateruserInfo/queryListByPage', params).then((res) => {
                    let data = res.data;
                    this.tableList = data.list;
                    this.showResultCount = data.total;
                })
            },

            formatBoo(val) {
                if(val == '1'){
                    return '是'
                }else if(val == '0'){
                    return '否'
                }else{
                    return val
                }
            },
        },
        watch:{
            engId(newVal,oldVal){
              if(newVal){
                this.getTableList()
              }

            }
        }
    }
</script>