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

Merge branch 'develop' into devTee

Browse source
This commit is contained in:
setthawutttty 2024-02-13 16:56:29 +07:00
commit ea91acf18a
16 changed files with 1113 additions and 413 deletions
Download patch file Download diff file Expand all files Collapse all files

192
src/modules/01_metadataNew/components/calendar/CalendarList.vue
View file

@ -18,67 +18,137 @@
class="q-py-xs col-6 row"
/>
</q-tabs>
<q-table
ref="table"
flat
bordered
class="custom-header-table"
virtual-scroll
:rows="calendarData"
:columns="columns"
dense
:rows-per-page-options="[0]"
hide-header
>
<template v-slot:body="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'week'" class="">
{{ dayThaiRange(props.row.dateRange) }}
</div>
<div v-else-if="col.name == 'holidayDate'" class="">
{{ dateThaiRange(props.row.dateRange) }}
</div>
<div v-else class="my-table-details">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
flat
round
color="grey"
@click.stop
size="10px"
icon="more_vert"
>
<q-menu>
<q-list>
<q-item
clickable
v-close-popup
@click="editCalendar(props.row)"
>
<q-item-section>
<q-item-label>แก้ไขวันหยุด</q-item-label>
</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
@click="deleteClick(props.row)"
>
<q-item-section>
<q-item-label>ลบวันหยุด</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</q-td>
</q-tr>
</template>
</q-table>
<q-separator />
<q-tab-panels v-model="currentTab" animated>
<q-tab-panel name="normal">
<q-table
ref="table"
flat
bordered
class="custom-header-table"
virtual-scroll
:rows="calendarData"
:columns="columns"
dense
:rows-per-page-options="[0]"
hide-header
>
<template v-slot:body="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'week'" class="">
{{ dayThaiRange(props.row.dateRange) }}
</div>
<div v-else-if="col.name == 'holidayDate'" class="">
{{ dateThaiRange(props.row.dateRange) }}
</div>
<div v-else class="my-table-details">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
flat
round
color="grey"
@click.stop
size="10px"
icon="more_vert"
>
<q-menu>
<q-list>
<q-item
clickable
v-close-popup
@click="editCalendar(props.row)"
>
<q-item-section>
<q-item-label>แก้ไขวันหยุด</q-item-label>
</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
@click="deleteClick(props.row)"
>
<q-item-section>
<q-item-label>ลบวันหยุด</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</q-td>
</q-tr>
</template>
</q-table>
</q-tab-panel>
<q-tab-panel name="6day">
<q-table
ref="table"
flat
bordered
class="custom-header-table"
virtual-scroll
:rows="calendarData"
:columns="columns"
dense
:rows-per-page-options="[0]"
hide-header
>
<template v-slot:body="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'week'" class="">
{{ dayThaiRange(props.row.dateRange) }}
</div>
<div v-else-if="col.name == 'holidayDate'" class="">
{{ dateThaiRange(props.row.dateRange) }}
</div>
<div v-else class="my-table-details">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
flat
round
color="grey"
@click.stop
size="10px"
icon="more_vert"
>
<q-menu>
<q-list>
<q-item
clickable
v-close-popup
@click="editCalendar(props.row)"
>
<q-item-section>
<q-item-label>แก้ไขวันหยุด</q-item-label>
</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
@click="deleteClick(props.row)"
>
<q-item-section>
<q-item-label>ลบวันหยุด</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</q-td>
</q-tr>
</template>
</q-table>
</q-tab-panel>
</q-tab-panels>
</q-card>
<!-- modal เพิ่มวันหยุด -->

35
src/modules/01_metadataNew/views/personal.vue
View file

