sop执行计划和消息通知新增实现方式修改为表单格式并新增必填校验

src/views/sopm/sop/ExecutePlan.vue

@@ -15,186 +15,198 @@
       </div>
     </div>
     <div class="tab-content">
-      <section>
-        <span>启用执行计划：</span>
-        <el-switch
-          v-model="sopExcuteData.enableExecutionPlan"
-          size="small"
-          :active-value="1"
-          :inactive-value="0"
-          @change="handleExecutionPlanChange"
-        />
-      </section>
-      <section>
-        <span>执行频率单位：</span>
-        <el-radio-group v-model="sopExcuteData.frequencyUnit" @change="handlefrequencyUnitChange">
-          <el-radio label="day" :value="3">天</el-radio>
-          <el-radio label="week" :value="2">周</el-radio>
-          <el-radio label="month" :value="1">月</el-radio>
-          <el-radio label="year" :value="0">年</el-radio>
-        </el-radio-group>
-      </section>
-
-      <!-- 天 -->
-      <section v-if="sopExcuteData.frequencyUnit == 3">
-        <span> 执行频率：</span>每
-        <el-input-number
-          v-model="sopExcuteData.frequency"
-          :min="1"
-          :max="3650"
-          class="mx-4"
-          controls-position="right"
-        />
-        天
-      </section>
-
-      <!-- 周 -->
-      <section v-else-if="sopExcuteData.frequencyUnit == 2">
-        <span>执行频率：</span> 每
-        <el-input-number
-          v-model="sopExcuteData.frequency"
-          :min="1"
-          :max="520"
-          class="mx-4"
-          controls-position="right"
-        />
-        周 &nbsp;&nbsp;&nbsp;&nbsp; 在 &nbsp;&nbsp;
-        <el-select v-model="sopExcuteData.timePoint" placeholder="选择星期" style="width: 115px">
-          <el-option label="星期一" value="星期一" />
-          <el-option label="星期二" value="星期二" />
-          <el-option label="星期三" value="星期三" />
-          <el-option label="星期四" value="星期四" />
-          <el-option label="星期五" value="星期五" />
-          <el-option label="星期六" value="星期六" />
-          <el-option label="星期日" value="星期日" />
-        </el-select>
-      </section>
-
-      <!-- 月 -->
-      <section v-else-if="sopExcuteData.frequencyUnit == 1">
-        <span>执行频率：</span> 每
-        <el-input-number
-          v-model="sopExcuteData.frequency"
-          :min="1"
-          :max="120"
-          class="mx-4"
-          controls-position="right"
-        />
-        月 第
-        <el-input-number
-          v-model="sopExcuteData.timePoint"
-          :min="1"
-          :max="3650"
-          class="mx-4"
-          controls-position="right"
-          @change="handleTimePointChange"
-        />
-        日
-      </section>
-
-      <!-- 年 -->
-      <section v-else-if="sopExcuteData.frequencyUnit == 0">
-        <span>执行频率：</span> 每
-        <el-input-number
-          v-model="sopExcuteData.frequency"
-          :min="1"
-          :max="10"
-          class="mx-4"
-          controls-position="right"
-        />
-        年 第
-        <el-input-number
-          v-model="sopExcuteData.timePoint"
-          :min="1"
-          :max="3650"
-          class="mx-4"
-          controls-position="right"
-          @change="handleTimePointChange"
-        />
-        天
-      </section>
-      <section
-        ><span>作业开始时间：</span>
-        <el-time-picker
-          v-model="sopExcuteData.startTime"
-          placeholder="请选择"
-          :picker-options="{
-            selectableRange: '00:00:00 - 23:59:59'
-          }"
-          format="HH:mm:ss"
-          value-format="HH:mm:ss"
-        />
-      </section>
-      <section>
-        <span>作业预估时长：</span>
-        <el-time-picker
-          v-model="sopExcuteData.duration"
-          placeholder="请选择"
-          :picker-options="{
-            selectableRange: '00:00:00 - 23:59:59'
-          }"
-          format="HH:mm:ss"
-          value-format="HH:mm:ss"
-        />
-      </section>
-      <section>
-        <span> 计划终止：</span>
-        <el-select v-model="sopExcuteData.endType" placeholder="" style="width: 115px">
-          <el-option
-            v-for="dict in getStrDictOptions(DICT_TYPE.SOP_PLAN_TERMINATE_TYPE)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
+      <el-form
+        ref="formRef"
+        :model="sopExcuteData"
+        :rules="formRules"
+        label-width="120px"
+      >
+        <!-- 启用执行计划 -->
+        <el-form-item label="启用执行计划" prop="enableExecutionPlan">
+          <el-switch
+            v-model="sopExcuteData.enableExecutionPlan"
+            size="small"
+            :active-value="1"
+            :inactive-value="0"
+            @change="handleExecutionPlanChange"
           />
