yudao-admin-yiqun/yudao-ui-admin-vue3/src/views/pressure2/dynamictb/DynamicTbForm.vue

<template>
  <div class="unit-create-and-edit" v-loading="formLoading">
    <el-tabs v-model="activeTab" @tab-click="handleTabClick" tab-position="left" class="unit-content"
      :before-leave="handleBeforeTabLeave">
      <div class="c-header">
        <div class="title">模板详情</div>
        <el-button class="close" link @click="handleClose"><el-icon size="22">
            <Close />
          </el-icon></el-button>
      </div>
      <el-tab-pane label="模板信息" name="模板信息">
        <div class="form-container">
          <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" v-loading="formLoading">
          <el-form-item label="模板名字" prop="tbName">
            <el-input v-model="formData.tbName" placeholder="请输入模板名字" />
          </el-form-item>
          <el-form-item label="模板编号" prop="tbCode">
            <el-input v-model="formData.tbCode" placeholder="请输入模板编号" />
          </el-form-item>
          <el-form-item label="模板分类" prop="tbType">
            <el-select v-model="formData.tbType" placeholder="请选择模板分类">
              <el-option v-for="dict in getIntDictOptions(DICT_TYPE.PRESSURE2_TB_TYPE)" :key="dict.value"
                :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="模板类型" prop="reportType">
            <el-select v-model="formData.reportType" placeholder="请选择模板类型">
              <el-option v-for="dict in getIntDictOptions(DICT_TYPE.PRESSURE2_DYNAMIC_REPORT_TYPE)" :key="dict.value"
                         :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="项目分类" prop="pjType">
            <el-select v-model="formData.pjType" placeholder="请选择项目分类">
              <el-option v-for="dict in getIntDictOptions(DICT_TYPE.PRESSURE2_DYNAMIC_PROJECT_TYPE)"
                :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="false" label="模板地址" prop="tbUrl">
            <el-input v-model="formData.tbUrl" placeholder="请输入模板地址" />
          </el-form-item>
          <el-form-item label="版本号" prop="versionNo">
            <el-input v-model="formData.versionNo" placeholder="请输入版本号" />
          </el-form-item>
          <el-form-item label="模板说明" prop="tbNote">
            <el-input v-model="formData.tbNote" type="textarea" placeholder="请输入模板说明" />
          </el-form-item>
          <el-form-item label="创建人名" prop="creatorName">
            <el-input v-model="formData.creatorName" placeholder="请输入创建人名" />
          </el-form-item>
          <el-form-item label="报告原件" prop="filePaths">
            <CustomUploadFile
              v-model:fileList="formData.filePaths"
              apiUrl="infra/file/upload"
              accept=".pdf,.jpg,.png,.doc,.wps,.docx,.DOC"
              list-type="text"
            />
          </el-form-item>
        </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="模板文件" name="模板文件">
        <!--<SpreadView v-if="isSpredaShow" :dtParams="dtParams" :formData="formData" @success="getData" />-->
        <SpreadEditor v-if="isSpredaShow" :dtParams="dtParams" :formData="formData" @success="getData" />
      </el-tab-pane>
      <el-tab-pane label="模板pdf" name="模板pdf">
        <div class="default-toolbar">
          <el-button type="primary" @click="handleOpenFileUploadModal">上传模板</el-button>
          <el-button type="primary" @click="saveDocument">保存模板</el-button>
        </div>
        <docEditor :config="officeConfig" @docReady="onDocumentReady" @docCreate="onCreateDoc" ref="officeEvents"/>

        <!--<DocumentEditor
          id="docEditor"
          v-if="officeVisible"
          :documentServerUrl="documentServerUrl"
          :config="officeConfig"
          :events_onDocumentReady="onDocumentReady"
          :onLoadComponentError="onLoadComponentError"
        />-->
      </el-tab-pane>
      <el-tab-pane :label="showInfos.title" :name="showInfos.title" v-if="formType !== 'create' && connectInfos?.length">
        <el-tabs v-model="activeSpreadTab" type="border-card" class="spread-tabs">
          <el-tab-pane
            v-for="(item, index) in spreadDataList"
            :key="index"
            :label="getTemplateName(item)"
            :name="index"
            class="spread-tab-pane"
          >
            <div class="spread-scrollbar-wrapper">
              <el-scrollbar>
                <SpreadViewer :initData="item.initData" ref="spreadRefs" />
              </el-scrollbar>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>
    <div class="unit-footer-btns">
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </div>
    <FileUploadModal ref="fileUploadModalRef" @success="handleFileUploadSuccess" />
  </div>

