From dcee05ea36a3da459c2207dad010b82fbd8a9480 Mon Sep 17 00:00:00 2001
From: hongchao <3228015117@qq.com>
Date: Thu, 19 Dec 2024 16:09:08 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=BC=E5=90=88=E6=9F=A5=E8=AF=A2=E4=B8=AD?=
 =?UTF-8?q?=E7=A7=9F=E8=B5=81=E8=AE=A2=E5=8D=95=E6=9F=A5=E8=AF=A2=EF=BC=88?=
 =?UTF-8?q?=E5=B1=85=E4=B8=AD=E6=9C=AA=E8=A7=A3=E5=86=B3=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                        |   1 +
 src/api/search/order.js             |  58 +++
 src/components/TitleTip/index.vue   |  37 ++
 src/views/search/order/detail.vue   | 745 ++++++++++++++++++++++++++++
 src/views/search/order/index.vue    | 630 +++++++++++++++++------
 src/views/tenantry/order/detail.vue |   2 +-
 src/views/tenantry/order/index.vue  |   2 +-
 7 files changed, 1321 insertions(+), 154 deletions(-)
 create mode 100644 src/api/search/order.js
 create mode 100644 src/components/TitleTip/index.vue
 create mode 100644 src/views/search/order/detail.vue

diff --git a/package.json b/package.json
index fdc45bce..23a8558a 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
     "jszip": "^3.10.1",
+    "moment": "^2.30.1",
     "nprogress": "0.2.0",
     "qrcodejs2": "0.0.2",
     "quill": "1.3.7",
