diff --git a/src/main.ts b/src/main.ts index 050695124b0bf62f46bfe59a117a5dc6933da706..fcfd78096e25fe25d048d96390bf99eeaa30e22d 100644 --- a/src/main.ts +++ b/src/main.ts @@ -42,8 +42,8 @@ import Logger from '@/utils/Logger' import VueDOMPurifyHTML from 'vue-dompurify-html' // 解决v-html 的安全隐患 -// wangeditor 插件注册 -import { setupWangeditorPlugin } from '@/views/bpm/model/form/PrintTemplate' +// wangEditor 插件注册 +import { setupWangEditorPlugin } from '@/views/bpm/model/form/PrintTemplate' import print from 'vue3-print-nb' // 打印插件 @@ -67,8 +67,8 @@ const setupAll = async () => { setupAuth(app) setupMountedFocus(app) - // wangeditor 插件注册 - setupWangeditorPlugin() + // wangEditor 插件注册 + setupWangEditorPlugin() await router.isReady() diff --git a/src/views/bpm/model/form/ExtraSettings.vue b/src/views/bpm/model/form/ExtraSettings.vue index c38ae9cbf811272520f3ccbee4d5f373268638f0..98784f125a389463ffff5cfc003b372d1bc4ba88 100644 --- a/src/views/bpm/model/form/ExtraSettings.vue +++ b/src/views/bpm/model/form/ExtraSettings.vue @@ -491,7 +491,6 @@ watch( { immediate: true } ) -// TODO defaultTemplate 是否需要放到 infra_config TODO @lesan：就先 default 这里好了。 const defaultTemplate = '

@流程名称

打印人：@打印人

流程编号：@流程编号                        打印时间：@打印时间

发起人@发起人发起时间@发起时间
所属部门@发起人部门流程状态@流程状态

流程记录