</template>

<script setup lang="ts">
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { DynamicTbApi, DynamicTbVO } from '@/api/pressure2/dynamictb'
import { Close } from "@element-plus/icons-vue";
//import SpreadView from "@/components/DynamicReport/index1.vue";
import {SpreadEditor, SpreadViewer} from '@/components/DynamicReport/index';
//import { DocumentEditor } from "@onlyoffice/document-editor-vue";
import { DocEditor,DocEditorEvents } from '@/components/BwDocEditor'
import FileUploadModal from './ImportFile.vue'
import {ref } from "vue";
import GC from "@grapecity-software/spread-sheets";
import undo = GC.Spread.Sheets.Commands.undo;
import {useUserStore} from "@/store/modules/user";
import {InitParams} from "@/components/DynamicReport/SpreadInterface";
import {DynamicTbInsApi} from '@/api/pressure2/dynamictbins'
import {BoilerConnectRecordReportApi} from "@/api/pressure2/boilerconnectrecordreport";

/** 承压动态报表表单 表单 */
defineOptions({ name: 'DynamicTbForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const {getUser} = useUserStore()
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  tbName: undefined,
  tbCode: undefined,
  tbType: undefined,
  reportType: undefined,
  pjType: undefined,
  tbUrl: undefined,
  versionNo: undefined,
  tbNote: undefined,
  creatorName: getUser.nickname,
  inPath: undefined,
  formUrl: undefined,
  formPath: undefined,
  filePaths: [],
})
const formRules = reactive({
  tbName: [{ required: true, message: '模板名字不能为空', trigger: 'blur' }],
  tbCode: [{ required: true, message: '模板编号不能为空', trigger: 'blur' }],
  tbType: [{ required: true, message: '模板分类不能为空', trigger: 'change' }],
  reportType: [{ required: true, message: '模板类型不能为空', trigger: 'change' }],
  pjType: [{ required: true, message: '项目分类不能为空', trigger: 'change' }]
})

//const documentServerUrl = import.meta.env.VITE_ONLY_OFFICE_SERVER_URL;

const fileUploadModalRef = ref<InstanceType<typeof FileUploadModal>>();
const currentUploadMap = reactive({
  field: '',
  fieldAttr: '',
})
// 预览
const router = useRouter();
const connectInfos = ref<[]>(null);
const showInfos = ref({
  title : undefined,
  type : undefined
})

// 根据 reportType 获取对应的模板 ID
const getTemplateId = (item: any) => {
  return formData.value.reportType === 100 ? item.reportTemplateId : item.recordTemplateId
}

// SpreadViewer 相关数据
const activeSpreadTab = ref<number | string>(0)
const spreadRefs = ref()
const spreadDataList = ref<Array<any>>([])

// 根据 reportType 获取对应的模板名称
const getTemplateName = (item: any) => {
  return formData.value.reportType === 100 ? item.reportTemplateName : item.recordTemplateName
}
const initConnectInfos = async () => {

  if (!tbId.value || !formData.value.reportType) return

  const isRecord = formData.value.reportType === 100
  const isReport = formData.value.reportType === 200
  
  if (isRecord || isReport) {
    showInfos.value = {
      title: isRecord ? '报告模板' : '记录模板',
      type: isRecord ? 'record' : 'report'
    }

    connectInfos.value = await BoilerConnectRecordReportApi.getByTemplateId({
      templateId: tbId.value,
      type: showInfos.value.type
    })

    // 为每个 connectInfo 创建对应的 SpreadViewer 数据
    spreadDataList.value = []
    const currentIndex = spreadDataList.value.length
    
    for (const [index, item] of connectInfos.value.entries()) {
      const templateId = getTemplateId(item)
      
      try {
        const res = await DynamicTbInsApi.getOrCreatePreviewData(templateId)
        
        spreadDataList.value.push({
          ...item,
          initData: {
            templateId: templateId,
            refId: res.refId,
            refName: '',
            insId: '',
            opType: 1, // 0:excel,1: pdf
          } as InitParams
        })

        // 等待 DOM 更新后刷新对应的 SpreadViewer
        setTimeout(() => {
          if (spreadRefs.value && Array.isArray(spreadRefs.value)) {
            spreadRefs.value[index]?.reloadView()
          }
        }, 400)

      } catch (error) {
        console.error(`加载模板 ${getTemplateName(item)} 失败:`, error)
      }
    }

  }
}

