dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(feat):数据集，视图分组树优化，去除场景

Browse Source
This commit is contained in:
junjie 2021-06-19 11:42:14 +08:00
parent 1758bf4904
commit cdaba0eb03
24 changed files with 1297 additions and 367 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
backend/src/main/java/io/dataease/base/mapper/ext/ExtChartGroupMapper.java
View File

@ -1,6 +1,5 @@
package io.dataease.base.mapper.ext;
import io.dataease.controller.request.BaseTreeRequest;
import io.dataease.controller.request.chart.ChartGroupRequest;
import io.dataease.dto.chart.ChartGroupDTO;

5
backend/src/main/java/io/dataease/controller/chart/ChartGroupController.java
View File

@ -26,6 +26,11 @@ public class ChartGroupController {
return chartGroupService.tree(ChartGroup);
}
@PostMapping("/treeNode")
public List<ChartGroupDTO> treeNode(@RequestBody ChartGroupRequest ChartGroup) {
return chartGroupService.tree(ChartGroup);
}
@PostMapping("/delete/{id}")
public void tree(@PathVariable String id) {
chartGroupService.delete(id);

5
backend/src/main/java/io/dataease/controller/chart/ChartViewController.java
View File

@ -32,6 +32,11 @@ public class ChartViewController {
return chartViewService.list(chartViewRequest);
}
@PostMapping("/listAndGroup")
public List<ChartViewDTO> listAndGroup(@RequestBody ChartViewRequest chartViewRequest) {
return chartViewService.listAndGroup(chartViewRequest);
}
@PostMapping("/get/{id}")
public ChartViewWithBLOBs get(@PathVariable String id) {
return chartViewService.get(id);

10
backend/src/main/java/io/dataease/controller/dataset/DataSetGroupController.java
View File

@ -21,6 +21,7 @@ public class DataSetGroupController {
private DataSetGroupService dataSetGroupService;
@Resource
private ExtractDataService extractDataService;
@PostMapping("/save")
public DataSetGroupDTO save(@RequestBody DatasetGroup datasetGroup) {
return dataSetGroupService.save(datasetGroup);
@ -31,8 +32,13 @@ public class DataSetGroupController {
return dataSetGroupService.tree(datasetGroup);
}
@PostMapping("/treeNode")
public List<DataSetGroupDTO> treeNode(@RequestBody DataSetGroupRequest datasetGroup) {
return dataSetGroupService.treeNode(datasetGroup);
}
@PostMapping("/delete/{id}")
public void tree(@PathVariable String id) throws Exception{
public void tree(@PathVariable String id) throws Exception {
dataSetGroupService.delete(id);
}
@ -42,7 +48,7 @@ public class DataSetGroupController {
}
@PostMapping("/isKettleRunning")
public boolean isKettleRunning(){
public boolean isKettleRunning() {
return extractDataService.isKettleRunning();
}
}

5
backend/src/main/java/io/dataease/controller/dataset/DataSetTableController.java
View File

@ -44,6 +44,11 @@ public class DataSetTableController {
return dataSetTableService.list(dataSetTableRequest);
}
@PostMapping("listAndGroup")
public List<DataSetTableDTO> listAndGroup(@RequestBody DataSetTableRequest dataSetTableRequest) {
return dataSetTableService.listAndGroup(dataSetTableRequest);
}
@PostMapping("get/{id}")
public DatasetTable get(@PathVariable String id) {
return dataSetTableService.get(id);

3
backend/src/main/java/io/dataease/dto/chart/ChartViewDTO.java
View File

@ -16,4 +16,7 @@ public class ChartViewDTO extends ChartViewWithBLOBs {
private Map<String, Object> data;
private String privileges;
private Boolean isLeaf;
private String pid;
}

3
backend/src/main/java/io/dataease/dto/dataset/DataSetTableDTO.java
View File

@ -15,4 +15,7 @@ import java.util.List;
public class DataSetTableDTO extends DatasetTable {
private List<DataSetTableDTO> children;
private String privileges;
private Boolean isLeaf;
private String pid;
}

10
backend/src/main/java/io/dataease/service/chart/ChartGroupService.java
View File

@ -81,6 +81,16 @@ public class ChartGroupService {
}
public List<ChartGroupDTO> tree(ChartGroupRequest chartGroup) {
chartGroup.setLevel(null);
chartGroup.setPid("0");
chartGroup.setType("group");
chartGroup.setUserId(String.valueOf(AuthUtils.getUser().getUserId()));
List<ChartGroupDTO> treeInfo = extChartGroupMapper.search(chartGroup);
List<ChartGroupDTO> result = TreeUtils.mergeTree(treeInfo);
return result;
}
public List<ChartGroupDTO> treeNode(ChartGroupRequest chartGroup) {
chartGroup.setLevel(null);
chartGroup.setPid(null);
chartGroup.setUserId(String.valueOf(AuthUtils.getUser().getUserId()));

36
backend/src/main/java/io/dataease/service/chart/ChartViewService.java
View File

@ -4,21 +4,23 @@ import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;
import io.dataease.base.domain.*;
import io.dataease.base.mapper.ChartViewMapper;
import io.dataease.base.mapper.ext.ExtChartGroupMapper;
import io.dataease.base.mapper.ext.ExtChartViewMapper;
import io.dataease.commons.utils.AuthUtils;
import io.dataease.commons.utils.BeanUtils;
import io.dataease.commons.utils.CommonBeanFactory;
import io.dataease.controller.request.chart.ChartExtFilterRequest;
import io.dataease.controller.request.chart.ChartExtRequest;
import io.dataease.controller.request.chart.ChartGroupRequest;
import io.dataease.controller.request.chart.ChartViewRequest;
import io.dataease.controller.request.dataset.DataSetGroupRequest;
import io.dataease.datasource.provider.DatasourceProvider;
import io.dataease.datasource.provider.ProviderFactory;
import io.dataease.datasource.request.DatasourceRequest;
import io.dataease.datasource.service.DatasourceService;
import io.dataease.dto.chart.ChartCustomFilterDTO;
import io.dataease.dto.chart.ChartViewDTO;
import io.dataease.dto.chart.ChartViewFieldDTO;
import io.dataease.dto.chart.Series;
import io.dataease.dto.chart.*;
import io.dataease.dto.dataset.DataSetGroupDTO;
import io.dataease.dto.dataset.DataSetTableDTO;
import io.dataease.dto.dataset.DataTableInfoDTO;
import io.dataease.i18n.Translator;
import io.dataease.provider.QueryProvider;
@ -51,6 +53,8 @@ public class ChartViewService {
private DatasourceService datasourceService;
@Resource
private DataSetTableFieldsService dataSetTableFieldsService;
@Resource
private ExtChartGroupMapper extChartGroupMapper;
public ChartViewWithBLOBs save(ChartViewWithBLOBs chartView) {
checkName(chartView);
@ -72,6 +76,30 @@ public class ChartViewService {
return extChartViewMapper.search(chartViewRequest);
}
public List<ChartViewDTO> listAndGroup(ChartViewRequest chartViewRequest) {
chartViewRequest.setUserId(String.valueOf(AuthUtils.getUser().getUserId()));
List<ChartViewDTO> charts = extChartViewMapper.search(chartViewRequest);
charts.forEach(ele -> ele.setIsLeaf(true));
// 获取group下的子group
ChartGroupRequest chartGroupRequest = new ChartGroupRequest();
chartGroupRequest.setLevel(null);
chartGroupRequest.setType("group");
chartGroupRequest.setPid(chartViewRequest.getSceneId());
chartGroupRequest.setUserId(String.valueOf(AuthUtils.getUser().getUserId()));
List<ChartGroupDTO> groups = extChartGroupMapper.search(chartGroupRequest);
List<ChartViewDTO> group = groups.stream().map(ele -> {
ChartViewDTO dto = new ChartViewDTO();
dto.setId(ele.getId());
dto.setName(ele.getName());
dto.setIsLeaf(false);
dto.setType("group");
dto.setPid(ele.getPid());
return dto;
}).collect(Collectors.toList());
group.addAll(charts);
return group;
}
public ChartViewWithBLOBs get(String id) {
return chartViewMapper.selectByPrimaryKey(id);
}

10
backend/src/main/java/io/dataease/service/dataset/DataSetGroupService.java
View File

@ -87,6 +87,16 @@ public class DataSetGroupService {
}
}
public List<DataSetGroupDTO> treeNode(DataSetGroupRequest datasetGroup) {
datasetGroup.setLevel(null);
datasetGroup.setPid("0");
datasetGroup.setType("group");
datasetGroup.setUserId(String.valueOf(AuthUtils.getUser().getUserId()));
List<DataSetGroupDTO> treeInfo = extDataSetGroupMapper.search(datasetGroup);
List<DataSetGroupDTO> result = TreeUtils.mergeTree(treeInfo);
return result;
}
public List<DataSetGroupDTO> tree(DataSetGroupRequest datasetGroup) {
datasetGroup.setLevel(null);
datasetGroup.setPid(null);

35
backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
View File

@ -5,21 +5,19 @@ import com.fit2cloud.quartz.anno.QuartzScheduled;
import com.google.gson.Gson;
import io.dataease.base.domain.*;
import io.dataease.base.mapper.*;
import io.dataease.base.mapper.ext.ExtDataSetGroupMapper;
import io.dataease.base.mapper.ext.ExtDataSetTableMapper;
import io.dataease.base.mapper.ext.UtilMapper;
import io.dataease.commons.constants.JobStatus;
import io.dataease.commons.utils.*;
import io.dataease.controller.request.dataset.DataSetGroupRequest;
import io.dataease.controller.request.dataset.DataSetTableRequest;
import io.dataease.datasource.dto.TableFiled;
import io.dataease.datasource.provider.DatasourceProvider;
import io.dataease.datasource.provider.JdbcProvider;
import io.dataease.datasource.provider.ProviderFactory;
import io.dataease.datasource.request.DatasourceRequest;
import io.dataease.dto.dataset.DataSetPreviewPage;
import io.dataease.dto.dataset.DataSetTableDTO;
import io.dataease.dto.dataset.DataSetTableUnionDTO;
import io.dataease.dto.dataset.DataTableInfoCustomUnion;
import io.dataease.dto.dataset.DataTableInfoDTO;
import io.dataease.dto.dataset.*;
import io.dataease.i18n.Translator;
import io.dataease.provider.DDLProvider;
import io.dataease.provider.QueryProvider;
@ -81,6 +79,8 @@ public class DataSetTableService {
private QrtzSchedulerStateMapper qrtzSchedulerStateMapper;
@Resource
private DatasetTableTaskLogMapper datasetTableTaskLogMapper;
@Resource
private ExtDataSetGroupMapper extDataSetGroupMapper;
private static String lastUpdateTime = "${__last_update_time__}";
private static String currentUpdateTime = "${__current_update_time__}";
@ -186,6 +186,31 @@ public class DataSetTableService {
return extDataSetTableMapper.search(dataSetTableRequest);
}
public List<DataSetTableDTO> listAndGroup(DataSetTableRequest dataSetTableRequest) {
dataSetTableRequest.setUserId(String.valueOf(AuthUtils.getUser().getUserId()));
dataSetTableRequest.setTypeFilter(dataSetTableRequest.getTypeFilter());
List<DataSetTableDTO> ds = extDataSetTableMapper.search(dataSetTableRequest);
ds.forEach(ele -> ele.setIsLeaf(true));
// 获取group下的子group
DataSetGroupRequest datasetGroup = new DataSetGroupRequest();
datasetGroup.setLevel(null);
datasetGroup.setType("group");
datasetGroup.setPid(dataSetTableRequest.getSceneId());
datasetGroup.setUserId(String.valueOf(AuthUtils.getUser().getUserId()));
List<DataSetGroupDTO> groups = extDataSetGroupMapper.search(datasetGroup);
List<DataSetTableDTO> group = groups.stream().map(ele -> {
DataSetTableDTO dto = new DataSetTableDTO();
dto.setId(ele.getId());
dto.setName(ele.getName());
dto.setIsLeaf(false);
dto.setType("group");
dto.setPid(ele.getPid());
return dto;
}).collect(Collectors.toList());
group.addAll(ds);
return group;
}
public DatasetTable get(String id) {
return datasetTableMapper.selectByPrimaryKey(id);
}

425
frontend/src/views/chart/group/Group.vue
View File

@ -6,17 +6,20 @@
<span class="title-text">
{{ $t('chart.datalist') }}
</span>
<el-button icon="el-icon-plus" type="text" size="mini" style="float: right;" @click="add('group')">
<!-- {{ $t('chart.add_group') }}-->
</el-button>
</el-row>
<el-divider />
<el-row>
<el-button type="primary" size="mini" @click="add('group')">
{{ $t('chart.add_group') }}
</el-button>
<el-button type="primary" size="mini" @click="add('scene')">
{{ $t('chart.add_scene') }}
</el-button>
</el-row>
<!-- <el-row>-->
<!-- <el-button type="primary" size="mini" @click="add('group')">-->
<!-- {{ $t('chart.add_group') }}-->
<!-- </el-button>-->
<!-- <el-button type="primary" size="mini" @click="add('scene')">-->
<!-- {{ $t('chart.add_scene') }}-->
<!-- </el-button>-->
<!-- </el-row>-->
<!-- <el-row>-->
<!-- <el-form>-->
@ -35,24 +38,29 @@
<el-col class="custom-tree-container">
<div class="block">
<el-tree
ref="asyncTree"
:default-expanded-keys="expandedArray"
:data="data"
node-key="id"
:expand-on-click-node="true"
:load="loadNode"
lazy
:props="treeProps"
highlight-current
@node-click="nodeClick"
@node-expand="nodeExpand"
@node-collapse="nodeCollapse"
>
<span slot-scope="{ node, data }" class="custom-tree-node father">
<span v-if="data.type ==='group'" slot-scope="{ node, data }" class="custom-tree-node father">
<span style="display: flex;flex: 1;width: 0;">
<span v-if="data.type === 'scene'">
<!-- <el-button-->
<!-- icon="el-icon-folder-opened"-->
<!-- type="text"-->
<!-- size="mini"-->
<!-- />-->
<svg-icon icon-class="scene" class="ds-icon-scene" />
</span>
<!-- <span v-if="data.type === 'scene'">-->
<!-- &lt;!&ndash; <el-button&ndash;&gt;-->
<!-- &lt;!&ndash; icon="el-icon-folder-opened"&ndash;&gt;-->
<!-- &lt;!&ndash; type="text"&ndash;&gt;-->
<!-- &lt;!&ndash; size="mini"&ndash;&gt;-->
<!-- &lt;!&ndash; />&ndash;&gt;-->
<!-- <svg-icon icon-class="scene" class="ds-icon-scene" />-->
<!-- </span>-->
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
</span>
<span v-if="hasDataPermission('manage',data.privileges)" class="child">
@ -69,8 +77,11 @@
<el-dropdown-item icon="el-icon-circle-plus" :command="beforeClickAdd('group',data,node)">
{{ $t('chart.group') }}
</el-dropdown-item>
<el-dropdown-item icon="el-icon-folder-add" :command="beforeClickAdd('scene',data,node)">
{{ $t('chart.scene') }}
<!-- <el-dropdown-item icon="el-icon-folder-add" :command="beforeClickAdd('scene',data,node)">-->
<!-- {{ $t('chart.scene') }}-->
<!-- </el-dropdown-item>-->
<el-dropdown-item icon="el-icon-circle-plus" :command="beforeClickAdd('chart',data,node)">
{{ $t('chart.add_chart') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
@ -96,6 +107,33 @@
</span>
</span>
</span>
<span v-else slot-scope="{ node, data }" class="custom-tree-node-list father">
<span style="display: flex;flex: 1;width: 0;">
<span><svg-icon :icon-class="data.type" /></span>
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
</span>
<span v-if="hasDataPermission('manage',data.privileges)" class="child">
<span style="margin-left: 12px;" @click.stop>
<el-dropdown trigger="click" size="small" @command="clickMore">
<span class="el-dropdown-link">
<el-button
icon="el-icon-more"
type="text"
size="small"
/>
</span>
<el-dropdown-menu slot="dropdown">
<!-- <el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('renameChart',data,node)">-->
<!-- {{ $t('chart.rename') }}-->
<!-- </el-dropdown-item>-->
<el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('deleteChart',data,node)">
{{ $t('chart.delete') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</span>
</span>
</el-tree>
</div>
</el-col>
@ -115,110 +153,147 @@
</el-col>
<!--scene-->
<el-col v-if="sceneMode">
<el-row class="title-css scene-title">
<span class="title-text scene-title-name" :title="currGroup.name">
{{ currGroup.name }}
</span>
<el-button icon="el-icon-back" size="mini" style="float: right" circle @click="back">
<!-- {{ $t('chart.back') }}-->
</el-button>
</el-row>
<el-divider />
<el-row>
<el-button type="primary" size="mini" plain @click="selectTable">
{{ $t('chart.add_chart') }}
</el-button>
</el-row>
<el-row>
<el-form>
<el-form-item class="form-item">
<el-input
v-model="search"
size="mini"
:placeholder="$t('chart.search')"
prefix-icon="el-icon-search"
clearable
/>
<!-- <el-col v-if="sceneMode">-->
<!-- <el-row class="title-css scene-title">-->
<!-- <span class="title-text scene-title-name" :title="currGroup.name">-->
<!-- {{ currGroup.name }}-->
<!-- </span>-->
<!-- <el-button icon="el-icon-back" size="mini" style="float: right" circle @click="back">-->
<!-- &lt;!&ndash; {{ $t('chart.back') }}&ndash;&gt;-->
<!-- </el-button>-->
<!-- </el-row>-->
<!-- <el-divider />-->
<!-- <el-row>-->
<!-- <el-button type="primary" size="mini" plain @click="selectTable">-->
<!-- {{ $t('chart.add_chart') }}-->
<!-- </el-button>-->
<!-- </el-row>-->
<!-- <el-row>-->
<!-- <el-form>-->
<!-- <el-form-item class="form-item">-->
<!-- <el-input-->
<!-- v-model="search"-->
<!-- size="mini"-->
<!-- :placeholder="$t('chart.search')"-->
<!-- prefix-icon="el-icon-search"-->
<!-- clearable-->
<!-- />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- </el-row>-->
<!-- <span v-show="false">{{ sceneData }}</span>-->
<!-- <el-tree-->
<!-- :data="chartData"-->
<!-- node-key="id"-->
<!-- :expand-on-click-node="true"-->
<!-- class="tree-list"-->
<!-- highlight-current-->
<!-- @node-click="sceneClick"-->
<!-- >-->
<!-- <span slot-scope="{ node, data }" class="custom-tree-node-list father">-->
<!-- <span style="display: flex;flex: 1;width: 0;">-->
<!-- <span><svg-icon :icon-class="data.type" /></span>-->
<!-- <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>-->
<!-- </span>-->
<!-- <span v-if="hasDataPermission('manage',data.privileges)" class="child">-->
<!-- <span style="margin-left: 12px;" @click.stop>-->
<!-- <el-dropdown trigger="click" size="small" @command="clickMore">-->
<!-- <span class="el-dropdown-link">-->
<!-- <el-button-->
<!-- icon="el-icon-more"-->
<!-- type="text"-->
<!-- size="small"-->
<!-- />-->
<!-- </span>-->
<!-- <el-dropdown-menu slot="dropdown">-->
<!-- &lt;!&ndash; <el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('renameChart',data,node)">&ndash;&gt;-->
<!-- &lt;!&ndash; {{ $t('chart.rename') }}&ndash;&gt;-->
<!-- &lt;!&ndash; </el-dropdown-item>&ndash;&gt;-->
<!-- <el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('deleteChart',data,node)">-->
<!-- {{ $t('chart.delete') }}-->
<!-- </el-dropdown-item>-->
<!-- </el-dropdown-menu>-->
<!-- </el-dropdown>-->
<!-- </span>-->
<!-- </span>-->
<!-- </span>-->
<!-- </el-tree>-->
<!-- &lt;!&ndash;rename chart&ndash;&gt;-->
<!-- <el-dialog v-dialogDrag :title="$t('chart.chart')" :visible="editTable" :show-close="false" width="30%">-->
<!-- <el-form ref="tableForm" :model="tableForm" :rules="tableFormRules" @keyup.enter.native="saveTable(tableForm)">-->
<!-- <el-form-item :label="$t('commons.name')" prop="name">-->
<!-- <el-input v-model="tableForm.name" />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <div slot="footer" class="dialog-footer">-->
<!-- <el-button size="mini" @click="closeTable()">{{ $t('chart.cancel') }}</el-button>-->
<!-- <el-button type="primary" size="mini" @click="saveTable(tableForm)">{{ $t('chart.confirm') }}</el-button>-->
<!-- </div>-->
<!-- </el-dialog>-->
<!-- &lt;!&ndash;添加视图-选择数据集&ndash;&gt;-->
<!-- &lt;!&ndash; <el-dialog&ndash;&gt;-->
<!-- &lt;!&ndash; v-dialogDrag&ndash;&gt;-->
<!-- &lt;!&ndash; :title="$t('chart.add_chart')"&ndash;&gt;-->
<!-- &lt;!&ndash; :visible="selectTableFlag"&ndash;&gt;-->
<!-- &lt;!&ndash; :show-close="false"&ndash;&gt;-->
<!-- &lt;!&ndash; width="70%"&ndash;&gt;-->
<!-- &lt;!&ndash; class="dialog-css"&ndash;&gt;-->
<!-- &lt;!&ndash; :destroy-on-close="true"&ndash;&gt;-->
<!-- &lt;!&ndash; >&ndash;&gt;-->
<!-- &lt;!&ndash; <el-row style="width: 400px;">&ndash;&gt;-->
<!-- &lt;!&ndash; <el-form ref="form" :model="table" label-width="80px" size="mini" class="form-item">&ndash;&gt;-->
<!-- &lt;!&ndash; <el-form-item :label="$t('chart.view_name')">&ndash;&gt;-->
<!-- &lt;!&ndash; <el-input v-model="chartName" size="mini" />&ndash;&gt;-->
<!-- &lt;!&ndash; </el-form-item>&ndash;&gt;-->
<!-- &lt;!&ndash; </el-form>&ndash;&gt;-->
<!-- &lt;!&ndash; </el-row>&ndash;&gt;-->
<!-- &lt;!&ndash; <table-selector @getTable="getTable" />&ndash;&gt;-->
<!-- &lt;!&ndash; <div slot="footer" class="dialog-footer">&ndash;&gt;-->
<!-- &lt;!&ndash; <el-button size="mini" @click="closeCreateChart">{{ $t('chart.cancel') }}</el-button>&ndash;&gt;-->
<!-- &lt;!&ndash; <el-button type="primary" size="mini" :disabled="!table.id" @click="createChart">{{ $t('chart.confirm') }}</el-button>&ndash;&gt;-->
<!-- &lt;!&ndash; </div>&ndash;&gt;-->
<!-- &lt;!&ndash; </el-dialog>&ndash;&gt;-->
<!-- </el-col>-->
<!--rename chart-->
<el-dialog v-dialogDrag :title="$t('chart.chart')" :visible="editTable" :show-close="false" width="30%">
<el-form ref="tableForm" :model="tableForm" :rules="tableFormRules" @keyup.enter.native="saveTable(tableForm)">
<el-form-item :label="$t('commons.name')" prop="name">
<el-input v-model="tableForm.name" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeTable()">{{ $t('chart.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="saveTable(tableForm)">{{ $t('chart.confirm') }}</el-button>
</div>
</el-dialog>
<!--添加视图-选择数据集-->
<el-dialog
v-dialogDrag
:title="$t('chart.add_chart')"
:visible="selectTableFlag"
:show-close="false"
width="70%"
class="dialog-css"
:destroy-on-close="true"
>
<el-row style="width: 400px;">
<el-form ref="form" :model="table" label-width="80px" size="mini" class="form-item">
<el-form-item :label="$t('chart.view_name')">
<el-input v-model="chartName" size="mini" />
</el-form-item>
</el-form>
</el-row>
<span v-show="false">{{ sceneData }}</span>
<el-tree
:data="chartData"
node-key="id"
:expand-on-click-node="true"
class="tree-list"
highlight-current
@node-click="sceneClick"
>
<span slot-scope="{ node, data }" class="custom-tree-node-list father">
<span style="display: flex;flex: 1;width: 0;">
<span><svg-icon :icon-class="data.type" /></span>
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
</span>
<span v-if="hasDataPermission('manage',data.privileges)" class="child">
<span style="margin-left: 12px;" @click.stop>
<el-dropdown trigger="click" size="small" @command="clickMore">
<span class="el-dropdown-link">
<el-button
icon="el-icon-more"
type="text"
size="small"
/>
</span>
<el-dropdown-menu slot="dropdown">
<!-- <el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('renameChart',data,node)">-->
<!-- {{ $t('chart.rename') }}-->
<!-- </el-dropdown-item>-->
<el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('deleteChart',data,node)">
{{ $t('chart.delete') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</span>
</span>
</el-tree>
<!--rename chart-->
<el-dialog v-dialogDrag :title="$t('chart.chart')" :visible="editTable" :show-close="false" width="30%">
<el-form ref="tableForm" :model="tableForm" :rules="tableFormRules" @keyup.enter.native="saveTable(tableForm)">
<el-form-item :label="$t('commons.name')" prop="name">
<el-input v-model="tableForm.name" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeTable()">{{ $t('chart.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="saveTable(tableForm)">{{ $t('chart.confirm') }}</el-button>
</div>
</el-dialog>
<!--添加视图-选择数据集-->
<el-dialog
v-dialogDrag
:title="$t('chart.add_chart')"
:visible="selectTableFlag"
:show-close="false"
width="70%"
class="dialog-css"
:destroy-on-close="true"
>
<el-row style="width: 400px;">
<el-form ref="form" :model="table" label-width="80px" size="mini" class="form-item">
<el-form-item :label="$t('chart.view_name')">
<el-input v-model="chartName" size="mini" />
</el-form-item>
</el-form>
</el-row>
<table-selector @getTable="getTable" />
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeCreateChart">{{ $t('chart.cancel') }}</el-button>
<el-button type="primary" size="mini" :disabled="!table.id" @click="createChart">{{ $t('chart.confirm') }}</el-button>
</div>
</el-dialog>
</el-col>
<table-selector @getTable="getTable" />
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeCreateChart">{{ $t('chart.cancel') }}</el-button>
<el-button type="primary" size="mini" :disabled="!table.id" @click="createChart">{{ $t('chart.confirm') }}</el-button>
</div>
</el-dialog>
</el-col>
</template>
@ -240,6 +315,13 @@ import {
export default {
name: 'Group',
components: { TableSelector },
props: {
saveStatus: {
type: Object,
required: false,
default: null
}
},
data() {
return {
sceneMode: false,
@ -278,14 +360,19 @@ export default {
selectTableFlag: false,
table: {},
tables: [],
chartName: this.$t('chart.chartName')
chartName: this.$t('chart.chartName'),
treeProps: {
label: 'name',
children: 'children',
isLeaf: 'isLeaf'
}
}
},
computed: {
sceneData: function() {
this.reviewChartList()
return this.$store.state.chart.chartSceneData
}
// sceneData: function() {
// this.reviewChartList()
// return this.$store.state.chart.chartSceneData
// }
},
watch: {
search(val) {
@ -294,18 +381,26 @@ export default {
} else {
this.chartData = JSON.parse(JSON.stringify(this.tables))
}
},
saveStatus() {
this.refreshNodeBy(this.saveStatus.sceneId)
}
},
mounted() {
this.groupTree(this.groupForm)
this.treeNode(this.groupForm)
this.refresh()
this.chartTree()
// this.chartTree()
},
methods: {
clickAdd(param) {
this.add(param.type)
this.groupForm.pid = param.data.id
this.groupForm.level = param.data.level + 1
this.currGroup = param.data
if (param.type === 'group') {
this.add(param.type)
this.groupForm.pid = param.data.id
this.groupForm.level = param.data.level + 1
} else {
this.selectTable()
}
},
beforeClickAdd(type, data, node) {
@ -369,7 +464,7 @@ export default {
type: 'success',
showClose: true
})
this.groupTree(this.groupForm)
this.treeNode(this.groupForm)
})
} else {
// this.$message({
@ -392,7 +487,8 @@ export default {
type: 'success',
showClose: true
})
this.chartTree()
// this.chartTree()
this.refreshNodeBy(view.sceneId)
// this.$router.push('/chart/home')
this.$emit('switchComponent', { name: '' })
this.$store.dispatch('chart/setTable', null)
@ -420,7 +516,7 @@ export default {
message: this.$t('chart.delete_success'),
showClose: true
})
this.groupTree(this.groupForm)
this.treeNode(this.groupForm)
})
}).catch(() => {
})
@ -438,7 +534,8 @@ export default {
message: this.$t('chart.delete_success'),
showClose: true
})
this.chartTree()
// this.chartTree()
this.refreshNodeBy(data.sceneId)
// this.$router.push('/chart/home')
this.$emit('switchComponent', { name: '' })
this.$store.dispatch('chart/setTable', null)
@ -473,6 +570,12 @@ export default {
})
},
treeNode(group) {
post('/chart/group/treeNode', group).then(res => {
this.data = res.data
})
},
chartTree() {
this.tables = []
this.chartData = []
@ -488,12 +591,15 @@ export default {
},
nodeClick(data, node) {
if (data.type === 'scene') {
this.sceneMode = true
this.currGroup = data
this.$store.dispatch('chart/setSceneId', this.currGroup.id)
this.chartTree()
if (data.type !== 'group') {
this.$emit('switchComponent', { name: 'ChartEdit', param: { 'id': data.id }})
}
// if (data.type === 'scene') {
// this.sceneMode = true
// this.currGroup = data
// this.$store.dispatch('chart/setSceneId', this.currGroup.id)
// this.chartTree()
// }
// if (node.expanded) {
// this.expandedArray.push(data.id)
// } else {
@ -516,15 +622,6 @@ export default {
}
},
addDB() {
this.$router.push({
name: 'add_db',
params: {
scene: this.currGroup
}
})
},
sceneClick(data, node) {
// this.$store.dispatch('chart/setViewId', null)
// this.$store.dispatch('chart/setViewId', data.id)
@ -598,7 +695,8 @@ export default {
// this.$router.push('/chart/chart-edit')
this.$emit('switchComponent', { name: 'ChartEdit', param: { 'id': response.data.id }})
// this.$store.dispatch('chart/setViewId', response.data.id)
this.chartTree()
// this.chartTree()
this.refreshNodeBy(view.sceneId)
})
},
@ -626,6 +724,35 @@ export default {
if (data.id) {
this.expandedArray.splice(this.expandedArray.indexOf(data.id), 1)
}
},
loadNode(node, resolve) {
// if (!this.isTreeSearch) {
if (node.level > 0) {
this.tables = []
this.chartData = []
if (node.data.id) {
post('/chart/view/listAndGroup', {
sort: 'name asc,create_time desc',
sceneId: node.data.id
}).then(response => {
this.tables = response.data
this.chartData = JSON.parse(JSON.stringify(this.tables))
resolve(this.chartData)
})
}
}
// }
},
refreshNodeBy(id) {
if (!id || id === '0') {
this.treeNode(this.groupForm)
} else {
const node = this.$refs.asyncTree.getNode(id) // 通过节点id找到对应树节点对象
node.loaded = false
node.expand() // 主动调用展开节点方法，重新查询该节点下的所有子节点
}
}
}
}

10
frontend/src/views/chart/index.vue
View File

@ -2,12 +2,12 @@
<de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]" style="background-color: #f7f8fa">
<de-aside-container>
<group @switchComponent="switchComponent" />
<group :save-status="saveStatus" @switchComponent="switchComponent" />
</de-aside-container>
<de-main-container>
<!-- <router-view />-->
<component :is="component" :param="param" @switchComponent="switchComponent" />
<component :is="component" :param="param" @switchComponent="switchComponent" @saveSuccess="saveSuccess" />
</de-main-container>
</de-container>
</template>
@ -28,7 +28,8 @@ export default {
data() {
return {
component: ChartHome,
param: {}
param: {},
saveStatus: null
}
},
mounted() {
@ -45,6 +46,9 @@ export default {
this.component = ChartHome
break
}
},
saveSuccess(val) {
this.saveStatus = val
}
}
}

17
frontend/src/views/chart/view/ChartEdit.vue
View File

@ -98,7 +98,7 @@
<el-radio-group
v-model="view.type"
style="width: 100%"
@change="save(true,'chart')"
@change="save(true,'chart',true)"
>
<div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
<el-radio value="table-normal" label="table-normal">
@ -481,7 +481,7 @@ export default {
return true
})
},
save(getData, trigger) {
save(getData, trigger, needRefreshGroup = false) {
const view = JSON.parse(JSON.stringify(this.view))
view.id = this.view.id
view.sceneId = this.view.sceneId
@ -549,8 +549,11 @@ export default {
this.getChart(response.data.id)
}
this.$store.dispatch('chart/setChartSceneData', null)
this.$store.dispatch('chart/setChartSceneData', response.data)
// this.$store.dispatch('chart/setChartSceneData', null)
// this.$store.dispatch('chart/setChartSceneData', response.data)
if (needRefreshGroup) {
this.refreshGroup(view)
}
})
},
@ -797,7 +800,7 @@ export default {
onTextChange(val) {
this.view.customStyle.text = val
this.view.title = val.title
this.save()
this.save(false, '', true)
},
onLegendChange(val) {
@ -921,6 +924,10 @@ export default {
yAxis: [],
type: ''
}
},
refreshGroup(view) {
this.$emit('saveSuccess', view)
}
}
}

7
frontend/src/views/chart/view/TableSelector.vue
View File

@ -1,7 +1,7 @@
<template>
<de-container>
<de-aside-container>
<dataset-group-selector @getTable="getTable" />
<dataset-group-selector-tree @getTable="getTable" />
</de-aside-container>
<de-main-container>
@ -15,14 +15,15 @@ import DeMainContainer from '@/components/dataease/DeMainContainer'
import DeContainer from '@/components/dataease/DeContainer'
import DeAsideContainer from '@/components/dataease/DeAsideContainer'
import DatasetGroupSelector from '../../dataset/common/DatasetGroupSelector'
// import DatasetGroupSelector from '../../dataset/common/DatasetGroupSelector'
import DatasetGroupSelectorTree from '../../dataset/common/DatasetGroupSelectorTree'
import DatasetTableData from '../../dataset/common/DatasetTableData'
export default {
name: 'TableSelector',
components: {
DatasetTableData,
DeMainContainer, DeContainer, DeAsideContainer, DatasetGroupSelector
DeMainContainer, DeContainer, DeAsideContainer, DatasetGroupSelectorTree
},
data() {
return {

3
frontend/src/views/dataset/add/AddCustom.vue
View File

@ -208,7 +208,8 @@ export default {
info: '{"list":' + JSON.stringify(this.checkedList) + '}'
}
post('/dataset/table/update', table).then(response => {
this.$store.dispatch('dataset/setSceneData', new Date().getTime())
// this.$store.dispatch('dataset/setSceneData', new Date().getTime())
this.$emit('saveSuccess', table)
this.cancel()
})
},

3
frontend/src/views/dataset/add/AddDB.vue
View File

@ -141,7 +141,8 @@ export default {
})
})
post('/dataset/table/batchAdd', tables).then(response => {
this.$store.dispatch('dataset/setSceneData', new Date().getTime())
// this.$store.dispatch('dataset/setSceneData', new Date().getTime())
this.$emit('saveSuccess', tables[0])
this.cancel()
})
},

