fix: 修复 spu 详情查看错误,同步 mall seckill 组件 name 配置方式
parent
5d613e69b3
commit
76ccc54a35
|
@ -55,9 +55,9 @@ const { delView } = useTagsViewStore() // 视图操作
|
||||||
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
|
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
|
||||||
const activeName = ref('basicInfo') // Tag 激活的窗口
|
const activeName = ref('basicInfo') // Tag 激活的窗口
|
||||||
const isDetail = ref(false) // 是否查看详情
|
const isDetail = ref(false) // 是否查看详情
|
||||||
const basicInfoRef = ref<ComponentRef<typeof BasicInfoForm>>() // 商品信息Ref
|
const basicInfoRef = ref() // 商品信息Ref
|
||||||
const descriptionRef = ref<ComponentRef<typeof DescriptionForm>>() // 商品详情Ref
|
const descriptionRef = ref() // 商品详情Ref
|
||||||
const otherSettingsRef = ref<ComponentRef<typeof OtherSettingsForm>>() // 其他设置Ref
|
const otherSettingsRef = ref() // 其他设置Ref
|
||||||
// spu 表单数据
|
// spu 表单数据
|
||||||
const formData = ref<ProductSpuApi.Spu>({
|
const formData = ref<ProductSpuApi.Spu>({
|
||||||
name: '', // 商品名称
|
name: '', // 商品名称
|
||||||
|
@ -98,7 +98,7 @@ const formData = ref<ProductSpuApi.Spu>({
|
||||||
|
|
||||||
/** 获得详情 */
|
/** 获得详情 */
|
||||||
const getDetail = async () => {
|
const getDetail = async () => {
|
||||||
if ('productSpuDetail' === name) {
|
if ('ProductSpuDetail' === name) {
|
||||||
isDetail.value = true
|
isDetail.value = true
|
||||||
}
|
}
|
||||||
const id = params.spuId as number
|
const id = params.spuId as number
|
||||||
|
|
|
@ -176,7 +176,7 @@ import { checkSelectedNode, defaultProps, handleTree, treeToString } from '@/uti
|
||||||
import { createImageViewer } from '@/components/ImageViewer'
|
import { createImageViewer } from '@/components/ImageViewer'
|
||||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||||
import { UploadImg, UploadImgs } from '@/components/UploadFile'
|
import { UploadImg, UploadImgs } from '@/components/UploadFile'
|
||||||
import { ProductAttributes, ProductPropertyAddForm, SkuList } from './index'
|
import { getPropertyList, ProductAttributes, ProductPropertyAddForm, SkuList } from './index'
|
||||||
import { basicInfoSchema } from './spu.data'
|
import { basicInfoSchema } from './spu.data'
|
||||||
import type { Spu } from '@/api/mall/product/spu'
|
import type { Spu } from '@/api/mall/product/spu'
|
||||||
import * as ProductCategoryApi from '@/api/mall/product/category'
|
import * as ProductCategoryApi from '@/api/mall/product/category'
|
||||||
|
@ -242,7 +242,7 @@ const rules = reactive({
|
||||||
introduction: [required],
|
introduction: [required],
|
||||||
picUrl: [required],
|
picUrl: [required],
|
||||||
sliderPicUrls: [required],
|
sliderPicUrls: [required],
|
||||||
// deliveryTemplateId: [required],
|
deliveryTemplateId: [required],
|
||||||
brandId: [required],
|
brandId: [required],
|
||||||
specType: [required],
|
specType: [required],
|
||||||
subCommissionType: [required]
|
subCommissionType: [required]
|
||||||
|
@ -261,26 +261,7 @@ watch(
|
||||||
formData.sliderPicUrls = data['sliderPicUrls']?.map((item) => ({
|
formData.sliderPicUrls = data['sliderPicUrls']?.map((item) => ({
|
||||||
url: item
|
url: item
|
||||||
}))
|
}))
|
||||||
// 只有是多规格才处理
|
propertyList.value = getPropertyList(data)
|
||||||
if (!formData.specType) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// 直接拿返回的 skus 属性逆向生成出 propertyList
|
|
||||||
const properties = []
|
|
||||||
formData.skus?.forEach((sku) => {
|
|
||||||
sku.properties?.forEach(({ propertyId, propertyName, valueId, valueName }) => {
|
|
||||||
// 添加属性
|
|
||||||
if (!properties?.some((item) => item.id === propertyId)) {
|
|
||||||
properties.push({ id: propertyId, name: propertyName, values: [] })
|
|
||||||
}
|
|
||||||
// 添加属性值
|
|
||||||
const index = properties?.findIndex((item) => item.id === propertyId)
|
|
||||||
if (!properties[index].values?.some((value) => value.id === valueId)) {
|
|
||||||
properties[index].values?.push({ id: valueId, name: valueName })
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
propertyList.value = properties
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
immediate: true
|
immediate: true
|
||||||
|
|
|
@ -22,13 +22,15 @@
|
||||||
<!-- TODO @puhui999:这个组件是不是 SpuSelect,不需要带 sku 或者 Form 呀 -->
|
<!-- TODO @puhui999:这个组件是不是 SpuSelect,不需要带 sku 或者 Form 呀 -->
|
||||||
<SpuAndSkuSelectForm ref="spuAndSkuSelectForm" @confirm="selectSpu" />
|
<SpuAndSkuSelectForm ref="spuAndSkuSelectForm" @confirm="selectSpu" />
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" name="PromotionSeckillActivityForm" setup>
|
<script lang="ts" setup>
|
||||||
import { SpuAndSkuList, SpuAndSkuSelectForm } from './components'
|
import { SpuAndSkuList, SpuAndSkuSelectForm } from './components'
|
||||||
import { allSchemas, rules } from './seckillActivity.data'
|
import { allSchemas, rules } from './seckillActivity.data'
|
||||||
import { Spu } from '@/api/mall/product/spu'
|
import { Spu } from '@/api/mall/product/spu'
|
||||||
|
|
||||||
import * as SeckillActivityApi from '@/api/mall/promotion/seckill/seckillActivity'
|
import * as SeckillActivityApi from '@/api/mall/promotion/seckill/seckillActivity'
|
||||||
|
|
||||||
|
defineOptions({ name: 'PromotionSeckillActivityForm' })
|
||||||
|
|
||||||
const { t } = useI18n() // 国际化
|
const { t } = useI18n() // 国际化
|
||||||
const message = useMessage() // 消息弹窗
|
const message = useMessage() // 消息弹窗
|
||||||
|
|
||||||
|
|
|
@ -46,7 +46,7 @@
|
||||||
<el-table-column align="center" label="库存" min-width="90" prop="stock" />
|
<el-table-column align="center" label="库存" min-width="90" prop="stock" />
|
||||||
</el-table>
|
</el-table>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" name="SpuAndSkuList" setup>
|
<script lang="ts" setup>
|
||||||
// TODO 后续计划重新封装作为活动商品配置通用组件;可以等其他活动做到的时候,在统一处理 SPU 选择组件哈
|
// TODO 后续计划重新封装作为活动商品配置通用组件;可以等其他活动做到的时候,在统一处理 SPU 选择组件哈
|
||||||
import { formatToFraction } from '@/utils'
|
import { formatToFraction } from '@/utils'
|
||||||
import { createImageViewer } from '@/components/ImageViewer'
|
import { createImageViewer } from '@/components/ImageViewer'
|
||||||
|
@ -59,6 +59,9 @@ import {
|
||||||
SkuList
|
SkuList
|
||||||
} from '@/views/mall/product/spu/components'
|
} from '@/views/mall/product/spu/components'
|
||||||
import { SeckillProductVO, SpuExtension } from '@/api/mall/promotion/seckill/seckillActivity'
|
import { SeckillProductVO, SpuExtension } from '@/api/mall/promotion/seckill/seckillActivity'
|
||||||
|
|
||||||
|
defineOptions({ name: 'PromotionSpuAndSkuList' })
|
||||||
|
|
||||||
const message = useMessage() // 消息弹窗
|
const message = useMessage() // 消息弹窗
|
||||||
|
|
||||||
// TODO @puhui999:是不是改成传递一个 spu 就好啦?
|
// TODO @puhui999:是不是改成传递一个 spu 就好啦?
|
||||||
|
|
|
@ -110,7 +110,7 @@
|
||||||
</Dialog>
|
</Dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" name="SeckillActivitySpuAndSkuSelect" setup>
|
<script lang="ts" setup>
|
||||||
import { getPropertyList, Properties, SkuList } from '@/views/mall/product/spu/components'
|
import { getPropertyList, Properties, SkuList } from '@/views/mall/product/spu/components'
|
||||||
import { ElTable } from 'element-plus'
|
import { ElTable } from 'element-plus'
|
||||||
import { dateFormatter } from '@/utils/formatTime'
|
import { dateFormatter } from '@/utils/formatTime'
|
||||||
|
@ -122,6 +122,8 @@ import * as ProductCategoryApi from '@/api/mall/product/category'
|
||||||
import * as ProductSpuApi from '@/api/mall/product/spu'
|
import * as ProductSpuApi from '@/api/mall/product/spu'
|
||||||
import { propTypes } from '@/utils/propTypes'
|
import { propTypes } from '@/utils/propTypes'
|
||||||
|
|
||||||
|
defineOptions({ name: 'PromotionSpuAndSkuSelect' })
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
// 默认不需要(不需要的情况下只返回 spu,需要的情况下返回 选中的 spu 和 sku 列表)
|
// 默认不需要(不需要的情况下只返回 spu,需要的情况下返回 选中的 spu 和 sku 列表)
|
||||||
// 其它活动需要选择商品和商品属性导入此组件即可,需添加组件属性 :isSelectSku='true'
|
// 其它活动需要选择商品和商品属性导入此组件即可,需添加组件属性 :isSelectSku='true'
|
||||||
|
|
|
@ -53,11 +53,13 @@
|
||||||
<!-- 表单弹窗:添加/修改 -->
|
<!-- 表单弹窗:添加/修改 -->
|
||||||
<SeckillActivityForm ref="formRef" @success="getList" />
|
<SeckillActivityForm ref="formRef" @success="getList" />
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" name="PromotionSeckillActivity" setup>
|
<script lang="ts" setup>
|
||||||
import { allSchemas } from './seckillActivity.data'
|
import { allSchemas } from './seckillActivity.data'
|
||||||
import * as SeckillActivityApi from '@/api/mall/promotion/seckill/seckillActivity'
|
import * as SeckillActivityApi from '@/api/mall/promotion/seckill/seckillActivity'
|
||||||
import SeckillActivityForm from './SeckillActivityForm.vue'
|
import SeckillActivityForm from './SeckillActivityForm.vue'
|
||||||
|
|
||||||
|
defineOptions({ name: 'PromotionSeckillActivity' })
|
||||||
|
|
||||||
// tableObject:表格的属性对象,可获得分页大小、条数等属性
|
// tableObject:表格的属性对象,可获得分页大小、条数等属性
|
||||||
// tableMethods:表格的操作对象,可进行获得分页、删除记录等操作
|
// tableMethods:表格的操作对象,可进行获得分页、删除记录等操作
|
||||||
// 详细可见:https://doc.iocoder.cn/vue3/crud-schema/
|
// 详细可见:https://doc.iocoder.cn/vue3/crud-schema/
|
||||||
|
|
Loading…
Reference in New Issue