finaledit_penyata

This commit is contained in:
hayatie
2025-12-29 12:30:59 +08:00
parent c32b633b8d
commit 0a6c3ab0d8
@@ -69,40 +69,56 @@
class="form-control form-control-sm" v-model="tarikh" />
</p>
<!-- 2-COLUMN TABLE -->
<table class="boxed-table mt-4">
<tbody>
<tr>
<td>Saham</td>
<td>{{ data.user.saham }}</td>
<td>Yuran</td>
<td>{{ data.user.yuran}}</td>
<tr>
<td>Pelaburan T1</td>
<td>{{ penyata.pelaburan_t1 }}</td>
<td>Pinjaman BAI</td>
<td>{{ penyata.pinjaman_bai }}</td>
</tr>
<tr>
<td>Pelaburan T2</td>
<td>{{ penyata.pelaburan_t2 }}</td>
<td>Pinjaman BYS</td>
<td>{{ penyata.pinjaman_bys}}</td>
</tr>
<tr>
<td>Pelaburan AQH</td>
<td>{{ penyata.pelaburan_aqh }}</td>
<td>Insurans / Cukai Jalan</td>
<td>{{penyata.insurans_cukai}}</td>
</tr>
<tr>
<td>Pelaburan BBA </td>
<td>{{ penyata.pelaburan_bba }}</td>
<td>Pinjaman Pelbagai</td>
<td>{{ penyata.pinj_pelbagai }}</td>
</tr>
</tbody>
</table>
<div id="app" data-penyata='@json($penyata)'>
<table class="boxed-table mt-4">
<tbody>
<tr>
<td>Saham</td>
<td>{{ data.user.saham }}</td>
<td>Yuran</td>
<td>{{ data.user.yuran }}</td>
</tr>
<tr>
<td>Pelaburan T1</td>
<td>{{ data.user.pelaburanT1 }}</td>
<td>Pinjaman BAI</td>
<td>{{ data.user.pinjamanBAI }}</td>
</tr>
<tr>
<td>Pelaburan T2</td>
<td>{{ data.user.pelaburanT2 }}</td>
<td>Pinjaman BYS</td>
<td>{{ data.user.pinjamanBYS }}</td>
</tr>
<tr>
<td>Pinjaman AQH</td>
<td>{{ data.user.pinjamanAQH }}</td>
<td>Insurans / Cukai Jalan</td>
<td>{{ data.user.insuransCukai }}</td>
</tr>
<tr>
<td>Pinjaman BBA</td>
<td>{{ data.user.pinjamanBBA }}</td>
<td>Pinjaman Pelbagai</td>
<td>{{ data.user.pinjamanPelbagai }}</td>
</tr>
</tbody>
</table>
</div>
<!-- FOOTER SECTION -->
<p class="mt-4"><em>
@@ -144,39 +160,40 @@
<p style="text-align: justify;"></p>Jika Tidak Bersetuju, Sila kemukakan yang sepatutnya seperti :
<br>
<!-- 2-COLUMN TABLE -->
<div id="app" data-penyata='@json($penyata)'></div>
<table class="table table-sm no-lines text-center align-middle">
<tbody>
<tr>
<td>Saham</td>
<td><input type="number" class="form-control-sm keyin-input" v-model="penyata.saham" /></td>
<td><input type="number" class="form-control-sm keyin-input" v-model="data.user.saham" /></td>
<td>Pinjaman AQH</td>
<td><input type="number" class="form-control-sm keyin-input" v-model="pinjamanAQH" /></td>
<td><input type="number" class="form-control-sm keyin-input" v-model="data.user.pinjamanAQH" /></td>
</tr>
<tr>
<td>Yuran</td>
<td><input type="number" class="form-control-sm keyin-input" v-model="yuran" /></td>
<td><input type="number" class="form-control-sm keyin-input" v-model="data.user.yuran" /></td>
<td>Pinjaman BBA</td>
<td><input type="number" class="form-control-sm keyin-input" v-model="penyata.pinjaman_bba" /></td>
<td><input type="number" class="form-control-sm keyin-input" v-model="data.user.pinjamanBBA" /></td>
</tr>
<tr>
<td>Pelaburan T1</td>
<td><input type="number" class="form-control-sm keyin-input" v-model="penyata.pelaburan_t1" /></td>
<td><input type="number" class="form-control-sm keyin-input" v-model="data.user.pelaburanT1" /></td>
<td>Pinjaman BAI</td>
<td><input type="number" class="form-control-sm keyin-input" v-model="penyata.pinjaman_bai" /></td>
<td><input type="number" class="form-control-sm keyin-input" v-model="data.user.pinjamanBAI" /></td>
</tr>
<tr>
<td>Pelaburan T2</td>
<td><input type="number" class="form-control-sm keyin-input" v-model="penyata.pelaburan_t2" /></td>
<td><input type="number" class="form-control-sm keyin-input" v-model="data.user.pelaburanT2" /></td>
<td>Pinjaman BYS</td>
<td><input type="number" class="form-control-sm keyin-input" v-model="penyata.pinjaman_bys" /></td>
<td><input type="number" class="form-control-sm keyin-input" v-model="data.user.pinjamanBYS" /></td>
</tr>
<tr>
@@ -184,7 +201,7 @@
<td>&nbsp;</td>
<td>Insurans / Cukai Jalan</td>
<td><input type="number" class="form-control-sm keyin-input" v-model="penyata.insurans_cukai" /></td>
<td><input type="number" class="form-control-sm keyin-input" v-model="data.user.insuransCukai" /></td>
</tr>
<tr>
@@ -192,7 +209,7 @@
<td>&nbsp;</td>
<td>Pinjaman Pelbagai</td>
<td><input type="text" class="form-control-sm keyin-input" v-model="penyata.pinj_Pelbagai" /></td>
<td><input type="text" class="form-control-sm keyin-input" v-model="data.user.pinjamanPelbagai" /></td>
</tr>
</tbody>
@@ -200,18 +217,19 @@
<!-- Sah Button -->
<div class="text-right mb-3 no-print">
<button type="button" class="btn btn-primary btn-effect" style="width: 100px;" @click="SahkanPenyata">
Sahkan
</button>
<button type="button" class="btn btn-primary btn-effect" style="width: 100px;" @click="SahkanPenyata">
Sahkan
</button>
</div>
<!-- Tandatangan & Tarikh Section -->
<div class="signature-section">
<div class="sign-column">
<label class="form-label">Tandatangan:</label>
<input type="sign" class="keyin-line" v-model="sign" />
<label class="form-label">No Kad Pengenalan:</label>
<input type="number" class="keyin-line" v-model="nokp" />
</div>
<div class="sig-column">
@@ -225,7 +243,7 @@
</template>
<script>
import axios from 'axios'; // <-- this is required
import axios from 'axios';
export default {
name: "PenyataView",
@@ -254,7 +272,7 @@ export default {
},
mounted() {
const id = this.$route.params.id;
const id = this.$route.params.id;
this.noAhli = id;
this.noAhliPersetujuan = id;
this.getPenyata(id);
@@ -270,17 +288,38 @@ export default {
}
},
data() {
return {
penyata: window.penyataData
};
},
SahkanPenyata() {
if (confirm("Adakah anda pasti untuk mengesahkan penyata ini?")) {
this.cetakPenyata();
alert("Penyata berjaya disahkan.");
if (confirm("Adakah anda pasti untuk mengesahkan penyata ini?")) {
this.cetakPenyata();
alert("Penyata berjaya disahkan.");
// Delay sedikit supaya Vue Router push jalan dengan betul
setTimeout(() => {
this.$router.push({ name: 'lamanUtama' });
}, 60);
}
},
// pastikan ada method lain di sini jika perlu
cetakPenyata() {
console.log("Penyata dicetak");
}
}
};
}
</script>
<style scoped>
.penyata-wrapper {
max-width: 800px;
@@ -316,8 +355,10 @@ export default {
.form-section.two-column {
display: grid;
/* width: 100%; */
max-width: 780px; /* ⭐ SAME WIDTH AS TABLES */
margin: 0 auto; /* ⭐ center align same as tables */
max-width: 780px;
/* ⭐ SAME WIDTH AS TABLES */
margin: 0 auto;
/* ⭐ center align same as tables */
grid-template-columns: repeat(2, 1fr);
column-gap: 30px;
row-gap: 15px;
@@ -326,14 +367,17 @@ export default {
.form-section.two-column .form-group {
min-width: 0; /* ⭐ prevents content from stretching columns */
min-width: 0;
/* ⭐ prevents content from stretching columns */
}
.form-section.two-column input,
.form-section.two-column span {
width: 100%; /* keep content inside column */
width: 100%;
/* keep content inside column */
display: block;
word-break: break-word; /* wrap long text */
word-break: break-word;
/* wrap long text */
}
@@ -378,7 +422,7 @@ table.boxed-table td {
justify-content: center;
}
}
.title-box {
@@ -436,22 +480,27 @@ table.boxed-table td {
.signature-section {
display: grid;
grid-template-columns: 1fr 1fr; /* equal 50/50 width */
grid-template-columns: 1fr 1fr;
/* equal 50/50 width */
column-gap: 40px;
row-gap: 15px;
width: 100%;
max-width: 780px; /* ⭐ same width as tables */
margin: 20px auto 0 auto; /* ⭐ center align */
max-width: 780px;
/* ⭐ same width as tables */
margin: 20px auto 0 auto;
/* ⭐ center align */
}
.signature-section .sign-column,
.signature-section .sig-column {
min-width: 0; /* allows equal split */
min-width: 0;
/* allows equal split */
}
.signature-section input {
width: 90%; /* align input edges */
width: 90%;
/* align input edges */
}