<template>
<c-row>
<!-- =================顶部====================== -->
<c-col :span="24">
<c-col :span="11">
<c-col :span="20">
<el-form-item label="Reference" prop="bodgrp.rec.ownref" style="width: 100%">
<c-input v-model="model.bodgrp.rec.ownref" maxlength="16" placeholder="请输入Reference" style="width: 95%"
disabled></c-input>
</el-form-item>
</c-col>
<c-col :span="1">
</c-col>
<c-col :span="3" style="text-align: right">
<c-button style="margin:0 0" size="small" type="primary" :disabled="this.flag" @click="onDitpButgetref">
获取
</c-button>
</c-col>
</c-col>
<c-col :span="11" :offset="1">
<el-form-item label="摘要" prop="bodgrp.rec.nam">
<c-input text-align="middle" v-model="model.bodgrp.rec.nam" maxlength="40" disabled
placeholder="请输入Externally Displayed Name to Identify the Contract"></c-input>
</el-form-item>
</c-col>
</c-col>
<!-- ====================左边======================= -->
<c-col :span="11">
<c-col :span="24">
<c-col :span="12">
<el-form-item label="Responsible User" prop="ditp.usr.extkey" style="width: 100%">
<c-input style="width: 95%" v-model="model.botp.usr.extkey" maxlength="8" placeholder="请输入User ID" disabled>
</c-input>
</el-form-item>
</c-col>
<c-col :span="4">
<c-button style="margin:0 10px 0 0;padding: 0 10px;" size="small" icon="el-icon-search" type="primary">
</c-button>
</c-col>
<c-col :span="8">
<c-checkbox v-model="model.bodgrp.rec.dircolflg">Direct Collection</c-checkbox>
</c-col>
</c-col>
<c-col :span="12">
<el-form-item label="Document Amount" prop="bodgrp.cbs.max.cur">
<c-select v-model="model.bodgrp.cbs.max.cur" style="width: 100%" placeholder="请选择Currency">
<el-option v-for="item in codes.cur" :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 style="text-align: left" label-width="20px" prop="bodgrp.cbs.max.amt">
<c-input-currency v-model="model.bodgrp.cbs.max.amt" style="text-align: left; width: 100%"
placeholder="请输入Document Amount"
@keyup.enter.native="defaultFunction('bodgrp.cbs.max.amt', model.bodgrp.cbs.max.amt)"></c-input-currency>
</el-form-item>
</c-col>
<c-col :span="12">
<el-form-item label="Warehouse/Insurance" prop="bodgrp.cbs.opn1.cur">
<c-select disabled v-model="model.bodgrp.cbs.opn1.cur" style="width: 100%" placeholder="请选择Currency">
<el-option v-for="item in codes.cur" :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 style="text-align: left" label-width="20px" prop="bodgrp.cbs.opn1.amt">
<c-input-currency v-model="model.bodgrp.cbs.opn1.amt" style="text-align: left; width: 100%"
placeholder="请输入Warehouse/Insurance" :disabled="true"
@keyup.enter.native="defaultFunction('bodgrp.cbs.opn1.amt', model.bodgrp.cbs.opn1.amt)"></c-input-currency>
</el-form-item>
</c-col>
<c-col :span="12">
<el-form-item label="Order Date" prop="bodgrp.rec.rcvdat">
<c-date-picker type="date" v-model="model.bodgrp.rec.rcvdat" style="width:100%" placeholder="请选择Order Date">
</c-date-picker>
</el-form-item>
</c-col>
<c-col :span="12">
<el-form-item label="Shipment date" prop="bodgrp.rec.shpdat">
<c-date-picker type="date" v-model="model.bodgrp.rec.shpdat" style="width:100%"
placeholder="请选择Shipment date"></c-date-picker>
</el-form-item>
</c-col>
<c-col :span="12">
<el-form-item label="Presentation Date" prop="bodgrp.rec.predat">
<c-date-picker type="date" v-model="model.bodgrp.rec.predat" style="width:100%"
placeholder="请选择Presentation Date"></c-date-picker>
</el-form-item>
</c-col>
<c-col :span="12">
<el-form-item label="Dispatched on" prop="bodgrp.rec.advdat">
<c-date-picker type="date" v-model="model.bodgrp.rec.advdat" style="width:100%" :disabled="true"
placeholder="请选择Dispatched on"></c-date-picker>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="Collection Condition" prop="bodgrp.rec.doctypcod">
<c-select v-model="model.bodgrp.rec.doctypcod" style="width:100%" placeholder="请选择Collection Condition"
:code="codes.doctypcod">
</c-select>
</el-form-item>
</c-col>
<c-col :span="12">
<el-form-item label="Maturity Date" prop="bodgrp.rec.matdat">
<c-date-picker type="date" v-model="model.bodgrp.rec.matdat" style="width:100%"
:disabled="model.bodgrp.rec.doctypcod === 'P'" placeholder="请选择Maturity Date"></c-date-picker>
</el-form-item>
</c-col>
<c-col :span="12">
<el-form-item label="发票类型" prop="bodgrp.rec.invtyp">
<c-select v-model="model.bodgrp.rec.invtyp" style="width:100%" :code="invtyp">
</c-select>
</el-form-item>
</c-col>
<c-col :span="12">
<el-form-item label="Tenor Specification" prop="bodgrp.rec.matpercnt">
<c-input v-model.number="model.bodgrp.rec.matpercnt" placeholder="请输入Tenor Specification"
onkeyup="value=value.replace(/[^\d]/g,' ')" :disabled="model.bodgrp.rec.doctypcod === 'P'"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="Starting from" prop="bodgrp.rec.matperbeg">
<c-select v-model="model.bodgrp.rec.matperbeg" style="width:100%" placeholder="请选择Starting from"
:code="codes.matperbeg" :disabled="model.bodgrp.rec.doctypcod === 'P'">
</c-select>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="Tenor Details Text" prop="bodgrp.blk.bogdet">
<c-input type="textarea" v-model="model.bodgrp.blk.bogdet" maxlength="43" show-word-limit
:disabled="model.bodgrp.rec.doctypcod === 'P'" placeholder="请输入Tenor Details Text"></c-input>
</el-form-item>
</c-col>
<!-- 无法显示数据，改用另一种方式 -->
<!-- <c-col :span="24">
<c-table
:list="model.botp.docgrdm.docgrd || []"
>
<el-table-column label="1st" width="camil1"></el-table-column>
<el-table-column label="2st" width="camil2"></el-table-column>
<el-table-column label="Document" width="docnam"></el-table-column>
</c-table>
</c-col> -->
<!-- <c-col :span="24" style="height: 24px; margin-top: -10px">
<el-form-item :label="model.botp.docgrdm.docdsclab" class="messageLabel">
<c-button style="float: right" @click="addTableValue" type="primary">新增单据</c-button>
</el-form-item>
</c-col>
<c-col :span="24" style="margin-bottom: 30px;">
<c-table height="200px" style="text-align: center" :list="this.model.botp.docgrdm.docgrd || []"
:paginationShow="false" :border="true">
<el-table-column label="1st" width="auto">
<template slot-scope="scope">
<c-input v-model="scope.row.cmail1" @change="docpre" maxlength="12"></c-input>
</template>
</el-table-column>
<el-table-column label="2nd" width="auto">
<template slot-scope="scope">
<c-input v-model="scope.row.cmail2" maxlength="12" @change="docpre"></c-input>
</template>
</el-table-column>
<el-table-column label="Document" prop="docnam" width="auto">
<template slot-scope="scope">
<c-select style="width: 100%" placeholder="请选择" v-model="scope.row.docnam" @change="docpre">
<el-option v-for="item in codeTable" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</c-select>
</template>
</el-table-column>
<el-table-column label="操作" width="170px" fixed="right">
<template slot-scope="scope">
<c-button @click="deleteTable(scope.$index)" type="primary">删除</c-button>
</template>
</el-table-column>
</c-table>
</c-col> -->
<c-docpre
:model="model"
:argadr="{
path: 'bodgrp.blk.docpre',
grp: 'botp',
code: 'docpre'
}"></c-docpre>
</c-col>
<!-- ====================右边======================= -->
<c-col :span="11" :offset="1">
<c-ptap :model="model" :argadr="{
title: 'Drawer',
grp: 'bodgrp',
rol: 'drr',
}" :isAdrblk="true" :disabled="false">
</c-ptap>
<c-ptap :model="model" :argadr="{
title: 'Collecting Bank',
grp: 'bodgrp',
rol: 'col',
}" :disabled="false">
</c-ptap>
<c-ptap :model="model" :argadr="{
title: 'Drawee',
grp: 'bodgrp',
rol: 'dre',
}" :disabled="false">
</c-ptap>
<c-col :span="24">
<el-form-item label="Country Code Risk Country!" prop="bodgrp.rec.stacty">
<c-select v-model="model.bodgrp.rec.stacty" style="width:100%" placeholder="请选择Country Code Risk Country!"
:code="codes.stacty">
</c-select>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="Goods Code" prop="bodgrp.rec.stagod">
<c-select v-model="model.bodgrp.rec.stagod" style="width:100%" placeholder="请选择Goods Code" :code="codeTable2">
</c-select>
</el-form-item>
</c-col>
</c-col>
</c-row>
</template>
<script>
import Api from "~/service/Api"
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable"
import Event from "~/model/Botdav/Event"
import Utils from "~/utils";
import Ptap from "~/views/Public/Ptap";
import Docpre from "~/views/Public/Docpre";
export default {
components: {
"c-ptap": Ptap,
"c-docpre": Docpre,
},
inject: ["root"],
props: ["model", "codes"],
mixins: [commonProcess],
data() {
return {
codeTable2: [
{ label: "金(含金饰品)", value: "001" },
{ label: "银(含银饰品)", value: "002" },
{ label: "铜(含电解铜、铜制品及铜精矿)", value: "003" },
{ label: "铝(含电解铝、铝矾土及铝制品)", value: "004" },
{ label: "锌(含电解锌、锌精矿)", value: "005" },
{ label: "铁砂矿(含精矿)", value: "006" },
{ label: "其他金属", value: "007" },
{ label: "大豆", value: "008" },
{ label: "玉米", value: "009" },
{ label: "原油", value: "010" },
{ label: "食用油(含棕榈油)", value: "011" },
{ label: "煤", value: "013" },
{ label: "其他", value: "099" },
],
columns: ['0 0 "lst1" 100 ', '1 1 "lst2" 100', '2 2 "document" 200'],
codeTable: [
{ label: "Airway Bills", value: "Airway Bills" },
{ label: "Beneficiary's Declaration", value: "Beneficiary's Declaration" },
{ label: "Bill of Lading Copies", value: "Bill of Lading Copies" },
{ label: "Bill of Lading Originals", value: "Bill of Lading Originals" },
{ label: "Certificate", value: "Certificate" },
{ label: "Certificate of Analysis", value: "Certificate of Analysis" },
{ label: "Certificate of Origin", value: "Certificate of Origin" },
{ label: "Certificate of Quality", value: "Certificate of Quality" },
{ label: "Certificate of Quantity", value: "Certificate of Quantity" },
{ label: "Commercial Invoice", value: "Commercial Invoice" },
{ label: "Courier Receipt", value: "Courier Receipt" },
{ label: "Draft", value: "Draft" },
{ label: "Export Licence", value: "Export Licence" },
{ label: "Fax Report", value: "Fax Report" },
{ label: "Inspection Cert", value: "Inspection Cert" },
{ label: "Insurance Policy", value: "Insurance Policy" },
{ label: "Packing List", value: "Packing List" },
{ label: "Shipment Advice", value: "Shipment Advice" },
{ label: "Weight List", value: "Weight List" },
],
// TableValue: [
// {
// id: 0,
// cmail1: "",
// cmail2: "",
// docnam: "",
// description: "",
// serialNum: "",
// tableName: "",
// tcddoc: "",
// },
// ],
newValue: {
id: 0,
cmail1: "",
cmail2: "",
docnam: "",
description: "",
serialNum: "",
tableName: "",
tcddoc: "",
},
invtyp: [
{ label: "type1", value: "1" }
],
};
},
methods: {
...Event,
addTableValue(index) {
var newTableValue = Object.assign({}, this.newValue);
const serial = Utils.generateUUID();
newTableValue.serialNum = serial;
this.model.botp.docgrdm.docgrd.splice(index - 1, 0, newTableValue);
// var index = this.TableValue.length;
// if (index > 0) {
// newTableValue.id = this.TableValue[index - 1].id + 1;
// }
// this.TableValue.push(newTableValue);
},
deleteTable(index) {
this.model.botp.docgrdm.docgrd.splice(index, 1);
// console.log(row)
// console.log(this.TableValue)
// for (let i = 0; i < this.TableValue.length; i++) {
// if (this.TableValue[i].id == row.id) {
// this.TableValue.splice(i, 1);
// break;
// }
// }
},
async docpre() {
let rtnmsg = await this.executeDefault('bodgrp.blk.docpre')
if (rtnmsg.respCode == SUCCESS) {
//TODO 处理数据逻辑
this.updateModel(rtnmsg.data)
}
else {
this.$notify.error({ title: '错误', message: '服务请求失败！' });
}
},
},
computed: {
flag() {
return this.model.bodgrp.drr.pts.adrelc == "";
},
},
created: function () {
console.log(this.root);
},
}
</script>
<style>
.messageLabel>>>.el-form-item__label {
text-align: left;
font-weight: bold;
font-size: 12px;
}
</style>