-

zhangwei

2025-03-10 309cc3fe6303d8464951063e89fc9d623915501e

 src/pages/delivergoods/feedback.vue

@@ -1,8 +1,646 @@
<template>
   <up-sticky bgColor="#fff">
      <view class="coreshop-ff content c-p-10">
         <view class="coreshop-ff content c-p-l-10 c-p-t-10 c-p-r-10">
            <up-search placeholder="请点击选择日期" @click='clickTime' @clear='init' disabled v-model="workTime"
               search-icon="calendar" @search='init'></up-search>
         </view>
      </view>
   </up-sticky>
   <view class="c-p-b-100">
      <view class="c-p-l-20 c-p-r-20" v-if="orderList&&orderList.length>0">
         <view class="listrecord c-p-t-20" v-for="(item,index) in orderList" :key="item.keyid"
            @click='goDetail(item)'>
            <view class="coreshop-ff chuany-bradius20">
               <view class="chuany-font26">
                  <view class="chuany-flex chuany-justify-between">
                     <text class="chuany-width5">{{index+1}}</text>
                     <view class="chuany-width15">
                        {{$util.formatDate(item.deliverTime,'riqi')}}
                     </view>
                     <view class="chuany-width67">
                        <u-text size='14' :text="item.remark" lines="1">
                        </u-text>
                     </view>
                     <view class="chuany-width11 chuany-flex chuany-justify-between">
                        <up-icon v-if="item.deliveredstatus=='Undeliver'" name="play-right"
                           @tap.stop='startOrder(item)'></up-icon>
                        <up-icon v-else-if="item.deliveredstatus=='Deliver'" name="checkbox-mark"
                           @tap.stop="editOrder(item)"></up-icon>
                     </view>
                  </view>
               </view>
            </view>
         </view>
         <up-loadmore :status="loadStatus" />
      </view>
      <view v-else>
         <up-empty text='暂无' icon="/static/order.png">
         </up-empty>
      </view>
      <up-modal title="完成送货" :show="show7" showCancelButton @confirm="confirmSave" @cancel='cancelModal'
         :asyncClose="true" ref='modalFinish'>
         <up-form labelPosition="left" :model="arrangeInfo" ref="formFinishRef" labelWidth='140rpx'>
            <up-form-item label="收货单位" prop="buyerId" :borderBottom='false' ref="item1">
               <up-input v-model="arrangeInfo.companyName" placeholder="请选择收货单位" border="none" readonly>
               </up-input>
            </up-form-item>
            <up-form-item label="意见反馈" prop="wentifankui" labelPosition='top' :borderBottom='false' ref="item1">
               <up-input v-model="arrangeInfo.wentifankui" border="none" placeholder="请输入意见反馈"></up-input>
            </up-form-item>

            <up-form-item label="送货单" prop="attachments" required>
               <tem-upload-file immediate :url="`https://appimchat.oss-cn-chengdu.aliyuncs.com`" ref="uploadB"
                  :isSource='true' fileType="all" @success="success('File',$event)" @error="errorInvoice"
                  @complete="completeInvoice('',$event)">
               </tem-upload-file>
            </up-form-item>
         </up-form>
      </up-modal>
      <up-modal title="出车打卡" :show="showClockIn" showCancelButton @confirm="confirmClockSave" @cancel='cancelModal'
         :asyncClose="true" ref='clockInModal'>
         <up-form labelPosition="left" :model="clockInfo" ref="formClockInRef" labelWidth='140rpx'>
            <up-form-item label="车辆检查" prop="carConditionAttachments" v-if="clockInfo.clockType=='ClockIn'"
               required>
               <tem-upload-file immediate btnText="上传照片" :url="`https://appimchat.oss-cn-chengdu.aliyuncs.com`"
                  ref="carCondition" :isSource='true' fileType="all"
                  @success="successClock('carCondition',$event)" @error="errorInvoice"
                  @complete="completeInvoice('carCondition',$event)">
               </tem-upload-file>
            </up-form-item>
            <template v-else>
               <up-form-item label="装货照片" prop="attachments" required>
                  <tem-upload-file immediate btnText="上传照片" :url="`https://appimchat.oss-cn-chengdu.aliyuncs.com`"
                     ref="zhuanghuo" :isSource='true' fileType="all" @success="successClock('zhuanghuo',$event)"
                     @error="errorInvoice" @complete="completeInvoice('zhuanghuo',$event)">
                  </tem-upload-file>
               </up-form-item>
               <up-form-item label="未装货原因" prop="emptyCause" :borderBottom='false' @click="clickAction"
                  labelWidth='160rpx' ref="item1">
                  <up-input v-model="clockInfo.emptyCause" disabled border="none" disabledColor="#ffffff"
                     placeholder="请选择未装货原因"></up-input>
               </up-form-item>
            </template>
            <up-form-item label="里程表" required prop="mileage" :borderBottom='false' ref="item1">
               <up-input v-model="clockInfo.mileage" placeholder="请输入里程" border="none" type="digit">
                  <template #suffix>
                     <text>km</text>
                  </template>
               </up-input>
            </up-form-item>
            <up-form-item label="里程照片" required prop="mileageImg" :borderBottom='false' ref="item1">
               <tem-upload-file immediate max="1" btnText="上传照片"
                  :url="`https://appimchat.oss-cn-chengdu.aliyuncs.com`" ref="licheng" :isSource='true'
                  fileType="all" @success="successClock('licheng',$event)" @error="errorInvoice"
                  @complete="completeInvoice('licheng',$event)">
               </tem-upload-file>
            </up-form-item>
            <up-form-item label="车况备注" prop="carCondition" labelPosition='top' :borderBottom='false' ref="item1">
               <up-input v-model="clockInfo.carCondition" border="none" placeholder="请输入车况备注"></up-input>
            </up-form-item>
         </up-form>
      </up-modal>
      <fui-date-picker range :show="datePickerShow" :value="getFirstDayOfMonth()" type="3" zIndex="10000"
         @change="changePicker" :minDate='minDate' :maxDate='maxDate' @cancel="clickTime"></fui-date-picker>
      <up-action-sheet :show="showActions" :actions="actions" title="请选择" @close="showActions = false"
         @select="selectItem">
      </up-action-sheet>
      <view class="tabbtns chuany-flex chuany-justify-between">
         <view class="chuany-width45">
            <up-button type="primary" text="出车打卡" @click="clockIn('ClockIn')"></up-button>
         </view>
         <view class="chuany-width45">
            <up-button type="success" text="下班打卡" @click="clockIn('Clockout')"></up-button>
         </view>
      </view>
   </view>
