style(purchase): 列表宽度优化 + 物品显示名称货号

- 主表格/展开明细表格加 width:100% + fit
- 自适应列用 min-width(批次号/物品),固定列保留 width(金额/日期/操作)
- 批次主行物品列:单个显示 名称+货号,多个显示 'N 种物料'
- 展开明细物品列:名称+货号 合并显示
This commit is contained in:
yueli
2026-08-31 14:05:46 +08:00
parent 4c41e1ec13
commit a6c21fd313

View File

@ -18,16 +18,21 @@
</div>
<!-- 按批次分组的列表 -->
<el-table v-loading="loading" :data="list" border stripe style="margin-top: 16px;" row-key="batchKey">
<el-table v-loading="loading" :data="list" border stripe fit style="width: 100%; margin-top: 16px;" row-key="batchKey">
<!-- 展开/收起 + 批次信息 -->
<el-table-column type="expand" width="50" align="center">
<template #default="{ row }">
<div style="padding: 12px 24px; background: #f5f7fa;">
<div style="font-weight: bold; margin-bottom: 8px;">批次明细{{ row.itemCount }} </div>
<el-table :data="row.items" border size="small" style="width: 100%;">
<el-table-column prop="request_no" label="申请单号" width="200" />
<el-table-column prop="name" label="采购物品" min-width="140" show-overflow-tooltip />
<el-table-column prop="spec_model" label="规格型号" min-width="120" show-overflow-tooltip />
<el-table :data="row.items" border fit size="small" style="width: 100%;">
<el-table-column prop="request_no" label="申请单号" min-width="200" show-overflow-tooltip />
<!-- 采购物品显示 名称+货号 -->
<el-table-column label="采购物品" min-width="180" show-overflow-tooltip>
<template #default="{ row: it }">
<span>{{ it.name }}</span>
<span v-if="it.spec_model" style="color:#909399; font-size:12px; margin-left:6px;">{{ it.spec_model }}</span>
</template>
</el-table-column>
<el-table-column prop="quantity" label="数量" width="70" align="center" />
<el-table-column prop="purchase_date" label="采购日期" width="110" />
<el-table-column v-if="userStore.hasPermission('inbound_purchase:unit_price')" label="单价" width="90" align="right">
@ -60,16 +65,23 @@
</el-table-column>
<!-- 批次主行 -->
<el-table-column label="批次号" width="220">
<el-table-column label="批次号" min-width="200">
<template #default="{ row }">
<el-link type="primary" :underline="false" @click="openBatchDialog(row.batchKey)">
{{ row.batchKey }}
</el-link>
</template>
</el-table-column>
<el-table-column label="物品" width="70" align="center">
<!-- 物品列单个显示 名称+货号多个显示数量 -->
<el-table-column label="采购物品" min-width="200" show-overflow-tooltip>
<template #default="{ row }">
<el-tag size="small" type="info">{{ row.itemCount }} </el-tag>
<template v-if="row.itemCount === 1">
<span>{{ row.items[0].name }}</span>
<span v-if="row.items[0].spec_model" style="color:#909399; font-size:12px; margin-left:6px;">{{ row.items[0].spec_model }}</span>
</template>
<template v-else>
<el-tag size="small" type="info">{{ row.itemCount }} 种物料</el-tag>
</template>
</template>
</el-table-column>
<el-table-column v-if="userStore.hasPermission('inbound_purchase:total_price')" label="批次总价" width="120" align="right">