|
|
|
<template>
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<el-form :inline="true" :model="queryInfo" class="demo-form-inline">
|
|
|
|
<el-form-item label="">
|
|
|
|
<el-select size="medium" v-model="queryInfo.clientCode" placeholder="客户编码" clearable>
|
|
|
|
<el-option
|
|
|
|
v-for="item in customerList"
|
|
|
|
:key="item.clientCode"
|
|
|
|
:label="item.clientName"
|
|
|
|
:value="item.clientCode"
|
|
|
|
>
|
|
|
|
</el-option>
|
|
|
|
</el-select>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="">
|
|
|
|
<el-select size="medium" v-model="queryInfo.fileStatus" placeholder="文件状态" clearable>
|
|
|
|
<el-option
|
|
|
|
v-for="item in fileStatus"
|
|
|
|
:key="item.value"
|
|
|
|
:label="item.label"
|
|
|
|
:value="item.value">
|
|
|
|
</el-option>
|
|
|
|
</el-select>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="">
|
|
|
|
<el-input size="medium" v-model="queryInfo.fileName" placeholder="文件名称"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
|
|
<div class="block">
|
|
|
|
<el-date-picker
|
|
|
|
style="background: none"
|
|
|
|
size="medium"
|
|
|
|
v-model="value2"
|
|
|
|
type="daterange"
|
|
|
|
align="right"
|
|
|
|
unlink-panels
|
|
|
|
range-separator="至"
|
|
|
|
start-placeholder="开始日期"
|
|
|
|
end-placeholder="结束日期"
|
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
|
:picker-options="pickerOptions">
|
|
|
|
</el-date-picker>
|
|
|
|
</div>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
|
|
<el-button type="primary" @click="getList">查询</el-button>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<el-row :gutter="20">
|
|
|
|
<el-col :span="3">
|
|
|
|
<el-button size="medium" @click="downloadOrderTemplate">模板下载</el-button>
|
|
|
|
</el-col>
|
|
|
|
<el-col :span="3">
|
|
|
|
<el-upload
|
|
|
|
class="upload-demo"
|
|
|
|
action=""
|
|
|
|
:before-upload="beforeUpload"
|
|
|
|
:http-request="orderImport"
|
|
|
|
:show-file-list="false">
|
|
|
|
<el-button size="medium" type="primary">导入订单</el-button>
|
|
|
|
</el-upload>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</div>
|
|
|
|
<el-row :gutter="20" style="height: 20px;"></el-row>
|
|
|
|
<div>
|
|
|
|
<el-table
|
|
|
|
:data="tableData"
|
|
|
|
style="width: 100%"
|
|
|
|
row-key="uuid"
|
|
|
|
border
|
|
|
|
stripe
|
|
|
|
>
|
|
|
|
<el-table-column prop="clientName" label="客户名称" width="180" show-overflow-tooltip></el-table-column>
|
|
|
|
<el-table-column prop="clientCode" label="客户编码" width="180" show-overflow-tooltip></el-table-column>
|
|
|
|
<el-table-column prop="fileStatus" label="文件状态" width="180" show-overflow-tooltip>
|
|
|
|
<template slot-scope="scope">
|
|
|
|
<span v-if="scope.row.fileStatus === 1">入库中</span>
|
|
|
|
<span v-else-if="scope.row.fileStatus === 2">入库异常</span>
|
|
|
|
<span v-else-if="scope.row.fileStatus === 5">入库成功</span>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column prop="fileName" label="文件名称" width="180" show-overflow-tooltip></el-table-column>
|
|
|
|
<el-table-column prop="handleRes" label="处理结果" width="180" show-overflow-tooltip></el-table-column>
|
|
|
|
<el-table-column prop="createTime" label="创建时间" width="180" show-overflow-tooltip></el-table-column>
|
|
|
|
</el-table>
|
|
|
|
</div>
|
|
|
|
<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 {selectAll} from '../../api/consigner/customerconfig'
|
|
|
|
import {importExcelToMinio, selectFilePage} from '../../api/consigner/exportOrder'
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
// 查询条件
|
|
|
|
queryInfo: {
|
|
|
|
clientCode: '',
|
|
|
|
fileStatus: '',
|
|
|
|
fileName: '',
|
|
|
|
startTime: '',
|
|
|
|
endTime: '',
|
|
|
|
pageNum: 1,
|
|
|
|
pageSize: 20
|
|
|
|
},
|
|
|
|
// 列表数据
|
|
|
|
tableData: [],
|
|
|
|
total: 0,
|
|
|
|
// 文件状态码
|
|
|
|
fileStatus: [
|
|
|
|
{
|
|
|
|
label: '入库中',
|
|
|
|
value: '1'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: '入库异常',
|
|
|
|
value: '2'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: '入库成功',
|
|
|
|
value: '5'
|
|
|
|
}
|
|
|
|
],
|
|
|
|
pickerOptions: {
|
|
|
|
shortcuts: [{
|
|
|
|
text: '最近一周',
|
|
|
|
onClick(picker) {
|
|
|
|
const end = new Date();
|
|
|
|
const start = new Date();
|
|
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
|
|
|
picker.$emit('pick', [start, end]);
|
|
|
|
}
|
|
|
|
}, {
|
|
|
|
text: '最近一个月',
|
|
|
|
onClick(picker) {
|
|
|
|
const end = new Date();
|
|
|
|
const start = new Date();
|
|
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
|
|
picker.$emit('pick', [start, end]);
|
|
|
|
}
|
|
|
|
}, {
|
|
|
|
text: '最近三个月',
|
|
|
|
onClick(picker) {
|
|
|
|
const end = new Date();
|
|
|
|
const start = new Date();
|
|
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
|
|
|
picker.$emit('pick', [start, end]);
|
|
|
|
}
|
|
|
|
}]
|
|
|
|
},
|
|
|
|
// 存储从后端获取的客户数据
|
|
|
|
customerList: [],
|
|
|
|
value2:[],
|
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
this.getCustomerList();
|
|
|
|
this.getList();
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
// 查询上传文件信息列表
|
|
|
|
getList(){
|
|
|
|
if (this.value2 !== null && this.value2 !== ''){
|
|
|
|
this.queryInfo.startTime = this.value2[0];
|
|
|
|
this.queryInfo.endTime = this.value2[1];
|
|
|
|
}
|
|
|
|
selectFilePage(this.queryInfo).then((response) => {
|
|
|
|
const res = response.data;
|
|
|
|
const code = res.code;
|
|
|
|
const data = res.data;
|
|
|
|
if (code !== '200'){
|
|
|
|
return this.$message.error("获取文件列表失败");
|
|
|
|
}
|
|
|
|
this.tableData = data.list;
|
|
|
|
this.total = data.total;
|
|
|
|
this.$message.success("获取文件列表成功");
|
|
|
|
this.queryInfo.startTime = '';
|
|
|
|
this.queryInfo.endTime = '';
|
|
|
|
}).catch(error => {
|
|
|
|
this.$message.error(error.toString());
|
|
|
|
})
|
|
|
|
},
|
|
|
|
// 获取客户配置列表选项
|
|
|
|
getCustomerList(){
|
|
|
|
selectAll().then((response) =>{
|
|
|
|
const res = response.data;
|
|
|
|
const code = res.code;
|
|
|
|
if (code !== '200'){
|
|
|
|
return this.$message.error("客户信息获取失败");
|
|
|
|
}
|
|
|
|
this.customerList = res.data;
|
|
|
|
}
|
|
|
|
).catch(error => {
|
|
|
|
this.$message.error(error.toString())
|
|
|
|
})
|
|
|
|
},
|
|
|
|
//导入订单excel
|
|
|
|
beforeUpload(file) {
|
|
|
|
// 检查文件类型
|
|
|
|
const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel';
|
|
|
|
const fileMaxSize = 10 * 1024 * 1024;
|
|
|
|
if (!isExcel) {
|
|
|
|
this.$message.error('上传文件只能是 Excel 格式!');
|
|
|
|
return false; // 取消文件上传
|
|
|
|
}
|
|
|
|
// 检查文件大小
|
|
|
|
const isLtMaxSize = file.size / 1024 / 1024 < fileMaxSize;
|
|
|
|
if (!isLtMaxSize) {
|
|
|
|
this.$message.error(`上传文件大小不能超过 ${fileMaxSize / (1024 * 1024)} MB!`);
|
|
|
|
return false; // 取消文件上传
|
|
|
|
}
|
|
|
|
return true; // 允许上传
|
|
|
|
},
|
|
|
|
// 下载订单模板文件
|
|
|
|
downloadOrderTemplate(){
|
|
|
|
const fileUrl = '../../static/出口订单导入模板.xlsx';
|
|
|
|
// 创建隐藏的<a>元素
|
|
|
|
const link = document.createElement('a');
|
|
|
|
link.href = fileUrl;
|
|
|
|
link.download = '出口订单导入模板.xlsx'; // 设置下载的文件名
|
|
|
|
// 将<a>元素添加到DOM中
|
|
|
|
document.body.appendChild(link);
|
|
|
|
// 触发点击事件
|
|
|
|
link.click();
|
|
|
|
// 移除<a>元素
|
|
|
|
document.body.removeChild(link);
|
|
|
|
},
|
|
|
|
// 导入订单文件到minio
|
|
|
|
orderImport({file, onSuccess, onError}){
|
|
|
|
const formData = new FormData();
|
|
|
|
formData.append('file', file);
|
|
|
|
importExcelToMinio(formData).then((response) => {
|
|
|
|
const res = response.data;
|
|
|
|
const code = res.code;
|
|
|
|
const msg = res.msg;
|
|
|
|
if (code !== '200'){
|
|
|
|
return this.$message.error(msg);
|
|
|
|
}
|
|
|
|
this.$message.success(msg);
|
|
|
|
this.getList();
|
|
|
|
onSuccess(res);
|
|
|
|
}).catch(error => {
|
|
|
|
this.$message.error(error.toString());
|
|
|
|
onError(error);
|
|
|
|
})
|
|
|
|
},
|
|
|
|
//分页
|
|
|
|
handleSizeChange(val) {
|
|
|
|
this.queryInfo.pageSize=val;
|
|
|
|
this.getList();
|
|
|
|
},
|
|
|
|
//分页
|
|
|
|
handleCurrentChange(val) {
|
|
|
|
this.queryInfo.pageNum=val;
|
|
|
|
this.getList();
|
|
|
|
},
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script> |
...
|
...
|
|
