完成后端订单管理页面和接口的开发

api-interface/itmk-base-parent/itmk-base-web/src/main/java/com/itmk/web/order/controller/UserOrderController.java

@@ -29,4 +29,11 @@ public class UserOrderController {
         IPage<UserOrder> orderList = userOrderService.getOrderList(parm);
         return ResultUtils.success("查询成功!",orderList);
     }
+
+    //pc端查询订单
+    @GetMapping("/getPcOrderList")
+    public ResultVo getPcOrderList(WxOrderParm parm){
+        IPage<UserOrder> orderList = userOrderService.getPcOrderList(parm);
+        return ResultUtils.success("查询成功!",orderList);
+    }
 }

api-interface/itmk-base-parent/itmk-base-web/src/main/java/com/itmk/web/order/entity/UserOrder.java

@@ -4,6 +4,7 @@ import com.baomidou.mybatisplus.annotation.IdType;
 import com.baomidou.mybatisplus.annotation.TableField;
 import com.baomidou.mybatisplus.annotation.TableId;
 import com.baomidou.mybatisplus.annotation.TableName;
+import com.fasterxml.jackson.annotation.JsonFormat;
 import com.itmk.web.order_detail.entity.UserOrderDetail;
 import lombok.Data;
 
@@ -22,10 +23,11 @@ public class UserOrder {
     private String phone;
     private String address;
     private BigDecimal price;
+    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
     private Date createTime;
     private String status;
 
-//    排除字段
+    //    排除字段
     @TableField(exist = false)
     private List<UserOrderDetail> goodsList = new ArrayList<>();
 }

api-interface/itmk-base-parent/itmk-base-web/src/main/java/com/itmk/web/order/entity/WxOrderParm.java

@@ -8,4 +8,5 @@ public class WxOrderParm {
     private String type;
     private Long currentPage;
     private Long pageSize;
+    private String userName;
 }

api-interface/itmk-base-parent/itmk-base-web/src/main/java/com/itmk/web/order/service/UserOrderService.java

@@ -10,4 +10,6 @@ public interface UserOrderService extends IService<UserOrder> {
     void splaceOrder(OrderParm parm);
 
     IPage<UserOrder> getOrderList(WxOrderParm parm);
+
+    IPage<UserOrder> getPcOrderList(WxOrderParm parm);
 }

api-interface/itmk-base-parent/itmk-base-web/src/main/java/com/itmk/web/order/service/impl/UserOrderServiceImpl.java

@@ -74,4 +74,26 @@ public class UserOrderServiceImpl extends ServiceImpl<UserOrderMapper, UserOrder
         }
         return order;
     }
+
+    @Override
+    public IPage<UserOrder> getPcOrderList(WxOrderParm parm) {
+        //查询订单
+        QueryWrapper<UserOrder> query = new QueryWrapper<>();
+        query.lambda().like(StringUtils.isNotEmpty(parm.getUserName()),UserOrder::getUserName,parm.getUserName())
+                .eq(StringUtils.isNotEmpty(parm.getType()),UserOrder::getStatus,parm.getType())
+                .orderByDesc(UserOrder::getCreateTime);
+        IPage<UserOrder> page = new Page<>(parm.getCurrentPage(),parm.getPageSize());
+        IPage<UserOrder> order = this.baseMapper.selectPage(page, query);
+        //有数据，查询子订单
+        if(order.getRecords().size()>0){
+            for (int i = 0;i<order.getRecords().size();i++){
+                QueryWrapper<UserOrderDetail> queryWrapper = new QueryWrapper<>();
+                queryWrapper.lambda().eq(UserOrderDetail::getOrderId,order.getRecords().get(i).getOrderId());
+                List<UserOrderDetail> list = userOrderDetailService.list(queryWrapper);
+                order.getRecords().get(i).setGoodsList(list);
+            }
+
+        }
+        return order;
+    }
 }

order-system/src/api/order/OrderModel.ts

@@ -0,0 +1,8 @@
+//列表参数类型
+export type OrderListParm = {
+    currentPage:number;
+    pageSize:number;
+    type:string;
+    userName:string;
+    total:number; //分页的总条数
+}

order-system/src/api/order/index.ts

@@ -0,0 +1,6 @@
+import http from "../../http";
+import type { OrderListParm } from "./OrderModel";
+//列表
+export const gePcOrdertListApi = (parm:OrderListParm)=>{
+    return http.get("/wxapi/order/getPcOrderList",parm)
+}

order-system/src/compositions/order/useOrderTable.ts

