kindergarten_java/reading-platform-frontend/src/views/office/WebOffice.vue

<template>
  <div v-if="!expire" ref="containerRef" class="w-full h-full"></div>
  <div v-else class="flex justify-center">
    <div class="my-60px">
      链接已失效!<span class=" cursor-pointer color-#0085FF ml-10px" @click="home">返回首页</span>
    </div>
  </div>

  <!-- <Modal ref="modalRef" class="max-w-80%" width="1340px" v-model:open="open" :footer="null" title="在线资源">

    <div class="flex min-h-600px bg-#f5f5f5 flex-col ">
      <div class="bg-white p-10px">
        <a-input-search allowClear class="w-full max-w-360px ml-5px" v-model:value="searchName" placeholder="请输入作者"
          enter-button="搜索" size="large" @search="getImgs" />
      </div>
      <div class="flex flex-grow flex-wrap pt-15px pl-15px">
        <div v-for="item in dataSource"
          class="mr-15px mb-15px w-200px max-w-200px max-h-260px bg-white p-6px flex flex-col rounded-10px">

          <div class="">{{ item.name }}</div>
          <img class=" object-contain my-auto  cursor-pointer" alt="资源过期了" :src="item.url + img_resize"
            @click="setImgPreview(item.url)" />
          <div class="flex justify-around mt-5px" style="">
            <a-button class="mx-auto my-5px" type="primary" @click="setImgPreview(item.url)"> 查看</a-button>
            <a-button class="mx-auto my-5px" type="primary" @click="addImg(item)" :loading="loading_add">
              使用</a-button>
          </div>
        </div>
      </div>
      <div class="flex mx-15px mb-15px bg-white py-10px" v-if="pagination">
        <div style="margin-left: auto;margin-right: 12px;">
          <Pagination v-model:current="pagination.current" @change="paginationChange" @showSizeChange="pageSizeChange"
            :showSizeChanger="true" :total="pagination.total" v-model:pageSize="pagination.pageSize" />
        </div>
      </div>
    </div>
  </Modal> -->
</template>
<!--  阿里云IMM weboffice  -->
<script lang="ts" name="WebOffice" setup>
import { onMounted, ref, nextTick, reactive, watch, onUnmounted, onBeforeUnmount } from 'vue';

import request from '/@/apis/fetch';
// import { Modal, Pagination } from 'ant-design-vue';
import {
  generateWebofficeToken,
  generateWebofficeTokenReadOnly,
  refreshWebofficeToken,
} from '@/api/imm.api';
import { useRoute, useRouter } from 'vue-router';
// import { usePermission } from '@/hooks/web/usePermission';
//   import { insertPPTImage, insertWordImage } from './webOffice';
import { getTemItem, TemObj } from './temObjs';
import { createImgPreview } from '/@/components/Preview/index';

const containerRef = ref(null);
const route = useRoute();
const open = ref(false);
const expire = ref(false);
const router = useRouter();
let updateSizeInterval: any;
// const { hasPermission } = usePermission();
onMounted(() => {
  nextTick(() => {
    init(containerRef.value);
  })
  updateSizeInterval = setInterval(() => {
    if (baseInstance.value) {
      updateSize();
    }
  }, 1000 * 60 * 5)
});
const _temObj = ref<TemObj>({
  id: '',
  type: '',
  isEdit: false,
  name: '',
  url: '',
});
const onUnmountedUpdateSize = ref(true);
const updateSize = async () => {
  if (!onUnmountedUpdateSize.value) {
    return;
  }
  if (!expire.value && _temObj.value.isEdit) {
    var formData = new FormData();
    formData.append('id', _temObj.value.id);
    formData.append('type', _temObj.value.type);
    navigator.sendBeacon('/activity/cms/cmsFilePublic/updateSize', formData);
  }
}
onBeforeUnmount(() => {
  updateSize();
  onUnmountedUpdateSize.value = false;
  clearInterval(updateSizeInterval);
  clearTimeout(timer.value);
})
const timer = ref<any>(null);

const debouncedFn = (time = 1000) => {
  clearTimeout(timer.value);
  timer.value = setTimeout(() => {
    updateSize();
  }, time);
};

