mall：优惠券 商品适用范围，增加商品分类

Author: owen118z

src/api/mall/promotion/coupon/couponTemplate.ts

@@ -9,7 +9,7 @@ export interface CouponTemplateVO {
   takeType: number
   usePrice: number
   productScope: number
-  productSpuIds: string
+  productSpuIds: number[]
   validityType: number
   validStartTime: Date
   validEndTime: Date

src/utils/constants.ts

@@ -220,6 +220,10 @@ export const PromotionProductScopeEnum = {
   SPU: {
     scope: 2,
     name: '指定商品参与'
+  },
+  CATEGORY: {
+    scope: 3,
+    name: '指定品类参与'
   }
 }
 

src/views/mall/product/category/components/ProductCategorySelect.vue

@@ -0,0 +1,47 @@
+<template>
+  <el-tree-select
+    v-model="selectCategoryId"
+    :data="categoryList"
+    :props="defaultProps"
+    :multiple="multiple"
+    :show-checkbox="multiple"
+    class="w-1/1"
+    node-key="id"
+    placeholder="请选择商品分类"
+  />
+</template>
+<script lang="ts" setup>
+import { defaultProps, handleTree } from '@/utils/tree'
+import * as ProductCategoryApi from '@/api/mall/product/category'
+import { oneOf } from 'vue-types'
+import { propTypes } from '@/utils/propTypes'
+
+/** 商品分类选择组件 */
+defineOptions({ name: 'ProductCategorySelect' })
+
+const props = defineProps({
+  value: oneOf([propTypes.number, propTypes.array.def([])]).isRequired, // 选中的ID
+  multiple: propTypes.bool.def(false) // 是否多选
+})
+
+/** 选中的分类ID */
+const selectCategoryId = computed({
+  get: () => {
+    return props.value
+  },
+  set: (val: number | number[]) => {
+    emit('update:modelValue', val)
+  }
+})
+
+/** 分类选择 */
+const emit = defineEmits(['update:modelValue'])
+
+const categoryList = ref([]) // 分类树
+
+onMounted(async () => {
+  // 获得分类树
+  const data = await ProductCategoryApi.getCategoryList({})
+  categoryList.value = handleTree(data, 'id', 'parentId')
+})
+</script>

src/views/mall/promotion/coupon/template/CouponTemplateForm.vue

@@ -172,6 +172,12 @@
           </div>
         </div>
       </el-form-item>
+      <el-form-item
+        v-if="formData.productScope === PromotionProductScopeEnum.CATEGORY.scope"
+        prop="productCategoryIds"
+      >
+        <ProductCategorySelect v-model="formData.productCategoryIds" multiple />
+      </el-form-item>
     </el-form>
     <template #footer>
       <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
@@ -190,6 +196,7 @@ import {
   PromotionProductScopeEnum
 } from '@/utils/constants'
 import SpuTableSelect from '@/views/mall/product/spu/components/SpuTableSelect.vue'
+import ProductCategorySelect from '@/views/mall/product/category/components/ProductCategorySelect.vue'
 
 defineOptions({ name: 'CouponTemplateForm' })
 
@@ -218,7 +225,8 @@ const formData = ref({
   fixedStartTerm: undefined,
   fixedEndTerm: undefined,
   productScope: PromotionProductScopeEnum.ALL.scope,
-  productSpuIds: []
+  productSpuIds: [],
+  productCategoryIds: []
 })
 const formRules = reactive({
   name: [{ required: true, message: '优惠券名称不能为空', trigger: 'blur' }],
@@ -235,7 +243,8 @@ const formRules = reactive({
   fixedStartTerm: [{ required: true, message: '开始领取天数不能为空', trigger: 'blur' }],
   fixedEndTerm: [{ required: true, message: '开始领取天数不能为空', trigger: 'blur' }],
   productScope: [{ required: true, message: '商品范围不能为空', trigger: 'blur' }],
-  productSpuIds: [{ required: true, message: '商品范围不能为空', trigger: 'blur' }]
+  productSpuIds: [{ required: true, message: '商品范围不能为空', trigger: 'blur' }],
+  productCategoryIds: [{ required: true, message: '分类范围不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
 const productSpus = ref<ProductSpuApi.Spu[]>([]) // 商品列表
@@ -302,6 +311,12 @@ const submitForm = async () => {
           ? formData.value.validTimes[1]
           : undefined
     } as CouponTemplateApi.CouponTemplateVO
+
+    if (formData.value.productCategoryIds?.length > 0) {
+      // 改个名字？加个字段？
+      data.productSpuIds = formData.value.productCategoryIds
+    }
+
     if (formType.value === 'create') {
       await CouponTemplateApi.createCouponTemplate(data)
       message.success(t('common.createSuccess'))
@@ -337,7 +352,8 @@ const resetForm = () => {
     fixedStartTerm: undefined,
     fixedEndTerm: undefined,
     productScope: PromotionProductScopeEnum.ALL.scope,
-    productSpuIds: []
+    productSpuIds: [],
+    productCategoryIds: []
   }
   formRef.value?.resetFields()
   productSpus.value = []
@@ -350,6 +366,10 @@ const getProductScope = async () => {
       // 获得商品列表
       productSpus.value = await ProductSpuApi.getSpuDetailList(formData.value.productSpuIds)
       break
+    case PromotionProductScopeEnum.CATEGORY.scope:
+      formData.value.productCategoryIds = formData.value.productSpuIds
+      formData.value.productSpuIds = []
+      break
     default:
       break
   }