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>

 

三、最后一個界面接受數據

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>