| | |
| | | <template> |
| | | <view class="appointment"> |
| | | <view class="searchview"> |
| | | <u-search @change="change" :searchIconSize="40" placeholder="请输入车牌号" height="80" clearabled v-model="carNo" @search="search" @custom="custom" @clear="clear" > |
| | | <u-search @change="change" :searchIconSize="40" placeholder="请输入车牌号" height="60" clearabled v-model="carNo" @search="search" @custom="custom" @clear="clear" > |
| | | </u-search > |
| | | </view> |
| | | <uni-table border |
| | | stripe |
| | | emptyText="暂无更多数据"> |
| | | <uni-tr> |
| | | <uni-th align="center">车牌号</uni-th> |
| | | <uni-th align="center">产品</uni-th> |
| | | <uni-th align="center">司机</uni-th> |
| | | <uni-th align="center">手机号</uni-th> |
| | | <uni-th align="center">预约时间</uni-th> |
| | | <uni-th align="center">操作</uni-th> |
| | | </uni-tr> |
| | | <uni-tr v-for="(item, index) in driverBillOfLoadingData" |
| | | :key="item.id"> |
| | | <uni-td align="center">{{ item.carNo || '' }}</uni-td> |
| | | <uni-td align="center">{{ item.productName || '' }}</uni-td> |
| | | <uni-td align="center">{{ item.driver }}</uni-td> |
| | | <uni-td align="center">{{ item.phone || '' }}</uni-td> |
| | | <uni-td align="center">{{ item.startTime || '' }}-{{item.endTime || ""}}</uni-td> |
| | | <uni-td> |
| | | <view class="buttons"> |
| | | <u-button text="查看运输证" |
| | | type="primary" |
| | | class="buttonitem" |
| | | v-if="item.roadTransportId" |
| | | @click="lookRoad(item)"></u-button> |
| | | <u-button text="检查" |
| | | type="primary" |
| | | class="buttonitem" |
| | | @click="yuYueBtnClick(item)"></u-button> |
| | | <view style="position: relative;top: -40px;"> |
| | | <u-empty mode="data" |
| | | icon="http://cdn.uviewui.com/uview/empty/data.png" |
| | | textSize="30" |
| | | iconSize="1000" |
| | | text="暂无车辆" |
| | | v-if="driverBillOfLoadingData.length == 0"></u-empty> |
| | | </view> |
| | | <view class="collection-form"> |
| | | <view class="collection-form-item" |
| | | v-for="(item, index) in driverBillOfLoadingData" |
| | | :key="index"> |
| | | <view class="first-line"> |
| | | <view class="dispatch-receive"> |
| | | <view class="dispatch-dept">{{ item.code || '' }}</view> |
| | | <view class="black-bar"></view> |
| | | <view class="dispatch">{{ item.customerName ||'' }}</view> |
| | | </view> |
| | | </uni-td> |
| | | </uni-tr> |
| | | </uni-table> |
| | | <view class="point-number"> |
| | | <text class="order-type">{{ item.productNames?limitString(item.productNames,20,'...'):'' || '' }}</text> |
| | | </view> |
| | | </view> |
| | | <view class="second-line"> |
| | | <view class="coal-name"> |
| | | <view class="dispatch-dept">{{ item.carNo || '' }}</view> |
| | | <view class="black-bar"></view> |
| | | <view class="dispatch">{{ item.driver ||'' }}</view> |
| | | <view class="black-bar"></view> |
| | | <text>{{ item.phone || '' }}</text> |
| | | </view> |
| | | </view> |
| | | <view class="third-line"> |
| | | <view class="time-icon"> |
| | | <view |
| | | style="width: 24rpx;height: 24rpx;line-height: 24rpx;background: url('https://wrzs.czjlchem.com:9090/appimg/image/banner/clock.png') no-repeat;background-size: cover"> |
| | | </view> |
| | | </view> |
| | | <view class="send-date">{{ item.sendDate }} {{ item.startTime || '' }}-{{item.endTime || ""}}</view> |
| | | </view> |
| | | <view class="fourth-line"> |
| | | <view class="receive" |
| | | v-if="item.roadTransportId" |
| | | @click.stop="lookRoad(item)"> |
| | | <view class="button-image">道路运输证</view> |
| | | </view> |
| | | <view class="forward" |
| | | @click.stop="yuYueBtnClick(item)"> |
| | | <view class="button-image">检查</view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <u-popup :show="imgshow" |
| | | @close="closeimg" |
| | | @open="openimg" |
| | |
| | | <view class="imgrPopup"> |
| | | <u--image :showLoading="true" |
| | | :src="certificateImg != null ? BaseUrl + certificateImg : ''" |
| | | width="500rpx" |
| | | width="100%" |
| | | height="400rpx" |
| | | @click="imageClick(certificateImg)"> |
| | | <view slot="error" |
| | | style="font-size: 24rpx;">加载失败</view> |
| | | </u--image> |
| | | <view class="driveruser"> |
| | | <view>司机:{{ysData.driverName}}</view> |
| | | </view> |
| | | <view class="driveruser"> |
| | | <view>押运员:{{ysData.supercargoInfo?ysData.supercargoInfo.split("|")[0]:null}}</view> |
| | | <view>手机号:{{ysData.supercargoInfo?ysData.supercargoInfo.split("|")[2]:null}}</view> |
| | | </view> |
| | | </view> |
| | | </u-popup> |
| | | <view class="previewImage-container"> |
| | |
| | | @close="previewImageClose" |
| | | @open="previewImageOpen"> |
| | | <u--image :src="previewImageSrc != null ? BaseUrl + previewImageSrc : ''" |
| | | width="400px" |
| | | height="400px"></u--image> |
| | | width="750rpx" |
| | | height="800rpx"></u--image> |
| | | </u-popup> |
| | | </view> |
| | | <u-popup :show="show" |
| | |
| | | :loading="ClickLoading"></u-button></view> |
| | | </view> |
| | | </u-popup> |
| | | <view class="logoutModel"> |
| | | <u-modal :show="logoutShow" |
| | | :title="logoutTitle" |
| | | showCancelButton |
| | | :content="logoutContent" |
| | | @confirm="logoutConfirm" |
| | | @cancel="logoutCancel"></u-modal> |
| | | </view> |
| | | <view class="falseModel"> |
| | | <u-modal :show="falseShow" |
| | | :title="logoutTitle" |
| | | showCancelButton |
| | | :content="logoutContent" |
| | | @confirm="falseConfirm" |
| | | @cancel="falseCancel"></u-modal> |
| | | </view> |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | import { BaseUrl } from '@/api/publicInterface.js'; |
| | | import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue'; |
| | | export default { |
| | | components: { |
| | | previewImage, |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | imgshow:false, |
| | | ClickLoading:false, |
| | | certificateImg:"", |
| | | previewImageSrc:"" |
| | | logoutShow: false, |
| | | falseShow:false, |
| | | logoutTitle: '提示', |
| | | logoutContent: '是否检查完毕', |
| | | previewImageSrc:"", |
| | | ysData:{} |
| | | } |
| | | }, |
| | | onShow() { |
| | | this.init(); |
| | | }, |
| | | methods: { |
| | | imageClick(data) { |
| | | this.previewImageSrc = data; |
| | | this.$nextTick(() => { |
| | | this.previewImageShow = true; |
| | | }); |
| | | limitString(str, limit, suffix = '...') { |
| | | if (str.length <= limit) return str; |
| | | return str.slice(0, limit) + suffix; |
| | | }, |
| | | falseConfirm(){ |
| | | this.inspectData=[] |
| | | uni.showLoading({ title: '加载中...' }); |
| | | this.$reqPost('addCheckLog',{ |
| | | carNo:this.form.carNo, |
| | | taskId:this.form.id, |
| | | taskcode:this.form.code, |
| | | }, 'json').then(res => { |
| | | if (res.code === 0) { |
| | | uni.$u.toast('检查成功') |
| | | this.form={} |
| | | this.ClickLoading = false; |
| | | this.show = false; |
| | | this.TaskCoalList() |
| | | this.falseShow = false; |
| | | } else { |
| | | uni.$u.toast(res.msg ? res.msg : '检查失败') |
| | | this.falseShow = false; |
| | | } |
| | | }) |
| | | }, |
| | | logoutConfirm() { |
| | | if(this.isAllSelected==true){ |
| | | this.ClickLoading = true; |
| | | this.inspectData=this.inspectData.map(item=>{ |
| | | return { |
| | | ...item, |
| | | valve:"通过" |
| | | } |
| | | }) |
| | | uni.showLoading({ title: '加载中...' }); |
| | | this.$reqPost('addCheckLog',{ |
| | | carNo:this.form.carNo, |
| | | taskId:this.form.id, |
| | | taskcode:this.form.code, |
| | | inspectedResult:JSON.stringify(this.inspectData) |
| | | }, 'json').then(res => { |
| | | if (res.code === 0) { |
| | | uni.$u.toast('检查成功') |
| | | this.form={} |
| | | this.ClickLoading = false; |
| | | this.inspectData=[] |
| | | this.show = false; |
| | | this.logoutShow = false; |
| | | this.TaskCoalList() |
| | | } else { |
| | | uni.$u.toast(res.msg ? res.msg : '检查失败') |
| | | this.logoutShow = false; |
| | | } |
| | | }) |
| | | }else{ |
| | | uni.$u.toast('必须全部检测') |
| | | } |
| | | }, |
| | | logoutCancel() { |
| | | this.logoutShow = false; |
| | | }, |
| | | falseCancel() { |
| | | this.falseShow = false; |
| | | }, |
| | | previewImageClose() { |
| | | this.previewImageShow = false; |
| | |
| | | lookRoad(item){ |
| | | this.$reqGetId('getById', item.roadTransportId).then(res => { |
| | | this.certificateImg=res.data.certificateImg |
| | | this.ysData=res.data |
| | | this.imgshow=true |
| | | }); |
| | | }, |
| | |
| | | this.form=item |
| | | this.show = true; |
| | | }else{ |
| | | this.inspectData=[] |
| | | this.falseShow = true; |
| | | this.form=item |
| | | uni.showLoading({ title: '加载中...' }); |
| | | this.$reqPost('addCheckLog',{ |
| | | carNo:this.form.carNo, |
| | | taskId:this.form.id, |
| | | taskcode:this.form.code, |
| | | }, 'json').then(res => { |
| | | if (res.code === 0) { |
| | | uni.$u.toast('检查成功') |
| | | this.form={} |
| | | this.ClickLoading = false; |
| | | this.show = false; |
| | | this.TaskCoalList() |
| | | } else { |
| | | uni.$u.toast(res.msg ? res.msg : '检查失败') |
| | | } |
| | | }) |
| | | } |
| | | } |
| | | |
| | |
| | | this.certificateImg="" |
| | | }, |
| | | popClick() { |
| | | if(this.isAllSelected==true){ |
| | | this.ClickLoading = true; |
| | | this.inspectData=this.inspectData.map(item=>{ |
| | | return { |
| | | ...item, |
| | | valve:"通过" |
| | | } |
| | | }) |
| | | uni.showLoading({ title: '加载中...' }); |
| | | this.$reqPost('addCheckLog',{ |
| | | carNo:this.form.carNo, |
| | | taskId:this.form.id, |
| | | taskcode:this.form.code, |
| | | inspectedResult:JSON.stringify(this.inspectData) |
| | | }, 'json').then(res => { |
| | | if (res.code === 0) { |
| | | uni.$u.toast('检查成功') |
| | | this.form={} |
| | | this.ClickLoading = false; |
| | | this.inspectData=[] |
| | | this.show = false; |
| | | this.TaskCoalList() |
| | | } else { |
| | | uni.$u.toast(res.msg ? res.msg : '检查失败') |
| | | } |
| | | }) |
| | | }else{ |
| | | uni.$u.toast('必须全部检测') |
| | | } |
| | | this.logoutShow = true; |
| | | }, |
| | | open() {}, |
| | | close() { |
| | |
| | | this.$reqGet('getCheckTaskCoal',{flag:0}).then(res => { |
| | | uni.hideLoading(); |
| | | this.driverBillOfLoadingData = res.data; |
| | | uni.stopPullDownRefresh(); |
| | | }); |
| | | }else{ |
| | | this.$reqGet('getCheckTaskCoal',{flag:0,carNo:this.carNo}).then(res => { |
| | | uni.hideLoading(); |
| | | this.driverBillOfLoadingData = res.data; |
| | | uni.stopPullDownRefresh(); |
| | | }); |
| | | } |
| | | |
| | | |
| | | }, |
| | | change(res) { |
| | | console.log(res) |
| | | }, |
| | | search(res) { |
| | | console.log(res) |
| | | this.TaskCoalList() |
| | | }, |
| | | clear(res) { |
| | | this.carNo="" |
| | | }, |
| | | custom(res) { |
| | | console.log(res) |
| | | } |
| | | } |
| | | }; |
| | |
| | | <style lang="scss" scoped> |
| | | .searchview{ |
| | | margin: 20rpx 0; |
| | | height: 200rpx; |
| | | height: 100rpx; |
| | | u-search{ |
| | | width: 100rpx; |
| | | } |
| | | } |
| | | .imgrPopup{ |
| | | width: 500rpx; |
| | | height: 400rpx; |
| | | width: 80vw; |
| | | background-color: #ffffff; |
| | | .driveruser{ |
| | | display: flex; |
| | | justify-content: space-between |
| | | } |
| | | } |
| | | .receiverPopup { |
| | | height: vww(110); |
| | | width: 300rpx; |
| | | height: vww(153); |
| | | width: 60vw; |
| | | |
| | | .receiverPopup__title { |
| | | font-size: 1.4vw; |
| | | margin: vww(10) auto 0; |
| | | width: 80%; |
| | | text-align: center; |
| | |
| | | } |
| | | } |
| | | } |
| | | /deep/.u-button { |
| | | width: 100%; |
| | | height: 28px !important; |
| | | line-height: 40px; |
| | | padding: 0 12px; |
| | | font-size: 28rpx; |
| | | font-weight: 300; |
| | | color: #ffffff; |
| | | background: #497bfb !important; |
| | | letter-spacing: 4rpx; |
| | | border-radius: 37rpx 37rpx 37rpx 37rpx !important; |
| | | box-shadow: 2rpx 3rpx 13rpx 0rpx rgba(43, 98, 239, 0.5), 0rpx 0rpx 9rpx 0rpx rgba(247, 250, 253, 0.29); |
| | | } |
| | | ::v-deep.appointment { |
| | | .appointment-description { |
| | | margin: vww(8) 0; |
| | |
| | | color: #252525; |
| | | } |
| | | } |
| | | @mixin fourthLine { |
| | | width: 64%; |
| | | height: vww(68); |
| | | display: flex; |
| | | align-items: center; |
| | | position: relative; |
| | | left: vww(102); |
| | | bottom: vww(3); |
| | | |
| | | .button-img { |
| | | width: vww(122); |
| | | height: vww(41); |
| | | background: url('https://mx.jzeg.cn:9096/appimg/image/banner/button.png') no-repeat; |
| | | background-size: cover; |
| | | font-size: 28rpx; |
| | | font-weight: 300; |
| | | color: #ffffff; |
| | | text-align: center; |
| | | line-height: vww(40); |
| | | |
| | | } |
| | | } |
| | | .fourth-line { |
| | | @include fourthLine; |
| | | } |
| | | |
| | | // 表格 |
| | | .uni-table-scroll { |
| | | width: 100%; |
| | |
| | | |
| | | .uni-table { |
| | | min-width: 0 !important; |
| | | |
| | | .checkbox { |
| | | background: #ffffff; |
| | | } |
| | | .uni-table-tr { |
| | | padding: 0; |
| | | font-size: vww(10); |
| | | |
| | | .uni-table-th { |
| | | height: vww(32); |
| | | line-height: vww(20); |
| | | padding: vww(5) vww(10); |
| | | color: #111111; |
| | | font-size: 2vw; |
| | | font-weight: 550; |
| | | background: #f5f5f5; |
| | | background: #ffffff; |
| | | } |
| | | |
| | | .uni-table-td { |
| | | height: vww(32); |
| | | line-height: vww(20); |
| | | padding: vww(5) vww(5); |
| | | font-size: 1.5vw; |
| | | color: #111111; |
| | | background: #ffffff; |
| | | .u-button { |
| | | height: vww(23); |
| | | } |
| | |
| | | position: relative; |
| | | top: vww(-120); |
| | | } |
| | | .buttons{ |
| | | @mixin flex { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | .buttonitem{ |
| | | width: 30%; |
| | | } |
| | | align-items: center; |
| | | } |
| | | .collection-form-item { |
| | | margin: 0 vww(15); |
| | | width: 95%; |
| | | height: 370rpx; |
| | | background: #ffffff; |
| | | box-shadow: 4rpx 6rpx 25rpx 0rpx rgba(73, 120, 240, 0.15); |
| | | border-radius: 20rpx; |
| | | overflow: hidden; |
| | | @include flex; |
| | | flex-direction: column; |
| | | position: relative; |
| | | align-items: flex-start; |
| | | margin-top: vww(10); |
| | | |
| | | .first-line { |
| | | width: 94%; |
| | | height: vww(30); |
| | | margin: vww(10) vww(16) 0 vww(16); |
| | | display: flex; |
| | | justify-content: space-between; |
| | | |
| | | |
| | | .dispatch-receive { |
| | | width: 70%; |
| | | display: flex; |
| | | justify-content: flex-start; |
| | | align-items: center; |
| | | |
| | | .dispatch-dept { |
| | | |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | .black-bar { |
| | | width: 2rpx; |
| | | height: 30rpx; |
| | | background: #515151; |
| | | margin-left: vww(12); |
| | | } |
| | | |
| | | .dispatch { |
| | | margin-left: vww(12); |
| | | min-width: vww(50); |
| | | } |
| | | |
| | | } |
| | | |
| | | .point-number { |
| | | width: 33%; |
| | | .order-type { |
| | | color: #035cfb; |
| | | border-radius: 4rpx; |
| | | text-align: center; |
| | | } |
| | | // text { |
| | | // font-size: 24rpx; |
| | | // font-weight: 400; |
| | | // color: #c78a64; |
| | | // } |
| | | |
| | | // .residue { |
| | | // font-size: 40rpx; |
| | | // font-weight: 400; |
| | | // color: #f81414; |
| | | // } |
| | | } |
| | | } |
| | | |
| | | .second-line { |
| | | width: 100%; |
| | | height: vww(30); |
| | | margin-left: vww(16); |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: flex-start; |
| | | |
| | | .coal-name { |
| | | flex-grow: 1; |
| | | height: 30rpx; |
| | | font-size: 30rpx; |
| | | font-weight: 300; |
| | | color: #515151; |
| | | position: relative; |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | .black-bar { |
| | | width: 2rpx; |
| | | height: 30rpx; |
| | | background: #515151; |
| | | margin: 0 vww(12) ; |
| | | } |
| | | |
| | | .coal-type { |
| | | margin-left: vww(12); |
| | | min-width: vww(50); |
| | | height: 30rpx; |
| | | line-height: 30rpx; |
| | | font-size: 30rpx; |
| | | font-weight: 300; |
| | | color: #515151; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .third-line { |
| | | height: vww(30); |
| | | margin-left: vww(15); |
| | | display: flex; |
| | | justify-content: flex-start; |
| | | align-items: center; |
| | | |
| | | .send-date { |
| | | margin-left: vww(14); |
| | | height: 24rpx; |
| | | line-height: 24rpx; |
| | | font-size: 28rpx; |
| | | font-weight: 300; |
| | | color: #515151; |
| | | } |
| | | } |
| | | .fourth-line { |
| | | width: 100%; |
| | | height: vww(30); |
| | | @include flex; |
| | | justify-content: flex-start; |
| | | position: relative; |
| | | bottom: vww(10); |
| | | left: 30%; |
| | | |
| | | .receive, |
| | | .forward { |
| | | width: vww(123); |
| | | height: vww(48); |
| | | @include flex; |
| | | justify-content: center; |
| | | color: #ffffff; |
| | | font-size: 28rpx; |
| | | position: absolute; |
| | | |
| | | .button-image { |
| | | width: 100%; |
| | | height: 100%; |
| | | background: url('../../../static/image/banner/button.png') no-repeat; |
| | | background-size: cover; |
| | | font-size: 28rpx; |
| | | font-weight: 300; |
| | | color: #ffffff; |
| | | text-align: center; |
| | | line-height: vww(45); |
| | | } |
| | | } |
| | | |
| | | .receive { |
| | | left: vww(20); |
| | | } |
| | | |
| | | .forward { |
| | | width: vww(106); |
| | | left: vww(140); |
| | | |
| | | .button-image { |
| | | width: 100%; |
| | | height: 100%; |
| | | background: url('../../../static/image/banner/transpartent.png') no-repeat; |
| | | background-size: cover; |
| | | font-size: 28rpx; |
| | | font-weight: 300; |
| | | color: #3b56eb; |
| | | text-align: center; |
| | | line-height: vww(45); |
| | | } |
| | | } |
| | | } |
| | | |
| | | } |
| | | </style> |