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

<template>
    <div class="main">
        <div class="blockName">{{ !isAdd ? '编辑' : '新增' }}社区（<span class="show-required-icon-star"></span>为必填项）</div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="formContent">
            <div class="formContent-item">
                <div class="formContent-item_title">基础信息</div>
                <el-form-item label="社区名称" prop="communityName">
                    <el-input v-model="ruleForm.communityName"></el-input>
                </el-form-item>
                <el-form-item label="所在地区" prop="regionId">
                    <el-cascader
                        v-model="regionId"
                        :options="locationList"
                        class="width100"
                        placeholder="请选择区域"
                        :props="{ label: 'name', value: 'code' }"
                        @change="productChange($event)"
                    ></el-cascader>
                </el-form-item>
                <el-form-item label="所属公司" prop="companyOrgId">
                    <select-tree
                        class="new-select-tree"
                        selectTreeTitle="请选择公司"
                        placeholder="请选择公司"
                        :options="companyArray"
                        :props="defaultProps"
                        v-model="ruleForm.companyOrgId"
                    />
                </el-form-item>
                <!-- <el-form-item label="所属部门">
                    <select-tree
                        class="new-select-tree"
                        placeholder="请选择部门"
                        :options="departmentArray"
                        selectTreeTitle="请选择部门"
                        :props="defaultProps"
                        v-model="ruleForm.deptOrgId"
                    />
                </el-form-item> -->
                <el-form-item label="详细地址" prop="address">
                    <el-input v-model="ruleForm.address">
                        <i slot="suffix" class="zoniot_font zoniot-icon-dizhi" @click="addressQueryClick"></i>
                    </el-input>
                </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="社区图片">
                    <div class="clickUpload">
                        <div class="clickUpText">
                            <img class="dataImg" v-if="!!ruleForm.pictureUrl" :src="ruleForm.pictureUrl" />
                            <template v-else>
                                <div class="addImg"><i class="el-icon-plus"></i></div>
                            </template>
                        </div>
                        <el-upload
                            v-if="!islooks"
                            :headers="token"
                            ref="uploaduserlogo"
                            limit="1"
                            action="/sc-community/upload/uploadFile"
                            :on-success="uploadsuccess"
                            :before-upload="beforeAvatarUpload"
                            :auto-upload="true"
                            name="file"
                        >
                        </el-upload>
                    </div>
                </el-form-item>
            </div>
            <div class="formContent-item">
                <div class="formContent-item_title">负责人</div>
                <el-form-item label="负责人姓名" prop="contactPerson">
                    <el-input v-model="ruleForm.contactPerson"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="phone">
                    <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" show-word-limit> </el-input>
                </el-form-item>
            </div>
        </el-form>
        <div style="text-align: right">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="addEdit">保存</el-button>
        </div>

        <!--地图详情地址弹出框-->
        <el-dialog title="选择地址" :append-to-body="true" :visible.sync="mapPopUpStatus" width="600px">
            <map-popup @getDot="getDot"></map-popup>
        </el-dialog>
    </div>