diff --git a/src/api/search/order.js b/src/api/search/order.js
new file mode 100644
index 00000000..7acee64d
--- /dev/null
+++ b/src/api/search/order.js
@@ -0,0 +1,58 @@
+import request from '@/utils/request'
+
+//装备装备类目树结构数据
+export function getOrderListApi(query) {
+    return request({
+        url: '/material-mall/comprehensive/orderDetails',
+        method: 'get',
+        params: query
+    })
+}
+
+//获取订单列表详情
+export function getOrderListInfoApi (query)  {
+    return request({
+        url: '/material-mall/order/getOrderDetailsById',
+        method: 'get',
+        params: query
+    })
+}
+
+
+export function getOverhaulApi (orderId)  {
+    return request({
+        url: '/material-mall/lease-repair/getById',
+        method: 'get',
+        params: {
+            orderId: orderId
+        }
+    })
+}
+
+
+// 获取装备列表
+export function getEquipmentListApi(query) {
+    return request({
+        url: '/material-mall/comprehensive/devList',
+        method: 'get',
+        params: query
+    })
+}
+
+// 获取装备详情
+export function getRentDetailApi(query) {
+    return request({
+        url: '/material-mall/comprehensive/rentDetails',
+        method: 'get',
+        params: query
+    })
+}
+
+
+
+
+
+
+
+
+
diff --git a/src/components/TitleTip/index.vue b/src/components/TitleTip/index.vue
new file mode 100644
index 00000000..afa05ab4
--- /dev/null
+++ b/src/components/TitleTip/index.vue
@@ -0,0 +1,37 @@
+<template>
+    <div class="title-text">
+        <div></div>
+        <div>
+            {{ titleText }}
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+export default {
+    props: {
+        titleText: {
+            type: String,
+            default: '',
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.title-text {
+    margin-top: 20px;
+    padding: 10px 0;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    font-weight: bold;
+    letter-spacing: 1px;
+}
+
+.title-text div:first-child {
+    width: 5px;
+    height: 20px;
+    margin-right: 8px;
+    background-color: #00a288;
+}
+</style>
diff --git a/src/views/search/order/detail.vue b/src/views/search/order/detail.vue
new file mode 100644
index 00000000..d8d23be8
--- /dev/null
+++ b/src/views/search/order/detail.vue
@@ -0,0 +1,745 @@
+<template>
+  <div class="app-container">
+      <el-breadcrumb separator="/">
+      <el-breadcrumb-item :to="{ path: '/search/order' }">订单管理</el-breadcrumb-item>
+      <el-breadcrumb-item>订单明细</el-breadcrumb-item>
+      </el-breadcrumb>
+      <div class="order-details">
+        <TitleTip :titleText="`订单流程`" />
+
+        <div style="padding: 20px 40px">
+            <el-steps
+                :active="currentActive"
+                :finish-status="isReject ? 'wait' : 'success'"
+                :process-status="isReject ? 'error' : 'process'"
+                align-center
+            >
+                <el-step
+                    v-for="item in stepList"
+                    :key="item.index"
+                    :title="item.title"
+                    :description="item.description"
+                />
+            </el-steps>
+        </div>
+        <TitleTip :titleText="`租赁信息`" />
+        <el-row style="padding: 4px 40px; font-size: 14px">
+            <el-col :span="8">
+                <span> 订单编号： </span>
+                <span>
+                    {{ orderDetails.code }}
+                </span>
+            </el-col>
+            <el-col :span="8">
+                <span> 下单时间： </span>
+                <span>
+                    {{ orderDetails.orderTime }}
+                </span>
+            </el-col>
+            <el-col :span="8">
+                <span> 出租单位： </span>
+                <span>
+                    {{ orderDetails.czcompanyName }}
+                </span>
+            </el-col>
+        </el-row>
+        <el-row style="padding: 4px 40px; font-size: 14px">
+            <el-col :span="8">
+                <span> 出租人： </span>
+                <span>
+                    {{ orderDetails.person }}
+                </span>
+            </el-col>
+            <el-col :span="8">
+                <span> 出租人电话： </span>
+                <span>
+                    {{ orderDetails.personPhone }}
+                </span>
+            </el-col>
+            <el-col :span="8">
+                <span> 承租单位： </span>
+                <span>
+                    {{ orderDetails.companyName }}
+                </span>
+            </el-col>
+        </el-row>
+        <el-row style="padding: 4px 40px; font-size: 14px">
+            <el-col :span="8">
+                <span> 承租人： </span>
+                <span>
+                    {{ orderDetails.nickName }}
+                </span>
+            </el-col>
+            <el-col :span="8">
+                <span> 承租人电话： </span>
+                <span>
+                    {{ orderDetails.phoneNumber }}
+                </span>
+            </el-col>
+            <el-col :span="8">
+                <span> 租赁协议： </span>
+                <span> ** </span>
+            </el-col>
+        </el-row>
+
+        <el-row
+            style="
+                background: #fff;
+                padding: 4px 12px;
+                margin: 4px;
+                border: 1px solid #ccc;
+                border-radius: 20px;
+            "
+        >
+            <el-col :span="12" style="padding-left: 30px">
+                <div
+                    v-for="(goods, j) in orderDetails.detailsList"
+                    :key="j"
+                    class="order-items order-info"
+                    :style="
+                        j != orderDetails.detailsList.length - 1
+                            ? 'border-bottom:1px solid #eee'
+                            : ''
+                    "
+                    style="min-height: 80px"
+                >
+                    <el-image
+                        :src="goods.url"
+                        style="width: 110px; height: 70px"
+                        alt="#"
+                        fit="cover"
+                    />
+                    <div
+                        style="
+                            min-height: 80px;
+                            flex: 1;
+                            display: flex;
+                            justify-content: space-around;
+                            flex-direction: column;
+                            padding-left: 50px;
+                            font-size: 13px;
+                        "
+                    >
+                        <el-row style="font-weight: bold">
+                            {{ goods.deviceName }}
+                        </el-row>
+                        <el-row>
+                            <el-col :span="3"> 租期 :</el-col>
+                            <el-col :span="18">
+                                <span style="margin-right: 10px" :style="isOrderComplete">
+                                    {{ goods.days }}{{ ' ' + '天' }}
+                                </span>
+                                <span v-if="orderStatus == 20">
+                                    {{
+                                        momentInit(goods.takeOverTime).diff(
+                                            goods.rentOverTime,
+                                            'day',
+                                        ) == 0
+                                            ? 1
+                                            : momentInit(goods.takeOverTime).diff(
+                                                  goods.rentOverTime,
+                                                  'day',
+                                              )
+                                    }}{{ ' ' + '天' }}
+                                </span>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="3"> 租金 ：</el-col>
+                            <el-col :span="8">
+                                {{ goods.dayLeasePrice }}{{ ' ' + '元 / 天' }}
+                            </el-col>
+                            <el-col :span="3"> 数量 ：</el-col>
+                            <el-col :span="8"> {{ goods.num }}{{ ' ' + '台' }} </el-col>
+                        </el-row>
+                    </div>
+                </div>
+            </el-col>
+
+            <el-col :span="7" class="order-items-info">
+                <div
+                    v-for="(goods, j) in orderDetails.detailsList"
+                    :key="j"
+                    class="order-items order-info"
+                    :style="
+                        j != orderDetails.detailsList.length - 1
+                            ? 'border-bottom:1px solid #eee'
+                            : ''
+                    "
+                    style="min-height: 80px; width: 100%; font-size: 13px"
+                >
+                    <div
+                        style="
+                            width: 100%;
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                            flex-direction: column;
+                        "
+                    >
+                        <div>租期</div>
+                        <div
+                            style="font-weight: bold; margin-top: 10px"
+                            :style="isOrderComplete"
+                        >
+                            {{ goods.rentBeginTime }}至{{ goods.rentEndTime }}
+                        </div>
+                        <div
+                            style="font-weight: bold; margin-top: 10px"
+                            v-if="orderStatus == 20"
+                        >
+                            {{ goods.takeOverTime.slice(0, 10) }}至{{
+                                goods.rentOverTime.slice(0, 10)
+                            }}
+                        </div>
+                    </div>
+                </div>
+            </el-col>
+
+            <el-col :span="5" class="order-items-info" style="border: none; font-size: 13px">
+                <div>总费用</div>
+                <div class="red-font" >{{ orderDetails.cost }} 元</div>
+                <div class="red-font" v-if="orderStatus == 20">
+                    {{ overhaulDetails.totalCost }} 元
+                </div>
+            </el-col>
+        </el-row>
+
+        <TitleTip :titleText="`退租检测/费用结算信息`" v-if="orderStatus == 20" />
+
+        <div style="padding: 0 15px" v-if="orderStatus == 20">
+            <div style="padding: 6px 0 0 0; font-size: 18px; color: #eb190a; font-weight: bold">
+                总费用(元)： <span>{{ overhaulDetails.totalCost }}</span>
+            </div>
+            <TitleTip :titleText="`租赁费用明细`" />
+            <el-table
+                border
+                :data="orderDetailDtoList"
+                show-overflow-tooltip
+                :header-cell-style="{
+                    color: '#fff',
+                    background: '#00a288',
+                }"
+            >
+                <el-table-column prop="deviceName" align="center" label="装备名称" />
+                <el-table-column prop="typeName" align="center" label="型号" />
+                <el-table-column prop="num" align="center" label="数量" />
+                <el-table-column align="center" label="租赁单价(元/天)">
+                    <template #default="{ row }">
+                        <span style="color: #eb190a">
+                            {{ row.dayLeasePrice }}
+                        </span>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="days" align="center" label="租赁天数" />
+                <el-table-column prop="days" align="center" label="租期">
+                    <template #default="{ row }">
+                        {{ `${row.preOutboundTime}至${row.rentOverTime} ` }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="costs" align="center" label="租赁费用(元)" width="160">
+                </el-table-column>
+                <el-table-column prop="changeCost" align="center" label="改价后实际费用(元)" />
+            </el-table>
+
+            <TitleTip :titleText="`维修费用明细`" />
+            <el-table
+                :data="repairRecordList"
+                border
+                show-overflow-tooltip
+                :header-cell-style="{
+                    background: '#00a288',
+                    color: '#fff',
+                }"
+            >
+                <el-table-column prop="deviceName" align="center" label="装备名称" />
+                <el-table-column prop="typeName" align="center" label="型号" />
+                <el-table-column prop="repairNum" align="center" label="维修数量" />
+                <el-table-column align="center" prop="repairPrice" label="维修费用(元)">
+                </el-table-column>
+                <el-table-column
+                    prop="repairChangePrice"
+                    align="center"
+                    label="改价后实际费用(元)"
+                />
+                <el-table-column align="center" label="附件" width="160">
+                    <template #default="{ row }">
+                        <el-button type="primary" size="small" @click="onViewFileImg(row, 0)"
+                            >查看</el-button
+                        >
+                    </template>
+                </el-table-column>
+            </el-table>
+            <TitleTip :titleText="`报废费用明细`" />
+            <el-table
+                :data="scrapRecordList"
+                border
+                show-overflow-tooltip
+                :header-cell-style="{
+                    background: '#00a288',
+                    color: '#fff',
+                }"
+            >
+                <el-table-column prop="deviceName" align="center" label="装备名称" />
+                <el-table-column prop="typeName" align="center" label="型号" />
+                <el-table-column prop="scrapNum" align="center" label="报废数量" />
+                <el-table-column prop="scrapReason" align="center" label="报废原因" />
+                <el-table-column prop="scrapPrice" align="center" label="报废费用(元)">
+                </el-table-column>
+                <el-table-column
+                    prop="scrapChangePrice"
+                    align="center"
+                    label="改价后费用(元)"
+                />
+                <el-table-column align="center" label="附件" width="160">
+                    <template #default="{ row }">
+                        <el-button type="primary" size="small" @click="onViewFileImg(row, 1)"
+                            >查看</el-button
+                        >
+                    </template>
+                </el-table-column>
+            </el-table>
+            <TitleTip :titleText="`丢失费用明细`" />
+            <el-table
+                :data="lossRecordList"
+                border
+                show-overflow-tooltip
+                :header-cell-style="{
+                    background: '#00a288',
+                    color: '#fff',
+                }"
+            >
+                <el-table-column prop="deviceName" align="center" label="装备名称" />
+                <el-table-column prop="typeName" align="center" label="型号" />
+                <el-table-column prop="lossNum" align="center" label="丢失数量" />
+                <el-table-column prop="lossPrice" align="center" label="丢失费用(元)">
+                </el-table-column>
+                <el-table-column prop="lossChangePrice" align="center" label="改价后费用(元)" />
+                <el-table-column align="center" label="附件" width="160">
+                    <template #default="{ row }">
+                        <el-button type="primary" size="small" @click="onViewFileImg(row, 2)">
+                            查看
+                        </el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>  
+
+    <el-dialog :visible.sync="innerVisible" width="500" title="附件详情" append-to-body>
+        <el-table
+            :data="viewFileInfoList"
+            border
+            show-overflow-tooltip
+            :header-cell-style="{
+                background: '#00a288',
+                color: '#fff',
+            }"
+        >
+            <el-table-column prop="fileName" align="center" label="文件名称" />
+            <el-table-column align="center" label="操作" width="120">
+                <template #default="{ row }">
+                    <el-image
+                        style="width: 60px; height: 60px"
+                        :src="row.fileUrl"
+                        :zoom-rate="1.2"
+                        :max-scale="7"
+                        :min-scale="0.2"
+                        :preview-src-list="[row.fileUrl]"
+                        :initial-index="0"
+                        fit="cover"
+                        :z-index="9999999999"
+                        :preview-teleported="true"
+                    />
+                </template>
+            </el-table-column>
+        </el-table>
+    </el-dialog>
+  </div>
+
+
+</template> 
+  
+  <script>
+import TitleTip from '@/components/TitleTip'
+import { getOrderListInfoApi,getOverhaulApi } from "@/api/search/order"; 
+import moment from 'moment'
+export default {
+  components: { TitleTip },
+  name: "orderDetail",
+  data() {
+    return {
+      orderStatus: undefined,
+      orderId:undefined,
+      // 遮罩层
+      loading: false,
+      dialogLoading: false,
+      isView: false,
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      ids: [],
+      checkList: [],
+      // 总条数
+      total: 0,
+      // 弹出层标题
+      title: "",
+      titleStaus:"",
+      // 查询参数
+      queryParams: {
+        typeId: undefined,
+        supplierId: undefined,
+        productionTime: undefined,
+      },
+      orderDetails:{},
+      momentInit : moment,
+      orderDetailDtoList: [],
+      repairRecordList: [],
+      scrapRecordList: [],
+      lossRecordList: [],
+      overhaulDetails: {},
+      fileListAll: [],
+      cardList:[],
+      //描述信息
+       stepList:[
+    {
+        title: '待接单',
+        description: '',
+    },
+    {
+        title: '待出库',
+        description: '',
+    },
+    {
+        title: '待收货',
+        description: '',
+    },
+    {
+        title: '租赁中',
+        description: '',
+    },
+    {
+        title: '已退租待检修',
+        description: '',
+    },
+    {
+        title: '已检修待结算',
+        description: '',
+    },
+
+    {
+        title: '订单完成',
+        description: '',
+    },
+  ],
+       isReject:false,
+       currentActive:0,
+       isOrderComplete:undefined,
+       viewFileInfoList:[],
+       innerVisible:false,
+    };
+  },
+  mounted() {
+    this.orderStatus = Number(this.$route.query && this.$route.query.orderStatus);
+    this.orderId = Number(this.$route.query && this.$route.query.orderId);
+    this.stepList=[
+    {
+        title: '待接单',
+        description: '',
+    },
+    {
+        title: '待出库',
+        description: '',
+    },
+    {
+        title: '待收货',
+        description: '',
+    },
+    {
+        title: '租赁中',
+        description: '',
+    },
+    {
+        title: '已退租待检修',
+        description: '',
+    },
+    {
+        title: '已检修待结算',
+        description: '',
+    },
+
+    {
+        title: '订单完成',
+        description: '',
+    },
+  ];
+    if (this.orderStatus == 1) {
+    this.currentActive = 0
+    }
+    if (this.orderStatus == 2) {
+        this.currentActive = 1
+        this.stepList[0].title = '已接单'
+    }
+    if (this.orderStatus == 3) {
+        this.stepList[0].title = '已接单'
+        this.stepList[1].title = '已出库'
+        this.currentActive = 2
+    }
+    if (this.orderStatus == 4) {
+        this.stepList[0].title = '已接单'
+        this.stepList[1].title = '已出库'
+        this.stepList[2].title = '已收货'
+        this.currentActive = 3
+    }
+    if (this.orderStatus == 5) {
+        this.stepList[0].title = '已接单'
+        this.stepList[1].title = '已出库'
+        this.stepList[2].title = '已收货'
+        this.currentActive = 4
+    }
+    if (this.orderStatus == 10) {
+      this.stepList[0].title = '已接单'
+      this.stepList[1].title = '已出库'
+      this.stepList[2].title = '已收货'
+      this.stepList[3].title = '租赁结束'
+      this.stepList[4].title = '退租已检修'
+      this.currentActive = 5
+    }
+    if (this.orderStatus == 15) {
+        this.stepList[0].title = '已接单'
+        this.stepList[1].title = '已出库'
+        this.stepList[2].title = '已收货'
+        this.stepList[3].title = '租赁结束'
+        this.stepList[4].title = '退租已检修'
+        this.stepList[5].title = '已结算待确认'
+        this.currentActive = 5
+    }
+    if (this.orderStatus == 20) {
+        this.stepList[0].title = '已接单'
+        this.stepList[1].title = '已出库'
+        this.stepList[2].title = '已收货'
+        this.stepList[3].title = '租赁结束'
+        this.stepList[4].title = '退租已检修'
+        this.stepList[5].title = '结算完成'
+        this.currentActive = 7
+    }
+    this.$forceUpdate();
+    this.getList();
+  },
+
+  watch:{
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      getOrderListInfoApi({orderId:this.orderId}).then(async(res) => {
+                this.orderDetails = res.data;
+                if(this.orderStatus == 20){
+                await getOverhaulApi(this.orderId).then((resTwo) => {
+                  this.orderDetailDtoList = resTwo.data.orderDetailDtoList;
+                  this.repairRecordList = resTwo.data.repairRecordList;
+                  this.scrapRecordList = resTwo.data.scrapRecordList;
+                  this.lossRecordList = resTwo.data.lossRecordList;
+                  this.fileListAll = resTwo.data.fileInfoList;
+                  this.overhaulDetails = resTwo.data;
+                })}
+                console.log('12',this.orderDetails)
+                console.log('14',this.overhaulDetails)
+            });
+    },
+
+    onViewFileImg(row, index) {
+      this.viewFileInfoList = [];
+      if(this.fileListAll){
+        this.fileListAll.forEach((e) => {
+          if (e.fileType == index) {
+            this.viewFileInfoList.push(e);
+          }
+        });
+      }
+      // if(this.fileListAll){
+      //   this.viewFileInfoList = this.fileListAll.find((e) => e.fileType == index);
+      // }
+      console.log('12131',this.viewFileInfoList)
+      this.innerVisible = true;
+    },
+
+  },
+};
+</script>
+  <style lang="scss" scoped>
+   .order-details {
+        flex: 1;
+        overflow-y: auto;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+        padding: 0 12px;
+        margin-top: 20px;
+    }
+
+    .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;
+                border-bottom: 1px solid #00a288;
+                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;
+            }
+        }
+    }
+    .cart-listAll {
+        margin: 15px 0;
+        display: flex;
+        align-items: center;
+        font-size: 13px;
+
+        div {
+            text-align: center;
+        }
+        .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: 180px;
+                    height: 80px;
+                }
+
+                .goods-code {
+                    margin-left: 110px;
+                    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;
+            }
+        }
+        .lease-date {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            font-size: 12px;
+        }
+
+        .red-font {
+            color: #ff4800;
+            font-weight: bold;
+        }
+    }
+    .order-items {
+    border-right: 1px solid #eee;
+}
+
+.order-info {
+    display: flex;
+    padding: 10px 0;
+    align-items: center;
+}
+
+.order-items-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-right: 1px solid #eee;
+}
+
+.red-font {
+    color: #ff4800;
+    font-weight: bold;
+    margin-top: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/search/order/index.vue b/src/views/search/order/index.vue
index fdaa1c7d..1cc58252 100644
--- a/src/views/search/order/index.vue
+++ b/src/views/search/order/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="app-container">
+    <div class="app-container app-container-content">
       <el-form :model="queryParams" ref="queryFormRef" size="small" :inline="true" v-show="showSearch" label-width="68px">
         <el-row>
         <el-form-item  prop="deviceName">
@@ -76,6 +76,7 @@
           <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
         </el-form-item>
       </el-form> 
+      <template v-if="cardList.length > 0">
         <div class="cart-tbody" v-for="(item, index) in cardList" :key="index">
             <el-row class="order-title-info">
                 <el-col :span="8">
@@ -98,14 +99,12 @@
                 </el-col>
                 <div class="order-type-box">
                     <el-tag
-                        style="padding: 6px 12px"
                         :type="orderType(item.orderStatus)"
                         effect="light"
                         >{{ orderText(item.orderStatus) }}</el-tag
                     >
                 </div>
             </el-row>
-
             <el-row class="order-title-info">
                 <el-col :span="8">
                     <span> 出租方联系电话： </span>
@@ -126,7 +125,6 @@
                     </span>
                 </el-col>
             </el-row>
-
             <el-row
                 style="border-bottom: 1px solid #ccc; margin-bottom: 10px"
                 class="order-title-info"
@@ -148,7 +146,7 @@
             </el-row>
 
             <el-row>
-                <el-col :span="8">
+                <el-col :span="8" >
                     <div
                         v-for="(goods, j) in item.detailsList"
                         :key="j"
@@ -218,8 +216,8 @@
                         </div>
                     </div>
                 </el-col>
-                <el-col :span="3" class="order-items-info">
-                    <div>总费用</div>
+                <el-col :span="3" class="order-items-info" >
+                    <div >总费用</div>
 
                     <div
                         class="red-font"
@@ -230,18 +228,7 @@
                     <div class="red-font" v-if="item.orderStatus == 20">
                         {{ item.totalRealPrice }} 元
                     </div>
-                    <!-- <div class="red-font">
-                        
-                        {{ item.cost }} 元
-                    
-                    </div> -->
                 </el-col>
-                <!-- <el-col :span="4" class="order-items-info">
-                    <div>租期</div>
-                    <div style="font-weight: bold; margin-top: 10px">
-                        {{ item.startTime }}至{{ item.endTime }}
-                    </div>
-                </el-col> -->
 
                 <el-col :span="4" class="order-items-info">
                     <div
@@ -304,82 +291,25 @@
                     </div>
                 </el-col>
 
-                <!-- <el-col :span="6" style="display: flex; align-items: center">
+                <el-col :span="6" style="display: flex; align-items: center;">
                     <div class="handle-btn">
-                        <el-button
-                            v-if="item.orderStatus == 5 || item.partBacked"
-                            @click="handleViewBack(item)"
-                            type="primary"
-                            size="small"
-                        >
-                            退租检修
-                        </el-button>
-                        <el-button
-                            type="primary"
-                            @click="onRepairEnd(item.orderId, item.code)"
-                            class="primary-lease"
-                            size="small"
-                            v-if="item.orderStatus == 5"
-                        >
-                            检修完结
-                        </el-button>
-                        <el-button
-                            v-if="item.orderStatus == '1'"
-                            type="primary"
-                            size="small"
-                            @click="onAcceptOrders(item)"
-                            >接单</el-button
-                        >
-                        <el-button
-                            v-if="item.orderStatus == '2'"
-                            type="primary"
-                            size="small"
-                            @click="confirmPass(index)"
-                            >出库</el-button
-                        >
 
                         <el-button @click="handleViewOrder(item)" type="primary" size="small">
                             订单详情
                         </el-button>
-                        <el-button @click="handleViewWord(j, item)" type="primary" size="small">
-                            租赁协议
-                        </el-button>
                         <el-button
-                            v-if="item.orderStatus == 10"
+                            v-if="item.orderStatus == 20"
                             @click="handleViewRepair(item)"
                             type="primary"
                             size="small"
                         >
                             检修详情
                         </el-button>
-                        <el-button
-                            type="primary"
-                            size="small"
-                            @click="handleViewMoney(item)"
-                            v-if="item.orderStatus == 10"
-                        >
-                            费用结算
-                        </el-button>
-                        <el-button
-                            v-if="item.orderStatus == 20 || item.orderStatus == 15"
-                            @click="handleViewList(item)"
-                            type="primary"
-                            size="small"
-                        >
-                            费用清单
-                        </el-button>
-                        <el-button
-                            size="small"
-                            type="primary"
-                            v-if="item.orderStatus == '2'"
-                            @click="confirmFail(index)"
-                        >
-                            取消订单
-                        </el-button>
                     </div>
-                </el-col> -->
+                </el-col>
             </el-row>
         </div>
+    </template>
             <pagination
             v-show="total > 0"
             :total="total"
@@ -387,13 +317,301 @@
             :limit.sync="queryParams.pageSize"
             @pagination="getList"
             />
-    </div>
+
+        <el-dialog
+            :title="dialogTitle"
+            width="65%"
+            destroy-on-close
+            :visible.sync="addOrEditDialogCostVisible"
+        >
+            <el-row
+                style="
+                    display: flex;
+                    letter-spacing: 1px;
+                    padding: 0 10px 20px;
+                    justify-content: space-between;
+                "
+            >
+                <div style="flex: 1">
+                    <span>订单编号：</span>
+                    <span>{{ overhaulDetails.code }}</span>
+                </div>
+                <div style="flex: 1">
+                    <span>装备套数：</span>
+                    <span>{{ overhaulDetails.maNumber }}</span>
+                </div>
+                <div style="flex: 1">
+                    <span>结算单位：</span>
+                    <span>{{ overhaulDetails.leaseCompany }}</span>
+                </div>
+            </el-row>
+        
+            <div style="padding: 6px 0 0 0; font-size: 18px; font-weight: bold; color: #eb190a">
+                总费用(元)： <span>{{ overhaulDetails.totalCost }}</span>
+            </div>
+            <TitleTip :titleText="`租赁费用明细`" />
+            <el-table
+                border
+                :data="orderDetailDtoList"
+                show-overflow-tooltip
+                :header-cell-style="{
+                    color: '#fff',
+                    background: '#00a288',
+                }"
+            >
+                <el-table-column prop="code" align="center" label="装备编号" />
+                <el-table-column prop="deviceName" align="center" label="装备名称" />
+                <el-table-column prop="typeName" align="center" label="型号" />
+                <el-table-column prop="num" align="center" label="数量" />
+                <el-table-column align="center" label="租赁单价(元/天)">
+                    <template #default="{ row }">
+                        <span style="color: #eb190a">
+                            {{ row.dayLeasePrice }}
+                        </span>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="days" align="center" label="租赁天数" />
+                <el-table-column prop="days" align="center" label="租期">
+                    <template #default="{ row }">
+                        {{ `${row.preOutboundTime}至${row.rentOverTime} ` }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="costs" align="center" label="租赁费用(元)" width="160">
+                    <template #default="{ row }">
+                        <template v-if="row.isCheck == 0">
+                            {{ row.costs }}
+                        </template>
+                        <template v-else>
+                            <el-input
+                                v-model="row.costs"
+                                style="width: 100%"
+                                placeholder="请输入改价费用"
+                                clearable
+                            />
+                        </template>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="changeCost" align="center" label="改价后费用(元)" />
+                <el-table-column
+                    align="center"
+                    label="操作"
+                    width="160"
+                    v-if="dialogTitle === '费用结算'"
+                >
+                    <template #default="{ row }">
+                        <el-button
+                            type="primary"
+                            size="small"
+                            @click="
+                                () => {
+                                    row.isCheck == 0 ? (row.isCheck = 1) : (row.isCheck = 0)
+                                }
+                            "
+                        >
+                            {{ row.isCheck == 0 ? '改价' : '取消改价' }}
+                        </el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        
+            <TitleTip :titleText="`维修费用明细`" />
+            <el-table
+                :data="repairRecordList"
+                border
+                show-overflow-tooltip
+                :header-cell-style="{
+                    background: '#00a288',
+                    color: '#fff',
+                }"
+            >
+                <el-table-column prop="code" align="center" label="装备编号" />
+                <el-table-column prop="deviceName" align="center" label="装备名称" />
+                <el-table-column prop="typeName" align="center" label="型号" />
+                <el-table-column prop="repairNum" align="center" label="维修数量" />
+                <el-table-column align="center" label="维修费用(元)">
+                    <template #default="{ row }">
+                        <template v-if="row.isCheck == 0">
+                            {{ row.repairPrice }}
+                        </template>
+                        <template v-else>
+                            <el-input
+                                v-model="row.repairPrice"
+                                style="width: 100%"
+                                placeholder="请输入改价费用"
+                                clearable
+                            />
+                        </template>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="repairChangePrice" align="center" label="改价后费用(元)" />
+                <el-table-column align="center" label="附件" width="160">
+                    <template #default="{ row }">
+                        <el-button type="primary" size="small" @click="onViewFileImg(row, 0)"
+                            >查看</el-button
+                        >
+                    </template>
+                </el-table-column>
+                <el-table-column
+                    align="center"
+                    label="操作"
+                    width="160"
+                    v-if="dialogTitle === '费用结算'"
+                >
+                    <template #default="{ row }">
+                        <el-button
+                            type="primary"
+                            size="small"
+                            @click="
+                                () => {
+                                    row.isCheck == 0 ? (row.isCheck = 1) : (row.isCheck = 0)
+                                }
+                            "
+                        >
+                            {{ row.isCheck == 0 ? '改价' : '取消改价' }}
+                        </el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <TitleTip :titleText="`报废费用明细`" />
+            <el-table
+                :data="scrapRecordList"
+                border
+                show-overflow-tooltip
+                :header-cell-style="{
+                    background: '#00a288',
+                    color: '#fff',
+                }"
+            >
+                <el-table-column prop="code" align="center" label="装备编号" />
+                <el-table-column prop="deviceName" align="center" label="装备名称" />
+                <el-table-column prop="typeName" align="center" label="型号" />
+                <el-table-column prop="scrapNum" align="center" label="报废数量" />
+                <el-table-column prop="scrapReason" align="center" label="报废原因" />
+                <el-table-column prop="scrapPrice" align="center" label="报废费用(元)">
+                    <template #default="{ row }">
+                        <template v-if="row.isCheck == 0">
+                            {{ row.scrapPrice }}
+                        </template>
+                        <template v-else>
+                            <el-input
+                                v-model="row.scrapPrice"
+                                style="width: 100%"
+                                placeholder="请输入改价费用"
+                                clearable
+                            />
+                        </template>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="scrapChangePrice" align="center" label="改价后费用(元)" />
+                <el-table-column align="center" label="附件" width="160">
+                    <template #default="{ row }">
+                        <el-button type="primary" size="small" @click="onViewFileImg(row, 1)"
+                            >查看</el-button
+                        >
+                    </template>
+                </el-table-column>
+                <el-table-column
+                    align="center"
+                    label="操作"
+                    width="160"
+                    v-if="dialogTitle === '费用结算'"
+                >
+                    <template #default="{ row }">
+                        <el-button
+                            type="primary"
+                            size="small"
+                            @click="
+                                () => {
+                                    row.isCheck == 0 ? (row.isCheck = 1) : (row.isCheck = 0)
+                                }
+                            "
+                        >
+                            {{ row.isCheck == 0 ? '改价' : '取消改价' }}
+                        </el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <TitleTip :titleText="`丢失费用明细`" />
+            <el-table
+                :data="lossRecordList"
+                border
+                show-overflow-tooltip
+                :header-cell-style="{
+                    background: '#00a288',
+                    color: '#fff',
+                }"
+            >
+                <el-table-column prop="code" align="center" label="装备编号" />
+                <el-table-column prop="deviceName" align="center" label="装备名称" />
+                <el-table-column prop="typeName" align="center" label="型号" />
+                <el-table-column prop="lossNum" align="center" label="丢失数量" />
+                <el-table-column prop="lossPrice" align="center" label="丢失费用(元)">
+                    <template #default="{ row }">
+                        <template v-if="row.isCheck == 0">
+                            {{ row.lossPrice }}
+                        </template>
+                        <template v-else>
+                            <el-input
+                                v-model="row.lossPrice"
+                                style="width: 100%"
+                                placeholder="请输入改价费用"
+                                clearable
+                            />
+                        </template>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="lossChangePrice" align="center" label="改价后费用(元)" />
+                <el-table-column align="center" label="附件" width="160">
+                    <template #default="{ row }">
+                        <el-button type="primary" size="small" @click="onViewFileImg(row, 2)">
+                            查看
+                        </el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
     
