朱兆平 / vue_cli · 提交

转到一个项目

作者 朱兆平
提交 daa293d9650e65cb317b19e81201e0a4b68ea5aa 1 个父辈 ae646924

add: 

1. 跨境电商-收款单申报管理界面
2. 跨境电商-回执明细界面
内嵌 并排对比
正在显示 6 个修改的文件 包含 569 行增加 和 2 行删除
import http from '../http.js';
let baseServiceURL = '/wlpt-cbed-system/export-receipt';
// POST请求添加出库单
export const addExportReceipt = (data) => {
return http.post(`${baseServiceURL}/addExportReceipt`, data);
};
// POST请求更新出库单信息
export const updateExportReceipt = (data) => {
return http.post(`${baseServiceURL}/updateExportReceipt`, data);
};
// DELETE请求删除出库单（使用POST以适应某些防火墙限制）
export const deleteExportReceipt = (receiptGuid) => {
return http.post(`${baseServiceURL}/deleteExportReceipt`,{},{ receiptGuid: receiptGuid });
};
// GET请求获取单一出库单信息
export const getExportReceipt = (receiptGuid) => {
return http.get(`${baseServiceURL}/getExportReceipt`, { "receiptGuid": receiptGuid } );
};
// GET请求分页查询所有出库单信息
export const selectAllByPage = (record, pageNum, pageSize) => {
return http.get(`${baseServiceURL}/selectAllByPage`, { params: { ...record, pageNum, pageSize } });
};
//POST请求上传导入的excel
export const uploadExportReceipt = (params) => {
return http.post(`${baseServiceURL}/importFromExcel`, params);
};
// 批量申报
export const batchDeclare = (data) => {
return http.post(`${baseServiceURL}/batchDeclare`, data);
};
... ...
import http from '../http.js';
let baseServiceURL = '/wlpt-cbed-system/LogInfo';
// 新增日志信息 - POST请求
export const addLogInfo = (logInfo) => {
return http.post(`${baseServiceURL}/addLogInfo`, logInfo);
};
// 更新日志信息 - POST请求
export const editLogInfo = (logInfo) => {
return http.post(`${baseServiceURL}/editLogInfo`, logInfo);
};
// 删除日志信息 - GET请求，uuid作为参数传递
export const deleteLogInfo = (uuid) => {
return http.get(`${baseServiceURL}/deleteLogInfo`, { uuid: uuid });
};
// 查询日志信息列表 - GET请求，支持分页和查询条件
export const selectAllByPage = (data,params) => {
return http.post(`${baseServiceURL}/selectAllByPage`,data, params);
};
... ...
... ... @@ -6,8 +6,8 @@ export default {
return axios({
method: 'POST', // 请求协议
url: url, // 请求的地址
data: data, // post 请求的数据
params: params,
data: data, // post 请求的实体类数据
params: params, //urlencoded 参数
timeout: 30000, // 超时时间, 单位毫秒
headers: {
'Content-Type': 'application/json;charset=UTF-8',
... ...
... ... @@ -128,6 +128,9 @@ import classification from './views/deploy/classification.vue'
import subscribe from './views/deploy/subscribe.vue'
import UNcode from './views/wms/UNcode.vue'
//跨境电商
import exportRecipt from "@/views/cbecd/export_recipt.vue";
//账单管理
... ... @@ -653,6 +656,15 @@ let routes = [
{path:'/express',component:Express,name:'快邮舱单申报'},
]
},
{
path: '/cbecd',
component: HomeNew,
name: '跨境电商申报',
iconCls:'el-icon-wind-power',
children:[
{path:'/cbecd-export-receipt',component:exportRecipt,name:'收款单申报'},
]
},
{
path: '/',
... ...
<template>
<div id="exportReceipt">
<!-- 搜索区域 -->
<el-row :gutter="10" class="toolbar">
<el-col :span="7">
<el-input v-model="queryInfo.receiptGuid" prefix-icon="el-icon-search" size="small"
placeholder="系统唯一编号" clearable>
<template slot="prepend">系统唯一编号</template>
</el-input>
</el-col>
<!-- 其他搜索字段类似添加 -->
<el-col :span="6">
<el-button type="primary" icon="el-icon-search" size="small" @click="searchExportReceipts">
查询
</el-button>
<el-button type="success" icon="el-icon-plus" size="small" @click="openDialog('add')">新增</el-button>
<el-button type="warning" icon="el-icon-message" size="small" @click="declare()">申报</el-button>
</el-col>
<el-col :span="6">
<el-upload
style="display: inline; margin-left: 10px;margin-right: 10px;"
action=""
:http-request="uploadFile"
:limit=1
:on-exceed="fileExceed"
:file-list="fileList"
accept="application/vnd.ms-excel,application/vnd.ms-excels,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
ref="fileupload">
<el-button slot="trigger" style="width:150px" icon="el-icon-folder-add" type="primary">导入excel</el-button>
</el-upload>
</el-col>
</el-row>
<!-- 表格区域 -->
<el-table :data="exportReceiptsData" border
style="border-radius: 10px 10px 0px 0px;line-height: 25px;width: 100%"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}"
@selection-change="selsChange"
>
<el-table-column type="selection" width="55" :selectable="isSelectable"></el-table-column>
<el-table-column prop="receiptGuid" label="系统唯一编号"></el-table-column>
<el-table-column prop="appType" label="报送类型" :formatter="formatAppType"></el-table-column>
<el-table-column prop="appTime" label="报送时间" :formatter="formatDate"></el-table-column>
<el-table-column prop="appStatus" label="申报状态" :formatter="formatAppStatus"></el-table-column>
<el-table-column prop="ebpName" label="电商平台登记名称"></el-table-column>
<el-table-column prop="ebpCode" label="电商平台代码"></el-table-column>
<el-table-column prop="ebcCode" label="电商企业代码"></el-table-column>
<el-table-column prop="ebcName" label="电商企业名称"></el-table-column>
<el-table-column prop="orderNo" label="电商订单编号"></el-table-column>
<el-table-column prop="payCode" label="支付企业代码"></el-table-column>
<el-table-column prop="payName" label="支付企业名称"></el-table-column>
<el-table-column prop="payNo" label="支付交易编号"></el-table-column>
<el-table-column prop="charge" label="订单交易金额"></el-table-column>
<el-table-column prop="currency" label="币制"></el-table-column>
<el-table-column prop="accountingDate" label="到账时间" :formatter="formatDate"></el-table-column>
<!-- 操作列 -->
<el-table-column fixed="right" label="操作" width="250">
<template slot-scope="scope">
<el-row type="flex" justify="left">
<!-- <el-col :span="6"><el-button type="info" @click="openDialog('view', scope.row)">查看</el-button></el-col>-->
<el-col :span="6"><el-button type="primary" icon="el-icon-edit" @click="openDialog('edit', scope.row)"></el-button></el-col>
<el-col :span="6">
<el-popconfirm title="确定删除吗？" @confirm="deleteExportReceipt(scope.row.receiptGuid)">
<el-button slot="reference" type="danger" icon="el-icon-delete"></el-button>
</el-popconfirm>
</el-col>
</el-row>
<el-row type="flex" justify="left">
<el-col :span="6"><el-button type="info" icon="el-icon-search" @click="openSendLogView(scope.row)">回执</el-button></el-col>
</el-row>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination layout="prev, pager, next" :total="totalRecords" @current-change="handleCurrentChange"
background style="margin-top: 10px">
</el-pagination>
<!-- 对话框 -->
<el-dialog :title="dialogStateMap[dialogType]" :visible.sync="showDialog" width="80%">
<el-form ref="exportReceiptForm" :model="exportReceiptForm" :rules="formRules"
label-width="120px">
<!-- 表单字段 -->
<el-form-item label="系统唯一编号" prop="receiptGuid">
<el-input v-model="exportReceiptForm.receiptGuid"></el-input>
</el-form-item>
<!-- 其他表单字段类似添加 -->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="showDialog = false">取 消</el-button>
<el-button type="primary" @click="submitForm(dialogType)">确 定</el-button>
</div>
</el-dialog>
<el-dialog title="回执明细" :visible.sync="sendLogDialogShow" width="80%">
<send-log :bill-guid="billGuid"> </send-log>
</el-dialog>
</div>
</template>
<script>
import { addExportReceipt, updateExportReceipt, deleteExportReceipt, getExportReceipt,
selectAllByPage,uploadExportReceipt, batchDeclare} from '@/api/cbecd';
import sendLog from "./send_log.vue"
export default {
computed: {
},
components: { sendLog },
data() {
return {
fileList: [],
sendList:[],
queryInfo: {},
exportReceiptsData: [],
totalRecords: 0,
pageNum: 1,
pageSize: 10,
showDialog: false,
sendLogDialogShow: false,
dialogType: '',
billGuid:'',
dialogStateMap: {
view: '查看',
edit: '编辑',
add: '新增'
},
exportReceiptForm: {},
formRules: {
receiptGuid: [{ required: true, message: '请输入系统唯一编号', trigger: 'blur' }],
// 其他字段规则类似添加
}
};
},
methods: {
formatAppType: function (row, column,cellValue, index) {
const map={
"1": "新增",
"2": "变更",
"3": "删除"
}
return map[cellValue];
},
formatAppStatus: function (row, column,cellValue, index) {
const map = {
"1": { text: "暂存", type: "" },
"2": { text: "申报", type: "info" },
"3": { text: "已回执", type: "success" }, // 默认样式
};
const tagInfo = map[cellValue] || { text: "未知状态", type: "" };
// 使用 createElement 创建 VNode
return this.$createElement('el-tag', { props: { type: tagInfo.type } }, tagInfo.text);
// 使用 createElement 创建 VNode
return this.$createElement('el-tag', { props: { type: tagInfo.type } }, tagInfo.text);
},
formatDate: function (row, column,cellValue, index) {
// 获取单元格数据
if(cellValue) {
let dt = new Date(cellValue)
return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()+ ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds();
}else {
return '';
}
},
searchExportReceipts() {
selectAllByPage(this.queryInfo, this.pageNum, this.pageSize).then(response => {
const data = response.data;
if (data.code === '200') {
this.exportReceiptsData = data.data.list; // 假设返回数据包含list字段
this.totalRecords = data.data.total; // 假设返回数据包含total字段
}
});
},
openDialog(type, row) {
if (type === 'view' || type === 'edit') {
getExportReceipt(row.receiptGuid).then(response => {
const data = response.data;
if (data.code === '200') {
this.exportReceiptForm = data.data; // 假设返回数据包含data字段
}
});
} else {
this.exportReceiptForm = {}; // 清空表单，用于新增操作
}
this.dialogType = type;
this.showDialog = true;
},
openSendLogView(row) {
this.sendLogDialogShow = true;
this.billGuid = row.receiptGuid;
},
submitForm(type) {
if (type === 'add') {
addExportReceipt(this.exportReceiptForm).then(response => {
const data = response.data;
if (data.code === '200') {
this.$message.success('新增成功');
this.showDialog = false;
this.searchExportReceipts(); // 刷新列表
}
});
} else if (type === 'edit') {
updateExportReceipt(this.exportReceiptForm).then(response => {
const data = response.data;
if (data.code === '200') {
this.$message.success('编辑成功');
this.showDialog = false;
this.searchExportReceipts(); // 刷新列表
}
});
} else if (type === 'view') {
this.showDialog = false; // 查看模式下，直接关闭对话框
}
},
deleteExportReceipt(guid) {
deleteExportReceipt(guid).then(response => {
const data = response.data;
if (data.code === '200') {
this.$message.success('删除成功');
this.searchExportReceipts(); // 刷新列表
}
});
},// 自定义上传
uploadFile (item) {
const form = new FormData()
form.append('file', item.file)
uploadExportReceipt(form).then(res =>{
if(res.data.code =='200'){
this.$message.success(res.data.msg);
this.searchExportReceipts();
this.fileList = [];
}else {
this.$message.error(res.data.msg)
}
}).catch(e =>{
this.$message.error(e.toString())
})
},
handleCurrentChange(val) {
this.pageNum = val;
this.searchExportReceipts();
},
// 导入excel
fileExceed(){
this.$message.error('别贪心！一次只能上传一个哦~');
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
},
selsChange(selection){
this.sendList = selection;
// 如果用户尝试选择了不允许的选择项，则移除这些选择
this.sendList = selection.filter(row => this.isSelectable(row));
},
isSelectable(row) {
// 只有当appStatus是"1"或"2"的时候才可选
return ['1'].includes(row.appStatus);
},
declare(){
batchDeclare(this.sendList).then(response => {
const data = response.data;
if (data.code === '200') {
this.$message.success('申报成功');
this.searchExportReceipts(); // 刷新列表
}
}).catch(e =>{
this.$message.error(e.toString());
});
}
}
};
</script>
... ...
<template>
<div>
<!-- 搜索区域 -->
<el-row :gutter="10" class="toolbar">
<el-col :span="7">
<el-input v-model="queryInfo.cebType" placeholder="申报业务类型" clearable></el-input>
</el-col>
<el-col :span="7">
<el-select v-model="queryInfo.decStatus" placeholder="申报状态">
<el-option label="暂存" value="1"></el-option>
<el-option label="申报" value="2"></el-option>
<el-option label="已回执" value="3"></el-option>
</el-select>
</el-col>
<el-col :span="6">
<el-button type="primary" icon="el-icon-search" @click="searchLogInfo">查询</el-button>
<el-button type="success" icon="el-icon-plus" @click="applyAdd">新增</el-button>
</el-col>
</el-row>
<!-- 表格展示 -->
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="uuid" label="主键"></el-table-column>
<el-table-column prop="cebType" label="申报业务类型"></el-table-column>
<el-table-column prop="decType" label="申报类型" :formatter="formatDecType"></el-table-column>
<el-table-column prop="decDate" label="申报时间" :formatter="formatDate"></el-table-column>
<el-table-column prop="decStatus" label="申报状态" :formatter="formatAppStatus"></el-table-column>
<el-table-column prop="billGuid" label="单证GUID/编号"></el-table-column>
<el-table-column prop="decUser" label="申报人"></el-table-column>
<!-- <el-table-column prop="decPiece" label="申报件数"></el-table-column>-->
<!-- <el-table-column prop="decWeight" label="申报重量"></el-table-column>-->
<el-table-column prop="headGuid" label="报头ID/批次ID"></el-table-column>
<el-table-column prop="decNum" label="申报序号"></el-table-column>
<el-table-column prop="recDate" label="回执时间" :formatter="formatDate"></el-table-column>
<el-table-column prop="recStatus" label="回执状态"></el-table-column>
<el-table-column prop="recDescription" label="回执说明"></el-table-column>
<!-- <el-table-column fixed="right" label="操作">-->
<!-- <template slot-scope="scope">-->
<!-- <el-button type="text" @click="applyView(scope.row)">查看</el-button>-->
<!-- <el-button type="text" @click="applyEdit(scope.row)">编辑</el-button>-->
<!-- <el-button type="text" @click="applyDel(scope.$index, scope.row)">删除</el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
</el-table>
<!-- 分页 -->
<el-pagination
background
layout="total, prev, pager, next"
:page-size="queryInfo.pageSize"
:current-page="queryInfo.pageNum"
:total="total"
@current-change="handleCurrentChange">
</el-pagination>
<!-- 对话框 -->
<el-dialog :title="dialogStateMap[dialogType]" :visible.sync="showDialog" width="80%">
<el-form ref="logFormRef" :model="logInfo" :rules="rules" label-width="120px">
<!-- 录入表单字段 -->
<el-form-item label="主键" prop="uuid">
<el-input v-model="logInfo.uuid"></el-input>
</el-form-item>
<!-- ... 其他字段 -->
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="showDialog = false">取 消</el-button>
<el-button type="primary" @click="submitForm(dialogType)">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { addLogInfo, editLogInfo, deleteLogInfo, selectAllByPage } from '@/api/cbecd/send_log';
export default {
name: 'Send-Log',
props: {
billGuid: {
type: String,
default: ''
}
},
watch: {
billGuid: {
handler(newBillGuid) {
if (newBillGuid) {
this.queryInfo.sendLog.billGuid = newBillGuid;
this.searchLogInfo();
}
},
immediate: true // 立即执行一次监听器
}
},
data() {
return {
queryInfo: {
pageNum: 1,
pageSize: 10,
sendLog:{
billGuid:'uuid'
}
},
tableData: [],
total: 0,
logInfo: {},
dialogType: '',
showDialog: false,
dialogStateMap: {
view: '查看',
edit: '编辑',
add: '新增'
},
rules: {
// 录入表单字段校验规则
uuid: [{ required: true, message: '请输入主键', trigger: 'blur' }],
// ... 其他字段的校验规则
}
};
},
methods: {
formatAppStatus: function (row, column,cellValue, index) {
const map = {
"1": { text: "暂存", type: "" },
"2": { text: "申报", type: "info" },
"3": { text: "申报中", type: "warning" }, // 默认样式
"4": { text: "已回执", type: "success" } // 默认样式
};
const tagInfo = map[cellValue] || { text: "未知状态", type: "" };
// 使用 createElement 创建 VNode
return this.$createElement('el-tag', { props: { type: tagInfo.type } }, tagInfo.text);
// 使用 createElement 创建 VNode
return this.$createElement('el-tag', { props: { type: tagInfo.type } }, tagInfo.text);
},
formatDecType: function (row, column,cellValue, index) {
cellValue = ''+ cellValue;
console.log(row, column,cellValue, index);
const map={
"1": "新增",
"2": "变更",
"3": "删除"
}
return map[cellValue];
},
formatDate(date) {
if (!date) return '';
const d = new Date(date);
const year = d.getFullYear();
const month = (d.getMonth() + 1).toString().padStart(2, '0');
const day = d.getDate().toString().padStart(2, '0');
const hours = d.getHours().toString().padStart(2, '0');
const minutes = d.getMinutes().toString().padStart(2, '0');
const seconds = d.getSeconds().toString().padStart(2, '0');
// 格式化为 YYYY-MM-DD HH:mm:ss
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
},
searchLogInfo() {
selectAllByPage(this.queryInfo.sendLog,this.queryInfo).then(response => {
this.tableData = response.data.data.list;
this.total = response.pages;
});
},
applyAdd() {
this.dialogType = 'add';
this.showDialog = true;
// 清空表单
this.logInfo = {};
},
applyEdit(row) {
this.dialogType = 'edit';
this.showDialog = true;
this.logInfo = Object.assign({}, row);
},
applyView(row) {
this.dialogType = 'view';
this.showDialog = true;
// 设置为只读模式
this.$refs.logFormRef.setDisabled(true);
this.logInfo = Object.assign({}, row);
},
applyDel(index, row) {
deleteLogInfo(row.uuid).then(() => {
this.tableData.splice(index, 1);
});
},
submitForm(type) {
if (type === 'add') addLogInfo(this.logInfo);
else if (type === 'edit') editLogInfo(this.logInfo);
// 关闭对话框
this.showDialog = false;
// 刷新数据列表
this.searchLogInfo();
},
handleCurrentChange(val) {
this.queryInfo.pageNum = val;
this.searchLogInfo();
}
}
}
</script>
<style>
</style>
... ...