fj-dc-ui/.svn/pristine/a3/a35140fc278c4bd6aede6aacfe686bd9a29b53f7.svn-base

<template>
    <el-container style="height:520px;" class="qsjgqk">
        <el-main style="border:1px solid #d5d5ff;margin-left:5px;padding:0px;">
            <el-card class="box-card">
                <el-row style="padding: 10px 20px;">
                    <el-col :span="24">
                        <el-button style="float: right;" type="primary" @click="addQsk" icon="el-icon-plus">添加
                        </el-button>
                    </el-col>
                </el-row>
                <el-table
                        v-loading="loading"
                        border
                        ref="multipleTable"
                        :data="tableDataList"
                        :height="tableHeight"
                        tooltip-effect="dark"
                        style="width: 100%">
                    <el-table-column align="center" type="index" label="序号" min-width="40">
                        <template slot-scope="scope">
                            {{ (pageNum - 1) * pageSize + (scope.$index + 1) }}
                        </template>
                    </el-table-column>
                    <el-table-column
                            header-align="center"
                            align="center"
                            min-width="100"
                            prop="wintName"
                            label="取水口名称"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop
                            min-width="100"
                            label="操作"
                            show-overflow-tooltip
                            fixed="right">
                        <template slot-scope="scope">
                            <el-button icon="el-icon-edit" type="text" @click="editTianBao(scope.row)"></el-button>
                            <el-button icon="el-icon-delete" type="text" @click="removeRow(scope.row.id)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <div>
                    <el-pagination
                            class="paginationCenter"
                            background
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page.sync="pageNum"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </el-card>
        </el-main>
        <!--添加取水口-->
        <editDcdxInfo v-if="qskVisible" :currentObjectRgstrId="currentObjectRgstrId"
                      @addSuccess="DuiXiangAddSuccessHandler"
                      @closeDuChaDuiXiangDialog="closeDuChaDuiXiangDialog"></editDcdxInfo>
        <!--填报-->
        <el-dialog
                class="outerDialog custom_dialog"
                :title="rowData.wintName"
                width="60%"
                :visible.sync="editTianBaoVisible"
                :close-on-click-modal="false"
                :modal-append-to-body="true"
                :append-to-body="true">
            <waterIntakeSupervision v-if="editTianBaoVisible" :rowData="rowData" :szRuls="szRuls" @closeDialog="closeDialog"
                                    :currentObjectRgstrId="currentObjectRgstrId"
                                    :currentObjectName="currentObjectName"
                                    :currentObjectId="currentObjectId"></waterIntakeSupervision>
        </el-dialog>

    </el-container>
</template>
<script>
    import request from "@util/gw_ajax_request.js"

    export default {
        props: ['currentObjectId', 'currentObjectName', 'currentObjectRgstrId', 'szRuls'],
        data() {
            return {
                tableHeight: 400,
                tableDataList: [],
                loading: false,
                currentPage: 1,
                pageSize: 10,
                pageNum: 1,
                total: 0,
                addForm: {},
                dialogProjectVisible: false,
                qskVisible: false,
                editTianBaoVisible: false,
                rowData: {}
            }

        },
        components: {
            editDcdxInfo: resolve => {
                require(['./editDcdxInfo.vue'], resolve)
            },//添加取水口
            waterIntakeSupervision: resolve => {
                require(['./waterIntakeSupervision.vue'], resolve)
            }
        },
        computed: {
            persId() {
                return localStorage.getItem('userid') ? localStorage.getItem('userid') : ''
            }
        },
        mounted() {
            this.getTableDataList();
        },
        methods: {
            //用水户添加
            addQsk() {
                for (var obj in this.addForm) {
                    this.addForm[obj] = '';
                }
                this.qskVisible = true;
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.getTableDataList();
            },
            handleCurrentChange(val) {
                this.pageNum = val;
                this.getTableDataList();
            },
            getTableDataList() {
                let _self = this;
                let obj = {
                    "rgstrId": _self.currentObjectRgstrId,
                    "pageSize": _self.pageSize,
                    "pageNum": _self.pageNum
                }
                request.post(`/bis/insp/wrm/rgstr/wint/page`, obj).then(res => {
                    if (res.success) {
                        _self.tableDataList = res.data.list;
                        _self.total = res.data.total;
                    } else {
                        this.$message.error(res.message)
                    }
                });
            },
            editTianBao(row) {
                this.rowData = row;
                this.editTianBaoVisible = true;
            },
            removeRow(rowId) {
                this.$confirm("确认删除该数据吗?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    request.get(`/bis/insp/wrm/rgstr/wint/del/${rowId}`).then(res => {
                        if (res.success) {
                            this.$message({
                                type: "success",
                                message: "删除成功!"
                            });
                            this.getTableDataList(); //删除之后立刻重新拉取数据
                        } else {
                            this.$message({
                                type: "error",
                                message: res.message
                            });
                        }
                    });
                });
            },
            DuiXiangAddSuccessHandler: function () {
                this.qskVisible = false;
                this.getTableDataList();
            },
            closeDuChaDuiXiangDialog() {
                this.qskVisible = false;
            },
            closeDialog(val) {
                if(val == "success") {
                    this.editTianBaoVisible = false;
                    this.getTableDataList();
                }
            },
        }
    }
</script>

<style lang="scss">
    .qsjgqk {
        .el-icon-circle-plus {
            margin-left: 20px;
            color: #00bbff;
            font-size: 18px;
            line-height: 12px;
            vertical-align: top;
            cursor: pointer;
        }

        .el-card__body {
            padding: 0 0 20px;
        }
    }

</style>