JCSS / jcss-miniprogram

  <template>
    <view class="work-field-form">
      <up-form label-position="left" :model="inspectForm" ref="inspectFormRef" :label-width="labelWidth">
        <!-- ========== 动态表单区域 ========== -->
        <template v-for="item in dynamicFields" :key="item.fieldCode">
          <up-form-item :label="item.fieldName" :prop="item.fieldCode" 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)" @blur="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 布尔单选 是/否 -->
            <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/接口 -->
            <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>
              <!-- 有限上限时提示已选数。上限靠「禁用未选中项」实现 -->
              <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 width="70" height="70" :sizeType="['compressed']" :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>
        <!-- ========== 动态表单结束 ========== -->
      </up-form>
  
      <!-- 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" :container-width="groupPicker.containerWidth" :quantities="groupPicker.quantities"
        @update:show="groupPicker.show = $event" @confirm="onGroupedConfirm"></grouped-picker>
    </view>
  </template>
  
  <script>
  import { uploadImages } from '@/common/utils/upload'
  import { getByType, getOptionsByCode, getMaterialByCode } from '@/api/common'
  
  /**
   * 动态字段表单（业务类型字段配置驱动）
   *
   * 数据来源：数据中心 / 业务类型字段配置（按 businessType + bizType + workTypeId 定位分类与版本）。
   * 使用方式：
   *   <work-field-form ref="workFieldFormRef" :business-type="bizLine" :biz-type="1" :work-type-id="workTypeId"
   *                    @loaded="onFieldsLoaded" />
   * 父页面通过 ref 调用 validate() / getValues() 完成校验与提交体组装。
   *
   * 说明：businessType / bizType / workTypeId 任一变化都会重新加载；bizType 1=工单 2=道路 3=养护。
   */
  export default {
    name: 'WorkFieldForm',
    props: {
      // 业务类型(园林养护数据口径)：yl园林 / hj环卫 / sz市政 / zx / wy
      businessType: { type: String, default: '' },
      // 来源：1工单 / 2道路 / 3养护
      bizType: { type: Number, default: 1 },
      // 作业类型(dict: maintain_type)
      workTypeId: { type: [String, Number], default: '' },
      // 与父表单对齐的标签宽度
      labelWidth: { type: String, default: '170rpx' }
    },
    data() {
      return {
        inspectForm: {},
        // 用来存放展示文本label的映射对象
        labelMap: {},
        // 类型7图片/8附件的每字段文件列表（fieldCode -> u-upload 兼容数组 {url,status,name}）
        fileListMap: {},
        // 数量收集：类型6+needQuantity 为 {选项值: 数量}；类型3物料为标量（领用数量）
        qtyMap: {},
        // 动态字段列表
        dynamicFields: [],
        // 必填规则（随字段配置动态生成）
        inspectFormRules: {},
        // 日期时间选择器
        datePickerShow: false,
        datePickerValue: Number(new Date()),
        currentDateFieldCode: '',
        // actionSheet配置
        actionSheet: {
          show: false,
          fieldCode: '',
          options: [],
          fieldItem: null
        },
        // 分层选项选择器配置（选项带 path 的 3/6 字段用，其余字段仍走上面的 actionSheet / 内联复选框）
        groupPicker: {
          show: false,
          fieldCode: '',
          fieldItem: null,
          title: '',
          options: [],
          multiple: false,
          maxCount: Infinity,
          needQuantity: false,
          value: '',
          quantities: {},
          containerWidth: 0
        }
      }
    },
    watch: {
      businessType() {
        this.reload()
      },
      workTypeId() {
        this.reload()
      }
    },
    mounted() {
      this.reload()
    },
    methods: {
      /**
       * 重新加载字段配置（作业类型切换时复用同一实例）
       */
      reload() {
        if (!this.businessType || !this.workTypeId) {
          this.dynamicFields = []
          this.$emit('loaded', 0)
          return
        }
        this.resetForm()
        this.loadDynamicFields(this.businessType, this.workTypeId)
      },
      resetForm() {
        this.inspectForm = {}
        this.labelMap = {}
        this.fileListMap = {}
        this.qtyMap = {}
        this.dynamicFields = []
        this.inspectFormRules = {}
      },
      // ========== 对外方法 ==========
      /** 表单校验，失败时 reject 字段数组（与 uview-plus 一致） */
      validate() {
        const formRef = this.$refs.inspectFormRef
        if (!formRef) {
          return Promise.resolve()
        }
        return formRef.validate()
      },
      /** 组装 fields[] 提交体（空值不出现；物料数量>0 才带物料三列） */
      getValues() {
        return this.buildDynamicFields()
      },
      /** 当前是否有可填字段 */
      hasFields() {
        return this.dynamicFields.length > 0
      },
      // number-box数值变更回调
      valChange(item) {
        this.$refs.inspectFormRef && this.$refs.inspectFormRef.validateField(item.fieldCode)
      },
      // ========== 日期时间相关方法 ==========
      openDatePicker(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 && this.$refs.inspectFormRef.validateField(this.currentDateFieldCode)
      },
      onDateClose() {
        this.datePickerShow = false
      },
      /**
       * 点击表单项时按类型决定弹出哪个选择器
       */
      openPickerIfNeeded(item) {
        if (this.isGroupedField(item)) {
          return this.openGroupedPicker(item)
        }
        // 模板用 multiple === 1 渲染复选框组，这里就必须用 !== 1 才打开弹窗
        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 */
      isGroupedField(item) {
        if (!item || (item.fieldType !== 3 && item.fieldType !== 6)) {
          return false
        }
        return (item.selectOptions || []).some((opt) => Array.isArray(opt.path) && opt.path.length > 0)
      },
      /** 打开分层选项弹层 */
      openGroupedPicker(item) {
        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] || {})
        // 打开弹窗瞬间获取父容器宽度
        const query = uni.createSelectorQuery().in(this)
        query.select('.work-field-form').boundingClientRect((rect) => {
          if (rect && rect.width) {
            this.groupPicker.containerWidth = rect.width
          }
          this.groupPicker.show = true
        }).exec()
      },
      /** 分层弹层确定回调 */
      onGroupedConfirm(payload) {
        const code = this.groupPicker.fieldCode
        this.inspectForm[code] = payload.values
        this.labelMap[code] = payload.labelText
        if (this.groupPicker.needQuantity) {
          // 合并而不是替换：保留 loadDynamicFields 预建的选项键
          this.qtyMap[code] = Object.assign({}, this.qtyMap[code] || {}, payload.quantities || {})
        }
        this.groupPicker.show = false
        this.$refs.inspectFormRef && this.$refs.inspectFormRef.validateField(code)
      },
      /** 打开底部选择弹窗 actionSheet */
      openActionSheet(item) {
        this.actionSheet.fieldCode = item.fieldCode
        this.actionSheet.fieldItem = item
        // 物料带 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) {
        const fieldItem = this.actionSheet.fieldItem
        const fieldCode = this.actionSheet.fieldCode
        // 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
        }
        this.labelMap[fieldCode] = selectedItem.name
        this.actionSheet.show = false
        this.$refs.inspectFormRef && this.$refs.inspectFormRef.validateField(fieldCode)
      },
      /** 类型11 地理位置：微信地图选点 */
      openLocation(item) {
        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 && 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, workTypeId) {
        try {
          const res = await getByType({
            businessType,
            workTypeId,
            bizType: this.bizType
          })
          let fields = res.fields || []
          fields.sort((a, b) => a.sort - b.sort)
          if (fields.length === 0) {
            this.dynamicFields = []
            this.$emit('loaded', 0)
            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] = ''
            }
            this.labelMap[field.fieldCode] = ''
            if (field.fieldType === 7 || field.fieldType === 8) {
              this.fileListMap[field.fieldCode] = []
            }
            // 选项装载：静态来源(1)直接用下发的 field.options，其余来源(2字典/3物料/4数据表/5SQL/6接口)调 options 接口
            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) {
                const matRes = await getMaterialByCode({
                  businessType,
                  bizType: this.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: this.bizType,
                  workTypeId,
                  fieldCode: field.fieldCode
                })
                field.selectOptions = (optRes || []).map((opt) => ({ label: opt.label, value: String(opt.value), path: opt.path }))
              }
            }
            // 数量收集初始化（必须在 selectOptions 装载之后）
            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 && this.$refs.inspectFormRef.setRules(this.inspectFormRules)
          })
          this.$emit('loaded', fields.length)
        } catch (err) {
          console.error('获取动态表单字段失败：', err)
          uni.showToast({ title: '加载表单配置失败', icon: 'none' })
          this.$emit('loaded', 0)
        }
      },
      // ========== 动态字段：渲染与取值辅助 ==========
      /** 类型6 多选是否要求每项填「使用数量」（ext_config.needQuantity） */
      needQty(item) {
        return !!(item.extConfig && item.extConfig.needQuantity === true)
      },
      /** 有效上限：ext_config.maxCount（0 表示不限） */
      maxCountOf(item, defaultValue) {
        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 */
      pickCountOf(item, defaultValue) {
        const max = this.maxCountOf(item, defaultValue)
        return max === Infinity ? 52 : max
      },
      /** 单文件大小上限(MB)：ext_config.maxSizeMb */
      maxSizeMbOf(item, defaultValue) {
        const num = item.extConfig ? Number(item.extConfig.maxSizeMb) : NaN
        return num > 0 ? num : defaultValue
      },
      /** 类型8 允许的扩展名数组（ext_config.fileType，不含点） */
      extensionsOf(item) {
        const list = item.extConfig && item.extConfig.fileType
        return Array.isArray(list) ? list : []
      },
      fileButtonText(item) {
        const exts = this.extensionsOf(item)
        return exts.length ? `选择文件（${exts.join('/')}）` : '选择文件'
      },
      /** 从 URL 取末段当文件名 */
      fileNameOf(url) {
        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) {
        const values = this.inspectForm[item.fieldCode] || []
        return (item.selectOptions || []).filter((opt) => values.indexOf(opt.value) > -1)
      },
      /** 多选是否达到上限（用于禁用未选中项） */
      isOptionLocked(item, opt) {
        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) {
        const max = this.maxCountOf(item, Infinity)
        if (max === Infinity) {
          return ''
        }
        return `已选 ${(this.inspectForm[item.fieldCode] || []).length}/${max}`
      },
      onMultiChange(item) {
        this.$refs.inspectFormRef && this.$refs.inspectFormRef.validateField(item.fieldCode)
      },
      /** 必填规则：7/8/9/11 的值是数组或对象，必须用 validator 显式判空 */
      buildRequiredRule(field) {
        const type = field.fieldType
        if (type === 6 || type === 7 || type === 8) {
          const action = type === 6 ? '请选择' : '请上传'
          return {
            required: true,
            trigger: ['change', 'blur'],
            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', 'blur'],
            validator: (rule, value, callback) => {
              value ? callback() : callback(new Error(type === 9 ? `请选择${field.fieldName}` : `请选择${field.fieldName}的位置`))
            }
          }
        }
        if (type === 1) {
          return {
            required: true,
            trigger: ['change', 'blur'],
            validator: (rule, value, callback) => {
              // 空字符串、null、undefined 才是空；数字 0 合法
              if (value === '' || value === null || value === undefined) {
                callback(new Error(`请填写${field.fieldName}`))
              } else {
                callback()
              }
            }
          }
        }
        // 2文本 /4日期 /5布尔 /10链接
        const action = type === 3 || type === 5 ? '请选择' : '请填写'
        return {
          required: true,
          message: `${action}${field.fieldName}`,
          trigger: ['change', 'blur']
        }
      },
      // ========== 动态字段：7图片/8附件 ==========
      /** 单文件是否超过 ext_config.maxSizeMb */
      isOversize(file, maxSizeMb) {
        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) {
        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, event) {
        const rawFile = event && event.file
        const fileList = Array.isArray(rawFile) ? rawFile : [rawFile]
        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) {
        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 = { 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 */
      async uploadToField(item, files) {
        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 && this.$refs.inspectFormRef.validateField(code)
      },
      /** 删除 7图片/8附件 的某一个已选文件 */
      deleteFieldFile(item, event) {
        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 && this.$refs.inspectFormRef.validateField(item.fieldCode)
      },
      // ========== 动态字段：组装提交体 ==========
      /**
       * 按值格式契约组装 fields[]。
       * ① 空值一律不出现在 fields[] 里（不提交 ''/'[]'/'null'）
       * ② 物料的数量>0 才写 materialId/materialName/quantity —— 非空 materialId 即触发扣库存
       */
      buildDynamicFields() {
        const fields = []
        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 = { 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
                ? (Array.isArray(value) ? value.join(',') : String(value || ''))
                : 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 键，label 作快照落库
              const qtyMap = this.qtyMap[code] || {}
              fields.push({
                fieldCode: code,
                valueText: JSON.stringify(selected.map((opt) => {
                  const raw = qtyMap[opt.value]
                  const row = { 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
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .work-field-form {
    width: 100%;
  }
  
  .date-input-wrap {
    width: 100%;
  }
  
  // 放大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附件：自绘文件列表 + 选择按钮
  .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>