From e8a2fc3417b7b5d01167fca2f55b99df86cea1eb Mon Sep 17 00:00:00 2001
From: Liuyujie <2268872166@qq.com>
Date: Tue, 17 Dec 2024 12:33:35 +0800
Subject: [PATCH] components2

---
 .../sms/coupon/components/CouponDetail.vue    | 476 ++++++++++--------
 1 file changed, 270 insertions(+), 206 deletions(-)

diff --git a/src/views/sms/coupon/components/CouponDetail.vue b/src/views/sms/coupon/components/CouponDetail.vue
index aad3f4a..2fa339b 100644
--- a/src/views/sms/coupon/components/CouponDetail.vue
+++ b/src/views/sms/coupon/components/CouponDetail.vue
@@ -1,12 +1,16 @@
-<template> 
+<template>
+  <!-- el-card组件作为表单的容器，设置了类名和无阴影效果 -->
   <el-card class="form-container" shadow="never">
+    <!-- el-form表单组件，绑定了数据模型coupon，设置了验证规则、表单引用、标签宽度和尺寸等属性 -->
     <el-form :model="coupon"
              :rules="rules"
              ref="couponFrom"
              label-width="150px"
              size="small">
+      <!-- 优惠券类型的表单项，使用el-select下拉选择框来选择类型 -->
       <el-form-item label="优惠券类型：">
         <el-select v-model="coupon.type">
+          <!-- 通过v-for循环生成下拉选项 -->
           <el-option
             v-for="type in typeOptions"
             :key="type.value"
@@ -15,11 +19,14 @@
           </el-option>
         </el-select>
       </el-form-item>
+      <!-- 优惠券名称的表单项，使用el-input输入框输入名称，设置了数据绑定和类名 -->
       <el-form-item label="优惠券名称：" prop="name">
         <el-input v-model="coupon.name" class="input-width"></el-input>
       </el-form-item>
+      <!-- 适用平台的表单项，用el-select下拉选择框选择平台 -->
       <el-form-item label="适用平台：">
         <el-select v-model="coupon.platform">
+          <!-- 通过v-for循环生成下拉选项 -->
           <el-option
             v-for="item in platformOptions"
             :key="item.value"
@@ -28,33 +35,40 @@
           </el-option>
         </el-select>
       </el-form-item>
+      <!-- 总发行量的表单项，用el-input输入框输入发行量，设置了数据绑定和占位提示等属性 -->
       <el-form-item label="总发行量：" prop="publishCount">
         <el-input v-model.number="coupon.publishCount" placeholder="只能输入正整数" class="input-width"></el-input>
       </el-form-item>
+      <!-- 面额的表单项，用el-input输入框输入面额，设置了数据绑定、占位提示和后缀文本等属性 -->
       <el-form-item label="面额：" prop="amount">
         <el-input v-model.number="coupon.amount" placeholder="面值只能是数值，限2位小数" class="input-width">
           <template slot="append">元</template>
         </el-input>
       </el-form-item>
+      <!-- 每人限领的表单项，用el-input输入框输入限领数量，设置了数据绑定和后缀文本等属性 -->
       <el-form-item label="每人限领：">
         <el-input v-model="coupon.perLimit" placeholder="只能输入正整数" class="input-width">
           <template slot="append">张</template>
         </el-input>
       </el-form-item>
+      <!-- 使用门槛的表单项，用el-input输入框输入门槛金额，设置了数据绑定、前后缀文本等属性 -->
       <el-form-item label="使用门槛：" prop="minPoint">
         <el-input v-model.number="coupon.minPoint" placeholder="只能输入正整数" class="input-width">
           <template slot="prepend">满</template>
           <template slot="append">元可用</template>
         </el-input>
       </el-form-item>
+      <!-- 领取日期的表单项，用el-date-picker日期选择器选择日期，设置了数据绑定和类名等属性 -->
       <el-form-item label="领取日期：" prop="enableTime">
         <el-date-picker type="date" placeholder="选择日期" v-model="coupon.enableTime" class="input-width"></el-date-picker>
       </el-form-item>
