fj-dc-ui/.svn/pristine/44/44d75a8f858f06a196bc6f70e54d633bbe8c9dd7.svn-base

<template>
    <el-row>
        <el-col :span="24">
            <el-row>
                <el-col :span="24">
                    <el-form :inline="true" size="mini" class="demo-form-inline" style="padding-left: 10px;">
                        <el-form-item label="督查时间">
                            <div style="display: flex;">
                                <el-date-picker
                                        v-model="dateRange"
                                        type="daterange"
                                        value-format="yyyy-MM-dd"
                                        style="width:100%"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                ></el-date-picker>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit1" icon="el-icon-search">查询</el-button>
                        </el-form-item>

                    </el-form>
                </el-col>
            </el-row>
            <el-card :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'" tooltip-effect="dark">

                        <el-table-column type="index" fixed min-width="80" :index="getIndex" label="序号"
                                         show-overflow-tooltip align="center"></el-table-column>
                        <el-table-column align="center" show-overflow-tooltip prop="province" label="省"  v-if="isXj"
                                         min-width="100"></el-table-column>
                        <el-table-column align="center" show-overflow-tooltip prop="city" :label="ownAdName"
                                         min-width="100"></el-table-column>
                        <el-table-column align="center" show-overflow-tooltip prop="county" label="县(区)"
                                         min-width="100"></el-table-column>
                        <el-table-column align="center" show-overflow-tooltip prop="town" label="乡(镇)"
                                         min-width="100"></el-table-column>
                        <el-table-column prop="villageNm" label="调查地点（*县*乡镇*村）" min-width="170" show-overflow-tooltip
                                         align="center">
                        </el-table-column>
                        <el-table-column align="center" sortable show-overflow-tooltip prop="visitDate" label="暗访日期"
                                         min-width="110"></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 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="isHrSupply" label="是否定时供水" min-width="130" show-overflow-tooltip
                                             align="center">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.is24hSupply == '0'">{{formatBoo(scope.row.isHrSupply)}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="hrNote" label="备注" min-width="130" show-overflow-tooltip
                                             align="center">

                            </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="waterFee" label="单位水价" min-width="100" show-overflow-tooltip
                                             align="center">

                            </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 fixed="right" label="操作" align="center" width="160">
                            <template slot-scope="scope">
                                <el-button type="success" plain @click="lookOver(scope.row)">查看</el-button>
                            </template>
                        </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>

        <!--督查成果查看-->
        <renyinProject v-if="ryInfoDialog" ref="ryRef" :ryTitle="ryTitle" :ryObjId="ryObjId" :ryEngId="ryEngId"
                       @cancelHandler="ryCancelHandler"></renyinProject>
    </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 request from '../../../utils/gw_ajax_request.js';

    export default {
        name: "wiuStatusTable",
        components: {
            renyinProject: resolve => {
                require(['../../../views/zongHeXinXiOl/components/popupWindow/renyin/main.vue'], resolve)
            },

        },
        props: ['engId', 'fengongxianCode', 'fenggongxianName', 'fengongxianObjCode', 'currentNodeType', 'lyjg', 'fengongxianAdCode', 'adCodes', 'groups'],
        data() {
            var checkTel = (rule, value, callback) => {
                if (value == '') {
                    callback();
                }
                if (isNaN(value)) {
                    callback(new Error('请输入合理电话'));
                }
                var isPhone = /^([0-9]{3,4}-)?[0-9]{7,8}$/; //座机
                var isMob = /^[1][3,4,5,6,7,8,9][0-9]{9}$/; // 手机号格式
                if (!isMob.test(value) && !isPhone.test(value)) {
                    callback(new Error('请输入合理电话'));
                } else {
                    callback();
                }
            };
            return {
                dateRange: [],
                groupId: '',
                lyjg1: [],
                groupName: '',
                sttm: '',
                ettm: '',
                searchObj: {
                    pageNum: this.pageIndex,
                    pageSize: this.pageSize,
                    persId: "",
                    chkComId: '',
                    chkCom: '',
                    groupNm: '',
                    groupId: '',
                    startDate: '',
                    endDate: '',
                    adCodes: []
                },
                autoInput: '请输入',
                tableList: [],
                tableLoading: false,
                dialogVisible: false,
                form: {
                    villageNm: '',
                    villageCode: '',
                    userNm: '',
                    telphone: '',
                    cwsName: '',
                    cwsCode: '',
                    isQualityGood: '1',
                    isQualityProblem: '1',
                    isSplyHome: '1',
                    is24hSupply: '1',
                    isWaterProblem: '1',
                    isCalFee: '1',
                    isFeeProblem: '1',
                    isSplyProblem: '1',
                    evaluate: 'A',
                    engId: this.engId,
                    visitDate: '',
                    recPersId: localStorage.getItem("userid"),
                    status: '1',
                    isHrSupply: '',
                    hrNote: '',
                    waterFee: '',
                    centerX: 0,
                    centerY: 0
                },
                rules: {
                    telphone: [{
                        // type: 'number'

                        validator: checkTel,
                        trigger: 'change',
                    }],

                },
                page: {
                    pageNum: 1,
                    pageSize: 20,
                },
                showResultCount: 0,
                evaluateOption: evaluateOption,
                dxdcMainHeight: window.innerHeight - 310,
                dxdcAsideHeight: window.innerHeight - 90,
                isAddOrUpdate: '0',
                dialogShow: false,
                problemSmallType: '',
                jqmmButton: false,
                jqmmShow: false,
                imageShow: false,
                jqmmEngId: "",
                yshName: "",
                //督查成果
                ryInfoDialog: false,
                ryTitle: "",
                ryEngId: "",
                ryObjId: ""
            }
        },
        mounted() {
            this.searchObj.persId = this.userId;
        },
        computed: {
            userId: function () {
                return localStorage.getItem("userid")
                    ? localStorage.getItem("userid")
                    : "1098101939614724096";
            },
        },
        methods: {
            handleSelect(item) {
                console.log(item);
                this.groupId = item.id;
            },
            onSubmit1() {
                if (this.adCodes.length) {
                    this.getTableListByNode();
                }

            },
            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.getTableListByNode();
            },
            handleSizeChange(val) {
                this.page.pageSize = val;
                this.getTableListByNode();
            },
            //根据节点id查列表
            getTableListByNode() {
                if (this.dateRange && this.dateRange.length > 1 && this.dateRange[0] != '' && this.dateRange[1] != '') {
                    this.searchObj.startDate = this.dateRange[0];
                    this.searchObj.endDate = this.dateRange[1];
                } else {
                    delete this.searchObj['startDate'];
                    delete this.searchObj['endDate'];
                }
                this.searchObj.pageNum = this.page.pageIndex
                this.searchObj.pageSize = this.page.pageSize
                this.searchObj.adCodes = this.adCodes.toString()
                this.searchObj.groupId = this.groupId
                // this.searchObj.adNm = this.fenggongxianName
                let paramsObj = this.searchObj
                request.post('/dc/insp/wateruserInfo/getPageByNodeId', paramsObj).then((res) => {
                    if (res.success) {
                        this.tableList = res.data.list
                        this.showResultCount = res.data.total
                        this.loading = false
                    }
                })
            },
            formatBoo(val) {
                if (val == '1') {
                    return '是'
                } else if (val == '0') {
                    return '否'
                } else {
                    return val
                }
            },
            //-----------------------------------------------------------------
            //    督查成果
            ryCancelHandler() {
                this.ryInfoDialog = false;
            },
            //成果查看
            lookOver(row) {
                // this.ryTitle = row.userNm;
                this.ryObjId = row.objId;
                this.ryEngId = row.engId;
                this.ryInfoDialog = true;
                if (this.$refs['ryRef']) {
                    this.$refs['ryRef'].showDialog();
                }
            }
        },
        watch: {
            adCodes(n) {
                if (n.length) {
                    this.getTableListByNode();
                }
            }
        }
    }
</script>