pages-sub/daily/maintain-manage/add-record.vue

<template>
  <view class="page-container">
    <view class="inspect-form-content commonPageLRpadding">
      <up-form
          label-position="left"
          :model="inspectForm"
          ref="inspectFormRef"
          labelWidth="140rpx"
      >
        <!-- 1. 巡查描述（文本域） -->
        <up-form-item
            prop="content"
            class="form-item"
        >
          <up-textarea
              v-model="inspectForm.remark"
              placeholder="请输入巡查描述"
              maxlength="200"
              count
          ></up-textarea>
        </up-form-item>
        <!-- 2. 上传图片 -->
        <up-form-item
            label="上传图片"
            prop="images"
            required
            border-bottom
            class="form-item"
        >
          <up-upload
              :file-list="imagesList"
              @after-read="(event) => uploadImgs(event)"
              @delete="(event) => deleteImg(event)"
              @on-exceed="handleExceed"
              multiple
              :max-count="3"
              upload-text="选择图片"
              del-color="#ff4d4f"
              class="upload-wrap"
          ></up-upload>
        </up-form-item>
        <!-- 3. 完成进度（滑块） -->
        <up-form-item
            label="完成进度"
            prop="progress"
            class="form-item"
        >
          <view class="progress-wrap">
            <up-slider
                v-model="inspectForm.progress"
                :min="initProgress"
                :max="100"
                active-color="#1989fa"
                inactive-color="#e5e5e5"
                block-size="24"
                :showValue="true"
                class="progress-slider"
                @changing="handleProgressChange"
            ></up-slider>
          </view>
        </up-form-item>
      </up-form>
    </view>
    <!-- 底部提交按钮 -->
    <view class="fixed-bottom-btn-wrap">
      <up-button
          type="primary"
          text="提交"
          @click="submitInspect"
          :style="{ width: '100%', height: '88rpx', fontSize: '32rpx', borderRadius: 0 }"
      ></up-button>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { UniFormRef } from '@/uni_modules/uview-plus/types'
