From 7462fd192326d7cf3418b6185ca437b2667cbeab Mon Sep 17 00:00:00 2001
From: YangYuGang <1378265336@qq.com>
Date: 星期二, 11 三月 2025 11:14:45 +0800
Subject: [PATCH] 批次字段增加
---
src/views/tigerprojects/wms/createqrcode/index.vue | 233 ++++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 161 insertions(+), 72 deletions(-)
diff --git a/src/views/tigerprojects/wms/createqrcode/index.vue b/src/views/tigerprojects/wms/createqrcode/index.vue
index d8fe0dd..2ff0333 100644
--- a/src/views/tigerprojects/wms/createqrcode/index.vue
+++ b/src/views/tigerprojects/wms/createqrcode/index.vue
@@ -1,17 +1,35 @@
+/* stylelint-disable rule-empty-line-before */
<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>
+ <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="flex flex-wrap" v-if="show">
+ <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="background-color: white; width: 99%;">
+ <div class="mb-4 pt-4 text-center" style="width: 99%; background-color: white">
<QrCode
:value="qrCodeUrl"
:width="390"
@@ -22,94 +40,165 @@
@done="onQrcodeDone"
/>
<!-- <a-button class="mb-2" type="primary" @click="downloadDiy"> 涓嬭浇 </a-button> -->
- <!-- <div class="msg">瑕佽繘琛屾墿灞曠粯鍒跺垯涓嶈兘灏唗ag璁句负img</div> -->
+ <span class="mb-5 p-5" style="color: #0780b9">{{ qrCodeUrl }}</span>
</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';
+<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 schemas: FormSchema[] = [
- {
- field: 'SN',
+ 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,
- },
- }
-];
+ },
+ {
+ 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({
+ 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,
+ 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);
+ 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;
- // 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('鏉＄爜绯荤粺涓嶅瓨鍦�');
- // }
- }else{
- show.value=false;
- createMessage.error('杈撳叆鐨勬潯鐮佷负绌�');
- }
-
-}
+ 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>
--
Gitblit v1.9.3