refactor: 去除自己绑定的按钮事件

private/constants.ts

@@ -1 +1,5 @@
 export const OTHER_CONNECT = 'other';
+export const DEFAULT_INFO = 'DESIGNER';
+export const ACTION_DELETE = 'ACTION_DELETE';
+export const ACTION_COPY = 'ACTION_COPY';
+export const ACTION_TEST = 'ACTION_TEST';

src/app/app.component.scss

@@ -5,7 +5,7 @@
   .title{
     background-color: #fff;
     border-bottom: 1px solid #e8eaed;
-    .title-item{
+    .dec-title-item{
       height: 39px;
       line-height: 39px;
       padding-left: 15px;
@@ -19,6 +19,10 @@
       font-weight: 700;
       cursor: pointer;
     }
+    .dec-title-item-selected{
+      color: '#3685f2';
+      border-bottom: solid 2px #3685f2;
+    }
     .close-button {
       position: absolute !important;
       right: 5px;

src/app/link_set/left/left_item/left.item.component.ts

@@ -1,6 +1,7 @@
-import {WidgetType, Left, Label, Icon} from '@ui';
+import {WidgetType, Left, Label, Icon, TextButton} from '@ui';
 import ItemIcon from './left.item.icon.component';
 import Model from '../../link-set.model';
+import {ACTION_COPY, ACTION_TEST, ACTION_DELETE, DEFAULT_INFO} from '@private/constants';
 const className = 'fr.component.linkSet.left.item';
 const Widget: WidgetType = {
   props: {
@@ -28,11 +29,14 @@ const Widget: WidgetType = {
           title,
         },
         {
-          type: Label,
+          type: TextButton,
           cls:'link-title',
           textAlign: 'left',
           text: title,
           title,
+          handler: () => {
+            this.store.setLinkSelected(title);
+          },
         },
         {
           type: Left,
@@ -42,24 +46,27 @@ const Widget: WidgetType = {
               type: ItemIcon,
               cls: 'link-text-font',
               title: BI.i18nText('Dec-Dcm_Test_Connection'),
+              value: ACTION_TEST,
               id,
             },
             {
               type: ItemIcon,
               cls: 'copy-font',
               title: BI.i18nText('Dec-Dcm_Copy'),
+              value: ACTION_COPY,
               id,
             },
             {
               type: ItemIcon,
               cls: 'info-font',
-              title: `${BI.i18nText('Dec-Dcm_Type')}：${text === 'DESIGNER' ? BI.i18nText('Dec-Dcm_Other') : text} \r\n${BI.i18nText('Dec-Dcm_Creator')}：${creator}`,
+              title: `${BI.i18nText('Dec-Dcm_Type')}：${text === DEFAULT_INFO ? BI.i18nText('Dec-Dcm_Other') : text} \r\n${BI.i18nText('Dec-Dcm_Creator')}：${creator}`,
               id,
             },
             {
               type: ItemIcon,
               cls: 'delete-font',
               title: BI.i18nText('Dec-Dcm_Delete'),
+              value: ACTION_DELETE,
               id,
             },
           ],
@@ -68,12 +75,6 @@ const Widget: WidgetType = {
       ],
     };
   },
-  mounted() {
-    const {title} = this.options;
-    this.element.on('click', () => {
-      this.store.setLinkSelected(title);
-    });
-  },
 };
 BI.shortcut(className, BI.inherit(BI.Widget, Widget));
 export default className;

src/app/link_set/left/left_item/left.item.icon.component.ts

@@ -1,16 +1,18 @@
-import {WidgetType, Icon, BubbleCombo, TextBubblePopupBarView} from '@ui/index';
+import {WidgetType, Icon, BubbleCombo, TextBubblePopupBarView, IconButton} from '@ui/index';
 import Model from '../../link-set.model';
+import {ACTION_DELETE} from '@private/constants';
+
 const className = 'fr.component.linkSet.left.item.icon';
 const Widget: WidgetType = {
   _store() {
     return BI.Models.getModel(Model);
   },
   render() {
-    const {cls, title, id} = this.options;
+    const {cls, title, id, value} = this.options;
     const that = this;
     let iconContent: any = null;
     let combo: any = null;
-    if (title === BI.i18nText('Dec-Dcm_Delete')) {
+    if (value === ACTION_DELETE) {
       return {
         type: BubbleCombo,
         direction: 'bottom',
@@ -60,27 +62,20 @@ const Widget: WidgetType = {
     }
     
     return {
-      type: Icon,
+      type: IconButton,
       cls,
       extraCls: 'action-icon',
       height: 24,
       width: 26,
       title,
+      handler: () => {
+        const {value, id, title} = this.options;
+        if (value !== ACTION_DELETE) {
+          this.store.onIconClick(title, id);
+        }
+      },
     };
   },
-  mounted() {
-    const {title, id} = this.options;
-    if (title !== BI.i18nText('Dec-Dcm_Delete')) {
-      this.element.on('click', (event: any) => {
-        event.stopPropagation();
-        this.store.onIconClick(title, id);
-      });
-    } else {
-      this.element.on('click', (event: any) => {
-        event.stopPropagation();
-      });
-    }
-  },
 };
 BI.shortcut(className, BI.inherit(BI.Widget, Widget));
 export default className;

src/app/link_set/more/more.link.component.ts

@@ -43,15 +43,10 @@ const Widget: WidgetType = {
         text: item.text,
         name: item.databaseType,
         selected: text === item.text,
-        listeners: [
-          {
-            eventName: 'EVENT_SELECT',
-            action (text: string) {
-              that._renderItems(text);
-              that.fireEvent('EVENT_SELECT', text);
-            },
-          },
-        ],
+        handler: () => {
+          that._renderItems(item.text);
+          that.fireEvent('EVENT_SELECT', item.text);
+        },
       });
     });
     morkLinkItem.populate(BI.createItems(items));

src/app/link_set/more/more.link.item.component.ts

@@ -29,12 +29,6 @@ const Widget: WidgetType = {
       ],
     };
   },
