SAAS-FRONTEND/src/views/coupon/Coupon_Statistics.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">
    <div>
      <el-form
        :model="createForm"
        ref="createForm"
        :inline="true"
        label-width="88px"
      >
        <!--
        <el-form-item label="设备类型" prop="deviceType">
          <el-select
            v-model="createForm.deviceType"
            clearable
            placeholder="请选择"
          >
            <el-option label="小票打印机" value="1"></el-option>
            <el-option label="POS" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="密钥" prop="deviceSerialNum">
          <el-input
            v-model="createForm.deviceSerialNum"
            placeholder="请输入设备密钥"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
-->
        <el-form-item>
          <!--
          <el-button
            type="cyan"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button
            type="info"
            icon="el-icon-refresh"
            size="mini"
            @click="resetQuery"
            >重置</el-button
          >
          -->
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            >新增</el-button
          >
        </el-form-item>
      </el-form>
      <el-table :data="issueList">
        <af-table-column type="expand">
          <template slot-scope="props">
            <el-table
              :data="props.row.couponList"
              :show-header="false"
              :highlight-current-row="false"
              style="width: 90vw"
            >
              <af-table-column label="名城" align="left">
                <template slot-scope="scope">
                  {{ "优惠券：" }}<b>{{ scope.row.couponRemark }}</b>
                </template>
              </af-table-column>
              <af-table-column label="卡片类型" align="left">
                <template slot-scope="scope">
                  {{
                    scope.row.couponType == 1
                      ? "现金劵" + "--面值：" + scope.row.couponAmt + "元"
                      : ""
                  }}
                  {{
                    scope.row.couponType == 2
                      ? "折扣券" + "--折扣：" + scope.row.couponAmt + "% "
                      : ""
                  }}
                  {{
                    scope.row.couponType == 3
                      ? "兑换券" + "--商品：" + scope.row.couponName
                      : ""
                  }}
                </template>
              </af-table-column>
              <af-table-column label="状态" align="left">
                <template slot-scope="scope">
                  {{ scope.row.status == "1" ? "启用状态" : "" }}
                  {{ scope.row.status == "0" ? "停用状态" : "" }}
                </template>
              </af-table-column>
            </el-table>

            <!--
            <el-table :data="props.row.couponIssueRelations">
              <af-table-column
                label="优惠券标识"
                align="left"
                prop="couponRemark"
                disabled
              />
              <af-table-column label="状态" align="left">
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.status"
                    active-value="1"
                    inactive-value="0"
                    @change="handleStatusChange(scope.row)"
                  ></el-switch>
                </template>
              </af-table-column>
              <af-table-column label="卡片类型" align="left">
                <template slot-scope="scope">
                  {{
                    scope.row.couponType == 1
                      ? "现金劵" + "--面值：" + scope.row.couponAmt + "元"
                      : ""
                  }}
                  {{
                    scope.row.couponType == 2
                      ? "折扣券" + "--折扣：" + scope.row.couponAmt + "% "
                      : ""
                  }}
                  {{
                    scope.row.couponType == 3
                      ? "兑换券" + "--商品：" + scope.row.couponName
                      : ""
                  }}
                </template>
              </af-table-column>
              <af-table-column
                label="优惠券说明"
                align="left"
                prop="couponDetails"
              />
              <af-table-column label="使用门槛" align="left">
                <template slot-scope="scope">
                  {{
                    scope.row.couponType == 1 || scope.row.couponType == 2
                      ? scope.row.couponThresholdAmt == 0
                        ? "无门槛"
                        : "满" + scope.row.couponThresholdAmt + "元可用"
                      : ""
                  }}
                  {{ scope.row.couponType == 3 ? "------------" : "" }}
                </template>
              </af-table-column>
              <af-table-column label="适用" align="left">
                <template slot-scope="scope">
                  {{
                    scope.row.couponType == 1 || scope.row.couponType == 2
                      ? "适用油品：" + (scope.row.oilNameList || []).toString()
                      : ""
                  }}
                  {{ scope.row.couponType == 3 ? "核销机构：" : "" }}
                </template>
              </af-table-column>

              <af-table-column label="使用状态" align="left">
                <template slot-scope="scope">
                  {{
                    "共生成了" +
                    scope.row.couponNum +
                    "张，已领取" +
                    scope.row.couponCumulativeNum +
                    "张，已使用" +
                    scope.row.couponUseNum +
                    "张"
                  }}
                </template>
              </af-table-column>

              <af-table-column label="有效期内使用限制" align="left">
                <template slot-scope="scope">
                  {{
                    (scope.row.effectiveTimeType == 1
                      ? scope.row.effectiveTime[0] +
                        "到" +
                        scope.row.effectiveTime[1]
                      : "用户领取" + scope.row.effectiveDayNum + "天内有效") +
                    "内有效"
                  }}
                  {{ translateTime(scope.row) }}
                </template>
              </af-table-column>

              <af-table-column label="领取限制" align="left">
                <template slot-scope="scope">
                  {{
                    "单用户最多持有" +
                    scope.row.couponHoldNum +
                    "张，累计可拥有" +
                    scope.row.couponReceiveNum +
                    "张"
                  }}
                </template>
              </af-table-column>

              <af-table-column label="优惠叠加" align="left">
                <template slot-scope="scope">
                  {{
                    scope.row.couponType == 1 || scope.row.couponType == 2
                      ? ["不", ""][scope.row.isCardFlag] +
                        "可用电子卡，" +
                        ["不", ""][scope.row.isGradeFlag] +
                        "可用等级优惠，" +
                        ["不", ""][scope.row.isMarketFlag] +
                        "可用优惠方案"
                      : ""
                  }}
                  {{ scope.row.couponType == 3 ? "------------" : "" }}
                </template>
              </af-table-column>

              <af-table-column
                label="操作"
                align="left"
                class-name="small-padding fixed-width"
                width="120px"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleUpdate(scope.row)"
                    v-if="scope.row.editFlag"
                    >修改</el-button
                  >
                </template>
              </af-table-column>
            </el-table>
            -->
          </template>
        </af-table-column>

        <af-table-column label="发放方式标识" align="left" prop="issueRemark" />
        <af-table-column label="状态" align="left">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-value="1"
              inactive-value="0"
              @change="handleStatusChange(scope.row)"
            ></el-switch>
          </template>
        </af-table-column>
        <af-table-column label="活动名称" align="left" prop="issueName" />
        <af-table-column label="类型" align="left">
          <template slot-scope="scope">
            {{ scope.row.issueType == "1" ? "消费发放" : "" }}
            {{ scope.row.issueType == "2" ? "网页方式、二维码-静态码" : "" }}
            {{ scope.row.issueType == "3" ? "支付成功后的领取位" : "" }}
          </template>
        </af-table-column>
        <af-table-column label="操作" align="left">
          <template slot-scope="scope">
            {{
              scope.row.issueType == "1" || scope.row.issueType == "3"
                ? "-------"
                : ""
            }}
            <el-button
              size="mini"
              type="text"
              icon="el-icon-download"
              @click="handleExport(scope.row)"
              v-if="scope.row.issueType == '2'"
              >导出二维码、网址</el-button
            >
          </template>
        </af-table-column>
        <af-table-column label="发放门槛" align="left">
          <template slot-scope="scope">
            {{
              scope.row.issueType == "1"
                ? scope.row.discountThresholdAmt == "0"
                  ? "无门槛，消费都发放"
                  : "满" + scope.row.discountThresholdAmt + "元发放"
                : ""
            }}
            {{ scope.row.issueType != "1" ? "-------" : "" }}
          </template>
        </af-table-column>
        <af-table-column label="领取限制" align="left">
          <template slot-scope="scope">
            {{ scope.row.issueType == "1" ? "-------" : "" }}
            {{
              scope.row.issueType != "1"
                ? "单个用户能进入这个领取界面" +
                  scope.row.giveCount +
                  "次，一次可以领取" +
                  scope.row.giveLimit +
                  "张优惠券"
                : ""
            }}
          </template>
        </af-table-column>
        <af-table-column label="可领取时间段" align="left">
          <template slot-scope="scope">
            {{ translateTime(scope.row) }}
          </template>
        </af-table-column>
        <!-- <af-table-column label="面值" align="left" prop="gunNo" /> -->
        <!-- <af-table-column label="有效期" align="left" prop="deviceFactory" /> -->
        <!--
        <af-table-column
          label="操作"
          align="left"
          class-name="small-padding fixed-width"
          width="120px"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              >修改</el-button
            >
          </template>
        </af-table-column>
        -->
      </el-table>
      <pagination
        :hidden="total > 0 ? false : true"
        :total="total"
        :page.sync="queryForm.pageNum"
        :limit.sync="queryForm.pageSize"
        @pagination="getIssueList"
        :autoScroll="true"
      />
    </div>

    <!-- 添加或修改油站设备管理对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="600px"
      append-to-body
      status-icon
    >
      <el-form
        ref="dialogForm"
        :model="createForm"
        :rules="rules"
        label-width="180px"
      >
        <el-form-item
          label="发放标识(给油站备注)"
          prop="issueRemark"
          :rules="{
            required: true,
            message: '请填入方案方式标识',
            trigger: 'blur',
          }"
        >
          <input
            type="text"
            class="form-control"
            v-model="createForm.issueRemark"
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item
          label="活动名称(给用户展示)"
          prop="issueName"
          :rules="{
            required: true,
            message: '请填入活动名称',
            trigger: 'blur',
          }"
        >
          <input
            type="text"
            class="form-control"
            v-model="createForm.issueName"
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item
          label="发放类型"
          prop="issueType"
          :rules="{
            required: true,
            message: '请选择发放类型',
            trigger: 'change',
          }"
        >
          <el-radio-group v-model="createForm.issueType">
            <div>
              <el-radio label="1">消费发放</el-radio>
            </div>
            <div>
              <el-radio label="2">网页方式、二维码-静态码</el-radio>
            </div>
            <div>
              <el-radio label="3">支付成功后的领取位(只能设置一次)</el-radio>
            </div>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="能进入的次数"
          prop="giveCount"
          v-if="createForm.issueType != 1"
          :rules="{
            required: createForm.issueType != 1,
            message: '请填入能进入的次数',
            trigger: 'blur',
          }"
        >
          单个用户能进入这个领取界面
          <input
            type="text"
            class="form-control d-inline-block"
            v-model.number="createForm.giveCount"
            style="width: 80px"
          />
          次
        </el-form-item>

        <el-form-item
          label="一次能领取几张次数"
          prop="giveLimit"
          v-if="createForm.issueType != 1"
          :rules="{
            required: createForm.issueType != 1,
            message: '请填入一次能领取几张次数',
            trigger: 'blur',
          }"
        >
          用户进入后一次能领取<input
            type="text"
            class="form-control d-inline-block"
            v-model.number="createForm.giveLimit"
            style="width: 80px"
          />张
        </el-form-item>
        <el-form-item
          label="发放门槛"
          prop="discountThresholdAmt"
          v-if="createForm.issueType == 1"
        >
          消费达到
          <input
            type="text"
            class="form-control d-inline-block"
            v-model.number="createForm.discountThresholdAmt"
            style="width: 80px"
          />元时，系统自动发放
        </el-form-item>
        <el-form-item label="可领取时间段" prop="availableControl">
          <div>
            <el-radio-group
              v-model="createForm.availableControl"
              @change="availableControlChange"
            >
              <div>
                <div>
                  <el-radio label="0">一直都可用</el-radio>
                  <el-radio label="1">每周指定日</el-radio>
                </div>
                <div>
                  <el-radio label="2">每月指定日</el-radio>
                  <el-radio label="3">固定指定日</el-radio>
                </div>
              </div>
            </el-radio-group>
          </div>
          <div
            v-if="
              createForm.availableControl == 1 ||
              createForm.availableControl == 2 ||
              createForm.availableControl == 3
            "
            style="margin-top: 10px"
          >
            <select-day
              :type="createForm.availableControl"
              :day.sync="createForm.appointedDaysList"
              :cycle.sync="createForm.cycleDaysList"
            >
            </select-day>
          </div>
        </el-form-item>
        <el-form-item
          label="此领取方式下的优惠券"
          prop="couponIssueRelationList"
        >
          （用于用户领取）
        </el-form-item>

        <div>
          <el-col :span="11">
            <el-table
              :data="unselectedCouponList"
              border
              size="mini"
              :resizable="false"
              highlight-current-row
              height="500"
              @selection-change="handleLeftChange"
              disabled
              ref="leftTable"
            >
              >
              <el-table-column label="可选">
                <el-table-column
                  prop="phone"
                  label="姓名"
                  type="selection"
                ></el-table-column>
                <el-table-column
                  prop="couponRemark"
                  label="优惠券"
                ></el-table-column>
                <el-table-column label="添加" width="60px" align="center">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      icon="el-icon-circle-plus-outline"
                      class="underline btn24"
                      size="mini"
                      @click="handleMoveLabel('right', scope.row)"
                      >添加</el-button
                    >
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="2" style="text-align: center">
            <el-button
              type="primary"
              size="mini"
              @click="toggleLabel"
              style="
                margin-top: 200px;
                text-align: center;
                width: 30px;
                padding-right: 0;
                padding-left: 0;
              "
              :disabled="toggleable"
              >切换</el-button
            >
          </el-col>
          <el-col :span="11">
            <el-table
              :data="selectedCouponList"
              border
              size="mini"
              highlight-current-row
              :resizable="false"
              height="500"
              @selection-change="handleRightChange"
              :loading="true"
              ref="rightTable"
            >
              <el-table-column label="已选" :resizable="false">
                <el-table-column
                  prop="phone"
                  type="selection"
                ></el-table-column>
                <el-table-column
                  prop="couponRemark"
                  label="优惠券"
                ></el-table-column>
                <el-table-column label="移除" width="60px" align="center">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      icon="el-icon-remove-outline"
                      class="underline btn24"
                      size="mini"
                      @click="handleMoveLabel('left', scope.row)"
                      >移除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </el-col>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="exportQrDialog"
      width="600px"
      append-to-body
      title="导出标签"
    >
      <div>
        <qr
          :text="currentExport.text"
          @downloadImg="downloadImg"
          :name="currentExport.name + '活动二维码'"
        >
          <div>{{ currentExport.name }} 活动二维码<b></b></div>
        </qr>
        <!--
        <div
          style="text-align: center; margin-top: 15px"
          v-clipboard:copy="currentExport.text"
          v-clipboard:error="onCopyError"
          v-clipboard:success="onCopySuccess"
        >
          👇点击复制网址👇
        </div>
        -->
        <div
          style="text-align: center; margin-top: 15px"
          v-clipboard:copy="currentExport.text"
          v-clipboard:error="onCopyError"
          v-clipboard:success="onCopySuccess"
        >
          活动网址：{{ currentExport.text }}
        </div>
        <div
          style="text-align: center"
          v-clipboard:copy="currentExport.text"
          v-clipboard:error="onCopyError"
          v-clipboard:success="onCopySuccess"
        >
          👆点击复制网址👆
        </div>
      </div>
    </el-dialog>
  </div>
</template>

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

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 {
      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,
  },
  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>