mirror of
https://gitee.com/hhyykk/ipms-sjy-ui.git
synced 2025-08-18 20:11:53 +08:00
重构：商品详情界面的路由、文件路径
This commit is contained in:
YunaiV
@@ -1,353 +0,0 @@
|
||||
<template>
|
||||
<!-- 情况一：添加/修改 -->
|
||||
<el-form
|
||||
v-if="!isDetail"
|
||||
ref="productSpuBasicInfoRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="商品名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入商品名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="商品分类" prop="categoryId">
|
||||
<el-tree-select
|
||||
v-model="formData.categoryId"
|
||||
:data="categoryList"
|
||||
:props="defaultProps"
|
||||
check-strictly
|
||||
class="w-1/1"
|
||||
node-key="id"
|
||||
placeholder="请选择商品分类"
|
||||
@change="categoryNodeClick"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="商品关键字" prop="keyword">
|
||||
<el-input v-model="formData.keyword" placeholder="请输入商品关键字" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="单位" prop="unit">
|
||||
<el-select v-model="formData.unit" class="w-1/1" 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">
|
||||
<el-form-item label="商品简介" prop="introduction">
|
||||
<el-input
|
||||
v-model="formData.introduction"
|
||||
:rows="3"
|
||||
placeholder="请输入商品简介"
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="商品封面图" prop="picUrl">
|
||||
<UploadImg v-model="formData.picUrl" height="80px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="商品轮播图" prop="sliderPicUrls">
|
||||
<UploadImgs v-model:modelValue="formData.sliderPicUrls" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="运费模板" prop="deliveryTemplateId">
|
||||
<el-select v-model="formData.deliveryTemplateId" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in deliveryTemplateList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
<!-- TODO 可能情况：善品录入后选择运费发现下拉选择中没有对应的模版 这里需不需要做添加运费模版后选择的功能 -->
|
||||
<!-- <el-button class="ml-20px">运费模板</el-button>-->
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="品牌" prop="brandId">
|
||||
<el-select v-model="formData.brandId" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in brandList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="商品规格" props="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>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="分销类型" props="subCommissionType">
|
||||
<el-radio-group v-model="formData.subCommissionType" @change="changeSubCommissionType">
|
||||
<el-radio :label="false">默认设置</el-radio>
|
||||
<el-radio :label="true" class="radio">自行设置</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- 多规格添加-->
|
||||
<el-col :span="24">
|
||||
<el-form-item v-if="!formData.specType">
|
||||
<SkuList ref="skuListRef" :prop-form-data="formData" :propertyList="propertyList" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formData.specType" label="商品属性">
|
||||
<el-button class="mr-15px mb-10px" @click="attributesAddFormRef.open">添加规格</el-button>
|
||||
<ProductAttributes :propertyList="propertyList" @success="generateSkus" />
|
||||
</el-form-item>
|
||||
<template v-if="formData.specType && propertyList.length > 0">
|
||||
<el-form-item label="批量设置">
|
||||
<SkuList :is-batch="true" :prop-form-data="formData" :propertyList="propertyList" />
|
||||
</el-form-item>
|
||||
<el-form-item label="属性列表">
|
||||
<SkuList ref="skuListRef" :prop-form-data="formData" :propertyList="propertyList" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<!-- 情况二：详情 -->
|
||||
<Descriptions v-if="isDetail" :data="formData" :schema="allSchemas.detailSchema">
|
||||
<template #categoryId="{ row }"> {{ categoryString(row.categoryId) }}</template>
|
||||
<template #brandId="{ row }">
|
||||
{{ brandList.find((item) => item.id === row.brandId)?.name }}
|
||||
</template>
|
||||
<template #deliveryTemplateId="{ row }">
|
||||
{{ deliveryTemplateList.find((item) => item.id === row.deliveryTemplateId)?.name }}
|
||||
</template>
|
||||
<template #specType="{ row }">
|
||||
{{ row.specType ? '多规格' : '单规格' }}
|
||||
</template>
|
||||
<template #subCommissionType="{ row }">
|
||||
{{ row.subCommissionType ? '自行设置' : '默认设置' }}
|
||||
</template>
|
||||
<template #picUrl="{ row }">
|
||||
<el-image :src="row.picUrl" class="w-60px h-60px" @click="imagePreview(row.picUrl)" />
|
||||
</template>
|
||||
<template #sliderPicUrls="{ row }">
|
||||
<el-image
|
||||
v-for="(item, index) in row.sliderPicUrls"
|
||||
:key="index"
|
||||
:src="item.url"
|
||||
class="w-60px h-60px mr-10px"
|
||||
@click="imagePreview(row.sliderPicUrls)"
|
||||
/>
|
||||
</template>
|
||||
<template #skus>
|
||||
<SkuList
|
||||
ref="skuDetailListRef"
|
||||
:is-detail="isDetail"
|
||||
:prop-form-data="formData"
|
||||
:propertyList="propertyList"
|
||||
/>
|
||||
</template>
|
||||
</Descriptions>
|
||||
|
||||
<!-- 商品属性添加 Form 表单 -->
|
||||
<ProductPropertyAddForm ref="attributesAddFormRef" :propertyList="propertyList" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { PropType } from 'vue'
|
||||
import { isArray } from '@/utils/is'
|
||||
import { copyValueToTarget } from '@/utils'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import { checkSelectedNode, defaultProps, handleTree, treeToString } from '@/utils/tree'
|
||||
import { createImageViewer } from '@/components/ImageViewer'
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
import { UploadImg, UploadImgs } from '@/components/UploadFile'
|
||||
import { getPropertyList, ProductAttributes, ProductPropertyAddForm, SkuList } from './index'
|
||||
import { basicInfoSchema } from './spu.data'
|
||||
import type { Spu } from '@/api/mall/product/spu'
|
||||
import * as ProductCategoryApi from '@/api/mall/product/category'
|
||||
import { getSimpleBrandList } from '@/api/mall/product/brand'
|
||||
import { getSimpleTemplateList } from '@/api/mall/trade/delivery/expressTemplate/index'
|
||||
// ====== 商品详情相关操作 ======
|
||||
const { allSchemas } = useCrudSchemas(basicInfoSchema)
|
||||
/** 商品图预览 */
|
||||
const imagePreview = (args) => {
|
||||
const urlList = []
|
||||
if (isArray(args)) {
|
||||
args.forEach((item) => {
|
||||
urlList.push(item.url)
|
||||
})
|
||||
} else {
|
||||
urlList.push(args)
|
||||
}
|
||||
createImageViewer({
|
||||
urlList
|
||||
})
|
||||
}
|
||||
// ====== end ======
|
||||
|
||||
defineOptions({ name: 'ProductSpuBasicInfoForm' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const props = defineProps({
|
||||
propFormData: {
|
||||
type: Object as PropType<Spu>,
|
||||
default: () => {}
|
||||
},
|
||||
activeName: propTypes.string.def(''),
|
||||
isDetail: propTypes.bool.def(false) // 是否作为详情组件
|
||||
})
|
||||
const attributesAddFormRef = ref() // 添加商品属性表单
|
||||
const productSpuBasicInfoRef = ref() // 表单 Ref
|
||||
const propertyList = ref([]) // 商品属性列表
|
||||
const skuListRef = ref() // 商品属性列表Ref
|
||||
/** 调用 SkuList generateTableData 方法*/
|
||||
const generateSkus = (propertyList) => {
|
||||
skuListRef.value.generateTableData(propertyList)
|
||||
}
|
||||
const formData = reactive<Spu>({
|
||||
name: '', // 商品名称
|
||||
categoryId: null, // 商品分类
|
||||
keyword: '', // 关键字
|
||||
unit: null, // 单位
|
||||
picUrl: '', // 商品封面图
|
||||
sliderPicUrls: [], // 商品轮播图
|
||||
introduction: '', // 商品简介
|
||||
deliveryTemplateId: null, // 运费模版
|
||||
brandId: null, // 商品品牌
|
||||
specType: false, // 商品规格
|
||||
subCommissionType: false, // 分销类型
|
||||
skus: []
|
||||
})
|
||||
const rules = reactive({
|
||||
name: [required],
|
||||
categoryId: [required],
|
||||
keyword: [required],
|
||||
unit: [required],
|
||||
introduction: [required],
|
||||
picUrl: [required],
|
||||
sliderPicUrls: [required],
|
||||
deliveryTemplateId: [required],
|
||||
brandId: [required],
|
||||
specType: [required],
|
||||
subCommissionType: [required]
|
||||
})
|
||||
|
||||
/**
|
||||
* 将传进来的值赋值给 formData
|
||||
*/
|
||||
watch(
|
||||
() => props.propFormData,
|
||||
(data) => {
|
||||
if (!data) {
|
||||
return
|
||||
}
|
||||
copyValueToTarget(formData, data)
|
||||
formData.sliderPicUrls = data['sliderPicUrls']?.map((item) => ({
|
||||
url: item
|
||||
}))
|
||||
propertyList.value = getPropertyList(data)
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
/**
|
||||
* 表单校验
|
||||
*/
|
||||
const emit = defineEmits(['update:activeName'])
|
||||
const validate = async () => {
|
||||
// 校验 sku
|
||||
skuListRef.value.validateSku()
|
||||
// 校验表单
|
||||
if (!productSpuBasicInfoRef) return
|
||||
return await unref(productSpuBasicInfoRef).validate((valid) => {
|
||||
if (!valid) {
|
||||
message.warning('商品信息未完善！！')
|
||||
emit('update:activeName', 'basicInfo')
|
||||
// 目的截断之后的校验
|
||||
throw new Error('商品信息未完善！！')
|
||||
} else {
|
||||
// 校验通过更新数据
|
||||
Object.assign(props.propFormData, formData)
|
||||
}
|
||||
})
|
||||
}
|
||||
defineExpose({ validate })
|
||||
|
||||
/** 分销类型 */
|
||||
const changeSubCommissionType = () => {
|
||||
// 默认为零，类型切换后也要重置为零
|
||||
for (const item of formData.skus) {
|
||||
item.subCommissionFirstPrice = 0
|
||||
item.subCommissionSecondPrice = 0
|
||||
}
|
||||
}
|
||||
|
||||
/** 选择规格 */
|
||||
const onChangeSpec = () => {
|
||||
// 重置商品属性列表
|
||||
propertyList.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([]) // 分类树
|
||||
/**
|
||||
* 选择分类时触发校验
|
||||
*/
|
||||
const categoryNodeClick = () => {
|
||||
if (!checkSelectedNode(categoryList.value, formData.categoryId)) {
|
||||
formData.categoryId = null
|
||||
message.warning('必须选择二级及以下节点！！')
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 获取分类的节点的完整结构
|
||||
*
|
||||
* @param categoryId 分类id
|
||||
*/
|
||||
const categoryString = (categoryId) => {
|
||||
return treeToString(categoryList.value, categoryId)
|
||||
}
|
||||
const brandList = ref([]) // 精简商品品牌列表
|
||||
const deliveryTemplateList = ref([]) // 运费模版
|
||||
onMounted(async () => {
|
||||
// 获得分类树
|
||||
const data = await ProductCategoryApi.getCategoryList({})
|
||||
categoryList.value = handleTree(data, 'id', 'parentId')
|
||||
// 获取商品品牌列表
|
||||
brandList.value = await getSimpleBrandList()
|
||||
// 获取运费模版
|
||||
deliveryTemplateList.value = await getSimpleTemplateList()
|
||||
})
|
||||
</script>
|
||||
@@ -1,109 +0,0 @@
|
||||
<template>
|
||||
<!-- 情况一：添加/修改 -->
|
||||
<el-form
|
||||
v-if="!isDetail"
|
||||
ref="descriptionFormRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
>
|
||||
<!--富文本编辑器组件-->
|
||||
<el-form-item label="商品详情" prop="description">
|
||||
<Editor v-model:modelValue="formData.description" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 情况二：详情 -->
|
||||
<Descriptions
|
||||
v-if="isDetail"
|
||||
:data="formData"
|
||||
:schema="allSchemas.detailSchema"
|
||||
class="descriptionFormDescriptions"
|
||||
>
|
||||
<!-- 展示 HTML 内容 -->
|
||||
<template #description="{ row }">
|
||||
<div v-dompurify-html="row.description" style="width: 600px"></div>
|
||||
</template>
|
||||
</Descriptions>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { Spu } from '@/api/mall/product/spu'
|
||||
import { Editor } from '@/components/Editor'
|
||||
import { PropType } from 'vue'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import { copyValueToTarget } from '@/utils'
|
||||
import { descriptionSchema } from './spu.data'
|
||||
|
||||
defineOptions({ name: 'DescriptionForm' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const { allSchemas } = useCrudSchemas(descriptionSchema)
|
||||
const props = defineProps({
|
||||
propFormData: {
|
||||
type: Object as PropType<Spu>,
|
||||
default: () => {}
|
||||
},
|
||||
activeName: propTypes.string.def(''),
|
||||
isDetail: propTypes.bool.def(false) // 是否作为详情组件
|
||||
})
|
||||
const descriptionFormRef = ref() // 表单Ref
|
||||
const formData = ref<Spu>({
|
||||
description: '' // 商品详情
|
||||
})
|
||||
// 表单规则
|
||||
const rules = reactive({
|
||||
description: [required]
|
||||
})
|
||||
/**
|
||||
* 富文本编辑器如果输入过再清空会有残留，需再重置一次
|
||||
*/
|
||||
watch(
|
||||
() => formData.value.description,
|
||||
(newValue) => {
|
||||
if ('<p><br></p>' === newValue) {
|
||||
formData.value.description = ''
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
/**
|
||||
* 将传进来的值赋值给formData
|
||||
*/
|
||||
watch(
|
||||
() => props.propFormData,
|
||||
(data) => {
|
||||
if (!data) return
|
||||
// fix：三个表单组件监听赋值必须使用 copyValueToTarget 使用 formData.value = data 会监听非常多次
|
||||
copyValueToTarget(formData.value, data)
|
||||
},
|
||||
{
|
||||
// fix: 去掉深度监听只有对象引用发生改变的时候才执行,解决改一动多的问题
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
/**
|
||||
* 表单校验
|
||||
*/
|
||||
const emit = defineEmits(['update:activeName'])
|
||||
const validate = async () => {
|
||||
// 校验表单
|
||||
if (!descriptionFormRef) return
|
||||
return await unref(descriptionFormRef).validate((valid) => {
|
||||
if (!valid) {
|
||||
message.warning('商品详情为完善!!')
|
||||
emit('update:activeName', 'description')
|
||||
// 目的截断之后的校验
|
||||
throw new Error('商品详情为完善!!')
|
||||
} else {
|
||||
// 校验通过更新数据
|
||||
Object.assign(props.propFormData, formData.value)
|
||||
}
|
||||
})
|
||||
}
|
||||
defineExpose({ validate })
|
||||
</script>
|
||||
@@ -1,183 +0,0 @@
|
||||
<template>
|
||||
<!-- 情况一：添加/修改 -->
|
||||
<el-form
|
||||
v-if="!isDetail"
|
||||
ref="otherSettingsFormRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="商品排序" prop="sort">
|
||||
<el-input-number v-model="formData.sort" :min="0" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="赠送积分" prop="giveIntegral">
|
||||
<el-input-number v-model="formData.giveIntegral" :min="0" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="虚拟销量" prop="virtualSalesCount">
|
||||
<el-input-number
|
||||
v-model="formData.virtualSalesCount"
|
||||
:min="0"
|
||||
placeholder="请输入虚拟销量"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="商品推荐">
|
||||
<el-checkbox-group v-model="checkboxGroup" @change="onChangeGroup">
|
||||
<el-checkbox v-for="(item, index) in recommendOptions" :key="index" :label="item.value">
|
||||
{{ item.name }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<!-- TODO tag展示暂时不考虑排序 -->
|
||||
<el-form-item label="活动优先级">
|
||||
<el-tag>默认</el-tag>
|
||||
<el-tag class="ml-2" type="success">秒杀</el-tag>
|
||||
<el-tag class="ml-2" type="info">砍价</el-tag>
|
||||
<el-tag class="ml-2" type="warning">拼团</el-tag>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- TODO @puhui999：等优惠劵 ok 在搞 -->
|
||||
<el-col :span="24">
|
||||
<el-form-item label="赠送优惠劵">
|
||||
<el-button>选择优惠券</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<!-- 情况二：详情 -->
|
||||
<Descriptions v-if="isDetail" :data="formData" :schema="allSchemas.detailSchema">
|
||||
<template #recommendHot="{ row }">
|
||||
{{ row.recommendHot ? '是' : '否' }}
|
||||
</template>
|
||||
<template #recommendBenefit="{ row }">
|
||||
{{ row.recommendBenefit ? '是' : '否' }}
|
||||
</template>
|
||||
<template #recommendBest="{ row }">
|
||||
{{ row.recommendBest ? '是' : '否' }}
|
||||
</template>
|
||||
<template #recommendNew="{ row }">
|
||||
{{ row.recommendNew ? '是' : '否' }}
|
||||
</template>
|
||||
<template #recommendGood="{ row }">
|
||||
{{ row.recommendGood ? '是' : '否' }}
|
||||
</template>
|
||||
<template #activityOrders>
|
||||
<el-tag>默认</el-tag>
|
||||
<el-tag class="ml-2" type="success">秒杀</el-tag>
|
||||
<el-tag class="ml-2" type="info">砍价</el-tag>
|
||||
<el-tag class="ml-2" type="warning">拼团</el-tag>
|
||||
</template>
|
||||
</Descriptions>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { Spu } from '@/api/mall/product/spu'
|
||||
import { PropType } from 'vue'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import { copyValueToTarget } from '@/utils'
|
||||
import { otherSettingsSchema } from './spu.data'
|
||||
|
||||
defineOptions({ name: 'OtherSettingsForm' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const { allSchemas } = useCrudSchemas(otherSettingsSchema)
|
||||
|
||||
const props = defineProps({
|
||||
propFormData: {
|
||||
type: Object as PropType<Spu>,
|
||||
default: () => {}
|
||||
},
|
||||
activeName: propTypes.string.def(''),
|
||||
isDetail: propTypes.bool.def(false) // 是否作为详情组件
|
||||
})
|
||||
|
||||
const otherSettingsFormRef = ref() // 表单Ref
|
||||
// 表单数据
|
||||
const formData = ref<Spu>({
|
||||
sort: 1, // 商品排序
|
||||
giveIntegral: 1, // 赠送积分
|
||||
virtualSalesCount: 1, // 虚拟销量
|
||||
recommendHot: false, // 是否热卖
|
||||
recommendBenefit: false, // 是否优惠
|
||||
recommendBest: false, // 是否精品
|
||||
recommendNew: false, // 是否新品
|
||||
recommendGood: false // 是否优品
|
||||
})
|
||||
// 表单规则
|
||||
const rules = reactive({
|
||||
sort: [required],
|
||||
giveIntegral: [required],
|
||||
virtualSalesCount: [required]
|
||||
})
|
||||
const recommendOptions = [
|
||||
{ name: '是否热卖', value: 'recommendHot' },
|
||||
{ name: '是否优惠', value: 'recommendBenefit' },
|
||||
{ name: '是否精品', value: 'recommendBest' },
|
||||
{ name: '是否新品', value: 'recommendNew' },
|
||||
{ name: '是否优品', value: 'recommendGood' }
|
||||
] // 商品推荐选项
|
||||
const checkboxGroup = ref<string[]>([]) // 选中的推荐选项
|
||||
|
||||
/** 选择商品后赋值 */
|
||||
const onChangeGroup = () => {
|
||||
recommendOptions.forEach(({ value }) => {
|
||||
formData.value[value] = checkboxGroup.value.includes(value)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 将传进来的值赋值给formData
|
||||
*/
|
||||
watch(
|
||||
() => props.propFormData,
|
||||
(data) => {
|
||||
if (!data) {
|
||||
return
|
||||
}
|
||||
copyValueToTarget(formData.value, data)
|
||||
recommendOptions.forEach(({ value }) => {
|
||||
if (formData.value[value] && !checkboxGroup.value.includes(value)) {
|
||||
checkboxGroup.value.push(value)
|
||||
}
|
||||
})
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
/**
|
||||
* 表单校验
|
||||
*/
|
||||
const emit = defineEmits(['update:activeName'])
|
||||
const validate = async () => {
|
||||
// 校验表单
|
||||
if (!otherSettingsFormRef) return
|
||||
return await unref(otherSettingsFormRef).validate((valid) => {
|
||||
if (!valid) {
|
||||
message.warning('商品其他设置未完善！！')
|
||||
emit('update:activeName', 'otherSettings')
|
||||
// 目的截断之后的校验
|
||||
throw new Error('商品其他设置未完善！！')
|
||||
} else {
|
||||
// 校验通过更新数据
|
||||
Object.assign(props.propFormData, formData.value)
|
||||
}
|
||||
})
|
||||
}
|
||||
defineExpose({ validate })
|
||||
</script>
|
||||
@@ -1,119 +0,0 @@
|
||||
<template>
|
||||
<el-col v-for="(item, index) in attributeList" :key="index">
|
||||
<div>
|
||||
<el-text class="mx-1">属性名：</el-text>
|
||||
<el-tag class="mx-1" closable type="success" @close="handleCloseProperty(index)"
|
||||
>{{ item.name }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div>
|
||||
<el-text class="mx-1">属性值：</el-text>
|
||||
<el-tag
|
||||
v-for="(value, valueIndex) in item.values"
|
||||
:key="value.id"
|
||||
class="mx-1"
|
||||
closable
|
||||
@close="handleCloseValue(index, valueIndex)"
|
||||
>
|
||||
{{ value.name }}
|
||||
</el-tag>
|
||||
<el-input
|
||||
v-show="inputVisible(index)"
|
||||
:id="`input${index}`"
|
||||
:ref="setInputRef"
|
||||
v-model="inputValue"
|
||||
class="!w-20"
|
||||
size="small"
|
||||
@blur="handleInputConfirm(index, item.id)"
|
||||
@keyup.enter="handleInputConfirm(index, item.id)"
|
||||
/>
|
||||
<el-button
|
||||
v-show="!inputVisible(index)"
|
||||
class="button-new-tag ml-1"
|
||||
size="small"
|
||||
@click="showInput(index)"
|
||||
>
|
||||
+ 添加
|
||||
</el-button>
|
||||
</div>
|
||||
<el-divider class="my-10px" />
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ElInput } from 'element-plus'
|
||||
import * as PropertyApi from '@/api/mall/product/property'
|
||||
|
||||
defineOptions({ name: 'ProductAttributes' })
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
const inputValue = ref('') // 输入框值
|
||||
const attributeIndex = ref<number | null>(null) // 获取焦点时记录当前属性项的index
|
||||
// 输入框显隐控制
|
||||
const inputVisible = computed(() => (index) => {
|
||||
if (attributeIndex.value === null) return false
|
||||
if (attributeIndex.value === index) return true
|
||||
})
|
||||
const inputRef = ref([]) //标签输入框Ref
|
||||
/** 解决 ref 在 v-for 中的获取问题*/
|
||||
const setInputRef = (el) => {
|
||||
if (el === null || typeof el === 'undefined') return
|
||||
// 如果不存在id相同的元素才添加
|
||||
if (!inputRef.value.some((item) => item.input?.attributes.id === el.input?.attributes.id)) {
|
||||
inputRef.value.push(el)
|
||||
}
|
||||
}
|
||||
const attributeList = ref([]) // 商品属性列表
|
||||
const props = defineProps({
|
||||
propertyList: {
|
||||
type: Array,
|
||||
default: () => {}
|
||||
}
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.propertyList,
|
||||
(data) => {
|
||||
if (!data) return
|
||||
attributeList.value = data
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
/** 删除属性值*/
|
||||
const handleCloseValue = (index, valueIndex) => {
|
||||
attributeList.value[index].values?.splice(valueIndex, 1)
|
||||
}
|
||||
/** 删除属性*/
|
||||
const handleCloseProperty = (index) => {
|
||||
attributeList.value?.splice(index, 1)
|
||||
}
|
||||
/** 显示输入框并获取焦点 */
|
||||
const showInput = async (index) => {
|
||||
attributeIndex.value = index
|
||||
inputRef.value[index].focus()
|
||||
}
|
||||
|
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||||
|
||||
/** 输入框失去焦点或点击回车时触发 */
|
||||
const handleInputConfirm = async (index, propertyId) => {
|
||||
if (inputValue.value) {
|
||||
// 保存属性值
|
||||
try {
|
||||
const id = await PropertyApi.createPropertyValue({ propertyId, name: inputValue.value })
|
||||
attributeList.value[index].values.push({ id, name: inputValue.value })
|
||||
message.success(t('common.createSuccess'))
|
||||
emit('success', attributeList.value)
|
||||
} catch {
|
||||
message.error('添加失败，请重试') // TODO 缺少国际化
|
||||
}
|
||||
}
|
||||
attributeIndex.value = null
|
||||
inputValue.value = ''
|
||||
}
|
||||
</script>
|
||||
@@ -1,99 +0,0 @@
|
||||
<template>
|
||||
<Dialog v-model="dialogVisible" :title="dialogTitle">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
v-loading="formLoading"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item label="属性名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as PropertyApi from '@/api/mall/product/property'
|
||||
|
||||
defineOptions({ name: 'ProductPropertyForm' })
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('添加商品属性') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const formData = ref({
|
||||
name: ''
|
||||
})
|
||||
const formRules = reactive({
|
||||
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
const attributeList = ref([]) // 商品属性列表
|
||||
const props = defineProps({
|
||||
propertyList: {
|
||||
type: Array,
|
||||
default: () => {}
|
||||
}
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.propertyList,
|
||||
(data) => {
|
||||
if (!data) return
|
||||
attributeList.value = data
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
/** 打开弹窗 */
|
||||
const open = async () => {
|
||||
dialogVisible.value = true
|
||||
resetForm()
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
/** 提交表单 */
|
||||
const submitForm = async () => {
|
||||
// 校验表单
|
||||
if (!formRef) return
|
||||
const valid = await formRef.value.validate()
|
||||
if (!valid) return
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
const data = formData.value as PropertyApi.PropertyVO
|
||||
// 检查属性是否已存在，如果有则返回属性和其下属性值
|
||||
const res = await PropertyApi.getPropertyListAndValue({ name: data.name })
|
||||
if (res.length === 0) {
|
||||
const propertyId = await PropertyApi.createProperty(data)
|
||||
attributeList.value.push({ id: propertyId, ...formData.value, values: [] })
|
||||
} else {
|
||||
if (res[0].values === null) {
|
||||
res[0].values = []
|
||||
}
|
||||
attributeList.value.push(res[0]) // 因为只用一个
|
||||
}
|
||||
message.success(t('common.createSuccess'))
|
||||
dialogVisible.value = false
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
name: ''
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
</script>
|
||||
@@ -1,12 +1,5 @@
|
||||
import BasicInfoForm from './BasicInfoForm.vue'
|
||||
import DescriptionForm from './DescriptionForm.vue'
|
||||
import OtherSettingsForm from './OtherSettingsForm.vue'
|
||||
import ProductAttributes from './ProductAttributes.vue'
|
||||
import ProductPropertyAddForm from './ProductPropertyAddForm.vue'
|
||||
import SkuList from './SkuList.vue'
|
||||
|
||||
import { Spu } from '@/api/mall/product/spu'
|
||||
|
||||
interface PropertyAndValues {
|
||||
id: number
|
||||
name: string
|
||||
@@ -29,42 +22,4 @@ interface RuleConfig {
|
||||
message: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 获得商品的规格列表
|
||||
*
|
||||
* @param spu
|
||||
* @return PropertyAndValues 规格列表
|
||||
*/
|
||||
const getPropertyList = (spu: Spu): PropertyAndValues[] => {
|
||||
// 直接拿返回的 skus 属性逆向生成出 propertyList
|
||||
const properties: PropertyAndValues[] = []
|
||||
// 只有是多规格才处理
|
||||
if (spu.specType) {
|
||||
spu.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! })
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
return properties
|
||||
}
|
||||
|
||||
export {
|
||||
BasicInfoForm,
|
||||
DescriptionForm,
|
||||
OtherSettingsForm,
|
||||
ProductAttributes,
|
||||
ProductPropertyAddForm,
|
||||
SkuList,
|
||||
getPropertyList,
|
||||
PropertyAndValues,
|
||||
RuleConfig
|
||||
}
|
||||
export { SkuList, PropertyAndValues, RuleConfig }
|
||||
|
||||
@@ -1,105 +0,0 @@
|
||||
import { CrudSchema } from '@/hooks/web/useCrudSchemas'
|
||||
|
||||
export const basicInfoSchema = reactive<CrudSchema[]>([
|
||||
{
|
||||
label: '商品名称',
|
||||
field: 'name'
|
||||
},
|
||||
{
|
||||
label: '关键字',
|
||||
field: 'keyword'
|
||||
},
|
||||
{
|
||||
label: '商品简介',
|
||||
field: 'introduction'
|
||||
},
|
||||
{
|
||||
label: '商品分类',
|
||||
field: 'categoryId'
|
||||
},
|
||||
{
|
||||
label: '商品品牌',
|
||||
field: 'brandId'
|
||||
},
|
||||
{
|
||||
label: '商品封面图',
|
||||
field: 'picUrl'
|
||||
},
|
||||
{
|
||||
label: '商品轮播图',
|
||||
field: 'sliderPicUrls'
|
||||
},
|
||||
{
|
||||
label: '商品视频',
|
||||
field: 'videoUrl'
|
||||
},
|
||||
{
|
||||
label: '单位',
|
||||
field: 'unit',
|
||||
dictType: DICT_TYPE.PRODUCT_UNIT
|
||||
},
|
||||
{
|
||||
label: '规格类型',
|
||||
field: 'specType'
|
||||
},
|
||||
{
|
||||
label: '分销类型',
|
||||
field: 'subCommissionType'
|
||||
},
|
||||
{
|
||||
label: '物流模版',
|
||||
field: 'deliveryTemplateId'
|
||||
},
|
||||
{
|
||||
label: '商品属性列表',
|
||||
field: 'skus'
|
||||
}
|
||||
])
|
||||
export const descriptionSchema = reactive<CrudSchema[]>([
|
||||
{
|
||||
label: '商品详情',
|
||||
field: 'description'
|
||||
}
|
||||
])
|
||||
export const otherSettingsSchema = reactive<CrudSchema[]>([
|
||||
{
|
||||
label: '商品排序',
|
||||
field: 'sort'
|
||||
},
|
||||
{
|
||||
label: '赠送积分',
|
||||
field: 'giveIntegral'
|
||||
},
|
||||
{
|
||||
label: '虚拟销量',
|
||||
field: 'virtualSalesCount'
|
||||
},
|
||||
{
|
||||
label: '是否热卖推荐',
|
||||
field: 'recommendHot'
|
||||
},
|
||||
{
|
||||
label: '是否优惠推荐',
|
||||
field: 'recommendBenefit'
|
||||
},
|
||||
{
|
||||
label: '是否精品推荐',
|
||||
field: 'recommendBest'
|
||||
},
|
||||
{
|
||||
label: '是否新品推荐',
|
||||
field: 'recommendNew'
|
||||
},
|
||||
{
|
||||
label: '是否优品推荐',
|
||||
field: 'recommendGood'
|
||||
},
|
||||
{
|
||||
label: '赠送的优惠劵',
|
||||
field: 'giveCouponTemplateIds'
|
||||
},
|
||||
{
|
||||
label: '活动显示排序',
|
||||
field: 'activityOrders'
|
||||
}
|
||||
])
|
||||
Reference in New Issue
Block a user