承租订单管理

src/http/api/usercenter/seekorder.ts

@@ -3,6 +3,6 @@
 import { get, post } from '../../index'
 
 // 获取订单列表
-export const getOrderListApi = () => {
+export const getOrderListApi = (data: any) => {
-    return get('/zlpt-order/info/list', {})
+    return get('/material-mall/order/getOrderDetails', data)
 }

src/router/index.ts

@@ -225,6 +225,18 @@ const routes: Array<RouteRecordRaw> = [
                             isLogin: true
                         },
                     },
+                    /* 订单管理（订单详情） */
+                    {
+                        path: 'orderManagementInfo',
+                        name: 'orderManagementInfo',
+                        component: () => import('@/views/user/orderManagement/detail.vue'),
+                        meta: {
+                            title: '订单详情',
+                            keepAlive: true,
+                            AuthFlag: false,
+                            isLogin: false
+                        },
+                    },
                     /* 订单管理（退租） */
                     {
                         path: 'rentinTermination',

src/views/user/orderManagement/detail.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import PagingComponent from 'components/PagingComponent/index.vue'
+import { useRouter } from 'vue-router'
+import { getOrderListApi } from 'http/api/usercenter/seekorder'
+const router = useRouter()
+
+const cardList = ref<any>([])
+const Id = 1
+// 获取数据列表
+// const getList = async () => {
+//     const res: any = await getOrderListApi()
+//     console.log('获取数据列表***', res)
+//     tableData.value = res.rows
+//     total.value = res.total
+// }
+
+//订单详情
+const   handleViewOrder=(row:any)=>{
+    router.push({
+        path: '/user/orderManagement/detail',
+        query: { Id:Number(5),isView:"true" }
+    })
+}
+
+// onMounted(() => {
+//     getList()
+// })
+
+
+
+
+
+
+
+const time = ref([])
+</script>
+
+<template>
+    <!-- 订单管理 -->
+    <div class="container">
+      <el-breadcrumb separator="/">
+      <el-breadcrumb-item :to="{ path: '/myuser/orderManagement' }">订单管理</el-breadcrumb-item>
+      <el-breadcrumb-item>订单明细</el-breadcrumb-item>
+      </el-breadcrumb>
+      <div class="section">
+        <el-header>
+          <el-row type="flex" justify="space-between" align="middle">
+          <el-col :span="3">
+            <span>订单流程</span>
+          </el-col>
+          <el-col :span="1" style="text-align:right;margin-right:300px;font-size: 20px;">
+            <div style="color:green;border: 1px solid #ccc;">{{titleStaus}}</div>
+          </el-col>
+          </el-row>
+        </el-header> 
+
+         <el-steps class="step" :space="400" :active="Id" finish-status="success">
+            <el-step :title="getStepTitle(1)" :description="getDescription(1)" ></el-step>
+            <el-step :title="getStepTitle(2)" :description="getDescription(2)" ></el-step>
+            <el-step :title="getStepTitle(3)" :description="getDescription(3)" ></el-step>
+            <el-step :title="getStepTitle(4)" :description="getDescription(4)" ></el-step>
+            <el-step :title="getStepTitle(5)" :description="getDescription(5)" ></el-step>
+        </el-steps>
+      </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.section {
+  margin-top: 30px;
+  margin-bottom: 20px;
+  .step{
+    margin-left:80px;;
+  }
+}
+.container {
+    width: 800px;
+    margin: 0 auto;
+    padding: 10px;
+    background: #eeeff6;
+    font-size: 14px;
+
+    .cart-title {
+        margin-top: 10px;
+        padding: 10px 0;
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        font-weight: bold;
+        letter-spacing: 1px;
+    }
+
+    .cart-title div:first-child {
+        width: 5px;
+        height: 20px;
+        background-color: #4fabfe;
+    }
+
+    .cart-th {
+        margin: 15px 0;
+        div {
+            text-align: center;
+        }
+    }
+
+    .cart-tbody {
+        background: #fff;
+        padding: 8px 12px;
+        margin: 10px;
+
+        .cart-user-info {
+            display: flex;
+            align-items: center;
+            font-size: 13px;
+
+            .code,
+            .orderTime {
+                padding: 3px 18px;
+                border: 1px solid #ccc;
+            }
+
+            .czcompanyName {
+                margin-left: 20px;
+                border-right: none;
+            }
+        }
+
+        .cart-list {
+            margin: 15px 0;
+            display: flex;
+            align-items: center;
+            font-size: 13px;
+            div {
+                text-align: center;
+            }
+
+            .goods-info {
+                display: flex;
+                align-content: center;
+
+                img {
+                    width: 140px;
+                    height: 80px;
+                }
+
+                .goods-code {
+                    margin-left: 70px;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-around;
+
+                    div {
+                        text-align: left;
+                    }
+                }
+            }
+
+            .lease-date {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                font-size: 12px;
+            }
+
+            .red-font {
+                color: #ff4800;
+                font-weight: bold;
+            }
+        }
+    }
+
+    .protocol-handle {
+        background: #fff;
+        padding: 8px 12px;
+        margin: 10px;
+        font-size: 13px;
+
+        .checkbox-container a {
+            color: #ff4800;
+            text-decoration: underline;
+        }
+    }
+}
+</style>

src/views/user/orderManagement/index.vue

@@ -3,13 +3,27 @@ import { ref } from 'vue'
 import PagingComponent from 'components/PagingComponent/index.vue'
 import { useRouter } from 'vue-router'
 import { getOrderListApi } from 'http/api/usercenter/seekorder'
-const queryParams = ref({})
+/* 查询参数 */
+const queryParams: any = ref({
+    deviceName: '',
+    orderStatus: '',
+    czcompanyName: '', 
+    companyName: '', 
+    lowerBound:'',
+    upperBound:'',
+    pageSize: 10,
+    pageNum: 1,
+    startTime:'',
+    endTime:'',
+})
+const time = ref([])
 const router = useRouter()
 const pageSize = 10
 const pageNumber = 1
 const total: any = ref(0)
 const cardList = ref<any>([])
 const status = 0
+const statusList = [{id:'0',name:'未下单'},{id:'1',name:'已下单'},{id:'2',name:'待出库'},{id:'3',name:'已出库'},{id:'4',name:'租赁中'},{id:'5',name:'已退租'},{id:'5',name:'已完成'}]
 // 获取数据列表
 // const getList = async () => {
 //     const res: any = await getOrderListApi()
@@ -19,125 +33,25 @@ const status = 0
 // }
 /** 查询列表 */
 const getList = async () => {
-    // if(this.dateRange.length>0){
+    if(time.value.length>0){
-    //     this.queryParams.startTime=this.dateRange[0]
+        console.log('time',time)
-    //     this.queryParams.endTime=this.dateRange[1]
+        queryParams.value.startTime=time.value[0]
-    // }else{
+        queryParams.value.endTime=time.value[1]
-    //     this.queryParams.startTime=undefined
+    }else{
-    //     this.queryParams.endTime=undefined
+        queryParams.value.startTime=undefined
-    // }
+        queryParams.value.endTime=undefined
-    cardList.value = [
+    }
-        {
+     const res: any = await getOrderListApi(queryParams.value)
-            company_name: '安徽博诺斯有限公司',
+        cardList.value = res.rows
-            user_name: '王先生',
+        total.value = res.total
-            user_phone: '18725632356',
+}
-            isChecked: false,
+
-            good_list: [
+//订单详情
-                {
+const   handleViewOrder=(row:any)=>{
-                    goods_pic:
+    router.push({
-                        'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
+         name: 'orderManagementInfo' ,
-                    goods_name: 'W190挖掘机',
+        query: { Id:Number(5),isView:"true" }
-                    goods_code: '995221_JHL',
+    })
-                    goods_type: '挖地型号996',
-                    lease_date: '',
-                    lease_pic: 300,
-                    lease_day: 1,
-                    goods_num: 0,
-                    totalAmount: 0,
-                    isChecked: false,
-                    lease_date_string: '',
-                },
-            ],
-        },
-        {
-            company_name: '安徽博诺斯有限公司',
-            user_name: '王先生',
-            user_phone: '18725632356',
-            isChecked: false,
-            good_list: [
-                {
-                    goods_pic:
-                        'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
-                    goods_name: 'W190挖掘机',
-                    goods_code: '995221_JHL',
-                    goods_type: '挖地型号996',
-                    lease_date: '',
-                    lease_pic: 300,
-                    lease_day: 0,
-                    goods_num: 0,
-                    totalAmount: 0,
-                    isChecked: false,
-                    lease_date_string: '',
-                },
-                {
-                    goods_pic:
-                        'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
-                    goods_name: 'W190挖掘机',
-                    goods_code: '995221_JHL',
-                    goods_type: '挖地型号996',
-                    lease_date: '',
-                    lease_pic: 300,
-                    lease_day: 0,
-                    goods_num: 0,
-                    totalAmount: 0,
-                    isChecked: false,
-                    lease_date_string: '',
-                },
-                {
-                    goods_pic:
-                        'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
-                    goods_name: 'W190挖掘机',
-                    goods_code: '995221_JHL',
-                    goods_type: '挖地型号996',
-                    lease_date: '',
-                    lease_pic: 300,
-                    lease_day: 0,
-                    goods_num: 0,
-                    totalAmount: 0,
-                    isChecked: false,
-                    lease_date_string: '',
-                },
-            ],
-        },
-        {
-            company_name: '安徽博诺斯有限公司',
-            user_name: '王先生',
-            user_phone: '18725632356',
-            isChecked: false,
-            good_list: [
-                {
-                    goods_pic:
-                        'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
-                    goods_name: 'W190挖掘机',
-                    goods_code: '995221_JHL',
-                    goods_type: '挖地型号996',
-                    lease_date: '',
-                    lease_pic: 300,
-                    lease_day: 0,
-                    goods_num: 0,
-                    totalAmount: 0,
-                    isChecked: false,
-                    lease_date_string: '',
-                },
-                {
-                    goods_pic:
-                        'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
-                    goods_name: 'W190挖掘机',
-                    goods_code: '995221_JHL',
-                    goods_type: '挖地型号996',
-                    lease_date: '',
-                    lease_pic: 300,
-                    lease_day: 0,
-                    goods_num: 0,
-                    totalAmount: 0,
-                    isChecked: false,
-                    lease_date_string: '',
-                },
-            ],
-        },
-    ]
-    total.value = cardList.value.length
-    console.log(total.value)
 }
 
 onMounted(() => {
@@ -149,7 +63,6 @@ const queryTableList = () => {
     getList()
 }
 
-const tableData = ref([])
 
 /* 退租按钮 */
 const clickRentingTermination = () => {
@@ -191,17 +104,16 @@ const clickConfirmReceipt = (row: any) => {
     })
 }
 
-const time = ref([])
 </script>
 
 <template>
     <!-- 订单管理 -->
     <div class="container">
         <el-form :model="queryParams" :inline="true" size="small">
-            <el-form-item label="订单编号：" prop="menuName">
+            <el-form-item label="装备名称：" prop="deviceName">
-                <el-input />
+                <el-input v-model.trim="queryParams.deviceName" style="width: 160px" clearable/>
             </el-form-item>
-            <el-form-item label="创建时间：" prop="menuName">
+            <el-form-item  prop="dateRange">
                 <el-date-picker
                     v-model="time"
                     type="daterange"
@@ -212,18 +124,55 @@ const time = ref([])
                     style="width: 180px"
                 />
             </el-form-item>
-            <el-form-item label="状态：" prop="menuName">
+            <el-form-item label="订单状态" prop="orderStatus">
-                <el-input />
+              <el-select v-model="queryParams.orderStatus" placeholder="请选择订单状态" style="width:120px" clearable>
+                <el-option
+                    v-for="item in statusList"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"
+                />
+                </el-select>
             </el-form-item>
-            <el-form-item label="装备类型：" prop="menuName">
+            <el-form-item label="出租单位：" prop="czcompanyName">
-                <el-input />
+                <el-input 
+                v-model.trim="queryParams.czcompanyName"
+                clearable
+                maxlength="20"
+                style="width: 160px"
+                />
             </el-form-item>
-            <el-form-item label="装备名称：" prop="menuName">
+            <el-form-item label="承租单位：" prop="companyName">
-                <el-input />
+                <el-input 
+                v-model.trim="queryParams.companyName"
+                clearable
+                maxlength="20"
+                style="width: 160px"
+                />
             </el-form-item>
+            <el-form-item  prop="lowerBound">
+            <el-input
+                v-model.trim="queryParams.lowerBound"
+                placeholder="租金/元"
+                clearable
+                maxlength="20"
+                style="width:60px"
+            />  
+            <span style="display: flex;
+                justify-content: center;width:20px;text-align:center;margin-left:25px">——</span> 
+        </el-form-item>
+          <el-form-item  prop="upperBound">
+            <el-input
+                v-model.trim="queryParams.upperBound"
+                placeholder="租金/元"
+                clearable
+                maxlength="20"
+                style="width:60px;"
+            />   
+        </el-form-item>
             <el-form-item>
                 <el-button type="primary" @click="queryTableList">查询</el-button>
-                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+                <el-button   @click="resetQuery">重置</el-button>
             </el-form-item>
         </el-form>
 
@@ -240,31 +189,31 @@ const time = ref([])
                 </el-col>
                 <el-col :span="22">
                     <el-row>
-                        <el-col :span="7">
-                            <div
-                                class="item"
-                                style="flex-shrink: 0; margin-bottom: 5px; font-size: 12px"
-                            >
-                                <span>订单编号:</span>
-                                {{ item.company_name }}
-                            </div>
-                        </el-col>
-                        <el-col :span="7">
-                            <div
-                                class="item"
-                                style="flex-shrink: 0; margin-bottom: 5px; font-size: 12px"
-                            >
-                                <span class="user-name">下单时间:</span>
-                                {{ item.user_name }}
-                            </div>
-                        </el-col>
                         <el-col :span="6">
                             <div
                                 class="item"
                                 style="flex-shrink: 0; margin-bottom: 5px; font-size: 12px"
                             >
-                                <span class="user-phone">装备所属公司:</span>
+                                <span>订单编号:</span>
-                                {{ item.user_phone }}
+                                {{ item.code }}
+                            </div>
+                        </el-col>
+                        <el-col :span="7">
+                            <div
+                                class="item"
+                                style="flex-shrink: 0; margin-bottom: 5px; font-size: 12px"
+                            >
+                                <span >下单时间:</span>
+                                {{ item.orderTime }}
+                            </div>
+                        </el-col>
+                        <el-col :span="7">
+                            <div
+                                class="item"
+                                style="flex-shrink: 0; margin-bottom: 5px; font-size: 12px"
+                            >
+                                <span >装备所属公司:</span>
+                                {{ item.czcompanyName }}
                             </div>
                         </el-col>
                         <el-col :span="4">
@@ -288,13 +237,13 @@ const time = ref([])
                     </el-row>
 
                     <el-row>
-                        <el-col :span="7">
+                        <el-col :span="6">
                             <div
                                 class="item"
                                 style="flex-shrink: 0; margin-bottom: 5px; font-size: 12px"
                             >
-                                <span>出租方联系电话:</span>
+                                <span>出租方电话:</span>
-                                {{ item.company_name }}
+                                {{ item.personPhone }}
                             </div>
                         </el-col>
                         <el-col :span="7">
@@ -302,8 +251,8 @@ const time = ref([])
                                 class="item"
                                 style="flex-shrink: 0; margin-bottom: 5px; font-size: 12px"
                             >
-                                <span class="user-name">承租方联系电话:</span>
+                                <span>承租方电话:</span>
-                                {{ item.user_name }}
+                                {{ item.phoneNumber }}
                             </div>
                         </el-col>
                         <el-col :span="7">
@@ -311,48 +260,54 @@ const time = ref([])
                                 class="item"
                                 style="flex-shrink: 0; margin-bottom: 5px; font-size: 12px"
                             >
-                                <span class="user-phone">承租方地址:</span>
+                                <span >承租方地址:</span>
-                                {{ item.user_phone }}
+                                {{ item.companyName }}
                             </div>
                         </el-col>
                     </el-row>
                 </el-col>
             </el-row>
 
-            <el-row class="cart-list" v-for="(goods, j) in item.good_list" :key="j">
+            <el-row class="cart-list" v-for="(goods, j) in item.detailsList" :key="j">
                 <el-col :span="1">
                     <div style="text-align: center">
                         <el-checkbox v-model="goods.isChecked" @change="onChangeGoods(index)">
                         </el-checkbox>
                     </div>
                 </el-col>
-                <el-col :span="8" class="goods-info">
+                <el-col :span="9" class="goods-info">
                     <el-col :span="7">
-                        <img :src="goods.goods_pic" alt="" />
+                        <img :src="goods.url" alt="" />
                     </el-col>
                     <div class="goods-code">
-                        <div style="font-size: 12px; font-weight: bold">{{ goods.goods_name }}</div>
+                        <div style="font-size: 10px; font-weight: bold">{{ goods.deviceName }}</div>
-                        <div>租期： {{ goods.lease_day }}{{ ' ' + '天' }}</div>
+                        <div>租期：{{ goods.days }}{{ ' ' + '天' }}</div>
-                        <div>租金：{{ goods.lease_pic }}{{ ' ' + '元/天' }}</div>
+                        <div>租金：{{ goods.dayLeasePrice }}{{ ' ' + '元/天' }}</div>
-                        <div>数量：{{ goods.goods_num }}{{ ' ' + '台' }}</div>
+                        <div>数量：{{ goods.num }}{{ ' ' + '台' }}</div>
                     </div>
                 </el-col>
                 <el-col :span="2">
                     <div style="font-size: 14px; font-weight: bold; margin-bottom: 10px">
                         总费用
                     </div>
-                    <div class="red-font">1500</div>
+                    <div class="red-font">{{goods.costs}}</div>
                 </el-col>
                 <el-col :span="6">
                     <div style="font-size: 14px; font-weight: bold; margin-bottom: 10px">租期</div>
                     <div style="color: black; font-weight: bold">
-                        {{ '2024-10-11' + ' ' }}{{ '至' }}{{ ' ' + '2024-10-11' }}
+                        {{ goods.rentBeginTime  }}
                     </div>
+                    <div style="margin-top:3px;margin-bottom:3px">{{ '至' }}</div>
+                    <div style="color: black; font-weight: bold">{{ goods.rentEndTime }}</div>
                 </el-col>
                 <el-col :span="2">
-                    <div style="font-size: 14px; font-weight: bold; margin-bottom: 10px">
+                    <div v-if="goods.orderStatus=='0'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"未下单"}}</div>
-                        {{ '待出租' }}
+                    <div v-if="goods.orderStatus=='1'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"已下单"}}</div>
-                    </div>
+                    <div v-if="goods.orderStatus=='2'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"待出库"}}</div>
+                    <div v-if="goods.orderStatus=='3'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"待收货"}}</div>
+                    <div v-if="goods.orderStatus=='4'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"租赁中"}}</div>
+                    <div v-if="goods.orderStatus=='5'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"已退租"}}</div>
+                    <div v-if="goods.orderStatus=='6'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"已完成"}}</div>
                 </el-col>
                 <el-col :span="3">
                     <div>
@@ -391,13 +346,13 @@ const time = ref([])
                     </div>
                 </el-col>
             </el-row>
-            <PagingComponent
-                @getList="getList"
-                :pageSize="pageSize"
-                :pageNumber="pageNumber"
-                :total="total"
-            />
         </div>
+        <PagingComponent
+            @getList="getList"
+            :pageSize="pageSize"
+            :pageNumber="pageNumber"
+            :total="total"
+        />
     </div>
 </template>
 
@@ -442,13 +397,13 @@ const time = ref([])
             align-items: center;
             font-size: 13px;
 
-            .user-name,
+            .code,
-            .user-phone {
+            .orderTime {
                 padding: 3px 18px;
                 border: 1px solid #ccc;
             }
 
-            .user-name {
+            .czcompanyName {
                 margin-left: 20px;
                 border-right: none;
             }