| | |
| | | <template> |
| | | <el-dialog v-model="visible" |
| | | title="选择产品" |
| | | width="900px" |
| | | width="1000px" |
| | | destroy-on-close |
| | | :close-on-click-modal="false"> |
| | | <el-form :inline="true" |
| | | :model="query" |
| | | class="mb-2"> |
| | | class="mb-2 search-form"> |
| | | <el-form-item label="产品名称"> |
| | | <el-input v-model="query.productName" |
| | | size="small" |
| | | placeholder="输入产品名称" |
| | | clearable |
| | | @keyup.enter="onSearch" /> |
| | | </el-form-item> |
| | | <el-form-item label="规格"> |
| | | <el-input v-model="query.specification" |
| | | <el-input v-model="query.model" |
| | | size="small" |
| | | placeholder="输入规格" |
| | | clearable |
| | | @keyup.enter="onSearch" /> |
| | | </el-form-item> |
| | | <el-form-item label="物料编码"> |
| | | <el-input v-model="query.materialCode" |
| | | size="small" |
| | | placeholder="输入物料编码" |
| | | clearable |
| | | @keyup.enter="onSearch" /> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-form-item style="200px"> |
| | | <el-button type="primary" |
| | | size="small" |
| | | @click="onSearch">搜索</el-button> |
| | | <el-button @click="onReset">重置</el-button> |
| | | <el-button size="small" |
| | | @click="onReset">重置</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | <!-- 列表 --> |
| | |
| | | :data="tableData" |
| | | height="420" |
| | | highlight-current-row |
| | | row-key="skuId" |
| | | row-key="id" |
| | | @selection-change="handleSelectionChange" |
| | | @select="handleSelect"> |
| | | <el-table-column type="selection" |
| | |
| | | <el-table-column type="index" |
| | | label="序号" |
| | | width="60" /> |
| | | <el-table-column prop="materialName" |
| | | <el-table-column prop="productName" |
| | | label="产品名称" |
| | | min-width="160" /> |
| | | <el-table-column prop="materialCode" |
| | | label="物料编码" |
| | | min-width="200" /> |
| | | <el-table-column prop="specification" |
| | | <el-table-column prop="model" |
| | | label="规格" |
| | | min-width="200" /> |
| | | <el-table-column prop="baseUnit" |
| | | <el-table-column prop="unit" |
| | | label="单位" |
| | | min-width="160" /> |
| | | </el-table> |
| | |
| | | import { modelListPage } from "@/api/basicData/newProduct"; |
| | | |
| | | export type ProductRow = { |
| | | skuId: number; |
| | | specification: string; |
| | | id: number; |
| | | model: string; |
| | | materialCode: string; |
| | | baseUnit?: string; |
| | | materialName?: string; |
| | | unit?: string; |
| | | productName?: string; |
| | | }; |
| | | |
| | | const props = defineProps<{ |
| | |
| | | }); |
| | | |
| | | const query = reactive({ |
| | | specification: "", |
| | | model: "", |
| | | materialCode: "", |
| | | productName: "", |
| | | }); |
| | | |
| | | const page = reactive({ |
| | |
| | | nextTick(() => { |
| | | if (tableRef.value) { |
| | | tableData.value.forEach(item => { |
| | | if (item.skuId !== row.skuId) { |
| | | if (item.id !== row.id) { |
| | | tableRef.value.toggleRowSelection(item, false); |
| | | } |
| | | }); |
| | |
| | | } |
| | | |
| | | function onReset() { |
| | | query.specification = ""; |
| | | query.model = ""; |
| | | query.materialCode = ""; |
| | | query.productName = ""; |
| | | page.pageNum = 1; |
| | | loadData(); |
| | | } |
| | |
| | | try { |
| | | multipleSelection.value = []; // 翻页/搜索后清空选择更符合预期 |
| | | const res: any = await modelListPage({ |
| | | specification: query.specification.trim(), |
| | | model: query.model.trim(), |
| | | materialCode: query.materialCode.trim(), |
| | | productName: query.productName.trim(), |
| | | type: 1, |
| | | current: page.pageNum, |
| | | size: page.pageSize, |
| | | }); |
| | |
| | | loadData(); |
| | | }); |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .search-form { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 10px; |
| | | margin-bottom: 10px; |
| | | } |
| | | |
| | | .search-form .el-form-item { |
| | | margin-bottom: 0; |
| | | } |
| | | |
| | | .search-form .el-input { |
| | | width: 180px; |
| | | } |
| | | .el-form--inline .el-form-item { |
| | | margin-right: 5px; |
| | | } |
| | | .justify-end { |
| | | margin-top: 10px; |
| | | } |
| | | </style> |