gaoluyang
2026-06-04 f0f22709fb7f9945e5bc246181e21fd0c282e694
src/pages/inspectionUpload/components/formDia.vue
@@ -1,7 +1,7 @@
<template>
  <u-popup
    v-model="dialogVisitable"
    mode="center"
  <u-popup
    v-model="dialogVisitable"
    mode="center"
    :round="10"
    :closeable="true"
    @close="cancel"
@@ -10,23 +10,23 @@
      <view class="popup-header">
        <text class="popup-title">巡检记录上传</text>
      </view>
      <view class="upload-container">
        <!-- 异常状态选择 -->
        <view class="form-container">
          <view class="title">巡检状态</view>
          <view class="exception-section">
            <view class="exception-options">
              <view
                class="exception-option"
              <view
                class="exception-option"
                :class="{ active: hasException === false }"
                @click="setExceptionStatus(false)"
              >
                <u-icon name="checkmark-circle" size="20" color="#52c41a"></u-icon>
                <text class="option-text">正常</text>
              </view>
              <view
                class="exception-option"
              <view
                class="exception-option"
                :class="{ active: hasException === true }"
                @click="setExceptionStatus(true)"
              >
@@ -48,54 +48,23 @@
            :customStyle="{ padding: '10px', backgroundColor: '#f5f5f5' }"
          />
        </view>
        <!-- 上传区域(仅在异常时显示) -->
        <template v-if="hasException === true">
          <view class="form-container">
            <view class="title">生产前</view>
            <u-upload
              :fileList="beforeModelValue"
              @afterRead="afterRead"
              @delete="deleteFile"
              name="before"
              multiple
              :maxCount="10"
              :maxSize="5 * 1024 * 1024"
              accept="image/*"
              :previewFullImage="true"
            ></u-upload>
          </view>
          <view class="form-container">
            <view class="title">生产后</view>
            <u-upload
              :fileList="afterModelValue"
              @afterRead="afterRead"
              @delete="deleteFile"
              name="after"
              multiple
              :maxCount="10"
              :maxSize="5 * 1024 * 1024"
              accept="image/*"
              :previewFullImage="true"
            ></u-upload>
          </view>
          <view class="form-container">
            <view class="title">生产问题</view>
            <u-upload
              :fileList="issueModelValue"
              @afterRead="afterRead"
              @delete="deleteFile"
              name="issue"
              multiple
              :maxCount="10"
              :maxSize="5 * 1024 * 1024"
              accept="image/*"
              :previewFullImage="true"
            ></u-upload>
          </view>
        </template>
        <view class="form-container" v-if="hasException === true">
          <view class="title">上传附件</view>
          <text class="upload-count">已上传: {{ fileList.length }}个文件</text>
          <u-upload
            :fileList="fileList"
            @afterRead="afterRead"
            @delete="deleteFile"
            name="attachment"
            multiple
            :maxCount="30"
            :maxSize="5 * 1024 * 1024"
            accept="image/*"
            :previewFullImage="true"
          ></u-upload>
        </view>
        <!-- 正常状态提示 -->
        <view class="form-container normal-tip" v-if="hasException === false">
@@ -103,7 +72,7 @@
          <text class="tip-text">设备运行正常,无需上传照片</text>
        </view>
      </view>
      <view class="popup-footer">
        <u-button @click="cancel" :customStyle="{ marginRight: '10px' }">取消</u-button>
        <u-button type="primary" @click="submitForm">保存</u-button>
