电子卡规则

src/views/dzk/Dzk_Rule.vue

@@ -1,282 +1,283 @@
 <template>
   <div class="app-container">
     <el-form
-      ref="settingform"
-      :model="settingform"
-      :rules="rules"
-      label-width="130px"
+      ref="settingForm"
+      :model="settingForm"
+      :rules="settingRules"
+      label-width="150px"
     >
       <el-form-item label="是否启用电子卡" prop="cardEnabledFlag">
-        <el-radio-group v-model="settingform.cardEnabledFlag">
+        <el-radio-group v-model="settingForm.cardEnabledFlag">
           <el-radio label="0">关闭</el-radio>
           <el-radio label="1">开启</el-radio>
         </el-radio-group>
       </el-form-item>
-
-      <el-form-item label="启用哪种电子卡">
-        <el-checkbox-group v-model="settingform.cardOilsType">
-          <el-checkbox label="汽油" value="1" />
-          <el-checkbox label="柴油" value="2" />
-          <el-checkbox label="非油品卡" value="3" />
-          <el-checkbox label="LNG" value="4" />
-          <el-checkbox label="CNG" value="5" />
-        </el-checkbox-group>
-      </el-form-item>
-      <div style="text-align: right">
-        <el-button type="primary" @click="handleAdd" size="mini">
-          新增规则
-        </el-button>
-      </div>
-      <div>
-        <el-table :data="settingform.detailList">
-          <el-table-column label="id" align="center" prop="id" v-if="false" />
-          <el-table-column
-            label="所对应电子会员卡ID"
-            align="center"
-            prop="parentId"
-            v-if="false"
-          />
-          <el-table-column
-            label="油品"
-            align="center"
-            prop="oilName"
-            :formatter="oilNameFormatter"
-          />
-          <el-table-column
-            label="优惠条件金额"
-            align="center"
-            prop="discountAmtTerm"
-          >
-            <template slot-scope="scope1">
-              {{ scope1.row.discountAmtStart }}≤充值金额(元)&lt;{{
-                scope1.row.discountAmtEnd
-              }}
-            </template>
-          </el-table-column>
-          <el-table-column
-            label="赠送方式"
-            align="center"
-            prop="settingRuleType"
-            :formatter="settingRuleTypeFotmat"
-          />
-          <el-table-column
-            label="赠送金额值或比例"
-            align="center"
-            prop="presentAmt"
-          >
-            <template slot-scope="scope2">
-              {{ scope2.row.presentAmt }}
-              <span v-show="scope2.row.settingRuleType == '1'">元</span>
-              <span v-show="scope2.row.settingRuleType == '2'">%</span>
-            </template>
-          </el-table-column>
-          <el-table-column
-            label="操作"
-            align="center"
-            class-name="small-padding fixed-width"
-          >
-            <template slot-scope="scope">
-              <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-edit"
-                @click="handleUpdate(scope.$index, scope.row)"
-                >修改</el-button
-              >
-              <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-delete"
-                @click="handleDelete(scope.$index, scope.row)"
-                >删除</el-button
-              >
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-      <el-form-item label="充值活动">
-        <el-radio-group v-model="settingform.discountTimeSetting">
-          <el-radio label="关闭" value="0"></el-radio>
-          <el-radio label="开启" value="1"></el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="活动的周期类型" prop="discountTimeType">
-        <el-select v-model="settingform.discountTimeType" clearable size="mini">
-          <el-option label="每周指定日" value="1"></el-option>
-          <el-option label="每月指定日" value="2"></el-option>
-          <el-option label="固定活动日" value="3"></el-option>
-        </el-select>
-        <div
-          v-show="settingform.discountTimeType != 3"
-          style="
-            display: flex;
-            flex-wrap: wrap;
-            border-style: solid;
-            border-color: #f5f7fa;
-          "
-        >
-          <div
-            v-for="(item, index) in timeSelect[settingform.discountTimeType]"
-            :key="index"
-            style="margin: 3px"
+      <div v-show="settingForm.cardEnabledFlag == 1">
+        <el-form-item label="启用哪种电子卡">
+          <el-checkbox-group
+            v-model="settingForm.cardOilsType"
+            @change="effectiveRefresh"
           >
