settle_down_web/src/views/receiveRefundsManagement/paymentManagement/addPayment.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 v-if="!isView" :span="9" class="col-input">
                <el-form-item>
                  <el-select
                    v-model="form.contentType"
                    clearable
                    filterable
                  >
                    <el-option
                      v-for="item in contentTypeOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col v-else :span="9" class="col-input">
                <el-form-item>
                  <el-select
                    v-model="form.contentType"
                    clearable
                    filterable
                  >
                    <el-option
                      v-for="item in dc_data.CONTENT_TYPE"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </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="form.paymentMethod"
                    clearable
                    filterable
                    @change="paymentMethodChange"
                  >
                    <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></el-col>
              <el-col :span="9" class="col-input">
                <el-form-item>
                  <el-date-picker
                    v-model="form.payTime"
                    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-autocomplete
                    v-model="form.bankName"
                    class="inline-input"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入银行账号"
                    style="width: 100%"
                    @select="handleSelect"
                  />
                </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.bankNumber" />
                </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.payMoney" />
                </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="beforeLogoUploadJustImage"
                  >
                    <el-button v-if="!isView" 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-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 v-if="!isView" :loading="loading" 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: 'AddPayment',
    components: { },
    mixins: [Base, BaseData],
    data() {
        return {
            dc_key: ['CONTENT_TYPE', 'PAYMENT_METHODS', 'COLLECTION_METHODS'],
            form: {
                bankName: '',
                bankBranchName: '',
                bankNumber: ''
            },
            rules: {

            },
            AllData: [],
            loading: false,
            addLoading: false,
            bankOptions: [],
            bankObject: '',
            dateStr: '',
            username: '',
            isView: false,
            fileList: [],
            contractId: '',
            houseId: '',
            customerManagementId: '',
            contentTypeOption: []
        }
    },
    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.addLoading = true
            this.isView = data.isView
            this.contractId = data.contractId
            this.houseId = data.houseId
            this.customerManagementId = data.customerManagementId

            this.getBankOptions()
            this.initDict(this.dc_key).then(res => {
                this.contentTypeOption = this.dc_data.CONTENT_TYPE.filter(item =>
                    item.label !== '专项维修资金' && item.label !== '意向金' && item.label !== '首款-定金转' &&
                    item.label !== '房款-定金转' && item.label !== '定金')
                if (data.id) {
                    this.getById(data)
                } else {
                    // 默认带出合同里的 银行信息
                    // this.getBankByFloor()
                    this.form.bankName = data.bankName
                    this.form.bankNumber = data.bankNumber
                }
                this.addLoading = false
            })
        },
        getById(data) {
            const postData = {
                id: data.id
            }
            this.baseRequest('getById', postData).then(res => {
                this.form = res.data
                this.form.contentType = res.data.contentType + ''
                this.form.paymentMethod = res.data.paymentMethod + ''
                if (this.form.fileList) {
                    this.fileList = JSON.parse(this.form.fileList)
                }
                if (res.data.createdName) {
                    this.username = res.data.createdName
                }
                if (res.data.createdAt) {
                    this.dateStr = res.data.createdAt
                }
                // this.bankObject = res.data.bankName + res.data.bankBranchName + res.data.bankNumber
            })
        },
        confirmSubmit: function() {
            const _this = this
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.loading = true
                    const soaUrl = 'add'
                    const extraData = {
                        fileList: JSON.stringify(_this.fileList),
                        contractId: this.contractId,
                        houseId: this.houseId,
                        customerManagementId: this.customerManagementId,
                        payType: '1'
                    }
                    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'
                            })
                        }
                        this.loading = false
                    }).catch(err => {
                        _this.$message({
                            message: err,
                            type: 'warning'
                        })
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        cancel() {
            this.$emit('cancel')
        },
        // 删除单个行
        handleDelete(index) {
            this.AllData.splice(index, 1)
        },
        getBankOptions() {
            this.bankOptions = []
            this.bankRequest('listAll', {}).then(res => {
                const bankList = res.data || []
                bankList.forEach(item => {
                    const obj = {
                        value: item.bankBranchName + item.bankName,
                        label: item.bankNumber,
                        id: item.id
                    }
                    this.bankOptions.push(obj)
                })
            })
        },
        // 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
        //         }
        //     })
        // },
        uploadPhoto: function(param) {
            upload(param, true).then((res) => {
                this.fileList.push(res)
            })
        },
        querySearch(queryString, cb) {
            var restaurants = this.bankOptions
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
            // 调用 callback 返回建议列表的数据
            cb(results)
        },
        createFilter(queryString) {
            return (restaurant) => {
                return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
            }
        },
        handleSelect(item) {
            this.form.bankNumber = item.label
        },
        paymentMethodChange(item) {
            if (item == '1') {
                this.form.bankName = ''
                this.form.bankNumber = ''
            }
        },
        baseRequest(opUrl, postData) {
            return this.$channel.globeRequest('PayLogController', opUrl, postData, 'project')
        },
        bankRequest(opUrl, postData) {
            return this.$channel.globeRequest('InvoiceBankController', opUrl, postData, 'project')
        },
        fundRequest(opUrl, postData) {
            return this.$channel.globeRequest('MaintenanceFundsManagementController', opUrl, postData, 'project')
        },
        baseContractRequest(opUrl, postData) {
            return this.$channel.globeRequest('ContractManageController', opUrl, postData, 'project')
        }

    }
}
</script>

<style scoped>

</style>