perf: 优化表单必填校验提醒@0.9.4-3

package.json

@@ -1,6 +1,6 @@
 {
   "name": "element-pro-crud",
-  "version": "0.9.4-2",
+  "version": "0.9.4-3",
   "author": "BoBo<[email protected]>",
   "main": "lib/pro-crud.js",
   "files": [

src/component/crud-table/src/ProFormDialog.vue

@@ -48,8 +48,9 @@
 <script lang="ts">
 import guid from '@/utils/generator';
 import { DML, fn } from '@/types/common';
-import { defineComponent, PropType, ref, Ref, reactive, computed, set, watch, watchEffect } from '@vue/composition-api';
+import { defineComponent, PropType, ref, Ref, reactive, computed, set, watch, watchEffect, h } from '@vue/composition-api';
 import ProForm from '@/component/pro-form/src/ProForm.vue';
+import { VNode } from 'vue';
 
 const STATUS = {
   CREATE: 0,
@@ -122,7 +123,7 @@ export default defineComponent({
     },
   },
   setup(props, { root, emit }) {
-    const { $PROCRUD, $message } = root;
+    const { $PROCRUD, $message, $notify } = root;
 
     const generateDialogForm: Ref<any> = ref(null);
 
@@ -255,10 +256,21 @@ export default defineComponent({
             });
           });
         })
-        .catch(() => {
+        .catch((e) => {
           // 数据校验失败
+          // 数据校验失败
+          const messages = Object.values(e)
+            .flat(1)
+            .map((_) => _.message);
+          const newDatas: VNode[] = [];
+          for (const i of messages) {
+            newDatas.push(h('p', {}, i));
+          }
+          $notify.error({
+            title: '表单校验失败,请检查',
+            message: h('div', { style: 'color: teal' }, newDatas),
+          });
           btnSaveIsLoading.value = false;
-          $message.warning('表单校验失败,请检查');
         });
     };
 

src/component/form-designer/src/FormDesigner.vue

@@ -485,9 +485,14 @@ export default {
     },
     // 预览点确定获取表单数据
     handleTest() {
-      this.$refs.proForm.getData().then((data) => {
-        this.$alert(data, '').catch(() => {});
-      });
+      this.$refs.proForm
+        .getData()
+        .then((data) => {
+          this.$alert(data, '').catch(() => {});
+        })
+        .catch((err) => {
+          this.$alert(JSON.stringify(err), '').catch(() => {});
+        });
     },
     // 生成json
     handleGenerateJson() {

src/component/pro-form/src/ProForm.vue

@@ -302,14 +302,22 @@ export default class ProForm extends Vue {
   }
 
   // ----全局api----
-
   // 先验证再获取表单内容
   getData(original: boolean) {
     return new Promise((resolve, reject) => {
       this.$refs.proForm.validate((valid, obj) => {
         if (valid) {
           resolve(original ? JSON.parse(JSON.stringify(this.models)) : this.filterFormData());
         } else {
+          // 校验失败时focus到文本框
+          setTimeout(() => {
+            const isError: any = document.getElementsByClassName('is-error');
+            if (isError[0].querySelector('input')) {
+              isError[0].querySelector('input').focus();
+            } else if (isError[0].querySelector('textarea')) {
+              isError[0].querySelector('textarea').focus();
+            }
+          }, 100);
           reject(obj);
         }
       });

src/component/pro-form/src/styles/grid-table-form.scss

@@ -37,11 +37,12 @@
       outline: none;
     }
     .el-form-item__error {
-      top: calc(100% - 14px);
+      top: calc(100% - 10px);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       right: 0;
+      left: 15px;
     }
   }
 }