รายการคำสั่ง ==> API
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
71be6d095f
commit
15b33b147a
14 changed files with 568 additions and 145 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue