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

王彪总
1 parent 629df8b3
Showing 2 changed files with 171 additions and 91 deletions
components/grouped-picker/grouped-picker.vue
pages-sub/daily/maintain-manage/add-record.vue
 <template>
-  <!-- 分层选项选择器：顶部 tab → 左侧竖排侧栏 → 右侧列表（第 3 层做分组标题）
+  <!-- 分层选项选择器（样式按墨刀原型）：顶部 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="true"
-    close-icon-color="#999999" @close="handleClose">
+  <up-popup :show="show" mode="bottom" :round="16" :safe-area-inset-bottom="true" :closeable="false"
+    @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>
+        <up-input v-model="keyword" :placeholder="`请输入${title || ''}名称`" clearable border="surround"
+          shape="square"></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>
+      <!-- 第 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">
-        <!-- 第 2 层：左侧竖排侧栏 -->
+        <!-- 最后一层：左侧竖排侧栏（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)">
@@ -33,23 +35,42 @@
           </view>
         </scroll-view>
-        <!-- 第 3 层及更深：右侧列表，按最深可用层做分组标题 -->
+        <!-- 叶子列表：第 3 层起才按更深层做分组标题，1/2 层数据就是一条平铺列表 -->
         <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>
+            <!-- 只有第 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-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>
+              <!-- 多选 + 数量（原型形态）：右侧步进器表达选中态 —— 未选只有一个「+」，
+                   点了就选中并置 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>
@@ -58,7 +79,7 @@
       </view>
       <view class="gp-actions">
-        <view class="gp-action-item">
+        <view class="gp-action-item" :class="{ 'is-cancel': multiple }">
           <up-button type="default" text="取消" @click="handleClose"></up-button>
         </view>
         <!-- 单选点行即提交，无需确定；多选才给确定按钮 -->
@@ -86,8 +107,7 @@ const props = defineProps({
   // 单选传字符串、多选传数组
   value: { type: [String, Array], default: '' },
   // { 选项值: 数量 }
-  quantities: { type: Object, default: () => ({}) },
-  unit: { type: String, default: '' }
+  quantities: { type: Object, default: () => ({}) }
 })
 const emit = defineEmits(['update:show', 'confirm'])
@@ -99,7 +119,7 @@ const tabIdx = ref(0)
 const sideIdx = ref(0)
 const draftSelected = ref([])
 const draftValue = ref('')
-// 数量表用 reactive 而非 ref：模板里要 v-model 到动态键（draftQty[row.value]），
+// 数量表用 reactive 而非 ref：模板里要按动态键读写（draftQty[row.value]），
 // reactive 直接写属性即可，不依赖编译器把 ref 改写成 .value[key]（本仓无法本地构建，不赌这个）
 const draftQty = reactive({})
@@ -109,14 +129,18 @@ const rows = computed(() =&gt;
 )
 // 层数按「行里 path 的最大长度」定，兼容同一个字段里长短不一的行
 const depth = computed(() => rows.value.reduce((m, r) => Math.max(m, (r.path || []).length), 0))
-// 层级→用途映射：>=3 层才有侧栏；2 层只用 tab；1 层直接平铺（带该层名分组）
+// 层级→用途映射（按墨刀原型两张屏反推）：**侧栏永远吃最后一层**，tab 只在有第 2 层时才出现。
+// 1 层 → 只有侧栏（原型「植物」屏：乔木/灌木/竹类… 没有 tab）；
+// 2 层 → tab + 侧栏 + 平铺列表（原型「工具」屏：手工工具/电动工具/机械工具 → 剪切工具… → 太平剪）；
+// 3 层 → tab + 侧栏 + 吸顶分组标题（物料 类型→类别→明细→物料 折出来的形态）。
 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 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
@@ -133,12 +157,12 @@ const labelAt = (row, i) =&gt; {
 // 分组键用 \u0001 连接（层级值里不会出现该字符），分组名用 ' / ' 连接更深层
 const groupKeyOf = (row) => {
   const parts = []
-  for (let i = groupStart.value; i < (row.path || []).length; i++) parts.push(keyAt(row, i))
+  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 = groupStart.value; i < (row.path || []).length; i++) parts.push(labelAt(row, i))
+  for (let i = GROUP_START; i < (row.path || []).length; i++) parts.push(labelAt(row, i))
   return parts.join(' / ') || '其他'
 }