+            <el-checkbox label="1">汽油卡</el-checkbox>
+            <el-checkbox label="2">柴油卡</el-checkbox>
+            <el-checkbox label="3">非油品卡</el-checkbox>
+            <el-checkbox label="4">LNG卡</el-checkbox>
+            <el-checkbox label="5">CNG卡</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+        <div style="text-align: right">
+          <el-button type="primary" @click="handleAdd" size="mini">
+            新增规则
+          </el-button>
+        </div>
+        <div>
+          <el-table :data="settingForm.detailList">
+            <af-table-column
+              label="电子卡"
+              align="center"
+              :formatter="oilNameFormatter"
+            />
+            <af-table-column label="条件" align="center" prop="discountAmtTerm">
+              <template slot-scope="scope1">
+                {{ scope1.row.discountAmtStart }}≤充值金额(元)&lt;{{
+                  scope1.row.discountAmtEnd
+                }}
+              </template>
+            </af-table-column>
+
+            <af-table-column label="赠送" align="center">
+              <template slot-scope="scope">
+                {{
+                  scope.row.settingRuleType == 1
+                    ? "按金额赠送"
+                    : scope.row.settingRuleType == 2
+                    ? "按比例赠送"
+                    : ""
+                }}
+                --- 额度为 {{ scope.row.presentAmt }}
+                {{
+                  scope.row.settingRuleType == "1"
+                    ? "元"
+                    : scope.row.settingRuleType == "2"
+                    ? "%"
+                    : ""
+                }}
+              </template>
+            </af-table-column>
+            <af-table-column label="生效状态" align="center">
+              <template slot-scope="scope">
+                {{ effective(scope.row.cardType) }}
+              </template>
+            </af-table-column>
+            <af-table-column
+              label="操作"
+              align="center"
+              class-name="small-padding fixed-width"
+            >
+              <template slot-scope="scope">
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-edit"
+                  @click="handleUpdate(scope.$index, scope.row)"
+                  >修改</el-button
+                >
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-delete"
+                  @click="handleDelete(scope.$index, scope.row)"
+                  >删除</el-button
+                >
+              </template>
+            </af-table-column>
+          </el-table>
+        </div>
+        <el-form-item label="充值活动" required prop="discountTimeSetting">
+          <el-radio-group v-model="settingForm.discountTimeSetting">
+            <el-radio label="0">关闭</el-radio>
+            <el-radio label="1">开启</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <div v-show="settingForm.discountTimeSetting == 1">
+          <el-form-item label="活动的周期类型" prop="discountTimeType" :required="settingForm.discountTimeSetting==1">
+            <el-select
+              v-model="settingForm.discountTimeType"
+              clearable
+              size="mini"
+              @change="timeClear"
+            >
+              <el-option label="每周指定日" value="1"></el-option>
+              <el-option label="每月指定日" value="2"></el-option>
+              <el-option label="固定活动日" value="3"></el-option>
+            </el-select>
             <div
-              class="hover-style"
+              v-show="settingForm.discountTimeType != 3"
               style="
-                border-radius: 5px;
-                font-weight: bold;
-                font-size: 12px;
-                cursor: pointer;
+                display: flex;
+                flex-wrap: wrap;
+                border-style: solid;
+                border-color: #f5f7fa;
               "
-              @click="clickCalendar(index)"
             >
-              <div>{{ item }}</div>
               <div
