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

รายการคำสั่ง ==> API

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-09-12 17:11:00 +07:00
parent 71be6d095f
commit 15b33b147a
14 changed files with 568 additions and 145 deletions
Download patch file Download diff file Expand all files Collapse all files

86
src/modules/18_command/components/Main/DialogFormCommand.vue
View file

@ -6,7 +6,8 @@ import { useRouter } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import type { DataListCommand } from "@/modules/18_command/interface/response/Main";
import type { FormCommand } from "@/modules/18_command/interface/request/Main";
import type { DataCommandType } from "@/modules/18_command/interface/response/Main";
import DialogHeader from "@/components/DialogHeader.vue";
@ -14,18 +15,19 @@ import { useCounterMixin } from "@/stores/mixin";
const $q = useQuasar();
const router = useRouter();
const { dialogConfirm, showLoader, hideLoader, messageError } =
const { dialogConfirm, showLoader, hideLoader, messageError, success } =
useCounterMixin();
const modal = defineModel<boolean>("modal", { required: true });
const isCopy = defineModel<boolean>("isCopy", { required: true });
const commandId = defineModel<string>("commandId", { default: "" });
const commandType = ref<string>("");
const commandNo = ref<string>("");
const commandYear = ref<string>("");
const commandYear = ref<number>(new Date().getFullYear());
const listCommand = ref<DataListCommand[]>([]);
const commandOp = ref<DataListCommand[]>([]);
const listCommand = ref<DataCommandType[]>([]);
const commandOp = ref<DataCommandType[]>([]);
async function fetchCommandType() {
showLoader();
@ -46,10 +48,29 @@ async function fetchCommandType() {
function onSubmit() {
dialogConfirm($q, () => {
!isCopy.value && router.push(`/command/edit/1234`);
console.log(commandNo.value);
console.log(commandYear.value);
onClose();
showLoader();
const body: FormCommand = {
commandYear: commandYear.value,
commandNo: commandNo.value,
commandTypeId: !isCopy.value ? commandType.value : undefined,
};
const path = !isCopy.value
? config.API.command
: config.API.commandAction(commandId.value, "copy");
http[!isCopy.value ? "post" : "put"](path, body)
.then(async (res) => {
const id = await res.data.result;
router.push(`/command/edit/${id}`);
success($q, "บันทึกข้อมูลสำเร็จ");
onClose();
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
});
}
@ -72,7 +93,7 @@ function filterSelector(val: string, update: Function, refData: string) {
function onClose() {
modal.value = false;
commandNo.value = "";
commandYear.value = "";
commandYear.value = new Date().getFullYear();
}
watch(modal, () => {
@ -130,7 +151,6 @@ watch(modal, () => {
v-model="commandNo"
hide-bottom-space
:label="`${'คำสั่งเลขที่'}`"
:rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเลขที่'}`]"
lazy-rules
/>
</div>
@ -138,17 +158,41 @@ watch(modal, () => {
>/</label
>
<div class="col-5">
<q-input
class="inputgreen"
outlined
dense
<datepicker
menu-class-name="modalfix"
v-model="commandYear"
hide-bottom-space
:label="`${'พ.ศ.'}`"
mask="####"
:rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
lazy-rules
/>
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
class="inputgreen"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
outlined
hide-bottom-space
:model-value="
commandYear == null ? null : commandYear + 543
"
: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>
</q-card-section>

172
src/modules/18_command/components/Main/TableMain.vue
View file

@ -1,81 +1,113 @@
<script setup lang="ts">
import { ref } from "vue";
import { onMounted, ref, watch } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useCommandListStore } from "@/modules/18_command/store/ListStore";
import DialogFormCommand from "@/modules/18_command/components/Main/DialogFormCommand.vue";
import type { QTableProps } from "quasar";
import type { Pagination } from "@/modules/18_command/interface/index/Main";
import DialogFormCommand from "@/modules/18_command/components/Main/DialogFormCommand.vue";
const $q = useQuasar();
const router = useRouter();
const store = useCommandListStore();
const { date2Thai, dialogRemove, dialogConfirm } = useCounterMixin();
const {
showLoader,
hideLoader,
success,
messageError,
date2Thai,
dialogRemove,
dialogConfirm,
} = useCounterMixin();
const page = defineModel<number>("page", { required: true });
const pageSize = defineModel<number>("pageSize", { required: true });
const props = defineProps({
fetchList: { type: Function, required: true },
});
const columns = ref<QTableProps["columns"]>([
{
name: "orderNo",
name: "commandNo",
align: "left",
label: "เลขที่คำสั่ง",
sortable: false,
field: "orderNo",
field: "commandNo",
format(val, row) {
return val ? `${val} / ${row.commandYear + 543}` : "-";
},
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "orderName",
align: "center",
name: "issue",
align: "left",
label: "ชื่อคำสั่ง",
sortable: true,
field: "orderName",
field: "issue",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "signatoryDate",
align: "center",
name: "commandExcecuteDate",
align: "left",
label: "วันที่ลงนาม",
sortable: false,
field: (v) => date2Thai(v),
field: "commandExcecuteDate",
format(val) {
return val ? date2Thai(val) : "-";
},
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "orderDate",
align: "center",
name: "commandAffectDate",
align: "left",
label: "วันที่คำสั่งมีผล",
sortable: false,
field: (v) => date2Thai(v),
field: "commandAffectDate",
format(val) {
return val ? date2Thai(val) : "-";
},
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "orderBy",
align: "center",
name: "createdFullName",
align: "left",
label: "ผู้สร้าง",
sortable: false,
field: "orderBy",
field: "createdFullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "signatoryBy",
align: "center",
name: "assignFullName",
align: "left",
label: "ผู้ลงนาม",
sortable: false,
field: "signatoryBy",
field: "assignFullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const modalCopy = ref<boolean>(false);
const isCheckPageSize = ref<boolean>(false);
const commandId = ref<string>("");
async function fetchListCommand() {
await props.fetchList?.();
}
function onRedirectToDetail(type: string, id: string) {
router.push(`/command/${type}/${id}`);
}
@ -88,7 +120,21 @@ function onCopy(id: string) {
function onCancel(id: string) {
dialogRemove(
$q,
() => {},
async () => {
showLoader();
await http
.put(config.API.commandAction(id, "cancel"))
.then(async () => {
await fetchListCommand();
success($q, "ยกเลิกรายการสำเร็จ");
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
},
"ยืนยันการยกเลิกการออกคำสั่ง",
"ต้องการยืนยันการยกเลิกการออกคำสั่งนี้ใช่หรือไม่ ?"
);
@ -102,6 +148,46 @@ function onReCommand(id: string) {
"ต้องการยืนยืนยันการดึงไปทำคำสั่งใหม่ใช่หรือไม่ ?"
);
}
function onDeleteCommand(id: string) {
dialogRemove(
$q,
async () => {
showLoader();
await http
.delete(config.API.command + `/${id}`)
.then(async () => {
await fetchListCommand();
success($q, "ลบรายการสำเร็จ");
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
},
"ยืนยันการลบคำสั่ง",
"ต้องการยืนยืนยันการลบคำสั่งนี้ใช่หรือไม่ ?"
);
}
/**
* function updatePagination
* @param newPagination ข้อมูล Pagination ใหม่
*/
function updatePagination(newPagination: Pagination) {
page.value = 1;
pageSize.value = newPagination.rowsPerPage;
}
watch(pageSize, () => {
isCheckPageSize.value = true;
fetchListCommand();
});
onMounted(() => {
!isCheckPageSize.value && fetchListCommand();
});
</script>
<template>
@ -114,6 +200,8 @@ function onReCommand(id: string) {
dense
bordered
:paging="true"
:rows-per-page-options="[10, 25, 50, 100]"
@update:pagination="updatePagination"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -139,7 +227,7 @@ function onReCommand(id: string) {
<q-item
clickable
v-close-popup
v-if="store.tabsMain !== 'list_cancel'"
v-if="store.tabsMain !== 'CANCEL'"
@click.pervent="onRedirectToDetail('edit', props.row.id)"
>
<q-item-section>
@ -196,7 +284,7 @@ function onReCommand(id: string) {
<q-item
clickable
v-close-popup
v-if="store.tabsMain !== 'list_cancel'"
v-if="store.tabsMain !== 'CANCEL'"
@click.pervent="onCancel(props.row.id)"
>
<q-item-section>
@ -216,7 +304,7 @@ function onReCommand(id: string) {
<q-item
clickable
v-close-popup
v-if="store.tabsMain === 'list_cancel'"
v-if="store.tabsMain === 'CANCEL'"
@click.pervent="onReCommand(props.row.id)"
>
<q-item-section>
@ -226,6 +314,20 @@ function onReCommand(id: string) {
</div>
</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
v-if="store.tabsMain === 'CANCEL'"
@click.pervent="onDeleteCommand(props.row.id)"
>
<q-item-section>
<div class="row items-center">
<q-icon color="red" size="xs" name="mdi-delete" />
<div class="q-pl-md">ลบคำสั่ง</div>
</div>
</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
@ -237,9 +339,27 @@ function onReCommand(id: string) {
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
ทั้งหมด {{ store.total }} รายการ
<q-pagination
v-model="page"
active-color="primary"
color="dark"
:max="Number(store.maxPage)"
size="sm"
boundary-links
direction-links
:max-pages="5"
@update:model-value="fetchListCommand"
></q-pagination>
</template>
</d-table>
<DialogFormCommand v-model:modal="modalCopy" :is-copy="true" />
<DialogFormCommand
v-model:modal="modalCopy"
:is-copy="true"
:command-id="commandId"
/>
</template>
<style scoped></style>

166
src/modules/18_command/components/Step/1_Detail.vue
View file

@ -1,27 +1,101 @@
<script setup lang="ts">
import { reactive, ref } from "vue";
import { onMounted, reactive, ref, watch } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
import type { FormDataDetail } from "@/modules/18_command/interface/request/Main";
import DialogPerview from "@/modules/18_command/components/Step/Dialog1_Perview.vue";
const $q = useQuasar();
const route = useRoute();
const store = useCommandDetail();
const { showLoader, hideLoader, success, messageError } = useCounterMixin();
const formData = reactive({
commandNo: "",
commandYear: "",
commandName: "",
commandHeader: "",
commandCenter: "",
commandFooter: "",
const isChangeData = defineModel<boolean>("isChangeData", { required: true });
const props = defineProps({
onCheckChangeData: { type: Function, required: true },
});
const commandId = ref<string>(route.params.id.toString());
const formData = reactive<FormDataDetail>({
commandNo: "",
commandYear: null,
// commandName: "",
detailHeader: "",
detailBody: "",
detailFooter: "",
issue: null,
});
const modalPreview = ref<boolean>(false);
async function fetchData() {
showLoader();
await http
.get(config.API.commandAction(commandId.value, "tab1"))
.then(async (res) => {
const data = await res.data.result;
formData.commandNo = data.commandNo;
formData.commandYear = data.commandYear;
formData.detailHeader = data.detailHeader;
formData.detailBody = data.detailBody;
formData.detailFooter = data.detailFooter;
formData.issue = data.issue;
isChangeData.value = false;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
async function onSubmit() {
showLoader();
await http
.put(config.API.commandAction(commandId.value, "tab1"), formData)
.then(async () => {
// await fetchData();
// success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
onMounted(() => {
fetchData();
});
/**
* เรียก function ไปใช่หน้าหลัก
*/
defineExpose({
onSubmit,
});
</script>
<template>
<q-card-section>
<div class="row q-col-gutter-sm">
<div class="col-12 row justify-end">
<q-btn
label="แสดงตัวอย่าง"
color="info"
icon="mdi-eye"
@click.prevent="modalPreview = true"
/>
</div>
<!-- คำสั่งเลขที่ -->
<div class="col-4 row">
<div class="col-6">
@ -33,22 +107,53 @@ const modalPreview = ref<boolean>(false);
v-model="formData.commandNo"
hide-bottom-space
:label="`${'คำสั่งเลขที่'}`"
@update:model-value="props.onCheckChangeData()"
/>
</div>
<label class="col-1 flex justify-center items-center text-bold">
/
</label>
<div class="col-5">
<q-input
<datepicker
menu-class-name="modalfix"
v-model="formData.commandYear"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
:class="store.classInput(!store.readonly)"
:readonly="store.readonly"
outlined
dense
v-model="formData.commandYear"
hide-bottom-space
:label="`${'พ.ศ.'}`"
mask="####"
/>
@update:model-value="props.onCheckChangeData()"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
outlined
hide-bottom-space
:class="store.classInput(!store.readonly)"
:readonly="store.readonly"
:model-value="
formData.commandYear == null
? null
: formData.commandYear + 543
"
:label="`${'พ.ศ.'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
@ -59,9 +164,10 @@ const modalPreview = ref<boolean>(false);
:readonly="store.readonly"
outlined
dense
v-model="formData.commandName"
v-model="formData.issue"
hide-bottom-space
:label="`${'คำสั่งเรื่อง'}`"
@update:model-value="props.onCheckChangeData()"
/>
</div>
@ -76,15 +182,16 @@ const modalPreview = ref<boolean>(false);
<q-field
class="q_field_p_none"
ref="fieldRef"
v-model="formData.commandHeader"
v-model="formData.detailHeader"
borderless
hide-bottom-space
>
<template #control>
<q-editor
@update:model-value="props.onCheckChangeData()"
:readonly="store.readonly"
class="full-width"
v-model="formData.commandHeader"
v-model="formData.detailHeader"
min-height="5rem"
:toolbar="[
['left', 'center', 'right', 'justify'],
@ -116,15 +223,16 @@ const modalPreview = ref<boolean>(false);
<q-field
class="q_field_p_none"
ref="fieldRef"
v-model="formData.commandCenter"
v-model="formData.detailBody"
borderless
hide-bottom-space
>
<template #control>
<q-editor
@update:model-value="props.onCheckChangeData()"
:readonly="store.readonly"
class="full-width"
v-model="formData.commandCenter"
v-model="formData.detailBody"
min-height="5rem"
:toolbar="[
['left', 'center', 'right', 'justify'],
@ -156,15 +264,16 @@ const modalPreview = ref<boolean>(false);
<q-field
class="q_field_p_none"
ref="fieldRef"
v-model="formData.commandFooter"
v-model="formData.detailFooter"
borderless
hide-bottom-space
>
<template #control>
<q-editor
@update:model-value="props.onCheckChangeData()"
:readonly="store.readonly"
class="full-width"
v-model="formData.commandFooter"
v-model="formData.detailFooter"
min-height="5rem"
:toolbar="[
['left', 'center', 'right', 'justify'],
@ -184,22 +293,13 @@ const modalPreview = ref<boolean>(false);
</q-card-section>
</q-card>
</div>
<div class="col-12 row justify-end">
<q-btn
label="แสดงตัวอย่าง"
color="info"
icon="mdi-eye"
@click.prevent="modalPreview = true"
/>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right" v-if="!store.readonly">
<q-btn label="บันทึก" color="public" />
<q-btn label="บันทึก" color="public" @click="onSubmit" />
</q-card-actions>
<DialogPerview v-model:modal="modalPreview" />

10
src/modules/18_command/components/Step/2_ListPersons.vue
View file

@ -24,6 +24,11 @@ const {
success,
} = useCounterMixin();
const isChangeData = defineModel<boolean>("isChangeData", { required: true });
const props = defineProps({
onCheckChangeData: { type: Function, required: true },
});
const posNoOptions = ref<DataOption[]>(storePosSalary.optionPos);
const templatePos = ref<string>("");
const position = ref<string>("");
@ -116,6 +121,11 @@ function filterSelector(val: string, update: Function, filtername: string) {
break;
}
}
function onSubmit() {}
defineExpose({
onSubmit,
});
</script>
<template>

10
src/modules/18_command/components/Step/3_ReceivedCopy.vue
View file

@ -21,6 +21,11 @@ const {
success,
} = useCounterMixin();
const isChangeData = defineModel<boolean>("isChangeData", { required: true });
const props = defineProps({
onCheckChangeData: { type: Function, required: true },
});
const filter = ref<string>("");
const rows = ref<any[]>([
{
@ -109,6 +114,11 @@ function onDelete(id: string) {
}
function onSubmitPerson() {}
function onSubmit() {}
defineExpose({
onSubmit,
});
</script>
<template>

12
src/modules/18_command/components/Step/4_Attached.vue
View file

@ -1,4 +1,14 @@
<script setup lang="ts"></script>
<script setup lang="ts">
const isChangeData = defineModel<boolean>("isChangeData", { required: true });
const props = defineProps({
onCheckChangeData: { type: Function, required: true },
});
function onSubmit() {}
defineExpose({
onSubmit,
});
</script>
<template>
<div>คำสั่งและบัญชีแนบท้าย</div>

7
src/modules/18_command/interface/index/Main.ts
View file

@ -7,4 +7,9 @@ interface DataOption {
name: string;
}
export type { Pagination, DataOption };
interface ItemTabs {
label: string;
name: string;
}
export type { Pagination, DataOption, ItemTabs };

25
src/modules/18_command/interface/request/Main.ts
View file

@ -1 +1,24 @@
export type {};
interface FormQuery {
page: number;
pageSize: number;
year: number;
keyword: string;
}
interface FormCommand {
commandYear: number;
commandNo: string;
commandTypeId?: string;
}
interface FormDataDetail {
commandNo: string;
commandYear: number | null;
// commandName: string;
detailHeader: string;
detailBody: string;
detailFooter: string;
issue: string | null;
}
export type { FormQuery, FormCommand, FormDataDetail };

23
src/modules/18_command/interface/response/Main.ts
View file

@ -1,4 +1,25 @@
interface ResListCommand {
data: {
result: {
data: DataListCommand[];
total: number;
};
};
}
interface DataListCommand {
assignFullName: string;
commandAffectDate: null | Date | string;
commandExcecuteDate: null | Date | string;
commandNo: string;
commandYear: number;
createdFullName: string;
id: string;
status: string;
issue?: string;
}
interface DataCommandType {
category: string;
commandCode: string;
createdAt: string | Date;
@ -11,4 +32,4 @@ interface DataListCommand {
name: string;
}
export type { DataListCommand };
export type { ResListCommand, DataListCommand, DataCommandType };

2
src/modules/18_command/store/DetailStore.ts
View file

@ -3,6 +3,7 @@ import { defineStore } from "pinia";
export const useCommandDetail = defineStore("commandDetailStore", () => {
const readonly = ref<boolean>(false);
const isChangeData = ref<boolean>(false);
const classInput = (val: boolean) => {
return {
@ -14,5 +15,6 @@ export const useCommandDetail = defineStore("commandDetailStore", () => {
return {
classInput,
readonly,
};
});

10
src/modules/18_command/store/ListStore.ts
View file

@ -1,12 +1,18 @@
import { defineStore } from "pinia";
import { ref } from "vue";
import type { DataListCommand } from "@/modules/18_command/interface/response/Main";
export const useCommandListStore = defineStore("commandListStore", () => {
const tabsMain = ref<string>("list_draft");
const rows = ref<any[]>([]);
const tabsMain = ref<string>("DRAFT");
const rows = ref<DataListCommand[]>([]);
const total = ref<number>(0);
const maxPage = ref<number>(0);
return {
tabsMain,
rows,
total,
maxPage,
};
});

87
src/modules/18_command/views/detail.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { onMounted, ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
@ -13,25 +13,51 @@ const router = useRouter();
const route = useRoute();
const store = useCommandDetail();
const componentMap: any = {
Detail,
ListPersons,
ReceivedCopy,
Attached,
};
const childDetailRef = ref<InstanceType<typeof Detail> | null>(null);
const childListPersonsRef = ref<InstanceType<typeof ListPersons> | null>(null);
const childReceivedCopyRef = ref<InstanceType<typeof ReceivedCopy> | null>(
null
);
const childAttachedRef = ref<InstanceType<typeof Attached> | null>(null);
const readonly = ref<boolean>(route.name === "commandViewDetailPage");
const isChangeData = ref<boolean>(false);
const tabs = ref<string>("Detail");
const tabsManu = ref([
{ label: "รายละเอียดคำสั่ง", name: "Detail" },
{ label: "รายชื่อผู้ออกคำสั่ง", name: "ListPersons" },
{ label: "รายชื่อผู้ได้รับสำเนาคำสั่ง", name: "ReceivedCopy" },
{
label: "รายชื่อผู้ออกคำสั่ง",
name: "ListPersons",
},
{
label: "รายชื่อผู้ได้รับสำเนาคำสั่ง",
name: "ReceivedCopy",
},
{ label: "คำสั่งและบัญชีแนบท้าบ", name: "Attached" },
]);
/**
* function เช็คการแกไข้ข้อมูล
*/
function onCheckChangeData() {
isChangeData.value = true;
}
onMounted(() => {
store.readonly = readonly.value;
});
watch(tabs, (newValue, oldValue) => {
console.log(`Count changed from ${oldValue} to ${newValue}`);
if (isChangeData.value) {
// เรียกใช้ฟังก์ชันของ component ลูก
if (oldValue === "Detail") {
console.log(childDetailRef.value);
childDetailRef.value?.onSubmit();
}
}
});
</script>
<template>
@ -73,14 +99,43 @@ onMounted(() => {
<q-separator />
<q-tab-panels v-model="tabs" animated>
<q-tab-panel
style="padding: 0px"
v-for="(panel, index) in tabsManu"
:key="index"
:name="panel.name"
>
<q-tab-panel style="padding: 0px" name="Detail">
<q-card>
<component :is="componentMap[panel.name]" />
<Detail
ref="childDetailRef"
v-model:is-change-data="isChangeData"
:on-check-change-data="onCheckChangeData"
/>
</q-card>
</q-tab-panel>
<q-tab-panel style="padding: 0px" name="ListPersons">
<q-card>
<ListPersons
ref="childListPersonsRef"
v-model:is-change-data="isChangeData"
:on-check-change-data="onCheckChangeData"
/>
</q-card>
</q-tab-panel>
<q-tab-panel style="padding: 0px" name="ReceivedCopy">
<q-card>
<ReceivedCopy
ref="childReceivedCopyRef"
v-model:is-change-data="isChangeData"
:on-check-change-data="onCheckChangeData"
/>
</q-card>
</q-tab-panel>
<q-tab-panel style="padding: 0px" name="Attached">
<q-card>
<Attached
ref="childAttachedRef"
v-model:is-change-data="isChangeData"
:on-check-change-data="onCheckChangeData"
/>
</q-card>
</q-tab-panel>
</q-tab-panels>

95
src/modules/18_command/views/lists.vue
View file

@ -1,53 +1,59 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { reactive, ref } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useCommandListStore } from "@/modules/18_command/store/ListStore";
import type { ItemTabs } from "@/modules/18_command/interface/index/Main";
import type { FormQuery } from "@/modules/18_command/interface/request/Main";
import type { ResListCommand } from "@/modules/18_command/interface/response/Main";
import DialogFormCommand from "@/modules/18_command/components/Main/DialogFormCommand.vue";
import TableList from "@/modules/18_command/components/Main/TableMain.vue";
const $q = useQuasar();
const store = useCommandListStore();
const { showLoader, hideLoader, messageError } = useCounterMixin();
const yearly = ref<number>(new Date().getFullYear());
const searchKeyword = ref<string>("");
const modalAdd = ref<boolean>(false);
const tabsManu = ref([
{ label: "แบบร่าง", name: "list_draft" },
{ label: "รอผู้มีอำนาจ", name: "list_authority" },
{ label: "รอออกคำสั่ง", name: "list_orders" },
{ label: "ออกคำสั่งเสร็จสิ้น", name: "list_completed" },
{ label: "ยกเลิก", name: "list_cancel" },
const tabsManu = ref<ItemTabs[]>([
{ label: "แบบร่าง", name: "DRAFT" },
{ label: "รอผู้มีอำนาจ", name: "PENDING" },
{ label: "รอออกคำสั่ง", name: "WAITING" },
{ label: "ออกคำสั่งเสร็จสิ้น", name: "REPORTED" },
{ label: "ยกเลิก", name: "CANCEL" },
]);
onMounted(() => {
store.rows = [
{
id: "1",
caseFault: null,
faultLevel: null,
fiscalYear: "2024",
fullName: "นายพิชัยยุทธ แสงศรี",
orderBy: "สำนักงานเขตพระนคร",
orderById: "32c99b86-c390-45d2-b1aa-7af5ba2de788",
orderByOrganization: "สำนักงานเขตพระนคร",
orderDate: "2024-08-23T03:09:00",
orderId: "08dcc321-17f7-43a8-80ef-40f7822a6e46",
orderName: "คำสั่งแต่งตั้ง",
orderNo: "23",
orderStatusName: "ออกคำสั่งแล้ว",
orderStatusValue: "e0d7c384-642d-4a01-a2e9-b06180ab466d",
orderTypeName: "คำสั่งแต่งตั้ง",
orderTypeValue: "3b3c8fcf-7940-4963-ab48-b8e803ed534d",
refRaw: null,
result: null,
signatoryBy: "นายวิษณุ สุวรรณรัตน์",
signatoryDate: "2024-08-23T03:09:00",
signatoryPosition: "ผู้อำนวยการ",
},
];
console.log("mounted");
const queryParams = reactive<FormQuery>({
page: 1,
pageSize: 10,
year: new Date().getFullYear(),
keyword: "",
});
async function fetchListCommand() {
showLoader();
await http
.get(config.API.commandList, {
params: { ...queryParams, status: store.tabsMain },
})
.then(async (res: ResListCommand) => {
const data = await res.data.result;
store.rows = data.data;
store.total = data.total;
store.maxPage = Math.ceil(data.total / queryParams.pageSize);
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
</script>
<template>
@ -58,11 +64,12 @@ onMounted(() => {
<q-toolbar class="q-pa-sm">
<datepicker
menu-class-name="modalfix"
v-model="yearly"
v-model="queryParams.year"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
@update:model-value="fetchListCommand"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
@ -73,7 +80,9 @@ onMounted(() => {
dense
outlined
hide-bottom-space
:model-value="yearly == null ? null : yearly + 543"
:model-value="
queryParams.year == null ? null : queryParams.year + 543
"
:label="`${'ปีงบประมาณ'}`"
>
<template v-slot:prepend>
@ -101,12 +110,12 @@ onMounted(() => {
<q-input
dense
outlined
v-model="searchKeyword"
v-model="queryParams.keyword"
label="ค้นหา"
clearable
style="width: 300px"
>
<template v-slot:append v-if="!searchKeyword">
<template v-slot:append v-if="!queryParams.keyword">
<q-icon name="search" /> </template
></q-input>
</q-toolbar>
@ -138,7 +147,11 @@ onMounted(() => {
:key="index"
:name="panel.name"
>
<TableList />
<TableList
:fetch-list="fetchListCommand"
v-model:page="queryParams.page"
v-model:pageSize="queryParams.pageSize"
/>
</q-tab-panel>
</q-tab-panels>
</q-card-section>