const handleOpenFileUploadModal = () => {
  //type: string, attach: string
  //currentUploadMap.field = type
  //currentUploadMap.fieldAttr = attach
  if(formData.value.id){
    fileUploadModalRef.value?.open();
  } else {
    message.alert("先保存才能导入模板！");
  }

}

const handleFileUploadSuccess = (fileInfo:{fileName: string, fileUrl: string,fileInfo:any}) => {
  //formData.value.tbUrl = fileInfo.fileUrl;
  //存filePath
  formData.value.inPath = fileInfo.fileUrl;
  getDocToDPFToken(formData.value.inPath,true);
  console.log('handleFileUploadSuccess:',fileInfo);

  //exceptionInfo.value[currentUploadMap.field] = fileInfo.fileName
  //exceptionInfo.value[currentUploadMap.fieldAttr] = fileInfo.fileUrl
  //console.log('handleFileUploadSuccess:', exceptionInfo.value)
}

//const officeVisible = ref(false)
const officeEditor = ref<any>(null);
const officeKey=ref<string>(null);
const officeEvents=ref<DocEditorEvents>(null);
const officeVisible=ref<boolean>(false);
const officeConfig = ref({
  document: {
    fileType: 'pdf',
    key: null,
    permissions: {
      edit: true,
    },
    title: 'Form Template QC12005-202400',
    url: 'http://192.168.0.53/temp/QC12005-202400.pdf'
  },
  documentType: "pdf",
  token: ''
});
const officeParam=ref({
  documentType: 'PDF',
  fileType:'pdf',
  key: 'QC12005-202402_pdf',
  title: 'QC12005-202402',
  url: 'http://192.168.0.53/temp/QC12005-202402.pdf',
  pm_edit: true,
  pm_fillForms: false,
  refId: '',
});

const setToken=async ()=>{
  let oConfig= await DynamicTbApi.getToken(officeParam.value);
  //oConfig.token='';
  if(officeEditor.value){
    officeEditor.value.refreshFile(oConfig);
  } else {
    officeConfig.value =oConfig;
  }
  //officeVisible.value=true;
}

//setToken();

const getDocToDPFToken=async (filePath:string,isNew:boolean)=>{
  officeVisible.value=false;

  let oConfig=  await DynamicTbApi.getDocToDPFToken(filePath,formData.value.id,isNew);

  officeConfig.value =oConfig;
  formData.value.formUrl=oConfig.document.url;
  formData.value.formPath=oConfig.document.key;
  officeKey.value=oConfig.document.key;
  /*
  if(officeEditor.value){
    officeEditor.value.refreshFile(oConfig);
  }*/
  officeVisible.value=true;
  //officeVisible.value=true;
}

/*
const loadPdfInit=()=>{

  getDocToDPFToken
}*/

const loadDPFToekn = async()=>{
  //officeVisible.value=false;
  //officeEditor.value?.destroyEditor();
  //officeParam.value.url='http://192.168.0.53:6180/cache/files/data/conv_b41bf875f729618600e4cc4ab04ae2296e239d9f80da814cdd8c26a710fa86fd.docx_513/output.pdf/QC12005-202400.pdf?md5=0CU3XwzCCGbb59DmozCQVA&expires=1763603489&shardkey=b41bf875f729618600e4cc4ab04ae2296e239d9f80da814cdd8c26a710fa86fd.docx&filename=QC12005-202400.pdf';
  officeParam.value.key="QC12005-202402_pdf";
  officeEditor.value?.destroyEditor();
  let oConfig= await DynamicTbApi.getToken(officeParam.value);
  officeConfig.value =oConfig;
  /*
  if(officeEditor.value){
    officeEditor.value.refreshFile(oConfig);
  } */
  //officeVisible.value=true;
}

