|
@@ -10,74 +10,77 @@
|
|
|
:centered="true">
|
|
|
<a-form-model
|
|
|
ref="ruleForm"
|
|
|
+ class="formCont"
|
|
|
:model="formData"
|
|
|
:rules="rules"
|
|
|
>
|
|
|
- <!-- 投放时间段名称 -->
|
|
|
- <a-form-model-item label="投放时间段名称" ref="name" prop="name" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
|
|
|
- <a-input
|
|
|
- placeholder="请输入投放时间段名称(最多30个字符)"
|
|
|
- allowClear
|
|
|
- :maxLength="30"
|
|
|
- id="tftime-name"
|
|
|
- v-model="formData.name"
|
|
|
- />
|
|
|
- </a-form-model-item>
|
|
|
- <!-- 投放时间区间 -->
|
|
|
- <a-row type="flex" align="middle" v-for="(item, index) in formData.deliveryTimeRuleItemList" :key="index">
|
|
|
- <a-col span="10">
|
|
|
- <!-- 投放开始时间 -->
|
|
|
- <a-form-model-item
|
|
|
- :label="index === 0 ? '投放时间区间' : ''"
|
|
|
- :label-col="{ span: 12 }"
|
|
|
- :wrapper-col="index === 0 ? { span: 12 } : { span: 12, offset: 12 }"
|
|
|
- :prop="'deliveryTimeRuleItemList.' + index + '.openTime'"
|
|
|
- :rules="{
|
|
|
- required: true,
|
|
|
- message: '请选择开始时间',
|
|
|
- trigger: ['blur','change'],
|
|
|
- }"
|
|
|
- >
|
|
|
- <a-time-picker
|
|
|
- placeholder="开始时间"
|
|
|
- v-model="item.openTime"
|
|
|
- format="HH:mm"
|
|
|
- />
|
|
|
- </a-form-model-item>
|
|
|
- </a-col>
|
|
|
- <a-col span="1"><a-form-model-item>至</a-form-model-item></a-col>
|
|
|
- <a-col span="6">
|
|
|
- <!-- 投放结束时间 -->
|
|
|
- <a-form-model-item
|
|
|
- :label="''"
|
|
|
- :required="false"
|
|
|
- :wrapper-col="{ span: 18 }"
|
|
|
- :prop="'deliveryTimeRuleItemList.' + index + '.closeTime'"
|
|
|
- :rules="{
|
|
|
- required: true,
|
|
|
- message: '请选择结束时间',
|
|
|
- trigger: ['blur','change'],
|
|
|
- }"
|
|
|
- >
|
|
|
- <a-time-picker
|
|
|
- placeholder="结束时间"
|
|
|
- v-model="item.closeTime"
|
|
|
- format="HH:mm"
|
|
|
- />
|
|
|
- </a-form-model-item>
|
|
|
- </a-col>
|
|
|
- <a-form-model-item>
|
|
|
- <a-icon
|
|
|
- :style="{ fontSize: '18px', color: 'red' }"
|
|
|
- v-if="index > 0"
|
|
|
- class="dynamic-delete-button"
|
|
|
- type="minus-circle-o"
|
|
|
- :disabled="formData.deliveryTimeRuleItemList.length === 1"
|
|
|
- @click="() => remove(index)"
|
|
|
+ <div class="timeRow">
|
|
|
+ <!-- 投放时间段名称 -->
|
|
|
+ <a-form-model-item label="投放时间段名称" ref="name" prop="name" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
|
|
|
+ <a-input
|
|
|
+ placeholder="请输入投放时间段名称(最多30个字符)"
|
|
|
+ allowClear
|
|
|
+ :maxLength="30"
|
|
|
+ id="tftime-name"
|
|
|
+ v-model="formData.name"
|
|
|
/>
|
|
|
- <a-icon v-if="index === formData.deliveryTimeRuleItemList.length - 1" :style="{ fontSize: '18px' }" type="plus-circle" @click="add" />
|
|
|
</a-form-model-item>
|
|
|
- </a-row>
|
|
|
+ <!-- 投放时间区间 -->
|
|
|
+ <a-row type="flex" align="middle" v-for="(item, index) in formData.deliveryTimeRuleItemList" :key="index">
|
|
|
+ <a-col span="10">
|
|
|
+ <!-- 投放开始时间 -->
|
|
|
+ <a-form-model-item
|
|
|
+ :label="index === 0 ? '投放时间区间' : ''"
|
|
|
+ :label-col="{ span: 12 }"
|
|
|
+ :wrapper-col="index === 0 ? { span: 12 } : { span: 12, offset: 12 }"
|
|
|
+ :prop="'deliveryTimeRuleItemList.' + index + '.openTime'"
|
|
|
+ :rules="{
|
|
|
+ required: true,
|
|
|
+ message: '请选择开始时间',
|
|
|
+ trigger: ['blur','change'],
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <a-time-picker
|
|
|
+ placeholder="开始时间"
|
|
|
+ v-model="item.openTime"
|
|
|
+ format="HH:mm"
|
|
|
+ />
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col span="1"><a-form-model-item>至</a-form-model-item></a-col>
|
|
|
+ <a-col span="6">
|
|
|
+ <!-- 投放结束时间 -->
|
|
|
+ <a-form-model-item
|
|
|
+ :label="''"
|
|
|
+ :required="false"
|
|
|
+ :wrapper-col="{ span: 18 }"
|
|
|
+ :prop="'deliveryTimeRuleItemList.' + index + '.closeTime'"
|
|
|
+ :rules="{
|
|
|
+ required: true,
|
|
|
+ message: '请选择结束时间',
|
|
|
+ trigger: ['blur','change'],
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <a-time-picker
|
|
|
+ placeholder="结束时间"
|
|
|
+ v-model="item.closeTime"
|
|
|
+ format="HH:mm"
|
|
|
+ />
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-form-model-item>
|
|
|
+ <a-icon
|
|
|
+ :style="{ fontSize: '18px', color: 'red' }"
|
|
|
+ v-if="index > 0"
|
|
|
+ class="dynamic-delete-button"
|
|
|
+ type="minus-circle-o"
|
|
|
+ :disabled="formData.deliveryTimeRuleItemList.length === 1"
|
|
|
+ @click="() => remove(index)"
|
|
|
+ />
|
|
|
+ <a-icon v-if="index === formData.deliveryTimeRuleItemList.length - 1" :style="{ fontSize: '18px' }" type="plus-circle" @click="add" />
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
<a-form-model-item :wrapper-col="{ span: 24, offset: 10 }">
|
|
|
<a-button type="primary" @click="handleSubmit()" id="roleModal-handleSubmit" :style="{ marginRight: '15px' }">保存</a-button>
|
|
|
<a-button :style="{ marginLeft: '15px' }" @click="handleCancel()" id="roleModal-handleCancel">取消</a-button>
|
|
@@ -218,7 +221,16 @@ export default {
|
|
|
<style scoped>
|
|
|
.modalBox {
|
|
|
}
|
|
|
-
|
|
|
+.formCont {
|
|
|
+ max-height: 600px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow-x: hidden;
|
|
|
+}
|
|
|
+.timeRow {
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: scroll;
|
|
|
+}
|
|
|
.ant-modal-footer {
|
|
|
display: none;
|
|
|
}
|