promotion：实现部分优惠劵模板的前端表单 80%

Author: YunaiV

src/utils/constants.js

@@ -264,3 +264,17 @@ export const CouponTemplateValidityTypeEnum = {
     name: '领取之后可用'
   }
 }
+
+/**
+ * 营销的商品范围枚举
+ */
+export const PromotionProductScopeEnum = {
+  ALL: {
+    scope: 1,
+    name: '全部商品参与'
+  },
+  SPU: {
+    scope: 2,
+    name: '指定商品参与'
+  }
+}

src/utils/dict.js

@@ -62,6 +62,8 @@ export const DICT_TYPE = {
 
   // ========== MALL - PROMOTION 模块 ==========
   PROMOTION_DISCOUNT_TYPE: 'promotion_discount_type', // 优惠类型
+  PROMOTION_PRODUCT_SCOPE: 'promotion_product_scope', // 营销的商品范围
+  COUPON_TEMPLATE_VALIDITY_TYPE: 'coupon_template_validity_type', // 优惠劵模板的有限期类型
 }
 
 /**

src/views/promotion/couponTemplate/index.vue

@@ -74,79 +74,71 @@
                 @pagination="getList"/>
 
     <!-- 对话框(添加 / 修改) -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="优惠劵名" prop="name">
-          <el-input v-model="form.name" placeholder="请输入优惠劵名" />
+    <el-dialog :title="title" :visible.sync="open" width="600px" v-dialogDrag append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="140px">
+        <el-form-item label="优惠券名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入优惠券名称" />
         </el-form-item>
-        <el-form-item label="状态" prop="status">
-          <el-radio-group v-model="form.status">
-            <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
+        <el-form-item label="优惠券类型" prop="discountType">
+          <el-radio-group v-model="form.discountType">
+            <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.PROMOTION_DISCOUNT_TYPE)"
                       :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="类型" prop="type">
-          <el-select v-model="form.type" placeholder="请选择类型">
-            <el-option v-for="dict in this.getDictDatas(DICT_TYPE.PRODUCT_SPU_STATUS)"
-                       :key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
-          </el-select>
+        <el-form-item v-if="form.discountType === PromotionDiscountTypeEnum.PRICE.type" label="优惠券面额" prop="discountPrice">
+          <el-input-number v-model="form.discountPrice" placeholder="请输入优惠金额，单位：元"
+                           style="width: 400px" :precision="2" :min="0" /> 元
         </el-form-item>
-        <el-form-item label="发行总量" prop="totalCount">
-          <el-input v-model="form.totalCount" placeholder="请输入发行总量" />
+        <el-form-item v-if="form.discountType === PromotionDiscountTypeEnum.PERCENT.type" label="优惠券折扣" prop="discountPercent">
+          <el-input-number v-model="form.discountPercent" placeholder="优惠券折扣不能小于 1 折，且不可大于 9.9 折"
+                           style="width: 400px" :precision="1" :min="1" :max="9.9" /> 折
         </el-form-item>
-        <el-form-item label="每人限领个数" prop="takeLimitCount">
-          <el-input v-model="form.takeLimitCount" placeholder="请输入每人限领个数" />
+        <el-form-item v-if="form.discountType === PromotionDiscountTypeEnum.PERCENT.type" label="最多优惠" prop="discountLimitPrice">
+          <el-input-number v-model="form.discountLimitPrice" placeholder="请输入最多优惠"
+                           style="width: 400px" :precision="2" :min="0" /> 元
         </el-form-item>
-        <el-form-item label="领取方式" prop="takeType">
-          <el-select v-model="form.takeType" placeholder="请选择领取方式">
-            <el-option label="请选择字典生成" value="" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="是否设置满多少金额可用，单位：分" prop="usePrice">
-          <el-input v-model="form.usePrice" placeholder="请输入是否设置满多少金额可用，单位：分" />
-        </el-form-item>
-        <el-form-item label="商品范围" prop="productScope">
-          <el-input v-model="form.productScope" placeholder="请输入商品范围" />
-        </el-form-item>
-        <el-form-item label="商品 SPU 编号的数组" prop="productSpuIds">
-          <el-input v-model="form.productSpuIds" placeholder="请输入商品 SPU 编号的数组" />
-        </el-form-item>
-        <el-form-item label="生效日期类型" prop="validityType">
-          <el-select v-model="form.validityType" placeholder="请选择生效日期类型">
-            <el-option label="请选择字典生成" value="" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="固定日期-生效开始时间" prop="validStartTime">
-          <el-date-picker clearable v-model="form.validStartTime" type="date" value-format="timestamp" placeholder="选择固定日期-生效开始时间" />
+        <el-form-item label="满多少元可以使用" prop="usePrice">
+          <el-input-number v-model="form.usePrice" placeholder="无门槛请设为 0"
+                    style="width: 400px" :precision="2" :min="0" /> 元
         </el-form-item>
-        <el-form-item label="固定日期-生效结束时间" prop="validEndTime">
-          <el-date-picker clearable v-model="form.validEndTime" type="date" value-format="timestamp" placeholder="选择固定日期-生效结束时间" />
-        </el-form-item>
-        <el-form-item label="领取日期-开始天数" prop="fixedStartTerm">
-          <el-input v-model="form.fixedStartTerm" placeholder="请输入领取日期-开始天数" />
+        <el-form-item label="领取方式" prop="takeType">
+          <el-radio-group v-model="form.takeType">
+            <el-radio :key="1" :label="1">直接领取</el-radio>
+            <el-radio :key="2" :label="2">指定发放</el-radio>
+          </el-radio-group>
         </el-form-item>
-        <el-form-item label="领取日期-结束天数" prop="fixedEndTerm">
-          <el-input v-model="form.fixedEndTerm" placeholder="请输入领取日期-结束天数" />
+        <el-form-item v-if="form.takeType === 1" label="发放数量" prop="totalCount">
+          <el-input-number v-model="form.usePrice" placeholder="发放数量，没有之后不能领取或发放，-1 为不限制"
+                           style="width: 400px" :precision="0" :min="-1" /> 张
         </el-form-item>
-        <el-form-item label="优惠类型" prop="discountType">
-          <el-select v-model="form.discountType" placeholder="请选择优惠类型">
-            <el-option label="请选择字典生成" value="" />
-          </el-select>
+        <el-form-item v-if="form.takeType === 1" label="每人限领个数" prop="takeLimitCount">
+          <el-input-number v-model="form.takeLimitCount" placeholder="设置为 -1 时，可无限领取"
+                    style="width: 400px" :precision="0" :min="-1" /> 张
         </el-form-item>
-        <el-form-item label="折扣百分比" prop="discountPercent">
-          <el-input v-model="form.discountPercent" placeholder="请输入折扣百分比" />
+        <el-form-item label="有效期类型" prop="validityType">
+          <el-radio-group v-model="form.validityType">
+            <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COUPON_TEMPLATE_VALIDITY_TYPE)"
+                      :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
+          </el-radio-group>
         </el-form-item>
-        <el-form-item label="优惠金额，单位：分" prop="discountPrice">
-          <el-input v-model="form.discountPrice" placeholder="请输入优惠金额，单位：分" />
+        <el-form-item v-if="form.validityType === CouponTemplateValidityTypeEnum.DATE.type" label="固定日期" prop="validTimes">
+          <el-date-picker v-model="queryParams.validTimes" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                          range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
         </el-form-item>
-        <el-form-item label="折扣上限" prop="discountPriceLimit">
-          <el-input v-model="form.discountPriceLimit" placeholder="请输入折扣上限，仅在 {@link #preferentialType} 等于 2 时生效" />
+        <el-form-item v-if="form.validityType === CouponTemplateValidityTypeEnum.TERM.type" label="领取日期" prop="fixedStartTerm">
+          第 <el-input-number v-model="form.fixedStartTerm" placeholder="0 为今天生效"
+                              style="width: 165px" :precision="0" :min="0"/> 至
+          <el-input-number v-model="form.fixedEndTerm" placeholder="请输入结束天数"
+                           style="width: 165px" :precision="0" :min="0"/> 天有效
         </el-form-item>
-        <el-form-item label="领取优惠券的数量" prop="takeNum">
-          <el-input v-model="form.takeNum" placeholder="请输入领取优惠券的数量" />
+        <el-form-item label="活动商品" prop="productScope">
+          <el-radio-group v-model="form.productScope">
+            <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.PROMOTION_PRODUCT_SCOPE)"
+                      :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
+          </el-radio-group>
         </el-form-item>
-        <el-form-item label="使用优惠券的次数" prop="useCount">
-          <el-input v-model="form.useCount" placeholder="请输入使用优惠券的次数" />
+        <el-form-item v-if="form.productScope === PromotionProductScopeEnum.SPU.scope" prop="productSpuIds">
+          <el-input v-model="form.productSpuIds" placeholder="请输入商品 SPU 编号的数组" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -159,7 +151,7 @@
 
 <script>
 import { createCouponTemplate, updateCouponTemplate, deleteCouponTemplate, getCouponTemplate, getCouponTemplatePage } from "@/api/promotion/couponTemplate";
-import {CouponTemplateValidityTypeEnum, PromotionDiscountTypeEnum} from "@/utils/constants";
+import { CommonStatusEnum, CouponTemplateValidityTypeEnum, PromotionDiscountTypeEnum, PromotionProductScopeEnum} from "@/utils/constants";
 
 export default {
   name: "CouponTemplate",
@@ -175,7 +167,7 @@ export default {
       showSearch: true,
       // 总条数
       total: 0,
-      // 优惠劵模板列表
+      // 优惠劵列表
       list: [],
       // 弹出层标题
       title: "",
@@ -194,19 +186,26 @@ export default {
       form: {},
       // 表单校验
       rules: {
-        name: [{ required: true, message: "优惠劵名不能为空", trigger: "blur" }],
-        status: [{ required: true, message: "状态不能为空", trigger: "blur" }],
-        type: [{ required: true, message: "类型", trigger: "change" }],
-        totalCount: [{ required: true, message: "发行总量不能为空", trigger: "blur" }],
-        takeLimitCount: [{ required: true, message: "每人限领个数不能为空", trigger: "blur" }],
+        name: [{ required: true, message: "优惠券名称不能为空", trigger: "blur" }],
+        discountType: [{ required: true, message: "优惠券类型不能为空", trigger: "change" }],
+        discountPrice: [{ required: true, message: "优惠券面额不能为空", trigger: "blur" }],
+        discountPercent: [{ required: true, message: "优惠券折扣不能为空", trigger: "blur" }],
+        discountLimitPrice: [{ required: true, message: "最多优惠不能为空", trigger: "blur" }],
+        usePrice: [{ required: true, message: "满多少元可以使用不能为空", trigger: "blur" }],
         takeType: [{ required: true, message: "领取方式不能为空", trigger: "change" }],
-        usePrice: [{ required: true, message: "是否设置满多少金额可用，单位：分不能为空", trigger: "blur" }],
+        totalCount: [{ required: true, message: "发放数量不能为空", trigger: "blur" }],
+        takeLimitCount: [{ required: true, message: "每人限领个数不能为空", trigger: "blur" }],
+        validityType: [{ required: true, message: "有效期类型不能为空", trigger: "change" }],
+        validTimes: [{ required: true, message: "固定日期不能为空", trigger: "change" }],
+        fixedStartTerm: [{ required: true, message: "开始领取天数不能为空", trigger: "blur" }],
+        fixedEndTerm: [{ required: true, message: "开始领取天数不能为空", trigger: "blur" }],
         productScope: [{ required: true, message: "商品范围不能为空", trigger: "blur" }],
-        validityType: [{ required: true, message: "生效日期类型不能为空", trigger: "change" }],
-        discountType: [{ required: true, message: "优惠类型不能为空", trigger: "change" }],
-        takeNum: [{ required: true, message: "领取优惠券的数量不能为空", trigger: "blur" }],
-        useCount: [{ required: true, message: "使用优惠券的次数不能为空", trigger: "blur" }],
-      }
+        productSpuIds: [{ required: true, message: "商品范围不能为空", trigger: "blur" }],
+      },
+      // 如下的变量，主要为了 v-if 判断可以使用到
+      PromotionProductScopeEnum: PromotionProductScopeEnum,
+      CouponTemplateValidityTypeEnum: CouponTemplateValidityTypeEnum,
+      PromotionDiscountTypeEnum: PromotionDiscountTypeEnum,
     };
   },
   created() {
@@ -233,25 +232,22 @@ export default {
       this.form = {
         id: undefined,
         name: undefined,
-        status: undefined,
-        type: undefined,
+        discountType: PromotionDiscountTypeEnum.PRICE.type,
+        discountPrice: 0,
+        discountPercent: undefined,
+        discountLimitPrice: undefined,
+        usePrice: undefined,
+        takeType: 1,
         totalCount: undefined,
         takeLimitCount: undefined,
-        takeType: undefined,
-        usePrice: undefined,
-        productScope: undefined,
-        productSpuIds: undefined,
-        validityType: undefined,
+        validityType: CouponTemplateValidityTypeEnum.DATE.type,
+        validTimes: [],
         validStartTime: undefined,
         validEndTime: undefined,
         fixedStartTerm: undefined,
         fixedEndTerm: undefined,
-        discountType: undefined,
-        discountPercent: undefined,
-        discountPrice: undefined,
-        discountPriceLimit: undefined,
-        takeNum: undefined,
-        useCount: undefined,
+        productScope: PromotionProductScopeEnum.ALL.scope,
+        productSpuIds: [],
       };
       this.resetForm("form");
     },
@@ -269,16 +265,21 @@ export default {
     handleAdd() {
       this.reset();
       this.open = true;
-      this.title = "添加优惠劵模板";
+      this.title = "添加优惠劵";
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
       const id = row.id;
       getCouponTemplate(id).then(response => {
-        this.form = response.data;
+        this.form = {
+          ...response.data,
+          discountPrice: response.data.discountPrice ? response.data.discountPrice / 100.0 : undefined,
+          discountPercent: response.data.discountPercent ? response.data.discountPercent / 10.0 : undefined,
+          usePrice: response.data.usePrice ? response.data.usePrice / 100.0 : undefined,
+        }
         this.open = true;
-        this.title = "修改优惠劵模板";
+        this.title = "修改优惠劵";
       });
     },
     /** 提交按钮 */
