eta_front/src/views/BI_manage/index.vue

<template>
  <div class="BI-page">
    <div class="top-nav-box">
      <div class="nav-btns">
        <el-button
          class="nav-btn"
          type="primary"
          :plain="navType !== 1"
          @click="handleNavTypeChange(1)"
          >我的看板</el-button
        >
        <el-button
          class="nav-btn"
          type="primary"
          :plain="navType !== 2"
          @click="handleNavTypeChange(2)"
          >共享看板</el-button
        >
        <el-button
          class="nav-btn"
          type="primary"
          :plain="navType !== 3"
          @click="handleNavTypeChange(3)"
          >公共看板</el-button
        >
      </div>
      <!-- 添加看板 -->
      <div class="right-btn-box" v-if="navType === 1">
        <el-button
          type="primary"
          @click="$router.push('/editBIBoard')"
          v-permission="permissionBtn.BIBoardPermission.BIBoard_add"
          >添加看板</el-button
        >
      </div>
      <!-- 设置公共看板分类 -->
      <div class="right-btn-box" v-if="navType === 3">
        <el-button
          type="primary"
          @click="showCommonClassify = true"
          v-permission="permissionBtn.BIBoardPermission.BIBoard_addclassify"
          >设置公共看板分类</el-button
        >
      </div>
    </div>
    <div class="opt-box">
      <!-- 我的看板  -->
      <el-select
        v-model="selectBoardId"
        placeholder="请选择看板"
        v-if="navType === 1"
      >
        <el-option
          v-for="item in myBoardList"
          :key="item.BiDashboardId"
          :value="item.BiDashboardId"
          :label="item.BiDashboardName"
        ></el-option>
      </el-select>
      <!-- 共享看板 -->
      <el-cascader
        v-model="selectBoardId"
        :props="{ emitPath: false }"
        :options="shareBoardList"
        v-if="navType === 2"
      ></el-cascader>
      <!-- 公共看板 -->
      <el-cascader
        v-model="selectBoardId"
        :props="{ emitPath: false }"
        :options="commonBoardList"
        v-if="navType === 3"
      ></el-cascader>

      <div class="right-opt-box">
        <el-button
          v-if="navType === 1&&permissionBtn.isShowBtn('BIBoardPermission','BIBoard_setcommon')"
          type="text"
          @click="showSetCommon = true"
          >设置公共</el-button
        >
        <el-button type="text" @click="showSetShare = true">设置共享</el-button>
        <el-button type="text" @click="handleGoEdit">编辑</el-button>
        <el-button type="text" style="color: #f00">删除</el-button>
      </div>
    </div>
    <!-- 看板内容模块 -->
    <BIBoardContent v-model="boardDataList" :canDrag="false" />

    <!-- 设置共享 -->
    <set-share v-model="showSetShare" />
    <!-- 设置公共 -->
    <SetCommon v-model="showSetCommon" />
    <!-- 公共看板分类 -->
    <CommonClassify v-model="showCommonClassify" />
  </div>
</template>

<script>
import apiBiBoard from '@/api/modules/BIBoard.js'
import BIBoardContent from './components/BoardContent.vue'
import CommonClassify from './components/CommonClassify.vue'
import SetCommon from './components/SetCommon.vue'
import SetShare from './components/SetShare.vue'

export default {
  components: { BIBoardContent, SetShare, SetCommon, CommonClassify },
  data() {
    return {
      navType: 1,// 

      boardInfo: null,//看板详情数据
      boardDataList: [],//看板数据

      selectBoardId: 0,//当前选择的看板id
      myBoardList: [],
      shareBoardList: [],
      commonBoardList: [],

      showSetShare: false,
      showSetCommon: false,
      showCommonClassify: false,
    }
  },
  watch: {
    selectBoardId(n) {
      n && this.getBoardDetail()
    }
  },
  created() {
    this.getMyBoardList()
  },
  methods: {
    handleGoEdit() {
      this.$router.push({
        path: "/editBIBoard",
        query: {
          id: this.selectBoardId
        }
      })
    },

    // 获取看板详情
    async getBoardDetail() {
      const res = await apiBiBoard.boardDetail({ DashboardId: this.selectBoardId })
      if (res.Ret === 200) {
        this.boardInfo = res.Data
        this.boardDataList = res.Data.List || []
        console.log(this.permissionBtn);
      }
    },

    // 我的看板列表
    async getMyBoardList() {
      const res = await apiBiBoard.myBoardList()
      if (res.Ret === 200) {
        this.myBoardList = res.Data || []
        if (this.myBoardList.length > 0) {
          this.selectBoardId = this.myBoardList[0].BiDashboardId
        }
      }
    },

    // 共享看板列表
    async getShareBoardList() {
      const res = await apiBiBoard.shareBoardList()
      if (res.Ret === 200) {
        const myArr = res.Data.MyList || []
        const otherArr = res.Data.OtherList || []
        const temarr = [...myArr, ...otherArr]
        this.shareBoardList = [
          {
            label: '我共享的',
            value: 'my_share',
            children: myArr.map(item => {
              return {
                label: item.BiDashboardName,
                value: item.BiDashboardId
              }
            })
          },
          {
            label: '共享给我的',
            value: 'other_share',
            children: otherArr.map(item => {
              return {
                label: item.BiDashboardName,
                value: item.BiDashboardId
              }
            })
          }
        ]

        if (temarr.length > 0) {
          this.selectBoardId = temarr[0].BiDashboardId
        }
      }
    },

    // 公共看板列表
    async getCommonBoardList() {
      const res = await apiBiBoard.commonBoardList()
      if (res.Ret === 200) {
        this.commonBoardList = res.Data || []
        if (this.commonBoardList.length > 0) {
          this.selectBoardId = this.commonBoardList[0].BiDashboardId
        }
      }
    },

    handleNavTypeChange(e) {
      if (this.navType === e) return
      this.navType = e

      this.selectBoardId = 0
      this.boardDataList = []
      this.boardDetail = null
      if (this.navType === 1) {
        this.getMyBoardList()
        return
      }
      if (this.navType === 2) {
        this.getShareBoardList()
        return
      }
      if (this.navType === 3) {
        this.getCommonBoardList()
        return
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.BI-page {
  $border-color: #c8cdd9;
  background-color: #fff;
  border: 1px solid $border-color;
  .top-nav-box {
    padding: 14px 20px;
    border-bottom: 1px solid $border-color;
    position: relative;
    .nav-btns {
      position: relative;
      bottom: -15px;
      .nav-btn {
        border-bottom: none;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
    .right-btn-box {
      position: absolute;
      right: 20px;
      top: 14px;
      border-left: 1px solid $border-color;
      padding-left: 10px;
    }
  }
  .opt-box {
    padding: 14px 20px;
    border-bottom: 1px solid $border-color;
    .right-opt-box {
      float: right;
    }
  }
}
</style>
<!-- 1+3+1+1+2+3+2=13 (后台) -->