浏览代码

修改投放时间设置弹框样式bug

1004749546@qq.com 4 年之前
父节点
当前提交
13ac877150
共有 1 个文件被更改,包括 76 次插入64 次删除
  1. 76 64
      src/views/equipmentManage/openTimeSetting/AddTimeModal.vue

+ 76 - 64
src/views/equipmentManage/openTimeSetting/AddTimeModal.vue

@@ -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;
 }