-        </el-select>
-        <el-date-picker
-          style="margin-left: 15px"
-          v-if="sopExcuteData.endType == 0 && sopExcuteData.endType !== '' "
-          v-model="sopExcuteData.endValue"
-          type="date"
-          format="YYYY-MM-DD"
-          value-format="YYYY-MM-DD"
-          placeholder="请选择"
-        />
-        <div v-if="sopExcuteData.endType == 2">
+        </el-form-item>
+
+        <!-- 执行频率单位 -->
+        <el-form-item label="执行频率单位" prop="frequencyUnit">
+          <el-radio-group v-model="sopExcuteData.frequencyUnit" @change="handlefrequencyUnitChange">
+            <el-radio :value="3">天</el-radio>
+            <el-radio :value="2">周</el-radio>
+            <el-radio :value="1">月</el-radio>
+            <el-radio :value="0">年</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <!-- 天 -->
+        <el-form-item v-if="sopExcuteData.frequencyUnit == 3" label="执行频率" prop="frequency">
+          每
           <el-input-number
-            v-model="sopExcuteData.endValue"
+            v-model="sopExcuteData.frequency"
             :min="1"
-            :max="10"
+            :max="3650"
             class="mx-4"
             controls-position="right"
-          />
-          次后
+          /> 天
+        </el-form-item>
+
+        <!-- 周 -->
+        <div v-else-if="sopExcuteData.frequencyUnit == 2" style="display:flex">
+          <el-form-item label="执行频率" prop="frequency">
+            每
+            <el-input-number
+              v-model="sopExcuteData.frequency"
+              :min="1"
+              :max="520"
+              class="mx-4"
+              controls-position="right"
+            /> 周
+          </el-form-item>
+          <el-form-item label="在" prop="timePoint">
+            <el-select v-model="sopExcuteData.timePoint" placeholder="选择星期" style="width: 115px">
+              <el-option label="星期一" value="星期一" />
+              <el-option label="星期二" value="星期二" />
+              <el-option label="星期三" value="星期三" />
+              <el-option label="星期四" value="星期四" />
+              <el-option label="星期五" value="星期五" />
+              <el-option label="星期六" value="星期六" />
+              <el-option label="星期日" value="星期日" />
+            </el-select>
+          </el-form-item>
+        </div>
+
+        <!-- 月 -->
+        <div v-else-if="sopExcuteData.frequencyUnit == 1" style="display:flex">
+          <el-form-item label="执行频率" prop="frequency">
+            每
+            <el-input-number
+              v-model="sopExcuteData.frequency"
+              :min="1"
+              :max="120"
+              class="mx-4"
+              controls-position="right"
+            /> 月
+          </el-form-item>
+          <el-form-item label="第" prop="timePoint">
+            <el-input-number
+              v-model="sopExcuteData.timePoint"
+              :min="1"
+              :max="31"
+              class="mx-4"
+              controls-position="right"
+            /> 日
+          </el-form-item>
         </div>
