fj-dc-ui/.svn/pristine/c3/c37cc1d88bcc3068a2d1575571961b1ba2e11b95.svn-base

<template>
    <!-- 弹出窗 -->
    <el-dialog title="添加督查对象" width="70%" @close="closeDuChaDuiXiangDialog" :visible.sync="dialogFormVisible"
               :close-on-click-modal="false"
               :modal-append-to-body="true"
               :append-to-body="true">
        <el-container>
            <el-main style="border:1px solid #d5d5ff;margin-left:5px;padding:0px;">
                <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">督查对象</p>
                <el-form style="padding:10px">
                    <div>
                        <el-form size="mini" :inline="true" class="demo-form-inline">
                            <el-form-item label="取水口名称">
                                <el-input
                                        style="width:140px;"
                                        v-model="searchNameOfRsName"
                                        clearable
                                        placeholder="请输入取水口名称"
                                ></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="refreshCurrentShow">查询</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="toAddNewRsvr">添加新取水口</el-button>
                            </el-form-item>
                        </el-form>
                        <el-table
                                border
                                v-loading="loading"
                                :data="currentShowList"
                                tooltip-effect="dark"
                                style="width: 100%"
                                @selection-change="handleSelectionChange"
                        >
                            <el-table-column align="center" type="selection" width="60"></el-table-column>
                            <el-table-column align="center" prop="index" label="序号" min-width="40"></el-table-column>
                            <el-table-column
                                    align="center"
                                    show-overflow-tooltip
                                    prop="wintName"
                                    label="取水口名称"
                                    min-width="100"
                            ></el-table-column>
                            <el-table-column
                                    align="center"
                                    show-overflow-tooltip
                                    prop="wintPos"
                                    label="所在地点"
                                    min-width="100"
                            ></el-table-column>
                            <el-table-column
                                    align="center"
                                    show-overflow-tooltip
                                    prop="wainIntType"
                                    label="取水工程类型"
                                    min-width="100"
                            >
                                <template slot-scope="scope">
                                    <p>{{scope.row.wainIntType | wainIntType}}</p>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    show-overflow-tooltip
                                    prop="wainType"
                                    label="取水口类型"
                                    min-width="100"
                            >
                                <template slot-scope="scope">
                                    <p>{{scope.row.wainType | wainType}}</p>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    show-overflow-tooltip
                                    prop="wintCode"
                                    label="取水口编码"
                                    min-width="100"
                            ></el-table-column>
                        </el-table>
                        <div
                                class="block"
                                style="display:flex;flex-direction:row;justify-content:center;align-items:center;padding-top: 5px;background-color: #fff;"
                        >
                            <el-pagination
                                    small
                                    @current-change="handleCurrentChange"
                                    :pager-count="5"
                                    :current-page.sync="pageIndex"
                                    :page-size="pageSize"
                                    layout="total, prev, pager, next"
                                    :total="total"
                            ></el-pagination>
                        </div>
                    </div>
                </el-form>
            </el-main>
        </el-container>
        <div slot="footer" class="dialog-footer">
            <el-button @click="closeDuChaDuiXiangDialog">取 消</el-button>
            <el-button type="primary" @click="saveChange">确 定</el-button>
        </div>

        <el-dialog title="添加新取水口" :visible.sync="addRsvrVisible" append-to-body width="40%">
            <el-form label-width="200px" :model="formObj" :rules="rules" ref="formObj">
                <!--<el-form-item label="行政区划" required>-->
                    <!--<div>-->
                        <!--<el-select v-model="provName" placeholder="选择省" @change="provChange" style="width:20%">-->
                            <!--<el-option-->
                                    <!--v-for="item in provList"-->
                                    <!--:key="item.adCode"-->
                                    <!--:label="item.adName"-->
                                    <!--:value="item.adCode">-->
                            <!--</el-option>-->
                        <!--</el-select>-->
                        <!--<el-select v-model="cityName" placeholder="选择市" @change="cityChange" style="width:20%">-->
                            <!--<el-option-->
                                    <!--v-for="item in cityList"-->
                                    <!--:key="item.adCode"-->
                                    <!--:label="item.adName"-->
                                    <!--:value="item.adCode">-->
                            <!--</el-option>-->
                        <!--</el-select>-->
                        <!--<el-select v-model="countryName" placeholder="选择县" @change="countryChange" style="width:20%">-->
                            <!--<el-option-->
                                    <!--v-for="item in countryList"-->
                                    <!--:key="item.adCode"-->
                                    <!--:label="item.adName"-->
                                    <!--:value="item.adCode">-->
                            <!--</el-option>-->
                        <!--</el-select>-->
                    <!--</div>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="所在地点" prop="location">-->
                <!--<el-input v-model="formObj.location" clearable autocomplete="off" style="width:70%;"></el-input>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="取水工程名称" prop="wainIntName">-->
                    <!--<el-input v-model="formObj.wainIntName" clearable autocomplete="off" style="width:70%;"></el-input>-->
                <!--</el-form-item>-->
                <el-form-item label="取水口名称" prop="wintName">
                    <el-input v-model="formObj.wintName" clearable autocomplete="off" style="width:70%;"></el-input>
                </el-form-item>
                <el-form-item label="取水口类型" prop="wainType">
                    <el-select v-model="formObj.wainType" clearable placeholder="请选择" autocomplete="off"
                               style="width:70%;">
                        <el-option label="单一用户取水口" value="1"></el-option>
                        <el-option label="多用户公用取水口" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="取水工程类型" prop="wainIntType">
                    <el-select v-model="formObj.wainIntType" clearable placeholder="请选择" autocomplete="off"
                               style="width:70%;">
                        <el-option label="渠道" value="1"></el-option>
                        <el-option label="人工河道" value="2"></el-option>
                        <el-option label="虹吸管" value="3"></el-option>
                        <el-option label="泵站" value="4"></el-option>
                        <el-option label="闸" value="5"></el-option>
                        <el-option label="从江河湖泊饮水的水库" value="6"></el-option>
                        <el-option label="其他" value="7"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="取水水源名称" prop="wainWasoName">
                    <el-input v-model="formObj.wainWasoName" clearable autocomplete="off" style="width:70%;"></el-input>
                </el-form-item>
                <el-form-item label=" 取水水源类型">
                    <el-select v-model="formObj.wainWasoType" clearable placeholder="请选择" autocomplete="off"
                               style="width:70%;">
                        <el-option label="河道内的水库" value="1"></el-option>
                        <el-option label="湖泊" value="2"></el-option>
                        <el-option label="河流" value="3"></el-option>
                        <el-option label="跨省引调水工程" value="4"></el-option>
                        <el-option label="其他" value="9"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label=" 取水口编码" prop="wintCode">
                    <el-input v-model="formObj.wintCode" clearable autocomplete="off" style="width:70%;"></el-input>
                </el-form-item>

                <el-form-item label="取水口位置">
                    <el-input v-model="formObj.wintPos" clearable autocomplete="off" style="width:70%;"></el-input>
                </el-form-item>
                <el-form-item label="水行政主管部门名称">
                    <el-input v-model="formObj.charDepNm" autocomplete="off" style="width:70%;"></el-input>
                </el-form-item>
                <el-form-item label="单位联系人名称">
                    <el-input v-model="formObj.charDepPers" autocomplete="off" style="width:70%;"></el-input>
                </el-form-item>
                <el-form-item label="主管部门联系电话">
                    <el-input v-model="formObj.charDepTel" autocomplete="off" style="width:70%;"></el-input>
                </el-form-item>
                <el-form-item label="设计日最大取水量(m³/s)">
                    <el-input v-model="formObj.desDayQ" autocomplete="off" style="width:70%;"></el-input>
                </el-form-item>
                <el-form-item label="设计最大取水流量(m³/s)">
                    <el-input v-model="formObj.desQ" autocomplete="off" style="width:70%;"></el-input>
                </el-form-item>
                <el-form-item label="设计最大取水流量(万m³/年)">
                    <el-input v-model="formObj.desYearQ" autocomplete="off" style="width:70%;"></el-input>
                </el-form-item>
                <el-form-item label="所在水资源一级区名称">
                    <el-input v-model="formObj.locWrz1rdName" autocomplete="off" style="width:70%;"></el-input>
                </el-form-item>
                <el-form-item label="所在水资源二级区名称">
                    <el-input v-model="formObj.locWrz2rdName" autocomplete="off" style="width:70%;"></el-input>
                </el-form-item>
                <el-form-item label="所在水资源三级区名称">
                    <el-input v-model="formObj.locWrz3rdName" autocomplete="off" style="width:70%;"></el-input>
                </el-form-item>
                <el-form-item label="经度">
                    <el-input v-model="formObj.wainLong" autocomplete="off" style="width:70%;"></el-input>
                </el-form-item>
                <el-form-item label="纬度">
                    <el-input v-model="formObj.wainLat" autocomplete="off" style="width:70%;"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addRsvrVisible = false">取 消</el-button>
                <el-button type="primary" @click="addNewRsvr('formObj')">确 定</el-button>
            </div>
        </el-dialog>
    </el-dialog>
