hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

ui ยืม-คืนเครื่องราช, แก้ label เครื่องราช

Browse source
This commit is contained in:
Warunee Tamkoo 2023-08-25 19:10:48 +07:00
parent f02ddcf93a
commit 7a69a18856
6 changed files with 551 additions and 353 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/modules/07_insignia/components/1_Proposals/addProposals.vue
View file

@ -278,7 +278,7 @@ const updateYear = async (e: number) => {
const editData = async (id: string) => {
const formData = new FormData();
const name = `รอบการเสนอพระราชทานเครื่องราชรอบที่ ${
const name = `รอบการเสนอขอพระราชทานเครื่องราชรอบที่ ${
roundInsig.value.value
} ปี ${yearly.value + 543} `;
formData.append("name", name);
@ -352,7 +352,7 @@ const updateDateRange = () => {
const addData = async () => {
const formData = new FormData();
const name = `รอบการเสนอพระราชทานเครื่องราชรอบที่ ${
const name = `รอบการเสนอขอพระราชทานเครื่องราชรอบที่ ${
roundInsig.value.value
} ปี ${yearly.value + 543} `;
console.log(name);

4
src/modules/07_insignia/components/4_Allocate/DialogForm.vue
View file

@ -95,7 +95,7 @@ const dataSave = async () => {
<q-dialog v-model="props.modal" persistent>
<q-card style="width: 800px">
<q-toolbar class="q-py-sm">
<q-toolbar-title class="text-h6">บันทึกผล </q-toolbar-title>
<q-toolbar-title class="text-h6">จัดสรรเครื่องราชฯ </q-toolbar-title>
<q-btn
icon="close"
unelevated
@ -140,7 +140,7 @@ const dataSave = async () => {
map-options
outlined
v-model="Org"
:label="`เครื่องราชฯ`"
:label="`เลือกหน่วยงาน`"
/>
</div>
<div class="col-xs-12 col-sm-6">

7
src/modules/07_insignia/components/4_Allocate/listAllocate.vue
View file

@ -56,7 +56,10 @@ const fecthRound = async () => {
.get(config.API.noteround())
.then((res) => {
let data = res.data.result;
selectRoundOption.value = data;
selectRoundOption.value = data.map((e: any) => ({
name: "รอบการเสนอขอพระราชทานเครื่องราชปี" + " " + (e.year + 543),
id: e.id,
}));
selectRound.value = data[0].id;
// console.log(selectRound.value);
})
@ -259,7 +262,6 @@ const resetFilter = () => {
<q-card flat bordered class="col-12 q-my-md q-mt-sm rounded-borders">
<div class="bg-grey-1 col-12 row items-center">
<div class="q-pl-md q-pr-sm text-weight-medium text-grey-7">รอบ</div>
<div>
<selector
hide-bottom-space
borderless
@ -278,7 +280,6 @@ const resetFilter = () => {
@update:emit-value="selectorRound"
>
</selector>
</div>
</div>
<q-separator />
<q-tabs

458
src/modules/07_insignia/components/5_Borrow/DialogForm.vue Normal file
View file

@ -0,0 +1,458 @@
<script setup lang="ts">
import { ref, watch, computed } from "vue";
import { QForm, useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useResultDataStore } from "@/modules/07_insignia/storeResult";
import http from "@/plugins/http";
import config from "@/app.config";
import type { DataOption } from "@/modules/04_registry/components/profileType";
const DataStore = useResultDataStore();
const $q = useQuasar();
const myForm = ref<QForm>();
const mixin = useCounterMixin();
const {
date2Thai,
dialogConfirm,
success,
messageError,
showLoader,
hideLoader,
notifyError,
} = mixin;
const status = ref<status>("");
const Advertise = ref<string>("");
const issue = ref<string>("");
const brand = ref<string>("");
const roundNo = ref<string>("");
const cardid = ref<string>("");
const OrganazationId = ref<string>("");
const fullName = ref<string>("");
const volume = ref<string>("");
const episode = ref<string>("");
const duty = ref<string>("");
const announced = ref<string>("");
const firstname = ref<string>("");
const lastname = ref<string>("");
const position = ref<string>("");
const invoice = ref<string | null>(null);
const payment = ref<string>("");
const addressPayment = ref<string | null>(null);
const affiliationRequest = ref<string>("");
const affiliationReceived = ref<string>("");
const receivedate = ref<Date | null>();
const announceDate = ref<Date | null>();
const invoiceDate = ref<Date | null>(null);
const employeeClass = ref<string>("");
const employeeClassOps = ref<DataOption[]>([
{ id: "officer", name: "ข้าราชการ กทม.สามัญ" },
{ id: "employee", name: "ลูกจ้างประจำ" },
]);
const listPerson = ref<any>([]);
const paymentOp = [
{ label: "จัดส่งทางไปรษณี", value: "จัดส่งทางไปรษณี" },
{ label: "มารับด้วยตัวเอง", value: "มารับด้วยตัวเอง" },
];
const volumeOp = [
{ label: "เล่มที่", value: "xx1" },
{ label: "เล่มที่2", value: "xx2" },
{ label: "เล่มที่3", value: "xx3" },
];
const episodeOp = [
{ label: "ตอนที่1", value: "xx1" },
{ label: "ตอนที่2", value: "xx2" },
{ label: "ตอนที่3", value: "xx3" },
];
const dutyOp = [
{ label: "หน้าที่1", value: "xx1" },
{ label: "หน้าที่2", value: "xx2" },
{ label: "หน้าที่3", value: "xx3" },
];
const announcedOp = [
{ label: "ลำดับที่1", value: "xx1" },
{ label: "ลำดับที่2", value: "xx2" },
{ label: "ลำดับที่3", value: "xx3" },
];
const affiliationRequestOp = [
{ label: "สังกัด1", value: "xx1" },
{ label: "สังกัด2", value: "xx2" },
{ label: "สังกัด3", value: "xx3" },
];
const affiliationReceivedOp = [
{ label: "สังกัด4", value: "xx4" },
{ label: "สังกัด5", value: "xx5" },
{ label: "สังกัด6", value: "xx6" },
];
const prefixOp = [
{ label: "นาย", value: "mr" },
{ label: "นางสาว", value: "miss" },
{ label: "นาง", value: "mrs" },
];
const positionOp = [
{ label: "ตำแหน่ง1", value: "xxx1" },
{ label: "ตำแหน่ง2", value: "xxx2" },
{ label: "ตำแหน่ง3", value: "xxx3" },
];
const OrgOp = ref<DataOption[]>([
{ id: "xxx1", name: "หน่วยงาน กทม" },
{ id: "xxx2", name: "หน่วยงาน กทมฯ" },
]);
const clearDateExam = () => {
receivedate.value = null;
announceDate.value = null;
invoiceDate.value = null;
};
const props = defineProps({
modal: Boolean,
save: {
type: Function,
default: () => console.log("not function"),
},
close: {
type: Function,
default: () => console.log("not function"),
},
roundId: {
type: String,
},
action: {
type: String,
},
personId: {
type: String,
},
profileType: {
type: String,
},
selectRoundOption: {
type: Array
}
});
watch(props, () => {
if (props.modal === true) {
employeeClass.value = "";
cardid.value = "";
fullName.value = "";
position.value = "";
Advertise.value = "";
brand.value = "";
receivedate.value = null;
issue.value = "";
affiliationRequest.value = "";
affiliationReceived.value = "";
announceDate.value = null;
volume.value = "";
episode.value = "";
duty.value = "";
announced.value = "";
// invoice.value = "";
invoiceDate.value = null;
payment.value = "";
if (props.action === "editData") {
fectDataByid(props.personId);
}
}
});
const disbleStatus = computed(() => {
if (employeeClass.value !== "") {
return false;
} else return true;
});
const selectType = async () => {
showLoader();
cardid.value = "";
fullName.value = "";
position.value = "";
Advertise.value = "";
brand.value = "";
receivedate.value = null;
issue.value = "";
affiliationRequest.value = "";
affiliationReceived.value = "";
announceDate.value = null;
volume.value = "";
episode.value = "";
duty.value = "";
announced.value = "";
invoiceDate.value = null;
payment.value = "";
await fecthlistPerson();
};
const fecthlistPerson = async () => {
await http
.get(config.API.profileOrganizRoot)
.then((res) => {
const id = res.data.result[0].id;
if (id !== "") {
findlist(id);
}
})
.catch((e) => {
messageError($q, e);
});
};
const findlist = async (id: string) => {
let data = [{}];
if (employeeClass.value === "officer") {
data = [{ criteriaType: "is_retire", criteriaValue: "false" }];
} else if (employeeClass.value === "employee") {
data = [
{ criteriaType: "is_retire", criteriaValue: "false" },
{ criteriaType: "employee_class", criteriaValue: "perm" },
];
}
await http
.post(config.API.profileSearchNewOcIdType(id, employeeClass.value), {
criterias: data,
})
.then((res) => {
// console.log(res.data.result);
listPerson.value = res.data.result;
})
.catch((e) => {
console.log(e);
})
.finally(() => {
hideLoader();
});
};
const fectDataByid = async (id: string) => {
showLoader();
await http
.get(config.API.noteByid(id))
.then((res) => {
let data = res.data.result;
employeeClass.value = "";
cardid.value = data.citizenId;
fullName.value = data.fullName;
position.value = data.position;
Advertise.value = data.number;
brand.value = data.requestInsigniaId;
receivedate.value = data.dateReceive;
issue.value = data.issue;
affiliationRequest.value = data.organizationOrganizationSend;
affiliationReceived.value = data.organizationOrganizationReceive;
announceDate.value = data.date;
volume.value = data.volumeNo;
episode.value = data.section;
duty.value = data.page;
announced.value = data.no;
invoiceDate.value = data.datePayment;
payment.value = data.typePayment;
addressPayment.value = data.address;
status.value = data.status;
employeeClass.value = props.profileType;
})
.catch((err) => {
console.log(err);
messageError($q, err);
})
.finally(() => {
hideLoader();
});
};
const clickSave = async () => {
let body = {
citizanId: cardid.value, // เลขบัตร
insigniaId: brand.value, // insigniaID
number: Advertise.value,
issue: issue.value,
dateReceive: receivedate.value, // วันที่ได้รับเครื่องราชฯ
organizationOrganizationSend: affiliationRequest.value,
organizationOrganizationReceive: affiliationReceived.value,
date: announceDate.value, // วันที่กิจนุเบก
volumeNo: volume.value, // เล่ม
section: episode.value, //ตอนที่
page: duty.value, //หน้าที่
no: announced.value,
// รอฟิล: invoice.value,
datePayment: invoiceDate.value, //วันที่จ่าย
typePayment: payment.value, // รูปแบบการจ่าย
address: addressPayment.value, //ที่อยู่
};
await myForm.value!.validate().then((result: boolean) => {
if (result) {
dialogConfirm($q, async () => {
await addNote(body);
});
}
});
};
const addNote = async (body: any) => {
await http
.put(config.API.noteAdd(props.roundId), body)
.then(() => {
success($q, "เพิ่มราชชื่อสำเร็จ");
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
props.close();
});
};
const searchcardid = () => {
// console.log(cardid.value);
if (cardid.value.length === 13) {
let data = listPerson.value.find((e: any) => e.citizenId === cardid.value);
if (data) {
fullName.value = data.fullname;
position.value = data.positionEmployeePosition;
} else notifyError($q, "ไม่พบข้อมูลเลขบัตรประชาชนนี้");
}
};
</script>
<template>
<q-dialog v-model="props.modal" persistent>
<q-card style="min-width: 900px" class="q-pb-md">
<q-toolbar class="q-py-md">
<q-toolbar-title class="text-h6">ยืม-คืนเครื่องราชฯ </q-toolbar-title>
<q-btn icon="close" unelevated round dense @click="props.close"
style="color: #ff8080; background-color: #ffdede" />
</q-toolbar>
<q-separator />
<q-form ref="myForm">
<div class="q-pa-md">
<div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="col-4">
<q-select :rules="[
(val) => !!val || 'กรุณาเลือก ขรก.สามัญ/ลูกจ้างประจำ',
]" hide-bottom-space :options="employeeClassOps" dense borderless option-label="name" option-value="id"
emit-value map-options outlined v-model="employeeClass" :label="`ขรก.สามัญ/ลูกจ้างประจำ`"
@update:model-value="selectType" :disable="status !== ''" />
</div>
<div class="col-12 text-weight-bold text-grey">
ข้อมูลผู้ยืม
</div>
<div class="col-xs-12 col-sm-4">
<q-input :disable="disbleStatus || status == 'DONE' || status == 'PENDING'" hide-bottom-space outlined
class="inputgreen" v-model="cardid" dense lazy-rules :rules="[
(val: string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
(val: string) =>
val.length >= 13 ||
`${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,
]" label="เลขบัตรประจำตัวประชาชน" maxlength="13" mask="#############" @keyup="searchcardid" />
<!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,]" -->
</div>
<div class="col-xs-6 col-sm-4">
<q-input disable hide-bottom-space outlined dense lazy-rules class="inputgreen" borderless
v-model="fullName" :label="`${'ชื่อ-นามสกุล'}`" />
</div>
<div class="col-xs-12 col-sm-4">
<q-input disable hide-bottom-space outlined dense lazy-rules class="inputgreen" borderless
v-model="position" :label="`ตำเเหน่ง`" />
</div>
<div class="col-6"></div>
<div class="col-12 q-my-xs"><q-separator size="2px" /></div>
<div class="col-12 text-weight-bold text-grey">
รายละเอียดการยืมเครื่องราชฯ
</div>
<div class="col-xs-12 col-sm-6">
<q-select :disable="disbleStatus || status == 'DONE'" v-model="roundNo" dense outlined lazy-rules
hide-bottom-space :label="`${'รอบการขอเครื่องราชฯ'}`" emit-value map-options option-label="name"
:options="selectRoundOption" option-value="id" :readonly="false" :borderless="false"
style="min-width: 150px" :rules="[
(val) => !!val || 'กรุณาเลือกรอบการขอเครื่องราชฯ',
]" />
</div>
<div class="col-xs-12 col-sm-6">
<q-select :disable="disbleStatus || status == 'DONE'" v-model="brand" dense outlined lazy-rules
hide-bottom-space :label="`${'เครื่องราชฯ'}`" emit-value map-options option-label="name"
:options="DataStore.insigniaOp2" option-value="id" :readonly="false" :borderless="false"
style="min-width: 150px" :rules="[
(val) => !!val || 'กรุณาเลือกเครื่องราชฯ',
]" />
</div>
<div class="col-xs-12 col-sm-6">
<datepicker menu-class-name="modalfix" v-model="receivedate" :locale="'th'" autoApply borderless
:enableTimePicker="false" week-start="0">
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input :disable="disbleStatus || status == 'DONE'" dense borderless outlined
:rules="[(val) => !!val || 'กรุณาเลือกวันที่']" hide-bottom-space :model-value="receivedate != null ? date2Thai(receivedate) : undefined
" :label="`${'วันที่ยืม'}`" clearable @clear="clearDateExam">
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" color="primary">
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-6">
<q-select hide-bottom-space :options="OrgOp" dense borderless option-label="name" option-value="id"
emit-value map-options outlined v-model="OrganazationId" :label="`เลือกหน่วยงาน`" />
</div>
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs" v-if="props.action === 'editData'">
<div class="col-12 q-my-xs"><q-separator size="2px" /></div>
<div class="col-12 text-weight-bold text-grey">
รายละเอียดการคืนเครื่องราชฯ
</div>
<div class="col-xs-12 col-sm-6">
<datepicker menu-class-name="modalfix" v-model="receivedate" :locale="'th'" autoApply borderless
:enableTimePicker="false" week-start="0">
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input :disable="disbleStatus || status == 'DONE'" dense borderless outlined
:rules="[(val) => !!val || 'กรุณาเลือกวันที่']" hide-bottom-space :model-value="receivedate != null ? date2Thai(receivedate) : undefined
" :label="`${'วันที่คืน'}`" clearable @clear="clearDateExam">
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" color="primary">
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-6">
<q-select hide-bottom-space :options="OrgOp" dense borderless option-label="name" option-value="id"
emit-value map-options outlined v-model="OrganazationId" :label="`เลือกหน่วยงานที่ส่งคืน`" />
</div>
<div class="col-12">
<q-input type="textarea" hide-bottom-space dense borderless option-label="name" option-value="id"
emit-value map-options outlined v-model="OrganazationId"
:label="`สาเหตุที่ส่งคืนเครื่องราชอิสริยาภรณ์`" />
</div>
</div>
</div>
</div>
</q-form>
<q-separator />
<div class="q-pa-md">
<div class="row justify-end">
<q-btn label="บันทึก" @click="clickSave" color="public" />
</div>
</div>
</q-card>
</q-dialog>
</template>

429
src/modules/07_insignia/components/5_Borrow/Main.vue
View file

@ -6,8 +6,7 @@ import http from "@/plugins/http";
import config from "@/app.config";
import { useResultDataStore } from "@/modules/07_insignia/storeResult";
import DialogForm from "@/modules/07_insignia/components/3_result/DialogForm.vue";
import fileUploadview from "@/modules/07_insignia/components/3_result/fileUpload.vue";
import DialogForm from "@/modules/07_insignia/components/5_Borrow/DialogForm.vue";
import type { OptionData } from "@/modules/07_insignia/interface/index/Main";
import type { QTableProps, QInput } from "quasar";
@ -29,6 +28,8 @@ const tab = ref<string>("");
const selectRound = ref<string>();
const selectRoundOption = ref<OptionData[]>([]);
const selectRoundAllOption = ref<OptionData[]>([]);
const modal = ref<boolean>(false);
const action = ref<string>("");
const personId = ref<string>();
@ -45,7 +46,21 @@ const fecthRound = async () => {
.get(config.API.noteround())
.then((res) => {
let data = res.data.result;
selectRoundOption.value = data;
selectRoundAllOption.value = [{
name: "ทั้งหมด",
id: "all",
}]
data.map((e: any) => {
selectRoundOption.value = [...selectRoundOption.value, {
name: "รอบการเสนอขอพระราชทานเครื่องราชปี" + " " + (e.year + 543),
id: e.id,
}]
selectRoundAllOption.value = [...selectRoundAllOption.value, {
name: "รอบการเสนอขอพระราชทานเครื่องราชปี" + " " + (e.year + 543),
id: e.id,
}]
});
selectRound.value = data[0].id;
// console.log(selectRound.value);
})
@ -101,11 +116,20 @@ const columns = ref<QTableProps["columns"]>([
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" }),
// },
{
name: "status",
name: "citizenId",
align: "left",
label: "สถานะ",
field: "status",
label: "เลขบัตรประชาชน",
field: "citizenId",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
@ -245,7 +269,7 @@ const fecthlistInsignia = async () => {
citizenId: e.citizenId,
prefix: e.prefix,
position: e.position,
status: DataStore.status(e.status),
// status: DataStore.status(e.status),
name: e.fullName,
type: e.requestInsignia,
employeeType: DataStore.profileType(e.profileType),
@ -336,48 +360,13 @@ const resetFilter = () => {
<template>
<div class="toptitle text-dark col-12 row items-center">
บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์/การจ่ายใบกำกับ
ยืม-คืนเครื่องราชฯ
</div>
<q-card flat bordered class="col-12 q-my-md q-mt-sm rounded-borders">
<div class="bg-grey-1 col-12 row items-center">
<div class="q-pl-md q-pr-sm text-weight-medium text-grey-7">รอบ</div>
<div>
<selector
hide-bottom-space
borderless
dense
lazy-rules
emit-value
map-options
options-dense
option-label="name"
option-value="id"
v-model="selectRound"
:options="selectRoundOption"
use-input
input-debounce="0"
input-class="text-bold text-grey"
@update:emit-value="selectorRound"
>
</selector>
</div>
</div>
<q-separator />
<q-tabs
dense
v-model="tab"
align="left"
class="bg-white text-grey"
active-color="primary"
indicator-color="primary"
>
<q-tabs dense v-model="tab" align="left" class="bg-white text-grey" active-color="primary" indicator-color="primary">
<div v-for="item in DataStore.insigniaType">
<q-tab :name="item.name" :label="item.label" />
</div>
<!-- <q-tab name="hight" label="ขั้นสายสะพาน" />
<q-tab name="low" label="ขั้นต่ำกว่าสายสะพาน" />
<q-tab name="medal" label="เหรียญตรา" /> -->
</q-tabs>
@ -388,113 +377,42 @@ const resetFilter = () => {
<div v-if="tab == item.name" class="q-pa-md">
<div class="row col-12 q-pb-sm q-col-gutter-x-xs">
<div>
<q-select
v-model="DataStore.insignia"
dense
outlined
lazy-rules
hide-bottom-space
:label="`${'เครื่องราชฯ'}`"
emit-value
map-options
option-label="name"
:options="DataStore.insigniaOp"
option-value="id"
:readonly="false"
:borderless="false"
style="min-width: 150px"
@update:model-value="selectorInsignia"
/>
<q-select v-model="selectRound" dense outlined lazy-rules hide-bottom-space
:label="`${'รอบการขอเครื่องราชฯ'}`" emit-value map-options option-label="name"
:options="selectRoundAllOption" option-value="id" :readonly="false" :borderless="false"
style="min-width: 150px" @update:emit-value="selectorRound" />
</div>
<div>
<q-select v-model="DataStore.insignia" dense outlined lazy-rules hide-bottom-space
:label="`${'เครื่องราชฯ'}`" emit-value map-options option-label="name" :options="DataStore.insigniaOp"
option-value="id" :readonly="false" :borderless="false" style="min-width: 150px"
@update:model-value="selectorInsignia" />
</div>
<div>
<q-btn
@click="addData()"
size="12px"
flat
round
color="add"
icon="mdi-plus"
>
<q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
<q-tooltip>เพิ่ม</q-tooltip>
</q-btn>
</div>
<div>
<!-- <q-btn flat round color="light-blue" icon="upload">
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<q-item-section avatar
><q-icon color="green-7" name="mdi-file-excel"
/></q-item-section>
<q-item-section
>บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์</q-item-section
>
</q-item>
<q-item clickable v-close-popup>
<q-item-section avatar
><q-icon color="green-7" name="mdi-file-excel"
/></q-item-section>
<q-item-section>บันทึกผลการจ่ายใบกำกับ</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn> -->
</div>
<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"
>
<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"
/>
<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"
/>
<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"
>
<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'">
@ -502,17 +420,9 @@ const resetFilter = () => {
</div>
<div v-else-if="props.col.name == 'action'">
<q-btn
dense
size="12px"
flat
round
color="primary"
@click.stop="editData(props.row)"
icon="mdi-pencil-outline"
>
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
<q-td>
<q-btn label="คืนเครื่องราชฯ" @click="editData(props.row.id)" color="blue" />
</q-td>
</div>
<div v-else>
@ -525,108 +435,34 @@ const resetFilter = () => {
<div v-else-if="tab == item.name" class="q-pa-md">
<div class="row col-12 q-pb-sm q-col-gutter-x-xs">
<selector
outlined
dense
lazy-rules
v-model="DataStore.insignia"
hide-bottom-space
:label="`${'เครื่องราชฯ'}`"
emit-value
map-options
option-label="name"
:options="DataStore.insigniaOp"
option-value="id"
use-input
input-debounce="0"
style="min-width: 150px"
/>
<selector outlined dense lazy-rules v-model="DataStore.insignia" hide-bottom-space :label="`${'เครื่องราชฯ'}`"
emit-value map-options option-label="name" :options="DataStore.insigniaOp" option-value="id" use-input
input-debounce="0" style="min-width: 150px" />
<div>
<q-btn
@click="addData()"
size="12px"
flat
round
color="add"
icon="mdi-plus"
>
<q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
<q-tooltip>เพิ่ม</q-tooltip>
</q-btn>
</div>
<div>
<q-btn flat round color="light-blue" icon="upload">
<!-- <q-tooltip>อัพโหลดไฟล์</q-tooltip> -->
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<q-item-section avatar
><q-icon color="green-7" name="mdi-file-excel"
/></q-item-section>
<q-item-section
>บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์</q-item-section
>
</q-item>
<q-item clickable v-close-popup>
<q-item-section avatar
><q-icon color="green-7" name="mdi-file-excel"
/></q-item-section>
<q-item-section>บันทึกผลการจ่ายใบกำกับ</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
<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"
>
<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"
/>
<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"
/>
<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"
>
<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'">
@ -634,17 +470,9 @@ const resetFilter = () => {
</div>
<div v-else-if="props.col.name == 'action'">
<q-btn
dense
size="12px"
flat
round
color="primary"
@click="editData(props.row)"
icon="mdi-pencil-outline"
>
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
<q-td>
<q-btn label="คืนเครื่องราชฯ" @click="editData(props.row.id)" color="blue" />
</q-td>
</div>
<div v-else>
@ -657,107 +485,33 @@ const resetFilter = () => {
<div v-else-if="tab == item.name" class="q-pa-md">
<div class="row col-12 q-pb-sm q-col-gutter-x-xs">
<selector
outlined
dense
lazy-rules
v-model="DataStore.insignia"
hide-bottom-space
:label="`${'เครื่องราชฯ'}`"
emit-value
map-options
option-label="name"
:options="DataStore.insigniaOp"
option-value="id"
use-input
input-debounce="0"
style="min-width: 150px"
/>
<selector outlined dense lazy-rules v-model="DataStore.insignia" hide-bottom-space :label="`${'เครื่องราชฯ'}`"
emit-value map-options option-label="name" :options="DataStore.insigniaOp" option-value="id" use-input
input-debounce="0" style="min-width: 150px" />
<div>
<q-btn
@click="addData()"
size="12px"
flat
round
color="add"
icon="mdi-plus"
>
<q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
<q-tooltip>เพิ่ม</q-tooltip>
</q-btn>
</div>
<div>
<q-btn flat round color="light-blue" icon="upload">
<!-- <q-tooltip>อัพโหลดไฟล์</q-tooltip> -->
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<q-item-section avatar
><q-icon color="green-7" name="mdi-file-excel"
/></q-item-section>
<q-item-section
>บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์</q-item-section
>
</q-item>
<q-item clickable v-close-popup>
<q-item-section avatar
><q-icon color="green-7" name="mdi-file-excel"
/></q-item-section>
<q-item-section>บันทึกผลการจ่ายใบกำกับ</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
<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"
>
<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"
/>
<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"
/>
<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"
>
<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'">
@ -765,17 +519,9 @@ const resetFilter = () => {
</div>
<div v-else-if="props.col.name == 'action'">
<q-btn
dense
size="12px"
flat
round
color="primary"
@click="editData(props.row)"
icon="mdi-pencil-outline"
>
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
<q-td>
<q-btn label="คืนเครื่องราชฯ" @click="editData(props.row.id)" color="blue" />
</q-td>
</div>
<div v-else>
@ -789,15 +535,8 @@ const resetFilter = () => {
</div>
<DialogForm
:modal="modal"
:save="save"
:close="close"
:roundId="selectRound"
:action="action"
:personId="personId"
:profileType="profileType"
/>
<DialogForm :modal="modal" :save="save" :close="close" :roundId="selectRound" :action="action" :personId="personId"
:profileType="profileType" :selectRoundOption="selectRoundOption" />
</q-card>
</template>
<style lang="scss" scoped>

2
src/modules/07_insignia/views/ResultPage.vue
View file

@ -46,7 +46,7 @@ const fecthRound = async () => {
.then((res) => {
let data = res.data.result;
selectRoundOption.value = data.map((e: any) => ({
name: "รอบการเสนอพระราชทานเครื่องราชปี" + " " + (e.year + 543),
name: "รอบการเสนอขอพระราชทานเครื่องราชปี" + " " + (e.year + 543),
id: e.id,
}));
selectRound.value = data[0].id;