' const handlePrintTemplateEnableChange = (val: boolean) => { diff --git a/src/views/bpm/model/form/PrintTemplate/MentionModal.vue b/src/views/bpm/model/form/PrintTemplate/MentionModal.vue index 9343f225da91b0e97e3e49d0998e2807cdc8313b..598867e2fedd5bf905e9f42082bf5553a17fde46 100644 --- a/src/views/bpm/model/form/PrintTemplate/MentionModal.vue +++ b/src/views/bpm/model/form/PrintTemplate/MentionModal.vue @@ -11,10 +11,9 @@ const list = ref([ { id: 'processName', name: '流程名称' }, { id: 'processNum', name: '流程编号' }, { id: 'startTime', name: '发起时间' }, - { id: 'endTime', name: '发起时间' }, + { id: 'endTime', name: '结束时间' }, { id: 'processStatus', name: '流程状态' }, - { id: 'processResult', name: '流程结果' }, - { id: 'printUser', name: '打印人' }, + { id: 'printUsername', name: '打印人' }, { id: 'printTime', name: '打印时间' } ]) const searchedList = computed(() => { @@ -41,9 +40,8 @@ const insertMentionHandler = (id: any, name: any) => { emit('hideMentionModal') } -const formFields = inject('formFieldsObj') +const formFields = inject('formFieldsObj') onMounted(() => { - // TODO @lesan：这里 idea 会爆红，看看能不能处理下； if (formFields.value && formFields.value.length > 0) { const cloneFormField = formFields.value.map((item) => { return { diff --git a/src/views/bpm/model/form/PrintTemplate/index.ts b/src/views/bpm/model/form/PrintTemplate/index.ts index 4c304ed79d69e290b7c92da2797dfd600c023a6e..fb1d4af95bc1ff33d4da6f8f2b95969827804add 100644 --- a/src/views/bpm/model/form/PrintTemplate/index.ts +++ b/src/views/bpm/model/form/PrintTemplate/index.ts @@ -3,8 +3,7 @@ import processRecordModule from './module' import mentionModule from '@wangeditor/plugin-mention' // 注册：要在创建编辑器之前注册，且只能注册一次，不可重复注册 -// TODO @lesan：WangEditor 拼写 -export const setupWangeditorPlugin = () => { +export const setupWangEditorPlugin = () => { Boot.registerModule(processRecordModule) Boot.registerModule(mentionModule) } diff --git a/src/views/bpm/model/form/PrintTemplate/module/index.ts b/src/views/bpm/model/form/PrintTemplate/module/index.ts index a4e51d55159815ced2571ab5ab7e4d7f26ad3a4e..7670c8556c24c11b0ab0ef54af982e5635f1eb03 100644 --- a/src/views/bpm/model/form/PrintTemplate/module/index.ts +++ b/src/views/bpm/model/form/PrintTemplate/module/index.ts @@ -5,7 +5,7 @@ import elemToHtmlConf from './elem-to-html' import parseHtmlConf from './parse-elem-html' import processRecordMenu from './menu/ProcessRecordMenu' -// TODO @lesan：PrintTemplate 是参考了哪些文档哇？要不要在 index.ts 稍微写点注释，方便大家理解； +// 可参考 wangEditor 官方文档进行自定义扩展插件：https://www.wangeditor.com/v5/development.html#%E5%AE%9A%E4%B9%89%E6%96%B0%E5%85%83%E7%B4%A0 const module: Partial = { editorPlugin: withProcessRecord, renderElems: [renderElemConf], diff --git a/src/views/bpm/processInstance/detail/PrintDialog.vue b/src/views/bpm/processInstance/detail/PrintDialog.vue index 785b70c5313db1171a6c52caa99b98682ce33b69..dfa1fe6bfdd1f66fbcc498e10e7fd94e270febdc 100644 --- a/src/views/bpm/processInstance/detail/PrintDialog.vue +++ b/src/views/bpm/processInstance/detail/PrintDialog.vue @@ -2,6 +2,8 @@ import * as ProcessInstanceApi from '@/api/bpm/processInstance' import { useUserStore } from '@/store/modules/user' import { formatDate } from '@/utils/formatTime' +import { DICT_TYPE, getDictLabel } from '@/utils/dict' +import { decodeFields } from '@/utils/formCreate' const userStore = useUserStore() @@ -11,11 +13,15 @@ const loading = ref(false) const printData = ref() const userName = computed(() => userStore.user.nickname ?? '') const printTime = ref(formatDate(new Date(), 'YYYY-MM-DD HH:mm')) +const formFields = ref() +const printDataMap = ref({}) const open = async (id: string) => { loading.value = true try { printData.value = await ProcessInstanceApi.getProcessInstancePrintData(id) + initPrintDataMap() + parseFormFields() console.log(printData.value) } finally { loading.value = false @@ -24,6 +30,90 @@ const open = async (id: string) => { } defineExpose({ open }) +const parseFormFields = () => { + const formFieldsObj = decodeFields(printData.value.formFields) + const processVariables = printData.value.processVariables + let res: any = [] + for (const item of formFieldsObj) { + const id = item['field'] + const name = item['title'] + let html = '暂不支持此类型的表单展示' + // TODO 完善各类型表单的展示 + if (item['type'] === 'input') { + html = processVariables[item['field']] + } + if (item['type'] === 'UploadImg') { + html = `` + } + printDataMap.value[item['field']] = html + res.push({ id, name, html }) + } + formFields.value = res +} + +const initPrintDataMap = () => { + printDataMap.value['startUser'] = printData.value.startUser.nickname + printDataMap.value['startUserDept'] = printData.value.startUser.deptName + printDataMap.value['processName'] = printData.value.processName + printDataMap.value['processNum'] = printData.value.processInstanceId + printDataMap.value['startTime'] = printData.value.startTime + printDataMap.value['endTime'] = printData.value.endTime + printDataMap.value['processStatus'] = getDictLabel( + DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS, + printData.value.processStatus + ) + printDataMap.value['printUsername'] = userName.value + printDataMap.value['printTime'] = printTime.value +} + +const getPrintTemplateHTML = () => { + const parser = new DOMParser() + let doc = parser.parseFromString(printData.value.printTemplateHtml, 'text/html') + // table 添加border + let tables = doc.querySelectorAll('table') + tables.forEach((item) => { + item.setAttribute('border', '1') + item.setAttribute('style', (item.getAttribute('style') || '') + 'border-collapse:collapse;') + }) + // 替换mentions + let mentions = doc.querySelectorAll('[data-w-e-type="mention"]') + mentions.forEach((item) => { + const mentionId = JSON.parse(decodeURIComponent(item.getAttribute('data-info') ?? ''))['id'] + item.innerHTML = printDataMap.value[mentionId] ?? '' + }) + // 替换流程记录 + let processRecords = doc.querySelectorAll('[data-w-e-type="process-record"]') + let processRecordTable : Element = document.createElement('table') + if (processRecords.length > 0) { + // 构建流程记录html + processRecordTable.setAttribute('border', '1') + processRecordTable.setAttribute('style', 'width:100%;border-collapse:collapse;') + const headTr = document.createElement('tr') + const headTd = document.createElement('td') + headTd.setAttribute('colspan', '2') + headTd.setAttribute('width', 'auto') + headTd.setAttribute('style', 'text-align: center;') + headTd.innerHTML = '流程节点' + headTr.appendChild(headTd) + processRecordTable.appendChild(headTr) + printData.value.approveNodes.forEach(item => { + const tr = document.createElement('tr') + const td1 = document.createElement('td') + td1.innerHTML = item.nodeName + const td2 = document.createElement('td') + td2.innerHTML = item.nodeDesc + tr.appendChild(td1) + tr.appendChild(td2) + processRecordTable.appendChild(tr) + }) + } + processRecords.forEach(item => { + item.innerHTML = processRecordTable.outerHTML + }) + // 返回html + return doc.body.innerHTML +} + const printObj = ref({ id: 'printDivTag', popTitle: ' ', @@ -36,7 +126,7 @@ const printObj = ref({ - - -