Fedex / iClear-Connect-Pre-Clearance

Go to a project
Toggle navigation Toggle navigation pinning
tao.mo
8c18f7e8 2 parents 09ae3d74 a466c644

Merge remote-tracking branch 'origin/master'

Inline Side-by-side
Showing 21 changed files with 29 additions and 9135 deletions
import request from "@/utils/request";
// 分页查询全部提单
export function getTableFindAll(data) {
return request({
url: "/icleartw/declare/findAll",
method: "post",
data: data,
});
}
// 删除
export function declareDeleteById(data) {
return request({
url: "/icleartw/declare/deleteById/" + data,
method: "post",
data: data,
});
}
// 查看全部信息
export function findDetailsById(data) {
return request({
url: "/icleartw/declare/findDetailsById/" + data,
method: "get",
});
}
// reedit/{id} 重新编辑运单
export function reedit(data) {
return request({
url: "/icleartw/declare/reedit/" + data,
method: "post",
data: data,
});
}
import request from "@/utils/request";
// 新增申报信息
export function saveStepOne(data) {
return request({
url: "/icleartw/declareInfo/save",
method: "post",
data: data,
});
}
// 修改申报信息
export function updateStepOne(data) {
return request({
url: "/icleartw/declareInfo/update",
method: "post",
data: data,
});
}
// 根据id获取申报信息
export function getFindById(data) {
return request({
url: "/icleartw/declareInfo/findById/" + data,
method: "get",
});
}
// 根据id获取模板
export function getTemById(data) {
return request({
url: "/icleartw/declareTemplate/findById?id=" + data,
method: "get",
});
}
// 根据模板名称校验用户下是否已经存相同名称模板
export function getTemByTemName(data) {
return request({
url: "/icleartw/declareTemplate/findTempByName?tempName=" + data,
method: "get",
});
}
// 根据id删除模板
export function deleteTemById(data) {
return request({
url: "/icleartw/declareTemplate/deleteById?id=" + data,
method: "post",
});
}
// 查询当前用户模板
export function findCurUserTem(data) {
return request({
url: "/icleartw/declareTemplate/findTempListByName?tempName=" + data,
method: "get",
});
}
// 修改申报信息模板
export function updateTemplate(data) {
return request({
url: "/icleartw/declareTemplate/update",
method: "post",
data: data,
});
}
// 新增申报信息模板
export function addSaveTemplate(data) {
return request({
url: "/icleartw/declareTemplate/save",
method: "post",
data: data,
});
}
// 查询币别
export function findAllCurrencyCd() {
return request({
url: "/icleartw/dictionary/findAllCurrencyCd",
method: "get",
});
}
// 保存申报出口核检信息
export function declareCheckInfoSave(data) {
return request({
url: "/icleartw/declareCheckInfo/save",
method: "post",
data: data,
});
}
// 修改申报出口核检信息
export function declareCheckInfoUpdate(data) {
return request({
url: "/icleartw/declareCheckInfo/update",
method: "post",
data: data,
});
}
// 根据id获取检核表信息
export function getDeclareCheckInfo(data) {
return request({
url: "/icleartw/declareCheckInfo/findById/" + data,
method: "get",
});
}
// 上传报关文件
export function uploadCustomsFiles(data, id) {
return request({
url: "/icleartw/cusFile/uploadCustomsFiles?deliveryId=" + id,
method: "post",
data: data,
});
}
// 删除单个报关文件
export function deleteUploadFile(data, id) {
return request({
url: "/icleartw/cusFile/deleteFile/" + data + "?cusFileId=" + id,
method: "post",
});
}
// 获取报关文件列表(仅包含用户上传)
export function getCusFileBySys(data) {
return request({
url: "/icleartw/cusFile/getCusFileBySys/" + data,
method: "get",
});
}
// 根据申报id获取文件信息（仅包含系统生成）
export function getFindSysByDeclareId(data) {
return request({
url: "/icleartw/cusFile/findSysByDeclareId/" + data,
method: "get",
});
}
// 提单提交
export function saveCommitAll(data) {
return request({
url: "/icleartw/declare/commit?declareId=" + data,
method: "post",
data: data,
});
}
// 保存文件
export function saveStep3Files(data) {
let str = `?declareId=${data.id}&isClear=`
if (data.isClear !== undefined) {
str = `${str}${data.isClear}`
}
return request({
url: "/icleartw/cusFile/saveFiles" + str,
method: "post",
});
}
// 保存文件
export function saveByDetails(data) {
return request({
url: "/icleartw/declare/saveByDetails/" + data,
method: "post",
});
}
// 查看全部信息
export function findDetailsById(data) {
return request({
url: "/icleartw/declare/findDetailsById/" + data,
method: "get",
});
}
// 分页查询当前用户使用者(根据使用者名称模糊查询)
export function findTempListByName(data) {
return request({
url: "/icleartw/declareTemplate/findTempListByName",
method: "post",
data: data
});
}
//生成 检核表pdf
export function generatePdf(data) {
return request({
url: "/icleartw/declareCheckInfo/generatePdf?declareId=" + data,
method: "post",
data: data
});
}
//生成 联络方式...pdf
export function generateStepOnePdf(data) {
return request({
url: "/icleartw/declareInfo/generatePdf?declareId=" + data,
method: "post",
data: data
});
}
//多条件模糊查询模板
export function findTempListByAll(data) {
return request({
url: "/icleartw/declareTemplate/findTempList",
method: "post",
data: data
});
}
import request from '@/utils/request'
// 首页数据获取
/**
* @param fltDate * 航班日期
* @param kindId 航班类型
*/
export function getOneDayFlight(data) {
return request({
url: '/index/getOneDayFlight',
method: 'post',
data: data
})
}
import request from '@/utils/request'
//数据字典名称
/**
* @param
*/
export function getDictNameList() {
return request({
url: '/dictionary/queryMain',
method: 'get',
})
}
//字典表查询
/**
* @param dictCode 字典名 *
* @param chineseName 数据名称
* @param page 页数 null
* @param size 每页长度 null
*/
export function getDictionaryList(data) {
return request({
url: '/dictionary/query',
method: 'post',
data: data
})
}
//serviceCode字典表查询
/**
* @param
*/
export function getServiceCodeList() {
return request({
url: '/dictionary/queryServiceCode',
method: 'get',
})
}
//新增字典（单条)
/**
* @param chineseName 字典名称 *
* @param description 描述
* @param dictCode 字典表名称 *
*/
export function addDict(data) {
return request({
url: '/dictionary/addDict',
method: 'POST',
data: data
})
}
//新增字典（批量)
/**
* @param nameList 字典名称 * list
* @param dictCode 字典表名称 *
*/
export function addDictBatch(data) {
return request({
url: '/dictionary/addDictBatch',
method: 'POST',
data: data
})
}
//serviceCode子字典添加
/**
* @param array [{}]
* @param serviceCodeKey serviceCode父级key *
* @param serviceCodeValue 字典名称 *
*/
export function addServiceCodeBatch(data) {
return request({
url: '/dictionary/addServiceCodeBatch',
method: 'POST',
data: data
})
}
//serviceCode子字典删除
/**
* @param array []
* @param serviceCodeValue 字典名称 *
*/
export function delServiceCodeCihild(data) {
return request({
url: '/dictionary/delServiceCodeCihild',
method: 'POST',
data: data
})
}
//字典删除
/**
* @param array []
* @param id 字典ID *
*/
export function delDict(data) {
return request({
url: '/dictionary/delDict',
method: 'POST',
data: data
})
}
//虚拟航班查询
/**
* @param flightNo 航班名称
* @param page 页数 null *
* @param size 每页长度 null *
*/
export function flightType(data) {
return request({
url: '/dictionary/flightType',
method: 'post',
data: data
})
}
//虚拟航班新增
/**
* @param flightNo 航班名称 list *
*/
export function addFlight(data) {
return request({
url: '/dictionary/addFlight',
method: 'post',
data: data
})
}
//虚拟航班删除
/**
* @param flightNo 航班名称 list *
*/
export function delFlight(data) {
return request({
url: '/dictionary/delFlight',
method: 'post',
data: data
})
}
//查询航线
/**
* @param fltNo 航班号
* @param page 页数
* @param size 页长
*/
export function queryRoute(data) {
return request({
url: '/dictionary/queryRoute',
method: 'post',
data: data
})
}
//新增航线
/**
* @param fltNo 航班号 *
* @param route 航线 *
*/
export function addRoute(data) {
return request({
url: '/dictionary/addRoute',
method: 'post',
data: data
})
}
//删除航线
/**
* @param id *
*/
export function delRoute(data) {
return request({
url: '/dictionary/delRoute',
method: 'post',
data: data
})
}
//航线排序
/**
* @param id *
*/
export function orderRoute(data) {
return request({
url: '/dictionary/orderRoute',
method: 'post',
data: data
})
}
//航线删除确认
/**
* @param fltNo 航班号
* @param route 航线
*/
export function checkFlightRoute(data) {
return request({
url: '/FlightPreserveController/checkFlightRoute',
method: 'post',
data: data
})
}
//更新航线
export function updateRoute(data) {
return request({
url: `/dictionary/updateRoute`,
method: "post",
data: data,
});
}
......
import request from '@/utils/request'
// DM数据查询
/**
* @param createTime 创建时间 *
* @param fltNo 航班号
* @param fltDate 航班日期
* @param status 状态
* @param portName 口岸名称
* @param page 页数 *
* @param size 数据长度
*/
export function getDmDataList(data) {
return request({
url: '/dmDataLog/getDmDataList',
method: 'post',
data: data
})
}
// 流水查询
/**
* @param accsId accsid *
*/
export function getDmFlowInformation(data) {
return request({
url: '/dmDataLog/getDmFlowInformation?' + data,
method: 'post',
})
}
//运单日志查询
/**
* @param accsId accsid *
*/
export function findCargoDataChangeLog(data) {
return request({
url: '/cargo/findCargoDataChangeLog?accsId=' + data,
method: 'post',
})
}
// 功能模块查询
/**
*
*/
export function findModuleCondition() {
return request({
url: '/systemOperationLog/findModuleCondition',
method: 'post',
})
}
//操作日志查询
/**
* @param module 功能模块
* @param createTimeStart 操作时间开始
* @param createTimeEnd 操作时间结束
* @param page 页数
* @param size 页长
*/
export function getSystemOperationLogData(data) {
return request({
url: '/systemOperationLog/getSystemOperationLogData',
method: 'post',
data: data
})
}
//归档数据查询
/**
* @param createTimeStart 操作时间开始
* @param createTimeEnd 操作时间结束
* @param page 页数
* @param size 页长
*/
export function findArchiveCargoLog(data) {
return request({
url: '/archiveCargoLog/findArchiveCargoLog',
method: 'post',
data: data
})
}
//查询归档文件是否可下载
/**
* @param object 查询结果集行数据
*/
export function isExistZip(data) {
return request({
url: '/archiveCargoLog/isExistZip',
method: 'post',
data: data
})
}
\ No newline at end of file
import request from '@/utils/request'
//预审航班查询
/**
* @param fltNo 航班号
* @param suatus 状态
* @param page 页数
* @param size 每页条数
*/
export function getpreAudit(data) {
return request({
url: '/preAudit/query',
method: 'post',
data: data
})
}
//添加预审航班
/**
* @param 航班号 *
*/
export function addPreFlight(data) {
return request({
url: '/preAudit/addFlight',
method: 'post',
data: data
})
}
//添加预审航班
/**
* @param id 航班id *
* @param status 状态 * 0关闭 1开启 2删除
*/
export function updatePreStatus(data) {
return request({
url: '/preAudit/updateStatus',
method: 'post',
data: data
})
}
......@@ -81,10 +81,10 @@ export default {
// 全局入口页
layout: {
register: "Login",
fedexLogin: "fedex.com user log in",
fedexLogin: "Fedex.com user account login",
fedexRegister: "Employee log in",
onlineDeclare: "線上申報平臺帳號登錄",
registerNumber: "註冊線上申報平臺帳號",
registerNumber: "Register a Fedex.com account",
userInfo: "用戶信息維護",
logOut: "log out",
logOutDia: "Are you sure to log out and exit the system?",
......@@ -108,7 +108,7 @@ export default {
selectTem: "選擇使用者",
insterTem: "新增使用者",
updateTem: "修改使用者",
number: "提單號碼",
number: "Waybill inquiry",
contacts: "聯絡人",
exporterNum: "貨物輸出統一編號",
email: "聯絡人 e-mail",
......
......@@ -72,6 +72,11 @@
{{ $t("layout.fedexRegister") }}
</span>
</el-dropdown-item>
<el-dropdown-item>
<span>
{{ $t("layout.registerNumber") }}
</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!-- <el-select
......@@ -156,7 +161,7 @@ export default {
type: "warning",
}).then(() => {
this.$store.dispatch("LogOut").then(() => {
location.href = "/IcTw";
location.href = "/ImpPer";
});
});
},
......
<template>
<div class="view-option">
<div class="menu-info">
<span class="info" v-if="activeRoute.name == 'declarationInput'">
{{ $t("fillIn.number") }}:&nbsp;{{ deliveryNo || "" }}
<span
class="info"
v-if="
activeRoute.name == 'WaybillInquiry' ||
activeRoute.name == 'UploadDetail'
"
>
{{ $t("fillIn.number") }}
<!-- :&nbsp;{{ deliveryNo || "" }} -->
</span>
<span class="info" v-else>
{{ activeRoute.meta.title }}
......@@ -54,10 +61,10 @@ export default {
font-size: 0.88rem;
border-bottom: 1px solid $fedexBorder;
background-color: #fff;
margin-left: 231px;
margin-left: 230px;
.info {
font-weight: 500;
font-weight: 600;
}
}
</style>
......
......@@ -60,20 +60,20 @@ service.interceptors.response.use(
const msg = errorCode[code] || res.data.msg || errorCode["default"];
if (code === 301) {
MessageBox.confirm(
"登錄狀態已過期，您可以繼續留在該頁面，或者重新登錄",
"系統提示",
"The login status has expired. You can continue to stay on this page or log in again.",
"System prompt",
{
confirmButtonText: "重新登錄",
cancelButtonText: "取消",
confirmButtonText: "Login again",
cancelButtonText: "Close",
type: "warning",
}
).then(() => {
store.dispatch("FedLogOut").then(() => {
location.href = "/IcTw";
location.href = "/ImpPer";
});
});
} else if (code === 500) {
MessageBox.alert(msg, "註意", {
MessageBox.alert(msg, "Attention", {
dangerouslyUseHTMLString: true,
});
return Promise.reject(new Error(msg));
......@@ -87,11 +87,11 @@ service.interceptors.response.use(
console.log("err" + error);
let { message } = error;
if (message == "Network Error") {
message = "系統異常，請聯繫清關部門";
message = "System exception, please contact the customs clearance department";
} else if (message.includes("timeout")) {
message = "請求超時，請聯繫清關部門";
message = "Request timeout, please contact the customs clearance department";
} else if (message.includes("Request failed with status code")) {
message = "系統接口" + message.substr(message.length - 3) + "異常，請聯繫清關部門";
message = "System interface abnormality" + message.substr(message.length - 3) + ",please contact the customs clearance department";
}
Message({
message: message,
......
<template>
<el-drawer
:visible.sync="detailDrawer"
:wrapperClosable="false"
size="80%"
@close="closeDrawer"
class="detail-drawer-box"
>
<div class="info-box">
<!-- <p class="title">聯絡方式與特殊交待事項</p> -->
<div class="step1-box">
<div class="title-box">
<span>聯絡方式與特殊交待事項</span>
<el-button v-if="showEdit" type="text" @click="clickEditStepBtn(1)"
>編輯</el-button
>
</div>
<el-form
class="fedexFormStyle"
ref="step1FormDataRef"
:model="step1formData"
label-position="top"
:disabled="true"
>
<el-row :gutter="10">
<el-col :span="12">
<Formitem
:label="$t('fillIn.number')"
type="view"
prop="deliveryNo"
>
<el-input
type="text"
:id="'inputInner-view-deliveryNo'"
v-model="step1formData.deliveryNo"
>
<!-- onkeyup="this.value=this.value.replace(/\D/g,'')" -->
</el-input>
</Formitem>
</el-col>
<el-col :span="12">
<Formitem
:label="$t('fillIn.contacts')"
type="view"
prop="liaisons"
>
<el-input
type="text"
:id="'inputInner-view-liaisons'"
v-model="step1formData.liaisons"
>
</el-input>
</Formitem>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<Formitem
:label="$t('fillIn.exporterNum')"
prop="consigneeNo"
type="view"
>
<el-input
type="text"
:id="'inputInner-view-consigneeNo'"
v-model="step1formData.consigneeNo"
>
</el-input>
</Formitem>
</el-col>
<el-col :span="12">
<Formitem :label="$t('fillIn.email')" type="view" prop="email">
<el-input
type="text"
:id="'inputInner-view-email'"
v-model="step1formData.email"
>
</el-input>
</Formitem>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="8">
<Formitem :label="$t('fillIn.phone1')" type="view" prop="tel">
<el-input
type="text"
:id="'inputInner-view-tel'"
v-model="step1formData.tel"
>
</el-input>
</Formitem>
</el-col>
<el-col :span="8">
<Formitem
:label="$t('fillIn.phone2')"
type="view"
prop="extensionTel"
>
<el-input
type="text"
:id="'inputInner-view-extensionTel'"
v-model="step1formData.extensionTel"
>
</el-input>
</Formitem>
</el-col>
<el-col :span="8">
<Formitem :label="$t('fillIn.phone3')" type="view" prop="phone">
<el-input
type="text"
:id="'inputInner-view-phone'"
v-model="step1formData.phone"
>
</el-input>
</Formitem>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="textarea-box">
<Formitem
:label="$t('fillIn.indicate')"
prop="customsClearanceInstruction"
class="label"
type="view"
>
<el-input
type="textarea"
:rows="5"
:id="'inputInner-view-customsClearanceInstruction'"
v-model="step1formData.customsClearanceInstruction"
show-word-limit
maxlength="2000"
>
</el-input>
</Formitem>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<Formitem
:label="$t('fillIn.checkList')"
prop="fileSelect"
type="view"
>
<el-input
type="text"
:id="'inputInner-view-fileSelect'"
:value="
step1formData.fileSelect == 1
? '立即製作出口報關檢核表，不需要列印，完成時會自動上傅'
: '使用已製作完成的出口報關檢核表，並與其他報關文件一起上傳'
"
>
</el-input>
<!-- <el-select
type="text"
v-model="step1formData.fileSelect"
ref="selectRef"
popper-class="checkList-select"
:popper-append-to-body="false"
placeholder=""
>
<el-option
label="立即製作出口報關檢核表，不需要列印，完成時會自動上傅"
:value="1"
></el-option>
<el-option
label="使用已製作完成的出口報關檢核表，並與其他報關文件一起上傳"
:value="2"
></el-option>
</el-select> -->
</Formitem>
</el-col>
</el-row>
</el-form>
</div>
<div class="step2-box" v-if="step2Id">
<div class="title-box">
<span>出口報關檢核表</span>
<el-button v-if="showEdit" type="text" @click="clickEditStepBtn(2)"
>編輯</el-button
>
</div>
<div class="check-type-box">
<el-form
:model="typeFormData1"
ref="typeFormData1Ref"
label-width="200px"
class="type-form-box check-color"
label-position="top"
:disabled="true"
>
<el-form-item
class="type-error"
:label="$t('fillIn.smallTit1')"
prop="customsDeclarationType"
>
<div class="check-auto no-boder-input">
<el-checkbox-group
v-model="typeFormData1.customsDeclarationType"
@change="
handleCheckType1(typeFormData1.customsDeclarationType)
"
>
<el-checkbox
v-for="(item, index) in customsDeclarationTypeList"
:label="item.value"
:key="index"
>
{{ item.label }}
<el-input
v-if="item.value == 'OTHER:'"
v-model="typeFormData1.otherData"
placeholder=""
style="width: 100%"
></el-input>
<span v-if="item.tip">&nbsp;&nbsp;{{ item.tip }}</span>
</el-checkbox>
</el-checkbox-group>
</div>
</el-form-item>
<el-form-item
class="tax-error"
:label="$t('fillIn.isList')"
prop="taxRefundFormFlag"
>
<el-checkbox-group
v-model="typeFormData1.taxRefundFormFlag"
@change="handleCheckType2(typeFormData1.taxRefundFormFlag)"
>
<el-checkbox
v-for="(item, index) in taxRefundFormFlagList"
:label="item.value"
:key="index"
>
{{ item.label }}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
<el-form
class="fedexFormStyle"
ref="typeFormRef"
:model="typeFormData"
label-position="top"
:disabled="true"
>
<el-row :gutter="8">
<el-col :span="8">
<Formitem
:label="$t('fillIn.watchNum1')"
type="view"
prop="supervisoryNo"
>
<el-input
type="text"
:id="'inputInner-view-supervisoryNo'"
v-model="typeFormData.supervisoryNo"
>
</el-input>
</Formitem>
</el-col>
<el-col :span="8">
<Formitem
:label="$t('fillIn.watchNum2')"
prop="originalImportEntryNo"
type="view"
>
<el-input
type="text"
:id="'inputInner-view-originalImportEntryNo'"
v-model="typeFormData.originalImportEntryNo"
>
</el-input>
</Formitem>
</el-col>
<el-col :span="8">
<Formitem
:label="$t('fillIn.watchNum3')"
prop="listOfMaterialsNo"
type="view"
>
<el-input
type="text"
:id="'inputInner-view-listOfMaterialsNo'"
v-model="typeFormData.listOfMaterialsNo"
>
</el-input>
</Formitem>
</el-col>
</el-row>
</el-form>
<p class="small-title">{{ $t("fillIn.smallTit2") }}</p>
<el-checkbox-group
disabled
v-model="exportStatisticsMethod"
class="check-color check-box-aaa"
style="width: 100%; display: flex; gap: 10px"
>
<div style="width: 50%; height: 100%">
<div v-for="(item, index) in exportStatisticsMethodList">
<el-checkbox
class="checkbox-step2"
style="display: block; width: 100%"
:label="item.value"
v-if="item.posation == 'left'"
:key="index + 1"
:class="
item.tip && item.value !== '91' && item.value !== '9M'
? 'height48 checkbox-width50'
: item.value == '9M'
? 'checkbox-9M'
: item.value == 'OTHER:'
? 'line-height48 checkbox-width50'
: 'checkbox-width50'
"
>
<p style="width: 100%">
<span v-if="item.value !== 'OTHER:'">{{ item.label }}</span>
<span v-if="item.value == '91'" class="way-tip">{{
item.tip
}}</span>
</p>
<div style="width: 100%">
<div style="width: 100%">
<span v-if="item.value == 'OTHER:'">{{
item.label
}}</span>
</div>
<div style="width: 100%">
<!-- <el-tooltip
class="item "
effect="dark"
:content="methodOtherData"
placement="top-start"
:disabled="isShowTooltip"
> -->
<el-input
v-if="item.value == 'OTHER:'"
style="width: 90%"
type="textarea"
:rows="2"
placeholder=""
v-model="methodOtherData"
maxlength="38"
show-word-limit
:disabled="true"
>
</el-input>
<!-- </el-tooltip> -->
</div>
</div>
<p
style="width: 100%"
class="way-tip"
v-if="item.value !== '91' && item.value !== '9M'"
>
{{ item.tip }}
</p>
</el-checkbox>
</div>
</div>
<div style="width: 50%; height: 100%">
<div
style="width: 100%"
v-for="(item, index) in exportStatisticsMethodList"
>
<el-checkbox
class="checkbox-step2"
style="width: 100%"
:label="item.value"
v-if="item.posation == 'right'"
:key="index + 2"
:class="
item.tip && item.value !== '91' && item.value !== '9M'
? 'height48 checkbox-width50'
: item.value == '9M'
? 'checkbox-9M'
: 'checkbox-width50'
"
>
<p style="width: 100%">
<span v-if="item.value !== 'OTHER:'">{{ item.label }}</span>
<span v-if="item.value == '91'" class="way-tip">{{
item.tip
}}</span>
</p>
<p style="width: 100%" class="way-tip">
<span v-if="item.value !== '91' && item.value !== '9M'"
>{{ item.tip }}
</span>
<span v-if="item.value == '9M'" style="color: #fc5d5d"
>{{ item.tip }}
</span>
</p>
<div>
<el-input
v-if="item.value == '9M'"
style="margin-top: 4px; width: 90%"
type="textarea"
:rows="2"
placeholder=""
v-model="methodAdditional"
maxlength="105"
:disabled="true"
show-word-limit
>
</el-input>
</div>
</el-checkbox>
</div>
</div>
</el-checkbox-group>
<div class="way-tip-bule">
※以上復出口的案件,附加原進口報單(或國內採購發票),且隨貨附上具結
書正本。(詳如備註)
</div>
</div>
<el-form
class="fedexFormStyle bg-textarea"
ref="formData1Ref"
:model="formData1"
label-position="top"
:disabled="true"
>
<el-row :gutter="8">
<el-col :span="12">
<Formitem label="3. 指定報關日" type="view" prop="dayOfEntry">
<el-date-picker
v-model="formData1.dayOfEntry"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
type="date"
id="inputInner-view-dayOfEntry"
placeholder=""
prefix-icon="none"
>
</el-date-picker>
</Formitem>
</el-col>
<el-col :span="12">
<Formitem type="view">
<div style="line-height: 50px">
<div style="display: inline; color: #333">
&nbsp;&nbsp;&nbsp;7. 商標&nbsp;&nbsp;
</div>
<el-checkbox
style="display: inline"
v-model="brandFlag"
:disabled="true"
>
無</el-checkbox
>
</div>
</Formitem>
<!-- <p class="small-title check-color">
7. 商標&nbsp;&nbsp;
<el-checkbox v-model="brandFlag" :disabled="true" >
無</el-checkbox
>
</p> -->
</el-col>
</el-row>
<div>
<div
style="width: 100%; display: flex; align-items: center; gap: 8px"
>
<div style="width: 50%; display: flex; flex-direction: column">
<el-col :span="12" style="width: 100%; height: 160px">
<div class="textarea-box">
<Formitem
label="4. 中文品名"
:type="pageIndex"
prop="chineseName"
class="label"
>
<el-input
type="textarea"
:id="'inputInner-' + pageIndex + '-chineseName'"
:rows="4"
v-model="formData1.chineseName"
maxlength="500"
show-word-limit
class="cnInput"
>
</el-input>
</Formitem>
</div>
</el-col>
<el-col :span="12" style="width: 100%">
<Formitem label="5. 稅則" :type="pageIndex" prop="taxRules">
<el-input
type="text"
:id="'inputInner-' + pageIndex + '-taxRules'"
v-model="formData1.taxRules"
maxlength="50"
>
</el-input>
</Formitem>
</el-col>
<div style="display: flex; gap: 8px">
<el-col :span="6" style="width: 50%">
<Formitem
label="6. 報關金額"
:type="pageIndex"
prop="customsDeclarationAmount"
>
<el-input
type="text"
:id="
'inputInner-' +
pageIndex +
'-customsDeclarationAmount'
"
oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+4)}"
v-model="formData1.customsDeclarationAmount"
>
</el-input>
</Formitem>
</el-col>
<el-col :span="6" style="width: 50%">
<Formitem label="" prop="currencyCd">
<el-select
:id="'inputInner-' + pageIndex + '-currencyCd'"
v-model="formData1.currencyCd"
filterable
clearable
placeholder="幣別"
value-key="id"
>
<el-option
v-for="(item, index) in currencyCdList"
:key="index"
:label="item.code"
:value="item.code"
>
</el-option>
</el-select>
</Formitem>
</el-col>
</div>
</div>
<div style="width: 50%; display: flex; flex-direction: column">
<el-col :span="12" style="width: 100%">
<Formitem label="文字商標" :type="pageIndex" prop="brandTxt">
<el-input
type="text"
:id="'inputInner-' + pageIndex + '-brandTxt'"
maxlength="100"
:disabled="true"
v-model="formData2.brandTxt"
>
</el-input>
</Formitem>
</el-col>
<el-col :span="12" style="width: 100%; margin-bottom: 5px">
<FileUploadPaste
ref="uploadRef"
style="height: 210px; width: 100%"
:imageBase="image"
type="view"
>
<div style="color: #333">圖案商標</div>
</FileUploadPaste>
</el-col>
</div>
</div>
</div>
</el-form>
<div class="bottom-box">
<p class="small-title">
8. 產證
<span class="checkbox-width80-tip">※每份規費$250</span>
</p>
<el-checkbox-group
v-model="propertyCertificate"
class="checkbox-width80 check-color"
:disabled="true"
>
<el-checkbox
v-for="(item, index) in checkType3List"
:label="item.value"
:key="index"
>
{{ item.label }}
</el-checkbox>
</el-checkbox-group>
<p class="small-title" style="line-height: 14px; margin-top: 8px">
9. ECFA產證
</p>
<el-row :gutter="8">
<el-col :span="12">
<el-checkbox-group
v-model="ecfaPropertyCertificate"
class="checkbox-width80 checkbox-lineheight80 check-color"
:disabled="true"
>
<el-checkbox
v-for="(item, index) in checkType4List"
:label="item.value"
:key="index"
>
{{ item.label }}
</el-checkbox>
</el-checkbox-group>
</el-col>
<el-col :span="12">
<el-form
class="fedexFormStyle"
ref="formDataRef"
:model="formData6"
label-position="top"
:disabled="true"
>
<Formitem
label="產證編號"
type="view"
prop="ecfaPropertyCertificateNo"
>
<el-input
type="text"
:id="'inputInner-view-ecfaPropertyCertificateNo'"
v-model="formData6.ecfaPropertyCertificateNo"
>
</el-input>
</Formitem>
</el-form>
</el-col>
</el-row>
<p class="small-title" style="line-height: 14px; margin-bottom: 8px">
10. 申請
<span class="checkbox-width80-tip">※每份規費$100</span>
</p>
<el-checkbox-group
v-model="applyFor"
class="checkbox-width80 check-color"
:disabled="true"
>
<el-checkbox
v-for="(item, index) in checkType5List"
:label="item.value"
:key="index"
>
{{ item.label }}
</el-checkbox>
</el-checkbox-group>
</div>
</div>
<div class="step3-box" v-if="step3Id">
<div class="title-box">
<span>報關文件</span>
<el-button v-if="showEdit" type="text" @click="clickEditStep3Btn"
>編輯</el-button
>
</div>
<div
class="fileList-box auto-file"
v-for="(item, index) in autoFileList"
:key="index + 's'"
>
<div>
<i class="el-icon-document"></i
><span style="margin-left: 20px"
>自動生成-{{ item.name }}{{ item.type }}</span
>
</div>
<el-button
type="text"
@click="openViewPdf(item)"
:loading="item.findLoading"
>查看</el-button
>
</div>
<div class="upload-btn">
<el-button type="text" disabled>選擇文件上傳</el-button>
</div>
<div
class="userUploadFileList"
:style="{
'overflow-y': uploadFilesList.length > 10 ? 'auto' : 'hidden',
}"
>
<div v-for="(item, index) in uploadFilesList" :key="index">
<div class="fileList-box">
<div style="height: 100%; width: 80%; display: inline-block">
<div>
<Tooltip :content="item.fileName" refName="stepThreeTip"
><span slot="icon">
<span style="display: inline-block; width: 35px">{{
index + 1
}}</span>
<i class="el-icon-document"></i>
<span style="margin-left: 10px">手動上傳-</span>
</span>
</Tooltip>
</div>
</div>
<!-- <div>
<i class="el-icon-document"></i><span style="margin-left: 20px">手動上傳-{{ item.name }}{{ item.type }}</span>
</div> -->
<!-- <el-button type="text" @click="handleRemove(item)">删除</el-button> -->
</div>
</div>
</div>
<el-form
class="stepThreeForm"
style="width: 100%; padding-left: 10px"
label-position="top"
ref="stepThreeForm"
:hide-required-asterisk="true"
>
<el-form-item
label="*所上傳的報關文件，是否適用在目的地國家進口清關報關作業?"
prop="isClear"
>
<el-radio-group
v-model="step1formData.isClear"
style="margin-left: 15px"
disabled
>
<el-radio :label="1"
><span style="font-size: 16px; color: red; font-weight: 600"
>是</span
></el-radio
>
<el-radio :label="0"
><span style="font-size: 16px; color: red; font-weight: 600"
>否</span
></el-radio
>
</el-radio-group>
</el-form-item>
<!-- <el-form-item label="*" prop="radio">
<div
style="
font-size: 16px;
font-weight: 800;
color: red;
background-color: #f2f2f2;
"
>
<el-select
class="stepThreeSelect"
v-model="radio"
placeholder="請選擇"
>
<el-option label="是" value="1"> </el-option>
<el-option label="否" value="0"> </el-option>
</el-select>
<span style="display: inline-block; padding-left: 10px"
>所上傳的報關文件，是否適用在目的地國家進口清關報關作業?</span
>
</div>
</el-form-item> -->
</el-form>
</div>
<div class="width-btn-box" style="margin-top: 60px" v-if="showEdit">
<el-button class="entrySaveButton" @click="clickEditStep3Btn">
{{ $t("common.saveBtn") }}
</el-button>
</div>
<div class="width-btn-box" v-if="showEdit">
<el-button
class="entrySaveButton entrySaveButton-background"
@click="infoSubmitBtn"
>
{{ $t("common.submitBtn") }}
</el-button>
</div>
<div class="width-btn-box" style="margin-top: 60px" v-if="!showEdit">
<el-button class="entrySaveButton" @click="clickEditStep3Btn">
返回
</el-button>
</div>
</div>
</el-drawer>
</template>
<script>
import { findAllCurrencyCd, findDetailsById } from "@/api/fillForm.js";
import FileUploadPaste from "@/components/FileUploadPaste";
export default {
props: {
pageIndex: {
type: String,
default() {
return "";
},
},
},
components: { FileUploadPaste },
data() {
return {
detailDrawer: false,
step1formData: {
deliveryNo: "",
liaisons: "",
consigneeNo: "",
email: "",
tel: "",
extensionTel: "",
phone: "",
customsClearanceInstruction: "",
fileSelect: 2,
isClear: null,
},
typeFormData1: {
customsDeclarationType: [],
taxRefundFormFlag: [],
otherData: "",
},
typeFormData: {
supervisoryNo: "",
originalImportEntryNo: "",
listOfMaterialsNo: "",
},
methodAdditional: "",
exportStatisticsMethod: [],
methodOtherData: "",
formData1: {
dayOfEntry: "",
chineseName: "",
taxRules: "",
customsDeclarationAmount: "",
currencyCd: "",
},
currencyCdList: [],
brandFlag: false,
formData2: {
brandTxt: "",
brandImage: "",
image: "",
},
image: "",
propertyCertificate: [],
ecfaPropertyCertificate: [],
formData6: {
ecfaPropertyCertificateNo: "",
},
applyFor: [],
step1Id: null,
step2Id: null,
step3Id: null,
declareId: null,
showEdit: true,
radio: null,
autoFileList: [],
uploadFilesList: [],
};
},
computed: {
customsDeclarationTypeList() {
return [
{ label: this.$t("fillIn.listType1"), value: "G5", tip: "" },
{ label: this.$t("fillIn.listType2"), value: "G3", tip: "" },
{ label: this.$t("fillIn.listType3"), value: "B9", tip: "" },
{ label: this.$t("fillIn.listType4"), value: "B8", tip: "" },
{ label: this.$t("fillIn.listType5"), value: "D5", tip: "" },
{ label: this.$t("fillIn.listType6"), value: "F5", tip: "" },
{
label: this.$t("fillIn.listType7_1"),
value: "OTHER:",
tip: this.$t("fillIn.listType7_2"),
},
];
},
taxRefundFormFlagList() {
return [
{ label: this.$t("fillIn.yes"), value: 1 },
{ label: this.$t("fillIn.no"), value: 0 },
];
},
exportStatisticsMethodList() {
return [
{
label: this.$t("fillIn.wayList1"),
value: "02",
tip: "",
posation: "left",
},
{
label: this.$t("fillIn.wayList2"),
value: "81",
tip: "",
posation: "right",
},
{
label: "(04)無價之禮物、貨樣及廣告品, 不再進口",
value: "04",
tip: "",
posation: "left",
},
{
label: "(82)外貨復出口不再進口",
value: "82",
tip: "",
posation: "right",
},
{
label: this.$t("fillIn.wayList3"),
value: "53",
tip: this.$t("fillIn.wayList3_1"),
posation: "left",
},
{
label: this.$t("fillIn.wayList4"),
value: "9L",
tip: "",
posation: "right",
},
{
label: this.$t("fillIn.wayList5_1"),
value: "91",
tip: this.$t("fillIn.wayList5_2"),
posation: "left",
},
{
label: this.$t("fillIn.wayList6"),
value: "9S",
tip: "",
posation: "right",
},
{
label: this.$t("fillIn.wayList7_1"),
value: "94",
tip: this.$t("fillIn.wayList7_2"),
posation: "left",
},
{
label: this.$t("fillIn.wayList9_1"),
value: "9M",
tip: this.$t("fillIn.wayList9_2"),
posation: "right",
},
{
label: this.$t("fillIn.wayList10_1"),
value: "96",
tip: this.$t("fillIn.wayList10_2"),
posation: "left",
},
{
label: this.$t("fillIn.wayList8_1"),
value: "92",
tip: this.$t("fillIn.wayList8_2"),
posation: "right",
},
{
label: this.$t("fillIn.wayList11"),
value: "OTHER:",
tip: "",
posation: "left",
},
];
},
checkType3List() {
return [
{ label: "不要", value: "pc_no" },
{ label: "要", value: "pc_yes" },
{ label: "隨機", value: "pc_random" },
{ label: "不隨機", value: "pc_niRandom" },
];
},
checkType4List() {
return [
{ label: "不要", value: "ecfa_no" },
{ label: "要申請", value: "ecfa_yes" },
{ label: "自行申請", value: "ecfa_apply" },
];
},
checkType5List() {
return [
{ label: "沖退原料稅", value: "ct" },
{ label: "退內地稅", value: "tn" },
{ label: "出口證明聯/副報單", value: "ck" },
];
},
},
created() {
Promise.all([findAllCurrencyCd()]).then((res) => {
this.currencyCdList = res[0].data;
});
},
methods: {
openDrawer(row, type) {
this.$nextTick(() => {
this.detailDrawer = true;
if (type == "table") {
this.showEdit = false;
} else {
this.showEdit = true;
}
this.declareId = row.id;
this.getFindDetailsById();
});
},
getFindDetailsById() {
findDetailsById(this.declareId)
.then((res) => {
if (res.code == 200) {
let resData = res.data;
this.declareId = resData.declare.id;
this.step1Id = resData.declare.deliveryInfoId;
this.step2Id = resData.declare.exportInspectionInfoId;
this.step3Id = resData.declare.customsFileId;
if (this.step1Id) {
this.editFillBackStep1(res.data.declareInfo);
}
if (this.step2Id) {
this.editFillBackStep2(res.data.declareCheckInfo);
}
if (this.step3Id) {
this.editFillBackStep3(res.data);
}
} else {
this.msgWarning(res.msg);
}
})
.catch((err) => {
console.log(err);
});
},
editFillBackStep1(data) {
this.step1formData = {
deliveryNo: data.deliveryNo,
liaisons: data.liaisons,
consigneeNo: data.consigneeNo,
email: data.email,
tel: data.tel,
extensionTel: data.extensionTel,
phone: data.phone,
customsClearanceInstruction: data.customsClearanceInstruction,
fileSelect: data.fileSelect,
isClear: null,
};
},
editFillBackStep2(data) {
if (data) {
let cdl = data.customsDeclarationType;
this.typeFormData1 = {
customsDeclarationType: cdl
? cdl.includes("OTHER:")
? ["OTHER:"]
: [cdl]
: [],
taxRefundFormFlag: [data.taxRefundFormFlag],
otherData: cdl
? cdl.includes("OTHER:")
? data.customsDeclarationType.slice(6)
: ""
: "",
};
// this.typeFormData1 = {
// customsDeclarationType: data.customsDeclarationType.includes("OTHER:")
// ? ["OTHER:"]
// : [data.customsDeclarationType],
// taxRefundFormFlag: [data.taxRefundFormFlag],
// otherData: data.customsDeclarationType.includes("OTHER:")
// ? data.customsDeclarationType.slice(6)
// : "",
// };
this.typeFormData = {
supervisoryNo: data.supervisoryNo,
originalImportEntryNo: data.originalImportEntryNo,
listOfMaterialsNo: data.listOfMaterialsNo,
};
let exportData = data.exportStatisticsMethod?.split(";");
if (exportData && exportData.length > 0) {
exportData.forEach((item, index, arr) => {
if (item.includes("OTHER:")) {
this.methodOtherData = item.slice(6);
arr[index] = "OTHER:";
}
});
}
this.exportStatisticsMethod = exportData || [];
this.methodAdditional = data.methodAdditional;
this.formData1 = {
dayOfEntry: data.dayOfEntry,
chineseName: data.chineseName,
taxRules: data.taxRules,
customsDeclarationAmount: data.customsDeclarationAmount,
currencyCd: data.currencyCd,
};
this.brandFlag = data.brandFlag == 1 ? true : false;
this.formData2 = {
brandTxt: data.brandTxt,
brandImage: data.brandImage,
image: data.image ? "data:image/jpeg;base64," + data.image : null,
};
this.image = data.image ? "data:image/jpeg;base64," + data.image : "";
this.propertyCertificate = data.propertyCertificate
? data.propertyCertificate.split(";")
: [];
this.ecfaPropertyCertificate = data.ecfaPropertyCertificate
? [data.ecfaPropertyCertificate]
: [];
this.formData6.ecfaPropertyCertificateNo =
data.ecfaPropertyCertificateNo;
this.applyFor = data.applyFor ? data.applyFor.split(";") : [];
}
},
editFillBackStep3(data) {
this.step1formData.isClear = data.declare.isClear;
this.autoFileList = data.uploadFileVoList;
if (this.autoFileList != null) {
this.autoFileList = this.autoFileList.map((item) => {
return {
...item,
findLoading: false,
};
});
}
this.uploadFilesList = data.manualFileVoList;
this.uploadFilesList = this.uploadFilesList.map((item) => {
return {
...item,
fileName: item.name + item.type,
};
});
},
closeDrawer() {
this.detailDrawer = false;
},
clickEditStepBtn(val) {
this.detailDrawer = false;
this.$emit("editDetail", val);
},
clickEditStep3Btn() {
this.detailDrawer = false;
},
infoSubmitBtn() {
this.detailDrawer = false;
this.$emit("submitBtn");
},
openViewPdf(file) {
this.$emit("viewPdf", file);
},
},
};
</script>
<style lang="scss" scoped>
.detail-drawer-box {
.info-box {
padding: 0 50px 100px 100px;
.title {
font-size: 16px;
font-weight: 600;
margin-bottom: 12px;
color: #000;
}
.title-box {
font-size: 14px;
font-weight: 600;
// line-height: 22px;
color: #333;
display: flex;
justify-content: space-between;
margin-bottom: 4px;
.el-button {
padding: 0;
font-size: 16px;
}
}
.step1-box {
margin-bottom: 20px;
.select-box {
::v-deep .el-input__inner {
// padding-bottom: 12px;
// text-align: right;
}
::v-deep .el-popper[x-placement^="bottom"] .popper__arrow::after {
border-bottom-color: transparent;
}
::v-deep .el-popper .popper__arrow,
.el-popper .popper__arrow::after {
border-style: none !important;
}
}
::v-deep .el-textarea .el-input__count {
background: #f2f2f2;
}
::v-deep .el-textarea textarea {
font-size: 14px !important;
}
}
.fedexFormStyle {
::v-deep .el-form-item .el-form-item__label {
color: #333 !important;
}
}
::v-deep .el-textarea__inner {
resize: none;
}
.step2-box {
.check-type-box {
background: #f2f2f2;
padding: 12px;
margin-bottom: 14px;
.fedexFormStyle .el-form-item {
background: #fff;
margin-top: 4px;
}
.type-form-box {
::v-deep .el-form-item__label {
height: 24px;
line-height: 24px;
font-size: 14px;
font-weight: 500;
color: #000000;
}
::v-deep .el-form-item__content {
line-height: 32px;
}
::v-deep .el-form-item {
margin: 0;
}
}
.check-auto {
.el-checkbox {
width: calc(100% / 4 - 30px);
}
}
.no-boder-input {
.el-input {
width: 150px;
}
::v-deep .el-input__inner {
background-color: inherit;
border: none;
border-bottom: 1px solid #000;
height: 30px;
line-height: 30px;
}
}
.type-error {
::v-deep .el-form-item__error {
top: -22px;
left: 147px;
}
}
.tax-error {
::v-deep .el-form-item__error {
top: -22px;
left: 166px;
}
}
.checkbox-width50 {
line-height: 36px;
width: calc(100% / 2 - 30px);
}
.checkbox-9M {
margin-top: 14px;
line-height: 36px;
// width: calc(100% / 2 - 30px);
// ::v-deep .el-checkbox__label {
// width: calc(100% - 24px);
// }
::v-deep .el-checkbox__input {
vertical-align: 70px;
}
}
.checkbox-width100 {
line-height: 36px;
width: 100%;
::v-deep .el-checkbox__label {
width: calc(100% - 24px);
}
::v-deep .el-checkbox__input {
vertical-align: 50px;
}
}
.way-tip {
color: #999;
}
.height48 {
height: 48px;
::v-deep .el-checkbox__label {
line-height: 24px;
}
::v-deep .el-checkbox__input {
vertical-align: 16px;
}
}
.line-height48 {
::v-deep .el-checkbox__label {
vertical-align: 22px;
}
::v-deep .el-checkbox__input {
vertical-align: 69px;
}
}
.way-tip-bule {
width: 100%;
height: 29px;
line-height: 29px;
background: #007ab71a;
color: #3478b2;
padding: 0 12px;
margin-bottom: 4px;
font-size: 12px;
}
}
.check-color {
::v-deep .el-checkbox {
color: #000000;
font-size: 12px;
}
::v-deep .el-checkbox__label {
font-size: 12px;
padding-left: 4px;
}
}
.bottom-box {
padding: 12px;
background: #f2f2f2;
.fedexFormStyle .el-form-item {
background: #fff;
margin-top: 8px;
}
.checkbox-width80 {
.el-checkbox {
line-height: 36px;
width: 80px;
}
}
.checkbox-width80-tip {
margin-left: 5px;
background: #f479201a;
padding: 7px 8px;
color: #f47920;
font-size: 12px;
}
.checkbox-lineheight80 {
.el-checkbox {
line-height: 60px;
height: 60px;
width: 80px;
}
}
.check-inline-block {
::v-deep .el-checkbox-group {
display: inline-block;
}
}
}
.bg-textarea {
::v-deep .el-textarea .el-input__count {
background: #f2f2f2;
}
}
::v-deep .el-checkbox__input.is-disabled .el-checkbox__inner {
border: 2px solid #007ab7;
}
::v-deep .el-checkbox__input.is-disabled + span.el-checkbox__label {
color: #333;
}
}
.step3-box {
margin-top: 20px;
.upload-btn {
width: 100%;
height: 38px;
line-height: 38px;
padding-left: 10px;
background: #f2f2f2;
text-align: left;
.el-button--text {
color: #8e8e8e !important;
}
}
.fileList-box {
width: 100%;
background: #f2f2f2;
font-size: 14px;
height: 36px;
line-height: 36px;
border-top: 1px solid #e0e0e0;
display: flex;
justify-content: space-between;
padding: 0 20px;
}
.auto-file {
border: none;
margin-bottom: 6px;
}
}
}
.width-btn-box {
width: 100%;
text-align: center;
margin-top: 16px;
.el-button {
width: 300px;
}
}
::v-deep .el-textarea.is-disabled .el-textarea__inner {
color: #8e8e8e !important;
}
::v-deep .el-input.is-disabled .el-input__inner {
color: #8e8e8e !important;
}
::v-deep
.el-checkbox__input.is-disabled.is-checked
.el-checkbox__inner::after {
border-color: #007ab7 !important;
}
}
.textarea-box {
// margin-bottom: 5px;
::v-deep .el-form-item .el-form-item__content {
position: static !important;
.el-textarea {
.el-textarea__inner {
padding-bottom: 1.7rem;
}
}
}
.label {
font-size: 0.75rem;
font-weight: 700;
background-color: #f2f2f2;
color: #444;
height: max-content;
// padding-bottom: 0.6rem 0 0 0.6rem;
line-height: 25px;
}
}
.userUploadFileList {
max-height: 360px;
// overflow-y: auto;
}
</style>
<template>
<el-dialog
title="管理模版"
:visible.sync="dialogVisible"
width="50%"
:show-close="false"
:close-on-click-modal="false"
>
<el-form
class="fedexFormStyle"
ref="formDialogDataRef"
:model="formData"
:rules="rules"
label-position="top"
>
<el-row :gutter="10">
<el-col :span="12">
<Formitem :label="$t('fillIn.placeholder')" type="edit" prop="templateName">
<el-input
type="text"
:id="'inputInner-edit-templateName'"
v-model="formData.templateName"
:disabled="saveBtnText=='更新'"
>
</el-input>
</Formitem>
</el-col>
<el-col :span="12">
<Formitem :label="$t('fillIn.contacts')" type="edit" prop="liaisons">
<el-input
type="text"
:id="'inputInner-edit-liaisons'"
maxlength="30"
v-model="formData.liaisons"
>
</el-input>
</Formitem>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<Formitem
:label="$t('fillIn.exporterNum')"
type="edit"
prop="consigneeNo"
>
<el-input
type="text"
:id="'inputInner-edit-consigneeNo'"
maxlength="12"
oninput="this.value = this.value.replace(/\s+/g, '')"
v-model="formData.consigneeNo"
>
</el-input>
</Formitem>
</el-col>
<el-col :span="12">
<Formitem :label="$t('fillIn.email')" type="edit" prop="email">
<el-input
type="text"
:id="'inputInner-edit-email'"
v-model="formData.email"
>
</el-input>
</Formitem>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="8">
<Formitem :label="$t('fillIn.phone1')" type="edit" prop="tel">
<el-input
type="text"
:id="'inputInner-edit-tel'"
maxlength="40"
v-model="formData.tel"
>
</el-input>
</Formitem>
</el-col>
<el-col :span="8">
<Formitem
:label="$t('fillIn.phone2')"
type="edit"
prop="extensionTel"
>
<el-input
type="text"
:id="'inputInner-edit-extensionTel'"
maxlength="10"
v-model="formData.extensionTel"
>
</el-input>
</Formitem>
</el-col>
<el-col :span="8">
<Formitem :label="$t('fillIn.phone3')" type="edit" prop="phone">
<el-input
type="text"
:id="'inputInner-edit-phone'"
maxlength="40"
v-model="formData.phone"
>
</el-input>
</Formitem>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="textarea-box">
<el-form-item
:label="$t('fillIn.indicate')"
prop="customsClearanceInstruction"
class="label"
>
<el-input
type="textarea"
:rows="6"
v-model="formData.customsClearanceInstruction"
show-word-limit
maxlength="2000"
>
</el-input>
</el-form-item>
</div>
</el-col>
</el-row>
</el-form>
<div align="center">
<div class="dialogOption entrySave">
<el-button
class="entrySaveButton entrySaveButton-background"
@click="checkTempName"
:loading="updateLoading"
>
{{ saveBtnText }}
</el-button>
<el-button class="entrySaveButton" @click="closeDialog">
{{ $t("common.cancleBtn") }}
</el-button>
</div>
</div>
</el-dialog>
</template>
<script>
import { updateTemplate, getTemByTemName , addSaveTemplate } from "@/api/fillForm.js";
export default {
components: {},
props: {},
data() {
return {
dialogVisible: false,
updateLoading: false,
tempId: null,
saveBtnText:"保存",
formData: {
templateName:"",
liaisons: "",
consigneeNo: "",
email: "",
tel: "",
extensionTel: "",
phone: "",
customsClearanceInstruction: "",
},
};
},
computed: {
rules() {
let rules = {
liaisons: [
{ required: true, message: "請您輸入聯系人", trigger: "blur" },
{
validator: (rule, value, callback) => {
if (!this.regExp.nameExp.test(value)) {
callback(
"請您使用中文，英文和空格的組合，不支持以下字符：、, ；, ‘,"
);
} else if (value.length > 30) {
callback(
"聯系人姓名最多可包含30個字元，而您輸入了" +
value.length +
"個字元。"
);
} else {
callback();
}
},
trigger: "blur",
},
], templateName: [
{ required: true, message: "請輸入使用者名稱", trigger: "blur" },
{
trigger: "blur",
},
],
consigneeNo: [
{
required: true,
message: "請您輸入貨物輸出統一編號",
trigger: "blur",
},
{
validator: (rule, value, callback) => {
if (!this.regExp.expNumENExp.test(value)) {
callback("請您輸入統一編號，中間不要有空格。");
} else {
callback();
}
},
trigger: "blur",
},
],
email: [
{ required: true, message: "請您輸入郵箱", trigger: "blur" },
{
validator: (rule, value, callback) => {
if (!this.regExp.email.test(value)) {
callback("您輸入的郵件格式有錯誤，請您更改！");
} else if (this.regExp.emailPattern.test(value)) {
callback("郵箱地址不允許存在特殊字符以及空格！");
} else {
callback();
}
},
trigger: "blur",
},
],
tel: [
{ required: true, message: "請您輸入聯絡電話", trigger: "blur" },
{
validator: (rule, value, callback) => {
if (!this.regExp.phoneExp.test(value)) {
callback("不支持以下字符：、, ；, ‘, ’");
} else if (value.length > 40) {
callback(
"聯絡電話最多可包含40個字元，而您輸入了" +
value.length +
"個字元。"
);
} else {
callback();
}
},
trigger: "blur",
},
],
extensionTel: [
{
required: false,
validator: (rule, value, callback) => {
if (value) {
if (!this.regExp.phoneExp.test(value)) {
callback("不支持以下字符：、, ；, ‘, ’");
} else if (value.length > 10) {
callback(
"分機最多可包含10個字元，而您輸入了" +
value.length +
"個字元。"
);
} else {
callback();
}
} else {
callback();
}
},
trigger: "blur",
},
],
phone: [
{
validator: (rule, value, callback) => {
if (value) {
if (!this.regExp.phoneExp.test(value)) {
callback("不支持以下字符：、, ；, ‘, ’");
} else if (value.length > 40) {
callback(
"行動電話最多可包含40個字元，而您輸入了" +
value.length +
"個字元。"
);
} else {
callback();
}
} else {
callback();
}
},
trigger: "blur",
},
],
};
this.$forceUpdate(() => {
this.$refs["formDialogDataRef"].clearValidate();
});
return rules;
},
},
methods: {
openDialog(row) {
this.dialogVisible = true;
this.editFillBackInfo(row);
this.tempId = row?.id;
},
closeDialog() {
this.dialogVisible = false;
},
updateTemp() {
let paramsData = {
...this.formData,
id: this.tempId,
};
this.$refs.formDialogDataRef.validate((valid) => {
if (valid) {
this.updateLoading = true;
updateTemplate(paramsData)
.then((res) => {
if (res.code == 200) {
this.$message.success("保存成功");
this.dialogVisible = false;
this.$emit("updateSearch");
} else {
this.msgWarning(res.msg);
}
this.updateLoading = false;
})
.catch(() => {
this.updateLoading = false;
});
}
});
},
editFillBackInfo(data) {
if(data){
this.saveBtnText="更新";
this.formData = {
liaisons: data.liaisons,
consigneeNo: data.consigneeNo,
email: data.email,
tel: data.tel,
extensionTel: data.extensionTel,
phone: data.phone,
customsClearanceInstruction: data.customsClearanceInstruction,
templateName: data.templateName,
};
}else{
this.formData={};
this.saveBtnText = "保存";
}
},// 检查模板是否重复
checkTempName() {
// this.formData.templateName
this.$refs.formDialogDataRef.validate((valid) => {
if (valid) {
// this.dialogVisible = true;
getTemByTemName(this.formData.templateName)
.then((res) => {
if (res.code == 200) {
this.addTemplate();
} else {
if(this.saveBtnText=='保存'){
this.$confirm(this.$t("fillIn.template.confirmCoverTemplate"), "提示", {
confirmButtonText: this.$t("common.sureBtn"),
cancelButtonText: this.$t("common.cancleBtn"),
type: "warning",
}).then(() => {
this.tempId = res.data.id;
this.updateTemp(this.formData);
this.dialogVisible = false;
});
}else{
this.tempId = res.data.id;
this.updateTemp(this.formData);
this.dialogVisible = false;
}
}
this.$parent.findCurTemList();
})
.catch((res) => {
this.$message.error(res);
this.dialogVisible = false;
});
}
});
},// 新增模板
addTemplate() {
let paramsData = {
...this.formData,
};
addSaveTemplate(paramsData)
.then((res) => {
if (res.code == 200) {
this.$message.success("保存成功");
} else {
this.msgWarning(res.msg);
}
this.dialogVisible = false;
})
.catch(() => {
this.dialogVisible = false;
});
},
},
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
padding: 20px 100px;
}
::v-deep .el-dialog__header {
text-align: center;
}
.textarea-box {
margin-bottom: 5px;
::v-deep .el-form-item .el-form-item__content {
position: static !important;
}
.label {
height: 24px;
font-size: 0.75rem;
font-weight: 700;
background-color: #f2f2f2;
color: #444;
height: max-content;
padding: 0.6rem 0 0 0.6rem;
line-height: 14px;
}
}
</style>
<template>
<div class="fill-step">
<!-- <div
v-for="(item, index) in steps"
:key="index"
:class="
item.state1 == curStep
? 'edit-color'
: stepStates.includes(item.state2)
? setSelectIndex==2 && item.state1==2 ? 'cur-color':'finish-color'
: 'cur-color'
"
>
<div>
<i
class="el-icon-success"
v-if="stepStates.includes(item.state2) && item.state1 != curStep "
></i>
<i class="el-icon-success" v-else></i>
<span> {{ item.label }}</span>
</div>
<div v-if="setSelectIndex==2 && item.state1==2"></div>
<el-button
type="text"
v-else-if="stepStates.includes(item.state2) && item.state1 != curStep"
@click="editStepBtn(item)"
:loading="editLoading && curClickStep == item.state1"
>編輯</el-button
>
</div> -->
<div
v-for="(item, index) in steps"
:key="index"
:class="item.state1 == curStep
? 'edit-color'
: stepStates.includes(item.state2)
? setSelectIndex == 2 && item.state1 == 2 ? 'cur-color' : 'finish-color'
: 'cur-color'
"
>
<div>
<i
class="el-icon-success"
v-if="stepStates.includes(item.state2) && item.state1 != curStep"
></i>
<i class="el-icon-success" v-else></i>
<span> {{ item.label }}</span>
</div>
<div v-if="setSelectIndex == 2 && item.state1 == 2"></div>
<el-button
type="text"
v-else-if="stepEdit.includes(item.state2) && item.state1 != curStep"
@click="editStepBtn(item)"
:loading="editLoading && curClickStep == item.state1"
:disabled="editDisabled"
>編輯</el-button
>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
props: {
curStep: {
type: Number,
default() {
return 1;
},
},
//控制颜色
stepStates: {
type: Array,
default() {
return [];
},
},
//控制编辑按钮显示
stepEdit: {
type: Array,
default() {
return [];
},
},
editLoading: {
type: Boolean,
default() {
return false;
},
},
editDisabled: {
type: Boolean,
default() {
return false;
},
},
setSelectIndex: {
type: Number,
},
},
data() {
return {
curClickStep: null,
};
},
created() {},
computed: {
steps() {
return [
{
label: this.$t("fillIn.step1"),
state1: 1,
state2: "finish1",
},
{
label: this.$t("fillIn.step2"),
state1: 2,
state2: "finish2",
},
{
label: this.$t("fillIn.step3"),
state1: 3,
state2: "finish3",
},
];
},
},
methods: {
editStepBtn(val) {
this.curClickStep = val.state1;
let filtStep = this.stepStates.filter((item) => item != val.state2);
this.$emit("setStepStates", [...new Set(filtStep)]);
this.$emit("editNextStep", {
curStep: val.state1,
leaveStep: this.curStep,
});
},
},
};
</script>
<style lang="scss" scoped>
.fill-step {
padding: 16px 16px;
line-height: 40px;
// display: flex;
// flex-direction: column
.cur-color {
display: flex;
justify-content: space-between;
color: #919191;
}
.edit-color {
display: flex;
justify-content: space-between;
color: #4d148c;
}
.finish-color {
display: flex;
justify-content: space-between;
font-weight: 500;
font-size: 14px;
color: #008a00;
}
}
</style>
<template>
<div class="wrap">
<div v-if="showFillForm" class="content-box">
<div class="header">
<el-button
type="text"
@click="saveForm"
:loading="editLoading"
:disabled="editDisabled"
>{{ $t("fillIn.saveForm") }}</el-button
>
<el-button type="text" v-if="curStep != 3" @click="allClear">{{
$t("fillIn.allClear")
}}</el-button>
</div>
<div class="view-box">
<div class="main-box">
<div class="left-box">
<!-- <div><div style="width: 500px; height: 100px; background-color: red; position: absolute; left: 30%;"></div></div> -->
<step-one
ref="stepOneRef"
v-show="curStep == 1"
:stepStates="stepStates"
:declareId="declareId"
:step1Id="step1Id"
:generateAutoPdf="generatePdf"
@addNextStep="addNextStep"
@setStepStates="setStepStates"
@clickLoading="clickLoading"
@selectIndex="selectIndex"
@clearStep2Data="clearStep2Data"
></step-one>
<step-two
ref="stepTwoRef"
v-show="curStep == 2"
:stepStates="stepStates"
:step2Id="step2Id"
:declareId="declareId"
:generateAutoPdf="generatePdf"
@addNextStep="addNextStep"
@setStepStates="setStepStates"
@clickLoading="clickLoading"
></step-two>
<step-three
ref="stepThreeRef"
v-show="curStep == 3"
:step3Id="step3Id"
:declareId="declareId"
:stepStates="stepStates"
@addNextStep="addNextStep"
@setStepStates="setStepStates"
@sucSubmit="sucSubmit"
@clickLoading="clickLoading"
@clickDisabled="clickDisabled"
></step-three>
</div>
<div class="right-box">
<fill-step
:curStep="curStep"
:stepStates="stepStates"
:stepEdit="stepEdit"
:editLoading="editLoading"
:editDisabled="editDisabled"
:setSelectIndex="setSelectIndex"
@editNextStep="editNextStep"
@setStepStates="setStepStates"
></fill-step>
</div>
</div>
</div>
</div>
<div v-else class="nav-page-box">
<div class="flex-box">
<div align="center" class="suc-title">
<i class="el-icon-circle-check"></i>
<span>感謝您使用聯邦快遞線上申報平臺</span>
</div>
<div class="nav-btn-box">
<p class="declare-tip">接下來您還可以進行如下流程</p>
<div class="declare-box">
<div class="declare" style="margin-right: 50px">
<svg-icon class="el-icon-user-solid" icon-class="newDeclare" />
<el-button
class="entrySaveButton entrySaveButton-background"
type="primary"
@click="addNewDeclara"
>
申報新提單
</el-button>
</div>
<div class="declare">
<svg-icon class="el-icon-user-solid" icon-class="declareSearch" />
<el-button
class="entrySaveButton entrySaveButton-background"
type="primary"
@click="goDeclaraSearch"
>
提單査詢
</el-button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import fillStep from "./fillStep.vue";
import stepOne from "./stepOne.vue";
import stepTwo from "./stepTwo.vue";
import stepThree from "./stepThree.vue";
import { findDetailsById } from "@/api/fillForm.js";
export default {
name: "declarationInput",
components: {
stepOne,
stepTwo,
fillStep,
stepThree,
},
props: {},
data() {
return {
topSaveLoading: false,
formTemName: "",
curStep: 1,
step1Id: null,
step2Id: null,
step3Id: null,
showFillForm: true,
stepStates: [],
stepEdit: [],
declareId: null,
editLoading: false,
editDisabled: false,
setSelectIndex: null,
generatePdf: false,
};
},
computed: {},
created() {
if (this.$route.params.id) {
this.curStep = JSON.parse(this.$route.params.step);
this.declareId = JSON.parse(this.$route.params.id);
this.getFindDetailsById("auto");
}
},
methods: {
// 保存按钮
saveForm() {
this.editLoading = true;
if (this.curStep == 1) {
this.$refs.stepOneRef.nextStepOne("topSave");
} else if (this.curStep == 2) {
this.$refs.stepTwoRef.nextStepTwo("topSave");
} else if (this.curStep == 3) {
this.$refs.stepThreeRef.nextStepThree("topSave");
}
},
// 全部清除按钮
allClear() {
if (this.curStep == 1) {
this.$refs.stepOneRef.clearFormStep1();
} else if (this.curStep == 2) {
this.$refs.stepTwoRef.clearFormStep2();
}
},
// 改变右侧菜单栏的状态
//list: 校验通过 显示绿色 del: 删除 stepEdit:编辑按钮控制
setStepStates(list, stepEdit, delList, delEdit) {
this.stepStates = [
...new Set(
this.stepStates.concat(list).filter((item) => item !== delList)
),
];
this.stepEdit = [
...new Set(
this.stepEdit.concat(stepEdit).filter((item) => item !== delEdit)
),
];
},
// 跳转对应的步骤并回填信息
addNextStep(obj) {
this.curStep = obj.curStep;
this.declareId = obj.declareId || null;
this.getFindDetailsById("back");
},
// 编辑时跳转到相应的步骤
editNextStep(obj) {
if (obj.leaveStep == 1) {
if (this.$refs.stepOneRef.formData.fileSelect.length <= 0) {
this.$alert("請您選擇出口報關檢核表製作選項", "提示", {
confirmButtonText: "確定",
type: "warning",
});
return;
}
}
let msg = this.checkStepForm(obj);
if (!msg) {
if (obj.leaveStep == 1) {
this.$refs.stepOneRef.nextStepOne(obj.curStep);
} else if (obj.leaveStep == 2) {
this.$refs.stepTwoRef.nextStepTwo(obj.curStep);
} else if (obj.leaveStep == 3) {
this.$refs.stepThreeRef.nextStepThree(obj.curStep);
}
}
},
checkStepForm(obj) {
var msg = "";
var msg1 = "";
this.generatePdf = false;
if (obj.curStep == 3) {
this.generatePdf = true;
//强制校验
let stepTwoCheckResult = "";
let stepOneCheckResult = this.$refs.stepOneRef.checkForm();
if (this.$refs.stepOneRef.formData.fileSelect != 2) {
stepTwoCheckResult = this.$refs.stepTwoRef.checkForm();
}
if (stepOneCheckResult.length > 0) {
msg = "聯絡方式與特殊交待事項\n";
}
if (stepTwoCheckResult.length > 0) {
msg1 += "出口報關檢核表";
}
if (msg || msg1) {
const h = this.$createElement;
this.$msgbox({
message: h("p", { style: { margin: "30px 50px 10px 50px" } }, [
h(
"i",
{
style: {
fontSize: "40px",
display: "block",
color: "#FF6600",
},
attrs: {
class: "el-icon-warning",
id: "commentContent",
},
},
null
),
h(
"div",
{
style: {
fontSize: "18px",
fontWeight: "700",
margin: "15px 0px",
},
attrs: { class: "font-style" },
},
"以下頁面校驗未通過!"
),
h(
"div",
{
style: { fontSize: "15px", fontWeight: "700" },
attrs: { class: "font-style" },
},
msg
),
h(
"div",
{
style: { fontSize: "15px", fontWeight: "700" },
attrs: { class: "font-style" },
},
msg1
),
// h('div', { attrs: { class: 'font-style' } }, aaa)
]),
confirmButtonClass: "confirm-button",
confirmButtonText: "確定",
iconClass: "el-icon-warning",
center: true,
});
}
// console.log(stepOneCheckResult);
}
return msg || msg1;
},
// 完成提交时打开导航页
sucSubmit() {
this.showFillForm = false;
},
// 增加新的提单
addNewDeclara() {
this.formTemName = "";
this.curStep = 1;
this.step1Id = null;
this.step2Id = null;
this.step3Id = null;
this.stepStates = [];
(this.stepEdit = []), (this.declareId = null);
this.showFillForm = true;
this.setSelectIndex = null;
this.generatePdf = false;
this.$store.dispatch("fillForm/addDeliveryNo", "");
},
// 跳转到提单查询页面
goDeclaraSearch() {
this.$router
.push({
name: "declareQuery",
})
.catch(() => {});
},
// 获取提单的全部信息并回填，初始化右侧菜单栏的状态
getFindDetailsById(type) {
findDetailsById(this.declareId)
.then((res) => {
if (res.code == 200) {
let resData = res.data;
this.declareId = resData.declare.id;
this.step1Id = resData.declare.deliveryInfoId;
this.step2Id = resData.declare.exportInspectionInfoId;
this.step3Id = resData.declare.customsFileId;
this.$store.dispatch(
"fillForm/addDeliveryNo",
resData.declare.deliveryNo
);
//加载右侧编辑状态
// if (type == "auto") {
let deliveryInfoOperStatus = resData.declare.deliveryInfoOperStatus;
let exportInspectionOperStatus =
resData.declare.exportInspectionOperStatus;
let customsFileOperStatus = resData.declare.customsFileOperStatus;
if (deliveryInfoOperStatus) {
if (deliveryInfoOperStatus == 1) {
this.setStepStates(["finish1"], ["finish1"], "", "");
} else {
this.setStepStates([], ["finish1"], "finish1", "");
}
// this.stepEdit.push("finish1");
}
if (exportInspectionOperStatus) {
if (exportInspectionOperStatus == 1) {
this.setStepStates(["finish2"], ["finish2"], "", "");
} else {
this.setStepStates([], ["finish2"], "finish2", "");
}
// this.stepEdit.push("finish2");
}
if (customsFileOperStatus) {
if (customsFileOperStatus == 1) {
this.setStepStates(["finish3"], ["finish3"], "", "");
} else {
if (exportInspectionOperStatus) {
this.setStepStates([], ["finish3"], "finish3", "");
}
}
// this.stepEdit.push("finish3");
}
this.stepStates = [...new Set(this.stepStates)];
this.stepEdit = [...new Set(this.stepEdit)];
// }
//回填页面数据
this.$refs.stepOneRef.editFillBackStep1(
res.data.declareInfo,
"auto"
);
this.$refs.stepTwoRef.editFillBackStep2(res.data.declareCheckInfo);
this.$refs.stepThreeRef.editFillBackStep3(res.data.declare);
// if (this.curStep == 1 && this.step1Id) {
// this.$refs.stepOneRef.editFillBackStep1(
// res.data.declareInfo,
// "auto"
// );
// } else if (this.curStep == 2 && this.step2Id) {
// this.$refs.stepTwoRef.editFillBackStep2(
// res.data.declareCheckInfo
// );
// } else if (this.curStep == 3) {
// this.$refs.stepThreeRef.editFillBackStep3();
// }
} else {
this.msgWarning(res.msg);
}
})
.catch((err) => {
console.log(err);
});
},
// 点击编辑时改变loading的状态
clickLoading(val) {
this.editLoading = val;
},
// 上传文件时不允许操作编辑和保存
clickDisabled(val) {
this.editDisabled = val;
},
selectIndex(val) {
this.setSelectIndex = val;
if (val == 1) {
if (
this.stepStates &&
this.stepStates.includes("finish3") &&
!this.step2Id
) {
this.setStepStates([], [], "", "finish3");
}
} else {
if (this.stepStates && this.step3Id) {
this.setStepStates([], ["finish3"], "", "");
}
}
},
clearStep2Data() {
this.$refs.stepTwoRef.clearFormStep2();
this.$refs.stepTwoRef.clearSlipId();
},
},
// 路由离开时触发的逻辑
beforeDestroy() {
this.$store.dispatch("fillForm/addDeliveryNo", "");
if (this.curStep == 1) {
this.$refs.stepOneRef.nextStepOne("topSave", false);
} else if (this.curStep == 2) {
this.$refs.stepTwoRef.nextStepTwo("topSave", false);
} else if (this.curStep == 3) {
this.$refs.stepThreeRef.nextStepThree("topSave", false);
}
},
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";
.confirm-button {
width: 200px !important;
height: 200px !important;
}
.font-style {
line-height: 30px;
color: #000;
font-family: FedExSansArabic, FedExSans, Arial, sans-serif !important;
}
.wrap {
height: 100%;
width: 100%;
font-size: 14px;
position: relative;
.content-box {
height: 100%;
}
// padding-bottom: 100px;
.header {
width: 100%;
height: 48px;
line-height: 48px;
background: #fff;
text-align: right;
padding-right: 22px;
}
.view-box {
height: 100%;
overflow: auto;
// margin: 0 auto !important;
padding-bottom: 60px;
.main-box {
height: auto;
display: flex;
padding: 12px;
position: relative;
.left-box {
width: calc(100% - 291px);
background: #fff;
margin-right: 12px;
padding: 20px 20px 50px 20px;
}
.right-box {
width: 291px;
height: 232px;
background: #fff;
}
}
}
.nav-page-box {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
.flex-box {
width: 75%;
height: 80%;
.suc-title {
font-size: 24px;
font-weight: 200;
line-height: 36px;
color: #333333;
.el-icon-circle-check {
color: #008a16;
margin: 0 6px 16px 0;
}
}
.nav-btn-box {
width: 100%;
height: calc(100% - 46px);
background: #fff;
text-align: center;
vertical-align: middle;
padding: 30px;
.declare-tip {
font-size: 20px;
font-weight: 400;
line-height: 30px;
}
.declare-box {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
.declare {
display: flex;
flex-direction: column;
border: 1px solid #e3e3e3;
width: 30%;
height: 75%;
min-width: 240px;
align-items: center;
justify-content: center;
.svg-icon {
// vertical-align: top !important;
width: 50%;
height: 50%;
margin-bottom: 22px;
}
.el-button {
width: 200px;
}
}
}
}
}
}
}
</style>
<template>
<div>
<div class="step-name">
<i class="el-icon-circle-check"></i>
<span>{{ $t("fillIn.step1") }}</span>
</div>
<div class="content">
<div class="prompt">
<p>{{ $t("fillIn.prompt1") }}</p>
<p>{{ $t("fillIn.prompt2") }}</p>
</div>
<FedexAlert
v-if="errorTip.length > 0"
class="mb20"
:tipList="errorTip"
@close="errorTipClose"
/>
<div class="warning-box">
<div class="warning">
&nbsp;
<i class="el-icon-warning-outline"></i>
<span>&nbsp;{{ $t("fillIn.warning1") }}</span>
<a @click="downloadPdfs('ckbghjb', '出口報關檢核表')">{{
$t("fillIn.link1")
}}</a>
</div>
<div class="warning warning-bottom">
&nbsp;
<i class="el-icon-warning-outline"></i>
<span>&nbsp;{{ $t("fillIn.warning2_1") }}</span>
<a @click="downloadPdfs('gawts', '個案委任書')">{{
$t("fillIn.link2")
}}</a>
<span>{{ $t("fillIn.warning2_2") }}</span>
</div>
</div>
<!-- <div align="right">
<el-button type="text" @click="selectTem"
><svg-icon class="el-icon-user-solid" icon-class="fedexSelectList" />
{{ $t("fillIn.selectTem") }}</el-button
>
</div> -->
<el-form
class="fedexFormStyle"
ref="formDataRef"
:model="formData"
:rules="rules"
label-position="top"
style="margin-top: 20px"
@submit.native.prevent
>
<el-row :gutter="10">
<el-col :span="24">
<Formitem
:label="$t('fillIn.number')"
prop="deliveryNo"
class="fedex_input_count"
>
<el-input
type="text"
:id="'inputInner--deliveryNo'"
maxlength="12"
v-model.trim="formData.deliveryNo"
>
</el-input>
</Formitem>
</el-col>
</el-row>
<el-row>
<div align="left" class="templateStyle">
<el-popover
placement="bottom"
width="675"
:offset="280"
class="popover-data"
ref="popoverRef"
trigger="click"
>
<button slot="reference" style="font-size: 14px">
{{ $t("fillIn.selectTem") }} <i class="el-icon-arrow-down"></i>
</button>
<el-input
type="text"
class="fedexRadiusTowInput"
@clear="dropDownSearch()"
clearable
placeholder="支持使用者名稱，聯絡人，電話，貨物輸出統一編號"
ref="noEmptyInput"
v-model="dropDownValue"
@keyup.native="dropDownSearch"
>
</el-input>
<!-- <el-scrollbar class="scrollbar-wrapper"> -->
<div
style="margin-top: 10px; max-height: 280px"
class="popoverlines"
v-loading="tempLoading"
>
<div v-for="(item, index) in templateList">
<div
class="popover-line"
@click="editFillBackStep1(item, 'dialog')"
>
<div>{{ item.templateName }}</div>
<div>
{{ item.liaisons }}，{{ item.tel }}，{{
item.consigneeNo
}}
</div>
</div>
</div>
<div v-if="templateList.length <= 0" style="text-align: center">
暫無資料
</div>
</div>
<!-- </el-scrollbar> -->
</el-popover>
<!-- <el-select v-model="valueMeta" class="templateSelect" collapse-tags :placeholder="$t('fillIn.selectTem')" >
<div class="el-input" style="width:90%;margin-left:5%; margin-top: 10px; " >
<el-input type="text" class="fedexRadiusTowInput" placeholder="支持使用者名称，联系人，電話" ref="noEmptyInput" v-model="dropDownValue" @keyup.native="dropDownSearch">
</el-input>
</div>
<div slot="empty" class="el-input" style="width:90%;margin-left:5%; margin-top: 16px; text-align: center; " >
<el-input type="text" class="fedexRadiusTowInput " placeholder="支持使用者名称，联系人，电话" ref="emptyInput" v-model="dropDownValue" @keyup.native="dropDownSearch">
</el-input>
<div style="margin-top: 20px; margin-bottom: 20px; color: rgb(134, 134, 134);">暂无数据</div>
</div>
<div style="margin-top: 15px; width: 100%;">
<el-option v-for="(item, index) in templateList" :value="item.templateName" :key="index" style="height: 50px; border-top: 1px solid #ECEDEC;">
<div @click="editFillBackStep1(item, 'dialog')" >
<div :class="item.templateName == selectVal ? 'textColor' : ''" >{{ item.templateName }}</div>
<div :class="item.templateName == selectVal ? 'textColor' : ''" style=" margin-top: -17px;">{{ item.liaisons }}，{{ item.tel }}，{{ item.consigneeNo }}</div>
</div>
</el-option>
</div>
</el-select> -->
<el-button type="text" @click="selectTem" style="margin-left: 15px"
><svg-icon
class="el-icon-user-solid"
icon-class="fedexSelectList"
/>
{{ $t("fillIn.manageTem") }}</el-button
>
</div>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<Formitem
:label="$t('fillIn.placeholder')"
prop="templateName"
class="fedex_input_count"
>
<el-input
type="text"
:id="'inputInner--templateName'"
v-model="formData.templateName"
maxlength="20"
>
</el-input>
</Formitem>
</el-col>
<el-col :span="12">
<Formitem
:label="$t('fillIn.contacts')"
prop="liaisons"
class="fedex_input_count"
>
<el-input
type="text"
:id="'inputInner--liaisons'"
maxlength="18"
v-model="formData.liaisons"
>
</el-input>
</Formitem>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<Formitem
:label="$t('fillIn.exporterNum')"
prop="consigneeNo"
class="fedex_input_count"
>
<el-input
type="text"
:id="'inputInner--consigneeNo'"
maxlength="12"
oninput="value = value.replace(/\s+/g, '')"
v-model="formData.consigneeNo"
>
</el-input>
</Formitem>
</el-col>
<el-col :span="12">
<Formitem
:label="$t('fillIn.email')"
prop="email"
class="fedex_input_count"
>
<el-input
type="text"
:id="'inputInner--email'"
v-model="formData.email"
maxlength="50"
>
</el-input>
</Formitem>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="8">
<Formitem
:label="$t('fillIn.phone1')"
prop="tel"
class="fedex_input_count"
>
<el-input
type="text"
:id="'inputInner--tel'"
maxlength="19"
v-model="formData.tel"
>
</el-input>
</Formitem>
</el-col>
<el-col :span="8">
<Formitem
:label="$t('fillIn.phone2')"
prop="extensionTel"
class="fedex_input_count"
>
<el-input
type="text"
:id="'inputInner--extensionTel'"
maxlength="10"
v-model="formData.extensionTel"
>
</el-input>
</Formitem>
</el-col>
<el-col :span="8">
<Formitem
:label="$t('fillIn.phone3')"
prop="phone"
class="fedex_input_count"
>
<el-input
type="text"
:id="'inputInner--phone'"
maxlength="34"
v-model="formData.phone"
>
</el-input>
</Formitem>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="textarea-box">
<el-form-item
:label="$t('fillIn.indicate')"
prop="customsClearanceInstruction"
class="label"
>
<el-input
type="textarea"
:rows="6"
v-model="formData.customsClearanceInstruction"
maxlength="1200"
style="white-space: pre-wrap; word-break: break-all"
show-word-limit
>
</el-input>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24" style="margin-top: 10px">
<el-checkbox
v-model="saveTemplate"
:label="$t('fillIn.saveTem')"
></el-checkbox>
</el-col>
</el-row>
<el-row>
<el-col :span="24" class="select-box" style="margin-top: 20px">
<Formitem
:label="$t('fillIn.checkList')"
prop="fileSelect"
style="height: 120px"
>
<div style="margin-top: 40px; margin-left: 13px">
<el-checkbox-group
v-model="formData.fileSelect"
@change="handleCheckType"
class="checkBoxError"
style="line-height: 25px; margin-top: 50px"
>
<el-checkbox
v-for="(item, index) in checkTypeList"
:label="item.value"
:key="index"
>
{{ item.label }}
</el-checkbox>
</el-checkbox-group>
</div>
<div style="margin-top: -6px">&nbsp;</div>
</Formitem>
</el-col>
</el-row>
</el-form>
<!-- <fill-form ref="fillFormRef"></fill-form> -->
<div align="center" class="entrySave">
<el-button
class="entrySaveButton entrySaveButton-background"
@click="nextStepOne('save')"
:loading="step1Loading"
>
{{ $t("fillIn.nextStep") }}
</el-button>
</div>
</div>
<tem-dialog
ref="temDialogRef"
@editTemBtn="editTemBtn"
@useTemp="editFillBackStep1"
></tem-dialog>
<!-- <edit-tem-dialog
ref="editTemDialogRef"
@updateSearch="updateSearch"
></edit-tem-dialog> -->
</div>
</template>
<script>
import temDialog from "./temDialog.vue";
import editTemDialog from "./editTemDialog.vue";
import {
saveStepOne,
updateStepOne,
getTemById,
getTemByTemName,
deleteTemById,
findCurUserTem,
updateTemplate,
addSaveTemplate,
findTempListByName,
findTempListByAll,
generatePdf,
generateStepOnePdf,
} from "@/api/fillForm.js";
import { downLoadPdf } from "@/utils/zipdownload";
import { debounce } from "@/utils";
export default {
components: {
temDialog,
editTemDialog,
},
props: {
stepStates: {
type: Array,
default() {
return [];
},
},
step1Id: {
type: Number,
default() {
return null;
},
},
declareId: {
type: Number,
default() {
return null;
},
},
generateAutoPdf: {
type: Boolean,
default() {
return false;
},
},
},
data() {
return {
dropDownValue: "",
optionsMetaAll: [],
optionsMetaShow: [],
valueMeta: "",
selectVal: "",
errorTip: [],
fillFormData: {},
declareInfoId: null,
templateList: [],
saveTemplate: false,
formData: {
deliveryNo: "",
liaisons: "",
consigneeNo: "",
email: "",
tel: "",
extensionTel: "",
phone: "",
customsClearanceInstruction: "",
fileSelect: [],
createTime: null,
createName: null,
status: null,
templateName: "",
},
showSaveTem: false,
step1Loading: false,
temLoading: false,
slipId: null,
tempLoading: false,
checkPass: false,
};
},
mounted() {
// console.log(this.$refs.popover-lines);
},
computed: {
checkTypeList() {
return [
{
label: "立即製作出口報關檢核表，不需要列印，完成時會自動上傅",
value: 1,
},
{
label: "使用已製作完成的出口報關檢核表，並與其他報關文件一起上傳",
value: 2,
},
];
},
rules() {
let rules = {
deliveryNo: [
{
required: true,
message: this.$t("fillIn.check.number1"),
trigger: "blur",
},
{
validator: (rule, value, callback) => {
if (!this.regExp.billExp.test(value)) {
callback(this.$t("fillIn.check.number2"));
} else {
callback();
}
},
trigger: "blur",
},
],
liaisons: [
{ required: true, message: "請您輸入聯絡人", trigger: "blur" },
{
validator: (rule, value, callback) => {
// var a= this.regExp.checkText(this.regExp.nameExp,value);
if (!this.regExp.nameExp.test(value)) {
callback("請您使用中文、英文或空格的組合，不能包含特殊字元。");
} else if (value.length > 30) {
callback(
"聯絡人姓名最多可包含30個字元，而您輸入了" +
value.length +
"個字元。"
);
} else {
callback();
}
},
trigger: "blur",
},
],
consigneeNo: [
{
required: true,
message: "請您輸入貨物輸出統一編號",
trigger: "blur",
},
{
validator: (rule, value, callback) => {
if (!this.regExp.expNumENExp.test(value)) {
callback("請您輸入統一編號，中間不要有空格。");
} else {
callback();
}
},
trigger: "blur",
},
],
email: [
{ required: true, message: "請您輸入郵箱", trigger: "blur" },
{
validator: (rule, value, callback) => {
if (!this.regExp.email.test(value.trim())) {
callback("您輸入的郵件格式有錯誤。");
} else if (this.regExp.emailPattern.test(value.trim())) {
callback("您輸入的郵件格式有錯誤。");
} else {
this.formData.email=this.formData.email.trim();
callback();
}
},
trigger: "blur",
},
],
tel: [
{ required: true, message: "請您輸入聯絡電話", trigger: "blur" },
{
validator: (rule, value, callback) => {
if (!this.regExp.phoneNumExp.test(value)) {
callback("請您輸入有效的聯絡電話，不能包含字母和漢字。");
// } else if (value.length > 40) {
// callback(
// "聯絡電話最多可包含40個字元，而您輸入了" +
// value.length +
// "個字元。"
// );
} else {
callback();
}
},
trigger: "blur",
},
],
extensionTel: [
{
required: false,
validator: (rule, value, callback) => {
if (value) {
if (!this.regExp.phoneNumExp.test(value)) {
callback("請您輸入有效的分機號碼，不能包含字母和漢字。");
}
// else if (value.length > 10) {
// callback(
// "分機最多可包含10個字元，而您輸入了" +
// value.length +
// "個字元。"
// );
// }
else {
callback();
}
} else {
callback();
}
},
trigger: "blur",
},
],
phone: [
{
validator: (rule, value, callback) => {
if (value) {
if (!this.regExp.phoneNumExp.test(value)) {
callback("請您輸入有效的行動電話，不能包含字母和漢字。");
}
// else if (value.length > 40) {
// callback(
// "xxx" +
// value.length +
// "個字元。"
// );
// }
else {
callback();
}
} else {
callback();
}
},
trigger: "blur",
},
],
fileSelect: [
{
required: true,
message: "請您選擇出口報關檢核表製作選項",
trigger: "change",
},
],
templateName: [
{
required: this.saveTemplate,
message: "請您輸入使用者名稱",
trigger: "blur",
},
{
validator: (rule, value, callback) => {
if (value && !this.regExp.templateName.test(value)) {
callback("請您使用中文、數字、英文、下劃線或中橫線的組合。");
} else {
callback();
}
},
trigger: "blur",
},
],
};
this.$nextTick(() => {
this.$refs["formDataRef"].clearValidate();
});
return rules;
},
},
watch: {
errorTip(newVal, oldVal) {
if (newVal.length > 0) {
this.toHead("view-box");
}
},
valueMeta() {
this.selectVal = this.valueMeta;
this.valueMeta = null;
},
},
created() {
let data = { page: 1, size: 30, templateName: null };
Promise.all([findTempListByAll(data)]).then((res) => {
this.templateList = res[0].data;
this.optionsMetaAll = res[0].data;
});
},
methods: {
// 选择管理模板
selectTem() {
this.$refs.temDialogRef.openDialog();
},
checkForm() {
this.errorTip = [];
var checkForm = ["formDataRef"];
checkForm.forEach((formRef) => {
this.submitForm(formRef);
return this.errorTip;
});
return this.errorTip;
},
submitForm(formRef) {
return new Promise((resolve, reject) => {
this.$refs[formRef].validate((valid, object) => {
if (valid) {
resolve();
} else {
for (var key in object) {
if (object.hasOwnProperty(key)) {
this.errorTip.push(object[key][0].message);
this.errorTip = [...new Set(this.errorTip)];
}
}
reject();
}
});
});
},
checkFromNotShowError(formRef) {
let checkRes = false;
this.$refs[formRef].validate((valid, object) => {
if (valid) {
checkRes = true;
// resolve();
} else {
checkRes = false;
}
});
return checkRes;
},
dropDownSearch() {
// var _this = this;
// _this.valueMeta = [];
// _this.templateList = [];
// for (var item of _this.optionsMetaAll) {
// if (item.templateName.toLowerCase().includes(this.dropDownValue.trim().toLowerCase())
// || item.liaisons.toLowerCase().includes(this.dropDownValue.trim().toLowerCase())
// || item.tel.toLowerCase().includes(this.dropDownValue.trim().toLowerCase())
// || item.consigneeNo.toLowerCase().includes(this.dropDownValue.trim().toLowerCase())) {
// _this.templateList.push(item);
// }
// }
// debounce(this.getTempListByName(1,10, this.dropDownValue),5000,false);
let page = 10;
if (!this.dropDownValue) {
page = 30;
}
this.getTempListByName(1, page, this.dropDownValue.trim());
},
// 下一步：save/保存：topSave/编辑：1，2，3
nextStepOne(type, saveDeliveryNo = true) {
if (saveDeliveryNo) {
this.$store.dispatch(
"fillForm/addDeliveryNo",
this.formData.deliveryNo
);
}
this.errorTip = [];
let paramsData = {
check: "0",
...this.formData,
fileSelect: this.formData.fileSelect[0],
};
if (this.declareId) {
this.declareInfoId = this.declareId;
}
if (this.step1Id) {
this.slipId = this.step1Id;
}
//判断校验是否通过
if (!this.checkFromNotShowError("formDataRef")) {
this.checkPass = false;
// this.$emit("setStepStates", [],["finish1"],"finish1","" );
delete paramsData.check;
} else {
this.checkPass = true;
// this.$emit("setStepStates", ["finish1"], ["finish1"], "", "");
}
if (type == "save") {
//下一步
this.submitForm("formDataRef");
this.$refs.formDataRef.validate((valid) => {
if (valid) {
if (this.slipId) {
paramsData.id = this.slipId;
paramsData.declareId = this.declareInfoId;
this.editSaveStepOne(paramsData, "next");
} else {
this.addSaveStepOne(paramsData, "next");
}
}
});
} else {
if (this.formData.deliveryNo) {
//校验运单号规则
if (
this.formData.deliveryNo.length < 12 ||
this.regExp.billExp.test(this.formData.deliveryNo) == false
) {
this.errorTip = ["請您輸入12位數字提單號碼，中間不要有空格。"];
this.$emit("clickLoading", false);
} else {
if (this.slipId) {
paramsData.id = this.slipId;
paramsData.declareId = this.declareInfoId;
this.editSaveStepOne(paramsData, type);
} else {
this.addSaveStepOne(paramsData, type);
}
}
// this.$emit("setStepStates", [], "finish1");
} else {
this.errorTip = ["請至少填寫提單號碼！"];
this.$emit("clickLoading", false);
}
}
if (this.formData.fileSelect[0] == 2) {
// this.stepStates.splice(this.stepStates.indexOf('finish2'), 1);
this.$emit("setStepStates", [], [], "finish2", "finish2");
this.$emit("clearStep2Data");
}
},
// 修改保存申报信息填写 | type: 下一步：next/编辑：1,2,3
editSaveStepOne(data, type) {
if (type == "next") {
this.step1Loading = true;
} else if (typeof type == "number") {
this.$emit("clickLoading", true);
}
updateStepOne(data)
.then((res) => {
if (res.code == 200) {
if (this.saveTemplate) {
this.saveTem();
}
if (type == "next") {
this.goNextStep();
} else if (typeof type == "number") {
this.goEditStep(type);
} else {
this.$message.success("保存成功");
this.$emit("clickLoading", false);
}
} else {
this.msgWarning(res.msg);
}
// this.step1Loading = false;
// this.$emit("clickLoading", false);
})
.catch((err) => {
this.$message.error(err);
})
.finally(() => {
this.step1Loading = false;
this.$emit("clickLoading", false);
});
},
// 新增保存申报信息填写 | type: 下一步：next/编辑：1,2,3
addSaveStepOne(data, type) {
if (type == "next") {
this.step1Loading = true;
} else if (typeof type == "number") {
this.$emit("clickLoading", true);
}
saveStepOne(data)
.then((res) => {
if (res.code == 200) {
if (this.saveTemplate) {
this.saveTem();
}
this.fillFormData = res.data;
this.declareInfoId = res.data.declareId;
this.slipId = res.data.id;
// this.$store.dispatch("fillForm/addDeliveryNo", res.data.deliveryNo);
if (type == "next") {
this.goNextStep();
} else if (typeof type == "number") {
this.goEditStep(type);
} else {
this.$message.success("保存成功");
this.$emit("clickLoading", false);
}
} else {
this.step1Loading = false;
this.$emit("clickLoading", false);
this.msgWarning(res.msg);
}
})
.catch((err) => {
this.step1Loading = false;
this.$emit("clickLoading", false);
this.$message.error(err);
});
},
// 编辑时要跳转到的页面
goEditStep(type) {
if (this.checkPass == true) {
generateStepOnePdf(this.declareInfoId)
.then((res) => {
if (res.code == 200) {
if (type == 3 && this.formData.fileSelect[0] == 1) {
generatePdf(this.declareInfoId).then((res2) => {
if (res2.code == 200) {
this.step1Loading = false;
this.$emit("clickLoading", false);
this.$message.success("保存成功");
this.$emit("addNextStep", {
curStep: type,
declareId: this.declareId,
});
} else {
this.$emit("clickLoading", false);
this.step1Loading = false;
this.$message.error("DPF生成失敗");
}
});
} else {
this.step1Loading = false;
this.$emit("clickLoading", false);
this.$message.success("保存成功");
this.$emit("addNextStep", {
curStep: type,
declareId: this.declareId,
});
}
} else {
this.$emit("clickLoading", false);
this.step1Loading = false;
this.$message.error("DPF生成失敗");
}
})
.catch(() => {
this.$emit("clickLoading", false);
this.step1Loading = false;
this.$message.error("DPF生成失敗");
});
} else {
this.step1Loading = false;
this.$emit("clickLoading", false);
this.$message.success("保存成功");
this.$emit("addNextStep", {
curStep: type,
declareId: this.declareId,
});
}
},
// 点击下一步时要跳转的页面
goNextStep() {
if (this.checkPass == true) {
generateStepOnePdf(this.declareInfoId)
.then((res) => {
if (res.code == 200) {
this.step1Loading = false;
this.$message.success("保存成功");
if (this.formData.fileSelect[0] == 2) {
this.$emit("addNextStep", {
curStep: 3,
declareId: this.declareInfoId,
});
} else {
this.step1Loading = false;
this.$emit("addNextStep", {
curStep: 2,
declareId: this.declareInfoId,
});
}
} else {
this.step1Loading = false;
this.$message.error("DPF生成失敗");
}
})
.catch(() => {
this.step1Loading = false;
this.$message.error("DPF生成失敗");
});
} else {
this.step1Loading = false;
this.$emit("addNextStep", {
curStep: 2,
declareId: this.declareInfoId,
});
}
},
// 编辑回填数据
editFillBackStep1(data, from) {
this.formData.liaisons = data.liaisons;
this.formData.consigneeNo = data.consigneeNo;
this.formData.email = data.email;
this.formData.tel = data.tel;
this.formData.extensionTel = data.extensionTel;
this.formData.phone = data.phone;
this.formData.customsClearanceInstruction =
data.customsClearanceInstruction;
this.formData.createName = data.createName;
this.formData.createTime = data.createTime;
if (from == "dialog") {
this.formData.templateName = data.templateName;
} else {
this.formData.deliveryNo = data.deliveryNo;
this.formData.fileSelect = data.fileSelect ? [data.fileSelect] : [];
}
// this.$nextTick(() => {
// this.$refs.formDataRef.clearValidate();
// });
this.$refs.popoverRef.doClose();
},
// 全部清除
clearFormStep1() {
// this.formData.deliveryNo= "";
this.formData.liaisons = "";
this.formData.consigneeNo = "";
this.formData.email = "";
this.formData.tel = "";
this.formData.extensionTel = "";
this.formData.phone = "";
this.formData.customsClearanceInstruction = "";
this.formData.fileSelect = [];
this.formData.templateName = "";
this.saveTemplate = false;
this.$nextTick(() => {
this.$refs["formDataRef"].clearValidate();
});
this.errorTipClose();
// this.$refs.formDataRef.resetFields();
},
// 下载《出口報關檢核表》和《個案委任書》
downloadPdfs(type, name) {
downLoadPdf(
"/icleartw/declare/downloadPdfTemplate",
{
pdfName: type,
},
name
)
.then(() => {})
.catch(() => {});
},
// 编辑模板
editTemBtn(row) {
this.$refs.editTemDialogRef.openDialog(row);
},
// 更新列表
updateSearch() {
this.$refs.temDialogRef.searchTemList();
},
// 关闭错误提示
errorTipClose() {
this.errorTip = [];
},
// 下拉框出现时改变样式
handleCheckList(e) {
if (e) {
this.$nextTick(() => {
this.showSaveTem = true;
});
} else {
this.$nextTick(() => {
this.showSaveTem = false;
});
}
},
// 检查模板是否重复
checkTempName(name) {
this.temLoading = true;
getTemByTemName(name)
.then((res) => {
if (res.code == 200) {
this.addTemplate();
} else {
// this.$confirm(this.$t("fillIn.template.confirmCoverTemplate"), "提示", {
// confirmButtonText: this.$t("common.sureBtn"),
// cancelButtonText: this.$t("common.cancleBtn"),
// type: "warning",
// }).then(() => {
this.updateTemplate(res.data);
// });
}
this.temLoading = false;
})
.catch(() => {
this.temLoading = false;
})
.finally(() => {
this.temLoading = false;
});
},
// 保存模板按钮
saveTem() {
if (this.formData.templateName) {
// 保存模板只需要部分校验
let fieldList = [
"liaisons",
"consigneeNo",
"email",
"tel",
"extensionTel",
"phone",
];
let that = this;
Promise.all(
fieldList.map((item) => {
let p = new Promise(function (resolve, reject) {
that.$refs.formDataRef.validateField(item, (error) => {
resolve(error);
});
});
return p;
})
).then((data) => {
data = data.filter((item) => item);
if (!data.length) {
return that.checkTempName(this.formData.templateName, "add");
} else {
return false;
}
});
} else {
this.msgWarning("請輸入使用者名稱");
return false;
}
},
getTempListByName(page, size, templateName) {
this.tempLoading = true;
let data = { page: page, size: size, templateName: templateName };
findTempListByAll(data)
.then((res) => {
this.templateList = res.data;
this.optionsMetaAll = res.data;
})
.finally(() => {
this.tempLoading = false;
});
},
// 复选框处理变成单选
handleCheckType(val) {
if (val.length > 0) {
this.formData.fileSelect = [val[val.length - 1]];
}
this.$emit("selectIndex", this.formData.fileSelect[0]);
},
// 新增模板
addTemplate() {
let paramsData = {
...this.formData,
};
// paramsData.templateName = this.formData.templateName;
delete paramsData.fileSelect;
delete paramsData.deliveryNo;
addSaveTemplate(paramsData)
.then((res) => {
if (res.code == 200) {
this.getTempListByName(1, 30, null);
this.$message.success("使用者保存成功");
} else {
this.msgWarning(res.msg);
}
this.temLoading = false;
})
.catch(() => {
this.temLoading = false;
});
},
updateTemplate(templateData) {
let paramsData = {
...this.formData,
id: templateData.id,
// templateName: this.templateName,
};
this.updateLoading = true;
updateTemplate(paramsData)
.then((res) => {
if (res.code == 200) {
this.getTempListByName(1, 30, null);
this.$message.success("使用者修改成功");
this.dialogVisible = false;
// this.$emit("updateSearch");
} else {
this.msgWarning(res.msg);
}
this.updateLoading = false;
})
.catch(() => {
this.updateLoading = false;
});
},
currStationChange(val) {
this.$emit("selectIndex", val);
},
},
};
</script>
<style lang="scss">
.checkList-select {
background: #f2f2f2;
left: 0 !important;
top: 42px !important;
border: none;
border-radius: 0;
box-shadow: none;
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
color: #fff;
background: #6797eb;
}
.el-select-dropdown__list {
padding: 0;
}
.el-select-dropdown__item {
height: 48px;
line-height: 48px;
}
}
</style>
<style lang="scss" scoped>
.step-name {
font-size: 20px;
font-weight: 600px;
margin-bottom: 20px;
i {
font-size: 32px;
vertical-align: -5px;
color: #4d148c;
margin-right: 12px;
}
}
.content {
width: 80%;
min-width: 676px;
margin: 0 auto;
z-index: 9;
.prompt {
font-family: PingFang SC;
font-size: 22px;
font-weight: 500;
line-height: 36px;
letter-spacing: 0px;
text-align: center;
}
.warning-box {
width: 100%;
color: #e48024;
margin-top: 16px;
.warning {
width: 100%;
height: 32px;
line-height: 32px;
border: 1px solid #e48024;
background: rgb(228, 128, 36, 0.1);
a {
color: #007ab7;
}
}
.warning-bottom {
margin: 8px 0 2px 0;
}
}
}
.select-box {
::v-deep .el-input__inner {
padding-bottom: 12px;
text-align: right;
}
::v-deep .el-popper[x-placement^="bottom"] .popper__arrow::after {
border-bottom-color: transparent;
}
::v-deep .el-popper .popper__arrow,
.el-popper .popper__arrow::after {
border-style: none !important;
}
}
.save-tem-top {
margin-top: 106px;
}
.save-tem {
margin-top: 8px;
}
.TemplateSave {
margin-top: 0;
.el-button {
height: 100%;
border: none;
}
}
.textarea-box {
margin-bottom: 5px;
::v-deep .el-form-item .el-form-item__content {
position: static !important;
}
.label {
height: 24px;
font-size: 0.75rem;
font-weight: 700;
background-color: #f2f2f2;
color: #444;
height: max-content;
// padding: 0.6rem 0 0 0.6rem;
line-height: 14px;
padding-left: 0.18rem;
}
::v-deep .el-textarea .el-textarea__inner {
padding-top: 10px;
margin: 15px 0;
}
}
::v-deep .el-textarea .el-input__count {
background: #f2f2f2;
}
::v-deep .el-textarea__inner {
border: none;
background-color: #f2f2f2;
}
::v-deep .el-textarea__inner {
resize: none;
}
.entrySave {
margin: 50px 0 20px 0;
}
.popover-line {
padding: 5px;
width: 650px;
border-top: 1px solid #e3e4e6;
// background-color: red;
cursor: pointer;
&:hover {
background-color: #f5f7fa;
}
}
.templateStyle {
button {
border: none;
background-color: #fff;
color: #007ab7;
font-weight: 600;
cursor: pointer;
}
}
</style>
<template>
<div>
<div class="step-name">
<i class="el-icon-circle-check"></i>
<span>報關文件上傳</span>
</div>
<div class="content">
<p class="title">出口正式報關文件上傳</p>
<div class="warning">
<p class="title4">{{ $t("fillIn.title4") }}</p>
</div>
<FedexAlert
v-if="errorTip.length > 0"
class="mb20"
:tipList="errorTip"
@close="errorTipClose"
/>
<div class="upload-lable">報關文件</div>
<div
class="fileList-box auto-file"
v-for="(item, index) in autoFileList"
:key="index + 's'"
>
<div>
<i class="el-icon-document"></i>
<span style="margin-left: 20px"
>自動生成-{{ item.name }}{{ item.type }}</span
>
</div>
<div>
<span style="color: rgb(169, 169, 169)"
>{{ item.fileSizeDesc }} KB</span
>
<el-button
type="text"
style="margin-left: 20px"
@click="openViewPdf(item)"
:loading="item.findLoading"
:disabled="uploadLoading"
>查看</el-button
>
</div>
</div>
<div style="background-color: #f2f2f2">
<el-upload
class="upload-demo"
ref="uploadBlock"
:multiple="true"
action=""
:file-list="fileList"
:before-upload="changUpload"
:show-file-list="false"
:on-error="handleUploadError"
:on-success="handleUploadSuccess"
:http-request="uploadFile"
:auto-upload="true"
:on-change="handleChange"
v-show="false"
>
</el-upload>
<el-button
type="text"
slot="trigger"
:disabled="uploadLoading"
style="padding-left: 10px"
@click="clickUploadFiles"
><i class="el-icon-loading" v-if="uploadLoading && findDisabled"> </i
>&nbsp;<span style="color: red; font-size: 16px">*選擇文件上傳</span>
</el-button>
</div>
<div
class="userUploadFileList"
:style="{
'overflow-y': uploadFilesList.length > 10 ? 'auto' : 'hidden',
}"
>
<div>
<div
class="fileList-box"
v-for="(item, index) in uploadFilesList"
:key="index + 'f'"
>
<div>
<div>
<Tooltip :content="item.fileName" refName="stepThreeTip"
><span slot="icon">
<span style="display: inline-block; width: 35px">{{
index + 1
}}</span>
<i class="el-icon-document"></i>
<span style="margin-left: 10px">手動上傳-</span>
</span>
</Tooltip>
</div>
</div>
<!-- <div class="ellipsis" @mouseover="onMouseOver(refName)">
<i class="el-icon-document"></i><span style="margin-left: 20px">手動上傳-{{ item.name }}{{ item.type }}</span>
</div> -->
<div>
<span class="file-size" style="color: rgb(169, 169, 169)"
>{{ item.fileSizeDesc }} KB</span
>
<el-popover
placement="bottom"
width="160"
v-model="item.deleteVisible"
:disabled="item.findLoading"
>
<p>是否確認刪除？</p>
<div style="text-align: right; margin: 0">
<el-button
size="mini"
type="text"
@click.stop="item.deleteVisible = false"
>取消</el-button
>
<el-button
type="text"
size="mini"
@click.stop="handleRemove(item)"
>確定</el-button
>
</div>
<el-button
type="text"
slot="reference"
style="margin-left: 20px"
:disabled="uploadLoading"
:loading="item.findLoading"
>刪除</el-button
>
</el-popover>
</div>
</div>
</div>
<!-- <div class="error-file fileList-box" v-if="showErrorFile">
<div>
<i class="el-icon-warning-outline"></i
><span style="margin-left: 20px"
>{{ errorFileName }}(由於文件內容不受支持，無法上傳文件。)</span
>
</div>
<el-button type="text" @click="handleRemoveErrorFile()"
>删除</el-button
>
</div> -->
</div>
<el-form
class="stepThreeForm"
style="width: 100%; padding-left: 10px"
label-position="top"
ref="stepThreeForm"
:hide-required-asterisk="true"
:model="typeFormData"
:rules="rules"
>
<el-form-item
label="*所上傳的報關文件，是否適用在目的地國家進口清關報關作業?"
prop="isClear"
>
<el-radio-group
v-model="typeFormData.isClear"
style="margin-left: 15px"
>
<el-radio :label="1"
><span style="font-size: 16px; color: red; font-weight: 600"
>是</span
></el-radio
>
<el-radio :label="0"
><span style="font-size: 16px; color: red; font-weight: 600"
>否</span
></el-radio
>
</el-radio-group>
</el-form-item>
<!-- <el-form-item label="*" prop="radio">
<div
style="
font-size: 16px;
font-weight: 800;
color: red;
background-color: #f2f2f2;
"
>
<el-select
class="stepThreeSelect"
v-model="radio"
placeholder="請選擇"
>
<el-option label="是" value="1"> </el-option>
<el-option label="否" value="0"> </el-option>
</el-select>
<span style="display: inline-block; padding-left: 10px"
>所上傳的報關文件，是否適用在目的地國家進口清關報關作業?</span
>
</div>
</el-form-item> -->
</el-form>
<div class="bottom-tip">
<div class="bottom-tip-item">備註:</div>
<div
class="bottom-tip-item"
v-for="(item, index) in tipList"
:key="index"
>
<div class="bottom-tip-item_idx">{{ item.idx }}</div>
<div class="bottom-tip-item_content">
{{ item.content }}
</div>
</div>
</div>
<div align="center" class="saveBtn-box" style="margin-top: 52px">
<el-button
class="whiteBtn-background entrySaveButton"
@click="viewDetailBtn()"
:disabled="uploadLoading || submitDisabled"
>
確認已填寫內容
</el-button>
</div>
<div align="center" class="saveBtn-box" style="margin: 18px 0 52px 0">
<el-button
:disabled="uploadLoading || submitDisabled"
class="entrySaveButton entrySaveButton-background"
@click="handleSaveSubmitBtn()"
>
{{ $t("common.submitBtn") }}
</el-button>
</div>
</div>
<detail-drawer
ref="detailDrawerRef"
@editDetail="goEditStep"
@submitBtn="handleSaveSubmitBtn"
@viewPdf="openViewPdf"
:pageIndex="pageIndex"
></detail-drawer>
<!-- <el-dialog :title="pdfTitle" :visible.sync="entryPdfVisible" width="80%" >
<iframe :src="pdfData" frameborder="0" width="100%" height="500px"></iframe>
</el-dialog> -->
</div>
</template>
<script>
import {
uploadCustomsFiles,
deleteUploadFile,
getCusFileBySys,
saveCommitAll,
saveStep3Files,
getFindSysByDeclareId,
saveByDetails,
findDetailsById,
} from "@/api/fillForm.js";
import detailDrawer from "../declarationInput/detailDrawer.vue";
import { downLoadViewPdf, uploadCustomsFileAsync } from "@/utils/zipdownload";
import { filterSize } from "@/utils/filterSize";
export default {
components: { detailDrawer },
props: {
stepStates: {
type: Array,
default() {
return [];
},
},
step3Id: {
type: Number,
default() {
return null;
},
},
declareId: {
type: Number,
default() {
return null;
},
},
},
data() {
return {
uploadLoading: false,
pageIndex: "step3",
fileList: [],
uploadFilesList: [],
selectFileList: [],
typeFormData: {
isClear: null,
},
errorFileName: "",
fileTotal: "",
showErrorFile: false,
errorTip: [],
autoFileList: [],
cusFileId: null,
formatByte: filterSize,
submitDisabled: false,
pdfData: null,
pdfTitle: null,
entryPdfVisible: false,
findDisabled: true,
fileIndex: 0,
errorFiles: [],
rules: {
isClear: [
{
required: true,
message:
"請您勾選所上傳的報關文件，是否適用在目的地國家進口清關報關作業。",
trigger: "change",
},
],
},
tipList: [
{
idx: "1.",
content:
"報關應備之文件:(1)委任書(2)商業發票(3)裝箱單(箱數多於一件時).",
},
{
idx: "2.",
content: "國洋貨復運出口之案件,應再加附(4)具結書,並請據實填寫內容.",
},
{
idx: "3.",
content: "私人之出口件依海關規定需再提供(5)身分證或護照影本.",
},
{
idx: "4.",
content:
"以上所述之(1)~(4)四種文件均請蓋妥公司大、小章、發票章,或私章(僅適用私人出口件).",
},
{
idx: "5.",
content:
"產證需隨貨的案件,約需兩個工作天後才能出口(以報關文件收到之日起算).",
},
{
idx: "6.",
content:
"復運出口貨品(包括外貨、國貨)，應逐項填報欲核銷之原進口報單號碼及項次，核銷作業採「1 項對 1項」方式核銷原進口報單資料，該項之原進口數量應大於或等於復運出口數量，數量不符者，應予拆項或增項。(但保稅貨品應依保稅物品及自由貿易港區貨物通關特殊規定辦理。)",
},
],
};
},
computed: {},
created() {
this.editFillBackStep3();
},
methods: {
// 文件勾选触发
changUpload(file) {
// const { uid, name, size } = file;
// // 文件类型限制
// const fileTypeFlag =
// /^.doc|.docm|.docx|.dot|.dotm|.dotx|.odt|.rtf|.csv|.ods|.xlam|.xls|.xlsb|.xlsm|.xlsx|.xltm|.xltx|.ppt|.pptx|.txt|.log|.hdr|.inv|.pak|.out|.pdf|.tif|.tiff|.jpeg|.jpg|.png|.bmp|.gif|.wmf|.heic|.html|.htm|.mhtml|.mht|.xps|.7z|.xz|.bz2|.bzip2|.gzip|.tar|.zip|.wim|.ar|.arj|.cab|.chm|.cpio|.cramfs|.dmg|.ext|.fat|.gpt|.hfs|.ihex|.iso|.lzh|.lzma|.mbr|.msi|.nsis|.ntfs|.qcow2|.rar|.rpm|.squashfs|.udf|.uefi|.vdi|.vhd|.vhdx|.vmdk|.xar|.z|.vcf|.bin|.dat|.wmz|.ai|.db|.xml|.emz|.ds_store|.p7s|.numbers|.*fedex|.mp4|.psd|.mso$/.test(
// name.substring(name.lastIndexOf(".")).toLowerCase()
// );
// if (!fileTypeFlag) {
// this.$message.warning("文件格式不匹配");
// return false;
// }
// // 文件大小进行校验
// if (size > 1024 * 1024 * 20) {
// this.$message.warning("您上傳的文件大小過大(20M), 建議壓縮文件上傳");
// return false;
// }
// // 文件总大小限制
// const totalSize = this.uploadFilesList.reduce(
// (total, item) => total + item.fileSizeByte,
// 0
// );
// if (totalSize + size > 1024 * 1024 * 30) {
// this.$message.warning(
// "您上傳的文件大小總和過大(30M), 建議壓縮文件上傳"
// );
// return false;
// }
// if (this.uploadFilesList.length > 19) {
// this.$message.warning("最多選擇20個文件");
// return false;
// }
},
// 移除不需要的文件
handleRemove(file) {
this.$emit("clickDisabled", true);
this.submitDisabled = true;
// this.uploadLoading = true;
file.findLoading = true;
deleteUploadFile(file.id, this.cusFileId)
.then((res) => {
if (res.code == 200) {
file.deleteVisible = false;
this.$message.success("刪除成功");
this.getAutoFileList();
} else {
this.msgWarning(res.msg);
}
})
.finally(() => {
this.submitDisabled = false;
file.findLoading = false;
this.$emit("clickDisabled", false);
});
},
handleUploadError() {},
handleUploadSuccess(file) {},
handleChange(file, fileList) {
this.fileList = fileList;
let fileNameList = [];
if (this.uploadFilesList.length > 0)
[
this.uploadFilesList.forEach((item) => {
fileNameList.push(item.name + "." + item.serverName.split(".")[1]);
}),
];
if (this.errorFiles.length == 0) {
//文件名长度限制
if (file.name.length > 80) {
this.errorFiles.push("上傳文件名稱長度超出限制，請修改後上傳");
return;
}
// 文件名重复
if (fileNameList.includes(file.name)) {
this.errorFiles.push("上傳文件名稱重複，請修改後上傳");
return;
}
const { uid, name, size } = file;
// 文件类型限制
const fileTypeFlag =
/^.doc|.docm|.docx|.dot|.dotm|.dotx|.odt|.rtf|.csv|.ods|.xlam|.xls|.xlsb|.xlsm|.xlsx|.xltm|.xltx|.ppt|.pptx|.txt|.log|.hdr|.inv|.pak|.out|.pdf|.tif|.tiff|.jpeg|.jpg|.png|.bmp|.gif|.wmf|.heic|.html|.htm|.mhtml|.mht|.xps|.7z|.xz|.bz2|.bzip2|.gzip|.tar|.zip|.wim|.ar|.arj|.cab|.chm|.cpio|.cramfs|.dmg|.ext|.fat|.gpt|.hfs|.ihex|.iso|.lzh|.lzma|.mbr|.msi|.nsis|.ntfs|.qcow2|.rar|.rpm|.squashfs|.udf|.uefi|.vdi|.vhd|.vhdx|.vmdk|.xar|.z|.vcf|.bin|.dat|.wmz|.ai|.db|.xml|.emz|.ds_store|.p7s|.numbers|.*fedex|.mp4|.psd|.mso$/.test(
name.substring(name.lastIndexOf(".")).toLowerCase()
);
if (!fileTypeFlag) {
this.errorFiles.push("文件格式不匹配");
return;
}
// 文件大小进行校验
if (size > 1024 * 1024 * 20) {
this.errorFiles.push("您上傳的文件大小過大(20M), 建議壓縮文件上傳");
return;
}
// 文件总大小限制
// const totalSize = this.uploadFilesList.reduce(
// (total, item) => total + item.fileSizeByte,
// 0
// );
// if (totalSize + size > 1024 * 1024 * 95) {
// this.errorFiles.push(
// "您上傳的文件大小總和過大(95M), 建議壓縮文件上傳"
// );
// return false;
// }
}
},
clickUploadFiles() {
this.fileIndex = 0;
this.fileList = [];
this.errorFiles = [];
this.$refs.uploadBlock.$refs["upload-inner"].handleClick();
},
uploadFiles(file) {
// setTimeout(() => {
// let uploadRes=new Map();
//
// this.uploadLoading = true;
// this.$emit("clickDisabled", true);
// if(this.fileIndex==0) {
// this.fileIndex++;
// this.fileList.forEach(file=>{
// let formData = new FormData(); //formdata格式
// formData.append("file", file.raw, file.name);
//
// uploadCustomsFiles(formData, this.declareId)
// .then((res) => {
// if (res.code == 200) {
// this.cusFileId = res.data.id;
// // uploadRes.set(file.name, res.data.uploadFileVoList);
// this.getAutoFileList();
// if (res.data.uploadFileVoList.length == this.fileList.length) {
// this.errorTip = [];
// // this.$message.success("上傳成功");
// }
// } else {
// this.$message.warning(res.msg);
// }
// })
// .catch((err) => {
// console.log(err);
// }).finally(() => {
// this.uploadLoading = false;
// this.$emit("clickDisabled", false);
// });
// });
// }
// },1000)
},
// 上传多个报关文件
uploadFile(files) {
this.uploadLoading = true;
this.$emit("clickDisabled", true);
setTimeout(() => {
if (this.fileIndex == 0) {
// 文件总大小限制
const totalSize =
this.uploadFilesList.reduce(
(total, item) => total + item.fileSizeByte,
0
) + this.fileList.reduce((total, item) => total + item.size, 0);
if (totalSize > 1024 * 1024 * 95) {
this.errorFiles.push(
"您上傳的文件大小總和過大(95M), 建議壓縮文件上傳"
);
}
// 文件总数限制
if (this.uploadFilesList.length + this.fileList.length > 100) {
this.errorFiles.push("最多選擇100個文件");
}
this.fileIndex++;
if (this.errorFiles.length > 0) {
// this.$message(this.errorFiles.join(","));
this.$message.warning(this.errorFiles.join(","));
this.uploadLoading = false;
this.$emit("clickDisabled", false);
this.errorFiles = [];
// this.$alert(this.errorFiles.join(","), '提示', {
// confirmButtonText: '確定',
// type: 'warning'
// }).finally(() => {
// this.uploadLoading = false;
// this.$emit("clickDisabled", false);
// this.errorFiles = [];
// })
} else {
let formData = new FormData(); //formdata格式
formData.append("declareId", this.declareId);
this.fileList.forEach((item) => {
formData.append("file", item.raw);
});
uploadCustomsFiles(formData, this.declareId)
.then((res) => {
if (res.code == 200) {
// this.cusFileId = res.data.id;
this.getAutoFileList();
if (
res.data.succ != null &&
res.data.succ.length == this.fileList.length
) {
this.errorTip = [];
this.$message.success("上傳成功");
}
if (res.data.fial && res.data.fial.length > 0) {
this.$message.warning("上傳失敗");
}
} else {
this.$message.warning("上傳失敗" + res.msg);
}
})
.catch((err) => {
// this.$message.warning("上傳失敗"+err);
console.log(err);
})
.finally(() => {
this.fileIndex = 0;
this.fileList = [];
this.errorFiles = [];
this.uploadLoading = false;
this.$emit("clickDisabled", false);
});
}
}
}, 1000);
},
// 编辑回填
editFillBackStep3(data) {
this.fileList = [];
this.autoFileList = [];
this.uploadFilesList = [];
if (data) {
this.typeFormData = data;
}
this.$nextTick(() => {
this.cusFileId = this.step3Id;
this.getAutoFileList();
this.$refs.stepThreeForm.clearValidate();
});
},
// 获取报关文件列表
getUploadFileList(id) {
getCusFileBySys(id).then((res) => {
if (res.code == 200) {
this.uploadFilesList = res.data;
if (this.uploadFilesList != null) {
this.uploadFilesList = this.uploadFilesList.map((item) => {
return {
...item,
deleteVisible: false,
fileName: item.name + item.type,
};
});
}
}
});
},
// 点击提交
handleSaveSubmitBtn() {
this.$refs.stepThreeForm.validate((valid) => {
if (valid) {
this.topSaveStepThree("save", "nomsg").then(() => {
let arr = [];
this.autoFileList.forEach((item) => {
arr.push(item.name);
});
if (this.uploadFilesList.length > 0) {
let checkRes = this.$parent.checkStepForm({ curStep: 3 });
if (!checkRes) {
this.createMessageBox(
`請確認以下文件是否上傳“${
arr.includes("出口報關檢核表") ? "" : "檢核表、"
}用印過的invoice、packing、委任書”`,
saveCommitAll,
true,
true,
"取消不提交",
"確認並提交",
" "
);
}
} else {
this.createMessageBox(
`請您上傳“${
arr.includes("出口報關檢核表") ? "" : "檢核表、"
}用印過的invoice、packing、委任書”`,
undefined,
true,
false,
"",
"關閉",
""
);
}
});
}
});
},
//cancel 和 confirm 按钮调换了方法
createMessageBox(
message,
saveFn,
showCancel,
showConfirm,
cancelBtnText,
confirmBtnText,
title
) {
const h = this.$createElement;
return this.$msgbox({
title: title,
iconClass: "",
message: h("p", { class: "my-message-box" }, [
h(
"i",
{
class: "warning-icon el-icon-warning",
id: "commentContent",
},
null
),
h("div", { class: "font-style" }, message),
]),
confirmButtonClass: "my-custom-confirm-btn",
customClass: "my-custom-msgbox",
cancelButtonClass: "el-button--primary",
confirmButtonText: cancelBtnText,
cancelButtonText: confirmBtnText,
showCancelButton: showCancel,
showClose: title != " ",
center: true,
showConfirmButton: showConfirm,
closeOnClickModal: false,
closeOnPressEscape: false,
closeOnHashChange: false,
beforeClose: async (action, instance, done) => {
if (action === "cancel") {
if (saveFn !== undefined) {
instance.cancelButtonLoading = true;
instance.cancelButtonText = "正在提交...";
try {
const res = await saveFn(this.declareId);
if (res.code === 200) {
instance.cancelButtonLoading = false;
this.$message.success("提交成功");
this.$emit("sucSubmit");
} else {
this.$alert(res.msg, "提示", {
confirmButtonText: "確定",
type: "warning",
});
done(false); // 阻止对话框关闭
}
} catch (error) {
console.error("提交错误:", error);
this.$alert("提交失败，请稍后尝试", "提示", {
confirmButtonText: "確定",
type: "error",
});
done(false);
}
}
done();
} else {
done();
}
},
});
},
// 点击保存
nextStepThree(type) {
if (type == "save") {
if (this.uploadFilesList.length > 0 || this.autoFileList.length > 0) {
// if (this.cusFileId) {
this.saveByDetailMethod(type);
// }
} else {
this.errorTip = ["上傳文件是必填的"];
this.$emit("clickLoading", false);
}
} else {
this.$emit("clickLoading", true);
this.topSaveStepThree(type);
}
},
// 编辑时要跳转到的页面
goEditStep(type) {
this.topSaveStepThree("save", "nomsg").finally(() => {
// this.$emit("setStepStates", ["finish3"], ["finish3"], "", "");
this.$emit("addNextStep", {
curStep: type,
declareId: this.declareId,
});
});
},
// 保存
topSaveStepThree(type, msgStatus = "") {
return new Promise((resolve, reject) => {
let obj = {
id: this.declareId,
};
if (
this.typeFormData.isClear !== null &&
this.typeFormData.isClear !== ""
) {
obj.isClear = this.typeFormData.isClear;
}
saveStep3Files(obj)
.then((res) => {
if (res.code == 200) {
msgStatus == "" ? this.$message.success("保存成功") : "";
if (typeof type == "number") {
this.goEditStep(type);
}
resolve();
} else {
this.msgWarning(res.msg);
reject();
}
})
.catch(() => {
reject();
})
.finally(() => {
this.$emit("clickLoading", false);
});
});
},
// 查看详情时告诉后端状态的保存
saveByDetailMethod(type) {
saveByDetails(this.declareId)
.then((res) => {
if (res.code == 200) {
if (typeof type == "number") {
this.$message.success("保存成功");
this.goEditStep(type);
}
} else {
this.msgWarning(res.msg);
}
})
.finally(() => {
this.$emit("clickLoading", false);
});
},
// 查看详情
viewDetailBtn() {
if (this.uploadFilesList.length > 0 || this.autoFileList.length > 0) {
let checkRes = this.$parent.checkStepForm({ curStep: 3 });
if (!checkRes) {
this.nextStepThree("save");
this.topSaveStepThree("save", "nomsg").finally(() => {
this.$refs.detailDrawerRef.openDrawer(
{ id: this.declareId },
"step3"
);
});
}
} else {
this.errorTip = ["請上傳報關文件！"];
}
},
// 查看pdf
openViewPdf(file) {
this.uploadLoading = true;
file.findLoading = true;
this.findDisabled = false;
this.$emit("clickDisabled", true);
downLoadViewPdf(
"/icleartw/cusFile/previewFile",
{ fileId: file.id },
file.name + file.type
)
.then((res) => {
this.pdfData = res;
this.pdfTitle = file.name + file.type;
this.entryPdfVisible = true;
})
.finally(() => {
this.uploadLoading = false;
file.findLoading = false;
this.findDisabled = true;
this.$emit("clickDisabled", false);
});
},
// 根据申报id获取文件信息
getAutoFileList() {
if (this.declareId) {
getFindSysByDeclareId(this.declareId).then((res) => {
if (res.code == 200) {
this.autoFileList = res.data
? res.data.filter((item) => item.source == 2)
: [];
if (this.autoFileList != null) {
this.cusFileId = this.autoFileList[0].customsFileId;
this.autoFileList = this.autoFileList.map((item) => {
return {
...item,
findLoading: false,
};
});
}
this.uploadFilesList = res.data
? res.data.filter((item) => item.source == 1)
: [];
if (this.uploadFilesList != null) {
this.uploadFilesList = this.uploadFilesList.map((item) => {
return {
...item,
fileName: item.name + item.type,
};
});
}
} else {
// this.msgWarning(res.msg);
}
});
}
},
// 关闭错误提示
errorTipClose() {
this.errorTip = [];
},
},
};
</script>
<style lang="scss" scoped>
.step-name {
font-size: 20px;
font-weight: 600;
margin-bottom: 20px;
i {
font-size: 32px;
vertical-align: -5px;
color: #4d148c;
margin-right: 12px;
}
}
.content {
width: 80%;
min-width: 618px;
margin: 0 auto;
.title {
text-align: center;
margin-bottom: 16px;
font-size: 22px;
font-weight: 500;
line-height: 36px;
}
.warning {
font-size: 12px;
line-height: 24px;
font-weight: 400;
text-align: center;
margin-bottom: 16px;
.title4 {
color: #ff4a2a;
}
}
.warning-bottom {
margin: 8px 0 2px 0;
}
.upload-lable {
font-size: 16px;
font-weight: 800;
line-height: 36px;
height: 36px;
padding-left: 10px;
}
.upload-demo {
// width: 10%;
margin-top: 6px;
// ::v-deep .el-upload {
// width: 100%;
// }
.upload-btn {
width: 100%;
height: 38px;
line-height: 38px;
padding-left: 20px;
background: #f2f2f2;
text-align: left;
}
}
.saveBtn-box {
.el-button {
width: 160px;
height: 56px;
font-size: 1.1875rem;
font-weight: 700;
padding: 0 10px;
}
}
.bottom-tip {
width: 75%;
max-width: 800px;
min-width: 450px;
margin: 20px auto 0 auto;
font-size: 12px;
font-weight: 500;
line-height: 21px;
color: #999999;
.bottom-tip-item {
display: flex;
.bottom-tip-item_idx {
margin-right: 5px;
}
}
}
.fileList-box {
width: 100%;
background: #f2f2f2;
height: 36px;
line-height: 36px;
border-top: 1px solid #e0e0e0;
display: flex;
justify-content: space-between;
padding: 0 20px 0 15px;
}
.auto-file {
border: none;
margin-bottom: 6px;
}
.error-file {
color: red;
margin-top: 6px;
border: none;
background: #f21f1f0d;
}
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 85%;
/* 超过该宽度将显示省略号 */
}
.font-style {
line-height: 30px;
color: #000;
margin: 15px 0px;
fontsize: 18px;
fontweight: 700;
font-family: FedExSansArabic, FedExSans, Arial, sans-serif !important;
}
.my-message-box {
margin: 0px 50px 10px 50px;
font-size: 18px;
font-weight: 700;
}
.warning-icon {
font-size: 40px;
display: block;
color: #ff6600;
}
.userUploadFileList {
max-height: 360px;
// overflow-y: auto;
}
.stepThreeForm {
margin-top: 5px;
// padding-left: 10px;
.formItemText {
display: inline-block;
font-size: 16px;
font-weight: 800;
color: red;
margin-left: 10px;
}
}
</style>
<template>
<div class="step-two-warp" id="pasteListener" ref="aaaaaaaa">
<div class="step-name">
<i class="el-icon-circle-check"></i>
<span>{{ $t("fillIn.step2") }}</span>
</div>
<div class="content">
<div class="titles">
<p class="title1">{{ $t("fillIn.title1") }}</p>
<!-- <p class="title2">{{ $t("fillIn.title2") }}</p> -->
<p class="title3">{{ $t("fillIn.title3") }}</p>
<p class="title4">{{ $t("fillIn.title4") }}</p>
</div>
<FedexAlert
v-if="errorTip.length > 0"
class="mb20"
:tipList="errorTip"
@close="errorTipClose"
/>
<div class="check-type-box">
<el-form
:model="typeFormData1"
:rules="typeFormData1Rules"
ref="typeFormData1Ref"
label-width="200px"
class="type-form-box check-color"
label-position="top"
>
<el-form-item
class="type-error"
:label="$t('fillIn.smallTit1')"
prop="customsDeclarationType"
>
<div class="check-auto no-boder-input">
<el-checkbox-group
v-model="typeFormData1.customsDeclarationType"
@change="handleCheckType1(typeFormData1.customsDeclarationType)"
>
<el-checkbox
v-for="(item, index) in customsDeclarationTypeList"
:label="item.value"
:key="index"
>
{{ item.label }}
<el-tooltip
class="item"
effect="dark"
:content="typeFormData1.otherData"
placement="top-start"
:disabled="isShowTooltip"
>
<el-input
v-if="item.value == 'OTHER:'"
v-model="typeFormData1.otherData"
style="width:100%"
@mouseover.native="inputOnMouseOver($event)"
placeholder=""
maxlength="11"
></el-input>
</el-tooltip>
<span v-if="item.tip">&nbsp;&nbsp;{{ item.tip }}</span>
</el-checkbox>
</el-checkbox-group>
</div>
</el-form-item>
<el-form-item
class="tax-error"
:label="$t('fillIn.isList')"
prop="taxRefundFormFlag"
>
<el-checkbox-group
v-model="typeFormData1.taxRefundFormFlag"
@change="handleCheckType2(typeFormData1.taxRefundFormFlag)"
>
<el-checkbox
v-for="(item, index) in taxRefundFormFlagList"
:label="item.value"
:key="index"
>
{{ item.label }}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
<el-form
class="fedexFormStyle"
ref="methodFormDataRef"
:rules="methodFormDataRules"
:model="methodFormData"
label-position="top"
>
<el-row :gutter="8">
<el-col :span="8">
<Formitem :label="$t('fillIn.watchNum1')" prop="supervisoryNo">
<el-input
type="text"
:id="'inputInner--supervisoryNo'"
maxlength="5"
@input="validateSupervisoryNo"
v-model="methodFormData.supervisoryNo"
>
<!-- oninput="value = value.toUpperCase().replace(/\s+/g,'')" -->
</el-input>
</Formitem>
</el-col>
<el-col :span="8">
<Formitem
:label="$t('fillIn.watchNum2')"
prop="originalImportEntryNo"
>
<el-input
type="text"
:id="'inputInner--originalImportEntryNo'"
maxlength="14"
v-model="methodFormData.originalImportEntryNo"
>
</el-input>
</Formitem>
</el-col>
<el-col :span="8">
<Formitem
:label="$t('fillIn.watchNum3')"
prop="listOfMaterialsNo"
>
<el-input
type="text"
:id="'inputInner--listOfMaterialsNo'"
maxlength="20"
v-model="methodFormData.listOfMaterialsNo"
>
</el-input>
</Formitem>
</el-col>
</el-row>
</el-form>
<p class="small-title">{{ $t("fillIn.smallTit2") }}</p>
<el-checkbox-group v-model="exportStatisticsMethod" class="check-color check-box-aaa" style="width: 100%;display: flex; gap: 10px">
<div style=" width: 50%; height: 100%;" >
<div v-for="(item, index) in exportStatisticsMethodList">
<el-checkbox class="checkbox-step2" style="display: block; width:100%;" :label="item.value" v-if="item.posation == 'left'" :key="index+1"
:class="item.tip && item.value !== '91' && item.value !== '9M'
? 'height48 checkbox-width50'
: item.value == '9M'
? 'checkbox-9M'
: item.value == 'OTHER:'
? 'line-height48 checkbox-width50'
: 'checkbox-width50'
">
<p style="width: 100%;">
<span v-if="item.value !== 'OTHER:'">{{ item.label }}</span>
<span v-if="item.value == '91'" class="way-tip">{{
item.tip
}}</span>
</p>
<div style="width: 100%;">
<div style="width: 100%;"><span v-if="item.value == 'OTHER:'" >{{ item.label }}</span></div>
<div style="width: 100%;">
<!-- <el-tooltip
class="item "
effect="dark"
:content="methodOtherData"
placement="top-start"
:disabled="isShowTooltip"
> -->
<el-input
v-if="item.value == 'OTHER:'"
style=" width:90%;"
type="textarea"
:rows="2"
placeholder="請輸入"
v-model="methodOtherData"
maxlength="35"
show-word-limit
>
</el-input>
<!-- </el-tooltip> -->
</div>
</div>
<p
style="width: 100%;"
class="way-tip"
v-if="item.value !== '91' && item.value !== '9M'"
>
{{ item.tip }}
</p>
</el-checkbox>
</div>
</div>
<div style="width: 50%; height: 100%;" >
<div style="width: 100%;" v-for="(item, index) in exportStatisticsMethodList">
<el-checkbox class="checkbox-step2" style="width: 100%;" :label="item.value" v-if="item.posation == 'right'" :key="index+2"
:class="item.tip && item.value !== '91' && item.value !== '9M'
? 'height48 checkbox-width50'
: item.value == '9M'
? 'checkbox-9M'
: 'checkbox-width50'
"
>
<p style="width: 100%;">
<span v-if="item.value !== 'OTHER:'">{{ item.label }}</span>
<span v-if="item.value == '91'" class="way-tip">{{
item.tip
}}</span>
</p>
<p
style="width: 100%;"
class="way-tip"
>
<span v-if="item.value !== '91' && item.value !== '9M'">{{ item.tip }} </span>
<span v-if="item.value == '9M'" style="color: #fc5d5d">{{ item.tip }} </span>
</p>
<div >
<el-input
v-if="item.value == '9M'"
style="margin-top: 4px ; width:90%;"
type="textarea"
:rows="2"
placeholder="請輸入"
v-model="methodAdditional"
maxlength="100"
show-word-limit
>
</el-input>
</div>
</el-checkbox>
</div>
</div>
</el-checkbox-group>
<!-- <div style="width: 100%;display: flex;align-items: center; gap: 10px">
<el-checkbox-group v-model="exportStatisticsMethod" class="check-color">
<el-checkbox
v-for="(item, index) in exportStatisticsMethodList"
:label="item.value"
:key="index"
:class="
item.tip && item.value !== '91' && item.value !== '9M'
? 'height48 checkbox-width50'
: item.value == '9M'
? 'checkbox-9M'
: item.value == 'OTHER:'
? 'line-height48 checkbox-width50'
: 'checkbox-width50'
"
>
<p>
<span v-if="item.value !== 'OTHER:'">{{ item.label }}</span>
<span v-if="item.value == '91'" class="way-tip">{{
item.tip
}}</span>
<span v-if="item.value == '9M'" style="color: #fc5d5d">
{{ item.tip }}
</span>
</p>
<span v-if="item.value == 'OTHER:'">{{ item.label }}</span>
<el-tooltip
class="item"
effect="dark"
:content="methodOtherData"
placement="top-start"
:disabled="isShowTooltip"
>
<el-input
v-if="item.value == 'OTHER:'"
class="no-boder-input"
style="width: 500px"
v-model="methodOtherData"
placeholder=""
@mouseover.native="inputOnMouseOver($event)"
></el-input>
</el-tooltip>
<p
class="way-tip"
v-if="item.value !== '91' && item.value !== '9M'"
>
{{ item.tip }}
</p>
<el-input
v-if="item.value == '9M'"
style="margin-top: 4px ;"
type="textarea"
:rows="2"
placeholder="请输入"
v-model="methodAdditional"
maxlength="2000"
show-word-limit
>
</el-input>
</el-checkbox>
</el-checkbox-group> -->
<div class="way-tip-bule">
※以上復出口的案件,附加原進口報單(或國內採購發票),且隨貨附上具結
書正本。(詳如備註)
</div>
</div>
<el-form
class="fedexFormStyle bg-textarea"
ref="dateFormDataRef"
:model="dateFormData"
:rules="dateFormDataRules"
label-position="top"
>
<el-row :gutter="8">
<el-col :span="12">
<Formitem label="3. 指定報關日" prop="dayOfEntry">
<el-date-picker
v-model="dateFormData.dayOfEntry"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
type="date"
id="inputInner--dayOfEntry"
placeholder=""
prefix-icon="none"
:picker-options="pickerOptions"
>
</el-date-picker>
</Formitem>
</el-col>
<el-col :span="12" >
<Formitem
>
<div style="line-height: 50px;" class="trademark_color">
<div style="display: inline; color: #333; font-weight: Bold;"> &nbsp;&nbsp;&nbsp;7. 商標&nbsp;&nbsp;</div>
<el-checkbox style="display: inline; font-weight: Bold" v-model="brandFlag" :disabled="logoCheckDisabled" @change="handleCheckNo" >
無</el-checkbox>
</div>
</Formitem>
</el-col>
</el-row>
<div >
<div style="width: 100%;display: flex; gap: 8px;">
<div style="width: 50%;display: flex;flex-direction: column;">
<el-col :span="12" style="width: 100%; height: 160px;">
<div class="textarea-box">
<Formitem label="4. 中文品名" prop="chineseName" class="label" >
<el-input
type="textarea"
:id="'inputInner--chineseName'"
:rows="4"
v-model="dateFormData.chineseName"
maxlength="100"
show-word-limit
class="cnInput"
>
</el-input>
</Formitem>
</div>
</el-col>
<el-col :span="12" style="width: 100%;">
<Formitem label="5. 稅則" prop="taxRules" >
<el-input
type="text"
:id="'inputInner--taxRules'"
v-model="dateFormData.taxRules"
maxlength="18"
>
</el-input>
</Formitem>
</el-col>
<div style="display: flex; gap: 8px;">
<el-col :span="6" style=" width: 50%; ">
<Formitem label="6. 報關金額" prop="customsDeclarationAmount" >
<el-input
type="text"
:id="'inputInner--customsDeclarationAmount'"
oninput="if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+5)}"
v-model="dateFormData.customsDeclarationAmount"
@blur="blurCheckCycd"
maxlength="15"
>
</el-input>
</Formitem>
</el-col>
<el-col :span="6" style="width: 50%; ">
<Formitem label="" prop="currencyCd" >
<el-select
:id="'inputInner--currencyCd'"
v-model="dateFormData.currencyCd"
filterable
clearable
placeholder="幣別"
value-key="id"
:disabled="dateFormData.customsDeclarationAmount <= 0"
>
<el-option
v-for="(item, index) in currencyCdList"
:key="index"
:label="item.code"
:value="item.code"
>
</el-option>
</el-select>
<div style="height: 7px;">&nbsp;</div>
</Formitem>
</el-col>
</div>
</div>
<div style="width: 50%;display: flex;flex-direction: column; ">
<el-col :span="12" style="width: 100%; ">
<Formitem label="文字商標" prop="brandTxt">
<el-input
type="text"
:id="'inputInner--brandTxt'"
maxlength="19"
:disabled="logoTextDisabled || brandFlag == 1"
v-model="brandFormData.brandTxt"
@change="logoTextChange"
>
</el-input>
</Formitem>
</el-col>
<el-col :span="12" style="width: 100%; ">
<FileUploadPaste ref="uploadRef" style="height: 210px; width: 100%;"
:imageBase="image" :disabled="logoDisabled || brandFlag == 1" @uploadFileInfo="uploadFileInfo" @uploadMsg="uploadMsg" >
<div>圖案商標</div>
</FileUploadPaste>
</el-col>
</div>
</div>
</div>
</el-form>
<div class="bottom-box" style="margin-top: 10px;">
<el-form
class="fedexFormStyle"
ref="brandFormDataRef"
:model="brandFormData"
label-position="top"
:disabled="logoDisabled"
>
</el-form>
<p class="small-title">
8. 產證
<span class="checkbox-width80-tip">※每份規費$250</span>
</p>
<el-checkbox-group
v-model="propertyCertificate"
class="checkbox-width80 check-color"
@change="handleCheckType3"
>
<el-checkbox
v-for="(item, index) in checkType3List"
:label="item.value"
:key="index"
>
{{ item.label }}
</el-checkbox>
</el-checkbox-group>
<p class="small-title" style="line-height: 14px; margin-top: 8px">
9. ECFA產證
</p>
<el-row :gutter="8">
<el-col :span="12">
<el-checkbox-group
v-model="ecfaPropertyCertificate"
class="checkbox-width80 checkbox-lineheight80 check-color"
@change="handleCheckType5"
>
<el-checkbox
v-for="(item, index) in checkType4List"
:label="item.value"
:key="index"
>
{{ item.label }}
</el-checkbox>
</el-checkbox-group>
</el-col>
<el-col :span="12">
<el-form
class="fedexFormStyle"
ref="ecfaFormDataRef"
:model="ecfaFormData"
:rules="ecfaFormDataRules"
label-position="top"
>
<Formitem label="產證編號" prop="ecfaPropertyCertificateNo">
<el-input
type="text"
:id="'inputInner--ecfaPropertyCertificateNo'"
maxlength="16"
v-model="ecfaFormData.ecfaPropertyCertificateNo"
:disabled="certificateNoDisabled"
>
</el-input>
</Formitem>
</el-form>
</el-col>
</el-row>
<p class="small-title" style="line-height: 14px; margin-bottom: 8px">
10. 申請
<span class="checkbox-width80-tip">※每份規費$100</span>
</p>
<el-checkbox-group
v-model="applyFor"
class="checkbox-width80 check-color"
>
<el-checkbox
v-for="(item, index) in checkType5List"
:label="item.value"
:key="index"
>
{{ item.label }}
</el-checkbox>
</el-checkbox-group>
</div>
</div>
<div align="center" class="entrySave" style="margin-top: 30px;">
<el-button
class="entrySaveButton entrySaveButton-background"
@click="nextStepTwo('save')"
:loading="step2Loading"
>
{{ $t("fillIn.nextStep") }}
</el-button>
</div>
</div>
</template>
<script>
import {
findAllCurrencyCd,
declareCheckInfoUpdate,
declareCheckInfoSave,
generatePdf,
} from "@/api/fillForm.js";
import { mapGetters } from "vuex";
import FileUploadPaste from "@/components/FileUploadPaste";
export default {
components: {
FileUploadPaste,
},
props: {
stepStates: {
type: Array,
default() {
return [];
},
},
step2Id: {
type: Number,
default() {
return null;
},
},
declareId: {
type: Number,
default() {
return null;
},
},
generateAutoPdf:{
type: Boolean,
default() {
return false;
},
}
},
watch:{
errorTip(newVal,oldVal){
if(newVal.length>0){
this.toHead('view-box')
}
},
'dateFormData.customsDeclarationAmount':{
handler(val){
if (!val) {
this.dateFormData.currencyCd = null;
}
}
},
// 'typeFormData1.otherData':{
// handler(val){
// if (val) {
// this.typeFormData1.customsDeclarationType=[];
// this.typeFormData1.customsDeclarationType.push("OTHER:");
// }
// }
// },
methodAdditional(val){
if(val && val.length>0 && !this.exportStatisticsMethod.includes("9M")){
this.exportStatisticsMethod.push("9M");
}
},
methodOtherData(val){
if(val && val.length>0 && !this.exportStatisticsMethod.includes("OTHER:")){
this.exportStatisticsMethod.push("OTHER:");
}
},
}, mounted() {
// this.$nextTick(() => {
// const myDiv = this.$refs.aaaaaaaa;
// myDiv.addEventListener('click', () => {
// console.log("11111111111111111111");
// });
// // 模拟点击操作
// myDiv.click();
// });
// var pDiv = document.getElementById('pasteListener');
// console.log(pDiv);
// this.$nextTick(() => {
// pDiv.addEventListener('paste', event => {
// console.log("66666");
// this.$refs.uploadRef.pasteImg(event);
// });
// });
},
data() {
return {
createInfo:{
createTime: null,
createName: null,
},
uploadMsg:"",
isShowTooltip: true,
slipId:null,
typeFormData1: {
customsDeclarationType: [],
taxRefundFormFlag: [],
otherData: "",
}, pickerOptions: {
disabledDate: (time) => {
return time.getTime() < new Date()-(1000 * 60 * 60 * 24 );
},
},
setImgBlob:null,
typeFormData1Rules: {
customsDeclarationType: [
{ required: false, message: "請您勾選報單類別", trigger: "change" },
],
taxRefundFormFlag: [
{
required: false,
message: "請您勾選是否為電子沖退稅報單",
trigger: "change",
},
],
},
methodFormData: {
supervisoryNo: "",
originalImportEntryNo: "",
listOfMaterialsNo: "",
},
methodAdditional: "",
methodFormDataRules: {
supervisoryNo: [
{
required: false,
validator: (rule, value, callback) => {
if (value) {
if (!this.regExp.supervisoryNoExp.test(value)) {
callback("請您輸入英文(大寫)和數字組合");
} else if (value.length != 5) {
callback("監管編號只能爲5個字元");
} else {
callback();
}
} else {
callback();
}
},
trigger: "blur",
},
],
originalImportEntryNo: [
{
required: false,
validator: (rule, value, callback) => {
if (value) {
if (!this.regExp.originalImportEntryNoExp1.test(value)) {
callback(
"請您使用英文，數字和空格的組合，不支持以下字符：、, ；, ‘, ’"
);
} else if (value.length > 14) {
callback(
"原進口提單號碼最多可包含14個字元，而您輸入了" +
value.length +
"個字元。"
);
} else {
callback();
}
} else {
callback();
}
},
trigger: "blur",
},
],
listOfMaterialsNo: [
{
required: false,
validator: (rule, value, callback) => {
if (value) {
if (!this.regExp.listOfMaterialsNoExp1.test(value)) {
callback(
"請您使用中文，英文，數字和空格的組合，不支持以下字符：、, ；, ‘, ’"
);
} else if (value.length > 50) {
callback(
"用料清表文號最多可包含50個字元，而您輸入了" +
value.length +
"個字元。"
);
} else {
callback();
}
} else {
callback();
}
},
trigger: "blur",
},
],
},
exportStatisticsMethod: [],
methodOtherData: "",
dateFormData: {
dayOfEntry: "",
chineseName: "",
taxRules: "",
customsDeclarationAmount: "",
currencyCd: "",
},
dateFormDataRules: {
dayOfEntry: [
{ required: false, message: "請你選擇日期", trigger: "change" },
],
taxRules: [
{
required: false,
validator: (rule, value, callback) => {
if (value) {
if (value.length > 50) {
callback(
"稅則最多可包含50個字元，而您輸入了" +
value.length +
"個字元。"
);
} else {
callback();
}
} else {
callback();
}
},
trigger: "blur",
},
],
customsDeclarationAmount: [
{
required: false,
// validator:validateMoney,
validator: (rule, value, callback) => {
if(isNaN(value)){
callback(new Error('報關金額格式不正確'))
// callback();
}else{
if (value && value.toString().includes('.')) {
if (value.toString().split('.').length > 3) {
callback(new Error('報關金額格式不正確')) //防止输入多个小数点
} else {
//只能输入数字和小数点
// value=value.replace(/[^\d^.]+/g,'')
value = Math.round(value * Math.pow(10, 3)) / Math.pow(10, 3) //四舍五入
// value = Number(value).toFixed(3); //不足补位
this.dateFormData.customsDeclarationAmount = value;
callback();
}
callback();
} else {
callback();
}
}
},
trigger: "blur",
},
],
currencyCd: [
{
required: false,
validator: (rule, value, callback) => {
if (!value && this.dateFormData.customsDeclarationAmount > 0) {
callback("請您選擇幣別");
} else {
callback();
}
},
trigger: "change",
},
],
},
currencyCdList: [],
brandFlag: false,
brandFormData: {
brandTxt: "",
},
image: "",
propertyCertificate: [],
ecfaPropertyCertificate: [],
ecfaFormData: {
ecfaPropertyCertificateNo: "",
},
ecfaFormDataRules: {
ecfaPropertyCertificateNo: [
{
required: false,
validator: (rule, value, callback) => {
if (value) {
if (!this.regExp.listOfMaterialsNoExp.test(value)) {
callback(
"産證編號最多可包含100個字元，且不支持輸入符號"
);
} else if (value.length > 50) {
callback(
"用料清表文號最多可包含50個字元，而您輸入了" +
value.length +
"個字元。"
);
} else {
callback();
}
} else {
callback();
}
},
trigger: "blur",
},
],
},
certificateNoDisabled: false,
applyFor: [],
logoDisabled: false,
logoTextDisabled: false,
logoCheckDisabled: false,
errorTip: [],
step2Loading: false,
};
},
computed: {
...mapGetters(["deliveryNo"]),
customsDeclarationTypeList() {
return [
{ label: this.$t("fillIn.listType1"), value: "G5", tip: "" },
{ label: this.$t("fillIn.listType2"), value: "G3", tip: "" },
{ label: this.$t("fillIn.listType3"), value: "B9", tip: "" },
{ label: this.$t("fillIn.listType4"), value: "B8", tip: "" },
{ label: this.$t("fillIn.listType5"), value: "D5", tip: "" },
{ label: this.$t("fillIn.listType6"), value: "F5", tip: "" },
{
label: this.$t("fillIn.listType7_1"),
value: "OTHER:",
tip: this.$t("fillIn.listType7_2"),
},
];
},
taxRefundFormFlagList() {
return [
{ label: this.$t("fillIn.yes"), value: 1 },
{ label: this.$t("fillIn.no"), value: 0 },
];
},
exportStatisticsMethodList() {
return [
{ label: this.$t("fillIn.wayList1"), value: "02", tip: "" , posation:"left"},
{ label: this.$t("fillIn.wayList2"), value: "81", tip: "" , posation: "right" },
{ label: "(04)無價之禮物、貨樣及廣告品, 不再進口", value: "04", tip: "", posation: "left" },
{ label: "(82)外貨復出口不再進口", value: "82", tip: "" , posation: "right" },
{ label: this.$t("fillIn.wayList3"), value: "53", tip: this.$t("fillIn.wayList3_1"), posation: "left" },
{ label: this.$t("fillIn.wayList4"), value: "9L", tip: "", posation: "right" },
{
label: this.$t("fillIn.wayList5_1"),
value: "91",
tip: this.$t("fillIn.wayList5_2"),
posation: "left"
},
{ label: this.$t("fillIn.wayList6"), value: "9S", tip: "" , posation: "right" },
{
label: this.$t("fillIn.wayList7_1"),
value: "94",
tip: this.$t("fillIn.wayList7_2"),
posation: "left"
},
{
label: this.$t("fillIn.wayList9_1"),
value: "9M",
tip: this.$t("fillIn.wayList9_2"),
posation: "right"
}, {
label: this.$t("fillIn.wayList10_1"),
value: "96",
tip: this.$t("fillIn.wayList10_2"),
posation: "left"
},
{
label: this.$t("fillIn.wayList8_1"),
value: "92",
tip: this.$t("fillIn.wayList8_2"),
posation: "right"
},
{ label: this.$t("fillIn.wayList11"), value: "OTHER:", tip: "" , posation: "left" },
];
},
checkType3List() {
return [
{ label: "不要", value: "pc_no" },
{ label: "要", value: "pc_yes" },
{ label: "隨機", value: "pc_random" },
{ label: "不隨機", value: "pc_niRandom" },
];
},
checkType4List() {
return [
{ label: "不要", value: "ecfa_no" },
{ label: "要申請", value: "ecfa_yes" },
{ label: "自行申請", value: "ecfa_apply" },
];
},
checkType5List() {
return [
{ label: "沖退原料稅", value: "ct" },
{ label: "退內地稅", value: "tn" },
{ label: "出口證明聯/副報單", value: "ck" },
];
},
},
created() {
Promise.all([findAllCurrencyCd()]).then((res) => {
this.currencyCdList = res[0].data;
});
},
methods: {
inputOnMouseOver(e){
const target = event.target;
// 判断是否开启tooltip功能
if (target.offsetWidth < target.scrollWidth) {
this.isShowTooltip = false;
} else {
this.isShowTooltip = true;
}
},
// 校验
submitForm(formRef) {
return new Promise((resolve, reject) => {
this.$refs[formRef].validate((valid, object) => {
if (valid) {
resolve();
} else {
for (var key in object) {
if (object.hasOwnProperty(key)) {
this.errorTip.push(object[key][0].message);
this.errorTip = [...new Set(this.errorTip)];
}
}
reject();
}
});
});
},
uploadFileInfo(obj){
this.setImgBlob=obj;
},
checkForm(){
this.errorTip = [];
var checkForm=["typeFormData1Ref","methodFormDataRef","dateFormDataRef","brandFormDataRef","ecfaFormDataRef"];
checkForm.forEach(formRef => {
this.submitForm(formRef);
});
return this.errorTip;
},
// 下一步按钮
nextStepTwo(type) {
if(this.methodAdditional && this.methodAdditional.length>0){
if(!this.exportStatisticsMethod.includes("9M"))
this.exportStatisticsMethod.push("9M")
}else{
if (!this.methodAdditional && this.exportStatisticsMethod.includes("9M")){
this.exportStatisticsMethod = this.exportStatisticsMethod.filter(function (item) {
return item !== "9M";
});
}
}
if(this.methodOtherData.length > 0){
if (!this.exportStatisticsMethod.includes("OTHER:"))
this.exportStatisticsMethod.push("OTHER:")
}
this.errorTip=[];
let exportMethodList = this.exportStatisticsMethod.map((item) => {
if (item === "OTHER:") {
item = "OTHER:" + this.methodOtherData;
}
return item;
});
let paramsData = {
check: "0",
applyFor: this.applyFor.join(";"),
brandFlag: this.brandFlag ? 1 : null,
customsDeclarationType:
this.typeFormData1.customsDeclarationType[0] == "OTHER:"
? "OTHER:" + this.typeFormData1.otherData
: this.typeFormData1.customsDeclarationType[0],
taxRefundFormFlag: this.typeFormData1.taxRefundFormFlag[0],
ecfaPropertyCertificate: this.ecfaPropertyCertificate[0],
exportStatisticsMethod: exportMethodList.join(";"),
methodAdditional: this.methodAdditional,
propertyCertificate: this.propertyCertificate.join(";"),
deliveryNo: this.deliveryNo,
declareId: this.declareId,
...this.methodFormData,
...this.dateFormData,
...this.brandFormData,
...this.ecfaFormData,
...this.createInfo,
width:200,
height:200,
imageSelect:this.setImgBlob ? this.setImgBlob.imageSelect : null,
};
if (this.step2Id) {
this.slipId = this.step2Id;
}
var checkForm = ["typeFormData1Ref", "methodFormDataRef", "dateFormDataRef", "brandFormDataRef", "ecfaFormDataRef"];
//判断校验是否通过
if (!this.checkFromNotShowError(checkForm)) {
// this.$emit("setStepStates", [], ["finish2"], "finish2", "");
delete paramsData.check;
this.saveUpdate(type,paramsData);
} else{
this.saveUpdate(type, paramsData);
}
// if (type == "topSave") {
// delete paramsData.check;
// if (this.slipId) {
// paramsData.id = this.slipId;
// this.editCheckInfoSaveStep2(paramsData, this.setImgBlob,"no");
// } else {
// this.addCheckInfoSaveStep2(paramsData, this.setImgBlob,"no");
// }
// // this.$emit("setStepStates", [], "finish2");
// } else if (type == "save") { //点击下一步时
// let checkRes;
// await Promise.all([
// this.submitForm("typeFormData1Ref"),
// this.submitForm("ecfaFormDataRef"),
// this.submitForm("dateFormDataRef"),
// ])
// .then(() => {
// checkRes = true;
// })
// .catch((res) => {
// if(res) this.msgWarning(res);
// checkRes = false;
// });
// if (checkRes) {
// if (this.slipId) {
// paramsData.id = this.slipId;
// this.editCheckInfoSaveStep2(paramsData, this.setImgBlob,"next");
// } else {
// this.addCheckInfoSaveStep2(paramsData, this.setImgBlob, "next");
// }
// }
// } else {
// if (this.stepStates.includes("finish2")) {
// let checkRes;
// await Promise.all([
// this.submitForm("typeFormData1Ref"),
// this.submitForm("dateFormDataRef"),
// ])
// .then(() => {
// checkRes = true;
// })
// .catch((res) => {
// this.$message.error(res)
// console.log(res);
// checkRes = false;
// });
// if (checkRes) {
// if (this.slipId) {
// paramsData.id = this.slipId;
// this.editCheckInfoSaveStep2(paramsData, this.setImgBlob, type);
// }
// }
// } else {
// delete paramsData.check;
// if (this.slipId) {
// paramsData.id = this.slipId;
// this.editCheckInfoSaveStep2(paramsData, this.setImgBlob,type);
// } else {
// this.addCheckInfoSaveStep2(paramsData, this.setImgBlob, type);
// }
// }
// }
},
async saveUpdate(type, paramsData){
if (type == "save") {
let checkRes;
await Promise.all([
this.submitForm("typeFormData1Ref"),
this.submitForm("ecfaFormDataRef"),
this.submitForm("dateFormDataRef"),
this.submitForm("methodFormDataRef"),
this.submitForm("brandFormDataRef"),
])
.then(() => {
checkRes = true;
})
.catch((res) => {
if (res) this.msgWarning(res);
checkRes = false;
});
if (checkRes) {
let checkStepRes = this.$parent.checkStepForm({ curStep: 3 })
if (!checkStepRes) {
if (this.slipId) {
paramsData.id = this.slipId;
this.editCheckInfoSaveStep2(paramsData, this.setImgBlob, "next");
} else {
this.addCheckInfoSaveStep2(paramsData, this.setImgBlob, "next");
}
}
}
} else {
// delete paramsData.check;
if (this.slipId) {
paramsData.id = this.slipId;
this.editCheckInfoSaveStep2(paramsData, this.setImgBlob, type);
} else {
this.addCheckInfoSaveStep2(paramsData, this.setImgBlob, type);
}
}
},
checkFromNotShowError(formRefs) {
let checkRes = false;
for(let i=0;i<formRefs.length;i++){
this.$refs[formRefs[i]].validate((valid, object) => {
if (valid) {
checkRes = true;
// resolve();
} else {
checkRes = false;
}
});
if(!checkRes){
break;
}
}
return checkRes;
},
// 新增保存检核表信息
addCheckInfoSaveStep2(data, uploadFormData, type) {
if (type == "next") {
this.step2Loading = true;
} else if (typeof type == "number") {
this.$emit("clickLoading", true);
}
let formData = new FormData(); //formdata格式
formData.append("file", uploadFormData ? uploadFormData.file : null);
const blob = new Blob([JSON.stringify(data)], { type: 'application/json;charset=utf-8' });
formData.append("dto", blob)
declareCheckInfoSave(formData)
.then((res) => {
if (res.code == 200) {
this.slipId=res.data.id;
this.createInfo={
createTime: res.data.createTime,
createName: res.data.createName,
}
// this.$message.success("保存成功");
if (type == "next") {
generatePdf(this.declareId).then((res) => {
if (res.code = 200) {
this.step2Loading = false;
this.$emit("clickLoading", false);
this.$message.success("保存成功");
this.goNextStepMethod();
} else {
this.step2Loading = false;
this.$message.error("DPF生成失敗");
}
})
// this.goNextStepMethod();
} else if (typeof type == "number") {
if(this.generateAutoPdf){
generatePdf(this.declareId).then((res) => {
if (res.code = 200) {
this.step2Loading = false;
this.$emit("clickLoading", false);
this.$message.success("保存成功");
this.goEditStep(type);
} else {
this.step2Loading = false;
this.$message.error("DPF生成失敗");
}
})
}else{
this.step2Loading = false;
this.$emit("clickLoading", false);
this.goEditStep(type);
}
}else{
this.$message.success("保存成功");
}
} else {
this.step2Loading = false;
this.msgWarning(res.msg);
}
this.$emit("clickLoading", false);
})
.catch(() => {
this.step2Loading = false;
this.$emit("clickLoading", false);
}).finally(() => {
this.step2Loading = false;
this.$emit("clickLoading", false);
})
},
// 编辑保存检核表信息
editCheckInfoSaveStep2(data, uploadFormData,type) {
if (type == "next") {
this.step2Loading = true;
} else if (typeof type == "number") {
this.$emit("clickLoading", true);
}
let formData = new FormData(); //formdata格式
formData.append("file", uploadFormData ? uploadFormData.file : null);
const blob=new Blob([JSON.stringify(data)],{ type:'application/json;charset=utf-8'});
formData.append("dto",blob)
declareCheckInfoUpdate(formData)
.then((res) => {
if (res.code == 200) {
if (type == "next" ) {
generatePdf(this.declareId).then((res)=>{
if(res.code=200){
this.step2Loading = false;
this.$emit("clickLoading", false);
this.$message.success("保存成功");
this.goNextStepMethod();
}else{
this.step2Loading = false;
this.$message.error("DPF生成失敗");
}
})
// this.$parent.generateAutoPdf();
} else if (typeof type == "number") {
if(this.generateAutoPdf){
generatePdf(this.declareId).then((res) => {
if (res.code = 200) {
this.step2Loading = false;
this.$emit("clickLoading", false);
// this.$message.success("保存成功");
this.goEditStep(type);
} else {
this.step2Loading = false;
this.$message.error("DPF生成失敗");
}
})
}else{
this.$emit("clickLoading", false);
this.goEditStep(type);
}
this.$message.success("保存成功");
// this.goEditStep(type);
}else{
this.$message.success("保存成功");
}
} else {
this.step2Loading = false;
this.msgWarning(res.msg);
}
})
.catch(() => {
this.step2Loading = false;
this.$emit("clickLoading", false);
}).finally(()=>{
this.step2Loading = false;
this.$emit("clickLoading", false);
})
},
// 编辑时要跳转到的页面
goEditStep(type) {
// this.$emit("setStepStates", ["finish2"], "");
this.$emit("setStepStates", ["finish2"], ["finish2"], "", "");
this.$emit("addNextStep", {
curStep: type,
declareId: this.declareId,
});
},
// 点击下一步时要跳转的页面
goNextStepMethod() {
this.$emit("setStepStates", ["finish2"], ["finish2"], "", "");
this.$emit("addNextStep", {
curStep: 3,
declareId: this.declareId,
});
},
// 编辑回填数据
editFillBackStep2(data) {
this.toHead('view-box');
if(data){
let cdl = data.customsDeclarationType;
this.typeFormData1 = {
customsDeclarationType: cdl ? cdl.includes("OTHER:") ? ["OTHER:"] : [cdl] : [],
taxRefundFormFlag: [data.taxRefundFormFlag],
otherData: cdl ? cdl.includes("OTHER:")
? data.customsDeclarationType.slice(6)
: "" : "",
};
// if(data.customsDeclarationType!=null){
// this.typeFormData1 = {
// customsDeclarationType: data.customsDeclarationType.includes("OTHER:")
// ? ["OTHER:"]
// : [data.customsDeclarationType],
// taxRefundFormFlag: data.taxRefundFormFlag==null ? [] : [data.taxRefundFormFlag],
// otherData: data.customsDeclarationType.includes("OTHER:")
// ? data.customsDeclarationType.slice(6)
// : "",
// };
// }
this.methodFormData = {
supervisoryNo: data.supervisoryNo,
originalImportEntryNo: data.originalImportEntryNo,
listOfMaterialsNo: data.listOfMaterialsNo,
};
let exportData = data.exportStatisticsMethod?.split(";");
if (exportData && exportData.length > 0) {
exportData.forEach((item, index, arr) => {
if (item.includes("OTHER:")) {
this.methodOtherData = item.slice(6);
arr[index] = "OTHER:";
}
});
}
this.exportStatisticsMethod = exportData || [];
this.methodAdditional = data.methodAdditional;
this.dateFormData = {
dayOfEntry: data.dayOfEntry,
chineseName: data.chineseName,
taxRules: data.taxRules,
customsDeclarationAmount: data.customsDeclarationAmount,
currencyCd: data.currencyCd,
createTime: data.createTime,
createName: data.createName,
};
this.brandFlag = data.brandFlag == 1 ? true : false;
this.brandFormData = {
brandTxt: data.brandTxt,
};
this.image = data.image;
this.propertyCertificate = data.propertyCertificate
? data.propertyCertificate.split(";")
: [];
this.ecfaPropertyCertificate = data.ecfaPropertyCertificate
? [data.ecfaPropertyCertificate]
: [];
this.ecfaFormData.ecfaPropertyCertificateNo =
data.ecfaPropertyCertificateNo;
this.applyFor = data.applyFor ? data.applyFor.split(";") : [];
this.createInfo = {
createTime: data.createTime,
createName: data.createName,
}
}
},
// 全部清除
clearFormStep2() {
this.typeFormData1.otherData="";
this.$refs.typeFormData1Ref.resetFields();
this.$refs.methodFormDataRef.resetFields();
this.$refs.dateFormDataRef.resetFields();
// this.$refs.brandFormDataRef.resetFields();
this.$refs.ecfaFormDataRef.resetFields();
//删除图片显示
this.$refs.uploadRef.removeImg();
this.brandFormData={}
this.imgBlob="";
this.exportStatisticsMethod = [];
this.methodOtherData = "";
this.methodAdditional = "";
this.brandFlag = false;
this.propertyCertificate = [];
this.ecfaPropertyCertificate = [];
this.applyFor = [];
this.handleCheckNo(false);
},
// 金额大于0时提示校验
blurCheckCycd() {
if (this.dateFormData.customsDeclarationAmount > 0) {
this.$refs.dateFormDataRef.validateField("currencyCd");
} else {
this.$refs.dateFormDataRef.clearValidate("currencyCd");
}
},
// 监管编号校验
validateSupervisoryNo(value) {
this.methodFormData.supervisoryNo = value
.toUpperCase()
.replace(/\s+/g, "");
if (this.methodFormData.supervisoryNo) {
this.$refs.methodFormDataRef.validateField("supervisoryNo");
}
},
// 商标勾选无时清空并禁用
handleCheckNo(val) {
if (val) {
this.logoDisabled = true;
this.logoTextDisabled = true;
this.brandFormData = {
brandTxt: "",
};
} else {
this.logoDisabled = false;
this.logoTextDisabled = false;
}
this.setImgBlob={file:null, imageSelect:1};
}, logoTextChange(val){
// if (val) {
// this.logoDisabled = true;
// this.logoCheckDisabled = true;
// this.brandFlag=false;
// } else {
// this.logoDisabled = false;
// this.logoCheckDisabled = false;
// }
},
// 复选框处理变成单选
handleCheckType1(val) {
if (val.length > 0) {
this.typeFormData1.customsDeclarationType = [val[val.length - 1]];
}
},
// 复选框处理变成单选
handleCheckType2(val) {
if (val.length > 0) {
this.typeFormData1.taxRefundFormFlag = [val[val.length - 1]];
}
},
// 复选框处理变成双选或单选
handleCheckType3(val) {
if (val.length > 0) {
if (val[val.length - 1] == "pc_no") {
if (val.includes("pc_yes")) {
this.propertyCertificate = val.filter((item) => item != "pc_yes");
}
} else if (val[val.length - 1] == "pc_yes") {
if (val.includes("pc_no")) {
this.propertyCertificate = val.filter((item) => item != "pc_no");
}
} else if (val[val.length - 1] == "pc_random") {
if (val.includes("pc_niRandom")) {
this.propertyCertificate = val.filter(
(item) => item != "pc_niRandom"
);
}
} else if (val[val.length - 1] == "pc_niRandom") {
if (val.includes("pc_random")) {
this.propertyCertificate = val.filter(
(item) => item != "pc_random"
);
}
}
}
},
// 复选框处理变成单选
handleCheckType5(val) {
if (val.length > 0) {
this.ecfaPropertyCertificate = [val[val.length - 1]];
}
if (this.ecfaPropertyCertificate[0] == "ecfa_no") {
this.ecfaFormData.ecfaPropertyCertificateNo = "";
this.certificateNoDisabled = true;
} else {
this.certificateNoDisabled = false;
}
},
// 关闭错误提示
errorTipClose() {
this.errorTip = [];
},
clearSlipId(){
this.slipId=null;
this.createInfo= {};
}
},
};
</script>
<style lang="scss" scoped>
.step-two-warp {
.step-name {
font-size: 20px;
font-weight: 600px;
margin-bottom: 20px;
i {
font-size: 32px;
vertical-align: -5px;
color: #4d148c;
margin-right: 12px;
}
}
.content {
width: 80%;
min-width: 676px;
margin: 0 auto;
.titles {
font-size: 12px;
line-height: 24px;
font-weight: 400;
text-align: center;
margin-bottom: 16px;
.title1 {
font-size: 22px;
font-weight: 500;
line-height: 36px;
}
.title3 {
color: #011993;
}
.title4 {
color: #ff4a2a;
}
}
.small-title {
line-height: 36px;
font-weight: 500;
}
.fedexFormStyle {
.nolabel-select {
::v-deep .el-input input {
padding-top: 0 !important;
}
::v-deep .el-input__inner{
&::placeholder{
color:rgb(0, 0, 0);
// line-height: 24px;
// font-weight: 400;
// font-size: 10px;
}
}
::v-deep input::-webkit-input-placeholder {
color: #fff;
}
}
}
.check-type-box {
background: rgba(228, 128, 36, 0.1);
border: 1px solid #e48024;
padding: 12px;
margin-bottom: 14px;
.fedexFormStyle .el-form-item {
background: #fff;
margin-top: 4px;
}
.type-form-box {
::v-deep .el-form-item__label {
height: 24px;
line-height: 24px;
font-size: 14px;
font-weight: 500;
color: #000000;
}
::v-deep .el-form-item__content {
line-height: 32px;
}
::v-deep .el-form-item {
margin: 0;
}
}
.check-auto {
.el-checkbox {
width: calc(100% / 4 - 30px);
}
}
.no-boder-input {
::v-deep .el-input {
width: 150px;
}
::v-deep .el-input__inner {
background-color: inherit;
border: none;
border-bottom: 1px solid #000;
height: 30px;
line-height: 30px;
}
}
.type-error {
::v-deep .el-form-item__error {
top: -22px;
left: 147px;
}
}
.tax-error {
::v-deep .el-form-item__error {
top: -22px;
left: 166px;
}
}
.checkbox-width50 {
line-height: 36px;
width: calc(100% / 2 - 30px);
}
.checkbox-9M {
margin-top:14px;
line-height: 36px;
// width: calc(100% / 2 - 30px);
// ::v-deep .el-checkbox__label {
// width: calc(100% - 24px);
// }
::v-deep .el-checkbox__input {
vertical-align: 70px;
}
}
.way-tip {
color: #999;
}
.height48 {
height: 48px;
::v-deep .el-checkbox__label {
line-height: 24px;
}
::v-deep .el-checkbox__input {
vertical-align: 16px;
}
}
.line-height48 {
margin-top: 13px;
::v-deep .el-checkbox__label {
vertical-align: 22px;
}
::v-deep .el-checkbox__input {
vertical-align: 69px;
}
}
.way-tip-bule {
// margin-top: 5px;
width: 100%;
height: 29px;
line-height: 29px;
background: #007ab71a;
color: #3478b2;
padding: 0 12px;
margin-bottom: 4px;
font-size: 12px;
}
}
.check-color {
::v-deep .el-checkbox {
color: #000000;
font-size: 12px;
}
::v-deep .el-checkbox__label {
font-size: 12px;
padding-left: 4px;
}
}
.trademark_color{
::v-deep .el-checkbox {
color: #000000;
}
}
.bottom-box {
padding: 12px;
background: #e480241a;
.fedexFormStyle .el-form-item {
background: #fff;
margin-top: 8px;
}
.checkbox-width80 {
.el-checkbox {
line-height: 36px;
width: 80px;
}
}
.checkbox-width80-tip {
margin-left: 5px;
background: #f479201a;
padding: 7px 8px;
color: #f47920;
font-size: 12px;
}
.checkbox-lineheight80 {
.el-checkbox {
line-height: 60px;
height: 60px;
width: 80px;
}
}
.check-inline-block {
::v-deep .el-checkbox-group {
display: inline-block;
}
}
}
}
.bg-textarea {
::v-deep .el-textarea .el-input__count {
background: #f2f2f2;
}
}
::v-deep .el-textarea__inner {
resize: none;
}
.el-tooltip__popper.is-dark {
top: -500px;
}
.textarea-box {
// margin-bottom: 5px;
::v-deep .el-form-item .el-form-item__content {
position: static !important;
.el-textarea {
.el-textarea__inner {
padding-bottom: 1.7rem;
}
}
}
.label {
font-size: 0.75rem;
font-weight: 700;
background-color: #f2f2f2;
color: #444;
height: max-content;
// padding: 0.6rem 0 0 0.6rem;
line-height: 25px;
}
}
.tipText{
margin-top: 3px;
padding: 0 0.9375rem;
font-size: 0.75rem;
color: #de002e;
}
}
</style>
<template>
<el-dialog
:title="titleText"
:visible.sync="dialogVisible"
width="50%"
:show-close="false"
class="tem-dialog"
:close-on-click-modal="false"
>
<div v-if="!dialogEditVisible">
<div>
<div class="entryInsertButton">
<el-button
@click.native.stop="insertTem()"
>
{{ $t("fillIn.insterTem") }}
</el-button>
</div>
<div class="sreachBox">
<el-input
class="fedexRadiusInput search-width"
v-model="templateName"
placeholder="請輸入使用者名稱"
@blur="templateName = $event.target.value.trim()"
>
<el-button
slot="append"
icon="el-icon-search"
@click="searchTemList"
></el-button>
</el-input>
</div>
<Table
class="fedexDetialTable mt20"
:data="tableData"
:headerData="headerData"
:selection="false"
height="350px"
:order="false"
:border="false"
:selectFixed="false"
:pagination="false"
:pageSizes="[20, 30, 50, 100]"
:loading="tableLoading"
:scroll="scroll"
:infiniteScroll="true"
>
<!-- <template v-slot:edit="scope">
</template> -->
<template v-slot:del="scope">
<el-button
class="plain"
size="mini"
@click.native.stop="editTem(scope.row)"
>編輯</el-button
>
<el-popover
placement="bottom"
width="160"
v-model="scope.row.deleteVisible">
<p>是否確認刪除？</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="scope.row.deleteVisible = false">取消</el-button>
<el-button type="text" size="mini" @click="deleteTem(scope.row)">確定</el-button>
</div>
<el-button size="mini" slot="reference">刪除</el-button>
</el-popover>
<!-- <el-button size="mini" @click.native.stop="deleteTem(scope.row)"
>刪除</el-button> -->
</template>
</Table>
</div>
<div class="dialogOption entrySave">
<!-- <el-button
class="entrySaveButton entrySaveButton-background"
:disabled="useDisabled"
@click="useTemplate"
>
{{ $t("common.useBtn") }}
</el-button> -->
<el-button class="entrySaveButton" style="margin-top: 20px;" @click="closeDialog">
{{ $t("common.closeBtn") }}
</el-button>
</div>
</div>
<!-- 新增 、修改 -->
<div v-if="dialogEditVisible">
<el-form
class="fedexFormStyle"
ref="formDialogDataRef"
:model="formData"
:rules="rules"
label-position="top"
>
<el-row :gutter="10">
<el-col :span="12">
<Formitem :label="$t('fillIn.placeholder')" type="edit" prop="templateName">
<el-input
type="text"
:id="'inputInner-edit-templateName'"
v-model="formData.templateName"
:disabled="saveBtnText == '更新'"
maxlength="20"
>
</el-input>
</Formitem>
</el-col>
<el-col :span="12">
<Formitem :label="$t('fillIn.contacts')" type="edit" prop="liaisons">
<el-input
type="text"
:id="'inputInner-edit-liaisons'"
maxlength="18"
v-model="formData.liaisons"
>
</el-input>
</Formitem>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<Formitem
:label="$t('fillIn.exporterNum')"
type="edit"
prop="consigneeNo"
>
<el-input
type="text"
:id="'inputInner-edit-consigneeNo'"
maxlength="12"
oninput="this.value = this.value.replace(/\s+/g, '')"
v-model="formData.consigneeNo"
>
</el-input>
</Formitem>
</el-col>
<el-col :span="12">
<Formitem :label="$t('fillIn.email')" type="edit" prop="email">
<el-input
type="text"
:id="'inputInner-edit-email'"
v-model="formData.email"
maxlength="50"
>
</el-input>
</Formitem>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="8">
<Formitem :label="$t('fillIn.phone1')" type="edit" prop="tel">
<el-input
type="text"
:id="'inputInner-edit-tel'"
maxlength="19"
v-model="formData.tel"
>
</el-input>
</Formitem>
</el-col>
<el-col :span="8">
<Formitem
:label="$t('fillIn.phone2')"
type="edit"
prop="extensionTel"
>
<el-input
type="text"
:id="'inputInner-edit-extensionTel'"
maxlength="10"
v-model="formData.extensionTel"
>
</el-input>
</Formitem>
</el-col>
<el-col :span="8">
<Formitem :label="$t('fillIn.phone3')" type="edit" prop="phone">
<el-input
type="text"
:id="'inputInner-edit-phone'"
maxlength="34"
v-model="formData.phone"
>
</el-input>
</Formitem>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="textarea-box">
<el-form-item
:label="$t('fillIn.indicate')"
prop="customsClearanceInstruction"
class="label"
>
<el-input
type="textarea"
:rows="6"
v-model="formData.customsClearanceInstruction"
show-word-limit
maxlength="1200"
>
</el-input>
</el-form-item>
</div>
</el-col>
</el-row>
</el-form>
<div align="center" style="margin-top: 40px;">
<div class="dialogOption entrySave">
<el-button
class="entrySaveButton entrySaveButton-background"
@click="checkTempName"
:loading="updateLoading"
>
{{ saveBtnText }}
</el-button>
<el-button class="entrySaveButton" @click="closeEditDialog">
{{ $t("common.cancleBtn") }}
</el-button>
</div>
</div>
</div>
</el-dialog>
</template>
<script>
import { deleteTemById, findTempListByName, getTemById , updateTemplate, getTemByTemName, addSaveTemplate } from "@/api/fillForm.js";
export default {
components: {},
props: {},
data() {
return {
dialogVisible: false,
dialogEditVisible:false,
tableLoading:false,
titleText:"管理使用者",
tableData: [],
headerData: [
// {
// name: "",
// value: "checked",
// width: "60",
// align: "center",
// slot: true,
// },
{
name: "使用者名稱",
value: "templateName",
width: "",
align: "left",
},
{
name: "操作",
value: "del",
width: "200",
align: "center",
slot: true,
},
],
currentRow: {},
templateName: "",
useDisabled: true,
updateLoading: false,
tempId: null,
saveBtnText: "保存",
formData: {
templateName: "",
liaisons: "",
consigneeNo: "",
email: "",
tel: "",
extensionTel: "",
phone: "",
customsClearanceInstruction: "",
},
currentPage:1,
};
}, computed: {
rules() {
let rules = {
liaisons: [
{ required: true, message: "請您輸入聯絡人", trigger: "blur" },
{
validator: (rule, value, callback) => {
// var a= this.regExp.checkText(this.regExp.nameExp,value);
if (!this.regExp.nameExp.test(value)) {
callback(
"請您使用中文、英文或空格的組合，不能包含特殊字元。"
);
} else if (value.length > 30) {
callback(
"聯絡人姓名最多可包含30個字元，而您輸入了" +
value.length +
"個字元。"
);
} else {
callback();
}
},
trigger: "blur",
},
], templateName: [
{ required: true, message: "請您輸入使用者名稱", trigger: "blur", },
{
validator: (rule, value, callback) => {
if (value && !this.regExp.templateName.test(value)) {
callback("請您使用中文、數字、英文、下劃線或中橫線的組合。");
} else {
callback();
}
},
trigger: "blur",
},
],
consigneeNo: [
{
required: true,
message: "請您輸入貨物輸出統一編號",
trigger: "blur",
},
{
validator: (rule, value, callback) => {
if (!this.regExp.expNumENExp.test(value)) {
callback("請您輸入統一編號，中間不要有空格。");
} else {
callback();
}
},
trigger: "blur",
},
],
email: [
{ required: true, message: "請您輸入郵箱", trigger: "blur" },
{
validator: (rule, value, callback) => {
if (!this.regExp.email.test(value.trim())) {
callback("您輸入的郵件格式有錯誤。");
} else if (this.regExp.emailPattern.test(value.trim())) {
callback("郵箱地址不允許存在特殊字符以及空格！");
} else {
this.formData.email=this.formData.email.trim();
callback();
}
},
trigger: "blur",
},
],
tel: [
{ required: true, message: "請您輸入聯絡電話", trigger: "blur" },
{
validator: (rule, value, callback) => {
if (!this.regExp.phoneNumExp.test(value)) {
callback("請您輸入有效的聯絡電話，不能包含字母和漢字。");
// } else if (value.length > 40) {
// callback(
// "聯絡電話最多可包含40個字元，而您輸入了" +
// value.length +
// "個字元。"
// );
}
else {
callback();
}
},
trigger: "blur",
},
],
extensionTel: [
{
required: false,
validator: (rule, value, callback) => {
if (value) {
if (!this.regExp.phoneNumExp.test(value)) {
callback("請您輸入有效的分機號碼，不能包含字母和漢字。");
}
// else if (value.length > 10) {
// callback(
// "分機最多可包含10個字元，而您輸入了" +
// value.length +
// "個字元。"
// );
// }
else {
callback();
}
} else {
callback();
}
},
trigger: "blur",
},
],
phone: [
{
validator: (rule, value, callback) => {
if (value) {
if (!this.regExp.phoneNumExp.test(value)) {
callback("請您輸入有效的行動電話，不能包含字母和漢字。");
}
// else if (value.length > 40) {
// callback(
// "xxx" +
// value.length +
// "個字元。"
// );
// }
else {
callback();
}
} else {
callback();
}
},
trigger: "blur",
},
],
};
this.$forceUpdate(() => {
this.$refs["formDialogDataRef"].clearValidate();
});
return rules;
},
},
watch:{
dialogEditVisible(val){
if(val){
if(this.tempId){
this.titleText=this.$t("fillIn.updateTem");
}else{
this.titleText = this.$t("fillIn.insterTem");
}
}else{
this.titleText = this.$t("fillIn.manageTem");
}
}
},
methods: {
openDialog() {
this.initData()
this.dialogVisible = true;
this.findCurTemList();
},
closeDialog() {
this.$parent.getTempListByName();
this.dialogVisible = false;
this.templateName=null;
this.dialogEditVisible=false;
},
closeEditDialog(){
this.tempId=null;
this.dialogEditVisible=false;
},
editTem(row) {
this.getTempInfo(row, "editTem");
}, insertTem() {
this.getTempInfo(null, "insertTem");
},
scroll(e) {
const {target} = e
const {scrollHeight, scrollTop, scrollLeft, clientHeight} = target
const tobody = document.querySelector('.el-table .el-table__body-wrapper .el-table__body')
if (scrollTop > 0 && scrollTop + clientHeight + 1 >= tobody.clientHeight) {
this.currentPage = this.currentPage + 1
this.findCurTemList()
}
},
findCurTemList() {
this.tableLoading=true;
let data = { page: this.currentPage, size: 10, templateName: this.templateName }
findTempListByName(data)
.then((res) => {
if (res.code == 200) {
for (let index in res.data) {
res.data[index].checked = false;
}
if (res.data.length != 0) {
this.tableData = this.tableData.concat(res.data);
}
if(this.tableData!=null){
this.tableData = this.tableData.map(item => {
return {
...item,
deleteVisible: false
};
});
}
this.tableLoading = false;
} else {
this.msgWarning(res.msg);
}
})
.catch(() => {});
},
deleteTem(row) {
row.deleteVisible = false;
deleteTemById(row.id)
.then((res) => {
if (res.code == 200) {
this.$message.success("刪除成功");
this.initData()
this.findCurTemList();
} else {
this.msgWarning(res.msg);
}
})
.catch(() => {});
},
getTempInfo(row, type) {
if(type=="editTem" || type == "useTem"){
getTemById(row.id)
.then((res) => {
if (res.code == 200) {
// if (type == "useTem") {
// this.$emit("useTemp", res.data, "dialog");
// this.dialogVisible = false;
// } else {
this.dialogEditVisible=true;
this.editFillBackInfo(res.data);
this.tempId=res.data.id;
// this.$emit("editTemBtn", res.data);
// }
} else {
this.msgWarning(res.msg);
}
})
.catch(() => { });
}else{
this.tempId = null;
this.formData = {};
this.saveBtnText = "保存";
this.dialogEditVisible = true;
// this.$emit("editTemBtn", null);
}
},
// 改选行
changeCurrentRow(val, rowIndex, row) {
const data = this.tableData;
//遍历表格的数据，将非本行的所有数据的checked属性置为false，即取消选择
for (let index in data) {
if (index == rowIndex) {
data[index].checked = val;
} else {
data[index].checked = false;
}
}
this.tableData = data;
this.currentRow = row;
if (row.checked) {
this.useDisabled = false;
} else {
this.useDisabled = true;
}
},
searchTemList() {
this.initData();
this.findCurTemList();
},
useTemplate() {
this.getTempInfo(this.currentRow, "useTem");
},
//修改新增
editFillBackInfo(data) {
if (data) {
this.saveBtnText = "更新";
this.formData = {
liaisons: data.liaisons,
consigneeNo: data.consigneeNo,
email: data.email,
tel: data.tel,
extensionTel: data.extensionTel,
phone: data.phone,
customsClearanceInstruction: data.customsClearanceInstruction,
templateName: data.templateName,
};
} else {
this.tempId=null;
this.formData = {};
this.saveBtnText = "保存";
}
},// 检查模板是否重复
checkTempName() {
this.$refs.formDialogDataRef.validate((valid) => {
if (valid) {
getTemByTemName(this.formData.templateName)
.then((res) => {
if (res.code == 200) {
this.addTemplate();
this.tempId = null;
this.formData = {};
} else {
if (this.saveBtnText == '保存') {
this.$confirm(this.$t("fillIn.template.confirmCoverTemplate"), "提示", {
confirmButtonText: this.$t("common.sureBtn"),
cancelButtonText: this.$t("common.cancleBtn"),
type: "warning",
}).then(() => {
this.tempId = res.data.id;
this.updateTemp(this.formData);
this.tempId = null;
this.formData = {};
this.dialogEditVisible = false;
});
} else {
this.tempId = res.data.id;
this.updateTemp(this.formData);
this.dialogEditVisible = false;
}
}
})
.catch((res) => {
this.$message.error(res);
});
}
});
},
updateTemp() {
let paramsData = {
...this.formData,
id: this.tempId,
};
this.$refs.formDialogDataRef.validate((valid) => {
if (valid) {
this.updateLoading = true;
updateTemplate(paramsData)
.then((res) => {
if (res.code == 200) {
this.initData()
this.findCurTemList();
this.$message.success("保存成功");
// this.$emit("updateSearch");
} else {
this.msgWarning(res.msg);
}
this.updateLoading = false;
})
.catch(() => {
this.updateLoading = false;
});
}
});
},// 新增模板
addTemplate() {
let paramsData = {
...this.formData,
};
addSaveTemplate(paramsData)
.then((res) => {
if (res.code == 200) {
this.initData()
this.findCurTemList();
this.$message.success("保存成功");
} else {
this.msgWarning(res.msg);
}
this.dialogEditVisible = false;
})
.catch(() => {
this.dialogEditVisible = false;
});
},
initData() {
this.currentPage = 1
this.tableData = []
}
},
};
</script>
<style lang="scss" scoped>
.plain {
border-radius: 0;
border-color: #dfe6ec;
color: #515a6e;
margin-right: 15px;
}
.plain:hover {
background: #007ab7;
color: #fff;
}
::v-deep .el-dialog {
padding: 20px 50px;
}
::v-deep .el-dialog__header {
text-align: center;
}
.sreachBox {
text-align: center;
.search-width {
width: 60%;
}
}
::v-deep .el-table__body-wrapper .el-table__body tbody tr {
height: 50px;
}
::v-deep .el-table th > .cell .el-checkbox {
display: none;
background: none;
}
::v-deep .el-table .el-table__fixed-header-wrapper th {
background: none;
}
.entrySaveButton-background {
margin-right: 44px;
}
.entryInsertButton {
margin: -25px 0 20px 0;
text-align: center;
}
.textarea-box {
// margin-bottom: 5px;
::v-deep .el-form-item .el-form-item__content {
position: static !important;
}
.label {
font-size: 0.75rem;
font-weight: 700;
background-color: #f2f2f2;
color: #444;
height: max-content;
// height: 9.7rem;
// padding: 0.6rem 0 0 0.6rem;
// padding: 10px;
line-height: 25px;
}
::v-deep .el-textarea .el-textarea__inner{
padding: 20px;
margin: 10px 0;
}
}
</style>
<template>
<el-dialog
title="下載附件"
:visible.sync="dialogVisible"
width="50%"
:show-close="true"
class="detail-dialog"
>
<Table
class="fedexDetialTable mt20"
:data="tableData"
:headerData="headerData"
:selection="false"
height="400px"
:order="false"
:border="false"
:pagination="false"
:selectFixed="false"
:pageSizes="[20, 30, 50, 100]"
@selectionChange="handleSelectionChange"
:loading="tableLodaing"
>
<template v-slot:name="scope">
<p> {{ scope.row.name }}{{ scope.row.type }}</p>
</template>
<template v-slot:down="scope">
<el-button
class="plain"
size="mini"
@click.native.stop="downLoadOneFile(scope.row)"
:loading="scope.row.downloadLoading"
>下載</el-button
>
</template>
</Table>
<div class="width-btn-box">
<el-button
class="entrySaveButton entrySaveButton-background"
@click="batchDownloadBtn"
style="margin-right: 30px;width: 110px;"
:loading="allDownload"
:disabled="this.tableData<=0"
>
下載全部
</el-button>
<el-button class="entrySaveButton" style="width: 110px;" @click="closeDialog">取消</el-button>
</div>
</el-dialog>
</template>
<script>
import { getFindSysByDeclareId } from "@/api/fillForm.js";
import { downLoadZip,downLoadFile } from "@/utils/zipdownload";
export default {
components: {},
props: {},
data() {
return {
tableLodaing:false,
allDownload:false,
dialogVisible: false,
declareId: null,
tableData: [],
headerData: [
{
name: "附件名稱",
value: "name",
width: "",
align: "left",
slot: true,
},
{
name: "操作",
value: "down",
width: "100",
align: "center",
slot: true,
},
],
selectCheckList: [],
customsFileId: null,
};
},
methods: {
// 打开弹窗
openDialog(row) {
this.dialogVisible = true;
this.declareId = row.id;
this.customsFileId = row.customsFileId;
this.getUploadFileList();
},
// 关闭弹窗
closeDialog() {
this.dialogVisible = false;
},
// 选择下载的附件
handleSelectionChange(val) {
this.selectCheckList = val;
},
// 下载
downLoadOneFile(fileRow) {
fileRow.downloadLoading=true;
downLoadFile(
"/icleartw/cusFile/downLoadFile",
fileRow.id,
fileRow.name+ fileRow.type
).then(() => {
this.$message.success("下載成功");
this.exportLoading = false;
})
.catch(() => {
this.exportLoading = false;
}).finally(()=>{
fileRow.downloadLoading = false;
})
},
// 批量下载
batchDownloadBtn() {
this.allDownload=true;
downLoadZip(
"/icleartw/cusFile/downLoadCusFileAll",
this.customsFileId,
"附件"
)
.then(() => {
this.allDownload = false;
this.exportLoading = false;
})
.catch(() => {
this.exportLoading = false;
});
},
// 获取文件列表
getUploadFileList() {
this.tableData=[];
this.tableLodaing=true;
getFindSysByDeclareId(this.declareId).then((res) => {
if (res.code == 200) {
this.tableData = res.data;
if (this.tableData != null) {
this.tableData = this.tableData.map(item => {
return {
...item,
downloadLoading: false
};
});
}
}else{
this.$message.error(res.msg);
}
}).catch((res)=>{
this.$message.error(res.msg);
}).finally(()=>{
this.tableLodaing = false;
})
},
},
};
</script>
<style lang="scss" scoped>
.detail-dialog {
.title-box {
font-size: 16px;
font-weight: 600;
// line-height: 22px;
color: #000000;
display: flex;
justify-content: space-between;
.el-button {
padding: 0;
font-size: 12px;
}
}
.content {
color: #333;
font-size: 12px;
.small-title {
margin: 12px 0 4px 0;
font-size: 14px;
}
.info-box {
width: 100%;
height: 50px;
line-height: 17px;
background: #f2f2f2;
padding: 8px;
margin-bottom: 4px;
}
}
.download {
.el-button {
padding: 0;
font-size: 12px;
}
img {
vertical-align: -4px;
}
}
::v-deep .el-dialog {
padding: 20px 100px;
}
::v-deep .el-dialog__header {
text-align: center;
}
.width-btn-box {
width: 100%;
text-align: center;
margin-top: 16px;
.el-button {
width: 100px;
}
}
::v-deep .el-table__body-wrapper .el-table__body tbody tr {
height: 50px;
}
}
</style>
<template>
<div class="search-wrap">
<div class="search-box">
<el-form
class="fedexFormStyle queryTextarea-box"
ref="sreachForm"
:model="sreachFormData"
label-position="top"
size="small"
:rules="rules"
>
<el-row :gutter="6">
<el-col :span="5">
<Formitem label="提單號碼（支持多個提單號查詢）" prop="deliveryNo">
<!-- <el-input
type="text"
id="inputInner--deliveryNo"
v-model="sreachFormData.deliveryNo"
clearable
>
</el-input> -->
<el-input
type="textarea"
class="inputShadow"
id="inputInner--deliveryNo"
resize="none"
:rows="consignmentCodeRows"
v-model="sreachFormData.deliveryNo"
clearable
placeholder=""
@focus="consignmentCodeFocus"
@blur="consignmentCodeBlur"
></el-input>
<el-badge
v-if="
consignmentCodeRows == 1 &&
sreachFormData.consignmentCode.length > 1
"
type="info"
:value="`+${sreachFormData.consignmentCode.length}`"
class="item texttareaTip"
></el-badge>
</Formitem>
</el-col>
<el-col :span="4">
<Formitem label="提交時間(從)" prop="commitTimeFrom">
<el-date-picker
v-model="sreachFormData.commitTimeFrom"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
type="date"
id="inputInner--commitTimeFrom"
placeholder=""
prefix-icon="none"
@change="checkDate1"
></el-date-picker>
<!-- :picker-options="startPickerOptions"> -->
<!-- </el-date-picker> -->
</Formitem>
</el-col>
<el-col :span="4">
<Formitem label="提交時間(至)" prop="commitTimeTo">
<el-date-picker
v-model="sreachFormData.commitTimeTo"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
type="date"
id="inputInner--commitTimeTo"
placeholder=""
prefix-icon="none"
@change="checkDate2"
></el-date-picker>
<!-- :picker-options="endPickerOptions">
</el-date-picker> -->
</Formitem>
</el-col>
<el-col :span="2" class="search-btn">
<el-button @click="searchTable">
<img src="../../assets/images/select.svg" alt="" />
</el-button>
</el-col>
</el-row>
</el-form>
<span class="textCenter export-btn">
<el-button
class="entrySaveButton"
:loading="exportLoading"
@click="exportBtn()"
>
導出
</el-button>
</span>
</div>
<el-table
:data="tableData"
style="width: 100%"
:height="tableMaxheight"
:row-class-name="tableRowClassName"
v-loading="tableLoading"
class="queryTable"
@sort-change="handleSortChange"
>
<el-table-column
v-for="(item, index) in tableHeaderList"
:key="index"
:prop="item.prop"
:label="item.label"
:min-width="item.width"
:fixed="item.fixed ? item.fixed : false"
:align="item.align"
:sortable="item.sort"
>
<template slot-scope="scope">
<template v-if="item.tem == 'operStatusAndTime1'">
<div>
{{ scope.row.operStatus }}
</div>
<div>
{{ scope.row.commitTime }}
</div>
</template>
<!-- 传送时间 -->
<template v-else-if="item.tem == 'delStatus'">
<div class="query_page_popover">
<el-popover
v-if="scope.row.failedMsg"
trigger="hover"
placement="bottom"
:open-delay="1000"
>
<p>{{ scope.row.failedMsg }}</p>
<div slot="reference" class="name-wrapper">
{{ scope.row.delStatusAndTime }}
</div>
</el-popover>
<span v-else>{{ scope.row.delStatusAndTime }}</span>
</div>
</template>
<!-- 是否適用在目的地進口清關 -->
<template v-else-if="item.tem == 'isClear'">
<span v-if="scope.row.isClear == 0"> N </span>
<span v-else-if="scope.row.isClear == 1">Y</span>
</template>
<!-- 操作 -->
<template v-else-if="item.tem == 'opt'">
<el-dropdown trigger="click">
<span style="cursor: pointer">
<img src="../../assets/images/declareOpt.png" alt="" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="viewDeclare(scope.row)">
查看
</el-dropdown-item>
<el-dropdown-item
v-if="scope.row.operStatus == '已提交'"
@click.native="reEditDeclare(scope.row)"
>
重新编辑
</el-dropdown-item>
<el-dropdown-item v-else @click.native="editDeclare(scope.row)">
編輯
</el-dropdown-item>
<el-dropdown-item
:disabled="scope.row.operStatus == '已提交'"
@click.native="deleteDeclare(scope.row)"
>
刪除
</el-dropdown-item>
<el-dropdown-item @click.native="downloadFiles(scope.row)"
>下載附件</el-dropdown-item
>
</el-dropdown-menu>
</el-dropdown>
</template>
<span v-else>{{ scope.row[item.prop] }}</span>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page.curPage"
:page-sizes="[20, 30, 50, 100]"
:page-size="page.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="page.total"
>
</el-pagination>
<detail-dialog ref="detailDialogRef"></detail-dialog>
<detail-drawer
ref="detailDrawerRef"
:pageIndex="pageIndex"
@viewPdf="openViewPdf"
></detail-drawer>
</div>
</template>
<script>
import {
getTableFindAll,
declareDeleteById,
reedit,
} from "@/api/declareTable.js";
import detailDrawer from "../declarationInput/detailDrawer.vue";
import detailDialog from "./detailDialog.vue";
import { tableHeaderKeys } from "./tableHeaderKey.js";
import { downLoadXlsx, downLoadViewPdf } from "@/utils/zipdownload";
export default {
name: "declareQuery",
components: {
detailDialog,
detailDrawer,
},
data() {
return {
pageIndex: "query",
tableData: [], //运单数据
tableHeaderList: tableHeaderKeys,
sreachFormData: {
deliveryNo: "",
commitTimeFrom: "",
commitTimeTo: "",
consignmentCode: [],
},
oldSreachFormData: {
deliveryNo: "",
commitTimeFrom: "",
commitTimeTo: "",
consignmentCode: [],
},
startDate: new Date() - 3,
endDate: new Date(),
page: {
curPage: 1,
pageSize: 20,
total: 0, //数据总和
},
tableSelect: true,
tableLoading: false, //表格loading
exportLoading: false,
defQuery: 0,
consignmentCodeRows: 1,
startPickerOptions: {
disabledDate: (time) => {
if (
this.sreachFormData.commitTimeTo != "" &&
this.sreachFormData.commitTimeTo != null
) {
let commitTimeTo = new Date(
this.sreachFormData.commitTimeTo
).getTime();
return time.getTime() > commitTimeTo;
} else {
return !time.getTime();
}
},
},
endPickerOptions: {
disabledDate: (time) => {
if (
this.sreachFormData.commitTimeFrom != "" &&
this.sreachFormData.commitTimeFrom != null
) {
let commitTimeFrom = new Date(
this.sreachFormData.commitTimeFrom
).getTime();
return time.getTime() < commitTimeFrom - 24 * 60 * 60 * 1000;
} else {
return !time.getTime();
}
},
},
sortOrder: 0, //查询排序 默认根据操作状态呢降序排序
};
},
computed: {
tableMaxheight() {
return window.innerHeight - 300;
},
getOldDate() {
let oldDate = new Date(new Date().getTime() - 3600 * 1000 * 24 * 2);
return (
oldDate.getFullYear() +
"-" +
(oldDate.getMonth() + 1).toString().padStart(2, 0) +
"-" +
oldDate.getDate().toString().padStart(2, 0)
);
},
getNewDate() {
let nowDate = new Date();
return (
nowDate.getFullYear() +
"-" +
(nowDate.getMonth() + 1).toString().padStart(2, 0) +
"-" +
nowDate.getDate().toString().padStart(2, 0)
);
},
rules() {
let rules = {
commitTimeFrom: [
{
validator: (rule, value, callback) => {
if (!value) {
this.$refs.sreachForm.clearValidate(["commitTimeTo"]);
this.tableSelect = true;
}
// new Date(year, month, day, hour, minute, second, millisecond);
if (value && this.sreachFormData.commitTimeTo) {
if (
new Date(value + " 00:00:00").getTime() >
new Date(
this.sreachFormData.commitTimeTo + " 00:00:00"
).getTime()
) {
callback("開始時間不能晚於截止時間");
this.tableSelect = false;
} else {
callback();
this.tableSelect = true;
}
}
},
trigger: "change",
},
],
commitTimeTo: [
{
validator: (rule, value, callback) => {
if (!value) {
this.$refs.sreachForm.clearValidate(["commitTimeFrom"]);
this.tableSelect = true;
}
if (value && this.sreachFormData.commitTimeFrom) {
if (
new Date(value + " 00:00:00").getTime() <
new Date(
this.sreachFormData.commitTimeFrom + " 00:00:00"
).getTime()
) {
callback("截止時間不能早於開始時間");
this.tableSelect = false;
} else {
callback();
this.tableSelect = true;
}
}
},
trigger: "change",
},
],
};
return rules;
},
},
created() {},
mounted() {
// let oldDate = new Date(new Date().getTime() - 3600 * 1000 * 24 * 2);
// let nowDate = new Date();
this.sreachFormData.commitTimeFrom = this.getOldDate;
this.sreachFormData.commitTimeTo = this.getNewDate;
// this.$set(this.sreachFormData,'commitTimeFrom', );
// this.$set(this.sreachFormData,'commitTimeTo', nowDate.getFullYear() + '-' + (nowDate.getMonth()+1) + '-' + (nowDate.getDate()));
this.sreachData(null);
},
methods: {
// 查询
sreachData(paramsData) {
// this.$refs["sreachForm"].validate((valid, object) => {
if (this.tableSelect) {
if (!paramsData) {
paramsData = {
...this.sreachFormData,
deliveryNo: this.sreachFormData.consignmentCode.join(";"),
page: this.page.curPage,
query: this.defQuery,
size: this.page.pageSize,
sort: this.sortOrder,
};
this.oldSreachFormData = {
...this.sreachFormData,
};
}
if (paramsData.deliveryNo.split(";").length > 1000) {
this.$alert("單次最多可查詢1000個提單號碼", "提示", {
confirmButtonText: "確定",
type: "warning",
});
return;
} else {
this.tableLoading = true;
delete paramsData.consignmentCode;
getTableFindAll(paramsData)
.then((res) => {
if (res.code == 200) {
this.tableData = res.data.list;
this.page.total = res.data.total;
} else {
this.msgWarning(res.msg);
}
})
.finally(() => {
this.tableLoading = false;
});
}
}
// });
},
checkDate1() {
this.$refs.sreachForm.validateField("commitTimeFrom", (valid) => {
if (!valid) {
this.$refs.sreachForm.validateField("commitTimeTo");
}
});
},
checkDate2() {
this.$refs.sreachForm.validateField("commitTimeTo", (valid) => {
if (!valid) {
this.$refs.sreachForm.validateField("commitTimeFrom");
}
});
},
// column 当前列数据 prop 当前排序的字段 order 排序规则
handleSortChange({ column, prop, order }) {
if (prop == "operStatusAndTime1") {
this.sortOrder = order ? (order == "descending" ? 2 : 1) : 0;
} else if (prop == "delStatus") {
this.sortOrder = order ? (order == "descending" ? 4 : 3) : 0;
}
this.page.curPage = 1;
let paramsData = {
...this.oldSreachFormData,
page: this.page.curPage,
query: this.defQuery,
size: this.page.pageSize,
sort: this.sortOrder,
};
this.sreachData(paramsData);
},
// 查询按钮
searchTable() {
this.page.curPage = 1;
this.defQuery = "";
this.sreachData(null);
},
// 改变偶数行背景色
tableRowClassName({ row, rowIndex }) {
if ((rowIndex + 1) % 2 === 0) {
return "bgc-row";
}
return "";
},
//操作
deleteDeclare(row) {
this.$confirm("是否確認刪除", "提示", {
confirmButtonText: "確定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
declareDeleteById(row.id).then((res) => {
if (res.code == 200) {
this.$message({
type: "success",
message: "刪除成功!",
});
this.sreachData(null);
} else {
this.msgWarning(res.msg);
}
});
})
.catch(() => {
// this.$message({
// type: 'info',
// message: '刪除失敗'
// });
});
},
// 改变页面条数
handleSizeChange(val) {
this.page.pageSize = val;
this.sreachData(null);
},
// 切换页码
handleCurrentChange(val) {
this.page.curPage = val;
this.sreachData(null);
},
// 导出
exportBtn() {
let paramsData = {
...this.oldSreachFormData,
query: this.defQuery,
sort: this.sortOrder,
};
this.exportLoading = true;
downLoadXlsx("/icleartw/declare/export", paramsData, "提單表")
.then(() => {
this.$message.success("導出成功");
this.exportLoading = false;
})
.catch(() => {
this.exportLoading = false;
});
},
// 查看
viewDeclare(row) {
this.$refs.detailDrawerRef.openDrawer(row, "table");
},
// 下载附件
downloadFiles(row) {
this.$refs.detailDialogRef.openDialog(row);
},
// 编辑
editDeclare(row) {
this.$router
.push({
name: "declarationInput",
params: {
step: JSON.stringify(row.saveStep),
id: JSON.stringify(row.id),
},
})
.catch(() => {});
},
//重新编辑
reEditDeclare(row) {
this.$store.dispatch("AppLoading", true);
reedit(row.id)
.then((res) => {
if ((res.code = 200)) {
this.$router
.push({
name: "declarationInput",
params: {
step: 1,
id: JSON.stringify(res.data.id),
},
})
.catch(() => {});
} else {
$message.error(res.msg);
}
})
.catch(() => {})
.finally(() => {
this.$store.dispatch("AppLoading", false);
});
},
//文本域切换
consignmentCodeFocus() {
this.consignmentCodeRows = 5;
this.$nextTick(() => {
let inputInner = document.querySelector(
"#inputInner--deliveryNo"
).parentNode;
let inputOuter = document.querySelector("#inputOuter--deliveryNo");
inputInner.classList.add("consignmentCode-textarea");
document.querySelector("#inputInner--deliveryNo").focus();
setTimeout(() => {
inputOuter.classList.add("active");
inputOuter.classList.add("activeBorder");
}, 100);
});
},
consignmentCodeBlur(val) {
this.consignmentCodeRows = 1;
this.$nextTick(() => {
let inputInner = document.querySelector(
"#inputInner--deliveryNo"
).parentNode;
inputInner.classList.remove("consignmentCode-textarea");
});
this.sreachFormData.consignmentCode = val.target.value.split("\n");
let arr = [];
this.sreachFormData.consignmentCode.forEach((item) => {
if (item != "" && item != null) {
arr.push(item);
}
});
this.sreachFormData.consignmentCode = arr;
}, // 查看pdf
openViewPdf(file) {
file.findLoading = true;
downLoadViewPdf(
"/icleartw/cusFile/previewFile",
{ fileId: file.id },
file.name + file.type
)
.then(() => {})
.finally(() => {
file.findLoading = false;
});
},
},
};
</script>
<style>
.el-dropdown-menu__item.is-disabled {
color: #bbb;
}
</style>
<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";
.search-wrap {
height: calc(100% - 28px);
margin: 12px 12px 16px 16px;
background-color: #fff;
padding: 20px;
.search-box {
margin-bottom: 12px;
position: relative;
.export-btn {
position: absolute;
right: 12px;
top: 0;
}
}
::v-deep .el-table .bgc-row {
background: #f2f2f2;
}
.el-pagination {
text-align: right;
margin-top: 10px;
::v-deep .el-input.is-focus .el-input__inner {
border: 1px solid $fedexColor;
}
::v-deep .el-input .el-input__inner:hover {
border: 1px solid $fedexColor;
}
::v-deep .el-input__inner:focus {
border: 1px solid $fedexColor;
}
::v-deep .el-pager li.active {
color: $fedexColor;
}
::v-deep .el-pager li:hover {
color: $fedexColor;
}
}
// .el-table__body-wrapper {
// overflow: auto;
// }
}
.search-btn {
::v-deep .el-button {
border: 1px solid #cccccc;
height: 50px;
width: 90px;
.el-icon-search {
color: #cccccc;
font-size: 20px;
}
}
.el-button:hover,
.el-button:focus {
background: #f3f1f1;
}
}
.texttareaTip {
position: absolute;
top: 50%;
right: 20px;
transform: translate(0, -50%);
z-index: 10;
}
.consignmentCode-textarea {
position: absolute;
top: 25px;
left: 1px;
z-index: 10;
min-height: 170px !important;
border: 2px solid $fedexBorder;
background-color: $fedexTablebackgroundColor;
transition: all 0.2s ease;
}
.queryTable {
::v-deep .cell {
text-align: center;
white-space: pre-line;
}
}
</style>
export const tableHeaderKeys = [
{
label: "提單號碼",
prop: "deliveryNo",
width: 150,
align: "left",
sort: false,
},
{
label: "報單類別",
prop: "customsDeclarationType",
width: 150,
align: "left",
sort: false,
},
{
label: "操作狀態/時間",
prop: "operStatusAndTime1",
width: 150,
align: "left",
tem: "operStatusAndTime1",
sort: "custom",
},
{
label: "傳送狀態/時間",
prop: "delStatus",
width: 150,
align: "left",
tem: "delStatus",
sort: "custom",
},
{
label: "是否適用在目的地進口清關",
prop: "isClear",
width: 150,
align: "left",
tem: "isClear",
sort: false,
},
{
label: "操作",
prop: "opt",
width: 150,
align: "center",
tem: "opt",
sort: false,
},
];