-      </section>
-      <section>
-        <span>非工作日：</span>
-        <el-select v-model="sopExcuteData.nonWorkDay" placeholder="" style="width: 115px" @change="handlenonWorkMoveDayChange()">
-          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.SOP_PLAN_NOWORKING)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
+
+        <!-- 年 -->
+        <div v-else-if="sopExcuteData.frequencyUnit == 0"  style="display:flex">
+          <el-form-item label="执行频率" prop="frequency">
+            每
+            <el-input-number
+              v-model="sopExcuteData.frequency"
+              :min="1"
+              :max="10"
+              class="mx-4"
+              controls-position="right"
+            /> 年
+          </el-form-item>
+          <el-form-item label="第" prop="timePoint">
+            <el-input-number
+              v-model="sopExcuteData.timePoint"
+              :min="1"
+              :max="365"
+              class="mx-4"
+              controls-position="right"
+            /> 天
+          </el-form-item>
+        </div>
+
+        <!-- 作业开始时间 -->
+        <el-form-item label="作业开始时间" prop="startTime">
+          <el-time-picker
+            v-model="sopExcuteData.startTime"
+            placeholder="请选择"
+            format="HH:mm:ss"
+            value-format="HH:mm:ss"
+          />
+        </el-form-item>
+
+        <!-- 作业预估时长 -->
+        <el-form-item label="作业预估时长" prop="duration">
+          <el-time-picker
+            v-model="sopExcuteData.duration"
+            placeholder="请选择"
+            format="HH:mm:ss"
+            value-format="HH:mm:ss"
           />
-        </el-select>
-        <div v-if="sopExcuteData.nonWorkDay == 2 || sopExcuteData.nonWorkDay == 3">
+        </el-form-item>
+
+        <!-- 计划终止 -->
+        <div style="display:flex">
+          <el-form-item label="计划终止" prop="endType">
+            <el-select v-model="sopExcuteData.endType" style="width: 115px" @change="handleEndTypeChange">
+              <el-option v-for="dict in getStrDictOptions(DICT_TYPE.SOP_PLAN_TERMINATE_TYPE)"
+                         :key="dict.value"
+                         :label="dict.label"
+                         :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-if="sopExcuteData.endType == 0" label="终止日期" prop="endValue">
+            <el-date-picker
+              v-model="sopExcuteData.endValue"
+              type="date"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              placeholder="请选择"
+              :disabled-date="disabledBeforeToday"
+            />
+          </el-form-item>
+          <el-form-item v-if="sopExcuteData.endType == 2" label="执行次数" prop="endValue">
+            <el-input-number
+              v-model="sopExcuteData.endValue"
+              :min="1"
+              :max="10"
+              class="mx-4"
+              controls-position="right"
+            /> 次后
+          </el-form-item>
+        </div>
+
+
+        <!-- 非工作日 -->
+        <div style="display:flex">
+        <el-form-item label="非工作日" prop="nonWorkDay">
+          <el-select v-model="sopExcuteData.nonWorkDay" style="width: 115px">
+            <el-option v-for="dict in getIntDictOptions(DICT_TYPE.SOP_PLAN_NOWORKING)"
+                       :key="dict.value"
+                       :label="dict.label"
+                       :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="sopExcuteData.nonWorkDay == 2 || sopExcuteData.nonWorkDay == 3" label="顺延天数" prop="nonWorkMoveDay">
           <el-input-number
             v-model="sopExcuteData.nonWorkMoveDay"
             :min="1"
             :max="10"
             class="mx-4"
             controls-position="right"
-          />
-          工作日
+          /> 工作日
+        </el-form-item>
         </div>
-      </section>
-      <div class="btnstyle">
-        <el-button plain v-if="ExcuteplanVisible == false" @click="submit">修改</el-button>
-        <el-button type="primary" plain @click="submit" v-if="ExcuteplanVisible == true"
-          >新建</el-button
-        >
-        <el-button plain @click="goBack">取消</el-button>
-      </div>
+
+        <!-- 按钮 -->
+        <div class="btnstyle">
+          <el-button plain v-if="ExcuteplanVisible == false" @click="submit">修改</el-button>
+          <el-button type="primary" plain v-if="ExcuteplanVisible == true" @click="submit">新建</el-button>
+          <el-button plain @click="goBack">取消</el-button>
+        </div>
+      </el-form>
     </div>
   </ContentWrap>
   <!--  预览计划-->
