SPU: 新增优惠卷选择

(cherry picked from commit 3464bb9c74)
2023-10-19 17:33:42 +08:00 · 2023-10-19 17:33:42 +08:00 · e9da54b100
parent b8b549462d
commit e9da54b100
5 changed files with 251 additions and 14 deletions
--- a/src/api/mall/product/spu.ts
+++ b/src/api/mall/product/spu.ts
@ -28,14 +28,14 @@ export interface Sku {
 export interface Spu {
  id?: number
  name?: string // 商品名称
-  categoryId?: number | null // 商品分类
+  categoryId?: number | undefined // 商品分类
  keyword?: string // 关键字
-  unit?: number | null // 单位
+  unit?: number | undefined // 单位
  picUrl?: string // 商品封面图
  sliderPicUrls?: string[] // 商品轮播图
  introduction?: string // 商品简介
-  deliveryTemplateId?: number | null // 运费模版
-  brandId?: number | null // 商品品牌编号
+  deliveryTemplateId?: number | undefined // 运费模版
+  brandId?: number | undefined // 商品品牌编号
  specType?: boolean // 商品规格
  subCommissionType?: boolean // 分销类型
  skus?: Sku[] // sku数组
--- a/src/utils/dict.ts
+++ b/src/utils/dict.ts
@ -156,6 +156,7 @@ export enum DICT_TYPE {
  // ========== MALL - 商品模块 ==========
  PRODUCT_UNIT = 'product_unit', // 商品单位
  PRODUCT_SPU_STATUS = 'product_spu_status', //商品状态
+  PROMOTION_TYPE_ENUM = 'promotion_type_enum', // 营销类型枚举

  // ========== MALL - 交易模块 ==========
  EXPRESS_CHARGE_MODE = 'trade_delivery_express_charge_mode', //快递的计费方式
--- a/src/views/mall/product/spu/form/CouponSelect.vue
+++ b/src/views/mall/product/spu/form/CouponSelect.vue
@ -0,0 +1,217 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle" width="65%">
+    <!-- 搜索工作栏 -->
+    <ContentWrap>
+      <el-form
+        ref="queryFormRef"
+        :inline="true"
+        :model="queryParams"
+        class="-mb-15px"
+        label-width="82px"
+      >
+        <el-form-item label="优惠券名称" prop="name">
+          <el-input
+            v-model="queryParams.name"
+            class="!w-240px"
+            clearable
+            placeholder="请输入优惠劵名"
+            @keyup="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="优惠类型" prop="discountType">
+          <el-select
+            v-model="queryParams.discountType"
+            class="!w-240px"
+            clearable
+            placeholder="请选择优惠券类型"
+          >
+            <el-option
+              v-for="dict in getIntDictOptions(DICT_TYPE.PROMOTION_DISCOUNT_TYPE)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="优惠券状态" prop="status">
+          <el-select
+            v-model="queryParams.status"
+            class="!w-240px"
+            clearable
+            placeholder="请选择优惠券状态"
+          >
+            <el-option
+              v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="创建时间" prop="createTime">
+          <el-date-picker
+            v-model="queryParams.createTime"
+            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+            class="!w-240px"
+            end-placeholder="结束日期"
+            start-placeholder="开始日期"
+            type="daterange"
+            value-format="YYYY-MM-DD HH:mm:ss"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleQuery">
+            <Icon class="mr-5px" icon="ep:search" />
+            搜索
+          </el-button>
+          <el-button @click="resetQuery">
+            <Icon class="mr-5px" icon="ep:refresh" />
+            重置
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </ContentWrap>
+
+    <!-- 列表 -->
+    <ContentWrap>
+      <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" />
+        <el-table-column label="优惠券名称" min-width="140" prop="name" />
+        <el-table-column label="类型" min-width="80" prop="productScope">
+          <template #default="scope">
+            <dict-tag :type="DICT_TYPE.PROMOTION_PRODUCT_SCOPE" :value="scope.row.productScope" />
+          </template>
+        </el-table-column>
+        <el-table-column label="优惠" min-width="100" prop="discount">
+          <template #default="scope">
+            <dict-tag :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE" :value="scope.row.discountType" />
+            {{ discountFormat(scope.row) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="领取方式" min-width="100" prop="takeType">
+          <template #default="scope">
+            <dict-tag :type="DICT_TYPE.PROMOTION_COUPON_TAKE_TYPE" :value="scope.row.takeType" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          :formatter="validityTypeFormat"
+          align="center"
+          label="使用时间"
+          prop="validityType"
+          width="185"
+        />
+        <el-table-column align="center" label="发放数量" prop="totalCount" />
+        <el-table-column
+          :formatter="remainedCountFormat"
+          align="center"
+          label="剩余数量"
+          prop="totalCount"
+        />
+        <el-table-column
+          :formatter="takeLimitCountFormat"
+          align="center"
+          label="领取上限"
+          prop="takeLimitCount"
+        />
+        <el-table-column align="center" label="状态" prop="status">
+          <template #default="scope">
+            <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          :formatter="dateFormatter"
+          align="center"
+          label="创建时间"
+          prop="createTime"
+          width="180"
+        />
+      </el-table>
+      <!-- 分页 -->
+      <Pagination
+        v-model:limit="queryParams.pageSize"
+        v-model:page="queryParams.pageNo"
+        :total="total"
+        @pagination="getList"
+      />
+    </ContentWrap>
+    <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 { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import {
+  discountFormat,
+  remainedCountFormat,
+  takeLimitCountFormat,
+  validityTypeFormat
+} from '@/views/mall/promotion/coupon/formatter'
+import { dateFormatter } from '@/utils/formatTime'
+import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
+
+defineOptions({ name: 'CouponSelect' })
+
+defineProps<{
+  multipleSelection: { id: number; name: string }[]
+}>()
+const emit = defineEmits<{
+  (e: 'update:multipleSelection', v: { id: number; name: string }[])
+}>()
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('选择优惠卷') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 字典表格数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: null,
+  status: null,
+  discountType: null,
+  type: null,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    // 执行查询
+    const data = await CouponTemplateApi.getCouponTemplatePage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef?.value?.resetFields()
+  handleQuery()
+}
+/** 打开弹窗 */
+const open = async () => {
+  dialogVisible.value = true
+  resetQuery()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+const handleSelectionChange = (val: CouponTemplateApi.CouponTemplateVO[]) => {
+  emit(
+    'update:multipleSelection',
+    val.map((item) => ({ id: item.id, name: item.name }))
+  )
+}
+const submitForm = async () => {}
+</script>
+<style lang="scss" scoped></style>
--- a/src/views/mall/product/spu/form/OtherSettingsForm.vue
+++ b/src/views/mall/product/spu/form/OtherSettingsForm.vue
@ -43,16 +43,22 @@
      <el-col :span="24">
        <!--   TODO @puhui999：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-tag
+            v-for="type in getIntDictOptions(DICT_TYPE.PROMOTION_TYPE_ENUM)"
+            :key="type.value as number"
+            :type="type.colorType"
+            class="mr-[10px]"
+          >
+            {{ type.label }}
+          </el-tag>
        </el-form-item>
      </el-col>
-      <!-- TODO @puhui999：等优惠劵 ok 在搞 -->
      <el-col :span="24">
        <el-form-item label="赠送优惠劵">
-          <el-button>选择优惠券</el-button>
+          <el-tag v-for="coupon in couponTemplateList" :key="coupon.id as number" class="mr-[10px]">
+            {{ coupon.name }}
+          </el-tag>
+          <el-button @click="openCouponSelect">选择优惠券</el-button>
        </el-form-item>
      </el-col>
    </el-row>
@ -82,6 +88,7 @@
      <el-tag class="ml-2" type="warning">拼团</el-tag>
    </template>
  </Descriptions>
+  <CouponSelect ref="couponSelectRef" />
 </template>
 <script lang="ts" setup>
 import type { Spu } from '@/api/mall/product/spu'
@ -89,6 +96,8 @@ import { PropType } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 import { copyValueToTarget } from '@/utils'
 import { otherSettingsSchema } from './spu.data'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import CouponSelect from './CouponSelect.vue'

 defineOptions({ name: 'OtherSettingsForm' })

@ -104,6 +113,11 @@ const props = defineProps({
  activeName: propTypes.string.def(''),
  isDetail: propTypes.bool.def(false) // 是否作为详情组件
 })
+const couponSelectRef = ref() // 优惠卷模版选择
+const couponTemplateList = ref<{ id: number; name: string }[]>([]) // 选择的优惠卷
+const openCouponSelect = () => {
+  couponSelectRef.value?.open()
+}

 const otherSettingsFormRef = ref() // 表单Ref
 // 表单数据
--- a/src/views/mall/product/spu/index.vue
+++ b/src/views/mall/product/spu/index.vue
@ -24,8 +24,8 @@
          :props="defaultProps"
          class="w-1/1"
          clearable
-          placeholder="请选择商品分类"
          filterable
+          placeholder="请选择商品分类"
        />
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
@ -48,7 +48,12 @@
          <Icon class="mr-5px" icon="ep:refresh" />
          重置
        </el-button>
-        <el-button v-hasPermi="['product:spu:create']" plain type="primary" @click="openForm">
+        <el-button
+          v-hasPermi="['product:spu:create']"
+          plain
+          type="primary"
+          @click="openForm(undefined)"
+        >
          <Icon class="mr-5px" icon="ep:plus" />
          新增
        </el-button>
@ -278,8 +283,8 @@ const queryParams = ref({
  pageSize: 10,
  tabType: 0,
  name: '',
-  categoryId: null,
-  createTime: []
+  categoryId: undefined,
+  createTime: undefined
 }) // 查询参数
 const queryFormRef = ref() // 搜索的表单Ref