refactor: 调整代码以符合代码规范

src/app/app.model.ts

@@ -1,13 +1,16 @@
 const className = 'fr.model.main';
 import {ModelType} from '@ui';
 import {LinkType} from '@ui/type';
+import {fetchLinkList} from '../shared/crud/crud.request';
+import {TAB_LINK_SET} from '@private/constants';
+
 const linkList: LinkType[] = [];
 const Model: ModelType = {
     
   childContext: ['tab', 'linkList', 'linkSelected', 'linkUpdate', 'moreLinkSelected', 'statusSelected', 'connectionNameErr'],
   state () {
     return {
-      tab: BI.i18nText('Dec-Dcm_Connection_Management'),
+      tab: '',
       linkList,
       linkSelected: {},
       linkUpdate: {},
@@ -23,6 +26,12 @@ const Model: ModelType = {
   actions: {
     setLinkList(value: LinkType[]) {
       this.model.linkList = value;
+      this.model.tab = TAB_LINK_SET;
+    },
+    initData() {
+      fetchLinkList((linkList: LinkType[]) => {
+        this.setLinkList(linkList);
+      });
     },
   },
 };

src/app/app.ts

@@ -1,10 +1,8 @@
 import {Vtape} from '../ui/index';
-import {LinkType} from '@ui/type';
 import appModel from './app.model';
 import title from './title/title';
 import linkSet from './link_set/link_set';
 import linkStatus from './link_status/link_status';
-import {fetchLinkList} from '../shared/crud/crud.request';
 import '../less/index.less';
 
 const className = 'fr.main';
@@ -32,12 +30,7 @@ const Widget = BI.inherit(BI.Widget, {
     };
   },
   mounted() {
-    /**
-     * 获取数据连接列表
-     */
-    fetchLinkList((linkList: LinkType[]) => {
-      this.store.setLinkList(linkList);
-    });
+    this.store.initData();
   },
 });
 BI.shortcut(className, Widget);

src/app/link_set/left/left.ts

@@ -1,4 +1,4 @@
-import {WidgetType, Vertical} from '@ui';
+import {WidgetType, ListView} from '@ui';
 import Model from '../link_set.model';
 import {LinkType} from '@ui/type';
 import {getLinks} from './left.service';
@@ -15,7 +15,7 @@ const Widget: WidgetType = {
   },
   render() {
     return {
-      type: Vertical,
+      type: ListView,
       ref(_ref: any) {
         leftContent = _ref;
       },

src/app/link_set/more/item/more_link_item.ts

@@ -1,8 +1,19 @@
 import {WidgetType, Vertical, Img, Label, Layout} from '@ui/index';
+import ModelName from './more_link_litem.model';
+
 const className = 'fr.component.linkSet.morelink.item';
 const Widget: WidgetType = {
+  _store() {
+    return BI.Models.getModel(ModelName);
+  },
+  watch: {
+    otherSelected(otherSelected: string) {
+      const {text} = this.options;
+      this.selected.setVisible(text === otherSelected);
+    },
+  },
   render() {
-    const {text, name, selected} = this.options;
+    const {text, name} = this.options;
     
     return {
       type: Vertical,
@@ -18,9 +29,12 @@ const Widget: WidgetType = {
         }, {
           type: Layout,
           cls: 'selected',
-          invisible: !selected,
+          invisible: true,
           width: 30,
           height: 30,
+          ref: _ref => {
+            this.selected = _ref;
+          },
         }, {
           type: Label,
           cls: 'text',

src/app/link_set/more/item/more_link_litem.model.ts

@@ -0,0 +1,6 @@
+const className = 'fr.model.link_set.more_link_item';
+export const Model = BI.inherit(Fix.Model, {
+  context: ['otherSelected'],
+});
+BI.model(className, Model);
+export default className;

src/app/link_set/more/more_link.model.ts

@@ -0,0 +1,16 @@
+const className = 'fr.model.link_set.more_link';
+export const Model = BI.inherit(Fix.Model, {
+  childContext: ['otherSelected'],
+  state() {
+    return {
+      otherSelected: '',
+    };
+  },
+  actions: {
+    setOtherSelected(name: string) {
+      this.model.otherSelected = name;
+    },
+  },
+});
+BI.model(className, Model);
+export default className;

src/app/link_set/more/more_link.ts

@@ -1,9 +1,12 @@
 import {WidgetType, Vertical, SearchEditor, Left, Vtape} from '@ui/index';
 import {DATA_BASE_TYPE_OTHER} from '@private/constants';
-import MoreLinkItem from './more_link_item';
+import MoreLinkItem from './item/more_link_item';
+import ModelName from './more_link.model';
 const className = 'fr.component.linkSet.morelink';
-let morkLinkItem: any = null;
 const Widget: WidgetType = {
+  _store() {
+    return BI.Models.getModel(ModelName);
+  },
   render() {
     return {
       type: Vtape,
@@ -23,33 +26,23 @@ const Widget: WidgetType = {
         {
           type: Left,
           cls: 'more-link-item',
-          ref(ref: any) {
-            morkLinkItem = ref;
-          },
+          items: this._createItems(),
         },
       ],
     };
   },
-  mounted() {
-    this._renderItems();
-  },
-  _renderItems(text = '') {
-    const databaseLink = DATA_BASE_TYPE_OTHER;
-    const items: any[] = [];
-    const that = this;
-    databaseLink.forEach(item => {
-      items.push({
+  _createItems() {
+    return BI.map(DATA_BASE_TYPE_OTHER, (index: number, item) => {
+      return {
         type: MoreLinkItem,
         text: item.text,
         name: item.databaseType,
-        selected: text === item.text,
         handler: () => {
-          that._renderItems(item.text);
-          that.fireEvent('EVENT_SELECT', item.text);
+          this.store.setOtherSelected(item.text);
+          this.fireEvent('EVENT_SELECT', item.text);
         },
+      };
     });
-    });
-    morkLinkItem.populate(BI.createItems(items));
   },
 };
 BI.shortcut(className, BI.inherit(BI.Widget, Widget));

src/app/link_set/right/right.ts

@@ -1,4 +1,4 @@
-import {WidgetType, Vertical} from '@ui';
+import {WidgetType, Vertical, ListView} from '@ui';
 import {LinkType} from '@ui/type';
 import Nothing from './nothing';
 import RightDetail from './right_detail/right_detail';
@@ -20,19 +20,15 @@ const Widget: WidgetType = {
   },
   render() {
     return {
-      type: Vertical,
+      type: ListView,
       cls: 'database-right',
       ref(_ref: any) {
         rightContent = _ref;
       },
-    };
-  },
-  mounted() {
-    rightContent.populate(BI.createItems([
-      {
+      items: [{
         type: Nothing,
-      },
-    ]));
+      }],
+    };
   },
 };
 BI.shortcut(className, BI.inherit(BI.Widget, Widget));

src/app/link_set/right/right_detail/right_detail.model.ts

@@ -0,0 +1,10 @@
+const className = 'fr.model.link.set.right.detail';
+export const Model = BI.inherit(Fix.Model, {
+    
+  context: ['linkSelected'],
+  actions: {
+
+  },
+});
+BI.model(className, Model);
+export default className;

src/app/link_set/right/right_detail/right_detail.service.ts

@@ -1,43 +0,0 @@
-import Title from '../right_title/right_title';
-import RightShow from '../right_show/right_show';
-import RightShowJndi from '../right_show/right_show_jndi';
-import RightEdit from '../right_edit/right_edit';
-import RightEditMysql from '../right_edit/right_edit_mysql';
-import RightEditJndi from '../right_edit/right_edit_jndi';
-import {LinkType} from '@ui/type';
-import pluginListConstant from '../../../app.constant';
-import {MYSQL_CONNECT, JNDI_CONNECT} from '@private/constants';
-
-export const renderEdit = (rightDetail, linkSelected: LinkType): void => {
-  const plugins: string[] = BI.Constants.getConstant(pluginListConstant);
-  const isPlugin = BI.some(plugins, (index: number, item: string) => item === linkSelected.text);
-  let editPage = null;
-  let showPage = null;
-  switch (linkSelected.text) {
-    case (MYSQL_CONNECT):
-      editPage = RightEditMysql;
-      showPage = RightShow;
-      break;
-    case (JNDI_CONNECT):
-      editPage = RightEditJndi;
-      showPage = RightShowJndi;
-      break;
-    default:
-      editPage = RightEdit;
-      showPage = RightShow;
-  }
-  if (isPlugin) {
-    editPage = BI.Constants.getConstant(`dec.constant.database.conf.connect.form.${linkSelected.text.toLowerCase()}.edit`);
-    showPage = BI.Constants.getConstant(`dec.constant.database.conf.connect.form.${linkSelected.text.toLowerCase()}.preview`);
-  }
-  rightDetail.populate(BI.createItems([
-    {
-      type: Title,
-      isEdit: linkSelected.isSelected,
-      linkSelected,
-    }, {
-      type: linkSelected.isSelected ? editPage : showPage,
-      linkSelected,
-    },
-  ]));
-};

src/app/link_set/right/right_detail/right_detail.ts

@@ -1,7 +1,14 @@
-import {WidgetType, Vertical} from '@ui/index';
-import Model from '../../link_set.model';
-import {renderEdit} from './right_detail.service';
+import {WidgetType, ListView, Left} from '@ui/index';
+import Model from './right_detail.model';
 import {LinkType} from '@ui/type';
+import Title from '../right_title/right_title';
+import RightShow from '../right_show/right_show';
+import RightShowJndi from '../right_show/right_show_jndi';
+import RightEdit from '../right_edit/right_edit';
+import RightEditMysql from '../right_edit/right_edit_mysql';
+import RightEditJndi from '../right_edit/right_edit_jndi';
+import pluginListConstant from '../../../app.constant';
+import {MYSQL_CONNECT, JNDI_CONNECT} from '@private/constants';
 
 const className = 'fr.component.right.detail';
 
@@ -11,21 +18,55 @@ const Widget: WidgetType = {
   },
   watch: {
     linkSelected(linkSelected: LinkType) {
-      renderEdit(this.rightDetail, linkSelected);
+      const showPage = this._createItems(linkSelected);
+      this.rightDetail.populate(BI.createItems(showPage));
     },
   },
   render() {
+    const linkSelected = this.model.linkSelected;
+    
     return {
-      type: Vertical,
+      type: ListView,
       cls: 'right-content',
       ref: _ref => {
         this.rightDetail = _ref;
       },
+      items: this._createItems(linkSelected),
     };
   },
-  mounted() {
-    const linkSelected: LinkType = this.model.linkSelected;
-    renderEdit(this.rightDetail, linkSelected);
+  _createItems(linkSelected: LinkType) {
+    const plugins: string[] = BI.Constants.getConstant(pluginListConstant);
+    const isPlugin = BI.some(plugins, (index: number, item: string) => item === linkSelected.text);
+    let editPage = null;
+    let showPage = null;
+    switch (linkSelected.text) {
+      case (MYSQL_CONNECT):
+        editPage = RightEditMysql;
+        showPage = RightShow;
+        break;
+      case (JNDI_CONNECT):
+        editPage = RightEditJndi;
+        showPage = RightShowJndi;
+        break;
+      default:
+        editPage = RightEdit;
+        showPage = RightShow;
+    }
+    if (isPlugin) {
+      editPage = BI.Constants.getConstant(`dec.constant.database.conf.connect.form.${linkSelected.text.toLowerCase()}.edit`);
+      showPage = BI.Constants.getConstant(`dec.constant.database.conf.connect.form.${linkSelected.text.toLowerCase()}.preview`);
+    }
+    
+    return [
+      {
+        type: Title,
+        isEdit: linkSelected.isSelected,
+        linkSelected,
+      }, {
+        type: linkSelected.isSelected ? editPage : showPage,
+        linkSelected,
+      },
+    ];
   },
 };
 BI.shortcut(className, BI.inherit(BI.Widget, Widget));

src/app/link_set/right/right_edit/right_edit.model.ts

@@ -0,0 +1,20 @@
+export const className = 'report.model.components.right.edit';
+export const Model = BI.inherit(Fix.Model, {
+  state() {
+    return {
+      isCollapse: false,
+    };
+  },
+
+  computed: {
+        
+  },
+
+  actions: {
+    setIsCollapse(status: boolean) {
+      this.model.isCollapse = status;
+    },
+  },
+});
+BI.model(className, Model);
+export default className;

src/app/link_set/right/right_edit/right_edit_jndi.ts

@@ -2,9 +2,22 @@ import {Vertical, Editor, TextValueCombo, TextButton, Label} from '@ui';
 import FormItem from '@shared/components/form_item';
 import {JNDI_FACTORYS, OTHER_ATTRIBUTES, CONNECT_CHARSET} from '@private/constants';
 import {AttributeType} from '../right.typing';
+import ModelName from './right_edit.model';
 
 const classNameEdit = 'fr.component.right.edit.jndi';
 const Widget = BI.inherit(BI.Widget, {
+  _store() {
+    return BI.Models.getModel(ModelName);
+  },
+  watch: {
+    isCollapse(isCollapse) {
+      const height = isCollapse ? 550 : 160;
+      const text = isCollapse ? BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Collapse-Attributes') : BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Other_Attributes');
+      this.jndiFormRef.setHeight(height);
+      this.collapseRef.setText(text);
+      this.otherAttributesRef.setVisible(isCollapse);
+    },
+  },
   render() {
     const {connectionName, url, factory, principal, credentials, originalCharsetName} = this.options;
     
@@ -95,18 +108,11 @@ const Widget = BI.inherit(BI.Widget, {
                   text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Other_Attributes'),
                   width: 300,
                   textAlign: 'right',
-                  value: true,
                   ref: _ref => {
                     this.collapseRef = _ref;
                   },
                   handler: () => {
-                    const isCollapse = this.collapseRef.getValue();
-                    const height = isCollapse ? 550 : 160;
-                    const text = isCollapse ? BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Collapse-Attributes') : BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Other_Attributes');
-                    this.jndiFormRef.setHeight(height);
-                    this.collapseRef.setValue(!isCollapse);
-                    this.collapseRef.setText(text);
-                    this.otherAttributesRef.setVisible(isCollapse);
+                    this.store.setIsCollapse(!this.model.isCollapse);
                   },
                 },
               },

src/app/link_status/left/left.ts

@@ -1,4 +1,4 @@
-import {WidgetType, Vertical} from '@ui';
+import {WidgetType, ListView} from '@ui';
 import Model from './left.model';
 import {LinkType} from '@ui/type';
 import {getLinks} from './left.service';
@@ -20,7 +20,7 @@ const Widget: WidgetType = {
   },
   render() {
     return {
-      type: Vertical,
+      type: ListView,
       ref(_ref: any) {
         leftContent = _ref;
       },

src/app/link_status/right/right.ts

@@ -1,4 +1,4 @@
-import {WidgetType, Vertical, Left, Label} from '@ui/index';
+import {WidgetType, Vertical, Left, Label, ListView} from '@ui/index';
 import Model from './right.model';
 import {info} from '@shared/crud/crud.request';
 import RightCard from './right_card';
@@ -48,7 +48,7 @@ const Widget: WidgetType = {
             Title = ref;
           },
         }, {
-          type: Vertical,
+          type: ListView,
           cls: 'right-status-body',
           ref(ref: any) {
             Group = ref;

src/less/resource/app.less

@@ -102,6 +102,9 @@
 .database-right{
   min-width: 400px;
   overflow: auto;
+  >.bi-vertical-layout{
+    height: 100%;
+  }
   .bi-flex-center-adapt-layout{
     height: 100%;
     .data-connection-background{

src/ui/fineui.ts

@@ -35,6 +35,8 @@ export const BubbleCombo = 'bi.bubble_combo';
 export const SearchEditor = 'bi.search_editor';
 export const Img = 'bi.img';
 export const LeftRightVerticalAdapt = 'bi.left_right_vertical_adapt';
+export const VertualGroup = 'bi.virtual_group';
+export const ListView = 'bi.list_view';
 
 // 布局
 export const VerticalAdapt = 'bi.vertical_adapt';