fj-dc-ui/.svn/pristine/88/88f2761c48cbef6fcdda1ceeac5da7826b414f8c.svn-base

<template>
    <div>
        <el-container style="height:520px;">
            <el-main style="border:1px solid #d5d5ff;margin-left:5px;padding:0px;">
                <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">信息填报</p>
                <p style="margin-top:10px;margin-bottom: 10px"><i class="el-icon-caret-right"></i><span
                        style="width:120px;padding-left: 10px">基础信息</span><span class="hrs"></span>
                    <el-button type="warning" style="float: right;" @click="recentAppearance">近期面貌</el-button>
                    <el-button type="warning" style="float: right; margin-right: 10px;" @click="imageClick">影像
                    </el-button>
                </p>
                <el-form label-width="180px" :model="formObj" :rules="rules" ref="formObj">
                    <el-form-item label="工程项目名称">
                    <el-input v-model="formObj.prjName" autocomplete="off" style="width:70%;"></el-input>
                    </el-form-item>
                    <el-form-item label="所在河流">
                        <el-input v-model="formObj.rvName" autocomplete="off" style="width:70%;"></el-input>
                    </el-form-item>
                    <el-form-item label="行政区划">
                        <div v-if="showLocSelect">
                            <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>
                            &#x3000;<span v-if="showLocSelect" @click="showLocSelect = false"
                                          style="color: #009fff;font-size:12px;cursor:pointer">取消</span>
                        </div>
                        <div v-else>
                            <el-input v-model="formObj.adName" readonly autocomplete="off"
                                      style="width:70%;"></el-input>&#x3000;<span @click="showLocSelect = true"
                                                                                  style="color: #009fff;font-size:12px;cursor:pointer">更改</span>
                        </div>
                    </el-form-item>
                    <el-form-item label="所在位置">
                        <el-input v-model="formObj.addr" autocomplete="off" style="width:70%;"></el-input>
                    </el-form-item>
                    <el-form-item label="规划河长">
                        <el-input v-model="formObj.rvLong"
                                  clearable
                                  type="text" onkeyup="value=value.replace(/[^.\d]/g,'')" autocomplete="off" style="width:70%;">
                            <template slot="append">km</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="规划总投资">
                        <el-input v-model="formObj.pgi" autocomplete="off"
                                  clearable
                                  type="text" onkeyup="value=value.replace(/[^.\d]/g,'')" style="width:70%;">
                            <template slot="append">万元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="小组组长">
                        <el-input v-model="formObj.groupLeader" autocomplete="off" style="width:70%;"></el-input>
                    </el-form-item>
                    <el-form-item label="小组组长电话">
                        <el-input v-model="formObj.groupLeaderTel" autocomplete="off" style="width:70%;"></el-input>
                    </el-form-item>
                    <el-form-item label="经度">
                        <el-input v-model="formObj.gdX" autocomplete="off" style="width:70%;"></el-input>
                    </el-form-item>
                    <el-form-item label="纬度">
                        <el-input v-model="formObj.gdY" autocomplete="off" style="width:70%;"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button type="primary" @click="addHandler('formObj')">保 存</el-button>
                    </el-form-item>
                </el-form>

            </el-main>

        </el-container>
        <theRecentAppearance v-if="xcztShow" @jqmmDialogClose="jqmmDialog" :jqmmShow="xcztShow"
                             :jqmmEngId="currentObjectRgstrId" :type="'16'" :dialogTitle="currentObjectName + '近期面貌'"
                             style="z-index: 9999;"></theRecentAppearance>
        <!--影像弹窗-->
        <el-dialog :title="currentObjectName + '影像'" :visible.sync="imageShow" append-to-body
                   :close-on-click-modal="false" width="60%">
            <div style="height: 60vh;">
                <mapLocation ref="mapRef" v-if="imageShow" :gdX="centerX" :gdY="centerY"></mapLocation>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import inputWith from "@widget/inuptWith.vue"
    import request from "@util/gw_ajax_request.js"
    import theRecentAppearance from './recentAppearance.vue'
    import unlimitDatePicker from '@baseWidget/unLimitdatePicker.vue'
    import mapLocation from '../mapLocation'
    import {
        getrgstrIdObject1
    } from "@api/duChaTianBao.js"
    import {
        dateFormat
    } from "@util/gw_date.js"

    export default {
        components: {
            inputWith: inputWith,
            unlimitDatePicker: unlimitDatePicker,
            theRecentAppearance,
            mapLocation
        },
        props: ['currentObjectRgstrId', 'currentResCode', 'currentObjectId', 'currentObjectName'],

        data() {
            return {
                formObj: {
                    prjId: "",//工程项目ID ,
                    prjName: "",//工程项目名称 ,
                    rvName: "",//所在河流 ,
                    adCode: "",//行政区编码 ,
                    adName: "",//行政区域描述 ,
                    addr: "",//所在位置详细描述信息 ,
                    centerX: "",//PC经度 ,
                    centerY: "",//PC纬度 ,
                    gdX: "",//高德经度 ,
                    gdY: "",//高德纬度 ,
                    smrmpState: "",//中小河流治理项目抽查情况填报状态(0:未填报;1:填报中;2:已填报) ,
                    state: "",//督查状态(0:未督查;2:督查中;3:已督查) ,
                    groupLeader: "",//小组组长 ,
                    groupLeaderTel: "",//小组组长电话 ,
                    recPersId: "",//记录人员ID ,
                    recPers: "",//记录人员名称 ,
                    recPersTel: "",//记录人员电话 ,
                    pgi: "",//规划总投资
                    rvLong: ""//规划河长
                },
                rules: {
                    utName: [
                        {required: true, message: '请输入用水单位名称', trigger: 'blur'},
                    ],
                    utType: [
                        {required: true, message: '请选择单位类型', trigger: 'change'}
                    ],
                },
                dialogFormVisible: false,
                formLabelWidth: '160px',
                loading: true,
                operationType1: '',
                currentResCode1: '',
                currentObjectId1: '',
                value1: '',
                provList: [],
                cityList: [],
                countryList: [],
                provName: '',
                cityName: '',
                countryName: '',
                provNames: '',
                cityNames: '',
                countryNames: '',
                curSelectItem: 0,
                showLocSelect: false,
                locat: {
                    location: "",
                    admDiv: ""
                },
                xcztShow: false,
                imageShow: false,
                xcztEngId: '',
                centerX: 0,
                centerY: 0,
                gcType: [],
                saveLoading: false
            }
        },
        computed: {
            recPersId() {
                return localStorage.getItem("userid") ? localStorage.getItem("userid") : ''
            }
        },
        mounted() {
            this.currentResCode1 = this.currentResCode;
            this.currentObjectId1 = this.currentObjectId;
            this.getRgstridObj();
            this.getAreaList()
        },
        watch: {
            currentObjectRgstrId(n, o) {
                this.getRgstridObj();
            },
            showLocSelect(val) {
                if (!val) {
                    this.provName = ''
                    this.cityName = ''
                    this.countryName = ''
                }
            }
        },
        methods: {
            getRgstridObj() {
                var _self = this;
                request.get(`/bis/insp/samrmp/rgstr/${_self.currentObjectRgstrId}`).then(res => {
                    _self.formObj = res.data;
                    this.centerX = _self.formObj.gdX;
                    this.centerY = _self.formObj.gdY;
                })
            },
            addHandler(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var _self = this;
                        _self.formObj['persId'] = _self.recPersId;
                        _self.formObj['rgstrId'] = _self.currentObjectRgstrId;
                        _self.formObj.objId = _self.currentObjectId1;
                        console.log(_self.formObj);
                        if (this.formObj.gdX || this.formObj.gdY) {
                            //基础信息纠错，经纬度修改粗略校验经度纬度整数部分的范围
                            if (this.formObj.gdX < 74 || this.formObj.gdX > 136) {
                                this.$message.error('经度的整数范围应在74-136之间，请重新填写！');
                                this.formObj.gdX = '';
                                return;
                            }
                            if (this.formObj.gdY < 4 || this.formObj.gdY > 54) {
                                this.$message.error('纬度的整数范围应在4-54之间，请重新填写！');
                                this.formObj.gdY = '';
                                return;
                            }
                        }
                        try {
                            this.$confirm('确认保存基础信息？', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(() => {
                                if (!this.saveLoading) {
                                    this.saveLoading = true
                                    request.post('/bis/insp/samrmp/rgstr', _self.formObj).then((res) => {
                                        if (res.success) {
                                            _self.$emit("addQuShuiKouSuccess");
                                            _self.showLocSelect = false
                                            _self.getRgstridObj()
                                            _self.$message.success("修改成功");
                                        } else {
                                            _self.$emit('cancelHandler');
                                        }
                                        this.saveLoading = false
                                    }).catch(err => {
                                        this.saveLoading = false
                                        this.$message.info(err)
                                    });
                                }
                            })

                        } catch (e) {

                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            cancelHandler() {
                this.$emit('cancelHandler');
            },
            getAreaList(val) {
                let areaParams = {
                    adName: "",
                    id: this.dczId,
                    pageNum: 1,
                    pageSize: 10000
                }
                let adCode = ''
                if (!val) {
                    adCode = '000000000000'
                } else {
                    adCode = val
                }
                this.formObj.adCode = adCode;
                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
                        }

                    }
                })
            },
            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
                    this.getAreaList(val)
                }
            },
            //  近期面貌
            recentAppearance() {
                this.xcztShow = true;
            },
            jqmmDialog() {
                this.xcztShow = false;
            },
            //影像
            imageClick() {
                if (!this.centerX && !this.centerY) {
                    this.$message.warning('暂无经纬度信息！');
                    return false;
                }
                this.imageShow = true;
            }
        },
    }
</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>