|
@@ -114,72 +114,78 @@
|
|
|
|
|
|
<div class="formContent-item">
|
|
|
<div class="formContent-item_title"><span class="show-required-icon-star"></span> 绑定房产和车位</div>
|
|
|
- <div class="formContent-formList house" v-for="(item, index) in formData.houseList" :key="index">
|
|
|
- <div class="block-title">
|
|
|
- <div class="floor list-title">
|
|
|
- {{
|
|
|
- `${item.buildingName} ${
|
|
|
- item.unitName.indexOf('单元') !== -1 ? item.unitName : !!item.unitName ? item.unitName + '单元' : ''
|
|
|
- }${item.roomNumber}`
|
|
|
- }}
|
|
|
+ <div class="ownerScroll">
|
|
|
+ <div class="formContent-formList house" v-for="(item, index) in formData.houseList" :key="index">
|
|
|
+ <div class="block-title">
|
|
|
+ <div class="floor list-title">
|
|
|
+ {{
|
|
|
+ `${item.buildingName} ${
|
|
|
+ item.unitName.indexOf('单元') !== -1 ? item.unitName : !!item.unitName ? item.unitName + '单元' : ''
|
|
|
+ }${item.roomNumber}`
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ <!-- <span class="remove list-title" @click="removeHouse(index)">移除</span> -->
|
|
|
+ <img class="bg-img" src="@/assets/img/ownerManagement/bg_card@2x.png" alt="" />
|
|
|
+ <img class="bg-imgIoc" src="@/assets/img/ownerManagement/icon_building@2x.png" alt="" />
|
|
|
</div>
|
|
|
- <span class="remove list-title" @click="removeHouse(index)">移除</span>
|
|
|
- <img class="bg-img" src="@/assets/img/ownerManagement/bg_card@2x.png" alt="" />
|
|
|
- <img class="bg-imgIoc" src="@/assets/img/ownerManagement/icon_building@2x.png" alt="" />
|
|
|
- </div>
|
|
|
|
|
|
- <zz-form :cols="formCols3" :data="item" :rules="formRules" :errors="formErrors" labelWidth="70">
|
|
|
- <!-- 添加编辑 -->
|
|
|
- <template>
|
|
|
- <template slot="householdType">
|
|
|
- <el-select v-model="item.householdType" clearable @change="householdTypeHide(item)">
|
|
|
- <el-option
|
|
|
- v-for="(item, index) in householdTypeArray"
|
|
|
- :key="index"
|
|
|
- :label="item.label"
|
|
|
- :value="item.status"
|
|
|
- >{{ item.label }}</el-option
|
|
|
+ <zz-form :cols="formCols3" :data="item" :rules="formRules" :errors="formErrors" labelWidth="70">
|
|
|
+ <!-- 添加编辑 -->
|
|
|
+ <template>
|
|
|
+ <template slot="householdType">
|
|
|
+ <el-select v-model="item.householdType" clearable @change="householdTypeHide(item)">
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in householdTypeArray"
|
|
|
+ :key="index"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.status"
|
|
|
+ >{{ item.label }}</el-option
|
|
|
+ >
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ <template slot="checkInDate">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="item.checkInDate"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ type="date"
|
|
|
+ placeholder="选择日期"
|
|
|
>
|
|
|
- </el-select>
|
|
|
- </template>
|
|
|
- <template slot="checkInDate">
|
|
|
- <el-date-picker
|
|
|
- v-model="item.checkInDate"
|
|
|
- value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
- type="date"
|
|
|
- placeholder="选择日期"
|
|
|
- >
|
|
|
- </el-date-picker> </template
|
|
|
- ></template>
|
|
|
- </zz-form>
|
|
|
+ </el-date-picker> </template
|
|
|
+ ></template>
|
|
|
+ </zz-form>
|
|
|
|
|
|
- <div class="block-title car" v-for="(items, indexs) in item.parkingList" :key="indexs">
|
|
|
- <div class="floor list-title">
|
|
|
- {{ `${items.garageName}${items.areaName || items.partitionName}-${items.parkingNumber}` }}
|
|
|
+ <div class="block-title car" v-for="(items, indexs) in item.parkingList" :key="indexs">
|
|
|
+ <div class="floor list-title">
|
|
|
+ {{ `${items.garageName}${items.areaName || items.partitionName}-${items.parkingNumber}` }}
|
|
|
+ </div>
|
|
|
+ <span class="remove list-title" @click="removeCard(indexs, item)">移除</span>
|
|
|
+ <img class="bg-img" src="@/assets/img/ownerManagement/bg_card@2x.png" alt="" />
|
|
|
+ <img class="bg-imgIoc" src="@/assets/img/ownerManagement/icon_car@2x.png" alt="" />
|
|
|
</div>
|
|
|
- <span class="remove list-title" @click="removeCard(indexs, item)">移除</span>
|
|
|
- <img class="bg-img" src="@/assets/img/ownerManagement/bg_card@2x.png" alt="" />
|
|
|
- <img class="bg-imgIoc" src="@/assets/img/ownerManagement/icon_car@2x.png" alt="" />
|
|
|
+ <div class="addHouse block-title" v-if="!!formData.houseList.length" @click="addCard(item)">
|
|
|
+ <div class="floor list-title">绑定车位</div>
|
|
|
+ <img class="bg-img" src="@/assets/img/ownerManagement/bg_card@2x.png" alt="" />
|
|
|
+ <img class="bg-imgIoc" src="@/assets/img/ownerManagement/icon_car@2x.png" alt="" />
|
|
|
+ <img class="add" src="@/assets/img/ownerManagement/btn_add@2x.png" />
|
|
|
+ </div>
|
|
|
+ <el-button
|
|
|
+ class="removeHouseButton"
|
|
|
+ type="primary"
|
|
|
+ @click="removeHouse(index)"
|
|
|
+ v-if="formData.houseList.length !== 0"
|
|
|
+ >删除房产</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
- <div class="addHouse block-title" v-if="!!formData.houseList.length" @click="addCard(item)">
|
|
|
- <div class="floor list-title">绑定车位</div>
|
|
|
+ <div class="addHouse block-title" v-if="formData.houseList.length == 0" @click="addHouse()">
|
|
|
+ <div class="floor list-title">绑定房产</div>
|
|
|
<img class="bg-img" src="@/assets/img/ownerManagement/bg_card@2x.png" alt="" />
|
|
|
- <img class="bg-imgIoc" src="@/assets/img/ownerManagement/icon_car@2x.png" alt="" />
|
|
|
+ <img class="bg-imgIoc" src="@/assets/img/ownerManagement/icon_building@2x.png" alt="" />
|
|
|
<img class="add" src="@/assets/img/ownerManagement/btn_add@2x.png" />
|
|
|
</div>
|
|
|
- <el-button class="removeHouseButton" type="primary" @click="removeHouse(index)" v-if="formData.houseList.length !== 0"
|
|
|
- >删除房产</el-button
|
|
|
+ <el-button class="addHouseButton" type="primary" @click="addHouse()" v-if="formData.houseList.length !== 0"
|
|
|
+ >新增房产</el-button
|
|
|
>
|
|
|
</div>
|
|
|
- <div class="addHouse block-title" v-if="formData.houseList.length == 0" @click="addHouse()">
|
|
|
- <div class="floor list-title">绑定房产</div>
|
|
|
- <img class="bg-img" src="@/assets/img/ownerManagement/bg_card@2x.png" alt="" />
|
|
|
- <img class="bg-imgIoc" src="@/assets/img/ownerManagement/icon_building@2x.png" alt="" />
|
|
|
- <img class="add" src="@/assets/img/ownerManagement/btn_add@2x.png" />
|
|
|
- </div>
|
|
|
- <el-button class="addHouseButton" type="primary" @click="addHouse()" v-if="formData.houseList.length !== 0"
|
|
|
- >新增房产</el-button
|
|
|
- >
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
@@ -620,10 +626,14 @@ export default {
|
|
|
},
|
|
|
dimension(arr) {
|
|
|
arr.map((item, index) => {
|
|
|
- if (!!item.children & (item.type !== 'unit')) {
|
|
|
+ if (!!item.children && item.type !== 'unit' && item.type !== 'building') {
|
|
|
this.dimension(item.children);
|
|
|
} else {
|
|
|
- item.name = this.CheckChinese(item.name, item.type == 'unit' ? '' : '楼栋');
|
|
|
+ if (item.type === 'unit') {
|
|
|
+ item.name = this.CheckChinese(item.name, '单元');
|
|
|
+ } else if (item.type === 'building') {
|
|
|
+ item.name = this.CheckChinese(item.name, '楼栋');
|
|
|
+ }
|
|
|
}
|
|
|
});
|
|
|
},
|
|
@@ -645,36 +655,57 @@ export default {
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
@import '../style.scss';
|
|
|
-.addHouse {
|
|
|
- cursor: pointer;
|
|
|
- img.add {
|
|
|
- margin-left: 20px;
|
|
|
- width: 13px;
|
|
|
+.formContent-item .ownerScroll {
|
|
|
+ height: calc(100vh - 250px);
|
|
|
+ overflow: auto;
|
|
|
+ padding-right: 10px;
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ width: 5px;
|
|
|
+ }
|
|
|
+ &::-webkit-scrollbar-track {
|
|
|
+ border-radius: 10px;
|
|
|
+ background: #f4f7f9a8;
|
|
|
+ }
|
|
|
+ &::-webkit-scrollbar-thumb {
|
|
|
+ border-radius: 10px;
|
|
|
+ background: #c6c4c4a9;
|
|
|
+ }
|
|
|
+ .addHouse {
|
|
|
+ cursor: pointer;
|
|
|
+ margin-bottom: 20px !important;
|
|
|
+ img.add {
|
|
|
+ margin-left: 20px;
|
|
|
+ width: 13px;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.formContent .formContent-item .block-title.car {
|
|
|
- margin-bottom: 20px;
|
|
|
-}
|
|
|
-.formContent-formList.house {
|
|
|
- flex-wrap: wrap;
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- width: 100%;
|
|
|
- height: 1px;
|
|
|
- background: #e0e1e3;
|
|
|
+ .block-title.car {
|
|
|
margin-bottom: 20px;
|
|
|
+ &:nth-of-type(2n) {
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
}
|
|
|
- .el-form {
|
|
|
- width: calc(100% - 220px);
|
|
|
- /deep/ .el-date-editor.el-input {
|
|
|
+
|
|
|
+ .formContent-formList.house {
|
|
|
+ flex-wrap: wrap;
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
width: 100%;
|
|
|
+ height: 1px;
|
|
|
+ background: #e0e1e3;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .el-form {
|
|
|
+ width: calc(100% - 220px);
|
|
|
+ /deep/ .el-date-editor.el-input {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-.removeHouseButton {
|
|
|
- width: 80px;
|
|
|
- height: 32px;
|
|
|
- margin-bottom: 20px;
|
|
|
+ .removeHouseButton {
|
|
|
+ width: 80px;
|
|
|
+ height: 32px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|