批次字段增加

YangYuGang

2025-03-11 7462fd192326d7cf3418b6185ca437b2667cbeab

 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">要进行扩展绘制则不能将tag设为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>