<template>
|
<PageWrapper>
|
<a-card :bordered="false" class="j-print-demo">
|
<div style="text-align: right">
|
<a-button type="primary" ghost @click="onPrint">打印</a-button>
|
</div>
|
<section ref="print" id="printContent">
|
<div style="text-align: center">
|
<p style="font-size: 24px; font-weight: 800">打印测试表单</p>
|
</div>
|
<!--签字-->
|
<a-col :md="24" :sm="24">
|
<div class="sign" style="text-align: center; height: inherit">
|
<a-col :span="24">
|
<span>打印人员:</span>
|
<a-input style="width: 30%" v-model:value="model.printer" />
|
<span style="margin-left: 12.5%">打印日期:</span>
|
<a-input style="width: 30%" v-model:value="model.printTime" />
|
</a-col>
|
<a-col :span="24"> </a-col>
|
<a-col :span="24" style="margin-top: 20px">
|
<span>打印内容:</span>
|
<a-input style="width: 80%" v-model:value="model.printContent" />
|
</a-col>
|
<a-col :span="24" style="margin-top: 20px">
|
<span>打印目的1:</span>
|
<a-input style="width: 80%" v-model:value="model.printReason" />
|
</a-col>
|
<a-col :span="24" style="margin-top: 20px">
|
<span>打印目的2:</span>
|
<a-input style="width: 80%" v-model:value="model.printReason" />
|
</a-col>
|
<a-col :span="24" style="margin-top: 20px">
|
<span>打印目的3:</span>
|
<a-input style="width: 80%" v-model:value="model.printReason" />
|
</a-col>
|
<a-col :span="24" style="margin-top: 20px">
|
<span>打印目的4:</span>
|
<a-input style="width: 80%" v-model:value="model.printReason" />
|
</a-col>
|
<a-col :span="24" style="margin-top: 20px">
|
<span>打印目的5:</span>
|
<a-input style="width: 80%" v-model:value="model.printReason" />
|
</a-col>
|
<a-col :span="24" style="margin-top: 20px">
|
<span>打印目的6:</span>
|
<a-input style="width: 80%" v-model:value="model.printReason" />
|
</a-col>
|
<a-col :span="24" style="margin-top: 20px">
|
<span>打印目的7:</span>
|
<a-input style="width: 80%" v-model:value="model.printReason" />
|
</a-col>
|
<a-col :span="24" style="margin-top: 20px">
|
<span>打印目的8:</span>
|
<a-input style="width: 80%" v-model:value="model.printReason" />
|
</a-col>
|
<a-col :span="24" style="margin-top: 20px">
|
<span>打印目的9:</span>
|
<a-input style="width: 80%" v-model:value="model.printReason" />
|
</a-col>
|
<a-col :span="24" style="margin-top: 20px">
|
<span>打印目的10:</span>
|
<a-input style="width: 80%" v-model:value="model.printReason" />
|
</a-col>
|
<a-col :span="24" style="margin-top: 20px">
|
<span>打印目的11:</span>
|
<a-input style="width: 80%" v-model:value="model.printReason" />
|
</a-col>
|
<a-col :span="24" style="margin-top: 20px">
|
<span>打印目的12:</span>
|
<a-input style="width: 80%" v-model:value="model.printReason" />
|
</a-col>
|
<a-col :span="24" style="margin-top: 20px">
|
<span>打印目的13:</span>
|
<a-input style="width: 80%" v-model:value="model.printReason" />
|
</a-col>
|
<a-col :span="24" style="margin-top: 20px">
|
<span>打印目的14:</span>
|
<a-input style="width: 80%" v-model:value="model.printReason" />
|
</a-col>
|
<a-col style="margin-top: 20px" :span="24">
|
<span>打印图片:</span>
|
<br />
|
<a-upload
|
action="/jsonplaceholder.typicode.com/posts/"
|
listType="picture-card"
|
:fileList="model.fileList"
|
@preview="handlePreview"
|
@change="handleChange"
|
>
|
<div v-if="model.fileList.length < 3">
|
<Icon icon="ant-design:plus-outlined" />
|
<div class="ant-upload-text">Upload</div>
|
</div>
|
</a-upload>
|
<a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible = false">
|
<img alt="example" style="width: 100%" :src="previewImage" />
|
</a-modal>
|
</a-col>
|
</div>
|
</a-col>
|
</section>
|
</a-card>
|
</PageWrapper>
|
</template>
|
<script lang="ts">
|
import { ref, reactive } from 'vue';
|
import { PageWrapper } from '/@/components/Page';
|
import Icon from '/@/components/Icon/src/Icon.vue';
|
import { printJS } from '/@/hooks/web/usePrintJS';
|
|
export default {
|
name: 'PrintDemo',
|
components: { PageWrapper, Icon },
|
props: {
|
reBizCode: {
|
type: String,
|
default: '',
|
},
|
},
|
setup() {
|
const model = reactive({
|
printer: '张三',
|
printTime: '2021-12-31 23:59:59',
|
printContent: '打印内容：这是一个打印测试！',
|
printReason: '做一个打印测试',
|
fileList: [
|
{
|
uid: '-1',
|
name: 'xxx.png',
|
status: 'done',
|
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
},
|
{
|
uid: '-2',
|
name: 'pic1.png',
|
status: 'done',
|
url: 'https://www.gizbot.com/img/2016/11/whatsapp-error-lead-image-08-1478607387.jpg',
|
},
|
],
|
});
|
const previewImage = ref('');
|
const previewVisible = ref(false);
|
|
function onPrint() {
|
printJS({
|
printable: '#printContent',
|
type: 'html',
|
});
|
}
|
|
function handlePreview(file) {
|
previewImage.value = file.url || file.thumbUrl;
|
previewVisible.value = true;
|
}
|
|
function handleChange({ fileList }) {
|
model.fileList = fileList;
|
}
|
|
return {
|
model,
|
previewImage,
|
previewVisible,
|
onPrint,
|
handlePreview,
|
handleChange,
|
};
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.j-print-demo .ant-card-body {
|
margin-left: 0;
|
margin-right: 0;
|
margin-bottom: 1%;
|
border: 0 solid black;
|
min-width: 800px;
|
color: #000000 !important;
|
}
|
|
.sign .ant-input {
|
font-weight: bolder;
|
text-align: center;
|
border-left-width: 0 !important;
|
border-top-width: 0 !important;
|
border-right-width: 0 !important;
|
outline: none !important;
|
box-shadow: none !important;
|
}
|
|
/* you can make up upload button and sample style by using stylesheets */
|
.ant-upload-select-picture-card i {
|
font-size: 32px;
|
color: #999;
|
}
|
|
.ant-upload-select-picture-card .ant-upload-text {
|
margin-top: 8px;
|
color: #666;
|
}
|
</style>
|