-                v-if="settingform.collectClickCalendar.indexOf(index) > -1"
-                style="
-                  width: 4px;
-                  height: 4px;
-                  border-radius: 50%;
-                  background-color: red;
-                  position: relative;
-                  left: calc(50% - 2px);
-                "
-              ></div>
-              <div v-else style="width: 4px; height: 4px"></div>
+                v-for="(item, index) in timeSelect[
+                  settingForm.discountTimeType
+                ]"
+                :key="index"
+                style="margin: 3px"
+              >
+                <div
+                  class="hover-style"
+                  style="
+                    border-radius: 5px;
+                    font-weight: bold;
+                    font-size: 12px;
+                    cursor: pointer;
+                  "
+                  @click="timeClickCalendar(index)"
+                >
+                  <div>{{ item }}</div>
+                  <div
+                    v-if="settingForm.collectClickCalendar.indexOf(index) > -1"
+                    style="
+                      width: 4px;
+                      height: 4px;
+                      border-radius: 50%;
+                      background-color: red;
+                      position: relative;
+                      left: calc(50% - 2px);
+                    "
+                  ></div>
+                  <div v-else style="width: 4px; height: 4px"></div>
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-        <div v-show="settingform.discountTimeType == 3">
-          <el-date-picker
-            clearable
-            size="small"
-            style="margin-left: 10px; width: 200px"
-            v-model="settingform.collectClickDay"
-            type="dates"
-            value-format="yyyy-MM-dd"
-            placeholder="选择提醒时间设置"
-          >
-          </el-date-picker>
+            <div v-show="settingForm.discountTimeType == 3">
+              <el-date-picker
+                clearable
+                size="small"
+                style="margin-left: 10px; width: 200px"
+                v-model="settingForm.collectClickDay"
+                type="dates"
+                value-format="yyyy-MM-dd"
+                placeholder="选择提醒时间设置"
+              >
+              </el-date-picker>
+            </div>
+          </el-form-item>
+          <el-form-item label="活动的赠送比例" prop="presentScale" :required="settingForm.discountTimeSetting==1">
+            <el-input
+              v-model="settingForm.presentScale"
+              placeholder="请输入赠送比例"
+              style="width: 70px"
+            />%
+          </el-form-item>
         </div>
-      </el-form-item>
-      <el-form-item label="活动的赠送比例" prop="presentScale">
-        <el-input
-          v-model="settingform.presentScale"
-          placeholder="请输入赠送比例"
-          style="width: 70px"
-        />%
-      </el-form-item>
-      <el-form-item prop="isDiscountCoupon" label="是否叠加优惠券">
-        <el-radio-group v-model="settingform.isDiscountCoupon">
-          <el-radio
-            label="叠加"
-            value="1"
-            >
-          </el-radio>
-          <el-radio
-            label="不叠加"
-            value="0"
-            >
-            </el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item prop="isMarket" label="是否叠加营销方案">
-        <el-radio-group v-model="settingform.isMarket">
-          <el-radio
-            label="叠加"
-            value="1"
-            >
-          </el-radio>
-          <el-radio
-            label="不叠加"
-            value="0"
-            >
-          </el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item prop="isGradeSetting" label="是否叠加等级优惠">
-        <el-radio-group v-model="settingform.isGradeSetting">
-          <el-radio
-            label="叠加"
-            value="1"
-            >
-          </el-radio>
-          <el-radio
-            label="不叠加"
-            value="0"
-            >
-            </el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item prop="isDiscountCoupon" label="支付产生积分倍数">
-        <el-input
-          v-model="settingform.enjoyIntegralMultiple"
-          style="width: 60px"
-          size="mini"
-        />倍
-      </el-form-item>
+
+
+        <el-form-item prop="isMarket" label="是否叠加营销方案" :required="settingForm.cardEnabledFlag==1">
+          <el-radio-group v-model="settingForm.isMarket">
+            <el-radio label="1">叠加</el-radio>
+            <el-radio label="0">不叠加</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item prop="isGradeSetting" label="是否叠加等级优惠" :required="settingForm.cardEnabledFlag==1">
+          <el-radio-group v-model="settingForm.isGradeSetting">
+            <el-radio label="1">叠加</el-radio>
+            <el-radio label="0">不叠加</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item prop="isDiscountCoupon" label="是否叠加优惠券" :required="settingForm.cardEnabledFlag==1">
+          <el-radio-group v-model="settingForm.isDiscountCoupon">
+            <el-radio label="1">叠加</el-radio>
+            <el-radio label="0">不叠加</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item prop="enjoyIntegralMultiple" label="支付产生积分倍数" :required="settingForm.cardEnabledFlag==1">
+          <el-input
+            v-model="settingForm.enjoyIntegralMultiple"
+            style="width: 60px"
+            size="mini"
+          />倍
+        </el-form-item>
+      </div>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button type="primary" @click="submitForm" size="mini">确 定</el-button>
     </div>
 
     <!-- 添加或修改客户电子会员卡充值优惠设置明细对话框 -->
     <el-dialog :title="title" :visible.sync="open" append-to-body>
