SAAS-FRONTEND/src/views/coupon/Coupon_Statistics/index.vue

<template>
  <PermissionContainer
    :jiBieArr="[1, 2]"
    :type="3"
    :tipArr="[
      ,
      '优惠券功能只对集团和站点级别开放',
      '因为集团上关于优惠券的共享配置，此级没有配置权限',
      ,
      '您暂未启动优惠券功能',
    ]"
  >
    <div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="实时发放" name="realTime" :key="'info'">
          <child1></child1>
        </el-tab-pane>
        <el-tab-pane label="按发放方式" name="issue" :key="'issue'">
          <child2></child2>
        </el-tab-pane>
        <el-tab-pane label="按优惠券类" name="model" :key="'pay'">
          <child3></child3>
        </el-tab-pane>
      </el-tabs>
    </div>
  </PermissionContainer>
</template>

<script>
import {
  listManage,
  getManage,
  delManage,
  addManage,
  updateManage,
  exportManage,
  changeManageStatus,
} from "@/api/station/manage";
import { listPrice } from "@/api/station/price";

import tabZujianChild1 from "./realTime.vue";
import tabZujianChild2 from "./issue.vue";
import tabZujianChild3 from "./model.vue";

import Vue from "vue";
import VueClipboard from "vue-clipboard2";

import Qr from "@/components/QrCode";
import Base64 from "@/utils/base64";

Vue.use(VueClipboard);

import {
  addInfo,
  listInfo,
  updateInfo,
  changeCouponStatus,
  addIssue,
  listIssue,
  upIssueStatus,
} from "@/api/coupon";
import SelectDay from "@/components/SelectDay";
import settings from "@/settings";

