feat(manager): 增强运营后台表单校验与页面体验

- 富文本编辑器支持 Vue3 modelValue 双向绑定
- 补充 lazyLoading 路径别名，跳过已弃用的分销等级菜单
- 完善文章、优惠券活动、砍价活动、商品参数等表单校验
- 修复文章管理布局遮挡、店铺选会员弹窗及操作列分隔符显示问题

Co-authored-by: Cursor <cursoragent@cursor.com>

manager/src/views/promotions/coupon-activity/coupon-publish.vue

@@ -13,11 +13,11 @@
                 style="width: 260px"
               />
             </el-form-item>
-            <el-form-item label="活动时间" class="activity-time-form-item">
+            <el-form-item label="活动时间" prop="rangeTime" class="activity-time-form-item">
               <el-date-picker
                 type="datetimerange"
                 :disabled-date="options.disabledDate"
-                v-model="rangeTime"
+                v-model="form.rangeTime"
                 format="YYYY-MM-DD HH:mm:ss"
                 start-placeholder="开始时间"
                 end-placeholder="结束时间"
@@ -184,13 +184,13 @@ export default {
       },
       showCouponSelect: false,
       tempCouponList: [],
-      rangeTime: "",
       checkUserList: false,
       selectedMember: [],
       form: {
         promotionName: "",
         activityScope: "ALL",
         couponActivityType: "REGISTERED",
+        rangeTime: [],
         startTime: "",
         endTime: "",
         memberDTOS: [],
@@ -200,9 +200,15 @@ export default {
       submitLoading: false,
       selectCouponList: [],
       formRule: {
-        promotionName: [{ required: true, message: "活动名称不能为空" }],
-        rangeTime: [{ required: true, message: "请选择活动有效期" }],
-        description: [{ required: true, message: "请输入范围描述" }],
+        promotionName: [{ required: true, message: "活动名称不能为空", trigger: "blur" }],
+        rangeTime: [
+          {
+            type: "array",
+            required: true,
+            message: "请选择活动有效期",
+            trigger: "change",
+          },
+        ],
       },
     };
   },
