抽离组件 添加下拉框
This commit is contained in:
@@ -0,0 +1,319 @@
|
||||
<template>
|
||||
<el-dialog title="新增利率定价流程" :visible.sync="dialogVisible" width="900px" append-to-body @close="handleClose">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="140px">
|
||||
<el-tabs v-model="activeTab">
|
||||
<!-- 基本信息 -->
|
||||
<el-tab-pane label="基本信息" name="basic">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="客户内码" prop="custIsn">
|
||||
<el-input v-model="form.custIsn" placeholder="请输入客户内码" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="客户名称" prop="custName">
|
||||
<el-input v-model="form.custName" placeholder="请输入客户名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="客户类型" prop="custType">
|
||||
<el-select v-model="form.custType" placeholder="请选择客户类型" style="width: 100%">
|
||||
<el-option label="个人" value="个人" />
|
||||
<el-option label="企业" value="企业" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="证件类型" prop="idType">
|
||||
<el-select v-model="form.idType" placeholder="请选择证件类型" style="width: 100%">
|
||||
<el-option label="身份证" value="身份证" />
|
||||
<el-option label="统一社会信用代码" value="统一社会信用代码" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 贷款信息 -->
|
||||
<el-tab-pane label="贷款信息" name="loan">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="申请金额(元)" prop="applyAmt">
|
||||
<el-input v-model="form.applyAmt" placeholder="请输入申请金额" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="贷款利率(%)" prop="loanRate">
|
||||
<el-input v-model="form.loanRate" placeholder="请输入贷款利率" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="担保方式" prop="guarType">
|
||||
<el-select v-model="form.guarType" placeholder="请选择担保方式" style="width: 100%">
|
||||
<el-option label="信用" value="信用" />
|
||||
<el-option label="保证" value="保证" />
|
||||
<el-option label="抵押" value="抵押" />
|
||||
<el-option label="质押" value="质押" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="贷款用途" prop="loanPurpose">
|
||||
<el-select v-model="form.loanPurpose" placeholder="请选择贷款用途" style="width: 100%">
|
||||
<el-option label="消费贷款" value="consumer" />
|
||||
<el-option label="经营贷款" value="business" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="抵质押类型" prop="collType">
|
||||
<el-select v-model="form.collType" placeholder="请选择抵质押类型" style="width: 100%">
|
||||
<el-option label="一线" value="一线" />
|
||||
<el-option label="一类" value="一类" />
|
||||
<el-option label="二类" value="二类" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="是否有经营佐证">
|
||||
<el-switch v-model="form.bizProofActive" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="抵质押物三方所有">
|
||||
<el-switch v-model="form.collThirdPartyActive" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 中间业务标识 -->
|
||||
<el-tab-pane label="中间业务标识" name="mid">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="个人快捷支付">
|
||||
<el-switch v-model="form.midPerQuickPayActive" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="个人电费代扣">
|
||||
<el-switch v-model="form.midPerEleDdcActive" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="企业电费代扣">
|
||||
<el-switch v-model="form.midEntEleDdcActive" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="企业水费代扣">
|
||||
<el-switch v-model="form.midEntWaterDdcActive" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 企业标识 -->
|
||||
<el-tab-pane label="企业标识" name="ent">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="净身企业">
|
||||
<el-switch v-model="form.isCleanEntActive" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="开立基本结算账户">
|
||||
<el-switch v-model="form.hasSettleAcctActive" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="制造业企业">
|
||||
<el-switch v-model="form.isManufacturingActive" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="省农担担保贷款">
|
||||
<el-switch v-model="form.isAgriGuarActive" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="纳税信用等级A级">
|
||||
<el-switch v-model="form.isTaxAActive" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="县级及以上农业龙头企业">
|
||||
<el-switch v-model="form.isAgriLeadingActive" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="普惠小微借款人">
|
||||
<el-switch v-model="form.isInclusiveFinanceActive" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { createWorkflow } from "@/api/loanPricing/workflow"
|
||||
|
||||
export default {
|
||||
name: "WorkflowCreateDialog",
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: 'basic',
|
||||
form: {},
|
||||
rules: {
|
||||
custIsn: [
|
||||
{ required: true, message: "客户内码不能为空", trigger: "blur" }
|
||||
],
|
||||
custType: [
|
||||
{ required: true, message: "请选择客户类型", trigger: "change" }
|
||||
],
|
||||
guarType: [
|
||||
{ required: true, message: "请选择担保方式", trigger: "change" }
|
||||
],
|
||||
applyAmt: [
|
||||
{ required: true, message: "申请金额不能为空", trigger: "blur" }
|
||||
],
|
||||
loanRate: [
|
||||
{ required: true, message: "贷款利率不能为空", trigger: "blur" }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dialogVisible: {
|
||||
get() {
|
||||
return this.visible
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:visible', val)
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible(val) {
|
||||
if (val) {
|
||||
this.reset()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/** 表单重置 */
|
||||
reset() {
|
||||
this.form = {
|
||||
orgCode: '931000',
|
||||
runType: '1',
|
||||
custIsn: undefined,
|
||||
custName: undefined,
|
||||
custType: undefined,
|
||||
idType: undefined,
|
||||
applyAmt: undefined,
|
||||
loanRate: undefined,
|
||||
guarType: undefined,
|
||||
loanPurpose: undefined,
|
||||
collType: undefined,
|
||||
// 开关状态
|
||||
bizProofActive: false,
|
||||
collThirdPartyActive: false,
|
||||
midPerQuickPayActive: false,
|
||||
midPerEleDdcActive: false,
|
||||
midEntEleDdcActive: false,
|
||||
midEntWaterDdcActive: false,
|
||||
isCleanEntActive: false,
|
||||
hasSettleAcctActive: false,
|
||||
isManufacturingActive: false,
|
||||
isAgriGuarActive: false,
|
||||
isTaxAActive: false,
|
||||
isAgriLeadingActive: false,
|
||||
isInclusiveFinanceActive: false
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 对话框关闭处理 */
|
||||
handleClose() {
|
||||
this.reset()
|
||||
},
|
||||
/** 取消按钮 */
|
||||
cancel() {
|
||||
this.dialogVisible = false
|
||||
this.reset()
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
// 转换开关值为字符串
|
||||
const data = {
|
||||
...this.form,
|
||||
bizProof: this.form.bizProofActive ? 'true' : 'false',
|
||||
collThirdParty: this.form.collThirdPartyActive ? 'true' : 'false',
|
||||
midPerQuickPay: this.form.midPerQuickPayActive ? 'true' : 'false',
|
||||
midPerEleDdc: this.form.midPerEleDdcActive ? 'true' : 'false',
|
||||
midEntEleDdc: this.form.midEntEleDdcActive ? 'true' : 'false',
|
||||
midEntWaterDdc: this.form.midEntWaterDdcActive ? 'true' : 'false',
|
||||
isCleanEnt: this.form.isCleanEntActive ? 'true' : 'false',
|
||||
hasSettleAcct: this.form.hasSettleAcctActive ? 'true' : 'false',
|
||||
isManufacturing: this.form.isManufacturingActive ? 'true' : 'false',
|
||||
isAgriGuar: this.form.isAgriGuarActive ? 'true' : 'false',
|
||||
isTaxA: this.form.isTaxAActive ? 'true' : 'false',
|
||||
isAgriLeading: this.form.isAgriLeadingActive ? 'true' : 'false',
|
||||
isInclusiveFinance: this.form.isInclusiveFinanceActive ? 'true' : 'false'
|
||||
}
|
||||
// 删除开关状态字段
|
||||
delete data.bizProofActive
|
||||
delete data.collThirdPartyActive
|
||||
delete data.midPerQuickPayActive
|
||||
delete data.midPerEleDdcActive
|
||||
delete data.midEntEleDdcActive
|
||||
delete data.midEntWaterDdcActive
|
||||
delete data.isCleanEntActive
|
||||
delete data.hasSettleAcctActive
|
||||
delete data.isManufacturingActive
|
||||
delete data.isAgriGuarActive
|
||||
delete data.isTaxAActive
|
||||
delete data.isAgriLeadingActive
|
||||
delete data.isInclusiveFinanceActive
|
||||
|
||||
createWorkflow(data).then(response => {
|
||||
this.$modal.msgSuccess("新增成功")
|
||||
this.dialogVisible = false
|
||||
this.$emit('success')
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user