feat: 分享收藏完善

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">

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;
 
 }

frontend/src/api/panel/enshrine.js

+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
+  })
+}
+

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
     }
   }
 }

frontend/src/views/panel/enshrine/index.vue

+<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>

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))
     }
   }
 }

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)
+      })
     }
 
   }