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，均分会把长名字挤掉，这时才转成横向滚动 -->
         <!-- 第1层：顶部 tab。原型是 3 个 tab 均分，所以 ≤4 个时不滚动（均分），
           真实物料有 6 个 material_type，均分会把长名字挤掉，这时才转成横向滚动 -->
<!-- 删掉 ref="tabWrapRef"，width 绑定 props.containerWidth -->
<view :style="{ width: containerWidth + 'px' }">
  <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>


            

      <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 v-if="multiple" class="gp-check" :class="{ 'is-checked': isSelected(row) }"
                @click.stop="onToggle(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>
              <!-- 多选 + 数量（原型形态）：右侧步进器 —— 未选只有一个「+」，
                   点了就选中并置 1；已选是「− n +」，减到 1 再减即取消选择 -->
              <view v-if="multiple && 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-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: () => ({}) },
  // 新增：父页面传入宽度(px)，兜底默认 750
  containerWidth: {
    type: Number,
    default: 750
  }
})

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 起
const onToggle = (row) => {
  const v = String(row.value)
  if (isSelected(row)) {
    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
}
// 「+」：未选先选中并置 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) && props.needQuantity) return
    onToggle(row)
    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;
  }
}

/* 多选勾选框（自绘，不用 u-checkbox —— 见文件头注释的幽灵勾选坑）。
   原型弹层里没有勾选框，是按要求保留的，不要照着原型删掉 */
.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>