Fedex / EcomWeb

Go to a project
Toggle navigation Toggle navigation pinning
zihan.wu
f1750aef 1 parent 8da39c7d

feat(exportSummary): 新增汇总申报功能 

- 添加汇总申报 API 接口
- 实现汇总申报页面组件
- 集成用户口岸信息、客户列表、字典数据等接口
- 添加表单验证和数据提交逻辑
Inline Side-by-side
Showing 3 changed files with 330 additions and 4 deletions
......@@ -43,3 +43,17 @@ export function getExportSummaryDetail(data){
method: 'get',
})
}
/**
* 汇总申报
* @param data
* @returns {*}
*/
export function declareSummaryApplication(data){
return request({
url:'/bus-customer/exportSummary/declare',
method:'post',
data:data
})
}
......
......@@ -172,3 +172,14 @@ export function getMenuByRoleId(roleId) {
// params: data
})
}
/**
* 获取当前用户的口岸信息
* @returns {AxiosPromise}
*/
export function getCurrUserPortInfo(){
return request({
url:'/bus-customer/user/getCurrUserPortInfo',
method:'get'
})
}
......
<template>
<div></div>
<div style="background-color: #FFFFFF;height: 100%">
<div class="title">
<div>
</div>
<div>
汇总申报信息
</div>
</div>
<div class="content">
<el-form
class="fedexFormStyle fedexFormEditStyle"
ref="editForm"
:model="formData"
:rules="formRules"
label-position="top"
size="small"
>
<el-row :gutter="5" type="flex" justify="center">
<el-col :span="10">
<Formitem label="出口口岸" prop="portCode">
<el-select
type="text"
id="inputInner--portCode"
v-model="formData.portCode"
clearable
filterable
placeholder=""
>
<el-option
v-for="(item, index) in portInfo"
:key="index"
:label="item.portCode"
:value="item.declarationPortCode"
></el-option>
</el-select>
</Formitem>
</el-col>
<el-col :span="10">
<Formitem label="申报地海关" prop="customsCode">
<el-select
type="text"
id="inputInner--customsCode"
v-model="formData.customsCode"
clearable
placeholder=""
>
<el-option
v-for="(item, index) in portInfo"
:key="index"
:label="item.declarationPortCode"
:value="item.declarationPortCode"
></el-option>
</el-select>
</Formitem>
</el-col>
</el-row>
<el-row :gutter="5" type="flex" justify="center">
<el-col :span="10">
<Formitem label="电商企业名称" prop="ebpcode">
<el-select
type="text"
id="inputInner--ebpcode"
v-model="formData.ebpcode"
clearable
filterable
placeholder=""
>
<el-option
v-for="(item, index) in ebcDataList"
:key="index"
:label="item.ecomEntName"
:value="item.ecomEntCode"
></el-option>
</el-select>
</Formitem>
</el-col>
<el-col :span="10">
<Formitem label="申报方式" prop="declareType">
<el-select
type="text"
id="inputInner--declareType"
v-model="formData.declareType"
clearable
placeholder=""
>
<el-option
v-for="(item, index) in declareType"
:key="index"
:label="item.itemChineseName"
:value="item.itemValue"
></el-option>
</el-select>
</Formitem>
</el-col>
</el-row>
<el-row :gutter="5" type="flex" justify="center">
<el-col :span="10">
<Formitem label="创建时间" prop="time" :activeType="true">
<el-date-picker
class="inputInner--time"
id="inputInner--time"
v-model="formData.time"
type="daterange"
format="yyyy-MM-dd"
prefix-icon="none"
value-format="yyyy-MM-dd"
range-separator="至"
@change="dateChange"
style="background-color: #f2f2f2;"
/>
</Formitem>
</el-col>
<el-col :span="5">
<Formitem label="发货人汇总" prop="summaryFlag">
<el-select
type="text"
id="inputInner--summaryFlag"
v-model="formData.summaryFlag"
clearable
placeholder=""
>
<el-option
v-for="(item, index) in summaryFlag"
:key="index"
:label="item.itemChineseName"
:value="item.itemValue"
></el-option>
</el-select>
</Formitem>
</el-col>
<el-col :span="5">
<Formitem label="商品名汇总" prop="itemNameFlag">
<el-select
type="text"
id="inputInner--itemNameFlag"
v-model="formData.itemNameFlag"
clearable
placeholder=""
>
<el-option
v-for="(item, index) in itemNameFlag"
:key="index"
:label="item.itemChineseName"
:value="item.itemValue"
></el-option>
</el-select>
</Formitem>
</el-col>
</el-row>
</el-form>
</div>
<div class="entrySave">
<el-button
class="entrySaveButton"
@click="submit"
>提交</el-button
>
<el-button
class="entrySaveButton"
@click="cancel"
>取消</el-button
>
</div>
</div>
</template>
<script>
import { getCurrUserPortInfo } from "@/api/system/user.js";
import { getCustomerList} from "@/api/declareData-api.js";
import { getDictData } from '@/api/system/dict-api.js'
import { declareSummaryApplication } from "@/api/exportSummary-api.js";
export default {
name: "",
data() {
return {};
return {
formRules:{
portCode:[
{ required: true, message: '请选择出口口岸', trigger: 'change' },
],
customsCode:[
{ required: true, message: '请选择申报地海关', trigger: 'change' },
],
ebpcode: [
{ required: true, message: '请选择电商企业', trigger: 'change' },
],
declareType: [
{ required: true, message: '请选择申报方式', trigger: 'change' },
],
time: [
{
type: 'array',
required: true,
message: '请选择完整的日期区间',
trigger: 'change'
}
],
summaryFlag: [
{ required: true, message: '请选择发货人汇总', trigger: 'change' },
],
itemNameFlag: [
{ required: true, message: '请选择商品名汇总', trigger: 'change' },
],
},
formData:{},
portInfo:[],
ebcDataList:[],
summaryFlag:[],
itemNameFlag:[],
declareType:[]
};
},
created() {
this.getCurrUserPortInfo()
this.getCustomerList()
this.getSummaryFlag()
this.getItemNameFlag()
this.getDeclareType()
},
methods: {
//获取当前用户的口岸信息
getCurrUserPortInfo(){
getCurrUserPortInfo()
.then((res) => {
if (res.code === "200") {
this.portInfo = res.data;
}
})
.catch((err) => {
console.log(err);
});
},
//获取客户下拉列表数据
getCustomerList(){
getCustomerList().then(res =>{
if (res.code == 200) {
this.ebcDataList = res.data.value
} else {
this.ebcDataList = []
}
}).catch(err =>{
console.log(err)
})
},
//获取发货人下拉数据
getSummaryFlag(){
getDictData({
doctCode: "SUMMARY_FLAG"
}).then(res => {
if (res.code == 200) {
this.summaryFlag = res.data;
} else {
this.summaryFlag = [];
}
});
},
//获取发货人下拉数据
getItemNameFlag(){
getDictData({
doctCode: "ITEM_NAME_FLAG"
}).then(res => {
if (res.code == 200) {
this.itemNameFlag = res.data;
} else {
this.itemNameFlag = [];
}
});
},
cancel(){
this.$router.push("summaryDataSearch")
},
submit(){
this.$refs.editForm.validate((valid) => {
if (!valid) {
return;
}
declareSummaryApplication(this.formData).then(response => {
if(response.data){
this.msgSuccess("汇总申报成功");
this.$router.push("summaryDataSearch")
}else {
this.msgError(response.message)
}
})
})
},
dateChange(val){
this.formData.startTime = val[0]
this.formData.endTime = val[1]
},
getDeclareType(){
getDictData({
doctCode: "DECLARE_TYPE"
}).then(res => {
if (res.code == 200) {
this.declareType = res.data;
} else {
this.declareType = [];
}
});
}
},
methods: {},
};
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.content {
margin-top: 50px;
}
.title{
font-size: 23px;
margin-left: 8%;
padding-top: 2%;
}
</style>
......