+      <!-- 有效期的表单项，通过两个el-date-picker日期选择器分别选择开始和结束日期 -->
       <el-form-item label="有效期：">
         <el-date-picker type="date" placeholder="选择日期" v-model="coupon.startTime" style="width: 150px"></el-date-picker>
         <span style="margin-left: 20px;margin-right: 20px">至</span>
         <el-date-picker type="date" placeholder="选择日期" v-model="coupon.endTime" style="width: 150px"></el-date-picker>
       </el-form-item>
+      <!-- 可使用商品的表单项，用el-radio-group单选按钮组选择使用类型 -->
       <el-form-item label="可使用商品：">
         <el-radio-group v-model="coupon.useType">
           <el-radio-button :label="0">全场通用</el-radio-button>
@@ -62,21 +76,27 @@
           <el-radio-button :label="2">指定商品</el-radio-button>
         </el-radio-group>
       </el-form-item>
+      <!-- 当可使用商品类型为指定分类时显示的内容，包含分类选择器、添加按钮和展示关联分类关系的表格 -->
       <el-form-item v-show="coupon.useType===1">
+        <!-- el-cascader分类选择器，用于选择分类，设置了可清除、占位提示等属性 -->
         <el-cascader
           clearable
           placeholder="请选择分类名称"
           v-model="selectProductCate"
           :options="productCateOptions">
         </el-cascader>
+        <!-- 添加分类关联的按钮，绑定点击事件 -->
         <el-button @click="handleAddProductCategoryRelation()">添加</el-button>
+        <!-- 展示已添加的分类关联关系的表格，设置了数据绑定等属性 -->
         <el-table ref="productCateRelationTable"
                   :data="coupon.productCategoryRelationList"
                   style="width: 100%;margin-top: 20px"
                   border>
+          <!-- 显示分类名称的表格列 -->
           <el-table-column label="分类名称" align="center">
             <template slot-scope="scope">{{scope.row.parentCategoryName}}>{{scope.row.productCategoryName}}</template>
           </el-table-column>
+          <!-- 显示操作按钮（删除）的表格列 -->
           <el-table-column label="操作" align="center" width="100">
             <template slot-scope="scope">
               <el-button size="mini"
@@ -87,7 +107,9 @@
           </el-table-column>
         </el-table>
       </el-form-item>
+      <!-- 当可使用商品类型为指定商品时显示的内容，包含商品选择框、添加按钮和展示关联商品关系的表格 -->
       <el-form-item v-show="coupon.useType===2">
+        <!-- el-select商品选择框，设置了可过滤、远程搜索等属性 -->
         <el-select
           v-model="selectProduct"
           filterable
@@ -96,6 +118,7 @@
           placeholder="商品名称/商品货号"
           :remote-method="searchProductMethod"
           :loading="selectProductLoading">
+          <!-- 通过v-for循环生成商品选项 -->
           <el-option
             v-for="item in selectProductOptions"
             :key="item.productId"
@@ -105,17 +128,22 @@
             <span style="float: right; color: #8492a6; font-size: 13px">NO.{{ item.productSn }}</span>
           </el-option>
         </el-select>
+        <!-- 添加商品关联的按钮，绑定点击事件 -->
         <el-button @click="handleAddProductRelation()">添加</el-button>
+        <!-- 展示已添加的商品关联关系的表格，设置了数据绑定等属性 -->
         <el-table ref="productRelationTable"
                   :data="coupon.productRelationList"
                   style="width: 100%;margin-top: 20px"
                   border>
+          <!-- 显示商品名称的表格列 -->
           <el-table-column label="商品名称" align="center">
             <template slot-scope="scope">{{scope.row.productName}}</template>
           </el-table-column>
+          <!-- 显示商品货号的表格列 -->
           <el-table-column label="货号" align="center"  width="120" >
             <template slot-scope="scope">NO.{{scope.row.productSn}}</template>
           </el-table-column>
