dy-admin-manager/src/views/couponManager/couponUpdate.vue

<template>
  <div class="m-container">
    <h2>
      <el-page-header @back="onCancel" :content="title"></el-page-header>
    </h2>
    <!-- <h3 class="infoTitle">优惠券信息</h3>
    <el-divider></el-divider> -->
    <div class="m-core">
      <el-form :model="form" ref="form" class="form">
        <el-row>
          <el-col style="width: 395px">
            <el-form-item
              label="系统类型"
              prop="useSystem"
              :rules="[{ required: true, message: '系统类型' }]"
            >
              <el-select
                :disabled="isDisabled"
                placeholder="系统类型"
                v-model.trim="form.useSystem"
                filterable
                clearable
                style="width: 375px !important"
                @change="onUseSystemChange"
              >
                <el-option value="MALL" label="商城"></el-option>
                <el-option value="MEC" label="管乐迷"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col style="width: 395px">
            <el-form-item
              label="优惠券名称"
              prop="name"
              :rules="[{ required: true, message: '请输入优惠券名称' }]"
            >
              <el-input
                :disabled="isDisabled"
                v-model="form.name"
                placeholder="请输入优惠券名称"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col style="width: 395px">
            <el-form-item
              label="可用分部"
              prop="organId"
              :rules="[{ required: true, message: '请选择可用分部' }]"
            >
              <br />
              <select-all
                style="width: 375px !important"
                class="multiple"
                v-model.trim="form.organId"
                filterable
                multiple
                clearable
                placeholder="请选择分部"
              >
                <el-option
                  v-for="(item, index) in selects.branchs"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </select-all>
            </el-form-item>
          </el-col>
          <el-col style="width: 395px">
            <el-form-item
              label="描述"
              prop="description"
              :rules="[{ required: true, message: '请输入优惠券描述' }]"
            >
              <el-input
                :disabled="isDisabled"
                v-model="form.description"
                maxlength="20"
                type="textarea"
                :rows="3"
                show-word-limit
                placeholder="请输入优惠券描述，该描述会在优惠券上展示"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col style="width: 395px">
            <el-form-item
              label="领券方式"
              prop="issuanceType"
              :rules="[{ required: true, message: '领券方式' }]"
            >
              <el-select
                :disabled="isDisabled"
                placeholder="领券方式"
                v-model.trim="form.issuanceType"
                filterable
                clearable
                style="width: 375px !important"
              >
                <el-option :value="0" label="学员主动领取"></el-option>
                <el-option :value="1" label="后台手动发放"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col style="width: 395px">
            <el-form-item
              label="优惠券类型"
              prop="typeDetail"
              :rules="[{ required: true, message: '请选择优惠券类型' }]"
            >
              <el-select
                :disabled="isDisabled"
                placeholder="请选择优惠券类型"
                v-model.trim="form.typeDetail"
                filterable
                clearable
                style="width: 375px !important"
              >
                <el-option
                  v-for="item in coupontypeDetail"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <!-- <el-col style="width: 395px">
            <el-form-item
              label="优惠券类型"
              prop="type"
              :rules="[{ required: true, message: '请选择优惠券类型' }]"
            >
              <el-select
                :disabled="isDisabled"
                placeholder="优惠券类型"
                v-model.trim="form.type"
                filterable
                clearable
                @change="changeType"
                style="width: 375px !important"
              >
                <el-option
                  v-for="item in couponTypeList"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col style="width: 395px" v-if="form.type == 'FULL_REDUCTION'">
            <el-form-item
              label="满减金额"
              prop="fullAmount"
              :rules="[{ required: true, message: '请输入满减金额' }]"
            >
              <el-input
                v-model="form.fullAmount"
                placeholder="请输入满减金额"
                :disabled="isDisabled"
              >
                <template slot="append"
                  >元</template
                >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col style="width: 395px" v-if="form.type == 'FULL_REDUCTION'">
            <el-form-item
              label="面值"
              prop="faceValue"
              :rules="[{ required: true, message: '请输入面值' }]"
            >
              <el-input
                v-model="form.faceValue"
                placeholder="请输入面值"
                :disabled="isDisabled"
              >
                <template slot="append"
                  >元</template
                >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col style="width: 395px" v-if="form.type == 'DISCOUNT'">
            <el-form-item
              label="折扣"
              prop="faceValue"
              :rules="[{ required: true, message: '请输入折扣' }]"
            >
              <el-input
                v-model="form.faceValue"
                placeholder="请输入折扣"
                :disabled="isDisabled"
              >
                <template slot="append"
                  >%</template
                >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col style="width: 395px">
            <el-form-item
              label="有效期类型"
              prop="effectiveType"
              :rules="[{ required: true, message: '请选择有效期类型' }]"
            >
              <el-select
                style="width: 375px !important"
                placeholder="优惠券类型"
                v-model.trim="form.effectiveType"
                filterable
                clearable
                @change="changeEffectiveType"
                :disabled="isDisabled"
              >
                <el-option label="固定有效期天数" value="DAYS"></el-option>
                <el-option label="固定时间段" value="TIME_BUCKET"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col style="width: 395px" v-if="form.effectiveType == 'DAYS'">
            <el-form-item
              prop="deadline"
              :rules="[{ required: true, message: '请输入有效期天数' }]"
            >
              <span style="color: #606266"
                ><span style="color: #f56c6c">*</span>有效期天数
                <el-tooltip placement="top" popper-class="mTooltip">
                  <div slot="content">自领取之日起多少天有效</div>
                  <i
                    class="el-icon-question"
                    style="font-size: 18px; color: #f56c6c"
                  ></i> </el-tooltip
              ></span>
              <el-input
                v-model="form.deadline"
                placeholder="请输入有效期天数"
                :disabled="isDisabled"
              >
                <template slot="append"
                  >天</template
                >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col
            style="width: 395px"
            v-if="form.effectiveType == 'TIME_BUCKET'"
          >
            <el-form-item
              prop="effectiveTime"
              :rules="[{ required: true, message: '请选择有效期' }]"
            >
              <span style="color: #606266"
                ><span style="color: #f56c6c">*</span>有效期
                <el-tooltip placement="top" popper-class="mTooltip">
                  <div slot="content">优惠券可使用时间段</div>
                  <i
                    class="el-icon-question"
                    style="font-size: 18px; color: #f56c6c"
                  ></i> </el-tooltip
              ></span>
              <el-date-picker
                style="width: 100%"
                v-model="form.effectiveTime"
                :picker-options="{ firstDayOfWeek: 1 }"
                type="datetimerange"
                :default-time="['00:00:00', '23:59:59']"
                range-separator="-"
                start-placeholder="活动开始日期"
                end-placeholder="活动结束日期"
                :disabled="isDisabled"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col style="width: 395px">
            <el-form-item
              label="库存总量"
              prop="stockCount"
              :rules="[{ required: true, message: '请输入库存总量' }]"
            >
              <el-input
                :disabled="form.stockCount == -1"
                v-model="form.stockCount"
                placeholder="请输入库存总量"
              >
                <template slot="append"
                  >张</template
                >
              </el-input>
              <el-checkbox
                v-model="form.stockCount"
                :true-label="-1"
                false-label=""
                @change="
                  val => {
                    checkNo(val, 'stockCount');
                  }
                "
                >不限制</el-checkbox
              >
            </el-form-item>
          </el-col>

          <el-col style="width: 395px">
            <el-form-item
              prop="limitExchangeNum"
              :rules="[
                { required: true, message: '请输入领取上限' },
                {
                  pattern: /^[1-9][0-9]?$/,
                  message: '请输入1-99的正整数',
                  trigger: 'blur'
                }
              ]"
            >
              <span style="color: #606266">
                <span style="color: #f56c6c">*</span> 领取上限
                <el-tooltip placement="top" popper-class="mTooltip">
                  <div slot="content">用户可领取最大张数</div>
                  <i
                    class="el-icon-question"
                    style="font-size: 18px; color: #f56c6c"
                  ></i> </el-tooltip
              ></span>
              <el-input
                :disabled="isDisabled"
                v-model="form.limitExchangeNum"
                placeholder="请输入领取上限"
              >
                <template slot="append"
                  >张</template
                >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col style="width: 395px">
            <el-form-item
              label="领取时间"
              prop="getTime"
              :rules="[{ required: true, message: '请输入领取时间' }]"
            >
              <el-date-picker
                style="width: 100%"
                v-model="form.getTime"
                :picker-options="{ firstDayOfWeek: 1 }"
                type="datetimerange"
                :default-time="['00:00:00', '23:59:59']"
                range-separator="-"
                start-placeholder="活动开始日期"
                end-placeholder="活动结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" v-if="activeRow" @click="resetCoupon"
            >保存</el-button
          >
          <el-button type="primary" v-else @click="addCoupon">提交</el-button>
          <el-button type="danger" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { addSysCoupon, resetSysCoupon } from "./api.js";
