203 lines
7.0 KiB
Vue
203 lines
7.0 KiB
Vue
<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 :open="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>
|