</template>

<script>
   import {
      mapActions,
      mapGetters,
      mapMutations
   } from 'vuex'
   export default {
      data() {
         return {
            datePickerShow: false,
            shougHuoshow: false,
            workTime: '',
            orderList: [],
            loadStatus: 'loadmore',
            pageIndex: 1,
            pageSize: 30,
            contentVal: '',
            customerList: [],
            isEdit: false,
            editItem: {},
            isLoading: false,
            show7: false,
            showClockIn: false,
            showActions: false,
            driverName: '',
            // actions: [{
            //    name: '未完成',
            //    id: 'Reject'
            // }, {
            //    name: '已完成',
            //    id: 'Delivered'
            // }],
            actions: [{
               name: '货物不齐',
               id: '货物不齐'
            }, {
               name: '未完工',
               id: '未完工'
            }],
            // selectAc: '已完成',
            minDate: this.$util.formatDate(new Date(), null, -7),
            maxDate: this.$util.formatDate(new Date(), null, 7),
            deliverTime: Number(new Date(this.$util.formatDate(new Date(), null, 1))),
            arrangeInfo: {
               keyid: '',
               wentifankui: '',
               companyName: '',
               attachments: [],
               Deliveredstatus:'Delivered'
            },
            rules: {
               'mileage': {
                  type: 'string',
                  required: true,
                  message: '请输入里程',
                  trigger: ['blur', 'change']
               },
               'attachments': {
                  type: 'array',
                  required: true,
                  message: '请上传装货照片',
                  trigger: ['blur', 'change']
               },
               'carConditionAttachments': {
                  type: 'array',
                  required: true,
                  message: '请上传车辆检查照片',
                  trigger: ['blur', 'change']
               },
               'mileageImg': {
                  type: 'string',
                  required: true,
                  message: '请上传里程照片',
                  trigger: ['blur', 'change']
               },
            },
            rules1: {
               'attachments': {
                  type: 'array',
                  required: true,
                  message: '请上传送货单照片',
                  trigger: ['blur', 'change']
               },
            },
            radio: '',
            switchVal: false,
            driverList: [],
            buyerName: '',
            timeStart: '',
            timeEnd: '',
            sevenDaysDriver: [],
            deliverKeyID: '',
            deliverKeyName: '',
            companyName: '',
            clockInfo: {
               emptyCause: '',
               carConditionAttachments: [],
               attachments: [],
               mileageImg: '',
               clockType: '', //ClockIn ,Clockout
               carCondition: ''
            },
         }
      },
      onShow() {
         this.init()
      },
      onReady() {
         this.$refs.formClockInRef.setRules(this.rules);
         this.$refs.formFinishRef.setRules(this.rules1);
      },
      onLoad() {
         this.Getdrivers()
         this.getCustomer()
         this.GetDriversOfWithin7days()
      },
      onReachBottom() {
         if (this.loadStatus != 'nomore') {
            this.getList()
         }
      },
      onPullDownRefresh() {
         this.timeStart = ''
         this.timeEnd = ''
         this.workTime = ''
         this.deliverKeyName = ''
         this.init()
         uni.stopPullDownRefresh();
      },
      methods: {
         clockIn(text) {
            this.clockInfo.clockType = text
            this.showClockIn = true
         },
         success(text, e) {
            //e.res 为服务器返回数据
            //上传成功回调，处理服务器返回数据【此处根据实际返回数据进行处理】
            let obj = {}
            let res = e.res
            if (res.statusCode == 200) {
               obj.PlanAttachment = res.data
               this.arrangeInfo.attachments.push(obj)
               this.$refs.uploadB.urls.push(res.data)
               this.$refs.uploadB.urls = this.$refs.uploadB.urls.filter(item => {
                  return item.indexOf('https') !== -1
               })
               this.$refs.uploadB.status.push('success')
               this.$refs.uploadB.status.length = this.$refs.uploadB.urls.length
            } else {
               uni.$u.toast(res.error)
               this.$refs.uploadB.deleteImage()
            }
            console.log(this.arrangeInfo.attachments);
         },
         successClock(text, e) {
            let obj = {}
            //e.res 为服务器返回数据
            //上传成功回调，处理服务器返回数据【此处根据实际返回数据进行处理】
            let res = e.res
            // let res = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}")
            if (res.statusCode == 200) {
               if (res.data && text == 'carCondition') {
                  obj.planAttachment = res.data //车辆检查照片
                  this.$refs.carCondition.urls.push(res.data)
                  this.$refs.carCondition.urls = this.$refs.carCondition.urls.filter(item => {
                     return item.indexOf('https') !== -1
                  })
                  this.$refs.carCondition.status.push('success')
                  this.$refs.carCondition.status.length = this.$refs.carCondition.urls.length
                  console.log(this.$refs.carCondition.status);
                  this.clockInfo.carConditionAttachments.push(obj)
               } else if (res.data && text == 'licheng') {
                  this.clockInfo.mileageImg = res.data //里程照片
                  this.$refs.licheng.urls.push(res.data)
                  this.$refs.licheng.urls = this.$refs.licheng.urls.filter(item => {
                     return item.indexOf('https') !== -1
                  })
                  this.$refs.licheng.status.push('success')
                  this.$refs.licheng.status.length = this.$refs.licheng.urls.length
               } else {
                  obj.planAttachment = res.data //装货照片
                  this.$refs.zhuanghuo.urls.push(res.data)
                  this.$refs.zhuanghuo.urls = this.$refs.zhuanghuo.urls.filter(item => {
                     return item.indexOf('https') !== -1
                  })
                  this.$refs.zhuanghuo.status.push('success')
                  this.$refs.zhuanghuo.status.length = this.$refs.zhuanghuo.urls.length
                  this.clockInfo.attachments.push(obj)
               }
            } else {
               uni.$u.toast(res.error)
               if (text == 'carCondition') {
                  this.$refs.carCondition.deleteImage()
               } else if (text == 'licheng') {
                  this.$refs.licheng.deleteImage()
               } else {
                  this.$refs.zhuanghuo.deleteImage()
               }
            }
         },
         GetDriversOfWithin7days() {
            this.$api.GetDriversOfWithin7days().then(res => {
               if (res.code == 1) {
                  this.sevenDaysDriver = res.data
               }
            })
         },
         changePicker(val) {
            console.log(val);
            this.workTime = val.startDate.result + '至' + val.endDate.result
            this.timeStart = new Date(val.startDate.result) //工作开始时间
            this.timeEnd = new Date(val.endDate.result)
            this.datePickerShow = !this.datePickerShow
            this.init()
         },
         confirmDate(val) {
            console.log(val);
            this.arrangeInfo.deliverTime = val
            this.shougHuoshow = false
         },
         getCustomer() {
            this.$api.GeCorporateClients().then(res => {
               if (res.code == 1) {
                  this.customerList = res.data
                  this.customerList.forEach(item => {
                     item.name = item.companyName
                  })
               }
            })
         },
         selectItem(item) {
            this.arrangeInfo.Deliveredstatus = item.id
            // this.selectAc = item.name
         },
         getFirstDayOfMonth() {
            var currentDate = new Date();
            // currentDate.setDate(1); // 将日期设为1
            return this.$util.formatDate(currentDate);
         },
         clickTime() {
            this.datePickerShow = !this.datePickerShow
         },
         clickShouTime() {
            this.shougHuoshow = !this.shougHuoshow
         },
         clickAction() {
            this.showActions = true
            uni.hideKeyboard()
         },
         editOrder(item) {
            this.isEdit = true
            this.$refs.uploadB.urls = []
            this.$refs.uploadB.status = []
            this.arrangeInfo.keyid = item.keyid
            this.arrangeInfo.companyName = item.companyName
            this.show7 = true
            // let obj = this.customerList.find(ite => {
            //    return ite.keyid == item.buyerId
            // })
            // this.buyerName = obj.companyName
         },
         startOrder(item) {
            let that = this
            uni.showModal({
               title: '提示',
               content: '确认开始送货吗？',
               success: function(res) {
                  if (res.confirm) {
                     // 执行确认后的操作
                     that.$api.StartDeliverPlan(item.keyid).then(req => {
                        if (req.code == 1) {
                           that.$util.showToast({
                              title: '开始送货成功！'
                           })
                           that.init()
                        } else {
                           that.$util.showToast({
                              title: req.error
                           })
                        }
                     })
                  } else {
                     // 执行取消后的操作
                  }
               }
            })
         },
         init() {
            this.pageIndex = 1
            this.pageSize = 30
            this.loadStatus = 'loadmore'
            this.orderList = []
            this.contentVal = ''
            this.getList()
         },
         //选择图片或上传完成时触发
         completeInvoice(val, e) {
            if (e.action == 'delete') {
               if (val == 'licheng') {
                  this.clockInfo.mileageImg = ''
                  return
               }
               switch (val) {
                  case 'carCondition':
                     this.clockInfo.carConditionAttachments = []
                     break;
                  case 'zhuanghuo':
                     this.clockInfo.attachments = []
                     break;
                  default:
                     this.arrangeInfo.attachments = []
                     break;
               }
               // 删除处理
               console.log(e.urls, 'e.urls', this.arrangeInfo.attachments);
               e.urls.forEach(item => {
                  let obj = {}
                  obj.planAttachment = item //发票
                  console.log(item);
                  switch (val) {
                     case 'carCondition':
                        this.clockInfo.carConditionAttachments.push(obj)
                        break;
                     case 'zhuanghuo':
                        this.clockInfo.attachments.push(obj)
                        break;
                     default:
                        this.arrangeInfo.attachments.push(obj)
                        break;
                  }
               })
               console.log(e, this.arrangeInfo, this.clockInfo, '0-0-0-');
               return
            }
            // $util.pathToBase64(e.urls[0]).then(res => {
            //    idCardFaceBase64.value = res
            //    console.log(idCardFaceBase64, idCardFaceBase64.value);
            // })
         },
         errorInvoice(e) {
            console.log(e, '--------------');
         },
         confirmSave() {
            this.$refs.formFinishRef.validate().then(res => {
               this.$api.FinishDeliverPlan(this.arrangeInfo).then(res => {
                  if (res.code == 1) {
                     this.arrangeInfo = {
                        keyid: '',
                        wentifankui: '',
                        companyName: '',
                        attachments: [],
                        Deliveredstatus:'Delivered'
                     }
                     this.show7 = false
                     this.driverName = ''
                     this.buyerName = ''
                     this.init()
                  } else {
                     this.$refs.modalFinish.loading = false
                     this.$util.showToast({
                        title: res.error
                     })
                  }
               })
            }).catch(errors => {
               this.$refs.modalFinish.loading = false
            })
         },
         confirmClockSave() {
            console.log(this.clockInfo);
            // if (!this.clockInfo.mileageImg) {
            //    this.$refs.clockInModal.loading = false
            //    return this.$util.showToast({
            //       title: '请上传里程照片！'
            //    })
            // }
            this.clockInfo = this.$util.removeEmptyValuesRecursive(this.clockInfo)
            this.$refs.formClockInRef.validate().then(res => {
               this.$api.Clock(this.clockInfo).then(res => {
                  if (res.code == 1) {
                     this.clockInfo = {
                        emptyCause: '',
                        carConditionAttachments: [],
                        mileageImg: '',
                        attachments: [],
                        clockType: '', //ClockIn ,Clockout
                        carCondition: ''
                     }
                     this.showClockIn = false
                     // this.init()
                  } else {
                     this.$util.showToast({
                        title: res.error
                     })
                     this.$refs.clockInModal.loading = false
                  }
               })
            }).catch(errors => {
               this.$refs.clockInModal.loading = false
            })


         },
         cancelModal() {
            this.showClockIn = false
            this.show7 = false
            this.arrangeInfo = {
               deliverTime: this.$util.formatDate(new Date(), null, 1),
               driverId: '',
               buyerId: '',
               dianhua: '',
               wentifankui: '',
               lianxiren: '',
               dizhi: '',
            }
            this.clockInfo = {
               emptyCause: '',
               carConditionAttachments: [],
               mileageImg: '',
               attachments: [],
               clockType: '', //ClockIn ,Clockout
               carCondition: ''
            }
            this.driverName = ''
            this.buyerName = ''
         },
         Getdrivers() {
            this.$api.Getdrivers().then(res => {
               if (res.code == 1) {
                  this.driverList = res.data
               }
            })
         },
         getList() {
            this.deliverKeyName == '' ? this.deliverKeyID = '' : null
            let data = {
               page: {
                  pageIndex: this.pageIndex,
                  pageSize: this.pageSize,
               }
            }
            if (this.timeStart) {
               data.timeStart = this.timeStart
            }
            if (this.timeEnd) {
               data.timeEnd = this.timeEnd
            }
            if (this.deliverKeyID) {
               data.deliverKeyID = this.deliverKeyID
            }
            this.$api.driverGetDeliverPlans(data).then(res => {
               if (res.code == 1) {
                  if (this.pageIndex == 1) {
                     this.orderList = res.data.data
                  } else {
                     this.orderList = this.orderList.concat(...res.data.data)
                  }
                  console.log(this.orderList, 'orderList’');
                  // totalPages = res.data.totalCount
                  // 根据count数量判断是否还有数据
                  if (res.data.page.totalCount > this.orderList.length) {
                     this.loadStatus = 'loadmore'
                     this.pageIndex++
                  } else {
                     // 数据已加载完毕
                     this.loadStatus = 'nomore'
                  }
               } else {
                  // _that.$refs.uToast.show({ message: res.msg, type: 'error' });
               }
            })
         },
         accept(item) {
            let that = this
            uni.showModal({
               title: '提示',
               content: '确认受理该送货吗？',
               success: function(res) {
                  if (res.confirm) {
                     // 执行确认后的操作
                     that.$api.AcceptAppointmentDeliver(item.keyid).then(req => {
                        if (req.code == 1) {
                           that.$util.showToast({
                              title: '受理成功！'
                           })
                           that.init()
                        } else {
                           that.$util.showToast({
                              title: req.error
                           })
                        }
                     })
                  } else {
                     // 执行取消后的操作
                  }
               }
            })
         },
         actionClick(item, e) {
            console.log(e);
            if (e.index == 0) {
               this.contentVal = item.wentifankui
            }
         },
         goDetail(item) {
            uni.navigateTo({
               url: `/pages/delivergoods/feedbackdetail?KeyId=${item.keyid}`
            });
         }
      }
   }
</script>

<style>
<style lang="scss">
   .u-textarea {
      padding: 0 !important;
   }

   .u-form-item__body {
      padding: 5px 0 !important;
   }

   .labelSty {
      .u-form-item__body__left.data-v-98223e3d {
         display: block;
      }
   }
</style>