const inspectFormRef = ref<UniFormRef>(null)
</script>
<script lang="ts">
import { uploadImages } from '@/common/utils/upload'
import { maintainCreate } from "@/api/maintain-manage/maintain-manage"
export default {
  data() {
    return {
      imagesList: [],
      initProgress: 0,
      inspectForm: {
        remark: '',
        progress: 0
      },
      paramsOptins: {},
      inspectFormRules: {
        images: [
          {
            required: true,
            message: '请上传图片',
            trigger: 'change',
            validator: (rule, value, callback) => {
              const hasSuccessImg = this.imagesList.some(item => item.status === 'success')
              const imgCount = this.imagesList.filter(item => item.status === 'success').length
              if (!hasSuccessImg || imgCount < 1) {
                callback(new Error('最少需要上传1张图片'))
              } else if (imgCount > 3) {
                callback(new Error('最多只能上传3张图片'))
              } else {
                callback()
              }
            }
          }
        ],
        // progress: [
        //   {
        //
        //     required: true,
        //     message: '请设置完成进度',
        //     trigger: ['change'],
        //     validator: (rule, value, callback) => {
        //       // 第一步：校验是否为空/0
        //       if (!value && value !== 0) {
        //         callback(new Error('请设置完成进度'))
        //       }
        //       // 第二步：校验是否大于初始进度
        //       else if (value <= this.initProgress) {
        //         callback(new Error(`完成进度必须大于${this.initProgress}%`))
        //       }
        //       // 校验通过
        //       else {
        //         callback()
        //       }
        //     }
        //   }
        // ]
      }
    }
  },
  onLoad(option) {
    console.log('页面参数：', option)
    this.paramsOptins = option
    // 初始化初始进度
    this.initProgress = option.finishPercent ? Number(option.finishPercent)+1 : 0
    // 关键修复：初始进度值设为 初始进度+1，避免刚进入就触发校验失败
    this.inspectForm.progress = this.initProgress
    console.log('初始进度值：', this.initProgress)
  },
  onReady() {
    this.$refs.inspectFormRef.setRules(this.inspectFormRules)
    console.log('巡查表单规则初始化完成')
  },
  methods: {
    /**
     * 进度滑块变化处理 - 核心优化：实时触发校验 + 状态更新
     */
    handleProgressChange(value) {
      // // 1. 强制修正非法值（兜底）
      // console.log(value)
      // if (value <= this.initProgress) {
      //   console.log('123')
      //   this.inspectForm.progress = this.initProgress + 1
      //   uni.showToast({
      //     title: `进度不能低于${this.initProgress}%`,
      //     icon: 'none',
      //     duration: 1500
      //   })
      // }
      //
      // // 2. 关键：手动触发progress字段的校验，实时更新提示状态
      // this.$nextTick(async () => {
      //   try {
      //     // 触发单个字段校验
      //     await this.$refs.inspectFormRef.validateField('progress')
      //   } catch (err) {
      //     // 校验失败时uView会自动显示提示，此处无需额外处理
      //     console.log('进度校验失败：', err)
      //   }
      // })
    },
    /**
     * 删除图片
     */
    deleteImg(event) {
      console.log('删除图片事件：', event)
      this.imagesList.splice(event.index, 1)
      this.$refs.inspectFormRef.validateField('images')
      uni.showToast({ title: '图片删除成功', icon: 'success' })
    },
    /**
     * 上传图片
     */
    async uploadImgs(event) {
      console.log('上传图片事件：', event)
      const fileList = Array.isArray(event.file) ? event.file : [event.file]
      const targetImgList = this.imagesList
      const filePaths = fileList.map(item => item.url)
      const tempItems = fileList.map(item => ({
        ...item,
        status: 'uploading',
        message: '上传中'
      }))
      const startIndex = targetImgList.length
      targetImgList.push(...tempItems)
      try {
        const uploadResultUrls = await uploadImages({
          filePaths: filePaths,
          ignoreError: true
        })
        console.log('上传成功的URL列表：', uploadResultUrls)
        uploadResultUrls.forEach((url, index) => {
          if (targetImgList[startIndex + index]) {
            targetImgList.splice(startIndex + index, 1, {
              ...fileList[index],
              status: 'success',
              message: '',
              url: url
            })
          }
        })
        if (uploadResultUrls.length < fileList.length) {
          const failCount = fileList.length - uploadResultUrls.length
          for (let i = uploadResultUrls.length; i < fileList.length; i++) {
            if (targetImgList[startIndex + i]) {
              targetImgList.splice(startIndex + i, 1, {
                ...fileList[i],
                status: 'failed',
                message: '上传失败'
              })
            }
          }
          uni.showToast({ title: `成功上传${uploadResultUrls.length}张，失败${failCount}张`, icon: 'none' })
        } else {
          uni.showToast({ title: `成功上传${fileList.length}张图片`, icon: 'success' })
        }
        this.$refs.inspectFormRef.validateField('images')
      } catch (err) {
        console.error('图片上传失败：', err)
        for (let i = 0; i < fileList.length; i++) {
          if (targetImgList[startIndex + i]) {
            targetImgList.splice(startIndex + i, 1, {
              ...fileList[i],
              status: 'failed',
              message: '上传失败'
            })
          }
        }
        uni.showToast({ title: '图片上传失败，请重试', icon: 'none' })
        this.$refs.inspectFormRef.validateField('images')
      }
    },
    /**
     * 处理图片超出数量限制
     */
    handleExceed() {
      uni.showToast({ title: '最多只能上传3张图片', icon: 'none' })
    },
    /**
     * 提取图片URL数组
     */
    getImgUrlList(imgList) {
      return imgList.filter(item => item.status === 'success').map(item => item.url)
    },
    /**
     * 提交巡查表单
     */
    async submitInspect() {
      console.log('当前完成进度：', this.inspectForm.progress)
      try {
        await this.$refs.inspectFormRef.validate()
        console.log('图片列表：', this.imagesList)
        const submitData = {
          totalFinishPercent: this.inspectForm.progress,
          "planNo": this.paramsOptins.planNo,
          "imgHost": "1",
          "beginImg": this.getImgUrlList(this.imagesList),
          "commonUserList": [],
          "remark": this.inspectForm.remark
        }
        uni.showLoading({ title: '提交中...' })
        await maintainCreate(submitData)
        uni.hideLoading()
        uni.showToast({
          title: '提交成功',
          icon: 'success',
          duration: 1000
        })
        setTimeout(() => {
          uni.redirectTo({
            url: '/pages-sub/daily/maintain-manage/index'
          })
        }, 1000)
      } catch (error) {
        uni.hideLoading()
        if (!Array.isArray(error)) {
          console.error('巡查表单提交失败：', error)
          uni.showToast({
            title: '提交失败，请重试',
            icon: 'none',
            duration: 2000
          })
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.inspect-form-content {
  background: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
}
.progress-wrap {
  width: 83%;
}
</style>