xiamen-sb-uniapp/pages/maintain/finish.vue

<template>
  <view class="mx3" style="padding-bottom: 100rpx">
    <view class="main-color-bg" style="height: 100rpx; margin: 0 -30rpx"></view>
    <view class="p3 bg-color-white" style="margin-top: -50rpx; border-radius: 20rpx">
      <u-form :model="form" ref="uForm" :label-width="150">
        <u-form-item label="上传图片" :label-width="150">
          <m-upload-img v-model="form.imgList" :maxSize="20"></m-upload-img>
        </u-form-item>
        <u-form-item label="上传文件" :label-width="150">
          <m-upload v-model="form.fileList"></m-upload>
        </u-form-item>
        <u-form-item label="检查结果" prop="checkContent">
          <u-input v-model="form.feedback" type="textarea" :height="50" />
        </u-form-item>
      </u-form>
      <view class="py3 border-bottom">
        <view class="f-size-30 text-color-3 w200">检查项目</view>
        <view class="f-size-28 text-color-3 border py2" v-for="(item, index) in requirementList" :key="index">
          <view class="d-flex text-color-6">
            <view class="w180">保养周期：</view>
            <view class="text-color-3">{{ item.period }}</view>
          </view>
          <view class="d-flex text-color-6">
            <view class="w180">管理项目：</view>
            <view class="text-color-3">{{ item.manageItem }}</view>
          </view>
          <view class="d-flex text-color-6">
            <view class="w180">检查项目：</view>
            <view class="text-color-3">{{ item.checkItem }}</view>
          </view>
          <view class="d-flex text-color-6">
            <view class="w160">方法工具：</view>
            <view class="text-color-3">{{ item.method }}</view>
          </view>
          <view class="d-flex text-color-6">
            <view class="w160">保养级别：</view>
            <view class="text-color-3">{{ item.checkLevel }}</view>
          </view>
          <view class="d-flex text-color-6">
            <view class="w160">标准类型：</view>
            <view class="text-color-3">{{ item.sbTypeName }}</view>
          </view>
          <view class="d-flex text-color-6">
            <view class="w160">内容：</view>
            <view class="text-color-3">{{ item.remark }}</view>
          </view>
          <view class="d-flex text-color-6 items-center">
            <view class="w160">填报信息：</view>
            <view class="text-color-3" style="flex: 1">
              <u-input v-if="item.type == 0" v-model="item.value" :border="true" />
              <view v-else class="select">
                <my-select style="width: 100%" v-model="item.value" :list="item.options" />
              </view>
            </view>
          </view>
          <view class="d-flex text-color-6 items-center" style="margin-top: 10rpx">
            <view class="w160">备注：</view>
            <view class="text-color-3" style="flex: 1">
              <u-input v-model="item.text" :border="true" />
            </view>
          </view>
        </view>
      </view>
      <view class="p-fixed d-flex a-center footer">
        <view class="finish-action-btn finish-action-btn-danger" @tap="handleSubmit(1)">完成并报修</view>
        <view class="finish-action-btn finish-action-btn-primary" @tap="handleSubmit()">完成</view>
      </view>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      requirementList: [],
      displayTime: 0,
      form: {
        checkContent: '',
        imgList: [],
        fileList: []
      },
      rules: {}
    }
  },
  onLoad(options) {
    this.form = options
    this.$Http.fetchCheckStandard({ id: options.standardId }).then(res => {
      this.requirementList =
        res.data.requirementList &&
        res.data.requirementList.map((item, index) => {
          return {
            ...item,
            value: null,
            options:
              item.type == '1'
                ? item.scope.split('-').map(item => ({
                  label: item,
                  value: item
                }))
                : []
          }
        })
      this.$Http.timerAccumulatedTime({ referenceId: options.id }).then(res => {
        this.form.workHours = Math.floor(res.data / 60000)
        this.displayTime = res.data
      })
    })
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
  methods: {
    handleSubmit(type) {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          let isReturn = false
          this.requirementList.forEach(item => {
            if (!item.value && item.type == 1) {
              isReturn = true
            }
          })
          if (isReturn) {
            this.confirmLoading = false
            this.$refs.uToast.show({
              title: '请填写检查结果'
            })
            return
          }
          this.form.conTask = JSON.stringify(
            this.requirementList
          )
          // 提交实际完成时间，保证已完成任务展示完成时间
          this.form.actualEndTime = this.$BaseTool.Date.formatter(new Date(), this.$BaseTool.Date.PICKER_NORM_DATETIME_PATTERN)

          this.$Http.finishJob(this.form).then(res => {
            this.$refs.uToast.show({
              title: '操作成功'
            })
            this.$Http.timerStop({ referenceId: this.form.id, finalAccumulatedTime: this.displayTime })
            if (type === 1) {
              // 完成并报修：直接进入该设备的报修填写页（与 PC 端“完成并报修”一致）
              uni.redirectTo({
                url: '/pages/repair-add/repair-add?detailId=' + this.form.sbId
              })
            } else {
              // 仅完成：返回保养详情页
              uni.navigateBack({
                delta: 1
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="less">
.footer {
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 10000;
  border-top: 1rpx solid #f4f4f4;
  height: 100rpx;

  .common {
    padding: 15rpx 200rpx;
    border-radius: 30rpx;
    background-color: #0082ff;
    color: #fff;
  }

  .finish-action-btn {
    flex: 1;
    margin: 0 20rpx;
    padding: 15rpx 0;
    text-align: center;
    border-radius: 30rpx;
    color: #fff;
  }

  .finish-action-btn-danger {
    background-color: #fa3534;
  }

  .finish-action-btn-primary {
    background-color: #0082ff;
  }
}

.select {
  width: 100%;
  height: 40px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  display: flex;
  align-items: center;
}

.w160 {
  width: 160rpx;
}

.border {
  border: 1rpx solid #0082ff;
  border-radius: 10rpx;
  padding: 10rpx;
  margin-top: 10rpx;
}
</style>