|
|
@@ -4,76 +4,60 @@
|
|
|
ref="formData"
|
|
|
:model="formData"
|
|
|
:rules="rules"
|
|
|
- label-width="120px"
|
|
|
+ label-width="100px"
|
|
|
class="demo-ruleForm"
|
|
|
>
|
|
|
<div class="formContent-item_title">房屋信息</div>
|
|
|
<el-row>
|
|
|
- <el-col :span="8">
|
|
|
+ <el-col :span="10">
|
|
|
<el-form-item
|
|
|
label="招租房屋"
|
|
|
- prop="name"
|
|
|
- class="show-required-icon-star"
|
|
|
+ prop="houseId"
|
|
|
>
|
|
|
<el-cascader
|
|
|
- v-model="formData.name"
|
|
|
+ :props="props"
|
|
|
+ v-model="formData.houseId"
|
|
|
:options="informTypes"
|
|
|
@change="handleChange"
|
|
|
+ clearable
|
|
|
></el-cascader>
|
|
|
- <!-- <template> -->
|
|
|
- <!-- <el-select
|
|
|
- placeholder="请选择"
|
|
|
- v-model="formData.name"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="(item, index) in informTypes"
|
|
|
- :key="index"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- ></el-option>
|
|
|
- </el-select> -->
|
|
|
- <!-- </template> -->
|
|
|
-
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
<el-row
|
|
|
- :gutter="100"
|
|
|
+ :gutter="60"
|
|
|
class="ma_bot"
|
|
|
>
|
|
|
<el-col :span="24">
|
|
|
- <el-col :span="8">租售类型：{{this.rentSaleType}}</el-col>
|
|
|
- <el-col :span="8">房屋类型：{{this.houseType}}</el-col>
|
|
|
- <el-col :span="8">楼层：{{this.floor}}</el-col>
|
|
|
+ <el-col :span="8">租售类型：{{this.rentSaleType || '-'}}</el-col>
|
|
|
+ <el-col :span="8">房屋类型：{{this.houseType || '-'}}</el-col>
|
|
|
+ <el-col :span="8">楼层：{{this.floor || '-'}} 层</el-col>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<el-row
|
|
|
- :gutter="100"
|
|
|
+ :gutter="60"
|
|
|
class="ma_bot"
|
|
|
>
|
|
|
<el-col :span="24">
|
|
|
- <el-col :span="8">朝向：{{this.orientation}}</el-col>
|
|
|
- <el-col :span="8">户型：{{this.house}}</el-col>
|
|
|
- <el-col :span="8">建筑面积：{{this.builtArea}}㎡</el-col>
|
|
|
+ <el-col :span="8">朝向：{{this.orientation || '-'}}</el-col>
|
|
|
+ <el-col :span="8">户型：{{this.house || '-室-厅-卫'}}</el-col>
|
|
|
+ <el-col :span="8">建筑面积：{{this.builtArea || '-'}}㎡</el-col>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
<div class="formContent-item_title">房屋配置</div>
|
|
|
- <el-form-item
|
|
|
- label="房屋配置"
|
|
|
- class="show-required-icon-star"
|
|
|
- >
|
|
|
+ <el-form-item label="房屋配置">
|
|
|
<el-row>
|
|
|
<el-col
|
|
|
:span="6"
|
|
|
v-for="(item,index) in houseConfiguration"
|
|
|
:key="index"
|
|
|
>
|
|
|
- <el-checkbox-group v-model="formData.checkboxGroup1">
|
|
|
+ <el-checkbox-group v-model="formData.config">
|
|
|
<el-checkbox-button
|
|
|
- :label="item.value"
|
|
|
+ :label="item.label"
|
|
|
:key="item.value"
|
|
|
>{{item.label}}</el-checkbox-button>
|
|
|
</el-checkbox-group>
|
|
|
@@ -82,19 +66,16 @@
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
- <el-form-item
|
|
|
- label="房屋亮点"
|
|
|
- class="show-required-icon-star"
|
|
|
- >
|
|
|
+ <el-form-item label="房屋亮点">
|
|
|
<el-row>
|
|
|
<el-col
|
|
|
:span="6"
|
|
|
v-for="(item,index) in houseHighlights"
|
|
|
:key="index"
|
|
|
>
|
|
|
- <el-checkbox-group v-model="formData.checkboxGroup2">
|
|
|
+ <el-checkbox-group v-model="formData.highLights">
|
|
|
<el-checkbox-button
|
|
|
- :label="item.value"
|
|
|
+ :label="item.label"
|
|
|
:key="item.value"
|
|
|
>{{item.label}}</el-checkbox-button>
|
|
|
</el-checkbox-group>
|
|
|
@@ -103,19 +84,16 @@
|
|
|
</el-row>
|
|
|
</el-form-item>
|
|
|
|
|
|
- <el-form-item
|
|
|
- label="招租要求"
|
|
|
- class="show-required-icon-star"
|
|
|
- >
|
|
|
+ <el-form-item label="招租要求">
|
|
|
<el-row>
|
|
|
<el-col
|
|
|
:span="6"
|
|
|
v-for="(item,index) in rentalRequirements"
|
|
|
:key="index"
|
|
|
>
|
|
|
- <el-checkbox-group v-model="formData.checkboxGroup3">
|
|
|
+ <el-checkbox-group v-model="formData.requirement">
|
|
|
<el-checkbox-button
|
|
|
- :label="item.value"
|
|
|
+ :label="item.label"
|
|
|
:key="item.value"
|
|
|
>{{item.label}}</el-checkbox-button>
|
|
|
</el-checkbox-group>
|
|
|
@@ -127,13 +105,12 @@
|
|
|
<div class="formContent-item_title">招租信息</div>
|
|
|
<el-form-item
|
|
|
label="招租标题："
|
|
|
- prop="name"
|
|
|
- class="show-required-icon-star"
|
|
|
+ prop="title"
|
|
|
>
|
|
|
<el-col :span="24">
|
|
|
<el-input
|
|
|
placeholder="请输入招租标题"
|
|
|
- v-model="formData.name"
|
|
|
+ v-model="formData.title"
|
|
|
clearable
|
|
|
>
|
|
|
</el-input>
|
|
|
@@ -144,10 +121,9 @@
|
|
|
<el-col :span="8">
|
|
|
<el-form-item
|
|
|
label="租赁方式："
|
|
|
- prop="name"
|
|
|
- class="show-required-icon-star"
|
|
|
+ prop="leaseType"
|
|
|
>
|
|
|
- <el-radio-group v-model="formData.resource">
|
|
|
+ <el-radio-group v-model="formData.leaseType">
|
|
|
<el-radio label="1">整租</el-radio>
|
|
|
<el-radio label="2">合租</el-radio>
|
|
|
</el-radio-group>
|
|
|
@@ -156,27 +132,26 @@
|
|
|
<el-col :span="8">
|
|
|
<el-form-item
|
|
|
label="月租金额(元)："
|
|
|
- prop="name"
|
|
|
- class="show-required-icon-star"
|
|
|
+ prop="amount"
|
|
|
+ label-width="120px"
|
|
|
>
|
|
|
- <el-input v-model="formData.name"></el-input>
|
|
|
+ <el-input v-model="formData.amount"></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
<el-form-item
|
|
|
label="收租周期："
|
|
|
- :prop="this.formData.name1 != '' ? 'name2' :'name1'"
|
|
|
- class="show-required-icon-star"
|
|
|
+ :prop="this.formData.cyclePledge != '' ? 'cyclePress' :'cyclePledge'"
|
|
|
>
|
|
|
押
|
|
|
<el-input
|
|
|
- v-model="formData.name1"
|
|
|
+ v-model="formData.cyclePledge"
|
|
|
placeholder=""
|
|
|
style="width: 47px; margin-right: 5px;"
|
|
|
></el-input>
|
|
|
付
|
|
|
<el-input
|
|
|
- v-model="formData.name2"
|
|
|
+ v-model="formData.cyclePress"
|
|
|
placeholder=""
|
|
|
style="width: 47px; margin-right: 5px;"
|
|
|
></el-input>
|
|
|
@@ -187,8 +162,7 @@
|
|
|
<el-col :span="24">
|
|
|
<el-form-item
|
|
|
label="房屋图片："
|
|
|
- prop="businessLicense"
|
|
|
- class="show-required-icon-star"
|
|
|
+ prop="imageUrl"
|
|
|
>
|
|
|
<bz-upload-img
|
|
|
type="img"
|
|
|
@@ -201,8 +175,7 @@
|
|
|
<el-col :span="24">
|
|
|
<el-form-item
|
|
|
label="房屋视频："
|
|
|
- prop="businessLicensed"
|
|
|
- class="show-required-icon-star"
|
|
|
+ prop="videoUrl"
|
|
|
>
|
|
|
<bz-upload-img
|
|
|
type="video"
|
|
|
@@ -216,7 +189,7 @@
|
|
|
|
|
|
<el-form-item label="招商描述：">
|
|
|
<tinymce
|
|
|
- v-model="formData.description"
|
|
|
+ v-model="formData.introduce"
|
|
|
ref="endit"
|
|
|
:height="150"
|
|
|
/>
|
|
|
@@ -234,68 +207,99 @@
|
|
|
import Tinymce from '@/components/Tinymce';
|
|
|
export default {
|
|
|
components: { Tinymce },
|
|
|
+ props: ['params'],
|
|
|
data () {
|
|
|
return {
|
|
|
+ props: { value: 'value', label: 'name', children: 'children', },
|
|
|
token: {
|
|
|
[localStorage.getItem('CZC_token') && 'Authorization']: 'Bearer ' + localStorage.getItem('CZC_token')
|
|
|
},
|
|
|
formData: {
|
|
|
- name: '',
|
|
|
- checkboxGroup1: [],
|
|
|
- checkboxGroup2: [],
|
|
|
- checkboxGroup3: [],
|
|
|
- resource: '1',
|
|
|
- name1: '',
|
|
|
- name2: '',
|
|
|
- businessLicense: '',
|
|
|
- businessLicensed: '',
|
|
|
- description: ''
|
|
|
+ houseId: '',
|
|
|
+ config: [],
|
|
|
+ highLights: [],
|
|
|
+ requirement: [],
|
|
|
+ title: '',
|
|
|
+ leaseType: '1',
|
|
|
+ cycle: '',
|
|
|
+ cyclePledge: '',
|
|
|
+ cyclePress: '',
|
|
|
+ amount: '',
|
|
|
+ imageUrl: '',
|
|
|
+ videoUrl: '',
|
|
|
+ introduce: '',
|
|
|
+ residentId: ''
|
|
|
},
|
|
|
pictureArr: [],//房屋图片
|
|
|
pictureArred: [],//房屋视频
|
|
|
informTypes: [],//招租房屋
|
|
|
- rentSaleType: '可租',//租售类型
|
|
|
- houseType: '商业',//房屋类型
|
|
|
- floor: '2层/12层',//楼层
|
|
|
- orientation: '东南',//朝向
|
|
|
- house: '一室一厅一卫',//户型
|
|
|
- builtArea: '70',//建筑面积
|
|
|
+ rentSaleType: '',//租售类型
|
|
|
+ houseType: '',//房屋类型
|
|
|
+ floor: '',//楼层
|
|
|
+ orientation: '',//朝向
|
|
|
+ house: '',//户型
|
|
|
+ builtArea: '',//建筑面积
|
|
|
houseConfiguration: [],//房屋配置
|
|
|
houseHighlights: [],//房屋亮点
|
|
|
rentalRequirements: [],//招租要求
|
|
|
rules: {
|
|
|
- name: [
|
|
|
- { required: true, message: '请输入名称', trigger: 'blur' },
|
|
|
+ houseId: [
|
|
|
+ { required: true, message: '请选择招租房屋', trigger: 'change' },
|
|
|
+ ],
|
|
|
+
|
|
|
+ title: [
|
|
|
+ { required: true, message: '请输入招租标题', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ leaseType: [
|
|
|
+ { required: true, message: '请选择租赁方式', trigger: 'change' },
|
|
|
],
|
|
|
- name1: [
|
|
|
- { required: true, message: '请输入名称1', trigger: 'blur' },
|
|
|
+ amount: [
|
|
|
+ { required: true, message: '请输入月租金额', trigger: 'blur' },
|
|
|
],
|
|
|
- name2: [
|
|
|
- { required: true, message: '请输入名称2', trigger: 'blur' },
|
|
|
+ cyclePledge: [
|
|
|
+ { required: true, message: '请输入收租周期', trigger: 'blur' },
|
|
|
],
|
|
|
- businessLicense: [
|
|
|
- { required: true, message: '请选择活动区域', trigger: 'change' }
|
|
|
+ cyclePress: [
|
|
|
+ { required: true, message: '请输入收租周期', trigger: 'blur' },
|
|
|
],
|
|
|
- businessLicensed: [
|
|
|
- { required: true, message: '请选择活动区域', trigger: 'change' }
|
|
|
+ imageUrl: [
|
|
|
+ { required: true, message: '请选择图片', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ videoUrl: [
|
|
|
+ { required: true, message: '请选择视频', trigger: 'change' }
|
|
|
]
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
pictureArr (val) {
|
|
|
- this.formData.businessLicense = val.join();
|
|
|
+ this.formData.imageUrl = val.join();
|
|
|
},
|
|
|
pictureArred (val) {
|
|
|
- this.formData.businessLicensed = val.join();
|
|
|
+ this.formData.videoUrl = val.join();
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
-
|
|
|
submit () {
|
|
|
this.$refs.formData.validate((valid) => {
|
|
|
if (valid) {
|
|
|
-
|
|
|
+ this.formData.houseId = this.formData.houseId[this.formData.houseId.length - 1];
|
|
|
+ this.formData.config = this.formData.config.toString();
|
|
|
+ this.formData.highLights = this.formData.highLights.toString();
|
|
|
+ this.formData.requirement = this.formData.requirement.toString();
|
|
|
+ this.formData.cycle = this.formData.cyclePledge + ':' + this.formData.cyclePress;
|
|
|
+ let url;
|
|
|
+ url = '/czc-community/house/rent/out/add'
|
|
|
+ if (this.params.title == 'edit') {
|
|
|
+ url = '/czc-community/house/rent/out/update'
|
|
|
+ }
|
|
|
+ this.$http.post(url, this.formData).then(({ status, data, msg }) => {
|
|
|
+ if (status == 0) {
|
|
|
+ this.$emit('close');
|
|
|
+ this.params.callback()
|
|
|
+ this.$message.success(msg);
|
|
|
+ }
|
|
|
+ })
|
|
|
} else {
|
|
|
|
|
|
}
|
|
|
@@ -341,12 +345,86 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
handleChange (value) {
|
|
|
+ if (value.length != 0) {
|
|
|
+ this.$http.get('/czc-community/assets/house/find/' + value[value.length - 1]).then(({ status, data, msg }) => {
|
|
|
+ if (status == 0) {
|
|
|
+ this.formData.residentId = data.residentId;
|
|
|
+ this.rentSaleType = data.salesType == 1 ? '可租可售' : data.salesType == 2 ? '只租' : '只售';
|
|
|
+ this.houseType = data.buildingType == 1 ? '住宅' : '商用';
|
|
|
+ this.floor = data.floorNumber;
|
|
|
+ this.orientation = data.orientationOfRoom == 1 ? '东' : data.orientationOfRoom == 2 ? '南' : data.orientationOfRoom == 3 ? '西' : data.orientationOfRoom == 4 ? '北' : data.orientationOfRoom == 5 ? '东南' : data.orientationOfRoom == 6 ? '西南' : data.orientationOfRoom == 7 ? '西北' : '东北';
|
|
|
+ if (data.housingType != null) {
|
|
|
+ let housingTypes = data.housingType.split(':');
|
|
|
+ this.house = (housingTypes[0] == '' ? '-' : housingTypes[0]) + '室' + (housingTypes[1] == '' ? '-' : housingTypes[1]) + '厅' + (housingTypes[2] == '' ? '-' : housingTypes[2]) + '卫'
|
|
|
+ } else {
|
|
|
+ this.house = '';
|
|
|
+ }
|
|
|
+ this.builtArea = data.buildingArea == null ? '-' : data.buildingArea;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.rentSaleType = '';
|
|
|
+ this.houseType = '';
|
|
|
+ this.floor = '';
|
|
|
+ this.orientation = '';
|
|
|
+ this.house = '';
|
|
|
+ this.builtArea = '';
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ // 获取招租房屋
|
|
|
+ getOrgTreeList () {
|
|
|
+ this.$http.get('/czc-community/assets/tree/community/find', { buildingType: 1 }).then(({ status, data, msg }) => {
|
|
|
+ if (status == 0) {
|
|
|
+ this.informTypes = data;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ houseRentFind () {
|
|
|
+ this.$http.post(`/czc-community/house/rent/out/find/${this.params.data.rentOutId}`).then(({ status, data, msg }) => {
|
|
|
+ if (status == 0) {
|
|
|
+ // debugger
|
|
|
+ var dataHouseId = data.houseId;
|
|
|
+ this.formData = data;
|
|
|
+
|
|
|
+ this.formData.config = (data.config).split(',');
|
|
|
+ this.formData.highLights = (data.highLights).split(',');
|
|
|
+ this.formData.requirement = (data.requirement).split(',');
|
|
|
+
|
|
|
+ this.formData.cycle = (data.cycle).split(':');
|
|
|
+ this.formData.cyclePledge = this.formData.cycle[0];
|
|
|
+ this.formData.cyclePress = this.formData.cycle[1];
|
|
|
+ this.formData.leaseType = this.formData.leaseType + '';
|
|
|
+
|
|
|
+ this.formData.houseId = [];
|
|
|
+ if (data.unitName != null) {
|
|
|
+ this.formData.houseId.push(data.communityId + '');
|
|
|
+ this.formData.houseId.push(data.buildingId + '');
|
|
|
+ this.formData.houseId.push(data.unitName);
|
|
|
+ this.formData.houseId.push(dataHouseId + '');
|
|
|
+ this.handleChange(this.formData.houseId);
|
|
|
+ } else {
|
|
|
+ this.formData.houseId.push(data.communityId + '');
|
|
|
+ this.formData.houseId.push(data.buildingId + '');
|
|
|
+ this.formData.houseId.push(dataHouseId + '');
|
|
|
+ this.handleChange(this.formData.houseId);
|
|
|
+ }
|
|
|
+ this.pictureArr = (this.formData.imageUrl).split(',');
|
|
|
+ this.pictureArred = (this.formData.videoUrl).split(',');
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
created () {
|
|
|
+ this.getOrgTreeList();
|
|
|
this.configuration();
|
|
|
this.highlights();
|
|
|
this.requirements();
|
|
|
+
|
|
|
+ if (this.params.title == "edit") {
|
|
|
+ this.houseRentFind();
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
