From b2b8814ee5b875e5c141ac108581a5ef50809935 Mon Sep 17 00:00:00 2001
From: xiajunjie <752696511@qq.com>
Date: Thu, 25 Feb 2021 22:46:00 +0800
Subject: [PATCH] =?UTF-8?q?feat(fronted):=20=E5=A4=A7=E5=8D=8A=E5=A4=9C?=
 =?UTF-8?q?=E7=9A=84=20=E4=B8=B4=E6=97=B6=E6=8F=90=E4=BA=A4=20=E6=98=8E?=
 =?UTF-8?q?=E5=A4=A9=E5=86=8D=E6=90=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../business/components/chart/group/Group.vue |  31 ++-
 .../chart/{View => view}/ChartEdit.vue        |   0
 .../components/chart/view/TableSelector.vue   |  48 ++++
 .../dataset/common/DatasetGroupSelector.vue   | 246 ++++++++++++++++++
 .../components/dataset/data/ViewTable.vue     |   2 +-
 5 files changed, 322 insertions(+), 5 deletions(-)
 rename frontend/src/business/components/chart/{View => view}/ChartEdit.vue (100%)
 create mode 100644 frontend/src/business/components/chart/view/TableSelector.vue
 create mode 100644 frontend/src/business/components/dataset/common/DatasetGroupSelector.vue

diff --git a/frontend/src/business/components/chart/group/Group.vue b/frontend/src/business/components/chart/group/Group.vue
index 968cce53cc..d2a4b6f563 100644
--- a/frontend/src/business/components/chart/group/Group.vue
+++ b/frontend/src/business/components/chart/group/Group.vue
@@ -122,7 +122,7 @@
     </el-row>
     <el-divider/>
     <el-row>
-      <el-button type="primary" size="mini" plain>
+      <el-button type="primary" size="mini" plain @click="selectTable">
         {{$t('chart.add_chart')}}
       </el-button>
     </el-row>
@@ -187,13 +187,25 @@
       </div>
     </el-dialog>
 
+    <!--dataset table select-->
+    <el-dialog title="select table" :visible="selectTableFlag" :show-close="false" width="70%" class="dialog-css">
+      <table-selector/>
+      <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>
+      </div>
+    </el-dialog>
+
   </el-col>
 </el-col>
 </template>
 
 <script>
