<template>
<c-row class="eibs-tab">
<!-- ====================顶部==================== -->
<c-col :span="6">
<el-form-item label="参考号" label-width="100px">
<c-input
v-model="model.setmod.ref"
maxlength="16"
:readonly="true"
placeholder="请输入our reference"
></c-input>
</el-form-item>
</c-col>
<c-col :span="4">
<el-form-item label="结算金额" label-width="100px">
<c-input
v-model="model.setmod.doccur"
style="width: 100%"
placeholder="CNY"
:readonly="true"
></c-input>
</el-form-item>
</c-col>
<c-col :span="4">
<el-form-item label="" label-width="20px">
<c-input
v-model="model.setmod.docamt"
:readonly="true"
placeholder="请输入document amount"
></c-input>
</el-form-item>
</c-col>
<c-col :span="6">
<el-form-item label="类型" label-width="100px">
<c-select
v-model="model.setmod.dspflg"
disabled
style="width: 100%"
placeholder="请选择Type of settlement"
>
<el-option
v-for="item in codes.dspflg"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</c-select>
</el-form-item>
</c-col>
<!--
<c-col :span="12">
<el-form-item label="自贸区账号">
<c-input v-model="model.setmod.zmqacc" maxlength="20" placeholder="请输入自贸区账号"></c-input>
</el-form-item>
</c-col>
<c-col :span="6" style="text-align:center">
<c-checkbox v-model="model.setmod.xreflg">Recalculate Rates</c-checkbox>
</c-col>
-->
<c-col :span="3" :offset="21">
<el-form-item label="" label-width="20px">
<c-button size="small" type="primary" @click="onSetmodDet">
细节
</c-button>
</el-form-item>
</c-col>
<!-- ==============中部表格===================== -->
<c-col :span="24">
<el-form-item
label="Foreign Commission/Charges:"
label-width="210px"
>
</el-form-item>
</c-col>
<c-col :span="22" style="margin-bottom: 18px" :offset="1">
<c-table
style="text-align: center"
:list="model.setmod.setfog.setfol"
:paginationShow="false"
:border="true"
>
<el-table-column label="Payer" prop="ptydbt" width="auto">
<template slot-scope="scope">
<el-select v-model="scope.row.ptydbt">
<el-option
v-for="item in codes.ptydbt"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="Payee" width="auto">
<template slot-scope="scope">
<el-select v-model="scope.row.payee">
<el-option
v-for="item in codes.payee"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="Source" prop="src" width="auto">
</el-table-column>
<el-table-column label="Disp" prop="dsp" width="auto">
</el-table-column>
<el-table-column
label="Text for Payer"
prop="txtdbt"
width="auto"
>
</el-table-column>
<el-table-column
label="Text for Payee"
prop="txtpay"
width="auto"
>
</el-table-column>
<el-table-column label="Currency" prop="cur" width="auto">
<template slot-scope="scope">
<el-select v-model="scope.row.cur">
<el-option
v-for="item in codes.cur"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="Amount" prop="amt" width="auto">
</el-table-column>
<el-table-column label="" prop="det" width="auto">
<template slot-scope="scope" slot="header">
<el-button
class="el-icon-circle-plus-outline"
size="mini"
@click="addRow(scope)"
>
</el-button>
<el-button
class="el-icon-remove-outline"
size="mini"
@click="removeRow(scope)"
>
</el-button>
</template>
<template slot-scope="scoped">
<el-button
size="mini"
@click="detail1(scoped.$index, scoped.row)"
>details</el-button
>
</template>
</el-table-column>
</c-table>
</c-col>
<c-col>
<el-dialog :visible.sync="dialogVisible" center>
<c-col>
<el-form :model="dialog" label-width="200px">
<c-col :span="16" >
<el-form-item label="收款人">
<el-select v-model="dialog.payee" style="width: 100%">
<el-option
v-for="item in codes.payee"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</c-col>
<c-col :span="16">
<el-form-item label="收款人摘要">
<c-input v-model="dialog.txtpay" style="width: 100%"/>
</el-form-item>
</c-col>
<c-col :span="16">
<el-form-item label="付款人">
<el-select v-model="dialog.ptydbt" style="width: 100%">
<el-option
v-for="item in codes.ptydbt"
:key="item.value"
:labelF="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</c-col>
<c-col :span="16">
<el-form-item label="付款人摘要">
<c-input v-model="dialog.txtdbp" style="width: 100%"/>
</el-form-item>
</c-col>
<c-col :span="16">
<c-col :span="18">
<el-form-item label="费用">
<c-select v-model="dialog.cur" style="width: 100%">
<el-option
v-for="item in codes.cur"
:key="item.value"
:labelF="item.label"
:value="item.value"
/>
</c-select>
</el-form-item>
</c-col>
<c-col :span="6">
<el-form-item label="" label-width="20px">
<c-input v-model="dialog.amt" style="width: 100%"/>
</el-form-item>
</c-col>
</c-col>
<c-col :span="16">
<el-form-item>
<c-checkbox v-model="dialog.forflg">CG00005</c-checkbox>
</el-form-item>
</c-col>
</el-form>
</c-col>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="saveDialog">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</span>
</el-dialog>
</c-col>
<!--=================== Own Commission/Charges:================== -->
<c-col :span="24" style="text-align: left">
<el-form-item label="Own Commission/Charges:"> </el-form-item>
</c-col>
<c-col :span="22" style="margin-bottom: 18px" :offset="1">
<c-table
style="text-align: center"
:list="model.setmod.setfeg.setfel"
:paginationShow="false"
:border="true"
>
<el-table-column label="Role" width="auto">
<template #default="scope">
<el-select v-model="scope.row.rol">
<el-option
v-for="item in codes.setfelRol"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="Code" prop="feecod" width="auto">
</el-table-column>
<el-table-column label="Source" prop="src" width="auto">
</el-table-column>
<el-table-column label="Disp" width="auto">
<template #default="scope">
<el-select v-model="scope.row.dsp" @change="dispDefault">
<el-option
v-for="item in codes.setfeldsp"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="Units" prop="unt" width="auto">
</el-table-column>
<el-table-column
label="Long Fee Text"
prop="feetxtinf"
width="auto"
>
</el-table-column>
<el-table-column label="Currency" prop="cur" width="auto">
</el-table-column>
<el-table-column
label="Original Amount"
prop="ogiamt"
width="auto"
>
</el-table-column>
<el-table-column label="Fee Amount" prop="amt" width="auto">
</el-table-column>
<el-table-column label="Details" prop="det" width="auto">
<template slot-scope="scoped">
<el-button
size="mini"
@click="detail2(scoped.$index, scoped.row)"
>details</el-button
>
</template>
</el-table-column>
</c-table>
</c-col>
<setpan-dialog ref="setpanDialog" :model="model" :idx="index" :codes="codes"/>
<c-col :span="24" style="text-align: left">
<el-form-item label="Settlement:" label-width="100px">
</el-form-item>
</c-col>
<c-col :span="22" style="margin-bottom: 18px" :offset="1">
<c-table
style="text-align: center"
:list="model.setmod.setglg.setgll"
:paginationShow="false"
:border="true"
>
<el-table-column label="Mod" prop="modflg" width="auto">
</el-table-column>
<el-table-column label="Role" prop="rol" width="auto">
</el-table-column>
<el-table-column label="in" prop="acccur" width="auto">
<template slot-scope="scope">
<el-select v-model="scope.row.acccur">
<el-option
v-for="item in codes.acccur"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column
label="Amount Paid"
prop="fmtaccamt"
width="auto"
>
</el-table-column>
<el-table-column label="Disp." width="auto">
<template #default="scope">
<el-select v-model="scope.row.dsp">
<el-option
v-for="item in codes.setglldsp"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="Account" prop="act" width="auto">
<template slot-scope="scope">
<el-select v-model="scope.row.act">
<el-option
v-for="item in scope.act"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="C" prop="debcdtflg" width="auto">
</el-table-column>
<el-table-column label="Curr." prop="cur" width="auto">
</el-table-column>
<el-table-column
label="Original Amount"
prop="fmtamt"
width="auto"
>
</el-table-column>
<el-table-column label="Rate" prop="rat" width="auto">
</el-table-column>
<el-table-column label="" width="auto"> </el-table-column>
</c-table>
</c-col>
<c-col :span="12" style="margin-bottom: 10px;">
<span v-text="model.setmod.retmsg" data-path=".setmod.retmsg">
</span>
</c-col>
<c-col :span="12" style="margin-bottom: 10px;">
<span v-text="model.setmod.zmqacclab" data-path=".setmod.zmqacclab">
</span>
</c-col>
<c-col :span="12" style="margin-bottom: 10px;">
<span
v-text="model.setmod.setglg.labdspflg"
data-path=".setmod.setglg.labdspflg"
>
</span>
</c-col>
</c-row>
</template>
<script>
import Event from "~/model/Ditopn/Event";
import CommonProcess from "~/mixin/CommonProcess";
import SetpanDialog from "./SetpanDialog.vue";
import Api from "~/service/Api"
import Utils from "~/utils/index"
export default {
inject: ['root'],
components: { SetpanDialog },
props: ["model", "codes"],
mixins: [CommonProcess],
data() {
return {
dialogVisible: false,
dialog: {
payee: "",
ptydbt: "",
txtpay: "",
txtdbt: "",
CG00005: "",
},
dialog2: {
feetxtinf:"",
feetxt:"",
},
index: 0,
};
},
methods: {
...Event,
//第一个表格
addRow() {
let newRow = { ...dialog };
this.model.setmod.setfog.setfol.push(newRow);
},
removeRow() {
this.model.setmod.setfog.setfol.pop();
},
saveDialog() {
this.dialogVisible = false;
this.model.setmod.setfog.setfol[this.index] = this.dialog;
},
// 第二个表格
detail1(index, row) {
this.executeDefault("det").then(res=>{
this.dialogVisible = true;
this.dialog = row;
this.index = index;
})
},
dispDefault(){
this.executeDefault("mac").then(res=>{
Utils.copyValueFromVO(this.model, res.data)
})
},
// 第三个表格
detail2(index, row) {
const that = this;
that.executeRule("det").then(res=>{
that.$refs.setpanDialog.visiable = true;
that.$refs.setpanDialog.formData = Object.assign({}, that.model.setmod.setfeg.setfel[index]);
that.index = index;
that.dialog2 = row
})
},
},
created: function () {},
};
</script>
<style>
</style>