eta_front/src/views/home_manage/components/SelectBoard.vue

<template>
  <el-dialog
    title="设置首页内容"
    :visible.sync="show"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    :center="true"
    v-dialogDrag
    custom-class="dialogclass"
    width="680px"
    @close="handleClose"
  >
    <div class="set-board-wrap">
      <div>BI看板</div>
      <el-cascader
        style="width:500px"
        v-model="selectBoardId"
        :props="{ emitPath: false }"
        :options="list"
        ref="selectBoardEl"
      ></el-cascader>
    </div>
    <div class="dia-bot">
        <el-button
          type="primary"
          plain
          @click="handleClose"
          style="margin-right: 20px"
          >{{ $t("Dialog.cancel_btn") }}</el-button
        >
        <el-button type="primary" @click="saveHandle">{{
          $t("Dialog.confirm_save_btn")
        }}</el-button>
      </div>
  </el-dialog>
</template>

<script>
import apiBiBoard from '@/api/modules/BIBoard.js'
export default {
  name: "selectBoard",
  model: {
    prop: 'show',
    event: 'showChange'
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    boardId:''
  },
  watch: {
    show(n) {
      if (n) {
        this.selectBoardId=this.boardId||''
        this.getList()
      }
    }
  },
  data() {
    return {
      list: [
        {
          label: '我的看板',
          value: '我的看板',
          children: []
        },
        {
          label: '共享看板',
          value: '共享看板',
          children: []
        },
        {
          label: '公共看板',
          value: '公共看板',
          children: []
        }
      ],
      selectBoardId: ''
    }
  },
  methods: {
    async saveHandle(){
      if(!this.selectBoardId){
        this.$message.warning('请选择BI看板')
        return
      }
      let FromType=3
      const elData=this.$refs.selectBoardEl.getCheckedNodes()
      if(elData[0].path[0]==='我的看板'){
        FromType=1
      }else if(elData[0].path[0]==='共享看板'){
        FromType=2
      }else{
        FromType=3
      }

      const res=await apiBiBoard.setHomePageBoard({
        BiDashboardId:this.selectBoardId,
        FromType:FromType
      })
      if(res.Ret===200){
        this.$message.success('保存成功')
        this.handleClose()
        this.$emit('change')
      }
    },

    // 公共看板列表
    async getList(type) {
      const resMy = await apiBiBoard.myBoardList()
      if (resMy.Ret === 200) {
        const arr = resMy.Data || []
        this.list[0].children = arr.map(item => {
          return {
            label: item.BiDashboardName,
            value: item.BiDashboardId
          }
        })
      }

      const resShare = await apiBiBoard.shareBoardList()
      if (resShare.Ret === 200) {
        const myArr = resShare.Data.MyList || []
        const otherArr = resShare.Data.OtherList || []
        this.list[1].children = [
          {
            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
              }
            })
          }
        ]
      }
      const resCommon = await apiBiBoard.commonBoardList()
      if(resCommon.Ret===200){
        const arr=resCommon.Data||[]
        this.list[2].children=arr.map(item1=>{
          const obj1={
            label:item1.GroupName,
            value:item1.GroupId+item1.GroupName,
            children:[]
          }
          obj1.children=item1.Children?item1.Children.map(item2=>{
            const obj2={
              label:item2.GroupName,
              value:item2.GroupId+item2.GroupName,
              children:[]
            }
            obj2.children=item2.DashboardList?item2.DashboardList.map(item3=>{
              return {
                label:item3.BiDashboardName,
                value:item3.BiDashboardId,
              }
            }):[]
          }):[]

          return obj1
        })
      }
    },

    handleClose() {
      this.boardId = ''
      this.$emit('showChange', false)
    },
  }
}
</script>

<style lang="scss" scoped>
.set-board-wrap{
  display: flex;
  align-items: center;
  gap: 0 10px;
}
.dia-bot {
  display: flex;
  justify-content: center;
  margin: 60px 0 40px 0;
}
</style>