style：模具出库-详情-出库模具清单

src/views/mes/moldget/components/StockOutItemForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="device-ledger-layout">
+  <div v-if="!props.disabled" class="device-ledger-layout">
     <div class="device-ledger-right">
       <ContentWrap>
         <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
@@ -49,6 +49,17 @@ v-model="queryParams.name" :placeholder="t('MoldManagement.Mold.name')" clearabl
       </ContentWrap>
     </div>
   </div>
+  <div v-else>
+    <ContentWrap>
+      <el-table :data="props.items || []" :stripe="true" :show-overflow-tooltip="true">
+        <el-table-column label="产品名称" prop="productName" />
+        <el-table-column label="产品条码" prop="productBarCode" />
+        <el-table-column label="数量" prop="count" />
+        <el-table-column label="单价" prop="productPrice" />
+        <el-table-column label="备注" prop="remark" />
+      </el-table>
+    </ContentWrap>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -57,6 +68,10 @@ import { dateFormatter } from '@/utils/formatTime'
 import { MoldBrandApi, MoldVO } from '@/api/erp/mold'
 import { useDictStoreWithOut } from '@/store/modules/dict'
 
+const props = defineProps<{
+  items?: any[]
+  disabled?: boolean
+}>()
 
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
@@ -81,6 +96,7 @@ const dictReady = ref(false)
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
+  ignoreSelectionChange.value = true
   try {
     const data = await MoldBrandApi.getMoldPage({
       pageNo: queryParams.pageNo,
@@ -94,6 +110,8 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    await nextTick()
+    ignoreSelectionChange.value = false
   }
 }
 
@@ -111,12 +129,36 @@ const resetQuery = () => {
 
 const tableRef = ref()
 const selectedRows = ref<any[]>([])
+const ignoreSelectionChange = ref(false)
 
 watch(list, async () => {
   await nextTick()
   restoreSelection()
 })
 
+watch(
+  () => props.items,
+  async (val) => {
+    if (!val || !Array.isArray(val) || val.length === 0) {
+      selectedRows.value = []
+      await nextTick()
+      restoreSelection()
+      return
+    }
+
+    const ids = (val as any[])
+      .map((item) => item.productId ?? item.id)
+      .filter((id) => id !== undefined && id !== null)
+
+    const uniqIds = Array.from(new Set(ids))
+    selectedRows.value = uniqIds.map((id) => ({ id }))
+
+    await nextTick()
+    restoreSelection()
+  },
+  { immediate: true, deep: true }
+)
+
 const restoreSelection = () => {
   if (!tableRef.value || selectedRows.value.length === 0) return
   tableRef.value.clearSelection?.()
@@ -129,7 +171,19 @@ const restoreSelection = () => {
 }
 
 const handleSelectionChange = (rows: any[]) => {
-  selectedRows.value = rows
+  if (ignoreSelectionChange.value) return
+  const currentPageIds = list.value.map((row) => row.id)
+  const currentSelectedIdSet = new Set(rows.map((row) => row.id))
+
+  selectedRows.value = selectedRows.value.filter(
+    (row) => !currentPageIds.includes(row.id) || currentSelectedIdSet.has(row.id)
+  )
+
+  rows.forEach((row) => {
+    if (!selectedRows.value.some((r) => r.id === row.id)) {
+      selectedRows.value.push(row)
+    }
+  })
 }
 
 const validate = async (): Promise<boolean> => {