feat(油机sdk授权页面): 实现了表单提交的校验功能

对表单的提交进行了非空的判断

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

@@ -1,30 +1,35 @@
 <template>
   <div class="admin-authorize-editInfo">
     <el-dialog :title="formData.titleText" v-model="formData.isShowDialog" width="769px">
-      <el-form :model="formData.editData" ref="formRef" v-loading="formData.loading" size="default" label-width="80px">
+      <el-form :model="formData.editData"
+               :rules="rules"
+               ref="formRef"
+               v-loading="formData.loading"
+               size="default"
+               label-width="80px">
         <el-row :gutter="35">
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-            <el-form-item label="油站名称">
+            <el-form-item label="油站名称" prop="oilStation">
               <el-input v-model="formData.editData.oilStation" placeholder="格式：message.router.xxx" clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-            <el-form-item label="项目名称">
+            <el-form-item label="项目名称" prop="projectName">
               <el-input v-model="formData.editData.projectName" placeholder="格式：message.router.xxx" clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-            <el-form-item label="设备SN">
+            <el-form-item label="设备SN" prop="sn">
               <el-input v-model="formData.editData.sn" placeholder="格式：message.router.xxx" clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-            <el-form-item label="授权码">
+            <el-form-item label="授权码" prop="key">
               <el-input v-model="formData.editData.key" placeholder="格式：message.router.xxx" clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-            <el-form-item label="有效时间">
+            <el-form-item label="有效时间" prop="expiedTime">
               <el-date-picker
                 v-model="formData.editData.expiedTime"
                 type="datetime"
@@ -34,7 +39,7 @@
             </el-form-item>
           </el-col>
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-            <el-form-item label="状态">
+            <el-form-item label="状态" prop="state">
               <el-select v-model="formData.editData.state" class="m-2" placeholder="选择状态" >
                 <el-option
                   v-for="item in formData.options"
@@ -46,7 +51,7 @@
             </el-form-item>
           </el-col>
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-            <el-form-item label="备注">
+            <el-form-item label="备注" prop="remark">
               <el-input v-model="formData.editData.remark" placeholder="格式：message.router.xxx" clearable type="textarea"></el-input>
             </el-form-item>
           </el-col>
@@ -67,6 +72,7 @@ import { reactive, ref } from "vue";
 import {oilSdkTableModel} from "/@/api/admin/deviceAuthorization/oilSdkAuthorDto";
 import {OilSdkAuthorAPI} from "/@/api/admin/deviceAuthorization/oilSdkAuthor";
 import eventBus from "/@/utils/mitt";
+import {FormRules} from "element-plus";
 
 enum Form {
   ADD,
@@ -97,6 +103,27 @@ const formData = reactive({
   ]
 })
 
+const rules = reactive<FormRules>({
+  oilStation: [
+    { required: true, message: '请输入油站名称', trigger: 'blur' },
+  ],
+  projectName: [
+    { required: true, message: '请输入项目名称', trigger: 'blur' },
+  ],
+  sn: [
+    { required: true, message: '请输入设备SN号', trigger: 'blur' },
+  ],
+  key: [
+    { required: true, message: '请输入设备授权码', trigger: 'blur' },
+  ],
+  expiedTime: [
+    { type: 'date', required: true, message: '请选择有效期', trigger: 'blur' },
+  ],
+  state: [
+    { required: true, message: '请选择状态', trigger: 'blur' },
+  ],
+})
+
 const formRef = ref()
 
 const openDialog = (val) => {
@@ -149,7 +176,6 @@ const onSubmit =  () => {
     }
     formData.loading = false
   })
-
 }
 
 defineExpose({