refactor(jimureport): 重构：把积木报表浏览地址改成分享浏览地址（因为浏览地址限制同时间只能有 1 个人访问）

.env.development

@@ -16,9 +16,11 @@ VITE_APP_REDIRECT_URL = 'http://localhost:8085'
 # 积木报表服务地址
 VITE_APP_REPORT_URL = 'https://sfa-qa.wxl66.cn'
 # 积木报表预览地址
-VITE_APP_REPORT_PREVIEW_URL = 'https://sfa-qa.wxl66.cn/report/jmreport/view'
+VITE_APP_REPORT_PREVIEW_URL = '/report/jmreport/view'
+# 积木报表分享预览地址
+VITE_APP_REPORT_SHARE_PREVIEW_URL = '/report'
 # 积木报表编辑地址
-VITE_APP_REPORT_EDIT_URL = 'https://sfa-qa.wxl66.cn/report/jmreport/index'
+VITE_APP_REPORT_EDIT_URL = '/report/jmreport/index'
 
 # 模板表格
 VITE_APP_PLAN_TEMPLATE_EXCEL = 'https://link-promotion.oss-cn-shanghai.aliyuncs.com/file/%E6%96%B0%E5%A2%9E%E6%88%96%E4%BF%AE%E6%94%B9%E8%AE%A1%E5%88%92-%E6%A8%A1%E6%9D%BF4.0.xlsx'

.env.production

@@ -16,6 +16,8 @@ VITE_APP_REDIRECT_URL = 'https://sfa.wxl66.cn/link/'
 VITE_APP_REPORT_URL = 'https://sfa.wxl66.cn'
 # 积木报表预览地址
 VITE_APP_REPORT_PREVIEW_URL = '/report/jmreport/view'
+# 积木报表分享预览地址
+VITE_APP_REPORT_SHARE_PREVIEW_URL = '/report'
 # 积木报表编辑地址
 VITE_APP_REPORT_EDIT_URL = '/report/jmreport/index'
 

.env.staging

@@ -15,6 +15,8 @@ VITE_APP_REDIRECT_URL = 'https://sfa-qa.wxl66.cn/'
 VITE_APP_REPORT_URL = 'https://sfa-qa.wxl66.cn'
 # 积木报表预览地址
 VITE_APP_REPORT_PREVIEW_URL = '/report/jmreport/view'
+# 积木报表分享预览地址
+VITE_APP_REPORT_SHARE_PREVIEW_URL = '/report'
 # 积木报表编辑地址
 VITE_APP_REPORT_EDIT_URL = '/report/jmreport/index'
 

src/views/jimureport/design/index.vue

@@ -115,24 +115,37 @@
         <!-- 新增/编辑分享弹窗 -->
         <el-dialog title="创建分享链接"
           v-model="dialogVisible">
-          <el-form label-width="180px">
-            <el-form-item label="过期时间">
-              <el-radio-group v-model="expireTime">
-                <el-radio label="永久有效">永久有效</el-radio>
-                <el-radio label="7天">7天</el-radio>
-                <el-radio label="1天">1天</el-radio>
-              </el-radio-group>
+          <div v-if="shareReportUrl">
+            <el-form-item label="分享链接">
+              <el-input v-model="shareReportUrl"
+                style="width: 80%; margin-right: 20px;"
+                placeholder="分享链接" />
+              <el-button type="primary"
+                v-copyText="shareReportUrl"
+                v-copyText:callback="copyTextSuccess">复制链接剪切板</el-button>
             </el-form-item>
-            <el-form-item label="是否开启密码">
-              <el-radio-group v-model="isPasswordEnabled">
+          </div>
+          <div v-else>
+            <el-form label-width="180px"
+              v-model="shareForm">
+              <el-form-item label="过期时间">
+                <el-radio-group v-model="shareForm.termOfValidity">
+                  <el-radio value="1">永久有效</el-radio>
+                  <el-radio value="2">7天</el-radio>
+                  <el-radio value="3">1天</el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <!-- <el-form-item label="是否开启密码">
+              <el-radio-group v-model="shareForm.isPasswordEnabled">
                 <el-radio label="否">否</el-radio>
                 <el-radio label="是">是</el-radio>
               </el-radio-group>
-            </el-form-item>
-            <el-form-item label="是否检验分享token">
-              <el-switch v-model="isCheckToken" />
-            </el-form-item>
-          </el-form>
+            </el-form-item> -->
+              <!-- <el-form-item label="是否检验分享token">
+              <el-switch v-model="shareForm.isCheckToken" />
+            </el-form-item> -->
+            </el-form>
+          </div>
           <template #footer>
             <span class="dialog-footer">
               <el-button @click="dialogVisible = false">取消</el-button>
@@ -148,12 +161,14 @@
 
 <script setup>
 import { getToken } from '@/utils/auth'
-import { getReportFolderStructureAPI, getDesignReportListAPI, deleteReportAPI, copyReportAPI, addReportAPI, importReportAPI, selShareReportAPI } from '@/api'
+import { getReportFolderStructureAPI, getDesignReportListAPI, deleteReportAPI, copyReportAPI, addReportAPI, importReportAPI, selShareReportAPI, addOrEditShareReportAPI } from '@/api'
 import useUserStore from '@/store/modules/user'
 
 const { proxy } = getCurrentInstance()
 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 // 新增/编辑
 
 /************ 文件夹分组 ********************/
