net/shop_template_back
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed 初步完善订单表格

Browse Source
This commit is contained in:
lwh 2023-09-01 13:15:00 +08:00
parent ed5411b50f
commit 6da2ac30ee
2 changed files with 331 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

197
src/views/business/OrderManage/Orders/index.vue
View File

@ -13,41 +13,35 @@
<el-form :model="queryParams" label-position="left" style="margin:15px;" inline ref="queryForm" v-show="showSearch"
@submit.prevent>
<el-form-item label="订单号" prop="orderNumber">
<el-input v-model="queryParams.orderNumber" placeholder="请输入订单号" clearable @keyup.enter="handleQuery"/>
<el-input v-model="queryParams.orderNumber" placeholder="请输入订单号" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="支付方式(1微信支付 2余额支付)" prop="payType">
<el-select v-model="queryParams.payType" placeholder="请选择支付方式(1微信支付 2余额支付)" clearable @change="handleQuery">
<el-option v-for="item in pay_type " :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
</el-select>
<el-form-item label="收货人姓名" prop="name">
<el-input v-model="queryParams.name" placeholder="请输入收货人姓名" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="付款状态(1未付款 2已付款)" prop="payStatus">
<el-select v-model="queryParams.payStatus" placeholder="请选择付款状态(1未付款 2已付款)" clearable @change="handleQuery">
<el-option v-for="item in pay_status " :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
</el-select>
</el-form-item>
<el-form-item label="配送方式(1快递配送)" prop="deliveryType">
<el-select v-model="queryParams.deliveryType" placeholder="请选择配送方式(1快递配送)" clearable @change="handleQuery">
<el-option v-for="item in delivery_type " :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
</el-select>
<el-form-item label="收货人手机号" prop="phone">
<el-input v-model="queryParams.phone" placeholder="请输入收货人手机号" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="物流单号" prop="logisticsTrackingNumber">
<el-input v-model="queryParams.logisticsTrackingNumber" placeholder="请输入物流单号" clearable @keyup.enter="handleQuery"/>
<el-input v-model="queryParams.logisticsTrackingNumber" placeholder="请输入物流单号" clearable
@keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="发货状态(1未发货 2已发货)" prop="deliveryStatus">
<el-select v-model="queryParams.deliveryStatus" placeholder="请选择发货状态(1未发货 2已发货)" clearable @change="handleQuery">
<el-option v-for="item in delivery_status " :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
<el-form-item label="支付方式" prop="payType">
<el-select v-model="queryParams.payType" placeholder="请选择支付方式" clearable @change="handleQuery">
<el-option v-for="item in pay_type " :key="item.dictValue" :label="item.dictLabel"
:value="item.dictValue"></el-option>
</el-select>
</el-form-item>
<el-form-item label="收货状态(1未收货 2已收货)" prop="receiptStatus">
<el-select v-model="queryParams.receiptStatus" placeholder="请选择收货状态(1未收货 2已收货)" clearable @change="handleQuery">
<el-option v-for="item in receipt_status " :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
<el-form-item label="配送方式" prop="deliveryType">
<el-select v-model="queryParams.deliveryType" placeholder="请选择配送方式" clearable @change="handleQuery">
<el-option v-for="item in delivery_type " :key="item.dictValue" :label="item.dictLabel"
:value="item.dictValue"></el-option>
</el-select>
</el-form-item>
<el-form-item label="订单状态(1进行中 2取消 3待取消 4已完成)" prop="orderStatus">
<el-select v-model="queryParams.orderStatus" placeholder="请选择订单状态(1进行中 2取消 3待取消 4已完成)" clearable @change="handleQuery">
<el-option v-for="item in order_status " :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
</el-select>
<el-form-item label="下单时间">
<el-date-picker v-model="dateRange" style="width: 240px" type="daterange" range-separator="-"
start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
</el-form-item>
<el-form-item>
<el-button icon="search" type="primary" @click="handleQuery">{{ $t('btn.search') }}</el-button>
<el-button icon="refresh" @click="resetQuery">{{ $t('btn.reset') }}</el-button>
@ -57,13 +51,15 @@
<!-- 工具按钮 -->
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" v-hasPermi="['business:order:addOrUpdate']" plain icon="plus" @click="AddDialogVisible = true">
<!-- <el-col :span="1.5">
<el-button type="primary" v-hasPermi="['business:order:addOrUpdate']" plain icon="plus"
@click="AddDialogVisible = true">
{{ $t('btn.add') }}
</el-button>
</el-col>
</el-col> -->
<el-col :span="1.5">
<el-button type="danger" :disabled="multiple" v-hasPermi="['business:order:delete']" plain icon="delete" @click="handleDelete">
<el-button type="danger" :disabled="multiple" v-hasPermi="['business:order:delete']" plain icon="delete"
@click="handleDelete">
{{ $t('btn.delete') }}
</el-button>
</el-col>
@ -76,75 +72,91 @@
</el-row>
<!-- 表格渲染 prop="对应的字段"-->
<el-table v-loading="loading" :data="dataList" ref="tableRef" border highlight-current-row @selection-change="handleSelectionChange">
<el-table v-loading="loading" :data="dataList" ref="tableRef" border highlight-current-row
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
<el-table-column prop="orderNumber" label="订单号" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="goodsTotalAmoun" label="商品总金额" align="center" />
<el-table-column prop="orderAmount" label="订单金额" align="center" />
<el-table-column prop="couponMoney" label="优惠券抵扣金额" align="center" />
<el-table-column prop="pointsMoney" label="积分抵扣金额" align="center" />
<el-table-column prop="pointsNum" label="积分抵扣数量" align="center" />
<el-table-column prop="payPrice" label="实际付款金额(包含运费)" align="center" />
<el-table-column prop="updatePrice" label="后台修改的订单金额（差价）" align="center" />
<el-table-column prop="orderRemark" label="买家留言" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="payType" label="支付方式(1微信支付 2余额支付)" align="center">
<el-table-column prop="orderNumber" label="订单号" :show-overflow-tooltip="true" width="250" />
<el-table-column prop="goodsInfo" label="商品信息" width="350">
<template #default="scope">
<dict-tag :options=" pay_type " :value="scope.row.payType" />
<div class="goods-info-box">
<el-image preview-teleported :hide-on-click-modal="true" lazy class="table-td-thumb" fit="contain"
:src="scope.row.goodsInfo.goodsPicture?.split(',')[0]"
:preview-src-list="scope.row.goodsInfo.goodsPicture?.split(',')">
<div><el-icon :size="15">
<document />
</el-icon></div>
</el-image>
<div>
<div class="goods-info-text m2">
{{ scope.row.goodsInfo.goodsName }}
</div>
<div>
<el-tag>{{ scope.row.goodsInfo.goodsSpecName }}</el-tag>
</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column prop="payStatus" label="付款状态(1未付款 2已付款)" align="center">
<el-table-column prop="goodsInfo" label="单价/数量" width="150">
<template #default="scope">
<dict-tag :options=" pay_status " :value="scope.row.payStatus" />
<div>￥ {{ scope.row.goodsInfo.goodsPrice }}</div>
<div>× {{ scope.row.goodsTotalNum }}</div>
</template>
</el-table-column>
<el-table-column prop="payTime" label="付款时间" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="deliveryType" label="配送方式(1快递配送)" align="center">
<el-table-column prop="payPrice" label="实付款" width="150">
<template #default="scope">
<dict-tag :options=" delivery_type " :value="scope.row.deliveryType" />
<div>￥ {{ scope.row.goodsInfo.goodsPrice }}</div>
<div>(含运费：￥ {{ scope.row.expressPrice }})</div>
</template>
</el-table-column>
<el-table-column prop="expressPrice" label="运费金额" align="center" />
<el-table-column prop="logisticsCompany" label="物流公司" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="logisticsTrackingNumber" label="物流单号" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="deliveryStatus" label="发货状态(1未发货 2已发货)" align="center">
<el-table-column prop="goodsInfo" label="买家信息" width="250">
<template #default="scope">
<dict-tag :options=" delivery_status " :value="scope.row.deliveryStatus" />
<div class="goods-info-box">
<div class="avatar">
<el-avatar shape="circle" :size="50" :src="scope.row.customerAvatar" />
</div>
<div>
<div class="goods-info-text m2">
{{ scope.row.customerNickName }}
</div>
<div>
{{ scope.row.customerMobilePhoneNumber }}
</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column prop="deliveryTime" label="发货时间" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="receiptStatus" label="收货状态(1未收货 2已收货)" align="center">
<el-table-column prop="payType" label="支付方式" width="150">
<template #default="scope">
<dict-tag :options=" receipt_status " :value="scope.row.receiptStatus" />
<dict-tag :options="pay_type" :value="scope.row.payType" />
</template>
</el-table-column>
<el-table-column prop="receiptTime" label="收货时间" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="orderStatus" label="订单状态(1进行中 2取消 3待取消 4已完成)" align="center">
<el-table-column prop="deliveryType" label="配送方式" width="150">
<template #default="scope">
<dict-tag :options=" order_status " :value="scope.row.orderStatus" />
<dict-tag :options="delivery_type" :value="scope.row.deliveryType" />
</template>
</el-table-column>
<el-table-column prop="pointsBonus" label="赠送的积分数量" align="center" />
<el-table-column prop="isSettled" label="订单是否已结算(1未结算 2已结算)" align="center">
<el-table-column prop="deliveryStatus" label="交易状态" width="200">
<template #default="scope">
<dict-tag :options=" is_settled " :value="scope.row.isSettled" />
<div class="status-box">付款状态: &nbsp;<dict-tag :options="pay_status" :value="scope.row.payStatus" /></div>
<div class="status-box">发货状态: &nbsp;<dict-tag :options="delivery_status" :value="scope.row.deliveryStatus" /></div>
<div class="status-box">收货状态: &nbsp;<dict-tag :options="receipt_status" :value="scope.row.receiptStatus" /></div>
<div class="status-box">订单状态: &nbsp;<dict-tag :options="order_status" :value="scope.row.orderStatus" /></div>
</template>
</el-table-column>
<el-table-column prop="transactionId" label="微信支付交易号" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="isComment" label="是否已评价(1否 2是)" align="center">
<template #default="scope">
<dict-tag :options=" is_comment " :value="scope.row.isComment" />
</template>
</el-table-column>
<el-table-column prop="orderSource" label="订单来源(1普通订单)" align="center" />
<el-table-column prop="createTime" label="下单时间" :show-overflow-tooltip="true" />
<el-table-column label="操作" width="350" fixed="right">
<template #default="scope">
<el-button type="primary" size="small" icon="edit" @click="handleUpdate(scope.row)"
v-hasPermi="['business:order:addOrUpdate']">编辑</el-button>
<!-- <el-button type="primary" size="small" icon="edit" @click="handleUpdate(scope.row)"
v-hasPermi="['business:order:addOrUpdate']">编辑</el-button> -->
<el-button type="primary" size="small" icon="view" @click="handleDetail(scope.row)">详情</el-button>
<el-button type="danger" size="small" icon="delete" @click="handleDelete(scope.row)"
v-hasPermi="['business:order:delete']">删除</el-button>
<el-button size="small" icon="view" @click="handleDetail(scope.row)">查看</el-button>
</template>
</el-table-column>
@ -163,7 +175,7 @@
<script setup name="order">
import { ElMessageBox } from 'element-plus'
import modal from '@/plugins/modal.js'
import { exportOrder, orderList , delOrder } from '@/api/business/OrderManage/Orders/order.js'
import { exportOrder, orderList, delOrder } from '@/api/business/OrderManage/Orders/order.js'
import AddDialog from "./components/AddDialog.vue";
import EditDialog from "./components/EditDialog.vue";
import DetailDialog from "./components/DetailDialog.vue";
@ -190,6 +202,8 @@ const dataList = ref([])
const total = ref(0)
// 是否加载
const loading = ref(true)
// 路由
const router = useRouter();
const data = reactive({
form: {},
@ -201,6 +215,7 @@ const data = reactive({
const { queryParams } = toRefs(data)
// 业务参数
const dateRange = ref([])
// 业务方法
@ -280,7 +295,7 @@ function getList() {
loading.value = true
orderList(queryParams.value).then((res) => {
orderList(proxy.addDateRange(queryParams.value, dateRange.value)).then((res) => {
if (res.code == 200) {
loading.value = false;
dataList.value = res.data.result;
@ -299,6 +314,7 @@ function handleSelectionChange(selection) {
/** 重置查询操作 */
function resetQuery() {
dateRange.value = []
proxy.resetForm('queryForm')
handleQuery()
}
@ -362,9 +378,42 @@ function handleUpdate(row) {
// 详情
function handleDetail(row) {
DetailDialogVisible.value = true
DetailDialogRow.value = row
router.push("/orders/orderDetail")
// DetailDialogVisible.value = true
// DetailDialogRow.value = row
}
handleQuery()
</script>
<style>
.goods-info-box {
display: flex;
justify-content: space-between;
}
.goods-info-text {
width: 250px;
margin-bottom: 10px;
}
.m2 {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.avatar {
margin-right: 15px;
}
.status-box{
display: flex;
align-items: center;
margin-bottom: 2px;
}
</style>

183
src/views/business/OrderManage/Orders/orderDetail.vue Normal file
View File

@ -0,0 +1,183 @@
<template>
<!-- 订单进度步骤条 -->
<el-card class="box-card">
<div class="order-progress" :class="`progress-${progress}`">
<ul>
<li>
<span>下单时间</span>
<div class="tip">1</div>
<!-- <div class="tip">{{ record.create_time }}</div> -->
</li>
<li>
<span>付款</span>
<!-- <div v-if="record.pay_status == PayStatusEnum.SUCCESS.value" class="tip">付款于 {{ record.pay_time }}</div> -->
</li>
<li>
<span>发货</span>
<!-- <div v-if="record.delivery_status == DeliveryStatusEnum.DELIVERED.value" class="tip">发货于 {{
record.delivery_time }}</div> -->
</li>
<li>
<span>收货</span>
<!-- <div v-if="record.receipt_status == ReceiptStatusEnum.RECEIVED.value" class="tip">收货于 {{
record.receipt_time }}</div> -->
</li>
<li>
<span>完成</span>
<!-- <div v-if="record.order_status == OrderStatusEnum.COMPLETED.value" class="tip">完成于 {{
record.receipt_time }}</div> -->
</li>
</ul>
</div>
</el-card>
</template>
<script setup>
const progress = ref(2)
</script>
<style lang="scss" scoped>
.box-card {
margin-bottom: 50px;
}
// 分割线
.o-divider {
margin-bottom: 32px;
}
// 步骤条
.order-progress {
height: 26px;
line-height: 26px;
background: #f8f8f8;
border-radius: 13px;
font-size: 14px;
text-align: center;
position: relative;
li{
list-style: none;
}
&:before,
&:after {
content: '';
position: absolute;
z-index: 2;
left: 0;
top: 0;
bottom: 0;
border-radius: 13px;
background: #1890ff;
}
&:after {
background: #91d5ff;
z-index: 1;
}
&.progress-1 {
&:before {
width: 0;
}
&:after {
width: 20%;
}
}
&.progress-2 {
&:before {
width: 20%;
}
&:after {
width: 40%;
}
}
&.progress-3 {
&:before {
width: 40%;
}
&:after {
width: 60%;
}
}
&.progress-4 {
&:before {
width: 60%;
}
&:after {
width: 80%;
}
}
&.progress-5 {
&:before {
width: 100%;
}
&:after {
width: 100%;
}
li {
&:nth-child(5) {
color: #fff;
}
}
}
li {
width: 20%;
float: left;
border-radius: 13px;
position: relative;
z-index: 3;
}
.tip {
font-size: 12px;
padding-top: 10px;
color: #8c8c8c;
}
&.progress-1 li:nth-child(1),
&.progress-2 li:nth-child(1),
&.progress-3 li:nth-child(1),
&.progress-4 li:nth-child(1),
&.progress-5 li:nth-child(1) {
color: #fff;
}
&.progress-2 li:nth-child(2),
&.progress-3 li:nth-child(2),
&.progress-4 li:nth-child(2),
&.progress-5 li:nth-child(2) {
color: #fff;
}
&.progress-3 li:nth-child(3),
&.progress-4 li:nth-child(3),
&.progress-5 li:nth-child(3) {
color: #fff;
}
&.progress-4 li:nth-child(4),
&.progress-5 li:nth-child(4) {
color: #fff;
}
}
</style>