407 lines
11 KiB
Vue
407 lines
11 KiB
Vue
<template>
|
|
<div>
|
|
<uni-section title="派车明细" type="line"></uni-section>
|
|
<div
|
|
class="list-cont"
|
|
v-for="(item, index) in tableList"
|
|
:key="index"
|
|
:style="{ background: item.planType == 1 ? '#E3EDF5' : '#E4EAF5' }"
|
|
>
|
|
<div
|
|
class="list-item top-item"
|
|
:style="{ background: item.planType == 1 ? '#71BFF0' : '#7D9FF3', color: '#fff', borderRadius: '8px 8px 0 0' }"
|
|
>
|
|
<span class="mr-15" style="font-size: 21px; font-weight: 800">{{ index + 1 }}</span>
|
|
<u-icon
|
|
class="mr-15"
|
|
:color="item.planType == 1 ? '#71BFF0' : '#7D9FF3'"
|
|
:name="item.planType == 1 ? '/static/images/car.png' : '/static/images/car2.png'"
|
|
size="21"
|
|
></u-icon>
|
|
<span class="mr-15">{{ item.name }}</span>
|
|
<span>{{ item.model }}</span>
|
|
</div>
|
|
<div style="padding-left: 20px">
|
|
<div class="list-item">
|
|
<span>{{ item.supName }}</span>
|
|
</div>
|
|
<div style="padding-left: 20px">
|
|
<div class="list-item">
|
|
<span class="mr-15">{{ item.carNum }}</span>
|
|
<span class="mr-15">{{ item.planType == 1 ? item.carType : item.type }}</span>
|
|
<span>{{ item.planType == 1 ? item.ton : item.model }}</span>
|
|
</div>
|
|
<div class="list-item" v-if="item.planType == 1">
|
|
<span>{{ item.goodsName }}</span>
|
|
</div>
|
|
<div class="list-item">
|
|
<span>{{ item.planType == 1 ? item.gls : item.planDay }}</span>
|
|
</div>
|
|
<div class="list-item" v-if="item.planType == 2">
|
|
<span>{{ item.useAddress }}</span>
|
|
</div>
|
|
<div class="list-item" v-if="item.planType == 1">
|
|
<span>{{ item.startAddress }}</span>
|
|
</div>
|
|
<div class="list-item" v-if="item.planType == 1">
|
|
<span>{{ item.endAddress }}</span>
|
|
</div>
|
|
<div class="list-item">
|
|
<span class="mr-15">附件数量</span>
|
|
<span class="mr-15" style="color: #3c9cff">{{ (item.fileList && item.fileList.length) || 0 }}</span>
|
|
<span style="color: #3c9cff" @click="handleFile(item)">查看附件>></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- btn -->
|
|
<div class="btn-wrap" v-if="opt.isAudit">
|
|
<div style="margin: 0 15px">
|
|
<u-button type="primary" @click="showModal = true">审 核</u-button>
|
|
</div>
|
|
</div>
|
|
|
|
<u-modal :show="showModal" title="派车审核" showCancelButton @cancel="showModal = false" @confirm="dispatchAudit">
|
|
<view class="slot-content">
|
|
<div>
|
|
<div class="item-wrap">
|
|
<div class="item" :class="{ active: isPass }" @click="isPass = true">通过</div>
|
|
<div class="item" :class="{ active: !isPass }" @click="isPass = false">不通过</div>
|
|
</div>
|
|
<u-textarea
|
|
v-model="opinion"
|
|
placeholder="不通过必须填写审核不通过意见"
|
|
:rows="5"
|
|
maxlength="200"
|
|
count
|
|
></u-textarea>
|
|
</div>
|
|
</view>
|
|
</u-modal>
|
|
|
|
<!-- 附件弹出层 -->
|
|
<u-popup :show="showPop" mode="center" round="8" @close="showPop = false">
|
|
<div class="uPopup">
|
|
<div class="pop-title">{{ imgList && imgList.length > 0 ? imgList[current].title : '' }}</div>
|
|
<div class="content">
|
|
<u-swiper
|
|
v-if="imgList.length > 0"
|
|
:list="imgList"
|
|
@change="e => (current = e.current)"
|
|
:autoplay="false"
|
|
@click="handleSwiper"
|
|
>
|
|
<view slot="indicator" class="indicator">
|
|
<view
|
|
class="indicator__dot"
|
|
v-for="(item, index) in imgList"
|
|
:key="index"
|
|
:class="[index === current && 'indicator__dot--active']"
|
|
></view>
|
|
</view>
|
|
</u-swiper>
|
|
</div>
|
|
<u-empty v-if="imgList.length == 0 || !imgList" mode="data"></u-empty>
|
|
</div>
|
|
</u-popup>
|
|
|
|
<!-- 空状态 -->
|
|
<u-empty v-if="tableList.length == 0" mode="data"></u-empty>
|
|
|
|
<!-- loading -->
|
|
<u-loading-page :loading="isLoading" icon-size="39" style="z-index: 99999"></u-loading-page>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getDispatchCarData, getOutDetails, dispatchAudit } from '@/api/carManage'
|
|
import config from '@/config'
|
|
export default {
|
|
props: {
|
|
opt: {
|
|
type: Object,
|
|
default: () => {}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
token: uni.getStorageSync('App-Token'),
|
|
showModal: false,
|
|
isPass: true,
|
|
opinion: '', // 审核意见
|
|
isLoading: false,
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
tableList: [
|
|
// {
|
|
// carName: '车辆名称',
|
|
// carType: '车辆类型',
|
|
// name: '姓名',
|
|
// carNum: '车牌号',
|
|
// carLoad: '车辆载重',
|
|
// tool: '工具',
|
|
// distance: '距离',
|
|
// company: '公司',
|
|
// address: '地址',
|
|
// fileList: []
|
|
// },
|
|
// {
|
|
// carName: '车辆名称',
|
|
// carType: '车辆类型',
|
|
// name: '姓名',
|
|
// carNum: '车牌号',
|
|
// carLoad: '车辆载重',
|
|
// tool: '工具',
|
|
// distance: '距离',
|
|
// company: '公司',
|
|
// address: '地址',
|
|
// fileList: [
|
|
// {
|
|
// url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
|
// title: '昨夜星辰昨夜风，画楼西畔桂堂东'
|
|
// },
|
|
// {
|
|
// url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
|
// title: '身无彩凤双飞翼，心有灵犀一点通'
|
|
// },
|
|
// {
|
|
// url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
|
// title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
|
|
// }
|
|
// ]
|
|
// },
|
|
],
|
|
showPop: false,
|
|
imgList: [],
|
|
current: 0
|
|
}
|
|
},
|
|
mounted() {
|
|
console.log('🚀 ~ 计划审核 ~ this.opt', this.opt)
|
|
if (this.opt.isArrival) {
|
|
this.getDispatchCarData()
|
|
} else {
|
|
this.getOutDetails()
|
|
}
|
|
},
|
|
methods: {
|
|
// 派车详情-到货确认单
|
|
async getDispatchCarData() {
|
|
try {
|
|
const params = {
|
|
encryptedData: JSON.stringify({ planId: this.opt.planId })
|
|
}
|
|
const res = await getOutDetails(params)
|
|
console.log('🚀 ~ getDispatchCarData ~ res', res)
|
|
this.tableList = res.data
|
|
} catch (error) {
|
|
console.log('🚀 ~ getDispatchCarData ~ error', error)
|
|
}
|
|
},
|
|
// 派车详情-派车管理
|
|
async getOutDetails() {
|
|
try {
|
|
let params = {}
|
|
if (this.isAudit) {
|
|
params = {
|
|
encryptedData: JSON.stringify({ outId: this.opt.outId })
|
|
}
|
|
} else {
|
|
params = {
|
|
encryptedData: JSON.stringify({ planId: this.opt.planId })
|
|
}
|
|
}
|
|
const res = await getOutDetails(params)
|
|
console.log('🚀 ~ 派车详情-派车管理 ~ res', res)
|
|
this.tableList = res.data
|
|
} catch (error) {
|
|
console.log('🚀 ~ getOutDetails ~ error', error)
|
|
}
|
|
},
|
|
// 查看附件
|
|
handleFile(item) {
|
|
if (!item.fileList || item.fileList.length == 0) {
|
|
uni.showToast({
|
|
title: '暂无附件',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
this.imgList = item.fileList
|
|
this.imgList.forEach((item, index) => {
|
|
item.url = config.fileUrlGzCar + item.fileUrl + '?token=' + this.token
|
|
})
|
|
console.log('🚀 ~ 查看附件 ~ this.imgList', this.imgList)
|
|
this.showPop = true
|
|
this.current = 0
|
|
console.log('🚀 ~ 查看附件 ~ item', item)
|
|
},
|
|
handleSwiper() {
|
|
// 预览当前图片
|
|
uni.previewImage({
|
|
current: this.imgList[this.current].url,
|
|
urls: this.imgList.map(item => item.url)
|
|
})
|
|
},
|
|
submit() {
|
|
console.log('🚀 ~ 提交 ~ submit ~ this.isPass', this.isPass)
|
|
console.log('🚀 ~ 提交 ~ submit ~ this.opinion', this.opinion)
|
|
},
|
|
// 派车审核
|
|
async dispatchAudit() {
|
|
const params = {
|
|
encryptedData: JSON.stringify({
|
|
id: this.opt.outId,
|
|
planId: this.opt.planId,
|
|
status: this.isPass ? 1 : 2,
|
|
remark: this.remark
|
|
})
|
|
}
|
|
try {
|
|
const res = await dispatchAudit(params)
|
|
console.log('🚀 ~ dispatchAudit ~ res', res)
|
|
uni.showToast({
|
|
title: '审核成功',
|
|
icon: 'success'
|
|
})
|
|
setTimeout(() => {
|
|
this.showModal = false
|
|
uni.navigateBack()
|
|
}, 1000)
|
|
} catch (error) {
|
|
console.log('🚀 ~ dispatchAudit ~ error', error)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
padding-bottom: 70px;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
.list-cont {
|
|
color: #666;
|
|
margin: 15px;
|
|
margin-bottom: 15px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
|
|
|
|
.list-item {
|
|
padding: 5px 15px;
|
|
.title {
|
|
color: #999;
|
|
}
|
|
|
|
div {
|
|
line-height: 1.9;
|
|
}
|
|
span {
|
|
line-height: 1.5;
|
|
}
|
|
}
|
|
.top-item {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.btn-wrap {
|
|
width: 100%;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: #fff;
|
|
padding: 15px 0 20px;
|
|
}
|
|
.mr-15 {
|
|
margin-right: 15px;
|
|
}
|
|
.slot-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
.item-wrap {
|
|
margin-bottom: 15px;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.item {
|
|
width: 45%;
|
|
height: 30px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border: 1px solid #e8e8e8;
|
|
border-radius: 30px;
|
|
background-color: #f8f8f8;
|
|
color: #666;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease;
|
|
|
|
&.active {
|
|
color: $u-primary;
|
|
background-color: #f8f8f8;
|
|
border: 1px solid $u-primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.uPopup {
|
|
width: 90vw;
|
|
/* min-height: 30vh; */
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
box-sizing: border-box;
|
|
.pop-title {
|
|
font-size: 16px;
|
|
font-weight: 800;
|
|
margin-bottom: 10px;
|
|
text-align: center;
|
|
color: #777;
|
|
}
|
|
.content {
|
|
/* 居中*/
|
|
margin: 5vh auto;
|
|
}
|
|
}
|
|
.indicator {
|
|
@include flex(row);
|
|
justify-content: center;
|
|
|
|
&__dot {
|
|
height: 6px;
|
|
width: 6px;
|
|
border-radius: 100px;
|
|
background-color: rgba(255, 255, 255, 0.35);
|
|
margin: 0 5px;
|
|
transition: background-color 0.3s;
|
|
|
|
&--active {
|
|
background-color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.indicator-num {
|
|
padding: 2px 0;
|
|
background-color: rgba(0, 0, 0, 0.35);
|
|
border-radius: 100px;
|
|
width: 35px;
|
|
@include flex;
|
|
justify-content: center;
|
|
|
|
&__text {
|
|
color: #ffffff;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
</style>
|