refactor: 用model控制组件状态

src/shared/components/linkfail/linkfail.model.ts

@@ -0,0 +1,15 @@
+const className = 'dec.dcm.model.shared.linkfail';
+export const Model = BI.inherit(Fix.Model, {
+  state() {
+    return {
+      showErrMessage: false,
+    };
+  },
+  actions: {
+    setShowErrMessage(isShow: boolean) {
+      this.model.showErrMessage = isShow;
+    },
+  },
+});
+BI.model(className, Model);
+export default className;

src/shared/components/linkfail/linkfail.ts

@@ -0,0 +1,108 @@
+import ModelName from './linkfail.model';
+import {CenterAdapt, Vertical, Layout, Label, VerticalAdapt, Button} from '@ui/index';
+export const EVENT_CLOSE = 'EVENT_CLOSE';
+export const EVENT_RETRY = 'EVENT_RETRY';
+const className = 'dec.dcm.shared.linkfail';
+const Widget = BI.inherit(BI.Widget, {
+  _store() {
+    return BI.Models.getModel(ModelName);
+  },
+  watch: {
+    showErrMessage(err: string) {
+      this.dialogMore.setVisible(!!err);
+      this.setText(err ? BI.i18nText('Dec-Dcm_Connection_Handup_Information') : BI.i18nText('Dec-Dcm_Connection_Detailed_Information'));
+    },
+  },
+  render() {
+    const {text, errMessage} = this.options;
+    const {showErrMessage} = this.model;
+    
+    return {
+      type: CenterAdapt,
+      cls: 'bi-z-index-mask',
+      items: [{
+        el: {
+          type: CenterAdapt,
+          cls: 'bi-card',
+          width: 450,
+          items: [
+            {
+              type: Vertical,
+              items: [
+                {
+                  type: CenterAdapt,
+                  cls: 'bi-card',
+                  vgap: 10,
+                  items: [
+                    {
+                      type: Vertical,
+                      vgap: 10,
+                      items: [
+                        {
+                          type: Layout,
+                          cls: 'dcm-error-icon',
+                          width: 270,
+                          height: 100,
+                          textAlign: 'center',
+                        },
+                        {
+                          type: Label,
+                          text,
+                        },
+                        {
+                          type: VerticalAdapt,
+                          hgap: 5,
+                          items: [
+                            {
+                              type: Button,
+                              text: BI.i18nText('Dec-Dcm_Connection_Detailed_Information'),
+                              level: 'ignore',
+                              handler: () => {
+                                this.store.setShowErrMessage(!this.model.showErrMessage);
+                              },
+                            },
+                            {
+                              type: Button,
+                              text: BI.i18nText('Dec-Dcm_Back'),
+                              level: 'ignore',
+                              handler: () => {
+                                this.fireEvent(EVENT_CLOSE);
+                              },
+                            },
+                            {
+                              type: Button,
+                              text: BI.i18nText('Dec-Dcm_Connection_ReConnect'),
+                              handler: () => {
+                                this.fireEvent(EVENT_RETRY);
+                              },
+                            },
+                          ],
+                        },
+                      
+                      ],
+                    },
+                  ],
+                }, {
+                  type: Label,
+                  cls: 'bi-header-background',
+                  text: errMessage,
+                  invisible: !showErrMessage,
+                  textAlign: 'left',
+                  height: 73,
+                  width: 400,
+                  vgap: 10,
+                  lgap: 5,
+                  ref: _ref => {
+                    this.dialogMore = _ref;
+                  },
+                },
+              ],
+            },
+          ],
+        },
+      }],
+    };
+  },
+});
+BI.shortcut(className, Widget);
+export default className;

src/shared/service/dialog.service.ts

@@ -1,4 +1,6 @@
-import {Label, Vertical, Button, Layout, CenterAdapt, VerticalAdapt} from '@ui/index';
+import {Label, Vertical, CenterAdapt} from '@ui/index';
+import LinkFail, {EVENT_CLOSE, EVENT_RETRY} from '../components/linkfail/linkfail';
+
 class Dialog {
   /**
    * 提示
@@ -131,98 +133,29 @@ class Dialog {
   }
 
   public linkFail(text: string, more: string, cb?: Function): string {
-    let dialogMore = null;
-    let showErrMessage = false;
     const id = BI.UUID();
-    const body = {
-      type: Vertical,
-      items: [
+    const linkFailWidget = BI.createWidget({
+      type: LinkFail,
+      text,
+      errMessage: more,
+      listeners: [
         {
-          type: CenterAdapt,
-          cls: 'bi-card',
-          vgap: 10,
-          items: [
-            {
-              type: Vertical,
-              vgap: 10,
-              items: [
-                {
-                  type: Layout,
-                  cls: 'dcm-error-icon',
-                  width: 270,
-                  height: 100,
-                  textAlign: 'center',
-                },
-                {
-                  type: Label,
-                  text,
-                },
-                {
-                  type: VerticalAdapt,
-                  hgap: 5,
-                  items: [
-                    {
-                      type: Button,
-                      text: BI.i18nText('Dec-Dcm_Connection_Detailed_Information'),
-                      level: 'ignore',
-                      handler() {
-                        showErrMessage = !showErrMessage;
-                        dialogMore.setVisible(showErrMessage);
-                        this.setText(showErrMessage ? BI.i18nText('Dec-Dcm_Connection_Handup_Information') : BI.i18nText('Dec-Dcm_Connection_Detailed_Information'));
-                      },
-                    },
-                    {
-                      type: Button,
-                      text: BI.i18nText('Dec-Dcm_Back'),
-                      level: 'ignore',
-                      handler: () => {
-                        this.remove(id);
-                      },
-                    },
-                    {
-                      type: Button,
-                      text: BI.i18nText('Dec-Dcm_Connection_ReConnect'),
-                      handler: () => {
-                        this.remove(id);
-                        cb ? cb() : null;
-                      },
-                    },
-                  ],
-                },
-              
-              ],
-            },
-          ],
-        }, {
-          type: Label,
-          cls: 'bi-header-background',
-          text: more,
-          invisible: !showErrMessage,
-          textAlign: 'left',
-          height: 73,
-          width: 400,
-          vgap: 10,
-          lgap: 5,
-          ref: _ref => {
-            dialogMore = _ref;
+          eventName: EVENT_CLOSE,
+          action: () => {
+            BI.Maskers.remove(id);
+          },
+        },
+        {
+          eventName: EVENT_RETRY,
+          action: () => {
+            BI.Maskers.remove(id);
+            cb ? cb() : null;
           },
         },
       ],
-    };
-
+    });
     BI.Maskers.create(id, null, {
-      render: {
-        type: CenterAdapt,
-        cls: 'bi-z-index-mask',
-        items: [{
-          el: {
-            type: CenterAdapt,
-            cls: 'bi-card',
-            width: 450,
-            items: [body],
-          },
-        }],
-      },
+      render: linkFailWidget,
     });
     BI.Maskers.show(id);