<template>
|
<div class="mask">
|
<el-dialog
|
width="700px"
|
:visible.sync="showMask"
|
:close-on-click-modal="false"
|
@close="cancel"
|
>
|
<p slot="title">手工放款</p>
|
<div>
|
<el-form
|
:model="formData"
|
:rules="rules"
|
ref="ruleForm"
|
label-width="150px"
|
class="demo-ruleForm"
|
>
|
<el-form-item class="formItem" label="客户名称" prop="acctName">
|
<el-input
|
v-model="formData.acctName"
|
placeholder="请输入客户名称"
|
style="width: 197px"
|
></el-input>
|
</el-form-item>
|
<el-form-item class="formItem" label="证件号码" prop="idNo">
|
<el-input
|
v-model="formData.idNo"
|
placeholder="请输入"
|
style="width: 197px"
|
></el-input>
|
</el-form-item>
|
<el-form-item class="formItem" label="银行" prop="bankId">
|
<el-select
|
v-model="formData.bankId"
|
placeholder="请选择"
|
clearable
|
filterable
|
>
|
<el-option
|
v-for="(item, index) in bankList"
|
:key="index"
|
:label="item.BANK_NAME"
|
:value="item.BANK_ID"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item class="formItem" label="放款银行账号" prop="acctNo">
|
<el-input
|
v-model="formData.acctNo"
|
placeholder="请输入"
|
style="width: 197px"
|
@blur.self="
|
formData.acctNo = formatBC(formData.acctNo);
|
"
|
></el-input>
|
</el-form-item>
|
<el-form-item class="formItem unit" label="放款金额" prop="amount">
|
<span class="unit" v-show="isShowUnit">{{ unitZH }}</span>
|
<el-input
|
style="width: 170px"
|
placeholder="请输入"
|
v-model="formData.amount"
|
:maxlength="15"
|
@blur.self="
|
formData.amount = maxNumFilter(300000);
|
formData.amount = formatMoney(formData.amount);
|
"
|
>
|
<template slot="append">元</template>
|
</el-input>
|
</el-form-item>
|
</el-form>
|
<div class="formBtn">
|
<div>
|
<el-button :disabled="keyed" type="primary" @click="submit('ruleForm')"
|
>提交</el-button
|
>
|
<el-button @click="cancel">取消</el-button>
|
</div>
|
</div>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters, mapMutations } from "vuex";
|
import utils from "@/assets/js/utils.js";
|
|
export default {
|
props: ["clickType", "bankList", "bankMap"],
|
data() {
|
var checkNum = (rule, value, callback) => {
|
if (this.amount > 300000 || this.amount <= 0) {
|
callback(new Error("请输入大于且0小于30万的数字入"));
|
} else if (!this.amount) {
|
callback(new Error("请输入"));
|
} else {
|
callback();
|
}
|
};
|
return {
|
showMask: false,
|
isShowUnit: false,
|
keyed: false,
|
loading: null,
|
amount: "",
|
formData: {
|
// acctName: "张三",
|
// idNo: "37078119890914437X",
|
amount: "",
|
// bankId: "CCB",
|
// acctNo: "370781198909144370",
|
},
|
rules: {
|
acctName: [
|
{
|
required: true,
|
message: "请输入",
|
trigger: "blur",
|
},
|
],
|
|
idNo: [
|
{
|
required: true,
|
message: "请输入",
|
trigger: "blur",
|
},
|
{
|
// pattern:
|
// /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
|
// message: "请输入合法身份证号",
|
trigger: "blur",
|
validator: utils.checkIdCode,
|
},
|
],
|
bankId: [
|
{
|
required: true,
|
message: "请选择",
|
trigger: "change",
|
},
|
],
|
acctNo: [
|
{
|
required: true,
|
trigger: "blur",
|
validator: utils.bankAccountValid,
|
},
|
],
|
amount: [
|
{
|
required: true,
|
validator: checkNum,
|
},
|
],
|
},
|
};
|
},
|
computed: {
|
unitZH() {
|
const { amount } = this;
|
|
let num = amount.toString();
|
if (num.includes(".")) {
|
num = num.split(".")[0];
|
}
|
|
const unitMap = {2: "十",3: "百",4: "千",5: "万",6: "十万",7: "百万",8: "千万",9: "亿",10: "十亿",11: "百亿",12: "千亿",13: "万亿",14: "十万亿",15: "百万亿" };
|
return unitMap[num.length];
|
},
|
},
|
watch: {
|
"formData.amount"(newValue) {
|
let amount = '';
|
if (!this.formData.amount.length) {
|
return "";
|
}
|
this.formData.amount.split(",").map((item) => {
|
amount += item;
|
});
|
amount = Number(amount);
|
this.amount = amount;
|
this.isShowUnit = amount.toString().split(".")[0].length > 1
|
|
},
|
},
|
methods: {
|
initData(type = "add", data) {
|
data = JSON.parse(JSON.stringify(data))
|
if (type != "add") {
|
data.amount = this.formatMoney(data.amount);
|
data.acctNo = this.formatBC(data.acctNo);
|
this.formData = data
|
}
|
this.isShowUnit = false;
|
this.showMask = true;
|
},
|
// 取消
|
cancel() {
|
this.$refs.ruleForm.resetFields();
|
this.formData = { amount: "" };
|
this.amount = ""
|
this.showMask = false;
|
},
|
// 提交
|
submit(formname) {
|
this.$refs[formname].validate((valid) => {
|
if (valid) {
|
const { formData, bankMap } = this;
|
this.$confirm(
|
`<div class="confirm-block">
|
<p><span class="label">客户名称：</span><span class="txt">${formData.acctName}</span></p>
|
<p><span class="label">证件号码：</span><span class="txt">${formData.idNo}</span></p>
|
<p><span class="label">银行：</span><span class="txt">${bankMap[formData.bankId]}</span></p>
|
<p><span class="label">放款银行账户：</span><span class="txt">${formData.acctNo}</span></p>
|
<p><span class="label">放款金额：</span><span class="txt red">${formData.amount}</span></p>
|
</div>`,
|
"请确认放款信息",
|
{
|
closeOnClickModal: false,
|
dangerouslyUseHTMLString: true,
|
confirmButtonText: "确定提交",
|
cancelButtonText: "返回修改",
|
}
|
)
|
.then(() => {
|
if (this.keyed) return;
|
this.addChannel();
|
})
|
.catch((action) => {
|
setTimeout(() => {
|
// this.showMask = true;
|
}, 400);
|
});
|
}
|
});
|
},
|
// 确认放款
|
addChannel() {
|
this.keyed = true;
|
this.showLoading()
|
let { formData, amount } = this;
|
const acctNo = formData.acctNo.replace(/\s+/g,"")
|
let params = {
|
acctName: formData.acctName,
|
idNo: formData.idNo,
|
amount: amount,
|
bankId: formData.bankId,
|
acctNo: acctNo,
|
};
|
// let params = {
|
// acctName: '张三',
|
// idNo: '37078119890914437X',
|
// amount: '100',
|
// bankId: 'CCB',
|
// acctNo: '370781198909144370',
|
// }
|
// return;
|
this.$http
|
.post(
|
"handPutout/create",
|
this.clickType == "add"
|
? { ...params }
|
: { ...params, id: formData.id }
|
)
|
.then((response) => {
|
const retHeader = response.data.retHeader;
|
this.keyed = false;
|
this.closeLoading()
|
if (retHeader.retCode === "0000") {
|
this.$refs.ruleForm.resetFields();
|
this.showMask = false;
|
setTimeout(() => {
|
this.$message.success(retHeader.retMessage);
|
this.$emit("hide", true);
|
}, 0);
|
} else {
|
this.$message.error(retHeader.retMessage);
|
}
|
})
|
.catch((err) => {
|
this.keyed = false;
|
this.closeLoading()
|
console.log(err);
|
});
|
},
|
maxNumFilter(maxNum = 10000) {
|
let num = this.amount;
|
if (this.amount > maxNum) {
|
num = maxNum;
|
}
|
return num.toString();
|
},
|
formatMoney(val) {
|
val = utils.formatMoney(val);
|
return val;
|
},
|
formatBC(val) {
|
val = utils.formatBC(val);
|
return val;
|
},
|
showLoading() {
|
this.loading = this.$loading({
|
background: 'rgba(0, 0, 0, 0.1)'
|
});
|
},
|
closeLoading() {
|
this.loading && this.loading.close()
|
}
|
},
|
};
|
</script>
|
|
|
<style lang="less" scoped>
|
.mask {
|
background-color: #fff;
|
padding: 16px;
|
border-radius: 6px;
|
margin-bottom: 20px;
|
> form {
|
border-bottom: 1px solid #ccc;
|
margin-bottom: 12px;
|
}
|
.formBtn {
|
border-top: 1px solid #f5f5f5;
|
width: 100%;
|
// height: 30px;
|
text-align: center;
|
padding: 20px 0 10px;
|
> div {
|
display: inline-block;
|
button {
|
padding: 8px 20px;
|
}
|
}
|
}
|
.formItem {
|
width: 100%;
|
height: 50px;
|
padding: 8px 0px;
|
/deep/label {
|
// display: inline-block;
|
// width: 15%;
|
// text-align: right;
|
// font-size: 14px;
|
}
|
/deep/input {
|
width: 300px;
|
&::-webkit-outer-spin-button,
|
&::-webkit-inner-spin-button {
|
-webkit-appearance: none;
|
}
|
}
|
input:disabled {
|
background-color: #fff;
|
}
|
input.width {
|
border: 1px solid #ccc;
|
border-radius: 4px;
|
}
|
.unit {
|
position: absolute;
|
top: -20px;
|
font-size: 10px;
|
color: #929292;
|
left: 22px;
|
border-left: 1px solid #dcdcdc;
|
height: 16px;
|
line-height: 16px;
|
padding-left: 3px;
|
}
|
|
&.unit {
|
/deep/input {
|
width: 245px;
|
}
|
}
|
}
|
.canEdit {
|
border-top: 1px solid #ccc;
|
padding-top: 6px;
|
}
|
|
}
|
|
</style>
|
<style lang="less">
|
.confirm-block {
|
p {
|
margin-bottom: 6px;
|
}
|
.label {
|
display: inline-block;
|
width: 100px;
|
text-align: right;
|
margin-right: 4px;
|
color: #828282;
|
}
|
.txt{
|
color: #000;
|
font-weight: bold;
|
font-size: 16px;
|
}
|
.red {
|
color: red;
|
}
|
}
|
</style>
|
