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

- ปรับหน้าเพิ่มขรก.ของรับโอน

Browse source 
- แก้ error ส่วนของทะเบียนประวัติ
- ลบเมนูในส่วนของเหรียญจักรพรรค
This commit is contained in:
Warunee Tamkoo 2023-09-19 14:58:54 +07:00
parent 8ebbef05d9
commit 1c83867fb7
34 changed files with 725 additions and 7104 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/information/Information.vue
View file

@ -116,7 +116,7 @@
lazy-rules
:readonly="!edit"
:borderless="!edit"
:model-value="date2Thai(informaData.birthDate)"
:model-value="informaData.birthDate ? date2Thai(informaData.birthDate) : null"
:rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
:label="`${'วัน/เดือน/ปี เกิด'}`"
>
@ -1054,7 +1054,7 @@ const editData = async () => {
nationality: informaData.value.nationality,
race: informaData.value.ethnicity,
religionId: informaData.value.religionId,
birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
birthDate: informaData.value.birthDate ? dateToISO(informaData.value.birthDate) : dateToISO(new Date()),
bloodGroupId: informaData.value.bloodId,
relationshipId: informaData.value.statusId,
telephoneNumber: informaData.value.tel,

2
src/components/information/interface/index/Main.ts
View file

@ -1,4 +1,4 @@
import type { zipCodeOption } from "../../components/profileType";
import type { zipCodeOption } from "@/components/information/interface/index/profileType";
interface Pagination {
rowsPerPage: number;
}

210
src/components/information/interface/index/profileType.ts Normal file
View file

@ -0,0 +1,210 @@
//interface class array object {name string ,id number}
import type { childrenFamily } from "@/modules/04_registry/interface/response/Family";
interface ChangeActive {
name: string;
id: number;
}
//ข้อมูลส่วนตัว
interface Information {
cardid: string | null;
prefix: string | null;
age: string | null;
prefixId: string | null;
firstname: string | null;
lastname: string | null;
birthDate: Date | null;
genderId: string | null;
bloodId: string | null;
nationality: string | null;
ethnicity: string | null;
statusId: string | null;
religionId: string | null;
tel: string | null;
employeeType: string | null;
employeeClass: string | null;
profileType: string | null;
}
interface Family {
prefixC: string | null; // couple
prefixIdC: string | null;
firstnameC: string | null;
lastnameC: string | null;
lastnameCOld: string | null;
occupationC: string | null;
citizenIdC: string | null;
liveC: string | null;
prefixM: string | null; // male
prefixIdM: string | null;
firstnameM: string | null;
lastnameM: string | null;
occupationM: string | null;
citizenIdM: string | null;
liveM: string | null;
prefixF: string | null; // female
prefixIdF: string | null;
firstnameF: string | null;
lastnameF: string | null;
occupationF: string | null;
citizenIdF: string | null;
liveF: string | null;
same: string | null;
childrens: childrenFamily[];
}
interface Address {
address: string | null;
provinceId: string | null;
districtId: string | null;
subdistrictId: string | null;
addressC: string | null;
provinceIdC: string | null;
districtIdC: string | null;
subdistrictIdC: string | null;
same: string | null;
codec: string | null;
codep: string | null;
}
interface Goverment {
ocId: string | null;
positionId: string | null;
positionPathSide: string | null;
positionLine: string | null;
positionType: string | null;
positionLevel: string | null;
numberId: string | null;
positionExecutive: string | null;
positionExecutiveSide: string | null;
containDate: Date;
workDate: Date;
retireDate: string | null;
absent: number | null;
age: number | null;
ageAll: string | null;
reasonSameDate: string | null;
}
interface DataOption {
id: string;
name: string;
zipCode?: string;
}
interface zipCodeOption {
id: string;
name: string;
zipCode: string;
}
const defaultGoverment: Goverment = {
ocId: null,
positionId: null,
positionPathSide: null,
positionLine: null,
positionType: null,
positionLevel: null,
numberId: null,
positionExecutive: null,
positionExecutiveSide: null,
containDate: new Date(),
workDate: new Date(),
retireDate: null,
absent: 0,
age: 0,
ageAll: null,
reasonSameDate: null,
};
const defaultAddress: Address = {
address: null,
provinceId: null,
districtId: null,
subdistrictId: null,
addressC: null,
provinceIdC: null,
districtIdC: null,
subdistrictIdC: null,
codec: null,
codep: null,
same: "0",
};
const defaultInformation: 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 defaultTempInformation: any = {
employeeMoneyIncrease: null,
employeeMoneyAllowance: null,
employeeMoneyEmployee: null,
employeeMoneyEmployer: null,
positionEmployeeGroupId: null,
positionEmployeePositionId: null,
positionEmployeeLineId: null,
employeeTypeIndividual: null,
employeeOc: null,
employeeWage: null,
};
const defaultFamily: Family = {
prefixC: null,
prefixIdC: null,
firstnameC: null,
lastnameC: null,
lastnameCOld: null,
occupationC: null,
citizenIdC: null,
liveC: "1",
prefixM: null,
prefixIdM: null,
firstnameM: null,
lastnameM: null,
occupationM: null,
citizenIdM: null,
liveM: "1",
prefixF: null,
prefixIdF: null,
firstnameF: null,
lastnameF: null,
occupationF: null,
citizenIdF: null,
liveF: "1",
same: "0",
childrens: [],
};
export {
defaultInformation,
defaultFamily,
defaultAddress,
defaultGoverment,
defaultTempInformation,
};
export type {
ChangeActive,
Information,
Family,
Address,
Goverment,
DataOption,
zipCodeOption,
};

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>

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>