aiot-app/pages/warehouse/workOrder/manualCheck/manualCheckBatch.vue

<template>
  <!-- 批量盘 -->
  <view class="">
    <view class="top-title"> 请确认当前物资状态 </view>
    <view class="order-list">
      <view class="s1">
        <view class="b1">
          {{ infoData.assetName }}（{{ infoData.assetCode }}）
        </view>
        <!-- <view class="b2">
						{{infoData.warehouseName}}/{{infoData.reservoirName}}/{{infoData.goodsShelfName}}/{{infoData.goodsAllocationName}}
					</view> -->
      </view>
      <view class="wrap">
        <view class="item">
          <view class="label"> 牌号 </view>
          <view class="value">
            {{ infoData.assetBrand }}
          </view>
        </view>
        <view class="item">
          <view class="label"> 型号 </view>
          <view class="value">
            {{ infoData.assetSku }}
          </view>
        </view>
      </view>
      <view class="wrap">
        <!-- <view class="item">
						<view class="label">
							批次
						</view>
						<view class="value">
							{{infoData.batchNum}}
						</view>
					</view> -->
        <view class="item">
          <view class="label"> 类型 </view>
          <view class="value">
            {{ infoData.assetTypeDictDESC }}
          </view>
        </view>
      </view>
      <view class="wrap">
        <view class="item">
          <view class="label"> 最小单元 </view>
          <view class="value">
            {{ infoData.measurementUnit }} {{ infoData.unit }}/{{
              infoData.minPackUnit
            }}
          </view>
        </view>
        <view class="item">
          <view class="label"> 库存 </view>
          <view class="value">
            {{ infoData.inventoryNum }}
          </view>
        </view>
      </view>
    </view>
    <view class="fixed-bottom">
      <view class="num-wrap">
        <view class="item">
          <view class="label"> 正常 </view>
          <view class="input-wrap">
            <u--input class="input" placeholder="" border="surround" v-model="infoData.normalNum"
              type="number"></u--input>
          </view>
        </view>
        <view class="item">
          <view class="label"> 丢失 </view>
          <view class="input-wrap">
            <u--input class="input" placeholder="" border="surround" v-model="infoData.loseNum"
              type="number"></u--input>
          </view>
        </view>
        <view class="item">
          <view class="label"> 破损 </view>
          <view class="input-wrap">
            <u--input class="input" placeholder="" border="surround" v-model="infoData.damageNum"
              type="number"></u--input>
          </view>
        </view>
      </view>
      <textarea class="textarea" v-model="form.describe" placeholder-style="color:#AAAAAA" placeholder="补充描述" />
      <view class="sc-wrap">
        <view class="title"> 拍照记录 </view>
        <uni-file-picker :limit="3" v-model="FileImgList" fileMediatype="image" mode="grid" @select="handlImageSelect"
          @delete="handlImagDeletee" />
      </view>
      <view class="btn-wrap">
        <button type="primary" class="qr-btn" @click="submit">确认状态</button>
        <button type="primary" class="qx-btn" @click="back">取消</button>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    postJ
  } from '@/utils/api'
  export default {
    props: ['infoData', 'bizType'],
    data() {
      return {
        form: {
          // 上传图片
          repairsImg: [],
          // 描述
          describe: ''
        },
        // 选择的图片
        FileImgList: [],
        dict: {
          assetTypeDict: {
            1: 'SHENGCHANSHEBEI',
            2: 'ZHOUMIN',
            3: 'WULIAO',
            4: 'CHANPIN',
            5: 'ZHOUZHUANCHE',
            6: 'MOJU',
            7: 'BEIPINBEIJIAN'
          }
        }
      }
    },
    methods: {
      // 选择图片
      async handlImageSelect(e) {
        let element = e.tempFiles[0]
        let url = await this.uploadFiles(element.path)
        console.log(url)
        if (url) {
          element.url = url
          this.form.repairsImg.push(element)
        }
      },
      // 图片删除
      handlImagDeletee(e) {
        let index = this.form.repairsImg.findIndex(n => {
          return n.uuid == e.tempFile.uuid
        })
        if (index !== -1) {
          this.form.repairsImg.splice(index, 1)
        }
      },
      // 提交
      submit() {
        let par = JSON.parse(JSON.stringify(this.infoData))
        par.normalNum = Number(par.normalNum)
        par.loseNum = Number(par.loseNum)
        par.damageNum = Number(par.damageNum)
        let sum = Number(par.inventoryNum)
        let num = par.normalNum + par.loseNum + par.damageNum
        console.log(sum, num)
        if (num !== sum) {
          uni.showToast({
            title: `所填写数量需等于库存(${sum})数量`,
            icon: 'none'
          })
          return
        }

        par.accessUrl = this.form.repairsImg.map(n => {
          return {
            url: n.url,
            size: n.size,
            name: n.name,
            type: n.extname
          }
        })
        par.remark = this.form.describe
        par.bizType = Number(this.bizType)
        postJ(this.apiUrl + '/repertoryCheck/batchSaveOrModify', par).then(
          res => {
            if (res.success) {
              uni.showToast({
                title: '操作成功',
                icon: 'success',
                duration: 2000
              })
              setTimeout(() => {
                this.back()
              }, 2000)
            }
          }
        )
      },
      // 文件上传
      uploadFiles(tempFilePaths) {
        let that = this
        return new Promise((resolve, reject) => {
          uni.uploadFile({
            url: this.apiUrl + '/data/doc/add', //后端用于处理图片并返回图片地址的接口
            filePath: tempFilePaths,
            name: 'file',
            header: that.header,
            formData: {
              module: '盘点'
            },
            success: res => {
              let data = JSON.parse(res.data) //返回的是字符串，需要转成对象格式
              resolve(data.data.accessUrl)
            },
            fail: err => {
              reject(null)
              uni.showToast({
                title: '图片上传失败',
                icon: 'none'
              })
            }
          })
        })
      },
      // 返回
      back() {
        uni.navigateBack({
          delta: 1
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  $cols: 3; // 列数
  $marginWidth: 20rpx; // 间隔

  .top-title {
    padding: 20rpx;
  }

  .main {
    min-height: 100vh;
    background-color: #f0f0f0;
  }

  .order-list {
    padding: 30rpx 20rpx;
    border-bottom: 1px solid #f2f2f2;
    position: relative;

    .s1 {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .b1 {
        color: #555555;
        font-size: 30rpx;
      }

      .b2 {
        color: #000000;
        font-size: 28rpx;
      }

      .type {
        font-size: 28rpx;
        height: 40rpx;
        padding: 0 20rpx;
        line-height: 40rpx;

        &.yc {
          background-color: #dacde6;
        }

        &.ds {
          background-color: #feeaeb;
        }

        &.ps {
          background-color: #cbcbcb;
        }
      }
    }

    .wrap {
      display: flex;
      margin-top: 20rpx;

      .item {
        color: #555555;
        font-size: 28rpx;
        display: flex;
        width: 340rpx;

        .label {
          margin-right: 20rpx;
        }
      }
    }
  }

  .fixed-bottom {
    background-color: #fff;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 30rpx;
    box-sizing: border-box;
  }

  .state-wrap {
    display: flex;
    align-items: center;

    .label {
      font-size: 28rpx;
    }

    .value-wrap {
      display: flex;
    }
  }

  .textarea {
    border: 1px solid #f2f2f2;
    width: 100%;
    margin-top: 20rpx;
    box-sizing: border-box;
  }

  .sc-wrap {
    .title {
      margin-bottom: 7px;
      font-size: 32rpx;
    }

    margin-top: 15px;
  }

  .btn-wrap {
    margin-top: 30rpx;

    .qr-btn {
      background-color: #70b603f3;
    }

    .qx-btn {
      background-color: transparent;
      color: #555555;
      margin-top: 20rpx;
    }
  }

  .bt {
    color: #ff4949;
  }

  .num-wrap {
    display: flex;
    width: 100%;

    .item {
      display: flex;
      align-items: center;
      width: calc((100% - #{($cols - 1) * $marginWidth}) / #{$cols});
      margin-left: $marginWidth;

      .label {
        white-space: nowrap;
        margin-right: 20rpx;
        font-size: 28rpx;
      }

      .input-wrap {
        .input {
          border: 1px solid #f2f2f2;
        }
      }
    }

    .item:nth-of-type(#{$cols}n + 1) {
      margin-left: 0;
    }
  }
</style>