362 lines
10 KiB
Vue
362 lines
10 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from "vue";
|
|
import { useQuasar } from "quasar";
|
|
|
|
import { useRouter, useRoute } from "vue-router";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
|
|
import type { QTableProps } from "quasar";
|
|
import type { FormDistrict } from "@/modules/01_metadata/interface/response/personal/personal";
|
|
|
|
import DialogForm from "@/modules/01_metadata/components/personal/DialogForm.vue"; // เพิ่มข้อมูล,แก้ไขข้อมูล
|
|
|
|
const $q = useQuasar();
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const {
|
|
messageError,
|
|
showLoader,
|
|
hideLoader,
|
|
success,
|
|
date2Thai,
|
|
onSearchDataTable,
|
|
dialogRemove,
|
|
} = useCounterMixin();
|
|
|
|
/** Table*/
|
|
const columns = [
|
|
{
|
|
name: "name",
|
|
align: "left",
|
|
label: "เขต/อำเภอ",
|
|
sortable: true,
|
|
field: "name",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
sort: (a: string, b: string) =>
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
},
|
|
{
|
|
name: "createdAt",
|
|
align: "left",
|
|
label: "วันที่สร้าง",
|
|
sortable: true,
|
|
field: "createdAt",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
sort: (a: string, b: string) =>
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
},
|
|
{
|
|
name: "lastUpdatedAt",
|
|
align: "left",
|
|
label: "วันที่แก้ไข",
|
|
sortable: true,
|
|
field: "lastUpdatedAt",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
sort: (a: string, b: string) =>
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
},
|
|
{
|
|
name: "lastUpdateFullName",
|
|
align: "left",
|
|
label: "ผู้ดำเนินการ",
|
|
sortable: true,
|
|
field: "lastUpdateFullName",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
sort: (a: string, b: string) =>
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
},
|
|
] as const satisfies QTableProps["columns"];
|
|
const visibleColumns = ref<string[]>([
|
|
"name",
|
|
"createdAt",
|
|
"lastUpdatedAt",
|
|
"lastUpdateFullName",
|
|
]);
|
|
const pagination = ref({
|
|
sortBy: "name",
|
|
});
|
|
|
|
const id = ref<string>(route.params.id as string); // id จังหวัด
|
|
const filterKeyword = ref<string>(""); //คำค้นหา
|
|
const district = ref<string>(""); // เขต/อำเภอ
|
|
const editId = ref<string>(""); // id รายการ เขต/อำเภอ
|
|
const dialog = ref<boolean>(false); // เพิ่มข้อมูล,แก้ไขข้อมูล
|
|
const dialogStatus = ref<string>(""); // สถานะ เพิ่มข้อมูล,แก้ไขข้อมูล
|
|
const personalName = ref<string>("เขต/อำเภอ"); //label input
|
|
const rows = ref<FormDistrict[]>([]); // ข้อมูลรายการเขต/อำเภอ
|
|
const rowsMain = ref<FormDistrict[]>([]); // ข้อมูลรายการเขต/อำเภอ
|
|
const provinceName = ref<string>(""); //ชื่อจังหวัด
|
|
|
|
/**
|
|
* fetch ข้อมูลรายการ ระดับการเขต/อำเภอ ตาม id ของจังหวัด
|
|
* - จัดการกับข้อมูล
|
|
* - กำหนด rows.value เท่ากับข้อมูลที่ respones
|
|
*/
|
|
async function fetchData() {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.orgProvince + `/${id.value}`)
|
|
.then(async (res) => {
|
|
const data = await res.data.result.districts;
|
|
provinceName.value = await res.data.result.name;
|
|
|
|
const list = data.map((e: FormDistrict) => ({
|
|
...e,
|
|
createdAt: e.createdAt
|
|
? date2Thai(new Date(e.createdAt), false, true)
|
|
: "",
|
|
lastUpdatedAt: e.lastUpdatedAt
|
|
? date2Thai(new Date(e.lastUpdatedAt), false, true)
|
|
: "",
|
|
}));
|
|
rows.value = list;
|
|
rowsMain.value = list;
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* เพิ่มข้อมูลรายการระดับการเขต/อำเภอ
|
|
* แล้ว fetch ข้อมูลรายการ ระดับการเขต/อำเภอ ใหม่
|
|
*/
|
|
async function addData() {
|
|
showLoader();
|
|
await http
|
|
.post(config.API.orgDistrict, {
|
|
name: district.value,
|
|
provinceId: id.value,
|
|
})
|
|
.then(async () => {
|
|
await fetchData();
|
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* แก้ไขข้อมูลรายการระดับการเขต/อำเภอ
|
|
* แล้ว fetch ข้อมูลรายการ ระดับการเขต/อำเภอ ใหม่
|
|
* @param id รายการระดับการเขต/อำเภอ
|
|
*/
|
|
async function editData(id: string) {
|
|
showLoader();
|
|
await http
|
|
.put(config.API.orgDistrict + `/${id}`, {
|
|
name: district.value,
|
|
})
|
|
.then(async () => {
|
|
await fetchData();
|
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* ลบข้อมูลรายการระดับการเขต/อำเภอ
|
|
* แล้ว fetch ข้อมูลรายการ ข้อมูลรายการระดับการเขต/อำเภอ ใหม่
|
|
* @param id ข้อมูลรายการระดับการเขต/อำเภอ
|
|
*/
|
|
async function onDeleteData(id: string) {
|
|
dialogRemove($q, async () => {
|
|
showLoader();
|
|
await http
|
|
.delete(config.API.orgDistrict + `/${id}`)
|
|
.then(async () => {
|
|
await fetchData();
|
|
success($q, "ลบข้อมูลสำเร็จ");
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
});
|
|
}
|
|
|
|
/**
|
|
* ไปยังหน้า รายการเแขวง/ตำบลโดย id ของเขต/อำเภอ
|
|
* @param idSub เขต/อำเภอ
|
|
*/
|
|
function nextPage(idSub: string) {
|
|
router.push(`/master-data/personal/sub-district/${id.value}/${idSub}`);
|
|
}
|
|
|
|
function serchDataTable() {
|
|
rows.value = onSearchDataTable(
|
|
filterKeyword.value,
|
|
rowsMain.value,
|
|
columns ? columns : []
|
|
);
|
|
}
|
|
|
|
/**
|
|
* hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
|
|
* แล้วเรียก function fetch ข้อมูลรายการระดับการเขต/อำเภอ
|
|
*/
|
|
onMounted(async () => {
|
|
await fetchData();
|
|
});
|
|
</script>
|
|
|
|
<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)"
|
|
/>
|
|
เขต/อำเภอ {{ `(${provinceName})` }}
|
|
</div>
|
|
|
|
<q-card flat bordered>
|
|
<div class="q-pa-md">
|
|
<q-toolbar class="q-pa-none">
|
|
<q-btn
|
|
flat
|
|
round
|
|
color="primary"
|
|
icon="add"
|
|
@click.stop="
|
|
() => {
|
|
dialogStatus = 'create';
|
|
dialog = true;
|
|
district = '';
|
|
}
|
|
"
|
|
>
|
|
<q-tooltip> เพิ่มข้อมูล </q-tooltip>
|
|
</q-btn>
|
|
<q-space />
|
|
<div class="row q-gutter-sm">
|
|
<q-input
|
|
outlined
|
|
dense
|
|
v-model="filterKeyword"
|
|
label="ค้นหา"
|
|
@keydown.enter.pervent="serchDataTable"
|
|
>
|
|
<template v-slot:append>
|
|
<q-icon name="search" />
|
|
</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"
|
|
style="min-width: 140px"
|
|
/>
|
|
</div>
|
|
</q-toolbar>
|
|
|
|
<d-table
|
|
ref="table"
|
|
:columns="columns"
|
|
:rows="rows"
|
|
row-key="name"
|
|
flat
|
|
bordered
|
|
dense
|
|
class="custom-header-table"
|
|
:visible-columns="visibleColumns"
|
|
v-model:pagination="pagination"
|
|
>
|
|
<template v-slot:header="props">
|
|
<q-tr :props="props">
|
|
<q-th auto-width />
|
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
|
<span class="text-weight-medium">{{ col.label }}</span>
|
|
</q-th>
|
|
</q-tr>
|
|
</template>
|
|
<template v-slot:body="props">
|
|
<q-tr :props="props" class="cursor-pointer">
|
|
<q-td auto-width>
|
|
<q-btn
|
|
color="edit"
|
|
flat
|
|
dense
|
|
round
|
|
icon="edit"
|
|
clickable
|
|
@click.stop="
|
|
() => {
|
|
dialogStatus = 'edit';
|
|
dialog = true;
|
|
editId = props.row.id;
|
|
district = props.row.name;
|
|
}
|
|
"
|
|
>
|
|
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
|
</q-btn>
|
|
<q-btn
|
|
color="red"
|
|
flat
|
|
dense
|
|
round
|
|
icon="delete"
|
|
@click.stop.prevent="onDeleteData(props.row.id)"
|
|
>
|
|
<q-tooltip>ลบข้อมูล</q-tooltip>
|
|
</q-btn>
|
|
</q-td>
|
|
<q-td
|
|
v-for="col in props.cols"
|
|
:key="col.id"
|
|
@click="nextPage(props.row.id)"
|
|
>
|
|
<div>
|
|
{{ col.value ?? "-" }}
|
|
</div>
|
|
</q-td>
|
|
</q-tr>
|
|
</template>
|
|
</d-table>
|
|
</div>
|
|
</q-card>
|
|
|
|
<DialogForm
|
|
v-model:dialog="dialog"
|
|
v-model:data="district"
|
|
v-model:personal-name="personalName"
|
|
v-model:dialog-status="dialogStatus"
|
|
v-model:edit-id="editId"
|
|
:add-data="addData"
|
|
:fetch-data="fetchData"
|
|
:edit-data="editData"
|
|
/>
|
|
</template>
|