解决未到服务时间却可以完成订单的问题，新增订单导出excel功能
This commit is contained in:
parent
c090972acb
commit
4d9f101bba
|
|
@ -2,7 +2,7 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FypVcAOGV-Snipaste_2024-10-11_15-03-12.png">
|
||||
<link rel="icon" href="https://www.carboner.cn:8888/api/file/downloadFile?objectKey=feiyi/miniProgram/home/newlogo.png">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>非遗小程序管理端</title>
|
||||
</head>
|
||||
|
|
|
|||
736
package-lock.json
generated
736
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
|
|
@ -18,6 +18,8 @@
|
|||
"compressorjs": "^1.2.1",
|
||||
"dayjs": "^1.11.13",
|
||||
"element-plus": "^2.9.0",
|
||||
"exceljs": "^4.4.0",
|
||||
"file-saver": "^2.0.5",
|
||||
"markdown-it": "^14.1.0",
|
||||
"mitt": "^3.0.1",
|
||||
"openai": "^4.89.0",
|
||||
|
|
@ -26,10 +28,12 @@
|
|||
"querystring": "^0.2.1",
|
||||
"shrinkpng": "^1.2.0-beta.1",
|
||||
"vue": "^3.2.31",
|
||||
"vue-router": "^4.3.3"
|
||||
"vue-router": "^4.3.3",
|
||||
"xlsx": "^0.18.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tsconfig/node20": "^20.1.4",
|
||||
"@types/file-saver": "^2.0.7",
|
||||
"@types/node": "^20.17.6",
|
||||
"@vitejs/plugin-vue": "^5.0.4",
|
||||
"@vue/tsconfig": "^0.5.1",
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ const myAxios = axios.create({
|
|||
withCredentials:true,
|
||||
baseURL: 'http://localhost:9092/api'
|
||||
// baseURL: 'http://123.249.108.160:8888/api' //测试服务器
|
||||
// baseURL: 'http://154.8.193.216:9092/api', //隋雨霏服务器
|
||||
// baseURL: 'http://154.8.193.216:9093/api' //隋雨霏服务器测试环境
|
||||
// baseURL: 'https://www.carboner.cn:8888/api'
|
||||
});
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
BIN
src/assets/newlogo.png
Normal file
BIN
src/assets/newlogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<el-aside :style="AsideObj" >
|
||||
<el-menu
|
||||
background-color="rgb(170, 113, 81)"
|
||||
background-color="#AA7151"
|
||||
:collapse="isCollapse"
|
||||
collapse-transition
|
||||
text-color="#fff"
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
>
|
||||
<div style="height: 80px; color: white; font-weight: bold;
|
||||
display: flex; align-items: center; justify-content: center">
|
||||
<img src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FypVcAOGV-Snipaste_2024-10-11_15-03-12.png" alt="" style="height: 30px">
|
||||
<img src="../../assets/newlogo.png" alt="" style="height: 30px">
|
||||
<span style="margin-left: 5px" v-show="isShow">泠泷水月阁管理系统</span>
|
||||
</div>
|
||||
<!-- 遍历 menuRoutes，动态渲染菜单项 -->
|
||||
|
|
|
|||
|
|
@ -452,7 +452,7 @@ export const constantRoute = [
|
|||
}
|
||||
]
|
||||
},
|
||||
//节日管理+商城轮播图管理+课程首页轮播图管理
|
||||
//节日管理+商城轮播图管理+课程首页轮播图管理+优惠力度&预约须知管理
|
||||
{
|
||||
path: '/OtherManage',
|
||||
redirect: '/EntityCarouseCenter',
|
||||
|
|
@ -492,6 +492,16 @@ export const constantRoute = [
|
|||
icon: 'Calendar',
|
||||
hidden: false
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/NoticeAndFavorable',
|
||||
name: '优惠和预约须知',
|
||||
component: () => import("@/views/OtherManagement/NoticeAndFavorable.vue"),
|
||||
meta: {
|
||||
title: '优惠和预约须知',
|
||||
icon: 'Files',
|
||||
hidden: false
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -499,5 +509,15 @@ export const constantRoute = [
|
|||
path: '/Test',
|
||||
name: '测试页面',
|
||||
component: () => import("../views/test.vue")
|
||||
},
|
||||
{
|
||||
path: '/Test2',
|
||||
name: '测试页面2',
|
||||
component: () => import("../views/test2.vue")
|
||||
},
|
||||
{
|
||||
path: '/Test3',
|
||||
name: '测试页面3',
|
||||
component: () => import("../views/excelTest.vue")
|
||||
}
|
||||
]
|
||||
|
|
|
|||
22
src/utils/YYYYMMDD.js
Normal file
22
src/utils/YYYYMMDD.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
//将当前日期转换为YYYYMMDD
|
||||
export const getCurrentDate =()=> {
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = String(now.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(now.getDate()).padStart(2, '0');
|
||||
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
|
||||
//获取数组中日期最大的元素
|
||||
export const getMaxDate=(dates)=> {
|
||||
return dates.reduce((maxDate, currentDate) => (currentDate > maxDate ? currentDate : maxDate));
|
||||
}
|
||||
|
||||
//两个日期比较
|
||||
export const compareDates =(date1, date2)=> {
|
||||
const d1 = new Date(date1);
|
||||
const d2 = new Date(date2);
|
||||
return d1 >= d2;
|
||||
}
|
||||
|
||||
95
src/utils/excelUtil/bookOrderExcel.js
Normal file
95
src/utils/excelUtil/bookOrderExcel.js
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
import { saveAs } from "file-saver";
|
||||
import ExcelJS from "exceljs";
|
||||
|
||||
|
||||
|
||||
// const getBase64Image = (url ) => {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// const img = new Image()
|
||||
// const canvas = document.createElement('canvas');
|
||||
// img.crossOrigin = '*';
|
||||
// img.onload = function () {
|
||||
// const width = img.width, height = img.height;
|
||||
// canvas.width = width;
|
||||
// canvas.height = height;
|
||||
//
|
||||
// const ctx = canvas.getContext('2d');
|
||||
// ctx.fillStyle = 'white';
|
||||
// ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
// ctx.drawImage(img, 0, 0, width, height);
|
||||
// const base64 = canvas.toDataURL(type);
|
||||
// resolve(base64);
|
||||
// };
|
||||
// img.onerror = function () {
|
||||
// reject(new Error('message'));
|
||||
// };
|
||||
// img.src = url;
|
||||
// });
|
||||
// };
|
||||
|
||||
|
||||
|
||||
export const bookOrderList = (tableData) => {
|
||||
const workbook = new ExcelJS.Workbook();
|
||||
const worksheet = workbook.addWorksheet('Order Details');
|
||||
|
||||
// 设置列标题
|
||||
worksheet.columns = [
|
||||
{ header: '订单序号', key: 'index', width: 10 },
|
||||
{ header: '订单编号', key: 'orderNumber', width: 30 },
|
||||
{ header: '下单时间', key: 'createTime', width: 20 },
|
||||
{ header: '购买的写真服务', key: 'photoName', width: 30 },
|
||||
{ header: '服装类别', key: 'type', width: 20 },
|
||||
{ header: '服装单价(元)', key: 'price', width: 15 },
|
||||
{ header: '总价(元)', key: 'itemTotalAmount', width: 15 },
|
||||
{ header: '预约日期', key: 'reservationDate', width: 15 },
|
||||
{ header: '预约时间点', key: 'timePoint', width: 15 },
|
||||
{ header: '拍摄地点', key: 'place', width: 15 },
|
||||
{ header: '妆造服务', key: 'makeup', width: 15 },
|
||||
{ header: '联系人姓名', key: 'contactName', width: 20 },
|
||||
{ header: '联系人手机号', key: 'contactPhone', width: 20 },
|
||||
{ header: '订单实付金额(元)', key: 'totalAmount', width: 20 },
|
||||
{ header: '订单状态', key: 'orderStatus', width: 20 },
|
||||
];
|
||||
|
||||
// 遍历 tableData 并填充数据
|
||||
tableData.forEach((order, index) => {
|
||||
const row = worksheet.addRow({
|
||||
index: index + 1,
|
||||
orderNumber: order.orderNumber,
|
||||
createTime: order.createTime,
|
||||
photoName: order.photoProductsSnapshot.name,
|
||||
type: order.photoProductsSnapshot.categoryName,
|
||||
price: order.photoProductsSnapshot.price,
|
||||
itemTotalAmount: order.totalAmount,
|
||||
reservationDate: order.specificDate,
|
||||
timePoint: order.timePoint,
|
||||
place: order.isIndoors === 1 ? '室内' : '室外',
|
||||
makeup: order.isMakeup === 1 ? '是' : '否',
|
||||
contactName: order.contactsSnapshot.name,
|
||||
contactPhone: order.contactsSnapshot.phone,
|
||||
totalAmount: order.totalAmount,
|
||||
orderStatus: order.orderStatus
|
||||
})
|
||||
// 设置列的背景色
|
||||
row.getCell('B').style = { fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: 'A9D08E' } } };
|
||||
row.getCell('J').style = { fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: 'A2C4E7' } } };
|
||||
row.getCell('K').style = { fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: 'A2C4E7' } } };
|
||||
row.getCell('O').style = { fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: 'F4CCCC' } } };
|
||||
row.getCell('M').style = { fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: '98EBFF' } } };
|
||||
row.getCell('N').style = { fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: 'F7FF72' } } };
|
||||
// 调整行高为自适应
|
||||
const rowHeight = Math.max(...row._cells.map(cell => String(cell.value).length));
|
||||
row.height = rowHeight > 10 ? rowHeight + 5 : 15; // 设置最小行高为15，最大行高为文字长度 + 5
|
||||
|
||||
});
|
||||
|
||||
// 启用筛选功能
|
||||
worksheet.autoFilter = { from: 'A1', to: 'O1' }; // 设置 A1 到 O1 列范围作为筛选区域
|
||||
|
||||
// 导出为 Excel 文件
|
||||
workbook.xlsx.writeBuffer().then((buffer) => {
|
||||
const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
|
||||
saveAs(blob, '写真服务订单.xlsx');
|
||||
});
|
||||
};
|
||||
70
src/utils/excelUtil/entityOrderExcel.js
Normal file
70
src/utils/excelUtil/entityOrderExcel.js
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
import {saveAs} from "file-saver";
|
||||
import ExcelJS from "exceljs";
|
||||
|
||||
export const entityOrderList = (tableData) => {
|
||||
const workbook = new ExcelJS.Workbook();
|
||||
const worksheet = workbook.addWorksheet('Order Details');
|
||||
|
||||
// 设置列标题
|
||||
worksheet.columns = [
|
||||
{ header: '订单序号', key: 'index', width: 10 },
|
||||
{ header: '订单编号', key: 'orderNumber', width: 25 },
|
||||
{ header: '下单时间', key: 'createTime', width: 15 },
|
||||
{ header: '用户名', key: 'userName', width: 15 },
|
||||
{ header: '商品名称', key: 'goodName', width: 20 },
|
||||
{ header: '商品单价(元)', key: 'price', width: 15 },
|
||||
{ header: '数量', key: 'quantity', width: 10 },
|
||||
{ header: '总价(元)', key: 'itemTotalAmount', width: 15 },
|
||||
{ header: '收货人', key: 'recipient', width: 20 },
|
||||
{ header: '手机号', key: 'phone', width: 15 },
|
||||
{ header: '地区', key: 'region', width: 20 },
|
||||
{ header: '详细地址', key: 'detailAddress', width: 40 },
|
||||
{ header: '订单实付金额(元)', key: 'totalAmount', width: 15 },
|
||||
{ header: '订单状态', key: 'orderStatus', width: 15 },
|
||||
{ header: '快递单号', key: 'trackingNumber', width: 20 },
|
||||
];
|
||||
|
||||
// 遍历 tableData 并填充数据
|
||||
tableData.forEach((order, index) => {
|
||||
// 展平每个订单的数据
|
||||
order.orderItemList.forEach((item) => {
|
||||
const row = worksheet.addRow({
|
||||
index: index + 1,
|
||||
orderNumber: order.orderNumber,
|
||||
createTime: order.createTime,
|
||||
userName: order.userName,
|
||||
goodName: item.goodSnapshot.name,
|
||||
price: item.goodSnapshot.price,
|
||||
quantity: item.quantity,
|
||||
itemTotalAmount: item.itemTotalAmount,
|
||||
recipient: order.addressSnapshot.name,
|
||||
phone: order.addressSnapshot.phone,
|
||||
region: order.addressSnapshot.region,
|
||||
detailAddress: order.addressSnapshot.detailAddress,
|
||||
totalAmount: order.totalAmount,
|
||||
orderStatus: order.orderStatus,
|
||||
trackingNumber: order.trackingNumber,
|
||||
});
|
||||
|
||||
// 设置列的背景色
|
||||
row.getCell('B').style = { fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: 'A9D08E' } } }; // 订单编号
|
||||
row.getCell('I').style = { fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: 'A2C4E7' } } }; // 收货人
|
||||
row.getCell('J').style = { fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: 'A2C4E7' } } }; // 手机号
|
||||
row.getCell('O').style = { fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: 'F4CCCC' } } }; // 订单状态
|
||||
row.getCell('M').style = { fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: '98EBFF' } } }; // 订单状态
|
||||
row.getCell('N').style = { fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: 'F7FF72' } } }; // 订单实付金额（改为黄色）
|
||||
// 调整行高为自适应
|
||||
const rowHeight = Math.max(...row._cells.map(cell => String(cell.value).length));
|
||||
row.height = rowHeight > 10 ? rowHeight + 5 : 15; // 设置最小行高为15，最大行高为文字长度 + 5
|
||||
});
|
||||
});
|
||||
|
||||
// 启用筛选功能
|
||||
worksheet.autoFilter = { from: 'A1', to: 'O1' }; // 设置 A1 到 O1 列范围作为筛选区域
|
||||
|
||||
// 导出为 Excel 文件
|
||||
workbook.xlsx.writeBuffer().then((buffer) => {
|
||||
const blob = new Blob([buffer], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
|
||||
saveAs(blob, '实体类订单信息.xlsx');
|
||||
});
|
||||
};
|
||||
95
src/utils/excelUtil/rentOrderExcel.js
Normal file
95
src/utils/excelUtil/rentOrderExcel.js
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
import { saveAs } from "file-saver";
|
||||
import ExcelJS from "exceljs";
|
||||
|
||||
|
||||
|
||||
// const getBase64Image = (url ) => {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// const img = new Image()
|
||||
// const canvas = document.createElement('canvas');
|
||||
// img.crossOrigin = '*';
|
||||
// img.onload = function () {
|
||||
// const width = img.width, height = img.height;
|
||||
// canvas.width = width;
|
||||
// canvas.height = height;
|
||||
//
|
||||
// const ctx = canvas.getContext('2d');
|
||||
// ctx.fillStyle = 'white';
|
||||
// ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
// ctx.drawImage(img, 0, 0, width, height);
|
||||
// const base64 = canvas.toDataURL(type);
|
||||
// resolve(base64);
|
||||
// };
|
||||
// img.onerror = function () {
|
||||
// reject(new Error('message'));
|
||||
// };
|
||||
// img.src = url;
|
||||
// });
|
||||
// };
|
||||
|
||||
|
||||
|
||||
export const rentOrderList = (tableData) => {
|
||||
const workbook = new ExcelJS.Workbook();
|
||||
const worksheet = workbook.addWorksheet('Order Details');
|
||||
|
||||
// 设置列标题
|
||||
worksheet.columns = [
|
||||
{ header: '订单序号', key: 'index', width: 10 },
|
||||
{ header: '订单编号', key: 'orderNumber', width: 30 },
|
||||
{ header: '下单时间', key: 'createTime', width: 20 },
|
||||
{ header: '用户名', key: 'username', width: 20 },
|
||||
{ header: '租赁服装名称', key: 'clothName', width: 30 },
|
||||
{ header: '可租赁天数', key: 'period', width: 15 },
|
||||
// { header: '服装类别', key: 'type', width: 20 },
|
||||
{ header: '服装单价(元)', key: 'price', width: 15 },
|
||||
{ header: '总价', key: 'itemTotalAmount', width: 15 },
|
||||
{ header: '取货时间', key: 'pickupTime', width: 15 },
|
||||
{ header: '租赁天数', key: 'rentDays', width: 15 },
|
||||
{ header: '联系人姓名', key: 'contactName', width: 20 },
|
||||
{ header: '联系人手机号', key: 'contactPhone', width: 20 },
|
||||
{ header: '订单实付金额(元)', key: 'totalAmount', width: 20 },
|
||||
{ header: '订单状态', key: 'orderStatus', width: 20 },
|
||||
];
|
||||
|
||||
// 遍历 tableData 并填充数据
|
||||
tableData.forEach((order, index) => {
|
||||
const row = worksheet.addRow({
|
||||
index: index + 1,
|
||||
orderNumber: order.orderNumber,
|
||||
createTime: order.createTime,
|
||||
username: order.userName,
|
||||
clothName: order.clothesSnapshot.name,
|
||||
period: order.clothesSnapshot.period,
|
||||
// type: order.clothesSnapshot.categoryName,
|
||||
price: order.clothesSnapshot.price,
|
||||
itemTotalAmount: order.totalAmount,
|
||||
pickupTime: order.pickupTime,
|
||||
rentDays: order.rentDays,
|
||||
contactName: order.contactsSnapshot.name,
|
||||
contactPhone: order.contactsSnapshot.phone,
|
||||
totalAmount: order.totalAmount,
|
||||
orderStatus: order.orderStatus
|
||||
})
|
||||
// 设置列的背景色
|
||||
row.getCell('B').style = { fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: 'A9D08E' } } };
|
||||
row.getCell('J').style = { fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: 'A2C4E7' } } };
|
||||
row.getCell('O').style = { fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: 'F4CCCC' } } };
|
||||
row.getCell('K').style = { fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: '98EBFF' } } };
|
||||
row.getCell('L').style = { fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: '98EBFF' } } };
|
||||
row.getCell('N').style = { fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: 'F7FF72' } } };
|
||||
// 调整行高为自适应
|
||||
const rowHeight = Math.max(...row._cells.map(cell => String(cell.value).length));
|
||||
row.height = rowHeight > 10 ? rowHeight + 5 : 15; // 设置最小行高为15，最大行高为文字长度 + 5
|
||||
|
||||
});
|
||||
|
||||
// 启用筛选功能
|
||||
worksheet.autoFilter = { from: 'A1', to: 'O1' }; // 设置 A1 到 O1 列范围作为筛选区域
|
||||
|
||||
// 导出为 Excel 文件
|
||||
workbook.xlsx.writeBuffer().then((buffer) => {
|
||||
const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
|
||||
saveAs(blob, '服装租赁订单.xlsx');
|
||||
});
|
||||
};
|
||||
98
src/utils/excelUtil/serviceOrderExcel.js
Normal file
98
src/utils/excelUtil/serviceOrderExcel.js
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
import { saveAs } from "file-saver";
|
||||
import ExcelJS from "exceljs";
|
||||
|
||||
|
||||
// const getBase64Image = (url ) => {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// const img = new Image()
|
||||
// const canvas = document.createElement('canvas');
|
||||
// img.crossOrigin = '*';
|
||||
// img.onload = function () {
|
||||
// const width = img.width, height = img.height;
|
||||
// canvas.width = width;
|
||||
// canvas.height = height;
|
||||
//
|
||||
// const ctx = canvas.getContext('2d');
|
||||
// ctx.fillStyle = 'white';
|
||||
// ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
// ctx.drawImage(img, 0, 0, width, height);
|
||||
// const base64 = canvas.toDataURL(type);
|
||||
// resolve(base64);
|
||||
// };
|
||||
// img.onerror = function () {
|
||||
// reject(new Error('message'));
|
||||
// };
|
||||
// img.src = url;
|
||||
// });
|
||||
// };
|
||||
|
||||
|
||||
|
||||
export const serviceOrderList = (tableData, downloadUrl) => {
|
||||
const workbook = new ExcelJS.Workbook();
|
||||
const worksheet = workbook.addWorksheet('Order Details');
|
||||
|
||||
// 设置列标题
|
||||
worksheet.columns = [
|
||||
{ header: '订单序号', key: 'index', width: 10 },
|
||||
{ header: '订单编号', key: 'orderNumber', width: 30 },
|
||||
{ header: '下单时间', key: 'createTime', width: 20 },
|
||||
{ header: '用户名', key: 'userName', width: 15 },
|
||||
{ header: '所购买的商品', key: 'goodName', width: 30 },
|
||||
{ header: '商品类别', key: 'type', width: 20 },
|
||||
{ header: '商品单价(元)', key: 'price', width: 15 },
|
||||
{ header: '数量', key: 'quantity', width: 10 },
|
||||
{ header: '总价(元)', key: 'itemTotalAmount', width: 15 },
|
||||
{ header: '预约日期', key: 'reservationDate', width: 15 },
|
||||
{ header: '预约时间段', key: 'timeSlot', width: 15 },
|
||||
{ header: '联系人姓名', key: 'contactName', width: 20 },
|
||||
{ header: '联系人手机号', key: 'contactPhone', width: 20 },
|
||||
{ header: '订单实付金额(元)', key: 'totalAmount', width: 20 },
|
||||
{ header: '订单状态', key: 'orderStatus', width: 20 },
|
||||
];
|
||||
|
||||
// 遍历 tableData 并填充数据
|
||||
tableData.forEach((order, index) => {
|
||||
// 展平每个订单的数据
|
||||
order.orderItemList.forEach(async (item) => {
|
||||
// 订单每个商品的行
|
||||
const row = worksheet.addRow({
|
||||
index: index + 1,
|
||||
orderNumber: order.orderNumber,
|
||||
createTime: order.createTime,
|
||||
userName: order.userName,
|
||||
goodName: item.goodSnapshot.name,
|
||||
type: item.goodSnapshot.type,
|
||||
price: item.goodSnapshot.price,
|
||||
quantity: item.quantity,
|
||||
itemTotalAmount: item.itemTotalAmount,
|
||||
reservationDate: item.reservationDate,
|
||||
timeSlot: item.timeSlot,
|
||||
contactName: order.contactsSnapshot.name,
|
||||
contactPhone: order.contactsSnapshot.phone,
|
||||
totalAmount: order.totalAmount,
|
||||
orderStatus: order.orderStatus,
|
||||
});
|
||||
|
||||
// 设置列的背景色
|
||||
row.getCell('B').style = { fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: 'A9D08E' } } }; // 订单编号
|
||||
row.getCell('J').style = { fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: 'A2C4E7' } } }; // 收货人
|
||||
row.getCell('K').style = { fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: 'A2C4E7' } } }; // 手机号
|
||||
row.getCell('O').style = { fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: 'F4CCCC' } } }; // 订单状态
|
||||
row.getCell('M').style = { fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: '98EBFF' } } }; // 订单状态
|
||||
row.getCell('N').style = { fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: 'F7FF72' } } }; // 订单实付金额（改为黄色）
|
||||
// 调整行高为自适应
|
||||
const rowHeight = Math.max(...row._cells.map(cell => String(cell.value).length));
|
||||
row.height = rowHeight > 10 ? rowHeight + 5 : 15; // 设置最小行高为15，最大行高为文字长度 + 5
|
||||
});
|
||||
});
|
||||
|
||||
// 启用筛选功能
|
||||
worksheet.autoFilter = { from: 'A1', to: 'O1' }; // 设置 A1 到 O1 列范围作为筛选区域
|
||||
|
||||
// 导出为 Excel 文件
|
||||
workbook.xlsx.writeBuffer().then((buffer) => {
|
||||
const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
|
||||
saveAs(blob, '服务类商品订单.xlsx');
|
||||
});
|
||||
};
|
||||
|
|
@ -1,4 +1,9 @@
|
|||
//上传链接
|
||||
export const uploadUrl : string = 'http://localhost:9092/api/file/uploadFile'
|
||||
|
||||
// export const uploadUrl : string= 'https://www.carboner.cn:8888/api/file/uploadFile'
|
||||
|
||||
// export const uploadUrl : string = 'http://154.8.193.216:9093/api/file/uploadFile' //测试环境
|
||||
|
||||
//下载链接
|
||||
export const downloadUrl : string = 'https://www.carboner.cn:8888/api/file/downloadFile?objectKey='
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item label="资讯标题">
|
||||
<el-input v-model="form.title" maxlength="12" minlength="2" show-word-limit style="width: 260px;" />
|
||||
<el-input v-model="form.title" maxlength="30" minlength="2" show-word-limit style="width: 260px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="文章发布时间">
|
||||
<el-date-picker
|
||||
|
|
|
|||
|
|
@ -127,12 +127,20 @@ onMounted(() => {
|
|||
|
||||
//节日信息
|
||||
const getFestivalArr = async () => {
|
||||
let tempFestivalArr : any = [] //临时数组，存放每一次获取的节日名称，用于判断
|
||||
const res = await myAxios.get('/festival/get')
|
||||
console.log('节日信息--->',res.data.data)
|
||||
if(res.data.code === 1) {
|
||||
festivalArr.value = res.data.data
|
||||
festivalArr.value.forEach((item : any) => {
|
||||
tempFestivalArr.push(item.name)
|
||||
})
|
||||
} else {
|
||||
WarnInfo('获取节日失败，检查服务')
|
||||
}
|
||||
if(!tempFestivalArr.includes(detailFrom.value.festivalName)) {
|
||||
detailFrom.value.festivalName = '无'
|
||||
}
|
||||
}
|
||||
|
||||
const getProductInfo = async () => { //商品信息
|
||||
|
|
|
|||
|
|
@ -1,59 +1,71 @@
|
|||
<template>
|
||||
<div style="margin-bottom: 20px">
|
||||
<el-input style="width: 250px; height: 30px; margin-right: 10px; font-size: 14px" suffix-icon="Search"
|
||||
placeholder="请输入订单编号" v-model="orderNumber"></el-input>
|
||||
<el-button class="ml-5" type="primary" @click="load" style="height: 30px;">搜索</el-button>
|
||||
<el-button type="warning" @click="reset" style="height:30px">重置</el-button>
|
||||
</div>
|
||||
<!-- 数据展示层 -->
|
||||
<el-table v-loading="loading" :data="tableData" border stripe header-cell-class-name="headerBg"
|
||||
:cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange"
|
||||
:header-cell-style="{ 'text-align': 'center' }" :row-style="{ height: '70px' }">
|
||||
<el-table-column prop="id" label="序号" width="50">
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="orderNumber" label="订单编号" width="250"></el-table-column>
|
||||
<el-table-column prop="createTime" label="下单时间" width="180"></el-table-column>
|
||||
<el-table-column prop="totalAmount" label="订单实付金额(元)"></el-table-column>
|
||||
<el-table-column prop="orderStatus" label="订单状态">
|
||||
<template #default="scope">
|
||||
{{ scope.row.orderStatus === '待发货' ? '待消费' : scope.row.orderStatus }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="220px" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button size="small" @click="showDetail(scope.row)">
|
||||
详情
|
||||
</el-button>
|
||||
<el-popconfirm confirm-button-text='是' cancel-button-text='否' icon="InfoFilled" icon-color="red"
|
||||
title="是否取消订单？" @confirm="cancelOrder(scope.row)" width=180 v-if="['待支付'].includes(scope.row.orderStatus)">
|
||||
<div class="table_page">
|
||||
<div class="titleHeader">
|
||||
<div>
|
||||
<el-input style="width: 250px; height: 30px; margin-right: 10px; font-size: 14px" suffix-icon="Search"
|
||||
placeholder="请输入订单编号" v-model="orderNumber"></el-input>
|
||||
<el-button class="ml-5" type="primary" @click="load" style="height: 30px;">搜索</el-button>
|
||||
<el-button type="warning" @click="reset" style="height:30px">重置</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
|
||||
title="是否导出本页数据?" @confirm="bookOrderList( tableData )" width=180>
|
||||
<template #reference>
|
||||
<el-button size="small" type="primary" plain>取消订单</el-button>
|
||||
<el-button type="success" size="default" style="height:30px">导出为表格</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-popconfirm confirm-button-text='是' cancel-button-text='否' icon="InfoFilled" icon-color="red"
|
||||
title="拍摄是否完成？" @confirm="changeOrderStatus(scope.row,'交易成功')" width=180 v-if="['待发货'].includes(scope.row.orderStatus)">
|
||||
<template #reference>
|
||||
<el-button size="small" type="primary" plain>拍摄完成</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
|
||||
title="确定要退款吗？" @confirm="deleteOrder(scope.row)" width=180>
|
||||
<template #reference>
|
||||
<el-button v-if="['待发货','待收货'].includes(scope.row.orderStatus)" size="small" type="danger" plain>退款</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页器 -->
|
||||
<div style="padding: 10px 0">
|
||||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:current-page="searchParams.current" :page-size="searchParams.pageSize" :page-sizes="[5, 10, 15, 20]"
|
||||
:small="null" :disabled="null" :background="null" layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 数据展示层 -->
|
||||
<el-table v-loading="loading" :data="tableData" border stripe header-cell-class-name="headerBg"
|
||||
:cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange"
|
||||
:header-cell-style="{ 'text-align': 'center' }" :row-style="{ height: '70px' }">
|
||||
<el-table-column prop="id" label="序号" width="50">
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="orderNumber" label="订单编号" width="250"></el-table-column>
|
||||
<el-table-column prop="createTime" label="下单时间" width="180"></el-table-column>
|
||||
<el-table-column prop="totalAmount" label="订单实付金额(元)"></el-table-column>
|
||||
<el-table-column prop="orderStatus" label="订单状态">
|
||||
<template #default="scope">
|
||||
{{ scope.row.orderStatus === '待发货' ? '待消费' : scope.row.orderStatus }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="220px" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button size="small" @click="showDetail(scope.row)">
|
||||
详情
|
||||
</el-button>
|
||||
<el-popconfirm confirm-button-text='是' cancel-button-text='否' icon="InfoFilled" icon-color="red"
|
||||
title="是否取消订单？" @confirm="cancelOrder(scope.row)" width=180 v-if="['待支付'].includes(scope.row.orderStatus)">
|
||||
<template #reference>
|
||||
<el-button size="small" type="primary" plain>取消订单</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-popconfirm confirm-button-text='是' cancel-button-text='否' icon="InfoFilled" icon-color="red"
|
||||
title="拍摄是否完成？" @confirm="changeOrderStatus(scope.row,'交易成功')" width=180 v-if="['待发货'].includes(scope.row.orderStatus)">
|
||||
<template #reference>
|
||||
<el-button size="small" type="primary" plain>拍摄完成</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
|
||||
title="确定要退款吗？" @confirm="deleteOrder(scope.row)" width=180>
|
||||
<template #reference>
|
||||
<el-button v-if="['待发货','待收货'].includes(scope.row.orderStatus)" size="small" type="danger" plain>退款</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页器 -->
|
||||
<div style="padding: 10px 0">
|
||||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:current-page="searchParams.current" :page-size="searchParams.pageSize" :page-sizes="[5, 10, 15, 20]"
|
||||
:small="null" :disabled="null" :background="null" layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -64,6 +76,9 @@ import { ElMessage } from "element-plus";
|
|||
import {SuccessInfo, ErrorInfo, WarnInfo} from "@/utils/messageInfo";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import emitter from "@/utils/emitter";
|
||||
import {bookOrderList} from "@/utils/excelUtil/bookOrderExcel";
|
||||
import {compareDates, getCurrentDate} from "@/utils/YYYYMMDD";
|
||||
|
||||
const tableData: any = ref([]); //表单展示数据
|
||||
const total = ref(0);
|
||||
const orderNumber = ref('')
|
||||
|
|
@ -95,7 +110,7 @@ const getOrderList = async () => {
|
|||
try {
|
||||
searchParams.value.orderNumber = orderNumber.value
|
||||
const res = await myAxios.post('/advanceOrder/list', { ...searchParams.value });
|
||||
// console.log('订单信息--->', res.data.data);
|
||||
console.log('订单信息--->', res.data.data);
|
||||
if (res.data.code === 1) {
|
||||
tableData.value = res.data.data.records;
|
||||
total.value = parseInt(res.data.data.total)
|
||||
|
|
@ -121,6 +136,11 @@ const showDetail = (row: any) => {
|
|||
})
|
||||
};
|
||||
const changeOrderStatus = async (row: any,msg: string) => { //改变订单状态
|
||||
console.log('当前列--->',row)
|
||||
if(msg === '交易成功' && compareDates(row.specificDate,getCurrentDate())) {
|
||||
WarnInfo('未到服务日期不能完成订单！')
|
||||
return;
|
||||
}
|
||||
const res = await myAxios.post('/advanceOrder/update/orderStatus',{
|
||||
id: row.id,
|
||||
orderStatus: msg
|
||||
|
|
@ -176,4 +196,15 @@ const cancelOrder = async (row: any) => { //取消订单的方法(未支付能
|
|||
font-family: 'Arial', sans-serif;
|
||||
/* 设置字体 */
|
||||
}
|
||||
|
||||
.table_page {
|
||||
min-width: 1000px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.titleHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px
|
||||
}
|
||||
</style>
|
||||
|
|
@ -72,9 +72,28 @@
|
|||
<el-col :span="8" class="overview-item-title">已上架</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8" class="color-danger overview-item-value">{{ totalProductNum }}</el-col>
|
||||
<el-col :span="8" class="color-danger overview-item-value">{{ offshelvesNum }}</el-col>
|
||||
<el-col :span="8" class="color-danger overview-item-value">{{ shelvesNum }}</el-col>
|
||||
<el-col :span="8" class="overview-item-value">{{ totalProductNum }}</el-col>
|
||||
<el-col :span="8" class="overview-item-value">{{ offshelvesNum }}</el-col>
|
||||
<el-col :span="8" class="overview-item-value">{{ shelvesNum }}</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="out-border">
|
||||
<div class="layout-title">服装总览</div>
|
||||
<div style="padding: 40px">
|
||||
<el-row>
|
||||
<el-col :span="6" class="overview-item-title">全部服装</el-col>
|
||||
<el-col :span="6" class="overview-item-title">已上架</el-col>
|
||||
<el-col :span="6" class="overview-item-title">已租赁服装</el-col>
|
||||
<el-col :span="6" class="overview-item-title">已下架</el-col>
|
||||
</el-row>
|
||||
<el-row class="font-medium">
|
||||
<el-col :span="6" class="overview-item-value">{{ totalClothes }}</el-col>
|
||||
<el-col :span="6" class="overview-item-value">{{ totalListingClothes }}</el-col>
|
||||
<el-col :span="6" class="overview-item-value">{{ rentedClothes }}</el-col>
|
||||
<el-col :span="6" class="overview-item-value">{{ totalDelistClothes }}</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -107,6 +126,11 @@ const waitPhotoOrder = ref(0) //待拍摄订单
|
|||
const waitDeliverOrder = ref(0) //待发货订单
|
||||
const waitPayOrder = ref(0) //待支付订单数量
|
||||
const waitConsumption = ref(0) //待消费订单
|
||||
const totalListingClothes = ref(0) //全部已上架服装
|
||||
const totalClothes = ref(0) //全部服装
|
||||
const rentedClothes = ref(0) //已租赁服装
|
||||
const totalDelistClothes = ref(0) //全部已下架服装
|
||||
|
||||
onMounted(() => {
|
||||
getDashBoard()
|
||||
})
|
||||
|
|
@ -128,8 +152,12 @@ const getDashBoard = async () => {
|
|||
waitDeliverOrder.value = dashBord.get('实体类待发货订单')
|
||||
waitPayOrder.value = dashBord.get('所有待支付订单数量')
|
||||
waitConsumption.value = dashBord.get('服务类待消费订单')
|
||||
totalListingClothes.value = dashBord.get('全部已上架服装数量')
|
||||
totalClothes.value = dashBord.get('全部服装数量')
|
||||
rentedClothes.value = dashBord.get('已租赁订单数量')
|
||||
totalDelistClothes.value = dashBord.get('全部已下架服装数量')
|
||||
}
|
||||
console.log(res.data.data)
|
||||
// console.log(res.data.data)
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,94 +1,100 @@
|
|||
<template>
|
||||
<div class="table_page">
|
||||
<div style="margin-bottom: 20px">
|
||||
<el-input style="width: 250px; height: 30px; margin-right: 10px; font-size: 14px" suffix-icon="Search"
|
||||
placeholder="请输入订单编号" v-model="orderNumber"></el-input>
|
||||
<el-button class="ml-5" type="primary" @click="load(orderNumber)" style="height: 30px;">搜索</el-button>
|
||||
<el-button type="warning" @click="reset" style="height:30px">重置</el-button>
|
||||
</div>
|
||||
<!-- 数据展示层 -->
|
||||
<el-table v-loading="loading" :data="tableData" border stripe header-cell-class-name="headerBg"
|
||||
:cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange"
|
||||
:header-cell-style="{ 'text-align': 'center' }" :row-style="{ height: '70px' }">
|
||||
<el-table-column type="selection" width="55" fixed="left"></el-table-column>
|
||||
<el-table-column prop="id" label="订单序号" width="80">
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="orderNumber" label="订单编号" width="300"></el-table-column>
|
||||
<el-table-column prop="createTime" label="下单时间" width="180"></el-table-column>
|
||||
<el-table-column prop="userName" label="用户名" width="120"></el-table-column>
|
||||
<el-table-column label="所购买的商品" width="150">
|
||||
<el-table-column label="展开" type="expand" width="150">
|
||||
<template #default="props">
|
||||
<el-table :data="props.row.orderItemList" border
|
||||
:cell-style="{ 'text-align': 'center', 'font-size': '14px' }">
|
||||
<el-table-column label="商品名称" prop="goodSnapshot.name" width="200" />
|
||||
<el-table-column label="商品图片" prop="goodSnapshot.goodImg" width="200">
|
||||
<template #default="scope">
|
||||
<div>
|
||||
<img :src=" downloadUrl + scope.row.goodSnapshot.goodImg.split(';')[0]" alt="" style="height: 50px;">
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类别" prop="goodSnapshot.type" width="200" />
|
||||
<el-table-column label="商品单价" prop="goodSnapshot.price" width="200" />
|
||||
<!-- <el-table-column label="是否是限定商品" prop="goodSnapshot.festivalOrder" width="150"/>-->
|
||||
<el-table-column label="数量" prop="quantity" width="200" />
|
||||
<el-table-column label="总价" prop="itemTotalAmount" width="200" />
|
||||
</el-table>
|
||||
<div class="titleHeader">
|
||||
<div>
|
||||
<el-input style="width: 250px; height: 30px; margin-right: 10px; font-size: 14px" suffix-icon="Search"
|
||||
placeholder="请输入订单编号" v-model="orderNumber"></el-input>
|
||||
<el-button class="ml-5" type="primary" @click="load(orderNumber)" style="height: 30px;">搜索</el-button>
|
||||
<el-button type="warning" @click="reset" style="height:30px">重置</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
|
||||
title="是否导出本页数据?" @confirm="exportExcel" width=180>
|
||||
<template #reference>
|
||||
<el-button type="success" size="default" style="height:30px">导出为表格</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 数据展示层 -->
|
||||
<el-table v-loading="loading" :data="tableData" border stripe header-cell-class-name="headerBg"
|
||||
:cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange"
|
||||
:header-cell-style="{ 'text-align': 'center' }" :row-style="{ height: '70px' }">
|
||||
<el-table-column type="selection" width="55" fixed="left"></el-table-column>
|
||||
<el-table-column prop="id" label="订单序号" width="80">
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="地址信息" width="180">
|
||||
<el-table-column prop="addressSnapshot.name" label="收货人" />
|
||||
<el-table-column prop="addressSnapshot.phone" label="手机号" width="180" />
|
||||
<el-table-column prop="addressSnapshot.region" label="地区" width="180" />
|
||||
<el-table-column prop="addressSnapshot.detailAddress" label="详细地址" width="180" />
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="优惠券信息" width="50">-->
|
||||
<!-- <el-table-column prop="couponSnapshot.name" label="优惠卷名称" />-->
|
||||
<el-table-column prop="couponSnapshot.conditionAmount" label="优惠金额" />
|
||||
<el-table-column prop="totalAmount" label="订单实付金额"></el-table-column>
|
||||
<el-table-column prop="orderStatus" label="订单状态"></el-table-column>
|
||||
<el-table-column prop="trackingNumber" label="快递单号"></el-table-column>
|
||||
<el-table-column label="操作" width="220px" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button v-if="['待支付'].includes(scope.row.orderStatus)" size="small" @click="cancelOrder(scope.row)" type="warning" plain>
|
||||
取消订单
|
||||
</el-button>
|
||||
<el-button size="small" @click="showDetail(scope.$index, scope.row)">
|
||||
详情
|
||||
</el-button>
|
||||
<el-button v-if="['待发货'].includes(scope.row.orderStatus)" size="small"
|
||||
@click="openShipmentDialog(scope.row.id)">
|
||||
发货
|
||||
</el-button>
|
||||
<el-popconfirm confirm-button-text='是' cancel-button-text='否' icon="InfoFilled" icon-color="red"
|
||||
title="订单是否完成？" @confirm="orderTransaction(scope.row.id,'交易成功')" width=180>
|
||||
<template #reference>
|
||||
<el-button v-if="['待收货'].includes(scope.row.orderStatus)" size="small" type="success"
|
||||
plain>交易成功</el-button>
|
||||
<el-table-column prop="orderNumber" label="订单编号" width="300"></el-table-column>
|
||||
<el-table-column prop="createTime" label="下单时间" width="180"></el-table-column>
|
||||
<el-table-column prop="userName" label="用户名" width="120"></el-table-column>
|
||||
<el-table-column label="所购买的商品" width="150">
|
||||
<el-table-column label="展开" type="expand" width="150">
|
||||
<template #default="props">
|
||||
<el-table :data="props.row.orderItemList" border
|
||||
:cell-style="{ 'text-align': 'center', 'font-size': '14px' }">
|
||||
<el-table-column label="商品名称" prop="goodSnapshot.name" width="200" />
|
||||
<el-table-column label="商品图片" prop="goodSnapshot.goodImg" width="200">
|
||||
<template #default="scope">
|
||||
<div>
|
||||
<img :src=" downloadUrl + scope.row.goodSnapshot.goodImg.split(';')[0]" alt="" style="height: 50px;">
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类别" prop="goodSnapshot.type" width="200" />
|
||||
<el-table-column label="商品单价" prop="goodSnapshot.price" width="200" />
|
||||
<el-table-column label="数量" prop="quantity" width="200" />
|
||||
<el-table-column label="总价" prop="itemTotalAmount" width="200" />
|
||||
</el-table>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
|
||||
title="确定要退款吗？" @confirm="deleteOrder(scope.row)" width=180>
|
||||
<template #reference>
|
||||
<el-button v-if="['待发货','待收货'].includes(scope.row.orderStatus)" size="small" type="danger"
|
||||
plain>退款</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="地址信息" width="180">
|
||||
<el-table-column prop="addressSnapshot.name" label="收货人" />
|
||||
<el-table-column prop="addressSnapshot.phone" label="手机号" width="180" />
|
||||
<el-table-column prop="addressSnapshot.region" label="地区" width="180" />
|
||||
<el-table-column prop="addressSnapshot.detailAddress" label="详细地址" width="180" />
|
||||
</el-table-column>
|
||||
<el-table-column prop="totalAmount" label="订单实付金额"></el-table-column>
|
||||
<el-table-column prop="orderStatus" label="订单状态"></el-table-column>
|
||||
<el-table-column prop="trackingNumber" label="快递单号"></el-table-column>
|
||||
<el-table-column label="操作" width="220px" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button v-if="['待支付'].includes(scope.row.orderStatus)" size="small" @click="cancelOrder(scope.row)" type="warning" plain>
|
||||
取消订单
|
||||
</el-button>
|
||||
<el-button size="small" @click="showDetail(scope.$index, scope.row)">
|
||||
详情
|
||||
</el-button>
|
||||
<el-button v-if="['待发货'].includes(scope.row.orderStatus)" size="small"
|
||||
@click="openShipmentDialog(scope.row.id)">
|
||||
发货
|
||||
</el-button>
|
||||
<el-popconfirm confirm-button-text='是' cancel-button-text='否' icon="InfoFilled" icon-color="red"
|
||||
title="订单是否完成？" @confirm="orderTransaction(scope.row.id,'交易成功')" width=180>
|
||||
<template #reference>
|
||||
<el-button v-if="['待收货'].includes(scope.row.orderStatus)" size="small" type="success"
|
||||
plain>交易成功</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
|
||||
title="确定要退款吗？" @confirm="deleteOrder(scope.row)" width=180>
|
||||
<template #reference>
|
||||
<el-button v-if="['待发货'].includes(scope.row.orderStatus)" size="small" type="danger"
|
||||
plain>退款</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<!-- 分页器 -->
|
||||
<div style="padding: 10px 0">
|
||||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:current-page="searchParams.current" :page-size="searchParams.pageSize" :page-sizes="[5, 10, 15, 20]"
|
||||
:small="null" :disabled="null" :background="null" layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total" />
|
||||
:current-page="searchParams.current" :page-size="searchParams.pageSize" :page-sizes="[5, 10, 15, 20]"
|
||||
:small="null" :disabled="null" :background="null" layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total" />
|
||||
</div>
|
||||
<!-- 弹窗-->
|
||||
<el-dialog title="订单详情信息" v-model="DialogVisible" width="60%">
|
||||
|
|
@ -177,6 +183,8 @@ import myAxios from "@/api/myAxios";
|
|||
import { ElMessage } from "element-plus";
|
||||
import {SuccessInfo, ErrorInfo, WarnInfo} from "@/utils/messageInfo";
|
||||
import { downloadUrl } from '@/utils/formatImgUpload'
|
||||
import { entityOrderList } from "@/utils/excelUtil/entityOrderExcel";
|
||||
|
||||
const tableData: any = ref([]); //表单展示数据
|
||||
const total = ref(0);
|
||||
const title = ref('')
|
||||
|
|
@ -318,9 +326,13 @@ const orderTransaction = async (oid: any,msg: string) => {
|
|||
}
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
const exportExcel =()=> {
|
||||
entityOrderList(tableData.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style scoped>
|
||||
/* 使用 ::v-deep 来修改表头的对齐方式 */
|
||||
.el-table__header th {
|
||||
text-align: center;
|
||||
|
|
@ -336,4 +348,10 @@ const orderTransaction = async (oid: any,msg: string) => {
|
|||
min-width: 1000px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.titleHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px
|
||||
}
|
||||
</style>
|
||||
|
|
@ -42,16 +42,11 @@
|
|||
<el-table-column prop="price" label="价格" width="120"></el-table-column>
|
||||
<el-table-column prop="reservationDate" label="预约日期" width="200"></el-table-column>
|
||||
<el-table-column prop="timeSlot" label="预约时间段" width="200"></el-table-column>
|
||||
<el-table-column prop="isAvailable" label="是否可预约" width="200"></el-table-column>
|
||||
<el-table-column prop="minNumber" label="最小预约人数" width="150"></el-table-column>
|
||||
<el-table-column prop="currentNumber" label="当前预约人数" width="150"></el-table-column>
|
||||
<el-table-column prop="maxNumber" label="最大预约人数" width="150"></el-table-column>
|
||||
|
||||
<el-table-column label="商品当前时间段的预约情况" width="300">
|
||||
<el-table-column label="展开进行查看" type="expand" width="300">
|
||||
<template #default="props">
|
||||
<el-table :data="props.row.pendingServiceOrderVOList" border :row-style="{ height: '50px' }"
|
||||
:cell-style="{ 'text-align': 'center', 'font-size': '14px' }">
|
||||
:cell-style="{ 'text-align': 'center', 'font-size': '14px' }">
|
||||
<el-table-column label="订单明细id" prop="orderItemId" width="200" />
|
||||
<el-table-column label="订单编号" prop="orderNumber" width="300"></el-table-column>
|
||||
<el-table-column label="联系人姓名" prop="name" width="200" />
|
||||
|
|
@ -59,26 +54,29 @@
|
|||
<el-table-column label="购买数量" prop="quantity" width="200" />
|
||||
<el-table-column label="预估支付金额" prop="itemTotalAmount" width="200" />
|
||||
<el-table-column label="订单明细状态" prop="orderItemStatus" width="200"></el-table-column>
|
||||
|
||||
|
||||
<el-table-column label="操作" width="300px" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button size="small" @click="showDetail(scope.$index, scope.row)">
|
||||
详情
|
||||
</el-button>
|
||||
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
|
||||
title="确定要退款吗？" @confirm="refundOrder(scope.row)" width=180>
|
||||
title="确定要退款吗？" @confirm="refundOrder(scope.row)" width=180>
|
||||
<template #reference>
|
||||
<el-button :disabled="!['待发货'].includes(scope.row.orderItemStatus)" size="small" type="danger" plain>退款</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column prop="isAvailable" label="是否可预约" width="200"></el-table-column>
|
||||
<el-table-column prop="minNumber" label="最小预约人数" width="150"></el-table-column>
|
||||
<el-table-column prop="currentNumber" label="当前预约人数" width="150"></el-table-column>
|
||||
<el-table-column prop="maxNumber" label="最大预约人数" width="150"></el-table-column>
|
||||
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
<!-- 分页器 -->
|
||||
|
|
@ -156,7 +154,8 @@ const timeSlot = ref('')
|
|||
const searchParams: any = ref({ //封装分页
|
||||
current: 1, //当前页码
|
||||
pageSize: 5, //每页显示条数
|
||||
sortOrder: "descend", //降序
|
||||
sortField: "id",
|
||||
sortOrder: "ascend", //降序
|
||||
})
|
||||
const loading = ref(false)
|
||||
|
||||
|
|
@ -191,7 +190,7 @@ const getOrderList = async () => {
|
|||
if (res.data.code === 1) {
|
||||
tableData.value = res.data.data.records;
|
||||
totalPage.value = parseInt(res.data.data.total);
|
||||
console.log(tableData.value)
|
||||
console.log('----->',tableData.value.length)
|
||||
tableData.value.forEach((item: any) => {
|
||||
let total = 0;
|
||||
for (var i = 0; i < item.pendingServiceOrderVOList.length; i ++ ) {
|
||||
|
|
|
|||
|
|
@ -1,83 +1,89 @@
|
|||
<template>
|
||||
<div class="table_page">
|
||||
<div style="margin-bottom: 20px">
|
||||
<el-input style="width: 250px; height: 30px; margin-right: 10px; font-size: 14px" suffix-icon="Search" placeholder="请输入订单编号"
|
||||
v-model="orderNumber"></el-input>
|
||||
<el-button class="ml-5" type="primary" @click="load" style="height: 30px;">搜索</el-button>
|
||||
<el-button type="warning" @click="reset" style="height:30px">重置</el-button>
|
||||
</div>
|
||||
<!-- 数据展示层 -->
|
||||
<el-table v-loading="loading" :data="tableData" border stripe header-cell-class-name="headerBg"
|
||||
:cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange"
|
||||
:header-cell-style="{ 'text-align': 'center' }" :row-style="{ height: '70px' }">
|
||||
<el-table-column type="selection" width="55" fixed="left"></el-table-column>
|
||||
<el-table-column prop="id" label="订单序号" width="80">
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="orderNumber" label="订单编号" width="300"></el-table-column>
|
||||
<el-table-column prop="createTime" label="下单时间" width="180"></el-table-column>
|
||||
<el-table-column prop="userName" label="用户名" width="120"></el-table-column>
|
||||
<el-table-column label="所购买的商品" width="150">
|
||||
<el-table-column label="展开" type="expand" width="150">
|
||||
<template #default="props">
|
||||
<el-table :data="props.row.orderItemList" border :cell-style="{ 'text-align': 'center', 'font-size': '14px'}">
|
||||
<el-table-column label="商品名称" prop="goodSnapshot.name" width="200"/>
|
||||
<el-table-column label="商品图片" prop="goodSnapshot.goodImg" width="200">
|
||||
<template #default="scope">
|
||||
<div>
|
||||
<img :src="downloadUrl + scope.row.goodSnapshot.goodImg.split(';')[0]" alt="" style="height: 50px;">
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类别" prop="goodSnapshot.type" width="200"/>
|
||||
<el-table-column label="商品单价" prop="goodSnapshot.price" width="200" />
|
||||
<!-- <el-table-column label="是否是限定商品" prop="goodSnapshot.festivalOrder" width="150"/>-->
|
||||
<el-table-column label="数量" prop="quantity" width="200"/>
|
||||
<el-table-column label="总价" prop="itemTotalAmount" width="200"/>
|
||||
<el-table-column label="预约日期" prop="reservationDate" width="200"></el-table-column>
|
||||
<el-table-column label="预约时间段" prop="timeSlot" width="200"></el-table-column>
|
||||
</el-table>
|
||||
<div class="titleHeader">
|
||||
<div>
|
||||
<el-input style="width: 250px; height: 30px; margin-right: 10px; font-size: 14px" suffix-icon="Search" placeholder="请输入订单编号"
|
||||
v-model="orderNumber"></el-input>
|
||||
<el-button class="ml-5" type="primary" @click="load" style="height: 30px;">搜索</el-button>
|
||||
<el-button type="warning" @click="reset" style="height:30px">重置</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
|
||||
title="是否导出本页数据?" @confirm="serviceOrderList( tableData )" width=180>
|
||||
<template #reference>
|
||||
<el-button type="success" size="default" style="height:30px">导出为表格</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 数据展示层 -->
|
||||
<el-table v-loading="loading" :data="tableData" border stripe header-cell-class-name="headerBg"
|
||||
:cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange"
|
||||
:header-cell-style="{ 'text-align': 'center' }" :row-style="{ height: '70px' }">
|
||||
<el-table-column type="selection" width="55" fixed="left"></el-table-column>
|
||||
<el-table-column prop="id" label="订单序号" width="80">
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="联系人信息" width="180">
|
||||
<el-table-column prop="contactsSnapshot.name" label="姓名" />
|
||||
<el-table-column prop="contactsSnapshot.phone" label="手机号" width="180"/>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="优惠券信息" width="50">-->
|
||||
<!-- <el-table-column prop="couponSnapshot.name" label="优惠卷名称" />-->
|
||||
<el-table-column prop="couponSnapshot.conditionAmount" label="优惠金额" />
|
||||
<!-- </el-table-column>-->
|
||||
<el-table-column prop="totalAmount" label="订单实付金额"></el-table-column>
|
||||
<el-table-column prop="orderStatus" label="订单状态"></el-table-column>
|
||||
<el-table-column label="操作" width="160px" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-popconfirm confirm-button-text='是' cancel-button-text='否' icon="InfoFilled" icon-color="red"
|
||||
title="是否取消订单？" @confirm="cancelOrder(scope.row)" width=180>
|
||||
<template #reference>
|
||||
<el-button v-if="['待支付'].includes(scope.row.orderStatus)" size="small" type="primary"
|
||||
plain>取消订单</el-button>
|
||||
<el-table-column prop="orderNumber" label="订单编号" width="300"></el-table-column>
|
||||
<el-table-column prop="createTime" label="下单时间" width="180"></el-table-column>
|
||||
<el-table-column prop="userName" label="用户名" width="120"></el-table-column>
|
||||
<el-table-column label="所购买的商品" width="150">
|
||||
<el-table-column label="展开" type="expand" width="150">
|
||||
<template #default="props">
|
||||
<el-table :data="props.row.orderItemList" border :cell-style="{ 'text-align': 'center', 'font-size': '14px'}">
|
||||
<el-table-column label="商品名称" prop="goodSnapshot.name" width="200"/>
|
||||
<el-table-column label="商品图片" prop="goodSnapshot.goodImg" width="200">
|
||||
<template #default="scope">
|
||||
<div>
|
||||
<img :src="downloadUrl + scope.row.goodSnapshot.goodImg.split(';')[0]" alt="" style="height: 50px;">
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类别" prop="goodSnapshot.type" width="200"/>
|
||||
<el-table-column label="商品单价" prop="goodSnapshot.price" width="200" />
|
||||
<el-table-column label="数量" prop="quantity" width="200"/>
|
||||
<el-table-column label="总价" prop="itemTotalAmount" width="200"/>
|
||||
<el-table-column label="预约日期" prop="reservationDate" width="200"></el-table-column>
|
||||
<el-table-column label="预约时间段" prop="timeSlot" width="200"></el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-popconfirm confirm-button-text='是' cancel-button-text='否' icon="InfoFilled" icon-color="red"
|
||||
title="订单已完成？" @confirm="orderTransaction(scope.row.id,'交易成功')" width=180>
|
||||
<template #reference>
|
||||
<el-button v-if="['待收货'].includes(scope.row.orderStatus)" size="small" type="primary"
|
||||
plain>完成订单</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
|
||||
title="确定要退款吗？" @confirm="deleteOrder(scope.row)" width=180>
|
||||
<template #reference>
|
||||
<el-button v-if="['待发货','待收货'].includes(scope.row.orderStatus)" size="small" type="danger"
|
||||
plain>退款</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="联系人信息" width="180">
|
||||
<el-table-column prop="contactsSnapshot.name" label="姓名" />
|
||||
<el-table-column prop="contactsSnapshot.phone" label="手机号" width="180"/>
|
||||
</el-table-column>
|
||||
<el-table-column prop="couponSnapshot.conditionAmount" label="优惠金额" />
|
||||
<el-table-column prop="totalAmount" label="订单实付金额"></el-table-column>
|
||||
<el-table-column prop="orderStatus" label="订单状态"></el-table-column>
|
||||
<el-table-column label="操作" width="160px" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-popconfirm confirm-button-text='是' cancel-button-text='否' icon="InfoFilled" icon-color="red"
|
||||
title="是否取消订单？" @confirm="cancelOrder(scope.row)" width=180>
|
||||
<template #reference>
|
||||
<el-button v-if="['待支付'].includes(scope.row.orderStatus)" size="small" type="primary"
|
||||
plain>取消订单</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-popconfirm confirm-button-text='是' cancel-button-text='否' icon="InfoFilled" icon-color="red"
|
||||
title="订单已完成？" @confirm="orderTransaction(scope.row,'交易成功')" width=180>
|
||||
<template #reference>
|
||||
<el-button v-if="['待收货','待发货'].includes(scope.row.orderStatus)" size="small" type="primary"
|
||||
plain>完成订单</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
|
||||
title="确定要退款吗？" @confirm="deleteOrder(scope.row)" width=180>
|
||||
<template #reference>
|
||||
<el-button v-if="['待发货'].includes(scope.row.orderStatus)" size="small" type="danger"
|
||||
plain>退款</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<!-- 分页器 -->
|
||||
<div style="padding: 10px 0">
|
||||
|
|
@ -94,6 +100,8 @@ import myAxios from "@/api/myAxios";
|
|||
import { ElMessage } from "element-plus";
|
||||
import {SuccessInfo, ErrorInfo, WarnInfo} from "@/utils/messageInfo";
|
||||
import { downloadUrl } from '@/utils/formatImgUpload'
|
||||
import { serviceOrderList } from "@/utils/excelUtil/serviceOrderExcel";
|
||||
import { getCurrentDate,getMaxDate,compareDates } from "@/utils/YYYYMMDD";
|
||||
|
||||
const tableData: any = ref([]); //表单展示数据
|
||||
const total = ref(0);
|
||||
|
|
@ -172,11 +180,18 @@ const cancelOrder = async (row:any)=>{ //取消订单的方法(未支付能取
|
|||
ErrorInfo('请求错误')
|
||||
}
|
||||
}
|
||||
const orderTransaction = async (oid: any, msg: string) => { //订单完成方法
|
||||
// console.log('当前订单信息---->',oid)
|
||||
// loading.value = true
|
||||
const orderTransaction = async (obj: any, msg: string) => { //订单完成方法
|
||||
let maxBookDate : any = [] //最大预约日期
|
||||
obj.orderItemList.forEach((item:any) => {
|
||||
maxBookDate.push(item.reservationDate)
|
||||
})
|
||||
maxBookDate = getMaxDate(maxBookDate)
|
||||
if(msg === '交易成功' && compareDates(maxBookDate,getCurrentDate()) ) {
|
||||
WarnInfo('未到服务日期不能完成订单!')
|
||||
return;
|
||||
}
|
||||
const res = await myAxios.post('/order/update/all/orderStatus',{
|
||||
id: oid,
|
||||
id: obj.id,
|
||||
orderStatus: msg
|
||||
})
|
||||
if (res.data.code === 1) {
|
||||
|
|
@ -202,4 +217,10 @@ const orderTransaction = async (oid: any, msg: string) => { //订单完成方
|
|||
min-width: 1000px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.titleHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px
|
||||
}
|
||||
</style>
|
||||
118
src/views/OtherManagement/NoticeAndFavorable.vue
Normal file
118
src/views/OtherManagement/NoticeAndFavorable.vue
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
<template>
|
||||
<div class="flexCard">
|
||||
<!-- 表单 ref 和 prop绑定 用于重置表单 -->
|
||||
<el-card class="form-container" shadow="never" >
|
||||
<el-form >
|
||||
<el-form-item label="编辑限时优惠价格">
|
||||
<el-input-number v-model="favorablePrice" min="0" :precision="2" :step="1" size="large" />
|
||||
<el-button style="margin-left: 50px" type="primary" @click="favorableOnSubmit" size="large">保存</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="编辑预约须知" v-loading="loading">
|
||||
<richTextUtil @richTextContent="getInfo" v-model:context="previewRichText"/>
|
||||
</el-form-item>
|
||||
<el-button style="margin-left: 100px" type="primary" @click="NoticeOnSubmit" size="large">保存</el-button>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { SuccessInfo, WarnInfo, CommInfo } from '@/utils/messageInfo'; //封装ElMessage提示
|
||||
import myAxios from "@/api/myAxios";
|
||||
import RichTextUtil from "@/layout/components/richTextUtil.vue";
|
||||
|
||||
|
||||
const previewRichText = ref('') //回显
|
||||
const noticeRichText = ref('') //用于提交的
|
||||
const favorablePrice = ref(0) //限时优惠价格
|
||||
const loading = ref(true) //回显没那么快
|
||||
|
||||
onMounted(() => {
|
||||
getNotice()
|
||||
getFavorable()
|
||||
setTimeout(()=>{
|
||||
loading.value = false
|
||||
},1500)
|
||||
})
|
||||
|
||||
|
||||
const getNotice = async () => { //获取预约须知
|
||||
const res = await myAxios.get('/global/query/notice')
|
||||
console.log(res.data)
|
||||
if(res.data.code === 1) {
|
||||
previewRichText.value = res.data.data
|
||||
}
|
||||
}
|
||||
|
||||
const getFavorable = async () => { //获取优惠价格
|
||||
const res = await myAxios.get('/global/query/coupon/price')
|
||||
if(res.data.code === 1) {
|
||||
favorablePrice.value = res.data.data
|
||||
}
|
||||
}
|
||||
|
||||
const favorableOnSubmit = async () => {
|
||||
const res = await myAxios.get('/global/update/coupon/price',{ params: { bigDecimal: favorablePrice.value } })
|
||||
if(res.data.code === 1) {
|
||||
await getFavorable()
|
||||
SuccessInfo('更新成功')
|
||||
} else {
|
||||
WarnInfo('服务错误')
|
||||
}
|
||||
}
|
||||
|
||||
//提交表单
|
||||
const NoticeOnSubmit = async () => { //提交预约须知
|
||||
if(noticeRichText.value === '<p><br></p>') {
|
||||
WarnInfo('预约须知不能为空')
|
||||
return;
|
||||
}
|
||||
const res = await myAxios.get('/global/update/notice',{params:{ richText: encode64(noticeRichText.value) }})
|
||||
if(res.data.code === 1) {
|
||||
await getNotice()
|
||||
SuccessInfo('更新成功')
|
||||
} else {
|
||||
WarnInfo('服务错误')
|
||||
}
|
||||
}
|
||||
|
||||
const getInfo = (info: any) => { //富文本赋值
|
||||
previewRichText.value = info
|
||||
noticeRichText.value = info
|
||||
}
|
||||
|
||||
//字符串转为base64编码
|
||||
function encode64(text: string): string {
|
||||
return btoa(String.fromCharCode(...new TextEncoder().encode(text)))
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.flexCard {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
min-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
.form-container {
|
||||
/*width: 700px;*/
|
||||
margin: 0 auto;
|
||||
height: 800px;
|
||||
overflow: auto;
|
||||
}
|
||||
.form {
|
||||
/* width: 500px; */
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
.btnBox {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,11 +1,21 @@
|
|||
<template>
|
||||
<div class="mianContent">
|
||||
<div style="margin-bottom: 20px">
|
||||
<div class="titleHeader">
|
||||
<div>
|
||||
<el-input style="width: 250px; height: 30px; margin-right: 10px; font-size: 14px" suffix-icon="Search"
|
||||
placeholder="请输入订单编号" v-model="orderNumber"></el-input>
|
||||
<el-button class="ml-5" type="primary" @click="load" style="height: 30px;">搜索</el-button>
|
||||
<el-button type="warning" @click="reset" style="height:30px">重置</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
|
||||
title="是否导出本页数据?" @confirm="rentOrderList(tableData)" width=180>
|
||||
<template #reference>
|
||||
<el-button type="success" size="default" style="height:30px">导出为表格</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 数据展示层 -->
|
||||
<el-table v-loading="loading" :data="tableData" border stripe header-cell-class-name="headerBg"
|
||||
:cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange"
|
||||
|
|
@ -87,6 +97,8 @@ import { ElMessage } from "element-plus";
|
|||
import {SuccessInfo, ErrorInfo, WarnInfo} from "@/utils/messageInfo";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import emitter from "@/utils/emitter";
|
||||
import {bookOrderList} from "@/utils/excelUtil/bookOrderExcel";
|
||||
import {rentOrderList} from "@/utils/excelUtil/rentOrderExcel";
|
||||
const tableData: any = ref([]); //表单展示数据
|
||||
const total = ref(0);
|
||||
const orderNumber = ref('')
|
||||
|
|
@ -119,7 +131,7 @@ const getOrderList = async () => {
|
|||
try {
|
||||
searchParams.value.orderNumber = orderNumber.value
|
||||
const res = await myAxios.post('/clothesRent/list', { ...searchParams.value });
|
||||
// console.log('订单信息--->', res.data.data);
|
||||
console.log('订单信息--->', res.data.data);
|
||||
if (res.data.code === 1) {
|
||||
tableData.value = res.data.data.records;
|
||||
total.value = parseInt(res.data.data.total)
|
||||
|
|
@ -205,4 +217,9 @@ const cancelOrder = async (row: any) => { //取消订单的方法(未支付能
|
|||
width: 100%;
|
||||
min-width: 1000px;
|
||||
}
|
||||
.titleHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px
|
||||
}
|
||||
</style>
|
||||
|
|
@ -321,7 +321,7 @@ const onSearch = (data : String)=>{ //搜索按钮方法
|
|||
//批量删除
|
||||
const delBatch = async ()=>{
|
||||
console.log(idList.value);
|
||||
const res = await myAxios.post('/goods/delBatch',{
|
||||
const res = await myAxios.post('/goods/delBatch/service',{
|
||||
idList: idList.value
|
||||
})
|
||||
console.log(res.data);
|
||||
|
|
@ -330,7 +330,7 @@ const delBatch = async ()=>{
|
|||
type: 'success',
|
||||
message: '批量删除成功'
|
||||
})
|
||||
getProductList()
|
||||
await getProductList()
|
||||
} else {
|
||||
ElMessage.error('删除失败')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
</div>
|
||||
</el-form>
|
||||
<div style="display: flex;">
|
||||
<el-button @click="changeBtnStatus">{{ btnText }}</el-button>
|
||||
<el-button type="primary" @click="saveEdit" :disabled="disabled">确认</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
|
@ -37,12 +38,12 @@ import { ref, onBeforeMount } from 'vue'
|
|||
import { SuccessInfo, WarnInfo } from '@/utils/messageInfo';
|
||||
import { useRoute } from "vue-router";
|
||||
import PreviewSingleImgUpload from "@/utils/imgUpload/PreviewSingleImgUpload.vue";
|
||||
import {invInput} from "@/utils/entityProduct/globalVar";
|
||||
|
||||
|
||||
const disabled = ref(true) //表单是否禁用
|
||||
const userForm: any = ref({}) //用户表单
|
||||
const route = useRoute()
|
||||
const btnText = ref('编辑') //编辑按钮
|
||||
|
||||
onBeforeMount(()=>{
|
||||
if(route.params.flag === '1') {
|
||||
|
|
@ -62,6 +63,17 @@ const getUserInfo = async () => {
|
|||
}
|
||||
}
|
||||
|
||||
const changeBtnStatus = () => {
|
||||
if(btnText.value === '编辑') {
|
||||
disabled.value = false
|
||||
btnText.value = '取消'
|
||||
} else if(btnText.value === '取消') {
|
||||
disabled.value = true
|
||||
btnText.value = '编辑'
|
||||
getUserInfo()
|
||||
}
|
||||
}
|
||||
|
||||
const saveEdit = async ()=>{ //保存用户信息
|
||||
const res = await myAxios.post('/user/update',{
|
||||
id: userForm.value.id,
|
||||
|
|
@ -69,11 +81,13 @@ const saveEdit = async ()=>{ //保存用户信息
|
|||
userName: userForm.value.userName,
|
||||
userAvatar: userForm.value.userAvatar,
|
||||
phone: userForm.value.phone,
|
||||
userRole: userForm.value.userRole
|
||||
userRole: userForm.value.userRole,
|
||||
points: userForm.value.points
|
||||
})
|
||||
console.log('更新信息--->',res.data)
|
||||
if (res.data.code === 1) {
|
||||
disabled.value = true
|
||||
btnText.value = '编辑'
|
||||
SuccessInfo('更新成功')
|
||||
} else {
|
||||
WarnInfo('更新失败')
|
||||
|
|
|
|||
|
|
@ -69,7 +69,8 @@ const saveEdit = async ()=>{ //保存用户信息
|
|||
userName: userForm.value.userName,
|
||||
userAvatar: userForm.value.userAvatar,
|
||||
phone: userForm.value.phone,
|
||||
userRole: userForm.value.userRole
|
||||
userRole: userForm.value.userRole,
|
||||
points: userForm.value.points
|
||||
})
|
||||
console.log('更新信息--->',res.data)
|
||||
if (res.data.code === 1) {
|
||||
|
|
|
|||
150
src/views/excelTest.vue
Normal file
150
src/views/excelTest.vue
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-table v-loading="loading" :data="tableData" border stripe header-cell-class-name="headerBg"
|
||||
:cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange"
|
||||
:header-cell-style="{ 'text-align': 'center' }" :row-style="{ height: '70px' }" id="my-table">
|
||||
<el-table-column type="selection" width="55" fixed="left"></el-table-column>
|
||||
<el-table-column prop="id" label="订单序号" width="80">
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="orderNumber" label="订单编号" width="300"></el-table-column>
|
||||
<el-table-column prop="createTime" label="下单时间" width="180"></el-table-column>
|
||||
<el-table-column prop="userName" label="用户名" width="120"></el-table-column>
|
||||
<el-table-column label="所购买的商品" width="150">
|
||||
<el-table-column label="展开" type="expand" width="150">
|
||||
<template #default="props">
|
||||
<el-table :data="props.row.orderItemList" border :cell-style="{ 'text-align': 'center', 'font-size': '14px' }">
|
||||
<el-table-column label="商品名称" prop="goodSnapshot.name" width="200" />
|
||||
<el-table-column label="商品图片" prop="goodSnapshot.goodImg" width="200">
|
||||
<template #default="scope">
|
||||
<div>
|
||||
<img :src="downloadUrl + scope.row.goodSnapshot.goodImg.split(';')[0]" alt="" style="height: 50px;">
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类别" prop="goodSnapshot.type" width="200" />
|
||||
<el-table-column label="商品单价" prop="goodSnapshot.price" width="200" />
|
||||
<el-table-column label="数量" prop="quantity" width="200" />
|
||||
<el-table-column label="总价" prop="itemTotalAmount" width="200" />
|
||||
</el-table>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="地址信息" width="180">
|
||||
<el-table-column prop="addressSnapshot.name" label="收货人" />
|
||||
<el-table-column prop="addressSnapshot.phone" label="手机号" width="180" />
|
||||
<el-table-column prop="addressSnapshot.region" label="地区" width="180" />
|
||||
<el-table-column prop="addressSnapshot.detailAddress" label="详细地址" width="180" />
|
||||
</el-table-column>
|
||||
<el-table-column prop="couponSnapshot.conditionAmount" label="优惠金额" />
|
||||
<el-table-column prop="totalAmount" label="订单实付金额"></el-table-column>
|
||||
<el-table-column prop="orderStatus" label="订单状态"></el-table-column>
|
||||
<el-table-column prop="trackingNumber" label="快递单号"></el-table-column>
|
||||
<el-table-column label="操作" width="220px" fixed="right">
|
||||
<template #default="scope">
|
||||
<!-- 操作按钮（如取消订单、发货等） -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-button @click="exportToExcel">导出为 Excel</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ExcelJS from 'exceljs';
|
||||
import { saveAs } from 'file-saver';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
tableData: [
|
||||
// 示例数据
|
||||
{
|
||||
id: 1,
|
||||
orderNumber: '12345',
|
||||
createTime: '2025-03-28',
|
||||
userName: '张三',
|
||||
orderItemList: [
|
||||
{
|
||||
goodSnapshot: { name: '商品A', goodImg: 'imageA.jpg', type: '电子', price: 100 },
|
||||
quantity: 2,
|
||||
itemTotalAmount: 200,
|
||||
},
|
||||
{
|
||||
goodSnapshot: { name: '商品B', goodImg: 'imageB.jpg', type: '服装', price: 50 },
|
||||
quantity: 1,
|
||||
itemTotalAmount: 50,
|
||||
},
|
||||
],
|
||||
addressSnapshot: { name: '李四', phone: '1234567890', region: '北京', detailAddress: '某地址' },
|
||||
couponSnapshot: { conditionAmount: 30 },
|
||||
totalAmount: 250,
|
||||
orderStatus: '待支付',
|
||||
trackingNumber: '',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
exportToExcel() {
|
||||
const workbook = new ExcelJS.Workbook();
|
||||
const worksheet = workbook.addWorksheet('Order Details');
|
||||
|
||||
// 设置列标题
|
||||
worksheet.columns = [
|
||||
{ header: '订单序号', key: 'index', width: 10 },
|
||||
{ header: '订单编号', key: 'orderNumber', width: 20 },
|
||||
{ header: '下单时间', key: 'createTime', width: 15 },
|
||||
{ header: '用户名', key: 'userName', width: 15 },
|
||||
{ header: '商品名称', key: 'goodName', width: 20 },
|
||||
{ header: '商品单价', key: 'price', width: 15 },
|
||||
{ header: '数量', key: 'quantity', width: 10 },
|
||||
{ header: '总价', key: 'itemTotalAmount', width: 15 },
|
||||
{ header: '收货人', key: 'recipient', width: 20 },
|
||||
{ header: '手机号', key: 'phone', width: 15 },
|
||||
{ header: '地区', key: 'region', width: 20 },
|
||||
{ header: '详细地址', key: 'detailAddress', width: 30 },
|
||||
{ header: '优惠金额', key: 'discount', width: 15 },
|
||||
{ header: '订单实付金额', key: 'totalAmount', width: 15 },
|
||||
{ header: '订单状态', key: 'orderStatus', width: 15 },
|
||||
{ header: '快递单号', key: 'trackingNumber', width: 20 },
|
||||
];
|
||||
|
||||
// 遍历 tableData 并填充数据
|
||||
this.tableData.forEach((order, index) => {
|
||||
// 展平每个订单的数据
|
||||
order.orderItemList.forEach((item) => {
|
||||
worksheet.addRow({
|
||||
index: index + 1,
|
||||
orderNumber: order.orderNumber,
|
||||
createTime: order.createTime,
|
||||
userName: order.userName,
|
||||
goodName: item.goodSnapshot.name,
|
||||
price: item.goodSnapshot.price,
|
||||
quantity: item.quantity,
|
||||
itemTotalAmount: item.itemTotalAmount,
|
||||
recipient: order.addressSnapshot.name,
|
||||
phone: order.addressSnapshot.phone,
|
||||
region: order.addressSnapshot.region,
|
||||
detailAddress: order.addressSnapshot.detailAddress,
|
||||
discount: order.couponSnapshot.conditionAmount,
|
||||
totalAmount: order.totalAmount,
|
||||
orderStatus: order.orderStatus,
|
||||
trackingNumber: order.trackingNumber,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// 导出为 Excel 文件
|
||||
workbook.xlsx.writeBuffer().then((buffer) => {
|
||||
const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
|
||||
saveAs(blob, 'orders.xlsx');
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
110
src/views/test2.vue
Normal file
110
src/views/test2.vue
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
import { saveAs } from "file-saver";
|
||||
import ExcelJS from "exceljs";
|
||||
|
||||
// 用于将图片转换为 Base64 编码
|
||||
function getBase64Image(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image();
|
||||
img.crossOrigin = 'Anonymous'; // 允许跨域获取
|
||||
img.onload = () => {
|
||||
const canvas = document.createElement('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
canvas.height = img.height;
|
||||
canvas.width = img.width;
|
||||
ctx.drawImage(img, 0, 0);
|
||||
const dataURL = canvas.toDataURL('image/png');
|
||||
resolve(dataURL);
|
||||
};
|
||||
img.onerror = (error) => reject(error);
|
||||
img.src = url;
|
||||
});
|
||||
}
|
||||
|
||||
export const serviceOrderList = (tableData, downloadUrl) => {
|
||||
const workbook = new ExcelJS.Workbook();
|
||||
const worksheet = workbook.addWorksheet('Order Details');
|
||||
|
||||
// 设置列标题
|
||||
worksheet.columns = [
|
||||
{ header: '订单序号', key: 'index', width: 10 },
|
||||
{ header: '订单编号', key: 'orderNumber', width: 30 },
|
||||
{ header: '下单时间', key: 'createTime', width: 20 },
|
||||
{ header: '用户名', key: 'userName', width: 15 },
|
||||
{ header: '所购买的商品', key: 'goodName', width: 30 },
|
||||
{ header: '商品图片', key: 'goodImg', width: 20 },
|
||||
{ header: '商品类别', key: 'type', width: 20 },
|
||||
{ header: '商品单价', key: 'price', width: 15 },
|
||||
{ header: '数量', key: 'quantity', width: 10 },
|
||||
{ header: '总价', key: 'itemTotalAmount', width: 15 },
|
||||
{ header: '预约日期', key: 'reservationDate', width: 15 },
|
||||
{ header: '预约时间段', key: 'timeSlot', width: 15 },
|
||||
{ header: '联系人姓名', key: 'contactName', width: 20 },
|
||||
{ header: '联系人手机号', key: 'contactPhone', width: 20 },
|
||||
{ header: '订单实付金额', key: 'totalAmount', width: 20 },
|
||||
{ header: '订单状态', key: 'orderStatus', width: 20 },
|
||||
];
|
||||
|
||||
// 遍历 tableData 并填充数据
|
||||
tableData.forEach((order, index) => {
|
||||
// 展平每个订单的数据
|
||||
order.orderItemList.forEach(async (item) => {
|
||||
// 订单每个商品的行
|
||||
const row = worksheet.addRow({
|
||||
index: index + 1,
|
||||
orderNumber: order.orderNumber,
|
||||
createTime: order.createTime,
|
||||
userName: order.userName,
|
||||
goodName: item.goodSnapshot.name,
|
||||
goodImg: item.goodSnapshot.goodImg.split(';')[0], // 提取商品图片路径
|
||||
type: item.goodSnapshot.type,
|
||||
price: item.goodSnapshot.price,
|
||||
quantity: item.quantity,
|
||||
itemTotalAmount: item.itemTotalAmount,
|
||||
reservationDate: item.reservationDate,
|
||||
timeSlot: item.timeSlot,
|
||||
contactName: order.contactsSnapshot.name,
|
||||
contactPhone: order.contactsSnapshot.phone,
|
||||
totalAmount: order.totalAmount,
|
||||
orderStatus: order.orderStatus,
|
||||
});
|
||||
|
||||
// 获取商品图片的 Base64 编码
|
||||
try {
|
||||
const imageUrl = 'https://www.carboner.cn:8888/api/file/downloadFile?objectKey=' + row.getCell('goodImg').value;
|
||||
const base64Image = await getBase64Image(imageUrl);
|
||||
|
||||
// 将 Base64 图片添加到 Excel
|
||||
const imageId = workbook.addImage({
|
||||
base64: base64Image,
|
||||
extension: 'png',
|
||||
});
|
||||
|
||||
// 设置图片在 Excel 单元格中的显示
|
||||
worksheet.getRow(row.number).getCell('goodImg').value = { type: 'image', imageId };
|
||||
worksheet.getRow(row.number).getCell('goodImg').style = {
|
||||
alignment: { vertical: 'middle', horizontal: 'center' },
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('图片转换失败', error);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 自适应列宽
|
||||
worksheet.columns.forEach((column) => {
|
||||
let maxLength = 0;
|
||||
column.eachCell({ includeEmpty: true }, (cell) => {
|
||||
const cellValue = cell.value ? String(cell.value) : ''; // 确保空值也处理
|
||||
maxLength = Math.max(maxLength, cellValue.length);
|
||||
});
|
||||
|
||||
// 设置列宽，确保列宽适应最大值
|
||||
column.width = maxLength + 2; // 留出额外的空间
|
||||
});
|
||||
|
||||
// 导出为 Excel 文件
|
||||
workbook.xlsx.writeBuffer().then((buffer) => {
|
||||
const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
|
||||
saveAs(blob, '订单信息.xlsx');
|
||||
});
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user