From 6b285d739182df7a61ae2ddd3bd06a87bfbef404 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Tue, 20 Apr 2021 14:19:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=86=E4=BA=AB=E6=94=B6=E8=97=8F?=
 =?UTF-8?q?=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../base/mapper/ext/ExtPanelStoreMapper.xml   |  3 +-
 .../io/dataease/dto/panel/PanelStoreDto.java  |  2 +
 frontend/src/api/panel/enshrine.js            | 27 ++++++
 .../src/views/panel/GrantAuth/shareTree.vue   | 16 +++-
 frontend/src/views/panel/enshrine/index.vue   | 96 +++++++++++++++++++
 frontend/src/views/panel/list/PanelMain.vue   | 17 +++-
 .../src/views/panel/list/PanelViewShow.vue    | 38 +++++++-
 7 files changed, 190 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/api/panel/enshrine.js
 create mode 100644 frontend/src/views/panel/enshrine/index.vue

diff --git a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelStoreMapper.xml b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelStoreMapper.xml
index 20c2a13620..c991ebc2a0 100644
--- a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelStoreMapper.xml
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelStoreMapper.xml
@@ -4,6 +4,7 @@
 
     <resultMap id="panelStoreMap" type="io.dataease.dto.panel.PanelStoreDto" >
         <id column="store_id" property="storeId"></id>
+        <result column="panel_group_id" property="panelGroupId"></result>
         <result column="name" property="name"></result>
     </resultMap>
 
@@ -11,7 +12,7 @@
 
 
     <select id="query" parameterType="io.dataease.base.mapper.ext.query.GridExample" resultMap="panelStoreMap">
-       select s.store_id, g.name
+       select s.store_id,s.panel_group_id, g.name
        from panel_store s
        left join panel_group g on g.id = s.panel_group_id
         <if test="_parameter != null">
diff --git a/backend/src/main/java/io/dataease/dto/panel/PanelStoreDto.java b/backend/src/main/java/io/dataease/dto/panel/PanelStoreDto.java
index 9e5f0631fd..2f5c3127b9 100644
--- a/backend/src/main/java/io/dataease/dto/panel/PanelStoreDto.java
+++ b/backend/src/main/java/io/dataease/dto/panel/PanelStoreDto.java
@@ -11,5 +11,7 @@ public class PanelStoreDto {
     private Long storeId;
     @ApiModelProperty("仪表板名称")
     private String name;
+    @ApiModelProperty("仪表板Id")
+    private String panelGroupId;
 
 }
diff --git a/frontend/src/api/panel/enshrine.js b/frontend/src/api/panel/enshrine.js
new file mode 100644
index 0000000000..d04787633b
--- /dev/null
+++ b/frontend/src/api/panel/enshrine.js
@@ -0,0 +1,27 @@
+import request from '@/utils/request'
+
+export function saveEnshrine(panelGroupId) {
+  return request({
+    url: '/api/store/' + panelGroupId,
+    method: 'post',
+    loading: true
+  })
+}
+
+export function deleteEnshrine(id) {
+  return request({
+    url: '/api/store/remove/' + id,
+    method: 'post',
+    loading: true
+  })
+}
+
+export function enshrineList(data) {
+  return request({
+    url: '/api/store/list',
+    method: 'post',
+    loading: true,
+    data
+  })
+}
+
diff --git a/frontend/src/views/panel/GrantAuth/shareTree.vue b/frontend/src/views/panel/GrantAuth/shareTree.vue
index 1eba43faa5..f81fc250ba 100644
--- a/frontend/src/views/panel/GrantAuth/shareTree.vue
+++ b/frontend/src/views/panel/GrantAuth/shareTree.vue
@@ -19,6 +19,8 @@
 
 <script>
 import { loadTree } from '@/api/panel/share'
