SmartCommunity/operationSupport/src/views/communityManagement/pageJump/AddOrEdit.vue

<!--
 * @Author: zouwenying
 * @Date: 2020-10-27 09:51:50
 * @LastEditTime: 2021-04-19 09:27:00
 * @LastEditors: zwy
 * @Description: In User Settings Edit
 * @FilePath: \UMIS\src\views\system\dictionarys\popups\AddOrEdit.vue
-->
<template>
    <div class="alert-body__main_content">
        <div class="blockName">新增社区</div>
        <div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
                <el-row>
                    <el-col :span="12">
                        <div class=""><i></i>新增信息</div>
                        <el-form-item label="社区名称" prop="communityName">
                            <el-input v-model="ruleForm.communityName"></el-input>
                        </el-form-item>
                        <el-form-item label="所在地区" prop="region">
                            <el-select v-model="ruleForm.regionId" placeholder="请选择地区">
                                <el-option v-for="(item,index) in ruleForm.locationList" :label="item.label" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="所属公司" required>
                            <el-select v-model="ruleForm.companyOrgId" placeholder="请选择公司">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="所属部门" prop="delivery">
                            <el-select v-model="ruleForm.deptOrgId" placeholder="请选择部门">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="详细地址" prop="type">
                            <div @click="addressQueryClick">
                                <el-input v-model="ruleForm.address" suffix-icon="el-icon-location-outline"></el-input>
                            </div>
                        </el-form-item>
                        <el-form-item label="占地面积">
                            <el-input v-model="ruleForm.coveredArea"></el-input>
                        </el-form-item>
                        <el-form-item label="建筑面积">
                            <el-input v-model="ruleForm.buildingArea"></el-input>
                        </el-form-item>
                        <el-form-item label="商业面积">
                            <el-input v-model="ruleForm.commercialArea"></el-input>
                        </el-form-item>
                        <el-form-item label="住宅面积">
                            <el-input v-model="ruleForm.dwellingArea"></el-input>
                        </el-form-item>
                        <el-form-item label="绿化面积">
                            <el-input v-model="ruleForm.greenArea"></el-input>
                        </el-form-item>
                        <el-form-item label="车位面积">
                            <el-input v-model="ruleForm.parkingArea"></el-input>
                        </el-form-item>
                        <el-form-item label="社区图片">
                            <el-upload
                                    class="avatar-uploader"
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <div>负责人</div>
                        <el-form-item label="负责人姓名" prop="name">
                            <el-input v-model="ruleForm.contactPerson"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号码" prop="phoneNumber">
                            <el-input v-model="ruleForm.phone"></el-input>
                        </el-form-item>
                        <el-form-item label="固定电话">
                            <el-input v-model="ruleForm.telephone"></el-input>
                        </el-form-item>
                        <el-form-item label="备注信息">
                            <el-input type="textarea" :rows="4" v-model="ruleForm.remarks" maxlength="300">
                            </el-input>
                            <span style="position:absolute;bottom:0;right:10px">{{ruleForm.remark.length}}/300</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div style="text-align: right;">
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button>取消</el-button>
        </div>


        <!--地图详情地址弹出框-->
        <map-popup :mapPopUpStatus="mapPopUpStatus"></map-popup>
    </div>
</template>
<script>
    import MapPopup from '@/components/mapPopup/index.vue'
