|
|
|
|
@ -1,14 +1,17 @@
|
|
|
|
|
<template>
|
|
|
|
|
<!-- 定义一个订单模块的容器 -->
|
|
|
|
|
<div class="mod-order-order">
|
|
|
|
|
<!-- 表单区域，用于输入筛选条件 -->
|
|
|
|
|
<el-form :inline="true" :model="dataForm" @keyup.enter="getDataList(page)">
|
|
|
|
|
<!-- 输入框：订单编号 -->
|
|
|
|
|
<el-form
|
|
|
|
|
:inline="true"
|
|
|
|
|
:model="dataForm"
|
|
|
|
|
@keyup.enter="getDataList(page)"
|
|
|
|
|
>
|
|
|
|
|
<el-form-item label="订单编号:">
|
|
|
|
|
<el-input v-model="dataForm.orderNumber" placeholder="订单编号" clearable />
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="dataForm.orderNumber"
|
|
|
|
|
placeholder="订单编号"
|
|
|
|
|
clearable
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<!-- 时间选择器：下单时间范围 -->
|
|
|
|
|
<el-form-item label="下单时间:">
|
|
|
|
|
<el-date-picker
|
|
|
|
|
v-model="dateRange"
|
|
|
|
|
@ -19,59 +22,95 @@
|
|
|
|
|
end-placeholder="结束日期"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<!-- 下拉菜单：订单状态 -->
|
|
|
|
|
<el-form-item label="订单状态:">
|
|
|
|
|
<el-select v-model="dataForm.status" clearable placeholder="请选择订单状态">
|
|
|
|
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="dataForm.status"
|
|
|
|
|
clearable
|
|
|
|
|
placeholder="请选择订单状态"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in options"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<!-- 按钮组：查询、导出、清空 -->
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button type="primary" icon="el-icon-search" @click="getDataList()">查询</el-button>
|
|
|
|
|
<el-button v-if="isAuth('order:order:waitingConsignmentExcel')" type="primary" @click="showConsignmentInfo()">
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
icon="el-icon-search"
|
|
|
|
|
@click="getDataList()"
|
|
|
|
|
>
|
|
|
|
|
查询
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button
|
|
|
|
|
v-if="isAuth('order:order:waitingConsignmentExcel')"
|
|
|
|
|
type="primary"
|
|
|
|
|
@click="showConsignmentInfo()"
|
|
|
|
|
>
|
|
|
|
|
导出待发货订单
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button v-if="isAuth('order:order:soldExcel')" type="primary" @click="getSoldExcel()">
|
|
|
|
|
<el-button
|
|
|
|
|
v-if="isAuth('order:order:soldExcel')"
|
|
|
|
|
type="primary"
|
|
|
|
|
@click="getSoldExcel()"
|
|
|
|
|
>
|
|
|
|
|
导出销售记录
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button @click="clearDatas()">清空</el-button>
|
|
|
|
|
<el-button @click="clearDatas()">
|
|
|
|
|
清空
|
|
|
|
|
</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
|
|
|
|
|
<!-- 主要内容区 -->
|
|
|
|
|
<div class="main">
|
|
|
|
|
<div class="content">
|
|
|
|
|
<!-- 标题栏，显示商品信息头部 -->
|
|
|
|
|
<div class="tit">
|
|
|
|
|
<el-row style="width:100%">
|
|
|
|
|
<el-col :span="10"><span class="item product">商品</span></el-col>
|
|
|
|
|
<el-col :span="3"><span class="item">成交单价/购买数量</span></el-col>
|
|
|
|
|
<el-col :span="3"><span class="item">实付金额</span></el-col>
|
|
|
|
|
<el-col :span="3"><span class="item">支付方式</span></el-col>
|
|
|
|
|
<el-col :span="3"><span class="item">订单状态</span></el-col>
|
|
|
|
|
<el-col :span="2"><span class="item">操作</span></el-col>
|
|
|
|
|
<el-col :span="10">
|
|
|
|
|
<span class="item product">商品</span>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="3">
|
|
|
|
|
<span class="item">成交单价/购买数量</span>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="3">
|
|
|
|
|
<span class="item">实付金额</span>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="3">
|
|
|
|
|
<span class="item">支付方式</span>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="3">
|
|
|
|
|
<span class="item">订单状态</span>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="2">
|
|
|
|
|
<span class="item">操作</span>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 订单列表 -->
|
|
|
|
|
<div v-for="order in dataList" :key="order.orderId" class="prod">
|
|
|
|
|
<!-- 订单标题 -->
|
|
|
|
|
<div
|
|
|
|
|
v-for="order in dataList"
|
|
|
|
|
:key="order.orderId"
|
|
|
|
|
class="prod"
|
|
|
|
|
>
|
|
|
|
|
<div class="prod-tit">
|
|
|
|
|
<span>订单编号：{{ order.orderNumber }}</span>
|
|
|
|
|
<span>下单时间：{{ order.createTime }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 订单内容 -->
|
|
|
|
|
<div class="prod-cont">
|
|
|
|
|
<el-row style="width:100%">
|
|
|
|
|
<!-- 商品信息 -->
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
<div class="prod-item">
|
|
|
|
|
<div v-for="orderItem in order.orderItems" :key="orderItem.orderItemId" class="items name">
|
|
|
|
|
<div
|
|
|
|
|
v-for="orderItem in order.orderItems"
|
|
|
|
|
:key="orderItem.orderItemId"
|
|
|
|
|
class="items name"
|
|
|
|
|
>
|
|
|
|
|
<div class="prod-image">
|
|
|
|
|
<img alt="" :src="resourcesUrl + orderItem.pic" style="height:100px;width: 100px;" />
|
|
|
|
|
<img
|
|
|
|
|
alt=""
|
|
|
|
|
:src="resourcesUrl + orderItem.pic"
|
|
|
|
|
style="height:100px;width: 100px;"
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="prod-name">
|
|
|
|
|
<span>{{ orderItem.prodName }}</span>
|
|
|
|
|
@ -84,9 +123,10 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
|
|
<!-- 实付金额 -->
|
|
|
|
|
<el-col :span="3" style="height: 100%;">
|
|
|
|
|
<el-col
|
|
|
|
|
:span="3"
|
|
|
|
|
style="height: 100%;"
|
|
|
|
|
>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div>
|
|
|
|
|
<span class="totalprice">￥{{ order.actualTotal }}</span>
|
|
|
|
|
@ -95,9 +135,10 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
|
|
<!-- 支付方式 -->
|
|
|
|
|
<el-col :span="3" style="height: 100%;">
|
|
|
|
|
<el-col
|
|
|
|
|
:span="3"
|
|
|
|
|
style="height: 100%;"
|
|
|
|
|
>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div>
|
|
|
|
|
<span v-if="order.payType === 1">微信支付</span>
|
|
|
|
|
@ -106,24 +147,47 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
|
|
<!-- 订单状态 -->
|
|
|
|
|
<el-col :span="3" style="height: 100%;">
|
|
|
|
|
<el-col
|
|
|
|
|
:span="3"
|
|
|
|
|
style="height: 100%;"
|
|
|
|
|
>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<span v-if="order.status === 1" type="danger">待付款</span>
|
|
|
|
|
<span v-else-if="order.status === 2" type="danger">待发货</span>
|
|
|
|
|
<span v-else-if="order.status === 3" type="danger">待收货</span>
|
|
|
|
|
<span v-else-if="order.status === 4" type="danger">待评价</span>
|
|
|
|
|
<span v-else-if="order.status === 5" type="danger">成功</span>
|
|
|
|
|
<span v-else>失败</span>
|
|
|
|
|
<span
|
|
|
|
|
v-if="order.status === 1"
|
|
|
|
|
type="danger"
|
|
|
|
|
>待付款</span>
|
|
|
|
|
<span
|
|
|
|
|
v-else-if="order.status === 2"
|
|
|
|
|
type="danger"
|
|
|
|
|
>待发货</span>
|
|
|
|
|
<span
|
|
|
|
|
v-else-if="order.status === 3"
|
|
|
|
|
type="danger"
|
|
|
|
|
>待收货</span>
|
|
|
|
|
<span
|
|
|
|
|
v-else-if="order.status === 4"
|
|
|
|
|
type="danger"
|
|
|
|
|
>待评价</span>
|
|
|
|
|
<span
|
|
|
|
|
v-else-if="order.status === 5"
|
|
|
|
|
type="danger"
|
|
|
|
|
>成功</span>
|
|
|
|
|
<span
|
|
|
|
|
v-else
|
|
|
|
|
>失败</span>
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
|
|
<!-- 操作按钮 -->
|
|
|
|
|
<el-col :span="3" style="height: 100%;">
|
|
|
|
|
<el-col
|
|
|
|
|
:span="3"
|
|
|
|
|
style="height: 100%;"
|
|
|
|
|
>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="operate">
|
|
|
|
|
<el-button v-if="isAuth('order:order:update')" type="text" @click="onAddOrUpdate(order.orderNumber)">
|
|
|
|
|
<el-button
|
|
|
|
|
v-if="isAuth('order:order:update')"
|
|
|
|
|
type="text"
|
|
|
|
|
@click="onAddOrUpdate(order.orderNumber)"
|
|
|
|
|
>
|
|
|
|
|
查看
|
|
|
|
|
</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
@ -131,8 +195,6 @@
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 备注信息 -->
|
|
|
|
|
<div class="remark">
|
|
|
|
|
<div class="buyer-remark">
|
|
|
|
|
<span>备注:{{ order.remarks }}</span>
|
|
|
|
|
@ -141,15 +203,15 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 当没有数据时显示的提示信息 -->
|
|
|
|
|
<div v-if="!dataList.length" class="empty-tips">
|
|
|
|
|
<!-- 空 -->
|
|
|
|
|
<div
|
|
|
|
|
v-if="!dataList.length"
|
|
|
|
|
class="empty-tips"
|
|
|
|
|
>
|
|
|
|
|
暂无数据
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 分页组件 -->
|
|
|
|
|
<el-pagination
|
|
|
|
|
:current-page="page.currentPage"
|
|
|
|
|
:current-page="page.pageIndex"
|
|
|
|
|
:page-sizes="[10, 20, 50, 100]"
|
|
|
|
|
:page-size="page.pageSize"
|
|
|
|
|
:total="page.total"
|
|
|
|
|
@ -157,73 +219,63 @@
|
|
|
|
|
@size-change="sizeChangeHandle"
|
|
|
|
|
@current-change="currentChangeHandle"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<!-- 弹窗：新增或修改订单 -->
|
|
|
|
|
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdateRef" @refresh-data-list="getDataList" />
|
|
|
|
|
|
|
|
|
|
<!-- 弹窗：查看发货信息 -->
|
|
|
|
|
<consignment-info v-if="consignmentInfoVisible" ref="consignmentInfoRef" @input-callback="getWaitingConsignmentExcel" />
|
|
|
|
|
<!-- 弹窗, 新增 / 修改 -->
|
|
|
|
|
<add-or-update
|
|
|
|
|
v-if="addOrUpdateVisible"
|
|
|
|
|
ref="addOrUpdateRef"
|
|
|
|
|
@refresh-data-list="getDataList"
|
|
|
|
|
/>
|
|
|
|
|
<consignment-info
|
|
|
|
|
v-if="consignmentInfoVisible"
|
|
|
|
|
ref="consignmentInfoRef"
|
|
|
|
|
@input-callback="getWaitingConsignmentExcel"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
// 导入子组件用于订单信息编辑或新增以及发货信息查看。
|
|
|
|
|
import AddOrUpdate from './components/order-info.vue'
|
|
|
|
|
import ConsignmentInfo from './components/consignment-info.vue'
|
|
|
|
|
|
|
|
|
|
// 引入权限验证工具函数。
|
|
|
|
|
import { isAuth } from '@/utils'
|
|
|
|
|
|
|
|
|
|
// 获取环境变量中的资源URL。
|
|
|
|
|
const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL
|
|
|
|
|
|
|
|
|
|
// 定义表单数据对象，用于存储用户输入的数据。
|
|
|
|
|
const dataForm = ref({})
|
|
|
|
|
|
|
|
|
|
// 定义日期范围选择器的双向绑定值。
|
|
|
|
|
const dateRange = ref([])
|
|
|
|
|
|
|
|
|
|
// 定义订单状态选项列表，供用户选择订单状态进行筛选。
|
|
|
|
|
const options = [{
|
|
|
|
|
value: 1,
|
|
|
|
|
label: '待付款'
|
|
|
|
|
}, {
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: 2,
|
|
|
|
|
label: '待发货'
|
|
|
|
|
}, {
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: 3,
|
|
|
|
|
label: '待收货'
|
|
|
|
|
}, {
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: 4,
|
|
|
|
|
label: '待评价'
|
|
|
|
|
}, {
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: 5,
|
|
|
|
|
label: '成功'
|
|
|
|
|
}, {
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: 6,
|
|
|
|
|
label: '失败'
|
|
|
|
|
}]
|
|
|
|
|
|
|
|
|
|
// 定义数据列表引用，用于存储从服务器获取的订单数据。
|
|
|
|
|
const dataList = ref([])
|
|
|
|
|
|
|
|
|
|
// 定义分页参数，包括总条数、当前页码和每页显示的数量。
|
|
|
|
|
const page = reactive({
|
|
|
|
|
total: 0, // 总页数
|
|
|
|
|
currentPage: 1, // 当前页数
|
|
|
|
|
pageSize: 10 // 每页显示多少条
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 页面加载时调用此方法获取初始数据。
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
getDataList(page)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 发起HTTP请求获取订单数据列表，并更新页面上的数据显示。
|
|
|
|
|
* @param pageParam - 分页参数，默认使用全局page对象。
|
|
|
|
|
* @param params - 额外的查询参数。
|
|
|
|
|
* @param done - 回调函数，在获取数据完成后调用。
|
|
|
|
|
* 获取数据列表
|
|
|
|
|
*/
|
|
|
|
|
const getDataList = (pageParam, params, done) => {
|
|
|
|
|
pageParam = (pageParam === undefined ? page : pageParam)
|
|
|
|
|
@ -250,42 +302,36 @@ const getDataList = (pageParam, params, done) => {
|
|
|
|
|
if (done) done()
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 清除所有表单数据和日期范围选择。
|
|
|
|
|
* 清除数据
|
|
|
|
|
*/
|
|
|
|
|
const clearDatas = () => {
|
|
|
|
|
dataForm.value = {}
|
|
|
|
|
dateRange.value = []
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 当分页组件中每页显示数量改变时触发此方法。
|
|
|
|
|
* @param val - 新的每页显示数量。
|
|
|
|
|
* 每页数
|
|
|
|
|
* @param val
|
|
|
|
|
*/
|
|
|
|
|
const sizeChangeHandle = (val) => {
|
|
|
|
|
page.pageSize = val
|
|
|
|
|
page.currentPage = 1
|
|
|
|
|
getDataList(page)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 当分页组件中当前页码改变时触发此方法。
|
|
|
|
|
* @param val - 新的当前页码。
|
|
|
|
|
* 当前页
|
|
|
|
|
* @param val
|
|
|
|
|
*/
|
|
|
|
|
const currentChangeHandle = (val) => {
|
|
|
|
|
page.currentPage = val
|
|
|
|
|
getDataList(page)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 定义对AddOrUpdate组件的引用。
|
|
|
|
|
const addOrUpdateRef = ref(null)
|
|
|
|
|
// 控制AddOrUpdate弹窗的显示状态。
|
|
|
|
|
const addOrUpdateVisible = ref(false)
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 打开订单信息编辑或新增弹窗。
|
|
|
|
|
* @param val - 可选参数，当存在时表示编辑指定ID的订单。
|
|
|
|
|
* 新增 / 修改
|
|
|
|
|
* @param val
|
|
|
|
|
*/
|
|
|
|
|
const onAddOrUpdate = (val) => {
|
|
|
|
|
addOrUpdateVisible.value = true
|
|
|
|
|
@ -294,25 +340,14 @@ const onAddOrUpdate = (val) => {
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 定义对ConsignmentInfo组件的引用。
|
|
|
|
|
const consignmentInfoRef = ref(null)
|
|
|
|
|
// 控制ConsignmentInfo弹窗的显示状态。
|
|
|
|
|
const consignmentInfoVisible = ref(false)
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 显示发货信息弹窗。
|
|
|
|
|
*/
|
|
|
|
|
const showConsignmentInfo = () => {
|
|
|
|
|
consignmentInfoVisible.value = true
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
consignmentInfoRef.value?.init()
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 下载待发货信息整理Excel文件。
|
|
|
|
|
* @param consignmentInfo - 发货信息对象。
|
|
|
|
|
*/
|
|
|
|
|
const getWaitingConsignmentExcel = (consignmentInfo) => {
|
|
|
|
|
http({
|
|
|
|
|
url: http.adornUrl('/order/order/waitingConsignmentExcel'),
|
|
|
|
|
@ -321,44 +356,42 @@ const getWaitingConsignmentExcel = (consignmentInfo) => {
|
|
|
|
|
consignmentName: consignmentInfo.consignmentName,
|
|
|
|
|
consignmentMobile: consignmentInfo.consignmentMobile,
|
|
|
|
|
consignmentAddr: consignmentInfo.consignmentAddr,
|
|
|
|
|
startTime: dateRange.value === null ? null : dateRange.value[0],
|
|
|
|
|
endTime: dateRange.value === null ? null : dateRange.value[1]
|
|
|
|
|
startTime: dateRange.value === null ? null : dateRange.value[0], // 开始时间
|
|
|
|
|
endTime: dateRange.value === null ? null : dateRange.value[1] // 结束时间
|
|
|
|
|
}),
|
|
|
|
|
responseType: 'blob'
|
|
|
|
|
responseType: 'blob' // 解决文件下载乱码问题
|
|
|
|
|
})
|
|
|
|
|
.then(({ data }) => {
|
|
|
|
|
const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
|
|
|
|
|
const fileName = '待发货信息整理.xls'
|
|
|
|
|
downloadFile(blob, fileName)
|
|
|
|
|
const elink = document.createElement('a')
|
|
|
|
|
if ('download' in elink) { // 非IE下载
|
|
|
|
|
elink.download = fileName
|
|
|
|
|
elink.style.display = 'none'
|
|
|
|
|
elink.href = URL.createObjectURL(blob)
|
|
|
|
|
document.body.appendChild(elink)
|
|
|
|
|
elink.click()
|
|
|
|
|
URL.revokeObjectURL(elink.href) // 释放URL 对象
|
|
|
|
|
document.body.removeChild(elink)
|
|
|
|
|
} else { // IE10+下载
|
|
|
|
|
navigator.msSaveBlob(blob, fileName)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 下载销售信息整理Excel文件。
|
|
|
|
|
*/
|
|
|
|
|
const getSoldExcel = () => {
|
|
|
|
|
http({
|
|
|
|
|
url: http.adornUrl('/order/order/soldExcel'),
|
|
|
|
|
method: 'get',
|
|
|
|
|
params: http.adornParams({
|
|
|
|
|
startTime: dateRange.value === null ? null : dateRange.value[0],
|
|
|
|
|
endTime: dateRange.value === null ? null : dateRange.value[1]
|
|
|
|
|
startTime: dateRange.value === null ? null : dateRange.value[0], // 开始时间
|
|
|
|
|
endTime: dateRange.value === null ? null : dateRange.value[1] // 结束时间
|
|
|
|
|
}),
|
|
|
|
|
responseType: 'blob'
|
|
|
|
|
responseType: 'blob' // 解决文件下载乱码问题
|
|
|
|
|
})
|
|
|
|
|
.then(({ data }) => {
|
|
|
|
|
const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
|
|
|
|
|
const fileName = '销售信息整理.xls'
|
|
|
|
|
downloadFile(blob, fileName)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 文件下载辅助函数。
|
|
|
|
|
* @param blob - 文件内容。
|
|
|
|
|
* @param fileName - 文件名。
|
|
|
|
|
*/
|
|
|
|
|
function downloadFile(blob, fileName) {
|
|
|
|
|
const elink = document.createElement('a')
|
|
|
|
|
if ('download' in elink) { // 非IE下载
|
|
|
|
|
elink.download = fileName
|
|
|
|
|
@ -366,38 +399,35 @@ function downloadFile(blob, fileName) {
|
|
|
|
|
elink.href = URL.createObjectURL(blob)
|
|
|
|
|
document.body.appendChild(elink)
|
|
|
|
|
elink.click()
|
|
|
|
|
URL.revokeObjectURL(elink.href)
|
|
|
|
|
URL.revokeObjectURL(elink.href) // 释放URL 对象
|
|
|
|
|
document.body.removeChild(elink)
|
|
|
|
|
} else { // IE10+下载
|
|
|
|
|
navigator.msSaveBlob(blob, fileName)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
// 定义一个具有特定样式的订单模块，使用scoped属性确保样式仅应用于组件内部。
|
|
|
|
|
.mod-order-order {
|
|
|
|
|
|
|
|
|
|
// 标题栏设置为flex布局，高度固定为45px，并且内容垂直居中对齐。
|
|
|
|
|
.tit {
|
|
|
|
|
display: flex;
|
|
|
|
|
height: 45px;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 标题项内的项目设置：左右内边距为10px，宽度占父元素的10%，文本居中对齐。
|
|
|
|
|
.tit {
|
|
|
|
|
.item {
|
|
|
|
|
padding: 0 10px;
|
|
|
|
|
width: 10%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 特殊的产品标题项，宽度设置为25%以适应更长的文本或更多内容。
|
|
|
|
|
.product {
|
|
|
|
|
width: 25%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 产品标题部分，设置了内边距、背景色以及三边的边框。
|
|
|
|
|
.prod-tit {
|
|
|
|
|
padding: 10px;
|
|
|
|
|
background: #f8f8f9;
|
|
|
|
|
@ -405,13 +435,11 @@ function downloadFile(blob, fileName) {
|
|
|
|
|
border-top: 1px solid #dddee1;
|
|
|
|
|
border-right: 1px solid #dddee1;
|
|
|
|
|
|
|
|
|
|
// 标题内的span元素之间有15px的右边距。
|
|
|
|
|
span {
|
|
|
|
|
margin-right: 15px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 产品内容区域，采用flex布局，定义了顶部和底部的边框，左边框以及字体颜色。
|
|
|
|
|
.prod-cont {
|
|
|
|
|
display: flex;
|
|
|
|
|
border-top: 1px solid #dddee1;
|
|
|
|
|
@ -419,7 +447,6 @@ function downloadFile(blob, fileName) {
|
|
|
|
|
border-left: 1px solid #dddee1;
|
|
|
|
|
color: #495060;
|
|
|
|
|
|
|
|
|
|
// 内部的项目项，设置为flex布局，内容垂直和水平居中，定义了内边距、右边框、文本居中对齐以及高度。
|
|
|
|
|
.item {
|
|
|
|
|
display: flex;
|
|
|
|
|
display: -webkit-flex;
|
|
|
|
|
@ -430,39 +457,33 @@ function downloadFile(blob, fileName) {
|
|
|
|
|
text-align: center;
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
|
|
// 确保子span元素显示为块级元素。
|
|
|
|
|
span {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 产品项目项，使用flex布局并设定为列方向排列，定义了右边框。
|
|
|
|
|
.prod-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
border-right: 1px solid #dddee1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 特殊的名称项，添加了相对定位、额外的内边距以及底部边框。
|
|
|
|
|
.items.name {
|
|
|
|
|
display: flex;
|
|
|
|
|
position: relative;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
border-bottom: 1px solid #dddee1;
|
|
|
|
|
|
|
|
|
|
// 最后一个子元素不显示底部边框。
|
|
|
|
|
&:last-child {
|
|
|
|
|
border-bottom: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 产品名称部分，设置宽度为55%，文本左对齐。
|
|
|
|
|
.prod-name {
|
|
|
|
|
width: 55%;
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
|
|
|
|
// 产品信息显示为块级元素，颜色较淡，并且在上边距上有30px的空间。
|
|
|
|
|
.prod-info {
|
|
|
|
|
display: block;
|
|
|
|
|
color: #80848f;
|
|
|
|
|
@ -470,20 +491,17 @@ function downloadFile(blob, fileName) {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 产品价格部分，绝对定位到右侧40px处，文本右对齐。
|
|
|
|
|
.prod-price {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 40px;
|
|
|
|
|
text-align: right;
|
|
|
|
|
|
|
|
|
|
// 价格中的span元素显示为块级元素，并且底部有10px的间距。
|
|
|
|
|
span {
|
|
|
|
|
display: block;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 产品图片部分，定义了右边距、宽度和高度，同时设置了图片的尺寸。
|
|
|
|
|
.prod-image {
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
width: 100px;
|
|
|
|
|
@ -495,25 +513,21 @@ function downloadFile(blob, fileName) {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 通用的项目项，其中的span元素显示为块级元素，并且底部有10px的间距。
|
|
|
|
|
.item {
|
|
|
|
|
span {
|
|
|
|
|
display: block;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 操作链接的颜色设置为蓝色。
|
|
|
|
|
.operate {
|
|
|
|
|
color: #2d8cf0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 总价颜色设置为红色。
|
|
|
|
|
.totalprice {
|
|
|
|
|
color: #c00;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 产品备注部分，设置了宽度、高度、行高、背景颜色以及三边的边框。
|
|
|
|
|
.prod {
|
|
|
|
|
.remark {
|
|
|
|
|
width: 100%;
|
|
|
|
|
@ -527,7 +541,6 @@ function downloadFile(blob, fileName) {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 购买者备注部分，设置了左右内边距、溢出隐藏、单行文本以及省略号处理。
|
|
|
|
|
.buyer-remark {
|
|
|
|
|
padding: 0 20px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
@ -535,7 +548,6 @@ function downloadFile(blob, fileName) {
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 当没有数据时显示的提示信息，设置为块级元素，居中对齐，上下各有50px的外边距，颜色为灰色。
|
|
|
|
|
.empty-tips {
|
|
|
|
|
display: block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
