SmartCommunity/operationSupport/src/views/parkingLotAdministration/pageJump/zoneAddEdit.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="24">
                        <el-form-item label="车库名称" prop="garageId">
                            <el-select v-model="ruleForm.garageId" placeholder="请选择车库名称">
                                <el-option
                                    v-for="(item, index) in garageList"
                                    :label="item.label"
                                    :value="item.id"
                                    :key="index"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="分区名称" prop="areaName">
                            <el-input v-model="ruleForm.areaName"></el-input>
                        </el-form-item>
                        <el-form-item label="车位数量" prop="parkingNumber">
                            <el-input v-model="ruleForm.parkingNumber"></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.remarks.length }}/300</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>
<script>
export default {
    props: ['params'],
    data() {
        return {
            garageList: [], //车库名称下拉列表
            ruleForm: {
                garageId: '', //车库名称
                areaName: '', //分区名称
                parkingNumber: '', //车位数量
                remarks: '', //备注
                communityId: this.params.data.communityId
            },
            rules: {
                garageId: [{ required: true, message: '请输入车库名称', trigger: 'change' }],
                areaName: [{ required: true, message: '请输入分区名称', trigger: 'change' }],
                parkingNumber: [{ required: true, message: '请输入车位数量', trigger: 'change' }]
            },
            radio: '1'
        };
    },
    components: {},
    computed: {},
    methods: {
        //获取车库名称下拉列表
        garageNameList() {
            this.garageList = [];
            let onOption = '';
            this.$http.post('/sc-community/assets/garage/list', { communityId: sessionStorage.getItem('communityId') }).then((res) => {
                res.data.map((res) => {
                    onOption = {
                        label: res.garageName,
                        id: res.id
                    };
                    this.garageList.push(onOption);
                });
            });
        },
        submit() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    var loading = this.$loading();
                    let url = '/sc-community/assets/garage/area/add';
                    if (this.params.todo == 'edit') {
                        url = '/sc-community/assets/garage/area/update';
                    }
                    this.$http
                        .post(url, this.ruleForm)
                        .then(({ status, msg }) => {
                            if (status == 0) {
                                this.$message.success(msg);
                                this.params.callback();
                                this.$emit('close');
                            } else {
                                this.$message.error(msg);
                            }
                            loading.close();
                        })
                        .catch(() => {
                            loading.close();
                        });
                } 
            });
        }
    },
    created() {
        this.garageNameList();
        if (this.params.todo == 'edit') {
            this.ruleForm = this.params.data;
        }
        this.ruleForm.communityId = this.params.data.communityId;
    }
};
</script>
<style lang='scss'>
.alert-body__main_content {
    .blockName {
        padding: 20px;
        i {
            color: red;
        }
    }
}
</style>