duxingchen/KCGL
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(purchase): 表格列宽优化 + 迷你上传框 + 照片同步所有

Browse Source 
- 每列显式指定 min-width/width，输入多的列用 min-width 防挤压
- 照片列固定 90px，上传框缩小到 60x60（::v-deep 覆盖样式）
- 新增「照片同步所有」按钮：深拷贝第一行照片到所有行
- 照片列保持红星必填标记
This commit is contained in:
yueli
2026-08-31 13:24:17 +08:00
parent f18e61a71a
commit 25bb35e265
1 changed files with 62 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
inventory-web/src/views/purchase/index.vue
View File

@ -82,11 +82,14 @@
<el-tooltip content="把第一行备注复制到所有行" placement="top">
<el-button type="warning" plain size="small" :icon="CopyDocument" style="margin-left: 8px;" @click="syncRemarkToAll">备注同步所有</el-button>
</el-tooltip>
<el-tooltip content="把第一行照片复制到所有行" placement="top">
<el-button type="success" plain size="small" :icon="Picture" style="margin-left: 8px;" @click="syncImagesToAll">照片同步所有</el-button>
</el-tooltip>
</div>
<el-table :data="formItems" border size="small" style="width: 100%;" :max-height="400">
<el-table-column type="index" label="#" width="38" align="center" />
<el-table-column label="采购物品" min-width="180">
<el-table-column type="index" label="#" width="50" align="center" />
<el-table-column label="采购物品" min-width="200">
<template #default="{ row }">
<el-select
:model-value="row.materialBaseId" filterable remote reserve-keyword="true" clearable
@ -103,32 +106,32 @@
</el-select>
</template>
</el-table-column>
<el-table-column label="规格型号" width="110">
<el-table-column label="规格型号" min-width="130">
<template #default="{ row }">
<el-input v-model="row.spec_model" placeholder="自动填充" clearable />
</template>
</el-table-column>
<el-table-column label="数量" width="80">
<el-table-column label="数量" width="90">
<template #default="{ row }">
<el-input-number v-model="row.quantity" :min="1" :controls="false" style="width: 100%;" @change="() => onRowUnitPriceChange(row)" />
</template>
</el-table-column>
<el-table-column label="采购日期" width="120">
<el-table-column label="采购日期" width="130">
<template #default="{ row }">
<el-date-picker v-model="row.purchase_date" type="date" value-format="YYYY-MM-DD" placeholder="选择日期" style="width: 100%;" />
</template>
</el-table-column>
<el-table-column label="含税单价" width="95">
<el-table-column label="含税单价" width="100">
<template #default="{ row }">
<el-input-number v-model="row.unit_price" :min="0" :precision="2" :controls="false" style="width: 100%;" placeholder="¥" @change="() => onRowUnitPriceChange(row)" />
</template>
</el-table-column>
<el-table-column label="含税总价" width="95">
<el-table-column label="含税总价" width="100">
<template #default="{ row }">
<el-input-number v-model="row.total_price" :min="0" :precision="2" :controls="false" style="width: 100%;" placeholder="¥" @change="() => onRowTotalPriceChange(row)" />
</template>
</el-table-column>
<el-table-column label="税率" width="75">
<el-table-column label="税率" width="80">
<template #default="{ row }">
<el-select v-model="row.tax_rate" style="width: 100%;" @change="() => onRowTaxRateChange(row)">
<el-option label="0%" :value="0" />
@ -143,13 +146,14 @@
<el-input v-model="row.remark" type="textarea" :rows="1" placeholder="行备注" resize="none" />
</template>
</el-table-column>
<el-table-column width="130" align="center">
<el-table-column width="90" align="center">
<!-- ★ 表头加红星：照片必填 -->
<template #header>
<span style="color: #F56C6C; margin-right: 3px;">*</span>照片
</template>
<template #default="{ row }">
<el-upload
class="table-mini-uploader"
:http-request="(opt: any) => customUploadRow(opt, row)"
:on-remove="(f: any) => handleRemoveRowImage(f, row)"
:before-upload="beforeAvatarUpload"
@ -162,7 +166,7 @@
</el-upload>
</template>
</el-table-column>
<el-table-column label="操作" width="55" align="center">
<el-table-column label="操作" width="60" align="center">
<template #default="{ $index }">
<el-button type="danger" link :icon="Delete" @click="removeFormItem($index)" :disabled="formItems.length <= 1" />
</template>
@ -276,7 +280,7 @@
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { Refresh, Plus, Delete, CopyDocument } from '@element-plus/icons-vue'
import { Refresh, Plus, Delete, CopyDocument, Picture } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '@/stores/user'
import { searchMaterialPurchase } from '@/api/purchase'
@ -646,6 +650,31 @@ const syncRemarkToAll = () => {
ElMessage.success('已将第一行备注同步到所有行')
}
// ★ 照片一键同步所有行：取第一行的照片深拷贝到所有行
const syncImagesToAll = () => {
if (formItems.value.length <= 1) {
ElMessage.warning('当前只有一行，无需同步')
return
}
const firstRow = formItems.value[0]
const firstFiles = firstRow.fileList || []
const firstImages = firstRow.images || []
if (firstImages.length === 0) {
ElMessage.warning('第一行没有上传照片，无法同步')
return
}
// 深拷贝，避免某行删除照片时影响其他行
const clonedFiles = JSON.parse(JSON.stringify(firstFiles))
const clonedImages = JSON.parse(JSON.stringify(firstImages))
formItems.value.forEach((row, idx) => {
if (idx > 0) {
row.fileList = JSON.parse(JSON.stringify(clonedFiles))
row.images = JSON.parse(JSON.stringify(clonedImages))
}
})
ElMessage.success('照片已同步至所有明细行')
}
// --- 提交（循环逐行调用单条接口） ---
const submitForm = async () => {
// 1. 公共信息校验
@ -808,4 +837,26 @@ onMounted(() => {
background: #409EFF;
border-radius: 2px;
}
/* ★ 表格内迷你上传框：缩小到 60x60，避免撑爆表格 */
:deep(.table-mini-uploader) .el-upload--picture-card {
width: 60px;
height: 60px;
line-height: 66px;
}
:deep(.table-mini-uploader) .el-upload--picture-card .el-icon {
font-size: 20px;
}
:deep(.table-mini-uploader) .el-upload-list--picture-card .el-upload-list__item {
width: 60px;
height: 60px;
}
:deep(.table-mini-uploader) .el-upload-list--picture-card .el-upload-list__item img {
width: 60px;
height: 60px;
object-fit: cover;
}
:deep(.table-mini-uploader) .el-upload-list--picture-card .el-upload-list__item-actions {
font-size: 14px;
}
</style>