mky-vent-base/src/views/vent/performance/comment/DeviceModal.vue

<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :title="title"
    width="900px"
    :defaultFullscreen="true"
    :showCancelBtn="false"
    :showOkBtn="false"
    :footer="null"
    destroyOnClose
  >
    <div id="fileEdit"></div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { unref, reactive } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { onMounted } from 'vue';
  import { useUserStore } from '/@/store/modules/user';

  let props = defineProps({
    fileType: {
      type: String,
      default: '',
    },
    editID: {
      type: String,
      default: '',
    },
  });
  //设置标题
  let title = '文档管理';
  const userStore = useUserStore(); //获取用户信息
  let userId = unref(userStore.getUserInfo).id;
  let userName = unref(userStore.getUserInfo).username;
  console.log(userId, '用户id');
  console.log(userName, '用户名');
  const record = reactive({ strtype: '', strname: '' });
  const remoteUrl = import.meta.env.DEV ? 'http://182.92.126.35' : 'http://' + window.location.hostname;
  //表单赋值
  const [registerModal, { setModalProps }] = useModalInner(async (data) => {
    //重置表单
    setModalProps({ confirmLoading: false });
    Object.assign(record, data.record);

    new DocsAPI.DocEditor(
      'fileEdit', // 元素id
      {
        type: 'desktop',
        width: '100%',
        height: '100%',
        document: {
          title: '文档管理',
          url: remoteUrl + ':9999/ventanaly-sharefile/fileServer/onlyOffice/read?id=' + props.editID, //id表示文件id，后端接口用这个id来加载文件
          // url: `${window.location.origin}:9999/ventanaly-sharefile/fileServer/onlyOffice/read?id=${props.editID}`, //id表示文件id，后端接口用这个id来加载文件
          fileType: props.fileType == 'doc' ? 'docx' : props.fileType == 'xls' ? 'xlsx' : props.fileType == 'ppt' ? 'pptx' : props.fileType, //当文件类型为doc、xls、ppt时，对应用docx、xlsx、pptx否则会保存异常。
          key: '',
          lang: 'zh-CN',
          permissions: {
            download: true, //是否可下载
            edit: true,
            fillForms: true,
            print: true, //是否可打印
          },
        },
        editorConfig: {
          lang: 'zh-CN',
          mode: 'edit', //view：只读且可复制内容，edit：可编辑
          callbackUrl: remoteUrl + ':9999/ventanaly-sharefile/fileServer/onlyOffice/save?id=' + props.editID, //id表示文件id，后端接口用这个id来加载文件
          // callbackUrl: `${window.location.origin}:9999/ventanaly-sharefile/fileServer/onlyOffice/save?id=${props.editID}`, //id表示文件id，后端接口用这个id来加载文件
          coEditing: {
            mode: 'fast',
            change: true,
          },
          customization: {
            toolbarNoTabs: true,
            autosave: false, //是否自动保存
            forcesave: true, //定义保存按钮是否显示
            hideRightMenu: true,
            spellcheck: false, //ture打开拼写检查，false关闭拼写检查。（默认为ture）
          },
          //用户信息
          user: {
            id: userId, //用户ID
            name: userName, //用户名称
          },
        },
      }
    );
  });

  onMounted(() => {});
</script>

<style scoped lang="less">
  ::v-deep .suffix {
    height: 32px;
    line-height: 32px;
    margin-left: 5px;
    color: #fff;
  }
</style>