Browse Source

feat(ticket): 优化代金券使用规则配置

- 将单日可用数量和限购数量的显示从"--"改为"不限制"
- 使用单选按钮组替代原有输入框,支持限制/不限制两种模式
- 增加对数量类型选择的表单验证规则
- 动态控制输入框的显示和验证逻辑
- 添加数量类型相关的监听器,自动清空无效输入
- 初始化时根据已有值设置正确的类型选项
- 提交时清理不必要的参数字段
congxuesong 2 weeks ago
parent
commit
27dfec2942
2 changed files with 184 additions and 59 deletions
  1. 2 2
      src/views/ticketManagement/detail.vue
  2. 182 57
      src/views/ticketManagement/newVoucher.vue

+ 2 - 2
src/views/ticketManagement/detail.vue

@@ -89,14 +89,14 @@
           <div class="detail-item">
             <div class="detail-label">单日可用数量</div>
             <div class="detail-value">
-              {{ voucherModel.singleCanUse ? voucherModel.singleCanUse + "张" : "--" }}
+              {{ voucherModel.singleCanUse ? voucherModel.singleCanUse + "张" : "不限制" }}
             </div>
           </div>
           <!-- 限购数量 -->
           <div class="detail-item">
             <div class="detail-label">限购数量</div>
             <div class="detail-value">
-              {{ voucherModel.purchaseLimitCode ? voucherModel.purchaseLimitCode + "张" : "--" }}
+              {{ voucherModel.purchaseLimitCode ? voucherModel.purchaseLimitCode + "张" : "不限制" }}
             </div>
           </div>
           <!-- 适用范围 -->

+ 182 - 57
src/views/ticketManagement/newVoucher.vue

@@ -5,7 +5,7 @@
       <el-button @click="goBack"> 返回 </el-button>
       <h2 class="title">{{ type == "add" ? "新建" : "编辑" }}代金券</h2>
     </div>
-    <el-form :model="voucherModel" ref="ruleFormRef" :rules="rules" label-width="120px" class="formBox">
+    <el-form :model="voucherModel" ref="ruleFormRef" :rules="rules" label-width="130px" class="formBox">
       <div class="content">
         <!-- 左侧内容区域 -->
         <div class="contentLeft">
@@ -181,11 +181,25 @@
           <div class="model">
             <h3 style="font-weight: bold">使用规则:</h3>
             <!-- 单日可用数量 -->
-            <el-form-item label="单日可用数量(张)" prop="singleCanUse">
+            <el-form-item label="单日可用数量(张)" prop="singleCanUseType">
+              <el-radio-group v-model="voucherModel.singleCanUseType" class="ml-4">
+                <el-radio v-for="status in dailyUseLimitList" :value="status.value" :key="status.value">
+                  {{ status.label }}
+                </el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="" prop="singleCanUse" v-if="voucherModel.singleCanUseType == 2">
               <el-input v-model="voucherModel.singleCanUse" maxlength="15" placeholder="请输入" clearable />
             </el-form-item>
             <!-- 限购数量 -->
-            <el-form-item label="限购数量(张)" prop="purchaseLimitCode">
+            <el-form-item label="限购数量(张)" prop="purchaseLimitType">
+              <el-radio-group v-model="voucherModel.purchaseLimitType" class="ml-4">
+                <el-radio v-for="status in purchaseLimitList" :value="status.value" :key="status.value">
+                  {{ status.label }}
+                </el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="" prop="purchaseLimitCode" v-if="voucherModel.purchaseLimitType == 2">
               <el-input v-model="voucherModel.purchaseLimitCode" maxlength="15" placeholder="请输入" clearable />
             </el-form-item>
             <!-- 适用范围 -->
@@ -511,72 +525,88 @@ const rules = reactive({
       trigger: "blur"
     }
   ],
