fj-dc-ui/.svn/pristine/af/af2ff065ba27f0716bacd6d023dc7118da2f36b7.svn-base

<template>
    <div>
        <el-container>
            <el-main id="dxdcListMain" style="padding:5px 20px;">
                <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="onSubmit" icon="el-icon-search">查询</el-button>
                            </el-form-item>

                        </el-form>
                    </el-col>
                </el-row>
                <el-table ref="table" :height="dxdcMainHeight+'px'" border :data="villageList" tooltip-effect="dark"
                          style="width: 100%;" v-loading="loading">
                    <el-table-column align="center" type="index" label="序号" min-width="45">
                        <template slot-scope="scope">
                            {{ (pageIndex - 1) * pageSize + (scope.$index + 1) }}
                        </template>
                    </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 align="center" show-overflow-tooltip prop="adnm" label="行政村名(*县*乡镇*村)"
                                     min-width="160"></el-table-column>
                    <el-table-column align="center" sortable show-overflow-tooltip prop="visitDate" label="暗访日期"
                                     min-width="110"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="isNdAdmin" 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 label="是否供水单位直接管理" min-width="110">
                        <template slot-scope="scope">
                            <span v-if="scope.row.isNdAdmin == '0'">{{formatRadio(scope.row.isComMng)}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="isAdmin" label="是否设置管水员" min-width="80">
                        <template slot-scope="scope">
                            <span v-if="scope.row.isNdAdmin == '1'">{{formatRadio(scope.row.isAdmin)}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="adminNm" label="管水员姓名" min-width="90">
                        <template slot-scope="scope">
                            <span v-if="scope.row.isAdmin == 1">{{scope.row.adminNm}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="adminAge" label="管水员年龄" min-width="90">
                        <template slot-scope="scope">
                            <span v-if="scope.row.isAdmin == 1">{{scope.row.adminAge}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="adminPro" label="管水员性质" min-width="90">
                        <template slot-scope="scope">
                            <span v-if="scope.row.isAdmin == 1">{{scope.row.adminPro == 'A' ? '专职' : scope.row.adminPro == 'B' ? '兼职' : scope.row.adminPro}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="salary" label="管水员工资（元/年）"
                                     min-width="100">
                        <template slot-scope="scope">
                            <span v-if="scope.row.isAdmin == '1'">{{scope.row.salary}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="operFee" label="运行维护费用（元/年）"
                                     min-width="110"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="otherFeeOrg" label="除水费收入外的运行维护费用来源"
                                     min-width="130">
                        <template slot-scope="scope">
                            <span>{{scope.row.otherFeeOrg == 'A' ? '政府' : scope.row.otherFeeOrg == 'B' ? '村委会' : scope.row.otherFeeOrg == 'C' ? '村民自筹' : scope.row.otherFeeOrg == 'D' ? '其它' : scope.row.otherFeeOrg}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="feeCommons" label="费用说明"
                                     min-width="90"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip label="操作" min-width="160" fixed="right">
                        <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 id="dxdcFooter">
                <el-pagination background @current-change="handleCurrentChange" @size-change="handleSizeChange"
                               :pager-count="5" :current-page.sync="pageIndex" :page-size="pageSize"
                               :page-sizes="[10, 20, 30, 40, 50, 100]" layout="sizes, total, prev, pager, next"
                               :total="total"></el-pagination>
            </el-footer>
        </el-container>
        <!--督查成果查看-->
        <renyinProject v-if="ryInfoDialog" ref="ryRef" :ryTitle="ryTitle" :ryObjId="ryObjId" :ryEngId="ryEngId"
                       @cancelHandler="ryCancelHandler"></renyinProject>
    </div>
</template>

<script>
    import request from "../../../utils/gw_ajax_request.js"

    export default {

        components: {
            renyinProject: resolve => {
                require(['../../../views/zongHeXinXiOl/components/popupWindow/renyin/main.vue'], resolve)
            },
        },
        props: ['fengongxianCode', 'engId', 'fenggongxianName', 'currentNodeType', 'lyjg', 'fengongxianAdCode', 'fengongxianChildren', 'adCodes', 'groups'],

        data() {
            return {
                dateRange: [],
                groupId: '',
                lyjg1: [],
                groupName: '',
                sttm: '',
                ettm: '',
                local: false,
                dxdcMainHeight: window.innerHeight - 327,
                dxdcAsideHeight: window.innerHeight - 90,
                addObj: {
                    adnm: '',
                    adCode: '',
                    isNdAdmin: '',
                    recPersId: '',
                    isAdmin: '',
                    adminNm: '',
                    adminAge: '',
                    adminPro: '',
                    salary: '',
                    operFee: '',
                    otherFeeOrg: '',
                    feeCommons: '',
                    visitDate: '',
                    recPers2: '',
                    isComMng: '',
                },
                rules: {
                    adminAge: [{
                        required: false,
                        type: 'number',
                        message: '年龄必须为数字值'
                    }],
                    salary: [{
                        required: false,
                        type: 'number',
                        message: '管水员工资必须为数字值'
                    }],
                    operFee: [{
                        required: false,
                        type: 'number',
                        message: '运行维护费用必须为数字值'
                    }],
                },
                searchObj: {
                    pageNum: this.pageIndex,
                    pageSize: this.pageSize,
                    // adNm: "",
                    persId: "",
                    chkComId: '',
                    chkCom: '',
                    groupNm: '',
                    groupId: '',
                    startDate: '',
                    endDate: '',
                    adCodes: ''
                },
                adminType: [{
                    label: '专职',
                    value: 'A'
                },
                    {
                        label: '兼职',
                        value: 'B'
                    }
                ],
                feeFrom: [{
                    label: '政府',
                    value: 'A',
                },
                    {
                        label: '村委会',
                        value: 'B',
                    },
                    {
                        label: '村民自筹',
                        value: 'C',
                    },
                    {
                        label: '其它',
                        value: 'D',
                    },
                    {
                        label: '无',
                        value: 'E',
                    },
                ],
                pageIndex: 1,
                pageSize: 20,
                total: 1,
                villageList: [],
                dialogFormVisible: false,
                formLabelWidth: '170px',
                curOperate: '',
                isExits: false,
                loading: false,
                tableHeight: 50,
                jqmmButton: false,
                jqmmShow: false,
                imageShow: false,
                jqmmEngId: "",
                sswhName: "",
                centerX: 0,
                centerY: 0,
                //督查成果
                ryInfoDialog: false,
                ryTitle: "",
                ryEngId: "",
                ryObjId: ""
            }
        },
        computed: {
            recPersId() {
                return localStorage.getItem("userid") ? localStorage.getItem("userid") : '1098101939614724096'
            },
            userId: function () {
                return localStorage.getItem("userid")
                    ? localStorage.getItem("userid")
                    : "1098101939614724096";
            },
        },
        mounted() {
            this.$nextTick(function () {
                this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 200;
                let _self = this;
                window.onresize = function () {
                    _self.tableHeight = window.innerHeight - _self.$refs.table.$el.offsetTop - 200
                }
            })
            this.searchObj.persId = this.userId;
        },
        watch: {
            adCodes(n) {
                if (n.length) {
                    this.getVillageListByNode();
                }
            },
            lyjg(n, o) {
                this.lyjg1 = this.lyjg;
            },
            'addObj.isAdmin'(val, oldVal) {
                console.log(val, oldVal)
                if (val == '1') {
                    this.local = true
                } else {
                    this.local = false
                }
            },
            deep: true

        },
        methods: {
            handleSelect(item) {
                console.log(item);
                this.groupId = item.id;
            },
            onSubmit() {
                if (this.adCodes.length) {
                    this.getVillageListByNode();
                }
            },
            //根据节点id查工程列表
            getVillageListByNode() {
                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.pageSize = this.pageSize;//添加每页条目数
                this.searchObj.pageNum = this.pageIndex
                this.searchObj.groupId = this.groupId
                this.searchObj.adCodes = this.adCodes.toString()
                let paramsObj = this.searchObj
                request.post('/dc/insp/VlgdrinkFacOper/getPageByNodeId', paramsObj).then((res) => {
                    if (res.success) {
                        this.villageList = res.data.list
                        this.total = res.data.total
                        this.loading = false
                    }
                })
            },
            //分页
            handleCurrentChange(val) {
                this.searchObj.pageNum = val;
                this.getVillageListByNode();
            },
            handleSizeChange(val) {
                this.searchObj.pageSize = val;
                this.pageSize = val
                this.getVillageListByNode();
            },
            formatRadio(val) {
                if (val == '1') {
                    return '是'
                } else {
                    return '否'
                }
            },
            //-----------------------------------------------------------------
            //    督查成果
            ryCancelHandler() {
                this.ryInfoDialog = false;
            },
            //成果查看
            lookOver(row) {
                this.ryTitle = row.adnm;
                this.ryObjId = row.objId;
                this.ryEngId = row.engId;
                this.ryInfoDialog = true;
                if (this.$refs['ryRef']) {
                    this.$refs['ryRef'].showDialog();
                }
            }
        },

    }
</script>

<style>
    #dcdxHeader {
        padding: 15px 20px;
    }

    #dxdcFooter {
        text-align: center;
    }

    #dxdcAside {
        border: 1px solid #d5d5ff;
    }

    .el-dialog__wrapper .el-treeWhite {
        /* max-height: 260px !important; */
    }
</style>