完善验证

src/views/resource/oss.vue

@@ -100,7 +100,7 @@
         v-model="details.popUpShow.add"
       >
         <div class="el-dialog-add">
-          <el-form :inline="true" :model="details.form" label-width="100px">
+          <el-form ref="formRef" :inline="true" :model="details.form" label-width="100px">
             <el-form-item
               v-for="item in details.addFormOption"
               :key="item.prop"
@@ -163,7 +163,7 @@
                   </el-button>
 
                   <el-button type="primary" icon="Position" @click="handleSubmitAdd">
-                    新 增
+                    提 交
                   </el-button>
                 </div>
               </div>
@@ -274,6 +274,7 @@ console.log('$store.state.permission :>> ', $store.state);
 
 // 组件实例
 const tableNodeRef = ref();
+const formRef = ref();
 
 const details = reactive<any>({
   /** 是否开启搜索 */
@@ -592,25 +593,29 @@ const handleEdit = row => {
 };
 
 /** 新增提交 */
-const handleSubmitAdd = async () => {
-  try {
-    details.loadingObj.pageLoading = true;
+const handleSubmitAdd = () => {
+  formRef.value.validate(async valid => {
+    if (!valid) return;
 
-    const submitData = deepClone(details.form);
+    try {
+      details.loadingObj.pageLoading = true;
 
-    details.popUpShow.add = false;
-    const res = await add(submitData);
+      const submitData = deepClone(details.form);
 
-    const { code, data, msg } = res.data;
-    if (code !== 200) return;
+      details.popUpShow.add = false;
+      const res = await add(submitData);
 
-    ElMessage.success(msg);
-    onLoad();
-  } catch (error) {
-    console.log('error :>> ', error);
-  } finally {
-    details.loadingObj.pageLoading = false;
-  }
+      const { code, data, msg } = res.data;
+      if (code !== 200) return;
+
+      ElMessage.success(msg);
+      onLoad();
+    } catch (error) {
+      console.log('error :>> ', error);
+    } finally {
+      details.loadingObj.pageLoading = false;
+    }
+  });
 };
 
 /** 删除提交 */