业务线小程序不用写死，从后端接口获取

王彪总
1 parent d4747408
Showing 4 changed files with 605 additions and 3 deletions
common/config/global.js
common/utils/request.js
components/grouped-picker/grouped-picker.vue
pages-sub/daily/maintain-manage/add-record.vue
@@ -9,6 +9,9 @@ export default {
     timeout: 10000,
     tokenKey: 'jcss_token'
   },
+  // 多租户：后端开启 urbanops.tenant.enable=true 后，未登录请求必须携带 tenant-id 请求头
+  // 取值 = system_tenant.id（集团租户号，与 sql/mysql/多租户-03-租户套餐与账号迁移.sql 的 @tenant_id 保持一致）
+  tenantId: '1',
   router: {
     loginPath: '/pages/login/index',
     tabBarList: [
@@ -22,6 +22,10 @@ const request = (options) =&gt; {
  
   if (token) {
     opts.header['Authorization'] = `Bearer ${token}`;
+  } else if (globalConfig.tenantId) {
+    // 多租户：未登录时后端无法从 token 推导租户，必须显式携带 tenant-id（登录、刷新令牌等接口）
+    // 已登录请求由后端按 token 取租户，故不硬编码此头，避免将来多租户下跨租户 403
+    opts.header['tenant-id'] = String(globalConfig.tenantId);
   }
  
   opts.url = globalConfig.api.baseUrl + opts.url;
+<template>
+  <!-- 分层选项选择器：顶部 tab → 左侧竖排侧栏 → 右侧列表（第 3 层做分组标题）
+       行的勾选态由本组件的 draft 数据派生，不用 u-checkbox：
+       u-checkbox 的勾选态是组件内部状态（u-checkbox.vue:199-221 只在 init 时从父组派生），
+       而 u-checkbox-group 是把每个子实例的内部 isChecked 回读成数组（u-checkbox-group.vue:95-112），
+       子实例卸载后仍留在 children 里 —— 本弹层「切 tab 就换一批行」正好会命中这个坑（会读出幽灵勾选/重复值）。 -->
+  <up-popup :show="show" mode="bottom" :round="16" :safe-area-inset-bottom="true" :closeable="true"
+    close-icon-color="#999999" @close="handleClose">
+    <view class="gp-wrap">
+      <!-- 标题 + 多选已选数（已选项可能落在别的 tab，行不可见，必须靠这里和侧栏角标提示） -->
+      <view class="gp-header">
+        <text class="gp-title">{{ title || '请选择' }}</text>
+        <text v-if="multiple && hintText" class="gp-hint">{{ hintText }}</text>
+      </view>
+
+      <!-- 搜索：命中时跳过分组、对全量过滤，避免「切在某个 tab 里搜不到其它 tab 的项」 -->
+      <view class="gp-search">
+        <up-input v-model="keyword" :placeholder="`搜索${title || ''}`" clearable border="surround"
+          shape="circle"></up-input>
+      </view>
+
+      <!-- 第 1 层：顶部 tab -->
+      <up-tabs v-if="!isSearching && tabList.length > 1" :list="tabList" :scrollable="true"
+        v-model:current="tabIdx" @change="onTabChange" :lineWidth="30"></up-tabs>
+
+      <view class="gp-body">
+        <!-- 第 2 层：左侧竖排侧栏 -->
+        <scroll-view v-if="!isSearching && sides.length > 0" scroll-y class="gp-side">
+          <view v-for="(side, idx) in sides" :key="side.key" class="gp-side-item"
+            :class="{ 'is-active': idx === sideIdx }" @click="switchSide(idx)">
+            <text class="gp-side-text">{{ side.label }}</text>
+            <text v-if="side.count > 0" class="gp-side-badge">{{ side.count }}</text>
+          </view>
+        </scroll-view>
+
+        <!-- 第 3 层及更深：右侧列表，按最深可用层做分组标题 -->
+        <scroll-view scroll-y class="gp-list" :key="listKey">
+          <view v-for="group in visibleGroups" :key="group.key" class="gp-group">
+            <view class="gp-group-title">{{ group.label }}</view>
+            <view v-for="row in group.rows" :key="row.value" class="gp-row"
+              :class="{ 'is-selected': isSelected(row), 'is-locked': isLocked(row) }" @click="onRowClick(row)">
+              <view class="gp-check" :class="{ 'is-checked': isSelected(row) }">
+                <text v-if="isSelected(row)" class="gp-check-mark">✓</text>
+              </view>
+              <view class="gp-row-main">
+                <text class="gp-row-label">{{ row.label }}</text>
+                <!-- 搜索态下补层级面包屑，否则不知道命中的项属于哪个分组 -->
+                <text v-if="breadcrumb(row)" class="gp-row-crumb">{{ breadcrumb(row) }}</text>
+              </view>
+              <view v-if="needQuantity && isSelected(row)" class="gp-row-qty" @click.stop>
+                <u-number-box v-model="draftQty[row.value]" :min="0" :step="1"></u-number-box>
+                <text v-if="unit" class="gp-row-unit">{{ unit }}</text>
+              </view>
+            </view>
+          </view>
+          <view v-if="visibleGroups.length === 0" class="gp-empty">暂无数据</view>
+        </scroll-view>
+      </view>
+
+      <view class="gp-actions">
+        <view class="gp-action-item">
+          <up-button type="default" text="取消" @click="handleClose"></up-button>
+        </view>
+        <!-- 单选点行即提交，无需确定；多选才给确定按钮 -->
+        <view v-if="multiple" class="gp-action-item">
+          <up-button type="primary" :text="confirmText" @click="handleConfirm"></up-button>
+        </view>
+      </view>
+    </view>
+  </up-popup>
+</template>
+
+<script setup>
+import { ref, reactive, computed, watch, defineProps, defineEmits } from 'vue'
+
+// ========== Props ==========
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  title: { type: String, default: '' },
+  // 全量选项（后端扁平行）：[{ label, value, path: [{ key, label }] }]
+  options: { type: Array, default: () => [] },
+  multiple: { type: Boolean, default: false },
+  // Infinity 表示不限（页面用 maxCountOf(item, Infinity) 传入）
+  maxCount: { type: Number, default: Infinity },
+  needQuantity: { type: Boolean, default: false },
+  // 单选传字符串、多选传数组
+  value: { type: [String, Array], default: '' },
+  // { 选项值: 数量 }
+  quantities: { type: Object, default: () => ({}) },
+  unit: { type: String, default: '' }
+})
+
+const emit = defineEmits(['update:show', 'confirm'])
+
+// ========== 内部状态 ==========
+// draft：弹层内的编辑副本。取消直接丢弃，确定才一次性回传，避免半选态污染页面表单
+const keyword = ref('')
+const tabIdx = ref(0)
+const sideIdx = ref(0)
+const draftSelected = ref([])
+const draftValue = ref('')
+// 数量表用 reactive 而非 ref：模板里要 v-model 到动态键（draftQty[row.value]），
+// reactive 直接写属性即可，不依赖编译器把 ref 改写成 .value[key]（本仓无法本地构建，不赌这个）
+const draftQty = reactive({})
+
+// ========== 组树 ==========
+const rows = computed(() =>
+  (props.options || []).filter(o => o && o.value !== undefined && o.value !== null)
+)
+// 层数按「行里 path 的最大长度」定，兼容同一个字段里长短不一的行
+const depth = computed(() => rows.value.reduce((m, r) => Math.max(m, (r.path || []).length), 0))
+// 层级→用途映射：>=3 层才有侧栏；2 层只用 tab；1 层直接平铺（带该层名分组）
+const tabLevel = computed(() => (depth.value >= 2 ? 0 : -1))
+const sideLevel = computed(() => (depth.value >= 3 ? 1 : -1))
+const groupStart = computed(() => {
+  if (depth.value >= 3) return 2
+  if (depth.value === 2) return 1
+  return 0
+})
+
+const nodeAt = (row, i) => {
+  const p = row.path
+  return p && p[i] ? p[i] : null
+}
+const keyAt = (row, i) => {
+  const n = nodeAt(row, i)
+  return n ? String(n.key || n.label || '') : ''
+}
+const labelAt = (row, i) => {
+  const n = nodeAt(row, i)
+  return n ? String(n.label || n.key || '') : ''
+}
+// 分组键用 \u0001 连接（层级值里不会出现该字符），分组名用 ' / ' 连接更深层
+const groupKeyOf = (row) => {
+  const parts = []
+  for (let i = groupStart.value; i < (row.path || []).length; i++) parts.push(keyAt(row, i))
+  return parts.join('\u0001') || '__none__'
+}
+const groupLabelOf = (row) => {
+  const parts = []
+  for (let i = groupStart.value; i < (row.path || []).length; i++) parts.push(labelAt(row, i))
+  return parts.join(' / ') || '其他'
+}
+
+const tabs = computed(() => {
+  if (tabLevel.value < 0) return []
+  const seen = new Map()
+  for (const r of rows.value) {
+    const k = keyAt(r, tabLevel.value)
+    if (!seen.has(k)) seen.set(k, { key: k, label: labelAt(r, tabLevel.value) })
+  }
+  return Array.from(seen.values())
+})
+const tabList = computed(() => tabs.value.map(t => ({ name: t.label })))
+const activeTab = computed(() => tabs.value[tabIdx.value] || null)
+
+const rowsInTab = computed(() => {
+  if (tabLevel.value < 0) return rows.value
+  const t = activeTab.value
+  if (!t) return []
+  return rows.value.filter(r => keyAt(r, tabLevel.value) === t.key)
+})
+
+const sides = computed(() => {
+  if (sideLevel.value < 0) return []
+  const seen = new Map()
+  for (const r of rowsInTab.value) {
+    const k = keyAt(r, sideLevel.value)
+    if (!seen.has(k)) seen.set(k, { key: k, label: labelAt(r, sideLevel.value), count: 0 })
+  }
+  const list = Array.from(seen.values())
+  // 已选数量角标：已选项的勾选框在别的 tab/侧栏时是卸载状态，只能靠角标让用户知道选过什么
+  for (const side of list) {
+    side.count = draftSelected.value.filter(v => {
+      const row = rows.value.find(r => String(r.value) === v)
+      return row ? keyAt(row, sideLevel.value) === side.key : false
+    }).length
+  }
+  return list
+})
+const activeSide = computed(() => sides.value[sideIdx.value] || null)
+
+const rowsInSide = computed(() => {
+  if (sideLevel.value < 0) return rowsInTab.value
+  const s = activeSide.value
+  if (!s) return []
+  return rowsInTab.value.filter(r => keyAt(r, sideLevel.value) === s.key)
+})
+
+const isSearching = computed(() => keyword.value.trim() !== '')
+const searchedRows = computed(() => {
+  const kw = keyword.value.trim().toLowerCase()
+  if (!kw) return []
+  return rows.value.filter(r => String(r.label || '').toLowerCase().indexOf(kw) > -1)
+})
+
+const visibleGroups = computed(() => {
+  if (isSearching.value) {
+    return searchedRows.value.length
+      ? [{ key: '__search__', label: `搜索结果（${searchedRows.value.length}）`, rows: searchedRows.value }]
+      : []
+  }
+  const out = []
+  const seen = new Map()
+  for (const r of rowsInSide.value) {
+    const k = groupKeyOf(r)
+    if (!seen.has(k)) {
+      const g = { key: k, label: groupLabelOf(r), rows: [] }
+      seen.set(k, g)
+      out.push(g)
+    }
+    seen.get(k).rows.push(r)
+  }
+  return out
+})
+
+// 切 tab/侧栏时换 key 让 scroll-view 重建，把滚动位置带回顶部
+const listKey = computed(() => `${tabIdx.value}|${sideIdx.value}`)
+const breadcrumb = (row) =>
+  isSearching.value ? (row.path || []).map(n => n.label || n.key).join(' / ') : ''
+
+// ========== 选中态 ==========
+const isSelected = (row) => {
+  const v = String(row.value)
+  return props.multiple ? draftSelected.value.indexOf(v) > -1 : draftValue.value === v
+}
+// 到上限后禁用未选中项（同页面 isOptionLocked 的口径：不回写截断，只挡新增）
+const isLocked = (row) => {
+  if (!props.multiple) return false
+  const max = props.maxCount
+  if (max === Infinity || max === undefined || max === null) return false
+  return draftSelected.value.length >= max && !isSelected(row)
+}
+const hintText = computed(() => {
+  const max = props.maxCount
+  const n = draftSelected.value.length
+  if (max === Infinity || max === undefined || max === null) return n ? `已选 ${n}` : ''
+  return `已选 ${n}/${max}`
+})
+const confirmText = computed(() =>
+  draftSelected.value.length ? `确定（${draftSelected.value.length}）` : '确定'
+)
+
+// ========== 交互 ==========
+const onTabChange = () => {
+  // v-model:current 已写好 tabIdx，这里只把侧栏带回第一项
+  sideIdx.value = 0
+}
+const switchSide = (idx) => {
+  sideIdx.value = idx
+}
+
+const onRowClick = (row) => {
+  const v = String(row.value)
+  if (props.multiple) {
+    if (isLocked(row)) {
+      uni.showToast({ title: `最多选择 ${props.maxCount} 项`, icon: 'none' })
+      return
+    }
+    const i = draftSelected.value.indexOf(v)
+    if (i > -1) {
+      draftSelected.value.splice(i, 1)
+    } else {
+      draftSelected.value.push(v)
+    }
+    return
+  }
+  // 单选：点行即确认并关闭，与底部 actionSheet 的即时选中语义一致
+  draftValue.value = v
+  handleConfirm()
+}
+
+const handleConfirm = () => {
+  const sel = props.multiple
+    ? rows.value.filter(r => draftSelected.value.indexOf(String(r.value)) > -1)
+    : rows.value.filter(r => String(r.value) === draftValue.value)
+  const labels = sel.map(r => r.label)
+  let labelText = ''
+  if (props.multiple) {
+    const joined = labels.join('、')
+    labelText = joined.length > 30 ? `已选 ${labels.length} 项` : joined
+  } else {
+    labelText = labels[0] || ''
+  }
+  const quantities = {}
+  if (props.needQuantity) {
+    sel.forEach(r => {
+      const raw = draftQty[String(r.value)]
+      if (raw !== '' && raw !== null && raw !== undefined) {
+        quantities[String(r.value)] = raw
+      }
+    })
+  }
+  emit('confirm', {
+    values: props.multiple ? draftSelected.value.slice() : draftValue.value,
+    labelText,
+    quantities
+  })
+  emit('update:show', false)
+}
+
+const handleClose = () => {
+  emit('update:show', false)
+}
+
+// 每次打开用页面当前值重置 draft，并定位到第一个已选项所在的分区
+const resetPosition = () => {
+  tabIdx.value = 0
+  sideIdx.value = 0
+  const sel = props.multiple ? draftSelected.value : draftValue.value ? [draftValue.value] : []
+  if (!sel.length) return
+  const first = rows.value.find(r => sel.indexOf(String(r.value)) > -1)
+  if (!first) return
+  if (tabLevel.value >= 0) {
+    const i = tabs.value.findIndex(t => t.key === keyAt(first, tabLevel.value))
+    if (i > -1) tabIdx.value = i
+  }
+  if (sideLevel.value >= 0) {
+    const i = sides.value.findIndex(s => s.key === keyAt(first, sideLevel.value))
+    if (i > -1) sideIdx.value = i
+  }
+}
+
+watch(
+  () => props.show,
+  (val) => {
+    if (!val) return
+    keyword.value = ''
+    draftSelected.value = props.multiple && Array.isArray(props.value) ? props.value.map(v => String(v)) : []
+    draftValue.value = !props.multiple && props.value !== null && props.value !== undefined ? String(props.value) : ''
+    // 先清空再灌入：reactive 对象上直接 Object.assign 会把上次打开残留的键留下
+    Object.keys(draftQty).forEach(k => delete draftQty[k])
+    Object.assign(draftQty, props.quantities || {})
+    resetPosition()
+  }
+)
+</script>
+
+<style scoped lang="scss">
+.gp-wrap {
+  display: flex;
+  flex-direction: column;
+}
+
+.gp-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  padding: 30rpx 30rpx 0;
+}
+
+.gp-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #303133;
+}
+
+.gp-hint {
+  font-size: 24rpx;
+  color: #909399;
+}
+
+.gp-search {
+  padding: 20rpx 30rpx 10rpx;
+}
+
+.gp-body {
+  display: flex;
+  height: 700rpx;
+  border-top: 1rpx solid #f2f3f5;
+}
+
+/* 侧栏 */
+.gp-side {
+  width: 200rpx;
+  height: 100%;
+  background: #f7f8fa;
+}
+
+.gp-side-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 88rpx;
+  padding: 0 12rpx;
+  font-size: 26rpx;
+  color: #606266;
+  text-align: center;
+
+  &.is-active {
+    background: #ffffff;
+    color: #2979ff;
+    font-weight: 600;
+    border-left: 6rpx solid #2979ff;
+  }
+}
+
+.gp-side-text {
+  font-size: 26rpx;
+}
+
+.gp-side-badge {
+  position: absolute;
+  top: 8rpx;
+  right: 8rpx;
+  min-width: 28rpx;
+  height: 28rpx;
+  padding: 0 6rpx;
+  border-radius: 14rpx;
+  background: #2979ff;
+  color: #ffffff;
+  font-size: 20rpx;
+  line-height: 28rpx;
+  text-align: center;
+}
+
+/* 右侧列表 */
+.gp-list {
+  flex: 1;
+  height: 100%;
+}
+
+.gp-group-title {
+  /* 吸顶：小程序 webview 下生效；skyline 不支持时会静默退化为普通标题，不影响可用性 */
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  padding: 14rpx 24rpx;
+  background: #f2f3f5;
+  font-size: 24rpx;
+  color: #909399;
+}
+
+.gp-row {
+  display: flex;
+  align-items: center;
+  padding: 22rpx 24rpx;
+  border-bottom: 1rpx solid #f2f3f5;
+
+  &.is-locked {
+    opacity: 0.4;
+  }
+}
+
+.gp-check {
+  flex-shrink: 0;
+  width: 36rpx;
+  height: 36rpx;
+  margin-right: 18rpx;
+  border: 2rpx solid #c8c9cc;
+  border-radius: 6rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &.is-checked {
+    background: #2979ff;
+    border-color: #2979ff;
+  }
+}
+
+.gp-check-mark {
+  color: #ffffff;
+  font-size: 24rpx;
+  line-height: 1;
+}
+
+.gp-row-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.gp-row-label {
+  font-size: 28rpx;
+  color: #303133;
+}
+
+.gp-row-crumb {
+  margin-top: 4rpx;
+  font-size: 22rpx;
+  color: #909399;
+}
+
+.gp-row-qty {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  margin-left: 12rpx;
+}
+
+.gp-row-unit {
+  margin-left: 8rpx;
+  font-size: 24rpx;
+  color: #909399;
+}
+
+.gp-empty {
+  padding: 60rpx 0;
+  font-size: 26rpx;
+  color: #c0c4cc;
+  text-align: center;
+}
+
+.gp-actions {
+  display: flex;
+  align-items: center;
+  border-top: 1rpx solid #f2f3f5;
+}
+
+.gp-action-item {
+  flex: 1;
+  padding: 20rpx;
+}
+</style>
@@ -17,6 +17,14 @@
             <!-- 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]">
