feat: 优化成功和失败的提示，添加loading

.eslintrc.js

@@ -169,7 +169,6 @@ module.exports = {
     // "one-var": ["error", "never"], // 变量统一声明
     // 比较运算符 & 相等运算符
     "eqeqeq": "error", // 使用 === 和 !== 代替 == 和 !=
-    "no-case-declarations": "error", // 禁止在 case 或 default 子句中出现变量声明
     "no-nested-ternary": "error", // 禁止混合的三目运算符
     "no-unneeded-ternary": "error", //禁止可以在有更简单的可替代的表达式时使用三元操作符
     // 条件

src/app/app.component.scss

@@ -248,6 +248,55 @@
     
   }
 }
+.popover-notitle{
+  .bi-header-background{
+    display: none;
+  }
+  .bi-absolute-layout{
+    top:0px !important;
+  }
+}
+.bi-custom-show{
+  .show-content{
+    text-align: center;
+    .loading-icon{
+      display: block;
+      background: url(../img/loading.gif) center center no-repeat;
+      background-size: contain;
+      margin: 0 auto;
+      margin-bottom: 18px;
+    }
+    .success-icon{
+      display: block;
+      background: url(../img/success.png) center center no-repeat;
+      background-size: contain;
+      margin: 0 auto;
+      margin-bottom: 18px;
+    }
+    .error-icon{
+      display: block;
+      background: url(../img/error.png) center center no-repeat;
+      background-size: contain;
+      margin: 0 auto;
+      margin-bottom: 18px;
+    }
+    .buttons{
+      margin-top: 18px;
+      div{
+        margin: 0 4px;
+      }
+    }
+  }
+  .show-more{
+    text-align: left !important;
+    height: 73px;
+    background: #F2F4F7;
+    margin-bottom: 10px;
+    padding: 5px;
+    margin-top: 10px;
+  }
+}
+
 .link-font .b-font:before {
   content: "\e759";
   color: inherit;

src/app/link_set/link-set.model.ts

@@ -1,8 +1,8 @@
 import {ModelType} from '@ui/index';
 import {LinkType} from '@ui/type';
-import {deleteConnection, getConnectionStatus} from '@shared/crud/crud.request';
+import {deleteConnection, testConnection} from '@shared/crud/crud.request';
 import {databaseTyle, getCnnectionName} from './select/select.service';
-import {confirm} from '@shared/service/dialog.service';
+import dialog from '@shared/service/dialog.service';
 import {saveConnection} from './link-set.service';
 
 const className = 'fr.model.linkset';
@@ -15,7 +15,7 @@ const Model: ModelType = {
      */
     setLinkSelected(name: string) {
       if (this.model.linkSelected && this.model.linkSelected.isSelected) {
-        confirm('当前设置尚未保存，是否保存？', (isConfirm: boolean) => {
+        dialog.confirm('当前设置尚未保存，是否保存？', (isConfirm: boolean) => {
           if (isConfirm) {
             saveConnection(this.model.linkUpdate).then(() => {
               this.setEdit(false);
@@ -50,9 +50,7 @@ const Model: ModelType = {
           });
           break;
         case '测试连接':
-          getConnectionStatus(id, (res: any) => {
+          this._textLink(id);
-          
-          });
           break;
         case '复制':
           this.copyLink(id);
@@ -61,6 +59,20 @@ const Model: ModelType = {
           break;
       }
     },
+    _textLink(id: string) {
+      const loadingId = dialog.loading('正在测试连接，请稍候...');
+      const link = this.model.linkList.find((item: LinkType) => item.connectionId === id);
+      testConnection(link, (res: any) => {
+        dialog.close(loadingId);
+        if (res && res.errorCode) {
+          dialog.linkFail(`${link.connectionName}测试连接失败`, res.errorMsg, () => {
+            this._textLink(id);
+          });
+        } else {
+          dialog.success('连接成功');
+        }
+      });
+    },
     copyLink(id: string) {
       const name = getCnnectionName(this.model.linkList);
       let data = {};
@@ -121,7 +133,7 @@ const Model: ModelType = {
     },
     setNewLink(value: string) {
       if (this.model.linkSelected && this.model.linkSelected.isSelected) {
-        confirm('当前设置尚未保存，是否保存？', (isConfirm: boolean) => {
+        dialog.confirm('当前设置尚未保存，是否保存？', (isConfirm: boolean) => {
           if (isConfirm) {
             saveConnection(this.model.linkUpdate).then(() => {
               this.setEdit(true);

src/shared/crud/crud.request.ts

@@ -56,10 +56,12 @@ export function testConnection(data: LinkType, cb: Function): void{
   console.log('%cdata: ', 'color: MidnightBlue; background: Aquamarine;', data);
   if (Dec) {
     Dec.reqPost(`/v10/config/connection/test`, data, (res: any) => {
-      cb(res.data);
+      cb(res);
     });
   } else {
-    cb('success');
+    setTimeout(() => {
+      cb({errorCode:'500', errorMsg:'createConnectionThread not start!'});
+    }, 2000);
   }
 }
 

src/shared/service/dialog.service.ts

@@ -1,40 +1,218 @@
-export const confirm = (message: string, onConfirm: Function): void => {
+import {Label, Vertical, Left, Button, Layout} from '@ui/index';
-  const id = BI.UUID();
+class Dialog {
-  BI.Popovers.create(id, {
+  /**
-    type: 'bi.bar_popover',
+   * 提示
-    size: 'normal',
+   * @param message
-    header: '提示',
+   * @param onConfirm
-    width: 450,
+   */
-    height: 220,
+  public confirm(message: string, onConfirm: Function): string {
-    body: {
+    const id = BI.UUID();
-      type: 'bi.left',
+    BI.Popovers.create(id, {
-      cls: 'comfirm-content',
+      type: 'bi.bar_popover',
-      items: [
+      size: 'normal',
+      header: '提示',
+      width: 450,
+      height: 220,
+      body: {
+        type: 'bi.left',
+        cls: 'comfirm-content',
+        items: [
+          {
+            type: 'bi.layout',
+            cls: 'comfirm-icon',
+            width: 50,
+            height: 50,
+          },
+          {
+            type: 'bi.label',
+            text: message,
+          },
+        ],
+      },
+      listeners: [
         {
-          type: 'bi.layout',
+          eventName: 'EVENT_CONFIRM',
-          cls: 'comfirm-icon',
+          action () {
-          width: 50,
+            onConfirm ? onConfirm(true) : null;
-          height: 50,
+          },
         },
         {
-          type: 'bi.label',
+          eventName: 'EVENT_CANCEL',
-          text: message,
+          action () {
+            onConfirm ? onConfirm(false) : null;
+          },
         },
       ],
-    },
+    }).open(id);
-    listeners: [
+  
-      {
+    return id;
-        eventName: 'EVENT_CONFIRM',
+  }
-        action () {
+  public loading(message: string): string {
-          onConfirm ? onConfirm(true) : null;
+    const body = {
+      type: 'bi.center_adapt',
+      cls: 'show-content',
+      items: [
+        {
+          type: Vertical,
+          items:[
+            {
+              type: 'bi.layout',
+              cls: 'loading-icon',
+              width: 100,
+              height: 100,
+            },
+            {
+              type: Label,
+              text: message,
+            },
+          ],
         },
-      },
+      ],
-      {
+    };
-        eventName: 'EVENT_CANCEL',
+    
-        action () {
+    return this.show(body);
-          onConfirm ? onConfirm(false) : null;
+  }
+
+  public success(message: string): string {
+    const body = {
+      type: 'bi.center_adapt',
+      cls: 'show-content',
+      items: [
+        {
+          type: Vertical,
+          items:[
+            {
+              type: 'bi.layout',
+              cls: 'success-icon',
+              width: 100,
+              height: 100,
+            },
+            {
+              type: Label,
+              text: message,
+            },
+          ],
+        },
+      ],
+    };
+    
+    return this.show(body, 1000);
+  }
+
+  public linkFail(text: string, more: string, cb?: Function): string {
+    let Popover: any = null;
+    let More: any = null;
+    const id = BI.UUID();
+    const that = this;
+    const body = {
+      type: Vertical,
+      items: [
+        {
+          type: 'bi.center_adapt',
+          cls: 'show-content',
+          tgap:10,
+          items: [
+            {
+              type: Vertical,
+              items:[
+                {
+                  type: Layout,
+                  cls: 'error-icon',
+                  width: 100,
+                  height: 100,
+                },
+                {
+                  type: Label,
+                  text,
+                },
+                {
+                  type: Left,
+                  cls:'buttons',
+                  items:[
+                    {
+                      type: Button,
+                      text:'详细信息',
+                      level: 'ignore',
+                      handler() {
+                        const isHide = this.getText() === '详细信息';
+                        Popover.element.css({
+                          height: isHide ? '290' : '220',
+                        });
+                        More.setVisible(isHide);
+                        this.setText(isHide ? '收起信息' : '详细信息');
+                      },
+                    },
+                    {
+                      type: Button,
+                      text:'返回',
+                      level: 'ignore',
+                      handler() {
+                        that.close(id);
+                      },
+                    },
+                    {
+                      type: Button,
+                      text:'重新连接',
+                      handler() {
+                        that.close(id);
+                        cb ? cb() : null;
+                      },
+                    },
+                  ],
+                },
+              
+              ],
+            },
+          ],
+        }, {
+          type: Label,
+          cls:'show-more',
+          text:more,
+          invisible: true,
+          ref(ref: any) {
+            More = ref;
+          },
         },
+      ],
+    };
+    BI.Popovers.create(id, {
+      type: 'bi.popover',
+      cls:'popover-notitle',
+      extraCls:'bi-custom-show',
+      size: 'normal',
+      width: 450,
+      height: 220,
+      body,
+      ref(ref: any) {
+        Popover = ref;
       },
-    ],
+    }).open(id);
-  }).open(id);
+    
-};
+    return id;
+  }
+
+  public close(id: string): void{
+    BI.Popovers.close(id);
+  }
+  public show(body: any, autoClose = 0): string {
+    const id = BI.UUID();
+    BI.Popovers.create(id, {
+      type: 'bi.popover',
+      cls:'popover-notitle',
+      extraCls:'bi-custom-show',
+      size: 'normal',
+      width: 450,
+      height: 220,
+      body,
+    }).open(id);
+    if (autoClose > 0) {
+      setTimeout(() => {
+        this.close(id);
+      }, autoClose);
+    }
+    
+    return id;
+  }
+}
+
+export default new Dialog();