</template>
<script>
    import request from '@util/gw_ajax_request'

    export default {
        components: {},
        props: ["dczId", "dczName", "plnaId", "objType", "rowData", "villageAdCode","currentObjectRgstrId"],
        data() {
            return {
                addOnce: false,
                objTypeName: '小水库',
                xsk: true,
                ncys: false,
                shgc: false,
                dxs: false,
                searchNameOfRsName: "",
                searchNameOfAdName: "",
                searchNameOfwtdstNm: "",
                addLevel: "",
                rsAdmDep: "",
                engScal: "",
                wtdstState: "",
                engLevel: "",
                wtdstType: "",
                stnm: '',
                pageIndex: 1,
                pageSize: 10,
                total: 0,
                currentShowList: [],
                dialogFormVisible: true,
                formLabelWidth: "120",
                addArr: "",
                addName: "",
                addLttd: "",
                addLgtd: "",
                multipleSelection: [],
                searchProvTreeListCode: "",
                loading: false,
                showLeftTree: true,
                addRsvrVisible: false,
                formObj: {
                    adCode: "",//行政区划 ,
                    adName: "",//行政区划全称 ,
                    charDepNm: "",//水行政主管部门名称 ,
                    charDepPers: "",//单位联系人名称 ,
                    charDepTel: "",//主管部门联系电话 ,
                    desDayQ: "",//设计日最大取水量(m3/s） ,
                    desQ: "",//设计最大取水流量(m3/s） ,
                    desYearQ: "",//设计年取水量（万m3/年） ,
                    gdX: "",//高德经度 ,
                    gdY: "",//高德纬度 ,
                    id: "",//主键ID ,
                    locWrz1rdName: "",//所在水资源一级区名称 ,
                    locWrz2rdName: "",//所在水资源二级区名称 ,
                    locWrz3rdName: "",//所在水资源三级区名称 ,
                    wainIntName: "",//取水工程名称 ,
                    wainIntType: "",//取水工程类型(1:渠道;2:人工河道;3虹吸管;4:泵站;5:闸;6:从江河湖泊饮水的水库;7:其他;) ,
                    wainLat: "",//纬度 ,
                    wainLong: "",//经度 ,
                    wainType: "",//取水口类型(1:单一用户取水口;2:多用户公用取水口) ,
                    wainWasoName: "",//取水水源名称 ,
                    wainWasoType: "",//取水水源类型(1:河道内的水库;2:湖泊;3:河流;4:跨省引调水工程;9:其他) ,
                    wintCode: "",//取水口编码 ,
                    wintName: "",//取水口名称 ,
                    wintPos: "",//取水口位置
                },
                areasList: [],
                props: {
                    value: 'id',
                    label: 'label',
                    children: 'cities'
                },
                rules: {
                    wainIntName: [
                        {required: true, message: '请输入取水工程名称', trigger: 'blur'},
                    ],
                    wainWasoName: [
                        {required: true, message: '请输入取水水源名称', trigger: 'blur'},
                    ],
                    wintName: [
                        {required: true, message: '请输入取水口名称', trigger: 'blur'},
                    ],
                    wintPos: [
                        {required: true, message: '请输入取水口位置', trigger: 'blur'}
                    ],
                    wainIntType: [
                        {required: true, message: '请选择取水工程类型', trigger: 'blur'}
                    ],
                    wainType: [
                        {required: true, message: '请选择取水口类型', trigger: 'blur'}
                    ],
                    wintCode: [
                        {required: true, message: '请输入取水口编码', trigger: 'blur'}
                    ]

                },
                provList: [],
                cityList: [],
                countryList: [],
                provName: '',
                cityName: '',
                countryName: '',
                provNames: '',
                cityNames: '',
                countryNames: '',
                curSelectItem: 0
            }
        },
        watch: {},
        mounted() {
            this.getTableData_qsk();
            // this.getAreaList();
        },
        computed: {
            userId: function () {
                return localStorage.getItem("userid") ? localStorage.getItem("userid") : '1098101939614724096'
            },
        },
        methods: {
            changeCurrentObjSelectName(item) {
                this.objType = item;
            },
            selectChange(val) {
                console.log(val);
                this.objType = val;
            },
            engScalFormatter: function (row, column) {
                return row.engType == 1 ? "万人工程" :
                    row.engType == 2 ? "千人工程" :
                        row.engType == 3 ? "千人以下集中取水口" : ""
            },
            saveChange() {
                this.addObjectChange();
            },
            getTableData_qsk() {
                var _self = this;
                _self.loading = true;
                let obj = {
                    // "adCode": _self.villageAdCode.substr(0,6),
                    // "engType": _self.engScal,
                    "name": _self.searchNameOfRsName,
                    "pageNum": _self.pageIndex,
                    "pageSize": _self.pageSize,
                    // "regstrId": _self.rowData.regstrId
                }
                request.post('/bis/insp/wrm/rgstr/wint/findBaseInfo', obj).then((res) => {
                    _self.loading = false;
                    _self.currentShowList = res.data.list;
                    _self.currentShowList.forEach((element, index) => {
                        element["index"] = _self.pageSize * (_self.pageIndex - 1) + index + 1;
                        element["wintId"] = element.id;
                    });
                    _self.total = res.data.total;
                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                this.multipleSelection.forEach(item =>{
                    item["rgstrId"] = this.currentObjectRgstrId;
                })
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.refreshCurrentShow();
            },
            refreshCurrentShow: function () {
                this.getTableData_qsk();

            },

            addObjectChange: function () {
                // const length = this.multipleSelection.length;
                // for (let i = 0; i < length; i++) {
                //     this.addArr += this.multipleSelection[i].cwsCode + ";";
                // }
                // this.addArr = this.addArr.substr(0, this.addArr.length - 1);
                if(!this.multipleSelection.length) {
                    this.$message.warning("请选择要添加的对象");
                    return;
                }
                try {
                    let array = this.multipleSelection;
                    request.post(`/bis/insp/wrm/rgstr/wint/insert`, array)
                        .then(res => {
                            if (res.success) {
                                this.dialogFormVisible = false;
                                this.$message.success("添加成功");
                                this.$emit("addSuccess");
                            } else {
                                this.$message.warning(res.message);
                            }
                        })
                } catch (e) {
                    alert("暂无数据");
                }
            },
            toAddNewRsvr() {
                this.cityList = [];
                this.countryList = [];
                this.provList = [];
                this.provName = "";
                this.cityName = "";
                this.countryName = "";
                for (var obj in this.formObj) {
                    this.formObj[obj] = '';
                }
                this.addRsvrVisible = true;
                this.curSelectItem = null;
                this.getAreaList();
            },
            addNewRsvr(formName) {
                // let obj = {
                //     "addvcd": this.villageAdCode,
                //     "cwsName": this.formObj.rsName,
                //     "cwsLoc": this.formObj.location,
                //     "engType": this.formObj.engType,
                // }
                let obj = Object.assign({}, this.formObj);
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        request.post('/att/wint/base/b', obj).then(res => {
                            if (res.success) {
                                this.$message.success('添加成功')
                                this.getTableData_qsk();
                                this.addRsvrVisible = false
                            } else {
                                _this.$message.error(res.message)
                            }
                        }).catch(res => {
                            this.$message.error(res.message)
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            getAreaList(val) {
                let adCode = ''
                if (!val) {
                    adCode = '000000000000'
                } else {
                    adCode = val
                }
                request.get('/dc/ad/base/getAdData', {params: {'adCode': adCode}}).then(res => {
                    if (res.success) {
                        if (this.curSelectItem == 1) {
                            this.cityList = res.data
                        } else if (this.curSelectItem == 2) {
                            this.countryList = res.data
                        } else {
                            this.provList = res.data
                        }

                    }
                })
            },
            handleItemChange(val) {
                this.getAreaList(val)
            },
            provChange(val) {
                this.curSelectItem = 1
                this.cityName = ''
                this.countryName = ''
                this.formObj.admDiv = val
                this.provList.forEach(ele => {
                    if (ele.adCode == this.provName) {
                        this.provNames = ele.adName
                    }
                })
                this.formObj.adName = this.provNames
                this.getAreaList(val)
            },
            cityChange(val) {
                this.curSelectItem = 2
                if (val && val != '') {
                    this.formObj.admDiv = val
                    this.countryName = ''
                    this.cityList.forEach(ele => {
                        if (ele.adCode == this.cityName) {
                            this.cityNames = ele.adName
                        }
                    })
                    this.formObj.adName = this.provNames + this.cityNames
                    this.getAreaList(val)
                }
            },
            countryChange(val) {
                if (val && val != '') {
                    this.formObj.admDiv = val
                    this.countryList.forEach(ele => {
                        if (ele.adCode == this.countryName) {
                            this.countryNames = ele.adName
                        }
                    })
                    this.formObj.adName = this.provNames + this.cityNames + this.countryNames
                }
            },


            closeDuChaDuiXiangDialog() {
                this.dialogFormVisible = false;
                this.$emit("closeDuChaDuiXiangDialog");
            }
        },
        filters: {
            wainType(val) {
                if (val == '1') {
                    return '单一用户取水口'
                } else if (val == '2') {
                    return '多用户公用取水口'
                } else {
                    return ''
                }
            },
            wainIntType(val) {
                if (val == '1') {
                    return '渠道'
                } else if (val == '2') {
                    return '人工河道'
                } else if (val == '3') {
                    return '虹吸管'
                } else if (val == '4') {
                    return '泵站'
                } else if (val == '5') {
                    return '闸'
                } else if (val == '6') {
                    return '从江河湖泊饮水的水库'
                } else if (val == '7') {
                    return '其他'
                } else {
                    return ''
                }
            },
            wainWasoType(val) {
                if (val == '1') {
                    return '河道内的水库'
                } else if (val == '2') {
                    return '湖泊'
                } else if (val == '3') {
                    return '河流'
                } else if (val == '4') {
                    return '跨省引调水工程'
                } else if (val == '9') {
                    return '其他'
                } else {
                    return ''
                }
            }
        }
    }
</script>
<style>
</style>