import { couponTypeList, coupontypeDetailList } from "@/utils/searchArray";
import { getTimes } from "@/utils";
const mallTypeList = [
  {
    value: "MALLCOUPON",
    label: "商城"
  }
];
export default {
  data() {
    return {
      couponTypeList,
      coupontypeDetail: coupontypeDetailList,
      form: {
        useSystem: "",
        typeDetail: null,
        name: "",
        description: "",
        type: "FULL_REDUCTION",
        faceValue: "",
        fullAmount: "",
        effectiveType: "",
        effectiveTime: [],
        stockCount: "",
        warningStockNum: "",
        limitExchangeNum: "",
        getTime: [],
        organId: []
      },
      activeRow: null,
      isDisabled: false,
      title: "新增优惠券",
      warningStockNum: ""
    };
  },
  mounted() {
    this.$store.dispatch("setBranchs");
    if (this.$route.query.row) {
      this.activeRow = JSON.parse(this.$route.query.row);
      let organIdStr = "";
      if (
        this.activeRow.useCondition &&
        JSON.parse(this.activeRow.useCondition) &&
        JSON.parse(this.activeRow.useCondition).organId
      ) {
        organIdStr = JSON.parse(this.activeRow.useCondition).organId;
      }

      let organId = [];
      if (organIdStr) {
        organId =
          organIdStr.split(",").map(item => {
            return Number(item);
          }) || [];
      }

      this.form = { ...this.activeRow, organId };
      // 优惠券只能时满减
      this.form.type = "FULL_REDUCTION";

      let effectiveStartTime = this.activeRow.effectiveStartTime;
      let effectiveExpireTime = this.activeRow.effectiveExpireTime;
      let startDate = this.activeRow.startDate;
      let endDate = this.activeRow.endDate;
      this.$set(this.form, "effectiveTime", [
        effectiveStartTime,
        effectiveExpireTime
      ]);
      this.$set(this.form, "getTime", [startDate, endDate]);
      this.title = this.activeRow.name;
      if (this.activeRow?.consumeNum > 0) {
        this.isDisabled = true;
      }
    }
  },
  methods: {
    onUseSystemChange(val) {
      if (val === "MALL") {
        this.coupontypeDetail.forEach(item => {
          if (item.value === "MALLCOUPON") {
            item.disabled = false;
          } else {
            item.disabled = true;
          }
        });
      } else if (val === "MEC") {
        this.coupontypeDetail.forEach(item => {
          if (item.value === "MALLCOUPON") {
            item.disabled = true;
          } else {
            item.disabled = false;
          }
        });
      }
      this.form.typeDetail = null;
      // 处理显示问题
      setTimeout(() => {
        this.$refs.form.clearValidate("typeDetail");
      }, 0);
    },
    changeType(val) {
      this.form.faceValue = "";
      this.form.fullAmount = "";
    },
    changeEffectiveType() {
      // this.form.effectiveTime = [];
      this.$set(this.form, "effectiveTime", []);
      this.$set(this.form, "deadline", null);
      // this.form.deadline = "";
    },
    onCancel() {
      this.$router.push("/couponManager");
    },
    resetForm() {
      this.$refs.form.resetFields();
      if (this.activeRow) {
        let organIdStr = JSON.parse(this.activeRow.useCondition);
        let organId = [];
        if (organIdStr) {
          organId = organIdStr.split(",") || [];
        }

        this.form = { ...this.activeRow, organId };
        let effectiveStartTime = this.activeRow.effectiveStartTime;
        let effectiveExpireTime = this.activeRow.effectiveExpireTime;
        let startDate = this.activeRow.startDate;
        let endDate = this.activeRow.endDate;
        this.$set(this.form, "effectiveTime", [
          effectiveStartTime,
          effectiveExpireTime
        ]);
        this.$set(this.form, "getTime", [startDate, endDate]);
      }
    },
    async addCoupon() {
      this.$refs.form.validate(async some => {
        if (some) {
          this.$confirm("您确定新增优惠券?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(async () => {
              try {
                let { effectiveTime, getTime, ...rest } = this.form;
                let str = JSON.stringify({
                  organId: this.form.organId.join(",")
                });
                let params = {
                  ...rest,
                  ...getTimes(
                    effectiveTime,
                    ["effectiveStartTime", "effectiveExpireTime"],
                    "YYYY-MM-DD HH:mm:ss"
                  ),
                  ...getTimes(
                    getTime,
                    ["startDate", "endDate"],
                    "YYYY-MM-DD HH:mm:ss"
                  ),
                  useCondition: str
                };
                const res = await addSysCoupon(params);
                this.$message.success("新增成功");
                this.onCancel();
              } catch (e) {
                console.log(e);
              }
            })
            .catch(() => {});
        }
      });
    },
    resetCoupon() {
      this.$refs.form.validate(async some => {
        if (some) {
          this.$confirm("您确定修改优惠券?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(async () => {
              try {
                let { effectiveTime, getTime, ...rest } = this.form;
                let str = JSON.stringify({
                  organId: this.form.organId.join(",")
                });

                let params = {
                  ...rest,
                  ...getTimes(
                    effectiveTime,
                    ["effectiveStartTime", "effectiveExpireTime"],
                    "YYYY-MM-DD HH:mm:ss"
                  ),
                  ...getTimes(
                    getTime,
                    ["startDate", "endDate"],
                    "YYYY-MM-DD HH:mm:ss"
                  ),
                  useCondition: str
                };
                const res = await resetSysCoupon(params);
                this.$message.success("修改成功");
                this.onCancel();
              } catch (e) {
                console.log(e);
              }
            })
            .catch(() => {});
        }
      });
    },
    checkNo(val, type) {
      if (val) {
        this.form[type] = val;
      } else {
        this.form[type] = null;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.form {
  // margin-top: 30px;
}
.infoTitle {
  font-weight: 400;
  margin-top: 30px;
  font-size: 18px;
}
::v-deep label {
  font-weight: 400;
}
</style>