Project-Annex/operationSupport/src/views/parkingLotAdministration/pageJump/parkingLotSaveEdits.vue

<template>
    <div class="alert-body__main_content">
        <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="车库区域">
                            <el-select v-model="ruleForm.garageArea" 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="prefixName">
                            <el-input v-model="ruleForm.prefixName"></el-input>
                        </el-form-item>
                        <el-form-item label="车位编号">
                            <el-input v-model="ruleForm.parkingSpaceNumber"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="车库名称" prop="garageName">
                            <el-select v-model="ruleForm.garageName" 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="parkingLotCategory">
                            <el-radio v-model="radio" label="1">公共车位</el-radio>
                            <el-radio v-model="radio" label="2">私人车位</el-radio>
                        </el-form-item>
                        <el-form-item label="车位面积">
                            <el-input v-model="ruleForm.useArea"></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>
</template>
<script>
    export default {
        data() {
            return {
                ruleForm: {
                    communityName: '',//社区名称
                    garageArea:'',//车位区域
                    prefixName:'',//前缀名称
                    parkingSpaceNumber:'',//车位编号
                    garageName:'',//车库名称
                    parkingLotCategory:'',//车位类别
                    remark:'',//备注
                },
                rules: {
                    communityName: [
                        { required: true, message: '请输入社区名称', trigger: 'change' },
                        // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    prefixName:[{ required: true, message: '请输入前缀名称', trigger: 'change' }],
                    garageName:[{ required: true, message: '请输入前缀名称', trigger: 'change' }],
                    parkingLotCategory:[{ required: true, message: '请输入前缀名称', trigger: 'change' }],
                },
                radio: '1',
            }
        },
        components:{

        },
        computed: {},
        methods: {
            submit() {
                this.$refs['ruleForm'].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>