@@ -120,6 +128,12 @@
     <!-- 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" :unit="groupPicker.unit" @update:show="groupPicker.show = $event"
+      @confirm="onGroupedConfirm"></grouped-picker>
   </view>
 </template>
  
@@ -178,6 +192,20 @@ export default {
         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,
+        unit: ''
       }
     }
   },
@@ -224,10 +252,14 @@ export default {
     },
     /**
      * 点击表单项时按类型决定弹出哪个选择器：
-     * 3 枚举(单选) / 9 关联记录 → 底部 actionSheet；11 地理位置 → 微信地图选点
+     * 分层选项(带 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) {
@@ -241,6 +273,51 @@ export default {
       }
     },
     /**
+     * 是否为「分层选项」字段：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.unit = item.unit || ''
+      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) {
@@ -343,7 +420,7 @@ export default {
           // 由后端按 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) }))
+              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 getMaterialsByCode({
@@ -365,7 +442,8 @@ export default {
                 workTypeId,
                 fieldCode: field.fieldCode
               })
-              field.selectOptions = (optRes || []).map(opt => ({ label: opt.label, value: String(opt.value) }))
+              // path 后端仅在 SQL 来源按 gN_key/gN_label 别名产出；透传后由 isGroupedField 判定是否走分层弹层
+              field.selectOptions = (optRes || []).map(opt => ({ label: opt.label, value: String(opt.value), path: opt.path }))
             }
           }
           // 数量收集初始化（必须在 selectOptions 装载之后）：