@@ -228,6 +240,7 @@ const router = useRouter()
 const route = useRoute()
 const message = useMessage() // 消息弹窗
 const tableData = ref([])
+const formRef = ref(null)
 const sopExcuteData = reactive({
   sopId: route.query.id,
   frequencyUnit: 3,
@@ -241,6 +254,61 @@ const sopExcuteData = reactive({
   nonWorkMoveDay: '',
   enableExecutionPlan:0,
 })
+// 校验规则
+const formRules = {
+  // enableExecutionPlan: [{ required: true, message: '请选择是否启用执行计划', trigger: 'change' }],
+  frequencyUnit: [{ required: true, message: '请选择执行频率单位', trigger: 'change' }],
+  frequency: [{ required: true, message: '请输入执行频率', trigger: 'blur' }],
+  timePoint: [
+    {
+      required: true,
+      message: '请输入时间点',
+      trigger: 'change',
+      validator: (rule, value, callback) => {
+        if ((sopExcuteData.frequencyUnit == 2 || sopExcuteData.frequencyUnit == 1 || sopExcuteData.frequencyUnit == 0) && !value) {
+          callback(new Error('请输入时间点'))
+        } else {
+          callback()
+        }
+      }
+    }
+  ],
+  startTime: [{ required: true, message: '请选择作业开始时间', trigger: 'change' }],
+  duration: [{ required: true, message: '请选择作业预估时长', trigger: 'change' }],
+  endType: [{ required: true, message: '请选择计划终止方式', trigger: 'change' }],
+  endValue: [
+    {
+      required: true,
+      message: '请输入终止值',
+      trigger: 'blur',
+      validator: (rule, value, callback) => {
+        if (sopExcuteData.endType == 0 && !value) {
+          callback(new Error('请选择终止日期'))
+        } else if (sopExcuteData.endType == 2 && !value) {
+          callback(new Error('请输入执行次数'))
+        } else {
+          callback()
+        }
+      }
+    }
+  ],
+  nonWorkDay: [{ required: true, message: '请选择非工作日处理方式', trigger: 'change' }],
+  nonWorkMoveDay: [
+    {
+      required: true,
+      message: '请输入顺延天数',
+      trigger: 'blur',
+      validator: (rule, value, callback) => {
+        if ((sopExcuteData.nonWorkDay == 2 || sopExcuteData.nonWorkDay == 3) && !value) {
+          callback(new Error('请输入顺延天数'))
+        } else {
+          callback()
+        }
+      }
+    }
+  ]
+}
+
 
 const ExcuteplanVisible = ref(false) // 判断sop执行计划是新增还是修改
 // 添加初始化标志位
@@ -329,12 +397,31 @@ const handlenonWorkMoveDayChange=()=>{
   }
 }
 
+// 计划终止切换时清空后面日期数据
+const handleEndTypeChange = (val) => {
+  // 切换到 0（终止日期）或 2（执行次数）时，清空 endValue
+  if (val == 0 || val == 2) {
+    sopExcuteData.endValue = ''
+  }
+}
+
+// 计划执行日期当前日期之前时间不可选条件判断
+const disabledBeforeToday = (time) => {
+  const today = new Date()
+  today.setHours(0, 0, 0, 0) // 清零时分秒
+  return time.getTime() < today.getTime() // 小于今天的禁用
+}
+
+
 // 创建按钮事件
 const submit = async () => {
   try {
+    // 先做表单校验
+    await formRef.value.validate()
+
+    // 新增执行计划
     let data
     let successMessage
-    // 新增执行计划
     if (sopExcuteData.frequencyUnit == '3') {
       sopExcuteData.timePoint = 0
     }
@@ -357,7 +444,7 @@ const submit = async () => {
       message.success(successMessage)
     }
   } catch (error) {
-    console.error('保存失败:', error)
+    // console.error('保存失败:', error)
     message.error('保存失败')
   }
 }

src/views/sopm/sop/NotificationUpdate.vue

@@ -4,109 +4,78 @@
       <span class="tab-title">添加规则</span>
     </div>
     <div class="checkContent">
-      <section>
-        <span>通知规则种类： </span>
-        <el-select v-model="noticeData.type" placeholder="请选择" style="width: 260px">
-          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.NOTICE_RULES_TYPE)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </section>
-      <section>
-        <span>规则：</span>
-        <el-select v-model="noticeData.rule" placeholder="请选择" style="width: 260px">
-          <!--          作业通知-->
-          <el-option
-            v-show="noticeData.type == 1"
-            v-for="dict in getStrDictOptions(DICT_TYPE.JOB_NOTICE_RULES)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-          <!--          操作通知-->
-          <el-option
-            v-show="noticeData.type == 3"
-            v-for="dict in getIntDictOptions(DICT_TYPE.ACTION_NOTICE_RULES)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-          <!--    提前通知-->
-          <el-option
-            v-show="noticeData.type == 0"
-            v-for="dict in getIntDictOptions(DICT_TYPE.ADVANCE_NOTICE_RULES)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-          <!--   步骤通知-->
-          <el-option
-            v-for="item in actionNoticeList"
-            :key="item.id"
-            :label="item.stepTitleShort"
-            :value="item.id"
-            v-show="noticeData.type == 2"
-          />
-        </el-select>
-      </section>
-      <section>
-        <span>通知时间：</span>
-        <el-select v-model="noticeData.notifyTimeType" placeholder="请选择" style="width: 260px">
-          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.NOTICE_TIME_TYPE)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-        <i v-if="noticeData.notifyTimeType == 0 || noticeData.notifyTimeType == 2">
-          <el-input-number
-            v-model="timeParts.day"
-            :min="0"
-            :max="10"
-            class="mx-4"
-            controls-position="right"
-          />
-          天
-          <el-input-number
-            v-model="timeParts.hour"
-            :min="0"
-            :max="23"
-            class="mx-4"
-            controls-position="right"
-          />
-          时
-          <el-input-number
-            v-model="timeParts.minute"
-            :min="0"
-            :max="59"
-            class="mx-4"
-            controls-position="right"
-          />
-          分
-          <el-input-number
-            v-model="timeParts.second"
-            :min="0"
-            :max="59"
-            class="mx-4"
-            controls-position="right"
+      <el-form :model="noticeData" :rules="rules" ref="noticeForm" label-width="110px">
+        <el-form-item label="通知规则种类" prop="type">
+          <el-select v-model="noticeData.type" placeholder="请选择" style="width: 260px">
+            <el-option
+              v-for="dict in getIntDictOptions(DICT_TYPE.NOTICE_RULES_TYPE)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="规则" prop="rule">
+          <el-select v-model="noticeData.rule" placeholder="请选择" style="width: 260px">
+            <el-option
+              v-show="noticeData.type == 1"
+              v-for="dict in getStrDictOptions(DICT_TYPE.JOB_NOTICE_RULES)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+            <el-option
+              v-show="noticeData.type == 3"
+              v-for="dict in getIntDictOptions(DICT_TYPE.ACTION_NOTICE_RULES)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+            <el-option
+              v-show="noticeData.type == 0"
+              v-for="dict in getIntDictOptions(DICT_TYPE.ADVANCE_NOTICE_RULES)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+            <el-option
+              v-for="item in actionNoticeList"
+              :key="item.id"
+              :label="item.stepTitleShort"
+              :value="item.id"
+              v-show="noticeData.type == 2"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="通知时间" prop="notifyTimeType">
+          <el-select v-model="noticeData.notifyTimeType" placeholder="请选择" style="width: 260px">
+            <el-option
+              v-for="dict in getIntDictOptions(DICT_TYPE.NOTICE_TIME_TYPE)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+          <template v-if="noticeData.notifyTimeType == 0 || noticeData.notifyTimeType == 2">
+            <el-input-number v-model="timeParts.day" :min="0" :max="10" class="mx-4" style="width: 100px" /> 天
+            <el-input-number v-model="timeParts.hour" :min="0" :max="23" class="mx-4" style="width: 100px" /> 时
+            <el-input-number v-model="timeParts.minute" :min="0" :max="59" class="mx-4" style="width: 100px" /> 分
+            <el-input-number v-model="timeParts.second" :min="0" :max="59" class="mx-4" style="width: 100px" /> 秒
+          </template>
+        </el-form-item>
+
+        <el-form-item label="通知区域" prop="workstationId">
+          <el-tree-select
+            style="width: 260px"
+            v-model="noticeData.workstationId"
+            :data="workstationOptions"
+            :props="{ label: 'label', children: 'children', value: 'id' }"
+            placeholder="请选择岗位"
           />
