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
      :model="queryForm"
      ref="queryForm"
      :inline="true"
      label-width="88px"
    >
      <el-form-item label="设备类型" prop="deviceType">
        <el-select
          v-model="queryForm.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="queryForm.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="equipmentList">
      <af-table-column label="优惠" align="center" prop="deviceType">
        <template slot-scope="scope">
          {{
            scope.row.deviceType == "1"
              ? "小票打印机"
              : scope.row.deviceType == "2"
              ? "POS"
              : "不明设备"
          }}
        </template>
      </af-table-column>
      <af-table-column label="优惠券名称" align="center" prop="deviceNo" />
      <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)"
            >修改</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="getList"
      :autoScroll="true"
    />

    <!-- 添加或修改油站设备管理对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="600px"
      append-to-body
      status-icon
    >
      <el-form
        ref="dialogForm"
        :model="dialogForm"
        :rules="rules"
        label-width="180px"
      >
        <el-form-item label="优惠劵名称(油站备注)" prop="couponName">
          <input
            type="text"
            class="form-control"
            v-model="queryParams.couponName"
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item label="优惠劵内容(用户展示)" prop="couponDetails">
          <input
            type="text"
            class="form-control"
            v-model="queryParams.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="queryParams.couponThresholdAmt"
              style="width: 100px"
            />
            元 可用
          </div>
        </el-form-item>

        <el-form-item label="优惠券类型" prop="couponType">
          <el-radio-group v-model="queryParams.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="queryParams.couponType == 1 ||queryParams.couponType == 2"
        >
          <div v-if="queryParams.couponType == 1">
            固定面值—<input
              type="text"
              class="form-control d-inline"
              v-model.number="queryParams.couponAmt"
              style="width: 100px"
            />
            元
          </div>
          <div v-if="queryParams.couponType == 2">
            折扣比例—<input
              type="text"
              class="form-control d-inline"
              v-model.number="queryParams.couponAmt"
              style="width: 100px"
            />
            %
          </div>
        </el-form-item>
        <el-form-item label="优惠券适用油品" prop="oilNameList">
          <el-checkbox-group v-model="queryParams.oilNameList">
            <el-checkbox label="92#"></el-checkbox>
            <el-checkbox label="93#"></el-checkbox>
            <el-checkbox label="94#"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="优惠券有效期" prop="effectiveTimeType">
          <div>
            <div>
              <el-radio-group v-model="queryParams.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="queryParams.effectiveTimeType == 1">
                <el-date-picker
                  style="margin: 0px 10px; width: 300px"
                  v-model="queryParams.dateRangeCreatedDate"
                  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="queryParams.effectiveTimeType == 2" style="margin-left: 20px">
                自用户领取后
                <input
                  type="text"
                  class="form-control d-inline"
                  v-model.number="queryParams.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="queryParams.couponNum"
            style="width: 100px"
          />
          张
        </el-form-item>
        <el-form-item label="单人可持有数量" prop="couponHoldNum">
          单个用户最多拥有 
          <input
            type="text"
            class="form-control d-inline"
            v-model.number="queryParams.couponHoldNum"
            style="width: 100px"
          />
           张优惠券
        </el-form-item>
        <el-form-item label="累计可拥有数量" prop="couponReceiveNum">
          单个用户累计可以拥有 
          <input
            type="text"
            class="form-control d-inline"
            v-model.number="queryParams.couponReceiveNum"
            style="width: 100px"
          />
          张优惠券
        </el-form-item>
        <el-form-item label="优惠券的核销方" prop="couponType" v-if="queryParams.couponType == 3">
          （自己的站点也是核销商）
        </el-form-item>
        <div v-if="queryParams.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', 1, 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', 1, 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 { addInfo,verificationList } from "@/api/coupon";

