master
张同海 2 years ago
parent 186ec3cf06
commit c336e75ef9

@ -1 +0,0 @@
*{margin:0;padding:0;font-family:Arial,Helvetica,sans-serif}html{font-size:16px}body{background:#fff}.main{width:100%}[data-v-3f4fb6b1] .HeaderCell{color:#dd5643;background:#ffefe7!important;border-top:2px solid #dd5643!important;border-bottom:1px solid #dd5643!important;border-left:1px solid #dd5643!important;border-right:1px solid #dd5643!important}[data-v-3f4fb6b1] .HeaderCell:first-child{border-left:2px solid #dd5643!important}[data-v-3f4fb6b1] .HeaderCell:last-child{border-right:3px solid #dd5643!important}[data-v-3f4fb6b1] .Cellname{color:#dd5643;border-top:0 solid #dd5643!important;border-bottom:2px solid #dd5643!important;border-left:1px solid #dd5643!important;border-right:1px solid #dd5643!important}[data-v-3f4fb6b1] .Cellname:first-child{border-left:2px solid #dd5643!important}[data-v-3f4fb6b1] .Cellname:last-child{border-right:3px solid #dd5643!important}[data-v-3f4fb6b1] .el-table__expanded-cell{border-left:2px solid #52a5fa!important;border-right:3px solid #52a5fa!important;padding:0}.main[data-v-3f4fb6b1]{width:60%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:30px;box-sizing:border-box}.main .CsTitle[data-v-3f4fb6b1]{font-size:22px;font-weight:bolder;margin:30px 0}.main .CsHint[data-v-3f4fb6b1]{color:red;font-weight:700;margin-bottom:30px}.main .CsTop[data-v-3f4fb6b1]{border:2px solid #479ffa;margin-bottom:20px}.main .CsTop .CsTopBox3>P[data-v-3f4fb6b1]{margin:0!important;padding-top:0}.main .CsTop .CsTopBox3>P[data-v-3f4fb6b1]:first-child{margin-top:6px}.main .CsTop>div[data-v-3f4fb6b1]:nth-child(){background:red}.main .CsTop div>p[data-v-3f4fb6b1]{padding:6px;box-sizing:border-box;font-size:14px}.main .CsTop div>p[data-v-3f4fb6b1]:first-child{font-weight:700}.main .CsTop div>p[data-v-3f4fb6b1]:nth-child(2){padding-top:0;margin-left:25px}.main .CsButtonBox[data-v-3f4fb6b1]{width:100%;display:flex;align-items:flex-start}.main .Csbottom[data-v-3f4fb6b1]{margin-top:20px;border:2px solid #479ffa}.main .Csbottom>div:nth-child(2) .CsBox p[data-v-3f4fb6b1]{margin-left:25px}.main .Csbottom>div:nth-child(2) .CsBox p[data-v-3f4fb6b1]:first-child{margin:0}.main .Csbottom>div[data-v-3f4fb6b1]:nth-child(3){padding:6px;box-sizing:border-box}.main .Csbottom>div:nth-child(3) p[data-v-3f4fb6b1]{font-weight:700}.main .Csbottom>div:nth-child(3) p span[data-v-3f4fb6b1]{font-weight:100;margin-left:16px}.flex[data-v-3f4fb6b1]{display:flex}.flex>.F1[data-v-3f4fb6b1]{flex:1}.flex>.F2[data-v-3f4fb6b1]{flex:2.06}.CsBox[data-v-3f4fb6b1]{padding:6px;box-sizing:border-box}.CsFCRed[data-v-3f4fb6b1]{color:red}.CsFW[data-v-3f4fb6b1]{font-weight:bolder}.CsMt[data-v-3f4fb6b1]{margin-top:12px}.column[data-v-3f4fb6b1]{flex-direction:column}.BL[data-v-3f4fb6b1]{border-left:2px solid #479ffa}.BR[data-v-3f4fb6b1]{border-right:2px solid #479ffa}.BT[data-v-3f4fb6b1]{border-top:2px solid #479ffa}.BB[data-v-3f4fb6b1]{border-bottom:2px solid #479ffa}.CsTableCheckbox[data-v-3f4fb6b1]{width:100%;display:flex;align-items:center;border-bottom:2px solid #52a5fa!important;background:#f2f7fd}.CsTableCheckbox[data-v-3f4fb6b1] .el-checkbox__input{margin:0 10px 0 1rem}.CsTableCheckbox[data-v-3f4fb6b1] .el-checkbox__label{border-left:3px solid #fff;width:100%;padding-left:0!important}.CsTableCheckbox[data-v-3f4fb6b1] .el-checkbox__label>div>div>div{padding:6px;box-sizing:border-box;border-left:3px solid #fff;border-bottom:3px solid #fff;overflow:hidden}.CsTableCheckbox[data-v-3f4fb6b1] .el-checkbox__label>div>div>div:first-child{border-left:none}.CsTableCheckbox[data-v-3f4fb6b1] .el-checkbox__label>div>div>div p{font-weight:700;margin-bottom:.5rem}.CsCheckboxButtonBox[data-v-3f4fb6b1]{padding:10px;box-sizing:border-box;border-bottom:2px solid #52a5fa!important}.CsBottom[data-v-3f4fb6b1]{width:100%;margin-top:16px}.CsBottom p[data-v-3f4fb6b1]:first-child{font-weight:700}

@ -0,0 +1 @@
*{margin:0;padding:0;font-family:Arial,Helvetica,sans-serif}html{font-size:16px}body{background:#fff}.main{width:100%}[data-v-36647a20] .HeaderCell{color:#dd5643;background:#ffefe7!important;border-top:2px solid #dd5643!important;border-bottom:1px solid #dd5643!important;border-left:1px solid #dd5643!important;border-right:1px solid #dd5643!important}[data-v-36647a20] .HeaderCell:first-child{border-left:2px solid #dd5643!important}[data-v-36647a20] .HeaderCell:last-child{border-right:3px solid #dd5643!important}[data-v-36647a20] .Cellname{color:#dd5643;border-top:0 solid #dd5643!important;border-bottom:2px solid #dd5643!important;border-left:1px solid #dd5643!important;border-right:1px solid #dd5643!important}[data-v-36647a20] .Cellname:first-child{border-left:2px solid #dd5643!important}[data-v-36647a20] .Cellname:last-child{border-right:3px solid #dd5643!important}[data-v-36647a20] .el-table__expanded-cell{border-left:2px solid #52a5fa!important;border-right:3px solid #52a5fa!important;padding:0}.main[data-v-36647a20]{width:70%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:30px;box-sizing:border-box}.main .CsTitle[data-v-36647a20]{font-size:22px;font-weight:bolder;margin:30px 0}.main .CsHint[data-v-36647a20]{color:red;font-weight:700;margin-bottom:30px}.main .CsTop[data-v-36647a20]{border:2px solid #479ffa;margin-bottom:20px}.main .CsTop .CsTopBox3>P[data-v-36647a20]{margin:0!important;padding-top:0}.main .CsTop .CsTopBox3>P[data-v-36647a20]:first-child{margin-top:6px}.main .CsTop>div[data-v-36647a20]:nth-child(){background:red}.main .CsTop div>p[data-v-36647a20]{padding:6px;box-sizing:border-box;font-size:14px}.main .CsTop div>p[data-v-36647a20]:first-child{font-weight:700}.main .CsTop div>p[data-v-36647a20]:nth-child(2){padding-top:0}.main .CsButtonBox[data-v-36647a20]{width:100%;display:flex;align-items:flex-start}.main .Csbottom[data-v-36647a20]{margin-top:20px;border:2px solid #479ffa}.main .Csbottom>div:nth-child(2) .CsBox p[data-v-36647a20]:first-child{margin:0}.main .Csbottom>div[data-v-36647a20]:nth-child(3){padding:6px;box-sizing:border-box}.main .Csbottom>div:nth-child(3) p[data-v-36647a20]{font-weight:700}.main .Csbottom>div:nth-child(3) p span[data-v-36647a20]{font-weight:100;margin-left:16px}.flex[data-v-36647a20]{display:flex}.flex>.F1[data-v-36647a20]{flex:1}.flex>.F2[data-v-36647a20]{flex:2.06}.CsBox[data-v-36647a20]{padding:6px;box-sizing:border-box}.CsFCRed[data-v-36647a20]{color:red}.CsFW[data-v-36647a20]{font-weight:bolder}.CsMt[data-v-36647a20]{margin-top:12px}.column[data-v-36647a20]{flex-direction:column}.BL[data-v-36647a20]{border-left:2px solid #479ffa}.BR[data-v-36647a20]{border-right:2px solid #479ffa}.BT[data-v-36647a20]{border-top:2px solid #479ffa}.BB[data-v-36647a20]{border-bottom:2px solid #479ffa}.CsTableCheckbox[data-v-36647a20]{width:100%;display:flex;align-items:center;border-bottom:2px solid #52a5fa!important;background:#f2f7fd}.CsTableCheckbox[data-v-36647a20] .el-checkbox__input{margin:0 10px 0 1rem}.CsTableCheckbox[data-v-36647a20] .el-checkbox__label{border-left:3px solid #fff;width:100%;padding-left:0!important}.CsTableCheckbox[data-v-36647a20] .el-checkbox__label>div>div>div{padding:6px;box-sizing:border-box;border-left:3px solid #fff;border-bottom:3px solid #fff;overflow:hidden}.CsTableCheckbox[data-v-36647a20] .el-checkbox__label>div>div>div:first-child{border-left:none}.CsTableCheckbox[data-v-36647a20] .el-checkbox__label>div>div>div p{font-weight:700;margin-bottom:.5rem}.CsCheckboxButtonBox[data-v-36647a20]{padding:10px;box-sizing:border-box;border-bottom:2px solid #52a5fa!important}.CsBottom[data-v-36647a20]{width:100%;margin-top:16px}.CsBottom p[data-v-36647a20]:first-child{font-weight:700}[data-v-36647a20] .el-icon-arrow-right{font-weight:bolder;color:#dd5643}.RXing[data-v-36647a20]{color:red;margin-right:2px}.Csone[data-v-36647a20]{padding:6px!important}

2
dist/index.html vendored

@ -1 +1 @@
<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>vue</title><script defer="defer" src="/js/chunk-vendors.54521abf.js"></script><script defer="defer" src="/js/app.c7bcfe55.js"></script><link href="/css/chunk-vendors.e7270478.css" rel="stylesheet"><link href="/css/app.3cb2d1e8.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html> <!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>vue</title><script defer="defer" src="/js/chunk-vendors.6379e6de.js"></script><script defer="defer" src="/js/app.a3dc0e63.js"></script><link href="/css/chunk-vendors.e7270478.css" rel="stylesheet"><link href="/css/app.77fe0bc9.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -1,34 +1,64 @@
import request from "@/utils/axios"; import request from "@/utils/axios";
import qs from "qs"; import qs from "qs";
import http from "@/utils/http"; import http from "@/utils/http";
//页面查询接口 //获取链接详情
const getInfo = (data) => { const getInfo = (params) => {
return request({ return request({
data: { data: {
url: "/invoice/link/getInfo", url: "/api/JF/Info",
method: "POST", method: "get",
data: qs.stringify(data), params,
}, },
}); });
}; };
//开票接口 //保存详情
const createInvoice = (data) => { const SaveDetail = (data) => {
return request({ return request({
data: { data: {
url: "/invoice/link/uploadInvoice", url: "/api/JF/SaveDetail",
method: "POST", method: "POST",
data: qs.stringify(data), data,
},
});
};
// Imdg
const JFImdg = (params) => {
return request({
data: {
url: "/api/JF/JFImdg",
method: "get",
params,
},
});
};
// package
const JFPackage = (params) => {
return request({
data: {
url: "/api/JF/JFPackage",
method: "get",
params,
},
});
};
// UNNO
const JFUNNO = (params) => {
return request({
data: {
url: "/api/JF/JFUNNO/1/9999",
method: "get",
params,
}, },
}); });
}; };
// 查询 // unno 限制页
const Load = (params) => { const JFUNNOLimit = (params) => {
return request({ return request({
data: { data: {
url: "/api/Ams/Load", url: "/api/JF/JFUNNOLimit",
method: "get", method: "get",
params, params,
}, },
}); });
}; };
export { getInfo, createInvoice }; export { getInfo, SaveDetail, JFImdg, JFPackage, JFUNNO, JFUNNOLimit };

@ -11,8 +11,8 @@ Vue.config.productionTip = false;
Vue.prototype.$axios = axios; Vue.prototype.$axios = axios;
const router = new VueRouter({ const router = new VueRouter({
routes: routes, routes: routes,
mode: "history", //去掉# // mode: "history", //去掉#
// mode: "hash", mode: "hash",
}); });
new Vue({ new Vue({
router: router, router: router,

@ -8,20 +8,20 @@ export default ({ data }) => {
}); });
server.interceptors.response.use( server.interceptors.response.use(
(req) => { (req) => {
if (req.data.code != 200) { // if (req.data.code != 200) {
Message({ // Message({
showClose: true, // showClose: true,
message: req.data.message ? req.data.message : req.data.msg, // message: req.data.message ? req.data.message : req.data.msg,
type: "warning", // type: "warning",
duration: 0, // duration: 0,
}); // });
} else { // } else {
// Message({ // // Message({
// message: req.data.message ? req.data.message : req.data.msg, // // message: req.data.message ? req.data.message : req.data.msg,
// type: "success", // // type: "success",
// duration: 500, // // duration: 500,
// }); // // });
} // }
return req; return req;
}, },
(err) => { (err) => {

@ -7,28 +7,31 @@
III, regulation 4 and section 9 of the General Introduction to the IMDG III, regulation 4 and section 9 of the General Introduction to the IMDG
Code. Code.
</p> </p>
<div class="CsTop flex column"> <div class="CsTop flex column" :style="{ width: '100%' }">
<div class="flex BB"> <div class="flex BB">
<div class="F1 BR"> <div class="F1 BR">
<p>1.Shipper</p> <p>1.Shipper</p>
<p> <p>
SHANDONG SMART INTERNATIONAL LOGISTICS CO LTD FLOOR 12-13, FUDU {{ tableData.shipper }}
BLDG, NO.8 NANJING ROAD, QINGDAO CHINA QINGDAO, 266500
</p> </p>
</div> </div>
<div class="F1"> <div class="F1">
<div class="BB"> <div class="BB">
<p>2.Transport document number</p> <p>2.Transport document number</p>
<p>596854040</p> <p>{{ tableData.transportNumber }}</p>
</div> </div>
<div class="flex BB"> <div class="flex BB">
<p>3.Page of pages</p> <p>3.Page of pages</p>
<p class="Csone">&nbsp;&nbsp;&nbsp;1-1</p> <p class="Csone">&nbsp;&nbsp;&nbsp;{{ tableData.pageOfPages }}</p>
</div> </div>
<div class="flex"> <div class="flex">
<div class="F1 BR"><p>4.Shipper's reference</p></div> <div class="F1 BR">
<p>4.Shipper's reference</p>
<p>{{ tableData.shipperReference }}</p>
</div>
<div class="F1"> <div class="F1">
<p>5.Freight forwarder's reference</p> <p>5.Freight forwarder's reference</p>
<p>{{ tableData.freightForwarderReference }}</p>
</div> </div>
</div> </div>
</div> </div>
@ -38,34 +41,33 @@
<div class="F1 BB"> <div class="F1 BB">
<p>6.Consignee</p> <p>6.Consignee</p>
<p> <p>
SHANDONG SMART INTERNATIONAL LOGISTICS CO LTD FLOOR 12-13, FUDU {{ tableData.consignee }}
BLDG, NO.8 NANJING ROAD, QINGDAO CHINA QINGDAO, 266500
</p> </p>
</div> </div>
<div class="F1"> <div class="F1">
<p>7.Carrier (to be completed by the carrier)</p> <p>7.Carrier (to be completed by the carrier)</p>
<p>MAERSK LINE</p> <p>{{ tableData.carrier }}</p>
</div> </div>
</div> </div>
<div class="flex column F1"> <div class="flex column F1">
<div class="flex BB"> <div class="flex BB">
<div class="F1 BR"> <div class="F1 BR">
<p>10.Vessel/flight no.and date</p> <p>10.Vessel/flight no.and date</p>
<p>MAERSK SALINA 225S</p> <p>{{ tableData.vesselOrflightNoAndDate }}</p>
</div> </div>
<div class="F1"> <div class="F1">
<p>11.Port/place of loading</p> <p>11.Port/place of loading</p>
<p>QINGDAO,CHINA</p> <p>{{ tableData.portPlaceOfLoading }}</p>
</div> </div>
</div> </div>
<div class="flex BB"> <div class="flex BB">
<div class="F1 BR"> <div class="F1 BR">
<p>12.Port/place of discharge</p> <p>12.Port/place of discharge</p>
<p>GUAYAQUIL,ECUADOR</p> <p>{{ tableData.portPlaceOfLoading }}</p>
</div> </div>
<div class="F1"> <div class="F1">
<p>13.Destination</p> <p>13.Destination</p>
<p>GUAYAQUIL,ECUADOR</p> <p>{{ tableData.destination }}</p>
</div> </div>
</div> </div>
<div class="F1"> <div class="F1">
@ -75,7 +77,7 @@
<p> <p>
24 hr Emergency contact person : 24 hr Emergency contact person :
<el-input <el-input
v-model="input" v-model="tableData.contactPerson"
placeholder="请输入内容" placeholder="请输入内容"
size="small" size="small"
:style="{ width: '40%', margin: '0 0 5px 15px' }" :style="{ width: '40%', margin: '0 0 5px 15px' }"
@ -83,7 +85,7 @@
<br /> <br />
24 hr Emergency contact telephone: 24 hr Emergency contact telephone:
<el-input <el-input
v-model="input" v-model="tableData.contactTelephone"
placeholder="请输入内容" placeholder="请输入内容"
size="small" size="small"
:style="{ width: '40%' }" :style="{ width: '40%' }"
@ -96,14 +98,7 @@
<div class="CsTopBox3 BB"> <div class="CsTopBox3 BB">
<p>SHIPPER'S DECLARATION</p> <p>SHIPPER'S DECLARATION</p>
<p> <p>
I hereby declare that the contents of this consignment are fully and {{ tableData.shipperdeclaration }}
accurately <br />
described below by the proper shipping name, and are classified,
packaged, marked
<br />
and labeled/placarded and are in all respects in proper condition for
transport according to the applicable international and national
government regu-<br />lations.
</p> </p>
<p class="CsFCRed"> <p class="CsFCRed">
8.This shipment is within the limitations prescribed for: (Delete 8.This shipment is within the limitations prescribed for: (Delete
@ -115,11 +110,12 @@
14.Shipment information Number and kind of packages; description of 14.Shipment information Number and kind of packages; description of
goods ( *see bottom) goods ( *see bottom)
</p> </p>
<p>{{ tableData.descriptionOfGoods }}</p>
</div> </div>
</div> </div>
<!-- @cell-dblclick="FnTableClick" --> <!-- @cell-dblclick="FnTableClick" -->
<el-table <el-table
:data="tableData" :data="tableData.jFSubDtos"
style="width: 100%" style="width: 100%"
border border
ref="tableRef" ref="tableRef"
@ -134,31 +130,54 @@
<el-checkbox <el-checkbox
v-model="item.CheckboxType" v-model="item.CheckboxType"
class="CsTableCheckbox" class="CsTableCheckbox"
v-for="(item, index) in scope.row.CheckboxData" v-for="(item, index) in scope.row.gson"
:key="index" :key="index"
> >
<div class="flex column"> <div class="flex column">
<div class="flex"> <div class="flex">
<div class="F1"> <div class="F1">
<p><span class="RXing">*</span>UN No</p> <p><span class="RXing">*</span>UN No</p>
<el-input <el-select
v-model="item.input" v-model="item.unno"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="UN No" placeholder="UN No"
></el-input> filterable
remote
reserve-keyword
:remote-method="UNNOremoteMethod"
:loading="UNNOloading"
@change="
(e) => {
FnChangeUNNO(e, item);
}
"
>
<el-option
v-for="item in UNNOData"
:key="item.id"
:label="item.unno"
:value="item.unno"
>
</el-option>
</el-select>
</div> </div>
<div class="F1"> <div class="F1">
<p><span class="RXing">*</span>Imo Class(Sub risk)</p> <p><span class="RXing">*</span>Imo Class(Sub risk)</p>
<el-input <el-input
v-model="item.input3" v-model="item.imoClass"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="Imo Class(Sub risk)" placeholder="Imo Class(Sub risk)"
@change="
(e) => {
FnChangeimoClass(e, item);
}
"
></el-input> ></el-input>
</div> </div>
<div class="F1"> <div class="F1">
<p>Sub Risk1</p> <p>Sub Risk1</p>
<el-input <el-input
v-model="item.input3" v-model="item.subrisk1"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="Sub Risk1" placeholder="Sub Risk1"
></el-input> ></el-input>
@ -166,7 +185,7 @@
<div class="F1"> <div class="F1">
<p>Sub Risk2</p> <p>Sub Risk2</p>
<el-input <el-input
v-model="item.input3" v-model="item.subrisk2"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="Sub Risk2" placeholder="Sub Risk2"
></el-input> ></el-input>
@ -176,7 +195,7 @@
<div class="F2"> <div class="F2">
<p><span class="RXing">*</span>Proper Shipping Name</p> <p><span class="RXing">*</span>Proper Shipping Name</p>
<el-input <el-input
v-model="item.input1" v-model="item.properShippingName"
:style="{ width: '95%' }" :style="{ width: '95%' }"
placeholder="Proper Shipping Name" placeholder="Proper Shipping Name"
></el-input> ></el-input>
@ -184,7 +203,7 @@
<div class="F2"> <div class="F2">
<p>Technical Name (if have)</p> <p>Technical Name (if have)</p>
<el-input <el-input
v-model="item.input2" v-model="item.technicalName"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="Technical Name (if have)" placeholder="Technical Name (if have)"
></el-input> ></el-input>
@ -194,7 +213,7 @@
<div class="F1"> <div class="F1">
<p><span class="RXing">*</span>Packing Group</p> <p><span class="RXing">*</span>Packing Group</p>
<el-select <el-select
v-model="item.input4" v-model="item.packingGroup"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="Packing Group" placeholder="Packing Group"
> >
@ -206,7 +225,7 @@
<div class="F1"> <div class="F1">
<p><span class="RXing">*</span>EMS</p> <p><span class="RXing">*</span>EMS</p>
<el-input <el-input
v-model="item.input5" v-model="item.ems"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="EMS" placeholder="EMS"
> >
@ -215,25 +234,25 @@
<div class="F1"> <div class="F1">
<p><span class="RXing">*</span>Packing Code</p> <p><span class="RXing">*</span>Packing Code</p>
<el-input <el-input
v-model="item.input9" v-model="item.packingCode"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="Packing Code" placeholder="Packing Code"
></el-input> ></el-input>
</div> </div>
<div class="F1"> <div class="F1">
<p><span class="RXing">*</span>Packing Type</p> <!-- <p><span class="RXing">*</span>Packing Type</p>
<el-input <el-input
v-model="item.input9" v-model="item.input9"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="Packing Type" placeholder="Packing Type"
></el-input> ></el-input> -->
</div> </div>
</div> </div>
<div class="flex"> <div class="flex">
<div class="F1"> <div class="F1">
<p>Flash Point (if have )</p> <p>Flash Point (if have )</p>
<el-input <el-input
v-model="item.input5" v-model="item.flashPoint"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="Flash Point (if have )" placeholder="Flash Point (if have )"
> >
@ -243,7 +262,7 @@
<div class="F1"> <div class="F1">
<p><span class="RXing">*</span>Marine Pollutant(p or no)</p> <p><span class="RXing">*</span>Marine Pollutant(p or no)</p>
<el-select <el-select
v-model="item.input6" v-model="item.marinePollutant"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="Marine Pollutant(p or no)" placeholder="Marine Pollutant(p or no)"
> >
@ -254,25 +273,33 @@
<div class="F1"> <div class="F1">
<p><span class="RXing">*</span>Package Quantity</p> <p><span class="RXing">*</span>Package Quantity</p>
<el-input <el-input
v-model="item.input8" v-model="item.packageQuantity"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="Package Quantity " placeholder="Package Quantity "
></el-input> ></el-input>
</div> </div>
<div class="F1"> <div class="F1">
<p><span class="RXing">*</span>Package Type</p> <p><span class="RXing">*</span>Package Type</p>
<el-input <el-select
v-model="item.input8" v-model="item.packageType"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="Package Type " placeholder="Package Type "
></el-input> >
<el-option
v-for="item in JFPackageData"
:key="item.code"
:label="item.value"
:value="item.code"
>
</el-option>
</el-select>
</div> </div>
</div> </div>
<div class="flex"> <div class="flex">
<div class="F1"> <div class="F1">
<p>Inner Package</p> <p>Inner Package</p>
<el-select <el-select
v-model="item.input14" v-model="item.innerPackage"
placeholder="Inner Package" placeholder="Inner Package"
:style="{ width: '90%' }" :style="{ width: '90%' }"
> >
@ -301,7 +328,7 @@
<div class="F1"> <div class="F1">
<p>Inner Package Type</p> <p>Inner Package Type</p>
<el-input <el-input
v-model="item.input7" v-model="item.innerPackageType"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="Inner Package Type" placeholder="Inner Package Type"
></el-input> ></el-input>
@ -309,7 +336,7 @@
<div class="F1"> <div class="F1">
<p><span class="RXing">*</span>Gross Weight</p> <p><span class="RXing">*</span>Gross Weight</p>
<el-input <el-input
v-model="item.input10" v-model="item.grossWeight"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="Gross Weight " placeholder="Gross Weight "
> >
@ -319,7 +346,7 @@
<div class="F1"> <div class="F1">
<p><span class="RXing">*</span>Net Weight</p> <p><span class="RXing">*</span>Net Weight</p>
<el-input <el-input
v-model="item.input11" v-model="item.netWeight"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="Net Weight " placeholder="Net Weight "
> >
@ -331,7 +358,7 @@
<div class="F1"> <div class="F1">
<p>NA number</p> <p>NA number</p>
<el-input <el-input
v-model="item.input7" v-model="item.naNumber"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="美国货,按需填写" placeholder="美国货,按需填写"
></el-input> ></el-input>
@ -349,7 +376,7 @@
</el-tooltip> </el-tooltip>
</p> </p>
<el-select <el-select
v-model="item.input12" v-model="item.limitedQuantity"
placeholder="美国RQs/可免除量/限量三选一" placeholder="美国RQs/可免除量/限量三选一"
:style="{ width: '90%' }" :style="{ width: '90%' }"
> >
@ -360,17 +387,23 @@
</el-select> </el-select>
</div> </div>
<div class="F1"> <div class="F1">
<p>Control Temperature</p> <p>
<span v-if="item.Limittype" class="RXing">*</span>
Control Temperature
</p>
<el-input <el-input
v-model="item.input7" v-model="item.controlTemperature"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="控制温度特定UN填写" placeholder="控制温度特定UN填写"
></el-input> ></el-input>
</div> </div>
<div class="F1"> <div class="F1">
<p>Emergency Temperature</p> <p>
<span v-if="item.Limittype" class="RXing">*</span>
Emergency Temperature
</p>
<el-input <el-input
v-model="item.input7" v-model="item.emergencyTemperature"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="紧急温度特定UN填写" placeholder="紧急温度特定UN填写"
></el-input> ></el-input>
@ -380,18 +413,26 @@
<div class="F2"> <div class="F2">
<p>UNNO suffix/Sequence</p> <p>UNNO suffix/Sequence</p>
<el-input <el-input
v-model="item.input13" v-model="item.unnoSufficSequence"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="UNNO suffix/Sequence" placeholder="UNNO suffix/Sequence"
></el-input> ></el-input>
</div> </div>
<div class="F2"> <div class="F2">
<p>IMDG Code Segregation Group</p> <p>IMDG Code Segregation Group</p>
<el-input <el-select
v-model="item.input13" v-model="item.imdgCodeSegregationGroup"
:style="{ width: '90%' }" :style="{ width: '90%' }"
placeholder="货物有隔离性需要选择" placeholder="货物有隔离性需要选择"
></el-input> >
<el-option
v-for="item in JFImdgData"
:key="item.code"
:label="item.value"
:value="item.code"
>
</el-option>
</el-select>
</div> </div>
</div> </div>
</div> </div>
@ -425,34 +466,38 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="date" label="15.Container number" width="180"> <el-table-column
prop="containerNumber"
label="15.Container number"
width="180"
>
<template slot-scope="scope"> <template slot-scope="scope">
<el-input <el-input
v-model="scope.row.date" v-model="scope.row.containerNumber"
placeholder="Container number" placeholder="Container number"
></el-input> ></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="name" label="16.Seal number(s)" width="180"> <el-table-column prop="sealNumber" label="16.Seal number(s)" width="180">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input <el-input
v-model="scope.row.name" v-model="scope.row.sealNumber"
placeholder="Seal number(s)" placeholder="Seal number(s)"
></el-input> ></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="address" label="17.Container Size & type"> <el-table-column prop="containerSize" label="17.Container Size & type">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input <el-input
v-model="scope.row.address" v-model="scope.row.containerSize"
placeholder="Container Size & type" placeholder="Container Size & type"
></el-input> ></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="address2" label="18.Tare mass(kg)"> <el-table-column prop="tareMass" label="18.Tare mass(kg)">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input <el-input
v-model="scope.row.address2" v-model="scope.row.tareMass"
placeholder="Tare mass(kg)" placeholder="Tare mass(kg)"
></el-input> ></el-input>
</template> </template>
@ -512,56 +557,49 @@
<el-button icon="el-icon-delete" type="text" @click="FnDelRow"> <el-button icon="el-icon-delete" type="text" @click="FnDelRow">
删除一行 删除一行
</el-button> </el-button>
<el-button icon="el-icon-upload" type="text" @click="FnSaveDRow">
保存
</el-button>
</div> </div>
<div class="Csbottom flex column"> <div class="Csbottom flex column" :style="{ width: '100%' }">
<div class="flex BB"> <div class="flex BB">
<div class="F1 CsBox BR CsFCRed"> <div class="F1 CsBox BR CsFCRed">
<p class="CsFW">CONTAINER/VEHICLE PACKING CERTIFICATE</p> <p class="CsFW">CONTAINER/VEHICLE PACKING CERTIFICATE</p>
<p> <p>
I hereby declare that the goods described above have been {{ tableData.packingcertificate }}
packed/loaded into the container/vehicle identified above in
accordance with the applicable provisions.** MUST BE COMPLETED AND
SIGNED FOR ALL CONTAINER/VEHICLE LOADS BY PERSON RESPONSIBLE FOR
PACKING/LOADING
</p> </p>
</div> </div>
<div class="F1 CsBox CsFCRed"> <div class="F1 CsBox CsFCRed">
<p class="CsFW">21.RECEIVING ORGANIZATION RECEIPT</p> <p class="CsFW">21.RECEIVING ORGANIZATION RECEIPT</p>
<p> <p>
Received the above number of packages/containers/trailers in {{ tableData.organizationreceipt }}
apparent good order and condition, unless stated hereon: RECEIVING
ORGANISATION REMARKS:
</p> </p>
</div> </div>
</div> </div>
<div class="flex"> <div class="flex">
<div class="F1 CsBox BR"> <div class="F1 CsBox BR">
<p class="CsFW">20.Name of company</p> <p class="CsFW">20.Name of company</p>
<p>SHANDONG WEIFANG RAINBOW CHEMICAL CO.,LTD.</p> <p>{{ tableData.nameOfCompany }}</p>
<p class="CsFW CsMt">Name/status of declarant</p> <p class="CsFW CsMt">Name/status of declarant</p>
<p> <p>
6TH.FLOOR,GAOXINJISHUCHUANGYECEN-<br /> {{ tableData.nameStatusDeclarant }}
TRE,SHUNHUA ROAD 750,JINAN,SHAN-<br />
DONG,CHINA 250101
</p> </p>
<p class="CsFW CsMt">Place and date</p> <p class="CsFW CsMt">Place and date</p>
<p>QINGDAO 2022/03/26</p> <p>{{ tableData.placeDate }}</p>
<p class="CsFW CsMt">Signature of declarant</p> <p class="CsFW CsMt">Signature of declarant</p>
<p class="CsFW">&nbsp;</p> <p class="CsFW">{{ tableData.signatureDeclarant }}</p>
</div> </div>
<div class="F1 CsBox"> <div class="F1 CsBox">
<p class="CsFW">22.Name of company</p> <p class="CsFW">22.Name of company</p>
<p>SHANDONG WEIFANG RAINBOW CHEMICAL CO.,LTD.</p> <p>{{ tableData.nameOfCompany }}</p>
<p class="CsFW CsMt">Name/status of declarant</p> <p class="CsFW CsMt">Name/status of declarant</p>
<p> <p>
6TH.FLOOR,GAOXINJISHUCHUANGYECEN-<br /> {{ tableData.nameStatusDeclarant }}
TRE,SHUNHUA ROAD 750,JINAN,SHAN-<br />
DONG,CHINA 250101
</p> </p>
<p class="CsFW CsMt">Place and date</p> <p class="CsFW CsMt">Place and date</p>
<p>QINGDAO 2022/03/26</p> <p>{{ tableData.placeDate }}</p>
<p class="CsFW CsMt">Signature of declarant</p> <p class="CsFW CsMt">Signature of declarant</p>
<p class="CsFW">&nbsp;</p> <p class="CsFW">&nbsp;{{ tableData.signatureDeclarant }}</p>
</div> </div>
</div> </div>
<!-- <div class="flex"> <!-- <div class="flex">
@ -583,149 +621,231 @@
</div> </div>
</template> </template>
<script> <script>
import { getInfo } from "../api/views/Index"; import {
import moment from "moment"; getInfo,
SaveDetail,
JFImdg,
JFPackage,
JFUNNO,
JFUNNOLimit,
} from "../api/views/Index";
// import moment from "moment";
export default { export default {
name: "ViewIndex", name: "ViewIndex",
data() { data() {
return { return {
moment, tableData: {
tableData: [ jFSubDtos: [
{ {
id: 0, containerNumber: "",
date: "", sealNumber: "",
Web_date_type: true, containerSize: "",
name: "", tareMass: "",
Web_name_type: true, gson: [
address: "", {
Web_address_type: true, unnoSufficSequence: "",
address2: "", imoClass: "",
Web_address2_type: true, subrisk1: "",
CheckboxData: [ subrisk2: "",
{ properShippingName: "",
input: "", packingGroup: "",
Web_input_type: true, ems: "",
input1: "", marinePollutant: "",
Web_input1_type: true, flashPoint: "",
input2: "", technicalName: "",
Web_input2_type: true, Limittype: false,
input3: "", },
Web_input3_type: true, ],
input4: "", },
Web_input4_type: true, ],
input5: "", },
Web_input5_type: true, JFImdgData: [],
input6: "", JFPackageData: [],
Web_input6_type: true, UNNOData: [],
input7: "", JFUNNOLimitData: [],
Web_input7_type: true, UNNOloading: false,
input8: "",
Web_input8_type: true,
input9: "",
Web_input9_type: true,
input10: "",
Web_input10_type: true,
input11: "",
Web_input11_type: true,
input12: "",
Web_input12_type: true,
input13: "",
Web_input13_type: true,
input14: "",
Web_input14_type: true,
CheckboxType: false,
},
],
},
],
}; };
}, },
mounted() {}, mounted() {
let gid = this.$route.query.gid;
if (gid) {
getInfo({ gid }).then((res) => {
if (res.data.status == 0 && res.data.rows.jFSubDtos) {
res.data.rows.jFSubDtos.forEach((item) => {
item.gson.forEach((item2) => {
item2.Limittype = false;
});
});
this.tableData = res.data.rows;
// this.Init();
}
});
}
this.Init();
},
methods: { methods: {
FnChangeUNNO(e, data) {
this.UNNOData.forEach((item) => {
if (item.unno == e) {
data.unnoSufficSequence = item.suffix;
data.imoClass = item.imO_CLASS;
data.subrisk1 = item.suB_HAZARD1;
data.subrisk2 = item.suB_HAZARD2;
data.properShippingName = item.propeR_SHIPPING_NAME;
data.packingGroup = item.packinG_GROUP;
data.ems = item.ems;
data.marinePollutant = item.marinE_POLLUTANT;
data.flashPoint = item.flasH_POINT;
data.technicalName = item.technicaL_NAME;
}
});
this.FnCheckData(data);
},
FnChangeimoClass(e, data) {
this.FnCheckData(data);
},
FnCheckData(data) {
let type = true;
this.JFUNNOLimitData.forEach((item) => {
if (item.unno == data.unno && item.class == data.imoClass) {
type = false;
}
});
type ? (data.Limittype = false) : (data.Limittype = true);
},
UNNOremoteMethod(query) {
if (query !== "") {
this.UNNOloading = true;
JFUNNO({ UNNO: query }).then((res) => {
this.UNNOloading = false;
this.UNNOData = res.data.rows.items.filter((item) => {
return item.unno.toLowerCase().indexOf(query.toLowerCase()) > -1;
});
});
} else {
this.UNNOData = [];
}
},
Init() {
JFImdg().then((res) => {
this.JFImdgData = res.data.rows;
});
JFPackage().then((res) => {
this.JFPackageData = res.data.rows;
});
JFUNNOLimit().then((res) => {
this.JFUNNOLimitData = res.data.rows;
});
},
FnAddCheckbox(data) { FnAddCheckbox(data) {
data.CheckboxData.push({ data.gson.push({
input: "", unnoSufficSequence: "",
Web_input_type: true, imoClass: "",
CheckboxType: false, subrisk1: "",
subrisk2: "",
properShippingName: "",
packingGroup: "",
ems: "",
marinePollutant: "",
flashPoint: "",
technicalName: "",
Limittype: false,
}); });
}, },
FnDelCheckbox(data) { FnDelCheckbox(data) {
data.CheckboxData.forEach((item, index) => { data.gson.forEach((item, index) => {
if (item.CheckboxType) { if (item.CheckboxType) {
data.CheckboxData.splice(index, 1); data.gson.splice(index, 1);
} }
}); });
}, },
FnCopyCheckbox(data) { FnCopyCheckbox(data) {
data.CheckboxData.forEach((item, index) => { data.gson.forEach((item, index) => {
if (item.CheckboxType) { if (item.CheckboxType) {
item.CheckboxType = false; item.CheckboxType = false;
data.CheckboxData.push(item); data.gson.push(item);
} }
}); });
}, },
FnSaveDRow() {
let type = true;
let Arr = [
"unno",
"imoClass",
"properShippingName",
"packingGroup",
"ems",
"packingCode",
"marinePollutant",
"packageQuantity",
"packageType",
"grossWeight",
"netWeight",
];
// controlTemperature emergencyTemperature
this.tableData.jFSubDtos.forEach((item) => {
item.pid = this.$route.query.gid;
item.gson.forEach((item2) => {
let Arr2 = [];
if (item2.Limittype) {
Arr2 = [...Arr, "controlTemperature", "emergencyTemperature"];
} else {
Arr2 = Arr;
}
Arr2.forEach((i) => {
if (!item2[i]) {
type = false;
}
});
});
});
if (type) {
SaveDetail(this.tableData.jFSubDtos).then((res) => {
this.$message({
message: `保存${res.data.status == 0 ? "成功" : "失败"}`,
type: res.data.status == 0 ? "success" : "warning",
});
});
} else {
this.$message({
message: "请补全必填项",
type: "warning",
});
}
},
FnAddRow() { FnAddRow() {
this.tableData.push({ this.tableData.jFSubDtos.push({
id: this.tableData[this.tableData.length - 1].id + 1, gson: [
date: "",
Web_date_type: true,
name: "",
Web_name_type: true,
address: "",
Web_address_type: true,
address2: "",
Web_address2_type: true,
CheckboxData: [
{ {
input: "", unnoSufficSequence: "",
Web_input_type: true, imoClass: "",
input1: "", subrisk1: "",
Web_input1_type: true, subrisk2: "",
input2: "", properShippingName: "",
Web_input2_type: true, packingGroup: "",
input3: "", ems: "",
Web_input3_type: true, marinePollutant: "",
input4: "", flashPoint: "",
Web_input4_type: true, technicalName: "",
input5: "", Limittype: true,
Web_input5_type: true,
input6: "",
Web_input6_type: true,
input7: "",
Web_input7_type: true,
input8: "",
Web_input8_type: true,
input9: "",
Web_input9_type: true,
input10: "",
Web_input10_type: true,
input11: "",
Web_input11_type: true,
input12: "",
Web_input12_type: true,
input13: "",
Web_input13_type: true,
input14: "",
Web_input14_type: true,
CheckboxType: false,
}, },
], ],
}); });
}, },
FnDelRow() { FnDelRow() {
this.$refs.tableRef.selection.forEach((item) => { this.$refs.tableRef.selection.forEach((item) => {
this.tableData.forEach((item2, index2) => { this.tableData.jFSubDtos.forEach((item2, index2) => {
if (item.id == item2.id) { if (item.gId == item2.gId) {
this.tableData.splice(index2, 1); this.tableData.jFSubDtos.splice(index2, 1);
} }
}); });
}); });
}, },
FnCopyRow() { FnCopyRow() {
this.$refs.tableRef.selection.forEach((item) => { this.$refs.tableRef.selection.forEach((item) => {
this.tableData.forEach((item2, index2) => { this.tableData.jFSubDtos.forEach((item2, index2) => {
if (item.id == item2.id) { if (item.gId == item2.gId) {
this.tableData.push(item2); this.tableData.jFSubDtos.push(item2);
} }
}); });
}); });

@ -14,7 +14,7 @@ module.exports = defineConfig({
proxy: { proxy: {
// 跨域处理 // 跨域处理
"/api": { "/api": {
target: "http://60.209.125.238:35201", //目标接口域名 target: "http://60.209.125.238:25811", //目标接口域名
changeOrigin: true, //是否跨域 changeOrigin: true, //是否跨域
pathRewrite: { pathRewrite: {
"^/api": "", //重写接口 "^/api": "", //重写接口

Loading…
Cancel
Save