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

API รายการคำสั่งและ Template

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-09-13 15:55:45 +07:00
parent 5625fa06f4
commit 1794218a8f
6 changed files with 391 additions and 260 deletions
Download patch file Download diff file Expand all files Collapse all files

356
src/modules/05_command/views/lists.vue
View file

@ -13,6 +13,10 @@ import type {
Tabs,
DateOption,
} from "@/modules/05_command/interface/index/Main";
import type {
DataCommandSys,
DataTemplateDetail,
} from "@/modules/05_command/interface/response/Main";
import Header from "@/components/DialogHeader.vue";
import PageOrder from "@/modules/05_command/components/ViewPdf.vue";
@ -30,7 +34,12 @@ const {
messageError,
} = mixin;
const isActive = ref<string>(""); // สถานะของรายการคำสั่ง
const childTemplateDetailRef = ref<InstanceType<typeof TemplateDetail> | null>(
null
); //ref components ข้อความต้นแบบ
const childPageOrderRef = ref<InstanceType<typeof PageOrder> | null>(null); //ref components คำสั่ง
const isActive = ref<boolean>(true); // สถานะของรายการคำสั่ง
// options สถานะการใช้งาน
const activeOptions = ref<ActiveOptions[]>([
{
@ -70,20 +79,73 @@ const listOrder = ref<ListOrder[]>([]); // list คำสั่ง
const status = ref<boolean>(false); // สถานะ
const isEdit = ref<boolean>(false); //เก็บ true/false เช็คแก้ไข
const dialogFormCommand = ref<boolean>(false); // model คำสั่ง
const dataTemplateDetail = ref<DataTemplateDetail>();
const page = ref<number>(1); // หน้า
const pageSize = ref<number>(13); // จำนวนข้อมูล
const maxPage = ref<number>(0); // จำนวนหน้า
/**
* ฟังก์ชั่นดึงรายการประเภทคำสั่ง
*/
async function fetchCommandType() {
showLoader();
await http
.get(config.API.commandType + `/admin`, {
params: {
page: page.value,
pageSize: pageSize.value,
isActive: isActive.value,
},
})
.then(async (res) => {
const data = res.data.result;
listOrder.value = data.commandTypes;
maxPage.value = Math.ceil(data.total / pageSize.value);
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
/**
* ฟังก์ชันดึงข้อมูลรายการหมวดหมู่
*/
function fetchCommandSys() {
showLoader();
http
.get(config.API.commandSysList)
.then((res) => {
const data = res.data.result;
const option = data.map((e: DataCommandSys) => ({
id: e.id,
name: e.sysName,
}));
dataCategory.value = option;
categoryOP.value = option;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
/**
* ฟังก์ชั่นค้นหาคำสั่ง ตามสถานะ
* @param val สถานะ true/false
*/
function searchByStatus(val: string) {
console.log(val);
function searchByStatus() {
activeOrderId.value = "";
page.value = 1;
pageSize.value = 13;
fetchCommandType();
}
/** เปิด dialog */
function onDialogAdd() {
isEdit.value = false;
dialogFormCommand.value = true;
}
/**
* เปิด dialog Edit
* @param data ข้อมูลคำสั่ง
@ -91,8 +153,8 @@ function onDialogAdd() {
function onDialogEdit(data: ListOrder) {
idOrder.value = data.id;
name.value = data.name;
status.value = data.status;
status.value = data.isActive;
category.value = data.commandSysId;
isEdit.value = true;
dialogFormCommand.value = true;
}
@ -103,52 +165,82 @@ function onDialogEdit(data: ListOrder) {
*/
function onDelete(id: string) {
dialogRemove($q, () => {
// http
// .delete(config.API.)
// .then((res) => {})
// .catch((e) => {
// messageError($q, e);
// })
// .finally(() => {});
showLoader();
http
.delete(config.API.commandType + `/${id}`)
.then(async () => {
await fetchCommandType();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
});
}
/** ปิด dialog */
/**
* ปิด dialog
*/
function closeDialog() {
idOrder.value = "";
isEdit.value = false;
dialogFormCommand.value = false;
name.value = "";
status.value = false;
}
/** บันทึกข้อมูล dialog */
function onSubmit() {
dialogConfirm($q, () => {});
}
/** เก็บ id list คำสั่งที่เลือก เพื่อใช้ class */
function selectInbox(data: ListOrder) {
activeOrderId.value = data.id;
category.value = "";
}
/**
* ฟังก์ชั่นดึงรายการประเภทคำสั่ง
* บันทึกข้อมูลการแก้ไขคำสั่ง
*/
async function fetchOrderType() {
function onSubmit() {
dialogConfirm($q, async () => {
showLoader();
await http
.put(config.API.commandType + `/${idOrder.value}`, {
name: name.value,
commandSysId: category.value,
isActive: status.value,
})
.then(async () => {
await fetchCommandType();
success($q, "บันทึกข้อมูลสำเร็จ");
closeDialog();
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
});
}
/**
* เก็บ id list คำสั่งที่เลือก เพื่อใช้ class
*/
function selectInbox(data: ListOrder) {
activeOrderId.value = data.id;
fetchDataCommandTypeId(data.id);
}
/**
* ฟังก์ชันดึงข้อมูลรายละเอียดคำสั่ง
* @param id คำสั่ง
*/
async function fetchDataCommandTypeId(id: string) {
showLoader();
await http
.get(config.API.commandType)
.get(config.API.commandType + `/${id}`)
.then(async (res) => {
listOrder.value = res.data.result.map((item: any) => {
return {
name: item.name,
category: item.category,
commandCode: item.commandCode,
id: item.id,
status: true,
};
});
const data = res.data.result;
dataTemplateDetail.value = data;
await Promise.all([
childTemplateDetailRef?.value?.fetchData(data),
childPageOrderRef?.value?.fetchDocumentTemplate(data),
]);
})
.catch((err) => {
messageError($q, err);
@ -167,14 +259,14 @@ function filterSelector(val: string, update: Function) {
update(() => {
category.value = val ? "" : category.value;
categoryOP.value = dataCategory.value.filter(
(v: any) => v.name.indexOf(val) > -1
(v: DateOption) => v.name.indexOf(val) > -1
);
});
}
/** เริ่มเมื่อโหลดหน้านี้*/
onMounted(() => {
fetchOrderType();
onMounted(async () => {
await Promise.all([fetchCommandType(), fetchCommandSys()]);
});
</script>
@ -182,11 +274,12 @@ onMounted(() => {
<div class="toptitle text-dark col-12 row items-center">
รายการคำสั่งและ Template
</div>
<div class="row q-col-gutter-sm">
<div class="row q-col-gutter-sm" style="height: 85vh; display: flex">
<div class="col-4">
<q-card bordered style="height: 100%">
<q-card bordered style="min-height: 100%">
<div class="row items-center q-pa-sm">
<div class="col-2">
<!-- <div class="col-2">
<q-btn
flat
dense
@ -197,7 +290,7 @@ onMounted(() => {
>
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
</q-btn>
</div>
</div> -->
<q-space />
<div class="col-12 col-md-6">
<q-select
@ -210,82 +303,114 @@ onMounted(() => {
option-label="label"
option-value="value"
emit-value
map-options
@update:model-value="searchByStatus"
></q-select>
</div>
</div>
<q-separator />
<q-card-section class="q-pa-sm">
<q-scroll-area style="height: 70vh" class="scrollStyle">
<q-list
v-for="(item, index) in listOrder"
:key="item.id"
class="q-pr-sm"
<q-list
v-for="(item, index) in listOrder"
:key="item.id"
class="q-pr-sm"
>
<q-item
clickable
v-ripple
:active="activeOrderId === item.id"
active-class="my-menu_link"
@click="selectInbox(item)"
>
<q-item
clickable
v-ripple
:active="activeOrderId === item.id"
active-class="my-menu_link"
@click="selectInbox(item)"
>
<q-item-section>
<q-item-label>
{{ item.name }}
</q-item-label>
</q-item-section>
<q-item-section side center @click.stop>
<q-icon
name="mdi-dots-vertical"
class="q-pa-none q-ml-xs"
color="grey-13"
flat
dense
>
<q-menu
transition-show="jump-down"
transition-hide="jump-up"
>
<q-list dense style="min-width: 160px">
<q-item
clickable
v-close-popup
@click="onDialogEdit(item)"
<q-item-section>
<q-item-label>
{{ item.name }}
</q-item-label>
</q-item-section>
<q-item-section side center @click.stop>
<q-icon
name="mdi-dots-vertical"
class="q-pa-none q-ml-xs"
color="grey-13"
flat
dense
>
<q-menu transition-show="jump-down" transition-hide="jump-up">
<q-list dense style="min-width: 160px">
<q-item
clickable
v-close-popup
@click="onDialogEdit(item)"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-icon color="edit" size="xs" name="mdi-pencil" />
</q-item-section>
<q-item-section>แก้ไข</q-item-section>
</q-item>
<q-separator />
<q-item
clickable
v-close-popup
@click="onDelete(item.id)"
<q-icon color="edit" size="xs" name="mdi-pencil" />
</q-item-section>
<q-item-section>แก้ไข</q-item-section>
</q-item>
<q-separator />
<q-item
clickable
v-close-popup
@click="onDelete(item.id)"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-icon color="red" size="xs" name="mdi-delete" />
</q-item-section>
<q-item-section>ลบ</q-item-section>
</q-item>
<q-icon color="red" size="xs" name="mdi-delete" />
</q-item-section>
<q-item-section>ลบ</q-item-section>
</q-item>
<q-separator />
</q-list> </q-menu
></q-icon>
</q-item-section>
</q-item>
<q-separator v-if="listOrder.length !== index + 1" />
</q-list>
</q-scroll-area>
<q-separator />
</q-list> </q-menu
></q-icon>
</q-item-section>
</q-item>
<q-separator v-if="listOrder.length !== index + 1" />
</q-list>
<div
class="full-width row flex-center text-accent q-gutter-sm"
v-if="listOrder.length === 0"
>
<span
><div
style="
height: 76vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
"
class="text-grey-5"
>
<q-icon name="search" size="4rem" />
<span>{{ "ไม่พบข้อมูล" }}</span>
</div>
</span>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="around" v-if="listOrder.length > 0">
<q-pagination
class="q-pa-sm"
v-model="page"
active-color="primary"
color="dark"
:max="maxPage"
size="sm"
boundary-links
direction-links
:max-pages="5"
@update:model-value="fetchCommandType"
></q-pagination>
</q-card-actions>
</q-card>
</div>
<div class="col-8">
@ -313,20 +438,27 @@ onMounted(() => {
<q-tab-panels v-model="store.currentTab" animated>
<q-tab-panel name="order">
<PageOrder
ref="childPageOrderRef"
v-model:type="store.currentTab"
v-model:data-template-detail="dataTemplateDetail as DataTemplateDetail"
:id-order="activeOrderId"
/>
</q-tab-panel>
<q-tab-panel name="account">
<PageOrder
ref="childPageOrderRef"
v-model:type="store.currentTab"
v-model:data-template-detail="dataTemplateDetail as DataTemplateDetail"
:id-order="activeOrderId"
/>
</q-tab-panel>
<q-tab-panel name="template">
<TemplateDetail
ref="childTemplateDetailRef"
v-model:type="store.currentTab"
v-model:data-template-detail="dataTemplateDetail as DataTemplateDetail"
:command-id="activeOrderId"
:fetch-data-template="fetchDataCommandTypeId"
/>
</q-tab-panel>
</q-tab-panels>