feat(fronted): 创建视图，选择数据集

frontend/src/business/components/chart/group/Group.vue

@@ -187,12 +187,13 @@
       </div>
     </el-dialog>
 
-    <!--dataset table select-->
+    <!--添加视图-选择数据集-->
-    <el-dialog title="select table" :visible="selectTableFlag" :show-close="false" width="70%" class="dialog-css">
+    <el-dialog :title="$t('chart.add_chart')" :visible="selectTableFlag" :show-close="false" width="70%"
-      <table-selector/>
+               class="dialog-css">
+      <table-selector @getTable="getTable"/>
       <div slot="footer" class="dialog-footer">
         <el-button size="mini" @click="selectTableFlag = false">{{$t('chart.cancel')}}</el-button>
-        <el-button type="primary" size="mini" @click="selectTableFlag = false">{{$t('chart.confirm')}}</el-button>
+        <el-button type="primary" size="mini" @click="createChart">{{$t('chart.confirm')}}</el-button>
       </div>
     </el-dialog>
 
@@ -239,7 +240,8 @@ export default {
           {required: true, message: this.$t('commons.input_content'), trigger: 'blur'},
         ],
       },
-      selectTableFlag: false
+      selectTableFlag: false,
+      table: {}
     }
   },
   computed: {
@@ -487,6 +489,17 @@ export default {
 
     selectTable() {
       this.selectTableFlag = true;
+    },
+
+    createChart() {
+      console.log(this.table);
+      this.selectTableFlag = false;
+      // TODO
+      this.$router.push("/chart");
+    },
+
+    getTable(table) {
+      this.table = table;
     }
   },
 }

frontend/src/business/components/chart/view/TableSelector.vue

@@ -1,11 +1,11 @@
 <template>
 <ms-container>
   <ms-aside-container>
-    <dataset-group-selector/>
+    <dataset-group-selector @getTable="getTable"/>
   </ms-aside-container>
 
   <ms-main-container>
-    <div>1111</div>
+    <dataset-table-data :table="table"/>
   </ms-main-container>
 </ms-container>
 </template>
@@ -17,19 +17,30 @@ import MsAsideContainer from "../../common/components/MsAsideContainer";
 import MsSettingMenu from "../../settings/SettingMenu";
 import MsCurrentUser from "../../settings/CurrentUser";
 import DatasetGroupSelector from "../../dataset/common/DatasetGroupSelector";
+import DatasetTableData from "../../dataset/common/DatasetTableData";
 
 export default {
   name: "TableSelector",
-  components: {MsMainContainer, MsContainer, MsAsideContainer, MsSettingMenu, MsCurrentUser, DatasetGroupSelector},
+  components: {
+    DatasetTableData,
+    MsMainContainer, MsContainer, MsAsideContainer, MsSettingMenu, MsCurrentUser, DatasetGroupSelector
+  },
   data() {
-    return {}
+    return {
+      table: {},
+    }
   },
   computed: {},
   created() {
   },
   mounted() {
   },
-  methods: {}
+  methods: {
+    getTable(table) {
+      this.table = table;
+      this.$emit("getTable", table);
+    },
+  }
 }
 </script>
 

frontend/src/business/components/dataset/common/DatasetGroupSelector.vue

@@ -115,8 +115,7 @@ export default {
       },
     }
   },