export default {
  name: "Station_Equipment",
  data() {
    let validateGunNo = (rule, value, callback) => {
      callback();
    };
    return {
      pageStatus: 4,
      // 油站设备管理表格数据
      queryParams: {
        couponName: "",
        couponDetails:'',
        couponThresholdAmt: 0,
        couponType: "1",
        couponAmt: 0,
        oilNameList: [],
        effectiveTimeType: "", //有效时间类型： 1，固定时间；2，领取后x天内有效
        effectiveDayNum: 3,
        couponHoldNum: 2,
        couponReceiveNum: 1,
        couponNum: 100,
        status: 1,
        verificationList: [2,5,7],
      },
      couponList: [{
        deptId: 1,
        deptName:'固定1'
      },{
        deptId: 2,
        deptName:'油站2'
      },{
        deptId: 3,
        deptName:'固定3'
      },{
        deptId: 4,
        deptName:'油站4'
      },{
        deptId: 5,
        deptName:'固定5'
      },{
        deptId: 6,
        deptName:'油站6'
      },{
        deptId: 7,
        deptName:'油站7'
      }],
      equipmentList: [],
      // 油枪复选
      allGunList: [],
      // 已选的油枪
      checkedGunList: [],
      //设备状态
      deviceStatusOptions: [],
      //设备类型
      deviceTypeOptions: [],
      stationOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 总条数
      total: 100,
      leftQuery:{},
      rightQuery:{},
      leftData:[],
      rightData:[],
      moveRightData: [],
      moveLeftData:[],
      // 查询参数
      queryForm: {
        pageNum: 1,
        pageSize: 10, // 初始值只能比10大
        deviceNo: null,
        deviceSerialNum: null, // 设备密钥
      },
      // 表单校验
      rules: {

      },
    };
  },
  created() {
    console.log("111111111111111111111")

    this.init();
    this.setPageStatus();
  },
  computed: {
    toggleable(){
      if(this.moveRightData.length === 0 && this.moveLeftData.length === 0){
        return true;
      }
      return false;
    },
    selectedCouponList(){
      return this.couponList.filter((ele)=>{
        return this.queryParams.verificationList.includes(ele.deptId)
      })
    },
    unselectedCouponList(){
      return this.couponList.filter((ele)=>{
        return !!!this.queryParams.verificationList.includes(ele.deptId)
      })
    },
    getTodayDateString(){
      const today = new Date()
      // const day = today.getD()
      return 
    },
    posList() {
      // 排除其他pos已经添加过的
      const temp = this.allGunList.filter((item) => {
        let flag = false;
        this.equipmentList.map((ele) => {
          if (ele.deviceType == 2) {
            if (ele.gunNo.split(",").includes(item.oilGunNo)) {
              flag = true;
              return;
            }
          }
        });
        return flag;
      });
      // 查找自己的
      const temp2 = this.allGunList.filter((item) => {
        let flag = true;
        temp.map((ele) => {
          if (item.oilGunNo == ele.oilGunNo) {
            flag = false;
          }
        });
        return flag;
      });
      return this.currentList.concat(temp2);

    },
    printList() {
      const temp = this.allGunList.filter((item) => {
        let flag = false;
        this.equipmentList.map((ele) => {
          if (ele.deviceType == 1) {
            if (ele.gunNo.split(",").includes(item.oilGunNo)) {
              flag = true;
              return;
            }
          }
        });
        return flag;
      });
      const temp2 = this.allGunList.filter((item) => {
        let flag = true;
        temp.map((ele) => {
          if (item.oilGunNo == ele.oilGunNo) {
            flag = false;
          }
        });
        return flag;
      });
      return this.currentList.concat(temp2);
    },
  },
  methods: {
    getVerificationList(){
      verificationList({
        pageNum: 1,
        pageSize: 1000
      }).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("亲，拉取核销机构失败~")
      })
    },
    toggleLabel(){
      if(this.moveLeftData.length !== 0){
        this.queryParams.verificationList = this.queryParams.verificationList.filter((ele)=>{
          return ele  != this.moveLeftData
        })
        this.queryParams = {...this.queryParams}
        return;
      }
      if(this.moveRightData.length !== 0){
        this.queryParams.verificationList = [...new Set(this.queryParams.verificationList.concat(this.moveRightData))].filter((ele)=>{
          return !!ele
        })
        this.queryParams = {...this.queryParams}
        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.getList();
      this.getVerificationList();
      //字典设备状态
      this.getDicts("device_status").then((response) => {
        this.deviceStatusOptions = response.data;
      });
      //字典设备类型
      this.getDicts("device_type").then((response) => {
        this.deviceTypeOptions = response.data;
      });
      listGun({
        stationId: this.deptId,
      }).then((response) => {
        this.allGunList = response.rows;
      });
    },
    setPageStatus() {
      this.queryPageStatus([2]).then((res) => {
        this.pageStatus = res;
      });
    },
    /** 查询油站设备管理列表 首页表单 */
    getList() {
      listManage(this.queryForm).then((response) => {
        this.equipmentList = response.rows;
        this.total = response.total;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryForm.pageNum = 1;
      this.getList();
    },
    deviceNoInput(value) {
      this.dialogForm.posQueue = value;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.updateAble = false;
      this.currentList = [];
      this.title = "添加油站设备管理";
      this.dialogForm = {
        checkedGunList: [],
        deviceStatus: "1",
        deviceType: "1",
        posFanoutExchange: "posFanoutExchange-" + this.deptId,
      };
      this.open = true;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      // 查找自己已经选中的枪号
      this.updateAble = true;
      this.currentList = this.allGunList.filter((ele) => {
        return row.gunNo.split(",").includes(ele.oilGunNo);
      });
      let checkedGunList;
      // 将自己有的抢号 默认勾选
      if (Object.prototype.toString.call(row.gunNo) === "[object String]") {
        checkedGunList = [...new Set(row.gunNo.split(","))].filter((ele) => {
          return ele.toString().trim() !== "";
        });
      } else {
        checkedGunList = [];
      }
      this.dialogForm = { ...row, checkedGunList };
      this.title = "修改油站设备管理";
      this.open = true;
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["dialogForm"].validate((valid) => {
        if (valid) {
          //this.dialogForm.gunNo = this.dialogForm.checkedGunList.toString();
          addInfo(this.queryParams).then((res) => {
            console.log(res)
          })
        }
      });
    },
    /** 删除按钮操作 */
    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>