Project-Annex/operationSupport/src/views/assetManagement/shopManagement/saveEdits.vue

<template>
    <div class="main">
        <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="请选择社区名称">
                            <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="请选择单元">
                            <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.assetNumber"></el-input>
                    </el-form-item>
                    <el-form-item label="使用面积">
                        <el-input v-model="ruleForm.useArea"></el-input>
                    </el-form-item>
                </div>
                <div class="formContent-item">
                    <el-form-item label="楼栋" prop="buildingId">
                        <el-select v-model="ruleForm.buildingId" placeholder="请选择楼栋">
                            <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="请选择楼层">
                            <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="请选择房屋类型">
                            <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>
                </div>
            </div>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="备注信息">
                        <el-input
                            type="textarea"
                            resize="none"
                            :rows="3"
                            v-model="ruleForm.remarks"
                            maxlength="300"
                            show-word-limit
                            placeholder="请输入备注信息"
                        >
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <!-- <div style="text-align: right">
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="cancelSaving">取消</el-button>
        </div> -->
    </div>
</template>
<script>
export default {
    props: ['params'],
    data() {
        return {
            buildingList: [], //楼栋下拉选择列表
            unitList: [], //单元下拉选择列表
            addEditState: '',
            ruleForm: {
                communityId: '', //社区id
                buildingId: '', //楼栋id
                unitName: '', //单元
                floorNumber: '', //单元楼层
                roomNumber: '', //房屋号
                assetNumber: '', //编号
                buildingType: 2, //房屋类型
                useArea: '', //使用面积
                buildingArea: '', //建筑面积
                publicArea: '', //公摊面积
                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: {
        submit() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    let url = '/sc-community/assets/house/add';
                    if (this.params.todo == 'edit') {
                        url = '/sc-community/assets/house/update';
                    }
                    this.$http
                        .post(url, this.ruleForm)
                        .then(({ status, msg }) => {
                            if (status == 0) {
                                this.$message.success(msg);
                                this.params.callback();
                                this.$emit('close');
                                if (this.$route.query.showDialog) {
                                    this.$router.replace('/workbench/index');
                                }
                            } 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;
                }
            });
        }
    },
    created() {
        if (!!this.params.data.id) {
            this.getDetails(this.params.data.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>