-          秒
-        </i>
-      </section>
-      <section>
-        <span>通知区域：</span>
-        <el-tree-select
-          style="width: 260px"
-          v-model="noticeData.workstationId"
-          :data="workstationOptions"
-          :props="{ label: 'label', children: 'children', value: 'id' }"
-          placeholder="请选择岗位"
-        />
-      </section>
+        </el-form-item>
+      </el-form>
     </div>
   </ContentWrap>
   <!--  通知角色与通知模板-->
@@ -123,7 +92,7 @@
           <el-radio label="showNotice" :value="1">仅显示通知</el-radio>
         </el-radio-group>
       </p>
-      <el-table v-loading="loading" :data="filteredTableData" border style="width: 80%">
+      <el-table v-loading="loading" :data="filteredTableData" border style="width: 80%;">
         <el-table-column prop="roleName" label="角色" width="180" />
         <el-table-column label="是否通知" align="center" width="100">
           <template #default="scope">
@@ -339,6 +308,14 @@ const filteredTableData = computed(() => {
   if (status.value == 0) return tableData.value
   return tableData.value.filter((item) => item.status == 1)
 })
+const noticeForm = ref(null)
+const rules = {
+  type: [{ required: true, message: '请选择通知规则种类', trigger: 'change' }],
+  rule: [{ required: true, message: '请选择规则', trigger: 'change' }],
+  notifyTimeType: [{ required: true, message: '请选择通知时间', trigger: 'change' }],
+  workstationId: [{ required: true, message: '请选择通知区域', trigger: 'change' }],
+}
+
 
 onMounted(() => {
   getActionNoticeData() //步骤操作的规则数据
@@ -483,11 +460,9 @@ const changeTemplate = async (row) => {
 // 新增确认
 const submit = async () => {
   try {
+    // 先做表单校验
+    await noticeForm .value.validate()
     let data
-    // let successMessage
-    //   新增
-    console.log(route.query.type, 'ggggdata')
-
     // 如果是类型 0 或 2，需要做时间转换
     if (noticeData.notifyTimeType == 0 || noticeData.notifyTimeType == 2) {
       const totalSeconds =
@@ -535,6 +510,8 @@ const submit = async () => {
 
 // 修改确认
 const submitUpdate = async () => {
+  // 先做表单校验
+  await noticeForm .value.validate()
   if (noticeData.notifyTimeType == 0 || noticeData.notifyTimeType == 2) {
     const totalSeconds =
       timeParts.day * 86400 + timeParts.hour * 3600 + timeParts.minute * 60 + timeParts.second
@@ -556,11 +533,13 @@ const submitUpdate = async () => {
       id: item.notifyConfigId // 有id则为修改，无id则为新增
     }))
   }
+
   // const data = await NotificationRules.updateNotifyConfig(payload)
   const data = await NotificationRules.insertNotifyConfig(payload)
 
   if (data) {
     ElMessage.success('更新成功')
+    goBack()
   }
 }
 
@@ -612,7 +591,7 @@ const resetQuery = () => {
 
 .checkContent {
   width: 95%;
-  height: 200px;
+  height:200px;
   margin: 10px auto;
 
   section {
@@ -636,8 +615,9 @@ const resetQuery = () => {
 
 .tableCon {
   width: 95%;
-  min-height: 300px;
+  max-height: 460px;
   margin: auto;
+  overflow-y: auto;
 
   p {
     margin: 20px 0;