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

<template>
  <div>
    <Form ref="formValidate"
          :model="formValidate"
          :rules="ruleValidate"
          :label-width="80">
      <Row>
        <i-col span="20"
               offset="2">
          <FormItem label="活动名称"
                    prop="name">
            <div>
              <i-input disabled
                       type="text"
                       v-model="schedule.name"
                       placeholder></i-input>
            </div>
          </FormItem>
          <div class="dateClass">
            <Form-item label="活动时间"
                       prop="activityStartDate">
              <Date-picker @on-change="storeStartDate"
                           type="date"
                           v-if="isModify"
                           disabled
                           v-model="formValidate.beginTime"
                           format="yyyy-MM-dd"
                           placeholder="请选择开始日期"
                           style="width: 200px"></Date-picker>
              <Date-picker @on-change="storeStartDate"
                           type="date"
                           v-else
                           v-model="formValidate.beginTime"
                           format="yyyy-MM-dd"
                           placeholder="请选择开始日期"
                           style="width: 200px"></Date-picker>
            </Form-item>
            <div class="text">至</div>
            <Form-item label
                       prop="activityEndDate">
              <Date-picker @on-change="storeEndDate"
                           type="date"
                           v-if="isModify"
                           disabled
                           v-model="formValidate.endTime"
                           format="yyyy-MM-dd"
                           placeholder="请选择结束日期"
                           style="width: 200px"></Date-picker>
              <Date-picker @on-change="storeEndDate"
                           type="date"
                           v-else
                           v-model="formValidate.endTime"
                           format="yyyy-MM-dd"
                           placeholder="请选择结束日期"
                           style="width: 200px"></Date-picker>
            </Form-item>
          </div>
          <FormItem label="活动类型"
                    prop="activityStyle">
            <RadioGroup @on-change="onChange"
                        v-model="formValidate.activityStyle"
                        vertical>
              <Radio :border="true"
                     v-for="(item, index) in schedule.params"
                     :key="index"
                     :label="item.id"
                     v-if="isModify"
                     disabled
                     style="margin-bottom: 10px">
                <Icon type="social-apple"></Icon>
                <span>{{
                    item.name
                  }}&nbsp;&nbsp;&nbsp;&nbsp;----&nbsp;&nbsp;&nbsp;&nbsp;{{
                    item.key
                  }}</span>
              </Radio>
              <Radio :border="true"
                     v-for="(item, index) in schedule.params"
                     :key="index"
                     :label="item.id"
                     v-else
                     style="margin-bottom: 10px">
                <Icon type="social-apple"></Icon>
                <span>{{
                    item.name
                  }}&nbsp;&nbsp;&nbsp;&nbsp;----&nbsp;&nbsp;&nbsp;&nbsp;{{
                    item.key
                  }}</span>
              </Radio>
            </RadioGroup>
          </FormItem>
        </i-col>
      </Row>
    </Form>
  </div>
</template>
<script>
import store from "../../store/index";
import { mapGetters } from "vuex";

export default {
  name: "useActivityStepOne",
  data () {
    return {
      formValidate: store.getters.useData,
      ruleValidate: {
        activityName: [
          { required: true, message: "活动名称不能为空", trigger: "blur" },
        ],
        activityStartDate: [
          {
            required: true,
            type: "date",
            message: "开始时间不能为空",
            trigger: "change",
          },
        ],
        activityEndDate: [
          {
            required: true,
            type: "date",
            message: "结束时间不能为空",
            trigger: "change",
          },
        ],
        activityStyle: [{ required: true, message: "", trigger: "blur" }],
      },
    };
  },
  props: {
    schedule: Object,
    isModify: Boolean
  },
  created () {
    let _this = this;
    this.formValidate = store.getters.useData;
    this.formValidate.activityStyle = "";
    if (this.formValidate.params) {
      this.formValidate.params.forEach((item) => {
        _this.formValidate.activityStyle = item.id;
      });
    }
    console.log(22, this.formValidate);
  },
  methods: {
    onChange (e) {
      let _this = this;
      this.formValidate.activityStyle = e;
      let type = {};
      this.schedule.params.forEach((item) => {
        if (item.id == _this.formValidate.activityStyle) {
          type = item;
        }
      });
      store.getters.useData.params = [type];
    },
    storeStartDate (date) {
      store.getters.useData.beginTime = date;
    },
    storeEndDate (date) {
      store.getters.useData.endTime = date;
    },
  },
};
</script>

<style scoped>
.dateClass {
  display: flex;
}

.text {
  position: relative;
  left: 100px;
}

.inputClass {
  width: 45%;
  margin-bottom: 10px;
  margin-right: 20px;
}
</style>