+          <!-- 显示操作按钮（删除）的表格列 -->
           <el-table-column label="操作" align="center" width="100">
             <template slot-scope="scope">
               <el-button size="mini"
@@ -126,6 +154,7 @@
           </el-table-column>
         </el-table>
       </el-form-item>
+      <!-- 备注的表单项，用el-input输入框输入备注内容，设置了类名、类型为文本域等属性 -->
       <el-form-item label="备注：">
         <el-input
           class="input-width"
@@ -135,241 +164,276 @@
           v-model="coupon.note">
         </el-input>
       </el-form-item>
+      <!-- 提交和重置按钮所在的表单项 -->
       <el-form-item>
+        <!-- 提交按钮，设置类型为primary，绑定点击事件 -->
         <el-button type="primary" @click="onSubmit('couponFrom')">提交</el-button>
+        <!-- 重置按钮，根据条件判断是否显示，绑定点击事件 -->
         <el-button v-if="!isEdit" @click="resetForm('couponFrom')">重置</el-button>
       </el-form-item>
     </el-form>
   </el-card>
 </template>
 <script>
-  import {createCoupon,getCoupon,updateCoupon} from '@/api/coupon';
-  import {fetchSimpleList as fetchProductList} from '@/api/product';
-  import {fetchListWithChildren} from '@/api/productCate'
-  const defaultCoupon = {
-    type: 0,
-    name: null,
-    platform: 0,
-    amount: null,
-    perLimit: 1,
-    minPoint: null,
-    startTime: null,
-    endTime: null,
-    useType: 0,
-    note: null,
-    publishCount: null,
-    productRelationList: [],
-    productCategoryRelationList: []
-  };
-  const defaultTypeOptions = [
-    {
-      label: '全场赠券',
-      value: 0
-    },
-    {
-      label: '会员赠券',
-      value: 1
-    },
-    {
-      label: '购物赠券',
-      value: 2
-    },
-    {
-      label: '注册赠券',
-      value: 3
+// 从'@/api/coupon'模块导入创建、获取、更新优惠券相关的函数
+import {createCoupon, getCoupon, updateCoupon} from '@/api/coupon';
+// 从'@/api/product'模块导入获取产品简单列表的函数，并起别名为fetchProductList
+import {fetchSimpleList as fetchProductList} from '@/api/product';
+// 从'@/api/productCate'模块导入获取带子项列表的函数
+import {fetchListWithChildren} from '@/api/productCate';
+
+// 默认的优惠券对象，包含类型、名称、平台等各属性的初始值
+const defaultCoupon = {
+  type: 0,
+  name: null,
+  platform: 0,
+  amount: null,
+  perLimit: 1,
+  minPoint: null,
+  startTime: null,
+  endTime: null,
+  useType: 0,
+  note: null,
+  publishCount: null,
+  productRelationList: [],
+  productCategoryRelationList: []
+};
+// 默认的优惠券类型选项数组，包含全场赠券、会员赠券等类型及对应值
+const defaultTypeOptions = [
+  {
+    label: '全场赠券',
+    value: 0
+  },
+  {
+    label: '会员赠券',
+    value: 1
+  },
+  {
+    label: '购物赠券',
+    value: 2
+  },
+  {
+    label: '注册赠券',
+    value: 3
+  }
+];
+// 默认的适用平台选项数组，包含全平台、移动平台、PC平台等及对应值
+const defaultPlatformOptions = [
+  {
+    label: '全平台',
+    value: 0
+  },
+  {
+    label: '移动平台',
+    value: 1
+  },
+  {
+    label: 'PC平台',
+    value: 2
+  }
+];
+
+export default {
+  name: 'CouponDetail',
+  // 定义组件接收的属性，这里有isEdit属性，类型为布尔值，默认是false
+  props: {
+    isEdit: {
+      type: Boolean,
+      default: false
     }
-  ];
-  const defaultPlatformOptions = [
-    {
-      label: '全平台',
-      value: 0
-    },
-    {
-      label: '移动平台',
-      value: 1
-    },
-    {
-      label: 'PC平台',
-      value: 2
+  },
+  data() {
+    return {
+      // 当前优惠券数据，初始为默认优惠券对象的副本
+      coupon: Object.assign({}, defaultCoupon),
+      // 优惠券类型选项，初始为默认类型选项副本
+      typeOptions: Object.assign({}, defaultTypeOptions),
+      // 适用平台选项，初始为默认平台选项副本
+      platformOptions: Object.assign({}, defaultPlatformOptions),
+      // 表单验证规则，针对优惠券名称、发行量等属性设置相应规则
+      rules: {
+        name: [
+          {required: true, message: '请输入优惠券名称', trigger: 'blur'},
+          {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
+        ],
+        publishCount: [
+          {type: 'number', required: true, message: '只能输入正整数', trigger: 'blur'}
+        ],
+        amount: [
+          {type: 'number', required: true, message: '面值只能是数值，0.01-10000，限2位小数', trigger: 'blur'}
+        ],
+        minPoint: [
+          {type: 'number', required: true, message: '只能输入正整数', trigger: 'blur'}
+        ]
+      },
+      // 选中的商品，初始为null
+      selectProduct: null,
+      // 商品选择框加载状态，初始为false
+      selectProductLoading: false,
+      // 商品选项列表，初始为空数组
+      selectProductOptions: [],
+      // 选中的商品分类，初始为null
+      selectProductCate: null,
+      // 商品分类选项列表，初始为空数组
+      productCateOptions: []
     }
-  ];
-  export default {
-    name: 'CouponDetail',
-    props: {
-      isEdit: {
-        type: Boolean,
-        default: false
-      }
-    },
-    data() {
-      return {
-        coupon: Object.assign({}, defaultCoupon),
-        typeOptions: Object.assign({}, defaultTypeOptions),
-        platformOptions: Object.assign({}, defaultPlatformOptions),
-        rules: {
-          name: [
-            {required: true, message: '请输入优惠券名称', trigger: 'blur'},
-            {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
-          ],
-          publishCount: [
-            {type: 'number',required: true, message: '只能输入正整数', trigger: 'blur'}
-          ],
-          amount: [
-            {type: 'number',required: true,message: '面值只能是数值，0.01-10000，限2位小数',trigger: 'blur'}
-          ],
-          minPoint: [
-            {type: 'number',required: true,message: '只能输入正整数',trigger: 'blur'}
-          ]
-        },
-        selectProduct:null,
-        selectProductLoading: false,
-        selectProductOptions:[],
-        selectProductCate: null,
-        productCateOptions: []
-      }
-    },
-    created(){
-      if(this.isEdit){
-        getCoupon(this.$route.query.id).then(response=>{
-          this.coupon=response.data;
-        });
-      }
-      this.getProductCateList();
-    },
-    methods:{
-      onSubmit(formName) {
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            this.$confirm('是否提交数据', '提示', {
-              confirmButtonText: '确定',
-              cancelButtonText: '取消',
-              type: 'warning'
-            }).then(() => {
-              if(this.isEdit){
-                updateCoupon(this.$route.query.id,this.coupon).then(response=>{
-                  this.$refs[formName].resetFields();
-                  this.$message({
-                    message: '修改成功',
-                    type: 'success',
-                    duration:1000
-                  });
-                  this.$router.back();
+  },
+  created() {
+    // 如果是编辑状态，调用获取优惠券函数获取数据并赋值给coupon
+    if (this.isEdit) {
+      getCoupon(this.$route.query.id).then(response => {
+        this.coupon = response.data;
+      });
+    }
+    // 调用获取商品分类列表的函数
+    this.getProductCateList();
+  },
+  methods: {
+    // 提交表单的方法，先进行表单验证，验证通过后弹出确认框，根据是否编辑状态调用相应的创建或更新函数，成功后有相应提示和路由操作
+    onSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.$confirm('是否提交数据', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            if (this.isEdit) {
+              updateCoupon(this.$route.query.id, this.coupon).then(response => {
+                this.$refs[formName].resetFields();
+                this.$message({
+                  message: '修改成功',
+                  type: 'success',
+                  duration: 1000
                 });
-              }else{
-                createCoupon(this.coupon).then(response=>{
-                  this.$refs[formName].resetFields();
-                  this.$message({
-                    message: '提交成功',
-                    type: 'success',
-                    duration:1000
-                  });
-                  this.$router.back();
+                this.$router.back();
+              });
+            } else {
+              createCoupon(this.coupon).then(response => {
+                this.$refs[formName].resetFields();
+                this.$message({
+                  message: '提交成功',
+                  type: 'success',
+                  duration: 1000
                 });
-              }
-            });
-          } else {
-            this.$message({
-              message: '验证失败',
-              type: 'error',
-              duration:1000
-            });
-            return false;
-          }
-        });
-      },
-      resetForm(formName) {
-        this.$refs[formName].resetFields();
-        this.coupon = Object.assign({},defaultCoupon);
-      },
-      searchProductMethod(query){
-        if (query !== '') {
-          this.loading = true;
-          fetchProductList({keyword:query}).then(response=>{
-            this.loading=false;
-            let productList = response.data;
-            this.selectProductOptions = [];
-            for(let i=0;i<productList.length;i++){
-              let item = productList[i];
-              this.selectProductOptions.push({productId:item.id,productName:item.name,productSn:item.productSn});
+                this.$router.back();
+              });
             }
           });
         } else {
-          this.selectProductOptions = [];
-        }
-      },
-      handleAddProductRelation(){
-        if(this.selectProduct===null){
           this.$message({
-            message: '请先选择商品',
-            type: 'warning'
+            message: '验证失败',
+            type: 'error',
+            duration: 1000
           });
-          return
+          return false;
         }
-        this.coupon.productRelationList.push(this.getProductById(this.selectProduct));
-        this.selectProduct=null;
-      },
-      handleDeleteProductRelation(index,row){
-        this.coupon.productRelationList.splice(index,1);
-      },
-      handleAddProductCategoryRelation(){
-        if(this.selectProductCate===null||this.selectProductCate.length===0){
-          this.$message({
-            message: '请先选择商品分类',
-            type: 'warning'
-          });
-          return
-        }
-        this.coupon.productCategoryRelationList.push(this.getProductCateByIds(this.selectProductCate));
-        this.selectProductCate=[];
-      },
-      handleDeleteProductCateRelation(index,row){
-        this.coupon.productCategoryRelationList.splice(index,1);
-      },
-      getProductById(id){
-        for(let i=0;i<this.selectProductOptions.length;i++){
-          if(id===this.selectProductOptions[i].productId){
-            return this.selectProductOptions[i];
+      });
+    },
+    // 重置表单的方法，重置表单字段并恢复coupon为默认值
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.coupon = Object.assign({}, defaultCoupon);
+    },
+    // 商品搜索方法，根据输入的查询条件去获取商品列表数据并更新商品选项列表
+    searchProductMethod(query) {
+      if (query!== '') {
+        this.loading = true;
+        fetchProductList({keyword: query}).then(response => {
+          this.loading = false;
+          let productList = response.data;
+          this.selectProductOptions = [];
+          for (let i = 0; i < productList.length; i++) {
+            let item = productList[i];
+            this.selectProductOptions.push({productId: item.id, productName: item.name, productSn: item.productSn});
           }
+        });
+      } else {
+        this.selectProductOptions = [];
+      }
+    },
+    // 添加商品关联的方法，判断是否选择了商品，选择了则添加到商品关联列表，并清空选中商品
+    handleAddProductRelation() {
+      if (this.selectProduct === null) {
+        this.$message({
+          message: '请先选择商品',
+          type: 'warning'
+        });
+        return
+      }
+      this.coupon.productRelationList.push(this.getProductById(this.selectProduct));
+      this.selectProduct = null;
+    },
+    // 删除商品关联的方法，根据索引从商品关联列表中删除对应项
+    handleDeleteProductRelation(index, row) {
+      this.coupon.productRelationList.splice(index, 1);
+    },
+    // 添加商品分类关联的方法，判断是否选择了商品分类，选择了则添加到分类关联列表，并清空选中分类
+    handleAddProductCategoryRelation() {
+      if (this.selectProductCate === null || this.selectProductCate.length === 0) {
+        this.$message({
+          message: '请先选择商品分类',
+          type: 'warning'
+        });
+        return
+      }
+      this.coupon.productCategoryRelationList.push(this.getProductCateByIds(this.selectProductCate));
+      this.selectProductCate = [];
+    },
+    // 删除商品分类关联的方法，根据索引从分类关联列表中删除对应项
+    handleDeleteProductCateRelation(index, row) {
+      this.coupon.productCategoryRelationList.splice(index, 1);
+    },
+    // 根据商品id获取商品对象的方法，遍历商品选项列表查找对应id的商品并返回
+    getProductById(id) {
+      for (let i = 0; i < this.selectProductOptions.length; i++) {
+        if (id === this.selectProductOptions[i].productId) {
+          return this.selectProductOptions[i];
         }
-        return null;
-      },
-      getProductCateList() {
-        fetchListWithChildren().then(response => {
-          let list = response.data;
-          this.productCateOptions = [];
-          for (let i = 0; i < list.length; i++) {
-            let children = [];
-            if (list[i].children != null && list[i].children.length > 0) {
-              for (let j = 0; j < list[i].children.length; j++) {
-                children.push({label: list[i].children[j].name, value: list[i].children[j].id});
-              }
+      }
+      return null;
+    },
+    // 获取商品分类列表的方法，调用接口获取数据，处理后更新商品分类选项列表
+    getProductCateList() {
+      fetchListWithChildren().then(response => {
+        let list = response.data;
+        this.productCateOptions = [];
+        for (let i = 0; i < list.length; i++) {
+          let children = [];
+          if (list[i].children!= null && list[i].children.length > 0) {
+            for (let j = 0; j < list[i].children.length; j++) {
+              children.push({label: list[i].children[j].name, value: list[i].children[j].id});
             }
-            this.productCateOptions.push({label: list[i].name, value: list[i].id, children: children});
           }
-        });
-      },
-      getProductCateByIds(ids){
-        let name;
-        let parentName;
-        for (let i = 0; i < this.productCateOptions.length; i++) {
-          if (this.productCateOptions[i].value === ids[0]) {
-            parentName = this.productCateOptions[i].label;
-            for (let j = 0; j < this.productCateOptions[i].children.length; j++) {
-              if (this.productCateOptions[i].children[j].value === ids[1]) {
-                name = this.productCateOptions[i].children[j].label;
-              }
+          this.productCateOptions.push({label: list[i].name, value: list[i].id, children: children});
+        }
+      });
+    },
+    // 根据商品分类id获取分类对象的方法，通过遍历分类选项列表查找对应id的分类信息并返回
+    getProductCateByIds(ids) {
+      let name;
+      let parentName;
+      for (let i = 0; i < this.productCateOptions.length; i++) {
+        if (this.productCateOptions[i].value === ids[0]) {
+          parentName = this.productCateOptions[i].label;
+          for (let j = 0; j < this.productCateOptions[i].children.length; j++) {
+            if (this.productCateOptions[i].children[j].value === ids[1]) {
+              name = this.productCateOptions[i].children[j].label;
             }
           }
         }
-        return {productCategoryId: ids[1], productCategoryName: name, parentCategoryName: parentName};
       }
+      return {productCategoryId: ids[1], productCategoryName: name, parentCategoryName: parentName};
     }
   }
+}
 </script>
 <style scoped>
-  .input-width {
-    width: 60%;
-  }
+<!-- 带有scoped属性的style标签，意味着里面定义的样式仅作用于当前组件内的元素 -->
+.input-width {
+<!-- 定义了一个类选择器样式，作用是将应用该类的元素宽度设置为其父元素宽度的60% -->
+  width: 60%;
+}
 </style>