onUnmounted(() => {
  window.removeEventListener('beforeunload', updateSize);
})
window.addEventListener('beforeunload', updateSize);

function home() {
  router.replace("/datas");
}
const baseInstance = ref<any>(null);
async function init(mount, timeout = 10 * 60 * 1000) {
  if (!mount) {
    console.error('确保挂载节点元素存在。 一般在 onMounted 钩子中调用。');
  }
  // IMM vue3接入文档 https://help.aliyun.com/zh/imm/user-guide/vue3-usage?spm=a2c4g.11186623.0.0.3a0244142zAkss
  // 获取 token
  // let tokenInfo = await props.getTokenFun(props.teachingMaterialsImmUrl);

  const temObj = getTemItem(route.query._t as string);
  if (!temObj) {
    expire.value = true;
    return;
  }

  _temObj.value = temObj;

  const url = decodeURIComponent(`oss://lesingle-activity${new URL(decodeURIComponent(temObj.url)).pathname}`);
  let tokenInfo = await getTokenFun(url, temObj);
  const instance = (window as any).aliyun.config({
    mount,
    url: tokenInfo.webofficeURL,
    refreshToken: () => {
      // timeout过期时刷新 token
      // return props.refreshTokenFun(tokenInfo).then((data) => {
      return refreshTokenFun(tokenInfo).then((data) => {
        Object.assign(tokenInfo, data);
        return {
          token: tokenInfo.accessToken,
          timeout,
        };
      });
    },
  });
  baseInstance.value = instance;
  instance.setToken({
    token: tokenInfo.accessToken,
    timeout,
  });
  await instance.ready();
  // const imgurl = 'http://image.activity.lesingle.com/activitymaterial/poster/%E5%8A%A8%E7%89%A9%E7%BB%98%E6%9C%AC_1736908271102.jpg';
  // const imgurl = 'https://img0.baidu.com/it/u=3217812679,2585737758&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500';
  // const app = instance.Application;
  // if (app && app.ActiveDocument) {
  //   await insertWordImage(instance, imgurl);
  // } else if (app && app.ActivePresentation) {
  //   await insertPPTImage(instance, imgurl);
  // }

  // try {
  //   if (temObj.isEdit) {
  //     const app = instance.Application;
  //     // 获取 InsertTab 标签页下的所有控件
  //     const controls = await app.CommandBars('InsertTab').Controls;

  //     const newButton = await controls.Add(1);//：添加一个按钮控件，其中1表示按钮类型。
  //     newButton.Caption = '在线图片';//：设置按钮的标题。
  //     newButton.OnAction = () => open.value = true;//：设置按钮点击事件的回调函数。
  //     newButton.Picture = imgstr;
  //   }

  // } catch (error) {
  //   console.error('下拉框', error)
  // }
  instance.on('fileStatus', () => {
    debouncedFn(5000);
  });
  instance.ApiEvent.AddApiEventListener('error', (err) => {
    console.log('发生错误:', err);
  })

}

/**
 * 获取IMM凭证信息
 */
async function getTokenFun(url: any, temObj: TemObj) {
  let res = temObj.isEdit
    ? await generateWebofficeToken({ url: url, name: temObj.name })
    : await generateWebofficeTokenReadOnly({ url: url, name: temObj.name });
  return res
}

/**
 * 刷新IMM凭证信息
 */
async function refreshTokenFun(tokenInfo: any) {
  console.log('refreshWebofficeToken is called');
  let res = await refreshWebofficeToken({ accessToken: tokenInfo.accessToken, refreshToken: tokenInfo.refreshToken });
  return res;
}


</script>

<style scoped lang="less">
.activity {
  font-weight: bold;
  background: rgba(24, 144, 255, 0.08);
  color: #1890FF;
}



.cardView {
  margin-left: 12px;
  padding-left: 12px;
  margin-top: 12px;
  flex-wrap: wrap;

  &>div {
    margin-right: 12px;
    margin-top: 6px;
    margin-bottom: 6px;
    overflow: hidden;
    border-radius: 6px;
    width: 200px;
  }

  /*
  img {
    width: 200px;
    height: 200px;
    object-fit: contain;
  }
    */
}
</style>