refactor(quickbi): 新增：quickbi 预览拦截

src/api/index.js

@@ -30,6 +30,7 @@ export * from './promotion/display_schedule'
 export * from './promotion/display_schedule_dashboard'
 export * from './promotion/plan'
 export * from './promotion/task'
+export * from './quickbi'
 export * from './scm/logistics_receipt'
 export * from './system/dict/data'
 export * from './system/dict/type'

src/api/quickbi/index.js

+import request from '@/utils/request'
+
+// 获取 quickBI 列表
+export const getQuickbiList = (params) => {
+  return request({
+    url: '/report/extra/quickbi/embed/list',
+    params
+  })
+}
+
+// 获取 ticketId
+export const getTicketId = (params) => {
+  return request({
+    url: '/report/extra/quickbi/embed/accessTicket',
+    params
+  })
+}
\ No newline at end of file

src/router/index.js

@@ -27,11 +27,6 @@ import { constantMobileRoutes } from '@/views/mobile/router/index.js' // 移动
  */
 // 使用的公共静态路由
 export let constantRoutes = [
-  {
-    path: '/ceshi',
-    component: () => import('@/views/ceshi.vue'),
-    hidden: true
-  },
   {
     path: '',
     component: Layout,
@@ -59,7 +54,14 @@ export let constantRoutes = [
     path: '/report/jmreport/shareView/:id',
     component: () => import('@/views/jimureport/entry.vue'),
     hidden: true
-  }]
+  },
+  // QuickBI 预览
+  {
+    path: '/report/quickbi/preview',
+    component: () => import('@/views/quickbi/preview/index.vue'),
+    hidden: true
+  },
+]
 // PC端 静态路由
 export const constantPCRoutes = [
   ...constantRoutes,

src/views/ceshi.vue

-<template>
-  <iframe class="ifame-tag"
-    :src="url"></iframe>
-</template>
-
-<script setup>
-const url = computed(() => {
-  const key = 'd0045f0a-a29b-4075-9282-4d771215e89a'
-  return `https://bi.aliyun.com/token3rd/dashboard/view/pc.htm?pageId=db99e0ec-f416-4abd-97be-d1543b286de8&embedDisplayParam=%7B%22showTitle%22%3Afalse%7D&accessTicket=${key}`
-})
-</script>
-
-<style scoped lang="scss">
-  .ifame-tag {
-    width: 100%;
-    height: 100%;
-  }
-</style>
\ No newline at end of file

src/views/quickbi/list/index.vue

+<template>
+  <div class="app-container">
+    <div class="container">
+      <!-- 表格数据 -->
+      <el-table v-loading="loading"
+        :data="reportList">
+        <el-table-column label="报表 ID"
+          key="id"
+          prop="id"
+          align="left"
+          width="100"
+          sortable />
+        <el-table-column label="报表名称"
+          key="name"
+          prop="name"
+          align="left"
+          sortable>
+          <template #default="{ row }">
+            <div style="display: flex; align-items: center">
+              <svg-icon icon-class="bg-document"></svg-icon>
+              <el-link :href="reportBaseDomain + reportShareViewURL + row.previewUrl"
+                target="_blank"
+                style="margin-left: 10px">{{ row.name }}</el-link>
+            </div>
+          </template>
+        </el-table-column>
+
+        <!-- 操作预览 -->
+        <el-table-column label="操作"
+          key="operation"
+          align="center">
+          <template #default="scope">
+            <el-button text
+              type="primary"
+              @click="previewClick(scope)">
+              预览
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script setup
+  name="Role">
+  import { getQuickbiList } from "@/api"
+  import useUserStore from '@/store/modules/user'
+
+  const { proxy } = getCurrentInstance()
+  const router = useRouter()
+  const userStore = useUserStore()
+  const reportBaseDomain = import.meta.env.VITE_APP_REPORT_URL // 基础域名
+  const reportViewURL = import.meta.env.VITE_APP_REPORT_PREVIEW_URL // 预览
+  const reportShareViewURL = import.meta.env.VITE_APP_REPORT_SHARE_PREVIEW_URL // 分享预览
+  const reportEditURL = import.meta.env.VITE_APP_REPORT_EDIT_URL // 新增/编辑
+  /*************** 报表列表部分 ****************/
+  // 报表搜索
+  const queryParams = reactive({
+    name: undefined, // 报表名称
+    category: undefined, // 报表类目
+    pageNum: 1,
+    pageSize: 10
+  })
+
+  // 获取报表列表
+  const loading = ref(true)
+  const reportList = ref([])
+  const total = ref(0)
+  // 查询报表列表
+  function getReportList() {
+    loading.value = true
+    getQuickbiList(queryParams).then(response => {
+      console.log(response)
+      reportList.value = response.data
+      loading.value = false
+      // total.value = response.data.total
+    })
+  }
+  getReportList()
+
+
+  const previewClick = (scope) => {
+    const row = scope.row
+    console.log(row.previewUrl, row.id)
+    router.push({
+      path: `/report/quickbi/preview`,
+      query: {
+        url: row.previewUrl,
+        id: row.id
+      }
+    })
+  }
+</script>
+<style scoped
+  lang="scss">
+  .app-container {
+    overflow-x: auto;
+  }
+
+  .container {
+    min-width: 600px;
+    /* 设置最小宽度确保表格可以横向滚动 */
+  }
+
+  /* 移动端适配 */
+  @media (max-width: 768px) {
+    .app-container {
+      overflow-x: scroll;
+      -webkit-overflow-scrolling: touch;
+      /* iOS 平滑滚动 */
+    }
+
+    .container {
+      min-width: 500px;
+      /* 移动端需要更大的最小宽度 */
+    }
+
+    /* 表格样式调整 */
+    ::v-deep(.el-table) {
+      .el-table__body-wrapper {
+        overflow-x: auto;
+      }
+    }
+  }
+</style>
\ No newline at end of file

src/views/quickbi/preview/index.vue

+<template>
+  <div>
+    <div class="app-container">
+      <div class="container">
+        <iframe :src="iframeURL"
+          frameborder="0"
+          width="100%"
+          height="800px"></iframe>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useRoute } from 'vue-router'
+import { getTicketId } from '@/api'
+import { onMounted } from 'vue'
+const route = useRoute()
+const ticket = ref('')
+const iframeURL = ref('')
+onMounted(() => {
+  getTicketId({
+    id: route.query.id
+  }).then(response => {
+    ticket.value = response.data.accessTicket
+    iframeURL.value = `https://bi.aliyun.com/token3rd/dashboard/view/pc.htm?pageId=db99e0ec-f416-4abd-97be-d1543b286de8&embedDisplayParam=%7B%22showTitle%22%3Afalse%7D&accessTicket=${ticket.value}`
+  })
+})
+</script>
+
+<style scoped></style>
\ No newline at end of file