+import { uuid } from 'vue-uuid'
+import { get } from '@/api/panel/panel'
 export default {
   name: 'ShareTree',
   data() {
@@ -41,7 +43,19 @@ export default {
       })
     },
     handleNodeClick(data) {
-      console.log(data)
+      get('panel/group/findOne/' + data.id).then(response => {
+        this.$store.commit('setComponentData', this.resetID(JSON.parse(response.data.panelData)))
+        this.$store.commit('setCanvasStyle', JSON.parse(response.data.panelStyle))
+
+        this.$store.dispatch('panel/setPanelInfo', data)
+      })
+    },
+    resetID(data) {
+      data.forEach(item => {
+        item.id = uuid.v1()
+      })
+
+      return data
     }
   }
 }
diff --git a/frontend/src/views/panel/enshrine/index.vue b/frontend/src/views/panel/enshrine/index.vue
new file mode 100644
index 0000000000..f101f1ada1
--- /dev/null
+++ b/frontend/src/views/panel/enshrine/index.vue
@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <el-table
+
+      class="de-filter-data-table"
+      :data="starDatas"
+      :show-header="false"
+      :highlight-current-row="true"
+      style="width: 100%"
+    >
+      <el-table-column prop="name" label="名称">
+        <template :id="scope.row.storeId" slot-scope="scope">
+          <div class="start-item">
+            <div class="filter-db-row star-item-content" @click="showPanel(scope.row)">
+              <i class="el-icon-s-data" />
+              <span> {{ scope.row.name }}</span>
+            </div>
+            <div class="star-item-close">
+              <i class="el-icon-close " @click="remove(scope.row)" />
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { deleteEnshrine, enshrineList } from '@/api/panel/enshrine'
+import { uuid } from 'vue-uuid'
+import { get } from '@/api/panel/panel'
+export default {
+  name: 'Enshrine',
+  data() {
+    return {
+      starDatas: []
+    }
+  },
+  created() {
+    this.initData()
+  },
+  methods: {
+    showPanel(row) {
+      get('panel/group/findOne/' + row.panelGroupId).then(response => {
+        this.$store.commit('setComponentData', this.resetID(JSON.parse(response.data.panelData)))
+        this.$store.commit('setCanvasStyle', JSON.parse(response.data.panelStyle))
+        const data = {
+          id: row.panelGroupId,
+          name: row.name
+        }
+        this.$store.dispatch('panel/setPanelInfo', data)
+      })
+    },
+    resetID(data) {
+      data.forEach(item => {
+        item.id = uuid.v1()
+      })
+
+      return data
+    },
+    remove(row) {
+      deleteEnshrine(row.storeId).then(res => {
+        this.initData()
+      })
+    },
+    initData() {
+      enshrineList({}).then(res => {
+        this.starDatas = res.data
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.start-item {
+    width: 100%;
+    height: 25px;
+    margin: 0 0 0 10px;
+}
+.star-item-content {
+    width: calc(100% - 60px);
+    position: absolute;
+}
+.star-item-close {
+    width: 25px;
+    right: 5px;
+    position: absolute;
+    display: none;
+}
+.start-item:hover {
+    .star-item-close {
+        display: block;
+    }
+}
+</style>
diff --git a/frontend/src/views/panel/list/PanelMain.vue b/frontend/src/views/panel/list/PanelMain.vue
index f314f18e67..449a84aed3 100644
--- a/frontend/src/views/panel/list/PanelMain.vue
+++ b/frontend/src/views/panel/list/PanelMain.vue
@@ -6,9 +6,9 @@
           <span slot="label"><i class="el-icon-document" />列表</span>
           <panel-list />
         </el-tab-pane>
-        <el-tab-pane name="panels_star">
+        <el-tab-pane name="panels_star" :lazy="true">
           <span slot="label"><i class="el-icon-star-off" />收藏</span>
-          开发中...
+          <enshrine v-if="showEnshrine" />
         </el-tab-pane>
         <el-tab-pane name="panels_share" :lazy="true">
           <span slot="label"><i class="el-icon-share" />分享</span>
@@ -29,14 +29,16 @@ import DeAsideContainer from '@/components/dataease/DeAsideContainer'
 import PanelList from '../list/PanelList'
 import PanelViewShow from '../list/PanelViewShow'
 import ShareTree from '../GrantAuth/shareTree'
+import Enshrine from '../enshrine/index'
 
 export default {
   name: 'PanelMain',
-  components: { DeMainContainer, DeContainer, DeAsideContainer, PanelList, PanelViewShow, ShareTree },
+  components: { DeMainContainer, DeContainer, DeAsideContainer, PanelList, PanelViewShow, ShareTree, Enshrine },
   data() {
     return {
       activeName: 'PanelList',
-      showShare: false
+      showShare: false,
+      showEnshrine: false
     }
   },
   methods: {
@@ -45,10 +47,17 @@ export default {
       if (tab.name === 'panels_share') {
         this.refreshShare()
       }
+      if (tab.name === 'panels_star') {
+        this.refreshEnshrine()
+      }
     },
     refreshShare() {
       this.showShare = false
       this.$nextTick(() => (this.showShare = true))
+    },
+    refreshEnshrine() {
+      this.showEnshrine = false
+      this.$nextTick(() => (this.showEnshrine = true))
     }
   }
 }
diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue
index fc0cb69e64..fb50d304b4 100644
--- a/frontend/src/views/panel/list/PanelViewShow.vue
+++ b/frontend/src/views/panel/list/PanelViewShow.vue
@@ -19,6 +19,18 @@
             <el-button class="el-icon-view" size="mini" circle @click="clickPreview" />
           </el-tooltip>
         </span>
+
+        <span v-if="!hasStar && panelInfo" style="float: right;margin-right: 10px">
+          <el-tooltip content="收藏">
+            <el-button class="el-icon-star-off" size="mini" circle @click="star" />
+          </el-tooltip>
+        </span>
+
+        <span v-if="hasStar && panelInfo" style="float: right;margin-right: 10px">
+          <el-tooltip content="取消">
+            <el-button class="el-icon-star-on" size="mini" circle @click="unstar" />
+          </el-tooltip>
+        </span>
       </el-row>
       <!--TODO 仪表盘预览区域-->
       <el-row class="panel-design-preview">
@@ -48,7 +60,7 @@ import SaveToTemplate from '@/views/panel/list/SaveToTemplate'
 import { mapState } from 'vuex'
 import html2canvas from 'html2canvas'
 import FileSaver from 'file-saver'
-
+import { enshrineList, saveEnshrine, deleteEnshrine } from '@/api/panel/enshrine'
 export default {
   name: 'PanelViewShow',
   components: { Preview, SaveToTemplate },
@@ -57,7 +69,8 @@ export default {
       showMain: true,
       templateInfo: '',
       templateSaveTitle: '保存为模板',
-      templateSaveShow: false
+      templateSaveShow: false,
+      hasStar: false
     }
   },
   computed: {
@@ -73,7 +86,10 @@ export default {
     panelInfo(newVal, oldVla) {
       // 刷新 进行重新渲染
       this.showMain = false
-      this.$nextTick(() => { this.showMain = true })
+      this.$nextTick(() => {
+        this.showMain = true
+        this.initHasStar()
+      })
     }
   },
   mounted() {
@@ -137,6 +153,22 @@ export default {
     },
     closeSaveDialog() {
       this.templateSaveShow = false
+    },
+    star() {
+      this.panelInfo && saveEnshrine(this.panelInfo.id).then(res => {
+        this.hasStar = true
+      })
+    },
+    unstar() {
+      this.panelInfo && deleteEnshrine(this.panelInfo.id).then(res => {
+        this.hasStar = false
+      })
+    },
+    initHasStar() {
+      const param = {}
+      enshrineList(param).then(res => {
+        this.hasStar = res.data && res.data.some(item => item.panelGroupId === this.panelInfo.id)
+      })
     }
 
   }