订单出租

src/views/lessor/order/detail.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="app-container">
+      <el-breadcrumb separator="/">
+      <el-breadcrumb-item :to="{ path: '/lessor/order' }">订单管理</el-breadcrumb-item>
+      <el-breadcrumb-item>订单明细</el-breadcrumb-item>
+      </el-breadcrumb>
+      <div class="section">
+        <el-header >订单流程</el-header>
+         <el-steps class="step" :space="200" :active="Id" finish-status="success">
+            <el-step :title="getStepTitle(1)"></el-step>
+            <el-step :title="getStepTitle(2)"></el-step>
+            <el-step :title="getStepTitle(3)"></el-step>
+            <el-step :title="getStepTitle(4)"></el-step>
+            <el-step :title="getStepTitle(5)"></el-step>
+        </el-steps>
+      </div>
+
+
+  </div>
+</template> 
+  
+  <script>
+import { getManufacturerSelect } from "@/api/ma/supplier";
+
+import { downloadFile } from "@/utils/download";
+import { getToken } from "@/utils/auth";
+export default {
+  name: "orderDetail",
+  data() {
+    return {
+      Id: 1,
+      // 遮罩层
+      loading: false,
+      dialogLoading: false,
+      isView: false,
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      ids: [],
+      checkList: [],
+      // 总条数
+      total: 0,
+      // 弹出层标题
+      title: "",
+      // 查询参数
+      queryParams: {
+        typeId: undefined,
+        supplierId: undefined,
+        productionTime: undefined,
+      },
+
+    };
+  },
+  mounted() {
+    const Id = Number(this.$route.query && this.$route.query.Id);
+     console.log("Id111111111",this.Id)
+    const isView = this.$route.query && this.$route.query.isView;
+    this.Id = Id || 1;
+         console.log("Id222222222222",this.Id)
+    if (isView == "true") {
+      this.isView = true;
+    } else {
+      this.isView = false;
+    }
+     this.$forceUpdate();
+    // this.getList();
+  },
+  watch:{
+      Id(newId){
+        this.$forceUpdate();
+      }
+  },
+  methods: {
+
+  // 根据步骤的 Id 返回对应的标题
+      getStepTitle(stepId) {
+        console.log("id",this.Id)
+        if (this.Id === 1) {
+          return stepId === 1 ? '待出库' : '';
+        } else if (this.Id === 2) {
+          return stepId === 1 ? '已出库' : stepId === 2 ? '待收货' : '';
+        } else if (this.Id === 3) {
+          return stepId === 1 ? '已出库' : stepId === 2 ? '已收货' : stepId === 3 ? '租赁中' : '';
+        } else if (this.Id === 4) {
+          return stepId === 1 ? '已出库' : stepId === 2 ? '已收货' : stepId === 3 ? '租赁中' : stepId === 4 ? '发起费用结算' : '';
+        } else if (this.Id === 5) {
+          return stepId === 1 ? '已出库' : stepId === 2 ? '已收货' : stepId === 3 ? '租赁中' : stepId === 4 ? '发起费用结算' : stepId === 5 ? '已完成' : '';
+        }
+        return ''; // 默认返回空字符串
+      },
+
+
+    // /** 查询列表 */
+    // getList() {
+    //   this.loading = true;
+    //   this.queryParams.id = this.Id;
+    //   this.queryParams.statusList = [2, 12];
+    //   getPurchaseDetailsList(this.queryParams).then((response) => {
+    //     this.tableList = response.data.purchaseCheckDetailsList;
+    //     this.tableList.forEach((item) => {
+    //       item.fixCodeStr = this.fixCodeList[Number(item.fixCode)];
+    //     });
+    //     // this.total = response.total;
+    //     this.loading = false;
+    //   });
+    // },
+    
+    
+  },
+};
+</script>
+  <style lang="scss" scoped>
+.section {
+  margin-top: 30px;
+  margin-bottom: 20px;
+  .step{
+    margin-left:20px;;
+  }
+}
+
+</style>

src/views/lessor/order/index.vue

@@ -107,6 +107,12 @@
                       {{ item.user_phone }}
                     </div>   
                     </el-col>
+                     <el-col :span="2">
+                      <div style="flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
+                          <el-button v-if="status==0" class="item" type="primary" size="mini">出库</el-button>
+                          <el-button v-if="status==0" class="item" type="primary" size="mini">驳回</el-button>
+                    </div>   
+                    </el-col>
                   </el-row>
 
                   <el-row> 
@@ -139,7 +145,7 @@
                         </el-checkbox>
                     </div>
                 </el-col>
-                <el-col :span="12" class="goods-info">
+                <el-col :span="10" class="goods-info">
                     <el-col :span="7">
                      <img :src="goods.goods_pic" alt="" />
                     </el-col>