@@ -291,49 +297,53 @@ export default {
       this.showCouponSelect = true;
     },
     handleSubmit() {
-      if (this.form.couponFrequencyEnum !== "") {
-        if (this.form.activityScope == "ALL") {
-          this.form.startTime = this.$filters.unixToDate(this.rangeTime[0] / 1000);
-          this.form.endTime = this.$filters.unixToDate(this.rangeTime[1] / 1000);
+      if (
+        this.form.couponActivityType === "AUTO_COUPON" &&
+        this.form.activityScope !== "ALL"
+      ) {
+        this.$Message.info("自动发券只能全用户发送");
+        this.form.couponActivityType = "SPECIFY";
+        this.form.activityScope = "ALL";
+        return;
+      }
 
-          this.$refs.form.validate((valid) => {
-            if (valid) {
-              const params = JSON.parse(JSON.stringify(this.form));
-              this.submitLoading = true;
-              delete params.id;
-              saveActivityCoupon(params).then((res) => {
-                this.submitLoading = false;
-                if (res.success) {
-                  this.$Message.success("优惠券活动创建成功");
-                  this.closeCurrentPage();
-                }
-              });
-            }
-          });
-        } else {
-          this.$Message.info("自动发券只能全用户发送");
-          this.form.couponActivityType = "SPECIFY";
-          this.form.activityScope = "ALL";
+      this.$refs.form.validate((valid) => {
+        if (!valid) {
+          return;
         }
-      } else {
-        this.form.startTime = this.$filters.unixToDate(this.rangeTime[0] / 1000);
-        this.form.endTime = this.$filters.unixToDate(this.rangeTime[1] / 1000);
 
-        this.$refs.form.validate((valid) => {
-          if (valid) {
-            const params = JSON.parse(JSON.stringify(this.form));
-            this.submitLoading = true;
-            delete params.id;
-            saveActivityCoupon(params).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("优惠券活动创建成功");
-                this.closeCurrentPage();
-              }
-            });
+        if (!this.form.couponActivityItems.length) {
+          this.$Message.warning("请至少选择一张优惠券");
+          return;
+        }
+
+        if (
+          this.form.couponActivityType === "SPECIFY" &&
+          this.form.activityScope === "DESIGNATED" &&
+          !this.form.memberDTOS.length
+        ) {
+          this.$Message.warning("请选择会员");
+          return;
+        }
+
+        const [start, end] = this.form.rangeTime;
+        const startDate = start instanceof Date ? start : new Date(start);
+        const endDate = end instanceof Date ? end : new Date(end);
+        const params = JSON.parse(JSON.stringify(this.form));
+        params.startTime = this.$filters.unixToDate(startDate.getTime() / 1000);
+        params.endTime = this.$filters.unixToDate(endDate.getTime() / 1000);
+        delete params.rangeTime;
+        delete params.id;
+
+        this.submitLoading = true;
+        saveActivityCoupon(params).then((res) => {
+          this.submitLoading = false;
+          if (res.success) {
+            this.$Message.success("优惠券活动创建成功");
+            this.closeCurrentPage();
           }
         });
-      }
+      });
     },
     closeCurrentPage() {
       this.$store.commit("removeTag", "add-platform-coupon");

manager/src/views/promotions/kanjia/kanjia-activity-add-goods.vue

@@ -6,7 +6,7 @@
           <div class="form-item-view">
             <h4>商品信息</h4>
 
-            <el-form-item label="选择商品" prop="scopeType">
+            <el-form-item label="选择商品" prop="promotionGoodsList">
               <el-button type="primary" @click="openSkuList">选择商品</el-button>
             </el-form-item>
 
@@ -116,13 +116,30 @@ export default {
       modalType: 0,
       form: {
         promotionGoodsList: [],
+        rangeTime: [],
       },
       id: this.$route.query.id,
       submitLoading: false,
       selectedGoods: [],
       promotionGoodsList: [],
       formRule: {
-        rangeTime: [{ required: true, message: "请选择活动时间" }],
+        promotionGoodsList: [
+          {
+            type: "array",
+            required: true,
+            min: 1,
+            message: "请至少选择一个商品",
+            trigger: "change",
+          },
+        ],
+        rangeTime: [
+          {
+            type: "array",
+            required: true,
+            message: "请选择活动时间",
+            trigger: "change",
+          },
+        ],
       },
       options: {
         disabledDate(date) {
@@ -140,78 +157,80 @@ export default {
   methods: {
     handleSubmit() {
       this.$refs.form.validate((valid) => {
-        if (valid) {
-          const params = JSON.parse(JSON.stringify(this.form));
-          if (this.form.rangeTime[0] === "" || this.form.rangeTime[0] === "") {
-            this.$Message.error("请选择活动时间");
-            return;
-          }
-          params.startTime = this.$filters.unixToDate(
-            this.form.rangeTime[0] / 1000
-          );
-          params.endTime = this.$filters.unixToDate(
-            this.form.rangeTime[1] / 1000
-          );
-          delete params.rangeTime;
-          let checkResult = true;
-          if (this.form.promotionGoodsList.length > 0) {
-            this.form.promotionGoodsList.forEach((res) => {
-              if (res.stock <= 0 || res.stock > res.quantity) {
-                checkResult = false;
-                this.$Message.error("活动库存不能为0且不能超过商品库存");
-                return;
-              }
-
-              if (!regular.money.test(res.settlementPrice)) {
-                checkResult = false;
-                this.$Message.error("结算价格金额格式不正确");
-                return;
-              }
-              if (res.settlementPrice < 0 || res.settlementPrice > res.price) {
-                checkResult = false;
-                this.$Message.error("结算价格金额不能为0且不能超过商品价格");
-                return;
-              }
-              if (!regular.money.test(res.highestPrice)) {
-                checkResult = false;
-                this.$Message.error("最高可砍金额格式错误");
-                return;
-              }
-              if (res.highestPrice <= 0 || res.highestPrice > res.price) {
-                checkResult = false;
-                this.$Message.error("最高可砍金额不能为0且不能超过商品价格");
-                return;
-              }
-              if (!regular.money.test(res.lowestPrice)) {
-                checkResult = false;
-                this.$Message.error("最低可砍金额格式错误");
-                return;
-              }
-              if (res.lowestPrice <= 0 || res.lowestPrice > res.price) {
-                checkResult = false;
-                this.$Message.error("最低可砍金额不能为0");
-                return;
-              }
-              if (parseInt(res.lowestPrice) > parseInt(res.highestPrice)) {
-                checkResult = false;
-                this.$Message.error("最低砍价金额不能大于最高砍价金额");
-                return;
-              }
-            });
-          }
-
-          if (!checkResult) {
-            return;
-          }
-          this.submitLoading = true;
-          saveKanJiaActivityGoods(params).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              this.$Message.success("砍价活动修改成功");
-              this.closeCurrentPage();
-            }
-          });
+        if (!valid) {
+          return;
         }
+        if (!this.form.promotionGoodsList.length) {
+          this.$Message.warning("请至少选择一个商品");
+          return;
+        }
+
+        const params = JSON.parse(JSON.stringify(this.form));
+        const [start, end] = this.form.rangeTime || [];
+        const startDate = start instanceof Date ? start : new Date(start);
+        const endDate = end instanceof Date ? end : new Date(end);
+        params.startTime = this.$filters.unixToDate(startDate.getTime() / 1000);
+        params.endTime = this.$filters.unixToDate(endDate.getTime() / 1000);
+        delete params.rangeTime;
+
+        let checkResult = true;
+        this.form.promotionGoodsList.forEach((res) => {
+          if (res.stock <= 0 || res.stock > res.quantity) {
+            checkResult = false;
+            this.$Message.error("活动库存不能为0且不能超过商品库存");
+            return;
+          }
+
+          if (!regular.money.test(res.settlementPrice)) {
+            checkResult = false;
+            this.$Message.error("结算价格金额格式不正确");
+            return;
+          }
+          if (res.settlementPrice < 0 || res.settlementPrice > res.price) {
+            checkResult = false;
+            this.$Message.error("结算价格金额不能为0且不能超过商品价格");
+            return;
+          }
+          if (!regular.money.test(res.highestPrice)) {
+            checkResult = false;
+            this.$Message.error("最高可砍金额格式错误");
+            return;
+          }
+          if (res.highestPrice <= 0 || res.highestPrice > res.price) {
+            checkResult = false;
+            this.$Message.error("最高可砍金额不能为0且不能超过商品价格");
+            return;
+          }
+          if (!regular.money.test(res.lowestPrice)) {
+            checkResult = false;
+            this.$Message.error("最低可砍金额格式错误");
+            return;
+          }
+          if (res.lowestPrice <= 0 || res.lowestPrice > res.price) {
+            checkResult = false;
+            this.$Message.error("最低可砍金额不能为0");
+            return;
+          }
+          if (parseInt(res.lowestPrice) > parseInt(res.highestPrice)) {
+            checkResult = false;
+            this.$Message.error("最低砍价金额不能大于最高砍价金额");
+            return;
+          }
+        });
+
+        if (!checkResult) {
+          return;
+        }
+        this.submitLoading = true;
+        saveKanJiaActivityGoods(params).then((res) => {
+          this.submitLoading = false;
+          if (res.success) {
+            this.$Message.success(
+              this.modalType === 1 ? "砍价活动修改成功" : "砍价活动添加成功"
+            );
+            this.closeCurrentPage();
+          }
+        });
       });
     },
     closeCurrentPage() {
@@ -232,6 +251,15 @@ export default {
     },
     delGoods(index) {
       this.form.promotionGoodsList.splice(index, 1);
+      this.touchPromotionGoodsValidate();
+    },
+    touchPromotionGoodsValidate() {
+      this.$nextTick(() => {
+        const form = this.$refs.form;
+        if (form && typeof form.validateField === "function") {
+          form.validateField("promotionGoodsList", () => {});
+        }
+      });
     },
     selectedGoodsData(item) {
       let list = [];
@@ -252,6 +280,7 @@ export default {
         });
       });
       this.form.promotionGoodsList = list;
+      this.touchPromotionGoodsValidate();
     },
   },
 };

manager/src/views/promotions/kanjia/kanjia-activity-edit-goods.vue

@@ -62,7 +62,7 @@
                 style="width: 260px"
               />
             </el-form-item>
-            <el-form-item label="活动时间" prop="rangeTime">
+            <el-form-item label="活动时间" prop="rangeTime" class="kanjia-activity-time-form-item">
               <el-date-picker
                 :disabled="onlyView"
                 v-model="form.rangeTime"
@@ -72,7 +72,6 @@
                 start-placeholder="开始时间"
                 end-placeholder="结束时间"
                 :disabled-date="disabledDate"
-                style="width: 360px"
               />
             </el-form-item>
             <div>
@@ -252,4 +251,12 @@ h4 {
   line-height: 40px;
   text-align: left;
 }
+
+.kanjia-activity-time-form-item {
+  :deep(.el-date-editor) {
+    width: 360px !important;
+    max-width: 360px;
+    flex-grow: 0;
+  }
+}
 </style>