finaledit_penyata
This commit is contained in:
@@ -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> </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> </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 */
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user