feat(油机sdk授权页面): 优化了表单校验，和页面布局

对提交表单中的时间进行了进一步的校验，限制选择从当前时间之后，修改页面的布局

admin.ui.plus-master/src/views/admin/authorize/components/form-edit.vue

@@ -34,7 +34,7 @@
                 v-model="formData.editData.expiedTime"
                 type="datetime"
                 value-format="YYYY-MM-DD HH:mm:ss"
-                placeholder="Select date and time"
+                placeholder="选择有效时间"
               />
             </el-form-item>
           </el-col>
@@ -103,6 +103,16 @@ const formData = reactive({
   ]
 })
 
+/**有效时间选择校验*/
+const validateDate = (rule: any, value: any, callback: any) => {
+  if(new Date(value).getTime() > Date.now()){
+    callback()
+  }else{
+    callback(new Error('选择的时间已失效'))
+  }
+}
+
+/**表单校验*/
 const rules = reactive<FormRules>({
   oilStation: [
     { required: true, message: '请输入油站名称', trigger: 'blur' },
@@ -118,12 +128,14 @@ const rules = reactive<FormRules>({
   ],
   expiedTime: [
     { type: 'date', required: true, message: '请选择有效期', trigger: 'blur' },
+    { validator: validateDate, trigger: 'blur' }
   ],
   state: [
     { required: true, message: '请选择状态', trigger: 'blur' },
   ],
 })
 
+
 const formRef = ref()
 
 const openDialog = (val) => {

admin.ui.plus-master/src/views/admin/authorize/index.vue

@@ -26,7 +26,7 @@
                 </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-                <el-form-item label="选择时间">
+                <el-form-item label="有效时间">
                   <el-date-picker
                     v-model="sdkData.time"
                     type="datetimerange"
@@ -37,29 +37,19 @@
                   />
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" >
+              <el-col :xs="48" :sm="24" :md="16" :lg="12" :xl="8" >
                 <el-form-item>
                   <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
-                </el-form-item>
-              </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" >
-                <el-form-item>
                   <el-button type="primary" icon="ele-Delete" @click="onReset"> 重置 </el-button>
-                </el-form-item>
-              </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" >
-                <el-form-item>
-                  <el-button type="primary" icon="ele-Delete" @click="onAdd"> 添加 </el-button>
-                </el-form-item>
-              </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" >
-                <el-form-item>
-                  <el-button type="primary" icon="ele-UploadFilled" @click="uploadFiles"> 批量导入 </el-button>
-                  <el-button type="primary" icon="ele-Document" @click="exportTable"> 导出表格 </el-button>
+                  <el-button type="primary" icon="ele-Plus" @click="onAdd"> 添加 </el-button>
                 </el-form-item>
               </el-col>
             </el-row>
           </el-form>
+        <div class="my-flex my-flex-end" style="margin: 30px 30px 0 0">
+          <el-button type="primary" icon="ele-UploadFilled" @click="uploadFiles"> 批量导入 </el-button>
+          <el-button type="primary" icon="ele-Document" @click="exportTable"> 导出表格 </el-button>
+        </div>
         </el-card>
     <!--表格-->
     <el-card style="height: 70vh" class="my-fill mt8" shadow="hover">