-      <el-form ref="infoForm" :model="infoForm" :rules="infoRules">
-        <el-form-item label="选择电子卡" prop="cardType">
+      <el-form
+        ref="infoForm"
+        :model="infoForm"
+        :rules="infoRules"
+        label-width="120px"
+      >
+        <el-form-item label="电子卡" prop="cardType" required>
           <el-select
             v-model="infoForm.cardType"
-            placeholder="请选择油品"
+            placeholder="请选择电子卡"
             clearable
-            size="small"
+            size="mini"
           >
             <el-option label="汽油卡" value="1"></el-option>
             <el-option label="柴油卡" value="2"></el-option>
-            <el-option label="非油品" value="3"></el-option>
-            <el-option label="LNG" value="4"></el-option>
-            <el-option label="CNG" value="5"></el-option>
+            <el-option label="非油品卡" value="3"></el-option>
+            <el-option label="LNG卡" value="4"></el-option>
+            <el-option label="CNG卡" value="5"></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="条件设置" prop="discountAmtTerm">
+        <el-form-item label="条件设置" prop="discountAmtEnd" required>
           <el-input-number
             v-model="infoForm.discountAmtStart"
-            placeholder="开始金额"
             size="mini"
+            style="width: 120px"
           />
-          <span>≤充值金额(元)&lt;</span>
+          <span>≤ 充值金额(元) &lt;</span>
           <el-input-number
             v-model="infoForm.discountAmtEnd"
-            placeholder="结束金额"
             size="mini"
+            style="width: 120px"
           />
         </el-form-item>
-        <el-form-item label="赠送方式"></el-form-item>
-        <el-row>
-          <el-form-item>
+        <el-form-item label="赠送方式" prop="presentAmt" required>
+          <div>
             <el-select
               v-model="infoForm.settingRuleType"
               placeholder="请选择赠送方式"
-              @change="settingRuleTypeChange"
               size="mini"
             >
-              <el-option label="按赠送金额" value="1"></el-option>
-              <el-option label="按赠送比例" value="2"></el-option>
+              <el-option label="按金额赠送" value="1"></el-option>
+              <el-option label="按比例赠送" value="2"></el-option>
             </el-select>
-          </el-form-item>
-          <el-form-item>
-            <el-input v-model="infoForm.presentAmt" style="width: 100px"  size="mini"/>
-            <span v-show="jine">元</span>
-            <span v-show="bili">%</span>
-          </el-form-item>
-        </el-row>
-        <el-row>
-          <span style="color: red"
-            >例：按赠送金额：充100赠送10元;按赠送比例：充100赠送10%</span
-          >
-        </el-row>
+            <div v-show="!!this.infoForm.settingRuleType">
+              <el-input
+                v-model="infoForm.presentAmt"
+                style="width: 100px"
+                size="mini"
+              />
+              <span>{{
+                this.infoForm.settingRuleType == "1"
+                  ? "元"
+                  : this.infoForm.settingRuleType == "2"
+                  ? "%"
+                  : ""
+              }}</span>
+            </div>
+          </div>
+        </el-form-item>
+        <el-form-item>
+          <div>
+            <div style="color: red">例：</div>
+            <div style="color: red">按赠送金额：充100赠送10元</div>
+            <div style="color: red">按赠送比例：充100赠送10%</div>
+          </div>
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="save">添加</el-button>
+        <el-button type="primary" @click="addItem">添加</el-button>
       </div>
     </el-dialog>
   </div>
