iview实现动态表单和自定义验证时间段重叠

iView是一款基于Vue.js的UI框架，可以快速搭建美观、易用的网页应用程序。在iView中实现动态表单和自定义验证时间段重叠的功能，需要深入了解iView的表单组件和验证组件。

实现动态表单

在iView中，通过<Form :model="formData">和<FormItem>标签可以构建表单。动态表单的实现需要以下步骤：

1. 定义表单数据结构，并将其绑定到formData属性上

<template>
  <div>
    <Form :model="formData" ref="form">
      <FormItem label="组名" prop="groupName">
        <Input v-model="formData.groupName" />
      </FormItem>
      <FormItem label="成员列表">
        <template v-for="(item, index) in formData.members">
          <FormItem :label="'成员 ' + (index+1)">
            <Input v-model="item.name" :key="index" />
          </FormItem>
        </template>
        <i-button @click="addMember">添加成员</i-button>
      </FormItem>
      <FormItem>
        <i-button type="primary" @click="submitForm('form')">提交</i-button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
export default {
  data() { 
    return {
      formData: {
        groupName: '',
        members: [
          {name: ''},
          {name: ''}
        ]
      }
    }
  },
  methods: {
    addMember() {
      this.formData.members.push({name: ''});
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert('success');
        } else {
          alert('failed');
        }
      });
    }
  }
}
</script>

以上代码定义了一个包含组名和成员列表的表单。点击“添加成员”按钮可动态添加成员，点击“提交”按钮可验证表单数据是否合法并提交。

1. 动态添加表单项

<template>
  <div>
    <Form :model="formData">
      <FormItem v-for="(item, index) in formData.formItems" :label="'表单项 ' + (index+1)">
        <Input v-model="item.value" :key="index" />
      </FormItem>
      <FormItem>
        <i-button @click="addFormItem">添加表单项</i-button>
      </FormItem>
      <FormItem>
        <i-button type="primary" @click="submitForm('form')">提交</i-button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
export default {
  data() { 
    return {
      formData: {
        formItems: [
          {value: ''}
        ]
      }
    }
  },
  methods: {
    addFormItem() {
      this.formData.formItems.push({value: ''});
    },
    submitForm(formName) {
      // 验证表单数据
    }
  }
}
</script>

以上代码定义了一个包含动态添加表单项的表单。点击“添加表单项”可动态添加表单项，点击“提交”按钮可验证表单数据是否合法并提交。

自定义验证时间段重叠

在iView中，可以通过rules属性为表单项绑定验证规则。实现自定义验证时间段重叠的功能需要以下步骤：

1. 定义验证规则

<template>
  <div>
    <Form :model="formData">
      <FormItem label="开始时间" prop="startTime">
        <DatePicker type="datetime" v-model="formData.startTime" :disabled-hours="disabledHours" :disabled-minutes="disabledMinutes" :disabled-seconds="disabledSeconds" />
      </FormItem>
      <FormItem label="结束时间" prop="endTime">
        <DatePicker type="datetime" v-model="formData.endTime" :disabled-hours="disabledHours" :disabled-minutes="disabledMinutes" :disabled-seconds="disabledSeconds" />
      </FormItem>
      <FormItem>
        <i-button type="primary" @click="submitForm('form')">提交</i-button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
export default {
  data() { 
    return {
      formData: {
        startTime: '',
        endTime: ''
      }
    }
  },
  methods: {
    disabledHours() {
      return [1, 2, 3];
    },
    disabledMinutes(hour) {
      if (hour === 4) {
        return [10, 20, 30];
      }
    },
    disabledSeconds(hour, minute) {
      if (hour === 4 && minute === 40) {
        return [10, 20, 30];
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert('success');
        } else {
          alert('failed');
        }
      });
    }
  },
  created() {
    this.formData.startTime = new Date('2021/09/01 10:00:00');
    this.formData.endTime = new Date('2021/09/01 12:00:00');
  },
  mounted() {
    this.$refs['form'].addValidate('endTime', (rule, value, callback) => {
      if (this.formData.startTime && this.formData.endTime) {
        if (this.formData.startTime > this.formData.endTime) {
          callback(new Error('结束时间不能早于开始时间'));
        } else {
          callback();
        }
      } else {
        callback();
      }
    });
  }
}
</script>

以上代码定义了一个包含开始时间和结束时间的表单，并对结束时间进行了自定义验证规则。当结束时间早于开始时间时，提交按钮不可用。

1. 封装验证函数

<template>
  <div>
    <Form :model="formData">
      <FormItem label="开始时间" prop="startTime">
        <DatePicker type="datetime" v-model="formData.startTime" :disabled-hours="disabledHours" :disabled-minutes="disabledMinutes" :disabled-seconds="disabledSeconds" />
      </FormItem>
      <FormItem label="结束时间" prop="endTime">
        <DatePicker type="datetime" v-model="formData.endTime" :disabled-hours="disabledHours" :disabled-minutes="disabledMinutes" :disabled-seconds="disabledSeconds" :rules="validateEndTime" />
      </FormItem>
      <FormItem>
        <i-button type="primary" @click="submitForm('form')">提交</i-button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
export default {
  data() { 
    return {
      formData: {
        startTime: '',
        endTime: ''
      }
    }
  },
  methods: {
    disabledHours() {
      return [1, 2, 3];
    },
    disabledMinutes(hour) {
      if (hour === 4) {
        return [10, 20, 30];
      }
    },
    disabledSeconds(hour, minute) {
      if (hour === 4 && minute === 40) {
        return [10, 20, 30];
      }
    },
    validateEndTime(rule, value, callback) {
      if (this.formData.startTime && this.formData.endTime) {
        if (this.formData.startTime > this.formData.endTime) {
          callback(new Error('结束时间不能早于开始时间'));
        } else {
          callback();
        }
      } else {
        callback();
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert('success');
        } else {
          alert('failed');
        }
      });
    }
  },
  created() {
    this.formData.startTime = new Date('2021/09/01 10:00:00');
    this.formData.endTime = new Date('2021/09/01 12:00:00');
  }
}
</script>

以上代码对结束时间的验证规则进行了封装，通过rules属性绑定验证函数。

结语

通过以上示例可以看出，iView提供了基础的表单组件和验证组件，可以方便地实现动态表单和自定义验证时间段重叠的功能。在实际项目中，可以通过定制化样式和结合其他第三方组件，实现更加丰富的表单交互效果。