apps/supplier-dispatch-h5
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完善车辆管理模块

Browse Source
This commit is contained in:
zhouxueli
2023-08-16 17:29:17 +08:00
parent c27a99d0ac
commit 1a119820dd
23 changed files with 389 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
src/views/workOrder/accounting.vue Normal file
View File

@ -0,0 +1,180 @@
<template>
<div class="wrap">
<div class="baseInfo common">
<div class="title">基本信息:</div>
<div class="line"></div>
<div class="item">
<span class="title">工单编号：</span>
<span class="content" id="copyText">ZD230626124283</span>
<img @click="copyText" src="@/assets/copy.png" />
</div>
<div class="item">
<span class="title">车牌号：&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span class="content">湘H-DD899</span>
</div>
<div class="item">
<span class="title">服务类型：</span>
<span class="content" >搭电</span>
</div>
<div class="item">
<span class="title">工单状态：</span>
<span class="content" >未完成</span>
</div>
<div class="item">
<span class="title">结算比例：</span>
<span class="content" >按服务不成功结算</span>
</div>
<div class="item">
<span class="title">结算类型：</span>
<span class="content" >系统一口价</span>
</div>
<div class="item" >
<span class="title">结算方式：</span>
<div class="content" style="width: calc(100% - 84px);display: flex;justify-content: space-between;line-height: 27px" >
<span>起步价:135</span>
<span>包含公里数:15</span>
<span>超出单价:6</span>
</div>
</div>
<div class="item">
<span class="title">扣除责任险费：</span>
<span class="content">0</span>
</div>
</div>
<div class="supplierData common">
<div class="title">供应商数据:</div>
<div class="line"></div>
<div class="inpInfo">
<div class="titleContent">
<div>拖车里程:</div>
<div>路桥费:</div>
<div>小轮费:</div>
<div>收取客户金额:</div>
<div>费用总计:</div>
<div>备注说明:</div>
</div>
<div class="inputContent">
<div class="halfOpcity"><input type="number"/>公里</div>
<div class="halfOpcity"><input type="number"/>元</div>
<div class="halfOpcity"><input type="number"/>元</div>
<div class="halfOpcity"><input type="number"/>元</div>
<div class="btnComputed">计算</div>
</div>
</div>
<textarea class="multipleTxt" placeholder="报备描述"></textarea>
<two-common-btn class="btn" @cancelClick="cancelBtn" @submitClick="submitBtn" />
</div>
</div>
</template>
<script>
import {myMixins} from '@/utils/myMixins'
import TwoCommonBtn from "@/components/twoBtnCommon.vue"
export default {
name: "accountingView",
mixins:[myMixins],
methods:{
cancelBtn(){
console.log("取消")
},
submitBtn(){
console.log("提交")
}
},
components:{
TwoCommonBtn
}
}
</script>
<style scoped lang="scss">
@import "@/styles/mixin.scss";
.wrap{
width: 100%;
height: 100%;
background-color: #F4F5F7;
}
.title{
@include fontWeightSize(bold,14px);
color: #323643;
opacity: 0.66;
}
.line{
@include wh(100%,2px);
opacity: 0.16;
border-top: 1px solid;
margin-top: 7px;
border-image: linear-gradient(270deg, rgba(217, 217, 217, 0.6), rgba(178, 178, 178, 1), rgba(178, 178, 178, 1), rgba(217, 217, 217, 0.6)) 1 1;
}
.item{
display: flex;
align-items: center;
@include fontWeightSize(400,12px);
.title{
opacity: .5;
line-height: 27px;
}
}
img{
@include wh(35px,15px);
margin-left: 21px;
}
.common{
background-color: #FFFFFF;
padding: 11px 24px 14px;
box-sizing: border-box;
margin-bottom: 10px;
}
.baseInfo{
@include wh(100%,276px);
}
.supplierData{
@include wh(100%,438px);
.inpInfo{
display: flex;
justify-content: space-between;
margin: 0 5px;
color: #323643;
line-height: 32px;
input{
border: none;
text-align: right;
}
.titleContent{
width: 91px;
@include fontWeightSize(bold,13px);
}
.halfOpcity{
opacity: .5;
}
.inputContent{
text-align: right;
//opacity: .5;e
.btnComputed{
width: 48px;
@include all-height(18px);
text-align: center;
color: #FFFFFF;
background: #354D93;
border-radius: 3px;
position: absolute;
right: 24px;
}
}
}
.multipleTxt{
@include wh(100%,87px);
background: #FAFAFA;
border-radius: 3px;
border: 1px solid #E6E6E6;
backdrop-filter: blur(10px);
padding: 8px;
box-sizing: border-box;
}
.btn{
margin-top: 8px;
}
}
</style>