@@ -169,7 +193,8 @@ const sides = computed(() =&gt; {
     if (!seen.has(k)) seen.set(k, { key: k, label: labelAt(r, sideLevel.value), count: 0 })
   }
   const list = Array.from(seen.values())
-  // 已选数量角标：已选项的勾选框在别的 tab/侧栏时是卸载状态，只能靠角标让用户知道选过什么
+  // 已选数量角标：已选项不在当前 tab/侧栏时整行是卸载状态，只能靠角标让用户知道选过什么
+  //（原型没有角标，可不带它选中的项就完全看不见了，所以保留）
   for (const side of list) {
     side.count = draftSelected.value.filter(v => {
       const row = rows.value.find(r => String(r.value) === v)
@@ -200,6 +225,11 @@ const visibleGroups = computed(() =&gt; {
       ? [{ 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) {
@@ -231,15 +261,48 @@ const isLocked = (row) =&gt; {
   if (max === Infinity || max === undefined || max === null) return false
   return draftSelected.value.length >= max && !isSelected(row)
 }
-const hintText = computed(() => {
-  const max = props.maxCount
+// ========== 数量（原型形态：选中态与数量都由这一个步进器表达） ==========
+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
-  if (max === Infinity || max === undefined || max === null) return n ? `已选 ${n}` : ''
-  return `已选 ${n}/${max}`
+  const max = props.maxCount
+  if (max === Infinity || max === undefined || max === null) return n ? `确定（${n}）` : '确定'
+  return `确定（${n}/${max}）`
 })
-const confirmText = computed(() =>
-  draftSelected.value.length ? `确定（${draftSelected.value.length}）` : '确定'
-)
 // ========== 交互 ==========
 const onTabChange = () => {
@@ -253,16 +316,18 @@ const switchSide = (idx) =&gt; {
 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
     }
-    const i = draftSelected.value.indexOf(v)
-    if (i > -1) {
-      draftSelected.value.splice(i, 1)
-    } else {
-      draftSelected.value.push(v)
-    }
+    draftSelected.value.push(v)
+    if (props.needQuantity && !draftQty[v]) draftQty[v] = 1
     return
   }
   // 单选：点行即确认并关闭，与底部 actionSheet 的即时选中语义一致
@@ -284,12 +349,8 @@ const handleConfirm = () =&gt; {
   }
   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
-      }
-    })
+    // 选中行的数量恒为 ≥1 的整数（步进器保证），不再存在「已选但数量为 0」的行
+    sel.forEach(r => { quantities[String(r.value)] = qtyOf(r) })
   }
   emit('confirm', {
     values: props.multiple ? draftSelected.value.slice() : draftValue.value,
@@ -342,26 +403,8 @@ watch(
   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;
+  padding: 24rpx 24rpx 16rpx;
 }
 .gp-body {
@@ -372,32 +415,35 @@ watch(
 /* 侧栏 */
 .gp-side {
-  width: 200rpx;
+  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: 88rpx;
+  min-height: 96rpx;
   padding: 0 12rpx;
-  font-size: 26rpx;
+  font-size: 28rpx;
   color: #606266;
   text-align: center;
+  /* 原型：选中项是一张白色圆角卡片铺满侧栏宽度，文字仍是深色（不变蓝、不加左侧竖条） */
   &.is-active {
+    margin-right: 8rpx;
+    border-radius: 12rpx;
     background: #ffffff;
-    color: #2979ff;
+    color: #303133;
     font-weight: 600;
-    border-left: 6rpx solid #2979ff;
   }
 }
 .gp-side-text {
-  font-size: 26rpx;
+  font-size: 28rpx;
 }
 .gp-side-badge {
@@ -433,11 +479,12 @@ watch(
 }
 .gp-row {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
-  padding: 22rpx 24rpx;
-  border-bottom: 1rpx solid #f2f3f5;
-
+  min-height: 100rpx;
+  padding: 0 24rpx;
+  /* 原型行之间是纯留白、没有分隔线 */
   &.is-locked {
     opacity: 0.4;
   }
@@ -484,17 +531,45 @@ watch(
   color: #909399;
 }
-.gp-row-qty {
+/* 数量步进器（原型形态）：未选只有一个「+」，选中后是「− n +」 */
+.gp-qty {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   margin-left: 12rpx;
 }
-.gp-row-unit {
-  margin-left: 8rpx;
-  font-size: 24rpx;
-  color: #909399;
+.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 {
@@ -514,4 +589,9 @@ watch(
   flex: 1;
   padding: 20rpx;
 }
+
+/* 有确定按钮时把取消收窄：两边等分的话「确定（3/10）」会超出按钮宽度被裁掉（真机已复现） */
+.gp-action-item.is-cancel {
+  flex: 0 0 200rpx;
+}
 </style>
@@ -132,7 +132,7 @@
     <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"
+                    :quantities="groupPicker.quantities" @update:show="groupPicker.show = $event"
                     @confirm="onGroupedConfirm"></grouped-picker>
   </view>
 </template>
@@ -205,6 +205,7 @@ export default {
         needQuantity: false,
         value: '' as any,
         quantities: {} as any,
+        // 数量单位不再传进弹层（原型列表行右侧只有步进器，没有单位），页面行内仍显示 item.unit
         unit: ''
       }
     }
@@ -299,7 +300,6 @@ export default {
       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
     },
     /**