feat(数据集):自助数据集测试

2021-05-10 15:22:36 +08:00 · 2021-05-10 15:22:36 +08:00 · 00850c5dd9
commit 00850c5dd9
parent 1eb4d7f24b
11 changed files with 463 additions and 100 deletions
--- a/backend/src/main/java/io/dataease/controller/dataset/DataSetTableController.java
+++ b/backend/src/main/java/io/dataease/controller/dataset/DataSetTableController.java
@ -73,6 +73,11 @@ public class DataSetTableController {
        return dataSetTableService.getSQLPreview(dataSetTableRequest);
    }

+    @PostMapping("customPreview")
+    public Map<String, Object> customPreview(@RequestBody DataSetTableRequest dataSetTableRequest) throws Exception {
+        return dataSetTableService.getCustomPreview(dataSetTableRequest);
+    }
+
    @PostMapping("incrementalConfig")
    public DatasetTableIncrementalConfig incrementalConfig(@RequestBody DatasetTableIncrementalConfig datasetTableIncrementalConfig) throws Exception {
        return dataSetTableService.incrementalConfig(datasetTableIncrementalConfig);
--- a/backend/src/main/java/io/dataease/dto/dataset/DataTableInfoCustomUnion.java
+++ b/backend/src/main/java/io/dataease/dto/dataset/DataTableInfoCustomUnion.java
@ -0,0 +1,17 @@
+package io.dataease.dto.dataset;
+
+import lombok.Getter;
+import lombok.Setter;
+
+import java.util.List;
+
+/**
+ * @Author gin
+ * @Date 2021/5/9 10:08 上午
+ */
+@Getter
+@Setter
+public class DataTableInfoCustomUnion {
+    private String tableId;
+    private List<String> checkedFields;
+}
--- a/backend/src/main/java/io/dataease/dto/dataset/DataTableInfoDTO.java
+++ b/backend/src/main/java/io/dataease/dto/dataset/DataTableInfoDTO.java
@ -3,6 +3,8 @@ package io.dataease.dto.dataset;
 import lombok.Getter;
 import lombok.Setter;

+import java.util.List;
+
 /**
 * @Author gin
 * @Date 2021/2/23 8:47 下午
@ -13,4 +15,5 @@ public class DataTableInfoDTO {
    private String table;
    private String sql;
    private String data;// file path
+    private List<DataTableInfoCustomUnion> list;
 }
--- a/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
+++ b/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
@ -15,6 +15,8 @@ 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.DataSetTableUnionDTO;
+import io.dataease.dto.dataset.DataTableInfoCustomUnion;
 import io.dataease.dto.dataset.DataTableInfoDTO;
 import org.apache.commons.collections4.CollectionUtils;
 import org.apache.commons.lang3.ObjectUtils;
@ -59,6 +61,8 @@ public class DataSetTableService {
    private ExtractDataService extractDataService;
    @Resource
    private DatasetTableIncrementalConfigMapper datasetTableIncrementalConfigMapper;
+    @Resource
+    private DataSetTableUnionService dataSetTableUnionService;
    @Value("${upload.file.path}")
    private String path;

@ -83,7 +87,7 @@ public class DataSetTableService {
            // 添加表成功后，获取当前表字段和类型，抽象到dataease数据库
            if (insert == 1) {
                saveTableField(datasetTable);
-                commonThreadPool.addTask(()->{
+                commonThreadPool.addTask(() -> {
                    extractDataService.extractData(datasetTable.getId(), null, "all_scope");
                });
            }
@ -115,6 +119,9 @@ public class DataSetTableService {
        if (StringUtils.isNotEmpty(dataSetTableRequest.getSceneId())) {
            criteria.andSceneIdEqualTo(dataSetTableRequest.getSceneId());
        }
+        if (ObjectUtils.isNotEmpty(dataSetTableRequest.getMode())) {
+            criteria.andModeEqualTo(dataSetTableRequest.getMode());
+        }
        if (StringUtils.isNotEmpty(dataSetTableRequest.getSort())) {
            datasetTableExample.setOrderByClause(dataSetTableRequest.getSort());
        }
@ -247,8 +254,8 @@ public class DataSetTableService {
                e.printStackTrace();
            }
        } else if (StringUtils.equalsIgnoreCase(datasetTable.getType(), "excel")) {
-            Datasource ds =  (Datasource) CommonBeanFactory.getBean("DorisDatasource");
-            JdbcProvider jdbcProvider = CommonBeanFactory.getBean(JdbcProvider.class);;
+            Datasource ds = (Datasource) CommonBeanFactory.getBean("DorisDatasource");
+            JdbcProvider jdbcProvider = CommonBeanFactory.getBean(JdbcProvider.class);
            DatasourceRequest datasourceRequest = new DatasourceRequest();
            datasourceRequest.setDatasource(ds);
            String table = DorisTableUtils.dorisName(dataSetTableRequest.getId());
@ -267,7 +274,25 @@ public class DataSetTableService {
                e.printStackTrace();
            }
        } else if (StringUtils.equalsIgnoreCase(datasetTable.getType(), "custom")) {
+            Datasource ds = (Datasource) CommonBeanFactory.getBean("DorisDatasource");
+            JdbcProvider jdbcProvider = CommonBeanFactory.getBean(JdbcProvider.class);
+            DatasourceRequest datasourceRequest = new DatasourceRequest();
+            datasourceRequest.setDatasource(ds);
+            String table = DorisTableUtils.dorisName(dataSetTableRequest.getId());
+            datasourceRequest.setQuery(createQuerySQL(ds.getType(), table, fieldArray) + " LIMIT " + (page - 1) * pageSize + "," + realSize);

+            try {
+                data.addAll(jdbcProvider.getData(datasourceRequest));
+            } catch (Exception e) {
+                e.printStackTrace();
+            }
+
+            try {
+                datasourceRequest.setQuery(createQueryCountSQL(ds.getType(), table));
+                dataSetPreviewPage.setTotal(Integer.valueOf(jdbcProvider.getData(datasourceRequest).get(0)[0]));
+            } catch (Exception e) {
+                e.printStackTrace();
+            }
        }

        List<Map<String, Object>> jsonArray = new ArrayList<>();
@ -319,6 +344,93 @@ public class DataSetTableService {
        return map;
    }

+    public Map<String, Object> getCustomPreview(DataSetTableRequest dataSetTableRequest) throws Exception {
+        Datasource ds = (Datasource) CommonBeanFactory.getBean("DorisDatasource");
+        JdbcProvider jdbcProvider = CommonBeanFactory.getBean(JdbcProvider.class);
+        DatasourceRequest datasourceRequest = new DatasourceRequest();
+        datasourceRequest.setDatasource(ds);
+//        String table = DorisTableUtils.dorisName(dataSetTableRequest.getId());
+
+        DataTableInfoDTO dataTableInfoDTO = new Gson().fromJson(dataSetTableRequest.getInfo(), DataTableInfoDTO.class);
+        List<DataSetTableUnionDTO> list = dataSetTableUnionService.listByTableId(dataTableInfoDTO.getList().get(0).getTableId());
+
+        datasourceRequest.setQuery(getCustomSQL(dataTableInfoDTO, list));
+        Map<String, List> result = jdbcProvider.fetchResultAndField(datasourceRequest);
+        List<String[]> data = result.get("dataList");
+        List<TableFiled> fields = result.get("fieldList");
+        String[] fieldArray = fields.stream().map(TableFiled::getFieldName).toArray(String[]::new);
+
+        List<Map<String, Object>> jsonArray = new ArrayList<>();
+        if (CollectionUtils.isNotEmpty(data)) {
+            jsonArray = data.stream().map(ele -> {
+                Map<String, Object> map = new HashMap<>();
+                for (int i = 0; i < ele.length; i++) {
+                    map.put(fieldArray[i], ele[i]);
+                }
+                return map;
+            }).collect(Collectors.toList());
+        }
+
+        Map<String, Object> map = new HashMap<>();
+        map.put("fields", fields);
+        map.put("data", jsonArray);
+
+        return map;
+    }
+
+    private String getCustomSQL(DataTableInfoDTO dataTableInfoDTO, List<DataSetTableUnionDTO> list) {
+        Map<String, String[]> customInfo = new HashMap<>();
+        dataTableInfoDTO.getList().forEach(ele -> {
+            String table = DorisTableUtils.dorisName(ele.getTableId());
+            List<DatasetTableField> fields = dataSetTableFieldsService.getListByIds(ele.getCheckedFields());
+            String[] array = fields.stream().map(f -> table + "." + f.getDataeaseName()).toArray(String[]::new);
+            customInfo.put(table, array);
+        });
+        DataTableInfoCustomUnion first = dataTableInfoDTO.getList().get(0);
+        if (CollectionUtils.isNotEmpty(list)) {
+            StringBuilder field = new StringBuilder();
+            Iterator<Map.Entry<String, String[]>> iterator = customInfo.entrySet().iterator();
+            while (iterator.hasNext()) {
+                Map.Entry<String, String[]> next = iterator.next();
+                field.append(StringUtils.join(next.getValue(), ",")).append(",");
+            }
+            String f = field.substring(0, field.length() - 1);
+
+            StringBuilder join = new StringBuilder();
+            for (DataTableInfoCustomUnion dataTableInfoCustomUnion : dataTableInfoDTO.getList()) {
+                for (DataSetTableUnionDTO dto : list) {
+                    // 被关联表和自助数据集的表相等
+                    if (StringUtils.equals(dto.getTargetTableId(), dataTableInfoCustomUnion.getTableId())) {
+                        DatasetTableField sourceField = dataSetTableFieldsService.get(dto.getSourceTableFieldId());
+                        DatasetTableField targetField = dataSetTableFieldsService.get(dto.getTargetTableFieldId());
+                        join.append(convertUnionTypeToSQL(dto.getSourceUnionRelation()))
+                                .append(DorisTableUtils.dorisName(dto.getTargetTableId()))
+                                .append(" ON ")
+                                .append(DorisTableUtils.dorisName(dto.getSourceTableId())).append(".").append(sourceField.getDataeaseName())
+                                .append(" = ")
+                                .append(DorisTableUtils.dorisName(dto.getTargetTableId())).append(".").append(targetField.getDataeaseName());
+                    }
+                }
+            }
+            return MessageFormat.format("SELECT {0} FROM {1}", f, DorisTableUtils.dorisName(first.getTableId())) + join.toString();
+        } else {
+            return MessageFormat.format("SELECT {0} FROM {1}", StringUtils.join(customInfo.get(DorisTableUtils.dorisName(first.getTableId())), ","), DorisTableUtils.dorisName(first.getTableId()));
+        }
+    }
+
+    private String convertUnionTypeToSQL(String unionType) {
+        switch (unionType) {
+            case "1:1":
+                return " INNER JOIN ";
+            case "1:N":
+                return " LEFT JOIN ";
+            case "N:1":
+                return " RIGHT JOIN ";
+            default:
+                return " INNER JOIN ";
+        }
+    }
+
    public void saveTableField(DatasetTable datasetTable) throws Exception {
        Datasource ds = datasourceMapper.selectByPrimaryKey(datasetTable.getDataSourceId());
        DataSetTableRequest dataSetTableRequest = new DataSetTableRequest();
@ -341,12 +453,26 @@ public class DataSetTableService {
            // save field
            Map<String, Object> map = parseExcel(path.substring(path.lastIndexOf("/") + 1), new FileInputStream(file), false);
            fields = (List<TableFiled>) map.get("fields");
-            List<Map<String, Object>> data = (List<Map<String, Object>>) map.get("data");
-            // save data
+//            List<Map<String, Object>> data = (List<Map<String, Object>>) map.get("data");
        } else if (StringUtils.equalsIgnoreCase(datasetTable.getType(), "custom")) {
            // save field
-
-            // save data
+            DataTableInfoDTO dataTableInfoDTO = new Gson().fromJson(dataSetTableRequest.getInfo(), DataTableInfoDTO.class);
+            List<DataTableInfoCustomUnion> list = dataTableInfoDTO.getList();
+            List<DatasetTableField> fieldList = new ArrayList<>();
+            list.forEach(ele -> {
+                List<DatasetTableField> listByIds = dataSetTableFieldsService.getListByIds(ele.getCheckedFields());
+                fieldList.addAll(listByIds);
+            });
+            for (int i = 0; i < fieldList.size(); i++) {
+                DatasetTableField datasetTableField = fieldList.get(i);
+                datasetTableField.setId(null);
+                datasetTableField.setTableId(datasetTable.getId());
+                datasetTableField.setColumnIndex(i);
+            }
+            dataSetTableFieldsService.batchEdit(fieldList);
+            // custom 创建doris视图
+            createDorisView(DorisTableUtils.dorisName(datasetTable.getId()), getCustomSQL(dataTableInfoDTO, dataSetTableUnionService.listByTableId(dataTableInfoDTO.getList().get(0).getTableId())));
+            return;
        }
        if (CollectionUtils.isNotEmpty(fields)) {
            for (int i = 0; i < fields.size(); i++) {
@ -355,9 +481,9 @@ public class DataSetTableService {
                datasetTableField.setTableId(datasetTable.getId());
                datasetTableField.setOriginName(filed.getFieldName());
                datasetTableField.setName(filed.getRemarks());
-                if(StringUtils.equalsIgnoreCase(datasetTable.getType(), "excel")){
+                if (StringUtils.equalsIgnoreCase(datasetTable.getType(), "excel")) {
                    datasetTableField.setDataeaseName("C_" + Md5Utils.md5(filed.getFieldName()));
-                }else {
+                } else {
                    datasetTableField.setDataeaseName(filed.getFieldName());
                }
                datasetTableField.setType(filed.getFieldType());
@ -375,6 +501,15 @@ public class DataSetTableService {
        }
    }

+    private void createDorisView(String dorisTableName, String customSql) throws Exception {
+        Datasource dorisDatasource = (Datasource) CommonBeanFactory.getBean("DorisDatasource");
+        JdbcProvider jdbcProvider = CommonBeanFactory.getBean(JdbcProvider.class);
+        DatasourceRequest datasourceRequest = new DatasourceRequest();
+        datasourceRequest.setDatasource(dorisDatasource);
+        datasourceRequest.setQuery("CREATE VIEW " + dorisTableName + " AS (" + customSql + ")");
+        jdbcProvider.exec(datasourceRequest);
+    }
+
    public String createQueryCountSQL(String type, String table) {
        DatasourceTypes datasourceType = DatasourceTypes.valueOf(type);
        switch (datasourceType) {
@ -480,7 +615,7 @@ public class DataSetTableService {


    public void saveIncrementalConfig(DatasetTableIncrementalConfig datasetTableIncrementalConfig) {
-        if(datasetTableIncrementalConfig == null || StringUtils.isEmpty(datasetTableIncrementalConfig.getTableId())){
+        if (datasetTableIncrementalConfig == null || StringUtils.isEmpty(datasetTableIncrementalConfig.getTableId())) {
            return;
        }
        if (StringUtils.isEmpty(datasetTableIncrementalConfig.getId())) {
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@ -811,7 +811,9 @@ export default {
    target_table: '被关联表',
    target_field: '被关联字段',
    union_relation: '关联关系',
-    pls_setting_union_success: '请正确设置关联关系'
+    pls_setting_union_success: '请正确设置关联关系',
+    check_all: '全选',
+    can_not_union_self: '被关联表不能与关联表相同'
  },
  datasource: {
    datasource: '数据源',
--- a/frontend/src/views/dataset/add/AddCustom.vue
+++ b/frontend/src/views/dataset/add/AddCustom.vue
@ -1,37 +1,48 @@
 <template>
  <el-col>
-    <el-row>
-      <el-row style="height: 26px;">
-        <span style="line-height: 26px;">
-          {{ $t('dataset.add_custom_table') }}
-        </span>
-        <el-row style="float: right">
-          <el-button size="mini" @click="cancel">
-            {{ $t('dataset.cancel') }}
-          </el-button>
-          <el-button size="mini" type="primary" :disabled="checkTableList.length < 1" @click="save">
-            {{ $t('dataset.confirm') }}
-          </el-button>
-        </el-row>
-      </el-row>
-      <el-divider />
-      <el-row>
-        <el-col>
-          自助数据集
-        </el-col>
-        <el-col>
-          TODO
-        </el-col>
+    <el-row style="height: 26px;">
+      <span style="line-height: 26px;">
+        {{ $t('dataset.add_custom_table') }}
+      </span>
+      <el-row style="float: right">
+        <el-button size="mini" @click="cancel">
+          {{ $t('dataset.cancel') }}
+        </el-button>
+        <el-button :disabled="!name || checkedList.length === 0" size="mini" type="primary" @click="save">
+          {{ $t('dataset.confirm') }}
+        </el-button>
      </el-row>
    </el-row>
+    <el-divider />
+    <el-row>
+      <el-form :inline="true">
+        <el-form-item class="form-item">
+          <el-input v-model="name" size="mini" :placeholder="$t('commons.name')" />
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <el-col style="display: flex;flex-direction: row">
+      <el-col class="panel-height" style="width: 220px;border-right:solid 1px #dcdfe6;padding-right: 15px;overflow-y: auto;">
+        <dataset-group-selector :mode="1" :checked-list="checkedList" :union-data="unionData" @getTable="getTable" />
+      </el-col>
+      <el-col class="panel-height" style="width: 235px;border-right:solid 1px #dcdfe6;padding: 0 15px;overflow-y: auto;">
+        <dataset-custom-field :table="table" :checked-list="checkedList" @getChecked="getChecked" />
+      </el-col>
+      <el-col class="panel-height" style="flex: 1;">
+        123
+      </el-col>
+    </el-col>
  </el-col>
 </template>

 <script>
 import { post } from '@/api/dataset/dataset'
+import DatasetGroupSelector from '../common/DatasetGroupSelector'
+import DatasetCustomField from '../common/DatasetCustomField'

 export default {
  name: 'AddCustom',
+  components: { DatasetCustomField, DatasetGroupSelector },
  props: {
    param: {
      type: Object,
@ -40,62 +51,85 @@ export default {
  },
  data() {
    return {
-      searchTable: '',
-      options: [],
-      dataSource: '',
-      tables: [],
-      checkTableList: [],
-      mode: '0',
-      tableData: []
+      name: '自助数据集',
+      table: {},
+      checkedList: [],
+      unionData: []
    }
  },
  watch: {
-    // dataSource(val) {
-    //   if (val) {
-    //     post('/datasource/getTables', { id: val }).then(response => {
-    //       this.tables = response.data
-    //       this.tableData = JSON.parse(JSON.stringify(this.tables))
-    //     })
-    //   }
-    // },
-    // searchTable(val) {
-    //   if (val && val !== '') {
-    //     this.tableData = JSON.parse(JSON.stringify(this.tables.filter(ele => { return ele.includes(val) })))
-    //   } else {
-    //     this.tableData = JSON.parse(JSON.stringify(this.tables))
-    //   }
-    // }
+    'checkedList': function() {
+      // console.log(this.checkedList)
+      if (this.checkedList && this.checkedList.length > 0) {
+        // 根据第一个选择的数据集找到关联视图
+        post('dataset/union/listByTableId/' + this.checkedList[0].tableId, {}).then(response => {
+          // console.log(response)
+          this.unionData = response.data
+        })
+      } else {
+        this.unionData = []
+      }
+    }
  },
  mounted() {
-    // this.initDataSource()
-  },
-  activated() {
-    // this.initDataSource()
  },
  methods: {
-    // initDataSource() {
-    //   listDatasource().then(response => {
-    //     this.options = response.data
-    //   })
-    // },
-
-    save() {
-      // console.log(this.checkTableList);
-      // console.log(this.scene);
-      const sceneId = this.param.id
-      const dataSourceId = this.dataSource
-      const tables = []
-      // const mode = this.mode
-      this.checkTableList.forEach(function(name) {
-        tables.push({
-          name: name,
-          sceneId: sceneId,
-          dataSourceId: dataSourceId,
-          type: 'excel',
-          mode: 1
+    getTable(table) {
+      // console.log(table)
+      this.table = table
+    },
+    getChecked(tableCheckedField) {
+      // console.log(tableCheckedField)
+      if (tableCheckedField.checkedFields && tableCheckedField.checkedFields.length > 0) {
+        if (!this.checkedList.some(ele => ele.tableId === tableCheckedField.tableId)) {
+          this.checkedList.push(tableCheckedField)
+        } else {
+          this.checkedList.forEach(ele => {
+            if (ele.tableId === tableCheckedField.tableId) {
+              ele.checkedFields = tableCheckedField.checkedFields
+            }
+          })
+        }
+      } else {
+        let index = -1
+        for (let i = 0; i < this.checkedList.length; i++) {
+          if (this.checkedList[i].tableId === tableCheckedField.tableId) {
+            index = i
+            break
+          }
+        }
+        if (index > -1) {
+          this.checkedList.splice(index, 1)
+        }
+      }
+      // console.log(this.checkedList)
+      // request to get data
+      if (this.checkedList.length > 0) {
+        const table = {
+          id: this.param.tableId,
+          name: this.name,
+          sceneId: this.param.id,
+          dataSourceId: null,
+          type: 'custom',
+          mode: 1,
+          info: '{"list":' + JSON.stringify(this.checkedList) + '}'
+        }
+        post('/dataset/table/customPreview', table).then(response => {
+          console.log(response)
        })
-      })
-      post('/dataset/table/batchAdd', tables).then(response => {
+      }
+    },
+    save() {
+      const table = {
+        id: this.param.tableId,
+        name: this.name,
+        sceneId: this.param.id,
+        dataSourceId: null,
+        type: 'custom',
+        mode: 1,
+        info: '{"list":' + JSON.stringify(this.checkedList) + '}'
+      }
+      post('/dataset/table/update', table).then(response => {
        this.$store.dispatch('dataset/setSceneData', new Date().getTime())
        this.cancel()
      })
@ -103,16 +137,11 @@ export default {

    cancel() {
      this.dataReset()
-      // this.$router.push('/dataset/home')
      this.$emit('switchComponent', { name: '' })
    },

    dataReset() {
-      this.searchTable = ''
-      this.options = []
-      this.dataSource = ''
-      this.tables = []
-      this.checkTableList = []
+
    }
  }

@ -141,4 +170,8 @@ export default {
  span{
    font-size: 14px;
  }
+
+  .panel-height{
+    height: calc(100vh - 56px - 15px - 26px - 25px - 43px);
+  }
 </style>
--- a/frontend/src/views/dataset/common/DatasetCustomField.vue
+++ b/frontend/src/views/dataset/common/DatasetCustomField.vue
@ -0,0 +1,102 @@
+<template>
+  <el-col>
+    <el-checkbox v-model="checkAll" :disabled="!(fields.length > 0)" :indeterminate="isIndeterminate" @change="handleCheckAllChange">{{ $t('dataset.check_all') }}</el-checkbox>
+    <el-checkbox-group v-model="checkedFields" @change="handleCheckedFieldsChange">
+      <el-checkbox v-for="f in fields" :key="f.id" :label="f.id" style="display: block;margin-top: 4px;width: 100%;">
+        <span style="display: flex;flex-direction: row;flex: 1;">
+          <span>
+            <span v-if="f.deType === 0">
+              <svg-icon v-if="f.deType === 0" icon-class="field_text" class="field-icon-text" />
+            </span>
+            <span v-if="f.deType === 1">
+              <svg-icon v-if="f.deType === 1" icon-class="field_time" class="field-icon-time" />
+            </span>
+            <span v-if="f.deType === 2 || f.deType === 3">
+              <svg-icon v-if="f.deType === 2 || f.deType === 3" icon-class="field_value" class="field-icon-value" />
+            </span>
+          </span>
+          <span style="display: flex;flex: 1;width: 100%;">
+            <span style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;width: 160px;">{{ f.name }}</span>
+          </span>
+        </span>
+      </el-checkbox>
+    </el-checkbox-group>
+  </el-col>
+</template>
+
+<script>
+import { fieldList } from '../../../api/dataset/dataset'
+
+export default {
+  name: 'DatasetCustomField',
+  props: {
+    table: {
+      type: Object,
+      required: true
+    },
+    checkedList: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      fields: [],
+      checkAll: false,
+      checkedFields: [],
+      isIndeterminate: false
+    }
+  },
+  watch: {
+    'table': function() {
+      fieldList(this.table.id).then(response => {
+        this.fields = response.data
+
+        this.checkedFields = []
+        this.checkedList.forEach(ele => {
+          if (ele.tableId === this.table.id) {
+            this.checkedFields = ele.checkedFields
+          }
+        })
+        const checkedCount = this.checkedFields.length
+        this.checkAll = checkedCount === this.fields.length
+        this.isIndeterminate = checkedCount > 0 && checkedCount < this.fields.length
+      })
+    }
+  },
+  mounted() {
+    this.initField()
+  },
+  methods: {
+    initField() {
+      if (this.table.id) {
+        fieldList(this.table.id).then(response => {
+          this.fields = response.data
+        })
+      }
+    },
+
+    handleCheckAllChange(val) {
+      this.checkedFields = val ? this.fields.map(ele => {
+        return ele.id
+      }) : []
+      this.isIndeterminate = false
+      this.getChecked()
+    },
+    handleCheckedFieldsChange(value) {
+      const checkedCount = value.length
+      this.checkAll = checkedCount === this.fields.length
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.fields.length
+      this.getChecked()
+    },
+
+    getChecked() {
+      this.$emit('getChecked', { tableId: this.table.id, checkedFields: this.checkedFields })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/frontend/src/views/dataset/common/DatasetGroupSelector.vue
+++ b/frontend/src/views/dataset/common/DatasetGroupSelector.vue
@ -83,7 +83,7 @@
        @node-click="sceneClick"
      >
        <span slot-scope="{ node, data }" class="custom-tree-node-list">
-          <span style="display: flex;flex: 1;width: 0;">
+          <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" />
@ -107,6 +107,23 @@ import { post } from '@/api/dataset/dataset'

 export default {
  name: 'DatasetGroupSelector',
+  props: {
+    mode: {
+      type: Number,
+      required: false,
+      default: -1
+    },
+    unionData: {
+      type: Array,
+      required: false,
+      default: null
+    },
+    checkedList: {
+      type: Array,
+      required: false,
+      default: null
+    }
+  },
  data() {
    return {
      sceneMode: false,
@ -132,10 +149,9 @@ export default {
  },
  computed: {},
  watch: {
-    // search(val){
-    //   this.groupForm.name = val;
-    //   this.tree(this.groupForm);
-    // }
+    'unionData': function() {
+      this.unionDataChange()
+    },
    search(val) {
      if (val && val !== '') {
        this.tableData = JSON.parse(JSON.stringify(this.tables.filter(ele => { return ele.name.includes(val) })))
@ -183,10 +199,15 @@ export default {
      if (this.currGroup) {
        post('/dataset/table/list', {
          sort: 'type asc,create_time desc,name asc',
-          sceneId: this.currGroup.id
+          sceneId: this.currGroup.id,
+          mode: this.mode < 0 ? null : this.mode
        }).then(response => {
          this.tables = response.data
          this.tableData = JSON.parse(JSON.stringify(this.tables))
+
+          this.$nextTick(function() {
+            this.unionDataChange()
+          })
        })
      }
    },
@ -217,6 +238,40 @@ export default {
    sceneClick(data, node) {
      // console.log(data);
      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')
+      })
    }
  }
 }
--- a/frontend/src/views/dataset/data/UnionView.vue
+++ b/frontend/src/views/dataset/data/UnionView.vue
@ -90,7 +90,7 @@
            width="500"
            trigger="click"
          >
-            <dataset-group-selector @getTable="getTable" />
+            <dataset-group-selector :mode="1" @getTable="getTable" />
            <el-button slot="reference" size="mini">{{ targetTable.name || $t('dataset.pls_slc_union_table') }}</el-button>
          </el-popover>

@ -169,10 +169,12 @@ export default {
  },
  methods: {
    initUnion() {
-      post('dataset/union/listByTableId/' + this.table.id, {}).then(response => {
-        // console.log(response)
-        this.unionData = response.data
-      })
+      if (this.table.id) {
+        post('dataset/union/listByTableId/' + this.table.id, {}).then(response => {
+          // console.log(response)
+          this.unionData = response.data
+        })
+      }
    },

    showUnionEdit() {
@ -183,7 +185,7 @@ export default {
      this.editUnion = true
    },
    saveUnion() {
-      console.log(this.union)
+      // console.log(this.union)
      if (!this.union.sourceTableFieldId || !this.union.sourceUnionRelation || !this.union.targetTableId || !this.union.targetTableFieldId) {
        this.$message({
          type: 'error',
@ -245,6 +247,14 @@ export default {
    },
    getTable(param) {
      // console.log(param)
+      if (param.id === this.table.id) {
+        this.$message({
+          type: 'error',
+          message: this.$t('dataset.can_not_union_self'),
+          showClose: true
+        })
+        return
+      }
      this.targetTable = param
      this.union.targetTableId = param.id
      this.union.targetTableFieldId = ''
--- a/frontend/src/views/dataset/data/ViewTable.vue
+++ b/frontend/src/views/dataset/data/ViewTable.vue
@ -31,7 +31,7 @@
      <el-tab-pane :label="$t('dataset.data_preview')" name="dataPreview">
        <tab-data-preview :table="table" :fields="fields" :data="data" :page="page" :form="tableViewRowForm" @reSearch="reSearch" />
      </el-tab-pane>
-      <el-tab-pane :label="$t('dataset.join_view')" name="joinView">
+      <el-tab-pane v-if="table.type !== 'custom'" :label="$t('dataset.join_view')" name="joinView">
        <union-view :table="table" />
      </el-tab-pane>
      <el-tab-pane v-if="table.mode === 1 && (table.type === 'db' || table.type === 'sql')" :label="$t('dataset.update_info')" name="updateInfo">
--- a/frontend/src/views/dataset/index.vue
+++ b/frontend/src/views/dataset/index.vue
@ -76,6 +76,7 @@ export default {

  .ms-main-container {
    height: calc(100vh - 56px);
+    padding: 15px 15px 0 15px;
  }

 </style>