const loadFilePathToekn = async ()=>{
  //officeVisible.value=false;
  officeEditor.value?.destroyEditor();
  let filePath='b41bf875f729618600e4cc4ab04ae2296e239d9f80da814cdd8c26a710fa86fd.docx';
  getDocToDPFToken(filePath,false);
}

const onDocumentReady = (event)=>{
  //const documentEditor = window.DocEditor.instances["docEditor"];
  //var a=window.DocEditor;
  //officeEditor.value = documentEditor;
  //const documentEditor =
  //officeEditor.value= event.target; //event.target.DocEditor();
  officeEditor.value?.showMessage("Welcome to ONLYOFFICE Editor!");
  console.log("Document is loaded");
};

const onCreateDoc=(e)=>{
  officeEditor.value= e.target; // event.target.DocEditor();
  officeEditor.value?.showMessage("Welcome to ONLYOFFICE Editor!");
  console.log("Document is create");
}


const clearDocument=()=>{
  //const documentEditor = window.DocEditor?.instances["docEditor"];
  //documentEditor?.destroyEditor();
  officeEvents.value.closeEditor();
}

const saveDocument=async ()=>{

  //const documentEditor = window.DocEditor.instances["docEditor"];
  //documentEditor.destroyEditor();
  //const docAPI = await import(documentServerUrl+'web-apps/apps/api/documents/api.js');
  //let docEditor =new window.DocsAPI.DocEditor("docEditor", officeConfig.value);
  let connector=officeEditor.value.createConnector();
  connector.executeMethod("GetAllContentControls", [],(data)=>{
    var a=data;
    console.log("Document is GetAllContentControls:"+JSON.stringify(data));
  });
  //let a=officeEditor.value?.serviceCommand('init',officeConfig.value);
  console.log("Document is save click");
}

const onLoadComponentError= (errorCode, errorDescription)=>{
  switch(errorCode) {
    case -1: // Unknown error loading component
      console.log(errorDescription);
      break;

    case -2: // Error load DocsAPI from http://documentserver/
      console.log(errorDescription);
      break;

    case -3: // DocsAPI is not defined
      console.log(errorDescription);
      break;
  }
};

const dtParams = ref({
  tbCode: '',
  tbVersion: null
});
const isSpredaShow = ref(false);
const formRef = ref() // 表单 Ref
// el-tab 点击事件
const activeTab = ref('模板信息');
const handleTabClick = async (pane: {
  paneName: string
}) => {
  let name = pane.paneName;
  if (name == '模板文件') {
    if (!tbId.value){
      message.alert("先保存才能导入模板！");
      return
    }
    if (formData.value.tbCode) {
      dtParams.value.tbCode = formData.value.tbCode;
      isSpredaShow.value = true;
    } else {
      isSpredaShow.value = false;
    }
  }
  /*
  const spreadRefMap = {
    '模板': recordDesignerRef.value,
  }
  const spreadMap = {
    '报告记录': recordDesigner,
    '报告模板': reportDesigner,
    '检验结果': resultDesigner,
    '金额计算': moneyDesigner
  }
  try {
    if(!spreadMap[name]) return;
    spreadMap[name].refresh();
    spreadMap[name].setData("treeNodeFromJson", basicForm.value.bindingPathSchema);
    // 设置工作表数据源字段释义
    spreadRefMap[name]?.handleUpdateDesignerState.set('bindingPathDataJSON', basicForm.value.bindingPathNameJson)
  } catch (error) {
    console.error('handleTabClick报错了', error)
  } */
}
const handleBeforeTabLeave = (active, oldActive) => {

}

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  id: {
    type: Number,
    default: 0
  },
  type: {
    type: String,
    default: ''
  }
})
const tbId = ref()

