|
@@ -3,21 +3,21 @@
|
|
|
<el-tabs v-model="activeName">
|
|
|
<el-tab-pane label="商品信息" name="basicInfo">
|
|
|
<BasicInfoForm
|
|
|
- ref="BasicInfoRef"
|
|
|
+ ref="basicInfoRef"
|
|
|
v-model:activeName="activeName"
|
|
|
:propFormData="formData"
|
|
|
/>
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane label="商品详情" name="description">
|
|
|
<DescriptionForm
|
|
|
- ref="DescriptionRef"
|
|
|
+ ref="descriptionRef"
|
|
|
v-model:activeName="activeName"
|
|
|
:propFormData="formData"
|
|
|
/>
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane label="其他设置" name="otherSettings">
|
|
|
<OtherSettingsForm
|
|
|
- ref="OtherSettingsRef"
|
|
|
+ ref="otherSettingsRef"
|
|
|
v-model:activeName="activeName"
|
|
|
:propFormData="formData"
|
|
|
/>
|
|
@@ -31,88 +31,55 @@
|
|
|
</el-form>
|
|
|
</ContentWrap>
|
|
|
</template>
|
|
|
-<script lang="ts" name="ProductManagementForm" setup>
|
|
|
+<script lang="ts" name="ProductSpuForm" setup>
|
|
|
+import { cloneDeep } from 'lodash-es'
|
|
|
import { useTagsViewStore } from '@/store/modules/tagsView'
|
|
|
import { BasicInfoForm, DescriptionForm, OtherSettingsForm } from './components'
|
|
|
-import type { SpuType } from '@/api/mall/product/management/type/spuType' // 业务api
|
|
|
-import * as managementApi from '@/api/mall/product/management/spu'
|
|
|
+// 业务api
|
|
|
+import * as ProductSpuApi from '@/api/mall/product/spu'
|
|
|
import * as PropertyApi from '@/api/mall/product/property'
|
|
|
+
|
|
|
const { t } = useI18n() // 国际化
|
|
|
const message = useMessage() // 消息弹窗
|
|
|
const { push, currentRoute } = useRouter() // 路由
|
|
|
-const { query } = useRoute() // 查询参数
|
|
|
+const { params } = useRoute() // 查询参数
|
|
|
const { delView } = useTagsViewStore() // 视图操作
|
|
|
|
|
|
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
|
|
|
const activeName = ref('basicInfo') // Tag 激活的窗口
|
|
|
-const BasicInfoRef = ref<ComponentRef<typeof BasicInfoForm>>() // 商品信息Ref
|
|
|
-const DescriptionRef = ref<ComponentRef<typeof DescriptionForm>>() // 商品详情Ref
|
|
|
-const OtherSettingsRef = ref<ComponentRef<typeof OtherSettingsForm>>() // 其他设置Ref
|
|
|
-const formData = ref<SpuType>({
|
|
|
- name: '213', // 商品名称
|
|
|
+const basicInfoRef = ref<ComponentRef<typeof BasicInfoForm>>() // 商品信息Ref
|
|
|
+const descriptionRef = ref<ComponentRef<typeof DescriptionForm>>() // 商品详情Ref
|
|
|
+const otherSettingsRef = ref<ComponentRef<typeof OtherSettingsForm>>() // 其他设置Ref
|
|
|
+// spu 表单数据
|
|
|
+const formData = ref<ProductSpuApi.SpuType>({
|
|
|
+ name: '', // 商品名称
|
|
|
categoryId: null, // 商品分类
|
|
|
- keyword: '213', // 关键字
|
|
|
+ keyword: '', // 关键字
|
|
|
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, // 运费模版
|
|
|
+ picUrl: '', // 商品封面图
|
|
|
+ sliderPicUrls: [], // 商品轮播图
|
|
|
+ introduction: '', // 商品简介
|
|
|
+ deliveryTemplateId: 1, // 运费模版
|
|
|
specType: false, // 商品规格
|
|
|
subCommissionType: false, // 分销类型
|
|
|
skus: [
|
|
|
{
|
|
|
- /**
|
|
|
- * 商品价格,单位:分 TODO @puhui999:注释放在尾巴哈,简洁一点~
|
|
|
- */
|
|
|
- price: 0,
|
|
|
- /**
|
|
|
- * 市场价,单位:分
|
|
|
- */
|
|
|
- marketPrice: 0,
|
|
|
- /**
|
|
|
- * 成本价,单位:分
|
|
|
- */
|
|
|
- costPrice: 0,
|
|
|
- /**
|
|
|
- * 商品条码
|
|
|
- */
|
|
|
- barCode: '',
|
|
|
- /**
|
|
|
- * 图片地址
|
|
|
- */
|
|
|
- picUrl: '',
|
|
|
- /**
|
|
|
- * 库存
|
|
|
- */
|
|
|
- stock: 0,
|
|
|
- /**
|
|
|
- * 商品重量,单位:kg 千克
|
|
|
- */
|
|
|
- weight: 0,
|
|
|
- /**
|
|
|
- * 商品体积,单位:m^3 平米
|
|
|
- */
|
|
|
- volume: 0,
|
|
|
- /**
|
|
|
- * 一级分销的佣金,单位:分
|
|
|
- */
|
|
|
- subCommissionFirstPrice: 0,
|
|
|
- /**
|
|
|
- * 二级分销的佣金,单位:分
|
|
|
- */
|
|
|
- subCommissionSecondPrice: 0
|
|
|
+ price: 0, // 商品价格
|
|
|
+ marketPrice: 0, // 市场价
|
|
|
+ costPrice: 0, // 成本价
|
|
|
+ barCode: '', // 商品条码
|
|
|
+ picUrl: '', // 图片地址
|
|
|
+ stock: 0, // 库存
|
|
|
+ weight: 0, // 商品重量
|
|
|
+ volume: 0, // 商品体积
|
|
|
+ subCommissionFirstPrice: 0, // 一级分销的佣金
|
|
|
+ subCommissionSecondPrice: 0 // 二级分销的佣金
|
|
|
}
|
|
|
],
|
|
|
- description: '5425', // 商品详情
|
|
|
- sort: 1, // 商品排序
|
|
|
- giveIntegral: 1, // 赠送积分
|
|
|
- virtualSalesCount: 1, // 虚拟销量
|
|
|
+ description: '', // 商品详情
|
|
|
+ sort: 0, // 商品排序
|
|
|
+ giveIntegral: 0, // 赠送积分
|
|
|
+ virtualSalesCount: 0, // 虚拟销量
|
|
|
recommendHot: false, // 是否热卖
|
|
|
recommendBenefit: false, // 是否优惠
|
|
|
recommendBest: false, // 是否精品
|
|
@@ -122,11 +89,11 @@ const formData = ref<SpuType>({
|
|
|
|
|
|
/** 获得详情 */
|
|
|
const getDetail = async () => {
|
|
|
- const id = query.id as unknown as number
|
|
|
+ const id = params.spuId as number
|
|
|
if (id) {
|
|
|
formLoading.value = true
|
|
|
try {
|
|
|
- const res = (await managementApi.getSpu(id)) as SpuType
|
|
|
+ const res = (await ProductSpuApi.getSpu(id)) as ProductSpuApi.SpuType
|
|
|
formData.value = res
|
|
|
// 直接取第一个值就能得到所有属性的id
|
|
|
// TODO @puhui999:可以直接拿 propertyName 拼接处规格 id + 属性,可以看下商品 uniapp 详情的做法
|
|
@@ -134,7 +101,7 @@ const getDetail = async () => {
|
|
|
const PropertyS = await PropertyApi.getPropertyListAndValue({ propertyIds })
|
|
|
await nextTick()
|
|
|
// 回显商品属性
|
|
|
- BasicInfoRef.value.addAttribute(PropertyS)
|
|
|
+ basicInfoRef.value.addAttribute(PropertyS)
|
|
|
} finally {
|
|
|
formLoading.value = false
|
|
|
}
|
|
@@ -145,54 +112,37 @@ const getDetail = async () => {
|
|
|
const submitForm = async () => {
|
|
|
// 提交请求
|
|
|
formLoading.value = true
|
|
|
- const newSkus = JSON.parse(JSON.stringify(formData.value.skus)) //深拷贝一份skus保存失败时使用
|
|
|
- // TODO 三个表单逐一校验,如果有一个表单校验不通过则切换到对应表单,如果有两个及以上的情况则切换到最前面的一个并弹出提示消息
|
|
|
+ // 三个表单逐一校验,如果有一个表单校验不通过则切换到对应表单,如果有两个及以上的情况则切换到最前面的一个并弹出提示消息
|
|
|
// 校验各表单
|
|
|
try {
|
|
|
- await unref(BasicInfoRef)?.validate()
|
|
|
- await unref(DescriptionRef)?.validate()
|
|
|
- await unref(OtherSettingsRef)?.validate()
|
|
|
- // TODO @puhui:直接做深拷贝?这样最终 server 端不满足,不需要恢复
|
|
|
+ await unref(basicInfoRef)?.validate()
|
|
|
+ await unref(descriptionRef)?.validate()
|
|
|
+ await unref(otherSettingsRef)?.validate()
|
|
|
+ const deepCopyFormData = cloneDeep(unref(formData.value)) // 深拷贝一份 fix:这样最终 server 端不满足,不需要恢复,
|
|
|
// 处理掉一些无关数据
|
|
|
- formData.value.skus.forEach((item) => {
|
|
|
+ deepCopyFormData.skus.forEach((item) => {
|
|
|
// 给sku name赋值
|
|
|
- item.name = formData.value.name
|
|
|
- // 多规格情况移除skus相关属性值value
|
|
|
- if (formData.value.specType) {
|
|
|
- item.properties.forEach((item2) => {
|
|
|
- delete item2.valueName
|
|
|
- })
|
|
|
- }
|
|
|
+ item.name = deepCopyFormData.name
|
|
|
})
|
|
|
// 处理轮播图列表
|
|
|
const newSliderPicUrls = []
|
|
|
- formData.value.sliderPicUrls.forEach((item) => {
|
|
|
+ deepCopyFormData.sliderPicUrls.forEach((item) => {
|
|
|
// 如果是前端选的图
|
|
|
- // TODO @puhui999:疑问哈,为啥会是 object 呀?
|
|
|
- if (typeof item === 'object') {
|
|
|
- newSliderPicUrls.push(item.url)
|
|
|
- } else {
|
|
|
- newSliderPicUrls.push(item)
|
|
|
- }
|
|
|
+ // TODO @puhui999:疑问哈,为啥会是 object 呀?fix
|
|
|
+ typeof item === 'object' ? newSliderPicUrls.push(item.url) : newSliderPicUrls.push(item)
|
|
|
})
|
|
|
- formData.value.sliderPicUrls = newSliderPicUrls
|
|
|
+ deepCopyFormData.sliderPicUrls = newSliderPicUrls
|
|
|
// 校验都通过后提交表单
|
|
|
- const data = formData.value as SpuType
|
|
|
- // 移除skus.
|
|
|
- const id = query.id as unknown as number
|
|
|
+ const data = deepCopyFormData as ProductSpuApi.SpuType
|
|
|
+ const id = params.spuId as number
|
|
|
if (!id) {
|
|
|
- await managementApi.createSpu(data)
|
|
|
+ await ProductSpuApi.createSpu(data)
|
|
|
message.success(t('common.createSuccess'))
|
|
|
} else {
|
|
|
- await managementApi.updateSpu(data)
|
|
|
+ await ProductSpuApi.updateSpu(data)
|
|
|
message.success(t('common.updateSuccess'))
|
|
|
}
|
|
|
close()
|
|
|
- } catch (e) {
|
|
|
- // 如果是后端校验失败,恢复skus数据
|
|
|
- if (typeof e === 'string') {
|
|
|
- formData.value.skus = newSkus
|
|
|
- }
|
|
|
} finally {
|
|
|
formLoading.value = false
|
|
|
}
|
|
@@ -200,41 +150,40 @@ const submitForm = async () => {
|
|
|
|
|
|
/**
|
|
|
* 重置表单
|
|
|
+ * fix:先注释保留,如果后期没有使用到则移除
|
|
|
*/
|
|
|
-const resetForm = async () => {
|
|
|
- formData.value = {
|
|
|
- name: '', // 商品名称
|
|
|
- categoryId: 0, // 商品分类
|
|
|
- keyword: '', // 关键字
|
|
|
- unit: '', // 单位
|
|
|
- picUrl: '', // 商品封面图
|
|
|
- sliderPicUrls: [], // 商品轮播图
|
|
|
- introduction: '', // 商品简介
|
|
|
- deliveryTemplateId: 0, // 运费模版
|
|
|
- selectRule: '',
|
|
|
- specType: false, // 商品规格
|
|
|
- subCommissionType: false, // 分销类型
|
|
|
- description: '', // 商品详情
|
|
|
- sort: 1, // 商品排序
|
|
|
- giveIntegral: 1, // 赠送积分
|
|
|
- virtualSalesCount: 1, // 虚拟销量
|
|
|
- recommendHot: false, // 是否热卖
|
|
|
- recommendBenefit: false, // 是否优惠
|
|
|
- recommendBest: false, // 是否精品
|
|
|
- recommendNew: false, // 是否新品
|
|
|
- recommendGood: false // 是否优品
|
|
|
- }
|
|
|
-}
|
|
|
+// const resetForm = async () => {
|
|
|
+// formData.value = {
|
|
|
+// name: '', // 商品名称
|
|
|
+// categoryId: 0, // 商品分类
|
|
|
+// keyword: '', // 关键字
|
|
|
+// unit: '', // 单位
|
|
|
+// picUrl: '', // 商品封面图
|
|
|
+// sliderPicUrls: [], // 商品轮播图
|
|
|
+// introduction: '', // 商品简介
|
|
|
+// deliveryTemplateId: 0, // 运费模版
|
|
|
+// selectRule: '',
|
|
|
+// specType: false, // 商品规格
|
|
|
+// subCommissionType: false, // 分销类型
|
|
|
+// description: '', // 商品详情
|
|
|
+// sort: 1, // 商品排序
|
|
|
+// giveIntegral: 1, // 赠送积分
|
|
|
+// virtualSalesCount: 1, // 虚拟销量
|
|
|
+// recommendHot: false, // 是否热卖
|
|
|
+// recommendBenefit: false, // 是否优惠
|
|
|
+// recommendBest: false, // 是否精品
|
|
|
+// recommendNew: false, // 是否新品
|
|
|
+// recommendGood: false // 是否优品
|
|
|
+// }
|
|
|
+// }
|
|
|
/** 关闭按钮 */
|
|
|
const close = () => {
|
|
|
- // TODO @puhui999:是不是不用 reset 呀?close 默认销毁
|
|
|
- resetForm()
|
|
|
delView(unref(currentRoute))
|
|
|
- push('/product/product-management')
|
|
|
+ push('/product/product-spu')
|
|
|
}
|
|
|
|
|
|
/** 初始化 */
|
|
|
-onMounted(() => {
|
|
|
- getDetail()
|
|
|
+onMounted(async () => {
|
|
|
+ await getDetail()
|
|
|
})
|
|
|
</script>
|