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="remark"
            class="form-item"
        >
          <up-textarea
              v-model.trim="inspectForm.remark"
              placeholder="请输入养护描述"
              maxlength="200"
              count
          ></up-textarea>
        </up-form-item>
        <!-- 2. 上传图片 -->
        <up-form-item
            label="上传图片"
            prop="images"
            required
            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>
<!--        &lt;!&ndash; 3. 完成进度（滑块） &ndash;&gt;-->
<!--        <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()
              }
            }
          }
        ],
      }
    }
  },
  onLoad(option) {
    console.log('页面参数：', option)
    this.paramsOptins = option
  },
  onReady() {
    this.$refs.inspectFormRef.setRules(this.inspectFormRules)
    console.log('巡查表单规则初始化完成')
  },
  methods: {
    /**
     * 进度滑块变化处理 - 核心优化：实时触发校验 + 状态更新
     */
    /**
     * 删除图片
     */
    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 = {
          "planNo": this.paramsOptins.planNo,
          "imgHost": "1",
          "beginImg": this.getImgUrlList(this.imagesList),
          "commonUserList": [],
          "remark": this.inspectForm.remark.trim()
        }
        uni.showLoading({ title: '提交中...' })
        await maintainCreate(submitData)
        uni.hideLoading()
        uni.showToast({
          title: '提交成功',
          icon: 'success',
          duration: 1000
        })
        setTimeout(() => {
          uni.reLaunch({
            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>