JCSS / jcss-miniprogram

  <template>

    <!-- 分层选项选择器（样式按墨刀原型）：顶部 tab → 左侧竖排侧栏 → 右侧列表（第 3 层起做吸顶分组）
         层级映射按原型两张屏反推：侧栏永远是「最后一层」，tab 只在有第 2 层时才出现。
         path 只有 1 层 → 只有侧栏（原型「植物」屏：乔木/灌木/竹类… 纯侧栏，没有 tab）；
         path 有 2 层 → tab + 侧栏 + 平铺列表（原型「工具」屏：手工工具/电动工具/机械工具 → 剪切工具… → 太平剪）；
         配到 g3 → 再多一层吸顶分组标题（物料 类型→类别→明细→物料 折出来的形态）。
         选择控件按原型：多选+数量时右侧是步进器（未选一个「+」，已选「− n +」，减到 1 再减即取消），
         不放勾选框；按钮是小白底圆角方框 + 浅灰描边（加减同款，不是圆形、不是灰底）。

         行的勾选态由本组件的 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="false"
      @close="handleClose">

      <view class="gp-wrap">

        <!-- 搜索：命中时跳过分组、对全量过滤，避免「切在某个 tab 里搜不到其它 tab 的项」 -->
        <view class="gp-search">

          <up-input v-model="keyword" :placeholder="`请输入${title || ''}名称`" clearable border="surround"
            shape="square"></up-input>

        </view>
  

        <!-- 第 1 层：顶部 tab。原型是 3 个 tab 均分，所以 ≤4 个时不滚动（均分），
             真实物料有 6 个 material_type，均分会把长名字挤掉，这时才转成横向滚动 -->
        <up-tabs v-if="!isSearching && tabList.length > 1" :list="tabList" :scrollable="tabScrollable"
          v-model:current="tabIdx" @change="onTabChange" :lineWidth="30" :lineHeight="4"
          activeColor="#2979ff" lineColor="#2979ff" inactiveColor="#606266"></up-tabs>

  
        <view class="gp-body">

          <!-- 最后一层：左侧竖排侧栏（1 层字段时它就是唯一的一层，此时上面没有 tab） -->

          <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 层起才按更深层做分组标题，1/2 层数据就是一条平铺列表 -->

          <scroll-view scroll-y class="gp-list" :key="listKey">
            <view v-for="group in visibleGroups" :key="group.key" class="gp-group">

              <!-- 只有第 3 层起才有分组标题；1/2 层的字段这里是空标签，退化成一条平铺列表 -->
              <view v-if="group.label" 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-row-main">
                  <text class="gp-row-label">{{ row.label }}</text>
                  <!-- 搜索态下补层级面包屑，否则不知道命中的项属于哪个分组 -->
                  <text v-if="breadcrumb(row)" class="gp-row-crumb">{{ breadcrumb(row) }}</text>
                </view>

                <!-- 多选 + 数量（原型形态）：右侧步进器表达选中态 —— 未选只有一个「+」，
                     点了就选中并置 1；已选是「− n +」，减到 1 再减即取消选择 -->
                <view v-if="needQuantity" class="gp-qty" @click.stop>
                  <view v-if="!isSelected(row)" class="gp-qty-btn is-plus"
                    :class="{ 'is-disabled': isLocked(row) }" @click="onPlus(row)">
                    <up-icon name="plus" size="12" color="#606266"></up-icon>
                  </view>
                  <template v-else>
                    <view class="gp-qty-btn is-minus" @click="onMinus(row)">
                      <up-icon name="minus" size="12" color="#606266"></up-icon>
                    </view>
                    <text class="gp-qty-num">{{ qtyOf(row) }}</text>
                    <view class="gp-qty-btn is-plus" @click="onPlus(row)">
                      <up-icon name="plus" size="12" color="#606266"></up-icon>
                    </view>
                  </template>
                </view>
                <!-- 多选无数值：原型没覆盖这种，保留自绘勾选框 -->
                <view v-else-if="multiple" class="gp-check" :class="{ 'is-checked': isSelected(row) }">
                  <text v-if="isSelected(row)" class="gp-check-mark">✓</text>
                </view>
                <!-- 单选：原型没覆盖，右侧给一个选中标记 -->
                <view v-else class="gp-radio">
                  <up-icon v-if="isSelected(row)" name="checkmark" size="16" color="#2979ff"></up-icon>

                </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" :class="{ 'is-cancel': multiple }">

            <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: () => ({}) }

  })
  
  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：模板里要按动态键读写（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))

  // 层级→用途映射（按墨刀原型两张屏反推）：**侧栏永远吃最后一层**，tab 只在有第 2 层时才出现。
  // 1 层 → 只有侧栏（原型「植物」屏：乔木/灌木/竹类… 没有 tab）；
  // 2 层 → tab + 侧栏 + 平铺列表（原型「工具」屏：手工工具/电动工具/机械工具 → 剪切工具… → 太平剪）；
  // 3 层 → tab + 侧栏 + 吸顶分组标题（物料 类型→类别→明细→物料 折出来的形态）。

  const tabLevel = computed(() => (depth.value >= 2 ? 0 : -1))

  const sideLevel = computed(() => (depth.value >= 2 ? 1 : depth.value === 1 ? 0 : -1))
  // 从第 3 层（下标 2）开始才是分组标题
  const GROUP_START = 2
  // 没有更深的层级就不分组、也不显示分组标题
  const hasGroupTitle = computed(() => depth.value > GROUP_START)
  // tab 多了就横向滚动：原型 3 个 tab 均分铺满，6 个 material_type 均分会挤掉长名字
  const tabScrollable = computed(() => tabList.value.length > 4)

  
  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 = GROUP_START; i < (row.path || []).length; i++) parts.push(keyAt(row, i))

    return parts.join('\u0001') || '__none__'
  }
  const groupLabelOf = (row) => {
    const parts = []

    for (let i = GROUP_START; 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 }]
        : []
    }

    // 1/2 层数据（原型形态：侧栏刚好是最外层/最后一层）没有第 3 层可用，
    // 整段平铺、不出分组标题
    if (!hasGroupTitle.value) {
      return rowsInSide.value.length ? [{ key: '__all__', label: '', rows: rowsInSide.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 qtyOf = (row) => {
    const n = Number(draftQty[String(row.value)])
    return !isNaN(n) && n >= 1 ? n : 1
  }
  const deselect = (v) => {
    const i = draftSelected.value.indexOf(v)
    if (i > -1) draftSelected.value.splice(i, 1)
    delete draftQty[v]
  }
  // 「+」：未选先选中并置 1，已选则 +1
  const onPlus = (row) => {
    if (isLocked(row)) {
      uni.showToast({ title: `最多选择 ${props.maxCount} 项`, icon: 'none' })
      return
    }
    const v = String(row.value)
    if (!isSelected(row)) {
      draftSelected.value.push(v)
      draftQty[v] = 1
      return
    }
    draftQty[v] = qtyOf(row) + 1
  }
  // 「−」：减到 1 再减就是取消选择 —— 没有勾选框后，这是唯一的取消入口
  const onMinus = (row) => {
    const v = String(row.value)
    const cur = qtyOf(row)
    if (cur <= 1) {
      deselect(v)
      return
    }
    draftQty[v] = cur - 1
  }
  
  // 已选数放在确定按钮上（原型顶部没有标题条，不另占一行）
  const confirmText = computed(() => {

    const n = draftSelected.value.length

    const max = props.maxCount
    if (max === Infinity || max === undefined || max === null) return n ? `确定（${n}）` : '确定'
    return `确定（${n}/${max}）`

  })

  
  // ========== 交互 ==========
  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) {

      // 整行点击也能选（不必非要点中那个「+」），选中就默认数量 1。
      // 带数量的字段点整行「取消」要禁用：取消统一走「−」，否则误点一下就把加好的数量清了
      if (isSelected(row)) {
        if (!props.needQuantity) deselect(v)
        return
      }

      if (isLocked(row)) {
        uni.showToast({ title: `最多选择 ${props.maxCount} 项`, icon: 'none' })
        return
      }

      draftSelected.value.push(v)
      if (props.needQuantity && !draftQty[v]) draftQty[v] = 1

      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) {

      // 选中行的数量恒为 ≥1 的整数（步进器保证），不再存在「已选但数量为 0」的行
      sel.forEach(r => { quantities[String(r.value)] = qtyOf(r) })

    }
    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-search {

    padding: 24rpx 24rpx 16rpx;

  }
  
  .gp-body {
    display: flex;
    height: 700rpx;
    border-top: 1rpx solid #f2f3f5;
  }
  
  /* 侧栏 */
  .gp-side {

    width: 180rpx;

    height: 100%;
    background: #f7f8fa;
  }
  
  .gp-side-item {
    position: relative;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 96rpx;

    padding: 0 12rpx;

    font-size: 28rpx;

    color: #606266;
    text-align: center;
  

    /* 原型：选中项是一张白色圆角卡片铺满侧栏宽度，文字仍是深色（不变蓝、不加左侧竖条） */

    &.is-active {

      margin-right: 8rpx;
      border-radius: 12rpx;

      background: #ffffff;

      color: #303133;

      font-weight: 600;

    }
  }
  
  .gp-side-text {

    font-size: 28rpx;

  }
  
  .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 {

    box-sizing: border-box;

    display: flex;
    align-items: center;

    min-height: 100rpx;
    padding: 0 24rpx;
    /* 原型行之间是纯留白、没有分隔线 */

    &.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;
  }
  

  /* 数量步进器（原型形态）：未选只有一个「+」，选中后是「− n +」 */
  .gp-qty {

    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-left: 12rpx;
  }
  

  .gp-qty-btn {
    box-sizing: border-box;
    width: 44rpx;
    height: 44rpx;
    /* 原型：小圆角方框 + 浅灰描边 + 白底，「+」「−」同款 */
    border: 1rpx solid #dcdfe6;
    border-radius: 8rpx;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
  
    &.is-disabled {
      opacity: 0.4;
    }
  }
  
  .gp-qty-num {
    min-width: 72rpx;
    font-size: 28rpx;
    color: #303133;
    text-align: center;
  }
  
  /* 单选（原型未覆盖）：右侧只留一个选中标记，同样不放勾选框 */
  .gp-radio {
    flex-shrink: 0;
    width: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;

  }
  
  .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;
  }

  
  /* 有确定按钮时把取消收窄：两边等分的话「确定（3/10）」会超出按钮宽度被裁掉（真机已复现） */
  .gp-action-item.is-cancel {
    flex: 0 0 200rpx;
  }

  </style>