输入表单布局

This commit is contained in:
wkc
2026-01-21 09:32:22 +08:00
parent 3624198aa6
commit c4a05e1338
6 changed files with 428 additions and 168 deletions

View File

@@ -1,175 +1,169 @@
<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-form ref="form" :model="form" :rules="rules" label-width="140px" class="workflow-create-form">
<!-- 基本信息 -->
<el-divider content-position="left">基本信息</el-divider>
<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 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-divider content-position="left">贷款信息</el-divider>
<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 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-divider content-position="left">中间业务标识</el-divider>
<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 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-divider content-position="left">企业标识</el-divider>
<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-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
@@ -191,7 +185,6 @@ export default {
},
data() {
return {
activeTab: 'basic',
form: {},
rules: {
custIsn: [
@@ -317,3 +310,11 @@ export default {
}
}
</script>
<style scoped>
.workflow-create-form .el-divider {
margin: 8px 0 16px 0;
font-weight: 500;
font-size: 14px;
}
</style>