vent-template/src/views/vent/reportManager/comment/DeviceModal.vue

<template>
  <BasicModal
    :defaultFullscreen="defaultScreen"
    v-bind="$attrs"
    @register="registerModal"
    :title="title"
    :width="widthV"
    :showCancelBtn="false"
    :showOkBtn="false"
    :footer="null"
    destroyOnClose
    :mask-closable="false"
    @cancel="closeModalFn"
  >
    <!-- 报表新增 -->
    <div v-if="addOredit == 'add'">
      <a-form :model="formState" :label-col="{ style: { width: '130px' } }" :wrapper-col="{ span: 14 }">
        <a-form-item label="报表版本:">
          <JDictSelectTag v-model:value="formState.reportType" placeholder="请选择报表类型..." dictCode="reportType" />
        </a-form-item>
        <a-form-item label="报表类型:">
          <JDictSelectTag v-model:value="formState.reportVersion" placeholder="请选择报表版本..." dictCode="reportVersion" />
        </a-form-item>
        <div class="footer">
          <a-button type="primary" style="margin-right: 20px" @click="save">保存</a-button>
          <a-button type="primar" @click="closeModalFn">取消</a-button>
        </div>
      </a-form>
    </div>
    <!-- 报表编辑 -->
    <div v-else>
      <div id="fileEdit"></div>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { computed, unref, inject, reactive, ref, watch, defineProps } from 'vue';
  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useUserStore } from '/@/store/modules/user';

  let props = defineProps({
    addOredit: {
      type: String,
      default: '',
    },
    editID: {
      type: String,
      default: '',
    },
  });

  const userStore = useUserStore(); //获取用户信息
  let userId = unref(userStore.getUserInfo).id;
  let userName = unref(userStore.getUserInfo).username;
  console.log(userId, '用户id');
  console.log(userName, '用户名');

  let formState = reactive({
    reportType: '',
    reportVersion: '',
  });

  //设置标题
  let title = computed(() => {
    if (props.addOredit == 'add') {
      return '报表新增';
    } else {
      return '报表编辑';
    }
  });
  //弹窗宽度
  let widthV = computed(() => {
    if (props.addOredit == 'add') {
      return '600px';
    } else {
      return '1000px';
    }
  });

  //弹窗是否全屏
  let defaultScreen = computed(() => {
    if (props.addOredit == 'add') {
      return false;
    } else {
      return true;
    }
  });
  // 声明Emits
  const emit = defineEmits(['saveOrUpdate', 'register']);

  //表单赋值
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    //重置表单
    setModalProps({ confirmLoading: false });
    // Object.assign(deviceData, data.record);
    new DocsAPI.DocEditor(
      'fileEdit', // 元素id
      {
        type: 'desktop',
        width: '100%',
        height: '100%',
        document: {
          title: '文档管理',
          url: 'http://182.92.126.35:9999/ventanaly-sharefile/fileServer/onlyOffice/read?id=' + props.editID, //id表示文件id，后端接口用这个id来加载文件
          // url: `${window.location.origin}:9999/ventanaly-device/safety/reportInfo/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: 'http://182.92.126.35:9999/ventanaly-sharefile/fileServer/onlyOffice/save?id=' + props.editID, //id表示文件id，后端接口用这个id来加载文件
          // callbackUrl: `${window.location.origin}:9999/ventanaly-device/safety/reportInfo/onlyOffice/save?id=${props.editID}`, //id表示文件id，后端接口用这个id来加载文件
          coEditing: {
            mode: 'fast',
            change: true,
          },
          customization: {
            toolbarNoTabs: true,
            autosave: false, //是否自动保存
            forcesave: true, //定义保存按钮是否显示
            hideRightMenu: true,
          },
          //用户信息
          user: {
            id: userId, //用户ID
            name: userName, //用户名称
          },
        },
      }
    );
  });

  //点击图标关闭弹框
  const closeModalFn = () => {
    formState.reportType = '';
    formState.reportVersion = '';
    closeModal();
    // emit('closeModal')
  };

  //新增保存
  let save = () => {
    emit('saveOrUpdate', formState);
  };
</script>
<style scoped lang="less">
  ::v-deep .suffix {
    height: 32px;
    line-height: 32px;
    margin-left: 5px;
    color: #fff;
  }

  .footer {
    width: 100%;
    text-align: center;
    padding-top: 30px;
  }
</style>