承租方订单页面优化

components.d.ts

@@ -18,13 +18,11 @@ declare module 'vue' {
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
-    ElCountdown: typeof import('element-plus/es')['ElCountdown']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElEmpty: typeof import('element-plus/es')['ElEmpty']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
-    ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
@@ -32,7 +30,6 @@ declare module 'vue' {
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
-    ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
     ElProgress: typeof import('element-plus/es')['ElProgress']

env/.env.dev

@@ -10,8 +10,8 @@ VITE_API_URL = '/proxyApi'
 # VITE_proxyTarget = 'http://192.168.2.246:28080'  # 马帅 
 # VITE_proxyTarget = 'http://192.168.2.127:28080'  # 梁超 
 # VITE_proxyTarget = 'http://36.33.26.201:17788/proxyApi'  # 测试服务
-VITE_proxyTarget = 'http://192.168.0.244:28580'  # 测试服务
+# VITE_proxyTarget = 'http://192.168.0.244:28580'  # 测试服务
-# VITE_proxyTarget = 'http://192.168.2.129:18080'  # 马帅j
+VITE_proxyTarget = 'http://192.168.2.72:28080'  # 马帅j
 
 # VITE_proxyTarget = 'http://10.40.92.185:9206'  # 赵福海 ( 设备类型) 
 # VITE_proxyTarget = 'http://10.40.92.16:9502'  # 牛 (个人中心 基础信息企业申请认证) 

src/views/cart/index.vue

@@ -271,32 +271,32 @@ onMounted(() => {
 //     }
 // }
 const onLeaseDateChange = (value: any, companyIndex: number, goodsIndex: number) => {
-    // if (!value) {
-    //     cardList.value[companyIndex].devInfoVoList[goodsIndex].rentBeginTime = ''
-    //     cardList.value[companyIndex].devInfoVoList[goodsIndex].rentEndTime = ''
-    //     cardList.value[companyIndex].devInfoVoList[goodsIndex].days = 0
-    // } else {
-    //     cardList.value[companyIndex].devInfoVoList[goodsIndex].rentBeginTime = value[0]
-    //     cardList.value[companyIndex].devInfoVoList[goodsIndex].rentEndTime = value[1]
-    //     cardList.value[companyIndex].devInfoVoList[goodsIndex].days = moment(value[1]).diff(
-    //         value[0],
-    //         'day',
-    //     )
-    // }
-
-    cardList.value.forEach((e: any) => {
-        e.devInfoVoList.forEach((j: any) => {
     if (!value) {
-                j.rentBeginTime = ''
+        cardList.value[companyIndex].devInfoVoList[goodsIndex].rentBeginTime = ''
-                j.rentEndTime = ''
+        cardList.value[companyIndex].devInfoVoList[goodsIndex].rentEndTime = ''
-                j.days = 0
+        cardList.value[companyIndex].devInfoVoList[goodsIndex].days = 0
     } else {
-                j.rentBeginTime = value[0]
+        cardList.value[companyIndex].devInfoVoList[goodsIndex].rentBeginTime = value[0]
-                j.rentEndTime = value[1]
+        cardList.value[companyIndex].devInfoVoList[goodsIndex].rentEndTime = value[1]
-                j.days = moment(value[1]).diff(value[0], 'day')
+        cardList.value[companyIndex].devInfoVoList[goodsIndex].days = moment(value[1]).diff(
+            value[0],
+            'day',
+        )
     }
-        })
+
-    })
+    // cardList.value.forEach((e: any) => {
+    //     e.devInfoVoList.forEach((j: any) => {
+    //         if (!value) {
+    //             j.rentBeginTime = ''
+    //             j.rentEndTime = ''
+    //             j.days = 0
+    //         } else {
+    //             j.rentBeginTime = value[0]
+    //             j.rentEndTime = value[1]
+    //             j.days = moment(value[1]).diff(value[0], 'day')
+    //         }
+    //     })
+    // })
 }
 
 // 删除按钮

src/views/user/orderManagement/components/order-details.vue

@@ -369,6 +369,7 @@ if (props.orderStatus == 7) {
                                 ? 'border-bottom:1px solid #eee'
                                 : ''
                         "
+                        style="min-height: 140px"
                     >
                         <el-image
                             :src="goods.url"
@@ -378,6 +379,7 @@ if (props.orderStatus == 7) {
                         />
                         <div
                             style="
+                                min-height: 140px;
                                 flex: 1;
                                 display: flex;
                                 justify-content: space-around;
@@ -404,15 +406,39 @@ if (props.orderStatus == 7) {
                         </div>
                     </div>
                 </el-col>
+
                 <el-col :span="5" class="order-items-info">
-                    <div>总费用</div>
+                    <div
-                    <div class="red-font">{{ orderDetails.cost }} 元</div>
+                        v-for="(goods, j) in orderDetails.detailsList"
-                </el-col>
+                        :key="j"
-                <el-col :span="5" class="order-items-info" style="border: none">
+                        class="order-items order-info"
+                        :style="
+                            j != orderDetails.detailsList.length - 1
+                                ? 'border-bottom:1px solid #eee'
+                                : ''
+                        "
+                        style="min-height: 140px; width: 100%"
+                    >
+                        <div
+                            style="
+                                width: 100%;
+                                display: flex;
+                                justify-content: center;
+                                align-items: center;
+                                flex-direction: column;
+                            "
+                        >
                             <div>租期</div>
                             <div style="font-weight: bold; margin-top: 10px">
-                        {{ orderDetails.startTime }}至{{ orderDetails.endTime }}
+                                {{ goods.rentBeginTime }}至{{ goods.rentEndTime }}
                             </div>
+                        </div>
+                    </div>
+                </el-col>
+
+                <el-col :span="5" class="order-items-info" style="border: none">
+                    <div>总费用</div>
+                    <div class="red-font">{{ orderDetails.cost }} 元</div>
                 </el-col>
             </el-row>
         </div>
@@ -592,6 +618,7 @@ if (props.orderStatus == 7) {
 .order-info {
     display: flex;
     padding: 10px 0;
+    align-items: center;
 }
 
 .order-items-info {

src/views/user/orderManagement/components/order-home.vue

@@ -46,17 +46,27 @@ const pageNumber = 1
 const total: any = ref(0)
 const cardList = ref<any>([])
 const status = 0
-const statusList = [
+const statusList: any = [
     { id: '1', name: '待接单' },
     { id: '2', name: '待出库' },
     { id: '3', name: '待收货' },
     { id: '4', name: '租赁中' },
-    { id: '5', name: '已退租' },
+    { id: '5', name: '已退租待结算' },
-    { id: '6', name: '已完成' },
+    { id: '6', name: '结算待确认' },
     { id: '7', name: '已完成' },
     { id: '8', name: '已驳回' },
 ]
 
+const orderText = (status: any) => {
+    return statusList.filter((e: any) => e.id == status)[0].name
+}
+const orderType = (status: any) => {
+    if (status == 1 || status == 2 || status == 3 || status == 5) return 'primary'
+    if (status == 4 || status == 7) return 'success'
+    if (status == 5 || status == 6) return 'warning'
+    if (status == 8) return 'danger'
+}
+
 // const dateTimeConvert=(param:string)=>{
 //         const time = param;
 //         // 创建一个新的Date对象
@@ -183,16 +193,38 @@ const dialogVisible: any = ref(false)
 const dialogImageUrl = ref('')
 
 // 发起退租
-const handleViewBack = async (row: any) => {
+const handleViewBack = async (goods: any, row: any) => {
     ElMessageBox.confirm('是否确定发起退租？', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning',
+    })
+        .then(() => {
+            return passApi({ orderId: row.orderId, orderStatus: 5, maIds: [goods.maId] })
+        })
+        .then((res: any) => {
+            if (res.code === 200) {
+                ElMessage({
+                    type: 'success',
+                    message: '发起退租成功',
+                })
+                numberTemp.value = numberTemp.value + 1
+                getList()
+            }
+        })
+        .catch(() => {})
+}
+// 全部退租
+const handleViewBackAll = (row: any) => {
+    ElMessageBox.confirm('是否确定发起全部退租？', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
     })
         .then(() => {
             return passApi({ orderId: row.orderId, orderStatus: 5 })
         })
-        .then((res) => {
+        .then((res: any) => {
             if (res.code === 200) {
                 ElMessage({
                     type: 'success',
@@ -506,7 +538,17 @@ const costSubmit = () => {
                             {{ item.czcompanyName }}
                         </span>
                     </el-col>
+
+                    <div class="order-type-box">
+                        <el-tag
+                            style="padding: 6px 12px"
+                            :type="orderType(item.orderStatus)"
+                            effect="light"
+                            >{{ orderText(item.orderStatus) }}</el-tag
+                        >
+                    </div>
                 </el-row>
+
                 <el-row
                     style="border-bottom: 1px solid #ccc; margin-bottom: 10px"
                     class="order-title-info"
@@ -537,6 +579,7 @@ const costSubmit = () => {
                             v-for="(goods, j) in item.detailsList"
                             :key="j"
                             class="order-items order-info"
+                            style="min-height: 140px"
                             :style="
                                 j != item.detailsList.length - 1
                                     ? 'border-bottom:1px solid #eee'
@@ -547,6 +590,7 @@ const costSubmit = () => {
                             <div
                                 style="
                                     flex: 1;
+                                    min-height: 140px;
                                     display: flex;
                                     justify-content: space-around;
                                     flex-direction: column;
@@ -576,13 +620,50 @@ const costSubmit = () => {
                         <div class="red-font">{{ item.cost }} 元</div>
                     </el-col>
                     <el-col :span="4" class="order-items-info">
+                        <div
+                            v-for="(goods, j) in item.detailsList"
+                            :key="j"
+                            class="order-info"
+                            :style="
+                                j != item.detailsList.length - 1
+                                    ? 'border-bottom:1px solid #eee'
+                                    : ''
+                            "
+                            style="min-height: 140px"
+                        >
+                            <div
+                                style="
+                                    display: flex;
+                                    justify-content: center;
+                                    align-items: center;
+                                    flex-direction: column;
+                                "
+                            >
                                 <div>租期</div>
                                 <div style="font-weight: bold; margin-top: 10px">
-                            {{ item.startTime }}至{{ item.endTime }}
+                                    {{ goods.rentBeginTime }}至{{ goods.rentEndTime }}
+                                </div>
+                            </div>
                         </div>
                     </el-col>
                     <el-col :span="3" class="order-items-info">
                         <div
+                            v-for="(goods, j) in item.detailsList"
+                            :key="j"
+                            class="order-info"
+                            :style="
+                                j != item.detailsList.length - 1
+                                    ? 'border-bottom:1px solid #eee'
+                                    : ''
+                            "
+                            style="min-height: 140px; width: 95%"
+                        >
+                            <el-tag :type="orderType(goods.orderStatus)" effect="light">{{
+                                orderText(goods.orderStatus)
+                            }}</el-tag>
+                        </div>
+
+                        <!-- <div
                             v-if="item.orderStatus == '1'"
                             style="
                                 font-size: 14px;
@@ -681,16 +762,36 @@ const costSubmit = () => {
                             "
                         >
                             {{ '已驳回' }}
-                        </div>
+                        </div> -->
                     </el-col>
-                    <el-col :span="6" class="handle-btn">
+
+                    <el-col :span="2" class="order-items-info" v-if="item.orderStatus == 4">
+                        <div
+                            v-for="(goods, j) in item.detailsList"
+                            :key="j"
+                            class="order-info"
+                            :style="
+                                j != item.detailsList.length - 1
+                                    ? 'border-bottom:1px solid #eee'
+                                    : ''
+                            "
+                            style="min-height: 140px; width: 95%"
+                        >
                             <el-button
-                            v-if="item.orderStatus == '3'"
+                                v-if="goods.orderStatus == 4"
+                                @click="handleViewBack(goods, item)"
                                 type="primary"
                                 size="small"
-                            @click="confirmReceipt(index)"
-                            >确认收货</el-button
                             >
+                                发起退租
+                            </el-button>
+                        </div>
+                    </el-col>
+                    <el-col
+                        :span="item.orderStatus == 4 ? 4 : 6"
+                        style="display: flex; align-items: center"
+                    >
+                        <div :class="item.orderStatus == 4 ? 'handle-btn-4' : 'handle-btn'">
                             <el-button
                                 v-if="item.orderStatus == '2'"
                                 type="primary"
@@ -699,20 +800,17 @@ const costSubmit = () => {
                                 >取消</el-button
                             >
 
-                        <el-button @click="handleViewOrder(j, item)" type="primary" size="small">
+                            <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' || item.orderStatus == '7'"
                                 @click="handleViewList(item.orderId)"
@@ -737,6 +835,17 @@ const costSubmit = () => {
                             >
                                 费用确认
                             </el-button>
+
+                            <el-button
+                                v-if="item.orderStatus == 4"
+                                @click="handleViewBackAll(item)"
+                                type="primary"
+                                size="small"
+                            >
+                                全部退租
+                            </el-button>
+                            <el-button type="primary" size="small"> 发起减免 </el-button>
+                        </div>
                     </el-col>
                 </el-row>
             </div>
@@ -1506,9 +1615,16 @@ const costSubmit = () => {
 }
 
 .order-title-info {
-    padding: 6px 4px;
+    position: relative;
+    padding: 14px 4px;
     font-size: 14px;
     color: #999;
+
+    .order-type-box {
+        position: absolute;
+        top: 0;
+        right: 0;
+    }
 }
 
 .order-items {
@@ -1518,6 +1634,8 @@ const costSubmit = () => {
 .order-info {
     display: flex;
     padding: 10px 0;
+    align-items: center;
+    justify-content: center;
 }
 
 .order-items-info {
@@ -1535,6 +1653,7 @@ const costSubmit = () => {
 }
 
 .handle-btn {
+    width: 100%;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -1544,4 +1663,17 @@ const costSubmit = () => {
         margin-left: 10px !important;
     }
 }
+.handle-btn-4 {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    .el-button {
+        width: calc((100% - 20px) / 2);
+        // margin: 0;
+        margin-left: 10px !important;
+        margin-bottom: 10px;
+    }
+}
 </style>

src/views/user/orderManagementCz/components/order-details.vue

@@ -157,7 +157,6 @@ console.log(props.orderStatus, 'orderStatus', props.orderId, 'orderId')
 
 const time = ref([])
 const currentActive = ref(0)
-const type = ref(0)
 const stepList = ref([
     {
         title: '待接单',
@@ -176,22 +175,20 @@ const stepList = ref([
         description: '',
     },
     {
-        title: '待退租结算',
+        title: '退租待结算',
         description: '',
     },
     {
-        title: '待结算确认',
+        title: '结算待确认',
         description: '',
     },
+
     {
         title: '已完成',
         description: '',
     },
 ])
 
-// const setStepType = (status: any) => {
-
-// }
 if (props.orderStatus == 1) {
     currentActive.value = 0
 }
@@ -372,6 +369,7 @@ if (props.orderStatus == 7) {
                                 ? 'border-bottom:1px solid #eee'
                                 : ''
                         "
+                        style="min-height: 140px"
                     >
                         <el-image
                             :src="goods.url"
@@ -381,6 +379,7 @@ if (props.orderStatus == 7) {
                         />
                         <div
                             style="
+                                min-height: 140px;
                                 flex: 1;
                                 display: flex;
                                 justify-content: space-around;
@@ -407,15 +406,39 @@ if (props.orderStatus == 7) {
                         </div>
                     </div>
                 </el-col>
+
                 <el-col :span="5" class="order-items-info">
-                    <div>总费用</div>
+                    <div
-                    <div class="red-font">{{ orderDetails.cost }} 元</div>
+                        v-for="(goods, j) in orderDetails.detailsList"
-                </el-col>
+                        :key="j"
-                <el-col :span="5" class="order-items-info" style="border: none">
+                        class="order-items order-info"
+                        :style="
+                            j != orderDetails.detailsList.length - 1
+                                ? 'border-bottom:1px solid #eee'
+                                : ''
+                        "
+                        style="min-height: 140px; width: 100%"
+                    >
+                        <div
+                            style="
+                                width: 100%;
+                                display: flex;
+                                justify-content: center;
+                                align-items: center;
+                                flex-direction: column;
+                            "
+                        >
                             <div>租期</div>
                             <div style="font-weight: bold; margin-top: 10px">
-                        {{ orderDetails.startTime }}至{{ orderDetails.endTime }}
+                                {{ goods.rentBeginTime }}至{{ goods.rentEndTime }}
                             </div>
+                        </div>
+                    </div>
+                </el-col>
+
+                <el-col :span="5" class="order-items-info" style="border: none">
+                    <div>总费用</div>
+                    <div class="red-font">{{ orderDetails.cost }} 元</div>
                 </el-col>
             </el-row>
         </div>
@@ -595,6 +618,7 @@ if (props.orderStatus == 7) {
 .order-info {
     display: flex;
     padding: 10px 0;
+    align-items: center;
 }
 
 .order-items-info {