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="storeStartDate" type="date" v-model="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="storeEndDate" type="date" v-model="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.name" placeholder=""></i-input>
              <i-input class="inputClass" style="margin-left: 20px" disabled type="text" v-model="item.defaultVal" 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: {
            storeStartDate(date) {
                store.getters.useData.activityStartDate = date
            },
            storeEndDate(date) {
                store.getters.useData.activityEndDate = date
            }
        }
    }
</script>

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

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

  .inputClass {
    width: 1000px;
  }
</style>