上传文件优化

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']

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"
+            :action="props.actionUrl"
-            :auto-upload="autoUpload"
+            :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"
+            :multiple="props.multiple"
-            :limit="maxLimit"
+            :limit="props.maxLimit"
             :on-exceed="handleExceed"
-            :file-list="fileList"
+            :file-list="props.fileList"
-            :disabled="disabledFlag"
+            :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>

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>
+        <orderTable :tableInfo="tableInfo">
-        <el-form-item label="订单合同：" style="width: 800px;margin-top:12px;">
+            <!-- <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,8 +71,29 @@
         </el-form-item>
         <el-form-item label="物流司机电话：" style="width: 800px;">
             xxxxx
-        </el-form-item>
+        </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>
@@ -64,9 +101,10 @@
 
 <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",
@@ -80,7 +118,7 @@ const tableInfo = reactive({
     imgUrl: ""
 })
 const timeLineStep = reactive({
-    list:[
+    list: [
         {
             content: '订单状态',
             timestamp: '需求已提交，等待供应商审核。',
@@ -103,16 +141,53 @@ const timeLineStep =  reactive({
             timestamp: '租赁进行中。',
             type: 'primary',
             hollow: true,
-        last: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;
+.time_line_item {
-    justify-content:space-between;
+    display: flex;
-    .btn_c{
+    justify-content: space-between;
-    }
+
+    .btn_c {}
 }
 </style>

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>

src/views/user/orderManagement/orderCom/orderTable.vue

@@ -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{
+    .money_c {
-        color:#f00;
+        color: #f00;
     }
-}</style>
+}
+</style>

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 [
+            return []
-                {
-                    title: '订单需求审核',
-                    content: '开工阶段',
-                    done: true,
-                },
-                {
-                    title: '合同上传',
-                    content: '请填写公司详细信息',
-                    done: true,
-                },
-                {
-                    title: '装备发货',
-                    content: '请填写公司财务信息',
-                    done: true,
-                },
-     
-            ]
         }
     }
 })
@@ -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>