✨ feat(mes): 新增 BOM 子物料选择器组件及弹窗

src/views/mes/md/item/components/MdProductBomSelect.vue

@@ -0,0 +1,183 @@
+<!--
+  MES 产品 BOM 子物料选择器：只读输入框 + 点击弹窗选择
+
+  从指定产品的 BOM 子物料中选择（候选范围限定为产品已配好的 BOM 子项）。
+  交互：显示为只读 el-input，点击打开弹窗（单选模式）进行选择
+  Props:
+    modelValue  — 绑定的 BOM 子物料 ID（v-model，对应 bomItemId）
+    itemId      — 父产品 ID（决定 BOM 候选范围）
+    disabled    — 是否禁用
+    clearable   — 是否允许清空（鼠标悬停时显示清除图标）
+    placeholder — 占位文字
+  Events:
+    update:modelValue — v-model 更新
+    change(bom)       — 选中 BOM 变化时触发，传递完整 MdProductBomVO（清空时为 undefined）
+-->
+<template>
+  <div
+    v-bind="attrs"
+    class="w-full"
+    :class="disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
+    @click="handleClick"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+  >
+    <el-tooltip :disabled="!selectedBom" placement="top" :show-after="500">
+      <template #content>
+        <div v-if="selectedBom" class="leading-6">
+          <div>编码：{{ selectedBom.bomItemCode }}</div>
+          <div>名称：{{ selectedBom.bomItemName }}</div>
+          <div>规格：{{ selectedBom.bomItemSpecification || '-' }}</div>
+          <div>单位：{{ selectedBom.unitMeasureName || '-' }}</div>
+          <div>用量比例：{{ selectedBom.quantity }}</div>
+        </div>
+      </template>
+      <el-input
+        :model-value="displayLabel"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        readonly
+        :suffix-icon="suffixIcon"
+        :class="disabled ? 'is-select-disabled' : 'is-select-clickable'"
+      />
+    </el-tooltip>
+  </div>
+  <!-- 弹窗必须放在 div 外部，否则弹窗内的点击事件会冒泡到 div 触发 handleClick -->
+  <MdProductBomSelectDialog ref="dialogRef" @selected="handleSelected" />
+</template>
+
+<script setup lang="ts">
+import { MdProductBomApi, MdProductBomVO } from '@/api/mes/md/item/productBom'
+import { Search, CircleClose } from '@element-plus/icons-vue'
+import MdProductBomSelectDialog from './MdProductBomSelectDialog.vue'
+
+// 组件有两个根节点（div + Dialog），Vue 不会自动继承 attrs；
+// 手动透传到外层 div，确保父组件传入的 class / style 等生效
+const attrs = useAttrs()
+
+defineOptions({ name: 'MdProductBomSelect', inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: number // 绑定的 BOM 子物料 ID（bomItemId）
+    itemId?: number // 父产品 ID（决定 BOM 候选范围）
+    disabled?: boolean // 是否禁用
+    clearable?: boolean // 是否允许清空
+    placeholder?: string // 占位文字
+  }>(),
+  {
+    disabled: false,
+    clearable: true,
+    placeholder: '请选择 BOM 物料'
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number | undefined]
+  change: [bom: MdProductBomVO | undefined]
+}>()
+
+const dialogRef = ref() // 弹窗 Ref
+const hovering = ref(false) // 鼠标是否悬停
+
+// ==================== 名称回显 ====================
+const selectedBom = ref<MdProductBomVO | undefined>() // 当前选中的 BOM 对象
+
+/** 输入框显示文本 */
+const displayLabel = computed(() => {
+  return selectedBom.value?.bomItemName ?? ''
+})
+
+/** 是否显示清除图标 */
+const showClear = computed(() => {
+  return props.clearable && !props.disabled && hovering.value && props.modelValue != null
+})
+
+/** 后缀图标：悬停且有值时显示清除，否则显示搜索 */
+const suffixIcon = computed(() => {
+  return showClear.value ? CircleClose : Search
+})
+
+/** 根据 bomItemId 从 BOM 列表中回显（用于编辑回显） */
+const resolveBomById = async (bomItemId: number | undefined) => {
+  if (bomItemId == null || props.itemId == null) {
+    selectedBom.value = undefined
+    return
+  }
+  if (selectedBom.value?.bomItemId === bomItemId) {
+    return
+  }
+  try {
+    const list = await MdProductBomApi.getProductBomListByItemId(props.itemId)
+    selectedBom.value = list.find((item: MdProductBomVO) => item.bomItemId === bomItemId)
+  } catch (e) {
+    console.error('[MdProductBomSelect] resolveBomById failed:', e)
+  }
+}
+
+/** 监听 modelValue 变化，触发回显 */
+watch(
+  () => props.modelValue,
+  (val) => {
+    resolveBomById(val)
+  },
+  { immediate: true }
+)
+
+/** 监听 itemId 变化，清空选中（产品变了，BOM 候选也变了） */
+watch(
+  () => props.itemId,
+  () => {
+    selectedBom.value = undefined
+    emit('update:modelValue', undefined)
+    emit('change', undefined)
+  }
+)
+
+// ==================== 点击交互 ====================
+
+/** 点击组件：清除或打开弹窗 */
+const handleClick = (e: MouseEvent) => {
+  if (props.disabled) {
+    return
+  }
+  if (props.itemId == null) {
+    return
+  }
+  // 点击清除图标：清空选中
+  const target = e.target as HTMLElement
+  if (showClear.value && target.closest('.el-input__suffix')) {
+    e.stopPropagation()
+    selectedBom.value = undefined
+    emit('update:modelValue', undefined)
+    emit('change', undefined)
+    return
+  }
+  // 打开弹窗
+  dialogRef.value.open(props.itemId, props.modelValue)
+}
+
+/** 弹窗选中回调 */
+const handleSelected = (row: MdProductBomVO) => {
+  selectedBom.value = row
+  emit('update:modelValue', row.bomItemId)
+  emit('change', row)
+}
+</script>
+
+<style lang="scss" scoped>
+/* :deep 用于穿透 el-input 内部元素的 cursor 样式 */
+.is-select-clickable {
+  :deep(.el-input__wrapper),
+  :deep(.el-input__inner) {
+    cursor: pointer;
+  }
+}
+
+.is-select-disabled {
+  :deep(.el-input__wrapper),
+  :deep(.el-input__inner) {
+    cursor: not-allowed;
+  }
+}
+</style>

