Merge branch 'develop' into work1
This commit is contained in:
Kittapath
commit
c872825fae
4 changed files with 423 additions and 2 deletions
|
|
@ -327,7 +327,7 @@ const updateDateRange = () => {
|
|||
console.log(1)
|
||||
} else if (roundInsig.value.value == 2) {
|
||||
dateStart.value = new Date(new Date().getFullYear(), 3, 29);
|
||||
dateEnd.value = new Date(new Date().getFullYear() + 1, 6, 28);
|
||||
dateEnd.value = new Date(new Date().getFullYear(), 4, 29);
|
||||
console.log(2)
|
||||
}
|
||||
};
|
||||
|
|
|
|||
409
src/modules/07_insignia/components/VatInsignia.vue
Normal file
409
src/modules/07_insignia/components/VatInsignia.vue
Normal file
|
|
@ -0,0 +1,409 @@
|
|||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
<!-- <q-btn
|
||||
icon="mdi-arrow-left"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
@click="router.go(-1)"
|
||||
/> -->
|
||||
บันทึกผลการจ่ายใบกำกับ
|
||||
</div>
|
||||
<q-card flat bordered class="col-12 q-my-md q-mt-sm rounded-borders">
|
||||
<div class="q-py-md q-px-lg">
|
||||
<div class="q-mt-md">
|
||||
<div class="col-12 row q-pb-sm items-center">
|
||||
<selector
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="selectType"
|
||||
hide-bottom-space
|
||||
:label="`${'ประเภทเครื่องราชฯ'}`"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="selectTypeOption"
|
||||
option-value="id"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
style="min-width: 150px"
|
||||
class="gt-xs q-ml-sm"
|
||||
@filter="(inputValue:string,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'selectTypeOption'
|
||||
) "
|
||||
/>
|
||||
<selector
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="selectStatus"
|
||||
hide-bottom-space
|
||||
:label="`${'สถานะการจ่ายใบกำกับ'}`"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="selectStatusOption"
|
||||
option-value="id"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
style="min-width: 150px"
|
||||
class="gt-xs q-ml-sm"
|
||||
@filter="(inputValue:string,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'selectStatusOption'
|
||||
) "
|
||||
/>
|
||||
<q-space />
|
||||
<div class="items-center" style="display: flex">
|
||||
<!-- ค้นหาข้อความใน table -->
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
v-model="filter"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
style="max-width: 200px"
|
||||
class="q-ml-sm"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="filter == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="filter !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<!-- แสดงคอลัมน์ใน table -->
|
||||
<q-select
|
||||
v-model="visibleColumns"
|
||||
:display-value="$q.lang.table.columns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
:options="columns"
|
||||
options-dense
|
||||
option-value="name"
|
||||
map-options
|
||||
emit-value
|
||||
style="min-width: 150px"
|
||||
class="gt-xs q-ml-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<d-table
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:visible-columns="visibleColumns"
|
||||
:filter="filter"
|
||||
row-key="name"
|
||||
>
|
||||
<template v-slot:body-cell="props">
|
||||
<q-td :props="props">
|
||||
<div v-if="props.col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else-if="props.col.name == 'datepay'">
|
||||
{{ date2Thai(props.value) ?? "-" }}
|
||||
</div>
|
||||
<div
|
||||
class="table_ellipsis"
|
||||
v-else-if="props.col.name == 'address'"
|
||||
>
|
||||
{{ props.value ?? "-" }}
|
||||
</div>
|
||||
<div v-else-if="props.col.name == 'status'">
|
||||
{{ props.value ?? "-" }}
|
||||
<q-btn
|
||||
class="q-ml-sm"
|
||||
color="blue"
|
||||
outline
|
||||
dense
|
||||
v-if="props.value == 'ยังไม่ได้จ่าย'"
|
||||
@click="open"
|
||||
>
|
||||
จ่ายแล้ว
|
||||
</q-btn>
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ props.value ?? "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card>
|
||||
<DialogHeader tittle="รูปแบบการจ่าย" :close="close" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section class="q-pa-md">
|
||||
<selector
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="selectPayType"
|
||||
hide-bottom-space
|
||||
:label="`${'เลือกรูปแบบการจ่าย'}`"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="selectPayTypeOption"
|
||||
option-value="id"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
style="min-width: 150px"
|
||||
class="gt-xs q-ml-sm"
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right">
|
||||
<q-btn label="บันทึก" color="public" />
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
// import { useRouter } from "vue-router";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
import type { OptionData } from "@/modules/07_insignia/interface/index/Main";
|
||||
import type { QTableProps, QInput } from "quasar";
|
||||
|
||||
// const router = useRouter();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai } = mixin;
|
||||
|
||||
const selectStatus = ref<string>("1");
|
||||
const selectStatusOption = ref<OptionData[]>([]);
|
||||
const selectStatusOptionFilter = ref<OptionData[]>([]);
|
||||
|
||||
const selectType = ref<string>("1");
|
||||
const selectTypeOption = ref<OptionData[]>([]);
|
||||
const selectTypeOptionFilter = ref<OptionData[]>([]);
|
||||
|
||||
const selectPayType = ref<string>("1");
|
||||
const selectPayTypeOption = ref<OptionData[]>([
|
||||
{ id: "1", name: "จัดส่งทางไปรษณี" },
|
||||
{ id: "2", name: "มารับด้วยตัวเอง" },
|
||||
]);
|
||||
|
||||
const modal = ref<boolean>(false);
|
||||
|
||||
const open = () => (modal.value = true);
|
||||
const close = () => (modal.value = false);
|
||||
|
||||
const visibleColumns = ref<String[]>([
|
||||
"no",
|
||||
"idcard",
|
||||
"name",
|
||||
"type",
|
||||
"vatnumber",
|
||||
"datepay",
|
||||
"typepay",
|
||||
"address",
|
||||
"status",
|
||||
]);
|
||||
const filterRef = ref<QInput>();
|
||||
const filter = ref<string>("");
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
field: "no",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "idcard",
|
||||
align: "left",
|
||||
label: "เลขประจำตัวประชาชน",
|
||||
field: "idcard",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "name",
|
||||
align: "left",
|
||||
label: "ชื่อ - สกุล",
|
||||
field: "name",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "type",
|
||||
align: "left",
|
||||
label: "ประเภทเครื่องราชฯ ที่ได้รับ",
|
||||
field: "type",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "vatnumber",
|
||||
align: "left",
|
||||
label: "หมายเลขใบกำกับ",
|
||||
field: "vatnumber",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "datepay",
|
||||
align: "left",
|
||||
label: "วันที่จ่ายใบกำกับฯ",
|
||||
field: "datepay",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "typepay",
|
||||
align: "left",
|
||||
label: "รูปแบบการจ่าย",
|
||||
field: "typepay",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "address",
|
||||
align: "left",
|
||||
label: "ที่อยู่ที่จ่าย",
|
||||
field: "address",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "status",
|
||||
align: "left",
|
||||
label: "สถานะการจ่าย",
|
||||
field: "status",
|
||||
sortable: true,
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
const rows = ref<any>([
|
||||
{
|
||||
no: "1",
|
||||
idcard: "1XXXXXXXXXXXX",
|
||||
name: "นางสาวรัชภรณ์ ภักดี",
|
||||
type: "ตริตาภรณ์ช้างเผือก",
|
||||
vatnumber: "5647833",
|
||||
datepay: null,
|
||||
typepay: null,
|
||||
address: "เลขที่ 2/3 หมู่ที่ 14 ถนนบ...",
|
||||
status: "ยังไม่ได้จ่าย",
|
||||
},
|
||||
{
|
||||
no: "2",
|
||||
idcard: "1XXXXXXXXXXXX",
|
||||
name: "นางสาวภาพรรณ ลออ",
|
||||
type: "จัตุรถาภรณ์ช้างเผือก",
|
||||
vatnumber: "1122345",
|
||||
datepay: null,
|
||||
typepay: null,
|
||||
address: "เลขที่ 2/3 หมู่ที่ 14 ถนนบ...",
|
||||
status: "ยังไม่ได้จ่าย",
|
||||
},
|
||||
{
|
||||
no: "3",
|
||||
idcard: "1XXXXXXXXXXXX",
|
||||
name: "นายนภัทร นาทองดี",
|
||||
type: "จัตุรถาภรณ์ช้างเผือก",
|
||||
vatnumber: "1223354",
|
||||
datepay: new Date(),
|
||||
typepay: "มารับด้วยตัวเอง",
|
||||
address: "330 ถ.เชียงใหม่-ลำปาง...",
|
||||
status: "จ่ายแล้ว",
|
||||
},
|
||||
]);
|
||||
|
||||
onMounted(() => {
|
||||
const op1: OptionData[] = [{ id: "1", name: "ทั้งหมด" }];
|
||||
const op2: OptionData[] = [
|
||||
{ id: "1", name: "ทั้งหมด" },
|
||||
{ id: "2", name: "รอบันทึกข้อมูล" },
|
||||
{ id: "3", name: "บันทึกลง ก.พ. 7 แล้ว" },
|
||||
];
|
||||
selectTypeOption.value = op1;
|
||||
selectTypeOptionFilter.value = op1;
|
||||
selectStatusOption.value = op2;
|
||||
selectStatusOptionFilter.value = op2;
|
||||
});
|
||||
|
||||
const resetFilter = () => {
|
||||
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
|
||||
filter.value = "";
|
||||
filterRef.value!.focus();
|
||||
};
|
||||
|
||||
const filterSelector = (val: any, update: Function, filtername: string) => {
|
||||
switch (filtername) {
|
||||
case "selectTypeOption":
|
||||
update(() => {
|
||||
selectTypeOption.value = selectTypeOptionFilter.value.filter(
|
||||
(v: OptionData) => v.name!.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "selectStatusOption":
|
||||
update(() => {
|
||||
selectStatusOption.value = selectStatusOptionFilter.value.filter(
|
||||
(v: OptionData) => v.name!.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.arrow {
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
.arrow-active {
|
||||
transition: transform 0.5s;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.bg-base {
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
.v-enter-active,
|
||||
.v-leave-active {
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.v-enter-from,
|
||||
.v-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.flexsave {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -24,6 +24,8 @@ const allocateDetail = () =>
|
|||
import("@/modules/07_insignia/components/4_Allocate/detail.vue");
|
||||
const allocateDetailAdd = () =>
|
||||
import("@/modules/07_insignia/components/4_Allocate/addDetail.vue");
|
||||
const VatInsignia = () =>
|
||||
import("@/modules/07_insignia/components/VatInsignia.vue");
|
||||
export default [
|
||||
{
|
||||
path: "/insignia",
|
||||
|
|
@ -156,4 +158,14 @@ export default [
|
|||
Role: "insignia",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/insignia/vat",
|
||||
name: "VatInsignia",
|
||||
component: VatInsignia,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [8.9],
|
||||
Role: "insignia",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -351,7 +351,7 @@ const updateDateRange = () => {
|
|||
console.log(1)
|
||||
} else if (roundCoin.value.value == 2) {
|
||||
dateStart.value = new Date(new Date().getFullYear(), 3, 29);
|
||||
dateEnd.value = new Date(new Date().getFullYear() + 1, 6, 28);
|
||||
dateEnd.value = new Date(new Date().getFullYear(), 4, 29);
|
||||
console.log(2)
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue