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="报表版本:">
          <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>