+        </el-dialog>
+
+        <!-- 附件详情 -->
+        <el-dialog :visible.sync="innerVisible" width="500" title="附件详情" append-to-body>
+            <el-table
+                :data="viewFileInfoList"
+                border
+                show-overflow-tooltip
+                :header-cell-style="{
+                    background: '#00a288',
+                    color: '#fff',
+                }"
+            >
+                <el-table-column prop="fileName" align="center" label="文件名称" />
+                <el-table-column align="center" label="操作" width="120">
+                    <template #default="{ row }">
+                        <el-image
+                            style="width: 60px; height: 60px"
+                            :src="row.fileUrl"
+                            :zoom-rate="1.2"
+                            :max-scale="7"
+                            :min-scale="0.2"
+                            :preview-src-list="[row.fileUrl]"
+                            :initial-index="0"
+                            fit="cover"
+                            :z-index="9999999999"
+                            :preview-teleported="true"
+                        />
+                    </template>
+                </el-table-column>
+            </el-table>
+        </el-dialog>
+    </div>
+
   </template> 
   
   <script> 
-  import { getPurchaseList } from "@/api/purchase/goodsAccept"; 
+  import TitleTip from '@/components/TitleTip'
+  import { getOrderListApi,getOrderListInfoApi,getOverhaulApi } from "@/api/search/order"; 
+  import moment from 'moment'
   export default {
+    components: { TitleTip },
     name: "order",
     // dicts: ['purchase_task_status'],
     data() {
@@ -432,6 +650,7 @@
         open: false,
         // 查询参数
         time:[],
+        momentInit : moment,
         queryParams: {
           pageNum: 1,
           pageSize: 10,
@@ -441,20 +660,27 @@
         //卡片集合
         cardList:[],
         status:0,
+
+        dialogTitle: '',
+        addOrEditDialogCostVisible: false,
+        viewOrderDetailsOrderId: '',
+        orderDetailDtoList: [],
+        repairRecordList: [],
+        scrapRecordList: [],
+        lossRecordList: [],
+        overhaulDetails: {},
+        fileListAll: [],
+        innerVisible: false,
+        viewFileInfoList: [],
       };
     },
     created() { 
        this.getList();
     },
     methods: {
-        orderText (status) {
-            this.statusList.forEach((e) => {
-                if (e.id == status) {
-                    return e.name
-                }else{
-                    return '未知状态'
-                }
-            })
+        orderText(status) {
+            const foundStatus = this.statusList.find(e => e.id === status);
+            return foundStatus ? foundStatus.name : '未知状态';
             // const filteredStatus = this.statusList.filter((e) => e.id == status)[0].name
             // return filteredStatus ? filteredStatus.name : '未知状态';
         },
@@ -478,8 +704,8 @@
                 this.queryParams.endTime=undefined
             }  
             getOrderListApi(this.queryParams).then((res) => {
-                this.cardList = res.rows;
-                this.total = res.total;
+                this.cardList = res.data.rows;
+                this.total = res.data.total;
                 this.loading = false;
             });
         },
@@ -502,11 +728,45 @@
         //订单详情
         handleViewOrder(row){
             this.$router.push({
-                path: '/tenantry/order/detail',
-                query: { Id:Number(5),isView:"true" }
+                path: '/search/order/orderDetail',
+                query: { orderStatus:row.orderStatus,orderId:row.orderId }
             })
         }, 
 
+        //检修详情
+        handleViewRepair(item){
+            this.viewOrderDetailsOrderId= ''
+            this.viewOrderDetailsOrderId= item.orderId
+            this.dialogTitle = '检修详情'
+            getOrderListInfoApi({orderId:this.viewOrderDetailsOrderId}).then(async(res) => {
+                this.orderDetails = res.data;
+                if(item.orderStatus == 20){
+                await getOverhaulApi(this.viewOrderDetailsOrderId).then((resTwo) => {
+                  this.orderDetailDtoList = resTwo.data.orderDetailDtoList;
+                  this.repairRecordList = resTwo.data.repairRecordList;
+                  this.scrapRecordList = resTwo.data.scrapRecordList;
+                  this.lossRecordList = resTwo.data.lossRecordList;
+                  this.fileListAll = resTwo.data.fileInfoList;
+                  this.overhaulDetails = resTwo.data;
+                })}
+            });
+            this.addOrEditDialogCostVisible = true
+
+        },
+
+        //附件查看
+        onViewFileImg(row, index) {
+            this.viewFileInfoList = [];
+            if(this.fileListAll){
+                this.fileListAll.forEach((e) => {
+                if (e.fileType == index) {
+                    this.viewFileInfoList.push(e);
+                }
+                });
+            }
+            this.innerVisible = true;
+        },
+
         /** 重置按钮操作 */
         resetQuery() {
             this.resetForm("queryForm");
@@ -531,7 +791,7 @@
   };
   </script>
   <style lang="scss" scoped>
-  .uploadImg {
+  /* .uploadImg {
     padding-top: 20px;
     display: flex;
     align-items: center;
@@ -551,83 +811,81 @@
       .el-upload--picture-card {
           display: none;
       }
-  }
-  .app-container {
+  } */
 
-    .cart-title {
-        margin-top: 20px;
-        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 {
+.cart-tbody {
         background: #fff;
         padding: 8px 12px;
-        margin: 10px;
-        border: 1px solid #ccc;
-        border-radius: 20px;
+        margin-bottom: 6px;
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+
         .cart-user-info {
             display: flex;
             align-items: center;
             font-size: 13px;
 
-            .user-name,
-            .user-phone {
+            .code,
+            .orderTime {
                 padding: 3px 18px;
                 border: 1px solid #ccc;
             }
 
-            .user-name {
+            .czcompanyName {
                 margin-left: 20px;
                 border-right: none;
             }
         }
 
-        .cart-list {
+        .cart-listAll {
             margin: 15px 0;
             display: flex;
             align-items: center;
-            
+            font-size: 13px;
+
             div {
                 text-align: center;
             }
-
-            .goods-info {
+            .cart-list {
+                margin: 15px 0;
                 display: flex;
-                align-content: center;
-                img {
-                    width: 200px;
-                    height: 100px;
+                align-items: center;
+                font-size: 13px;
+
+                div {
+                    text-align: center;
                 }
 
-                .goods-code {
-                    margin-left: 40px;
+                .goods-info {
                     display: flex;
-                    flex-direction: column;
-                    justify-content: space-around;
-                    div {
-                        text-align: left;
+                    align-content: center;
+                    border-bottom: 1px solid #00a288;
+
+                    img {
+                        width: 180px;
+                        height: 80px;
+                    }
+
+                    .goods-code {
+                        margin-left: 110px;
+                        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;
+                }
+            }
             .lease-date {
                 display: flex;
                 flex-direction: column;
@@ -643,18 +901,12 @@
         }
     }
 
-    .protocol-handle {
-        background: #fff;
-        padding: 8px 12px;
-        margin: 10px;
-        font-size: 13px;
-
-        .checkbox-container a {
-            color: #ff4800;
-            text-decoration: underline;
-        }
-    }
+:deep .el-form--inline .el-form-item {
+    margin-right: 6px;
+    width: 95%;
 }
+
+
 .order-title-info {
     position: relative;
     padding: 6px 4px;
@@ -667,6 +919,17 @@
     }
 }
 
+.order-items {
+    border-right: 1px solid #eee;
+}
+
+.order-info {
+    display: flex;
+    padding: 4px 0;
+    align-items: center;
+    justify-content: center;
+}
+
 .order-items-info {
     display: flex;
     flex-direction: column;
@@ -676,4 +939,67 @@
     font-size: 13px;
 }
 
+.red-font {
+    color: #ff4800;
+    font-weight: bold;
+    margin-top: 10px;
+}
+
+    .handle-btn {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        
+        align-items: center;
+        .el-button {
+            width: calc((100% - 50px) / 4);
+            margin-bottom: 10px;
+            margin-left: 10px !important;
+        }
+    }
+
+    .handle-btn-4 {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        .el-button {
+            width: calc((100% - 20px) / 2);
+            margin-left: 10px !important;
+            margin-bottom: 10px;
+        }
+    }
+    .handle-btn-1 {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+
+        .el-button {
+            width: 90%;
+            margin-bottom: 10px;
+            margin-left: 5% !important;
+        }
+    }
+
+    .app-container-content {
+    :deep(.el-dialog) {
+        display: flex !important;
+        flex-direction: column !important;
+        margin: 0 !important;
+        position: absolute !important;
+        top: 50% !important;
+        left: 50% !important;
+        transform: translate(-50%, -50%) !important;
+        max-height: 100vh !important;
+        .el-dialog__body {
+            flex: 1;
+            overflow-y: scroll !important;
+        }
+        .dialog-content {
+            padding: 20px;
+        }
+    }
+}
   </style>
\ No newline at end of file
diff --git a/src/views/tenantry/order/detail.vue b/src/views/tenantry/order/detail.vue
index 13d72186..62745e7c 100644
--- a/src/views/tenantry/order/detail.vue
+++ b/src/views/tenantry/order/detail.vue
@@ -134,7 +134,7 @@
   
   <script>
 export default {
-  name: "orderDetail",
+  name: "orderDetail2",
   data() {
     return {
       Id: 1,
diff --git a/src/views/tenantry/order/index.vue b/src/views/tenantry/order/index.vue
index 00b95d09..11c7e400 100644
--- a/src/views/tenantry/order/index.vue
+++ b/src/views/tenantry/order/index.vue
@@ -225,7 +225,7 @@
   <script> 
   import { getPurchaseList } from "@/api/purchase/goodsAccept"; 
   export default {
-    name: "order",
+    name: "order2",
     // dicts: ['purchase_task_status'],
     data() {
       return {