ข้อมูลบุคคล: ต่อAPI
This commit is contained in:
parent
47e96ddec5
commit
338c2a3b7d
12 changed files with 415 additions and 198 deletions
|
|
@ -14,6 +14,14 @@ const gender = `${env.API_URI}/metadata/gender/`;
|
|||
const relationship = `${env.API_URI}/metadata/relationship/`;
|
||||
const religion = `${env.API_URI}/metadata/religion/`;
|
||||
|
||||
const orgRelationship = `${env.API_URI}/org/relationship/`;
|
||||
const orgPrefix = `${env.API_URI}/org/prefix/`;
|
||||
const orgRank = `${env.API_URI}/org/rank/`;
|
||||
const orgBloodGroup = `${env.API_URI}/org/bloodGroup/`;
|
||||
const orgGender = `${env.API_URI}/org/gender/`;
|
||||
const orgReligion = `${env.API_URI}/org/religion/`;
|
||||
const orgEducationLevel = `${env.API_URI}/org/educationLevel/`;
|
||||
|
||||
export default {
|
||||
person: `${person}person`,
|
||||
|
||||
|
|
@ -105,4 +113,20 @@ export default {
|
|||
listEducationLevelHistoryId: (id: string) => `${educationLevel}history/${id}`,
|
||||
listEducationLevelPublished: `${educationLevel}history/published`,
|
||||
listEducationLevelPublishedHistory: `${educationLevel}history/published-history`,
|
||||
|
||||
// API ใหม่
|
||||
orgRelationship,
|
||||
orgRelationshipId: (id: string) => `${orgRelationship}${id}`,
|
||||
orgPrefix,
|
||||
orgPrefixId: (id: string) => `${orgPrefix}${id}`,
|
||||
orgRank,
|
||||
orgRankId: (id: string) => `${orgRank}${id}`,
|
||||
orgBloodGroup,
|
||||
orgBloodGroupId: (id: string) => `${orgBloodGroup}${id}`,
|
||||
orgGender,
|
||||
orgGenderId: (id: string) => `${orgGender}${id}`,
|
||||
orgReligion,
|
||||
orgReligionId: (id: string) => `${orgReligion}${id}`,
|
||||
orgEducationLevel,
|
||||
orgEducationLevelId: (id: string) => `${orgEducationLevel}${id}`,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,17 +2,12 @@
|
|||
import { ref, onMounted } from "vue";
|
||||
import type { QTableProps } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useRouter } from "vue-router";
|
||||
import { usePersonalDataStore } from "@/modules/01_metadataNew/stores/personalStore";
|
||||
import dialogHeader from "@/components/DialogHeader.vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import DialogForm from "@/modules/01_metadataNew/components/personal/DialogForm.vue";
|
||||
|
||||
const store = usePersonalDataStore();
|
||||
const router = useRouter();
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogRemove, dialogConfirm } = mixin;
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
const TABLE_COLUMNS = [
|
||||
{
|
||||
name: "prefix",
|
||||
align: "left",
|
||||
|
|
@ -57,13 +52,17 @@ const columns = ref<QTableProps["columns"]>([
|
|||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
] as const satisfies QTableProps["columns"];
|
||||
|
||||
const $q = useQuasar();
|
||||
const store = usePersonalDataStore();
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogRemove, messageError, showLoader, hideLoader } = mixin;
|
||||
|
||||
const filterKeyword = ref<string>("");
|
||||
const dialog = ref<boolean>(false);
|
||||
const prefix = ref<string>("");
|
||||
const editId = ref<string>("");
|
||||
const dialogStatus = ref<string>("");
|
||||
const personalName = ref<string>("คำนำหน้าชื่อ");
|
||||
const visibleColumns = ref<string[]>([
|
||||
|
|
@ -97,8 +96,43 @@ const data = [
|
|||
},
|
||||
];
|
||||
|
||||
async function fetchData() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.orgPrefix)
|
||||
.then(async (res) => {
|
||||
console.log(res.data.result);
|
||||
store.save(res.data.result);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
async function addData() {
|
||||
await http.post(config.API.orgPrefix, {
|
||||
name: prefix.value,
|
||||
});
|
||||
fetchData();
|
||||
}
|
||||
|
||||
async function editData(id: string) {
|
||||
await http.put(config.API.orgPrefixId(id), {
|
||||
name: prefix.value,
|
||||
});
|
||||
fetchData();
|
||||
}
|
||||
|
||||
async function deleteData(id: string) {
|
||||
await http.delete(config.API.orgPrefixId(id));
|
||||
fetchData();
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
store.fetchData(data);
|
||||
fetchData();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -130,7 +164,7 @@ onMounted(async () => {
|
|||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="columns"
|
||||
:options="TABLE_COLUMNS"
|
||||
option-value="name"
|
||||
options-cover
|
||||
style="min-width: 150px"
|
||||
|
|
@ -140,7 +174,7 @@ onMounted(async () => {
|
|||
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:columns="TABLE_COLUMNS"
|
||||
:rows="store.row"
|
||||
:filter="filterKeyword"
|
||||
row-key="name"
|
||||
|
|
@ -162,9 +196,7 @@ onMounted(async () => {
|
|||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td v-for="col in props.cols" :key="col.id">
|
||||
<div>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
{{ col.value }}
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
|
|
@ -185,6 +217,8 @@ onMounted(async () => {
|
|||
() => {
|
||||
dialogStatus = 'edit';
|
||||
dialog = true;
|
||||
prefix = props.row.name;
|
||||
editId = props.row.id;
|
||||
}
|
||||
"
|
||||
>
|
||||
|
|
@ -197,7 +231,12 @@ onMounted(async () => {
|
|||
</q-item>
|
||||
<q-item clickable>
|
||||
<q-item-section
|
||||
@click="dialogRemove($q, async () => {})"
|
||||
@click="
|
||||
dialogRemove(
|
||||
$q,
|
||||
async () => await deleteData(props.row.id)
|
||||
)
|
||||
"
|
||||
v-close-popup
|
||||
>
|
||||
<div class="row items-center white">
|
||||
|
|
@ -219,5 +258,9 @@ onMounted(async () => {
|
|||
v-model:data="prefix"
|
||||
v-model:personalName="personalName"
|
||||
v-model:dialogStatus="dialogStatus"
|
||||
v-model:editId="editId"
|
||||
:addData="addData"
|
||||
:fetch-data="fetchData"
|
||||
:edit-data="editData"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -7,12 +7,9 @@ import { usePersonalDataStore } from "@/modules/01_metadataNew/stores/personalSt
|
|||
import dialogHeader from "@/components/DialogHeader.vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import DialogForm from "@/modules/01_metadataNew/components/personal/DialogForm.vue";
|
||||
|
||||
const store = usePersonalDataStore();
|
||||
const router = useRouter();
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogRemove, dialogConfirm } = mixin;
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
const columns = [
|
||||
{
|
||||
name: "rank",
|
||||
align: "left",
|
||||
|
|
@ -57,16 +54,21 @@ const columns = ref<QTableProps["columns"]>([
|
|||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
] as const satisfies QTableProps["columns"];
|
||||
|
||||
const store = usePersonalDataStore();
|
||||
const router = useRouter();
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogRemove, messageError, showLoader, hideLoader } = mixin;
|
||||
|
||||
const $q = useQuasar();
|
||||
|
||||
const filterKeyword = ref<string>("");
|
||||
const dialog = ref<boolean>(false);
|
||||
const rank = ref<string>("");
|
||||
const rankRef = ref<any>(null);
|
||||
const dialogStatus = ref<string>("");
|
||||
const personalName = ref<string>("ยศ");
|
||||
const editId = ref<string>("");
|
||||
const visibleColumns = ref<string[]>([
|
||||
"rank",
|
||||
"createdAt",
|
||||
|
|
@ -74,32 +76,43 @@ const visibleColumns = ref<string[]>([
|
|||
"lastUpdateFullName",
|
||||
]);
|
||||
|
||||
const data = [
|
||||
{
|
||||
id: "1",
|
||||
name: "ยศ 1",
|
||||
createdAt: new Date(),
|
||||
lastUpdatedAt: new Date(),
|
||||
lastUpdateFullName: "สาวิตรี ศรีสมัย",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "ยศ 2",
|
||||
createdAt: new Date(),
|
||||
lastUpdatedAt: new Date(),
|
||||
lastUpdateFullName: "System Administrator",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "ยศ 3",
|
||||
createdAt: new Date(),
|
||||
lastUpdatedAt: new Date(),
|
||||
lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
|
||||
},
|
||||
];
|
||||
async function fetchData() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.orgRank)
|
||||
.then(async (res) => {
|
||||
console.log(res.data.result);
|
||||
store.save(res.data.result);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
async function addData() {
|
||||
await http.post(config.API.orgRank, {
|
||||
name: rank.value,
|
||||
});
|
||||
fetchData();
|
||||
}
|
||||
|
||||
async function editData(id: string) {
|
||||
await http.put(config.API.orgRankId(id), {
|
||||
name: rank.value,
|
||||
});
|
||||
fetchData();
|
||||
}
|
||||
|
||||
async function deleteData(id: string) {
|
||||
await http.delete(config.API.orgRankId(id));
|
||||
fetchData();
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
store.fetchData(data);
|
||||
fetchData();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -186,6 +199,8 @@ onMounted(async () => {
|
|||
() => {
|
||||
dialogStatus = 'edit';
|
||||
dialog = true;
|
||||
rank = props.row.name;
|
||||
editId = props.row.id;
|
||||
}
|
||||
"
|
||||
>
|
||||
|
|
@ -198,7 +213,12 @@ onMounted(async () => {
|
|||
</q-item>
|
||||
<q-item clickable>
|
||||
<q-item-section
|
||||
@click="dialogRemove($q, async () => {})"
|
||||
@click="
|
||||
dialogRemove(
|
||||
$q,
|
||||
async () => await deleteData(props.row.id)
|
||||
)
|
||||
"
|
||||
v-close-popup
|
||||
>
|
||||
<div class="row items-center white">
|
||||
|
|
@ -220,5 +240,9 @@ onMounted(async () => {
|
|||
v-model:data="rank"
|
||||
v-model:personalName="personalName"
|
||||
v-model:dialogStatus="dialogStatus"
|
||||
v-model:editId="editId"
|
||||
:addData="addData"
|
||||
:fetch-data="fetchData"
|
||||
:edit-data="editData"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -7,12 +7,14 @@ import { usePersonalDataStore } from "@/modules/01_metadataNew/stores/personalSt
|
|||
import dialogHeader from "@/components/DialogHeader.vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import DialogForm from "@/modules/01_metadataNew/components/personal/DialogForm.vue";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const store = usePersonalDataStore();
|
||||
const router = useRouter();
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogRemove, dialogConfirm } = mixin;
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
const { dialogRemove, messageError, showLoader, hideLoader } = mixin;
|
||||
const columns = [
|
||||
{
|
||||
name: "bloodGroup",
|
||||
align: "left",
|
||||
|
|
@ -57,14 +59,14 @@ const columns = ref<QTableProps["columns"]>([
|
|||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
] as const satisfies QTableProps["columns"];
|
||||
|
||||
const $q = useQuasar();
|
||||
|
||||
const filterKeyword = ref<string>("");
|
||||
const dialog = ref<boolean>(false);
|
||||
const editId = ref<string>("");
|
||||
const bloodGroup = ref<string>("");
|
||||
const bloodGroupRef = ref<any>(null);
|
||||
const dialogStatus = ref<string>("");
|
||||
const personalName = ref<string>("กลุ่มเลือด");
|
||||
const visibleColumns = ref<string[]>([
|
||||
|
|
@ -74,32 +76,43 @@ const visibleColumns = ref<string[]>([
|
|||
"lastUpdateFullName",
|
||||
]);
|
||||
|
||||
const data = [
|
||||
{
|
||||
id: "1",
|
||||
name: "A",
|
||||
createdAt: new Date(),
|
||||
lastUpdatedAt: new Date(),
|
||||
lastUpdateFullName: "สาวิตรี ศรีสมัย",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "AB",
|
||||
createdAt: new Date(),
|
||||
lastUpdatedAt: new Date(),
|
||||
lastUpdateFullName: "System Administrator",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "O",
|
||||
createdAt: new Date(),
|
||||
lastUpdatedAt: new Date(),
|
||||
lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
|
||||
},
|
||||
];
|
||||
async function fetchData() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.orgBloodGroup)
|
||||
.then(async (res) => {
|
||||
console.log(res.data.result);
|
||||
store.save(res.data.result);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
async function addData() {
|
||||
await http.post(config.API.orgBloodGroup, {
|
||||
name: bloodGroup.value,
|
||||
});
|
||||
fetchData();
|
||||
}
|
||||
|
||||
async function editData(id: string) {
|
||||
await http.put(config.API.orgBloodGroupId(id), {
|
||||
name: bloodGroup.value,
|
||||
});
|
||||
fetchData();
|
||||
}
|
||||
|
||||
async function deleteData(id: string) {
|
||||
await http.delete(config.API.orgBloodGroupId(id));
|
||||
fetchData();
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
store.fetchData(data);
|
||||
fetchData();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -186,6 +199,8 @@ onMounted(async () => {
|
|||
() => {
|
||||
dialogStatus = 'edit';
|
||||
dialog = true;
|
||||
bloodGroup = props.row.name;
|
||||
editId = props.row.id;
|
||||
}
|
||||
"
|
||||
>
|
||||
|
|
@ -198,7 +213,12 @@ onMounted(async () => {
|
|||
</q-item>
|
||||
<q-item clickable>
|
||||
<q-item-section
|
||||
@click="dialogRemove($q, async () => {})"
|
||||
@click="
|
||||
dialogRemove(
|
||||
$q,
|
||||
async () => await deleteData(props.row.id)
|
||||
)
|
||||
"
|
||||
v-close-popup
|
||||
>
|
||||
<div class="row items-center white">
|
||||
|
|
@ -220,5 +240,9 @@ onMounted(async () => {
|
|||
v-model:data="bloodGroup"
|
||||
v-model:personalName="personalName"
|
||||
v-model:dialogStatus="dialogStatus"
|
||||
v-model:editId="editId"
|
||||
:addData="addData"
|
||||
:fetch-data="fetchData"
|
||||
:edit-data="editData"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -7,12 +7,14 @@ import { usePersonalDataStore } from "@/modules/01_metadataNew/stores/personalSt
|
|||
import dialogHeader from "@/components/DialogHeader.vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import DialogForm from "@/modules/01_metadataNew/components/personal/DialogForm.vue";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const store = usePersonalDataStore();
|
||||
const router = useRouter();
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogRemove, dialogConfirm } = mixin;
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
const { dialogRemove, messageError, showLoader, hideLoader } = mixin;
|
||||
const columns = [
|
||||
{
|
||||
name: "gender",
|
||||
align: "left",
|
||||
|
|
@ -57,14 +59,14 @@ const columns = ref<QTableProps["columns"]>([
|
|||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
] as const satisfies QTableProps["columns"];
|
||||
|
||||
const $q = useQuasar();
|
||||
|
||||
const filterKeyword = ref<string>("");
|
||||
const dialog = ref<boolean>(false);
|
||||
const gender = ref<string>("");
|
||||
const genderRef = ref<any>(null);
|
||||
const editId = ref<string>("");
|
||||
const dialogStatus = ref<string>("");
|
||||
const personalName = ref<string>("เพศ");
|
||||
const visibleColumns = ref<string[]>([
|
||||
|
|
@ -74,32 +76,43 @@ const visibleColumns = ref<string[]>([
|
|||
"lastUpdateFullName",
|
||||
]);
|
||||
|
||||
const data = [
|
||||
{
|
||||
id: "1",
|
||||
name: "ชาย",
|
||||
createdAt: new Date(),
|
||||
lastUpdatedAt: new Date(),
|
||||
lastUpdateFullName: "สาวิตรี ศรีสมัย",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "หญิง",
|
||||
createdAt: new Date(),
|
||||
lastUpdatedAt: new Date(),
|
||||
lastUpdateFullName: "System Administrator",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "เพศทางเลือก",
|
||||
createdAt: new Date(),
|
||||
lastUpdatedAt: new Date(),
|
||||
lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
|
||||
},
|
||||
];
|
||||
async function fetchData() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.orgGender)
|
||||
.then(async (res) => {
|
||||
console.log(res.data.result);
|
||||
store.save(res.data.result);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
async function addData() {
|
||||
await http.post(config.API.orgGender, {
|
||||
name: gender.value,
|
||||
});
|
||||
fetchData();
|
||||
}
|
||||
|
||||
async function editData(id: string) {
|
||||
await http.put(config.API.orgGenderId(id), {
|
||||
name: gender.value,
|
||||
});
|
||||
fetchData();
|
||||
}
|
||||
|
||||
async function deleteData(id: string) {
|
||||
await http.delete(config.API.orgGenderId(id));
|
||||
fetchData();
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
store.fetchData(data);
|
||||
fetchData();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -186,6 +199,8 @@ onMounted(async () => {
|
|||
() => {
|
||||
dialogStatus = 'edit';
|
||||
dialog = true;
|
||||
gender = props.row.name;
|
||||
editId = props.row.id;
|
||||
}
|
||||
"
|
||||
>
|
||||
|
|
@ -198,7 +213,12 @@ onMounted(async () => {
|
|||
</q-item>
|
||||
<q-item clickable>
|
||||
<q-item-section
|
||||
@click="dialogRemove($q, async () => {})"
|
||||
@click="
|
||||
dialogRemove(
|
||||
$q,
|
||||
async () => await deleteData(props.row.id)
|
||||
)
|
||||
"
|
||||
v-close-popup
|
||||
>
|
||||
<div class="row items-center white">
|
||||
|
|
@ -220,5 +240,9 @@ onMounted(async () => {
|
|||
v-model:data="gender"
|
||||
v-model:personalName="personalName"
|
||||
v-model:dialogStatus="dialogStatus"
|
||||
v-model:editId="editId"
|
||||
:addData="addData"
|
||||
:fetch-data="fetchData"
|
||||
:edit-data="editData"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -7,12 +7,14 @@ import { usePersonalDataStore } from "@/modules/01_metadataNew/stores/personalSt
|
|||
import dialogHeader from "@/components/DialogHeader.vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import DialogForm from "@/modules/01_metadataNew/components/personal/DialogForm.vue";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const store = usePersonalDataStore();
|
||||
const router = useRouter();
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogRemove, dialogConfirm } = mixin;
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
const { dialogRemove, messageError, showLoader, hideLoader } = mixin;
|
||||
const columns = [
|
||||
{
|
||||
name: "religion",
|
||||
align: "left",
|
||||
|
|
@ -57,14 +59,14 @@ const columns = ref<QTableProps["columns"]>([
|
|||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
] as const satisfies QTableProps["columns"];
|
||||
|
||||
const $q = useQuasar();
|
||||
|
||||
const filterKeyword = ref<string>("");
|
||||
const dialog = ref<boolean>(false);
|
||||
const religion = ref<string>("");
|
||||
const religionRef = ref<any>(null);
|
||||
const editId = ref<string>("");
|
||||
const dialogStatus = ref<string>("");
|
||||
const personalName = ref<string>("ศาสนา");
|
||||
const visibleColumns = ref<string[]>([
|
||||
|
|
@ -74,39 +76,43 @@ const visibleColumns = ref<string[]>([
|
|||
"lastUpdateFullName",
|
||||
]);
|
||||
|
||||
const data = [
|
||||
{
|
||||
id: "1",
|
||||
name: "อิสลาม",
|
||||
createdAt: new Date(),
|
||||
lastUpdatedAt: new Date(),
|
||||
lastUpdateFullName: "สาวิตรี ศรีสมัย",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "พุทธ",
|
||||
createdAt: new Date(),
|
||||
lastUpdatedAt: new Date(),
|
||||
lastUpdateFullName: "System Administrator",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "ขงจื้อ",
|
||||
createdAt: new Date(),
|
||||
lastUpdatedAt: new Date(),
|
||||
lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "คริสต์",
|
||||
createdAt: new Date(),
|
||||
lastUpdatedAt: new Date(),
|
||||
lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
|
||||
},
|
||||
];
|
||||
async function fetchData() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.orgReligion)
|
||||
.then(async (res) => {
|
||||
console.log(res.data.result);
|
||||
store.save(res.data.result);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
async function addData() {
|
||||
await http.post(config.API.orgReligion, {
|
||||
name: religion.value,
|
||||
});
|
||||
fetchData();
|
||||
}
|
||||
|
||||
async function editData(id: string) {
|
||||
await http.put(config.API.orgReligionId(id), {
|
||||
name: religion.value,
|
||||
});
|
||||
fetchData();
|
||||
}
|
||||
|
||||
async function deleteData(id: string) {
|
||||
await http.delete(config.API.orgReligionId(id));
|
||||
fetchData();
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
store.fetchData(data);
|
||||
fetchData();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -193,6 +199,8 @@ onMounted(async () => {
|
|||
() => {
|
||||
dialogStatus = 'edit';
|
||||
dialog = true;
|
||||
religion = props.row.name;
|
||||
editId = props.row.id;
|
||||
}
|
||||
"
|
||||
>
|
||||
|
|
@ -205,7 +213,12 @@ onMounted(async () => {
|
|||
</q-item>
|
||||
<q-item clickable>
|
||||
<q-item-section
|
||||
@click="dialogRemove($q, async () => {})"
|
||||
@click="
|
||||
dialogRemove(
|
||||
$q,
|
||||
async () => await deleteData(props.row.id)
|
||||
)
|
||||
"
|
||||
v-close-popup
|
||||
>
|
||||
<div class="row items-center white">
|
||||
|
|
@ -227,5 +240,9 @@ onMounted(async () => {
|
|||
v-model:data="religion"
|
||||
v-model:personalName="personalName"
|
||||
v-model:dialogStatus="dialogStatus"
|
||||
v-model:editId="editId"
|
||||
:addData="addData"
|
||||
:fetch-data="fetchData"
|
||||
:edit-data="editData"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -4,15 +4,16 @@ import type { QTableProps } from "quasar";
|
|||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useRouter } from "vue-router";
|
||||
import { usePersonalDataStore } from "@/modules/01_metadataNew/stores/personalStore";
|
||||
import dialogHeader from "@/components/DialogHeader.vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import DialogForm from "@/modules/01_metadataNew/components/personal/DialogForm.vue";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const store = usePersonalDataStore();
|
||||
const router = useRouter();
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogRemove, dialogConfirm } = mixin;
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
const { dialogRemove, messageError, showLoader, hideLoader } = mixin;
|
||||
const columns = [
|
||||
{
|
||||
name: "relationship",
|
||||
align: "left",
|
||||
|
|
@ -57,14 +58,13 @@ const columns = ref<QTableProps["columns"]>([
|
|||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
] as const satisfies QTableProps["columns"];
|
||||
|
||||
const $q = useQuasar();
|
||||
|
||||
const filterKeyword = ref<string>("");
|
||||
const dialog = ref<boolean>(false);
|
||||
const relationship = ref<string>("");
|
||||
const relationshipRef = ref<any>(null);
|
||||
const dialogStatus = ref<string>("");
|
||||
const personalName = ref<string>("สถานภาพ");
|
||||
const visibleColumns = ref<string[]>([
|
||||
|
|
@ -73,7 +73,7 @@ const visibleColumns = ref<string[]>([
|
|||
"lastUpdatedAt",
|
||||
"lastUpdateFullName",
|
||||
]);
|
||||
|
||||
const editId = ref<string>("");
|
||||
const data = [
|
||||
{
|
||||
id: "1",
|
||||
|
|
@ -105,8 +105,43 @@ const data = [
|
|||
},
|
||||
];
|
||||
|
||||
async function fetchData() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.orgRelationship)
|
||||
.then(async (res) => {
|
||||
console.log(res.data.result);
|
||||
store.save(res.data.result);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
async function addData() {
|
||||
await http.post(config.API.orgRelationship, {
|
||||
name: relationship.value,
|
||||
});
|
||||
fetchData();
|
||||
}
|
||||
|
||||
async function editData(id: string) {
|
||||
await http.put(config.API.orgRelationshipId(id), {
|
||||
name: relationship.value,
|
||||
});
|
||||
fetchData();
|
||||
}
|
||||
|
||||
async function deleteData(id: string) {
|
||||
await http.delete(config.API.orgRelationshipId(id));
|
||||
fetchData();
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
store.fetchData(data);
|
||||
fetchData();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -193,6 +228,7 @@ onMounted(async () => {
|
|||
() => {
|
||||
dialogStatus = 'edit';
|
||||
dialog = true;
|
||||
editId = props.row.id;
|
||||
}
|
||||
"
|
||||
>
|
||||
|
|
@ -205,7 +241,12 @@ onMounted(async () => {
|
|||
</q-item>
|
||||
<q-item clickable>
|
||||
<q-item-section
|
||||
@click="dialogRemove($q, async () => {})"
|
||||
@click="
|
||||
dialogRemove(
|
||||
$q,
|
||||
async () => await deleteData(props.row.id)
|
||||
)
|
||||
"
|
||||
v-close-popup
|
||||
>
|
||||
<div class="row items-center white">
|
||||
|
|
@ -227,5 +268,9 @@ onMounted(async () => {
|
|||
v-model:data="relationship"
|
||||
v-model:personalName="personalName"
|
||||
v-model:dialogStatus="dialogStatus"
|
||||
v-model:editId="editId"
|
||||
:addData="addData"
|
||||
:fetch-data="fetchData"
|
||||
:edit-data="editData"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -6,11 +6,13 @@ import { useRouter } from "vue-router";
|
|||
import { usePersonalDataStore } from "@/modules/01_metadataNew/stores/personalStore";
|
||||
import { useQuasar } from "quasar";
|
||||
import DialogForm from "@/modules/01_metadataNew/components/personal/DialogForm.vue";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const store = usePersonalDataStore();
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogRemove } = mixin;
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
const { dialogRemove, messageError, showLoader, hideLoader } = mixin;
|
||||
const columns = [
|
||||
{
|
||||
name: "name",
|
||||
align: "left",
|
||||
|
|
@ -66,7 +68,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
] as const satisfies QTableProps["columns"];
|
||||
|
||||
const $q = useQuasar();
|
||||
|
||||
|
|
@ -84,43 +86,45 @@ const visibleColumns = ref<string[]>([
|
|||
"lastUpdateFullName",
|
||||
]);
|
||||
|
||||
const data = [
|
||||
{
|
||||
id: "1",
|
||||
name: "เคยสมรสแต่ไม่ทราบสถานภาพสมรส",
|
||||
rank: 1,
|
||||
createdAt: new Date(),
|
||||
lastUpdatedAt: new Date(),
|
||||
lastUpdateFullName: "สาวิตรี ศรีสมัย",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "สมรส",
|
||||
rank: 2,
|
||||
createdAt: new Date(),
|
||||
lastUpdatedAt: new Date(),
|
||||
lastUpdateFullName: "System Administrator",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "แยกกันอยู่",
|
||||
rank: 3,
|
||||
createdAt: new Date(),
|
||||
lastUpdatedAt: new Date(),
|
||||
lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "โสด",
|
||||
rank: 4,
|
||||
createdAt: new Date(),
|
||||
lastUpdatedAt: new Date(),
|
||||
lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
|
||||
},
|
||||
];
|
||||
async function fetchData() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.orgEducationLevel)
|
||||
.then(async (res) => {
|
||||
console.log(res.data.result);
|
||||
store.save(res.data.result);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
async function addData() {
|
||||
await http.post(config.API.orgEducationLevel, {
|
||||
name: educationLevel.value,
|
||||
rank: educationRank.value,
|
||||
});
|
||||
fetchData();
|
||||
}
|
||||
|
||||
async function editData(id: string) {
|
||||
await http.put(config.API.orgEducationLevelId(id), {
|
||||
name: educationLevel.value,
|
||||
rank: educationRank.value,
|
||||
});
|
||||
fetchData();
|
||||
}
|
||||
|
||||
async function deleteData(id: string) {
|
||||
await http.delete(config.API.orgEducationLevelId(id));
|
||||
fetchData();
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
store.fetchData(data);
|
||||
fetchData();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -242,5 +246,9 @@ onMounted(async () => {
|
|||
v-model:data="educationLevel"
|
||||
v-model:personalName="personalName"
|
||||
v-model:dialogStatus="dialogStatus"
|
||||
v-model:editId="editId"
|
||||
:addData="addData"
|
||||
:fetch-data="fetchData"
|
||||
:edit-data="editData"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -2,13 +2,14 @@
|
|||
import { ref } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import dialogHeader from "@/components/DialogHeader.vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { QInput, useQuasar } from "quasar";
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogConfirm } = mixin;
|
||||
|
||||
const dataRef = ref<any>(null);
|
||||
const dataRef = ref<QInput | null>(null);
|
||||
const educationRankRef = ref<QInput | null>(null);
|
||||
const data = defineModel<string>("data", {
|
||||
required: true,
|
||||
});
|
||||
|
|
@ -16,7 +17,7 @@ const personalName = defineModel<string>("personalName");
|
|||
const dialogStatus = defineModel<string>("dialogStatus");
|
||||
const editId = defineModel<string>("editId");
|
||||
const dialog = defineModel<boolean>("dialog");
|
||||
const educationRank = defineModel<any>("rank");
|
||||
const educationRank = defineModel<number>("rank");
|
||||
const props = defineProps({
|
||||
fetchData: {
|
||||
type: Function,
|
||||
|
|
@ -36,8 +37,8 @@ function closeDialog() {
|
|||
}
|
||||
|
||||
function validateForm() {
|
||||
dataRef.value.validate();
|
||||
educationRank.value.validate();
|
||||
dataRef.value?.validate();
|
||||
educationRankRef.value?.validate();
|
||||
onSubmit();
|
||||
}
|
||||
|
||||
|
|
@ -98,6 +99,7 @@ async function onSubmit() {
|
|||
type="number"
|
||||
lazy-rules
|
||||
borderless
|
||||
min="1"
|
||||
class="col-12 bg-white q-ma-md"
|
||||
:rules="[(val) => val != undefined || 'กรุณากรอกลำดับ']"
|
||||
hide-bottom-space
|
||||
|
|
|
|||
|
|
@ -4,11 +4,12 @@ interface DataResponse {
|
|||
lastUpdateFullName: String;
|
||||
lastUpdatedAt: Date;
|
||||
prefix?: string;
|
||||
rank?: string;
|
||||
rank?: number;
|
||||
bloodgroup?: string;
|
||||
gender?: string;
|
||||
religion?: string;
|
||||
relationship?: string;
|
||||
name?: string;
|
||||
}
|
||||
|
||||
interface DataRow {
|
||||
|
|
@ -17,11 +18,12 @@ interface DataRow {
|
|||
lastUpdateFullName: String;
|
||||
lastUpdatedAt: string | null;
|
||||
prefix?: string;
|
||||
rank?: string;
|
||||
rank?: number;
|
||||
bloodgroup?: string;
|
||||
gender?: string;
|
||||
religion?: string;
|
||||
relationship?: string;
|
||||
name?: string;
|
||||
}
|
||||
|
||||
export type { DataResponse, DataRow };
|
||||
|
|
|
|||
|
|
@ -10,7 +10,8 @@ const { date2Thai } = useCounterMixin();
|
|||
|
||||
export const usePersonalDataStore = defineStore("PersonalData", () => {
|
||||
const row = ref<DataRow[]>([]);
|
||||
function fetchData(data: DataResponse[]) {
|
||||
|
||||
function save(data: DataResponse[]) {
|
||||
const list = data.map((e) => ({
|
||||
...e,
|
||||
createdAt: e.createdAt ? date2Thai(e.createdAt) : "",
|
||||
|
|
@ -19,7 +20,7 @@ export const usePersonalDataStore = defineStore("PersonalData", () => {
|
|||
row.value = list;
|
||||
}
|
||||
return {
|
||||
fetchData,
|
||||
save,
|
||||
row,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import ListBloodGroup from "@/modules/01_metadataNew/components/personal/03ListB
|
|||
import ListGender from "@/modules/01_metadataNew/components/personal/04ListGender.vue";
|
||||
import ListReligion from "@/modules/01_metadataNew/components/personal/05ListReligion.vue";
|
||||
import ListRelationship from "@/modules/01_metadataNew/components/personal/06ListRelationship.vue";
|
||||
import ListEducation from "@/modules/01_metadataNew/components/personal/07ListEducationLevel.vue";
|
||||
|
||||
const currentTab = ref<string>("list_prefix");
|
||||
const tabs = ref<Array<any>>([]);
|
||||
|
|
@ -18,6 +19,7 @@ onMounted(() => {
|
|||
{ label: "เพศ", value: "list_gender" },
|
||||
{ label: "ศาสนา", value: "list_religion" },
|
||||
{ label: "สถานภาพ", value: "list_relationship" },
|
||||
{ label: "ระดับการศึกษา", value: "list_education" },
|
||||
];
|
||||
tabs.value = tabsPerson;
|
||||
});
|
||||
|
|
@ -57,6 +59,7 @@ onMounted(() => {
|
|||
<ListGender v-if="currentTab == 'list_gender'" />
|
||||
<ListReligion v-if="currentTab == 'list_religion'" />
|
||||
<ListRelationship v-if="currentTab == 'list_relationship'" />
|
||||
<ListEducation v-if="currentTab == 'list_education'" />
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue