Merge branch 'develop' of github.com:Frappet/bma-ehr-frontend into me
# Conflicts: # src/api/05_placement/api.placement.ts # src/api/index.ts # src/modules/05_placement/components/pass/Table.vue
This commit is contained in:
commit
3230b5e8c4
29 changed files with 5189 additions and 4217 deletions
|
|
@ -10,6 +10,7 @@ import env from "../index";
|
|||
const organizationPath = `${env.API_URI_ORG_SERVICE}/Organization/`;
|
||||
const postionMasterPath = `${env.API_URI_ORG_SERVICE}/PositionMaster`;
|
||||
const organizationPosition = `${env.API_URI_ORG_SERVICE}/OrganizationPosition/`;
|
||||
const organizationEmployeePosition = `${env.API_URI_ORG_EMPLOYEE_SERVICE}/organization-employee/`;
|
||||
|
||||
const report = `${env.API_URI}/report/organization/`;
|
||||
|
||||
|
|
@ -83,8 +84,7 @@ export default {
|
|||
getPositionNumberIdByOcId: (OcId: string) =>
|
||||
`${postionMasterPath}/position-number/Oc/${OcId}`,
|
||||
|
||||
|
||||
/**
|
||||
* api ประวัติการ publish
|
||||
*/
|
||||
organizationEmployeePosition: `${organizationEmployeePosition}`,
|
||||
organizationEmployeePositionId: (id: string) =>
|
||||
`${organizationEmployeePosition}${id}`,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,11 +1,21 @@
|
|||
/**
|
||||
* api บรรจุ แต่งตั้ง ย้าย โอน
|
||||
*/
|
||||
import env from "../index";
|
||||
|
||||
const placement = `${env.API_PLACEMENT_URI}/Placement/placement/`;
|
||||
const placement = `${env.API_URI}/Placement/placement`;
|
||||
const orgTree = `${env.API_URI_ORG_TREE}`;
|
||||
|
||||
export default {
|
||||
MainDetail: (year: number) => `${placement}/exam/${year}`,
|
||||
yearOptions: () => `${placement}/fiscal`,
|
||||
redirectToPage: (examId: string) => `${placement}/pass/${examId}`,
|
||||
disclaimF: () => `${placement}/pass/disclaim`,
|
||||
deferment: () => `${placement}/pass/deferment`,
|
||||
getStatCard: (examId: string) => `${placement}/pass/stat/${examId}`,
|
||||
getDatapersonal: (id: string) => `${placement}/personal/${id}`,
|
||||
putProperty: (id: string) => `${placement}/property/${id}`,
|
||||
orgTree: orgTree,
|
||||
placementPass: () => `${placement}/pass`,
|
||||
placementDefermentInfo: (id: string) => `${placement}/pass/deferment/${id}`,
|
||||
placementDisclaimInfo: (id: string) => `${placement}/pass/disclaim/${id}`,
|
||||
|
||||
//personal
|
||||
placementPersonalId: (personalId: string) =>
|
||||
`${placement}personal/${personalId}`,
|
||||
|
|
|
|||
|
|
@ -8,10 +8,12 @@ const env = ref<string>(process.env.NODE_ENV || "development");
|
|||
|
||||
const config = ref<any>({
|
||||
development: {
|
||||
// API_URI: "https://localhost:7006/api/v1",
|
||||
// API_URI: "https://localhost:7260/api",
|
||||
API_URI: "https://bma-ehr.frappet.synology.me/api/v1",
|
||||
// API_URI_ORG_SERVICE: "https://localhost:7056/api/v1", //ใช้ชั่วคราว
|
||||
API_URI_ORG_SERVICE: "https://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว
|
||||
API_URI_ORG_EMPLOYEE_SERVICE: "https://localhost:7208/api/v1", //ใช้ชั่วคราว
|
||||
// API_URI_ORG_EMPLOYEE_SERVICE: "https://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว
|
||||
// API_URI_PROFILE_SERVICE: "https://localhost:7159/api/v1",
|
||||
API_URI_PROFILE_SERVICE: "https://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว
|
||||
// API_CANDIDATE_URI: "https://localhost:7007/api/v1",
|
||||
|
|
@ -19,6 +21,8 @@ const config = ref<any>({
|
|||
// API_REPORT_URI: "https://localhost:7187/api/v1",
|
||||
API_REPORT_URI: "https://bma-ehr.frappet.synology.me/api/v1",
|
||||
API_PLACEMENT_URI: "https://localhost:7260/api",
|
||||
API_URI_ORG_TREE:
|
||||
"https://s3cluster.frappet.com/bma-ehr-fpt/organization/strueture/tree_20230712_172702.json",
|
||||
MEET_URI: "meet.frappet.com",
|
||||
},
|
||||
test: {
|
||||
|
|
@ -31,9 +35,12 @@ const config = ref<any>({
|
|||
// API_URI: "https://localhost:5010",
|
||||
API_URI: `${window.location.protocol}//${window.location.host}/api/v1`,
|
||||
API_URI_ORG_SERVICE: `${window.location.protocol}//${window.location.host}/api/v1`, //ใช้ชั่วคราว
|
||||
API_URI_ORG_EMPLOYEE_SERVICE: `${window.location.protocol}//${window.location.host}/api/v1`, //ใช้ชั่วคราว
|
||||
API_URI_PROFILE_SERVICE: `${window.location.protocol}//${window.location.host}/api/v1`,
|
||||
API_CANDIDATE_URI: `${window.location.protocol}//${window.location.host}/api/v1`,
|
||||
API_REPORT_URI: `${window.location.protocol}//${window.location.host}/api/v1`,
|
||||
API_URI_ORG_TREE:
|
||||
"https://s3cluster.frappet.com/bma-ehr-fpt/organization/strueture/tree_20230707_115124.json",
|
||||
MEET_URI: "meet.frappet.com",
|
||||
},
|
||||
});
|
||||
|
|
@ -46,6 +53,9 @@ const API_REPORT_URI = ref<string>(config.value[env.value].API_REPORT_URI);
|
|||
const API_URI_ORG_SERVICE = ref<string>(
|
||||
config.value[env.value].API_URI_ORG_SERVICE
|
||||
);
|
||||
const API_URI_ORG_EMPLOYEE_SERVICE = ref<string>(
|
||||
config.value[env.value].API_URI_ORG_EMPLOYEE_SERVICE
|
||||
);
|
||||
const MEET_URI = ref<string>(config.value[env.value].MEET_URI);
|
||||
const API_URI_PROFILE_SERVICE = ref<string>(
|
||||
config.value[env.value].API_URI_PROFILE_SERVICE
|
||||
|
|
@ -53,6 +63,7 @@ const API_URI_PROFILE_SERVICE = ref<string>(
|
|||
const API_PLACEMENT_URI = ref<string>(
|
||||
config.value[env.value].API_PLACEMENT_URI
|
||||
);
|
||||
const API_URI_ORG_TREE = ref<string>(config.value[env.value].API_URI_ORG_TREE);
|
||||
|
||||
export default {
|
||||
env: env.value,
|
||||
|
|
@ -61,7 +72,9 @@ export default {
|
|||
API_CANDIDATE_URI: API_CANDIDATE_URI.value,
|
||||
API_REPORT_URI: API_REPORT_URI.value,
|
||||
API_URI_ORG_SERVICE: API_URI_ORG_SERVICE.value,
|
||||
API_URI_ORG_EMPLOYEE_SERVICE: API_URI_ORG_EMPLOYEE_SERVICE.value,
|
||||
API_URI_PROFILE_SERVICE: API_URI_PROFILE_SERVICE.value,
|
||||
API_PLACEMENT_URI: API_PLACEMENT_URI.value,
|
||||
API_URI_ORG_TREE: API_URI_ORG_TREE.value,
|
||||
MEET_URI: MEET_URI.value,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
* เมนูย่อย: ข้อมูลโครงสร้างหน่วยงาน
|
||||
*/
|
||||
import env from "../index";
|
||||
const organizationMain = `${env.API_URI}/metadata/main/`;
|
||||
const organization = `${env.API_URI}/metadata/organization/`;
|
||||
const organizationOrganization = `${env.API_URI}/metadata/organization-organization/`;
|
||||
const organizationShortName = `${env.API_URI}/metadata/organization-shortname/`;
|
||||
|
|
@ -21,6 +22,7 @@ export default {
|
|||
/**
|
||||
* api จำนวนข้อมูลใน ระบบจัดการข้อมูลหลัก tab ย่อยแต่ละ tab
|
||||
*/
|
||||
organizationMain: `${organizationMain}organization`,
|
||||
organization,
|
||||
countDashbordSubHistory: (type: number) => `${dashbord}${type}`,
|
||||
countDashbordHistory: `${dashbord}`,
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
* เมนูย่อย: ข้อมูลตำแหน่งของลูกจ้างกรุงเทพมหานคร
|
||||
*/
|
||||
import env from "../index";
|
||||
const positionEmployee = `${env.API_URI}/metadata/main/`;
|
||||
const positionEmployeePosition = `${env.API_URI}/metadata/position-employee-position/`;
|
||||
const positionEmployeePositionSide = `${env.API_URI}/metadata/position-employee-position-side/`;
|
||||
const positionEmployeeGroup = `${env.API_URI}/metadata/position-employee-group/`;
|
||||
|
|
@ -11,6 +12,7 @@ const positionEmployeeLevel = `${env.API_URI}/metadata/position-employee-level/`
|
|||
const positionEmployeeStatus = `${env.API_URI}/metadata/position-employee-status/`;
|
||||
|
||||
export default {
|
||||
positionEmployee: `${positionEmployee}positionEmployee`,
|
||||
/**
|
||||
* api ตำแหน่ง
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -88,11 +88,16 @@ const menuList = readonly<any[]>([
|
|||
},
|
||||
{
|
||||
key: 3.5,
|
||||
label: "ผังโครงสร้างลูกจ้าง",
|
||||
path: "organizationalEmployee",
|
||||
},
|
||||
{
|
||||
key: 3.6,
|
||||
label: "จัดการบัญชี 2",
|
||||
path: "manageReport2",
|
||||
},
|
||||
{
|
||||
key: 3.6,
|
||||
key: 3.7,
|
||||
label: "รายงานบัญชี",
|
||||
path: "organizationalReport",
|
||||
},
|
||||
|
|
|
|||
|
|
@ -437,7 +437,7 @@ const fetchHistory = async () => {
|
|||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ const MainStructChart = () =>
|
|||
const MainOrgChart = () =>
|
||||
import("@/modules/02_organizational/views/MainOrgChart.vue");
|
||||
const MainTree = () => import("@/modules/02_organizational/views/MainTree.vue");
|
||||
const MainTreeEmployee = () =>
|
||||
import("@/modules/02_organizational/views/MainTreeEmployee.vue");
|
||||
const MainReport = () =>
|
||||
import("@/modules/02_organizational/views/MainReport.vue");
|
||||
const ManageReport2 = () =>
|
||||
|
|
@ -60,6 +62,16 @@ export default [
|
|||
Role: "organization",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/organizational/employee",
|
||||
name: "organizationalEmployee",
|
||||
component: MainTreeEmployee,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [9],
|
||||
Role: "organization",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/organizational/manage/report",
|
||||
name: "manageReport2",
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
1749
src/modules/02_organizational/views/MainTreeEmployee.vue
Normal file
1749
src/modules/02_organizational/views/MainTreeEmployee.vue
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -1,128 +1,126 @@
|
|||
<template>
|
||||
<div class="q-pb-sm row q-col-gutter-sm">
|
||||
<!-- -->
|
||||
<div class="q-gutter-sm" v-if="nornmalData == true">
|
||||
<q-btn
|
||||
size="12px"
|
||||
flat
|
||||
round
|
||||
color="add"
|
||||
@click="checkAdd"
|
||||
icon="mdi-plus"
|
||||
>
|
||||
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
<div class="row q-gutter-sm q-pb-sm" v-if="conclude == true">
|
||||
<q-card bordered flat class="q-px-md no-wrap row">
|
||||
<div class="col-12 text-subtitle2 row items-center">
|
||||
<span class="text-weight-medium text-dark"
|
||||
>ผู้สมัครสอบ</span
|
||||
>
|
||||
<q-space />
|
||||
<q-badge
|
||||
color="white"
|
||||
class="text-weight-bold text-subtitle1 text-primary"
|
||||
:label="`${count}`"
|
||||
rounded
|
||||
/>
|
||||
</div>
|
||||
</q-card>
|
||||
<q-card bordered flat class="q-px-md no-wrap row">
|
||||
<div class="col-12 text-subtitle2 row items-center">
|
||||
<span class="text-weight-medium text-dark">สอบผ่าน</span>
|
||||
<q-space />
|
||||
<q-badge
|
||||
color="white"
|
||||
class="text-weight-bold text-subtitle1 text-blue"
|
||||
:label="`${pass}`"
|
||||
rounded
|
||||
/>
|
||||
</div>
|
||||
</q-card>
|
||||
<div class="q-pb-sm row q-col-gutter-sm">
|
||||
<!-- -->
|
||||
<div class="q-gutter-sm" v-if="nornmalData == true">
|
||||
<q-btn
|
||||
size="12px"
|
||||
flat
|
||||
round
|
||||
color="add"
|
||||
@click="checkAdd"
|
||||
icon="mdi-plus"
|
||||
>
|
||||
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
<div class="row q-gutter-sm q-pb-sm" v-if="conclude == true">
|
||||
<q-card bordered flat class="q-px-md no-wrap row">
|
||||
<div class="col-12 text-subtitle2 row items-center">
|
||||
<span class="text-weight-medium text-dark">ผู้สมัครสอบ</span>
|
||||
<q-space />
|
||||
<q-badge
|
||||
color="white"
|
||||
class="text-weight-bold text-subtitle1 text-primary"
|
||||
:label="`${count}`"
|
||||
rounded
|
||||
/>
|
||||
</div>
|
||||
</q-card>
|
||||
<q-card bordered flat class="q-px-md no-wrap row">
|
||||
<div class="col-12 text-subtitle2 row items-center">
|
||||
<span class="text-weight-medium text-dark">สอบผ่าน</span>
|
||||
<q-space />
|
||||
<q-badge
|
||||
color="white"
|
||||
class="text-weight-bold text-subtitle1 text-blue"
|
||||
:label="`${pass}`"
|
||||
rounded
|
||||
/>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card bordered flat class="q-px-md no-wrap row">
|
||||
<div class="col-12 text-subtitle2 row items-center">
|
||||
<span class="text-weight-medium text-dark">สอบไม่ผ่าน</span>
|
||||
<q-space />
|
||||
<q-badge
|
||||
color="white"
|
||||
class="text-weight-bold text-subtitle1 text-pink"
|
||||
:label="`${notpass}`"
|
||||
rounded
|
||||
/>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<q-space />
|
||||
<div class="items-center q-gutter-sm" style="display: flex">
|
||||
<!-- ค้นหาข้อความใน table -->
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
:model-value="inputfilter"
|
||||
ref="filterRef"
|
||||
@update:model-value="updateInput"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
style="max-width: 200px"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="inputfilter == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="inputfilter !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<!-- แสดงคอลัมน์ใน table -->
|
||||
<q-select
|
||||
:model-value="inputvisible"
|
||||
@update:model-value="updateVisible"
|
||||
:display-value="$q.lang.table.columns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
:options="attrs.columns"
|
||||
options-dense
|
||||
option-value="name"
|
||||
map-options
|
||||
emit-value
|
||||
style="min-width: 150px"
|
||||
class="gt-xs"
|
||||
>
|
||||
<template> </template>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
<q-table
|
||||
ref="table"
|
||||
flat
|
||||
bordered
|
||||
class="custom-table2"
|
||||
v-bind="attrs"
|
||||
virtual-scroll
|
||||
:virtual-scroll-sticky-size-start="48"
|
||||
dense
|
||||
:pagination-label="paginationLabel"
|
||||
:pagination="initialPagination"
|
||||
:rows-per-page-options="[0]"
|
||||
>
|
||||
<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" v-html="col.label" />
|
||||
</q-th>
|
||||
<q-th auto-width v-if="nornmalData == true" />
|
||||
</q-tr>
|
||||
</template>
|
||||
<template #body="props">
|
||||
<slot v-bind="props" name="columns"></slot>
|
||||
</template>
|
||||
</q-table>
|
||||
<q-card bordered flat class="q-px-md no-wrap row">
|
||||
<div class="col-12 text-subtitle2 row items-center">
|
||||
<span class="text-weight-medium text-dark">สอบไม่ผ่าน</span>
|
||||
<q-space />
|
||||
<q-badge
|
||||
color="white"
|
||||
class="text-weight-bold text-subtitle1 text-pink"
|
||||
:label="`${notpass}`"
|
||||
rounded
|
||||
/>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<q-space />
|
||||
<div class="items-center q-gutter-sm" style="display: flex">
|
||||
<!-- ค้นหาข้อความใน table -->
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
:model-value="inputfilter"
|
||||
ref="filterRef"
|
||||
@update:model-value="updateInput"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
style="max-width: 200px"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="inputfilter == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="inputfilter !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<!-- แสดงคอลัมน์ใน table -->
|
||||
<q-select
|
||||
:model-value="inputvisible"
|
||||
@update:model-value="updateVisible"
|
||||
:display-value="$q.lang.table.columns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
:options="attrs.columns"
|
||||
options-dense
|
||||
option-value="name"
|
||||
map-options
|
||||
emit-value
|
||||
style="min-width: 150px"
|
||||
class="gt-xs"
|
||||
>
|
||||
<template> </template>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
<q-table
|
||||
ref="table"
|
||||
flat
|
||||
bordered
|
||||
class="custom-header-table"
|
||||
v-bind="attrs"
|
||||
virtual-scroll
|
||||
:virtual-scroll-sticky-size-start="48"
|
||||
dense
|
||||
:pagination-label="paginationLabel"
|
||||
:pagination="initialPagination"
|
||||
:rows-per-page-options="[0]"
|
||||
>
|
||||
<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" v-html="col.label" />
|
||||
</q-th>
|
||||
<q-th auto-width v-if="nornmalData == true" />
|
||||
</q-tr>
|
||||
</template>
|
||||
<template #body="props">
|
||||
<slot v-bind="props" name="columns"></slot>
|
||||
</template>
|
||||
</q-table>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, useAttrs } from "vue";
|
||||
|
|
@ -132,106 +130,106 @@ const attrs = ref<any>(useAttrs());
|
|||
const table = ref<any>(null);
|
||||
const filterRef = ref<any>(null);
|
||||
const initialPagination = ref<Pagination>({
|
||||
rowsPerPage: 0,
|
||||
rowsPerPage: 0,
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
count: Number,
|
||||
pass: Number,
|
||||
notpass: Number,
|
||||
count: Number,
|
||||
pass: Number,
|
||||
notpass: Number,
|
||||
|
||||
inputfilter: String,
|
||||
name: String,
|
||||
icon: String,
|
||||
inputvisible: Array,
|
||||
editvisible: Boolean,
|
||||
add: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
validate: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
nornmalData: {
|
||||
type: Boolean,
|
||||
defualt: true,
|
||||
},
|
||||
conclude: {
|
||||
type: Boolean,
|
||||
defualt: false,
|
||||
},
|
||||
inputfilter: String,
|
||||
name: String,
|
||||
icon: String,
|
||||
inputvisible: Array,
|
||||
editvisible: Boolean,
|
||||
add: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
validate: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
nornmalData: {
|
||||
type: Boolean,
|
||||
defualt: true,
|
||||
},
|
||||
conclude: {
|
||||
type: Boolean,
|
||||
defualt: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits([
|
||||
"update:inputfilter",
|
||||
"update:inputvisible",
|
||||
"update:editvisible",
|
||||
"update:inputfilter",
|
||||
"update:inputvisible",
|
||||
"update:editvisible",
|
||||
]);
|
||||
const updateInput = (value: string | number | null) => {
|
||||
emit("update:inputfilter", value);
|
||||
emit("update:inputfilter", value);
|
||||
};
|
||||
const updateVisible = (value: []) => {
|
||||
emit("update:inputvisible", value);
|
||||
emit("update:inputvisible", value);
|
||||
};
|
||||
|
||||
const paginationLabel = (start: string, end: string, total: string) => {
|
||||
return start + "-" + end + " ใน " + total;
|
||||
return start + "-" + end + " ใน " + total;
|
||||
};
|
||||
|
||||
const checkAdd = () => {
|
||||
props.add();
|
||||
props.add();
|
||||
};
|
||||
|
||||
const resetFilter = () => {
|
||||
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
|
||||
emit("update:inputfilter", "");
|
||||
filterRef.value.focus();
|
||||
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
|
||||
emit("update:inputfilter", "");
|
||||
filterRef.value.focus();
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.icon-color {
|
||||
color: #4154b3;
|
||||
color: #4154b3;
|
||||
}
|
||||
|
||||
.custom-table2 {
|
||||
max-height: 64vh;
|
||||
max-height: 64vh;
|
||||
|
||||
.q-table tr:nth-child(odd) td {
|
||||
background: white;
|
||||
}
|
||||
.q-table tr:nth-child(odd) td {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.q-table tr:nth-child(even) td {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
.q-table tr:nth-child(even) td {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.q-table thead tr {
|
||||
background: #ecebeb;
|
||||
}
|
||||
.q-table thead tr {
|
||||
background: #ecebeb;
|
||||
}
|
||||
|
||||
.q-table thead tr th {
|
||||
position: sticky;
|
||||
}
|
||||
.q-table thead tr th {
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.q-table td:nth-of-type(2) {
|
||||
z-index: 3 !important;
|
||||
}
|
||||
.q-table td:nth-of-type(2) {
|
||||
z-index: 3 !important;
|
||||
}
|
||||
|
||||
.q-table th:nth-of-type(2),
|
||||
.q-table td:nth-of-type(2) {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.q-table th:nth-of-type(2),
|
||||
.q-table td:nth-of-type(2) {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* this will be the loading indicator */
|
||||
.q-table thead tr:last-child th {
|
||||
/* height of all previous header rows */
|
||||
top: 48px;
|
||||
}
|
||||
/* this will be the loading indicator */
|
||||
.q-table thead tr:last-child th {
|
||||
/* height of all previous header rows */
|
||||
top: 48px;
|
||||
}
|
||||
|
||||
.q-table thead tr:first-child th {
|
||||
top: 0;
|
||||
}
|
||||
.q-table thead tr:first-child th {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,88 +1,79 @@
|
|||
<!-- page:จัดการรอบการสอบ สรรหา -->
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
จัดการรอบคัดเลือก
|
||||
</div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
|
||||
<div>
|
||||
<Table
|
||||
style="max-height: 80vh"
|
||||
:rows="examData"
|
||||
:columns="columns"
|
||||
:filter="filter"
|
||||
:visible-columns="visibleColumns"
|
||||
v-model:inputfilter="filter"
|
||||
v-model:inputvisible="visibleColumns"
|
||||
:pagination="initialPagination"
|
||||
:nornmalData="true"
|
||||
:add="clickAdd"
|
||||
:paging="true"
|
||||
:titleText="''"
|
||||
>
|
||||
<template #columns="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
@click="clickEdit(props.row)"
|
||||
>
|
||||
<div
|
||||
v-if="col.name == 'no'"
|
||||
class="table_ellipsis2"
|
||||
>
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div
|
||||
v-else-if="col.name == 'yearly'"
|
||||
class="table_ellipsis2"
|
||||
>
|
||||
{{ col.value + 543 }}
|
||||
</div>
|
||||
<div
|
||||
v-else-if="
|
||||
col.name == 'dateRegister' ||
|
||||
col.name == 'datePayment' ||
|
||||
col.name == 'dateAnnouncement'
|
||||
"
|
||||
class="table_ellipsis2"
|
||||
>
|
||||
{{ dateThaiRange(col.value) }}
|
||||
</div>
|
||||
<div
|
||||
v-else-if="col.name == 'announcementExam'"
|
||||
class="table_ellipsis2"
|
||||
>
|
||||
{{ col.value ? "ข่าวการสอบ" : "ข่าวทั่วไป" }}
|
||||
</div>
|
||||
<div
|
||||
v-else-if="col.name == 'category'"
|
||||
class="table_ellipsis2"
|
||||
>
|
||||
{{ typeCategoryExam(col.value) }}
|
||||
</div>
|
||||
<div v-else class="table_ellipsis2">
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td>
|
||||
<q-btn
|
||||
dense
|
||||
size="12px"
|
||||
flat
|
||||
round
|
||||
color="red"
|
||||
@click="clickDelete(props.row.id)"
|
||||
icon="mdi-delete"
|
||||
>
|
||||
<q-tooltip>ลบข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</Table>
|
||||
</div>
|
||||
</q-card>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
จัดการรอบคัดเลือก
|
||||
</div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
|
||||
<div>
|
||||
<Table
|
||||
style="max-height: 80vh"
|
||||
:rows="examData"
|
||||
:columns="columns"
|
||||
:filter="filter"
|
||||
:visible-columns="visibleColumns"
|
||||
v-model:inputfilter="filter"
|
||||
v-model:inputvisible="visibleColumns"
|
||||
:pagination="initialPagination"
|
||||
:nornmalData="true"
|
||||
:add="clickAdd"
|
||||
:paging="true"
|
||||
:titleText="''"
|
||||
>
|
||||
<template #columns="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
@click="clickEdit(props.row)"
|
||||
>
|
||||
<div v-if="col.name == 'no'" class="table_ellipsis2">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'yearly'" class="table_ellipsis2">
|
||||
{{ col.value + 543 }}
|
||||
</div>
|
||||
<div
|
||||
v-else-if="
|
||||
col.name == 'dateRegister' ||
|
||||
col.name == 'datePayment' ||
|
||||
col.name == 'dateAnnouncement'
|
||||
"
|
||||
class="table_ellipsis2"
|
||||
>
|
||||
{{ dateThaiRange(col.value) }}
|
||||
</div>
|
||||
<div
|
||||
v-else-if="col.name == 'announcementExam'"
|
||||
class="table_ellipsis2"
|
||||
>
|
||||
{{ col.value ? "ข่าวการสอบ" : "ข่าวทั่วไป" }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'category'" class="table_ellipsis2">
|
||||
{{ typeCategoryExam(col.value) }}
|
||||
</div>
|
||||
<div v-else class="table_ellipsis2">
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td>
|
||||
<q-btn
|
||||
dense
|
||||
size="12px"
|
||||
flat
|
||||
round
|
||||
color="red"
|
||||
@click="clickDelete(props.row.id)"
|
||||
icon="mdi-delete"
|
||||
>
|
||||
<q-tooltip>ลบข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</Table>
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import type { QTableProps } from "quasar";
|
||||
|
|
@ -90,14 +81,14 @@ import { onMounted, ref } from "vue";
|
|||
import { useQuasar } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import type {
|
||||
RequestPeriodExam,
|
||||
RequestPosition,
|
||||
RequestPayment,
|
||||
RequestPeriodExam,
|
||||
RequestPosition,
|
||||
RequestPayment,
|
||||
} from "@/modules/03_recruiting/interface/request/Period";
|
||||
import type {
|
||||
ResponsePeriodExam,
|
||||
ResponsePosition,
|
||||
ResponsePayment,
|
||||
ResponsePeriodExam,
|
||||
ResponsePosition,
|
||||
ResponsePayment,
|
||||
} from "@/modules/03_recruiting/interface/response/Period";
|
||||
import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
|
||||
import Table from "@/modules/03_recruiting/components/Table.vue";
|
||||
|
|
@ -114,248 +105,236 @@ const router = useRouter();
|
|||
const { date2Thai, success, typeCategoryExam, messageError } = mixin;
|
||||
const filter = ref<string>(""); //search data table
|
||||
const initialPagination = ref<Pagination>({
|
||||
rowsPerPage: 0,
|
||||
rowsPerPage: 0,
|
||||
});
|
||||
const examData = ref<ResponsePeriodExam[]>([]);
|
||||
const visibleColumns = ref<String[]>([
|
||||
"no",
|
||||
"announcementExam",
|
||||
"yearly",
|
||||
"category",
|
||||
"name",
|
||||
"document",
|
||||
"dateAnnouncement",
|
||||
"dateRegister",
|
||||
"datePayment",
|
||||
"fee",
|
||||
"no",
|
||||
"announcementExam",
|
||||
"yearly",
|
||||
"category",
|
||||
"name",
|
||||
"document",
|
||||
"dateAnnouncement",
|
||||
"dateRegister",
|
||||
"datePayment",
|
||||
"fee",
|
||||
]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "center",
|
||||
label: "ลำดับ",
|
||||
sortable: true,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "announcementExam",
|
||||
align: "left",
|
||||
label: "ประเภทการประกาศ",
|
||||
sortable: true,
|
||||
field: "announcementExam",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "yearly",
|
||||
align: "center",
|
||||
label: "ปีงบประมาณ",
|
||||
sortable: true,
|
||||
field: "yearly",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "category",
|
||||
align: "left",
|
||||
label: "สังกัด",
|
||||
sortable: true,
|
||||
field: "category",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "name",
|
||||
align: "left",
|
||||
label: "รายการประกาศ",
|
||||
sortable: true,
|
||||
field: "name",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "fee",
|
||||
align: "right",
|
||||
label: "ค่าธรรมเนียม",
|
||||
sortable: true,
|
||||
field: "fee",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "dateAnnouncement",
|
||||
align: "left",
|
||||
label: "วันที่สมัคร",
|
||||
sortable: true,
|
||||
field: "dateAnnouncement",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "dateRegister",
|
||||
align: "left",
|
||||
label: "วันที่ชำระเงิน",
|
||||
sortable: true,
|
||||
field: "dateRegister",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "datePayment",
|
||||
align: "left",
|
||||
label: "วันที่ประกาศ",
|
||||
sortable: true,
|
||||
field: "datePayment",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "no",
|
||||
align: "center",
|
||||
label: "ลำดับ",
|
||||
sortable: true,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "announcementExam",
|
||||
align: "left",
|
||||
label: "ประเภทการประกาศ",
|
||||
sortable: true,
|
||||
field: "announcementExam",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "yearly",
|
||||
align: "center",
|
||||
label: "ปีงบประมาณ",
|
||||
sortable: true,
|
||||
field: "yearly",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "category",
|
||||
align: "left",
|
||||
label: "สังกัด",
|
||||
sortable: true,
|
||||
field: "category",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "name",
|
||||
align: "left",
|
||||
label: "รายการประกาศ",
|
||||
sortable: true,
|
||||
field: "name",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "fee",
|
||||
align: "right",
|
||||
label: "ค่าธรรมเนียม",
|
||||
sortable: true,
|
||||
field: "fee",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "dateAnnouncement",
|
||||
align: "left",
|
||||
label: "วันที่สมัคร",
|
||||
sortable: true,
|
||||
field: "dateAnnouncement",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "dateRegister",
|
||||
align: "left",
|
||||
label: "วันที่ชำระเงิน",
|
||||
sortable: true,
|
||||
field: "dateRegister",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "datePayment",
|
||||
align: "left",
|
||||
label: "วันที่ประกาศ",
|
||||
sortable: true,
|
||||
field: "datePayment",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
|
||||
onMounted(async () => {
|
||||
loaderPage(false);
|
||||
await fetchData();
|
||||
loaderPage(false);
|
||||
await fetchData();
|
||||
});
|
||||
|
||||
const fetchData = async () => {
|
||||
loaderPage(true);
|
||||
await http
|
||||
.get(config.API.periodExamType("all"))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
let result: ResponsePeriodExam[] = [];
|
||||
if (data.length > 0) {
|
||||
data.map((r: RequestPeriodExam) => {
|
||||
const positionData: ResponsePosition[] = [];
|
||||
r.positionExam.map((r: RequestPosition) => {
|
||||
positionData.push({
|
||||
id: r.id,
|
||||
position: {
|
||||
id: r.positionId,
|
||||
name: r.positionName,
|
||||
},
|
||||
type: {
|
||||
id: r.typeId,
|
||||
name: r.typeName,
|
||||
},
|
||||
highDegree: r.highDegree,
|
||||
});
|
||||
});
|
||||
const bankData: ResponsePayment[] = [];
|
||||
r.bankExam.map((r: RequestPayment) => {
|
||||
bankData.push({
|
||||
id: r.id,
|
||||
accountNumber: r.accountNumber,
|
||||
bankName: r.bankName,
|
||||
accountName: r.accountName,
|
||||
});
|
||||
});
|
||||
result.push({
|
||||
id: r.id,
|
||||
dateAnnounce:
|
||||
r.announcementDate !== null
|
||||
? new Date(r.announcementDate)
|
||||
: null,
|
||||
announcementExam: r.announcementExam,
|
||||
name: r.name,
|
||||
checkDocument: r.checkDocument,
|
||||
checkDisability: r.checkDisability,
|
||||
round: r.round,
|
||||
yearly: r.year,
|
||||
fee: r.fee,
|
||||
dateAnnouncement:
|
||||
r.announcementStartDate !== null &&
|
||||
r.announcementEndDate !== null
|
||||
? [
|
||||
new Date(r.announcementStartDate),
|
||||
new Date(r.announcementEndDate),
|
||||
]
|
||||
: null,
|
||||
dateExam:
|
||||
r.examDate !== null ? new Date(r.examDate) : null,
|
||||
dateRegister:
|
||||
r.registerStartDate !== null &&
|
||||
r.registerEndDate !== null
|
||||
? [
|
||||
new Date(r.registerStartDate),
|
||||
new Date(r.registerEndDate),
|
||||
]
|
||||
: null,
|
||||
datePayment:
|
||||
r.paymentStartDate !== null &&
|
||||
r.paymentEndDate !== null
|
||||
? [
|
||||
new Date(r.paymentStartDate),
|
||||
new Date(r.paymentEndDate),
|
||||
]
|
||||
: null,
|
||||
organizationName: {
|
||||
id: r.organizationId,
|
||||
name: r.organizationName,
|
||||
},
|
||||
organizationShortName: {
|
||||
id: r.organizationCodeId,
|
||||
name: r.organizationCodeName,
|
||||
},
|
||||
positionExam: positionData,
|
||||
pay: r.bankExam.length > 0 ? "payment2" : "payment1",
|
||||
bankExam: bankData,
|
||||
editor: r.detail,
|
||||
note: r.note,
|
||||
category: r.category,
|
||||
});
|
||||
});
|
||||
}
|
||||
examData.value = result;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
loaderPage(false);
|
||||
});
|
||||
loaderPage(true);
|
||||
await http
|
||||
.get(config.API.periodExamType("all"))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
let result: ResponsePeriodExam[] = [];
|
||||
if (data.length > 0) {
|
||||
data.map((r: RequestPeriodExam) => {
|
||||
const positionData: ResponsePosition[] = [];
|
||||
r.positionExam.map((r: RequestPosition) => {
|
||||
positionData.push({
|
||||
id: r.id,
|
||||
position: {
|
||||
id: r.positionId,
|
||||
name: r.positionName,
|
||||
},
|
||||
type: {
|
||||
id: r.typeId,
|
||||
name: r.typeName,
|
||||
},
|
||||
highDegree: r.highDegree,
|
||||
});
|
||||
});
|
||||
const bankData: ResponsePayment[] = [];
|
||||
r.bankExam.map((r: RequestPayment) => {
|
||||
bankData.push({
|
||||
id: r.id,
|
||||
accountNumber: r.accountNumber,
|
||||
bankName: r.bankName,
|
||||
accountName: r.accountName,
|
||||
});
|
||||
});
|
||||
result.push({
|
||||
id: r.id,
|
||||
dateAnnounce:
|
||||
r.announcementDate !== null ? new Date(r.announcementDate) : null,
|
||||
announcementExam: r.announcementExam,
|
||||
name: r.name,
|
||||
checkDocument: r.checkDocument,
|
||||
checkDisability: r.checkDisability,
|
||||
round: r.round,
|
||||
yearly: r.year,
|
||||
fee: r.fee,
|
||||
dateAnnouncement:
|
||||
r.announcementStartDate !== null && r.announcementEndDate !== null
|
||||
? [
|
||||
new Date(r.announcementStartDate),
|
||||
new Date(r.announcementEndDate),
|
||||
]
|
||||
: null,
|
||||
dateExam: r.examDate !== null ? new Date(r.examDate) : null,
|
||||
dateRegister:
|
||||
r.registerStartDate !== null && r.registerEndDate !== null
|
||||
? [new Date(r.registerStartDate), new Date(r.registerEndDate)]
|
||||
: null,
|
||||
datePayment:
|
||||
r.paymentStartDate !== null && r.paymentEndDate !== null
|
||||
? [new Date(r.paymentStartDate), new Date(r.paymentEndDate)]
|
||||
: null,
|
||||
organizationName: {
|
||||
id: r.organizationId,
|
||||
name: r.organizationName,
|
||||
},
|
||||
organizationShortName: {
|
||||
id: r.organizationCodeId,
|
||||
name: r.organizationCodeName,
|
||||
},
|
||||
positionExam: positionData,
|
||||
pay: r.bankExam.length > 0 ? "payment2" : "payment1",
|
||||
bankExam: bankData,
|
||||
editor: r.detail,
|
||||
note: r.note,
|
||||
category: r.category,
|
||||
});
|
||||
});
|
||||
}
|
||||
examData.value = result;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
loaderPage(false);
|
||||
});
|
||||
};
|
||||
|
||||
const clickEdit = (col: ResponsePeriodExam) => {
|
||||
router.push(`/qualify/period/${col.id}`);
|
||||
router.push(`/qualify/period/${col.id}`);
|
||||
};
|
||||
|
||||
const clickDelete = (id: string) => {
|
||||
$q.dialog({
|
||||
title: "ยืนยันการลบข้อมูล",
|
||||
message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
|
||||
cancel: {
|
||||
flat: true,
|
||||
color: "negative",
|
||||
},
|
||||
persistent: true,
|
||||
})
|
||||
.onOk(async () => {
|
||||
await deleteData(id);
|
||||
})
|
||||
.onCancel(() => {})
|
||||
.onDismiss(() => {});
|
||||
$q.dialog({
|
||||
title: "ยืนยันการลบข้อมูล",
|
||||
message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
|
||||
cancel: {
|
||||
flat: true,
|
||||
color: "negative",
|
||||
},
|
||||
persistent: true,
|
||||
})
|
||||
.onOk(async () => {
|
||||
await deleteData(id);
|
||||
})
|
||||
.onCancel(() => {})
|
||||
.onDismiss(() => {});
|
||||
};
|
||||
|
||||
const clickAdd = () => {
|
||||
router.push({ name: "qualifyPeriodAdd" });
|
||||
router.push({ name: "qualifyPeriodAdd" });
|
||||
};
|
||||
|
||||
const deleteData = async (id: string) => {
|
||||
loaderPage(true);
|
||||
await http
|
||||
.delete(config.API.periodExamId(id))
|
||||
.then((res) => {
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
loaderPage(false);
|
||||
await fetchData();
|
||||
});
|
||||
loaderPage(true);
|
||||
await http
|
||||
.delete(config.API.periodExamId(id))
|
||||
.then((res) => {
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
loaderPage(false);
|
||||
await fetchData();
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -363,13 +342,13 @@ const deleteData = async (id: string) => {
|
|||
* @param val ช่วงวันที่
|
||||
*/
|
||||
const dateThaiRange = (val: [Date, Date]) => {
|
||||
if (val === null) {
|
||||
return "";
|
||||
} else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {
|
||||
return `${date2Thai(val[0], true)}`;
|
||||
} else {
|
||||
return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`;
|
||||
}
|
||||
if (val === null) {
|
||||
return "";
|
||||
} else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {
|
||||
return `${date2Thai(val[0], true)}`;
|
||||
} else {
|
||||
return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -309,9 +309,7 @@ const tittleHistory = ref<string>(
|
|||
);
|
||||
const filterHistory = ref<string>(""); //search data table history
|
||||
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
|
||||
const profileId = ref<string>(
|
||||
route.params.id ? route.params.id.toString() : ""
|
||||
);
|
||||
const profileId = ref<string>(route.params.id ? route.params.id.toString():'');
|
||||
const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
|
||||
const rows = ref<RequestItemsObject[]>([]);
|
||||
const filter = ref<string>(""); //search data table
|
||||
|
|
@ -480,7 +478,7 @@ onMounted(async () => {
|
|||
});
|
||||
|
||||
const fetchData = async () => {
|
||||
if (profileId.value) {
|
||||
if (profileId.value!='') {
|
||||
loaderPage(true);
|
||||
await http
|
||||
.get(config.API.profileNopaidId(profileId.value))
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref, useAttrs } from "vue";
|
||||
import { onMounted, ref, reactive } from "vue";
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { FormPlacementMainData } from "@/modules/05_placement/interface/request/Main";
|
||||
import type { DataOption } from "@/modules/05_placement/interface/index/Main";
|
||||
import { useQuasar } from "quasar";
|
||||
import type {
|
||||
DataOption,
|
||||
DataOption1,
|
||||
} from "@/modules/05_placement/interface/index/Main";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { usePlacementDataStore } from "@/modules/05_placement/store";
|
||||
import router from "@/router";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const DataStore = usePlacementDataStore();
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { dateText } = mixin;
|
||||
|
||||
// แปลงเวลา ค.ศ ให้เป็น พ.ศ
|
||||
const textDate = (value: Date) => {
|
||||
return dateText(value);
|
||||
};
|
||||
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
|
||||
|
||||
// หัวตาราง
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
|
|
@ -58,175 +58,119 @@ const columns = ref<QTableProps["columns"]>([
|
|||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "numberofCandidates",
|
||||
name: "numberOfCandidates",
|
||||
align: "left",
|
||||
label: "จำนวนผู้สอบได้",
|
||||
sortable: false,
|
||||
field: "numberofCandidates",
|
||||
field: "numberOfCandidates",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "examType",
|
||||
name: "examTypeName",
|
||||
align: "left",
|
||||
label: "ประเภทการสอบ",
|
||||
sortable: false,
|
||||
field: "examType",
|
||||
field: "examTypeName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "accountStartDate",
|
||||
align: "left",
|
||||
label: "วันที่บัญชีใช้ได้ตั้งแต่",
|
||||
sortable: true,
|
||||
field: "accountStartDate",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "accountExpirationDate",
|
||||
align: "left",
|
||||
label: "วันที่บัญชีหมดอายุ",
|
||||
label: "วันที่บัญชีใช้ได้ถึง",
|
||||
sortable: true,
|
||||
field: "accountExpirationDate",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
|
||||
// ข้อมูลตาราง (จำลอง)
|
||||
const rows = ref<FormPlacementMainData[]>([
|
||||
{
|
||||
id: 1,
|
||||
examRound:
|
||||
"การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
|
||||
examOrder: 3,
|
||||
fiscalYear: 2023,
|
||||
numberofCandidates: 8,
|
||||
examType: 1,
|
||||
accountExpirationDate: "2023-02-28T14:47:04.1785384Z",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
examRound:
|
||||
"การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
|
||||
examOrder: 2,
|
||||
fiscalYear: 2023,
|
||||
numberofCandidates: 12,
|
||||
examType: 1,
|
||||
accountExpirationDate: "2023-02-28T14:47:04.1785384Z",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
examRound:
|
||||
"การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
|
||||
examOrder: 2,
|
||||
fiscalYear: 2023,
|
||||
numberofCandidates: 20,
|
||||
examType: 1,
|
||||
accountExpirationDate: "2023-01-31T14:47:04.1785384Z",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
examRound:
|
||||
"การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
|
||||
examOrder: 2,
|
||||
fiscalYear: 2022,
|
||||
numberofCandidates: 16,
|
||||
examType: 2,
|
||||
accountExpirationDate: "2023-11-30T14:47:04.1785384Z",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
examRound:
|
||||
"การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
|
||||
examOrder: 1,
|
||||
fiscalYear: 2021,
|
||||
numberofCandidates: 20,
|
||||
examType: 2,
|
||||
accountExpirationDate: "2024-05-21T14:47:04.1785384Z",
|
||||
},
|
||||
const rows = ref<QTableProps["rows"]>([]);
|
||||
// const yearValue = ref<number>(0); // เพิ่มตัวแปรในโมดูล
|
||||
|
||||
// let OriginalData = ref<FormPlacementMainData[]>([]);
|
||||
// let UpdataData = ref<FormPlacementMainData[]>([]);
|
||||
const searchYear = ref();
|
||||
const yearOptions = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
|
||||
|
||||
const dataPlacement = ref<any>([]);
|
||||
const visibleColumns = ref([
|
||||
"id",
|
||||
"examRound",
|
||||
"examOrder",
|
||||
"examOrder",
|
||||
"fiscalYear",
|
||||
"numberOfCandidates",
|
||||
"examTypeName",
|
||||
"accountStartDate",
|
||||
"accountExpirationDate",
|
||||
]);
|
||||
|
||||
let OriginalData = ref<FormPlacementMainData[]>([]);
|
||||
let UpdataData = ref<FormPlacementMainData[]>([]);
|
||||
|
||||
const OriginalDataFetch = async () => {
|
||||
// API
|
||||
// await http
|
||||
// .get(config.API.// ตัวอย่าง)
|
||||
// .then((res: any) => {
|
||||
// })
|
||||
// .catch((e: any) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(async () => {
|
||||
// });
|
||||
await DataStore.DataMain(rows.value);
|
||||
OriginalData.value = await DataStore.DataMainOrig;
|
||||
UpdataData.value = OriginalData.value;
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await OriginalDataFetch();
|
||||
fiscalYearFilter();
|
||||
examTimeFilter();
|
||||
examTypeFilter();
|
||||
await expiredAccountFilter();
|
||||
searchFilterTable();
|
||||
await fetchYearOptions();
|
||||
});
|
||||
const fetchPlacementData = async (val: number) => {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.MainDetail(val))
|
||||
.then((res) => {
|
||||
dataPlacement.value = res.data.result;
|
||||
DataStore.DataMainOrig = dataPlacement.value;
|
||||
rows.value = DataStore.DataMainOrig;
|
||||
examTypeFilter();
|
||||
examTimeFilter();
|
||||
expiredAccountFilter();
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
const fetchYearOptions = async () => {
|
||||
http
|
||||
.get(config.API.yearOptions())
|
||||
.then((res) => {
|
||||
const response = res.data.result;
|
||||
yearOptions.push(...response);
|
||||
const maxNumber = yearOptions.reduce((max: any, e: any) => {
|
||||
return e.id > max ? e.id : max;
|
||||
}, "");
|
||||
searchYear.value = maxNumber;
|
||||
DataStore.DataMainYearSet(searchYear.value);
|
||||
// DataStore.DataMainYear = yearOptions.value;
|
||||
fetchPlacementData(searchYear.value);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
});
|
||||
};
|
||||
const filterYear = () => {
|
||||
console.log("searchYear", searchYear.value);
|
||||
fetchPlacementData(searchYear.value);
|
||||
};
|
||||
|
||||
// ดูรายการสอบแข่งขัน หน้าต่อไป
|
||||
const redirectToPage = (id?: number) => {
|
||||
// router.push({ name: 'placementDetail'});
|
||||
router.push(`/placement/detail`);
|
||||
const redirectToPage = (examId?: number) => {
|
||||
router.push(`/placement/pass/${examId}`);
|
||||
};
|
||||
|
||||
// เลือกปีงบประมาณ
|
||||
const fiscalyear = ref<number | null>(0);
|
||||
const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
|
||||
const addedfiscalYearValues: number[] = [];
|
||||
const fiscalYearFilter = async () => {
|
||||
// API
|
||||
// await http
|
||||
// .get(config.API.// ตัวอย่าง)
|
||||
// .then((res: any) => {
|
||||
// DataStore.DataMainYearSet(rows.value);
|
||||
// fiscalyearOP.value = DataStore.DataMainYearGet;
|
||||
// })
|
||||
// .catch((e: any) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(async () => {
|
||||
// });
|
||||
for (let data of OriginalData.value) {
|
||||
const year = data.fiscalYear + 543;
|
||||
|
||||
if (fiscalyear.value === null || year > fiscalyear.value) {
|
||||
fiscalyear.value = year;
|
||||
}
|
||||
|
||||
if (!addedfiscalYearValues.includes(year)) {
|
||||
fiscalyearOP.push({ id: year, name: year.toString() });
|
||||
addedfiscalYearValues.push(year);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// เลือกปีงบประมาณตาม API
|
||||
const searchfiscalyear = () => {
|
||||
console.log("Input value changed:", fiscalyear.value);
|
||||
// API
|
||||
// await http
|
||||
// .get(config.API.// ตัวอย่าง)
|
||||
// .then((res: any) => {
|
||||
// })
|
||||
// .catch((e: any) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(async () => {
|
||||
// });
|
||||
};
|
||||
|
||||
// ค้นหาในตาราง
|
||||
//-------------------|ค้นหาในตาราง|-----------------//
|
||||
const filterKeyword = ref<string>("");
|
||||
const filterRef = ref<any>(null);
|
||||
const resetFilter = () => {
|
||||
|
|
@ -234,63 +178,64 @@ const resetFilter = () => {
|
|||
filterRef.value.focus();
|
||||
};
|
||||
|
||||
const attrs = ref<any>(useAttrs());
|
||||
const visibleColumns = ref<string[]>([
|
||||
"id",
|
||||
"examRound",
|
||||
"examOrder",
|
||||
"fiscalYear",
|
||||
"numberofCandidates",
|
||||
"examType",
|
||||
"accountExpirationDate",
|
||||
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
|
||||
//-------------------|ครั้งที่สอบ|------------------------------//
|
||||
const examTime = ref<number | string>("all");
|
||||
const examTimeOP = reactive<DataOption1[]>([{ id: "all", name: "ทั้งหมด" }]);
|
||||
const addedExamTimeValues: Set<number> = new Set();
|
||||
|
||||
// ครั้งที่สอบ
|
||||
const examTime = ref<number | null>(null);
|
||||
const examTimeOP = ref<number[]>([]);
|
||||
const examTimeFilter = async () => {
|
||||
for (let data of OriginalData.value) {
|
||||
if (!examTimeOP.value.includes(data.examOrder)) {
|
||||
examTimeOP.value.push(data.examOrder);
|
||||
// examTimeOP.push({ id: "all", name: "ทั้งหมด" });
|
||||
for (const data of dataPlacement.value) {
|
||||
const examOrder = data.examOrder;
|
||||
if (examOrder !== null && !addedExamTimeValues.has(examOrder)) {
|
||||
examTimeOP.push({ id: examOrder.toString(), name: examOrder.toString() });
|
||||
addedExamTimeValues.add(examOrder);
|
||||
}
|
||||
}
|
||||
examTimeOP.value.sort((a, b) => a - b); // เรียงลำดับ
|
||||
examTimeOP.sort((a, b) => {
|
||||
if (a.id === "all") return -1; // ให้ตัวเลือก "ทั้งหมด" อยู่ด้านหน้า
|
||||
if (b.id === "all") return 1;
|
||||
return Number(a.id) - Number(b.id);
|
||||
}); // เรียงลำดับตาม id ที่แปลงเป็นตัวเลข
|
||||
};
|
||||
|
||||
// ประเภทการสอบ
|
||||
const examType = ref<number | null>(0);
|
||||
const examTypeOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
|
||||
const addedexamTypeValues: number[] = [];
|
||||
const examTypeFilter = async () => {
|
||||
for (let data of OriginalData.value) {
|
||||
const examTypeValue = data.examType;
|
||||
if (examTypeValue == 1 && !addedexamTypeValues.includes(1)) {
|
||||
examTypeOP.push({ id: 1, name: "คัดเลือก" });
|
||||
addedexamTypeValues.push(1);
|
||||
} else if (examTypeValue == 2 && !addedexamTypeValues.includes(2)) {
|
||||
examTypeOP.push({ id: 2, name: "สอบแข่งขัน" });
|
||||
addedexamTypeValues.push(2);
|
||||
const examType = ref<string | null>("all");
|
||||
const examTypeOP = ref<DataOption1[]>([{ id: "all", name: "ทั้งหมด" }]);
|
||||
const addedExamTypeValues: Set<string> = new Set();
|
||||
const examTypeFilter = () => {
|
||||
dataPlacement.value.forEach((item: any) => {
|
||||
const examTypeName = item.examTypeName;
|
||||
const examTypeValue = item.examTypeValue;
|
||||
if (examTypeName && !addedExamTypeValues.has(examTypeName)) {
|
||||
examTypeOP.value.push({
|
||||
id: examTypeValue,
|
||||
name: examTypeName,
|
||||
});
|
||||
addedExamTypeValues.add(examTypeName);
|
||||
}
|
||||
});
|
||||
};
|
||||
//--------------|ฟิลเตอร์|--------------------------------------//
|
||||
const searchFilterTable = async () => {
|
||||
if (examType.value !== undefined && examType.value !== null) {
|
||||
await DataStore.DataUpdateMain(
|
||||
examTime.value,
|
||||
examType.value,
|
||||
expiredAccount.value
|
||||
);
|
||||
rows.value = DataStore.DataMainUpdate;
|
||||
}
|
||||
};
|
||||
|
||||
const searchFilterTable = async () => {
|
||||
// console.log('Input value changed:', examTime.value, examType.value, expiredAccount.value);
|
||||
await DataStore.DataUpdateMain(
|
||||
examTime.value,
|
||||
examType.value,
|
||||
expiredAccount.value
|
||||
);
|
||||
UpdataData.value = DataStore.DataMainUpdate;
|
||||
};
|
||||
|
||||
// บัญชีหมดอายุ
|
||||
//----------------|บัญชีหมดอายุ|-----------------------------//
|
||||
const expiredAccount = ref<boolean>(false);
|
||||
const expiredAccountFilter = async () => {
|
||||
const currentDate = new Date();
|
||||
const updatedRows = OriginalData.value.map((data) => {
|
||||
let expirationDate = new Date(data.accountExpirationDate);
|
||||
let isExpired = expirationDate < currentDate;
|
||||
// const currentDate = new Date();
|
||||
const updatedRows = dataPlacement.value.map((data: any) => {
|
||||
// let expirationDate = new Date(data.accountExpirationDate);
|
||||
// let isExpired = currentDate > expirationDate;
|
||||
let isExpired = data.isExpired == expiredAccount;
|
||||
|
||||
return { ...data, isExpired };
|
||||
});
|
||||
|
|
@ -298,13 +243,13 @@ const expiredAccountFilter = async () => {
|
|||
};
|
||||
|
||||
const paging = ref<boolean>(true);
|
||||
const pagination = ref({
|
||||
sortBy: "desc",
|
||||
const pagination = ref({
|
||||
sortBy: "accountStartDate",
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
});
|
||||
const paginationLabel = (start: string, end: string, total: string) => {
|
||||
const paginationLabel = (start: number, end: number, total: number) => {
|
||||
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
|
||||
else return start + "-" + end + " ใน " + total;
|
||||
};
|
||||
|
|
@ -315,16 +260,16 @@ const paginationLabel = (start: string, end: string, total: string) => {
|
|||
รายการสอบแข่งขัน / คัดเลือก
|
||||
</div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<q-select
|
||||
class="col-xs-12 col-sm-3 col-md-2"
|
||||
v-model="fiscalyear"
|
||||
v-model="searchYear"
|
||||
label="ปีงบประมาณ"
|
||||
dense
|
||||
emit-value
|
||||
map-options
|
||||
:options="fiscalyearOP"
|
||||
:options="yearOptions"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
lazy-rules
|
||||
|
|
@ -333,7 +278,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
|
|||
:borderless="false"
|
||||
:outlined="true"
|
||||
:hide-dropdown-icon="false"
|
||||
@update:model-value="searchfiscalyear"
|
||||
@update:model-value="filterYear"
|
||||
/>
|
||||
<q-space />
|
||||
<q-input
|
||||
|
|
@ -423,15 +368,14 @@ const paginationLabel = (start: string, end: string, total: string) => {
|
|||
<div class="col-12">
|
||||
<q-table
|
||||
ref="table"
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:rows="UpdataData"
|
||||
:filter="filterKeyword"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
class="custom-header-table"
|
||||
v-bind="attrs"
|
||||
:visible-columns="visibleColumns"
|
||||
:pagination-label="paginationLabel"
|
||||
v-model:pagination="pagination"
|
||||
|
|
@ -454,7 +398,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
|
|||
@click="redirectToPage(props.row.id)"
|
||||
>
|
||||
<q-td key="id" :props="props">
|
||||
{{ props.row.id }}
|
||||
{{ props.rowIndex + 1 }}
|
||||
</q-td>
|
||||
<q-td key="examRound" :props="props">
|
||||
{{ props.row.examRound }}
|
||||
|
|
@ -463,16 +407,19 @@ const paginationLabel = (start: string, end: string, total: string) => {
|
|||
{{ props.row.examOrder }}
|
||||
</q-td>
|
||||
<q-td key="fiscalYear" :props="props">
|
||||
{{ props.row.fiscalYear + 543 }}
|
||||
{{ props.row.fiscalYear }}
|
||||
</q-td>
|
||||
<q-td key="numberofCandidates" :props="props">
|
||||
{{ props.row.numberofCandidates }}
|
||||
<q-td key="numberOfCandidates" :props="props">
|
||||
{{ props.row.numberOfCandidates }}
|
||||
</q-td>
|
||||
<q-td key="examType" :props="props">
|
||||
{{ props.row.examType == 1 ? "คัดเลือก" : "สอบแข่งขัน" }}
|
||||
<q-td key="examTypeName" :props="props">
|
||||
{{ props.row.examTypeName }}
|
||||
</q-td>
|
||||
<q-td key="accountStartDate" :props="props">
|
||||
{{ date2Thai(props.row.accountStartDate) }}
|
||||
</q-td>
|
||||
<q-td key="accountExpirationDate" :props="props">
|
||||
{{ textDate(props.row.accountExpirationDate) }}
|
||||
{{ date2Thai(props.row.accountExpirationDate) }}
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ const step04 = defineAsyncComponent(
|
|||
);
|
||||
|
||||
const router = useRouter();
|
||||
const step = ref<number>(4);
|
||||
const step = ref<number>(1);
|
||||
const stepper = ref<QStepper>();
|
||||
|
||||
const nextStep = () => {
|
||||
|
|
|
|||
|
|
@ -325,7 +325,7 @@
|
|||
round
|
||||
color="public"
|
||||
icon="mdi-content-save-outline"
|
||||
@click="next"
|
||||
@click="clickClose"
|
||||
>
|
||||
<q-tooltip>บันทึก</q-tooltip>
|
||||
</q-btn>
|
||||
|
|
|
|||
|
|
@ -22,15 +22,11 @@
|
|||
<q-menu>
|
||||
<q-list style="min-width: 150px">
|
||||
<q-item clickable v-close-popup>
|
||||
<q-item-section avatar
|
||||
><q-icon color="red" name="mdi-file-pdf"
|
||||
/></q-item-section>
|
||||
<q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
|
||||
<q-item-section>ไฟล์ .PDF</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-close-popup>
|
||||
<q-item-section avatar
|
||||
><q-icon color="blue" name="mdi-file-word"
|
||||
/></q-item-section>
|
||||
<q-item-section avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
|
||||
<q-item-section>ไฟล์ .docx</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
|
|
@ -51,84 +47,82 @@
|
|||
<q-menu>
|
||||
<q-list style="min-width: 150px">
|
||||
<q-item clickable v-close-popup>
|
||||
<q-item-section avatar
|
||||
><q-icon color="red" name="mdi-file-pdf"
|
||||
/></q-item-section>
|
||||
<q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
|
||||
<q-item-section>ไฟล์ .PDF</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-close-popup>
|
||||
<q-item-section avatar
|
||||
><q-icon color="green-7" name="mdi-file-excel"
|
||||
/></q-item-section>
|
||||
<q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
|
||||
<q-item-section>ไฟล์ .xls</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</div>
|
||||
<q-space />
|
||||
<q-btn
|
||||
class="text-dark"
|
||||
flat
|
||||
dense
|
||||
icon="mdi-fullscreen"
|
||||
color="add"
|
||||
@click="dialog = true"
|
||||
/>
|
||||
</div>
|
||||
<q-separator style="margin-top: -1px; z-index: 1" />
|
||||
<q-separator style="margin-top: -1px; z-index: 1;" />
|
||||
<q-card bordered class="card-pdf q-ma-md q-pa-md">
|
||||
<div class="justify-between items-center align-center q-pb-sm row">
|
||||
<q-btn
|
||||
class="text-dark bg-grey-4"
|
||||
flat
|
||||
dense
|
||||
@click="page = page > 1 ? page - 1 : page"
|
||||
<div
|
||||
class="justify-between items-center align-center q-pb-sm row"
|
||||
>
|
||||
<q-icon name="mdi-chevron-left" />
|
||||
</q-btn>
|
||||
<q-btn
|
||||
class="text-dark bg-grey-4"
|
||||
flat
|
||||
dense
|
||||
@click="page = page > 1 ? page - 1 : page"
|
||||
>
|
||||
<q-icon name="mdi-chevron-left" />
|
||||
</q-btn>
|
||||
|
||||
<span class="body-2 grey--text">
|
||||
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
||||
</span>
|
||||
<span class="body-2 grey--text">
|
||||
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
||||
</span>
|
||||
|
||||
<q-btn
|
||||
class="text-dark bg-grey-4"
|
||||
flat
|
||||
dense
|
||||
@click="page = page < numOfPages ? page + 1 : page"
|
||||
<q-btn
|
||||
class="text-dark bg-grey-4"
|
||||
flat
|
||||
dense
|
||||
@click="page = page < numOfPages ? page + 1 : page"
|
||||
>
|
||||
<q-icon name="mdi-chevron-right" />
|
||||
</q-btn>
|
||||
</div>
|
||||
<div class="pdfWidth">
|
||||
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
|
||||
<!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
|
||||
</div>
|
||||
<div
|
||||
class="justify-between items-center align-center q-pt-sm row"
|
||||
>
|
||||
<q-icon name="mdi-chevron-right" />
|
||||
</q-btn>
|
||||
</div>
|
||||
<div class="pdfWidth">
|
||||
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
|
||||
<!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
|
||||
</div>
|
||||
<div class="justify-between items-center align-center q-pt-sm row">
|
||||
<q-btn
|
||||
class="text-dark bg-grey-4"
|
||||
flat
|
||||
dense
|
||||
@click="page = page > 1 ? page - 1 : page"
|
||||
>
|
||||
<q-icon name="mdi-chevron-left" />
|
||||
</q-btn>
|
||||
<q-btn
|
||||
class="text-dark bg-grey-4"
|
||||
flat
|
||||
dense
|
||||
@click="page = page > 1 ? page - 1 : page"
|
||||
>
|
||||
<q-icon name="mdi-chevron-left" />
|
||||
</q-btn>
|
||||
|
||||
<span class="body-2 grey--text">
|
||||
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
||||
</span>
|
||||
<span class="body-2 grey--text">
|
||||
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
||||
</span>
|
||||
|
||||
<q-btn
|
||||
class="text-dark bg-grey-4"
|
||||
flat
|
||||
dense
|
||||
@click="page = page < numOfPages ? page + 1 : page"
|
||||
>
|
||||
<q-icon name="mdi-chevron-right" />
|
||||
</q-btn>
|
||||
</div>
|
||||
<q-btn
|
||||
class="text-dark bg-grey-4"
|
||||
flat
|
||||
dense
|
||||
@click="page = page < numOfPages ? page + 1 : page"
|
||||
>
|
||||
<q-icon name="mdi-chevron-right" />
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-card>
|
||||
<!-- <div class="card-pdf q-ma-md q-pa-md" v-if="tab == 'main'">
|
||||
<pdf-viewer v-model:PDFV="vuePDFRef" />
|
||||
</div> -->
|
||||
<!-- <div class="card-pdf q-ma-md q-pa-md" v-else>
|
||||
<pdf-viewer v-model:PDFV="vuePDFRef" />
|
||||
</div> -->
|
||||
<!-- <pdf-viewer /> -->
|
||||
</template>
|
||||
|
||||
<template v-slot:separator>
|
||||
|
|
@ -281,21 +275,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="flex justify-around">
|
||||
<q-btn
|
||||
unelevated
|
||||
label="ออกคำสั่ง"
|
||||
:color="validateForm() ? 'public' : 'grey'"
|
||||
:disable="!validateForm()"
|
||||
/>
|
||||
<q-btn
|
||||
class="text-dark"
|
||||
unelevated
|
||||
label="ส่งไปลงนาม"
|
||||
color="grey"
|
||||
disable
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-form>
|
||||
</template>
|
||||
|
|
@ -326,94 +305,6 @@
|
|||
<q-tooltip>ต่อไป</q-tooltip>
|
||||
</q-btn> -->
|
||||
</div>
|
||||
|
||||
<q-dialog
|
||||
v-model="dialog"
|
||||
persistent
|
||||
:maximized="true"
|
||||
transition-show="slide-up"
|
||||
transition-hide="slide-down"
|
||||
>
|
||||
<q-card class="bg-white text-white">
|
||||
<!-- <q-bar>
|
||||
<q-space />
|
||||
|
||||
<q-btn dense flat icon="close" v-close-popup>
|
||||
<q-tooltip>ปิดหน้าต่าง</q-tooltip>
|
||||
</q-btn>
|
||||
</q-bar> -->
|
||||
|
||||
<div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
|
||||
<q-btn
|
||||
icon="close"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
style="color: #ff8080; background-color: #ffdede"
|
||||
size="12px"
|
||||
v-close-popup
|
||||
/>
|
||||
</div>
|
||||
<q-card-section bordered class="card-pdf q-ma-md q-pa-md">
|
||||
<div class="justify-between items-center align-center q-pb-sm row">
|
||||
<q-btn
|
||||
class="text-dark bg-grey-4"
|
||||
flat
|
||||
dense
|
||||
@click="page = page > 1 ? page - 1 : page"
|
||||
>
|
||||
<q-icon name="mdi-chevron-left" />
|
||||
</q-btn>
|
||||
|
||||
<span class="body-2 grey--text text-black">
|
||||
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
||||
</span>
|
||||
|
||||
<q-btn
|
||||
class="text-dark bg-grey-4"
|
||||
flat
|
||||
dense
|
||||
@click="page = page < numOfPages ? page + 1 : page"
|
||||
>
|
||||
<q-icon name="mdi-chevron-right" />
|
||||
</q-btn>
|
||||
</div>
|
||||
<div class="pdfWidth">
|
||||
<VuePDF
|
||||
ref="vuePDFRef"
|
||||
:pdf="pdfSrc"
|
||||
:page="page"
|
||||
fit-parent
|
||||
:scale="0.1"
|
||||
/>
|
||||
<!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
|
||||
</div>
|
||||
<div class="justify-between items-center align-center q-pt-sm row">
|
||||
<q-btn
|
||||
class="text-dark bg-grey-4"
|
||||
flat
|
||||
dense
|
||||
@click="page = page > 1 ? page - 1 : page"
|
||||
>
|
||||
<q-icon name="mdi-chevron-left" />
|
||||
</q-btn>
|
||||
|
||||
<span class="body-2 grey--text text-black">
|
||||
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
||||
</span>
|
||||
|
||||
<q-btn
|
||||
class="text-dark bg-grey-4"
|
||||
flat
|
||||
dense
|
||||
@click="page = page < numOfPages ? page + 1 : page"
|
||||
>
|
||||
<q-icon name="mdi-chevron-right" />
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
|
@ -426,8 +317,6 @@ import { useCounterMixin } from "@/stores/mixin";
|
|||
const mixin = useCounterMixin();
|
||||
const { date2Thai } = mixin;
|
||||
|
||||
const dialog = ref<boolean>(false);
|
||||
|
||||
// onUnmounted(() => {
|
||||
// window.removeEventListener("resize", (e: any) => {
|
||||
// myEventHandler(e);
|
||||
|
|
|
|||
|
|
@ -1,32 +1,74 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { defineAsyncComponent } from "@vue/runtime-core";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useRouter ,useRoute} from "vue-router";
|
||||
import cardTop from "@/modules/05_placement/components/pass/StatCard.vue";
|
||||
import keycloak from "@/plugins/keycloak";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useCounterMixin } from "@/stores/mixin"
|
||||
import { useQuasar } from "quasar"
|
||||
import { usePlacementDataStore } from "@/modules/05_placement/store";
|
||||
|
||||
const DataStore = usePlacementDataStore();
|
||||
|
||||
const $q = useQuasar
|
||||
const mixin = useCounterMixin()
|
||||
const { messageError } = mixin
|
||||
let roleAdmin = ref<boolean>(false);
|
||||
|
||||
const router = useRouter();
|
||||
const year = ref<string>("2566");
|
||||
const round = ref<string>("1");
|
||||
const title = ref<string>("การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ");
|
||||
const route = useRoute();
|
||||
const examId = route.params.examId;
|
||||
const year = ref<string>("");
|
||||
const round = ref<string>("");
|
||||
const title = ref<string>("");
|
||||
const examData = ref<any>();
|
||||
const AddTablePosition = defineAsyncComponent(
|
||||
() => import("@/modules/05_placement/components/pass/Table.vue")
|
||||
);
|
||||
const stat = ref<any>({
|
||||
total: 5,
|
||||
unContain: 1,
|
||||
prepareContain: 3,
|
||||
contain: 1,
|
||||
total: 0,
|
||||
unContain: 0,
|
||||
prepareContain: 0,
|
||||
contain: 0,
|
||||
disclaim: 0,
|
||||
});
|
||||
|
||||
const getStat = async () => {
|
||||
const examIdString = Array.isArray(examId) ? examId[0] : examId;
|
||||
await http
|
||||
.get(config.API.getStatCard(examIdString))
|
||||
.then((res) =>{
|
||||
const statCard = res.data.result;
|
||||
// อัปเดตค่าในตัวแปร stat
|
||||
stat.value = {
|
||||
total: statCard.total,
|
||||
unContain: statCard.unContain,
|
||||
prepareContain: statCard.prepareContain,
|
||||
contain: statCard.contain,
|
||||
disclaim: statCard.disclaim,
|
||||
};
|
||||
|
||||
console.log("🚀 ~ file: Table.vue:96 ~ getStatCard ~ data:", statCard);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
examData.value = await DataStore.DataMainOrig.find((x: any) => x.id == examId);
|
||||
// console.log("DataStore===>", DataStore.DataMainOrig.find((x: any) => x.id == examId))
|
||||
title.value = examData.value.examRound;
|
||||
round.value = examData.value.examOrder;
|
||||
year.value = examData.value.fiscalYear;
|
||||
|
||||
await getStat()
|
||||
if (keycloak.tokenParsed != null) {
|
||||
roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row">
|
||||
|
|
@ -59,7 +101,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
|
||||
<div>
|
||||
<AddTablePosition class="q-pa-none" />
|
||||
<AddTablePosition :statCard="getStat" class="q-pa-none" @get-stat="getStat"/>
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -29,9 +29,9 @@ const emit = defineEmits([
|
|||
const updateEdit = (value: Boolean) => {
|
||||
emit("update:editvisible", value);
|
||||
};
|
||||
const cancel = async () => {
|
||||
props.cancel();
|
||||
};
|
||||
// const cancel = async () => {
|
||||
// props.cancel();
|
||||
// };
|
||||
const edit = async () => {
|
||||
updateEdit(!props.editvisible);
|
||||
props.edit();
|
||||
|
|
|
|||
503
src/modules/05_placement/components/pass/OrgTree.vue
Normal file
503
src/modules/05_placement/components/pass/OrgTree.vue
Normal file
|
|
@ -0,0 +1,503 @@
|
|||
<script setup lang="ts">
|
||||
import { useQuasar, QForm } from "quasar";
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
|
||||
import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
||||
const { date2Thai, hideLoader, messageError, showLoader, success } = mixin; //ฟังก์ชันกลางที่เรียกใช้
|
||||
|
||||
const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
|
||||
const noData = ref<string>("ไม่พบข้อมูลผังโครงสร้าง");
|
||||
|
||||
const checkValidate = ref<boolean>(false);
|
||||
const myFormPosition = ref<any>();
|
||||
const selected = ref<string>("")
|
||||
|
||||
// Set form field
|
||||
let dataForm = reactive({
|
||||
personalId: "",
|
||||
containDate: new Date(),
|
||||
posNoId: "",
|
||||
positionId: "",
|
||||
positionLevelId: "",
|
||||
positionLineId: "",
|
||||
positionPathSideId: "",
|
||||
positionTypeId: "",
|
||||
salaryAmount: null,
|
||||
mouthSalaryAmount: null,
|
||||
positionSalaryAmount: null,
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
loadTreeData();
|
||||
})
|
||||
|
||||
// โหลดข้อมูลโครงสร้างจาก json
|
||||
const treeData = ref<Array<any>>([]);
|
||||
const loadTreeData = async () => {
|
||||
await http
|
||||
.get(config.API.orgTree)
|
||||
.then((res: any) => {
|
||||
treeData.value = res.data;
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
const search = ref<string>("");
|
||||
//reset Tree Filter
|
||||
const filterRef = ref<any>(null)
|
||||
const resetFilter = () => {
|
||||
search.value = "";
|
||||
filterRef.value.focus();
|
||||
};
|
||||
|
||||
const props = defineProps({
|
||||
personalId: String,
|
||||
modal: Boolean,
|
||||
close: {
|
||||
type: Function,
|
||||
default: () => console.log('close modal'),
|
||||
},
|
||||
});
|
||||
|
||||
const myFilterMethod = (node: any, filter: string) => {
|
||||
const filt = filter;
|
||||
|
||||
return ((node.name && node.name == null) || !node.name) && ((node.organizationName && node.organizationName.indexOf(filt) > -1) ||
|
||||
(node.positionNum && node.positionNum.indexOf(filt) > -1) ||
|
||||
(node.positionName && node.positionName.indexOf(filt) > -1) ||
|
||||
(node.governmentCode &&
|
||||
node.governmentCode.toString().indexOf(filt) > -1) ||
|
||||
(node.agency && node.agency.indexOf(filt) > -1) ||
|
||||
(node.government && node.government.indexOf(filt) > -1) ||
|
||||
(node.department && node.department.indexOf(filt) > -1) ||
|
||||
(node.pile && node.pile.indexOf(filt) > -1) ||
|
||||
(node.organizationShortName &&
|
||||
node.organizationShortName.indexOf(filt) > -1) ||
|
||||
(node.positionSideName && node.positionSideName.indexOf(filt) > -1) ||
|
||||
(node.executivePosition && node.executivePosition.indexOf(filt) > -1) ||
|
||||
(node.executivePositionSide &&
|
||||
node.executivePositionSide.indexOf(filt) > -1) ||
|
||||
(node.positionLevel && node.positionLevel.indexOf(filt) > -1))
|
||||
}
|
||||
|
||||
const validateData = async () => {
|
||||
checkValidate.value = true;
|
||||
await myFormPosition.value.validate().then((result: boolean) => {
|
||||
if (result == false) {
|
||||
checkValidate.value = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const saveAppoint = async () => {
|
||||
myFormPosition.value.validate().then(async (result: boolean) => {
|
||||
if (result) {
|
||||
const dataAppoint = await {
|
||||
personalId: props.personalId,
|
||||
containDate: dataForm.containDate,
|
||||
posNoId: dataForm.posNoId,
|
||||
positionId: dataForm.positionId,
|
||||
positionLevelId: dataForm.positionLevelId,
|
||||
positionLineId: dataForm.positionLineId,
|
||||
positionPathSideId: dataForm.positionPathSideId,
|
||||
positionTypeId: dataForm.positionTypeId,
|
||||
salaryAmount: dataForm.salaryAmount,
|
||||
mouthSalaryAmount: dataForm.mouthSalaryAmount,
|
||||
positionSalaryAmount: dataForm.positionSalaryAmount,
|
||||
};
|
||||
// console.log("save appoint===>", dataAppoint);
|
||||
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.placementPass(), dataAppoint)
|
||||
.then((res) => {
|
||||
console.log("respone=>", res)
|
||||
success($q, "บันทึกสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await closeAndClear()
|
||||
await resetFilter()
|
||||
hideLoader()
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const editDataStatus = ref<boolean>(false);
|
||||
const clickEditRow = () => {
|
||||
editDataStatus.value = true;
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
if (editDataStatus.value == true) {
|
||||
$q.dialog({
|
||||
title: `ข้อมูลมีการแก้ไข`,
|
||||
message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
|
||||
cancel: "ยกเลิก",
|
||||
ok: "ยืนยัน",
|
||||
persistent: true,
|
||||
}).onOk(() => {
|
||||
editDataStatus.value = false;
|
||||
closeAndClear()
|
||||
});
|
||||
} else {
|
||||
closeAndClear()
|
||||
}
|
||||
}
|
||||
|
||||
const closeAndClear = async () => {
|
||||
await props.close();
|
||||
editDataStatus.value = false;
|
||||
selected.value = ""
|
||||
dataForm.personalId = '';
|
||||
dataForm.containDate = new Date()
|
||||
dataForm.posNoId = ""
|
||||
dataForm.positionId = ""
|
||||
dataForm.positionLevelId = ""
|
||||
dataForm.positionLineId = ""
|
||||
dataForm.positionPathSideId = ""
|
||||
dataForm.positionTypeId = ""
|
||||
dataForm.salaryAmount = null
|
||||
dataForm.mouthSalaryAmount = null;
|
||||
dataForm.positionSalaryAmount = null
|
||||
}
|
||||
// ตำแหน่งเลขที่
|
||||
const posNoOptions = ref<Object[]>([{
|
||||
label: '',
|
||||
value: ''
|
||||
}]);
|
||||
// ตำแหน่ง
|
||||
const positionOptions = ref<Object[]>([{
|
||||
label: '',
|
||||
value: ''
|
||||
}]);
|
||||
// ด้าน/สาขา
|
||||
const positionPathSideOptions = ref<Object[]>([{
|
||||
label: '',
|
||||
value: ''
|
||||
}]);
|
||||
// ตำแหน่งประเภท
|
||||
const positionTypeOptions = ref<Object[]>([{
|
||||
label: '',
|
||||
value: ''
|
||||
}]);
|
||||
// สายงาน
|
||||
const positionLineOptions = ref<Object[]>([{
|
||||
label: '',
|
||||
value: ''
|
||||
}]);
|
||||
// ระดับ
|
||||
const positionLevelOptions = ref<Object[]>([{
|
||||
label: '',
|
||||
value: ''
|
||||
}]);
|
||||
|
||||
const selectedPosition = async (data: any) => {
|
||||
|
||||
if (data.name == null && selected.value != data.keyId) {
|
||||
console.log("selecteds", data)
|
||||
|
||||
editDataStatus.value = true;
|
||||
selected.value = data.keyId
|
||||
|
||||
// posNo Options
|
||||
posNoOptions.value = [{
|
||||
label: data.positionNum,
|
||||
value: data.positionNumId,
|
||||
}]
|
||||
dataForm.posNoId = data.positionNumId;
|
||||
|
||||
// position Options
|
||||
positionOptions.value = [{
|
||||
label: data.positionName,
|
||||
value: data.positionNameId,
|
||||
}]
|
||||
dataForm.positionId = data.positionNameId;
|
||||
|
||||
// positionPathSide Options
|
||||
let positionPathSideArr: any = [];
|
||||
if (data.positionSideNameObj != null) {
|
||||
data.positionSideNameObj.map((x: any) => {
|
||||
positionLevelsArr.push({
|
||||
label: x.Name,
|
||||
value: x.Id,
|
||||
})
|
||||
})
|
||||
positionPathSideOptions.value = positionPathSideArr;
|
||||
dataForm.positionPathSideId = positionPathSideArr.length > 1 || positionPathSideArr.length == 0 ? '' : positionPathSideArr[0].value;
|
||||
}
|
||||
|
||||
// positionType Options
|
||||
positionTypeOptions.value = [{
|
||||
label: data.positionType,
|
||||
value: data.positionTypeId,
|
||||
}]
|
||||
dataForm.positionTypeId = data.positionTypeId;
|
||||
|
||||
// positionLine Options
|
||||
positionLineOptions.value = [{
|
||||
label: data.positionLine,
|
||||
value: data.positionLineId,
|
||||
}]
|
||||
dataForm.positionLineId = data.positionLineId;
|
||||
|
||||
|
||||
// positionLevel Options
|
||||
let positionLevelsArr: any = [];
|
||||
if (data.positionLevelObj != null) {
|
||||
data.positionLevelObj.map((x: any) => {
|
||||
positionLevelsArr.push({
|
||||
label: x.Name,
|
||||
value: x.Id,
|
||||
})
|
||||
})
|
||||
positionLevelOptions.value = positionLevelsArr;
|
||||
dataForm.positionLevelId = positionLevelsArr.length > 1 || positionLevelsArr.length == 0 ? '' : positionLevelsArr[0].value;
|
||||
}
|
||||
|
||||
} else if (selected.value == data.keyId) {
|
||||
selected.value = '';
|
||||
dataForm.posNoId = "";
|
||||
dataForm.positionId = "";
|
||||
dataForm.positionLevelId = "";
|
||||
dataForm.positionLineId = "";
|
||||
dataForm.positionPathSideId = "";
|
||||
dataForm.positionTypeId = "";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="props.modal" persistent full-width>
|
||||
<q-card>
|
||||
<q-form ref="myFormPosition">
|
||||
<DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="closeModal" />
|
||||
<q-separator />
|
||||
<q-card-section class="q-pa-sm bg-grey-1">
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<div class="col-xs-12 col-sm-6 row">
|
||||
<q-card flat bordered class="fit q-pa-sm">
|
||||
<q-scroll-area visible style="height: 70vh">
|
||||
<q-input outlined dense ref="filterRef" v-model="search" placeholder="ค้นหา"
|
||||
class="q-mb-sm">
|
||||
<template v-slot:append>
|
||||
<q-icon name="mdi-magnify" />
|
||||
</template>
|
||||
</q-input>
|
||||
<div class="q-pa-sm q-gutter-sm">
|
||||
<q-tree no-transition dense :nodes="treeData" node-key="keyId" :filter="search"
|
||||
:no-results-label="notFound" :no-nodes-label="noData"
|
||||
:filter-method="myFilterMethod">
|
||||
|
||||
<template v-slot:header-organization="prop">
|
||||
<div class="col">
|
||||
<div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
|
||||
<!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
|
||||
<div class="text-weight-medium">
|
||||
{{ prop.node.organizationName }}
|
||||
</div>
|
||||
|
||||
<!--แสดง Total Count PositionNum-->
|
||||
<!-- <q-badge rounded color="grey-2" text-color="dark"
|
||||
:label="prop.node.totalPositionCount" /> -->
|
||||
<q-badge v-if="prop.node.totalPositionVacant > 0" rounded
|
||||
color="red" outline :label="prop.node.totalPositionVacant" />
|
||||
|
||||
<q-space />
|
||||
</div>
|
||||
<div class="col items-center q-px-xs q-pt-xs">
|
||||
<div class="text-weight-medium text-grey-7">
|
||||
{{ prop.node.governmentCode }}
|
||||
{{ prop.node.organizationShortName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:header-person="prop">
|
||||
<q-item clickable :active="selected == prop.node.keyId"
|
||||
@click="selectedPosition(prop.node)" :disable="prop.node.name != null"
|
||||
active-class="my-list-link text-primary text-weight-medium"
|
||||
class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list">
|
||||
<img v-if="prop.node.avatar == '' ||
|
||||
prop.node.avatar ==
|
||||
'https://cdn.quasar.dev/img/boy-avatar.png'
|
||||
" src="@/assets/avatar_user.jpg" class="col-xs-1 col-sm-2"
|
||||
style="width: 28px; height: 28px; border-radius: 50%" />
|
||||
<img v-else :src="prop.node.avatar" class="col-xs-1 col-sm-2"
|
||||
style="width: 28px; height: 28px; border-radius: 50%" />
|
||||
<!--=====ตำแหน่งว่าง สีแดง=====-->
|
||||
<div v-if="prop.node.name == null
|
||||
" class="q-px-sm text-weight-medium text-red">
|
||||
ว่าง
|
||||
</div>
|
||||
<!--=====หัวหน้า สีเขียว=====-->
|
||||
<div v-else-if="prop.node.positionLeaderFlag">
|
||||
<div class="q-px-sm text-weight-medium text-primary">
|
||||
{{ prop.node.name }}
|
||||
</div>
|
||||
</div>
|
||||
<!--=====ลูกน้อง สีปกติ=====-->
|
||||
<div v-else>
|
||||
<div class="q-px-sm text-weight-medium">
|
||||
{{ prop.node.name }}
|
||||
</div>
|
||||
</div>
|
||||
<!--ต่อท้ายชื่อคน แสดงสีปกติ-->
|
||||
<div class="q-pr-sm">
|
||||
{{ prop.node.positionName }}
|
||||
</div>
|
||||
<div class="q-pr-sm">
|
||||
{{ prop.node.positionNum }}
|
||||
</div>
|
||||
<div class="q-pr-sm">
|
||||
{{ prop.node.positionLevel }}
|
||||
</div>
|
||||
<q-icon v-if="prop.node.positionLeaderFlag" class="q-mr-sm" size="15px"
|
||||
color="primary" name="mdi-bookmark"></q-icon>
|
||||
|
||||
<q-space />
|
||||
</q-item>
|
||||
</template>
|
||||
|
||||
</q-tree>
|
||||
</div>
|
||||
</q-scroll-area>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<q-card flat bordered class="fit q-pa-sm">
|
||||
<q-scroll-area visible style="height: 70vh">
|
||||
<div class="row col-12 q-col-gutter-xs">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12"></div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<datepicker menu-class-name="modalfix" v-model="dataForm.containDate"
|
||||
:locale="'th'" autoApply :enableTimePicker="false" week-start="0">
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input class="full-width inputgreen cursor-pointer" outlined dense
|
||||
lazy-rules :model-value="date2Thai(new Date(dataForm.containDate))
|
||||
" :rules="[
|
||||
(val: string) =>
|
||||
!!val ||
|
||||
`${'วันที่รายงานตัว'}`,
|
||||
]" :label="`${'วันที่รายงานตัว'}`" hide-bottom-space>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer"
|
||||
style="color: var(--q-primary)">
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<q-space />
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-select class="full-width inputgreen cursor-pointer custom-input" outlined
|
||||
standout dense hide-bottom-space lazy-rules :options="posNoOptions"
|
||||
v-model="dataForm.posNoId" :label="`${'ตำแหน่งเลขที่'}`" map-options />
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-select outlined class="full-width inputgreen cursor-pointer custom-input"
|
||||
standout dense hide-bottom-space lazy-rules :options="positionOptions"
|
||||
v-model="dataForm.positionId" :label="`${'ตำแหน่ง'}`" map-options />
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-select outlined class="full-width inputgreen cursor-pointer custom-input"
|
||||
standout dense hide-bottom-space lazy-rules
|
||||
:options="positionPathSideOptions" v-model="dataForm.positionPathSideId"
|
||||
:label="`${'ด้าน/สาขา'}`" map-options />
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-select outlined class="full-width inputgreen cursor-pointer custom-input"
|
||||
standout dense hide-bottom-space lazy-rules :options="positionTypeOptions"
|
||||
v-model="dataForm.positionTypeId" :label="`${'ประเภทตำแหน่ง'}`"
|
||||
map-options />
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-select outlined class="full-width inputgreen cursor-pointer custom-input"
|
||||
standout dense hide-bottom-space lazy-rules :options="positionLineOptions"
|
||||
v-model="dataForm.positionLineId" :label="`${'สายงาน'}`" map-options />
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-select outlined class="full-width inputgreen cursor-pointer custom-input"
|
||||
standout dense lazy-rules :options="positionLevelOptions"
|
||||
v-model="dataForm.positionLevelId" :label="`${'ระดับ'}`" hide-bottom-space
|
||||
:rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]" emit-value
|
||||
map-options />
|
||||
</div>
|
||||
<div class="col-sx-12 col-sm-12 col-md-12">
|
||||
<q-separator inset size="2px" class="q-my-md" />
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-input outlined dense lazy-rules v-model="dataForm.salaryAmount"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
|
||||
:label="`${'เงินเดือน'}`" @update:modelValue="clickEditRow" type="number"
|
||||
hide-bottom-space />
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-input outlined dense lazy-rules v-model="dataForm.positionSalaryAmount"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
|
||||
]" :label="`${'เงินประจำตำแหน่ง'}`" @update:modelValue="clickEditRow"
|
||||
type="number" hide-bottom-space />
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<q-input outlined dense lazy-rules v-model="dataForm.mouthSalaryAmount" :rules="[
|
||||
(val) =>
|
||||
!!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
|
||||
]" :label="`${'เงินค่าตอบแทนรายเดือน'}`" @update:modelValue="clickEditRow"
|
||||
type="number" hide-bottom-space />
|
||||
</div>
|
||||
</div>
|
||||
</q-scroll-area>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator />
|
||||
<DialogFooter :editvisible="true" :validate="validateData" :save="saveAppoint"
|
||||
v-model:modalEdit="editDataStatus" />
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.q-tree__node-header {
|
||||
padding: 0px;
|
||||
margin-top: 0px;
|
||||
border-radius: 4px;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.my-list-link {
|
||||
color: rgb(118, 168, 222);
|
||||
border-radius: 5px;
|
||||
background: #a3d3fb48 !important;
|
||||
font-weight: 600;
|
||||
border: 1px solid rgba(175, 185, 196, 0.217);
|
||||
/* box-shadow: 1px 1px 7px 1px rgba(41, 95, 255, 0.15) !important; */
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,39 +1,40 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { ref, watch } from "vue";
|
||||
import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { CheckboxItem } from "@/modules/05_placement/interface/index/Main";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
||||
const modal = ref<boolean>();
|
||||
const { success } = mixin;
|
||||
const { success, showLoader, hideLoader, date2Thai, modalConfirm } = mixin;
|
||||
const save = ref<boolean>(true);
|
||||
|
||||
const props = defineProps({
|
||||
Modal: Boolean,
|
||||
close: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
getdetail: {
|
||||
type: Object,
|
||||
required: true,
|
||||
personalId: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
validate: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
});
|
||||
const rows = ref<any[]>([
|
||||
{
|
||||
university: props.getdetail.university || "-",
|
||||
degree: props.getdetail.degree || "-",
|
||||
major: props.getdetail.major || "-",
|
||||
graduation: "2022-01-01",
|
||||
},
|
||||
|
||||
]);
|
||||
const rows = ref<any[]>([
|
||||
]);
|
||||
//--------------------(แปลงวันที่เป็นไทย)------------------------------------//
|
||||
// const graduationDate = new Date(graduationExample);
|
||||
// rows.value[0].graduation = date2Thai(graduationDate, false, false);
|
||||
|
||||
//--------------------------------------------------------------------//
|
||||
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "university",
|
||||
|
|
@ -76,86 +77,112 @@ const columns = ref<QTableProps["columns"]>([
|
|||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
const myForm = ref<any>();
|
||||
const checkValidate = ref<boolean>(false);
|
||||
const selection = ref<number[]>([]);
|
||||
const myForm = ref<any>([]);
|
||||
const personalForm = ref<any>([]);
|
||||
const selection = ref<any>([]);
|
||||
|
||||
|
||||
const checkboxItems: CheckboxItem[] = [
|
||||
{ id: 1, label: "ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง" },
|
||||
{
|
||||
id: 2,
|
||||
label:
|
||||
"ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label:
|
||||
"ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น",
|
||||
},
|
||||
{ id: 4, label: "ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม" },
|
||||
{
|
||||
id: 5,
|
||||
label:
|
||||
"ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง",
|
||||
},
|
||||
{ id: 6, label: "ไม่เป็นบุคคลล้มละลาย" },
|
||||
{
|
||||
id: 7,
|
||||
label:
|
||||
"ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
label:
|
||||
"ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ",
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
label:
|
||||
"เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น",
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
label:
|
||||
"เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น",
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
label:
|
||||
"เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ",
|
||||
},
|
||||
];
|
||||
const $q = useQuasar();
|
||||
|
||||
function isRequired(val: any): boolean | string {
|
||||
return !!val || "กรุณาเลือกไฟล์เอกสารหลักฐาน";
|
||||
}
|
||||
const validateData = () => {
|
||||
const selectedIds = selection.value;
|
||||
const selectedItems = checkboxItems.filter((item) =>
|
||||
selectedIds.includes(item.id)
|
||||
);
|
||||
|
||||
watch(props, () => {
|
||||
if (props.Modal === true) {
|
||||
// console.log(props.getdetail);
|
||||
fetchData();
|
||||
}
|
||||
});
|
||||
|
||||
const validateData = () => {
|
||||
const selectedIds = personalForm.value.isProperty;
|
||||
|
||||
const selectedItems = personalForm.value.isProperty.filter(
|
||||
(item: any) => item.value === true
|
||||
// selectedIds.includes(item.value)
|
||||
);
|
||||
return (
|
||||
selectedItems.length > 0 && selectedItems.length === selectedIds.length
|
||||
selectedItems.length > 0 || selectedItems.length === selectedIds.length
|
||||
);
|
||||
};
|
||||
|
||||
const ClickSave = () => {
|
||||
const isValid = validateData();
|
||||
|
||||
if (isValid) {
|
||||
console.log(selection.value);
|
||||
console.log("rerer", props.Modal);
|
||||
props.close();
|
||||
props.validate();
|
||||
selection.value = [];
|
||||
// props.close();
|
||||
// props.validate();
|
||||
// putpersonalForm();
|
||||
modalConfirm(
|
||||
$q,
|
||||
"การยืนยัน",
|
||||
"ยืนยันการบันทึกการคัดกรองคุณสมบัติ",
|
||||
putpersonalForm
|
||||
);
|
||||
} else {
|
||||
success($q, "กรอกให้ครบ");
|
||||
console.log();
|
||||
}
|
||||
};
|
||||
const fetchData = async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.getDatapersonal(props.personalId))
|
||||
.then((res) => {
|
||||
personalForm.value = res.data.result;
|
||||
personalForm.value.education.map((e: any) => {
|
||||
rows.value.push({
|
||||
university: e.name,
|
||||
degree: e.degree,
|
||||
major: e.field,
|
||||
graduation: e.finishDate,
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log("e", e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
const formBmaofficer = (val: string) => {
|
||||
switch (val) {
|
||||
case "officer":
|
||||
return "ขรก.กทม. สามัญ";
|
||||
break;
|
||||
case "employee_perm":
|
||||
return "ลูกจ้างประจำ";
|
||||
break;
|
||||
case "employee_temp":
|
||||
return "ลูกจ้างชั่วคราว";
|
||||
break;
|
||||
default:
|
||||
"";
|
||||
}
|
||||
};
|
||||
|
||||
const close = async () => {
|
||||
props.close();
|
||||
selection.value = [];
|
||||
rows.value = [];
|
||||
};
|
||||
const putpersonalForm = async () => {
|
||||
await http
|
||||
.put(
|
||||
config.API.putProperty("0a846508-4932-40de-9a9e-5b519492217c"),
|
||||
personalForm.value.isProperty
|
||||
)
|
||||
.then((res) => {
|
||||
success($q, res.data.message);
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
})
|
||||
.finally(() => {
|
||||
props.close();
|
||||
props.validate();
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
|
|
@ -164,7 +191,7 @@ const close = async () => {
|
|||
<q-form ref="myForm">
|
||||
<div class="row">
|
||||
<DialogHeader
|
||||
:title="`รายละเอียดของ ${props.getdetail.fullName}`"
|
||||
:title="`รายละเอียดของ ${personalForm.fullName}`"
|
||||
@click="close"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -176,7 +203,10 @@ const close = async () => {
|
|||
<div class="row items-center q-pa-xs header-text">
|
||||
ข้อมูลทั่วไป
|
||||
<span class="check-officer"
|
||||
><q-icon name="mdi-check" /> ข้าราชการฯ กทม</span
|
||||
><q-icon
|
||||
name="mdi-check"
|
||||
v-if="personalForm.bmaofficer !== null && ''"
|
||||
/>{{ formBmaofficer(personalForm.bmaofficer) }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="row q-pa-xs">
|
||||
|
|
@ -186,10 +216,10 @@ const close = async () => {
|
|||
</div>
|
||||
<div class="col-4 sub-text">
|
||||
<div class="q-pb-md">
|
||||
{{ props.getdetail.profileID }}
|
||||
{{ personalForm.idCard }}
|
||||
</div>
|
||||
<div>
|
||||
{{ props.getdetail.dateOfBirth }}
|
||||
{{ date2Thai(personalForm.dateOfBirth) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2 header-sub-text">
|
||||
|
|
@ -198,10 +228,10 @@ const close = async () => {
|
|||
</div>
|
||||
<div class="col-3 sub-text">
|
||||
<div class="q-pb-md">
|
||||
{{ props.getdetail.fullName }}
|
||||
{{ personalForm.fullName }}
|
||||
</div>
|
||||
<div>
|
||||
{{ props.getdetail.gender }}
|
||||
{{ personalForm.gender }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -213,7 +243,7 @@ const close = async () => {
|
|||
<div class="row q-pa-xs">
|
||||
<div class="col-3 header-sub-text">ที่อยู่</div>
|
||||
<div class="col-9 sub-text">
|
||||
{{ props.getdetail.address }}
|
||||
{{ personalForm.address }}
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
|
@ -231,6 +261,7 @@ const close = async () => {
|
|||
virtual-scroll
|
||||
:virtual-scroll-sticky-size-start="48"
|
||||
dense
|
||||
hide-bottom
|
||||
>
|
||||
</q-table>
|
||||
</q-card>
|
||||
|
|
@ -252,31 +283,31 @@ const close = async () => {
|
|||
<div class="col-4 q-pa-xs">
|
||||
<div class="header-sub-text-exam-2">คะแนนที่ได้</div>
|
||||
<div class="sub-text-exam">
|
||||
{{ props.getdetail.scoreResult.scoreAFull }}
|
||||
{{ personalForm.pointTotalA }}
|
||||
</div>
|
||||
<div class="sub-text-exam">
|
||||
{{ props.getdetail.scoreResult.scoreBFull }}
|
||||
{{ personalForm.pointTotalB }}
|
||||
</div>
|
||||
<div class="sub-text-exam">
|
||||
{{ props.getdetail.scoreResult.scoreCFull }}
|
||||
{{ personalForm.pointTotalC }}
|
||||
</div>
|
||||
<div class="sub-text-exam">
|
||||
{{ props.getdetail.scoreResult.scoreSumFull }}
|
||||
{{ personalForm.pointTotal }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4 q-pa-xs header-sub-text-exam-2">
|
||||
<div class="header-sub-text-exam-2">ผลการสอบ</div>
|
||||
<div class="sub-text-exam">
|
||||
{{ props.getdetail.scoreResult.scoreA }}
|
||||
{{ personalForm.pointA }}
|
||||
</div>
|
||||
<div class="sub-text-exam">
|
||||
{{ props.getdetail.scoreResult.scoreB }}
|
||||
{{ personalForm.pointB }}
|
||||
</div>
|
||||
<div class="sub-text-exam">
|
||||
{{ props.getdetail.scoreResult.scoreC }}
|
||||
{{ personalForm.pointC }}
|
||||
</div>
|
||||
<div class="sub-text-exam">
|
||||
{{ props.getdetail.scoreResult.scoreSum }}
|
||||
{{ personalForm.point }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -292,10 +323,10 @@ const close = async () => {
|
|||
</div>
|
||||
<div class="col-5 sub-text-exam">
|
||||
<div class="q-pb-sm">
|
||||
{{ props.getdetail.scoreResult.examResult }}
|
||||
{{ personalForm.pass }}
|
||||
</div>
|
||||
<div class="q-pb-sm">{{ props.getdetail.number }}</div>
|
||||
<div class="q-pb-sm">{{ props.getdetail.examCount }}</div>
|
||||
<div class="q-pb-sm">{{ personalForm.examNumber }}</div>
|
||||
<div class="q-pb-sm">{{ personalForm.examRound }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -308,12 +339,16 @@ const close = async () => {
|
|||
<div class="col-12 row items-center q-pa-sm header-text">
|
||||
การคัดกรองคุณสมบัติ
|
||||
</div>
|
||||
<div v-for="item of checkboxItems" :key="item.id" class="q-pa-sm">
|
||||
<div
|
||||
v-for="(item, index) of personalForm.isProperty"
|
||||
:key="index"
|
||||
class="q-pa-sm"
|
||||
>
|
||||
<q-checkbox
|
||||
size="xs"
|
||||
v-model="selection"
|
||||
:val="item.id"
|
||||
:label="item.label"
|
||||
v-model="item.value"
|
||||
:val="item.value"
|
||||
:label="item.name"
|
||||
keep-color
|
||||
color="teal"
|
||||
:rules="[isRequired]"
|
||||
|
|
|
|||
|
|
@ -43,18 +43,12 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { ref, useAttrs } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useQuasar } from "quasar";
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
||||
const { dialogMessage } = mixin;
|
||||
const editvisible = ref<boolean>(false);
|
||||
const attrs = ref<any>(useAttrs());
|
||||
const paging = ref<boolean>(true);
|
||||
const table = ref<any>(null);
|
||||
const filterRef = ref<any>(null);
|
||||
const modalPublish = ref<boolean>(false);
|
||||
const modalDelete = ref<boolean>(false);
|
||||
const props = defineProps({
|
||||
inputfilter: String,
|
||||
inputvisible: Array,
|
||||
|
|
@ -143,8 +137,8 @@ const props = defineProps({
|
|||
roleAdmin: Boolean
|
||||
});
|
||||
const pagination = ref({
|
||||
sortBy: "desc",
|
||||
descending: false,
|
||||
sortBy: "number",
|
||||
descending: true,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,10 +1,14 @@
|
|||
import type { zipCodeOption } from "../../components/PersonalDetail/profileType";
|
||||
interface DataOption {
|
||||
id: number | string;
|
||||
name: string;
|
||||
id: number|null;
|
||||
name:string|null;
|
||||
disable?: boolean;
|
||||
}
|
||||
interface DataOption1 {
|
||||
id: string|null;
|
||||
name:string|null;
|
||||
disable?: boolean;
|
||||
}
|
||||
|
||||
interface DataOptionInsignia {
|
||||
id: string;
|
||||
name: string;
|
||||
|
|
@ -137,6 +141,7 @@ export type {
|
|||
AddressOps,
|
||||
Pagination,
|
||||
EduOps,
|
||||
DataOption1,
|
||||
InsigniaOps,
|
||||
CheckboxItem,
|
||||
Property,
|
||||
|
|
|
|||
|
|
@ -4,8 +4,10 @@ interface FormPlacementMainData {
|
|||
examRound: string;
|
||||
examOrder: number;
|
||||
fiscalYear: number;
|
||||
numberofCandidates: number;
|
||||
examType: number;
|
||||
numberOfCandidates: number;
|
||||
examTypeValue:string;
|
||||
examTypeName: string;
|
||||
accountStartDate: string;
|
||||
accountExpirationDate: string;
|
||||
isExpired?: boolean;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
interface TableName {
|
||||
profileID: string;
|
||||
personalId: string;
|
||||
position: number;
|
||||
fullName: string;
|
||||
dateOfBirth: string;
|
||||
|
|
@ -7,14 +7,20 @@ interface TableName {
|
|||
ExamOrder: number;
|
||||
unitId: string;
|
||||
UnitGroup: string;
|
||||
positionNumber:string;
|
||||
positionPath:string;
|
||||
Unit: string;
|
||||
ReportingDate: string; //วันที่รายงานตัว
|
||||
BMAOfficer: string;
|
||||
Status: string;
|
||||
reportingDate: string; //วันที่รายงานตัว
|
||||
bmaOfficer: string;
|
||||
statusId: string;
|
||||
checkList: any;
|
||||
address: string;
|
||||
university: string;
|
||||
degree: string;
|
||||
disclaim: string;
|
||||
profilePhoto:string;
|
||||
organizationName:string;
|
||||
organizationShortName:string;
|
||||
major: string;
|
||||
remark: string;
|
||||
number: number;
|
||||
|
|
@ -31,5 +37,19 @@ interface TableName {
|
|||
examResult: string;
|
||||
};
|
||||
}
|
||||
|
||||
export type { TableName };
|
||||
interface PartialTableName {
|
||||
personalId: string;
|
||||
fullName: string;
|
||||
idCard: string;
|
||||
profilePhoto: string;
|
||||
organizationName: string;
|
||||
organizationShortName: string;
|
||||
positionNumber: string;
|
||||
positionPath: string;
|
||||
reportingDate: string;
|
||||
bmaOfficer: string;
|
||||
number: number;
|
||||
statusId: string;
|
||||
deferment: string;
|
||||
}
|
||||
export type { TableName ,PartialTableName};
|
||||
|
|
@ -43,7 +43,7 @@ export default [
|
|||
},
|
||||
},
|
||||
{
|
||||
path: "/placement/detail",
|
||||
path: "/placement/pass/:examId",
|
||||
name: "placementDetail",
|
||||
component: PlacementDetail,
|
||||
meta: {
|
||||
|
|
|
|||
|
|
@ -104,77 +104,77 @@ export const usePlacementDataStore = defineStore("placement", () => {
|
|||
(DataMainYear.value = val);
|
||||
const DataMain = (val: FormPlacementMainData[]) => (DataMainOrig.value = val);
|
||||
const DataUpdateMain = (
|
||||
filter_1: number | null,
|
||||
filter_2: number | null,
|
||||
filter_1: number | string,
|
||||
filter_2: string | null,
|
||||
filter_3: boolean
|
||||
) => {
|
||||
DataMainUpdate.value = [];
|
||||
if (filter_1 === null && filter_2 === 0 && filter_3 === false) {
|
||||
if (filter_1 === "all" && filter_2 === "all" && filter_3 === false) {
|
||||
// console.log('case 1');
|
||||
// return DataMainUpdate.value = DataMainOrig.value; อันเก่า
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) => item.isExpired === filter_3
|
||||
));
|
||||
} else if (filter_1 === null && filter_2 === null && filter_3 === false) {
|
||||
} else if (filter_1 === "all" && filter_2 === "all" && filter_3 === false) {
|
||||
// console.log('case 1.1');
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) => item.isExpired === filter_3
|
||||
));
|
||||
} else if (filter_1 !== null && filter_2 === 0 && filter_3 === false) {
|
||||
} else if (filter_1 !== "all" && filter_2 === "all" && filter_3 === false) {
|
||||
// console.log('case 2');
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) => item.examOrder === filter_1 && item.isExpired === filter_3
|
||||
));
|
||||
} else if (filter_1 !== null && filter_2 === null && filter_3 === false) {
|
||||
} else if (filter_1 !== "all" && filter_2 === "all" && filter_3 === false) {
|
||||
// console.log('case 2.1');
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) => item.examOrder === filter_1 && item.isExpired === filter_3
|
||||
));
|
||||
} else if (filter_1 !== null && filter_2 !== 0 && filter_3 === false) {
|
||||
} else if (filter_1 !== "all" && filter_2 !== "all" && filter_3 === false) {
|
||||
// console.log('case 2.2');
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) =>
|
||||
item.examOrder === filter_1 &&
|
||||
item.examType === filter_2 &&
|
||||
item.examTypeValue === filter_2 &&
|
||||
item.isExpired === filter_3
|
||||
));
|
||||
} else if (filter_1 === null && filter_2 !== 0 && filter_3 === false) {
|
||||
} else if (filter_1 === "all" && filter_2 !== "all" && filter_3 === false) {
|
||||
// console.log('case 3');
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) => item.examType === filter_2 && item.isExpired === filter_3
|
||||
(item) => item.examTypeValue === filter_2 && item.isExpired === filter_3
|
||||
));
|
||||
} else if (filter_1 === null && filter_2 === 0 && filter_3 === true) {
|
||||
} else if (filter_1 === "all" && filter_2 === "all" && filter_3 === true) {
|
||||
// console.log('case 3.1');
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) => item.isExpired === filter_3
|
||||
));
|
||||
} else if (filter_1 === null && filter_2 === null && filter_3 === true) {
|
||||
} else if (filter_1 === "all" && filter_2 === "all" && filter_3 === true) {
|
||||
// console.log('case 3.2');
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) => item.isExpired === filter_3
|
||||
));
|
||||
} else if (filter_1 !== null && filter_2 === 0 && filter_3 === true) {
|
||||
} else if (filter_1 !== "all" && filter_2 === "all" && filter_3 === true) {
|
||||
// console.log('case 3.3');
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) => item.examOrder == filter_1 && item.isExpired == filter_3
|
||||
));
|
||||
} else if (filter_1 !== null && filter_2 === null && filter_3 === true) {
|
||||
} else if (filter_1 !== "all" && filter_2 === "all" && filter_3 === true) {
|
||||
// console.log('case 3.4');
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) => item.examOrder == filter_1 && item.isExpired == filter_3
|
||||
));
|
||||
} else if (filter_1 !== null && filter_2 !== 0 && filter_3 === true) {
|
||||
} else if (filter_1 !== "all" && filter_2 !== "all" && filter_3 === true) {
|
||||
// console.log('case 3.5');
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) =>
|
||||
item.examOrder == filter_1 &&
|
||||
item.examType == filter_2 &&
|
||||
item.examTypeValue == filter_2 &&
|
||||
item.isExpired == filter_3
|
||||
));
|
||||
} else if (filter_1 === null && filter_2 !== 0 && filter_3 === true) {
|
||||
} else if (filter_1 === "all" && filter_2 !== "all" && filter_3 === true) {
|
||||
// console.log('case 3.6');
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) => item.examType == filter_2 && item.isExpired == filter_3
|
||||
(item) => item.examTypeValue == filter_2 && item.isExpired == filter_3
|
||||
));
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue