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" label-width="140rpx">
        <!-- ========== 动态表单区域 ========== -->
        <template v-for="item in dynamicFields" :key="item.fieldCode">
          <up-form-item :label="item.fieldName" :prop="item.fieldCode" :required="item.required === 1" class="form-item"
                        @click="openPickerIfNeeded(item)">
            <!-- type 1 数值：u-number-box，最多2位小数，min=0，max取item.length -->
            <view v-if="item.fieldType === 1" class="number-box-wrap">
              <u-number-box v-model="inspectForm[item.fieldCode]" min="1" :step="1"
                            :max="item.length ? 10 ** Number(item.length) - 1 : null"
                            :placeholder="`请输入${item.fieldName}${item.unit} `" @change="valChange(item)" class="large-number-box">
              </u-number-box>
              <text class="unit-text" v-if="item.unit">{{ item.unit }}</text>
            </view>
            <!-- type 2 文本 -->
            <up-input v-else-if="item.fieldType === 2" v-model="inspectForm[item.fieldCode]"
                      :maxlength="item.length || 50" :placeholder="`请输入${item.fieldName}`"></up-input>
            <!-- 分层选项（3枚举/6多选，且选项带 path）：统一只读入口，点开分组弹层选择。
                 必须放在下面的 3/6 分支之前——v-else-if 短路，放后面就永远进不来 -->
            <up-input v-else-if="isGroupedField(item)" v-model="labelMap[item.fieldCode]" readonly
                      disabled-color="#ffffff" :placeholder="`请选择${item.fieldName}`" border="none">
              <template #right>
                <up-icon name="arrow-right" size="16"></up-icon>
              </template>
            </up-input>
            <!-- type3 枚举：多选 multiple=1 使用复选框组（name 必须是 value，提交按逗号拼接 value，与值格式契约一致） -->
            <u-checkbox-group v-else-if="item.fieldType === 3 && item.multiple === 1"
                              v-model="inspectForm[item.fieldCode]">
              <u-checkbox v-for="opt in item.selectOptions" :key="opt.value" :label="opt.label" :name="opt.value">
              </u-checkbox>
            </u-checkbox-group>
            <!-- type3 枚举：单选 用up-action-sheet 底部选择 -->
            <up-input v-else-if="item.fieldType === 3" v-model="labelMap[item.fieldCode]" readonly
                      disabled-color="#ffffff" :placeholder="`请选择${item.fieldName}`" border="none">
              <template #right>
                <up-icon name="arrow-right" size="16"></up-icon>
              </template>
            </up-input>
            <!-- type4 日期时间 -->
            <view v-else-if="item.fieldType === 4" @click.stop="openDatePicker(item)" class="date-input-wrap">
              <up-input v-model="inspectForm[item.fieldCode]" disabled placeholder="点击选择时间"></up-input>
            </view>
            <!-- type5 布尔单选 是/否 【重点修复】增加空label=""占位项 -->
            <up-radio-group v-else-if="item.fieldType === 5" v-model="inspectForm[item.fieldCode]">
              <up-radio label="是" name="是"></up-radio>
              <up-radio label="否" name="否"></up-radio>
            </up-radio-group>
            <!-- type6 多选：复选框组；选项来源可为静态/字典/物料/数据表/SQL/接口（物料不再占用 6 号） -->
            <view v-else-if="item.fieldType === 6" class="multi-wrap">
              <u-checkbox-group v-model="inspectForm[item.fieldCode]" @change="onMultiChange(item)">
                <u-checkbox v-for="opt in item.selectOptions" :key="opt.value" :label="opt.label" :name="opt.value"
                            :disabled="isOptionLocked(item, opt)">
                </u-checkbox>
              </u-checkbox-group>
              <!-- 有限上限时提示已选数。上限靠「禁用未选中项」实现：u-checkbox 的勾选态在组件内部，回写 v-model 撤不掉 -->
              <text v-if="multiHint(item)" class="multi-hint">{{ multiHint(item) }}</text>
              <!-- needQuantity：已选项各配一个数量输入，值按 {value,label,quantity} 提交。此形态仅记录用量、不扣库存 -->
              <view v-if="needQty(item)" class="qty-list">
                <view v-for="opt in checkedOptions(item)" :key="opt.value" class="qty-row">
                  <text class="qty-label">{{ opt.label }}</text>
                  <u-number-box v-model="qtyMap[item.fieldCode][opt.value]" :min="0" :step="1"></u-number-box>
                </view>
              </view>
            </view>
            <!-- type7 图片：多张上传，提交 JSON 数组(URL) -->
            <up-upload v-else-if="item.fieldType === 7" :file-list="fileListMap[item.fieldCode] || []"
                       @after-read="(event) => uploadFieldFiles(item, event)" @delete="(event) => deleteFieldFile(item, event)"
                       multiple :max-count="pickCountOf(item, 5)" upload-text="选择图片" del-color="#ff4d4f"
                       class="upload-wrap"></up-upload>
            <!-- type8 附件：微信只能从聊天记录选文件（无通用文件选择器），提交 JSON 数组(URL) -->
            <view v-else-if="item.fieldType === 8" class="file-wrap">
              <view v-for="(file, idx) in fileListMap[item.fieldCode] || []" :key="idx" class="file-row">
                <text class="file-name">{{ file.name || fileNameOf(file.url) }}</text>
                <text class="file-del" @click.stop="deleteFieldFile(item, { index: idx })">删除</text>
              </view>
              <up-button size="small" type="primary" plain :text="fileButtonText(item)"
                         @click.stop="chooseFieldFiles(item)"></up-button>
            </view>
            <!-- type9 关联记录：底部选择，提交 JSON 数组 [{id,name}] -->
            <up-input v-else-if="item.fieldType === 9" v-model="labelMap[item.fieldCode]" readonly
                      disabled-color="#ffffff" :placeholder="`请选择${item.fieldName}`" border="none">
              <template #right>
                <up-icon name="arrow-right" size="16"></up-icon>
              </template>
            </up-input>
            <!-- type10 链接：URL 输入，提交裸 URL -->
            <up-input v-else-if="item.fieldType === 10" v-model.trim="inspectForm[item.fieldCode]"
                      :placeholder="`请输入${item.fieldName}（http/https 开头）`"></up-input>
            <!-- type11 地理位置：uni.chooseLocation 选点，提交 JSON 对象 {lng,lat,address} -->
            <up-input v-else-if="item.fieldType === 11" v-model="labelMap[item.fieldCode]" readonly
                      disabled-color="#ffffff" :placeholder="`点击选择${item.fieldName}`" border="none">
              <template #right>
                <up-icon name="arrow-right" size="16"></up-icon>
              </template>
            </up-input>
            <!-- 物料（fieldType=3 + optionSource=3）：额外收领用数量；数量>0 才提交 materialId/materialName/quantity 触发扣库存。
                 必须放在 v-if/v-else-if 链末尾——插在中间会打断链导致编译报错 -->
            <view v-if="item.fieldType === 3 && item.optionSource === 3" class="qty-row qty-row-material">
              <text class="qty-label">领用数量</text>
              <u-number-box v-model="qtyMap[item.fieldCode]" :min="0" :step="1"></u-number-box>
            </view>
          </up-form-item>
        </template>
        <!-- ========== 动态表单结束 ========== -->
        <!-- 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>
      </up-form>
    </view>
    <!-- 底部提交按钮 -->
    <view class="fixed-bottom-btn-wrap">
      <up-button type="primary" text="提交" @click="submitInspect"
                 style="width: 100%; height: 88rpx; font-size:32rpx; border-radius: 0;"></up-button>
    </view>
    <!-- uview-plus 日期时间选择器（全局复用） -->
    <up-datetime-picker :show="datePickerShow" v-model="datePickerValue" mode="datetime" close-on-click-overlay
                        @confirm="onDateConfirm" @cancel="onDateClose" @close="onDateClose"></up-datetime-picker>
    <!-- ActionSheet 底部选择弹窗 -->
    <up-action-sheet :show="actionSheet.show" :actions="actionSheet.options" @select="onActionSheetSelect"
                     @close="actionSheet.show = false" cancel-text="取消"></up-action-sheet>
    <!-- 分层选项选择器（选项带 path 的动态字段） -->
    <grouped-picker :show="groupPicker.show" :title="groupPicker.title" :options="groupPicker.options"
                    :multiple="groupPicker.multiple" :max-count="groupPicker.maxCount"
                    :need-quantity="groupPicker.needQuantity" :value="groupPicker.value"
                    :quantities="groupPicker.quantities" @update:show="groupPicker.show = $event"
                    @confirm="onGroupedConfirm"></grouped-picker>
  </view>
