237 lines
7.3 KiB
Vue
237 lines
7.3 KiB
Vue
<template>
|
||
<ContentWrap v-loading="formLoading">
|
||
<el-tabs v-model="activeName">
|
||
<el-tab-pane label="商品信息" name="basicInfo">
|
||
<BasicInfoForm
|
||
ref="BasicInfoRef"
|
||
v-model:activeName="activeName"
|
||
:propFormData="formData"
|
||
/>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="商品详情" name="description">
|
||
<DescriptionForm
|
||
ref="DescriptionRef"
|
||
v-model:activeName="activeName"
|
||
:propFormData="formData"
|
||
/>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="其他设置" name="otherSettings">
|
||
<OtherSettingsForm
|
||
ref="OtherSettingsRef"
|
||
v-model:activeName="activeName"
|
||
:propFormData="formData"
|
||
/>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
<el-form>
|
||
<el-form-item style="float: right">
|
||
<el-button :loading="formLoading" type="primary" @click="submitForm">保存</el-button>
|
||
<el-button @click="close">返回</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</ContentWrap>
|
||
</template>
|
||
<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 * as managementApi from '@/api/mall/product/management/spu'
|
||
import * as PropertyApi from '@/api/mall/product/property'
|
||
|
||
const { t } = useI18n() // 国际化
|
||
const message = useMessage() // 消息弹窗
|
||
const { push, currentRoute } = useRouter() // 路由
|
||
const { query } = 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', // 商品名称
|
||
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, // 运费模版
|
||
specType: false, // 商品规格
|
||
subCommissionType: false, // 分销类型
|
||
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, // 虚拟销量
|
||
recommendHot: false, // 是否热卖
|
||
recommendBenefit: false, // 是否优惠
|
||
recommendBest: false, // 是否精品
|
||
recommendNew: false, // 是否新品
|
||
recommendGood: false // 是否优品
|
||
})
|
||
/** 获得详情 */
|
||
const getDetail = async () => {
|
||
const id = query.id as unknown as number
|
||
if (id) {
|
||
formLoading.value = true
|
||
try {
|
||
const res = (await managementApi.getSpu(id)) as SpuType
|
||
formData.value = res
|
||
// 直接取第一个值就能得到所有属性的id
|
||
const propertyIds = res.skus[0]?.properties.map((item) => item.propertyId)
|
||
const PropertyS = await PropertyApi.getPropertyListAndValue({ propertyIds })
|
||
await nextTick()
|
||
// 回显商品属性
|
||
BasicInfoRef.value.addAttribute(PropertyS)
|
||
} finally {
|
||
formLoading.value = false
|
||
}
|
||
}
|
||
}
|
||
|
||
/** 提交按钮 */
|
||
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()
|
||
// 处理掉一些无关数据
|
||
formData.value.skus.forEach((item) => {
|
||
// 给sku name赋值
|
||
item.name = formData.value.name
|
||
// 多规格情况移除skus相关属性值value
|
||
if (formData.value.specType) {
|
||
item.properties.forEach((item2) => {
|
||
delete item2.valueName
|
||
})
|
||
}
|
||
})
|
||
// 处理轮播图列表
|
||
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)
|
||
message.success(t('common.createSuccess'))
|
||
} else {
|
||
await managementApi.updateSpu(data)
|
||
message.success(t('common.updateSuccess'))
|
||
}
|
||
close()
|
||
} catch (e) {
|
||
// 如果是后端校验失败,恢复skus数据
|
||
if (typeof e === 'string') {
|
||
formData.value.skus = newSkus
|
||
}
|
||
} finally {
|
||
formLoading.value = 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 = () => {
|
||
resetForm()
|
||
delView(unref(currentRoute))
|
||
push('/product/product-management')
|
||
}
|
||
|
||
/** 初始化 */
|
||
onMounted(() => {
|
||
getDetail()
|
||
})
|
||
</script>
|