2018-9-3-vue的tabs表单传值显示在form表单

一、点击修改按钮 , 从后台查找数据一波 

updateData: function () {

const rows = this.getSelectRows();
if (rows.length !== 1) {
this.$error("请选择一行数据");
return;
}
this.partnerApplyApply = {...rows[0]};
this.applyNo = rows[0].applyNo;
this.updateVisible = true;

//查询保证金信息的代码
this.$http.post("/loan/partnersAilInfoAction.do?_md=findPartnersAilInfo", {"applyNo": this.applyNo}).then((response) => {
if (response.success) {
this.partnersAilInfoList = response.data;
} else {
this.$error(response.msg);
}
}).catch((error) => {
this.$error(error.message);
});

},

这个是定义的参数,用于接收返回的实体数据

//保证金接受参数
partnersAilInfoList:{},

参数带到弹出框上面

<el-dialog
title="修改"
:visible.sync="updateVisible"
v-if="updateVisible"
width="50%">
<partners-apply-update ref="partnersApplyUpdate" @refreshTable="refreshTable"
@closeDialog="updateVisible = false"
:updateUrl = updateUrl
:applyNo = applyNo
:partnersAilInfoList="partnersAilInfoList"
:partnerApplyApply="partnerApplyApply" ></partners-apply-update>

</el-dialog>

后台的查找action

/**
* 查找
* @param context
* @return
*/
public Result findPartnersAilInfo(Context context) {
String applyNo = context.getString("applyNo");
PartnersAilInfo partnersAilInfo = partnersAilInfoService.selectByApplyNo(applyNo);
return Result.success(partnersAilInfo, "查询成功!");
}

二、下一个界面的接收

接受参数

props: {
updateUrl: String,
partnerApplyApply: {},
applyNo:String,
partnersAilInfoList:{}
},

放到 tabs 的标签上面
<el-tab-pane  label="保证金信息" name="second">
<!-- 数据封装到这里 -->
<partners-ail-info-list :applyNo="applyNo" :partnersAilInfoList="partnersAilInfoList" @closeDialog="closeAll">
</partners-ail-info-list>
</el-tab-pane>

三、最后一个界面接受数据

扫描二维码关注公众号,回复: 3032119 查看本文章
props: {
applyNo:String,
partnersAilInfoList:{}
},
addForm:this.partnersAilInfoList,



<el-form ref="addForm"  :model="addForm" label-width="150px">
<el-card class="box-card is-never-shadow">
<div slot="header" class="clearfix">
<span>保证金信息</span>
</div>
<el-row type="flex" class="row-bg" justify="start">
<el-col :span="12">

<el-form-item label="保证金账号" prop="bailAcctNo" >
<el-input v-model="addForm.bailAcctNo" selectKey="STD_ZB_APP_TYPE" placeholder="请输入保证金账号">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="保证金账号名称" prop="bailAcctName">

<el-input v-model="addForm.bailAcctName"></el-input>

</el-form-item>
</el-col>
</el-row>

<el-row type="flex" class="row-bg" justify="start">
<el-col :span="12">
<el-form-item label="客户编号" prop="custNo">
<el-input v-model="addForm.custNo" class="input-with-select">
<el-button icon="el-icon-circle-plus" slot="append" @click="select">选择</el-button>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="客户名称" prop="custName" disable="true">
<el-input v-model="addForm.custName" placeholder="请输入客户名称">
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-card>
<el-card class="box-card is-never-shadow">
<div slot="header" class="clearfix">
<span>详细信息</span>
</div>
<el-row type="flex" class="row-bg" justify="start">
<el-col :span="12">
<el-form-item label="币种" prop="curType">
<elx-select selectKey="STD_ZX_CUR_TYPE" v-model="addForm.curType"></elx-select>
</el-form-item>
</el-col>

<el-col :span="12">
<el-form-item label="利率" prop="rate">
<el-input v-model="addForm.rate" placeholder="请输入利率">
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="start">
<el-col :span="12">
<el-form-item label="上浮比例" prop="upRate">
<el-input v-model="addForm.upRate" placeholder="请输入上浮比例">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="保证金类型" prop="bailType">
<elx-select v-model="addForm.bailType" selectKey="STD_PUB_BAIL_TYPE" placeholder="请输入保证金类型"></elx-select>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="start">
<el-col :span="12">
<el-form-item label="存期" prop="depTerm">
<elx-select v-model="addForm.depTerm" selectKey="STD_ZB_TERM_TYPE"></elx-select>
</el-form-item>
</el-col>
<el-col :span="12">

<el-form-item label="开户机构" prop="openOrg">
<el-input v-model="addForm.openOrg" placeholder="请输入开户机构"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="start">
<el-col :span="12">
<el-form-item label="合同编号" prop="contNo">
<el-input v-model="addForm.contNo" placeholder="请输入合同编号">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="状态" prop="bailStatus">
<elx-select v-model="addForm.approveStatus" selectKey="SQZT" placeholder="请输入申请状态">
</elx-select>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="start">
<el-col :span="12">
<el-form-item label="科目号" prop="bailAcctGlCode">
<el-input v-model="addForm.bailAcctGlCode" placeholder="请输入科目号">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="银联行号" prop="interbankId">
<el-input v-model="addForm.interbankId"
placeholder="请输入解冻金额"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="start">
<el-col :span="12">
<el-form-item label="保证金" prop="bailAmt">
<el-input type="text" v-model="addForm.bailAmt" placeholder="请选择保证金"
></el-input>
</el-form-item>
</el-col>
</el-row>
</el-card>
<el-dialog
title="增加信息"
:visible.sync="showVisible"
v-if="showVisible"
append-to-body
width="55%"
:close-on-click-modal="false"
v-drag>
<client-info-list ref="clientInfoList"
></client-info-list>
<div slot="footer" class="dialog-footer" align="right">
<el-button type="primary" @click="choose">确 定</el-button>
<el-button type="danger" @click="showVisible = false">取 消</el-button>
</div>
</el-dialog>
<div align="center" style="margin-top: 15px;">
<el-button type="primary" @click="onSubmit('addForm')">提交
</el-button>
<el-button type="danger" @click="onCancel">取消</el-button>
</div>
</el-form>
 

猜你喜欢

转载自www.cnblogs.com/yangzhu/p/9578662.html