From f6593d236043737604337b1071c0a52c61f81354 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Mon, 21 Jun 2021 11:18:38 +0800
Subject: [PATCH] =?UTF-8?q?feat(fix):=E8=A7=86=E5=9B=BE=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../service/chart/ChartGroupService.java      |   6 +-
 .../TreeSelector/ChartMoveSelector.vue        |  85 +++++++++++++
 .../TreeSelector/GroupMoveSelector.vue        |  92 ++++++++++++++
 frontend/src/views/chart/group/Group.vue      | 117 +++++++++++++++++-
 frontend/src/views/dataset/group/Group.vue    |   2 +-
 5 files changed, 295 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/views/chart/components/TreeSelector/ChartMoveSelector.vue
 create mode 100644 frontend/src/views/chart/components/TreeSelector/GroupMoveSelector.vue

diff --git a/backend/src/main/java/io/dataease/service/chart/ChartGroupService.java b/backend/src/main/java/io/dataease/service/chart/ChartGroupService.java
index 6759f2e529..4057690685 100644
--- a/backend/src/main/java/io/dataease/service/chart/ChartGroupService.java
+++ b/backend/src/main/java/io/dataease/service/chart/ChartGroupService.java
@@ -82,8 +82,7 @@ public class ChartGroupService {
 
     public List<ChartGroupDTO> tree(ChartGroupRequest chartGroup) {
         chartGroup.setLevel(null);
-        chartGroup.setPid("0");
-        chartGroup.setType("group");
+        chartGroup.setPid(null);
         chartGroup.setUserId(String.valueOf(AuthUtils.getUser().getUserId()));
         List<ChartGroupDTO> treeInfo = extChartGroupMapper.search(chartGroup);
         List<ChartGroupDTO> result = TreeUtils.mergeTree(treeInfo);
@@ -92,7 +91,8 @@ public class ChartGroupService {
 
     public List<ChartGroupDTO> treeNode(ChartGroupRequest chartGroup) {
         chartGroup.setLevel(null);
-        chartGroup.setPid(null);
+        chartGroup.setPid("0");
+        chartGroup.setType("group");
         chartGroup.setUserId(String.valueOf(AuthUtils.getUser().getUserId()));
         List<ChartGroupDTO> treeInfo = extChartGroupMapper.search(chartGroup);
         List<ChartGroupDTO> result = TreeUtils.mergeTree(treeInfo);
diff --git a/frontend/src/views/chart/components/TreeSelector/ChartMoveSelector.vue b/frontend/src/views/chart/components/TreeSelector/ChartMoveSelector.vue
new file mode 100644
index 0000000000..445c225fa0
--- /dev/null
+++ b/frontend/src/views/chart/components/TreeSelector/ChartMoveSelector.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-col style="height: 400px;overflow-y: auto;margin-bottom: 10px;">
+    <el-tree
+      :data="tData"
+      node-key="id"
+      :expand-on-click-node="false"
+      highlight-current
+      @node-click="nodeClick"
+    >
+      <span slot-scope="{ node, data }" :class="treeClass(data,node)">
+        <span style="display: flex;flex: 1;width: 0;">
+          <span v-if="data.type === 'scene'">
+            <svg-icon icon-class="scene" class="ds-icon-scene" />
+          </span>
+          <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
+        </span>
+      </span>
+    </el-tree>
+  </el-col>
+</template>
+
+<script>
+import { post } from '@/api/chart/chart'
+
+export default {
+  name: 'ChartMoveSelector',
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      tData: [],
+      currGroup: '',
+      groupForm: {
+        name: '',
+        pid: '0',
+        level: 0,
+        type: 'group',
+        children: [],
+        sort: 'type desc,name asc'
+      },
+      targetGroup: {}
+    }
+  },
+  watch: {
+    'item': function() {
+      this.tree(this.groupForm)
+    }
+  },
+  mounted() {
+    this.tree(this.groupForm)
+  },
+  methods: {
+    tree(group) {
+      post('/chart/group/tree', group).then(res => {
+        this.tData = res.data
+      })
+    },
+    nodeClick(data, node) {
+      this.targetGroup = data
+      this.$emit('targetDs', data)
+    },
+    treeClass(data, node) {
+      if (data.id === this.item.id) {
+        node.visible = false
+      }
+      return 'custom-tree-node'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right:8px;
+  }
+</style>
diff --git a/frontend/src/views/chart/components/TreeSelector/GroupMoveSelector.vue b/frontend/src/views/chart/components/TreeSelector/GroupMoveSelector.vue
new file mode 100644
index 0000000000..e5af73edc7
--- /dev/null
+++ b/frontend/src/views/chart/components/TreeSelector/GroupMoveSelector.vue
@@ -0,0 +1,92 @@
+<template>
+  <el-col style="height: 400px;overflow-y: auto;margin-bottom: 10px;">
+    <el-tree
+      :data="tData"
+      node-key="id"
+      :expand-on-click-node="false"
+      highlight-current
+      @node-click="nodeClick"
+    >
+      <span slot-scope="{ node, data }" :class="treeClass(data,node)">
+        <span style="display: flex;flex: 1;width: 0;">
+          <span v-if="data.type === 'scene'">
+            <svg-icon icon-class="scene" class="ds-icon-scene" />
+          </span>
+          <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
+        </span>
+      </span>
+    </el-tree>
+  </el-col>
+</template>
+
+<script>
+import { post } from '@/api/chart/chart'
+
+export default {
+  name: 'GroupMoveSelector',
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      tData: [],
+      currGroup: '',
+      groupForm: {
+        name: '',
+        pid: '0',
+        level: 0,
+        type: 'group',
+        children: [],
+        sort: 'type desc,name asc'
+      },
+      targetGroup: {}
+    }
+  },
+  watch: {
+    'item': function() {
+      this.tree(this.groupForm)
+    }
+  },
+  mounted() {
+    this.tree(this.groupForm)
+  },
+  methods: {
+    tree(group) {
+      post('/chart/group/tree', group).then(res => {
+        this.tData = [{
+          id: '0',
+          name: this.$t('dataset.dataset_group'),
+          pid: '0',
+          privileges: 'grant,manage,use',
+          type: 'group',
+          children: res.data
+        }]
+      })
+    },
+    nodeClick(data, node) {
+      this.targetGroup = data
+      this.$emit('targetGroup', data)
+    },
+    treeClass(data, node) {
+      if (data.id === this.item.id) {
+        node.visible = false
+      }
+      return 'custom-tree-node'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right:8px;
+  }
+</style>
diff --git a/frontend/src/views/chart/group/Group.vue b/frontend/src/views/chart/group/Group.vue
index 02dc1be710..1757341e7a 100644
--- a/frontend/src/views/chart/group/Group.vue
+++ b/frontend/src/views/chart/group/Group.vue
@@ -99,6 +99,9 @@
                       <el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('rename',data,node)">
                         {{ $t('chart.rename') }}
                       </el-dropdown-item>
+                      <el-dropdown-item icon="el-icon-right" :command="beforeClickMore('move',data,node)">
+                        {{ $t('dataset.move_to') }}
+                      </el-dropdown-item>
                       <el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('delete',data,node)">
                         {{ $t('chart.delete') }}
                       </el-dropdown-item>
@@ -126,6 +129,9 @@
                       <!--                  <el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('renameChart',data,node)">-->
                       <!--                    {{ $t('chart.rename') }}-->
                       <!--                  </el-dropdown-item>-->
+                      <el-dropdown-item icon="el-icon-right" :command="beforeClickMore('moveDs',data,node)">
+                        {{ $t('dataset.move_to') }}
+                      </el-dropdown-item>
                       <el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('deleteChart',data,node)">
                         {{ $t('chart.delete') }}
                       </el-dropdown-item>
@@ -294,12 +300,34 @@
         <el-button type="primary" size="mini" :disabled="!table.id" @click="createChart">{{ $t('chart.confirm') }}</el-button>
       </div>
     </el-dialog>
+
+    <!--移动分组-->
+    <el-dialog v-dialogDrag :title="moveDialogTitle" :visible="moveGroup" :show-close="false" width="30%" class="dialog-css">
+      <group-move-selector :item="groupForm" @targetGroup="targetGroup" />
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="closeMoveGroup()">{{ $t('dataset.cancel') }}</el-button>
+        <el-button :disabled="groupMoveConfirmDisabled" type="primary" size="mini" @click="saveMoveGroup(tGroup)">{{ $t('dataset.confirm') }}
+        </el-button>
+      </div>
+    </el-dialog>
+
+    <!--移动视图-->
+    <el-dialog v-dialogDrag :title="moveDialogTitle" :visible="moveDs" :show-close="false" width="30%" class="dialog-css">
+      <chart-move-selector :item="dsForm" @targetDs="targetDs" />
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="closeMoveDs()">{{ $t('dataset.cancel') }}</el-button>
+        <el-button :disabled="dsMoveConfirmDisabled" type="primary" size="mini" @click="saveMoveDs(tDs)">{{ $t('dataset.confirm') }}
+        </el-button>
+      </div>
+    </el-dialog>
   </el-col>
 </template>
 
 <script>
 import { post } from '@/api/chart/chart'
 import TableSelector from '../view/TableSelector'
+import GroupMoveSelector from '../components/TreeSelector/GroupMoveSelector'
+import ChartMoveSelector from '../components/TreeSelector/ChartMoveSelector'
 import {
   DEFAULT_COLOR_CASE,
   DEFAULT_LABEL,
@@ -314,7 +342,7 @@ import {
 
 export default {
   name: 'Group',
-  components: { TableSelector },
+  components: { TableSelector, GroupMoveSelector, ChartMoveSelector },
   props: {
     saveStatus: {
       type: Object,
@@ -365,7 +393,22 @@ export default {
         label: 'name',
         children: 'children',
         isLeaf: 'isLeaf'
-      }
+      },
+      dsForm: {
+        name: '',
+        pid: '0',
+        level: 0,
+        type: '',
+        children: [],
+        sort: 'type desc,name asc'
+      },
+      moveGroup: false,
+      tGroup: {},
+      moveDs: false,
+      tDs: {},
+      groupMoveConfirmDisabled: true,
+      dsMoveConfirmDisabled: true,
+      moveDialogTitle: ''
     }
   },
   computed: {
@@ -418,7 +461,12 @@ export default {
           this.groupForm = JSON.parse(JSON.stringify(param.data))
           break
         case 'move':
-
+          this.moveTo(param.data)
+          this.groupForm = JSON.parse(JSON.stringify(param.data))
+          break
+        case 'moveDs':
+          this.moveToDs(param.data)
+          this.dsForm = JSON.parse(JSON.stringify(param.data))
           break
         case 'delete':
           this.delete(param.data)
@@ -753,6 +801,69 @@ export default {
         node.loaded = false
         node.expand() // 主动调用展开节点方法，重新查询该节点下的所有子节点
       }
+    },
+
+    moveTo(data) {
+      this.moveGroup = true
+      this.moveDialogTitle = this.$t('dataset.m1') + (data.name.length > 10 ? (data.name.substr(0, 10) + '...') : data.name) + this.$t('dataset.m2')
+    },
+    closeMoveGroup() {
+      this.moveGroup = false
+      this.groupForm = {
+        name: '',
+        pid: '0',
+        level: 0,
+        type: '',
+        children: [],
+        sort: 'type desc,name asc'
+      }
+    },
+    saveMoveGroup() {
+      this.groupForm.pid = this.tGroup.id
+      post('/chart/group/save', this.groupForm).then(res => {
+        this.closeMoveGroup()
+        // this.tree(this.groupForm)
+        this.refreshNodeBy(this.groupForm.pid)
+      })
+    },
+    targetGroup(val) {
+      this.tGroup = val
+      this.groupMoveConfirmDisabled = false
+    },
+
+    moveToDs(data) {
+      this.moveDs = true
+      this.moveDialogTitle = this.$t('dataset.m1') + (data.name.length > 10 ? (data.name.substr(0, 10) + '...') : data.name) + this.$t('dataset.m2')
+    },
+    closeMoveDs() {
+      this.moveDs = false
+      this.dsForm = {
+        name: '',
+        pid: '0',
+        level: 0,
+        type: '',
+        children: [],
+        sort: 'type desc,name asc'
+      }
+    },
+    saveMoveDs() {
+      // if (this.tDs && this.tDs.type === 'group') {
+      //   return
+      // }
+      this.dsForm.sceneId = this.tDs.id
+      post('/chart/view/save', this.dsForm).then(res => {
+        this.closeMoveDs()
+        // this.tableTree()
+        this.refreshNodeBy(this.dsForm.sceneId)
+      })
+    },
+    targetDs(val) {
+      this.tDs = val
+      if (this.tDs.type === 'group') {
+        this.dsMoveConfirmDisabled = false
+      } else {
+        this.dsMoveConfirmDisabled = false
+      }
     }
   }
 }
diff --git a/frontend/src/views/dataset/group/Group.vue b/frontend/src/views/dataset/group/Group.vue
index 40e6b4d249..8c90d84757 100644
--- a/frontend/src/views/dataset/group/Group.vue
+++ b/frontend/src/views/dataset/group/Group.vue
@@ -317,7 +317,7 @@
       </div>
     </el-dialog>
 
-    <!--移动分组、场景-->
+    <!--移动分组-->
     <el-dialog v-dialogDrag :title="moveDialogTitle" :visible="moveGroup" :show-close="false" width="30%" class="dialog-css">
       <group-move-selector :item="groupForm" @targetGroup="targetGroup" />
       <div slot="footer" class="dialog-footer">