diff --git a/.eslintrc.js b/.eslintrc.js index e8772fa..d62bd01 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -25,6 +25,7 @@ module.exports = { 'for-direction': 2, // 关键字前后必须有空格 'keyword-spacing': 2, + 'key-spacing':2, // 最大块嵌套深度为 5 层 'max-depth': [2, 5], // 最大回调深度为 3 层 diff --git a/README.md b/README.md index 0e5c11f..5821f32 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,9 @@ -# database-connection 数据连接设置页面 -![start](https://img.shields.io/badge/start-2019%2F04%2F26-blue.svg) ![finui](https://img.shields.io/badge/lib-FinUi-blue.svg) +# Database Connection Manager + +用于决策平台和设计器中管理数据连接的通用管理器 + +![finui](https://img.shields.io/badge/lib-FinUi-blue.svg) -[KERNEL-493](http://www.finedevelop.com:2016/browse/KERNEL-493) ## 开始 下载代码 diff --git a/i18n/zh_cn.properties b/i18n/zh_cn.properties new file mode 100644 index 0000000..13c2e30 --- /dev/null +++ b/i18n/zh_cn.properties @@ -0,0 +1,60 @@ +Dec-Dcm_Connection_Management= 数据连接管理 +Dec-Dcm_Pool_Connection_Management= 连接池管理 +Dec-Dcm_Data_Connections= 数据连接 +Dec-Dcm_Active_Connections_Number= 活动连接数 +Dec-Dcm_Leisure_Connections_Number= 空闲连接数 +Dec-Dcm_Connections= 连接 +Dec-Dcm_Default= 默认 +Dec-Dcm_Delete= 删除 +Dec-Dcm_Test_Connection= 测试连接 +Dec-Dcm_Copy= 复制 +Dec-Dcm_Edit= 编辑 +Dec-Dcm_Save= 保存 +Dec-Dcm_Yes= 是 +Dec-Dcm_No= 否 +Dec-Dcm_Search= 搜索 +Dec-Dcm_Type= 类型 +Dec-Dcm_Other= 其他 +Dec-Dcm_Tips= 提示 +Dec-Dcm_Back= 返回 +Dec-Dcm_Creator= 创建者 +Dec-Dcm_First_Step= 第一步 +Dec-Dcm_Second_Step= 第二步 +Dec-Dcm_Third_Step= 第三步 +Dec-Dcm_Connection_Detailed_Information= 详细信息 +Dec-Dcm_Connection_Handup_Information= 收起信息 +Dec-Dcm_Connection_Testing= 正在测试连接，请稍候... +Dec-Dcm_Connection_Test_Fail= 测试连接失败 +Dec-Dcm_Connection_Test_Success= 连接成功 +Dec-Dcm_Connection_Option_Cannot_Find= 找不到该连接的配置信息 +Dec-Dcm_Connection_Config_No_Save= 当前设置尚未保存，是否保存？ +Dec-Dcm_Connection_New= 新建数据连接 +Dec-Dcm_Connection_More= 更多数据连接... +Dec-Dcm_Connection_More_Title= 更多数据连接 +Dec-Dcm_Connection_Other= 其他 +Dec-Dcm_Connection_Plase_Add_One= 请选择左侧数据连接或点击新建数据连接 +Dec-Dcm_Connection_Is_Existence= 数据连接名已存在 +Dec-Dcm_Connection_Form_ConnectionName= 数据连接名 +Dec-Dcm_Connection_Form_ConnectionName-Change-Confirm= *修改数据连接名会影响相关数据表和仪表板 +Dec-Dcm_Connection_Form_Driver= 驱动器 +Dec-Dcm_Connection_Form_URL= URL +Dec-Dcm_Connection_Form_Place_Input= 请输入 +Dec-Dcm_Connection_Form_OriginalCharsetName= 编码 +Dec-Dcm_Connection_Form_Auto= 自动 +Dec-Dcm_Connection_Form_UserName= 用户名 +Dec-Dcm_Connection_Form_Password= 密码 +Dec-Dcm_Connection_Form_Pool_Properties= 连接池属性 +Dec-Dcm_Connection_Form_SQL_Validation_Query= SQL验证查询 +Dec-Dcm_Connection_Form_Connection-Check= 获取连接前校验 +Dec-Dcm_Connection_Form_Connection_Max_Number= 最大活动连接数 +Dec-Dcm_Connection_Form_Place_Input-Number= 请输入有效的正整数 +Dec-Dcm_Connection_Form_Pattern= 模式 +Dec-Dcm_Connection_Form_Database_Addr= 数据库地址 +Dec-Dcm_Connection_Form_Database_Port= 端口号 +Dec-Dcm_Connection_Make_Sure_Delete= 确定删除该数据连接？ +Dec-Dcm_Connection_ReConnect= 重新连接 +Dec-Dcm_Connection_JNDI_Form_ConnectionName= JNDI的名字 +Dec-Dcm_Connection_Form_JNDI_Context= 上下文 +Dec-Dcm_Connection_Form_JNDI_Advanced= 高级 +Dec-Dcm_Connection_Form_JNDI_Other_Attributes= 其他属性 +Dec-Dcm_Connection_Form_JNDI_Collapse-Attributes= 收起 \ No newline at end of file diff --git a/package.json b/package.json index b323524..8c5a597 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "author": "alan ", "license": "ISC", "devDependencies": { + "@types/node": "^12.0.2", "@typescript-eslint/eslint-plugin": "^1.6.0", "@typescript-eslint/parser": "^1.6.0", "copy-webpack-plugin": "^5.0.2", @@ -17,6 +18,8 @@ "eslint": "^5.16.0", "file-loader": "^3.0.1", "html-webpack-plugin": "^3.2.0", + "less": "^3.9.0", + "less-loader": "^5.0.0", "mini-css-extract-plugin": "^0.6.0", "node-sass": "^4.11.0", "path": "^0.12.7", @@ -28,5 +31,8 @@ "webpack-cli": "^3.3.0", "webpack-dev-server": "^3.2.1", "webpack-stream": "^5.2.1" + }, + "optionalDependencies": { + "fineui": "git+ssh://git@cloud.finedevelop.com:7999/visual/fineui.git" } } diff --git a/src/app/link_set/select/select.service.ts b/private/constants.ts similarity index 58% rename from src/app/link_set/select/select.service.ts rename to private/constants.ts index 37d2b08..f882542 100644 --- a/src/app/link_set/select/select.service.ts +++ b/private/constants.ts @@ -1,283 +1,373 @@ -import {LinkType} from '@ui/type'; -import pluginListConstant from '../../app.constant'; +export const OTHER_CONNECT = 'other'; +export const JNDI_CONNECT = 'JNDI'; +export const MYSQL_CONNECT = 'MySQL'; +export const DEFAULT_INFO = 'DESIGNER'; +export const ACTION_DELETE = 'ACTION_DELETE'; +export const ACTION_COPY = 'ACTION_COPY'; +export const ACTION_TEST = 'ACTION_TEST'; -export const databaseTyle = [ - { - text:'APACHE KYLIN', - databaseType: 'apache-kylin', - driver: 'org.apache.kylin.jdbc.Driver', - url: 'jdbc:kylin://:/', - }, - { - text:'DERBY', - databaseType: 'derby', - driver: 'org.apache.derby.jdbc.ClientDriver', - url: 'jdbc:derby://localhost:1527/', - }, - { - text:'HP Vertica', - databaseType: 'hp-vertica', - driver: 'com.vertica.jdbc.Driver', - url: 'jdbc:vertica://ip:port/databaseName', - }, - { - text:'IBM DB2', - databaseType: 'ibm-db2', - driver: 'com.ibm.db2.jcc.DB2Driver', - url: 'jdbc:db2://hostname:port/dbname', - }, - { - text:'INFORMIX', - databaseType: 'informix', - driver: 'com.informix.jdbc.IfxDriver', - url: 'jdbc:informix-sqli://{host}:{port}/{database}:INFORMIXSERVER={server}', - }, - { - text:'Microsoft SQL Server', - databaseType: 'sql-server', - driver: 'com.microsoft.sqlserver.jdbc.SQLServerDriver', - url: 'jdbc:sqlserver://localhost:1433;databaseName=', - }, - { - text:'Oracle', - databaseType: 'oracle', - driver: 'oracle.jdbc.driver.OracleDriver', - url: 'jdbc:oracle:thin:@localhost:1521:databaseName', - }, - { - text:'Privotal Greenplum Database', - databaseType: 'pivotal-greenplum-database', - driver: 'org.postgresql.Driver', - url: 'jdbc:postgresql://hostname:port/dbname', - }, - { - text:'Postgresql', - databaseType: 'postgresql', - driver: 'org.postgresql.Driver', - url: 'jdbc:postgresql://hostname:port/dbname', - }, - { - text:'GaussDB 200', - databaseType: 'hw-libr-a', - driver: 'org.postgresql.Driver', - url: 'jdbc:postgresql://hostname:port/dbname', - }, +export const TAB_LINK_SET = 'TAB_LINK_SET'; +export const TAB_LINK_POOL = 'TAB_LINK_POOL'; + + +export const DATA_LINKS = ['APACHE KYLIN', 'DERBY', 'HP Vertica', 'IBM DB2', 'INFORMIX', 'Microsoft SQL Server', 'MySQL', 'Oracle', 'Privotal Greenplum Database', 'Postgresql', 'GaussDB 200', 'JNDI']; + +export const DATA_BASE_TYPE_OTHER = [ { - text:'MySQL', - databaseType: 'mysql', + text: 'ADS', + databaseType: 'ads', driver: 'com.mysql.jdbc.Driver', - drivers:['com.mysql.jdbc.Driver', 'org.gjt.mm.mysql.Driver'], - url: 'jdbc:mysql://localhost/dbname', + url: 'jdbc:mysql://hostname:port/my_ads_db', }, { - text:'其他', - databaseType: 'other', - driver: 'org.h2.Driver', - drivers:['org.h2.Driver', 'com.fr.third.org.hsqldb.jdbcDriver', 'org.sqlite.JDBC'], - url: 'jdbc:h2://${ENV_HOME}/../databaseName', - }, - { - text:'ADS', - databaseType:'ads', - driver:'com.mysql.jdbc.Driver', - url:'jdbc:mysql://hostname:port/my_ads_db', - }, - { - text:'Amazon Redshift', - databaseType:'amazon-redshift', + text: 'Amazon Redshift', + databaseType: 'amazon-redshift', driver: 'com.amazon.redshift.jdbc4.Driver', - drivers:['com.amazon.redshift.jdbc4.Driver', 'com.amazon.redshift.jdbc41.Driver'], - url:'jdbc:redshift://endpoint:port/database', + drivers: ['com.amazon.redshift.jdbc4.Driver', 'com.amazon.redshift.jdbc41.Driver'], + url: 'jdbc:redshift://endpoint:port/database', }, { - text:'APACHE IMPALA', - databaseType:'apache-impala', - driver:'com.cloudera.impala.jdbc41.Driver', - url:'jdbc:impala://hostname:port/_impala_builtins', + text: 'APACHE IMPALA', + databaseType: 'apache-impala', + driver: 'com.cloudera.impala.jdbc41.Driver', + url: 'jdbc:impala://hostname:port/_impala_builtins', }, { - text:'APACHE KYLIN', - databaseType:'apache-kylin', - driver:'org.apache.kylin.jdbc.Driver', - url:'jdbc:kylin://:/', + text: 'APACHE KYLIN', + databaseType: 'apache-kylin', + driver: 'org.apache.kylin.jdbc.Driver', + url: 'jdbc:kylin://:/', }, { - text:'APACHE Phoenix', + text: 'APACHE Phoenix', databaseType: 'apache-phoenix', driver: 'org.apache.phoenix.jdbc.PhoenixDriver', url: 'jdbc:phoenix:hostname:port/dbname', }, { - text:'DERBY', + text: 'DERBY', databaseType: 'derby', driver: 'org.apache.derby.jdbc.ClientDriver', url: 'jdbc:derby://localhost:1527/', }, { - text:'Gbase 8A', + text: 'Gbase 8A', databaseType: 'gbase-8a', driver: 'com.gbase.jdbc.Driver', url: 'jdbc:gbase://hostname:port/dbname', }, { - text:'Gbase 8S', + text: 'Gbase 8S', databaseType: 'gbase-8s', driver: 'com.gbasedbt.jdbc.IfxDriver', url: 'jdbc:gbasedbt-sqli://{host}:{port}/{database}', }, { - text:'Gbase 8T', + text: 'Gbase 8T', databaseType: 'gbase-8t', driver: 'com.informix.jdbc.IfxDriver', url: 'jdbc:informix-sqli://{host}:{port}/{database}:INFORMIXSERVER={server}', }, { - text:'H2', + text: 'H2', databaseType: 'h2', driver: 'org.h2.Driver', url: 'jdbc:h2://${ENV_HOME}/../databaseName', }, { - text:'华为云DWS', + text: '华为云DWS', databaseType: 'hw-dws', driver: 'org.postgresql.Driver', url: 'jdbc:postgresql://hostname:port/dbname', }, { - text:'FusionInsight elk', + text: 'FusionInsight elk', databaseType: 'hw-elk', driver: 'org.postgresql.Driver', url: 'jdbc:postgresql://hostname:port/dbname', }, { - text:'FusionInsight HD', + text: 'FusionInsight HD', databaseType: 'hw-fusioninsight-hd', driver: 'org.apache.hive.jdbc.HiveDriver', url: 'jdbc:hive2://10.135.0.110:24002,10.135.0.67:24002,10.135.0.66:24002/;serviceDiscoveryMode=zooKeeper;zooKeeperNamespace=hiveserver2;sasl.qop=auth-conf;auth=KERBEROS;zk.principal=zookeeper/hadoop;principal=hive/hadoop.hadoop.com@HADOOP.COM;', }, { - text:'GaussDB 200', + text: 'GaussDB 200', databaseType: 'hw-libr-a', driver: 'org.postgresql.Driver', url: 'jdbc:postgresql://hostname:port/dbname', }, { - text:'Hadoop Hive', + text: 'Hadoop Hive', databaseType: 'hadoop-hive', driver: 'org.apache.hive.jdbc.HiveDriver', url: 'jdbc:hive2://hostname:port/databasename', }, { - text:'Hbase', + text: 'Hbase', databaseType: 'hbase', driver: 'org.apache.phoenix.jdbc.PhoenixDriver', url: 'jdbc:phoenix:hostname:port/dbname', }, { - text:'HP Vertica', + text: 'HP Vertica', databaseType: 'hp-vertica', driver: 'com.vertica.jdbc.Driver', url: 'jdbc:vertica://ip:port/databaseName', }, { - text:'Hsql', + text: 'Hsql', databaseType: 'hsql', driver: 'com.fr.third.org.hsqldb.jdbcDriver', url: 'jdbc:hsqldb:file:[PATH_TO_DB_FILES]', }, { - text:'IBM DB2', + text: 'IBM DB2', databaseType: 'ibm-db2', driver: 'com.ibm.db2.jcc.DB2Driver', url: 'jdbc:db2://hostname:port/dbname', }, { - text:'INFORMIX', + text: 'INFORMIX', databaseType: 'informix', driver: 'com.informix.jdbc.IfxDriver', url: 'jdbc:informix-sqli://{host}:{port}/{database}:INFORMIXSERVER={server}', }, { - text:'KINGBASE', + text: 'KINGBASE', databaseType: 'kingbase', driver: 'com.kingbase.Driver', url: 'jdbc:kingbase://hostname:port', }, { - text:'Microsoft SQL Server', + text: 'Microsoft SQL Server', databaseType: 'sql-server', driver: 'com.microsoft.sqlserver.jdbc.SQLServerDriver', url: 'jdbc:sqlserver://localhost:1433;databaseName=', }, { - text:'MySQL', + text: 'MySQL', databaseType: 'mysql', driver: 'com.mysql.jdbc.Driver', - drivers:['com.mysql.jdbc.Driver', 'org.gjt.mm.mysql.Driver'], + drivers: ['com.mysql.jdbc.Driver', 'org.gjt.mm.mysql.Driver'], url: 'jdbc:mysql://localhost/dbname', }, { - text:'Oracle', + text: 'Oracle', databaseType: 'oracle', driver: 'oracle.jdbc.driver.OracleDriver', url: 'jdbc:oracle:thin:@localhost:1521:databaseName', }, { - text:'Pivotal Greenplum Database', + text: 'Pivotal Greenplum Database', databaseType: 'pivotal-greenplum-database', driver: 'org.postgresql.Driver', url: 'jdbc:postgresql://hostname:port/dbname', }, { - text:'Postgresql', + text: 'Postgresql', databaseType: 'postgresql', driver: 'org.postgresql.Driver', url: 'jdbc:postgresql://hostname:port/dbname', }, { - text:'Presto', + text: 'Presto', databaseType: 'presto', driver: 'com.facebook.presto.jdbc.PrestoDriver', url: 'jdbc:presto://host:port/catalog', }, { - text:'SAP HANA', + text: 'SAP HANA', databaseType: 'sap-hana', driver: 'com.sap.db.jdbc.Driver', url: 'jdbc:sap://hostname:port?reconnect=true', }, { - text:'SAP Sybase', + text: 'SAP Sybase', databaseType: 'sap-sybase', driver: 'com.sybase.jdbc4.jdbc.SybDriver', url: 'jdbc:sybase:Tds:hostname:2638/databasename', }, { - text:'SPARK', + text: 'SPARK', databaseType: 'spark', driver: 'org.apache.hive.jdbc.HiveDriver', url: 'jdbc:hive2://hostname:port/databasename', }, { - text:'Sqlite', + text: 'Sqlite', databaseType: 'sqlite', driver: 'org.sqlite.JDBC', url: 'jdbc:sqlite:[PATH_TO_DB_FILES]', }, { - text:'TeraData', + text: 'TeraData', databaseType: 'teradata', driver: 'com.ncr.teradata.TeraDriver', url: 'jdbc:teradata://localhost/CLIENT_CHARSET=EUC_CN,TMODE=TERA,CHARSET=ASCII,LOB_SUPPORT', }, { - text:'TRANSWARP INCEPTOR', + text: 'TRANSWARP INCEPTOR', databaseType: 'transwarp-inceptor', driver: 'org.apache.hive.jdbc.HiveDriver', url: 'jdbc:hive2://hostname:port/databasename', }, ]; -export const getCnnectionName = (links: LinkType[], name: string): string => { - const plugins: string[] = BI.Constants.getConstant(pluginListConstant); - let nameIndex = 0; - const title = name.replace(/[0-9]/g, ''); - const isPlugin = BI.some(plugins, (index: number, item: string) => item === title); - const startWith = isPlugin ? title : '数据连接'; +export const DATA_BASE_TYPE = [ + { + text: 'APACHE KYLIN', + databaseType: 'apache-kylin', + driver: 'org.apache.kylin.jdbc.Driver', + url: 'jdbc:kylin://:/', + }, + { + text: 'DERBY', + databaseType: 'derby', + driver: 'org.apache.derby.jdbc.ClientDriver', + url: 'jdbc:derby://localhost:1527/', + }, + { + text: 'HP Vertica', + databaseType: 'hp-vertica', + driver: 'com.vertica.jdbc.Driver', + url: 'jdbc:vertica://ip:port/databaseName', + }, + { + text: 'IBM DB2', + databaseType: 'ibm-db2', + driver: 'com.ibm.db2.jcc.DB2Driver', + url: 'jdbc:db2://hostname:port/dbname', + }, + { + text: 'INFORMIX', + databaseType: 'informix', + driver: 'com.informix.jdbc.IfxDriver', + url: 'jdbc:informix-sqli://{host}:{port}/{database}:INFORMIXSERVER={server}', + }, + { + text: 'Microsoft SQL Server', + databaseType: 'sql-server', + driver: 'com.microsoft.sqlserver.jdbc.SQLServerDriver', + url: 'jdbc:sqlserver://localhost:1433;databaseName=', + }, + { + text: 'Oracle', + databaseType: 'oracle', + driver: 'oracle.jdbc.driver.OracleDriver', + url: 'jdbc:oracle:thin:@localhost:1521:databaseName', + }, + { + text: 'Privotal Greenplum Database', + databaseType: 'pivotal-greenplum-database', + driver: 'org.postgresql.Driver', + url: 'jdbc:postgresql://hostname:port/dbname', + }, + { + text: 'Postgresql', + databaseType: 'postgresql', + driver: 'org.postgresql.Driver', + url: 'jdbc:postgresql://hostname:port/dbname', + }, + { + text: 'GaussDB 200', + databaseType: 'hw-libr-a', + driver: 'org.postgresql.Driver', + url: 'jdbc:postgresql://hostname:port/dbname', + }, + { + text: 'MySQL', + databaseType: 'mysql', + driver: 'com.mysql.jdbc.Driver', + drivers: ['com.mysql.jdbc.Driver', 'org.gjt.mm.mysql.Driver'], + url: 'jdbc:mysql://localhost/dbname', + }, + { + text: OTHER_CONNECT, + databaseType: 'other', + driver: 'org.h2.Driver', + drivers: ['org.h2.Driver', 'com.fr.third.org.hsqldb.jdbcDriver', 'org.sqlite.JDBC'], + url: 'jdbc:h2://${ENV_HOME}/../databaseName', + }, + ...DATA_BASE_TYPE_OTHER, + { + text: JNDI_CONNECT, + }, +]; + +export const JNDI_FACTORYS = ['', 'weblogic.jndi.WLInitialContextFactory', 'com.ibm.websphere.naming.WsnInitialContextFactory', 'org.jboss.naming.HttpNamingContextFactory', 'org.jnp.interfaces.NamingContextFactory', 'com.caucho.burlap.BurlapContextFactory']; + +export const OTHER_ATTRIBUTES = [ + { + text: 'OBJECT_FACTORIES', + name: 'objectFactories', + }, + { + text: 'STATE_FACTORIES', + name: 'stateFactories', + }, + { + text: 'URL_PKG_PREFIXES', + name: 'urlPkgPrefixes', + }, + { + text: 'DNS_URL', + name: 'dnsUrl', + }, + { + text: 'AUTHORITATIVE', + name: 'authoritative', + }, + { + text: 'BATCHSIZE', + name: 'batchSize', + }, + { + text: 'REFERRAL', + name: 'referral', + }, + { + text: 'SECURITY_PROTOCOL', + name: 'securityProtocol', + }, + { + text: 'SECURITY_AUTHENTICATION', + name: 'securityAuthentication', + }, + { + text: 'LANGUAGE', + name: 'language', + }, + { + text: 'APPLET', + name: 'applet', + }, +]; - links.forEach(link => { - link.isSelected = false; - if (link.connectionName.startsWith(startWith)) { - const name = link.connectionName.replace(startWith, '0'); - const index = parseInt(name, 10) + 1; - if (index > nameIndex) { - nameIndex = index; - } - } - }); - - return `${startWith}${nameIndex > 0 ? nameIndex : ''}`; +export const CONNECT_CHARSET = [ + { + text: 'GBK', + value: 'GBK', + }, + { + text: 'BIG5', + value: 'BIG5', + }, + { + text: 'ISO-8859-1', + value: 'ISO-8859-1', + }, + { + text: 'UTF-8', + value: 'UTF-8', + }, + { + text: 'UTF-16', + value: 'UTF-16', + }, + { + text: 'EUC_JP', + value: 'EUC_JP', + }, + { + text: 'EUC_KR', + value: 'EUC_KR', + }, + { + text: 'CP850', + value: 'CP850', + }, +]; + + +const DecDcm = { + TEST_STATUS_WAITING: 1, + TEST_STATUS_SUCCESS: 2, + TEST_STATUS_FAIL: 3, }; + +export default DecDcm; diff --git a/private/i18n.ts b/private/i18n.ts new file mode 100644 index 0000000..03caabc --- /dev/null +++ b/private/i18n.ts @@ -0,0 +1,63 @@ +export default { + 'Dec-Dcm_Connection_Management': '数据连接管理', + 'Dec-Dcm_Pool_Connection_Management': '连接池管理', + 'Dec-Dcm_Data_Connections': '数据连接', + 'Dec-Dcm_Active_Connections_Number': '活动连接数', + 'Dec-Dcm_Leisure_Connections_Number': '空闲连接数', + 'Dec-Dcm_Connections': '连接', + 'Dec-Dcm_Default': '默认', + 'Dec-Dcm_Delete': '删除', + 'Dec-Dcm_Test_Connection': '测试连接', + 'Dec-Dcm_Copy': '复制', + 'Dec-Dcm_Edit': '编辑', + 'Dec-Dcm_Save': '保存', + 'Dec-Dcm_Yes': '是', + 'Dec-Dcm_No': '否', + 'Dec-Dcm_Search': '搜索', + 'Dec-Dcm_Type': '类型', + 'Dec-Dcm_Other': '其他', + 'Dec-Dcm_Tips': '提示', + 'Dec-Dcm_Back': '返回', + 'Dec-Dcm_Creator': '创建者', + 'Dec-Dcm_First_Step': '第一步', + 'Dec-Dcm_Second_Step': '第二步', + 'Dec-Dcm_Third_Step': '第三步', + 'Dec-Dcm_Connection_Detailed_Information': '详细信息', + 'Dec-Dcm_Connection_Handup_Information': '收起信息', + 'Dec-Dcm_Connection_Testing': '正在测试连接，请稍候...', + 'Dec-Dcm_Connection_Test_Fail': '测试连接失败', + 'Dec-Dcm_Connection_Test_Success': '连接成功', + 'Dec-Dcm_Connection_Option_Cannot_Find': '找不到该连接的配置信息', + 'Dec-Dcm_Connection_Config_No_Save': '当前设置尚未保存，是否保存？', + 'Dec-Dcm_Connection_New': '新建数据连接', + 'Dec-Dcm_Connection_More': '更多数据连接...', + 'Dec-Dcm_Connection_More_Title': '更多数据连接', + 'Dec-Dcm_Connection_Other': '其他', + 'Dec-Dcm_Connection_Plase_Add_One': '请选择左侧数据连接或点击新建数据连接', + 'Dec-Dcm_Connection_Is_Existence': '数据连接名已存在', + 'Dec-Dcm_Connection_Form_ConnectionName': '数据连接名', + 'Dec-Dcm_Connection_Form_ConnectionName-Change-Confirm': '*修改数据连接名会影响相关数据表和仪表板', + 'Dec-Dcm_Connection_Form_Driver': '驱动器', + 'Dec-Dcm_Connection_Form_URL': 'URL', + 'Dec-Dcm_Connection_Form_Place_Input': '请输入', + 'Dec-Dcm_Connection_Form_OriginalCharsetName': '编码', + 'Dec-Dcm_Connection_Form_Auto': '自动', + 'Dec-Dcm_Connection_Form_UserName': '用户名', + 'Dec-Dcm_Connection_Form_Password': '密码', + 'Dec-Dcm_Connection_Form_Pool_Properties': '连接池属性', + 'Dec-Dcm_Connection_Form_SQL_Validation_Query': 'SQL验证查询', + 'Dec-Dcm_Connection_Form_Connection-Check': '获取连接前校验', + 'Dec-Dcm_Connection_Form_Connection_Max_Number': '最大活动连接数', + 'Dec-Dcm_Connection_Form_Place_Input-Number': '请输入有效的正整数', + 'Dec-Dcm_Connection_Form_Pattern': '模式', + 'Dec-Dcm_Connection_Form_Database_Addr': '数据库地址', + 'Dec-Dcm_Connection_Form_Database_Port': '端口号', + 'Dec-Dcm_Connection_Make_Sure_Delete': '确定删除该数据连接？', + 'Dec-Dcm_Connection_ReConnect': '重新连接', + 'Dec-Dcm_Connection_JNDI_Form_ConnectionName': 'JNDI的名字', + 'Dec-Dcm_Connection_Form_JNDI_Context': '上下文', + 'Dec-Dcm_Connection_Form_JNDI_Advanced': '高级', + 'Dec-Dcm_Connection_Form_JNDI_Other_Attributes': '其他属性', + 'Dec-Dcm_Connection_Form_JNDI_Collapse-Attributes': '收起', + 'Dec-Dcm_Connection_Form_JNDI_Notice': '注意：需要把包含INITIAL_CONTEXT_FACTORY类的.jar文件复制到软件安装目录下的/lib目录下.', +}; diff --git a/readme.md b/readme.md deleted file mode 100644 index ebed952..0000000 --- a/readme.md +++ /dev/null @@ -1,3 +0,0 @@ -# Database Connection Manager - -用于决策平台和设计器中管理数据连接的通用管理器 \ No newline at end of file diff --git a/src/app/app.component.scss b/src/app/app.component.scss deleted file mode 100644 index f974823..0000000 --- a/src/app/app.component.scss +++ /dev/null @@ -1,325 +0,0 @@ -.database-connection-layout{ - width: 100%; - height: 100%; - background-color: #f7f8fa; - .title{ - background-color: #fff; - border-bottom: 1px solid #e8eaed; - .title-item{ - height: 39px; - line-height: 39px; - padding-left: 15px; - padding-right: 15px; - text-align: center; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - position: relative; - flex-shrink: 0; - font-weight: 700; - cursor: pointer; - } - .close-button { - position: absolute !important; - right: 5px; - top: 5px; - width: 30px; - height: 30px; - cursor: pointer; - background-image: url("../img/icon_close9x9_normal.png"); - background-repeat: no-repeat; - background-position: center; - } - } - .linkset{ - margin: 10px; - bottom: 0px; - background-color: #ffffff; - } - .linkStatus{ - margin: 10px; - top: 40px; - background-color: #ffffff; - } -} - -.database-left{ - border-right: 1px solid #e8eaed; - .select-group{ - border-bottom: 1px solid #e8eaed; - .select{ - margin: 10px; - .database-link-items{ - padding-left:10px; - .link-item{ - border-top: 1px solid #e8eaed; - } - } - } - .status-title{ - font-weight: 700; - margin-left: 12px; - margin-top: 12px; - } - } - .left-list{ - margin: 10px; - .left-item{ - height: 24px; - line-height: 24px; - cursor: pointer; - &:hover{ - background-color: rgba(54,133,242,.05); - .icons{ - .action-icon{ - visibility: visible !important; - } - - } - } - .icons{ - float: right !important; - .action-icon{ - visibility: hidden; - } - .b-font{ - font-size: 16px; - } - } - } - .left-item-selected{ - background-color: rgba(54,133,242,.05); - .link-title{ - color: #3685f2; - } - } - } -} -.database-right{ - min-width: 400px; - overflow: auto; - .bi-flex-center-adapt-layout{ - height: 100%; - .data-connection-background{ - background: url(../img/resources.png) center center no-repeat; - background-size: contain; - } - } - .right-status-title{ - border-bottom: 1px solid #e8eaed; - color: #3d4d66; - line-height: 40px; - padding-left: 10px; - font-weight: 700; - } - .right-status-body{ - margin: 10px 30px 0px 30px; - height: 50%; - .right-status-item{ - height: 150px; - width: 50%; - top: 0; left: 0; - position: absolute !important; - .right-status-board { margin-left: 25px; position: relative !important; left: -25px;} - } - .right-status-right{ - height: 150px; - width: 50%; - top: 0; right:0; - position: absolute !important; - .right-status-board { margin-right: 25px; position: relative !important; left: 25px; } - } - .right-status-board{ - background-color: #f7f8fa; - color: #3d4d66; - width: 100%; - height: 100%; - .right-status-board-item{ - text-align: center; - margin-top: 38px; - .right-status-text{ - display: inline-block; - } - .card-font1{ - color: #13CD66; - font-size: 32px; - } - .card-font2{ - color: #3685F2; - font-size: 32px; - } - } - - } - } - .right-content{ - height: 100%; - .right-title{ - border-bottom: 1px solid #e8eaed; - color: #3d4d66; - line-height: 40px; - padding-left: 10px; - .right-title-text{ - font-weight: 700; - } - .right-title-button{ - float: right !important; - margin-right: 10px; - margin-top: 8px; - } - } - .right-show{ - margin: 10px; - .right-form{ - width: 100%; - } - } - } -} -.both-side{ - line-height: 24px; - margin-bottom: 10px; - .left{ - white-space: nowrap; - text-overflow: ellipsis; - position: relative; - flex-shrink: 0; - font-weight: 700; - } - .hint{ - padding-left: 5px; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - position: relative; - flex-shrink: 0; - margin-left: 5px; - color: #9ea6b2; - } -} -.shared-component-title{ - height: 24px; - line-height: 24px; - margin-bottom: 10px; - color: #9ea6b2; - border-bottom: 1px solid #e8eaed; -} -.comfirm-content{ - margin-top: 40px; - margin-left: 20px; - .comfirm-icon{ - background-image: url("../img/warning.png"); - background-size: contain; - margin-right: 12px; - } - .bi-text{ - height: 50px; - line-height: 50px; - margin-left: 12px; - } -} -.more-link{ - .more-link-item{ - width: 538px; - overflow: hidden auto; - left: -10px !important; - right: 0px; - top: 10px; - bottom: 0px; - position: absolute; - height: 380px; - .link-item{ - margin-left: 10px; - margin-bottom: 10px; - cursor: pointer; - border: solid 1px #fff; - &:hover{ - border: solid 1px #3480f2; - } - .selected{ - position: absolute !important; - right: -1px; - top: -1px; - height: 30px; - width: 30px; - background: url(../img/database-selected.png) center center no-repeat; - background-size: contain; - } - .text{ - height: 27px; - line-height: 27px; - padding-left: 2px; - padding-right: 2px; - text-align: center; - white-space: nowrap; - background: #F0F3F7; - } - } - - } -} -.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; -} -.link-text-font .b-font:before { - content: "\e763"; - color: inherit; -} -.info-font .b-font:before { - content: "\e63c"; - color: inherit; -} -.delete-font .b-font:before { - content: "\e6c4"; - color: inherit; -} \ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts deleted file mode 100644 index 7b9da73..0000000 --- a/src/app/app.component.ts +++ /dev/null @@ -1,48 +0,0 @@ -import {Vtape} from '../ui/index'; -import {LinkType} from '@ui/type'; -import appModel from './app.model'; -import title from './title/title.component'; -import linkSet from './link_set/link-set.component'; -import linkStatus from './link_status/link_status.component'; -import '../demo/plugin.redis.edit'; -import '../demo/plugin.redis.preview'; -import '../demo/plugin.tedis.pool'; -import {fetchLinkList} from '../shared/crud/crud.request'; -import './app.component.scss'; - -const className = 'fr.main'; -const Widget = BI.inherit(BI.Widget, { - _store() { - return BI.Models.getModel(appModel); - }, - render() { - return { - type: Vtape, - cls: 'database-connection-layout', - items: [{ - el: { - type: title, - }, - height: 40, - }, - { - type:linkSet, - }, - { - type: linkStatus, - }, - ], - }; - }, - mounted() { - /** - * 获取数据连接列表 - */ - fetchLinkList((linkList: LinkType[]) => { - this.store.setLinkList(linkList); - }); - }, -}); -BI.shortcut(className, Widget); - -export default className; diff --git a/src/app/app.constant.ts b/src/app/app.constant.ts index 0c25e29..fa584b2 100644 --- a/src/app/app.constant.ts +++ b/src/app/app.constant.ts @@ -1,5 +1,4 @@ export const ConstantName = 'dec.constant.database.conf.connect.list'; -export const links = ['APACHE KYLIN', 'DERBY', 'HP Vertica', 'IBM DB2', 'INFORMIX', 'Microsoft SQL Server', 'MySQL', 'Oracle', 'Privotal Greenplum Database', 'Postgresql', 'GaussDB 200']; BI.constant(ConstantName, [ ]); export default ConstantName; diff --git a/src/app/app.model.ts b/src/app/app.model.ts index 2b57da2..0698887 100644 --- a/src/app/app.model.ts +++ b/src/app/app.model.ts @@ -1,28 +1,35 @@ -const className = 'fr.model.main'; +const className = 'dec.dcm.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: '数据连接管理', + tab: '', linkList, linkSelected: {}, linkUpdate: {}, - moreLinkSelected:'', - statusSelected:'', - connectionNameErr:'', + moreLinkSelected: '', + statusSelected: '', + connectionNameErr: '', }; }, computed: { - + }, actions: { - setLinkList(value: LinkType[]) { - this.model.linkList = value; + initData(callback: Function) { + fetchLinkList((linkList: LinkType[]) => { + this.model.linkList = linkList; + this.model.tab = TAB_LINK_SET; + callback(); + }); }, }, }; diff --git a/src/app/app.ts b/src/app/app.ts new file mode 100644 index 0000000..de16680 --- /dev/null +++ b/src/app/app.ts @@ -0,0 +1,55 @@ +import {Vtape, Absolute, LinearSegment} from '../ui/index'; +import appModel from './app.model'; +import title from './title/title'; +import linkSet from './connection/link_set'; +import linkStatus from './status/link_status'; +import '../less/index.less'; + +const className = 'dec.dcm.main'; +const Widget = BI.inherit(BI.Widget, { + props: { + baseCls: 'dec-webui-dcm-layout bi-background', + }, + _store() { + return BI.Models.getModel(appModel); + }, + beforeInit (callback) { + this.store.initData(callback); + }, + render() { + return { + type: Vtape, + items: [ + { + el: { + type: title, + }, + height: 40, + }, + { + type: Absolute, + items: [{ + el: { + type: linkSet, + }, + left: 10, + top: 10, + right: 10, + bottom: 10, + }, { + el: { + type: linkStatus, + }, + left: 10, + top: 10, + right: 10, + bottom: 10, + }], + }, + ], + }; + }, +}); +BI.shortcut(className, Widget); + +export default className; diff --git a/src/app/connection/left/item/left_item.less b/src/app/connection/left/item/left_item.less new file mode 100644 index 0000000..a3d0766 --- /dev/null +++ b/src/app/connection/left/item/left_item.less @@ -0,0 +1,4 @@ +@import '../../../../less/index.less'; +.dec-webui-dcm-connection-left-item{ + .hover-visible(link-item-icon); +} \ No newline at end of file diff --git a/src/app/connection/left/item/left_item.ts b/src/app/connection/left/item/left_item.ts new file mode 100644 index 0000000..4e88046 --- /dev/null +++ b/src/app/connection/left/item/left_item.ts @@ -0,0 +1,77 @@ +import './left_item.less'; +import {WidgetType, Icon, TextButton, LeftRightVerticalAdapt} from '@ui'; +import ItemIcon from './left_item_icon'; +import ItemDelete from './left_item_delete'; +import Model from '../../link_set.model'; +import {ACTION_COPY, ACTION_TEST, ACTION_DELETE, DEFAULT_INFO} from '@private/constants'; +const className = 'dec.dcm.component.linkSet.left.item'; +const Widget: WidgetType = { + props: { + title: '', + id: '', + creator: '', + baseCls: 'dec-webui-dcm-connection-left-item bi-list-item-active', + }, + _store() { + return BI.Models.getModel(Model); + }, + render() { + const {title, creator, text, id} = this.options; + + return { + type: LeftRightVerticalAdapt, + items: { + left: [ + { + type: Icon, + cls: 'dcm-link-font', + height: 25, + width: 25, + text: BI.i18nText('Dec-Dcm_Connections'), + title, + }, + { + type: TextButton, + text: title, + title, + }, + ], + right: [ + { + type: ItemIcon, + cls: 'link-item-icon dcm-test-font', + title: BI.i18nText('Dec-Dcm_Test_Connection'), + value: ACTION_TEST, + id, + }, + { + type: ItemIcon, + cls: 'link-item-icon copy-font', + title: BI.i18nText('Dec-Dcm_Copy'), + value: ACTION_COPY, + id, + }, + { + type: ItemIcon, + cls: 'link-item-icon dcm-info-font', + 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: ItemDelete, + cls: 'link-item-icon dcm-delete-font', + title: BI.i18nText('Dec-Dcm_Delete'), + value: ACTION_DELETE, + id, + }, + ], + }, + }; + }, + doClick() { + const {title} = this.options; + this.store.setLinkSelected(title); + }, +}; +BI.shortcut(className, BI.inherit(BI.BasicButton, Widget)); +export default className; diff --git a/src/app/connection/left/item/left_item_delete.ts b/src/app/connection/left/item/left_item_delete.ts new file mode 100644 index 0000000..ad56b54 --- /dev/null +++ b/src/app/connection/left/item/left_item_delete.ts @@ -0,0 +1,43 @@ +import {WidgetType, Icon, BubbleCombo, TextBubblePopupBarView} from '@ui'; +import Model from '../../link_set.model'; + +const className = 'dec.dcm.component.linkSet.left.item.icon.delete'; +const Widget: WidgetType = { + _store() { + return BI.Models.getModel(Model); + }, + render() { + const {title, id} = this.options; + const that = this; + + return { + type: BubbleCombo, + stopPropagation: true, + direction: 'bottom', + ref: _ref => { + this.combo = _ref; + }, + el: { + type: Icon, + height: 25, + width: 25, + title, + }, + popup: { + type: TextBubblePopupBarView, + text: BI.i18nText('Dec-Dcm_Connection_Make_Sure_Delete'), + listeners: [{ + eventName: BI.BubblePopupBarView.EVENT_CLICK_TOOLBAR_BUTTON, + action (type: boolean) { + that.combo.hideView(); + if (type) { + that.store.onIconClick(title, id); + } + }, + }], + }, + }; + }, +}; +BI.shortcut(className, BI.inherit(BI.Widget, Widget)); +export default className; diff --git a/src/app/connection/left/item/left_item_icon.ts b/src/app/connection/left/item/left_item_icon.ts new file mode 100644 index 0000000..d16ed76 --- /dev/null +++ b/src/app/connection/left/item/left_item_icon.ts @@ -0,0 +1,26 @@ +import {WidgetType, IconButton} from '@ui'; +import Model from '../../link_set.model'; + +const className = 'dec.dcm.component.linkSet.left.item.icon'; +const Widget: WidgetType = { + _store() { + return BI.Models.getModel(Model); + }, + render() { + const {title} = this.options; + + return { + type: IconButton, + height: 25, + width: 25, + stopPropagation: true, + title, + handler: () => { + const {id, title} = this.options; + this.store.onIconClick(title, id); + }, + }; + }, +}; +BI.shortcut(className, BI.inherit(BI.Widget, Widget)); +export default className; diff --git a/src/app/connection/left/left.ts b/src/app/connection/left/left.ts new file mode 100644 index 0000000..dd4b5a1 --- /dev/null +++ b/src/app/connection/left/left.ts @@ -0,0 +1,39 @@ +import {WidgetType, ListView} from '@ui'; +import Model from '../link_set.model'; +import {LinkType} from '@ui/type'; +import LeftItem from './item/left_item'; + +const className = 'dec.dcm.component.linkset.left'; +const Widget: WidgetType = { + _store() { + return BI.Models.getModel(Model); + }, + watch: { + linkList(linkList: LinkType[]) { + this.leftContent.populate(BI.createItems(this._renderItems(linkList))); + }, + }, + render() { + return { + type: ListView, + ref: _ref => { + this.leftContent = _ref; + }, + items: this._renderItems(this.model.linkList), + }; + }, + _renderItems(linkList: LinkType[]) { + return BI.map(linkList, (index: number, item: LinkType) => { + return { + type: LeftItem, + selected: item.isSelected, + 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; diff --git a/src/app/connection/link_set.mixin.ts b/src/app/connection/link_set.mixin.ts new file mode 100644 index 0000000..45f487d --- /dev/null +++ b/src/app/connection/link_set.mixin.ts @@ -0,0 +1,50 @@ +import {LinkType} from '@ui/type'; +import {saveConnection} from './link_set.service'; + +const mixinName = 'dec.dcm.minxin.linkset'; +const Mixin = { + setConnectionNameErr(err: string) { + this.model.connectionNameErr = err; + }, + setEdit(type: boolean) { + this.model.linkSelected = { + ...this.model.linkSelected, + isSelected: type, + }; + this.model.linkUpdate = this.model.linkSelected; + }, + setCancel() { + const linkSelected: LinkType = this.model.linkSelected; + const linkList: LinkType[] = this.model.linkList; + if (linkSelected.connectionId) { + this.setEdit(false); + } else { + this.model.linkList = [ + ...linkList.filter(item => !!item.connectionId), + ]; + if (this.model.linkList.length > 0) { + this.model.linkList[0].isSelected = true; + this.model.linkSelected = { + ...this.model.linkList[0], + isSelected: false, + }; + } else { + this.model.linkSelected = {}; + } + this.model.linkUpdate = this.model.linkSelected; + } + }, + saveLink() { + const pluginData = this.model.linkUpdate.text ? BI.Constants.getConstant(`dec.constant.database.conf.connect.form.${this.model.linkUpdate.text.toLowerCase()}.value`) : {}; + const update = { + ...this.model.linkUpdate, + ...pluginData, + }; + saveConnection(update).then(() => { + this.setEdit(false); + }); + }, +}; + +Fix.mixin(mixinName, Mixin); +export default mixinName; diff --git a/src/app/connection/link_set.model.ts b/src/app/connection/link_set.model.ts new file mode 100644 index 0000000..f61bd13 --- /dev/null +++ b/src/app/connection/link_set.model.ts @@ -0,0 +1,154 @@ +import {LinkType} from '@ui/type'; +import {deleteConnection, testConnection} from '@shared/crud/crud.request'; +import {getCnnectionName} from './select/select.service'; +import {DATA_BASE_TYPE} from '@private/constants'; +import dialog from '@shared/service/dialog.service'; +import Mixin from './link_set.mixin'; +const className = 'dec.dcm.model.linkset'; +const Model = { + context: ['tab', 'linkList', 'linkSelected', 'linkUpdate', 'connectionNameErr'], + mixins: [Mixin], + actions: { + /** + * 左侧点击链接选中 + * @param name + */ + setLinkSelected(name: string) { + this._noSaveConfirm(() => { + this._setLinkSelected(name); + }); + }, + onIconClick(title: string, id: string) { + switch (title) { + case BI.i18nText('Dec-Dcm_Delete'): + deleteConnection(id, () => { + this.model.linkList = [...this.model.linkList.filter((item: LinkType) => item.connectionId !== id)]; + this.model.linkSelected = {}; + this.model.linkUpdate = {}; + }); + break; + case BI.i18nText('Dec-Dcm_Test_Connection'): + this._textLink(id); + break; + case BI.i18nText('Dec-Dcm_Copy'): + this._noSaveConfirm(() => { + this.copyLink(id); + }); + break; + default: + break; + } + }, + copyLink(id: string) { + const connectionName = BI.find(this.model.linkList, (index: number, item: LinkType) => item.connectionId === id).connectionName; + const name = getCnnectionName(this.model.linkList, connectionName); + let data = {}; + this.model.linkList.forEach((item: LinkType) => { + if (item.connectionId === id) { + data = item; + } + }); + const newCopy = { + ...data, + isSelected: true, + connectionName: name, + connectionId: '', + }; + this.model.linkList = [ + newCopy, + ...this.model.linkList, + ]; + this.model.linkSelected = { + ...newCopy, + }; + this.model.linkUpdate = { + ...newCopy, + }; + }, + setLinkUpdate(value: any) { + this.model.linkUpdate = value; + }, + setNewLink(value: string) { + if (!DATA_BASE_TYPE.some(item => item.text === value) && !BI.Constants.getConstant(`dec.constant.database.conf.connect.form.${value.toLowerCase()}.edit`)) { + dialog.error(BI.i18nText('Dec-Dcm_Connection_Option_Cannot_Find')); + + return; + } + this._noSaveConfirm(() => { + this._setNewLink(value); + }); + }, + }, + _setLinkSelected(name: string) { + this.model.linkList.forEach((item: LinkType) => { + item.isSelected = item.connectionName === name; + if (item.connectionName === name) { + this.model.linkSelected = { + ...item, + isSelected: false, + }; + } + }); + this.model.linkList = [...this.model.linkList]; + this.model.linkUpdate = this.model.linkSelected; + }, + _textLink(id: string) { + const link = this.model.linkList.find((item: LinkType) => item.connectionId === id); + const loadingId = dialog.loading(BI.i18nText('Dec-Dcm_Connection_Testing')); + testConnection(link, (res: any) => { + dialog.remove(loadingId); + if (res && res.errorCode) { + dialog.linkFail(`${link.connectionName}${BI.i18nText('Dec-Dcm_Connection_Test_Fail')}`, res.errorMsg, () => { + this._textLink(id); + }); + } else { + dialog.success(BI.i18nText('Dec-Dcm_Connection_Test_Success')); + } + }); + }, + _setNewLink(value: string) { + const name = getCnnectionName(this.model.linkList, value); + let data = {}; + DATA_BASE_TYPE.forEach(item => { + if (item.text === value) { + data = item; + } + }); + this.model.linkList = [ + { + connectionName: name, + isSelected: true, + ...data, + text: value, + }, + ...this.model.linkList, + ]; + this.model.linkSelected = { + ...data, + connectionName: name, + isSelected: true, + text: value, + }; + this.model.linkUpdate = { + ...data, + connectionName: name, + text: value, + }; + }, + _noSaveConfirm(cb: Function) { + if (this.model.linkSelected && this.model.linkSelected.isSelected) { + dialog.confirm(BI.i18nText('Dec-Dcm_Connection_Config_No_Save'), (isConfirm: boolean) => { + if (isConfirm) { + this.saveLink(); + } else { + this.setCancel(); + } + cb(); + }); + } else { + cb(); + } + }, +}; +BI.model(className, BI.inherit(Fix.Model, Model)); +export default className; diff --git a/src/app/link_set/link-set.service.ts b/src/app/connection/link_set.service.ts similarity index 100% rename from src/app/link_set/link-set.service.ts rename to src/app/connection/link_set.service.ts diff --git a/src/app/link_set/link-set.component.ts b/src/app/connection/link_set.ts similarity index 51% rename from src/app/link_set/link-set.component.ts rename to src/app/connection/link_set.ts index 9597ea3..07b25c7 100644 --- a/src/app/link_set/link-set.component.ts +++ b/src/app/connection/link_set.ts @@ -1,34 +1,39 @@ -import {Htape, WidgetType, Vtape, Left} from '@ui'; -import LeftList from './left/left.component'; -import linkSetModel from './link-set.model'; -import Select from './select/select.component'; -import Right from './right/right.component'; -const className = 'fr.linkset'; +import {Htape, WidgetType, Vtape, VerticalAdapt} from '@ui'; +import LeftList from './left/left'; +import linkSetModel from './link_set.model'; +import Select from './select/select'; +import Right from './right/right'; +import {TAB_LINK_SET} from '@private/constants'; +const className = 'dec.dcm.linkset'; const Widget: WidgetType = { + props: { + baseCls: 'bi-card', + }, _store() { return BI.Models.getModel(linkSetModel); }, - watch:{ + watch: { tab(tab: string) { - this.setVisible(tab === '数据连接管理'); + this.setVisible(tab === TAB_LINK_SET); }, }, render() { return { type: Htape, - cls: 'linkset', items: [{ el: { type: Vtape, - cls: 'database-left', + cls: 'dcm-link-left bi-border-right', items: [ { el: { - type: Left, - cls:'select-group', - items:[ + type: VerticalAdapt, + cls: 'bi-border-bottom', + items: [ { type: Select, + hgap: 10, + vgap: 10, }, ], }, @@ -36,6 +41,8 @@ const Widget: WidgetType = { }, { type: LeftList, cls: 'left-list', + vgap: 10, + hgap: 10, }, ], }, diff --git a/src/app/connection/more/item/more_link_item.less b/src/app/connection/more/item/more_link_item.less new file mode 100644 index 0000000..fd3ff0f --- /dev/null +++ b/src/app/connection/more/item/more_link_item.less @@ -0,0 +1,6 @@ +@import '../../../../less/index.less'; +.dec-webui-dcm-connection-more-link-item{ + &:hover{ + border-color :@border-color-highlight; + } +} \ No newline at end of file diff --git a/src/app/connection/more/item/more_link_item.ts b/src/app/connection/more/item/more_link_item.ts new file mode 100644 index 0000000..23c5628 --- /dev/null +++ b/src/app/connection/more/item/more_link_item.ts @@ -0,0 +1,68 @@ +import './more_link_item.less'; +import {WidgetType, Img, Label, Layout, Absolute, Vtape} from '@ui/index'; +import ModelName from './more_link_litem.model'; + +const className = 'dec.dcm.component.linkSet.morelink.item'; +const Widget: WidgetType = { + props: { + baseCls: 'dec-webui-dcm-connection-more-link-item bi-border', + height: 120, + width: 120, + }, + _store() { + return BI.Models.getModel(ModelName); + }, + watch: { + otherSelected(otherSelected: string) { + const {text} = this.options; + this.selected.setVisible(text === otherSelected); + }, + }, + render() { + const {text, name} = this.options; + + return { + type: Vtape, + items: [ + { + type: Absolute, + items: [ + { + el: { + type: Img, + src: this._buildResourceUrl(name), + }, + }, + { + el: { + type: Layout, + cls: 'dcm-link-more-selected', + invisible: true, + width: 30, + height: 30, + ref: _ref => { + this.selected = _ref; + }, + }, + right: 0, + }, + ], + }, + { + el: { + type: Label, + cls: 'bi-header-background', + text, + }, + height: 30, + }, + ], + }; + }, + _buildResourceUrl(name: string) { + // TODO: 目前不知道生产环境下的图片的绝对地址，先这样写用于测试。 + return `img/${name}.jpg`; + }, +}; +BI.shortcut(className, BI.inherit(BI.BasicButton, Widget)); +export default className; diff --git a/src/app/connection/more/item/more_link_litem.model.ts b/src/app/connection/more/item/more_link_litem.model.ts new file mode 100644 index 0000000..599711f --- /dev/null +++ b/src/app/connection/more/item/more_link_litem.model.ts @@ -0,0 +1,6 @@ +const className = 'dec.dcm.model.link_set.more_link_item'; +export const Model = BI.inherit(Fix.Model, { + context: ['otherSelected'], +}); +BI.model(className, Model); +export default className; diff --git a/src/app/connection/more/more_link.model.ts b/src/app/connection/more/more_link.model.ts new file mode 100644 index 0000000..c9c1e13 --- /dev/null +++ b/src/app/connection/more/more_link.model.ts @@ -0,0 +1,16 @@ +const className = 'dec.dcm.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; diff --git a/src/app/link_set/more/more.link.service.ts b/src/app/connection/more/more_link.service.ts similarity index 60% rename from src/app/link_set/more/more.link.service.ts rename to src/app/connection/more/more_link.service.ts index 1e4f9ca..c10489c 100644 --- a/src/app/link_set/more/more.link.service.ts +++ b/src/app/connection/more/more_link.service.ts @@ -1,14 +1,13 @@ -import MoreLink from './more.link.component'; -let SubbitButton: any = null; +import MoreLink from './more_link'; +let subbitButton = null; let selectKey = ''; export const moreLink = (onConfirm?: Function): void => { const id = BI.UUID(); - let Popovers: any = null; BI.Popovers.create(id, { type: 'bi.bar_popover', size: 'normal', - header: '更多数据连接', - width: 550, + header: BI.i18nText('Dec-Dcm_Connection_More_Title'), + width: 560, height: 500, body: { type: MoreLink, @@ -17,38 +16,35 @@ export const moreLink = (onConfirm?: Function): void => { eventName: 'EVENT_SELECT', action (text: string) { selectKey = text; - SubbitButton.setEnable(true); + subbitButton.setEnable(true); }, }, ], }, - footer:{ + footer: { type: 'bi.right_vertical_adapt', lgap: 10, items: [{ type: 'bi.button', - text: '取消', + text: BI.i18nText('BI-Basic_Cancel'), value: 1, level: 'ignore', - handler (v: any) { - Popovers.close(v); + handler () { + BI.Popovers.close(id); }, }, { type: 'bi.button', - text: '确定', + text: BI.i18nText('BI-Basic_Sure'), disabled: true, value: 0, - ref(ref: any) { - SubbitButton = ref; + ref: _ref => { + subbitButton = _ref; }, - handler (v: any) { - Popovers.close(v); + handler () { + BI.Popovers.close(id); onConfirm ? onConfirm(selectKey) : null; }, }], }, - ref(ref: any) { - Popovers = ref; - }, }).open(id); }; diff --git a/src/app/connection/more/more_link.ts b/src/app/connection/more/more_link.ts new file mode 100644 index 0000000..4d21a1a --- /dev/null +++ b/src/app/connection/more/more_link.ts @@ -0,0 +1,52 @@ +import {WidgetType, SearchEditor, Left, Vtape, VerticalAdapt} from '@ui/index'; +import {DATA_BASE_TYPE_OTHER} from '@private/constants'; +import MoreLinkItem from './item/more_link_item'; +import ModelName from './more_link.model'; +const className = 'dec.dcm.component.linkSet.morelink'; +const Widget: WidgetType = { + _store() { + return BI.Models.getModel(ModelName); + }, + render() { + return { + type: Vtape, + items: [ + { + el: { + type: VerticalAdapt, + items: [{ + type: SearchEditor, + width: 300, + watermark: BI.i18nText('Dec-Dcm_Search'), + }], + }, + height: 30, + }, + { + type: Left, + scrolly: true, + tgap: 2, + rgap: 2, + bgap: 2, + lgap: 2, + items: this._createItems(), + }, + ], + }; + }, + _createItems() { + return BI.map(DATA_BASE_TYPE_OTHER, (index: number, item) => { + return { + type: MoreLinkItem, + text: item.text, + name: item.databaseType, + handler: () => { + this.store.setOtherSelected(item.text); + this.fireEvent('EVENT_SELECT', item.text); + }, + }; + }); + }, +}; +BI.shortcut(className, BI.inherit(BI.Widget, Widget)); +export default className; diff --git a/src/app/connection/right/nothing.ts b/src/app/connection/right/nothing.ts new file mode 100644 index 0000000..4840ead --- /dev/null +++ b/src/app/connection/right/nothing.ts @@ -0,0 +1,30 @@ +import {WidgetType, Layout, Label, HorizotalAdapt, Vtape} from '@ui/index'; +const className = 'dec.dcm.component.right.nothing'; +const Widget: WidgetType = { + render() { + return { + type: HorizotalAdapt, + top: 200, + items: [{ + type: Vtape, + width: 260, + height: 150, + items: [ + { + el: { + type: Layout, + cls: 'data-connection-background', + }, + height: 130, + }, + { + type: Label, + text: BI.i18nText('Dec-Dcm_Connection_Plase_Add_One'), + }, + ], + }], + }; + }, +}; +BI.shortcut(className, BI.inherit(BI.Widget, Widget)); +export default className; diff --git a/src/app/connection/right/right.ts b/src/app/connection/right/right.ts new file mode 100644 index 0000000..905be56 --- /dev/null +++ b/src/app/connection/right/right.ts @@ -0,0 +1,33 @@ +import {WidgetType, ListView} from '@ui'; +import {LinkType} from '@ui/type'; +import Nothing from './nothing'; +import RightDetail from './right_detail/right_detail'; +import Model from '../link_set.model'; +const className = 'dec.dcm.component.right'; +const Widget: WidgetType = { + _store() { + return BI.Models.getModel(Model); + }, + watch: { + linkSelected(linkSelected: LinkType) { + this.rightContent.populate(BI.createItems([ + { + type: (linkSelected && linkSelected.connectionName) ? RightDetail : Nothing, + }, + ])); + }, + }, + render() { + return { + type: ListView, + ref: _ref => { + this.rightContent = _ref; + }, + items: [{ + type: Nothing, + }], + }; + }, +}; +BI.shortcut(className, BI.inherit(BI.Widget, Widget)); +export default className; diff --git a/src/app/connection/right/right.typing.d.ts b/src/app/connection/right/right.typing.d.ts new file mode 100644 index 0000000..060bd1a --- /dev/null +++ b/src/app/connection/right/right.typing.d.ts @@ -0,0 +1,25 @@ +export interface AttributeType { + text: string; + name: string; +} + +export interface FormType { + connectionName?: string; + factory?: string; + url?: string; + principal?: string; + credentials?: string; + originalCharsetName?: string; + + objectFactories?: string; + stateFactories?: string; + urlPkgPrefixes?: string; + dnsUrl?: string; + authoritative?: string; + batchSize?: string; + referral?: string; + securityProtocol?: string; + securityAuthentication?: string; + language?: string; + applet?: string; +} diff --git a/src/app/connection/right/right_detail/right_detail.model.ts b/src/app/connection/right/right_detail/right_detail.model.ts new file mode 100644 index 0000000..5a61555 --- /dev/null +++ b/src/app/connection/right/right_detail/right_detail.model.ts @@ -0,0 +1,6 @@ +const className = 'dec.dcm.model.link.set.right.detail'; +export const Model = BI.inherit(Fix.Model, { + context: ['linkSelected'], +}); +BI.model(className, Model); +export default className; diff --git a/src/app/connection/right/right_detail/right_detail.ts b/src/app/connection/right/right_detail/right_detail.ts new file mode 100644 index 0000000..d41547c --- /dev/null +++ b/src/app/connection/right/right_detail/right_detail.ts @@ -0,0 +1,74 @@ +import {WidgetType, ListView} 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 = 'dec.dcm.component.right.detail'; + +const Widget: WidgetType = { + _store() { + return BI.Models.getModel(Model); + }, + watch: { + linkSelected(linkSelected: LinkType) { + const showPage = this._createItems(linkSelected); + this.rightDetail.populate(BI.createItems(showPage)); + }, + }, + render() { + const linkSelected = this.model.linkSelected; + + return { + type: ListView, + ref: _ref => { + this.rightDetail = _ref; + }, + items: this._createItems(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, + vgap: 10, + hgap: 10, + linkSelected, + }, + ]; + }, +}; +BI.shortcut(className, BI.inherit(BI.Widget, Widget)); +export default className; diff --git a/src/app/connection/right/right_edit/right_edit.model.ts b/src/app/connection/right/right_edit/right_edit.model.ts new file mode 100644 index 0000000..21f99ed --- /dev/null +++ b/src/app/connection/right/right_edit/right_edit.model.ts @@ -0,0 +1,20 @@ +export const className = 'dec.dcm.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; diff --git a/src/app/link_set/right/right_edit/right.edit.service.ts b/src/app/connection/right/right_edit/right_edit.service.ts similarity index 82% rename from src/app/link_set/right/right_edit/right.edit.service.ts rename to src/app/connection/right/right_edit/right_edit.service.ts index 8d9fb89..90f2a9a 100644 --- a/src/app/link_set/right/right_edit/right.edit.service.ts +++ b/src/app/connection/right/right_edit/right_edit.service.ts @@ -18,3 +18,7 @@ export function getDrivers(linkSelected: LinkType): {text: string; value: string return drivers; } + +export function connectNameChecker(name: string): boolean { + return /^\+?[1-9][0-9]*$/.test(name); +} diff --git a/src/app/connection/right/right_edit/right_edit.ts b/src/app/connection/right/right_edit/right_edit.ts new file mode 100644 index 0000000..edaf66a --- /dev/null +++ b/src/app/connection/right/right_edit/right_edit.ts @@ -0,0 +1,373 @@ +import {WidgetType, Vertical, MultiSelectItem, TextAreaEditor, Button, TextValueCombo, TextEditor, VerticalAdapt, Label} from '@ui/index'; +import {LinkType} from '@ui/type'; +import {CONNECT_CHARSET} from '@private/constants'; +import Model from '../../link_set.model'; +import Title from '@shared/components/title'; +import {getDrivers, connectNameChecker} from './right_edit.service'; +let connectionName: any = null; +const className = 'dec.dcm.component.right.edit'; +const Widget: WidgetType = { + _store() { + return BI.Models.getModel(Model); + }, + watch: { + connectionNameErr(msg: string) { + if (msg) { + BI.Bubbles.show('singleBubble', msg, connectionName, { + level: 'error', + }); + } else { + BI.Bubbles.hide('singleBubble'); + } + }, + }, + render() { + const linkSelected: LinkType = this.model.linkSelected; + const that = this; + + return { + type: Vertical, + vgap: 10, + items: [ + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_ConnectionName'), + }, + { + type: TextEditor, + width: 300, + value: linkSelected.connectionName, + ref(ref: any) { + connectionName = ref; + }, + listeners: [{ + eventName: BI.Editor.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + connectionName: this.getValue(), + }); + }, + }, { + eventName: BI.Editor.EVENT_FOCUS, + action() { + that.store.setConnectionNameErr(''); + }, + }], + }, + { + type: Label, + cls: 'bi-water-mark', + lgap: 5, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_ConnectionName-Change-Confirm'), + }, + ], + }, + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_First_Step'), + }, + { + type: Vertical, + vgap: 10, + items: [ + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_Driver'), + }, + { + type: TextValueCombo, + width: 300, + text: linkSelected.driver, + items: getDrivers(linkSelected), + listeners: [{ + eventName: BI.TextValueCombo.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + driver: this.getValue()[0], + }); + }, + }], + }, + ], + }, + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_URL'), + }, + { + type: TextEditor, + watermark: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input'), + width: 300, + value: linkSelected.url, + listeners: [{ + eventName: BI.Editor.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + url: this.getValue(), + }); + }, + }], + }, + ], + }, + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_OriginalCharsetName'), + }, + { + type: TextValueCombo, + width: 300, + text: linkSelected.originalCharsetName === '' ? BI.i18nText('Dec-Dcm_Connection_Form_Auto') : linkSelected.originalCharsetName, + items: [ + { + text: BI.i18nText('Dec-Dcm_Connection_Form_Auto'), + value: '', + }, + ...CONNECT_CHARSET, + ], + listeners: [{ + eventName: BI.TextValueCombo.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + originalCharsetName: this.getValue()[0], + }); + }, + }], + }, + ], + }, + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_UserName'), + }, + { + type: TextEditor, + allowBlank: true, + watermark: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input'), + width: 300, + value: linkSelected.user, + listeners: [{ + eventName: BI.Editor.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + user: this.getValue(), + }); + }, + }], + }, + ], + }, + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_Password'), + }, + { + type: TextEditor, + inputType: 'password', + allowBlank: true, + watermark: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input'), + width: 300, + value: linkSelected.password, + listeners: [{ + eventName: BI.Editor.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + password: this.getValue(), + }); + }, + }], + }, + ], + }, + { + type: Title, + text: BI.i18nText('Dec-Dcm_Connection_Form_Pool_Properties'), + }, + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_SQL_Validation_Query'), + }, + { + type: TextAreaEditor, + cls: 'bi-border', + allowBlank: true, + watermark: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input'), + width: 300, + height: 100, + value: linkSelected.validationQuery, + listeners: [{ + eventName: BI.Editor.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + validationQuery: this.getValue(), + }); + }, + }], + }, + ], + }, + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_Connection-Check'), + }, + { + type: MultiSelectItem, + text: BI.i18nText('Dec-Dcm_Yes'), + selected: linkSelected.testOnBorrow, + width: 60, + listeners: [{ + eventName: BI.Editor.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + testOnBorrow: this.isSelected(), + }); + }, + }], + }, + ], + }, + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_Connection_Max_Number'), + }, + { + type: TextEditor, + allowBlank: true, + watermark: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input'), + width: 60, + value: linkSelected.maxActive, + errorText: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input-Number'), + validationChecker: connectNameChecker, + listeners: [{ + eventName: BI.Editor.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + maxActive: this.getValue(), + }); + }, + }], + }, + ], + }, + ], + }, + ], + }, + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Second_Step'), + }, + { + type: Button, + width: 80, + text: BI.i18nText('Dec-Dcm_Test_Connection'), + level: 'ignore', + }, + ], + }, + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Third_Step'), + }, + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_Pattern'), + }, + { + type: TextEditor, + width: 300, + disabled: true, + }, + ], + }, + ], + }; + }, +}; +BI.shortcut(className, BI.inherit(BI.Widget, Widget)); +export default className; diff --git a/src/app/connection/right/right_edit/right_edit_jndi.ts b/src/app/connection/right/right_edit/right_edit_jndi.ts new file mode 100644 index 0000000..8c56730 --- /dev/null +++ b/src/app/connection/right/right_edit/right_edit_jndi.ts @@ -0,0 +1,226 @@ +import {Vertical, TextValueCombo, TextButton, Label, TextEditor, VerticalAdapt} from '@ui'; +import {JNDI_FACTORYS, OTHER_ATTRIBUTES, CONNECT_CHARSET} from '@private/constants'; +import {AttributeType} from '../right.typing'; +import ModelName from './right_edit.model'; + +const classNameEdit = 'dec.dcm.component.right.edit.jndi'; +const Widget = BI.inherit(BI.Widget, { + _store() { + return BI.Models.getModel(ModelName); + }, + watch: { + isCollapse(isCollapse) { + const text = isCollapse ? BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Collapse-Attributes') : BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Other_Attributes'); + this.collapseRef.setText(text); + this.otherAttributesRef.setVisible(isCollapse); + }, + }, + render() { + const {connectionName, url, factory, principal, credentials, originalCharsetName} = this.options; + + return { + type: Vertical, + vgap: 10, + items: [ + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_JNDI_Form_ConnectionName'), + }, + { + type: TextEditor, + width: 300, + allowBlank: true, + value: connectionName, + }, + ], + }, + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Context'), + }, + { + type: Vertical, + vgap: 10, + items: [ + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 180, + textAlign: 'left', + text: 'INTIAL_CONTEXT_FACTORY', + }, + { + type: TextValueCombo, + width: 300, + value: factory, + items: BI.map(JNDI_FACTORYS, (index: number, item: string) => { + return { + text: item, + value: item, + }; + }), + }, + ], + }, + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 180, + textAlign: 'left', + text: 'PROVIDER_URL', + }, + { + type: TextEditor, + width: 300, + allowBlank: true, + value: url, + }, + ], + }, + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 180, + textAlign: 'left', + text: 'SECURITY_PRINCIPAL', + }, + { + type: TextEditor, + width: 300, + allowBlank: true, + value: principal, + }, + ], + }, + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 180, + textAlign: 'left', + text: 'SECURITY_CREDENTIALS', + }, + { + type: TextEditor, + width: 300, + allowBlank: true, + value: credentials, + }, + ], + }, + { + type: VerticalAdapt, + items: [ + { + type: TextButton, + text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Other_Attributes'), + width: 480, + textAlign: 'right', + ref: _ref => { + this.collapseRef = _ref; + }, + handler: () => { + this.store.setIsCollapse(!this.model.isCollapse); + }, + }, + ], + }, + { + type: Vertical, + invisible: true, + ref: _ref => { + this.otherAttributesRef = _ref; + }, + items: this._getOtherItems(), + }, + ], + }, + ], + }, + { + type: Label, + cls: 'bi-error', + lgap: 10, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Notice'), + }, + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Advanced'), + }, + { + type: Label, + cls: 'bi-font-bold', + width: 180, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_OriginalCharsetName'), + }, + { + type: TextValueCombo, + width: 300, + items: [{ + text: BI.i18nText('Dec-Dcm_Connection_Form_Auto'), + value: originalCharsetName, + }, + ...CONNECT_CHARSET, + ], + }, + ], + }, + ], + }; + }, + _getOtherItems() { + return BI.map(OTHER_ATTRIBUTES, (index: number, item: AttributeType) => { + return { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 180, + textAlign: 'left', + text: item.text, + }, + { + type: TextEditor, + width: 300, + allowBlank: true, + value: this.options[item.name], + }, + ], + }; + }); + }, +}); +BI.shortcut(classNameEdit, Widget); +export default classNameEdit; diff --git a/src/app/connection/right/right_edit/right_edit_mysql.ts b/src/app/connection/right/right_edit/right_edit_mysql.ts new file mode 100644 index 0000000..0d36f01 --- /dev/null +++ b/src/app/connection/right/right_edit/right_edit_mysql.ts @@ -0,0 +1,325 @@ +import {WidgetType, Vertical, MultiSelectItem, TextAreaEditor, Button, TextValueCombo, TextEditor, VerticalAdapt, Label} from '@ui/index'; +import {LinkType} from '@ui/type'; +import {CONNECT_CHARSET} from '@private/constants'; +import Model from '../../link_set.model'; +import Title from '@shared/components/title'; +import {getDrivers, connectNameChecker} from './right_edit.service'; +let connectionName: any = null; +const className = 'dec.dcm.component.right.edit.mysql'; +const Widget: WidgetType = { + _store() { + return BI.Models.getModel(Model); + }, + watch: { + connectionNameErr(msg: string) { + if (msg) { + BI.Bubbles.show('singleBubble', msg, connectionName, { + level: 'error', + }); + } else { + BI.Bubbles.hide('singleBubble'); + } + }, + }, + render() { + const linkSelected: LinkType = this.model.linkSelected; + const that = this; + + return { + type: Vertical, + vgap: 10, + items: [ + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_ConnectionName'), + }, + { + type: TextEditor, + width: 300, + value: linkSelected.connectionName, + ref(ref: any) { + connectionName = ref; + }, + listeners: [{ + eventName: BI.Editor.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + connectionName: this.getValue(), + }); + }, + }, { + eventName: BI.Editor.EVENT_FOCUS, + action() { + that.store.setConnectionNameErr(''); + }, + }], + }, + { + type: Label, + cls: 'bi-water-mark', + lgap: 5, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_ConnectionName-Change-Confirm'), + }, + ], + }, + + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_Driver'), + }, + { + type: TextValueCombo, + width: 300, + text: linkSelected.driver, + items: getDrivers(linkSelected), + listeners: [{ + eventName: BI.TextValueCombo.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + driver: this.getValue()[0], + }); + }, + }], + }, + ], + }, + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_URL'), + }, + { + type: TextEditor, + watermark: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input'), + width: 300, + value: linkSelected.url, + listeners: [{ + eventName: BI.Editor.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + url: this.getValue(), + }); + }, + }], + }, + ], + }, + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_OriginalCharsetName'), + }, + { + type: TextValueCombo, + width: 300, + text: linkSelected.originalCharsetName === '' ? BI.i18nText('Dec-Dcm_Connection_Form_Auto') : linkSelected.originalCharsetName, + items: [ + { + text: BI.i18nText('Dec-Dcm_Connection_Form_Auto'), + value: '', + }, + ...CONNECT_CHARSET, + ], + listeners: [{ + eventName: BI.TextValueCombo.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + originalCharsetName: this.getValue()[0], + }); + }, + }], + }, + ], + }, + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_UserName'), + }, + { + type: TextEditor, + allowBlank: true, + watermark: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input'), + width: 300, + value: linkSelected.user, + listeners: [{ + eventName: BI.Editor.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + user: this.getValue(), + }); + }, + }], + }, + ], + }, + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_Password'), + }, + { + type: TextEditor, + inputType: 'password', + allowBlank: true, + watermark: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input'), + width: 300, + value: linkSelected.password, + listeners: [{ + eventName: BI.Editor.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + password: this.getValue(), + }); + }, + }], + }, + ], + }, + { + type: Title, + text: BI.i18nText('Dec-Dcm_Connection_Form_Pool_Properties'), + }, + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_SQL_Validation_Query'), + }, + { + type: TextAreaEditor, + cls: 'bi-border', + allowBlank: true, + watermark: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input'), + width: 300, + height: 100, + value: linkSelected.validationQuery, + listeners: [{ + eventName: BI.Editor.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + validationQuery: this.getValue(), + }); + }, + }], + }, + ], + }, + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_Connection-Check'), + }, + { + type: MultiSelectItem, + text: BI.i18nText('Dec-Dcm_Yes'), + selected: linkSelected.testOnBorrow, + width: 60, + listeners: [{ + eventName: BI.Editor.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + testOnBorrow: this.isSelected(), + }); + }, + }], + }, + ], + }, + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_Connection_Max_Number'), + }, + { + type: TextEditor, + allowBlank: true, + watermark: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input'), + width: 60, + value: linkSelected.maxActive, + errorText: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input-Number'), + validationChecker: connectNameChecker, + listeners: [{ + eventName: BI.Editor.EVENT_CHANGE, + action() { + that.store.setLinkUpdate({ + ...that.model.linkUpdate, + maxActive: this.getValue(), + }); + }, + }], + }, + ], + }, + { + type: VerticalAdapt, + items: [ + { + type: Button, + width: 80, + text: BI.i18nText('Dec-Dcm_Test_Connection'), + level: 'ignore', + }, + ], + }, + ], + }; + }, +}; +BI.shortcut(className, BI.inherit(BI.Widget, Widget)); +export default className; diff --git a/src/app/connection/right/right_show/right_show.model.ts b/src/app/connection/right/right_show/right_show.model.ts new file mode 100644 index 0000000..4209415 --- /dev/null +++ b/src/app/connection/right/right_show/right_show.model.ts @@ -0,0 +1,20 @@ +export const className = 'dec.dcm.model.components.right.show'; +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; diff --git a/src/app/connection/right/right_show/right_show.ts b/src/app/connection/right/right_show/right_show.ts new file mode 100644 index 0000000..590efe1 --- /dev/null +++ b/src/app/connection/right/right_show/right_show.ts @@ -0,0 +1,72 @@ +import {WidgetType, Vertical} from '@ui/index'; +import RightShowModel from '../../link_set.model'; +import BothSide from '@shared/components/both_side'; +import Title from '@shared/components/title'; +import {LinkType} from '@ui/type'; +const className = 'dec.dcm.component.right.show'; +const Widget: WidgetType = { + _store() { + return BI.Models.getModel(RightShowModel); + }, + render() { + const linkSelected: LinkType = this.model.linkSelected; + + return { + type: Vertical, + vgap: 10, + items: [ + { + type: BothSide, + leftText: BI.i18nText('Dec-Dcm_Connection_Form_ConnectionName'), + rightText: linkSelected.connectionName, + }, + { + type: BothSide, + leftText: BI.i18nText('Dec-Dcm_Connection_Form_Driver'), + rightText: linkSelected.driver, + }, + { + type: BothSide, + leftText: BI.i18nText('Dec-Dcm_Connection_Form_URL'), + rightText: linkSelected.url, + }, + { + type: BothSide, + leftText: BI.i18nText('Dec-Dcm_Connection_Form_OriginalCharsetName'), + rightText: linkSelected.originalCharsetName === '' ? BI.i18nText('Dec-Dcm_Connection_Form_Auto') : linkSelected.originalCharsetName, + }, + { + type: BothSide, + leftText: BI.i18nText('Dec-Dcm_Connection_Form_UserName'), + rightText: linkSelected.user, + }, + { + type: BothSide, + leftText: BI.i18nText('Dec-Dcm_Connection_Form_Password'), + rightText: linkSelected.password, + }, + { + type: Title, + text: BI.i18nText('Dec-Dcm_Connection_Form_Pool_Properties'), + }, + { + type: BothSide, + leftText: BI.i18nText('Dec-Dcm_Connection_Form_SQL_Validation_Query'), + rightText: linkSelected.validationQuery, + }, + { + type: BothSide, + leftText: BI.i18nText('Dec-Dcm_Connection_Form_Connection-Check'), + rightText: linkSelected.testOnBorrow ? BI.i18nText('Dec-Dcm_Yes') : BI.i18nText('Dec-Dcm_No'), + }, + { + type: BothSide, + leftText: BI.i18nText('Dec-Dcm_Connection_Form_Connection_Max_Number'), + rightText: linkSelected.maxActive, + }, + ], + }; + }, +}; +BI.shortcut(className, BI.inherit(BI.Widget, Widget)); +export default className; diff --git a/src/app/connection/right/right_show/right_show_jndi.ts b/src/app/connection/right/right_show/right_show_jndi.ts new file mode 100644 index 0000000..d4db6e1 --- /dev/null +++ b/src/app/connection/right/right_show/right_show_jndi.ts @@ -0,0 +1,203 @@ +import {Vertical, TextButton, Label, VerticalAdapt} from '@ui'; +import {OTHER_ATTRIBUTES} from '@private/constants'; +import {AttributeType} from '../right.typing'; +import ModelName from './right_show.model'; + +const className = 'dec.dcm.component.right.show.jndi'; +const Widget = BI.inherit(BI.Widget, { + _store() { + return BI.Models.getModel(ModelName); + }, + watch: { + isCollapse(isCollapse) { + const text = isCollapse ? BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Collapse-Attributes') : BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Other_Attributes'); + this.collapseRef.setText(text); + this.otherAttributesRef.setVisible(isCollapse); + }, + }, + render() { + const {connectionName, url, factory, principal, credentials, originalCharsetName} = this.options; + + return { + type: Vertical, + vgap: 10, + items: [ + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_JNDI_Form_ConnectionName'), + }, + { + type: Label, + text: connectionName, + }, + ], + }, + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Context'), + }, + { + type: Vertical, + vgap: 10, + items: [ + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 180, + textAlign: 'left', + text: 'INTIAL_CONTEXT_FACTORY', + }, + { + type: Label, + text: factory, + }, + ], + }, + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 180, + textAlign: 'left', + text: 'PROVIDER_URL', + }, + { + type: Label, + text: url, + }, + ], + }, + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 180, + textAlign: 'left', + text: 'SECURITY_PRINCIPAL', + }, + { + type: Label, + value: principal, + }, + ], + }, + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 180, + textAlign: 'left', + text: 'SECURITY_CREDENTIALS', + }, + { + type: Label, + value: credentials, + }, + ], + }, + { + type: VerticalAdapt, + items: [ + { + type: TextButton, + text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Other_Attributes'), + width: 480, + textAlign: 'right', + ref: _ref => { + this.collapseRef = _ref; + }, + handler: () => { + this.store.setIsCollapse(!this.model.isCollapse); + }, + }, + ], + }, + { + type: Vertical, + invisible: true, + ref: _ref => { + this.otherAttributesRef = _ref; + }, + items: this._getOtherItems(), + }, + ], + }, + ], + }, + { + type: Label, + cls: 'bi-error', + lgap: 10, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Notice'), + }, + { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 115, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Advanced'), + }, + { + type: Label, + cls: 'bi-font-bold', + width: 180, + textAlign: 'left', + text: BI.i18nText('Dec-Dcm_Connection_Form_OriginalCharsetName'), + }, + { + type: Label, + text: originalCharsetName ? originalCharsetName : BI.i18nText('Dec-Dcm_Connection_Form_Auto'), + }, + ], + }, + ], + }; + }, + _getOtherItems() { + return BI.map(OTHER_ATTRIBUTES, (index: number, item: AttributeType) => { + return { + type: VerticalAdapt, + items: [ + { + type: Label, + cls: 'bi-font-bold', + width: 180, + textAlign: 'left', + text: item.text, + }, + { + type: Label, + value: this.options[item.name], + }, + ], + }; + }); + }, +}); +BI.shortcut(className, Widget); +export default className; diff --git a/src/app/connection/right/right_title/right_title.model.ts b/src/app/connection/right/right_title/right_title.model.ts new file mode 100644 index 0000000..6c54731 --- /dev/null +++ b/src/app/connection/right/right_title/right_title.model.ts @@ -0,0 +1,20 @@ +import LinksetMixin from '../../link_set.mixin'; +import {LinkType} from '@ui/type'; +const modelName = 'dec.dcm.model.component.right.title'; +export const Model = BI.inherit(Fix.Model, { + context: ['linkSelected', 'linkList', 'linkUpdate'], + mixins: [LinksetMixin], + actions: { + onSave() { + const linkList: LinkType[] = this.model.linkList; + const result = BI.find(linkList, (idx: number, value: LinkType) => this.model.linkUpdate.connectionName === value.connectionName && value.connectionId !== this.model.linkUpdate.connectionId); + if (result) { + this.setConnectionNameErr(BI.i18nText('Dec-Dcm_Connection_Is_Existence')); + } else { + this.saveLink(); + } + }, + }, +}); +BI.model(modelName, Model); +export default modelName; diff --git a/src/app/connection/right/right_title/right_title.ts b/src/app/connection/right/right_title/right_title.ts new file mode 100644 index 0000000..f3995f3 --- /dev/null +++ b/src/app/connection/right/right_title/right_title.ts @@ -0,0 +1,66 @@ +import {WidgetType, Label, Button, LeftRightVerticalAdapt} from '@ui/index'; +import RightTitleModel from './right_title.model'; +import {LinkType} from '@ui/type'; +import {OTHER_CONNECT} from '@private/constants'; +const className = 'dec.dcm.component.right.title'; +const Widget: WidgetType = { + props: { + baseCls: 'bi-border-bottom', + }, + _store() { + return BI.Models.getModel(RightTitleModel); + }, + render() { + const linkSelected: LinkType = this.model.linkSelected; + const that = this; + const {isEdit} = this.options; + const title = linkSelected.text === OTHER_CONNECT ? BI.i18nText('Dec-Dcm_Connection_Other') : linkSelected.text; + + return { + type: LeftRightVerticalAdapt, + height: 40, + items: { + left: [ + { + type: Label, + cls: 'bi-font-bold', + hgap: 10, + text: `${BI.i18nText('Dec-Dcm_Data_Connections')}(${title ? title : BI.i18nText('Dec-Dcm_Default')})`, + }, + ], + right: [ + { + type: Button, + hgap: 10, + invisible: isEdit, + text: BI.i18nText('Dec-Dcm_Edit'), + handler() { + that.store.setEdit(true); + }, + }, + { + type: Button, + hgap: 10, + invisible: !isEdit, + level: 'ignore', + text: BI.i18nText('BI-Basic_Cancel'), + handler() { + that.store.setCancel(); + }, + }, + { + type: Button, + hgap: 10, + invisible: !isEdit, + text: BI.i18nText('Dec-Dcm_Save'), + handler() { + that.store.onSave(); + }, + }, + ], + }, + }; + }, +}; +BI.shortcut(className, BI.inherit(BI.Widget, Widget)); +export default className; diff --git a/src/app/connection/select/select.service.ts b/src/app/connection/select/select.service.ts new file mode 100644 index 0000000..0e11c16 --- /dev/null +++ b/src/app/connection/select/select.service.ts @@ -0,0 +1,23 @@ +import {LinkType} from '@ui/type'; +import pluginListConstant from '../../app.constant'; + +export const getCnnectionName = (links: LinkType[], name: string): string => { + const plugins: string[] = BI.Constants.getConstant(pluginListConstant); + let nameIndex = 0; + const title = name.replace(/[0-9]/g, ''); + const isPlugin = BI.some(plugins, (index: number, item: string) => item === title); + const startWith = isPlugin ? title : BI.i18nText('Dec-Dcm_Data_Connections'); + + links.forEach(link => { + link.isSelected = false; + if (link.connectionName.startsWith(startWith)) { + const name = link.connectionName.replace(startWith, '0'); + const index = parseInt(name, 10) + 1; + if (index > nameIndex) { + nameIndex = index; + } + } + }); + + return `${startWith}${nameIndex > 0 ? nameIndex : ''}`; +}; diff --git a/src/app/link_set/select/select.component.ts b/src/app/connection/select/select.ts similarity index 59% rename from src/app/link_set/select/select.component.ts rename to src/app/connection/select/select.ts index cdbe8e6..10dd883 100644 --- a/src/app/link_set/select/select.component.ts +++ b/src/app/connection/select/select.ts @@ -1,54 +1,52 @@ import {WidgetType, Combo, ButtonGroup, TextItem, Vertical} from '@ui'; -import selectModel from '../link-set.model'; -import {moreLink} from '../more/more.link.service'; -import connectList, {links} from '../../app.constant'; -const className = 'fr.linkset.select'; +import selectModel from '../link_set.model'; +import {moreLink} from '../more/more_link.service'; +import connectList from '../../app.constant'; +import {DATA_LINKS} from '@private/constants'; +const className = 'dec.dcm.linkset.select'; const Widget: WidgetType = { _store() { return BI.Models.getModel(selectModel); }, render() { - let combo: any = null; - return { type: Combo, - cls:'select', trigger: 'click', adjustYOffset: 4, el: { type: 'bi.button', - text: '新建数据连接', - height: 24, + text: BI.i18nText('Dec-Dcm_Connection_New'), }, popup: { el: { type: ButtonGroup, - cls:'database-link-items', - items: [...BI.map([...links, ...BI.Constants.getConstant(connectList)], (index: number, item: string) => { + items: [...BI.map([...DATA_LINKS, ...BI.Constants.getConstant(connectList)], (index: number, item: string) => { return { type: TextItem, height: 24, width: 152, + textLgap: 10, text: item, title: item, value: item, }; }), { type: TextItem, - cls: 'link-item', height: 24, width: 152, - text: '更多数据连接...', - title:'更多数据连接...', + textLgap: 10, + text: BI.i18nText('Dec-Dcm_Connection_More'), + title: BI.i18nText('Dec-Dcm_Connection_More'), value: 'more', }, { type: TextItem, - cls: 'link-item', + cls: 'bi-border-top', height: 24, width: 152, - text: '其他', - title:'其他', - value: '其他', + textLgap: 10, + text: BI.i18nText('Dec-Dcm_Connection_Other'), + title: BI.i18nText('Dec-Dcm_Connection_Other'), + value: 'other', }], layouts: [{ type: Vertical, @@ -56,7 +54,7 @@ const Widget: WidgetType = { }, maxHeight: 400, }, - listeners:[{ + listeners: [{ eventName: 'EVENT_CHANGE', action: (v: string) => { if (v === 'more') { @@ -66,11 +64,11 @@ const Widget: WidgetType = { } else { this.store.setNewLink(v); } - combo.hideView(); + this.combo.hideView(); }, }], - ref () { - combo = this; + ref: _ref => { + this.combo = _ref; }, }; }, diff --git a/src/app/link_set/left/left.component.ts b/src/app/link_set/left/left.component.ts deleted file mode 100644 index 0d4c53a..0000000 --- a/src/app/link_set/left/left.component.ts +++ /dev/null @@ -1,26 +0,0 @@ -import {WidgetType, Vertical} from '@ui'; -import Model from '../link-set.model'; -import {LinkType} from '@ui/type'; -import {getLinks} from './left.service'; -const className = 'fr.component.linkset.left'; -let leftContent: any = null; -const Widget: WidgetType = { - _store() { - return BI.Models.getModel(Model); - }, - watch:{ - linkList(linkList: LinkType[]) { - leftContent.populate(BI.createItems(getLinks(linkList))); - }, - }, - render() { - return { - type: Vertical, - ref(_ref: any) { - leftContent = _ref; - }, - }; - }, -}; -BI.shortcut(className, BI.inherit(BI.Widget, Widget)); -export default className; diff --git a/src/app/link_set/left/left.service.ts b/src/app/link_set/left/left.service.ts deleted file mode 100644 index 9a915a3..0000000 --- a/src/app/link_set/left/left.service.ts +++ /dev/null @@ -1,18 +0,0 @@ -import {LinkType} from '@ui/type'; -import LeftItem from './left_item/left.item.component'; - -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 : '默认', - }); - }); - - return links; -}; diff --git a/src/app/link_set/left/left_item/left.item.component.ts b/src/app/link_set/left/left_item/left.item.component.ts deleted file mode 100644 index dab4019..0000000 --- a/src/app/link_set/left/left_item/left.item.component.ts +++ /dev/null @@ -1,79 +0,0 @@ -import {WidgetType, Left, Label, Icon} from '@ui'; -import ItemIcon from './left.item.icon.component'; -import Model from '../../link-set.model'; -const className = 'fr.component.linkSet.left.item'; -const Widget: WidgetType = { - props: { - title:'', - id:'', - creator: '', - }, - _store() { - return BI.Models.getModel(Model); - }, - render() { - const {title, extraCls, creator, text, id} = this.options; - - return { - type: Left, - cls: 'left-item', - extraCls, - items: [ - { - type: Icon, - cls: 'link-font', - height: 24, - width: 26, - text: '连接', - title, - }, - { - type: Label, - cls:'link-title', - textAlign: 'left', - text: title, - title, - }, - { - type: Left, - cls: 'icons', - items: [ - { - type: ItemIcon, - cls: 'link-text-font', - title: '测试连接', - id, - }, - { - type: ItemIcon, - cls: 'copy-font', - title: '复制', - id, - }, - { - type: ItemIcon, - cls: 'info-font', - title: `类型：${text === 'DESIGNER' ? '其他' : text} \r\n创建者：${creator}`, - id, - }, - { - type: ItemIcon, - cls: 'delete-font', - title: '删除', - id, - }, - ], - }, - - ], - }; - }, - mounted() { - const {title} = this.options; - this.element.on('click', () => { - this.store.setLinkSelected(title); - }); - }, -}; -BI.shortcut(className, BI.inherit(BI.Widget, Widget)); -export default className; diff --git a/src/app/link_set/left/left_item/left.item.icon.component.ts b/src/app/link_set/left/left_item/left.item.icon.component.ts deleted file mode 100644 index fa7354c..0000000 --- a/src/app/link_set/left/left_item/left.item.icon.component.ts +++ /dev/null @@ -1,86 +0,0 @@ -import {WidgetType, Icon, BubbleCombo, TextBubblePopupBarView} from '@ui/index'; -import Model from '../../link-set.model'; -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 that = this; - let iconContent: any = null; - let combo: any = null; - if (title === '删除') { - return { - type: BubbleCombo, - direction: 'bottom', - ref () { - combo = this; - }, - el: { - type: Icon, - cls, - extraCls: 'action-icon', - height: 24, - width: 26, - title, - ref (ref: any) { - iconContent = ref; - }, - }, - popup: { - type: TextBubblePopupBarView, - text: '确定删除该数据连接？', - listeners: [{ - eventName: BI.BubblePopupBarView.EVENT_CLICK_TOOLBAR_BUTTON, - action (type: boolean) { - combo.hideView(); - if (type) { - that.store.onIconClick(title, id); - } - }, - }], - }, - listeners: [{ - eventName: BI.BubbleCombo.EVENT_EXPAND, - action () { - iconContent.element.css({ - visibility:'visible', - }); - }, - }, { - eventName: BI.BubbleCombo.EVENT_AFTER_HIDEVIEW, - action () { - iconContent.element.css({ - visibility:'hidden', - }); - }, - }], - }; - } - - return { - type: Icon, - cls, - extraCls: 'action-icon', - height: 24, - width: 26, - title, - }; - }, - mounted() { - const {title, id} = this.options; - if (title !== '删除') { - 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; diff --git a/src/app/link_set/link-set.model.ts b/src/app/link_set/link-set.model.ts deleted file mode 100644 index f9761f0..0000000 --- a/src/app/link_set/link-set.model.ts +++ /dev/null @@ -1,195 +0,0 @@ -import {ModelType} from '@ui/index'; -import {LinkType} from '@ui/type'; -import {deleteConnection, testConnection} from '@shared/crud/crud.request'; -import {databaseTyle, getCnnectionName} from './select/select.service'; -import dialog from '@shared/service/dialog.service'; -import {saveConnection} from './link-set.service'; - -const className = 'fr.model.linkset'; -const Model: ModelType = { - context: ['tab', 'linkList', 'linkSelected', 'linkUpdate', 'connectionNameErr'], - actions: { - /** - * 左侧点击链接选中 - * @param name - */ - setLinkSelected(name: string) { - this.noSaveConfirm(() => { - this._setLinkSelected(name); - }); - }, - _setLinkSelected(name: string) { - this.model.linkList.forEach((item: LinkType) => { - item.isSelected = item.connectionName === name; - if (item.connectionName === name) { - this.model.linkSelected = { - ...item, - isSelected: false, - }; - } - }); - this.model.linkList = [...this.model.linkList]; - this.model.linkUpdate = this.model.linkSelected; - }, - onIconClick(title: string, id: string) { - switch (title) { - case '删除': - deleteConnection(id, () => { - this.model.linkList = [...this.model.linkList.filter((item: LinkType) => item.connectionId !== id)]; - this.model.linkSelected = {}; - this.model.linkUpdate = {}; - }); - break; - case '测试连接': - this._textLink(id); - break; - case '复制': - this.noSaveConfirm(() => { - this.copyLink(id); - }); - break; - default: - 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 connectionName = BI.find(this.model.linkList, (index: number, item: LinkType) => item.connectionId === id).connectionName; - const name = getCnnectionName(this.model.linkList, connectionName); - let data = {}; - this.model.linkList.forEach((item: LinkType) => { - if (item.connectionId === id) { - data = item; - } - }); - const newCopy = { - ...data, - isSelected: true, - connectionName:name, - connectionId: '', - }; - this.model.linkList = [ - newCopy, - ...this.model.linkList, - ]; - this.model.linkSelected = { - ...newCopy, - }; - this.model.linkUpdate = { - ...newCopy, - }; - }, - setLinkUpdate(value: any) { - this.model.linkUpdate = value; - }, - setEdit(type: boolean) { - this.model.linkSelected = { - ...this.model.linkSelected, - isSelected: type, - }; - this.model.linkUpdate = this.model.linkSelected; - }, - setCancel() { - const linkSelected: LinkType = this.model.linkSelected; - const linkList: LinkType[] = this.model.linkList; - if (linkSelected.connectionId) { - this.setEdit(false); - } else { - this.model.linkList = [ - ...linkList.filter(item => !!item.connectionId), - ]; - if (this.model.linkList.length > 0) { - this.model.linkList[0].isSelected = true; - this.model.linkSelected = { - ...this.model.linkList[0], - isSelected: false, - }; - } else { - this.model.linkSelected = {}; - } - this.model.linkUpdate = this.model.linkSelected; - } - }, - setNewLink(value: string) { - if (!databaseTyle.some(item => item.text === value) && !BI.Constants.getConstant(`dec.constant.database.conf.connect.form.${value.toLowerCase()}.edit`)) { - dialog.error('找不到该连接的配置信息'); - - return; - } - this.noSaveConfirm(() => { - this._setNewLink(value); - }); - }, - _setNewLink(value: string) { - const name = getCnnectionName(this.model.linkList, value); - let data = {}; - databaseTyle.forEach(item => { - if (item.text === value) { - data = item; - } - }); - this.model.linkList = [ - { - connectionName:name, - isSelected: true, - ...data, - text: value, - }, - ...this.model.linkList, - ]; - this.model.linkSelected = { - ...data, - connectionName:name, - isSelected: true, - text: value, - }; - this.model.linkUpdate = { - ...data, - connectionName:name, - text: value, - }; - }, - setConnectionNameErr(err: string) { - this.model.connectionNameErr = err; - }, - noSaveConfirm(cb: Function) { - if (this.model.linkSelected && this.model.linkSelected.isSelected) { - dialog.confirm('当前设置尚未保存，是否保存？', (isConfirm: boolean) => { - if (isConfirm) { - this.saveLink(); - } else { - this.setCancel(); - } - cb(); - }); - } else { - cb(); - } - }, - saveLink() { - const pluginData = this.model.linkUpdate.text ? BI.Constants.getConstant(`dec.constant.database.conf.connect.form.${this.model.linkUpdate.text.toLowerCase()}.value`) : {}; - const update = { - ...this.model.linkUpdate, - ...pluginData, - }; - saveConnection(update).then(() => { - this.setEdit(false); - }); - }, - }, -}; -BI.model(className, BI.inherit(Fix.Model, Model)); -export default className; diff --git a/src/app/link_set/more/more.link.component.ts b/src/app/link_set/more/more.link.component.ts deleted file mode 100644 index 3c0eac4..0000000 --- a/src/app/link_set/more/more.link.component.ts +++ /dev/null @@ -1,61 +0,0 @@ -import {WidgetType, Vertical, SearchEditor, Left, Vtape} from '@ui/index'; -import {databaseTyle} from '../select/select.service'; -import MoreLinkItem from './more.link.item.component'; -const className = 'fr.component.linkSet.morelink'; -let morkLinkItem: any = null; -const Widget: WidgetType = { - render() { - return { - type: Vtape, - cls: 'more-link', - items: [ - { - el:{ - type: Vertical, - items:[{ - type: SearchEditor, - width: 300, - watermark: '搜索', - }], - }, - height: 30, - }, - { - type: Left, - cls:'more-link-item', - ref(ref: any) { - morkLinkItem = ref; - }, - }, - ], - }; - }, - mounted() { - this._renderItems(); - }, - _renderItems(text = '') { - const databaseLink = databaseTyle.slice(12, 12 + 33); - const items: any[] = []; - const that = this; - databaseLink.forEach(item => { - items.push({ - type: MoreLinkItem, - 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); - }, - }, - ], - }); - }); - morkLinkItem.populate(BI.createItems(items)); - }, -}; -BI.shortcut(className, BI.inherit(BI.Widget, Widget)); -export default className; diff --git a/src/app/link_set/more/more.link.item.component.ts b/src/app/link_set/more/more.link.item.component.ts deleted file mode 100644 index 5e4a8ad..0000000 --- a/src/app/link_set/more/more.link.item.component.ts +++ /dev/null @@ -1,40 +0,0 @@ -import {WidgetType, Vertical, Img, Label, Layout} from '@ui/index'; -const className = 'fr.component.linkSet.morelink.item'; -const Widget: WidgetType = { - render() { - const {text, name, selected} = this.options; - - return { - type: Vertical, - cls:'link-item', - width: 120, - height: 117, - items:[ - { - type: Img, - width: 120, - height: 90, - src:`./img/${name}.jpg`, - }, { - type: Layout, - cls: 'selected', - invisible: !selected, - width:30, - height: 30, - }, { - type: Label, - cls:'text', - text, - }, - ], - }; - }, - mounted() { - const {text} = this.options; - this.element.on('click', () => { - this.fireEvent('EVENT_SELECT', text); - }); - }, -}; -BI.shortcut(className, BI.inherit(BI.Widget, Widget)); -export default className; diff --git a/src/app/link_set/right/nothing.component.ts b/src/app/link_set/right/nothing.component.ts deleted file mode 100644 index ef4d938..0000000 --- a/src/app/link_set/right/nothing.component.ts +++ /dev/null @@ -1,37 +0,0 @@ -import {WidgetType, CenterAdapt, Vertical, Layout, Label} from '@ui/index'; -const className = 'fr.component.right.nothing'; -const Widget: WidgetType = { - render() { - return { - type: CenterAdapt, - items: [{ - type: Vertical, - width: 260, - height: 180, - items:[ - { - type: Layout, - cls: 'data-connection-background', - width: 260, - height: 130, - }, - { - type:Label, - cls: 'bi-tips', - height: 20, - text:'请选择左侧数据连接或点击新建数据连接', - }, - { - type:Label, - cls: 'bi-tips', - height: 20, - text:'平台仅支持使用JDBC的数据连接的管理', - }, - ], - - }], - }; - }, -}; -BI.shortcut(className, BI.inherit(BI.Widget, Widget)); -export default className; diff --git a/src/app/link_set/right/right.component.ts b/src/app/link_set/right/right.component.ts deleted file mode 100644 index 060a7fd..0000000 --- a/src/app/link_set/right/right.component.ts +++ /dev/null @@ -1,39 +0,0 @@ -import {WidgetType, Vertical} from '@ui'; -import {LinkType} from '@ui/type'; -import Nothing from './nothing.component'; -import RightDetail from './right_detail/right.detail.component'; -import Model from '../link-set.model'; -let rightContent: any = null; -const className = 'fr.component.right'; -const Widget: WidgetType = { - _store() { - return BI.Models.getModel(Model); - }, - watch:{ - linkSelected(linkSelected: LinkType) { - rightContent.populate(BI.createItems([ - { - type: (linkSelected && linkSelected.connectionName) ? RightDetail : Nothing, - }, - ])); - }, - }, - render() { - return { - type:Vertical, - cls:'database-right', - ref(_ref: any) { - rightContent = _ref; - }, - }; - }, - mounted() { - rightContent.populate(BI.createItems([ - { - type: Nothing, - }, - ])); - }, -}; -BI.shortcut(className, BI.inherit(BI.Widget, Widget)); -export default className; diff --git a/src/app/link_set/right/right_detail/right.detail.component.ts b/src/app/link_set/right/right_detail/right.detail.component.ts deleted file mode 100644 index c801ea1..0000000 --- a/src/app/link_set/right/right_detail/right.detail.component.ts +++ /dev/null @@ -1,54 +0,0 @@ -import {WidgetType, Vertical} from '@ui/index'; -import Model from '../../link-set.model'; -import Title from '../right_title/right.title.component'; -import RightShow from '../right_show/right.show.component'; -import RightEdit from '../right_edit/right.edit.component'; -import RightEditMysql from '../right_edit/right.edit.mysql.component'; -import {LinkType} from '@ui/type'; -import pluginListConstant from '../../../app.constant'; -const className = 'fr.component.right.detail'; -let rightDetail: any = null; -const renderEdit = (linkSelected: LinkType): void => { - const plugins: string[] = BI.Constants.getConstant(pluginListConstant); - const isPlugin = BI.some(plugins, (index: number, item: string) => item === linkSelected.text); - let typeEdit = linkSelected.databaseType === 'mysql' ? RightEditMysql : RightEdit; - if (isPlugin) { - typeEdit = BI.Constants.getConstant(`dec.constant.database.conf.connect.form.${linkSelected.text.toLowerCase()}.edit`); - } - const showPage = !isPlugin ? RightShow : 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 ? typeEdit : showPage, - linkSelected, - }, - ])); -}; -const Widget: WidgetType = { - _store() { - return BI.Models.getModel(Model); - }, - watch:{ - linkSelected(linkSelected: LinkType) { - renderEdit(linkSelected); - }, - }, - render() { - return { - type: Vertical, - cls:'right-content', - ref(_ref: any) { - rightDetail = _ref; - }, - }; - }, - mounted() { - const linkSelected: LinkType = this.model.linkSelected; - renderEdit(linkSelected); - }, -}; -BI.shortcut(className, BI.inherit(BI.Widget, Widget)); -export default className; diff --git a/src/app/link_set/right/right_edit/right.edit.component.ts b/src/app/link_set/right/right_edit/right.edit.component.ts deleted file mode 100644 index 52dc0a8..0000000 --- a/src/app/link_set/right/right_edit/right.edit.component.ts +++ /dev/null @@ -1,278 +0,0 @@ -import {WidgetType, Vertical, MultiSelectItem, TextAreaEditor, Editor, Button, TextValueCombo} from '@ui/index'; -import {LinkType} from '@ui/type'; -import charset from './right.edit.constant'; -import Model from '../../link-set.model'; -import FormItem from '@shared/components/form.item.component'; -import Title from '@shared/components/title.component'; -import {getDrivers} from './right.edit.service'; -let ConnectionName: any = null; -const className = 'fr.component.right.edit'; -const Widget: WidgetType = { - _store() { - return BI.Models.getModel(Model); - }, - watch:{ - connectionNameErr(msg: string) { - if (msg) { - BI.Bubbles.show('singleBubble', msg, ConnectionName, { - level: 'error', - }); - } else { - BI.Bubbles.hide('singleBubble'); - } - }, - }, - render() { - const linkSelected: LinkType = this.model.linkSelected; - const that = this; - - return { - type: Vertical, - cls: 'right-show', - items: [ - { - type: FormItem, - text: '数据连接名', - hint: '*修改数据连接名会影响相关数据表和仪表板', - form:{ - type: Editor, - cls: 'bi-border', - width: 300, - value: linkSelected.connectionName, - ref(ref: any) { - ConnectionName = ref; - }, - listeners: [{ - eventName: BI.Editor.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - connectionName: this.getValue(), - }); - }, - }, { - eventName: BI.Editor.EVENT_FOCUS, - action() { - that.store.setConnectionNameErr(''); - }, - }], - }, - }, - { - type: FormItem, - text: '第一步', - height: 400, - form:{ - type: Vertical, - cls: 'right-form', - items:[ - { - type: FormItem, - text: '驱动器', - form:{ - type: TextValueCombo, - cls: 'bi-border', - width: 300, - text: linkSelected.driver, - items: getDrivers(linkSelected), - listeners: [{ - eventName: BI.TextValueCombo.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - driver: this.getValue()[0], - }); - }, - }], - }, - }, - { - type: FormItem, - text: 'URL', - form:{ - type: Editor, - cls: 'bi-border', - watermark:'请输入', - width: 300, - value: linkSelected.url, - listeners: [{ - eventName: BI.Editor.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - url: this.getValue(), - }); - }, - }], - }, - }, - { - type: FormItem, - text: '编码', - form:{ - type: TextValueCombo, - cls: 'bi-border', - width: 300, - text: linkSelected.originalCharsetName === '' ? '自动' : linkSelected.originalCharsetName, - items: BI.Constants.getConstant(charset), - listeners: [{ - eventName: BI.TextValueCombo.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - originalCharsetName: this.getValue()[0], - }); - }, - }], - }, - }, - { - type: FormItem, - text: '用户名', - form:{ - type: Editor, - cls: 'bi-border', - allowBlank:true, - watermark:'请输入', - width: 300, - value: linkSelected.user, - listeners: [{ - eventName: BI.Editor.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - user: this.getValue(), - }); - }, - }], - }, - }, - { - type: FormItem, - text: '密码', - form:{ - type: Editor, - cls: 'bi-border', - inputType:'password', - allowBlank:true, - watermark:'请输入', - width: 300, - value: linkSelected.password, - listeners: [{ - eventName: BI.Editor.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - password: this.getValue(), - }); - }, - }], - }, - }, - { - type: Title, - text: '连接池属性', - }, - { - type: FormItem, - text: 'SQL验证查询', - height: 100, - form:{ - type: TextAreaEditor, - cls: 'bi-border', - allowBlank:true, - watermark:'请输入', - width: 300, - height:100, - value: linkSelected.validationQuery, - listeners: [{ - eventName: BI.Editor.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - validationQuery: this.getValue(), - }); - }, - }], - }, - }, - { - type: FormItem, - text: '获取连接前校验', - form:{ - type: MultiSelectItem, - text: '是', - selected: linkSelected.testOnBorrow, - width: 60, - listeners: [{ - eventName: BI.Editor.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - testOnBorrow: this.isSelected(), - }); - }, - }], - }, - }, - { - type: FormItem, - text: '最大活动连接数', - form:{ - type: Editor, - cls: 'bi-border', - allowBlank:true, - watermark:'请输入', - width: 60, - value: linkSelected.maxActive, - errorText: '请输入有效的正整数', - validationChecker (v: string) { - if (/^\+?[1-9][0-9]*$/.test(v)) { - return true; - } - - return false; - }, - listeners: [{ - eventName: BI.Editor.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - maxActive: this.getValue(), - }); - }, - }], - }, - }, - ], - }, - }, - { - type: FormItem, - text: '第二步', - form: { - type: Button, - text: '测试连接', - level: 'ignore', - }, - }, - { - type: FormItem, - text: '第三步', - form: { - type: FormItem, - text: '模式', - form: { - type: Editor, - cls: 'bi-border', - width: 300, - disabled: true, - }, - }, - }, - ], - }; - }, -}; -BI.shortcut(className, BI.inherit(BI.Widget, Widget)); -export default className; diff --git a/src/app/link_set/right/right_edit/right.edit.constant.ts b/src/app/link_set/right/right_edit/right.edit.constant.ts deleted file mode 100644 index 28a5dfe..0000000 --- a/src/app/link_set/right/right_edit/right.edit.constant.ts +++ /dev/null @@ -1,41 +0,0 @@ -export const ConstantName = 'bi.constant.database.conf.charset.list'; -export const Constant = BI.constant(ConstantName, [ - { - text: '自动', - value: '', - }, - { - text: 'GBK', - value: 'GBK', - }, - { - text: 'BIG5', - value: 'BIG5', - }, - { - text: 'ISO-8859-1', - value: 'ISO-8859-1', - }, - { - text: 'UTF-8', - value: 'UTF-8', - }, - { - text: 'UTF-16', - value: 'UTF-16', - }, - { - text: 'EUC_JP', - value: 'EUC_JP', - }, - { - text: 'EUC_KR', - value: 'EUC_KR', - }, - { - text: 'CP850', - value: 'CP850', - }, -]); - -export default ConstantName; diff --git a/src/app/link_set/right/right_edit/right.edit.mysql.component.ts b/src/app/link_set/right/right_edit/right.edit.mysql.component.ts deleted file mode 100644 index 7fba51b..0000000 --- a/src/app/link_set/right/right_edit/right.edit.mysql.component.ts +++ /dev/null @@ -1,233 +0,0 @@ -import {WidgetType, Vertical, MultiSelectItem, TextAreaEditor, Editor, Button, TextValueCombo} from '@ui/index'; -import {LinkType} from '@ui/type'; -import charset from './right.edit.constant'; -import Model from '../../link-set.model'; -import FormItem from '@shared/components/form.item.component'; -import Title from '@shared/components/title.component'; -import {getDrivers} from './right.edit.service'; -const className = 'fr.component.right.edit.mysql'; -const Widget: WidgetType = { - _store() { - return BI.Models.getModel(Model); - }, - render() { - const linkSelected: LinkType = this.model.linkSelected; - const that = this; - - return { - type: Vertical, - cls: 'right-show', - items: [ - { - type: FormItem, - text: '数据连接名', - hint: '*修改数据连接名会影响相关数据表和仪表板', - form:{ - type: Editor, - cls: 'bi-border', - width: 300, - value: linkSelected.connectionName, - listeners: [{ - eventName: BI.Editor.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - connectionName: this.getValue(), - }); - }, - }], - }, - }, - { - type: FormItem, - text: '驱动器', - form:{ - type: TextValueCombo, - cls: 'bi-border', - width: 300, - text: linkSelected.driver, - items: getDrivers(linkSelected), - listeners: [{ - eventName: BI.TextValueCombo.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - driver: this.getValue()[0], - }); - }, - }], - }, - }, - { - type: FormItem, - text: 'URL', - form:{ - type: Editor, - cls: 'bi-border', - watermark:'请输入', - width: 300, - value: linkSelected.url, - listeners: [{ - eventName: BI.Editor.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - url: this.getValue(), - }); - }, - }], - }, - }, - { - type: FormItem, - text: '编码', - form:{ - type: TextValueCombo, - cls: 'bi-border', - width: 300, - text: linkSelected.originalCharsetName === '' ? '自动' : linkSelected.originalCharsetName, - items: BI.Constants.getConstant(charset), - listeners: [{ - eventName: BI.TextValueCombo.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - originalCharsetName: this.getValue()[0], - }); - }, - }], - }, - }, - { - type: FormItem, - text: '用户名', - form:{ - type: Editor, - cls: 'bi-border', - allowBlank:true, - watermark:'请输入', - width: 300, - value: linkSelected.user, - listeners: [{ - eventName: BI.Editor.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - user: this.getValue(), - }); - }, - }], - }, - }, - { - type: FormItem, - text: '密码', - form:{ - type: Editor, - cls: 'bi-border', - inputType:'password', - allowBlank:true, - watermark:'请输入', - width: 300, - value: linkSelected.password, - listeners: [{ - eventName: BI.Editor.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - password: this.getValue(), - }); - }, - }], - }, - }, - { - type: Title, - text: '连接池属性', - }, - { - type: FormItem, - text: 'SQL验证查询', - height: 100, - form:{ - type: TextAreaEditor, - cls: 'bi-border', - allowBlank:true, - watermark:'请输入', - width: 300, - height:100, - value: linkSelected.validationQuery, - listeners: [{ - eventName: BI.Editor.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - validationQuery: this.getValue(), - }); - }, - }], - }, - }, - { - type: FormItem, - text: '获取连接前校验', - form:{ - type: MultiSelectItem, - text: '是', - selected: linkSelected.testOnBorrow, - width: 60, - listeners: [{ - eventName: BI.Editor.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - testOnBorrow: this.isSelected(), - }); - }, - }], - }, - }, - { - type: FormItem, - text: '最大活动连接数', - form:{ - type: Editor, - cls: 'bi-border', - allowBlank:true, - watermark:'请输入', - width: 60, - value: linkSelected.maxActive, - errorText: '请输入有效的正整数', - validationChecker (v: string) { - if (/^\+?[1-9][0-9]*$/.test(v)) { - return true; - } - - return false; - }, - listeners: [{ - eventName: BI.Editor.EVENT_CHANGE, - action() { - that.store.setLinkUpdate({ - ...that.model.linkUpdate, - maxActive: this.getValue(), - }); - }, - }], - }, - }, - { - type: FormItem, - text: '测试连接', - form: { - type: Button, - text: '测试连接', - level: 'ignore', - }, - }, - ], - }; - }, -}; -BI.shortcut(className, BI.inherit(BI.Widget, Widget)); -export default className; diff --git a/src/app/link_set/right/right_show/right.show.component.ts b/src/app/link_set/right/right_show/right.show.component.ts deleted file mode 100644 index fa6b668..0000000 --- a/src/app/link_set/right/right_show/right.show.component.ts +++ /dev/null @@ -1,72 +0,0 @@ -import {WidgetType, Vertical} from '@ui/index'; -import RightShowModel from '../../link-set.model'; -import BothSide from '@shared/components/both.side.component'; -import Title from '@shared/components/title.component'; -import {LinkType} from '@ui/type'; -const className = 'fr.component.right.show'; -const Widget: WidgetType = { - _store() { - return BI.Models.getModel(RightShowModel); - }, - render() { - const linkSelected: LinkType = this.model.linkSelected; - - return { - type: Vertical, - cls: 'right-show', - items: [ - { - type: BothSide, - leftText: '数据连接名', - rightText: linkSelected.connectionName, - }, - { - type: BothSide, - leftText: '驱动器', - rightText: linkSelected.driver, - }, - { - type: BothSide, - leftText: 'URL', - rightText: linkSelected.url, - }, - { - type: BothSide, - leftText: '编码', - rightText: linkSelected.originalCharsetName === '' ? '自动' : linkSelected.originalCharsetName, - }, - { - type: BothSide, - leftText: '用户名', - rightText: linkSelected.user, - }, - { - type: BothSide, - leftText: '密码', - rightText: linkSelected.password, - }, - { - type: Title, - text: '连接池属性', - }, - { - type: BothSide, - leftText: 'SQL验证查询', - rightText: linkSelected.validationQuery, - }, - { - type: BothSide, - leftText: '获取连接前校验', - rightText: linkSelected.testOnBorrow ? '是' : '否', - }, - { - type: BothSide, - leftText: '最大连接数量', - rightText: linkSelected.maxActive, - }, - ], - }; - }, -}; -BI.shortcut(className, BI.inherit(BI.Widget, Widget)); -export default className; diff --git a/src/app/link_set/right/right_title/right.title.component.ts b/src/app/link_set/right/right_title/right.title.component.ts deleted file mode 100644 index 308ce12..0000000 --- a/src/app/link_set/right/right_title/right.title.component.ts +++ /dev/null @@ -1,64 +0,0 @@ -import {WidgetType, Left, Label, Button} from '@ui/index'; -import RightTitleModel from '../../link-set.model'; -import {LinkType} from '@ui/type'; -import {saveConnection} from '../../link-set.service'; -const className = 'fr.component.right.title'; -const Widget: WidgetType = { - _store() { - return BI.Models.getModel(RightTitleModel); - }, - render() { - const linkSelected: LinkType = this.model.linkSelected; - const linkList: LinkType[] = this.model.linkList; - const that = this; - const {isEdit} = this.options; - - return { - type: Left, - height: 40, - cls: 'right-title', - items: [ - { - type: Label, - cls: 'right-title-text', - text: `数据连接(${linkSelected.text ? linkSelected.text : '默认'})`, - }, - { - type: Button, - cls:'right-title-button', - invisible: isEdit, - text: '编辑', - handler() { - that.store.setEdit(true); - }, - }, - { - type: Button, - cls:'right-title-button', - invisible: !isEdit, - text: '保存', - handler() { - const result = BI.find(linkList, (idx: number, value: LinkType) => that.model.linkUpdate.connectionName === value.connectionName && value.connectionId !== that.model.linkUpdate.connectionId); - if (result) { - that.store.setConnectionNameErr('数据连接名已存在'); - } else { - that.store.saveLink(); - } - }, - }, - { - type: Button, - cls:'right-title-button', - invisible: !isEdit, - level: 'ignore', - text: '取消', - handler() { - that.store.setCancel(); - }, - }, - ], - }; - }, -}; -BI.shortcut(className, BI.inherit(BI.Widget, Widget)); -export default className; diff --git a/src/app/link_status/left/left.component.ts b/src/app/link_status/left/left.component.ts deleted file mode 100644 index 4068b29..0000000 --- a/src/app/link_status/left/left.component.ts +++ /dev/null @@ -1,31 +0,0 @@ -import {WidgetType, Vertical} from '@ui'; -import Model from './left.model'; -import {LinkType} from '@ui/type'; -import {getLinks} from './left.service'; -const className = 'fr.component.linkStatus.left'; -let leftContent: any = null; -const Widget: WidgetType = { - _store() { - return BI.Models.getModel(Model); - }, - watch:{ - linkList(linkList: LinkType[]) { - const title = linkList.length > 0 ? linkList[0].connectionName : ''; - this.store.setStatusSelected(title); - }, - statusSelected(title: string) { - const linkList = this.model.linkList; - leftContent.populate(BI.createItems(getLinks(linkList, title))); - }, - }, - render() { - return { - type: Vertical, - ref(_ref: any) { - leftContent = _ref; - }, - }; - }, -}; -BI.shortcut(className, BI.inherit(BI.Widget, Widget)); -export default className; diff --git a/src/app/link_status/left/left.item.component.ts b/src/app/link_status/left/left.item.component.ts deleted file mode 100644 index 59b1150..0000000 --- a/src/app/link_status/left/left.item.component.ts +++ /dev/null @@ -1,39 +0,0 @@ -import {WidgetType, Left, Label} from '@ui'; -import Model from './left.model'; -const className = 'fr.component.linkStatus.left.item'; -const Widget: WidgetType = { - props: { - title:'', - id:'', - creator: '', - }, - _store() { - return BI.Models.getModel(Model); - }, - render() { - const {title, extraCls, creator, text, id} = this.options; - - return { - type: Left, - cls: 'left-item', - extraCls, - items: [ - { - type: Label, - cls:'link-title', - textAlign: 'left', - text: title, - title, - }, - ], - }; - }, - mounted() { - const {title} = this.options; - this.element.on('click', () => { - this.store.setStatusSelected(title); - }); - }, -}; -BI.shortcut(className, BI.inherit(BI.Widget, Widget)); -export default className; diff --git a/src/app/link_status/left/left.service.ts b/src/app/link_status/left/left.service.ts deleted file mode 100644 index 7df380c..0000000 --- a/src/app/link_status/left/left.service.ts +++ /dev/null @@ -1,18 +0,0 @@ -import {LinkType} from '@ui/type'; -import LeftItem from './left.item.component'; - -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 : '默认', - }); - }); - - return links; -}; diff --git a/src/app/link_status/left/left.model.ts b/src/app/status/left/left.model.ts similarity index 82% rename from src/app/link_status/left/left.model.ts rename to src/app/status/left/left.model.ts index 37419a9..fb06170 100644 --- a/src/app/link_status/left/left.model.ts +++ b/src/app/status/left/left.model.ts @@ -1,10 +1,10 @@ import {ModelType} from '@ui'; -const className = 'fr.model.linkstatus.left'; +const className = 'dec.dcm.model.linkstatus.left'; const Model: ModelType = { context: ['tab', 'linkList', 'statusSelected'], state () { return { - selected:'', + selected: '', }; }, actions: { diff --git a/src/app/status/left/left.ts b/src/app/status/left/left.ts new file mode 100644 index 0000000..d16451d --- /dev/null +++ b/src/app/status/left/left.ts @@ -0,0 +1,44 @@ +import {WidgetType, ListView} from '@ui'; +import Model from './left.model'; +import {LinkType} from '@ui/type'; +import LeftItem from './left_item'; + +const className = 'dec.dcm.component.linkStatus.left'; +const Widget: WidgetType = { + _store() { + return BI.Models.getModel(Model); + }, + watch: { + linkList(linkList: LinkType[]) { + const title = linkList.length > 0 ? linkList[0].connectionName : ''; + this.store.setStatusSelected(title); + }, + statusSelected(title: string) { + const linkList = this.model.linkList; + this.leftContent.populate(BI.createItems(this._renderItems(linkList, title))); + }, + }, + render() { + return { + type: ListView, + ref: _ref => { + this.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, + selected: item.connectionName === selectTitle, + 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; diff --git a/src/app/status/left/left_item.ts b/src/app/status/left/left_item.ts new file mode 100644 index 0000000..0a4ee89 --- /dev/null +++ b/src/app/status/left/left_item.ts @@ -0,0 +1,39 @@ +import {WidgetType, TextButton, VerticalAdapt} from '@ui'; +import Model from './left.model'; +const className = 'dec.dcm.component.linkStatus.left.item'; +const Widget: WidgetType = { + props: { + title: '', + id: '', + creator: '', + baseCls: 'bi-list-item-active', + }, + _store() { + return BI.Models.getModel(Model); + }, + render() { + const {title} = this.options; + + return { + type: VerticalAdapt, + cls: 'bi-list-item-active', + height: 30, + items: [ + { + type: TextButton, + cls: 'link-title', + lgap: 10, + textAlign: 'left', + text: title, + title, + }, + ], + }; + }, + doClick() { + const {title} = this.options; + this.store.setStatusSelected(title); + }, +}; +BI.shortcut(className, BI.inherit(BI.BasicButton, Widget)); +export default className; diff --git a/src/app/link_status/link_status.model.ts b/src/app/status/link_status.model.ts similarity index 80% rename from src/app/link_status/link_status.model.ts rename to src/app/status/link_status.model.ts index ecdda3c..c4e7467 100644 --- a/src/app/link_status/link_status.model.ts +++ b/src/app/status/link_status.model.ts @@ -1,5 +1,5 @@ import {ModelType} from '@ui'; -const className = 'fr.model.linkstatus'; +const className = 'dec.dcm.model.linkstatus'; const Model: ModelType = { context: ['tab', 'linkList'], actions: { diff --git a/src/app/link_status/link_status.component.ts b/src/app/status/link_status.ts similarity index 50% rename from src/app/link_status/link_status.component.ts rename to src/app/status/link_status.ts index 196174d..bf50a07 100644 --- a/src/app/link_status/link_status.component.ts +++ b/src/app/status/link_status.ts @@ -1,36 +1,45 @@ -import {WidgetType, Htape, Vtape, Left, Label} from '@ui'; +import {WidgetType, Htape, Vtape, Label, VerticalAdapt} from '@ui'; import linkStatusModel from './link_status.model'; -import LeftList from './left/left.component'; -import Right from './right/right.component'; -const className = 'fr.linkstatus'; +import LeftList from './left/left'; +import Right from './right/right'; +import {TAB_LINK_POOL} from '@private/constants'; +const className = 'dec.dcm.linkstatus'; const Widget: WidgetType = { + props: { + baseCls: 'bi-card', + }, _store() { return BI.Models.getModel(linkStatusModel); }, - watch:{ + watch: { tab(tab: string) { - this.setVisible(tab === '连接池状态'); + this.linkStatus.setVisible(tab === TAB_LINK_POOL); }, }, render() { return { type: Htape, - cls: 'linkStatus', + invisible: true, + ref: _ref => { + this.linkStatus = _ref; + }, items: [{ el: { type: Vtape, - cls: 'database-left', + cls: 'dcm-link-left', items: [ { el: { - type: Left, - cls:'select-group', - items:[ + type: VerticalAdapt, + cls: 'bi-border-bottom', + items: [ { type: Label, - cls:'status-title', - text: '数据连接', + cls: 'bi-font-bold', + hgap: 6, + vgap: 6, + text: BI.i18nText('Dec-Dcm_Data_Connections'), }, ], }, @@ -44,12 +53,10 @@ const Widget: WidgetType = { width: 280, }, { type: Right, + cls: 'bi-border-left', }], }; }, - mounted() { - this.setVisible(false); - }, }; BI.shortcut(className, BI.inherit(BI.Widget, Widget)); diff --git a/src/app/link_status/right/right.model.ts b/src/app/status/right/right.model.ts similarity index 76% rename from src/app/link_status/right/right.model.ts rename to src/app/status/right/right.model.ts index aa49c71..d5f06a8 100644 --- a/src/app/link_status/right/right.model.ts +++ b/src/app/status/right/right.model.ts @@ -1,10 +1,10 @@ import {ModelType} from '@ui'; -const className = 'fr.model.linkstatus.right'; +const className = 'dec.dcm.model.linkstatus.right'; const Model: ModelType = { context: ['linkList', 'statusSelected'], state () { return { - selected:'', + selected: '', }; }, actions: { diff --git a/src/app/link_status/right/right.component.ts b/src/app/status/right/right.ts similarity index 56% rename from src/app/link_status/right/right.component.ts rename to src/app/status/right/right.ts index 35c4122..71c1cd9 100644 --- a/src/app/link_status/right/right.component.ts +++ b/src/app/status/right/right.ts @@ -1,65 +1,68 @@ -import {WidgetType, Vertical, Left, Label} from '@ui/index'; +import {WidgetType, Label, ListView, VerticalAdapt, Vtape} from '@ui/index'; import Model from './right.model'; import {info} from '@shared/crud/crud.request'; -import RightCard from './right.card.component'; +import RightCard from './right_card'; import {InfoType} from './right.typings'; import {LinkType} from '@ui/type'; import pluginListConstant from '../../app.constant'; -const className = 'fr.component.linkStatus.right'; -let Title: any = null; -let Group: any = null; +const className = 'dcm-link-form'; const Widget: WidgetType = { + props: { + baseCls: 'dec-webui-dcm-title bi-card bi-border-bottom', + }, _store() { return BI.Models.getModel(Model); }, - watch:{ + watch: { statusSelected(title: string) { const link = BI.find(this.model.linkList, (index: number, item: LinkType) => item.connectionName === title); const plugins: string[] = BI.Constants.getConstant(pluginListConstant); const isPlugin = link.text && BI.some(plugins, (index: number, item: string) => item === link.text); const Pool = isPlugin ? BI.Constants.getConstant(`dec.constant.database.conf.connect.form.${link.text.toLowerCase()}.pool`) : RightCard; info(name, (res: InfoType) => { - Group.populate(BI.createItems([{ + this.statusGroup.populate(BI.createItems([{ type: Pool, ...res, }])); }); - Title.setText(`数据连接(${title})`); + this.statusTitle.setText(`${BI.i18nText('Dec-Dcm_Data_Connections')}(${title})`); }, }, render() { return { - type:Vertical, - cls:'database-right', - items:[ + type: Vtape, + items: [ { - type: Left, - height: 40, - cls: 'right-status-title', - items:[ - { - type: Label, - text:'数据连接', + el: { + type: VerticalAdapt, + cls: 'bi-border-bottom', + items: [ + { + type: Label, + cls: 'bi-font-bold', + lgap: 10, + text: BI.i18nText('Dec-Dcm_Data_Connections'), + }, + ], + ref: _ref => { + this.statusTitle = _ref; }, - ], - ref(ref: any) { - Title = ref; }, + height: 40, }, { - type: Vertical, + type: ListView, cls: 'right-status-body', - ref(ref: any) { - Group = ref; + vgap: 10, + hgap: 10, + ref: _ref => { + this.statusGroup = _ref; }, }, ], }; }, - mounted() { - - }, }; BI.shortcut(className, BI.inherit(BI.Widget, Widget)); export default className; diff --git a/src/app/link_status/right/right.typings.d.ts b/src/app/status/right/right.typings.d.ts similarity index 100% rename from src/app/link_status/right/right.typings.d.ts rename to src/app/status/right/right.typings.d.ts diff --git a/src/app/status/right/right_card.less b/src/app/status/right/right_card.less new file mode 100644 index 0000000..6b121b9 --- /dev/null +++ b/src/app/status/right/right_card.less @@ -0,0 +1,9 @@ +@import '../../../less/index.less'; +.dec-webui-dcm-status-right-card{ + .card-font-success{ + font-size: @font-size-30; + } + .card-font-heighlight{ + font-size: @font-size-30; + } +} \ No newline at end of file diff --git a/src/app/link_status/right/right.card.component.ts b/src/app/status/right/right_card.ts similarity index 52% rename from src/app/link_status/right/right.card.component.ts rename to src/app/status/right/right_card.ts index 6249ced..3894c95 100644 --- a/src/app/link_status/right/right.card.component.ts +++ b/src/app/status/right/right_card.ts @@ -1,88 +1,86 @@ -import {WidgetType, Left, Label, Vertical} from '@ui/index'; -const className = 'fr.component.linkStatus.right.card'; +import './right_card.less'; +import {WidgetType, Left, Label, Vertical, FloatCenter, CenterAdapt, VerticalAdapt} from '@ui/index'; +const className = 'dec.dcm.component.linkStatus.right.card'; const Widget: WidgetType = { + props: { + baseCls: 'dec-webui-dcm-status-right-card', + }, render() { const {maxActive, maxIdle, numActive, numIdle} = this.options; return { - type: Left, + type: FloatCenter, + height: 150, + hgap: 20, items: [ { - type: Left, - cls: 'right-status-item', + type: Vertical, + cls: 'bi-background', items: [ { - type: Vertical, - cls:'right-status-board', + type: CenterAdapt, + cls: 'right-status-board-item', + tgap: 40, items: [ { - type: Vertical, - cls:'right-status-board-item', + type: VerticalAdapt, items: [ { type: Label, - cls: 'right-status-text', - extraCls: 'card-font1', + cls: 'bi-high-light card-font-success', text: numActive, }, { type: Label, - cls: 'right-status-text', text: '/', }, { type: Label, - cls: 'right-status-text', text: maxActive, }, ], }, - { - type: Label, - height: 20, - text: '活动连接数', - }, ], }, + { + type: Label, + text: BI.i18nText('Dec-Dcm_Active_Connections_Number'), + }, ], }, { - type: Left, - cls: 'right-status-right', + type: Vertical, + cls: 'bi-background', items: [ { - type: Vertical, - cls:'right-status-board', + type: CenterAdapt, + tgap: 40, + cls: 'right-status-board-item', items: [ { - type: Vertical, - cls:'right-status-board-item', + type: VerticalAdapt, items: [ { type: Label, - cls: 'right-status-text', - extraCls: 'card-font2', + cls: 'bi-high-light card-font-heighlight', text: numIdle, }, { type: Label, - cls: 'right-status-text', text: '/', }, { type: Label, - cls: 'right-status-text', text: maxIdle, }, ], }, - { - type: Label, - height: 20, - text: '空闲连接数', - }, ], }, + { + type: Label, + text: BI.i18nText('Dec-Dcm_Leisure_Connections_Number'), + }, ], }, ], diff --git a/src/app/title/title.component.ts b/src/app/title/title.component.ts deleted file mode 100644 index 3aaa127..0000000 --- a/src/app/title/title.component.ts +++ /dev/null @@ -1,40 +0,0 @@ -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 = ['数据连接管理', '连接池状态']; -const className = 'fr.title'; -const Widget: WidgetType = { - render() { - return { - type: Left, - cls: 'title', - items: [ - ...BI.map(tabs, (index: number, text: string) => { - return { - type: TitleItem, - text, - }; - }), - { - type:IconButton, - cls:'close-button', - handler() { - closeWindow(); - }, - invisible: true, - ref: _ref => { - this.CloseButton = _ref; - }, - }, - ], - }; - }, - mounted() { - if (isDesigner()) { - this.CloseButton.setVisible(true); - } - }, -}; -BI.shortcut(className, BI.inherit(BI.Widget, Widget)); - -export default className; diff --git a/src/app/title/title.less b/src/app/title/title.less new file mode 100644 index 0000000..83f12f1 --- /dev/null +++ b/src/app/title/title.less @@ -0,0 +1,8 @@ +@import '../../less/index.less'; +.dec-webui-dcm-title{ + .title-item-selected{ + color: @background-color-highlight; + border-bottom-color:@border-color-highlight; + border-bottom-width: 2px; + } +} \ No newline at end of file diff --git a/src/app/title/title_item/title_item.model.ts b/src/app/title/title.model.ts similarity index 81% rename from src/app/title/title_item/title_item.model.ts rename to src/app/title/title.model.ts index f8d1923..97efd09 100644 --- a/src/app/title/title_item/title_item.model.ts +++ b/src/app/title/title.model.ts @@ -1,4 +1,4 @@ -const className = 'fr.model.title.item'; +const className = 'dec.dcm.model.title.item'; const Model = BI.inherit(Fix.Model, { context: ['tab'], actions: { diff --git a/src/app/title/title.ts b/src/app/title/title.ts new file mode 100644 index 0000000..1a31ea0 --- /dev/null +++ b/src/app/title/title.ts @@ -0,0 +1,61 @@ +import './title.less'; +import {WidgetType, IconButton, LeftRightVerticalAdapt, LinearSegment} from '@ui/index'; +import Model from './title.model'; +import {isDesigner, closeWindow} from '@shared/crud/crud.request'; +import {TAB_LINK_SET, TAB_LINK_POOL} from '@private/constants'; +const className = 'dec.dcm.title'; +const Widget: WidgetType = { + props: { + baseCls: 'dec-webui-dcm-title bi-card bi-border-bottom', + }, + _store() { + return BI.Models.getModel(Model); + }, + render() { + const showCloseButton = isDesigner(); + const that = this; + + return { + type: LeftRightVerticalAdapt, + items: { + left: [ + { + type: LinearSegment, + cls: 'bi-card', + height: 40, + width: 200, + items: [{ + text: BI.i18nText('Dec-Dcm_Connection_Management'), + value: TAB_LINK_SET, + selected: true, + }, { + text: BI.i18nText('Dec-Dcm_Pool_Connection_Management'), + value: TAB_LINK_POOL, + }], + listeners: [{ + eventName: 'EVENT_CHANGE', + action () { + that.store.setTab(this.getValue()[0]); + }, + }], + }, + ], + right: [ + showCloseButton ? { + type: IconButton, + cls: 'close-ha-font', + width: 30, + height: 30, + rgap: 10, + handler() { + closeWindow(); + }, + } : null, + ], + }, + }; + }, +}; +BI.shortcut(className, BI.inherit(BI.Widget, Widget)); + +export default className; diff --git a/src/app/title/title_item/title_item.component.ts b/src/app/title/title_item/title_item.component.ts deleted file mode 100644 index 7a3adef..0000000 --- a/src/app/title/title_item/title_item.component.ts +++ /dev/null @@ -1,37 +0,0 @@ -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, { - props: { - text:'', - }, - _store() { - return BI.Models.getModel(tableItemModel); - }, - watch:{ - tab(tab: string) { - const {text} = this.options; - this.element.css(getSelectStyle(text, tab)); - }, - }, - render() { - const {text} = this.options; - - return { - type: Label, - cls: 'title-item', - text, - }; - }, - mounted() { - const {text} = this.options; - this.element.css(getSelectStyle('数据连接管理', text)); - this.element.on('click', () => { - this.store.setTab(text); - }); - }, -}); -BI.shortcut(className, Widget); - -export default className; diff --git a/src/app/title/title_item/title_item.service.ts b/src/app/title/title_item/title_item.service.ts deleted file mode 100644 index 2bb4109..0000000 --- a/src/app/title/title_item/title_item.service.ts +++ /dev/null @@ -1,13 +0,0 @@ -export function getSelectStyle(status: string, nowStatus: string): any { - if (status === nowStatus) { - return { - color: '#3685f2', - 'border-bottom': 'solid 2px #3685f2', - }; - } - - return { - color: '#3d4d66', - 'border-bottom': 'none', - }; -} diff --git a/src/demo/plugin.redis.edit.ts b/src/demo/plugin.redis.edit.ts index 49a8f6b..8824963 100644 --- a/src/demo/plugin.redis.edit.ts +++ b/src/demo/plugin.redis.edit.ts @@ -1,84 +1,78 @@ import './style.scss'; +import {TextEditor, Vertical, Left, Label} from '@ui/index'; const RedisConstantName = 'dec.constant.database.conf.connect.form.redis.value'; const form = { - url:'192.168.1.22', + url: '192.168.1.22', port: 6379, password: '123456', }; -const classNameEdit = 'fr.plugin.redis.edit'; +const classNameEdit = 'dec.dcm.plugin.redis.edit'; const Widget = BI.inherit(BI.Widget, { render() { return { - type: 'bi.vertical', - cls:'bi-plugin-redis', - bgap:10, + type: Vertical, + cls: 'bi-plugin-redis', + bgap: 10, items: [ { - type: 'bi.left', + type: Left, height: 30, items: [ { - type: 'bi.label', - text: '数据库地址：', + type: Label, + text: BI.i18nText('Dec-Dcm_Connection_Form_Database_Addr'), height: 24, width: 115, textAlign: 'left', }, { - type: 'bi.editor', - cls: 'bi-border', - watermark: '数据库地址', - value:form.url, + type: TextEditor, + watermark: BI.i18nText('Dec-Dcm_Connection_Form_Database_Addr'), + value: form.url, allowBlank: true, width: 300, height: 24, }], }, { - type: 'bi.left', + type: Left, height: 30, items: [ { - type: 'bi.label', - text: '端口：', + type: Label, + text: BI.i18nText('Dec-Dcm_Connection_Form_Database_Port'), height: 24, width: 115, textAlign: 'left', }, { - type: 'bi.editor', - cls: 'bi-border', - watermark: '端口', + type: TextEditor, + watermark: BI.i18nText('Dec-Dcm_Connection_Form_Database_Port'), allowBlank: true, width: 300, height: 24, value: form.port, - errorText: '请输入有效的正整数', + errorText: BI.i18nText('Dec-Dcm_Connection_Form_Place_Input-Number'), validationChecker (v: string) { - if (/^\+?[1-9][0-9]*$/.test(v)) { - return true; - } - - return false; + return /^\+?[1-9][0-9]*$/.test(v); }, }], }, { - type: 'bi.left', + type: Left, height: 30, items: [ { - type: 'bi.label', - text: '密码：', + type: Label, + text: BI.i18nText('Dec-Dcm_Connection_Form_Password'), height: 24, width: 115, textAlign: 'left', }, { - type: 'bi.editor', - cls: 'bi-border', - inputType:'password', + type: TextEditor, + inputType: 'password', value: form.password, allowBlank: true, width: 300, diff --git a/src/demo/plugin.redis.preview.ts b/src/demo/plugin.redis.preview.ts index 7082bf3..b90b318 100644 --- a/src/demo/plugin.redis.preview.ts +++ b/src/demo/plugin.redis.preview.ts @@ -1,4 +1,4 @@ -const classNamePreview = 'fr.plugin.redis.preview'; +const classNamePreview = 'dec.dcm.plugin.redis.preview'; const RedisConstantName = 'dec.constant.database.conf.connect.form.redis.value'; const form = BI.Constants.getConstant(RedisConstantName); @@ -6,8 +6,8 @@ const Widget = BI.inherit(BI.Widget, { render() { return { type: 'bi.vertical', - cls:'bi-plugin-redis', - bgap:10, + cls: 'bi-plugin-redis', + bgap: 10, items: [ { type: 'bi.left', @@ -15,14 +15,14 @@ const Widget = BI.inherit(BI.Widget, { items: [ { type: 'bi.label', - text: '数据库地址：', + text: BI.i18nText('Dec-Dcm_Connection_Form_Database_Addr'), height: 24, width: 115, textAlign: 'left', }, { type: 'bi.label', - text:form.url, + text: form.url, height: 24, }], }, @@ -32,14 +32,14 @@ const Widget = BI.inherit(BI.Widget, { items: [ { type: 'bi.label', - text: '端口：', + text: BI.i18nText('Dec-Dcm_Connection_Form_Database_Port'), height: 24, width: 115, textAlign: 'left', }, { type: 'bi.label', - text:form.port, + text: form.port, height: 24, }], }, @@ -49,14 +49,14 @@ const Widget = BI.inherit(BI.Widget, { items: [ { type: 'bi.label', - text: '密码：', + text: BI.i18nText('Dec-Dcm_Connection_Form_Password'), height: 24, width: 115, textAlign: 'left', }, { type: 'bi.label', - text:'********', + text: '********', height: 24, }], }, diff --git a/src/demo/plugin.tedis.pool.ts b/src/demo/plugin.tedis.pool.ts index 4dc1c0d..8ce7df5 100644 --- a/src/demo/plugin.tedis.pool.ts +++ b/src/demo/plugin.tedis.pool.ts @@ -1,4 +1,4 @@ -const classNamePool = 'fr.plugin.redis.pool'; +const classNamePool = 'dec.dcm.plugin.redis.pool'; const WidgetPool = BI.inherit(BI.Widget, { render() { @@ -13,16 +13,15 @@ const WidgetPool = BI.inherit(BI.Widget, { items: [ { type: 'bi.vertical', - cls:'right-status-board', + cls: 'right-status-board', items: [ { type: 'bi.vertical', - cls:'right-status-board-item', + cls: 'right-status-board-item', items: [ { type: 'bi.label', cls: 'right-status-text', - extraCls: 'card-font1', text: numActive, }, { @@ -39,7 +38,8 @@ const WidgetPool = BI.inherit(BI.Widget, { }, { type: 'bi.label', - text: 'Redis连接数', + height: 20, + text: BI.i18nText('Dec-Dcm_Active_Connections_Number'), }, ], }, diff --git a/src/index.html b/src/index.html index c4b8ed2..f0a076b 100644 --- a/src/index.html +++ b/src/index.html @@ -5,6 +5,8 @@ 数据库连接设置 + + diff --git a/src/index.ts b/src/index.ts index 7a5ad89..ceb3a40 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,7 +1,10 @@ +import i18n from '../private/i18n'; BI.DOM.ready(() => { - const app = require('./app/app.component').default; + const app = require('./app/app').default; + // TODO: 先采用这种方式方便前端调试 + BI.addI18n(i18n); BI.createWidget({ - type:app, + type: app, element: 'body', }); }); diff --git a/src/less/index.less b/src/less/index.less new file mode 100644 index 0000000..9d67e74 --- /dev/null +++ b/src/less/index.less @@ -0,0 +1,4 @@ +@import "lib/background"; +@import "lib/color"; +@import "resource/background"; +@import "resource/font"; \ No newline at end of file diff --git a/src/less/lib/background.less b/src/less/lib/background.less new file mode 100644 index 0000000..bff78bf --- /dev/null +++ b/src/less/lib/background.less @@ -0,0 +1,6 @@ +@background-resources: "resources.png"; +@background-warning: "warning.png"; +@background-database-selected: "database-selected.png"; +@background-loading-gif: "loading.gif"; +@background-success: "success.png"; +@background-error: "error.png"; \ No newline at end of file diff --git a/src/less/lib/color.less b/src/less/lib/color.less new file mode 100644 index 0000000..ca1c3a1 --- /dev/null +++ b/src/less/lib/color.less @@ -0,0 +1,2 @@ +@import "../../../node_modules/fineui/src/less/lib/colors"; +@background-color-blue-transparent: @color-bi-blue-5; \ No newline at end of file diff --git a/src/less/lib/font.less b/src/less/lib/font.less new file mode 100644 index 0000000..751359f --- /dev/null +++ b/src/less/lib/font.less @@ -0,0 +1,4 @@ +@font-link: "e759"; +@font-link-test: "e763"; +@font-link-info: "e63c"; +@font-link-delete: "e6c4"; \ No newline at end of file diff --git a/src/less/resource/background.less b/src/less/resource/background.less new file mode 100644 index 0000000..ffec451 --- /dev/null +++ b/src/less/resource/background.less @@ -0,0 +1,23 @@ +@import "../lib/background"; +@import "../var"; + +.data-connection-background { + .image2xPath(@background-resources) +} + +.dcm-comfirm-icon{ + .image2xPath(@background-warning) +} +.dcm-link-more-selected{ + .image2xPath(@background-database-selected) +} + +.dcm-loading-icon{ + .image2xPath(@background-loading-gif) +} +.dcm-success-icon{ + .image2xPath(@background-success) +} +.dcm-error-icon{ + .image2xPath(@background-error) +} \ No newline at end of file diff --git a/src/less/resource/font.less b/src/less/resource/font.less new file mode 100644 index 0000000..9605c6f --- /dev/null +++ b/src/less/resource/font.less @@ -0,0 +1,7 @@ +@import "../../../node_modules/fineui/src/less/image.less"; +@import "../lib/font.less"; + +.font(dcm-link-font, @font-link); +.font(dcm-info-font, @font-link-info); +.font(dcm-test-font, @font-link-test); +.font(dcm-delete-font, @font-link-delete); \ No newline at end of file diff --git a/src/less/var.less b/src/less/var.less new file mode 100644 index 0000000..a324209 --- /dev/null +++ b/src/less/var.less @@ -0,0 +1,4 @@ +@import "../../node_modules/fineui/src/less/var"; +@import '../../node_modules/fineui/src/less/visual.less'; +@imageUrl: '/img/'; +@image2xUrl: '/img/'; \ No newline at end of file diff --git a/src/shared/components/both.side.component.ts b/src/shared/components/both_side.ts similarity index 81% rename from src/shared/components/both.side.component.ts rename to src/shared/components/both_side.ts index 819f2f9..ff05f20 100644 --- a/src/shared/components/both.side.component.ts +++ b/src/shared/components/both_side.ts @@ -1,17 +1,18 @@ import {WidgetType, Htape, Label} from '@ui/index'; -const BothSide = 'fr.shared.component.both.side'; +const BothSide = 'dec.dcm.shared.component.both.side'; const Widget: WidgetType = { + props: { + height: 24, + }, render() { const {leftText, rightText} = this.options; return { type: Htape, - cls: 'both-side', - height:24, items: [{ el: { type: Label, - cls: 'left', + cls: 'bi-font-bold', textAlign: 'left', text: leftText, }, diff --git a/src/shared/components/form.item.component.ts b/src/shared/components/form.item.component.ts deleted file mode 100644 index bc88f74..0000000 --- a/src/shared/components/form.item.component.ts +++ /dev/null @@ -1,29 +0,0 @@ -import {WidgetType, Htape, Label} from '@ui/index'; -const className = 'fr.shared.component.form.item'; -const Widget: WidgetType = { - render() { - const {text, form, hint, height} = this.options; - - return { - type: Htape, - cls: 'both-side', - height:height ? height : 24, - items: [{ - el: { - type: Label, - cls: 'left', - textAlign: 'left', - text, - }, - width: 115, - }, form, { - type: Label, - cls: 'hint', - textAlign: 'left', - text: hint, - }], - }; - }, -}; -BI.shortcut(className, BI.inherit(BI.Widget, Widget)); -export default className; diff --git a/src/shared/components/title.component.ts b/src/shared/components/title.ts similarity index 66% rename from src/shared/components/title.component.ts rename to src/shared/components/title.ts index df1bc8a..f1843e2 100644 --- a/src/shared/components/title.component.ts +++ b/src/shared/components/title.ts @@ -1,12 +1,16 @@ import {WidgetType, Label} from '@ui/index'; -const className = 'fr.shared.component.title'; +const className = 'dec.dcm.shared.component.title'; const Widget: WidgetType = { + props: { + baseCls: 'bi-tips bi-border-bottom', + }, render() { const {text} = this.options; return { type: Label, - cls: 'shared-component-title', + height: 24, + bgap: 10, textAlign: 'left', text, }; diff --git a/src/shared/crud/crud.request.ts b/src/shared/crud/crud.request.ts index 63d6495..0eab64d 100644 --- a/src/shared/crud/crud.request.ts +++ b/src/shared/crud/crud.request.ts @@ -82,7 +82,7 @@ export function testConnection(data: LinkType, cb: Function): void{ }); } else { setTimeout(() => { - cb({errorCode:'500', errorMsg:'createConnectionThread not start!'}); + cb({errorCode: '500', errorMsg: 'createConnectionThread not start!'}); }, 2000); } } @@ -125,6 +125,6 @@ export function info(name: string, cb: Function): void{ cb(res.data); }); } else { - cb({maxActive:50, maxIdle:10, numActive:0, numIdle:0}); + cb({maxActive: 50, maxIdle: 10, numActive: 0, numIdle: 0}); } } diff --git a/src/shared/service/dialog.service.ts b/src/shared/service/dialog.service.ts index 349e25c..c7ddb77 100644 --- a/src/shared/service/dialog.service.ts +++ b/src/shared/service/dialog.service.ts @@ -1,4 +1,4 @@ -import {Label, Vertical, Left, Button, Layout} from '@ui/index'; +import {Label, Vertical, Button, Layout, CenterAdapt, VerticalAdapt} from '@ui/index'; class Dialog { /** * 提示 @@ -10,21 +10,25 @@ class Dialog { BI.Popovers.create(id, { type: 'bi.bar_popover', size: 'normal', - header: '提示', + header: BI.i18nText('Dec-Dcm_Tips'), width: 450, height: 220, body: { type: 'bi.left', cls: 'comfirm-content', + vgap: 40, + hgap: 20, items: [ { type: 'bi.layout', - cls: 'comfirm-icon', + cls: 'dcm-comfirm-icon', width: 50, height: 50, }, { type: 'bi.label', + textHeight: 50, + lgap: 10, text: message, }, ], @@ -50,14 +54,16 @@ class Dialog { public loading(message: string): string { const body = { type: 'bi.center_adapt', - cls: 'show-content', + cls: 'bi-card', + width: 450, + height: 220, items: [ { type: Vertical, - items:[ + items: [ { type: 'bi.layout', - cls: 'loading-icon', + cls: 'dcm-loading-icon', width: 100, height: 100, }, @@ -76,14 +82,14 @@ class Dialog { public success(message: string): string { const body = { type: 'bi.center_adapt', - cls: 'show-content', + cls: 'bi-card', items: [ { type: Vertical, - items:[ + items: [ { type: 'bi.layout', - cls: 'success-icon', + cls: 'dcm-success-icon', width: 100, height: 100, }, @@ -101,14 +107,14 @@ class Dialog { public error(message: string): string { const body = { type: 'bi.center_adapt', - cls: 'show-content', + cls: 'bi-card', items: [ { type: Vertical, - items:[ + items: [ { type: 'bi.layout', - cls: 'error-icon', + cls: 'dcm-error-icon', width: 100, height: 100, }, @@ -125,8 +131,8 @@ class Dialog { } public linkFail(text: string, more: string, cb?: Function): string { - let Popover: any = null; - let More: any = null; + let dialogPopover = null; + let dialogMore = null; const id = BI.UUID(); const that = this; const body = { @@ -134,50 +140,53 @@ class Dialog { items: [ { type: 'bi.center_adapt', - cls: 'show-content', - tgap:10, + cls: 'bi-card', + tgap: 10, items: [ { type: Vertical, - items:[ + vgap: 10, + items: [ { type: Layout, - cls: 'error-icon', - width: 100, + cls: 'dcm-error-icon', + width: 270, height: 100, + textAlign: 'center', }, { type: Label, text, }, { - type: Left, - cls:'buttons', - items:[ + type: VerticalAdapt, + cls: 'buttons', + hgap: 5, + items: [ { type: Button, - text:'详细信息', + text: BI.i18nText('Dec-Dcm_Connection_Detailed_Information'), level: 'ignore', handler() { - const isHide = this.getText() === '详细信息'; - Popover.element.css({ + const isHide = !dialogMore.isVisible(); + dialogPopover.element.css({ height: isHide ? '290' : '220', }); - More.setVisible(isHide); - this.setText(isHide ? '收起信息' : '详细信息'); + dialogMore.setVisible(isHide); + this.setText(isHide ? BI.i18nText('Dec-Dcm_Connection_Handup_Information') : BI.i18nText('Dec-Dcm_Connection_Detailed_Information')); }, }, { type: Button, - text:'返回', + text: BI.i18nText('Dec-Dcm_Back'), level: 'ignore', handler() { - that.close(id); + that.remove(id); }, }, { type: Button, - text:'重新连接', + text: BI.i18nText('Dec-Dcm_Connection_ReConnect'), handler() { that.close(id); cb ? cb() : null; @@ -191,27 +200,38 @@ class Dialog { ], }, { type: Label, - cls:'show-more', - text:more, + cls: 'bi-header-background', + text: more, invisible: true, - ref(ref: any) { - More = ref; + height: 73, + width: 400, + value: false, + ref: _ref => { + dialogMore = _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; + + BI.Maskers.create(id, null, { + render: { + type: CenterAdapt, + cls: 'bi-z-index-mask', + items: [{ + el: { + type: 'bi.center_adapt', + cls: 'bi-card', + width: 450, + height: 220, + items: [body], + ref: _ref => { + dialogPopover = _ref; + }, + }, + }], }, - }).open(id); + }); + BI.Maskers.show(id); return id; } @@ -219,24 +239,32 @@ class Dialog { public close(id: string): void{ BI.Popovers.close(id); } + public remove(id: string): void{ + BI.Maskers.remove(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); + const name = BI.UUID(); + BI.Maskers.create(name, null, { + render: { + type: CenterAdapt, + cls: 'bi-z-index-mask', + items: [{ + el: { + ...body, + }, + }], + }, + }); + BI.Maskers.show(name); if (autoClose > 0) { setTimeout(() => { - this.close(id); + BI.Maskers.remove(name); }, autoClose); } - return id; + return name; } } diff --git a/src/ui/fineui.ts b/src/ui/fineui.ts index b0b7cc3..f40ddad 100644 --- a/src/ui/fineui.ts +++ b/src/ui/fineui.ts @@ -34,7 +34,7 @@ export const TextBubblePopupBarView = 'bi.text_bubble_bar_popup_view'; 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 LinearSegment = 'bi.linear_segment'; // 布局 export const VerticalAdapt = 'bi.vertical_adapt'; @@ -45,3 +45,9 @@ export const Layout = 'bi.layout'; export const Absolute = 'bi.absolute'; export const Vertical = 'bi.vertical'; export const Left = 'bi.left'; +export const Right = 'bi.right'; +export const LeftRightVerticalAdapt = 'bi.left_right_vertical_adapt'; +export const VertualGroup = 'bi.virtual_group'; +export const ListView = 'bi.list_view'; +export const FloatCenter = 'bi.float_center'; +export const HorizotalAdapt = 'bi.horizontal_adapt'; diff --git a/tsconfig.json b/tsconfig.json index 0aebbc0..22be292 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -17,6 +17,8 @@ "@types": ["src/ui/index"], "@shared/*": ["src/shared/*"], "@shared": ["src/shared"], + "@private/*": ["private/*"], + "@private": ["private"], } }, "include": [ diff --git a/types/globals.d.ts b/types/globals.d.ts index 3a1bc4b..44cf726 100644 --- a/types/globals.d.ts +++ b/types/globals.d.ts @@ -6,3 +6,4 @@ declare let BI: Obj; declare const Fix: Obj; declare const Dec: Obj; declare const PluginHelper: Obj; +declare const Store: Obj; diff --git a/webpack.config.js b/webpack.config.js index 1eff132..128091d 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -24,6 +24,7 @@ module.exports = env => { "@ui": path.resolve("src/ui"), "@types": path.resolve("types"), "@shared": path.resolve("src/shared"), + "@private": path.resolve("private"), } }, plugins: [htmlWebpackPlugin, new MiniCssExtractPlugin({filename: `style.css`}), new CopyPlugin([ @@ -50,6 +51,19 @@ module.exports = env => { }, 'css-loader','sass-loader' ] + },{ + test:/\.less$/, + exclude: /node_modules/, + use: [ + { + loader: MiniCssExtractPlugin.loader, + options: { + publicPath: './', + hmr: process.env.NODE_ENV === 'development', + }, + }, + 'css-loader','less-loader' + ] },{ test:/(\.jpg|\.png|\.gif|\.svg)$/, exclude: /node_modules/,