|
|
|
|
@ -1,63 +1,119 @@
|
|
|
|
|
<template> |
|
|
|
|
<div> |
|
|
|
|
<el-dialog v-model="visible" align-center :title="props.title" :width="props.width"> |
|
|
|
|
<template v-if="visible"> |
|
|
|
|
<div class="printCode" ref="printNodeRef"> |
|
|
|
|
<div v-html="props.html"></div> |
|
|
|
|
<el-dialog |
|
|
|
|
v-model="visible" |
|
|
|
|
destroy-on-close |
|
|
|
|
align-center |
|
|
|
|
:title="props.title" |
|
|
|
|
:width="props.width" |
|
|
|
|
:fullscreen="props.isFullscreen && details.isFullscreen" |
|
|
|
|
:show-close="!props.isFullscreen" |
|
|
|
|
> |
|
|
|
|
<!-- 标题 -- 头部控件区 --> |
|
|
|
|
<template v-if="props.isFullscreen" #header="{ close, titleId, titleClass }"> |
|
|
|
|
<div class="my-header flex-c-sb"> |
|
|
|
|
<div class="fwb" :id="titleId" :class="titleClass">{{ props.title }}</div> |
|
|
|
|
<div class="flex-c-c"> |
|
|
|
|
<!-- 全屏显示按钮 --> |
|
|
|
|
<el-button type="text" @click="handleFullScrean()" v-if="!details.isFullscreen"> |
|
|
|
|
<el-icon class=""><FullScreen /></el-icon> |
|
|
|
|
</el-button> |
|
|
|
|
<el-button type="text" @click="handleFullScrean()" v-else> |
|
|
|
|
<el-icon class=""><CopyDocument /></el-icon> |
|
|
|
|
</el-button> |
|
|
|
|
|
|
|
|
|
<div> |
|
|
|
|
<slot></slot> |
|
|
|
|
<!-- 弹窗关闭按钮 --> |
|
|
|
|
<el-button type="text"> |
|
|
|
|
<el-icon class="" @click="close"><Close /></el-icon> |
|
|
|
|
</el-button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<div class="printCode" ref="printNodeRef"> |
|
|
|
|
<template v-if="props.html"> |
|
|
|
|
<div v-html="props.html"></div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<div> |
|
|
|
|
<slot></slot> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="flex-c-c mt10"> |
|
|
|
|
<el-button @click="handleClose" icon="CircleClose"> 关 闭 </el-button> |
|
|
|
|
<el-button type="primary" v-if="props.isShowExport" @click="handleExport" icon="Download"> |
|
|
|
|
导 出 |
|
|
|
|
</el-button> |
|
|
|
|
<el-button type="primary" @click="printTemplate" icon="Printer"> 打 印 </el-button> |
|
|
|
|
<el-button |
|
|
|
|
type="primary" |
|
|
|
|
@click="printTemplate" |
|
|
|
|
icon="Printer" |
|
|
|
|
:disabled="details.printLoading" |
|
|
|
|
:loading="details.printLoading" |
|
|
|
|
> |
|
|
|
|
打 印 |
|
|
|
|
</el-button> |
|
|
|
|
</div> |
|
|
|
|
</el-dialog> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
|
import { defineProps, computed, ref, nextTick } from 'vue'; |
|
|
|
|
import { defineProps, computed, ref, nextTick, reactive } from 'vue'; |
|
|
|
|
import print from '@/utils/print'; |
|
|
|
|
import { ElMessage, ElMessageBox } from 'element-plus'; |
|
|
|
|
import { getObjType } from '@/utils/util'; |
|
|
|
|
import * as XLSX from 'xlsx'; |
|
|
|
|
import { exportExcelByDom } from '@/utils/export'; |
|
|
|
|
import { dateNow } from '@/utils/date'; |
|
|
|
|
|
|
|
|
|
const props = defineProps({ |
|
|
|
|
/** 打印内容 */ |
|
|
|
|
html: { |
|
|
|
|
type: String, |
|
|
|
|
default: '', |
|
|
|
|
}, |
|
|
|
|
/** 是否显示弹窗 */ |
|
|
|
|
modelValue: { |
|
|
|
|
type: Boolean, |
|
|
|
|
default: false, |
|
|
|
|
}, |
|
|
|
|
/** 弹窗宽度 */ |
|
|
|
|
width: { |
|
|
|
|
type: String, |
|
|
|
|
default: '780px', |
|
|
|
|
}, |
|
|
|
|
/** 标题 */ |
|
|
|
|
title: { |
|
|
|
|
type: String, |
|
|
|
|
default: '二维码', |
|
|
|
|
}, |
|
|
|
|
/** 是否显示导出按钮 */ |
|
|
|
|
isShowExport: { |
|
|
|
|
type: Boolean, |
|
|
|
|
default: true, |
|
|
|
|
}, |
|
|
|
|
/** 打印函数 */ |
|
|
|
|
printFn: { |
|
|
|
|
type: Function, |
|
|
|
|
default: null, |
|
|
|
|
}, |
|
|
|
|
/** 打印类型 */ |
|
|
|
|
type: { |
|
|
|
|
type: String, |
|
|
|
|
default: 'deliveryPrint', |
|
|
|
|
}, |
|
|
|
|
/** 导出名称 */ |
|
|
|
|
exportName: { |
|
|
|
|
type: String, |
|
|
|
|
default: '导出', |
|
|
|
|
}, |
|
|
|
|
/** 是否开启全屏按钮 */ |
|
|
|
|
isFullscreen: { |
|
|
|
|
type: Boolean, |
|
|
|
|
default: false, |
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const $emit = defineEmits(['update:modelValue']); |
|
|
|
|
@ -69,6 +125,13 @@ const visible = computed({
|
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const details = reactive({ |
|
|
|
|
/** 打印loading */ |
|
|
|
|
printLoading: false, |
|
|
|
|
/** 是否全屏 */ |
|
|
|
|
isFullscreen: false, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const handleClose = () => { |
|
|
|
|
visible.value = false; |
|
|
|
|
}; |
|
|
|
|
@ -147,8 +210,11 @@ const handleExport = () => {
|
|
|
|
|
cancelButtonText: '关闭', |
|
|
|
|
type: 'warning', |
|
|
|
|
}).then(() => { |
|
|
|
|
// 确认导出 |
|
|
|
|
createExcel(); |
|
|
|
|
console.log('printNodeRef.value :>> ', printNodeRef.value); |
|
|
|
|
|
|
|
|
|
props.type === 'titlePrint' |
|
|
|
|
? createExcel() |
|
|
|
|
: exportExcelByDom(printNodeRef.value, props.exportName + ' - ' + dateNow() + '.xlsx'); |
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
@ -156,6 +222,8 @@ const handleExport = () => {
|
|
|
|
|
const printTemplate = () => { |
|
|
|
|
if (props.printFn) return props.printFn(); |
|
|
|
|
|
|
|
|
|
details.printLoading = true; |
|
|
|
|
|
|
|
|
|
const nodeArr = document.querySelectorAll('.printSmallText'); |
|
|
|
|
|
|
|
|
|
for (let i = 0; i < nodeArr.length; i++) { |
|
|
|
|
@ -168,9 +236,19 @@ const printTemplate = () => {
|
|
|
|
|
const printNode = document.querySelectorAll('.printCode > div > div'); |
|
|
|
|
console.log('printNode :>> ', printNode); |
|
|
|
|
print(printNode, props.type); |
|
|
|
|
handleClose(); |
|
|
|
|
details.printLoading = false; |
|
|
|
|
clearTimeout(timer); |
|
|
|
|
}, 500); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* 是否开启床车明细全屏 |
|
|
|
|
* @params(_type) 开启或关闭 |
|
|
|
|
*/ |
|
|
|
|
const handleFullScrean = () => { |
|
|
|
|
details.isFullscreen = !details.isFullscreen; |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
|
@ -178,4 +256,10 @@ const printTemplate = () => {
|
|
|
|
|
max-height: 80vh; |
|
|
|
|
overflow-y: scroll; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.my-header { |
|
|
|
|
:deep(.el-icon) { |
|
|
|
|
font-size: 20px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