-  computed: {
+  computed: {},
-  },
   mounted() {
     this.tree(this.groupForm);
     this.tableTree();
@@ -175,6 +174,7 @@ export default {
       if (data.type === 'scene') {
         this.sceneMode = true;
         this.currGroup = data;
+        this.tableTree();
       }
       if (node.expanded) {
         this.expandedArray.push(data.id);
@@ -193,14 +193,7 @@ export default {
 
     sceneClick(data, node) {
       // console.log(data);
-      this.$store.commit('setTable', null);
+      this.$emit("getTable", data);
-      this.$store.commit('setTable', data.id);
-      this.$router.push({
-        name: 'table',
-        params: {
-          table: data
-        }
-      });
     },
   }
 }

frontend/src/business/components/dataset/common/DatasetTableData.vue

@@ -0,0 +1,64 @@
+<template>
+<el-col>
+  <span>{{table.name}}</span>
+  <el-table
+    size="mini"
+    :data="data"
+    height="40vh"
+    border
+    style="width: 100%;margin-top: 6px;">
+    <el-table-column
+      min-width="200px"
+      v-for="field in fields"
+      :key="field.originName"
+      :prop="field.originName"
+      :label="field.name">
+    </el-table-column>
+  </el-table>
+</el-col>
+</template>
+
+<script>
+export default {
+  props: {
+    table: Object
+  },
+  name: "DatasetTableData",
+  data() {
+    return {
+      fields: [],
+      data: []
+    }
+  },
+  created() {
+    this.initData();
+  },
+  mounted() {
+  },
+  methods: {
+    initData() {
+      this.resetData();
+      if (this.table.id) {
+        this.$post('/dataset/table/getPreviewData', this.table, response => {
+          this.fields = response.data.fields;
+          this.data = response.data.data;
+        });
+      }
+    },
+
+    resetData() {
+      this.fields = [];
+      this.data = [];
+    }
+  },
+  watch: {
+    table() {
+      this.initData();
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/business/components/dataset/data/ViewTable.vue

@@ -10,7 +10,7 @@
         <el-button size="mini" @click="edit">
           {{$t('dataset.edit')}}
         </el-button>
-        <el-button size="mini" type="primary" @click="createView">
+        <el-button size="mini" type="primary" @click="createChart">
           {{$t('dataset.create_view')}}
         </el-button>
       </el-row>
@@ -142,8 +142,11 @@ export default {
       this.initTableFields();
     },
 
-    createView() {
+    createChart() {
+      console.log(this.table);
       this.createViewDialog = true;
+      // TODO
+      this.$router.push("/chart");
     },
 
     saveEdit() {

frontend/src/i18n/en-US.js

@@ -1520,6 +1520,37 @@ export default {
     title: 'Auth Source',
     auth_name_valid: 'Name does not support special characters',
   },
+  chart: {
+    datalist: '視圖列表',
+    add_group: '添加分組',
+    add_scene: '添加場景',
+    group: '分組',
+    scene: '場景',
+    delete: '刪除',
+    move_to: '移動到',
+    rename: '重命名',
+    tips: '提示',
+    confirm_delete: '確認刪除',
+    delete_success: '刪除成功',
+    confirm: '確認',
+    cancel: '取消',
+    search: '搜索',
+    back: '返回',
+    add_table: '添加表',
+    process: '進度',
+    add_chart: '添加視圖',
+    db_data: '數據庫表',
+    sql_data: 'SQL數據集',
+    excel_data: 'Excel數據集',
+    custom_data: '自助數據集',
+    pls_slc_tbl_left: '請從左側選視圖',
+    add_db_table: '添加數據庫表',
+    pls_slc_data_source: '請選擇數據庫連接',
+    table: '表',
+    edit: '編輯',
+    create_view: '創建試圖',
+    data_preview: '數據預覽'
+  },
   dataset: {
     datalist: 'Data List',
     add_group: 'Add Group',

frontend/src/i18n/zh-TW.js

@@ -1521,6 +1521,37 @@ export default {
     title: '認證設置',
     auth_name_valid: '名稱不支持特殊字符',
   },
+  chart: {
+    datalist: '視圖列表',
+    add_group: '添加分組',
+    add_scene: '添加場景',
+    group: '分組',
+    scene: '場景',
+    delete: '刪除',
+    move_to: '移動到',
+    rename: '重命名',
+    tips: '提示',
+    confirm_delete: '確認刪除',
+    delete_success: '刪除成功',
+    confirm: '確認',
+    cancel: '取消',
+    search: '搜索',
+    back: '返回',
+    add_table: '添加表',
+    process: '進度',
+    add_chart: '添加視圖',
+    db_data: '數據庫表',
+    sql_data: 'SQL數據集',
+    excel_data: 'Excel數據集',
+    custom_data: '自助數據集',
+    pls_slc_tbl_left: '請從左側選視圖',
+    add_db_table: '添加數據庫表',
+    pls_slc_data_source: '請選擇數據庫連接',
+    table: '表',
+    edit: '編輯',
+    create_view: '創建試圖',
+    data_preview: '數據預覽'
+  },
   dataset: {
     datalist: '數據列表',
     add_group: '添加分組',