ruoyi-miniapp/sub/task/enforce.vue

<template>
  <view class="view-container">
    <view class="box wd-flex wd-flex-col" style="gap: 12px">
      <view
        class="wd-flex"
        style="justify-content: space-between; align-items: center"
      >
        <view style="font-weight: bold">
          <text style="color: #f8285a; margin-right: 4px">*</text>
          处理意见
        </view>
        <text style="color: #78829d">最多500字符</text>
      </view>
      <view
        class=""
        style="
          background-color: #f9f9f9;
          border: 1px solid #f1f1f4;
          border-radius: 24rpx;
          padding: 16rpx;
        "
      >
        <uni-easyinput
          type="textarea"
          v-model="form.advice"
          placeholder="请输入..."
          placeholderStyle="font-size:28rpx"
          :maxlength="500"
          :input-border="false"
          :adjust-position="true"
          :autoHeight="true"
          cursorSpacing="32"
          :styles="{
            backgroundColor: 'transparent',
            borderColor: 'none'
          }"
        ></uni-easyinput>
        <view style="color: #78829d; text-align: right">
          {{ form.advice.length }}/500
        </view>
      </view>

      <view
        class="wd-flex"
        style="justify-content: space-between; align-items: center"
      >
        <view style="font-weight: bold">
          <text style="color: #f8285a; margin-right: 4px">*</text>
          上传证明
        </view>
      </view>
      <u-upload
        :fileList="form.photo"
        @afterRead="addPhoto"
        @delete="delPhoto"
        multiple
        :maxCount="3"
        width="96px"
        height="96px"
      ></u-upload>
    </view>

    <view class="box" v-if="form.state == 3">
      <view
        class="wd-flex"
        style="justify-content: space-between; align-items: center"
        @tap="showCalender"
      >
        <view style="font-weight: bold">
          <text style="color: #f8285a; margin-right: 4px">*</text>
          截止日期
        </view>
        <view class="wd-flex" style="gap: 4px; align-items: center">
          <text style="color: #f8285a">
            {{ $util.formatDate(form.date, 'YYYY年M月D日') }}
          </text>
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
    </view>

    <cs-bottom-wrapper>
      <view class="operation">
        <view
          :class="['btn', form.state == 2 ? 'green' : 'red']"
          @tap="submit"
        >
          {{ form.state == 2 ? '审批通过' : '整改处理' }}
        </view>
      </view>
    </cs-bottom-wrapper>
    <uni-calendar
      ref="calendarRef"
      :insert="false"
      @confirm="confirmCalendar"
    />
    <u-modal
      :show="showModel"
      confirmText="返回"
      showCancelButton
      :cancel-text="form.state == 2 ? '通过' : '整改'"
      :cancel-color="form.state == 2 ? '#17C653' : '#F8285A'"
      confirm-color="#071437"
      @confirm="showModel = false"
      @cancel="postApi"
    >
      <view class="wd-flex wd-flex-col wd-flex-center" style="gap: 10px">
        <view style="font-size: 18px; color: #071437; font-weight: 800">
          {{ form.state == 2 ? '是否通过？' : '是否整改？' }}
        </view>
        <view class="">确认后不可再次修改</view>
      </view>
    </u-modal>
  </view>
</template>

<script>
import { uploadFile } from '@/api/system/file.js'
import { InspectionsApi } from '@/api/inspections/index.js'
export default {
  data() {
    return {
      form: {
        state: '',
        inspectionsId: '',
        advice: '',
        photo: [],
        date: ''
      },
      showModel: false
    }
  },
  onLoad(res) {
    this.form.state = res.state
    this.form.inspectionsId = res.inspectionsId
  },
  methods: {
    /**
     * 选择图片并上传
     * @param {Object} e
     */
    async addPhoto(e) {
      e.file.forEach(p => {
        this.form.photo.push({
          ...p,
          status: 'uploading',
          message: '上传中'
        })
      })
      // 使用promise.all()方法上传到后端做统一接收
      await Promise.all(
        this.form.photo.map(async (p, i) => {
          if (p.status == 'uploading') {
            const res = await uploadFile({ name: `file`, filePath: p.url })
            return {
              ...res.data,
              status: 'success',
              message: ''
            }
          }
          return p
        })
      ).then(res => {
        this.form.photo = res
      })
    },
    /**
     * 删除图片
     * @param {Object} e
     */
    delPhoto(e) {
      this.form.photo.splice(e.index, 1)
    },
    confirmCalendar(e) {
      this.form.date = e.fulldate
    },
    showCalender() {
      this.$refs.calendarRef.open()
    },
    postApi() {
      const data = {
        ...this.form,
        status: this.form.state,
        feedBack: this.form.advice,
        fileIds: this.form.photo.map(i => i.id),
        correctionTime: new Date(this.form.date).getTime()
      }
      InspectionsApi.feeback(data).then(res => {
        uni.showToast({
          icon: 'none',
          title: '操作成功'
        })
        uni.navigateBack()
      })
    },
    async submit() {
      const validate = await this.validate()
      if (validate.msg) {
        uni.showToast({
          icon: 'error',
          title: validate.msg
        })
        return
      }
      this.showModel = true
    },
    validate() {
      return new Promise(resolve => {
        if (!this.form.advice) {
          resolve({
            state: false,
            msg: '请填写处理意见'
          })
        }
        if (!this.form.photo) {
          resolve({
            state: false,
            msg: '请上传证明'
          })
        }
        if (!this.form.date && this.form.state == 3) {
          resolve({
            state: false,
            msg: '请选择日期'
          })
        }
        resolve(true)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.view-container {
  padding: 24rpx;
  height: 100vh;
  position: relative;
  overflow-y: scroll;
  padding-bottom: 13vh;
  .box {
    padding: 24rpx;
    border: 2rpx solid #f9f9f9;
    border-radius: 24rpx;
    background-color: #fff;
    margin-bottom: 24rpx;
  }
  .operation {
    padding: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    .btn {
      flex: 1;
      border-radius: 16rpx;
      display: flex;
      padding: 24rpx 0;
      align-items: center;
      justify-content: center;
    }
    .green {
      background-color: $cs-color-main;
      color: #fff;
    }
    .red {
      background-color: #f8285a;
      color: #fff;
    }
  }
}
::v-deep .uni-easyinput__content-textarea {
  min-height: 400rpx;
}
::v-deep .u-upload__button {
  border-radius: 16rpx !important;
  border: 1px solid #f1f1f4;
  background-color: #f9f9f9 !important;
}

::v-deep .u-upload__wrap {
  .u-upload__wrap__preview {
    width: 192rpx;
    height: 192rpx;
    border-radius: 16rpx !important;
    overflow: visible !important;
    .u-upload__wrap__preview__image {
      border-radius: 16rpx !important;
    }
    .u-upload__deletable {
      border-radius: 100% !important;
      background-color: #f8285a !important;
      transform: translateX(50%) translateY(-50%);
      .u-upload__deletable__icon {
        position: relative;
      }
    }
  }
}
</style>