✨ feat(mes): 添加供应商入库单列表功能，优化物料清单展示

src/views/mes/md/vendor/MdVendorForm.vue

@@ -161,18 +161,18 @@
     </el-form>
     <!-- 编辑/详情时显示关联数据 tab -->
     <el-tabs v-if="formType !== 'create' && formData.id" v-model="activeTab" class="mt-10px">
-      <el-tab-pane label="供货记录" name="supplyRecord" lazy>
+      <el-tab-pane label="物料清单" name="itemReceiptLine" lazy>
-        <VendorSupplyRecordTab :vendorId="formData.id" />
+        <VendorItemReceiptLineTab :vendorId="formData.id" />
       </el-tab-pane>
-      <el-tab-pane label="退货记录" name="returnRecord" lazy>
+      <el-tab-pane label="采购入库" name="itemReceipt" lazy>
-        <VendorReturnRecordTab :vendorId="formData.id" />
+        <VendorItemReceiptTab :vendorId="formData.id" />
       </el-tab-pane>
     </el-tabs>
     <template #footer>
-      <el-button v-if="!isDetail" @click="submitForm" type="primary" :disabled="formLoading"
+      <el-button v-if="!isDetail" @click="submitForm" type="primary" :disabled="formLoading">
-        >确 定</el-button
+        确 定
-      >
+      </el-button>
-      <el-button @click="dialogVisible = false">{{ isDetail ? '关 闭' : '取 消' }}</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
 </template>
@@ -182,8 +182,8 @@ import { MdVendorApi, MdVendorVO } from '@/api/mes/md/vendor'
 import { AutoCodeRecordApi } from '@/api/mes/md/autocode/record'
 import { CommonStatusEnum } from '@/utils/constants'
 import { MesAutoCodeRuleCode } from '@/views/mes/utils/constants'
-import VendorSupplyRecordTab from './components/VendorSupplyRecordTab.vue'
+import VendorItemReceiptLineTab from './VendorItemReceiptLineTab.vue'
-import VendorReturnRecordTab from './components/VendorReturnRecordTab.vue'
+import VendorItemReceiptTab from './VendorItemReceiptTab.vue'
 
 defineOptions({ name: 'MdVendorForm' })
 
