朱兆平 / vue_cli · 提交

转到一个项目

作者 xudada
提交 7dafbf10d7b48399fd953193df19b99f5b929b6c 1 个父辈 cf70a4d6

新增出口订单申报，查询列表功能

内嵌 并排对比
正在显示 3 个修改的文件 包含 316 行增加 和 1 行删除
import axios from 'axios'
import http from "../http";
let baseServiceURL = 'cross-border-service'
//订单列表
export const selectLists = params => { return axios.get(`${baseServiceURL}/ExportOrderDeclaration/selectLists`, { params: params }); };
//订单申报
export const sendOrder = params => { return http.post(`${baseServiceURL}/ExportOrderDeclaration/sendOrder`, params); };
//上传EXCEL
export const UploadExcel = params => { return http.postExcelData(`${baseServiceURL}/ExportOrderDeclaration/upload`, params); };
... ...
... ... @@ -193,7 +193,8 @@ import Dispatch from "./views/dispatch/Dispatch";
import multiple from "./views/deploy/multiple";
import satellite from "./views/deploy/satellite";
/*出口订单*/
import ExortOrder from './views/exportorder/Exportorder.vue'
let routes = [
{
... ... @@ -219,6 +220,15 @@ let routes = [
]
},
{
path: '/order',
component: HomeNew,
name: '出口订单管理',
iconCls: 'el-icon-collection',
children: [
{path: '/ExortOrder', component: ExortOrder, name: '出口订单'}
]
},
{
path: '/',
component: HomeNew,
name: 'Charts',
... ... @@ -421,6 +431,7 @@ let routes = [
]
},
{
path: '/nmms2',
component: HomeNew,
... ...
<template>
<div class="table-container">
<div>
<el-form :inline="true" :model="queryInfo" class="demo-form-inline">
<el-form-item label="订单号">
<el-input v-model="queryInfo.orderno" placeholder="订单号"></el-input>
</el-form-item>
<el-form-item label="订单类型">
<el-select v-model="queryInfo.ordertype" placeholder="请选择">
<el-option
v-for="item in ordertypes"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="报送类型">
<el-select v-model="queryInfo.apptype" placeholder="请选择">
<el-option
v-for="item in apptypes"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="报关状态">
<el-select v-model="queryInfo.appstatus" placeholder="请选择">
<el-option
v-for="item in appstatuss"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getList">查询</el-button>
</el-form-item>
<el-form-item>
<el-upload
class="upload-demo"
action=""
:before-upload="beforeUpload"
:http-request="uploadFile"
:show-file-list="false">
<el-button size="small" type="success">导入订单</el-button>
</el-upload>
</el-form-item>
</el-form>
</div>
<el-table
:data="tableData"
style="width: 100%"
row-key="guid"
:expand-row-keys="expandedRowKeys"
@selection-change="handleSelectionChange"
border
stripe
>
<el-table-column type="expand" label="详细信息">
<template v-slot:default="{ row }">
<el-table
:data="row.exportOrderDeclarationBodyList"
style="width: 100%"
row-key="id"
stripe
>
<el-table-column prop="itemno" label="企业商品货号" />
<el-table-column prop="itemname" label="企业商品名称" />
<el-table-column prop="itemdescribe" label="企业商品描述" />
<el-table-column prop="barcode" label="条形码" />
<el-table-column prop="unit" label="计量单位" />
<el-table-column prop="currency" label="币制" />
<el-table-column prop="qty" label="数量" />
<el-table-column prop="price" label="单价" />
<el-table-column prop="totalprice" label="总价" />
<el-table-column prop="note" label="备注" />
<el-table-column
fixed="right"
label=""
width="120">
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="guid" label="GUID" width="180"></el-table-column>
<el-table-column prop="apptype" label="报送类型" width="120">
<template slot-scope="scope">
<span v-if="scope.row.apptype==='1'">
新增
</span>
<span v-else>
变更
</span>
</template>
</el-table-column>
<el-table-column prop="apptime" label="报送时间" width="180"></el-table-column>
<el-table-column prop="appstatus" label="报送状态" width="120">
<template slot-scope="scope">
<span v-if="scope.row.appstatus==='1'">
暂存
</span>
<span v-else>
申报
</span>
</template>
</el-table-column>
<el-table-column prop="ordertype" label="订单类型" width="120">
<template slot-scope="scope">
<span v-if="scope.row.ordertype==='E'">
B2C
</span>
<span v-else-if="scope.row.ordertype==='B'">
B2B
</span>
<span v-else>
海外仓
</span>
</template>
</el-table-column>
<el-table-column prop="orderno" label="订单编号" width="180"></el-table-column>
<el-table-column prop="ebpname" label="电商平台" width="180"></el-table-column>
<el-table-column prop="goodsvalue" label="商品金额" width="120"></el-table-column>
<el-table-column prop="freight" label="运杂费" width="120"></el-table-column>
<el-table-column prop="note" label="备注" width="180"></el-table-column>
<el-table-column
fixed="right"
label="操作"
width="120"
show-overflow-tooltip>
<template slot-scope="scope">
<el-button type="success" @click="sendorder(scope.row)">申报</el-button>
</template>
</el-table-column>
</el-table>
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pageNum"
:page-sizes="[20, 30, 40, 100]"
:page-size="queryInfo.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</div>
</template>
<script>
import {sendOrder,selectLists} from '../../api/consigner/exportOrder'
export default {
data() {
return {
apptypes: [
{
value: '1',
label: '新增'
}, {
value: '2',
label: '变更'
}
],
appstatuss: [
{
value: '1',
label: '暂存'
}, {
value: '2',
label: '申报'
}
],
ordertypes: [
{
value: 'E',
label: 'B2C出口订单'
}, {
value: 'B',
label: 'B2B出口订单'
}, {
value: 'W',
label: '海外仓订仓单'
}
],
tableData: [],
selectedRows: [],
expandedRowKeys: [],
queryInfo:{
appstatus:'',
apptype:'',
orderno:'',
ordertype:'',
pageNum:1,
pageSize:20
},
total:0
};
},
mounted() {
// this.expandedRowKeys = this.tableData.map(item => item.guid);
this.getList();
},
methods: {
//导入订单excel
beforeUpload(file) {
// 检查文件类型
const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel';
if (!isExcel) {
this.$message.error('上传文件只能是 Excel 格式!');
return false; // 取消文件上传
}
return true; // 允许上传
},
uploadFile({ file, onSuccess, onError }){
// 生成 FormData 对象
const formData = new FormData();
formData.append('file', file);
},
//订单申报
sendorder(row){
sendOrder(row).then((response)=>{
const res=response.data;
if (res.code !== '200') {
return this.$message.error('订单申报失败！')
}
this.$message.success('订单申报成功！');
this.getList();
}).catch(error=>{
this.$message.error(error.toString())
})
},
//订单列表查询
getList(){
selectLists(this.queryInfo).then((response) => {
const res = response.data
if (res.code !== '200') {
return this.$message.error('获取消息收发记录，失败！')
}
// 获取列表数据
this.tableData = res.data.list
// 获取列表的总记录数
this.total = res.data.total
this.$message.success('获取消息收发记录，成功！');
}).catch(error => {
// 关闭加载
this.$message.error(error.toString())
})
},
//分页
handleSizeChange(val) {
this.queryInfo.pageSize=val;
this.getList();
},
//分页
handleCurrentChange(val) {
this.queryInfo.pageNum=val;
this.getList();
},
//多选
handleSelectionChange(selection) {
this.selectedRows = selection;
}
}
};
</script>
<style scoped>
.el-table {
border: 1px solid #ddd;
}
.el-table th {
background-color: #f0f0f0;
}
.el-table tr.el-table__row--striped > td {
background-color: #f8f8f8;
}
.el-table td, .el-table th {
border: 1px solid #ddd;
padding: 8px;
}
</style>
... ...