settle_down_web/src/views/customerManagement/roomChose/addHouse.vue

<template>
  <div>
    <div>
      <el-row class="handle-box">
        <el-col :span="24">
          <span class="card_title">房屋信息</span>
          <el-button style="float: right" type="text" size="small" @click="handleAdd()">
            去选房
          </el-button>
        </el-col>
      </el-row>
      <el-divider />
      <el-row class="handle-box">
        <el-col :span="24">
          <el-table
            ref="multipleTable"
            v-loading="loading"
            :data="AllData"
            stripe
            row-class-name="g_table_row"
            :header-cell-style="{textAlign: 'center'}"
            :cell-style="{ textAlign: 'center' }"
            @selection-change="handleSelectionChange"
          >

            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column label="单元/楼栋号" prop="buildName" width="180" />
            <el-table-column label="户室号" prop="roomNo" />
            <el-table-column label="套内面积（㎡)" prop="actualInternalArea" />
            <el-table-column label="建筑面积（㎡)" prop="actualBuildArea" />
            <el-table-column label="装修情况" prop="decorationSituationStr" />
            <el-table-column label="经办人" prop="createdName" />
            <el-table-column label="经办时间" prop="createdAt" />
            <el-table-column label="操作" width="180">
              <template scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="handleDelete(scope.$index)"
                >删除
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  @click="downLoad(scope.row)"
                > 房源确认单下载
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <!--      <el-row class="handle-box">-->
      <!--        <span>经办时间&nbsp;{{ dataStr }}</span>-->
      <!--      </el-row>-->
      <!--      <el-row class="handle-box">-->
      <!--        <span>经办人&nbsp;{{ username }}</span>-->
      <!--      </el-row>-->
    </div>
    <div style="text-align: right;margin-top: 50px">
      <el-button @click="cancel">取 消</el-button>
      <el-button v-if="fromAddress!== 'intentionalDepositManagement'" type="primary" @click="confirmSubmit()">提交选房</el-button>
      <el-button v-if="fromAddress=== 'intentionalDepositManagement'" type="primary" @click="intentionalDepositConfirmSubmit()">意向金提交选房</el-button>
    </div>

    <!--选房-->
    <el-dialog
      :visible.sync="dialogRoomVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="90%"
      top="20px"
      class="statistic_base"
      :append-to-body="true"
      :modal-append-to-body="true"
      custom-class="tagdialog"
    >
      <park-room v-if="dialogRoomVisible" ref="parkRoom" @getChildrenData="getChildrenData" />
    </el-dialog>

  </div>
</template>

<script>
import Base from '@/views/base/base.vue'
import BaseData from '@/views/base/baseData.vue'
import ParkRoom from '@/views/customerManagement/roomChose/roomIndex.vue'
import constant from '@/static/utils/constant'

export default {
    name: 'AddHouse',
    components: { ParkRoom },
    mixins: [Base, BaseData],
    props: {
        // 确认从哪个页面跳转过来的,这样可以做相应的操作
        fromAddress: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            dc_key: ['DECORATION_SITUATION'],
            loading: false,
            AllData: [],
            dialogRoomVisible: false,
            customerManagementId: '',
            dataStr: '',
            username: '',
            groupId: '',
            discId: ''
        }
    },
    mounted() {
        const myDate = new Date()
        const dateStr = myDate.getFullYear() + '-' + (myDate.getMonth() + 1) + '-' + myDate.getDate()
        const username = this.$common.currUser().username
        this.dataStr = dateStr
        this.username = username
    },
    methods: {
        initData(data) {
            this.initDict(this.dc_key).then(res => {
                this.customerManagementId = data.id
                this.groupId = data.groupId
                this.discId = data.discId
                this.getData(data.id)
            })
        },
        handleAdd() {
            this.dialogRoomVisible = true
            const data = {
                level: 2,
                nodeId: this.discId
            }
            // 新vue时调用的方法
            this.$nextTick(() => {
                this.$refs.parkRoom.initData(data)
            })
        },
        getData: function(val) {
            const _this = this
            _this.loading = true
            _this.AllData = []
            const data = {
                customerManagementId: val
            }
            this.baseRequest('listAll', data).then((res) => {
                if (res.data) {
                    res.data.forEach(function(item) {
                        const json = _this.getItemJson(item)
                        _this.AllData.push(json)
                    })
                }
                _this.loading = false
            }).catch(() => {
            })
        },
        getItemJson: function(item) {
            item.decorationSituationStr = this.dc_map.DECORATION_SITUATION[item.decorationSituation]
            return item
        },
        confirmSubmit: function() {
            if (!this.AllData || this.AllData.length === 0) {
                this.$message({
                    message: '请选择房间',
                    type: 'warning'
                })
            }
            const data = {
                houseIds: this.AllData.map(obj => { return obj.houseId }).join(','),
                customerManagementId: this.customerManagementId
            }
            this.baseRequest('submit', data).then(res => {
                if (res.data.code === 200) {
                    this.$message({
                        message: '提交成功',
                        type: 'success'
                    })
                    this.cancel()
                }
            }).catch((err) => {
                this.$message({
                    message: err,
                    type: 'error'
                })
            })
        },
        intentionalDepositConfirmSubmit: function() {
            if (!this.AllData) {
                if (this.AllData.length === 0) {
                    this.$message({
                        message: '请选择房间',
                        type: 'warning'
                    })
                }
                if (this.AllData.length > 1) {
                    this.$message({
                        message: '只能选择一个房间',
                        type: 'warning'
                    })
                }
                return
            }
            const obj = this.AllData[0]
            const data = {
                houseId: obj.id,
                customerManagementId: this.customerManagementId,
                buildName: obj.buildName,
                roomNo: obj.roomNo
            }
            this.cancel(data)
        },
        cancel(data) {
            this.$emit('cancel', data)
        },
        // 删除单个行
        handleDelete(index) {
            this.AllData.splice(index, 1)
        },

        downLoad(row) {
            // const data = {
            //     customerManagementId: this.customerManagementId,
            //     houseId: row.houseId
            // }
            // const url = constant.BASE_URI + '/RoomSelectionInfoController/download?customerManagementId=' + this.customerManagementId + '&houseId=' + row.houseId
            // window.location.href = url
        },
        getChildrenData(data) {
            if (data) {
                data.forEach(item => {
                    item.createdName = this.username
                    item.createdAt = this.dataStr
                })
                this.AllData = data
            }
            this.dialogRoomVisible = false
        },
        baseRequest(opUrl, postData) {
            return this.$channel.globeRequest('RoomSelectionInfoController', opUrl, postData, 'project')
        }

    }
}
</script>

<style scoped>

</style>