Merge remote-tracking branch 'yudao/dev' into dev
dhb52
2 years ago
commit
25347b3ea5
@ -0,0 +1,45 @@
|
|||||||
|
<template>
|
||||||
|
<ContentWrap>
|
||||||
|
<el-collapse v-model="activeNames">
|
||||||
|
<el-collapse-item name="basicInfo">
|
||||||
|
<template #title>
|
||||||
|
<span class="text-base font-bold">基本信息</span>
|
||||||
|
</template>
|
||||||
|
<el-descriptions :column="4">
|
||||||
|
<el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="产品编码">{{ product.no }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="价格">{{ fenToYuan(product.price) }}元</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="产品描述">{{ product.description }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="产品类型">
|
||||||
|
{{ productCategoryList?.find((c) => c.id === product.categoryId)?.name }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="是否上下架">
|
||||||
|
<dict-tag :type="DICT_TYPE.CRM_PRODUCT_STATUS" :value="product.status"/>
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="单位">
|
||||||
|
<dict-tag :type="DICT_TYPE.PRODUCT_UNIT" :value="product.unit"/>
|
||||||
|
</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
|
</ContentWrap>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {DICT_TYPE} from '@/utils/dict'
|
||||||
|
import * as ProductApi from '@/api/crm/product'
|
||||||
|
import {fenToYuan} from '@/utils'
|
||||||
|
import * as ProductCategoryApi from '@/api/crm/product/productCategory'
|
||||||
|
|
||||||
|
const {product} = defineProps<{
|
||||||
|
product: ProductApi.ProductVO
|
||||||
|
}>()
|
||||||
|
|
||||||
|
// 展示的折叠面板
|
||||||
|
const activeNames = ref(['basicInfo'])
|
||||||
|
|
||||||
|
/** 初始化 */
|
||||||
|
const productCategoryList = ref([]) // 产品分类树
|
||||||
|
onMounted(async () => {
|
||||||
|
productCategoryList.value = await ProductCategoryApi.getProductCategoryList({})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
<template>
|
||||||
|
<ProductDetailsHeader :product="product" :loading="loading" @refresh="getProductData(id)" />
|
||||||
|
<el-col>
|
||||||
|
<el-tabs>
|
||||||
|
<el-tab-pane label="详细资料">
|
||||||
|
<ProductDetailsInfo :product="product" />
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="操作日志">
|
||||||
|
<OperateLogV2 :log-list="logList" />
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</el-col>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useTagsViewStore } from '@/store/modules/tagsView'
|
||||||
|
import { OperateLogV2VO } from '@/api/system/operatelog'
|
||||||
|
import * as ProductApi from '@/api/crm/product'
|
||||||
|
import ProductDetailsHeader from '@/views/crm/product/detail/ProductDetailsHeader.vue'
|
||||||
|
import ProductDetailsInfo from '@/views/crm/product/detail/ProductDetailsInfo.vue'
|
||||||
|
|
||||||
|
defineOptions({ name: 'CrmProductDetail' })
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
const id = Number(route.params.id) // 编号
|
||||||
|
const loading = ref(true) // 加载中
|
||||||
|
const product = ref<ProductApi.ProductVO>({} as ProductApi.ProductVO) // 详情
|
||||||
|
|
||||||
|
/** 获取详情 */
|
||||||
|
const getProductData = async (id: number) => {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
product.value = await ProductApi.getProduct(id)
|
||||||
|
await getOperateLog(id)
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 获取操作日志 */
|
||||||
|
const logList = ref<OperateLogV2VO[]>([]) // 操作日志列表
|
||||||
|
const getOperateLog = async (productId: number) => {
|
||||||
|
if (!productId) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const data = await ProductApi.getOperateLogPage({
|
||||||
|
bizId: productId
|
||||||
|
})
|
||||||
|
logList.value = data.list
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 初始化 */
|
||||||
|
const { delView } = useTagsViewStore() // 视图操作
|
||||||
|
const { currentRoute } = useRouter() // 路由
|
||||||
|
onMounted(async () => {
|
||||||
|
if (!id) {
|
||||||
|
ElMessage.warning('参数错误，产品不能为空！')
|
||||||
|
delView(unref(currentRoute))
|
||||||
|
return
|
||||||
|
}
|
||||||
|
await getProductData(id)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@ -1,66 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div ref="elTagWrappingRef">
|
|
||||||
<template v-if="activityOrders && activityOrders.length > 0">
|
|
||||||
<el-tag
|
|
||||||
v-for="activityType in activityOrders"
|
|
||||||
:key="activityType"
|
|
||||||
:type="promotionTypes.find((item) => item.value === activityType)?.colorType"
|
|
||||||
class="mr-[10px]"
|
|
||||||
>
|
|
||||||
{{ promotionTypes.find((item) => item.value === activityType)?.label }}
|
|
||||||
</el-tag>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<el-tag
|
|
||||||
v-for="type in promotionTypes"
|
|
||||||
:key="type.value as number"
|
|
||||||
:type="type.colorType"
|
|
||||||
class="mr-[10px]"
|
|
||||||
>
|
|
||||||
{{ type.label }}
|
|
||||||
</el-tag>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import Sortable from 'sortablejs'
|
|
||||||
import type { DictDataType } from '@/utils/dict'
|
|
||||||
|
|
||||||
defineOptions({ name: 'ActivityOrdersSort' })
|
|
||||||
const props = defineProps<{
|
|
||||||
promotionTypes: DictDataType[]
|
|
||||||
activityOrders: number[]
|
|
||||||
}>()
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(e: 'update:activityOrders', v: number[])
|
|
||||||
}>()
|
|
||||||
const elTagWrappingRef = ref() // elTag 容器 Ref
|
|
||||||
|
|
||||||
const initSortable = () => {
|
|
||||||
new Sortable(elTagWrappingRef.value, {
|
|
||||||
swapThreshold: 1,
|
|
||||||
animation: 150,
|
|
||||||
onEnd: (el) => {
|
|
||||||
const innerText = el.to.innerText
|
|
||||||
// 将字符串按换行符分割成数组
|
|
||||||
const activityOrder = innerText.split('\n')
|
|
||||||
// 根据字符串中的顺序重新排序数组
|
|
||||||
const sortedActivityOrder = activityOrder.map((activityName) => {
|
|
||||||
return props.promotionTypes.find((item) => item.label === activityName)?.value
|
|
||||||
})
|
|
||||||
emit('update:activityOrders', sortedActivityOrder as number[])
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
onMounted(async () => {
|
|
||||||
await nextTick()
|
|
||||||
// 如果活动排序为空也就是新增的时候加入活动
|
|
||||||
if (props.activityOrders && props.activityOrders.length === 0) {
|
|
||||||
emit(
|
|
||||||
'update:activityOrders',
|
|
||||||
props.promotionTypes.map((item) => item.value as number)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
initSortable()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
@ -0,0 +1,96 @@
|
|||||||
|
<!-- 商品发布 - 物流设置 -->
|
||||||
|
<template>
|
||||||
|
<el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" :disabled="isDetail">
|
||||||
|
<el-form-item label="配送方式" prop="deliveryTypes">
|
||||||
|
<el-checkbox-group v-model="formData.deliveryTypes" class="w-80">
|
||||||
|
<el-checkbox
|
||||||
|
v-for="dict in getIntDictOptions(DICT_TYPE.TRADE_DELIVERY_TYPE)"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.value"
|
||||||
|
>
|
||||||
|
{{ dict.label }}
|
||||||
|
</el-checkbox>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
label="运费模板"
|
||||||
|
prop="deliveryTemplateId"
|
||||||
|
v-if="formData.deliveryTypes?.includes(DeliveryTypeEnum.EXPRESS.type)"
|
||||||
|
>
|
||||||
|
<el-select placeholder="请选择运费模板" v-model="formData.deliveryTemplateId" class="w-80">
|
||||||
|
<el-option
|
||||||
|
v-for="item in deliveryTemplateList"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { PropType } from 'vue'
|
||||||
|
import { copyValueToTarget } from '@/utils'
|
||||||
|
import { propTypes } from '@/utils/propTypes'
|
||||||
|
import type { Spu } from '@/api/mall/product/spu'
|
||||||
|
import * as ExpressTemplateApi from '@/api/mall/trade/delivery/expressTemplate'
|
||||||
|
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||||
|
import { DeliveryTypeEnum } from '@/utils/constants'
|
||||||
|
|
||||||
|
defineOptions({ name: 'ProductDeliveryForm' })
|
||||||
|
|
||||||
|
const message = useMessage() // 消息弹窗
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
propFormData: {
|
||||||
|
type: Object as PropType<Spu>,
|
||||||
|
default: () => {}
|
||||||
|
},
|
||||||
|
isDetail: propTypes.bool.def(false) // 是否作为详情组件
|
||||||
|
})
|
||||||
|
const formRef = ref() // 表单 Ref
|
||||||
|
const formData = reactive<Spu>({
|
||||||
|
deliveryTypes: [], // 配送方式
|
||||||
|
deliveryTemplateId: undefined // 运费模版
|
||||||
|
})
|
||||||
|
const rules = reactive({
|
||||||
|
deliveryTypes: [required],
|
||||||
|
deliveryTemplateId: [required]
|
||||||
|
})
|
||||||
|
|
||||||
|
/** 将传进来的值赋值给 formData */
|
||||||
|
watch(
|
||||||
|
() => props.propFormData,
|
||||||
|
(data) => {
|
||||||
|
if (!data) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
copyValueToTarget(formData, data)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
/** 表单校验 */
|
||||||
|
const emit = defineEmits(['update:activeName'])
|
||||||
|
const validate = async () => {
|
||||||
|
if (!formRef) return
|
||||||
|
try {
|
||||||
|
await unref(formRef)?.validate()
|
||||||
|
// 校验通过更新数据
|
||||||
|
Object.assign(props.propFormData, formData)
|
||||||
|
} catch (e) {
|
||||||
|
message.error('【物流设置】不完善，请填写相关信息')
|
||||||
|
emit('update:activeName', 'delivery')
|
||||||
|
throw e // 目的截断之后的校验
|
||||||
|
}
|
||||||
|
}
|
||||||
|
defineExpose({ validate })
|
||||||
|
|
||||||
|
/** 初始化 */
|
||||||
|
const deliveryTemplateList = ref([]) // 运费模版
|
||||||
|
onMounted(async () => {
|
||||||
|
deliveryTemplateList.value = await ExpressTemplateApi.getSimpleTemplateList()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@ -0,0 +1,91 @@
|
|||||||
|
<!-- 商品发布 - 其它设置 -->
|
||||||
|
<template>
|
||||||
|
<el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" :disabled="isDetail">
|
||||||
|
<el-form-item label="商品排序" prop="sort">
|
||||||
|
<el-input-number
|
||||||
|
v-model="formData.sort"
|
||||||
|
:min="0"
|
||||||
|
placeholder="请输入商品排序"
|
||||||
|
class="w-80!"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="赠送积分" prop="giveIntegral">
|
||||||
|
<el-input-number
|
||||||
|
v-model="formData.giveIntegral"
|
||||||
|
:min="0"
|
||||||
|
placeholder="请输入赠送积分"
|
||||||
|
class="w-80!"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="虚拟销量" prop="virtualSalesCount">
|
||||||
|
<el-input-number
|
||||||
|
v-model="formData.virtualSalesCount"
|
||||||
|
:min="0"
|
||||||
|
placeholder="请输入虚拟销量"
|
||||||
|
class="w-80!"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</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'
|
||||||
|
|
||||||
|
defineOptions({ name: 'ProductOtherForm' })
|
||||||
|
|
||||||
|
const message = useMessage() // 消息弹窗
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
propFormData: {
|
||||||
|
type: Object as PropType<Spu>,
|
||||||
|
default: () => {}
|
||||||
|
},
|
||||||
|
isDetail: propTypes.bool.def(false) // 是否作为详情组件
|
||||||
|
})
|
||||||
|
|
||||||
|
const formRef = ref() // 表单Ref
|
||||||
|
// 表单数据
|
||||||
|
const formData = ref<Spu>({
|
||||||
|
sort: 0, // 商品排序
|
||||||
|
giveIntegral: 0, // 赠送积分
|
||||||
|
virtualSalesCount: 0 // 虚拟销量
|
||||||
|
})
|
||||||
|
// 表单规则
|
||||||
|
const rules = reactive({
|
||||||
|
sort: [required],
|
||||||
|
giveIntegral: [required],
|
||||||
|
virtualSalesCount: [required]
|
||||||
|
})
|
||||||
|
|
||||||
|
/** 将传进来的值赋值给 formData */
|
||||||
|
watch(
|
||||||
|
() => props.propFormData,
|
||||||
|
(data) => {
|
||||||
|
if (!data) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
copyValueToTarget(formData.value, data)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
/** 表单校验 */
|
||||||
|
const emit = defineEmits(['update:activeName'])
|
||||||
|
const validate = async () => {
|
||||||
|
if (!formRef) return
|
||||||
|
try {
|
||||||
|
await unref(formRef)?.validate()
|
||||||
|
// 校验通过更新数据
|
||||||
|
Object.assign(props.propFormData, formData.value)
|
||||||
|
} catch (e) {
|
||||||
|
message.error('【其它设置】不完善，请填写相关信息')
|
||||||
|
emit('update:activeName', 'other')
|
||||||
|
throw e // 目的截断之后的校验
|
||||||
|
}
|
||||||
|
}
|
||||||
|
defineExpose({ validate })
|
||||||
|
</script>
|
||||||
@ -1,101 +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: 'activityOrders'
|
|
||||||
}
|
|
||||||
])
|
|
||||||
Loading…
Reference in New Issue