review + mall:商品管理
This commit is contained in:
parent
c296c9e53d
commit
0fba3fd503
@ -102,7 +102,8 @@ const include = [
|
|||||||
'element-plus/es/components/timeline-item/style/css',
|
'element-plus/es/components/timeline-item/style/css',
|
||||||
'element-plus/es/components/collapse/style/css',
|
'element-plus/es/components/collapse/style/css',
|
||||||
'element-plus/es/components/collapse-item/style/css',
|
'element-plus/es/components/collapse-item/style/css',
|
||||||
'element-plus/es/components/button-group/style/css'
|
'element-plus/es/components/button-group/style/css',
|
||||||
|
'element-plus/es/components/text/style/css'
|
||||||
]
|
]
|
||||||
|
|
||||||
const exclude = ['@iconify/json']
|
const exclude = ['@iconify/json']
|
||||||
|
@ -7,6 +7,7 @@ export interface Property {
|
|||||||
valueName?: string // 属性值名称
|
valueName?: string // 属性值名称
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// TODO puhui999:是不是直接叫 Sku 更简洁一点哈。type 待后面,总感觉有个类型?
|
||||||
export interface SkuType {
|
export interface SkuType {
|
||||||
id?: number // 商品 SKU 编号
|
id?: number // 商品 SKU 编号
|
||||||
spuId?: number // SPU 编号
|
spuId?: number // SPU 编号
|
||||||
@ -24,6 +25,7 @@ export interface SkuType {
|
|||||||
salesCount?: number // 商品销量
|
salesCount?: number // 商品销量
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// TODO puhui999:是不是直接叫 Spu 更简洁一点哈。type 待后面,总感觉有个类型?
|
||||||
export interface SpuType {
|
export interface SpuType {
|
||||||
id?: number
|
id?: number
|
||||||
name?: string // 商品名称
|
name?: string // 商品名称
|
||||||
|
@ -174,6 +174,7 @@ export const copyValueToTarget = (target, source) => {
|
|||||||
Object.assign(target, newObj)
|
Object.assign(target, newObj)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// TODO @puhui999:返回要带上 .00 哈.例如说 1.00
|
||||||
/**
|
/**
|
||||||
* 将一个整数转换为分数保留两位小数
|
* 将一个整数转换为分数保留两位小数
|
||||||
* @param num
|
* @param num
|
||||||
|
@ -146,7 +146,6 @@ const submitForm = async () => {
|
|||||||
const newSliderPicUrls = []
|
const newSliderPicUrls = []
|
||||||
deepCopyFormData.sliderPicUrls.forEach((item) => {
|
deepCopyFormData.sliderPicUrls.forEach((item) => {
|
||||||
// 如果是前端选的图
|
// 如果是前端选的图
|
||||||
// TODO @puhui999:疑问哈,为啥会是 object 呀?fix
|
|
||||||
typeof item === 'object' ? newSliderPicUrls.push(item.url) : newSliderPicUrls.push(item)
|
typeof item === 'object' ? newSliderPicUrls.push(item.url) : newSliderPicUrls.push(item)
|
||||||
})
|
})
|
||||||
deepCopyFormData.sliderPicUrls = newSliderPicUrls
|
deepCopyFormData.sliderPicUrls = newSliderPicUrls
|
||||||
|
@ -96,7 +96,6 @@
|
|||||||
<!-- 多规格添加-->
|
<!-- 多规格添加-->
|
||||||
<el-col :span="24">
|
<el-col :span="24">
|
||||||
<el-form-item v-if="formData.specType" label="商品属性">
|
<el-form-item v-if="formData.specType" label="商品属性">
|
||||||
<!-- TODO @puhui999:参考 https://admin.java.crmeb.net/store/list/creatProduct 添加规格好做么?添加的时候,不用输入备注哈 fix-->
|
|
||||||
<el-button class="mr-15px mb-10px" @click="attributesAddFormRef.open">添加规格</el-button>
|
<el-button class="mr-15px mb-10px" @click="attributesAddFormRef.open">添加规格</el-button>
|
||||||
<ProductAttributes :propertyList="propertyList" @success="generateSkus" />
|
<ProductAttributes :propertyList="propertyList" @success="generateSkus" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
@ -137,9 +136,8 @@ const props = defineProps({
|
|||||||
},
|
},
|
||||||
activeName: propTypes.string.def('')
|
activeName: propTypes.string.def('')
|
||||||
})
|
})
|
||||||
const attributesAddFormRef = ref() // 添加商品属性表单 TODO @puhui999:小写开头哈 fix
|
const attributesAddFormRef = ref() // 添加商品属性表单
|
||||||
const productSpuBasicInfoRef = ref() // 表单Ref TODO @puhui999:小写开头哈 fix
|
const productSpuBasicInfoRef = ref() // 表单 Ref
|
||||||
// TODO @puhui999:attributeList 改成 propertyList,会更统一一点 fix
|
|
||||||
const propertyList = ref([]) // 商品属性列表
|
const propertyList = ref([]) // 商品属性列表
|
||||||
const skuListRef = ref() // 商品属性列表Ref
|
const skuListRef = ref() // 商品属性列表Ref
|
||||||
/** 调用 SkuList generateTableData 方法*/
|
/** 调用 SkuList generateTableData 方法*/
|
||||||
@ -180,17 +178,17 @@ const rules = reactive({
|
|||||||
watch(
|
watch(
|
||||||
() => props.propFormData,
|
() => props.propFormData,
|
||||||
(data) => {
|
(data) => {
|
||||||
if (!data) return
|
if (!data) {
|
||||||
// fix:三个表单组件监听赋值必须使用 copyValueToTarget 使用 formData.value = data 会监听非常多次
|
return
|
||||||
|
}
|
||||||
copyValueToTarget(formData, data)
|
copyValueToTarget(formData, data)
|
||||||
// fix: 多图上传组件需要一个包含url属性的对象才能正常回显
|
|
||||||
formData.sliderPicUrls = data['sliderPicUrls'].map((item) => ({
|
formData.sliderPicUrls = data['sliderPicUrls'].map((item) => ({
|
||||||
url: item
|
url: item
|
||||||
}))
|
}))
|
||||||
|
// TODO @puhui999:if return,减少嵌套层级
|
||||||
// 只有是多规格才处理
|
// 只有是多规格才处理
|
||||||
if (formData.specType) {
|
if (formData.specType) {
|
||||||
// TODO @puhui999:可以直接拿 propertyName 拼接处规格 id + 属性,可以看下商品 uniapp 详情的做法
|
// 直接拿返回的 skus 属性逆向生成出 propertyList
|
||||||
// fix: 直接拿返回的 skus 属性逆向生成出 propertyList
|
|
||||||
const properties = []
|
const properties = []
|
||||||
formData.skus.forEach((sku) => {
|
formData.skus.forEach((sku) => {
|
||||||
sku.properties.forEach(({ propertyId, propertyName, valueId, valueName }) => {
|
sku.properties.forEach(({ propertyId, propertyName, valueId, valueName }) => {
|
||||||
@ -209,7 +207,6 @@ watch(
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
// fix: 去掉深度监听只有对象引用发生改变的时候才执行,解决改一动多的问题
|
|
||||||
immediate: true
|
immediate: true
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
@ -1,7 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-form ref="otherSettingsFormRef" :model="formData" :rules="rules" label-width="120px">
|
<el-form ref="otherSettingsFormRef" :model="formData" :rules="rules" label-width="120px">
|
||||||
<el-row>
|
<el-row>
|
||||||
<!-- TODO @puhui999:横着三个哈 fix-->
|
|
||||||
<el-col :span="24">
|
<el-col :span="24">
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
@ -86,7 +85,6 @@ const rules = reactive({
|
|||||||
giveIntegral: [required],
|
giveIntegral: [required],
|
||||||
virtualSalesCount: [required]
|
virtualSalesCount: [required]
|
||||||
})
|
})
|
||||||
// TODO @puhui999:这种叫 recommendOptions 会更合适哈 fix
|
|
||||||
const recommendOptions = [
|
const recommendOptions = [
|
||||||
{ name: '是否热卖', value: 'recommendHot' },
|
{ name: '是否热卖', value: 'recommendHot' },
|
||||||
{ name: '是否优惠', value: 'recommendBenefit' },
|
{ name: '是否优惠', value: 'recommendBenefit' },
|
||||||
@ -98,7 +96,6 @@ const checkboxGroup = ref<string[]>([]) // 选中的推荐选项
|
|||||||
|
|
||||||
/** 选择商品后赋值 */
|
/** 选择商品后赋值 */
|
||||||
const onChangeGroup = () => {
|
const onChangeGroup = () => {
|
||||||
// TODO @puhui999:是不是可以遍历 recommend,然后进行是否选中;fix
|
|
||||||
recommendOptions.forEach(({ value }) => {
|
recommendOptions.forEach(({ value }) => {
|
||||||
formData.value[value] = checkboxGroup.value.includes(value)
|
formData.value[value] = checkboxGroup.value.includes(value)
|
||||||
})
|
})
|
||||||
@ -110,21 +107,21 @@ const onChangeGroup = () => {
|
|||||||
watch(
|
watch(
|
||||||
() => props.propFormData,
|
() => props.propFormData,
|
||||||
(data) => {
|
(data) => {
|
||||||
if (!data) return
|
if (!data) {
|
||||||
// fix:三个表单组件监听赋值必须使用 copyValueToTarget 使用 formData.value = data 会监听非常多次
|
return
|
||||||
|
}
|
||||||
copyValueToTarget(formData.value, data)
|
copyValueToTarget(formData.value, data)
|
||||||
recommendOptions.forEach(({ value }) => {
|
recommendOptions.forEach(({ value }) => {
|
||||||
// TODO 如果先修改其他设置的值,再改变商品详情或是商品信息会重置其他设置页面中的相关值 fix:已修复
|
|
||||||
if (formData.value[value] && !checkboxGroup.value.includes(value)) {
|
if (formData.value[value] && !checkboxGroup.value.includes(value)) {
|
||||||
checkboxGroup.value.push(value)
|
checkboxGroup.value.push(value)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
// fix: 去掉深度监听只有对象引用发生改变的时候才执行,解决改一动多的问题
|
|
||||||
immediate: true
|
immediate: true
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 表单校验
|
* 表单校验
|
||||||
*/
|
*/
|
||||||
|
@ -21,17 +21,16 @@
|
|||||||
min-width="120"
|
min-width="120"
|
||||||
>
|
>
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
|
<!-- TODO puhui999:展示成蓝色,有点区分度哈 -->
|
||||||
{{ row.properties[index]?.valueName }}
|
{{ row.properties[index]?.valueName }}
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</template>
|
</template>
|
||||||
<!-- TODO @puhui999: controls-position=" " 可以去掉哈,不然太长了,手动输入更方便 fix -->
|
|
||||||
<el-table-column align="center" label="商品条码" min-width="168">
|
<el-table-column align="center" label="商品条码" min-width="168">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<el-input v-model="row.barCode" class="w-100%" />
|
<el-input v-model="row.barCode" class="w-100%" />
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<!-- TODO @puhui999:用户输入的时候,是按照元;分主要是我们自己用;fix -->
|
|
||||||
<el-table-column align="center" label="销售价(元)" min-width="168">
|
<el-table-column align="center" label="销售价(元)" min-width="168">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<el-input-number v-model="row.price" :min="0" :precision="2" :step="0.1" class="w-100%" />
|
<el-input-number v-model="row.price" :min="0" :precision="2" :step="0.1" class="w-100%" />
|
||||||
@ -141,6 +140,7 @@ const skuList = ref<SkuType[]>([
|
|||||||
subCommissionSecondPrice: 0 // 二级分销的佣金
|
subCommissionSecondPrice: 0 // 二级分销的佣金
|
||||||
}
|
}
|
||||||
]) // 批量添加时的临时数据
|
]) // 批量添加时的临时数据
|
||||||
|
// TODO @puhui999:保存时,每个商品规格的表单要校验下。例如说,销售金额最低是 0.01 这种。
|
||||||
|
|
||||||
/** 批量添加 */
|
/** 批量添加 */
|
||||||
const batchAdd = () => {
|
const batchAdd = () => {
|
||||||
@ -148,6 +148,7 @@ const batchAdd = () => {
|
|||||||
copyValueToTarget(item, skuList.value[0])
|
copyValueToTarget(item, skuList.value[0])
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 删除 sku */
|
/** 删除 sku */
|
||||||
const deleteSku = (row) => {
|
const deleteSku = (row) => {
|
||||||
const index = formData.value.skus.findIndex(
|
const index = formData.value.skus.findIndex(
|
||||||
@ -159,7 +160,7 @@ const deleteSku = (row) => {
|
|||||||
const tableHeaders = ref<{ prop: string; label: string }[]>([]) // 多属性表头
|
const tableHeaders = ref<{ prop: string; label: string }[]>([]) // 多属性表头
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 将传进来的值赋值给skuList
|
* 将传进来的值赋值给 skuList
|
||||||
*/
|
*/
|
||||||
watch(
|
watch(
|
||||||
() => props.propFormData,
|
() => props.propFormData,
|
||||||
@ -173,11 +174,10 @@ watch(
|
|||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
// TODO @芋艿:看看 chatgpt 可以进一步下面几个方法的实现不 fix: 添加相关处理逻辑解决编辑表单时或查看详情时数据回显问题
|
|
||||||
/** 生成表数据 */
|
/** 生成表数据 */
|
||||||
const generateTableData = (propertyList: any[]) => {
|
const generateTableData = (propertyList: any[]) => {
|
||||||
// 构建数据结构 fix: 使用map替换多重for循环
|
// 构建数据结构
|
||||||
const propertiesItemList = propertyList.map((item) =>
|
const propertyValues = propertyList.map((item) =>
|
||||||
item.values.map((v) => ({
|
item.values.map((v) => ({
|
||||||
propertyId: item.id,
|
propertyId: item.id,
|
||||||
propertyName: item.name,
|
propertyName: item.name,
|
||||||
@ -185,15 +185,16 @@ const generateTableData = (propertyList: any[]) => {
|
|||||||
valueName: v.name
|
valueName: v.name
|
||||||
}))
|
}))
|
||||||
)
|
)
|
||||||
const buildList = build(propertiesItemList)
|
// TODO @puhui:是不是 buildSkuList,这样容易理解一点哈。item 改成 sku
|
||||||
|
const buildList = build(propertyValues)
|
||||||
// 如果回显的 sku 属性和添加的属性不一致则重置 skus 列表
|
// 如果回显的 sku 属性和添加的属性不一致则重置 skus 列表
|
||||||
if (!validateData(propertyList)) {
|
if (!validateData(propertyList)) {
|
||||||
// 如果不一致则重置表数据,默认添加新的属性重新生成sku列表
|
// 如果不一致则重置表数据,默认添加新的属性重新生成 sku 列表
|
||||||
formData.value!.skus = []
|
formData.value!.skus = []
|
||||||
}
|
}
|
||||||
for (const item of buildList) {
|
for (const item of buildList) {
|
||||||
const row = {
|
const row = {
|
||||||
properties: Array.isArray(item) ? item : [item], // 如果只有一个属性的话返回的是一个property对象
|
properties: Array.isArray(item) ? item : [item], // 如果只有一个属性的话返回的是一个 property 对象
|
||||||
price: 0,
|
price: 0,
|
||||||
marketPrice: 0,
|
marketPrice: 0,
|
||||||
costPrice: 0,
|
costPrice: 0,
|
||||||
@ -205,16 +206,17 @@ const generateTableData = (propertyList: any[]) => {
|
|||||||
subCommissionFirstPrice: 0,
|
subCommissionFirstPrice: 0,
|
||||||
subCommissionSecondPrice: 0
|
subCommissionSecondPrice: 0
|
||||||
}
|
}
|
||||||
|
// 如果存在属性相同的 sku 则不做处理
|
||||||
const index = formData.value!.skus.findIndex(
|
const index = formData.value!.skus.findIndex(
|
||||||
(sku) => JSON.stringify(sku.properties) === JSON.stringify(row.properties)
|
(sku) => JSON.stringify(sku.properties) === JSON.stringify(row.properties)
|
||||||
)
|
)
|
||||||
// 如果存在属性相同的 sku 则不做处理
|
|
||||||
if (index !== -1) {
|
if (index !== -1) {
|
||||||
continue
|
continue
|
||||||
}
|
}
|
||||||
formData.value.skus.push(row)
|
formData.value.skus.push(row)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 生成 skus 前置校验
|
* 生成 skus 前置校验
|
||||||
*/
|
*/
|
||||||
@ -232,6 +234,7 @@ const validateData = (propertyList: any[]) => {
|
|||||||
const propertyIds = propertyList.map((item) => item.id)
|
const propertyIds = propertyList.map((item) => item.id)
|
||||||
return skuPropertyIds.length === propertyIds.length
|
return skuPropertyIds.length === propertyIds.length
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 构建所有排列组合 */
|
/** 构建所有排列组合 */
|
||||||
const build = (propertyValuesList: Property[][]) => {
|
const build = (propertyValuesList: Property[][]) => {
|
||||||
if (propertyValuesList.length === 0) {
|
if (propertyValuesList.length === 0) {
|
||||||
@ -255,13 +258,15 @@ const build = (propertyValuesList: Property[][]) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 监听属性列表生成相关参数和表头 */
|
/** 监听属性列表,生成相关参数和表头 */
|
||||||
watch(
|
watch(
|
||||||
() => props.propertyList,
|
() => props.propertyList,
|
||||||
(propertyList) => {
|
(propertyList) => {
|
||||||
// 如果不是多规格则结束
|
// 如果不是多规格则结束
|
||||||
if (!formData.value.specType) return
|
if (!formData.value.specType) {
|
||||||
// 如果当前组件作为批量添加数据使用则重置表数据
|
return
|
||||||
|
}
|
||||||
|
// 如果当前组件作为批量添加数据使用,则重置表数据
|
||||||
if (props.isBatch) {
|
if (props.isBatch) {
|
||||||
skuList.value = [
|
skuList.value = [
|
||||||
{
|
{
|
||||||
@ -278,8 +283,11 @@ watch(
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
// 判断代理对象是否为空
|
// 判断代理对象是否为空
|
||||||
if (JSON.stringify(propertyList) === '[]') return
|
if (JSON.stringify(propertyList) === '[]') {
|
||||||
|
return
|
||||||
|
}
|
||||||
// 重置表头
|
// 重置表头
|
||||||
tableHeaders.value = []
|
tableHeaders.value = []
|
||||||
// 生成表头
|
// 生成表头
|
||||||
@ -287,10 +295,16 @@ watch(
|
|||||||
// name加属性项index区分属性值
|
// name加属性项index区分属性值
|
||||||
tableHeaders.value.push({ prop: `name${index}`, label: item.name })
|
tableHeaders.value.push({ prop: `name${index}`, label: item.name })
|
||||||
})
|
})
|
||||||
|
|
||||||
// 如果回显的 sku 属性和添加的属性一致则不处理
|
// 如果回显的 sku 属性和添加的属性一致则不处理
|
||||||
if (validateData(propertyList)) return
|
if (validateData(propertyList)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
// 添加新属性没有属性值也不做处理
|
// 添加新属性没有属性值也不做处理
|
||||||
if (propertyList.some((item) => item.values.length === 0)) return
|
if (propertyList.some((item) => item.values.length === 0)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// 生成 table 数据,即 sku 列表
|
||||||
generateTableData(propertyList)
|
generateTableData(propertyList)
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -298,6 +312,6 @@ watch(
|
|||||||
immediate: true
|
immediate: true
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
// 暴露出生成 sku 方法给添加属性成功时调用 fix: 为了在只有一个属性下 spu 回显 skus 属性和和商品属性个数一致的情况下 添加属性值时添加 sku
|
// 暴露出生成 sku 方法,给添加属性成功时调用
|
||||||
defineExpose({ generateTableData })
|
defineExpose({ generateTableData })
|
||||||
</script>
|
</script>
|
||||||
|
@ -8,7 +8,7 @@
|
|||||||
class="-mb-15px"
|
class="-mb-15px"
|
||||||
label-width="68px"
|
label-width="68px"
|
||||||
>
|
>
|
||||||
<!-- TODO @puhui999:https://admin.java.crmeb.net/store/index,参考,使用分类 + 标题搜索 fix-->
|
<!-- TODO @puhui999:品牌应该是数据下拉哈 -->
|
||||||
<el-form-item label="品牌名称" prop="name">
|
<el-form-item label="品牌名称" prop="name">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="queryParams.name"
|
v-model="queryParams.name"
|
||||||
@ -19,6 +19,7 @@
|
|||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<!-- TODO 分类只能选择二级分类目前还没做,还是先以联调通顺为主 -->
|
<!-- TODO 分类只能选择二级分类目前还没做,还是先以联调通顺为主 -->
|
||||||
|
<!-- TODO puhui999:我们要不改成支持选择一级。如果选择一级,后端要递归查询下子分类,然后去 in? -->
|
||||||
<el-form-item label="商品分类" prop="categoryId">
|
<el-form-item label="商品分类" prop="categoryId">
|
||||||
<el-tree-select
|
<el-tree-select
|
||||||
v-model="queryParams.categoryId"
|
v-model="queryParams.categoryId"
|
||||||
@ -70,7 +71,12 @@
|
|||||||
/>
|
/>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
<el-table v-loading="loading" :data="list">
|
<el-table v-loading="loading" :data="list">
|
||||||
<!-- TODO 折叠数据按需增加暂定以下三个 -->
|
<!-- TODO puhui:这几个属性哈,一行三个
|
||||||
|
商品分类:服装鞋包/箱包
|
||||||
|
商品市场价格:100.00
|
||||||
|
成本价:0.00
|
||||||
|
收藏:5
|
||||||
|
虚拟销量:999 -->
|
||||||
<el-table-column type="expand" width="30">
|
<el-table-column type="expand" width="30">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<el-form class="demo-table-expand" inline label-position="left">
|
<el-form class="demo-table-expand" inline label-position="left">
|
||||||
@ -86,19 +92,13 @@
|
|||||||
</el-form>
|
</el-form>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<!-- TODO puhui999: ID 编号的展示 fix-->
|
|
||||||
<el-table-column key="id" align="center" label="商品编号" prop="id" />
|
<el-table-column key="id" align="center" label="商品编号" prop="id" />
|
||||||
<el-table-column label="商品图" min-width="80">
|
<el-table-column label="商品图" min-width="80">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<el-image
|
<el-image :src="row.picUrl" @click="imagePreview(row.picUrl)" class="w-30px h-30px" />
|
||||||
:src="row.picUrl"
|
|
||||||
style="width: 30px; height: 30px"
|
|
||||||
@click="imagePreview(row.picUrl)"
|
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column :show-overflow-tooltip="true" label="商品名称" min-width="300" prop="name" />
|
<el-table-column :show-overflow-tooltip="true" label="商品名称" min-width="300" prop="name" />
|
||||||
<!-- TODO 价格 / 100.0 -->
|
|
||||||
<el-table-column align="center" label="商品售价" min-width="90" prop="price">
|
<el-table-column align="center" label="商品售价" min-width="90" prop="price">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
{{ formatToFraction(row.price) }}
|
{{ formatToFraction(row.price) }}
|
||||||
@ -116,7 +116,6 @@
|
|||||||
/>
|
/>
|
||||||
<el-table-column align="center" label="状态" min-width="80">
|
<el-table-column align="center" label="状态" min-width="80">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<!-- fix: 修复打开回收站时商品误触改变商品状态的事件,因为el-switch只用0和1没有-1所以当商品状态为-1时状态使用el-tag显示 -->
|
|
||||||
<template v-if="row.status >= 0">
|
<template v-if="row.status >= 0">
|
||||||
<el-switch
|
<el-switch
|
||||||
v-model="row.status"
|
v-model="row.status"
|
||||||
@ -238,7 +237,6 @@ const tabsData = ref([
|
|||||||
|
|
||||||
/** 获得每个 Tab 的数量 */
|
/** 获得每个 Tab 的数量 */
|
||||||
const getTabsCount = async () => {
|
const getTabsCount = async () => {
|
||||||
// TODO @puhui999:这里是不是可以不要 try catch 哈 fix
|
|
||||||
const res = await ProductSpuApi.getTabsCount()
|
const res = await ProductSpuApi.getTabsCount()
|
||||||
for (let objName in res) {
|
for (let objName in res) {
|
||||||
tabsData.value[Number(objName)].count = res[objName]
|
tabsData.value[Number(objName)].count = res[objName]
|
||||||
@ -251,7 +249,6 @@ const queryParams = ref({
|
|||||||
}) // 查询参数
|
}) // 查询参数
|
||||||
const queryFormRef = ref() // 搜索的表单Ref
|
const queryFormRef = ref() // 搜索的表单Ref
|
||||||
|
|
||||||
// TODO @puhui999:可以改成 handleTabClick:更准确一点;fix
|
|
||||||
const handleTabClick = (tab: TabsPaneContext) => {
|
const handleTabClick = (tab: TabsPaneContext) => {
|
||||||
queryParams.value.tabType = tab.paneName
|
queryParams.value.tabType = tab.paneName
|
||||||
getList()
|
getList()
|
||||||
@ -269,7 +266,6 @@ const getList = async () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO @puhui999:是不是 changeStatus 和 addToTrash 调用一个统一的方法,去更新状态。这样逻辑会更干净一些。fix
|
|
||||||
/**
|
/**
|
||||||
* 更改 SPU 状态
|
* 更改 SPU 状态
|
||||||
*
|
*
|
||||||
@ -277,7 +273,6 @@ const getList = async () => {
|
|||||||
* @param status 更改前的值
|
* @param status 更改前的值
|
||||||
*/
|
*/
|
||||||
const changeStatus = async (row, status?: number) => {
|
const changeStatus = async (row, status?: number) => {
|
||||||
// fix: 将加入回收站功能合并到changeStatus并优化
|
|
||||||
const deepCopyValue = cloneDeep(unref(row))
|
const deepCopyValue = cloneDeep(unref(row))
|
||||||
if (typeof status !== 'undefined') deepCopyValue.status = status
|
if (typeof status !== 'undefined') deepCopyValue.status = status
|
||||||
try {
|
try {
|
||||||
@ -293,7 +288,6 @@ const changeStatus = async (row, status?: number) => {
|
|||||||
text = `加入${ProductSpuStatusEnum.RECYCLE.name}`
|
text = `加入${ProductSpuStatusEnum.RECYCLE.name}`
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
// fix: 修复恢复到仓库的信息提示
|
|
||||||
await message.confirm(
|
await message.confirm(
|
||||||
deepCopyValue.status === -1
|
deepCopyValue.status === -1
|
||||||
? `确认要将[${row.name}]${text}吗?`
|
? `确认要将[${row.name}]${text}吗?`
|
||||||
@ -331,12 +325,8 @@ const handleDelete = async (id: number) => {
|
|||||||
} catch {}
|
} catch {}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/** 商品图预览 */
|
||||||
* 商品图预览
|
|
||||||
* @param imgUrl
|
|
||||||
*/
|
|
||||||
const imagePreview = (imgUrl: string) => {
|
const imagePreview = (imgUrl: string) => {
|
||||||
// fix: 改用https://kailong110120130.gitee.io/vue-element-plus-admin-doc/components/image-viewer.html 预览图片
|
|
||||||
createImageViewer({
|
createImageViewer({
|
||||||
urlList: [imgUrl]
|
urlList: [imgUrl]
|
||||||
})
|
})
|
||||||
@ -367,19 +357,22 @@ const openForm = (id?: number) => {
|
|||||||
// 新增
|
// 新增
|
||||||
push('/product/productSpuAdd')
|
push('/product/productSpuAdd')
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 查看商品详情
|
* 查看商品详情
|
||||||
*/
|
*/
|
||||||
const openDetail = () => {
|
const openDetail = () => {
|
||||||
message.alert('查看详情未完善!!!')
|
message.alert('查看详情未完善!!!')
|
||||||
}
|
}
|
||||||
// 监听路由变化更新列表 TODO @puhui999:这个是必须加的么?fix: 因为编辑表单是以路由的方式打开,保存表单后列表不会刷新
|
|
||||||
|
// 监听路由变化更新列表,解决商品保存后,列表不刷新的问题。
|
||||||
watch(
|
watch(
|
||||||
() => currentRoute.value,
|
() => currentRoute.value,
|
||||||
() => {
|
() => {
|
||||||
getList()
|
getList()
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
const categoryList = ref() // 分类树
|
const categoryList = ref() // 分类树
|
||||||
/** 初始化 **/
|
/** 初始化 **/
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
|
Loading…
Reference in New Issue
Block a user