|
|
|
|
@ -45,8 +45,43 @@ |
|
|
|
|
</el-col> |
|
|
|
|
</el-row> |
|
|
|
|
<el-row> |
|
|
|
|
|
|
|
|
|
<el-col :span="24" style="display: flex; justify-content: flex-end"> |
|
|
|
|
<el-col :span="6"> |
|
|
|
|
<el-form-item style="margin-right: 5px" label="产品大类"> |
|
|
|
|
<el-select |
|
|
|
|
v-model="searchForm.catalogOne" |
|
|
|
|
placeholder="请选择产品大类" |
|
|
|
|
@change="handleCatalogOneChange" |
|
|
|
|
clearable |
|
|
|
|
style="width: 100%" |
|
|
|
|
> |
|
|
|
|
<el-option |
|
|
|
|
v-for="item in catalogOneList" |
|
|
|
|
:key="item.id" |
|
|
|
|
:label="item.name" |
|
|
|
|
:value="item.name" |
|
|
|
|
></el-option> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-col> |
|
|
|
|
<!-- 产品小类：联动下拉框（未选大类时禁用） --> |
|
|
|
|
<el-col :span="6"> |
|
|
|
|
<el-form-item style="margin-right: 5px" label="产品小类"> |
|
|
|
|
<el-select |
|
|
|
|
v-model="searchForm.catalogTwo" |
|
|
|
|
placeholder="请先选择产品大类" |
|
|
|
|
clearable |
|
|
|
|
style="width: 100%" |
|
|
|
|
> |
|
|
|
|
<el-option |
|
|
|
|
v-for="item in catalogTwoList" |
|
|
|
|
:key="item.id" |
|
|
|
|
:label="item.name" |
|
|
|
|
:value="item.name" |
|
|
|
|
></el-option> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="12" style="display: flex; justify-content: flex-end"> |
|
|
|
|
<el-button size="small" type="primary" @click="handleSearch" class="el-button--big" |
|
|
|
|
>搜索</el-button |
|
|
|
|
> |
|
|
|
|
@ -68,35 +103,39 @@ |
|
|
|
|
cell-style="text-align: center;" |
|
|
|
|
fit |
|
|
|
|
> |
|
|
|
|
<el-table-column label="序号" type="index" width="130"></el-table-column> |
|
|
|
|
<el-table-column label="序号" type="index" width="90"></el-table-column> |
|
|
|
|
<el-table-column |
|
|
|
|
label="产品编号" |
|
|
|
|
prop="code" |
|
|
|
|
|
|
|
|
|
width="240" |
|
|
|
|
></el-table-column> |
|
|
|
|
<el-table-column |
|
|
|
|
label="产品大类" |
|
|
|
|
prop="catalogOne" |
|
|
|
|
width="240" |
|
|
|
|
|
|
|
|
|
></el-table-column> |
|
|
|
|
<el-table-column |
|
|
|
|
label="产品小类" |
|
|
|
|
prop="catalogTwo" |
|
|
|
|
width="240" |
|
|
|
|
|
|
|
|
|
></el-table-column> |
|
|
|
|
<el-table-column |
|
|
|
|
label="产品名称" |
|
|
|
|
prop="nameCn" |
|
|
|
|
width="260" |
|
|
|
|
|
|
|
|
|
></el-table-column> |
|
|
|
|
<el-table-column |
|
|
|
|
label="产品规格" |
|
|
|
|
prop="specCn" |
|
|
|
|
width="240" |
|
|
|
|
|
|
|
|
|
></el-table-column> |
|
|
|
|
|
|
|
|
|
<el-table-column label="当前成本价"> |
|
|
|
|
<template #default="scope"> {{ scope.row.costPrice }} </template> |
|
|
|
|
<el-table-column label="当前成本价" width="260"> |
|
|
|
|
<template #default="scope"> {{ formatPrice(scope.row.costPrice) }} </template> |
|
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
|
|
<el-table-column |
|
|
|
|
@ -104,7 +143,7 @@ |
|
|
|
|
prop="updateTime" |
|
|
|
|
width="280" |
|
|
|
|
></el-table-column> |
|
|
|
|
<el-table-column label="操作" width="270" > |
|
|
|
|
<el-table-column label="操作" width="270" fixed="right"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
<div style="display: flex; justify-content: center"> |
|
|
|
|
<el-link type="primary" @click="openEditDialog(scope.row)" |
|
|
|
|
@ -144,7 +183,7 @@ |
|
|
|
|
ref="ruleForm" |
|
|
|
|
> |
|
|
|
|
<el-form-item label="当前价格:" prop="currentCost"> |
|
|
|
|
<span style="font-size: 28px;">¥ {{ editForm.currentCost }}</span> |
|
|
|
|
<span style="font-size: 28px;">¥{{ formatPrice(editForm.currentCost) }}</span> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="新价格:" prop="costPrice"> |
|
|
|
|
<el-input |
|
|
|
|
@ -152,6 +191,7 @@ |
|
|
|
|
placeholder="请输入" |
|
|
|
|
style="width: 200px" |
|
|
|
|
type="number" |
|
|
|
|
@blur="formatPriceToTwoDecimal" |
|
|
|
|
></el-input> |
|
|
|
|
<span style="margin-left: 5px">元</span> |
|
|
|
|
</el-form-item> |
|
|
|
|
@ -186,10 +226,10 @@ |
|
|
|
|
fit |
|
|
|
|
> |
|
|
|
|
<el-table-column label="修改前价格" prop="costPriceOld" width="180"> |
|
|
|
|
<template #default="scope">¥ {{ scope.row.costPriceOld }}</template> |
|
|
|
|
<template #default="scope">¥ {{ formatPrice(scope.row.costPriceOld) }}</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column label="修改后价格" prop="costPrice" width="180"> |
|
|
|
|
<template #default="scope">¥ {{ scope.row.costPrice }}</template> |
|
|
|
|
<template #default="scope">¥ {{ formatPrice(scope.row.costPrice) }}</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column |
|
|
|
|
label="修改人" |
|
|
|
|
@ -230,6 +270,7 @@ import { |
|
|
|
|
updateProductCost, |
|
|
|
|
getProductHistory, |
|
|
|
|
} from "@/api/product/productCost"; |
|
|
|
|
import {getCategory } from '@/api/product/product' |
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
components: { |
|
|
|
|
@ -237,7 +278,9 @@ export default { |
|
|
|
|
}, |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
searchForm: {}, |
|
|
|
|
searchForm: { |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
tableData: [], |
|
|
|
|
total: 0, |
|
|
|
|
current: 1, |
|
|
|
|
@ -263,13 +306,91 @@ export default { |
|
|
|
|
historySize: 10, // 历史记录每页条数 |
|
|
|
|
historyTotal: 0, // 历史记录总条数 |
|
|
|
|
currentProductId: "", // 缓存当前搜索的产品ID |
|
|
|
|
loading: true |
|
|
|
|
loading: true, |
|
|
|
|
productArr: [], |
|
|
|
|
catalogOneId: '', // 选中的大类ID |
|
|
|
|
catalogTwoId: '' , // 选中的小类ID |
|
|
|
|
catalogOneList: [], // 产品大类列表（一级分类，parentId=0） |
|
|
|
|
catalogTwoList: [], // 产品小类列表（二级分类，关联选中的大类） |
|
|
|
|
allCategoryList: [], // 全部分类数据（缓存） |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
this.getCategoryList() |
|
|
|
|
this.searchList(); |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
async getCategoryList() { |
|
|
|
|
try { |
|
|
|
|
|
|
|
|
|
const res = await getCategory({ parentId: 0, size: 9999, current: 1 }); |
|
|
|
|
if (res.data.code === 200) { |
|
|
|
|
this.catalogOneList = res.data.data.records || []; |
|
|
|
|
} |
|
|
|
|
} catch (error) { |
|
|
|
|
console.error('加载产品大类失败:', error); |
|
|
|
|
this.$message.error('加载产品大类失败，请重试'); |
|
|
|
|
} finally { |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// 根据大类ID加载产品小类（二级分类） |
|
|
|
|
async getCategoryTwoList(parentId) { |
|
|
|
|
if (!parentId) return; |
|
|
|
|
try { |
|
|
|
|
|
|
|
|
|
const res = await getCategory({ parentId, size: 9999, current: 1 }); |
|
|
|
|
this.catalogTwoList = res.data.data.records || []; |
|
|
|
|
} catch (error) { |
|
|
|
|
console.error('加载产品小类失败:', error); |
|
|
|
|
this.$message.error('加载产品小类失败，请重试'); |
|
|
|
|
} finally { |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// 大类选择变更：核心联动逻辑 |
|
|
|
|
handleCatalogOneChange(selectedName) { |
|
|
|
|
// 1. 清空已选小类 |
|
|
|
|
this.searchForm.catalogTwo = ''; |
|
|
|
|
// 2. 根据选中的大类名称找到对应的ID（修复filter→find的问题） |
|
|
|
|
const targetCategory = this.catalogOneList.find(item => item.name === selectedName); |
|
|
|
|
if (targetCategory && targetCategory.id) { |
|
|
|
|
// 3. 根据大类ID加载对应的小类 |
|
|
|
|
this.getCategoryTwoList(targetCategory.id); |
|
|
|
|
} else { |
|
|
|
|
this.catalogTwoList = []; // 未找到对应大类，清空小类 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
//通用价格格式化函数（四舍五入保留两位小数） |
|
|
|
|
formatPrice(price) { |
|
|
|
|
// 处理空值、0和非数字情况 |
|
|
|
|
if (!price || isNaN(Number(price))) { |
|
|
|
|
return "0.00"; |
|
|
|
|
} |
|
|
|
|
// 转换为数字并四舍五入保留两位小数 |
|
|
|
|
return Number(price).toFixed(2); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
formatPriceToTwoDecimal() { |
|
|
|
|
// 处理空值 |
|
|
|
|
if (!this.editForm.costPrice) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
// 转换为数字并保留两位小数 |
|
|
|
|
const price = Number(this.editForm.costPrice); |
|
|
|
|
// 校验是否为有效数字 |
|
|
|
|
if (isNaN(price)) { |
|
|
|
|
this.$message.warning("请输入有效的数字"); |
|
|
|
|
this.editForm.costPrice = ""; |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
// 保留两位小数（四舍五入） |
|
|
|
|
this.editForm.costPrice = price.toFixed(2); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// 获取历史记录数据 |
|
|
|
|
handleHistory(row) { |
|
|
|
|
@ -367,8 +488,16 @@ export default { |
|
|
|
|
this.searchList(); |
|
|
|
|
}, |
|
|
|
|
handleReset() { |
|
|
|
|
this.searchForm = {}; |
|
|
|
|
this.searchForm = { |
|
|
|
|
code: '', |
|
|
|
|
nameCn: '', |
|
|
|
|
specCn: '', |
|
|
|
|
updateTime: '', |
|
|
|
|
catalogOne: '', |
|
|
|
|
catalogTwo: '' |
|
|
|
|
}; |
|
|
|
|
this.current = 1; |
|
|
|
|
this.catalogTwoList = []; // 重置小类列表 |
|
|
|
|
this.searchList(); |
|
|
|
|
}, |
|
|
|
|
// 打开编辑弹窗 |
|
|
|
|
|
