Merge branch 'nice_dev' into develop
# Conflicts: # src/modules/05_placement/components/PersonalList/Table.vue # src/modules/06_retirement/router.ts
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
commit
4d369dbad7
13 changed files with 2752 additions and 66 deletions
|
|
@ -105,10 +105,10 @@ const fetchplacementPosition = async () => {
|
||||||
const search = ref<string>("");
|
const search = ref<string>("");
|
||||||
//reset Tree Filter
|
//reset Tree Filter
|
||||||
const filterRef = ref<any>(null);
|
const filterRef = ref<any>(null);
|
||||||
const resetFilter = () => {
|
// const resetFilter = () => {
|
||||||
search.value = "";
|
// search.value = "";
|
||||||
filterRef.value.focus();
|
// filterRef.value.focus();
|
||||||
};
|
// };
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
personalId: String,
|
personalId: String,
|
||||||
|
|
@ -155,6 +155,8 @@ const validateData = async () => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const saveAppoint = async () => {
|
const saveAppoint = async () => {
|
||||||
|
console.log("save", dataForm);
|
||||||
|
|
||||||
myFormPosition.value.validate().then(async (result: boolean) => {
|
myFormPosition.value.validate().then(async (result: boolean) => {
|
||||||
if (result) {
|
if (result) {
|
||||||
const dataAppoint = await {
|
const dataAppoint = await {
|
||||||
|
|
@ -170,8 +172,7 @@ const saveAppoint = async () => {
|
||||||
// mouthSalaryAmount: dataForm.mouthSalaryAmount,
|
// mouthSalaryAmount: dataForm.mouthSalaryAmount,
|
||||||
// positionSalaryAmount: dataForm.positionSalaryAmount,
|
// positionSalaryAmount: dataForm.positionSalaryAmount,
|
||||||
};
|
};
|
||||||
// console.log("save appoint===>", dataAppoint);
|
console.log("save appoint===>", dataAppoint);
|
||||||
|
|
||||||
showLoader();
|
showLoader();
|
||||||
await http
|
await http
|
||||||
.post(config.API.placementPass(), dataAppoint)
|
.post(config.API.placementPass(), dataAppoint)
|
||||||
|
|
@ -184,7 +185,10 @@ const saveAppoint = async () => {
|
||||||
})
|
})
|
||||||
.finally(async () => {
|
.finally(async () => {
|
||||||
await closeAndClear();
|
await closeAndClear();
|
||||||
await resetFilter();
|
// await resetFilter();
|
||||||
|
await fetchPublishFile();
|
||||||
|
await loadTreeData();
|
||||||
|
await fetchplacementPosition();
|
||||||
hideLoader();
|
hideLoader();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -273,8 +277,9 @@ const positionLevelOptions = ref<Object[]>([
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const selectedPosition = async (data: any) => {
|
const selectedPosition = async (data: any) => {
|
||||||
|
console.log("selecteds", data);
|
||||||
if (data.name == null && selected.value != data.keyId) {
|
if (data.name == null && selected.value != data.keyId) {
|
||||||
console.log("selecteds", data);
|
// console.log("selecteds", data);
|
||||||
|
|
||||||
editDataStatus.value = true;
|
editDataStatus.value = true;
|
||||||
selected.value = data.keyId;
|
selected.value = data.keyId;
|
||||||
|
|
@ -299,9 +304,9 @@ const selectedPosition = async (data: any) => {
|
||||||
|
|
||||||
// positionPathSide Options
|
// positionPathSide Options
|
||||||
let positionPathSideArr: any = [];
|
let positionPathSideArr: any = [];
|
||||||
if (data.positionSideNameObj != null) {
|
if (data.positionSideNameObj && data.positionSideNameObj != null) {
|
||||||
data.positionSideNameObj.map((x: any) => {
|
data.positionSideNameObj.map((x: any) => {
|
||||||
positionLevelsArr.push({
|
positionPathSideArr.push({
|
||||||
label: x.Name,
|
label: x.Name,
|
||||||
value: x.Id,
|
value: x.Id,
|
||||||
});
|
});
|
||||||
|
|
@ -345,6 +350,7 @@ const selectedPosition = async (data: any) => {
|
||||||
positionLevelsArr.length > 1 || positionLevelsArr.length == 0
|
positionLevelsArr.length > 1 || positionLevelsArr.length == 0
|
||||||
? ""
|
? ""
|
||||||
: positionLevelsArr[0].value;
|
: positionLevelsArr[0].value;
|
||||||
|
dataForm.positionLevelId = data.positionLevelObj[0].Id;
|
||||||
}
|
}
|
||||||
} else if (selected.value == data.keyId) {
|
} else if (selected.value == data.keyId) {
|
||||||
selected.value = "";
|
selected.value = "";
|
||||||
|
|
@ -355,6 +361,7 @@ const selectedPosition = async (data: any) => {
|
||||||
dataForm.positionPathSideId = "";
|
dataForm.positionPathSideId = "";
|
||||||
dataForm.positionTypeId = "";
|
dataForm.positionTypeId = "";
|
||||||
}
|
}
|
||||||
|
console.log("dataForm", dataForm);
|
||||||
};
|
};
|
||||||
|
|
||||||
const checkPosition = (val: string) => {
|
const checkPosition = (val: string) => {
|
||||||
|
|
@ -374,14 +381,14 @@ watch(props, () => {
|
||||||
console.log("personal", personal.value);
|
console.log("personal", personal.value);
|
||||||
}
|
}
|
||||||
// console.log("draft===>", personal.value.draft);
|
// console.log("draft===>", personal.value.draft);
|
||||||
|
|
||||||
if (personal.value && personal.value.draft === false) {
|
if (personal.value && personal.value.draft === false) {
|
||||||
// const findData = dataRespone.value.find(findByPerson);
|
// const findData = dataRespone.value.find(findByPerson);
|
||||||
let findData: any = null;
|
let findData: any = null;
|
||||||
console.log(dataRespone.value);
|
|
||||||
|
|
||||||
dataRespone.value.map((x: any) => {
|
dataRespone.value.map((x: any) => {
|
||||||
findData = findByPerson(x);
|
findData = findByPerson(x);
|
||||||
|
console.log(findData);
|
||||||
|
|
||||||
if (findData != null) {
|
if (findData != null) {
|
||||||
console.log("findData===>", findData);
|
console.log("findData===>", findData);
|
||||||
selectedPosition(findData);
|
selectedPosition(findData);
|
||||||
|
|
@ -403,9 +410,7 @@ function findByPerson(element: any): any {
|
||||||
element.positionTypeId === personal.value.positionTypeId &&
|
element.positionTypeId === personal.value.positionTypeId &&
|
||||||
element.positionNumId === personal.value.posNoId &&
|
element.positionNumId === personal.value.posNoId &&
|
||||||
(element.positionLevelObj === null ||
|
(element.positionLevelObj === null ||
|
||||||
element.positionLevelObj[0].Id === personal.value.positionLevelId) &&
|
element.positionLevelObj[0].Id === personal.value.positionLevelId)
|
||||||
(element.positionSideNameObj === null ||
|
|
||||||
element.positionSideNameObj[0].Id === personal.value.positionPathSideId)
|
|
||||||
) {
|
) {
|
||||||
return element;
|
return element;
|
||||||
} else if (element.children) {
|
} else if (element.children) {
|
||||||
|
|
|
||||||
|
|
@ -466,11 +466,26 @@ const clickClose = async () => {
|
||||||
modal.value = false;
|
modal.value = false;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
const displayAdd = ref<boolean>(true);
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
if (keycloak.tokenParsed != null) {
|
if (keycloak.tokenParsed != null) {
|
||||||
roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
|
roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
|
||||||
console.log("roleAdmin===>", roleAdmin);
|
console.log("roleAdmin===>", roleAdmin.value);
|
||||||
|
if (roleAdmin.value === false) {
|
||||||
|
displayAdd.value = false;
|
||||||
|
visibleColumns.value = [
|
||||||
|
"position",
|
||||||
|
"fullName",
|
||||||
|
"examNumber",
|
||||||
|
"idCard",
|
||||||
|
"positionNumber",
|
||||||
|
"organizationName",
|
||||||
|
"reportingDate",
|
||||||
|
"bmaOfficer",
|
||||||
|
"statusName",
|
||||||
|
"positionCandidate",
|
||||||
|
];
|
||||||
|
}
|
||||||
}
|
}
|
||||||
await getTable();
|
await getTable();
|
||||||
});
|
});
|
||||||
|
|
@ -541,6 +556,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<q-form ref="myForm">
|
<q-form ref="myForm">
|
||||||
|
<<<<<<< HEAD
|
||||||
<Table :contain-status="containStatus" :rows="rows" :columns="columns" :filter="filter"
|
<Table :contain-status="containStatus" :rows="rows" :columns="columns" :filter="filter"
|
||||||
:visible-columns="visibleColumns" v-model:inputfilter="filter" v-model:inputvisible="visibleColumns"
|
:visible-columns="visibleColumns" v-model:inputfilter="filter" v-model:inputvisible="visibleColumns"
|
||||||
v-model:editvisible="editvisible" v-model:containfilter="containStatus"
|
v-model:editvisible="editvisible" v-model:containfilter="containStatus"
|
||||||
|
|
@ -561,6 +577,51 @@ const paginationLabel = (start: number, end: number, total: number) => {
|
||||||
<div class="text-weight-medium">{{ props.row.name }}</div>
|
<div class="text-weight-medium">{{ props.row.name }}</div>
|
||||||
<div class="text-weight-light">{{ props.row.idCard }}</div>
|
<div class="text-weight-light">{{ props.row.idCard }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
=======
|
||||||
|
<Table
|
||||||
|
:contain-status="containStatus"
|
||||||
|
:rows="rows"
|
||||||
|
:columns="columns"
|
||||||
|
:filter="filter"
|
||||||
|
:visible-columns="visibleColumns"
|
||||||
|
v-model:inputfilter="filter"
|
||||||
|
v-model:inputvisible="visibleColumns"
|
||||||
|
v-model:editvisible="editvisible"
|
||||||
|
v-model:containfilter="containStatus"
|
||||||
|
@update-modaladdlist="handleModalAddListUpdate"
|
||||||
|
:history="true"
|
||||||
|
:boss="true"
|
||||||
|
:saveNoDraft="true"
|
||||||
|
:role-admin="roleAdmin"
|
||||||
|
:displayAdd="displayAdd"
|
||||||
|
>
|
||||||
|
<template #columns="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-td
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
@click="selectData(props.row.personalId)"
|
||||||
|
class="cursor-pointer"
|
||||||
|
>
|
||||||
|
<template v-if="col.name === 'position'">
|
||||||
|
{{ props.rowIndex + 1 }}
|
||||||
|
</template>
|
||||||
|
<template
|
||||||
|
v-else-if="col.name === 'fullName'"
|
||||||
|
class="table_ellipsis"
|
||||||
|
>
|
||||||
|
<div class="row col-12 text-no-wrap items-center">
|
||||||
|
<img
|
||||||
|
v-if="props.row.avatar == null"
|
||||||
|
src="@/assets/avatar_user.jpg"
|
||||||
|
class="col-4 img-info"
|
||||||
|
/>
|
||||||
|
<img v-else :src="props.row.avatar" class="col-4 img-info" />
|
||||||
|
<div class="col-4">
|
||||||
|
<div class="text-weight-medium">{{ props.row.name }}</div>
|
||||||
|
<div class="text-weight-light">{{ props.row.idCard }}</div>
|
||||||
|
>>>>>>> nice_dev
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="col.name === 'examNumber'">
|
<template v-else-if="col.name === 'examNumber'">
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@ const props = defineProps({
|
||||||
},
|
},
|
||||||
personalId: {
|
personalId: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ""
|
default: "",
|
||||||
},
|
},
|
||||||
validate: {
|
validate: {
|
||||||
type: Function,
|
type: Function,
|
||||||
|
|
@ -27,8 +27,7 @@ const props = defineProps({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const rows = ref<any[]>([
|
const rows = ref<any[]>([]);
|
||||||
]);
|
|
||||||
//--------------------(แปลงวันที่เป็นไทย)------------------------------------//
|
//--------------------(แปลงวันที่เป็นไทย)------------------------------------//
|
||||||
// const graduationDate = new Date(graduationExample);
|
// const graduationDate = new Date(graduationExample);
|
||||||
// rows.value[0].graduation = date2Thai(graduationDate, false, false);
|
// rows.value[0].graduation = date2Thai(graduationDate, false, false);
|
||||||
|
|
@ -81,7 +80,6 @@ const myForm = ref<any>([]);
|
||||||
const personalForm = ref<any>([]);
|
const personalForm = ref<any>([]);
|
||||||
const selection = ref<any>([]);
|
const selection = ref<any>([]);
|
||||||
|
|
||||||
|
|
||||||
const $q = useQuasar();
|
const $q = useQuasar();
|
||||||
|
|
||||||
function isRequired(val: any): boolean | string {
|
function isRequired(val: any): boolean | string {
|
||||||
|
|
@ -166,21 +164,22 @@ const close = async () => {
|
||||||
rows.value = [];
|
rows.value = [];
|
||||||
};
|
};
|
||||||
const putpersonalForm = async () => {
|
const putpersonalForm = async () => {
|
||||||
await http
|
props.close();
|
||||||
.put(
|
// await http
|
||||||
config.API.putProperty("0a846508-4932-40de-9a9e-5b519492217c"),
|
// .put(
|
||||||
personalForm.value.isProperty
|
// config.API.putProperty("0a846508-4932-40de-9a9e-5b519492217c"),
|
||||||
)
|
// personalForm.value.isProperty
|
||||||
.then((res) => {
|
// )
|
||||||
success($q, res.data.message);
|
// .then((res) => {
|
||||||
})
|
// success($q, res.data.message);
|
||||||
.catch((e) => {
|
// })
|
||||||
console.log(e);
|
// .catch((e) => {
|
||||||
})
|
// console.log(e);
|
||||||
.finally(() => {
|
// })
|
||||||
props.close();
|
// .finally(() => {
|
||||||
props.validate();
|
// props.close();
|
||||||
});
|
// props.validate();
|
||||||
|
// });
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -188,7 +187,10 @@ const putpersonalForm = async () => {
|
||||||
<q-card style="max-width: 100%; width: 80%">
|
<q-card style="max-width: 100%; width: 80%">
|
||||||
<q-form ref="myForm">
|
<q-form ref="myForm">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<DialogHeader :title="`รายละเอียดของ ${personalForm.fullName}`" @click="close" />
|
<DialogHeader
|
||||||
|
:title="`รายละเอียดของ ${personalForm.fullName}`"
|
||||||
|
@click="close"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<q-separator />
|
<q-separator />
|
||||||
|
|
||||||
|
|
@ -197,10 +199,13 @@ const putpersonalForm = async () => {
|
||||||
<q-card bordered class="card-panding">
|
<q-card bordered class="card-panding">
|
||||||
<div class="row items-center q-pa-xs header-text">
|
<div class="row items-center q-pa-xs header-text">
|
||||||
ข้อมูลทั่วไป
|
ข้อมูลทั่วไป
|
||||||
<span v-if="personalForm.bmaOfficer != null" class="check-officer">
|
<span
|
||||||
<q-icon name="mdi-check" />
|
v-if="personalForm.bmaOfficer != null"
|
||||||
{{ formBmaofficer(personalForm.bmaOfficer) }}
|
class="check-officer"
|
||||||
</span>
|
>
|
||||||
|
<q-icon name="mdi-check" />
|
||||||
|
{{ formBmaofficer(personalForm.bmaOfficer) }}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="row q-pa-xs">
|
<div class="row q-pa-xs">
|
||||||
<div class="col-3 header-sub-text">
|
<div class="col-3 header-sub-text">
|
||||||
|
|
@ -244,8 +249,18 @@ const putpersonalForm = async () => {
|
||||||
<div class="contanier-box-mini">
|
<div class="contanier-box-mini">
|
||||||
<q-card bordered class="card-panding">
|
<q-card bordered class="card-panding">
|
||||||
<div class="row items-center q-pa-xs header-text">การศึกษา</div>
|
<div class="row items-center q-pa-xs header-text">การศึกษา</div>
|
||||||
<q-table ref="table" :rows="rows" :columns="columns" flat bordered class="custom-header-table"
|
<q-table
|
||||||
virtual-scroll :virtual-scroll-sticky-size-start="48" dense hide-bottom>
|
ref="table"
|
||||||
|
:rows="rows"
|
||||||
|
:columns="columns"
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
class="custom-header-table"
|
||||||
|
virtual-scroll
|
||||||
|
:virtual-scroll-sticky-size-start="48"
|
||||||
|
dense
|
||||||
|
hide-bottom
|
||||||
|
>
|
||||||
</q-table>
|
</q-table>
|
||||||
</q-card>
|
</q-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -320,19 +335,24 @@ const putpersonalForm = async () => {
|
||||||
<div class="contanier-box-mini">
|
<div class="contanier-box-mini">
|
||||||
<q-card bordered class="card-panding">
|
<q-card bordered class="card-panding">
|
||||||
<div class="col-12 row items-center q-pa-sm header-text">
|
<div class="col-12 row items-center q-pa-sm header-text">
|
||||||
การคัดกรองคุณสมบัติ
|
เอกสารเพิ่มเติม
|
||||||
</div>
|
</div>
|
||||||
<div v-for="(item, index) of personalForm.isProperty" :key="index" class="q-pa-sm">
|
<!-- <div v-for="(item, index) of personalForm.isProperty" :key="index" class="q-pa-sm">
|
||||||
<q-checkbox size="xs" v-model="item.value" :val="item.value" :label="item.name" keep-color color="teal"
|
<q-checkbox size="xs" v-model="item.value" :val="item.value" :label="item.name" keep-color color="teal"
|
||||||
:rules="[isRequired]" class="checkbox-group" />
|
:rules="[isRequired]" class="checkbox-group" />
|
||||||
<q-separator />
|
<q-separator />
|
||||||
</div>
|
</div> -->
|
||||||
</q-card>
|
</q-card>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<q-separator />
|
<q-separator />
|
||||||
<div>
|
<div>
|
||||||
<DialogFooter @click="ClickSave" :model="props.Modal" :editvisible="save" :validate="validateData" />
|
<DialogFooter
|
||||||
|
@click="ClickSave"
|
||||||
|
:model="props.Modal"
|
||||||
|
:editvisible="save"
|
||||||
|
:validate="validateData"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</q-form>
|
</q-form>
|
||||||
</q-card>
|
</q-card>
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,14 @@
|
||||||
@update:model-value="updateContain"
|
@update:model-value="updateContain"
|
||||||
/>
|
/>
|
||||||
<div>
|
<div>
|
||||||
<q-btn flat round color="primary" icon="mdi-account-arrow-right" @click="updateModaladdlist" />
|
<q-btn
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
color="primary"
|
||||||
|
icon="mdi-account-arrow-right"
|
||||||
|
@click="updateModaladdlist"
|
||||||
|
v-if="displayAdd"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<q-space />
|
<q-space />
|
||||||
<div class="items-center" style="display: flex">
|
<div class="items-center" style="display: flex">
|
||||||
|
|
@ -109,6 +116,7 @@ const props = defineProps({
|
||||||
editvisible: Boolean,
|
editvisible: Boolean,
|
||||||
titleText: String,
|
titleText: String,
|
||||||
modaladdlist: Boolean,
|
modaladdlist: Boolean,
|
||||||
|
displayAdd: Boolean,
|
||||||
optionsFilter: {
|
optionsFilter: {
|
||||||
type: Array,
|
type: Array,
|
||||||
defualt: [],
|
defualt: [],
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,91 @@
|
||||||
|
<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-sm q-mt-sm">
|
||||||
|
<q-stepper
|
||||||
|
v-model="step"
|
||||||
|
ref="stepper"
|
||||||
|
color="primary"
|
||||||
|
animated
|
||||||
|
class="step"
|
||||||
|
header-class="bg-grey-1"
|
||||||
|
>
|
||||||
|
<q-step
|
||||||
|
:name="1"
|
||||||
|
title="รายละเอียดการออกคำสั่ง"
|
||||||
|
prefix="1"
|
||||||
|
:done="step > 1"
|
||||||
|
:header-nav="step > 1"
|
||||||
|
/>
|
||||||
|
<q-step
|
||||||
|
:name="2"
|
||||||
|
title="เลือกรายชื่อส่งสำเนาคำสั่ง"
|
||||||
|
prefix="2"
|
||||||
|
:done="step > 2"
|
||||||
|
:header-nav="step > 2"
|
||||||
|
/>
|
||||||
|
<q-step
|
||||||
|
:name="3"
|
||||||
|
title="รายละเอียดคำสั่งและแนบท้าย"
|
||||||
|
prefix="3"
|
||||||
|
:header-nav="step > 3"
|
||||||
|
/>
|
||||||
|
<template v-slot:message>
|
||||||
|
<step01 v-if="step === 1" :next="nextStep" :previous="previousStep" />
|
||||||
|
<step02 v-if="step === 2" :next="nextStep" :previous="previousStep" />
|
||||||
|
<step03 v-if="step === 3" :next="nextStep" :previous="previousStep" />
|
||||||
|
</template>
|
||||||
|
</q-stepper>
|
||||||
|
</q-card>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
import { ref, defineAsyncComponent } from "vue";
|
||||||
|
import type { QStepper } from "quasar";
|
||||||
|
|
||||||
|
const step01 = defineAsyncComponent(
|
||||||
|
() => import("@/modules/06_retirement/components/DismissOrder/step01.vue")
|
||||||
|
);
|
||||||
|
const step02 = defineAsyncComponent(
|
||||||
|
() => import("@/modules/06_retirement/components/DismissOrder/step02.vue")
|
||||||
|
);
|
||||||
|
const step03 = defineAsyncComponent(
|
||||||
|
() => import("@/modules/06_retirement/components/DismissOrder/step03.vue")
|
||||||
|
);
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const step = ref<number>(1);
|
||||||
|
const stepper = ref<QStepper>();
|
||||||
|
|
||||||
|
const nextStep = () => {
|
||||||
|
stepper.value!.next();
|
||||||
|
};
|
||||||
|
|
||||||
|
const previousStep = () => {
|
||||||
|
stepper.value!.previous();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.q-stepper--horizontal .q-stepper__step-inner {
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
.step .q-stepper__tab--done .q-stepper__title,
|
||||||
|
.step .q-stepper__tab--active .q-stepper__title {
|
||||||
|
color: #35473c !important;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.step .q-stepper__header--standard-labels .q-stepper__tab {
|
||||||
|
min-height: 60px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,740 @@
|
||||||
|
<template>
|
||||||
|
<div class="toptitle text-dark col-12 row items-center">
|
||||||
|
คำสั่งให้ออก ปลดออก ไล่ออก
|
||||||
|
</div>
|
||||||
|
<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">
|
||||||
|
<q-select
|
||||||
|
class="col-xs-12 col-sm-3 col-md-2"
|
||||||
|
v-model="fiscalyear"
|
||||||
|
label="ปีงบประมาณ"
|
||||||
|
dense
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
:options="fiscalyearOP"
|
||||||
|
option-value="id"
|
||||||
|
option-label="name"
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
:readonly="false"
|
||||||
|
:borderless="false"
|
||||||
|
:outlined="true"
|
||||||
|
:hide-dropdown-icon="false"
|
||||||
|
@update:model-value="searchFilterTable"
|
||||||
|
/>
|
||||||
|
<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-card bordered class="col-12 filter-card q-pa-sm">
|
||||||
|
<div class="row col-12 q-col-gutter-sm">
|
||||||
|
<q-select
|
||||||
|
class="col-xs-12 col-sm-3 col-md-2"
|
||||||
|
v-model="OrderType"
|
||||||
|
label="ประเภท"
|
||||||
|
dense
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
option-label="name"
|
||||||
|
:options="OrderTypeOption"
|
||||||
|
option-value="id"
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
:readonly="false"
|
||||||
|
:borderless="false"
|
||||||
|
:outlined="true"
|
||||||
|
:hide-dropdown-icon="false"
|
||||||
|
@update:model-value="searchFilterTable"
|
||||||
|
/>
|
||||||
|
<q-select
|
||||||
|
class="col-xs-12 col-sm-3 col-md-2"
|
||||||
|
v-model="OrderStatus"
|
||||||
|
label="สถานะ"
|
||||||
|
dense
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
option-label="name"
|
||||||
|
:options="OrderStatusOption"
|
||||||
|
option-value="id"
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
:readonly="false"
|
||||||
|
:borderless="false"
|
||||||
|
:outlined="true"
|
||||||
|
:hide-dropdown-icon="false"
|
||||||
|
@update:model-value="searchFilterTable"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<q-table
|
||||||
|
ref="table"
|
||||||
|
:columns="columns"
|
||||||
|
:rows="UpdataData"
|
||||||
|
: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-tr>
|
||||||
|
</template>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<q-tr
|
||||||
|
:props="props"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="redirectToPage(props.row.Order)"
|
||||||
|
>
|
||||||
|
<q-td key="Order" :props="props">
|
||||||
|
{{ props.row.Order }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="OrderNum" :props="props">
|
||||||
|
{{ props.row.OrderNum }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="OrderType" :props="props">
|
||||||
|
{{ props.row.OrderType }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="OrderDate" :props="props">
|
||||||
|
{{ props.row.OrderDate }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="OrderBy" :props="props">
|
||||||
|
{{ props.row.OrderBy }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="Signer" :props="props">
|
||||||
|
{{ props.row.Signer }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="OrderStatus" :props="props">
|
||||||
|
{{ props.row.OrderStatus }}
|
||||||
|
</q-td>
|
||||||
|
<q-td auto-width>
|
||||||
|
<q-btn
|
||||||
|
dense
|
||||||
|
size="12px"
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
color="red"
|
||||||
|
@click.stop="clickDelete(props.row.id)"
|
||||||
|
icon="mdi-delete"
|
||||||
|
>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, reactive, ref, useAttrs, computed } from "vue";
|
||||||
|
import type { QTableProps } from "quasar";
|
||||||
|
import type { FormOrderPlacementMainData } from "@/modules/05_placement/interface/request/Main";
|
||||||
|
import type { DataOption } from "@/modules/05_placement/interface/index/Main";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
import { useOrderPlacementDataStore } from "@/modules/05_placement/store";
|
||||||
|
import router from "@/router";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
|
||||||
|
const $q = useQuasar(); //ใช้ noti quasar
|
||||||
|
const DataStore = useOrderPlacementDataStore();
|
||||||
|
const pagination = ref({
|
||||||
|
sortBy: "desc",
|
||||||
|
descending: false,
|
||||||
|
page: 1,
|
||||||
|
rowsPerPage: 10,
|
||||||
|
});
|
||||||
|
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const { dateText } = mixin;
|
||||||
|
|
||||||
|
// แปลงเวลา ค.ศ ให้เป็น พ.ศ
|
||||||
|
const textDate = (value: Date) => {
|
||||||
|
return dateText(value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const visibleColumns = ref<string[]>([
|
||||||
|
"Order",
|
||||||
|
"OrderType",
|
||||||
|
"OrderNum",
|
||||||
|
"OrderDate",
|
||||||
|
"OrderBy",
|
||||||
|
"Signer",
|
||||||
|
"OrderStatus",
|
||||||
|
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
|
||||||
|
|
||||||
|
// หัวตาราง
|
||||||
|
const columns = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "Order",
|
||||||
|
align: "left",
|
||||||
|
label: "คำสั่ง",
|
||||||
|
sortable: true,
|
||||||
|
field: "Order",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "OrderNum",
|
||||||
|
align: "left",
|
||||||
|
label: "เลขที่คำสั่ง",
|
||||||
|
sortable: true,
|
||||||
|
field: "OrderNum",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "OrderType",
|
||||||
|
align: "left",
|
||||||
|
label: "ประเภท",
|
||||||
|
sortable: false,
|
||||||
|
field: "OrderType",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "OrderDate",
|
||||||
|
align: "left",
|
||||||
|
label: "สั่ง ณ วันที่/วันที่คำสั่งมีผล",
|
||||||
|
sortable: true,
|
||||||
|
field: "OrderDate",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "OrderBy",
|
||||||
|
align: "left",
|
||||||
|
label: "คำสั่งโดย",
|
||||||
|
sortable: true,
|
||||||
|
field: "OrderBy",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Signer",
|
||||||
|
align: "left",
|
||||||
|
label: "ผู้ลงนาม",
|
||||||
|
sortable: false,
|
||||||
|
field: "Signer",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "OrderStatus",
|
||||||
|
align: "center",
|
||||||
|
label: "สถานะคำสั่ง",
|
||||||
|
sortable: false,
|
||||||
|
field: "OrderStatus",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "fiscalYear",
|
||||||
|
align: "left",
|
||||||
|
label: "ปีงบประมาณ",
|
||||||
|
sortable: true,
|
||||||
|
field: "fiscalYear",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
// ข้อมูลตาราง (จำลอง)
|
||||||
|
const rows = ref<FormOrderPlacementMainData[]>([
|
||||||
|
{
|
||||||
|
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
|
||||||
|
OrderNum: "1/2565",
|
||||||
|
fiscalYear: 2565,
|
||||||
|
OrderDate: "30 พ.ค. 2565",
|
||||||
|
OrderBy: "สำนักงาน กทม.",
|
||||||
|
Signer: "นาม สมคิด ยอดใจ ",
|
||||||
|
OrderStatus: "จัดทำร่างคำสั่ง",
|
||||||
|
OrderType: "คำสั่งย้าย",
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
|
||||||
|
OrderNum: "1/2565",
|
||||||
|
fiscalYear: 2565,
|
||||||
|
OrderDate: "30 พ.ค. 2565",
|
||||||
|
OrderBy: "สำนักงาน กทม.",
|
||||||
|
Signer: "นาม สมคิด ยอดใจ ",
|
||||||
|
OrderStatus: "จัดทำร่างคำสั่ง",
|
||||||
|
OrderType: "คำสั่งบรรจุและแต่งตั้ง",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
|
||||||
|
OrderNum: "1/2564",
|
||||||
|
fiscalYear: 2564,
|
||||||
|
OrderDate: "30 พ.ค. 2564",
|
||||||
|
OrderBy: "สำนักงาน กทม.",
|
||||||
|
Signer: "นาม สมคิด ยอดใจ ",
|
||||||
|
OrderStatus: "บัญชีแนบท้าย",
|
||||||
|
OrderType: "คำสั่งบรรจุและแต่งตั้ง",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
|
||||||
|
OrderNum: "1/2564",
|
||||||
|
fiscalYear: 2564,
|
||||||
|
OrderDate: "30 พ.ค. 2564",
|
||||||
|
OrderBy: "สำนักงาน กทม.",
|
||||||
|
Signer: "นาม สมคิด ยอดใจ ",
|
||||||
|
OrderStatus: "บัญชีแนบท้าย",
|
||||||
|
OrderType: "คำสั่งย้าย",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
|
||||||
|
OrderNum: "1/2564",
|
||||||
|
fiscalYear: 2564,
|
||||||
|
OrderDate: "30 พ.ค. 2564",
|
||||||
|
OrderBy: "สำนักงาน กทม.",
|
||||||
|
Signer: "นาม สมคิด ยอดใจ ",
|
||||||
|
OrderStatus: "ส่งสำเนาคำสั่ง",
|
||||||
|
OrderType: "คำสั่งย้าย",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
|
||||||
|
OrderNum: "1/2564",
|
||||||
|
fiscalYear: 2564,
|
||||||
|
OrderDate: "30 พ.ค. 2564",
|
||||||
|
OrderBy: "สำนักงาน กทม.",
|
||||||
|
Signer: "นาม สมคิด ยอดใจ ",
|
||||||
|
OrderStatus: "ส่งสำเนาคำสั่ง",
|
||||||
|
OrderType: "คำสั่งบรรจุและแต่งตั้ง",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
|
||||||
|
OrderNum: "1/2566",
|
||||||
|
fiscalYear: 2566,
|
||||||
|
OrderDate: "30 พ.ค. 2566",
|
||||||
|
OrderBy: "สำนักงาน กทม.",
|
||||||
|
Signer: "นาม สมคิด ยอดใจ ",
|
||||||
|
OrderStatus: "รอลงนาม",
|
||||||
|
OrderType: "คำสั่งบรรจุและแต่งตั้ง",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
|
||||||
|
OrderNum: "1/2566",
|
||||||
|
fiscalYear: 2566,
|
||||||
|
OrderDate: "30 พ.ค. 2566",
|
||||||
|
OrderBy: "สำนักงาน กทม.",
|
||||||
|
Signer: "นาม สมคิด ยอดใจ ",
|
||||||
|
OrderStatus: "ออกคำสั่งแล้ว",
|
||||||
|
OrderType: "คำสั่งแต่งตั้ง",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
|
||||||
|
OrderNum: "1/2565",
|
||||||
|
fiscalYear: 2565,
|
||||||
|
OrderDate: "30 พ.ค. 2565",
|
||||||
|
OrderBy: "สำนักงาน กทม.",
|
||||||
|
Signer: "นาม สมคิด ยอดใจ ",
|
||||||
|
OrderStatus: "ออกคำสั่งแล้ว",
|
||||||
|
OrderType: "คำสั่งบรรจุและแต่งตั้ง",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
|
||||||
|
OrderNum: "1/2566",
|
||||||
|
fiscalYear: 2566,
|
||||||
|
OrderDate: "30 พ.ค. 2566",
|
||||||
|
OrderBy: "สำนักงาน กทม.",
|
||||||
|
Signer: "นาม สมคิด ยอดใจ ",
|
||||||
|
OrderStatus: "ออกคำสั่งแล้ว",
|
||||||
|
OrderType: "คำสั่งแต่งตั้ง",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
|
||||||
|
OrderNum: "1/2566",
|
||||||
|
fiscalYear: 2566,
|
||||||
|
OrderDate: "30 พ.ค. 2566",
|
||||||
|
OrderBy: "สำนักงาน กทม.",
|
||||||
|
Signer: "นาม สมคิด ยอดใจ ",
|
||||||
|
OrderStatus: "ออกคำสั่งแล้ว",
|
||||||
|
OrderType: "คำสั่งย้าย",
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
|
||||||
|
OrderNum: "1/2564",
|
||||||
|
fiscalYear: 2564,
|
||||||
|
OrderDate: "30 พ.ค. 2564",
|
||||||
|
OrderBy: "สำนักงาน กทม.",
|
||||||
|
Signer: "นาม สมคิด ยอดใจ ",
|
||||||
|
OrderStatus: "ออกคำสั่งแล้ว",
|
||||||
|
OrderType: "คำสั่งแต่งตั้ง",
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
|
||||||
|
OrderNum: "1/2566",
|
||||||
|
fiscalYear: 2566,
|
||||||
|
OrderDate: "30 พ.ค. 2566",
|
||||||
|
OrderBy: "สำนักงาน กทม.",
|
||||||
|
Signer: "นาม สมคิด ยอดใจ ",
|
||||||
|
OrderStatus: "ออกคำสั่งแล้ว",
|
||||||
|
OrderType: "คำสั่งแต่งตั้ง",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
// const OrderStatusOption = [
|
||||||
|
// "ทั้งหมด",
|
||||||
|
// "ยังไม่ได้บรรจุ",
|
||||||
|
// "บรรจุแล้ว",
|
||||||
|
// "ยังไม่ได้ออกคำสั่ง",
|
||||||
|
// ];
|
||||||
|
|
||||||
|
let OriginalData = ref<FormOrderPlacementMainData[]>([]);
|
||||||
|
let UpdataData = ref<FormOrderPlacementMainData[]>([]);
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await OriginalDataFetch();
|
||||||
|
fiscalYearFilter();
|
||||||
|
searchFilterTable();
|
||||||
|
OrderStatusFilter();
|
||||||
|
OrderTypeFilter();
|
||||||
|
});
|
||||||
|
|
||||||
|
const OriginalDataFetch = async () => {
|
||||||
|
// API
|
||||||
|
// await http
|
||||||
|
// .get(config.API.// ตัวอย่าง)
|
||||||
|
// .then((res: any) => {
|
||||||
|
// })
|
||||||
|
// .catch((e: any) => {
|
||||||
|
// messageError($q, e);
|
||||||
|
// })
|
||||||
|
// .finally(async () => {
|
||||||
|
// });
|
||||||
|
await DataStore.DataMainOrder(rows.value);
|
||||||
|
OriginalData.value = await DataStore.DataMainOrigOrder;
|
||||||
|
UpdataData.value = OriginalData.value;
|
||||||
|
};
|
||||||
|
|
||||||
|
// ดูรายการหน้าต่อไป
|
||||||
|
const redirectToPage = (id?: number) => {
|
||||||
|
router.push(`/retirement/dismiss-order/add`);
|
||||||
|
};
|
||||||
|
|
||||||
|
const clickDelete = (id: string) => {
|
||||||
|
$q.dialog({
|
||||||
|
title: "ยืนยันการลบข้อมูล",
|
||||||
|
message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
|
||||||
|
cancel: {
|
||||||
|
flat: true,
|
||||||
|
color: "negative",
|
||||||
|
},
|
||||||
|
persistent: true,
|
||||||
|
})
|
||||||
|
.onOk(async () => {
|
||||||
|
// await deleteData(id);
|
||||||
|
})
|
||||||
|
.onCancel(() => {})
|
||||||
|
.onDismiss(() => {});
|
||||||
|
};
|
||||||
|
|
||||||
|
// const deleteData = async (id: string) => {
|
||||||
|
// loaderPage(true);
|
||||||
|
// await http
|
||||||
|
// .delete(config.API.orderReplace(id))
|
||||||
|
// .then((res) => {
|
||||||
|
// success($q, "ลบข้อมูลสำเร็จ");
|
||||||
|
// })
|
||||||
|
// .catch((e) => {
|
||||||
|
// messageError($q, e);
|
||||||
|
// })
|
||||||
|
// .finally(async () => {
|
||||||
|
// loaderPage(false);
|
||||||
|
// await fetchData();
|
||||||
|
// });
|
||||||
|
// };
|
||||||
|
|
||||||
|
const clickAdd = () => {
|
||||||
|
router.push({ name: "OrderplacementDetail" });
|
||||||
|
};
|
||||||
|
|
||||||
|
// const viewDetail = (id: string, status: string) => {
|
||||||
|
// if (status == "checkPayment") {
|
||||||
|
// router.push(`${route.fullPath}/payment/${id}`);
|
||||||
|
// } else {
|
||||||
|
// router.push(`${route.fullPath}/profile/${id}`);
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
|
||||||
|
// เลือกปีงบประมาณ
|
||||||
|
const fiscalyear = ref<number | null>(0);
|
||||||
|
const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
|
||||||
|
const addedfiscalYearValues: number[] = [];
|
||||||
|
const fiscalYearFilter = async () => {
|
||||||
|
// API
|
||||||
|
// await http
|
||||||
|
// .get(config.API.// ตัวอย่าง)
|
||||||
|
// .then((res: any) => {
|
||||||
|
// DataStore.DataMainYearSet(rows.value);
|
||||||
|
// fiscalyearOP.value = DataStore.DataMainYearGet;
|
||||||
|
// })
|
||||||
|
// .catch((e: any) => {
|
||||||
|
// messageError($q, e);
|
||||||
|
// })
|
||||||
|
// .finally(async () => {
|
||||||
|
// });
|
||||||
|
for (let data of OriginalData.value) {
|
||||||
|
const year = data.fiscalYear;
|
||||||
|
console.log(year);
|
||||||
|
|
||||||
|
if (fiscalyear.value === null || year > fiscalyear.value) {
|
||||||
|
fiscalyear.value = year;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!addedfiscalYearValues.includes(year)) {
|
||||||
|
fiscalyearOP.push({ id: year, name: year.toString() });
|
||||||
|
addedfiscalYearValues.push(year);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const OrderType = ref<string>("");
|
||||||
|
const OrderTypeOption = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
|
||||||
|
const addedOrderTypeValues: string[] = [];
|
||||||
|
const OrderTypeFilter = async () => {
|
||||||
|
// API
|
||||||
|
// await http
|
||||||
|
// .get(config.API.// ตัวอย่าง)
|
||||||
|
// .then((res: any) => {
|
||||||
|
// DataStore.DataMainYearSet(rows.value);
|
||||||
|
// fiscalyearOP.value = DataStore.DataMainYearGet;
|
||||||
|
// })
|
||||||
|
// .catch((e: any) => {
|
||||||
|
// messageError($q, e);
|
||||||
|
// })
|
||||||
|
// .finally(async () => {
|
||||||
|
// });
|
||||||
|
for (let data of OriginalData.value) {
|
||||||
|
const OrderTypeValue = data.OrderType;
|
||||||
|
console.log(OrderTypeValue);
|
||||||
|
|
||||||
|
// if (OrderTypeValue === null || OrderType > OrderTypeValue) {
|
||||||
|
// OrderTypeValue = OrderType;
|
||||||
|
// }
|
||||||
|
if (!addedOrderTypeValues.includes(OrderTypeValue)) {
|
||||||
|
OrderTypeOption.push({
|
||||||
|
// id: OrderTypeValue ?? 0,
|
||||||
|
id: OrderTypeOption.length,
|
||||||
|
name: OrderTypeValue,
|
||||||
|
});
|
||||||
|
addedOrderTypeValues.push(OrderTypeValue);
|
||||||
|
}
|
||||||
|
// if (!addedOrderTypeValues.includes(OrderTypeValue)) {
|
||||||
|
// OrderTypeOption.push({
|
||||||
|
// id: OrderTypeValue,
|
||||||
|
// name: OrderTypeValue.toString(),
|
||||||
|
// });
|
||||||
|
// addedOrderTypeValues.push(OrderTypeValue);
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const OrderStatus = ref<string>("");
|
||||||
|
const OrderStatusText = ref<FormOrderPlacementMainData[]>(
|
||||||
|
DataStore.DataMainOrigOrder
|
||||||
|
);
|
||||||
|
const OrderStatusOption = reactive<DataOption[]>([{ id: 1, name: "ทั้งหมด" }]);
|
||||||
|
const addedOrderStatusValues: string[] = [];
|
||||||
|
const OrderStatusFilter = async () => {
|
||||||
|
// API
|
||||||
|
// await http
|
||||||
|
// .get(config.API.// ตัวอย่าง)
|
||||||
|
// .then((res: any) => {
|
||||||
|
// DataStore.DataMainYearSet(rows.value);
|
||||||
|
// fiscalyearOP.value = DataStore.DataMainYearGet;
|
||||||
|
// })
|
||||||
|
// .catch((e: any) => {
|
||||||
|
// messageError($q, e);
|
||||||
|
// })
|
||||||
|
// .finally(async () => {
|
||||||
|
// });
|
||||||
|
for (let data of OriginalData.value) {
|
||||||
|
const OrderStatusValue = data.OrderStatus;
|
||||||
|
console.log(OrderStatusValue);
|
||||||
|
|
||||||
|
if (
|
||||||
|
OrderStatusValue === null ||
|
||||||
|
parseInt(OrderStatusValue) > parseInt(OrderStatusValue)
|
||||||
|
) {
|
||||||
|
OrderStatus.value = OrderStatusValue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!addedOrderStatusValues.includes(OrderStatusValue)) {
|
||||||
|
OrderStatusOption.push({
|
||||||
|
// id: OrderStatusValue,
|
||||||
|
id: OrderStatusOption.length,
|
||||||
|
name: OrderStatusValue,
|
||||||
|
});
|
||||||
|
addedOrderStatusValues.push(OrderStatusValue);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// เลือกปีงบประมาณตาม API
|
||||||
|
const searchfiscalyear = () => {
|
||||||
|
console.log("Input value changed:", fiscalyear.value);
|
||||||
|
// API
|
||||||
|
// await http
|
||||||
|
// .get(config.API.// ตัวอย่าง)
|
||||||
|
// .then((res: any) => {
|
||||||
|
// })
|
||||||
|
// .catch((e: any) => {
|
||||||
|
// messageError($q, e);
|
||||||
|
// })
|
||||||
|
// .finally(async () => {
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
// ค้นหาในตาราง
|
||||||
|
const filterKeyword = ref<string>("");
|
||||||
|
const filterRef = ref<any>(null);
|
||||||
|
const resetFilter = () => {
|
||||||
|
filterKeyword.value = "";
|
||||||
|
filterRef.value.focus();
|
||||||
|
};
|
||||||
|
|
||||||
|
const attrs = ref<any>(useAttrs());
|
||||||
|
|
||||||
|
const searchFilterTable = async () => {
|
||||||
|
// console.log('Input value changed:', examTime.value, examType.value, expiredAccount.value);
|
||||||
|
await DataStore.DataUpdateOrder(
|
||||||
|
OrderType.value,
|
||||||
|
OrderStatus.value,
|
||||||
|
fiscalyear.value
|
||||||
|
);
|
||||||
|
UpdataData.value = DataStore.DataMainUpdateOrder;
|
||||||
|
};
|
||||||
|
// UpdataData.value = DataStore.DataMainUpdate;
|
||||||
|
// console.log("Input value changed:", OrderStatus.value, OrderType.value);
|
||||||
|
|
||||||
|
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>
|
||||||
353
src/modules/06_retirement/components/DismissOrder/step01.vue
Normal file
353
src/modules/06_retirement/components/DismissOrder/step01.vue
Normal file
|
|
@ -0,0 +1,353 @@
|
||||||
|
<template>
|
||||||
|
<div style="max-height: 68vh; overflow-y: scroll">
|
||||||
|
<q-form ref="myForm" class="q-pa-md">
|
||||||
|
<div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
|
||||||
|
<div class="col-xs-12 col-md-6">
|
||||||
|
<selector
|
||||||
|
:class="getClass(true)"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
v-model="typeOrder"
|
||||||
|
:rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'ประเภทคำสั่ง'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
option-label="name"
|
||||||
|
:options="typeOrderOption"
|
||||||
|
option-value="id"
|
||||||
|
use-input
|
||||||
|
input-debounce="0"
|
||||||
|
@filter="(inputValue:string,
|
||||||
|
doneFn:Function) => filterSelector(inputValue, doneFn,'typeOrderOption'
|
||||||
|
) "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-xs-12 col-md-6">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(true)"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
v-model="nameOrder"
|
||||||
|
:rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
|
||||||
|
:label="`${'คำสั่งเรื่อง'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
hide-bottom-space
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row col-xs-7 col-md-3 q-col-gutter-x-xs">
|
||||||
|
<div class="col-6">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(true)"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
v-model="command"
|
||||||
|
:rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง'}`]"
|
||||||
|
:label="`${'คำสั่ง'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
hide-bottom-space
|
||||||
|
type="number"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<label class="col-1 flex justify-center items-center text-bold"
|
||||||
|
>/</label
|
||||||
|
>
|
||||||
|
<div class="col-5">
|
||||||
|
<datepicker
|
||||||
|
v-model="dateYear"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
year-picker
|
||||||
|
:enableTimePicker="false"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
|
<template #year-overlay-value="{ value }">{{
|
||||||
|
parseInt(value + 543)
|
||||||
|
}}</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
:model-value="dateYear + 543"
|
||||||
|
:rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
|
||||||
|
:label="`${'พ.ศ.'}`"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-5 col-md-3">
|
||||||
|
<datepicker
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="dateCommand"
|
||||||
|
: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"
|
||||||
|
:model-value="
|
||||||
|
dateCommand != null ? date2Thai(dateCommand) : 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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-xs-12 col-md-6">
|
||||||
|
<selector
|
||||||
|
:class="getClass(true)"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
v-model="byOrder"
|
||||||
|
:rules="[(val:string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'คำสั่งโดย'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
option-label="name"
|
||||||
|
:options="byOrderOption"
|
||||||
|
option-value="id"
|
||||||
|
use-input
|
||||||
|
input-debounce="0"
|
||||||
|
@filter="(inputValue:string,
|
||||||
|
doneFn:Function) => filterSelector(inputValue, doneFn,'byOrderOption'
|
||||||
|
) "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-md-6">
|
||||||
|
<!-- :readonly="!edit"
|
||||||
|
:borderless="!edit" -->
|
||||||
|
<q-input
|
||||||
|
:class="getClass(true)"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
v-model="nameCommand"
|
||||||
|
:rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
|
||||||
|
:label="`${'ผู้มีอำนาจลงนาม'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
hide-bottom-space
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-md-6">
|
||||||
|
<!-- :readonly="!edit"
|
||||||
|
:borderless="!edit" -->
|
||||||
|
<q-input
|
||||||
|
:class="getClass(true)"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
v-model="positionCommand"
|
||||||
|
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]"
|
||||||
|
:label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
hide-bottom-space
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<q-separator />
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-md-6">
|
||||||
|
<selector
|
||||||
|
:class="getClass(true)"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
v-model="test"
|
||||||
|
:rules="[(val:string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'ชื่อ-นามสกุล'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
option-label="name"
|
||||||
|
:options="testOption"
|
||||||
|
option-value="id"
|
||||||
|
use-input
|
||||||
|
input-debounce="0"
|
||||||
|
@filter="(inputValue:string,
|
||||||
|
doneFn:Function) => filterSelector(inputValue, doneFn,'testOption'
|
||||||
|
) "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-form>
|
||||||
|
</div>
|
||||||
|
<q-separator />
|
||||||
|
<div class="flex justify-end q-pa-sm q-gutter-sm">
|
||||||
|
<q-btn unelevated label="บันทึก" color="public" @click="submit"> </q-btn>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue";
|
||||||
|
import type { DataOption } from "@/modules/05_placement/interface/index/Main";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
import type { QForm } from "quasar";
|
||||||
|
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const { date2Thai } = mixin;
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
next: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
previous: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const next = () => props.next();
|
||||||
|
const previous = () => props.previous();
|
||||||
|
|
||||||
|
const myForm = ref<QForm>();
|
||||||
|
|
||||||
|
const editRow = ref<boolean>(false);
|
||||||
|
|
||||||
|
const nameOrder = ref<string>("ปลดออก นายก");
|
||||||
|
const nameCommand = ref<string>("");
|
||||||
|
const positionCommand = ref<string>("");
|
||||||
|
const dateYear = ref<number>(new Date().getFullYear());
|
||||||
|
const command = ref<string>("");
|
||||||
|
const dateCommand = ref<Date>(new Date());
|
||||||
|
// const dateRegister = ref<Date>(new Date());
|
||||||
|
// const dateAnnounce = ref<Date>(new Date());
|
||||||
|
|
||||||
|
const typeOrder = ref<string>("ปลดออก");
|
||||||
|
const typeOrderOption = ref<DataOption[]>([]);
|
||||||
|
const typeOrderOptionFilter = ref<DataOption[]>([]);
|
||||||
|
|
||||||
|
const byOrder = ref<string>("");
|
||||||
|
const byOrderOption = ref<DataOption[]>([]);
|
||||||
|
const byOrderOptionFilter = ref<DataOption[]>([]);
|
||||||
|
|
||||||
|
// const register = ref<string>("");
|
||||||
|
const registerOption = ref<DataOption[]>([]);
|
||||||
|
const registerOptionFilter = ref<DataOption[]>([]);
|
||||||
|
|
||||||
|
// const announce = ref<string>("");
|
||||||
|
const announceOption = ref<DataOption[]>([]);
|
||||||
|
const announceOptionFilter = ref<DataOption[]>([]);
|
||||||
|
|
||||||
|
// const position = ref<string>("");
|
||||||
|
const positionOption = ref<DataOption[]>([]);
|
||||||
|
const positionOptionFilter = ref<DataOption[]>([]);
|
||||||
|
|
||||||
|
const test = ref<string>("นายก ข");
|
||||||
|
const testOption = ref<DataOption[]>([]);
|
||||||
|
const testOptionFilter = ref<DataOption[]>([]);
|
||||||
|
|
||||||
|
const clickEditRow = () => (editRow.value = true);
|
||||||
|
|
||||||
|
const filterSelector = (val: any, update: Function, filtername: string) => {
|
||||||
|
switch (filtername) {
|
||||||
|
case "typeOrderOption":
|
||||||
|
update(() => {
|
||||||
|
typeOrderOption.value = typeOrderOptionFilter.value.filter(
|
||||||
|
(v: DataOption) => v.name!.indexOf(val) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "byOrderOption":
|
||||||
|
update(() => {
|
||||||
|
byOrderOption.value = byOrderOptionFilter.value.filter(
|
||||||
|
(v: DataOption) => v.name!.indexOf(val) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "registerOption":
|
||||||
|
update(() => {
|
||||||
|
registerOption.value = registerOptionFilter.value.filter(
|
||||||
|
(v: DataOption) => v.name!.indexOf(val) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "announceOption":
|
||||||
|
update(() => {
|
||||||
|
announceOption.value = announceOptionFilter.value.filter(
|
||||||
|
(v: DataOption) => v.name!.indexOf(val) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "positionOption":
|
||||||
|
update(() => {
|
||||||
|
positionOption.value = positionOptionFilter.value.filter(
|
||||||
|
(v: DataOption) => v.name!.indexOf(val) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "testOption":
|
||||||
|
update(() => {
|
||||||
|
testOption.value = testOptionFilter.value.filter(
|
||||||
|
(v: DataOption) => v.name!.indexOf(val) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const submit = async () => {
|
||||||
|
next();
|
||||||
|
// await myForm.value!.validate().then((result: boolean) => {
|
||||||
|
// if (result) {
|
||||||
|
// next();
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
|
||||||
|
* @param val ข้อมูล input สำหรับแก้ไขหรือไม่
|
||||||
|
*/
|
||||||
|
const getClass = (val: boolean) => {
|
||||||
|
return {
|
||||||
|
"full-width inputgreen cursor-pointer": val,
|
||||||
|
"full-width cursor-pointer": !val,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.q-field--with-bottom {
|
||||||
|
padding-bottom: 0px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
684
src/modules/06_retirement/components/DismissOrder/step02.vue
Normal file
684
src/modules/06_retirement/components/DismissOrder/step02.vue
Normal file
|
|
@ -0,0 +1,684 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="q-py-md q-pl-md" style="height: 68vh; overflow-y: scroll">
|
||||||
|
<div class="col-12 row q-py-sm items-center">
|
||||||
|
<q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
|
||||||
|
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<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: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="idcard" :props="props">
|
||||||
|
{{ props.row.idcard }}
|
||||||
|
</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="agency" :props="props">
|
||||||
|
{{ props.row.agency }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="send" :props="props">
|
||||||
|
<q-select
|
||||||
|
:class="getClass(true)"
|
||||||
|
hide-bottom-space
|
||||||
|
multiple
|
||||||
|
:outlined="true"
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
v-model="props.row.mutiselect"
|
||||||
|
:rules="[(val:any) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`]"
|
||||||
|
:label="`${'เลือกช่องทางการส่งสำเนา'}`"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
option-label="name"
|
||||||
|
:options="optionSelect"
|
||||||
|
option-value="id"
|
||||||
|
input-debounce="0"
|
||||||
|
color="primary"
|
||||||
|
>
|
||||||
|
<template v-slot:no-option>
|
||||||
|
<q-item>
|
||||||
|
<q-item-section class="text-black">
|
||||||
|
ไม่พบข้อมูลที่ค้นหา
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</template>
|
||||||
|
</q-select>
|
||||||
|
</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>
|
||||||
|
</d-table>
|
||||||
|
</div>
|
||||||
|
<q-separator />
|
||||||
|
<div class="flex justify-end q-pa-sm q-gutter-sm">
|
||||||
|
<q-btn
|
||||||
|
dense
|
||||||
|
outline
|
||||||
|
color="primary"
|
||||||
|
icon="chevron_left"
|
||||||
|
@click="previous"
|
||||||
|
class="q-pr-md"
|
||||||
|
label="เลือกรายชื่อ"
|
||||||
|
>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn
|
||||||
|
dense
|
||||||
|
unelevated
|
||||||
|
label="บันทึก"
|
||||||
|
color="public"
|
||||||
|
@click="next"
|
||||||
|
class="q-px-md"
|
||||||
|
><!-- icon="mdi-content-save-outline"
|
||||||
|
<q-tooltip>บันทึก</q-tooltip> -->
|
||||||
|
</q-btn>
|
||||||
|
<!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
|
||||||
|
<q-tooltip>ต่อไป</q-tooltip>
|
||||||
|
</q-btn> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<q-dialog v-model="modal" persistent full-width>
|
||||||
|
<q-card>
|
||||||
|
<q-form ref="myForm">
|
||||||
|
<DialogHeader tittle="เลือกรายชื่อตามหน่วยงาน" :close="clickClose" />
|
||||||
|
<q-separator />
|
||||||
|
<q-card-section class="q-pa-sm bg-grey-1">
|
||||||
|
<div class="row col-12 q-col-gutter-sm">
|
||||||
|
<div class="col-xs-12 col-sm-5 row">
|
||||||
|
<q-card flat bordered class="fit q-pa-sm">
|
||||||
|
<q-scroll-area visible style="height: 70vh">
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
v-model="search"
|
||||||
|
placeholder="ค้นหา"
|
||||||
|
class="q-mb-sm"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon name="mdi-magnify" />
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
<q-tree
|
||||||
|
:nodes="nodesTree"
|
||||||
|
dense
|
||||||
|
node-key="id"
|
||||||
|
v-model:selected="selected"
|
||||||
|
v-model:expanded="expanded"
|
||||||
|
no-selection-unset
|
||||||
|
selected-color="primary"
|
||||||
|
@update:selected="onSelected"
|
||||||
|
default-expand-all
|
||||||
|
/>
|
||||||
|
</q-scroll-area>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-7">
|
||||||
|
<div class="col-12 row q-py-sm items-center">
|
||||||
|
<q-space />
|
||||||
|
<div class="items-center" style="display: flex">
|
||||||
|
<q-input
|
||||||
|
standout
|
||||||
|
dense
|
||||||
|
v-model="filterModal"
|
||||||
|
ref="filterRef"
|
||||||
|
outlined
|
||||||
|
debounce="300"
|
||||||
|
placeholder="ค้นหา"
|
||||||
|
style="max-width: 200px"
|
||||||
|
class="q-ml-sm"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon v-if="filterModal == ''" name="search" />
|
||||||
|
<q-icon
|
||||||
|
v-if="filterModal !== ''"
|
||||||
|
name="clear"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="resetFilter"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
|
||||||
|
<q-select
|
||||||
|
v-model="visibleColumnsModal"
|
||||||
|
:display-value="$q.lang.table.columns"
|
||||||
|
multiple
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
:options="columnsModal"
|
||||||
|
options-dense
|
||||||
|
option-value="name"
|
||||||
|
map-options
|
||||||
|
emit-value
|
||||||
|
style="min-width: 150px"
|
||||||
|
class="gt-xs q-ml-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<d-table
|
||||||
|
:rows="rowsModal"
|
||||||
|
:columns="columnsModal"
|
||||||
|
:visible-columns="visibleColumnsModal"
|
||||||
|
:filter="filterModal"
|
||||||
|
row-key="name"
|
||||||
|
selection="multiple"
|
||||||
|
v-model:selected="selectedModal"
|
||||||
|
>
|
||||||
|
<template v-slot:header-selection="scope">
|
||||||
|
<q-checkbox
|
||||||
|
keep-color
|
||||||
|
color="primary"
|
||||||
|
dense
|
||||||
|
v-model="scope.selected"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:body-selection="scope">
|
||||||
|
<!-- <q-checkbox
|
||||||
|
keep-color
|
||||||
|
color="primary"
|
||||||
|
dense
|
||||||
|
:model-value="scope.selected"
|
||||||
|
@update:model-value="
|
||||||
|
(val, evt) => {
|
||||||
|
Object.getOwnPropertyDescriptor(scope, 'selected').set(
|
||||||
|
val,
|
||||||
|
evt
|
||||||
|
);
|
||||||
|
}
|
||||||
|
"
|
||||||
|
/> -->
|
||||||
|
<q-checkbox
|
||||||
|
keep-color
|
||||||
|
color="primary"
|
||||||
|
dense
|
||||||
|
v-model="scope.selected"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<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-section>
|
||||||
|
<q-separator />
|
||||||
|
<q-card-actions align="right">
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
color="public"
|
||||||
|
icon="mdi-content-save-outline"
|
||||||
|
@click="clickClose"
|
||||||
|
>
|
||||||
|
<q-tooltip>บันทึก</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-card-actions>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted } from "vue";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
|
||||||
|
import type { QInput, QForm } from "quasar";
|
||||||
|
import type { treeTab } from "@/modules/05_placement/interface/index/Main";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
import type { QTableProps } from "quasar";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
next: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
previous: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const next = () => props.next();
|
||||||
|
const previous = () => props.previous();
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
||||||
|
const { dialogMessage, messageError, showLoader, hideLoader } = mixin;
|
||||||
|
|
||||||
|
const myForm = ref<QForm>();
|
||||||
|
const filterRef = ref<QInput>();
|
||||||
|
const filter = ref<string>("");
|
||||||
|
const mutiselect = ref([]);
|
||||||
|
const modal = ref<boolean>(false);
|
||||||
|
const search = ref<string>("");
|
||||||
|
const expanded = ref<string[]>([]);
|
||||||
|
const selected = ref<string>("");
|
||||||
|
const nodesTree = ref<treeTab[]>([]);
|
||||||
|
const send = ref<String[]>([]);
|
||||||
|
const selectedModal = ref([]);
|
||||||
|
const test = ref([]);
|
||||||
|
const filterModal = ref<string>("");
|
||||||
|
const visibleColumnsModal = ref<String[]>(["no", "idcard", "name"]);
|
||||||
|
const columnsModal = ref<QTableProps["columns"]>([
|
||||||
|
{ name: "no", align: "left", label: "ลำดับ", field: "no", sortable: true },
|
||||||
|
{
|
||||||
|
name: "idcard",
|
||||||
|
align: "left",
|
||||||
|
label: "เลขประจำตัวประชาชน",
|
||||||
|
field: "idcard",
|
||||||
|
sortable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "name",
|
||||||
|
align: "left",
|
||||||
|
label: "ชื่อ-สกุล",
|
||||||
|
field: "name",
|
||||||
|
sortable: true,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const rowsModal = [
|
||||||
|
{
|
||||||
|
no: "0ac56905-1a74-4606-a120-233340adde95",
|
||||||
|
name: "นางนัทธ์ เหล่าสกุล",
|
||||||
|
idcard: "9158455632145",
|
||||||
|
educate: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no: "0de607a0-b094-4a6d-9e30-979343ab5e53",
|
||||||
|
name: "นางขรรค์ จันทรสมบัติ",
|
||||||
|
idcard: "8558455632126",
|
||||||
|
educate: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no: "93ca7366-2a35-4f94-a331-9c23c9ea78d3",
|
||||||
|
name: "นางโอภาส จรัสวงศ์",
|
||||||
|
idcard: "8158455635425",
|
||||||
|
educate: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no: "d3777c19-2bd0-42df-90ce-c3eeeee55ac6",
|
||||||
|
name: "นางธิญา หงษ์ทอง",
|
||||||
|
idcard: "4558455632145",
|
||||||
|
educate: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
||||||
|
name: "นางธนวิทย์ พิกุลเทพ",
|
||||||
|
idcard: "5542455632145",
|
||||||
|
educate: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
||||||
|
name: "นางหนึ่ง สตาภิรมย์",
|
||||||
|
idcard: "7448455632145",
|
||||||
|
educate: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
||||||
|
name: "นางสัจพร คมคาย",
|
||||||
|
idcard: "1236455632145",
|
||||||
|
educate: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
||||||
|
name: "นางตุลยากร ปรีดาศิริกุล",
|
||||||
|
idcard: "1523455632145",
|
||||||
|
educate: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
||||||
|
name: "นางบัลลังค์ จิรวาณิชย์",
|
||||||
|
idcard: "1258455632145",
|
||||||
|
educate: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
||||||
|
name: "นางคมคาย เรืองรังสรรค์",
|
||||||
|
idcard: "8548455632145",
|
||||||
|
educate: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
||||||
|
name: "นางพรทิพา คมคาย",
|
||||||
|
idcard: "6598455632145",
|
||||||
|
educate: "",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const paginationModal = ref({
|
||||||
|
sortBy: "desc",
|
||||||
|
descending: false,
|
||||||
|
page: 1,
|
||||||
|
rowsPerPage: 10,
|
||||||
|
});
|
||||||
|
const pagination = ref({
|
||||||
|
sortBy: "desc",
|
||||||
|
descending: false,
|
||||||
|
page: 1,
|
||||||
|
rowsPerPage: 10,
|
||||||
|
});
|
||||||
|
const optionSelect = ref<any>([
|
||||||
|
{ id: 1, name: "อีเมล" },
|
||||||
|
{ id: 2, name: "กล่องข้อความ" },
|
||||||
|
]);
|
||||||
|
|
||||||
|
const visibleColumns = ref<String[]>([
|
||||||
|
"no",
|
||||||
|
"idcard",
|
||||||
|
"name",
|
||||||
|
"position",
|
||||||
|
"agency",
|
||||||
|
"send",
|
||||||
|
]);
|
||||||
|
const columns = ref<QTableProps["columns"]>([
|
||||||
|
{ name: "no", align: "left", label: "ลำดับ", field: "no", sortable: true },
|
||||||
|
{
|
||||||
|
name: "idcard",
|
||||||
|
align: "left",
|
||||||
|
label: "เลขประจำตัวประชาชน",
|
||||||
|
field: "idcard",
|
||||||
|
sortable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "name",
|
||||||
|
align: "left",
|
||||||
|
label: "ชื่อ-สกุล",
|
||||||
|
field: "name",
|
||||||
|
sortable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "position",
|
||||||
|
align: "left",
|
||||||
|
label: "ตำแหน่ง",
|
||||||
|
field: "position",
|
||||||
|
sortable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "agency",
|
||||||
|
align: "left",
|
||||||
|
label: "หน่วยงาน",
|
||||||
|
field: "agency",
|
||||||
|
sortable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "send",
|
||||||
|
align: "left",
|
||||||
|
label: "ช่องทางการส่งสำเนา",
|
||||||
|
field: "send",
|
||||||
|
sortable: true,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const rows = ref([
|
||||||
|
{
|
||||||
|
no: "0ac56905-1a74-4606-a120-233340adde95",
|
||||||
|
name: "นางนัทธ์ เหล่าสกุล",
|
||||||
|
idcard: "9158455632145",
|
||||||
|
send: "",
|
||||||
|
position: "ผู้อำนวยการ",
|
||||||
|
agency: "กลุ่มงานช่วยบริหาร",
|
||||||
|
mutiselect: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no: "0de607a0-b094-4a6d-9e30-979343ab5e53",
|
||||||
|
name: "นางขรรค์ จันทรสมบัติ",
|
||||||
|
idcard: "8558455632126",
|
||||||
|
send: "",
|
||||||
|
position: "นักจัดการทั่วไป",
|
||||||
|
agency: "กลุ่มงานช่วยบริหาร",
|
||||||
|
mutiselect: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no: "93ca7366-2a35-4f94-a331-9c23c9ea78d3",
|
||||||
|
name: "นางโอภาส จรัสวงศ์",
|
||||||
|
idcard: "8158455635425",
|
||||||
|
send: "",
|
||||||
|
position: "นักจัดการทั่วไป",
|
||||||
|
agency: "กลุ่มงานช่วยบริหาร",
|
||||||
|
mutiselect: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no: "d3777c19-2bd0-42df-90ce-c3eeeee55ac6",
|
||||||
|
name: "นางธิญา หงษ์ทอง",
|
||||||
|
idcard: "4558455632145",
|
||||||
|
send: "",
|
||||||
|
position: "นักจัดการทั่วไป",
|
||||||
|
agency: "กลุ่มงานช่วยบริหาร",
|
||||||
|
mutiselect: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
||||||
|
name: "นางธนวิทย์ พิกุลเทพ",
|
||||||
|
idcard: "5542455632145",
|
||||||
|
send: "",
|
||||||
|
position: "นักจัดการทั่วไป",
|
||||||
|
agency: "กลุ่มงานช่วยบริหาร",
|
||||||
|
mutiselect: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
||||||
|
name: "นางหนึ่ง สตาภิรมย์",
|
||||||
|
idcard: "7448455632145",
|
||||||
|
send: "",
|
||||||
|
position: "นิติกร",
|
||||||
|
agency: "กลุ่มงานนิติกร",
|
||||||
|
mutiselect: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
||||||
|
name: "นางสัจพร คมคาย",
|
||||||
|
idcard: "1236455632145",
|
||||||
|
send: "",
|
||||||
|
position: "นิติกร",
|
||||||
|
agency: "กลุ่มงานนิติกร",
|
||||||
|
mutiselect: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
||||||
|
name: "นางตุลยากร ปรีดาศิริกุล",
|
||||||
|
idcard: "1523455632145",
|
||||||
|
send: "",
|
||||||
|
position: "นิติกร",
|
||||||
|
agency: "กลุ่มงานนิติกร",
|
||||||
|
mutiselect: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
||||||
|
name: "นางบัลลังค์ จิรวาณิชย์",
|
||||||
|
idcard: "1258455632145",
|
||||||
|
send: "",
|
||||||
|
position: "นิติกร",
|
||||||
|
agency: "กลุ่มงานนิติกร",
|
||||||
|
mutiselect: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
||||||
|
name: "นางคมคาย เรืองรังสรรค์",
|
||||||
|
idcard: "8548455632145",
|
||||||
|
send: "",
|
||||||
|
position: "นิติกร",
|
||||||
|
agency: "กลุ่มงานนิติกร",
|
||||||
|
mutiselect: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
||||||
|
name: "นางพรทิพา คมคาย",
|
||||||
|
idcard: "6598455632145",
|
||||||
|
send: "",
|
||||||
|
position: "นิติกร",
|
||||||
|
agency: "กลุ่มงานนิติกร",
|
||||||
|
mutiselect: [],
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await nodeTree();
|
||||||
|
});
|
||||||
|
|
||||||
|
const paginationLabel = (start: number, end: number, total: number) => {
|
||||||
|
// if (props.paging == true)
|
||||||
|
// return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
|
||||||
|
// else
|
||||||
|
return start + "-" + end + " ใน " + total;
|
||||||
|
};
|
||||||
|
|
||||||
|
const resetFilter = () => {
|
||||||
|
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
|
||||||
|
filter.value = "";
|
||||||
|
filterRef.value!.focus();
|
||||||
|
};
|
||||||
|
|
||||||
|
const getClass = (val: boolean) => {
|
||||||
|
return {
|
||||||
|
"full-width inputgreen cursor-pointer": val,
|
||||||
|
"full-width cursor-pointer": !val,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const clickClose = async () => {
|
||||||
|
// if (editRow.value == true) {
|
||||||
|
// dialogMessage(
|
||||||
|
// $q,
|
||||||
|
// "ข้อมูลมีการแก้ไข",
|
||||||
|
// "ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?",
|
||||||
|
// "mdi-help-circle-outline",
|
||||||
|
// "ตกลง",
|
||||||
|
// "orange",
|
||||||
|
// () => (modal.value = false),
|
||||||
|
// undefined
|
||||||
|
// );
|
||||||
|
// } else {
|
||||||
|
modal.value = false;
|
||||||
|
// next.value = false;
|
||||||
|
// previous.value = false;
|
||||||
|
// }
|
||||||
|
};
|
||||||
|
|
||||||
|
const clickAdd = () => {
|
||||||
|
modal.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const clickDelete = (id: string) => {
|
||||||
|
dialogMessage(
|
||||||
|
$q,
|
||||||
|
"ยืนยันการลบข้อมูล",
|
||||||
|
"ต้องการลบข้อมูลนี้ใช่หรือไม่?",
|
||||||
|
"mdi-help-circle-outline",
|
||||||
|
"ตกลง",
|
||||||
|
"red",
|
||||||
|
() => deleteData(id),
|
||||||
|
undefined
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const nodeTree = async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.profileOrganizRoot)
|
||||||
|
.then((res: any) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
nodesTree.value = data;
|
||||||
|
if (data.length > 0) {
|
||||||
|
expanded.value = [data[0].id];
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSelected = async (id: string) => {
|
||||||
|
// await fetchPositionNumber(id);
|
||||||
|
};
|
||||||
|
|
||||||
|
const deleteData = async (id: string) => {};
|
||||||
|
</script>
|
||||||
|
<style lang="scss"></style>
|
||||||
580
src/modules/06_retirement/components/DismissOrder/step03.vue
Normal file
580
src/modules/06_retirement/components/DismissOrder/step03.vue
Normal file
|
|
@ -0,0 +1,580 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div style="min-height: 70vh">
|
||||||
|
<q-splitter
|
||||||
|
v-model="splitterModel"
|
||||||
|
style="height: 70vh"
|
||||||
|
@update:model-value="onchangePage"
|
||||||
|
>
|
||||||
|
<template v-slot:before>
|
||||||
|
<div class="space">
|
||||||
|
<div @click="setTab('main')" :class="getClass(tab == 'main')">
|
||||||
|
<div class="q-pr-sm">คำสั่ง</div>
|
||||||
|
<q-btn
|
||||||
|
size="12px"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
icon="mdi-download"
|
||||||
|
:disable="tab !== 'main'"
|
||||||
|
:color="tab !== 'main' ? 'grey' : 'add'"
|
||||||
|
>
|
||||||
|
<q-tooltip>ดาวน์โหลด</q-tooltip>
|
||||||
|
<q-menu>
|
||||||
|
<q-list style="min-width: 150px">
|
||||||
|
<q-item clickable v-close-popup>
|
||||||
|
<q-item-section avatar
|
||||||
|
><q-icon color="red" name="mdi-file-pdf"
|
||||||
|
/></q-item-section>
|
||||||
|
<q-item-section>ไฟล์ .PDF</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item clickable v-close-popup>
|
||||||
|
<q-item-section avatar
|
||||||
|
><q-icon color="blue" name="mdi-file-word"
|
||||||
|
/></q-item-section>
|
||||||
|
<q-item-section>ไฟล์ .docx</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-menu>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
<div @click="setTab('second')" :class="getClass(tab == 'second')">
|
||||||
|
<div class="q-pr-sm">เอกสารแนบท้าย</div>
|
||||||
|
<q-btn
|
||||||
|
size="12px"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
:color="tab !== 'second' ? 'grey' : 'add'"
|
||||||
|
icon="mdi-download"
|
||||||
|
:disable="tab !== 'second'"
|
||||||
|
>
|
||||||
|
<q-tooltip>ดาวน์โหลด</q-tooltip>
|
||||||
|
<q-menu>
|
||||||
|
<q-list style="min-width: 150px">
|
||||||
|
<q-item clickable v-close-popup>
|
||||||
|
<q-item-section avatar
|
||||||
|
><q-icon color="red" name="mdi-file-pdf"
|
||||||
|
/></q-item-section>
|
||||||
|
<q-item-section>ไฟล์ .PDF</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item clickable v-close-popup>
|
||||||
|
<q-item-section avatar
|
||||||
|
><q-icon color="green-7" name="mdi-file-excel"
|
||||||
|
/></q-item-section>
|
||||||
|
<q-item-section>ไฟล์ .xls</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-menu>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
<q-space />
|
||||||
|
<q-btn
|
||||||
|
class="text-dark"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
icon="mdi-fullscreen"
|
||||||
|
color="add"
|
||||||
|
@click="dialog = true"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<q-separator style="margin-top: -1px; z-index: 1" />
|
||||||
|
<q-card bordered class="card-pdf q-ma-md q-pa-md">
|
||||||
|
<div class="justify-between items-center align-center q-pb-sm row">
|
||||||
|
<q-btn
|
||||||
|
class="text-dark bg-grey-4"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
@click="page = page > 1 ? page - 1 : page"
|
||||||
|
>
|
||||||
|
<q-icon name="mdi-chevron-left" />
|
||||||
|
</q-btn>
|
||||||
|
|
||||||
|
<span class="body-2 grey--text">
|
||||||
|
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<q-btn
|
||||||
|
class="text-dark bg-grey-4"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
@click="page = page < numOfPages ? page + 1 : page"
|
||||||
|
>
|
||||||
|
<q-icon name="mdi-chevron-right" />
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
<div class="pdfWidth">
|
||||||
|
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
|
||||||
|
<!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
|
||||||
|
</div>
|
||||||
|
<div class="justify-between items-center align-center q-pt-sm row">
|
||||||
|
<q-btn
|
||||||
|
class="text-dark bg-grey-4"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
@click="page = page > 1 ? page - 1 : page"
|
||||||
|
>
|
||||||
|
<q-icon name="mdi-chevron-left" />
|
||||||
|
</q-btn>
|
||||||
|
|
||||||
|
<span class="body-2 grey--text">
|
||||||
|
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<q-btn
|
||||||
|
class="text-dark bg-grey-4"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
@click="page = page < numOfPages ? page + 1 : page"
|
||||||
|
>
|
||||||
|
<q-icon name="mdi-chevron-right" />
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:separator>
|
||||||
|
<q-avatar
|
||||||
|
color="primary"
|
||||||
|
text-color="white"
|
||||||
|
size="30px"
|
||||||
|
icon="drag_indicator"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:after>
|
||||||
|
<q-form ref="myForm">
|
||||||
|
<div class="q-pa-md q-gutter-y-md">
|
||||||
|
<fieldset class="border q-px-lg q-py-md">
|
||||||
|
<legend class="text-header q-px-sm">อัปโหลดไฟล์</legend>
|
||||||
|
<div class="q-gutter-y-md q-mb-md">
|
||||||
|
<div>
|
||||||
|
<label class="text-file">คำสั่ง</label>
|
||||||
|
<q-file
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
v-model="fileOrder"
|
||||||
|
label="เลือกไฟล์คำสั่ง"
|
||||||
|
hide-bottom-space
|
||||||
|
lazy-rules
|
||||||
|
:rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="attach_file" />
|
||||||
|
</template>
|
||||||
|
</q-file>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="text-file">เอกสารแนบท้าย</label>
|
||||||
|
<q-file
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
v-model="fileTailer"
|
||||||
|
label="เลือกไฟล์เอกสารแนบท้าย"
|
||||||
|
hide-bottom-space
|
||||||
|
lazy-rules
|
||||||
|
:rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="attach_file" />
|
||||||
|
</template>
|
||||||
|
</q-file>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset class="border q-px-lg q-py-md">
|
||||||
|
<legend class="text-header q-px-sm">รายละเอียด</legend>
|
||||||
|
<div class="q-gutter-y-md q-mb-md">
|
||||||
|
<div>
|
||||||
|
<label class="text-file">เลขที่คำสั่ง</label>
|
||||||
|
<q-input
|
||||||
|
:outlined="true"
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
:readonly="!true"
|
||||||
|
:borderless="!true"
|
||||||
|
v-model="order"
|
||||||
|
:rules="[(val) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'เลขที่คำสั่ง'}`"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="text-file">ปีที่ออกคำสั่ง</label>
|
||||||
|
<datepicker
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="years"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
year-picker
|
||||||
|
: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
|
||||||
|
lazy-rules
|
||||||
|
:model-value="years + 543"
|
||||||
|
:rules="[
|
||||||
|
(val) => !!val || `${'กรุณาเลือกปีที่ออกคำสั่ง'}`,
|
||||||
|
]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'ปีที่ออกคำสั่ง'}`"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon
|
||||||
|
name="event"
|
||||||
|
class="cursor-pointer"
|
||||||
|
style="color: var(--q-grey)"
|
||||||
|
>
|
||||||
|
</q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="text-file">วันที่ลงนาม</label>
|
||||||
|
<datepicker
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="date"
|
||||||
|
: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"
|
||||||
|
hide-bottom-space
|
||||||
|
:model-value="date != null ? date2Thai(date) : null"
|
||||||
|
:label="`${'วันที่มีผลออกคำสั่ง'}`"
|
||||||
|
:rules="[
|
||||||
|
(val) =>
|
||||||
|
!!val || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon
|
||||||
|
name="event"
|
||||||
|
class="cursor-pointer"
|
||||||
|
style="color: var(--q-grey)"
|
||||||
|
>
|
||||||
|
</q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
<div class="flex justify-around">
|
||||||
|
<q-btn
|
||||||
|
unelevated
|
||||||
|
label="ออกคำสั่ง"
|
||||||
|
:color="validateForm() ? 'public' : 'grey'"
|
||||||
|
:disable="!validateForm()"
|
||||||
|
/>
|
||||||
|
<q-btn
|
||||||
|
class="text-dark"
|
||||||
|
unelevated
|
||||||
|
label="ส่งไปลงนาม"
|
||||||
|
color="grey"
|
||||||
|
disable
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-form>
|
||||||
|
</template>
|
||||||
|
</q-splitter>
|
||||||
|
</div>
|
||||||
|
<q-separator />
|
||||||
|
<div class="flex justify-end q-pa-sm q-gutter-sm">
|
||||||
|
<q-btn
|
||||||
|
dense
|
||||||
|
outline
|
||||||
|
color="primary"
|
||||||
|
icon="chevron_left"
|
||||||
|
@click="previous"
|
||||||
|
class="q-pr-md"
|
||||||
|
label="เลือกรายชื่อส่งสำเนา"
|
||||||
|
>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn
|
||||||
|
unelevated
|
||||||
|
label="บันทึก"
|
||||||
|
:color="validateForm() ? 'public' : 'grey'"
|
||||||
|
:disable="!validateForm()"
|
||||||
|
@click="save"
|
||||||
|
>
|
||||||
|
</q-btn>
|
||||||
|
|
||||||
|
<!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
|
||||||
|
<q-tooltip>ต่อไป</q-tooltip>
|
||||||
|
</q-btn> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<q-dialog
|
||||||
|
v-model="dialog"
|
||||||
|
persistent
|
||||||
|
:maximized="true"
|
||||||
|
transition-show="slide-up"
|
||||||
|
transition-hide="slide-down"
|
||||||
|
>
|
||||||
|
<q-card class="bg-white text-white">
|
||||||
|
<!-- <q-bar>
|
||||||
|
<q-space />
|
||||||
|
|
||||||
|
<q-btn dense flat icon="close" v-close-popup>
|
||||||
|
<q-tooltip>ปิดหน้าต่าง</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-bar> -->
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<q-card-section bordered class="card-pdf q-ma-md q-pa-md">
|
||||||
|
<div class="justify-between items-center align-center q-pb-sm row">
|
||||||
|
<q-btn
|
||||||
|
class="text-dark bg-grey-4"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
@click="page = page > 1 ? page - 1 : page"
|
||||||
|
>
|
||||||
|
<q-icon name="mdi-chevron-left" />
|
||||||
|
</q-btn>
|
||||||
|
|
||||||
|
<span class="body-2 grey--text text-black">
|
||||||
|
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<q-btn
|
||||||
|
class="text-dark bg-grey-4"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
@click="page = page < numOfPages ? page + 1 : page"
|
||||||
|
>
|
||||||
|
<q-icon name="mdi-chevron-right" />
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
<div class="pdfWidth">
|
||||||
|
<VuePDF
|
||||||
|
ref="vuePDFRef"
|
||||||
|
:pdf="pdfSrc"
|
||||||
|
:page="page"
|
||||||
|
fit-parent
|
||||||
|
:scale="0.1"
|
||||||
|
/>
|
||||||
|
<!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
|
||||||
|
</div>
|
||||||
|
<div class="justify-between items-center align-center q-pt-sm row">
|
||||||
|
<q-btn
|
||||||
|
class="text-dark bg-grey-4"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
@click="page = page > 1 ? page - 1 : page"
|
||||||
|
>
|
||||||
|
<q-icon name="mdi-chevron-left" />
|
||||||
|
</q-btn>
|
||||||
|
|
||||||
|
<span class="body-2 grey--text text-black">
|
||||||
|
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<q-btn
|
||||||
|
class="text-dark bg-grey-4"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
@click="page = page < numOfPages ? page + 1 : page"
|
||||||
|
>
|
||||||
|
<q-icon name="mdi-chevron-right" />
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, onUnmounted, computed } from "vue";
|
||||||
|
import { VuePDF, usePDF } from "@tato30/vue-pdf";
|
||||||
|
import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
|
||||||
|
import type { QForm } from "quasar";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const { date2Thai } = mixin;
|
||||||
|
|
||||||
|
const dialog = ref<boolean>(false);
|
||||||
|
|
||||||
|
// onUnmounted(() => {
|
||||||
|
// window.removeEventListener("resize", (e: any) => {
|
||||||
|
// myEventHandler(e);
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
// window.addEventListener("resize", (e: any) => {
|
||||||
|
// myEventHandler(e);
|
||||||
|
// });
|
||||||
|
|
||||||
|
const pdfData = usePDF("/src/assets/05_modules.pdf");
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
pdfSrc.value = pdfData.pdf.value;
|
||||||
|
numOfPages.value = pdfData.pages.value;
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
|
||||||
|
// const myEventHandler = (e: any) => {
|
||||||
|
// console.log("e", e.target.innerWidth);
|
||||||
|
// if (vuePDFRef !== null) {
|
||||||
|
// vuePDFRef.value.reload();
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
|
||||||
|
const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
|
||||||
|
const numOfPages = ref<number>(0);
|
||||||
|
const page = ref<number>(1);
|
||||||
|
const vuePDFRef = ref<any>(null);
|
||||||
|
|
||||||
|
const myForm = ref<QForm | null>(null);
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
next: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
previous: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const next = () => props.next();
|
||||||
|
const previous = () => props.previous();
|
||||||
|
|
||||||
|
const splitterModel = ref<number>(70);
|
||||||
|
const tab = ref<string>("main");
|
||||||
|
const fileOrder = ref<any>(null);
|
||||||
|
const fileTailer = ref<any>(null);
|
||||||
|
|
||||||
|
const order = ref<string>("");
|
||||||
|
const years = ref<number>(new Date().getFullYear());
|
||||||
|
const date = ref<Date>(new Date());
|
||||||
|
|
||||||
|
const onchangePage = (val: any) => {
|
||||||
|
// console.log(val);
|
||||||
|
if (vuePDFRef !== null) {
|
||||||
|
vuePDFRef.value.reload();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const save = () => {
|
||||||
|
if (myForm.value !== null) {
|
||||||
|
myForm.value!.validate().then((success: Boolean) => {
|
||||||
|
if (success) {
|
||||||
|
// yay, models are correct
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const validateForm = () => {
|
||||||
|
return (
|
||||||
|
fileOrder.value !== null &&
|
||||||
|
fileOrder.value !== null &&
|
||||||
|
order.value.trim() !== ""
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getClass = (val: boolean) => {
|
||||||
|
return {
|
||||||
|
"card-header-active q-px-lg q-py-md cursor-pointer": val,
|
||||||
|
"card-header q-px-lg q-py-md cursor-pointer": !val,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const setTab = (val: string) => {
|
||||||
|
tab.value = val;
|
||||||
|
page.value = 1;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.border {
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid #e9eaec;
|
||||||
|
}
|
||||||
|
.text-header {
|
||||||
|
color: #34373c;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-file {
|
||||||
|
padding-top: 5px;
|
||||||
|
color: #34373c;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.space {
|
||||||
|
background-color: #e9eaec61;
|
||||||
|
display: flex;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
margin-top: 5px;
|
||||||
|
background-color: transparent;
|
||||||
|
padding: 2px !important;
|
||||||
|
border-radius: 10px 10px 0px 0px;
|
||||||
|
width: 200px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: normal;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header-active {
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-left: -1px;
|
||||||
|
background-color: white;
|
||||||
|
padding: 2px !important;
|
||||||
|
border-radius: 10px 10px 0px 0px;
|
||||||
|
border: 1px solid #e9eaec;
|
||||||
|
width: 200px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
border-bottom-style: none;
|
||||||
|
font-weight: 600;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-pdf {
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid #e9eaec;
|
||||||
|
background-color: #e9eaec61;
|
||||||
|
// height: 60vh;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -135,7 +135,9 @@ const paginationLabel = (start: number, end: number, total: number) => {
|
||||||
icon="mdi-plus"
|
icon="mdi-plus"
|
||||||
size="md"
|
size="md"
|
||||||
@click="modal = true"
|
@click="modal = true"
|
||||||
></q-btn>
|
>
|
||||||
|
<q-tooltip>เพิ่มรายชื่อ</q-tooltip></q-btn
|
||||||
|
>
|
||||||
|
|
||||||
<q-dialog v-model="modal">
|
<q-dialog v-model="modal">
|
||||||
<q-card style="width: 850px; max-width: 80vw" class="q-px-sm q-pb-md">
|
<q-card style="width: 850px; max-width: 80vw" class="q-px-sm q-pb-md">
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,21 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from "vue";
|
import { ref, onMounted } from "vue";
|
||||||
import AddList from "../ListRetirement/AddList.vue";
|
import AddList from "../ListRetirement/AddList.vue";
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
import { useQuasar } from "quasar";
|
import { useQuasar } from "quasar";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
const $q = useQuasar(); //ใช้ noti quasar
|
const $q = useQuasar(); //ใช้ noti quasar
|
||||||
const mixin = useCounterMixin();
|
const mixin = useCounterMixin();
|
||||||
const {} = mixin;
|
const {} = mixin;
|
||||||
|
const no = route.params.id;
|
||||||
|
const modalNote = ref<boolean>(false);
|
||||||
|
const note = ref<string>("");
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
console.log(no);
|
||||||
|
});
|
||||||
const columns = ref<any["columns"]>([
|
const columns = ref<any["columns"]>([
|
||||||
{
|
{
|
||||||
name: "index",
|
name: "index",
|
||||||
|
|
@ -104,6 +112,12 @@ const columns = ref<any["columns"]>([
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: "note",
|
||||||
|
align: "left",
|
||||||
|
label: "",
|
||||||
|
field: "",
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: "button",
|
name: "button",
|
||||||
align: "left",
|
align: "left",
|
||||||
|
|
@ -160,6 +174,7 @@ const visibleColumns = ref<any>([
|
||||||
"govGroup",
|
"govGroup",
|
||||||
"govOffice",
|
"govOffice",
|
||||||
"bureau",
|
"bureau",
|
||||||
|
"note",
|
||||||
"button",
|
"button",
|
||||||
]);
|
]);
|
||||||
const filter = ref<string>("");
|
const filter = ref<string>("");
|
||||||
|
|
@ -183,6 +198,22 @@ const clickDelete = () => {
|
||||||
const backHistory = () => {
|
const backHistory = () => {
|
||||||
window.history.back();
|
window.history.back();
|
||||||
};
|
};
|
||||||
|
const saveNote = () => {
|
||||||
|
$q.dialog({
|
||||||
|
title: "ยืนยันการบันทึกข้อมูลข้อมูล",
|
||||||
|
message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
|
||||||
|
cancel: {
|
||||||
|
flat: true,
|
||||||
|
color: "negative",
|
||||||
|
},
|
||||||
|
persistent: true,
|
||||||
|
})
|
||||||
|
.onOk(async () => {
|
||||||
|
console.log("บันทึกข้อมูล");
|
||||||
|
})
|
||||||
|
.onCancel(() => {})
|
||||||
|
.onDismiss(() => {});
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -203,6 +234,32 @@ const backHistory = () => {
|
||||||
<q-card class="col-12 q-pa-md">
|
<q-card class="col-12 q-pa-md">
|
||||||
<q-toolbar>
|
<q-toolbar>
|
||||||
<AddList />
|
<AddList />
|
||||||
|
<q-btn flat round color="blue-12" icon="save">
|
||||||
|
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn color="primary" flat round icon="download">
|
||||||
|
<q-menu>
|
||||||
|
<q-list style="min-width: 100px">
|
||||||
|
<q-item clickable>
|
||||||
|
<q-item-section avatar>
|
||||||
|
<q-icon color="red" name="mdi-file-pdf" />
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section>ไฟล .PDF</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item clickable>
|
||||||
|
<q-item-section avatar>
|
||||||
|
<q-icon color="green" name="mdi-file-excel" />
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section>ไฟล .xls</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-menu>
|
||||||
|
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn flat round color="light-blue" icon="upload">
|
||||||
|
<q-tooltip>อัพโหลดไฟล์</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
|
||||||
<q-space />
|
<q-space />
|
||||||
<q-tabs shrink>
|
<q-tabs shrink>
|
||||||
<q-input
|
<q-input
|
||||||
|
|
@ -287,6 +344,19 @@ const backHistory = () => {
|
||||||
props.row.govOffice
|
props.row.govOffice
|
||||||
}}</q-td>
|
}}</q-td>
|
||||||
<q-td key="bureau" :props="props">{{ props.row.bureau }}</q-td>
|
<q-td key="bureau" :props="props">{{ props.row.bureau }}</q-td>
|
||||||
|
<q-td>
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
class="text-teal-5"
|
||||||
|
icon="mdi-note"
|
||||||
|
size="md"
|
||||||
|
v-if="no !== undefined"
|
||||||
|
@click="(modalNote = true), (note = '')"
|
||||||
|
>
|
||||||
|
<q-tooltip>โน้ต</q-tooltip></q-btn
|
||||||
|
>
|
||||||
|
</q-td>
|
||||||
<q-td>
|
<q-td>
|
||||||
<q-btn
|
<q-btn
|
||||||
flat
|
flat
|
||||||
|
|
@ -296,13 +366,6 @@ const backHistory = () => {
|
||||||
size="md"
|
size="md"
|
||||||
@click="clickDelete"
|
@click="clickDelete"
|
||||||
/>
|
/>
|
||||||
<q-btn
|
|
||||||
flat
|
|
||||||
round
|
|
||||||
class="text-teal-5"
|
|
||||||
icon="mdi-eye"
|
|
||||||
size="md"
|
|
||||||
/>
|
|
||||||
</q-td>
|
</q-td>
|
||||||
</q-tr>
|
</q-tr>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -310,6 +373,42 @@ const backHistory = () => {
|
||||||
</div>
|
</div>
|
||||||
</q-card>
|
</q-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- note -->
|
||||||
|
<q-dialog v-model="modalNote">
|
||||||
|
<q-card style="width: 700px; max-width: 80vw">
|
||||||
|
<q-card-section class="q-pt-none">
|
||||||
|
<q-toolbar class="q-py-md">
|
||||||
|
<q-toolbar-title class="header-text text-weight-bolder"
|
||||||
|
>กรอกเหตุผล
|
||||||
|
</q-toolbar-title>
|
||||||
|
<q-btn
|
||||||
|
icon="close"
|
||||||
|
unelevated
|
||||||
|
round
|
||||||
|
dense
|
||||||
|
@click="modalNote = false"
|
||||||
|
style="color: #ff8080; background-color: #ffdede"
|
||||||
|
/>
|
||||||
|
</q-toolbar>
|
||||||
|
</q-card-section>
|
||||||
|
<q-card-section class="q-pt-none">
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
v-model="note"
|
||||||
|
:rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
|
||||||
|
:label="`${'กรอกเหตุผล'}`"
|
||||||
|
type="textarea"
|
||||||
|
/>
|
||||||
|
</q-card-section>
|
||||||
|
|
||||||
|
<q-card-actions align="right">
|
||||||
|
<q-btn label="บักทึก" color="secondary" @click="saveNote" />
|
||||||
|
</q-card-actions>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scope>
|
<style lang="scss" scope>
|
||||||
|
|
@ -339,4 +438,7 @@ const backHistory = () => {
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.q-btn-dropdown__arrow {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -4,10 +4,16 @@
|
||||||
|
|
||||||
const Main = () => import("@/modules/06_retirement/views/Main.vue");
|
const Main = () => import("@/modules/06_retirement/views/Main.vue");
|
||||||
const Listretirement = () => import("@/modules/06_retirement/components/ListRetirement/TableList.vue")
|
const Listretirement = () => import("@/modules/06_retirement/components/ListRetirement/TableList.vue")
|
||||||
|
<<<<<<< HEAD
|
||||||
const resignOrder = () => import("@/modules/06_retirement/components/resign/ResignOrder.vue");
|
const resignOrder = () => import("@/modules/06_retirement/components/resign/ResignOrder.vue");
|
||||||
const resign = () => import("@/modules/06_retirement/components/resign/Resign.vue");
|
const resign = () => import("@/modules/06_retirement/components/resign/Resign.vue");
|
||||||
const resignByid = () => import("@/modules/06_retirement/components/resign/ResignByid.vue")
|
const resignByid = () => import("@/modules/06_retirement/components/resign/ResignByid.vue")
|
||||||
const deceased = () => import("@/modules/06_retirement/components/resign/Deceased.vue")
|
const deceased = () => import("@/modules/06_retirement/components/resign/Deceased.vue")
|
||||||
|
=======
|
||||||
|
const DismissOrder = () => import("@/modules/06_retirement/components/DismissOrder/DismissOrder.vue")
|
||||||
|
const AddOrder = () => import("@/modules/06_retirement/components/DismissOrder/AddOrder.vue")
|
||||||
|
|
||||||
|
>>>>>>> nice_dev
|
||||||
export default [
|
export default [
|
||||||
{
|
{
|
||||||
path: "/retirement",
|
path: "/retirement",
|
||||||
|
|
@ -30,26 +36,45 @@ export default [
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
<<<<<<< HEAD
|
||||||
path: "/retirement/resign",
|
path: "/retirement/resign",
|
||||||
name: "resign",
|
name: "resign",
|
||||||
component: resign,
|
component: resign,
|
||||||
meta: {
|
meta: {
|
||||||
Auth: true,
|
Auth: true,
|
||||||
Key: [7.2],
|
Key: [7.2],
|
||||||
|
=======
|
||||||
|
path: "/retirement/list/:id",
|
||||||
|
name: "retirement/list/id",
|
||||||
|
component: Listretirement,
|
||||||
|
meta: {
|
||||||
|
Auth: true,
|
||||||
|
Key: [7.1],
|
||||||
|
>>>>>>> nice_dev
|
||||||
Role: "retirement",
|
Role: "retirement",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
<<<<<<< HEAD
|
||||||
path: "/retirement/resign/:id",
|
path: "/retirement/resign/:id",
|
||||||
name: "resignbyid",
|
name: "resignbyid",
|
||||||
component: resignByid,
|
component: resignByid,
|
||||||
meta: {
|
meta: {
|
||||||
Auth: true,
|
Auth: true,
|
||||||
Key: [7.3],
|
Key: [7.3],
|
||||||
|
=======
|
||||||
|
path: "/retirement/dismiss-order",
|
||||||
|
name: "dismiss-order",
|
||||||
|
component: DismissOrder,
|
||||||
|
meta: {
|
||||||
|
Auth: true,
|
||||||
|
Key: [7.6],
|
||||||
|
>>>>>>> nice_dev
|
||||||
Role: "retirement",
|
Role: "retirement",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
<<<<<<< HEAD
|
||||||
path: "/retirement/resign-order",
|
path: "/retirement/resign-order",
|
||||||
name: "resign-order",
|
name: "resign-order",
|
||||||
component: resignOrder,
|
component: resignOrder,
|
||||||
|
|
@ -70,4 +95,15 @@ export default [
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
=======
|
||||||
|
path: "/retirement/dismiss-order/add",
|
||||||
|
name: "dismiss-order-add",
|
||||||
|
component: AddOrder,
|
||||||
|
meta: {
|
||||||
|
Auth: true,
|
||||||
|
Key: [7.6],
|
||||||
|
Role: "retirement",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
>>>>>>> nice_dev
|
||||||
];
|
];
|
||||||
|
|
|
||||||
|
|
@ -126,7 +126,11 @@
|
||||||
</q-tr>
|
</q-tr>
|
||||||
</template>
|
</template>
|
||||||
<template v-slot:body="props">
|
<template v-slot:body="props">
|
||||||
<q-tr :props="props" class="cursor-pointer" @click="nextPage">
|
<q-tr
|
||||||
|
:props="props"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="nextPage(props.row)"
|
||||||
|
>
|
||||||
<q-td key="no" :props="props">
|
<q-td key="no" :props="props">
|
||||||
{{ props.rowIndex + 1 }}
|
{{ props.rowIndex + 1 }}
|
||||||
</q-td>
|
</q-td>
|
||||||
|
|
@ -136,7 +140,7 @@
|
||||||
<q-td key="retireNumber" :props="props">
|
<q-td key="retireNumber" :props="props">
|
||||||
{{ props.row.retireNumber }}
|
{{ props.row.retireNumber }}
|
||||||
</q-td>
|
</q-td>
|
||||||
<q-td auto-width>
|
<!-- <q-td auto-width>
|
||||||
<q-btn
|
<q-btn
|
||||||
dense
|
dense
|
||||||
size="12px"
|
size="12px"
|
||||||
|
|
@ -148,7 +152,7 @@
|
||||||
>
|
>
|
||||||
<q-tooltip>ลบข้อมูล</q-tooltip>
|
<q-tooltip>ลบข้อมูล</q-tooltip>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
</q-td>
|
</q-td> -->
|
||||||
</q-tr>
|
</q-tr>
|
||||||
</template>
|
</template>
|
||||||
<template v-slot:pagination="scope">
|
<template v-slot:pagination="scope">
|
||||||
|
|
@ -231,17 +235,17 @@ const rows = ref<any>([
|
||||||
retireNumber: "5",
|
retireNumber: "5",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
no: "1",
|
no: "2",
|
||||||
Date: "2022-9-15 ",
|
Date: "2022-9-15 ",
|
||||||
retireNumber: "7",
|
retireNumber: "7",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
no: "1",
|
no: "3",
|
||||||
Date: "2022-8-31 ",
|
Date: "2022-8-31 ",
|
||||||
retireNumber: "15",
|
retireNumber: "15",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
no: "1",
|
no: "4",
|
||||||
Date: "2022-9-25 ",
|
Date: "2022-9-25 ",
|
||||||
retireNumber: "20",
|
retireNumber: "20",
|
||||||
},
|
},
|
||||||
|
|
@ -369,8 +373,8 @@ const paginationLabel = (start: string, end: string, total: string) => {
|
||||||
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
|
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
|
||||||
else return start + "-" + end + " ใน " + total;
|
else return start + "-" + end + " ใน " + total;
|
||||||
};
|
};
|
||||||
const nextPage = () => {
|
const nextPage = (val: any) => {
|
||||||
router.push("/retirement/list");
|
router.push(`/retirement/list/${val.no}`);
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue