181 lines
6.3 KiB
Vue
181 lines
6.3 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
|
|
import DialogHeader from "./DialogHeader.vue";
|
|
|
|
const modal = defineModel<boolean>("modal", { required: true });
|
|
|
|
const step = ref<number>(1);
|
|
const devices = ref<string>("");
|
|
const devicesData = ref<string[]>(["Generic EMV Smartcard Reader0"]);
|
|
const devicesOp = ref<string[]>([]);
|
|
|
|
/** 1.เสียบบัตรประชาชนเข้ากับเครื่องอ่าน*/
|
|
function fetchDeviceLists() {
|
|
step.value++;
|
|
}
|
|
|
|
/** 2.เลือกเครื่องอ่านบัตร*/
|
|
function readDevice() {
|
|
step.value++;
|
|
}
|
|
|
|
function verifyPin() {
|
|
step.value++;
|
|
}
|
|
|
|
/**
|
|
* function ต้นหาข้อมูลของ Option
|
|
* @param val ค่าที่ต้องการฟิลเตอร์
|
|
* @param update อัพเดทค่า
|
|
*/
|
|
function filterOption(val: string, update: Function) {
|
|
update(() => {
|
|
const newVal = val.toLocaleUpperCase();
|
|
devicesOp.value = devicesData.value.filter(
|
|
(v: string) => v.toLocaleUpperCase().indexOf(newVal) > -1
|
|
);
|
|
});
|
|
}
|
|
|
|
function onClose() {
|
|
modal.value = false;
|
|
step.value = 1;
|
|
devices.value = "";
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<q-dialog v-model="modal" persistent>
|
|
<q-card style="width: 700px; max-width: 80vw">
|
|
<DialogHeader :tittle="'เข้าสู่ระบบ Linkage Center'" :close="onClose" />
|
|
<q-separator />
|
|
<q-card-section>
|
|
<q-card flat bordered>
|
|
<q-card-section>
|
|
<div class="row">
|
|
<div class="text-red">
|
|
*ต้องใช้บน Windows และต้องติดตั้ง Agent
|
|
<a
|
|
href="https://linkagemgmt.bora.dopa.go.th/app/LinkageManagement-v1.11.0.zip"
|
|
>ลิงก์ดาวน์โหลด Agent</a
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<q-timeline color="primary">
|
|
<!-- เสียบบัตรประชาชนเข้ากับเครื่องอ่าน -->
|
|
<q-timeline-entry
|
|
title="เสียบบัตรประชาชนเข้ากับเครื่องอ่าน"
|
|
style="font-size: 12px"
|
|
:icon="
|
|
step === 1
|
|
? 'mdi-pencil'
|
|
: step > 1
|
|
? 'done'
|
|
: 'mdi-numeric-1'
|
|
"
|
|
>
|
|
<div class="row" v-if="step === 1">
|
|
<q-btn
|
|
color="primary"
|
|
label="ดำเนินการต่อ"
|
|
@click="fetchDeviceLists"
|
|
/>
|
|
</div>
|
|
</q-timeline-entry>
|
|
|
|
<!-- เลือกเครื่องอ่านบัตร -->
|
|
<q-timeline-entry
|
|
title="เลือกเครื่องอ่านบัตร"
|
|
:icon="
|
|
step === 2
|
|
? 'mdi-pencil'
|
|
: step > 2
|
|
? 'done'
|
|
: 'mdi-numeric-2'
|
|
"
|
|
:color="step < 2 ? 'grey-4' : ''"
|
|
>
|
|
<div class="row" v-if="step === 2">
|
|
<q-form
|
|
greedy
|
|
@submit.prevent
|
|
@validation-success="readDevice"
|
|
>
|
|
<div class="q-col-gutter-sm">
|
|
<div>
|
|
<q-select
|
|
dense
|
|
v-model="devices"
|
|
label="เลือกเครื่องอ่านบัตร"
|
|
outlined
|
|
emit-value
|
|
map-options
|
|
fill-input
|
|
hide-selected
|
|
lazy-rules
|
|
hide-bottom-space
|
|
option-label="name"
|
|
option-value="id"
|
|
class="inputgreen"
|
|
:options="devicesOp"
|
|
use-input
|
|
:rules="[(val:string) => !!val || `${'กรุณาเลือกเลือกเครื่องอ่านบัตร'}`,]"
|
|
@filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn) "
|
|
>
|
|
<template v-slot:no-option>
|
|
<q-item>
|
|
<q-item-section class="text-grey">
|
|
ไม่มีข้อมูล
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
</q-select>
|
|
</div>
|
|
|
|
<div>
|
|
<q-btn
|
|
color="primary"
|
|
label="ดำเนินการต่อ"
|
|
type="submit"
|
|
/>
|
|
</div></div
|
|
></q-form>
|
|
</div>
|
|
</q-timeline-entry>
|
|
|
|
<!-- เชื่อมต่อและใส่ PIN -->
|
|
<q-timeline-entry
|
|
title="เชื่อมต่อและใส่ PIN"
|
|
:icon="
|
|
step === 3
|
|
? 'mdi-pencil'
|
|
: step > 3
|
|
? 'done'
|
|
: 'mdi-numeric-3'
|
|
"
|
|
:color="step < 3 ? 'grey-4' : ''"
|
|
>
|
|
<div class="row" v-if="step === 3">
|
|
<q-btn
|
|
color="primary"
|
|
label="ดำเนินการต่อ"
|
|
@click="verifyPin"
|
|
/>
|
|
</div>
|
|
</q-timeline-entry>
|
|
</q-timeline>
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<style scoped>
|
|
:deep(.q-timeline__title) {
|
|
font-size: 15px; /* ปรับขนาดฟอนต์ตามที่ต้องการ */
|
|
font-weight: normal; /* หรือปรับน้ำหนักฟอนต์ */
|
|
}
|
|
</style>
|