+  singleCanUseType: [{ required: true, message: "请选择单日可用数量类型" }],
   singleCanUse: [
     {
-      validator: validatePositiveInteger("单日可用数量必须为正整数", { required: false }),
-      trigger: "blur"
-    },
-    {
+      required: true,
       validator: (rule: any, value: any, callback: any) => {
-        // 如果值为空,不进行验证
-        if (!value || value.toString().trim() === "") {
-          callback();
-          return;
-        }
-        const stock = voucherModel.value.singleQty;
-        // 如果库存为空,不进行验证(由库存的验证规则处理)
-        if (!stock || stock.toString().trim() === "") {
-          callback();
-          return;
-        }
-        const useNum = Number(value);
-        const stockNum = Number(stock);
-        // 如果转换失败,不进行验证(由其他验证规则处理)
-        if (isNaN(useNum) || isNaN(stockNum)) {
+        if (voucherModel.value.singleCanUseType == 2) {
+          if (!value || value.toString().trim() === "") {
+            callback(new Error("请输入单日可用数量"));
+            return;
+          }
+          // 验证是否为正整数
+          validatePositiveInteger("单日可用数量必须为正整数", { required: false })(rule, value, (error: any) => {
+            if (error) {
+              callback(error);
+              return;
+            }
+            const stock = voucherModel.value.singleQty;
+            // 如果库存为空,不进行验证(由库存的验证规则处理)
+            if (!stock || stock.toString().trim() === "") {
+              callback();
+              return;
+            }
+            const useNum = Number(value);
+            const stockNum = Number(stock);
+            // 如果转换失败,不进行验证(由其他验证规则处理)
+            if (isNaN(useNum) || isNaN(stockNum)) {
+              callback();
+              return;
+            }
+            // 验证单日可用数量不能多于库存
+            if (useNum > stockNum) {
+              callback(new Error("单日可用数量不能多于库存"));
+              return;
+            }
+            callback();
+          });
+        } else {
           callback();
-          return;
         }
-        // 验证单日可用数量不能多于库存
-        if (useNum > stockNum) {
-          callback(new Error("单日可用数量不能多于库存"));
-          return;
-        }
-        callback();
       },
       trigger: "blur"
     }
   ],
+  purchaseLimitType: [{ required: true, message: "请选择限购数量类型" }],
   purchaseLimitCode: [
     {
-      validator: validatePositiveInteger("限购数量必须为正整数", { required: false }),
-      trigger: "blur"
-    },
-    {
+      required: true,
       validator: (rule: any, value: any, callback: any) => {
-        // 如果值为空,不进行验证
-        if (!value || value.toString().trim() === "") {
-          callback();
-          return;
-        }
-        const stock = voucherModel.value.singleQty;
-        // 如果库存为空,不进行验证(由库存的验证规则处理)
-        if (!stock || stock.toString().trim() === "") {
-          callback();
-          return;
-        }
-        const limitNum = Number(value);
-        const stockNum = Number(stock);
-        // 如果转换失败,不进行验证(由其他验证规则处理)
-        if (isNaN(limitNum) || isNaN(stockNum)) {
+        if (voucherModel.value.purchaseLimitType == 2) {
+          if (!value || value.toString().trim() === "") {
+            callback(new Error("请输入限购数量"));
+            return;
+          }
+          // 验证是否为正整数
+          validatePositiveInteger("限购数量必须为正整数", { required: false })(rule, value, (error: any) => {
+            if (error) {
+              callback(error);
+              return;
+            }
+            const stock = voucherModel.value.singleQty;
+            // 如果库存为空,不进行验证(由库存的验证规则处理)
+            if (!stock || stock.toString().trim() === "") {
+              callback();
+              return;
+            }
+            const limitNum = Number(value);
+            const stockNum = Number(stock);
+            // 如果转换失败,不进行验证(由其他验证规则处理)
+            if (isNaN(limitNum) || isNaN(stockNum)) {
+              callback();
+              return;
+            }
+            // 验证限购数量不能多于库存
+            if (limitNum > stockNum) {
+              callback(new Error("限购数量不能多于库存"));
+              return;
+            }
+            callback();
+          });
+        } else {
           callback();
-          return;
-        }
-        // 验证限购数量不能多于库存
-        if (limitNum > stockNum) {
-          callback(new Error("限购数量不能多于库存"));
-          return;
         }
-        callback();
       },
       trigger: "blur"
     }
@@ -632,8 +662,12 @@ const voucherModel = ref<any>({
   disableDateList: [],
   // 库存
   singleQty: "",
+  // 单日可用数量类型:1-不限制,2-限制
+  singleCanUseType: "1",
   // 单日可用数量
   singleCanUse: "",
+  // 限购数量类型:1-不限制,2-限制
+  purchaseLimitType: "1",
   // 限购数量
   purchaseLimitCode: "",
   // 适用范围类型:0-全场通用,1-部分不可用
@@ -673,6 +707,18 @@ const applicableScopeList = ref([
   { value: "2", label: "部分不可用" }
 ]);
 
+// 单日可用数量类型列表
+const dailyUseLimitList = ref([
+  { value: "1", label: "不限制" },
+  { value: "2", label: "限制" }
+]);
+
+// 限购数量类型列表
+const purchaseLimitList = ref([
+  { value: "1", label: "不限制" },
+  { value: "2", label: "限制" }
+]);
+
 // 星期选项列表
 const weekdayList = ref([
   { name: "周一", id: "0", oName: "星期一" },
@@ -764,12 +810,12 @@ watch(
   () => voucherModel.value.singleQty,
   () => {
     if (isInitializing.value) return;
-    if (voucherModel.value.singleCanUse) {
+    if (voucherModel.value.singleCanUseType == 2 && voucherModel.value.singleCanUse) {
       nextTick(() => {
         ruleFormRef.value?.validateField("singleCanUse");
       });
     }
-    if (voucherModel.value.purchaseLimitCode) {
+    if (voucherModel.value.purchaseLimitType == 2 && voucherModel.value.purchaseLimitCode) {
       nextTick(() => {
         ruleFormRef.value?.validateField("purchaseLimitCode");
       });
@@ -778,6 +824,54 @@ watch(
 );
 
 /**
+ * 监听单日可用数量类型变化
+ * 当切换到"不限制"时,清空输入框的值
+ */
+watch(
+  () => voucherModel.value.singleCanUseType,
+  newVal => {
+    if (newVal == 1) {
+      voucherModel.value.singleCanUse = "";
+      nextTick(() => {
+        ruleFormRef.value?.clearValidate("singleCanUse");
+      });
+    }
+  }
+);
+
+/**
+ * 监听限购数量类型变化
+ * 当切换到"不限制"时,清空输入框的值
+ */
+watch(
+  () => voucherModel.value.purchaseLimitType,
+  newVal => {
+    if (newVal == 1) {
+      voucherModel.value.purchaseLimitCode = "";
+      nextTick(() => {
+        ruleFormRef.value?.clearValidate("purchaseLimitCode");
+      });
+    }
+  }
+);
+
+/**
+ * 监听适用范围类型变化
+ * 当切换到"全场通用"时,清空输入框的值
+ */
+watch(
+  () => voucherModel.value.applyType,
+  newVal => {
+    if (newVal == 1) {
+      voucherModel.value.applyDesc = "";
+      nextTick(() => {
+        ruleFormRef.value?.clearValidate("applyDesc");
+      });
+    }
+  }
+);
+
+/**
  * 监听使用开始时间变化
  * 更新虚拟字段以支持表单验证
  */
@@ -872,6 +966,27 @@ onMounted(async () => {
         voucherModel.value.disableDateList = [null];
       }
     }
+    // 处理单日可用数量类型:如果有值,设置为"限制",否则设置为"不限制"
+    if (voucherModel.value.singleCanUse && voucherModel.value.singleCanUse.toString().trim() !== "") {
+      voucherModel.value.singleCanUseType = "2";
+    } else {
+      voucherModel.value.singleCanUseType = "1";
+      voucherModel.value.singleCanUse = "";
+    }
+    // 处理限购数量类型:如果有值,设置为"限制",否则设置为"不限制"
+    if (voucherModel.value.purchaseLimitCode && voucherModel.value.purchaseLimitCode.toString().trim() !== "") {
+      voucherModel.value.purchaseLimitType = "2";
+    } else {
+      voucherModel.value.purchaseLimitType = "1";
+      voucherModel.value.purchaseLimitCode = "";
+    }
+    // 处理适用范围类型:如果有值,设置为"部分不可用",否则设置为"全场通用"
+    if (voucherModel.value.applyDesc && voucherModel.value.applyDesc.toString().trim() !== "") {
+      voucherModel.value.applyType = "2";
+    } else {
+      voucherModel.value.applyType = "1";
+      voucherModel.value.applyDesc = "";
+    }
     console.log(voucherModel.value);
   }
 
@@ -990,10 +1105,20 @@ const handleSubmit = async (submitType?: string) => {
         .join(";");
     }
   }
+  // 处理单日可用数量:如果选择"不限制",清空值
+  if (params.singleCanUseType == 1) {
+    params.singleCanUse = "";
+  }
+  // 处理限购数量:如果选择"不限制",清空值
+  if (params.purchaseLimitType == 1) {
+    params.purchaseLimitCode = "";
+  }
   params.dataType = submitType ? 1 : 0;
   delete params.unavailableWeekdays;
   delete params.unavailableHolidays;
   delete params.disableDateList;
+  delete params.singleCanUseType;
+  delete params.purchaseLimitType;
   console.log("提交参数:", params);
   if (submitType) {
     if (!voucherModel.value.name) {