@@ -202,7 +202,7 @@ const dialogTitle = computed(() => {
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改；detail - 详情
 const isDetail = computed(() => formType.value === 'detail') // 是否详情模式（只读）
-const activeTab = ref('supplyRecord') // 当前激活的 tab
+const activeTab = ref('itemReceiptLine') // 当前激活的 tab
 const formData = ref({
   id: undefined,
   code: undefined,
@@ -231,7 +231,7 @@ const formRules = reactive({
   code: [{ required: true, message: '供应商编码不能为空', trigger: 'blur' }],
   name: [
     { required: true, message: '供应商名称不能为空', trigger: 'blur' },
-    { max: 100, message: '供应商名称不能超过100个字符', trigger: 'blur' }
+    { max: 100, message: '供应商名称不能超过 100 个字符', trigger: 'blur' }
   ],
   status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
   email: [
@@ -267,7 +267,7 @@ const generateCode = async () => {
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true
   formType.value = type
-  activeTab.value = 'supplyRecord'
+  activeTab.value = 'itemReceiptLine'
   resetForm()
   // 修改/详情时，设置数据
   if (id) {

src/views/mes/md/vendor/VendorItemReceiptLineTab.vue

@@ -0,0 +1,76 @@
+<template>
+  <!-- 供应商详情-物料清单 tab（复用 getItemReceiptLinePage 分页接口） -->
+  <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+    <el-table-column label="物料编码" align="center" prop="itemCode" width="140">
+      <template #default="scope">
+        <el-button link type="primary" @click="handleViewItem(scope.row.itemId)">
+          {{ scope.row.itemCode }}
+        </el-button>
+      </template>
+    </el-table-column>
+    <el-table-column label="物料名称" align="center" prop="itemName" />
+    <el-table-column label="规格型号" align="center" prop="specification" />
+    <el-table-column label="单位" align="center" prop="unitMeasureName" />
+    <el-table-column label="入库数量" align="center" prop="receivedQuantity" />
+    <el-table-column label="批次号" align="center" prop="batchCode" />
+  </el-table>
+  <Pagination
+    :total="total"
+    v-model:page="queryParams.pageNo"
+    v-model:limit="queryParams.pageSize"
+    @pagination="getList"
+  />
+
+  <!-- 物料详情弹窗 -->
+  <MdItemForm ref="itemFormRef" />
+</template>
+
+<script setup lang="ts">
+import { WmItemReceiptLineApi } from '@/api/mes/wm/itemreceipt/line'
+import MdItemForm from '@/views/mes/md/item/MdItemForm.vue'
+
+defineOptions({ name: 'VendorItemReceiptLineTab' })
+
+const props = defineProps<{
+  vendorId: number
+}>()
+
+const loading = ref(false)
+const list = ref<any[]>([])
+const total = ref(0)
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  vendorId: undefined as number | undefined
+})
+
+/** 查询列表 */
+const getList = async () => {
+  if (!queryParams.vendorId) return
+  loading.value = true
+  try {
+    const data = await WmItemReceiptLineApi.getItemReceiptLinePage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 查看物料详情 */
+const itemFormRef = ref()
+const handleViewItem = (itemId: number) => {
+  itemFormRef.value.open('detail', itemId)
+}
+
+/** 监听 vendorId 变化，自动加载 */
+watch(
+  () => props.vendorId,
+  (val) => {
+    queryParams.vendorId = val
+    queryParams.pageNo = 1
+    getList()
+  },
+  { immediate: true }
+)
+</script>

src/views/mes/md/vendor/VendorItemReceiptTab.vue

@@ -0,0 +1,86 @@
+<template>
+  <!-- 供应商详情-采购记录 tab（复用 getItemReceiptPage 分页接口） -->
+  <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+    <el-table-column label="入库单编号" align="center" prop="code" min-width="160">
+      <template #default="scope">
+        <el-button link type="primary" @click="handleDetail(scope.row.id)">
+          {{ scope.row.code }}
+        </el-button>
+      </template>
+    </el-table-column>
+    <el-table-column label="入库单名称" align="center" prop="name" min-width="150" />
+    <el-table-column
+      label="入库日期"
+      align="center"
+      prop="receiptDate"
+      :formatter="dateFormatter2"
+      width="180px"
+    />
+    <el-table-column label="单据状态" align="center" prop="status" min-width="100">
+      <template #default="scope">
+        <dict-tag :type="DICT_TYPE.MES_WM_ITEM_RECEIPT_STATUS" :value="scope.row.status" />
+      </template>
+    </el-table-column>
+  </el-table>
+  <Pagination
+    :total="total"
+    v-model:page="queryParams.pageNo"
+    v-model:limit="queryParams.pageSize"
+    @pagination="getList"
+  />
+
+  <!-- 采购入库单详情弹窗 -->
+  <ItemReceiptForm ref="formRef" />
+</template>
+
+<script setup lang="ts">
+import { dateFormatter2 } from '@/utils/formatTime'
+import { DICT_TYPE } from '@/utils/dict'
+import { WmItemReceiptApi } from '@/api/mes/wm/itemreceipt'
+import ItemReceiptForm from '@/views/mes/wm/itemreceipt/ItemReceiptForm.vue'
+
+defineOptions({ name: 'VendorItemReceiptTab' })
+
+const props = defineProps<{
+  vendorId: number
+}>()
+
+const loading = ref(false)
+const list = ref<any[]>([])
+const total = ref(0)
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  vendorId: undefined as number | undefined
+})
+
+/** 查询列表 */
+const getList = async () => {
+  if (!queryParams.vendorId) return
+  loading.value = true
+  try {
+    const data = await WmItemReceiptApi.getItemReceiptPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 查看详情 */
+const formRef = ref()
+const handleDetail = (id: number) => {
+  formRef.value.open('detail', id)
+}
+
+/** 监听 vendorId 变化，自动加载 */
+watch(
+  () => props.vendorId,
+  (val) => {
+    queryParams.vendorId = val
+    queryParams.pageNo = 1
+    getList()
+  },
+  { immediate: true }
+)
+</script>