From e44e03fb39c5b7ddd6b61cf30dc7041e1f184e66 Mon Sep 17 00:00:00 2001
From: 13218645326 <sjf13651675634@163.com>
Date: Wed, 6 Dec 2023 10:30:41 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E6=96=87=E4=BB=B6=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                               |   3 -
 src/components/uploadComponent/index.vue      |  16 +-
 .../orderManagement/orderCom/orderConfirm.vue | 170 +++++++++++++-----
 .../orderManagement/orderCom/orderDetails.vue |  12 +-
 .../orderManagement/orderCom/orderTable.vue   |  20 ++-
 .../orderCom/timeLineHorizontal.vue           |  25 +--
 6 files changed, 161 insertions(+), 85 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 010ba40..cffc552 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -8,8 +8,6 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElCarousel: typeof import('element-plus/es')['ElCarousel']
-    ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElDialog: typeof import('element-plus/es')['ElDialog']
@@ -17,7 +15,6 @@ declare module 'vue' {
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
diff --git a/src/components/uploadComponent/index.vue b/src/components/uploadComponent/index.vue
index deb0cb5..5b7b900 100644
--- a/src/components/uploadComponent/index.vue
+++ b/src/components/uploadComponent/index.vue
@@ -2,22 +2,22 @@
     <div class="upload_ss_c">
         <!--action="/api/abk/web/v1/resource/file" -->
         <el-upload
-            :action="actionUrl"
-            :auto-upload="autoUpload"
+            :action="props.actionUrl"
+            :auto-upload="props.autoUpload"
             style="width: 100%"
             :on-success="(response, file) => successUpload(response, file)"
             :on-error="errorUpload"
-            :accept="acceptTypeList.join(',')"
+            :accept="props.acceptTypeList.join(',')"
             :before-upload="beforeUpload"
-            :multiple="multiple"
-            :limit="maxLimit"
+            :multiple="props.multiple"
+            :limit="props.maxLimit"
             :on-exceed="handleExceed"
-            :file-list="fileList"
-            :disabled="disabledFlag"
+            :file-list="props.fileList"
+            :disabled="props.disabledFlag"
             :on-remove="(file, fileList) => removeFile(file, fileList)"
             :on-preview="(file) => preview(file)"
             :on-progress="(event, file, fileList) => onProgressFn(event, file, fileList)"
-            list-type="picture-card">
+            :list-type="props.listType">
             <!-- 上传的按钮 或者 icon 通过具名插槽的方式 -->
             <slot name="default"></slot>
         </el-upload>
diff --git a/src/views/user/orderManagement/orderCom/orderConfirm.vue b/src/views/user/orderManagement/orderCom/orderConfirm.vue
index 9e95091..94d0776 100644
--- a/src/views/user/orderManagement/orderCom/orderConfirm.vue
+++ b/src/views/user/orderManagement/orderCom/orderConfirm.vue
@@ -4,11 +4,11 @@
             <span>详情 </span>
         </template>
     </el-page-header>
-   <timeLineHorizontal></timeLineHorizontal>
+    <timeLineHorizontal themeColor="#2282fe" :timeLineList="timeLineList.list"></timeLineHorizontal>
     <el-form label-width="130px" inline="true" style="padding: 0 20px 0px 20px;width: 865px;" size="small">
-        <el-form-item label="订单编号" style="width: 600px;">
+        <!-- <el-form-item label="订单编号" style="width: 600px;">
             xxxxx
-        </el-form-item>
+        </el-form-item> -->
         <el-form-item label="需求单位" class="table_item">
             xxxxx
         </el-form-item>
@@ -39,12 +39,28 @@
         <el-form-item label="项目说明：" style="width: 800px;">
             xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
         </el-form-item>
-        <el-form-item label="订单起止时间：" style="width: 800px;">
+        <!-- <el-form-item label="订单起止时间：" style="width: 800px;">
             xxxx-xx-xx ~ xxxx-xx-xx
-        </el-form-item>
+        </el-form-item> -->
         <!-- 表格 -->
-        <orderTable :tableInfo="tableInfo"></orderTable>
-        <el-form-item label="订单合同：" style="width: 800px;margin-top:12px;">
+        <orderTable :tableInfo="tableInfo">
+            <!-- <template v-slot:rentMoney>
+               <h1>6666</h1>
+            </template> -->
+            <template v-slot:rentMoney>
+                <div style="margin-left:80px;">
+                    <div>
+                        <span>装备</span> <span style="color:#f00;"> ¥{{ tableInfo.money }}</span>/{{ tableInfo.unit }}
+                    </div>
+                    <div>
+                        <span>手</span> <span style="color:#f00;"> ¥{{ tableInfo.money }}</span>/{{ tableInfo.unit }}
+                    </div>
+
+                </div>
+            </template>
+
+        </orderTable>
+        <!-- <el-form-item label="订单合同：" style="width: 800px;margin-top:12px;">
             xxxxxxxxxxxx.pdf
         </el-form-item>
         <el-form-item label="机手姓名：" class="table_item_sub">
@@ -55,18 +71,40 @@
         </el-form-item>
         <el-form-item label="物流司机电话：" style="width: 800px;">
             xxxxx
+        </el-form-item> -->
+        <el-form-item label="订单合同：" style="width: 800px;">
+            <uploadComponent :maxLimit="1" listType="text" :acceptTypeList="['.pdf']" width="72px" height="24px">
+                <template v-slot:default>
+                    <el-button type="primary">上传文件</el-button>
+                </template>
+            </uploadComponent>
+
         </el-form-item>
- 
-        
+        <div>
+            <el-form-item label="机手姓名：" class="table_item_sub">
+                <el-select v-model="submitInfo.driver" placeholder="Select" clearable filterable style="width: 100%;">
+                    <el-option v-for="item in driverInfo.list" :key="item.value" :label="item.label"
+                        :value="item.value" />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="联系电话：" class="table_item_sub">
+                <el-input v-model.trim="submitInfo.driverPhone" placeholder="请输入模版编号" clearable maxlength="30" />
+            </el-form-item>
+            <el-form-item label="物流司机电话：">
+                <el-input v-model.trim="submitInfo.deliverPhone" placeholder="请输入模版编号" clearable maxlength="30" />
+            </el-form-item>
+        </div>
+
     </el-form>
 </template>
 
 
 <script setup lang="ts">
 import orderTable from "./orderTable.vue"
-import {reactive} from "vue"
+import { reactive } from "vue"
 import { MoreFilled } from '@element-plus/icons-vue'
 import timeLineHorizontal from "./timeLineHorizontal.vue"
+import uploadComponent from 'components/uploadComponent/index.vue'
 const tableInfo = reactive({
     v_equipment_title: "220E履带挖掘机",
     v_equipment_code: "88888",
@@ -79,40 +117,77 @@ const tableInfo = reactive({
     unit: '月',
     imgUrl: ""
 })
-const timeLineStep =  reactive({
-    list:[
-    {
-        content: '订单状态',
-        timestamp: '需求已提交，等待供应商审核。',
-        size: 'large',
-        type: 'primary',
-        icon: MoreFilled,
-    },
-    {
-        content: '订单状态',
-        timestamp: '订单已确认，供应商会与您联系，签订合同。',
-        color: '#0bbd87',
-    },
-    {
-        content: '订单状态',
-        timestamp: '装备已发出，到货后请及时确认。',
-        size: 'large',
-    },
-    {
-        content: '订单状态',
-        timestamp: '租赁进行中。',
-        type: 'primary',
-        hollow: true,
-        last:true
-    },
-    {
-        content: 'Default node',
-        timestamp: '2018-04-03 20:46',
-      
-    },
-]})
+const timeLineStep = reactive({
+    list: [
+        {
+            content: '订单状态',
+            timestamp: '需求已提交，等待供应商审核。',
+            size: 'large',
+            type: 'primary',
+            icon: MoreFilled,
+        },
+        {
+            content: '订单状态',
+            timestamp: '订单已确认，供应商会与您联系，签订合同。',
+            color: '#0bbd87',
+        },
+        {
+            content: '订单状态',
+            timestamp: '装备已发出，到货后请及时确认。',
+            size: 'large',
+        },
+        {
+            content: '订单状态',
+            timestamp: '租赁进行中。',
+            type: 'primary',
+            hollow: true,
+            last: true
+        },
+        {
+            content: 'Default node',
+            timestamp: '2018-04-03 20:46',
 
+        },
+    ]
+})
 
+const timeLineList = reactive({
+    list: [
+        {
+            title: '订单需求审核',
+            content: '开工阶段',
+            done: true,
+        },
+        {
+            title: '合同上传',
+            content: '请填写公司详细信息',
+            done: true,
+        },
+        {
+            title: '装备发货',
+            content: '请填写公司财务信息',
+            done: true,
+        }
+    ]
+})
+
+const driverInfo = reactive({
+    list: [{
+
+        value: 'Option1',
+        label: 'Option1',
+    },
+    {
+        value: 'Option2',
+        label: 'Option2',
+
+    }]
+})
+const submitInfo=reactive({
+    driver:'',
+    driverPhone:'',
+    deliverPhone:''
+})
 </script>
 
 
@@ -126,10 +201,11 @@ const timeLineStep =  reactive({
     width: 250px;
     height: 20px;
 }
-.time_line_item{
-    display:flex;
-    justify-content:space-between;
-    .btn_c{
-    }
+
+.time_line_item {
+    display: flex;
+    justify-content: space-between;
+
+    .btn_c {}
 }
 </style>
diff --git a/src/views/user/orderManagement/orderCom/orderDetails.vue b/src/views/user/orderManagement/orderCom/orderDetails.vue
index 6fea3fb..5a1eb07 100644
--- a/src/views/user/orderManagement/orderCom/orderDetails.vue
+++ b/src/views/user/orderManagement/orderCom/orderDetails.vue
@@ -42,7 +42,17 @@
             xxxx-xx-xx ~ xxxx-xx-xx
         </el-form-item>
         <!-- 表格 -->
-        <orderTable :tableInfo="tableInfo"></orderTable>
+        <orderTable :tableInfo="tableInfo">
+        
+            <template v-slot:rentMoney>
+                <div>
+                    <span style="color:#f00;"> {{tableInfo.money }}</span>/{{tableInfo.unit }}
+                </div>
+      
+            </template>
+
+        
+        </orderTable>
         <el-form-item label="订单合同：" style="width: 800px;margin-top:12px;">
             xxxxxxxxxxxx.pdf
         </el-form-item>
diff --git a/src/views/user/orderManagement/orderCom/orderTable.vue b/src/views/user/orderManagement/orderCom/orderTable.vue
index dc01452..b555eb8 100644
--- a/src/views/user/orderManagement/orderCom/orderTable.vue
+++ b/src/views/user/orderManagement/orderCom/orderTable.vue
@@ -12,7 +12,7 @@
                         <div class="Img">
                             <img :src="props.tableInfo.imgUrl">
                         </div>
-                        <div class="state"> 
+                        <div class="state">
                             <div class="item">
                                 <div class="label">
                                     装备编号：
@@ -83,9 +83,10 @@
             </template>
         </el-table-column>
         <el-table-column prop="name" label="租金" min-width="120">
-            <template #default="scope">
+            <!-- <template #rentMoney="scope">
                <span  style="color:#f00;"> {{ props.tableInfo.money }}</span>/{{ props.tableInfo.unit }}
-            </template>
+            </template> -->
+            <slot name="rentMoney"></slot>
         </el-table-column>
 
     </el-table>
@@ -115,6 +116,11 @@ const headerClassName = () => {
 
 .equipData {
     height: 220px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 
     .name {
         font-size: 16px;
@@ -176,6 +182,7 @@ const headerClassName = () => {
                         text-align: right;
                         color: #858585;
                     }
+
                     .value {
                         color: black;
                     }
@@ -184,7 +191,8 @@ const headerClassName = () => {
         }
     }
 
-    .money_c{
-        color:#f00;
+    .money_c {
+        color: #f00;
     }
-}</style>
+}
+</style>
diff --git a/src/views/user/orderManagement/orderCom/timeLineHorizontal.vue b/src/views/user/orderManagement/orderCom/timeLineHorizontal.vue
index 262d013..8d5f0bf 100644
--- a/src/views/user/orderManagement/orderCom/timeLineHorizontal.vue
+++ b/src/views/user/orderManagement/orderCom/timeLineHorizontal.vue
@@ -3,7 +3,7 @@
         <div class="title">工程进度</div>
         <el-divider />
         <div class="timelineProcessBox">
-            <el-timeline class="timeline"  >
+            <el-timeline class="timeline" :color="props.themeColor" >
                 <el-timeline-item class="lineitem" :class="item.done ? 'active' : 'inactive'"
                     v-for="(item, index) in props.timeLineList" :key="index" :timestamp="item.content">
                     <div>
@@ -24,24 +24,7 @@ const props = defineProps({
     timeLineList: {
         type: Array,
         default: () => {
-            return [
-                {
-                    title: '订单需求审核',
-                    content: '开工阶段',
-                    done: true,
-                },
-                {
-                    title: '合同上传',
-                    content: '请填写公司详细信息',
-                    done: true,
-                },
-                {
-                    title: '装备发货',
-                    content: '请填写公司财务信息',
-                    done: true,
-                },
-     
-            ]
+            return []
         }
     }
 })
@@ -99,17 +82,19 @@ const props = defineProps({
 
     :deep(.el-timeline-item__node) {
         // background-color: $main-color;
+        background-color: v-bind('props.themeColor');
     }
 
     :deep(.el-timeline-item__tail) {
         // border-color: $main-color;
+        // background-color: v-bind('props.themeColor');
     }
 }
 
 // 有active样式的下一个li
 .active+li {
     :deep(.el-timeline-item__node) {
-        // background-color: $main-color;
+        background-color: v-bind('props.themeColor');
     }
 }
 </style>
\ No newline at end of file