/* stylelint-disable rule-empty-line-before */
|
<template>
|
<PageWrapper title="生成二维码" contentFullHeight contentClass="flex">
|
<template #headerContent>
|
<BasicForm @register="register">
|
<template #search="{ field }">
|
<Button v-if="field" style="margin-left: 10" @click="onSearch">生成</Button>
|
</template>
|
</BasicForm>
|
</template>
|
<div class="w-2/4 xl:w-2/6 p-3" style="background-color: white">
|
<a-list size="large" bordered :pagination="pagination" :data-source="hisData">
|
<template #renderItem="{ item }">
|
<a-list-item>
|
<template #actions>
|
<a key="list-loadmore-edit" @click="del(item.key)">删除</a>
|
</template>
|
<span @click="showQr(item.data)">{{ item.data }}</span>
|
<!-- {{ item }} -->
|
</a-list-item>
|
</template>
|
<template #header>
|
<div>历史记录</div>
|
</template>
|
<!-- <template #footer>
|
<div>Footer</div>
|
</template> -->
|
</a-list>
|
</div>
|
<div class="w-2/4 xl:w-4/6 p-5">
|
<!-- <CollapseContainer title="二维码" class="text-center qrcode-demo-item"></CollapseContainer> -->
|
<div class="mb-4 pt-4 text-center" style="width: 99%; background-color: white">
|
<QrCode
|
:value="qrCodeUrl"
|
:width="390"
|
:height="398"
|
:options="{ margin: 5 }"
|
ref="qrDiyRef"
|
:logo="LogoImg"
|
@done="onQrcodeDone"
|
/>
|
<!-- <a-button class="mb-2" type="primary" @click="downloadDiy"> 下载 </a-button> -->
|
<span class="mb-5 p-5" style="color: #0780b9">{{ qrCodeUrl }}</span>
|
</div>
|
</div>
|
</PageWrapper>
|
</template>
|
<script lang="ts" setup>
|
import { onMounted, onUnmounted, ref } from 'vue';
|
import { List, ListItem, ListItemMeta } from 'ant-design-vue';
|
import { QrCode } from '/@/components/Qrcode/index';
|
import LogoImg from '/@/assets/images/logo.png';
|
import { useMessage } from '/@/hooks/web/useMessage';
|
import { PageWrapper } from '/@/components/Page';
|
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
|
import { Button } from '/@/components/Button';
|
import { useQrhisStore } from '/@/store/modules/qrhis';
|
import { storeToRefs } from 'pinia';
|
import { buildUUID } from '/@/utils/uuid';
|
import printJS from 'print-js';
|
import { useWebSocketStore } from '/@/store/modules/websocket';
|
|
const AList = List;
|
const AListItem = ListItem;
|
const AListItemMeta = ListItemMeta;
|
const schemas: FormSchema[] = [
|
{
|
field: 'SN',
|
component: 'Input',
|
label: 'SN',
|
colProps: {
|
span: 8,
|
},
|
},
|
{
|
field: '0',
|
component: 'Input',
|
slot: 'search',
|
colProps: {
|
span: 4,
|
},
|
},
|
];
|
|
let qrDatas: any[] = [];
|
const usewebSocket = useWebSocketStore();
|
const useQrhis = useQrhisStore();
|
const { hisData } = storeToRefs(useQrhis);
|
const { createMessage } = useMessage();
|
const show = ref(false);
|
const qrCodeUrl = ref('');
|
const qrCodeKey = ref('');
|
const [register, { validateFields, clearValidate, getFieldsValue, resetFields, setFieldsValue }] =
|
useForm({
|
showSubmitButton: false,
|
showResetButton: false,
|
labelWidth: 80,
|
schemas,
|
canResize: true,
|
actionColOptions: {
|
span: 12,
|
},
|
});
|
|
function onQrcodeDone({ ctx }: any) {
|
if (ctx instanceof CanvasRenderingContext2D) {
|
// 额外绘制
|
ctx.fillStyle = 'black';
|
ctx.font = '16px "微软雅黑"';
|
ctx.textBaseline = 'bottom';
|
ctx.textAlign = 'center';
|
ctx.fillText('你帅你先扫', 200, 380, 600);
|
}
|
}
|
async function onSearch({ ctx }: any) {
|
var barcode = getFieldsValue();
|
if (barcode.SN != '') {
|
show.value = true;
|
qrCodeUrl.value = barcode.SN;
|
qrCodeKey.value = buildUUID();
|
useQrhis.gethisData.push({ key: qrCodeKey.value, data: qrCodeUrl.value });
|
qrDatas = useQrhis.gethisData;
|
useQrhis.sethisData(qrDatas);
|
// var apiAction = await GetQrCode(barcode.SN)
|
// if(apiAction.IsSuccessed){
|
// show.value=true;
|
// qrCodeUrl.value=apiAction.Message
|
// }
|
// else{
|
// //show.value=false;
|
// show.value=true;
|
// qrCodeUrl.value=barcode.SN;
|
// //createMessage.error('条码系统不存在');
|
// }
|
resetFields();
|
} else {
|
show.value = false;
|
createMessage.error('输入的条码为空');
|
}
|
}
|
const unsubscribe = usewebSocket.$subscribe((mutation, state) => {
|
if (state.printTag == qrCodeUrl.value) {
|
jsonPrint(state.printJson);
|
usewebSocket.SetPrintTag('');
|
}
|
});
|
|
// 当组件卸载时取消订阅
|
onUnmounted(() => {
|
unsubscribe();
|
});
|
|
/**
|
* @description: 显示二维码
|
* @param {*} code
|
* @return {*}
|
*/
|
async function showQr(code: string) {
|
if (code != '') {
|
show.value = true;
|
qrCodeUrl.value = code;
|
} else {
|
show.value = false;
|
createMessage.error('输入的条码为空');
|
}
|
}
|
|
/**
|
* @description: 删除
|
* @param {*} code
|
* @return {*}
|
*/
|
function del(code) {
|
useQrhis.hisData = useQrhis.gethisData.filter((item) => item.key !== code);
|
qrDatas = useQrhis.gethisData;
|
useQrhis.sethisData(qrDatas);
|
}
|
|
const pagination = {
|
onChange: (page: number) => {
|
console.log(page);
|
},
|
pageSize: 10,
|
};
|
|
function jsonPrint(option) {
|
printJS(option);
|
}
|
</script>
|
<style scoped>
|
.qrcode-demo-item {
|
width: 100%;
|
margin-right: 1%;
|
}
|
|
span {
|
display: block;
|
width: auto;
|
overflow: hidden;
|
word-wrap: break-word;
|
word-break: normal;
|
white-space: pre-wrap;
|
}
|
</style>
|
