operatingGift.vue

<template>
  <el-dialog :title="$t(titleLabel)" :visible="show" @close="close" width="80%">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :rules="rules"
      label-width="120px"
    >
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item :label="$t('中文礼品名称')" prop="titleZh">
            <el-input
              v-model="queryParams.titleZh"
              :placeholder="$t('请输入')"
              :disabled="isDisable"
              clearable
              v-trim
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('英文礼品名称')" prop="titleEn">
            <el-input
              v-model="queryParams.titleEn"
              :disabled="isDisable"
              :placeholder="$t('请输入')"
              clearable
              v-trim
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item :label="$t('中文礼品图片')" prop="number">
            <image-upload
              v-model="queryParams.imgZh"
              :isShowEditButton="!isDisable"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('英文礼品图片')" prop="number">
            <image-upload
              v-model="queryParams.imgEn"
              :isShowEditButton="!isDisable"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10" v-for="(item, index) in queryParams.nodeIds">
        <el-col :span="6">
          <el-form-item
            :label="$t('提货点')"
            :prop="`nodeIds[${index}].wareHouses`"
            :rules="rules.nodeIds.wareHouses"
          >
            <el-select
              v-model="item.wareHouses"
              :placeholder="$t('请选择提货点')"
              :disabled="isDisable"
              clearable
              multiple
              filterable
              remote
              reserve-keyword
              :remote-method="handleWarehouseList"
              :loading="loading"
              size="small"
            >
              <el-option
                v-for="nodeItem in warehouseList"
                :key="nodeItem.id"
                :label="isChinese ? nodeItem.titleZh : nodeItem.titleEn"
                :value="nodeItem.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            :label="$t('兑换积分')"
            :prop="`nodeIds[${index}].points`"
            :rules="rules.nodeIds.points"
          >
            <el-input
              v-model.trim.number="item.points"
              :placeholder="$t('请输入')"
              :disabled="isDisable"
            /> </el-form-item
        ></el-col>
        <el-col :span="6">
          <el-form-item
            :label="$t('剩余数量')"
            :prop="`nodeIds[${index}].quantityRemain`"
            :rules="rules.nodeIds.quantityRemain"
          >
            <el-input
              class="input-item-width"
              :disabled="isDisable && disabelEnableStatus"
              v-model.trim="item.quantityRemain"
              :placeholder="$t('请输入')"
              type="number"
            />
          </el-form-item>
        </el-col>
        <el-col :span="1">
          <el-button
            type="primary"
            :icon="index == '0' ? 'el-icon-plus' : 'el-icon-minus'"
            @click="handleOrderVRule(item, index)"
          ></el-button>
        </el-col>
      </el-row>

      <el-form-item :label="$t('活动时间')" prop="dateRangeCreateTime">
        <el-date-picker
          :disabled="isDisable"
          type="daterange"
          clearable
          placement="bottom-start"
          v-model="queryParams.dateRangeCreateTime"
          style="width: 400px"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="-"
          :start-placeholder="$t('开始日期')"
          :end-placeholder="$t('结束日期')"
        />
      </el-form-item>
      <el-form-item :label="$t('领取方式')" prop="pickMethod">
        <dict-selector
          clearable
          multiple
          :disabled="isDisable"
          :type="DICT_TYPE.WAY_OF_RECEIVING"
          v-model="queryParams.pickMethod"
        >
        </dict-selector>
      </el-form-item>
      <el-form-item :label="$t('允许兑换次数')" prop="allowCount">
        <el-input
          class="input-item-width"
          v-model.trim.number="queryParams.allowCount"
          :placeholder="$t('请输入')"
          clearable
          :disabled="isDisable"
        />
      </el-form-item>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item :label="$t('中文备注')" prop="remarkZh">
            <el-input
              type="textarea"
              :disabled="isDisable && disabelEnableStatus"
              height="100"
              v-model="queryParams.remarkZh"
              :placeholder="$t('请输入')"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('英文备注')" prop="remarkEn">
            <el-input
              type="textarea"
              :disabled="isDisable && disabelEnableStatus"
              v-model="queryParams.remarkEn"
              :placeholder="$t('请输入')"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div>
        <el-form-item :label="$t('是否启用')" prop="status" v-if="title == '3'">
          <el-radio-group v-model="queryParams.status" :disabled="isDisable">
            <el-radio
              v-for="dict in getDictDatas(DICT_TYPE.GIFT_ENABLE_STATUS)"
              :key="dict.value"
              :label="dict.value"
              >{{ $l(dict, "label") }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('状态')" prop="status" v-else>
          <el-radio-group v-model="queryParams.status" :disabled="isDisable">
            <el-radio
              v-for="dict in getDictDatas(DICT_TYPE.GIFT_STATUS)"
              :key="dict.value"
              :label="Number(dict.value)"
              >{{ $l(dict, "label") }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
      </div>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
      v-if="!isDisable || !disabelEnableStatus"
    >
      <el-button @click="close">{{ $t("取 消") }}</el-button>
      <el-button type="primary" @click="submit">{{ $t("确 定") }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  editRewards,
  addRewards,
  getWarehouseList,
} from "@/api/ecw/giftManagement";
import { getDictDatas, DICT_TYPE } from "@/utils/dict";
import imageUpload from "@/components/ImageUpload";
import { parseTime, resetForm } from "../../../../utils/ruoyi";
import { deepClone } from "@/utils";
export default {
  name: "operatingGift",
  props: {
    title: {
      type: String,
      default: "",
    },
    show: {
      type: Boolean,
      default: false,
    },
    rewardsDetails: {
      type: Object,
      default: () => {
        return this.queryParams;
      },
    },
    nodeList: {
      type: Array,
      default: () => [],
    },
  },
  components: {
    imageUpload,
  },
  computed: {
    isChinese() {
      return this.$i18n.locale === "zh_CN";
    },
    isDisable() {
      let disableStatus = false;
      switch (this.title) {
        case "1":
          disableStatus = true;
          this.disabelEnableStatus = true;
          break;
        case "2":
          if (this.queryParams.status == "2") {
            disableStatus = false;
            this.disabelEnableStatus = true;
          } else if (this.queryParams.status == "1") {
            disableStatus = true;
            this.disabelEnableStatus = false;
          } else {
            disableStatus = true;
            this.disabelEnableStatus = true;
          }
          break;
        case "3":
          disableStatus = false;
          break;
      }
      return disableStatus;
    },
    titleLabel() {
      let titleLabelText = "";
      switch (this.title) {
        case "1":
          titleLabelText = this.$t("查看礼品");
          break;
        case "2":
          titleLabelText = this.$t("编辑礼品");
          break;
        case "3":
          this.resetFormQuery();
          titleLabelText = this.$t("新增礼品");
          break;
      }
      return titleLabelText;
    },
  },
  watch: {
    rewardsDetails(newVal, oldVal) {
      if (JSON.stringify(newVal) != "{}") {
        this.queryParams = deepClone(newVal);
        this.queryParams.dateRangeCreateTime = [
          parseTime(newVal.startTime),
          parseTime(newVal.endTime),
        ];
        this.queryParams.pickMethod = newVal.pickMethod.split(",");
      } else {
        this.resetFormQuery();
        this.$refs["queryForm"].resetFields();
        console.log("Prop is empty");
      }
    },
  },
  data() {
    return {
      loading: false,
      queryParams: {
        allowCount: null,
        endTime: null,
        imgEn: null,
        imgZh: null,
        nodeIds: [{ wareHouses: "", points: "", quantityRemain: null }],
        nodeId: null,
        pickMethod: null,
        pointsRequire: null,

        remarkEn: null,
        remarkFr: null,
        remarkZh: null,
        startTime: null,
        status: null,
        titleEn: null,
        titleZh: null,
        dateRangeCreateTime: null,
      },
      disabelEnableStatus: false,
      warehouseList: [],
      rules: {
        titleZh: [
          {
            required: true,
            message: this.$t("请输入中文礼品名称"),
            trigger: "blur",
          },
          {
            min: 0,
            max: 50,
            message: this.$t("长度在 0 到 50 个字符"),
            trigger: "blur",
          },
        ],
        titleEn: [
          {
            required: true,
            message: this.$t("请输入英文礼品名称"),
            trigger: "blur",
          },
          {
            min: 0,
            max: 50,
            message: this.$t("长度在 0 到 50 个字符"),
            trigger: "blur",
          },
        ],
        nodeIds: {
          wareHouses: [
            {
              required: true,
              message: this.$t("请选择网点"),
              trigger: "change",
            },
          ],
          points: [
            {
              required: true,
              message: this.$t("请输入兑换积分"),
              trigger: "blur",
            },
            { type: "number", message: "输入数字", trigger: "blur" },
          ],
          quantityRemain: [
            {
              required: true,
              message: this.$t("请输入剩余数量"),
              trigger: "blur",
            },
          ],
        },

        pickMethod: [
          {
            required: true,
            message: this.$t("请选择领取方式"),
            trigger: "change",
          },
        ],
        allowCount: [
          {
            required: true,
            message: this.$t("请输入允许兑换次数"),
            trigger: "blur",
          },
          { type: "number", message: "输入数字", trigger: "blur" },
        ],
        remarkZh: [
          {
            min: 0,
            max: 500,
            message: this.$t("长度在 0 到 500 个字符"),
            trigger: "blur",
          },
        ],
        remarkEn: [
          {
            min: 0,
            max: 500,
            message: this.$t("长度在 0 到 500 个字符"),
            trigger: "blur",
          },
        ],
        status: [
          {
            required: true,
            message: this.$t("请选择是否启用"),
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {
    this.handleWarehouseList();
  },
  methods: {
    handleWarehouseList(val = "") {
      let params = { title: val };
      getWarehouseList(params).then((res) => {
        this.warehouseList = res.data;
      });
    },
    handleOrderVRule(item, index) {
      if (index == "0") {
        this.queryParams.nodeIds.push({ nodeId: "", points: "" });
      } else {
        this.queryParams.nodeIds.splice(index, 1);
      }
    },
    submit() {
      let params = { ...this.queryParams };
      params.startTime = this.queryParams?.dateRangeCreateTime?.[0];
      params.endTime = this.queryParams?.dateRangeCreateTime?.[1];
      params.pickMethod = this.queryParams.pickMethod.toString();
      this.$refs["queryForm"].validate((valid) => {
        if (valid) {
          if (this.title == "2") {
            editRewards(params).then((res) => {
              this.$emit("update:show", false);
              this.$message.success(this.$t("编辑成功"));
              this.$refs["queryForm"].resetFields();
              this.$parent.getList();
            });
          } else {
            //Add
            addRewards(params).then((res) => {
              this.$emit("update:show", false);
              this.$message.success(this.$t("成功"));
              this.$refs["queryForm"].resetFields();
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    close() {
      this.$emit("update:show", false);
    },
    resetFormQuery() {
      this.queryParams = {
        allowCount: null,
        endTime: null,
        nodeIds: [{ wareHouses: "", points: "", quantityRemain: null }],
        imgEn: null,
        imgZh: null,
        nodeId: null,
        pickMethod: null,
        pointsRequire: null,
        remarkEn: null,
        remarkFr: null,
        remarkZh: null,
        startTime: null,
        status: null,
        titleEn: null,
        titleZh: null,
        dateRangeCreateTime: null,
      };
    },
  },
};
</script>
<style>
.input-item-width {
  width: 194px;
}
</style>