From 141a763be1522bc4fda06ef5f0ce7021068ec054 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Fri, 6 Dec 2024 17:48:56 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A3=85=E5=A4=87=E6=96=B0=E5=A2=9E=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 env/.env.dev                                  |    4 +-
 src/components/Navmenu/index.vue              |   11 +-
 src/components/header/index.vue               |    3 +-
 src/components/uploadComponent/index.vue      |  421 +++--
 src/components/uploadComponentNew/index.vue   |    2 +-
 src/http/index.ts                             |   12 +-
 src/views/demand-details/index.vue            |   26 +-
 src/views/home/index.vue                      |    4 +-
 src/views/parity/index.vue                    |   14 +-
 src/views/user/goodsManagement/index.vue      | 1483 +++++++++-------
 .../components/order-details.vue              |  665 +++++++
 .../orderManagement/components/order-home.vue | 1520 ++++++++++++++++
 src/views/user/orderManagement/index.vue      | 1537 +----------------
 src/views/user/sourcingNeed/index.vue         |  114 +-
 14 files changed, 3383 insertions(+), 2433 deletions(-)
 create mode 100644 src/views/user/orderManagement/components/order-details.vue
 create mode 100644 src/views/user/orderManagement/components/order-home.vue

diff --git a/env/.env.dev b/env/.env.dev
index 8c14d12..e796421 100644
--- a/env/.env.dev
+++ b/env/.env.dev
@@ -7,8 +7,8 @@ VITE_API_URL = '/proxyApi'
 # 开发环境接口地址
 # VITE_proxyTarget = 'http://10.40.92.74:8080'  #盛旭
 
-VITE_proxyTarget = 'http://192.168.2.246:28080'  # 马帅 
-# VITE_proxyTarget = 'http://192.168.2.123:28080'  # 梁超 
+# VITE_proxyTarget = 'http://192.168.2.246:28080'  # 马帅 
+VITE_proxyTarget = 'http://192.168.2.127:28080'  # 梁超 
 # VITE_proxyTarget = 'http://192.168.0.244:28580'  # 测试服务
 # VITE_proxyTarget = 'http://192.168.2.129:18080'  # 马帅
 
