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" />
          <JDictSelectTag v-if="kindType == 'fireSReport'" v-model:value="formState.reportType" placeholder="请选择报表类型..."
            dictCode="fireSReport" />
          <JDictSelectTag v-if="kindType == 'dustSReport'" v-model:value="formState.reportType" placeholder="请选择报表类型..."
            dictCode="dustSReport" />
          <JDictSelectTag v-if="kindType == 'gasSReport'" v-model:value="formState.reportType" placeholder="请选择报表类型..."
            dictCode="gasSReport" />
        </a-form-item>
        <a-form-item label="选择模板:">
          <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, 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: '',
  },
  optionLists: {
    type: Array,
    default: () => {
      return []
    }
  }
});
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({
  fileName: '',
  busKind: '',
  handTempid: '',
  reportType: '',
});
let kindType = ref('ventSReport')
let optionList = ref<any[]>([])

//设置标题
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, //用户名称
        },
      },
    }
  );
});

//业务种类下拉选项切换
function changeKind(val) {
  kindType.value = `${val}Report`
}
//点击图标关闭弹框
const closeModalFn = () => {
  formState.busKind=''
  formState.fileName=''
  formState.handTempid=''
  formState.reportType=''
  closeModal();
};
//新增保存
let save = () => {
  emit('saveOrUpdate', formState);
};

watch(() => props.optionLists, (newV, oldV) => {
  optionList.value = newV
}, { immediate: true, deep: true })
</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>