SAAS-FRONTEND/src/views/dev/Dev_Test copy.vue

<template>
  <div v-if="pageStatus == 0">配置加载中...</div>
  <div v-else-if="pageStatus == 1">此页面不对此账号开放</div>
  <div v-else-if="pageStatus == 2">
    没有此页内容的配置权限，请检查集团上的配置
  </div>
  <div v-else-if="pageStatus == 3">加载发生错误</div>
  <div v-else-if="pageStatus == 4" class="app-container">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="130px"
    >
      <el-form-item label="当前执行优惠方案">
        {{ currentDiscountName }}
      </el-form-item>
      <el-form-item label="优惠方案">
        <el-select
          v-model="ruleForm.discountSetting"
          placeholder="请选择优惠方案"
          clearable
          size="small"
          @change="discountSettingChang"
        >
          <el-option label="无" value="0"></el-option>
          <el-option label="满减" value="1"></el-option>
          <el-option label="立减" value="2"></el-option>
          <el-option label="直降" value="3"></el-option>
          <el-option label="阶梯直降" value="4"></el-option>
        </el-select>
        <el-button size="mini" @click="save" type="primary"
          >确定执行该优惠方案</el-button
        >
      </el-form-item>
    </el-form>

    <hr />
    <el-dialog
      :visible.sync="openDialog"
      width="520px"
      append-to-body
      :title="
        ['', '满减方案', '立减方案', '直降方案', '阶梯直降'][discountSetting]
      "
    >
      <el-form
        ref="updateForm"
        :model="updateForm"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="方案名称" prop="grade" class="input-group-sm">
          <!-- <el-input v-model="updateForm.grade" placeholder="请输入方案名称" /> -->
          <input v-model="updateForm.grade" placeholder="请输入方案名称" class="form-control form-control-sm w-50"/>
        </el-form-item>
        <el-form-item label="油品名称" prop="oilName">
          <el-select
            v-model="updateForm.oilName"
            placeholder="油品名称"
            clearable
            size="small"
            class=" w-50"
          >
            <el-option
              v-for="dict in filterOilNameOptions"
              :key="dict.oilName"
              :label="dict.oilName"
              :value="dict.oilName"
            />
          </el-select>
        </el-form-item>

        <!-- 阶梯直降没有此条目 -->
        <el-form-item
          label="优惠条件"
          prop="gasoilDiscountAmt"
          :rules="{
            required: discountSetting != 4,
            message: '请填写优惠条件',
            trigger: 'change',
          }"
          v-if="discountSetting != 4"
        >
          <el-radio-group
            v-model="updateForm.discountTerm"
            v-if="discountSetting == 3"
          >
            <el-radio :label="2">按加油金额</el-radio>
            <el-radio :label="1">按加油升数</el-radio>
          </el-radio-group>
          <div
            v-show="
              updateForm.discountTerm == 2 ||
              updateForm.discountTerm == 1 ||
              discountSetting == 1 ||
              discountSetting == 2
            "
          >
            {{ ["", "每满", "满", "满"][discountSetting] }}
            <el-input-number
              v-model="updateForm.discountAmt"
              size="mini"
              :min="0"
            />

            <span>{{
              updateForm.discountTerm == 1 && discountSetting == 3 ? "L" : "元"
            }}</span>
            ，{{ ["", "减", "减", "每升优惠"][discountSetting] }}
            <el-input-number
              v-model="updateForm.gasoilDiscountAmt"
              size="mini"
              :min="0"
            />元
          </div>
        </el-form-item>

        <!-- 阶梯直降没有此条目 -->
        <el-form-item
          label="会员日"
          prop="discountSettingFlag"
          :rules="{
            required: discountSetting != 4,
            message: '请选择是否开启会员日',
            trigger: 'change',
          }"
          v-if="discountSetting != 4"
        >
          <el-radio-group v-model="updateForm.discountSettingFlag">
            <el-radio label="0">关闭</el-radio>
            <el-radio label="1">开启</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          label="会员日周期类型"
          prop="discountType"
          v-show="updateForm.discountSettingFlag == 1"
          :rules="{
            required: updateForm.discountSettingFlag == 1,
            message: '请选择会员日的周期类型',
            trigger: 'change',
          }"
        >
          <el-select
            v-model="updateForm.discountType"
            clearable
            size="small"
            @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="updateForm.discountType != 3"
            style="
              display: flex;
              flex-wrap: wrap;
              border-style: solid;
              border-color: #f5f7fa;
            "
          >
            <div
              v-for="(item, index) in timeSelect[updateForm.discountType]"
              :key="index"
              style="margin: 3px"
            >
              <div
                class="hover-style"
                style="
                  border-radius: 5px;
                  font-weight: bold;
                  font-size: 12px;
                  cursor: pointer;
                "
                @click="clickCalendar(index)"
              >
                <div>{{ item }}</div>
                <div
                  v-if="updateForm.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="updateForm.discountType == 3">
            <el-date-picker
              clearable
              size="small"
              style="margin-left: 10px; width: 200px"
              v-model="updateForm.collectClickDay"
              type="dates"
              value-format="yyyy-MM-dd"
              placeholder="选择提醒时间设置"
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item
          label="会员日优惠条件"
          prop="discountActivityAmt"
          v-show="updateForm.discountSettingFlag == 1"
          :rules="{
            required: updateForm.discountSettingFlag == 1,
            message: '请填写会员日的优惠金额',
            trigger: 'change',
          }"
        >
          <div>
            {{ ["", "每满", "满", "满"][discountSetting] }}
            <el-input-number
              v-model="updateForm.discountAmt"
              size="mini"
              :min="0"
              disabled
            />

            <span>{{
              updateForm.discountTerm == 1 && discountSetting == 3 ? "L" : "元"
            }}</span>
            ，{{ ["", "减", "减", "每升优惠"][discountSetting] }}
            <el-input-number
              v-model="updateForm.discountActivityAmt"
              size="mini"
              :min="0"
            />元
          </div>
          <!-- <el-input-number
            v-model="updateForm.integralProportion"
            :min="1"
            placeholder="请输入加倍比例"
            size="small"
          />
          <span>倍</span> -->
          <!-- 满
          <el-input-number
            v-model="updateForm.discountAmt"
            size="mini"
            :min="0"
            disabled
          /><span>{{
            updateForm.discountTerm == 1 && discountSetting == 3 ? "L" : "元"
          }}</span
          >，每升优惠<el-input-number
            v-model="updateForm.discountActivityAmt"
            size="mini"
            :min="0"
          />元 -->
        </el-form-item>
        <el-form-item label="叠加等级优惠" prop="vipDiscountyPlus">
          <el-radio-group v-model="updateForm.vipDiscountyPlus">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
          <div style="margin-left: 20px; color: red; font-size:12px">
            注："否" 客户只享受 {{ discountName }} 优惠
          </div>
        </el-form-item>
        <el-form-item label="可否叠加劵" prop="couponPlus">
          <el-radio-group v-model="updateForm.couponPlus">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
          <div style="margin-left: 20px; color: red;font-size:12px">
            注："否" 客户只享受 {{ discountName }} 优惠
          </div>
        </el-form-item>
        
        <!-- 只有阶梯直降有此条目 -->
        <el-form-item
          label="优惠条件"
          prop="discountTerm"
          :rules="{
            required: discountSetting == 4,
            message: '请填写优惠条件',
            trigger: 'change',
          }"
          v-if="discountSetting == 4"
        >
          <el-radio-group v-model="updateForm.discountTerm">
            <el-radio :label="2">按加油金额</el-radio>
            <el-radio :label="1">按加油升数</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 只有阶梯直降有此条目 -->
        <el-form-item
          label="阶梯设置"
          prop="discountType"
          :rules="{
            required: discountSetting == 4,
            message: '请选择会员日的周期类型',
            trigger: 'change',
          }"
          v-if="discountSetting == 4"
        >
        <el-button
          icon="el-icon-plus"
          size="mini"
          class="mb-3 mr-4"
          @click="handleUpdateClick"
          type="secondary"
        >
          添加条目
        </el-button>
        </el-form-item>

        <div class="mx-auto mb-4 shadow-lg bg-white pt-4 pb-2 px-1 rounded" style="width: 450px;">
          <div class="input-group input-group-sm mb-4 mt-1">
            <input
              type="text"
              class="form-control"
              aria-label="Dollar amount (with dot and two decimal places)"
            />
            <div class="input-group-append">
              <span class="input-group-text"> &lt;= 加油金额 &lt;= </span>
            </div>
            <input
              type="text"
              class="form-control"
              aria-label="Dollar amount (with dot and two decimal places)"
            />
            <div class="input-group-append">
              <span class="input-group-text">元，每升优惠</span>
            </div>
            <input
              type="text"
              class="form-control"
              aria-label="Dollar amount (with dot and two decimal places)"
            />
            <div class="input-group-append">
              <span class="input-group-text">元</span>
            </div>
            <div class="input-group-append" id="button-addon4">
              <button class="btn btn-danger" type="button">删除</button>
            </div>
          </div>
          <div class="input-group input-group-sm mb-4 mt-1">
            <input
              type="text"
              class="form-control"
              aria-label="Dollar amount (with dot and two decimal places)"
            />
            <div class="input-group-append">
              <span class="input-group-text"> &lt;= 加油金额 &lt;= </span>
            </div>
            <input
              type="text"
              class="form-control"
              aria-label="Dollar amount (with dot and two decimal places)"
            />
            <div class="input-group-append">
              <span class="input-group-text">元，每升优惠</span>
            </div>
            <input
              type="text"
              class="form-control"
              aria-label="Dollar amount (with dot and two decimal places)"
            />
            <div class="input-group-append">
              <span class="input-group-text">元</span>
            </div>
            <div class="input-group-append" id="button-addon4">
              <button class="btn btn-danger" type="button">删除</button>
            </div>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="cancelSubmit">取 消</el-button>
      </div>
    </el-dialog>

    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
      v-show="discountSetting != 0"
    >
      <div>
        <el-button
          icon="el-icon-plus"
          size="small"
          class="mb-3 mr-4"
          @click="handleUpdateClick"
          style="float: right"
          type="warning"
        >
          {{
            this.discountSetting == 1
              ? "添加满减方案条目"
              : this.discountSetting == 2
              ? "添加立减方案条目"
              : this.discountSetting == 3
              ? "添加直降方案条目"
              : this.discountSetting == 4
              ? "添加阶梯直降条目"
              : "无"
          }}
        </el-button>
      </div>
    </el-form>
    <el-table :data="discountList" v-show="discountSetting != 0">
      <af-table-column label="id" align="center" prop="id" v-if="false" />
      <af-table-column label="方案名称" align="center" prop="grade" />
      <af-table-column label="油品名称" align="center" prop="oilName" />
      <af-table-column
        label="优惠条件"
        align="center"
        v-if="discountSetting == 3"
      >
        <template slot-scope="scope">
          满 {{ scope.row.discountAmt }}
          {{ scope.row.discountTerm == 2 ? "元" : "L" }}，每升优惠
          {{ scope.row.gasoilDiscountAmt }} 元
        </template>
      </af-table-column>
      <af-table-column
        label="优惠条件"
        align="center"
        v-if="discountSetting == 1"
      >
        <template slot-scope="scope">
          每满 {{ scope.row.discountAmt }} 元，减
          {{ scope.row.gasoilDiscountAmt }} 元
        </template>
      </af-table-column>
      <af-table-column
        label="优惠条件"
        align="center"
        v-if="discountSetting == 2"
      >
        <template slot-scope="scope">
          满 {{ scope.row.discountAmt }} 元，减
          {{ scope.row.gasoilDiscountAmt }} 元
        </template>
      </af-table-column>
      <af-table-column label="会员日" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.discountSettingFlag == 0"> 无活动 </span>
          <span v-else-if="scope.row.discountSettingFlag == 1">
            {{ discountSettingTranslate(scope.row) }}
          </span>
        </template>
      </af-table-column>
      <af-table-column
        label="叠加等级优惠"
        align="center"
        prop="vipDiscountyPlus"
        :formatter="vipDiscountyPlusFotmat"
      />
      <af-table-column
        label="叠加劵"
        align="center"
        prop="couponPlus"
        :formatter="couponPlusFotmat"
      />
      <af-table-column
        label="优惠方案类型"
        v-if="false"
        align="center"
        prop="discountPlanType"
      />
      <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.row)"
            >修改</el-button
          > -->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </af-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  listPlan,
  getPlan,
  delPlan,
  addPlan,
  updatePlan,
  exportPlan,
} from "@/api/market/plan";
import { getStationPay, updatePay } from "@/api/station/pay";
import { getDept } from "@/api/system/dept";
import { listPrice } from "@/api/station/price";
export default {
  name: "Market_Discount",
  data() {
    const validatorGasoilDiscountAmt = (rule, value, callback) => {
      if (this.discountSetting == 3) {
        if (
          this.updateForm.discountTerm === undefined ||
          this.updateForm.discountTerm === ""
        ) {
          callback(new Error("请选择优惠方式"));
          return;
        }
      }
      const start = +this.updateForm.discountAmt;
      const end = +this.updateForm.gasoilDiscountAmt;
      if (isNaN(start) || isNaN(end)) {
        callback(new Error("检查优惠方式完整性"));
        return;
      }
      callback();
    };

    return {
      pageStatus: 0,
      discountList: [],
      total: 0,
      oilNameOptions: [],
      title: "",
      openDialog: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        grade: null,
        discountWay: null,
        gasoilDiscountLitre: null,
        dieseloilDiscountLitre: null,
        gradeType: null,
        gasoilConsume: null,
        gasoilGrowthValue: null,
        dieseloilConsume: null,
        dieseloilGrowthValue: null,
        growthValue: null,
        date: null,
        deductionGrowthValue: null,
      },
      updateFormDynamic1: ["", "满", "每满", "满"],
      updateFormDynamic2: ["", "减", "减", "每升优惠"],
      ruleForm: {},
      // 表单校验
      rules: {
        grade: [{ required: true, message: "请输入方案名称", trigger: "blur" }],
        oilName: [
          { required: true, message: "请选择油品名称", trigger: "change" },
        ],
        discountTerm: [
          { required: true, message: "选择油品名称", trigger: "change" },
        ],
        gasoilDiscountAmt: [
          { validator: validatorGasoilDiscountAmt, trigger: "change" },
        ],
        discountAmt: [
          { required: true, message: "请填写优惠金额", trigger: "blur" },
        ],
        vipDiscountyPlus: [
          {
            required: true,
            message: "选择等级优惠是否叠加",
            trigger: "change",
          },
        ],
        couponPlus: [
          { required: true, message: "选择可否叠加券", trigger: "change" },
        ],
      },
      dtrules: {},
      discountSetting: 0,
      updateForm: {
        collectClickCalendar: [],
        collectClickDay: "",
      },
      currentDiscountName: "",
      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",
        ],
      ],
    };
  },
  computed: {
    discountName() {
      return this.discountSetting == 1
        ? "满减"
        : this.discountSetting == 2
        ? "立减"
        : this.discountSetting == 3
        ? "直降"
        : "无";
    },
    filterOilNameOptions() {
      return this.oilNameOptions.filter((ele) => {
        let flag = true;
        this.discountList.forEach((item) => {
          if (ele.oilName == item.oilName) {
            flag = false;
          }
        });
        return flag;
      });
    },
  },
  created() {
    this.setPageStatus();
    this.init();
  },
  methods: {
    init() {
      listPrice().then((response) => {
        this.oilNameOptions = response.rows;
      });
      this.getPay().then(() => {
        this.getList();
      });
    },
    setPageStatus() {
      this.queryPageStatus([2]).then((res) => {
        this.pageStatus = res;
      });
    },
    timeClear() {
      this.updateForm.collectClickCalendar = [];
      this.updateForm.collectClickDay = [];
    },
    getPay() {
      return getStationPay().then((response) => {
        this.ruleForm = response.data;
        this.discountSetting = response.data.discountSetting;
        this.currentDiscountName = this.discountName;
      });
    },
    save() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          if (this.ruleForm.deptId != null) {
            let upPromise = null;
            let e = this.ruleForm.discountSetting;
            if (e == "0") {
              upPromise = updatePay(this.ruleForm).then((response) => {
                this.msgSuccess("优惠方案设置成功");
              });
            } else if (e == "1") {
              if (this.discountList.length > 0) {
                upPromise = updatePay(this.ruleForm).then((response) => {
                  this.msgSuccess("优惠方案设置成功");
                });
              } else {
                this.msgError("满减规则下无方案");
                return;
              }
            } else if (e == "2") {
              if (this.discountList.length > 0) {
                upPromise = updatePay(this.ruleForm).then((response) => {
                  this.msgSuccess("优惠方案设置成功");
                });
              } else {
                this.msgError("立减规则下无方案");
                return;
              }
            } else if (e == "3") {
              if (this.discountList.length > 0) {
                upPromise = updatePay(this.ruleForm).then((response) => {
                  this.msgSuccess("优惠方案设置成功");
                });
              } else {
                this.msgError("直降规则下无方案");
                return;
              }
            }
            upPromise
              .catch((err) => {
                this.msgError("设置时出错，请刷新后重试~");
              })
              .then((res) => {
                this.getPay();
              });
          } else {
            this.getPay();
          }
        }
      });
    },
    discountSettingChang(e) {
      console.log(e);
      this.discountSetting = e;
      this.getList();
    },
    getList() {
      const query = {
        pageNum: 1,
        pageSize: 100,
        discountPlanType: this.discountSetting,
      };
      listPlan(query).then((response) => {
        this.discountList = response.rows;
        this.total = response.total;
      });
    },
    vipDiscountyPlusFotmat(row, column) {
      if (row.vipDiscountyPlus === "1") {
        return "是";
      } else if (row.vipDiscountyPlus === "0") {
        return "否";
      }
    },
    couponPlusFotmat(row, column) {
      if (row.couponPlus === "1") {
        return "是";
      } else if (row.couponPlus === "0") {
        return "否";
      }
    },
    handleUpdateClick() {
      this.openDialog = true;
      this.updateForm = {
        discountPlanType: this.discountSetting,
      };
    },
    handleSubmit() {
      this.$refs["updateForm"].validate((valid) => {
        if (valid) {
          if (this.updateForm.discountSettingFlag == "1") {
            if (
              this.updateForm.discountType == "1" ||
              this.updateForm.discountType == "2"
            ) {
              this.updateForm.discountDate =
                this.updateForm.collectClickCalendar.toString();
            } else {
              this.updateForm.discountDate =
                this.updateForm.collectClickDay.toString();
            }
          }
          if (this.updateForm.id != null) {
            updatePlan(this.updateForm).then((response) => {
              this.msgSuccess("修改成功");
              this.openDialog = false;
              this.getList();
            });
          } else {
            addPlan(this.updateForm).then((response) => {
              this.msgSuccess("新增成功");
              this.openDialog = false;
              this.getList();
            });
          }
        }
      });
    },
    clickCalendar(index) {
      if (this.updateForm.collectClickCalendar.indexOf(index) === -1) {
        this.updateForm.collectClickCalendar.push(index);
      } else if (this.updateForm.collectClickCalendar.indexOf(index) > -1) {
        const temp = this.updateForm.collectClickCalendar.findIndex((ele) => {
          return ele == index;
        });
        this.updateForm.collectClickCalendar.splice(temp, 1);
      }
      this.$refs.updateForm.validateField("discountType");
      this.updateForm = { ...this.updateForm };
    },
    cancelSubmit() {
      this.openDialog = false;
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      const id = row.id;
      this.title = "修改满减优惠";
      this.openDialog = true;
      this.updateForm = row;
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id;
      this.$confirm("是否确认删除满减优惠方案?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delPlan(ids);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        });
    },
    // /** 导出按钮操作 */
    // handleExport() {
    //   const queryParams = this.queryParams;
    //   this.$confirm("是否确认导出所有优惠设置数据项?", "警告", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(function () {
    //       return exportPlan(queryParams);
    //     })
    //     .then((response) => {
    //       this.download(response.msg);
    //     });
    // },
    discountSettingTranslate(row) {
      if (row.discountSettingFlag == 0) {
        return "未设置";
      }
      // if (this.discountList.integralActivity == 0) {
      //   return "";
      // }

      let timeString = "";
      const discountType = row.discountType;

      if (discountType == 1) {
        timeString += "每周的";
      }
      if (discountType == 2) {
        timeString += "每月的";
      }
      if (discountType == 3) {
        timeString += "指定的日期 ";
      }
      if (discountType == 1 || discountType == 2) {
        (row.discountDate || "")
          .split(",")
          .filter((ele) => {
            return ele !== "";
          })
          .forEach((ele) => {
            timeString += this.timeSelect[discountType][ele] + "、";
          });
      } else if (discountType == 3) {
        timeString += row.discountDate.toString();
      }

      timeString = timeString.replace(/(、)$/g, "") + " 优惠：";
      if (this.discountSetting == 3) {
        timeString +=
          "满" +
          row.discountAmt +
          (row.discountTerm == 2 ? "元" : "L") +
          "，每升优惠" +
          row.discountActivityAmt +
          "元";
      } else if (this.discountSetting == 1) {
        timeString +=
          "每满" + row.discountAmt + "元，减" + row.discountActivityAmt + "元";
      } else if (this.discountSetting == 2) {
        timeString +=
          "满" + row.discountAmt + "元，减" + row.discountActivityAmt + "元";
      }
      return timeString;
    },
  },
};
</script>
<style>
</style>