aiot-app/pages/warehouse/workOrder/scanCheck/scanCheck.vue

<template>
  <!-- 扫码盘点 -->
  <view class="main">
    <uni-nav-bar
      fixed="true"
      left-icon="back"
      @clickLeft="back"
      title="扫码盘点"
    >
    </uni-nav-bar>
    <view class="top-title"> 请确认当前物资状态 </view>
    <view class="order-list">
      <view class="s1">
        <view class="b1">
          {{ dataInfo.assetName }}({{ dataInfo.assetCode }})
        </view>
        <view class="b2">
          货位 ：{{ dataInfo.warehouseName }}/{{ dataInfo.reservoirName }}/{{
            dataInfo.goodsShelfName
          }}/{{ dataInfo.goodsAllocationName }}
        </view>
      </view>
      <view class="wrap">
        <view class="item">
          <view class="label"> 牌号 </view>
          <view class="value">
            {{ dataInfo.assetBrand }}
          </view>
        </view>
        <view class="item">
          <view class="label"> 型号 </view>
          <view class="value">
            {{ dataInfo.assetSku }}
          </view>
        </view>
      </view>
      <view class="wrap">
        <view class="item">
          <view class="label"> 类型 </view>
          <view class="value">
            {{ dataInfo.assetTypeDictDESC }}
          </view>
        </view>
      </view>
      <view class="wrap">
        <view class="item">
          <view class="label"> 最小单元 </view>
          <view class="value">
            {{ dataInfo.measurementUnit }} {{ dataInfo.unit }} /
            {{ dataInfo.minPackUnit }}
          </view>
        </view>
      </view>
    </view>
    <view class="fixed-bottom">
      <view class="state-wrap">
        <view class="label">
          <text class="bt">*</text>
          状态
        </view>
        <view class="value-wrap">
          <u-radio-group v-model="form.state" placement="row" size="30">
            <u-radio
              :customStyle="{ marginLeft: '20rpx' }"
              v-for="(item, index) in stateList"
              :key="index"
              :label="item.label"
              :name="item.value"
              activeColor="#157a2c"
            >
            </u-radio>
          </u-radio-group>
        </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 { post, get, postJ } from '@/utils/api.js'
export default {
  data () {
    return {
      form: {
        state: '',
        describe: '',
        repairsImg: []
      },
      FileImgList: [],
      stateList: [
        {
          label: '正常',
          value: 4
        },
        {
          label: '丢失',
          value: 1
        },
        {
          label: '破损',
          value: 2
        }
      ],
      dataInfo: '',
      dict: {
        assetTypeDict: {
          1: 'SHENGCHANSHEBEI',
          2: 'ZHOUMIN',
          3: 'WULIAO',
          4: 'CHANPIN',
          5: 'ZHOUZHUANCHE',
          6: 'MOJU',
          7: 'BEIPINBEIJIAN'
        }
      },
      workOrderId: '',
      bizType: ''
    }
  },
  onLoad (option) {
    this.dataInfo = JSON.parse(decodeURIComponent(option.info))
    this.workOrderId = option.workOrderId
    this.bizType = option.bizType
  },
  methods: {
    submit () {
      if (!this.form.state) {
        uni.showToast({
          title: '请选择状态',
          icon: 'none'
        })
        return
      }
      let par = this.dataInfo
      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.equStatus = this.form.state
      par.assetTypeDict = par.assetTypeDict
      par.workOrderId = this.workOrderId
      par.planInventoryId = par.planInventoryId
      par.bizType = this.bizType
      postJ(this.apiUrl + '/repertoryCheck/saveOrModify', par).then(res => {
        if (res.success) {
          uni.showToast({
            title: '操作成功',
            icon: 'success',
            duration: 2000
          })
          this.back()
        }
      })
    },
    // 选择图片
    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)
      }
    },
    // 文件上传
    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'
            })
          }
        })
      })
    }
  }
}
</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>