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

Merge branch 'develop' into dev-tee

Browse source
This commit is contained in:
setthawutttty 2023-09-19 16:37:05 +07:00
commit 1185971f99
59 changed files with 1000 additions and 7915 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/modules/02_organizational/views/MainTreeEmployee.vue
View file

@ -970,7 +970,6 @@ onMounted(async () => {
await fetchOrganizationAgencyCode();
await fetchPosition();
await fetchData();
await nodeTree();
});
const onSelected = async (id: string) => {
@ -1608,7 +1607,7 @@ const selectData = async (props: any) => {
/**
* กดปุ่มเพิ่มบน table
*/
const clickAdd = () => {
const clickAdd = async () => {
editRow.value = false;
modalEdit.value = false;
modal.value = true;
@ -1648,6 +1647,7 @@ const clickAdd = () => {
isActive.value = false;
isCondition.value = false;
conditionNote.value = "";
await nodeTree();
};
/**เมื่อเลือกใหม่

2
src/modules/04_registry/components/SalaryEmployee.vue
View file

@ -1540,6 +1540,7 @@ const fetchData = async () => {
// refCommandDate: new Date(e.refCommandDate),
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
salaryStatus: null
});
});
})
@ -2022,6 +2023,7 @@ const clickHistory = async (row: RequestItemsEmployee) => {
refCommandNo: e.refCommandNo,
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
salaryStatus: null
});
});
})

2
src/modules/04_registry/components/SalaryEmployeeTemp.vue
View file

@ -1568,6 +1568,7 @@ const fetchData = async () => {
refCommandNo: e.refCommandNo,
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
salaryStatus: null
});
});
})
@ -2068,6 +2069,7 @@ const clickHistory = async (row: RequestItemsEmployee) => {
refCommandNo: e.refCommandNo,
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
salaryStatus: null
});
});
})

2
src/modules/04_registry/components/profileType.ts
View file

@ -127,6 +127,8 @@ const defaultAddress: Address = {
provinceIdC: null,
districtIdC: null,
subdistrictIdC: null,
codec: null,
codep: null,
same: "0",
};

505
src/modules/05_placement/components/Receive/AddEmployee/Main.vue Normal file
View file

@ -0,0 +1,505 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRouter } from "vue-router";
import type { QForm } from "quasar";
import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
import type {
Information,
DataOption,
} from "@/modules/04_registry/components/profileType";
import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
import HeaderTop from "@/modules/08_registryEmployee/components/AddEmployee/HeaderTop.vue";
const router = useRouter();
const $q = useQuasar();
const mixin = useCounterMixin();
const {
date2Thai,
success,
dateToISO,
messageError,
dialogMessage,
showLoader,
hideLoader,
dialogConfirm,
} = mixin;
const profileStore = useProfileDataStore();
const { changeRetireText, changeBirth } = profileStore;
const informaData = ref<Information>({
cardid: null,
age: null,
prefix: null,
prefixId: null,
firstname: null,
lastname: null,
birthDate: null,
genderId: null,
bloodId: null,
nationality: null,
ethnicity: null,
statusId: null,
religionId: null,
tel: null,
employeeType: null,
employeeClass: null,
profileType: null,
});
const myform = ref<QForm | null>(null);
const dateBefore = ref<Date>(new Date());
// รายการข้อมูลทั้งหมด
const Ops = ref<InformationOps>({
prefixOps: [],
prefixOldOps: [],
genderOps: [],
bloodOps: [],
statusOps: [],
religionOps: [],
employeeClassOps: [],
employeeTypeOps: [],
});
// ข้อมูลเมื่อเลือกแล้ว
const OpsFilter = ref<InformationOps>({
prefixOps: [],
prefixOldOps: [],
genderOps: [],
bloodOps: [],
statusOps: [],
religionOps: [],
employeeClassOps: [],
employeeTypeOps: [],
});
// call function get รายการข้อมูลต่างๆ
onMounted(async () => {
await fetchPerson();
});
/*** get รายการข้อมูลเกี่ยวกับบุคคล (dropdown list) */
const fetchPerson = async () => {
showLoader();
await http
.get(config.API.person)
.then((res) => {
const data = res.data.result;
let optionbloodGroups: DataOption[] = [];
data.bloodGroups.map((r: any) => {
optionbloodGroups.push({
id: r.id.toString(),
name: r.name.toString(),
});
});
Ops.value.bloodOps = optionbloodGroups;
OpsFilter.value.bloodOps = optionbloodGroups;
let optiongenders: DataOption[] = [];
data.genders.map((r: any) => {
optiongenders.push({
id: r.id.toString(),
name: r.name.toString(),
});
});
Ops.value.genderOps = optiongenders;
OpsFilter.value.genderOps = optiongenders;
let optionprefixs: DataOption[] = [];
data.prefixs.map((r: any) => {
optionprefixs.push({
id: r.id.toString(),
name: r.name.toString(),
});
});
Ops.value.prefixOps = optionprefixs;
OpsFilter.value.prefixOps = optionprefixs;
let optionrelationships: DataOption[] = [];
data.relationships.map((r: any) => {
optionrelationships.push({
id: r.id.toString(),
name: r.name.toString(),
});
});
Ops.value.statusOps = optionrelationships;
OpsFilter.value.statusOps = optionrelationships;
let optionreligions: DataOption[] = [];
data.religions.map((r: any) => {
optionreligions.push({
id: r.id.toString(),
name: r.name.toString(),
});
});
Ops.value.religionOps = optionreligions;
OpsFilter.value.religionOps = optionreligions;
})
.catch((e: any) => { })
.finally(() => {
hideLoader();
});
};
// รูป profile
const inputImage = ref<any>(null);
const image = ref<any>(null);
const fileData = ref<any>(null);
const uploadImage = async (e: any) => {
const input = e.target.files;
if (input.length > 0) {
const url = URL.createObjectURL(input[0]);
image.value = url;
fileData.value = input[0];
}
};
// คลิกแก้ไขรูป profile
const addNewImage = async () => {
inputImage.value.click();
};
// ตรวจสอบเลขประจำตัวประชาชน
const defaultCitizenData = ref<string>("");
const changeCardID = async (value: string | number | null) => {
if (value != null && typeof value == "string") {
if (value.length == 13 && value != defaultCitizenData.value) {
await checkCitizen(value);
}
}
};
const checkCitizen = async (id: string) => {
showLoader();
await http
.get(config.API.profileCitizenId(id))
.then((res) => {
const data = res.data.result.citizen;
if (!data) {
dialogMessage(
$q,
"ข้อความแจ้งเตือน",
"เลขประจำตัวประชาชนนี้มีการใช้งานแล้ว",
"warning",
undefined,
"orange",
undefined,
undefined,
true
);
informaData.value.cardid = defaultCitizenData.value;
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
// filter list ข้อมูลต่างๆ
const filterSelector = (val: any, update: Function, refData: string) => {
switch (refData) {
case "prefixOps":
update(() => {
Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "genderOps":
update(() => {
Ops.value.genderOps = OpsFilter.value.genderOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "bloodOps":
update(() => {
Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "statusOps":
update(() => {
Ops.value.statusOps = OpsFilter.value.statusOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "religionOps":
update(() => {
Ops.value.religionOps = OpsFilter.value.religionOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
default:
break;
}
};
// เช็ควันที่ที่สามารถเลือกวันเกิดได้โดย max date น้อยกว่าวันปัจจุบัน เพื่อให้ฟังก์ชั่นการเช็คทำงานได้ปกติ
const calculateMaxDate = () => {
const today = new Date();
today.setDate(today.getDate() - 1);
return today;
};
// เช็คเรื่องการเกษียณ
const handleDate = async (modelData: Date) => {
informaData.value.birthDate = modelData;
await calRetire(modelData);
};
const calRetire = async (birth: Date) => {
const body = {
birthDate: dateToISO(birth),
};
if (dateToISO(dateBefore.value) != dateToISO(birth)) {
showLoader();
await http
.post(config.API.profileCalRetire, body)
.then((res: any) => {
const data = res.data.result;
informaData.value.age = data.age;
changeRetireText(data.retireDate);
dateBefore.value = birth;
})
.catch((e: any) => {
messageError($q, e);
informaData.value.birthDate = null;
informaData.value.age = "";
})
.finally(() => {
hideLoader();
});
}
};
// หลังจากกดปุ่มบันทึกเช็ค validate ก่อน
const saveData = async () => {
if (myform.value != null) {
await myform.value.validate().then(async (saveDataTest: Boolean) => {
if (saveDataTest) {
dialogConfirm($q, () => addData()); // validate ผ่านส่งไปบันทึกที่ api
}
});
}
};
// post เพิ่มข้อมูลทะเบียนประวัติไปที่ api
const addData = async () => {
const formData = new FormData();
if (fileData.value != null) formData.append("File", fileData.value); //แก้ไขรูป
if (informaData.value.cardid != undefined)
formData.append("citizenId", informaData.value.cardid);
if (informaData.value.prefixId != undefined)
formData.append("prefix", informaData.value.prefixId);
if (informaData.value.firstname != undefined)
formData.append("firstName", informaData.value.firstname);
if (informaData.value.lastname != undefined)
formData.append("lastName", informaData.value.lastname);
if (informaData.value.genderId != undefined)
formData.append("genderId", informaData.value.genderId);
if (informaData.value.nationality != undefined)
formData.append("nationality", informaData.value.nationality);
if (informaData.value.ethnicity != undefined)
formData.append("race", informaData.value.ethnicity);
if (informaData.value.religionId != undefined)
formData.append("religionId", informaData.value.religionId);
if (informaData.value.birthDate != undefined)
formData.append(
"birthDate",
dateToISO(informaData.value.birthDate) ?? dateToISO(new Date())
);
if (informaData.value.bloodId != undefined)
formData.append("bloodGroupId", informaData.value.bloodId);
if (informaData.value.statusId != undefined)
formData.append("relationshipId", informaData.value.statusId);
if (informaData.value.tel != undefined)
formData.append("telephoneNumber", informaData.value.tel);
if (informaData.value.employeeType != undefined)
formData.append("employeeType", informaData.value.employeeType);
if (informaData.value.employeeClass != undefined)
formData.append("employeeClass", informaData.value.employeeClass);
showLoader();
await http
.post(config.API.receiveData(), formData)
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await changeBirth(informaData.value.birthDate ?? new Date());
await clickBack();
hideLoader();
});
hideLoader();
};
// ปุ่ม back
const clickBack = () => {
router.push("/receive");
};
</script>
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<HeaderTop header="ข้อมูลส่วนตัว" icon="mdi-account" />
<q-form ref="myform" class="col-12 q-pt-md">
<div class="row">
<div class="row col-12 q-col-gutter-x-sm q-mb-xs">
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input hide-bottom-space outlined v-model="informaData.cardid" dense @update:model-value="changeCardID"
lazy-rules :rules="[
(val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
(val: string) =>
val.length >= 13 ||
`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
]" label="เลขประจำตัวประชาชน" maxlength="13" mask="#############" />
<!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,]" -->
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<selector hide-bottom-space outlined :rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]" dense
lazy-rules v-model="informaData.prefixId" emit-value map-options option-label="name"
:options="Ops.prefixOps" option-value="id" :label="`${'คำนำหน้าชื่อ'}`" use-input input-debounce="0"
@filter="(inputValue: any, doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps')" />
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input hide-bottom-space outlined dense lazy-rules v-model="informaData.firstname"
:rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]" :label="`${'ชื่อ'}`" />
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input hide-bottom-space outlined dense lazy-rules v-model="informaData.lastname"
:rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]" :label="`${'นามสกุล'}`" />
</div>
</div>
<div class="row col-12 q-col-gutter-x-sm q-mb-xs">
<div class="col-xs-6 col-sm-2 col-md-2">
<datepicker v-model="informaData.birthDate" :locale="'th'" autoApply :enableTimePicker="false" week-start="0"
:max-date="calculateMaxDate()" @update:model-value="handleDate">
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input hide-bottom-space outlined dense lazy-rules :model-value="informaData.birthDate == null
? null
: date2Thai(informaData.birthDate)
" :rules="[(val: string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
:label="`${'วัน/เดือน/ปี เกิด'}`">
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<q-input hide-bottom-space dense lazy-rules readonly borderless style="padding:0 12px;"
:model-value="informaData.age" :label="`${'อายุ'}`" />
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<selector hide-bottom-space outlined dense lazy-rules v-model="informaData.genderId" emit-value map-options
option-label="name" :options="Ops.genderOps" option-value="id" :label="`${'เพศ'}`" use-input
input-debounce="0" @filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
)" />
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<selector hide-bottom-space outlined dense lazy-rules v-model="informaData.statusId" emit-value map-options
option-label="name" :options="Ops.statusOps" option-value="id" :label="`${'สถานภาพ'}`" use-input
input-debounce="0" @filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
)" />
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<q-input hide-bottom-space outlined dense lazy-rules v-model="informaData.nationality"
:label="`${'สัญชาติ'}`" />
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<q-input hide-bottom-space outlined dense lazy-rules v-model="informaData.ethnicity"
:label="`${'เชื้อชาติ'}`" />
</div>
</div>
<div class="row col-12 q-col-gutter-x-sm q-mb-xs">
<div class="col-xs-6 col-sm-2 col-md-2">
<selector hide-bottom-space outlined dense lazy-rules v-model="informaData.religionId" emit-value map-options
option-label="name" :options="Ops.religionOps" option-value="id" :label="`${'ศาสนา'}`" use-input
input-debounce="0" @filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
)" />
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<selector hide-bottom-space outlined dense lazy-rules v-model="informaData.bloodId" emit-value map-options
option-label="name" :options="Ops.bloodOps" option-value="id" :label="`${'หมู่เลือด'}`" use-input
input-debounce="0" @filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
)" clearable />
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<q-input hide-bottom-space outlined dense lazy-rules type="tel" v-model="informaData.tel"
:label="`${'เบอร์โทร'}`" :rules="[
(val: string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
(val: string) =>
val.length >= 10 ||
`${'กรุณากรอกเบอร์โทรให้ครบ'}`,
]" mask="##########" />
</div>
</div>
</div>
</q-form>
<div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
<div class="row col-12">
<q-space />
<q-btn unelevated dense class="q-px-md items-center" color="light-blue-10" label="บันทึก" @click="saveData" />
</div>
</q-card>
<!-- Header -->
<q-page-sticky position="top" expand class="bg-grey-2 text-white" style="z-index: 99; padding: 0% 1% 0% 1%">
<div class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center">
<q-btn flat round class="bg-teal-1 full-height" color="primary" icon="mdi-chevron-left" dense
@click="router.go(-1)">
</q-btn>
<q-avatar size="65px" rounded class="containerimage">
<img v-if="image == null" src="@/assets/avatar_user.jpg" class="bg-grey-3" style="object-fit: cover" />
<img :src="image" class="bg-grey-3" style="object-fit: cover" />
<div class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer" @click="addNewImage()">
<q-icon name="mdi-camera" size="18px" color="blue">
<q-tooltip>อัปเดตรูปภาพ</q-tooltip>
</q-icon>
<input type="file" style="display: none" ref="inputImage" accept="image/*" @change="uploadImage" />
</div>
</q-avatar>
<div class="row items-center text-dark q-ml-md">
<div class="column">
<div class="text-bold q-pb-xs text-name">
เพิ่มข้อมูลทะเบียนประวัติ
</div>
<div class="text-bold q-pb-xs text-sub">ข้าราชการกทม. สามัญ</div>
</div>
</div>
<q-space />
</div>
</q-page-sticky>
<!-- End Header -->
</template>

2
src/modules/05_placement/components/Receive/FormAdd.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import Information from "@/modules/05_placement/components/Receive/information.vue";
import Information from "@/modules/05_placement/components/Receive/AddEmployee/Main.vue";
</script>
<template>

857
src/modules/05_placement/components/Receive/information.vue
View file

@ -1,857 +0,0 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import type {
Information,
DataOption,
} from "@/modules/04_registry/components/profileType";
import { defaultInformation } from "@/modules/04_registry/components/profileType";
import type { RequestItemsHistoryObject } from "@/modules/04_registry/interface/request/Information";
import type { ResponseObject } from "@/modules/04_registry/interface/response/Information";
import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
import HeaderTop from "@/modules/08_registryEmployee/views/top.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRoute, useRouter } from "vue-router";
import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
import type { QForm } from "quasar";
const props = defineProps({
statusAdd: {
type: Boolean,
default: false,
},
});
const router = useRouter();
const route = useRoute();
const $q = useQuasar();
const mixin = useCounterMixin();
const {
date2Thai,
success,
dateToISO,
messageError,
dialogMessage,
showLoader,
hideLoader,
} = mixin;
const profileStore = useProfileDataStore();
const { changeRetireText, changeBirth } = profileStore;
const inputImage = ref<any>(null);
const image = ref<any>(null);
const fileData = ref<any>(null);
const edit = ref<boolean>(false);
const defaultCitizenData = ref<string>("");
const informaData = ref<Information>(defaultInformation);
const myform = ref<QForm | null>(null);
const dateBefore = ref<Date>(new Date());
const Ops = ref<InformationOps>({
prefixOps: [],
prefixOldOps: [],
genderOps: [],
bloodOps: [],
statusOps: [],
religionOps: [],
employeeClassOps: [
{ id: "perm", name: "ลูกจ้างประจำ" },
{ id: "temp", name: "ลูกจ้างชั่วคราว" },
],
employeeTypeOps: [
{ id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
{ id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
],
});
const OpsFilter = ref<InformationOps>({
prefixOps: [],
prefixOldOps: [],
genderOps: [],
bloodOps: [],
statusOps: [],
religionOps: [],
employeeClassOps: [
{ id: "perm", name: "ลูกจ้างประจำ" },
{ id: "temp", name: "ลูกจ้างชั่วคราว" },
],
employeeTypeOps: [
{ id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
{ id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
],
});
onMounted(async () => {
await fetchPerson();
// emit("update:statusEdit", false);
defaultAdd();
});
const statusAdd = () => props.statusAdd;
const defaultAdd = () => {
// if (props.statusAdd) {
edit.value = props.statusAdd;
informaData.value = {
cardid: "",
age: "",
prefix: "",
prefixId: "",
firstname: "",
lastname: "",
birthDate: null,
genderId: "",
bloodId: "",
nationality: "",
ethnicity: "",
statusId: "",
religionId: "",
tel: "",
employeeType: "",
employeeClass: "",
profileType: "",
};
// }
};
const addNewImage = async () => {
inputImage.value.click();
};
const uploadImage = async (e: any) => {
const input = e.target.files;
if (input.length > 0) {
const url = URL.createObjectURL(input[0]);
image.value = url;
fileData.value = input[0];
}
// if (profileId.value !== "") {
// let input = e.target.files;
// if (input.length > 0) {
// console.log(typeof input[0]);
// const formData = new FormData();
// formData.append("FileData", input[0]);
// showLoader();
// await http
// .post(config.API.profileAvatarId(profileId.value), formData)
// .then((res) => {})
// .catch((e) => {
// messageError($q, e);
// })
// .finally(async () => {
// await fetchData();
// dialogImage.value = false;
// });
// return;
// }
// }
};
/**
* get รายการ ข้อมูลเกี่ยวกับบุคคล
*/
const fetchPerson = async () => {
showLoader();
await http
.get(config.API.person)
.then((res) => {
const data = res.data.result;
let optionbloodGroups: DataOption[] = [];
data.bloodGroups.map((r: any) => {
optionbloodGroups.push({
id: r.id.toString(),
name: r.name.toString(),
});
});
Ops.value.bloodOps = optionbloodGroups;
OpsFilter.value.bloodOps = optionbloodGroups;
let optiongenders: DataOption[] = [];
data.genders.map((r: any) => {
optiongenders.push({
id: r.id.toString(),
name: r.name.toString(),
});
});
Ops.value.genderOps = optiongenders;
OpsFilter.value.genderOps = optiongenders;
let optionprefixs: DataOption[] = [];
data.prefixs.map((r: any) => {
optionprefixs.push({
id: r.id.toString(),
name: r.name.toString(),
});
});
Ops.value.prefixOps = optionprefixs;
OpsFilter.value.prefixOps = optionprefixs;
let optionrelationships: DataOption[] = [];
data.relationships.map((r: any) => {
optionrelationships.push({
id: r.id.toString(),
name: r.name.toString(),
});
});
Ops.value.statusOps = optionrelationships;
OpsFilter.value.statusOps = optionrelationships;
let optionreligions: DataOption[] = [];
data.religions.map((r: any) => {
optionreligions.push({
id: r.id.toString(),
name: r.name.toString(),
});
});
Ops.value.religionOps = optionreligions;
OpsFilter.value.religionOps = optionreligions;
})
.catch((e: any) => {})
.finally(() => {
hideLoader();
});
};
const changeCardID = async (value: string | number | null) => {
if (value != null && typeof value == "string") {
if (value.length == 13 && value != defaultCitizenData.value) {
await checkCitizen(value);
// informaData.value.cardid = defaultCitizenData.value;
}
}
};
const checkCitizen = async (id: string) => {
console.log("String");
showLoader();
await http
.get(config.API.profileCitizenId(id))
.then((res) => {
const data = res.data.result.citizen;
if (!data) {
dialogMessage(
$q,
"ข้อความแจ้งเตือน",
"เลขประจำตัวประชาชนนี้มีการใช้งานแล้ว",
"warning",
undefined,
"orange",
undefined,
undefined,
true
);
informaData.value.cardid = defaultCitizenData.value;
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
/**
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
*/
const filterSelector = (val: any, update: Function, refData: string) => {
switch (refData) {
case "prefixOps":
update(() => {
Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "genderOps":
update(() => {
Ops.value.genderOps = OpsFilter.value.genderOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "bloodOps":
update(() => {
Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "statusOps":
update(() => {
Ops.value.statusOps = OpsFilter.value.statusOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "religionOps":
update(() => {
Ops.value.religionOps = OpsFilter.value.religionOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "employeeClassOps":
update(() => {
Ops.value.employeeClassOps = OpsFilter.value.employeeClassOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "employeeTypeOps":
update(() => {
Ops.value.employeeTypeOps = OpsFilter.value.employeeTypeOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
default:
break;
}
};
const handleDate = async (modelData: Date) => {
informaData.value.birthDate = modelData;
await calRetire(modelData);
};
const calRetire = async (birth: Date) => {
const body = {
birthDate: dateToISO(birth),
};
if (dateToISO(dateBefore.value) != dateToISO(birth)) {
showLoader();
await http
.post(config.API.profileCalRetire, body)
.then((res: any) => {
const data = res.data.result;
informaData.value.age = data.age;
changeRetireText(data.retireDate);
dateBefore.value = birth;
})
.catch((e: any) => {
messageError($q, e);
// const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
informaData.value.birthDate = null;
informaData.value.age = "";
// dateBefore.value;
// changeRetireText(null);
})
.finally(() => {
hideLoader();
});
}
};
const addData = async () => {
showLoader();
// const formData = {
// CitizenId: informaData.value.cardid,
// Prefix: informaData.value.prefixId,
// Firstname: informaData.value.firstname,
// Lastname: informaData.value.lastname,
// Gender: informaData.value.genderId,
// Nationality: informaData.value.nationality,
// Race: informaData.value.ethnicity,
// Religion: informaData.value.religionId,
// DateOfBirth: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
// BloodGroup: informaData.value.bloodId,
// Relationship: informaData.value.statusId,
// TelephoneNumber: informaData.value.tel,
// };
const formData = new FormData();
// if (fileData.value != null) formData.append("File", fileData.value); //แก้ไขรูป
if (informaData.value.cardid != undefined)
formData.append("CitizenId", informaData.value.cardid);
if (informaData.value.prefixId != undefined)
formData.append("Prefix", informaData.value.prefixId);
if (informaData.value.firstname != undefined)
formData.append("Firstname", informaData.value.firstname);
if (informaData.value.lastname != undefined)
formData.append("Lastname", informaData.value.lastname);
if (informaData.value.genderId != undefined)
formData.append("Gender", informaData.value.genderId);
if (informaData.value.nationality != undefined)
formData.append("Nationality", informaData.value.nationality);
if (informaData.value.ethnicity != undefined)
formData.append("Race", informaData.value.ethnicity);
if (informaData.value.religionId != undefined)
formData.append("Religion", informaData.value.religionId);
if (informaData.value.birthDate != undefined)
formData.append(
"DateOfBirth",
dateToISO(informaData.value.birthDate) ?? dateToISO(new Date())
);
if (informaData.value.bloodId != undefined)
formData.append("BloodGroup", informaData.value.bloodId);
if (informaData.value.statusId != undefined)
formData.append("Relationship", informaData.value.statusId);
if (informaData.value.tel != undefined)
formData.append("TelephoneNumber", informaData.value.tel);
await http
.post(config.API.receiveData(), formData)
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
router.push("/receive");
});
};
const saveData = async () => {
console.log(myform.value);
if (myform.value != null) {
await myform.value.validate().then(async (saveDataTest: Boolean) => {
if (saveDataTest) {
addData();
}
});
}
};
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
</script>
<template>
<q-page-sticky
position="top"
expand
class="bg-grey-2 text-white"
style="z-index: 99; padding: 0% 1% 0% 1%"
>
<div class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center">
<q-btn
flat
round
class="bg-teal-1 full-height"
color="primary"
icon="mdi-chevron-left"
dense
@click="router.go(-1)"
>
</q-btn>
<q-avatar size="65px" rounded class="containerimage">
<img
v-if="image == null"
src="@/assets/avatar_user.jpg"
class="bg-grey-3"
style="object-fit: cover"
/>
<img v-else :src="image" class="bg-grey-3" style="object-fit: cover" />
<div
class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
@click="addNewImage()"
>
<q-icon name="mdi-camera" size="18px" color="blue">
<q-tooltip>อัปเดตรูปภาพ</q-tooltip>
</q-icon>
<input
type="file"
style="display: none"
ref="inputImage"
accept="image/*"
@change="uploadImage"
/>
</div>
</q-avatar>
<div class="row items-center text-dark q-ml-md">
<div class="column">
<div class="text-bold q-pb-xs text-name">
เพิ่มข้อมูลทะเบียนประวัติ
</div>
<div class="text-bold q-pb-xs text-sub">ข้าราชการกทม. สามัญ</div>
</div>
</div>
<q-space />
</div>
</q-page-sticky>
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<HeaderTop
v-model:edit="edit"
header="ข้อมูลส่วนตัว"
icon="mdi-account"
:save="saveData"
:history="!statusAdd()"
:addEmployee="statusAdd()"
/>
<!-- :disable="statusEdit" -->
<q-form ref="myform" class="col-12">
<div class="row col-12 q-col-gutter-x-sm q-col-gutter-y-sm">
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
v-model="informaData.cardid"
dense
@update:model-value="changeCardID"
lazy-rules
:rules="[
(val:string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
(val:string) =>
val.length >= 13 ||
`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
]"
:readonly="!edit"
:borderless="!edit"
label="เลขประจำตัวประชาชน"
maxlength="13"
mask="#############"
/>
<!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,]" -->
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
:outlined="edit"
dense
lazy-rules
v-model="informaData.prefixId"
emit-value
map-options
option-label="name"
:options="Ops.prefixOps"
option-value="id"
:label="`${'คำนำหน้าชื่อ'}`"
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
) "
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaData.firstname"
:rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
:label="`${'ชื่อ'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaData.lastname"
:rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
:label="`${'นามสกุล'}`"
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<datepicker
v-model="informaData.birthDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
:max-date="new Date()"
:disabled="!edit"
@update:model-value="handleDate"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
:model-value="
informaData.birthDate == null
? null
: date2Thai(informaData.birthDate)
"
:rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
:label="`${'วัน/เดือน/ปี เกิด'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:style="!edit ? '' : 'padding:0 12px;'"
:model-value="informaData.age"
:label="`${'อายุ'}`"
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:outlined="edit"
dense
lazy-rules
v-model="informaData.genderId"
emit-value
map-options
option-label="name"
:options="Ops.genderOps"
option-value="id"
:label="`${'เพศ'}`"
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'genderOps'
) "
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:outlined="edit"
dense
lazy-rules
v-model="informaData.statusId"
emit-value
map-options
option-label="name"
:options="Ops.statusOps"
option-value="id"
:label="`${'สถานภาพ'}`"
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
) "
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaData.nationality"
:label="`${'สัญชาติ'}`"
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaData.ethnicity"
:label="`${'เชื้อชาติ'}`"
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:outlined="edit"
dense
lazy-rules
v-model="informaData.religionId"
emit-value
map-options
option-label="name"
:options="Ops.religionOps"
option-value="id"
:label="`${'ศาสนา'}`"
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'religionOps'
) "
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:outlined="edit"
dense
lazy-rules
v-model="informaData.bloodId"
emit-value
map-options
option-label="name"
:options="Ops.bloodOps"
option-value="id"
:label="`${'หมู่เลือด'}`"
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
) "
clearable
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<q-input
hide-bottom-space
:outlined="edit"
dense
lazy-rules
type="tel"
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
v-model="informaData.tel"
:label="`${'เบอร์โทร'}`"
mask="##########"
:rules="[
(val:string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
(val:string) =>
val.length >= 10 ||
`${'กรุณากรอกเบอร์โทรให้ครบ'}`,
]"
/>
</div>
<div
class="col-xs-6 col-sm-3 col-md-3"
v-if="informaData.profileType == 'employee'"
>
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทการจ้าง'}`]"
:outlined="edit"
dense
lazy-rules
v-model="informaData.employeeType"
emit-value
map-options
option-label="name"
:options="Ops.employeeTypeOps"
option-value="id"
:label="`${'ประเภทการจ้าง'}`"
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
) "
/>
</div>
<div
class="col-xs-6 col-sm-3 col-md-3"
v-if="informaData.profileType == 'employee'"
>
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทลูกจ้าง'}`]"
:outlined="edit"
dense
lazy-rules
v-model="informaData.employeeClass"
emit-value
map-options
option-label="name"
:options="Ops.employeeClassOps"
option-value="id"
:label="`${'ประเภทลูกจ้าง'}`"
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
) "
/>
</div>
<div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
</div>
</q-form>
<div class="row col-12 q-pa-sm">
<q-space />
<q-btn
unelevated
dense
class="q-px-md items-center"
color="light-blue-10"
label="บันทึก"
@click="saveData"
/>
</div>
<q-separator />
</q-card>
</template>

144
src/modules/06_retirement/components/resign/Resign.vue
View file

@ -5,10 +5,8 @@ import { useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useRetirementDataStore } from "@/modules/06_retirement/store";
import DialogHeader from "@/modules/06_retirement/components/DialogHeader.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps } from "quasar";
import type { ResponseItems } from "@/modules/06_retirement/interface/response/Main";
@ -16,9 +14,7 @@ const $q = useQuasar(); //ใช้ noti quasar
const router = useRouter();
const mixin = useCounterMixin();
const RetirementData = useRetirementDataStore();
const { messageError, date2Thai, showLoader, hideLoader, success } = mixin;
const { statusText } = RetirementData;
const rows = ref<ResponseItems[]>([]);
const columns = ref<QTableProps["columns"]>([
@ -276,7 +272,6 @@ const closeModal = () => (modal.value = false);
const selected = ref<ResponseItems[]>([]);
const checkSelected = computed(() => {
if (selected.value.length === 0) {
return true;
}
});
@ -287,20 +282,19 @@ const resetFilter = () => {
};
const openModalOrder = () => {
openModal();
const row = filters.value.filter(
(r: ResponseItems) =>
r.status == "PENDING" || r.status == "APPROVE" || r.status == "REJECT"
);
rows2.value = row;
};
onMounted(async () => {
await fecthlist();
});
//นำข้อมูลจาก API มาแสดง
const fecthlist = async () => {
showLoader();
await http
@ -346,6 +340,7 @@ const fecthlist = async () => {
});
};
//บันทึกคำสั่ง
const saveOrder = async () => {
const id = selected.value.map((r) => r.id);
const body = {
@ -369,6 +364,8 @@ const saveOrder = async () => {
hideLoader();
});
};
//แปลงข้อความ status
const status = (val: string) => {
switch (val) {
case "WAITTING":
@ -405,28 +402,66 @@ const pagination = ref({
<div class="row col-12">
<div class="row col-12 q-col-gutter-sm">
<div>
<q-btn @click="openModalOrder" size="14px" flat round color="add" icon="mdi-account-arrow-right">
<q-btn
@click="openModalOrder"
size="14px"
flat
round
color="add"
icon="mdi-account-arrow-right"
>
<q-tooltip>ส่งไปออกคำสั่งลาออก</q-tooltip>
</q-btn>
</div>
<q-space />
<q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
debounce="300" placeholder="ค้นหา">
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2" />
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12 q-pt-sm">
<d-table :columns="columns" :rows="rows" :filter="filterKeyword" row-key="id" :visible-columns="visibleColumns"
v-model:pagination="pagination">
<d-table
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="id"
:visible-columns="visibleColumns"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
@ -435,7 +470,11 @@ const pagination = ref({
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer" @click="router.push(`/retirement/resign/${props.row.id}`)">
<q-tr
:props="props"
class="cursor-pointer"
@click="router.push(`/retirement/resign/${props.row.id}`)"
>
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
</q-td>
@ -485,32 +524,72 @@ const pagination = ref({
<div class="row justify-end">
<div class="col-5">
<q-toolbar style="padding: 0">
<q-input borderless outlined dense debounce="300" v-model="filterKeyword2" placeholder="ค้นหา"
style="width: 850px; max-width: auto">
<q-input
borderless
outlined
dense
debounce="300"
v-model="filterKeyword2"
placeholder="ค้นหา"
style="width: 850px; max-width: auto"
>
<template v-slot:append>
<q-icon v-if="filterKeyword2 == ''" name="search" />
<q-icon v-if="filterKeyword2 !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
<q-icon
v-if="filterKeyword2 !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select v-model="visibleColumns2" multiple outlined dense options-dense
:display-value="$q.lang.table.columns" emit-value map-options :options="columns2" option-value="name"
options-cover style="min-width: 150px" class="gt-xs q-ml-sm" />
<q-select
v-model="visibleColumns2"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns2"
option-value="name"
options-cover
style="min-width: 150px"
class="gt-xs q-ml-sm"
/>
</q-toolbar>
</div>
</div>
<d-table :columns="columns2" :rows="rows2" :filter="filterKeyword2" row-key="id"
:visible-columns="visibleColumns2" selection="multiple" v-model:selected="selected"
v-model:pagination="pagination">
<d-table
:columns="columns2"
:rows="rows2"
:filter="filterKeyword2"
row-key="id"
:visible-columns="visibleColumns2"
selection="multiple"
v-model:selected="selected"
v-model:pagination="pagination"
>
<template v-slot:header-selection="scope">
<q-checkbox keep-color color="primary" dense v-model="scope.selected" />
<q-checkbox
keep-color
color="primary"
dense
v-model="scope.selected"
/>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td>
<q-checkbox keep-color color="primary" dense v-model="props.selected" />
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
</q-td>
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
@ -548,7 +627,12 @@ const pagination = ref({
</q-card-section>
<q-card-actions align="right" class="bg-white text-teal">
<q-btn label="ส่งไปออกคำสั่ง" @click="saveOrder" :disable="checkSelected" color="public" />
<q-btn
label="ส่งไปออกคำสั่ง"
@click="saveOrder"
:disable="checkSelected"
color="public"
/>
</q-card-actions>
</q-card>
</q-dialog>

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

@ -15,7 +15,7 @@ const {
hideLoader,
dialogConfirm,
success,
dialogMessageNotify
dialogMessageNotify,
} = mixin;
const router = useRouter();
const route = useRoute();
@ -34,36 +34,38 @@ const options = ref([
{ label: "รอบการเสนอขอพระราชทานเครื่องราชรอบที่ 1", value: 1 },
{ label: "รอบการเสนอขอพระราชทานเครื่องราชรอบที่ 2", value: 2 },
]);
onMounted(async () => {
await fetchData();
});
const fetchData = async () => {
if (route.params.id) {
edit.value = true;
showLoader();
await http
.get(config.API.getRoundInsignia(id.value))
.then((res) => {
const data = res.data.result;
id.value = data.period_id;
roundInsig.value =
options.value.filter((r: any) => r.value == data.period_round)
.length > 0
? options.value.filter((r: any) => r.value == data.period_round)[0]
: null;
yearly.value = data.period_year;
datelast.value = data.period_amount;
dateStart.value = new Date(data.period_start);
dateEnd.value = new Date(data.period_end);
files.value = data.period_doc;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
await fetchData();
}
});
const fetchData = async () => {
edit.value = true;
showLoader();
await http
.get(config.API.getRoundInsignia(id.value))
.then((res) => {
const data = res.data.result;
id.value = data.period_id;
roundInsig.value =
options.value.filter((r: any) => r.value == data.period_round).length >
0
? options.value.filter((r: any) => r.value == data.period_round)[0]
: null;
yearly.value = data.period_year;
datelast.value = data.period_amount;
dateStart.value = new Date(data.period_start);
dateEnd.value = new Date(data.period_end);
files.value = data.period_doc;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const fileUploadDoc = async (files: any) => {
@ -92,11 +94,12 @@ const editData = async (id: string) => {
formData.append("endDate", dateToISO(dateEnd.value));
}
formData.append("file", files.value);
console.log(formData);
showLoader();
await http
.put(config.API.editRoundInsignia(id), formData)
.then(async () => {})
.then(() => {
success($q, "แก้ไขข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
@ -104,17 +107,16 @@ const editData = async (id: string) => {
hideLoader();
clickBack();
});
console.log(formData);
};
const checkSave = () => {
if (myForm.value !== null) {
myForm.value.validate().then(async (success) => {
if (success) {
dialogConfirm($q, () => SaveData());
}else {
dialogMessageNotify($q,"กรุณาเลือกรอบการเสนอขอพระราชทานเครื่องราชฯ")
} else {
dialogMessageNotify($q, "กรุณาเลือกรอบการเสนอขอพระราชทานเครื่องราชฯ");
}
})
});
}
};
const SaveData = async () => {
@ -130,11 +132,9 @@ const updateDateRange = () => {
if (roundInsig.value.value == 1) {
dateStart.value = new Date(new Date().getFullYear(), 9, 1);
dateEnd.value = new Date(new Date().getFullYear() + 1, 3, 29);
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(), 4, 29);
console.log(2);
}
};
@ -143,7 +143,6 @@ const addData = async () => {
const name = `รอบการเสนอขอพระราชทานเครื่องราชรอบที่ ${
roundInsig.value.value
} ปี ${yearly.value + 543} `;
console.log(name);
formData.append("name", name);
formData.append("year", yearly.value.toString());
formData.append("amount", datelast.value.toString());
@ -329,7 +328,9 @@ const clickBack = () => {
outlined
v-model="datelast"
label="จำนวนวันแจ้งเตือนก่อนวันสิ้นสุด"
mask="###"
/>
<q-file
class="col-xs-12 col-sm-10"
outlined
@ -341,9 +342,6 @@ const clickBack = () => {
lazy-rules
accept=".pdf,.xlsx,.doc"
>
<!-- :rules="[
(val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
]" -->
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>

38
src/modules/07_insignia/components/1_Proposals/listProposals.vue
View file

@ -25,7 +25,6 @@ const visibleColumns = ref<string[]>([
"period_year",
"period_start",
"period_end",
// "status",
"statusRoyal",
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
@ -61,8 +60,8 @@ const columns = ref<QTableProps["columns"]>([
field: "period_start",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "period_end",
@ -72,8 +71,8 @@ const columns = ref<QTableProps["columns"]>([
field: "period_end",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "statusRoyal",
@ -95,6 +94,7 @@ onMounted(async () => {
await fetchData();
});
//เรียกจาก API รายการรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์
const fetchData = async () => {
showLoader();
await http
@ -114,7 +114,6 @@ const fetchData = async () => {
period_doc: e.period_doc,
period_status: e.period_status.result,
}));
console.log(rows.value);
})
.catch((e) => {
messageError($q, e);
@ -145,16 +144,11 @@ const clickDelete = (id: string) => {
});
});
};
// เพิ่มรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์
const clickAdd = () => {
router.push({ name: "roundAdd" });
};
const clickProposals = (file: string) => {
if (file !== null) {
window.open(file);
}
};
const clickListInsignia = async (propsId: string) => {
dialogConfirm(
$q,
@ -165,6 +159,7 @@ const clickListInsignia = async (propsId: string) => {
"ต้องการยืนยันการคำนวณราชชื่อผู้ได้รับเครื่องราชนี้หรือไม่ ?"
);
};
// เรียกจาก API ข้อมูลผู้ได้รับเครื่องราชฯ
const getRequest = async (id: string) => {
showLoader();
await http
@ -179,16 +174,6 @@ const getRequest = async (id: string) => {
await fetchData();
});
};
// const downloadFile = (response: any, name: string) => {
// const link = document.createElement("a");
// var fileName = name;
// link.href = response;
// link.setAttribute("target", "_blank");
// link.setAttribute("download", fileName);
// document.body.appendChild(link);
// link.click();
// document.body.removeChild(link);
// };
// ค้นหาในตาราง
const filterKeyword = ref<string>("");
@ -201,7 +186,7 @@ const resetFilter = () => {
const attrs = ref<any>(useAttrs());
const paging = ref<boolean>(true);
const pagination = ref({
sortBy: "desc",
// sortBy: "desc",
descending: false,
page: 1,
rowsPerPage: 10,
@ -375,7 +360,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
<q-tooltip>ผู้ได้รับเครื่องราชฯ</q-tooltip>
</q-btn>
</q-td>
<q-td auto-width>
<q-td auto-width v-if="props.row.period_doc !== null">
<q-btn
dense
type="a"
@ -387,13 +372,10 @@ const paginationLabel = (start: string, end: string, total: string) => {
icon="mdi-file-download"
:href="props.row.period_doc"
>
<!-- @click="
downloadFile(props.row.period_doc, props.row.period_name)
" -->
<q-tooltip>ดาวน์โหลดเอกสารประกอบ </q-tooltip>
</q-btn>
</q-td>
<q-td auto-width v-else></q-td>
<q-td auto-width>
<q-btn
dense

125
src/modules/07_insignia/components/2_Manage/Tab1.vue
View file

@ -27,7 +27,6 @@ const $q = useQuasar();
const DataStore = useInsigniaDataStore();
const roleDataStore = useroleUserDataStore();
const modalNote = ref<boolean>(false);
const modelPopupReject = ref<boolean>(false);
const modelPopupDelete = ref<boolean>(false);
const modalAdd = ref<boolean>(false);
@ -233,6 +232,7 @@ onMounted(async () => {
}
}
});
// เช็คสถานนะแสดงปุ่มเพิ่ม
const checkStatus = computed(() => {
if (
roleDataStore.insignia1Role &&
@ -241,6 +241,7 @@ const checkStatus = computed(() => {
return true;
} else return false;
});
// เลืแกหน่วยงาน
const changtypeOc = () => {
if (props.fecthInsigniaByOc) {
props.fecthInsigniaByOc(
@ -252,26 +253,14 @@ const changtypeOc = () => {
}
DataStore.typeOc = organization.value;
};
// เพิ่มราชชื่อ
const clickmodalAdd = () => {
showLoader();
fecthlistRetire();
fecthInsignia();
fecthlistperson(DataStore.typeOc);
insigniaType.value = "";
};
// fecth profile
const fecthlistRetire = async () => {
await http
.get(config.API.profileOrganizRoot)
.then((res) => {
const id = res.data.result[0].id;
if (id !== "") {
fecthlistperson(id);
}
})
.catch((e) => {
messageError($q, e);
});
};
// เรียกรายชื่อข้าราชการตามหน่วยงานที่จะเพิ่ม
const fecthlistperson = async (id: string) => {
let data = [{}];
data = [
@ -295,10 +284,9 @@ const fecthlistperson = async (id: string) => {
position: e.position == null ? "-" : e.position,
level: e.positionEmployeeLevel == null ? "-" : e.positionEmployeeLevel,
organizationOrganization: e.oc == null ? "-" : e.oc,
ocId: DataStore.convertOcid(e.oc),
}));
modalAdd.value = true;
rows2.value = data.filter((e: any) => e.ocId === DataStore.typeOc);
rows2.value = data;
})
.catch((e) => {
messageError($q, e);
@ -307,6 +295,7 @@ const fecthlistperson = async (id: string) => {
hideLoader();
});
};
// ยืนยันการเพิ่มราชชื่อ
const clickAdd = async (id: string) => {
if (insigniaType.value !== "") {
dialogConfirm(
@ -319,7 +308,7 @@ const clickAdd = async (id: string) => {
);
} else dialogMessageNotify($q, "กรุณาเลือกรายชื่อขอพระราชทานเครื่องราชฯ");
};
//เพิ่มราชชื่อข้าราชการ
const addlistperson = async (id: string) => {
showLoader();
let data = {
@ -348,14 +337,14 @@ const addlistperson = async (id: string) => {
hideLoader();
});
};
// เปิด POP แก้ไขเครื่องราชฯ
const clickmodalEdit = (props: any) => {
insignia.value = props.insigniaSend;
person.value = props;
modalEdit.value = true;
fecthInsignia();
};
// downloadfile รายชื่อข้าราชการสามัญฯ
const downloadFile = (response: any, filename: string) => {
const link = document.createElement("a");
var fileName = filename;
@ -365,6 +354,7 @@ const downloadFile = (response: any, filename: string) => {
link.click();
document.body.removeChild(link);
};
// เรียก file รายชื่อข้าราชการสามัญฯ
const downloadFileexcel = async () => {
showLoader();
await http
@ -378,35 +368,13 @@ const downloadFileexcel = async () => {
);
})
.catch((err) => {
console.log(err);
messageError($q, err);
})
.finally(() => {
hideLoader();
});
};
// const downloadReport = async (type: string = "pdf") => {
// showLoader();
// await http
// .get(config.API.reportInsignia("45", type, props.roundId!), {
// responseType: "blob",
// })
// .then(async (res) => {
// console.log(res);
// downloadFile(
// res,
// `บัญชีแสดงรายชื่อผู้ขอพระราชทานเหรียญจักรพรรดิมาลา ${props.roundName}.${type}`
// );
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(() => {
// hideLoader();
// });
// };
// ยืนยันการแก้ไขเครื่องราช
const clickSave = () => {
dialogConfirm(
$q,
@ -417,7 +385,7 @@ const clickSave = () => {
"ต้องการยืนยันการแก้ไขเครื่องราชฯ ที่ยื่นขอนี้หรือไม่ ?"
);
};
// แก้ไขเครื่องราช API
const listEdit = async (profileId: string) => {
let data: any = {
insigniaId: insignia.value,
@ -442,11 +410,16 @@ const listEdit = async (profileId: string) => {
}
});
};
//เปิด POPUP ไม่ยืนขอ
const clickReject = (id: string) => {
modelPopupReject.value = true;
rowid.value = id;
};
// ปิด POPUP ไม่ยืนขอ
const closemodelPopupReject = () => {
modelPopupReject.value = false;
};
// ยืนยัน การไม่ยืนขอ
const savaReasonReject = (reason: string) => {
dialogConfirm(
$q,
@ -460,10 +433,7 @@ const savaReasonReject = (reason: string) => {
"ต้องการยืนยันการย้ายข้อมูลนี้หรือไม่ ?"
);
};
const closemodelPopupReject = () => {
modelPopupReject.value = false;
};
// ยืนยัน การไม่ยืนขอ API
const listreject = async (profileId: string, reason: string) => {
await http
.put(config.API.insigniaReject(profileId), { reason: reason })
@ -485,14 +455,16 @@ const listreject = async (profileId: string, reason: string) => {
await closemodelPopupReject();
});
};
//เปิด POPUP คนที่ถูกลบ
const clickDelete = (id: string) => {
modelPopupDelete.value = true;
rowid.value = id;
};
// ปิด POPUP คนที่ถูกลบ
const closemodelPopupDelete = () => {
modelPopupDelete.value = false;
};
// ยืนยัน การลบคนที่ถูกลบ
const savaReasonDelete = (reason: string) => {
dialogConfirm(
$q,
@ -506,7 +478,7 @@ const savaReasonDelete = (reason: string) => {
"ต้องการยืนยันการลบข้อมูลนี้หรือไม่ ?"
);
};
// ยืนยัน คนที่ถูกลบ API
const listdelete = async (id: string, reason: string) => {
await http
.put(config.API.insigniaDelete(id), { reason: reason })
@ -532,7 +504,7 @@ const listdelete = async (id: string, reason: string) => {
const insignia = ref<string>("");
const insigniaOptions = ref<any>([]);
const insigniaType = ref<string>("");
// เรียกประเภทเครื่องราชฯ
const fecthInsignia = async () => {
await http
.get(config.API.insignia)
@ -662,30 +634,7 @@ const closeModalEdit = () => {
color="primary"
@click="downloadFileexcel"
>
<!-- @click="downloadReport('pdf')" -->
<q-tooltip>ดาวน์โหลด</q-tooltip>
<!-- <q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup @click="downloadReport('pdf')">
<q-item-section avatar
><q-icon color="red" name="mdi-file-pdf"
/></q-item-section>
<q-item-section>ไฟล์ .PDF</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="downloadReport('docx')">
<q-item-section avatar
><q-icon color="blue" name="mdi-file-word"
/></q-item-section>
<q-item-section>ไฟล์ .docx</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="downloadReport('xlsx')">
<q-item-section avatar
><q-icon color="green" name="mdi-file-excel"
/></q-item-section>
<q-item-section>ไฟล์ .xlsx</q-item-section>
</q-item>
</q-list>
</q-menu> -->
</q-btn>
<q-btn
size="12px"
@ -814,7 +763,7 @@ const closeModalEdit = () => {
<q-td key="dateSend" :props="props">
{{ props.row.dateSend }}
</q-td>
<q-td
auto-width
v-if="
@ -896,16 +845,16 @@ const closeModalEdit = () => {
</q-btn>
</q-td>
<q-td
auto-width
v-if="props.row.insigniaSend == 'เหรียญจักรพรรดิมาลา'"
>
<btnDownloadFile
:profileId="props.row.profileId"
:round="DataStore.roundId"
:optionRound="DataStore.optionRound"
/>
</q-td>
<q-td v-else auto-width></q-td>
auto-width
v-if="props.row.insigniaSend == 'เหรียญจักรพรรดิมาลา'"
>
<btnDownloadFile
:profileId="props.row.profileId"
:round="DataStore.roundId"
:optionRound="DataStore.optionRound"
/>
</q-td>
<q-td v-else auto-width></q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
@ -1087,6 +1036,7 @@ const closeModalEdit = () => {
</q-card>
</q-dialog>
<!-- popup เหตุผลไม่ยื่นขอ -->
<DialogPopupReason
:modal="modelPopupReject"
title="เหตุผลไม่ยื่นขอ"
@ -1094,6 +1044,7 @@ const closeModalEdit = () => {
:click-close="closemodelPopupReject"
:savaForm="savaReasonReject"
/>
<!-- เหตุผลที่ลบออก -->
<DialogPopupReason
:modal="modelPopupDelete"
title="เหตุผลที่ลบออก"

2
src/modules/07_insignia/components/2_Manage/Tab2.vue
View file

@ -161,7 +161,7 @@ onMounted(async () => {
}
}
});
// เลือกหน่วยงาน
const changtypeOc = () => {
if (props.fecthInsigniaByOc) {
props.fecthInsigniaByOc(

8
src/modules/07_insignia/components/2_Manage/Tab4.vue
View file

@ -48,24 +48,18 @@ onMounted(async () => {
await fecthOrg();
DataStore.mainTab = props.tab;
});
watch(props, async () => {
if (props.tab === "organization") {
await fecthOrg();
}
});
//หน่วยงานที่ยังไม่ได้เสนอชื่อ
const fecthOrg = async () => {
showLoader();
await http
.get(config.API.insigniaNosend(props.roundId))
.then((res) => {
console.log(res);
let data = res.data.result;
rows.value = data.map((e: any) => ({
orgId: e.orgId,
orgName: e.orgName,
}));
console.log(rows.value);
})
.catch((err) => {
messageError($q, err);

53
src/modules/07_insignia/components/2_Manage/listManage.vue
View file

@ -1,7 +1,6 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
@ -15,9 +14,6 @@ import tab2 from "@/modules/07_insignia/components/2_Manage/Tab2.vue";
import tab3 from "@/modules/07_insignia/components/2_Manage/Tab3.vue";
import tab4 from "@/modules/07_insignia/components/2_Manage/Tab4.vue";
import DialogPopupReason from "@/components/Dialogs/PopupReason.vue";
import keycloak from "@/plugins/keycloak";
const roleUser = ref<string>("admin");
const roleDataStore = useroleUserDataStore();
const DataStore = useInsigniaDataStore();
@ -39,12 +35,14 @@ const stat = ref<any>({
orgNoSendCount: 0,
orgSendCount: 0,
});
const modalPopupBackToEdit = ref<boolean>(false); //model แก้ไข
onMounted(async () => {
tab.value = DataStore.mainTab;
await fecthlistRound();
});
//เรียกรอบการเสนอขอพระราชทานเครื่อง
const fecthlistRound = async () => {
await http
.get(config.API.listRoundInsignia())
@ -54,13 +52,14 @@ const fecthlistRound = async () => {
year: e.period_year,
name: e.period_name,
}));
//มีรอบการเสนอขอพระราชทานเครื่องแสดง UI
if (optionRound.value.length !== 0) {
DataStore.optionRound = optionRound.value;
const lastValue = optionRound.value[0];
if (DataStore.roundId) {
round.value = DataStore.roundId;
round.value = DataStore.roundId; // รอบการเสนอให้ใช้รอบที่เลือก
} else {
round.value = lastValue.id.toString();
round.value = lastValue.id.toString(); // รอบการเสนอให้ใช้รอบล่าสุด
}
DataStore.roundId = round.value;
roundName.value = lastValue.name;
@ -69,11 +68,11 @@ const fecthlistRound = async () => {
}
})
.catch((err) => {
console.log(err);
messageError($q, err);
});
};
//เรียกดู Stat ของรอบการเสนอขอพระราชทานเครื่อง
const fecthStat = async (id: string) => {
showLoader();
await http
@ -89,6 +88,7 @@ const fecthStat = async (id: string) => {
});
};
// เช็คหน่วยงาน
const fecthAgency = async () => {
showLoader();
await http
@ -97,11 +97,10 @@ const fecthAgency = async () => {
DataStore.agency = res.data.result;
loadview.value = true;
if (roleDataStore.adminRole) {
await fecthType();
await fecthType(); // ถ้าไม่มีหนวยงานจะเรียกหน่วยงานทั้งหมด
}
})
.catch((err) => {
console.log(err);
messageError($q, err);
})
.finally(() => {
@ -109,7 +108,7 @@ const fecthAgency = async () => {
hideLoader();
});
};
// เรียกหน่วยงาน
const fecthType = async () => {
await http
.get(config.API.typeOc())
@ -118,23 +117,21 @@ const fecthType = async () => {
id: e.organizationId,
name: e.organizationName,
}));
DataStore.fetchOption(optiontypeOc.value);
DataStore.fetchOption(optiontypeOc.value); //ค่าของหน่วยงานทั้งหมดไว้ที่ DataStore
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
// loading.value = true;
});
};
//เลือกรอบการแสดง
const changround = async () => {
DataStore.roundId = round.value;
fecthStat(round.value);
var organization = await (DataStore.agency != null
fecthStat(round.value); //เรียกดู Stat รอบที่เลือก
var organization = await (DataStore.agency != null //ถ้ามี agency เรียกข้อมูลตาม agency ถ้าไม่มีเรียนตาม Oc ที่เลือก
? DataStore.agency
: DataStore.typeOc);
fecthInsigniaByOc(round.value, organization, "officer", tab.value);
fecthInsigniaByOc(round.value, organization, "officer", tab.value); // เรียกข้อมูลรายชื่อข้าราชการสามัญฯ ที่มีสิทธิ์ยื่นขอพระราชทานเครื่องราชอิสริยาภรณ์
// get round name
const roundFilter = await optionRound.value.find(
(x: any) => round.value === x.id
@ -145,6 +142,8 @@ const changround = async () => {
};
const requestNote = ref<string>("");
const requestStatus = ref<string>("");
//เรียกข้อมูลรายชื่อข้าราชการสามัญฯ ที่มีสิทธิ์ยื่นขอพระราชทานเครื่องราชอิสริยาภรณ์ ตามรอบการเสนอขอ
const fecthInsigniaByOc = async (
roundId: string,
ocId: string,
@ -157,20 +156,15 @@ const fecthInsigniaByOc = async (
.then(async (res) => {
requestNote.value = res.data.result.requestNote;
requestStatus.value = res.data.result.requestStatus;
await DataStore.fetchData(res.data.result.items);
await DataStore.fetchDataInsignia(res.data.result);
await DataStore.fetchData(res.data.result.items); // ส่งรายชื่อข้าราชการสามัญฯ
await DataStore.fetchDataInsignia(res.data.result); // ส่งข้อมูลรอบบการแสดง
loading.value = true;
// แสดงปุมล็อกข้อมูล
if (res.data.result.items !== null) {
if (res.data.result.items.length !== 0) {
hideBottom.value = true;
} else hideBottom.value = false;
}
// if (res.data.result.items.length !== 0) {
// hideBottom.value = true;
// }
// DataStore.isLock = await res.data.result.isLock;
// DataStore.requestId = await res.data.result.requestId;
})
.catch((err) => {
messageError($q, err);
@ -180,6 +174,7 @@ const fecthInsigniaByOc = async (
});
};
// ส่งรอบการเสนอขอต่อ เฉพาะ รอบที่ requestStatus st1 และ st4
const sendToDirector = async () => {
dialogConfirm($q, async () => {
showLoader();
@ -203,15 +198,16 @@ const sendToDirector = async () => {
});
});
};
const modalPopupBackToEdit = ref<boolean>(false);
//แสดง popup แก้ไข
const popupBackToEdit = async () => {
modalPopupBackToEdit.value = true;
};
//ปิด popup แก้ไข
const closeModalPopupBackToEdit = async () => {
modalPopupBackToEdit.value = false;
};
// ตีกลับรอบการเสนอขอ เฉพาะ รอบที่ requestStatus st3 และ insignia2Role
const backToEdit = async (reason: string) => {
dialogConfirm(
$q,
@ -246,6 +242,7 @@ const backToEdit = async (reason: string) => {
);
};
// อนุมัติรอบการเสนอขอ เฉพาะ รอบที่ requestStatus st3 และ insignia2Role
const directorApproved = async () => {
dialogConfirm(
$q,
@ -274,7 +271,7 @@ const directorApproved = async () => {
"ต้องการยืนยันการอนุมัติใช่หรือไม่?"
);
};
// ล็อกข้อมูลรอบการเสนอขอ
const requestSendNote = async () => {
var organization = await (DataStore.agency != null
? DataStore.agency

3
src/modules/07_insignia/components/3_result/DialogForm.vue
View file

@ -62,11 +62,9 @@ const props = defineProps({
modal: Boolean,
save: {
type: Function,
default: () => console.log("not function"),
},
close: {
type: Function,
default: () => console.log("not function"),
},
roundId: {
type: String,
@ -200,7 +198,6 @@ const fectDataByid = async (id: string) => {
status.value = data.status;
})
.catch((err) => {
console.log(err);
messageError($q, err);
})
.finally(() => {

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

@ -40,8 +40,6 @@ const closeModal = () => {
props.close();
};
const clickSave = () => {
console.log(props.insigniadata);
dialogConfirm($q, () => {
if (props.actionType === "insignia") {
props.save(
@ -76,7 +74,7 @@ const clickSave = () => {
dense
lazy-rules
type="text"
label="จำนวน"
label="เครื่องราชฯ"
disable
/>
</div>

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

@ -97,7 +97,6 @@ const clickSave = () => {
label="จำนวน"
:rules="[(val) => !!val || `${'กรุณากรอกจำนวน'}`]"
/>
<!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,]" -->
</div>
</div>
</div>

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

@ -1,19 +1,18 @@
<script setup lang="ts">
import { ref, onMounted, watch, useAttrs } from "vue";
// import { useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
import { useAllocateDataStore } from "@/modules/07_insignia/storeAllocate";
import type { FormProprsalsRound } from "@/modules/07_insignia/interface/request/Main";
import router from "@/router";
import DialogForm from "@/modules/07_insignia/components/4_Allocate/DialogForm.vue";
import DialogEdit from "@/modules/07_insignia/components/4_Allocate/DialogEdit.vue";
import type { OptionDataYear } from "@/modules/07_insignia/interface/index/Main";
import type { QTableProps, QInput } from "quasar";
import { Loading, useQuasar } from "quasar";
import type { load } from "@/router/loader";
import { useQuasar } from "quasar";
const DataStore = useAllocateDataStore();
const mixin = useCounterMixin();
@ -41,16 +40,12 @@ const selectRound = ref<string>();
const selectRoundOption = ref<OptionDataYear[]>([]);
const modal = ref<boolean>(false);
const action = ref<string>("");
const personId = ref<string>();
const profileType = ref<string>("");
const filterKeyword = ref<string>("");
const roundYear = ref<number>();
const insigniaOp = ref<any>([]);
const loadView = ref<boolean>(false);
onMounted(async () => {
await fecthRound();
// await fecthInsigniaType();
});
const fecthRound = async () => {
@ -74,8 +69,6 @@ const fecthRound = async () => {
if (selectRound.value) {
DataStore.roundId = selectRound.value;
}
// roundYear.value = data[0].year;
if (roundYear.value) {
await fecthInsigniaType();
}
@ -111,7 +104,6 @@ const fecthInsigniaType = async () => {
if (DataStore.mainTab) {
tab.value = DataStore.mainTab;
} else tab.value = DataStore.insigniaType[0].name;
loadView.value = true;
fecthInsignia();
})

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

@ -64,7 +64,6 @@ const fecthListData = async () => {
await http
.get(config.API.insigniaManageOrg(id.value))
.then((res) => {
// console.log("res===>", res)
rows.value = res.data.result.map((e: any) => ({
id: e.id,
organization: e.organizationOrganization,
@ -129,7 +128,9 @@ const save = async (organizationId: string, total: string) => {
const saveEdit = async (organizationId: string, amount: number) => {
showLoader();
await http
.put(config.API.insigniaManageOrg(organizationId), { total: Number(amount) })
.put(config.API.insigniaManageOrg(organizationId), {
total: Number(amount),
})
.then(async () => {
success($q, "แก้ไขมูลสำเร็จ");
await fecthDashboard();

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

@ -25,7 +25,6 @@ const roundNo = ref<string | undefined>("");
const cardid = ref<string>("");
const OrganazationId = ref<string>("");
const fullName = ref<string>("");
// const position = ref<string>("");
const receivedate = ref<Date | null>();
const returndate = ref<Date | null>();
const reason = ref<string>("");
@ -147,7 +146,7 @@ const fetchData = async () => {
await http
.get(config.API.insigniaManageBorrowById(props.profileId))
.then(async (response: any) => {
console.log(response.data.result);
console.log(response);
})
.catch((err) => {
messageError($q, err);
@ -208,7 +207,6 @@ const searchcardid = async () => {
);
if (node) {
console.log("node", node);
fullName.value = `${node.prefix} ${node.fullName}`;
brand.value = node.requestInsignia;
insigniaNoteProfileId.value = node.id;

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

@ -30,8 +30,8 @@ const loadView = ref<boolean>(false);
onMounted(async () => {
await fecthRound();
// await fecthInsigniaType();
});
// รอบการเสนอขอพระราชทานเครื่องราชฯ
const fecthRound = async () => {
showLoader();
await http
@ -74,7 +74,7 @@ const fecthRound = async () => {
hideLoader();
});
};
// เรียกประเภทเครื่องราชฯ
const fecthInsignia = async () => {
await http
.get(config.API.insignia)
@ -91,7 +91,7 @@ const fecthInsignia = async () => {
);
});
};
//ระดีบเครื่องราชฯ Tab
const fecthInsigniaType = async () => {
await http(config.API.insigniaType)
.then(async (res) => {
@ -153,7 +153,7 @@ const columns = ref<QTableProps["columns"]>([
{
name: "name",
align: "left",
label: "ชื่อ - สกุล",
label: "ชื่อ - นามสกุล",
field: "name",
sortable: true,
sort: (a: string, b: string) =>
@ -334,6 +334,7 @@ const selectorRound = async (round: number) => {
roundYear.value = round;
await fecthlistInsignia();
};
// ราชชื่อการเสนอขอเครื่องราชฯ
const fecthlistInsignia = async () => {
showLoader();
await http
@ -559,7 +560,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
<div v-if="props.col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div
v-else-if="
props.col.name == 'action' && props.row.returnDate == '-'
@ -574,8 +575,12 @@ const paginationLabel = (start: number, end: number, total: number) => {
</q-td>
</div>
<div v-else-if="props.col.name == 'returnOrganization'">
{{ props.row.returnOrganization == null? '-': props.row.returnOrganization}}
</div>
{{
props.row.returnOrganization == null
? "-"
: props.row.returnOrganization
}}
</div>
<div v-else>
{{ props.value }}
</div>

10
src/modules/07_insignia/components/Coin.vue
View file

@ -1,15 +1,5 @@
<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">

409
src/modules/07_insignia/components/VatInsignia.vue
View file

@ -1,409 +0,0 @@
<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>

25
src/modules/07_insignia/components/report/ReportView.vue
View file

@ -46,15 +46,6 @@ const nextPage = (type: string, title: string) => {
</q-item-section>
</q-item>
<!-- <q-item to="/insignia/report/report-01" dense class="hover-green">
<q-item-section avatar>
<q-icon color="primary" name="mdi-file" size="xs" />
</q-item-section>
<q-item-section class="text-dark"
>รายชื่อข้าราชการสามัญฯ ที่ได้รับ/ไม่ได้รับใบกำกับ
</q-item-section>
</q-item> -->
<q-item
clickable
@click="
@ -84,22 +75,6 @@ const nextPage = (type: string, title: string) => {
บัญชีแสดงจำนวนชั้นตราเครื่องราชฯ
</q-item-section>
</q-item>
<!-- <q-item
clickable
@click="
nextPage('46', 'ประวัติสำหรับการเสนอขอพระราชทานเหรียญจักรพรรดิมาลา')
"
dense
class="hover-green"
>
<q-item-section avatar>
<q-icon color="primary" name="mdi-file" size="xs" />
</q-item-section>
<q-item-section class="text-dark">
ประวัติสำหรับการเสนอขอพระราชทานเหรียญจักรพรรดิมาลา
</q-item-section>
</q-item> -->
</div>
</q-card>
</div>

22
src/modules/07_insignia/components/report/Report_01.vue
View file

@ -10,14 +10,7 @@ import config from "@/app.config";
import type { QForm } from "quasar";
const mixin = useCounterMixin();
const {
date2Thai,
messageError,
showLoader,
hideLoader,
dialogConfirm,
success,
} = mixin;
const { messageError, showLoader, hideLoader } = mixin;
const $q = useQuasar();
const myForm = ref<QForm>();
@ -27,15 +20,6 @@ const page = ref<number>(1);
const dialog = ref<boolean>(false);
onMounted(async () => {
await fecthlistRound();
// const pdfData = usePDF(
// "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
// );
// setTimeout(() => {
// pdfSrc.value = pdfData.pdf.value;
// numOfPages.value = pdfData.pages.value;
// }, 1000);
// console.log(pdfData);
});
const splitterModel = ref(14);
@ -76,7 +60,6 @@ const fecthlistRound = async () => {
}));
})
.catch((err) => {
console.log(err);
messageError($q, err);
});
};
@ -91,7 +74,6 @@ const conditionDocument = (type: string) => {
if (type == "show") {
await downloadReport("pdf", false);
} else {
// await downloadReport("pdf", false);
await downloadReport(type, true);
}
}
@ -141,8 +123,6 @@ const downloadReport = async (
);
} else {
const url = URL.createObjectURL(new Blob([res.data]));
// pdfSrc.value = "";
// numOfPages.value = 0;
showDocument(url);
}
})

47
src/modules/07_insignia/components/report/Report_02.vue
View file

@ -12,14 +12,7 @@ import type { QForm } from "quasar";
const store = useInsigniaDataStore();
const mixin = useCounterMixin();
const {
date2Thai,
messageError,
showLoader,
hideLoader,
dialogConfirm,
success,
} = mixin;
const { messageError, showLoader, hideLoader } = mixin;
const { typeReport, titleReport } = store;
const $q = useQuasar();
@ -31,26 +24,9 @@ const dialog = ref<boolean>(false);
onMounted(async () => {
await fecthlistRound();
// const pdfData = usePDF(
// "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
// );
// setTimeout(() => {
// pdfSrc.value = pdfData.pdf.value;
// numOfPages.value = pdfData.pages.value;
// }, 1000);
// console.log(pdfData);
});
const splitterModel = ref(14);
const fileId = ref<string>("");
const selectReport = ref<any>({ id: 39, name: "รายงานขร.1" });
const optionsReport = ref<any>([
{ id: 39, name: "รายงานขร.1" },
{ id: 40, name: "รายงานขร.2" },
{ id: 41, name: "รายงานขร.3" },
{ id: 42, name: "รายงานขร.4" },
]);
const selectList = ref<any>();
const optionsList = ref<any>([{ id: 0, name: "เลือกกรอบการยื่นขอ" }]);
@ -80,7 +56,6 @@ const fecthlistRound = async () => {
}));
})
.catch((err) => {
console.log(err);
messageError($q, err);
});
};
@ -95,7 +70,6 @@ const conditionDocument = (type: string) => {
if (type == "show") {
await downloadReport("pdf", false);
} else {
// await downloadReport("pdf", false);
await downloadReport(type, true);
}
}
@ -125,7 +99,6 @@ const downloadReport = async (
type: string = "pdf",
download: boolean = true
) => {
console.log(typeReport);
showLoader();
await http
.get(config.API.reportInsignia(typeReport, type, selectList.value.id), {
@ -136,8 +109,6 @@ const downloadReport = async (
downloadFile(res, `${titleReport} ${selectList.value.name}.${type}`);
} else {
const url = URL.createObjectURL(new Blob([res.data]));
// pdfSrc.value = "";
// numOfPages.value = 0;
showDocument(url);
}
})
@ -169,21 +140,6 @@ const downloadReport = async (
<div class="q-pa-md q-gutter-y-sm">
<q-toolbar style="padding: 0">
<q-form ref="myForm" class="row items-center">
<!-- <q-select
use-input
fill-input
hide-selected
class="q-mr-sm"
dense
outlined
v-model="selectReport"
:options="optionsReport"
:label="optionsReport.name"
option-value="id"
option-label="name"
style="width: 150px"
@update:model-value="updateSelect"
/> -->
<q-select
class="q-pa-none"
use-input
@ -200,7 +156,6 @@ const downloadReport = async (
@update:model-value="updateSelect"
/>
</q-form>
<!-- style="width: 200px" -->
<q-space />
<div class="q-pa-ms q-gutter-sm" style="padding: 0">
<q-btn outline color="primary" icon="download" label="ดาวน์โหลด">

24
src/modules/07_insignia/router.ts
View file

@ -11,7 +11,6 @@ const report_02 = () =>
import("../07_insignia/components/report/Report_02.vue");
const RecordInsignia = () =>
import("@/modules/07_insignia/views/ResultPage.vue");
const Coin = () => import("@/modules/07_insignia/components/Coin.vue");
const insigniaProposals = () =>
import("@/modules/07_insignia/components/1_Proposals/listProposals.vue");
const roundAdd = () =>
@ -22,8 +21,7 @@ const listAllocate = () =>
import("@/modules/07_insignia/components/4_Allocate/Main.vue");
const allocateOrdList = () =>
import("@/modules/07_insignia/components/4_Allocate/OrgList.vue");
const VatInsignia = () =>
import("@/modules/07_insignia/components/VatInsignia.vue");
// ยืม - คืนเครื่องราช
const insigniaBorrow = () =>
@ -80,16 +78,6 @@ export default [
Role: "insignia",
},
},
{
path: "/insignia/coin",
name: "coin",
component: Coin,
meta: {
Auth: true,
Key: [8],
Role: "insignia",
},
},
{
path: "/insignia/report",
name: "insigniaReport",
@ -150,16 +138,6 @@ export default [
Role: "insignia",
},
},
{
path: "/insignia/vat",
name: "VatInsignia",
component: VatInsignia,
meta: {
Auth: true,
Key: [8.9],
Role: "insignia",
},
},
{
path: "/insignia/borrow",
name: "insigniaBorrow",

22
src/modules/07_insignia/store.ts
View file

@ -30,7 +30,7 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
typeReport.value = type;
titleReport.value = title;
};
// เรียกราชชื่อการเสนอขอ
const fetchData = async (data: any) => {
if (data !== null) {
let datalist = await data.map((e: any) => ({
@ -55,11 +55,13 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
filtertypeInsignia();
} else rows.value = [];
};
// เรียกข้อมูลรอบการเสนอขอ
const fetchDataInsignia = async (data: any) => {
isLock.value = data.isLock;
isLock.value = data.isLock; // สถานะล็อกข้อมูล
requestId.value = data.requestId;
requestStatus.value = data.requestStatus;
requestStatus.value = data.requestStatus; // สถานะของรอบการเสนอขอ
}
// เรียก Option หน่วยงานทั้งหมด
const fetchOption = (op: any) => {
if (agency.value !== null) {
typeOc.value = agency.value;
@ -68,9 +70,11 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
(optionsTypeOc.value = op), (typeOc.value = op[2].id);
}
};
// หาประเภทเครื่องราชทั้งหมดที่อยู่ในรายชื่อข้าราชการสามัญฯ
const filtertypeInsignia = async () => {
typeinsignia.value = "all";
if (listinsignia.value.length !== 0) {
// หาประเภทเครื่องราชที่ขอที่ชื่อซ้ำกัน
const double_name = [
...new Set(listinsignia.value.map((item: any) => item.insigniaSend)),
];
@ -85,6 +89,7 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
}
} else typeinsigniaOptions.value = [{ id: "all", name: "ทั้งหมด" }];
};
// ค้นหาข้อมมูลราชชื่อ ตาม ประเท๓และสถานภาพ
const searchDataTable = async (type: string, employeeClasstype: string) => {
typeinsignia.value = type
employeeClass.value = employeeClasstype
@ -97,15 +102,9 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
} else if (type === 'all' && employeeClasstype === 'all') {
rows.value = listinsignia.value
}
}
const convertOcid = (oc: string) => {
let ocdata = optionsTypeOc.value.find((e: any) => e.name === oc)
if (ocdata) {
return ocdata.id
} else return ""
}
// ประเภทลูกจ้าง
const profileType = (val: string) => {
switch (val) {
case "officer":
@ -129,7 +128,6 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
fetchOption,
searchDataTable,
setTypeandTitle,
convertOcid,
typeReport,
titleReport,
employeeClass,

2
src/modules/07_insignia/storeBrrow.ts
View file

@ -58,8 +58,6 @@ export const useBrrowDataStore = defineStore("insigniaBrrow", () => {
}));
rows.value = list
listInsignia.value = list
console.log(listInsignia.value);
searchDatatable(insignia.value, employeeClass.value)
}
const searchDatatable = (type: string, employeeClass: string) => {

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

@ -25,7 +25,7 @@ const {
const $q = useQuasar();
const tab = ref<string>("");
const selectRound = ref<string>();
const selectRound = ref<string>("");
const selectRoundOption = ref<OptionData[]>([]);
const modal = ref<boolean>(false);
const action = ref<string>("");
@ -36,9 +36,8 @@ const fileinvoice = ref<any>(null);
const loadView = ref<boolean>(false);
onMounted(async () => {
await fecthRound();
// await fecthInsignia();
// await fecthInsigniaType();
});
// รอบการเสนอขอพระราชทานเครื่องราช
const fecthRound = async () => {
showLoader();
await http
@ -62,6 +61,7 @@ const fecthRound = async () => {
hideLoader();
});
};
// ประเภทเครื่องราช
const fecthInsignia = async () => {
await http
.get(config.API.insignia)
@ -71,9 +71,10 @@ const fecthInsignia = async () => {
})
.catch((err) => {
messageError($q, err);
console.log("fecthInsignia");
});
};
// ระดับเครื่องราช
const fecthInsigniaType = async () => {
await http(config.API.insigniaType)
.then((res) => {
@ -137,7 +138,7 @@ const columns = ref<QTableProps["columns"]>([
{
name: "name",
align: "left",
label: "ชื่อ - สกุล",
label: "ชื่อ - นามสกุล",
field: "name",
sortable: true,
sort: (a: string, b: string) =>
@ -269,13 +270,18 @@ watch(modal, () => {
fecthlistInsignia();
}
});
// เลือกประเภทเครื่องราช
const selectorInsignia = () => {
fecthlistInsignia();
};
// เลือกประเภทเครื่องราช
const selectorRound = (round: string) => {
selectRound.value = round;
if (round) {
selectRound.value = round;
}
fecthlistInsignia();
};
// ราชชื่อบันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์/การจ่ายใบกำกับ
const fecthlistInsignia = async () => {
showLoader();
let data = {
@ -287,11 +293,9 @@ const fecthlistInsignia = async () => {
.post(config.API.noteSearch(), data)
.then((res) => {
let data = res.data.result;
console.log(data);
DataStore.fetchlistinsignia(data);
})
.catch((err) => {
console.log(err);
messageError($q, err);
})
.finally(() => {
@ -354,6 +358,7 @@ const modelPerview = ref<boolean>(false);
const rowspreview = ref<any>([]);
const typepreview = ref<string>("");
const fileInsignia = ref<any>(null);
// แสดง fileupload
const perviewfile = async (event: any, actionType: string) => {
showLoader();
typepreview.value = actionType;

391
src/modules/09_coin/components/1_Proposals/addProposals.vue
View file

@ -1,391 +0,0 @@
<template>
<div class="col-xs-12 col-sm-12 col-md-11">
<div class="toptitle col-12 row items-center">
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="clickBack"
/>
{{
edit
? "ระยะเวลาการยื่นขอพระราชทานเครื่องทานเหรียญจักรพรรดิมาลา"
: "เพิ่มระยะเวลาการยื่นขอพระราชทานเครื่องทานเหรียญจักรพรรดิมาลา"
}}
</div>
<q-form ref="myForm">
<div class="col-12">
<q-card bordered>
<div class="col-12 row q-col-gutter-md q-pa-md">
<div class="col-xs-12 col-sm-12 row">
<q-separator />
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<q-select
class="col-10"
dense
outlined
v-model="roundCoin"
label="รอบการเสนอขอพระราชทานเหรียญจักรพรรดิมาลา"
:options="options"
option-value="value"
option-label="label"
@update:model-value="updateDateRange"
:rules="[(val) => !!val || `${'กรุณาเลือกรอบที่'}`]"
/>
<datepicker
menu-class-name="modalfix"
v-model="yearly"
class="col-2"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
@update:modelValue="updateYear"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
lazy-rules
outlined
:model-value="yearly + 543"
:rules="[(val) => !!val || `${'กรุณาเลือกปีที่เสนอ'}`]"
:label="`${'ปีที่เสนอ'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
menu-class-name="modalfix"
v-model="dateStart"
:locale="'th'"
autoApply
class="col-xs-12 col-sm-5"
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
outlined
dense
class="full-width datepicker"
:model-value="
dateStart != null ? date2Thai(dateStart) : null
"
:label="`${'วันเริ่มต้น'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกวันเริ่มต้น'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
menu-class-name="modalfix"
v-model="dateEnd"
class="col-xs-12 col-sm-5"
: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
outlined
dense
class="col-xs-12 col-sm-4"
:model-value="dateEnd != null ? date2Thai(dateEnd) : null"
:label="`${'วันสิ้นสุด'}`"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่วันสิ้นสุด'}`,
]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-xs-12 col-sm-2"
dense
outlined
v-model="datelast"
label="จำนวนวันแจ้งเตือนก่อนวันสิ้นสุด"
/>
<q-file
class="col-xs-12 col-sm-10"
outlined
dense
v-model="files"
@added="fileUploadDoc"
label="อัปโหลดเอกสารประกอบ"
hide-bottom-space
lazy-rules
>
<!-- :rules="[
(val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
]" -->
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
</div>
</div>
</div>
<q-separator />
<q-separator />
<div class="row col-12 q-pa-sm">
<q-space />
<q-btn
unelevated
dense
class="q-px-md items-center"
color="light-blue-10"
label="บันทึก"
@click="checkSave"
/>
</div>
</q-card>
</div>
</q-form>
</div>
</template>
<script setup lang="ts">
import type { QTableProps } from "quasar";
import { ref, onMounted } from "vue";
import { useQuasar, QForm } from "quasar";
import { useRouter, useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
const mixin = useCounterMixin();
const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader,dialogConfirm } =
mixin;
const router = useRouter();
const route = useRoute();
const $q = useQuasar();
const id = ref<string>(route.params.id as string);
const myForm = ref<QForm | null>(null); //form data input
const edit = ref<boolean>(false);
const dateStart = ref<Date>(new Date());
const dateEnd = ref<Date>(new Date());
const yearly = ref<number>(new Date().getFullYear());
const files = ref<any>();
const fileDocDataUpload = ref<File[]>([]);
const roundCoin = ref<any>("");
const datelast = ref<number>(1);
const options = ref([
{label:"รอบที่ 1",value:1},
{label:"รอบที่ 2",value:2}
])
onMounted(async () => {
await fetchData();
});
const fetchData = async () => {
if (route.params.id) {
edit.value = true;
showLoader();
console.log(id.value);
await http
.get(config.API.getRoundInsignia(id.value))
.then((res) => {
const data = res.data.result;
// const files = res.data.result.files;
id.value = data.period_id;
roundCoin.value = data.period_name;
yearly.value = data.period_year;
datelast.value = data.period_amount;
dateStart.value = new Date(data.period_start);
dateEnd.value = new Date(data.period_end);
files.value = data.period_doc;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
};
const routeName = router.currentRoute.value.name;
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file);
});
};
const updateYear = async (e: number) => {
yearly.value = e;
};
const uploadDocData = async () => {
const formData = new FormData();
if (fileDocDataUpload.value.length > 0) {
fileDocDataUpload.value.forEach((file: any) => {
formData.append("", file);
});
showLoader();
await http
.put(config.API.RoundInsignia(id.value), formData)
.then((res) => {})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
success($q, "บันทึกข้อมูลสำเร็จ");
clickBack();
});
} else {
success($q, "บันทึกข้อมูลสำเร็จ");
clickBack();
}
};
const editData = async (id: string) => {
const formData = new FormData();
formData.append("Name", roundCoin.value);
formData.append("year", parseInt(yearly.value).toString());
formData.append("amount", datelast.value.toString());
if (dateStart.value !== null) {
formData.append("startDate", dateToISO(dateStart.value));
}
if (dateEnd.value !== null) {
formData.append("endDate", dateToISO(dateEnd.value));
}
formData.append("file", files.value);
console.log(formData);
showLoader();
await http
.put(config.API.editRoundInsignia(id), formData)
.then(async () => {
await uploadDocData();
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
clickBack();
});
console.log(formData);
};
const checkSave = () => {
dialogConfirm($q,()=>SaveData())
}
const SaveData = async () => {
if (myForm.value !== null) {
myForm.value.validate().then(async (success) => {
if (success) {
if (edit.value) {
await editData(id.value);
} else {
await addData();
clickBack();
}
}
});
}
};
// const sendData = () => {
// const valueData: any = {
// Name: roundInsig.value,
// year: year.value,
// Amount: datelast.value,
// dateStart: dateStart.value !== null ? dateToISO(dateStart.value) : null,
// dateEnd: dateEnd.value !== null ? dateToISO(dateEnd.value) : null,
// };
// return valueData;
// };
const updateDateRange = () => {
// console.log("test")
if (roundCoin.value.value == 1) {
dateStart.value = new Date(new Date().getFullYear(), 9, 1);
dateEnd.value = new Date(new Date().getFullYear() + 1, 3, 29);
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(), 4, 29);
console.log(2)
}
};
const addData = async () => {
const formData = new FormData();
formData.append("name", roundCoin.value.label);
formData.append("year", parseInt(yearly.value).toString());
formData.append("amount", datelast.value.toString());
if (dateStart.value !== null) {
formData.append("startDate", dateToISO(dateStart.value));
}
if (dateEnd.value !== null) {
formData.append("endDate", dateToISO(dateEnd.value));
}
// formData.append("file", files.value[0]);
// console.log(formData);
formData.append("file", files.value);
showLoader();
await http
.post(config.API.listRoundInsignia("coin"), formData)
.then(async (res) => {})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
clickBack();
});
};
const clickBack = () => {
router.push({ name: "coinProposals" });
};
</script>

471
src/modules/09_coin/components/1_Proposals/listProposals.vue
View file

@ -1,471 +0,0 @@
<template>
<div class="toptitle text-dark col-12 row items-center">
รายการรอบการเสนอขอพระราชทานเหรียญจักรพรรดิมาลา
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row q-col-gutter-sm">
<div class="row col-12 q-col-gutter-sm">
<div>
<q-btn
@click="clickAdd()"
size="12px"
flat
round
color="add"
icon="mdi-plus"
>
<q-tooltip>เพิ่มรายการรอบการเสนอขอ</q-tooltip>
</q-btn>
</div>
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12">
<q-table
ref="table"
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="Order"
flat
bordered
:paging="true"
dense
class="custom-header-table"
v-bind="attrs"
:visible-columns="visibleColumns"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td key="round" :props="props" @click="clickEdit(props.row)">
{{ props.row.round }}
</q-td>
<q-td key="year" :props="props" @click="clickEdit(props.row)">
{{ props.row.year }}
</q-td>
<q-td
key="startDate"
:props="props"
@click="clickEdit(props.row)"
>
{{ props.row.startDate }}
</q-td>
<q-td key="endDate" :props="props" @click="clickEdit(props.row)">
{{ props.row.endDate }}
</q-td>
<q-td key="status" :props="props" @click="clickEdit(props.row)">
<q-icon
v-if="props.row.status == 'ยังไม่ได้เสนอ'"
name="mdi-close"
color="grey-5"
class="text-h5"
@click="clickEdit(props.row)"
/>
<q-icon
v-else
name="mdi-check"
color="positive"
class="text-h5"
@click="clickEdit(props.row)"
/>
</q-td>
<q-td key="statusRoyal" :props="props">
<q-icon
v-if="props.row.statusRoyal == 'ยังไม่ได้เสนอ'"
name="mdi-timer-sand"
color="orange"
class="text-h5"
@click="clickEdit(props.row)"
/>
<q-icon
v-else
name="mdi-check"
color="positive"
class="text-h5"
@click="clickEdit(props.row)"
/>
</q-td>
<q-td auto-width>
<q-btn
dense
size="12px"
flat
round
color="light-blue-8"
@click.stop.prevent="clickProposals(props.row.file)"
icon="mdi-file-download"
>
<q-tooltip>ดาวน์โหลดเอกสารประกอบ </q-tooltip>
</q-btn>
</q-td>
<q-td auto-width>
<q-btn
dense
size="12px"
flat
round
color="red"
@click="clickDelete(props.row.id)"
icon="mdi-delete"
>
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</div>
</div>
</q-card>
</template>
<script setup lang="ts">
import { ref, useAttrs, onMounted } from "vue";
import type { QTableProps } from "quasar";
import router from "@/router";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import type { FormProprsalsRound } from " @/modules/07_insignia/interface/request/Main.ts";
import { useRoute } from "vue-router";
import config from "@/app.config";
import http from "@/plugins/http";
const mixin = useCounterMixin();
const {
date2Thai,
success,
messageError,
statusLeave,
dialogMessage,
dateToISO,
showLoader,
hideLoader,
} = mixin;
const route = useRoute();
const $q = useQuasar(); //ใช้ noti quasar
const modal = ref<boolean>(false);
const pagination = ref({
sortBy: "desc",
descending: false,
page: 1,
rowsPerPage: 10,
});
const visibleColumns = ref<string[]>([
"round",
"year",
"startDate",
"endDate",
// "status",
"statusRoyal",
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
// หัวตาราง
const columns = ref<QTableProps["columns"]>([
{
name: "round",
align: "left",
label: "รอบการเสนอขอพระราชทานเหรียญจักรพรรดิมาลา",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "year",
align: "left",
label: "ปีที่เสนอ",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "startDate",
align: "left",
label: "วันที่เริ่มต้น",
sortable: true,
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "endDate",
align: "left",
label: "วันที่สิ้นสุด",
sortable: true,
field: "level",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "status",
align: "left",
label: "สถานะ",
sortable: true,
field: "institution",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
// ข้อมูลตาราง (จำลอง)
const rows = ref<FormProprsalsRound[]>([
{
round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
year: "2566",
startDate: "2566",
endDate: "31 พ.ค. 2566",
status: "เสนอเเล้ว",
},
{
round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
year: "2566",
startDate: "2566",
endDate: "31 พ.ค. 2566",
status: "เสนอเเล้ว",
},
{
round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
year: "2566",
startDate: "2566",
endDate: "31 พ.ค. 2566",
status: "เสนอเเล้ว",
},
{
round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
year: "2566",
startDate: "2566",
endDate: "31 พ.ค. 2566",
status: "ไม่ใช้งาน",
},
{
round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
year: "2566",
startDate: "2566",
endDate: "31 พ.ค. 2566",
status: "เสนอเเล้ว",
},
]);
onMounted(async () => {
await fetchData();
});
const fetchData = async () => {
rows.value = [];
showLoader();
await http
.get(config.API.listRoundInsignia("coin"))
.then((res) => {
const data = res.data.result;
console.log(data);
data.map((e: any) => {
rows.value.push({
id: e.period_id,
round: e.period_name,
year: e.period_year + 543,
amount: e.period_amount,
startDate:
e.period_start == null ? null : date2Thai(new Date(e.period_start)),
endDate:
e.period_end == null ? null : date2Thai(new Date(e.period_end)),
status: e.period_status,
file: e.period_doc,
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const clickEdit = (col: any) => {
router.push(`/coin/round-add/${col.id}`);
};
const clickProposals = (file: string) => {
if (file !== null) {
window.open(file);
}
};
// หัวตาราง2
const clickDelete = (id: string) => {
$q.dialog({
title: "ยืนยันการลบข้อมูล",
message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
})
.onOk(async () => {
showLoader();
await http
.delete(config.API.RoundInsignia(id))
.then((res) => {
success($q, "ลบข้อมูลการสอบสำเร็จ");
fetchData();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
})
.onCancel(() => {})
.onDismiss(() => {});
};
const clickAdd = () => {
router.push({ name: "coinRoundAdd" });
};
// ค้นหาในตาราง
const filterKeyword = ref<string>("");
const filterRef = ref<any>(null);
const resetFilter = () => {
filterKeyword.value = "";
filterRef.value.focus();
};
const filterKeyword2 = ref<string>("");
const filterRef2 = ref<any>(null);
const resetFilter2 = () => {
filterKeyword2.value = "";
filterRef2.value.focus();
};
const attrs = ref<any>(useAttrs());
const paging = ref<boolean>(true);
const paginationLabel = (start: string, end: string, total: string) => {
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
else return start + "-" + end + " ใน " + total;
};
</script>
<style lang="scss" scope>
.filter-card {
background-color: #f1f1f1b0;
}
.toggle-expired-account {
font-size: 12px;
font-weight: 400;
font-size: 15px;
line-height: 150%;
color: #35373c;
}
.icon-color {
color: #4154b3;
}
.custom-header-table {
max-height: 64vh;
.q-table tr:nth-child(odd) td {
background: white;
}
.q-table tr:nth-child(even) td {
background: #f8f8f8;
}
.q-table thead tr {
background: #ecebeb;
}
.q-table thead tr th {
position: sticky;
z-index: 1;
}
/* this will be the loading indicator */
.q-table thead tr:last-child th {
/* height of all previous header rows */
top: 48px;
}
.q-table thead tr:first-child th {
top: 0;
}
}
</style>

154
src/modules/09_coin/components/2_Manage/Main.vue
View file

@ -1,154 +0,0 @@
<script setup lang="ts">
import { ref } from "vue";
import { useCounterMixin } from "@/stores/mixin";
// import { useQuasar } from "quasar";
// import { useRouter } from "vue-router";
// import http from "@/plugins/http";
// import config from "@/app.config";
import cardTop from "@/modules/09_coin/components/2_Manage/StatCard.vue";
import tab1 from "@/modules/09_coin/components/2_Manage/Tab1.vue";
import tab2 from "@/modules/09_coin/components/2_Manage/Tab2.vue";
import tab3 from "@/modules/09_coin/components/2_Manage/Tab3.vue";
import tab4 from "@/modules/09_coin/components/2_Manage/Tab4.vue";
const mixin = useCounterMixin();
const {} = mixin;
const round = ref<string>("รอบการเสนอพระราชทานเหรียญจักรพรรดิมาลาปี 2557");
const optionRound = [
"รอบการเสนอพระราชทานเหรียญจักรพรรดิมาลาปี 2557",
"รอบการเสนอพระราชทานเหรียญจักรพรรดิมาลาปี 2558",
"รอบการเสนอพระราชทานเหรียญจักรพรรดิมาลาปี 2556",
];
const tab = ref<any>("haveInsignia");
const stat = ref<any>({
total: 0,
sendName: 0,
nonSend: 0,
personSend: 0,
disclaim: 0,
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
รายชื่อข้าราชการสามัญฯ ที่มีสิทธิ์ยื่นขอพระราชทานเหรียญจักรพรรดิมาลาของเขต
</div>
<q-card bordered class="row col-12 q-mt-sm">
<div class="bg-grey-2 col-12 row items-center">
<div class="q-pl-sm q-mr-md text-weight-bold text-grey">รอบ</div>
<q-select borderless v-model="round" :options="optionRound" />
</div>
<div class="col-12 row bg-white">
<div class="fit q-px-md q-py-sm">
<div class="row col-12 q-col-gutter-md fit">
<cardTop
:amount="stat.total"
label="หน่วยงานทั้งหมด"
color="#016987"
/>
<cardTop
:amount="stat.sendName"
label="หน่วยงานที่ส่งรายชื่อเเล้ว"
color="#02A998"
/>
<cardTop
:amount="stat.nonSend"
label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ"
color="#2EA0FF"
/>
<cardTop
:amount="stat.personSend"
label="จำนวนคนที่ยื่นขอ"
color="#4154B3"
/>
</div>
</div>
</div>
</q-card>
<q-card flat bordered class="col-12 q-mt-sm">
<div class="row col-12">
<q-tabs
v-model="tab"
dense
class="text-grey"
active-color="primary"
active-class="bg-teal-1"
indicator-color="primary"
align="left"
>
<q-tab name="haveInsignia" label="ผู้ที่ได้รับพระราชทานเหรียญจักรพรรดิมาลา" />
<q-tab name="personNotapply" label="คนที่ไม่ยื่นขอ" />
<q-tab name="personRemoved" label="คนที่ถูกลบออก" />
<q-tab name="nonInsignia" label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ" />
</q-tabs>
</div>
<q-separator />
<q-tab-panels v-model="tab" animated>
<q-tab-panel name="haveInsignia">
<tab1 />
</q-tab-panel>
<q-tab-panel name="personNotapply">
<tab2 />
</q-tab-panel>
<q-tab-panel name="personRemoved">
<tab3 />
</q-tab-panel>
<q-tab-panel name="nonInsignia">
<tab4 />
</q-tab-panel>
</q-tab-panels>
</q-card>
</template>
<style lang="scss" scope>
.filter-card {
background-color: #f1f1f1b0;
}
.toggle-expired-account {
font-size: 12px;
font-weight: 400;
font-size: 15px;
line-height: 150%;
color: #35373c;
}
.icon-color {
color: #4154b3;
}
.custom-header-table {
max-height: 64vh;
.q-table tr:nth-child(odd) td {
background: white;
}
.q-table tr:nth-child(even) td {
background: #f8f8f8;
}
.q-table thead tr {
background: #ecebeb;
}
.q-table thead tr th {
position: sticky;
z-index: 1;
}
/* this will be the loading indicator */
.q-table thead tr:last-child th {
/* height of all previous header rows */
top: 48px;
}
.q-table thead tr:first-child th {
top: 0;
}
}
</style>

43
src/modules/09_coin/components/2_Manage/StatCard.vue
View file

@ -1,43 +0,0 @@
<script setup lang="ts">
const sizeCard = (val: number) => {
if (val === 5) {
return "width:15%;";
}
};
const props = defineProps({
color: {
type: String,
default: "",
},
label: {
type: String,
default: "",
},
amount: {
type: Number,
default: 0,
},
});
</script>
<template>
<div
:style="$q.screen.lt.md ? '' : sizeCard(5)"
:class="$q.screen.lt.sm ? 'col-4' : ''"
>
<div
class="q-card q-card--bordered q-card--flat no-shadow row fit cardNum items-center q-px-sm"
>
<div class="col-12 row items-center q-pa-sm">
<div
class="col-12 text-h5 text-weight-bold"
:style="{ color: props.color }"
>
{{ props.amount }}
</div>
<div class="col-12 text-dark ellipsis">
{{ props.label }}
</div>
</div>
</div>
</div>
</template>

465
src/modules/09_coin/components/2_Manage/Tab1.vue
View file

@ -1,465 +0,0 @@
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import type { QTableProps } from "quasar";
const mixin = useCounterMixin();
const { dialogRemove, dialogConfirm } = mixin;
const $q = useQuasar();
const modalNote = ref<boolean>(false);
const organization = ref<number>(1);
const organizationOptions = ref<any>([{ id: 1, name: "ทั้งหมด" }]);
const visibleColumns = ref<string[]>([
"no",
"citizenId",
"name",
"position",
"level",
"salary",
"organization",
"insigniaType",
"insigniaSend",
"insigniaLevel",
"dateSend",
]);
// หัวตาราง
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "citizenId",
align: "left",
label: "เลขบัตรประชาชน",
sortable: true,
field: "citizenId",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "name",
align: "left",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "position",
align: "left",
label: "ตำแหน่ง",
sortable: true,
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "level",
align: "left",
label: "อันดับ/ระดับ",
sortable: true,
field: "level",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "salary",
align: "left",
label: "เงินเดือน",
sortable: true,
field: "salary",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "organization",
align: "left",
label: "หน่วยงาน",
sortable: true,
field: "organization",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "insigniaType",
align: "left",
label: "ประเภทเครื่องราชฯ ปัจจุบัน",
sortable: true,
field: "insigniaType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "insigniaSend",
align: "left",
label: "ประเภทเครื่องราชฯ ที่ยื่นขอ",
sortable: true,
field: "insigniaSend",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "insigniaLevel",
align: "left",
label: "ชั้นเครื่องราชฯ",
sortable: true,
field: "insigniaLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "dateSend",
align: "left",
label: "วันที่ยื่นขอ",
sortable: true,
field: "dateSend",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
// ข้อมูลตาราง (จำลอง)
const rows = ref<any[]>([
{
no: "1",
citizenId: "1xxxxxxxxxx",
name: "นายใจดี ยอดใจ ",
position: "นักวิชาการพัสดุ",
level: "1",
salary: "15000",
organization: "บริหาร",
insigniaType: "ทวีติยาภรณ์ช้างเผือก",
insigniaSend: "ตริตาภรณ์ช้างเผือก",
insigniaLevel: "ต่ำกว่าสายสะพาย",
dateSend: "31 ม.ค. 2566",
},
{
no: "2",
citizenId: "1xxxxxxxxxx",
name: "นายจักกริน บัณฑิต",
position: "นักวิชาการพัสดุ",
level: "ปฏิบัติการ",
salary: "15000",
organization: "บริหาร",
insigniaType: "ทวีติยาภรณ์ช้างเผือก",
insigniaSend: "ตริตาภรณ์ช้างเผือก",
insigniaLevel: "ต่ำกว่าสายสะพาย",
dateSend: "31 ม.ค. 2566",
},
{
no: "3",
citizenId: "1xxxxxxxxxx",
name: "นางสาวกัณฐิมา กาฬสินธุ์",
position: "นักจัดการงานทั่วไป",
level: "ปฏิบัติการ",
salary: "15000",
organization: "บริหาร",
insigniaType: "ทวีติยาภรณ์ช้างเผือก",
insigniaSend: "ตริตาภรณ์ช้างเผือก",
insigniaLevel: "ต่ำกว่าสายสะพาย",
dateSend: "31 ม.ค. 2566",
},
{
no: "4",
citizenId: "1xxxxxxxxxx",
name: "นางสาวเมขลา กระจ่างมนตรี",
position: "นักจัดการงานทั่วไป",
level: "ปฏิบัติการ",
salary: "15000",
organization: "บริหาร",
insigniaType: "ทวีติยาภรณ์ช้างเผือก",
insigniaSend: "ตริตาภรณ์ช้างเผือก",
insigniaLevel: "ต่ำกว่าสายสะพาย",
dateSend: "31 ม.ค. 2566",
},
]);
const Note = ref<string>("");
const titleModal = ref<string>("");
const actionModal = ref<string>("");
const person = ref<any>([]);
const clickAction = (props: any, action: string) => {
Note.value = "";
person.value = props;
titleModal.value = props.name;
actionModal.value = action;
modalNote.value = true;
};
const clickDelete = () => {
dialogRemove($q);
console.log(person.value, Note.value);
};
const clickSavenote = () => {
dialogConfirm($q);
console.log(person.value);
};
const filterKeyword = ref<string>("");
const filterRef = ref<any>(null);
const resetFilter = () => {
filterKeyword.value = "";
filterRef.value.focus();
};
const pagination = ref({
sortBy: "desc",
descending: false,
page: 1,
rowsPerPage: 10,
});
const paging = ref<boolean>(true);
const paginationLabel = (start: string, end: string, total: string) => {
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
else return start + "-" + end + " ใน " + total;
};
</script>
<template>
<div class="col-12 row q-pa-md">
<div class="row col-12">
<div class="row col-12 q-col-gutter-sm">
<q-select
v-model="organization"
label="หน่วยงาน"
dense
emit-value
map-options
:options="organizationOptions"
option-value="id"
option-label="name"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
style="min-width: 150px"
/>
<div>
<q-btn size="md" icon="mdi-download" flat round color="primary">
<q-tooltip>ดาวน์โหลด</q-tooltip>
</q-btn>
<q-btn size="12px" flat round color="add" icon="mdi-plus">
<q-tooltip>เพิ่ม</q-tooltip>
</q-btn>
</div>
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12 q-pt-sm">
<q-table
ref="table"
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="name"
flat
bordered
:paging="true"
dense
class="custom-header-table"
:visible-columns="visibleColumns"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
</q-td>
<q-td key="citizenId" :props="props">
{{ props.row.citizenId }}
</q-td>
<q-td key="name" :props="props">
{{ props.row.name }}
</q-td>
<q-td key="position" :props="props">
{{ props.row.position }}
</q-td>
<q-td key="level" :props="props">
{{ props.row.level }}
</q-td>
<q-td key="salary" :props="props">
{{ props.row.salary }}
</q-td>
<q-td key="organization" :props="props">
{{ props.row.organization }}
</q-td>
<q-td key="insigniaType" :props="props">
{{ props.row.insigniaType }}
</q-td>
<q-td key="insigniaSend" :props="props">
{{ props.row.insigniaSend }}
</q-td>
<q-td key="insigniaLevel" :props="props">
{{ props.row.insigniaLevel }}
</q-td>
<q-td key="dateSend" :props="props">
{{ props.row.dateSend }}
</q-td>
<q-td auto-width>
<q-btn
icon="mdi-dots-vertical"
size="12px"
color="grey-7"
flat
round
dense
>
<q-menu transition-show="jump-down" transition-hide="jump-up">
<q-list dense style="min-width: 120px">
<q-item
clickable
v-close-popup
@click="clickAction(props.row, 'note')"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-tooltip>ไม่ยื่นขอ</q-tooltip>
<q-icon
color="blue"
size="xs"
name="mdi-alert-circle-outline"
/>
</q-item-section>
<q-item-section>ไม่ยื่นขอ</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
@click="clickAction(props.row, 'delete')"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-tooltip>ลบออก</q-tooltip>
<q-icon color="red" size="xs" name="mdi-delete" />
</q-item-section>
<q-item-section>ลบออก</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="primary"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</div>
</div>
</div>
<q-dialog v-model="modalNote" persistent>
<q-card style="min-width: 350px">
<q-toolbar>
<q-toolbar-title class="text-subtitle2 text-bold">
<div v-if="actionModal == 'note'">หมายเหตุ {{ titleModal }}</div>
<div v-if="actionModal == 'delete'">ลบออก {{ titleModal }}</div>
</q-toolbar-title>
<q-btn
icon="close"
unelevated
round
dense
@click="modalNote = false"
style="color: #ff8080; background-color: #ffdede"
/> </q-toolbar
><q-separator />
<q-card-section class="q-pt-none"></q-card-section>
<q-card-section class="q-pt-none">
<q-input
dense
outlined
type="textarea"
label="กรอกหมายเหตุ"
v-model="Note"
@keyup.enter="modalNote = false"
:rules="[(val) => !!val || 'กรอกหมายเหตุ']"
/>
</q-card-section>
<q-card-actions align="right" class="bg-white text-teal">
<q-btn
v-if="actionModal == 'note'"
label="บันทึก"
@click="clickSavenote"
color="public"
:disable="Note === ''"
/>
<q-btn
v-if="actionModal == 'delete'"
label="บันทึก"
@click="clickDelete"
color="public"
:disable="Note === ''"
/>
</q-card-actions>
</q-card>
</q-dialog>
</template>

340
src/modules/09_coin/components/2_Manage/Tab2.vue
View file

@ -1,340 +0,0 @@
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import type { QTableProps } from "quasar";
const organization = ref<number>(1);
const organizationOptions = ref<any>([{ id: 1, name: "ทั้งหมด" }]);
const visibleColumns = ref<string[]>([
"no",
"citizenId",
"name",
"position",
"level",
"salary",
"organization",
"insigniaType",
"insigniaSend",
"insigniaLevel",
]);
// หัวตาราง
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "citizenId",
align: "left",
label: "เลขบัตรประชาชน",
sortable: true,
field: "citizenId",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "name",
align: "left",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "position",
align: "left",
label: "ตำแหน่ง",
sortable: true,
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "level",
align: "left",
label: "อันดับ/ระดับ",
sortable: true,
field: "level",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "salary",
align: "left",
label: "เงินเดือน",
sortable: true,
field: "salary",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "organization",
align: "left",
label: "หน่วยงาน",
sortable: true,
field: "organization",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "insigniaType",
align: "left",
label: "ประเภทเครื่องราชฯ ปัจจุบัน",
sortable: true,
field: "insigniaType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "insigniaSend",
align: "left",
label: "ประเภทเครื่องราชฯ ที่ยื่นขอ",
sortable: true,
field: "insigniaSend",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "insigniaLevel",
align: "left",
label: "ชั้นเครื่องราชฯ",
sortable: true,
field: "insigniaLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "dateSend",
align: "left",
label: "วันที่ยื่นขอ",
sortable: true,
field: "dateSend",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
// ข้อมูลตาราง (จำลอง)
const rows = ref<any[]>([
{
no: "1",
citizenId: "1xxxxxxxxxx",
name: "นายใจดี ยอดใจ ",
position: "นักวิชาการพัสดุ",
level: "1",
salary: "15000",
organization: "บริหาร",
insigniaType: "ทวีติยาภรณ์ช้างเผือก",
insigniaSend: "ตริตาภรณ์ช้างเผือก",
insigniaLevel: "ต่ำกว่าสายสะพาย",
dateSend: "31 ม.ค. 2566",
},
{
no: "2",
citizenId: "1xxxxxxxxxx",
name: "นายจักกริน บัณฑิต",
position: "นักวิชาการพัสดุ",
level: "ปฏิบัติการ",
salary: "15000",
organization: "บริหาร",
insigniaType: "ทวีติยาภรณ์ช้างเผือก",
insigniaSend: "ตริตาภรณ์ช้างเผือก",
insigniaLevel: "ต่ำกว่าสายสะพาย",
dateSend: "31 ม.ค. 2566",
},
{
no: "3",
citizenId: "1xxxxxxxxxx",
name: "นางสาวกัณฐิมา กาฬสินธุ์",
position: "นักจัดการงานทั่วไป",
level: "ปฏิบัติการ",
salary: "15000",
organization: "บริหาร",
insigniaType: "ทวีติยาภรณ์ช้างเผือก",
insigniaSend: "ตริตาภรณ์ช้างเผือก",
insigniaLevel: "ต่ำกว่าสายสะพาย",
dateSend: "31 ม.ค. 2566",
},
{
no: "4",
citizenId: "1xxxxxxxxxx",
name: "นางสาวเมขลา กระจ่างมนตรี",
position: "นักจัดการงานทั่วไป",
level: "ปฏิบัติการ",
salary: "15000",
organization: "บริหาร",
insigniaType: "ทวีติยาภรณ์ช้างเผือก",
insigniaSend: "ตริตาภรณ์ช้างเผือก",
insigniaLevel: "ต่ำกว่าสายสะพาย",
dateSend: "31 ม.ค. 2566",
},
]);
const filterKeyword = ref<string>("");
const filterRef = ref<any>(null);
const resetFilter = () => {
filterKeyword.value = "";
filterRef.value.focus();
};
const pagination = ref({
sortBy: "desc",
descending: false,
page: 1,
rowsPerPage: 10,
});
const paging = ref<boolean>(true);
const paginationLabel = (start: string, end: string, total: string) => {
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
else return start + "-" + end + " ใน " + total;
};
</script>
<template>
<div class="col-12 row q-pa-md">
<div class="row col-12">
<div class="row col-12 q-col-gutter-sm">
<q-select
v-model="organization"
label="หน่วยงาน"
dense
emit-value
map-options
:options="organizationOptions"
option-value="id"
option-label="name"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
style="min-width: 150px"
/>
<!-- <div>
<q-btn size="md" icon="mdi-download" flat round color="primary">
<q-tooltip>ดาวน์โหลด</q-tooltip>
</q-btn>
<q-btn size="12px" flat round color="add" icon="mdi-plus">
<q-tooltip>เพิ่ม</q-tooltip>
</q-btn>
</div> -->
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12 q-pt-sm">
<q-table
ref="table"
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="name"
flat
bordered
:paging="true"
dense
class="custom-header-table"
:visible-columns="visibleColumns"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr
:props="props"
class="cursor-pointer"
@click="nextPage(props.row)"
>
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
</q-td>
<q-td key="citizenId" :props="props">
{{ props.row.citizenId }}
</q-td>
<q-td key="name" :props="props">
{{ props.row.name }}
</q-td>
<q-td key="position" :props="props">
{{ props.row.position }}
</q-td>
<q-td key="level" :props="props">
{{ props.row.level }}
</q-td>
<q-td key="salary" :props="props">
{{ props.row.salary }}
</q-td>
<q-td key="organization" :props="props">
{{ props.row.organization }}
</q-td>
<q-td key="insigniaType" :props="props">
{{ props.row.insigniaType }}
</q-td>
<q-td key="insigniaSend" :props="props">
{{ props.row.insigniaSend }}
</q-td>
<q-td key="insigniaLevel" :props="props">
{{ props.row.insigniaLevel }}
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="primary"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</div>
</div>
</div>
</template>

339
src/modules/09_coin/components/2_Manage/Tab3.vue
View file

@ -1,339 +0,0 @@
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
const organization = ref<string>(1);
const organizationOptions = ref<any>([{ id: 1, name: "ทั้งหมด" }]);
const visibleColumns = ref<string[]>([
"no",
"citizenId",
"name",
"position",
"level",
"salary",
"organization",
"insigniaType",
"insigniaSend",
"insigniaLevel",
]);
// หัวตาราง
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "citizenId",
align: "left",
label: "เลขบัตรประชาชน",
sortable: true,
field: "citizenId",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "name",
align: "left",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "position",
align: "left",
label: "ตำแหน่ง",
sortable: true,
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "level",
align: "left",
label: "อันดับ/ระดับ",
sortable: true,
field: "level",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "salary",
align: "left",
label: "เงินเดือน",
sortable: true,
field: "salary",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "organization",
align: "left",
label: "หน่วยงาน",
sortable: true,
field: "organization",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "insigniaType",
align: "left",
label: "ประเภทเครื่องราชฯ ปัจจุบัน",
sortable: true,
field: "insigniaType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "insigniaSend",
align: "left",
label: "ประเภทเครื่องราชฯ ที่ยื่นขอ",
sortable: true,
field: "insigniaSend",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "insigniaLevel",
align: "left",
label: "ชั้นเครื่องราชฯ",
sortable: true,
field: "insigniaLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "dateSend",
align: "left",
label: "วันที่ยื่นขอ",
sortable: true,
field: "dateSend",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
// ข้อมูลตาราง (จำลอง)
const rows = ref<any[]>([
{
no: "1",
citizenId: "1xxxxxxxxxx",
name: "นายใจดี ยอดใจ ",
position: "นักวิชาการพัสดุ",
level: "1",
salary: "15000",
organization: "บริหาร",
insigniaType: "ทวีติยาภรณ์ช้างเผือก",
insigniaSend: "ตริตาภรณ์ช้างเผือก",
insigniaLevel: "ต่ำกว่าสายสะพาย",
dateSend: "31 ม.ค. 2566",
},
{
no: "2",
citizenId: "1xxxxxxxxxx",
name: "นายจักกริน บัณฑิต",
position: "นักวิชาการพัสดุ",
level: "ปฏิบัติการ",
salary: "15000",
organization: "บริหาร",
insigniaType: "ทวีติยาภรณ์ช้างเผือก",
insigniaSend: "ตริตาภรณ์ช้างเผือก",
insigniaLevel: "ต่ำกว่าสายสะพาย",
dateSend: "31 ม.ค. 2566",
},
{
no: "3",
citizenId: "1xxxxxxxxxx",
name: "นางสาวกัณฐิมา กาฬสินธุ์",
position: "นักจัดการงานทั่วไป",
level: "ปฏิบัติการ",
salary: "15000",
organization: "บริหาร",
insigniaType: "ทวีติยาภรณ์ช้างเผือก",
insigniaSend: "ตริตาภรณ์ช้างเผือก",
insigniaLevel: "ต่ำกว่าสายสะพาย",
dateSend: "31 ม.ค. 2566",
},
{
no: "4",
citizenId: "1xxxxxxxxxx",
name: "นางสาวเมขลา กระจ่างมนตรี",
position: "นักจัดการงานทั่วไป",
level: "ปฏิบัติการ",
salary: "15000",
organization: "บริหาร",
insigniaType: "ทวีติยาภรณ์ช้างเผือก",
insigniaSend: "ตริตาภรณ์ช้างเผือก",
insigniaLevel: "ต่ำกว่าสายสะพาย",
dateSend: "31 ม.ค. 2566",
},
]);
const filterKeyword = ref<string>("");
const filterRef = ref<any>(null);
const resetFilter = () => {
filterKeyword.value = "";
filterRef.value.focus();
};
const pagination = ref({
sortBy: "desc",
descending: false,
page: 1,
rowsPerPage: 10,
});
const paging = ref<boolean>(true);
const paginationLabel = (start: string, end: string, total: string) => {
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
else return start + "-" + end + " ใน " + total;
};
</script>
<template>
<div class="col-12 row q-pa-md">
<div class="row col-12">
<div class="row col-12 q-col-gutter-sm">
<q-select
v-model="organization"
label="หน่วยงาน"
dense
emit-value
map-options
:options="organizationOptions"
option-value="id"
option-label="name"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
style="min-width: 150px"
/>
<!-- <div>
<q-btn size="md" icon="mdi-download" flat round color="primary">
<q-tooltip>ดาวน์โหลด</q-tooltip>
</q-btn>
<q-btn size="12px" flat round color="add" icon="mdi-plus">
<q-tooltip>เพิ่ม</q-tooltip>
</q-btn>
</div> -->
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12 q-pt-sm">
<q-table
ref="table"
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="name"
flat
bordered
:paging="true"
dense
class="custom-header-table"
:visible-columns="visibleColumns"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr
:props="props"
class="cursor-pointer"
@click="nextPage(props.row)"
>
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
</q-td>
<q-td key="citizenId" :props="props">
{{ props.row.citizenId }}
</q-td>
<q-td key="name" :props="props">
{{ props.row.name }}
</q-td>
<q-td key="position" :props="props">
{{ props.row.position }}
</q-td>
<q-td key="level" :props="props">
{{ props.row.level }}
</q-td>
<q-td key="salary" :props="props">
{{ props.row.salary }}
</q-td>
<q-td key="organization" :props="props">
{{ props.row.organization }}
</q-td>
<q-td key="insigniaType" :props="props">
{{ props.row.insigniaType }}
</q-td>
<q-td key="insigniaSend" :props="props">
{{ props.row.insigniaSend }}
</q-td>
<q-td key="insigniaLevel" :props="props">
{{ props.row.insigniaLevel }}
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="primary"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</div>
</div>
</div>
</template>

315
src/modules/09_coin/components/2_Manage/Tab4.vue
View file

@ -1,315 +0,0 @@
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
const organization = ref<string>(1);
const organizationOptions = ref<any>([{ id: 1, name: "ทั้งหมด" }]);
const visibleColumns = ref<string[]>([
"no",
// "citizenId",
// "name",
// "position",
// "level",
// "salary",
"organization",
// "insigniaType",
// "insigniaSend",
// "insigniaLevel",
// "dateSend",
]);
// หัวตาราง
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
width: "0px",
},
// {
// name: "citizenId",
// align: "left",
// label: "เลขบัตรประชาชน",
// sortable: true,
// field: "citizenId",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// },
// {
// name: "name",
// align: "left",
// label: "ชื่อ-นามสกุล",
// sortable: true,
// field: "name",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// },
// {
// name: "position",
// align: "left",
// label: "ตำแหน่ง",
// sortable: true,
// field: "position",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// },
// {
// name: "level",
// align: "left",
// label: "อันดับ/ระดับ",
// sortable: true,
// field: "level",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// },
// {
// name: "salary",
// align: "left",
// label: "เงินเดือน",
// sortable: true,
// field: "salary",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// },
{
name: "organization",
align: "left",
label: "หน่วยงาน",
sortable: true,
field: "organization",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
width: "100px",
},
// {
// name: "insigniaType",
// align: "left",
// label: "ประเภทเครื่องราชฯ ปัจจุบัน",
// sortable: true,
// field: "insigniaType",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// },
// {
// name: "insigniaSend",
// align: "left",
// label: "ประเภทเครื่องราชฯ ที่ยื่นขอ",
// sortable: true,
// field: "insigniaSend",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// },
// {
// name: "insigniaLevel",
// align: "left",
// label: "ชั้นเครื่องราชฯ",
// sortable: true,
// field: "insigniaLevel",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// },
// {
// name: "dateSend",
// align: "left",
// label: "วันที่ยื่นขอ",
// sortable: true,
// field: "dateSend",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// },
]);
// ข้อมูลตาราง (จำลอง)
const rows = ref<any[]>([
{
no: "1",
citizenId: "1xxxxxxxxxx",
name: "นายใจดี ยอดใจ ",
position: "นักวิชาการพัสดุ",
level: "1",
salary: "15000",
organization: "บริหาร",
insigniaType: "ทวีติยาภรณ์ช้างเผือก",
insigniaSend: "ตริตาภรณ์ช้างเผือก",
insigniaLevel: "ต่ำกว่าสายสะพาย",
dateSend: "31 ม.ค. 2566",
},
{
no: "2",
citizenId: "1xxxxxxxxxx",
name: "นายจักกริน บัณฑิต",
position: "นักวิชาการพัสดุ",
level: "ปฏิบัติการ",
salary: "15000",
organization: "บริหาร",
insigniaType: "ทวีติยาภรณ์ช้างเผือก",
insigniaSend: "ตริตาภรณ์ช้างเผือก",
insigniaLevel: "ต่ำกว่าสายสะพาย",
dateSend: "31 ม.ค. 2566",
},
{
no: "3",
citizenId: "1xxxxxxxxxx",
name: "นางสาวกัณฐิมา กาฬสินธุ์",
position: "นักจัดการงานทั่วไป",
level: "ปฏิบัติการ",
salary: "15000",
organization: "บริหาร",
insigniaType: "ทวีติยาภรณ์ช้างเผือก",
insigniaSend: "ตริตาภรณ์ช้างเผือก",
insigniaLevel: "ต่ำกว่าสายสะพาย",
dateSend: "31 ม.ค. 2566",
},
{
no: "4",
citizenId: "1xxxxxxxxxx",
name: "นางสาวเมขลา กระจ่างมนตรี",
position: "นักจัดการงานทั่วไป",
level: "ปฏิบัติการ",
salary: "15000",
organization: "บริหาร",
insigniaType: "ทวีติยาภรณ์ช้างเผือก",
insigniaSend: "ตริตาภรณ์ช้างเผือก",
insigniaLevel: "ต่ำกว่าสายสะพาย",
dateSend: "31 ม.ค. 2566",
},
]);
const filterKeyword = ref<string>("");
const filterRef = ref<any>(null);
const resetFilter = () => {
filterKeyword.value = "";
filterRef.value.focus();
};
const pagination = ref({
sortBy: "desc",
descending: false,
page: 1,
rowsPerPage: 10,
});
const paging = ref<boolean>(true);
const paginationLabel = (start: string, end: string, total: string) => {
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
else return start + "-" + end + " ใน " + total;
};
</script>
<template>
<div class="col-12 row q-pa-md">
<div class="row col-12">
<!-- <div class="row col-12 q-col-gutter-sm">
<q-select
v-model="organization"
label="หน่วยงาน"
dense
emit-value
map-options
:options="organizationOptions"
option-value="id"
option-label="name"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
style="min-width: 150px"
/>
<div>
<q-btn size="md" icon="mdi-download" flat round color="primary">
<q-tooltip>ดาวน์โหลด</q-tooltip>
</q-btn>
<q-btn size="12px" flat round color="add" icon="mdi-plus">
<q-tooltip>เพิ่ม</q-tooltip>
</q-btn>
</div>
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2"
/>
</div> -->
<div class="col-12 q-pt-sm">
<q-table
ref="table"
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="name"
flat
bordered
:paging="true"
class="custom-header-table"
:visible-columns="visibleColumns"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<!-- <q-th auto-width />
<q-th auto-width /> -->
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td key="no" style="width: 50px" :props="props">
{{ props.rowIndex + 1 }}
</q-td>
<q-td key="organization" style="width: 300px" :props="props">
{{ props.row.organization }}
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="primary"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</div>
</div>
</div>
</template>

495
src/modules/09_coin/components/3_Receive/Main.vue
View file

@ -1,495 +0,0 @@
<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">
<q-tabs
v-model="tab"
align="left"
class="bg-white text-grey"
active-color="primary"
indicator-color="primary"
>
<q-tab name="hight" label="ขั้นสายสะพาน" />
<q-tab name="low" label="ขั้นต่ำกว่าสายสะพาน" />
</q-tabs>
<q-separator />
<div class="q-py-md q-px-lg">
<!-- <div>
<label class="q-mr-sm">รอบ</label>
<q-btn
flat
round
de
color="grey"
icon="mdi-menu-left"
:class="getArrow(arrow)"
@click="clickRound"
/>
</div> -->
<!-- <Transition>
<div v-if="arrow" class="bg-base rounded-borders q-pa-md">
<div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
<div class="col-xs-6 col-md-2">
<q-input
class="bg-white"
outlined
dense
lazy-rules
v-model="issue"
:label="`${'ฉบับ'}`"
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-md-2">
<q-input
class="bg-white"
outlined
dense
lazy-rules
v-model="book"
:label="`${'เล่มที่'}`"
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-md-2">
<q-input
class="bg-white"
outlined
dense
lazy-rules
v-model="volume"
:label="`${'เล่ม'}`"
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-md-2">
<q-input
class="bg-white"
outlined
dense
lazy-rules
v-model="section"
:label="`${'ตอนที่'}`"
hide-bottom-space
/>
</div>
<div class="col-xs-12 col-md-6">
<q-file
class="bg-white"
outlined
dense
v-model="government"
label="ราชกิจจานุเบกษา"
hide-bottom-space
lazy-rules
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-xs-12 col-md-6">
<q-file
class="bg-white"
outlined
dense
v-model="document"
label="เอกสารประกอบ"
hide-bottom-space
lazy-rules
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-xs-6 col-md-2">
<datepicker
menu-class-name="modalfix"
v-model="dateGoverment"
: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
outlined
dense
class="full-width datepicker bg-white"
:model-value="
dateGoverment != null ? date2Thai(dateGoverment) : null
"
:label="`${'วันที่ประกาศราชกิจจานุเบกษา'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-6 col-md-2">
<datepicker
menu-class-name="modalfix"
v-model="dateReceiver"
: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
outlined
dense
class="full-width datepicker bg-white"
:model-value="
dateReceiver != null ? date2Thai(dateReceiver) : null
"
:label="`${'วันที่ได้รับ'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-md-6 justify-end">
<q-btn label="บันทึก" @click="save" color="public" />
</div>
</div>
</div>
</Transition> -->
<div :class="marginTop(arrow)">
<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>
{{ props.value }}
</div>
</q-td>
</template>
</d-table>
</div>
</div>
</q-card>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
// import { useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import type { DataOption } from "@/modules/05_placement/interface/index/Main";
import type { QTableProps, QInput } from "quasar";
// const router = useRouter();
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const tab = ref<string>("hight");
const arrow = ref<boolean>(false);
const dateGoverment = ref<Date>(new Date());
const dateReceiver = ref<Date>(new Date());
const issue = ref<string>("");
const book = ref<string>("");
const volume = ref<string>("");
const section = ref<string>("");
const government = ref<any>(null);
const document = ref<any>(null);
const selectStatus = ref<string>("");
const selectStatusOption = ref<DataOption[]>([]);
const selectStatusOptionFilter = ref<DataOption[]>([]);
const selectType = ref<string>("");
const selectTypeOption = ref<DataOption[]>([]);
const selectTypeOptionFilter = ref<DataOption[]>([]);
const visibleColumns = ref<String[]>([
"no",
"status",
"name",
"type",
"page",
"number",
]);
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: "status",
align: "left",
label: "สถานะ",
field: "status",
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: "page",
align: "left",
label: "หน้าในราชกิจนุเบกษา",
field: "page",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "number",
align: "left",
label: "ลำดับที่ในราชกิจจานุเบกษา",
field: "number",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const rows = ref<any>([
{
no: "1",
status: "รอบันทึกข้อมูล",
name: "นางสาวรัชภรณ์ ภักดี",
type: "ทั้งหมด",
page: "8",
number: "11",
},
{
no: "2",
status: "บันทึกลง ก.พ. 7 แล้ว",
name: "นางสาวภาพรรณ ลออ",
type: "ทั้งหมด",
page: "12",
number: "11",
},
]);
onMounted(() => {
const op1: DataOption[] = [{ id: "1", name: "ทั้งหมด" }];
const op2: DataOption[] = [
{ id: "1", name: "ทั้งหมด" },
{ id: "2", name: "รอบันทึกข้อมูล" },
{ id: "3", name: "บันทึกลง ก.พ. 7 แล้ว" },
];
selectTypeOption.value = op1;
selectTypeOptionFilter.value = op1;
selectStatusOption.value = op2;
selectStatusOptionFilter.value = op2;
});
const clickRound = () => {
arrow.value = !arrow.value;
};
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: DataOption) => v.name!.indexOf(val) > -1
);
});
break;
case "selectStatusOption":
update(() => {
selectStatusOption.value = selectStatusOptionFilter.value.filter(
(v: DataOption) => v.name!.indexOf(val) > -1
);
});
break;
default:
break;
}
};
const getArrow = (val: boolean) => {
return {
"arrow cursor-pointer": !val,
"arrow-active cursor-pointer": val,
};
};
const marginTop = (val: boolean) => {
return {
"": !val,
"q-mt-md": val,
};
};
</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;
}
</style>

298
src/modules/09_coin/components/4_Payment/Main.vue
View file

@ -1,298 +0,0 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import type { QTableProps, QInput } from "quasar";
const zone = ref<string>("");
const zoneOptions = ref<any>([
"ทั้งหมด",
"เขตที่ 1 ",
"เขตที่ 2 ",
"เขตที่ 3 ",
]);
const belong = ref<string>("");
const belongOptions = ref<any>([
"ทั้งหมด",
"สังกัด 1 ",
"สังกัด 2 ",
"สังกัด 3 ",
]);
const spand = ref<string>("");
const spandOptions = ref<any>([
"ทั้งหมด",
"สถานะการจ่าย 1 ",
"สถานะการจ่าย 2 ",
"สถานะการจ่าย 3 ",
]);
const filter = ref<string>("");
const visibleColumns = ref<String[]>([
"no",
"citizenId",
"name",
"affiliation",
"affiliationcurrent",
"county",
"countycurren",
]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "citizenId",
align: "left",
label: "เลขบัตรประชาชน",
sortable: true,
field: "citizenId",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "name",
align: "left",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "affiliation",
align: "left",
label: "สังกัด ณ วันที่ขอ",
sortable: true,
field: "affiliation",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "affiliationcurrent",
align: "left",
label: "สังกัด ณ ปัจจุบัน",
sortable: true,
field: "affiliationcurrent",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "county",
align: "left",
label: "สังกัดงานเขต ณ วันที่ขอ",
sortable: true,
field: "county",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "countycurren",
align: "left",
label: "สังกัดงานเขต ณ ปัจจุบัน",
sortable: true,
field: "countycurren",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const rows = ref<any>([
{
no: "1",
citizenId: "1xxxxxxxxxx",
name: "นายใจดี ยอดใจ ",
affiliation: "นักวิชาการพัสดุ",
affiliationcurrent: "ปฏิบัติการ",
county: "ปฏิบัติการ",
countycurren: "บริหาร",
},
{
no: "2",
citizenId: "1xxxxxxxxxx",
name: "นายจักกริน บัณฑิต",
affiliation: "นักวิชาการพัสดุ",
affiliationcurrent: "ปฏิบัติการ",
county: "ปฏิบัติการ",
countycurren: "บริหาร",
},
]);
onMounted(() => {
zone.value = "ทั้งหมด";
belong.value = "ทั้งหมด";
spand.value = "ทั้งหมด";
});
const pagination = ref({
sortBy: "desc",
descending: false,
page: 1,
rowsPerPage: 10,
});
const paging = ref<boolean>(true);
const paginationLabel = (start: string, end: string, total: string) => {
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
else return start + "-" + end + " ใน " + total;
};
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
บันทึกผลการจ่ายใบกำกับ
</div>
<q-card class="col-12 q-pa-md">
<div class="row col-12 q-pb-sm q-gutter-xs">
<q-select
outlined
dense
v-model="zone"
:options="zoneOptions"
label="สำนักงานเขต"
class="col-xs-12 col-sm-3 col-md-2"
/>
<q-select
outlined
dense
v-model="belong"
:options="belongOptions"
label="สังกัด"
class="col-xs-12 col-sm-3 col-md-2"
/>
<q-select
outlined
dense
v-model="spand"
:options="spandOptions"
label="สถานะการจ่าย"
class="col-xs-12 col-sm-3 col-md-2"
/>
<q-btn
color="primary"
icon="mdi-filter-remove"
@click="zone = 'ทั้งหมด',belong = 'ทั้งหมด',spand = 'ทั้งหมด'"
/>
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
borderless
dense
v-model="filter"
outlined
debounce="300"
placeholder="ค้นหา"
/>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
class="gt-xs q-ml-sm"
>
</q-select>
</div>
<div>
<q-table
ref="table"
:columns="columns"
:rows="rows"
:filter="filter"
row-key="name"
flat
bordered
:paging="true"
dense
class="custom-header-table"
:visible-columns="visibleColumns"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
</q-td>
<q-td key="citizenId" :props="props">
{{ props.row.citizenId }}
</q-td>
<q-td key="name" :props="props">
{{ props.row.name }}
</q-td>
<q-td key="affiliation" :props="props">
{{ props.row.affiliation }}
</q-td>
<q-td key="affiliationcurrent" :props="props">
{{ props.row.affiliationcurrent }}
</q-td>
<q-td key="county" :props="props">
{{ props.row.county }}
</q-td>
<q-td key="countycurren" :props="props">
{{ props.row.countycurren }}
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="primary"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</div>
</q-card>
</template>
<style lang="scss" scoped>
.custom-header-table {
max-height: 64vh;
.q-table tr:nth-child(odd) td {
background: white;
}
.q-table tr:nth-child(even) td {
background: #f8f8f8;
}
.q-table thead tr {
background: #ecebeb;
}
.q-table thead tr th {
position: sticky;
z-index: 1;
}
.q-table thead tr:last-child th {
top: 48px;
}
.q-table thead tr:first-child th {
top: 0;
}
}
</style>

516
src/modules/09_coin/components/Coin.vue
View file

@ -1,516 +0,0 @@
<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">
<q-tabs
v-model="tab"
align="left"
class="bg-white text-grey"
active-color="primary"
indicator-color="primary"
>
<q-tab name="yes" label="คนที่ยื่นขอ" />
<q-tab name="no" label="คนที่ไม่ยื่นขอ" />
</q-tabs>
<q-separator />
<div class="q-py-md q-px-lg">
<!-- <div>
<label class="q-mr-sm">รอบ</label>
<q-btn
flat
round
de
color="grey"
icon="mdi-menu-left"
:class="getArrow(arrow)"
@click="clickRound"
/>
</div>
<Transition>
<div v-if="arrow" class="bg-base rounded-borders q-pa-md">
<div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
<div class="col-xs-6 col-md-2">
<datepicker
menu-class-name="modalfix"
v-model="dateGoverment"
: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
outlined
dense
class="full-width datepicker bg-white"
:model-value="
dateGoverment != null ? date2Thai(dateGoverment) : null
"
:label="`${'วันที่ประกาศราชกิจจานุเบกษา'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-6 col-md-2">
<datepicker
menu-class-name="modalfix"
v-model="dateReceiver"
: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
outlined
dense
class="full-width datepicker bg-white"
:model-value="
dateReceiver != null ? date2Thai(dateReceiver) : null
"
:label="`${'วันที่ได้รับ'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-6 col-md-2">
<q-input
class="bg-white"
outlined
dense
lazy-rules
v-model="issue"
:label="`${'ฉบับ'}`"
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-md-2">
<q-input
class="bg-white"
outlined
dense
lazy-rules
v-model="book"
:label="`${'เล่มที่'}`"
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-md-2">
<q-input
class="bg-white"
outlined
dense
lazy-rules
v-model="volume"
:label="`${'เล่ม'}`"
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-md-2">
<q-input
class="bg-white"
outlined
dense
lazy-rules
v-model="section"
:label="`${'ตอนที่'}`"
hide-bottom-space
/>
</div>
<div class="col-xs-12 col-md-6">
<q-file
class="bg-white"
outlined
dense
v-model="government"
label="ราชกิจจานุเบกษา"
hide-bottom-space
lazy-rules
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-xs-12 col-md-6">
<q-file
class="bg-white"
outlined
dense
v-model="document"
label="เอกสารประกอบ"
hide-bottom-space
lazy-rules
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
</div>
</div>
</Transition> -->
<div :class="marginTop(arrow)">
<div class="col-12 row q-pb-sm items-center">
<selector
outlined
dense
lazy-rules
v-model="capYears"
hide-bottom-space
:label="`${'ปีงบประมาณ'}`"
emit-value
map-options
option-label="name"
:options="capYearsOption"
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,'capYearsOption'
) "
/>
<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>
{{ props.value }}
</div>
</q-td>
</template>
</d-table>
</div>
</div>
</q-card>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
// import { useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import type { DataOption } from "@/modules/05_placement/interface/index/Main";
import type { QTableProps, QInput } from "quasar";
// const router = useRouter();
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const tab = ref<string>("yes");
const arrow = ref<boolean>(false);
// const dateGoverment = ref<Date>(new Date());
// const dateReceiver = ref<Date>(new Date());
// const issue = ref<string>("");
// const book = ref<string>("");
// const volume = ref<string>("");
// const section = ref<string>("");
// const government = ref<any>(null);
// const document = ref<any>(null);
const capYears = ref<string>("");
const capYearsOption = ref<DataOption[]>([]);
const capYearsOptionFilter = ref<DataOption[]>([]);
const visibleColumns = ref<String[]>([
"no",
"cardid",
"name",
"position",
"range",
"salary",
"zone",
"school",
"date",
]);
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: "cardid",
align: "left",
label: "เลขประจำตัวประชาชน",
field: "cardid",
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: "position",
align: "left",
label: "ตำแหน่ง",
field: "position",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "range",
align: "left",
label: "อันดับ",
field: "range",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "salary",
align: "left",
label: "เงินเดือน",
field: "salary",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "zone",
align: "left",
label: "เขต",
field: "zone",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "school",
align: "left",
label: "โรงเรียน",
field: "school",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "date",
align: "left",
label: "วันที่ยื่นขอ",
field: "date",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const rows = ref<any>([
{
no: "1",
cardid: "1XXXXXXXXXXXX",
name: "นางสาวรัชภรณ์ ภักดี",
position: "กกก",
range: "1",
salary: "XXXXXX",
zone: "1",
school: "โรงเรียน",
date: date2Thai(new Date()),
},
{
no: "2",
cardid: "1XXXXXXXXXXXX",
name: "นางสาวรัชภรณ์ ภักดี",
position: "กกก",
range: "1",
salary: "XXXXXX",
zone: "1",
school: "โรงเรียน",
date: date2Thai(new Date()),
},
{
no: "3",
cardid: "1XXXXXXXXXXXX",
name: "นางสาวรัชภรณ์ ภักดี",
position: "กกก",
range: "1",
salary: "XXXXXX",
zone: "1",
school: "โรงเรียน",
date: date2Thai(new Date()),
},
]);
onMounted(() => {
const op2: DataOption[] = [
{ id: "1", name: "2566" },
{ id: "2", name: "2565" },
{ id: "3", name: "2564" },
];
capYearsOption.value = op2;
capYearsOptionFilter.value = op2;
});
const clickRound = () => {
arrow.value = !arrow.value;
};
const resetFilter = () => {
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
filter.value = "";
filterRef.value!.focus();
};
const filterSelector = (val: any, update: Function, filtername: string) => {
switch (filtername) {
case "capYearsOption":
update(() => {
capYearsOption.value = capYearsOptionFilter.value.filter(
(v: DataOption) => v.name!.indexOf(val) > -1
);
});
break;
default:
break;
}
};
// const getArrow = (val: boolean) => {
// return {
// "arrow cursor-pointer": !val,
// "arrow-active cursor-pointer": val,
// };
// };
const marginTop = (val: boolean) => {
return {
"": !val,
"q-mt-md": val,
};
};
</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;
}
</style>

335
src/modules/09_coin/components/CoinRequest/coinRequestMain.vue
View file

@ -1,335 +0,0 @@
<script setup lang="ts">
import { onMounted, ref, useAttrs, reactive, watch } from "vue";
import type { QTableProps } from "quasar";
import type {
FormMainProbation,
FormMainProbation2,
} from "@/modules/05_placement/interface/request/Main";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import DialogHeader from "@/modules/07_insignia/components/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
import type { resMain } from "@/modules/06_retirement/interface/response/Main";
const yearOptions = reactive<any[]>([]);
import cardTop from "@/modules/07_insignia/components/2_Manage/StatCard.vue";
import tab1 from "@/modules/07_insignia/components/2_Manage/Tab1.vue";
import tab2 from "@/modules/07_insignia/components/2_Manage/Tab2.vue";
import tab3 from "@/modules/07_insignia/components/2_Manage/Tab3.vue";
import tab4 from "@/modules/07_insignia/components/2_Manage/Tab4.vue";
const Note = ref<string>("");
const addNote = ref<boolean>(false);
const saveWriteNote = ref<any[]>([]);
const mixin = useCounterMixin();
const { messageError, date2Thai, showLoader, hideLoader, dialogMessage } =
mixin;
const router = useRouter();
const $q = useQuasar(); //ใช้ noti quasar
const modal = ref<boolean>(false);
const pagination = ref({
sortBy: "desc",
descending: false,
page: 1,
rowsPerPage: 10,
});
const round = ref<string>("รอบการเสนอพระราชทานเครื่องราชปี 2556");
const optionRound = [
"รอบการเสนอพระราชทานเครื่องราชปี 2557",
"รอบการเสนอพระราชทานเครื่องราชปี 2558",
"รอบการเสนอพระราชทานเครื่องราชปี 2556",
];
const visibleColumns = ref<string[]>([
"no",
"fullname",
"requestType",
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
// หัวตาราง
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "fullname",
align: "left",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "fullname",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "requestType",
align: "left",
label: "ประเภทคำร้องขอเเก้ไข",
sortable: true,
field: "requestType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
// ข้อมูลตาราง (จำลอง)
const rows = ref<any[]>([
{
no: "1",
fullname: "นายใจดี ยอดใจ ",
requestType: "xxxxxx",
},
{
no: "2",
fullname: "นายใจดี ยอดใจ ",
requestType: "xxxxxx",
},
{
no: "3",
fullname: "นายใจดี ยอดใจ ",
requestType: "xxxxxx",
},
]);
const clickDelete = (id: string) => {
$q.dialog({
title: "ยืนยันการลบข้อมูล",
message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
})
.onOk(async () => {})
.onCancel(() => {})
.onDismiss(() => {});
};
const clickNote = () => {
addNote.value = true;
};
const clickAdd = () => {
// modal.value = true;
$q.dialog({
title: "เพิ่มประกาศ",
message: "เลือกประกาศที่ต้องการเพิ่มข้อมูล",
options: {
type: "radio",
model: "opt1",
// inline: true
items: [
{ label: "ประกาศเพิ่มผู้เกษียณ", value: "ADD" },
{ label: "ประกาศแก้ไขข้อมูลผู้เกษียณ", value: "EDIT" },
{ label: "ประกาศยกเลิกผู้เกษียณ", value: "REMOVE" },
],
},
cancel: {
flat: true,
color: "negative",
},
persistent: true,
})
.onOk((data) => {
console.log("option===>", data);
router.push(`/retirement/list/${type.value}/${currentYear}`);
})
.onCancel(() => {})
.onDismiss(() => {});
/* $q.dialog({
title: "ยืนยันการเพิ่มข้อมูลประกาศเกษียณ",
message: "ต้องการเพิ่มข้อมูลประกาศเกษียณใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
})
.onOk(async () => {
router.push(`/retirement/list/${type.value}/${currentYear}`);
})
.onCancel(() => {})
.onDismiss(() => {}); */
};
const clickClose = async () => {
addNote.value = false;
};
const organization = ref<string>();
const organizationOptions = ref<any>([{ id: 1, name: "ทั้งหมด" }]);
const stat = ref<any>({
total: 0,
sendName: 0,
nonSend: 0,
personSend: 0,
disclaim: 0,
});
const saveNote = async () => {
if (saveWriteNote.value.length == 0) {
dialogMessage(
$q,
"ไม่สามารถบันทึกข้อมูลได้",
"กรุณาเพิ่มหมายเหตุ",
"warning",
undefined,
"orange",
undefined,
undefined,
true
);
return;
} else {
await saveTextNote();
}
};
const saveTextNote = async () => {};
// ค้นหาในตาราง
const filterKeyword = ref<string>("");
const filterRef = ref<any>(null);
const resetFilter = () => {
filterKeyword.value = "";
filterRef.value.focus();
};
const filterKeyword2 = ref<string>("");
const filterRef2 = ref<any>(null);
const resetFilter2 = () => {
filterKeyword2.value = "";
filterRef2.value.focus();
};
const attrs = ref<any>(useAttrs());
const paging = ref<boolean>(true);
const paginationLabel = (start: string, end: string, total: string) => {
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
else return start + "-" + end + " ใน " + total;
};
const nextPage = (prop: any) => {
// console.log(prop.id);
router.push(`/retirement/listretire/${prop.id}/${type.value}`);
};
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
รายการที่ยื่นคำร้องขอแก้ไขข้อมูลการขอพรราชทานเหรียนจักรพรรดิมาลา
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row q-col-gutter-sm">
<div class="row col-12 q-col-gutter-sm">
<div>
<div class=" col-12 row items-center">
<div class="q-pl-sm q-mr-md text-weight-bold text-grey-6">รอบ</div>
<q-select borderless v-model="round" :options="optionRound" />
</div>
</div>
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12">
<d-table
ref="table"
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="Order"
flat
bordered
:paging="true"
dense
class="custom-header-table"
v-bind="attrs"
:visible-columns="visibleColumns"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td key="no" :props="props" >
{{ props.row.no }}
</q-td>
<q-td key="fullname" :props="props">
{{ props.row.fullname }}
</q-td>
<q-td
key="requestType"
:props="props"
@click="clickEdit(props.row)"
>
{{ props.row.requestType }}
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</d-table>
</div>
</div>
</q-card>
</template>

78
src/modules/09_coin/components/coinAllocate/coinAllocateAdd.vue
View file

@ -1,78 +0,0 @@
<template>
<div class="col-xs-12 col-sm-12 col-md-11">
<div class="toptitle col-12 row items-center">
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="router.push(`/coin/allocate/list-allocate`)"
/>
<div>เพิ่มรายการโควต้าจำนวนเหรียญตรา</div>
</div>
<div class="col-12">
<q-card bordered>
<div class="col-12 row q-col-gutter-md q-pa-md">
<div class="col-xs-12 col-sm-12 row">
<q-separator />
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<q-input class="col-2" dense outlined v-model="year" label="ปี" />
<q-input
class="col-8"
dense
outlined
v-model="typeInsig"
label="ประเภทเหรียนตรา"
/>
<q-input
class="col-2"
dense
outlined
v-model="total"
label="จำนวน"
/>
</div>
</div>
</div>
<q-separator />
<q-separator />
<div class="row col-12 q-pa-sm">
<q-space />
<q-btn
unelevated
dense
class="q-px-md items-center"
color="light-blue-10"
label="บันทึก"
@click="router.go(-1)"
/>
</div>
</q-card>
</div>
</div>
</template>
<script setup lang="ts">
import type { QTableProps } from "quasar";
import { ref } from "vue";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const router = useRouter();
const $q = useQuasar();
const dateStart = ref<any>(new Date());
const dateEnd = ref<any>(new Date());
const total = ref<any>("");
const typeInsig = ref<string>("");
const year = ref<string>("");
const datelast = ref<string>("");
const routeName = router.currentRoute.value.name;
</script>

419
src/modules/09_coin/components/coinAllocate/coinAllocateDetail.vue
View file

@ -1,419 +0,0 @@
<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.push(`/coin/allocate/list-allocate`)"
/>
หน่วยงานจัดสรรเหรียนตรา {{ name }}
</div>
<q-card bordered class="q-py-sm row col-12">
<div class="col-12 row bg-white">
<div class="fit q-px-md q-py-sm">
<div class="row col-12 q-col-gutter-md fit">
<cardTop
:amount="stat.total"
label="จำนวนเหรียนตรา ฯ ทั้งหมด"
color="#016987"
/>
<cardTop
:amount="stat.sendInsig"
label="จำนวนเหรียนตรา ฯ ที่จัดสรรให้หน่วยงานแล้ว"
color="#02A998"
/>
<cardTop
:amount="stat.remainInsig"
label="จำนวนเหรียนตรา ฯ คงเหลือ"
color="#2EA0FF"
/>
</div>
</div>
</div>
</q-card>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row q-col-gutter-sm">
<div class="row col-12 q-col-gutter-sm">
<div>
<q-btn
@click="clickAdd()"
size="12px"
flat
round
color="add"
icon="mdi-plus"
>
<q-tooltip>เพิ่มรายการจัดสรรเหรียนตรา</q-tooltip>
</q-btn>
</div>
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12">
<q-table
ref="table"
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="id"
flat
bordered
:paging="true"
dense
class="custom-header-table"
v-bind="attrs"
:visible-columns="visibleColumns"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td key="no" :props="props" @click="detailbyOrg()">
{{ props.rowIndex + 1 }}
</q-td>
<q-td key="organization" :props="props" @click="detailbyOrg()">
<!-- @click="redirectToPage(props.row.id)" -->
{{ props.row.organization }}
</q-td>
<q-td key="totalInsignia" :props="props" @click="detailbyOrg()">
<!-- @click="redirectToPage(props.row.id)" -->
{{ props.row.totalInsignia }}
</q-td>
<q-td key="allocate" :props="props" @click="detailbyOrg()">
<!-- @click="redirectToPage(props.row.id)" -->
{{ props.row.allocate }}
</q-td>
<q-td key="remain" :props="props" @click="detailbyOrg()">
<!-- @click="redirectToPage(props.row.id)" -->
{{ props.row.remain }}
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</div>
</div>
</q-card>
<q-dialog v-model="modal" persistent>
<q-card style="width: 900px; max-width: 80vw">
<q-form ref="myForm">
<DialogHeader tittle="เพิ่มการจัดสรรเหรียนตรา ฯ " :close="clickClose" />
<q-separator />
<q-card-section class="q-pa-md q-col-gutter-sm">
<q-select
outlined
class="full-width inputgreen cursor-pointer custom-input"
standout
dense
hide-bottom-space
:rules="[(val) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
lazy-rules
option-label="label"
option-value="id"
emit-value
:options="options"
v-model="orgSelect"
:label="`${'เลือกหน่วยงาน'}`"
map-options
/>
<q-input
outlined
dense
lazy-rules
v-model="Amountallocate"
:rules="[(val) => !!val || `${'กรุณากรอกจำนวน'}`]"
hide-bottom-space
:label="`${'จำนวนโคตาเหรียนตรา ฯ'}`"
type="number"
/>
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white text-teal">
<q-btn label="บันทึก" @click="saveAdd" color="public" />
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
import { ref, useAttrs } from "vue";
import type { QTableProps } from "quasar";
import router from "@/router";
import { useQuasar } from "quasar";
import cardTop from "@/modules/07_insignia/components/2_Manage/StatCard.vue";
import DialogHeader from "@/modules/09_coin/components/dialog/DialogHeader.vue";
const name = ref<string>("");
const orgSelect = ref<string>("");
const $q = useQuasar(); //ใช้ noti quasar
const modal = ref<boolean>(false);
const clickClose = async () => {
modal.value = false;
};
const Amountallocate = ref<number>();
const options = ref<any[]>([
{ label: "โครงสร้างเเละอัตรากำลัง", id: "xxxxx1" },
{ label: "การเรียนรู้มหานคร", id: "xxxxx2" },
{ label: "สารสนเทศทรัพยากรบุคคล", id: "xxxxx3" },
{ label: "วินัยเเละเสริมสร้างจริยธรรม", id: "xxxxx4" },
]);
const saveAdd = () => {
console.log(`dataSave==>${orgSelect.value},${Amountallocate.value}`)
modal.value = false
};
const pagination = ref({
sortBy: "desc",
descending: false,
page: 1,
rowsPerPage: 10,
});
const stat = ref<any>({
total: 10,
sendInsig: 9,
remainInsig: 1,
});
const visibleColumns = ref<string[]>([
"no",
"organization",
"totalInsignia",
"allocate",
"remain",
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
// หัวตาราง
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "organization",
align: "left",
label: "หน่วยงาน",
sortable: true,
field: "organization",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "totalInsignia",
align: "left",
label: "จำนวนเหรียนตรา ฯ ที่ได้รับ",
sortable: true,
field: "totalInsignia",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "allocate",
align: "left",
label: "จัดสรรให้ข้าราชการแล้ว",
sortable: true,
field: "allocate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "remain",
align: "left",
label: "คงเหลือ",
sortable: true,
field: "remain",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
// ข้อมูลตาราง (จำลอง)
const rows = ref<any[]>([
{
no: "1",
organization: "โครงสร้างและอัตรากำลัง",
totalInsignia: "3",
allocate: 3,
remain: 0,
},
{
no: "2",
organization: "การเรียนรู้มหานคร",
totalInsignia: "3",
allocate: 0,
remain: 0,
},
{
no: "3",
organization: "สารสนเทศทรัพยากรบุคคล",
totalInsignia: "2",
allocate: 2,
remain: 0,
},
{
no: "4",
organization: "วินัยและเสริมสร้างจริยธรรม",
totalInsignia: "1",
allocate: 1,
remain: 0,
},
]);
// หัวตาราง2
const clickDelete = (id: string) => {
$q.dialog({
title: "ยืนยันการลบข้อมูล",
message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
})
.onOk(async () => {})
.onCancel(() => {})
.onDismiss(() => {});
};
const clickAdd = () => {
modal.value = true;
};
const detailbyOrg = () => {
router.push(`/coin/allocate/detail-add`);
};
// const redirectToPage = (id?: string) => {
// router.push({ name: "allocateDetail" });
// };
// ค้นหาในตาราง
const filterKeyword = ref<string>("");
const filterRef = ref<any>(null);
const resetFilter = () => {
filterKeyword.value = "";
filterRef.value.focus();
};
const filterKeyword2 = ref<string>("");
const filterRef2 = ref<any>(null);
const resetFilter2 = () => {
filterKeyword2.value = "";
filterRef2.value.focus();
};
const attrs = ref<any>(useAttrs());
const paging = ref<boolean>(true);
const paginationLabel = (start: string, end: string, total: string) => {
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
else return start + "-" + end + " ใน " + total;
};
</script>
<style lang="scss" scope>
.filter-card {
background-color: #f1f1f1b0;
}
.toggle-expired-account {
font-size: 12px;
font-weight: 400;
font-size: 15px;
line-height: 150%;
color: #35373c;
}
.icon-color {
color: #4154b3;
}
.custom-header-table {
max-height: 64vh;
.q-table tr:nth-child(odd) td {
background: white;
}
.q-table tr:nth-child(even) td {
background: #f8f8f8;
}
.q-table thead tr {
background: #ecebeb;
}
.q-table thead tr th {
position: sticky;
z-index: 1;
}
/* this will be the loading indicator */
.q-table thead tr:last-child th {
/* height of all previous header rows */
top: 48px;
}
.q-table thead tr:first-child th {
top: 0;
}
}
</style>

690
src/modules/09_coin/components/coinAllocate/coinAllocateDetailAdd.vue
View file

@ -1,690 +0,0 @@
<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)"
/>
รายชื่อที่จัดสรรเหรียนตรา {{ name }} {{ organization }}
</div>
<q-card bordered class="q-py-sm row col-12">
<div class="col-12 row bg-white">
<div class="fit q-px-md q-py-sm">
<div class="row col-12 q-col-gutter-md fit">
<cardTop
:amount="stat.total"
label="จำนวนเหรียนตรา ฯ ทั้งหมด"
color="#016987"
/>
<cardTop
:amount="stat.sendInsig"
label="จำนวนเหรียนตรา ฯ ที่จัดสรรให้หน่วยงานแล้ว"
color="#02A998"
/>
<cardTop
:amount="stat.remainInsig"
label="จำนวนเหรียนตรา ฯ คงเหลือ"
color="#2EA0FF"
/>
</div>
</div>
</div>
</q-card>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row q-col-gutter-sm">
<div class="row col-12 q-col-gutter-sm">
<div>
<q-btn
@click="clickAdd()"
size="12px"
flat
round
color="add"
icon="mdi-plus"
>
<q-tooltip>เพิ่มรายการจัดสรรเหรียนตรา</q-tooltip>
</q-btn>
</div>
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12">
<q-table
ref="table"
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="id"
flat
bordered
:paging="true"
dense
class="custom-header-table"
v-bind="attrs"
:visible-columns="visibleColumns"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
</q-td>
<q-td key="citizenId" :props="props">
{{ props.row.citizenId }}
</q-td>
<q-td key="name" :props="props">
{{ props.row.name }}
</q-td>
<q-td key="organization" :props="props">
{{ props.row.organization }}
</q-td>
<q-td key="positionType" :props="props">
{{ props.row.positionType }}
</q-td>
<q-td key="positionAdmin" :props="props">
{{ props.row.positionAdmin }}
</q-td>
<q-td key="positionLine" :props="props">
{{ props.row.positionLine }}
</q-td>
<q-td key="positionNum" :props="props">
{{ props.row.positionNum }}
</q-td>
<q-td key="status" :props="props">
{{ props.row.status }}
</q-td>
<q-td auto-width>
<q-btn
dense
size="12px"
flat
round
color="blue"
icon="mdi-alert-circle-outline"
>
<q-tooltip>หมายเหตุ</q-tooltip>
</q-btn>
</q-td>
<q-td>
<q-btn
label="คืนแล้ว"
@click="clickNote(props.row.id)"
color="blue"
outline
/>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</div>
</div>
</q-card>
<q-dialog v-model="modal" persistent>
<q-card style="width: 900px; max-width: 80vw">
<q-form ref="myForm">
<DialogHeader tittle="เพิ่มรายชื่อ " :close="clickClose" />
<q-separator />
<q-card-section class="q-pa-md q-col-gutter-sm">
<q-input
class="col-12"
standout
dense
v-model="filterKeyword2"
ref="filterRef2"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword2 == ''" name="search" />
<q-icon
v-if="filterKeyword2 !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter2"
/>
</template>
</q-input>
<div class="col-12">
<q-table
ref="table2"
:columns="columns2"
:rows="rows2"
:filter="filterKeyword2"
row-key="Order"
flat
bordered
:paging="true"
dense
class="custom-header-table"
v-bind="attrs"
:visible-columns="visibleColumns2"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
dense
class="q-px-md"
outline
color="primary"
v-close-popup
label="เพิ่ม"
>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</div>
</q-card-section>
</q-form>
</q-card>
</q-dialog>
<q-dialog v-model="addNote" persistent>
<q-card style="min-width: 350px">
<DialogHeader tittle="คืนเหรียนตราฯ " :close="clickCloseNote" />
<q-card-section class="q-pt-none">
<q-input
dense
type="textarea"
v-model="Note"
label="กรอกเหตุผลที่ต้องการคืนเหรียนตราฯ "
autofocus
@keyup.enter="addNote = false"
/>
</q-card-section>
<q-card-actions align="right" class="bg-white text-teal">
<q-btn label="บันทึก" @click="saveNote" color="public" />
</q-card-actions>
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
import { ref, useAttrs } from "vue";
import type { QTableProps } from "quasar";
import router from "@/router";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import DialogHeader from "@/modules/07_insignia/components/DialogHeader.vue";
import cardTop from "@/modules/07_insignia/components/2_Manage/StatCard.vue";
const mixin = useCounterMixin();
const { messageError, date2Thai, showLoader, hideLoader, dialogMessage } =
mixin;
const name = ref<string>("");
const $q = useQuasar(); //ใช้ noti quasar
const modal = ref<boolean>(false);
const saveWriteNote = ref<any[]>([]);
const addNote = ref<boolean>(false);
const clickNote = () => {
addNote.value = true;
};
const pagination = ref({
sortBy: "desc",
descending: false,
page: 1,
rowsPerPage: 10,
});
const stat = ref<any>({
total: 3,
sendInsig: 2,
remainInsig: 1,
});
const visibleColumns = ref<string[]>([
"no",
"citizenId",
"name",
"organization",
"positionType",
"positionAdmin",
"positionLine",
"positionNum",
"status",
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
// หัวตาราง
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "citizenId",
align: "left",
label: "เลขประจำตัวประชาชน",
sortable: true,
field: "citizenId",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "name",
align: "left",
label: "ชื่อ - นามสกุล",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "organization",
align: "left",
label: "สังกัด",
sortable: true,
field: "organization",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionType",
align: "left",
label: "ตำแหน่งประเภท",
sortable: true,
field: "positionType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionAdmin",
align: "left",
label: "ตำแหน่งทางการบริหาร",
sortable: true,
field: "positionAdmin",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionLine",
align: "left",
label: "ตำแหน่งในสายงาน/ระดับ",
sortable: true,
field: "positionLine",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionNum",
align: "left",
label: "ตำแหน่ง เลขที่",
sortable: true,
field: "positionNum",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "status",
align: "left",
label: "สถานะ",
sortable: true,
field: "status",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
// ข้อมูลตาราง (จำลอง)
const rows = ref<any[]>([
{
no: "1",
citizenId: "1XXXXXXXXXXXX",
name: "นางสาวรัชภรณ์ ภักดี",
organization: "ฝ่ายบริหารงานทั่วไป",
positionType: "บริหาร",
positionAdmin: "บริหาร",
positionLine: "ชำนาญการพิเศษ",
positionNum: "ลกก.3",
status: "ยังมีชีวิต",
},
{
no: "2",
citizenId: "1XXXXXXXXXXXX",
name: "นางสาวภาพรรณ ลออ",
organization: "ฝ่ายบริหารงานทั่วไป",
positionType: "บริหาร",
positionAdmin: "จัดการงานทั่วไป",
positionLine: "ชำนาญงาน",
positionNum: "กบห.2",
status: "ยังมีชีวิต",
},
{
no: "3",
citizenId: "1XXXXXXXXXXXX",
name: "นางสาวรัชภรณ์ ภักดี",
organization: "ฝ่ายบริหารงานทั่วไป",
positionType: "บริหาร",
positionAdmin: "บริหาร",
positionLine: "ชำนาญการพิเศษ",
positionNum: "ลกก.3",
status: "ยังมีชีวิต",
},
]);
const visibleColumns2 = ref<string[]>([
"no",
"name",
"position",
"level",
"institution",
]);
// หัวตาราง2
const columns2 = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "name",
align: "left",
label: "ชื่อ-สกุล",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "position",
align: "left",
label: "ตำแหน่งในสายงาน",
sortable: true,
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "level",
align: "left",
label: "ระดับ",
sortable: true,
field: "level",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "institution",
align: "left",
label: "สังกัด",
sortable: true,
field: "institution",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
// ข้อมูลตาราง2 (จำลอง)
const rows2 = ref<any[]>([
{
no: "1",
name: "นายใจดี ยอดใจ ",
position: "นักวิชาการพัสดุ",
level: "ปฏิบัติการ",
institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
},
{
no: "2",
name: "นายจักกริน บัณฑิต",
position: "นักวิชาการพัสดุ",
level: "ปฏิบัติการ",
institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
},
{
no: "3",
name: "นางสาวกัณฐิมา กาฬสินธุ์",
position: "นักจัดการงานทั่วไป",
level: "ปฏิบัติการ",
institution: "กลุ่มงานช่วยนักบริหาร",
},
{
no: "4",
name: "นางสาวเมขลา กระจ่างมนตรี",
position: "นักจัดการงานทั่วไป",
level: "ปฏิบัติการ",
institution: "กลุ่มงานช่วยนักบริหาร",
},
{
no: "5",
name: "นางสาวฐิติรัตน์ พงษ์ศิริ",
position: "นักจัดการงานทั่วไป",
level: "ปฏิบัติการ",
institution: "กลุ่มงานช่วยนักบริหาร",
},
]);
// หัวตาราง2
const clickDelete = (id: string) => {
$q.dialog({
title: "ยืนยันการลบข้อมูล",
message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
})
.onOk(async () => {})
.onCancel(() => {})
.onDismiss(() => {});
};
const clickClose = async () => {
modal.value = false;
};
const clickCloseNote = async () => {
addNote.value = false;
};
const clickAdd = () => {
modal.value = true;
};
const saveNote = async () => {
if (saveWriteNote.value.length == 0) {
dialogMessage(
$q,
"ไม่สามารถบันทึกข้อมูลได้",
"กรุณาเพิ่มหมายเหตุ",
"warning",
undefined,
"orange",
undefined,
undefined,
true
);
return;
} else {
await saveTextNote();
}
};
const saveTextNote = async () => {};
const redirectToPage = (id?: string) => {
router.push({ name: "allocateDetail" });
};
// ค้นหาในตาราง
const filterKeyword = ref<string>("");
const filterRef = ref<any>(null);
const resetFilter = () => {
filterKeyword.value = "";
filterRef.value.focus();
};
const filterKeyword2 = ref<string>("");
const filterRef2 = ref<any>(null);
const resetFilter2 = () => {
filterKeyword2.value = "";
filterRef2.value.focus();
};
const attrs = ref<any>(useAttrs());
const paging = ref<boolean>(true);
const paginationLabel = (start: string, end: string, total: string) => {
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
else return start + "-" + end + " ใน " + total;
};
</script>
<style lang="scss" scope>
.filter-card {
background-color: #f1f1f1b0;
}
.toggle-expired-account {
font-size: 12px;
font-weight: 400;
font-size: 15px;
line-height: 150%;
color: #35373c;
}
.icon-color {
color: #4154b3;
}
.custom-header-table {
max-height: 64vh;
.q-table tr:nth-child(odd) td {
background: white;
}
.q-table tr:nth-child(even) td {
background: #f8f8f8;
}
.q-table thead tr {
background: #ecebeb;
}
.q-table thead tr th {
position: sticky;
z-index: 1;
}
/* this will be the loading indicator */
.q-table thead tr:last-child th {
/* height of all previous header rows */
top: 48px;
}
.q-table thead tr:first-child th {
top: 0;
}
}
</style>

363
src/modules/09_coin/components/coinAllocate/coinAllocateMain.vue
View file

@ -1,363 +0,0 @@
<script setup lang="ts">
import { ref, useAttrs } from "vue";
import type { QTableProps } from "quasar";
import router from "@/router";
import { useQuasar } from "quasar";
const $q = useQuasar(); //ใช้ noti quasar
const modal = ref<boolean>(false);
const pagination = ref({
sortBy: "desc",
descending: false,
page: 1,
rowsPerPage: 10,
});
const visibleColumns = ref<string[]>([
"no",
"year",
"insignia",
"total",
"done",
"remain",
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
// หัวตาราง
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "year",
align: "left",
label: "ปี",
sortable: true,
field: "year",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "insignia",
align: "left",
label: "เครื่องราชอิสริยาภรณ์",
sortable: true,
field: "insignia",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "total",
align: "left",
label: "จำนวนทั้งหมด",
sortable: true,
field: "total",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "done",
align: "left",
label: "จัดสรรแล้ว",
sortable: true,
field: "done",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "remain",
align: "left",
label: "คงเหลือ",
sortable: true,
field: "remain",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
// ข้อมูลตาราง (จำลอง)
const rows = ref<any[]>([
{
id:"xxxxx1",
no: "1",
year: "2566",
insignia: "เบญจมาภรณ์มงกุฎไทย",
total: 10,
done: 9,
remain: 1,
},
{
id:"xxxxx2",
no: "2",
year: "2566",
insignia: "จัตุรถาภรณ์มงกุฎไทย",
total: 20,
done: 18,
remain: 2,
},
{
id:"xxxxx3",
no: "3",
year: "2566",
insignia: "ทวีติยาภรณ์มงกุฎไทย",
total: 15,
done: 10,
remain: 5,
},
{
id:"xxxxx4",
no: "4",
year: "2566",
insignia: "เหรียญเงินช้างเผือก",
total: 5,
done: 5,
remain: 0,
},
]);
// หัวตาราง2
const clickDelete = (id: string) => {
$q.dialog({
title: "ยืนยันการลบข้อมูล",
message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
})
.onOk(async () => {})
.onCancel(() => {})
.onDismiss(() => {});
};
const clickAdd = () => {
router.push(`/coin/allocate/allocate-add`);
};
const redirectToPage = (id?: string) => {
router.push(`/coin/allocate/detail/${id}`);
};
// ค้นหาในตาราง
const filterKeyword = ref<string>("");
const filterRef = ref<any>(null);
const resetFilter = () => {
filterKeyword.value = "";
filterRef.value.focus();
};
const filterKeyword2 = ref<string>("");
const filterRef2 = ref<any>(null);
const resetFilter2 = () => {
filterKeyword2.value = "";
filterRef2.value.focus();
};
const attrs = ref<any>(useAttrs());
const paging = ref<boolean>(true);
const paginationLabel = (start: string, end: string, total: string) => {
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
else return start + "-" + end + " ใน " + total;
};
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
จัดสรรเหรียนตรา
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row q-col-gutter-sm">
<div class="row col-12 q-col-gutter-sm">
<div>
<q-btn
@click="clickAdd()"
size="12px"
flat
round
color="add"
icon="mdi-plus"
>
<q-tooltip>เพิ่มรายการจัดสรรเครื่องราชอิสริยาภรณ์</q-tooltip>
</q-btn>
</div>
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12">
<d-table
ref="table"
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="id"
flat
bordered
:paging="true"
dense
v-bind="attrs"
:visible-columns="visibleColumns"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td
key="no"
:props="props"
@click="redirectToPage(props.row.id)"
>
{{ props.rowIndex + 1 }}
</q-td>
<q-td
key="year"
:props="props"
@click="redirectToPage(props.row.id)"
>
{{ props.row.year }}
</q-td>
<q-td
key="insignia"
:props="props"
@click="redirectToPage(props.row.id)"
>
{{ props.row.insignia }}
</q-td>
<q-td
key="total"
:props="props"
@click="redirectToPage(props.row.id)"
>
{{ props.row.total }}
</q-td>
<q-td
key="done"
:props="props"
@click="redirectToPage(props.row.id)"
>
{{ props.row.done }}
</q-td>
<q-td
key="remain"
:props="props"
@click="redirectToPage(props.row.id)"
>
{{ props.row.remain }}
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</d-table>
</div>
</div>
</q-card>
</template>
<style lang="scss" scope>
.filter-card {
background-color: #f1f1f1b0;
}
.toggle-expired-account {
font-size: 12px;
font-weight: 400;
font-size: 15px;
line-height: 150%;
color: #35373c;
}
.icon-color {
color: #4154b3;
}
.custom-header-table {
max-height: 64vh;
.q-table tr:nth-child(odd) td {
background: white;
}
.q-table tr:nth-child(even) td {
background: #f8f8f8;
}
.q-table thead tr {
background: #ecebeb;
}
.q-table thead tr th {
position: sticky;
z-index: 1;
}
/* this will be the loading indicator */
.q-table thead tr:last-child th {
/* height of all previous header rows */
top: 48px;
}
.q-table thead tr:first-child th {
top: 0;
}
}
</style>

275
src/modules/09_coin/components/coinReport/coinReportDetail.vue
View file

@ -1,275 +0,0 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { VuePDF, usePDF } from "@tato30/vue-pdf";
const pdfSrc = ref<any>();
const numOfPages = ref<number>(0);
const page = ref<number>(1);
const dialog = ref<boolean>(false);
onMounted(async () => {
const pdfData = usePDF(
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
);
setTimeout(() => {
pdfSrc.value = pdfData.pdf.value;
numOfPages.value = pdfData.pages.value;
}, 1000);
console.log(pdfData);
});
const splitterModel = ref(14);
const selectReport = ref<any>({ id: 1, name: "รายงานขร.1" });
const optionsReport = ref<any>([
{ id: 1, name: "รายงานขร.1" },
{ id: 2, name: "รายงานขร.2" },
{ id: 3, name: "รายงานขร.3" },
{ id: 4, name: "รายงานขร.4" },
]);
const selectList = ref<any>({ id: 0, name: "เลือกกรอบการยื่นขอ" });
const optionsList = ref<any>([
{ id: 1, name: "list 1" },
{ id: 2, name: "list 2" },
]);
const nextPage = () => {
if (page.value < numOfPages.value) {
page.value++;
}
};
const backPage = () => {
if (page.value !== 1) {
page.value--;
}
};
const backHistory = () => {
window.history.back();
};
</script>
<template>
<div class="toptitle">
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="backHistory"
/>
บัญชีเเสดงจำนวนชั้นตราเหรียญจักรพรรดิมาลา ซึ่งขอพระราชทานให้เเก่ข้าราชการ
</div>
<div>
<q-card flat bordered class="col-12 q-mt-sm">
<div class="q-pa-md q-gutter-y-md">
<q-toolbar style="padding: 0">
<q-select
dense
outlined
v-model="selectList"
:options="optionsList"
:label="optionsList.name"
option-value="id"
option-label="name"
/>
<q-space />
<div class="q-pa-ms q-gutter-sm" style="padding: 0">
<q-btn
outline
color="primary"
icon="mdi-arrow-down-bold-circle-outline"
label="ดาวน์โหลด"
/>
<q-btn icon="mdi-eye-outline" color="primary" label="แสดงรายงาน" />
<!-- <q-btn
color="primary"
icon="mdi-fullscreen"
@click="dialog = true"
/> -->
</div>
</q-toolbar>
<q-splitter
v-model="splitterModel"
horizontal
style="
height: 70vh;
border: 1px solid rgb(210, 210, 210);
border-radius: 5px;
"
before-class="overflow-hidden disable"
separator-class="bg-white disabled"
>
<template v-slot:before>
<div class="q-pa-md">
<div class="row items-start items-center">
<div class="col">
<q-btn
padding="xs"
icon="mdi-chevron-left"
color="grey-2"
text-color="grey-5"
size="md"
class="my-auto"
@click="backPage"
:disable="page == 1"
/>
</div>
<div class="col-12 col-md-auto">
<div class="q-pa-md flex">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</div>
</div>
<div class="col text-right">
<q-btn
padding="xs"
icon="mdi-chevron-right"
color="grey-2"
text-color="grey-5"
size="md"
@click="nextPage"
:disable="page === numOfPages"
/>
</div>
</div>
</div>
</template>
<template v-slot:after>
<div class="q-pa-md">
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
</div>
</template>
<template v-slot:default>
<div class="q-pa-md">
<div class="row items-start items-center">
<div class="col">
<q-btn
padding="xs"
icon="mdi-chevron-left"
color="grey-2"
text-color="grey-5"
size="md"
class="my-auto"
@click="backPage"
:disable="page == 1"
/>
</div>
<div class="col-12 col-md-auto">
<div class="q-pa-md flex">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</div>
</div>
<div class="col text-right">
<q-btn
padding="xs"
icon="mdi-chevron-right"
color="grey-2"
text-color="grey-5"
size="md"
@click="nextPage"
:disable="page === numOfPages"
/>
</div>
</div>
</div>
</template>
</q-splitter>
</div>
</q-card>
</div>
<!-- Dialog Full Screen -->
<q-dialog
v-model="dialog"
persistent
:maximized="true"
transition-show="slide-up"
transition-hide="slide-down"
>
<q-card class="bg-white">
<div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
<q-btn
icon="close"
unelevated
round
dense
style="color: #ff8080; background-color: #ffdede"
size="12px"
v-close-popup
/>
</div>
<div class="q-pa-md">
<div class="row items-start items-center">
<div class="col">
<q-btn
padding="xs"
icon="mdi-chevron-left"
color="grey-2"
text-color="grey-5"
size="md"
class="my-auto"
@click="backPage"
:disable="page == 1"
/>
</div>
<div class="col-12 col-md-auto">
<div class="q-pa-md flex">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</div>
</div>
<div class="col text-right">
<q-btn
padding="xs"
icon="mdi-chevron-right"
color="grey-2"
text-color="grey-5"
size="md"
@click="nextPage"
:disable="page === numOfPages"
/>
</div>
</div>
<div class="row items- items-center">
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
</div>
<div class="row items- items-end">
<div class="col">
<q-btn
padding="xs"
icon="mdi-chevron-left"
color="grey-2"
text-color="grey-5"
size="md"
class="my-auto"
@click="backPage"
:disable="page == 1"
/>
</div>
<div class="col-12 col-md-auto">
<div class="q-pa-md flex">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</div>
</div>
<div class="col text-right">
<q-btn
padding="xs"
icon="mdi-chevron-right"
color="grey-2"
text-color="grey-5"
size="md"
@click="nextPage"
:disable="page === numOfPages"
/>
</div>
</div>
</div>
</q-card>
</q-dialog>
</template>
<style lang="scss" scope>
.disabled {
pointer-events: none;
}
</style>

37
src/modules/09_coin/components/coinReport/coinReportMain.vue
View file

@ -1,37 +0,0 @@
<script setup lang="ts"></script>
<template>
<div class="toptitle text-dark col-12 row items-center">
รายงานเครื่องราชอิสริยาภรณ์
</div>
<div>
<q-card flat bordered class="col-12 q-mt-sm">
<div class="q-pa-md">
<q-item to="/coin/coinReport/detail" dense class="hover-green">
<q-item-section avatar>
<q-icon color="primary" name="mdi-file" size="xs" />
</q-item-section>
<q-item-section class="text-dark">
บัญชีแสดงจำนวนชั้นตราเหรียนจักรพรรดิมาลา
ซึ่งขอพระราชทานให้เเก่ข้าราชการ
</q-item-section>
</q-item>
<q-item to="/coin/coinReport/detail" dense class="hover-green">
<q-item-section avatar>
<q-icon color="primary" name="mdi-file" size="xs" />
</q-item-section>
<q-item-section class="text-dark">
บันทึกรายชื่อข้าราชการผู้ขอพระราชทานเหรียญจักรพรรคดิมาลาและประวัติข้าราชการสามัญฯ
</q-item-section>
</q-item>
</div>
</q-card>
</div>
</template>
<style lang="scss" scope>
.hover-green:hover {
background-color: $teal-1;
}
</style>

28
src/modules/09_coin/components/dialog/DialogHeader.vue
View file

@ -1,28 +0,0 @@
<template>
<q-toolbar>
<q-toolbar-title class="text-subtitle2 text-bold">{{
tittle
}}</q-toolbar-title>
<q-btn
icon="close"
unelevated
round
dense
@click="close"
style="color: #ff8080; background-color: #ffdede"
/>
</q-toolbar>
</template>
<script setup lang="ts">
const props = defineProps({
tittle: String,
close: {
type: Function,
default: () => console.log("not function"),
},
});
const close = async () => {
props.close();
};
</script>

1
src/modules/09_coin/interface/index/Main.ts
View file

@ -1 +0,0 @@
export type {};

1
src/modules/09_coin/interface/request/Main.ts
View file

@ -1 +0,0 @@
export type {};

1
src/modules/09_coin/interface/response/Main.ts
View file

@ -1 +0,0 @@
export type {};

171
src/modules/09_coin/router.ts
View file

@ -1,171 +0,0 @@
/**
* Router (coin)
*/
const Main = () => import("@/modules/09_coin/views/Main.vue");
const CoinHistory = () => import("@/modules/09_coin/components/Coin.vue");
const coinProposals = () =>
import("@/modules/09_coin/components/1_Proposals/listProposals.vue");
const coinRoundAdd = () =>
import("@/modules/09_coin/components/1_Proposals/addProposals.vue");
const coinRequestMain = () => import("@/modules/09_coin/components/CoinRequest/coinRequestMain.vue")
const coinAllocateMain = () => import("@/modules/09_coin/components/coinAllocate/coinAllocateMain.vue")
const coinAllocateAdd = () => import("@/modules/09_coin/components/coinAllocate/coinAllocateAdd.vue")
const coinAllocateDetail = () => import("@/modules/09_coin/components/coinAllocate/coinAllocateDetail.vue")
const coinAllocateDetailAdd = () => import("@/modules/09_coin/components/coinAllocate/coinAllocateDetailAdd.vue")
const coinReport = () => import("@/modules/09_coin/components/coinReport/coinReportMain.vue")
const coinReportDetail = () => import("@/modules/09_coin/components/coinReport/coinReportDetail.vue")
const mainMange = () => import("@/modules/09_coin/components/2_Manage/Main.vue");
const mainReceive = () => import("@/modules/09_coin/components/3_Receive/Main.vue");
const mainPayment = () => import("@/modules/09_coin/components/4_Payment/Main.vue");
export default [
{
path: "/coin",
name: "coin",
component: Main,
meta: {
Auth: true,
Key: [8.2],
Role: "coin",
},
},
{
path: "/coin/round-proposals",
name: "coinProposals",
component: coinProposals,
meta: {
Auth: true,
Key: [8.2],
Role: "coin",
},
},
{
path: "/coin/round-add",
name: "coinRoundAdd",
component: coinRoundAdd,
meta: {
Auth: true,
Key: [8.2],
Role: "coin",
},
},
{
path: "/coin/round-add/:id",
name: "coinRoundEdit",
component: coinRoundAdd,
meta: {
Auth: true,
Key: [8.2],
Role: "coin",
},
},
{
path: "/coin/history",
name: "coinHistory",
component: CoinHistory,
meta: {
Auth: true,
Key: [8.2],
Role: "coin",
},
},
{
path: "/coin/request",
name: "coinRequest",
component: coinRequestMain,
meta: {
Auth: true,
Key: [8.2],
Role: "coin",
},
},
{
path: "/coin/manage",
name: "coinManage",
component: mainMange,
meta: {
Auth: true,
Key: [8.2],
Role: "coin",
},
},
{
path: "/coin/allocate/list-allocate",
name: "coinAllocate",
component: coinAllocateMain,
meta: {
Auth: true,
Key: [8.2],
Role: "coin",
},
},
{
path: "/coin/receive",
name: "coinReceive",
component: mainReceive,
meta: {
Auth: true,
Key: [8.2],
Role: "coin",
},
},
{
path: "/coin/allocate/allocate-add",
name: "coinAllocate-Add",
component: coinAllocateAdd,
meta: {
Auth: true,
Key: [8.2],
Role: "coin",
},
},
{
path: "/coin/allocate/detail/:id",
name: "coinAllocate-detail",
component: coinAllocateDetail,
meta: {
Auth: true,
Key: [8.2],
Role: "coin",
},
},
{
path: "/coin/allocate/detail-add",
name: "coinAllocate-detailAdd",
component: coinAllocateDetailAdd,
meta: {
Auth: true,
Key: [8.2],
Role: "coin",
},
},
{
path: "/coin/coinReport",
name: "coinReport",
component: coinReport,
meta: {
Auth: true,
Key: [8.2],
Role: "coin",
},
},
{
path: "/coin/coinReport/detail",
name: "coinReportDetail",
component: coinReportDetail,
meta: {
Auth: true,
Key: [8.2],
Role: "coin",
},
},
{ path: "/coin/payment",
name: "coinPayment",
component: mainPayment,
meta: {
Auth: true,
Key: [8.2],
Role: "coin",
},
},
];

5
src/modules/09_coin/store.ts
View file

@ -1,5 +0,0 @@
import { defineStore } from "pinia";
export const useCoinDataStore = defineStore("coin", () => {
return {};
});

12
src/modules/09_coin/views/Main.vue
View file

@ -1,12 +0,0 @@
<script setup lang="ts"></script>
<template>
<div class="toptitle text-dark col-12 row items-center">
เหรียญจักรพรรดิมาลา
</div>
<div>
<q-card flat bordered class="col-12 q-mt-sm"> </q-card>
</div>
</template>
<style lang="scss" scope></style>