基于jeecgboot的大屏设计器开发——数据源设计（一）-阿里云开发者社区

基于jeecgboot的大屏设计器开发——数据源设计（一）

2024-05-10 9

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 基于jeecgboot的大屏设计器开发——数据源设计（一）

因为项目需要，需要开发类似大屏设计器的内容，所以开始考虑开发大屏设计器。

一、数据库设计

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;
          }
        });
      },