</template>
<script>
import MapPopup from '@/components/mapPopup/index.vue';
export default {
    props: {
        params: {
            type: Object
        },
        isAdd: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            regionId: '',
            locationList: [], //地区列表
            ruleForm: {
                address: '', //详细地址
                buildingArea: '', //建筑面积
                cityId: '', //城市id
                commercialArea: '', //商业面积
                communityName: '', //社区名称
                companyOrgId: '', //所属公司
                contactPerson: '', //负责人
                coveredArea: '', //占地面积
                // deptOrgId: '', //所属部门
                dwellingArea: '', //住宅面积
                greenArea: '', //绿化面积
                id: '',
                latitude: '', //纬度
                longitude: '', //经度
                parkingArea: '', //车位面积
                phone: '', //负责人手机号
                pictureUrl: '', //社区图片
                provinceId: '',
                regionId: '', //所在地区
                remarks: '', //备注
                telephone: ''
            },
            token: {
                [localStorage.getItem('SC_token') && 'Authorization']: 'Bearer ' + localStorage.getItem('SC_token')
            },
            defaultProps: {
                value: 'id', // 唯一标识
                label: 'orgName', // 标签显示
                children: 'orgs' // 子级
            },
            rules: {
                communityName: [this.$valid.inputRequired('社区名称')],
                address: [this.$valid.selectRequired('地址')],
                regionId: [this.$valid.selectRequired('地区')],
                companyOrgId: [this.$valid.selectRequired('公司')],
                phone: [
                    this.$valid.inputRequired('手机号'),
                    this.$valid.pattern(
                        /^((0\d{2,3}-\d{7,8})|((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|147)\d{8})$/
                    )
                ],
                contactPerson: [this.$valid.inputRequired('负责人姓名')]
            },
            mapPopUpStatus: false //地图弹出框
        };
    },
    components: {
        MapPopup
    },
    computed: {
        companyArray() {
            return this.$store.getters['getCompanyArray'];
        },
        departmentArray() {
            return this.$store.getters['getDepartmentArray'];
        }
    },
    methods: {
        productChange(va) {
            this.ruleForm.provinceId = va[0];
            this.ruleForm.cityId = va[1];
            this.ruleForm.regionId = _.last(va);
        },
        // productChange2(va) {
        //     this.ruleForm.companyOrgId = _.last(va);
        // },
        // productChange3(va) {
        //     this.ruleForm.deptOrgId = _.last(va);
        // },
        getDot(item) {
            this.ruleForm.address = item.cityname + item.adname + item.address;
            this.ruleForm.latitude = item.location.lat;
            this.ruleForm.longitude = item.location.lng;
            this.mapPopUpStatus = !this.mapPopUpStatus;
        },
        //保存
        addEdit() {
            this.$refs.ruleForm.validate((valid) => {
                console.log(this.ruleForm);
                if (valid) {
                    let url = '/sc-community/assets/community/add';
                    let params = this.ruleForm;
                    if (!this.isAdd) {
                        url = '/sc-community/assets/community/update';
                    }
                    this.$http
                        .post(url, params)
                        .then(({ status, msg }) => {
                            if (status == 0) {
                                this.$message.success(msg);
                                this.close();
                            } else {
                                this.$message.error(msg);
                            }
                        })
                        .catch(() => {});
                }
            });
        },

        //所属地区
        regionalQuery() {
            this.$http.postForm('/sc-user-center/area/selectAll', { id: 123 }).then(({ status, data, msg }) => {
                if (status === 0 && data) {
                    this.locationList = data;
                }
            });
        },

        uploadsuccess(response, file, fileList) {
            this.$refs.uploaduserlogo.clearFiles();
            if (0 === response.status) {
                this.ruleForm.pictureUrl = response.data;
            }
        },
        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;
        },
        addressQueryClick() {
            this.mapPopUpStatus = true;
        },
        getDetails(id) {
            let url = '/sc-community/assets/community/find/' + id;
            this.$http
                .get(url)
                .then(({ data, status, msg }) => {
                    if (0 === status) {
                        this.ruleForm = data;
                        this.regionId = [data.provinceId, data.cityId, data.regionId];
                        // this.companyOrgId = [null, null, data.companyOrgId];
                        // this.deptOrgId = [null, null, data.deptOrgId];
                    } else {
                        this.$message.error(msg);
                    }
                })
                .catch(() => {});
        },
        close() {
            this.$emit('clerOwnerStatus');
        }
    },
    created() {
        this.regionalQuery();

        if (!!this.params.id) {
            this.getDetails(this.params.id);
        }
    }
};
</script>
<style lang='scss' scoped>
@import '@assets/css/public-style.scss';
.main {
    padding: 20px;
    background: white;
    .blockName {
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #e0e1e3;
    }
}
/deep/ .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    width: 200px;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.show-required-icon-star {
    &:before {
        content: '*';
        color: #f56c6c;
    }
}

.formContent {
    display: flex;
    justify-content: space-between;
    .formContent-item {
        width: 49%;
    }
}
// .formContent-item_title {
//     font-size: 14px;
//     position: relative;
//     margin-left: 14px;
//     margin-bottom: 20px;
//     &::before {
//         position: absolute;
//         left: -14px;
//         top: 4px;
//         width: 4px;
//         height: 12px;
//         border-radius: 2px;
//         display: block;
//         background: $mainBgColor;
//         content: ' ';
//     }
// }

.clickUpload {
    width: 72px;
    height: 72px;
    border-radius: 4px;
    border: 1px solid #e0e1e3;
    position: relative;
    z-index: 1000;
    text-align: center;
    overflow: hidden;
    font-size: 12px;
    cursor: pointer;
    color: #d8d8d8;
    .mini-upload {
        position: absolute;
        z-index: 0;
    }
}
.clickUpText {
    height: 100%;
    width: 100%;
    pointer-events: none;
    position: absolute;
    background: white;
    z-index: 1;
    img.dataImg {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .addImg {
        line-height: 72px;
        & > i {
            font-size: 30px;
        }
    }
}
</style>