eta_front/src/views/home_manage/index.vue

<template>
  <div class="home-page">
    <div class="top-nav-box">
      <div class="name">{{boardInfo&&boardInfo.BiDashboardName}}</div>
      <div class="btns">
        <el-button type="text" v-if="boardInfo&&permissionBtn.isShowBtn('homePagePermission','home_boarddetail')" @click="handleGoDetail">看板详情</el-button>
        <el-button type="text" @click="showSet=true" v-permission="permissionBtn.homePagePermission.home_setbiboard">设置看板</el-button>
      </div>
    </div>
    <!-- 看板内容模块 -->
    <BIBoardContent v-model="boardDataList"/>

    <!-- 设置看板 -->
    <SelectBoard v-model="showSet" :boardId="boardId" @change="getBoardData"/>
  </div>
</template>

<script>
import BIBoardContent from '@/views/BI_manage/components/BoardContent.vue'
import SelectBoard from './components/SelectBoard.vue'
import apiBiBoard from '@/api/modules/BIBoard.js'
export default {
  components:{BIBoardContent,SelectBoard},
  data() {
    return {
      homeBoardInfo:null,
      boardId:'',
      boardInfo:null,
      boardDataList:[],
      showSet:false
    }
  },
  created() {
    this.getBoardData()
  },
  methods: {
    handleGoDetail(){
      this.$router.push({
        path:'/BIBoard',
        query:{
          id:this.boardId,
          type:this.homeBoardInfo.FromType
        }
      })
    },

    async getBoardInfo(){
      const res=await apiBiBoard.boardDetail({ DashboardId: this.boardId })
      if(res.Ret===200){
        this.boardInfo = res.Data
        this.boardDataList = res.Data.List || []
      }
    },

    async getBoardData(){
      const res=await apiBiBoard.getHomePageBoard()
      if(res.Ret===200){
        this.homeBoardInfo=res.Data
        this.boardId=res.Data.BiDashboardId
        this.getBoardInfo()
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.home-page{
  $border-color: #c8cdd9;
  background-color: #fff;
  border: 1px solid $border-color;
  .top-nav-box {
    padding: 14px 20px;
    border-bottom: 1px solid $border-color;
    display: flex;
    justify-content: space-between;
    .name{
      flex: 1;
    }
  }
}
</style>