settle_down_web/src/views/customerManagement/subscribe/addSubscribe.vue

<template>
  <div>
    <el-form ref="form" v-loading="addLoading" :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="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="21" 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"
                  >
                    <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-row>
          </el-card>
        </el-col>
      </el-row>
    </el-form>
    <div style="text-align: right">
      <el-button @click="cancel">取 消</el-button>
      <el-button v-if="!isView" 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'

export default {
    name: 'AddCustomer',
    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: [],
            isView: false,
            bankOptions: [],
            bankObject: ''
        }
    },
    mounted() {

    },
    methods: {
        initData(data) {
            this.form = data
            this.isView = data.isView
            this.getBankOptions()
            this.initDict(this.dc_key).then(res => {
                if (data.statusStr === '未收取') {
                    this.getSerialNumber(data)
                    this.form.receivableMoney = data.receivableMoney
                    // this.getBankByFloor()
                } else {
                    this.getById(data.id)
                }
            })
        },
        handleChange(value) {

        },
        getById(val) {
            this.baseRequest('getById', { id: val }).then(res => {
                this.form = res.data
                this.serialNumber = this.form.serialNumber
                if (this.form.paymentMethod) {
                    this.form.paymentMethod = this.form.paymentMethod + ''
                }
                if (this.form.fileList) {
                    this.fileList = JSON.parse(this.form.fileList)
                }
                this.bankObject = res.data.bankName + res.data.bankBranchName + res.data.bankNumber
            })
        },
        getSerialNumber(val) {
            const data = {
                houseId: val.houseId
            }
            this.baseRequest('getSerialNumber', data).then(res => {
                this.serialNumber = res.data
            })
        },
        confirmSubmit: function() {
            const _this = this
            this.$refs.form.validate(valid => {
                if (valid) {
                    let soaUrl = 'add'
                    // 已收取状态
                    if (_this.form.status === 2) {
                        soaUrl = 'edit'
                    }
                    const extraData = {
                        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)
            })
        },
        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
                }
            })
        },
        baseRequest(opUrl, postData) {
            return this.$channel.globeRequest('RoomSelectionInfoController', opUrl, postData, 'project')
        },
        baseInfoRequest: function(opUrl, postData) {
            return this.$channel.baseRequest('ParkInfoController', 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')
        }

    }
}
</script>

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