@@ -289,101 +290,83 @@ import {
   selectCustomerCardSetting,
 } from "@/api/customer/cardSetting";
 export default {
-  name: "Setting",
+  name: "Dzk_Rule",
   data() {
     const validateCardType = (rule, value, callback) => {
-      if (this.form.itemsDetail.length <= 0) {
-        callback(new Error("请先配置设置规则"));
+      if (!this.infoForm.cardType) {
+        callback(new Error("请选择电子卡"));
+        return;
+      }
+      callback();
+    };
+    const validateDiscountAmtEnd = (rule, value, callback) => {
+      if (!this.infoForm.discountAmtStart) {
+        callback(new Error("请填写条件的开始金额"));
+        return;
+      }
+      if (!this.infoForm.discountAmtEnd) {
+        callback(new Error("请填写条件的结束金额"));
+        return;
+      }
+      const start = +this.infoForm.discountAmtStart;
+      const end = +this.infoForm.discountAmtEnd;
+      if (start >= end) {
+        callback(new Error("请填写条件的逻辑合理性"));
+        return;
+      }
+      callback();
+    };
+    const validatePresentAmt = (rule, value, callback) => {
+      if (!this.infoForm.settingRuleType) {
+        callback(new Error("请选择赠送方式"));
+        return;
+      }
+      if (!this.infoForm.presentAmt) {
+        callback(new Error("请填写赠送值"));
+        return;
+      }
+      callback();
+    };
+    const validateDiscountTimeType = (rule, value, callback) => {
+      if (this.settingForm.discountTimeSetting == 0) {
+        callback();
+        return;
+      }
+      if (!this.settingForm.discountTimeType) {
+        callback(new Error("请选择活动的周期类型"));
         return;
       }
-      this.form.itemsDetail.forEach((ele) => {
-        if (!ele.oilName || !ele.ruleTerms || !ele.saleAmt || !ele.integral) {
-          console.log("1");
-          callback(new Error("请检查规则完整性"));
+      if (
+        this.settingForm.discountTimeType == 1 ||
+        this.settingForm.discountTimeType == 2
+      ) {
+        if (this.settingForm.collectClickCalendar.length <= 0) {
+          callback(new Error("请选择活动的时间"));
           return;
         }
-        if (ele.oilType != 3) {
-          if (!ele.ruleType || ele.grade === undefined || ele.grade === "") {
-            console.log("2");
-            console.log('grade',ele.grade)
-            callback(new Error("请检查规则完整性"));
-            return;
-          }
+      }
+      if (this.settingForm.discountTimeType == 3) {
+        if (!this.settingForm.collectClickDay) {
+          callback(new Error("请填写活动时间"));
+          return;
         }
-      });
+      }
       callback();
     };
     return {
-      // 总条数
-      total: 0,
-      oilOptions: [],
-      isDiscountCouponOptions: [],
-      discountTimeSettingOptions: [],
-      discountTimeTypeOptions: [],
-      checkList: [
-        { id: "1", value: "汽油" },
-        { id: "2", value: "柴油" },
-      ],
-      pickerTime: "",
-      moonEverDay: [
-        "01",
-        "02",
-        "03",
-        "04",
-        "05",
-        "06",
-        "07",
-        "08",
-        "09",
-        "10",
-        "11",
-        "12",
-        "13",
-        "14",
-        "15",
-        "16",
-        "17",
-        "18",
-        "19",
-        "20",
-        "21",
-        "22",
-        "23",
-        "24",
-        "25",
-        "26",
-        "27",
-        "28",
-        "29",
-        "30",
-        "31",
-      ],
-      workDay: ["周天", "周一", "周二", "周三", "周四", "周五", "周六"],
-      workDaytrue: false,
-      moonDaytrue: false,
-      datetrue: false,
-      jine: false,
-      bili: false,
       // 弹出层标题
       title: "",
       // 表单参数
-      settingform: {
+      settingForm: {
         detailList: [],
         collectClickCalendar: [], // 收集固定日期选择的日子
         collectClickDay: [],
         cardOilsType: [],
       },
-      queryParams: {
-        stationId: null,
-      },
 
-      index1: null,
+      itemIndex: null,
       open: false,
       infoForm: {},
-      // 表单校验
-      rules: {
-
-      },
       timeSelect: [
         ,
         ["周天", "周一", "周二", "周三", "周四", "周五", "周六"],
@@ -421,45 +404,56 @@ export default {
           "31",
         ],
       ],
-      infoRules:{
-        cardType:[{ validator: validateCardType, trigger: "change" }],
-      }
+      infoRules: {
+        cardType: [{ validator: validateCardType, trigger: "change" }],
+        discountAmtEnd: [
+          { validator: validateDiscountAmtEnd, trigger: "change" },
+        ],
+        presentAmt: [{ validator: validatePresentAmt, trigger: "change" }],
+      },
+      settingRules: {
+        cardEnabledFlag: [
+          {
+            required: true,
+            message: "请选择是否启用电子卡",
+            trigger: "change",
+          },
+        ],
+        presentScale: [{ trigger: "change" }],
+        discountTimeType: [
+          { validator: validateDiscountTimeType, trigger: "change" },
+        ],
+        discountTimeSetting:[
+          {
+            required: true,
+            message: "请选择是否启用电子卡",
+            trigger: "change",
+          },
+        ],
+      },
     };
   },
   created() {
-    this.getDicts("integral_manage").then((response) => {
-      this.discountTimeSettingOptions = response.data;
-    });
-
-    this.getDicts("date_picker").then((response) => {
-      this.discountTimeTypeOptions = response.data;
-    });
-    this.getDicts("is_flag").then((response) => {
-      this.isDiscountCouponOptions = response.data;
-    });
-    this.getDicts("oil").then((response) => {
-      this.oilOptions = response.data;
-    });
-    selectCustomerCardSetting(this.queryParams).then((response) => {
-      console.log("response", response);
-      this.settingform = response.data;
-      this.settingform.collectClickCalendar = [];
-      this.settingform.collectClickDay = "";
+    selectCustomerCardSetting().then((response) => {
+      this.settingForm = response.data;
+      this.settingForm.collectClickCalendar = [];
+      this.settingForm.collectClickDay = "";
+      this.settingForm.cardOilsType = [];
       if (
-        this.settingform.discountTimeType == "1" ||
-        this.settingform.discountTimeType == "2"
+        this.settingForm.discountTimeType == "1" ||
+        this.settingForm.discountTimeType == "2"
       ) {
         // if( this.form.discountTime == ""){
         //   this.form.collectClickCalendar = [];
         // }
-        this.settingform.collectClickCalendar = this.settingform.discountTime
+        this.settingForm.collectClickCalendar = this.settingForm.discountTime
           .split(",")
           .map(parseFloat);
-      } else {
-        if (this.settingform.discountTime.length == 0) {
-          this.settingform.collectClickDay = [];
+      } else if(this.settingForm.discountTimeType == "3") {
+        if (this.settingForm.discountTime.length == 0) {
+          this.settingForm.collectClickDay = [];
         } else {
-          this.settingform.collectClickDay = this.settingform.discountTime.split(
+          this.settingForm.collectClickDay = this.settingForm.discountTime.split(
             ","
           );
         }
@@ -467,106 +461,76 @@ export default {
     });
   },
   methods: {
-    clickCalendar(index) {
-      if (this.settingform.collectClickCalendar.indexOf(index) === -1) {
-        this.settingform.collectClickCalendar.push(index);
-      } else if (this.settingform.collectClickCalendar.indexOf(index) > -1) {
-        const temp = this.settingform.collectClickCalendar.findIndex((ele) => {
-          return ele == index;
-        });
-        this.settingform.collectClickCalendar.splice(temp, 1);
-      }
-      this.settingform = { ...this.settingform };
+    timeClear() {
+      this.settingForm.collectClickCalendar = [];
+      this.settingForm.collectClickDay = [];
     },
-    oilNameFormatter(row, column) {
-      if (row.oilName === "1") {
-        return "汽油";
-      } else if (row.oilName === "2") {
-        return "柴油";
-      }
+    effectiveRefresh(e) {
+      this.settingForm = { ...this.settingForm };
     },
-    settingRuleTypeFotmat(row, column) {
-      if (row.settingRuleType === "1") {
-        return "按赠送金额";
-      } else if (row.settingRuleType === "2") {
-        return "按赠送比例";
-      }
+    effective(no) {
+      return this.settingForm.cardOilsType.includes(no) ? "生效中" : "未生效";
     },
-    settingRuleTypeChange() {
-      if (this.infoForm.settingRuleType == "1") {
-        this.jine = true;
-        this.bili = false;
-      } else if (this.infoForm.settingRuleType == "2") {
-        this.jine = false;
-        this.bili = true;
+    timeClickCalendar(index) {
+      if (this.settingForm.collectClickCalendar.indexOf(index) === -1) {
+        this.settingForm.collectClickCalendar.push(index);
+      } else if (this.settingForm.collectClickCalendar.indexOf(index) > -1) {
+        const temp = this.settingForm.collectClickCalendar.findIndex((ele) => {
+          return ele == index;
+        });
+        this.settingForm.collectClickCalendar.splice(temp, 1);
       }
+      this.$refs.settingForm.validateField("discountTimeType")
+      this.settingForm = { ...this.settingForm };
     },
-    discountTimeTypeChang() {
-      if (this.settingform.discountTimeType == "1") {
-        this.workDaytrue = true;
-        this.moonDaytrue = false;
-        this.datetrue = false;
-      } else if (this.settingform.discountTimeType == "2") {
-        this.workDaytrue = false;
-        this.moonDaytrue = true;
-        this.datetrue = false;
-      } else if (this.settingform.discountTimeType == "3") {
-        this.workDaytrue = false;
-        this.moonDaytrue = false;
-        this.datetrue = true;
+    oilNameFormatter(row, column) {
+      if (row.cardType === "1") {
+        return "汽油卡";
+      } else if (row.cardType === "2") {
+        return "柴油卡";
+      } else if (row.cardType === "3") {
+        return "非油品卡";
+      } else if (row.cardType === "4") {
+        return "LNG卡";
+      } else if (row.cardType === "5") {
+        return "CNG卡";
+      } else {
+        return row.cardType;
       }
     },
-    resetInfo() {
-      this.infoForm = {
-        id: null,
-        parentId: null,
-        oilName: null,
-        discountAmtStart: null,
-        discountAmtEnd: null,
-        settingRuleType: null,
-        presentAmt: null,
-      };
-      this.resetForm("infoForm");
-    },
     /** 新增按钮操作 */
     handleAdd() {
-      this.resetInfo();
-      this.index1 = null;
+      this.itemIndex = this.settingForm.detailList.length;
       this.open = true;
-      this.title = "添加客户电子会员卡充值优惠设置";
+      this.title = "添加电子卡充值规则";
     },
     /** 修改按钮操作 */
     handleUpdate(index, row) {
-      this.index1 = index;
-      this.infoForm = row;
+      this.itemIndex = index;
+      this.infoForm = JSON.parse(JSON.stringify(row));
       this.open = true;
-      this.title = "修改客户电子会员卡充值优惠设置";
-      this.settingRuleTypeChange();
+      this.title = "修改电子卡充值规则";
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["settingform"].validate((valid) => {
+      this.$refs["settingForm"].validate((valid) => {
         if (valid) {
-          this.settingform.cardOilsType = this.cardOilsType.toString();
+          this.settingForm.cardOilsType = this.settingForm.cardOilsType.toString();
           if (
-            this.settingform.discountTimeType == "1" ||
-            this.settingform.discountTimeType == "2"
+            this.settingForm.discountTimeType == "1" ||
+            this.settingForm.discountTimeType == "2"
           ) {
-            this.settingform.discountTime = this.settingform.collectClickCalendar.toString();
+            this.settingForm.discountTime = this.settingForm.collectClickCalendar.toString();
           } else {
-            this.settingform.discountTime = this.settingform.collectClickDay.toString();
+            this.settingForm.discountTime = this.settingForm.collectClickDay.toString();
           }
-          if (this.settingform.id != null) {
-            updateSetting(this.settingform).then((response) => {
+          if (this.settingForm.id != null) {
+            updateSetting(this.settingForm).then((response) => {
               this.msgSuccess("修改成功");
-              this.jine = false;
-              this.bili = false;
             });
           } else {
-            addSetting(this.settingform).then((response) => {
+            addSetting(this.settingForm).then((response) => {
               this.msgSuccess("新增成功");
-              this.jine = false;
-              this.bili = false;
             });
           }
         }
@@ -574,34 +538,17 @@ export default {
     },
     /** 删除按钮操作 */
     handleDelete(index) {
-      this.settingform.detailList.splice(index, 1);
-    },
-    cancelOpen() {
-      this.infoForm = {
-        oilName: null,
-        discountAmtStart: null,
-        discountAmtEnd: null,
-        settingRuleType: null,
-        presentAmt: null,
-      };
-      this.index1 = null;
-      this.resetForm("infoForm");
-      this.open = false;
-      this.jine = false;
-      this.bili = false;
+      this.settingForm.detailList.splice(index, 1);
     },
-    save() {
-      const that = this;
+ 
+    addItem() {
       this.$refs["infoForm"].validate((valid) => {
         if (valid) {
-          if (that.index1 != null) {
-            that.handleDelete(that.index1);
-          }
-          console.log(that.infoForm);
-          that.settingform.detailList.push(that.infoForm);
+          this.settingForm.detailList.splice(this.itemIndex, 1, this.infoForm);
+          this.infoForm = {};
+          this.open = false;
         }
       });
-      this.cancelOpen();
     },
   },
 };

src/views/point/Point_Rule.vue

@@ -299,7 +299,6 @@ export default {
       }
       this.form.itemsDetail.forEach((ele) => {
         if (!ele.oilName || !ele.ruleTerms || !ele.saleAmt || !ele.integral) {
-          console.log("1");
           callback(new Error("请检查规则完整性"));
           return;
         }
@@ -343,6 +342,7 @@ export default {
     let validateDatePicker =(rule, value, callback)=>{
       if(this.form.integralActivity==0){
         callback()
+        return;
       }
       if(!this.form.datePicker){
         callback(new Error("请选择多倍积分的周期类型"));
@@ -455,7 +455,7 @@ export default {
         this.form.collectClickCalendar = this.form.datePickerTime
           .split(",")
           .map(parseFloat);
-      } else {
+      } else if(this.form.datePicker == "3") {
         if(this.form.datePickerTime.length == 0){
           this.form.collectClickDay = []
         }else{
@@ -474,6 +474,10 @@ export default {
     });
   },
   methods: {
+    timeClear() {
+      this.form.collectClickCalendar = [];
+      this.form.collectClickDay = [];
+    },
     gradeChange(item) {
       setTimeout(() => {
         this.form = { ...this.form };
@@ -582,6 +586,7 @@ export default {
         });
         this.form.collectClickCalendar.splice(temp, 1);
       }
+      this.$refs.form.validateField("datePicker")
       this.form = {...this.form}
     },
   },