| | |
| | | <template> |
| | | |
| | | <PageWrapper title="生成二维码"> |
| | | <div class="mb-4 pt-4" style="background-color: white; width: 99%;"> |
| | | <PageWrapper title="生成二维码" contentFullHeight contentClass="flex"> |
| | | <template #headerContent> |
| | | <BasicForm @register="register"> |
| | | <template #search="{ field }"> |
| | | <Button v-if="field" style="margin-left: 0;" @click="onSearch">生成</Button> |
| | | <Button v-if="field" style="margin-left: 0" @click="onSearch">生成</Button> |
| | | </template> |
| | | </BasicForm> |
| | | </template> |
| | | <div class="w-1/4 xl:w-1/5 p-3" style="background-color: white"> |
| | | <a-list size="small" bordered :data-source="hisData"> |
| | | <template #renderItem="{ item }"> |
| | | <a-list-item> |
| | | <a-list-item-meta description=""> |
| | | <template #title> |
| | | <span @click="showQr(item)">{{ item }}</span> |
| | | </template> |
| | | </a-list-item-meta> |
| | | </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-3/4 xl:w-4/5 p-5" 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%;"> |
| | | <div class="mb-4 pt-4 text-center" style="width: 99%; background-color: white"> |
| | | <QrCode |
| | | :value="qrCodeUrl" |
| | | :width="390" |
| | |
| | | </PageWrapper> |
| | | </template> |
| | | <script lang="ts" setup> |
| | | import { ref } from 'vue'; |
| | | import { onMounted, 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 { CollapseContainer } from '/@/components/Container/index'; |
| | |
| | | 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'; |
| | | |
| | | const AList = List; |
| | | const AListItem = ListItem; |
| | | const AListItemMeta = ListItemMeta; |
| | | const schemas: FormSchema[] = [ |
| | | { |
| | | field: 'SN', |
| | |
| | | colProps: { |
| | | span: 8, |
| | | }, |
| | | |
| | | },{ |
| | | }, |
| | | { |
| | | field: '0', |
| | | component: 'Input', |
| | | slot: 'search', |
| | | colProps: { |
| | | span: 4, |
| | | }, |
| | | } |
| | | }, |
| | | ]; |
| | | |
| | | let qrDatas:any[] = [] |
| | | const useQrhis = useQrhisStore(); |
| | | const { hisData } = storeToRefs(useQrhis); |
| | | const { createMessage } = useMessage(); |
| | | const show = ref(false) |
| | | const show = ref(false); |
| | | const qrCodeUrl = ref(''); |
| | | const [ |
| | | register, |
| | | { validateFields, clearValidate, getFieldsValue, resetFields, setFieldsValue }, |
| | | ] = useForm({ |
| | | const [register, { validateFields, clearValidate, getFieldsValue, resetFields, setFieldsValue }] = |
| | | useForm({ |
| | | showSubmitButton: false, |
| | | showResetButton: false, |
| | | labelWidth: 80, |
| | |
| | | if(barcode.SN!=''){ |
| | | show.value=true; |
| | | qrCodeUrl.value=barcode.SN; |
| | | useQrhis.gethisData.push(barcode.SN); |
| | | qrDatas = useQrhis.gethisData |
| | | useQrhis.sethisData(qrDatas); |
| | | // var apiAction = await GetQrCode(barcode.SN) |
| | | // if(apiAction.IsSuccessed){ |
| | | // show.value=true; |
| | |
| | | show.value=false; |
| | | createMessage.error('输入的条码为空'); |
| | | } |
| | | |
| | | } |
| | | async function showQr(code: string) { |
| | | if (code != '') { |
| | | show.value = true; |
| | | qrCodeUrl.value = code; |
| | | } else { |
| | | show.value = false; |
| | | createMessage.error('输入的条码为空'); |
| | | } |
| | | } |
| | | </script> |
| | | <style scoped> |