@@ -222,14 +237,14 @@ const getReportList = async () => {
 getReportList()
 // 报表预览地址
 const getReportPreviewUrl = (row) => {
-  return `${reportViewURL}/${row.id}?token=${getToken()}&tenantId=${userStore.$state.userInfo.deptId}`
+  return `${reportBaseDomain}${reportShareViewURL}${row.shareViewUrl}`
 }
 
 /********* 报表功能按钮 ***********/
 // 新建报表
 const handleAdd = async () => {
   const res = await addReportAPI()
-  window.open(`${reportEditURL}/${res.result.id}?menuType=${queryParams.reportType}&token=${getToken()}&tenantId=${userStore.$state.userInfo.deptId}`)
+  window.open(`${reportBaseDomain}${reportEditURL}/${res.result.id}?menuType=${queryParams.reportType}&token=${getToken()}&tenantId=${userStore.$state.userInfo.deptId}`)
 }
 // 导入报表
 const handleImport = () => {
@@ -248,20 +263,62 @@ const handleImport = () => {
   })
 
 }
+
 // 分享报表
-const shareReportUrl = ref('')
+const shareReportUrl = ref('') // 分享报表地址链接
 const dialogVisible = ref(false)
+const nowShareRow = ref(null) // 当前分享报表数据对象
+const shareForm = reactive({
+  termOfValidity: '1', // 1：永久有效 2：7天 3：1天
+  // isPasswordEnabled: '否',
+  verifyShareToken: true
+})
 const handleShare = async (row) => {
   const res = await selShareReportAPI({
     reportId: row.id
   })
-  shareReportUrl.value = res.result?.previewUrl
+  shareReportUrl.value = res.result?.previewUrl ? reportBaseDomain + reportShareViewURL + res.result?.previewUrl : ''
+  nowShareRow.value = row
   dialogVisible.value = true
 }
+// 确认分享
+const handleConfirm = async () => {
+  if (shareReportUrl.value) {
+    dialogVisible.value = false
+    return
+  }
+  const res = await addOrEditShareReportAPI({
+    id: nowShareRow.value.id,
+    lastUpdateTime: new Date().getTime(),
+    previewLock: "",
+    previewLockStatus: "0",
+    previewUrl: "",
+    reportId: nowShareRow.value.id,
+    shareToken: Math.random().toString(36).substring(2),
+    status: "0",
+    termOfValidity: shareForm.termOfValidity,
+    verifyShareToken: shareForm.verifyShareToken ? '1' : '0'
+  })
+  shareReportUrl.value = reportBaseDomain + reportShareViewURL + res.result?.previewUrl
+  // 将分享链接复制到剪贴板
+  const input = document.createElement('input')
+  input.setAttribute('value', shareReportUrl.value)
+  document.body.appendChild(input)
+  input.select()
+  document.execCommand('copy')
+  document.body.removeChild(input)
+  proxy.$modal.msgSuccess('链接已复制到剪切板')
+  dialogVisible.value = false
+}
+// 点击分享地址复制
+function copyTextSuccess() {
+  proxy.$modal.msgSuccess('链接已复制到剪切板')
+}
+
 
 // 修改报表
 const handleEdit = (row) => {
-  window.open(`${reportEditURL}/${row.id}?token=${getToken()}&tenantId=${userStore.$state.userInfo.deptId}`)
+  window.open(`${reportBaseDomain}${reportEditURL}/${row.id}?token=${getToken()}&tenantId=${userStore.$state.userInfo.deptId}`)
 }
 // 删除报表
 const handleDelete = (row) => {

src/views/jimureport/list/index.vue

@@ -40,7 +40,7 @@
           <template #default="{ row }">
             <div style="display: flex; align-items: center">
               <svg-icon icon-class="bg-document"></svg-icon>
-              <el-link :href="row.previewUrl"
+              <el-link :href="reportBaseDomain + reportShareViewURL + row.previewUrl"
                 target="_blank"
                 style="margin-left: 10px">{{ row.name }}</el-link>
             </div>
@@ -88,7 +88,7 @@
               <el-button text
                 type="primary"
                 icon="Share"
-                v-copyText="scope.row.previewUrl"
+                v-copyText="reportBaseDomain + reportShareViewURL + scope.row.previewUrl"
                 v-copyText:callback="copyTextSuccess" />
             </el-tooltip>
 
@@ -113,7 +113,10 @@
 
   const { proxy } = getCurrentInstance()
   const userStore = useUserStore()
-  const reportViewURL = import.meta.env.VITE_APP_REPORT_PREVIEW_URL
+  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 showSearch = ref(true)

src/views/jimureport/manager/index.vue

@@ -53,10 +53,12 @@
           prop="name"
           align="left"
           sortable>
-          <template #default="scope">
+          <template #default="{ row }">
             <div style="display: flex; align-items: center">
               <svg-icon icon-class="bg-document"></svg-icon>
-              <span style="margin-left: 10px">{{ scope.row.name }}</span>
+              <el-link :href="getReportPreviewUrl(row)"
+                target="_blank"
+                style="margin-left: 10px">{{ row.name }}</el-link>
             </div>
           </template>
         </el-table-column>
@@ -212,6 +214,10 @@
   import { selReportListAPI, selReportCategoryAPI, deptTreeSelectList, listUser, batchAuthReportAPI, selReportAuthUserListAPI } from "@/api"
 
   const { proxy } = getCurrentInstance()
+  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 // 新增/编辑
 
   /*************** 报表列表部分 ****************/
   // 报表搜索
@@ -253,6 +259,10 @@
     })
   }
   getReportList()
+  // 报表预览地址
+  const getReportPreviewUrl = (row) => {
+    return `${reportBaseDomain}${reportShareViewURL}${row.previewUrl}`
+  }
 
   /**************** 分配用户 ****************/
   const { sys_normal_disable } = proxy.useDict("sys_normal_disable");