|
|
@@ -8,74 +8,87 @@
|
|
|
-->
|
|
|
<template>
|
|
|
<div class="alert-body__main_content">
|
|
|
- <div class="blockName">房屋编辑(<i>*</i>为必填)</div>
|
|
|
+ <div class="blockName" v-if="addEditState=='add'">房屋添加(<i>*</i>为必填)</div>
|
|
|
+ <div class="blockName" v-else>房屋编辑(<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-form-item label="社区名称" prop="communityId">
|
|
|
+ <!-- <el-input v-model="ruleForm.communityName"></el-input>-->
|
|
|
+ <el-select v-model="ruleForm.communityId" placeholder="请选择社区名称" @change="communityChoice">
|
|
|
+ <el-option v-for="(item,index) in communityList" :label="item.label" :value="item.id"></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-form-item label="单元">
|
|
|
+ <el-select v-model="ruleForm.unitName" placeholder="请选择单元" @change="unitChoice">
|
|
|
+ <el-option v-for="(item,index) in unitList" :label="item.label" :value="item.id"></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="房屋朝向">
|
|
|
- <div @click="addressQueryClick">
|
|
|
- <el-input v-model="ruleForm.orientation" suffix-icon="el-icon-location-outline"></el-input>
|
|
|
- </div>
|
|
|
+ <el-select v-model="ruleForm.orientationOfRoom" placeholder="请选择房屋朝向">
|
|
|
+ <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="ruleForm.houseType"></el-input>
|
|
|
+ <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>
|
|
|
</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-form-item label="楼栋" prop="buildingId">
|
|
|
+ <el-select v-model="ruleForm.buildingId" placeholder="请选择楼栋" @change="buildingChoice">
|
|
|
+ <el-option v-for="(item,index) in buildingList" :label="item.label" :value="item.id"></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-form-item label="楼层" prop="floorNumber">
|
|
|
+ <el-select v-model="ruleForm.floorNumber" placeholder="请选择楼层">
|
|
|
+ <el-option v-for="(item,index) in floorNumberList" :label="item.label" :value="item.id"></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-form-item label="房屋类型" prop="buildingType">
|
|
|
+ <el-select v-model="ruleForm.buildingType" 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.builtUpArea"></el-input>
|
|
|
+ <el-input v-model="ruleForm.buildingArea"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="公摊面积">
|
|
|
- <el-input v-model="ruleForm.sharedArea"></el-input>
|
|
|
+ <el-input v-model="ruleForm.publicArea"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="装修性质">
|
|
|
- <el-input v-model="ruleForm.decorationNature"></el-input>
|
|
|
+ <el-select v-model="ruleForm.decorateProperties" placeholder="请选择装修性质">
|
|
|
+ <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>
|
|
|
</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 type="textarea" :rows="4" v-model="ruleForm.remarks" maxlength="300">
|
|
|
</el-input>
|
|
|
- <span style="position:absolute;bottom:0;right:10px">{{ruleForm.remark.length}}/300</span>
|
|
|
+ <span style="position:absolute;bottom:0;right:10px">{{ruleForm.remarks.length}}/300</span>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -91,31 +104,43 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ communityList:[],//社区名称下拉列表
|
|
|
+ buildingList:[],//楼栋下拉选择列表
|
|
|
+ unitList:[],//单元下拉选择列表
|
|
|
+ // roomList:[],//房间号选择下拉列表
|
|
|
+ addEditState:'',
|
|
|
+ housingType:{//房屋户型，roomNumber为室，officeNumber为厅，guardNumber为卫
|
|
|
+ roomNumber:'',
|
|
|
+ officeNumber:'',
|
|
|
+ guardNumber:''
|
|
|
+ },
|
|
|
ruleForm: {
|
|
|
- communityName: '',//社区名称
|
|
|
- unit:'',//单元
|
|
|
- houseNumber:'',//房屋号
|
|
|
+ assetNumber: "",
|
|
|
+ buildingArea:'',//建筑面积
|
|
|
+ buildingId:'',//楼栋id
|
|
|
+ buildingType:'',//房屋类型
|
|
|
+ communityId:'',//社区id
|
|
|
+ decorateProperties:'',//装修性质
|
|
|
+ floorNumber:'',//单元楼层
|
|
|
+ housingType:'',//房屋户型
|
|
|
+ id: '',
|
|
|
+ orientationOfRoom:'',//房屋朝向
|
|
|
+ publicArea:'',//公摊面积
|
|
|
+ remarks:'',//备注
|
|
|
+ residentId:'',//业主id
|
|
|
+ roomNumber:'',//房屋号
|
|
|
+ unitName:'',//单元
|
|
|
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' }],
|
|
|
+ roomNumber:[{ required: true, message: '请输入房屋号', trigger: 'change' }],
|
|
|
+ buildingId:[{ required: true, message: '请输入楼栋', trigger: 'change' }],
|
|
|
+ floorNumber:[{ required: true, message: '请输入楼层', trigger: 'change' }],
|
|
|
+ buildingType:[{ required: true, message: '请输入房屋类型', trigger: 'change' }],
|
|
|
},
|
|
|
}
|
|
|
},
|
|
|
@@ -125,9 +150,53 @@
|
|
|
computed: {},
|
|
|
methods: {
|
|
|
submitForm(formName) {
|
|
|
+ let self=this;
|
|
|
+ let houseAddEditData=JSON.parse(sessionStorage.getItem('houseAddEdit'));
|
|
|
this.$refs[formName].validate((valid) => {
|
|
|
if (valid) {
|
|
|
- alert('submit!');
|
|
|
+ if(houseAddEditData.todo=="edit"){
|
|
|
+ this.ruleForm.id=houseAddEditData.id;
|
|
|
+ this.ruleForm.residentId='';
|
|
|
+ this.ruleForm.housingType=this.housingType.roomNumber+":"+this.housingType.officeNumber+":"+this.housingType.guardNumber;
|
|
|
+ this.$http.post('/sc-community-web/assets/house/update', this.ruleForm).then((res) => {
|
|
|
+ if(res.status==0){
|
|
|
+ this.$message({
|
|
|
+ message: '添加成功',
|
|
|
+ type: 'success'
|
|
|
+ });
|
|
|
+
|
|
|
+ setTimeout(function(){
|
|
|
+ self.$router.go(-1);//返回上一层
|
|
|
+ },5000)
|
|
|
+ }else{
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ this.ruleForm.id='';
|
|
|
+ this.ruleForm.residentId='';
|
|
|
+ this.ruleForm.housingType=this.housingType.roomNumber+":"+this.housingType.officeNumber+":"+this.housingType.guardNumber;
|
|
|
+ this.$http.post('/sc-community-web/assets/house/add', this.ruleForm).then((res) => {
|
|
|
+ if(res.status==0){
|
|
|
+ if(res.status==0){
|
|
|
+ this.$message({
|
|
|
+ message: '编辑成功',
|
|
|
+ type: 'success'
|
|
|
+ });
|
|
|
+
|
|
|
+ setTimeout(function(){
|
|
|
+ self.$router.go(-1);//返回上一层
|
|
|
+ },5000)
|
|
|
+ }else{
|
|
|
+
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
} else {
|
|
|
console.log('error submit!!');
|
|
|
return false;
|
|
|
@@ -160,25 +229,159 @@
|
|
|
})
|
|
|
.catch(_ => {});
|
|
|
},
|
|
|
- addressQueryClick(){
|
|
|
- this.mapPopUpStatus=true;
|
|
|
- }
|
|
|
|
|
|
+ //获取社区名称下拉列表
|
|
|
+ communityNameList(){
|
|
|
+ this.communityList=[];
|
|
|
+ let onOption='';
|
|
|
+ this.$http.get('/assets/community/list', {}).then((res) => {
|
|
|
+ res.data.map(res=>{
|
|
|
+ onOption={
|
|
|
+ label:res.communityName,
|
|
|
+ id:res.id
|
|
|
+ }
|
|
|
+ this.communityList.push(onOption)
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ communityChoice(e){
|
|
|
+ this.ruleForm.communityId=e;
|
|
|
+ this.buildingNameList();
|
|
|
+ },
|
|
|
+ //查询楼栋下拉列表
|
|
|
+ buildingNameList(){
|
|
|
+ this.buildingList=[];
|
|
|
+ let onOption='';
|
|
|
+ this.$http.post('/sc-community-web/assets/building/list/building', {"communityId": this.ruleForm.communityId}).then((res) => {
|
|
|
+ res.data.map(res=>{
|
|
|
+ onOption={
|
|
|
+ label:res.buildingName,
|
|
|
+ id:res.id
|
|
|
+ }
|
|
|
+ this.buildingList.push(onOption)
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ buildingChoice(e){
|
|
|
+ this.ruleForm.buildingId=e;
|
|
|
+ this.unitNameList();
|
|
|
+ },
|
|
|
+ unitNameList(){
|
|
|
+ this.unitList=[];
|
|
|
+ let onOption='';
|
|
|
+ this.$http.get('/sc-community-web/assets/building/house/find', {"id": this.ruleForm.buildingId}).then((res) => {
|
|
|
+ if(res.status==0){
|
|
|
+ if(res.data.buildingUnitList.length!=0){
|
|
|
+ res.data.buildingUnitList.map(resData=>{
|
|
|
+ onOption={
|
|
|
+ label:resData.unitName,
|
|
|
+ id:resData.unitName,
|
|
|
+ floorNumberList:resData.unitFloorList,
|
|
|
+ }
|
|
|
+ this.unitList.push(onOption)
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ this.unitList=[];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ unitChoice(e){
|
|
|
+ this.floorNumberList=[];
|
|
|
+ let onOption='';
|
|
|
+ this.unitList.map(res=>{
|
|
|
+ if(res.label==e){
|
|
|
+ if(res.floorNumberList.length!=0){
|
|
|
+ res.floorNumberList.map(resData=>{
|
|
|
+ console.log(resData)
|
|
|
+ onOption={
|
|
|
+ label:resData.floorNumber,
|
|
|
+ id:resData.floorNumber,
|
|
|
+ // roomList:resData.roomList,
|
|
|
+ }
|
|
|
+ this.floorNumberList.push(onOption)
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ this.floorNumberList=[]
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ //加载房间详情展示
|
|
|
+ houseAddEdit(){
|
|
|
+ let self=this;
|
|
|
+ let houseAddEditData=JSON.parse(sessionStorage.getItem('houseAddEdit'));
|
|
|
+ this.addEditState=houseAddEditData.todo;
|
|
|
+ if(houseAddEditData.todo=="edit"){
|
|
|
+ this.$http.get('/sc-community-web/assets/house/find/'+houseAddEditData.id, {}).then((res) => {
|
|
|
+ if(res.status==0){
|
|
|
+ this.ruleForm.communityId=res.data.communityId;
|
|
|
+ this.buildingNameList()
|
|
|
+ this.ruleForm.buildingId=res.data.buildingId;
|
|
|
+ this.unitNameList();
|
|
|
+ this.ruleForm.unitName=res.data.unitName;
|
|
|
+ setTimeout(function(){
|
|
|
+ self.unitChoice(res.data.unitName);
|
|
|
+ self.ruleForm.floorNumber=res.data.floorNumber;
|
|
|
+ self.floorNumberChoice(res.data.floorNumber);
|
|
|
+ },500)
|
|
|
+ self.ruleForm.roomNumber=res.data.roomNumber;
|
|
|
+ this.ruleForm.buildingType=res.data.buildingType;
|
|
|
+ this.ruleForm.useArea=res.data.useArea;
|
|
|
+ this.ruleForm.housingType=res.data.housingType;
|
|
|
+ var housingTypes=this.ruleForm.housingType.split(':');
|
|
|
+ this.housingType.roomNumber=housingTypes[0];
|
|
|
+ this.housingType.officeNumber=housingTypes[1];
|
|
|
+ this.housingType.guardNumber=housingTypes[2];
|
|
|
+ this.ruleForm.orientationOfRoom=res.data.orientationOfRoom;
|
|
|
+ this.ruleForm.buildingArea=res.data.buildingArea;
|
|
|
+ this.ruleForm.publicArea=res.data.publicArea;
|
|
|
+ this.ruleForm.decorateProperties=res.data.decorateProperties;
|
|
|
+ this.ruleForm.remarks=res.data.remarks;
|
|
|
+ }else{
|
|
|
+ this.ruleForm.communityId='';
|
|
|
+ this.ruleForm.buildingId='';
|
|
|
+ this.ruleForm.unitName='';
|
|
|
+ this.ruleForm.floorNumber='';
|
|
|
+ this.ruleForm.roomNumber='';
|
|
|
+ this.ruleForm.buildingType='';
|
|
|
+ this.ruleForm.useArea='';
|
|
|
+ this.ruleForm.housingType='';
|
|
|
+ this.housingType.roomNumber='';
|
|
|
+ this.housingType.officeNumber='';
|
|
|
+ this.housingType.guardNumber='';
|
|
|
+ this.ruleForm.orientationOfRoom='';
|
|
|
+ this.ruleForm.buildingArea='';
|
|
|
+ this.ruleForm.publicArea='';
|
|
|
+ this.ruleForm.decorateProperties='';
|
|
|
+ this.ruleForm.remarks='';
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
},
|
|
|
created() {
|
|
|
-
|
|
|
+ //获取社区名称下拉列表
|
|
|
+ this.communityNameList();
|
|
|
+ this.houseAddEdit();
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
<style lang='scss'>
|
|
|
.alert-body__main_content{
|
|
|
- .blockName{
|
|
|
- padding:20px;
|
|
|
- i{
|
|
|
- color:red;
|
|
|
- }
|
|
|
- }
|
|
|
+ .blockName{
|
|
|
+ padding:20px;
|
|
|
+ i{
|
|
|
+ color:red;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
</style>
|
wangfen