<template>
|
<view class="">
|
<u-empty mode="data"
|
icon="http://cdn.uviewui.com/uview/empty/data.png"
|
text="暂无数据"
|
textSize="30"
|
iconSize="1000"
|
v-if="certificateData.length===0"></u-empty>
|
<view class="tran-type">
|
<view ><u-button type="primary"
|
@click="editTranClick(-1)"
|
shape="circle"
|
plain>添加通行证</u-button></view>
|
</view>
|
<view class="main"
|
v-if="certificateData.length!==0">
|
<view class="information-block"
|
v-for="item in certificateData"
|
:key="item.id">
|
<view class="detail-block" @click="editTranClick(item.status,item)">
|
<view class="line detail-reason">
|
<u--image :showLoading="true"
|
:src="item.certificateImg != null ? BaseUrl + item.certificateImg : ''"
|
width="80px"
|
height="80px"
|
@click="imageClick(item.certificateImg)">
|
<view slot="error"
|
style="font-size: 24rpx;">加载失败</view>
|
</u--image>
|
<view class="image-right">
|
<span>{{item.status==0?'未审核':item.status==1?'通过':item.status==2?'过期':item.status==-1?"未通过":null}}</span>
|
<span>{{item.customerName}}</span>
|
<span>{{item.productName}}</span>
|
</view>
|
</view>
|
<view class="line detail-value">
|
司机：{{item.driverName}}
|
</view>
|
<view class="line detail-value">
|
押运员：{{item.supercargoInfo?getUserName(item.supercargoInfo):'无'}}
|
</view>
|
<view class="line detail-value">
|
{{item.startTime?item.startTime.slice(0,10):""}}-{{item.expirationTime?item.expirationTime.slice(0,10):""}}
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="previewImage-container">
|
<u-popup :show="previewImageShow"
|
mode="center"
|
@close="previewImageClose"
|
@open="previewImageOpen">
|
<u--image :src="previewImageSrc != null ? BaseUrl + previewImageSrc : ''"
|
width="400px"
|
height="400px"></u--image>
|
</u-popup>
|
</view>
|
<!-- 添加剧毒通行证 -->
|
<view class="editDriverPopup-container">
|
<u-popup :show="editTranShow"
|
mode="bottom"
|
@close="editTranClose"
|
@open="editTranOpen"
|
:closeable="true">
|
<combined-title title="通行证"
|
style="margin-left:20rpx"></combined-title>
|
<view class="editDriverPopup-container-box">
|
<u--form labelPosition="left"
|
:model="tranSportForm"
|
:rule="sportRules"
|
ref="sportRef">
|
<u-form-item labelWidth="20%"
|
label="通行证号"
|
prop="certificateNo"
|
required>
|
<u--input v-model="tranSportForm.certificateNo"
|
border="none"
|
inputAlign="left"
|
@blur="inputCertificateNo"
|
></u--input>
|
</u-form-item>
|
<u-form-item labelWidth="20%"
|
label="车牌号"
|
prop="carNo"
|
required>
|
<u--input v-model="tranSportForm.carNo"
|
border="none"
|
inputAlign="left"></u--input>
|
</u-form-item>
|
<u-form-item labelWidth="20%"
|
label="产品"
|
ref="item1"
|
prop='productName'
|
required>
|
<u--input placeholder="请输入产品"
|
v-model="tranSportForm.productName"
|
class="input"
|
type="text"></u--input>
|
</u-form-item>
|
<u-form-item labelWidth="20%"
|
label="客户"
|
ref="item1"
|
prop='customerName'
|
required>
|
<u--input placeholder="请输入客户"
|
v-model="tranSportForm.customerName"
|
class="input"
|
type="text"></u--input>
|
</u-form-item>
|
<u-form-item prop="certificateImg"
|
label="通行证"
|
labelWidth="20%"
|
borderBottom
|
required
|
@click="beforeRead">
|
<u-upload :fileList="fileList9"
|
deletable
|
@afterRead="afterRead"
|
@delete="deletePic"
|
name="9"
|
multiple
|
:maxCount="1"
|
width="250"
|
height="150"
|
:previewFullImage="true">
|
</u-upload>
|
</u-form-item>
|
<u-form-item prop="startTime"
|
label="通行证开始时间"
|
labelWidth="20%"
|
borderBottom>
|
<uni-datetime-picker v-model="tranSportForm.startTime" type="datetime" />
|
</u-form-item>
|
<u-form-item prop="expirationTime"
|
label="通行证过期时间"
|
labelWidth="20%"
|
borderBottom>
|
<uni-datetime-picker v-model="tranSportForm.expirationTime" type="datetime" :start="minDate" />
|
</u-form-item>
|
<view class="adddelete">
|
<u-button text="添加驾驶员"
|
@click="addDriver"
|
type="primary"></u-button>
|
<u-button text="删除驾驶员"
|
@click="deleteDriver"
|
type="error"></u-button>
|
</view>
|
<view class="superList" v-for="(item,index) in driverList" :key="index">
|
<u-form-item labelWidth="20%"
|
label="姓名"
|
prop="driverName"
|
required>
|
<u--input v-model="item.driverName"
|
border="none"
|
inputAlign="left"></u--input>
|
</u-form-item>
|
<u-form-item labelWidth="20%"
|
label="身份证"
|
prop="driverIdcard"
|
required>
|
<u--input v-model="item.driverIdcard"
|
border="none"
|
inputAlign="left"></u--input>
|
</u-form-item>
|
</view>
|
<view class="adddelete">
|
<u-button text="添加押运员"
|
@click="addSupercar"
|
type="primary"></u-button>
|
<u-button text="删除押运员"
|
@click="deleteSupercar"
|
type="error"></u-button>
|
</view>
|
<view class="superList" v-for="(item,index) in supercargoList" :key="index">
|
<u-form-item labelWidth="20%"
|
label="姓名"
|
prop="driverName"
|
required>
|
<u--input v-model="item.driverName"
|
border="none"
|
inputAlign="left"></u--input>
|
</u-form-item>
|
<u-form-item labelWidth="20%"
|
label="身份证"
|
prop="driverIdcard"
|
required>
|
<u--input v-model="item.driverIdcard"
|
border="none"
|
inputAlign="left"></u--input>
|
</u-form-item>
|
<u-form-item labelWidth="20%"
|
label="手机号"
|
prop="driverPhone"
|
required>
|
<u--input v-model="item.driverPhone"
|
border="none"
|
inputAlign="left"></u--input>
|
</u-form-item>
|
</view>
|
|
<u-form-item labelWidth="20%"
|
label="备注"
|
prop="remarks">
|
<u--input v-model="tranSportForm.remarks"
|
border="none"
|
inputAlign="left"></u--input>
|
</u-form-item>
|
</u--form>
|
<view class="person-utils">
|
<u-button text="提交剧毒通行证"
|
@click="updateRoad"
|
:disabled="upload"
|
type="primary"></u-button>
|
</view>
|
</view>
|
</u-popup>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { BaseUrl } from '@/api/publicInterface.js';
|
import { mapMutations, mapState } from 'vuex';
|
export default {
|
data() {
|
return {
|
minDate: this.getToday(),
|
previewImageShow: false,
|
supercargoList:[{
|
driverName:"",
|
driverIdcard:"",
|
driverPhone:""
|
}],
|
userInfo: {},
|
scoreDetailList: [],
|
editTranShow:false,
|
upload:false,
|
fileList9: [],
|
BaseUrl,
|
previewImageSrc: '',
|
certificateData:[],
|
driverList:[{
|
driverName:"",
|
driverIdcard:""
|
}],
|
tranSportForm:{
|
carNo:"",
|
productId:"",
|
customerId:""
|
},
|
sportRules:{
|
productName:{
|
type: 'string',
|
required: true,
|
message: '请填写产品名称',
|
trigger: ['blur', 'change']
|
},
|
customerName:{
|
type: 'string',
|
required: true,
|
message: '请填写客户名称',
|
trigger: ['blur', 'change']
|
},
|
certificateNo: {
|
type: 'string',
|
required: true,
|
message: '请填写通行证号',
|
trigger: ['blur', 'change']
|
},
|
expirationTime: [{
|
type: 'string',
|
required: true,
|
message: '请选择通行证过期时间',
|
trigger: ['blur', 'change']
|
},{
|
pattern: /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/,
|
message: '请选择开始时间'
|
}],
|
startTime:[{
|
type: 'string',
|
required: true,
|
message: '请选择通行证开始时间',
|
trigger: ['blur', 'change']
|
},{
|
pattern: /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/,
|
message: '请选择开始时间'
|
}],
|
carNo: [{
|
type: 'string',
|
required: true,
|
message: '请输入车牌号',
|
trigger: ['blur', 'change']
|
},
|
{
|
transform(value) {
|
return String(value);
|
},
|
validator: (rule, value, callback) => {
|
return uni.$u.test.carNo(value);
|
},
|
message: '请输入正确的车牌号',
|
trigger: ['change', 'blur']
|
}
|
],
|
},
|
}
|
},
|
onReady() {
|
this.$refs.sportRef.setRules(this.sportRules);
|
},
|
onLoad() {
|
this.getScoreDetail()
|
this.getData()
|
},
|
methods: {
|
...mapMutations(['changeisUploadimg']),
|
beforeRead() {
|
this.changeisUploadimg(true);
|
},
|
getData(){
|
this.$reqGet('getUserEntity').then(res => {
|
this.userInfo = res.data;
|
this.$reqGetId('getDriverListById', this.userInfo.userId).then(res => {
|
this.certificateData = res.data;
|
});
|
});
|
},
|
imageClick(data) {
|
this.previewImageSrc = data;
|
this.$nextTick(() => {
|
this.previewImageShow = true;
|
});
|
},
|
previewImageClose() {
|
this.previewImageShow = false;
|
},
|
previewImageOpen() {},
|
// 删除
|
deletePic(event) {
|
this.changeisUploadimg(true);
|
this[`fileList${event.name}`].splice(event.index, 1);
|
},
|
getToday() {
|
let now = new Date();
|
let year = now.getFullYear();
|
let month = this.padStart(now.getMonth() + 1); // 月份是从0开始的
|
let day = this.padStart(now.getDate());
|
let hour = this.padStart(now.getHours());
|
let minute = this.padStart(now.getMinutes());
|
let second = this.padStart(now.getSeconds());
|
return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
|
},
|
padStart(value) {
|
return value.toString().padStart(2, '0');
|
},
|
inputCertificateNo() {
|
this.$reqGet('checkNumber', {certificateNo:this.tranSportForm.certificateNo}).then(res => {
|
if (res.code == 0) {
|
this.upload=false
|
} else {
|
this.upload=true
|
uni.showToast({
|
title: res.msg,
|
icon: 'none',
|
duration: 2000
|
});
|
}
|
});
|
},
|
editTranClick(e,data){
|
if(e==-1){
|
this.editTranShow = true;
|
this.tranSportForm={
|
carNo:"",
|
productId:"",
|
customerId:""
|
}
|
this.driverList=[]
|
this.supercargoList=[]
|
this.fileList9=[]
|
this.tranSportForm.carNo=this.userInfo.carNo
|
this.driverList[0]={
|
driverName:this.userInfo.name,
|
driverIdcard:this.userInfo.idCard
|
}
|
if(data){
|
this.tranSportForm=Object.assign({},this.tranSportForm,data)
|
this.supercargoList =this.tranSportForm.supercargoInfo.split(",").map(item=>{
|
return {driverName:item.split("|")[0],driverIdcard:item.split("|")[1],driverPhone:item.split("|")[2]}
|
})
|
this.driverList=this.tranSportForm.driverName.split(",").map((item,index)=>{
|
return {driverName:item,driverIdcard:this.tranSportForm.driverIdcard.split(",")[index]}
|
})
|
if (this.fileList9.length == 0 && this.tranSportForm.certificateImg) {
|
this.fileList9.push({
|
url: `${BaseUrl}${this.tranSportForm.certificateImg}`
|
});
|
}
|
}
|
}
|
|
},
|
editTranClose(){
|
this.editTranShow = false;
|
},
|
editTranOpen(){},
|
updateRoad(){
|
this.$refs.sportRef
|
.validate()
|
.then(res => {
|
let submit=true
|
let idcardtext=/^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
|
if (this.fileList9.length==0) {
|
uni.showToast({
|
title: '请选择通行证！',
|
icon: 'error',
|
duration: 2000
|
});
|
submit=false
|
}else if(this.driverList.length>0){
|
this.driverList.forEach((item,index)=>{
|
if(!item.driverName){
|
uni.showToast({
|
title: `请填写驾驶姓名！`,
|
icon: 'error',
|
duration: 2000
|
});
|
submit=false
|
}else if(!item.driverIdcard){
|
uni.showToast({
|
title: `请填写驾驶身份证！`,
|
icon: 'error',
|
duration: 2000
|
});
|
submit=false
|
}else if(!idcardtext.test(item.driverIdcard)){
|
uni.showToast({
|
title: `请检验驾驶员身份证！`,
|
icon: 'error',
|
duration: 2000
|
});
|
submit=false
|
}
|
})
|
}
|
if(this.supercargoList.length>0){
|
this.supercargoList.forEach((item,index)=>{
|
if(!item.driverName){
|
uni.showToast({
|
title: `请填写押运姓名！`,
|
icon: 'error',
|
duration: 2000
|
});
|
submit=false
|
}else if(!item.driverIdcard){
|
uni.showToast({
|
title: `请填写押运身份证！`,
|
icon: 'error',
|
duration: 2000
|
});
|
submit=false
|
}else if(!idcardtext.test(item.driverIdcard)){
|
uni.showToast({
|
title: `请检验押运身份证！`,
|
icon: 'error',
|
duration: 2000
|
});
|
submit=false
|
}else if(!item.driverPhone){
|
uni.showToast({
|
title: `请填写押运手机号！`,
|
icon: 'error',
|
duration: 2000
|
});
|
submit=false
|
}else if( !/^1[23456789]\d{9}$/.test(item.driverPhone)){
|
uni.showToast({
|
title: `请检验押运手机号！`,
|
icon: 'error',
|
duration: 2000
|
});
|
submit=false
|
}
|
})
|
}
|
if(submit){
|
let driverName=""
|
let driverIdcard=""
|
let supercargoInfo=''
|
driverName = this.driverList.map((item, index) => {
|
return item.driverName;
|
}).join(",");
|
driverIdcard = this.driverList.map((item, index) => {
|
return item.driverIdcard;
|
}).join(",");
|
supercargoInfo = this.supercargoList.map((item, index) => {
|
return item.driverName+ '|'+item.driverIdcard+"|"+item.driverPhone
|
}).join(",");
|
if(this.tranSportForm.id){
|
this.$reqPut('putJcroadtransport',{
|
id:this.tranSportForm.id,
|
certificateNo:this.tranSportForm.certificateNo,
|
carNo:this.tranSportForm.carNo,
|
certificateImg:this.tranSportForm.certificateImg,
|
customerName:this.tranSportForm.customerName,
|
productName:this.tranSportForm.productName,
|
startTime:this.tranSportForm.startTime,
|
expirationTime:this.tranSportForm.expirationTime,
|
status:0,
|
customerId:this.tranSportForm.customerId,
|
productId:this.tranSportForm.productId,
|
userId:this.userInfo.userId,
|
driverName:driverName,
|
driverIdcard:driverIdcard,
|
supercargoInfo:supercargoInfo
|
}, 'json').then(res => {
|
if (res.code == 0) {
|
this.editTranShow = false;
|
this.$u.toast('提交成功');
|
this.tranSportForm={
|
carNo:"",
|
productId:"",
|
customerId:""
|
}
|
this.driverList=[{
|
driverName:"",
|
driverIdcard:""
|
}]
|
this.supercargoList=[{
|
driverName:"",
|
driverIdcard:"",
|
driverPhone:""
|
}]
|
this.fileList9=[]
|
this.getData();
|
} else {
|
uni.showToast({
|
title: res.msg,
|
icon: 'none',
|
duration: 2000
|
});
|
}
|
})
|
}else{
|
this.$reqPost('addJcroadtransport', {
|
userId:this.userInfo.userId,
|
...this.tranSportForm,
|
driverName:driverName,
|
driverIdcard:driverIdcard,
|
supercargoInfo:supercargoInfo
|
}, 'json').then(res => {
|
if (res.code == 0) {
|
this.editTranShow = false;
|
this.$u.toast('提交成功');
|
this.tranSportForm={
|
carNo:"",
|
productId:"",
|
customerId:""
|
}
|
this.driverList=[{
|
driverName:"",
|
driverIdcard:""
|
}]
|
this.supercargoList=[{
|
driverName:"",
|
driverIdcard:"",
|
driverPhone:""
|
}]
|
this.fileList9=[]
|
this.getData();
|
} else {
|
uni.showToast({
|
title: res.msg,
|
icon: 'none',
|
duration: 2000
|
});
|
}
|
})
|
}
|
}
|
})
|
},
|
async afterRead(event) {
|
// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
|
let lists = [].concat(event.file);
|
let fileListLen = this[`fileList${event.name}`].length;
|
lists.map(item => {
|
this[`fileList${event.name}`].push({
|
...item,
|
status: 'uploading',
|
message: '上传中'
|
});
|
});
|
for (let i = 0; i < lists.length; i++) {
|
const result = await this.uploadFilePromise(lists[i].url, event.name);
|
let item = this[`fileList${event.name}`][fileListLen];
|
this[`fileList${event.name}`].splice(
|
fileListLen,
|
1,
|
Object.assign(item, {
|
status: 'success',
|
message: '上传成功',
|
url: result
|
})
|
);
|
fileListLen++;
|
}
|
},
|
uploadFilePromise(url, num) {
|
return new Promise((resolve, reject) => {
|
let a = uni.uploadFile({
|
url: BaseUrl + '/admin/sys-file/uploadUnToken',
|
filePath: url,
|
name: 'file',
|
// formData: {
|
// user: 'test'
|
// },
|
success: res => {
|
if(num==9){
|
this.tranSportForm.certificateImg = JSON.parse(res.data)
|
.data.url;
|
resolve(`${BaseUrl}${JSON.parse(res.data).data.url}`);
|
}
|
}
|
});
|
});
|
},
|
getScoreDetail() {
|
uni.showLoading({
|
title: '加载中’'
|
})
|
this.$reqGet('scoreDetail').then(res => {
|
uni.hideLoading()
|
this.scoreDetailList = res.data.records
|
})
|
},
|
addSupercar(){
|
this.supercargoList.push({
|
driverName:"",
|
driverIdcard:"",
|
driverPhone:""
|
})
|
},
|
addDriver(){
|
this.driverList.push({
|
driverName:"",
|
driverIdcard:""
|
})
|
},
|
deleteSupercar(){
|
if(this.supercargoList.length>1){
|
this.supercargoList.splice(this.supercargoList.length - 1, 1)
|
}
|
},
|
deleteDriver(){
|
if(this.driverList.length>1){
|
this.driverList.splice(this.driverList.length - 1, 1);
|
}
|
},
|
getUserName(e){
|
let data= e.split(',').map(item=>{
|
return item.split("|")[0]
|
}).join(',')
|
return data
|
}
|
}
|
}
|
</script>
|
|
<style scoped
|
lang="scss">
|
::v-deep .editDriverPopup-container {
|
.u-popup {
|
.u-transition {
|
height: 75%;
|
|
.u-popup__content {
|
overflow: scroll !important;
|
|
.editDriverPopup-container-box {
|
width: 90%;
|
margin: vww(10) auto;
|
}
|
|
//closeIcon
|
.u-popup__content__close--top-right {
|
top: vww(20) !important;
|
|
.u-icon {
|
.u-icon__icon {
|
font-size: vww(20) !important;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
.main {
|
padding-bottom: vww(100);
|
width: 98%;
|
margin: vww(8) auto;
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
|
|
.information-block {
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
|
.detail-block {
|
width: 690rpx;
|
/* height: 180rpx; */
|
background: #ffffff;
|
box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12);
|
border-radius: 20rpx;
|
display: flex;
|
flex-direction: column;
|
justify-content: flex-end;
|
margin-top: vww(14);
|
position: relative;
|
|
.line {
|
margin: vww(8);
|
}
|
|
|
.detail-reason {
|
font-size: 20px;
|
margin-left: vww(18);
|
display:flex;
|
justify-content: space-between;
|
}
|
.image-right{
|
display: flex;
|
flex-direction: column;
|
justify-content: flex-end;
|
align-items:flex-end;
|
}
|
|
.detail-time {
|
color: #ababab;
|
position: absolute;
|
top: vww(8);
|
}
|
}
|
}
|
|
}
|
</style>
|
