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="activityName">
            <div>{{formValidate.activityName}}</div>
          </FormItem>
          <div class="dateClass">
            <Form-item label="活动时间" prop="activityStartDate">
              <Date-picker @on-change="storeDate" type="date" :value="formValidate.activityStartDate" 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="storeDate" type="date" :value="formValidate.activityEndDate" format="yyyy-MM-dd" placeholder="请选择结束日期" style="width: 200px"></Date-picker>
            </Form-item>
          </div>
          <FormItem label="活动类型" prop="activityStyle">
              <div v-for="(item, index) in formValidate.activityStyle" :key="index">
                <i-input class="inputClass" disabled type="text" v-model="item.value1" placeholder=""></i-input>
                <i-input class="inputClass" style="margin-left: 20px" disabled type="text" v-model="item.value2" placeholder=""></i-input>
              </div>
          </FormItem>
        </i-col>
      </Row>
    </Form>
  </div>
</template>
<script>
import store from "../../store/index"
export default {
  name: "useActivityStepOne",
  data() {
		return {
      formValidate: {
        activityName: '',
        activityStartDate: '',
        activityEndDate: '',
        activityStyle: [],
      },
      flag: store.getters.useModal,
      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: {
    displayUseModal: Boolean
  },
  watch: {
    displayUseModal() {
      this.formValidate.activityName = store.getters.useData.name
      this.formValidate.activityStyle = store.getters.useData.inputActivityList
    },
  },
	mounted() {
    this.formValidate.activityName = store.getters.useData.name
    this.formValidate.activityStyle = store.getters.useData.inputActivityList
  },
  methods: {
    storeDate() {
      store.getters.useData.activityStartDate = this.formValidate.activityStartDate
      store.getters.useData.activityEndDate = this.formValidate.activityEndDate
    }
  }
}
</script>

<style  scoped>
.dateClass {
  display: flex;
}
.text {
    position: relative;
    left: 100px;
}
.inputClass{
  width: 1000px;
}
</style>