因为项目需要，需要开发类似大屏设计器的内容，所以开始考虑开发大屏设计器。
一、数据库设计
1、主要先考虑数据源类型，可以根据需要进行增加，包括mysql，oracle，http等。
DROP TABLE IF EXISTS `bs_source_type`; CREATE TABLE `bs_source_type` ( `id` varchar(36) NOT NULL COMMENT 'id', `code` varchar(32) DEFAULT NULL COMMENT '编码', `name` varchar(32) DEFAULT NULL COMMENT '名称', `json_value` text COMMENT 'json值', `status` int(11) DEFAULT NULL COMMENT '状态', `create_by` varchar(50) DEFAULT NULL COMMENT '创建人', `create_time` datetime DEFAULT NULL COMMENT '创建日期', `update_by` varchar(50) DEFAULT NULL COMMENT '更新人', `update_time` datetime DEFAULT NULL COMMENT '更新日期', `sys_org_code` varchar(64) DEFAULT NULL COMMENT '所属部门', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
2、 数据源表，保存用实际需要的数据源，同时可以进行测试。
DROP TABLE IF EXISTS `bs_data_source`; CREATE TABLE `bs_data_source` ( `id` varchar(36) NOT NULL COMMENT 'id', `code` varchar(100) DEFAULT NULL COMMENT '数据源编码', `name` varchar(100) DEFAULT NULL COMMENT '数据源名称', `type` varchar(10) DEFAULT NULL COMMENT '数据源类型', `remark` varchar(200) DEFAULT NULL COMMENT '备注', `create_by` varchar(50) DEFAULT NULL COMMENT '创建人', `create_time` datetime DEFAULT NULL COMMENT '创建日期', `update_by` varchar(50) DEFAULT NULL COMMENT '更新人', `update_time` datetime DEFAULT NULL COMMENT '更新日期', `sys_org_code` varchar(64) DEFAULT NULL COMMENT '所属部门', `config` text COMMENT '数据源配置', PRIMARY KEY (`id`) USING BTREE, UNIQUE KEY `bs_data_source_code_uni` (`code`) USING BTREE ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 ROW_FORMAT=DYNAMIC;
二、online表单设计
因为上面的数据都需要录入等维护，所以通过online设计表单实现
因为大盘设计作为单独的模块表单，所以在数据字典增加一个类型大盘表单
1、bs_source_type表单按照正常的新建一个就可以，如下：
生成代码也不需要做什么调整，应该直接 就可以用了。
2、bs_data_source表单如下：
这个主要是用到第一个表的type类型，所以需要进行关联，生成的前后端代码也要做一些调整。
2.1 前端代码
<a-col :span="24"> <a-form-model-item label="数据源类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="type"> <j-dict-select-tag type="list" v-model="model.type" dictCode="bs_source_type,name,code" @change="onchange" placeholder="请选择数据源类型" /> </a-form-model-item> </a-col>
首先数据源类型这里需要增加一个onchange事件，以便选择变化的时候进行取值，获取type数据源类型后再把json值取出来
onchange(val) { const that = this; console.log("onchange val=",val); this.sourceForm.sourceType = val; let url = this.url.queryByCode, method = 'get'; let params = {code: val}; getAction(url,params).then((res)=>{ if(res.success){ //that.$message.success(res.message); console.log("onchange res=",res); that.dataLink = JSON.parse(res.result.jsonValue); console.log("onchange that.dataLink=",that.dataLink); }else{ that.$message.warning(res.message); } }).finally(() => { that.confirmLoading = false; }) },
同时根据这个值进行动态显示相应的类型内容
<a-col v-for="(data, index) in dataLink" :key="index" :span="24" > <a-form-model-item :label="data.labelValue" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-input v-model.trim="data.value" /> </a-form-model-item> </a-col> <a-col :span="24"> <center><a-button type="primary" @click="dataSourceTest">测试</a-button></center> </a-col>
显示出来后进行相应的数据源测试
// 测试 dataSourceTest() { const newList = {}; this.dataLink.forEach(item => { newList[item.label] = item.value; }); this.sourceForm.sourceConfig = JSON.stringify(newList); testConnection(this.sourceForm).then(res => { console.log("testConnection res=",res); if (res.code == "200") { this.testReplyCode = res.code; this.$message.success(res.result); } else { this.$message.error(res.result); this.testReplyCode = null; } }); },
后端部分修改下个章节介绍
三、效果如下：
3.1数据源类型
3.2 数据源编辑与测试
