通过前面设计好数据源后，就要进行数据集的设计了。
一、还是在online在线表单进行设计，如下：
主要是数据源与数据集类型进行关联
其中类型在字典里进行维护 
二、生成代码后前端的修改
1、BsDataSetList.vue文件修改
列表文件主要是新增要进行修改如下，
<a-dropdown> <a-button type="primary" icon="plus">新增</a-button> <a-menu slot="overlay"> <a-menu-item> <a @click="handleAddSQL">SQL</a> <a @click="handleAddHTTP">HTTP</a> </a-menu-item> </a-menu> </a-dropdown>
同时使用NbcioListMixin，所以菜单里的删除需要修改一下，变成下面的传入参数是record，相应的下面NbcioListMixin文件也要做调整
<a-menu-item> <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record)"> <a>删除</a> </a-popconfirm> </a-menu-item>
2、NbcioListMixin修改
增加下面两个方法：
handleAddSQL: function () {//大屏用 this.$refs.modalForm.add("sql"); this.$refs.modalForm.approve=false; this.$refs.modalForm.title = "新增"; this.$refs.modalForm.disableSubmit = false; }, handleAddHTTP: function () {//大屏用 this.$refs.modalForm.add("http"); this.$refs.modalForm.approve=false; this.$refs.modalForm.title = "新增"; this.$refs.modalForm.disableSubmit = false; },
3、BsDataSetForm.vue修改
增加一个测试浏览如下：，当然需要安装vue-json-editor组件与 import vueJsonEditor from "vue-json-editor";
<a-col :span="24"> <a-tabs v-model:activeKey="activeKey" @tabClick="dataSetTest"> <a-tab-pane key="3" tab="测试预览"> <div style="max-height: 400px; overflow: auto"> <vue-json-editor v-model="cols" :show-btns="false" :mode="'code'" lang="zh" @json-change="onJsonChange" @json-save="onJsonSave" /> </div> </a-tab-pane> </a-tabs> </a-col>
add方法需要修改成
add (type) { this.modelDefault.setType = type; this.edit(this.modelDefault); this.model.setType = type; },
同时测试浏览的方法如下：
async dataSetTest (tabKey) {//测试预览 console.log("tab clicked : " + tabKey); if (this.model.setType == "http") { //针对http数据源 console.log("http数据集" + this.httpForm); this.model.dynSentence = JSON.stringify(this.httpForm); } if (tabKey == "3") { const params = { sourceCode: this.model.sourceCode, dynSentence: this.model.dynSentence, dataSetParamDtoList: this.tableData, dataSetTransformDtoList: this.itemFilterList, setType: this.model.setType }; const { code, result } = await testTransformSet(params); if (code != "200") return; this.cols = result.data; this.testMassageCode = code; } }, onJsonChange(value) {}, onJsonSave(value) {},
三、后端代码
这个先增加上面说的这个测试浏览接口
/** * 测试 数据转换是否正确 * @param param * @return */ @PostMapping("/testTransform") public Result<?> testTransform(@Validated @RequestBody DataSetTestTransformParam param) { DataSetDto dto = new DataSetDto(); BeanUtils.copyProperties(param, dto); return Result.OK(bsDataSetService.testTransform(dto)); }
这个具体的实现代码如下：
package com.nbcio.modules.estar.bs.service.impl; import com.nbcio.modules.estar.bs.constant.JdbcConstants; import com.nbcio.modules.estar.bs.constant.ResponseCode; import com.nbcio.modules.estar.bs.dto.DataSetDto; import com.nbcio.modules.estar.bs.dto.DataSetParamDto; import com.nbcio.modules.estar.bs.dto.DataSourceDto; import com.nbcio.modules.estar.bs.dto.OriginalDataDto; import com.nbcio.modules.estar.bs.entity.BsDataSet; import com.nbcio.modules.estar.bs.entity.BsDataSource; import com.nbcio.modules.estar.bs.enums.SetTypeEnum; import com.nbcio.modules.estar.bs.mapper.BsDataSetMapper; import com.nbcio.modules.estar.bs.service.IBsDataSetService; import com.nbcio.modules.estar.bs.service.IBsDataSourceService; import com.nbcio.modules.estar.bs.service.IDataSetParamService; import com.nbcio.modules.estar.bs.service.IDataSetTransformService; import java.util.HashMap; import java.util.List; import java.util.Map; import java.util.stream.Collectors; import org.apache.commons.lang3.StringUtils; import org.jeecg.common.api.vo.Result; import org.springframework.beans.BeanUtils; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.alibaba.fastjson.JSONObject; import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl; /** * @Description: bs_data_set * @Author: nbacheng * @Date: 2023-03-20 * @Version: V1.0 */ @Service public class BsDataSetServiceImpl extends ServiceImpl<BsDataSetMapper, BsDataSet> implements IBsDataSetService { @Autowired private IDataSetParamService dataSetParamService; @Autowired private IDataSetTransformService dataSetTransformService; @Autowired private IBsDataSourceService bsDataSourceService; @Override public OriginalDataDto testTransform(DataSetDto dto) { String dynSentence = dto.getDynSentence(); OriginalDataDto originalDataDto = new OriginalDataDto(); String sourceCode = dto.getSourceCode(); //1.获取数据源 BsDataSource bsDataSource; if (dto.getSetType().equals(SetTypeEnum.HTTP.getCodeValue())) { //http不需要数据源，兼容已有的逻辑，将http所需要的数据塞进DataSource bsDataSource = new BsDataSource(); bsDataSource.setConfig(dynSentence); bsDataSource.setType(JdbcConstants.HTTP); String body = JSONObject.parseObject(dynSentence).getString("body"); if (StringUtils.isNotBlank(body)) { dynSentence = body; }else { dynSentence = "{}"; } }else { QueryWrapper<BsDataSource> queryWrapper = new QueryWrapper<BsDataSource>(); queryWrapper.eq("code", sourceCode); bsDataSource = bsDataSourceService.getOne(queryWrapper); } //3.参数替换 //3.1参数校验 boolean verification = dataSetParamService.verification(dto.getDataSetParamDtoList(), null); if (!verification) { Result.error(ResponseCode.RULE_FIELDS_CHECK_ERROR); return originalDataDto; } dynSentence = dataSetParamService.transform(dto.getDataSetParamDtoList(), dynSentence); //4.获取数据 DataSourceDto dataSourceDto = new DataSourceDto(); BeanUtils.copyProperties(bsDataSource, dataSourceDto); dataSourceDto.setDynSentence(dynSentence); dataSourceDto.setContextData(setContextData(dto.getDataSetParamDtoList())); //获取total,判断DataSetParamDtoList中是否传入分页参数 Map<String, Object> collect = dto.getDataSetParamDtoList().stream().collect(Collectors.toMap(DataSetParamDto::getParamName, DataSetParamDto::getSampleItem)); if (collect.containsKey("pageNumber") && collect.containsKey("pageSize")) { dto.setContextData(collect); long total = bsDataSourceService.total(dataSourceDto, dto); originalDataDto.setTotal(total); } List<JSONObject> data = bsDataSourceService.execute(dataSourceDto); //5.数据转换 List<JSONObject> transform = (List<JSONObject>)dataSetTransformService.transform(dto.getDataSetTransformDtoList(), data).getResult(); originalDataDto.setData(transform); return originalDataDto; } /** * dataSetParamDtoList转map * @param dataSetParamDtoList * @return */ public Map<String, Object> setContextData(List<DataSetParamDto> dataSetParamDtoList){ Map<String, Object> map = new HashMap<>(); if (null != dataSetParamDtoList && dataSetParamDtoList.size() > 0) { dataSetParamDtoList.forEach(dataSetParamDto -> map.put(dataSetParamDto.getParamName(), dataSetParamDto.getSampleItem())); } return map; } }
四、效果如下：
以后界面还是美化与调整。
