列表显示控件化，应对后续视图切换（列表、图表）

src/main/java/com/bowintek/practice/controller/TempController.java

@@ -65,7 +65,7 @@ public class TempController {
     public BaseResponse<TempObjectModel> genTest(@RequestBody TempObjectModel data) {
         HashMap<String, Object> rtnObject = new HashMap<>();
         try {
-            GenSqlStringResult sqlStringResult = genSqlStringService.Generation(data,data.page, data.rows, accountService.getLoginUserID());
+            GenSqlStringResult sqlStringResult = genSqlStringService.Generation(data, accountService.getLoginUserID());
             rtnObject.put("sqlString", sqlStringResult.getMainSqlString());
             rtnObject.put("cntString", sqlStringResult.getCountSqlStrimg());
 

src/main/java/com/bowintek/practice/services/impl/GenSqlStringServiceImpl.java

@@ -86,7 +86,7 @@ public class GenSqlStringServiceImpl implements GenSqlStringService {
     //输出字段 AS：ReFieldName0,1,2...；依据维度度量排序来
     //表名 AS：T 主表，T0,1,2...；子表，依据维度度量子表排序来
     @Override
-    public GenSqlStringResult Generation(TempObjectModel data, int page, int rows, String userID){
+    public GenSqlStringResult Generation(TempObjectModel data, String userID){
         //取得字段原本定义
         data.sub = srSubjectMapper.selectByPrimaryKey(data.temp.getSubId());
         List<SrSubjectfield> fileds = getSubjectfieldsBySubId(data.temp.getSubId());
@@ -150,17 +150,18 @@ public class GenSqlStringServiceImpl implements GenSqlStringService {
 
         //生成排序字段
         String orderByString = "";
-        if(IsNullEmpty(data.orderBy) || !aliasMap.containsKey(data.orderBy))
-            data.orderBy = aliasMap.keySet().stream().findFirst().get();
-        System.out.println("data.orderBy:"+data.orderBy);
-
-        if(aliasMap.containsKey(data.orderBy)){
-            if(IsNullEmpty(data.orderByString)) data.orderByString = "asc";
-            SqlColumnModel cmOrder = aliasMap.get(data.orderBy);
-            orderByString = MessageFormat.format("ORDER BY {0} {1}", cmOrder.getMeasureColumn(), data.orderByString);
+        if(IsNullEmpty(data.pagination.orderBy) || !aliasMap.containsKey(data.pagination.orderBy))
+            data.pagination.orderBy = aliasMap.keySet().stream().findFirst().get();
+        System.out.println("data.orderBy:"+data.pagination.orderBy);
+
+        if(aliasMap.containsKey(data.pagination.orderBy)){
+            if(IsNullEmpty(data.pagination.orderByString)) data.pagination.orderByString = "asc";
+            SqlColumnModel cmOrder = aliasMap.get(data.pagination.orderBy);
+            orderByString = MessageFormat.format("ORDER BY {0} {1}", cmOrder.getMeasureColumn(), data.pagination.orderByString);
         }
 
-        String limitString = MessageFormat.format("LIMIT {0} OFFSET {1}", rows, (page-1) * rows);
+        String limitString = MessageFormat.format("LIMIT {0} OFFSET {1}",
+                data.pagination.rows, (data.pagination.page-1) * data.pagination.rows);
 
         GenSqlStringResult result = new GenSqlStringResult();
         String mainSqlString = MessageFormat.format("SELECT {0} \nFROM {1} AS T {2} \nWHERE 1=1 {3} \nGROUP BY {4} \n{5} \n{6}",

src/main/java/com/bowintek/practice/services/service/GenSqlStringService.java

@@ -9,7 +9,7 @@ import java.util.List;
 import java.util.Map;
 
 public interface GenSqlStringService {
-    GenSqlStringResult Generation(TempObjectModel data, int page, int rows, String userID);
+    GenSqlStringResult Generation(TempObjectModel data, String userID);
     List<Map<String,Object>> getListBySqlString(String sqlString);
     Map<String,Object> getMapBySqlString(String sqlString);
     int getIntBySqlString(String sqlString, String colName);

src/main/java/com/bowintek/practice/vo/temp/PaginationModel.java

@@ -0,0 +1,15 @@
+package com.bowintek.practice.vo.temp;
+
+import com.bowintek.practice.model.*;
+import lombok.Data;
+
+import java.util.List;
+
+@Data
+public class PaginationModel {
+    public String orderBy;
+    public String orderByString;
+
+    public int page;
+    public int rows;
+}

src/main/java/com/bowintek/practice/vo/temp/TempObjectModel.java

@@ -14,9 +14,5 @@ public class TempObjectModel {
     public List<SrTempfield> wheres;
     public List<SrTempmeasure> measures;
 
-    public String orderBy;
-    public String orderByString;
-
-    public int page;
-    public int rows;
+    public PaginationModel pagination;
 }

vue/src/components/basic/query/display-table.vue

@@ -0,0 +1,118 @@
+<template>
+  <a-table :columns="columns" :data-source="dataList" :scroll="{ x:'100%', y: 500 }"
+           :pagination="pagination"
+           :loading="loading"
+           @change="pageChange"
+           bordered>
+  </a-table>
+</template>
+
+<script lang="ts">
+  import {defineComponent, computed} from 'vue';
+  import {getPaginationTotalTitle} from "@/utils/common";
+  import type {TableColumnsType} from 'ant-design-vue';
+
+  export  default defineComponent ({
+    props:{
+      bases : [] as any,
+      measures : [] as any,
+      wheres : [] as any
+    },
+    emits: ['displayChange'],
+    name : 'DisplayTable',
+    data() {
+      return{
+        pagination : {
+          total: 0,
+          current: 1,
+          pageSize: 10,
+          orderBy : null,
+          orderByString : null,
+          showSizeChanger: true,
+          showTotal: total => getPaginationTotalTitle(total)
+        },
+        dataList : [] as any,
+        columns : [] as any,
+        loading : false
+      }
+    },
+    setup(props, context){
+      console.log("DisplayTable setup" , props, context);
+
+      const bases = computed(() => {
+        console.log("props.bases", props.bases)
+        return props.bases ? props.bases : []
+      });
+      const measures = computed(() => {
+        return props.measures ? props.measures : []
+      });
+      const wheres = computed(() => {
+        return props.wheres ? props.wheres : []
+      });
+
+      const displayChange = (obj) => {
+        context.emit('displayChange', obj)
+      }
+
+      return{
+        bases, measures, wheres, displayChange
+      }
+    },
+    mounted(){
+      console.log("mounted" , "");
+    },
+    methods:{
+      getTableColumns:function (){
+        let rtns: TableColumnsType = [];
+        let cols = this.bases.concat(this.measures);
+        for(let i=0;i<cols.length; i++){
+          let it = cols[i];
+          rtns.push({
+            title: it.displayName?it.displayName:it.fieldName,
+            dataIndex: "RENAME" + i,
+            key: it.tempFeildId,
+            sorter: true,
+            align:"center"});
+        }
+        console.log("getTableColumns", rtns);
+        return rtns;
+      },
+      pageChange: function(pag: { pageSize: number; current: number } , filters: any, sorter: any){
+        this.pagination.current = pag.current;
+        this.pagination.pageSize = pag.pageSize;
+        console.log("sorter",sorter, filters);
+
+        this.pagination.orderBy = sorter.column ? sorter.columnKey : null;
+        this.pagination.orderByString = sorter.column ? sorter.order.replace("end","") : null;
+
+        this.loading = true;
+        this.displayChange(this.getPagination());
+      },
+      setData : function (result){
+        console.log(result);
+        if(result["code"]!=0) this.dataList = [];
+        else{
+          this.dataList = result["rows"];
+          this.pagination.total = result["total"];
+          this.loading = false;
+        }
+      },
+      reader: function () {
+        this.columns = this.getTableColumns();
+        this.dataList = [];
+        this.pagination.current = 1;
+        this.pagination.total = 0;
+      },
+      getPagination:function (){
+        return {
+          page : this.pagination.current,
+          rows : this.pagination.pageSize,
+          orderBy : this.pagination.orderBy,
+          orderByString : this.pagination.orderByString
+        };
+      }
+    }
+  })
+</script>
+
+<style lang="less" scoped></style>

vue/src/views/query/index.vue

@@ -58,7 +58,7 @@
               </a-form-item>
             </a-col>
             <a-col :span="6" style="text-align: left">
-              <a-button type="primary" html-type="submit" @click="onSelect">查询预览</a-button>
+              <a-button type="primary" html-type="submit" @click="getQuery">查询预览</a-button>
               <a-button html-type="submit" @click="onFinish" style="margin-left: 10px;">保存模板</a-button>
             </a-col>
             <a-col :span="18">
@@ -103,12 +103,7 @@
         </a-form>
       </div>
       <div class="query-index-table">
-        <a-table :columns="columns" :data-source="dataList" :scroll="{ x:'100%', y: 500 }"
-                 :pagination="pagination"
-                 :loading="modal.loading"
-                 @change="pageChange"
-                 bordered>
-        </a-table>
+        <DisplayTable ref="display" :bases="formState.bases" :measures="formState.measures" @displayChange="onDisplayChange"></DisplayTable>
       </div>
     </div>
   </div>
@@ -121,20 +116,19 @@
 </template>
 
 <script lang="ts">
-import {ref, defineComponent, computed} from 'vue';
+import {ref, defineComponent} from 'vue';
 import type {FormInstance} from 'ant-design-vue';
 import {useRoute} from 'vue-router';
 import DragWhere from '@/components/basic/query/drag-where.vue'
 import DragBase from '@/components/basic/query/drag-base.vue'
 import DragMeasure from '@/components/basic/query/drag-measure.vue'
+import DisplayTable from '@/components/basic/query/display-table.vue'
 import {save, get} from "@/api/common";
-import type {TableColumnsType, TableProps} from 'ant-design-vue';
 import type { TreeProps } from 'ant-design-vue';
-import {getPaginationTotalTitle} from "@/utils/common";
 
 export default defineComponent({
   name: 'queryindex',
-  components: {DragWhere, DragBase, DragMeasure},
+  components: {DragWhere, DragBase, DragMeasure, DisplayTable},
   setup() {
     const route = useRoute();
     const expand = ref(false);
@@ -142,12 +136,14 @@ export default defineComponent({
     const measure = ref<typeof DragMeasure>();
     const base = ref<typeof DragBase>();
     const where = ref<typeof DragWhere>();
+    const display = ref<typeof DisplayTable>();
 
     const subjectTrees = ref({
       data :[] as TreeProps['treeData'],
       expandedKeys : [''],
       searchStr : ''
     });
+
     const formState = ref({
       temp : {
         tempId: '',
@@ -163,37 +159,14 @@ export default defineComponent({
       measures : [],
       wheres : [],
       bases : [],
-      page: 0, rows: 10, total: 0,
-      orderBy : null,
-      orderByString : null
+      pagination : null
     });
 
     const modal = ref({
       open : false,
-      sqlString : null,
-      loading : false
+      sqlString : null
     });
 
-    const pagination = computed(() => ({
-      total: formState.value.total,
-      current: formState.value.page,
-      pageSize: formState.value.rows,
-      showSizeChanger: true,
-      showTotal: total => getPaginationTotalTitle(total)
-    }));
-
-    const pageChange: TableProps['onChange'] = (
-      pag: { pageSize: number; current: number } , filters: any, sorter: any
-    ) => {
-      formState.value.page = pag.current;
-      formState.value.rows = pag.pageSize;
-      console.log("sorter",sorter, filters);
-
-      formState.value.orderBy = sorter.column ? sorter.columnKey : null;
-      formState.value.orderByString = sorter.column ? sorter.order.replace("end","") : null;
-      onSelect();
-    };
-
     const onFinish = () => {
       if(formRef.value == undefined){
         return;
@@ -210,26 +183,21 @@ export default defineComponent({
       formState.value.measures = (measure.value as any).getTagList();
       formState.value.wheres = (where.value as any).getTagList();
       formState.value.bases = (base.value as any).getTagList();
+      //从视图取得翻页数据
+      formState.value.pagination = (display.value as any).getPagination();
       console.log("formState", formState.value);
-
       return formState.value;
     };
 
-    const onSelect= () =>{
-      modal.value.loading = true;
-
+    const getQuery = () =>{
       save('temp/genQuery', formStateGet()).then(result => {
         console.log(result);
         if(result["code"]!=0){
           modal.value.open = true;
           modal.value.sqlString = result["sqlString"];
-          dataList.value = [];
-        }
-        else{
-          dataList.value = result["rows"];
-          formState.value.total = result["total"];
-          modal.value.loading = false;
         }
+        //将数据给视图，视图组装并显示
+        (display.value as any).setData(result);
       });
     }
 
@@ -262,7 +230,8 @@ export default defineComponent({
       formState.value.bases = rtn.bases;
       formState.value.wheres = rtn.wheres;
       formState.value.measures = rtn.measures;
-      readerTable(true);
+
+      setTimeout(displayReader, 100);
 
       (measure.value as any).setTagList(rtn.measures);
       (where.value as any).setTagList(rtn.wheres);
@@ -272,22 +241,35 @@ export default defineComponent({
     const onChangeMeasure = (list, obj) => {
       console.log("onChangeMeasure", arguments, list, obj);
       formState.value.measures = list;
-      readerTable(true);
+      displayReader();
       checkSubjectId(obj);
     }
     const onChangeWhere = (list, obj) => {
       console.log("onChangeWhere", arguments, list, obj);
       formState.value.wheres = list;
-      readerTable(true);
+      displayReader();
       checkSubjectId(obj);
     }
     const onChangeBase = (list, obj) => {
       console.log("onChangeBase", arguments, list, obj);
       formState.value.bases = list;
-      readerTable(true);
+      displayReader();
       checkSubjectId(obj);
     }
 
+    const onDisplayChange = (pagination) => {
+      //视图发起数据查询，如翻页
+      console.log("onDisplayChange", pagination);
+      formState.value.pagination = pagination;
+      getQuery();
+    }
+
+    function displayReader(){
+      //初始化视图显示
+      console.log("displayReader",display.value);
+      (display.value as any).reader();
+    }
+
     const checkSubjectId = (obj)=>{
       if(formState.value.temp.subId==null && obj!=null) {
         formState.value.temp.subId = obj.subId;
@@ -302,32 +284,6 @@ export default defineComponent({
       console.log("formState.value.temp.subId", formState.value.temp.subId)
     }
 
-    const dataList = ref([]);
-    const columns : any= ref([]);
-    const readerTable = (isClearData : boolean) =>{
-      columns.value = getTableColumns(formState.value.bases, formState.value.measures);
-      if(isClearData) {
-        dataList.value = [];
-        formState.value.page = 1;
-      }
-    }
-    const getTableColumns = (bases, measures) =>{
-      let rtns: TableColumnsType = [];
-      let cols = bases.concat(measures);
-      for(let i=0;i<cols.length; i++){
-        let it = cols[i];
-        console.log("getTableColumns",it);
-        rtns.push({
-          title: it.displayName?it.displayName:it.fieldName,
-          dataIndex: "RENAME" + i,
-          key: it.tempFeildId,
-          sorter: true,
-          align:"center"});
-      }
-      console.log("getTableColumns", rtns);
-      return rtns;
-    }
-
     const labelCol = { style: { width: '100px' } };
     return {
       route,
@@ -339,21 +295,20 @@ export default defineComponent({
       measure,
       where,
       base,
+      display,
       onChangeMeasure,
       onChangeWhere,
       onChangeBase,
       onDragStart,
       checkSubjectId,
-      onSelect,
+      getQuery,
       getTemp,
 
-      dataList,
-      columns,
       subjectTrees,
       getSubjectTree,
       modal,
-      pagination,
-      pageChange
+      displayReader,
+      onDisplayChange
     };
   },
   created() {