settle_down_web/src/views/reportForms/components/parkRoomIndexDetail.vue

<template>
  <div>
    <el-row>
      <el-tabs v-model="activeName" style="font-size: 16px" @tab-click="handleClick">
        <el-tab-pane label="概览" name="概览">
          <park-room-index-edit ref="parkRoomIndexEdit" />
        </el-tab-pane>
        <el-tab-pane label="认购" name="认购">
          <el-row>
            <el-col :span="24">
              <el-table v-loading="tabLoading" :data="tableData" style="width: 100%" size="mini">
                <el-table-column type="index" width="60" />
                <el-table-column label="小区-分期" prop="groupDiscName" width="150" />
                <el-table-column label="买受人" prop="buyerName" width="200" />
                <el-table-column label="定金金额" prop="receivableMoney" width="100" />
                <el-table-column label="定金流水号" prop="serialNumber" width="100" />
                <el-table-column label="认购房屋" prop="houseName" />
                <el-table-column label="状态" prop="statusStr" width="110" />
                <el-table-column label="经办时间" prop="createdName" />
                <el-table-column label="经办人" prop="createdAt" />
                <el-table-column header-align="center" label="操作" width="180">
                  <template scope="scope">
                    <el-button size="mini" type="text" @click="depositView(scope.row)">查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="签约" name="签约">
          <el-row>
            <el-col :span="24">
              <el-table v-loading="tabLoading" :data="tableData" style="width: 100%" size="mini">
                <el-table-column type="index" width="60" />
                <el-table-column label="合同编号" prop="contractNumber" />
                <el-table-column label="网签备案号" prop="recordNumber" />
                <el-table-column label="买受人" prop="buyerName" width="200" />
                <el-table-column label="房屋" prop="houseName" width="200" />
                <el-table-column label="实测建筑面积（㎡）" prop="actualBuildArea" width="110" />
                <el-table-column label="买卖单价（㎡）" prop="housePrice" />
                <el-table-column label="买受人产权份额占比" prop="buyerProportionStr" />
                <el-table-column label="付款方式" prop="paymentMethodStr" />
                <el-table-column label="应收房款（元）" prop="buyerMoney" />
                <el-table-column label="应收专项维修资金（元）" prop="maintenanceTotalPrice" />
                <el-table-column label="合同状态" prop="contractStatusStr" width="110">
                  <template scope="scope">
                    <span
                      :style="{'color':scope.row.contractStatusStr==='已退房'?'red':scope.row.contractStatusStr==='已签约'?'green':'gray'}"
                    >
                      {{ scope.row.contractStatusStr }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="签约日期" prop="signingDate" />
                <el-table-column header-align="center" label="操作" width="180">
                  <template scope="scope">
                    <el-button size="mini" type="text" @click="contractView(scope.row)">查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="房款" name="房款">
          <el-row>
            <el-col :span="24">
              <el-table ref="multipleTable" v-loading="tabLoading" :data="tableData" style="width: 100%" size="mini">
                <el-table-column label="合同编号" prop="contractNumber" />
                <el-table-column label="买受人" prop="buyerName" width="200" />
                <el-table-column label="房屋" prop="houseName" width="200" />
                <el-table-column label="实测建筑面积（㎡）" prop="actualBuildArea" width="110" />
                <el-table-column label="买卖单价（㎡）" prop="housePrice" />
                <el-table-column label="买受人产权份额占比" prop="buyerProportion" />
                <el-table-column label="付款方式" prop="paymentMethodStr" />
                <el-table-column label="应收房款（元）" prop="buyerMoney" />
                <el-table-column label="已收房款（元）" prop="receivedMoney" />
                <el-table-column label="尚欠房款（元）" prop="arrears" />
                <el-table-column label="收款状态" prop="collectionStatusStr" width="110">
                  <template scope="scope">
                    <span
                      :style="{'color':scope.row.collectionStatusStr==='已退款'?'red':scope.row.collectionStatusStr==='完全收款'?'green':'gray'}"
                    >
                      {{ scope.row.collectionStatusStr }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column header-align="center" label="操作" width="200">
                  <template scope="scope">
                    <el-button size="mini" type="text" @click="payLogView(scope.row)">查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="专项维修资金" name="专项维修资金">
          <el-row>
            <el-col :span="24">
              <el-table ref="multipleTable" v-loading="tabLoading" :data="tableData" style="width: 100%" size="mini">
                  <el-table-column type="index" width="60" />
                  <el-table-column label="合同编号" prop="contractNumber" />
                  <el-table-column label="买受人" prop="buyerName" width="200" />
                  <el-table-column label="房屋" prop="houseName" width="200" />
                  <el-table-column label="实测建筑面积（㎡）" prop="actualBuildArea" width="110" />
                  <el-table-column label="专项维修资金单价（元/㎡）" prop="maintenanceFunds" />
                  <el-table-column label="应收专项维修资金（元）" prop="maintenanceTotalPrice" />
                  <el-table-column label="已收专项维修资金（元）" prop="receivedMoney" />
                  <el-table-column label="收款状态" prop="fundCollectionStatusStr" width="110">
                      <template scope="scope">
              <span
                  :style="{'color':scope.row.fundCollectionStatusStr==='已退款'?'red':scope.row.fundCollectionStatusStr==='已收款'?'green':'gray'}"
              >
                {{ scope.row.fundCollectionStatusStr }}
              </span>
                      </template>
                  </el-table-column>
                  <el-table-column header-align="center" label="操作" width="180">
                      <template scope="scope">
                          <el-button size="mini" type="text" @click="fundView(scope.row)">查看</el-button>
                      </template>
                  </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-row>
    <el-divider />
    <el-row class="handle-box">
      <el-col :span="24">
        <span class="card_title">交易历史</span>
      </el-col>
    </el-row>

    <!--定金查看-->
    <el-dialog
      :visible.sync="dialogDepositVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title=""
      width="90%"
      top="20px"
      class="statistic_base"
      :append-to-body="true"
      :modal-append-to-body="true"
      custom-class="tagdialog"
    >
      <add-subscribe v-if="dialogDepositVisible" ref="addSubscribe" @cancel="cancel" />
    </el-dialog>

    <!--合同签约/修改-->
    <el-dialog
      :visible.sync="dialogContractVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="dialogContractTitle"
      width="90%"
      top="20px"
      class="statistic_base"
      :append-to-body="true"
      :modal-append-to-body="true"
      custom-class="tagdialog"
    >
      <contract-add ref="contractAdd" @cancel="cancel" />
    </el-dialog>

    <!-- 预收款登记 -->
    <el-dialog
      :visible.sync="dialogPayLogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title=""
      width="90%"
      top="20px"
      class="statistic_base"
      :append-to-body="true"
      :modal-append-to-body="true"
      custom-class="tagdialog"
    >
      <payment-registration v-if="dialogPayLogVisible" ref="paymentRegistration" @cancel="cancel" />
    </el-dialog>

      <!-- 收款登记 -->
      <el-dialog
          :visible.sync="dialogFundVisible"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          title=""
          width="90%"
          top="20px"
          class="statistic_base"
          :append-to-body="true"
          :modal-append-to-body="true"
          custom-class="tagdialog"
      >
          <add-funds v-if="dialogFundVisible" ref="addFunds" @cancel="cancel" />
      </el-dialog>



  </div>
</template>

<script>
import ParkRoomIndexEdit from '@/views/reportForms/components/parkRoomIndexEdit.vue'
import Base from '@/views/base/base.vue'
import BaseData from '@/views/base/baseData.vue'
import ContractAdd from '@/views/signingManagement/contractManagement/contractAdd.vue'
import AddSubscribe from '@/views/customerManagement/subscribe/addSubscribe.vue'
import PaymentRegistration from '@/views/receiveRefundsManagement/paymentManagement/paymentRegistration.vue'
import AddFunds from '@/views/receiveRefundsManagement/maintenanceFundsManagement/addFunds.vue'


export default {
    name: 'ParkRoomIndexDetailVue',
    components: { ContractAdd, ParkRoomIndexEdit, AddSubscribe, PaymentRegistration, AddFunds },
    mixins: [Base, BaseData],
    data() {
        return {
            dc_key: ['DEPOSIT_STATUS', 'PAYMENT_METHODS', 'CONTRACT_STATUS', 'HOUSE_PAYMENT_STATUS', 'MAINTENANCE_FUNDS_STATUS'],
            activeName: '概览',
            houseId: '',
            tableData: [],
            tabLoading: false,
            dialogDepositVisible: false,
            dialogDepositTitle: '',
            dialogContractVisible: false,
            dialogContractTitle: '',
            dialogPayLogVisible: false,
            dialogFundVisible: false

        }
    },
    methods: {
        initData(data) {
            this.initDict(this.dc_key).then((res) => {
                this.activeName = '概览'
                this.houseId = data.id
                if (data.activeName) {
                    this.activeName = data.activeName
                }
                this.$nextTick(() => {
                    this.$refs.parkRoomIndexEdit.initData(this.houseId)
                })
            })
        },
        handleClick(tab, event) {
            this.tableData = []
            if (tab.name === '概览') {
                this.$nextTick(() => {
                    this.$refs.parkRoomIndexEdit.initData(this.houseId)
                })
            } else if (tab.name === '认购') {
                this.getDepositData()
            } else if (tab.name === '签约') {
                this.getContractData()
            } else if (tab.name === '房款') {
                this.getPaymentData()
            } else if (tab.name === '专项维修资金') {
                this.getFundData()
            } else if (tab.name === '开票') {

            }
        },
        getDepositData() {
            const _this = this
            _this.tabLoading = true
            const postData = {
                houseId: this.houseId
            }
            this.baseDepositRequest('roomSelectionListAll', postData).then((res) => {
                if (res.data) {
                    res.data.forEach(function(item) {
                        const json = _this.getDepositItemJson(item)
                        _this.tableData.push(json)
                    })
                }
                _this.tabLoading = false
            }).catch((e) => {
                // console.log(e)
            })
        },
        getContractData: function() {
            const _this = this
            _this.tabLoading = true
            const postData = {
                houseId: this.houseId
            }
            this.baseContractRequest('listAll', postData).then((res) => {
                if (res.data) {
                    res.data.forEach(function(item) {
                        const json = _this.getContractItemJson(item)
                        _this.tableData.push(json)
                    })
                }
                _this.tabLoading = false
            }).catch((e) => {
                // console.log(e)
            })
        },
        getPaymentData: function() {
            const _this = this
            _this.tabLoading = true
            const postData = {
                houseId: this.houseId
            }
            this.basePaymentRequest('listAll', postData).then((res) => {
                if (res.data) {
                    res.data.forEach(function(item) {
                        const json = _this.getPaymentJson(item)
                        _this.tableData.push(json)
                    })
                }
                _this.tabLoading = false
            }).catch((e) => {
                // console.log(e)
            })
        },
        getFundData: function() {
            const _this = this
            _this.tabLoading = true
            const postData = {
                houseId: this.houseId
            }
            this.baseFundRequest('listAll', postData).then((res) => {
                if (res.data) {
                    res.data.forEach(function(item) {
                        const json = _this.getFundJson(item)
                        _this.tableData.push(json)
                    })
                }
                _this.tabLoading = false
            }).catch((e) => {
                // console.log(e)
            })
        },
        getDepositItemJson: function(item) {
            item.houseName = item.buildName + '-' + item.roomNo
            item.statusStr = this.dc_map.DEPOSIT_STATUS[item.status]
            return item
        },
        getContractItemJson: function(item) {
            if (item.buyerProportion) {
                item.buyerProportionStr = item.buyerProportion + '%'
            }
            item.paymentMethodStr = this.dc_map.PAYMENT_METHODS[item.paymentMethod]
            item.contractStatusStr = this.dc_map.CONTRACT_STATUS[item.contractStatus]
            return item
        },
        getPaymentJson: function(item) {
            item.paymentMethodStr = this.dc_map.PAYMENT_METHODS[item.paymentMethod]
            item.collectionStatusStr = this.dc_map.HOUSE_PAYMENT_STATUS[item.collectionStatus]
            return item
        },
        getFundJson: function(item) {
            item.fundCollectionStatusStr = this.dc_map.MAINTENANCE_FUNDS_STATUS[item.fundCollectionStatus]
            return item
        },
        depositView(val) {
            this.dialogDepositVisible = true
            this.dialogDepositTitle = '查看'
            val.isView = true
            // 新vue时调用的方法
            this.$nextTick(() => {
                this.$refs.addSubscribe.initData(val)
            })
        },
        contractView(val) {
            this.dialogContractVisible = true
            this.dialogContractTitle = '查看'
            val.isView = true
            // 新vue时调用的方法
            this.$nextTick(() => {
                this.$refs.contractAdd.initData(val)
            })
        },
        payLogView(val) {
            this.dialogPayLogVisible = true
            val.isView = true
            // 新vue时调用的方法
            this.$nextTick(() => {
                this.$refs.paymentRegistration.initData(val)
            })
        },
        fundView(val) {
            this.dialogFundVisible = true
            val.isView = true
            // 新vue时调用的方法
            this.$nextTick(() => {
                this.$refs.addFunds.initData(val)
            })
        },
        cancel: function() {
            this.dialogContractVisible = false
            this.dialogDepositVisible = false
            this.dialogPayLogVisible = false
            this.dialogFundVisible = false
        },
        baseDepositRequest(opUrl, postData) {
            return this.$channel.globeRequest('RoomSelectionInfoController', opUrl, postData, 'project')
        },
        baseContractRequest(opUrl, postData) {
            return this.$channel.globeRequest('ContractManageController', opUrl, postData, 'project')
        },
        basePaymentRequest(opUrl, postData) {
            return this.$channel.globeRequest('PayLogController', opUrl, postData, 'project')
        },
        baseFundRequest(opUrl, postData) {
            return this.$channel.globeRequest('MaintenanceFundsManagementController', opUrl, postData, 'project')
        }
    }
}
</script>

<style scoped lang="scss">

</style>