export default {
  name: "Coupon_CreateIssue",
  data() {
    let validateGunNo = (rule, value, callback) => {
      callback();
    };
    let validateAvailableControl = (rule, value, callback) => {
      if (
        this.createForm.availableControl == 1 ||
        this.createForm.availableControl == 2
      ) {
        if (this.createForm.cycleDaysList.length == 0) {
          callback(new Error("请选择时间"));
          return;
        }
      }
      if (this.createForm.availableControl == 3) {
        if (this.createForm.appointedDaysList.length == 0) {
          callback(new Error("请选择日期"));
          return;
        }
      }
      callback();
    };
    let validateCouponIssueRelationList = (rule, value, callback) => {
      if (this.createForm.couponIssueRelationList.length == 0) {
        callback(new Error("请选择优惠券"));
      }
      callback();
    };
    return {
      activeName: "realTime",
      couponEnabledFlag: "1",
      exportQrDialog: false,
      pageStatus: 4,
      createForm: {
        issueRemark: "",
        issueName: "",
        showIdList: [],
        availableControl: "0",
        appointedDaysList: [],
        cycleDaysList: [],
        issueType: "",
        discountThresholdAmt: "0",
        couponIssueRelationList: [],
        giveLimit: 9,
        giveCount: 999999,
      },
      currentExport: {
        text: "error",
        type: "你好",
        name: "二维码",
      },
      couponList: [],
      oilNameList: [],
      allVerificationList: [],
      equipmentList: [],
      // 油枪复选
      allGunList: [],
      // 已选的油枪
      checkedGunList: [],
      //设备状态
      deviceStatusOptions: [],
      //设备类型
      deviceTypeOptions: [],
      stationOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 总条数
      total: 100,
      leftQuery: {},
      rightQuery: {},
      leftData: [],
      rightData: [],
      moveRightData: [],
      moveLeftData: [],
      // 查询参数
      queryForm: {
        pageNum: 1,
        pageSize: 10, // 初始值只能比10大
      },
      // 表单校验
      rules: {
        availableControl: [
          {
            required: true,
            message: "请选择有效期内时间控制",
            trigger: "change",
          },
          { validator: validateAvailableControl, trigger: "change" },
        ],
        couponIssueRelationList: [
          {
            required: true,
            message: "请选择优惠券",
            trigger: "change",
          },
          { validator: validateCouponIssueRelationList, trigger: "change" },
        ],
      },
      day: [],
      cycle: [],
      issueList: [],
      timeSelect: [
        ,
        ["周天", "周一", "周二", "周三", "周四", "周五", "周六"],
        [
          "1号",
          "2号",
          "3号",
          "4号",
          "5号",
          "6号",
          "7号",
          "8号",
          "9号",
          "10号",
          "11号",
          "12号",
          "13号",
          "14号",
          "15号",
          "16号",
          "17号",
          "18号",
          "19号",
          "20号",
          "21号",
          "22号",
          "23号",
          "24号",
          "25号",
          "26号",
          "27号",
          "28号",
          "29号",
          "30号",
          "31号",
        ],
      ],
    };
  },
  components: {
    SelectDay: SelectDay,
    Qr: Qr,
    VueClipboard: VueClipboard,
    child1: tabZujianChild1,
    child2: tabZujianChild2,
    child3: tabZujianChild3,
  },

  created() {
    console.log("哈哈");
    console.log("settings", settings);
    // this.init();
    this.getCoupon();
    // this.setPageStatus();
    this.getIssueList();
  },
  computed: {
    toggleable() {
      if (this.moveRightData.length === 0 && this.moveLeftData.length === 0) {
        return true;
      }
      return false;
    },
    selectedCouponList() {
      return this.couponList.filter((ele) => {
        if (this.createForm.couponIssueRelationList == null) {
          this.createForm.couponIssueRelationList = [];
        }
        return this.createForm.couponIssueRelationList.includes(ele.id);
      });
    },
    unselectedCouponList() {
      return this.couponList.filter((ele) => {
        if (this.createForm.couponIssueRelationList == null) {
          this.createForm.couponIssueRelationList = [];
        }
        return !!!this.createForm.couponIssueRelationList.includes(ele.id);
      });
    },
    getTodayDateString() {
      const date = new Date();
      let y = date.getFullYear();
      let m = date.getMonth().toString();
      let s = date.getDate().toString();
      m = "" + (m.length == 1 ? "0" : "") + m;
      s = "" + (s.length == 1 ? "0" : "") + s;
      console.log("" + h + ":" + m + ":" + s);
      return "" + y + ":" + m + ":" + s;
    },
  },
  methods: {
    onCopySuccess() {
      this.msgSuccess("网址已经拷贝到剪切板");
    },
    onCopyError() {
      this.msgError("网址拷贝失败，请手动复制");
    },
    // exportUrl(url){
    //   this.currentExport.name = emp.personnelName;
    //   this.currentExport.type = 1;

    //   const encodeStr = "e" + emp.personnelId + "/l" + this.currentExport.labelId + "/";
    //   const encodedStr = this.base.encode(encodeStr);
    //   const trimEqualStr = encodedStr.replace(/={1,}$/g, "");
    //   this.currentExport.text = "https://goto.huijy.net/" + this.deptId + "/" + trimEqualStr;
    //   this.exportQrDialog = true;
    // },
    handleExport(row) {
      this.currentExport.name = row.issueName;
      const base64 = Base64.getInstance();
      const encodeStr = "i" + row.id;
      const encodedStr = base64.encode(encodeStr);
      const trimEqualStr = encodedStr.replace(/={1,}$/g, "");
      this.exportQrDialog = true;
      this.currentExport.text =
        settings.baseURL + this.deptId + "/" + trimEqualStr;
    },
    downloadImg() {
      console.log("");
    },
    translateTime(row) {
      let timeString = "";
      const availableControleType = row.availableControl;
      if (availableControleType == 0) {
        return "用户一直都可以领取";
      }
      timeString = "用户只能在";
      if (availableControleType == 1) {
        timeString += "每周的";
      }
      if (availableControleType == 2) {
        timeString += "每月的";
      }
      if (availableControleType == 3) {
        timeString += "指定的日期 ";
      }
      if (availableControleType == 1 || availableControleType == 2) {
        row.cycleDaysList.forEach((ele) => {
          timeString += this.timeSelect[availableControleType][ele] + "、";
        });
      } else if (availableControleType == 3) {
        timeString += row.appointedDaysList.toString();
      }

      timeString = timeString.replace(/(、)$/g, "") + "可以领取劵";
      return timeString;
    },
    getIssueList() {
      listIssue(this.queryForm)
        .then((res) => {
          if (res.code == 200) {
            if (res.rows == null) {
              this.total = 0;
              this.issueList = [];
            } else {
              this.total = res.total;
              this.issueList = res.rows;
            }
          } else {
            throw new Error("");
          }
        })
        .catch((err) => {
          this.msgError("亲，拉取领取方式列表失败~");
        });
    },
    getCoupon() {
      listInfo({
        pageNum: 1,
        pageSize: 1000,
        status: 1,
      })
        .then((res) => {
          if (res.code == 200) {
            if (res.rows == null) {
              this.couponList = [];
            } else {
              this.couponList = res.rows;
            }
          } else {
            throw new Error("");
          }
        })
        .catch((err) => {
          this.msgError("亲，拉取优惠券列表失败~");
        });
    },
    availableControlChange() {
      this.createForm.appointedDaysList = [];
      this.createForm.cycleDaysList = [];
      this.createForm = { ...this.createForm };
    },
    handleMoveLabel(direction, row) {
      console.log(row);
      if (this.createForm.couponIssueRelationList == null) {
        this.createForm.couponIssueRelationList = [];
      }

      if (direction == "right") {
        this.createForm.couponIssueRelationList.push(row.id);
      } else {
        this.createForm.couponIssueRelationList =
          this.createForm.couponIssueRelationList.filter((ele) => {
            return ele != row.id;
          });
      }
    },
    handleFlagChange() {
      const that = this;
      let text = this.couponEnabledFlag === "1" ? "启用" : "停用";
      this.$confirm('确认要"' + text + '"优惠券功能吗?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return changeCouponStatus({
            deptId: that.deptId,
            couponEnabledFlag: that.couponEnabledFlag,
          });
        })
        .then(() => {
          that.msgSuccess(text + "成功");
        })
        .catch(function () {
          that.couponEnabledFlag = that.couponEnabledFlag === "0" ? "1" : "0";
        });
    },
    handleStatusChange(row) {
      let text = row.status === "1" ? "启用" : "停用";
      this.$confirm(
        '确认要"' + text + '""' + row.issueName + '"发放方式吗?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          return upIssueStatus({
            id: row.id,
            status: row.status,
          });
        })
        .then(() => {
          this.msgSuccess(text + "成功");
        })
        .catch(function () {
          row.status = row.status === "0" ? "1" : "0";
        });
    },
    toggleLabel() {
      if (this.moveLeftData.length !== 0) {
        this.createForm.couponIssueRelationList =
          this.createForm.couponIssueRelationList.filter((ele) => {
            return ele != this.moveLeftData;
          });
        this.createForm = { ...this.createForm };
        return;
      }
      if (this.moveRightData.length !== 0) {
        this.createForm.couponIssueRelationList = [
          ...new Set(
            this.createForm.couponIssueRelationList.concat(this.moveRightData)
          ),
        ].filter((ele) => {
          return !!ele;
        });
        this.createForm = { ...this.createForm };
        return;
      }
      return;
    },
    handleLeftChange(val) {
      let changeArr = [];
      val.map((ele) => {
        changeArr.push(ele.id);
      });
      console.log(changeArr);
      this.moveLeftData = [];
      this.moveRightData = changeArr;
      // console.log(this.moveRightData);
      this.$refs.rightTable.clearSelection();
    },
    handleRightChange(val) {
      let changeArr = [];
      val.map((ele) => {
        changeArr.push(ele.id);
      });
      this.moveLeftData = changeArr;
      this.moveRightData = [];
      this.$refs.leftTable.clearSelection();
    },
    init() {
      this.getOilList();
      this.getCoupon();
      this.getVerificationList();
    },
    setPageStatus() {
      this.queryPageStatus([2]).then((res) => {
        this.pageStatus = res;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.createForm.pageNum = 1;
      this.getList();
    },
    deviceNoInput(value) {
      this.dialogForm.posQueue = value;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("createForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.createForm = {
        issueRemark: "",
        issueName: "",
        showIdList: [],
        availableControl: "0",
        appointedDaysList: [],
        cycleDaysList: [],
        issueType: "",
        discountThresholdAmt: "0",
        couponIssueRelationList: [],
        giveLimit: 9,
        giveCount: 999999,
      };
      this.title = "添加优惠券";
      // this.createForm = {
      //   couponName: "",
      //   couponDetails: "",
      //   couponThresholdAmt: 0,
      //   couponType: "1",
      //   couponAmt: 0,
      //   oilNameList: [],
      //   effectiveTimeType: "",
      //   effectiveTime: [],
      //   effectiveDayNum: 30,
      //   couponHoldNum: 1,
      //   couponReceiveNum: 100,
      //   couponNum: 100,
      //   status: "1",
      //   couponIssueRelationList: [],
      //   isCardFlag: "1",
      //   isGradeFlag: "1",
      //   isMarketFlag: "1",
      // };
      this.open = true;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      // // 查找自己已经选中的枪号
      this.createForm = JSON.parse(JSON.stringify(row));
      this.title = "修改油站设备管理";
      this.open = true;
    },

    /** 提交按钮 */
    submitForm() {
      console.log(123);
      this.$refs["dialogForm"].validate((valid) => {
        if (valid) {
          if (!!this.createForm.id) {
            updateIssue(this.createForm)
              .then((res) => {
                if (res.code == 200) {
                  this.msgSuccess("亲，修改成功了~");
                  this.getIssueList();
                  this.open = false;
                } else {
                  throw new Error("");
                }
              })
              .catch((err) => {
                this.msgError("修改失败了呀~");
              });
          } else {
            addIssue(this.createForm)
              .then((res) => {
                if (res.code == 200) {
                  this.msgSuccess("亲，新增成功了~");
                  this.getIssueList();
                  this.open = false;
                } else {
                  throw new Error("");
                }
              })
              .catch((err) => {
                this.msgError("创建失败了~");
              });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const deviceIds = row.deviceId;
      this.$confirm("是否确认删除油站设备管理", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delManage(deviceIds);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        });
    },
  },
};
</script>
<style lang="scss">
.el-transfer__buttons {
}
</style>