@@ -121,9 +90,7 @@
const emit = defineEmits(['closeDia'])
const dialogVisitable = ref(false)
const beforeModelValue = ref([])
const afterModelValue = ref([])
const issueModelValue = ref([])
const fileList = ref([])
const infoData = ref(null)
// 异常状态:null=未选择, false=正常, true=异常
@@ -134,13 +101,13 @@
// 计算上传URL
const uploadFileUrl = computed(() => {
  let baseUrl = '';
  if (process.env.VUE_APP_BASE_API) {
    baseUrl = process.env.VUE_APP_BASE_API;
  } else {
    baseUrl = config.baseUrl;
  }
  return baseUrl + '/file/upload';
})
@@ -203,29 +170,12 @@
// 文件上传处理
const afterRead = (event) => {
  const { name, file } = event
  // 根据上传类型设置不同的type值
  let typeValue = 10 // 默认值
  if (name === 'before') {
    typeValue = 10 // 生产前
  } else if (name === 'after') {
    typeValue = 11 // 生产中
  } else if (name === 'issue') {
    typeValue = 12 // 生产后
  }
  const { file } = event
  const files = Array.isArray(file) ? file : [file]
  Promise.resolve().then(async () => {
    for (const f of files) {
      const uploaded = await uploadSingleFile(f, typeValue)
      if (name === 'before') {
        beforeModelValue.value.push(uploaded)
      } else if (name === 'after') {
        afterModelValue.value.push(uploaded)
      } else if (name === 'issue') {
        issueModelValue.value.push(uploaded)
      }
      const uploaded = await uploadSingleFile(f, 10)
      fileList.value.push(uploaded)
    }
    uni.showToast({ title: '上传成功', icon: 'success' })
  }).catch((err) => {
@@ -236,15 +186,8 @@
// 删除文件
const deleteFile = (event) => {
  const { name, index } = event
  if (name === 'before') {
    beforeModelValue.value.splice(index, 1)
  } else if (name === 'after') {
    afterModelValue.value.splice(index, 1)
  } else if (name === 'issue') {
    issueModelValue.value.splice(index, 1)
  }
  const { index } = event
  fileList.value.splice(index, 1)
}
// 设置异常状态
@@ -266,8 +209,7 @@
    // 如果是异常状态,检查是否有上传文件
    if (hasException.value === true) {
      const totalFiles = beforeModelValue.value.length + afterModelValue.value.length + issueModelValue.value.length
      if (totalFiles === 0) {
      if (fileList.value.length === 0) {
        uni.showToast({
          title: '请上传异常照片',
          icon: 'none'
@@ -284,28 +226,17 @@
      }
    }
    let arr = []
    if (beforeModelValue.value.length > 0) {
      arr.push(...beforeModelValue.value.map(item => ({ ...item, statusType: 0 })))
    }
    if (afterModelValue.value.length > 0) {
      arr.push(...afterModelValue.value.map(item => ({ ...item, statusType: 1 })))
    }
    if (issueModelValue.value.length > 0) {
      arr.push(...issueModelValue.value.map(item => ({ ...item, statusType: 2 })))
    }
    // 提交数据
    infoData.value.storageBlobDTO = arr
    infoData.value.commonFileListDTO = fileList.value
    infoData.value.hasException = hasException.value
    infoData.value.exceptionDescription = exceptionDescription.value
    await submitInspectionRecord({ ...infoData.value })
    uni.showToast({
      title: '提交成功',
      icon: 'success'
    })
    cancel()
  } catch (error) {
    console.error('提交失败:', error)
@@ -320,11 +251,9 @@
const openDialog = async (row) => {
  infoData.value = row
  dialogVisitable.value = true
  // 清空之前的数据
  beforeModelValue.value = []
  afterModelValue.value = []
  issueModelValue.value = []
  fileList.value = []
  hasException.value = null
  exceptionDescription.value = ''
}
@@ -367,10 +296,18 @@
.form-container {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.upload-count {
  display: block;
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
  padding-left: 10px;
}
.title {
@@ -381,7 +318,7 @@
  padding-left: 10px;
  position: relative;
  margin: 6px 0 10px;
  &::before {
    content: "";
    position: absolute;
@@ -423,12 +360,12 @@
  cursor: pointer;
  transition: all 0.3s;
  background-color: #fff;
  &.active {
    border-color: #1890ff;
    background-color: #e6f7ff;
  }
  &:active {
    opacity: 0.8;
  }
@@ -450,7 +387,7 @@
  background-color: #f6ffed;
  border: 1px dashed #b7eb8f;
  border-radius: 8px;
  .tip-text {
    margin-top: 15px;
    font-size: 14px;