settle_down_web/src/views/customerManagement/intentionalDeposit/addIntentionalDeposit.vue

<template>
  <div>
    <el-form ref="form" v-loading="addLoading" :model="form" style="width: 100%;padding: 5px" :rules="rules">
      <el-row class="handle-box">
        <el-col :span="24">
          <span class="card_title">客户信息</span>
        </el-col>
      </el-row>
      <el-row class="handle-box">
        <el-col :span="4">
          <span>小区-分期:</span>
          <span>{{ customerForm.groupDiscName }}</span>
        </el-col>
        <el-col :span="4">
          <span>批次号:</span>
          <span>{{ customerForm.batchNumber }}</span>
        </el-col>
        <el-col :span="4">
          <span>选房号:</span>
          <span>{{ customerForm.roomSelectionNumber }}</span>
        </el-col>
        <el-col :span="4">
          <span>买受人:</span>
          <span>{{ customerForm.buyerName }}</span>
        </el-col>
        <el-col :span="4">
          <span>选房日期:</span>
          <span>{{ customerForm.roomSelectionDate }}</span>
        </el-col>
      </el-row>
      <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 v-if="form.serialNumber">
              <el-col :span="3" class="col-txt"><span>意向金编号:</span></el-col>
              <el-col :span="3" class="col-txt"><span>{{ serialNumber }}</span></el-col>
            </el-row>
            <el-row>
              <el-col :span="3" class="col-txt"><span><span class="red-asterisk">*</span>应收意向金（元）</span></el-col>
              <el-col :span="9" class="col-input">
                <el-form-item prop="receivableMoney">
                  <el-input v-model="form.receivableMoney" />
                </el-form-item>
              </el-col>
              <el-col :span="3" class="col-txt"><span><span class="red-asterisk">*</span>实收金额（元）</span></el-col>
              <el-col :span="9" class="col-input">
                <el-form-item prop="receivedAmount">
                  <el-input v-model="form.receivedAmount" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="3" class="col-txt"><span><span class="red-asterisk">*</span>收款方式</span></el-col>
              <el-col :span="9" class="col-input">
                <el-form-item prop="paymentMethod">
                  <el-select
                    v-model="form.paymentMethod"
                    placeholder=""
                    filterable
                    clearable
                  >
                    <el-option
                      v-for="item in dc_data.COLLECTION_METHODS"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3" class="col-txt"><span><span class="red-asterisk">*</span>收款时间</span></el-col>
              <el-col :span="9" class="col-input">
                <el-form-item prop="collectionTime">
                  <el-date-picker
                    v-model="form.collectionTime"
                    popper-class="statistic_base"
                    type="date"
                    placeholder="年月日"
                    value-format="yyyy-MM-dd"
                  />
                </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-select
                    v-model="bankObject"
                    placeholder=""
                    filterable
                    clearable
                    @change="bankChange"
                  >
                    <el-option
                      v-for="item in bankOptions"
                      :key="item.value"
                      :label="item.bankName + (item.bankBranchName?item.bankBranchName:'') + item.bankNumber"
                      :value="item.id"
                    />
                  </el-select>
                </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.ncBankSerialId" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="3" class="col-txt"><span>备注</span></el-col>
              <el-col :span="21" class="col-input">
                <el-form-item>
                  <el-input v-model="form.remark" type="textarea" :autosize="{ minRows: 2, maxRows: 100}" placeholder="请输入内容" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="3" class="col-txt"><span>附件</span></el-col>
              <el-col :span="15" class="col-input">
                <el-form-item>
                  <el-upload
                    class="upload-demo"
                    action="/server/wx/fileController/uploadImage"
                    :http-request="uploadPhoto"
                    :before-remove="beforeRemove"
                    multiple
                    :file-list="fileList"
                    :limit="6"
                    :before-upload="$common.beforeUploadJustWordExcel"
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="file" slot-scope="{file}" style="overflow:hidden;white-space: nowrap;text-overflow:ellipsis">
                      <el-tooltip class="item" effect="dark" :content="file.name" placement="top-start">
                        <a :href="file.url">{{ file.name }}</a>
                      </el-tooltip>
                      <span class="el-upload-list__item-actions">
                        <i class="el-icon-delete" @click="handlePictureRemove(file,fileList)" />
                      </span>
                    </div>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="6" class="col-input">
                <el-button v-if="isView" type="text" style="float: right" @click="downLoad()">意向金收据下载</el-button>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="3" class="col-txt"><span>经办时间</span></el-col>
              <el-col :span="3" class="col-input"><span>{{ dateStr }}</span></el-col>
            </el-row>
            <el-row>
              <el-col :span="3" class="col-txt"><span>经办人</span></el-col>
              <el-col :span="3" class="col-input"><span>{{ username }}</span></el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-form>
    <div style="text-align: right">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="confirmSubmit()">提 交</el-button>
    </div>

  </div>
</template>

