Project-Annex/operationSupport/src/views/assetManagement/housingManagement/saveEdits.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="130px">
            <div class="formContent">
                <div class="formContent-item">
                    <el-form-item label="社区名称" prop="communityId">
                        <el-select v-model="ruleForm.communityId" placeholder="请选择社区名称" class="width100">
                            <el-option
                                v-for="(item, index) in communityList"
                                :label="item.communityName"
                                :value="item.id"
                                :key="index"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="单元">
                        <el-select v-model="ruleForm.unitName" placeholder="请选择单元"  class="width100">
                            <el-option
                                v-for="(item, index) in unitList"
                                :label="item.unitName"
                                :value="item.unitName"
                                :key="index"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="房屋号" prop="roomNumber"  >
                        <el-input v-model="ruleForm.roomNumber"></el-input>
                    </el-form-item>
                    <el-form-item label="使用面积" >
                        <el-input v-model="ruleForm.useArea"></el-input>
                    </el-form-item>
                    <el-form-item label="房屋朝向">
                        <el-select v-model="ruleForm.orientationOfRoom" placeholder="请选择房屋朝向"  class="width100">
                            <el-option label="东" :value="1"></el-option>
                            <el-option label="南" :value="2"></el-option>
                            <el-option label="西" :value="3"></el-option>
                            <el-option label="北" :value="4"></el-option>
                            <el-option label="东南" :value="5"></el-option>
                            <el-option label="西南" :value="6"></el-option>
                            <el-option label="西北" :value="7"></el-option>
                            <el-option label="东北" :value="8"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="房屋户型">
                        <el-input v-model="housingType.roomNumber" style="width: 80px; margin-right: 10px"></el-input>室
                        <el-input v-model="housingType.officeNumber" style="width: 80px; margin: 0 10px"></el-input>厅
                        <el-input v-model="housingType.guardNumber" style="width: 80px; margin: 0 10px"></el-input>卫
                    </el-form-item>
                </div>
                <div class="formContent-item">
                    <el-form-item label="楼栋" prop="buildingId">
                        <el-select v-model="ruleForm.buildingId" placeholder="请选择楼栋"  class="width100">
                            <el-option
                                v-for="(item, index) in buildingList"
                                :label="item.buildingName"
                                :value="item.id"
                                :key="index"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="楼层" prop="floorNumber">
                        <el-select v-model="ruleForm.floorNumber" placeholder="请选择楼层"  class="width100">
                            <el-option
                                v-for="(item, index) in floorNumberList"
                                :label="item.floorNumber"
                                :value="item.floorNumber"
                                :key="index"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="房屋类型" prop="buildingType">
                        <el-select v-model="ruleForm.buildingType" disabled placeholder="请选择房屋类型"  class="width100">
                            <el-option label="住宅" :value="1"></el-option>
                            <el-option label="商用" :value="2"></el-option>
                        </el-select>
                    </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.publicArea"></el-input>
                    </el-form-item>
                    <el-form-item label="装修性质">
                        <el-select v-model="ruleForm.decorateProperties" placeholder="请选择装修性质"  class="width100">
                            <el-option label="毛胚" :value="1"></el-option>
                            <el-option label="简单装修" :value="2"></el-option>
                            <el-option label="中等装修" :value="3"></el-option>
                            <el-option label="精装修" :value="4"></el-option>
                            <el-option label="豪华装修" :value="5"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </div>
            <el-row>
                <el-col :span="24">
                    <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" v-if="ruleForm.remarks"
                            >{{ ruleForm.remarks.length }}/300</span
                        >
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div style="text-align: right">
            <el-button @click="cancelSaving">取消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        params: {
            type: Object
        },
        isAdd: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            buildingList: [], //楼栋下拉选择列表
            unitList: [], //单元下拉选择列表
            addEditState: '',
            housingType: {
                //房屋户型，roomNumber为室，officeNumber为厅，guardNumber为卫
                roomNumber: '',
                officeNumber: '',
                guardNumber: ''
            },
            ruleForm: {
                communityId: '', //社区id
                buildingId: '', //楼栋id
                unitName: '', //单元
                floorNumber: '', //单元楼层
                roomNumber: '', //房屋号
                buildingType: 1, //房屋类型
                useArea: '', //使用面积
                buildingArea: '', //建筑面积
                orientationOfRoom: '', //房屋朝向
                publicArea: '', //公摊面积
                housingType: '', //房屋户型
                decorateProperties: '', //装修性质
                remarks: '' //备注
            },
            rules: {
                communityId: [this.$valid.selectRequired('请选择社区')],
                roomNumber: [{ required: true, message: '请输入房屋号', trigger: 'change' }],
                buildingId: [this.$valid.selectRequired('请选择楼栋')],
                floorNumber: [this.$valid.selectRequired('请选择楼层')],
                buildingType: [this.$valid.selectRequired('请选择房屋类型')]
            }
        };
    },
    components: {},

    computed: {
        communityList() {
            return this.$store.getters['getCommunityArray'];
        }
    },
    watch: {
        'ruleForm.communityId'(newValue, oldValue) {
            if (newValue !== oldValue) {
                this.buildingNameList();
                // this.ruleForm.buildingId = '';
                // this.ruleForm.unitName = '';
                // this.ruleForm.floorNumber = '';
            }
        },
        'ruleForm.buildingId'(newValue, oldValue) {
            if (newValue !== oldValue) {
                this.unitNameList();
                // this.ruleForm.unitName = '';
                // this.ruleForm.floorNumber = '';
            }
        },
        'ruleForm.unitName'(newValue, oldValue) {
            if (newValue !== oldValue) {
                this.unitChoice(newValue);
                // this.ruleForm.floorNumber = '';
            }
        },
        unitList(val) {
            if (val.length !== 0) {
                this.unitChoice(this.ruleForm.unitName);
            }
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.ruleForm.housingType =
                        this.housingType.roomNumber + ':' + this.housingType.officeNumber + ':' + this.housingType.guardNumber;
                    let url = '/sc-community/assets/house/add';
                    if (!this.isAdd) {
                        url = '/sc-community/assets/house/update';
                    }
                    this.$http
                        .post(url, this.ruleForm)
                        .then(({ status, msg }) => {
                            if (status == 0) {
                                this.$message.success(msg);
                                this.cancelSaving();
                            } else {
                                this.$message.error(msg);
                            }
                        })
                        .catch(() => {});
                }
            });
        },
        cancelSaving() {
            this.$emit('clerOwnerStatus');
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },

        //查询楼栋下拉列表
        buildingNameList() {
            this.buildingList = [];
            this.$http
                .post('/sc-community/assets/building/list/building', { communityId: this.ruleForm.communityId })
                .then(({ data, status, msg }) => {
                    if (0 === status) {
                        this.buildingList = data;
                    }
                });
        },
        unitNameList() {
            this.unitList = [];
            this.$http.get('/sc-community/assets/building/house/find', { id: this.ruleForm.buildingId }).then((res) => {
                if (res.status == 0) {
                    if (res.data.buildingUnitList.length != 0) {
                        this.unitList = res.data.buildingUnitList;
                    }
                }
            });
        },

        unitChoice(e) {
            this.floorNumberList = [];
            this.unitList.map((item) => {
                if (item.unitName == e) {
                    this.floorNumberList = item.unitFloorList;
                }
            });
        },

        getDetails(id) {
            this.$http.get('/sc-community/assets/house/find/' + id, {}).then((res) => {
                if (res.status == 0) {
                    this.ruleForm = res.data;
                    if (!!this.ruleForm.housingType) {
                        var housingTypes = this.ruleForm.housingType.split(':');
                        this.housingType.roomNumber = housingTypes[0];
                        this.housingType.officeNumber = housingTypes[1];
                        this.housingType.guardNumber = housingTypes[2];
                    }
                }
            });
        }
    },
    created() {
        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;
    }
}
.formContent {
    display: flex;
    justify-content: space-between;
    .formContent-item {
        width: 49%;
    }
}
.show-required-icon-star {
    &:before {
        content: '*';
        color: #f56c6c;
    }
}
</style>