bonus
/
Zlpt_Portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

上传文件优化

This commit is contained in:
13218645326 2023-12-06 10:30:41 +08:00
parent 7b06004501
commit e44e03fb39
6 changed files with 161 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components.d.ts vendored
View File

@ -8,8 +8,6 @@ export {}
declare module 'vue' { declare module 'vue' {
export interface GlobalComponents { export interface GlobalComponents {
ElButton: typeof import('element-plus/es')['ElButton'] 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'] ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
ElCol: typeof import('element-plus/es')['ElCol'] ElCol: typeof import('element-plus/es')['ElCol']
ElDialog: typeof import('element-plus/es')['ElDialog'] ElDialog: typeof import('element-plus/es')['ElDialog']
@ -17,7 +15,6 @@ declare module 'vue' {
ElForm: typeof import('element-plus/es')['ElForm'] ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem'] ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElIcon: typeof import('element-plus/es')['ElIcon'] ElIcon: typeof import('element-plus/es')['ElIcon']
ElImage: typeof import('element-plus/es')['ElImage']
ElInput: typeof import('element-plus/es')['ElInput'] ElInput: typeof import('element-plus/es')['ElInput']
ElMenu: typeof import('element-plus/es')['ElMenu'] ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] ElMenuItem: typeof import('element-plus/es')['ElMenuItem']

16
src/components/uploadComponent/index.vue
View File

@ -2,22 +2,22 @@
<div class="upload_ss_c"> <div class="upload_ss_c">
<!--action="/api/abk/web/v1/resource/file" --> <!--action="/api/abk/web/v1/resource/file" -->
<el-upload <el-upload
:action="actionUrl" :action="props.actionUrl"
:auto-upload="autoUpload" :auto-upload="props.autoUpload"
style="width: 100%" style="width: 100%"
:on-success="(response, file) => successUpload(response, file)" :on-success="(response, file) => successUpload(response, file)"
:on-error="errorUpload" :on-error="errorUpload"
:accept="acceptTypeList.join(',')" :accept="props.acceptTypeList.join(',')"
:before-upload="beforeUpload" :before-upload="beforeUpload"
:multiple="multiple" :multiple="props.multiple"
:limit="maxLimit" :limit="props.maxLimit"
:on-exceed="handleExceed" :on-exceed="handleExceed"
:file-list="fileList" :file-list="props.fileList"
:disabled="disabledFlag" :disabled="props.disabledFlag"
:on-remove="(file, fileList) => removeFile(file, fileList)" :on-remove="(file, fileList) => removeFile(file, fileList)"
:on-preview="(file) => preview(file)" :on-preview="(file) => preview(file)"
:on-progress="(event, file, fileList) => onProgressFn(event, file, fileList)" :on-progress="(event, file, fileList) => onProgressFn(event, file, fileList)"
list-type="picture-card"> :list-type="props.listType">
<!-- 上传的按钮 或者 icon 通过具名插槽的方式 --> <!-- 上传的按钮 或者 icon 通过具名插槽的方式 -->
<slot name="default"></slot> <slot name="default"></slot>
</el-upload> </el-upload>

170
src/views/user/orderManagement/orderCom/orderConfirm.vue
View File

@ -4,11 +4,11 @@
<span>详情 </span> <span>详情 </span>
</template> </template>
</el-page-header> </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 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 xxxxx
</el-form-item> </el-form-item> -->
<el-form-item label="需求单位" class="table_item"> <el-form-item label="需求单位" class="table_item">
xxxxx xxxxx
</el-form-item> </el-form-item>
@ -39,12 +39,28 @@
<el-form-item label="项目说明：" style="width: 800px;"> <el-form-item label="项目说明：" style="width: 800px;">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</el-form-item> </el-form-item>
<el-form-item label="订单起止时间：" style="width: 800px;"> <!-- <el-form-item label="订单起止时间：" style="width: 800px;">
xxxx-xx-xx ~ xxxx-xx-xx 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 xxxxxxxxxxxx.pdf
</el-form-item> </el-form-item>
<el-form-item label="机手姓名：" class="table_item_sub"> <el-form-item label="机手姓名：" class="table_item_sub">
@ -55,18 +71,40 @@
</el-form-item> </el-form-item>
<el-form-item label="物流司机电话：" style="width: 800px;"> <el-form-item label="物流司机电话：" style="width: 800px;">
xxxxx 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> </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> </el-form>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import orderTable from "./orderTable.vue" import orderTable from "./orderTable.vue"
import {reactive} from "vue" import { reactive } from "vue"
import { MoreFilled } from '@element-plus/icons-vue' import { MoreFilled } from '@element-plus/icons-vue'
import timeLineHorizontal from "./timeLineHorizontal.vue" import timeLineHorizontal from "./timeLineHorizontal.vue"
import uploadComponent from 'components/uploadComponent/index.vue'
const tableInfo = reactive({ const tableInfo = reactive({
v_equipment_title: "220E履带挖掘机", v_equipment_title: "220E履带挖掘机",
v_equipment_code: "88888", v_equipment_code: "88888",
@ -79,40 +117,77 @@ const tableInfo = reactive({
unit: '月', unit: '月',
imgUrl: "" imgUrl: ""
}) })
const timeLineStep = reactive({ const timeLineStep = reactive({
list:[ list: [
{ {
content: '订单状态', content: '订单状态',
timestamp: '需求已提交，等待供应商审核。', timestamp: '需求已提交，等待供应商审核。',
size: 'large', size: 'large',
type: 'primary', type: 'primary',
icon: MoreFilled, icon: MoreFilled,
}, },
{ {
content: '订单状态', content: '订单状态',
timestamp: '订单已确认，供应商会与您联系，签订合同。', timestamp: '订单已确认，供应商会与您联系，签订合同。',
color: '#0bbd87', color: '#0bbd87',
}, },
{ {
content: '订单状态', content: '订单状态',
timestamp: '装备已发出，到货后请及时确认。', timestamp: '装备已发出，到货后请及时确认。',
size: 'large', size: 'large',
}, },
{ {
content: '订单状态', content: '订单状态',
timestamp: '租赁进行中。', timestamp: '租赁进行中。',
type: 'primary', type: 'primary',
hollow: true, hollow: true,
last:true last: true
}, },
{ {
content: 'Default node', content: 'Default node',
timestamp: '2018-04-03 20:46', 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> </script>
@ -126,10 +201,11 @@ const timeLineStep = reactive({
width: 250px; width: 250px;
height: 20px; 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> </style>

12
src/views/user/orderManagement/orderCom/orderDetails.vue
View File

@ -42,7 +42,17 @@
xxxx-xx-xx ~ xxxx-xx-xx xxxx-xx-xx ~ xxxx-xx-xx
</el-form-item> </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;"> <el-form-item label="订单合同：" style="width: 800px;margin-top:12px;">
xxxxxxxxxxxx.pdf xxxxxxxxxxxx.pdf
</el-form-item> </el-form-item>

20
src/views/user/orderManagement/orderCom/orderTable.vue
View File

@ -12,7 +12,7 @@
<div class="Img"> <div class="Img">
<img :src="props.tableInfo.imgUrl"> <img :src="props.tableInfo.imgUrl">
</div> </div>
<div class="state"> <div class="state">
<div class="item"> <div class="item">
<div class="label"> <div class="label">
装备编号： 装备编号：
@ -83,9 +83,10 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="name" label="租金" min-width="120"> <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 }} <span style="color:#f00;"> {{ props.tableInfo.money }}</span>/{{ props.tableInfo.unit }}
</template> </template> -->
<slot name="rentMoney"></slot>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -115,6 +116,11 @@ const headerClassName = () => {
.equipData { .equipData {
height: 220px; height: 220px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.name { .name {
font-size: 16px; font-size: 16px;
@ -176,6 +182,7 @@ const headerClassName = () => {
text-align: right; text-align: right;
color: #858585; color: #858585;
} }
.value { .value {
color: black; color: black;
} }
@ -184,7 +191,8 @@ const headerClassName = () => {
} }
} }
.money_c{ .money_c {
color:#f00; color: #f00;
} }
}</style> }
</style>

25
src/views/user/orderManagement/orderCom/timeLineHorizontal.vue
View File

@ -3,7 +3,7 @@
<div class="title">工程进度</div> <div class="title">工程进度</div>
<el-divider /> <el-divider />
<div class="timelineProcessBox"> <div class="timelineProcessBox">
<el-timeline class="timeline" > <el-timeline class="timeline" :color="props.themeColor" >
<el-timeline-item class="lineitem" :class="item.done ? 'active' : 'inactive'" <el-timeline-item class="lineitem" :class="item.done ? 'active' : 'inactive'"
v-for="(item, index) in props.timeLineList" :key="index" :timestamp="item.content"> v-for="(item, index) in props.timeLineList" :key="index" :timestamp="item.content">
<div> <div>
@ -24,24 +24,7 @@ const props = defineProps({
timeLineList: { timeLineList: {
type: Array, type: Array,
default: () => { 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) { :deep(.el-timeline-item__node) {
// background-color: $main-color; // background-color: $main-color;
background-color: v-bind('props.themeColor');
} }
:deep(.el-timeline-item__tail) { :deep(.el-timeline-item__tail) {
// border-color: $main-color; // border-color: $main-color;
// background-color: v-bind('props.themeColor');
} }
} }
// 有active样式的下一个li // 有active样式的下一个li
.active+li { .active+li {
:deep(.el-timeline-item__node) { :deep(.el-timeline-item__node) {
// background-color: $main-color; background-color: v-bind('props.themeColor');
} }
} }
</style> </style>