Project-Annex/operationSupport/src/views/shopManagement/pageJump/saveEdits.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">房屋编辑(<i>*</i>为必填)</div>
        <div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="社区名称" prop="communityName">
                            <el-input v-model="ruleForm.communityName"></el-input>
                        </el-form-item>
                        <el-form-item label="单元" prop="unit">
                            <el-select v-model="ruleForm.unit" placeholder="请选择单元">
                                <el-option label="1单元" value="shanghai"></el-option>
                                <el-option label="2单元" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="房屋号" prop="houseNumber">
                            <el-select v-model="ruleForm.houseNumber" placeholder="请选择房屋号">
                                <el-option label="101" value="shanghai"></el-option>
                                <el-option label="102" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="使用面积">
                            <el-input v-model="ruleForm.useArea"></el-input>
                        </el-form-item>
                        <el-form-item label="房屋朝向">
                            <div @click="addressQueryClick">
                                <el-input v-model="ruleForm.orientation" suffix-icon="el-icon-location-outline"></el-input>
                            </div>
                        </el-form-item>
                        <el-form-item label="房屋户型">
                            <el-input v-model="ruleForm.houseType"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="楼栋" prop="buildingName">
                            <el-select v-model="ruleForm.buildingName" placeholder="请选择楼栋">
                                <el-option label="1栋" value="shanghai"></el-option>
                                <el-option label="2栋" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="楼层" prop="whatFloor">
                            <el-select v-model="ruleForm.whatFloor" placeholder="请选择楼层">
                                <el-option label="1F" value="shanghai"></el-option>
                                <el-option label="2F" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="房屋类型" prop="propertyType">
                            <el-select v-model="ruleForm.propertyType" placeholder="请选择房屋类型">
                                <el-option label="民房" value="shanghai"></el-option>
                                <el-option label="公寓" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="建筑面积">
                            <el-input v-model="ruleForm.builtUpArea"></el-input>
                        </el-form-item>
                        <el-form-item label="公摊面积">
                            <el-input v-model="ruleForm.sharedArea"></el-input>
                        </el-form-item>
                        <el-form-item label="装修性质">
                            <el-input v-model="ruleForm.decorationNature"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注信息">
                            <el-input type="textarea" :rows="4" v-model="ruleForm.remark" 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="submitForm('ruleForm')">提交</el-button>
            <el-button>取消</el-button>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                ruleForm: {
                    communityName: '',//社区名称
                    unit:'',//单元
                    houseNumber:'',//房屋号
                    useArea:'',//使用面积
                    orientation:'',//楼栋朝向
                    houseType:'',//房屋户型
                    buildingName:'',//楼栋,
                    whatFloor:'',//楼层
                    propertyType:'',//房屋类型
                    builtUpArea:'',//建筑面积
                    sharedArea:'',//公摊面积
                    decorationNature:'',//装修性质
                    remark:'',//备注
                },
                rules: {
                    communityName: [
                        { required: true, message: '请输入活动名称', trigger: 'change' },
                        // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    unit:[{ required: true, message: '请输入单元', trigger: 'change' }],
                    houseNumber:[{ required: true, message: '请输入房屋号', trigger: 'change' }],
                    buildingName:[{ required: true, message: '请输入楼栋', trigger: 'change' }],
                    whatFloor:[{ required: true, message: '请输入楼层', trigger: 'change' }],
                    propertyType:[{ required: true, message: '请输入房屋类型', trigger: 'change' }],
                },
            }
        },
        components:{

        },
        computed: {},
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            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() {

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

    }
</style>