Anti-fraud-manage/src/views/coupon/cardPsdManage/components/addAndEdit.vue

<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="卡号" prop="cardNumber">
        <el-input
          disabled
          v-model="form.cardNumber"
          placeholder="点击按钮生成卡号"
        />
        <el-button
          size="small"
          type="primary"
          style="margin-top: 10px"
          @click="createCardNumber"
        >
          生成卡号
        </el-button>
      </el-form-item>
      <el-form-item label="密码" prop="cardPassword">
        <el-input
          disabled
          v-model="form.cardPassword"
          placeholder="点击按钮生成密码"
        />
        <el-button
          size="small"
          type="primary"
          @click="createPsd"
          style="margin-top: 10px"
        >
          生成密码
        </el-button>
      </el-form-item>
      <el-form-item label="到期时间" prop="expirationDate">
        <el-date-picker
          v-model="form.expirationDate"
          style="width: 100%"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择到期时间"
          type="datetime"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="所属卡券" prop="couponId">
        <el-input
          v-model="form.coupon"
          placeholder="点击选择所属卡券"
          @focus="selectCoupon"
        />
      </el-form-item>
    </el-form>
    <div style="text-align: right">
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </div>

    <!-- 选择卡券弹窗 -->
    <el-dialog title="选择卡券" :visible.sync="dlgVisible" append-to-body>
      <SelectCoupon
        :selectedIds="selectedIds"
        @close="handleClose"
        @confirm="handleSelect"
      />
    </el-dialog>
  </div>
</template>

<script>
import { createRandomNumberByTime, createRandomNumberForPsd } from "@/utils";
import SelectCoupon from "@/components/SelectCoupon";
export default {
  dicts: ["coupon_type"],
  components: { SelectCoupon },
  props: {
    data: {
      type: Object,
      default: () => {},
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 卡券弹窗相关参数
      dlgVisible: false,
      selectedIds: "",
      form: {
        cardNumber: "",
        cardPassword: "",
        expirationDate: "",
        couponId: "",
        couponNumber: "",
        couponTitle: "",
        coupon: "",
      },
      rules: {
        cardNumber: [
          { required: true, trigger: "blur", message: "请生成卡号" },
        ],
        cardPassword: [
          { required: true, trigger: "blur", message: "请生成密码" },
        ],
        expirationDate: [
          { required: true, trigger: "blur", message: "请选择到期时间" },
        ],
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
        shortcuts: [
          {
            text: "明天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周后",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一个月后",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 30);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    };
  },
  watch: {
    data: {
      handler(newVal) {
        if (newVal) {
          this.form = {
            id: newVal.id || "",
            cardNumber: newVal.cardNumber || "",
            cardPassword: newVal.cardPassword || "",
            expirationDate: newVal.expirationDate || "",
            couponId: newVal.couponId || "",
            couponNumber: newVal.couponNumber || "",
            couponTitle: newVal.couponTitle || "",
            coupon:
              newVal.couponNumber && newVal.couponTitle
                ? `${newVal.couponTitle}(${newVal.couponNumber})`
                : "",
          };
          this.$nextTick(() => {
            this.$refs.form && this.$refs.form.clearValidate();
          });
        }
      },
    },
  },
  methods: {
    // 确认选择卡券
    handleSelect(val) {
      console.log(val);
      this.form.coupon = `${val[0].title}(${val[0].couponNumber})`;
      this.form.couponId = val[0].id;
      this.form.couponNumber = val[0].couponNumber;
      this.form.couponTitle = val[0].title;
    },
    // 选择卡券
    selectCoupon() {
      this.dlgVisible = true;
      this.selectedIds = this.form.couponNumber;
    },
    // 关闭卡券弹窗
    handleClose() {
      this.dlgVisible = false;
      this.selectedIds = "";
    },
    // 生成卡号
    createCardNumber() {
      // console.log(createRandomNumberByTime());
      this.form.cardNumber = createRandomNumberByTime();
    },
    // 生成密码
    createPsd() {
      this.form.cardPassword = createRandomNumberForPsd();
    },
    // 确定
    handleConfirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit("confirm", this.form);
        }
      });
    },
    // 取消
    handleCancel() {
      this.form = {
        cardNumber: "",
        cardPassword: "",
        expirationDate: "",
        couponId: "",
        couponNumber: "",
        couponTitle: "",
        coupon: "",
      };
      this.$nextTick(() => {
        this.$refs.form && this.$refs.form.clearValidate();
      });
      this.$emit("cancel");
    },
  },
};
</script>

<style lang="scss" scoped></style>