export default {
    data() {
        return {
            ruleForm: {
                communityName: '',
                locationList:[],
                regionId:100000,//所在地区
                companyOrgList:[],
                companyOrgId:2,//所属公司
                deptOrgId:1,//所属部门
                coveredArea:'',//占地面积
                buildingArea:'',//建筑面积
                commercialArea:'',//商业面积
                dwellingArea:'',//住宅面积
                greenArea:'',//绿化面积
                parkingArea:'',//车位面积
                contactPerson:'',//负责人
                phone:'',//负责人手机号
                telephone:'',//固定电话
                address:'',//详细地址
                region: '',
                delivery: false,
                type: [],
                resource: '',
                desc: '',
                remark:'',//备注
            },
            rules: {
                communityName: [
                    { required: true, message: '请输入社区名称', trigger: 'change' },
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '请选择地区', trigger: 'blur' },
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                phoneNumber:[
                    { required: true, message: '请输入手机号码', trigger: 'change' }
                ],
                date1: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                date2: [
                    { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                ],
                type: [
                    { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                ],
                resource: [
                    { required: true, message: '请选择活动资源', trigger: 'change' }
                ],
                desc: [
                    { required: true, message: '请填写活动形式', trigger: 'blur' }
                ]
            },
            mapPopUpStatus:false,//地图弹出框
        }
    },
    components:{
        MapPopup
    },
    computed: {},
    methods: {

        //保存
        submit() {
            let submitData='';
            if(this.$route.query.newEditType=="edit"){
                let communityInformation=JSON.parse(sessionStorage.getItem('communityInformation'))
                submitData={
                    "address": this.ruleForm.address,
                    "buildingArea": this.ruleForm.buildingArea,
                    "cityId": 440300,
                    "commercialArea": this.ruleForm.commercialArea,
                    "communityName": this.ruleForm.communityName,
                    "companyOrgId": 0,
                    "contactPerson": this.ruleForm.contactPerson,
                    "coveredArea": this.ruleForm.coveredArea,
                    "deptOrgId": 461,
                    "dwellingArea": this.ruleForm.dwellingArea,
                    "greenArea": this.ruleForm.greenArea,
                    "id": communityInformation.id,
                    'latitude':'1',
                    'longitude':'2',
                    "parkingArea": this.ruleForm.parkingArea,
                    "phone": this.ruleForm.phone,
                    "pictureUrl": "",
                    "provinceId": 440000,
                    "regionId": this.ruleForm.regionId,
                    "remarks": "",
                    "telephone": this.ruleForm.telephone
                }
                this.$http.post('/sc-community/assets/community/update', submitData).then((data) => {
                    // this.deviceOptions = data;
                    let locationObj='';
                    data.map(resData=>{
                        locationObj={
                            label:resData.name,
                            id:resData.pid,
                        }
                        self.ruleForm.locationList.push(locationObj)

                    })
                });
            }else{
                submitData={
                    "address": this.ruleForm.address,
                    "buildingArea": this.ruleForm.buildingArea,
                    "cityId": 440300,
                    "commercialArea": 0,
                    "communityName": this.ruleForm.communityName,
                    "companyOrgId": 0,
                    "contactPerson": this.ruleForm.contactPerson,
                    "coveredArea": this.ruleForm.coveredArea,
                    "deptOrgId": 461,
                    "dwellingArea": this.ruleForm.dwellingArea,
                    "greenArea": this.ruleForm.greenArea,
                    "id": 0,
                    'latitude':'1',
                    'longitude':'2',
                    "parkingArea": this.ruleForm.parkingArea,
                    "phone": this.ruleForm.phone,
                    "pictureUrl": "",
                    "provinceId": 440000,
                    "regionId": this.ruleForm.regionId,
                    "remarks": "",
                    "telephone": this.ruleForm.telephone
                }
                this.$http.post('/sc-community/assets/community/add', submitData).then((data) => {
                    // this.deviceOptions = data;
                    let locationObj='';
                    data.map(resData=>{
                        locationObj={
                            label:resData.name,
                            id:resData.pid,
                        }
                        self.ruleForm.locationList.push(locationObj)

                    })
                });
            }

        },

        //所属地区
        regionalQuery(){
            let self=this;
            this.$http.postForm('/sc-user-center/area/selectAll', {id:123}).then(({ data }) => {
                // this.deviceOptions = data;
                let locationObj='';
                data.map(resData=>{
                    locationObj={
                        label:resData.name,
                        id:resData.pid,
                    }
                    self.ruleForm.locationList.push(locationObj)

                })
            });
        },

        //所属公司
        companyQuery(){
            let self=this;
            this.$http.postForm('/sc-user-center/org/getOrgUserTree', {orgType:'company',id:'000'}).then(({ data }) => {
                console.log(data,'+++++++++++++++++++++++++++++++')
            });
        },

        //所属部门
        departmentQuery(){
            let self=this;
            this.$http.postForm('/sc-user-center/org/getOrgUserTree', {orgType:'department',id:'460'}).then(({ data }) => {
                console.log(data,'+++++++++++++++++++++++++++++++')
            });
        },


        resetForm(formName) {
            this.$refs[formName].resetFields();
        },

        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        coordinateClick(){
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
        },
        addressQueryClick(){
            this.mapPopUpStatus=true;
        }


    },
    created() {
        let self=this;
       this.regionalQuery();
       this.companyQuery();
       this.departmentQuery();
        if(self.$route.query.newEditType=="edit"){
            let communityInformation=JSON.parse(sessionStorage.getItem('communityInformation'))
            // this.ruleForm={
            //     "communityName":communityInformation.communityName,
            //     "locationId":communityInformation.regionId,
            //     "coveredArea":communityInformation.coveredArea,
            // }
            this.ruleForm.address=communityInformation.address;
            this.ruleForm.communityName=communityInformation.communityName;
            this.ruleForm.regionId=communityInformation.regionId;
            this.ruleForm.coveredArea=communityInformation.coveredArea;
            this.ruleForm.contactPerson=communityInformation.contactPerson;
            this.ruleForm.buildingArea=communityInformation.buildingArea;
            this.ruleForm.commercialArea=communityInformation.commercialArea;
            this.ruleForm.dwellingArea=communityInformation.dwellingArea;
            this.ruleForm.greenArea=communityInformation.greenArea;
            this.ruleForm.parkingArea=communityInformation.parkingArea;
            this.ruleForm.phone=communityInformation.phone;
            this.ruleForm.telephone=communityInformation.telephone;


        }else{

        }
    }
};
</script>
<style lang='scss'>
.alert-body__main_content{
   .blockName{
       padding:20px;
   }

}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>