refactor: 用beforeInit 代替 mounted

src/app/app.model.ts

@@ -28,9 +28,10 @@ const Model: ModelType = {
       this.model.linkList = value;
       this.model.tab = TAB_LINK_SET;
     },
-    initData() {
+    initData(callback: Function) {
       fetchLinkList((linkList: LinkType[]) => {
         this.setLinkList(linkList);
+        callback();
       });
     },
   },

src/app/app.ts

@@ -10,6 +10,9 @@ const Widget = BI.inherit(BI.Widget, {
   _store() {
     return BI.Models.getModel(appModel);
   },
+  beforeInit (callback) {
+    this.store.initData(callback);
+  },
   render() {
     return {
       type: Vtape,
@@ -34,6 +37,7 @@ const Widget = BI.inherit(BI.Widget, {
           }, {
             el: {
               type: linkStatus,
+              invisible: true,
             },
             left: 10,
             top: 10,
@@ -44,9 +48,6 @@ const Widget = BI.inherit(BI.Widget, {
       ],
     };
   },
-  mounted() {
-    this.store.initData();
-  },
 });
 BI.shortcut(className, Widget);
 

src/app/link_set/left/left.service.ts

@@ -1,18 +0,0 @@
-import {LinkType} from '@ui/type';
-import LeftItem from './left_item/left_item';
-
-export const getLinks = (linkList: LinkType[]): any => {
-  const links: any[] = [];
-  linkList.forEach((item: LinkType) => {
-    links.push({
-      type: LeftItem,
-      extraCls: item.isSelected ? 'left-item-selected' : '',
-      title: item.connectionName,
-      id: item.connectionId,
-      creator: item.creator,
-      text: item.text ? item.text : BI.i18nText('Dec-Dcm_Default'),
-    });
-  });
-  
-  return links;
-};

src/app/link_set/left/left.ts

@@ -1,7 +1,8 @@
 import {WidgetType, ListView} from '@ui';
 import Model from '../link_set.model';
 import {LinkType} from '@ui/type';
-import {getLinks} from './left.service';
+import LeftItem from './left_item/left_item';
+
 const className = 'fr.component.linkset.left';
 let leftContent: any = null;
 const Widget: WidgetType = {
@@ -10,7 +11,7 @@ const Widget: WidgetType = {
   },
   watch: {
     linkList(linkList: LinkType[]) {
-      leftContent.populate(BI.createItems(getLinks(linkList)));
+      leftContent.populate(BI.createItems(this._renderItems(linkList)));
     },
   },
   render() {
@@ -19,8 +20,21 @@ const Widget: WidgetType = {
       ref(_ref: any) {
         leftContent = _ref;
       },
+      items: this._renderItems(this.model.linkList),
     };
   },
+  _renderItems(linkList: LinkType[]) {
+    return BI.map(linkList, (index: number, item: LinkType) => {
+      return {
+        type: LeftItem,
+        cls: item.isSelected ? 'left-item-selected' : '',
+        title: item.connectionName,
+        id: item.connectionId,
+        creator: item.creator,
+        text: item.text ? item.text : BI.i18nText('Dec-Dcm_Default'),
+      };
+    });
+  },
 };
 BI.shortcut(className, BI.inherit(BI.Widget, Widget));
 export default className;

src/app/link_status/left/left.service.ts

@@ -1,18 +0,0 @@
-import {LinkType} from '@ui/type';
-import LeftItem from './left_item';
-
-export const getLinks = (linkList: LinkType[], selectTitle = ''): any => {
-  const links: any[] = [];
-  linkList.forEach((item: LinkType) => {
-    links.push({
-      type: LeftItem,
-      extraCls: item.connectionName === selectTitle ? 'left-item-selected' : '',
-      title: item.connectionName,
-      id: item.connectionId,
-      creator: item.creator,
-      text: item.text ? item.text : BI.i18nText('Dec-Dcm_Default'),
-    });
-  });
-  
-  return links;
-};

src/app/link_status/left/left.ts

@@ -1,7 +1,8 @@
 import {WidgetType, ListView} from '@ui';
 import Model from './left.model';
 import {LinkType} from '@ui/type';
-import {getLinks} from './left.service';
+import LeftItem from './left_item';
+
 const className = 'fr.component.linkStatus.left';
 let leftContent: any = null;
 const Widget: WidgetType = {
@@ -15,7 +16,7 @@ const Widget: WidgetType = {
     },
     statusSelected(title: string) {
       const linkList = this.model.linkList;
-      leftContent.populate(BI.createItems(getLinks(linkList, title)));
+      leftContent.populate(BI.createItems(this._renderItems(linkList, title)));
     },
   },
   render() {
@@ -24,8 +25,21 @@ const Widget: WidgetType = {
       ref(_ref: any) {
         leftContent = _ref;
       },
+      items: this._renderItems(this.model.linkList, this.model.statusSelected),
     };
   },
+  _renderItems(linkList: LinkType[], selectTitle = '') {
+    return BI.map(linkList, (index: number, item: LinkType) => {
+      return {
+        type: LeftItem,
+        extraCls: item.connectionName === selectTitle ? 'left-item-selected' : '',
+        title: item.connectionName,
+        id: item.connectionId,
+        creator: item.creator,
+        text: item.text ? item.text : BI.i18nText('Dec-Dcm_Default'),
+      };
+    });
+  },
 };
 BI.shortcut(className, BI.inherit(BI.Widget, Widget));
 export default className;

src/app/link_status/link_status.ts

@@ -50,9 +50,6 @@ const Widget: WidgetType = {
       }],
     };
   },
-  mounted() {
-    this.setVisible(false);
-  },
 };
 
 BI.shortcut(className, BI.inherit(BI.Widget, Widget));

src/app/link_status/right/right.ts

@@ -63,9 +63,6 @@ const Widget: WidgetType = {
       ],
     };
   },
-  mounted() {
-
-  },
 };
 BI.shortcut(className, BI.inherit(BI.Widget, Widget));
 export default className;

src/app/title/title.ts

@@ -5,6 +5,8 @@ import {TAB_LINK_SET, TAB_LINK_POOL} from '@private/constants';
 const className = 'fr.title';
 const Widget: WidgetType = {
   render() {
+    const hideCloseButton = isDesigner();
+    
     return {
       type: LeftRightVerticalAdapt,
       cls: 'dcm-title bi-border-bottom bi-font-bold',
@@ -38,7 +40,7 @@ const Widget: WidgetType = {
           {
             type: IconButton,
             cls: 'close-ha-font',
-            invisible: true,
+            invisible: !hideCloseButton,
             width: 30,
             height: 30,
             rgap: 10,
@@ -53,11 +55,6 @@ const Widget: WidgetType = {
       },
     };
   },
-  mounted() {
-    if (isDesigner()) {
-      this.CloseButton.setVisible(true);
-    }
-  },
 };
 BI.shortcut(className, BI.inherit(BI.Widget, Widget));
 

src/less/resource/common.less

@@ -2,6 +2,10 @@
   background-color: @background-color-normal;
   .dcm-title{
     background-color: @background-color-default;
+    .title-item-selected{
+      color: @background-color-highlight;
+      border-bottom: solid 2px @border-color-highlight;
+    }
   }
   .dcm-link-group{
     background-color: @background-color-default;