<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> 
 |