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

<template>
  <Modal
    v-model="dispalyModal"
    width="1000"
    :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="uploadImg">
            <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="activityName">
            <i-input
              type="text"
              v-model="formValidate.name"
              placeholder="请输入活动名称"
            ></i-input>
          </FormItem>
          <Form-item label="活动描述" prop="activityDsc">
            <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.key"
          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: {},
      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) {
      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() {
      this.formValidate.params.push({
        defaultVal: "",
        description: "",
        id: 0,
        isRequired: 0,
        key: "",
        limitLower: "",
        limitUpper: "",
        name: "",
        type: 0,
      });
    },
    delActivityInput(index) {
      if (this.formValidate.params.length <= 1) {
        this.$Message.error("至少需要填写一个活动类型!");
        return;
      }
      this.formValidate.params.splice(index, 1);
    },
    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;
        }
      });
      return false;
    },
    save() {
      let that = this;
      if (that.formValidate.params.length <= 0) {
        that.$Message.error("至少需要填写一个活动类型!");
        return false;
      }
      if (
        typeof that.formValidate.logo == "undefined" ||
        that.formValidate.logo == "" ||
        that.formValidate.logo.length <= 0
      ) {
        that.$Message.error("请上传活动封面!");
        return false;
      }
      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("表单验证失败!");
        }
      });
    },
  },
};
</script>

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