@@ -287,17 +288,24 @@ export default {
         if (!valid) {
           return;
         }
+        // 金额相关字段的缩放
+        let data = {
+          ...this.form,
+          discountPrice: this.form.discountPrice ? this.form.discountPrice * 100 : undefined,
+          discountPercent: this.form.discountPercent ? this.form.discountPercent * 10 : undefined,
+          usePrice: this.form.usePrice ? this.form.usePrice * 100 : undefined,
+        }
         // 修改的提交
         if (this.form.id != null) {
-          updateCouponTemplate(this.form).then(response => {
+          updateCouponTemplate(data).then(response => {
             this.$modal.msgSuccess("修改成功");
             this.open = false;
             this.getList();
           });
           return;
         }
         // 添加的提交
-        createCouponTemplate(this.form).then(response => {
+        createCouponTemplate(data).then(response => {
           this.$modal.msgSuccess("新增成功");
           this.open = false;
           this.getList();
@@ -307,7 +315,7 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const id = row.id;
-      this.$modal.confirm('是否确认删除优惠劵模板编号为"' + id + '"的数据项?').then(function() {
+      this.$modal.confirm('是否确认删除优惠劵编号为"' + id + '"的数据项?').then(function() {
           return deleteCouponTemplate(id);
         }).then(() => {
           this.getList();