feat(fix):视图移动功能

2021-06-21 11:18:38 +08:00 · 2021-06-21 11:18:38 +08:00 · f6593d2360
commit f6593d2360
parent 86fd042ebd
5 changed files with 295 additions and 7 deletions
--- 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);
--- a/frontend/src/views/chart/components/TreeSelector/ChartMoveSelector.vue
+++ 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>
--- a/frontend/src/views/chart/components/TreeSelector/GroupMoveSelector.vue
+++ 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>
--- 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
+      }
    }
  }
 }
--- 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">