出租方订单页面以及订单详情

components.d.ts

@@ -8,9 +8,12 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     Breadcrumb: typeof import('./src/components/Breadcrumb/index.vue')['default']
+    ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
+    ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCarousel: typeof import('element-plus/es')['ElCarousel']
     ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
+    ElCascader: typeof import('element-plus/es')['ElCascader']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
@@ -18,6 +21,7 @@ declare module 'vue' {
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
@@ -28,6 +32,8 @@ declare module 'vue' {
     ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElStep: typeof import('element-plus/es')['ElStep']
+    ElSteps: typeof import('element-plus/es')['ElSteps']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']

src/router/index.ts

@@ -216,7 +216,7 @@ const routes: Array<RouteRecordRaw> = [
                 },
             },
 
-            /* 订单管理（求租方） */
+            /* 订单管理（承租方） */
             {
                 path: 'orderManagement',
                 name: 'orderManagement',
@@ -228,7 +228,31 @@ const routes: Array<RouteRecordRaw> = [
                     isLogin: true
                 },
             },
-            /* 订单管理（订单详情） */
+            /* 订单管理（出租方） */
+                {
+                    path: 'orderManagementBuy',
+                    name: 'orderManagementBuy',
+                    component: () => import('@/views/user/orderManagementCz/index.vue'),
+                    meta: {
+                        title: '订单管理（求租）',
+                        keepAlive: true,
+                        AuthFlag: false,
+                        isLogin: true
+                    },
+                },
+            /* 订单管理（订单详情出租） */
+            {
+                path: 'orderManagementInfoBuy',
+                name: 'orderManagementInfoBuy',
+                component: () => import('@/views/user/orderManagementCz/detail.vue'),
+                meta: {
+                    title: '订单详情',
+                    keepAlive: true,
+                    AuthFlag: false,
+                    isLogin: false
+                },
+            },
+            /* 订单管理（订单详情承租） */
             {
                 path: 'orderManagementInfo',
                 name: 'orderManagementInfo',

src/views/user/orderManagement/detail.vue

@@ -6,7 +6,7 @@ import { getOrderListInfoApi } from 'http/api/usercenter/seekorder'
 const route = useRoute()
 /* 查询参数 */
 const cardList = ref<any>({})
-const orderStatusTemp = ref<Number>(0)
+const orderStatusTemp = ref<number>(0)
 const idTemp = ref<string>('')
 const titleStaus = ref<any>('')
 // 获取数据列表
@@ -19,21 +19,24 @@ const titleStaus = ref<any>('')
 
   // 根据步骤的 Id 返回对应的标题
 const  getStepTitle = (stepId:number)=> {
-        if (orderStatusTemp.value === 1) {
+        if (orderStatusTemp.value === 2) {
           titleStaus.value=  '待出库' ;
           return stepId === 1 ? '待出库' : '';
-        } else if (orderStatusTemp.value === 2) {
+        } else if (orderStatusTemp.value === 3) {
           titleStaus.value=  '待收货' ;
           return stepId === 1 ? '已出库' : stepId === 2 ? '待收货' : '';
-        } else if (orderStatusTemp.value === 3) {
+        } else if (orderStatusTemp.value === 4) {
           titleStaus.value=  '租赁中' ;
           return stepId === 1 ? '已出库' : stepId === 2 ? '已收货' : stepId === 3 ? '租赁中' : '';
-        } else if (orderStatusTemp.value === 4) {
-          titleStaus.value=  '发起费用结算' ;
-          return stepId === 1 ? '已出库' : stepId === 2 ? '已收货' : stepId === 3 ? '租赁结束' : stepId === 4 ? '发起费用结算' : '';
         } else if (orderStatusTemp.value === 5) {
+          titleStaus.value=  '已退租' ;
+          return stepId === 1 ? '已出库' : stepId === 2 ? '已收货' : stepId === 3 ? '租赁结束' : stepId === 4 ? '已退租' : '';
+        } else if (orderStatusTemp.value === 6) {
           titleStaus.value= '已完成' ;
           return stepId === 1 ? '已出库' : stepId === 2 ? '已收货' : stepId === 3 ? '租赁结束' : stepId === 4 ? '已退租' : stepId === 5 ? '已完成' : '';
+        } else if(orderStatusTemp.value === 7) {
+          titleStaus.value= '已驳回' ;
+          return stepId === 1 ? '已驳回' : '';
         }
         titleStaus.value=''
         return ''; // 默认返回空字符串
@@ -70,7 +73,7 @@ const time = ref([])
     <!-- 订单管理 -->
     <div class="container">
       <el-breadcrumb separator="/">
-      <el-breadcrumb-item :to="{ path: '/myuser/orderManagement' }">订单管理</el-breadcrumb-item>
+      <el-breadcrumb-item :to="{ path: '/my-user/orderManagement' }">订单管理</el-breadcrumb-item>
       <el-breadcrumb-item>订单明细</el-breadcrumb-item>
       </el-breadcrumb>
       <div class="section">
@@ -85,12 +88,12 @@ const time = ref([])
           </el-row>
         </el-header> 
 
-         <el-steps class="step" :space="400" :active="orderStatusTemp.value" finish-status="success">
+         <el-steps class="step" :space="400" :active="orderStatusTemp===7 ? 1 : orderStatusTemp-1" finish-status="success">
             <el-step :title="getStepTitle(1)" ></el-step>
             <el-step :title="getStepTitle(2)" ></el-step>
             <el-step :title="getStepTitle(3)" ></el-step>
             <el-step :title="getStepTitle(4)" ></el-step>
-            <el-step :title="getStepTitle(5)" :finish-status="orderStatusTemp.value >= 5 ? 'success' : ''"></el-step>
+            <el-step :title="getStepTitle(5)" ></el-step>
         </el-steps>
       </div>
 
@@ -179,6 +182,7 @@ const time = ref([])
                     <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>
+                    <div v-if="goods.orderStatus=='7'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"已驳回"}}</div>
                 </el-col>
                  <el-col :span="3">
                     <div>
@@ -210,7 +214,7 @@ const time = ref([])
 <style lang="scss" scoped>
 
 .container {
-    width: 800px;
+    // width: 800px;
     margin: 0 auto;
     padding: 10px;
     // background: #eeeff6;

src/views/user/orderManagement/index.vue

@@ -18,26 +18,25 @@ const queryParams: any = ref({
     companyName: '',
     lowerBound: '',
     upperBound: '',
-    pageSize: 10,
+    pageSize: 20,
     pageNum: 1,
     startTime: '',
     endTime: '',
 })
 const time = ref([])
 const router = useRouter()
-const pageSize = 10
+const pageSize = 20
 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: '已完成' },
+    { id: '6', name: '已完成' },
+    { id: '7', name: '已驳回' },
 ]
 // 获取数据列表
 // const getList = async () => {
@@ -77,6 +76,39 @@ onMounted(() => {
 const queryTableList = () => {
     getList()
 }
+// 全选事件
+const onChangeCompany = (e: boolean, index: number, item: any) => {
+    cardList.value[index].detailsList.forEach((item:any)=>{
+        if(item.orderStatus=="2"){
+            item.isChecked = e;
+        }
+    })
+}
+
+// 单选事件
+const onChangeGoods = (index: number) => {
+    let flag = true;
+    for (let item of cardList.value[index].detailsList) {
+        if (item.orderStatus == "2" && item.isChecked != true) {
+            flag = false;
+            break; 
+        }
+    }
+    cardList.value[index].isChecked = flag;
+}
+
+    // 计算是否过期
+   const isExpired=(goods:any)=> {
+      // 获取当前日期并去掉时间部分
+      const today = new Date();
+      today.setHours(0, 0, 0, 0);
+
+      // 将endtime转为Date对象
+      const endTime = new Date(goods.rentEndTime.replace(/-/g, "/"));
+
+      // 判断endtime是否早于今天
+      return endTime < today;
+}
 
 /* 退租按钮 */
 const clickRentingTermination = () => {
@@ -380,12 +412,6 @@ const dialogFormVisibleSettlemoney: any = ref(false)
     }
 
         //报废费用 修改
-
-
-         //报废费用 修改
-
-          //报废费用 修改
-           //报废费用 修改
  const  addPartItem3=()=> {
       partItems3.value.push({ partType: "", num: "", isCharge: "" });
     }
@@ -395,6 +421,137 @@ const dialogFormVisibleSettlemoney: any = ref(false)
       }
     }
 
+const settleListTitle = ref('')
+// 费用清单弹框显示隐藏
+const dialogFormVisibleSettleList: any = ref(false)
+const tableData1: any = ref([
+   {
+    name1:'测试1',
+    name2:'测试1-1',
+    name3:'3台',
+    jy1:'100',
+    jy2:'31',
+    jy3:'2024-11-25 至2024-12-25',
+    jy4:'1600',
+   },
+    {
+    name1:'测试2',
+    name2:'测试2-1',
+    name3:'3台',
+    jy1:'100',
+    jy2:'31',
+    jy3:'2024-11-25 至2024-12-25',
+    jy4:'1600',
+   }
+])
+const tableData2: any = ref([
+   {
+    name1:'测试2',
+    name2:'测试2-1',
+    name3:'3台',
+    jy1:'类型1',
+    jy2:'维修中',
+    jy3:'1500',
+   },
+    {
+    name1:'测试2',
+    name2:'测试2-2',
+    name3:'3台',
+    jy1:'类型2',
+    jy2:'维修中',
+    jy3:'1500',
+   }
+])
+const tableData3: any = ref([
+   {
+    name1:'测试3',
+    name2:'测试3-1',
+    name3:'3台',
+    jy1:'轻度维修',
+    jy2:'1400',
+   },
+    {
+    name1:'测试3',
+    name2:'测试3-2',
+    name3:'3台',
+    jy1:'轻度维修',
+    jy2:'1400',
+   }
+])
+const tableData4: any = ref([
+   {
+    name1:'测试4',
+    name2:'测试4-1',
+    name3:'3台',
+    jy1:'1400',
+   },
+    {
+    name1:'测试4',
+    name2:'测试4-2',
+    name3:'3台',
+    jy1:'1400',
+   }
+])
+//费用清单
+    const handleViewList = () => {
+        settleListTitle.value = '费用清单'
+        moneyParams1.value = {
+            /* 设备状态 */
+            maStatus: 15,
+            detectionList: [],
+            insureList: [],
+            picList: []
+        }
+        // 打开费用清单弹框
+        dialogFormVisibleSettleList.value = true
+    }
+
+const tableData5: any = ref([
+   {
+    name1:'测试1',
+    name2:'测试1-1',
+    name3:'测试1-2',
+    jy1:'外观1-1',
+    jy2:'故障1-2',
+    jy3:'外观1-2',
+    jy4:'故障1-2',
+    jy5:'外观1-3',
+    jy6:'故障1-3',
+    jy7:'',
+    jy8:'',
+    remark:'备注1',
+   },
+    {
+    name1:'测试2',
+    name2:'测试2-1',
+    name3:'测试2-2',
+    jy1:'外观2-1',
+    jy2:'故障2-2',
+    jy3:'外观2-2',
+    jy4:'故障2-2',
+    jy5:'外观2-3',
+    jy6:'故障2-3',
+    jy7:'',
+    jy8:'',
+    remark:'备注2',
+   }
+])
+ const settleRepairTitle = ref('')   
+// 检修详情弹框显示隐藏
+const dialogFormVisibleSettleRepair: any = ref(false)
+ //检修详情   
+     const handleViewRepair = () => {
+        settleListTitle.value = '检修详情'
+        moneyParams1.value = {
+            /* 设备状态 */
+            maStatus: 15,
+            detectionList: [],
+            insureList: [],
+            picList: []
+        }
+        // 打开检修详情弹框
+        dialogFormVisibleSettleRepair.value = true
+    }
 </script>
 
 <template>
@@ -491,64 +648,6 @@ const dialogFormVisibleSettlemoney: any = ref(false)
                     </el-form-item>
                 </el-col>
             </el-row>
-            <!-- <el-form-item label="装备名称：" prop="deviceName">
-                <el-input v-model.trim="queryParams.deviceName" style="width: 160px" clearable />
-            </el-form-item>
-            <el-form-item prop="dateRange">
-                <el-date-picker
-                    v-model="time"
-                    type="daterange"
-                    unlink-panels
-                    range-separator="-"
-                    start-placeholder="开始时间"
-                    end-placeholder="结束时间"
-                    style="width: 180px"
-                />
-            </el-form-item>
-            <el-form-item label="订单状态" prop="orderStatus">
-                <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="czcompanyName">
-                <el-input
-                    v-model.trim="queryParams.czcompanyName"
-                    clearable
-                    maxlength="20"
-                    style="width: 160px"
-                />
-            </el-form-item>
-            <el-form-item label="承租单位：" prop="companyName">
-                <el-input
-                    v-model.trim="queryParams.companyName"
-                    clearable
-                    maxlength="20"
-                    style="width: 160px"
-                />
-            </el-form-item>
-            <el-form-item prop="lowerBound">
-                <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-form-item> -->
         </el-form>
 
         <div class="cart-tbody" v-for="(item, index) in cardList" :key="index">
@@ -594,14 +693,14 @@ const dialogFormVisibleSettlemoney: any = ref(false)
                         <el-col :span="4">
                             <div style="flex-shrink: 0; margin-bottom: 1px; font-size: 7px">
                                 <el-button
-                                    v-if="status == 0"
+                                    v-if="item.orderStatus == '2'"
                                     class="item"
                                     type="primary"
                                     size="small"
                                     >出库</el-button
                                 >
                                 <el-button
-                                    v-if="status == 0"
+                                    v-if="item.orderStatus == '2'"
                                     class="item"
                                     type="primary"
                                     size="small"
@@ -646,7 +745,7 @@ const dialogFormVisibleSettlemoney: any = ref(false)
             <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  v-model="goods.isChecked" @change="onChangeGoods(index)" :disabled="goods.orderStatus!='2'">
                         </el-checkbox>
                     </div>
                 </el-col>
@@ -676,18 +775,6 @@ const dialogFormVisibleSettlemoney: any = ref(false)
                     <div style="color: black; font-weight: bold">{{ goods.rentEndTime }}</div>
                 </el-col>
                 <el-col :span="2">
-                    <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
                         v-if="goods.orderStatus == '2'"
                         style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: blue"
@@ -696,28 +783,41 @@ const dialogFormVisibleSettlemoney: any = ref(false)
                     </div>
                     <div
                         v-if="goods.orderStatus == '3'"
-                        style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: blue"
+                        style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: #C76F60"
                     >
                         {{ '待收货' }}
                     </div>
                     <div
-                        v-if="goods.orderStatus == '4'"
+                        v-if="goods.orderStatus == '4' && isExpired(goods)"
-                        style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: blue"
+                        style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: #008D06"
+                    >
+                        {{ '租赁中' }}
+                        <span style="color: red">(已过期)</span>
+                    </div>
+                    <div
+                        v-if="goods.orderStatus == '4' && !isExpired(goods)"
+                        style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: #008D06"
                     >
                         {{ '租赁中' }}
                     </div>
                     <div
                         v-if="goods.orderStatus == '5'"
-                        style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: blue"
+                        style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: #5B33CC"
                     >
                         {{ '已退租' }}
                     </div>
                     <div
                         v-if="goods.orderStatus == '6'"
-                        style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: blue"
+                        style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: #C00017"
                     >
                         {{ '已完成' }}
                     </div>
+                    <div
+                        v-if="goods.orderStatus == '7'"
+                        style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: #797979"
+                    >
+                        {{ '已驳回' }}
+                    </div>
                 </el-col>
                 <el-col :span="3">
                     <div>
@@ -738,6 +838,7 @@ const dialogFormVisibleSettlemoney: any = ref(false)
                             租赁协议
                         </el-button>
                         <el-button
+                            v-if="goods.orderStatus=='5'"
                             @click="handleViewBack(j)"
                             type="text"
                             size="mini"
@@ -746,6 +847,7 @@ const dialogFormVisibleSettlemoney: any = ref(false)
                             退租检修
                         </el-button>
                         <el-button
+                            v-if="goods.orderStatus=='5'"
                             @click="handleViewMoney(j)"
                             type="text"
                             size="mini"
@@ -753,6 +855,24 @@ const dialogFormVisibleSettlemoney: any = ref(false)
                         >
                             费用结算
                         </el-button>
+                         <el-button
+                            v-if="goods.orderStatus=='6'"
+                            @click="handleViewRepair(j)"
+                            type="text"
+                            size="mini"
+                            style="color: #blue; font-weight: bold"
+                        >
+                            检修详情
+                        </el-button>
+                         <el-button
+                            v-if="goods.orderStatus=='6'"
+                            @click="handleViewList(j)"
+                            type="text"
+                            size="mini"
+                            style="color: #blue; font-weight: bold"
+                        >
+                            费用清单
+                        </el-button>
                     </div>
                 </el-col>
             </el-row>
@@ -764,6 +884,7 @@ const dialogFormVisibleSettlemoney: any = ref(false)
             :total="total"
         />
 
+    </div>
     <!-- 退租检修弹框 -->
     <el-dialog
         v-model="dialogFormVisibleSettlein"
@@ -1026,7 +1147,6 @@ const dialogFormVisibleSettlemoney: any = ref(false)
             </span>
         </template>
     </el-dialog>
-    </div>
 
     <!-- 费用结算弹框 -->
     <el-dialog
@@ -1347,6 +1467,232 @@ const dialogFormVisibleSettlemoney: any = ref(false)
             </span>
         </template>
     </el-dialog>
+
+    <!-- 费用清单弹框 -->
+    <el-dialog         
+        v-model="dialogFormVisibleSettleList"
+        :title="settleListTitle"
+        width="60%"
+        align-center
+        :close-on-click-modal="false">
+         <div style="height: 80px">
+            <div
+                class="info"
+                style="margin-top: 5px; margin-bottom: 8px; display: flex; flex-wrap: wrap"
+            >
+                <div
+                    class="item"
+                    style="
+                        width: 30%;
+                        flex-shrink: 0;
+                        margin-bottom: 5px;
+                        font-size: 16px;
+                        margin-left: 40px;
+                    "
+                >
+                    <span>订单编号：10000212135656</span>
+                </div>
+
+                <div
+                    class="item"
+                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
+                >
+                    <span>装备套数：2套</span>
+                </div>
+
+                <div
+                    class="item"
+                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
+                >
+                    <span>退租时间：2024-10-10 10:00:00</span>
+                </div>
+            </div>
+            <div class="info" style="margin-top: 5px; display: flex; flex-wrap: wrap">
+                <div
+                    class="item"
+                    style="
+                        width: 30%;
+                        flex-shrink: 0;
+                        margin-bottom: 5px;
+                        font-size: 16px;
+                        margin-left: 40px;
+                    "
+                >
+                    <span>结算单位：安徽送变电公司</span>
+                </div>
+                <div
+                    class="item"
+                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
+                >
+                    <span>租赁天数：30{{ '/天' }}</span>
+                </div>
+
+                <div
+                    class="item"
+                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
+                >
+                    <span>租赁费用(元)：1800</span>
+                </div>
+            </div>
+            <div class="title">
+                <span class="title-sign"></span>
+                <span class="title-text">租赁费用明细</span>
+            </div>
+        </div>
+         <!-- 表格 -->
+        <el-table
+            :data="tableData1"
+            class="table"
+            style="margin-left: 50px; width: 1100px"
+            row-key="id"
+            show-overflow-tooltip
+            :header-cell-style="{ background: 'white', color: 'black' }"
+        >
+            <el-table-column align="center" prop="name1" label="装备名称" />
+            <el-table-column align="center" prop="name2" label="型号" />
+            <el-table-column align="center" prop="name3" label="数量" />
+            <el-table-column label="租赁单价(元/日)" align="center" prop="jy1" />
+            <el-table-column label="租赁天数" align="center" prop="jy2" />
+            <el-table-column label="租期" align="center" prop="jy3" />
+            <el-table-column label="租期费用" align="center" prop="jy4" />
+        </el-table>
+        <div class="title">
+            <span class="title-sign"></span>
+            <span class="title-text">维修费用明细</span>
+        </div>
+        <!-- 表格 -->
+        <el-table
+            :data="tableData2"
+            class="table"
+            style="margin-left: 50px; width: 1100px"
+            row-key="id"
+            show-overflow-tooltip
+            :header-cell-style="{ background: 'white', color: 'black' }"
+        >
+            <el-table-column align="center" prop="name1" label="装备名称" />
+            <el-table-column align="center" prop="name2" label="型号" />
+            <el-table-column align="center" prop="name3" label="维修数量" />
+            <el-table-column label="维修类型" align="center" prop="jy1" />
+            <el-table-column label="维修状态" align="center" prop="jy2" />
+            <el-table-column label="维修费用（元）" align="center" prop="jy3" />
+        </el-table>
+        <div class="title">
+            <span class="title-sign"></span>
+            <span class="title-text">报废费用明细</span>
+        </div>
+        <!-- 表格 -->
+        <el-table
+            :data="tableData3"
+            class="table"
+            style="margin-left: 50px; width: 1100px"
+            row-key="id"
+            show-overflow-tooltip
+            :header-cell-style="{ background: 'white', color: 'black' }"
+        >
+            <el-table-column align="center" prop="name1" label="装备名称" />
+            <el-table-column align="center" prop="name2" label="型号" />
+            <el-table-column align="center" prop="name3" label="报废数量" />
+            <el-table-column label="报废原因" align="center" prop="jy1" />
+            <el-table-column label="报废费用（元）" align="center" prop="jy2" />
+        </el-table>
+        <div class="title">
+            <span class="title-sign"></span>
+            <span class="title-text">丢失费用明细</span>
+        </div>
+        <!-- 表格 -->
+        <el-table
+            :data="tableData4"
+            class="table"
+            style="margin-left: 50px; width: 1100px"
+            row-key="id"
+            show-overflow-tooltip
+            :header-cell-style="{ background: 'white', color: 'black' }"
+        >
+            <el-table-column align="center" prop="name1" label="装备名称" />
+            <el-table-column align="center" prop="name2" label="型号" />
+            <el-table-column align="center" prop="name3" label="丢失数量" />
+            <el-table-column label="报废费用（元）" align="center" prop="jy1" />
+        </el-table>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button type="primary" @click="closeDialogBtn">关 闭</el-button>
+                <el-button @click="submitBtn" type="success"> 保存 </el-button>
+            </span>
+        </template>
+    </el-dialog>
+
+    <!-- 检修详情弹框 -->
+    <el-dialog 
+        v-model="dialogFormVisibleSettleRepair"
+        :title="settleRepairTitle"
+        width="60%"
+        :close-on-click-modal="false">
+        <div style="height: 80px">
+            <div
+                class="info"
+                style="margin-top: 5px; margin-bottom: 1px; display: flex; flex-wrap: wrap"
+            >
+                <div
+                    class="item"
+                    style="
+                        width: 48%;
+                        flex-shrink: 0;
+                        margin-bottom: 1px;
+                        font-size: 16px;
+                        margin-left: 40px;
+                    "
+                >
+                    <span>订单编号：10000212135656</span>
+                </div>
+
+
+                <div
+                    class="item"
+                    style="width: 48%; flex-shrink: 0; margin-bottom: 1px; font-size: 16px"
+                >
+                    <span>退租时间：2024-10-10 10:00:00</span>
+                </div>
+            </div>
+        </div>
+        <!-- 表格 -->
+        <el-table
+            :data="tableData5"
+            class="table"
+            style="margin-left: 50px; width: 1100px"
+            row-key="id"
+            show-overflow-tooltip
+            :header-cell-style="{ background: 'white', color: 'black' }"
+        >
+            <el-table-column label="序号" align="center" width="80" type="index"></el-table-column>
+            <el-table-column align="center" prop="name1" label="机具名称" />
+            <el-table-column align="center" prop="name2" label="规格型号" />
+            <el-table-column align="center" prop="name3" label="装备编码" />
+            <el-table-column align="center" prop="typeName" label="检验内容">
+                <el-table-column label="外观检验" align="center" prop="jy1" />
+                <el-table-column label="故障检验" align="center" prop="jy2" />
+            </el-table-column>
+            <el-table-column align="center" prop="typeName" label="维修内容">
+                <el-table-column label="外观检验" align="center" prop="jy3" />
+                <el-table-column label="故障检验" align="center" prop="jy4" />
+            </el-table-column>
+            <el-table-column align="center" prop="typeName" label="金额">
+                <el-table-column label="外观检验" align="center" prop="jy5" />
+                <el-table-column label="故障检验" align="center" prop="jy6" />
+            </el-table-column>
+            <el-table-column align="center" prop="typeName" label="附件">
+                <el-table-column label="外观检验" align="center" prop="jy7" />
+                <el-table-column label="故障检验" align="center" prop="jy8" />
+            </el-table-column>
+            <el-table-column align="center" label="备注" prop="remark" width="80px">
+            </el-table-column>
+        </el-table>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button type="primary" @click="closeDialogBtn">关 闭</el-button>
+                <el-button @click="submitBtn" type="success"> 保存 </el-button>
+            </span>
+        </template>
+    </el-dialog>
 </template>
 
 <style lang="scss" scoped>
@@ -1486,6 +1832,7 @@ const dialogFormVisibleSettlemoney: any = ref(false)
             display: flex;
             align-items: center;
             font-size: 13px;
+            
             div {
                 text-align: center;
             }

src/views/user/orderManagementCz/detail.vue

@@ -0,0 +1,296 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import PagingComponent from 'components/PagingComponent/index.vue'
+import { useRouter } from 'vue-router'
+import { getOrderListInfoApi } from 'http/api/usercenter/seekorder'
+const route = useRoute()
+/* 查询参数 */
+const cardList = ref<any>({})
+const orderStatusTemp = ref<number>(0)
+const idTemp = ref<string>('')
+const titleStaus = ref<any>('')
+// 获取数据列表
+// const getList = async () => {
+//     const res: any = await getOrderListApi()
+//     console.log('获取数据列表***', res)
+//     tableData.value = res.rows
+//     total.value = res.total
+// }
+
+  // 根据步骤的 Id 返回对应的标题
+const  getStepTitle = (stepId:number)=> {
+        if (orderStatusTemp.value === 2) {
+          titleStaus.value=  '待出库' ;
+          return stepId === 1 ? '待出库' : '';
+        } else if (orderStatusTemp.value === 3) {
+          titleStaus.value=  '待收货' ;
+          return stepId === 1 ? '已出库' : stepId === 2 ? '待收货' : '';
+        } else if (orderStatusTemp.value === 4) {
+          titleStaus.value=  '租赁中' ;
+          return stepId === 1 ? '已出库' : stepId === 2 ? '已收货' : stepId === 3 ? '租赁中' : '';
+        } else if (orderStatusTemp.value === 5) {
+          titleStaus.value=  '已退租' ;
+          return stepId === 1 ? '已出库' : stepId === 2 ? '已收货' : stepId === 3 ? '租赁结束' : stepId === 4 ? '已退租' : '';
+        } else if (orderStatusTemp.value === 6) {
+          titleStaus.value= '已完成' ;
+          return stepId === 1 ? '已出库' : stepId === 2 ? '已收货' : stepId === 3 ? '租赁结束' : stepId === 4 ? '已退租' : stepId === 5 ? '已完成' : '';
+        } else if(orderStatusTemp.value === 7) {
+          titleStaus.value= '已驳回' ;
+          return stepId === 1 ? '已驳回' : '';
+        }
+        titleStaus.value=''
+        return ''; // 默认返回空字符串
+      }
+
+const getId = ()=>{
+    orderStatusTemp.value = Number(route.query.orderStatusTemp)
+    idTemp.value = String(route.query.idTemp)
+}
+
+/** 查询列表 */
+const getList = async () => {
+    let params = {
+        id: idTemp.value
+    }
+
+     const res: any = await getOrderListInfoApi(params)
+    cardList.value = res.data
+}
+
+onBeforeMount(()=>{
+   getId()
+})
+
+onMounted(() => {
+    getList()
+})
+
+
+const time = ref([])
+</script>
+
+<template>
+    <!-- 订单管理 -->
+    <div class="container">
+      <el-breadcrumb separator="/">
+      <el-breadcrumb-item :to="{ path: '/my-user/orderManagementCz' }">订单管理</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="2" style="text-align:right;margin-right:20px;font-size: 20px;">
+            <div style="color:green;">{{titleStaus}}</div>
+          </el-col>
+          </el-row>
+        </el-header> 
+
+         <el-steps class="step" :space="400" :active="orderStatusTemp===7 ? 1 : orderStatusTemp-1" finish-status="success">
+            <el-step :title="getStepTitle(1)" ></el-step>
+            <el-step :title="getStepTitle(2)" ></el-step>
+            <el-step :title="getStepTitle(3)" ></el-step>
+            <el-step :title="getStepTitle(4)" ></el-step>
+            <el-step :title="getStepTitle(5)" ></el-step>
+        </el-steps>
+      </div>
+
+     <div class="section">
+        <el-header style="height:30px">租赁信息
+        </el-header>
+      <div style="height: 80px;">
+          <div
+            class="info"
+            style="margin-top: 5px; display: flex; flex-wrap: wrap;"
+            
+          >
+            <div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;margin-left: 40px;opacity: 0.7">
+              <span>订单编号：{{cardList.code}}</span>
+            </div>
+            <div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;opacity: 0.7">
+              <span>下单时间：{{cardList.orderTime}}</span>
+            </div>
+
+            <div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;opacity: 0.7">
+              <span></span>
+            </div>
+
+            <div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;margin-left: 40px;opacity: 0.7">
+              <span>出租单位：{{cardList.czcompanyName}}</span>
+            </div>
+
+            <div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;opacity: 0.7">
+              <span>出租人：{{cardList.person}}</span>
+            </div>
+
+            <div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;opacity: 0.7">
+              <span>出租人电话：{{cardList.personPhone}}</span>
+            </div>
+
+            <div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;margin-left: 40px;opacity: 0.7">
+              <span>承租单位：{{cardList.companyName}}</span>
+            </div>
+
+            <div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;opacity: 0.7">
+              <span>承租人：{{cardList.nickName}}</span>
+            </div>
+            
+            <div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;opacity: 0.7">
+              <span>承租人电话：{{cardList.phoneNumber}}</span>
+            </div>
+
+            <div class="item" style="width: 30%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;margin-left: 40px;opacity: 0.7">
+              <span>租赁协议：</span>
+            </div>
+          </div>
+        </div>
+
+           <div class="cart-tbody" >
+            <el-row class="cart-list" v-for="(goods, j) in cardList.detailsList" :key="j">
+                <el-col :span="9" class="goods-info">
+                    <el-col :span="7">
+                        <img :src="goods.url" alt="" />
+                    </el-col>
+                    <div class="goods-code">
+                        <div style="font-size: 10px; font-weight: bold">{{ goods.deviceName }}</div>
+                        <div>租期：{{ goods.days }}{{ ' ' + '天' }}</div>
+                        <div>租金：{{ goods.dayLeasePrice }}{{ ' ' + '元/天' }}</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">{{goods.costs}}</div>
+                </el-col>
+                <el-col :span="7">
+                    <div style="font-size: 14px; font-weight: bold; margin-bottom: 10px">租期</div>
+                    <div style="color: black; font-weight: bold">
+                        {{ 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 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 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>
+                    <div v-if="goods.orderStatus=='7'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"已驳回"}}</div>
+                </el-col>
+                 <el-col :span="3">
+                    <div>
+                        <el-button
+                            @click="handleViewOrder(j)"
+                            type="text"
+                            size="mini"
+                            style="color: #blue; font-weight: bold"
+                        >
+                            出库
+                        </el-button>
+                        <el-button
+                            @click="handleViewOrder(j)"
+                            type="text"
+                            size="mini"
+                            style="color: #blue; font-weight: bold"
+                        >
+                            驳回
+                        </el-button>
+                    </div>
+                </el-col> 
+            </el-row>
+          </div> 
+
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+
+.container {
+    // width: 800px;
+    margin: 0 auto;
+    padding: 10px;
+    // background: #eeeff6;
+    font-size: 14px;
+    .step{
+        margin-left:80px;;
+    }
+
+    .section {
+        margin-top: 20px;
+        margin-bottom: 20px;
+    }
+   .cart-tbody {
+        background: #fff;
+        padding: 8px 12px;
+        margin: 10px;
+        border: 1px solid #ccc;
+        border-radius: 20px;
+        .cart-user-info {
+            display: flex;
+            align-items: center;
+            font-size: 13px;
+
+            .user-name,
+            .user-phone {
+                padding: 3px 18px;
+                border: 1px solid #ccc;
+            }
+
+            .user-name {
+                margin-left: 20px;
+                border-right: none;
+            }
+        }
+
+        .cart-list {
+            margin: 15px 0;
+            display: flex;
+            align-items: center;
+            
+            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;
+            }
+        }
+    }
+}
+</style>