/** 打开弹窗 */
const open = async () => {
  /** dialogVisible.value = true
  // dialogTitle.value = t('action.' + type) */
  formType.value = props.type
  tbId.value = props.id
  // 修改时，设置数据
  if (tbId.value) {
    formLoading.value = true
    try {
      formData.value = await DynamicTbApi.getDynamicTb(tbId.value)

      if(formData.value.id && formData.value.formPath){

        getDocToDPFToken(formData.value.formPath,false);
      }

      await initConnectInfos()

    } finally {
      formLoading.value = false
    }
  } else {
    resetForm();
  }
}

open();
//defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success', 'update:visible']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as DynamicTbVO
    if (formType.value === 'create') {
      tbId.value = await DynamicTbApi.createDynamicTb(data)
      formData.value.id = tbId.value
      formType.value = 'update'
      message.success(t('common.createSuccess'))
    } else {
      await DynamicTbApi.updateDynamicTb(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}
/** 关闭表单 */
const handleClose = () => {
  clearDocument();
  emit('update:visible', false);
}

const getData = async () => {

}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    tbName: undefined,
    tbCode: undefined,
    tbType: undefined,
    reportType: undefined,
    pjType: undefined,
    tbUrl: undefined,
    versionNo: undefined,
    tbNote: undefined,
    creatorName: getUser.nickname,
    inPath: undefined,
    formUrl: undefined,
    formPath: undefined,
    filePaths: [],
  }
  formRef.value?.resetFields()
}
</script>
<style lang="scss" scoped>
.unit-create-and-edit {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  box-sizing: border-box;
  background-color: #fff;
  overflow: hidden;

  :deep(.spread-designer-container) {
    height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 90px);
    padding: 0;

    .default-toolbar {
      padding-top: 0px;
    }
  }
}

.c-header {
  position: sticky;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 20px;
  margin-bottom: -1px;
  font-size: 20px;
  line-height: 50px;
  border: 1px solid var(--el-border-color-light);
  background-color: #fff;
  z-index: 1000;
}

.unit-content {
  height: 100%;
  width: 100%;
  padding: 20px 0 56px 20px;
  overflow-y: hidden;

  :deep(.el-table) {
    margin-bottom: 12px;

    .el-table__header tr th.el-table__cell {
      color: #333;
      background-color: var(--el-border-color-light);
    }
  }

  :deep(.add-btn) {
    margin-bottom: 12px;
  }

  :deep(.c-title) {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 36px;
    margin-bottom: 18px;
    line-height: 36px;
    background-color: var(--el-color-primary-light-9);

    &::before {
      content: '';
      height: 100%;
      width: 3px;
      margin-right: 12px;
      background-color: var(--el-color-primary);
    }
  }

  :deep(.el-tabs__content) {
    padding-right: 20px;
    overflow-y: hidden;

    .el-row {
      margin: 0 !important;
      box-sizing: border-box;
    }

    .el-tab-pane {
      border: 1px solid var(--el-border-color-light);
      box-sizing: border-box;
      height: calc(100% - 49px);
      overflow: hidden;
    }
  }

  :deep(.el-tabs__header-vertical) {
    margin-right: -1px;
    border: 1px solid var(--el-border-color-light);

    .el-tabs__nav-wrap.is-left:after {
      display: none;
    }

    .el-tabs__active-bar {
      display: none;
    }

    .el-tabs__item {
      width: 220px;
      height: 50px;
      font-size: 14px;
      text-align: center;
      justify-content: center;

      &.is-active {
        background-color: var(--el-color-primary-light-9);
      }
    }
  }

  :deep(.el-table__cell) {
    .el-form-item {
      margin-bottom: 0;
    }
  }
}

.unit-footer-btns {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  padding: 12px 0;
  display: flex;
  justify-content: center;
}

.form-container{
  height: 100%;
  padding-top: 15px;
  overflow-y: auto;
}

.record-template-buttons {
  padding: 10px 0;
  
  .el-button {
    margin-right: 10px;
    margin-bottom: 10px;
  }
}

.spread-tab-pane {
  height: 100%;
  padding: 0 !important;
}

.spread-scrollbar-wrapper {
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}
</style>