|
@@ -18,24 +18,12 @@
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="创建时间" class="w-[280px]">
|
|
|
- <el-date-picker
|
|
|
- v-model="createTime"
|
|
|
- @change="setCreateTime"
|
|
|
- type="datetimerange"
|
|
|
- range-separator="-"
|
|
|
- start-placeholder="开始时间"
|
|
|
- end-placeholder="结束时间"
|
|
|
- />
|
|
|
+ <el-date-picker v-model="createTime" @change="setCreateTime" type="datetimerange"
|
|
|
+ range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="结账时间" class="w-[280px]">
|
|
|
- <el-date-picker
|
|
|
- v-model="checkoutTime"
|
|
|
- @change="setCheckoutTime"
|
|
|
- type="datetimerange"
|
|
|
- range-separator="-"
|
|
|
- start-placeholder="开始时间"
|
|
|
- end-placeholder="结束时间"
|
|
|
- />
|
|
|
+ <el-date-picker v-model="checkoutTime" @change="setCheckoutTime" type="datetimerange"
|
|
|
+ range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" />
|
|
|
</el-form-item>
|
|
|
<el-form-item class="w-[280px]">
|
|
|
<el-button type="primary" @click="resetPage">查询</el-button>
|
|
@@ -44,36 +32,65 @@
|
|
|
</el-form>
|
|
|
</el-card>
|
|
|
<el-card class="!border-none mt-4" shadow="never">
|
|
|
- <el-table v-loading="pager.loading" :data="pager.lists">
|
|
|
+ <el-table v-loading="pager.loading" :data="pager.lists" row-key="id" :expand-row-keys="expandRowKeys">
|
|
|
+ <el-table-column type="expand">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <div class="order-detail-wrapper" v-loading="!orderDetails[row.id]">
|
|
|
+ <template v-if="orderDetails[row.id]">
|
|
|
+ <div class="detail-header">
|
|
|
+ <span>订单详情</span>
|
|
|
+ <span class="time">下单时间:{{ timeFormat(orderDetails[row.id].createTime) }}</span>
|
|
|
+ </div>
|
|
|
+ <el-table :data="orderDetails[row.id].dishes" border class="detail-table">
|
|
|
+ <el-table-column label="菜品图片" width="120" align="center">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-image :src="row.image" :preview-src-list="[row.image]"
|
|
|
+ class="dish-image" fit="cover" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="菜品名称" />
|
|
|
+ <el-table-column prop="amount" label="单价">
|
|
|
+ <template #default="{ row }">
|
|
|
+ ¥{{ row.amount }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="number" label="数量" width="120" align="center" />
|
|
|
+ <el-table-column label="小计" width="120" align="right">
|
|
|
+ <template #default="{ row }">
|
|
|
+ ¥{{ row.amount * row.number}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="detail-footer">
|
|
|
+ <div class="total-info">
|
|
|
+ <span>共 {{ getTotalCount(orderDetails[row.id].dishes) }} 件商品</span>
|
|
|
+ <span class="total-price">
|
|
|
+ 订单总价:<em>¥{{ orderDetails[row.id].amount}}</em>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<el-table-column type="index" min-width="80" />
|
|
|
- <el-table-column
|
|
|
- label="订单号"
|
|
|
- prop="number"
|
|
|
- show-overflow-tooltip
|
|
|
- ></el-table-column>
|
|
|
+ <el-table-column label="订单号" prop="number" show-overflow-tooltip></el-table-column>
|
|
|
<el-table-column label="订单金额" prop="amount"></el-table-column>
|
|
|
<el-table-column label="桌号" prop="deskName"></el-table-column>
|
|
|
<el-table-column label="备注" prop="remark"></el-table-column>
|
|
|
- <el-table-column
|
|
|
- label="类型"
|
|
|
- prop="type"
|
|
|
- :formatter="(row) => (row.type == 0 ? '后台点单' : '扫码点单')"
|
|
|
- ></el-table-column>
|
|
|
- <el-table-column
|
|
|
- label="状态"
|
|
|
- prop="status"
|
|
|
- :formatter="
|
|
|
+ <el-table-column label="类型" prop="type"
|
|
|
+ :formatter="(row) => (row.type == 0 ? '后台点单' : '扫码点单')"></el-table-column>
|
|
|
+ <el-table-column label="状态" prop="status" :formatter="
|
|
|
(row) =>
|
|
|
row.status == 2 ? '已完成' : row.status == 0 ? '待下单' : '待结账'
|
|
|
- "
|
|
|
- ></el-table-column>
|
|
|
+ "></el-table-column>
|
|
|
<el-table-column label="结账时间" prop="checkoutTime"></el-table-column>
|
|
|
<el-table-column label="创建时间" prop="createTime"></el-table-column>
|
|
|
- <el-table-column label="操作" width="120" fixed="right"
|
|
|
- ><template #default="{ row }">
|
|
|
- <el-button type="primary" link :v-text="row.id"> 查看已点菜品 </el-button>
|
|
|
- </template></el-table-column
|
|
|
- >
|
|
|
+ <el-table-column label="操作" width="120" fixed="right">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-button type="primary" link @click="showDetail(row)">查看已点菜品</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
</el-table>
|
|
|
<div class="flex justify-end mt-4">
|
|
|
<pagination v-model="pager" @change="getLists" />
|
|
@@ -83,37 +100,142 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ordersList } from '@/api/orders'
|
|
|
-import { usePaging } from '@/hooks/usePaging'
|
|
|
-
|
|
|
-const createTime = ref()
|
|
|
-const checkoutTime = ref()
|
|
|
-const queryParams = reactive({
|
|
|
- type: '',
|
|
|
- status: '',
|
|
|
- checkoutTime: '',
|
|
|
- createTime: ''
|
|
|
-})
|
|
|
-const { pager, getLists, resetPage, resetParams } = usePaging({
|
|
|
- fetchFun: ordersList,
|
|
|
- params: queryParams
|
|
|
-})
|
|
|
-const setCreateTime = (v: any) => {
|
|
|
- queryParams.createTime =
|
|
|
- Math.round(v[0].getTime() / 1000).toString() +
|
|
|
- ',' +
|
|
|
- Math.round(v[1].getTime() / 1000).toString()
|
|
|
-}
|
|
|
-const setCheckoutTime = (v: any) => {
|
|
|
- queryParams.checkoutTime =
|
|
|
- Math.round(v[0].getTime() / 1000).toString() +
|
|
|
- ',' +
|
|
|
- Math.round(v[1].getTime() / 1000).toString()
|
|
|
-}
|
|
|
-// watch(queryParams, (newV, oldV) => {
|
|
|
-// console.log(JSON.stringify(newV))
|
|
|
-// })
|
|
|
-getLists()
|
|
|
+ import { ordersList, getOrderDetail } from '@/api/orders'
|
|
|
+ import { usePaging } from '@/hooks/usePaging'
|
|
|
+ import { timeFormat } from '@/utils/util'
|
|
|
+ import feedback from '@/utils/feedback'
|
|
|
+ // import Money from '@/utils/money'
|
|
|
+
|
|
|
+ const createTime = ref()
|
|
|
+ const checkoutTime = ref()
|
|
|
+ const queryParams = reactive({
|
|
|
+ type: '',
|
|
|
+ status: '',
|
|
|
+ checkoutTime: '',
|
|
|
+ createTime: ''
|
|
|
+ })
|
|
|
+ const { pager, getLists, resetPage, resetParams } = usePaging({
|
|
|
+ fetchFun: ordersList,
|
|
|
+ params: queryParams
|
|
|
+ })
|
|
|
+ const setCreateTime = (v : any) => {
|
|
|
+ queryParams.createTime =
|
|
|
+ Math.round(v[0].getTime() / 1000).toString() +
|
|
|
+ ',' +
|
|
|
+ Math.round(v[1].getTime() / 1000).toString()
|
|
|
+ }
|
|
|
+ const setCheckoutTime = (v : any) => {
|
|
|
+ queryParams.checkoutTime =
|
|
|
+ Math.round(v[0].getTime() / 1000).toString() +
|
|
|
+ ',' +
|
|
|
+ Math.round(v[1].getTime() / 1000).toString()
|
|
|
+ }
|
|
|
+ // watch(queryParams, (newV, oldV) => {
|
|
|
+ // console.log(JSON.stringify(newV))
|
|
|
+ // })
|
|
|
+
|
|
|
+ const expandRowKeys = ref<string[]>([])
|
|
|
+ const orderDetails = ref<Record<string, any>>({})
|
|
|
+
|
|
|
+ // 展示订单详情
|
|
|
+ const showDetail = async (row : any) => {
|
|
|
+ try {
|
|
|
+ // 如果已经加载过该订单详情,直接展开
|
|
|
+ if (orderDetails.value[row.id]) {
|
|
|
+ expandRowKeys.value = [row.id]
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ // 调用获取订单详情接口
|
|
|
+ const res = await getOrderDetail({id:row.id})
|
|
|
+ console.warn("***getOrderDetail***",res)
|
|
|
+ if (res) {
|
|
|
+ // 定义正确的类型
|
|
|
+ let orderDetail: Record<string, any> = {};
|
|
|
+ orderDetail.id = res.orderItem.id;
|
|
|
+ orderDetail.amount = res.orderItem.amount;//总价
|
|
|
+ orderDetail.createTime = res.orderItem.createTime + "000";
|
|
|
+ orderDetail.dishes = res.orderDishList;
|
|
|
+ // 保存订单详情
|
|
|
+ orderDetails.value[row.id] = orderDetail
|
|
|
+ // 展开当前行
|
|
|
+ expandRowKeys.value = [row.id]
|
|
|
+ } else {
|
|
|
+ feedback.msgError('获取订单详情失败111')
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取订单详情失败:', error)
|
|
|
+ feedback.msgError('获取订单详情失败')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 计算商品总数
|
|
|
+ const getTotalCount = (dishes : any[]) => {
|
|
|
+ return dishes.reduce((total, dish) => total + dish.count, 0)
|
|
|
+ }
|
|
|
+ // 计算订单总价
|
|
|
+ // const getTotalPrice = (dishes: any[]) => {
|
|
|
+ // return dishes.reduce((total, dish) => {
|
|
|
+ // return Money.add(total, Money.multiply(dish.price, dish.count))
|
|
|
+ // }, 0)
|
|
|
+ // }
|
|
|
+
|
|
|
+ getLists()
|
|
|
</script>
|
|
|
|
|
|
-<style></style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .order-detail-wrapper {
|
|
|
+ padding: 20px;
|
|
|
+ background: #f8f8f8;
|
|
|
+
|
|
|
+ .detail-header {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+
|
|
|
+ &.time {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-table {
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ :deep(.dish-image) {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+
|
|
|
+ .total-info {
|
|
|
+ text-align: right;
|
|
|
+
|
|
|
+ span {
|
|
|
+ margin-left: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
+
|
|
|
+ &.total-price {
|
|
|
+ em {
|
|
|
+ font-style: normal;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #f56c6c;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|