bsdgy-front/src/pages/activity/addActivity.vue

<template>
  <Modal v-model="dispalyModal"
         width="1000"
         :loading="loading"
         :mask-closable="false"
         @on-cancel="cancel"
         @on-ok="save">
    <p slot="header"
       style="color:#f60;text-align:left">
      <span>配置活动</span>
    </p>
    <div>基本配置</div>
    <Form ref="formValidate"
          :model="formValidate"
          :rules="ruleValidate"
          :label-width="80">
      <Row>
        <i-col style="text-align: left;"
               span="8">
          <FormItem label=""
                    prop="logo">
            <Upload ref="upload"
                    :show-upload-list="false"
                    :on-success="uploadImgSuccess"
                    :format="['jpg', 'jpeg', 'png']"
                    :max-size="2048"
                    :before-upload="handleBeforeUpload"
                    multiple
                    type="drag"
                    action=""
                    style="display: inline-block;">
              <div style="width: 200px;height:200px;line-height: 200px;">
                <span v-if="!formValidate.logo">请上传图片</span>
                <img v-if="formValidate.logo"
                     :src="`/kiisoo-ic` + formValidate.logo"
                     alt=""
                     style="width: 100%; height: auto" />
              </div>
            </Upload>
          </FormItem>
        </i-col>
        <i-col span="15"
               offset="1">
          <FormItem label="活动名称"
                    prop="name">
            <i-input type="text"
                     v-model="formValidate.name"
                     placeholder="请输入活动名称"></i-input>
          </FormItem>
          <Form-item label="活动描述"
                     prop="description">
            <i-input v-model="formValidate.description"
                     type="textarea"
                     :autosize="{ minRows: 3 }"
                     placeholder="请输入活动描述"></i-input>
          </Form-item>
          <FormItem label="APPID"
                    prop="appId">
            <i-input type="text"
                     v-model="formValidate.appId"
                     placeholder="请输入appid"></i-input>
          </FormItem>
          <FormItem label="URI"
                    prop="uri">
            <i-input type="text"
                     v-model="formValidate.uri"
                     placeholder="请输入URI"></i-input>
          </FormItem>
        </i-col>
      </Row>
    </Form>
    <div class="topic">活动类型</div>
    <Row :gutter="10"
         class="inputItem"
         v-for="(item, index) in formValidate.params"
         :key="index">
      <i-col :span="2"> 类型{{ index + 1 }} </i-col>
      <i-col :span="9">
        <i-input class="inputClass"
                 type="text"
                 v-model="item.name"
                 placeholder="请输入活动类型名称"></i-input>
      </i-col>
      <i-col :span="9">
        <i-input class="inputClass"
                 type="text"
                 style="margin-left: 20px"
                 v-model="item.defaultVal"
                 placeholder="请输入参数"></i-input>
      </i-col>
      <i-col :span="4">
        <Button style="margin-left: 20px"
                type="error"
                @click="delActivityInput(index)">删除</Button>
      </i-col>
    </Row>
    <Button style="margin-top: 10px"
            type="primary"
            @click="addActivityInput">+添加活动类型</Button>
  </Modal>
</template>
<script>
import ActivityManager from "../../services/ActivityManager/ActivityManager";
import axios from "axios";
export default {
  name: "addActivity",
  data () {
    return {
      dispalyModal: false,
      currentStep: 0,
      modal_loading: false,
      imageName: "212",
      formValidate: {},
      loading: true,
      ruleValidate: {
        name: [
          { required: true, message: "活动名称不能为空", trigger: "blur" },
        ],
        description: [
          { required: true, message: "活动描述不能为空", trigger: "blur" },
        ],
        appId: [{ required: true, message: "appId不能为空", trigger: "blur" }],
        uri: [{ required: true, message: "URI不能为空", trigger: "blur" }],
        // uploadImg: [
        //   { required: true, message: '请上传活动图片', trigger: 'blur' }
        // ]
      },
    };
  },
  props: {
    addActivityModal: Boolean,
    id: String,
  },
  watch: {
    addActivityModal (val) {
      console.log(111, val);
      this.dispalyModal = val;
      if (val === true && this.id) {
        this.getActivityData();
      }
      if (this.id == null || this.id.length <= 0) {
        this.formValidate = {};
      }
      if (
        typeof this.formValidate.params == "undefined" ||
        this.formValidate.params.length <= 0
      ) {
        this.formValidate.params = [
          {
            defaultVal: "",
            description: "",
            id: 0,
            isRequired: 0,
            key: "",
            limitLower: "",
            limitUpper: "",
            name: "",
            type: 0,
          },
        ];
      }
    },
  },
  mounted () { },
  methods: {
    addActivityInput () {
      let params = [...this.formValidate.params];
      params.push({
        defaultVal: "",
        description: "",
        id: 0,
        isRequired: 0,
        key: "",
        limitLower: "",
        limitUpper: "",
        name: "",
        type: 0,
      });
      this.$set(this.formValidate, "params", params);
      this.$forceUpdate();
    },
    delActivityInput (index) {
      if (this.formValidate.params.length <= 1) {
        this.$Message.error("至少需要填写一个活动类型!");
        return;
      }
      this.formValidate.params.splice(index, 1);
      this.$forceUpdate();
    },
    cancel () {
      this.$emit("dispalyAddActivityModal", false, false);
    },
    getActivityData () {
      let that = this;
      let data = {
        id: that.id,
      };
      ActivityManager.getActivityInfo(data, function (data) {
        that.formValidate = data.data.results;
      });
    },
    uploadImgSuccess (res, file) {
      this.imageName = file.name;
    },
    handleBeforeUpload (res) {
      const me = this;
      let data = new FormData();
      data.append("file", res);
      axios({
        method: "post",
        url: "/upload",
        data: data,
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then(function (res) {
        if (res.data.success) {
          // me.formValidate.logo = res.data.results;
          me.$set(me.formValidate, "logo", res.data.results);
          console.log(me.formValidate.logo);
        }
      });
      return false;
    },
    save () {
      let that = this;
      if (that.formValidate.params.length <= 0) {
        that.$Message.error("至少需要填写一个活动类型!");
        that.loading = false;
        return false;
      }
      let i = 0;
      for (const key in that.formValidate.params) {
        i++;
        if (that.formValidate.params.hasOwnProperty(key)) {
          const element = that.formValidate.params[key];
          if (element.name.length <= 0) {
            that.$Message.error(`请输入类型${i}的活动类型名称!`);
            that.loading = false;
            return false;
          }
          if (element.defaultVal.length <= 0) {
            that.$Message.error(`请输入类型${i}的参数!`);
            that.loading = false;
            return false;
          }
        }
      }
      if (
        typeof that.formValidate.logo == "undefined" ||
        that.formValidate.logo == "" ||
        that.formValidate.logo.length <= 0
      ) {
        that.$Message.error("请上传活动封面!");
        that.loading = false;
        return false;
      }
      this.loading = true;
      this.$refs["formValidate"].validate((valid) => {
        if (valid) {
          // param = JSON.stringify(param)
          let data = { ...that.formValidate, isGetActivityInfo: true };
          ActivityManager.addOreditActivity(data, function (data) {
            that.addActivityModal = false;
            that.formValidate = {};
            that.$emit("dispalyAddActivityModal", false, true);
          });
        } else {
          that.$Message.error("表单验证失败!");
        }
        that.loading = false;
      });
    },
  },
};
</script>

<style scoped>
.inputClass {
  width: 100%;
}
.inputItem {
  margin-top: 20px;
}
.topic {
  margin-top: 20px;
}
</style>