<script>
import Base from '@/views/base/base'
import BaseData from '@/views/base/baseData'
import { upload } from '@/static/utils/channel'
import constant from '@/static/utils/constant'

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

            },
            rules: {
                receivableMoney: [{ required: true, trigger: 'blur', message: '请输入应收定金' }],
                receivedAmount: [{ required: true, trigger: 'blur', message: '请输入实收金额' }],
                paymentMethod: [{ required: true, trigger: 'change', message: '请输入实收金额' }],
                collectionTime: [{ required: true, trigger: 'blur', message: '请选择收款时间' }]
            },
            addLoading: false,
            serialNumber: '',
            fileList: [],
            customerManagementId: '',
            intentionalDepositId: '',
            dateStr: '',
            username: '',
            isView: false,
            bankOptions: [],
            bankObject: '',
            customerForm: {

            }
        }
    },
    mounted() {
        const myDate = new Date()
        const dateStr = myDate.getFullYear() + '-' + (myDate.getMonth() + 1) + '-' + myDate.getDate()
        const username = this.$common.currUser().username
        this.dateStr = dateStr
        this.username = username
    },
    methods: {
        initData(data) {
            this.getBankOptions()
            this.customerManagementId = data.id
            this.intentionalDepositId = data.intentionalDepositId
            this.initDict(this.dc_key).then(res => {
                this.getByCustomerManagementId(data)
                this.getCustomerById(this.customerManagementId)
            })
        },
        handleChange(value) {

        },
        getByCustomerManagementId(val) {
            const data = {
                customerManagementId: val.id
            }
            this.baseRequest('getByCustomerManagementId', data).then(res => {
                if (res.data) {
                    this.form = res.data
                    this.serialNumber = this.form.serialNumber
                    this.form.paymentMethod = this.form.paymentMethod + ''
                    if (this.form.fileList) {
                        this.fileList = JSON.parse(this.form.fileList)
                    }
                    this.dateStr = this.form.createdAt
                    this.username = this.form.createdName
                } else {
                    // this.getSerialNumber(val)
                    this.getFQById(val)
                }
            })
        },
        getSerialNumber(val) {
            const data = {
                customerManagementId: val.id
            }
            this.baseRequest('getSerialNumber', data).then(res => {
                this.serialNumber = res.data
            })
        },
        getFQById(val) {
            const data = {
                id: val.discId
            }
            this.baseFQRequest('getById', data).then(res => {
                this.$set(this.form, 'receivableMoney', res.data.subscriptionFunds)
            })
        },
        confirmSubmit: function() {
            const _this = this
            this.$refs.form.validate(valid => {
                if (valid) {
                    let soaUrl = 'add'
                    // 已收取状态
                    if (_this.intentionalDepositId) {
                        soaUrl = 'edit'
                        _this.form.id = _this.intentionalDepositId
                    }
                    const extraData = {
                        customerManagementId: this.customerManagementId,
                        serialNumber: _this.serialNumber,
                        fileList: JSON.stringify(_this.fileList)
                    }
                    const postData = Object.assign({}, _this.form, extraData)
                    this.baseRequest(soaUrl, postData).then(res => {
                        if (res.data.code === 200) {
                            _this.$message({
                                message: '新增成功',
                                type: 'success'
                            })
                            _this.cancel()
                        } else {
                            _this.$message({
                                message: res.msg,
                                type: 'warning'
                            })
                        }
                    }).catch(err => {
                        _this.$message({
                            message: err,
                            type: 'warning'
                        })
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        cancel() {
            this.$emit('cancel')
        },

        uploadPhoto: function(param) {
            upload(param, true).then((res) => {
                this.fileList.push(res)
            })
        },
        downLoad() {
            const url = constant.BASE_URI + '/IntentionalDepositController/downLoadReceipt?id=' + this.form.id
            window.open(url, '_blank')
        },
        getBankOptions() {
            this.bankRequest('listAll', {}).then(res => {
                this.bankOptions = res.data || []
            })
        },
        bankChange(data) {
            const val = this.bankOptions.find((e) => { return data == e.id })
            this.form.bankName = val.bankName
            this.form.bankBranchName = val.bankBranchName
            this.form.bankNumber = val.bankNumber
        },
        getBankByFloor() {
            this.fundRequest('getBankByFloor', { contractId: this.contractId }).then(res => {
                if (res.data) {
                    this.bankObject = res.data.bankFullName
                    this.form.bankName = res.data.bankName
                    this.form.bankBranchName = res.data.bankBranchName
                    this.form.bankNumber = res.data.bankNumber
                }
            })
        },
        getCustomerById(val) {
            this.customerForm = {}
            this.baseCustomerRequest('getById', { id: val }).then(res => {
                this.customerForm = res.data
            }).catch((err) => {
            })
        },
        // beforeUpload(file) {
        //     const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1)
        //
        //     const whiteList = ['pdf', 'doc', 'docx', 'xls', 'xlsx']
        //
        //     if (whiteList.indexOf(fileSuffix) === -1) {
        //         this.$message.error('上传文件只能是 pdf、doc、docx、xls、xlsx格式')
        //         return false
        //     }
        //
        //     const isLt2M = file.size / 1024 / 1024 < 50
        //
        //     if (!isLt2M) {
        //         this.$message.error('上传文件大小不能超过 5MB')
        //         return false
        //     }
        // },
        baseRequest(opUrl, postData) {
            return this.$channel.globeRequest('IntentionalDepositController', opUrl, postData, 'project')
        },
        baseFQRequest: function(opUrl, postData) {
            return this.$channel.baseRequest('ParkFloorDiscController', opUrl, postData, 'User')
        },
        bankRequest(opUrl, postData) {
            return this.$channel.globeRequest('InvoiceBankController', opUrl, postData, 'project')
        },
        fundRequest(opUrl, postData) {
            return this.$channel.globeRequest('MaintenanceFundsManagementController', opUrl, postData, 'project')
        },
        baseCustomerRequest(opUrl, postData) {
            return this.$channel.globeRequest('CustomerManagementController', opUrl, postData, 'project')
        }

    }
}
</script>

<style scoped>
.red-asterisk {
    color: red;
}
</style>