@@ -150,39 +156,54 @@
                         <div>数量：{{ goods.goods_num }}{{" "+"台"}}</div>
                     </div>
                 </el-col>
-                <el-col :span="8">
+                <el-col :span="5">
                     <div style="font-size: 14px; font-weight: bold;margin-bottom:10px">总费用</div>
                         <div class="red-font">1500</div>
                 </el-col>
-                <el-col :span="8">
+                <el-col :span="5">
                   <div style="font-size: 14px; font-weight: bold;margin-bottom:10px">租期</div>
                     <div  style="color:black;font-weight: bold;">
                         {{ "2024-10-11"+" " }}{{"至"}}{{ " "+"2024-10-11" }}
                     </div>
                 </el-col>
-                <el-col :span="8">
+                <el-col :span="3">
-                    <div>
+                    <div style="font-size: 14px; font-weight: bold;margin-bottom:10px">
-                        <el-input-number
+                        {{ "待出租"}}
-                            v-model="goods.goods_num"
-                            style="width: 100px"
-                            :min="1"
-                            size="small"
-                        />
                     </div>
                 </el-col>
-                <el-col :span="2">
+                <el-col :span="1.1">
-                    <div class="red-font">
-                        {{ goods.goods_num * goods.lease_pic * goods.lease_day }}
-                    </div>
-                </el-col>
-                <el-col :span="2">
                     <div>
                         <el-button
-                            @click="onDeleteGoods(j)"
+                            @click="handleViewOrder(j)"
                             type="text"
-                            style="color: #ff4800; font-weight: bold"
+                            size="mini"
+                            style="color: #blue; font-weight: bold"
                         >
-                            删除
+                            订单详情
+                        </el-button>
+                        <el-button
+                            @click="handleViewOrder(j)"
+                            type="text"
+                            size="mini"
+                            style="color: #blue; font-weight: bold"
+                        >
+                            租赁协议
+                        </el-button>
+                        <el-button
+                            @click="handleViewOrder(j)"
+                            type="text"
+                            size="mini"
+                            style="color: #blue; font-weight: bold"
+                        >
+                            退租检修
+                        </el-button>
+                        <el-button
+                            @click="handleViewOrder(j)"
+                            type="text"
+                            size="mini"
+                            style="color: #blue; font-weight: bold"
+                        >
+                            费用结算
                         </el-button>
                     </div>
                 </el-col>
@@ -194,7 +215,7 @@
   <script> 
   import { getPurchaseList } from "@/api/purchase/goodsAccept"; 
   export default {
-    name: "",
+    name: "order",
     // dicts: ['purchase_task_status'],
     data() {
       return {
@@ -226,6 +247,7 @@
         },
         //卡片集合
         cardList:[],
+        status:0,
       };
     },
     created() { 
@@ -356,6 +378,15 @@
 
             this.loading = false;
         },
+
+        //订单详情
+        handleViewOrder(row){
+            this.$router.push({
+                path: '/lessor/order/detail',
+                query: { Id:Number(3),isView:"true" }
+            })
+        }, 
+
         /** 重置按钮操作 */
         resetQuery() {
             this.resetForm("queryForm");
@@ -374,24 +405,6 @@
             this.single = selection.length != 1
             this.multiple = !selection.length
         }, 
-        //编辑
-        handleUpdate(row){
-            console.log(row)
-            // let query = { Id:row.id,taskId: row.taskId,isView:"false" }
-            // this.$tab.closeOpenPage({
-            //     path: '/purchase/goodsAcceptDetail',
-            //     query,
-            // })
-        },
-        //查看
-        handleView(row){
-            console.log(row)
-            // let query = { Id:row.id,taskId: row.taskId,isView:"true" }
-            // this.$tab.closeOpenPage({
-            //     path: '/purchase/goodsAcceptDetail',
-            //     query,
-            // })
-        },  
         handleExport() {
         //     this.download('/material/ma_machine/export', {
         //       ...this.queryParams
@@ -476,7 +489,7 @@
             margin: 15px 0;
             display: flex;
             align-items: center;
-            font-size: 13px;
+            
             div {
                 text-align: center;
             }
@@ -484,18 +497,16 @@
             .goods-info {
                 display: flex;
                 align-content: center;
-
                 img {
-                    width: 160px;
+                    width: 200px;
                     height: 100px;
                 }
 
                 .goods-code {
-                    margin-left: 10px;
+                    margin-left: 40px;
                     display: flex;
                     flex-direction: column;
                     justify-content: space-around;
-
                     div {
                         text-align: left;
                     }

src/views/material/purchase/goodsAccept/detail.vue

@@ -418,7 +418,7 @@ export default {
   methods: {
     // 返回列表页
     jumpList() {
-      const obj = { path: "/purchase/goodsAccept" };
+      const obj = { path: "/lessor/order" };
       this.$tab.closeOpenPage(obj);
     },
     getDeviceType() {