-  mounted() {
-    const {text} = this.options;
-    this.element.on('click', () => {
-      this.fireEvent('EVENT_SELECT', text);
-    });
-  },
 };
-BI.shortcut(className, BI.inherit(BI.Widget, Widget));
+BI.shortcut(className, BI.inherit(BI.BasicButton, Widget));
 export default className;

src/app/link_set/right/nothing.component.ts

@@ -17,7 +17,6 @@ const Widget: WidgetType = {
           },
           {
             type:Label,
-            cls: 'Dec-Dcm_Tips',
             height: 20,
             text: BI.i18nText('Dec-Dcm_Connection_Plase_Add_One'),
           },

src/app/link_status/left/left.item.component.ts

@@ -1,4 +1,4 @@
-import {WidgetType, Left, Label} from '@ui';
+import {WidgetType, Left, Label, TextButton} from '@ui';
 import Model from './left.model';
 const className = 'fr.component.linkStatus.left.item';
 const Widget: WidgetType = {
@@ -19,21 +19,18 @@ const Widget: WidgetType = {
       extraCls,
       items: [
         {
-          type: Label,
+          type: TextButton,
           cls:'link-title',
           textAlign: 'left',
           text: title,
           title,
+          handler: () => {
+            this.store.setStatusSelected(title);
+          },
         },
       ],
     };
   },
-  mounted() {
-    const {title} = this.options;
-    this.element.on('click', () => {
-      this.store.setStatusSelected(title);
-    });
-  },
 };
-BI.shortcut(className, BI.inherit(BI.Widget, Widget));
+BI.shortcut(className, BI.inherit(BI.BasicButton, Widget));
 export default className;

src/app/title/title.component.ts

@@ -1,7 +1,6 @@
 import {Left, WidgetType, IconButton} from '@ui/index';
 import TitleItem from './title_item/title_item.component';
 import {isDesigner, closeWindow} from '@shared/crud/crud.request';
-const tabs = ['Dec-Dcm_Connection_Management', 'Dec-Dcm_Pool_Connection_Management'];
 const className = 'fr.title';
 const Widget: WidgetType = {
   render() {
@@ -9,12 +8,27 @@ const Widget: WidgetType = {
       type: Left,
       cls: 'title',
       items: [
-        ...BI.map(tabs, (index: number, text: string) => {
-          return {
-            type: TitleItem,
-            text: BI.i18nText(text),
-          };
-        }),
+        {
+          type: TitleItem,
+          cls: 'dec-title-item-selected',
+          text: BI.i18nText('Dec-Dcm_Connection_Management'),
+          ref: _ref => {
+            this.ConnectSet = _ref;
+          },
+          handler: () => {
+            this.ConnectSet.select();
+          },
+        },
+        {
+          type: TitleItem,
+          text: BI.i18nText('Dec-Dcm_Pool_Connection_Management'),
+          ref: _ref => {
+            this.ConnectPool = _ref;
+          },
+          handler: () => {
+            this.ConnectPool.select();
+          },
+        },
         {
           type:IconButton,
           cls:'close-button',

src/app/title/title_item/title_item.component.ts

@@ -2,7 +2,7 @@ import {Label} from '@ui';
 import tableItemModel from './title_item.model';
 import {getSelectStyle} from './title_item.service';
 const className = 'fr.title.item';
-const Widget = BI.inherit(BI.Widget, {
+const Widget = BI.inherit(BI.BasicButton, {
   props: {
     text:'',
   },
@@ -20,16 +20,13 @@ const Widget = BI.inherit(BI.Widget, {
     
     return {
       type: Label,
-      cls: 'title-item',
+      cls: 'dec-title-item',
       text,
     };
   },
-  mounted() {
+  select() {
     const {text} = this.options;
-    this.element.css(getSelectStyle(BI.i18nText('Dec-Dcm_Connection_Management'), text));
-    this.element.on('click', () => {
-      this.store.setTab(text);
-    });
+    this.store.setTab(text);
   },
 });
 BI.shortcut(className, Widget);