</template>
<script lang="ts">
import { uploadImages } from '@/common/utils/upload'
import { maintainCreate } from "@/api/maintain-manage/maintain-manage"
import { getByType, getOptionsByCode, getMaterialByCode, workRecordSubmit } from "@/api/common"
export default {
  data() {
    return {
      imagesList: [],
      initProgress: 0,
      inspectForm: {
        remark: '',
      },
      // ========== 新增：用来存放展示文本label的映射对象 ==========
      labelMap: {},
      // 类型7图片/8附件的每字段文件列表（fieldCode -> u-upload 兼容数组 {url,status,name}）
      fileListMap: {},
      // 数量收集：类型6+needQuantity 为 {选项值: 数量}；类型3物料为标量（领用数量）
      qtyMap: {},
      paramsOptins: {},
      // 幂等流水号：本次填报页面生命周期内保持不变，重复提交（如网络超时后重试）只会落一条记录
      clientSeq: '',
      // 养护计划本体的 commit.id：取到后缓存，重试时不再重复创建养护记录
      commitId: null,
      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()
              }
            }
          }
        ],
      },
      // 动态字段列表
      dynamicFields: [] as any[],
      // 日期时间选择器
      datePickerShow: false,
      datePickerValue: Number(new Date()),
      currentDateFieldCode: '',
      // actionSheet配置
      actionSheet: {
        show: false,
        fieldCode: '', // 当前操作的字段
        options: [] as any[],
        fieldItem: null // 保存当前点击的field对象，用于后面查找label
      },
      // 分层选项选择器配置（选项带 path 的 3/6 字段用，其余字段仍走上面的 actionSheet / 内联复选框）
      groupPicker: {
        show: false,
        fieldCode: '',
        fieldItem: null as any,
        title: '',
        options: [] as any[],
        multiple: false,
        maxCount: Infinity,
        needQuantity: false,
        value: '' as any,
        quantities: {} as any,
        // 数量单位不再传进弹层（原型列表行右侧只有步进器，没有单位），页面行内仍显示 item.unit
        unit: ''
      }
    }
  },
  onLoad(option) {
    console.log('页面参数：', option)
    this.paramsOptins = option
    const { businessType, planTypeId } = option
    this.loadDynamicFields(businessType, planTypeId)
  },
  onReady() {
    this.$refs.inspectFormRef.setRules(this.inspectFormRules)
    console.log('巡查表单规则初始化完成')
  },
  methods: {
    // number-box数值变更回调
    valChange(item) {
      // 数值修改后触发表单校验
      this.$refs.inspectFormRef.validateField(item.fieldCode)
    },
    // ========== 日期时间相关方法 ==========
    openDatePicker(field) {
      console.log('打开日期选择器', field)
      this.currentDateFieldCode = field.fieldCode
      const val = this.inspectForm[field.fieldCode]
      this.datePickerValue = val ? new Date(val).getTime() : Number(new Date())
      this.datePickerShow = true
      uni.hideKeyboard()
    },
    onDateConfirm(e) {
      const ts = e.value
      const d = new Date(ts)
      const y = d.getFullYear()
      const m = String(d.getMonth() + 1).padStart(2, '0')
      const day = String(d.getDate()).padStart(2, '0')
      const h = String(d.getHours()).padStart(2, '0')
      const mi = String(d.getMinutes()).padStart(2, '0')
      const s = String(d.getSeconds()).padStart(2, '0')
      this.inspectForm[this.currentDateFieldCode] = `${y}-${m}-${day} ${h}:${mi}:${s}`
      this.datePickerShow = false
      this.$refs.inspectFormRef.validateField(this.currentDateFieldCode)
    },
    onDateClose() {
      this.datePickerShow = false
    },
    /**
     * 点击表单项时按类型决定弹出哪个选择器：
     * 分层选项(带 path 的 3/6) → 分组弹层；3 枚举(单选) / 9 关联记录 → 底部 actionSheet；11 地理位置 → 微信地图选点
     * 其余类型（多选、图片、附件、可输入的链接）不在这里处理，由控件自身响应
     */
    openPickerIfNeeded(item: any) {
      // 分层选项优先：它的只读入口是靠本方法打开弹层的（模板里 3/6 的原有分支已被 isGroupedField 挡在前面）
      if (this.isGroupedField(item)) {
        return this.openGroupedPicker(item)
      }
      // 条件与模板互补：模板用 multiple === 1 渲染复选框组，这里就必须用 !== 1 才打开弹窗，
      // 否则 multiple 为 NULL/0 的存量单选枚举会既不渲染复选框、又点不开弹窗
      if (item.fieldType === 3 && item.multiple !== 1) {
        return this.openActionSheet(item)
      }
      if (item.fieldType === 9) {
        return this.openActionSheet(item)
      }
      if (item.fieldType === 11) {
        return this.openLocation(item)
      }
    },
    /**
     * 是否为「分层选项」字段：3枚举/6多选，且选项带了后端下发的 path。
     * path 是纯增量字段，老字段（静态/字典/物料/数据表/接口/无 gN_ 别名的 SQL）没有它 → 走原路径，行为不变
     */
    isGroupedField(item: any) {
      if (!item || (item.fieldType !== 3 && item.fieldType !== 6)) {
        return false
      }
      return (item.selectOptions || []).some((opt: any) => Array.isArray(opt.path) && opt.path.length > 0)
    },
    /**
     * 打开分层选项弹层。单选/多选判定与模板同一口径：
     * 6 → 多选；3 且 multiple===1 → 多选（提交按逗号拼接）；3 其余 → 单选
     */
    openGroupedPicker(item: any) {
      const code = item.fieldCode
      const multiple = item.fieldType === 6 || item.multiple === 1
      this.groupPicker.fieldCode = code
      this.groupPicker.fieldItem = item
      this.groupPicker.title = item.fieldName
      this.groupPicker.options = item.selectOptions || []
      this.groupPicker.multiple = multiple
      this.groupPicker.maxCount = this.maxCountOf(item, Infinity)
      // 只有 6 多选需要每项数量；3 枚举没有这层语义
      this.groupPicker.needQuantity = item.fieldType === 6 && this.needQty(item)
      this.groupPicker.value = multiple ? (this.inspectForm[code] || []).slice() : (this.inspectForm[code] || '')
      this.groupPicker.quantities = Object.assign({}, this.qtyMap[code] || {})
      this.groupPicker.show = true
    },
    /**
     * 分层弹层确定回调。写入位置与原有两条路径完全一致（inspectForm/labelMap/qtyMap），
     * 因此 buildDynamicFields() 一行都不用改
     */
    onGroupedConfirm(payload: any) {
      const code = this.groupPicker.fieldCode
      this.inspectForm[code] = payload.values
      this.labelMap[code] = payload.labelText
      if (this.groupPicker.needQuantity) {
        // 合并而不是替换：保留 loadDynamicFields 预建的选项键，避免非分层路径读到 undefined
        this.qtyMap[code] = Object.assign({}, this.qtyMap[code] || {}, payload.quantities || {})
      }
      this.groupPicker.show = false
      this.$refs.inspectFormRef.validateField(code)
    },
    /**
     * 打开底部选择弹窗 actionSheet
     */
    openActionSheet(item: any) {
      this.actionSheet.fieldCode = item.fieldCode
      this.actionSheet.fieldItem = item
      // 选项统一挂在 selectOptions（静态来源直接用 field.options，物料来源调 materials 接口拿，其余调 options 接口）
      // 物料带 currentNum 时在展示名后附库存余量（只影响展示名，提交的 materialName 仍取干净的 opt.label）
      this.actionSheet.options = (item.selectOptions || []).map(opt => {
        const stock = opt.currentNum === null || opt.currentNum === undefined || opt.currentNum === ''
            ? NaN
            : Number(opt.currentNum)
        return {
          name: isNaN(stock) ? opt.label : `${opt.label}（库存${stock}${opt.unit || ''}）`,
          value: opt.value
        }
      })
      this.actionSheet.show = true
    },
    /**
     * actionSheet选中回调
     */
    onActionSheetSelect(selectedItem: any) {
      const fieldItem = this.actionSheet.fieldItem
      const fieldCode = this.actionSheet.fieldCode
      // 1. 表单保存提交值：9 关联记录存 {id,name}（提交时转成 [{id,name}]），其余存裸 value
      if (fieldItem && fieldItem.fieldType === 9) {
        this.inspectForm[fieldCode] = { id: selectedItem.value, name: selectedItem.name }
      } else {
        this.inspectForm[fieldCode] = selectedItem.value
      }
      // 2. labelMap保存label，给input展示
      this.labelMap[fieldCode] = selectedItem.name
      this.actionSheet.show = false
      // 选中后触发表单校验
      this.$refs.inspectFormRef.validateField(fieldCode)
    },
    /**
     * 类型11 地理位置：微信地图选点（无需地图 AK，manifest.json 已声明 requiredPrivateInfos）
     * 提交形态 {lng,lat,address}
     */
    openLocation(item: any) {
      uni.chooseLocation({
        success: (res) => {
          this.inspectForm[item.fieldCode] = {
            lng: res.longitude,
            lat: res.latitude,
            address: res.address || res.name || ''
          }
          this.labelMap[item.fieldCode] = res.address || res.name || `${res.latitude}, ${res.longitude}`
          this.$refs.inspectFormRef.validateField(item.fieldCode)
        },
        fail: (err) => {
          console.error('地图选择失败', err)
          if (err && err.errMsg && err.errMsg.indexOf('auth deny') > -1) {
            uni.showToast({ title: '请授权位置权限', icon: 'none' })
          }
        }
      })
    },
    /**
     * 加载动态字段
     */
    async loadDynamicFields(businessType: string, workTypeId: string) {
      if (!businessType || !workTypeId) {
        uni.showToast({ title: '缺少业务参数', icon: 'none' })
        return
      }
      const bizType = 3
      try {
        const res = await getByType({
          businessType,
          workTypeId,
          bizType
        })
        let fields = res.fields || []
        fields.sort((a, b) => a.sort - b.sort)
        if (fields.length === 0) {
          uni.showToast({ title: '暂无需填报项', icon: 'none' })
          this.dynamicFields = []
          return
        }
        for (const field of fields) {
          // 初值：多选为数组；9关联记录/11地理位置 为对象（未选为 null）；7图片/8附件为 URL 数组；其余空字符串
          if (field.fieldType === 6 || (field.fieldType === 3 && field.multiple === 1)) {
            this.inspectForm[field.fieldCode] = []
          } else if (field.fieldType === 7 || field.fieldType === 8) {
            this.inspectForm[field.fieldCode] = []
          } else if (field.fieldType === 9 || field.fieldType === 11) {
            this.inspectForm[field.fieldCode] = null
          } else {
            this.inspectForm[field.fieldCode] = ''
          }
          // 初始化展示label为空
          this.labelMap[field.fieldCode] = ''
          // 7图片/8附件的文件列表（驱动 up-upload 与自绘文件列表展示）
          if (field.fieldType === 7 || field.fieldType === 8) {
            this.fileListMap[field.fieldCode] = []
          }
          // 选项装载：静态来源(1)直接用下发的 field.options，其余来源(2字典/3物料/4数据表/5SQL/6接口)调 options 接口，
          // 由后端按 optionSource 分发。类型 3/6/9 需要选项，其余类型不需要
          if (field.fieldType === 3 || field.fieldType === 6 || field.fieldType === 9) {
            if (field.optionSource === 1 && Array.isArray(field.options)) {
              field.selectOptions = field.options.map(opt => ({ label: opt.label, value: String(opt.value), path: opt.path }))
            } else if (field.optionSource === 3) {
              // 物料来源：调 materials（比 options 多返回 currentNum 库存余量/unit），供选择时显示库存
              const matRes = await getMaterialByCode({
                businessType,
                bizType,
                workTypeId,
                fieldCode: field.fieldCode
              })
              field.selectOptions = (matRes || []).map(mat => ({
                label: mat.materialName,
                value: String(mat.materialId),
                currentNum: mat.currentNum,
                unit: mat.unit
              }))
            } else {
              const optRes = await getOptionsByCode({
                businessType,
                bizType,
                workTypeId,
                fieldCode: field.fieldCode
              })
              // path 后端仅在 SQL 来源按 gN_key/gN_label 别名产出；透传后由 isGroupedField 判定是否走分层弹层
              field.selectOptions = (optRes || []).map(opt => ({ label: opt.label, value: String(opt.value), path: opt.path }))
            }
          }
          // 数量收集初始化（必须在 selectOptions 装载之后）：
          // 6多选+needQuantity 预建每个选项的键，避免模板 v-model 写到未定义的键上；
          // 3物料为标量（领用数量），默认 0 = 本次不领用、不扣库存
          if (field.fieldType === 6 && this.needQty(field)) {
            const qty = {}
            ;(field.selectOptions || []).forEach(opt => {
              qty[opt.value] = ''
            })
            this.qtyMap[field.fieldCode] = qty
          }
          if (field.fieldType === 3 && field.optionSource === 3) {
            this.qtyMap[field.fieldCode] = 0
          }
          // 必填规则
          if (field.required === 1) {
            this.inspectFormRules[field.fieldCode] = [this.buildRequiredRule(field)]
          }
        }
        this.dynamicFields = fields
        this.$nextTick(() => {
          this.$refs.inspectFormRef.setRules(this.inspectFormRules)
        })
      } catch (err) {
        console.error('获取动态表单字段失败：', err)
        uni.showToast({ title: '加载表单配置失败', icon: 'none' })
      }
    },
    /**
     * 删除图片
     */
    deleteImg(event) {
      this.imagesList.splice(event.index, 1)
      this.$refs.inspectFormRef.validateField('images')
      uni.showToast({ title: '图片删除成功', icon: 'success' })
    },
    /**
     * 上传图片
     */
    async uploadImgs(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, ignoreError: true })
        uploadResultUrls.forEach((url, index) => {
          if (targetImgList[startIndex + index]) {
            targetImgList.splice(startIndex + index, 1, {
              ...fileList[index], status: 'success', message: '', 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' })
    },
    getImgUrlList(imgList) {
      return imgList.filter(item => item.status === 'success').map(item => item.url)
    },
    // ========== 动态字段：渲染与取值辅助 ==========
    /**
     * 类型6 多选是否要求每项填「使用数量」（ext_config.needQuantity）
     * 仅记录用量，不写物料三列 ⇒ 结构性不触发扣库存（扣减一律按值行 materialId 非空判定）
     */
    needQty(item: any) {
      return !!(item.extConfig && item.extConfig.needQuantity === true)
    },
    /**
     * 有效上限：ext_config.maxCount 的「填 0 表示不限」（PC 端提示语）在提交侧照此生效
     * 未配置 → 类型默认值；配 0 → Infinity（不限）；配正数 → 该数
     */
    maxCountOf(item: any, defaultValue: number) {
      const raw = item.extConfig ? item.extConfig.maxCount : undefined
      if (raw === undefined || raw === null || raw === '') {
        return defaultValue
      }
      const num = Number(raw)
      if (isNaN(num)) {
        return defaultValue
      }
      return num > 0 ? num : Infinity
    },
    /** 传给选择器的单次可选数量：上限为「不限」时用组件默认值 52（平台要求 count 是有限数） */
    pickCountOf(item: any, defaultValue: number) {
      const max = this.maxCountOf(item, defaultValue)
      return max === Infinity ? 52 : max
    },
    /** 单文件大小上限(MB)：ext_config.maxSizeMb，未配置时用默认值 */
    maxSizeMbOf(item: any, defaultValue: number) {
      const num = item.extConfig ? Number(item.extConfig.maxSizeMb) : NaN
      return num > 0 ? num : defaultValue
    },
    /** 类型8 允许的扩展名数组（ext_config.fileType，不含点） */
    extensionsOf(item: any) {
      const list = item.extConfig && item.extConfig.fileType
      return Array.isArray(list) ? list : []
    },
    fileButtonText(item: any) {
      const exts = this.extensionsOf(item)
      return exts.length ? `选择文件（${exts.join('/')}）` : '选择文件'
    },
    /** 从 URL 取末段当文件名（与 PC 端 FieldValueCell 同口径） */
    fileNameOf(url: string) {
      if (!url) return ''
      const path = String(url).split('?')[0].split('#')[0]
      const name = path.substring(path.lastIndexOf('/') + 1)
      try {
        return decodeURIComponent(name) || url
      } catch (err) {
        return name || url
      }
    },
    /** 类型6 已勾选的选项（用于渲染每个已选项的数量输入行） */
    checkedOptions(item: any) {
      const values = this.inspectForm[item.fieldCode] || []
      return (item.selectOptions || []).filter(opt => values.indexOf(opt.value) > -1)
    },
    /**
     * 多选是否达到上限（用于禁用未选中项）。
     * 不用「超限后回写 v-model 截断」：u-checkbox 的勾选态是组件内部状态（只受 checked prop 影响），
     * 回写父级 v-model 撤不掉已经勾上的项，下一次点击还会按内部状态重新算一遍，等于没限住
     */
    isOptionLocked(item: any, opt: any) {
      const max = this.maxCountOf(item, Infinity)
      if (max === Infinity) {
        return false
      }
      const values = this.inspectForm[item.fieldCode] || []
      return values.length >= max && values.indexOf(opt.value) === -1
    },
    /** 多选的「已选 x/上限」提示，不限时返回空串 */
    multiHint(item: any) {
      const max = this.maxCountOf(item, Infinity)
      if (max === Infinity) {
        return ''
      }
      return `已选 ${(this.inspectForm[item.fieldCode] || []).length}/${max}`
    },
    onMultiChange(item: any) {
      // 上限由 isOptionLocked 禁用未选项保证，这里只负责触发必填校验
      this.$refs.inspectFormRef.validateField(item.fieldCode)
    },
    /**
     * 必填规则。
     * 7/8/9/11 的值是数组或对象，async-validator 的 required 按默认 string 类型判定，
     * 会放过「空数组」「null」⇒ 必须用 validator 显式判空，否则未选也能提交
     */
    buildRequiredRule(field: any) {
      const type = field.fieldType
      if (type === 6 || type === 7 || type === 8) {
        const action = type === 6 ? '请选择' : '请上传'
        return {
          required: true,
          trigger: 'change',
          validator: (rule, value, callback) => {
            Array.isArray(value) && value.length > 0 ? callback() : callback(new Error(`${action}${field.fieldName}`))
          }
        }
      }
      if (type === 9 || type === 11) {
        return {
          required: true,
          trigger: 'change',
          validator: (rule, value, callback) => {
            value ? callback() : callback(new Error(type === 9 ? `请选择${field.fieldName}` : `请选择${field.fieldName}的位置`))
          }
        }
      }
      // 1数值/2文本/4日期/5布尔/10链接 为字符串；3枚举/6单选为选择项
      const action = type === 3 || type === 5 ? '请选择' : '请填写'
      return { required: true, message: `${action}${field.fieldName}`, trigger: 'change' }
    },
    /** 幂等流水号（后端按 userId+clientSeq 去重，命中则返回已存在的 recordId） */
    genClientSeq() {
      return `${Date.now()}-${Math.random().toString(16).slice(2, 10)}`
    },
    // ========== 动态字段：7图片/8附件 ==========
    /** 单文件是否超过 ext_config.maxSizeMb（超限即 toast 并返回 true 以便过滤掉） */
    isOversize(file: any, maxSizeMb: number) {
      if (!maxSizeMb || !file || !file.size) return false
      const over = file.size / 1024 / 1024 > maxSizeMb
      if (over) {
        uni.showToast({ title: `单个文件不能超过${maxSizeMb}MB`, icon: 'none' })
      }
      return over
    },
    /** 把已上传成功的 URL 同步进表单值（提交与校验都读 inspectForm） */
    syncFileValue(item: any) {
      const list = this.fileListMap[item.fieldCode] || []
      this.inspectForm[item.fieldCode] = list.filter(file => file.status === 'success').map(file => file.url)
    },
    /**
     * 7图片 上传（u-upload 的 after-read 回调）
     */
    uploadFieldFiles(item: any, event: any) {
      const rawFile = event && event.file
      const fileList = Array.isArray(rawFile) ? rawFile : [rawFile]
      return this.uploadToField(item, fileList.filter(file => file && file.url).map(file => ({
        url: file.url,
        name: file.name || '',
        size: file.size
      })))
    },
    /**
     * 8附件 选择并上传。
     * 微信小程序没有通用文件选择器，只能从聊天记录里选（uni.chooseMessageFile）
     */
    chooseFieldFiles(item: any) {
      const maxCount = this.maxCountOf(item, 5)
      const remain = maxCount - (this.fileListMap[item.fieldCode] || []).length
      if (remain <= 0) {
        uni.showToast({ title: `最多只能上传${maxCount}个`, icon: 'none' })
        return
      }
      const exts = this.extensionsOf(item)
      const options: any = { count: Math.min(remain, this.pickCountOf(item, 5)), type: 'file' }
      if (exts.length) {
        options.extension = exts
      }
      uni.chooseMessageFile({
        ...options,
        success: (res) => {
          const tempFiles = res.tempFiles || []
          this.uploadToField(item, tempFiles.map(file => ({
            url: file.path,
            name: file.name || '',
            size: file.size
          })))
        },
        fail: (err) => {
          console.error('选择附件失败：', err)
        }
      })
    },
    /**
     * 把选中的本地文件逐个上传并把 http 地址回填到 fileListMap / inspectForm。
     * 7图片与8附件共用（uploadImages 是通用 uni.uploadFile，不限图片类型）
     */
    async uploadToField(item: any, files: any[]) {
      const code = item.fieldCode
      const maxCount = this.maxCountOf(item, 5)
      const maxSizeMb = this.maxSizeMbOf(item, 5)
      const validFiles = (files || []).filter(file => file && file.url && !this.isOversize(file, maxSizeMb))
      if (!validFiles.length) {
        return
      }
      const targetList = this.fileListMap[code] || (this.fileListMap[code] = [])
      if (targetList.length + validFiles.length > maxCount) {
        uni.showToast({ title: `最多只能上传${maxCount}个`, icon: 'none' })
        return
      }
      const startIndex = targetList.length
      targetList.push(...validFiles.map(file => ({
        url: file.url, status: 'uploading', message: '上传中', name: file.name || ''
      })))
      try {
        const uploadResultUrls = await uploadImages({
          filePaths: validFiles.map(file => file.url),
          ignoreError: true
        })
        uploadResultUrls.forEach((url, index) => {
          if (targetList[startIndex + index]) {
            targetList.splice(startIndex + index, 1, {
              url, status: 'success', message: '', name: validFiles[index].name || ''
            })
          }
        })
        for (let i = uploadResultUrls.length; i < validFiles.length; i++) {
          if (targetList[startIndex + i]) {
            targetList.splice(startIndex + i, 1, {
              url: validFiles[i].url, status: 'failed', message: '上传失败', name: validFiles[i].name || ''
            })
          }
        }
        if (uploadResultUrls.length < validFiles.length) {
          uni.showToast({
            title: `成功${uploadResultUrls.length}个，失败${validFiles.length - uploadResultUrls.length}个`,
            icon: 'none'
          })
        }
      } catch (err) {
        console.error(`【${code}】文件上传失败：`, err)
        for (let i = 0; i < validFiles.length; i++) {
          if (targetList[startIndex + i]) {
            targetList.splice(startIndex + i, 1, {
              url: validFiles[i].url, status: 'failed', message: '上传失败', name: validFiles[i].name || ''
            })
          }
        }
        uni.showToast({ title: '上传失败，请重试', icon: 'none' })
      }
      this.syncFileValue(item)
      this.$refs.inspectFormRef.validateField(code)
    },
    /**
     * 删除 7图片/8附件 的某一个已选文件
     */
    deleteFieldFile(item: any, event: any) {
      const list = this.fileListMap[item.fieldCode] || []
      const index = Number(event && event.index)
      if (isNaN(index) || index < 0 || index >= list.length) {
        return
      }
      list.splice(index, 1)
      this.syncFileValue(item)
      this.$refs.inspectFormRef.validateField(item.fieldCode)
    },
    // ========== 动态字段：组装提交体 ==========
    /**
     * 按值格式契约组装 fields[]（见 docs/design/app-work-field-api.md §四）。
     * 两条硬规则：
     * ① 空值一律不出现在 fields[] 里（不提交 ''/'[]'/'null'）
     * ② 物料的数量>0 才写 materialId/materialName/quantity —— 非空 materialId 即触发扣库存，
     *    因此 6多选+needQuantity（只记录用量）绝不能写这三列，只把 quantity 放进 valueText 的 JSON 里
     */
    buildDynamicFields() {
      const fields: any[] = []
      for (const item of this.dynamicFields) {
        const code = item.fieldCode
        const value = this.inspectForm[code]
        const type = item.fieldType
        if (type === 9 || type === 11) {
          if (!value) continue
        } else if (type === 6 || type === 7 || type === 8) {
          if (!Array.isArray(value) || value.length === 0) continue
        } else if (value === '' || value === null || value === undefined) {
          continue
        }
        if (type === 1) {
          fields.push({ fieldCode: code, valueNumber: Number(value) })
        } else if (type === 3 && item.optionSource === 3) {
          // 物料：value_text 存物料ID；数量>0 才落物料三列（0 表示本次不领用）
          const qty = Number(this.qtyMap[code] || 0)
          const matched = (item.selectOptions || []).filter(opt => opt.value === String(value))[0]
          const row: any = { fieldCode: code, valueText: String(value) }
          if (qty > 0) {
            row.materialId = Number(value)
            row.materialName = matched ? matched.label : ''
            row.quantity = qty
          }
          fields.push(row)
        } else if (type === 3) {
          // 3枚举：单选取裸 value；历史「枚举+是否多选」存逗号分隔
          fields.push({
            fieldCode: code,
            valueText: item.multiple === 1 ? (value || []).join(',') : String(value)
          })
        } else if (type === 6) {
          const selected = (item.selectOptions || []).filter(opt => (value || []).indexOf(opt.value) > -1)
          if (this.needQty(item)) {
            // 元素 {value,label,quantity}；数量留空的不带 quantity 键（不臆测成 0），label 作快照落库
            const qtyMap = this.qtyMap[code] || {}
            fields.push({
              fieldCode: code,
              valueText: JSON.stringify(selected.map(opt => {
                const raw = qtyMap[opt.value]
                const row: any = { value: opt.value, label: opt.label }
                if (raw !== '' && raw !== null && raw !== undefined) {
                  row.quantity = Number(raw)
                }
                return row
              }))
            })
          } else {
            fields.push({ fieldCode: code, valueText: JSON.stringify(value.map(v => String(v))) })
          }
        } else if (type === 7 || type === 8) {
          fields.push({ fieldCode: code, valueText: JSON.stringify(value) })
        } else if (type === 9) {
          fields.push({ fieldCode: code, valueText: JSON.stringify([{ id: value.id, name: value.name }]) })
        } else if (type === 11) {
          fields.push({
            fieldCode: code,
            valueText: JSON.stringify({ lng: value.lng, lat: value.lat, address: value.address || '' })
          })
        } else {
          // 2文本 / 4日期 / 5布尔 / 10链接 均为裸文本
          fields.push({ fieldCode: code, valueText: String(value) })
        }
      }
      return fields
    },
    /**
     * 提交养护记录 —— 双写两条链路：
     * ① maintain-plan-commit/create：养护计划本身（描述 + 图片 + 人员），返回 commit.id
     * ② work-record/submit：动态字段值，bizId 用 ① 的 commit.id（旧接口的 VO 没有动态字段，会被 Jackson 静默丢弃）
     * 重试安全：commitId 一旦取到就缓存住，重试只补写 ②（② 自身按 clientSeq 幂等），避免重复创建养护记录
     */
    async submitInspect() {
      try {
        await this.$refs.inspectFormRef.validate()
        const dynamicValues = this.buildDynamicFields()
        if (!this.clientSeq) {
          this.clientSeq = this.genClientSeq()
        }
        uni.showLoading({ title: '提交中...' })
        // ① 养护计划本体：仅首次提交时写入
        if (!this.commitId) {
          const submitData = {
            planNo: this.paramsOptins.planNo,
            imgHost: "1",
            beginImg: this.getImgUrlList(this.imagesList),
            commonUserList: [],
            remark: this.inspectForm.remark.trim(),
          }
          const commitRes: any = await maintainCreate(submitData)
          // 兼容后端返回裸 id 或 {id:...} 两种形态
          this.commitId = commitRes && typeof commitRes === 'object' ? commitRes.id : commitRes
        }
        // ② 动态字段值：无动态字段时不产生空的字段值记录
        if (dynamicValues.length > 0) {
          if (!this.commitId) {
            console.warn('未取到养护计划的 commit.id，跳过动态字段提交')
          } else {
            await workRecordSubmit({
              businessType: this.paramsOptins.businessType,
              bizType: 3,
              bizId: this.commitId,
              workTypeId: Number(this.paramsOptins.planTypeId),
              clientSeq: this.clientSeq,
              remark: this.inspectForm.remark.trim(),
              fields: dynamicValues
            })
          }
        }
        uni.hideLoading()
        uni.showToast({ title: '提交成功', icon: 'success', duration: 1000 })
        setTimeout(() => {
          uni.reLaunch({ url: '/pages-sub/daily/maintain-manage/index' })
        }, 1000)
      } catch (error) {
        uni.hideLoading()
        // 表单校验失败时 error 是字段数组（uview-plus 已提示），不重复弹
        if (Array.isArray(error)) {
          return
        }
        console.error('养护记录提交失败：', error)
        // request.js 已把后端 msg 弹过一次（如「库存不足」），此处不要用通用文案盖掉真实原因
        const backendMsg = error && error.msg
        if (this.commitId) {
          // 养护计划已落库，失败只发生在耗材字段。必须说清「已提交」，否则用户会以为整单没提交而重复填
          uni.showToast({
            title: backendMsg ? `养护记录已提交：${backendMsg}` : '养护记录已提交，耗材数据保存失败，请重试',
            icon: 'none',
            duration: 2500
          })
        } else if (!backendMsg) {
          uni.showToast({ title: '提交失败，请重试', icon: 'none', duration: 2000 })
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.page-container {
  padding-bottom: 120rpx;
}
.inspect-form-content {
  background: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
}
.date-input-wrap {
  width: 100%;
}
.fixed-bottom-btn-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20rpx;
  box-sizing: border-box;
  background-color: #fff;
}
// 放大u-number-box输入框
.large-number-box {
  :deep(.u-number-box__input) {
    width: 264rpx !important;
    height: 72rpx;
    font-size: 32rpx;
  }
  :deep(.u-number-box__btn) {
    width: 64rpx;
    height: 72rpx;
  }
}
.number-box-wrap {
  display: flex;
  align-items: center;
  gap: 16rpx;
  .unit-text {
    font-size: 28rpx;
    color: #333;
  }
}
// 6多选：复选框组 + needQuantity 时每个已选项一行数量输入
.multi-wrap {
  width: 100%;
  .multi-hint {
    display: block;
    margin-top: 8rpx;
    font-size: 24rpx;
    color: #909399;
  }
  .qty-list {
    margin-top: 16rpx;
    padding-left: 20rpx;
    border-left: 4rpx solid #f0f0f0;
  }
}
// 数量行（6多选的每个已选项 / 3物料的领用数量共用）
.qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rpx;
  padding: 8rpx 0;
  .qty-label {
    flex: 1;
    min-width: 0;
    font-size: 28rpx;
    color: #333;
  }
}
.qty-row-material {
  margin-top: 12rpx;
  padding-top: 12rpx;
  border-top: 1rpx solid #f0f0f0;
}
// 8附件：自绘文件列表 + 选择按钮（微信无通用文件选择器，走 chooseMessageFile）
.file-wrap {
  width: 100%;
  .file-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16rpx;
    padding: 8rpx 0;
    .file-name {
      flex: 1;
      min-width: 0;
      font-size: 28rpx;
      color: #333;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .file-del {
      font-size: 26rpx;
      color: #ff4d4f;
    }
  }
}
</style>