src/views/mes/md/item/components/MdProductBomSelectDialog.vue

@@ -0,0 +1,143 @@
+<!--
+  MES 产品 BOM 子物料弹窗选择器（单选）
+
+  从指定产品的 BOM 子物料中选择，候选范围限定为该产品已配好的 BOM 子项。
+  Props:
+    （无外部 props，通过 open 方法传参）
+  Events:
+    selected(row: MdProductBomVO) — 确认选择后触发，传递完整 BOM 行
+  Expose:
+    open(itemId: number, selectedBomItemId?: number) — 打开弹窗
+-->
+<template>
+  <Dialog title="产品 BOM 物料选择" v-model="dialogVisible" width="800px">
+    <!-- 数据表格 -->
+    <el-table
+      ref="tableRef"
+      v-loading="loading"
+      :data="list"
+      :stripe="true"
+      :show-overflow-tooltip="true"
+      row-key="bomItemId"
+      highlight-current-row
+      @row-click="handleRowClick"
+      @row-dblclick="handleRowDblClick"
+    >
+      <!-- 单选 radio -->
+      <el-table-column width="50" align="center">
+        <template #default="{ row }">
+          <el-radio
+            v-model="selectedRadioId"
+            :value="row.bomItemId"
+            class="radio-no-label"
+            @change="handleRadioChange(row)"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="物料编码" align="center" prop="bomItemCode" width="160" />
+      <el-table-column label="物料名称" align="left" prop="bomItemName" min-width="150" />
+      <el-table-column label="规格型号" align="left" prop="bomItemSpecification" min-width="120" />
+      <el-table-column label="单位" align="center" prop="unitMeasureName" width="80" />
+      <el-table-column label="物料/产品" align="center" prop="itemOrProduct" width="100">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.MES_MD_ITEM_OR_PRODUCT" :value="scope.row.itemOrProduct" />
+        </template>
+      </el-table-column>
+      <el-table-column label="用量比例" align="center" prop="quantity" width="100" />
+      <el-table-column
+        label="备注"
+        align="center"
+        prop="remark"
+        min-width="120"
+        :show-overflow-tooltip="true"
+      />
+    </el-table>
+    <template #footer>
+      <el-button type="primary" @click="confirmSelect">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { DICT_TYPE } from '@/utils/dict'
+import { MdProductBomApi, MdProductBomVO } from '@/api/mes/md/item/productBom'
+
+defineOptions({ name: 'MdProductBomSelectDialog' })
+
+const message = useMessage()
+const emit = defineEmits<{
+  selected: [row: MdProductBomVO]
+}>()
+
+const dialogVisible = ref(false) // 弹窗是否展示
+const loading = ref(false) // 列表加载中
+const list = ref<MdProductBomVO[]>([]) // BOM 子物料列表
+
+// ==================== 选中状态 ====================
+const tableRef = ref() // 表格 Ref
+const selectedRadioId = ref<number>() // 选中的 bomItemId
+const currentRow = ref<MdProductBomVO>() // 选中的行对象
+
+/** 单选 radio 变化 */
+const handleRadioChange = (row: MdProductBomVO) => {
+  currentRow.value = row
+}
+
+/** 单击行：点击整行即选中 */
+const handleRowClick = (row: MdProductBomVO) => {
+  selectedRadioId.value = row.bomItemId
+  currentRow.value = row
+}
+
+/** 双击行：直接确认 */
+const handleRowDblClick = (row: MdProductBomVO) => {
+  selectedRadioId.value = row.bomItemId
+  currentRow.value = row
+  confirmSelect()
+}
+
+/** 确认选择 */
+const confirmSelect = () => {
+  if (!currentRow.value) {
+    message.warning('请选择一条数据')
+    return
+  }
+  emit('selected', currentRow.value)
+  dialogVisible.value = false
+}
+
+// ==================== 打开弹窗 ====================
+
+/** 打开弹窗 */
+const open = async (itemId: number, selectedBomItemId?: number) => {
+  dialogVisible.value = true
+  // 清空上一次的选中状态
+  selectedRadioId.value = selectedBomItemId
+  currentRow.value = undefined
+  // 加载 BOM 子物料列表
+  loading.value = true
+  try {
+    list.value = await MdProductBomApi.getProductBomListByItemId(itemId)
+    // 恢复预选状态
+    if (selectedBomItemId != null) {
+      const match = list.value.find((row) => row.bomItemId === selectedBomItemId)
+      if (match) {
+        currentRow.value = match
+      }
+    }
+  } finally {
+    loading.value = false
+  }
+}
+defineExpose({ open })
+</script>
+
+<style lang="scss" scoped>
+/* 隐藏 radio 的 label 文字，只保留圆圈 */
+.radio-no-label {
+  :deep(.el-radio__label) {
+    display: none;
+  }
+}
+</style>