+import TableSelector from "../view/TableSelector";
+
 export default {
   name: "Group",
+  components: {TableSelector},
   data() {
     return {
       sceneMode: false,
@@ -226,7 +238,8 @@ export default {
         name: [
           {required: true, message: this.$t('commons.input_content'), trigger: 'blur'},
         ],
-      }
+      },
+      selectTableFlag: false
     }
   },
   computed: {
@@ -245,8 +258,7 @@ export default {
     this.chartTree();
     this.$router.push('/chart');
   },
-  watch: {
-  },
+  watch: {},
   methods: {
     clickAdd(param) {
       this.add(param.type);
@@ -473,6 +485,9 @@ export default {
       // });
     },
 
+    selectTable() {
+      this.selectTableFlag = true;
+    }
   },
 }
 </script>
@@ -514,4 +529,12 @@ export default {
   .title-text {
     line-height: 26px;
   }
+
+  .dialog-css >>> .el-dialog__header {
+    padding: 20px 20px 0;
+  }
+
+  .dialog-css >>> .el-dialog__body {
+    padding: 10px 20px 20px;
+  }
 </style>
diff --git a/frontend/src/business/components/chart/View/ChartEdit.vue b/frontend/src/business/components/chart/view/ChartEdit.vue
similarity index 100%
rename from frontend/src/business/components/chart/View/ChartEdit.vue
rename to frontend/src/business/components/chart/view/ChartEdit.vue
diff --git a/frontend/src/business/components/chart/view/TableSelector.vue b/frontend/src/business/components/chart/view/TableSelector.vue
new file mode 100644
index 0000000000..cc3fdbb773
--- /dev/null
+++ b/frontend/src/business/components/chart/view/TableSelector.vue
@@ -0,0 +1,48 @@
+<template>
+<ms-container>
+  <ms-aside-container>
+    <dataset-group-selector/>
+  </ms-aside-container>
+
+  <ms-main-container>
+    <div>1111</div>
+  </ms-main-container>
+</ms-container>
+</template>
+
+<script>
+import MsMainContainer from "../../common/components/MsMainContainer";
+import MsContainer from "../../common/components/MsContainer";
+import MsAsideContainer from "../../common/components/MsAsideContainer";
+import MsSettingMenu from "../../settings/SettingMenu";
+import MsCurrentUser from "../../settings/CurrentUser";
+import DatasetGroupSelector from "../../dataset/common/DatasetGroupSelector";
+
+export default {
+  name: "TableSelector",
+  components: {MsMainContainer, MsContainer, MsAsideContainer, MsSettingMenu, MsCurrentUser, DatasetGroupSelector},
+  data() {
+    return {}
+  },
+  computed: {},
+  created() {
+  },
+  mounted() {
+  },
+  methods: {}
+}
+</script>
+
+<style scoped>
+  .ms-aside-container {
+    height: 50vh;
+    min-width: 180px;
+    max-width: 300px;
+  }
+
+  .ms-main-container {
+    height: 50vh;
+    border: 1px solid #E6E6E6;
+    border-left: 0 solid;
+  }
+</style>
diff --git a/frontend/src/business/components/dataset/common/DatasetGroupSelector.vue b/frontend/src/business/components/dataset/common/DatasetGroupSelector.vue
new file mode 100644
index 0000000000..c9a1db22d7
--- /dev/null
+++ b/frontend/src/business/components/dataset/common/DatasetGroupSelector.vue
@@ -0,0 +1,246 @@
+<template>
+<el-col>
+  <!-- group -->
+  <el-col v-if="!sceneMode">
+    <el-row class="title-css">
+      <span class="title-text">
+        {{ $t('dataset.datalist') }}
+      </span>
+    </el-row>
+    <el-divider/>
+
+    <el-row>
+      <el-form>
+        <el-form-item class="form-item">
+          <el-input
+            size="mini"
+            :placeholder="$t('dataset.search')"
+            prefix-icon="el-icon-search"
+            v-model="search"
+            clearable>
+          </el-input>
+        </el-form-item>
+      </el-form>
+    </el-row>
+
+    <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"
+          @node-click="nodeClick">
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+          <span>
+            <span v-if="data.type === 'scene'">
+              <el-button
+                icon="el-icon-folder"
+                type="text"
+                size="mini">
+              </el-button>
+            </span>
+            <span style="margin-left: 6px">{{ data.name }}</span>
+          </span>
+        </span>
+        </el-tree>
+      </div>
+    </el-col>
+  </el-col>
+
+  <!--scene-->
+  <el-col v-if="sceneMode">
+    <el-row class="title-css">
+      <span class="title-text">
+        {{currGroup.name}}
+      </span>
+      <el-button icon="el-icon-back" size="mini" @click="back" style="float: right">
+        {{$t('dataset.back')}}
+      </el-button>
+    </el-row>
+    <el-divider/>
+    <el-row>
+      <el-form>
+        <el-form-item class="form-item">
+          <el-input
+            size="mini"
+            :placeholder="$t('dataset.search')"
+            prefix-icon="el-icon-search"
+            v-model="search"
+            clearable>
+          </el-input>
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <el-tree
+      :data="tableData"
+      node-key="id"
+      :expand-on-click-node="true"
+      @node-click="sceneClick">
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+          <span>
+            <span>
+              ({{data.type}})
+            </span>
+            <span style="margin-left: 6px">{{ data.name }}</span>
+          </span>
+        </span>
+    </el-tree>
+  </el-col>
+</el-col>
+</template>
+
+<script>
+export default {
+  name: "DatasetGroupSelector",
+  data() {
+    return {
+      sceneMode: false,
+      search: '',
+      data: [],
+      tableData: [],
+      currGroup: null,
+      expandedArray: [],
+      groupForm: {
+        name: '',
+        pid: null,
+        level: 0,
+        type: '',
+        children: [],
+        sort: 'type desc,name asc'
+      },
+      tableForm: {
+        name: '',
+        sort: 'type asc,create_time desc,name asc'
+      },
+    }
+  },
+  computed: {
+  },
+  mounted() {
+    this.tree(this.groupForm);
+    this.tableTree();
+  },
+  activated() {
+    this.tree(this.groupForm);
+    this.tableTree();
+  },
+  watch: {
+    // search(val){
+    //   this.groupForm.name = val;
+    //   this.tree(this.groupForm);
+    // }
+  },
+  methods: {
+    close() {
+      this.editGroup = false;
+      this.groupForm = {
+        name: '',
+        pid: null,
+        level: 0,
+        type: '',
+        children: [],
+        sort: 'type desc,name asc'
+      }
+    },
+
+    closeTable() {
+      this.editTable = false;
+      this.tableForm = {
+        name: '',
+      }
+    },
+
+    tree(group) {
+      this.$post("/dataset/group/tree", group, response => {
+        this.data = response.data;
+      })
+    },
+
+    tableTree() {
+      this.tableData = [];
+      if (this.currGroup) {
+        this.$post('/dataset/table/list', {
+          sort: 'type asc,create_time desc,name asc',
+          sceneId: this.currGroup.id
+        }, response => {
+          this.tableData = response.data;
+        });
+      }
+    },
+
+    nodeClick(data, node) {
+      // console.log(data);
+      // console.log(node);
+      if (data.type === 'scene') {
+        this.sceneMode = true;
+        this.currGroup = data;
+      }
+      if (node.expanded) {
+        this.expandedArray.push(data.id);
+      } else {
+        let 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) {
+      // console.log(data);
+      this.$store.commit('setTable', null);
+      this.$store.commit('setTable', data.id);
+      this.$router.push({
+        name: 'table',
+        params: {
+          table: data
+        }
+      });
+    },
+  }
+}
+</script>
+
+<style scoped>
+  .el-divider--horizontal {
+    margin: 12px 0
+  }
+
+  .search-input {
+    padding: 12px 0;
+  }
+
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 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;
+  }
+</style>
diff --git a/frontend/src/business/components/dataset/data/ViewTable.vue b/frontend/src/business/components/dataset/data/ViewTable.vue
index 7bfd42a6d1..02ba760557 100644
--- a/frontend/src/business/components/dataset/data/ViewTable.vue
+++ b/frontend/src/business/components/dataset/data/ViewTable.vue
@@ -75,7 +75,7 @@
 
 <script>
 import TabDataPreview from "./TabDataPreview";
-import ChartEdit from "../../chart/View/ChartEdit";
+import ChartEdit from "../../chart/view/ChartEdit";
 
 export default {
   name: "ViewTable",