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/index/accounting.vue
View File

@ -1,180 +0,0 @@
<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(500,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(500,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>

4
src/views/index/driverAdd.vue
View File

@ -141,7 +141,7 @@ export default {
box-sizing: border-box;
padding-right: 25px;
.titleType{
@include fontWeightSize(500,14px);
@include fontWeightSize(bold,14px);
color: #323643;
}
.isJoin{
@ -160,7 +160,7 @@ export default {
input{
border: none;
text-align: right;
@include fontWeightSize(500,13px);
@include fontWeightSize(bold,13px);
opacity: .5;
}

45
src/views/index/driverManage.vue
View File

@ -1,5 +1,23 @@
<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"
>
<template slot="right">
<div class="rightWrap" @click="addDriver">
<img src="@/assets/addImg.png" />
<span class="addTxt">添加</span>
</div>
</template>
</van-nav-bar>
</div>
<div class="itemWrap">
<div class="name-status">
<div class="namephone">王小微 / 15234345656</div>
@ -70,6 +88,7 @@ export default {
<style scoped lang="scss">
@import '@/styles/mixin.scss';
@import "@/styles/common.scss";
.wrap {
background: #F4F5F7;
@ -77,6 +96,28 @@ export default {
padding: 13px;
@include wh(100%, 100%);
}
.navBar{
//height: 46px;
margin-bottom: 46px;
.rightWrap{
width: 50px;
height: 20px;
border-radius: 10px;
opacity: 0.7;
border: 1px solid #FFFFFF;
@include flexCenter;
justify-content: center;
img{
@include widHeiMar(9px,8px,4px);
}
.addTxt{
@include fontWeightSize(bolder,11px);
opacity: .7;
color: #FFFFFF;
}
}
}
.itemWrap {
@include wh(100%, 104px);
@ -112,7 +153,7 @@ export default {
justify-content: space-between;
.namephone {
@include fontWeightSize(500, 14px)
@include fontWeightSize(bold, 14px)
}
.twoBtn {
@ -121,7 +162,7 @@ export default {
width: 48px;
@include all-height(20px);
border-radius: 3px;
@include fontWeightSize(500, 12px)
@include fontWeightSize(bold, 12px)
}
.del {

6
src/views/index/invoicingDetail.vue
View File

@ -8,7 +8,7 @@
:border="false"
:fixed="true"
:safe-area-inset-top="true"
@click-left="onClickLeft"
@click-left="h5GoBack"
/>
</div>
<div class="contentWrap">
@ -26,9 +26,7 @@ export default {
name: "invoicingDetail",
mixins:[myMixins],
methods:{
onClickLeft(){
this.goPage('invoicingNotify')
}
}
}
</script>

19
src/views/index/invoicingNotify.vue
View File

@ -1,5 +1,16 @@
<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="goBack"
/>
</div>
<div class="itemWrap" v-for="(item,index) in 3" :key="index">
<div class="item line1">
<div class="itemTime">
@ -46,18 +57,24 @@ export default {
checkDetail(index){
console.log("查看详情"+index)
}
},
}
}
</script>
<style scoped lang="scss">
@import "@/styles/mixin.scss";
@import "@/styles/common.scss";
.wrap{
@include wh(100%,100%);
background-color: #F4F5F7;
overflow-y: auto;
}
.navBar{
height: 46px;
//margin-bottom: 46px;
}
.itemWrap{
background: #FFFFFF;
@include wh(100%,194px);

250
src/views/index/reAccounting.vue
View File

@ -1,250 +0,0 @@
<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(500,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(500,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(500,14px);
border: none;
}
.submit{
background: #354D93;
}
}
</style>

2
src/views/index/reporting.vue
View File

@ -106,7 +106,7 @@ export default {
}
.title {
@include fontWeightSize(500,14px);
@include fontWeightSize(bold,14px);
color: #323643;
}

6
src/views/index/supplySettlement.vue
View File

@ -132,7 +132,7 @@ export default {
@include wh(100%, 198px)
}
.title {
@include fontWeightSize(500, 14px);
@include fontWeightSize(bold, 14px);
color: #323643;
opacity: 0.66;
}
@ -149,7 +149,7 @@ export default {
justify-content: space-between;
line-height: 37px;
.blueColor{
@include fontWeightSize(500,14px);
@include fontWeightSize(bold,14px);
color: #4682FE;
}
.alignRight{
@ -161,7 +161,7 @@ export default {
}
.rightInputMeters {
margin-right: 13px;
@include fontWeightSize(500, 13px);
@include fontWeightSize(bold, 13px);
color: #323643;
opacity: .5;
input {

25
src/views/index/toDoList.vue
View File

@ -1,9 +1,14 @@
<template>
<div class="wrap" >
<ul id="dataList" class="dataList">
<div v-if="show" style="width:100%;height:100%;background: #F1F5F9;;display: flex;align-items: center;justify-content: center">
<img src="@/assets/empty.png" style="width:65%;">
</div>
<div class="wrap" v-else>
<ul id="dataList" class="dataList" >
<li class="item" v-for="(item,i) in todolist" :key="i">
<div class="left">
<div class="repairName"><span class="name">{{ item.toDoType.label }}</span><span class="carCode">{{item.plateNumber ? item.plateNumber : "无"}}</span></div>
<div class="repairName">
<span class="name">{{ item.toDoType.label }}</span>
<span class="carCode">{{item.plateNumber ? item.plateNumber : "无"}}</span></div>
<div class="addressName">{{ item.address }}</div>
<div class="time">{{item.toDoTime}} &nbsp;&nbsp;{{item.userName}}</div>
</div>
@ -23,17 +28,23 @@ export default {
data(){
return{
todolist:[],
show:false
}
},
mounted() {
// this.getList()
this.getList()
},
methods:{
async getList(){
let result=await getToDoList();
if(result.code === 200){
this.todolist=result.data;
console.log("this.todolist",this.todolist)
if(this.todolist.length === 0){
this.show=true
}else {
this.show=false
}
console.log("this.todolist",this.todolist.length)
}
},
async noPass(item){
@ -81,7 +92,7 @@ export default {
}
.repairName {
font-weight: 500;
font-weight: bold;
}
.name {
@ -105,7 +116,7 @@ export default {
button {
padding: 2px 8px;
@include fontWeightSize(500,12px);
@include fontWeightSize(bold,12px);
border-radius: 3px;
}

130
src/views/index/vehicleAdd.vue
View File

@ -1,26 +1,25 @@
<template>
<div class="wrap">
<div class="navBar">
<van-nav-bar
:title="id ? '修改车辆信息' : '添加车辆'"
left-arrow
left-arrow-color="#FFFFFF"
:border="false"
:fixed="true"
:safe-area-inset-top="true"
@click-left="h5GoBack"
/>
</div>
<div class="addContentWrap">
<cell-group label="车牌号" placeholder="请输入车牌号" @input="getPLateNum(carNum)" v-model="carNum" />
<!-- <div class="itemContent">-->
<!-- <div class="titleType">-->
<!-- <img class="startImg" src="@/assets/start.png" />-->
<!-- <span>车牌号</span>-->
<!-- </div>-->
<!-- <div class="checkContent">-->
<!-- <input placeholder="请输入车牌号" />-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="lineBot"></div>-->
<div class="itemContent">
<div class="titleType">
<img class="startImg" src="@/assets/start.png" />
<span>车辆类型</span>
</div>
<select id="mySelect" style="width: 80px">
<option value="一般平板">一般平板</option>
<option value="小轿车">小轿车</option>
<option value="大卡车">大卡车</option>
<select id="mySelect" style="width: 70px" v-model="selectedOption">
<option v-for="(item,index) in typeList" :key="index" :value="index">{{item}}</option>
</select>
</div>
<div class="lineBot"></div>
@ -30,8 +29,8 @@
<span>是否参与中道聚合</span>
</div>
<div class="isJoin">
<van-radio-group v-model="radio3" @change="isChange" class="joinWrap">
<van-radio name="参与" style="margin-right: 26px">
<van-radio-group v-model="isJoin" @change="isChange" class="joinWrap">
<van-radio :name="1" style="margin-right: 26px">
参与
<img
slot="icon"
@ -39,7 +38,7 @@
:src="props.checked ? activeIcon : inactiveIcon"
>
</van-radio>
<van-radio name="不参与">
<van-radio :name="0">
不参与
<img
slot="icon"
@ -63,7 +62,7 @@
<span class="service">拖车服务:</span>
<span class="line"></span>
</div>
<van-radio-group v-model="radio" @change="change" class="radioWrap">
<van-radio-group v-model="trailerService" @change="change" class="radioWrap">
<van-radio name="故障——平板拖车" class="item">
故障——平板拖车
<img
@ -87,7 +86,7 @@
<span class="service">小修服务:</span>
<span class="line"></span>
</div>
<van-radio-group v-model="radio2" @change="change2" class="radioWrap">
<van-radio-group v-model="smallRepairService" @change="change2" class="radioWrap">
<van-radio name="换胎" class="item">
换胎
<img
@ -130,6 +129,7 @@
<script>
import {myMixins} from "@/utils/myMixins"
import {vehicleTypeList,saveVehicle,getInfoById} from "@/api/mine"
import TwoCommonBtn from "@/components/twoBtnCommon.vue"
import CellGroup from "@/components/cellGroup.vue";
export default {
@ -137,40 +137,99 @@ export default {
mixins:[myMixins],
data(){
return{
radio: '故障——平板拖车',
radio2: '换胎',
radio3:'参与',
trailerService: '',//拖车服务
smallRepairService: '',//小修服务
isJoin:'',//是否参与
activeIcon: require('@/assets/check.png'),
inactiveIcon: require('@/assets/uncheck.png'),
carNum:"",
carNum:"",//车牌号
typeList:[],//车辆类型列表
selectedOption:'1',//车辆类型
id:'',//车辆Id
serviceIds:''//车辆服务种类
}
},
mounted() {
created() {
this.id=this.$route.query?.id || ''
},
async mounted() {
const selectElement = document.getElementById('mySelect');
selectElement.addEventListener('change', function() {
const selectedValue = selectElement.value;
console.log('Selected value:', selectedValue);
this.selectedOption=selectElement.value;
// console.log(this.selectedOption,"11")
});
await this.getTypeList();
// console.log(this.selectedOption,"22")
this.id=this.$route.query?.id || ''
console.log("this.$route.query",this.id);
await this.vehicleInfo()
},
methods:{
async getTypeList() {
let result=await vehicleTypeList();
if(result.code === 200){
this.typeList=result.data
}
},
async vehicleInfo(){
let res= await getInfoById({
vehicleId:this.id
})
if(res.code === 200){
let result=res.data;
console.log("获取信息",res)
this.id=result.vehicleId
this.carNum=result.plateNumber
this.isJoin=result.hasPolymerization.code
this.selectedOption=result.vehicleType;
this.serviceIds=result.serviceIds
// console.log("num",this.carNum,this.isJoin)
}
},
change(e) {
console.log("拖车服务",e)
this.trailerService=e
},
change2(e) {
console.log("小修服务",e)
this.smallRepairService=e
},
isChange(e){
console.log("是否参与",e)
this.isJoin=e
},
cancelBtn(){
console.log("取消车辆")
cancelBtn(){//取消车辆
this.isJoin='';
this.trailerService='';
this.smallRepairService='';
this.carNum=''
},
submitBtn(){
console.log("提交车辆")
async submitBtn(){
console.log("提交车辆");
let res=await saveVehicle({
vehicleId:this.id ? this.id : '',
plateNumber:this.carNum ? this.carNum :'',
vehicleType:this.selectedOption ? this.selectedOption : '',
hasPolymerization:Number(this.isJoin ? this.isJoin : '') ,
serviceIds:this.serviceIds ? this.serviceIds : []
})
if(res.code === 200){
if(this.id){
this.$toast('修改成功')
}else{
this.$toast('添加成功')
}
setTimeout(()=>{
this.$router.back();
},2000)
}
console.log("res",res)
},
getPLateNum(e){
console.log("e",e)
}
},
},
components:{
CellGroup,
@ -182,6 +241,9 @@ export default {
<style scoped lang="scss">
@import "@/styles/mixin.scss";
@import "@/styles/common.scss";
.navBar{
margin-bottom: 46px;
}
.wrap{
@include wh(100%,100%);
}
@ -194,7 +256,7 @@ export default {
box-sizing: border-box;
padding-right: 25px;
.titleType{
@include fontWeightSize(500,14px);
@include fontWeightSize(bold,14px);
color: #323643;
}
.isJoin{
@ -213,7 +275,7 @@ export default {
input{
border: none;
text-align: right;
@include fontWeightSize(500,13px);
@include fontWeightSize(bold,13px);
opacity: .5;
}
}
@ -223,7 +285,7 @@ export default {
opacity: 0.6;
}
.serviceType{
@include fontWeightSize(500,13px);
@include fontWeightSize(bold,13px);
margin-left: 15px;
.trailerService{
margin-bottom: 10px;

128
src/views/index/vehicleManage.vue
View File

@ -1,39 +1,134 @@
<template>
<div class="wrap">
<div class="carItem" v-for="(item,index) in 3" :key="index">
<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="goBack"
>
<template slot="right">
<div class="rightWrap" @click="goPage('vehicleAdd')">
<img src="@/assets/addImg.png" />
<span class="addTxt">添加</span>
</div>
</template>
</van-nav-bar>
</div>
<div class="carItem" v-for="(item,index) in vehicleList" :key="index">
<div class="carCode">
<div class="codeLeft">苏AB6768 / 拖车</div>
<div class="codeLeft">{{item.plateNumber}} / {{item.vehicleTypeString}}</div>
<div class="twoBtn">
<button class="del">删除</button>
<button class="revise" @click="goPage('vehicleAdd')">修改</button>
<button class="del" @click="deleteItem(item.vehicleId)">删除</button>
<button class="revise" @click="goPage('vehicleAdd',{ id: item.vehicleId })">修改</button>
</div>
</div>
<div class="carType">事故--大型拖车,事故--小型拖车,事故--平板拖车....</div>
<div class="carType">{{ item.serviceName }}</div>
<div class="juhe">
<span class="zdJuhe">是否参与中道聚合: </span>
<span class="isZd isYes">是</span>
<span :class="item.hasPolymerization.code == 0 ? 'isYes' :'isNo'">{{item.hasPolymerization.label}}</span>
</div>
</div>
<van-dialog v-model="show" title="确定删除吗" show-cancel-button @confirm="handleConfirm"></van-dialog>
</div>
</template>
<script>
import { myMixins} from "@/utils/myMixins";
import {supplierVehicleList,deleteVehicle} from "@/api/mine"
export default {
name: "vehicleManage",
mixins:[myMixins],
data(){
return{
vehicleList:[],
show:false,
id:'',
pageNum:1,
pageSize:10,
total:'',
}
},
mounted() {
this.getVehicleList();
},
methods:{
async getVehicleList(){
let result = await supplierVehicleList({
pageNum:this.pageNum,
pageSize:this.pageSize
})
if(result.code === 200){
this.vehicleList=result.data;
this.total=result.total
}
},
deleteItem(id){//删除车辆
this.show=true
this.id=id
},
addVehicle(){//添加车辆
console.log("添加")
},
async handleConfirm(){//调删除车辆接口
let result= await deleteVehicle({
vehicleId:this.id
})
if(result.code === 200){
this.$toast('删除成功');
await this.getVehicleList();
}
},
async handleScroll(){
this.pageNum += 1;
let res= await this.getVehicleList();
let newData=res.data
this.vehicleList=[...this.vehicleList,...newData]
console.log("滑动")
}
}
}
</script>
<style scoped lang="scss">
@import "@/styles/mixin.scss";
@import "@/styles/common.scss";
.wrap{
@include wh(100%,100%);
overflow-y: auto;
@include wh(100%,calc(100% - 46px));
box-sizing: border-box;
padding: 13px 13px 0;
}
.navBar{
margin-bottom: 46px;
//height: 46px;
.rightWrap{
width: 50px;
height: 20px;
border-radius: 10px;
opacity: 0.7;
border: 1px solid #FFFFFF;
@include flexCenter;
justify-content: center;
img{
@include widHeiMar(9px,8px,4px);
}
.addTxt{
@include fontWeightSize(bolder,11px);
opacity: .7;
color: #FFFFFF;
}
}
}
.carItem{
//position: relative;
// z-index: 11;
@include wh(100%,86px);
background: #FFFFFF;
box-shadow: 0px 2px 10px 0px rgba(216,216,216,0.5);
@ -46,7 +141,7 @@ export default {
display: flex;
justify-content: space-between;
.codeLeft{
@include fontWeightSize(500,14px)
@include fontWeightSize(bold,14px)
}
.twoBtn{
button{
@ -54,7 +149,7 @@ export default {
width: 48px;
@include all-height(20px);
border-radius: 3px;
@include fontWeightSize(500,12px)
@include fontWeightSize(bold,12px)
}
.del{
border: 1px solid #DDDDDD;
@ -67,18 +162,23 @@ export default {
}
}
}
.carType{
width: 95%;
white-space: nowrap; // 防止文本换行
text-overflow: ellipsis; // 使用省略号表示超出部分
overflow: hidden; // 隐藏超出容器宽度的内容
}
.carType,.zdJuhe{
opacity: .7;
@include fontWeightSize(400,12px)
}
.isZd{
@include fontWeightSize(400,12px);
}
.isYes{
color: #09B820;
@include fontWeightSize(400,12px);
}
.isNo{
color: #FF0000;
@include fontWeightSize(400,12px);
}
}
</style>

9
src/views/index/workOrderDetail.vue
View File

@ -23,7 +23,10 @@
<div class="rightItem">{{ orderDetailInfo.userName }}</div>
<div class="rightItem">{{ orderDetailInfo.userPhone }}</div>
<div class="rightItem">{{ orderDetailInfo.plateNumber }}</div>
<div class="rightItem">{{orderDetailInfo.model}} {{ orderDetailInfo.brand }}</div>
<div class="rightItem" style="line-height: 17px">
<span >{{orderDetailInfo.model}}</span>
<span>{{ orderDetailInfo.brand }}</span>
</div>
</div>
</div>
</div>
@ -155,7 +158,7 @@ export default {
}
.rightContent{
width: calc(100% - 90px);
@include fontWeightSize(500,12px);
@include fontWeightSize(bold,12px);
}
.vehicleRemark{
@ -171,7 +174,7 @@ export default {
}
}
.title{
@include fontWeightSize(500,14px);
@include fontWeightSize(bold,14px);
color: #323643;
line-height: 20px;
opacity: .6;