feat(视图): 增加明细表

backend/src/main/java/io/dataease/provider/QueryProvider.java

@@ -38,6 +38,10 @@ public abstract class QueryProvider {
 
     public abstract String getSQLAsTmp(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList);
 
+    public abstract String getSQLTableInfo(String table, List<ChartViewFieldDTO> xAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, Datasource ds);
+
+    public abstract String getSQLAsTmpTableInfo(String sql, List<ChartViewFieldDTO> xAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, Datasource ds);
+
     public abstract String getSQLStack(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, List<ChartViewFieldDTO> extStack, Datasource ds);
 
     public abstract String getSQLAsTmpStack(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, List<ChartViewFieldDTO> extStack);

backend/src/main/java/io/dataease/provider/doris/DorisQueryProvider.java

@@ -281,6 +281,16 @@ public class DorisQueryProvider extends QueryProvider {
         return st.render();
     }
 
+    @Override
+    public String getSQLTableInfo(String table, List<ChartViewFieldDTO> xAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, Datasource ds) {
+        return null;
+    }
+
+    @Override
+    public String getSQLAsTmpTableInfo(String sql, List<ChartViewFieldDTO> xAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, Datasource ds) {
+        return null;
+    }
+
     @Override
     public String getSQLAsTmp(String sql, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList) {
         return getSQL("(" + sql + ")", xAxis, yAxis, customFilter, extFilterRequestList, null);

backend/src/main/java/io/dataease/provider/mysql/MysqlQueryProvider.java

@@ -270,6 +270,83 @@ public class MysqlQueryProvider extends QueryProvider {
         return st.render();
     }
 
+    @Override
+    public String getSQLTableInfo(String table, List<ChartViewFieldDTO> xAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, Datasource ds) {
+        SQLObj tableObj = SQLObj.builder()
+                .tableName((table.startsWith("(") && table.endsWith(")")) ? table : String.format(MySQLConstants.KEYWORD_TABLE, table))
+                .tableAlias(String.format(TABLE_ALIAS_PREFIX, 0))
+                .build();
+        List<SQLObj> xFields = new ArrayList<>();
+        List<SQLObj> xWheres = new ArrayList<>();
+        List<SQLObj> xOrders = new ArrayList<>();
+        if (CollectionUtils.isNotEmpty(xAxis)) {
+            for (int i = 0; i < xAxis.size(); i++) {
+                ChartViewFieldDTO x = xAxis.get(i);
+                String originField;
+                if (ObjectUtils.isNotEmpty(x.getExtField()) && x.getExtField() == 2) {
+                    // 解析origin name中有关联的字段生成sql表达式
+                    originField = calcFieldRegex(x.getOriginName(), tableObj);
+                } else if (ObjectUtils.isNotEmpty(x.getExtField()) && x.getExtField() == 1) {
+                    originField = String.format(MySQLConstants.KEYWORD_FIX, tableObj.getTableAlias(), x.getOriginName());
+                } else {
+                    originField = String.format(MySQLConstants.KEYWORD_FIX, tableObj.getTableAlias(), x.getOriginName());
+                }
+                String fieldAlias = String.format(SQLConstants.FIELD_ALIAS_X_PREFIX, i);
+                // 处理横轴字段
+                xFields.add(getXFields(x, originField, fieldAlias));
+                // 处理横轴过滤
+//                xWheres.addAll(getXWheres(x, originField, fieldAlias));
+                // 处理横轴排序
+                if (StringUtils.isNotEmpty(x.getSort()) && !StringUtils.equalsIgnoreCase(x.getSort(), "none")) {
+                    xOrders.add(SQLObj.builder()
+                            .orderField(originField)
+                            .orderAlias(fieldAlias)
+                            .orderDirection(x.getSort())
+                            .build());
+                }
+            }
+        }
+        // 处理视图中字段过滤
+        List<SQLObj> customWheres = transCustomFilterList(tableObj, customFilter);
+        // 处理仪表板字段过滤
+        List<SQLObj> extWheres = transExtFilterList(tableObj, extFilterRequestList);
+        // 构建sql所有参数
+        List<SQLObj> fields = new ArrayList<>();
+        fields.addAll(xFields);
+        List<SQLObj> wheres = new ArrayList<>();
+        wheres.addAll(xWheres);
+        if (customWheres != null) wheres.addAll(customWheres);
+        if (extWheres != null) wheres.addAll(extWheres);
+        List<SQLObj> groups = new ArrayList<>();
+        groups.addAll(xFields);
+        // 外层再次套sql
+        List<SQLObj> orders = new ArrayList<>();
+        orders.addAll(xOrders);
+
+        STGroup stg = new STGroupFile(SQLConstants.SQL_TEMPLATE);
+        ST st_sql = stg.getInstanceOf("previewSql");
+        st_sql.add("isGroup", false);
+        if (CollectionUtils.isNotEmpty(xFields)) st_sql.add("groups", xFields);
+        if (CollectionUtils.isNotEmpty(wheres)) st_sql.add("filters", wheres);
+        if (ObjectUtils.isNotEmpty(tableObj)) st_sql.add("table", tableObj);
+        String sql = st_sql.render();
+
+        ST st = stg.getInstanceOf("previewSql");
+        st.add("isGroup", false);
+        SQLObj tableSQL = SQLObj.builder()
+                .tableName(String.format(MySQLConstants.BRACKETS, sql))
+                .tableAlias(String.format(TABLE_ALIAS_PREFIX, 1))
+                .build();
+        if (CollectionUtils.isNotEmpty(orders)) st.add("orders", orders);
+        if (ObjectUtils.isNotEmpty(tableSQL)) st.add("table", tableSQL);
+        return st.render();
+    }
+
+    @Override
+    public String getSQLAsTmpTableInfo(String sql, List<ChartViewFieldDTO> xAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, Datasource ds) {
+        return getSQLTableInfo("(" + sqlFix(sql) + ")", xAxis, customFilter, extFilterRequestList, null);
+    }
+
 
     @Override
     public String getSQLAsTmp(String sql, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList) {

backend/src/main/java/io/dataease/provider/oracle/OracleQueryProvider.java

@@ -304,6 +304,16 @@ public class OracleQueryProvider extends QueryProvider {
         return st.render();
     }
 
+    @Override
+    public String getSQLTableInfo(String table, List<ChartViewFieldDTO> xAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, Datasource ds) {
+        return null;
+    }
+
+    @Override
+    public String getSQLAsTmpTableInfo(String sql, List<ChartViewFieldDTO> xAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, Datasource ds) {
+        return null;
+    }
+
     @Override
     public String getSQLAsTmp(String sql, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList) {
         return getSQL("(" + sqlFix(sql) + ")", xAxis, yAxis, customFilter, extFilterRequestList, null);

backend/src/main/java/io/dataease/provider/pg/PgQueryProvider.java

@@ -293,6 +293,16 @@ public class PgQueryProvider extends QueryProvider {
         return st.render();
     }
 
+    @Override
+    public String getSQLTableInfo(String table, List<ChartViewFieldDTO> xAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, Datasource ds) {
+        return null;
+    }
+
+    @Override
+    public String getSQLAsTmpTableInfo(String sql, List<ChartViewFieldDTO> xAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, Datasource ds) {
+        return null;
+    }
+
 
     @Override
     public String getSQLAsTmp(String sql, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList) {

backend/src/main/java/io/dataease/provider/sqlserver/SqlserverQueryProvider.java

@@ -259,6 +259,16 @@ public class SqlserverQueryProvider extends QueryProvider {
         return st.render();
     }
 
+    @Override
+    public String getSQLTableInfo(String table, List<ChartViewFieldDTO> xAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, Datasource ds) {
+        return null;
+    }
+
+    @Override
+    public String getSQLAsTmpTableInfo(String sql, List<ChartViewFieldDTO> xAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, Datasource ds) {
+        return null;
+    }
+
 
     @Override
     public String getSQLAsTmp(String sql, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList) {

backend/src/main/java/io/dataease/service/chart/ChartViewService.java

@@ -210,6 +210,13 @@ public class ChartViewService {
                 BeanUtils.copyBean(dto, view);
                 return dto;
             }
+        } else if (StringUtils.equalsIgnoreCase("table-info", view.getType())) {
+            yAxis = new ArrayList<>();
+            if (CollectionUtils.isEmpty(xAxis)) {
+                ChartViewDTO dto = new ChartViewDTO();
+                BeanUtils.copyBean(dto, view);
+                return dto;
+            }
         } else {
             if (CollectionUtils.isEmpty(xAxis) && CollectionUtils.isEmpty(yAxis)) {
                 ChartViewDTO dto = new ChartViewDTO();
@@ -321,6 +328,8 @@ public class ChartViewService {
                     datasourceRequest.setQuery(qp.getSQLStack(dataTableInfoDTO.getTable(), xAxis, yAxis, customFilter, extFilterList, extStack, ds));
                 } else if (StringUtils.containsIgnoreCase(view.getType(), "scatter")) {
                     datasourceRequest.setQuery(qp.getSQLScatter(dataTableInfoDTO.getTable(), xAxis, yAxis, customFilter, extFilterList, extBubble, ds));
+                } else if (StringUtils.equalsIgnoreCase("table-info", view.getType())) {
+                    datasourceRequest.setQuery(qp.getSQLTableInfo(dataTableInfoDTO.getTable(), xAxis, customFilter, extFilterList, ds));
                 } else {
                     datasourceRequest.setQuery(qp.getSQL(dataTableInfoDTO.getTable(), xAxis, yAxis, customFilter, extFilterList, ds));
                 }
@@ -331,6 +340,8 @@ public class ChartViewService {
                     datasourceRequest.setQuery(qp.getSQLAsTmpStack(dataTableInfoDTO.getSql(), xAxis, yAxis, customFilter, extFilterList, extStack));
                 } else if (StringUtils.containsIgnoreCase(view.getType(), "scatter")) {
                     datasourceRequest.setQuery(qp.getSQLAsTmpScatter(dataTableInfoDTO.getSql(), xAxis, yAxis, customFilter, extFilterList, extBubble));
+                } else if (StringUtils.equalsIgnoreCase("table-info", view.getType())) {
+                    datasourceRequest.setQuery(qp.getSQLAsTmpTableInfo(dataTableInfoDTO.getSql(), xAxis, customFilter, extFilterList, ds));
                 } else {
                     datasourceRequest.setQuery(qp.getSQLAsTmp(dataTableInfoDTO.getSql(), xAxis, yAxis, customFilter, extFilterList));
                 }
@@ -344,6 +355,8 @@ public class ChartViewService {
                     datasourceRequest.setQuery(qp.getSQLAsTmpStack(sql, xAxis, yAxis, customFilter, extFilterList, extStack));
                 } else if (StringUtils.containsIgnoreCase(view.getType(), "scatter")) {
                     datasourceRequest.setQuery(qp.getSQLAsTmpScatter(sql, xAxis, yAxis, customFilter, extFilterList, extBubble));
+                } else if (StringUtils.equalsIgnoreCase("table-info", view.getType())) {
+                    datasourceRequest.setQuery(qp.getSQLAsTmpTableInfo(sql, xAxis, customFilter, extFilterList, ds));
                 } else {
                     datasourceRequest.setQuery(qp.getSQLAsTmp(sql, xAxis, yAxis, customFilter, extFilterList));
                 }
@@ -374,6 +387,8 @@ public class ChartViewService {
                 datasourceRequest.setQuery(qp.getSQLStack(tableName, xAxis, yAxis, customFilter, extFilterList, extStack, ds));
             } else if (StringUtils.containsIgnoreCase(view.getType(), "scatter")) {
                 datasourceRequest.setQuery(qp.getSQLScatter(tableName, xAxis, yAxis, customFilter, extFilterList, extBubble, ds));
+            } else if (StringUtils.equalsIgnoreCase("table-info", view.getType())) {
+                datasourceRequest.setQuery(qp.getSQLTableInfo(tableName, xAxis, customFilter, extFilterList, ds));
             } else {
                 datasourceRequest.setQuery(qp.getSQL(tableName, xAxis, yAxis, customFilter, extFilterList, ds));
             }

frontend/src/icons/svg/table-info.svg

+<svg t="1630896296862" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2121" width="200" height="200"><path d="M85.333333 170.666667h853.333334v170.666666H85.333333z" p-id="2122"></path><path d="M85.333333 384h256v128H85.333333zM384 384h256v128H384zM682.666667 384h256v128H682.666667zM85.333333 725.333333h256v128H85.333333zM384 725.333333h256v128H384zM682.666667 725.333333h256v128H682.666667z" opacity=".6" p-id="2123"></path><path d="M85.333333 554.666667h256v128H85.333333zM384 554.666667h256v128H384zM682.666667 554.666667h256v128H682.666667z" p-id="2124"></path></svg>

frontend/src/icons/svg/table-normal.svg

-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1619335647805" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="859" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M975.920762 0H72.46019C45.884952 0 24.380952 24.576 24.380952 54.979048v889.660952C24.380952 975.043048 45.884952 999.619048 72.46019 999.619048h903.460572C1002.496 999.619048 1024 975.043048 1024 944.64V54.979048C1024 24.576 1002.496 0 975.920762 0zM338.066286 925.988571H89.965714v-194.243047h248.100572v194.218666z m0-258.925714H89.965714v-194.243047h248.100572v194.218666z m0-258.925714H89.965714V213.991619h248.100572v194.096762z m310.174476 517.851428H400.14019v-194.243047h248.100572v194.218666z m0-258.925714H400.14019v-194.243047h248.100572v194.218666z m0-258.925714H400.14019V213.991619h248.100572v194.096762zM958.415238 925.988571H710.314667v-194.243047H958.415238v194.218666z m0-258.925714H710.314667v-194.243047H958.415238v194.218666z m0-258.925714H710.314667V213.991619H958.415238v194.096762z" p-id="860"></path></svg>
+<svg t="1630896178915" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1969" width="200" height="200"><path d="M85.333333 170.666667h853.333334v170.666666H85.333333zM85.333333 384h170.666667v469.333333H85.333333z" p-id="1970"></path><path d="M298.666667 384h640v128H298.666667z" opacity=".6" p-id="1971"></path><path d="M298.666667 554.666667h298.666666v128H298.666667zM640 554.666667h298.666667v128H640z" p-id="1972"></path><path d="M298.666667 725.333333h298.666666v128H298.666667zM640 725.333333h298.666667v128H640z" opacity=".6" p-id="1973"></path></svg>

frontend/src/lang/en.js

@@ -746,7 +746,8 @@ export default {
     filter_condition: 'Filter Condition',
     filter_field_can_null: 'Filter field must choose',
     preview_100_data: 'Preview 100 rows',
-    chart_table_normal: 'Detail Table',
+    chart_table_normal: 'Summary Table',
+    chart_table_info: 'Detail Table',
     chart_card: 'KPI Card',
     chart_bar: 'Base Bar',
     chart_bar_stack: 'Stack Bar',
@@ -854,7 +855,8 @@ export default {
     axis_value_min: 'Min',
     axis_value_max: 'Max',
     axis_value_split: 'Split',
-    axis_auto: 'Auto'
+    axis_auto: 'Auto',
+    table_info_switch: 'Switch detail table will clear dimensions'
   },
   dataset: {
     sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',

frontend/src/lang/tw.js

@@ -745,7 +745,8 @@ export default {
     filter_condition: '過濾條件',
     filter_field_can_null: '過濾字段必填',
     preview_100_data: '預覽前100條記錄',
-    chart_table_normal: '明細表',
+    chart_table_normal: '匯總表',
+    chart_table_info: '明細表',
     chart_card: '指標卡',
     chart_bar: '基礎柱狀圖',
     chart_bar_stack: '堆疊柱狀圖',
@@ -853,7 +854,8 @@ export default {
     axis_value_min: '最小值',
     axis_value_max: '最大值',
     axis_value_split: '間隔',
-    axis_auto: '自動'
+    axis_auto: '自動',
+    table_info_switch: '明細表切換將清空維度'
   },
   dataset: {
     sheet_warn: '有多個sheet頁面，默認抽取第一個',

frontend/src/lang/zh.js

@@ -745,7 +745,8 @@ export default {
     filter_condition: '过滤条件',
     filter_field_can_null: '过滤字段必填',
     preview_100_data: '预览前100条记录',
-    chart_table_normal: '明细表',
+    chart_table_normal: '汇总表',
+    chart_table_info: '明细表',
     chart_card: '指标卡',
     chart_bar: '基础柱状图',
     chart_bar_stack: '堆叠柱状图',
@@ -853,7 +854,8 @@ export default {
     axis_value_min: '最小值',
     axis_value_max: '最大值',
     axis_value_split: '间隔',
-    axis_auto: '自动'
+    axis_auto: '自动',
+    table_info_switch: '明细表切换将清空维度'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',

frontend/src/views/chart/components/drag-item/QuotaItem.vue

@@ -13,7 +13,7 @@
         <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
       </span>
       <span class="item-span-style" :title="item.name">{{ item.name }}</span>
-      <span v-if="item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
+      <span v-if="chart.type !== 'table-info' && item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
     </el-tag>
     <el-dropdown v-else trigger="click" size="mini" @command="clickItem">
       <span class="el-dropdown-link">
@@ -30,7 +30,7 @@
             <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
           </span>
           <span class="item-span-style" :title="item.name">{{ item.name }}</span>
-          <span v-if="item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
+          <span v-if="chart.type !== 'table-info' && item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
           <i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
         </el-tag>
         <el-dropdown-menu slot="dropdown">
@@ -50,7 +50,7 @@
               </el-dropdown-menu>
             </el-dropdown>
           </el-dropdown-item>
-          <el-dropdown-item divided>
+          <el-dropdown-item v-show="chart.type !== 'table-info'" divided>
             <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="summary">
               <span class="el-dropdown-link inner-dropdown-menu">
                 <span>
@@ -87,7 +87,7 @@
           <!--              </el-dropdown-menu>-->
           <!--            </el-dropdown>-->
           <!--          </el-dropdown-item>-->
-          <el-dropdown-item divided>
+          <el-dropdown-item :divided="chart.type !== 'table-info'">
             <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="sort">
               <span class="el-dropdown-link inner-dropdown-menu">
                 <span>

frontend/src/views/chart/components/table/TableNormal.vue

@@ -28,6 +28,17 @@
         <!--        </template>-->
       </ux-table-column>
     </ux-grid>
+
+    <!--    <el-pagination-->
+    <!--      v-show="chart.type === 'table-info'"-->
+    <!--      :current-page="currentPage.page"-->
+    <!--      :page-sizes="[100]"-->
+    <!--      :page-size="currentPage.pageSize"-->
+    <!--      :pager-count="5"-->
+    <!--      layout="sizes, prev, pager, next"-->
+    <!--      :total="currentPage.show"-->
+    <!--      @current-change="pageChange"-->
+    <!--    />-->
   </div>
 </template>
 
@@ -92,6 +103,11 @@ export default {
       },
       title_show: true,
       borderRadius: '0px'
+      // currentPage: {
+      //   page: 1,
+      //   pageSize: 10,
+      //   show: 0
+      // }
     }
   },
   computed: {
@@ -137,9 +153,13 @@ export default {
       if (this.chart.data) {
         this.fields = JSON.parse(JSON.stringify(this.chart.data.fields))
         datas = JSON.parse(JSON.stringify(this.chart.data.tableRow))
+        // if (this.chart.data.page) {
+        //   this.currentPage = JSON.parse(JSON.stringify(this.chart.data.page))
+        // }
       } else {
         this.fields = []
         datas = []
+        // this.resetPage()
       }
       this.$refs.plxTable.reloadData(datas)
       this.$nextTick(() => {
@@ -279,7 +299,19 @@ export default {
 
     resetHeight() {
       this.height = 100
+    },
+
+    pageChange() {
+
     }
+
+    // resetPage() {
+    //   this.currentPage = {
+    //     page: 1,
+    //     pageSize: 10,
+    //     show: 0
+    //   }
+    // }
   }
 }
 </script>