update ui更新和一键删除

xuxueyang

2024-08-28 a70759652a7167e83076dcf96af09471a0c1c83c

 sub_pages/partner/delivery/delivery-detail.vue

@@ -9,19 +9,21 @@
               orderNo: '',
               stationName: '',
               arriveRemarks: '',
               arriveImages: [],
            },
            id: '',
            form: {
               id: '',
               status: '',
               checkImageList: [],
               pictureList: [],
               checkRemarks: '',
               deductAmount: 0,
            },
            check_status: [{
                  label: '退回',
                  value: 'back'
               },
            check_status: [
               // {
               //    label: '退回',
               //    value: 'back'
               // },
               {
                  label: '降级',
                  value: 'reduce'
@@ -31,14 +33,28 @@
                  value: 'lack'
               },
               {
                  label: '补货',
                  value: 'replace'
               },
               {
                  label: '完成',
                  value: 'ok'
               }
            ]
            ],
            target_levels: [],
         };
      },
      async onLoad(options) {
         this.id = options.id || ''

         this.$http.request('get', '/api/code/value', {
            params: {
               type: 'FLOWER_LEVEL'
            }
         }).then(res => {
            var data = res.data || []
            this.target_levels = data
         })
         await this.init()

      },
@@ -52,35 +68,114 @@

         },
         async clickCheck(item, status) {
            if (status === 'ok') {
               //完成质检，不用上传东西
               await this.$message.confirm('确定完成此商品的质检')
               this.$message.showLoading()
               const {
                  code,
                  data
               } = await this.$http.request('get', '/api/delivery/check/info/' + status, {
                  params: {
                     orderItemId: item.id
                  }
               })
               this.$message.hideLoading()
               if (code === 0) {
                  await this.$message.showToast('操作成功')
                  this.init()
                  // setTimeout(() => {
                  //    this.init()
                  // }, 500)
               }
               return
            }
            this.form = {
               id: item.id || '',
               // id: item.id || '',
               // status: status,
               // statusStr: '',
               // checkImageList: item.checkImageList || [],
               // checkRemarks: item.checkRemarks || '',
               // deductAmount: item.deductAmount || 0,

               orderItemId: item.id || '',

               status: status,
               statusStr: '',
               checkImageList: item.checkImageList || [],
               checkRemarks: item.checkRemarks || '',
               deductAmount: item.deductAmount || 0,
               num: 0,
               remarks: '',
               pictureList: [],


            }
            if (status === 'reduce') {
               this.form = {
                  ...this.form,
                  deductAmount: 0,
                  targetLevel: '',
                  pictureList: [],
               }
            }


            this.check_status.forEach(tmp => {
               if (tmp.value === this.form.status) {
                  this.form.statusStr = tmp.label
               }
            })
            //显示
            this.$refs.popup_form.open()

            //20240819更新一下操作情况
            //先获取详情，再设置参数
            this.$message.showLoading()
            const {
               code,
               data
            } = await this.$http.request('get', '/api/delivery/check/info/' + status, {
               params: {
                  orderItemId: item.id
               }
            })
            this.$message.hideLoading()
            if (code === 0) {
               this.form = {
                  ...this.form,
                  ...(data || {})
               }
               if (!this.form.pictureList) {
                  this.form.pictureList = []
               }
               //显示
               this.$refs.popup_form.open()

            }

         },
         async submitCheck() {
            if (isNaN(parseFloat(this.form.deductAmount)) || this.form.deductAmount < 0) {
               this.$message.showToast('扣款金额需要大于等于0')
               return
            if (this.form.status == 'reduce') {
               if (isNaN(parseFloat(this.form.deductAmount)) || this.form.deductAmount < 0) {
                  this.$message.showToast('扣款金额需要大于等于0')
                  return
               }
               if (isNaN(parseInt(this.form.num)) || this.form.num < 0) {
                  this.$message.showToast('数量需要大于等于0')
                  return
               }
            }
            if (this.form.status == 'replace' || this.form.status == 'lack') {
               if (isNaN(parseInt(this.form.num)) || this.form.num < 0) {
                  this.$message.showToast('数量需要大于等于0')
                  return
               }
            }


            // '/api/delivery/list/view/check'
            this.$message.showLoading()
            const {
               code
            } = await this.$http.request('post', '/api/delivery/list/view/check', {
            } = await this.$http.request('post', '/api/delivery/check/info/do/' + this.form.status, {
               data: {
                  ...this.form,
                  deductAmount: parseFloat(this.form.deductAmount) || 0
                  ...this.form
               }
            })
            this.$message.hideLoading()
@@ -89,7 +184,7 @@
               this.$refs.popup_form.close()
               setTimeout(() => {
                  this.init()
               }, 200)
               }, 500)
            }
         },
         async init() {
@@ -100,14 +195,24 @@

            this.$message.hideLoading()
            if (data) {
               var t = data || {}
               if (!t.arriveImages) {
                  t.arriveImages = []
               } else {
                  try {
                     t.arriveImages = JSON.parse(t.arriveImages) || []
                  } catch (e) {
                     console.log('parse arriveImages', e)
                  }
               }
               this.dto = {
                  ...this.dto,
                  ...data
                  ...t
               }
            }
         },
         deleteCheckImage(index) {
            this.form.checkImageList.splice(index, 1)
            this.form.pictureList.splice(index, 1)
         },
         uploadCheckImage() {
            let that = this
@@ -130,7 +235,7 @@
                              0]
                           .url || ''
                        that.$message.hideLoading()
                        that.form.checkImageList.push(pic)
                        that.form.pictureList.push(pic)
                        console.log('form', that.form)
                        that.$forceUpdate()
                     }).catch(res => {
@@ -160,9 +265,17 @@
               <view>供货商名称:{{ dto.stationName  ||''}}</view>
               <view>订单号:{{ dto.orderNo  ||''}}</view>
               <view>供货商备注:{{ dto.arriveRemarks ||''}}</view>
               <view>入位时间:{{ dto.arriveTime ||'-'}}</view>
            </view>
            <view class="m-l-15 m-r-0 station">
               <view>{{ dto.stationName }}</view>
            </view>

         </view>
         <view class="m-t-12 flex" v-if="dto.arriveImages&&dto.arriveImages.length>0">
            <view class="m-t-12 m-r-10 " v-for="(timg,index) of dto.arriveImages" :key="index">
               <image class="arrive-img" :src="timg" @click.stop="previewImg(timg)">
               </image>
            </view>
         </view>
         <view v-for="(item,index) of dto.items" :key="index" class="delivery-order-item m-t-12">
@@ -197,10 +310,10 @@
                  </view>
               </view>
            </view>
            <view class="line-gray" v-if="item.status == 'ARRIVED'||item.status == 'PENDING'||!item.status">
            <view class="line-gray" v-if="item.status == 'ARRIVED'||item.status == 'PENDING'||!item.status||true">

            </view>
            <view class="buttons" v-if="item.status == 'ARRIVED'||item.status == 'PENDING'||!item.status">
            <view class="buttons" v-if="item.status == 'ARRIVED'||item.status == 'PENDING'||!item.status||true">
               <view class="button text-center" v-for="button of check_status" :key="button.value"
                  @click.stop="clickCheck(item,button.value)">{{ button.label }}
               </view>
@@ -215,21 +328,38 @@
      </view>

      <uni-popup ref="popup_form" type="top" :mask-click="false">
         <view class="popup-check-form">
         <view class="popup-check-form" style="min-height: 880rpx;height: unset;">
            <view class="close-parent">
               质检操作-{{ form.statusStr || '-' }}
               <uni-icons class="close" type="closeempty" @click="closeCheckForm"></uni-icons>
            </view>
            <view class="submit form">
               <view class="form-item">
                  <view class="form-item-label require">
                     质检备注
               <view class="form-item" v-if="form.status==='reduce'" style="height: unset;">
                  <view class="form-item-label require" style="min-width: 120rpx;margin-right: 10rpx;">
                     降级等级
                  </view>
                  <view class="form-item-value">
                     <input v-model="form.checkRemarks" placeholder="请输入质检备注" class="form-input"></input>
                  <view class="form-item-value flex ">
                     <view class="value-item" @click="()=>{
                           if(form.targetLevel!==query.value){
                              form.targetLevel = each.value
                           }																																						
                        }" :class="[form.targetLevel==each.value?'cur':'']" v-for="(each, j) in target_levels" :key="j">
                        {{ each.label || '-' }}
                     </view>

                  </view>
               </view>
               <view class="form-item">
               <view class="form-item"
                  v-if="form.status==='reduce' || form.status==='replace' || form.status==='lack'">
                  <view class="form-item-label require">
                     数量
                  </view>
                  <view class="form-item-value">
                     <input v-model="form.num" placeholder="请输入数量" type="number" class="form-input"></input>

                  </view>
               </view>
               <view class="form-item" v-if="form.status==='reduce'">
                  <view class="form-item-label require">
                     扣款金额
                  </view>
@@ -239,7 +369,16 @@

                  </view>
               </view>
               <view class="form-item">
               <view class="form-item"
                  v-if="form.status==='reduce'||form.status==='replace' || form.status==='lack'">
                  <view class="form-item-label require">
                     质检备注
                  </view>
                  <view class="form-item-value">
                     <input v-model="form.remarks" placeholder="请输入质检备注" class="form-input"></input>
                  </view>
               </view>
               <view class="form-item" v-if="form.status==='reduce'">
                  <view class="form-item-label require">
                     图片
                  </view>
@@ -247,8 +386,8 @@
                     <view class="t-red" @click="uploadCheckImage()">上传</view>
                  </view>
               </view>
               <view class="flex p20" v-if="form.checkImageList&&form.checkImageList.length>0">
                  <view class="m-t-12 m-r-10 " v-for="(timg,index) of form.checkImageList" :key="index">
               <view class="flex p20" v-if="form.pictureList&&form.pictureList.length>0">
                  <view class="m-t-12 m-r-10 " v-for="(timg,index) of form.pictureList" :key="index">
                     <image class="check-img" :src="timg" @click.stop="previewImg(timg)">
                     </image>
                     <view class="t-red text-center" @click.stop="deleteCheckImage(index)">删除</view>
@@ -264,6 +403,13 @@

<style lang="scss" scoped>
   .delivery-detail-page {
      .arrive-img {
         width: 96rpx;
         height: 96rpx;
         border-radius: 4rpx;
         border: 2rpx dashed #CECECE;
      }

      .delivery-order-item {
         .title {
            font-weight: 600;
@@ -367,6 +513,32 @@
               height: 36rpx;
               line-height: 36rpx;
            }

            .value-item {
               min-width: 152rpx;
               width: fit-content;
               text-align: center;
               height: 58rpx;
               background: #F1F5F2;
               border-radius: 36rpx;
               margin-bottom: 18rpx;
               font-weight: 400;
               font-size: 28rpx;
               line-height: 58rpx;
               padding: 8rpx 24rpx;
               color: #33a868;
               margin-left: 16rpx;
               margin-right: 16rpx;
               border: 2rpx solid #F1F5F2;
            }

            .value-item.cur {
               background: #E1F0E7;
               border-radius: 36rpx;
               border: 2rpx solid #20613D;
               color: #20613D;

            }
         }
      }