py4fbma29
/
mall-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

.

Browse Source
pull/6/head
dwj 3 months ago
parent 648ef08f1f
commit 3f3d382407
3 changed files with 696 additions and 512 deletions
Show Stats Download Patch File Download Diff File

BIN
git-bash.exe
View File

Binary file not shown.

934
src/views/oms/order/index.vue
Unescape View File

@ -1,402 +1,550 @@
<template>  <template>
<div class="app-container"> <!-- 创建一个类名为 "app-container" 的 div 作为整体页面容器 -->
<el-card class="filter-container" shadow="never"> <div class="app-container">
<div> <!-- 使用 el-card 组件创建一个卡片式容器，用于放置筛选搜索相关内容，设置类名为 "filter-container" 并取消阴影效果 -->
<i class="el-icon-search"></i> <el-card class="filter-container" shadow="never">
<span>筛选搜索</span> <div>
<el-button <!-- 使用一个图标元素（el-icon-search）展示搜索图标 -->
style="float:right" <i class="el-icon-search"></i>
type="primary" <!-- 展示一段文本，内容为 "筛选搜索" -->
@click="handleSearchList()" <span>筛选搜索</span>
size="small"> <!-- el-button 组件创建一个按钮，设置样式使其右浮动，按钮类型为 "primary"，点击时调用 "handleSearchList" 方法，按钮大小为 "small"，文本为 "查询搜索" -->
查询搜索 <el-button
</el-button> style="float:right"
<el-button type="primary"
style="float:right;margin-right: 15px" @click="handleSearchList()"
@click="handleResetSearch()" size="small">
size="small"> 查询搜索
重置 </el-button>
</el-button> <!-- 类似上述按钮，设置右浮动及右外边距，点击调用 "handleResetSearch" 方法，用于重置筛选条件，按钮大小为 "small"，文本为 "重置" -->
</div> <el-button
<div style="margin-top: 15px"> style="float:right;margin-right: 15px"
<el-form :inline="true" :model="listQuery" size="small" label-width="140px"> @click="handleResetSearch()"
<el-form-item label="输入搜索："> size="small">
<el-input v-model="listQuery.orderSn" class="input-width" placeholder="订单编号"></el-input> 重置
</el-form-item> </el-button>
<el-form-item label="收货人："> </div>
<el-input v-model="listQuery.receiverKeyword" class="input-width" placeholder="收货人姓名/手机号码"></el-input> <div style="margin-top: 15px">
</el-form-item> <!-- el-form 组件创建一个内联表单，绑定数据模型为 "listQuery"，设置表单大小为 "small"，标签宽度为 "140px" -->
<el-form-item label="提交时间："> <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<el-date-picker <!-- el-form-item 组件定义表单中的一项，用于输入订单编号的搜索框，双向绑定 "listQuery.orderSn"，设置类名控制宽度，添加占位提示文本 -->
class="input-width" <el-form-item label="输入搜索：">
v-model="listQuery.createTime" <el-input v-model="listQuery.orderSn" class="input-width" placeholder="订单编号"></el-input>
value-format="yyyy-MM-dd" </el-form-item>
type="date" <!-- 类似上述，用于输入收货人相关关键字的搜索框，绑定 "listQuery.receiverKeyword" -->
placeholder="请选择时间"> <el-form-item label="收货人：">
</el-date-picker> <el-input v-model="listQuery.receiverKeyword" class="input-width" placeholder="收货人姓名/手机号码"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="订单状态："> <!-- 用于选择提交时间的日期选择器，绑定 "listQuery.createTime"，设置日期格式、类型为 "date"（仅选择日期）及占位提示文本，通过类名控制宽度 -->
<el-select v-model="listQuery.status" class="input-width" placeholder="全部" clearable> <el-form-item label="提交时间：">
<el-option v-for="item in statusOptions" <el-date-picker
:key="item.value" class="input-width"
:label="item.label" v-model="listQuery.createTime"
:value="item.value"> value-format="yyyy-MM-dd"
</el-option> 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-select>
</el-form-item> <!-- el-button 组件创建按钮，设置左外边距、类名、点击调用 "handleBatchOperate" 方法、按钮类型为 "primary" 以及按钮大小为 "small"，文本为 "确定" -->
<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 <el-button
size="mini" style="margin-left: 20px"
type="danger" class="search-button"
@click="handleDeleteOrder(scope.$index, scope.row)" @click="handleBatchOperate()"
v-show="scope.row.status===4">删除订单</el-button> type="primary"
</template> size="small">
</el-table-column> 确定
</el-table> </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>
<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> </template>
<script> <script>
import {fetchList,closeOrder,deleteOrder} from '@/api/order' // 从 '@/api/order' 文件中导入多个函数，分别用于获取订单列表、关闭订单以及删除订单等与后端 API 交互的操作
import {formatDate} from '@/utils/date'; import {fetchList, closeOrder, deleteOrder} from '@/api/order';
import LogisticsDialog from '@/views/oms/order/components/logisticsDialog'; // 从 '@/utils/date' 文件中导入 formatDate 函数，可能用于格式化日期相关操作（虽然在模板中未看到调用，但可能在后续完善代码中会用到）
const defaultListQuery = { import {formatDate} from '@/utils/date';
pageNum: 1, // 导入 LogisticsDialog 组件，可能是用于展示物流相关信息的自定义组件
pageSize: 10, import LogisticsDialog from '@/views/oms/order/components/logisticsDialog';
orderSn: null,
receiverKeyword: null, // 定义一个默认的 listQuery 对象，用于初始化查询订单列表的相关参数，设置各属性初始值，如页码、每页数量以及各筛选条件初始为 null
status: null, const defaultListQuery = {
orderType: null, pageNum: 1,
sourceType: null, pageSize: 10,
createTime: null, orderSn: null,
}; receiverKeyword: null,
export default { status: null,
name: "orderList", orderType: null,
components:{LogisticsDialog}, sourceType: null,
data() { createTime: null,
return { };
listQuery: Object.assign({}, defaultListQuery),
listLoading: true, // 此处后续应该是继续定义 Vue 组件的配置对象，包括 data、created、methods 等选项，用于实现组件的具体逻辑，但代码未完整展示，以下是一个大概的结构示例（基于已有代码推测补充）：
list: null,
total: null, export default {
operateType: null, name: '组件名称（这里未定义，可自行补充合适名称）',
multipleSelection: [], data() {
closeOrder:{ return {
dialogVisible:false, // 用于存储查询参数，初始通过 Object.assign 复制 defaultListQuery 的默认值
content:null, listQuery: Object.assign({}, defaultListQuery),
orderIds:[] // 用于存储订单列表数据，初始为空数组（此处假设，实际可根据需求初始化）
}, list: [],
statusOptions: [ // 控制表格加载状态的布尔值，初始为 false（未加载）
{ listLoading: false,
label: '待付款', // 存储批量操作类型相关的数据，绑定下拉选择框，初始值可设为 null 等（根据具体业务确定）
value: 0 operateType: null,
}, // 存储操作选项数据（如批量操作的具体选项等），是一个数组，每个元素包含 label 和 value 等属性，用于下拉选择框动态生成选项
{ operateOptions: [],
label: '待发货', // 存储订单状态相关的选项数据，同样是数组结构，用于下拉选择框展示订单状态选项
value: 1 statusOptions: [],
}, // 存储订单分类相关的选项数据，用于下拉选择框展示订单分类选项
{ orderTypeOptions: [],
label: '已发货', // 存储订单来源相关的选项数据，用于下拉选择框展示订单来源选项
value: 2 sourceTypeOptions: [],
}, // 用于控制关闭订单对话框的显示隐藏以及存储关闭订单时的备注内容等信息的对象
{ closeOrder: {
label: '已完成', dialogVisible: false,
value: 3 content: null
}, },
{ // 控制物流对话框是否可见，初始为 false（推测，根据实际业务逻辑确定）
label: '已关闭', logisticsDialogVisible: false
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]));
} }
} },
if(list.length===0){ created() {
this.$message({ // 组件创建时可进行一些初始化操作，比如调用获取订单列表的方法等（此处可调用类似 fetchList 函数并处理返回数据来初始化 list 属性）
message: '选中订单中没有可以发货的订单', // 例如：fetchList(this.listQuery).then(response => { this.list = response.data; });
type: 'warning', },
duration: 1000 methods: {
}); // 处理查询搜索按钮点击事件的方法，用于向服务器发送查询请求获取符合筛选条件的订单列表，通常会调用 fetchList 函数并处理返回数据更新页面展示
return; handleSearchList() {
} // 示例代码（实际可能需要更多错误处理等逻辑）：
this.$router.push({path:'/oms/deliverOrderList',query:{list:list}}) this.listLoading = true;
}else if(this.operateType===2){ fetchList(this.listQuery).then(response => {
//关闭订单 this.list = response.data;
this.closeOrder.orderIds=[]; this.listLoading = false;
for(let i=0;i<this.multipleSelection.length;i++){ });
this.closeOrder.orderIds.push(this.multipleSelection[i].id); },
} // 处理重置按钮点击事件的方法，用于将查询参数恢复到初始状态，重新获取订单列表（可重新调用 handleSearchList 方法或者直接重置 listQuery 属性并获取列表）
this.closeOrder.dialogVisible=true; handleResetSearch() {
}else if(this.operateType===3){ // 示例代码（重置 listQuery 属性）：
//删除订单 this.listQuery = Object.assign({}, defaultListQuery);
let ids=[]; this.handleSearchList();
for(let i=0;i<this.multipleSelection.length;i++){ },
ids.push(this.multipleSelection[i].id); // 处理表格行选择变化事件的方法，可根据选择的行数据进行相应业务逻辑处理（比如批量操作时获取选中行的数据等，具体业务而定）
} handleSelectionChange(selections) {
this.deleteOrder(ids); // 这里可根据 selections 参数（选中行的数据集合）进行相应逻辑处理
} },
}, // 处理查看订单按钮点击事件的方法，根据传入的行索引和行数据跳转到订单详情页面或者展示订单详情信息等（具体实现根据业务需求）
handleSizeChange(val){ handleViewOrder(index, row) {
this.listQuery.pageNum = 1; // 示例逻辑（比如路由跳转等）：
this.listQuery.pageSize = val; this.$router.push({path: '/orderDetail', query: {id: row.id}});
this.getList(); },
}, // 处理关闭订单按钮点击事件的方法，对于符合条件（
handleCurrentChange(val){ <script>
this.listQuery.pageNum = val; // 导出一个 Vue 组件配置对象，将其作为默认导出，意味着在其他地方可以通过默认导入的方式使用这个组件
this.getList(); export default {
}, // 组件的名称，用于在 Vue 实例或开发者工具中标识该组件
handleCloseOrderConfirm() { name: "orderList",
if (this.closeOrder.content == null || this.closeOrder.content === '') { // 注册组件中使用的子组件，这里注册了 LogisticsDialog 组件（可能是用于展示物流相关信息的自定义组件）
this.$message({ components: {LogisticsDialog},
message: '操作备注不能为空', data() {
type: 'warning', return {
duration: 1000 // 用于存储查询订单列表的参数，初始通过 Object.assign 复制 defaultListQuery（推测是在外部定义好的默认查询参数对象）的默认值
}); listQuery: Object.assign({}, defaultListQuery),
return; // 控制表格加载状态的布尔值，初始设为 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(); let params = new URLSearchParams();
params.append('ids', this.closeOrder.orderIds); params.append('ids', this.closeOrder.orderIds);
params.append('note', this.closeOrder.content); params.append('note', this.closeOrder.content);

274
src/views/oms/order/setting.vue
Unescape View File

@ -1,127 +1,163 @@
<template>  <template>
<el-card class="form-container" shadow="never"> <!-- 使用 el-card 组件创建一个卡片式的容器，设置类名为 "form-container"，并通过 shadow="never" 属性取消卡片的阴影效果 -->
<el-form :model="orderSetting" <el-card class="form-container" shadow="never">
ref="orderSettingForm" <!-- el-form 组件用于创建表单，它绑定了名为 "orderSetting" 的数据模型，设置了表单的引用名称为 "orderSettingForm"，同时指定了表单验证规则 "rules"，以及标签的宽度为 150px -->
:rules="rules" <el-form :model="orderSetting"
label-width="150px"> ref="orderSettingForm"
<el-form-item label="秒杀订单超过：" prop="flashOrderOvertime"> :rules="rules"
<el-input v-model="orderSetting.flashOrderOvertime" class="input-width"> label-width="150px">
<template slot="append">分</template> <!-- el-form-item 组件用于定义表单中的每一个表单项，此处是针对 "秒杀订单超过" 这一设置项的表单项，通过 prop 属性指定了验证对应的字段名 -->
</el-input> <el-form-item label="秒杀订单超过：" prop="flashOrderOvertime">
<span class="note-margin">未付款，订单自动关闭</span> <!-- el-input 组件创建一个输入框，通过 v-model 指令双向绑定了 "orderSetting.flashOrderOvertime" 数据，意味着用户在输入框中输入的值会实时更新到对应的数据属性中，同时设置了类名 "input-width" 用于控制输入框宽度 -->
</el-form-item> <el-input v-model="orderSetting.flashOrderOvertime" class="input-width">
<el-form-item label="正常订单超过：" prop="normalOrderOvertime"> <!-- 使用 slot="append" 插槽在输入框后面添加一个单位文本 "分"，用于提示用户输入的时间单位 -->
<el-input v-model="orderSetting.normalOrderOvertime" class="input-width"> <template slot="append">分</template>
<template slot="append">分</template> </el-input>
</el-input> <!-- 一个普通的 <span> 标签，用于显示一段提示文本，设置了类名 "note-margin" 来控制其左边距，提示内容为未付款时订单自动关闭的相关说明 -->
<span class="note-margin">未付款，订单自动关闭</span> <span class="note-margin">未付款，订单自动关闭</span>
</el-form-item> </el-form-item>
<el-form-item label="发货超过：" prop="confirmOvertime"> <!-- 与上面类似的表单项，针对 "正常订单超过" 的设置，同样有输入框及对应的提示信息 -->
<el-input v-model="orderSetting.confirmOvertime" class="input-width"> <el-form-item label="正常订单超过：" prop="normalOrderOvertime">
<template slot="append">天</template> <el-input v-model="orderSetting.normalOrderOvertime" class="input-width">
</el-input> <template slot="append">分</template>
<span class="note-margin">未收货，订单自动完成</span> </el-input>
</el-form-item> <span class="note-margin">未付款，订单自动关闭</span>
<el-form-item label="订单完成超过：" prop="finishOvertime"> </el-form-item>
<el-input v-model="orderSetting.finishOvertime" class="input-width"> <!-- 针对 "发货超过" 的表单项，输入框用于输入天数，后面跟着相应的提示文本 -->
<template slot="append">天</template> <el-form-item label="发货超过：" prop="confirmOvertime">
</el-input> <el-input v-model="orderSetting.confirmOvertime" class="input-width">
<span class="note-margin">自动结束交易，不能申请售后</span> <template slot="append">天</template>
</el-form-item> </el-input>
<el-form-item label="订单完成超过：" prop="commentOvertime"> <span class="note-margin">未收货，订单自动完成</span>
<el-input v-model="orderSetting.commentOvertime" class="input-width"> </el-form-item>
<template slot="append">天</template> <!-- 针对 "订单完成超过" 的表单项，此处有重复的标签名，但应是不同业务场景下的时间设置，同样有输入框和对应的提示内容 -->
</el-input> <el-form-item label="订单完成超过：" prop="finishOvertime">
<span class="note-margin">自动五星好评</span> <el-input v-model="orderSetting.finishOvertime" class="input-width">
</el-form-item> <template slot="append">天</template>
<el-form-item> </el-input>
<el-button <span class="note-margin">自动结束交易，不能申请售后</span>
@click="confirm('orderSettingForm')" </el-form-item>
type="primary">提交</el-button> <!-- 另一个针对 "订单完成超过" 的表单项，可能对应不同的业务逻辑，如自动五星好评相关的时间设置，同样具备输入框和提示文本 -->
</el-form-item> <el-form-item label="订单完成超过：" prop="commentOvertime">
</el-form> <el-input v-model="orderSetting.commentOvertime" class="input-width">
</el-card> <template slot="append">天</template>
</el-input>
<span class="note-margin">自动五星好评</span>
</el-form-item>
<!-- 定义一个表单项，内部放置一个 el-button 按钮，通过 @click 指令绑定了 "confirm('orderSettingForm')" 方法，即点击按钮时会调用名为 "confirm" 的方法并传入 "orderSettingForm" 参数，按钮类型设置为 "primary"，文本显示为 "提交" -->
<el-form-item>
<el-button
@click="confirm('orderSettingForm')"
type="primary">提交</el-button>
</el-form-item>
</el-form>
</el-card>
</template> </template>
<script> <script>
import {getOrderSetting,updateOrderSetting} from '@/api/orderSetting'; // 从 '@/api/orderSetting' 模块中导入两个函数，分别是 "getOrderSetting" 和 "updateOrderSetting"，推测这两个函数用于从后端获取订单设置信息以及向后端提交订单设置的更新请求
const defaultOrderSetting = { import {getOrderSetting, updateOrderSetting} from '@/api/orderSetting';
id: null,
flashOrderOvertime: 0, // 定义一个名为 "defaultOrderSetting" 的常量对象，用于初始化订单设置相关的数据，各个属性分别对应不同业务场景下的时间设置，初始值都设为 0 或 null
normalOrderOvertime: 0, const defaultOrderSetting = {
confirmOvertime: 0, id: null,
finishOvertime: 0, flashOrderOvertime: 0,
commentOvertime: 0 normalOrderOvertime: 0,
}; confirmOvertime: 0,
const checkTime = (rule, value, callback) => { finishOvertime: 0,
if (!value) { commentOvertime: 0
return callback(new Error('时间不能为空')); };
}
console.log("checkTime",value); // 定义一个名为 "checkTime" 的函数，它作为表单验证的回调函数使用，用于验证输入的时间值是否合法
let intValue = parseInt(value); const checkTime = (rule, value, callback) => {
if (!Number.isInteger(intValue)) { // 如果输入的值为空（即用户未输入任何内容），则通过 callback 函数返回一个 Error 对象，表示时间不能为空，触发表单验证的错误提示
return callback(new Error('请输入数字值')); if (!value) {
} return callback(new Error('时间不能为空'));
callback(); }
}; console.log("checkTime", value);
export default { // 将输入的值通过 parseInt 函数尝试转换为整数，这里是为了确保用户输入的是有效的数字
name: 'orderSetting', let intValue = parseInt(value);
data() { // 如果转换后的结果不是整数（说明用户输入的不是合法的数字格式），则通过 callback 函数返回一个 Error 对象，提示用户请输入数字值，同样触发表单验证的错误提示
return { if (!Number.isInteger(intValue)) {
orderSetting: Object.assign({}, defaultOrderSetting), return callback(new Error('请输入数字值'));
rules: {
flashOrderOvertime:{validator: checkTime, trigger: 'blur' },
normalOrderOvertime:{validator: checkTime, trigger: 'blur' },
confirmOvertime: {validator: checkTime, trigger: 'blur' },
finishOvertime: {validator: checkTime, trigger: 'blur' },
commentOvertime:{validator: checkTime, trigger: 'blur' }
} }
} // 如果输入的值通过了上述的验证条件（非空且为整数），则调用 callback 函数，不传入参数，表示验证通过
}, callback();
created(){ };
this.getDetail();
}, // 导出一个 Vue 组件的配置对象，用于定义组件的各种属性、数据、方法等内容
methods:{ export default {
confirm(formName){ // 组件的名称，用于在 Vue 实例或开发者工具中标识该组件，这里组件名为 "orderSetting"
this.$refs[formName].validate((valid) => { name: 'orderSetting',
if (valid) { data() {
this.$confirm('是否要提交修改?', '提示', { return {
confirmButtonText: '确定', // "orderSetting" 数据对象，通过 Object.assign 方法将 "defaultOrderSetting" 的属性值复制过来作为初始值，后续用户在表单中修改的值会更新到这个对象中
cancelButtonText: '取消', orderSetting: Object.assign({}, defaultOrderSetting),
type: 'warning' // 定义表单验证规则的对象，每个属性对应表单中的一个输入项的验证规则，这里每个输入项都使用了 "checkTime" 函数作为验证器，并且触发验证的时机是在输入框失去焦点（'blur'）时
}).then(() => { rules: {
updateOrderSetting(1,this.orderSetting).then(response=>{ flashOrderOvertime: {validator: checkTime, trigger: 'blur'},
this.$message({ normalOrderOvertime: {validator: checkTime, trigger: 'blur'},
type: 'success', confirmOvertime: {validator: checkTime, trigger: 'blur'},
message: '提交成功!', finishOvertime: {validator: checkTime, trigger: 'blur'},
duration:1000 commentOvertime: {validator: checkTime, trigger: 'blur'}
}
}
},
created() {
// 在组件被创建时（生命周期钩子函数），调用 "getDetail" 方法，推测这个方法用于获取订单设置的初始详细信息并填充到表单中
this.getDetail();
},
methods: {
// 定义名为 "confirm" 的方法，用于处理提交表单的操作，它接收一个参数 "formName"，用于指定要验证的表单名称
confirm(formName) {
// 通过表单的引用（this.$refs[formName]）调用 validate 方法来对表单进行验证，验证结果会通过回调函数的参数 "valid" 返回
this.$refs[formName].validate((valid) => {
// 如果验证通过（即 "valid" 的值为 true）
if (valid) {
// 使用 $confirm 方法弹出一个确认框，询问用户是否要提交修改，配置了确认按钮文本、取消按钮文本以及提示框的类型为 "warning"（警告类型，通常显示为黄色背景等样式）
this.$confirm('是否要提交修改?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 如果用户在确认框中点击了 "确定" 按钮，则调用 "updateOrderSetting" 函数，向后端提交订单设置的更新请求，传入参数 1（具体含义可能根据后端接口定义，可能是固定的某个标识等）和当前的 "orderSetting" 对象（包含了用户在表单中修改后的设置值）
// 在请求成功后（通过 then 方法的回调），使用 $message 方法弹出一个提示框，显示 "提交成功!" 的消息，并且设置提示框的显示时长为 1000 毫秒（即 1 秒）
updateOrderSetting(1, this.orderSetting).then(response => {
this.$message({
type: 'success',
message: '提交成功!',
duration: 1000
});
})
});
} else {
// 如果表单验证不通过（即 "valid" 的值为 false），则使用 $message 方法弹出一个警告类型的提示框，显示 "提交参数不合法" 的消息，告知用户输入的参数不符合要求
this.$message({
message: '提交参数不合法',
type: 'warning'
});
return false;
}
}); });
}) },
}); // 定义名为 "getDetail" 的方法，用于获取订单设置的详细信息
} else { getDetail() {
this.$message({ // 调用 "getOrderSetting" 函数（从后端获取订单设置信息），传入参数 1（同样，具体含义根据后端接口而定），在获取到信息后（通过 then 方法的回调），将返回的数据赋值给 "orderSetting" 对象，这样表单就能展示出已有的订单设置数据，方便用户进行修改等操作
message: '提交参数不合法', getOrderSetting(1).then(response => {
type: 'warning' this.orderSetting = response.data;
}); })
return false; }
} }
});
},
getDetail(){
getOrderSetting(1).then(response=>{
this.orderSetting=response.data;
})
}
} }
}
</script> </script>
<style scoped>
.input-width {
width: 50%;
}
.note-margin { <style scoped>
margin-left: 15px; /* 定义类名为 "input-width" 的样式规则，设置元素的宽度为父元素宽度的 50%，这个类名应用到了输入框上，用于控制输入框在表单中的宽度占比，使其看起来更美观、布局更合理 */
} .input-width {
width: 50%;
}
/* 定义类名为 "note-margin" 的样式规则，设置元素的左边距为 15 像素，这个类名应用到了提示文本的 <span> 标签上，用于控制提示文本与输入框之间的距离，使其有合适的间隔，视觉效果更好 */
.note-margin {
margin-left: 15px;
}
</style> </style>

Write Preview
Loading…
Cancel
Save