aiot-app/pages/maintain_service/submitted_ministry/submitted_ministry.vue

<template>
  <view>
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="维修工单报工"
      @clickLeft="back"
    >
      <view class="nav-right" slot="right">
        <view class="text-box" @click="goRegister" style="width: 150rpx">
          备件使用登记
        </view>
      </view>
    </uni-nav-bar>
    <view class="content">
      <view class="fixed-top-bar">
        <view class="item">
          {{
            worksheetInfo.repairInfo && worksheetInfo.repairInfo.equiTypeName
          }}
        </view>
        <view class="item">
          {{ worksheetInfo.repairInfo && worksheetInfo.repairInfo.repairsCode }}
        </view>
      </view>
      <view class="bxjlbh-wrap">
        <view class="item">
          <view class="label"> 工单编号 </view>
          <view class="value-wrap text">
            {{ worksheetInfo.workOrderCode }}
          </view>
        </view>
      </view>
      <view class="clsm">
        <view class="title"> 处理说明 </view>
        <textarea
          class="textarea"
          v-model="form.repairReportExplain"
        ></textarea>
      </view>
      <view class="sc-wrap">
        <view class="title">相关照片</view>
        <uni-file-picker
          :limit="4"
          v-model="FileImgList"
          fileMediatype="image"
          mode="grid"
          @select="handlImageSelect"
          @delete="handlImagDeletee"
        />
      </view>
      <view class="bpbj" v-if="form.stockOutApplyPartList.length > 0">
        <view class="title"> 备件使用登记 </view>
        <view class="detail-content">
          <view
            class="col"
            v-for="(item, index) in form.stockOutApplyPartList"
            :key="index"
          >
            {{ item.name }}（{{ item.code + '/' + item.model }}
            <u-number-box
              v-model="item.usedNum"
              :step="1"
              :min="0"
              :max="item.max"
              :disabledInput="true"
            ></u-number-box>
          </view>
        </view>
      </view>
    </view>
    <view class="fixed-bottom-bar">
      <view class="item s1" @click="submit"> 提交 </view>
      <view class="item s2" @click="goBack"> 返回 </view>
    </view>
  </view>
</template>

<script>
import { get, postJ, post } from '@/utils/api.js'