@ -50,17 +50,32 @@ onMounted(() => {
class="q-py-xs"
/>
</q-tabs>
<q-separator size="2px" />
<q-separator />
<!-- person -->
<div class="q-pa-md">
<ListPrefix v-if="currentTab == 'list_prefix'" />
<ListRank v-if="currentTab == 'list_rank'" />
<ListBloodGroup v-if="currentTab == 'list_bloodGroup'" />
<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>
<q-tab-panels v-model="currentTab" animated>
<q-tab-panel name="list_prefix">
<ListPrefix v-if="currentTab == 'list_prefix'" />
</q-tab-panel>
<q-tab-panel name="list_rank">
<ListRank v-if="currentTab == 'list_rank'" />
</q-tab-panel>
<q-tab-panel name="list_bloodGroup">
<ListBloodGroup v-if="currentTab == 'list_bloodGroup'" />
</q-tab-panel>
<q-tab-panel name="list_gender">
<ListGender v-if="currentTab == 'list_gender'" />
</q-tab-panel>
<q-tab-panel name="list_religion">
<ListReligion v-if="currentTab == 'list_religion'" />
</q-tab-panel>
<q-tab-panel name="list_relationship">
<ListRelationship v-if="currentTab == 'list_relationship'" />
</q-tab-panel>
<q-tab-panel name="list_education">
<ListEducation v-if="currentTab == 'list_education'" />
</q-tab-panel>
</q-tab-panels>
</div>
</q-card>
</template>

21
src/modules/01_metadataNew/views/position.vue
View file

@ -41,12 +41,21 @@ onMounted(() => {
class="q-py-xs"
/>
</q-tabs>
<q-separator size="2px" />
<div class="q-pa-md">
<ListPosition v-if="store.pathLocation == 'list_position'" />
<ListType v-if="store.pathLocation == 'list_type'" />
<ListExecutive v-if="store.pathLocation == 'list_executive'" />
</div>
<q-separator />
<q-tab-panels v-model="store.pathLocation" animated>
<q-tab-panel name="list_position">
<ListPosition v-if="store.pathLocation == 'list_position'" />
</q-tab-panel>
<q-tab-panel name="list_type">
<ListType v-if="store.pathLocation == 'list_type'" />
</q-tab-panel>
<q-tab-panel name="list_executive">
<ListExecutive v-if="store.pathLocation == 'list_executive'" />
</q-tab-panel>
</q-tab-panels>
</q-card>
</template>

213
src/modules/02_organizationalNew/components/PositionDetail.vue
View file

@ -43,81 +43,81 @@ const formData = reactive<FormDetailPosition>({
status: "", //*สถานะตำแหน่ง
});
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: false,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionName",
align: "left",
label: "ตำแหน่งในสายงาน",
sortable: true,
field: "positionName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionField",
align: "left",
label: "สายงาน",
sortable: true,
field: "positionField",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "posTypeName",
align: "left",
label: "ประเภทตำเเหน่ง",
sortable: true,
field: "posTypeName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "posLevelName",
align: "left",
label: "ระดับตำแหน่ง",
sortable: true,
field: "posLevelName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "posExecutiveName",
align: "left",
label: "ตำแหน่งทางการบริหาร",
sortable: true,
field: "posExecutiveName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionExecutiveField",
align: "left",
label: "ด้านทางการบริหาร",
sortable: true,
field: "positionExecutiveField",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionArea",
align: "left",
label: "ด้าน/สาขา",
sortable: true,
field: "positionArea",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const row = ref<Position[]>([]);
// const columns = ref<QTableProps["columns"]>([
// {
// name: "no",
// align: "left",
// label: "ลำดับ",
// sortable: false,
// field: "no",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// },
// {
// name: "positionName",
// align: "left",
// label: "ตำแหน่งในสายงาน",
// sortable: true,
// field: "positionName",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// },
// {
// name: "positionField",
// align: "left",
// label: "สายงาน",
// sortable: true,
// field: "positionField",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// },
// {
// name: "posTypeName",
// align: "left",
// label: "ประเภทตำเเหน่ง",
// sortable: true,
// field: "posTypeName",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// },
// {
// name: "posLevelName",
// align: "left",
// label: "ระดับตำแหน่ง",
// sortable: true,
// field: "posLevelName",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// },
// {
// name: "posExecutiveName",
// align: "left",
// label: "ตำแหน่งทางการบริหาร",
// sortable: true,
// field: "posExecutiveName",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// },
// {
// name: "positionExecutiveField",
// align: "left",
// label: "ด้านทางการบริหาร",
// sortable: true,
// field: "positionExecutiveField",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// },
// {
// name: "positionArea",
// align: "left",
// label: "ด้าน/สาขา",
// sortable: true,
// field: "positionArea",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// },
// ]);
// const row = ref<Position[]>([]);
/** function ปิด popup*/
function close() {
@ -137,18 +137,26 @@ watch(
: store.typeOrganizational === "draft"
? "แบบร่าง"
: "ยุบเลิก";
row.value = prosp.dataDetailPos.positions.map((e: Position) => ({
...e,
positionName: e.positionName ? e.positionName : "-",
positionField: e.positionField ? e.positionField : "-",
posTypeName: e.posTypeName ? e.posTypeName : "-",
posLevelName: e.posLevelName ? e.posLevelName : "-",
posExecutiveName: e.posExecutiveName ? e.posExecutiveName : "-",
positionExecutiveField: e.positionExecutiveField
? e.positionExecutiveField
: "-",
positionArea: e.positionArea ? e.positionArea : "-",
}));
formData.positionType = prosp.dataDetailPos.posTypeName
formData.positionPathSide = prosp.dataDetailPos.positionName
formData.positionLine = prosp.dataDetailPos.positionField
formData.positionSide = prosp.dataDetailPos.positionArea ? prosp.dataDetailPos.positionArea : "-"
formData.positionLevel = prosp.dataDetailPos.posLevelName
formData.positionExecutive = prosp.dataDetailPos.posExecutiveName ? prosp.dataDetailPos.posExecutiveName : "-"
formData.positionExecutiveSide = prosp.dataDetailPos.positionExecutiveField ? prosp.dataDetailPos.positionExecutiveField : "-"
// row.value = prosp.dataDetailPos.positions.map((e: Position) => ({
// ...e,
// positionName: e.positionName ? e.positionName : "-",
// positionField: e.positionField ? e.positionField : "-",
// posTypeName: e.posTypeName ? e.posTypeName : "-",
// posLevelName: e.posLevelName ? e.posLevelName : "-",
// posExecutiveName: e.posExecutiveName ? e.posExecutiveName : "-",
// positionExecutiveField: e.positionExecutiveField
// ? e.positionExecutiveField
// : "-",
// positionArea: e.positionArea ? e.positionArea : "-",
// }));
}
}
}
@ -172,7 +180,6 @@ watch(
<p>{{ formData.positionNo }}</p>
</div>
</div>
<!--
<div class="row q-col-gutter-sm q-mb-xs">
<div class="col-4 text-bold">
<div>
@ -182,9 +189,9 @@ watch(
<div class="col-8 text-grey-8">
<p>{{ formData.positionType }}</p>
</div>
</div> -->
</div>
<!-- <div class="row q-col-gutter-sm q-mb-xs">
<div class="row q-col-gutter-sm q-mb-xs">
<div class="col-4 text-bold">
<div>
<p>ตำแหน่งในสายงาน</p>
@ -193,9 +200,9 @@ watch(
<div class="col-8 text-grey-8">
<p>{{ formData.positionPathSide }}</p>
</div>
</div> -->
</div>
<!-- <div class="row q-col-gutter-sm q-mb-xs">
<div class="row q-col-gutter-sm q-mb-xs">
<div class="col-4 text-bold">
<div>
<p>สายงาน</p>
@ -204,9 +211,9 @@ watch(
<div class="col-8 text-grey-8">
<p>{{ formData.positionLine }}</p>
</div>
</div> -->
</div>
<!-- <div class="row q-col-gutter-sm q-mb-xs">
<div class="row q-col-gutter-sm q-mb-xs">
<div class="col-4 text-bold">
<div>
<p>ด้าน/สาขา</p>
@ -215,9 +222,9 @@ watch(
<div class="col-8 text-grey-8">
<p>{{ formData.positionSide }}</p>
</div>
</div> -->
</div>
<!-- <div class="row q-col-gutter-sm q-mb-xs">
<div class="row q-col-gutter-sm q-mb-xs">
<div class="col-4 text-bold">
<div>
<p>ระดับตำแหน่ง</p>
@ -226,9 +233,9 @@ watch(
<div class="col-8 text-grey-8">
<p>{{ formData.positionLevel }}</p>
</div>
</div> -->
</div>
<!-- <div class="row q-col-gutter-sm q-mb-xs">
<div class="row q-col-gutter-sm q-mb-xs">
<div class="col-4 text-bold">
<div>
<p>ตำแหน่งทางการบริหาร</p>
@ -237,9 +244,9 @@ watch(
<div class="col-8 text-grey-8">
<p>{{ formData.positionExecutive }}</p>
</div>
</div> -->
</div>
<!-- <div class="row q-col-gutter-sm q-mb-xs">
<div class="row q-col-gutter-sm q-mb-xs">
<div class="col-4 text-bold">
<div>
<p>ด้านทางการบริหาร</p>
@ -248,7 +255,7 @@ watch(
<div class="col-8 text-grey-8">
<p>{{ formData.positionExecutiveSide }}</p>
</div>
</div> -->
</div>
<div class="row q-col-gutter-sm q-mb-xs">
<div class="col-4 text-bold">
@ -261,7 +268,7 @@ watch(
</div>
</div>
<div class="row q-col-gutter-sm q-mb-xs">
<!-- <div class="row q-col-gutter-sm q-mb-xs">
<div class="col-12">
<d-table
flat
@ -302,7 +309,7 @@ watch(
</template>
</d-table>
</div>
</div>
</div> -->
</div>
</q-card-section>
</q-card>

31
src/modules/02_organizationalNew/components/listView.vue
View file

@ -34,6 +34,8 @@ const nodeTree = ref<OrgTree[]>(); // ข้อมูล Tree
const nodeId = ref<string>(""); // id ของ Tree
const orgLevel = ref<number>(0); // levelTree
const isLoad = ref<boolean>(false); // loadTable
const isLoadTree = ref<boolean>(false); // loadTable
const selected = ref<string>("");
const reqMaster = reactive<FilterMaster>({
@ -53,6 +55,7 @@ const posMaster = ref<PosMaster2[]>([]);
* @param id id โครงสร้าง
*/
async function fetchDataTree(id: string) {
isLoadTree.value = false;
showLoader();
await http
.get(config.API.orgByid(id.toString()))
@ -121,6 +124,32 @@ async function fetchDataTable(id: string, level: number, action: boolean) {
});
}
/** ดึงข้อมูลสถิติจำนวนด้านบน*/
function getSummary() {
http
.post(config.API.orgSummary, {
id: reqMaster.id, //*Id node
type: reqMaster.type, //*ประเภทnode
isNode: reqMaster.isAll, //*นับทั้ง node ไหม
})
.then(async (res: any) => {
const data = await res.data.result;
store.getSumPosition({
totalPosition: data.totalPosition,
totalPositionCurrentUse: data.totalPositionCurrentUse,
totalPositionCurrentVacant: data.totalPositionCurrentVacant,
totalPositionNextUse: data.totalPositionNextUse,
totalPositionNextVacant: data.totalPositionNextVacant,
totalRootPosition: data.totalPosition,
totalRootPositionCurrentUse: data.totalPositionCurrentUse,
totalRootPositionCurrentVacant: data.totalPositionCurrentVacant,
totalRootPositionNextUse: data.totalPositionNextUse,
totalRootPositionNextVacant: data.totalPositionNextVacant,
});
});
}
/** funcion ค้นหาข้อมูลใน Table*/
async function filterKeyword() {
reqMaster.page = 1;
@ -168,6 +197,7 @@ watch([() => reqMaster.page, () => reqMaster.pageSize], () => {
watch(
() => reqMaster.isAll,
() => {
getSummary();
if (reqMaster.page !== 1) {
reqMaster.page = 1;
} else {
@ -185,7 +215,6 @@ watch(
<TreeView
v-model:nodeTree="nodeTree"
v-model:nodeId="nodeId"
v-model:selected="selected"
:fetchDataTree="fetchDataTree"
:fetchDataTable="fetchDataTable"
/>

67
src/modules/02_organizationalNew/components/mainTree.vue
View file

@ -28,7 +28,6 @@ const { dialogRemove, showLoader, hideLoader, messageError, success } =
/** props*/
const nodeTEST = defineModel<OrgTree[]>("nodeTree", { default: [] });
const nodeId = defineModel<string>("nodeId", { required: true });
const selected = defineModel<string>("selected", { required: true });
const props = defineProps({
fetchDataTree: {
type: Function,
@ -97,39 +96,39 @@ const orgId = ref<string>("");
* @param data ข่อมูล Tree
*/
function updateSelected(data: DataTree) {
store.treeId = data.orgTreeId;
store.level = data.orgLevel;
// if (data.orgTreeId === nodeId.value) {
// nodeId.value = "";
// } else {
nodeId.value = data.orgTreeId ? data.orgTreeId : "111";
if (!store.treeId || store.treeId != data.orgTreeId) {
store.treeId = data.orgTreeId;
store.level = data.orgLevel;
data.orgTreeId && props.fetchDataTable?.(data.orgTreeId, data.orgLevel, true);
/** ดึงข้อมูลสถิติจำนวนด้านบน*/
http
.post(config.API.orgSummary, {
id: data.orgTreeId, //*Id node
type: data.orgLevel, //*ประเภทnode
isNode: false, //*นับทั้ง node ไหม
})
.then(async (res: any) => {
const data = await res.data.result;
if (data) {
store.getSumPosition({
totalPosition: data.totalPosition,
totalPositionCurrentUse: data.totalPositionCurrentUse,
totalPositionCurrentVacant: data.totalPositionCurrentVacant,
totalPositionNextUse: data.totalPositionNextUse,
totalPositionNextVacant: data.totalPositionNextVacant,
totalRootPosition: data.totalPosition,
totalRootPositionCurrentUse: data.totalPositionCurrentUse,
totalRootPositionCurrentVacant: data.totalPositionCurrentVacant,
totalRootPositionNextUse: data.totalPositionNextUse,
totalRootPositionNextVacant: data.totalPositionNextVacant,
});
}
});
// }
nodeId.value = data.orgTreeId ? data.orgTreeId : "111";
data.orgTreeId &&
props.fetchDataTable?.(data.orgTreeId, data.orgLevel, true);
/** ดึงข้อมูลสถิติจำนวนด้านบน*/
http
.post(config.API.orgSummary, {
id: data.orgTreeId, //*Id node
type: data.orgLevel, //*ประเภทnode
isNode: false, //*นับทั้ง node ไหม
})
.then(async (res: any) => {
const data = await res.data.result;
if (data) {
store.getSumPosition({
totalPosition: data.totalPosition,
totalPositionCurrentUse: data.totalPositionCurrentUse,
totalPositionCurrentVacant: data.totalPositionCurrentVacant,
totalPositionNextUse: data.totalPositionNextUse,
totalPositionNextVacant: data.totalPositionNextVacant,
totalRootPosition: data.totalPosition,
totalRootPositionCurrentUse: data.totalPositionCurrentUse,
totalRootPositionCurrentVacant: data.totalPositionCurrentVacant,
totalRootPositionNextUse: data.totalPositionNextUse,
totalRootPositionNextVacant: data.totalPositionNextVacant,
});
}
});
}
}
const breakLoop = ref<boolean>(false);
@ -366,8 +365,6 @@ watch(
nodes.value = nodeTEST.value;
}
);
const modaeMenu = ref<boolean>(false);
</script>
<template>

240
src/modules/02_organizationalNew/components/structureView.vue
View file

@ -1,6 +1,240 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import { defineAsyncComponent } from "@vue/runtime-core";
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { StructChart } from "structure-chart";
import "structure-chart/structure-chart.css";
import { useCounterMixin } from "@/stores/mixin";
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError } = mixin;
const $q = useQuasar(); // show dialog
// import chartData from '@/assets/structChartData'
// const dataSource = ref(chartData)
const dataSource = ref(); // ข้อมูล Chart
const rootOrgID = ref(); // org id ของ root ตัวปัจจุบันที่เลือกอยู่
const dataSourceLock = ref(); // ข้อมูลตั้งต้นของ Chart ใช้ให้กดกลับไปที่ home
const chartRef = ref(); // อ้างอิงไปที่ตัว chart
const savePNG = () => {
chartRef.value.savePNG();
};
const savePDF = () => {
chartRef.value.savePDF();
};
const loader = ref<boolean>(false); // Loader
onMounted(async () => {
await fetchTreeRoot();
await fetchStructChart();
});
/**
* อ่าน Root ของข้อมูลทั้งหมดจาก ​​API ต้องทำเป็นอันดับแรก เพื่อจะได้รู้รากของข้อมูล
*/
const fetchTreeRoot = async () => {
showLoader();
let urlRequest = config.API.chartGetTreeRoot;
await http
.get(urlRequest)
.then((response) => {
if (response.data.result.length > 0) {
rootOrgID.value = response.data.result[0].organizationId;
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
/**
* อ่านข้อมูล organization id ปัจจุบันจาก API ข้อมูลที่ได้เอามาสร้าง Structure Chart
*/
const fetchStructChart = async () => {
showLoader();
let urlRequest = config.API.chartGetStructure(rootOrgID.value);
await http
.get(urlRequest)
.then((response) => {
if (response.data.result.length > 0) {
dataSource.value = response.data.result[0];
if (dataSourceLock.value === undefined)
dataSourceLock.value = dataSource.value;
breadcrumbsGen();
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
/**
* เมื่อมีการคลิกที่ Chart ให้อ่าน ID ของหน่วยงานที่ถูกคลิก แล้วดึงข้อมูล Chart ของหน่วยงานนั้น ๆ จาก API
* @param data
*/
const refreshChart = async (data: any) => {
if (data.value !== undefined) rootOrgID.value = data.value;
else rootOrgID.value = data;
if (rootOrgID.value !== 0) await fetchStructChart();
if (data.value !== undefined) data.value = 0;
};
/**
* === กระบวนการสร้าง Path ===
*/
/**
* Recursive เพื่อหา Path ที่ผู้ใช้คลิก
* @param id OrgID ของหน่วยงานที่ต้องการหา
* @param chart Array ของ Object ของหน่วยงานย่อยใน Tree นั้น ๆ
*/
const chartTraverse = (id: any, chart: any): any => {
let _returnPath = [];
for (const child of chart) {
if (child.deptID === id) {
_returnPath.push({
label: child.departmentName,
id: child.deptID,
});
return _returnPath;
} else {
if (
typeof child.children !== "undefined" &&
child.children !== null &&
child.children.length > 0
) {
let _result = chartTraverse(id, child.children);
if (typeof _result !== "undefined" && _result !== null) {
_returnPath.push({
label: child.departmentName,
id: child.deptID,
});
return [..._returnPath, ...(_result ?? [])];
}
}
}
}
};
const findPath = (id: any) => {
let _path = [];
_path.push({
label: dataSourceLock.value.departmentName,
id: dataSourceLock.value.deptID,
});
if (dataSourceLock.value.deptID === id) return _path;
if (dataSourceLock.value.children.length > 0) {
let _returnPath = chartTraverse(id, dataSourceLock.value.children);
return [..._path, ...(_returnPath ?? [])];
}
};
const theBreadcrumb = ref();
/**
* สร้าง Path Breadcrumbs
*/
const breadcrumbsGen = () => {
if (rootOrgID.value !== 0) {
theBreadcrumb.value = [];
const newPath = findPath(rootOrgID.value);
theBreadcrumb.value = newPath;
}
};
</script>
<template>
<div>Structure View</div>
<div class="toptitle text-dark col-12 row items-center">แผนภูมิโครงสร้าง</div>
<div class="text-dark">
<q-card flat bordered class="col-12 q-mt-sm">
<div class="q-pa-sm row wrap items-center">
<q-btn flat round color="primary" @click="savePNG()" icon="mdi-image">
<q-tooltip> ดาวน์โหลด PNG </q-tooltip>
</q-btn>
<q-btn
flat
round
color="red-7"
@click="savePDF()"
icon="mdi-file-pdf-box"
>
<q-tooltip> ดาวน์โหลด PDF </q-tooltip>
</q-btn>
<div class="bg-grey-2 q-py-xs q-px-sm rounded-borders">
<q-breadcrumbs>
<template v-slot:separator>
<q-icon size="1.5em" name="chevron_right" color="primary" />
</template>
<template v-for="link in theBreadcrumb" :key="link.id">
<q-breadcrumbs-el
:label="link.label"
@click="refreshChart(link.id)"
class="breadcrumbs-link"
/>
</template>
</q-breadcrumbs>
</div>
</div>
<q-separator />
<div style="overflow-x: auto; overflow-y: auto" class="q-pt-md">
<StructChart
style="height: 70vh"
ref="chartRef"
class="struct"
:dataSource="dataSource"
@onElementClick="refreshChart"
/>
</div>
</q-card>
</div>
<full-loader :visibility="loader"></full-loader>
</template>
<style scoped></style>
<style>
.breadcrumbs-link {
cursor: pointer;
}
.struct .section-primary .header,
.struct .section-secondary .header,
.struct .section-tertiary .header {
font-size: 1rem !important;
}
.struct .section-primary .column-side .side-button,
.struct .section-secondary .column-side .side-button,
.struct .section-list .column-side .side-button {
background-color: #d9d9d96b !important;
color: #545459 !important;
width: 25px !important;
height: 25px !important;
font-size: 11px !important;
padding: 0px;
}
.struct .section-primary,
.section-secondary,
.struct .section-list {
padding: 6px 15px 6px 15px;
}
.struct .section-primary .header {
font-weight: 600 !important;
}
.struct .section-secondary .header {
font-weight: 400 !important;
}
.struct .subchild-more {
background-position: center !important;
background-size: 14px !important;
}
</style>

27
src/modules/02_organizationalNew/components/tableTree.vue
View file

@ -89,12 +89,6 @@ const listMenu = ref<ListMenu[]>([
type: "HISTORY",
color: "deep-purple",
},
{
label: "ดูรายละเอียด",
icon: "mdi-eye",
type: "VIEWDETIAL",
color: "blue",
},
]);
const document = ref<any>([
{
@ -612,16 +606,12 @@ async function onClickDownloadReport(val: string) {
<q-item
v-for="(item, index) in store.typeOrganizational === 'draft'
? listMenu
: listMenu.filter(
(e) => e.type === 'HISTORY' || e.type === 'VIEWDETIAL'
)"
: listMenu.filter((e) => e.type === 'HISTORY')"
:key="index"
clickable
v-close-popup
@click="
item.type === 'VIEWDETIAL'
? onClickViewDetail(props.row)
: item.type === 'EDIT'
item.type === 'EDIT'
? onClickPosition('EDIT', props.row.id)
: item.type === 'DEL'
? onClickDelete(props.row.id)
@ -645,6 +635,19 @@ async function onClickDownloadReport(val: string) {
</div>
</q-item-section>
</q-item>
<q-item
v-if="props.row.positionIsSelected != 'ว่าง'"
clickable
v-close-popup
@click="onClickViewDetail(props.row)"
>
<q-item-section>
<div class="row items-center">
<q-icon color="blue" size="17px" name="mdi-eye" />
<div class="q-pl-md">ดูรายละเอียด</div>
</div>
</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>

87
src/modules/04_registry/components/Information/OldName.vue
View file

@ -44,6 +44,8 @@
>
<q-tooltip>ไฟล์เอกสารหลักฐาน</q-tooltip>
</q-btn>
</q-td>
<q-td auto-width>
<q-btn
color="info"
flat
@ -692,47 +694,52 @@ const clickSave = async () => {
* บันทึกเพิ่มข้อมูล
*/
const saveData = async () => {
if (fileUpload.value.length > 0) {
const blob = fileUpload.value.slice(0, fileUpload.value[0].size);
const newFile = new File(blob, nameFile.value, {
type: fileUpload.value[0].type,
// if (fileUpload.value.length > 0) {
const blob =
fileUpload.value.length > 0
? fileUpload.value.slice(0, fileUpload.value[0].size)
: null;
const newFile: any = blob
? new File(blob, nameFile.value, {
type: fileUpload.value[0].type,
})
: null;
const formData = new FormData();
newFile && formData.append("", newFile);
if (prefixId.value != undefined) formData.append("prefixId", prefixId.value);
if (firstName.value != undefined)
formData.append("firstName", firstName.value);
if (lastName.value != undefined) formData.append("lastName", lastName.value);
if (status.value != undefined) formData.append("status", status.value);
showLoader();
await http
.post(config.API.profileChangeNameId(profileId.value), formData)
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
await props.fetchDataInformation();
});
const formData = new FormData();
formData.append("", newFile);
if (prefixId.value != undefined)
formData.append("prefixId", prefixId.value);
if (firstName.value != undefined)
formData.append("firstName", firstName.value);
if (lastName.value != undefined)
formData.append("lastName", lastName.value);
if (status.value != undefined) formData.append("status", status.value);
showLoader();
await http
.post(config.API.profileChangeNameId(profileId.value), formData)
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
await props.fetchDataInformation();
});
} else {
dialogMessage(
$q,
"ไม่สามารถบันทึกข้อมูลได้",
"กรุณาอัปโหลดเอกสารหลักฐาน",
"warning",
undefined,
"orange",
undefined,
undefined,
true
);
}
// }
// else {
// dialogMessage(
// $q,
// "ไม่สามารถบันทึกข้อมูลได้",
// "กรุณาอัปโหลดเอกสารหลักฐาน",
// "warning",
// undefined,
// "orange",
// undefined,
// undefined,
// true
// );
// }
};
/**

69
src/modules/04_registry/components/Leave.vue
View file

@ -212,7 +212,21 @@
</div> -->
<div class="row q-col-gutter-sm">
<div class="col-6">
<q-input
v-if="edit"
outlined
v-model="inputDateLaeaveYear"
:label="`${'ปี'}`"
mask="####"
dense
:rules="[(val:string) => !!val || `${'กรุณาเลือกปี'}`]"
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
/>
<datepicker
v-else
menu-class-name="modalfix"
v-model="formData.leaveYear"
class="col-2"
@ -470,6 +484,7 @@ import HistoryTable from "@/components/TableHistory.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps } from "quasar";
import moment from "moment";
const props = defineProps({
statusEdit: {
@ -503,6 +518,8 @@ const {
showLoader,
hideLoader,
dialogConfirm,
convertDate,
convertDateDisplay,
} = mixin;
const route = useRoute();
@ -566,6 +583,16 @@ const filterTotal = ref<string>("");
const rowsTotal = ref<RequestItemsTotalObject[]>([]); //select data history
const filter = ref<string>(""); //search data table
const inputDateLaeaveYear = ref<string>("");
/** ตรวจเวลา */
watch(
() => inputDateLaeaveYear.value,
(value: string) => {
if (value.length === 4) {
formData.leaveYear = parseInt(value) - 543;
}
}
);
/**old */
// const visibleColumns = ref<String[]>([]);
// profileData.leave.columns.length == 0
@ -1051,11 +1078,11 @@ const getData = () => {
// coupleDay.value = row.coupleDay;
// therapyDay.value = row.therapyDay;
formData.id = row.id;
formData.sumSick = row.sumSick =='-' ? '':row.sumSick;
formData.sumRest = row.sumRest =='-' ? '':row.sumRest;
formData.sumLate = row.sumLate =='-' ? '':row.sumLate;
formData.sumAbsent = row.sumAbsent =='-' ? '':row.sumAbsent;
formData.sumEducation = row.sumEducation =='-' ? '':row.sumEducation;
formData.sumSick = row.sumSick == "-" ? "" : row.sumSick;
formData.sumRest = row.sumRest == "-" ? "" : row.sumRest;
formData.sumLate = row.sumLate == "-" ? "" : row.sumLate;
formData.sumAbsent = row.sumAbsent == "-" ? "" : row.sumAbsent;
formData.sumEducation = row.sumEducation == "-" ? "" : row.sumEducation;
formData.leaveYear = row.leaveYear == "-" ? 0 : Number(row.leaveYear) - 543;
// id.value = row.id;
@ -1101,6 +1128,7 @@ const clickAdd = async () => {
const clickAddLeave = async () => {
clearForm();
inputDateLaeaveYear.value = (moment().year() + 543).toString();
editRow.value = false;
edit.value = true;
modalAdd.value = true;
@ -1158,11 +1186,11 @@ const clickSave = async () => {
if (result) {
if (modalEdit.value) {
// await dialogConfirm($q, () => {
editData();
editData();
// });
} else {
// await dialogConfirm($q, () => {
saveData();
saveData();
// });
}
}
@ -1173,7 +1201,9 @@ const clickSave = async () => {
// * บันทึกเพิ่มข้อมูล
// */
const saveData = async () => {
formData.leaveYear = (await Number(inputDateLaeaveYear.value)) - 543;
const sum = Number(numLeave.value) + Number(numUsedLeave.value);
console.log(formData.leaveYear);
if (profileId.value) {
showLoader();
@ -1188,6 +1218,7 @@ const saveData = async () => {
})
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
modalAdd.value = false;
})
.catch((e) => {
@ -1324,12 +1355,19 @@ const selectData = async (props: DataProps) => {
rowIndex.value = props.rowIndex;
formData.id = props.row.id;
formData.sumSick = props.row.sumSick == '-' ? '':props.row.sumSick;
formData.sumRest = props.row.sumRest == '-' ? '':props.row.sumRest;
formData.sumLate = props.row.sumLate == '-' ? '':props.row.sumLate;
formData.sumAbsent = props.row.sumAbsent == '-' ? '':props.row.sumAbsent;
formData.sumEducation = props.row.sumEducation == '-' ? '':props.row.sumEducation;
formData.leaveYear = props.row.leaveYear == "-" ? 0 : Number(props.row.leaveYear) - 543;
formData.sumSick = props.row.sumSick == "-" ? "" : props.row.sumSick;
formData.sumRest = props.row.sumRest == "-" ? "" : props.row.sumRest;
formData.sumLate = props.row.sumLate == "-" ? "" : props.row.sumLate;
formData.sumAbsent = props.row.sumAbsent == "-" ? "" : props.row.sumAbsent;
formData.sumEducation =
props.row.sumEducation == "-" ? "" : props.row.sumEducation;
formData.leaveYear =
props.row.leaveYear == "-" ? 0 : Number(props.row.leaveYear) - 543;
console.log("เเก้ไข");
inputDateLaeaveYear.value = ((formData.leaveYear as number) + 543).toString();
console.log(inputDateLaeaveYear.value);
// id.value = props.row.id;
// typeLeave.value = props.row.typeLeaveId;
@ -1361,10 +1399,9 @@ const selectData = async (props: DataProps) => {
* กดปุ่มเพิ่มบน table
*/
const addData = async () => {
// modalEdit.value = false;
//modalEdit.value = false;
modal.value = true;
// edit.value = true;
//edit.value = true;
await clickTotal();
};

45
src/modules/04_registry/components/Other.vue
View file

@ -57,7 +57,18 @@
<q-card-section class="q-p-sm">
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
v-if="edit"
outlined
v-model="inputDate"
:label="`${'วันที่'}`"
mask="##/##/####"
dense
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
/>
<datepicker
v-else
menu-class-name="modalfix"
:readonly="!edit"
v-model="date"
@ -73,6 +84,7 @@
}}</template>
<template #trigger>
<q-input
readonly
:class="getClass(edit)"
:outlined="edit"
dense
@ -193,7 +205,15 @@ const store = useProfileDataStore();
const { profileData, changeProfileColumns } = store;
const mixin = useCounterMixin();
const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
const {
convertDateDisplay,
convertDate,
date2Thai,
success,
messageError,
showLoader,
hideLoader,
} = mixin;
const route = useRoute();
const id = ref<string>("");
const date = ref<Date>(new Date());
@ -218,6 +238,26 @@ const profileId = ref<string>(
const rows = ref<RequestItemsObject[]>([]);
const filter = ref<string>(""); //search data table
const visibleColumns = ref<String[]>([]);
const inputDate = ref<string>("");
const dayChecked = ref<boolean>(false);
/** ตรวจเวลา */
watch(
() => inputDate.value,
(value: string) => {
if (value.length === 10) {
const dateVal = convertDate(value);
if (dateVal.isValid) {
dayChecked.value = false;
date.value = new Date(dateVal.value);
} else {
dayChecked.value = true;
inputDate.value = "";
}
}
}
);
profileData.other.columns.length == 0
? (visibleColumns.value = ["date", "detail"])
: (visibleColumns.value = profileData.other.columns);
@ -387,6 +427,7 @@ const clickEdit = () => {
* กดปุ่มเพิ่มด้านบน table
*/
const clickAdd = async () => {
inputDate.value = "";
editRow.value = false;
await addData();
};
@ -521,6 +562,8 @@ const selectData = async (props: DataProps) => {
date.value = props.row.date;
detail.value = props.row.detail;
id.value = props.row.id;
inputDate.value = convertDateDisplay(date.value);
await checkRowPage();
};

4
src/modules/04_registry/components/Profile.vue
View file

@ -989,8 +989,8 @@ function onClickUnlock() {
hideLoader();
});
},
"ยืนยันการปลดให้แก้ไขข้อมูล",
"ต้องการยืนยันการปลดให้แก้ไขข้อมูลนี้หรือไม่?"
"ยืนยันการปลดล็อคให้แก้ไขข้อมูล",
"ต้องการยืนยันการปลดล็อคให้แก้ไขข้อมูลนี้หรือไม่?"
);
}
onMounted(async () => {

83
src/modules/04_registry/components/Record.vue
View file

@ -65,7 +65,18 @@
<q-card-section class="q-p-sm">
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
v-if="edit"
outlined
v-model="inputDate"
label="วัน/เดือน/ปี"
mask="##/##/####"
dense
:rules="[(val) => !!val || `${'กรุณาเลือกวัน เดือน ปี'}`]"
/>
<datepicker
v-else
menu-class-name="modalfix"
:readonly="!edit"
v-model="date"
@ -81,6 +92,7 @@
}}</template>
<template #trigger>
<q-input
readonly
:class="getClass(edit)"
:outlined="edit"
dense
@ -162,7 +174,17 @@
</q-input>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
v-if="edit"
outlined
v-model="inputDateRefCommandDate"
:label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
mask="##/##/####"
dense
/>
<datepicker
v-else
menu-class-name="modalfix"
:readonly="!edit"
v-model="refCommandDate"
@ -178,6 +200,7 @@
}}</template>
<template #trigger>
<q-input
readonly
:class="getClass(edit)"
:outlined="edit"
dense
@ -294,8 +317,16 @@ const store = useProfileDataStore();
const { profileData, changeProfileColumns } = store;
const mixin = useCounterMixin();
const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
mixin;
const {
convertDateDisplay,
convertDate,
date2Thai,
success,
dateToISO,
messageError,
showLoader,
hideLoader,
} = mixin;
const route = useRoute();
const id = ref<string>("");
const date = ref<Date>(new Date());
@ -325,6 +356,47 @@ const checkValidate = ref<boolean>(false); //validate data ผ่านหรื
const rows = ref<RequestItemsObject[]>([]);
const filter = ref<string>(""); //search data table
const visibleColumns = ref<String[]>([]);
const inputDate = ref<string>("");
const inputDateRefCommandDate = ref<string>(
refCommandDate.value ? convertDateDisplay(refCommandDate.value) : ""
);
const dayChecked = ref<boolean>(false);
const dayCheckedRefCommandDate = ref<boolean>(false);
/** ตรวจเวลา */
watch(
() => inputDate.value,
(value: string) => {
if (value.length === 10) {
const dateVal = convertDate(value);
if (dateVal.isValid) {
dayChecked.value = false;
date.value = new Date(dateVal.value);
} else {
dayChecked.value = true;
inputDate.value = "";
}
}
}
);
watch(
() => inputDateRefCommandDate.value,
(value: string) => {
if (value.length === 10) {
const dateVal = convertDate(value);
if (dateVal.isValid) {
dayChecked.value = false;
refCommandDate.value = new Date(dateVal.value);
} else {
dayChecked.value = true;
inputDateRefCommandDate.value = "";
}
} else {
refCommandDate.value = null;
}
}
);
profileData.record.columns.length == 0
? (visibleColumns.value = [
"date",
@ -725,6 +797,11 @@ const selectData = async (props: DataProps) => {
refCommandNo.value = props.row.refCommandNo;
refCommandDate.value = props.row.refCommandDate;
id.value = props.row.id;
inputDate.value = convertDateDisplay(date.value);
inputDateRefCommandDate.value = refCommandDate.value
? convertDateDisplay(refCommandDate.value)
: "";
await checkRowPage();
};
@ -740,6 +817,8 @@ const addData = () => {
reference.value = "";
refCommandNo.value = "";
refCommandDate.value = null;
inputDate.value = convertDateDisplay(date.value);
inputDateRefCommandDate.value = "";
};
/**

3
src/modules/04_registry/components/Table.vue
View file

@ -74,7 +74,8 @@
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width v-if="name !== 'การลา'"/>
<q-th auto-width v-if="name !== 'การลา'" />
<q-th auto-width v-if="name === 'ประวัติการเปลี่ยนชื่อ-นามสกุล'" />
</q-tr>
</template>
<template #body="props">

120
src/modules/04_registry/components/Work.vue
View file

@ -64,7 +64,20 @@
<q-card-section class="q-p-sm">
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
v-if="edit"
outlined
v-model="inputDateStart"
label="วันที่เริ่มต้น"
mask="##/##/####"
dense
:error="dayCheckedStart"
error-message="กรุณากรอกวัน/เดือน/ปี เริ่มต้น"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
/>
<datepicker
v-else
menu-class-name="modalfix"
:readonly="!edit"
v-model="dateStart"
@ -80,6 +93,7 @@
}}</template>
<template #trigger>
<q-input
readonly
:class="getClass(edit)"
:outlined="edit"
dense
@ -107,7 +121,19 @@
</datepicker>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
v-if="edit"
outlined
v-model="inputDateEnd"
label="วันที่สิ้นสุด"
mask="##/##/####"
dense
:error="dayCheckedEnd"
error-message="กรุณากรอกวัน/เดือน/ปี สิ้นสุด"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
/>
<datepicker
v-else
menu-class-name="modalfix"
v-model="dateEnd"
:locale="'th'"
@ -124,6 +150,7 @@
}}</template>
<template #trigger>
<q-input
readonly
:class="getClass(edit)"
:outlined="edit"
dense
@ -205,7 +232,17 @@
</q-input>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
v-if="edit"
outlined
v-model="inputRefCommandDate"
:label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
mask="##/##/####"
dense
/>
<datepicker
v-else
menu-class-name="modalfix"
:readonly="!edit"
v-model="refCommandDate"
@ -221,6 +258,7 @@
}}</template>
<template #trigger>
<q-input
readonly
:class="getClass(edit)"
:outlined="edit"
dense
@ -252,9 +290,7 @@
/>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
@ -311,6 +347,7 @@
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
import moment from "moment";
import { useProfileDataStore } from "@/modules/04_registry/store";
import { useCounterMixin } from "@/stores/mixin";
@ -340,8 +377,16 @@ const store = useProfileDataStore();
const { profileData, changeProfileColumns } = store;
const mixin = useCounterMixin();
const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
mixin;
const {
convertDateDisplay,
convertDate,
date2Thai,
success,
dateToISO,
messageError,
showLoader,
hideLoader,
} = mixin;
const route = useRoute();
const id = ref<string>("");
const dateStart = ref<Date>(new Date());
@ -371,6 +416,63 @@ const profileId = ref<string>(
const rows = ref<RequestItemsObject[]>([]);
const filter = ref<string>(""); //search data table
const visibleColumns = ref<String[]>([]);
console.log(dateStart.value);
const inputDateStart = ref<string>(convertDateDisplay(dateStart.value));
const inputDateEnd = ref<string>(convertDateDisplay(dateEnd.value));
const inputRefCommandDate = ref<string>("");
const dayCheckedStart = ref<boolean>(false);
const dayCheckedEnd = ref<boolean>(false);
/** ตรวจเวลา */
watch(
() => inputDateStart.value,
(value: string) => {
if (value.length === 10) {
const dateVal = convertDate(value);
if (dateVal.isValid) {
dayCheckedStart.value = false;
dateStart.value = new Date(dateVal.value);
} else {
dayCheckedStart.value = true;
inputDateStart.value = "";
}
}
}
);
watch(
() => inputRefCommandDate.value,
(value: string) => {
if (value.length === 10) {
const dateVal = convertDate(value);
if (dateVal.isValid) {
dayCheckedEnd.value = false;
refCommandDate.value = new Date(dateVal.value);
} else {
dayCheckedEnd.value = true;
inputRefCommandDate.value = "";
}
} else {
refCommandDate.value = null;
}
}
);
watch(
() => inputDateEnd.value,
(value: string) => {
if (value.length === 10) {
const dateVal = convertDate(value);
if (dateVal.isValid) {
dayCheckedEnd.value = false;
dateEnd.value = new Date(dateVal.value);
} else {
dayCheckedEnd.value = true;
inputDateEnd.value = "";
}
}
}
);
profileData.work.columns.length == 0
? (visibleColumns.value = [
"dateStart",
@ -804,6 +906,12 @@ const selectData = async (props: DataProps) => {
refCommandNo.value = props.row.refCommandNo;
refCommandDate.value = props.row.refCommandDate;
id.value = props.row.id;
inputDateStart.value = convertDateDisplay(dateStart.value);
inputDateEnd.value = convertDateDisplay(dateEnd.value);
inputRefCommandDate.value = refCommandDate.value
? convertDateDisplay(refCommandDate.value)
: "";
await checkRowPage();
};
@ -820,6 +928,10 @@ const addData = () => {
reference.value = "";
refCommandNo.value = "";
refCommandDate.value = null;
inputDateStart.value = convertDateDisplay(dateStart.value);
inputDateEnd.value = convertDateDisplay(dateEnd.value);
inputRefCommandDate.value = "";
};
/**

289
src/modules/04_registryNew/components/registry/registry.vue
View file

@ -18,6 +18,7 @@ const {
messageError,
showLoader,
hideLoader,
dialogMessageNotify,
} = mixin;
const columns = ref<QTableProps["columns"]>([
{
@ -170,34 +171,66 @@ async function fetchPrefix() {
}
async function addData() {
await http.post(config.API.registryNew, {
prefix: prefix.value,
firstName: firstName.value,
lastName: lastName.value,
citizenId: citizenId.value,
position: position.value,
posTypeId: posTypeId.value,
posLevelId: posLevelId.value,
});
fetchData();
showLoader();
await http
.post(config.API.registryNew, {
prefix: prefix.value,
firstName: firstName.value,
lastName: lastName.value,
citizenId: citizenId.value,
position: position.value,
posTypeId: posTypeId.value,
posLevelId: posLevelId.value,
})
.then(() => {
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
fetchData();
hideLoader();
});
}
async function editData(id: string) {
await http.put(config.API.registryNewId(id), {
prefix: prefix.value,
firstName: firstName.value,
lastName: lastName.value,
citizenId: citizenId.value,
position: position.value,
posTypeId: posTypeId.value,
posLevelId: posLevelId.value,
});
fetchData();
showLoader();
await http
.put(config.API.registryNewId(id), {
prefix: prefix.value,
firstName: firstName.value,
lastName: lastName.value,
citizenId: citizenId.value,
position: position.value,
posTypeId: posTypeId.value,
posLevelId: posLevelId.value,
})
.then(() => {
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
fetchData();
hideLoader();
});
}
async function deleteData(id: string) {
await http.delete(config.API.registryNewId(id));
fetchData();
await http
.delete(config.API.registryNewId(id))
.then(() => {
success($q, "ลบข้อมูลสำเร็จ");
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
fetchData();
hideLoader();
});
}
function updateSelectType(val: string) {
@ -250,6 +283,28 @@ watch(posTypeId, () => {
updateSelectType(posTypeId.value);
}, 200);
});
/**
* function ตรวจสอบเลขประจำตัวประชาชน
* @param citizenId เลขประจำตัวประชาชน
*/
async function changeCardID(citizenId: string | number | null) {
if (citizenId != null && typeof citizenId == "string") {
if (citizenId.length == 13 && citizenId) {
await http
.get(config.API.profileCitizenId(citizenId))
.then((res) => {
console.log(res);
const statusId = res.data.result.citizen;
!statusId &&
dialogMessageNotify($q, "เลขประจำตัวประชาชนนี้มีการใช้งานแล้ว");
})
.catch((err) => {
messageError($q, err);
});
}
}
}
</script>
<template>
@ -294,103 +349,104 @@ watch(posTypeId, () => {
/>
</div>
</q-toolbar>
<div class="col-12">
<d-table
ref="table"
:columns="columns"
:rows="store.row"
:filter="filterKeyword"
row-key="name"
flat
bordered
:paging="true"
dense
class="custom-header-table"
:visible-columns="visibleColumns"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.id">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'fullName'">
{{ props.row.prefix }}{{ props.row.firstName }}
{{ props.row.lastName }}
</div>
<d-table
ref="table"
:columns="columns"
:rows="store.row"
:filter="filterKeyword"
row-key="name"
flat
bordered
:paging="true"
dense
class="custom-header-table"
:visible-columns="visibleColumns"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.id">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'fullName'">
{{ props.row.prefix }}{{ props.row.firstName }}
{{ props.row.lastName }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="grey"
flat
dense
round
size="14px"
icon="more_vert"
@click.stop
>
<q-menu>
<q-list dense>
<q-item
v-close-popup
clickable
@click.stop="
() => {
dialogStatus = 'edit';
dialog = true;
editId = props.row.id;
prefix = props.row.prefix;
firstName = props.row.firstName;
lastName = props.row.lastName;
citizenId = props.row.citizenId;
position = props.row.position;
posTypeId = props.row.posTypeId;
posLevelId = props.row.posLevelId;
}
"
>
<q-item-section>
<div class="row items-center white">
<q-icon name="o_edit" color="positive" />
<span class="q-ml-sm">แก้ไข</span>
</div>
</q-item-section>
</q-item>
<q-item clickable>
<q-item-section
@click="
dialogRemove(
$q,
async () => await deleteData(props.row.id)
)
"
<div v-else>
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="grey"
flat
dense
round
size="14px"
icon="more_vert"
@click.stop
>
<q-menu>
<q-list dense>
<q-item
v-close-popup
clickable
@click.stop="
() => {
dialogStatus = 'edit';
dialog = true;
editId = props.row.id;
prefix = props.row.prefix;
firstName = props.row.firstName;
lastName = props.row.lastName;
citizenId = props.row.citizenId;
position = props.row.position;
posTypeId = props.row.posTypeId;
posLevelId = props.row.posLevelId;
}
"
>
<div class="row items-center white">
<q-icon name="mdi-trash-can-outline" color="negative" />
<span class="q-ml-sm">ลบ</span>
</div>
</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</q-td>
</q-tr>
</template>
</d-table>
<q-item-section>
<div class="row items-center white">
<q-icon name="o_edit" color="positive" />
<span class="q-ml-sm">แก้ไข</span>
</div>
</q-item-section>
</q-item>
<q-item clickable>
<q-item-section
@click="
dialogRemove(
$q,
async () => await deleteData(props.row.id)
)
"
v-close-popup
>
<div class="row items-center white">
<q-icon name="mdi-trash-can-outline" color="negative" />
<span class="q-ml-sm">ลบ</span>
</div>
</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</q-td>
</q-tr>
</template>
</d-table>
</div>
<q-dialog v-model="dialog" class="dialog" persistent>
<q-card style="min-width: 350px" class="bg-grey-11">
@ -461,6 +517,7 @@ watch(posTypeId, () => {
maxlength="13"
hide-bottom-space
mask="#############"
@update:model-value="changeCardID"
/>
<q-input
ref="positionRef"