huangge1199/vue-pro
1
0
Fork 0
mirror of https://gitee.com/huangge1199_admin/vue-pro.git synced 2024-11-26 17:21:53 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

新增订单管理页面

Browse Source
This commit is contained in:
LAPTOP-CNV4CMCJ\cheng 2022-10-27 16:49:47 +08:00
parent 7bf37fcb64
commit dcb3f1c8f0
2 changed files with 473 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
yudao-ui-admin/src/router/index.js
View File

@ -196,6 +196,21 @@ export const constantRoutes = [
meta: {title: '流程详情', activeMenu: '/bpm/task/my'}
}
]
},
{
path: '/order',
component: Layout,
name: '订单管理',
meta: { title: '订单管理' },
alwaysShow: true,
children: [
{
path: '/order/goods-order',
name: '商品订单',
meta: { title: '商品订单' },
component: (resolve) => require(['@/views/order/goodsOrder'], resolve)
}
]
}
]

458
yudao-ui-admin/src/views/order/goodsOrder/index.vue Normal file
View File

@ -0,0 +1,458 @@
<template>
<div class="app-container">
<el-row :gutter="20">
<el-form
:model="queryParams"
label-width="68px"
size="small"
>
<el-col :span="6" :xs="24">
<el-form-item label="搜索方式">
<el-input style="width: 240px">
<el-select
v-model="queryParams.searchType"
slot="prepend"
clearable
style="width: 100px"
>
<el-option
v-for="dict in dicData.searchType"
v-bind="dict"
:key="dict.value"
/>
</el-select>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6" :xs="24">
<el-form-item label="订单类型">
<el-select
v-model="queryParams.orderType"
clearable
style="width: 240px"
>
<el-option
v-for="dict in dicData.orderType"
v-bind="dict"
:key="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6" :xs="24">
<el-form-item label="订单状态">
<el-select
v-model="queryParams.orderStatus"
clearable
style="width: 240px"
>
<el-option
v-for="dict in dicData.orderStatus"
v-bind="dict"
:key="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6" :xs="24">
<el-form-item label="订单来源">
<el-select
v-model="queryParams.orderSource"
clearable
style="width: 240px"
>
<el-option
v-for="dict in dicData.orderSource"
v-bind="dict"
:key="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6" :xs="24">
<el-form-item label="付款方式">
<el-select
v-model="queryParams.payWay"
clearable
style="width: 240px"
>
<el-option
v-for="dict in dicData.payWay"
v-bind="dict"
:key="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6" :xs="24">
<el-form-item label="营销类型">
<el-select
v-model="queryParams.marketingType"
clearable
style="width: 240px"
>
<el-option
v-for="dict in dicData.marketingType"
v-bind="dict"
:key="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6" :xs="24">
<el-form-item label="下单时间">
<el-date-picker
v-model="queryParams.date"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="rangePickerOptions"
style="width: 240px"
/>
</el-form-item>
</el-col>
<el-col :span="6" :xs="24" style="line-height: 32px">
<el-button type="primary" icon="el-icon-search" size="mini">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini">重置</el-button>
<el-button icon="el-icon-document" size="mini">导出订单</el-button>
</el-col>
</el-form>
</el-row>
<el-radio-group v-model="activeTabName">
<el-radio-button
v-for="tabPane in tabPanes"
:label="tabPane.label"
>{{tabPane.text}}</el-radio-button>
</el-radio-group>
<el-table
:data="tableData"
:span-method="spanMethod"
:row-class-name="rowClassName"
border
>
<el-table-column type="selection" :selectable="(row, index) => index % 2"/>
<el-table-column label="商品" prop="goods" width="360">
<template slot-scope="{ row, $index }">
<el-row
v-if="$index % 2 === 0"
class="card-header"
>
<el-col :span="5">
订单号：{{row.orderNo}}
<el-popover
title="支付流水号："
:content="row.payNo"
ref="popover"
placement="right"
width="200"
trigger="click"
/>
<el-button type="text" v-popover:popover>
更多
</el-button>
</el-col>
<el-col :span="5">下单时间：{{row.time}}</el-col>
<el-col :span="5">订单来源：{{row.orderSource}}</el-col>
<el-col :span="5">支付方式：{{row.payWay}}</el-col>
<el-col :span="4" align="right">
<el-button type="text">打印发货单</el-button>
<el-button type="text">详情</el-button>
<el-button type="text">备注</el-button>
</el-col>
</el-row>
<div v-else class="goods-info">
<img :src="row.picture"/>
<span class="ellipsis-2">{{row.name}}</span>
</div>
</template>
</el-table-column>
<el-table-column label="单价(元)/数量" prop="fee" align="center" width="115">
<template slot-scope="{ row }">
<div>{{row.price}}</div>
<div>{{row.count}}</div>
</template>
</el-table-column>
<el-table-column label="维权" prop="safeguard" align="center" width="115"/>
<el-table-column label="实付金额(元)" prop="amount" align="center" width="115"/>
<el-table-column label="买家/收货人" prop="buyer" width="360">
<template slot-scope="{ row }">
<div>{{row.buyer}}</div>
<div>{{row.receiver}}{{row.tel}}</div>
<div class="ellipsis-2">{{row.address}}</div>
</template>
</el-table-column>
<el-table-column label="配送方式" prop="sendWay" width="115"/>
<el-table-column label="交易状态" prop="status"/>
</el-table>
<pagination/>
</div>
</template>
<script>
const dicData = {
searchType: [
{ label: '订单号', value: 'ddh' },
{ label: '交易流水号', value: 'jylsh' },
{ label: '订单备注', value: 'ddbz' },
{ label: '收货人姓名', value: 'shrxm' },
{ label: '商品名称', value: 'spmc' },
{ label: '收货人电话', value: 'shrdh' },
{ label: '会员昵称', value: 'hync' },
{ label: '商品编号', value: 'spbh' }
],
orderType: [
{ label: '全部', value: 'qb' },
{ label: '物流订单', value: 'wldd' },
{ label: '自提订单', value: 'ztdd' },
{ label: '外卖订单', value: 'wmdd' },
{ label: '虚拟订单', value: 'xndd' },
{ label: '收银订单', value: 'sydd' }
],
orderStatus: [
{ label: '全部', value: 'qb' },
{ label: '待支付', value: 'dzf' },
{ label: '待发货', value: 'dfh' },
{ label: '已发货', value: 'yfh' },
{ label: '已收货', value: 'ysh' },
{ label: '已完成', value: 'ywc' },
{ label: '已关闭', value: 'ygb' },
{ label: '退款中', value: 'tkz' }
],
orderSource: [
{ label: '全部', value: 'qb' },
{ label: '微信公众号', value: 'wxgzh' },
{ label: '微信小程序', value: 'wxxcx' },
{ label: 'PC', value: 'pc' },
{ label: 'H5', value: 'h5' },
{ label: 'APP', value: 'app' },
{ label: '收银台', value: 'syt' },
{ label: '代客下单', value: 'dkxd' }
],
payWay: [
{ label: '全部', value: 'qb' },
{ label: '在线支付', value: 'zxzf' },
{ label: '余额支付', value: 'yezf' },
{ label: '线下支付', value: 'xxzf' },
{ label: '积分兑换', value: 'jfdh' },
{ label: '支付宝支付', value: 'zfbzf' },
{ label: '微信支付', value: 'wxzf' }
],
marketingType: [
{ label: '全部', value: 'qb' },
{ label: '一口价', value: 'ykj' },
{ label: '专题', value: 'zt' },
{ label: '团购', value: 'tg' },
{ label: '拼团', value: 'pt' },
{ label: '拼团返利', value: 'ptfl' },
{ label: '盲盒', value: 'mh' },
{ label: '砍价', value: 'kj' },
{ label: '礼品卡优惠', value: 'lpkyh' },
{ label: '秒杀', value: 'ms' },
{ label: '积分兑换', value: 'jfdh' },
{ label: '组合套餐', value: 'zhtc' },
{ label: '预售', value: 'ys' }
]
}
const rangePickerOptions = {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
}
export default {
name: "index",
data () {
return {
dicData,
rangePickerOptions,
queryParams: {
searchType: 'ddh',
orderType: ''
},
activeTabName: 'all',
tabPanes: [
{ text: '全部', label: 'all' },
{ text: '待支付', label: 'toBePay' },
{ text: '待发货', label: 'toBeSend' },
{ text: '已发货', label: 'send' },
{ text: '已收货', label: 'received' },
{ text: '已完成', label: 'finished' },
{ text: '已关闭', label: 'closed' },
{ text: '退款中', label: 'refund' }
],
tableData: []
}
},
mounted () {
const data = [
{
orderNo: '20221026220424001',
payNo: '20221026220424001',
time: '2022-10-26 22:04:20',
orderSource: 'PC',
payWay: '微信支付',
name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
picture: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
price: '199',
count: '5件',
amount: 460,
safeguard: '主动退款',
buyer: '小明',
receiver: '小花',
tel: '15823655095',
address: '北京市-北京市-东城区 观音桥',
sendWay: '物流配送',
status: '已完成'
},
{
orderNo: '20221026220424001',
payNo: '20221026220424001',
time: '2022-10-26 22:04:20',
orderSource: 'PC',
payWay: '微信支付',
name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
picture: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
price: '199',
count: '5件',
amount: 460,
safeguard: '主动退款',
buyer: '小明',
receiver: '小花',
tel: '15823655095',
address: '北京市-北京市-东城区 观音桥',
sendWay: '物流配送',
status: '已完成'
},
{
orderNo: '20221026220424001',
payNo: '20221026220424001',
time: '2022-10-26 22:04:20',
orderSource: 'PC',
payWay: '微信支付',
name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
picture: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
price: '199',
count: '5件',
amount: 460,
safeguard: '主动退款',
buyer: '小明',
receiver: '小花',
tel: '15823655095',
address: '北京市-北京市-东城区 观音桥',
sendWay: '物流配送',
status: '已完成'
},
{
orderNo: '20221026220424001',
payNo: '20221026220424001',
time: '2022-10-26 22:04:20',
orderSource: 'PC',
payWay: '微信支付',
name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
picture: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
price: '199',
count: '5件',
amount: 460,
safeguard: '主动退款',
buyer: '小明',
receiver: '小花',
tel: '15823655095',
address: '北京市-北京市-东城区 观音桥',
sendWay: '物流配送',
status: '已完成'
}
]
data.forEach((record, index) => {
data.splice(index, 0, record)
})
this.tableData = data
},
methods: {
spanMethod ({ row, column, rowIndex, columnIndex }) {
if (rowIndex % 2 === 0) {
if (columnIndex === 1) {
return [1, 8]
} else {
return [0, 0]
}
}
},
rowClassName ({ rowIndex }) {
if (rowIndex % 2 === 0) {
return 'even-row'
} else {
return 'odd-row'
}
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .el-table {
margin-top: 20px;
.el-table__row{
&.even-row{
>.el-table__cell{
padding: 0;
.cell{
padding: 0;
.card-header{
padding: 0 10px;
line-height: 44px;
background: #f7f7f7;
color: #333;
}
}
}
}
>.el-table__cell{
.goods-info{
display: flex;
img{
margin-right: 10px;
width: 60px;
height: 60px;
border: 1px solid #e2e2e2;
}
}
.ellipsis-2{
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
-webkit-line-clamp: 2; /* 要显示的行数 */
-webkit-box-orient: vertical;
word-break: break-all;
line-height: 22px !important;
max-height: 44px !important;
}
}
}
}
</style>