gasInjection-project/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-if="addOredit == 'hisRecord'">
      <NormalHisTable
        :columns="columnsHis"
        :reportIds="reportId"
        :downLoad="hisdownload"
        :list="hisList"
        designScope="device-tabel"
        title="报表历史记录管理"
        :showTab="false"
      />
    </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 NormalHisTable from '../comment/NormalHisTable.vue';
  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useUserStore } from '/@/store/modules/user';
  import { hisList, hisdownload } from '../reportManager.api';
  import { columnsHis } from '../reportManager.data';

  let props = defineProps({
    addOredit: {
      type: String,
      default: '',
    },
    editID: {
      type: String,
      default: '',
    },
    fileType: {
      type: String,
      default: '',
    },
    reportLogHis: {
      type: String,
      default: '',
    },
    reportId: {
      type: String,
      default: '',
    },
  });
  const remoteUrl = import.meta.env.DEV ? 'http://182.92.126.35' : 'http://' + window.location.hostname;
  const userStore = useUserStore(); //获取用户信息
  let userId = unref(userStore.getUserInfo).id;
  let userName = unref(userStore.getUserInfo).username;

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

  //设置标题
  let title = computed(() => {
    if (props.addOredit == 'add') {
      return '报表新增';
    } else if (props.addOredit == 'hisRecord') {
      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: '860px',
        document: {
          title: '文档管理',
          url: remoteUrl + ':9999/ventanaly-device/safety/reportInfo/onlyOffice/read?id=' + props.editID + '&type=' + props.reportLogHis, //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: props.reportLogHis ? 'view' : 'edit', //view：只读且可复制内容，edit：可编辑
          callbackUrl: remoteUrl + ':9999/ventanaly-device/safety/reportInfo/onlyOffice/save?id=' + props.editID + '&type=' + props.reportLogHis, //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, //用户名称
          },
        },
      }
    );
  });

  //点击图标关闭弹框
  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;
  }
  ::v-deep .zxm-form {
    padding-top: 40px;
  }

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