SAAS-FRONTEND/src/views/dzk/Dzk_Rule.vue

<template>
  <PermissionContainer
    :jiBieArr="[1, 2]"
    :type="2"
    :isFlag="true"
    :tipArr="[
      ,
      '电子卡功能只对集团和站点级别开放',
      '因为集团上关于电子卡的共享配置，此级没有配置权限',
      ,
      '您暂未启动电子卡功能',
    ]"
  >
    <div class="app-container">
      <el-form
        ref="settingForm"
        :model="settingForm"
        :rules="settingRules"
        label-width="200px"
      >
        <el-form-item label="是否启用电子卡" prop="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>
        <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="width: 900px; margin-left: 90px;margin-bottom:40px;">
            <div style="text-align: right">
              <el-button type="primary" @click="handleAdd" size="mini" style="margin-bottom:20px;margin-right:50px">
                新 增 规 则
              </el-button>
            </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
                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
                    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 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
            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="isLabel"
            label="是否叠加标签"
            :required="settingForm.cardEnabledFlag == 1"
          >
            <el-radio-group v-model="settingForm.isLabel">
              <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" size="mini"
          >确 定</el-button
        >
      </div>

      <!-- 添加或修改客户电子会员卡充值优惠设置明细对话框 -->
      <el-dialog :title="title" :visible.sync="open" append-to-body>
        <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="请选择电子卡"
              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-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="discountAmtEnd" required>
            <el-input-number
              v-model="infoForm.discountAmtStart"
              size="mini"
              style="width: 120px"
            />
            <span>≤ 充值金额(元) &lt;</span>
            <el-input-number
              v-model="infoForm.discountAmtEnd"
              size="mini"
              style="width: 120px"
            />
          </el-form-item>
          <el-form-item label="赠送方式" prop="presentAmt" required>
            <div>
              <el-select
                v-model="infoForm.settingRuleType"
                placeholder="请选择赠送方式"
                size="mini"
              >
                <el-option label="按金额赠送" value="1"></el-option>
                <el-option label="按比例赠送" value="2"></el-option>
              </el-select>
              <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="addItem">添加</el-button>
        </div>
      </el-dialog>
    </div>
  </PermissionContainer>
</template>

<script>
import {
  addSetting,
  updateSetting,
  selectCustomerCardSetting,
} from "@/api/customer/cardSetting";
export default {
  name: "Dzk_Rule",
  data() {
    const validateCardType = (rule, value, callback) => {
      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;
      }
      if (
        this.settingForm.discountTimeType == 1 ||
        this.settingForm.discountTimeType == 2
      ) {
        if (this.settingForm.collectClickCalendar.length <= 0) {
          callback(new Error("请选择活动的时间"));
          return;
        }
      }
      if (this.settingForm.discountTimeType == 3) {
        if (
          this.settingForm.collectClickDay == null ||
          this.settingForm.collectClickDay.length <= 0
        ) {
          callback(new Error("请填写活动时间"));
          return;
        }
      }
      callback();
    };
    return {
      title: "",
      // 表单参数
      settingForm: {
        detailList: [],
        collectClickCalendar: [], // 收集固定日期选择的日子
        collectClickDay: [],
        cardOilsType: [],
      },

      itemIndex: null,
      open: false,
      infoForm: {},
      timeSelect: [
        ,
        ["周天", "周一", "周二", "周三", "周四", "周五", "周六"],
        [
          "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",
        ],
      ],
      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.init();
  },
  methods: {
    init() {
      selectCustomerCardSetting().then((response) => {
        this.settingForm = response.data;
        this.settingForm.collectClickCalendar = [];
        this.settingForm.collectClickDay = "";
        if (this.settingForm.cardOilsType == null) {
          this.settingForm.cardOilsType = "";
        }
        const cardOilsType = this.settingForm.cardOilsType
          .split(",")
          .filter((ele) => {
            return ele != "";
          });
        this.settingForm.cardOilsType = cardOilsType;
        if (
          this.settingForm.discountTimeType == "1" ||
          this.settingForm.discountTimeType == "2"
        ) {
          // if( this.form.discountTime == ""){
          //   this.form.collectClickCalendar = [];
          // }
          this.settingForm.collectClickCalendar = this.settingForm.discountTime
            .split(",")
            .map(parseFloat);
        } 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 = { ...this.settingForm };
      });
    },
    timeClear() {
      this.settingForm.collectClickCalendar = [];
      this.settingForm.collectClickDay = [];
    },
    effectiveRefresh(e) {
      this.settingForm = { ...this.settingForm };
    },
    effective(no) {
      return this.settingForm.cardOilsType.includes(no) ? "生效中" : "未生效";
    },
    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 };
    },
    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;
      }
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.itemIndex = this.settingForm.detailList.length;
      this.open = true;
      this.title = "添加电子卡充值规则";
    },
    /** 修改按钮操作 */
    handleUpdate(index, row) {
      this.itemIndex = index;
      this.infoForm = JSON.parse(JSON.stringify(row));
      this.open = true;
      this.title = "修改电子卡充值规则";
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["settingForm"].validate((valid) => {
        if (valid) {
          this.settingForm.cardOilsType =
            this.settingForm.cardOilsType.toString();
          if (
            this.settingForm.discountTimeType == "1" ||
            this.settingForm.discountTimeType == "2"
          ) {
            this.settingForm.discountTime =
              this.settingForm.collectClickCalendar.toString();
          } else {
            this.settingForm.discountTime =
              this.settingForm.collectClickDay.toString();
          }
          if (this.settingForm.id != null) {
            updateSetting(this.settingForm).then((response) => {
              this.msgSuccess("修改成功");
              this.init();
            });
          } else {
            addSetting(this.settingForm).then((response) => {
              this.msgSuccess("新增成功");
              this.init();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(index) {
      this.settingForm.detailList.splice(index, 1);
    },

    addItem() {
      this.$refs["infoForm"].validate((valid) => {
        if (valid) {
          this.settingForm.detailList.splice(this.itemIndex, 1, this.infoForm);
          this.infoForm = {};
          this.open = false;
        }
      });
    },
  },
};
</script>