src/views/mes/pro/route/RouteProductBomList.vue

@@ -35,7 +35,12 @@
     <Dialog :title="formTitle" v-model="formVisible" width="500px">
       <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px">
         <el-form-item label="BOM 物料" prop="itemId">
-          <MdItemSelect v-model="formData.itemId" placeholder="请选择 BOM 物料" />
+          <MdProductBomSelect
+            v-model="formData.itemId"
+            :itemId="productId"
+            placeholder="请选择 BOM 物料"
+            @change="handleBomItemChange"
+          />
         </el-form-item>
         <el-form-item label="用料比例" prop="quantity">
           <el-input-number
@@ -60,7 +65,8 @@
 <script setup lang="ts">
 import { ProRouteProductBomApi, ProRouteProductBomVO } from '@/api/mes/pro/route/productbom'
 import { ProRouteProcessApi } from '@/api/mes/pro/route/process'
-import MdItemSelect from '@/views/mes/md/item/components/MdItemSelect.vue'
+import MdProductBomSelect from '@/views/mes/md/item/components/MdProductBomSelect.vue'
+import { MdProductBomVO } from '@/api/mes/md/item/productBom'
 
 defineOptions({ name: 'RouteProductBomList' })
 
@@ -139,6 +145,13 @@ const openForm = (type: string, row?: ProRouteProductBomVO) => {
   formRef.value?.resetFields()
 }
 
+/** BOM 物料选中变化：自动回填用量比例 */
+const handleBomItemChange = (bom: MdProductBomVO | undefined) => {
+  if (bom) {
+    formData.value.quantity = bom.quantity ?? 1
+  }
+}
+
 /** 提交表单 */
 const submitForm = async () => {
   const valid = await formRef.value.validate()

src/views/mes/pro/workorder/WorkOrderBomList.vue

@@ -67,7 +67,11 @@
         v-loading="formLoading"
       >
         <el-form-item v-if="bomFormType === 'create'" label="物料" prop="itemId">
-          <MdItemSelect v-model="formData.itemId" />
+          <MdProductBomSelect
+            v-model="formData.itemId"
+            :itemId="props.workOrder.productId"
+            @change="handleBomItemChange"
+          />
         </el-form-item>
         <el-form-item v-else label="物料">
           <el-input :model-value="formData.itemName" disabled />
@@ -94,7 +98,8 @@
 import { ProWorkOrderBomApi, ProWorkOrderBomVO } from '@/api/mes/pro/workorder/bom'
 import { MesProWorkOrderStatusEnum, MesProWorkOrderTypeEnum } from '@/views/mes/utils/constants'
 import { DICT_TYPE } from '@/utils/dict'
-import MdItemSelect from '@/views/mes/md/item/components/MdItemSelect.vue'
+import MdProductBomSelect from '@/views/mes/md/item/components/MdProductBomSelect.vue'
+import { MdProductBomVO } from '@/api/mes/md/item/productBom'
 
 defineOptions({ name: 'WorkOrderBomList' })
 
@@ -188,6 +193,13 @@ const resetForm = () => {
   formRef.value?.resetFields()
 }
 
+/** BOM 物料选中变化：自动回填预计使用量 */
+const handleBomItemChange = (bom: MdProductBomVO | undefined) => {
+  if (bom) {
+    formData.value.quantity = bom.quantity ?? undefined
+  }
+}
+
 /** 打开 BOM 弹窗 */
 const openForm = (type: string, row?: any) => {
   resetForm()