settle_down_web/src/views/receiveRefundsManagement/paymentManagement/paymentRegistration.vue

<template>
  <div>
    <el-form ref="form" :model="form" style="width: 100%;padding: 5px" :rules="rules">
      <el-row>
        <el-col style="padding-bottom: 10px">
          <span class="card_title">预收款登记</span>
          <el-card shadow="always" style="padding: 15px 5px 5px 15px">
            <el-row>
              <el-col :span="3" class="col-txt"><span>合同编号</span></el-col>
              <el-col :span="9" class="col-input">
                <el-form-item>
                  <el-input v-model="form.contractNumber" />
                </el-form-item>
              </el-col>
              <el-col :span="3" class="col-txt"><span>买受人</span></el-col>
              <el-col :span="9" class="col-input">
                <el-form-item>
                  <el-input v-model="form.buyerName" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="3" class="col-txt"><span>房屋</span></el-col>
              <el-col :span="9" class="col-input">
                <el-form-item>
                  <el-input v-model="form.houseName" />
                </el-form-item>
              </el-col>
              <el-col :span="3" class="col-txt"><span>付款方式</span></el-col>
              <el-col :span="9" class="col-input">
                <el-form-item>
                  <el-input v-model="form.paymentMethodStr" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
<!--              <el-col :span="3" class="col-txt"><span>付款截止日</span></el-col>-->
<!--              <el-col :span="9" class="col-input">-->
<!--                <el-form-item>-->
<!--                  <el-date-picker-->
<!--                    v-model="form.deadline"-->
<!--                    popper-class="statistic_base"-->
<!--                    type="date"-->
<!--                    placeholder="年月日"-->
<!--                    value-format="yyyy-MM-dd"-->
<!--                  />-->
<!--                </el-form-item>-->
<!--              </el-col>-->
              <el-col :span="3" class="col-txt"><span>应收房款（元）</span></el-col>
              <el-col :span="9" class="col-input">
                <el-form-item>
                  <el-input v-model="form.receivableMoney" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="3" class="col-txt"><span>已收房款（元）</span></el-col>
              <el-col :span="9" class="col-input">
                <el-form-item>
                  <el-input v-model="form.receivedMoney" />
                </el-form-item>
              </el-col>
              <el-col :span="3" class="col-txt"><span>尚欠房款（元）</span></el-col>
              <el-col :span="9" class="col-input">
                <el-form-item>
                  <el-input v-model="form.arrears" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-form>
    <el-divider />
    <el-row>
      <el-col style="padding-bottom: 10px">
        <span class="card_title">缴费收款信息</span>
        <el-card shadow="always" style="padding: 15px 5px 5px 15px">
          <el-row style="text-align: right">
            <el-button type="primary" @click="handleAdd">新增</el-button>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-table v-loading="loading" :data="AllData" row-class-name="g_table_row" stripe>
                <el-table-column type="index" width="60" />
                <el-table-column label="款项内容" prop="contentTypeStr" />
                <el-table-column label="支付方式" prop="paymentMethodStr" />
                <el-table-column label="到账日期" prop="payTime" width="200" />
                <el-table-column label="到账银行账号" prop="bankFullName" width="200" />
                <el-table-column label="到账金额" prop="payMoney" width="110" />
                <el-table-column header-align="center" label="操作" width="180">
                  <template scope="scope">
                    <el-button size="mini" type="text" @click="handleView(scope.row)">查看</el-button>
                    <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</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-card>
      </el-col>
    </el-row>
    <div style="text-align: right">
      <el-button @click="cancel">取 消</el-button>
      <el-button v-if="!isView" type="primary" @click="cancel">确 定</el-button>
    </div>

    <!-- 新增收款 -->
    <el-dialog
      :visible.sync="dialogVisible"
      :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"
      @close="getData"
    >
      <add-payment v-if="dialogVisible" ref="addPayment" @cancel="addPaymentCancel" />
    </el-dialog>

  </div>
</template>

<script>
import Base from '@/views/base/base'
import BaseData from '@/views/base/baseData'
import AddPayment from '@/views/receiveRefundsManagement/paymentManagement/addPayment.vue'
import constant from '@/static/utils/constant'

export default {
    name: 'PaymentRegistration',
    components: { AddPayment },
    mixins: [Base, BaseData],
    data() {
        return {
            dc_key: ['PAYMENT_METHODS', 'CONTENT_TYPE', 'COLLECTION_METHODS'],
            form: {

            },
            rules: {

            },
            AllData: [],
            loading: false,
            dialogVisible: false,
            contractId: '',
            houseId: '',
            customerManagementId: '',
            isView: false
        }
    },
    computed: {

    },
    mounted() {

    },
    methods: {
        initData(data) {
            this.isView = data.isView
            this.contractId = data.id
            this.houseId = data.houseId
            this.customerManagementId = data.customerManagementId
            this.initDict(this.dc_key).then(res => {
                this.getData()
            })
        },
        getData() {
            this.getContractPart()
            this.getList()
        },
        getContractPart() {
            const _this = this
            const data = {
                contractId: this.contractId
            }
            this.baseRequest('getContractPart', data).then((res) => {
                if (res.data) {
                    _this.form = res.data
                    _this.form.paymentMethodStr = this.dc_map.PAYMENT_METHODS[res.data.paymentMethod]
                }
            }).catch((e) => {
                // console.log(e)
            })
        },
        getList() {
            const _this = this
            _this.AllData = []
            const data = {
                contractId: this.contractId,
                payType: 1
            }
            this.baseRequest('payListAll', data).then((res) => {
                if (res.data) {
                    res.data.forEach(function(item) {
                        const json = _this.getItemJson(item)
                        _this.AllData.push(json)
                    })
                    _this.allpage = res.data.total
                }
                _this.loading = false
            }).catch((e) => {
                // console.log(e)
            })
        },
        getItemJson: function(item) {
            item.paymentMethodStr = this.dc_map.COLLECTION_METHODS[item.paymentMethod]
            item.contentTypeStr = this.dc_map.CONTENT_TYPE[item.contentType]
            item.bankFullName = item.bankName + item.bankBranchName + item.bankNumber
            return item
        },
        cancel() {
            this.$emit('cancel')
        },
        addPaymentCancel() {
            this.dialogVisible = false
        },
        downLoad(row) {
            const url = constant.BASE_URI + '/PayLogController/downLoadReceipt?id=' + row.id
            window.open(url, '_blank')
        },
        handleAdd() {
            this.dialogVisible = true
            const data = {
                isView: false,
                contractId: this.contractId,
                houseId: this.houseId,
                customerManagementId: this.customerManagementId,
                bankName: this.form.bankName,
                bankNumber: this.form.bankNumber
            }
            // 新vue时调用的方法
            this.$nextTick(() => {
                this.$refs.addPayment.initData(data)
            })
        },
        handleView(data) {
            this.dialogVisible = true
            data.isView = true
            // 新vue时调用的方法
            this.$nextTick(() => {
                this.$refs.addPayment.initData(data)
            })
        },
        handleDelete(val) {
            this.$confirm('确认删除该数据，删除后将无法恢复，确认删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.baseRequest('remove', { id: val.id }).then(res => {
                    if (res.data.code == 200) {
                        this.getData()
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.data.msg
                        })
                    }
                }).catch((err) => {
                    this.$message({
                        type: 'error',
                        message: err
                    })
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        baseRequest(opUrl, postData) {
            return this.$channel.globeRequest('PayLogController', opUrl, postData, 'project')
        }
    }
}
</script>

<style scoped>

</style>