danbaoMobel.vue 8.84 KB
<template>
    <a-modal :title="title" :width="800" :centered="true" :visible="visible" :confirmLoading="confirmLoading"
        @ok="handleSubmit" @cancel="handleCancel" cancelText="关闭" :maskClosable="false" style="top:20px;"
        class="scope-link-man">
        <a-spin :spinning="confirmLoading">
            <a-form :form="form">
                <a-row :gutter="24">
                    <a-col :span="12">
                        <a-form-item label="担保对象" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                            <a-input placeholder="请输入担保对象" v-decorator="['guaranteeName',
                            {
                                initialValue: validatorRules ? validatorRules.guaranteeName : '', rules: [
                                    {
                                        required: true,
                                        message: '请输入担保对象'
                                    }]
                            }]" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="担保金额(元)" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                            <a-input placeholder="请输入担保金额(元)" v-model="validatorRules.guaranteeMoney" v-decorator="['guaranteeMoney', {
                                initialValue: validatorRules ? validatorRules.guaranteeMoney : '', rules: [
                                    {
                                        required: true,
                                        message: '请输入担保金额'
                                    }]
                            }]" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24">
                    <a-col :span="12">
                        <a-form-item label="担保开始时间" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                            <a-date-picker show-time placeholder="请输入担保开始时间" format="YYYY-MM-DD"
                                v-decorator="['guaranteeStartTime', { initialValue: validatorRules ? validatorRules.guaranteeStartTime : '',rules: [
                                    {
                                        required: true,
                                        message: '请输入担保开始时间'
                                    }]}]" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="担保结束时间" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                            <a-date-picker show-time placeholder="请输入担保结束时间" format="YYYY-MM-DD"
                                v-decorator="['guaranteeEndTime', { initialValue: validatorRules ? validatorRules.guaranteeEndTime : '',rules: [
                                    {
                                        required: true,
                                        message: '请输入担保结束时间'
                                    }] }]" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24">
                    <a-col :span="12">
                        <a-form-item label="担保责任比例(%)" :labelCol="{ span: 10 }" :wrapperCol="{ span: 14 }">
                            <a-input placeholder="请输入担保责任比例(%)" v-model="validatorRules.guaranteeDutyRate" v-decorator="['guaranteeDutyRate', {
                                initialValue: validatorRules ? validatorRules.guaranteeDutyRate : '', rules: [{
                                    required: true,
                                    message: '请输入担保责任比例(%)'
                                }]
                            }]" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="担保责任金额" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                            <a-input placeholder="请输入担保责任金额" v-model="zj" :readOnly='true'/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="担保责任方式" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                            <a-select placeholder="请选择担保责任方式" :disabled="onlyread && disableSubmit"
                                v-decorator="['guaranteeDutyType', { initialValue: model ? model.guaranteeDutyType : '', rules: [{ required: true, message: '请输入担保人类型' }] }]">
                                <a-select-option :value="1">连带责任担保</a-select-option>
                                <a-select-option :value="2">部分责任担保</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </a-spin>
    </a-modal>
</template>

<script>
import { modifyCollCusBankAccount, saveContingentLiabilityInfo } from '@/api/configApi'
import pick from 'lodash.pick'

export default {
    name: 'danbaoMobel',
    data() {
        return {
            visible: false,
            confirmLoading: false,
            title: '',
            status: '',
            page: '',
            validatorRules: {
                // bankCardNo: {
                //   rules: [
                //     {
                //       required: true,
                //       message: '请输入银行卡号'
                //     }
                //   ]
                // },
                // bankName: {
                //   rules: [
                //     {
                //       required: true,
                //       message: '请输入开户行名称'
                //     }
                //   ]
                // },
                // bankCardType: {
                //   rules: [
                //     {
                //       required: true,
                //       message: '请选择银行卡类别'
                //     }
                //   ]
                // }
            },

            model: {},

            form: this.$form.createForm(this)
        }
    },
    computed:{
        zj(){
           return Number(this.validatorRules.guaranteeMoney) * (Number(this.validatorRules.guaranteeDutyRate)/100) || 0
        }
    },
    methods: {
        edit(record) {
            this.page = 2
            this.form.resetFields()
            this.model = Object.assign({}, record)
            console.log(this.model)
            this.visible = true
            this.$nextTick(() => {
                this.form.setFieldsValue(pick(this.model, 'bankName', 'bankCardType'))
            })
        },

        add(applyNo) {
            this.page = 1
            this.validatorRules = {}
            let data = { applyNo: applyNo, accountType: 1 }
            this.model = Object.assign({}, data)
            this.form.resetFields()
            this.visible = true
        },

        close() {
            this.$emit('close')
            this.visible = false
            this.disableSubmit = false
            this.selectedRole = []
        },
        handleSubmit() {
            // 触发表单验证
            this.form.validateFields((err, values) => {
                console.log(err, values)
                if (!err) {
                    this.confirmLoading = true
                    let guaranteeDutyMoney = { guaranteeDutyMoney: this.zj }
                    let applyNo = { applyNo: localStorage.getItem("dh"), customerType: "1" }
                    // let customerType = {customerType:"1"}
                    let formData = Object.assign(this.model, values, applyNo,guaranteeDutyMoney)
                    if (this.page == 1) {
                        saveContingentLiabilityInfo(formData)
                            .then(res => {
                                if (res.status.statusCode == 0) {
                                    this.$message.success(res.status.statusReason)
                                    this.$emit('commonBankAccountModalOk')
                                } else {
                                    this.$message.warning(res.status.statusReason)
                                }
                            })
                            .finally(() => {
                                this.confirmLoading = false
                                this.close()
                            })
                    } else {

                    }
                }
            })
        },
        handleCancel() {
            this.close()
        }
    }
}
</script>
<style>
.scope-link-man .ant-modal-body {
    overflow-y: scroll;
    overflow-x: hidden;
    min-height: 200px;
}
</style>