3
frontend/src/views/dataset/add/AddExcel.vue
View File

@ -202,7 +202,8 @@ export default {
}
}
post('/dataset/table/update', table).then(response => {
this.$store.dispatch('dataset/setSceneData', new Date().getTime())
// this.$store.dispatch('dataset/setSceneData', new Date().getTime())
this.$emit('saveSuccess', table)
this.cancel()
})
},

3
frontend/src/views/dataset/add/AddSQL.vue
View File

@ -265,7 +265,8 @@ export default {
info: JSON.stringify({ sql: this.sql })
}
post('/dataset/table/update', table).then(response => {
this.$store.dispatch('dataset/setSceneData', new Date().getTime())
// this.$store.dispatch('dataset/setSceneData', new Date().getTime())
this.$emit('saveSuccess', table)
this.cancel()
})
},

43
frontend/src/views/dataset/common/DatasetGroupSelector.vue
View File

@ -29,8 +29,10 @@
:default-expanded-keys="expandedArray"
:data="data"
node-key="id"
:expand-on-click-node="true"
:expand-on-click-node="false"
@node-click="nodeClick"
@node-expand="nodeExpand"
@node-collapse="nodeCollapse"
>
<span slot-scope="{ node, data }" class="custom-tree-node">
<span style="display: flex;flex: 1;width: 0;">
@ -234,7 +236,7 @@ export default {
if (this.currGroup) {
this.dsLoading = true
post('/dataset/table/list', {
sort: 'type asc,create_time desc,name asc',
sort: 'type asc,name asc,create_time desc',
sceneId: this.currGroup.id,
mode: this.mode < 0 ? null : this.mode,
typeFilter: this.customType ? this.customType : null
@ -258,19 +260,19 @@ export default {
},
nodeClick(data, node) {
if (data.type === 'scene') {
this.sceneMode = true
this.currGroup = data
this.tableTree()
}
if (node.expanded) {
this.expandedArray.push(data.id)
} else {
const index = this.expandedArray.indexOf(data.id)
if (index > -1) {
this.expandedArray.splice(index, 1)
}
}
// if (data.type === 'scene') {
this.sceneMode = true
this.currGroup = data
this.tableTree()
// }
// if (node.expanded) {
// this.expandedArray.push(data.id)
// } else {
// const index = this.expandedArray.indexOf(data.id)
// if (index > -1) {
// this.expandedArray.splice(index, 1)
// }
// }
// console.log(this.expandedArray);
},
@ -339,6 +341,17 @@ export default {
div1.style.setProperty('cursor', 'not-allowed')
div2.style.setProperty('pointer-events', 'none')
})
},
nodeExpand(data) {
if (data.id) {
this.expandedArray.push(data.id)
}
},
nodeCollapse(data) {
if (data.id) {
this.expandedArray.splice(this.expandedArray.indexOf(data.id), 1)
}
}
}
}

