From 83b9ba520edf6752d88984a700ac59f7d438692a Mon Sep 17 00:00:00 2001
From: BoBoooooo <17746714@qq.com>
Date: Thu, 22 Apr 2021 11:57:42 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E5=BF=85=E5=A1=AB=E6=A0=A1=E9=AA=8C=E6=8F=90=E9=86=92@0.9.4-3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  2 +-
 .../crud-table/src/ProFormDialog.vue          | 20 +++++++++++++++----
 .../form-designer/src/FormDesigner.vue        | 11 +++++++---
 src/component/pro-form/src/ProForm.vue        | 10 +++++++++-
 .../pro-form/src/styles/grid-table-form.scss  |  3 ++-
 5 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index ba608a5..ec37160 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-pro-crud",
-  "version": "0.9.4-2",
+  "version": "0.9.4-3",
   "author": "BoBo<BoBoooooo159@gmail.com>",
   "main": "lib/pro-crud.js",
   "files": [
diff --git a/src/component/crud-table/src/ProFormDialog.vue b/src/component/crud-table/src/ProFormDialog.vue
index 3f234e1..8732e50 100644
--- a/src/component/crud-table/src/ProFormDialog.vue
+++ b/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('表单校验失败,请检查');
         });
     };
 
diff --git a/src/component/form-designer/src/FormDesigner.vue b/src/component/form-designer/src/FormDesigner.vue
index 61d5735..0ca13cb 100644
--- a/src/component/form-designer/src/FormDesigner.vue
+++ b/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() {
diff --git a/src/component/pro-form/src/ProForm.vue b/src/component/pro-form/src/ProForm.vue
index 12c765f..de202e1 100644
--- a/src/component/pro-form/src/ProForm.vue
+++ b/src/component/pro-form/src/ProForm.vue
@@ -302,7 +302,6 @@ export default class ProForm extends Vue {
   }
 
   // ----全局api----
-
   // 先验证再获取表单内容
   getData(original: boolean) {
     return new Promise((resolve, reject) => {
@@ -310,6 +309,15 @@ export default class ProForm extends Vue {
         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);
         }
       });
diff --git a/src/component/pro-form/src/styles/grid-table-form.scss b/src/component/pro-form/src/styles/grid-table-form.scss
index 7b2d446..178e736 100644
--- a/src/component/pro-form/src/styles/grid-table-form.scss
+++ b/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;
     }
   }
 }