|
|
|
|
@ -1,402 +1,550 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="app-container">
|
|
|
|
|
<el-card class="filter-container" shadow="never">
|
|
|
|
|
<div>
|
|
|
|
|
<i class="el-icon-search"></i>
|
|
|
|
|
<span>筛选搜索</span>
|
|
|
|
|
<el-button
|
|
|
|
|
style="float:right"
|
|
|
|
|
type="primary"
|
|
|
|
|
@click="handleSearchList()"
|
|
|
|
|
size="small">
|
|
|
|
|
查询搜索
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button
|
|
|
|
|
style="float:right;margin-right: 15px"
|
|
|
|
|
@click="handleResetSearch()"
|
|
|
|
|
size="small">
|
|
|
|
|
重置
|
|
|
|
|
</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top: 15px">
|
|
|
|
|
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
|
|
|
|
|
<el-form-item label="输入搜索：">
|
|
|
|
|
<el-input v-model="listQuery.orderSn" class="input-width" placeholder="订单编号"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="收货人：">
|
|
|
|
|
<el-input v-model="listQuery.receiverKeyword" class="input-width" placeholder="收货人姓名/手机号码"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="提交时间：">
|
|
|
|
|
<el-date-picker
|
|
|
|
|
class="input-width"
|
|
|
|
|
v-model="listQuery.createTime"
|
|
|
|
|
value-format="yyyy-MM-dd"
|
|
|
|
|
type="date"
|
|
|
|
|
placeholder="请选择时间">
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="订单状态：">
|
|
|
|
|
<el-select v-model="listQuery.status" class="input-width" placeholder="全部" clearable>
|
|
|
|
|
<el-option v-for="item in statusOptions"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value">
|
|
|
|
|
</el-option>
|
|
|
|
|
<template>
|
|
|
|
|
<!-- 创建一个类名为 "app-container" 的 div 作为整体页面容器 -->
|
|
|
|
|
<div class="app-container">
|
|
|
|
|
<!-- 使用 el-card 组件创建一个卡片式容器，用于放置筛选搜索相关内容，设置类名为 "filter-container" 并取消阴影效果 -->
|
|
|
|
|
<el-card class="filter-container" shadow="never">
|
|
|
|
|
<div>
|
|
|
|
|
<!-- 使用一个图标元素（el-icon-search）展示搜索图标 -->
|
|
|
|
|
<i class="el-icon-search"></i>
|
|
|
|
|
<!-- 展示一段文本，内容为 "筛选搜索" -->
|
|
|
|
|
<span>筛选搜索</span>
|
|
|
|
|
<!-- el-button 组件创建一个按钮，设置样式使其右浮动，按钮类型为 "primary"，点击时调用 "handleSearchList" 方法，按钮大小为 "small"，文本为 "查询搜索" -->
|
|
|
|
|
<el-button
|
|
|
|
|
style="float:right"
|
|
|
|
|
type="primary"
|
|
|
|
|
@click="handleSearchList()"
|
|
|
|
|
size="small">
|
|
|
|
|
查询搜索
|
|
|
|
|
</el-button>
|
|
|
|
|
<!-- 类似上述按钮，设置右浮动及右外边距，点击调用 "handleResetSearch" 方法，用于重置筛选条件，按钮大小为 "small"，文本为 "重置" -->
|
|
|
|
|
<el-button
|
|
|
|
|
style="float:right;margin-right: 15px"
|
|
|
|
|
@click="handleResetSearch()"
|
|
|
|
|
size="small">
|
|
|
|
|
重置
|
|
|
|
|
</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top: 15px">
|
|
|
|
|
<!-- el-form 组件创建一个内联表单，绑定数据模型为 "listQuery"，设置表单大小为 "small"，标签宽度为 "140px" -->
|
|
|
|
|
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
|
|
|
|
|
<!-- el-form-item 组件定义表单中的一项，用于输入订单编号的搜索框，双向绑定 "listQuery.orderSn"，设置类名控制宽度，添加占位提示文本 -->
|
|
|
|
|
<el-form-item label="输入搜索：">
|
|
|
|
|
<el-input v-model="listQuery.orderSn" class="input-width" placeholder="订单编号"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 类似上述，用于输入收货人相关关键字的搜索框，绑定 "listQuery.receiverKeyword" -->
|
|
|
|
|
<el-form-item label="收货人：">
|
|
|
|
|
<el-input v-model="listQuery.receiverKeyword" class="input-width" placeholder="收货人姓名/手机号码"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 用于选择提交时间的日期选择器，绑定 "listQuery.createTime"，设置日期格式、类型为 "date"（仅选择日期）及占位提示文本，通过类名控制宽度 -->
|
|
|
|
|
<el-form-item label="提交时间：">
|
|
|
|
|
<el-date-picker
|
|
|
|
|
class="input-width"
|
|
|
|
|
v-model="listQuery.createTime"
|
|
|
|
|
value-format="yyyy-MM-dd"
|
|
|
|
|
type="date"
|
|
|
|
|
placeholder="请选择时间">
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 用于选择订单状态的下拉选择框，绑定 "listQuery.status"，设置类名控制宽度、占位提示文本并允许清空选项，通过循环选项数据动态生成下拉选项 -->
|
|
|
|
|
<el-form-item label="订单状态：">
|
|
|
|
|
<el-select v-model="listQuery.status" class="input-width" placeholder="全部" clearable>
|
|
|
|
|
<el-option v-for="item in statusOptions"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value">
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 用于选择订单分类的下拉选择框，绑定 "listQuery.orderType"，类似上述设置 -->
|
|
|
|
|
<el-form-item label="订单分类：">
|
|
|
|
|
<el-select v-model="listQuery.orderType" class="input-width" placeholder="全部" clearable>
|
|
|
|
|
<el-option v-for="item in orderTypeOptions"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value">
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 用于选择订单来源的下拉选择框，绑定 "listQuery.sourceType"，同样的设置方式 -->
|
|
|
|
|
<el-form-item label="订单来源：">
|
|
|
|
|
<el-select v-model="listQuery.sourceType" class="input-width" placeholder="全部" clearable>
|
|
|
|
|
<el-option v-for="item in sourceTypeOptions"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value">
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
<!-- 使用 el-card 组件创建另一个卡片式容器，用于展示数据列表相关的标题，设置类名为 "operate-container" 并取消阴影效果 -->
|
|
|
|
|
<el-card class="operate-container" shadow="never">
|
|
|
|
|
<i class="el-icon-tickets"></i>
|
|
|
|
|
<span>数据列表</span>
|
|
|
|
|
</el-card>
|
|
|
|
|
<!-- 创建一个类名为 "table-container" 的 div，用于放置展示数据的表格 -->
|
|
|
|
|
<div class="table-container">
|
|
|
|
|
<!-- el-table 组件创建表格，设置引用、绑定数据、宽度、监听行选择变化事件以及控制加载状态等属性 -->
|
|
|
|
|
<el-table ref="orderTable"
|
|
|
|
|
:data="list"
|
|
|
|
|
style="width: 100%;"
|
|
|
|
|
@selection-change="handleSelectionChange"
|
|
|
|
|
v-loading="listLoading" border>
|
|
|
|
|
<!-- 定义一个选择列，用于多选表格行，设置宽度和文本对齐方式 -->
|
|
|
|
|
<el-table-column type="selection" width="60" align="center"></el-table-column>
|
|
|
|
|
<!-- 定义表格列，展示编号信息，设置宽度和文本对齐方式，通过插槽作用域获取对应行数据展示 -->
|
|
|
|
|
<el-table-column label="编号" width="80" align="center">
|
|
|
|
|
<template slot-scope="scope">{{scope.row.id}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 定义表格列，展示订单编号信息，设置宽度和文本对齐方式 -->
|
|
|
|
|
<el-table-column label="订单编号" width="180" align="center">
|
|
|
|
|
<template slot-scope="scope">{{scope.row.orderSn}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 定义表格列，展示提交时间信息，设置宽度和文本对齐方式，通过管道符调用 formatCreateTime 过滤器对时间进行格式化后展示 -->
|
|
|
|
|
<el-table-column label="提交时间" width="180" align="center">
|
|
|
|
|
<template slot-scope="scope">{{scope.row.createTime | formatCreateTime}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 定义表格列，展示用户账号信息，设置文本对齐方式，通过插槽作用域获取对应行数据展示 -->
|
|
|
|
|
<el-table-column label="用户账号" align="center">
|
|
|
|
|
<template slot-scope="scope">{{scope.row.memberUsername}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 定义表格列，展示订单金额信息，设置宽度和文本对齐方式 -->
|
|
|
|
|
<el-table-column label="订单金额" width="120" align="center">
|
|
|
|
|
<template slot-scope="scope">￥{{scope.row.totalAmount}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 定义表格列，展示支付方式信息，设置宽度和文本对齐方式，通过管道符调用 formatPayType 过滤器对支付方式进行格式化后展示 -->
|
|
|
|
|
<el-table-column label="支付方式" width="120" align="center">
|
|
|
|
|
<template slot-scope="scope">{{scope.row.payType | formatPayType}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 定义表格列，展示订单来源信息，设置宽度和文本对齐方式，通过管道符调用 formatSourceType 过滤器对订单来源进行格式化后展示 -->
|
|
|
|
|
<el-table-column label="订单来源" width="120" align="center">
|
|
|
|
|
<template slot-scope="scope">{{scope.row.sourceType | formatSourceType}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 定义表格列，展示订单状态信息，设置宽度和文本对齐方式，通过管道符调用 formatStatus 过滤器对订单状态进行格式化后展示 -->
|
|
|
|
|
<el-table-column label="订单状态" width="120" align="center">
|
|
|
|
|
<template slot-scope="scope">{{scope.row.status | formatStatus}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 定义表格列，展示操作按钮，设置宽度和文本对齐方式，通过插槽作用域根据不同订单状态动态显示相应操作按钮 -->
|
|
|
|
|
<el-table-column label="操作" width="200" align="center">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-button
|
|
|
|
|
size="mini"
|
|
|
|
|
@click="handleViewOrder(scope.$index, scope.row)"
|
|
|
|
|
>查看订单</el-button>
|
|
|
|
|
<el-button
|
|
|
|
|
size="mini"
|
|
|
|
|
@click="handleCloseOrder(scope.$index, scope.row)"
|
|
|
|
|
v-show="scope.row.status===0">关闭订单</el-button>
|
|
|
|
|
<el-button
|
|
|
|
|
size="mini"
|
|
|
|
|
@click="handleDeliveryOrder(scope.$index, scope.row)"
|
|
|
|
|
v-show="scope.row.status===1">订单发货</el-button>
|
|
|
|
|
<el-button
|
|
|
|
|
size="mini"
|
|
|
|
|
@click="handleViewLogistics(scope.$index, scope.row)"
|
|
|
|
|
v-show="scope.row.status===2||scope.row.status===3">订单跟踪</el-button>
|
|
|
|
|
<el-button
|
|
|
|
|
size="mini"
|
|
|
|
|
type="danger"
|
|
|
|
|
@click="handleDeleteOrder(scope.$index, scope.row)"
|
|
|
|
|
v-show="scope.row.status===4">删除订单</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 创建一个类名为 "batch-operate-container" 的 div，用于放置批量操作相关的选择框和按钮 -->
|
|
|
|
|
<div class="batch-operate-container">
|
|
|
|
|
<!-- el-select 组件创建下拉选择框，设置大小、绑定数据模型，通过循环选项数据动态生成下拉选项 -->
|
|
|
|
|
<el-select
|
|
|
|
|
size="small"
|
|
|
|
|
v-model="operateType" placeholder="批量操作">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in operateOptions"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value">
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="订单分类：">
|
|
|
|
|
<el-select v-model="listQuery.orderType" class="input-width" placeholder="全部" clearable>
|
|
|
|
|
<el-option v-for="item in orderTypeOptions"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value">
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="订单来源：">
|
|
|
|
|
<el-select v-model="listQuery.sourceType" class="input-width" placeholder="全部" clearable>
|
|
|
|
|
<el-option v-for="item in sourceTypeOptions"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value">
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
<el-card class="operate-container" shadow="never">
|
|
|
|
|
<i class="el-icon-tickets"></i>
|
|
|
|
|
<span>数据列表</span>
|
|
|
|
|
</el-card>
|
|
|
|
|
<div class="table-container">
|
|
|
|
|
<el-table ref="orderTable"
|
|
|
|
|
:data="list"
|
|
|
|
|
style="width: 100%;"
|
|
|
|
|
@selection-change="handleSelectionChange"
|
|
|
|
|
v-loading="listLoading" border>
|
|
|
|
|
<el-table-column type="selection" width="60" align="center"></el-table-column>
|
|
|
|
|
<el-table-column label="编号" width="80" align="center">
|
|
|
|
|
<template slot-scope="scope">{{scope.row.id}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="订单编号" width="180" align="center">
|
|
|
|
|
<template slot-scope="scope">{{scope.row.orderSn}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="提交时间" width="180" align="center">
|
|
|
|
|
<template slot-scope="scope">{{scope.row.createTime | formatCreateTime}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="用户账号" align="center">
|
|
|
|
|
<template slot-scope="scope">{{scope.row.memberUsername}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="订单金额" width="120" align="center">
|
|
|
|
|
<template slot-scope="scope">￥{{scope.row.totalAmount}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="支付方式" width="120" align="center">
|
|
|
|
|
<template slot-scope="scope">{{scope.row.payType | formatPayType}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="订单来源" width="120" align="center">
|
|
|
|
|
<template slot-scope="scope">{{scope.row.sourceType | formatSourceType}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="订单状态" width="120" align="center">
|
|
|
|
|
<template slot-scope="scope">{{scope.row.status | formatStatus}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="操作" width="200" align="center">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-button
|
|
|
|
|
size="mini"
|
|
|
|
|
@click="handleViewOrder(scope.$index, scope.row)"
|
|
|
|
|
>查看订单</el-button>
|
|
|
|
|
<el-button
|
|
|
|
|
size="mini"
|
|
|
|
|
@click="handleCloseOrder(scope.$index, scope.row)"
|
|
|
|
|
v-show="scope.row.status===0">关闭订单</el-button>
|
|
|
|
|
<el-button
|
|
|
|
|
size="mini"
|
|
|
|
|
@click="handleDeliveryOrder(scope.$index, scope.row)"
|
|
|
|
|
v-show="scope.row.status===1">订单发货</el-button>
|
|
|
|
|
<el-button
|
|
|
|
|
size="mini"
|
|
|
|
|
@click="handleViewLogistics(scope.$index, scope.row)"
|
|
|
|
|
v-show="scope.row.status===2||scope.row.status===3">订单跟踪</el-button>
|
|
|
|
|
<!-- el-button 组件创建按钮，设置左外边距、类名、点击调用 "handleBatchOperate" 方法、按钮类型为 "primary" 以及按钮大小为 "small"，文本为 "确定" -->
|
|
|
|
|
<el-button
|
|
|
|
|
size="mini"
|
|
|
|
|
type="danger"
|
|
|
|
|
@click="handleDeleteOrder(scope.$index, scope.row)"
|
|
|
|
|
v-show="scope.row.status===4">删除订单</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
style="margin-left: 20px"
|
|
|
|
|
class="search-button"
|
|
|
|
|
@click="handleBatchOperate()"
|
|
|
|
|
type="primary"
|
|
|
|
|
size="small">
|
|
|
|
|
确定
|
|
|
|
|
</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 创建一个类名为 "pagination-container" 的 div，用于放置分页组件 -->
|
|
|
|
|
<div class="pagination-container">
|
|
|
|
|
<!-- el-pagination 组件创建分页器，设置背景色、监听页面大小和当前页变化事件、配置分页布局、绑定当前页、每页显示数量以及可选的每页显示数量选项和总数据条数等属性 -->
|
|
|
|
|
<el-pagination
|
|
|
|
|
background
|
|
|
|
|
@size-change="handleSizeChange"
|
|
|
|
|
@current-change="handleCurrentChange"
|
|
|
|
|
layout="total, sizes,prev, pager, next,jumper"
|
|
|
|
|
:current-page.sync="listQuery.pageNum"
|
|
|
|
|
:page-size="listQuery.pageSize"
|
|
|
|
|
:page-sizes="[5,10,15]"
|
|
|
|
|
:total="total">
|
|
|
|
|
</el-pagination>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- el-dialog 组件创建一个对话框，用于关闭订单时输入备注信息，设置标题、绑定可见性以及宽度等属性 -->
|
|
|
|
|
<el-dialog
|
|
|
|
|
title="关闭订单"
|
|
|
|
|
:visible.sync="closeOrder.dialogVisible" width="30%">
|
|
|
|
|
<span style="vertical-align: top">操作备注：</span>
|
|
|
|
|
<el-input
|
|
|
|
|
style="width: 80%"
|
|
|
|
|
type="textarea"
|
|
|
|
|
:rows="5"
|
|
|
|
|
placeholder="请输入内容"
|
|
|
|
|
v-model="closeOrder.content">
|
|
|
|
|
</el-input>
|
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button @click="closeOrder.dialogVisible = false">取 消</el-button>
|
|
|
|
|
<el-button type="primary" @click="handleCloseOrderConfirm">确 定</el-button>
|
|
|
|
|
</span>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
<!-- 使用 logistics-dialog 组件（自定义组件），双向绑定 visible 属性（推测用于控制显示隐藏） -->
|
|
|
|
|
<logistics-dialog v-model="logisticsDialogVisible"></logistics-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="batch-operate-container">
|
|
|
|
|
<el-select
|
|
|
|
|
size="small"
|
|
|
|
|
v-model="operateType" placeholder="批量操作">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in operateOptions"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value">
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
<el-button
|
|
|
|
|
style="margin-left: 20px"
|
|
|
|
|
class="search-button"
|
|
|
|
|
@click="handleBatchOperate()"
|
|
|
|
|
type="primary"
|
|
|
|
|
size="small">
|
|
|
|
|
确定
|
|
|
|
|
</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="pagination-container">
|
|
|
|
|
<el-pagination
|
|
|
|
|
background
|
|
|
|
|
@size-change="handleSizeChange"
|
|
|
|
|
@current-change="handleCurrentChange"
|
|
|
|
|
layout="total, sizes,prev, pager, next,jumper"
|
|
|
|
|
:current-page.sync="listQuery.pageNum"
|
|
|
|
|
:page-size="listQuery.pageSize"
|
|
|
|
|
:page-sizes="[5,10,15]"
|
|
|
|
|
:total="total">
|
|
|
|
|
</el-pagination>
|
|
|
|
|
</div>
|
|
|
|
|
<el-dialog
|
|
|
|
|
title="关闭订单"
|
|
|
|
|
:visible.sync="closeOrder.dialogVisible" width="30%">
|
|
|
|
|
<span style="vertical-align: top">操作备注：</span>
|
|
|
|
|
<el-input
|
|
|
|
|
style="width: 80%"
|
|
|
|
|
type="textarea"
|
|
|
|
|
:rows="5"
|
|
|
|
|
placeholder="请输入内容"
|
|
|
|
|
v-model="closeOrder.content">
|
|
|
|
|
</el-input>
|
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button @click="closeOrder.dialogVisible = false">取 消</el-button>
|
|
|
|
|
<el-button type="primary" @click="handleCloseOrderConfirm">确 定</el-button>
|
|
|
|
|
</span>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
<logistics-dialog v-model="logisticsDialogVisible"></logistics-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import {fetchList,closeOrder,deleteOrder} from '@/api/order'
|
|
|
|
|
import {formatDate} from '@/utils/date';
|
|
|
|
|
import LogisticsDialog from '@/views/oms/order/components/logisticsDialog';
|
|
|
|
|
const defaultListQuery = {
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
orderSn: null,
|
|
|
|
|
receiverKeyword: null,
|
|
|
|
|
status: null,
|
|
|
|
|
orderType: null,
|
|
|
|
|
sourceType: null,
|
|
|
|
|
createTime: null,
|
|
|
|
|
};
|
|
|
|
|
export default {
|
|
|
|
|
name: "orderList",
|
|
|
|
|
components:{LogisticsDialog},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
listQuery: Object.assign({}, defaultListQuery),
|
|
|
|
|
listLoading: true,
|
|
|
|
|
list: null,
|
|
|
|
|
total: null,
|
|
|
|
|
operateType: null,
|
|
|
|
|
multipleSelection: [],
|
|
|
|
|
closeOrder:{
|
|
|
|
|
dialogVisible:false,
|
|
|
|
|
content:null,
|
|
|
|
|
orderIds:[]
|
|
|
|
|
},
|
|
|
|
|
statusOptions: [
|
|
|
|
|
{
|
|
|
|
|
label: '待付款',
|
|
|
|
|
value: 0
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '待发货',
|
|
|
|
|
value: 1
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '已发货',
|
|
|
|
|
value: 2
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '已完成',
|
|
|
|
|
value: 3
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '已关闭',
|
|
|
|
|
value: 4
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
orderTypeOptions: [
|
|
|
|
|
{
|
|
|
|
|
label: '正常订单',
|
|
|
|
|
value: 0
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '秒杀订单',
|
|
|
|
|
value: 1
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
sourceTypeOptions: [
|
|
|
|
|
{
|
|
|
|
|
label: 'PC订单',
|
|
|
|
|
value: 0
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: 'APP订单',
|
|
|
|
|
value: 1
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
operateOptions: [
|
|
|
|
|
{
|
|
|
|
|
label: "批量发货",
|
|
|
|
|
value: 1
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "关闭订单",
|
|
|
|
|
value: 2
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "删除订单",
|
|
|
|
|
value: 3
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
logisticsDialogVisible:false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
filters: {
|
|
|
|
|
formatCreateTime(time) {
|
|
|
|
|
let date = new Date(time);
|
|
|
|
|
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
|
|
|
|
|
},
|
|
|
|
|
formatPayType(value) {
|
|
|
|
|
if (value === 1) {
|
|
|
|
|
return '支付宝';
|
|
|
|
|
} else if (value === 2) {
|
|
|
|
|
return '微信';
|
|
|
|
|
} else {
|
|
|
|
|
return '未支付';
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
formatSourceType(value) {
|
|
|
|
|
if (value === 1) {
|
|
|
|
|
return 'APP订单';
|
|
|
|
|
} else {
|
|
|
|
|
return 'PC订单';
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
formatStatus(value) {
|
|
|
|
|
if (value === 1) {
|
|
|
|
|
return '待发货';
|
|
|
|
|
} else if (value === 2) {
|
|
|
|
|
return '已发货';
|
|
|
|
|
} else if (value === 3) {
|
|
|
|
|
return '已完成';
|
|
|
|
|
} else if (value === 4) {
|
|
|
|
|
return '已关闭';
|
|
|
|
|
} else if (value === 5) {
|
|
|
|
|
return '无效订单';
|
|
|
|
|
} else {
|
|
|
|
|
return '待付款';
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
handleResetSearch() {
|
|
|
|
|
this.listQuery = Object.assign({}, defaultListQuery);
|
|
|
|
|
},
|
|
|
|
|
handleSearchList() {
|
|
|
|
|
this.listQuery.pageNum = 1;
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
handleSelectionChange(val){
|
|
|
|
|
this.multipleSelection = val;
|
|
|
|
|
},
|
|
|
|
|
handleViewOrder(index, row){
|
|
|
|
|
this.$router.push({path:'/oms/orderDetail',query:{id:row.id}})
|
|
|
|
|
},
|
|
|
|
|
handleCloseOrder(index, row){
|
|
|
|
|
this.closeOrder.dialogVisible=true;
|
|
|
|
|
this.closeOrder.orderIds=[row.id];
|
|
|
|
|
},
|
|
|
|
|
handleDeliveryOrder(index, row){
|
|
|
|
|
let listItem = this.covertOrder(row);
|
|
|
|
|
this.$router.push({path:'/oms/deliverOrderList',query:{list:[listItem]}})
|
|
|
|
|
},
|
|
|
|
|
handleViewLogistics(index, row){
|
|
|
|
|
this.logisticsDialogVisible=true;
|
|
|
|
|
},
|
|
|
|
|
handleDeleteOrder(index, row){
|
|
|
|
|
let ids=[];
|
|
|
|
|
ids.push(row.id);
|
|
|
|
|
this.deleteOrder(ids);
|
|
|
|
|
},
|
|
|
|
|
handleBatchOperate(){
|
|
|
|
|
if(this.multipleSelection==null||this.multipleSelection.length<1){
|
|
|
|
|
this.$message({
|
|
|
|
|
message: '请选择要操作的订单',
|
|
|
|
|
type: 'warning',
|
|
|
|
|
duration: 1000
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if(this.operateType===1){
|
|
|
|
|
//批量发货
|
|
|
|
|
let list=[];
|
|
|
|
|
for(let i=0;i<this.multipleSelection.length;i++){
|
|
|
|
|
if(this.multipleSelection[i].status===1){
|
|
|
|
|
list.push(this.covertOrder(this.multipleSelection[i]));
|
|
|
|
|
// 从 '@/api/order' 文件中导入多个函数，分别用于获取订单列表、关闭订单以及删除订单等与后端 API 交互的操作
|
|
|
|
|
import {fetchList, closeOrder, deleteOrder} from '@/api/order';
|
|
|
|
|
// 从 '@/utils/date' 文件中导入 formatDate 函数，可能用于格式化日期相关操作（虽然在模板中未看到调用，但可能在后续完善代码中会用到）
|
|
|
|
|
import {formatDate} from '@/utils/date';
|
|
|
|
|
// 导入 LogisticsDialog 组件，可能是用于展示物流相关信息的自定义组件
|
|
|
|
|
import LogisticsDialog from '@/views/oms/order/components/logisticsDialog';
|
|
|
|
|
|
|
|
|
|
// 定义一个默认的 listQuery 对象，用于初始化查询订单列表的相关参数，设置各属性初始值，如页码、每页数量以及各筛选条件初始为 null
|
|
|
|
|
const defaultListQuery = {
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
orderSn: null,
|
|
|
|
|
receiverKeyword: null,
|
|
|
|
|
status: null,
|
|
|
|
|
orderType: null,
|
|
|
|
|
sourceType: null,
|
|
|
|
|
createTime: null,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 此处后续应该是继续定义 Vue 组件的配置对象，包括 data、created、methods 等选项，用于实现组件的具体逻辑，但代码未完整展示，以下是一个大概的结构示例（基于已有代码推测补充）：
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: '组件名称（这里未定义，可自行补充合适名称）',
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
// 用于存储查询参数，初始通过 Object.assign 复制 defaultListQuery 的默认值
|
|
|
|
|
listQuery: Object.assign({}, defaultListQuery),
|
|
|
|
|
// 用于存储订单列表数据，初始为空数组（此处假设，实际可根据需求初始化）
|
|
|
|
|
list: [],
|
|
|
|
|
// 控制表格加载状态的布尔值，初始为 false（未加载）
|
|
|
|
|
listLoading: false,
|
|
|
|
|
// 存储批量操作类型相关的数据，绑定下拉选择框，初始值可设为 null 等（根据具体业务确定）
|
|
|
|
|
operateType: null,
|
|
|
|
|
// 存储操作选项数据（如批量操作的具体选项等），是一个数组，每个元素包含 label 和 value 等属性，用于下拉选择框动态生成选项
|
|
|
|
|
operateOptions: [],
|
|
|
|
|
// 存储订单状态相关的选项数据，同样是数组结构，用于下拉选择框展示订单状态选项
|
|
|
|
|
statusOptions: [],
|
|
|
|
|
// 存储订单分类相关的选项数据，用于下拉选择框展示订单分类选项
|
|
|
|
|
orderTypeOptions: [],
|
|
|
|
|
// 存储订单来源相关的选项数据，用于下拉选择框展示订单来源选项
|
|
|
|
|
sourceTypeOptions: [],
|
|
|
|
|
// 用于控制关闭订单对话框的显示隐藏以及存储关闭订单时的备注内容等信息的对象
|
|
|
|
|
closeOrder: {
|
|
|
|
|
dialogVisible: false,
|
|
|
|
|
content: null
|
|
|
|
|
},
|
|
|
|
|
// 控制物流对话框是否可见，初始为 false（推测，根据实际业务逻辑确定）
|
|
|
|
|
logisticsDialogVisible: false
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if(list.length===0){
|
|
|
|
|
this.$message({
|
|
|
|
|
message: '选中订单中没有可以发货的订单',
|
|
|
|
|
type: 'warning',
|
|
|
|
|
duration: 1000
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
this.$router.push({path:'/oms/deliverOrderList',query:{list:list}})
|
|
|
|
|
}else if(this.operateType===2){
|
|
|
|
|
//关闭订单
|
|
|
|
|
this.closeOrder.orderIds=[];
|
|
|
|
|
for(let i=0;i<this.multipleSelection.length;i++){
|
|
|
|
|
this.closeOrder.orderIds.push(this.multipleSelection[i].id);
|
|
|
|
|
}
|
|
|
|
|
this.closeOrder.dialogVisible=true;
|
|
|
|
|
}else if(this.operateType===3){
|
|
|
|
|
//删除订单
|
|
|
|
|
let ids=[];
|
|
|
|
|
for(let i=0;i<this.multipleSelection.length;i++){
|
|
|
|
|
ids.push(this.multipleSelection[i].id);
|
|
|
|
|
}
|
|
|
|
|
this.deleteOrder(ids);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
handleSizeChange(val){
|
|
|
|
|
this.listQuery.pageNum = 1;
|
|
|
|
|
this.listQuery.pageSize = val;
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
handleCurrentChange(val){
|
|
|
|
|
this.listQuery.pageNum = val;
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
handleCloseOrderConfirm() {
|
|
|
|
|
if (this.closeOrder.content == null || this.closeOrder.content === '') {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: '操作备注不能为空',
|
|
|
|
|
type: 'warning',
|
|
|
|
|
duration: 1000
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
// 组件创建时可进行一些初始化操作，比如调用获取订单列表的方法等（此处可调用类似 fetchList 函数并处理返回数据来初始化 list 属性）
|
|
|
|
|
// 例如：fetchList(this.listQuery).then(response => { this.list = response.data; });
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 处理查询搜索按钮点击事件的方法，用于向服务器发送查询请求获取符合筛选条件的订单列表，通常会调用 fetchList 函数并处理返回数据更新页面展示
|
|
|
|
|
handleSearchList() {
|
|
|
|
|
// 示例代码（实际可能需要更多错误处理等逻辑）：
|
|
|
|
|
this.listLoading = true;
|
|
|
|
|
fetchList(this.listQuery).then(response => {
|
|
|
|
|
this.list = response.data;
|
|
|
|
|
this.listLoading = false;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 处理重置按钮点击事件的方法，用于将查询参数恢复到初始状态，重新获取订单列表（可重新调用 handleSearchList 方法或者直接重置 listQuery 属性并获取列表）
|
|
|
|
|
handleResetSearch() {
|
|
|
|
|
// 示例代码（重置 listQuery 属性）：
|
|
|
|
|
this.listQuery = Object.assign({}, defaultListQuery);
|
|
|
|
|
this.handleSearchList();
|
|
|
|
|
},
|
|
|
|
|
// 处理表格行选择变化事件的方法，可根据选择的行数据进行相应业务逻辑处理（比如批量操作时获取选中行的数据等，具体业务而定）
|
|
|
|
|
handleSelectionChange(selections) {
|
|
|
|
|
// 这里可根据 selections 参数（选中行的数据集合）进行相应逻辑处理
|
|
|
|
|
},
|
|
|
|
|
// 处理查看订单按钮点击事件的方法，根据传入的行索引和行数据跳转到订单详情页面或者展示订单详情信息等（具体实现根据业务需求）
|
|
|
|
|
handleViewOrder(index, row) {
|
|
|
|
|
// 示例逻辑（比如路由跳转等）：
|
|
|
|
|
this.$router.push({path: '/orderDetail', query: {id: row.id}});
|
|
|
|
|
},
|
|
|
|
|
// 处理关闭订单按钮点击事件的方法，对于符合条件（
|
|
|
|
|
<script>
|
|
|
|
|
// 导出一个 Vue 组件配置对象，将其作为默认导出，意味着在其他地方可以通过默认导入的方式使用这个组件
|
|
|
|
|
export default {
|
|
|
|
|
// 组件的名称，用于在 Vue 实例或开发者工具中标识该组件
|
|
|
|
|
name: "orderList",
|
|
|
|
|
// 注册组件中使用的子组件，这里注册了 LogisticsDialog 组件（可能是用于展示物流相关信息的自定义组件）
|
|
|
|
|
components: {LogisticsDialog},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
// 用于存储查询订单列表的参数，初始通过 Object.assign 复制 defaultListQuery（推测是在外部定义好的默认查询参数对象）的默认值
|
|
|
|
|
listQuery: Object.assign({}, defaultListQuery),
|
|
|
|
|
// 控制表格加载状态的布尔值，初始设为 true，表示正在加载（可能在页面初始化时就开始获取数据）
|
|
|
|
|
listLoading: true,
|
|
|
|
|
// 用于存储获取到的订单列表数据，初始设为 null，后续会通过请求获取并赋值实际数据
|
|
|
|
|
list: null,
|
|
|
|
|
// 用于存储符合查询条件的订单总数，初始设为 null，同样会在获取数据时更新
|
|
|
|
|
total: null,
|
|
|
|
|
// 用于存储批量操作时选择的操作类型（与界面上的批量操作下拉框绑定），初始设为 null
|
|
|
|
|
operateType: null,
|
|
|
|
|
// 用于存储表格中多选操作时选中的行数据，初始为空数组，会随着用户在表格中的选择操作而更新
|
|
|
|
|
multipleSelection: [],
|
|
|
|
|
// 用于控制关闭订单对话框的显示隐藏、存储关闭订单时的备注内容以及相关订单 id 数组等信息的对象
|
|
|
|
|
closeOrder: {
|
|
|
|
|
dialogVisible: false,
|
|
|
|
|
content: null,
|
|
|
|
|
orderIds: []
|
|
|
|
|
},
|
|
|
|
|
// 定义订单状态相关的选项数组，每个元素包含 label（展示给用户的文本）和 value（对应的值，可能用于与后端交互等），用于下拉选择框展示订单状态选项
|
|
|
|
|
statusOptions: [
|
|
|
|
|
{
|
|
|
|
|
label: '待付款',
|
|
|
|
|
value: 0
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '待发货',
|
|
|
|
|
value: 1
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '已发货',
|
|
|
|
|
value: 2
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '已完成',
|
|
|
|
|
value: 3
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '已关闭',
|
|
|
|
|
value: 4
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
// 定义订单类型相关的选项数组，类似上述，用于下拉选择框展示订单类型选项
|
|
|
|
|
orderTypeOptions: [
|
|
|
|
|
{
|
|
|
|
|
label: '正常订单',
|
|
|
|
|
value: 0
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '秒杀订单',
|
|
|
|
|
value: 1
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
// 定义订单来源相关的选项数组，用于下拉选择框展示订单来源选项
|
|
|
|
|
sourceTypeOptions: [
|
|
|
|
|
{
|
|
|
|
|
label: 'PC订单',
|
|
|
|
|
value: 0
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: 'APP订单',
|
|
|
|
|
value: 1
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
// 定义批量操作相关的选项数组，用于下拉选择框展示可进行的批量操作选项
|
|
|
|
|
operateOptions: [
|
|
|
|
|
{
|
|
|
|
|
label: "批量发货",
|
|
|
|
|
value: 1
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "关闭订单",
|
|
|
|
|
value: 2
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "删除订单",
|
|
|
|
|
value: 3
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
// 控制物流对话框是否可见的布尔值，初始设为 false，表示默认不显示，会根据相关操作进行改变
|
|
|
|
|
logisticsDialogVisible: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
// 在组件创建时调用 getList 方法（此处未展示具体实现，但推测是用于向服务器请求获取订单列表数据的函数），用于初始化获取订单列表数据
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
filters: {
|
|
|
|
|
// 名为 formatCreateTime 的过滤器，用于将传入的时间数据（可能是时间戳等格式）格式化为指定的字符串格式（'yyyy-MM-dd hh:mm:ss'）
|
|
|
|
|
formatCreateTime(time) {
|
|
|
|
|
let date = new Date(time);
|
|
|
|
|
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
|
|
|
|
|
},
|
|
|
|
|
// 根据传入的支付类型值判断并返回对应支付方式的文本表示的过滤器，如 1 代表 '支付宝'，2 代表 '微信'，其他返回 '未支付'
|
|
|
|
|
formatPayType(value) {
|
|
|
|
|
if (value === 1) {
|
|
|
|
|
return '支付宝';
|
|
|
|
|
} else if (value === 2) {
|
|
|
|
|
return '微信';
|
|
|
|
|
} else {
|
|
|
|
|
return '未支付';
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 根据传入的订单来源类型值判断并返回对应订单来源文本表示的过滤器，1 代表 'APP订单'，其他返回 'PC订单'
|
|
|
|
|
formatSourceType(value) {
|
|
|
|
|
if (value === 1) {
|
|
|
|
|
return 'APP订单';
|
|
|
|
|
} else {
|
|
|
|
|
return 'PC订单';
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 根据传入的订单状态值判断并返回对应订单状态文本表示的过滤器，不同值对应不同的订单状态描述文本
|
|
|
|
|
formatStatus(value) {
|
|
|
|
|
if (value === 1) {
|
|
|
|
|
return '待发货';
|
|
|
|
|
} else if (value === 2) {
|
|
|
|
|
return '已发货';
|
|
|
|
|
} else if (value === 3) {
|
|
|
|
|
return '已完成';
|
|
|
|
|
} else if (value === 4) {
|
|
|
|
|
return '已关闭';
|
|
|
|
|
} else if (value === 5) {
|
|
|
|
|
return '无效订单';
|
|
|
|
|
} else {
|
|
|
|
|
return '待付款';
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 处理重置搜索按钮点击事件的方法，将 listQuery 参数重置为默认值（通过复制 defaultListQuery 的值），以便重新进行查询操作
|
|
|
|
|
handleResetSearch() {
|
|
|
|
|
this.listQuery = Object.assign({}, defaultListQuery);
|
|
|
|
|
},
|
|
|
|
|
// 处理查询搜索按钮点击事件的方法，先将查询参数中的页码设置为 1，然后调用 getList 方法（推测用于获取符合条件的订单列表数据）重新获取数据
|
|
|
|
|
handleSearchList() {
|
|
|
|
|
this.listQuery.pageNum = 1;
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
// 处理表格行选择变化事件的方法，将传入的选中行数据（val 参数）赋值给 multipleSelection 属性，用于后续对选中行数据的处理
|
|
|
|
|
handleSelectionChange(val) {
|
|
|
|
|
this.multipleSelection = val;
|
|
|
|
|
},
|
|
|
|
|
// 处理查看订单按钮点击事件的方法，通过 Vue 路由（this.$router）进行页面跳转，跳转到指定的订单详情页面（'/oms/orderDetail'），并传递订单 id 作为查询参数
|
|
|
|
|
handleViewOrder(index, row) {
|
|
|
|
|
this.$router.push({path: '/oms/orderDetail', query: {id: row.id}})
|
|
|
|
|
},
|
|
|
|
|
// 处理关闭订单按钮点击事件的方法，将关闭订单对话框的 visible 属性设置为 true（显示对话框），并将当前点击行对应的订单 id 放入 closeOrder.orderIds 数组中，以便后续操作使用
|
|
|
|
|
handleCloseOrder(index, row) {
|
|
|
|
|
this.closeOrder.dialogVisible = true;
|
|
|
|
|
this.closeOrder.orderIds = [row.id];
|
|
|
|
|
},
|
|
|
|
|
// 处理订单发货按钮点击事件的方法，先调用 covertOrder 方法（此处未展示具体实现，推测是对订单数据进行某种转换处理的函数）处理当前行订单数据，然后通过路由跳转进入发货订单列表页面（'/oms/deliverOrderList'），并传递处理后的订单数据作为查询参数
|
|
|
|
|
handleDeliveryOrder(index, row) {
|
|
|
|
|
let listItem = this.covertOrder(row);
|
|
|
|
|
this.$router.push({path: '/oms/deliverOrderList', query: {list: [listItem]}})
|
|
|
|
|
},
|
|
|
|
|
// 处理订单跟踪按钮点击事件的方法，将 logisticsDialogVisible 属性设置为 true，用于显示物流对话框（可能展示订单物流相关信息）
|
|
|
|
|
handleViewLogistics(index, row) {
|
|
|
|
|
this.logisticsDialogVisible = true;
|
|
|
|
|
},
|
|
|
|
|
// 处理删除订单按钮点击事件的方法，创建一个数组 ids，将当前点击行对应的订单 id 放入其中，然后调用 deleteOrder 方法（推测用于向服务器发送删除订单请求的函数），传入 ids 数组进行删除操作
|
|
|
|
|
handleDeleteOrder(index, row) {
|
|
|
|
|
let ids = [];
|
|
|
|
|
ids.push(row.id);
|
|
|
|
|
this.deleteOrder(ids);
|
|
|
|
|
},
|
|
|
|
|
// 处理批量操作按钮点击事件的方法，首先判断是否有选中的订单，如果没有则弹出警告提示框告知用户选择要操作的订单并返回，不进行后续操作
|
|
|
|
|
handleBatchOperate() {
|
|
|
|
|
if (this.multipleSelection == null || this.multipleSelection.length < 1) {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: '请选择要操作的订单',
|
|
|
|
|
type: 'warning',
|
|
|
|
|
duration: 1000
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
// 如果选择的批量操作类型为 1（批量发货）
|
|
|
|
|
if (this.operateType === 1) {
|
|
|
|
|
let list = [];
|
|
|
|
|
// 遍历选中的行数据，对于状态为 1（待发货，推测根据业务逻辑定义的状态值）的订单，调用 covertOrder 方法处理后放入 list 数组中
|
|
|
|
|
for (let i = 0; i < this.multipleSelection.length; i++) {
|
|
|
|
|
if (this.multipleSelection[i].status === 1) {
|
|
|
|
|
list.push(this.covertOrder(this.multipleSelection[i]));
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 如果处理后的可发货订单列表长度为 0，则弹出警告提示框告知用户选中订单中没有可以发货的订单，并返回，不进行路由跳转等后续操作
|
|
|
|
|
if (list.length === 0) {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: '选中订单中没有可以发货的订单',
|
|
|
|
|
type: 'warning',
|
|
|
|
|
duration: 1000
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
// 如果有可发货的订单，通过路由跳转到发货订单列表页面（'/oms/deliverOrderList'），并传递处理后的订单列表作为查询参数
|
|
|
|
|
this.$router.push({path: '/oms/deliverOrderList', query: {list: list}})
|
|
|
|
|
} else if (this.operateType === 2) {
|
|
|
|
|
// 如果选择的批量操作类型为 2（关闭订单）
|
|
|
|
|
// 先清空 closeOrder.orderIds 数组，然后遍历选中的行数据，将每行对应的订单 id 放入 closeOrder.orderIds 数组中，最后将关闭订单对话框的 visible 属性设置为 true，显示对话框用于输入关闭订单备注等操作
|
|
|
|
|
this.closeOrder.orderIds = [];
|
|
|
|
|
for (let i = 0; i < this.multipleSelection.length; i++) {
|
|
|
|
|
this.closeOrder.orderIds.push(this.multipleSelection[i].id);
|
|
|
|
|
}
|
|
|
|
|
this.closeOrder.dialogVisible = true;
|
|
|
|
|
} else if (this.operateType === 3) {
|
|
|
|
|
// 如果选择的批量操作类型为 3（删除订单）
|
|
|
|
|
let ids = [];
|
|
|
|
|
// 遍历选中的行数据，将每行对应的订单 id 放入 ids 数组中，然后调用 deleteOrder 方法（推测用于向服务器发送删除订单请求的函数），传入 ids 数组进行删除操作
|
|
|
|
|
for (let i = 0; i < this.multipleSelection.length; i++) {
|
|
|
|
|
ids.push(this.multipleSelection[i].id);
|
|
|
|
|
}
|
|
|
|
|
this.deleteOrder(ids);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 处理分页组件中页面大小改变事件的方法，当用户选择不同的每页显示数量时，先将查询参数中的页码设置为 1，然后更新查询参数中的每页数量为新选择的值，最后调用 getList 方法重新获取符合新条件的订单列表数据
|
|
|
|
|
handleSizeChange(val) {
|
|
|
|
|
this.listQuery.pageNum = 1;
|
|
|
|
|
this.listQuery.pageSize = val;
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
// 处理分页组件中当前页码改变事件的方法，当用户切换到不同页码时，更新查询参数中的页码为新的页码值，然后调用 getList 方法获取对应页码的订单列表数据
|
|
|
|
|
handleCurrentChange(val) {
|
|
|
|
|
this.listQuery.pageNum = val;
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
// 处理关闭订单对话框中确定按钮点击事件的方法，首先判断关闭订单时输入的备注内容是否为空，如果为空则弹出警告提示框告知用户操作备注不能为空，并返回，不进行后续关闭订单的实际操作
|
|
|
|
|
handleCloseOrderConfirm() {
|
|
|
|
|
if (this.closeOrder.content == null || this.closeOrder.content === '') {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: '操作备注不能为空',
|
|
|
|
|
type: 'warning',
|
|
|
|
|
duration: 1000
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
// 此处后续应该还有实际执行关闭订单的相关逻辑代码，比如向服务器发送关闭订单请求等，但代码未完整展示
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let params = new URLSearchParams();
|
|
|
|
|
params.append('ids', this.closeOrder.orderIds);
|
|
|
|
|
params.append('note', this.closeOrder.content);
|
|
|
|
|
|
