SAAS-FRONTEND/src/views/customer/cardSetting/index.vue

<template>
  <div class="app-container">
    <el-form ref="settingform" :model="settingform" :rules="rules" label-width="130px">
      <el-row>
        <el-col :span="6" style=""> 
          <el-form-item label="是否启用充值规则">
            <el-checkbox-group v-model="cardOilsTypeList">
              <el-checkbox v-for = "item in checkList" :key="item.id" :label="item.id" :value="item.value">{{item.value}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item> 
        </el-col>
        <el-col :span="8" style=""> 
          <el-button type="primary" style="" @click="handleAdd">新增充值规则</el-button>
        </el-col> 
      </el-row>
      <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-form-item>
      <el-form-item >
       <el-radio-group v-model="settingform.discountTimeSetting">
          <el-radio
            v-for="dict in discountTimeSettingOptions"
            :key="dict.dictValue"
            :label="dict.dictValue"
          >{{dict.dictLabel}}</el-radio>
        </el-radio-group>
      </el-form-item>  
      <el-row>
        <el-col :span="8" style="">
          <el-form-item  label="周期选择" >
            <el-select v-model="settingform.discountTimeType" clearable  size="mini"  @change="datePickerChang" >
                <el-option
                  v-for="item in discountTimeTypeOptions"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">  
          <el-form-item v-show="workDaytrue">
            <div style="display: flex;flex-wrap: wrap;border-style: solid;border-color:#F5F7FA">
              <div v-for="(item, index) in workDay" :key="index" style="margin:3px;">
                <div class="hover-style" style="border-radius:5px;font-weight:bold;font-size:12px;cursor: pointer;" @click="clickWorkDayCalendar(item, index)">
                  <div>{{ item }}</div>
                  <div v-if="collectClickWorkDay.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>
          </el-form-item>
          <el-form-item v-show="moonDaytrue" >
             <div style="display: flex;flex-wrap: wrap;border-style: solid;border-color:#F5F7FA">
              <div v-for="(item, index) in moonEverDay" :key="index" style="margin:3px;">
                <div class="hover-style" style="border-radius:5px;font-weight:bold;font-size:12px;cursor: pointer;" @click="clickCalendar(item, index)">
                  <div>{{ item }}</div>
                  <div v-if="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>
          </el-form-item>
          <el-form-item  v-show="datetrue">
            <el-date-picker clearable size="small" style="margin-left: 10px;width: 200px"
                            v-model="pickerTime"
                            type="dates"
                            value-format="yyyy-MM-dd"
                            placeholder="选择提醒时间设置">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="赠送比例" prop="presentScale">
            <el-input v-model="settingform.presentScale" placeholder="请输入赠送比例" style="width:70px;"/>%
          </el-form-item>
        </el-col>
      </el-row>  
      <el-form-item label="叠加优惠设置" ></el-form-item>
      <el-row style="margin-left:80px;">
        <el-col :span="8" >
          <el-form-item  prop="isDiscountCoupon" label="是否叠加优惠券">
            <el-radio-group v-model="settingform.isDiscountCoupon">
              <el-radio
                v-for="dict in isDiscountCouponOptions"
                :key="dict.dictValue"
                :label="dict.dictValue"
              >{{dict.dictLabel}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8" >
          <el-form-item  prop="isMarket" label="是否叠加营销方案">
            <el-radio-group v-model="settingform.isMarket">
              <el-radio
                v-for="dict in isDiscountCouponOptions"
                :key="dict.dictValue"
                :label="dict.dictValue"
              >{{dict.dictLabel}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8" >
          <el-form-item  prop="isGradeSetting" label="是否叠加等级优惠">
            <el-radio-group v-model="settingform.isGradeSetting">
              <el-radio
                v-for="dict in isDiscountCouponOptions"
                :key="dict.dictValue"
                :label="dict.dictValue"
              >{{dict.dictLabel}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" style="margin-left:80px;">
          <el-form-item  prop="isDiscountCoupon" label="电子卡支付产生积分可享受倍数" label-width="225px">
            <el-input v-model="settingform.enjoyIntegralMultiple" placeholder="请输入积分可享受倍数" style="width:100px;"/>倍
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>

     <!-- 添加或修改客户电子会员卡充值优惠设置明细对话框 -->
    <el-dialog :title="title" :visible.sync="open"  append-to-body>
      <el-form ref="infoform" :model="infoform" :rules="rules" label-width="110px">
        <el-form-item label="选择油品" >
          <el-select
            v-model="infoform.oilName"
            placeholder="请选择油品"
            clearable
            size="small"
          >
          <el-option
            v-for="item in oilOptions"
            :key="item.dictLabel"
            :label="item.dictLabel"
            :value="item.dictValue"
          ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="充值条件金额" prop="discountAmtTerm">
          <el-input-number v-model="infoform.discountAmtStart" placeholder="请输入充值条件开始金额" style="width:200px;" /> 
          <span>≤充值金额(元)&lt;</span>
          <el-input-number v-model="infoform.discountAmtEnd" placeholder="请输入充值条件结束金额" style="width:200px;"/> 
        </el-form-item>
        <el-form-item label="赠送方式"></el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item >
              <el-select v-model="infoform.settingRuleType" placeholder="请选择赠送方式" @change="settingRuleTypeChange">
                <el-option
                  v-for="item in settingRuleTypeOptions"
                  :key="item.dictLabel"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item>
              <el-input v-model="infoform.presentAmt" style="width:100px;"/>
              <span v-show="jine">元</span>
              <span v-show="bili">%</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
           <span style="color:red;margin-left:90px;">例：按赠送金额：充100赠送10元;按赠送比例：充100赠送10%</span>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save">设置</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addSetting, updateSetting,selectCustomerCardSetting} from "@/api/customer/cardSetting";
export default {
  name: "Setting",
  data() {
    return {
      // 总条数
      total: 0,
      oilOptions:[],
      isDiscountCouponOptions:[],
      discountTimeSettingOptions:[],
      collectClickCalendar: [], // 收集固定日期选择的日子
      collectClickWorkDay:[],
      discountTimeTypeOptions :[],
      settingRuleTypeOptions:[],
      checkList:[
        {id:"1",value:"汽油"},
        {id:"2",value:"柴油"}
      ],
      cardOilsTypeList:[],
      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: {
        detailList:[]
      },
      //判断保存次数
      num:0,
      queryParams:{
        stationId: null
      },

      index1:null,
      open:false,
      infoform:{},
      // 表单校验
      rules: {
      }
    };
  },
  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;
    });
    this.getDicts("setting_rule_type").then(response => {
      this.settingRuleTypeOptions = response.data;
    });

    selectCustomerCardSetting(this.queryParams).then(response => {
      if(response.hasOwnProperty('data')){
        this.settingform = response.data;
        if(this.settingform.cardOilsType!=null &&this.settingform.cardOilsType!="" ){
          this.cardOilsTypeList=this.settingform.cardOilsType.split(",");
        }
        if(this.settingform.discountTimeType == "1"){
          this.workDaytrue=true;
          this.moonDaytrue=false;
          this.datetrue=false;
          this.collectClickWorkDay =this.settingform.discountTime.split(",").map(parseFloat);
        }else if(this.settingform.discountTimeType == "2"){
          this.workDaytrue=false;
          this.moonDaytrue=true;
          this.datetrue=false;
          this.collectClickCalendar= this.settingform.discountTime.split(',').map(parseFloat);
        }else if(this.settingform.discountTimeType == "3"){
          this.workDaytrue=false;
          this.moonDaytrue=false;
          this.datetrue=true;
          if(this.settingform.discountTime!=""){
              this.pickerTime =this.settingform.discountTime.split(",");
          }else{
            this.pickerTime =null;
          }
        }
      }
    });
  },
  methods: {
    oilNameFormatter(row, column){
      if(row.oilName === '1'){
        return '汽油'
      }else if(row.oilName === '2'){
        return '柴油'
      }
    },
    settingRuleTypeFotmat(row, column){
      if(row.settingRuleType === '1'){
        return '按赠送金额'
      }else if(row.settingRuleType === '2'){
        return '按赠送比例'
      }
    },
    settingRuleTypeChange(){
      if(this.infoform.settingRuleType == "1"){
        this.jine=true;
        this.bili=false;
      }else if(this.infoform.settingRuleType == "2"){
        this.jine=false;
        this.bili=true;
      }
    },
    datePickerChang(){
      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;
      }
    },
    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.open = true;
      this.title = "添加客户电子会员卡充值优惠设置";
    },
    /** 修改按钮操作 */
    handleUpdate(index,row) {
      this.index1=index;
      this.infoform = row;
      this.open = true;
      this.title = "修改客户电子会员卡充值优惠设置";
      this.settingRuleTypeChange();
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["settingform"].validate(valid => {
        if (valid) {
          let flag=true;
          if(this.cardOilsTypeList !=null && this.cardOilsTypeList.length>0){
            this.settingform.cardOilsType=this.cardOilsTypeList.toString();
          }else{
            this.settingform.cardOilsType="";
            flag=false;
          }
          if (this.settingform.id != null) {
            let datepicker = this.settingform.discountTimeType;
            if(datepicker=="1"){
              if(this.collectClickWorkDay!=null&&this.collectClickWorkDay.length>0){
                let discountTime=null;
                for(let i =0;i<this.collectClickWorkDay.length;i++){
                  if(!isNaN(this.collectClickWorkDay[i]) && this.collectClickWorkDay[i]!="NaN"){
                    if( discountTime!=null){
                      discountTime =discountTime+","+this.collectClickWorkDay[i];
                    }else{
                      discountTime =this.collectClickWorkDay[i];
                    }
                  }else{
                    discountTime =discountTime;
                  }
                }
                this.settingform.discountTime=discountTime; 
                discountTime=null;
              } else{
                  this.settingform.discountTime=""; 
              }
            }else if(datepicker=="2"){
              if(this.collectClickCalendar!=null&&this.collectClickCalendar.length>0){
                let discountTime=null;
                for(let i =0;i<this.collectClickCalendar.length;i++){
                  if(!isNaN(this.collectClickCalendar[i]) && this.collectClickCalendar[i]!="NaN"){
                    if( discountTime!=null){
                      discountTime =discountTime+","+this.collectClickCalendar[i];
                    }else{
                      discountTime =this.collectClickCalendar[i];
                    }
                  }else{
                    discountTime =discountTime;
                  }
                }
                this.settingform.discountTime=discountTime; 
                discountTime=null;
              } else{
                  this.settingform.discountTime=""; 
              }
            }else{
              if(this.pickerTime!=null){
                  this.settingform.discountTime = this.pickerTime.toString();
              }else{
                this.settingform.discountTime = "";
              }
            }    
            updateSetting(this.settingform).then(response => {
              this.msgSuccess("修改成功");
              this.jine=false;
              this.bili=false;
            });
          } else {
            if(this.num==0){
              if(datepicker=="1"){
                if(this.collectClickWorkDay!=null&&this.collectClickWorkDay.length>0){
                  let discountTime=null;
                  for(let i =0;i<this.collectClickWorkDay.length;i++){
                    if(!isNaN(this.collectClickWorkDay[i]) && this.collectClickWorkDay[i]!="NaN"){
                      if( discountTime!=null){
                        discountTime =discountTime+","+this.collectClickWorkDay[i];
                      }else{
                        discountTime =this.collectClickWorkDay[i];
                      }
                    }else{
                      discountTime =discountTime;
                    }
                  }
                  this.settingform.discountTime=discountTime; 
                  discountTime=null;
                } else{
                    this.settingform.discountTime=""; 
                }
              }else if(datepicker=="2"){
                  if(this.collectClickCalendar!=null&&this.collectClickCalendar.length>0){
                    let discountTime=null;
                    for(let i =0;i<this.collectClickCalendar.length;i++){
                      if(!isNaN(this.collectClickCalendar[i]) && this.collectClickCalendar[i]!="NaN"){
                        if( discountTime!=null){
                          discountTime =discountTime+","+this.collectClickCalendar[i];
                        }else{
                          discountTime =this.collectClickCalendar[i];
                        }
                      }else{
                        discountTime =discountTime;
                      }
                    }
                    this.settingform.discountTime=discountTime; 
                    discountTime=null;
                  } else{
                      this.settingform.discountTime=""; 
                  }
              }else{
                if(this.pickerTime!=null){
                   this.settingform.discountTime = this.pickerTime.toString();
                }else{
                  this.settingform.discountTime = "";
                }
              }
              addSetting(this.settingform).then(response => {
                this.msgSuccess("新增成功");
                this.num=this.num+1;
                this.jine=false;
                this.bili=false;
              });
            }else{
              this.msgSuccess("已新增成功，如需修改请刷新页面");
            }
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(index) {
     this.settingform.detailList.splice(index, 1)
    },
    deleteItemFromArr(item) {
      Array.prototype.indexOf = function(val) {
        for (var i = 0; i < this.length; i++) {
          if (this[i] === val) {
            return i
          }
        }
        return -1
      }
      // 通过索引删除数组元素
      Array.prototype.remove = function(val) {
        var index = this.indexOf(val)
        if (index > -1) {
          this.splice(index, 1)
        }
      }
      // 删除数组元素
      this.collectClickCalendar.remove(item)
    },
    clickCalendar(item, index) {
      if (this.collectClickCalendar.indexOf(index) === -1) {
        this.collectClickCalendar.push(index)
      } else if (this.collectClickCalendar.indexOf(index) > -1) {
        this.deleteItemFromArr(index)
      }
    },
    deleteWorkDayFromArr(item) {
      Array.prototype.indexOf = function(val) {
        for (var i = 0; i < this.length; i++) {
          if (this[i] === val) {
            return i
          }
        }
        return -1
      }
      // 通过索引删除数组元素
      Array.prototype.remove = function(val) {
        var index = this.indexOf(val)
        if (index > -1) {
          this.splice(index, 1)
        }
      }
      // 删除数组元素
      this.collectClickWorkDay.remove(item);
    },
    clickWorkDayCalendar(item, index) {
      if (this.collectClickWorkDay.indexOf(index) === -1) {
        this.collectClickWorkDay.push(index)
      } else if (this.collectClickWorkDay.indexOf(index) > -1) {
        this.deleteWorkDayFromArr(index)
      }
    },
    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;
    },
    save(){
      const that = this;
      this.$refs["infoform"].validate(valid => {
        if (valid) {
          if(that.index1!=null){
            that.handleDelete(that.index1);
          }
          that.settingform.detailList.push(that.infoform);
        }
      });
      this.cancelOpen();
    }
  }
};
</script>