250
src/views/workOrder/reAccounting.vue Normal file
View File

@ -0,0 +1,250 @@
<template>
<div class="wrap">
<div class="baseInfo common">
<div class="title">基本信息:</div>
<div class="line"></div>
<div class="item">
<span class="title">工单编号：</span>
<span class="content" id="copyText">ZD230626124283</span>
<img @click="copyText" src="@/assets/copy.png" />
</div>
<div class="item">
<span class="title">车牌号：&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span class="content">湘H-DD899</span>
</div>
<div class="item">
<span class="title">服务类型：</span>
<span class="content" >搭电</span>
</div>
<div class="item">
<span class="title">工单状态：</span>
<span class="content" >未完成</span>
</div>
<div class="item">
<span class="title">结算比例：</span>
<span class="content" >按服务不成功结算</span>
</div>
<div class="item">
<span class="title">结算类型：</span>
<span class="content" >系统一口价</span>
</div>
<div class="item" >
<span class="title">结算方式：</span>
<div class="content" style="width: calc(100% - 84px);display: flex;justify-content: space-between;line-height: 27px" >
<span>起步价:135</span>
<span>包含公里数:15</span>
<span>超出单价:6</span>
</div>
</div>
<div class="item">
<span class="title">扣除责任险费：</span>
<span class="content">0</span>
</div>
</div>
<div class="dataType">
<table>
<tr>
<td class="col1 checkData">审核数据</td>
<td class="col2 supplierData">供应商数据</td>
</tr>
<tr>
<td class="col1">拖车里程:32km</td>
<td class="col2 halfOpc"><input placeholder="输入拖车公里"/></td>
</tr>
<tr>
<td class="col1">路桥费:36元</td>
<td class="col2 halfOpc"><input placeholder="输入路桥费"/></td>
</tr>
<tr>
<td class="col1">小轮费:32元</td>
<td class="col2 halfOpc"><input placeholder="输入小轮费"/></td>
</tr>
<tr>
<td class="col1">收取客户:100元</td>
<td class="col2 halfOpc"><input placeholder="收取客户金额"/></td>
</tr>
<tr>
<td class="col1">费用总计:165元</td>
<td class="col2" style="position: relative" >
<span class="halfOpc">费用总计</span>
<button class="btnCom">计算</button></td>
</tr>
<tr>
<td class="col1 alignLeft" style="border-bottom-left-radius: 3px">
<div class="title col1" style="white-space: nowrap;">审核失败原因</div>
<div class="reason">审核失败原因审核失败原因审核失败原因审核失败原因审核失败原因</div>
<div class="imgWrap">
<img class="camerImg" src="@/assets/camer.png" >
<img class="camerImg" src="@/assets/camer.png" >
</div>
</td>
<td class="col2 alignLeft" style="border-bottom-right-radius: 3px">
<div class="title"> 本次补充说明:</div>
<!-- <div class="reason">审核失败原因审核失败原因审核失败原因审核失败原因审核失败原因</div>-->
<div class="imgWrap">
<img class="camerImg" src="@/assets/camer.png" >
<img class="camerImg" src="@/assets/camer.png" >
<img class="camerImg" src="@/assets/camer.png" >
</div>
</td>
</tr>
</table>
</div>
<div class="btn">
<button>取消</button>
<button>再次审核</button>
<button class="submit">提交</button>
</div>
</div>
</template>
<script>
import {myMixins} from '@/utils/myMixins'
export default {
name: "reAccountingView",
mixins:[myMixins],
methods:{
}
}
</script>
<style scoped lang="scss">
@import "@/styles/mixin.scss";
.wrap{
width: 100%;
height: 100%;
background-color: #F4F5F7;
overflow-y: auto;
}
.title{
@include fontWeightSize(bold,14px);
color: #323643;
opacity: 0.66;
}
.line{
@include wh(100%,2px);
opacity: 0.16;
border-top: 1px solid;
margin-top: 7px;
border-image: linear-gradient(270deg, rgba(217, 217, 217, 0.6), rgba(178, 178, 178, 1), rgba(178, 178, 178, 1), rgba(217, 217, 217, 0.6)) 1 1;
}
.item{
display: flex;
align-items: center;
@include fontWeightSize(400,12px);
.title{
opacity: .5;
line-height: 27px;
}
img{
@include wh(35px,15px);
margin-left: 21px;
}
}
.common{
background-color: #FFFFFF;
padding: 11px 24px 14px;
box-sizing: border-box;
margin-bottom: 10px;
}
.baseInfo{
@include wh(100%,276px);
}
.dataType{
padding: 0 8px;
table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
td {
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
.alignLeft{
text-align: left !important;
.reason{
@include fontWeightSize(400,11px);
color: #FF8F37;
opacity: 1 !important;
}
.camerImg{
@include widHeiMar(54px,42px,4px);
margin-top: 15px;
}
.title{
@include fontWeightSize(400,11px);
opacity: .5;
}
}
.col1{
width: 41%;
background-color: #E9E9EA;
@include fontWeightSize(400,12px);
opacity: 0.55;
}
.col2{
width: 58%;
background-color: #EAEFF6;
@include fontWeightSize(400,12px);
color: #0434D0;
input{
width: 72px;
border: none;
background-color:#EAEFF6;
text-align: center;
}
input::placeholder {
color: #0434D0; /* 设置提示内容文字颜色 */
}
}
.btnCom{
position: absolute;
right: 13px;
border: none;
width: 48px;
@include all-height(18px);
background: #354D93;
border-radius: 3px;
color: #FFFFFF;
@include fontWeightSize(bold,12px)
}
.checkData,.supplierData{
color: #323643;
}
.checkData{
border-top-left-radius: 3px;
opacity: 0.66;
}
.supplierData{
border-top-right-radius: 3px;
}
.halfOpc{
opacity: .5;
}
}
.btn{
margin-top: 31px;
margin-bottom: 20px;
display: flex;
justify-content: space-around;
box-sizing: border-box;
padding: 0 8px;
button{
@include wh(105px,39px);
line-height: 39px;
background: #9EA7C0;
border-radius: 5px;
color: #FFFFFF;
@include fontWeightSize(bold,14px);
border: none;
}
.submit{
background: #354D93;
}
}
</style>

32
src/views/workOrder/workOrderReconciliation.vue Normal file
View File

@ -0,0 +1,32 @@
<template>
<div class="wrap">
<div class="navBar">
<van-nav-bar
title="工单对账"
left-arrow
left-arrow-color="#FFFFFF"
:border="false"
:fixed="true"
:safe-area-inset-top="true"
@click-left="goPage"
/>
</div>
</div>
</template>
<script>
export default {
name: "workOrderReconciliation",
methods:{
}
}
</script>
<style scoped lang="scss">
@import "@/styles/common.scss";
@import "@/styles/mixin.scss";
.navBar{
margin-bottom: 46px;
}
</style>