export default {
  data () {
    return {
      form: {
        // 图片
        workOrderImg: [],
        // 说明
        repairReportExplain: '',
        // 工单id
        workOrderId: '',
        // 备品备件
        stockOutApplyPartList: []
      },
      workOrderCode: '',
      // 选择的图片
      FileImgList: [],
      // 工单信息
      worksheetInfo: {},
      equiCode: ''
    }
  },
  async onLoad (options) {
    this.workOrderCode = options.workOrderCode
    this.equiCode = options.equiCode
    await this.getInfo()
    // this.getbpbj()
  },
  onShow () {},
  methods: {
    // 请求信息
    getInfo () {
      return get(
        this.apiUrl + '/repair/info/getWorkOrderDetail/' + this.workOrderCode
      ).then(res => {
        if (res.success) {
          this.worksheetInfo = res.data
        }
      })
    },
    // 返回
    goBack () {
      uni.navigateBack({
        delta: 1
      })
    },
    // 选择图片
    async handlImageSelect (e) {
      let element = e.tempFiles[0]
      let url = await this.uploadFiles(element.path)
      if (url) {
        element.url = url
        this.form.workOrderImg.push(element)
      }
    },
    // 图片删除
    handlImagDeletee (e) {
      let index = this.form.workOrderImg.findIndex(n => {
        return n.uuid == e.tempFile.uuid
      })
      if (index !== -1) {
        this.form.workOrderImg.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'
            })
          }
        })
      })
    },
    // 提交
    async submit () {
      let par = JSON.parse(JSON.stringify(this.form))
      par.stockOutApplyPartList = par.stockOutApplyPartList.map(n => {
        delete n.max
        return n
      })
      par.workOrderId = this.worksheetInfo.workOrderId

      let workOrderImg = par.workOrderImg.map(n => {
        return n.url
      })

      par.workOrderImg = workOrderImg.join(',')

      postJ(this.apiUrl + '/workOrder/repairReportWork', par).then(res => {
        if (res.success) {
          uni.showToast({
            title: '报工成功',
            icon: 'success',
            duration: 2000
          })
          this.back()
        }
      })
    },
    // 获取备品备件
    getbpbj () {
      post(this.apiUrl + '/stockOutApply/getApplyEquiPartList', {
        workOrderId: this.worksheetInfo.workOrderId
      }).then(res => {
        if (res.success) {
          this.form.stockOutApplyPartList = res.data.map(n => {
            n.max = n.usedNum
            n.usedNum = 0
            delete n.id
            delete n.createTime
            delete n.updateTime
            return n
          })
        }
      })
    },
    // 返回
    back () {
      uni.navigateBack({
        delta: 1
      })
    },

    // 跳转到备品备件使用登记页面
    goRegister () {
      uni.navigateTo({
        url: `/pages/maintenance/check/register?workOrderCode=${this.workOrderCode}&equipmentCode=${this.equiCode}&from=maintain_service`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.fixed-top-bar {
  display: flex;
  background: #fff;
  width: 100%;
  height: 80rpx;
  justify-content: space-between;
  align-items: center;
  padding: 0 20rpx;
  box-sizing: border-box;

  .item {
    font-size: 28rpx;
    color: #333333;
    font-weight: bold;
  }
}

.content {
  margin: 0 0 81rpx 0;
  padding: 0 20rpx;
  position: relative;
}

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

  .item {
    height: 30px;
    display: flex;
    border: 1px solid #d7d7d7;

    & + .item {
      margin-top: 3px;
    }

    .label {
      width: 100px;
      height: 100%;
      line-height: 30px;
      text-align: center;
      background: #d7d7d7;
      font-size: 32rpx;
      color: rgb(62, 62, 62);
    }

    .value-wrap {
      flex: 1;
      display: flex;
      align-items: center;
      padding-left: 10px;

      &.text {
        background: #f2f2f2;
        font-size: 32rpx;
      }

      .picker {
        width: 100%;
        color: rgb(153, 153, 153);
        font-size: 32rpx;
      }
    }
  }
}

.clsm {
  margin-top: 20rpx;

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

.sc-wrap {
  margin-top: 20rpx;

  .title {
    margin-bottom: 7px;
  }
}

.bpbj {
  margin-top: 20rpx;

  .title {
    margin-bottom: 7px;
  }

  .detail-content {
    border: 1rpx solid rgba(242, 242, 242, 1);

    .col {
      font-size: 28rpx;
      border-bottom: 1rpx solid rgba(242, 242, 242, 1);
      display: flex;
      padding: 10rpx;
      align-items: center;
      justify-content: space-between;
      background-color: rgba(242, 242, 242, 0.372549019607843);
    }

    .plus {
      width: 40rpx;
      height: 40rpx;
      line-height: 38rpx;
      text-align: center;
      background-color: $j-primary-border-green;
      color: #fff;
      margin: 16rpx 0 0 16rpx;
    }
  }

  /deep/.u-number-box {
    .u-number-box__minus,
    .u-number-box__plus,
    .u-number-box__input {
      font-size: 30rpx;
      height: 1.6em !important;
    }

    .u-number-box__input {
      width: 2em !important;
    }

    .u-number-box__minus,
    .u-number-box__plus {
      background-color: $j-primary-border-green !important;

      .u-icon__icon {
        color: #fff !important;
      }
    }
  }
}

.fixed-bottom-bar {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80rpx;
  box-sizing: border-box;
  border-top: 1px solid #f2f2f2;

  .item {
    flex: 1;
    height: 100%;
    line-height: 80rpx;
    text-align: center;

    &.s1 {
      background-color: #157a2c;
      color: #fff;
    }
  }
}
</style>