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

<template>
  <!-- 提交审批 -->
  <view class="assign-container">
    <u-popup :show="popShow" @close="close">
      <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="close">取消</button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { post, get, postJ } from '@/utils/api.js'
export default {
  props: ['workOrderId', 'planInventoryId', 'bizType'],
  data () {
    return {
      popShow: false,
      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'
        }
      }
    }
  },

  methods: {
    open (item) {
      this.popShow = true
      this.dataInfo = JSON.parse(JSON.stringify(item))
    },

    close () {
      this.form = {
        state: '',
        describe: '',
        repairsImg: []
      }
      this.popShow = false
    },
    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 = this.planInventoryId
      par.bizType = Number(this.bizType)
      postJ(this.apiUrl + '/repertoryCheck/saveOrModify', par).then(res => {
        if (res.success) {
          uni.showToast({
            title: '操作成功',
            icon: 'success',
            duration: 2000
          })
          this.$emit('succeed')
          this.close()
        }
      })
    },
    // 选择图片
    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>
.select-container {
  min-height: 60vh;
}

.fixed-bottom {
  background-color: #fff;
  width: 100%;
  /* 		position: fixed;
			left: 0;
			bottom: 0; */
  padding: 30rpx;
  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;
  }
}
.textarea {
  border: 1px solid #f2f2f2;
  width: 100%;
  margin-top: 20rpx;
  box-sizing: border-box;
}
.state-wrap {
  display: flex;
  align-items: center;

  .label {
    font-size: 28rpx;
  }

  .value-wrap {
    display: flex;
  }
}
.bt {
  color: #ff4949;
}
</style>