mky-vent-base/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="文件名称:">
          <a-input v-model:value="formState.fileName" placeholder="请输入文件名称..." />
        </a-form-item>
        <a-form-item label="业务种类:">
          <JDictSelectTag v-model:value="formState.busKind" placeholder="请选择业务种类..." dictCode="reportBusKind" @change="changeKind" />
        </a-form-item>
        <a-form-item label="报表类型:">
          <JDictSelectTag
            v-if="kindType == 'ventSReport'"
            v-model:value="formState.reportType"
            placeholder="请选择报表类型..."
            dictCode="ventSReport"
            @change="changeReportType"
          />
          <JDictSelectTag
            v-if="kindType == 'fireSReport'"
            v-model:value="formState.reportType"
            placeholder="请选择报表类型..."
            dictCode="fireSReport"
            @change="changeReportType"
          />
          <JDictSelectTag
            v-if="kindType == 'dustSReport'"
            v-model:value="formState.reportType"
            placeholder="请选择报表类型..."
            dictCode="dustSReport"
            @change="changeReportType"
          />
          <JDictSelectTag
            v-if="kindType == 'gasSReport'"
            v-model:value="formState.reportType"
            placeholder="请选择报表类型..."
            dictCode="gasSReport"
            @change="changeReportType"
          />
        </a-form-item>
        <a-form-item label="模式类型:">
          <a-radio-group v-model:value="formState.modelType" name="radioGroup">
            <a-radio v-for="item in radioList" :value="item.value">{{ item.label }}</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="选择模板:" v-if="formState.modelType">
          <a-select v-model:value="formState.handTempid">
            <a-select-option v-for="item in optionList" :key="item.value">{{ item.label }}</a-select-option>
          </a-select>
        </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, onMounted } from 'vue';
  import { message } from 'ant-design-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 { reportList, hisList, hisdownload } from '../reportManager.api';
  import { columnsHis } from '../reportManager.data';
  // [perf-base-v1] 卡1: OnlyOffice api.js 改为打开编辑器时按需加载
  import { loadDocsApi } from '/@/utils/onlyOffice';

  let props = defineProps({
    addOredit: {
      type: String,
      default: '',
    },
    editID: {
      type: String,
      default: '',
    },
    fileType: {
      type: String,
      default: '',
    },
    reportLogHis: {
      type: String,
      default: '',
    },
    reportId: {
      type: String,
      default: '',
    },
  });
  // [SEC-20260913] 去掉 DEV 分支硬编码 IP，统一按当前主机名取（与生产一致）
  // [SEC-20260913-R2] 去掉 :9999 网关直连，统一走 /modelreq 反代（保持绝对地址，供 OnlyOffice 服务端回源）
  const remoteUrl = window.location.origin + '/modelreq';
  const userStore = useUserStore(); //获取用户信息
  let userId = unref(userStore.getUserInfo).id;
  let userName = unref(userStore.getUserInfo).username;

  let formState = reactive({
    fileName: '',
    busKind: '',
    handTempid: '',
    reportType: '',
    modelType: '',
  });
  let kindType = ref('ventSReport');
  let optionList = reactive<any[]>([]);
  let radioList = reactive<any[]>([
    { label: '手动', value: 1 },
    { label: '自动', value: 0 },
  ]);

  //设置标题
  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);
    // [perf-base-v1] 卡1: 先按需加载 OnlyOffice api.js，成功后再初始化编辑器
    setModalProps({ loading: true, loadingTip: '文档编辑器加载中...' });
    try {
      await loadDocsApi();
    } catch (e) {
      console.error(e);
      message.error('文档编辑器加载失败，请检查 OnlyOffice 服务后重试');
      return;
    } finally {
      setModalProps({ loading: false });
    }
    new DocsAPI.DocEditor(
      'fileEdit', // 元素id
      {
        type: 'desktop',
        width: '100%',
        height: '860px',
        document: {
          title: '文档管理',
          url: remoteUrl + '/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 + '/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, //用户名称
          },
        },
      }
    );
  });

  //业务种类下拉选项切换
  function changeKind(val) {
    formState.busKind = val;
    kindType.value = `${val}Report`;
    getModuleList();
  }
  //报表类型下拉选项切换
  function changeReportType(val) {
    formState.reportType = val;
    getModuleList();
  }

  //点击图标关闭弹框
  const closeModalFn = () => {
    formState.modelType = '';
    formState.busKind = '';
    formState.fileName = '';
    formState.handTempid = '';
    formState.reportType = '';
    closeModal();
  };
  //新增保存
  let save = () => {
    emit('saveOrUpdate', formState);
  };
  // 获取模板列表数据
  async function getModuleList() {
    let res = await reportList({ pageNo: 1, pageSize: 100, busKind: formState.busKind, reportType: formState.reportType, modelType: 2 });
    console.log(res, '报表模板数据-------');
    if (res.records.length != 0) {
      optionList.length = 0;
      res.records.forEach((el) => {
        optionList.push({ label: el.fileName, value: el.id });
      });
    }
  }
</script>
<style scoped lang="less">
  ::v-deep .suffix {
    height: 32px;
    line-height: 32px;
    margin-left: 5px;
    color: #fff;
  }

  ::v-deep .zxm-form {
    padding-top: 20px;
  }

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