上传文件优化

2023-12-06 10:30:41 +08:00 · 2023-12-06 10:30:41 +08:00 · e44e03fb39
parent 7b06004501
commit e44e03fb39
6 changed files with 161 additions and 85 deletions
--- 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']
--- 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>
--- 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,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",
@ -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>
--- 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>
--- a/src/views/user/orderManagement/orderCom/orderTable.vue
+++ b/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{
-        color:#f00;
+    .money_c {
+        color: #f00;
    }
-}</style>
+}
+</style>
--- 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>