<template>
|
|
<PageWrapper title="生成二维码">
|
<div class="mb-4 pt-4" style="background-color: white; width: 99%;">
|
<BasicForm @register="register">
|
<template #search="{ field }">
|
<Button v-if="field" style="margin-left: 0;" @click="onSearch">生成</Button>
|
</template>
|
</BasicForm>
|
</div>
|
|
<div class="flex flex-wrap" v-if="show">
|
<!-- <CollapseContainer title="二维码" class="text-center qrcode-demo-item"></CollapseContainer> -->
|
<div class="mb-4 pt-4 text-center" style="background-color: white; width: 99%;">
|
<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> -->
|
<!-- <div class="msg">要进行扩展绘制则不能将tag设为img</div> -->
|
</div>
|
</div>
|
</PageWrapper>
|
</template>
|
<script lang="ts" setup>
|
import { ref } from 'vue';
|
import { QrCode } from '/@/components/Qrcode/index';
|
import LogoImg from '/@/assets/images/logo.png';
|
import { CollapseContainer } from '/@/components/Container/index';
|
import { GetQrCode } from '/@/api/tigerapi/wms/qrcode';
|
import { useMessage } from '/@/hooks/web/useMessage';
|
import { PageWrapper } from '/@/components/Page';
|
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
|
import { Button } from '/@/components/Button';
|
|
const schemas: FormSchema[] = [
|
{
|
field: 'SN',
|
component: 'Input',
|
label: 'SN',
|
colProps: {
|
span: 8,
|
},
|
|
},{
|
field: '0',
|
component: 'Input',
|
slot: 'search',
|
colProps: {
|
span: 4,
|
},
|
}
|
];
|
|
const { createMessage } = useMessage();
|
const show = ref(false)
|
const qrCodeUrl = 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, 200);
|
}
|
}
|
async function onSearch({ ctx }: any) {
|
var barcode=getFieldsValue();
|
if(barcode.SN!=''){
|
|
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=value.value;
|
createMessage.error('条码系统不存在');
|
}
|
}else{
|
createMessage.error('输入的条码为空');
|
}
|
|
}
|
</script>
|
<style scoped>
|
.qrcode-demo-item {
|
width: 100%;
|
margin-right: 1%;
|
}
|
</style>
|
