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

Merge commit '5bfdd3cc2a' into develop

Browse source
This commit is contained in:
Tanyalak 2023-07-14 09:13:49 +07:00
commit aebf13cdc7
53 changed files with 6943 additions and 6197 deletions
Download patch file Download diff file Expand all files Collapse all files

136
.github/workflows/release.yaml vendored
View file

@ -15,72 +15,72 @@ env:
COMPOSE_PATH: /home/frappet/docker/bma-ehr COMPOSE_PATH: /home/frappet/docker/bma-ehr
TOKEN_LINE: uxuK5hDzS2DsoC5piJBrWRLiz8GgY7iMZZldOWsDDF0 TOKEN_LINE: uxuK5hDzS2DsoC5piJBrWRLiz8GgY7iMZZldOWsDDF0
jobs: jobs:
# # act workflow_dispatch -W .github/workflows/release.yaml --input IMAGE_VER=test-v1 -s DOCKER_USER=sorawit -s DOCKER_PASS=P@ssword -s SSH_PASSWORD=P@ssw0rd # act workflow_dispatch -W .github/workflows/release.yaml --input IMAGE_VER=test-v1 -s DOCKER_USER=sorawit -s DOCKER_PASS=P@ssword -s SSH_PASSWORD=P@ssw0rd
# release-test: release-test:
# runs-on: ubuntu-latest runs-on: ubuntu-latest
# steps: steps:
# - uses: actions/checkout@v3 - uses: actions/checkout@v3
# # skip Set up QEMU because it fail on act and container # skip Set up QEMU because it fail on act and container
# # Gen Version try to get version from tag or inut # Gen Version try to get version from tag or inut
# - name: Gen Version - name: Gen Version
# id: gen_ver id: gen_ver
# run: | run: |
# if [[ $GITHUB_REF == 'refs/tags/'* ]]; then if [[ $GITHUB_REF == 'refs/tags/'* ]]; then
# IMAGE_VER='${GITHUB_REF/refs\/tags\//}' IMAGE_VER='${GITHUB_REF/refs\/tags\//}'
# else else
# IMAGE_VER=${{ github.event.inputs.IMAGE_VER }} IMAGE_VER=${{ github.event.inputs.IMAGE_VER }}
# fi fi
# if [[ $IMAGE_VER == '' ]]; then if [[ $IMAGE_VER == '' ]]; then
# IMAGE_VER='test-vBeta' IMAGE_VER='test-vBeta'
# fi fi
# echo '::set-output name=image_ver::'$IMAGE_VER echo '::set-output name=image_ver::'$IMAGE_VER
# - name: Check Version - name: Check Version
# run: | run: |
# echo $GITHUB_REF echo $GITHUB_REF
# echo ${{ steps.gen_ver.outputs.image_ver }} echo ${{ steps.gen_ver.outputs.image_ver }}
# - name: Set up Docker Buildx - name: Set up Docker Buildx
# uses: docker/setup-buildx-action@v2 uses: docker/setup-buildx-action@v2
# - name: Login in to registry - name: Login in to registry
# uses: docker/login-action@v2 uses: docker/login-action@v2
# with: with:
# registry: ${{env.REGISTRY}} registry: ${{env.REGISTRY}}
# username: ${{secrets.DOCKER_USER}} username: ${{secrets.DOCKER_USER}}
# password: ${{secrets.DOCKER_PASS}} password: ${{secrets.DOCKER_PASS}}
# - name: Build and push docker image - name: Build and push docker image
# uses: docker/build-push-action@v3 uses: docker/build-push-action@v3
# with: with:
# context: . context: .
# platforms: linux/amd64 platforms: linux/amd64
# push: true push: true
# tags: ${{env.REGISTRY}}/${{env.IMAGE_NAME}}:${{ steps.gen_ver.outputs.image_ver }},${{env.REGISTRY}}/${{env.IMAGE_NAME}}:latest tags: ${{env.REGISTRY}}/${{env.IMAGE_NAME}}:${{ steps.gen_ver.outputs.image_ver }},${{env.REGISTRY}}/${{env.IMAGE_NAME}}:latest
# - name: Remote Deployment - name: Remote Deployment
# uses: appleboy/ssh-action@v0.1.8 uses: appleboy/ssh-action@v0.1.8
# with: with:
# host: ${{env.DEPLOY_HOST}} host: ${{env.DEPLOY_HOST}}
# username: frappet username: frappet
# password: ${{ secrets.SSH_PASSWORD }} password: ${{ secrets.SSH_PASSWORD }}
# port: 22 port: 22
# script: | script: |
# cd "${{env.COMPOSE_PATH}}" cd "${{env.COMPOSE_PATH}}"
# docker-compose pull docker-compose pull
# docker-compose up -d docker-compose up -d
# echo "${{ steps.gen_ver.outputs.image_ver }}"> success echo "${{ steps.gen_ver.outputs.image_ver }}"> success
# - uses: snow-actions/line-notify@v1.1.0 - uses: snow-actions/line-notify@v1.1.0
# if: success() if: success()
# with: with:
# access_token: ${{ env.TOKEN_LINE }} access_token: ${{ env.TOKEN_LINE }}
# message: | message: |
# -Success✅✅✅ -Success✅✅✅
# Image: ${{env.IMAGE_NAME}} Image: ${{env.IMAGE_NAME}}
# Version: ${{ github.event.inputs.IMAGE_VER }} Version: ${{ github.event.inputs.IMAGE_VER }}
# By: ${{secrets.DOCKER_USER}} By: ${{secrets.DOCKER_USER}}
# - uses: snow-actions/line-notify@v1.1.0 - uses: snow-actions/line-notify@v1.1.0
# if: failure() if: failure()
# with: with:
# access_token: ${{ env.TOKEN_LINE }} access_token: ${{ env.TOKEN_LINE }}
# message: | message: |
# -Failure❌❌❌ -Failure❌❌❌
# Image: ${{env.IMAGE_NAME}} Image: ${{env.IMAGE_NAME}}
# Version: ${{ github.event.inputs.IMAGE_VER }} Version: ${{ github.event.inputs.IMAGE_VER }}
# By: ${{secrets.DOCKER_USER}} By: ${{secrets.DOCKER_USER}}

2
package-lock.json generated
View file