471
frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue Normal file
View File

@ -0,0 +1,471 @@
<template>
<el-col>
<!-- group -->
<el-col v-if="!sceneMode" v-loading="dsLoading">
<el-row class="title-css">
<span class="title-text">
{{ $t('dataset.datalist') }}
</span>
</el-row>
<el-divider />
<el-col class="custom-tree-container">
<div class="block">
<el-tree
:default-expanded-keys="expandedArray"
:data="data"
node-key="id"
:expand-on-click-node="true"
:load="loadNode"
lazy
:props="treeProps"
highlight-current
@node-click="nodeClick"
@node-expand="nodeExpand"
@node-collapse="nodeCollapse"
>
<span v-if="data.type === 'group'" slot-scope="{ node, data }" class="custom-tree-node">
<span style="display: flex;flex: 1;width: 0;">
<span v-if="data.type === 'scene'">
<!-- <el-button-->
<!-- icon="el-icon-folder-opened"-->
<!-- type="text"-->
<!-- size="mini"-->
<!-- />-->
<svg-icon icon-class="scene" class="ds-icon-scene" />
</span>
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
</span>
</span>
<span v-else slot-scope="{ node, data }" class="custom-tree-node-list">
<span :id="data.id" style="display: flex;flex: 1;width: 0;">
<span>
<svg-icon v-if="data.type === 'db'" icon-class="ds-db" class="ds-icon-db" />
<svg-icon v-if="data.type === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />
<svg-icon v-if="data.type === 'excel'" icon-class="ds-excel" class="ds-icon-excel" />
<svg-icon v-if="data.type === 'custom'" icon-class="ds-custom" class="ds-icon-custom" />
</span>
<span v-if="data.type === 'db' || data.type === 'sql'">
<span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span>
<span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-alarm-clock" /></span>
</span>
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
</span>
</span>
</el-tree>
</div>
</el-col>
</el-col>
<!--scene-->
<!-- <el-col v-if="sceneMode" v-loading="dsLoading">-->
<!-- <el-row class="title-css scene-title">-->
<!-- <span class="title-text scene-title-name" :title="currGroup.name">-->
<!-- {{ currGroup.name }}-->
<!-- </span>-->
<!-- <el-button icon="el-icon-back" size="mini" style="float: right" circle @click="back">-->
<!-- &lt;!&ndash; {{ $t('dataset.back') }}&ndash;&gt;-->
<!-- </el-button>-->
<!-- </el-row>-->
<!-- <el-divider />-->
<!-- <el-row>-->
<!-- <el-form>-->
<!-- <el-form-item class="form-item">-->
<!-- <el-input-->
<!-- v-model="search"-->
<!-- size="mini"-->
<!-- :placeholder="$t('dataset.search')"-->
<!-- prefix-icon="el-icon-search"-->
<!-- clearable-->
<!-- />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- </el-row>-->
<!-- <el-tree-->
<!-- :data="tableData"-->
<!-- node-key="id"-->
<!-- :expand-on-click-node="true"-->
<!-- class="tree-list"-->
<!-- highlight-current-->
<!-- @node-click="sceneClick"-->
<!-- >-->
<!-- <span slot-scope="{ node, data }" class="custom-tree-node-list">-->
<!-- <span :id="data.id" style="display: flex;flex: 1;width: 0;">-->
<!-- <span>-->
<!-- <svg-icon v-if="data.type === 'db'" icon-class="ds-db" class="ds-icon-db" />-->
<!-- <svg-icon v-if="data.type === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />-->
<!-- <svg-icon v-if="data.type === 'excel'" icon-class="ds-excel" class="ds-icon-excel" />-->
<!-- <svg-icon v-if="data.type === 'custom'" icon-class="ds-custom" class="ds-icon-custom" />-->
<!-- </span>-->
<!-- <span v-if="data.type === 'db' || data.type === 'sql'">-->
<!-- <span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span>-->
<!-- <span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-alarm-clock" /></span>-->
<!-- </span>-->
<!-- <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>-->
<!-- </span>-->
<!-- </span>-->
<!-- </el-tree>-->
<!-- </el-col>-->
</el-col>
</template>
<script>
import { isKettleRunning, post } from '@/api/dataset/dataset'
export default {
name: 'DatasetGroupSelector',
props: {
customType: {
type: Array,
required: false,
default: null
},
mode: {
type: Number,
required: false,
default: -1
},
unionData: {
type: Array,
required: false,
default: null
},
checkedList: {
type: Array,
required: false,
default: null
},
table: {
type: Object,
required: false,
default: null
},
showMode: {
type: String,
required: false,
default: null
}
},
data() {
return {
kettleRunning: false,
sceneMode: false,
search: '',
data: [],
tableData: [],
tables: [],
currGroup: null,
expandedArray: [],
groupForm: {
name: '',
pid: '0',
level: 0,
type: '',
children: [],
sort: 'type desc,name asc'
},
tableForm: {
name: '',
sort: 'type asc,create_time desc,name asc'
},
dsLoading: false,
treeProps: {
label: 'name',
children: 'children',
isLeaf: 'isLeaf'
}
}
},
computed: {},
watch: {
'unionData': function() {
this.unionDataChange()
},
'table': function() {
if (this.table && this.table.sceneId) {
post('dataset/group/getScene/' + this.table.sceneId, {}, false).then(response => {
this.currGroup = response.data
this.$nextTick(function() {
this.sceneMode = true
this.tableTree()
})
})
}
},
search(val) {
if (val && val !== '') {
this.tableData = JSON.parse(JSON.stringify(this.tables.filter(ele => { return ele.name.includes(val) })))
} else {
this.tableData = JSON.parse(JSON.stringify(this.tables))
}
}
},
mounted() {
this.treeNode(this.groupForm)
// this.tableTree()
},
created() {
this.kettleState()
},
methods: {
kettleState() {
isKettleRunning(false).then(res => {
this.kettleRunning = res.data
})
},
close() {
this.editGroup = false
this.groupForm = {
name: '',
pid: '0',
level: 0,
type: '',
children: [],
sort: 'type desc,name asc'
}
},
closeTable() {
this.editTable = false
this.tableForm = {
name: ''
}
},
// tree(group) {
// this.dsLoading = true
// post('/dataset/group/tree', group, false).then(response => {
// this.data = response.data
// this.dsLoading = false
// })
// },
treeNode(group) {
post('/dataset/group/treeNode', group).then(res => {
this.data = res.data
this.dsLoading = false
})
},
tableTree() {
this.tableData = []
if (this.currGroup) {
this.dsLoading = true
post('/dataset/table/list', {
sort: 'type asc,name asc,create_time desc',
sceneId: this.currGroup.id,
mode: this.mode < 0 ? null : this.mode,
typeFilter: this.customType ? this.customType : null
}, false).then(response => {
this.tables = response.data
for (let i = 0; i < this.tables.length; i++) {
if (this.tables[i].mode === 1 && this.kettleRunning === false) {
this.$set(this.tables[i], 'disabled', true)
}
}
this.tableData = JSON.parse(JSON.stringify(this.tables))
this.$nextTick(function() {
this.unionDataChange()
})
this.dsLoading = false
}).catch(res => {
this.dsLoading = false
})
}
},
nodeClick(data, node) {
if (data.type !== 'group') {
this.sceneClick(data, node)
}
// if (data.type === 'scene') {
// this.sceneMode = true
// this.currGroup = data
// this.tableTree()
// }
// if (node.expanded) {
// this.expandedArray.push(data.id)
// } else {
// const index = this.expandedArray.indexOf(data.id)
// if (index > -1) {
// this.expandedArray.splice(index, 1)
// }
// }
// console.log(this.expandedArray);
},
back() {
this.sceneMode = false
},
sceneClick(data, node) {
if (data.disabled) {
this.$message({
type: 'warning',
message: this.$t('dataset.invalid_dataset'),
showClose: true
})
return
}
// check mode=1的数据集是否创建doris表
if (data.mode === 1 && !this.showMode) {
post('/dataset/table/checkDorisTableIsExists/' + data.id, {}, false).then(response => {
if (response.data) {
this.$nextTick(function() {
this.$emit('getTable', data)
})
} else {
this.$message({
type: 'error',
message: this.$t('dataset.invalid_table_check'),
showClose: true
})
}
})
} else {
this.$emit('getTable', data)
}
},
unionDataChange() {
if (!this.sceneMode) {
return
}
if (!this.checkedList || this.checkedList.length === 0) {
this.tableData.forEach(ele => {
const span = document.getElementById(ele.id).parentNode
const div1 = span.parentNode
const div2 = div1.parentNode
span.style.removeProperty('color')
div1.style.removeProperty('cursor')
div2.style.removeProperty('pointer-events')
})
return
}
const tableList = this.tableData.map(ele => {
return ele.id
})
const unionList = this.unionData.map(ele => {
return ele.targetTableId
})
unionList.push(this.checkedList[0].tableId)
const notUnionList = tableList.concat(unionList).filter(v => tableList.includes(v) && !unionList.includes(v))
notUnionList.forEach(ele => {
const span = document.getElementById(ele).parentNode
const div1 = span.parentNode
const div2 = div1.parentNode
span.style.setProperty('color', '#c0c4cc')
div1.style.setProperty('cursor', 'not-allowed')
div2.style.setProperty('pointer-events', 'none')
})
},
nodeExpand(data) {
if (data.id) {
this.expandedArray.push(data.id)
}
},
nodeCollapse(data) {
if (data.id) {
this.expandedArray.splice(this.expandedArray.indexOf(data.id), 1)
}
},
loadNode(node, resolve) {
if (node.data.id) {
this.dsLoading = true
post('/dataset/table/listAndGroup', {
sort: 'type asc,name asc,create_time desc',
sceneId: node.data.id,
mode: this.mode < 0 ? null : this.mode,
typeFilter: this.customType ? this.customType : null
}, false).then(response => {
this.tables = response.data
for (let i = 0; i < this.tables.length; i++) {
if (this.tables[i].mode === 1 && this.kettleRunning === false) {
this.$set(this.tables[i], 'disabled', true)
}
}
this.tableData = JSON.parse(JSON.stringify(this.tables))
this.$nextTick(function() {
this.unionDataChange()
})
this.dsLoading = false
resolve(this.tableData)
}).catch(res => {
this.dsLoading = false
})
}
// }
}
}
}
</script>
<style scoped>
.el-divider--horizontal {
margin: 12px 0
}
.search-input {
padding: 12px 0;
}
.tree-list>>>.el-tree-node__expand-icon.is-leaf{
display: none;
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
.custom-tree-node-list {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding:0 8px;
}
.custom-position {
flex: 1;
display: flex;
align-items: center;
font-size: 14px;
flex-flow: row nowrap;
}
.form-item {
margin-bottom: 0;
}
.title-css {
height: 26px;
}
.title-text {
line-height: 26px;
}
.scene-title{
width: 100%;
display: flex;
}
.scene-title-name{
width: 100%;
overflow: hidden;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>

2
frontend/src/views/dataset/group/DsMoveSelector.vue
View File

@ -38,7 +38,7 @@ export default {
name: '',
pid: '0',
level: 0,
type: '',
type: 'group',
children: [],
sort: 'type desc,name asc'
},

543
frontend/src/views/dataset/group/Group.vue
View File

@ -1,4 +1,4 @@
<template xmlns:el-col="http://www.w3.org/1999/html">
<template>
<el-col>
<!-- group -->
<el-col v-if="!sceneMode">
@ -6,17 +6,20 @@
<span class="title-text">
{{ $t('dataset.datalist') }}
</span>
<el-button icon="el-icon-plus" type="text" size="mini" style="float: right;" @click="add('group')">
<!-- {{ $t('dataset.add_group') }}-->
</el-button>
</el-row>
<el-divider />
<el-row>
<el-button type="primary" size="mini" @click="add('group')">
{{ $t('dataset.add_group') }}
</el-button>
<el-button type="primary" size="mini" @click="add('scene')">
{{ $t('dataset.add_scene') }}
</el-button>
</el-row>
<!-- <el-row>-->
<!-- <el-button type="primary" size="mini" @click="add('group')">-->
<!-- {{ $t('dataset.add_group') }}-->
<!-- </el-button>-->
<!-- <el-button type="primary" size="mini" @click="add('scene')">-->
<!-- {{ $t('dataset.add_scene') }}-->
<!-- </el-button>-->
<!-- </el-row>-->
<!-- <el-row>-->
<!-- <el-form>-->
@ -35,24 +38,29 @@
<el-col class="custom-tree-container">
<div class="block">
<el-tree
ref="asyncTree"
:default-expanded-keys="expandedArray"
:data="tData"
node-key="id"
:expand-on-click-node="true"
:load="loadNode"
lazy
:props="treeProps"
highlight-current
@node-click="nodeClick"
@node-expand="nodeExpand"
@node-collapse="nodeCollapse"
>
<span slot-scope="{ node, data }" class="custom-tree-node father">
<span v-if="data.type === 'group'" slot-scope="{ node, data }" class="custom-tree-node father">
<span style="display: flex;flex: 1;width: 0;">
<span v-if="data.type === 'scene'">
<!-- <el-button-->
<!-- icon="el-icon-folder-opened"-->
<!-- type="text"-->
<!-- size="mini"-->
<!-- />-->
<svg-icon icon-class="scene" class="ds-icon-scene" />
</span>
<!-- <span v-if="data.type === 'scene'">-->
<!-- &lt;!&ndash; <el-button&ndash;&gt;-->
<!-- &lt;!&ndash; icon="el-icon-folder-opened"&ndash;&gt;-->
<!-- &lt;!&ndash; type="text"&ndash;&gt;-->
<!-- &lt;!&ndash; size="mini"&ndash;&gt;-->
<!-- &lt;!&ndash; />&ndash;&gt;-->
<!-- <svg-icon icon-class="scene" class="ds-icon-scene" />-->
<!-- </span>-->
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
</span>
<span v-if="hasDataPermission('manage',data.privileges)" class="child">
@ -67,10 +75,40 @@
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-circle-plus" :command="beforeClickAdd('group',data,node)">
{{ $t('dataset.group') }}
<span style="font-size: 13px;">{{ $t('dataset.group') }}</span>
</el-dropdown-item>
<el-dropdown-item icon="el-icon-folder-add" :command="beforeClickAdd('scene',data,node)">
{{ $t('dataset.scene') }}
<el-dropdown-item icon="el-icon-folder-add">
<!-- {{ $t('dataset.scene') }}-->
<el-dropdown size="small" placement="right-start" @command="clickAddData">
<!-- <el-button type="primary" size="mini" plain>-->
<!-- {{ $t('dataset.add_table') }}-->
<!-- </el-button>-->
<span class="el-dropdown-link inner-dropdown-menu">
<span>
<!-- <i class="el-icon-sort" />-->
<span style="font-size: 13px;">{{ $t('dataset.add_table') }}</span>
</span>
<i class="el-icon-arrow-right el-icon--right" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="beforeClickAddData('db',data)">
<svg-icon icon-class="ds-db" class="ds-icon-db" />
{{ $t('dataset.db_data') }}
</el-dropdown-item>
<el-dropdown-item :command="beforeClickAddData('sql',data)">
<svg-icon icon-class="ds-sql" class="ds-icon-sql" />
{{ $t('dataset.sql_data') }}
</el-dropdown-item>
<el-dropdown-item :command="beforeClickAddData('excel',data)">
<svg-icon icon-class="ds-excel" class="ds-icon-excel" />
{{ $t('dataset.excel_data') }}
</el-dropdown-item>
<el-dropdown-item :command="beforeClickAddData('custom',data)">
<svg-icon icon-class="ds-custom" class="ds-icon-custom" />
{{ $t('dataset.custom_data') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
@ -99,6 +137,45 @@
</span>
</span>
</span>
<span v-else slot-scope="{ node, data }" class="custom-tree-node-list father">
<span style="display: flex;flex: 1;width: 0;">
<span>
<svg-icon v-if="data.type === 'db'" icon-class="ds-db" class="ds-icon-db" />
<svg-icon v-if="data.type === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />
<svg-icon v-if="data.type === 'excel'" icon-class="ds-excel" class="ds-icon-excel" />
<svg-icon v-if="data.type === 'custom'" icon-class="ds-custom" class="ds-icon-custom" />
</span>
<span v-if="data.type === 'db' || data.type === 'sql'">
<span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span>
<span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-alarm-clock" /></span>
</span>
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
</span>
<span v-if="hasDataPermission('manage',data.privileges)" class="child">
<span style="margin-left: 12px;" @click.stop>
<el-dropdown trigger="click" size="small" @command="clickMore">
<span class="el-dropdown-link">
<el-button
icon="el-icon-more"
type="text"
size="small"
/>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('editTable',data,node)">
{{ $t('dataset.rename') }}
</el-dropdown-item>
<el-dropdown-item icon="el-icon-right" :command="beforeClickMore('moveDs',data,node)">
{{ $t('dataset.move_to') }}
</el-dropdown-item>
<el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('deleteTable',data,node)">
{{ $t('dataset.delete') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</span>
</span>
</el-tree>
</div>
</el-col>
@ -118,128 +195,127 @@
</el-col>
<!--scene-->
<el-col v-if="sceneMode">
<el-row class="title-css scene-title">
<span class="title-text scene-title-name" :title="currGroup.name">
{{ currGroup.name }}
</span>
<el-button icon="el-icon-back" size="mini" style="float: right" circle @click="back">
<!-- {{ $t('dataset.back') }}-->
</el-button>
</el-row>
<el-divider />
<el-row>
<el-dropdown style="margin-right: 10px;" size="small" trigger="click" @command="clickAddData">
<el-button type="primary" size="mini" plain>
{{ $t('dataset.add_table') }}
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="beforeClickAddData('db')">
<svg-icon icon-class="ds-db" class="ds-icon-db" />
{{ $t('dataset.db_data') }}
</el-dropdown-item>
<el-dropdown-item :command="beforeClickAddData('sql')">
<svg-icon icon-class="ds-sql" class="ds-icon-sql" />
{{ $t('dataset.sql_data') }}
</el-dropdown-item>
<el-dropdown-item :command="beforeClickAddData('excel')">
<svg-icon icon-class="ds-excel" class="ds-icon-excel" />
{{ $t('dataset.excel_data') }}
</el-dropdown-item>
<el-dropdown-item :command="beforeClickAddData('custom')">
<svg-icon icon-class="ds-custom" class="ds-icon-custom" />
{{ $t('dataset.custom_data') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!-- <el-button type="primary" size="mini" plain>
{{ $t('dataset.update') }}
</el-button>
<el-button type="primary" size="mini" plain>
{{ $t('dataset.process') }}
</el-button> -->
</el-row>
<el-row>
<el-form>
<el-form-item class="form-item">
<el-input
v-model="search"
size="mini"
:placeholder="$t('dataset.search')"
prefix-icon="el-icon-search"
clearable
/>
</el-form-item>
</el-form>
</el-row>
<span v-show="false">{{ sceneData }}</span>
<el-tree
:data="tableData"
node-key="id"
:expand-on-click-node="true"
class="tree-list"
highlight-current
@node-click="sceneClick"
>
<span slot-scope="{ node, data }" class="custom-tree-node-list father">
<span style="display: flex;flex: 1;width: 0;">
<span>
<svg-icon v-if="data.type === 'db'" icon-class="ds-db" class="ds-icon-db" />
<svg-icon v-if="data.type === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />
<svg-icon v-if="data.type === 'excel'" icon-class="ds-excel" class="ds-icon-excel" />
<svg-icon v-if="data.type === 'custom'" icon-class="ds-custom" class="ds-icon-custom" />
</span>
<span v-if="data.type === 'db' || data.type === 'sql'">
<span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span>
<span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-alarm-clock" /></span>
</span>
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
</span>
<span v-if="hasDataPermission('manage',data.privileges)" class="child">
<span style="margin-left: 12px;" @click.stop>
<el-dropdown trigger="click" size="small" @command="clickMore">
<span class="el-dropdown-link">
<el-button
icon="el-icon-more"
type="text"
size="small"
/>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('editTable',data,node)">
{{ $t('dataset.rename') }}
</el-dropdown-item>
<el-dropdown-item icon="el-icon-right" :command="beforeClickMore('moveDs',data,node)">
{{ $t('dataset.move_to') }}
</el-dropdown-item>
<el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('deleteTable',data,node)">
{{ $t('dataset.delete') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</span>
</span>
</el-tree>
<!-- <el-col v-if="sceneMode">-->
<!-- <el-row class="title-css scene-title">-->
<!-- <span class="title-text scene-title-name" :title="currGroup.name">-->
<!-- {{ currGroup.name }}-->
<!-- </span>-->
<!-- <el-button icon="el-icon-back" size="mini" style="float: right" circle @click="back">-->
<!-- &lt;!&ndash; {{ $t('dataset.back') }}&ndash;&gt;-->
<!-- </el-button>-->
<!-- </el-row>-->
<!-- <el-divider />-->
<!-- <el-row>-->
<!-- <el-dropdown style="margin-right: 10px;" size="small" trigger="click" @command="clickAddData">-->
<!-- <el-button type="primary" size="mini" plain>-->
<!-- {{ $t('dataset.add_table') }}-->
<!-- </el-button>-->
<!-- <el-dropdown-menu slot="dropdown">-->
<!-- <el-dropdown-item :command="beforeClickAddData('db')">-->
<!-- <svg-icon icon-class="ds-db" class="ds-icon-db" />-->
<!-- {{ $t('dataset.db_data') }}-->
<!-- </el-dropdown-item>-->
<!-- <el-dropdown-item :command="beforeClickAddData('sql')">-->
<!-- <svg-icon icon-class="ds-sql" class="ds-icon-sql" />-->
<!-- {{ $t('dataset.sql_data') }}-->
<!-- </el-dropdown-item>-->
<!-- <el-dropdown-item :command="beforeClickAddData('excel')">-->
<!-- <svg-icon icon-class="ds-excel" class="ds-icon-excel" />-->
<!-- {{ $t('dataset.excel_data') }}-->
<!-- </el-dropdown-item>-->
<!-- <el-dropdown-item :command="beforeClickAddData('custom')">-->
<!-- <svg-icon icon-class="ds-custom" class="ds-icon-custom" />-->
<!-- {{ $t('dataset.custom_data') }}-->
<!-- </el-dropdown-item>-->
<!-- </el-dropdown-menu>-->
<!-- </el-dropdown>-->
<!-- &lt;!&ndash; <el-button type="primary" size="mini" plain>-->
<!-- {{ $t('dataset.update') }}-->
<!-- </el-button>-->
<!-- <el-button type="primary" size="mini" plain>-->
<!-- {{ $t('dataset.process') }}-->
<!-- </el-button> &ndash;&gt;-->
<!-- </el-row>-->
<!-- <el-row>-->
<!-- <el-form>-->
<!-- <el-form-item class="form-item">-->
<!-- <el-input-->
<!-- v-model="search"-->
<!-- size="mini"-->
<!-- :placeholder="$t('dataset.search')"-->
<!-- prefix-icon="el-icon-search"-->
<!-- clearable-->
<!-- />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- </el-row>-->
<!-- <span v-show="false">{{ sceneData }}</span>-->
<!-- <el-tree-->
<!-- :data="tableData"-->
<!-- node-key="id"-->
<!-- :expand-on-click-node="true"-->
<!-- class="tree-list"-->
<!-- highlight-current-->
<!-- @node-click="sceneClick"-->
<!-- >-->
<!-- <span slot-scope="{ node, data }" class="custom-tree-node-list father">-->
<!-- <span style="display: flex;flex: 1;width: 0;">-->
<!-- <span>-->
<!-- <svg-icon v-if="data.type === 'db'" icon-class="ds-db" class="ds-icon-db" />-->
<!-- <svg-icon v-if="data.type === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />-->
<!-- <svg-icon v-if="data.type === 'excel'" icon-class="ds-excel" class="ds-icon-excel" />-->
<!-- <svg-icon v-if="data.type === 'custom'" icon-class="ds-custom" class="ds-icon-custom" />-->
<!-- </span>-->
<!-- <span v-if="data.type === 'db' || data.type === 'sql'">-->
<!-- <span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span>-->
<!-- <span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-alarm-clock" /></span>-->
<!-- </span>-->
<!-- <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>-->
<!-- </span>-->
<!-- <span v-if="hasDataPermission('manage',data.privileges)" class="child">-->
<!-- <span style="margin-left: 12px;" @click.stop>-->
<!-- <el-dropdown trigger="click" size="small" @command="clickMore">-->
<!-- <span class="el-dropdown-link">-->
<!-- <el-button-->
<!-- icon="el-icon-more"-->
<!-- type="text"-->
<!-- size="small"-->
<!-- />-->
<!-- </span>-->
<!-- <el-dropdown-menu slot="dropdown">-->
<!-- <el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('editTable',data,node)">-->
<!-- {{ $t('dataset.rename') }}-->
<!-- </el-dropdown-item>-->
<!-- <el-dropdown-item icon="el-icon-right" :command="beforeClickMore('moveDs',data,node)">-->
<!-- {{ $t('dataset.move_to') }}-->
<!-- </el-dropdown-item>-->
<!-- <el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('deleteTable',data,node)">-->
<!-- {{ $t('dataset.delete') }}-->
<!-- </el-dropdown-item>-->
<!-- </el-dropdown-menu>-->
<!-- </el-dropdown>-->
<!-- </span>-->
<!-- </span>-->
<!-- </span>-->
<!-- </el-tree>-->
<!-- </el-col>-->
<el-dialog v-dialogDrag :title="$t('dataset.table')" :visible="editTable" :show-close="false" width="30%">
<el-form ref="tableForm" :model="tableForm" :rules="tableFormRules" @keyup.enter.native="saveTable(tableForm)">
<el-form-item :label="$t('commons.name')" prop="name">
<el-input v-model="tableForm.name" />
</el-form-item>
<!-- <el-form-item :label="$t('dataset.mode')" prop="mode">-->
<!-- <el-radio v-model="tableForm.mode" label="0">{{ $t('dataset.direct_connect') }}</el-radio>-->
<!-- <el-radio v-model="tableForm.mode" label="1">{{ $t('dataset.sync_data') }}</el-radio>-->
<!-- </el-form-item>-->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeTable()">{{ $t('dataset.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="saveTable(tableForm)">{{ $t('dataset.confirm') }}
</el-button>
</div>
</el-dialog>
</el-col>
<el-dialog v-dialogDrag :title="$t('dataset.table')" :visible="editTable" :show-close="false" width="30%">
<el-form ref="tableForm" :model="tableForm" :rules="tableFormRules" @keyup.enter.native="saveTable(tableForm)">
<el-form-item :label="$t('commons.name')" prop="name">
<el-input v-model="tableForm.name" />
</el-form-item>
<!-- <el-form-item :label="$t('dataset.mode')" prop="mode">-->
<!-- <el-radio v-model="tableForm.mode" label="0">{{ $t('dataset.direct_connect') }}</el-radio>-->
<!-- <el-radio v-model="tableForm.mode" label="1">{{ $t('dataset.sync_data') }}</el-radio>-->
<!-- </el-form-item>-->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeTable()">{{ $t('dataset.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="saveTable(tableForm)">{{ $t('dataset.confirm') }}
</el-button>
</div>
</el-dialog>
<!--移动分组、场景-->
<el-dialog v-dialogDrag :title="moveDialogTitle" :visible="moveGroup" :show-close="false" width="30%" class="dialog-css">
@ -264,13 +340,21 @@
</template>
<script>
import { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree } from '@/api/dataset/dataset'
import { loadTable, getScene, addGroup, delGroup, addTable, delTable, post } from '@/api/dataset/dataset'
import { authModel } from '@/api/system/sysAuth'
import GroupMoveSelector from './GroupMoveSelector'
import DsMoveSelector from './DsMoveSelector'
export default {
name: 'Group',
components: { GroupMoveSelector, DsMoveSelector },
props: {
saveStatus: {
type: Object,
required: false,
default: null
}
},
data() {
return {
sceneMode: false,
@ -322,28 +406,51 @@ export default {
tDs: {},
groupMoveConfirmDisabled: true,
dsMoveConfirmDisabled: true,
moveDialogTitle: ''
moveDialogTitle: '',
treeProps: {
label: 'name',
children: 'children',
isLeaf: 'isLeaf'
},
isTreeSearch: false
}
},
computed: {
sceneData: function() {
this.tableTree()
return this.$store.state.dataset.sceneData
}
// sceneData: function() {
// // this.tableTree()
// // console.log(this.$store.state.dataset.sceneData)
// this.refreshNodeBy(this.currGroup.id)
// return this.$store.state.dataset.sceneData
// }
},
watch: {
search(val) {
if (val && val !== '') {
this.tableData = JSON.parse(JSON.stringify(this.tables.filter(ele => { return ele.name.includes(val) })))
} else {
this.tableData = JSON.parse(JSON.stringify(this.tables))
// if (val && val !== '') {
// this.tableData = JSON.parse(JSON.stringify(this.tables.filter(ele => { return ele.name.includes(val) })))
// } else {
// this.tableData = JSON.parse(JSON.stringify(this.tables))
// }
if (this.timer) {
clearTimeout(this.timer)
}
this.timer = setTimeout(() => {
if (val) {
this.searchTree(val)
this.isTreeSearch = true
} else {
this.treeNode(this.groupForm)
this.isTreeSearch = false
}
}, 500)
},
saveStatus() {
this.refreshNodeBy(this.saveStatus.sceneId)
}
},
mounted() {
this.tree(this.groupForm)
this.treeNode(this.groupForm)
this.refresh()
this.tableTree()
// this.tableTree()
},
methods: {
clickAdd(param) {
@ -422,7 +529,8 @@ export default {
type: 'success',
showClose: true
})
this.tree(this.groupForm)
// this.tree(this.groupForm)
this.refreshNodeBy(group.pid)
})
} else {
// this.$message({
@ -448,7 +556,8 @@ export default {
type: 'success',
showClose: true
})
this.tableTree()
// this.tableTree()
this.refreshNodeBy(table.sceneId)
// this.$router.push('/dataset/home')
this.$emit('switchComponent', { name: '' })
this.$store.dispatch('dataset/setTable', null)
@ -476,7 +585,8 @@ export default {
message: this.$t('dataset.delete_success'),
showClose: true
})
this.tree(this.groupForm)
// this.tree(this.groupForm)
this.refreshNodeBy(data.pid)
})
}).catch(() => {
})
@ -494,7 +604,8 @@ export default {
message: this.$t('dataset.delete_success'),
showClose: true
})
this.tableTree()
// this.tableTree()
this.refreshNodeBy(data.sceneId)
// this.$router.push('/dataset/home')
this.$emit('switchComponent', { name: '' })
this.$store.dispatch('dataset/setTable', null)
@ -523,8 +634,14 @@ export default {
}
},
tree(group) {
groupTree(group).then(res => {
// tree(group) {
// groupTree(group).then(res => {
// this.tData = res.data
// })
// },
treeNode(group) {
post('/dataset/group/treeNode', group).then(res => {
this.tData = res.data
})
},
@ -546,10 +663,14 @@ export default {
nodeClick(data, node) {
// console.log(data);
// console.log(node);
if (data.type === 'scene') {
this.sceneMode = true
this.currGroup = data
this.$store.dispatch('dataset/setSceneData', this.currGroup.id)
// if (data.type === 'scene') {
// this.sceneMode = true
// this.currGroup = data
// this.$store.dispatch('dataset/setSceneData', this.currGroup.id)
// }
if (data.type !== 'group') {
this.$emit('switchComponent', { name: 'ViewTable', param: data.id })
}
// if (node.expanded) {
// this.expandedArray.push(data.id)
@ -569,6 +690,8 @@ export default {
clickAddData(param) {
// console.log(param);
this.currGroup = param.data
this.$store.dispatch('dataset/setSceneData', this.currGroup.id)
switch (param.type) {
case 'db':
this.addData('AddDB')
@ -585,9 +708,10 @@ export default {
}
},
beforeClickAddData(type) {
beforeClickAddData(type, data) {
return {
'type': type
'type': type,
'data': data
}
},
@ -640,7 +764,8 @@ export default {
this.groupForm.pid = this.tGroup.id
addGroup(this.groupForm).then(res => {
this.closeMoveGroup()
this.tree(this.groupForm)
// this.tree(this.groupForm)
this.refreshNodeBy(this.groupForm.pid)
})
},
targetGroup(val) {
@ -664,23 +789,90 @@ export default {
}
},
saveMoveDs() {
if (this.tDs && this.tDs.type === 'group') {
return
}
// if (this.tDs && this.tDs.type === 'group') {
// return
// }
this.dsForm.sceneId = this.tDs.id
this.dsForm.isRename = true
addTable(this.dsForm).then(res => {
this.closeMoveDs()
this.tableTree()
// this.tableTree()
this.refreshNodeBy(this.dsForm.sceneId)
})
},
targetDs(val) {
this.tDs = val
if (this.tDs.type === 'group') {
this.dsMoveConfirmDisabled = true
this.dsMoveConfirmDisabled = false
} else {
this.dsMoveConfirmDisabled = false
}
},
loadNode(node, resolve) {
if (!this.isTreeSearch) {
if (node.level > 0) {
this.tables = []
this.tableData = []
if (node.data.id) {
post('/dataset/table/listAndGroup', {
sort: 'type asc,name asc,create_time desc',
sceneId: node.data.id
}).then(res => {
this.tables = res.data
this.tableData = JSON.parse(JSON.stringify(this.tables))
resolve(this.tableData)
})
}
}
}
},
refreshNodeBy(id) {
if (!id || id === '0') {
this.treeNode(this.groupForm)
} else {
const node = this.$refs.asyncTree.getNode(id) // 通过节点id找到对应树节点对象
node.loaded = false
node.expand() // 主动调用展开节点方法，重新查询该节点下的所有子节点
}
},
searchTree(val) {
const queryCondition = {
withExtend: 'parent',
modelType: 'dataset',
name: val
}
authModel(queryCondition).then(res => {
debugger
this.tData = this.buildTree(res.data)
})
},
buildTree(arrs) {
const idMapping = arrs.reduce((acc, el, i) => {
acc[el[this.defaultProps.id]] = i
return acc
}, {})
const roots = []
arrs.forEach(el => {
// 判断根节点 ###
if (el[this.defaultProps.parentId] === null || el[this.defaultProps.parentId] === 0 || el[this.defaultProps.parentId] === '0') {
roots.push(el)
return
}
// 用映射表找到父元素
const parentEl = arrs[idMapping[el[this.defaultProps.parentId]]]
// 把当前元素添加到父元素的`children`数组中
parentEl.children = [...(parentEl.children || []), el]
// 设置展开节点 如果没有子节点则不进行展开
if (parentEl.children.length > 0) {
this.expandedKey.push(parentEl[this.defaultProps.id])
}
})
return roots
}
}
}
@ -762,4 +954,11 @@ export default {
.dialog-css >>> .el-dialog__body {
padding: 10px 20px 20px;
}
.inner-dropdown-menu{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%
}
</style>

11
frontend/src/views/dataset/index.vue
View File

@ -2,12 +2,12 @@
<de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
<de-aside-container>
<group @switchComponent="switchComponent" />
<group :save-status="saveStatus" @switchComponent="switchComponent" />
</de-aside-container>
<de-main-container>
<!--<router-view/>-->
<component :is="component" :param="param" @switchComponent="switchComponent" />
<component :is="component" :param="param" @switchComponent="switchComponent" @saveSuccess="saveSuccess" />
</de-main-container>
</de-container>
</template>
@ -33,7 +33,8 @@ export default {
data() {
return {
component: DataHome,
param: {}
param: {},
saveStatus: null
}
},
mounted() {
@ -65,6 +66,10 @@ export default {
this.component = DataHome
break
}
},
saveSuccess(val) {
this.saveStatus = val
}
}
}