多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

164 lines
5.4 KiB

<script setup lang="ts">
import type { SelectProps } from 'ant-design-vue'
import { ref } from 'vue'
import { StreamBarcodeReader } from 'vue-barcode-reader'
import type { ColumnType } from 'nocodb-sdk'
import { UITypes } from 'nocodb-sdk'
const meta = inject(MetaInj, ref())
const { t } = useI18n()
const route = useRoute()
const router = useRouter()
const { $api } = useNuxtApp()
const { base } = storeToRefs(useBase())
const { isMobileMode } = useGlobal()
const view = inject(ActiveViewInj, ref())
const fieldOptionsOfSupportedColumnsToScanFor = computed<SelectProps['options']>(
() =>
meta?.value
?.columns!.filter((column) => column.uidt && [UITypes.QrCode, UITypes.Barcode].includes(column.uidt))
.map((field) => {
return {
value: field.id,
label: field.title,
}
}) || [],
)
const getColumnToSearchForByBarOrQrCodeColumnId = (columnId: string): ColumnType => {
const qrOrBarcodeColumn = meta.value?.columns?.find((column) => column.id === columnId)
if (!qrOrBarcodeColumn) {
throw new Error('QrCode or BarCode Column not found')
}
let columnIdToSearchFor: string
if (qrOrBarcodeColumn.uidt === UITypes.QrCode) {
columnIdToSearchFor = (qrOrBarcodeColumn.colOptions as any).fk_qr_value_column_id
} else if (qrOrBarcodeColumn.uidt === UITypes.Barcode) {
columnIdToSearchFor = (qrOrBarcodeColumn.colOptions as any).fk_barcode_value_column_id
} else {
throw new Error('Column to scan for is not of supported type')
}
const columnToSearchFor = meta.value?.columns?.find((column) => column.id === columnIdToSearchFor)
if (!columnToSearchFor) {
throw new Error('Column to search for not found')
}
return columnToSearchFor
}
const showCodeScannerOverlay = ref(false)
const idOfSelectedColumnToScanFor = ref('')
const lastScannedCode = ref('')
watch(fieldOptionsOfSupportedColumnsToScanFor, () => {
if (fieldOptionsOfSupportedColumnsToScanFor.value?.every((option) => option.value !== idOfSelectedColumnToScanFor.value)) {
idOfSelectedColumnToScanFor.value = ''
}
})
const scannerIsReady = ref(false)
const onLoaded = async () => {
scannerIsReady.value = true
}
const showScannerField = computed(() => scannerIsReady.value && idOfSelectedColumnToScanFor.value !== '')
const showPleaseSelectColumnMessage = computed(() => !idOfSelectedColumnToScanFor.value)
const showScannerIsLoadingMessage = computed(() => !!idOfSelectedColumnToScanFor.value && !scannerIsReady.value)
const onDecode = async (codeValue: string) => {
if (!showScannerField.value || codeValue === lastScannedCode.value) {
return
}
try {
const selectedColumnToScanFor = getColumnToSearchForByBarOrQrCodeColumnId(idOfSelectedColumnToScanFor.value)
const whereClause = `(${selectedColumnToScanFor?.title},eq,${codeValue})`
const foundRowsForCode = (
await $api.dbViewRow.list(NOCO, base.value.id!, meta.value!.id!, view.value!.title!, {
where: whereClause,
})
).list
if (foundRowsForCode.length !== 1) {
showCodeScannerOverlay.value = true
lastScannedCode.value = codeValue
setTimeout(() => {
lastScannedCode.value = ''
}, 4000)
if (foundRowsForCode.length === 0) {
message.info(t('msg.info.codeScanner.noRowFoundForCode'))
}
if (foundRowsForCode.length > 1) {
message.warn(t('msg.info.codeScanner.moreThanOneRowFoundForCode'))
showCodeScannerOverlay.value = false
lastScannedCode.value = ''
}
return
}
showCodeScannerOverlay.value = false
lastScannedCode.value = ''
const primaryKeyValueForFoundRow = extractPkFromRow(foundRowsForCode[0], meta!.value!.columns!)
router.push({
query: {
...route.query,
rowId: primaryKeyValueForFoundRow,
},
})
} catch (error) {
console.error(error)
}
}
</script>
<template>
<div>
<a-button class="nc-btn-find-row-by-scan nc-toolbar-btn" @click="showCodeScannerOverlay = true">
<div class="flex items-center gap-1">
<component :is="iconMap.qrCode" />
<span v-if="!isMobileMode" class="!text-xs font-weight-normal"> {{ $t('activity.findRowByCodeScan') }}</span>
</div>
</a-button>
<a-modal
v-model:visible="showCodeScannerOverlay"
class="nc-overlay-find-row-by-scan"
:closable="false"
width="28rem"
centered
:footer="null"
wrap-class-name="nc-modal-generate-token"
destroy-on-close
@cancel="scannerIsReady = false"
>
<div class="relative flex flex-col h-full">
<div class="text-left text-wrap mt-2 text-xl mb-4">{{ $t('title.findRowByScanningCode') }}</div>
<a-form-item :label="$t('labels.columnToScanFor')" class="nc-dropdown-scanner-column-id">
<a-select
v-model:value="idOfSelectedColumnToScanFor"
class="w-full"
:options="fieldOptionsOfSupportedColumnsToScanFor"
/>
</a-form-item>
<div>
<StreamBarcodeReader v-show="showScannerField" @decode="onDecode" @loaded="onLoaded"></StreamBarcodeReader>
<div v-if="showPleaseSelectColumnMessage" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
{{ $t('msg.info.codeScanner.selectColumn') }}
</div>
<div v-if="showScannerIsLoadingMessage" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
{{ $t('msg.info.codeScanner.loadingScanner') }}
</div>
</div>
</div>
</a-modal>
</div>
</template>