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

王彪总
1 parent ecfadea2
Showing 1 changed file with 33 additions and 21 deletions
components/grouped-picker/grouped-picker.vue
@@ -4,8 +4,10 @@
        path 只有 1 层 → 只有侧栏（原型「植物」屏：乔木/灌木/竹类… 纯侧栏，没有 tab）；
        path 有 2 层 → tab + 侧栏 + 平铺列表（原型「工具」屏：手工工具/电动工具/机械工具 → 剪切工具… → 太平剪）；
        配到 g3 → 再多一层吸顶分组标题（物料 类型→类别→明细→物料 折出来的形态）。
-       选择控件按原型：多选+数量时右侧是步进器（未选一个「+」，已选「− n +」，减到 1 再减即取消），
-       不放勾选框；按钮是小白底圆角方框 + 浅灰描边（加减同款，不是圆形、不是灰底）。
+       选择控件：**多选行左侧一律保留勾选框**（勾选框只管选中/取消），
+       带数量的字段右侧再加步进器管件数（未选一个「+」，已选「− n +」，减到 1 再减即取消），
+       按钮是小圆角方框 + 浅灰描边 + 白底，「+」「−」同款。
+       ⚠️ 原型弹层里没有勾选框（只有步进器），勾选框是按要求保留的、属于刻意覆盖原型。
        行的勾选态由本组件的 draft 数据派生，不用 u-checkbox：
        u-checkbox 的勾选态是组件内部状态（u-checkbox.vue:199-221 只在 init 时从父组派生），
        而 u-checkbox-group 是把每个子实例的内部 isChecked 回读成数组（u-checkbox-group.vue:95-112），
@@ -42,14 +44,20 @@
             <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="needQuantity" class="gp-qty" @click.stop>
+              <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>
@@ -64,12 +72,8 @@
                   </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">
+              <view v-else-if="!multiple" class="gp-radio">
                 <up-icon v-if="isSelected(row)" name="checkmark" size="16" color="#2979ff"></up-icon>
               </view>
             </view>
@@ -271,6 +275,20 @@ const deselect = (v) =&gt; {
   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)) {
@@ -316,18 +334,10 @@ 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
-    }
-    draftSelected.value.push(v)
-    if (props.needQuantity && !draftQty[v]) draftQty[v] = 1
+    // 整行点击也能选（不必非要点中勾选框），选中就默认数量 1。
+    // 带数量的字段点整行「取消」要禁用：取消统一走勾选框或「−」，否则误点一下就把加好的数量清了
+    if (isSelected(row) && props.needQuantity) return
+    onToggle(row)
     return
   }
   // 单选：点行即确认并关闭，与底部 actionSheet 的即时选中语义一致
@@ -490,6 +500,8 @@ watch(
   }
 }
+/* 多选勾选框（自绘，不用 u-checkbox —— 见文件头注释的幽灵勾选坑）。
+   原型弹层里没有勾选框，是按要求保留的，不要照着原型删掉 */
 .gp-check {
   flex-shrink: 0;
   width: 36rpx;