diff --git a/src/components/Navmenu/index.vue b/src/components/Navmenu/index.vue
index ee6f1e6..f32c5e9 100644
--- a/src/components/Navmenu/index.vue
+++ b/src/components/Navmenu/index.vue
@@ -24,6 +24,7 @@ const navMenuList = computed(() => {
             { name: '租赁需求大厅', routerName: 'parity' },
             { name: '装备管理', routerName: 'goodsManagement' },
             { name: '订单管理', routerName: 'orderManagementCz' },
+            { name: '接单管理', routerName: 'accept-orders' },
             { name: '消息通知', routerName: 'enterpriseZone' },
         ]
     if (isType == 2)
@@ -32,12 +33,20 @@ const navMenuList = computed(() => {
             { name: '装备共享大厅', routerName: 'equipList' },
             { name: '租赁需求大厅', routerName: 'parity' },
             { name: '订单管理', routerName: 'orderManagement' },
+            { name: '需求管理', routerName: 'sourcingNeed' },
             { name: '消息通知', routerName: 'enterpriseZone' },
         ]
 })
 
 const navMenuClick = (name: any) => {
-    if (name == 'goodsManagement' || name == 'orderManagementCz' || name == 'orderManagement') {
+    const includeList = [
+        'goodsManagement',
+        'orderManagementCz',
+        'orderManagement',
+        'sourcingNeed',
+        'accept-orders',
+    ]
+    if (includeList.includes(name)) {
         store.editcurrentMenuItem(name)
         setTimeout(() => {
             router.push({
diff --git a/src/components/header/index.vue b/src/components/header/index.vue
index ba0a930..a63cd78 100644
--- a/src/components/header/index.vue
+++ b/src/components/header/index.vue
@@ -36,6 +36,7 @@ const handlerLogout = () => {
             ElMessage({
                 type: 'success',
                 message: '已退出登录',
+                duration: 1000,
             })
         })
         .catch(() => {
@@ -150,7 +151,7 @@ const isMyInfoPage = () => {
                 /> -->
 
                 <el-image
-                    style="width: 190px; cursor: pointer; margin-right: 55%"
+                    style="width: 190px; cursor: pointer; margin-right: 50%"
                     v-if="isMyInfoPage()"
                     :src="headerLogo"
                     fit="cover"
diff --git a/src/components/uploadComponent/index.vue b/src/components/uploadComponent/index.vue
index 30a8057..c34abf3 100644
--- a/src/components/uploadComponent/index.vue
+++ b/src/components/uploadComponent/index.vue
@@ -19,7 +19,8 @@
             :on-remove="(file:any, fileList:any) => removeFile(file, fileList)"
             :on-preview="(file:any) => preview(file)"
             :on-progress="(event:any, file:any, fileList:any) => onProgressFn(event, file, fileList)"
-            :list-type="props.listType">
+            :list-type="props.listType"
+        >
             <!-- 上传的按钮 或者 icon 通过具名插槽的方式 -->
             <div>
                 <slot name="default"></slot>
@@ -31,250 +32,222 @@
 </template>
 
 <script lang="ts" setup>
-    import { ref, nextTick } from 'vue'
-    import { ElMessage } from 'element-plus'
-    // import { Base64 } from 'js-base64'
-    const tmpUploadUrl = import.meta.env.VITE_API_URL + '/zlpt-file/file/cos/upload'
-    console.log(tmpUploadUrl)
-    import { mainStore } from 'store/main'
-    const store = mainStore()
-    const headerInfo = reactive({
-        Authorization: store.token
-    })
+import { ref, nextTick } from 'vue'
+import { ElMessage } from 'element-plus'
+// import { Base64 } from 'js-base64'
+const tmpUploadUrl = import.meta.env.VITE_API_URL + '/zlpt-file/file/cos/upload'
+console.log(tmpUploadUrl)
+import { mainStore } from 'store/main'
+const store = mainStore()
+const headerInfo = reactive({
+    Authorization: store.token,
+})
 
-    console.log('tmpUploadUrl', tmpUploadUrl)
-    const actionUrl = ref(tmpUploadUrl)
-    const props = defineProps({
-        // actionUrl: {
-        //     //上传的地址
-        //     type: String,
-        //     default: ""
-        // },
-        width: {
-            //上传的地址
-            type: String,
-            default: '72px'
+console.log('tmpUploadUrl', tmpUploadUrl)
+const actionUrl = ref(tmpUploadUrl)
+const props = defineProps({
+    // actionUrl: {
+    //     //上传的地址
+    //     type: String,
+    //     default: ""
+    // },
+    width: {
+        //上传的地址
+        type: String,
+        default: '72px',
+    },
+    height: {
+        //上传的地址
+        type: String,
+        default: '72px',
+    },
+    autoUpload: {
+        //是否开启自动上传
+        type: Boolean,
+        default: false,
+    },
+    acceptTypeList: {
+        //接受的文件类型
+        type: Array,
+        default: () => {
+            return ['.jpg', '.jpeg', '.png']
+            //  ['doc', 'docx', 'xlsx', 'xls', 'txt', 'pdf','jpg','jpeg','png','zip,'rar']
         },
-        height: {
-            //上传的地址
-            type: String,
-            default: '72px'
+    },
+    multiple: {
+        //是否开启多图上传
+        type: Boolean,
+        default: false,
+    },
+    maxLimit: {
+        // 最大上传个数限制
+        type: Number || String,
+        default: 1,
+    },
+    maxSize: {
+        // 文件上传的最大体积 M
+        type: Number || String,
+        default: 4,
+    },
+    disabledFlag: {
+        //是否禁用
+        type: Boolean,
+        default: false,
+    },
+    fileList: {
+        //文件列表
+        type: Array,
+        default: () => {
+            return []
         },
-        autoUpload: {
-            //是否开启自动上传
-            type: Boolean,
-            default: false
-        },
-        acceptTypeList: {
-            //接受的文件类型
-            type: Array,
-            default: () => {
-                return ['.jpg', '.jpeg', '.png']
-                //  ['doc', 'docx', 'xlsx', 'xls', 'txt', 'pdf','jpg','jpeg','png','zip,'rar']
-            }
-        },
-        multiple: {
-            //是否开启多图上传
-            type: Boolean,
-            default: false
-        },
-        maxLimit: {
-            // 最大上传个数限制
-            type: Number || String,
-            default: 1
-        },
-        maxSize: {
-            // 文件上传的最大体积 M
-            type: Number || String,
-            default: 4
-        },
-        disabledFlag: {
-            //是否禁用
-            type: Boolean,
-            default: false
-        },
-        fileList: {
-            //文件列表
-            type: Array,
-            default: () => {
-                return []
-            }
-        },
-        listType: {
-            type: String, //'text' | 'picture' | 'picture-card'
-            default: 'picture'
-        },
-        extraData: {}, //上传时的额外参数 如 name等
+    },
+    listType: {
+        type: String, //'text' | 'picture' | 'picture-card'
+        default: 'picture',
+    },
+    extraData: {}, //上传时的额外参数 如 name等
 
-        /*
+    /*
     {
         name:'12321'
     }
     */
-        dragFlag: {
-            type: Boolean,
-            default: true //是否启用拖拽上传 此处默认启用  element 官方默认是 不启用的
+    dragFlag: {
+        type: Boolean,
+        default: true, //是否启用拖拽上传 此处默认启用  element 官方默认是 不启用的
+    },
+    downLoadTypeList: {
+        //需要下载的文件类型
+        type: Array,
+        default: () => {
+            return ['doc', 'docx', 'xlsx', 'xls', 'txt']
         },
-        downLoadTypeList: {
-            //需要下载的文件类型
-            type: Array,
-            default: () => {
-                return ['doc', 'docx', 'xlsx', 'xls', 'txt']
-            }
+    },
+    preveiwTypeList: {
+        //需要预览的文件类型
+        type: Array,
+        default: () => {
+            return ['pdf', 'jpg', 'jpeg', 'png']
         },
-        preveiwTypeList: {
-            //需要预览的文件类型
-            type: Array,
-            default: () => {
-                return ['pdf', 'jpg', 'jpeg', 'png']
-            }
-        },
-        officePreviewFlag: {
-            //是否启用office在线预览
-            type: Boolean,
-            default: false
-        },
-        showProcessFlag: {
-            //是否显示进度条
-            type: Boolean,
-            default: false
-        },
-        scuccesCallback: {
-            type: Function,
-            default: () => {}
-        },
-        successResultCallBack: {
-            type: Function,
-            default: () => {}
-        }
+    },
+    officePreviewFlag: {
+        //是否启用office在线预览
+        type: Boolean,
+        default: false,
+    },
+    showProcessFlag: {
+        //是否显示进度条
+        type: Boolean,
+        default: false,
+    },
+    scuccesCallback: {
+        type: Function,
+        default: () => {},
+    },
+    successResultCallBack: {
+        type: Function,
+        default: () => {},
+    },
+})
+// office预览
+// https://view.officeapps.live.com/op/view.aspx?src=
+// https://view.officeapps.live.com/op/view.aspx?src=文档地址
+//
+
+const officeOnlineAddress = 'https://view.officeapps.live.com/op/view.aspx?src='
+const officeType = ['doc', 'docx', 'xlsx', 'xls']
+let processFlag = ref(false) //是否显示进度条
+let loadProcess = ref(0) //进度条的刻度值
+
+// 上传图片 成功
+const successUpload = (response: any, file: any) => {
+    console.log('successUpload', response, file)
+    if (response.code === 200) {
+        props.fileList.push({
+            url: response.data,
+            name: file.name,
+        })
+        props.successResultCallBack(response)
+    } else {
+        ElMessage({
+            type: 'warning',
+            duration: 1000,
+            message: response.data,
+        })
+    }
+}
+const errorUpload = (res: any) => {
+    ElMessage({
+        type: 'warning',
+        duration: 1000,
+        message: '上传失败请重试！',
     })
-    // office预览
-    // https://view.officeapps.live.com/op/view.aspx?src=
-    // https://view.officeapps.live.com/op/view.aspx?src=文档地址
-    //
-
-    const officeOnlineAddress = 'https://view.officeapps.live.com/op/view.aspx?src='
-    const officeType = ['doc', 'docx', 'xlsx', 'xls']
-    let processFlag = ref(false) //是否显示进度条
-    let loadProcess = ref(0) //进度条的刻度值
-
-    // 上传图片 成功
-    const successUpload = (response: any, file: any) => {
-        console.log('successUpload', response, file)
-        if (response.code === 200) {
-            props.fileList.push({
-                url: response.data,
-                name: file.name
-            })
-            props.successResultCallBack(response)
-        } else {
-            ElMessage({
-                type: 'warning',
-                message: response.data
-            })
-        }
-    }
-    const errorUpload = (res: any) => {
+}
+const beforeUpload = (file: any) => {
+    console.log('file', file)
+    const { name = '', size } = file
+    if (size > props.maxSize * 1024 * 1000) {
         ElMessage({
             type: 'warning',
-            message: '上传失败请重试！'
+            message: `文件最大仅支持${props.maxSize}M`,
         })
+        return false
     }
-    const beforeUpload = (file: any) => {
-        console.log('file', file)
-        const { name = '', size } = file
-        if (size > props.maxSize * 1024 * 1000) {
-            ElMessage({
-                type: 'warning',
-                message: `文件最大仅支持${props.maxSize}M`
-            })
-            return false
-        }
-        let names = name.split('.')
-        let currentName = names[names.length - 1]
-        console.log('acceptTypeListacceptTypeList', props.acceptTypeList, currentName)
-        console.log('name.split().pop()')
-        if (!props.acceptTypeList.includes('.' + currentName)) {
-            ElMessage({
-                type: 'warning',
-                message: `文件格式仅支持${props.acceptTypeList.join(',')}`
-            })
-            return false
-        }
-    }
-    const handleExceed = (files: any, fileList: any) => {
+    let names = name.split('.')
+    let currentName = names[names.length - 1]
+    console.log('acceptTypeListacceptTypeList', props.acceptTypeList, currentName)
+    console.log('name.split().pop()')
+    if (!props.acceptTypeList.includes('.' + currentName)) {
         ElMessage({
             type: 'warning',
-            message: `当前限制选择 10 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
-                files.length + fileList.length
-            } 个文件`
+            message: `文件格式仅支持${props.acceptTypeList.join(',')}`,
+        })
+        return false
+    }
+}
+const handleExceed = (files: any, fileList: any) => {
+    ElMessage({
+        type: 'warning',
+        message: `当前限制选择 10 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
+            files.length + fileList.length
+        } 个文件`,
+    })
+}
+// 移除文件
+const removeFile = (file: any, data: any) => {
+    console.log(file, data)
+    // props.fileList = data
+}
+// 预览
+const preview = (data: any) => {
+    console.log(data, '****预览文件')
+    window.open(data.response.msg)
+    return
+}
+
+const onProgressFn = (event: any, file: any, fileList: any) => {
+    processFlag.value = true
+    loadProcess.value = event.percent.toFixed(2)
+    if (loadProcess.value >= 100) {
+        loadProcess.value = 100
+        nextTick(() => {
+            processFlag.value = false
         })
     }
-    // 移除文件
-    const removeFile = (file: any, data: any) => {
-        console.log(file, data)
-        // props.fileList = data
-    }
-    // 预览
-    const preview = (data: any) => {
-        console.log(data, '****预览文件')
-        window.open(data.response.msg)
-        return
-
-        const { url, response = {} } = data || {}
-        let name = data.name
-        const downLoadTypeList = props.downLoadTypeList
-        const preveiwTypeList = props.preveiwTypeList
-        if (!name) {
-            name = ''
-        }
-        const suffixFileType = name.split('.').pop()
-        if (downLoadTypeList.includes(suffixFileType)) {
-            //预览 'doc', 'docx', 'xlsx', 'xls', 'txt' 文件
-            name = name.replace(/&/g, '') // & 不兼容
-            const target = encodeURIComponent()
-            // Base64.encode(
-            //     `${location.origin}/api/abk/web/v1/resource/file?fileId=${
-            //         url || response.data
-            //     }&fullfilename=${name}&sid=4AC67ADB4E264AB0A8B899A671072875`
-            // )
-            if (props.officePreviewFlag && officeType.includes(suffixFileType)) {
-                // office预览的
-                const preveiewURL = officeOnlineAddress + target
-                window.open(preveiewURL)
-            } else {
-                // 非office预览
-                window.open(`https://test/preview/onlinePreview?url=${target}`, '_blank')
-            }
-        } else if (preveiwTypeList.includes(suffixFileType)) {
-            //新窗口打开 预览图片文件
-            window.open('/api/abk/web/v1/resource/file?fileId=' + (url || response.data), '_blank')
-        }
-    }
-
-    const onProgressFn = (event: any, file: any, fileList: any) => {
-        processFlag.value = true
-        loadProcess.value = event.percent.toFixed(2)
-        if (loadProcess.value >= 100) {
-            loadProcess.value = 100
-            nextTick(() => {
-                processFlag.value = false
-            })
-        }
-    }
-    const changeFileFn = (ev: any) => {
-        props.scuccesCallback(ev)
-    }
+}
+const changeFileFn = (ev: any) => {
+    props.scuccesCallback(ev)
+}
 </script>
 
 <style lang="scss" scoped>
-    :deep(.el-upload) {
-        width: v-bind('props.width') !important;
-        height: v-bind('props.height') !important;
-    }
-    :deep(.el-upload-list__item) {
-        width: v-bind('props.width') !important;
-        height: v-bind('props.height') !important;
-    }
+:deep(.el-upload) {
+    width: v-bind('props.width') !important;
+    height: v-bind('props.height') !important;
+}
+:deep(.el-upload-list__item) {
+    width: v-bind('props.width') !important;
+    height: v-bind('props.height') !important;
+}
 </style>
 <style></style>
diff --git a/src/components/uploadComponentNew/index.vue b/src/components/uploadComponentNew/index.vue
index 3e790f5..3c500b7 100644
--- a/src/components/uploadComponentNew/index.vue
+++ b/src/components/uploadComponentNew/index.vue
@@ -219,7 +219,7 @@ const beforeUpload = (file: any) => {
         return false
     }
 
-    if (fileListNew.value.length + props.minLimit >= 4) {
+    if (fileListNew.value.length + props.minLimit >= props.maxLimit) {
         ElMessage({
             type: 'warning',
             message: `最多只能上传${props.maxLimit}个文件`,
diff --git a/src/http/index.ts b/src/http/index.ts
index 553e253..bb01ebb 100644
--- a/src/http/index.ts
+++ b/src/http/index.ts
@@ -31,7 +31,6 @@ service.interceptors.request.use(
 )
 // 响应拦截
 service.interceptors.response.use(
-
     (res) => {
         ElMessage.closeAll()
         const { data } = res
@@ -44,16 +43,19 @@ service.interceptors.response.use(
             ElMessage.error(data.msg)
             router.push('/login')
         } else if (data.code == '500') {
-            ElMessage.error(data.msg)
+            ElMessage({
+                type: 'error',
+                message: data.msg,
+                duration: 1000,
+            })
         }
         else {
             return data
         }
     },
     (error) => {
-        ElMessage.closeAll()
-        ElMessage.error('请求失败')
-        console.log('error-异常', error)
+        // ElMessage.error('请求失败')
+        // console.log('error-异常', error)
     }
 )
 
diff --git a/src/views/demand-details/index.vue b/src/views/demand-details/index.vue
index 8e10e7b..36ac402 100644
--- a/src/views/demand-details/index.vue
+++ b/src/views/demand-details/index.vue
@@ -51,21 +51,21 @@
                             </el-col>
                         </el-row> -->
 
-                        <div class="label" style="padding: 10px 0; font-size: 16px">需求清单：</div>
+                        <!-- <div class="label" style="padding: 10px 0; font-size: 16px">需求清单：</div>
                         <el-row>
                             <el-col
                                 :span="12"
                                 v-for="item in leaseDetails.fileInfoList"
                                 :key="item.id"
                             >
-                                <!-- <img :src="img.fileUrl" alt="" style="width: 98%; height: 120px" /> -->
+                              
                                 <el-image
                                     style="width: 98%; height: 240px"
                                     :src="item.fileUrl"
                                     fit="cover"
                                 />
                             </el-col>
-                        </el-row>
+                        </el-row> -->
                     </div>
 
                     <el-row style="padding: 8px 0; font-size: 16px"> 装备需求信息: </el-row>
@@ -89,6 +89,14 @@
                                 <span>{{ item.leaseNum }}</span>
                             </el-col>
                         </el-row>
+                        <el-row style="padding: 10px 0">
+                            <el-col :span="4">
+                                <span class="label">装备描述：</span>
+                            </el-col>
+                            <el-col :span="20">
+                                <span>{{ item.description }}</span>
+                            </el-col>
+                        </el-row>
                         <div class="label" style="padding: 10px 0">参考图片/样式：</div>
                         <el-row>
                             <el-col :span="12" v-for="img in item.fileInfoList" :key="img.id">
@@ -200,9 +208,17 @@ const equipBaseInfoList = reactive([
     //     label: '预估数量',
     //     key: 'leaseNum',
     // },
+    // {
+    //     label: '预估租赁天数',
+    //     key: 'leaseDay',
+    // },
     {
-        label: '预估租赁天数',
-        key: 'leaseDay',
+        label: '租赁开始日期',
+        key: 'leaseStartTime',
+    },
+    {
+        label: '租赁结束日期',
+        key: 'leaseEndTime',
     },
     {
         label: '发布时间',
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 175b4a5..0847198 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -22,10 +22,10 @@ const selectOptions = ref<boolean>(false) // 分类
 const selectOptionsValue = ref<string>('分类筛选')
 
 const loopList = ref([
-    'https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/488bab245180ebf9f1f3d7db5301be4.png',
+    // 'https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/488bab245180ebf9f1f3d7db5301be4.png',
     // 'https://jmy-pic.baidu.com/0/pic/-1857035387_-1067811148_-1621691324.png',
     imgSrc,
-    swiper_1,
+    // swiper_1,
     swiper_2,
 ])
 // 获取商品分类
diff --git a/src/views/parity/index.vue b/src/views/parity/index.vue
index 57b62e6..373d44e 100644
--- a/src/views/parity/index.vue
+++ b/src/views/parity/index.vue
@@ -106,6 +106,12 @@
                     <el-col :span="5">
                         <div>{{ item.companyName }}</div>
                     </el-col>
+                    <el-col :span="2">
+                        <div>预估数量</div>
+                    </el-col>
+                    <el-col :span="5">
+                        <div>{{ item.leaseTotalNum }}</div>
+                    </el-col>
                 </el-row>
                 <el-row>
                     <el-col :span="2">
@@ -123,16 +129,16 @@
                 </el-row>
                 <el-row>
                     <el-col :span="2">
-                        <div>预估数量</div>
+                        <div>租赁开始日期</div>
                     </el-col>
                     <el-col :span="5">
-                        <div>{{ item.leaseTotalNum }}</div>
+                        <div>{{ item.leaseStartTime }}</div>
                     </el-col>
                     <el-col :span="2">
-                        <div>预估租期(天)</div>
+                        <div>租赁结束日期</div>
                     </el-col>
                     <el-col :span="6">
-                        <div>{{ item.leaseDay }}</div>
+                        <div>{{ item.leaseEndTime }}</div>
                     </el-col>
                 </el-row>
                 <el-row>
diff --git a/src/views/user/goodsManagement/index.vue b/src/views/user/goodsManagement/index.vue
index 400c838..2daa11c 100644
--- a/src/views/user/goodsManagement/index.vue
+++ b/src/views/user/goodsManagement/index.vue
@@ -2,6 +2,8 @@
 import TableComponent from 'components/TableComponent/index.vue'
 import FormComponent from 'components/FormComponent/index.vue'
 import PagingComponent from 'components/PagingComponent/index.vue'
+import UploadComponentNew from 'components/uploadComponentNew/index.vue'
+import TitleTip from 'components/TitleTip/index.vue'
 import uploadComponent from 'components/uploadComponent/index.vue'
 import previewImg from './previewImg/index.vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
@@ -11,6 +13,9 @@ import { useStore } from 'store/user'
 const store = useStore()
 import { mainStore } from 'store/main'
 const store2 = mainStore()
+const isViewForm = ref(false)
+
+const isDisabled = ref(false)
 import {
     getEquipmentTypeApi, //装备类型
     getCompanyListApi, //所属公司
@@ -124,6 +129,8 @@ getList()
 // 装备新增按钮
 const equipmentDeployment = () => {
     settleinTitle.value = '新增装备'
+    isViewForm.value = false
+    Object.assign(addAndEditForm, addAndEditFormTemp)
     disabledForm.value = false
     isEditDisabled.value = true
     equipmentDeploymentParams.value = {
@@ -158,6 +165,7 @@ const editRowInfo = (row: any) => {
     getDetailData(row)
     disabledForm.value = false
     isEditDisabled.value = true
+    isViewForm.value = false
 }
 /* 查看按钮 */
 const previewRowInfo = (row: any) => {
@@ -165,6 +173,7 @@ const previewRowInfo = (row: any) => {
     getDetailData(row)
     disabledForm.value = true
     isEditDisabled.value = false
+    isViewForm.value = true
 }
 // 删除按钮
 const deleteRowInfo = async (row: any) => {
@@ -189,22 +198,73 @@ const deleteRowInfo = async (row: any) => {
 }
 //获取详情接口
 const getDetailData = async (row: any) => {
-    console.log(row, '----row----')
-    maId.value = row.maId
-    const res: any = await getDetailApi(row.maId)
-    console.log(res, '----detail----')
-    equipmentDeploymentParams.value = res.data
-    equipmentDeploymentParams.value.companyId = Number(res.data.companyId)
-    mainFileList.value = res.data.mainFileList
-    detailsFileList.value = res.data.detailsFileList
-    insurancePdf.value = res.data.insurancePdf
-    examinationPdf.value = res.data.examinationPdf
-    //反显 装备树
-    equipmentDeploymentParams.value.deviceTypeList = getSelectId(
-        deviceTypeTree.value,
-        equipmentDeploymentParams.value.typeId,
-    )
+    const { data: res }: any = await getDetailApi(row.maId)
+    const {
+        deviceName,
+        // deviceTypeList,
+        deviceCount,
+        unitName,
+        code,
+        brand,
+        typeId,
+        companyId,
+        productionDate,
+        dayLeasePrice,
+        person,
+        personPhone,
+        deviceWeight,
+        checkDate,
+        checkCycle,
+        mainFileList,
+        detailsFileList,
+        insurancePdf,
+        examinationPdf,
+    } = res
+
+    Object.assign(addAndEditForm, {
+        deviceName,
+        deviceCount,
+        unitName,
+        code,
+        brand,
+        typeId,
+        companyId,
+        productionDate,
+        dayLeasePrice,
+        person,
+        personPhone,
+        deviceWeight,
+        checkDate,
+        checkCycle,
+        mainFileList,
+        detailsFileList,
+        insurancePdf,
+        examinationPdf,
+    })
+
+    descriptionFormList.value[0].insurancePdfs = insurancePdf
+    descriptionFormList.value[0].examinationPdfs = examinationPdf
+    addAndEditForm.deviceTypeList = getSelectId(deviceTypeTree.value, addAndEditForm.typeId)
     dialogFormVisibleSettlein.value = true
+
+    console.log(res, '详情接口')
+
+    // console.log(row, '----row----')
+    // maId.value = row.maId
+    // const res: any = await getDetailApi(row.maId)
+    // console.log(res, '----detail----')
+    // equipmentDeploymentParams.value = res.data
+    // equipmentDeploymentParams.value.companyId = Number(res.data.companyId)
+    // mainFileList.value = res.data.mainFileList
+    // detailsFileList.value = res.data.detailsFileList
+    // insurancePdf.value = res.data.insurancePdf
+    // examinationPdf.value = res.data.examinationPdf
+    // //反显 装备树
+    // equipmentDeploymentParams.value.deviceTypeList = getSelectId(
+    //     deviceTypeTree.value,
+    //     equipmentDeploymentParams.value.typeId,
+    // )
+    // dialogFormVisibleSettlein.value = true
     // equipmentDeploymentParams.value.cityId = String(equipmentDeploymentParams.value.cityId)
     // equipmentDeploymentParams.value.areaId = String(equipmentDeploymentParams.value.areaId)
     // equipmentDeploymentParams.value.provinceId = String(
@@ -259,67 +319,6 @@ const handleUpdateUpDown = (row: any, maStatus: any) => {
         .catch(() => {})
 }
 
-// // 省级数据源
-// const selProvinceList: any = computed(() => {
-//     return store.provinceList
-// })
-
-// // 获取市级数据源
-// const selMarketList: any = computed(() => {
-//     return store.marketList
-// })
-
-// // 获取区级数据源
-// const selAreaList: any = computed(() => {
-//     return store.areaList
-// })
-
-// // 设备类型大类
-// const selDeviceTypeList: any = computed(() => {
-//     return store.deviceTypeList
-// })
-
-// // 设备类型子类
-// const selDeviceTypeSonList: any = computed(() => {
-//     return store.deviceTypeSonList
-// })
-
-// // 设备类型小类
-// const selDeviceTypeSunList: any = computed(() => {
-//     return store.deviceTypeSunList
-// })
-
-// // 省级下拉框选中时获取市级
-// const changeProvince = (val: any) => {
-//     // console.log(val, '省选择**')
-//     store.getmarketList(val.split(',')[0])
-
-//     // AssemblyRegisterAddress[0] = val.split(',')[1]
-// }
-// // 市级下拉框选中获取区级数据
-// const changeMarket = (val: any) => {
-//     store.getareaList(val.split(',')[0])
-//     // AssemblyRegisterAddress[1] = val.split(',')[1]
-// }
-// // 区级下拉框获取区级数据
-// const opeChangeArea = (val: any) => {
-//     // AssemblyRegisterAddress[2] = val.split(',')[1]
-// }
-// // 设备类型大类
-// const changeDeviceType = (val: any) => {
-//     store.getDeviceTypeSonList(val)
-//     // deviceType[0] = val.split(',')[1]
-// }
-// // 设备类型子类
-// const changeDeviceTypeSon = (val: any) => {
-//     store.getDeviceTypeSunList(val)
-//     // deviceType[1] = val.split(',')[1]
-// }
-// // 设备类型小类
-// const changeDeviceTypeSun = (val: any) => {
-//     // deviceType[2] = val.split(',')[1]
-// }
-
 /*
         ----装备弹窗-----
     */
@@ -358,18 +357,23 @@ const dialogTypeCascader = ref()
 //装备类目-change
 const dialogTypeChange = () => {
     const deviceTypeList = dialogTypeCascader.value.getCheckedNodes()
-    console.log(deviceTypeList)
-    equipmentDeploymentParams.value.unitName = deviceTypeList[0].data.unitName
-    let manageType = deviceTypeList[0].data.manageType
-    if (manageType == '1') {
-        //数量
-        equipmentDeploymentParams.value.deviceCount = 1
-        countDisabled.value = false
-    } else if (manageType == '0') {
-        //编码
-        equipmentDeploymentParams.value.deviceCount = 1
-        countDisabled.value = true
-    }
+    // console.log(deviceTypeList)
+    // equipmentDeploymentParams.value.unitName = deviceTypeList[0].data.unitName
+    // equipmentDeploymentParams.value.dayLeasePrice = deviceTypeList[0].data.leasePrice
+    // isDisabled.value = true
+    // let manageType = deviceTypeList[0].data.manageType
+    // if (manageType == '1') {
+    //     //数量
+    //     equipmentDeploymentParams.value.deviceCount = 1
+    //     countDisabled.value = false
+    // } else if (manageType == '0') {
+    //     //编码
+    //     equipmentDeploymentParams.value.deviceCount = 1
+    //     countDisabled.value = true
+    // }
+    isDisabled.value = true
+    addAndEditForm.unitName = deviceTypeList[0].data.unitName
+    addAndEditForm.dayLeasePrice = deviceTypeList[0].data.leasePrice
 }
 //获取所属公司下拉数据
 const getCompanyList = async () => {
@@ -403,6 +407,13 @@ const equipRules = ref({
             trigger: 'blur',
         },
     ],
+    unitName: [
+        {
+            required: true,
+            message: '装备单位不可为空',
+            trigger: 'blur',
+        },
+    ],
     brand: [
         {
             required: true,
@@ -449,118 +460,152 @@ const equipRules = ref({
             trigger: 'blur',
         },
     ],
+    mainFileList: [{ required: true, message: '请上传主展示图', trigger: 'change' }],
+    detailsFileList: [{ required: true, message: '请上传详情展示图', trigger: 'change' }],
+
     // deviceWeight: [
     //     //
     //     { required: true, message: '整机重量不能为空', trigger: 'blur' },
     // ],
 })
+
+const descriptionRules = ref({
+    insurancePdfs: [{ required: true, message: '请上传合格证', trigger: 'change' }],
+    examinationPdfs: [{ required: true, message: '请上传检测证明', trigger: 'change' }],
+})
 // 弹框保存提交
-const submitBtn = () => {
-    ruleFormRef.value.validate(async (valid: any) => {
+const submitBtn = async () => {
+    submitFun(1)
+    // ruleFormRef.value.validate(async (valid: any) => {
+    //     if (valid) {
+    //         if (
+    //             equipmentDeploymentParams.value.deviceTypeList &&
+    //             equipmentDeploymentParams.value.deviceTypeList.length > 0
+    //         ) {
+    //             equipmentDeploymentParams.value.typeId =
+    //                 equipmentDeploymentParams.value.deviceTypeList[3]
+    //         } else {
+    //             equipmentDeploymentParams.value.typeId = ''
+    //         }
+    //         if (mainFileList.value.length == 0 || mainFileList.value.length > 6) {
+    //             ElMessage({ type: 'error', message: '主展示图不得少于1张，不得多于6张' })
+    //             return
+    //         }
+    //         if (detailsFileList.value.length == 0 || detailsFileList.value.length > 6) {
+    //             ElMessage({ type: 'error', message: '详情展示图不得少于1张，不得多于6张' })
+    //             return
+    //         }
+    //         let param = {
+    //             ...equipmentDeploymentParams.value,
+    //             mainFileList: mainFileList.value, //主展示
+    //             detailsFileList: detailsFileList.value, //详情展示
+    //             insurancePdf: insurancePdf.value, //合格证
+    //             examinationPdf: examinationPdf.value, //检测证明
+    //         }
+    //         param.maStatus == 0 ? (param.maStatus = 1) : param.maStatus
+    //         if (
+    //             equipmentDeploymentParams.value.maId &&
+    //             equipmentDeploymentParams.value.maId != ''
+    //         ) {
+    //             const res: any = await equipmentEditApi(param)
+    //             if (res.code === 200) {
+    //                 ElMessage({
+    //                     type: 'success',
+    //                     message: '保存成功',
+    //                 })
+    //                 dialogFormVisibleSettlein.value = false
+    //                 getList()
+    //             }
+    //         } else {
+    //             const res: any = await equipmentAddApi(param)
+    //             if (res.code === 200) {
+    //                 ElMessage({
+    //                     type: 'success',
+    //                     message: '保存成功',
+    //                 })
+    //                 dialogFormVisibleSettlein.value = false
+    //                 getList()
+    //             }
+    //         }
+    //     }
+    // })
+}
+const submitFun = (type: any) => {
+    console.log(9999)
+    //  type 1 提交 2 存草稿
+    addAndEditForm.mainFileList = [
+        ...addAndEditForm.mainFileList,
+        ...addAndEditForm.mainFileTempList,
+    ]
+    addAndEditForm.detailsFileList = [
+        ...addAndEditForm.detailsFileList,
+        ...addAndEditForm.detailsFileTempList,
+    ]
+
+    addAndEditFormRef.value.validate(async (valid: any) => {
         if (valid) {
-            if (
-                equipmentDeploymentParams.value.deviceTypeList &&
-                equipmentDeploymentParams.value.deviceTypeList.length > 0
-            ) {
-                equipmentDeploymentParams.value.typeId =
-                    equipmentDeploymentParams.value.deviceTypeList[3]
-            } else {
-                equipmentDeploymentParams.value.typeId = ''
-            }
-            if (mainFileList.value.length == 0 || mainFileList.value.length > 6) {
-                ElMessage({ type: 'error', message: '主展示图不得少于1张，不得多于6张' })
-                return
-            }
-            if (detailsFileList.value.length == 0 || detailsFileList.value.length > 6) {
-                ElMessage({ type: 'error', message: '详情展示图不得少于1张，不得多于6张' })
-                return
-            }
-            let param = {
-                ...equipmentDeploymentParams.value,
-                mainFileList: mainFileList.value, //主展示
-                detailsFileList: detailsFileList.value, //详情展示
-                insurancePdf: insurancePdf.value, //合格证
-                examinationPdf: examinationPdf.value, //检测证明
-            }
-            param.maStatus == 0 ? (param.maStatus = 1) : param.maStatus
-            if (
-                equipmentDeploymentParams.value.maId &&
-                equipmentDeploymentParams.value.maId != ''
-            ) {
-                const res: any = await equipmentEditApi(param)
-                if (res.code === 200) {
-                    ElMessage({
-                        type: 'success',
-                        message: '保存成功',
+            let isDescription = false
+            descriptionFormList.value.forEach((e: any, index: number) => {
+                e.insurancePdfs = [...e.insurancePdfs, ...e.insuranceATempPdf]
+                e.examinationPdfs = [...e.examinationPdfs, ...e.examinationTempPdf]
+                addAndEditForm.insurancePdfs[index] = e.insurancePdfs
+                addAndEditForm.examinationPdfs[index] = e.examinationPdfs
+            })
+
+            for (let index = 0; index < descriptionFormList.value.length; index++) {
+                try {
+                    const result = await new Promise((resolve) => {
+                        descriptionFormRefList.value[index].validate((res: any) => {
+                            resolve(res)
+                        })
                     })
-                    dialogFormVisibleSettlein.value = false
-                    getList()
-                }
-            } else {
-                const res: any = await equipmentAddApi(param)
-                if (res.code === 200) {
-                    ElMessage({
-                        type: 'success',
-                        message: '保存成功',
-                    })
-                    dialogFormVisibleSettlein.value = false
-                    getList()
-                }
+
+                    if (!result) {
+                        isDescription = true
+                        throw new Error('表单校验失败')
+                    }
+                } catch (error) {}
             }
+
+            if (isDescription) return
+
+            addAndEditForm.typeId =
+                addAndEditForm.deviceTypeList[addAndEditForm.deviceTypeList.length - 1]
+
+            const SEND_FUN_API = type == 1 ? equipmentAddApi : insertDraftApi
+            const res: any = await SEND_FUN_API(addAndEditForm)
+            console.log(res, '提交结果---')
+            if (res.code === 200) {
+                ElMessage({
+                    type: 'success',
+                    message: '保存成功',
+                    duration: 1000,
+                })
+                dialogFormVisibleSettlein.value = false
+                getList()
+            }
+
+            // 组装参数
+        } else {
+            console.log('校验失败')
         }
     })
 }
 //草稿
 const saveTemp = async () => {
-    if (
-        equipmentDeploymentParams.value.deviceTypeList &&
-        equipmentDeploymentParams.value.deviceTypeList.length > 0
-    ) {
-        equipmentDeploymentParams.value.typeId = equipmentDeploymentParams.value.deviceTypeList[3]
-    } else {
-        equipmentDeploymentParams.value.typeId = ''
-    }
-    if (
-        equipmentDeploymentParams.value.deviceName == '' ||
-        equipmentDeploymentParams.value.companyId == ''
-    ) {
-        ElMessage({ type: 'error', message: '保存草稿请至少填写装备名称及所属公司！' })
-        return
-    }
-    // if(mainFileList.value.length==0||mainFileList.value.length>6){
-    //     ElMessage({type: 'error',message: '主展示图不得少于1张，不得多于6张'})
-    //     return
-    // }
-    // if(detailsFileList.value.length==0||detailsFileList.value.length>6){
-    //     ElMessage({type: 'error',message: '详情展示图不得少于1张，不得多于6张'})
-    //     return
-    // }
-    let param = {
-        ...equipmentDeploymentParams.value,
-        mainFileList: mainFileList.value, //主展示
-        detailsFileList: detailsFileList.value, //详情展示
-        insurancePdf: insurancePdf.value, //合格证
-        examinationPdf: examinationPdf.value, //检测证明
-    }
-    const res: any = await insertDraftApi(param)
-    if (res.code === 200) {
-        ElMessage({
-            type: 'success',
-            message: '保存成功',
-        })
-        dialogFormVisibleSettlein.value = false
-        // ruleFormRef.value.resetField()
-        getList()
-    }
+    submitFun(2)
+
+    if (true) return
 }
+
 /* 关闭按钮 */
 const closeDialogBtn = () => {
-    ruleFormRef.value.resetFields()
+    // ruleFormRef.value.resetFields()
     dialogFormVisibleSettlein.value = false
 }
 /* 关闭对话框 */
 const handleClose = (done: () => void) => {
-    ruleFormRef.value.resetFields()
+    // ruleFormRef.value.resetFields()
     done()
     dialogFormVisibleSettlein.value = false
 }
@@ -711,7 +756,7 @@ const handleRemove = (list: any, index: Number) => {
     list.splice(index, 1)
 }
 
-const onTempDownLoad = ()=>{
+const onTempDownLoad = () => {
     ElMessageBox.confirm('是否确定下载', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -722,9 +767,158 @@ const onTempDownLoad = ()=>{
         })
         .catch(() => {})
 }
-const onBatchUpload = ()=>{
+const onBatchUpload = () => {
     console.log('下载')
 }
+
+const onAddDescription = () => {
+    const newId = Date.now()
+    descriptionFormList.value.push({
+        newId,
+        insurancePdf: [],
+        insurancePdfs: [],
+        insuranceATempPdf: [],
+        examinationPdf: [],
+        examinationPdfs: [],
+        examinationTempPdf: [],
+    })
+}
+
+const addAndEditForm = reactive<any>({
+    deviceName: '',
+    deviceTypeList: [],
+    deviceCount: 1,
+    unitName: '',
+    code: '',
+    brand: '',
+    typeId: '',
+    companyId: '',
+    productionDate: '',
+    dayLeasePrice: '',
+    person: '',
+    personPhone: '',
+    deviceWeight: '',
+    checkDate: '',
+    checkCycle: '',
+    mainFileList: [],
+    detailsFileList: [],
+    mainFileTempList: [],
+    detailsFileTempList: [],
+    insurancePdf: [],
+    examinationPdf: [],
+    insurancePdfs: [],
+    examinationPdfs: [],
+})
+const addAndEditFormTemp = reactive<any>({
+    deviceName: '',
+    deviceTypeList: [],
+    deviceCount: 1,
+    unitName: '',
+    code: '',
+    brand: '',
+    typeId: '',
+    companyId: '',
+    productionDate: '',
+    dayLeasePrice: '',
+    person: '',
+    personPhone: '',
+    deviceWeight: '',
+    checkDate: '',
+    checkCycle: '',
+    mainFileList: [],
+    detailsFileList: [],
+    mainFileTempList: [],
+    detailsFileTempList: [],
+    insurancePdf: [],
+    examinationPdf: [],
+    insurancePdfs: [],
+    examinationPdfs: [],
+})
+const uploadUrl = import.meta.env.VITE_API_URL + '/file/upload'
+const addAndEditFormRef = ref()
+// 装备描述表单
+const descriptionFormList = ref<any>([
+    {
+        newId: Date.now(),
+        insurancePdf: [],
+        insurancePdfs: [],
+        insuranceATempPdf: [],
+        examinationPdf: [],
+        examinationPdfs: [],
+        examinationTempPdf: [],
+    },
+])
+const descriptionFormRefList = ref<any>([])
+// 移除
+const onDeleteDescription = (index: number) => {
+    descriptionFormList.value.splice(index, 1)
+    descriptionFormRefList.value.splice(index, 1)
+}
+
+const onMainFileChange = (fileList: any) => {
+    addAndEditForm.mainFileTempList = []
+    const fileListTemp = fileList.map((e: any) => {
+        return {
+            fileName: e.name,
+            fileUrl: e.url,
+        }
+    })
+    addAndEditFormRef.value.clearValidate('mainFileList')
+    addAndEditForm.mainFileTempList.push(...fileListTemp)
+}
+const onDetailsFileChange = (fileList: any) => {
+    addAndEditForm.detailsFileTempList = []
+    const fileListTemp = fileList.map((e: any) => {
+        return {
+            fileName: e.name,
+            fileUrl: e.url,
+        }
+    })
+    addAndEditFormRef.value.clearValidate('detailsFileList')
+    addAndEditForm.detailsFileTempList.push(...fileListTemp)
+}
+
+const onInsurancePdfChange = (fileList: any, index: number) => {
+    descriptionFormList.value[index].insuranceATempPdf = []
+    const fileListTemp = fileList.map((e: any) => {
+        return {
+            fileName: e.name,
+            fileUrl: e.url,
+        }
+    })
+    descriptionFormRefList.value[index].clearValidate('insurancePdf')
+    descriptionFormList.value[index].insuranceATempPdf.push(...fileListTemp)
+}
+const onExaminationPdfChange = (fileList: any, index: number) => {
+    descriptionFormList.value[index].examinationTempPdf = []
+    const fileListTemp = fileList.map((e: any) => {
+        return {
+            fileName: e.name,
+            fileUrl: e.url,
+        }
+    })
+    descriptionFormRefList.value[index].clearValidate('examinationPdf')
+    descriptionFormList.value[index].examinationTempPdf.push(...fileListTemp)
+}
+
+// const onDeleteImgInDetails = () => {}
+
+const onDeleteImgInMain = (index: any) => {
+    addAndEditForm.mainFileList.splice(index, 1)
+}
+const onDeleteImgInDetails = (index: any) => {
+    addAndEditForm.detailsFileList.splice(index, 1)
+}
+const onDeleteImgInsurancePdf = (j: any, index: any) => {
+    descriptionFormList.value[j].insurancePdfs.splice(index, 1)
+}
+const onDeleteImgExaminationPdf = (j: any, index: any) => {
+    descriptionFormList.value[j].examinationPdfs.splice(index, 1)
+}
+
+const onDialogClose = () => {
+    addAndEditFormRef.value.resetFields()
+}
 </script>
 
 <template>
@@ -826,19 +1020,12 @@ const onBatchUpload = ()=>{
                         @click="handleUpdateUpDown(null, 1)"
                         >批量下架</el-button
                     >
-                    <el-button
-                        class="primary-lease"
-                        type="primary"
-                        @click="onTempDownLoad()"
+                    <el-button class="primary-lease" type="primary" @click="onTempDownLoad()"
                         >模板下载</el-button
                     >
-                    <el-button
-                        class="primary-lease"
-                        type="primary"
-                        @click="onBatchUpload()"
+                    <el-button class="primary-lease" type="primary" @click="onBatchUpload()"
                         >批量上传</el-button
                     >
-
                 </el-form-item>
             </el-col>
         </el-row>
@@ -940,10 +1127,15 @@ const onBatchUpload = ()=>{
         destroy-on-close
         :close-on-click-modal="false"
         :before-close="handleClose"
+        @close="onDialogClose"
     >
-        <el-row :gutter="10" class="mb8" style="display: flex; align-items: center">
+        <el-row
+            :gutter="20"
+            class="mb8"
+            style="display: flex; justify-content: flex-end; align-items: center"
+        >
             <el-button type="primary" class="primary-lease" @click="closeDialogBtn">
-                关 闭
+                关闭
             </el-button>
             <el-button
                 type="primary"
@@ -953,7 +1145,7 @@ const onBatchUpload = ()=>{
                     !equipmentDeploymentParams.maStatus || equipmentDeploymentParams.maStatus == 0
                 "
             >
-                草 稿
+                保存草稿
             </el-button>
             <el-button
                 type="primary"
@@ -961,488 +1153,416 @@ const onBatchUpload = ()=>{
                 @click="submitBtn"
                 v-if="!disabledForm || isEditDisabled"
             >
-                提 交
+                提交
             </el-button>
         </el-row>
 
-        <div class="title">
+        <!-- <div class="title">
             <span class="title-sign"></span>
             <span class="title-text">基本信息</span>
-        </div>
+        </div> -->
+        <TitleTip :titleText="`基本信息`" />
         <el-form
-            label-width="160"
-            ref="ruleFormRef"
-            :model="equipmentDeploymentParams"
+            label-width="140px"
+            ref="addAndEditFormRef"
+            label-position="right"
+            :model="addAndEditForm"
             :rules="equipRules"
             :disabled="disabledForm"
         >
-            <el-form-item label="装备名称：" prop="deviceName">
-                <el-input
-                    autocomplete="off"
-                    style="width: 850px"
-                    maxlength="30"
-                    v-model="equipmentDeploymentParams.deviceName"
-                    clearable
-                />
-            </el-form-item>
-            <el-row>
-                <el-form-item label="装备类目：" prop="deviceTypeList">
-                    <el-cascader
-                        v-model="equipmentDeploymentParams.deviceTypeList"
-                        :show-all-levels="true"
-                        :options="deviceTypeTree"
-                        :props="partTypeTreeProps"
-                        filterable
-                        clearable
-                        collapse-tags
-                        style="width: 350px"
-                        placeholder="请选择装备类目"
-                        ref="dialogTypeCascader"
-                        @change="dialogTypeChange"
-                    ></el-cascader>
-                </el-form-item>
-                <!-- <el-form-item label="所属公司：" prop="companyId">
-                    <el-select
-                        v-model="equipmentDeploymentParams.companyId"
-                        placeholder="请选择所属公司"
-                        clearable
-                        style="width: 350px"
-                    >
-                        <el-option
-                            v-for="item in companyDataList"
-                            :key="item.companyId"
-                            :label="item.companyName"
-                            :value="item.companyId"
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item label="装备名称：" prop="deviceName">
+                        <el-input
+                            autocomplete="off"
+                            style="width: 850px"
+                            maxlength="30"
+                            v-model="addAndEditForm.deviceName"
+                            clearable
                         />
-                    </el-select>
-                </el-form-item> -->
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="装备类目：" prop="deviceTypeList">
+                        <el-cascader
+                            v-model="addAndEditForm.deviceTypeList"
+                            :show-all-levels="true"
+                            :options="deviceTypeTree"
+                            :props="partTypeTreeProps"
+                            filterable
+                            clearable
+                            collapse-tags
+                            style="width: 350px"
+                            placeholder="请选择装备类目"
+                            ref="dialogTypeCascader"
+                            @change="dialogTypeChange"
+                        ></el-cascader>
+                    </el-form-item>
+                </el-col>
             </el-row>
-            <el-row>
-                <el-form-item label="设备数量：" prop="deviceCount">
-                    <el-input
-                        @input="
-                            (v) =>
-                                (equipmentDeploymentParams.deviceCount = v.replace(/[^\d.]/g, ''))
-                        "
-                        v-model="equipmentDeploymentParams.deviceCount"
-                        placeholder="请输入设备数量"
-                        clearable
-                        maxlength="20"
-                        style="width: 350px"
-                        :disabled="countDisabled"
-                    />
-                </el-form-item>
-                <el-form-item label="装备单位：" prop="unitName">
-                    <el-input
-                        autocomplete="off"
-                        style="width: 350px"
-                        maxlength="20"
-                        v-model="equipmentDeploymentParams.unitName"
-                        clearable
-                    />
-                </el-form-item>
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item label="装备单位：" prop="unitName">
+                        <el-input
+                            autocomplete="off"
+                            style="width: 350px"
+                            maxlength="20"
+                            v-model="addAndEditForm.unitName"
+                            clearable
+                            :disabled="isDisabled"
+                        />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="装备品牌" prop="brand">
+                        <el-input
+                            v-model="addAndEditForm.brand"
+                            autocomplete="off"
+                            maxlength="20"
+                            style="width: 350px"
+                            clearable
+                        />
+                    </el-form-item>
+                </el-col>
             </el-row>
-            <el-row>
-                <!-- <el-form-item label="装备编号" prop="code">
-                    <el-input
-                        autocomplete="off"
-                        style="width: 350px"
-                        maxlength="40"
-                        v-model="equipmentDeploymentParams.code"
-                        clearable
-                    />
-                </el-form-item> -->
-                <el-form-item label="装备品牌" prop="brand">
-                    <el-input
-                        v-model="equipmentDeploymentParams.brand"
-                        autocomplete="off"
-                        maxlength="20"
-                        style="width: 350px"
-                        clearable
-                    />
-                </el-form-item>
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item label="出厂日期：" prop="productionDate">
+                        <el-date-picker
+                            v-model="addAndEditForm.productionDate"
+                            placeholder="请选择出厂日期"
+                            value-format="YYYY-MM-DD"
+                            type="date"
+                            style="width: 350px"
+                        >
+                        </el-date-picker>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="租赁价格(天/元)：" prop="dayLeasePrice">
+                        <el-input
+                            @input="
+                                (v) => (addAndEditForm.dayLeasePrice = v.replace(/[^\d.]/g, ''))
+                            "
+                            v-model="addAndEditForm.dayLeasePrice"
+                            placeholder="请输入租赁价格"
+                            clearable
+                            maxlength="20"
+                            :disabled="isDisabled"
+                            style="width: 350px"
+                        />
+                    </el-form-item>
+                </el-col>
             </el-row>
-            <el-row>
-                <el-form-item label="出厂日期：" prop="productionDate">
-                    <el-date-picker
-                        v-model="equipmentDeploymentParams.productionDate"
-                        placeholder="请选择出厂日期"
-                        value-format="YYYY-MM-DD"
-                        type="date"
-                        style="width: 350px"
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item label="联系人：" prop="person">
+                        <el-input
+                            v-model="addAndEditForm.person"
+                            placeholder="请输入联系人"
+                            clearable
+                            maxlength="20"
+                            style="width: 350px"
+                        />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="联系电话：" prop="personPhone">
+                        <el-input
+                            v-model="addAndEditForm.personPhone"
+                            placeholder="请输入联系电话"
+                            clearable
+                            maxlength="20"
+                            style="width: 350px"
+                        />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item label="校验日期：" prop="checkDate">
+                        <el-date-picker
+                            v-model="addAndEditForm.checkDate"
+                            placeholder="请选择校验日期"
+                            value-format="YYYY-MM-DD"
+                            type="date"
+                            style="width: 350px"
+                        >
+                        </el-date-picker>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="校验周期：" prop="checkCycle">
+                        <el-input
+                            @input="(v) => (addAndEditForm.checkCycle = v.replace(/[^\d.]/g, ''))"
+                            v-model="addAndEditForm.checkCycle"
+                            placeholder="请输入校验周期（数字）"
+                            clearable
+                            maxlength="20"
+                            style="width: 350px"
+                        />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item label="整机重量(KG)：">
+                        <el-input
+                            @input="(v) => (addAndEditForm.deviceWeight = v.replace(/[^\d.]/g, ''))"
+                            v-model="addAndEditForm.deviceWeight"
+                            placeholder="请输入整机重量"
+                            clearable
+                            maxlength="20"
+                            style="width: 350px"
+                        />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <TitleTip :titleText="`装备图片`" />
+            <el-row :gutter="20" v-if="!isViewForm">
+                <el-col :span="24">
+                    <el-form-item label="1" style="margin-bottom: 0" class="upload-tip">
+                        支持格式：.jpg、.png 单个文件大小不能超过2M
+                        <div class="tipBox">
+                            *注:图片排序为平台展示顺序，不得少于1张，不得多于6张
+                        </div>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="24">
+                    <el-form-item style="font-weight: bold" label="主展示图：" prop="mainFileList">
+                        <div class="img-list" v-if="addAndEditForm.mainFileList.length > 0">
+                            <div
+                                v-for="(j, i) in addAndEditForm.mainFileList"
+                                :key="j.fileUrl"
+                                class="img-items"
+                            >
+                                <img :src="j.fileUrl" alt="" />
+
+                                <div class="mask-img" v-if="!isViewForm">
+                                    <el-icon class="delete-icon" @click="onDeleteImgInMain(i)"
+                                        ><DeleteFilled
+                                    /></el-icon>
+                                </div>
+                            </div>
+                        </div>
+                        <UploadComponentNew
+                            v-if="!isViewForm"
+                            :maxSize="2"
+                            :max-limit="6"
+                            width="100px"
+                            height="100px"
+                            :actionUrl="uploadUrl"
+                            :autoUpload="true"
+                            :multiple="true"
+                            :minLimit="addAndEditForm.mainFileList.length"
+                            listType="picture-card"
+                            :acceptTypeList="['.jpg', '.png']"
+                            @onFileChange="onMainFileChange"
+                        >
+                            <template v-slot:default>
+                                <el-icon size="42" color="#aaa"><Plus /></el-icon>
+                            </template>
+                        </UploadComponentNew>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20" v-if="!isViewForm">
+                <el-col :span="24">
+                    <el-form-item label="1" style="margin-bottom: 0" class="upload-tip">
+                        支持格式：.jpg、.png 单个文件大小不能超过2M
+                        <div class="tipBox">
+                            *注:图片排序为平台展示顺序，不得少于1张，不得多于6张
+                        </div>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="24">
+                    <el-form-item
+                        style="font-weight: bold"
+                        label="详情页展示图："
+                        prop="detailsFileList"
                     >
-                    </el-date-picker>
-                </el-form-item>
-                <el-form-item label="租赁价格(天/元)：" prop="dayLeasePrice">
-                    <el-input
-                        @input="
-                            (v) =>
-                                (equipmentDeploymentParams.dayLeasePrice = v.replace(/[^\d.]/g, ''))
-                        "
-                        v-model="equipmentDeploymentParams.dayLeasePrice"
-                        placeholder="请输入租赁价格"
-                        clearable
-                        maxlength="20"
-                        style="width: 350px"
-                    />
-                </el-form-item>
-            </el-row>
-            <el-row>
-                <el-form-item label="联系人：" prop="person">
-                    <el-input
-                        v-model="equipmentDeploymentParams.person"
-                        placeholder="请输入联系人"
-                        clearable
-                        maxlength="20"
-                        style="width: 350px"
-                    />
-                </el-form-item>
-                <el-form-item label="联系电话：" prop="personPhone">
-                    <el-input
-                        v-model="equipmentDeploymentParams.personPhone"
-                        placeholder="请输入联系电话"
-                        clearable
-                        maxlength="20"
-                        style="width: 350px"
-                    />
-                </el-form-item>
-            </el-row>
-            <el-row>
-                <el-form-item label="校验日期：" prop="checkDate">
-                    <el-date-picker
-                        v-model="equipmentDeploymentParams.checkDate"
-                        placeholder="请选择校验日期"
-                        value-format="YYYY-MM-DD"
-                        type="date"
-                        style="width: 350px"
-                    >
-                    </el-date-picker>
-                </el-form-item>
-                <el-form-item label="校验周期：" prop="checkCycle">
-                    <el-input
-                        @input="
-                            (v) =>
-                                (equipmentDeploymentParams.checkCycle = v.replace(/[^\d.]/g, ''))
-                        "
-                        v-model="equipmentDeploymentParams.checkCycle"
-                        placeholder="请输入校验周期（数字）"
-                        clearable
-                        maxlength="20"
-                        style="width: 350px"
-                    />
-                </el-form-item>
-            </el-row>
-            <el-row>
-                <el-form-item label="整机重量(KG)：">
-                    <el-input
-                        @input="
-                            (v) =>
-                                (equipmentDeploymentParams.deviceWeight = v.replace(/[^\d.]/g, ''))
-                        "
-                        v-model="equipmentDeploymentParams.deviceWeight"
-                        placeholder="请输入整机重量"
-                        clearable
-                        maxlength="20"
-                        style="width: 350px"
-                    />
-                </el-form-item>
-            </el-row>
+                        <div class="img-list" v-if="addAndEditForm.detailsFileList.length > 0">
+                            <div
+                                v-for="(j, i) in addAndEditForm.detailsFileList"
+                                :key="j.fileUrl"
+                                class="img-items"
+                            >
+                                <img :src="j.fileUrl" alt="" />
 
-            <!-- <el-form-item label="检测信息" prop="detectionList">
-                <uploadComponent
-                    v-if="!disabledForm || isEditDisabled"
-                    :maxLimit="1"
-                    listType="picture-card"
-                    :acceptTypeList="['.pdf', '.jpg', '.jpeg', '.png']"
-                    width="120px"
-                    height="120px"
-                    :autoUpload="true"
-                    :successResultCallBack="successResultCallBackFnjc">
-                    <template v-slot:default>
-                        <el-icon size="20" color="#aaa"><Plus /></el-icon>
-                    </template>
-                </uploadComponent>
-
-                <template v-else>
-                    <a
-                        style="color: rgb(97, 226, 153); cursor: pointer"
-                        target="_blank"
-                        :href="equipmentDeploymentParams.jcUrl">
-                        查 看 附 件
-                    </a>
-                </template>
-            </el-form-item>
-            <el-form-item label="保险信息" prop="insureList">
-                <uploadComponent
-                    v-if="!disabledForm || isEditDisabled"
-                    :maxLimit="1"
-                    listType="picture-card"
-                    :acceptTypeList="['.pdf', '.jpg', '.jpeg', '.png']"
-                    width="120px"
-                    height="120px"
-                    :autoUpload="true"
-                    :successResultCallBack="successResultCallBackFnbs">
-                    <template v-slot:default>
-                        <el-icon size="20" color="#aaa"><Plus /></el-icon>
-                    </template>
-                </uploadComponent>
-
-                <template v-else>
-                    <a
-                        style="color: rgb(97, 226, 153); cursor: pointer"
-                        target="_blank"
-                        :href="equipmentDeploymentParams.bsUrl">
-                        查 看 附 件
-                    </a>
-                </template>
-            </el-form-item>
-            <el-form-item label="设备图片" prop="picList">
-                <uploadComponent
-                    v-if="!disabledForm && isEditDisabled"
-                    :maxLimit="8"
-                    listType="picture-card"
-                    :acceptTypeList="['.jpg', '.jpeg', '.png']"
-                    width="120px"
-                    height="120px"
-                    :successResultCallBack="successResultCallBackFnDevicePic"
-                    :autoUpload="true"
-                    :multiple="true">
-                    <template v-slot:default>
-                        <el-icon size="48" color="#aaa"><Plus /></el-icon>
-                    </template>
-                </uploadComponent>
-                <span v-if="!disabledForm">
-                    至少一张，最多八张
-                    设备图片格式为jpg、png、和gif，文件不得超过5M，否则将无法上传。请从前后左右四个方向以及从主要工作部件，内部结构等方面展示设备
-                </span>
-
-                <template v-if="disabledForm && !isEditDisabled">
-                    <template v-if="equipmentDeploymentParams.devPicList.length > 0">
-                        <el-image
-                            v-for="item in equipmentDeploymentParams.devPicList"
-                            :key="item"
-                            style="width: 120px; height: 120px; margin-right: 8px"
-                            :src="item"
-                            fit="cover" />
-                    </template>
-                    <template v-else>暂无图片</template>
-                </template>
-            </el-form-item> -->
+                                <div class="mask-img" v-if="!isViewForm">
+                                    <el-icon class="delete-icon" @click="onDeleteImgInDetails(i)"
+                                        ><DeleteFilled
+                                    /></el-icon>
+                                </div>
+                            </div>
+                        </div>
+                        <UploadComponentNew
+                            v-if="!isViewForm"
+                            :maxSize="2"
+                            :max-limit="6"
+                            width="100px"
+                            height="100px"
+                            :actionUrl="uploadUrl"
+                            :autoUpload="true"
+                            :multiple="true"
+                            :minLimit="addAndEditForm.detailsFileList.length"
+                            listType="picture-card"
+                            :acceptTypeList="['.jpg', '.png']"
+                            @onFileChange="onDetailsFileChange"
+                        >
+                            <template v-slot:default>
+                                <el-icon size="42" color="#aaa"><Plus /></el-icon>
+                            </template>
+                        </UploadComponentNew>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <TitleTip :titleText="`装备证书`" />
+            <el-row :gutter="20" v-if="!disabledForm">
+                <el-col :span="24">
+                    <el-button class="primary-lease" type="primary" @click="onAddDescription">
+                        添加装备证书
+                    </el-button>
+                </el-col>
+            </el-row>
         </el-form>
-        <div class="title">
-            <span class="title-sign"></span>
-            <span class="title-text">装备图片</span>
-        </div>
-        <div class="uploadBox">
-            <div class="labelBox">
-                <div style="margin-left: 20px">
-                    <span style="color: red">*</span>
-                    <span style="font-size: 14px; color: #606266; font-weight: 600"
-                        >主展示图:
-                    </span>
-                </div>
-                <div style="margin-left: 20px">
-                    <el-upload
-                        ref="upload"
-                        :limit="6"
-                        :headers="headerInfo"
-                        :action="actionUrl"
-                        :show-file-list="false"
-                        accept=".png, .jpg, .jpeg"
-                        :on-success="handleFileSuccess"
-                        :auto-upload="true"
-                        :before-upload="beforeUpload"
-                        :on-error="uploadError"
-                    >
-                        <el-button icon="FolderOpened">上传文件</el-button>
-                    </el-upload>
-                </div>
-                <div style="color: #999; font-size: 12px; margin-left: 20px">
-                    支持格式：.jpg .png，单个文件大小不能超过2M
-                </div>
-            </div>
-            <div class="imgsBox">
-                <!-- <div class="imgItem" v-if="mainFileList.length==0">
-                    <div class="icon-list" style="left: 60px;">
-                        <span class="imgItem__icon" >
-                            <i class="el-icon-plus"/>
-                        </span>
-                    </div>
-                </div> -->
-                <div class="imgItem" v-for="(item, index) in mainFileList" :key="index">
-                    <img class="picture-card" :src="item.fileUrl" alt="" />
-                    <div class="icon-list">
-                        <span class="imgItem__icon hide" @click="handleDownload(item)">
-                            <el-icon :size="20"><Download /></el-icon>
-                        </span>
-                        <span class="imgItem__icon hide" @click="picturePreview(item)">
-                            <el-icon :size="20"><ZoomIn /></el-icon>
-                        </span>
-                        <span class="imgItem__icon hide" @click="handleRemove(mainFileList, index)">
-                            <el-icon :size="20"><Delete /></el-icon>
-                        </span>
-                    </div>
-                    <p class="file-name">{{ item.fileName }}</p>
-                </div>
-            </div>
-            <div class="tipBox">*注:图片排序为平台展示顺序，不得少于1张，不得多于6张</div>
-        </div>
-        <div class="uploadBox">
-            <div class="labelBox">
-                <div style="margin-left: 20px">
-                    <span style="color: red">*</span>
-                    <span style="font-size: 14px; color: #606266; font-weight: 600"
-                        >详情页展示图:
-                    </span>
-                </div>
-                <div style="margin-left: 20px">
-                    <el-upload
-                        ref="upload"
-                        :limit="6"
-                        :headers="headerInfo"
-                        :action="actionUrl"
-                        :show-file-list="false"
-                        accept=".png, .jpg, .jpeg"
-                        :on-success="handleFileSuccess2"
-                        :auto-upload="true"
-                        :before-upload="beforeUpload"
-                        :on-error="uploadError"
-                    >
-                        <el-button icon="FolderOpened">上传文件</el-button>
-                    </el-upload>
-                </div>
-                <div style="color: #999; font-size: 12px; margin-left: 20px">
-                    支持格式：.jpg .png，单个文件大小不能超过2M
-                </div>
-            </div>
-            <div class="imgsBox">
-                <div class="imgItem" v-for="(item, index) in detailsFileList" :key="index">
-                    <img class="picture-card" :src="item.fileUrl" alt="" />
-                    <div class="icon-list">
-                        <span class="imgItem__icon hide" @click="handleDownload(item)">
-                            <el-icon :size="20"><Download /></el-icon>
-                        </span>
-                        <span class="imgItem__icon hide" @click="picturePreview(item)">
-                            <el-icon :size="20"><ZoomIn /></el-icon>
-                        </span>
-                        <span
-                            class="imgItem__icon hide"
-                            @click="handleRemove(detailsFileList, index)"
-                        >
-                            <el-icon :size="20"><Delete /></el-icon>
-                        </span>
-                    </div>
-                    <p class="file-name">{{ item.fileName }}</p>
-                </div>
-            </div>
-            <div class="tipBox">*注:图片排序为平台展示顺序，不得少于1张，不得多于6张</div>
-        </div>
-        <div class="title">
-            <span class="title-sign"></span>
-            <span class="title-text">装备证书</span>
-        </div>
-        <div class="uploadBox">
-            <div class="labelBox">
-                <div style="margin-left: 20px">
-                    <span style="color: red">*</span>
-                    <span style="font-size: 14px; color: #606266; font-weight: 600">合格证: </span>
-                </div>
-                <div style="margin-left: 20px">
-                    <el-upload
-                        ref="upload"
-                        :limit="6"
-                        :headers="headerInfo"
-                        :action="actionUrl"
-                        :show-file-list="false"
-                        accept=".png, .jpg, .jpeg"
-                        :on-success="handleFileSuccess3"
-                        :auto-upload="true"
-                        :before-upload="beforeUpload"
-                        :on-error="uploadError"
-                    >
-                        <el-button icon="FolderOpened">上传文件</el-button>
-                    </el-upload>
-                </div>
-                <div style="color: #999; font-size: 12px; margin-left: 20px">
-                    支持格式：.jpg .png，单个文件大小不能超过2M
-                </div>
-            </div>
-            <div class="imgsBox">
-                <div class="imgItem" v-for="(item, index) in insurancePdf" :key="index">
-                    <img class="picture-card" :src="item.fileUrl" alt="" />
-                    <div class="icon-list">
-                        <span class="imgItem__icon hide" @click="handleDownload(item)">
-                            <el-icon :size="20"><Download /></el-icon>
-                        </span>
-                        <span class="imgItem__icon hide" @click="picturePreview(item)">
-                            <el-icon :size="20"><ZoomIn /></el-icon>
-                        </span>
-                        <span class="imgItem__icon hide" @click="handleRemove(insurancePdf, index)">
-                            <el-icon :size="20"><Delete /></el-icon>
-                        </span>
-                    </div>
-                    <p class="file-name">{{ item.fileName }}</p>
-                </div>
-            </div>
-        </div>
-        <div class="uploadBox">
-            <div class="labelBox">
-                <div style="margin-left: 20px">
-                    <span style="color: red">*</span>
-                    <span style="font-size: 14px; color: #606266; font-weight: 600"
-                        >检测证明:
-                    </span>
-                </div>
-                <div style="margin-left: 20px">
-                    <el-upload
-                        ref="upload"
-                        :limit="6"
-                        :headers="headerInfo"
-                        :action="actionUrl"
-                        :show-file-list="false"
-                        accept=".png, .jpg, .jpeg"
-                        :on-success="handleFileSuccess4"
-                        :auto-upload="true"
-                        :before-upload="beforeUpload"
-                        :on-error="uploadError"
-                    >
-                        <el-button icon="FolderOpened">上传文件</el-button>
-                    </el-upload>
-                </div>
-                <div style="color: #999; font-size: 12px; margin-left: 20px">
-                    支持格式：.jpg .png，单个文件大小不能超过2M
-                </div>
-            </div>
-            <div class="imgsBox">
-                <div class="imgItem" v-for="(item, index) in examinationPdf" :key="index">
-                    <img class="picture-card" :src="item.fileUrl" alt="" />
-                    <div class="icon-list">
-                        <span class="imgItem__icon hide" @click="handleDownload(item)">
-                            <el-icon :size="20"><Download /></el-icon>
-                        </span>
-                        <span class="imgItem__icon hide" @click="picturePreview(item)">
-                            <el-icon :size="20"><ZoomIn /></el-icon>
-                        </span>
-                        <span
-                            class="imgItem__icon hide"
-                            @click="handleRemove(examinationPdf, index)"
-                        >
-                            <el-icon :size="20"><Delete /></el-icon>
-                        </span>
-                    </div>
-                    <p class="file-name">{{ item.fileName }}</p>
-                </div>
-            </div>
-        </div>
 
-        <!-- <template #footer>
-            <span class="dialog-footer">
-                <el-button type="primary" @click="closeDialogBtn">关 闭</el-button>
-                <el-button @click="submitBtn" v-if="!disabledForm || isEditDisabled" type="success">
-                    提 交
-                </el-button>
-            </span>
-        </template> -->
+        <el-form
+            label-width="140px"
+            label-position="right"
+            :rules="descriptionRules"
+            v-for="(item, index) in descriptionFormList"
+            :ref="
+                ($event:any) => {
+                    descriptionFormRefList[index] = $event
+                }
+            "
+            :model="item"
+            :key="item.newId"
+        >
+            <el-row :gutter="20" v-if="!isViewForm">
+                <el-col :span="24">
+                    <el-form-item label="1" style="margin-bottom: 0" class="upload-tip">
+                        支持格式：.jpg、.png 单个文件大小不能超过2M
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="24">
+                    <el-form-item style="font-weight: bold" label="合格证：" prop="insurancePdfs">
+                        <div class="img-list" v-if="addAndEditForm.detailsFileList.length > 0">
+                            <div
+                                v-for="(j, i) in item.insurancePdfs"
+                                :key="j.fileUrl"
+                                class="img-items"
+                            >
+                                <img :src="j.fileUrl" alt="" />
+
+                                <div class="mask-img" v-if="!isViewForm">
+                                    <el-icon
+                                        class="delete-icon"
+                                        @click="onDeleteImgInsurancePdf(index, i)"
+                                        ><DeleteFilled
+                                    /></el-icon>
+                                </div>
+                            </div>
+                        </div>
+                        <UploadComponentNew
+                            v-if="!isViewForm"
+                            :actionUrl="uploadUrl"
+                            :maxSize="2"
+                            :max-limit="4"
+                            width="100px"
+                            height="100px"
+                            :currentIndex="index"
+                            :autoUpload="true"
+                            :multiple="true"
+                            :minLimit="item.insurancePdf.length"
+                            listType="picture-card"
+                            :acceptTypeList="['.jpg', '.png']"
+                            @onFileChange="onInsurancePdfChange"
+                        >
+                            <template v-slot:default>
+                                <el-icon size="42" color="#aaa"><Plus /></el-icon>
+                            </template>
+                        </UploadComponentNew>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20" v-if="!isViewForm">
+                <el-col :span="24">
+                    <el-form-item label="1" style="margin-bottom: 0" class="upload-tip">
+                        支持格式：.jpg、.png 单个文件大小不能超过2M,
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row
+                :gutter="20"
+                :style="
+                    index != descriptionFormList.length - 1 ? 'border-bottom: 1px solid #ccc' : ''
+                "
+            >
+                <el-col :span="20">
+                    <el-form-item
+                        style="font-weight: bold"
+                        label="检测证明："
+                        prop="examinationPdfs"
+                    >
+                        <div class="img-list" v-if="addAndEditForm.detailsFileList.length > 0">
+                            <div
+                                v-for="(j, i) in item.examinationPdfs"
+                                :key="j.fileUrl"
+                                class="img-items"
+                            >
+                                <img :src="j.fileUrl" alt="" />
+
+                                <div class="mask-img" v-if="!isViewForm">
+                                    <el-icon
+                                        class="delete-icon"
+                                        @click="onDeleteImgExaminationPdf(index, i)"
+                                        ><DeleteFilled
+                                    /></el-icon>
+                                </div>
+                            </div>
+                        </div>
+                        <UploadComponentNew
+                            v-if="!isViewForm"
+                            :actionUrl="uploadUrl"
+                            :maxSize="2"
+                            :max-limit="4"
+                            width="100px"
+                            height="100px"
+                            :autoUpload="true"
+                            :multiple="true"
+                            :minLimit="item.examinationPdf.length"
+                            :currentIndex="index"
+                            listType="picture-card"
+                            :acceptTypeList="['.jpg', '.png']"
+                            @onFileChange="onExaminationPdfChange"
+                        >
+                            <template v-slot:default>
+                                <el-icon size="42" color="#aaa"><Plus /></el-icon>
+                            </template>
+                        </UploadComponentNew>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="4" v-if="index != 0">
+                    <el-button
+                        size="small"
+                        type="danger"
+                        class="primary-lease"
+                        @click="onDeleteDescription(index)"
+                    >
+                        移除
+                    </el-button>
+                </el-col>
+            </el-row>
+        </el-form>
     </el-dialog>
 
     <!-- 图片查看弹窗 -->
@@ -1453,7 +1573,7 @@ const onBatchUpload = ()=>{
 
 <style lang="scss" scoped>
 .el-form {
-    margin: 15px 0;
+    // margin: 15px 0;
 }
 
 .title {
@@ -1540,4 +1660,49 @@ const onBatchUpload = ()=>{
     margin-right: 6px;
     width: 95%;
 }
+
+:deep.upload-tip .el-form-item__label {
+    color: transparent;
+}
+
+.img-list {
+    display: flex;
+    align-items: center;
+
+    .img-items {
+        width: 100px;
+        height: 100px;
+        margin-right: 8px;
+        position: relative;
+
+        img {
+            width: 100%;
+            height: 100%;
+        }
+
+        .mask-img {
+            visibility: hidden;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #000;
+            opacity: 0.5;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .delete-icon {
+                font-size: 20px;
+                cursor: pointer;
+                z-index: 9;
+                color: #fff;
+            }
+        }
+    }
+    .img-items:hover .mask-img {
+        visibility: visible;
+    }
+}
 </style>
diff --git a/src/views/user/orderManagement/components/order-details.vue b/src/views/user/orderManagement/components/order-details.vue
new file mode 100644
index 0000000..5a39eb3
--- /dev/null
+++ b/src/views/user/orderManagement/components/order-details.vue
@@ -0,0 +1,665 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { getOrderListInfoApi } from 'http/api/usercenter/seekorder'
+
+import TitleTip from 'components/TitleTip/index.vue'
+const route = useRoute()
+/* 查询参数 */
+const cardList = ref<any>({})
+const orderStatusTemp = ref<number>(0)
+const idTemp = ref<string>('')
+const titleStaus = ref<any>('')
+//描述信息
+const operationDetails = ref<any>({
+    1: { title: '已出库', preOutboundUser: '', preOutboundTime: '' },
+    2: { title: '已收货', takeOverUser: '', takeOverTime: '' },
+    3: { title: '租赁结束', rentOverUser: '', rentOverTime: '' },
+})
+// 根据步骤的 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 '' // 默认返回空字符串
+}
+
+// 根据步骤的 Id 返回对应的描述
+const getDescription = (desId: number) => {
+    const operation = operationDetails.value[desId]
+    if (operation.title == '已出库' && titleStaus.value != '待出库') {
+        return `
+                操作人：${operation.preOutboundUser == null ? ' ' : operation.preOutboundUser}
+                操作时间：${operation.preOutboundTime == null ? ' ' : operation.preOutboundTime}
+            `
+    } else if (
+        operation.title == '已收货' &&
+        titleStaus.value != '待收货' &&
+        titleStaus.value != '待出库'
+    ) {
+        return `
+                操作人：${operation.takeOverUser == null ? ' ' : operation.takeOverUser}
+                操作时间：${operation.takeOverTime == null ? ' ' : operation.takeOverTime}
+            `
+    } else if (
+        operation.title == '租赁结束' &&
+        titleStaus.value != '待收货' &&
+        titleStaus.value != '待出库' &&
+        titleStaus.value != '租赁中'
+    ) {
+        return `
+                操作人：${operation.rentOverUser == null ? ' ' : operation.rentOverUser}
+                操作时间：${operation.rentOverTime == null ? ' ' : operation.rentOverTime}
+            `
+    }
+    return '' // 默认返回空描述
+}
+
+// 计算是否过期
+const isExpired = (goods: any) => {
+    // 获取当前日期并去掉时间部分
+    const today = new Date()
+    today.setHours(0, 0, 0, 0)
+
+    // 将endtime转为Date对象
+    const endTime = new Date(goods.endTime.replace(/-/g, '/'))
+
+    // 判断endtime是否早于今天
+    return endTime < today
+}
+
+const getId = () => {
+    orderStatusTemp.value = Number(route.query.orderStatusTemp)
+    idTemp.value = String(route.query.idTemp)
+}
+const orderDetails = ref<any>({})
+/** 查询列表 */
+const getList = async () => {
+    let params = {
+        orderId: idTemp.value,
+    }
+
+    console.log(props.orderId, 'props.orderId')
+
+    const res: any = await getOrderListInfoApi({ orderId: props.orderId })
+
+    // orderDetails.value = res.data
+    console.log(res, '订单详情---')
+    // cardList.value = res.data
+    // operationDetails.value[1].preOutboundUser = res.data.detailsList[0].preOutboundUser
+    // operationDetails.value[1].preOutboundTime = res.data.detailsList[0].preOutboundTime
+    // operationDetails.value[2].takeOverUser = res.data.detailsList[0].takeOverUser
+    // operationDetails.value[2].takeOverTime = res.data.detailsList[0].takeOverTime
+    // operationDetails.value[3].rentOverUser = res.data.detailsList[0].rentOverUser
+    // operationDetails.value[3].rentOverTime = res.data.detailsList[0].rentOverTime
+}
+
+onBeforeMount(() => {
+    getId()
+})
+
+onMounted(() => {
+    getList()
+})
+
+const props = defineProps({
+    orderStatus: {
+        type: [String, Number],
+        default: () => '',
+    },
+    orderId: {
+        type: [String, Number],
+        default: () => '',
+    },
+})
+
+const emit = defineEmits(['onBackOrderHome'])
+const onOrderManage = () => {
+    emit('onBackOrderHome')
+}
+
+console.log(props.orderStatus, 'orderStatus', props.orderId, 'orderId')
+
+const time = ref([])
+</script>
+
+<template>
+    <!-- 订单管理 -->
+    <div class="container">
+        <el-breadcrumb separator="/" style="padding: 15px 0">
+            <el-breadcrumb-item @click="onOrderManage" class="order-title"
+                >订单管理</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="1" finish-status="success" process-status="wait" align-center>
+                    <el-step title="Done" />
+                    <el-step title="Processing" />
+                    <el-step title="Step 3" />
+                    <el-step title="Step 3" />
+                    <el-step title="Step 3" />
+                </el-steps>
+            </div>
+            <TitleTip :titleText="`租赁信息`" />
+
+            <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: 80px; font-size: 20px"
+                        >
+                            <div style="color: green">{{ titleStaus }}</div>
+                        </el-col>
+                    </el-row>
+                </el-header>
+
+                <el-steps
+                    class="step"
+                    :space="600"
+                    :active="orderStatusTemp === 7 ? 1 : orderStatusTemp - 2"
+                    finish-status="success"
+                >
+                    <el-step :title="getStepTitle(1)" :description="getDescription(1)"></el-step>
+                    <el-step :title="getStepTitle(2)" :description="getDescription(2)"></el-step>
+                    <el-step :title="getStepTitle(3)" :description="getDescription(3)"></el-step>
+                    <el-step :title="getStepTitle(4)"></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>订单编号：{{ orderDetails.code }}</span>
+                        </div>
+                        <div
+                            class="item"
+                            style="
+                                width: 30%;
+                                flex-shrink: 0;
+                                margin-bottom: 5px;
+                                font-size: 14px;
+                                opacity: 0.7;
+                            "
+                        >
+                            <span>下单时间：{{ orderDetails.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>出租单位：{{ orderDetails.czcompanyName }}</span>
+                        </div>
+
+                        <div
+                            class="item"
+                            style="
+                                width: 30%;
+                                flex-shrink: 0;
+                                margin-bottom: 5px;
+                                font-size: 14px;
+                                opacity: 0.7;
+                            "
+                        >
+                            <span>出租人：{{ orderDetails.person }}</span>
+                        </div>
+
+                        <div
+                            class="item"
+                            style="
+                                width: 30%;
+                                flex-shrink: 0;
+                                margin-bottom: 5px;
+                                font-size: 14px;
+                                opacity: 0.7;
+                            "
+                        >
+                            <span>出租人电话：{{ orderDetails.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>承租单位：{{ orderDetails.companyName }}</span>
+                        </div>
+
+                        <div
+                            class="item"
+                            style="
+                                width: 30%;
+                                flex-shrink: 0;
+                                margin-bottom: 5px;
+                                font-size: 14px;
+                                opacity: 0.7;
+                            "
+                        >
+                            <span>承租人：{{ orderDetails.nickName }}</span>
+                        </div>
+
+                        <div
+                            class="item"
+                            style="
+                                width: 30%;
+                                flex-shrink: 0;
+                                margin-bottom: 5px;
+                                font-size: 14px;
+                                opacity: 0.7;
+                            "
+                        >
+                            <span>承租人电话：{{ orderDetails.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>
+
+                <el-row
+                    class="cart-listAll"
+                    :style="{ background: cardList.orderStatus == '6' ? '#EBEEF5' : 'white' }"
+                >
+                    <el-col :span="1">
+                        <!-- <div style="text-align: center">
+                        <el-checkbox :key="numberTemp" v-model="goods.isChecked" @change="onChangeGoods(index)" :disabled="goods.orderStatus!='2'">
+                        </el-checkbox>
+                    </div> -->
+                    </el-col>
+                    <el-col :span="7">
+                        <el-row
+                            class="cart-list"
+                            v-for="(goods, j) in cardList.detailsList"
+                            :key="j"
+                        >
+                            <el-col class="goods-info">
+                                <el-col :span="7">
+                                    <img
+                                        :src="goods.url"
+                                        style="width: 160px; height: 120px"
+                                        alt=""
+                                    />
+                                </el-col>
+                                <div class="goods-code">
+                                    <div style="font-size: 10px; font-weight: bold">
+                                        {{ goods.deviceName }}
+                                    </div>
+                                    <div>租期：{{ goods.days }}{{ ' ' + '天' }}</div>
+                                    <div
+                                        style="
+                                            display: flex;
+                                            justify-content: space-between;
+                                            width: 100%;
+                                        "
+                                    >
+                                        <div style="flex: 1; text-align: left; width: 220px">
+                                            租金：{{ goods.dayLeasePrice }}{{ ' ' + '元/天' }}
+                                        </div>
+                                        <div style="flex: 1; text-align: left">
+                                            数量：{{ goods.num }}{{ ' ' + '台' }}
+                                        </div>
+                                    </div>
+                                </div>
+                            </el-col>
+                        </el-row>
+                    </el-col>
+                    <el-col :span="4">
+                        <div style="font-size: 14px; font-weight: bold; margin-bottom: 10px">
+                            总费用
+                        </div>
+                        <div class="red-font">{{ cardList.cost }}</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">
+                            {{ cardList.startTime }}
+                        </div>
+                        <div style="margin-top: 3px; margin-bottom: 3px">{{ '至' }}</div>
+                        <div style="color: black; font-weight: bold">{{ cardList.endTime }}</div>
+                    </el-col>
+                    <el-col :span="4">
+                        <div
+                            v-if="cardList.orderStatus == '2'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: blue;
+                            "
+                        >
+                            {{ '待出库' }}
+                        </div>
+                        <div
+                            v-if="cardList.orderStatus == '3'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #c76f60;
+                            "
+                        >
+                            {{ '待收货' }}
+                        </div>
+                        <div
+                            v-if="cardList.orderStatus == '4' && isExpired(cardList)"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #008d06;
+                            "
+                        >
+                            {{ '租赁中' }}
+                            <span style="color: red">(已过期)</span>
+                        </div>
+                        <div
+                            v-if="cardList.orderStatus == '4' && !isExpired(cardList)"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #008d06;
+                            "
+                        >
+                            {{ '租赁中' }}
+                        </div>
+                        <div
+                            v-if="cardList.orderStatus == '5'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #5b33cc;
+                            "
+                        >
+                            {{ '已退租' }}
+                        </div>
+                        <div
+                            v-if="cardList.orderStatus == '6'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #c00017;
+                            "
+                        >
+                            {{ '已完成' }}
+                        </div>
+                        <div
+                            v-if="cardList.orderStatus == '7'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #797979;
+                            "
+                        >
+                            {{ '已驳回' }}
+                        </div>
+                    </el-col>
+                </el-row>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.container {
+    // width: 800px;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .order-title {
+        cursor: pointer;
+        color: #00a288;
+        font-weight: bold;
+        :deep .el-breadcrumb__inner {
+            color: #00a288;
+        }
+    }
+
+    .order-details {
+        flex: 1;
+        overflow-y: auto;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+        padding: 0 12px;
+    }
+
+    .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;
+        }
+    }
+}
+</style>
diff --git a/src/views/user/orderManagement/components/order-home.vue b/src/views/user/orderManagement/components/order-home.vue
new file mode 100644
index 0000000..ba8fe07
--- /dev/null
+++ b/src/views/user/orderManagement/components/order-home.vue
@@ -0,0 +1,1520 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import PagingComponent from 'components/PagingComponent/index.vue'
+import { useRouter } from 'vue-router'
+import { getOrderListApi, passApi, failApi, confirmPriceApi } from 'http/api/usercenter/seekorder'
+import TitleTip from 'components/TitleTip/index.vue'
+import { getOverhaulApi } from 'http/api/rent-termination/index'
+import uploadComponent from 'components/uploadComponent/index.vue'
+import previewImg from './previewImg/index.vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useStore } from 'store/user'
+import type { FormInstance } from 'element-plus'
+const store = useStore()
+import { mainStore } from 'store/main'
+const store2 = mainStore()
+
+const overhaulDetails = ref<any>({})
+const repairRecordList = ref([])
+const scrapRecordList = ref([])
+const lossRecordList = ref([])
+const orderDetailDtoList = ref([])
+const viewFileInfoList = ref<any>([])
+const fileListAll = ref<any>([])
+const innerVisible = ref(false)
+/* 查询参数 */
+const queryParams: any = ref({
+    deviceName: '',
+    orderStatus: '',
+    czcompanyName: '',
+    companyName: '',
+    lowerBound: '',
+    upperBound: '',
+    pageSize: 20,
+    pageNum: 1,
+    startTime: '',
+    endTime: '',
+    flag: false,
+})
+const queryFormRef = ref<FormInstance>()
+const numberTemp = ref<number>(0)
+const time = ref([])
+const router = useRouter()
+const pageSize = 20
+const pageNumber = 1
+const total: any = ref(0)
+const cardList = ref<any>([])
+const status = 0
+const statusList = [
+    { id: '2', name: '待出库' },
+    { id: '3', name: '待收货' },
+    { id: '4', name: '租赁中' },
+    { id: '5', name: '已退租' },
+    { id: '6', name: '已完成' },
+    { id: '7', name: '已驳回' },
+]
+
+// const dateTimeConvert=(param:string)=>{
+//         const time = param;
+//         // 创建一个新的Date对象
+//         const dateStart = new Date(time);
+
+//         // 获取年、月和日
+//         const year = dateStart.getUTCFullYear();
+//         const month = (dateStart.getUTCMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，需要加1
+//         const day = dateStart.getUTCDate().toString().padStart(2, '0');
+//         // 拼接成年月日格式
+//         const dateString = `${year}-${month}-${day}`
+//         return dateString;
+// }
+
+/** 查询列表 */
+const getList = async () => {
+    if (time.value.length > 0) {
+        const dateStart = new Date(time.value[0])
+        const dateEnd = new Date(time.value[1])
+        queryParams.value.startTime = dateStart.toLocaleDateString('en-CA')
+        queryParams.value.endTime = dateEnd.toLocaleDateString('en-CA')
+    } else {
+        queryParams.value.startTime = undefined
+        queryParams.value.endTime = undefined
+    }
+    const res: any = await getOrderListApi(queryParams.value)
+    cardList.value = res.rows
+    total.value = res.total
+}
+
+const emit = defineEmits(['onOpenOrderDetails'])
+//订单详情
+const handleViewOrder = (index: Number, row: any) => {
+    // const { orderStatus, orderId } = row
+    emit('onOpenOrderDetails', row.orderStatus, row.orderId)
+    // router.push({
+    //     name: 'orderManagementInfo',
+    //     query: { orderStatusTemp: Number(row.orderStatus), idTemp: row.orderId },
+    // })
+}
+
+onMounted(() => {
+    getList()
+})
+
+// 查询按钮
+const queryTableList = () => {
+    queryParams.value.pageNum = 1
+    getList()
+}
+
+// 重置
+const resetTableList = (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    formEl.resetFields()
+    time.value = []
+    queryTableList()
+}
+
+// 全选事件
+const onChangeCompany = (e: boolean, index: number, item: any) => {
+    cardList.value[index].detailsList.forEach((item: any) => {
+        if (item.orderStatus == '3') {
+            item.isChecked = e
+        }
+    })
+}
+
+// 单选事件
+const onChangeGoods = (index: number) => {
+    let flag = true
+    for (let item of cardList.value[index].detailsList) {
+        if (item.orderStatus == '3' && item.isChecked != true) {
+            flag = false
+            break
+        }
+    }
+    console.log('2222222', cardList.value[index])
+    cardList.value[index].isChecked = flag
+}
+
+// 确认收获按钮
+const confirmReceipt = async (index: number) => {
+    ElMessageBox.confirm('是否确定收获？', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+    })
+        .then(() => {
+            return passApi({ orderId: cardList.value[index].orderId, orderStatus: 4 })
+        })
+        .then((res) => {
+            if (res.code === 200) {
+                ElMessage({
+                    type: 'success',
+                    message: '确定收获成功',
+                })
+                numberTemp.value = numberTemp.value + 1
+                getList()
+            }
+        })
+        .catch(() => {})
+}
+
+// 计算是否过期
+const isExpired = (goods: any) => {
+    // 获取当前日期并去掉时间部分
+    const today = new Date()
+    today.setHours(0, 0, 0, 0)
+
+    // 将endtime转为Date对象
+    const endTime = new Date(goods.endTime.replace(/-/g, '/'))
+
+    // 判断endtime是否早于今天
+    return endTime < today
+}
+
+const settleinTitle = ref('')
+/* 编辑 **********/
+const isEditDisabled = ref(false)
+
+//图片查看弹窗
+const dialogVisible: any = ref(false)
+const dialogImageUrl = ref('')
+
+// 发起退租
+const handleViewBack = async (row: any) => {
+    ElMessageBox.confirm('是否确定发起退租？', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+    })
+        .then(() => {
+            return passApi({ orderId: row.orderId, orderStatus: 5 })
+        })
+        .then((res) => {
+            if (res.code === 200) {
+                ElMessage({
+                    type: 'success',
+                    message: '发起退租成功',
+                })
+                numberTemp.value = numberTemp.value + 1
+                getList()
+            }
+        })
+        .catch(() => {})
+}
+
+const moneyParams1: any = ref({
+    /* 设备名称 */
+    deviceName: '',
+    deviceTypeList: [],
+    deviceCount: 1,
+    unitName: '',
+})
+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 settleWordTitle = ref('')
+const dialogFormVisibleSettleWord: any = ref(false)
+//租赁协议
+const handleViewWord = () => {
+    settleWordTitle.value = '租赁协议'
+    console.log(12313131)
+    moneyParams1.value = {
+        /* 设备状态 */
+        maStatus: 15,
+        detectionList: [],
+        insureList: [],
+        picList: [],
+    }
+    // 打开租赁协议弹框
+    dialogFormVisibleSettleWord.value = true
+}
+
+const confirmFail = async (index: number) => {
+    ElMessageBox.confirm('是否确定取消？', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+    })
+        .then(() => {
+            return failApi({ orderId: cardList.value[index].orderId, orderStatus: 7 })
+            // return removeDeviceApi([row.maId])
+        })
+        .then((res) => {
+            if (res.code === 200) {
+                ElMessage({
+                    type: 'success',
+                    message: '取消成功',
+                })
+                numberTemp.value = numberTemp.value + 1
+                getList()
+            }
+        })
+        .catch(() => {})
+}
+
+const onViewOverhaulDetails = () => {}
+
+//费用清单
+const handleViewList = async (orderId: any) => {
+    settleListTitle.value = '费用清单'
+    getOverhaulDetails(orderId)
+}
+const getOverhaulDetails = (orderId: any) => {
+    getOverhaulApi(orderId).then((res: any) => {
+        const { data } = res
+        orderDetailDtoList.value = data.orderDetailDtoList
+        repairRecordList.value = data.repairRecordList
+        scrapRecordList.value = data.scrapRecordList
+        lossRecordList.value = data.lossRecordList
+        fileListAll.value = data.fileInfoList
+        overhaulDetails.value = data
+        dialogFormVisibleSettleList.value = true
+    })
+}
+const onCostConfirm = (orderId: any) => {
+    settleListTitle.value = '费用确认'
+    getOverhaulDetails(orderId)
+}
+const onViewFileImg = (row: any, index: number) => {
+    viewFileInfoList.value = []
+    viewFileInfoList.value = fileListAll.value.filter((e: any) => e.fileType == index)
+    innerVisible.value = true
+}
+
+const costSubmit = () => {
+    ElMessageBox.confirm(`是否确认本次订单费用无误，并提交？`, '温馨提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'success',
+    })
+        .then(async () => {
+            const res: any = await confirmPriceApi({
+                orderId: overhaulDetails.value.orderId,
+            })
+            if (res.code == 200) {
+                ElMessage({
+                    type: 'success',
+                    message: '确认成功',
+                })
+                dialogFormVisibleSettleList.value = false
+                // 刷新列表
+                getList()
+            }
+        })
+        .catch(async () => {})
+}
+</script>
+
+<template>
+    <!-- 订单管理 -->
+    <div class="container">
+        <el-form
+            :model="queryParams"
+            ref="queryFormRef"
+            :inline="true"
+            size="default"
+            label-width="0"
+        >
+            <el-row>
+                <el-col :span="6">
+                    <el-form-item prop="deviceName">
+                        <el-input
+                            style="width: 100%"
+                            v-model.trim="queryParams.deviceName"
+                            clearable
+                            placeholder="请输入装备名称"
+                        />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item prop="orderStatus">
+                        <el-select
+                            v-model="queryParams.orderStatus"
+                            placeholder="请选择订单状态"
+                            style="width: 100%"
+                            clearable
+                        >
+                            <el-option
+                                v-for="item in statusList"
+                                :key="item.id"
+                                :label="item.name"
+                                :value="item.id"
+                            />
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item prop="dateRange">
+                        <el-date-picker
+                            v-model="time"
+                            type="daterange"
+                            unlink-panels
+                            range-separator="-"
+                            start-placeholder="开始时间"
+                            end-placeholder="结束时间"
+                            style="width: 100%"
+                        />
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="6">
+                    <el-form-item prop="czcompanyName">
+                        <el-input
+                            v-model.trim="queryParams.czcompanyName"
+                            clearable
+                            maxlength="20"
+                            placeholder="出租单位"
+                            style="width: 100%"
+                        />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <el-row>
+                <el-col :span="6">
+                    <el-form-item prop="companyName">
+                        <el-input
+                            v-model.trim="queryParams.companyName"
+                            clearable
+                            maxlength="20"
+                            placeholder="承租单位"
+                        />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-input
+                        v-model.trim="queryParams.lowerBound"
+                        placeholder="租金/元"
+                        clearable
+                        maxlength="20"
+                        style="width: 45%"
+                    />
+                    <span style="display: inline-block; width: 5%; text-align: center"> - </span>
+                    <el-input
+                        v-model.trim="queryParams.upperBound"
+                        placeholder="租金/元"
+                        clearable
+                        maxlength="20"
+                        style="width: 45%"
+                    />
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item>
+                        <el-button type="primary" @click="queryTableList">查询</el-button>
+                        <el-button @click="resetTableList(queryFormRef)">重置</el-button>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </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">
+                        <span> 订单编号： </span>
+                        <span>
+                            {{ item.code }}
+                        </span>
+                    </el-col>
+                    <el-col :span="8">
+                        <span> 下单时间： </span>
+                        <span>
+                            {{ item.orderTime }}
+                        </span>
+                    </el-col>
+                    <el-col :span="8">
+                        <span> 装备所属公司： </span>
+                        <span>
+                            {{ item.czcompanyName }}
+                        </span>
+                    </el-col>
+                </el-row>
+                <el-row
+                    style="border-bottom: 1px solid #ccc; margin-bottom: 10px"
+                    class="order-title-info"
+                >
+                    <el-col :span="8">
+                        <span> 出租方联系电话： </span>
+                        <span>
+                            {{ item.personPhone }}
+                        </span>
+                    </el-col>
+                    <el-col :span="8">
+                        <span> 承租方联系电话： </span>
+                        <span>
+                            {{ item.phoneNumber }}
+                        </span>
+                    </el-col>
+                    <el-col :span="8">
+                        <span> 承租方地址： </span>
+                        <span>
+                            {{ item.czcompanyName }}
+                        </span>
+                    </el-col>
+                </el-row>
+
+                <el-row>
+                    <el-col :span="8">
+                        <div
+                            v-for="(goods, j) in item.detailsList"
+                            :key="j"
+                            class="order-items order-info"
+                            :style="
+                                j != item.detailsList.length - 1
+                                    ? 'border-bottom:1px solid #eee'
+                                    : ''
+                            "
+                        >
+                            <img :src="goods.url" style="width: 160px; height: 120px" alt="" />
+                            <div
+                                style="
+                                    flex: 1;
+                                    display: flex;
+                                    justify-content: space-around;
+                                    flex-direction: column;
+                                    padding-left: 12px;
+                                "
+                            >
+                                <el-row style="color: #169bd5; font-weight: bold">
+                                    {{ goods.deviceName }}
+                                </el-row>
+                                <el-row>
+                                    <el-col :span="4"> 租期 </el-col>
+                                    <el-col :span="18"> {{ goods.days }}{{ ' ' + '天' }} </el-col>
+                                </el-row>
+                                <el-row>
+                                    <el-col :span="4"> 租金 </el-col>
+                                    <el-col :span="8">
+                                        {{ goods.dayLeasePrice }}{{ ' ' + '元/天' }}
+                                    </el-col>
+                                    <el-col :span="4"> 数量 </el-col>
+                                    <el-col :span="8"> {{ goods.num }}{{ ' ' + '台' }} </el-col>
+                                </el-row>
+                            </div>
+                        </div>
+                    </el-col>
+                    <el-col :span="3" class="order-items-info">
+                        <div>总费用</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="3" class="order-items-info">
+                        <div
+                            v-if="item.orderStatus == '2'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: blue;
+                            "
+                        >
+                            {{ '待出库' }}
+                        </div>
+                        <div
+                            v-if="item.orderStatus == '3'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #c76f60;
+                            "
+                        >
+                            {{ '待收货' }}
+                        </div>
+                        <div
+                            v-if="item.orderStatus == '4' && isExpired(item)"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #008d06;
+                            "
+                        >
+                            {{ '租赁中' }}
+                            <span style="color: red">(已过期)</span>
+                        </div>
+                        <div
+                            v-if="item.orderStatus == '4' && !isExpired(item)"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #008d06;
+                            "
+                        >
+                            {{ '租赁中' }}
+                        </div>
+                        <div
+                            v-if="item.orderStatus == '5'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #5b33cc;
+                            "
+                        >
+                            {{ '已退租' }}
+                        </div>
+                        <div
+                            v-if="item.orderStatus == '6'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #c00017;
+                            "
+                        >
+                            {{ '已完成' }}
+                        </div>
+                        <div
+                            v-if="item.orderStatus == '7'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #797979;
+                            "
+                        >
+                            {{ '已驳回' }}
+                        </div>
+                    </el-col>
+                    <el-col :span="6" class="handle-btn">
+                        <el-button
+                            v-if="item.orderStatus == '3'"
+                            type="primary"
+                            size="small"
+                            @click="confirmReceipt(index)"
+                            >确认收货</el-button
+                        >
+                        <el-button
+                            v-if="item.orderStatus == '2'"
+                            type="primary"
+                            size="small"
+                            @click="confirmFail(index)"
+                            >取消</el-button
+                        >
+
+                        <el-button @click="handleViewOrder(j, item)" type="primary" size="small">
+                            订单详情
+                        </el-button>
+                        <el-button @click="handleViewWord(j)" type="primary" size="small">
+                            租赁协议
+                        </el-button>
+                        <el-button
+                            v-if="item.orderStatus == '4'"
+                            @click="handleViewBack(item)"
+                            type="primary"
+                            size="small"
+                        >
+                            发起退租
+                        </el-button>
+                        <el-button
+                            v-if="item.orderStatus == '6'"
+                            @click="handleViewList(item.orderId)"
+                            type="primary"
+                            size="small"
+                        >
+                            费用清单
+                        </el-button>
+                        <el-button
+                            v-if="item.orderStatus == 5 && item.isLeaseContent == 1"
+                            @click="onViewOverhaulDetails()"
+                            type="primary"
+                            size="small"
+                        >
+                            检修详情
+                        </el-button>
+                        <el-button
+                            v-if="item.orderStatus == 5 && item.isLeaseContent == 1"
+                            @click="onCostConfirm(item.orderId)"
+                            type="primary"
+                            size="small"
+                        >
+                            费用确认
+                        </el-button>
+                    </el-col>
+                </el-row>
+            </div>
+        </template>
+
+        <!-- <template v-if="cardList.length > 0">
+            <div class="cart-tbody" v-for="(item, index) in cardList" :key="index">
+                <el-row style="border-bottom: 1px solid #ccc">
+                    <el-col :span="1">
+                        <div style="text-align: center">
+                            <el-checkbox
+                                :key="numberTemp"
+                                v-model="item.isChecked"
+                                @change="onChangeCompany($event, index, item)"
+                            >
+                            </el-checkbox>
+                        </div>
+                    </el-col>
+                    <el-col :span="19">
+                        <el-row>
+                            <el-col :span="6">
+                                <div
+                                    class="item"
+                                    style="
+                                        flex-shrink: 0;
+                                        margin-bottom: 5px;
+                                        font-size: 15px;
+                                        margin-top: 5px;
+                                    "
+                                >
+                                    <span>订单编号:</span>
+                                    {{ item.code }}
+                                </div>
+                            </el-col>
+                            <el-col :span="7">
+                                <div
+                                    class="item"
+                                    style="
+                                        flex-shrink: 0;
+                                        margin-bottom: 5px;
+                                        font-size: 15px;
+                                        margin-top: 5px;
+                                    "
+                                >
+                                    <span>下单时间:</span>
+                                    {{ item.orderTime }}
+                                </div>
+                            </el-col>
+                            <el-col :span="7">
+                                <div
+                                    class="item"
+                                    style="
+                                        flex-shrink: 0;
+                                        margin-bottom: 5px;
+                                        font-size: 15px;
+                                        margin-top: 5px;
+                                    "
+                                >
+                                    <span>装备所属公司:</span>
+                                    {{ item.czcompanyName }}
+                                </div>
+                            </el-col>
+
+                            <el-col :span="4">
+                                <div
+                                    style="
+                                        flex-shrink: 0;
+                                        margin-bottom: 1px;
+                                        font-size: 7px;
+                                        display: flex;
+                                        justify-content: center;
+                                        margin-top: 5px;
+                                    "
+                                >
+                                    <el-button
+                                        v-if="item.orderStatus == '3'"
+                                        class="item"
+                                        type="success"
+                                        size="mimi"
+                                        @click="confirmReceipt(index)"
+                                        >确认收货</el-button
+                                    >
+                                </div>
+                            </el-col>
+                        </el-row>
+
+                        <el-row>
+                            <el-col :span="6">
+                                <div
+                                    class="item"
+                                    style="
+                                        flex-shrink: 0;
+                                        margin-bottom: 5px;
+                                        font-size: 15px;
+                                        margin-top: 5px;
+                                    "
+                                >
+                                    <span>出租方电话:</span>
+                                    {{ item.personPhone }}
+                                </div>
+                            </el-col>
+                            <el-col :span="7">
+                                <div
+                                    class="item"
+                                    style="
+                                        flex-shrink: 0;
+                                        margin-bottom: 5px;
+                                        font-size: 15px;
+                                        margin-top: 5px;
+                                    "
+                                >
+                                    <span>承租方电话:</span>
+                                    {{ item.phoneNumber }}
+                                </div>
+                            </el-col>
+                            <el-col :span="7">
+                                <div
+                                    class="item"
+                                    style="
+                                        flex-shrink: 0;
+                                        margin-bottom: 5px;
+                                        font-size: 15px;
+                                        margin-top: 5px;
+                                    "
+                                >
+                                    <span>承租方地址:</span>
+                                    {{ item.companyName }}
+                                </div>
+                            </el-col>
+                        </el-row>
+                    </el-col>
+                    <el-col :span="4">
+                        <div>
+                            <el-button
+                                v-if="item.orderStatus == '2'"
+                                class="item"
+                                type="primary"
+                                @click="confirmFail(index)"
+                                >取消</el-button
+                            >
+                        </div>
+                    </el-col>
+                </el-row>
+
+                <el-row
+                    class="cart-listAll"
+                    :style="{ background: item.orderStatus == '2' ? '#EBEEF5' : 'white' }"
+                >
+                    <el-col :span="1"> </el-col>
+
+                    <el-col :span="7">
+                        <el-row class="cart-list" v-for="(goods, j) in item.detailsList" :key="j">
+                            <el-col 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
+                                        style="
+                                            display: flex;
+                                            justify-content: space-between;
+                                            width: 100%;
+                                        "
+                                    >
+                                        <div style="flex: 1; text-align: left; width: 220px">
+                                            租金：{{ goods.dayLeasePrice }}{{ ' ' + '元/天' }}
+                                        </div>
+                                        <div style="flex: 1; text-align: left">
+                                            数量：{{ goods.num }}{{ ' ' + '台' }}
+                                        </div>
+                                    </div>
+                                </div>
+                            </el-col>
+                        </el-row>
+                    </el-col>
+                    <el-col :span="3">
+                        <div style="font-size: 14px; font-weight: bold; margin-bottom: 10px">
+                            总费用
+                        </div>
+                        <div class="red-font">{{ item.cost }}</div>
+                    </el-col>
+                    <el-col :span="4">
+                        <div style="font-size: 14px; font-weight: bold; margin-bottom: 10px">
+                            租期
+                        </div>
+                        <div style="color: black; font-weight: bold">
+                            {{ item.startTime }}
+                        </div>
+                        <div style="margin-top: 3px; margin-bottom: 3px">{{ '至' }}</div>
+                        <div style="color: black; font-weight: bold">{{ item.endTime }}</div>
+                    </el-col>
+                    <el-col :span="4">
+                        <div
+                            v-if="item.orderStatus == '2'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: blue;
+                            "
+                        >
+                            {{ '待出库' }}
+                        </div>
+                        <div
+                            v-if="item.orderStatus == '3'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #c76f60;
+                            "
+                        >
+                            {{ '待收货' }}
+                        </div>
+                        <div
+                            v-if="item.orderStatus == '4' && isExpired(item)"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #008d06;
+                            "
+                        >
+                            {{ '租赁中' }}
+                            <span style="color: red">(已过期)</span>
+                        </div>
+                        <div
+                            v-if="item.orderStatus == '4' && !isExpired(item)"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #008d06;
+                            "
+                        >
+                            {{ '租赁中' }}
+                        </div>
+                        <div
+                            v-if="item.orderStatus == '5'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #5b33cc;
+                            "
+                        >
+                            {{ '已退租' }}
+                        </div>
+                        <div
+                            v-if="item.orderStatus == '6'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #c00017;
+                            "
+                        >
+                            {{ '已完成' }}
+                        </div>
+                        <div
+                            v-if="item.orderStatus == '7'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #797979;
+                            "
+                        >
+                            {{ '已驳回' }}
+                        </div>
+                    </el-col>
+                    <el-col :span="5">
+                        <div>
+                            <el-button
+                                @click="handleViewOrder(j, item)"
+                                type="primary"
+                                size="small"
+                                style="color: #blue; font-weight: bold"
+                            >
+                                订单详情
+                            </el-button>
+                            <el-button
+                                @click="handleViewWord(j)"
+                                type="primary"
+                                size="small"
+                                style="color: #blue; font-weight: bold"
+                            >
+                                租赁协议
+                            </el-button>
+                            <el-button
+                                v-if="item.orderStatus == '4'"
+                                @click="handleViewBack(item)"
+                                type="primary"
+                                size="small"
+                                style="color: #blue; font-weight: bold"
+                            >
+                                发起退租
+                            </el-button>
+                            <el-button
+                                v-if="item.orderStatus == '6'"
+                                @click="handleViewList(j)"
+                                type="primary"
+                                size="small"
+                                style="color: #blue; font-weight: bold"
+                            >
+                                费用清单
+                            </el-button>
+                        </div>
+                    </el-col>
+                </el-row>
+            </div>
+        </template> -->
+
+        <el-empty v-else />
+        <PagingComponent
+            v-if="total > 0"
+            @getList="getList"
+            :pageSize="pageSize"
+            :pageNumber="pageNumber"
+            :total="total"
+        />
+    </div>
+    <!-- 费用清单弹框 -->
+    <el-dialog
+        v-model="dialogFormVisibleSettleList"
+        :title="settleListTitle"
+        width="65%"
+        align-center
+    >
+        <el-row
+            style="
+                display: flex;
+                justify-content: space-between;
+                letter-spacing: 1px;
+                padding: 0 10px 20px;
+            "
+        >
+            <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.rentEndTime }}</span>
+            </div>
+        </el-row>
+        <el-row
+            style="
+                display: flex;
+                letter-spacing: 1px;
+                justify-content: space-between;
+                padding: 0 10px 20px;
+            "
+        >
+            <div style="flex: 1">
+                <span>结算单位：</span>
+                <span>{{ overhaulDetails.leaseCompany }}</span>
+            </div>
+            <div style="flex: 1">
+                <span>租赁天数：</span>
+                <span>{{ overhaulDetails.rentDay }}</span>
+            </div>
+            <div style="flex: 1; color: transparent">
+                <span>租赁天数：</span>
+                <span>999</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
+            :data="orderDetailDtoList"
+            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="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.rentBeginTime}至${row.rentEndTime} ` }}
+                </template>
+            </el-table-column>
+            <el-table-column prop="costs" align="center" label="租赁费用(元)" width="160" />
+        </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 prop="repairPrice" 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 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 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 v-model="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>
+        <template #footer v-if="settleListTitle === '费用确认'">
+            <span class="dialog-footer">
+                <el-button
+                    type="primary"
+                    @click="
+                        () => {
+                            dialogFormVisibleSettleList = false
+                        }
+                    "
+                    >关 闭</el-button
+                >
+                <el-button @click="costSubmit" type="primary"> 确认 </el-button>
+            </span>
+        </template>
+    </el-dialog>
+
+    <!-- 租赁协议 -->
+    <el-dialog
+        v-model="dialogFormVisibleSettleWord"
+        :title="settleWordTitle"
+        width="50%"
+        align-center
+        destroy-on-close
+        :close-on-click-modal="false"
+    >
+        <div style="display: flex; justify-content: center">
+            <img src="@/assets/img/zuLin.png" style="width: 100%; height: 600px" />
+        </div>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button type="primary" @click="dialogFormVisibleSettleWord = false"
+                    >关 闭</el-button
+                >
+                <el-button @click="submitBtn" type="success"> 下载 </el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.logo {
+    padding: 15px 0;
+    display: flex;
+    margin-left: 80px;
+}
+.title {
+    margin: 10px;
+    margin-left: 20px;
+    display: flex;
+    align-items: center;
+}
+.title-sign {
+    display: inline-block;
+    width: 4px;
+    height: 16px;
+    background: #409eff;
+    margin-left: 45px;
+}
+.title-text {
+    font-weight: 700;
+    margin-left: 10px;
+}
+.uploadBox {
+    margin: 20px 40px;
+}
+.labelBox {
+    width: auto;
+    height: auto;
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+}
+.imgsBox {
+    width: auto;
+    height: auto;
+    display: flex;
+    align-items: center;
+    margin-bottom: 30px;
+    margin-left: 20px;
+
+    .imgItem {
+        width: 160px;
+        height: 160px;
+        margin-right: 40px;
+        border: 1px dashed #bbb;
+        position: relative;
+        .picture-card {
+            width: 160px;
+            height: 160px;
+        }
+        .icon-list {
+            width: 60px;
+            height: 20px;
+            position: absolute;
+            top: 70px;
+            left: 40px;
+            display: flex;
+            align-items: center;
+        }
+        .imgItem__icon {
+            margin: 0 5px;
+        }
+        .file-name {
+            font-size: 10px;
+        }
+    }
+
+    .hide {
+        display: none;
+    }
+    .imgItem:hover .hide {
+        display: block;
+    }
+}
+.tipBox {
+    color: red;
+    font-size: 12px;
+    margin-left: 20px;
+}
+.container {
+    // width: 800px;
+    // margin: 0 auto;
+    // padding: 10px;
+    background: #eeeff6;
+    font-size: 14px;
+
+    .cart-title {
+        margin-top: 10px;
+        padding: 10px 0;
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        font-weight: bold;
+        letter-spacing: 1px;
+    }
+
+    .cart-title div:first-child {
+        width: 5px;
+        height: 20px;
+        background-color: #4fabfe;
+    }
+
+    .cart-th {
+        margin: 15px 0;
+        div {
+            text-align: center;
+        }
+    }
+
+    .cart-tbody {
+        background: #fff;
+        padding: 8px 12px;
+        margin-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;
+
+            .code,
+            .orderTime {
+                padding: 3px 18px;
+                border: 1px solid #ccc;
+            }
+
+            .czcompanyName {
+                margin-left: 20px;
+                border-right: none;
+            }
+        }
+
+        .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;
+                    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;
+                }
+
+                .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;
+            }
+        }
+    }
+
+    .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%;
+}
+
+.empty-container {
+    background: url('@/assets/img/empty_bg.png') no-repeat;
+    width: 300px;
+    height: 60px !important;
+    background-color: skyblue;
+    z-index: 9999;
+}
+
+.order-title-info {
+    padding: 6px 4px;
+    font-size: 14px;
+    color: #999;
+}
+
+.order-items {
+    border-right: 1px solid #eee;
+}
+
+.order-info {
+    display: flex;
+    padding: 10px 0;
+}
+
+.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;
+}
+
+.handle-btn {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    .el-button {
+        width: calc((100% - 50px) / 4);
+        margin: 0;
+        margin-left: 10px !important;
+    }
+}
+</style>
diff --git a/src/views/user/orderManagement/index.vue b/src/views/user/orderManagement/index.vue
index 126b33d..53e29f1 100644
--- a/src/views/user/orderManagement/index.vue
+++ b/src/views/user/orderManagement/index.vue
@@ -1,1517 +1,40 @@
+<template>
+    <div class="order-container">
+        <!-- <OrderHome /> -->
+        <!-- <OrderDetails /> -->
+        <KeepAlive>
+            <component
+                :orderId="orderId"
+                :is="isComponents"
+                :orderStatus="orderStatus"
+                @onBackOrderHome="onBackOrderHome"
+                @onOpenOrderDetails="onOpenOrderDetails"
+            />
+        </KeepAlive>
+    </div>
+</template>
+
 <script setup lang="ts">
-import { ref } from 'vue'
-import PagingComponent from 'components/PagingComponent/index.vue'
-import { useRouter } from 'vue-router'
-import { getOrderListApi, passApi, failApi, confirmPriceApi } from 'http/api/usercenter/seekorder'
-import TitleTip from 'components/TitleTip/index.vue'
-import { getOverhaulApi } from 'http/api/rent-termination/index'
-import uploadComponent from 'components/uploadComponent/index.vue'
-import previewImg from './previewImg/index.vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { useStore } from 'store/user'
-import type { FormInstance } from 'element-plus'
-const store = useStore()
-import { mainStore } from 'store/main'
-const store2 = mainStore()
-
-const overhaulDetails = ref<any>({})
-const repairRecordList = ref([])
-const scrapRecordList = ref([])
-const lossRecordList = ref([])
-const orderDetailDtoList = ref([])
-const viewFileInfoList = ref<any>([])
-const fileListAll = ref<any>([])
-const innerVisible = ref(false)
-/* 查询参数 */
-const queryParams: any = ref({
-    deviceName: '',
-    orderStatus: '',
-    czcompanyName: '',
-    companyName: '',
-    lowerBound: '',
-    upperBound: '',
-    pageSize: 20,
-    pageNum: 1,
-    startTime: '',
-    endTime: '',
-    flag: false,
-})
-const queryFormRef = ref<FormInstance>()
-const numberTemp = ref<number>(0)
-const time = ref([])
-const router = useRouter()
-const pageSize = 20
-const pageNumber = 1
-const total: any = ref(0)
-const cardList = ref<any>([])
-const status = 0
-const statusList = [
-    { id: '2', name: '待出库' },
-    { id: '3', name: '待收货' },
-    { id: '4', name: '租赁中' },
-    { id: '5', name: '已退租' },
-    { id: '6', name: '已完成' },
-    { id: '7', name: '已驳回' },
-]
-
-// const dateTimeConvert=(param:string)=>{
-//         const time = param;
-//         // 创建一个新的Date对象
-//         const dateStart = new Date(time);
-
-//         // 获取年、月和日
-//         const year = dateStart.getUTCFullYear();
-//         const month = (dateStart.getUTCMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，需要加1
-//         const day = dateStart.getUTCDate().toString().padStart(2, '0');
-//         // 拼接成年月日格式
-//         const dateString = `${year}-${month}-${day}`
-//         return dateString;
-// }
-
-/** 查询列表 */
-const getList = async () => {
-    if (time.value.length > 0) {
-        const dateStart = new Date(time.value[0])
-        const dateEnd = new Date(time.value[1])
-        queryParams.value.startTime = dateStart.toLocaleDateString('en-CA')
-        queryParams.value.endTime = dateEnd.toLocaleDateString('en-CA')
-    } else {
-        queryParams.value.startTime = undefined
-        queryParams.value.endTime = undefined
-    }
-    const res: any = await getOrderListApi(queryParams.value)
-    cardList.value = res.rows
-    total.value = res.total
+import OrderHome from './components/order-home.vue'
+import OrderDetails from './components/order-details.vue'
+const isComponents = ref<any>(OrderHome)
+const orderStatus = ref<any>()
+const orderId = ref<any>()
+const onBackOrderHome = () => {
+    isComponents.value = OrderHome
 }
-
-//订单详情
-const handleViewOrder = (index: Number, row: any) => {
-    router.push({
-        name: 'orderManagementInfo',
-        query: { orderStatusTemp: Number(row.orderStatus), idTemp: row.orderId },
-    })
-}
-
-onMounted(() => {
-    getList()
-})
-
-// 查询按钮
-const queryTableList = () => {
-    queryParams.value.pageNum = 1
-    getList()
-}
-
-// 重置
-const resetTableList = (formEl: FormInstance | undefined) => {
-    if (!formEl) return
-    formEl.resetFields()
-    time.value = []
-    queryTableList()
-}
-
-// 全选事件
-const onChangeCompany = (e: boolean, index: number, item: any) => {
-    cardList.value[index].detailsList.forEach((item: any) => {
-        if (item.orderStatus == '3') {
-            item.isChecked = e
-        }
-    })
-}
-
-// 单选事件
-const onChangeGoods = (index: number) => {
-    let flag = true
-    for (let item of cardList.value[index].detailsList) {
-        if (item.orderStatus == '3' && item.isChecked != true) {
-            flag = false
-            break
-        }
-    }
-    console.log('2222222', cardList.value[index])
-    cardList.value[index].isChecked = flag
-}
-
-// 确认收获按钮
-const confirmReceipt = async (index: number) => {
-    ElMessageBox.confirm('是否确定收获？', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-    })
-        .then(() => {
-            return passApi({ orderId: cardList.value[index].orderId, orderStatus: 4 })
-        })
-        .then((res) => {
-            if (res.code === 200) {
-                ElMessage({
-                    type: 'success',
-                    message: '确定收获成功',
-                })
-                numberTemp.value = numberTemp.value + 1
-                getList()
-            }
-        })
-        .catch(() => {})
-}
-
-// 计算是否过期
-const isExpired = (goods: any) => {
-    // 获取当前日期并去掉时间部分
-    const today = new Date()
-    today.setHours(0, 0, 0, 0)
-
-    // 将endtime转为Date对象
-    const endTime = new Date(goods.endTime.replace(/-/g, '/'))
-
-    // 判断endtime是否早于今天
-    return endTime < today
-}
-
-const settleinTitle = ref('')
-/* 编辑 **********/
-const isEditDisabled = ref(false)
-
-//图片查看弹窗
-const dialogVisible: any = ref(false)
-const dialogImageUrl = ref('')
-
-// 发起退租
-const handleViewBack = async (row: any) => {
-    ElMessageBox.confirm('是否确定发起退租？', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-    })
-        .then(() => {
-            return passApi({ orderId: row.orderId, orderStatus: 5 })
-        })
-        .then((res) => {
-            if (res.code === 200) {
-                ElMessage({
-                    type: 'success',
-                    message: '发起退租成功',
-                })
-                numberTemp.value = numberTemp.value + 1
-                getList()
-            }
-        })
-        .catch(() => {})
-}
-
-const moneyParams1: any = ref({
-    /* 设备名称 */
-    deviceName: '',
-    deviceTypeList: [],
-    deviceCount: 1,
-    unitName: '',
-})
-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 settleWordTitle = ref('')
-const dialogFormVisibleSettleWord: any = ref(false)
-//租赁协议
-const handleViewWord = () => {
-    settleWordTitle.value = '租赁协议'
-    console.log(12313131)
-    moneyParams1.value = {
-        /* 设备状态 */
-        maStatus: 15,
-        detectionList: [],
-        insureList: [],
-        picList: [],
-    }
-    // 打开租赁协议弹框
-    dialogFormVisibleSettleWord.value = true
-}
-
-const confirmFail = async (index: number) => {
-    ElMessageBox.confirm('是否确定取消？', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-    })
-        .then(() => {
-            return failApi({ orderId: cardList.value[index].orderId, orderStatus: 7 })
-            // return removeDeviceApi([row.maId])
-        })
-        .then((res) => {
-            if (res.code === 200) {
-                ElMessage({
-                    type: 'success',
-                    message: '取消成功',
-                })
-                numberTemp.value = numberTemp.value + 1
-                getList()
-            }
-        })
-        .catch(() => {})
-}
-
-const onViewOverhaulDetails = () => {}
-
-//费用清单
-const handleViewList = async (orderId: any) => {
-    settleListTitle.value = '费用清单'
-    getOverhaulDetails(orderId)
-}
-const getOverhaulDetails = (orderId: any) => {
-    getOverhaulApi(orderId).then((res: any) => {
-        const { data } = res
-        orderDetailDtoList.value = data.orderDetailDtoList
-        repairRecordList.value = data.repairRecordList
-        scrapRecordList.value = data.scrapRecordList
-        lossRecordList.value = data.lossRecordList
-        fileListAll.value = data.fileInfoList
-        overhaulDetails.value = data
-        dialogFormVisibleSettleList.value = true
-    })
-}
-const onCostConfirm = (orderId: any) => {
-    settleListTitle.value = '费用确认'
-    getOverhaulDetails(orderId)
-}
-const onViewFileImg = (row: any, index: number) => {
-    viewFileInfoList.value = []
-    viewFileInfoList.value = fileListAll.value.filter((e: any) => e.fileType == index)
-    innerVisible.value = true
-}
-
-const costSubmit = () => {
-    ElMessageBox.confirm(`是否确认本次订单费用无误，并提交？`, '温馨提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'success',
-    })
-        .then(async () => {
-            const res: any = await confirmPriceApi({
-                orderId: overhaulDetails.value.orderId,
-            })
-            if (res.code == 200) {
-                ElMessage({
-                    type: 'success',
-                    message: '确认成功',
-                })
-                dialogFormVisibleSettleList.value = false
-                // 刷新列表
-                getList()
-            }
-        })
-        .catch(async () => {})
+const onOpenOrderDetails = (status: any, id: any) => {
+    orderStatus.value = status
+    orderId.value = id
+    isComponents.value = OrderDetails
 }
 </script>
 
-<template>
-    <!-- 订单管理 -->
-    <div class="container">
-        <el-form
-            :model="queryParams"
-            ref="queryFormRef"
-            :inline="true"
-            size="default"
-            label-width="0"
-        >
-            <el-row>
-                <el-col :span="6">
-                    <el-form-item prop="deviceName">
-                        <el-input
-                            style="width: 100%"
-                            v-model.trim="queryParams.deviceName"
-                            clearable
-                            placeholder="请输入装备名称"
-                        />
-                    </el-form-item>
-                </el-col>
-                <el-col :span="6">
-                    <el-form-item prop="orderStatus">
-                        <el-select
-                            v-model="queryParams.orderStatus"
-                            placeholder="请选择订单状态"
-                            style="width: 100%"
-                            clearable
-                        >
-                            <el-option
-                                v-for="item in statusList"
-                                :key="item.id"
-                                :label="item.name"
-                                :value="item.id"
-                            />
-                        </el-select>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="6">
-                    <el-form-item prop="dateRange">
-                        <el-date-picker
-                            v-model="time"
-                            type="daterange"
-                            unlink-panels
-                            range-separator="-"
-                            start-placeholder="开始时间"
-                            end-placeholder="结束时间"
-                            style="width: 100%"
-                        />
-                    </el-form-item>
-                </el-col>
-
-                <el-col :span="6">
-                    <el-form-item prop="czcompanyName">
-                        <el-input
-                            v-model.trim="queryParams.czcompanyName"
-                            clearable
-                            maxlength="20"
-                            placeholder="出租单位"
-                            style="width: 100%"
-                        />
-                    </el-form-item>
-                </el-col>
-            </el-row>
-
-            <el-row>
-                <el-col :span="6">
-                    <el-form-item prop="companyName">
-                        <el-input
-                            v-model.trim="queryParams.companyName"
-                            clearable
-                            maxlength="20"
-                            placeholder="承租单位"
-                        />
-                    </el-form-item>
-                </el-col>
-                <el-col :span="6">
-                    <el-input
-                        v-model.trim="queryParams.lowerBound"
-                        placeholder="租金/元"
-                        clearable
-                        maxlength="20"
-                        style="width: 45%"
-                    />
-                    <span style="display: inline-block; width: 5%; text-align: center"> - </span>
-                    <el-input
-                        v-model.trim="queryParams.upperBound"
-                        placeholder="租金/元"
-                        clearable
-                        maxlength="20"
-                        style="width: 45%"
-                    />
-                </el-col>
-                <el-col :span="12">
-                    <el-form-item>
-                        <el-button type="primary" @click="queryTableList">查询</el-button>
-                        <el-button @click="resetTableList(queryFormRef)">重置</el-button>
-                    </el-form-item>
-                </el-col>
-            </el-row>
-        </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">
-                        <span> 订单编号： </span>
-                        <span>
-                            {{ item.code }}
-                        </span>
-                    </el-col>
-                    <el-col :span="8">
-                        <span> 下单时间： </span>
-                        <span>
-                            {{ item.orderTime }}
-                        </span>
-                    </el-col>
-                    <el-col :span="8">
-                        <span> 装备所属公司： </span>
-                        <span>
-                            {{ item.czcompanyName }}
-                        </span>
-                    </el-col>
-                </el-row>
-                <el-row
-                    style="border-bottom: 1px solid #ccc; margin-bottom: 10px"
-                    class="order-title-info"
-                >
-                    <el-col :span="8">
-                        <span> 出租方联系电话： </span>
-                        <span>
-                            {{ item.personPhone }}
-                        </span>
-                    </el-col>
-                    <el-col :span="8">
-                        <span> 承租方联系电话： </span>
-                        <span>
-                            {{ item.phoneNumber }}
-                        </span>
-                    </el-col>
-                    <el-col :span="8">
-                        <span> 承租方地址： </span>
-                        <span>
-                            {{ item.czcompanyName }}
-                        </span>
-                    </el-col>
-                </el-row>
-
-                <el-row>
-                    <el-col :span="8">
-                        <div
-                            v-for="(goods, j) in item.detailsList"
-                            :key="j"
-                            class="order-items order-info"
-                            :style="
-                                j != item.detailsList.length - 1
-                                    ? 'border-bottom:1px solid #eee'
-                                    : ''
-                            "
-                        >
-                            <img :src="goods.url" style="width: 160px; height: 120px" alt="" />
-                            <div
-                                style="
-                                    flex: 1;
-                                    display: flex;
-                                    justify-content: space-around;
-                                    flex-direction: column;
-                                    padding-left: 12px;
-                                "
-                            >
-                                <el-row style="color: #169bd5; font-weight: bold">
-                                    {{ goods.deviceName }}
-                                </el-row>
-                                <el-row>
-                                    <el-col :span="4"> 租期 </el-col>
-                                    <el-col :span="18"> {{ goods.days }}{{ ' ' + '天' }} </el-col>
-                                </el-row>
-                                <el-row>
-                                    <el-col :span="4"> 租金 </el-col>
-                                    <el-col :span="8">
-                                        {{ goods.dayLeasePrice }}{{ ' ' + '元/天' }}
-                                    </el-col>
-                                    <el-col :span="4"> 数量 </el-col>
-                                    <el-col :span="8"> {{ goods.num }}{{ ' ' + '台' }} </el-col>
-                                </el-row>
-                            </div>
-                        </div>
-                    </el-col>
-                    <el-col :span="3" class="order-items-info">
-                        <div>总费用</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="3" class="order-items-info">
-                        <div
-                            v-if="item.orderStatus == '2'"
-                            style="
-                                font-size: 14px;
-                                font-weight: bold;
-                                margin-bottom: 10px;
-                                color: blue;
-                            "
-                        >
-                            {{ '待出库' }}
-                        </div>
-                        <div
-                            v-if="item.orderStatus == '3'"
-                            style="
-                                font-size: 14px;
-                                font-weight: bold;
-                                margin-bottom: 10px;
-                                color: #c76f60;
-                            "
-                        >
-                            {{ '待收货' }}
-                        </div>
-                        <div
-                            v-if="item.orderStatus == '4' && isExpired(item)"
-                            style="
-                                font-size: 14px;
-                                font-weight: bold;
-                                margin-bottom: 10px;
-                                color: #008d06;
-                            "
-                        >
-                            {{ '租赁中' }}
-                            <span style="color: red">(已过期)</span>
-                        </div>
-                        <div
-                            v-if="item.orderStatus == '4' && !isExpired(item)"
-                            style="
-                                font-size: 14px;
-                                font-weight: bold;
-                                margin-bottom: 10px;
-                                color: #008d06;
-                            "
-                        >
-                            {{ '租赁中' }}
-                        </div>
-                        <div
-                            v-if="item.orderStatus == '5'"
-                            style="
-                                font-size: 14px;
-                                font-weight: bold;
-                                margin-bottom: 10px;
-                                color: #5b33cc;
-                            "
-                        >
-                            {{ '已退租' }}
-                        </div>
-                        <div
-                            v-if="item.orderStatus == '6'"
-                            style="
-                                font-size: 14px;
-                                font-weight: bold;
-                                margin-bottom: 10px;
-                                color: #c00017;
-                            "
-                        >
-                            {{ '已完成' }}
-                        </div>
-                        <div
-                            v-if="item.orderStatus == '7'"
-                            style="
-                                font-size: 14px;
-                                font-weight: bold;
-                                margin-bottom: 10px;
-                                color: #797979;
-                            "
-                        >
-                            {{ '已驳回' }}
-                        </div>
-                    </el-col>
-                    <el-col :span="6" class="handle-btn">
-                        <el-button
-                            v-if="item.orderStatus == '3'"
-                            type="primary"
-                            size="small"
-                            @click="confirmReceipt(index)"
-                            >确认收货</el-button
-                        >
-                        <el-button
-                            v-if="item.orderStatus == '2'"
-                            type="primary"
-                            size="small"
-                            @click="confirmFail(index)"
-                            >取消</el-button
-                        >
-
-                        <el-button @click="handleViewOrder(j, item)" type="primary" size="small">
-                            订单详情
-                        </el-button>
-                        <el-button @click="handleViewWord(j)" type="primary" size="small">
-                            租赁协议
-                        </el-button>
-                        <el-button
-                            v-if="item.orderStatus == '4'"
-                            @click="handleViewBack(item)"
-                            type="primary"
-                            size="small"
-                        >
-                            发起退租
-                        </el-button>
-                        <el-button
-                            v-if="item.orderStatus == '6'"
-                            @click="handleViewList(item.orderId)"
-                            type="primary"
-                            size="small"
-                        >
-                            费用清单
-                        </el-button>
-                        <el-button
-                            v-if="item.orderStatus == 5 && item.isLeaseContent == 1"
-                            @click="onViewOverhaulDetails()"
-                            type="primary"
-                            size="small"
-                        >
-                            检修详情
-                        </el-button>
-                        <el-button
-                            v-if="item.orderStatus == 5 && item.isLeaseContent == 1"
-                            @click="onCostConfirm(item.orderId)"
-                            type="primary"
-                            size="small"
-                        >
-                            费用确认
-                        </el-button>
-                    </el-col>
-                </el-row>
-            </div>
-        </template>
-
-        <!-- <template v-if="cardList.length > 0">
-            <div class="cart-tbody" v-for="(item, index) in cardList" :key="index">
-                <el-row style="border-bottom: 1px solid #ccc">
-                    <el-col :span="1">
-                        <div style="text-align: center">
-                            <el-checkbox
-                                :key="numberTemp"
-                                v-model="item.isChecked"
-                                @change="onChangeCompany($event, index, item)"
-                            >
-                            </el-checkbox>
-                        </div>
-                    </el-col>
-                    <el-col :span="19">
-                        <el-row>
-                            <el-col :span="6">
-                                <div
-                                    class="item"
-                                    style="
-                                        flex-shrink: 0;
-                                        margin-bottom: 5px;
-                                        font-size: 15px;
-                                        margin-top: 5px;
-                                    "
-                                >
-                                    <span>订单编号:</span>
-                                    {{ item.code }}
-                                </div>
-                            </el-col>
-                            <el-col :span="7">
-                                <div
-                                    class="item"
-                                    style="
-                                        flex-shrink: 0;
-                                        margin-bottom: 5px;
-                                        font-size: 15px;
-                                        margin-top: 5px;
-                                    "
-                                >
-                                    <span>下单时间:</span>
-                                    {{ item.orderTime }}
-                                </div>
-                            </el-col>
-                            <el-col :span="7">
-                                <div
-                                    class="item"
-                                    style="
-                                        flex-shrink: 0;
-                                        margin-bottom: 5px;
-                                        font-size: 15px;
-                                        margin-top: 5px;
-                                    "
-                                >
-                                    <span>装备所属公司:</span>
-                                    {{ item.czcompanyName }}
-                                </div>
-                            </el-col>
-
-                            <el-col :span="4">
-                                <div
-                                    style="
-                                        flex-shrink: 0;
-                                        margin-bottom: 1px;
-                                        font-size: 7px;
-                                        display: flex;
-                                        justify-content: center;
-                                        margin-top: 5px;
-                                    "
-                                >
-                                    <el-button
-                                        v-if="item.orderStatus == '3'"
-                                        class="item"
-                                        type="success"
-                                        size="mimi"
-                                        @click="confirmReceipt(index)"
-                                        >确认收货</el-button
-                                    >
-                                </div>
-                            </el-col>
-                        </el-row>
-
-                        <el-row>
-                            <el-col :span="6">
-                                <div
-                                    class="item"
-                                    style="
-                                        flex-shrink: 0;
-                                        margin-bottom: 5px;
-                                        font-size: 15px;
-                                        margin-top: 5px;
-                                    "
-                                >
-                                    <span>出租方电话:</span>
-                                    {{ item.personPhone }}
-                                </div>
-                            </el-col>
-                            <el-col :span="7">
-                                <div
-                                    class="item"
-                                    style="
-                                        flex-shrink: 0;
-                                        margin-bottom: 5px;
-                                        font-size: 15px;
-                                        margin-top: 5px;
-                                    "
-                                >
-                                    <span>承租方电话:</span>
-                                    {{ item.phoneNumber }}
-                                </div>
-                            </el-col>
-                            <el-col :span="7">
-                                <div
-                                    class="item"
-                                    style="
-                                        flex-shrink: 0;
-                                        margin-bottom: 5px;
-                                        font-size: 15px;
-                                        margin-top: 5px;
-                                    "
-                                >
-                                    <span>承租方地址:</span>
-                                    {{ item.companyName }}
-                                </div>
-                            </el-col>
-                        </el-row>
-                    </el-col>
-                    <el-col :span="4">
-                        <div>
-                            <el-button
-                                v-if="item.orderStatus == '2'"
-                                class="item"
-                                type="primary"
-                                @click="confirmFail(index)"
-                                >取消</el-button
-                            >
-                        </div>
-                    </el-col>
-                </el-row>
-
-                <el-row
-                    class="cart-listAll"
-                    :style="{ background: item.orderStatus == '2' ? '#EBEEF5' : 'white' }"
-                >
-                    <el-col :span="1"> </el-col>
-
-                    <el-col :span="7">
-                        <el-row class="cart-list" v-for="(goods, j) in item.detailsList" :key="j">
-                            <el-col 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
-                                        style="
-                                            display: flex;
-                                            justify-content: space-between;
-                                            width: 100%;
-                                        "
-                                    >
-                                        <div style="flex: 1; text-align: left; width: 220px">
-                                            租金：{{ goods.dayLeasePrice }}{{ ' ' + '元/天' }}
-                                        </div>
-                                        <div style="flex: 1; text-align: left">
-                                            数量：{{ goods.num }}{{ ' ' + '台' }}
-                                        </div>
-                                    </div>
-                                </div>
-                            </el-col>
-                        </el-row>
-                    </el-col>
-                    <el-col :span="3">
-                        <div style="font-size: 14px; font-weight: bold; margin-bottom: 10px">
-                            总费用
-                        </div>
-                        <div class="red-font">{{ item.cost }}</div>
-                    </el-col>
-                    <el-col :span="4">
-                        <div style="font-size: 14px; font-weight: bold; margin-bottom: 10px">
-                            租期
-                        </div>
-                        <div style="color: black; font-weight: bold">
-                            {{ item.startTime }}
-                        </div>
-                        <div style="margin-top: 3px; margin-bottom: 3px">{{ '至' }}</div>
-                        <div style="color: black; font-weight: bold">{{ item.endTime }}</div>
-                    </el-col>
-                    <el-col :span="4">
-                        <div
-                            v-if="item.orderStatus == '2'"
-                            style="
-                                font-size: 14px;
-                                font-weight: bold;
-                                margin-bottom: 10px;
-                                color: blue;
-                            "
-                        >
-                            {{ '待出库' }}
-                        </div>
-                        <div
-                            v-if="item.orderStatus == '3'"
-                            style="
-                                font-size: 14px;
-                                font-weight: bold;
-                                margin-bottom: 10px;
-                                color: #c76f60;
-                            "
-                        >
-                            {{ '待收货' }}
-                        </div>
-                        <div
-                            v-if="item.orderStatus == '4' && isExpired(item)"
-                            style="
-                                font-size: 14px;
-                                font-weight: bold;
-                                margin-bottom: 10px;
-                                color: #008d06;
-                            "
-                        >
-                            {{ '租赁中' }}
-                            <span style="color: red">(已过期)</span>
-                        </div>
-                        <div
-                            v-if="item.orderStatus == '4' && !isExpired(item)"
-                            style="
-                                font-size: 14px;
-                                font-weight: bold;
-                                margin-bottom: 10px;
-                                color: #008d06;
-                            "
-                        >
-                            {{ '租赁中' }}
-                        </div>
-                        <div
-                            v-if="item.orderStatus == '5'"
-                            style="
-                                font-size: 14px;
-                                font-weight: bold;
-                                margin-bottom: 10px;
-                                color: #5b33cc;
-                            "
-                        >
-                            {{ '已退租' }}
-                        </div>
-                        <div
-                            v-if="item.orderStatus == '6'"
-                            style="
-                                font-size: 14px;
-                                font-weight: bold;
-                                margin-bottom: 10px;
-                                color: #c00017;
-                            "
-                        >
-                            {{ '已完成' }}
-                        </div>
-                        <div
-                            v-if="item.orderStatus == '7'"
-                            style="
-                                font-size: 14px;
-                                font-weight: bold;
-                                margin-bottom: 10px;
-                                color: #797979;
-                            "
-                        >
-                            {{ '已驳回' }}
-                        </div>
-                    </el-col>
-                    <el-col :span="5">
-                        <div>
-                            <el-button
-                                @click="handleViewOrder(j, item)"
-                                type="primary"
-                                size="small"
-                                style="color: #blue; font-weight: bold"
-                            >
-                                订单详情
-                            </el-button>
-                            <el-button
-                                @click="handleViewWord(j)"
-                                type="primary"
-                                size="small"
-                                style="color: #blue; font-weight: bold"
-                            >
-                                租赁协议
-                            </el-button>
-                            <el-button
-                                v-if="item.orderStatus == '4'"
-                                @click="handleViewBack(item)"
-                                type="primary"
-                                size="small"
-                                style="color: #blue; font-weight: bold"
-                            >
-                                发起退租
-                            </el-button>
-                            <el-button
-                                v-if="item.orderStatus == '6'"
-                                @click="handleViewList(j)"
-                                type="primary"
-                                size="small"
-                                style="color: #blue; font-weight: bold"
-                            >
-                                费用清单
-                            </el-button>
-                        </div>
-                    </el-col>
-                </el-row>
-            </div>
-        </template> -->
-
-        <el-empty v-else />
-        <PagingComponent
-            v-if="total > 0"
-            @getList="getList"
-            :pageSize="pageSize"
-            :pageNumber="pageNumber"
-            :total="total"
-        />
-    </div>
-    <!-- 费用清单弹框 -->
-    <el-dialog
-        v-model="dialogFormVisibleSettleList"
-        :title="settleListTitle"
-        width="65%"
-        align-center
-    >
-        <el-row
-            style="
-                display: flex;
-                justify-content: space-between;
-                letter-spacing: 1px;
-                padding: 0 10px 20px;
-            "
-        >
-            <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.rentEndTime }}</span>
-            </div>
-        </el-row>
-        <el-row
-            style="
-                display: flex;
-                letter-spacing: 1px;
-                justify-content: space-between;
-                padding: 0 10px 20px;
-            "
-        >
-            <div style="flex: 1">
-                <span>结算单位：</span>
-                <span>{{ overhaulDetails.leaseCompany }}</span>
-            </div>
-            <div style="flex: 1">
-                <span>租赁天数：</span>
-                <span>{{ overhaulDetails.rentDay }}</span>
-            </div>
-            <div style="flex: 1; color: transparent">
-                <span>租赁天数：</span>
-                <span>999</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
-            :data="orderDetailDtoList"
-            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="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.rentBeginTime}至${row.rentEndTime} ` }}
-                </template>
-            </el-table-column>
-            <el-table-column prop="costs" align="center" label="租赁费用(元)" width="160" />
-        </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 prop="repairPrice" 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 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 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 v-model="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>
-        <template #footer v-if="settleListTitle === '费用确认'">
-            <span class="dialog-footer">
-                <el-button
-                    type="primary"
-                    @click="
-                        () => {
-                            dialogFormVisibleSettleList = false
-                        }
-                    "
-                    >关 闭</el-button
-                >
-                <el-button @click="costSubmit" type="primary"> 确认 </el-button>
-            </span>
-        </template>
-    </el-dialog>
-
-    <!-- 租赁协议 -->
-    <el-dialog
-        v-model="dialogFormVisibleSettleWord"
-        :title="settleWordTitle"
-        width="50%"
-        align-center
-        destroy-on-close
-        :close-on-click-modal="false"
-    >
-        <div style="display: flex; justify-content: center">
-            <img src="@/assets/img/zuLin.png" style="width: 100%; height: 600px" />
-        </div>
-        <template #footer>
-            <span class="dialog-footer">
-                <el-button type="primary" @click="dialogFormVisibleSettleWord = false"
-                    >关 闭</el-button
-                >
-                <el-button @click="submitBtn" type="success"> 下载 </el-button>
-            </span>
-        </template>
-    </el-dialog>
-</template>
-
 <style lang="scss" scoped>
-.logo {
-    padding: 15px 0;
-    display: flex;
-    margin-left: 80px;
-}
-.title {
-    margin: 10px;
-    margin-left: 20px;
-    display: flex;
-    align-items: center;
-}
-.title-sign {
-    display: inline-block;
-    width: 4px;
-    height: 16px;
-    background: #409eff;
-    margin-left: 45px;
-}
-.title-text {
-    font-weight: 700;
-    margin-left: 10px;
-}
-.uploadBox {
-    margin: 20px 40px;
-}
-.labelBox {
-    width: auto;
-    height: auto;
-    display: flex;
-    align-items: center;
-    margin-bottom: 20px;
-}
-.imgsBox {
-    width: auto;
-    height: auto;
-    display: flex;
-    align-items: center;
-    margin-bottom: 30px;
-    margin-left: 20px;
-
-    .imgItem {
-        width: 160px;
-        height: 160px;
-        margin-right: 40px;
-        border: 1px dashed #bbb;
-        position: relative;
-        .picture-card {
-            width: 160px;
-            height: 160px;
-        }
-        .icon-list {
-            width: 60px;
-            height: 20px;
-            position: absolute;
-            top: 70px;
-            left: 40px;
-            display: flex;
-            align-items: center;
-        }
-        .imgItem__icon {
-            margin: 0 5px;
-        }
-        .file-name {
-            font-size: 10px;
-        }
-    }
-
-    .hide {
-        display: none;
-    }
-    .imgItem:hover .hide {
-        display: block;
-    }
-}
-.tipBox {
-    color: red;
-    font-size: 12px;
-    margin-left: 20px;
-}
-.container {
-    // width: 800px;
-    // margin: 0 auto;
-    // padding: 10px;
-    background: #eeeff6;
-    font-size: 14px;
-
-    .cart-title {
-        margin-top: 10px;
-        padding: 10px 0;
-        display: flex;
-        align-items: center;
-        font-size: 14px;
-        font-weight: bold;
-        letter-spacing: 1px;
-    }
-
-    .cart-title div:first-child {
-        width: 5px;
-        height: 20px;
-        background-color: #4fabfe;
-    }
-
-    .cart-th {
-        margin: 15px 0;
-        div {
-            text-align: center;
-        }
-    }
-
-    .cart-tbody {
-        background: #fff;
-        padding: 8px 12px;
-        margin-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;
-
-            .code,
-            .orderTime {
-                padding: 3px 18px;
-                border: 1px solid #ccc;
-            }
-
-            .czcompanyName {
-                margin-left: 20px;
-                border-right: none;
-            }
-        }
-
-        .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;
-                    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;
-                }
-
-                .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;
-            }
-        }
-    }
-
-    .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%;
-}
-
-.empty-container {
-    background: url('@/assets/img/empty_bg.png') no-repeat;
-    width: 300px;
-    height: 60px !important;
-    background-color: skyblue;
-    z-index: 9999;
-}
-
-.order-title-info {
-    padding: 6px 4px;
-    font-size: 14px;
-    color: #999;
-}
-
-.order-items {
-    border-right: 1px solid #eee;
-}
-
-.order-info {
-    display: flex;
-    padding: 10px 0;
-}
-
-.order-items-info {
+.order-container {
+    width: 100%;
+    height: 100%;
     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;
-}
-
-.handle-btn {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    .el-button {
-        width: calc((100% - 50px) / 4);
-        margin: 0;
-        margin-left: 10px !important;
-    }
 }
 </style>
diff --git a/src/views/user/sourcingNeed/index.vue b/src/views/user/sourcingNeed/index.vue
index eb6f586..8d48c4a 100644
--- a/src/views/user/sourcingNeed/index.vue
+++ b/src/views/user/sourcingNeed/index.vue
@@ -212,13 +212,6 @@
             :model="addOrEditForm"
             :rules="addOrEditFormRules"
         >
-            <el-row :gutter="20">
-                <el-col :span="24">
-                    <el-form-item label="需求名称" prop="leaseName">
-                        <el-input v-model="addOrEditForm.leaseName" placeholder="请输入需求名称" />
-                    </el-form-item>
-                </el-col>
-            </el-row>
             <el-row :gutter="20">
                 <el-col :span="24">
                     <el-form-item label="项目所在地" style="width: 100%" prop="provinceCode">
@@ -291,6 +284,26 @@
                     </el-form-item>
                 </el-col>
             </el-row>
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item label="需求名称" prop="leaseName">
+                        <el-input v-model="addOrEditForm.leaseName" placeholder="请输入需求名称" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="需求截止日期" prop="endTime">
+                        <el-date-picker
+                            clearable
+                            type="date"
+                            style="width: 100%"
+                            value-format="YYYY-MM-DD"
+                            :disabled-date="disabledDate"
+                            v-model="addOrEditForm.endTime"
+                            placeholder="请选择需求截止日期"
+                        />
+                    </el-form-item>
+                </el-col>
+            </el-row>
             <el-row :gutter="20">
                 <el-col :span="12">
                     <el-form-item label="联系人" prop="person">
@@ -313,33 +326,34 @@
             </el-row>
             <el-row :gutter="20">
                 <el-col :span="12">
-                    <el-form-item label="需求截止日期" prop="endTime">
+                    <el-form-item label="租赁开始日期" prop="leaseStartTime">
                         <el-date-picker
                             clearable
                             type="date"
                             style="width: 100%"
                             value-format="YYYY-MM-DD"
                             :disabled-date="disabledDate"
-                            v-model="addOrEditForm.endTime"
+                            v-model="addOrEditForm.leaseStartTime"
                             placeholder="请选择需求截止日期"
                         />
                     </el-form-item>
                 </el-col>
                 <el-col :span="12">
-                    <el-form-item label="预估租期(天)" prop="leaseDay">
-                        <el-input-number
-                            :min="1"
+                    <el-form-item label="租赁结束日期" prop="leaseEndTime">
+                        <el-date-picker
                             clearable
-                            :max="9999"
+                            type="date"
                             style="width: 100%"
-                            placeholder="请输入预估租期"
-                            v-model="addOrEditForm.leaseDay"
+                            value-format="YYYY-MM-DD"
+                            :disabled-date="disabledLeaseEndTime"
+                            v-model="addOrEditForm.leaseEndTime"
+                            placeholder="请选择需求截止日期"
                         />
                     </el-form-item>
                 </el-col>
             </el-row>
 
-            <el-row :gutter="20">
+            <!-- <el-row :gutter="20">
                 <el-col :span="24">
                     <el-form-item label="1" style="margin-bottom: 0" class="upload-tip">
                         支持格式：.jpg、.png 单个文件大小不能超过2M，最多可上传4张
@@ -383,7 +397,7 @@
                         </UploadComponentNew>
                     </el-form-item>
                 </el-col>
-            </el-row>
+            </el-row> -->
             <el-row :gutter="20">
                 <el-col :span="24">
                     <el-form-item label="需求描述" prop="description">
@@ -471,6 +485,19 @@
                     </el-form-item>
                 </el-col>
             </el-row>
+            <el-row :gutter="24">
+                <el-col :span="12">
+                    <el-form-item label="装备描述">
+                        <el-input
+                            clearable
+                            type="textarea"
+                            placeholder="请输入装备描述"
+                            v-model="item.description"
+                            :autosize="{ minRows: 2, maxRows: 4 }"
+                        />
+                    </el-form-item>
+                </el-col>
+            </el-row>
             <el-row :gutter="20">
                 <el-col :span="24">
                     <el-form-item label="1" style="margin-bottom: 0" class="upload-tip">
@@ -602,7 +629,9 @@ const addOrEditForm = ref<any>({
     companyId: '',
     person: '',
     personPhone: '',
-    leaseDay: 1,
+    // leaseDay: 1,
+    leaseStartTime: '',
+    leaseEndTime: '',
     endTime: '',
     description: '',
     isSubmit: '',
@@ -619,7 +648,9 @@ const addOrEditFormTemp = ref<any>({
     companyId: '',
     person: '',
     personPhone: '',
-    leaseDay: 1,
+    leaseStartTime: '',
+    leaseEndTime: '',
+    // leaseDay: 1,
     endTime: '',
     description: '',
     isSubmit: '',
@@ -632,9 +663,30 @@ const addOrEditFormTemp = ref<any>({
     detailsList: [],
 })
 
+const checkEndTime = (rule: any, value: any, callback: any) => {
+    if (!value) {
+        return callback(new Error('请选择租赁结束日期'))
+    }
+    const startTime = addOrEditForm.value.leaseStartTime
+    if (startTime && new Date(value) <= new Date(startTime)) {
+        return callback(new Error('租赁结束日期必须大于租赁开始日期'))
+    }
+    callback()
+}
+const checkStartTime = (rule: any, value: any, callback: any) => {
+    if (!value) {
+        return callback(new Error('请选择租赁开始日期'))
+    }
+    const endTime = addOrEditForm.value.leaseEndTime
+    if (endTime && new Date(value) >= new Date(endTime)) {
+        return callback(new Error('租赁开始日期必须小于租赁结束日期'))
+    }
+    callback()
+}
+
 const addOrEditFormRules = reactive({
     person: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
-    leaseDay: [{ required: true, message: '请输入预估租期', trigger: 'blur' }],
+    // leaseDay: [{ required: true, message: '请输入预估租期', trigger: 'blur' }],
     leaseName: [{ required: true, message: '请输入需求名称', trigger: 'blur' }],
     areaCode: [{ required: true, message: '请选择项目所在区/县', trigger: 'change' }],
     cityCode: [{ required: true, message: '请选择项目所在市', trigger: 'change' }],
@@ -643,6 +695,14 @@ const addOrEditFormRules = reactive({
     companyId: [{ required: true, message: '请选择租赁公司', trigger: 'change' }],
     fileInfoList: [{ required: true, message: '请上传参考图片', trigger: 'blur' }],
     endTime: [{ required: true, message: '请选择需求截止日期', trigger: 'change' }],
+    leaseStartTime: [
+        { required: true, message: '请选择租赁开始日期', trigger: 'change' },
+        { validator: checkStartTime, trigger: 'blur' },
+    ],
+    leaseEndTime: [
+        { required: true, message: '请选择需租赁结束日期', trigger: 'change' },
+        { validator: checkEndTime, trigger: 'blur' },
+    ],
     detailsList: [{ required: true, message: '请添加需求装备信息', trigger: 'change' }],
     personPhone: [
         { required: true, message: '请输入联系电话', trigger: 'blur' },
@@ -664,6 +724,11 @@ const disabledDate = (date: any) => {
     return date.getTime() < today.getTime()
 }
 
+const disabledLeaseEndTime = (date: any) => {
+    const today = new Date()
+    return date.getTime() < today.getTime()
+}
+
 const getClassAndCompanyData = async () => {
     const classResult: any = await getGoodsClassListApi()
     const companyResult: any = await getCompanyListApi()
@@ -728,7 +793,7 @@ const onRepublish = async (id: any, type: any, leaseStatus: any) => {
         companyId,
         person,
         personPhone,
-        leaseDay,
+        // leaseDay,
         endTime,
         description,
         fileInfoList,
@@ -737,6 +802,8 @@ const onRepublish = async (id: any, type: any, leaseStatus: any) => {
         cityCode,
         provinceCode,
         detailsList,
+        leaseStartTime,
+        leaseEndTime,
     } = res.data
 
     Object.assign(addOrEditForm.value, {
@@ -744,7 +811,7 @@ const onRepublish = async (id: any, type: any, leaseStatus: any) => {
         companyId,
         person,
         personPhone,
-        leaseDay,
+        // leaseDay,
         endTime,
         description,
         id,
@@ -754,6 +821,8 @@ const onRepublish = async (id: any, type: any, leaseStatus: any) => {
         cityCode,
         provinceCode,
         detailsList,
+        leaseStartTime,
+        leaseEndTime,
     })
 
     detailsList.forEach((e: any) => {
@@ -875,6 +944,7 @@ const onAddDemandInfo = () => {
         leaseNum: 1,
         fileInfoList: [],
         fileInfoTempList: [],
+        description: '',
     })
 }