| <template> | 
|     <GlobalWindow | 
|         width="100%" | 
|         :title="title" | 
|         :visible.sync="visible" | 
|         :confirm-working="isWorking" | 
|         @close="close" | 
|         @confirm="confirm"> | 
|         <el-table | 
|             :data="houseList" | 
|             border | 
|             @selection-change="handleSelectionChange" | 
|             style="width: 100%"> | 
|             <el-table-column | 
|                 type="selection" | 
|                 width="55"> | 
|             </el-table-column> | 
|             <el-table-column | 
|                 prop="projectName" | 
|                 label="项目名称"> | 
|             </el-table-column> | 
|             <el-table-column | 
|                 prop="buildingName" | 
|                 label="楼宇名称"> | 
|             </el-table-column> | 
|             <el-table-column | 
|                 prop="floorName" | 
|                 label="楼层名称"> | 
|             </el-table-column> | 
|             <el-table-column | 
|                 prop="roomName" | 
|                 label="房间名称"> | 
|             </el-table-column> | 
|         </el-table> | 
|     </GlobalWindow> | 
| </template> | 
|   | 
| <script> | 
| import GlobalWindow from '@/components/common/GlobalWindow' | 
| import BaseOpera from '@/components/base/BaseOpera' | 
| import { getContractRoom } from '@/api/house' | 
| export default { | 
|   name: 'selectHouse', | 
|   components: { | 
|     GlobalWindow | 
|   }, | 
|   extends: BaseOpera, | 
|   data () { | 
|     return { | 
|       houseList: [], | 
|       form: {}, | 
|       seleData: [] | 
|     } | 
|   }, | 
|   methods: { | 
|     open (title, target) { | 
|       this.title = title | 
|       this.form = target | 
|       this.getAll() | 
|     }, | 
|     getAll () { | 
|       getContractRoom({ ...this.form }) | 
|         .then(res => { | 
|           console.log(res) | 
|           this.houseList = res | 
|           this.visible = true | 
|         }) | 
|     }, | 
|     handleSelectionChange (e) { | 
|       console.log(e) | 
|       this.seleData = e | 
|     } | 
|   } | 
| } | 
| </script> | 
|   | 
| <style lang="scss" scoped> | 
|     @import '@/assets/style/variables.scss'; | 
|      | 
|      | 
|     .cost_tabs { | 
|         justify-content: flex-start; | 
|         border: none; | 
|          | 
|         .tab { | 
|             height: 36px; | 
|             line-height: 36px; | 
|             font-size: 14px; | 
|         } | 
|     } | 
|      | 
|     .main { | 
|         display: flex; | 
|         margin-bottom: 20px; | 
|          | 
|         .main_content { | 
|             flex: 1; | 
|             margin-right: 20px; | 
|              | 
|             .head { | 
|                 display: flex; | 
|                 align-items: center; | 
|                 justify-content: space-between; | 
|                  | 
|                 .tabs { | 
|                     display: flex; | 
|                     margin-bottom: 20px; | 
|                     align-items: center; | 
|                     justify-content: center; | 
|                      | 
|                     .tab { | 
|                         height: 14px; | 
|                         line-height: 14px; | 
|                         cursor: pointer; | 
|                         border: 1px solid #ebebeb; | 
|                         padding: 12px 24px; | 
|                     } | 
|                      | 
|                     .active { | 
|                         font-weight: 500; | 
|                         color: $primary-color; | 
|                         border: 1px solid $primary-color; | 
|                     } | 
|                 } | 
|             } | 
|              | 
|             .list { | 
|                 display: flex; | 
|                 flex-wrap: wrap; | 
|                  | 
|                 .el-form-item { | 
|                     width: 33.33%; | 
|                     box-sizing: border-box; | 
|                     padding: 0 12px; | 
|                 } | 
|             } | 
|         } | 
|          | 
|         .main_house { | 
|             width: 320px; | 
|             padding: 24px 12px; | 
|             border: 1px solid #c3c6cd; | 
|             border-radius: 2px; | 
|              | 
|             .title { | 
|                 font-size: 16px; | 
|                 font-weight: 500; | 
|                 margin-bottom: 30px; | 
|             } | 
|         } | 
|          | 
|     } | 
|      | 
|     .total { | 
|         display: flex; | 
|         justify-content: space-between; | 
|         align-items: center; | 
|         height: 32px; | 
|         background-color: #e7e9f5; | 
|          | 
|         span { | 
|             width: 160px; | 
|             text-align: center; | 
|         } | 
|     } | 
|      | 
|     .file_wrap { | 
|         padding: 20px 16px; | 
|         border: 1px solid #c3c6cd; | 
|         border-radius: 2px; | 
|          | 
|         .head { | 
|             display: flex; | 
|             justify-content: space-between; | 
|             align-items: center; | 
|         } | 
|     } | 
|      | 
|     .m_title { | 
|         font-weight: 500; | 
|         font-size: 14px; | 
|         margin-bottom: 15px; | 
|         margin-top: 10px; | 
|     } | 
| </style> |