jlp
This commit is contained in:
Haqeem Solehan
parent
8a0f59e66e
commit
5303b07aa2
@ -131,14 +131,16 @@ export default [
|
||||
icon: "ph:number-circle-one-fill",
|
||||
child: [
|
||||
{
|
||||
title: "Permohonan",
|
||||
path: "/prototype/for-01/permohonan",
|
||||
title: "Permohonan Online",
|
||||
path: "/permohonan-online/senarai",
|
||||
child: [],
|
||||
meta: {},
|
||||
},
|
||||
{
|
||||
title: "Kemaskini Daftar",
|
||||
path: "/prototype/for-01/kemaskini-daftar",
|
||||
path: "/kemaskini-daftar/senarai",
|
||||
child: [],
|
||||
meta: {},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
356
pages/kemaskini-daftar/kemaskini/[noSiri]/index.vue
Normal file
356
pages/kemaskini-daftar/kemaskini/[noSiri]/index.vue
Normal file
@ -0,0 +1,356 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex justify-between items-center">
|
||||
<h1>Kemaskini Permohonan</h1>
|
||||
</div>
|
||||
|
||||
<rs-card class="mt-4 p-4">
|
||||
<FormKit type="form" :actions="false" @submit="submitForm">
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Nama Pemohon"
|
||||
v-model="namaPemohon"
|
||||
validation="required"
|
||||
disabled
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Pangkat Pemohon"
|
||||
v-model="pangkatPemohon"
|
||||
validation="required"
|
||||
disabled
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="No Pegawai Pemohon"
|
||||
v-model="noPegawaiPemohon"
|
||||
validation="required"
|
||||
disabled
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Nama Penghantar"
|
||||
v-model="namaPenghantar"
|
||||
validation="required"
|
||||
disabled
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Pangkat Penghantar"
|
||||
v-model="pangkatPenghantar"
|
||||
validation="required"
|
||||
disabled
|
||||
/>
|
||||
<FormKit
|
||||
type="textarea"
|
||||
label="Ringkasan Kenyataan Kes"
|
||||
v-model="ringkasanKenyataanKes"
|
||||
validation="required"
|
||||
disabled
|
||||
/>
|
||||
<FormKit
|
||||
type="number"
|
||||
label="Bilangan"
|
||||
v-model="bilangan"
|
||||
validation="required|number"
|
||||
disabled
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Jenis Barang"
|
||||
v-model="jenisBarang"
|
||||
validation="required"
|
||||
disabled
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Tanda Barang"
|
||||
v-model="tandaBarang"
|
||||
validation="required"
|
||||
disabled
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Keadaan Barang"
|
||||
v-model="keadaanBarang"
|
||||
validation="required"
|
||||
disabled
|
||||
/>
|
||||
<FormKit
|
||||
type="number"
|
||||
label="Kuantiti Barang"
|
||||
v-model="kuantitiBarang"
|
||||
validation="required|number"
|
||||
disabled
|
||||
/>
|
||||
<FormKit
|
||||
type="select"
|
||||
label="Jenis Barang"
|
||||
v-model="jenisBarangDetail"
|
||||
:options="jenisBarangDetailOptions"
|
||||
validation="required"
|
||||
disabled
|
||||
/>
|
||||
<FormKit
|
||||
type="select"
|
||||
label="Jenis Barang Siber"
|
||||
v-model="jenisBarangSiber"
|
||||
:options="jenisBarangSiberOptions"
|
||||
validation="required"
|
||||
disabled
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="No Kertas Siasatan"
|
||||
v-model="noKertasSiasatan"
|
||||
validation="required"
|
||||
disabled
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="No Laporan Polis"
|
||||
v-model="noLaporanPolis"
|
||||
validation="required"
|
||||
disabled
|
||||
/>
|
||||
<div class="flex justify-end gap-2 mt-4">
|
||||
<rs-button type="button" @click="navi" variant="danger"
|
||||
>Kembali</rs-button
|
||||
>
|
||||
<rs-button type="button" @click="confirmBatal" variant="primary"
|
||||
>Tolak</rs-button
|
||||
>
|
||||
<rs-button type="submit" @click="confirmSah" variant="success"
|
||||
>Sah</rs-button
|
||||
>
|
||||
</div>
|
||||
</FormKit>
|
||||
</rs-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const noSiri = ref(route.params.noSiri);
|
||||
|
||||
const namaPemohon = ref("");
|
||||
const pangkatPemohon = ref("");
|
||||
const noPegawaiPemohon = ref("");
|
||||
const namaPenghantar = ref("");
|
||||
const pangkatPenghantar = ref("");
|
||||
const ringkasanKenyataanKes = ref("");
|
||||
const bilangan = ref(0);
|
||||
const jenisBarang = ref("");
|
||||
const tandaBarang = ref("");
|
||||
const keadaanBarang = ref("");
|
||||
const kuantitiBarang = ref(0);
|
||||
const jenisBarangDetail = ref("");
|
||||
const jenisBarangSiber = ref("");
|
||||
const noKertasSiasatan = ref("");
|
||||
const noLaporanPolis = ref("");
|
||||
|
||||
const jenisBarangDetailOptions = [
|
||||
"PASPORT",
|
||||
"MALPASS",
|
||||
"CAP KESELAMATAN",
|
||||
"CAP JARI",
|
||||
"PEMERIKSAAN",
|
||||
"I-KAD",
|
||||
"LAIN-LAIN",
|
||||
];
|
||||
|
||||
const jenisBarangSiberOptions = ["SIBER", "TULISAN TANGAN"];
|
||||
|
||||
const navigateBack = () => {
|
||||
router.back();
|
||||
};
|
||||
|
||||
const isFormValid = () => {
|
||||
const requiredFields = [
|
||||
namaPemohon,
|
||||
pangkatPemohon,
|
||||
noPegawaiPemohon,
|
||||
namaPenghantar,
|
||||
pangkatPenghantar,
|
||||
ringkasanKenyataanKes,
|
||||
bilangan,
|
||||
jenisBarang,
|
||||
tandaBarang,
|
||||
keadaanBarang,
|
||||
kuantitiBarang,
|
||||
jenisBarangDetail,
|
||||
jenisBarangSiber,
|
||||
noKertasSiasatan,
|
||||
noLaporanPolis,
|
||||
];
|
||||
|
||||
return requiredFields.every(
|
||||
(field) => field.value !== "" && field.value !== 0
|
||||
);
|
||||
};
|
||||
|
||||
const simpan = () => {
|
||||
if (isFormValid()) {
|
||||
console.log("Form data saved");
|
||||
} else {
|
||||
console.error("Please fill in all required fields.");
|
||||
}
|
||||
};
|
||||
|
||||
const submitForm = () => {
|
||||
if (isFormValid()) {
|
||||
console.log({
|
||||
namaPemohon: namaPemohon.value,
|
||||
pangkatPemohon: pangkatPemohon.value,
|
||||
noPegawaiPemohon: noPegawaiPemohon.value,
|
||||
namaPenghantar: namaPenghantar.value,
|
||||
pangkatPenghantar: pangkatPenghantar.value,
|
||||
ringkasanKenyataanKes: ringkasanKenyataanKes.value,
|
||||
bilangan: bilangan.value,
|
||||
jenisBarang: jenisBarang.value,
|
||||
tandaBarang: tandaBarang.value,
|
||||
keadaanBarang: keadaanBarang.value,
|
||||
kuantitiBarang: kuantitiBarang.value,
|
||||
jenisBarangDetail: jenisBarangDetail.value,
|
||||
jenisBarangSiber: jenisBarangSiber.value,
|
||||
noKertasSiasatan: noKertasSiasatan.value,
|
||||
noLaporanPolis: noLaporanPolis.value,
|
||||
});
|
||||
|
||||
navigateTo(`/kemaskini-daftar/kemaskini/sah/${noSiri.value}`);
|
||||
} else {
|
||||
$swal.fire({
|
||||
title: "Ralat!",
|
||||
text: "Sila isi semua medan yang diperlukan.",
|
||||
icon: "error",
|
||||
confirmButtonText: "OK",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const confirmBatal = () => {
|
||||
$swal
|
||||
.fire({
|
||||
title: "Anda pasti?",
|
||||
text: "Adakah anda pasti ingin menolak?",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonText: "Ya, batalkan!",
|
||||
cancelButtonText: "Tidak",
|
||||
})
|
||||
.then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
navigateTo(`/kemaskini-daftar/kemaskini/batal/${noSiri.value}`);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const confirmSah = () => {
|
||||
$swal
|
||||
.fire({
|
||||
title: "Anda pasti?",
|
||||
text: "Adakah anda pasti ingin mengesahkan borang ini?",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonText: "Ya, Sahkan!",
|
||||
cancelButtonText: "Tidak",
|
||||
})
|
||||
.then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
submitForm();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
function generateSampleData(noSiri) {
|
||||
const randomNumber = (min, max) =>
|
||||
Math.floor(Math.random() * (max - min + 1) + min);
|
||||
const randomChoice = (arr) => arr[Math.floor(Math.random() * arr.length)];
|
||||
|
||||
const namaPemohon = [
|
||||
"Ali bin Abu",
|
||||
"Siti binti Ahmad",
|
||||
"Muthu a/l Rajan",
|
||||
"Lim Wei Ling",
|
||||
];
|
||||
const pangkat = ["Inspektor", "Sarjan", "Koperal", "Konstabel"];
|
||||
const jenisBarangOptions = [
|
||||
"Dokumen",
|
||||
"Peralatan Elektronik",
|
||||
"Senjata",
|
||||
"Dadah",
|
||||
"Barang Kemas",
|
||||
];
|
||||
const keadaanBarangOptions = ["Baik", "Sederhana", "Rosak"];
|
||||
|
||||
return {
|
||||
noSiri: noSiri,
|
||||
namaPemohon: randomChoice(namaPemohon),
|
||||
pangkatPemohon: randomChoice(pangkat),
|
||||
noPegawaiPemohon: `PG${randomNumber(10000, 99999)}`,
|
||||
namaPenghantar: randomChoice(namaPemohon),
|
||||
pangkatPenghantar: randomChoice(pangkat),
|
||||
ringkasanKenyataanKes: `Kes ${noSiri}: Penemuan barang bukti dalam serbuan di lokasi ${randomChoice(
|
||||
["A", "B", "C", "D"]
|
||||
)}`,
|
||||
bilangan: randomNumber(1, 10),
|
||||
jenisBarang: randomChoice(jenisBarangOptions),
|
||||
tandaBarang: `TB-${randomNumber(1000, 9999)}`,
|
||||
keadaanBarang: randomChoice(keadaanBarangOptions),
|
||||
kuantitiBarang: randomNumber(1, 100),
|
||||
jenisBarangDetail: randomChoice(jenisBarangDetailOptions),
|
||||
jenisBarangSiber: randomChoice(jenisBarangSiberOptions),
|
||||
noKertasSiasatan: `KS-${randomNumber(10000, 99999)}`,
|
||||
noLaporanPolis: `RPT-${randomNumber(100000, 999999)}`,
|
||||
};
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const sampleData = generateSampleData(noSiri.value);
|
||||
|
||||
namaPemohon.value = sampleData.namaPemohon;
|
||||
pangkatPemohon.value = sampleData.pangkatPemohon;
|
||||
noPegawaiPemohon.value = sampleData.noPegawaiPemohon;
|
||||
namaPenghantar.value = sampleData.namaPenghantar;
|
||||
pangkatPenghantar.value = sampleData.pangkatPenghantar;
|
||||
ringkasanKenyataanKes.value = sampleData.ringkasanKenyataanKes;
|
||||
bilangan.value = sampleData.bilangan;
|
||||
jenisBarang.value = sampleData.jenisBarang;
|
||||
tandaBarang.value = sampleData.tandaBarang;
|
||||
keadaanBarang.value = sampleData.keadaanBarang;
|
||||
kuantitiBarang.value = sampleData.kuantitiBarang;
|
||||
jenisBarangDetail.value = sampleData.jenisBarangDetail;
|
||||
jenisBarangSiber.value = sampleData.jenisBarangSiber;
|
||||
noKertasSiasatan.value = sampleData.noKertasSiasatan;
|
||||
noLaporanPolis.value = sampleData.noLaporanPolis;
|
||||
});
|
||||
|
||||
const { $swal } = useNuxtApp();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
</style>
|
||||
158
pages/kemaskini-daftar/kemaskini/batal/[noSiri]/index.vue
Normal file
158
pages/kemaskini-daftar/kemaskini/batal/[noSiri]/index.vue
Normal file
@ -0,0 +1,158 @@
|
||||
@ -1,157 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex justify-between items-center">
|
||||
<h1>Borang Akuan Penolakan Barang Kes</h1>
|
||||
</div>
|
||||
|
||||
<rs-card class="mt-4 p-4">
|
||||
<FormKit type="form" :actions="false" @submit="submitForm">
|
||||
<!-- New Form Fields -->
|
||||
<FormKit
|
||||
type="select"
|
||||
label="Sebab penolakan permohonan"
|
||||
v-model="sebabPenolakan"
|
||||
:options="[
|
||||
'Tiada permohonan dibuat',
|
||||
'Bungkusan barang kes tidak ditanda',
|
||||
'Barang kes yang dihantar tidak ditanda',
|
||||
'Barang kes yang dihantar tidak sesuai',
|
||||
'Lain-lain (Nyatakan)',
|
||||
]"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="textarea"
|
||||
label="Lain-lain sebab"
|
||||
v-model="lainLainSebab"
|
||||
/>
|
||||
|
||||
<div class="flex justify-end gap-2 mt-4">
|
||||
<rs-button type="button" @click="navigateBack()" variant="danger"
|
||||
>Kembali</rs-button
|
||||
>
|
||||
<rs-button
|
||||
type="submit"
|
||||
@click="confirmSah"
|
||||
btn-type="submit"
|
||||
variant="success"
|
||||
>Sah</rs-button
|
||||
>
|
||||
</div>
|
||||
</FormKit>
|
||||
</rs-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const noSiri = ref(route.params.noSiri);
|
||||
|
||||
// New reactive properties
|
||||
const sebabPenolakan = ref("");
|
||||
const lainLainSebab = ref("");
|
||||
|
||||
const navigateBack = () => {
|
||||
router.back();
|
||||
};
|
||||
|
||||
const isFormValid = () => {
|
||||
const requiredFields = [sebabPenolakan];
|
||||
|
||||
return requiredFields.every(
|
||||
(field) => field.value !== "" && field.value !== 0 && field.value !== false
|
||||
);
|
||||
};
|
||||
|
||||
const submitForm = () => {
|
||||
if (isFormValid()) {
|
||||
console.log({
|
||||
sebabPenolakan: sebabPenolakan.value,
|
||||
lainLainSebab: lainLainSebab.value,
|
||||
});
|
||||
|
||||
navigateTo(`/kemaskini-daftar/senarai`);
|
||||
|
||||
$swal.fire({
|
||||
title: "Berjaya!",
|
||||
text: "Borang telah berjaya dihantar.",
|
||||
icon: "success",
|
||||
confirmButtonText: "OK",
|
||||
});
|
||||
} else {
|
||||
$swal.fire({
|
||||
title: "Ralat!",
|
||||
text: "Sila isi semua medan yang diperlukan.",
|
||||
icon: "error",
|
||||
confirmButtonText: "OK",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const confirmBatal = () => {
|
||||
$swal
|
||||
.fire({
|
||||
title: "Anda pasti?",
|
||||
text: "Adakah anda pasti ingin membatalkan?",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonText: "Ya, batalkan!",
|
||||
cancelButtonText: "Tidak",
|
||||
})
|
||||
.then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
navigateBack();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const confirmSah = () => {
|
||||
$swal
|
||||
.fire({
|
||||
title: "Anda pasti?",
|
||||
text: "Adakah anda pasti ingin mengesahkan borang ini?",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonText: "Ya, Sahkan!",
|
||||
cancelButtonText: "Tidak",
|
||||
})
|
||||
.then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
submitForm();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
sebabPenolakan.value = "Tiada permohonan dibuat";
|
||||
lainLainSebab.value = "";
|
||||
});
|
||||
|
||||
const { $swal } = useNuxtApp();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
</style>
|
||||
194
pages/kemaskini-daftar/kemaskini/sah/[noSiri]/index.vue
Normal file
194
pages/kemaskini-daftar/kemaskini/sah/[noSiri]/index.vue
Normal file
@ -0,0 +1,194 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex justify-between items-center">
|
||||
<h1>Borang Akuan Penerimaan Barang Kes</h1>
|
||||
</div>
|
||||
|
||||
<rs-card class="mt-4 p-4">
|
||||
<FormKit type="form" :actions="false" @submit="submitForm">
|
||||
<!-- New Form Fields -->
|
||||
<FormKit
|
||||
type="checkbox"
|
||||
label="Peralatan dalam keadaan baik"
|
||||
v-model="peralatanBaik"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="checkbox"
|
||||
label="Pegawai berkelayakan"
|
||||
v-model="pegawaiBerkelayakan"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="checkbox"
|
||||
label="Kaedah dapat dilakukan"
|
||||
v-model="kaedahDilakukan"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="checkbox"
|
||||
label="Subkontrak diperlukan"
|
||||
v-model="subkontrakDiperlukan"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="select"
|
||||
label="Tugasan diterima (Ya/Tidak)"
|
||||
v-model="tugasanDiterima"
|
||||
:options="['Ya', 'Tidak']"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="textarea"
|
||||
label="Ulasan pegawai kaunter"
|
||||
v-model="ulasanPegawaiKaunter"
|
||||
/>
|
||||
|
||||
<div class="flex justify-end gap-2 mt-4">
|
||||
<rs-button type="button" @click="navigateBack()" variant="danger"
|
||||
>Kembali</rs-button
|
||||
>
|
||||
<rs-button
|
||||
type="submit"
|
||||
@click="confirmSah"
|
||||
btn-type="submit"
|
||||
variant="success"
|
||||
>Sah</rs-button
|
||||
>
|
||||
</div>
|
||||
</FormKit>
|
||||
</rs-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const noSiri = ref(route.params.noSiri);
|
||||
|
||||
// New reactive properties
|
||||
const peralatanBaik = ref(false);
|
||||
const pegawaiBerkelayakan = ref(false);
|
||||
const kaedahDilakukan = ref(false);
|
||||
const subkontrakDiperlukan = ref(false);
|
||||
const tugasanDiterima = ref("");
|
||||
const ulasanPegawaiKaunter = ref("");
|
||||
|
||||
const navigateBack = () => {
|
||||
router.back();
|
||||
};
|
||||
|
||||
const isFormValid = () => {
|
||||
const requiredFields = [
|
||||
peralatanBaik,
|
||||
pegawaiBerkelayakan,
|
||||
kaedahDilakukan,
|
||||
subkontrakDiperlukan,
|
||||
tugasanDiterima,
|
||||
];
|
||||
|
||||
return requiredFields.every(
|
||||
(field) => field.value !== "" && field.value !== 0 && field.value !== false
|
||||
);
|
||||
};
|
||||
|
||||
const submitForm = () => {
|
||||
if (isFormValid()) {
|
||||
console.log({
|
||||
peralatanBaik: peralatanBaik.value,
|
||||
pegawaiBerkelayakan: pegawaiBerkelayakan.value,
|
||||
kaedahDilakukan: kaedahDilakukan.value,
|
||||
subkontrakDiperlukan: subkontrakDiperlukan.value,
|
||||
tugasanDiterima: tugasanDiterima.value,
|
||||
ulasanPegawaiKaunter: ulasanPegawaiKaunter.value,
|
||||
});
|
||||
|
||||
navigateTo(`/kemaskini-daftar/senarai`);
|
||||
|
||||
$swal.fire({
|
||||
title: "Berjaya!",
|
||||
text: "Borang telah berjaya dihantar.",
|
||||
icon: "success",
|
||||
confirmButtonText: "OK",
|
||||
});
|
||||
} else {
|
||||
$swal.fire({
|
||||
title: "Ralat!",
|
||||
text: "Sila isi semua medan yang diperlukan.",
|
||||
icon: "error",
|
||||
confirmButtonText: "OK",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const confirmBatal = () => {
|
||||
$swal
|
||||
.fire({
|
||||
title: "Anda pasti?",
|
||||
text: "Adakah anda pasti ingin membatalkan?",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonText: "Ya, batalkan!",
|
||||
cancelButtonText: "Tidak",
|
||||
})
|
||||
.then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
navigateBack();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const confirmSah = () => {
|
||||
$swal
|
||||
.fire({
|
||||
title: "Anda pasti?",
|
||||
text: "Adakah anda pasti ingin mengesahkan borang ini?",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonText: "Ya, Sahkan!",
|
||||
cancelButtonText: "Tidak",
|
||||
})
|
||||
.then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
submitForm();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
peralatanBaik.value = true;
|
||||
pegawaiBerkelayakan.value = true;
|
||||
kaedahDilakukan.value = true;
|
||||
subkontrakDiperlukan.value = true;
|
||||
tugasanDiterima.value = "Ya";
|
||||
ulasanPegawaiKaunter.value = "Ulasan contoh";
|
||||
});
|
||||
|
||||
const { $swal } = useNuxtApp();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
</style>
|
||||
147
pages/kemaskini-daftar/senarai/index.vue
Normal file
147
pages/kemaskini-daftar/senarai/index.vue
Normal file
@ -0,0 +1,147 @@
|
||||
@ -1,146 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex justify-between items-center">
|
||||
<h1>Senarai Permohonan</h1>
|
||||
</div>
|
||||
|
||||
<rs-card class="mt-4 py-2">
|
||||
<rs-table
|
||||
:data="tableData"
|
||||
:options="{
|
||||
variant: 'default',
|
||||
striped: true,
|
||||
borderless: true,
|
||||
}"
|
||||
:options-advanced="{
|
||||
sortable: true,
|
||||
responsive: true,
|
||||
filterable: false,
|
||||
}"
|
||||
advanced
|
||||
>
|
||||
<template v-slot:header>
|
||||
<tr>
|
||||
<th>No</th>
|
||||
<th>No Siri</th>
|
||||
<th>Tarikh & Masa</th>
|
||||
<th>Status</th>
|
||||
<th>Butiran</th>
|
||||
</tr>
|
||||
</template>
|
||||
<template v-slot:no="data">
|
||||
{{ data.text }}
|
||||
</template>
|
||||
<template v-slot:noSiri="data">
|
||||
{{ data.text || "N/A" }}
|
||||
</template>
|
||||
<template v-slot:tarikhMasa="data">
|
||||
{{ data.text || "N/A" }}
|
||||
</template>
|
||||
<template v-slot:status="data">
|
||||
<rs-badge :variant="data.text === 'Aktif' ? 'success' : 'danger'">
|
||||
{{ data.text || "N/A" }}
|
||||
</rs-badge>
|
||||
</template>
|
||||
<template v-slot:butiran="data">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<rs-button
|
||||
@click="kemaskini(data.value.noSiri)"
|
||||
variant="primary"
|
||||
size="sm"
|
||||
class="p-1"
|
||||
title="Kemaskini"
|
||||
>
|
||||
<Icon name="ic:baseline-edit" size="1.2rem" />
|
||||
</rs-button>
|
||||
</div>
|
||||
</template>
|
||||
</rs-table>
|
||||
</rs-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
const { $swal } = useNuxtApp();
|
||||
|
||||
definePageMeta({
|
||||
title: "Senarai Permohonan",
|
||||
});
|
||||
|
||||
const tableData = ref([
|
||||
{
|
||||
no: 1,
|
||||
noSiri: "1234567890",
|
||||
tarikhMasa: "2024-01-01 12:00:00",
|
||||
status: "Aktif",
|
||||
butiran: 1,
|
||||
},
|
||||
{
|
||||
no: 2,
|
||||
noSiri: "0987654321",
|
||||
tarikhMasa: "2024-02-01 14:30:00",
|
||||
status: "Aktif",
|
||||
butiran: 2,
|
||||
},
|
||||
{
|
||||
no: 3,
|
||||
noSiri: "1122334455",
|
||||
tarikhMasa: "2024-03-01 09:15:00",
|
||||
status: "Aktif",
|
||||
butiran: 3,
|
||||
},
|
||||
{
|
||||
no: 4,
|
||||
noSiri: "5566778899",
|
||||
tarikhMasa: "2024-04-01 16:45:00",
|
||||
status: "Aktif",
|
||||
butiran: 4,
|
||||
},
|
||||
{
|
||||
no: 5,
|
||||
noSiri: "6677889900",
|
||||
tarikhMasa: "2024-05-01 11:00:00",
|
||||
status: "Aktif",
|
||||
butiran: 5,
|
||||
},
|
||||
]);
|
||||
|
||||
const permohonanBaru = () => {
|
||||
navigateTo("/permohonan-online/baru");
|
||||
};
|
||||
|
||||
const kemaskini = (item) => {
|
||||
navigateTo(`/kemaskini-daftar/kemaskini/${item}`);
|
||||
};
|
||||
|
||||
const hapus = (item) => {
|
||||
$swal
|
||||
.fire({
|
||||
title: "Anda pasti?",
|
||||
text: "Anda tidak akan dapat memulihkan semula data ini!",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: "#3085d6",
|
||||
cancelButtonColor: "#d33",
|
||||
confirmButtonText: "Ya, hapuskan!",
|
||||
cancelButtonText: "Batal",
|
||||
})
|
||||
.then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
// Perform deletion logic here
|
||||
console.log("Deleting item:", item);
|
||||
// For now, let's just remove the item from the tableData
|
||||
const index = tableData.value.findIndex((row) => row.noSiri === item);
|
||||
if (index !== -1) {
|
||||
tableData.value.splice(index, 1);
|
||||
}
|
||||
$swal.fire("Dihapuskan!", "Data telah dihapuskan.", "success");
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* Add any scoped styles here */
|
||||
</style>
|
||||
257
pages/permohonan-online/baru/index.vue
Normal file
257
pages/permohonan-online/baru/index.vue
Normal file
@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex justify-between items-center">
|
||||
<h1>Permohonan Baru</h1>
|
||||
</div>
|
||||
|
||||
<rs-card class="mt-4 p-4">
|
||||
<FormKit type="form" :actions="false" @submit="submitForm">
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Nama Pemohon"
|
||||
v-model="namaPemohon"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Pangkat Pemohon"
|
||||
v-model="pangkatPemohon"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="No Pegawai Pemohon"
|
||||
v-model="noPegawaiPemohon"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Nama Penghantar"
|
||||
v-model="namaPenghantar"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Pangkat Penghantar"
|
||||
v-model="pangkatPenghantar"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="textarea"
|
||||
label="Ringkasan Kenyataan Kes"
|
||||
v-model="ringkasanKenyataanKes"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="number"
|
||||
label="Bilangan"
|
||||
v-model="bilangan"
|
||||
validation="required|number"
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Jenis Barang"
|
||||
v-model="jenisBarang"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Tanda Barang"
|
||||
v-model="tandaBarang"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Keadaan Barang"
|
||||
v-model="keadaanBarang"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="number"
|
||||
label="Kuantiti Barang"
|
||||
v-model="kuantitiBarang"
|
||||
validation="required|number"
|
||||
/>
|
||||
<FormKit
|
||||
type="select"
|
||||
label="Jenis Barang"
|
||||
v-model="jenisBarangDetail"
|
||||
:options="jenisBarangDetailOptions"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="select"
|
||||
label="Jenis Barang Siber"
|
||||
v-model="jenisBarangSiber"
|
||||
:options="jenisBarangSiberOptions"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="No Kertas Siasatan"
|
||||
v-model="noKertasSiasatan"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="No Laporan Polis"
|
||||
v-model="noLaporanPolis"
|
||||
validation="required"
|
||||
/>
|
||||
<div class="flex justify-end gap-2 mt-4">
|
||||
<rs-button type="button" @click="navigateBack" variant="danger"
|
||||
>Kembali</rs-button
|
||||
>
|
||||
<rs-button
|
||||
type="button"
|
||||
btn-type="submit"
|
||||
@click="simpan"
|
||||
variant="primary"
|
||||
>Simpan</rs-button
|
||||
>
|
||||
<rs-button
|
||||
type="submit"
|
||||
@click="submitForm"
|
||||
btn-type="submit"
|
||||
variant="success"
|
||||
>Hantar</rs-button
|
||||
>
|
||||
</div>
|
||||
</FormKit>
|
||||
</rs-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const namaPemohon = ref("");
|
||||
const pangkatPemohon = ref("");
|
||||
const noPegawaiPemohon = ref("");
|
||||
const namaPenghantar = ref("");
|
||||
const pangkatPenghantar = ref("");
|
||||
const ringkasanKenyataanKes = ref("");
|
||||
const bilangan = ref(0);
|
||||
const jenisBarang = ref("");
|
||||
const tandaBarang = ref("");
|
||||
const keadaanBarang = ref("");
|
||||
const kuantitiBarang = ref(0);
|
||||
const jenisBarangDetail = ref("");
|
||||
const jenisBarangSiber = ref("");
|
||||
const noKertasSiasatan = ref("");
|
||||
const noLaporanPolis = ref("");
|
||||
|
||||
const jenisBarangDetailOptions = [
|
||||
"PASPORT",
|
||||
"MALPASS",
|
||||
"CAP KESELAMATAN",
|
||||
"CAP JARI",
|
||||
"PEMERIKSAAN",
|
||||
"I-KAD",
|
||||
"LAIN-LAIN",
|
||||
];
|
||||
|
||||
const jenisBarangSiberOptions = ["SIBER", "TULISAN TANGAN"];
|
||||
|
||||
const navigateBack = () => {
|
||||
router.back();
|
||||
};
|
||||
|
||||
const isFormValid = () => {
|
||||
const requiredFields = [
|
||||
namaPemohon,
|
||||
pangkatPemohon,
|
||||
noPegawaiPemohon,
|
||||
namaPenghantar,
|
||||
pangkatPenghantar,
|
||||
ringkasanKenyataanKes,
|
||||
bilangan,
|
||||
jenisBarang,
|
||||
tandaBarang,
|
||||
keadaanBarang,
|
||||
kuantitiBarang,
|
||||
jenisBarangDetail,
|
||||
jenisBarangSiber,
|
||||
noKertasSiasatan,
|
||||
noLaporanPolis,
|
||||
];
|
||||
|
||||
return requiredFields.every(
|
||||
(field) => field.value !== "" && field.value !== 0
|
||||
);
|
||||
};
|
||||
|
||||
const simpan = () => {
|
||||
if (isFormValid()) {
|
||||
// Save form data logic
|
||||
console.log("Form data saved");
|
||||
} else {
|
||||
console.error("Please fill in all required fields.");
|
||||
}
|
||||
};
|
||||
|
||||
const submitForm = () => {
|
||||
if (isFormValid()) {
|
||||
// Handle form submission
|
||||
console.log({
|
||||
namaPemohon: namaPemohon.value,
|
||||
pangkatPemohon: pangkatPemohon.value,
|
||||
noPegawaiPemohon: noPegawaiPemohon.value,
|
||||
namaPenghantar: namaPenghantar.value,
|
||||
pangkatPenghantar: pangkatPenghantar.value,
|
||||
ringkasanKenyataanKes: ringkasanKenyataanKes.value,
|
||||
bilangan: bilangan.value,
|
||||
jenisBarang: jenisBarang.value,
|
||||
tandaBarang: tandaBarang.value,
|
||||
keadaanBarang: keadaanBarang.value,
|
||||
kuantitiBarang: kuantitiBarang.value,
|
||||
jenisBarangDetail: jenisBarangDetail.value,
|
||||
jenisBarangSiber: jenisBarangSiber.value,
|
||||
noKertasSiasatan: noKertasSiasatan.value,
|
||||
noLaporanPolis: noLaporanPolis.value,
|
||||
});
|
||||
|
||||
// Show success message
|
||||
$swal.fire({
|
||||
title: "Berjaya!",
|
||||
text: "Borang telah berjaya dihantar.",
|
||||
icon: "success",
|
||||
confirmButtonText: "OK",
|
||||
});
|
||||
} else {
|
||||
// Show error message
|
||||
$swal.fire({
|
||||
title: "Ralat!",
|
||||
text: "Sila isi semua medan yang diperlukan.",
|
||||
icon: "error",
|
||||
confirmButtonText: "OK",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const { $swal } = useNuxtApp();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
</style>
|
||||
323
pages/permohonan-online/kemaskini/[noSiri]/index.vue
Normal file
323
pages/permohonan-online/kemaskini/[noSiri]/index.vue
Normal file
@ -0,0 +1,323 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex justify-between items-center">
|
||||
<h1>Kemaskini Permohonan</h1>
|
||||
</div>
|
||||
|
||||
<rs-card class="mt-4 p-4">
|
||||
<FormKit type="form" :actions="false" @submit="submitForm">
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Nama Pemohon"
|
||||
v-model="namaPemohon"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Pangkat Pemohon"
|
||||
v-model="pangkatPemohon"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="No Pegawai Pemohon"
|
||||
v-model="noPegawaiPemohon"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Nama Penghantar"
|
||||
v-model="namaPenghantar"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Pangkat Penghantar"
|
||||
v-model="pangkatPenghantar"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="textarea"
|
||||
label="Ringkasan Kenyataan Kes"
|
||||
v-model="ringkasanKenyataanKes"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="number"
|
||||
label="Bilangan"
|
||||
v-model="bilangan"
|
||||
validation="required|number"
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Jenis Barang"
|
||||
v-model="jenisBarang"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Tanda Barang"
|
||||
v-model="tandaBarang"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Keadaan Barang"
|
||||
v-model="keadaanBarang"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="number"
|
||||
label="Kuantiti Barang"
|
||||
v-model="kuantitiBarang"
|
||||
validation="required|number"
|
||||
/>
|
||||
<FormKit
|
||||
type="select"
|
||||
label="Jenis Barang"
|
||||
v-model="jenisBarangDetail"
|
||||
:options="jenisBarangDetailOptions"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="select"
|
||||
label="Jenis Barang Siber"
|
||||
v-model="jenisBarangSiber"
|
||||
:options="jenisBarangSiberOptions"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="No Kertas Siasatan"
|
||||
v-model="noKertasSiasatan"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="No Laporan Polis"
|
||||
v-model="noLaporanPolis"
|
||||
validation="required"
|
||||
/>
|
||||
<div class="flex justify-end gap-2 mt-4">
|
||||
<rs-button type="button" @click="navigateBack" variant="danger"
|
||||
>Kembali</rs-button
|
||||
>
|
||||
<rs-button
|
||||
type="button"
|
||||
@click="simpan"
|
||||
btn-type="submit"
|
||||
variant="primary"
|
||||
>Simpan</rs-button
|
||||
>
|
||||
<rs-button
|
||||
type="submit"
|
||||
@click="submitForm"
|
||||
btn-type="submit"
|
||||
variant="success"
|
||||
>Hantar</rs-button
|
||||
>
|
||||
</div>
|
||||
</FormKit>
|
||||
</rs-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const noSiri = ref(route.params.noSiri);
|
||||
|
||||
const namaPemohon = ref("");
|
||||
const pangkatPemohon = ref("");
|
||||
const noPegawaiPemohon = ref("");
|
||||
const namaPenghantar = ref("");
|
||||
const pangkatPenghantar = ref("");
|
||||
const ringkasanKenyataanKes = ref("");
|
||||
const bilangan = ref(0);
|
||||
const jenisBarang = ref("");
|
||||
const tandaBarang = ref("");
|
||||
const keadaanBarang = ref("");
|
||||
const kuantitiBarang = ref(0);
|
||||
const jenisBarangDetail = ref("");
|
||||
const jenisBarangSiber = ref("");
|
||||
const noKertasSiasatan = ref("");
|
||||
const noLaporanPolis = ref("");
|
||||
|
||||
const jenisBarangDetailOptions = [
|
||||
"PASPORT",
|
||||
"MALPASS",
|
||||
"CAP KESELAMATAN",
|
||||
"CAP JARI",
|
||||
"PEMERIKSAAN",
|
||||
"I-KAD",
|
||||
"LAIN-LAIN",
|
||||
];
|
||||
|
||||
const jenisBarangSiberOptions = ["SIBER", "TULISAN TANGAN"];
|
||||
|
||||
const navigateBack = () => {
|
||||
router.back();
|
||||
};
|
||||
|
||||
const isFormValid = () => {
|
||||
const requiredFields = [
|
||||
namaPemohon,
|
||||
pangkatPemohon,
|
||||
noPegawaiPemohon,
|
||||
namaPenghantar,
|
||||
pangkatPenghantar,
|
||||
ringkasanKenyataanKes,
|
||||
bilangan,
|
||||
jenisBarang,
|
||||
tandaBarang,
|
||||
keadaanBarang,
|
||||
kuantitiBarang,
|
||||
jenisBarangDetail,
|
||||
jenisBarangSiber,
|
||||
noKertasSiasatan,
|
||||
noLaporanPolis,
|
||||
];
|
||||
|
||||
return requiredFields.every(
|
||||
(field) => field.value !== "" && field.value !== 0
|
||||
);
|
||||
};
|
||||
|
||||
const simpan = () => {
|
||||
if (isFormValid()) {
|
||||
// Save form data logic
|
||||
console.log("Form data saved");
|
||||
} else {
|
||||
console.error("Please fill in all required fields.");
|
||||
}
|
||||
};
|
||||
|
||||
const submitForm = () => {
|
||||
if (isFormValid()) {
|
||||
// Handle form submission
|
||||
console.log({
|
||||
namaPemohon: namaPemohon.value,
|
||||
pangkatPemohon: pangkatPemohon.value,
|
||||
noPegawaiPemohon: noPegawaiPemohon.value,
|
||||
namaPenghantar: namaPenghantar.value,
|
||||
pangkatPenghantar: pangkatPenghantar.value,
|
||||
ringkasanKenyataanKes: ringkasanKenyataanKes.value,
|
||||
bilangan: bilangan.value,
|
||||
jenisBarang: jenisBarang.value,
|
||||
tandaBarang: tandaBarang.value,
|
||||
keadaanBarang: keadaanBarang.value,
|
||||
kuantitiBarang: kuantitiBarang.value,
|
||||
jenisBarangDetail: jenisBarangDetail.value,
|
||||
jenisBarangSiber: jenisBarangSiber.value,
|
||||
noKertasSiasatan: noKertasSiasatan.value,
|
||||
noLaporanPolis: noLaporanPolis.value,
|
||||
});
|
||||
|
||||
// Show success message
|
||||
$swal.fire({
|
||||
title: "Berjaya!",
|
||||
text: "Borang telah berjaya dihantar.",
|
||||
icon: "success",
|
||||
confirmButtonText: "OK",
|
||||
});
|
||||
} else {
|
||||
// Show error message
|
||||
$swal.fire({
|
||||
title: "Ralat!",
|
||||
text: "Sila isi semua medan yang diperlukan.",
|
||||
icon: "error",
|
||||
confirmButtonText: "OK",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
function generateSampleData(noSiri) {
|
||||
const randomNumber = (min, max) =>
|
||||
Math.floor(Math.random() * (max - min + 1) + min);
|
||||
const randomChoice = (arr) => arr[Math.floor(Math.random() * arr.length)];
|
||||
|
||||
const namaPemohon = [
|
||||
"Ali bin Abu",
|
||||
"Siti binti Ahmad",
|
||||
"Muthu a/l Rajan",
|
||||
"Lim Wei Ling",
|
||||
];
|
||||
const pangkat = ["Inspektor", "Sarjan", "Koperal", "Konstabel"];
|
||||
const jenisBarangOptions = [
|
||||
"Dokumen",
|
||||
"Peralatan Elektronik",
|
||||
"Senjata",
|
||||
"Dadah",
|
||||
"Barang Kemas",
|
||||
];
|
||||
const keadaanBarangOptions = ["Baik", "Sederhana", "Rosak"];
|
||||
|
||||
return {
|
||||
noSiri: noSiri,
|
||||
namaPemohon: randomChoice(namaPemohon),
|
||||
pangkatPemohon: randomChoice(pangkat),
|
||||
noPegawaiPemohon: `PG${randomNumber(10000, 99999)}`,
|
||||
namaPenghantar: randomChoice(namaPemohon),
|
||||
pangkatPenghantar: randomChoice(pangkat),
|
||||
ringkasanKenyataanKes: `Kes ${noSiri}: Penemuan barang bukti dalam serbuan di lokasi ${randomChoice(
|
||||
["A", "B", "C", "D"]
|
||||
)}`,
|
||||
bilangan: randomNumber(1, 10),
|
||||
jenisBarang: randomChoice(jenisBarangOptions),
|
||||
tandaBarang: `TB-${randomNumber(1000, 9999)}`,
|
||||
keadaanBarang: randomChoice(keadaanBarangOptions),
|
||||
kuantitiBarang: randomNumber(1, 100),
|
||||
jenisBarangDetail: randomChoice(jenisBarangDetailOptions),
|
||||
jenisBarangSiber: randomChoice(jenisBarangSiberOptions),
|
||||
noKertasSiasatan: `KS-${randomNumber(10000, 99999)}`,
|
||||
noLaporanPolis: `RPT-${randomNumber(100000, 999999)}`,
|
||||
};
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const sampleData = generateSampleData(noSiri.value);
|
||||
|
||||
namaPemohon.value = sampleData.namaPemohon;
|
||||
pangkatPemohon.value = sampleData.pangkatPemohon;
|
||||
noPegawaiPemohon.value = sampleData.noPegawaiPemohon;
|
||||
namaPenghantar.value = sampleData.namaPenghantar;
|
||||
pangkatPenghantar.value = sampleData.pangkatPenghantar;
|
||||
ringkasanKenyataanKes.value = sampleData.ringkasanKenyataanKes;
|
||||
bilangan.value = sampleData.bilangan;
|
||||
jenisBarang.value = sampleData.jenisBarang;
|
||||
tandaBarang.value = sampleData.tandaBarang;
|
||||
keadaanBarang.value = sampleData.keadaanBarang;
|
||||
kuantitiBarang.value = sampleData.kuantitiBarang;
|
||||
jenisBarangDetail.value = sampleData.jenisBarangDetail;
|
||||
jenisBarangSiber.value = sampleData.jenisBarangSiber;
|
||||
noKertasSiasatan.value = sampleData.noKertasSiasatan;
|
||||
noLaporanPolis.value = sampleData.noLaporanPolis;
|
||||
});
|
||||
|
||||
const { $swal } = useNuxtApp();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
</style>
|
||||
161
pages/permohonan-online/senarai/index.vue
Normal file
161
pages/permohonan-online/senarai/index.vue
Normal file
@ -0,0 +1,161 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex justify-between items-center">
|
||||
<h1>Senarai Permohonan</h1>
|
||||
<rs-button @click="permohonanBaru()" variant="primary" class="mt-2">
|
||||
Permohonan Baru
|
||||
</rs-button>
|
||||
</div>
|
||||
|
||||
<rs-card class="mt-4 py-2">
|
||||
<rs-table
|
||||
:data="tableData"
|
||||
:options="{
|
||||
variant: 'default',
|
||||
striped: true,
|
||||
borderless: true,
|
||||
}"
|
||||
:options-advanced="{
|
||||
sortable: true,
|
||||
responsive: true,
|
||||
filterable: false,
|
||||
}"
|
||||
advanced
|
||||
>
|
||||
<template v-slot:header>
|
||||
<tr>
|
||||
<th>No</th>
|
||||
<th>No Siri</th>
|
||||
<th>Tarikh & Masa</th>
|
||||
<th>Status</th>
|
||||
<th>Butiran</th>
|
||||
</tr>
|
||||
</template>
|
||||
<template v-slot:no="data">
|
||||
{{ data.text }}
|
||||
</template>
|
||||
<template v-slot:noSiri="data">
|
||||
{{ data.text || "N/A" }}
|
||||
</template>
|
||||
<template v-slot:tarikhMasa="data">
|
||||
{{ data.text || "N/A" }}
|
||||
</template>
|
||||
<template v-slot:status="data">
|
||||
<rs-badge :variant="data.text === 'Aktif' ? 'success' : 'danger'">
|
||||
{{ data.text || "N/A" }}
|
||||
</rs-badge>
|
||||
</template>
|
||||
<template v-slot:butiran="data">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<rs-button
|
||||
@click="kemaskini(data.value.noSiri)"
|
||||
variant="primary"
|
||||
size="sm"
|
||||
class="p-1"
|
||||
title="Kemaskini"
|
||||
>
|
||||
<Icon name="ic:baseline-edit" size="1.2rem" />
|
||||
</rs-button>
|
||||
<rs-button
|
||||
@click="hapus(data.value.noSiri)"
|
||||
variant="danger"
|
||||
size="sm"
|
||||
class="p-1"
|
||||
title="Hapus"
|
||||
>
|
||||
<Icon name="ic:baseline-delete" size="1.2rem" />
|
||||
</rs-button>
|
||||
</div>
|
||||
</template>
|
||||
</rs-table>
|
||||
</rs-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
const { $swal } = useNuxtApp();
|
||||
|
||||
definePageMeta({
|
||||
title: "Senarai Permohonan",
|
||||
});
|
||||
|
||||
const tableData = ref([
|
||||
{
|
||||
no: 1,
|
||||
noSiri: "1234567890",
|
||||
tarikhMasa: "2024-01-01 12:00:00",
|
||||
status: "Aktif",
|
||||
butiran: 1,
|
||||
},
|
||||
{
|
||||
no: 2,
|
||||
noSiri: "0987654321",
|
||||
tarikhMasa: "2024-02-01 14:30:00",
|
||||
status: "Tidak Aktif",
|
||||
butiran: 2,
|
||||
},
|
||||
{
|
||||
no: 3,
|
||||
noSiri: "1122334455",
|
||||
tarikhMasa: "2024-03-01 09:15:00",
|
||||
status: "Aktif",
|
||||
butiran: 3,
|
||||
},
|
||||
{
|
||||
no: 4,
|
||||
noSiri: "5566778899",
|
||||
tarikhMasa: "2024-04-01 16:45:00",
|
||||
status: "Tidak Aktif",
|
||||
butiran: 4,
|
||||
},
|
||||
{
|
||||
no: 5,
|
||||
noSiri: "6677889900",
|
||||
tarikhMasa: "2024-05-01 11:00:00",
|
||||
status: "Aktif",
|
||||
butiran: 5,
|
||||
},
|
||||
]);
|
||||
|
||||
const permohonanBaru = () => {
|
||||
navigateTo("/permohonan-online/baru");
|
||||
};
|
||||
|
||||
const kemaskini = (item) => {
|
||||
navigateTo(`/permohonan-online/kemaskini/${item}`);
|
||||
};
|
||||
|
||||
const hapus = (item) => {
|
||||
$swal.fire({
|
||||
title: 'Anda pasti?',
|
||||
text: "Anda tidak akan dapat memulihkan semula data ini!",
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3085d6',
|
||||
cancelButtonColor: '#d33',
|
||||
confirmButtonText: 'Ya, hapuskan!',
|
||||
cancelButtonText: 'Batal'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
// Perform deletion logic here
|
||||
console.log("Deleting item:", item);
|
||||
// For now, let's just remove the item from the tableData
|
||||
const index = tableData.value.findIndex(row => row.noSiri === item);
|
||||
if (index !== -1) {
|
||||
tableData.value.splice(index, 1);
|
||||
}
|
||||
$swal.fire(
|
||||
'Dihapuskan!',
|
||||
'Data telah dihapuskan.',
|
||||
'success'
|
||||
)
|
||||
}
|
||||
})
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* Add any scoped styles here */
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user