bi看板

src/api/modules/BIBoard.js

@@ -2,9 +2,30 @@ import http from "@/api/http.js"
 
 //区间分析
 export default{
+  //我i的看板列表
+  myBoardList:params=>{
+    return http.get('/bi_dashborad/my_list',{})
+  },
+  //共享看板列表
+  shareBoardList:params=>{
+    return http.get('/bi_dashborad/share_list',{})
+  },
+  //公共看板列表
+  commonBoardList:params=>{
+    return http.get('/bi_dashborad/public_list',{})
+  },
+  //看板详情
+  boardDetail:params=>{
+    return http.get('/bi_dashborad/detail',params)
+  },
+
   // 新增看板
   addBoard:params=>{
     return http.post('/bi_dashborad/add',params)
   },
+  // 编辑看板
+  editBoard:params=>{
+    return http.post('/bi_dashborad/edit',params)
+  },
   
 }

src/views/BI_manage/components/BoardContent.vue

@@ -5,11 +5,11 @@
       <div
         class="BI-board-item-box"
         v-for="(item, index) in value"
-        :key="item.UniqueCode"
+        :key="item.BiDashboardDetailId"
         @dragover.prevent
         @drop="drop(index)"
       >
-        <component :is="getCompType(item.type)" :compData="item">
+        <component :is="getCompType(item.Type)" :compData="item">
           <template v-slot:drag>
             <!-- Draggable icon -->
             <img
@@ -24,7 +24,7 @@
             />
           </template>
           <template v-slot:delete>
-            <img class="icon" src="~@/assets/img/icons/delete-red.png" alt="" />
+            <img class="icon" src="~@/assets/img/icons/delete-red.png" alt="" @click="handleDel(index)"/>
           </template>
         </component>
       </div>
@@ -58,6 +58,10 @@ export default {
     getCompType(type) {
       return type === 1 ? ChartBox : TableBox;
     },
+    handleDel(index){
+      this.value.splice(index,1)
+      this.$emit('change',this.value)
+    },
     setDraggable(draggable, index) {
       const box = this.$el.querySelectorAll('.BI-board-item-box')[index];
       box.draggable = draggable;
@@ -73,7 +77,7 @@ export default {
       this.$set(this.value, index, temp);
       this.draggedIndex = null;
       this.$emit('input',this.value)
-      this.$emit('sortChange',this.value)
+      this.$emit('change',this.value)
     },
   }
 };

src/views/BI_manage/components/ChartBox.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="chart-box" v-if="compData" ref="compRef" v-loading="loading">
     <div class="top-title-box">
-      <div class="title" @click="goDetail">{{ compData.ChartName }}</div>
+      <div class="title" @click="goDetail">{{ chartInfo.ChartName }}</div>
       <div class="opt-box">
         <img
           class="icon"
@@ -22,7 +22,7 @@
         height="480px"
         :options="options"
         :chartInfo="chartInfo"
-        :index="compData.UniqueCode"
+        :index="compData.BiDashboardDetailId"
       />
     </div>
   </div>

src/views/BI_manage/editBoard.vue

@@ -18,7 +18,7 @@
       </div>
     </div>
     <!-- 看板内容模块 -->
-    <BIBoardContent v-model="boardData" />
+    <BIBoardContent v-model="boardDataList" />
 
     <!-- 选择图表 -->
     <SelectChart
@@ -47,6 +47,7 @@ function createUniqueIdGenerator() {
     return `selfId_${id}`;
   };
 }
+const getUniqueId = createUniqueIdGenerator();
 
 export default {
   components: {
@@ -57,26 +58,40 @@ export default {
   data() {
     return {
       name: '',
-      boardData: [],
+      boardDataList: [],
 
       showSelectChart: false,
       showSelectTable: false
     }
   },
+  created() {
+    if(this.$route.query.id){
+      this.getBoardDetail()
+    }
+  },
   methods: {
-    handleSave() {
+    // 获取看板详情
+    async getBoardDetail(){
+      const res=await apiBiBoard.boardDetail({DashboardId:Number(this.$route.query.id)})
+      if(res.Ret===200){
+        this.name=res.Data.BiDashboardName
+        this.boardDataList=res.Data.List||[]
+      }
+    },
+
+    async handleSave() {
       if (!this.name) {
         this.$message.warning('请填写看板名称')
         return
       }
-      if (this.boardData.length === 0) {
+      if (this.boardDataList.length === 0) {
         this.$message.warning('请至少选择一个图表或表格！')
         return
       }
 
-      const arr=this.boardData.map(item=>{
+      const arr=this.boardDataList.map(item=>{
         return {
-          Type:item.type,
+          Type:item.Type,
           UniqueCode:item.UniqueCode
         }
       })
@@ -84,6 +99,16 @@ export default {
         BiDashboardName:this.name,
         List:arr||[]
       }
+      const res=this.$route.query.id?await apiBiBoard.editBoard({
+        BiDashboardId:Number(this.$route.query.id),
+        ...params
+      }) :await apiBiBoard.addBoard(params)
+      if(res.Ret===200){
+        this.$message.success(this.$route.query.id?'编辑成功':'新增成功')
+        setTimeout(() => {
+          this.$router.back()
+        }, 1000);
+      }
 
     },
 
@@ -95,8 +120,9 @@ export default {
       }
       arr.forEach(item => {
         const obj = {
-          type: type === 'chart' ? 1 : 2,
-          ...item
+          Type: type === 'chart' ? 1 : 2,
+          UniqueCode:item.UniqueCode,
+          BiDashboardDetailId:getUniqueId()
         }
         this.boardData.push(obj)
       });

src/views/BI_manage/index.vue

@@ -34,18 +34,31 @@
       </div>
     </div>
     <div class="opt-box">
-      <el-cascader clearable></el-cascader>
+      <!-- 我的看板  -->
+      <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" type="text" @click="showSetCommon = true"
           >设置公共</el-button
         >
         <el-button type="text" @click="showSetShare = true">设置共享</el-button>
-        <el-button type="text">编辑</el-button>
+        <el-button type="text" @click="handleGoEdit">编辑</el-button>
         <el-button type="text" style="color: #f00">删除</el-button>
       </div>
     </div>
     <!-- 看板内容模块 -->
-    <BIBoardContent v-model="boardData" />
+    <BIBoardContent v-model="boardDataList" />
 
     <!-- 设置共享 -->
     <set-share v-model="showSetShare" />
@@ -57,6 +70,7 @@
 </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'
@@ -68,14 +82,123 @@ export default {
     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||[]
+      }
+    },
+
+    // 我的看板列表
+    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
+      }
     }
   },
 }