@ -7738,7 +7738,7 @@
}, },
"node_modules/vue": { "node_modules/vue": {
"version": "3.2.47", "version": "3.2.47",
"resolved": "https://npm.joolsoft.com/vue/-/vue-3.2.47.tgz", // "resolved": "https://npm.joolsoft.com/vue/-/vue-3.2.47.tgz",
"integrity": "sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==", "integrity": "sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==",
"dependencies": { "dependencies": {
"@vue/compiler-dom": "3.2.47", "@vue/compiler-dom": "3.2.47",

2
package.json
View file

@ -4,7 +4,7 @@
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "run-p type-check build-only", "build": "run-p build-only",
"preview": "vite preview", "preview": "vite preview",
"test:unit": "vitest --environment jsdom --root src/", "test:unit": "vitest --environment jsdom --root src/",
"test:e2e": "start-server-and-test preview :4173 'cypress run --e2e'", "test:e2e": "start-server-and-test preview :4173 'cypress run --e2e'",

8
src/api/02_organizational/api.treelist.ts
View file

@ -10,6 +10,7 @@ import env from "../index";
const organizationPath = `${env.API_URI_ORG_SERVICE}/Organization/`; const organizationPath = `${env.API_URI_ORG_SERVICE}/Organization/`;
const postionMasterPath = `${env.API_URI_ORG_SERVICE}/PositionMaster`; const postionMasterPath = `${env.API_URI_ORG_SERVICE}/PositionMaster`;
const organizationPosition = `${env.API_URI_ORG_SERVICE}/OrganizationPosition/`; 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/`; const report = `${env.API_URI}/report/organization/`;
@ -83,8 +84,7 @@ export default {
getPositionNumberIdByOcId: (OcId: string) => getPositionNumberIdByOcId: (OcId: string) =>
`${postionMasterPath}/position-number/Oc/${OcId}`, `${postionMasterPath}/position-number/Oc/${OcId}`,
organizationEmployeePosition: `${organizationEmployeePosition}`,
/** organizationEmployeePositionId: (id: string) =>
* api ประวัติการ publish `${organizationEmployeePosition}${id}`,
*/
}; };

51
src/api/05_placement/api.placement.ts
View file

@ -1,6 +1,49 @@
/**
* api บรรจุ แต่งตั้ง ย้าย โอน
*/
import env from "../index"; import env from "../index";
const placement = `${env.API_PLACEMENT_URI}/placement`;
const orgTree = `${env.API_URI_ORG_TREE}`;
export default {}; export default {
MainDetail: (year: number) => `${placement}/exam/${year}`,
yearOptions: () => `${placement}/fiscal`,
personalList: (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}`,
//personal
placementPropertyId: (personalId: string) =>
`${placement}/property/${personalId}`,
//information
placementInformationId: (personalId: string) =>
`${placement}/information/${personalId}`,
//address
placementAddressId: (personalId: string) =>
`${placement}/address/${personalId}`,
//family
placementFamilyId: (personalId: string) =>
`${placement}/family/${personalId}`,
//certificate
placementCertId: (personalId: string) =>
`${placement}/certificate/${personalId}`,
placementCertDetailId: (personalId: string, certificateId: string) =>
`${placement}/certificate/${personalId}/${certificateId}`,
//education
placementEducationId: (id: string) => `${placement}/education/${id}`,
// position
placementPosition: () => `${placement}/position/use`,
};

21
src/api/index.ts
View file

@ -8,16 +8,22 @@ const env = ref<string>(process.env.NODE_ENV || "development");
const config = ref<any>({ const config = ref<any>({
development: { 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: "https://bma-ehr.frappet.synology.me/api/v1",
// API_URI_ORG_SERVICE: "https://localhost:7056/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_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://localhost:7159/api/v1",
API_URI_PROFILE_SERVICE: "https://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว API_URI_PROFILE_SERVICE: "https://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว
// API_CANDIDATE_URI: "https://localhost:7007/api/v1", // API_CANDIDATE_URI: "https://localhost:7007/api/v1",
API_CANDIDATE_URI: "https://bma-ehr.frappet.synology.me/api/v1", API_CANDIDATE_URI: "https://bma-ehr.frappet.synology.me/api/v1",
// API_REPORT_URI: "https://localhost:7187/api/v1", // API_REPORT_URI: "https://localhost:7187/api/v1",
API_REPORT_URI: "https://bma-ehr.frappet.synology.me/api/v1", API_REPORT_URI: "https://bma-ehr.frappet.synology.me/api/v1",
// API_PLACEMENT_URI: "https://localhost:7260/api",
API_PLACEMENT_URI: "https://bma-ehr.frappet.synology.me/api/v1",
API_URI_ORG_TREE:
"https://s3cluster.frappet.com/bma-ehr-fpt/organization/strueture/tree_20230712_172702.json",
MEET_URI: "meet.frappet.com", MEET_URI: "meet.frappet.com",
}, },
test: { test: {
@ -30,9 +36,12 @@ const config = ref<any>({
// API_URI: "https://localhost:5010", // API_URI: "https://localhost:5010",
API_URI: `${window.location.protocol}//${window.location.host}/api/v1`, 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_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_URI_PROFILE_SERVICE: `${window.location.protocol}//${window.location.host}/api/v1`,
API_CANDIDATE_URI: `${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_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", MEET_URI: "meet.frappet.com",
}, },
}); });
@ -45,10 +54,17 @@ const API_REPORT_URI = ref<string>(config.value[env.value].API_REPORT_URI);
const API_URI_ORG_SERVICE = ref<string>( const API_URI_ORG_SERVICE = ref<string>(
config.value[env.value].API_URI_ORG_SERVICE 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 MEET_URI = ref<string>(config.value[env.value].MEET_URI);
const API_URI_PROFILE_SERVICE = ref<string>( const API_URI_PROFILE_SERVICE = ref<string>(
config.value[env.value].API_URI_PROFILE_SERVICE config.value[env.value].API_URI_PROFILE_SERVICE
); );
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 { export default {
env: env.value, env: env.value,
@ -57,6 +73,9 @@ export default {
API_CANDIDATE_URI: API_CANDIDATE_URI.value, API_CANDIDATE_URI: API_CANDIDATE_URI.value,
API_REPORT_URI: API_REPORT_URI.value, API_REPORT_URI: API_REPORT_URI.value,
API_URI_ORG_SERVICE: API_URI_ORG_SERVICE.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_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, MEET_URI: MEET_URI.value,
}; };

2
src/api/manage/api.organization.ts
View file

@ -3,6 +3,7 @@
* เมนูย่อย: ข้อมูลโครงสร้างหน่วยงาน * เมนูย่อย: ข้อมูลโครงสร้างหน่วยงาน
*/ */
import env from "../index"; import env from "../index";
const organizationMain = `${env.API_URI}/metadata/main/`;
const organization = `${env.API_URI}/metadata/organization/`; const organization = `${env.API_URI}/metadata/organization/`;
const organizationOrganization = `${env.API_URI}/metadata/organization-organization/`; const organizationOrganization = `${env.API_URI}/metadata/organization-organization/`;
const organizationShortName = `${env.API_URI}/metadata/organization-shortname/`; const organizationShortName = `${env.API_URI}/metadata/organization-shortname/`;
@ -21,6 +22,7 @@ export default {
/** /**
* api จำนวนข้อมูลใน ระบบจัดการข้อมูลหลัก tab ย่อยแต่ละ tab * api จำนวนข้อมูลใน ระบบจัดการข้อมูลหลัก tab ย่อยแต่ละ tab
*/ */
organizationMain: `${organizationMain}organization`,
organization, organization,
countDashbordSubHistory: (type: number) => `${dashbord}${type}`, countDashbordSubHistory: (type: number) => `${dashbord}${type}`,
countDashbordHistory: `${dashbord}`, countDashbordHistory: `${dashbord}`,

3
src/api/manage/api.positionEmployee.ts
View file

@ -3,6 +3,7 @@
* เมนูย่อย: ข้อมูลตำแหน่งของลูกจ้างกรุงเทพมหานคร * เมนูย่อย: ข้อมูลตำแหน่งของลูกจ้างกรุงเทพมหานคร
*/ */
import env from "../index"; import env from "../index";
const positionEmployee = `${env.API_URI}/metadata/main/`;
const positionEmployeePosition = `${env.API_URI}/metadata/position-employee-position/`; const positionEmployeePosition = `${env.API_URI}/metadata/position-employee-position/`;
const positionEmployeePositionSide = `${env.API_URI}/metadata/position-employee-position-side/`; const positionEmployeePositionSide = `${env.API_URI}/metadata/position-employee-position-side/`;
const positionEmployeeGroup = `${env.API_URI}/metadata/position-employee-group/`; const positionEmployeeGroup = `${env.API_URI}/metadata/position-employee-group/`;
@ -11,6 +12,8 @@ const positionEmployeeLevel = `${env.API_URI}/metadata/position-employee-level/`
const positionEmployeeStatus = `${env.API_URI}/metadata/position-employee-status/`; const positionEmployeeStatus = `${env.API_URI}/metadata/position-employee-status/`;
export default { export default {
positionEmployeeStatus: `${positionEmployeeStatus}`,
positionEmployee: `${positionEmployee}positionEmployee`,
/** /**
* api ตำแหน่ง * api ตำแหน่ง
*/ */

7
src/interface/request/main/main.ts
View file

@ -88,11 +88,16 @@ const menuList = readonly<any[]>([
}, },
{ {
key: 3.5, key: 3.5,
label: "ผังโครงสร้างลูกจ้าง",
path: "organizationalEmployee",
},
{
key: 3.6,
label: "จัดการบัญชี 2", label: "จัดการบัญชี 2",
path: "manageReport2", path: "manageReport2",
}, },
{ {
key: 3.6, key: 3.7,
label: "รายงานบัญชี", label: "รายงานบัญชี",
path: "organizationalReport", path: "organizationalReport",
}, },

2
src/modules/01_metadata/components/positionEmployee/Group.vue
View file

@ -437,7 +437,7 @@ const fetchHistory = async () => {
.catch((e) => { .catch((e) => {
messageError($q, e); messageError($q, e);
}) })
.finally(async () => { .finally(() => {
hideLoader(); hideLoader();
}); });
}; };

12
src/modules/02_organizational/router.ts
View file

@ -9,6 +9,8 @@ const MainStructChart = () =>
const MainOrgChart = () => const MainOrgChart = () =>
import("@/modules/02_organizational/views/MainOrgChart.vue"); import("@/modules/02_organizational/views/MainOrgChart.vue");
const MainTree = () => import("@/modules/02_organizational/views/MainTree.vue"); const MainTree = () => import("@/modules/02_organizational/views/MainTree.vue");
const MainTreeEmployee = () =>
import("@/modules/02_organizational/views/MainTreeEmployee.vue");
const MainReport = () => const MainReport = () =>
import("@/modules/02_organizational/views/MainReport.vue"); import("@/modules/02_organizational/views/MainReport.vue");
const ManageReport2 = () => const ManageReport2 = () =>
@ -60,6 +62,16 @@ export default [
Role: "organization", Role: "organization",
}, },
}, },
{
path: "/organizational/employee",
name: "organizationalEmployee",
component: MainTreeEmployee,
meta: {
Auth: true,
Key: [9],
Role: "organization",
},
},
{ {
path: "/organizational/manage/report", path: "/organizational/manage/report",
name: "manageReport2", name: "manageReport2",

3112
src/modules/02_organizational/views/MainTree.vue
View file

File diff suppressed because it is too large Load diff

1749
src/modules/02_organizational/views/MainTreeEmployee.vue Normal file
View file

File diff suppressed because it is too large Load diff

376
src/modules/03_recruiting/components/Table.vue
View file

@ -1,128 +1,126 @@
<template> <template>
<div class="q-pb-sm row q-col-gutter-sm"> <div class="q-pb-sm row q-col-gutter-sm">
<!-- --> <!-- -->
<div class="q-gutter-sm" v-if="nornmalData == true"> <div class="q-gutter-sm" v-if="nornmalData == true">
<q-btn <q-btn
size="12px" size="12px"
flat flat
round round
color="add" color="add"
@click="checkAdd" @click="checkAdd"
icon="mdi-plus" icon="mdi-plus"
> >
<q-tooltip>เพิ่มข้อมูล</q-tooltip> <q-tooltip>เพิ่มข้อมูล</q-tooltip>
</q-btn> </q-btn>
</div> </div>
<div class="row q-gutter-sm q-pb-sm" v-if="conclude == true"> <div class="row q-gutter-sm q-pb-sm" v-if="conclude == true">
<q-card bordered flat class="q-px-md no-wrap row"> <q-card bordered flat class="q-px-md no-wrap row">
<div class="col-12 text-subtitle2 row items-center"> <div class="col-12 text-subtitle2 row items-center">
<span class="text-weight-medium text-dark" <span class="text-weight-medium text-dark">ผู้สมัครสอบ</span>
>ผู้สมัครสอบ</span <q-space />
> <q-badge
<q-space /> color="white"
<q-badge class="text-weight-bold text-subtitle1 text-primary"
color="white" :label="`${count}`"
class="text-weight-bold text-subtitle1 text-primary" rounded
:label="`${count}`" />
rounded </div>
/> </q-card>
</div> <q-card bordered flat class="q-px-md no-wrap row">
</q-card> <div class="col-12 text-subtitle2 row items-center">
<q-card bordered flat class="q-px-md no-wrap row"> <span class="text-weight-medium text-dark">สอบผ่าน</span>
<div class="col-12 text-subtitle2 row items-center"> <q-space />
<span class="text-weight-medium text-dark">สอบผ่าน</span> <q-badge
<q-space /> color="white"
<q-badge class="text-weight-bold text-subtitle1 text-blue"
color="white" :label="`${pass}`"
class="text-weight-bold text-subtitle1 text-blue" rounded
:label="`${pass}`" />
rounded </div>
/> </q-card>
</div>
</q-card>
<q-card bordered flat class="q-px-md no-wrap row"> <q-card bordered flat class="q-px-md no-wrap row">
<div class="col-12 text-subtitle2 row items-center"> <div class="col-12 text-subtitle2 row items-center">
<span class="text-weight-medium text-dark">สอบไม่ผ่าน</span> <span class="text-weight-medium text-dark">สอบไม่ผ่าน</span>
<q-space /> <q-space />
<q-badge <q-badge
color="white" color="white"
class="text-weight-bold text-subtitle1 text-pink" class="text-weight-bold text-subtitle1 text-pink"
:label="`${notpass}`" :label="`${notpass}`"
rounded rounded
/> />
</div> </div>
</q-card> </q-card>
</div> </div>
<q-space /> <q-space />
<div class="items-center q-gutter-sm" style="display: flex"> <div class="items-center q-gutter-sm" style="display: flex">
<!-- ค้นหาข้อความใน table --> <!-- ค้นหาข้อความใน table -->
<q-input <q-input
standout standout
dense dense
:model-value="inputfilter" :model-value="inputfilter"
ref="filterRef" ref="filterRef"
@update:model-value="updateInput" @update:model-value="updateInput"
outlined outlined
debounce="300" debounce="300"
placeholder="ค้นหา" placeholder="ค้นหา"
style="max-width: 200px" style="max-width: 200px"
> >
<template v-slot:append> <template v-slot:append>
<q-icon v-if="inputfilter == ''" name="search" /> <q-icon v-if="inputfilter == ''" name="search" />
<q-icon <q-icon
v-if="inputfilter !== ''" v-if="inputfilter !== ''"
name="clear" name="clear"
class="cursor-pointer" class="cursor-pointer"
@click="resetFilter" @click="resetFilter"
/> />
</template> </template>
</q-input> </q-input>
<!-- แสดงคอลัมน์ใน table --> <!-- แสดงคอลัมน์ใน table -->
<q-select <q-select
:model-value="inputvisible" :model-value="inputvisible"
@update:model-value="updateVisible" @update:model-value="updateVisible"
:display-value="$q.lang.table.columns" :display-value="$q.lang.table.columns"
multiple multiple
outlined outlined
dense dense
:options="attrs.columns" :options="attrs.columns"
options-dense options-dense
option-value="name" option-value="name"
map-options map-options
emit-value emit-value
style="min-width: 150px" style="min-width: 150px"
class="gt-xs" class="gt-xs"
> >
<template> </template> <template> </template>
</q-select> </q-select>
</div> </div>
</div> </div>
<q-table <q-table
ref="table" ref="table"
flat flat
bordered bordered
class="custom-table2" class="custom-header-table"
v-bind="attrs" v-bind="attrs"
virtual-scroll virtual-scroll
:virtual-scroll-sticky-size-start="48" :virtual-scroll-sticky-size-start="48"
dense dense
:pagination-label="paginationLabel" :pagination-label="paginationLabel"
:pagination="initialPagination" :pagination="initialPagination"
:rows-per-page-options="[0]" :rows-per-page-options="[0]"
> >
<template v-slot:header="props"> <template v-slot:header="props">
<q-tr :props="props"> <q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props"> <q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium" v-html="col.label" /> <span class="text-weight-medium" v-html="col.label" />
</q-th> </q-th>
<q-th auto-width v-if="nornmalData == true" /> <q-th auto-width v-if="nornmalData == true" />
</q-tr> </q-tr>
</template> </template>
<template #body="props"> <template #body="props">
<slot v-bind="props" name="columns"></slot> <slot v-bind="props" name="columns"></slot>
</template> </template>
</q-table> </q-table>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, useAttrs } from "vue"; import { ref, useAttrs } from "vue";
@ -132,106 +130,106 @@ const attrs = ref<any>(useAttrs());
const table = ref<any>(null); const table = ref<any>(null);
const filterRef = ref<any>(null); const filterRef = ref<any>(null);
const initialPagination = ref<Pagination>({ const initialPagination = ref<Pagination>({
rowsPerPage: 0, rowsPerPage: 0,
}); });
const props = defineProps({ const props = defineProps({
count: Number, count: Number,
pass: Number, pass: Number,
notpass: Number, notpass: Number,
inputfilter: String, inputfilter: String,
name: String, name: String,
icon: String, icon: String,
inputvisible: Array, inputvisible: Array,
editvisible: Boolean, editvisible: Boolean,
add: { add: {
type: Function, type: Function,
default: () => console.log("not function"), default: () => console.log("not function"),
}, },
validate: { validate: {
type: Function, type: Function,
default: () => console.log("not function"), default: () => console.log("not function"),
}, },
nornmalData: { nornmalData: {
type: Boolean, type: Boolean,
defualt: true, defualt: true,
}, },
conclude: { conclude: {
type: Boolean, type: Boolean,
defualt: false, defualt: false,
}, },
}); });
const emit = defineEmits([ const emit = defineEmits([
"update:inputfilter", "update:inputfilter",
"update:inputvisible", "update:inputvisible",
"update:editvisible", "update:editvisible",
]); ]);
const updateInput = (value: string | number | null) => { const updateInput = (value: string | number | null) => {
emit("update:inputfilter", value); emit("update:inputfilter", value);
}; };
const updateVisible = (value: []) => { const updateVisible = (value: []) => {
emit("update:inputvisible", value); emit("update:inputvisible", value);
}; };
const paginationLabel = (start: string, end: string, total: string) => { const paginationLabel = (start: string, end: string, total: string) => {
return start + "-" + end + " ใน " + total; return start + "-" + end + " ใน " + total;
}; };
const checkAdd = () => { const checkAdd = () => {
props.add(); props.add();
}; };
const resetFilter = () => { const resetFilter = () => {
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
emit("update:inputfilter", ""); emit("update:inputfilter", "");
filterRef.value.focus(); filterRef.value.focus();
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.icon-color { .icon-color {
color: #4154b3; color: #4154b3;
} }
.custom-table2 { .custom-table2 {
max-height: 64vh; max-height: 64vh;
.q-table tr:nth-child(odd) td { .q-table tr:nth-child(odd) td {
background: white; background: white;
} }
.q-table tr:nth-child(even) td { .q-table tr:nth-child(even) td {
background: #f8f8f8; background: #f8f8f8;
} }
.q-table thead tr { .q-table thead tr {
background: #ecebeb; background: #ecebeb;
} }
.q-table thead tr th { .q-table thead tr th {
position: sticky; position: sticky;
} }
.q-table td:nth-of-type(2) { .q-table td:nth-of-type(2) {
z-index: 3 !important; z-index: 3 !important;
} }
.q-table th:nth-of-type(2), .q-table th:nth-of-type(2),
.q-table td:nth-of-type(2) { .q-table td:nth-of-type(2) {
position: sticky; position: sticky;
left: 0; left: 0;
z-index: 1; z-index: 1;
} }
/* this will be the loading indicator */ /* this will be the loading indicator */
.q-table thead tr:last-child th { .q-table thead tr:last-child th {
/* height of all previous header rows */ /* height of all previous header rows */
top: 48px; top: 48px;
} }
.q-table thead tr:first-child th { .q-table thead tr:first-child th {
top: 0; top: 0;
} }
} }
</style> </style>

609
src/modules/03_recruiting/views/02_qualify/Period.vue
View file

@ -1,88 +1,79 @@
<!-- page:จัดการรอบการสอบ สรรหา --> <!-- page:จัดการรอบการสอบ สรรหา -->
<template> <template>
<div class="toptitle text-dark col-12 row items-center"> <div class="toptitle text-dark col-12 row items-center">
จัดการรอบคัดเลือก จัดการรอบคัดเลือก
</div> </div>
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md"> <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
<div> <div>
<Table <Table
style="max-height: 80vh" style="max-height: 80vh"
:rows="examData" :rows="examData"
:columns="columns" :columns="columns"
:filter="filter" :filter="filter"
:visible-columns="visibleColumns" :visible-columns="visibleColumns"
v-model:inputfilter="filter" v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns" v-model:inputvisible="visibleColumns"
:pagination="initialPagination" :pagination="initialPagination"
:nornmalData="true" :nornmalData="true"
:add="clickAdd" :add="clickAdd"
:paging="true" :paging="true"
:titleText="''" :titleText="''"
> >
<template #columns="props"> <template #columns="props">
<q-tr :props="props" class="cursor-pointer"> <q-tr :props="props" class="cursor-pointer">
<q-td <q-td
v-for="col in props.cols" v-for="col in props.cols"
:key="col.name" :key="col.name"
:props="props" :props="props"
@click="clickEdit(props.row)" @click="clickEdit(props.row)"
> >
<div <div v-if="col.name == 'no'" class="table_ellipsis2">
v-if="col.name == 'no'" {{ props.rowIndex + 1 }}
class="table_ellipsis2" </div>
> <div v-else-if="col.name == 'yearly'" class="table_ellipsis2">
{{ props.rowIndex + 1 }} {{ col.value + 543 }}
</div> </div>
<div <div
v-else-if="col.name == 'yearly'" v-else-if="
class="table_ellipsis2" col.name == 'dateRegister' ||
> col.name == 'datePayment' ||
{{ col.value + 543 }} col.name == 'dateAnnouncement'
</div> "
<div class="table_ellipsis2"
v-else-if=" >
col.name == 'dateRegister' || {{ dateThaiRange(col.value) }}
col.name == 'datePayment' || </div>
col.name == 'dateAnnouncement' <div
" v-else-if="col.name == 'announcementExam'"
class="table_ellipsis2" class="table_ellipsis2"
> >
{{ dateThaiRange(col.value) }} {{ col.value ? "ข่าวการสอบ" : "ข่าวทั่วไป" }}
</div> </div>
<div <div v-else-if="col.name == 'category'" class="table_ellipsis2">
v-else-if="col.name == 'announcementExam'" {{ typeCategoryExam(col.value) }}
class="table_ellipsis2" </div>
> <div v-else class="table_ellipsis2">
{{ col.value ? "ข่าวการสอบ" : "ข่าวทั่วไป" }} {{ col.value }}
</div> </div>
<div </q-td>
v-else-if="col.name == 'category'" <q-td>
class="table_ellipsis2" <q-btn
> dense
{{ typeCategoryExam(col.value) }} size="12px"
</div> flat
<div v-else class="table_ellipsis2"> round
{{ col.value }} color="red"
</div> @click="clickDelete(props.row.id)"
</q-td> icon="mdi-delete"
<q-td> >
<q-btn <q-tooltip>ลบข้อมูล</q-tooltip>
dense </q-btn>
size="12px" </q-td>
flat </q-tr>
round </template>
color="red" </Table>
@click="clickDelete(props.row.id)" </div>
icon="mdi-delete" </q-card>
>
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
</Table>
</div>
</q-card>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
@ -90,14 +81,14 @@ import { onMounted, ref } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import type { import type {
RequestPeriodExam, RequestPeriodExam,
RequestPosition, RequestPosition,
RequestPayment, RequestPayment,
} from "@/modules/03_recruiting/interface/request/Period"; } from "@/modules/03_recruiting/interface/request/Period";
import type { import type {
ResponsePeriodExam, ResponsePeriodExam,
ResponsePosition, ResponsePosition,
ResponsePayment, ResponsePayment,
} from "@/modules/03_recruiting/interface/response/Period"; } from "@/modules/03_recruiting/interface/response/Period";
import type { Pagination } from "@/modules/03_recruiting/interface/index/Main"; import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
import Table from "@/modules/03_recruiting/components/Table.vue"; import Table from "@/modules/03_recruiting/components/Table.vue";
@ -114,248 +105,236 @@ const router = useRouter();
const { date2Thai, success, typeCategoryExam, messageError } = mixin; const { date2Thai, success, typeCategoryExam, messageError } = mixin;
const filter = ref<string>(""); //search data table const filter = ref<string>(""); //search data table
const initialPagination = ref<Pagination>({ const initialPagination = ref<Pagination>({
rowsPerPage: 0, rowsPerPage: 0,
}); });
const examData = ref<ResponsePeriodExam[]>([]); const examData = ref<ResponsePeriodExam[]>([]);
const visibleColumns = ref<String[]>([ const visibleColumns = ref<String[]>([
"no", "no",
"announcementExam", "announcementExam",
"yearly", "yearly",
"category", "category",
"name", "name",
"document", "document",
"dateAnnouncement", "dateAnnouncement",
"dateRegister", "dateRegister",
"datePayment", "datePayment",
"fee", "fee",
]); ]);
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "no", name: "no",
align: "center", align: "center",
label: "ลำดับ", label: "ลำดับ",
sortable: true, sortable: true,
field: "no", field: "no",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },
{ {
name: "announcementExam", name: "announcementExam",
align: "left", align: "left",
label: "ประเภทการประกาศ", label: "ประเภทการประกาศ",
sortable: true, sortable: true,
field: "announcementExam", field: "announcementExam",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },
{ {
name: "yearly", name: "yearly",
align: "center", align: "center",
label: "ปีงบประมาณ", label: "ปีงบประมาณ",
sortable: true, sortable: true,
field: "yearly", field: "yearly",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },
{ {
name: "category", name: "category",
align: "left", align: "left",
label: "สังกัด", label: "สังกัด",
sortable: true, sortable: true,
field: "category", field: "category",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },
{ {
name: "name", name: "name",
align: "left", align: "left",
label: "รายการประกาศ", label: "รายการประกาศ",
sortable: true, sortable: true,
field: "name", field: "name",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },
{ {
name: "fee", name: "fee",
align: "right", align: "right",
label: "ค่าธรรมเนียม", label: "ค่าธรรมเนียม",
sortable: true, sortable: true,
field: "fee", field: "fee",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },
{ {
name: "dateAnnouncement", name: "dateAnnouncement",
align: "left", align: "left",
label: "วันที่สมัคร", label: "วันที่สมัคร",
sortable: true, sortable: true,
field: "dateAnnouncement", field: "dateAnnouncement",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },
{ {
name: "dateRegister", name: "dateRegister",
align: "left", align: "left",
label: "วันที่ชำระเงิน", label: "วันที่ชำระเงิน",
sortable: true, sortable: true,
field: "dateRegister", field: "dateRegister",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },
{ {
name: "datePayment", name: "datePayment",
align: "left", align: "left",
label: "วันที่ประกาศ", label: "วันที่ประกาศ",
sortable: true, sortable: true,
field: "datePayment", field: "datePayment",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },
]); ]);
onMounted(async () => { onMounted(async () => {
loaderPage(false); loaderPage(false);
await fetchData(); await fetchData();
}); });
const fetchData = async () => { const fetchData = async () => {
loaderPage(true); loaderPage(true);
await http await http
.get(config.API.periodExamType("all")) .get(config.API.periodExamType("all"))
.then((res) => { .then((res) => {
const data = res.data.result; const data = res.data.result;
let result: ResponsePeriodExam[] = []; let result: ResponsePeriodExam[] = [];
if (data.length > 0) { if (data.length > 0) {
data.map((r: RequestPeriodExam) => { data.map((r: RequestPeriodExam) => {
const positionData: ResponsePosition[] = []; const positionData: ResponsePosition[] = [];
r.positionExam.map((r: RequestPosition) => { r.positionExam.map((r: RequestPosition) => {
positionData.push({ positionData.push({
id: r.id, id: r.id,
position: { position: {
id: r.positionId, id: r.positionId,
name: r.positionName, name: r.positionName,
}, },
type: { type: {
id: r.typeId, id: r.typeId,
name: r.typeName, name: r.typeName,
}, },
highDegree: r.highDegree, highDegree: r.highDegree,
}); });
}); });
const bankData: ResponsePayment[] = []; const bankData: ResponsePayment[] = [];
r.bankExam.map((r: RequestPayment) => { r.bankExam.map((r: RequestPayment) => {
bankData.push({ bankData.push({
id: r.id, id: r.id,
accountNumber: r.accountNumber, accountNumber: r.accountNumber,
bankName: r.bankName, bankName: r.bankName,
accountName: r.accountName, accountName: r.accountName,
}); });
}); });
result.push({ result.push({
id: r.id, id: r.id,
dateAnnounce: dateAnnounce:
r.announcementDate !== null r.announcementDate !== null ? new Date(r.announcementDate) : null,
? new Date(r.announcementDate) announcementExam: r.announcementExam,
: null, name: r.name,
announcementExam: r.announcementExam, checkDocument: r.checkDocument,
name: r.name, checkDisability: r.checkDisability,
checkDocument: r.checkDocument, round: r.round,
checkDisability: r.checkDisability, yearly: r.year,
round: r.round, fee: r.fee,
yearly: r.year, dateAnnouncement:
fee: r.fee, r.announcementStartDate !== null && r.announcementEndDate !== null
dateAnnouncement: ? [
r.announcementStartDate !== null && new Date(r.announcementStartDate),
r.announcementEndDate !== null new Date(r.announcementEndDate),
? [ ]
new Date(r.announcementStartDate), : null,
new Date(r.announcementEndDate), dateExam: r.examDate !== null ? new Date(r.examDate) : null,
] dateRegister:
: null, r.registerStartDate !== null && r.registerEndDate !== null
dateExam: ? [new Date(r.registerStartDate), new Date(r.registerEndDate)]
r.examDate !== null ? new Date(r.examDate) : null, : null,
dateRegister: datePayment:
r.registerStartDate !== null && r.paymentStartDate !== null && r.paymentEndDate !== null
r.registerEndDate !== null ? [new Date(r.paymentStartDate), new Date(r.paymentEndDate)]
? [ : null,
new Date(r.registerStartDate), organizationName: {
new Date(r.registerEndDate), id: r.organizationId,
] name: r.organizationName,
: null, },
datePayment: organizationShortName: {
r.paymentStartDate !== null && id: r.organizationCodeId,
r.paymentEndDate !== null name: r.organizationCodeName,
? [ },
new Date(r.paymentStartDate), positionExam: positionData,
new Date(r.paymentEndDate), pay: r.bankExam.length > 0 ? "payment2" : "payment1",
] bankExam: bankData,
: null, editor: r.detail,
organizationName: { note: r.note,
id: r.organizationId, category: r.category,
name: r.organizationName, });
}, });
organizationShortName: { }
id: r.organizationCodeId, examData.value = result;
name: r.organizationCodeName, })
}, .catch((e) => {
positionExam: positionData, messageError($q, e);
pay: r.bankExam.length > 0 ? "payment2" : "payment1", })
bankExam: bankData, .finally(() => {
editor: r.detail, loaderPage(false);
note: r.note, });
category: r.category,
});
});
}
examData.value = result;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
loaderPage(false);
});
}; };
const clickEdit = (col: ResponsePeriodExam) => { const clickEdit = (col: ResponsePeriodExam) => {
router.push(`/qualify/period/${col.id}`); router.push(`/qualify/period/${col.id}`);
}; };
const clickDelete = (id: string) => { const clickDelete = (id: string) => {
$q.dialog({ $q.dialog({
title: "ยืนยันการลบข้อมูล", title: "ยืนยันการลบข้อมูล",
message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?", message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
cancel: { cancel: {
flat: true, flat: true,
color: "negative", color: "negative",
}, },
persistent: true, persistent: true,
}) })
.onOk(async () => { .onOk(async () => {
await deleteData(id); await deleteData(id);
}) })
.onCancel(() => {}) .onCancel(() => {})
.onDismiss(() => {}); .onDismiss(() => {});
}; };
const clickAdd = () => { const clickAdd = () => {
router.push({ name: "qualifyPeriodAdd" }); router.push({ name: "qualifyPeriodAdd" });
}; };
const deleteData = async (id: string) => { const deleteData = async (id: string) => {
loaderPage(true); loaderPage(true);
await http await http
.delete(config.API.periodExamId(id)) .delete(config.API.periodExamId(id))
.then((res) => { .then((res) => {
success($q, "ลบข้อมูลสำเร็จ"); success($q, "ลบข้อมูลสำเร็จ");
}) })
.catch((e) => { .catch((e) => {
messageError($q, e); messageError($q, e);
}) })
.finally(async () => { .finally(async () => {
loaderPage(false); loaderPage(false);
await fetchData(); await fetchData();
}); });
}; };
/** /**
@ -363,13 +342,13 @@ const deleteData = async (id: string) => {
* @param val ช่วงวันที่ * @param val ช่วงวันที่
*/ */
const dateThaiRange = (val: [Date, Date]) => { const dateThaiRange = (val: [Date, Date]) => {
if (val === null) { if (val === null) {
return ""; return "";
} else if (date2Thai(val[0], true) === date2Thai(val[1], true)) { } else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {
return `${date2Thai(val[0], true)}`; return `${date2Thai(val[0], true)}`;
} else { } else {
return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`; return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`;
} }
}; };
</script> </script>

7
src/modules/04_registry/components/Information/layout.vue
View file

@ -1,6 +1,11 @@
<template> <template>
<Information :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" /> <Information :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
<Government :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" /> <Government
:notiNoEdit="notiNoEdit"
v-model:statusEdit="statusEdit"
profileType="profileType"
employeeClass="employeeClass"
/>
<Address :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" /> <Address :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
<Family :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" /> <Family :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
<!-- <Certicate v-model:statusEdit="statusEdit" :profileType="profileType" /> --> <!-- <Certicate v-model:statusEdit="statusEdit" :profileType="profileType" /> -->

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

@ -309,7 +309,7 @@ const tittleHistory = ref<string>(
); );
const filterHistory = ref<string>(""); //search data table history const filterHistory = ref<string>(""); //search data table history
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
const profileId = ref<string>(route.params.id.toString()); const profileId = ref<string>(route.params.id ? route.params.id.toString():'');
const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่ const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
const rows = ref<RequestItemsObject[]>([]); const rows = ref<RequestItemsObject[]>([]);
const filter = ref<string>(""); //search data table const filter = ref<string>(""); //search data table
@ -478,7 +478,7 @@ onMounted(async () => {
}); });
const fetchData = async () => { const fetchData = async () => {
if (profileId.value) { if (profileId.value!='') {
loaderPage(true); loaderPage(true);
await http await http
.get(config.API.profileNopaidId(profileId.value)) .get(config.API.profileNopaidId(profileId.value))

396
src/modules/05_placement/components/Main.vue
View file

@ -1,21 +1,21 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, reactive, ref, useAttrs } from "vue"; import { onMounted, ref, reactive } from "vue";
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
import type { FormPlacementMainData } from "@/modules/05_placement/interface/request/Main"; import { useQuasar } from "quasar";
import type { DataOption } from "@/modules/05_placement/interface/index/Main"; import type {
DataOption,
DataOption1,
} from "@/modules/05_placement/interface/index/Main";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import { usePlacementDataStore } from "@/modules/05_placement/store"; import { usePlacementDataStore } from "@/modules/05_placement/store";
import router from "@/router"; import router from "@/router";
import http from "@/plugins/http";
import config from "@/app.config";
const DataStore = usePlacementDataStore(); const DataStore = usePlacementDataStore();
const $q = useQuasar();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { dateText } = mixin; const { showLoader, hideLoader, messageError, date2Thai } = mixin;
// แปลงเวลา ค.ศ ให้เป็น พ.ศ
const textDate = (value: Date) => {
return dateText(value);
};
// หัวตาราง // หัวตาราง
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
@ -58,175 +58,141 @@ const columns = ref<QTableProps["columns"]>([
style: "font-size: 14px", style: "font-size: 14px",
}, },
{ {
name: "numberofCandidates", name: "numberOfCandidates",
align: "left", align: "left",
label: "จำนวนผู้สอบได้", label: "จำนวนผู้สอบได้",
sortable: false, sortable: false,
field: "numberofCandidates", field: "numberOfCandidates",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) => sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
{ {
name: "examType", name: "examTypeName",
align: "left", align: "left",
label: "ประเภทการสอบ", label: "ประเภทการสอบ",
sortable: false, sortable: false,
field: "examType", field: "examTypeName",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) => sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), 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", name: "accountExpirationDate",
align: "left", align: "left",
label: "วันที่บัญชีหมดอายุ", label: "วันที่บัญชีใช้ได้ถึง",
sortable: true, sortable: true,
field: "accountExpirationDate", field: "accountExpirationDate",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
]); ]);
// ข้อมูลตาราง (จำลอง) // ข้อมูลตาราง (จำลอง)
const rows = ref<FormPlacementMainData[]>([ const rows = ref<QTableProps["rows"]>([]);
{ // const yearValue = ref<number>(0); // เพิ่มตัวแปรในโมดูล
id: 1,
examRound: // let OriginalData = ref<FormPlacementMainData[]>([]);
"การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป", // let UpdataData = ref<FormPlacementMainData[]>([]);
examOrder: 3, const searchYear = ref();
fiscalYear: 2023, const yearOptions = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
numberofCandidates: 8,
examType: 1, const dataPlacement = ref<any>([]);
accountExpirationDate: "2023-02-28T14:47:04.1785384Z", const visibleColumns = ref([
}, "id",
{ "examRound",
id: 2, "examOrder",
examRound: "examOrder",
"การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป", "fiscalYear",
examOrder: 2, "numberOfCandidates",
fiscalYear: 2023, "examTypeName",
numberofCandidates: 12, "accountStartDate",
examType: 1, "accountExpirationDate",
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",
},
]); ]);
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 () => { onMounted(async () => {
await OriginalDataFetch(); await fetchYearOptions();
fiscalYearFilter();
examTimeFilter();
examTypeFilter();
await expiredAccountFilter();
searchFilterTable();
}); });
const fetchPlacementData = async (val: number) => {
showLoader();
rows.value = [];
http
.get(config.API.MainDetail(val))
.then(async (res) => {
dataPlacement.value = res.data.result;
DataStore.DataMainOrig = dataPlacement.value;
console.log(DataStore.DataMainOrig);
// rows.value = DataStore.DataMainOrig;
const dataArr: any = [];
await DataStore.DataMainOrig.map((e: any) => {
dataArr.push({
id: e.id,
examRound: e.examRound,
examOrder: e.examOrder,
examTypeName: e.examTypeName,
examTypeValue: e.examTypeValue,
accountEndDate: date2Thai(e.accountEndDate),
accountExpirationDate: date2Thai(e.accountExpirationDate),
accountStartDate: date2Thai(e.accountStartDate),
fiscalYear: e.fiscalYear,
numberOfCandidates: e.numberOfCandidates,
});
});
rows.value = dataArr;
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) => { const redirectToPage = (examId?: number) => {
// router.push({ name: 'placementDetail'}); router.push(`/placement/personal-list/${examId}`);
router.push(`/placement/detail`);
}; };
// เลือกปีงบประมาณ //-------------------|ค้นหาในตาราง|-----------------//
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 filterKeyword = ref<string>("");
const filterRef = ref<any>(null); const filterRef = ref<any>(null);
const resetFilter = () => { const resetFilter = () => {
@ -234,63 +200,81 @@ const resetFilter = () => {
filterRef.value.focus(); filterRef.value.focus();
}; };
const attrs = ref<any>(useAttrs()); //-------------------|ครั้งที่สอบ|------------------------------//
const visibleColumns = ref<string[]>([ const examTime = ref<number | string>("all");
"id", const examTimeOP = reactive<DataOption1[]>([{ id: "all", name: "ทั้งหมด" }]);
"examRound", const addedExamTimeValues: Set<number> = new Set();
"examOrder",
"fiscalYear",
"numberofCandidates",
"examType",
"accountExpirationDate",
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
// ครั้งที่สอบ
const examTime = ref<number | null>(null);
const examTimeOP = ref<number[]>([]);
const examTimeFilter = async () => { const examTimeFilter = async () => {
for (let data of OriginalData.value) { // examTimeOP.push({ id: "all", name: "ทั้งหมด" });
if (!examTimeOP.value.includes(data.examOrder)) { for (const data of dataPlacement.value) {
examTimeOP.value.push(data.examOrder); 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 examType = ref<string | null>("all");
const examTypeOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]); const examTypeOP = ref<DataOption1[]>([{ id: "all", name: "ทั้งหมด" }]);
const addedexamTypeValues: number[] = []; const addedExamTypeValues: Set<string> = new Set();
const examTypeFilter = async () => { const examTypeFilter = () => {
for (let data of OriginalData.value) { dataPlacement.value.forEach((item: any) => {
const examTypeValue = data.examType; const examTypeName = item.examTypeName;
if (examTypeValue == 1 && !addedexamTypeValues.includes(1)) { const examTypeValue = item.examTypeValue;
examTypeOP.push({ id: 1, name: "คัดเลือก" }); if (examTypeName && !addedExamTypeValues.has(examTypeName)) {
addedexamTypeValues.push(1); examTypeOP.value.push({
} else if (examTypeValue == 2 && !addedexamTypeValues.includes(2)) { id: examTypeValue,
examTypeOP.push({ id: 2, name: "สอบแข่งขัน" }); name: examTypeName,
addedexamTypeValues.push(2); });
addedExamTypeValues.add(examTypeName);
} }
});
};
//--------------|ฟิลเตอร์|--------------------------------------//
const searchFilterTable = async () => {
rows.value = [];
if (examType.value !== undefined && examType.value !== null) {
await DataStore.DataUpdateMain(
examTime.value,
examType.value,
expiredAccount.value
);
const dataArr: any = [];
await DataStore.DataMainUpdate.map((e: any) => {
dataArr.push({
id: e.id,
examRound: e.examRound,
examOrder: e.examOrder,
examTypeName: e.examTypeName,
examTypeValue: e.examTypeValue,
accountEndDate: date2Thai(e.accountEndDate),
accountExpirationDate: date2Thai(e.accountExpirationDate),
accountStartDate: date2Thai(e.accountStartDate),
fiscalYear: e.fiscalYear,
numberOfCandidates: e.numberOfCandidates,
});
});
rows.value = dataArr;
} }
}; };
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 expiredAccount = ref<boolean>(false);
const expiredAccountFilter = async () => { const expiredAccountFilter = async () => {
const currentDate = new Date(); // const currentDate = new Date();
const updatedRows = OriginalData.value.map((data) => { const updatedRows = dataPlacement.value.map((data: any) => {
let expirationDate = new Date(data.accountExpirationDate); // let expirationDate = new Date(data.accountExpirationDate);
let isExpired = expirationDate < currentDate; // let isExpired = currentDate > expirationDate;
let isExpired = data.isExpired == expiredAccount;
return { ...data, isExpired }; return { ...data, isExpired };
}); });
@ -298,13 +282,13 @@ const expiredAccountFilter = async () => {
}; };
const paging = ref<boolean>(true); const paging = ref<boolean>(true);
const pagination = ref({ const pagination = ref({
sortBy: "desc", sortBy: "accountStartDate",
descending: false, descending: true,
page: 1, page: 1,
rowsPerPage: 10, 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; if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
else return start + "-" + end + " ใน " + total; else return start + "-" + end + " ใน " + total;
}; };
@ -315,16 +299,16 @@ const paginationLabel = (start: string, end: string, total: string) => {
รายการสอบแข่งขัน / คัดเลือก รายการสอบแข่งขัน / คัดเลือก
</div> </div>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md"> <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"> <div class="row col-12 q-col-gutter-sm">
<q-select <q-select
class="col-xs-12 col-sm-3 col-md-2" class="col-xs-12 col-sm-3 col-md-2"
v-model="fiscalyear" v-model="searchYear"
label="ปีงบประมาณ" label="ปีงบประมาณ"
dense dense
emit-value emit-value
map-options map-options
:options="fiscalyearOP" :options="yearOptions"
option-value="id" option-value="id"
option-label="name" option-label="name"
lazy-rules lazy-rules
@ -333,7 +317,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
:borderless="false" :borderless="false"
:outlined="true" :outlined="true"
:hide-dropdown-icon="false" :hide-dropdown-icon="false"
@update:model-value="searchfiscalyear" @update:model-value="filterYear"
/> />
<q-space /> <q-space />
<q-input <q-input
@ -423,15 +407,14 @@ const paginationLabel = (start: string, end: string, total: string) => {
<div class="col-12"> <div class="col-12">
<q-table <q-table
ref="table" ref="table"
:rows="rows"
:columns="columns" :columns="columns"
:rows="UpdataData"
:filter="filterKeyword" :filter="filterKeyword"
row-key="id" row-key="id"
flat flat
bordered bordered
dense dense
class="custom-header-table" class="custom-header-table"
v-bind="attrs"
:visible-columns="visibleColumns" :visible-columns="visibleColumns"
:pagination-label="paginationLabel" :pagination-label="paginationLabel"
v-model:pagination="pagination" v-model:pagination="pagination"
@ -454,7 +437,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
@click="redirectToPage(props.row.id)" @click="redirectToPage(props.row.id)"
> >
<q-td key="id" :props="props"> <q-td key="id" :props="props">
{{ props.row.id }} {{ props.rowIndex + 1 }}
</q-td> </q-td>
<q-td key="examRound" :props="props"> <q-td key="examRound" :props="props">
{{ props.row.examRound }} {{ props.row.examRound }}
@ -463,16 +446,19 @@ const paginationLabel = (start: string, end: string, total: string) => {
{{ props.row.examOrder }} {{ props.row.examOrder }}
</q-td> </q-td>
<q-td key="fiscalYear" :props="props"> <q-td key="fiscalYear" :props="props">
{{ props.row.fiscalYear + 543 }} {{ props.row.fiscalYear }}
</q-td> </q-td>
<q-td key="numberofCandidates" :props="props"> <q-td key="numberOfCandidates" :props="props">
{{ props.row.numberofCandidates }} {{ props.row.numberOfCandidates }}
</q-td> </q-td>
<q-td key="examType" :props="props"> <q-td key="examTypeName" :props="props">
{{ props.row.examType == 1 ? "คัดเลือก" : "สอบแข่งขัน" }} {{ props.row.examTypeName }}
</q-td>
<q-td key="accountStartDate" :props="props">
{{ props.row.accountStartDate }}
</q-td> </q-td>
<q-td key="accountExpirationDate" :props="props"> <q-td key="accountExpirationDate" :props="props">
{{ textDate(props.row.accountExpirationDate) }} {{ props.row.accountExpirationDate }}
</q-td> </q-td>
</q-tr> </q-tr>
</template> </template>

21
src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
View file

@ -23,7 +23,14 @@
@update:model-value="searchFilterTable" @update:model-value="searchFilterTable"
/> />
<div> <div>
<q-btn size="12px" flat round color="add" icon="mdi-plus" @click="clickAdd"> <q-btn
size="12px"
flat
round
color="add"
icon="mdi-plus"
@click="clickAdd"
>
<q-tooltip>เพิ่มข้อมูล</q-tooltip> <q-tooltip>เพิ่มข้อมูล</q-tooltip>
<!-- <q-menu> <!-- <q-menu>
<q-list style="min-width: 100px"> <q-list style="min-width: 100px">
@ -542,7 +549,7 @@ const clickDelete = (id: string) => {
persistent: true, persistent: true,
}) })
.onOk(async () => { .onOk(async () => {
await deleteData(id); // await deleteData(id);
}) })
.onCancel(() => {}) .onCancel(() => {})
.onDismiss(() => {}); .onDismiss(() => {});
@ -609,7 +616,7 @@ const fiscalYearFilter = async () => {
}; };
const OrderType = ref<string>(""); const OrderType = ref<string>("");
const OrderTypeOption = reactive<DataOption[]>([{ id: "", name: "ทั้งหมด" }]); const OrderTypeOption = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
const addedOrderTypeValues: string[] = []; const addedOrderTypeValues: string[] = [];
const OrderTypeFilter = async () => { const OrderTypeFilter = async () => {
// API // API
@ -633,7 +640,8 @@ const OrderTypeFilter = async () => {
// } // }
if (!addedOrderTypeValues.includes(OrderTypeValue)) { if (!addedOrderTypeValues.includes(OrderTypeValue)) {
OrderTypeOption.push({ OrderTypeOption.push({
id: OrderTypeValue, // id: OrderTypeValue ?? 0,
id: OrderTypeOption.length,
name: OrderTypeValue, name: OrderTypeValue,
}); });
addedOrderTypeValues.push(OrderTypeValue); addedOrderTypeValues.push(OrderTypeValue);
@ -651,7 +659,7 @@ const OrderStatus = ref<string>("");
const OrderStatusText = ref<FormOrderPlacementMainData[]>( const OrderStatusText = ref<FormOrderPlacementMainData[]>(
DataStore.DataMainOrigOrder DataStore.DataMainOrigOrder
); );
const OrderStatusOption = reactive<DataOption[]>([{ id: "", name: "ทั้งหมด" }]); const OrderStatusOption = reactive<DataOption[]>([{ id: 1, name: "ทั้งหมด" }]);
const addedOrderStatusValues: string[] = []; const addedOrderStatusValues: string[] = [];
const OrderStatusFilter = async () => { const OrderStatusFilter = async () => {
// API // API
@ -679,7 +687,8 @@ const OrderStatusFilter = async () => {
if (!addedOrderStatusValues.includes(OrderStatusValue)) { if (!addedOrderStatusValues.includes(OrderStatusValue)) {
OrderStatusOption.push({ OrderStatusOption.push({
id: OrderStatusValue, // id: OrderStatusValue,
id: OrderStatusOption.length,
name: OrderStatusValue, name: OrderStatusValue,
}); });
addedOrderStatusValues.push(OrderStatusValue); addedOrderStatusValues.push(OrderStatusValue);

13
src/modules/05_placement/components/OrderPlacement/addOrderPlacement.vue
View file

@ -37,7 +37,6 @@
<li>{{ rejectMessage }}</li> <li>{{ rejectMessage }}</li>
</div> </div>
</q-card-actions> </q-card-actions>
<ExamForm :fetchStep="fetchStep" :status="status" />
</q-card> </q-card>
</q-step> </q-step>
<q-step <q-step
@ -54,9 +53,7 @@
" "
v-if="stepPayment" v-if="stepPayment"
> >
<q-card bordered class="q-pa-lg"> <q-card bordered class="q-pa-lg"> </q-card>
<ExamPayment :fetchStep="fetchStep" :status="status" />
</q-card>
</q-step> </q-step>
<q-step <q-step
:done="step > 4" :done="step > 4"
@ -65,9 +62,7 @@
title="เลือก" title="เลือก"
:icon="stepRaw >= 4 ? 'mdi-check-bold' : 'mdi-flag-variant'" :icon="stepRaw >= 4 ? 'mdi-check-bold' : 'mdi-flag-variant'"
> >
<q-card bordered class="q-pa-lg"> <q-card bordered class="q-pa-lg"> </q-card>
<ExamFinished :fetchStep="fetchStep" :status="status" />
</q-card>
</q-step> </q-step>
<q-step <q-step
:done="step > 5" :done="step > 5"
@ -76,9 +71,7 @@
title="รายละเอียดคำสั่งและแนบท้าย" title="รายละเอียดคำสั่งและแนบท้าย"
:icon="stepRaw >= 4 ? 'mdi-check-bold' : 'mdi-flag-variant'" :icon="stepRaw >= 4 ? 'mdi-check-bold' : 'mdi-flag-variant'"
> >
<q-card bordered class="q-pa-lg"> <q-card bordered class="q-pa-lg"> </q-card>
<ExamFinished :fetchStep="fetchStep" :status="status" />
</q-card>
</q-step> </q-step>
</q-stepper> </q-stepper>
<q-dialog :model-value="modalConsend" persistent> <q-dialog :model-value="modalConsend" persistent>

12
src/modules/05_placement/components/OrderPlacement/step/step01.vue
View file

@ -449,14 +449,14 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
case "typeOrderOption": case "typeOrderOption":
update(() => { update(() => {
typeOrderOption.value = typeOrderOptionFilter.value.filter( typeOrderOption.value = typeOrderOptionFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1 (v: DataOption) => v.name!.indexOf(val) > -1
); );
}); });
break; break;
case "byOrderOption": case "byOrderOption":
update(() => { update(() => {
byOrderOption.value = byOrderOptionFilter.value.filter( byOrderOption.value = byOrderOptionFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1 (v: DataOption) => v.name!.indexOf(val) > -1
); );
}); });
break; break;
@ -464,7 +464,7 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
case "registerOption": case "registerOption":
update(() => { update(() => {
registerOption.value = registerOptionFilter.value.filter( registerOption.value = registerOptionFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1 (v: DataOption) => v.name!.indexOf(val) > -1
); );
}); });
break; break;
@ -472,7 +472,7 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
case "announceOption": case "announceOption":
update(() => { update(() => {
announceOption.value = announceOptionFilter.value.filter( announceOption.value = announceOptionFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1 (v: DataOption) => v.name!.indexOf(val) > -1
); );
}); });
break; break;
@ -480,14 +480,14 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
case "positionOption": case "positionOption":
update(() => { update(() => {
positionOption.value = positionOptionFilter.value.filter( positionOption.value = positionOptionFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1 (v: DataOption) => v.name!.indexOf(val) > -1
); );
}); });
break; break;
case "testOption": case "testOption":
update(() => { update(() => {
testOption.value = testOptionFilter.value.filter( testOption.value = testOptionFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1 (v: DataOption) => v.name!.indexOf(val) > -1
); );
}); });
break; break;

2
src/modules/05_placement/components/OrderPlacement/step/step03.vue
View file

@ -325,7 +325,7 @@
round round
color="public" color="public"
icon="mdi-content-save-outline" icon="mdi-content-save-outline"
@click="next" @click="clickClose"
> >
<q-tooltip>บันทึก</q-tooltip> <q-tooltip>บันทึก</q-tooltip>
</q-btn> </q-btn>

235
src/modules/05_placement/components/OrderPlacement/step/step04.vue
View file

@ -22,11 +22,15 @@
<q-menu> <q-menu>
<q-list style="min-width: 150px"> <q-list style="min-width: 150px">
<q-item clickable v-close-popup> <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-section>ไฟล์ .PDF</q-item-section>
</q-item> </q-item>
<q-item clickable v-close-popup> <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-section>ไฟล์ .docx</q-item-section>
</q-item> </q-item>
</q-list> </q-list>
@ -47,82 +51,84 @@
<q-menu> <q-menu>
<q-list style="min-width: 150px"> <q-list style="min-width: 150px">
<q-item clickable v-close-popup> <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-section>ไฟล์ .PDF</q-item-section>
</q-item> </q-item>
<q-item clickable v-close-popup> <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-section>ไฟล์ .xls</q-item-section>
</q-item> </q-item>
</q-list> </q-list>
</q-menu> </q-menu>
</q-btn> </q-btn>
</div> </div>
<q-space />
<q-btn
class="text-dark"
flat
dense
icon="mdi-fullscreen"
color="add"
@click="dialog = true"
/>
</div> </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"> <q-card bordered class="card-pdf q-ma-md q-pa-md">
<div <div class="justify-between items-center align-center q-pb-sm row">
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-btn <q-icon name="mdi-chevron-left" />
class="text-dark bg-grey-4" </q-btn>
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-icon name="mdi-chevron-left" />
</q-btn>
<span class="body-2 grey--text"> <span class="body-2 grey--text">
หน้าที่ {{ page }} จาก {{ numOfPages }} หน้าที่ {{ page }} จาก {{ numOfPages }}
</span> </span>
<q-btn <q-btn
class="text-dark bg-grey-4" class="text-dark bg-grey-4"
flat flat
dense dense
@click="page = page < numOfPages ? page + 1 : page" @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-btn <q-icon name="mdi-chevron-right" />
class="text-dark bg-grey-4" </q-btn>
flat </div>
dense <div class="pdfWidth">
@click="page = page > 1 ? page - 1 : page" <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
> <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
<q-icon name="mdi-chevron-left" /> </div>
</q-btn> <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"> <span class="body-2 grey--text">
หน้าที่ {{ page }} จาก {{ numOfPages }} หน้าที่ {{ page }} จาก {{ numOfPages }}
</span> </span>
<q-btn <q-btn
class="text-dark bg-grey-4" class="text-dark bg-grey-4"
flat flat
dense dense
@click="page = page < numOfPages ? page + 1 : page" @click="page = page < numOfPages ? page + 1 : page"
> >
<q-icon name="mdi-chevron-right" /> <q-icon name="mdi-chevron-right" />
</q-btn> </q-btn>
</div> </div>
</q-card> </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>
<template v-slot:separator> <template v-slot:separator>
@ -275,6 +281,21 @@
</div> </div>
</div> </div>
</fieldset> </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> </div>
</q-form> </q-form>
</template> </template>
@ -302,9 +323,97 @@
</q-btn> </q-btn>
<!-- <q-btn flat round color="primary" icon="chevron_right" @click="next"> <!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
<q-tooltip>ต่อไป</q-tooltip> <q-tooltip>ต่อไป</q-tooltip>
</q-btn> --> </q-btn> -->
</div> </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> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -317,6 +426,8 @@ import { useCounterMixin } from "@/stores/mixin";
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { date2Thai } = mixin; const { date2Thai } = mixin;
const dialog = ref<boolean>(false);
// onUnmounted(() => { // onUnmounted(() => {
// window.removeEventListener("resize", (e: any) => { // window.removeEventListener("resize", (e: any) => {
// myEventHandler(e); // myEventHandler(e);

327
src/modules/05_placement/components/PersonalDetail/Detail.vue
View file

@ -3,89 +3,316 @@
import { onMounted, reactive, ref } from "vue"; import { onMounted, reactive, ref } from "vue";
import { useDataStore } from "@/stores/data"; import { useDataStore } from "@/stores/data";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
const router = useRouter(); import { useCounterMixin } from "@/stores/mixin";
import Informationvue from "@/modules/05_placement/components/PersonalDetail/Information/layout.vue"; import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import Informationvue from "@/modules/05_placement/components/PersonalDetail/Information/Information.vue";
import Addressvue from "@/modules/05_placement/components/PersonalDetail/Information/Address.vue";
import EducationVue from "@/modules/05_placement/components/PersonalDetail/Education.vue"; import EducationVue from "@/modules/05_placement/components/PersonalDetail/Education.vue";
import Certicate from "@/modules/05_placement/components/PersonalDetail/Information/Certicate.vue"; import Certicate from "@/modules/05_placement/components/PersonalDetail/Information/Certicate.vue";
import ExamResult from "@/modules/05_placement/components/PersonalDetail/ExamResult.vue"; import ExamResult from "@/modules/05_placement/components/PersonalDetail/ExamResult.vue";
import Qualification from "@/modules/05_placement/components/PersonalDetail/Qualification.vue"; import Qualification from "@/modules/05_placement/components/PersonalDetail/Qualification.vue";
import Family from "@/modules/05_placement/components/PersonalDetail/Information/Family.vue"; import Familyvue from "@/modules/05_placement/components/PersonalDetail/Information/Family.vue";
import {
AddressDataDefualt,
FamilyDataDefualt,
} from "@/modules/05_placement/interface/index/Main";
import type {
Property,
PointExam,
Education,
Family,
Address,
Certificate,
} from "@/modules/05_placement/interface/index/Main";
import type { Information } from "@/modules/05_placement/components/PersonalDetail/profileType";
const $q = useQuasar(); // show dialog
const router = useRouter();
const store = useDataStore(); const store = useDataStore();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { showLoader, hideLoader, messageError } = mixin;
const { changeTab } = store; const { changeTab } = store;
const statusEdit = ref<boolean>(false); const statusEdit = ref<boolean>(false);
const profileType = ref<string>(""); const profileType = ref<string>("");
const route = useRoute(); const route = useRoute();
const examId = ref<string>(route.params.personalId.toString()); const examId = ref<string>(
route.params.personalId ? route.params.personalId.toString() : ""
);
const FormData = reactive<any>({ const ExamDataDefualt: PointExam = {
fullName: examId, pointA: 0,
pointB: 0,
pointC: 0,
pointTotalA: 0,
pointTotalB: 0,
pointTotalC: 0,
point: 0,
pointTotal: 0,
examNumber: 0,
examRound: 0,
pass: "",
};
const InformationDataDefualt: Information = {
idCard: "",
prefix: "",
prefixId: "",
fullName: "",
firstname: "",
lastname: "",
nationality: "",
race: "",
dateOfBirth: new Date(),
age: "",
telephone: "",
gender: "",
genderId: "",
relationship: "",
relationshipId: "",
bloodGroup: "",
bloodGroupId: "",
religion: "",
religionId: "",
};
const personalData = ref({
id: "",
fullName: "",
}); });
const QualificationData = ref<Property[]>([]);
const ExamData = ref<PointExam>(ExamDataDefualt);
const InformationData = ref<Information>(InformationDataDefualt);
const EducationData = ref<Education[]>([]);
const FamilyData = ref<Family>(FamilyDataDefualt);
const AddressData = ref<Address>(AddressDataDefualt);
const CertificateData = ref<Certificate[]>([]);
onMounted(async () => { onMounted(async () => {
// await checkProfileData(); // await checkProfileData();
// await fetchData(); await fetchData();
await changeTab("information"); await changeTab("information");
}); });
const fetchData = async () => {
showLoader();
await http
.get(config.API.placementPersonalId(examId.value))
.then((res: any) => {
const data = res.data.result;
// data.value = data;
// console.log(data);
personalData.value.fullName = data.fullName;
personalData.value.id = data.personalId;
InformationData.value.idCard = data.idCard;
InformationData.value.fullName = data.fullName;
InformationData.value.firstname = data.firstname;
InformationData.value.lastname = data.lastname;
InformationData.value.nationality = data.nationality;
InformationData.value.race = data.race;
InformationData.value.genderId = data.genderId;
InformationData.value.prefixId = data.prefixId;
InformationData.value.relationshipId = data.relationshipId;
InformationData.value.religionId = data.religionId;
InformationData.value.bloodGroupId = data.bloodGroupId;
InformationData.value.dateOfBirth = new Date(data.dateOfBirth);
InformationData.value.age = data.age;
InformationData.value.telephone = data.telephone;
AddressData.value.registAddress = data.registAddress ?? "";
AddressData.value.currentAddress = data.currentAddress ?? "";
AddressData.value.registSame = data.registSame ? "1" : "0";
AddressData.value.registSubDistrict = data.registSubDistrict ?? "";
AddressData.value.registSubDistrictId = data.registSubDistrictId ?? "";
AddressData.value.registZipCode = data.registZipCode ?? "";
AddressData.value.registDistrict = data.registDistrict ?? "";
AddressData.value.registDistrictId = data.registDistrictId ?? "";
AddressData.value.registProvince = data.registProvince ?? "";
AddressData.value.registProvinceId = data.registProvinceId ?? "";
AddressData.value.currentSubDistrict = data.currentSubDistrict ?? "";
AddressData.value.currentSubDistrictId = data.currentSubDistrictId ?? "";
AddressData.value.currentZipCode = data.currentZipCode ?? "";
AddressData.value.currentDistrict = data.currentDistrict ?? "";
AddressData.value.currentDistrictId = data.currentDistrictId ?? "";
AddressData.value.currentProvince = data.currentProvince ?? "";
AddressData.value.currentProvinceId = data.currentProvinceId ?? "";
FamilyData.value.couple = data.couple ? "1" : "0";
FamilyData.value.marryPrefix = data.marryPrefix ?? "";
FamilyData.value.marryPrefixId = data.marryPrefixId ?? "";
FamilyData.value.marryFirstName = data.marryFirstName ?? "";
FamilyData.value.marryLastName = data.marryLastName ?? "";
FamilyData.value.marryOccupation = data.marryOccupation ?? "";
FamilyData.value.fatherPrefix = data.fatherPrefix ?? "";
FamilyData.value.fatherPrefixId = data.fatherPrefixId ?? "";
FamilyData.value.fatherFirstName = data.fatherFirstName ?? "";
FamilyData.value.fatherLastName = data.fatherLastName ?? "";
FamilyData.value.fatherOccupation = data.fatherOccupation ?? "";
FamilyData.value.motherPrefix = data.motherPrefix ?? "";
FamilyData.value.motherPrefixId = data.motherPrefixId ?? "";
FamilyData.value.motherFirstName = data.motherFirstName ?? "";
FamilyData.value.motherLastName = data.motherLastName ?? "";
FamilyData.value.motherOccupation = data.motherOccupation ?? "";
ExamData.value.pointA = data.pointA;
ExamData.value.pointB = data.pointB;
ExamData.value.pointC = data.pointC;
ExamData.value.point = data.point;
ExamData.value.pointTotalA = data.pointTotalA;
ExamData.value.pointTotalB = data.pointTotalB;
ExamData.value.pointTotalC = data.pointTotalC;
ExamData.value.pointTotal = data.pointTotal;
ExamData.value.examNumber = data.examNumber;
ExamData.value.examRound = data.examRound;
ExamData.value.pass = data.pass;
QualificationData.value = data.isProperty;
let listRow: Education[] = [];
data.education.map((row: any) => {
listRow.push({
id: row.id ?? "",
educationLevel: row.educationLevel ?? "",
institute: row.institute ?? "",
degree: row.degree ?? "",
field: row.field ?? "",
gpa: row.gpa ?? "",
country: row.country ?? "",
duration: row.duration ?? "",
other: row.other ?? "",
fundName: row.fundName ?? "",
durationYear: row.durationYear ?? 0,
finishDate: row.finishDate ?? new Date(),
isDate: row.isDate ?? "",
startDate: row.startDate ? new Date(row.startDate).getFullYear() : 0,
endDate: row.endDate ? new Date(row.endDate).getFullYear() : 0,
positionPath: row.positionPath ?? "",
isEducation: row.isEducation ?? "",
});
});
EducationData.value = listRow;
let listCert: Certificate[] = [];
data.certificates.map((row: any) => {
listCert.push({
id: row.id ?? "",
certificateNo: row.certificateNo ?? "",
issuer: row.issuer ?? "",
issueDate: new Date(row.issueDate) ?? new Date(),
expireDate: new Date(row.expireDate) ?? new Date(),
certificateType: row.certificateType ?? "",
});
});
CertificateData.value = listCert;
})
.catch((e: any) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
</script> </script>
<template> <template>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row q-pb-sm"> <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row q-pb-sm">
<div class="header-text"> <div class="header-text">
<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" <q-btn
@click="router.go(-1)" /> icon="mdi-arrow-left"
รายละเอียดของ {{ FormData.fullName }} unelevated
</div> round
dense
flat
color="primary"
class="q-mr-sm"
@click="router.go(-1)"
/>
รายละเอียดของ {{ personalData.fullName }}
</div> </div>
<div class="q-pb-lg"> </div>
<q-card class="row q-pb-lg"> <div class="q-pb-lg">
<div id="information" name="1" class="col-12 q-pa-sm"> <q-card class="row q-pb-lg">
<Informationvue v-model:statusEdit="statusEdit" :profileType="profileType" /> <div id="information" name="1" class="col-12 q-pa-sm">
</div> <Informationvue
v-model:statusEdit="statusEdit"
v-model:data="InformationData"
:fetch="fetchData"
/>
<div class="col-12 q-px-md"><q-separator size="4px" /></div>
<Addressvue
v-model:statusEdit="statusEdit"
v-model:data="AddressData"
:fetch="fetchData"
/>
</div>
<div id="family" name="10" class="col-12 q-pa-sm" > <div id="family" name="10" class="col-12 q-pa-sm">
<div class="col-12 q-px-md"><q-separator size="4px"/></div> <div class="col-12 q-px-md"><q-separator size="4px" /></div>
<Family v-model:statusEdit="statusEdit" /> <Familyvue
</div> v-model:statusEdit="statusEdit"
v-model:data="FamilyData"
:fetch="fetchData"
/>
</div>
<div id="certicate" name="2" class="col-12 q-pa-sm" > <div id="certicate" name="2" class="col-12 q-pa-sm">
<div class="col-12 q-px-md"><q-separator size="4px"/></div> <div class="col-12 q-px-md"><q-separator size="4px" /></div>
<Certicate v-model:statusEdit="statusEdit" :profileType="profileType" /> <Certicate
</div> v-model:statusEdit="statusEdit"
:profileType="profileType"
v-model:data="CertificateData"
:fetch="fetchData"
/>
</div>
<div id="education" name="3" class="col-12 q-pa-sm" > <div id="education" name="3" class="col-12 q-pa-sm">
<div class="col-12 q-px-md"><q-separator size="4px"/></div> <div class="col-12 q-px-md"><q-separator size="4px" /></div>
<EducationVue v-model:statusEdit="statusEdit" /> <EducationVue
</div> v-model:statusEdit="statusEdit"
v-model:data="EducationData"
:fetch="fetchData"
/>
</div>
<div id="examresult" name="4" class="col-12 q-pa-sm" > <div id="examresult" name="4" class="col-12 q-pa-sm">
<div class="col-12 q-px-md"><q-separator size="4px"/></div> <div class="col-12 q-px-md"><q-separator size="4px" /></div>
<ExamResult /> <ExamResult v-model:data="ExamData" />
</div> </div>
<div id="qualification" name="5" class="col-12 q-pa-sm" > <div id="qualification" name="5" class="col-12 q-pa-sm">
<div class="col-12 q-px-md"><q-separator size="4px"/></div> <div class="col-12 q-px-md"><q-separator size="4px" /></div>
<Qualification v-model:statusEdit="statusEdit" /> <Qualification
</div> v-model:statusEdit="statusEdit"
</q-card> v-model:data="QualificationData"
</div> :fetch="fetchData"
/>
</div>
</q-card>
</div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.header-text { .header-text {
font-size: 24px; font-size: 24px;
font-weight: 700; font-weight: 700;
line-height: 32px; line-height: 32px;
letter-spacing: 0.0025em; letter-spacing: 0.0025em;
color: #35373C; color: #35373c;
} }
.information:target { .information:target {
padding-top: 84px; padding-top: 84px;
} }
.horizontal-line { .horizontal-line {
background-color: #F4F4F4; background-color: #f4f4f4;
height: 5px; height: 5px;
} }
</style> </style>

148
src/modules/05_placement/components/PersonalDetail/Education.vue
View file

@ -13,25 +13,36 @@ import type {
DataProps, DataProps,
} from "@/modules/05_placement/interface/request/Education"; } from "@/modules/05_placement/interface/request/Education";
import type { ResponseObject } from "@/modules/05_placement/interface/response/Education"; import type { ResponseObject } from "@/modules/05_placement/interface/response/Education";
import type { DataOption } from "@/modules/05_placement/interface/index/Main";
import HistoryTable from "@/components/TableHistory.vue"; import HistoryTable from "@/components/TableHistory.vue";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import type { EduOps } from "@/modules/05_placement/interface/index/Main"; import type {
EduOps,
Education,
DataOption,
optionData,
} from "@/modules/05_placement/interface/index/Main";
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
import type { PropType } from "vue";
const props = defineProps({ const props = defineProps({
statusEdit: { statusEdit: {
type: Boolean, type: Boolean,
required: true, required: true,
}, },
fetch: {
type: Function,
default: () => console.log("not function"),
},
data: {
type: Array as PropType<Education[]>,
default: [],
},
}); });
const $q = useQuasar(); const $q = useQuasar();
const store = useProfileDataStore(); const store = useProfileDataStore();
const { profileData, changeProfileColumns } = store; const { profileData, changeProfileColumns } = store;
const dataStore = useDataStore();
const { loaderPage } = dataStore;
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { success, dateToISO, date2Thai, messageError, showLoader, hideLoader } = const { success, dateToISO, date2Thai, messageError, showLoader, hideLoader } =
mixin; mixin;
@ -74,14 +85,14 @@ const tittleHistory = ref<string>("ประวัติแก้ไขประ
const filterHistory = ref<string>(""); //search data table history const filterHistory = ref<string>(""); //search data table history
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่ const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
const profileId = ref<string>(''); const profileId = ref<string>("");
// const profileId = ref<string>(route.params.id.toString()); // const profileId = ref<string>(route.params.id.toString());
const rows = ref<RequestItemsObject[]>([]); const rows = ref<Education[]>(props.data);
const filter = ref<string>(""); //search data table const filter = ref<string>(""); //search data table
const visibleColumns = ref<String[]>([]); const visibleColumns = ref<String[]>([]);
profileData.education.columns.length == 0 profileData.education.columns.length == 0
? (visibleColumns.value = [ ? (visibleColumns.value = [
"level", "educationLevel",
"institute", "institute",
"degree", "degree",
"field", "field",
@ -99,11 +110,11 @@ profileData.education.columns.length == 0
: (visibleColumns.value = profileData.education.columns); : (visibleColumns.value = profileData.education.columns);
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "level", name: "educationLevel",
align: "left", align: "left",
label: "ระดับศึกษา", label: "ระดับศึกษา",
sortable: true, sortable: true,
field: "level", field: "educationLevel",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) => sort: (a: string, b: string) =>
@ -459,9 +470,10 @@ watch(visibleColumns, async (count: String[], prevCount: String[]) => {
}); });
onMounted(async () => { onMounted(async () => {
// await fetchLevel(); await fetchLevel();
// await fetchPositionPath(); await fetchPositionPath();
// await fetchData(); await props.fetch();
rows.value = props.data;
}); });
const fetchLevel = async () => { const fetchLevel = async () => {
@ -470,8 +482,8 @@ const fetchLevel = async () => {
.get(config.API.educationLevel) .get(config.API.educationLevel)
.then((res) => { .then((res) => {
const data = res.data.result; const data = res.data.result;
let option: DataOption[] = []; let option: optionData[] = [];
data.map((r: DataOption) => { data.map((r: optionData) => {
option.push({ id: r.id.toString(), name: r.name.toString() }); option.push({ id: r.id.toString(), name: r.name.toString() });
}); });
Ops.value.levelOptions = option; Ops.value.levelOptions = option;
@ -491,8 +503,8 @@ const fetchPositionPath = async () => {
.get(config.API.positionPath) .get(config.API.positionPath)
.then((res) => { .then((res) => {
const data = res.data.result; const data = res.data.result;
let option: DataOption[] = []; let option: optionData[] = [];
data.map((r: DataOption) => { data.map((r: optionData) => {
option.push({ id: r.id.toString(), name: r.name.toString() }); option.push({ id: r.id.toString(), name: r.name.toString() });
}); });
Ops.value.positionPathOptions = option; Ops.value.positionPathOptions = option;
@ -511,7 +523,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
case "levelOptions": case "levelOptions":
update(() => { update(() => {
Ops.value.levelOptions = OpsFilter.value.levelOptions.filter( Ops.value.levelOptions = OpsFilter.value.levelOptions.filter(
(v: DataOption) => v.name.indexOf(val) > -1 (v: optionData) => v.name.indexOf(val) > -1
); );
}); });
break; break;
@ -519,7 +531,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
update(() => { update(() => {
Ops.value.positionPathOptions = Ops.value.positionPathOptions =
OpsFilter.value.positionPathOptions.filter( OpsFilter.value.positionPathOptions.filter(
(v: DataOption) => v.name.indexOf(val) > -1 (v: optionData) => v.name.indexOf(val) > -1
); );
}); });
break; break;
@ -528,45 +540,6 @@ const filterSelector = (val: any, update: Function, refData: string) => {
} }
}; };
const fetchData = async () => {
showLoader();
await http
.get(config.API.profileEduId(profileId.value))
.then((res) => {
let data = res.data.result;
rows.value = [];
data.map((e: ResponseObject) => {
rows.value.push({
id: e.id,
level: e.educationLevel,
levelId: e.educationLevelId,
positionPath: e.positionPath,
positionPathId: e.positionPathId,
institute: e.institute,
degree: e.degree,
field: e.field,
gpa: e.gpa,
country: e.country,
duration: e.duration,
durationYear: e.durationYear,
other: e.other,
fundName: e.fundName,
finishDate: new Date(e.finishDate),
startDate: new Date(e.startDate).getFullYear(),
endDate: new Date(e.endDate).getFullYear(),
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
/** /**
* กดดูข้อมูลก่อนหน้า * กดดูข้อมูลก่อนหน้า
*/ */
@ -592,8 +565,18 @@ const clickNext = async () => {
*/ */
const getData = () => { const getData = () => {
const row = rows.value[rowIndex.value]; const row = rows.value[rowIndex.value];
levelId.value = row.levelId; const filter = OpsFilter.value.levelOptions.filter(
positionPathId.value = row.positionPathId; (r: any) => r.name == row.educationLevel
);
const filterPositionPath = OpsFilter.value.positionPathOptions.filter(
(r: any) => r.name == row.positionPath
);
const result = filter.length > 0 ? filter[0].id : "";
const resultPath =
filterPositionPath.length > 0 ? filterPositionPath[0].id : "";
levelId.value = result;
positionPathId.value = resultPath;
institute.value = row.institute; institute.value = row.institute;
degree.value = row.degree; degree.value = row.degree;
field.value = row.field; field.value = row.field;
@ -660,15 +643,9 @@ const clickSave = async () => {
* บันทึกเพิ่มข้อมูล * บันทึกเพิ่มข้อมูล
*/ */
const saveData = async () => { const saveData = async () => {
// const filter = OpsFilter.value.levelOptions.filter(
// (r: any) => r.id == levelId.value
// );
// const filterPositionPath = OpsFilter.value.positionPathOptions.filter(
// (r: any) => r.id == positionPathId.value
// );
showLoader(); showLoader();
await http await http
.post(config.API.profileEduId(profileId.value), { .post(config.API.placementEducationId(route.params.personalId.toString()), {
id: id.value, id: id.value,
// educationLevel: filter[0].name, // educationLevel: filter[0].name,
educationLevelId: levelId.value, educationLevelId: levelId.value,
@ -679,7 +656,7 @@ const saveData = async () => {
gpa: gpa.value, gpa: gpa.value,
country: country.value, country: country.value,
duration: duration.value, duration: duration.value,
durationYear: durationYear.value, durationYear: Number(durationYear.value),
other: other.value, other: other.value,
fundName: fundName.value, fundName: fundName.value,
finishDate: dateToISO(finishDate.value), finishDate: dateToISO(finishDate.value),
@ -694,7 +671,8 @@ const saveData = async () => {
messageError($q, e); messageError($q, e);
}) })
.finally(async () => { .finally(async () => {
await fetchData(); await props.fetch();
rows.value = props.data;
}); });
}; };
@ -710,7 +688,7 @@ const editData = async () => {
// ); // );
showLoader(); showLoader();
await http await http
.put(config.API.profileEduId(id.value), { .put(config.API.placementEducationId(route.params.personalId.toString()), {
id: id.value, id: id.value,
// educationLevel: filter[0].name, // educationLevel: filter[0].name,
educationLevelId: levelId.value, educationLevelId: levelId.value,
@ -721,10 +699,10 @@ const editData = async () => {
gpa: gpa.value, gpa: gpa.value,
country: country.value, country: country.value,
duration: duration.value, duration: duration.value,
durationYear: durationYear.value, durationYear: Number(durationYear.value),
other: other.value, other: other.value,
fundName: fundName.value, fundName: fundName.value,
finishDate: dateToISO(finishDate.value), finishDate: new Date(finishDate.value),
startDate: new Date(`${startDate.value}-01-01`), startDate: new Date(`${startDate.value}-01-01`),
endDate: new Date(`${endDate.value}-01-01`), endDate: new Date(`${endDate.value}-01-01`),
}) })
@ -736,7 +714,8 @@ const editData = async () => {
messageError($q, e); messageError($q, e);
}) })
.finally(async () => { .finally(async () => {
await fetchData(); await props.fetch();
rows.value = props.data;
}); });
}; };
@ -754,7 +733,7 @@ const clickDelete = async () => {
.onOk(async () => { .onOk(async () => {
showLoader(); showLoader();
await http await http
.delete(config.API.profileEduId(id.value)) .delete(config.API.placementEducationId(id.value))
.then((res) => { .then((res) => {
success($q, "ลบข้อมูลสำเร็จ"); success($q, "ลบข้อมูลสำเร็จ");
modal.value = false; modal.value = false;
@ -763,11 +742,13 @@ const clickDelete = async () => {
messageError($q, e); messageError($q, e);
}) })
.finally(async () => { .finally(async () => {
await fetchData(); await props.fetch();
rows.value = props.data;
}); });
}) })
.onCancel(async () => { .onCancel(async () => {
await fetchData(); await props.fetch();
rows.value = props.data;
}); });
}; };
@ -799,13 +780,26 @@ const clickClose = async () => {
* @param _props ค่า props ใน row ที่เลือก * @param _props ค่า props ใน row ที่เลือก
*/ */
const selectData = async (_props: DataProps) => { const selectData = async (_props: DataProps) => {
const filter = OpsFilter.value.levelOptions.filter(
(r: any) => r.name == _props.row.educationLevel
);
const filterPositionPath = OpsFilter.value.positionPathOptions.filter(
(r: any) => r.name == _props.row.positionPath
);
const result = filter.length > 0 ? filter[0].id : "";
const resultPath =
filterPositionPath.length > 0 ? filterPositionPath[0].id : "";
// console.log(_props.row);
modalEdit.value = true; modalEdit.value = true;
modal.value = true; modal.value = true;
edit.value = false; edit.value = false;
rawItem.value = _props.row; rawItem.value = _props.row;
rowIndex.value = _props.rowIndex; rowIndex.value = _props.rowIndex;
levelId.value = _props.row.levelId; levelId.value = result;
positionPathId.value = _props.row.positionPathId; positionPathId.value = resultPath;
// levelId.value = _props.row.levelId;
// positionPathId.value = _props.row.positionPathId;
institute.value = _props.row.institute; institute.value = _props.row.institute;
degree.value = _props.row.degree; degree.value = _props.row.degree;
field.value = _props.row.field; field.value = _props.row.field;

176
src/modules/05_placement/components/PersonalDetail/ExamResult.vue
View file

@ -1,101 +1,137 @@
<script setup lang="ts"> <script setup lang="ts">
import type { PropType } from "vue";
import type { PointExam } from "@/modules/05_placement/interface/index/Main";
const props = defineProps({
data: {
type: Object as PropType<PointExam>,
default: {
pointA: 0,
pointB: 0,
pointC: 0,
pointTotalA: 0,
pointTotalB: 0,
pointTotalC: 0,
point: 0,
pointTotal: 0,
examNumber: 0,
examRound: 0,
pass: "",
},
},
});
</script> </script>
<template> <template>
<div class="row col-12 q-px-lg q-pt-lg q-pb-sm no-border"> <div class="row col-12 q-px-lg q-pt-lg q-pb-sm no-border">
<q-icon name="mdi-briefcase-edit" size="1.5em" color="grey-5" class="q-pr-md" /> <q-icon
<span class="text-bold text-subtitle2">ผลการสอบ</span> name="mdi-briefcase-edit"
</div> size="1.5em"
<div class="row q-px-md"> color="grey-5"
<div class="col-7"> class="q-pr-md"
<q-card class="card-exam"> />
<div class="row q-px-md q-py-sm"> <span class="text-bold text-subtitle2">ผลการสอบ</span>
<div class="col q-pa-xs header-sub-text-exam"> </div>
<div class="q-pb-xs"> ประเภท </div> <div class="row q-px-md">
<div class="q-pb-xs"> ภาค ก </div> <div class="col-7">
<div class="q-pb-xs"> ภาค ข </div> <q-card class="card-exam">
<div class="q-pb-xs"> ภาค ค </div> <div class="row q-px-md q-py-sm">
<div> รวมทั้งหมด </div> <div class="col q-pa-xs header-sub-text-exam">
</div> <div class="q-pb-xs">ประเภท</div>
<div class="col q-pa-xs"> <div class="q-pb-xs">ภาค ก</div>
<div class="header-sub-text-exam-2 q-pb-xs">คะแนนเต็ม</div> <div class="q-pb-xs">ภาค ข</div>
<div class="sub-text-exam q-pb-xs">200</div> <div class="q-pb-xs">ภาค ค</div>
<div class="sub-text-exam q-pb-xs">200</div> <div>รวมทั้งหมด</div>
<div class="sub-text-exam q-pb-xs">100</div> </div>
<div class="sub-text-exam ">500</div> <div class="col q-pa-xs">
</div> <div class="header-sub-text-exam-2 q-pb-xs">คะแนนเต็ม</div>
<div class="col q-pa-xs header-sub-text-exam-2"> <div class="sub-text-exam q-pb-xs">
<div class="header-sub-text-exam-2 q-pb-xs">คะแนนที่ได้</div> {{ props.data.pointTotalA }}
<div class="sub-text-exam q-pb-xs">133</div> </div>
<div class="sub-text-exam q-pb-xs">149</div> <div class="sub-text-exam q-pb-xs">
<div class="sub-text-exam q-pb-xs">100</div> {{ props.data.pointTotalB }}
<div class="sub-text-exam q-pb-xs">382</div> </div>
</div> <div class="sub-text-exam q-pb-xs">
</div> {{ props.data.pointTotalC }}
</q-card> </div>
</div> <div class="sub-text-exam">{{ props.data.pointTotal }}</div>
<div class="col q-pl-xl"> </div>
<q-card class="q-pt-xs"> <div class="col q-pa-xs header-sub-text-exam-2">
<div class="header-text-right q-px-xs">ผลการสอบ</div> <div class="header-sub-text-exam-2 q-pb-xs">คะแนนที่ได้</div>
<div class="sub-text-right q-px-xs q-pb-sm">ผ่าน</div> <div class="sub-text-exam q-pb-xs">{{ props.data.pointA }}</div>
<div class="header-text-right q-px-xs">ลำดับที่สอบได้</div> <div class="sub-text-exam q-pb-xs">{{ props.data.pointB }}</div>
<div class="sub-text-right q-px-xs q-pb-sm">3</div> <div class="sub-text-exam q-pb-xs">{{ props.data.pointC }}</div>
<div class="header-text-right q-px-xs">จำนวนครั้งที่สมัครสอบ</div> <div class="sub-text-exam q-pb-xs">{{ props.data.point }}</div>
<div class="sub-text-right q-px-xs q-pb-sm">5</div> </div>
</q-card>
</div> </div>
</q-card>
</div> </div>
<div class="col q-pl-xl">
<q-card class="q-pt-xs">
<div class="header-text-right q-px-xs">ผลการสอบ</div>
<div class="sub-text-right q-px-xs q-pb-sm">{{ props.data.pass }}</div>
<div class="header-text-right q-px-xs">ลำดับที่สอบได้</div>
<div class="sub-text-right q-px-xs q-pb-sm">
{{ props.data.examNumber }}
</div>
<div class="header-text-right q-px-xs">จำนวนครั้งที่สมัครสอบ</div>
<div class="sub-text-right q-px-xs q-pb-sm">
{{ props.data.examRound }}
</div>
</q-card>
</div>
</div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.header-text { .header-text {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #4F4F4F; color: #4f4f4f;
} }
.header-text-right { .header-text-right {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 150%; line-height: 150%;
color: #818181; color: #818181;
} }
.sub-text-right { .sub-text-right {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
line-height: 150%; line-height: 150%;
color: #000000; color: #000000;
} }
.sub-text { .sub-text {
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 22px;
letter-spacing: 0.0025em; letter-spacing: 0.0025em;
color: #35373C; color: #35373c;
} }
.card-exam { .card-exam {
border-radius: 5px; border-radius: 5px;
background: #FAFAFA; background: #fafafa;
} }
.header-sub-text-exam { .header-sub-text-exam {
font-size: 15px; font-size: 15px;
font-weight: 500; font-weight: 500;
line-height: 150%; line-height: 150%;
color: #818181; color: #818181;
} }
.header-sub-text-exam-2 { .header-sub-text-exam-2 {
font-size: 15px; font-size: 15px;
font-weight: 500; font-weight: 500;
line-height: 150%; line-height: 150%;
color: #00AA86; color: #00aa86;
} }
.sub-text-exam { .sub-text-exam {
font-size: 15px; font-size: 15px;
font-weight: 500; font-weight: 500;
color: #000000; color: #000000;
} }
</style> </style>

455
src/modules/05_placement/components/PersonalDetail/Information/Address.vue
View file

@ -2,23 +2,22 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import type { import type { zipCodeOption } from "@/modules/05_placement/components/PersonalDetail/profileType";
Address,
DataOption,
zipCodeOption,
} from "@/modules/05_placement/components/PersonalDetail/profileType";
import { defaultAddress } from "@/modules/05_placement/components/PersonalDetail/profileType";
import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue"; import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
import type { RequestItemsHistoryObject } from "@/modules//05_placement/interface/request/Address";
import type { ResponseObject } from "@/modules//05_placement/interface/response/Address";
import HistoryTable from "@/components/TableHistory.vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import type { AddressOps } from "@/modules//05_placement/interface/index/Main"; import { AddressDataDefualt } from "@/modules//05_placement/interface/index/Main";
import type { QTableProps } from "quasar";
import type {
AddressOps,
Address as AddressType,
optionData,
} from "@/modules//05_placement/interface/index/Main";
import type { PropType } from "vue";
const props = defineProps({ const props = defineProps({
statusEdit: { statusEdit: {
@ -29,24 +28,26 @@ const props = defineProps({
type: Function, type: Function,
default: () => console.log("not function"), default: () => console.log("not function"),
}, },
fetch: {
type: Function,
default: () => console.log("not function"),
},
data: {
type: Object as PropType<AddressType>,
default: AddressDataDefualt,
},
}); });
const emit = defineEmits(["update:statusEdit"]); const emit = defineEmits(["update:statusEdit"]);
const route = useRoute(); const route = useRoute();
const $q = useQuasar(); const $q = useQuasar();
const dataStore = useDataStore();
const { loaderPage } = dataStore;
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { date2Thai, success, messageError, showLoader, hideLoader } = mixin; const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
const edit = ref<boolean>(false); const edit = ref<boolean>(false);
const addressData = ref<Address>(defaultAddress); const addressData = ref<AddressType>(props.data);
const myform = ref<any>(); const myform = ref<any>();
const codep = ref<string>(""); const codep = ref<string>("");
const codec = ref<string>(""); const codec = ref<string>("");
const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลที่อยู่"); //
const filterHistory = ref<string>(""); //search data table history
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
const Ops = ref<AddressOps>({ const Ops = ref<AddressOps>({
provinceOps: [], provinceOps: [],
districtOps: [], districtOps: [],
@ -61,169 +62,9 @@ const OpsFilter = ref<AddressOps>({
subdistrictOps: [], subdistrictOps: [],
subdistrictCOps: [], subdistrictCOps: [],
}); });
const columnsHistory = ref<QTableProps["columns"]>([
{
name: "registrationAddress",
align: "left",
label: "ที่อยู่ตามทะเบียนบ้าน",
sortable: true,
field: "registrationAddress",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "registrationProvince",
align: "left",
label: "จังหวัดตามทะเบียนบ้าน",
sortable: true,
field: "registrationProvince",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "registrationDistrict",
align: "left",
label: "เขต/อำเภอตามทะเบียนบ้าน",
sortable: true,
field: "registrationDistrict",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "registrationSubDistrict",
align: "left",
label: "ตำบล/แขวงตามทะเบียนบ้าน",
sortable: true,
field: "registrationSubDistrict",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "registrationZipCode",
align: "left",
label: "รหัสไปรษณีย์ตามทะเบียนบ้าน",
sortable: true,
field: "registrationZipCode",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "registrationSame",
align: "left",
label: "ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน",
sortable: true,
field: "registrationSame",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "currentAddress",
align: "left",
label: "ที่อยู่ปัจจุบัน",
sortable: true,
field: "currentAddress",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "currentProvince",
align: "left",
label: "จังหวัดปัจจุบัน",
sortable: true,
field: "currentProvince",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "currentDistrict",
align: "left",
label: "เขต/อำเภอปัจจุบัน",
sortable: true,
field: "currentDistrict",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "currentSubDistrict",
align: "left",
label: "ตำบล/แขวงปัจจุบัน",
sortable: true,
field: "currentSubDistrict",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "currentZipCode",
align: "left",
label: "รหัสไปรษณีย์ปัจจุบัน",
sortable: true,
field: "currentZipCode",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "createdFullName",
align: "left",
label: "ผู้ดำเนินการ",
sortable: true,
field: "createdFullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "createdAt",
align: "left",
label: "วันที่แก้ไข",
sortable: true,
field: "createdAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const visibleColumnsHistory = ref<String[]>([
"currentAddress",
"currentDistrict",
"currentProvince",
"currentSubDistrict",
"currentZipCode",
"registrationAddress",
"registrationDistrict",
"registrationProvince",
"registrationSame",
"registrationSubDistrict",
"registrationZipCode",
"createdFullName",
"createdAt",
]);
onMounted(async () => { onMounted(async () => {
// await getNewData(); await getNewData();
emit("update:statusEdit", false); emit("update:statusEdit", false);
}); });
@ -232,35 +73,35 @@ const filterSelector = (val: any, update: Function, refData: string) => {
case "provinceOps": case "provinceOps":
update(() => { update(() => {
Ops.value.provinceOps = OpsFilter.value.provinceOps.filter( Ops.value.provinceOps = OpsFilter.value.provinceOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1 (v: optionData) => v.name.indexOf(val) > -1
); );
}); });
break; break;
case "districtOps": case "districtOps":
update(() => { update(() => {
Ops.value.districtOps = OpsFilter.value.districtOps.filter( Ops.value.districtOps = OpsFilter.value.districtOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1 (v: optionData) => v.name.indexOf(val) > -1
); );
}); });
break; break;
case "districtCOps": case "districtCOps":
update(() => { update(() => {
Ops.value.districtCOps = OpsFilter.value.districtCOps.filter( Ops.value.districtCOps = OpsFilter.value.districtCOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1 (v: optionData) => v.name.indexOf(val) > -1
); );
}); });
break; break;
case "subdistrictOps": case "subdistrictOps":
update(() => { update(() => {
Ops.value.subdistrictOps = OpsFilter.value.subdistrictOps.filter( Ops.value.subdistrictOps = OpsFilter.value.subdistrictOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1 (v: optionData) => v.name.indexOf(val) > -1
); );
}); });
break; break;
case "subdistrictCOps": case "subdistrictCOps":
update(() => { update(() => {
Ops.value.subdistrictCOps = OpsFilter.value.subdistrictCOps.filter( Ops.value.subdistrictCOps = OpsFilter.value.subdistrictCOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1 (v: optionData) => v.name.indexOf(val) > -1
); );
}); });
break; break;
@ -270,145 +111,85 @@ const filterSelector = (val: any, update: Function, refData: string) => {
} }
}; };
/**
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
*/
const clickHistory = async () => {
modalHistory.value = true;
showLoader();
await http
.get(config.API.profileAdrsHisId(route.params.id.toString()))
.then((res) => {
let data = res.data.result;
rowsHistory.value = [];
data.map((e: RequestItemsHistoryObject) => {
rowsHistory.value.push({
currentAddress: e.currentAddress,
currentDistrict: e.currentDistrict,
currentProvince: e.currentProvince,
currentSubDistrict: e.currentSubDistrict,
currentZipCode: e.currentZipCode,
registrationSame: e.registrationSame,
registrationAddress: e.registrationAddress,
registrationDistrict: e.registrationDistrict,
registrationProvince: e.registrationProvince,
registrationSubDistrict: e.registrationSubDistrict,
registrationZipCode: e.registrationZipCode,
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const refreshData = async () => { const refreshData = async () => {
myform.value.reset(); myform.value.reset();
await getNewData(); await getNewData();
}; };
const getNewData = async () => { const getNewData = async () => {
await fetchData(); await props.fetch();
await fetchProvince(); await fetchProvince();
await fetchDistrict(addressData.value.provinceId, "1"); await fetchDistrict(addressData.value.registProvinceId, "1");
await fetchDistrict(addressData.value.provinceIdC, "2"); await fetchDistrict(addressData.value.currentProvinceId, "2");
await fetchSubDistrict(addressData.value.districtId, "1"); await fetchSubDistrict(addressData.value.registDistrictId, "1");
await fetchSubDistrict(addressData.value.districtIdC, "2"); await fetchSubDistrict(addressData.value.currentDistrictId, "2");
await selectSubDistrict(addressData.value.subdistrictId, "1"); await selectSubDistrict(addressData.value.registSubDistrictId, "1");
await selectSubDistrict(addressData.value.subdistrictIdC, "2"); await selectSubDistrict(addressData.value.currentSubDistrictId, "2");
}; };
const fetchData = async () => { const editData = async () => {
const body = {
registrationSame: addressData.value.registSame == "1",
registrationAddress: addressData.value.registAddress,
registrationSubDistrictId: addressData.value.registSubDistrictId,
registrationDistrictId: addressData.value.registDistrictId,
registrationProvinceId: addressData.value.registProvinceId,
registrationZipCode: codep.value,
currentAddress:
addressData.value.registSame == "1"
? addressData.value.registAddress
: addressData.value.currentAddress,
currentSubDistrictId:
addressData.value.registSame == "1"
? addressData.value.registSubDistrictId
: addressData.value.currentSubDistrictId,
currentDistrictId:
addressData.value.registSame == "1"
? addressData.value.registDistrict
: addressData.value.currentDistrictId,
currentProvinceId:
addressData.value.registSame == "1"
? addressData.value.registProvinceId
: addressData.value.currentProvinceId,
currentZipCode:
addressData.value.registSame == "1" ? codep.value : codec.value,
};
showLoader(); showLoader();
await http await http
.get(config.API.profileAdrsId(route.params.id.toString())) .put(
config.API.placementAddressId(route.params.personalId.toString()),
body
)
.then((res) => { .then((res) => {
const data: ResponseObject = res.data.result; success($q, "แก้ไขข้อมูลสำเร็จ");
addressData.value.address = data.registrationAddress;
addressData.value.addressC = data.currentAddress;
addressData.value.districtId = data.registrationDistrictId;
addressData.value.districtIdC = data.currentDistrictId;
addressData.value.provinceId = data.registrationProvinceId;
addressData.value.provinceIdC = data.currentProvinceId;
addressData.value.subdistrictId = data.registrationSubDistrictId;
addressData.value.subdistrictIdC = data.currentSubDistrictId;
addressData.value.same = data.registrationSame ? "1" : "0";
}) })
.catch((e) => { .catch((e) => {
messageError($q, e); messageError($q, e);
}) })
.finally(() => { .finally(async () => {
hideLoader(); edit.value = false;
emit("update:statusEdit", false);
await getNewData();
}); });
}; };
const editData = async () => {
// const body: ResponseObject = {
// registrationSame: addressData.value.same == "1",
// registrationAddress: addressData.value.address,
// registrationSubDistrictId: addressData.value.subdistrictId,
// registrationDistrictId: addressData.value.districtId,
// registrationProvinceId: addressData.value.provinceId,
// registrationZipCode: codep.value,
// currentAddress:
// addressData.value.same == "1"
// ? addressData.value.address
// : addressData.value.addressC,
// currentSubDistrictId:
// addressData.value.same == "1"
// ? addressData.value.subdistrictId
// : addressData.value.subdistrictIdC,
// currentDistrictId:
// addressData.value.same == "1"
// ? addressData.value.districtId
// : addressData.value.districtIdC,
// currentProvinceId:
// addressData.value.same == "1"
// ? addressData.value.provinceId
// : addressData.value.provinceIdC,
// currentZipCode: addressData.value.same == "1" ? codep.value : codec.value,
// createdAt: new Date(),
// createdFullName: "-",
// };
// showLoader();
// await http
// .put(config.API.profileAdrsId(route.params.id.toString()), body)
// .then((res) => {
// success($q, "บันทึกข้อมูลสำเร็จ");
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(async () => {
// edit.value = false;
// emit("update:statusEdit", false);
// await getNewData();
// });
};
const saveData = async () => { const saveData = async () => {
// await myform.value.validate().then(async (success: boolean) => { await myform.value.validate().then(async (success: boolean) => {
// if (success) { if (success) {
// await editData(); await editData();
// } else { }
// } });
// });
}; };
const selectProvince = async (e: string | null, name: string) => { const selectProvince = async (e: string | null, name: string) => {
if (e != null) { if (e != null) {
if (name == "1") { if (name == "1") {
addressData.value.districtId = ""; addressData.value.registDistrictId = "";
addressData.value.subdistrictId = ""; addressData.value.registSubDistrictId = "";
codep.value = ""; codep.value = "";
} else { } else {
addressData.value.districtIdC = ""; addressData.value.currentDistrictId = "";
addressData.value.subdistrictIdC = ""; addressData.value.currentSubDistrictId = "";
codec.value = ""; codec.value = "";
} }
myform.value.resetValidation(); myform.value.resetValidation();
@ -419,10 +200,10 @@ const selectProvince = async (e: string | null, name: string) => {
const selectDistrict = async (e: string | null, name: string) => { const selectDistrict = async (e: string | null, name: string) => {
if (e != null) { if (e != null) {
if (name == "1") { if (name == "1") {
addressData.value.subdistrictId = ""; addressData.value.registSubDistrictId = "";
codep.value = ""; codep.value = "";
} else { } else {
addressData.value.subdistrictIdC = ""; addressData.value.currentSubDistrictId = "";
codec.value = ""; codec.value = "";
} }
myform.value.resetValidation(); myform.value.resetValidation();
@ -450,7 +231,7 @@ const fetchProvince = async () => {
.get(config.API.province) .get(config.API.province)
.then((res) => { .then((res) => {
const data = res.data.result; const data = res.data.result;
let option: DataOption[] = []; let option: optionData[] = [];
data.map((r: any) => { data.map((r: any) => {
option.push({ id: r.id.toString(), name: r.name.toString() }); option.push({ id: r.id.toString(), name: r.name.toString() });
}); });
@ -472,7 +253,7 @@ const fetchDistrict = async (id: string | null, position: string) => {
.get(config.API.listDistrict(id)) .get(config.API.listDistrict(id))
.then((res) => { .then((res) => {
const data = res.data.result; const data = res.data.result;
let option: DataOption[] = []; let option: optionData[] = [];
data.map((r: any) => { data.map((r: any) => {
option.push({ id: r.id.toString(), name: r.name.toString() }); option.push({ id: r.id.toString(), name: r.name.toString() });
}); });
@ -556,7 +337,6 @@ const getClass = (val: boolean) => {
:changeBtn="changeBtn" :changeBtn="changeBtn"
:disable="statusEdit" :disable="statusEdit"
:cancel="refreshData" :cancel="refreshData"
:historyClick="clickHistory"
/> />
<q-form ref="myform"> <q-form ref="myform">
<div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"> <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
@ -571,7 +351,7 @@ const getClass = (val: boolean) => {
autogrow autogrow
:readonly="!edit" :readonly="!edit"
:borderless="!edit" :borderless="!edit"
v-model="addressData.address" v-model="addressData.registAddress"
:rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
:label="`${'ที่อยู่ตามทะเบียนบ้าน'}`" :label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
/> />
@ -587,7 +367,7 @@ const getClass = (val: boolean) => {
:outlined="edit" :outlined="edit"
dense dense
lazy-rules lazy-rules
v-model="addressData.provinceId" v-model="addressData.registProvinceId"
emit-value emit-value
map-options map-options
option-label="name" option-label="name"
@ -613,7 +393,7 @@ const getClass = (val: boolean) => {
:outlined="edit" :outlined="edit"
dense dense
lazy-rules lazy-rules
v-model="addressData.districtId" v-model="addressData.registDistrictId"
emit-value emit-value
map-options map-options
option-label="name" option-label="name"
@ -639,7 +419,7 @@ const getClass = (val: boolean) => {
:outlined="edit" :outlined="edit"
dense dense
lazy-rules lazy-rules
v-model="addressData.subdistrictId" v-model="addressData.registSubDistrictId"
emit-value emit-value
map-options map-options
option-label="name" option-label="name"
@ -673,7 +453,7 @@ const getClass = (val: boolean) => {
>ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label >ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label
> >
<q-radio <q-radio
v-model="addressData.same" v-model="addressData.registSame"
checked-icon="task_alt" checked-icon="task_alt"
unchecked-icon="panorama_fish_eye" unchecked-icon="panorama_fish_eye"
val="1" val="1"
@ -682,7 +462,7 @@ const getClass = (val: boolean) => {
:disable="!edit" :disable="!edit"
/> />
<q-radio <q-radio
v-model="addressData.same" v-model="addressData.registSame"
checked-icon="task_alt" checked-icon="task_alt"
unchecked-icon="panorama_fish_eye" unchecked-icon="panorama_fish_eye"
val="0" val="0"
@ -692,7 +472,7 @@ const getClass = (val: boolean) => {
/> />
</div> </div>
<div class="col-xs-12" v-if="addressData.same == '0'"> <div class="col-xs-12" v-if="addressData.registSame == '0'">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
hide-bottom-space hide-bottom-space
@ -703,12 +483,15 @@ const getClass = (val: boolean) => {
autogrow autogrow
:readonly="!edit" :readonly="!edit"
:borderless="!edit" :borderless="!edit"
v-model="addressData.addressC" v-model="addressData.currentAddress"
:rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
:label="`${'ที่อยู่ปัจจุบัน'}`" :label="`${'ที่อยู่ปัจจุบัน'}`"
/> />
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'"> <div
class="col-xs-6 col-sm-3 col-md-3"
v-if="addressData.registSame == '0'"
>
<selector <selector
:hide-dropdown-icon="!edit" :hide-dropdown-icon="!edit"
hide-bottom-space hide-bottom-space
@ -719,7 +502,7 @@ const getClass = (val: boolean) => {
:outlined="edit" :outlined="edit"
dense dense
lazy-rules lazy-rules
v-model="addressData.provinceIdC" v-model="addressData.currentProvinceId"
emit-value emit-value
map-options map-options
option-label="name" option-label="name"
@ -734,7 +517,10 @@ const getClass = (val: boolean) => {
) " ) "
/> />
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'"> <div
class="col-xs-6 col-sm-3 col-md-3"
v-if="addressData.registSame == '0'"
>
<selector <selector
:hide-dropdown-icon="!edit" :hide-dropdown-icon="!edit"
hide-bottom-space hide-bottom-space
@ -745,7 +531,7 @@ const getClass = (val: boolean) => {
:outlined="edit" :outlined="edit"
dense dense
lazy-rules lazy-rules
v-model="addressData.districtIdC" v-model="addressData.currentDistrictId"
emit-value emit-value
map-options map-options
option-label="name" option-label="name"
@ -760,7 +546,10 @@ const getClass = (val: boolean) => {
) " ) "
/> />
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'"> <div
class="col-xs-6 col-sm-3 col-md-3"
v-if="addressData.registSame == '0'"
>
<selector <selector
:hide-dropdown-icon="!edit" :hide-dropdown-icon="!edit"
hide-bottom-space hide-bottom-space
@ -771,7 +560,7 @@ const getClass = (val: boolean) => {
:outlined="edit" :outlined="edit"
dense dense
lazy-rules lazy-rules
v-model="addressData.subdistrictIdC" v-model="addressData.currentSubDistrictId"
emit-value emit-value
map-options map-options
option-label="name" option-label="name"
@ -786,7 +575,10 @@ const getClass = (val: boolean) => {
) " ) "
/> />
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'"> <div
class="col-xs-6 col-sm-3 col-md-3"
v-if="addressData.registSame == '0'"
>
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
hide-bottom-space hide-bottom-space
@ -802,33 +594,4 @@ const getClass = (val: boolean) => {
</div> </div>
</q-form> </q-form>
</q-card> </q-card>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'createdAt'" class="table_ellipsis">
{{ date2Thai(col.value) }}
</div>
<div
v-else-if="col.name == 'registrationSame'"
class="table_ellipsis"
>
{{ col.value ? "ใช่" : "ไม่" }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template> </template>

126
src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue
View file

@ -18,6 +18,8 @@ import HistoryTable from "@/components/TableHistory.vue";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
import type { PropType } from "vue";
import type { Certificate } from "@/modules/05_placement/interface/index/Main";
const props = defineProps({ const props = defineProps({
statusEdit: { statusEdit: {
@ -28,13 +30,20 @@ const props = defineProps({
type: String, type: String,
required: true, required: true,
}, },
fetch: {
type: Function,
default: () => console.log("not function"),
},
data: {
type: Array as PropType<Certificate[]>,
default: [],
},
}); });
const $q = useQuasar(); const $q = useQuasar();
const store = useProfileDataStore(); const store = useProfileDataStore();
const { profileData, changeProfileColumns } = store; const { profileData, changeProfileColumns } = store;
const dataStore = useDataStore();
const { loaderPage } = dataStore;
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } = const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
mixin; mixin;
@ -64,7 +73,7 @@ const checkValidate = ref<boolean>(false); //validate data ผ่านหรื
// route.params.id ? route.params.id.toString() : "" // route.params.id ? route.params.id.toString() : ""
// ); // );
const profileId = ref<string>(""); const profileId = ref<string>("");
const rows = ref<RequestItemsObject[]>([]); const rows = ref<Certificate[]>([]);
const filter = ref<string>(""); //search data table const filter = ref<string>(""); //search data table
const visibleColumns = ref<String[]>([]); const visibleColumns = ref<String[]>([]);
profileData.certicate.columns.length == 0 profileData.certicate.columns.length == 0
@ -229,40 +238,12 @@ watch(visibleColumns, async (count: String[], prevCount: String[]) => {
onMounted(async () => { onMounted(async () => {
// await fetchData(); // await fetchData();
if (route.params.id) { if (route.params.id) {
profileId.value = route.params.id.toString(); profileId.value = route.params.personalId.toString();
} }
await props.fetch();
rows.value = props.data;
}); });
const fetchData = async () => {
if (profileId.value != "") {
showLoader();
await http
.get(config.API.profileCertId(profileId.value))
.then((res) => {
let data = res.data.result;
rows.value = [];
data.map((e: ResponseObject) => {
rows.value.push({
id: e.id,
certificateNo: e.certificateNo,
issuer: e.issuer,
issueDate: new Date(e.issueDate),
expireDate: new Date(e.expireDate),
certificateType: e.certificateType,
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
};
/** /**
* กดดูข้อมูลก่อนหน้า * กดดูข้อมูลก่อนหน้า
*/ */
@ -347,42 +328,16 @@ const clickSave = async () => {
* บันทึกเพิ่มข้อมูล * บันทึกเพิ่มข้อมูล
*/ */
const saveData = async () => { const saveData = async () => {
if (profileId.value !== "") { // console.log("saveData");
showLoader();
await http
.post(config.API.profileCertId(profileId.value), {
id: id.value,
certificateNo: certificateNo.value,
issuer: issuer.value,
issueDate: dateToISO(issueDate.value),
expireDate: dateToISO(expireDate.value),
certificateType: certificateType.value,
})
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
}
};
/**
* บันทึกแก้ไขข้อมูล
*/
const editData = async () => {
showLoader(); showLoader();
await http await http
.put(config.API.profileCertId(id.value), { .post(config.API.placementCertId(route.params.personalId.toString()), {
id: id.value, id: id.value,
certificateNo: certificateNo.value, certificateNo: certificateNo.value,
issuer: issuer.value, issuer: issuer.value,
issueDate: dateToISO(issueDate.value), issueDate: new Date(issueDate.value),
expireDate: dateToISO(expireDate.value), expireDate: new Date(expireDate.value),
certificateType: certificateType.value, certificateType: certificateType.value,
}) })
.then((res) => { .then((res) => {
@ -393,7 +348,35 @@ const editData = async () => {
messageError($q, e); messageError($q, e);
}) })
.finally(async () => { .finally(async () => {
await fetchData(); await props.fetch();
rows.value = props.data;
});
};
/**
* บันทึกแก้ไขข้อมูล
*/
const editData = async () => {
showLoader();
await http
.put(config.API.placementCertId(route.params.personalId.toString()), {
id: id.value,
certificateNo: certificateNo.value,
issuer: issuer.value,
issueDate: new Date(issueDate.value),
expireDate: new Date(expireDate.value),
certificateType: certificateType.value,
})
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await props.fetch();
rows.value = props.data;
}); });
}; };
@ -411,7 +394,12 @@ const clickDelete = async () => {
.onOk(async () => { .onOk(async () => {
showLoader(); showLoader();
await http await http
.delete(config.API.profileCertId(id.value)) .delete(
config.API.placementCertDetailId(
route.params.personalId.toString(),
id.value
)
)
.then((res) => { .then((res) => {
success($q, "ลบข้อมูลสำเร็จ"); success($q, "ลบข้อมูลสำเร็จ");
modal.value = false; modal.value = false;
@ -420,11 +408,13 @@ const clickDelete = async () => {
messageError($q, e); messageError($q, e);
}) })
.finally(async () => { .finally(async () => {
await fetchData(); await props.fetch();
rows.value = props.data;
}); });
}) })
.onCancel(async () => { .onCancel(async () => {
await fetchData(); await props.fetch();
rows.value = props.data;
}); });
}; };

843
src/modules/05_placement/components/PersonalDetail/Information/Family.vue
View file

File diff suppressed because it is too large Load diff

528
src/modules/05_placement/components/PersonalDetail/Information/Information.vue
View file

@ -2,26 +2,26 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import type { import type {
Information, Information,
DataOption, DataOption,
} from "@/modules/05_placement/components/PersonalDetail/profileType"; } from "@/modules/05_placement/components/PersonalDetail/profileType";
import { defaultInformation } from "@/modules/05_placement/components/PersonalDetail/profileType"; import { defaultInformation } from "@/modules/05_placement/components/PersonalDetail/profileType";
import type { import type {
RequestItemsHistoryObject, InformationOps,
Columns, optionData,
} from "@/modules/05_placement/interface/request/Information"; } from "@/modules/05_placement/interface/index/Main";
import type { ResponseObject } from "@/modules/05_placement/interface/response/Information";
import type { InformationOps } from "@/modules/05_placement/interface/index/Main";
import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue"; import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
import HistoryTable from "@/components/TableHistory.vue";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { useProfileDataStore } from "@/modules/05_placement/store"; import { useProfileDataStore } from "@/modules/05_placement/store";
import type { QTableColumn, QForm } from "quasar";
import type { QForm } from "quasar";
import type { PropType } from "vue";
const props = defineProps({ const props = defineProps({
statusEdit: { statusEdit: {
@ -32,6 +32,14 @@ const props = defineProps({
type: Function, type: Function,
default: () => console.log("not function"), default: () => console.log("not function"),
}, },
fetch: {
type: Function,
default: () => console.log("not function"),
},
data: {
type: Object as PropType<Information>,
default: defaultInformation,
},
}); });
const emit = defineEmits(["update:statusEdit"]); const emit = defineEmits(["update:statusEdit"]);
@ -47,16 +55,11 @@ const {
showLoader, showLoader,
hideLoader, hideLoader,
} = mixin; } = mixin;
const dataStore = useDataStore();
const { loaderPage } = dataStore;
const profileStore = useProfileDataStore(); const profileStore = useProfileDataStore();
const { changeRetireText, changeBirth } = profileStore; const { changeRetireText, changeBirth } = profileStore;
const edit = ref<boolean>(false); const edit = ref<boolean>(false);
const informaData = ref<Information>(defaultInformation); const informaData = ref<Information>(props.data);
const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลส่วนตัว"); //
const filterHistory = ref<string>(""); //search data table history
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
const age = ref<boolean>(true); const age = ref<boolean>(true);
const myform = ref<QForm | null>(null); const myform = ref<QForm | null>(null);
const Ops = ref<InformationOps>({ const Ops = ref<InformationOps>({
@ -89,214 +92,17 @@ const OpsFilter = ref<InformationOps>({
{ id: "bkk", name: "งบประมาณกรุงเทพมหานคร" }, { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
], ],
}); });
const columnsHistory = ref<QTableColumn[]>([
{
name: "citizenId",
align: "left",
label: "เลขบัตรประจำตัวประชาชน",
sortable: true,
field: "citizenId",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "prefix",
align: "left",
label: "คำนำหน้า",
sortable: true,
field: "prefix",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "firstName",
align: "left",
label: "ชื่อ",
sortable: true,
field: "firstName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "lastName",
align: "left",
label: "นามสกุล",
sortable: true,
field: "lastName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "birthDate",
align: "left",
label: "วัน/เดือน/ปี เกิด",
sortable: true,
field: "birthDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "gender",
align: "left",
label: "เพศ",
sortable: true,
field: "gender",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "relationship",
align: "left",
label: "สถานภาพ",
sortable: true,
field: "relationship",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "bloodGroup",
align: "left",
label: "หมู่เลือด",
sortable: true,
field: "bloodGroup",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "nationality",
align: "left",
label: "สัญชาติ",
sortable: true,
field: "nationality",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "race",
align: "left",
label: "เชื้อชาติ",
sortable: true,
field: "race",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "religion",
align: "left",
label: "ศาสนา",
sortable: true,
field: "religion",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "telephoneNumber",
align: "left",
label: "เบอร์โทร",
sortable: true,
field: "telephoneNumber",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "employeeType",
align: "left",
label: "ประเภทการจ้าง",
sortable: true,
field: "employeeType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "employeeClass",
align: "left",
label: "ประเภทลูกจ้าง",
sortable: true,
field: "employeeClass",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "createdFullName",
align: "left",
label: "ผู้ดำเนินการ",
sortable: true,
field: "createdFullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "createdAt",
align: "left",
label: "วันที่แก้ไข",
sortable: true,
field: "createdAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const visibleColumnsHistory = ref<String[]>([
"citizenId",
"prefix",
"firstName",
"lastName",
"birthDate",
"gender",
"relationship",
"bloodGroup",
"nationality",
"race",
"religion",
"telephoneNumber",
"employeeType",
"employeeClass",
"createdFullName",
"createdAt",
]);
onMounted(async () => { onMounted(async () => {
// await fetchPerson(); await fetchPerson();
// await fetchData();
emit("update:statusEdit", false); emit("update:statusEdit", false);
}); });
const onCancel = async () => { const onCancel = async () => {
// if (myform.value != null) { if (myform.value != null) {
// myform.value.reset(); myform.value.reset();
// } }
// await fetchData(); await props.fetch();
}; };
/** /**
@ -308,51 +114,52 @@ const fetchPerson = async () => {
.get(config.API.person) .get(config.API.person)
.then((res) => { .then((res) => {
const data = res.data.result; const data = res.data.result;
let optionbloodGroups: DataOption[] = []; let optionbloodGroups: optionData[] = [];
// console.log(data);
data.bloodGroups.map((r: any) => { data.bloodGroups.map((r: any) => {
optionbloodGroups.push({ optionbloodGroups.push({
id: r.id.toString(), id: r.id ?? "",
name: r.name.toString(), name: r.name ?? "",
}); });
}); });
Ops.value.bloodOps = optionbloodGroups; Ops.value.bloodOps = optionbloodGroups;
OpsFilter.value.bloodOps = optionbloodGroups; OpsFilter.value.bloodOps = optionbloodGroups;
let optiongenders: DataOption[] = []; let optiongenders: optionData[] = [];
data.genders.map((r: any) => { data.genders.map((r: any) => {
optiongenders.push({ optiongenders.push({
id: r.id.toString(), id: r.id ?? "",
name: r.name.toString(), name: r.name ?? "",
}); });
}); });
Ops.value.genderOps = optiongenders; Ops.value.genderOps = optiongenders;
OpsFilter.value.genderOps = optiongenders; OpsFilter.value.genderOps = optiongenders;
let optionprefixs: DataOption[] = []; let optionprefixs: optionData[] = [];
data.prefixs.map((r: any) => { data.prefixs.map((r: any) => {
optionprefixs.push({ optionprefixs.push({
id: r.id.toString(), id: r.id ?? "",
name: r.name.toString(), name: r.name ?? "",
}); });
}); });
Ops.value.prefixOps = optionprefixs; Ops.value.prefixOps = optionprefixs;
OpsFilter.value.prefixOps = optionprefixs; OpsFilter.value.prefixOps = optionprefixs;
let optionrelationships: DataOption[] = []; let optionrelationships: optionData[] = [];
data.relationships.map((r: any) => { data.relationships.map((r: any) => {
optionrelationships.push({ optionrelationships.push({
id: r.id.toString(), id: r.id ?? "",
name: r.name.toString(), name: r.name ?? "",
}); });
}); });
Ops.value.statusOps = optionrelationships; Ops.value.statusOps = optionrelationships;
OpsFilter.value.statusOps = optionrelationships; OpsFilter.value.statusOps = optionrelationships;
let optionreligions: DataOption[] = []; let optionreligions: optionData[] = [];
data.religions.map((r: any) => { data.religions.map((r: any) => {
optionreligions.push({ optionreligions.push({
id: r.id.toString(), id: r.id ?? "",
name: r.name.toString(), name: r.name ?? "",
}); });
}); });
Ops.value.religionOps = optionreligions; Ops.value.religionOps = optionreligions;
@ -364,56 +171,6 @@ const fetchPerson = async () => {
}); });
}; };
/**
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
*/
const clickHistory = async () => {
modalHistory.value = true;
showLoader();
await http
.get(config.API.profileInforHisId(route.params.id.toString()))
.then((res) => {
let data = res.data.result;
rowsHistory.value = [];
data.map((e: RequestItemsHistoryObject) => {
rowsHistory.value.push({
citizenId: e.citizenId,
prefix: e.prefix,
firstName: e.firstName,
lastName: e.lastName,
birthDate: new Date(e.birthDate),
gender: e.gender,
relationship: e.relationship,
bloodGroup: e.bloodGroup,
nationality: e.nationality,
race: e.race,
religion: e.religion,
telephoneNumber: e.telephoneNumber,
employeeType:
e.employeeType == "gov"
? "งบประมาณเงินอุดหนุนรัฐบาล"
: e.employeeType == "bkk"
? "งบประมาณกรุงเทพมหานคร"
: "-",
employeeClass:
e.employeeClass == "perm"
? "ลูกจ้างประจำ"
: e.employeeClass == "temp"
? "ลูกจ้างชั่วคราว"
: "-",
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const filterSelector = (val: any, update: Function, refData: string) => { const filterSelector = (val: any, update: Function, refData: string) => {
switch (refData) { switch (refData) {
case "prefixOps": case "prefixOps":
@ -472,7 +229,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
}; };
const handleDate = async (modelData: Date) => { const handleDate = async (modelData: Date) => {
informaData.value.birthDate = modelData; informaData.value.dateOfBirth = modelData;
await calRetire(modelData); await calRetire(modelData);
}; };
@ -500,91 +257,51 @@ const calRetire = async (birth: Date) => {
}); });
}; };
const fetchData = async () => { const editData = async () => {
if (age.value == false) {
modalError($q, "พบข้อผิดพลาด", "วันเกิดไม่ถูกต้อง");
return;
}
const body: any = {
citizenId: informaData.value.idCard,
prefixId: informaData.value.prefixId,
firstName: informaData.value.firstname,
lastName: informaData.value.lastname,
genderId: informaData.value.genderId,
nationality: informaData.value.nationality,
race: informaData.value.race,
religionId: informaData.value.religionId,
birthDate: informaData.value.dateOfBirth,
bloodGroupId: informaData.value.bloodGroupId,
relationshipId: informaData.value.relationshipId,
telephoneNumber: informaData.value.telephone,
};
showLoader(); showLoader();
await http await http
.get(config.API.profileInforId(route.params.id.toString())) .put(
.then(async (res: any) => { config.API.placementInformationId(route.params.personalId.toString()),
const data: ResponseObject = res.data.result; body
informaData.value.cardid = data.citizenId; )
informaData.value.prefix = ""; .then((res) => {
informaData.value.prefixId = data.prefixId; success($q, "บันทึกข้อมูลสำเร็จ");
informaData.value.firstname = data.firstName;
informaData.value.lastname = data.lastName;
informaData.value.birthDate = new Date(data.birthDate);
informaData.value.genderId = data.genderId;
informaData.value.bloodId = data.bloodGroupId;
informaData.value.nationality = data.nationality;
informaData.value.ethnicity = data.race;
informaData.value.statusId = data.relationshipId;
informaData.value.religionId = data.religionId;
informaData.value.tel = data.telephoneNumber;
informaData.value.age = data.age;
informaData.value.employeeType = data.employeeType;
informaData.value.employeeClass = data.employeeClass;
informaData.value.profileType = data.profileType;
await calRetire(new Date(dateToISO(new Date(data.birthDate))));
if (data.profileType == "officer" && columnsHistory.value.length >= 15) {
columnsHistory.value.splice(13, 1);
columnsHistory.value.splice(12, 1);
}
}) })
.catch((e) => { .catch((e) => {
messageError($q, e); messageError($q, e);
}) })
.finally(() => { .finally(async () => {
hideLoader(); edit.value = false;
emit("update:statusEdit", false);
await props.fetch();
await changeBirth(informaData.value.dateOfBirth ?? new Date());
}); });
}; };
const editData = async () => {
// if (age.value == false) {
// modalError($q, "พบข้อผิดพลาด", "วันเกิดไม่ถูกต้อง");
// return;
// }
// const body: any = {
// citizenId: informaData.value.cardid,
// prefixId: informaData.value.prefixId,
// firstName: informaData.value.firstname,
// lastName: informaData.value.lastname,
// genderId: informaData.value.genderId,
// nationality: informaData.value.nationality,
// race: informaData.value.ethnicity,
// religionId: informaData.value.religionId,
// birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
// bloodGroupId: informaData.value.bloodId,
// relationshipId: informaData.value.statusId,
// telephoneNumber: informaData.value.tel,
// createdAt: new Date(),
// age: null,
// employeeType: informaData.value.employeeType,
// employeeClass: informaData.value.employeeClass,
// profileType: informaData.value.profileType,
// createdFullName: "-",
// };
// showLoader();
// await http
// .put(config.API.profileInforId(route.params.id.toString()), body)
// .then((res) => {
// success($q, "บันทึกข้อมูลสำเร็จ");
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(async () => {
// edit.value = false;
// emit("update:statusEdit", false);
// await fetchData();
// await changeBirth(informaData.value.birthDate ?? new Date());
// });
};
const saveData = async () => { const saveData = async () => {
if (myform.value != null) { if (myform.value != null) {
await myform.value.validate().then(async (success: boolean) => { await myform.value.validate().then(async (success: boolean) => {
if (success) { if (success) {
await editData(); await editData();
} else {
} }
}); });
} }
@ -621,7 +338,6 @@ const getClass = (val: boolean) => {
:changeBtn="changeBtn" :changeBtn="changeBtn"
:disable="statusEdit" :disable="statusEdit"
:cancel="onCancel" :cancel="onCancel"
:historyClick="clickHistory"
/> />
<q-form ref="myform" class="col-12"> <q-form ref="myform" class="col-12">
<div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm"> <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
@ -634,7 +350,7 @@ const getClass = (val: boolean) => {
lazy-rules lazy-rules
:readonly="!edit" :readonly="!edit"
:borderless="!edit" :borderless="!edit"
v-model="informaData.cardid" v-model="informaData.idCard"
maxlength="13" maxlength="13"
:rules="[ :rules="[
(val:string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`, (val:string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
@ -702,7 +418,7 @@ const getClass = (val: boolean) => {
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-6 col-sm-3 col-md-3">
<datepicker <datepicker
v-model="informaData.birthDate" v-model="informaData.dateOfBirth"
:locale="'th'" :locale="'th'"
autoApply autoApply
:enableTimePicker="false" :enableTimePicker="false"
@ -726,7 +442,11 @@ const getClass = (val: boolean) => {
lazy-rules lazy-rules
:readonly="!edit" :readonly="!edit"
:borderless="!edit" :borderless="!edit"
:model-value="date2Thai(informaData.birthDate)" :model-value="
informaData.dateOfBirth
? date2Thai(informaData.dateOfBirth)
: ''
"
:rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]" :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
:label="`${'วัน/เดือน/ปี เกิด'}`" :label="`${'วัน/เดือน/ปี เกิด'}`"
> >
@ -793,7 +513,7 @@ const getClass = (val: boolean) => {
:outlined="edit" :outlined="edit"
dense dense
lazy-rules lazy-rules
v-model="informaData.statusId" v-model="informaData.relationshipId"
emit-value emit-value
map-options map-options
option-label="name" option-label="name"
@ -818,7 +538,7 @@ const getClass = (val: boolean) => {
:outlined="edit" :outlined="edit"
dense dense
lazy-rules lazy-rules
v-model="informaData.bloodId" v-model="informaData.bloodGroupId"
emit-value emit-value
map-options map-options
option-label="name" option-label="name"
@ -855,7 +575,7 @@ const getClass = (val: boolean) => {
lazy-rules lazy-rules
:readonly="!edit" :readonly="!edit"
:borderless="!edit" :borderless="!edit"
v-model="informaData.ethnicity" v-model="informaData.race"
:rules="[(val:string) => !!val || `${'กรุณากรอก เชื้อชาติ'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอก เชื้อชาติ'}`]"
:label="`${'เชื้อชาติ'}`" :label="`${'เชื้อชาติ'}`"
/> />
@ -885,7 +605,7 @@ const getClass = (val: boolean) => {
) " ) "
/> />
</div> </div>
<!-- <div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-6 col-sm-3 col-md-3">
<q-input <q-input
hide-bottom-space hide-bottom-space
:outlined="edit" :outlined="edit"
@ -895,7 +615,7 @@ const getClass = (val: boolean) => {
:class="getClass(edit)" :class="getClass(edit)"
:readonly="!edit" :readonly="!edit"
:borderless="!edit" :borderless="!edit"
v-model="informaData.tel" v-model="informaData.telephone"
:rules="[ :rules="[
(val:string) => !!val || `${'กรุณากรอก เบอร์โทร'}`, (val:string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
(val:string) => val.length >= 10 || `${'กรุณากรอกข้อมูลเบอร์โทรให้ครบ'}`, (val:string) => val.length >= 10 || `${'กรุณากรอกข้อมูลเบอร์โทรให้ครบ'}`,
@ -903,90 +623,8 @@ const getClass = (val: boolean) => {
:label="`${'เบอร์โทร'}`" :label="`${'เบอร์โทร'}`"
mask="##########" mask="##########"
/> />
</div> -->
<div
class="col-xs-6 col-sm-4 col-md-4"
v-if="informaData.profileType == 'employee'"
>
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทการจ้าง'}`]"
:outlined="edit"
dense
lazy-rules
v-model="informaData.employeeType"
emit-value
map-options
option-label="name"
:options="Ops.employeeTypeOps"
option-value="id"
:label="`${'ประเภทการจ้าง'}`"
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
) "
/>
</div>
<div
class="col-xs-6 col-sm-2 col-md-2"
v-if="informaData.profileType == 'employee'"
>
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทลูกจ้าง'}`]"
:outlined="edit"
dense
lazy-rules
v-model="informaData.employeeClass"
emit-value
map-options
option-label="name"
:options="Ops.employeeClassOps"
option-value="id"
:label="`${'ประเภทลูกจ้าง'}`"
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
) "
/>
</div> </div>
</div> </div>
</q-form> </q-form>
</q-card> </q-card>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div
v-if="col.name == 'birthDate' || col.name == 'createdAt'"
class="table_ellipsis"
>
{{ date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template> </template>

5
src/modules/05_placement/components/PersonalDetail/Information/layout.vue
View file

@ -43,7 +43,6 @@ const notiNoEdit = () => {
const closeModalError = () => { const closeModalError = () => {
modalNoEdit.value = false; modalNoEdit.value = false;
}; };
</script> </script>
<template> <template>
<div class="row col-12 items-center"> <div class="row col-12 items-center">
@ -51,7 +50,7 @@ const closeModalError = () => {
<Information :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" /> <Information :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
</div> </div>
<div class="col-12 q-px-md"><q-separator size="4px"/></div> <div class="col-12 q-px-md"><q-separator size="4px" /></div>
<div> <div>
<Address :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" /> <Address :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
@ -60,7 +59,7 @@ const closeModalError = () => {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.horizontal-line { .horizontal-line {
background-color: #F4F4F4; background-color: #f4f4f4;
height: 5px; height: 5px;
} }
</style> </style>

106
src/modules/05_placement/components/PersonalDetail/Qualification.vue
View file

@ -1,46 +1,69 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref, onMounted } from "vue";
import type { CheckboxItem } from "@/modules/05_placement/interface/index/Main";
import type { QForm } from 'quasar';
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import { useRoute } from "vue-router";
import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue"; import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type { PropType } from "vue";
import type { Property } from "@/modules/05_placement/interface/index/Main";
const $q = useQuasar(); const $q = useQuasar();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { const route = useRoute();
modalError, const { showLoader, hideLoader, messageError, success } = mixin;
} = mixin;
const props = defineProps({ const props = defineProps({
statusEdit: { statusEdit: {
type: Boolean, type: Boolean,
required: true, required: true,
}, },
notiNoEdit: { data: {
type: Array as PropType<Property[]>,
default: [],
},
fetch: {
type: Function, type: Function,
default: () => console.log("not function"), default: () => console.log("not function"),
}, },
}); });
const emit = defineEmits(["update:statusEdit"]); const emit = defineEmits(["update:statusEdit", "update:data"]);
const edit = ref<boolean>(false); const edit = ref<boolean>(false);
const myform = ref<QForm | null>(null);
onMounted(() => {
emit("update:statusEdit", false);
});
const saveData = async () => { const saveData = async () => {
if (myform.value != null) { showLoader();
await myform.value.validate().then(async (success: boolean) => { await http
if (success) { .put(
await editData(); config.API.placementPropertyId(route.params.personalId.toString()),
} else { props.data
} )
.then((res: any) => {
success($q, "แก้ไขข้อมูลสำเร็จ");
})
.catch((e: any) => {
messageError($q, e);
})
.finally(async () => {
await props.fetch();
edit.value = false;
hideLoader();
changeBtn();
}); });
}
}; };
const changeBtn = async () => { const changeBtn = async () => {
if (edit.value == true) { if (edit.value == true) {
if (props.statusEdit === true) { if (props.statusEdit === true) {
edit.value = false; edit.value = false;
props.notiNoEdit();
} else { } else {
emit("update:statusEdit", true); emit("update:statusEdit", true);
} }
@ -49,42 +72,33 @@ const changeBtn = async () => {
} }
}; };
const editData = async () => {
modalError($q, "พบข้อผิดพลาด", "วันเกิดไม่ถูกต้อง");
}
const onCancel = async () => { const onCancel = async () => {
if (myform.value != null) { await props.fetch();
myform.value.reset();
}
// await fetchData();
}; };
const selection = ref([]);
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: 'เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ' },
]
</script> </script>
<template> <template>
<div class="row col-12 q-px-lg q-pt-lg q-pb-sm no-border"> <div class="row col-12 q-px-lg q-pt-lg q-pb-sm no-border">
<HeaderTop v-model:edit="edit" header="การคัดกรองคุณสมบัติ" icon="mdi-account-search" :save="saveData" <HeaderTop
:history="false" :changeBtn="changeBtn" :disable="statusEdit" :cancel="onCancel" /> v-model:edit="edit"
header="การคัดกรองคุณสมบัติ"
icon="mdi-account-search"
:save="saveData"
:history="false"
:changeBtn="changeBtn"
:disable="statusEdit"
:cancel="onCancel"
/>
</div> </div>
<div class="row q-px-lg"> <div class="row q-px-lg">
<div v-for="item of checkboxItems" :key="item.id" class="col-12 q-pt-sm"> <div v-for="item of props.data" :key="item.name" class="col-12 q-pt-sm">
<q-checkbox size="xs" v-model="selection" :val="item.id" :label="item.label" keep-color color="gray-5" <q-checkbox
:disable="!statusEdit" /> size="xs"
v-model="item.value"
:label="item.name"
keep-color
color="gray-5"
:disable="!statusEdit"
/>
<q-separator /> <q-separator />
</div> </div>
</div> </div>

48
src/modules/05_placement/components/PersonalDetail/profileType.ts
View file

@ -8,23 +8,25 @@ interface ChangeActive {
//ข้อมูลส่วนตัว //ข้อมูลส่วนตัว
interface Information { interface Information {
cardid: string | null; idCard: string | null;
prefix: string | null; prefix: string | null;
age: string | null;
prefixId: string | null; prefixId: string | null;
fullName: string | null;
firstname: string | null; firstname: string | null;
lastname: string | null; lastname: string | null;
birthDate: Date;
genderId: string | null;
bloodId: string | null;
nationality: string | null; nationality: string | null;
ethnicity: string | null; race: string | null;
statusId: string | null; dateOfBirth: Date | null;
age: string | null;
telephone: string | null;
gender: string | null;
genderId: string | null;
relationship: string | null;
relationshipId: string | null;
bloodGroup: string | null;
bloodGroupId: string | null;
religion: string | null;
religionId: string | null; religionId: string | null;
tel: string | null;
employeeType: string | null;
employeeClass: string | null;
profileType: string | null;
} }
interface Family { interface Family {
@ -119,23 +121,25 @@ const defaultAddress: Address = {
}; };
const defaultInformation: Information = { const defaultInformation: Information = {
cardid: null, idCard: null,
age: null,
prefix: null, prefix: null,
prefixId: null, prefixId: null,
fullName: null,
firstname: null, firstname: null,
lastname: null, lastname: null,
birthDate: new Date(),
genderId: null,
bloodId: null,
nationality: null, nationality: null,
ethnicity: null, race: null,
statusId: null, dateOfBirth: new Date(),
age: null,
telephone: null,
gender: null,
genderId: null,
relationship: null,
relationshipId: null,
bloodGroup: null,
bloodGroupId: null,
religion: null,
religionId: null, religionId: null,
tel: null,
employeeType: null,
employeeClass: null,
profileType: null,
}; };
const defaultFamily: Family = { const defaultFamily: Family = {

125
src/modules/05_placement/components/PersonalList/Detail.vue Normal file
View file

@ -0,0 +1,125 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { defineAsyncComponent } from "@vue/runtime-core";
import { useRouter, useRoute } from "vue-router";
import cardTop from "@/modules/05_placement/components/PersonalList/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, showLoader, hideLoader } = mixin
let roleAdmin = ref<boolean>(false);
const router = useRouter();
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/PersonalList/Table.vue")
);
const stat = ref<any>({
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 () => {
if (DataStore.DataMainOrig.length == 0) {
await fetchPlacementData();
}
if (keycloak.tokenParsed != null) {
roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
}
await getStat()
examData.value = await DataStore.DataMainOrig.find((x: any) => x.id == examId);
title.value = examData.value.examRound;
round.value = examData.value.examOrder;
year.value = examData.value.fiscalYear;
});
const fetchPlacementData = async () => {
showLoader();
http
.get(config.API.MainDetail(0))
.then(async (res) => {
DataStore.DataMainOrig = res.data.result;
})
.catch((e) => {
console.log(e);
})
.finally(() => {
hideLoader();
});
};
</script>
<template>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row">
<div class="toptitle">
<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
รายชื่อผู้สอบในรอบ {{ title }} ครั้งที่ {{ round }} ปี {{ year }}
</div>
<q-card bordered class="q-py-sm row col-12">
<div class="col-12 row bg-white">
<div class="fit q-px-md q-py-sm">
<div class="row col-12 q-col-gutter-md fit">
<cardTop :amount="stat.total" label="จำนวนทั้งหมด" color="#016987" />
<cardTop v-if="roleAdmin" :amount="stat.unContain" label="จำนวนที่ยังไม่บรรจุ" color="#02A998" />
<cardTop :amount="stat.prepareContain" label="จำนวนที่เตรียมบรรจุ" color="#2EA0FF" />
<cardTop :amount="stat.contain" label="จำนวนที่บรรจุแล้ว" color="#4154B3" />
<cardTop :amount="stat.disclaim" label="จำนวนที่สละสิทธิ์" color="#FF5C5F" />
</div>
</div>
</div>
</q-card>
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
<div>
<AddTablePosition :statCard="getStat" class="q-pa-none" @get-stat="getStat" />
</div>
</q-card>
</template>
<style lang="scss">
.cardNum {
border-radius: 5px;
padding-left: 8px;
}
</style>

6
src/modules/05_placement/components/pass/DialogFooter.vue → src/modules/05_placement/components/PersonalList/DialogFooter.vue
View file

@ -29,9 +29,9 @@ const emit = defineEmits([
const updateEdit = (value: Boolean) => { const updateEdit = (value: Boolean) => {
emit("update:editvisible", value); emit("update:editvisible", value);
}; };
const cancel = async () => { // const cancel = async () => {
props.cancel(); // props.cancel();
}; // };
const edit = async () => { const edit = async () => {
updateEdit(!props.editvisible); updateEdit(!props.editvisible);
props.edit(); props.edit();

0
src/modules/05_placement/components/pass/DialogHeader.vue → src/modules/05_placement/components/PersonalList/DialogHeader.vue
View file

695
src/modules/05_placement/components/PersonalList/OrgTree.vue Normal file
View file

@ -0,0 +1,695 @@
<script setup lang="ts">
import { useQuasar, QForm } from "quasar";
import { onMounted, reactive, ref } from "vue";
import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
import DialogFooter from "@/modules/05_placement/components/PersonalList/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();
fetchplacementPosition();
});
// โหลดข้อมูลโครงสร้างจาก 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();
});
};
// โหลด position
const placementPosition = ref<any>([]);
const fetchplacementPosition = async () => {
await http
.get(config.API.placementPosition())
.then((res: any) => {
placementPosition.value = res.data.result;
})
.catch((e: any) => {
messageError($q, e);
});
};
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 = "";
}
};
const checkPosition = (val: string) => {
const num = placementPosition.value.findIndex((e: string) => e === val);
return num;
};
</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 ||
checkPosition(prop.node.positionNumId) != -1
"
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>

0
src/modules/05_placement/components/pass/StatCard.vue → src/modules/05_placement/components/PersonalList/StatCard.vue
View file

602
src/modules/05_placement/components/PersonalList/Table.vue Normal file
View file

@ -0,0 +1,602 @@
<script setup lang="ts">
import { ref, onMounted, watch, reactive } from "vue";
import { useQuasar, QForm } from "quasar";
import type { QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import Table from "@/modules/05_placement/components/PersonalList/TableView.vue";
import DialogCard from "@/modules/05_placement/components/PersonalList/TableDetail.vue";
import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
import type { PartialTableName } from "@/modules/05_placement/interface/request/placement";
import DialogOrgTree from "@/modules/05_placement/components/PersonalList/OrgTree.vue";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import keycloak from "@/plugins/keycloak";
import router from "@/router";
let roleAdmin = ref<boolean>(false);
const props = defineProps({
statCard: {
type: Function,
default: () => console.log("getStat"),
},
});
const edit = ref<boolean>(true);
const modal = ref<boolean>(false); //modal ขอผ่อนผัน + สละสิทธิ์
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
const modalDisclaim = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
const editvisible = ref<boolean>(true);
const modalDefermentDisclaim = ref<boolean>(false); //modal add detail
const checkValidate = ref<boolean>(false);
const modalwaitInfo = ref<boolean>(false); //modal add detail
const userNote = ref<string>("");
const filter = ref<string>("");
const Name = ref<string>();
const rowsAll = ref<any>([]);
const rows = ref<any>([]);
const myForm = ref<any>();
const files = ref<any>(null);
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const $q = useQuasar(); // show dialog
const { messageError, showLoader, hideLoader, dateText, success } = mixin;
const route = useRoute();
const examId = route.params.examId;
const examIdString = Array.isArray(examId) ? examId[0] : examId;
const personalId = ref<string>("");
const visibleColumns = ref<any[]>([
"position",
"fullName",
"number",
"idCard",
"positionNumber",
"organizationName",
"reportingDate",
"bmaOfficer",
"statusName",
]);
const columns = ref<QTableProps["columns"]>([
{
name: "position",
align: "center",
label: "ลำดับ",
sortable: true,
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "fullName",
align: "left",
label: "ชื่อ-สกุล",
sortable: true,
field: "fullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "number",
align: "center",
label: "ลำดับที่สอบได้",
sortable: true,
field: "number",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "organizationName",
align: "left",
label: "หน่วยงานที่รับการบรรจุ",
sortable: true,
field: "organizationName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "reportingDate",
align: "left",
label: "วันที่รายงานตัว",
sortable: true,
field: "reportingDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "bmaOfficer",
align: "left",
label: "สถานภาพ",
sortable: true,
field: "bmaOfficer",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "statusName",
align: "left",
label: "สถานะการบรรจุ",
sortable: true,
field: "statusName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const getTable = async () => {
showLoader();
await http
.get(config.API.personalList(examIdString))
.then(async (res: any) => {
rowsAll.value = [];
res.data.result.map((data: any) => {
const rowData = {
personalId: data.personalId,
idCard: data.idCard,
fullName: data.fullName + ' ' + data.idCard,
name: data.fullName,
profilePhoto: data.profilePhoto,
organizationName: data.organizationName + ' ' + data.organizationShortName + ' ' + data.positionNumber + ' ' + data.positionPath,
orgName: data.organizationName,
organizationShortName: data.organizationShortName,
positionNumber: data.positionNumber,
positionPath: data.positionPath,
reportingDate: dateText(new Date(data.reportingDate)),
number: data.number,
bmaOfficer:
data.bmaOfficer == "OFFICER"
? "ขรก.กทม. สามัญ"
: data.bmaOfficer == "EMPLOYEE_PERM"
? "ลูกจ้างประจำ"
: data.bmaOfficer == "EMPLOYEE_TEMP"
? "ลูกจ้างชั่วคราว"
: data.bmaOfficer == null
? "บุคคลภายนอก"
: "-",
statusId: data.statusId,
statusName:
data.statusId == "UN-CONTAIN"
? "ยังไม่บรรจุ"
: data.statusId == "PREPARE-CONTAIN"
? "เตรียมบรรจุ"
: data.statusId == "CONTAIN"
? "บรรจุแล้ว"
: data.statusId == "DISCLAIM"
? "สละสิทธิ์"
: "-",
deferment: data.deferment,
};
rowsAll.value.push(rowData);
});
rows.value = roleAdmin ? rowsAll.value : rowsAll.value.filter((x: any) => x.statusId != 'CONTAIN');
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
};
const appointModal = ref<boolean>(false);
const saveDeferment = async () => {
myForm.value.validate().then(async (result: boolean) => {
if (result) {
showLoader();
const formData = new FormData();
formData.append("personalId", personalId.value);
formData.append("note", userNote.value);
formData.append("files", files.value[0]);
await http
.post(config.API.deferment(), formData)
.then((res) => {
success($q, "บันทึกสำเร็จ");
})
.catch((e) => {
console.log(e);
})
.finally(async () => {
await getTable();
props.statCard();
userNote.value = "";
modalDefermentDisclaim.value = false;
hideLoader();
});
}
});
};
const saveDisclaim = async () => {
myForm.value.validate().then(async (result: boolean) => {
if (result) {
showLoader();
const dataPost = {
note: userNote.value,
personId: personalId.value,
};
// console.log("save disclaim===>", dataPost);
await http
.post(config.API.disclaimF(), {
note: dataPost.note,
personalId: dataPost.personId,
})
.then(() => {
success($q, "บันทึกสำเร็จ");
})
.finally(async () => {
await getTable();
props.statCard();
userNote.value = "";
modalDefermentDisclaim.value = false;
hideLoader();
});
}
});
};
const clickEditRow = () => {
editRow.value = true;
};
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer ": val,
"full-width cursor-pointer": !val,
};
};
const selectData = (pid: string) => {
if (roleAdmin.value === true) {
personalId.value = pid;
modal.value = true;
} else {
router.push("/placement/personal-detail/" + pid);
}
};
const getNumFile = ref(0);
const dataInfo = reactive({
reason: "",
reliefDoc: "",
});
const editDetail = (
props: PartialTableName,
action: "disclaim" | "deferment" | "defermentInfo" | "disclaimInfo"
) => {
Name.value = props.name;
personalId.value = props.personalId;
editRow.value = false;
edit.value = true;
if (action === "disclaim") {
getNumFile.value = 0;
modalDisclaim.value = true;
modalDefermentDisclaim.value = true;
} else if (action === "deferment") {
getNumFile.value = 1;
modalDisclaim.value = false;
modalDefermentDisclaim.value = true;
} else if (action === "defermentInfo") {
http
.get(config.API.placementDefermentInfo(props.personalId))
.then((res: any) => {
dataInfo.reason = res.data.result.reliefReason;
dataInfo.reliefDoc = res.data.result.reliefDoc;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
modalDisclaim.value = false;
modalwaitInfo.value = true;
});
} else if (action === "disclaimInfo") {
http
.get(config.API.placementDisclaimInfo(props.personalId))
.then((res: any) => {
dataInfo.reason = res.data.result.rejectReason;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
modalDisclaim.value = true;
modalwaitInfo.value = true;
});
}
};
const openAppointModal = (pid: string) => {
appointModal.value = true;
personalId.value = pid;
};
const clickCloseModalTree = async () => {
await getTable();
appointModal.value = false;
};
const validateData = async () => {
checkValidate.value = true;
await myForm.value.validate().then((result: boolean) => {
if (result == false) {
checkValidate.value = false;
}
});
};
const clickClose = async () => {
userNote.value = "";
if (editRow.value == true) {
$q.dialog({
title: `ข้อมูลมีการแก้ไข`,
message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
}).onOk(async () => {
modalDefermentDisclaim.value = false;
modalwaitInfo.value = false;
modal.value = false;
files.value = null;
});
} else {
modalDefermentDisclaim.value = false;
modalwaitInfo.value = false;
modal.value = false;
}
};
onMounted(async () => {
if (keycloak.tokenParsed != null) {
roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
console.log("roleAdmin===>", roleAdmin);
}
await getTable();
});
const containStatus = ref<boolean>(false);
watch(containStatus, () => {
// console.log("containStatus===>", containStatus.value);
if (containStatus.value) {
rows.value = rowsAll.value.filter((x: any) => x.statusId == 'CONTAIN');
} else {
rows.value = rowsAll.value.filter((x: any) => x.statusId != 'CONTAIN');
}
});
</script>
<template>
<q-form ref="myForm">
<Table :contain-status="containStatus" :rows="rows" :columns="columns" :filter="filter"
:visible-columns="visibleColumns" v-model:inputfilter="filter" v-model:inputvisible="visibleColumns"
v-model:editvisible="editvisible" v-model:containfilter="containStatus" :history="true" :boss="true"
:saveNoDraft="true" :role-admin="roleAdmin">
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props.row.personalId)"
class="cursor-pointer">
<template v-if="col.name === 'position'">
{{ props.rowIndex + 1 }}
</template>
<template v-else-if="col.name === 'fullName'" class="table_ellipsis">
<div class="row col-12 text-no-wrap items-center">
<img v-if="props.row.avatar == null" src="@/assets/avatar_user.jpg" class="col-4 img-info" />
<img v-else :src="props.row.avatar" class="col-4 img-info" />
<div class="col-4">
<div class="text-weight-medium">{{ props.row.name }}</div>
<div class="text-weight-light">{{ props.row.idCard }}</div>
</div>
</div>
</template>
<template v-else-if="col.name === 'number'">
<div class="text-weight-medium">
{{ props.row.number !== null ? props.row.number : "-" }}
</div>
</template>
<template v-else-if="col.name === 'organizationName'">
<div v-if="props.row.orgName !== null ||
props.row.positionPath !== null
">
<div class="col-4">
<div class="text-weight-medium">
{{
props.row.orgName !== null
? props.row.orgName
: "-"
}}
{{
props.row.organizationShortName !== null
? `(${props.row.organizationShortName})`
: ""
}}
</div>
<div class="text-weight-light">
{{
props.row.positionPath !== null
? props.row.positionPath
: "-"
}}
{{
props.row.positionNumber !== null
? `(${props.row.positionNumber})`
: ""
}}
</div>
</div>
</div>
<div v-else>
<div class="col-4">
<div class="text-weight-medium">-</div>
</div>
</div>
</template>
<template v-else-if="col.name === 'reportingDate' && col.value !== '-'">
<div class="text-weight-medium">
{{ props.row.reportingDate }}
</div>
</template>
<template v-else-if="col.name === 'bmaOfficer'">
<div class="text-weight-medium">
{{ props.row.bmaOfficer !== null ? props.row.bmaOfficer : "-" }}
</div>
</template>
<template v-else-if="col.name === 'statusName'">
<div class="text-weight-medium">
{{ props.row.statusName }}
</div>
</template>
</q-td>
<q-td auto-width>
<q-btn icon="mdi-dots-vertical" size="12px" color="grey-7" flat round dense>
<q-menu transition-show="jump-down" transition-hide="jump-up">
<q-list dense style="min-width: 100px">
<q-item v-if="roleAdmin && props.row.statusId === 'UN-CONTAIN'" clickable v-close-popup
@click="openAppointModal(props.row.personalId)">
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
<q-icon color="primary" size="xs" name="mdi-bookmark-outline" />
</q-item-section>
<q-item-section>เลือกหน่วยงานที่รับบรรจุ</q-item-section>
</q-item>
<q-separator />
<q-item v-if="roleAdmin && props.row.statusId === 'UN-CONTAIN'" clickable v-close-popup
@click="editDetail(props.row, 'deferment')">
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
<q-icon color="blue" size="xs" name="mdi-account-alert-outline" />
</q-item-section>
<q-item-section>ขอผ่อนผัน</q-item-section>
</q-item>
<q-item v-else-if="props.row.deferment === true &&
props.row.statusId != 'DISCLAIM'
" clickable v-close-popup @click="editDetail(props.row, 'defermentInfo')">
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
<q-icon color="blue" size="xs" name="mdi-account-details-outline" />
</q-item-section>
<q-item-section>ข้อมูลการผ่อนผัน</q-item-section>
</q-item>
<q-separator />
<q-item v-if="props.row.statusId === 'UN-CONTAIN' ||
props.row.statusId === 'PREPARE-CONTAIN'
" clickable v-close-popup @click="editDetail(props.row, 'disclaim')">
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
<q-icon color="pink" size="xs" name="mdi-account-cancel-outline" />
</q-item-section>
<q-item-section>สละสิทธิ์</q-item-section>
</q-item>
<q-item v-else-if="props.row.statusId === 'DISCLAIM'" clickable v-close-popup
@click="editDetail(props.row, 'disclaimInfo')">
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
<q-icon color="pink" size="xs" name="mdi-account-cancel-outline" />
</q-item-section>
<q-item-section>ข้อมูลการสละสิทธิ์</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</q-td>
</q-tr>
</template>
</Table>
</q-form>
<!-- เลือกหน่วยงานที่บรรจุ -->
<DialogOrgTree v-model:modal="appointModal" :personalId="personalId" :close="clickCloseModalTree" />
<!-- popup ขอผ่อนผัน / สละสิทธิ์ -->
<q-form ref="myForm">
<DialogCard v-model:Modal="modal" :personal-id="personalId" :close="clickClose" :validate="validateData" />
</q-form>
<q-dialog v-model="modalDefermentDisclaim" persistent>
<q-card style="width: 800px">
<q-form ref="myForm">
<DialogHeader :title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${Name}`" :close="clickClose" />
<q-separator />
<q-card-section class="q-p-sm">
<div class="col-xs-12 col-sm-12 col-md-12">
<q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules
:rules="[(val) => !!val || 'กรุณากรอกเหตุผล']" :readonly="!edit" :borderless="!edit" v-model="userNote"
:label="`${'กรอกเหตุผล'}`" @update:model-value="clickEditRow" type="textarea" />
<q-file v-if="getNumFile === 1" v-model="files" dense :label="`${'เลือกไฟล์เอกสารหลักฐาน'}`" outlined
use-chips :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']" multiple
@update:model-value="clickEditRow" class="q-py-sm">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
</q-card-section>
<q-separator />
<DialogFooter :editvisible="true" :validate="validateData" :save="modalDisclaim ? saveDisclaim : saveDeferment" />
</q-form>
</q-card>
</q-dialog>
<!-- dialog ข้อมูลขอผ่อนผัน / สละสิทธิ์ -->
<q-dialog v-model="modalwaitInfo" persistent>
<q-card style="width: 500px; max-width: 500px">
<q-form ref="myForm">
<DialogHeader :title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${Name}`" :close="clickClose" />
<q-separator />
<q-card-section class="q-p-sm">
<div class="row">
<div class="col-3 text-grey-7">เหตุผล</div>
<div class="col-4">{{ dataInfo.reason }}</div>
</div>
<div v-if="!modalDisclaim" class="row q-pt-md">
<div class="col-3 text-grey-7 q-mt-sm">เอกสารหลักฐาน</div>
<div class="col-2 q-mt-sm">
<q-btn type="a" :href="dataInfo.reliefDoc" color="primary" flat dense round size="14px" icon="mdi-download"
target="_blank" />
</div>
</div>
</q-card-section>
<q-separator />
</q-form>
</q-card>
</q-dialog>
</template>
<style lang="scss" scoped>
.custom-input {
font-size: 16px;
}
.my-list-link {
border-radius: 5px;
font-weight: 600;
border: 1px solid #00aa86;
}
.q-table p {
margin-bottom: 0;
color: #818181;
}
.img-info {
width: 30px !important;
height: 30px !important;
border-radius: 50%;
object-fit: cover;
margin-right: 10px;
}
</style>

256
src/modules/05_placement/components/pass/TableDetail.vue → src/modules/05_placement/components/PersonalList/TableDetail.vue
View file

@ -1,39 +1,40 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue"; import { ref, watch } from "vue";
import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue"; import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue"; import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
import type { CheckboxItem } from "@/modules/05_placement/interface/index/Main";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const modal = ref<boolean>(); const { success, showLoader, hideLoader, date2Thai, modalConfirm } = mixin;
const { success } = mixin;
const save = ref<boolean>(true); const save = ref<boolean>(true);
const props = defineProps({ const props = defineProps({
Modal: Boolean, Modal: Boolean,
close: { close: {
type: Function, type: Function,
default: () => console.log("not function"), default: () => console.log("not function"),
}, },
getdetail: { personalId: {
type: Object, type: String,
required: true, default: ""
}, },
validate: { validate: {
type: Function, type: Function,
default: () => console.log("not 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"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "university", name: "university",
@ -76,86 +77,112 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
]); ]);
const myForm = ref<any>(); const myForm = ref<any>([]);
const checkValidate = ref<boolean>(false); const personalForm = ref<any>([]);
const selection = ref<number[]>([]); 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(); const $q = useQuasar();
function isRequired(val: any): boolean | string { function isRequired(val: any): boolean | string {
return !!val || "กรุณาเลือกไฟล์เอกสารหลักฐาน"; 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 ( return (
selectedItems.length > 0 && selectedItems.length === selectedIds.length selectedItems.length > 0 || selectedItems.length === selectedIds.length
); );
}; };
const ClickSave = () => { const ClickSave = () => {
const isValid = validateData(); const isValid = validateData();
if (isValid) { if (isValid) {
console.log(selection.value); // props.close();
console.log("rerer", props.Modal); // props.validate();
props.close(); // putpersonalForm();
props.validate(); modalConfirm(
selection.value = []; $q,
"การยืนยัน",
"ยืนยันการบันทึกการคัดกรองคุณสมบัติ",
putpersonalForm
);
} else { } else {
success($q, "กรอกให้ครบ"); 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 () => { const close = async () => {
props.close(); props.close();
selection.value = []; 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> </script>
<template> <template>
@ -163,10 +190,7 @@ const close = async () => {
<q-card style="max-width: 100%; width: 80%"> <q-card style="max-width: 100%; width: 80%">
<q-form ref="myForm"> <q-form ref="myForm">
<div class="row"> <div class="row">
<DialogHeader <DialogHeader :title="`รายละเอียดของ ${personalForm.fullName}`" @click="close" />
:title="`รายละเอียดของ ${props.getdetail.fullName}`"
@click="close"
/>
</div> </div>
<q-separator /> <q-separator />
@ -175,9 +199,8 @@ const close = async () => {
<q-card bordered class="card-panding"> <q-card bordered class="card-panding">
<div class="row items-center q-pa-xs header-text"> <div class="row items-center q-pa-xs header-text">
ข้อมูลทั่วไป ข้อมูลทั่วไป
<span class="check-officer" <span class="check-officer"><q-icon name="mdi-check" v-if="personalForm.bmaofficer !== null && ''" />{{
><q-icon name="mdi-check" /> ข้าราชการฯ กทม</span formBmaofficer(personalForm.bmaofficer) }}</span>
>
</div> </div>
<div class="row q-pa-xs"> <div class="row q-pa-xs">
<div class="col-3 header-sub-text"> <div class="col-3 header-sub-text">
@ -186,10 +209,10 @@ const close = async () => {
</div> </div>
<div class="col-4 sub-text"> <div class="col-4 sub-text">
<div class="q-pb-md"> <div class="q-pb-md">
{{ props.getdetail.profileID }} {{ personalForm.idCard }}
</div> </div>
<div> <div>
{{ props.getdetail.dateOfBirth }} {{ date2Thai(personalForm.dateOfBirth) }}
</div> </div>
</div> </div>
<div class="col-2 header-sub-text"> <div class="col-2 header-sub-text">
@ -198,10 +221,10 @@ const close = async () => {
</div> </div>
<div class="col-3 sub-text"> <div class="col-3 sub-text">
<div class="q-pb-md"> <div class="q-pb-md">
{{ props.getdetail.fullName }} {{ personalForm.fullName }}
</div> </div>
<div> <div>
{{ props.getdetail.gender }} {{ personalForm.gender }}
</div> </div>
</div> </div>
</div> </div>
@ -213,7 +236,7 @@ const close = async () => {
<div class="row q-pa-xs"> <div class="row q-pa-xs">
<div class="col-3 header-sub-text">ที่อยู่</div> <div class="col-3 header-sub-text">ที่อยู่</div>
<div class="col-9 sub-text"> <div class="col-9 sub-text">
{{ props.getdetail.address }} {{ personalForm.address }}
</div> </div>
</div> </div>
</q-card> </q-card>
@ -221,17 +244,8 @@ const close = async () => {
<div class="contanier-box-mini"> <div class="contanier-box-mini">
<q-card bordered class="card-panding"> <q-card bordered class="card-panding">
<div class="row items-center q-pa-xs header-text">การศึกษา</div> <div class="row items-center q-pa-xs header-text">การศึกษา</div>
<q-table <q-table ref="table" :rows="rows" :columns="columns" flat bordered class="custom-header-table"
ref="table" virtual-scroll :virtual-scroll-sticky-size-start="48" dense hide-bottom>
:rows="rows"
:columns="columns"
flat
bordered
class="custom-header-table"
virtual-scroll
:virtual-scroll-sticky-size-start="48"
dense
>
</q-table> </q-table>
</q-card> </q-card>
</div> </div>
@ -252,31 +266,31 @@ const close = async () => {
<div class="col-4 q-pa-xs"> <div class="col-4 q-pa-xs">
<div class="header-sub-text-exam-2">คะแนนที่ได้</div> <div class="header-sub-text-exam-2">คะแนนที่ได้</div>
<div class="sub-text-exam"> <div class="sub-text-exam">
{{ props.getdetail.scoreResult.scoreAFull }} {{ personalForm.pointTotalA }}
</div> </div>
<div class="sub-text-exam"> <div class="sub-text-exam">
{{ props.getdetail.scoreResult.scoreBFull }} {{ personalForm.pointTotalB }}
</div> </div>
<div class="sub-text-exam"> <div class="sub-text-exam">
{{ props.getdetail.scoreResult.scoreCFull }} {{ personalForm.pointTotalC }}
</div> </div>
<div class="sub-text-exam"> <div class="sub-text-exam">
{{ props.getdetail.scoreResult.scoreSumFull }} {{ personalForm.pointTotal }}
</div> </div>
</div> </div>
<div class="col-4 q-pa-xs header-sub-text-exam-2"> <div class="col-4 q-pa-xs header-sub-text-exam-2">
<div class="header-sub-text-exam-2">ผลการสอบ</div> <div class="header-sub-text-exam-2">ผลการสอบ</div>
<div class="sub-text-exam"> <div class="sub-text-exam">
{{ props.getdetail.scoreResult.scoreA }} {{ personalForm.pointA }}
</div> </div>
<div class="sub-text-exam"> <div class="sub-text-exam">
{{ props.getdetail.scoreResult.scoreB }} {{ personalForm.pointB }}
</div> </div>
<div class="sub-text-exam"> <div class="sub-text-exam">
{{ props.getdetail.scoreResult.scoreC }} {{ personalForm.pointC }}
</div> </div>
<div class="sub-text-exam"> <div class="sub-text-exam">
{{ props.getdetail.scoreResult.scoreSum }} {{ personalForm.point }}
</div> </div>
</div> </div>
</div> </div>
@ -292,10 +306,10 @@ const close = async () => {
</div> </div>
<div class="col-5 sub-text-exam"> <div class="col-5 sub-text-exam">
<div class="q-pb-sm"> <div class="q-pb-sm">
{{ props.getdetail.scoreResult.examResult }} {{ personalForm.pass }}
</div> </div>
<div class="q-pb-sm">{{ props.getdetail.number }}</div> <div class="q-pb-sm">{{ personalForm.examNumber }}</div>
<div class="q-pb-sm">{{ props.getdetail.examCount }}</div> <div class="q-pb-sm">{{ personalForm.examRound }}</div>
</div> </div>
</div> </div>
</div> </div>
@ -308,17 +322,9 @@ const close = async () => {
<div class="col-12 row items-center q-pa-sm header-text"> <div class="col-12 row items-center q-pa-sm header-text">
การคัดกรองคุณสมบัติ การคัดกรองคุณสมบัติ
</div> </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 <q-checkbox size="xs" v-model="item.value" :val="item.value" :label="item.name" keep-color color="teal"
size="xs" :rules="[isRequired]" class="checkbox-group" />
v-model="selection"
:val="item.id"
:label="item.label"
keep-color
color="teal"
:rules="[isRequired]"
class="checkbox-group"
/>
<q-separator /> <q-separator />
</div> </div>
</q-card> </q-card>
@ -326,12 +332,7 @@ const close = async () => {
</div> </div>
<q-separator /> <q-separator />
<div> <div>
<DialogFooter <DialogFooter @click="ClickSave" :model="props.Modal" :editvisible="save" :validate="validateData" />
@click="ClickSave"
:model="props.Modal"
:editvisible="save"
:validate="validateData"
/>
</div> </div>
</q-form> </q-form>
</q-card> </q-card>
@ -375,6 +376,7 @@ const close = async () => {
line-height: 150%; line-height: 150%;
color: #818181; color: #818181;
} }
.sub-text { .sub-text {
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;

102
src/modules/05_placement/components/pass/TableView.vue → src/modules/05_placement/components/PersonalList/TableView.vue
View file

@ -1,60 +1,54 @@
<template> <template>
<div class="q-px-md q-pb-md"> <div class="q-px-md q-pb-md">
<div class="col-12 row q-py-sm"> <div class="col-12 row q-py-sm">
<q-toggle v-if="roleAdmin === false" class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account" <q-toggle v-if="roleAdmin === false" class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account"
:model-value="expiredAccount" color="blue" label="แสดงบัญชีหมดอายุ" @update:model-value="updateExpiredAccount" /> :model-value="containStatus" color="blue" label="แสดงสถานะบรรจุแล้ว" @update:model-value="updateContain" />
<q-space /> <q-space />
<div class="items-center" style="display: flex"> <div class="items-center" style="display: flex">
<q-input standout dense :model-value="inputfilter" ref="filterRef" @update:model-value="updateInput" outlined <q-input standout dense :model-value="inputfilter" ref="filterRef" @update:model-value="updateInput" outlined
debounce="300" placeholder="ค้นหา" style="max-width: 200px" class="q-ml-sm"> debounce="300" placeholder="ค้นหา" style="max-width: 200px" class="q-ml-sm">
<template v-slot:append> <template v-slot:append>
<q-icon v-if="inputfilter == ''" name="search" /> <q-icon v-if="inputfilter == ''" name="search" />
<q-icon v-if="inputfilter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" /> <q-icon v-if="inputfilter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
</template> </template>
</q-input> </q-input>
<!-- แสดง table ใน คอลัมน์ --> <!-- แสดง table ใน คอลัมน์ -->
<q-select :model-value="inputvisible" @update:model-value="updateVisible" :display-value="$q.lang.table.columns" <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 multiple outlined dense :options="attrs.columns" options-dense option-value="name" map-options emit-value
style="min-width: 150px" class="gt-xs q-ml-sm" /> style="min-width: 150px" class="gt-xs q-ml-sm" />
</div> </div>
</div> </div>
<q-table ref="table" flat bordered class="custom-header-table" v-bind="attrs" virtual-scroll <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" v-model:pagination="pagination"> :virtual-scroll-sticky-size-start="48" dense :pagination-label="paginationLabel" v-model:pagination="pagination">
<template v-slot:pagination="scope"> <template v-slot:pagination="scope">
<q-pagination v-model="pagination.page" color="primary" :max="scope.pagesNumber" :max-pages="5" size="sm" <q-pagination v-model="pagination.page" color="primary" :max="scope.pagesNumber" :max-pages="5" size="sm"
boundary-links direction-links></q-pagination> boundary-links direction-links></q-pagination>
</template> </template>
<template v-slot:header="props"> <template v-slot:header="props">
<q-tr :props="props"> <q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props"> <q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span> <span class="text-weight-medium">{{ col.label }}</span>
</q-th> </q-th>
<q-th auto-width v-if="history == true" /> <q-th auto-width v-if="history == true" />
</q-tr> </q-tr>
</template> </template>
<template #body="props"> <template #body="props">
<slot v-bind="props" name="columns"></slot> <slot v-bind="props" name="columns"></slot>
</template> </template>
</q-table> </q-table>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, useAttrs } from "vue"; import { ref, useAttrs } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
const $q = useQuasar(); const $q = useQuasar();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { dialogMessage } = mixin;
const editvisible = ref<boolean>(false);
const attrs = ref<any>(useAttrs()); const attrs = ref<any>(useAttrs());
const paging = ref<boolean>(true); const paging = ref<boolean>(true);
const table = ref<any>(null); const table = ref<any>(null);
const filterRef = ref<any>(null); const filterRef = ref<any>(null);
const modalPublish = ref<boolean>(false);
const modalDelete = ref<boolean>(false);
const props = defineProps({ const props = defineProps({
inputfilter: String, inputfilter: String,
inputvisible: Array, inputvisible: Array,
@ -139,11 +133,11 @@ const props = defineProps({
type: Function, type: Function,
default: () => console.log("not function"), default: () => console.log("not function"),
}, },
expiredAccount: Boolean, containStatus: Boolean,
roleAdmin: Boolean roleAdmin: Boolean
}); });
const pagination = ref({ const pagination = ref({
sortBy: "desc", sortBy: "number",
descending: false, descending: false,
page: 1, page: 1,
rowsPerPage: 10, rowsPerPage: 10,
@ -164,7 +158,7 @@ const emit = defineEmits([
"update:editvisible", "update:editvisible",
"update:titleText", "update:titleText",
"update:inputvisibleFilter", "update:inputvisibleFilter",
"update:expiredaccountfilter" "update:containfilter"
]); ]);
const updateInput = (value: any) => { const updateInput = (value: any) => {
@ -173,23 +167,9 @@ const updateInput = (value: any) => {
const updateVisible = (value: any) => { const updateVisible = (value: any) => {
emit("update:inputvisible", value); emit("update:inputvisible", value);
}; };
const updateVisibleFilter = (value: any) => {
emit("update:inputvisibleFilter", value);
};
const updateExpiredAccount = (value: any) => { const updateContain = (value: any) => {
emit("update:expiredaccountfilter", value); emit("update:containfilter", value);
};
const checkSave = () => {
props.validate();
props.save();
// if (myForm.value !== null) {
// myForm.value.validate().then((success) => {
// if (success) {
// }
// });
// }
}; };
const resetFilter = () => { const resetFilter = () => {

72
src/modules/05_placement/components/pass/Detail.vue
View file

@ -1,72 +0,0 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { defineAsyncComponent } from "@vue/runtime-core";
import { useRouter } from "vue-router";
import cardTop from "@/modules/05_placement/components/pass/StatCard.vue";
import keycloak from "@/plugins/keycloak";
let roleAdmin = ref<boolean>(false);
const router = useRouter();
const year = ref<string>("2566");
const round = ref<string>("1");
const title = ref<string>("การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ");
const AddTablePosition = defineAsyncComponent(
() => import("@/modules/05_placement/components/pass/Table.vue")
);
const stat = ref<any>({
total: 5,
unContain: 1,
prepareContain: 3,
contain: 1,
disclaim: 0,
});
onMounted(async () => {
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">
<div class="toptitle">
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="router.go(-1)"
/>
รายชื่อผู้สอบในรอบ {{ title }} ครั้งที่ {{ round }} ปี {{ year }}
</div>
<q-card bordered class="q-py-sm row col-12">
<div class="col-12 row bg-white">
<div class="fit q-px-md q-py-sm">
<div class="row col-12 q-col-gutter-md fit">
<cardTop :amount="stat.total" label="จำนวนทั้งหมด" color="#016987" />
<cardTop v-if="roleAdmin" :amount="stat.unContain" label="จำนวนที่ยังไม่บรรจุ" color="#02A998" />
<cardTop :amount="stat.prepareContain" label="จำนวนที่เตรียมบรรจุ" color="#2EA0FF" />
<cardTop :amount="stat.contain" label="จำนวนที่บรรจุแล้ว" color="#4154B3" />
<cardTop :amount="stat.disclaim" label="จำนวนที่สละสิทธิ์" color="#FF5C5F" />
</div>
</div>
</div>
</q-card>
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
<div>
<AddTablePosition class="q-pa-none" />
</div>
</q-card>
</template>
<style lang="scss">
.cardNum {
border-radius: 5px;
padding-left: 8px;
}
</style>

0
src/modules/05_placement/components/pass/DialogAppoint.vue
View file

1452
src/modules/05_placement/components/pass/Table.vue
View file

File diff suppressed because it is too large Load diff

5
src/modules/05_placement/components/probation/AddWork.vue
View file

@ -839,10 +839,11 @@ s borderless
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
const router = useRouter();
import { ref } from "vue"; import { ref } from "vue";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import type { QForm } from "quasar"; // import type { QForm } from "quasar";
const router = useRouter();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { date2Thai } = mixin; const { date2Thai } = mixin;

2
src/modules/05_placement/components/probation/form.vue
View file

@ -910,6 +910,8 @@ const radio_2 = ref<any>(null);
const radio_3 = ref<any>(null); const radio_3 = ref<any>(null);
const radio_4 = ref<any>(null); const radio_4 = ref<any>(null);
const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]); const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
const text2_1 = ref<string>('');
const text2_2 = ref<string>('');
const onSubmit = () => { const onSubmit = () => {
$q.notify({ $q.notify({

172
src/modules/05_placement/interface/index/Main.ts
View file

@ -1,35 +1,44 @@
import type { zipCodeOption } from "../../components/PersonalDetail/profileType"; import type { zipCodeOption } from "../../components/PersonalDetail/profileType";
interface DataOption { interface DataOption {
id: number | string; id: number | null;
name: string; name: string;
disable?: boolean; disable?: boolean;
} }
interface DataOption1 {
id: string | null;
name: string | null;
disable?: boolean;
}
interface DataOptionInsignia { interface DataOptionInsignia {
id: string; id: string;
name: string; name: string;
typeName: string; typeName: string;
} }
interface optionData {
id: string;
name: string;
}
interface EduOps { interface EduOps {
levelOptions: DataOption[]; levelOptions: optionData[];
positionPathOptions: DataOption[]; positionPathOptions: optionData[];
} }
interface InformationOps { interface InformationOps {
prefixOps: DataOption[]; prefixOps: optionData[];
genderOps: DataOption[]; genderOps: optionData[];
bloodOps: DataOption[]; bloodOps: optionData[];
statusOps: DataOption[]; statusOps: optionData[];
religionOps: DataOption[]; religionOps: optionData[];
employeeClassOps: DataOption[]; employeeClassOps: optionData[];
employeeTypeOps: DataOption[]; employeeTypeOps: optionData[];
} }
interface AddressOps { interface AddressOps {
provinceOps: DataOption[]; provinceOps: optionData[];
districtOps: DataOption[]; districtOps: optionData[];
districtCOps: DataOption[]; districtCOps: optionData[];
subdistrictOps: zipCodeOption[]; subdistrictOps: zipCodeOption[];
subdistrictCOps: zipCodeOption[]; subdistrictCOps: zipCodeOption[];
} }
@ -53,6 +62,131 @@ interface CheckboxItem {
label: string; label: string;
} }
interface Property {
name: string;
value: boolean;
}
interface PointExam {
pointA: number;
pointB: number;
pointC: number;
pointTotalA: number;
pointTotalB: number;
pointTotalC: number;
point: number;
pointTotal: number;
examNumber: number;
examRound: number;
pass: string | null;
}
interface Education {
id: string;
educationLevel: string;
institute: string;
degree: string;
field: string;
gpa: string;
country: string;
duration: string;
other: string;
fundName: string;
durationYear: number;
finishDate: Date;
isDate: string;
startDate: number;
endDate: number;
positionPath: string;
isEducation: string;
}
interface Family {
couple: string;
marryPrefix: string;
marryPrefixId: string;
marryFirstName: string;
marryLastName: string;
marryOccupation: string;
fatherPrefix: string;
fatherPrefixId: string;
fatherFirstName: string;
fatherLastName: string;
fatherOccupation: string;
motherPrefix: string;
motherPrefixId: string;
motherFirstName: string;
motherLastName: string;
motherOccupation: string;
}
interface Address {
registAddress: string;
registSubDistrict: string;
registSubDistrictId: string;
registZipCode: string;
registDistrict: string;
registDistrictId: string;
registProvince: string;
registProvinceId: string;
currentAddress: string;
currentSubDistrict: string;
currentSubDistrictId: string;
currentZipCode: string;
currentDistrict: string;
currentDistrictId: string;
currentProvince: string;
currentProvinceId: string;
registSame: string;
}
interface Certificate {
id: string;
certificateNo: string;
issuer: string;
issueDate: Date;
expireDate: Date;
certificateType: string;
}
const AddressDataDefualt: Address = {
registAddress: "",
currentAddress: "",
registSubDistrict: "",
registSubDistrictId: "",
registZipCode: "",
registDistrict: "",
registDistrictId: "",
registProvince: "",
registProvinceId: "",
currentSubDistrict: "",
currentSubDistrictId: "",
currentZipCode: "",
currentDistrict: "",
currentDistrictId: "",
currentProvince: "",
currentProvinceId: "",
registSame: "0",
};
const FamilyDataDefualt: Family = {
couple: "0",
marryPrefix: "",
marryPrefixId: "",
marryFirstName: "",
marryLastName: "",
marryOccupation: "",
fatherPrefix: "",
fatherPrefixId: "",
fatherFirstName: "",
fatherLastName: "",
fatherOccupation: "",
motherPrefix: "",
motherPrefixId: "",
motherFirstName: "",
motherLastName: "",
motherOccupation: "",
};
export type { export type {
DataOption, DataOption,
DataOptionInsignia, DataOptionInsignia,
@ -61,6 +195,16 @@ export type {
AddressOps, AddressOps,
Pagination, Pagination,
EduOps, EduOps,
DataOption1,
InsigniaOps, InsigniaOps,
CheckboxItem, CheckboxItem,
Property,
PointExam,
Education,
Family,
Address,
optionData,
Certificate,
}; };
export { AddressDataDefualt, FamilyDataDefualt };

1
src/modules/05_placement/interface/request/Education.ts
View file

@ -6,6 +6,7 @@ interface DataProps {
//ข้อมูล //ข้อมูล
interface RequestItemsObject { interface RequestItemsObject {
id: string; id: string;
educationLevel: string;
level: string; level: string;
levelId: string; levelId: string;
positionPath: string; positionPath: string;

6
src/modules/05_placement/interface/request/Main.ts
View file

@ -4,8 +4,10 @@ interface FormPlacementMainData {
examRound: string; examRound: string;
examOrder: number; examOrder: number;
fiscalYear: number; fiscalYear: number;
numberofCandidates: number; numberOfCandidates: number;
examType: number; examTypeValue:string;
examTypeName: string;
accountStartDate: string;
accountExpirationDate: string; accountExpirationDate: string;
isExpired?: boolean; isExpired?: boolean;
} }

33
src/modules/05_placement/interface/request/placement.ts
View file

@ -1,5 +1,5 @@
interface TableName { interface TableName {
profileID: string; personalId: string;
position: number; position: number;
fullName: string; fullName: string;
dateOfBirth: string; dateOfBirth: string;
@ -7,14 +7,20 @@ interface TableName {
ExamOrder: number; ExamOrder: number;
unitId: string; unitId: string;
UnitGroup: string; UnitGroup: string;
positionNumber:string;
positionPath:string;
Unit: string; Unit: string;
ReportingDate: string; //วันที่รายงานตัว reportingDate: string; //วันที่รายงานตัว
BMAOfficer: string; bmaOfficer: string;
Status: string; statusId: string;
checkList: any; checkList: any;
address: string; address: string;
university: string; university: string;
degree: string; degree: string;
disclaim: string;
profilePhoto:string;
organizationName:string;
organizationShortName:string;
major: string; major: string;
remark: string; remark: string;
number: number; number: number;
@ -31,5 +37,20 @@ interface TableName {
examResult: string; examResult: string;
}; };
} }
interface PartialTableName {
export type { TableName }; personalId: string;
fullName: string;
name: 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};

14
src/modules/05_placement/router.ts
View file

@ -5,7 +5,7 @@
const PlacementMain = () => const PlacementMain = () =>
import("@/modules/05_placement/components/Main.vue"); import("@/modules/05_placement/components/Main.vue");
const PlacementDetail = () => const PlacementDetail = () =>
import("@/modules/05_placement/components/pass/Detail.vue"); import("@/modules/05_placement/components/PersonalList/Detail.vue");
const PlacementPersonalDetail = () => const PlacementPersonalDetail = () =>
import("@/modules/05_placement/components/PersonalDetail/Detail.vue"); import("@/modules/05_placement/components/PersonalDetail/Detail.vue");
const addOrderPlacement = () => const addOrderPlacement = () =>
@ -29,8 +29,8 @@ const probationDetail = () =>
const probationForm = () => const probationForm = () =>
import("@/modules/05_placement/components/probation/form.vue"); import("@/modules/05_placement/components/probation/form.vue");
const probationWorkAdd = () => const probationWorkAdd = () =>
import("@/modules/05_placement/components/probation/AddWork.vue"); import("@/modules/05_placement/components/probation/AddWork.vue");
export default [ export default [
{ {
path: "/placement", path: "/placement",
@ -43,7 +43,7 @@ export default [
}, },
}, },
{ {
path: "/placement/detail", path: "/placement/personal-list/:examId",
name: "placementDetail", name: "placementDetail",
component: PlacementDetail, component: PlacementDetail,
meta: { meta: {
@ -53,7 +53,7 @@ export default [
}, },
}, },
{ {
path: "/placement/detail/:personalId", path: "/placement/personal-detail/:personalId",
name: "PlacementPersonalDetail", name: "PlacementPersonalDetail",
component: PlacementPersonalDetail, component: PlacementPersonalDetail,
meta: { meta: {
@ -130,7 +130,7 @@ export default [
Auth: true, Auth: true,
Key: [6.3], Key: [6.3],
Role: "placement", Role: "placement",
} },
}, },
{ {
path: "/probation/work/:id", path: "/probation/work/:id",
@ -141,5 +141,5 @@ export default [
Key: [6.3], Key: [6.3],
Role: "placement", Role: "placement",
}, },
} },
]; ];

36
src/modules/05_placement/store.ts
View file

@ -104,77 +104,77 @@ export const usePlacementDataStore = defineStore("placement", () => {
(DataMainYear.value = val); (DataMainYear.value = val);
const DataMain = (val: FormPlacementMainData[]) => (DataMainOrig.value = val); const DataMain = (val: FormPlacementMainData[]) => (DataMainOrig.value = val);
const DataUpdateMain = ( const DataUpdateMain = (
filter_1: number | null, filter_1: number | string,
filter_2: number | null, filter_2: string | null,
filter_3: boolean filter_3: boolean
) => { ) => {
DataMainUpdate.value = []; 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'); // console.log('case 1');
// return DataMainUpdate.value = DataMainOrig.value; อันเก่า // return DataMainUpdate.value = DataMainOrig.value; อันเก่า
return (DataMainUpdate.value = DataMainOrig.value.filter( return (DataMainUpdate.value = DataMainOrig.value.filter(
(item) => item.isExpired === filter_3 (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'); // console.log('case 1.1');
return (DataMainUpdate.value = DataMainOrig.value.filter( return (DataMainUpdate.value = DataMainOrig.value.filter(
(item) => item.isExpired === filter_3 (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'); // console.log('case 2');
return (DataMainUpdate.value = DataMainOrig.value.filter( return (DataMainUpdate.value = DataMainOrig.value.filter(
(item) => item.examOrder === filter_1 && item.isExpired === filter_3 (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'); // console.log('case 2.1');
return (DataMainUpdate.value = DataMainOrig.value.filter( return (DataMainUpdate.value = DataMainOrig.value.filter(
(item) => item.examOrder === filter_1 && item.isExpired === filter_3 (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'); // console.log('case 2.2');
return (DataMainUpdate.value = DataMainOrig.value.filter( return (DataMainUpdate.value = DataMainOrig.value.filter(
(item) => (item) =>
item.examOrder === filter_1 && item.examOrder === filter_1 &&
item.examType === filter_2 && item.examTypeValue === filter_2 &&
item.isExpired === filter_3 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'); // console.log('case 3');
return (DataMainUpdate.value = DataMainOrig.value.filter( 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'); // console.log('case 3.1');
return (DataMainUpdate.value = DataMainOrig.value.filter( return (DataMainUpdate.value = DataMainOrig.value.filter(
(item) => item.isExpired === filter_3 (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'); // console.log('case 3.2');
return (DataMainUpdate.value = DataMainOrig.value.filter( return (DataMainUpdate.value = DataMainOrig.value.filter(
(item) => item.isExpired === filter_3 (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'); // console.log('case 3.3');
return (DataMainUpdate.value = DataMainOrig.value.filter( return (DataMainUpdate.value = DataMainOrig.value.filter(
(item) => item.examOrder == filter_1 && item.isExpired == filter_3 (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'); // console.log('case 3.4');
return (DataMainUpdate.value = DataMainOrig.value.filter( return (DataMainUpdate.value = DataMainOrig.value.filter(
(item) => item.examOrder == filter_1 && item.isExpired == filter_3 (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'); // console.log('case 3.5');
return (DataMainUpdate.value = DataMainOrig.value.filter( return (DataMainUpdate.value = DataMainOrig.value.filter(
(item) => (item) =>
item.examOrder == filter_1 && item.examOrder == filter_1 &&
item.examType == filter_2 && item.examTypeValue == filter_2 &&
item.isExpired == filter_3 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'); // console.log('case 3.6');
return (DataMainUpdate.value = DataMainOrig.value.filter( return (DataMainUpdate.value = DataMainOrig.value.filter(
(item) => item.examType == filter_2 && item.isExpired == filter_3 (item) => item.examTypeValue == filter_2 && item.isExpired == filter_3
)); ));
} }
}; };

5
src/modules/08_registryEmployee/views/Main.vue
View file

@ -116,7 +116,7 @@
<q-item <q-item
clickable clickable
v-close-popup v-close-popup
@click="editDetail(props.row, 'wait')" @click="editDetail(props.row)"
> >
<q-item-section <q-item-section
style="min-width: 0px" style="min-width: 0px"
@ -127,7 +127,7 @@
<q-item-section>กำหนดตำแหน่ง</q-item-section> <q-item-section>กำหนดตำแหน่ง</q-item-section>
</q-item> </q-item>
<q-separator /> <q-separator />
<q-item clickable v-close-popup @click="clickDelete"> <q-item clickable v-close-popup @click="clickDelete('test')">
<q-item-section <q-item-section
style="min-width: 0px" style="min-width: 0px"
avatar avatar
@ -168,6 +168,7 @@ import type { QInput, QForm, QTableProps } from "quasar";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import type { treeTab } from "@/modules/05_placement/interface/index/Main";
const props = defineProps({ const props = defineProps({
next: { next: {