SAAS-FRONTEND/src/views/coupon/Coupon_CreateCoupon.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>
      <el-form-item label="启动优惠劵" label-width="88px">
        <el-switch
          v-model="couponEnabledFlag"
          active-value="1"
          inactive-value="0"
          @change="handleFlagChange()"
        ></el-switch>
      </el-form-item>
      <hr />
    </el-form>
    <div v-if="couponEnabledFlag == 1">
      <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="couponList">
        <af-table-column label="优惠券名称" align="center" prop="couponName" />
        <af-table-column label="状态" align="center" width="100">
          <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="center" prop="gunNo" /> -->
        <!-- <af-table-column label="有效期" align="center" prop="deviceFactory" /> -->
        <af-table-column
          label="操作"
          align="center"
          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
            >
            <!-- <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(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="getCoupon"
        :autoScroll="true"
      />
    </div>
    <div v-else style="text-align:center">
      亲，您的油站暂未启动优惠券功能，呦~
    </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="couponName">
          <input
            type="text"
            class="form-control"
            v-model="createForm.couponName"
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item label="优惠劵内容(用户展示)" prop="couponDetails">
          <input
            type="text"
            class="form-control"
            v-model="createForm.couponDetails"
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item label="优惠劵使用条件" prop="couponThresholdAmt">
          <div>
            满
            <input
              type="text"
              class="form-control d-inline"
              v-model.number="createForm.couponThresholdAmt"
              style="width: 100px"
            />
            元 可用
          </div>
        </el-form-item>

        <el-form-item label="优惠券类型" prop="couponType">
          <el-radio-group v-model="createForm.couponType">
            <el-radio label="1">现金券</el-radio>
            <el-radio label="2">折扣劵</el-radio>
            <el-radio label="3">兑换劵</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="优惠金额"
          prop="couponAmt"
          v-if="createForm.couponType == 1 || createForm.couponType == 2"
        >
          <div v-if="createForm.couponType == 1">
            固定面值—<input
              type="text"
              class="form-control d-inline"
              v-model.number="createForm.couponAmt"
              style="width: 100px"
            />
            元
          </div>
          <div v-if="createForm.couponType == 2">
            折扣比例—<input
              type="text"
              class="form-control d-inline"
              v-model.number="createForm.couponAmt"
              style="width: 100px"
            />
            %
          </div>
        </el-form-item>
        <el-form-item
          label="优惠券适用油品"
          prop="oilNameList"
          v-if="createForm.couponType == 1 || createForm.couponType == 2"
        >
          <el-checkbox-group v-model="createForm.oilNameList">
            <el-checkbox
              :label="ele.oilName"
              v-for="ele in oilNameList"
              :key="ele.oilName"
            ></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="优惠券有效期" prop="effectiveTimeType">
          <div>
            <div>
              <el-radio-group v-model="createForm.effectiveTimeType">
                <el-radio label="1">固定时间段</el-radio>
                <el-radio label="2">固定天数</el-radio>
              </el-radio-group>
            </div>
            <div style="margin-top: 10px">
              <div v-if="createForm.effectiveTimeType == 1">
                <el-date-picker
                  style="margin: 0px 10px; width: 300px"
                  v-model="createForm.effectiveTime"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  size="mini"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </div>
              <div
                v-if="createForm.effectiveTimeType == 2"
                style="margin-left: 20px"
              >
                自用户领取后
                <input
                  type="text"
                  class="form-control d-inline"
                  v-model.number="createForm.effectiveDayNum"
                  style="width: 80px"
                />
                天内有效
              </div>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="生成优惠券的数量" prop="couponNum">
          共生成
          <input
            type="text"
            class="form-control d-inline"
            v-model.number="createForm.couponNum"
            style="width: 100px"
          />
          张
        </el-form-item>
        <el-form-item label="单人可持有数量" prop="couponHoldNum">
          单个用户最多拥有
          <input
            type="text"
            class="form-control d-inline"
            v-model.number="createForm.couponHoldNum"
            style="width: 100px"
          />
          张优惠券
        </el-form-item>
        <el-form-item label="累计可拥有数量" prop="couponReceiveNum">
          单个用户累计可以拥有
          <input
            type="text"
            class="form-control d-inline"
            v-model.number="createForm.couponReceiveNum"
            style="width: 100px"
          />
          张优惠券
        </el-form-item>

        <el-form-item
          label="用券时可用电子卡"
          prop="isCardFlag"
          v-if="createForm.couponType == 1 || createForm.couponType == 2"
        >
          <el-radio-group v-model="createForm.isCardFlag">
            <el-radio label="1">可以使用电子卡</el-radio>
            <el-radio label="0">不可用电子卡</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="用券时叠加等级优惠"
          prop="isGradeFlag"
          v-if="createForm.couponType == 1 || createForm.couponType == 2"
        >
          <el-radio-group v-model="createForm.isGradeFlag">
            <el-radio label="1">叠加等级优惠</el-radio>
            <el-radio label="0">不叠加等级优惠</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="用劵时叠加优惠方案"
          prop="isMakertFlag"
          v-if="createForm.couponType == 1 || createForm.couponType == 2"
        >
          <el-radio-group v-model="createForm.isMakertFlag">
            <el-radio label="1">叠加优惠方案</el-radio>
            <el-radio label="0">不叠加优惠方案</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          label="优惠券的核销方"
          prop="couponType"
          v-if="createForm.couponType == 3"
        >
          （自己的站点也是核销商）
        </el-form-item>
        <div v-if="createForm.couponType == 3">
          <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="deptName" 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="deptName" 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>
  </div>
</template>

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

import { addInfo, verificationList, listInfo, updateInfo, changeCouponStatus } from "@/api/coupon";
import { updateDept } from "@/api/system/dept";

export default {
  name: "Station_Equipment",
  data() {
    let validateGunNo = (rule, value, callback) => {
      callback();
    };
    return {
      couponEnabledFlag: "1",
      pageStatus: 4,
      // 油站设备管理表格数据
      createForm: {
        couponName: "",
        couponDetails: "",
        couponThresholdAmt: 0,
        couponType: "1",
        couponAmt: 0,
        oilNameList: [],
        effectiveTimeType: "", //有效时间类型： 1，固定时间；2，领取后x天内有效
        effectiveTime: [],
        effectiveDayNum: 30,
        couponHoldNum: 1,
        couponReceiveNum: 100,
        couponNum: 100,
        status: "1",
        verificationList: [],
        isCardFlag: "1",
        isGradeFlag: "1",
        isMakertFlag: "1",
      },
      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: {},
    };
  },
  created() {
    this.init();
    this.getCoupon();
    this.setPageStatus();
  },
  computed: {
    toggleable() {
      if (this.moveRightData.length === 0 && this.moveLeftData.length === 0) {
        return true;
      }
      return false;
    },
    selectedCouponList() {
      return this.allVerificationList.filter((ele) => {
        if(this.createForm.verificationList == null) {
          this.createForm.verificationList = [];
        }
        return this.createForm.verificationList.includes(ele.deptId);
      });
    },
    unselectedCouponList() {
      return this.allVerificationList.filter((ele) => {
        if(this.createForm.verificationList == null) {
          this.createForm.verificationList = [];
        }
        return !!!this.createForm.verificationList.includes(ele.deptId);
      });
    },
    getTodayDateString() {
      const today = new Date();
      return;
    },
  },
  methods: {
    handleMoveLabel(direction, row){
      console.log(row)
      if(this.createForm.verificationList == null) {
        this.createForm.verificationList = [];
      }

      if(direction == "right"){
        this.createForm.verificationList.push(row.deptId)
      }else{
        this.createForm.verificationList = this.createForm.verificationList.filter((ele)=>{
          return ele != row.deptId
        })
      }
    },
    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.couponName + '"该优惠券吗?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          return updateInfo({
            id: row.id,
            status: row.status,
          });
        })
        .then(() => {
          this.msgSuccess(text + "成功");
        })
        .catch(function () {
          row.status = row.status === "0" ? "1" : "0";
        });
    },
    getOilList() {
      listPrice()
        .then((res) => {
          if (res.code == 200) {
            this.oilNameList = res.rows || [];
          } else {
            throw new Error("");
          }
        })
        .catch((err) => {
          this.msgError("亲，拉取油品列表失败~");
        });
    },
    getCoupon() {
      listInfo({
        pageNum: 1,
        pageSize: 10,
      })
        .then((res) => {
          if (res.code == 200) {
            console.log(res);
            if (res.rows == null) {
              this.total = 0;
              this.couponList = [];
            } else {
              this.total = res.total;
              this.couponList = res.rows;
            }
          } else {
            throw new Error("");
          }
        })
        .catch((err) => {
          this.msgError("亲，拉取优惠券列表失败~");
        });
    },
    getVerificationList() {
      verificationList({
        pageNum: 1,
        pageSize: 1000,
      })
        .then((res) => {
          if (res.code == 200) {
            if (res.rows == null) {
              this.allVerificationList = [];
            } else {
              this.allVerificationList = res.rows;
            }
          } else {
            throw new Error("");
          }
        })
        .catch((err) => {
          this.msgError("亲，拉取核销机构失败~");
        });
    },
    toggleLabel() {
      if (this.moveLeftData.length !== 0) {
        this.createForm.verificationList =
          this.createForm.verificationList.filter((ele) => {
            return ele != this.moveLeftData;
          });
        this.createForm = { ...this.createForm };
        return;
      }
      if (this.moveRightData.length !== 0) {
        this.createForm.verificationList = [
          ...new Set(
            this.createForm.verificationList.concat(this.moveRightData)
          ),
        ].filter((ele) => {
          return !!ele;
        });
        this.createForm = { ...this.createForm };
        return;
      }
      return;
    },
    handleLeftChange(val) {
      let changeArr = [];
      val.map((ele) => {
        changeArr.push(ele.deptId);
      });
      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.deptId);
      });
      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.title = "添加优惠券";
      this.createForm = {
        couponName: "",
        couponDetails: "",
        couponThresholdAmt: 0,
        couponType: "1",
        couponAmt: 0,
        oilNameList: [],
        effectiveTimeType: "", 
        effectiveTime: [],
        effectiveDayNum: 30,
        couponHoldNum: 1,
        couponReceiveNum: 100,
        couponNum: 100,
        status: "1",
        verificationList: [],
        isCardFlag: "1",
        isGradeFlag: "1",
        isMakertFlag: "1",
      }
      this.open = true;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      // // 查找自己已经选中的枪号
      this.createForm = JSON.parse(JSON.stringify(row));
      this.title = "修改油站设备管理";
      this.open = true;
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["dialogForm"].validate((valid) => {
        if (valid) {
          if(!!this.createForm.id){
            updateInfo(this.createForm).then((res) => {
              if(res.code == 200){
                this.msgSuccess("亲，修改成功了~")
                this.getCoupon()
                this.open = false
              }else{
                throw new Error("");
              }
            }).catch((err) => {
              this.msgError("修改失败了呀~")
            });
          }else{
            addInfo(this.createForm).then((res) => {
              if(res.code == 200){
                this.msgSuccess("亲，新增成功了~")
                this.getCoupon()
                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>