三级联动

刘淇
1 parent 53e7aa96
Showing 2 changed files with 93 additions and 28 deletions
components/grouped-picker/grouped-picker.vue
pages-sub/daily/maintain-manage/add-record.vue
@@ -23,9 +23,27 @@
  
       <!-- 第 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>
+         <!-- 第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） -->
@@ -111,7 +129,12 @@ const props = defineProps({
   // 单选传字符串、多选传数组
   value: { type: [String, Array], default: '' },
   // { 选项值: 数量 }
-  quantities: { type: Object, default: () => ({}) }
+  quantities: { type: Object, default: () => ({}) },
+  // 新增：父页面传入宽度(px)，兜底默认 750
+  containerWidth: {
+    type: Number,
+    default: 750
+  }
 })
  
 const emit = defineEmits(['update:show', 'confirm'])
 <template>
   <view class="page-container">
-    <view class="inspect-form-content commonPageLRpadding">
+    <view class="inspect-form-content commonPageLRpadding" ref="formContentRef">
       <up-form label-position="left" :model="inspectForm" ref="inspectFormRef" label-width="140rpx">
         <!-- ========== 动态表单区域 ========== -->
         <template v-for="item in dynamicFields" :key="item.fieldCode">
@@ -66,10 +66,24 @@
               </view>
             </view>
             <!-- type7 图片：多张上传，提交 JSON 数组(URL) -->
-            <up-upload v-else-if="item.fieldType === 7" :file-list="fileListMap[item.fieldCode] || []"
-                       @after-read="(event) => uploadFieldFiles(item, event)" @delete="(event) => deleteFieldFile(item, event)"
-                       multiple :max-count="pickCountOf(item, 5)" upload-text="选择图片" del-color="#ff4d4f"
-                       class="upload-wrap"></up-upload>
+        <!-- type7 图片：多张上传，提交 JSON 数组(URL) -->
+<!-- type7 图片：多张上传，提交 JSON 数组(URL)【对齐工单上传组件】 -->
+<up-upload 
+  v-else-if="item.fieldType === 7" 
+  :file-list="fileListMap[item.fieldCode] || []"
+  @after-read="(event) => uploadFieldFiles(item, event)" 
+  @delete="(event) => deleteFieldFile(item, event)"
+  multiple 
+  width="70"
+  height="70"
+  :sizeType="['compressed']"
+  :max-count="pickCountOf(item, 5)" 
+  upload-text="选择图片" 
+  del-color="#ff4d4f"
+  class="upload-wrap"
+></up-upload>
+
+
             <!-- type8 附件：微信只能从聊天记录选文件（无通用文件选择器），提交 JSON 数组(URL) -->
             <view v-else-if="item.fieldType === 8" class="file-wrap">
               <view v-for="(file, idx) in fileListMap[item.fieldCode] || []" :key="idx" class="file-row">
@@ -106,15 +120,15 @@
         </template>
         <!-- ========== 动态表单结束 ========== -->
         <!-- 1. 养护描述（文本域） -->
-        <up-form-item prop="remark" class="form-item">
+        <!-- <up-form-item prop="remark" class="form-item">
           <up-textarea v-model.trim="inspectForm.remark" placeholder="请输入养护描述" maxlength="200" count></up-textarea>
-        </up-form-item>
+        </up-form-item> -->
         <!-- 2. 上传图片 -->
-        <up-form-item label="上传图片" prop="images" required class="form-item">
+        <!-- <up-form-item label="上传图片" prop="images" required class="form-item">
           <up-upload :file-list="imagesList" @after-read="(event) => uploadImgs(event)"
                      @delete="(event) => deleteImg(event)" @on-exceed="handleExceed" multiple :max-count="3" upload-text="选择图片"
                      del-color="#ff4d4f" class="upload-wrap"></up-upload>
-        </up-form-item>
+        </up-form-item> -->
       </up-form>
     </view>
     <!-- 底部提交按钮 -->
@@ -132,6 +146,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"
+                    :container-width="groupPicker.containerWidth"
                     :quantities="groupPicker.quantities" @update:show="groupPicker.show = $event"
                     @confirm="onGroupedConfirm"></grouped-picker>
   </view>
@@ -206,7 +221,9 @@ export default {
         value: '' as any,
         quantities: {} as any,
         // 数量单位不再传进弹层（原型列表行右侧只有步进器，没有单位），页面行内仍显示 item.unit
-        unit: ''
+        unit: '',
+        // 新增：由父页面点击时赋值
+  containerWidth: 0
       }
     }
   },
@@ -300,7 +317,15 @@ 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.show = true
+     // ========== 新增：点击打开弹窗瞬间，获取父表单容器宽度 ==========
+  const query = uni.createSelectorQuery().in(this)
+  query.select('.inspect-form-content').boundingClientRect((rect) => {
+    if (rect && rect.width) {
+      // rect.width 单位 px，直接传给子组件
+      this.groupPicker.containerWidth = rect.width
+    }
+    this.groupPicker.show = true
+  }).exec()
     },
     /**
      * 分层弹层确定回调。写入位置与原有两条路径完全一致（inspectForm/labelMap/qtyMap），
@@ -668,15 +693,30 @@ export default {
     /**
      * 7图片 上传（u-upload 的 after-read 回调）
      */
-    uploadFieldFiles(item: any, event: any) {
-      const rawFile = event && event.file
-      const fileList = Array.isArray(rawFile) ? rawFile : [rawFile]
-      return this.uploadToField(item, fileList.filter(file => file && file.url).map(file => ({
-        url: file.url,
-        name: file.name || '',
-        size: file.size
-      })))
-    },
+    /**
+ * 7图片 上传（u-upload 的 after-read 回调）【对齐工单上传逻辑】
+ */
+uploadFieldFiles(item: any, event: any) {
+  console.log('动态图片上传', item.fieldName, event)
+  const rawFile = event && event.file
+  const fileList = Array.isArray(rawFile) ? rawFile : [rawFile]
+  const targetImgList = this.fileListMap[item.fieldCode] || (this.fileListMap[item.fieldCode] = [])
+  const filePaths = fileList.map(file => file.url)
+  const tempItems = fileList.map(item => ({
+    ...item,
+    status: 'uploading',
+    message: '上传中'
+  }))
+  const startIndex = targetImgList.length
+  targetImgList.push(...tempItems)
+
+  this.uploadToField(item, fileList.filter(file => file && file.url).map(file => ({
+    url: file.url,
+    name: file.name || '',
+    size: file.size
+  })))
+},
+
     /**
      * 8附件 选择并上传。
      * 微信小程序没有通用文件选择器，只能从聊天记录里选（uni.chooseMessageFile）
@@ -818,10 +858,12 @@ export default {
           fields.push(row)
         } else if (type === 3) {
           // 3枚举：单选取裸 value；历史「枚举+是否多选」存逗号分隔
-          fields.push({
-            fieldCode: code,
-            valueText: item.multiple === 1 ? (value || []).join(',') : String(value)
-          })
+         fields.push({
+  fieldCode: code,
+  valueText: item.multiple === 1 
+    ? (Array.isArray(value) ? value.join(',') : String(value || '')) 
+    : String(value)
+})
         } else if (type === 6) {
           const selected = (item.selectOptions || []).filter(opt => (value || []).indexOf(opt.value) > -1)
           if (this.needQty(item)) {