@@ -0,0 +1,63 @@
+import type { OrderListParm } from '../../api/order/OrderModel'
+import {nextTick, onMounted, reactive, ref} from 'vue'
+import { gePcOrdertListApi } from '../../api/order'
+export default function useOrderTable(){
+    //表格高度
+    const tableHeight = ref(0)
+    //表格数据
+    const tableList = ref([])
+    //表格查询的参数
+    const listParm = reactive<OrderListParm>({
+        currentPage:1,
+        pageSize:10,
+        type:'',
+        userName:'',
+        total:0
+    })
+    //列表
+    const getList = async()=>{
+        let res = await gePcOrdertListApi(listParm)
+        if(res && res.code == 200){
+            //设置表格数据
+            tableList.value = res.data.records;
+            //设置分页总条数
+            listParm.total = res.data.total;
+        }
+    }
+    //搜索
+    const searchBtn = ()=>{
+        getList()
+    }
+    //重置
+    const resetBtn = ()=>{
+        listParm.currentPage = 1;
+        listParm.type = ''
+        getList()
+    }
+    //页容量改变触发
+    const sizeChange = (size:number)=>{
+        listParm.pageSize = size;
+        getList()
+    }
+    //页数改变触发
+    const currentChange = (page:number)=>{
+        listParm.currentPage = page;
+        getList()
+    }
+    onMounted(()=>{
+        getList()
+        nextTick(()=>{
+            tableHeight.value = window.innerHeight - 220
+        })
+    })
+    return{
+        tableList,
+        listParm,
+        getList,
+        searchBtn,
+        resetBtn,
+        sizeChange,
+        currentChange,
+        tableHeight
+    }
+}

order-system/src/views/order/Index.vue

@@ -1,13 +1,102 @@
 <template>
-  <div>
-    订单管理
-  </div>
+  <el-main>
+    <!-- 搜索栏 -->
+    <el-form :model="listParm" :inline="true" size="default">
+      <el-form-item>
+        <el-input
+          v-model="listParm.userName"
+          placeholder="请输入姓名"
+        ></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button :icon="Search" @click="searchBtn">搜索</el-button>
+        <el-button @click="resetBtn" type="danger" plain :icon="Close"
+          >重置</el-button
+        >
+      </el-form-item>
+    </el-form>
+    <!-- 表格 
+        主子表的关键：
+        1、父表需要设置 row-key字段
+        2、设置type = 'expand'
+        -->
+    <el-table
+      row-key="orderId"
+      :height="tableHeight"
+      :data="tableList"
+      border
+      stripe
+    >
+      <el-table-column type="expand">
+        <template #default="scope">
+          <el-table :data="scope.row.goodsList" border stripe>
+            <el-table-column label="菜品图片" prop="goodsImage">
+              <template #default="scope">
+                <el-image
+                  :src="scope.row.goodsImage.split(',')[0]"
+                  style="height: 60px; width: 60px; border-radius: 50%"
+                ></el-image>
+              </template>
+            </el-table-column>
+            <el-table-column label="名称" prop="goodsName"></el-table-column>
+            <el-table-column label="价格" prop="price"></el-table-column>
+            <el-table-column label="规格" prop="specsName"></el-table-column>
+          </el-table>
+        </template>
+      </el-table-column>
+      <el-table-column label="姓名" prop="userName"></el-table-column>
+      <el-table-column label="电话" prop="phone"></el-table-column>
+      <el-table-column label="地址" prop="address"></el-table-column>
+      <el-table-column label="价格" prop="price"></el-table-column>
+      <el-table-column label="下单时间" prop="createTime"></el-table-column>
+      <el-table-column label="发货状态" prop="status">
+        <template #default="scope">
+          <el-tag v-if="scope.row.status == '0'" type="danger" size="default"
+            >待发货</el-tag
+          >
+          <el-tag v-if="scope.row.status == '1'" size="default" effect="dark"
+            >已发货</el-tag
+          >
+          <el-tag v-if="scope.row.status == '2'" size="default" effect="dark"
+            >已收货</el-tag
+          >
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="200" align="center">
+        <template #default="scope">
+          <el-button type="primary" :icon="Edit" size="default">发货</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <el-pagination
+      @size-change="sizeChange"
+      @current-change="currentChange"
+      :current-page.sync="listParm.currentPage"
+      :page-sizes="[10, 20, 40, 80, 100]"
+      :page-size="listParm.pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="listParm.total"
+      background
+    >
+    </el-pagination>
+  </el-main>
 </template>
 
 <script setup lang="ts">
-
+import { Search, Close, Plus, Edit, Delete } from "@element-plus/icons-vue";
+import useOrderTable from "../../compositions/order/useOrderTable";
+//表格业务
+const {
+  tableList,
+  getList,
+  listParm,
+  resetBtn,
+  searchBtn,
+  sizeChange,
+  currentChange,
+  tableHeight,
+} = useOrderTable();
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>