yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

商品管理: 调整相关组件优化逻辑

pull/141/head
puhui999 2023-05-01 19:01:24 +08:00
parent 64f6f67ddd
commit 6478d295df
6 changed files with 195 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/mall/product/management/type/spuType.ts
View File

@ -2,9 +2,9 @@ import { SkuType } from './skuType'
export interface SpuType {
name?: string // 商品名称
categoryId?: number | undefined // 商品分类
categoryId?: number | null // 商品分类
keyword?: string // 关键字
unit?: string // 单位
unit?: number | null // 单位
picUrl?: string // 商品封面图
sliderPicUrls?: string[] // 商品轮播图
introduction?: string // 商品简介

5
src/utils/dict.ts
View File

@ -144,5 +144,8 @@ export enum DICT_TYPE {
// ========== MP 模块 ==========
MP_AUTO_REPLY_REQUEST_MATCH = 'mp_auto_reply_request_match', // 自动回复请求匹配类型
MP_MESSAGE_TYPE = 'mp_message_type' // 消息类型
MP_MESSAGE_TYPE = 'mp_message_type', // 消息类型
// ========== MALL 模块 ==========
PRODUCT_UNIT = 'product_unit' // 商品单位
}

97
src/views/mall/product/management/addForm.vue
View File

@ -34,8 +34,7 @@
<script lang="ts" name="ProductManagementForm" setup>
import { useTagsViewStore } from '@/store/modules/tagsView'
import { BasicInfoForm, DescriptionForm, OtherSettingsForm } from './components'
import type { SpuType } from '@/api/mall/product/management/type/spuType'
// 业务api
import type { SpuType } from '@/api/mall/product/management/type/spuType' // 业务api
import * as managementApi from '@/api/mall/product/management/spu'
const { t } = useI18n() // 国际化
@ -50,18 +49,67 @@ const BasicInfoRef = ref<ComponentRef<typeof BasicInfoForm>>() // 商品信息Re
const DescriptionRef = ref<ComponentRef<typeof DescriptionForm>>() // 商品详情Ref
const OtherSettingsRef = ref<ComponentRef<typeof OtherSettingsForm>>() // 其他设置Ref
const formData = ref<SpuType>({
name: '', // 商品名称
categoryId: undefined, // 商品分类
keyword: '', // 关键字
unit: '', // 单位
picUrl: '', // 商品封面图
sliderPicUrls: [], // 商品轮播图
introduction: '', // 商品简介
name: '213', // 商品名称
categoryId: null, // 商品分类
keyword: '213', // 关键字
unit: null, // 单位
picUrl:
'http://127.0.0.1:48080/admin-api/infra/file/4/get/6ffdf8f5dfc03f7ceec1ff1ebc138adb8b721a057d505ccfb0e61a8783af1371.png', // 商品封面图
sliderPicUrls: [
{
name: 'http://127.0.0.1:48080/admin-api/infra/file/4/get/6ffdf8f5dfc03f7ceec1ff1ebc138adb8b721a057d505ccfb0e61a8783af1371.png',
url: 'http://127.0.0.1:48080/admin-api/infra/file/4/get/6ffdf8f5dfc03f7ceec1ff1ebc138adb8b721a057d505ccfb0e61a8783af1371.png'
}
], // 商品轮播图
introduction: '213', // 商品简介
deliveryTemplateId: 0, // 运费模版
selectRule: '',
specType: false, // 商品规格
subCommissionType: false, // 分销类型
description: '', // 商品详情
skus: [
{
/**
* 商品价格，单位：分
*/
price: 0,
/**
* 市场价，单位：分
*/
marketPrice: 0,
/**
* 成本价，单位：分
*/
costPrice: 0,
/**
* 商品条码
*/
barCode: '',
/**
* 图片地址
*/
picUrl: '',
/**
* 库存
*/
stock: 0,
/**
* 商品重量，单位：kg 千克
*/
weight: 0,
/**
* 商品体积，单位：m^3 平米
*/
volume: 0,
/**
* 一级分销的佣金，单位：分
*/
subCommissionFirstPrice: 0,
/**
* 二级分销的佣金，单位：分
*/
subCommissionSecondPrice: 0
}
],
description: '5425', // 商品详情
sort: 1, // 商品排序
giveIntegral: 1, // 赠送积分
virtualSalesCount: 1, // 虚拟销量
@ -83,14 +131,38 @@ const getDetail = async () => {
const submitForm = async () => {
// 提交请求
formLoading.value = true
const newSkus = [...formData.value.skus] //复制一份skus保存失败时使用
// TODO 三个表单逐一校验，如果有一个表单校验不通过则切换到对应表单，如果有两个及以上的情况则切换到最前面的一个并弹出提示消息
// 校验各表单
try {
await unref(BasicInfoRef)?.validate()
await unref(DescriptionRef)?.validate()
await unref(OtherSettingsRef)?.validate()
// 处理掉一些无关数据
formData.value.skus.forEach((item) => {
// 给sku name赋值
item.name = formData.value.name
// 多规格情况移除skus相关属性值value
if (formData.value.specType) {
item.properties.forEach((item2) => {
delete item2.value
})
}
})
// 处理轮播图列表
const newSliderPicUrls = []
formData.value.sliderPicUrls.forEach((item) => {
// 如果是前端选的图
if (typeof item === 'object') {
newSliderPicUrls.push(item.url)
} else {
newSliderPicUrls.push(item)
}
})
formData.value.sliderPicUrls = newSliderPicUrls
// 校验都通过后提交表单
const data = formData.value as SpuType
// 移除skus.
const id = query.id as unknown as number
if (!id) {
await managementApi.createSpu(data)
@ -99,6 +171,9 @@ const submitForm = async () => {
await managementApi.updateSpu(data)
message.success(t('common.updateSuccess'))
}
} catch (e) {
console.log(e)
console.log(newSkus)
} finally {
formLoading.value = false
}

97
src/views/mall/product/management/components/BasicInfoForm.vue
View File

@ -25,7 +25,14 @@
</el-col>
<el-col :span="12">
<el-form-item label="单位" prop="unit">
<el-input v-model="formData.unit" placeholder="请输入单位" />
<el-select v-model="formData.unit" placeholder="请选择单位">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.PRODUCT_UNIT)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
@ -60,7 +67,7 @@
</el-col>
<el-col :span="12">
<el-form-item label="商品规格" props="specType">
<el-radio-group v-model="formData.specType">
<el-radio-group v-model="formData.specType" @change="onChangeSpec">
<el-radio :label="false" class="radio">单规格</el-radio>
<el-radio :label="true">多规格</el-radio>
</el-radio-group>
@ -82,10 +89,15 @@
</el-button>
<ProductAttributes :attribute-data="attributeList" />
</el-form-item>
<el-form-item v-if="formData.specType" label="批量设置">
<SkuList :attributeList="attributeList" :is-batch="true" :prop-form-data="formData" />
</el-form-item>
<el-form-item>
<template v-if="formData.specType && attributeList.length > 0">
<el-form-item label="批量设置">
<SkuList :attributeList="attributeList" :is-batch="true" :prop-form-data="formData" />
</el-form-item>
<el-form-item label="属性列表">
<SkuList :attributeList="attributeList" :prop-form-data="formData" />
</el-form-item>
</template>
<el-form-item v-if="!formData.specType">
<SkuList :attributeList="attributeList" :prop-form-data="formData" />
</el-form-item>
</el-col>
@ -95,16 +107,15 @@
</template>
<script lang="ts" name="ProductManagementBasicInfoForm" setup>
import { PropType } from 'vue'
import type { SpuType } from '@/api/mall/product/management/type/spuType'
import { UploadImg, UploadImgs } from '@/components/UploadFile'
import SkuList from './SkuList/index.vue'
import ProductAttributesAddForm from './ProductAttributesAddForm.vue'
import ProductAttributes from './ProductAttributes.vue'
import { copyValueToTarget } from '@/utils/object'
// 业务Api
import * as ProductCategoryApi from '@/api/mall/product/category'
import { defaultProps, handleTree } from '@/utils/tree'
import { ElInput } from 'element-plus'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import type { SpuType } from '@/api/mall/product/management/type/spuType'
import { UploadImg, UploadImgs } from '@/components/UploadFile'
import { copyValueToTarget } from '@/utils/object'
import { ProductAttributes, ProductAttributesAddForm, SkuList } from './index'
// 业务Api
import * as ProductCategoryApi from '@/api/mall/product/category'
const message = useMessage() // 消息弹窗
const props = defineProps({
@ -131,42 +142,7 @@ const formData = reactive<SpuType>({
deliveryTemplateId: 1, // 运费模版
specType: false, // 商品规格
subCommissionType: false, // 分销类型
skus: [
{
/**
* 商品价格，单位：分
*/
price: 0,
/**
* 市场价，单位：分
*/
marketPrice: 0,
/**
* 成本价，单位：分
*/
costPrice: 0,
/**
* 商品条码
*/
barCode: '',
/**
* 图片地址
*/
picUrl: '',
/**
* 库存
*/
stock: 0,
/**
* 商品重量，单位：kg 千克
*/
weight: 0,
/**
* 商品体积，单位：m^3 平米
*/
volume: 0
}
]
skus: []
})
const rules = reactive({
name: [required],
@ -223,6 +199,27 @@ const changeSubCommissionType = () => {
item.subCommissionSecondPrice = 0
}
}
// 选择规格
const onChangeSpec = () => {
console.log(111)
// 重置商品属性列表
attributeList.value = []
// 重置sku列表
formData.skus = [
{
price: 0,
marketPrice: 0,
costPrice: 0,
barCode: '',
picUrl: '',
stock: 0,
weight: 0,
volume: 0,
subCommissionFirstPrice: 0,
subCommissionSecondPrice: 0
}
]
}
const categoryList = ref() // 分类树
onMounted(async () => {

58
src/views/mall/product/management/components/SkuList/index.vue → src/views/mall/product/management/components/SkuList.vue
View File

@ -21,48 +21,68 @@
</template>
<el-table-column align="center" label="商品条码" min-width="120">
<template #default="{ row }">
<el-input v-model="row.barCode" :min="0" class="w-100%" />
<el-input v-model="row.barCode" class="w-100%" />
</template>
</el-table-column>
<el-table-column align="center" label="销售价(分)" min-width="120">
<template #default="{ row }">
<el-input v-model="row.price" :min="0" class="w-100%" type="number" />
<el-input-number v-model="row.price" :min="0" class="w-100%" controls-position="right" />
</template>
</el-table-column>
<el-table-column align="center" label="市场价(分)" min-width="120">
<template #default="{ row }">
<el-input v-model="row.marketPrice" :min="0" class="w-100%" type="number" />
<el-input-number
v-model="row.marketPrice"
:min="0"
class="w-100%"
controls-position="right"
/>
</template>
</el-table-column>
<el-table-column align="center" label="成本价(分)" min-width="120">
<template #default="{ row }">
<el-input v-model="row.costPrice" :min="0" class="w-100%" type="number" />
<el-input-number
v-model="row.costPrice"
:min="0"
class="w-100%"
controls-position="right"
/>
</template>
</el-table-column>
<el-table-column align="center" label="库存" min-width="120">
<template #default="{ row }">
<el-input v-model="row.stock" :min="0" class="w-100%" type="number" />
<el-input-number v-model="row.stock" :min="0" class="w-100%" controls-position="right" />
</template>
</el-table-column>
<el-table-column align="center" label="重量(kg)" min-width="120">
<template #default="{ row }">
<el-input v-model="row.weight" :min="0" class="w-100%" type="number" />
<el-input-number v-model="row.weight" :min="0" class="w-100%" controls-position="right" />
</template>
</el-table-column>
<el-table-column align="center" label="体积(m^3)" min-width="120">
<template #default="{ row }">
<el-input v-model="row.volume" :min="0" class="w-100%" type="number" />
<el-input-number v-model="row.volume" :min="0" class="w-100%" controls-position="right" />
</template>
</el-table-column>
<template v-if="formData.subCommissionType">
<el-table-column align="center" label="一级返佣(分)" min-width="120">
<template #default="{ row }">
<el-input v-model="row.subCommissionFirstPrice" :min="0" class="w-100%" type="number" />
<el-input-number
v-model="row.subCommissionFirstPrice"
:min="0"
class="w-100%"
controls-position="right"
/>
</template>
</el-table-column>
<el-table-column align="center" label="二级返佣(分)" min-width="120">
<template #default="{ row }">
<el-input v-model="row.subCommissionSecondPrice" :min="0" class="w-100%" type="number" />
<el-input-number
v-model="row.subCommissionSecondPrice"
:min="0"
class="w-100%"
controls-position="right"
/>
</template>
</el-table-column>
</template>
@ -77,7 +97,7 @@
</el-table>
</template>
<script lang="ts" name="index" setup>
<script lang="ts" name="SkuList" setup>
import { UploadImg } from '@/components/UploadFile'
import { PropType } from 'vue'
import { SpuType } from '@/api/mall/product/management/type/spuType'
@ -131,7 +151,15 @@ const SkuData = ref<SkuType[]>([
/**
* 商品体积，单位：m^3 平米
*/
volume: 0
volume: 0,
/**
* 一级分销的佣金，单位：分
*/
subCommissionFirstPrice: 0,
/**
* 二级分销的佣金，单位：分
*/
subCommissionSecondPrice: 0
}
])
/** 批量添加 */
@ -180,7 +208,9 @@ const generateTableData = (data: any[]) => {
picUrl: '',
stock: 0,
weight: 0,
volume: 0
volume: 0,
subCommissionFirstPrice: 0,
subCommissionSecondPrice: 0
}
if (Array.isArray(item)) {
row.properties = item
@ -229,7 +259,9 @@ watch(
picUrl: '',
stock: 0,
weight: 0,
volume: 0
volume: 0,
subCommissionFirstPrice: 0,
subCommissionSecondPrice: 0
}
]
}

12
src/views/mall/product/management/components/index.ts
View File

@ -1,5 +1,15 @@
import BasicInfoForm from './BasicInfoForm.vue'
import DescriptionForm from './DescriptionForm.vue'
import OtherSettingsForm from './OtherSettingsForm.vue'
import ProductAttributes from './ProductAttributes.vue'
import ProductAttributesAddForm from './ProductAttributesAddForm.vue'
import SkuList from './SkuList.vue'
export { BasicInfoForm, DescriptionForm, OtherSettingsForm }
export {
BasicInfoForm,
DescriptionForm,
OtherSettingsForm,
ProductAttributes,
ProductAttributesAddForm,
SkuList
}