start commit for admin system
This commit is contained in:
commit
badb676529
300 changed files with 58634 additions and 0 deletions
3
.env.example
Normal file
3
.env.example
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
VITE_REALM_KEYCLOAK: "realms-name"
|
||||||
|
VITE_CLIENTID_KEYCLOAK: "client-id"
|
||||||
|
VITE_URL_KEYCLOAK: "https://id.your-domain.com/"
|
||||||
30
.gitignore
vendored
Normal file
30
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
.DS_Store
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
coverage
|
||||||
|
*.local
|
||||||
|
|
||||||
|
/cypress/videos/
|
||||||
|
/cypress/screenshots/
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
||||||
|
package-lock.json
|
||||||
21
Dockerfile
Normal file
21
Dockerfile
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
# docker build . -t docker.frappet.com/demo/fe:latest
|
||||||
|
FROM node:lts as build-stage
|
||||||
|
WORKDIR /app
|
||||||
|
COPY package*.json ./
|
||||||
|
RUN npm install
|
||||||
|
COPY ./ .
|
||||||
|
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
FROM nginx as production-stage
|
||||||
|
|
||||||
|
RUN mkdir /app
|
||||||
|
COPY --from=build-stage /app/dist /app
|
||||||
|
COPY nginx.conf /etc/nginx/nginx.conf
|
||||||
|
|
||||||
|
COPY entrypoint.sh /usr/local/bin/entrypoint.sh
|
||||||
|
RUN chmod u+x /usr/local/bin/entrypoint.sh
|
||||||
|
|
||||||
|
|
||||||
|
ENTRYPOINT ["/usr/local/bin/entrypoint.sh"]
|
||||||
|
CMD ["nginx", "-g", "daemon off;"]
|
||||||
7
README.md
Normal file
7
README.md
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
# Human Resource Information System (HRIS)
|
||||||
|
|
||||||
|
## Install & Run Project
|
||||||
|
|
||||||
|
> npm install
|
||||||
|
> npm run dev
|
||||||
|
> npm run build
|
||||||
8
cypress.config.ts
Normal file
8
cypress.config.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
import { defineConfig } from 'cypress'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
e2e: {
|
||||||
|
specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
|
||||||
|
baseUrl: 'http://localhost:4173'
|
||||||
|
}
|
||||||
|
})
|
||||||
8
cypress/e2e/example.cy.ts
Normal file
8
cypress/e2e/example.cy.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
// https://docs.cypress.io/api/introduction/api.html
|
||||||
|
|
||||||
|
describe('My First Test', () => {
|
||||||
|
it('visits the app root url', () => {
|
||||||
|
cy.visit('/')
|
||||||
|
cy.contains('h1', 'You did it!')
|
||||||
|
})
|
||||||
|
})
|
||||||
10
cypress/e2e/tsconfig.json
Normal file
10
cypress/e2e/tsconfig.json
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
{
|
||||||
|
"extends": "@vue/tsconfig/tsconfig.web.json",
|
||||||
|
"include": ["./**/*", "../support/**/*"],
|
||||||
|
"compilerOptions": {
|
||||||
|
"isolatedModules": false,
|
||||||
|
"target": "es5",
|
||||||
|
"lib": ["es5", "dom"],
|
||||||
|
"types": ["cypress"]
|
||||||
|
}
|
||||||
|
}
|
||||||
5
cypress/fixtures/example.json
Normal file
5
cypress/fixtures/example.json
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"name": "Using fixtures to represent data",
|
||||||
|
"email": "hello@cypress.io",
|
||||||
|
"body": "Fixtures are a great way to mock data for responses to routes"
|
||||||
|
}
|
||||||
39
cypress/support/commands.ts
Normal file
39
cypress/support/commands.ts
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
/// <reference types="cypress" />
|
||||||
|
// ***********************************************
|
||||||
|
// This example commands.ts shows you how to
|
||||||
|
// create various custom commands and overwrite
|
||||||
|
// existing commands.
|
||||||
|
//
|
||||||
|
// For more comprehensive examples of custom
|
||||||
|
// commands please read more here:
|
||||||
|
// https://on.cypress.io/custom-commands
|
||||||
|
// ***********************************************
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// -- This is a parent command --
|
||||||
|
// Cypress.Commands.add('login', (email, password) => { ... })
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// -- This is a child command --
|
||||||
|
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// -- This is a dual command --
|
||||||
|
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// -- This will overwrite an existing command --
|
||||||
|
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
|
||||||
|
//
|
||||||
|
// declare global {
|
||||||
|
// namespace Cypress {
|
||||||
|
// interface Chainable {
|
||||||
|
// login(email: string, password: string): Chainable<void>
|
||||||
|
// drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
|
||||||
|
// dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
|
||||||
|
// visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
export {}
|
||||||
20
cypress/support/e2e.ts
Normal file
20
cypress/support/e2e.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
// ***********************************************************
|
||||||
|
// This example support/index.js is processed and
|
||||||
|
// loaded automatically before your test files.
|
||||||
|
//
|
||||||
|
// This is a great place to put global configuration and
|
||||||
|
// behavior that modifies Cypress.
|
||||||
|
//
|
||||||
|
// You can change the location of this file or turn off
|
||||||
|
// automatically serving support files with the
|
||||||
|
// 'supportFile' configuration option.
|
||||||
|
//
|
||||||
|
// You can read more here:
|
||||||
|
// https://on.cypress.io/configuration
|
||||||
|
// ***********************************************************
|
||||||
|
|
||||||
|
// Import commands.js using ES2015 syntax:
|
||||||
|
import './commands'
|
||||||
|
|
||||||
|
// Alternatively you can use CommonJS syntax:
|
||||||
|
// require('./commands')
|
||||||
21
entrypoint.sh
Normal file
21
entrypoint.sh
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
#!/bin/sh
|
||||||
|
|
||||||
|
ROOT_DIR=/app
|
||||||
|
|
||||||
|
# Replace env vars in JavaScript files
|
||||||
|
echo "Replacing env constants in JS"
|
||||||
|
for file in $ROOT_DIR/assets/app.*.js* $ROOT_DIR/js/app.*.js* $ROOT_DIR/index.html $ROOT_DIR/precache-manifest*.js $ROOT_DIR/assets/index*.js* $ROOT_DIR/assets/*.js*;
|
||||||
|
do
|
||||||
|
echo "Processing $file ...";
|
||||||
|
|
||||||
|
sed -i 's|VITE_REALM_KEYCLOAK|'${VITE_REALM_KEYCLOAK}'|g' $file
|
||||||
|
sed -i 's|VITE_CLIENTID_KEYCLOAK|'${VITE_CLIENTID_KEYCLOAK}'|g' $file
|
||||||
|
sed -i 's|VITE_URL_KEYCLOAK|'${VITE_URL_KEYCLOAK}'|g' $file
|
||||||
|
sed -i 's|VITE_API_PUBLISH_URL|'${VITE_API_PUBLISH_URL}'|g' $file
|
||||||
|
sed -i 's|VITE_API_REPORT_URL|'${VITE_API_REPORT_URL}'|g' $file
|
||||||
|
|
||||||
|
done
|
||||||
|
|
||||||
|
echo "Starting Nginx"
|
||||||
|
nginx -g 'daemon off;'
|
||||||
|
|
||||||
2
env.d.ts
vendored
Normal file
2
env.d.ts
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
/// <reference types="vite/client" />
|
||||||
|
declare module 'quasar-ui-q-draggable-table';
|
||||||
13
index.html
Normal file
13
index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>ระบบบริหารทรัพยากรบุคคล</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
30
nginx.conf
Normal file
30
nginx.conf
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
user nginx;
|
||||||
|
worker_processes 1;
|
||||||
|
error_log /var/log/nginx/error.log warn;
|
||||||
|
pid /var/run/nginx.pid;
|
||||||
|
events {
|
||||||
|
worker_connections 1024;
|
||||||
|
}
|
||||||
|
http {
|
||||||
|
include /etc/nginx/mime.types;
|
||||||
|
default_type application/octet-stream;
|
||||||
|
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
|
||||||
|
'$status $body_bytes_sent "$http_referer" '
|
||||||
|
'"$http_user_agent" "$http_x_forwarded_for"';
|
||||||
|
access_log /var/log/nginx/access.log main;
|
||||||
|
sendfile on;
|
||||||
|
keepalive_timeout 65;
|
||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
server_name localhost;
|
||||||
|
location / {
|
||||||
|
root /app;
|
||||||
|
index index.html;
|
||||||
|
try_files $uri $uri/ /index.html;
|
||||||
|
}
|
||||||
|
error_page 500 502 503 504 /50x.html;
|
||||||
|
location = /50x.html {
|
||||||
|
root /usr/share/nginx/html;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
68
package.json
Normal file
68
package.json
Normal file
|
|
@ -0,0 +1,68 @@
|
||||||
|
{
|
||||||
|
"name": "hris-admin",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "run-p build-only",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"test:unit": "vitest --environment jsdom --root src/",
|
||||||
|
"test:e2e": "start-server-and-test preview :4173 'cypress run --e2e'",
|
||||||
|
"test:e2e:dev": "start-server-and-test 'vite dev --port 4173' :4173 'cypress open --e2e'",
|
||||||
|
"build-only": "vite build",
|
||||||
|
"type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
|
||||||
|
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@fullcalendar/core": "^6.0.1",
|
||||||
|
"@fullcalendar/daygrid": "^6.0.1",
|
||||||
|
"@fullcalendar/interaction": "^6.0.2",
|
||||||
|
"@fullcalendar/list": "^6.0.2",
|
||||||
|
"@fullcalendar/react": "^6.0.1",
|
||||||
|
"@fullcalendar/timegrid": "^6.0.2",
|
||||||
|
"@fullcalendar/vue3": "^6.0.1",
|
||||||
|
"@quasar/extras": "^1.15.8",
|
||||||
|
"@tato30/vue-pdf": "^1.5.1",
|
||||||
|
"@vuepic/vue-datepicker": "^3.6.3",
|
||||||
|
"axios": "^1.6.7",
|
||||||
|
"bma-org-chart": "^0.0.8",
|
||||||
|
"keycloak-js": "^20.0.2",
|
||||||
|
"moment": "^2.29.4",
|
||||||
|
"pinia": "^2.0.29",
|
||||||
|
"quasar": "^2.11.1",
|
||||||
|
"socket.io-client": "^4.7.4",
|
||||||
|
"structure-chart": "^0.0.9",
|
||||||
|
"vue": "^3.4.15",
|
||||||
|
"vue-currency-input": "^3.0.5",
|
||||||
|
"vue-router": "^4.1.6",
|
||||||
|
"vue3-datepicker": "^0.3.4"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@quasar/vite-plugin": "^1.3.0",
|
||||||
|
"@rushstack/eslint-patch": "^1.1.4",
|
||||||
|
"@types/jsdom": "^20.0.1",
|
||||||
|
"@types/node": "^18.11.12",
|
||||||
|
"@vitejs/plugin-vue": "^4.0.0",
|
||||||
|
"@vitejs/plugin-vue-jsx": "^3.0.0",
|
||||||
|
"@vue/eslint-config-prettier": "^7.0.0",
|
||||||
|
"@vue/eslint-config-typescript": "^11.0.0",
|
||||||
|
"@vue/test-utils": "^2.2.6",
|
||||||
|
"@vue/tsconfig": "^0.1.3",
|
||||||
|
"cypress": "^12.0.2",
|
||||||
|
"eslint": "^8.22.0",
|
||||||
|
"eslint-plugin-cypress": "^2.12.1",
|
||||||
|
"eslint-plugin-vue": "^9.3.0",
|
||||||
|
"jsdom": "^20.0.3",
|
||||||
|
"node-sass": "^9.0.0",
|
||||||
|
"npm-run-all": "^4.1.5",
|
||||||
|
"prettier": "^2.7.1",
|
||||||
|
"quasar-ui-q-draggable-table": "^1.0.1",
|
||||||
|
"sass": "^1.69.4",
|
||||||
|
"start-server-and-test": "^1.15.2",
|
||||||
|
"typescript": "~4.7.4",
|
||||||
|
"vite": "^4.0.0",
|
||||||
|
"vitest": "^0.25.6",
|
||||||
|
"vue-table-to-excel": "^1.0.6",
|
||||||
|
"vue-tsc": "^1.0.12"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1 MiB |
15
src/App.vue
Normal file
15
src/App.vue
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div id="azay-admin-app">
|
||||||
|
<router-view v-slot="{ Component }">
|
||||||
|
<transition>
|
||||||
|
<component :is="Component" />
|
||||||
|
</transition>
|
||||||
|
</router-view>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
</style>
|
||||||
16
src/api/00_dashboard/api.message.ts
Normal file
16
src/api/00_dashboard/api.message.ts
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
/**
|
||||||
|
* API Structure + Org Chart
|
||||||
|
*/
|
||||||
|
import env from "../index";
|
||||||
|
|
||||||
|
const message = `${env.API_URI}/message`;
|
||||||
|
const reply = `${env.API_URI}/placement/noti`;
|
||||||
|
|
||||||
|
export default {
|
||||||
|
msgNotificate: `${message}/my-notifications`,
|
||||||
|
msgInbox: `${message}/my-inboxes`,
|
||||||
|
msgId: (id: string) => `${message}/my-notifications/${id}`,
|
||||||
|
msgNoread: () => `${message}/my-notifications/noread`,
|
||||||
|
msgInboxDelete: (id: string) => `${message}/my-inboxes/${id}`,
|
||||||
|
replyMessage: (id: string) => `${reply}/${id}`,
|
||||||
|
};
|
||||||
14
src/api/02_organizational/api.chart.ts
Normal file
14
src/api/02_organizational/api.chart.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
/**
|
||||||
|
* API Structure + Org Chart
|
||||||
|
*/
|
||||||
|
import env from "../index"
|
||||||
|
|
||||||
|
const treeRoot = `${env.API_URI}/Organization/treeroot`
|
||||||
|
const structChart = `${env.API_URI}/Organization/struct-chart/`
|
||||||
|
const orgChart = `${env.API_URI}/Organization/org-chart/`
|
||||||
|
|
||||||
|
export default {
|
||||||
|
chartGetTreeRoot: `${treeRoot}`,
|
||||||
|
chartGetStructure: (id: string) => `${structChart}${id}`,
|
||||||
|
chartGetOrg: (id: string) => `${orgChart}${id}`
|
||||||
|
}
|
||||||
92
src/api/02_organizational/api.organization.ts
Normal file
92
src/api/02_organizational/api.organization.ts
Normal file
|
|
@ -0,0 +1,92 @@
|
||||||
|
import env from "../index";
|
||||||
|
|
||||||
|
const organization = `${env.API_URI}/org`;
|
||||||
|
const orgPos = `${env.API_URI}/org/pos`;
|
||||||
|
const orgProfile = `${env.API_URI}/org/profile`;
|
||||||
|
const orgEmployeePos = `${env.API_URI}/org/employee/pos`;
|
||||||
|
|
||||||
|
export default {
|
||||||
|
/** โครงสร้างอัตรากำลัง*/
|
||||||
|
activeOrganization: `${organization}/active`,
|
||||||
|
orgByid: (id: string) => `${organization}/${id}`,
|
||||||
|
createOrganization: `${organization}/draft`,
|
||||||
|
createOrgLevel: (type: string) => `${organization}/${type}`,
|
||||||
|
orgLevelByid: (type: string, id: string) => `${organization}/${type}/${id}`,
|
||||||
|
|
||||||
|
orgSetDateTime: (id: string) => `${organization}/set/publish/${id}`,
|
||||||
|
organizationHistoryNew: `${organization}/history`,
|
||||||
|
organizationHistoryPostNew: `${organization}/history/publish`,
|
||||||
|
|
||||||
|
/** position*/
|
||||||
|
orgPosPosition: `${orgPos}/position`,
|
||||||
|
orgPosPositionById: (id: string) => `${orgPos}/position/${id}`,
|
||||||
|
orgPosPositionExecutive : () => `${orgPos}/position/executive`,
|
||||||
|
orgPosExecutive: `${orgPos}/executive`,
|
||||||
|
orgPosType: `${orgPos}/type`,
|
||||||
|
orgPosTypeId: (id: string) => `${orgPos}/type/${id}`,
|
||||||
|
orgPosLevel: `${orgPos}/level`,
|
||||||
|
orgPosMaster: `${orgPos}/master`,
|
||||||
|
orgPosMasterById: (id: string) => `${orgPos}/master/${id}`,
|
||||||
|
orgPosMasterList: `${orgPos}/master/list`,
|
||||||
|
orgPosSort: `${orgPos}/sort`,
|
||||||
|
orgPosMove: `${orgPos}/move`,
|
||||||
|
organizationShortName: `${organization}/sort`,
|
||||||
|
organizationPublishGet: `${organization}/get/publish`,
|
||||||
|
orgPosDNA: `${orgPos}/dna`, //สืบทอดตำแหน่ง
|
||||||
|
|
||||||
|
orgPosExecutiveById: (id: string) => `${orgPos}/executive/${id}`,
|
||||||
|
orgPosHistory: (id: string) => `${orgPos}/history/${id}`,
|
||||||
|
|
||||||
|
orgSalaryPosition: `${orgPos}/position?keyword=&type=ALL`,
|
||||||
|
|
||||||
|
/**ครองตำแหน่ง */
|
||||||
|
orgSearchProfile: `${orgProfile}/search`,
|
||||||
|
orgProfile: `${orgPos}/profile`,
|
||||||
|
orgDeleteProfile: (id: string) => `${orgPos}/profile/delete/${id}`,
|
||||||
|
orgSummary: `${orgPos}/summary`,
|
||||||
|
|
||||||
|
/** report*/
|
||||||
|
orgReport: (report: string) => `${organization}/report/${report}`,
|
||||||
|
|
||||||
|
/** struct-chart*/
|
||||||
|
orgStructChart: (id: string, type: string) =>
|
||||||
|
`${organization}/struct-chart/${id}/${type}`,
|
||||||
|
|
||||||
|
// ค้นหาคนตามเงื่อนไข
|
||||||
|
orgSearchPersonal: () => `${organization}/profile/search-personal`,
|
||||||
|
|
||||||
|
/** บรรจุแต่งตั้ง*/
|
||||||
|
orgPosPlacement: `${orgPos}/placement/search`,
|
||||||
|
orgPosPlacemenTemp: `${orgPos}/placementemp/search`,
|
||||||
|
orgPosFind: `${organization}/find/node`,
|
||||||
|
orgProfileProbation: `${organization}/profile/probation`,
|
||||||
|
|
||||||
|
activeOrganizationRoot: `${organization}/active/root`,
|
||||||
|
activeOrganizationRootById: (id: string) =>
|
||||||
|
`${organization}/active/root/${id}`,
|
||||||
|
|
||||||
|
/** ข้อมูลตำแหน่งลูกจ้างประจำ*/
|
||||||
|
orgEmployeePos: `${orgEmployeePos}/position`,
|
||||||
|
orgEmployeePosById: (id: string) => `${orgEmployeePos}/position/${id}`,
|
||||||
|
orgEmployeeType: `${orgEmployeePos}/type`,
|
||||||
|
orgEmployeeTypeById: (id: string) => `${orgEmployeePos}/type/${id}`,
|
||||||
|
orgEmployeelevel: `${orgEmployeePos}/level`,
|
||||||
|
orgEmployeelevelById: (id: string) => `${orgEmployeePos}/level/${id}`,
|
||||||
|
|
||||||
|
/** อัตรากำลังลูกจ้างประจำ*/
|
||||||
|
orgSummaryEmp: `${orgEmployeePos}/summary`,
|
||||||
|
orgReportEmp: (report: string) => `${orgEmployeePos}/report/${report}`,
|
||||||
|
orgDeleteProfileEmp: (id: string) => `${orgEmployeePos}/profile/delete/${id}`,
|
||||||
|
orgPosMasterByIdEmp: (id: string) => `${orgEmployeePos}/master/${id}`,
|
||||||
|
orgPosMasterListEmp: `${orgEmployeePos}/master/list`,
|
||||||
|
orgPosMasterEmp: `${orgEmployeePos}/master`,
|
||||||
|
orgPosSortEmp: `${orgEmployeePos}/sort`,
|
||||||
|
orgPosPositionEmpById: (id: string) => `${orgEmployeePos}/position/${id}`,
|
||||||
|
orgPosMoveEmp: `${orgEmployeePos}/move`,
|
||||||
|
orgProfileEmp: `${orgEmployeePos}/profile`,
|
||||||
|
orgSearchProfileEmp: `${orgProfile}-employee/search`,
|
||||||
|
|
||||||
|
orgProfileById:(id:string,type:string)=>`${orgProfile}${type}/${id}`,
|
||||||
|
|
||||||
|
orgDeceasedProfile:`${orgPos}/profile/search`
|
||||||
|
};
|
||||||
94
src/api/02_organizational/api.treelist.ts
Normal file
94
src/api/02_organizational/api.treelist.ts
Normal file
|
|
@ -0,0 +1,94 @@
|
||||||
|
/**
|
||||||
|
* api ระบบจัดการ Tree
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
import env from "../index";
|
||||||
|
//Dropdown เพิ่มโครงร้างหน่วยงาน
|
||||||
|
// const organizationAgency = `${env.API_URI_ORG_SERVICE}/organization-agency/`;
|
||||||
|
// const organizationGovernmentAgency = `${env.API_URI_ORG_SERVICE}/organization-government-agency/`;
|
||||||
|
// const organizationPath = `${env.API_URI}/Organization/tree`;
|
||||||
|
const organizationPath = `${env.API_URI_ORG_SERVICE}/Organization/`;
|
||||||
|
const postionMasterPath = `${env.API_URI_ORG_SERVICE}/PositionMaster`;
|
||||||
|
const organizationPosition = `${env.API_URI_ORG_SERVICE}/OrganizationPosition/`;
|
||||||
|
const organizationEmployee = `${env.API_URI_ORG_EMPLOYEE_SERVICE}/organization-employee/`;
|
||||||
|
|
||||||
|
const report = `${env.API_URI}/report/organization/`;
|
||||||
|
|
||||||
|
export default {
|
||||||
|
getOCType: `${report}oc-type`,
|
||||||
|
getReportAccount1: (id: string) => `${report}account1/${id}`,
|
||||||
|
getReportAccount2: (id: string) => `${report}account2/${id}`,
|
||||||
|
getReportAccount3: (id: string) => `${report}account3/${id}`,
|
||||||
|
|
||||||
|
/**api หน่วยงานต้นสังกัด/ส่วนราชการต้นสังกัด
|
||||||
|
* @param organizationType หน่วยงาน หรือ ส่วนราชการ
|
||||||
|
* @returns organizationId and organizationName
|
||||||
|
*/
|
||||||
|
listOrganizationAgency: (organizationType: string) =>
|
||||||
|
`${organizationPath}type/${organizationType}`,
|
||||||
|
listOrganizationHistoryAgency: (organizationType: string) =>
|
||||||
|
`${organizationPath}history/type/${organizationType}`,
|
||||||
|
|
||||||
|
/**api Tree
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
// treeList: `${organizationPath}`,
|
||||||
|
getTreeRoot: `${organizationPath}treeroot`,
|
||||||
|
getDraftTreeRoot: `${organizationPath}history/treeroot`,
|
||||||
|
getTreeHistory: `${organizationPath}publish-history`,
|
||||||
|
|
||||||
|
getPublishFileHistory: `${organizationPath}publish-file`,
|
||||||
|
|
||||||
|
getTreeNode: (organizationId: string, keyId: string) =>
|
||||||
|
`${organizationPath}tree?organizationId=${organizationId}&keyId=${keyId}`,
|
||||||
|
getDraftTreeNode: (organizationId: string, keyId: string) =>
|
||||||
|
`${organizationPath}history/tree?organizationId=${organizationId}&keyId=${keyId}`,
|
||||||
|
addTreeDraft: `${organizationPosition}history`,
|
||||||
|
editTreeOrgDraft: (organizationId: string) =>
|
||||||
|
`${organizationPath}history/${organizationId}`,
|
||||||
|
getOrgDraft: (organizationId: string) =>
|
||||||
|
`${organizationPath}history/${organizationId}`,
|
||||||
|
// /api/v1/Organization/history?organizationPositionId=65ab2ddc-b9d2-4422-83d4-b90dd8191b6f
|
||||||
|
delTreeOrgDraft: (organizationId: string) =>
|
||||||
|
`${organizationPath}history?organizationPositionId=${organizationId}`,
|
||||||
|
getPostionMasterDraft: (showAll: boolean) =>
|
||||||
|
`${postionMasterPath}/history?showall=${showAll}`,
|
||||||
|
getPostionMaster: (showAll: boolean) =>
|
||||||
|
`${postionMasterPath}?showall=${showAll}`,
|
||||||
|
editTreePositionDraft: (organizationPositionId: string) =>
|
||||||
|
`${organizationPosition}history?organizationPositionId=${organizationPositionId}`,
|
||||||
|
// /api/v1/OrganizationPosition/history?organizationPositionId=15ec8c2b-796f-4fad-b731-667a232e723e
|
||||||
|
delTreePositionDraft: (organizationPositionId: string) =>
|
||||||
|
`${organizationPosition}history/${organizationPositionId}`,
|
||||||
|
|
||||||
|
//PUT /api/v1/OrganizationPosition/history/publish
|
||||||
|
publishOrgPoDraft: `${organizationPosition}history/publish`,
|
||||||
|
//PUT /api/v1/OrganizationPosition/history/sync
|
||||||
|
delTreeOrgPoDraft: `${organizationPosition}history/sync`,
|
||||||
|
isOrgPohasDraft: `${organizationPosition}history/has-draft`,
|
||||||
|
isOrghasDraft: `${organizationPath}history/has-draft`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api จัดการตำแหน่ง
|
||||||
|
*/
|
||||||
|
getPositionMaster: `${postionMasterPath}/history`,
|
||||||
|
getPositionMasterId: (id: string) => `${postionMasterPath}/history/${id}`,
|
||||||
|
getPositionMasterPublish: `${postionMasterPath}/history/publish`,
|
||||||
|
getPositionMasterSync: `${postionMasterPath}/history/sync`,
|
||||||
|
getPositionMasterHistoryId: (id: string) =>
|
||||||
|
`${postionMasterPath}/history/publish/${id}`,
|
||||||
|
|
||||||
|
getPositionMasterPositionNumber: `${postionMasterPath}/position-number`,
|
||||||
|
getPositionMasterPositionNumberId: (id: string) =>
|
||||||
|
`${postionMasterPath}/position-number/${id}`,
|
||||||
|
getPositionNumberIdByOcId: (OcId: string) =>
|
||||||
|
`${postionMasterPath}/position-number/Oc/${OcId}`,
|
||||||
|
|
||||||
|
organizationEmployee: `${organizationEmployee}`,
|
||||||
|
organizationEmployeeId: (id: string) => `${organizationEmployee}${id}`,
|
||||||
|
|
||||||
|
organizationEmployeePositionId: (profileId: string) =>
|
||||||
|
`${organizationEmployee}position/${profileId}`,
|
||||||
|
organizationEmployeeSendOrder: `${organizationEmployee}report`,
|
||||||
|
|
||||||
|
};
|
||||||
23
src/api/file/api.file.ts
Normal file
23
src/api/file/api.file.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import env from "../index";
|
||||||
|
const url = `${env.API_URI}/salary`;
|
||||||
|
|
||||||
|
export default {
|
||||||
|
subFile: (name: string, group: string, id: string, subId: string) =>
|
||||||
|
`${url}/sub-file/${name}/${group}/${id}/${subId}`,
|
||||||
|
|
||||||
|
subFileByFileName: (
|
||||||
|
name: string,
|
||||||
|
group: string,
|
||||||
|
id: string,
|
||||||
|
subId: string,
|
||||||
|
fileName: string
|
||||||
|
) => `${url}/sub-file/${name}/${group}/${id}/${subId}/${fileName}`,
|
||||||
|
|
||||||
|
file: (name: string, group: string, id: string) =>
|
||||||
|
`${url}/file/${name}/${group}/${id}`,
|
||||||
|
|
||||||
|
fileByPath: (name: string) =>
|
||||||
|
`${url}/file/${name}`,
|
||||||
|
fileByFile: (name: string, group: string, id: string, fileName: string) =>
|
||||||
|
`${url}/file/${name}/${group}/${id}/${fileName}`,
|
||||||
|
};
|
||||||
70
src/api/index.ts
Normal file
70
src/api/index.ts
Normal file
|
|
@ -0,0 +1,70 @@
|
||||||
|
/**config api */
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
const env = ref<string>(process.env.NODE_ENV || "development");
|
||||||
|
export const apiUrlConfigPublish = import.meta.env.VITE_API_PUBLISH_URL;
|
||||||
|
export const apiUrlConfigReport = import.meta.env.VITE_API_REPORT_URL;
|
||||||
|
// if (process.env.VUE_APP_TEST) {
|
||||||
|
// env = "test";
|
||||||
|
// }
|
||||||
|
|
||||||
|
const config = ref<any>({
|
||||||
|
development: {
|
||||||
|
API_URI: "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://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว
|
||||||
|
API_URI_PROFILE_SERVICE: "https://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว
|
||||||
|
API_REPORT_URI: "https://bma-ehr.frappet.synology.me/api/v1",
|
||||||
|
MEET_URI: "meet.frappet.com",
|
||||||
|
API_REPORT2_URI: "https://bma-ehr.frappet.synology.me/api/v2",
|
||||||
|
API_REPORT_TEMPLATE_URI:
|
||||||
|
"https://report-server.frappet.synology.me/api/v1/report-template",
|
||||||
|
},
|
||||||
|
test: {
|
||||||
|
API_URI: "http://localhost:5010/api/v1",
|
||||||
|
API_CANDIDATE_URI: "https://localhost:7007/api/v1",
|
||||||
|
API_REPORT_URI: "https://localhost:7007/api/v1",
|
||||||
|
MEET_URI: "meet.frappet.com",
|
||||||
|
},
|
||||||
|
production: {
|
||||||
|
// API_URI: "https://localhost:5010",
|
||||||
|
API_URI: `${window.location.protocol}//${window.location.host}/api/v1`,
|
||||||
|
API_URI_ORG_SERVICE: `${window.location.protocol}//${window.location.host}/api/v1`, //ใช้ชั่วคราว
|
||||||
|
API_URI_ORG_EMPLOYEE_SERVICE: `${window.location.protocol}//${window.location.host}/api/v1`, //ใช้ชั่วคราว
|
||||||
|
API_URI_PROFILE_SERVICE: `${window.location.protocol}//${window.location.host}/api/v1`,
|
||||||
|
API_REPORT_URI: `${window.location.protocol}//${window.location.host}/api/v1`,
|
||||||
|
MEET_URI: "meet.frappet.com",
|
||||||
|
API_REPORT2_URI: `${window.location.protocol}//${window.location.host}/api/v2`,
|
||||||
|
API_REPORT_TEMPLATE_URI: apiUrlConfigReport,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const API_URI = ref<string>(config.value[env.value].API_URI);
|
||||||
|
const API_REPORT_URI = ref<string>(config.value[env.value].API_REPORT_URI);
|
||||||
|
const API_URI_ORG_SERVICE = ref<string>(
|
||||||
|
config.value[env.value].API_URI_ORG_SERVICE
|
||||||
|
);
|
||||||
|
const API_URI_ORG_EMPLOYEE_SERVICE = ref<string>(
|
||||||
|
config.value[env.value].API_URI_ORG_EMPLOYEE_SERVICE
|
||||||
|
);
|
||||||
|
const MEET_URI = ref<string>(config.value[env.value].MEET_URI);
|
||||||
|
const API_URI_PROFILE_SERVICE = ref<string>(
|
||||||
|
config.value[env.value].API_URI_PROFILE_SERVICE
|
||||||
|
);
|
||||||
|
const API_REPORT2_URI = ref<string>(config.value[env.value].API_REPORT2_URI);
|
||||||
|
const API_REPORT_TEMPLATE_URI = ref<string>(
|
||||||
|
config.value[env.value].API_REPORT_TEMPLATE_URI
|
||||||
|
);
|
||||||
|
|
||||||
|
export default {
|
||||||
|
env: env.value,
|
||||||
|
config: config.value,
|
||||||
|
API_URI: API_URI.value,
|
||||||
|
API_REPORT_URI: API_REPORT_URI.value,
|
||||||
|
API_URI_ORG_SERVICE: API_URI_ORG_SERVICE.value,
|
||||||
|
API_URI_ORG_EMPLOYEE_SERVICE: API_URI_ORG_EMPLOYEE_SERVICE.value,
|
||||||
|
API_URI_PROFILE_SERVICE: API_URI_PROFILE_SERVICE.value,
|
||||||
|
MEET_URI: MEET_URI.value,
|
||||||
|
API_REPORT2_URI: API_REPORT2_URI.value,
|
||||||
|
API_REPORT_TEMPLATE_URI: API_REPORT_TEMPLATE_URI.value,
|
||||||
|
};
|
||||||
23
src/api/manage/api.holiday.ts
Normal file
23
src/api/manage/api.holiday.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
/**
|
||||||
|
* api ระบบจัดการข้อมูลหลัก
|
||||||
|
* เมนูย่อย: ปฏิทินวันหยุด
|
||||||
|
*/
|
||||||
|
import env from "../index";
|
||||||
|
const holiday = `${env.API_URI}/metadata/holiday/`;
|
||||||
|
|
||||||
|
export default {
|
||||||
|
/**
|
||||||
|
* api ชั้นเครื่องราชฯ
|
||||||
|
*/
|
||||||
|
listHolidayHistoryAdd: (category: string) =>
|
||||||
|
`${holiday}range/add/${category}`,
|
||||||
|
listHolidayHistoryEdit: (category: string) =>
|
||||||
|
`${holiday}range/edit/${category}`,
|
||||||
|
listHolidayHistoryDelete: (category: string) =>
|
||||||
|
`${holiday}range/delete/${category}`,
|
||||||
|
listHolidayHistoryYear: (year: number) => `${holiday}${year}`,
|
||||||
|
listHolidayHistoryYearMonth: (year: number, month: number) =>
|
||||||
|
`${holiday}${year}/${month}`,
|
||||||
|
listHolidayCopy: `${holiday}copy`,
|
||||||
|
summaryHolidayHistoryYear: (year: number) => `${holiday}summary/${year}`,
|
||||||
|
};
|
||||||
48
src/api/manage/api.insignia.ts
Normal file
48
src/api/manage/api.insignia.ts
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
/**
|
||||||
|
* api ระบบจัดการข้อมูลหลัก
|
||||||
|
* เมนูย่อย: ข้อมูลเครื่องราชอิสริยาภรณ์
|
||||||
|
*/
|
||||||
|
import env from "../index";
|
||||||
|
const insignia = `${env.API_URI}/metadata/insignia/`;
|
||||||
|
const insigniaType = `${env.API_URI}/metadata/insignia-type/`;
|
||||||
|
const insigniaOrg = `${env.API_URI}/org/insignia/insignia/`;
|
||||||
|
const insigniaTypeOrg = `${env.API_URI}/org/insignia/insignia-type/`;
|
||||||
|
|
||||||
|
export default {
|
||||||
|
/**
|
||||||
|
* api ชั้นเครื่องราชฯ
|
||||||
|
*/
|
||||||
|
insignia,
|
||||||
|
listInsigniaHistory: `${insignia}history`,
|
||||||
|
listInsigniaHistoryId: (id: string) => `${insignia}history/${id}`,
|
||||||
|
listInsigniaPublished: `${insignia}history/published`,
|
||||||
|
listInsigniaPublishedHistory: `${insignia}history/published-history`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api ประเภท
|
||||||
|
*/
|
||||||
|
insigniaType,
|
||||||
|
listInsigniaTypeHistory: `${insigniaType}history`,
|
||||||
|
listInsigniaTypeHistoryId: (id: string) => `${insigniaType}history/${id}`,
|
||||||
|
listInsigniaTypePublished: `${insigniaType}history/published`,
|
||||||
|
listInsigniaTypePublishedHistory: `${insigniaType}history/published-history`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api เหรียญตรา
|
||||||
|
*/
|
||||||
|
// listInsigniaHistory: `${insignia}history`,
|
||||||
|
// listInsigniaHistoryId: (id: string) => `${insignia}history/${id}`,
|
||||||
|
// listInsigniaPublished: `${insignia}history/published`,
|
||||||
|
// listInsigniaPublishedHistory: `${insignia}history/published-history`,
|
||||||
|
insigniaTypeNew: `${insigniaType}draft`,
|
||||||
|
insigniaTypeNewId: (id: string) => `${insigniaType}${id}`,
|
||||||
|
insigniaNewId: (id: string) => `${insignia}${id}`,
|
||||||
|
insigniaSort: (id: string) => `${insignia}sort/${id}`,
|
||||||
|
|
||||||
|
insigniaOrg,
|
||||||
|
insigniaTypeOrg,
|
||||||
|
insigniaTypeNewOrg: `${insigniaOrg}`,
|
||||||
|
insigniaTypeNewIdOrg: (id: string) => `${insigniaTypeOrg}${id}`,
|
||||||
|
insigniaNewIdOrg: (id: string) => `${insigniaOrg}${id}`,
|
||||||
|
insigniaSortOrg: (id: string) => `${insigniaOrg}sort/${id}`,
|
||||||
|
};
|
||||||
133
src/api/manage/api.organization.ts
Normal file
133
src/api/manage/api.organization.ts
Normal file
|
|
@ -0,0 +1,133 @@
|
||||||
|
/**
|
||||||
|
* api ระบบจัดการข้อมูลหลัก
|
||||||
|
* เมนูย่อย: ข้อมูลโครงสร้างหน่วยงาน
|
||||||
|
*/
|
||||||
|
import env from "../index";
|
||||||
|
const organizationMain = `${env.API_URI}/metadata/main/`;
|
||||||
|
const organization = `${env.API_URI}/metadata/organization/`;
|
||||||
|
const organizationOrganization = `${env.API_URI}/metadata/organization-organization/`;
|
||||||
|
const organizationShortName = `${env.API_URI}/metadata/organization-shortname/`;
|
||||||
|
const organizationCode = `${env.API_URI_ORG_SERVICE}/PositionMaster/`;
|
||||||
|
const organizationType = `${env.API_URI}/metadata/organization-type/`;
|
||||||
|
const organizationLevel = `${env.API_URI}/metadata/organization-level/`;
|
||||||
|
const organizationStatus = `${env.API_URI}/metadata/organization-status/`;
|
||||||
|
const organizationAgency = `${env.API_URI}/metadata/organization-agency/`;
|
||||||
|
const organizationGovernmentAgency = `${env.API_URI}/metadata/organization-government-agency/`;
|
||||||
|
const organizationTelExternal = `${env.API_URI}/metadata/organization-tel-external/`;
|
||||||
|
const organizationTelInternal = `${env.API_URI}/metadata/organization-tel-internal/`;
|
||||||
|
const organizationFax = `${env.API_URI}/metadata/organization-fax/`;
|
||||||
|
const dashbord = `${env.API_URI}/metadata/dashbord/`;
|
||||||
|
|
||||||
|
export default {
|
||||||
|
/**
|
||||||
|
* api จำนวนข้อมูลใน ระบบจัดการข้อมูลหลัก tab ย่อยแต่ละ tab
|
||||||
|
*/
|
||||||
|
organizationMain: `${organizationMain}organization`,
|
||||||
|
organization,
|
||||||
|
countDashbordSubHistory: (type: number) => `${dashbord}${type}`,
|
||||||
|
countDashbordHistory: `${dashbord}`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api หน่วยงาน
|
||||||
|
*/
|
||||||
|
organizationOrganization,
|
||||||
|
listOrganizationOrganizationHistory: `${organizationOrganization}history`,
|
||||||
|
listOrganizationOrganizationHistoryId: (id: string) =>
|
||||||
|
`${organizationOrganization}history/${id}`,
|
||||||
|
listOrganizationOrganizationPublished: `${organizationOrganization}history/published`,
|
||||||
|
listOrganizationOrganizationPublishedHistory: `${organizationOrganization}history/published-history`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api ชื่อย่อหน่วยงาน
|
||||||
|
*/
|
||||||
|
organizationShortName,
|
||||||
|
listOrganizationShortNameHistory: `${organizationShortName}history`,
|
||||||
|
listOrganizationShortNameHistoryId: (id: string) =>
|
||||||
|
`${organizationShortName}history/${id}`,
|
||||||
|
listOrganizationShortNamePublished: `${organizationShortName}history/published`,
|
||||||
|
listOrganizationShortNamePublishedHistory: `${organizationShortName}history/published-history`,
|
||||||
|
organizationCode: `${organizationCode}organization-code`,
|
||||||
|
organizationGovernmentCode: (id: string) =>
|
||||||
|
`${organizationCode}government/${id}`,
|
||||||
|
organizationAgencyCode: (id: string) => `${organizationCode}agency/${id}`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api ประเภท
|
||||||
|
*/
|
||||||
|
organizationType,
|
||||||
|
listOrganizationTypeHistory: `${organizationType}history`,
|
||||||
|
listOrganizationTypeHistoryId: (id: string) =>
|
||||||
|
`${organizationType}history/${id}`,
|
||||||
|
listOrganizationTypePublished: `${organizationType}history/published`,
|
||||||
|
listOrganizationTypePublishedHistory: `${organizationType}history/published-history`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api ระดับ
|
||||||
|
*/
|
||||||
|
organizationLevel,
|
||||||
|
listOrganizationLevelHistory: `${organizationLevel}history`,
|
||||||
|
listOrganizationLevelHistoryId: (id: string) =>
|
||||||
|
`${organizationLevel}history/${id}`,
|
||||||
|
listOrganizationLevelPublished: `${organizationLevel}history/published`,
|
||||||
|
listOrganizationLevelPublishedHistory: `${organizationLevel}history/published-history`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api สถานะ
|
||||||
|
*/
|
||||||
|
organizationStatus,
|
||||||
|
listOrganizationStatusHistory: `${organizationStatus}history`,
|
||||||
|
listOrganizationStatusHistoryId: (id: string) =>
|
||||||
|
`${organizationStatus}history/${id}`,
|
||||||
|
listOrganizationStatusPublished: `${organizationStatus}history/published`,
|
||||||
|
listOrganizationStatusPublishedHistory: `${organizationStatus}history/published-history`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api หน่วยงานต้นสังกัด
|
||||||
|
*/
|
||||||
|
organizationAgency,
|
||||||
|
listOrganizationAgencyHistory: `${organizationAgency}history`,
|
||||||
|
listOrganizationAgencyHistoryId: (id: string) =>
|
||||||
|
`${organizationAgency}history/${id}`,
|
||||||
|
listOrganizationAgencyPublished: `${organizationAgency}history/published`,
|
||||||
|
listOrganizationAgencyPublishedHistory: `${organizationAgency}history/published-history`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api ส่วนราชการต้นสังกัด
|
||||||
|
*/
|
||||||
|
organizationGovernmentAgency,
|
||||||
|
listOrganizationGovernmentAgencyHistory: `${organizationGovernmentAgency}history`,
|
||||||
|
listOrganizationGovernmentAgencyHistoryId: (id: string) =>
|
||||||
|
`${organizationGovernmentAgency}history/${id}`,
|
||||||
|
listOrganizationGovernmentAgencyPublished: `${organizationGovernmentAgency}history/published`,
|
||||||
|
listOrganizationGovernmentAgencyPublishedHistory: `${organizationGovernmentAgency}history/published-history`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api เบอร์ติดต่อภายนอก
|
||||||
|
*/
|
||||||
|
organizationTelExternal,
|
||||||
|
listOrganizationTelExternalHistory: `${organizationTelExternal}history`,
|
||||||
|
listOrganizationTelExternalHistoryId: (id: string) =>
|
||||||
|
`${organizationTelExternal}history/${id}`,
|
||||||
|
listOrganizationTelExternalPublished: `${organizationTelExternal}history/published`,
|
||||||
|
listOrganizationTelExternalPublishedHistory: `${organizationTelExternal}history/published-history`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api เบอร์ติดต่อภายใน
|
||||||
|
*/
|
||||||
|
organizationTelInternal,
|
||||||
|
listOrganizationTelInternalHistory: `${organizationTelInternal}history`,
|
||||||
|
listOrganizationTelInternalHistoryId: (id: string) =>
|
||||||
|
`${organizationTelInternal}history/${id}`,
|
||||||
|
listOrganizationTelInternalPublished: `${organizationTelInternal}history/published`,
|
||||||
|
listOrganizationTelInternalPublishedHistory: `${organizationTelInternal}history/published-history`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api เบอร์โทรสาร
|
||||||
|
*/
|
||||||
|
organizationFax,
|
||||||
|
listOrganizationFaxHistory: `${organizationFax}history`,
|
||||||
|
listOrganizationFaxHistoryId: (id: string) =>
|
||||||
|
`${organizationFax}history/${id}`,
|
||||||
|
listOrganizationFaxPublished: `${organizationFax}history/published`,
|
||||||
|
listOrganizationFaxPublishedHistory: `${organizationFax}history/published-history`,
|
||||||
|
};
|
||||||
140
src/api/manage/api.person.ts
Normal file
140
src/api/manage/api.person.ts
Normal file
|
|
@ -0,0 +1,140 @@
|
||||||
|
/**
|
||||||
|
* api ระบบจัดการข้อมูลหลัก
|
||||||
|
* เมนูย่อย: ข้อมูลเกี่ยวกับบุคคล
|
||||||
|
*/
|
||||||
|
import env from "../index";
|
||||||
|
const person = `${env.API_URI}/metadata/main/`;
|
||||||
|
const province = `${env.API_URI}/metadata/province/`;
|
||||||
|
const district = `${env.API_URI}/metadata/district/`;
|
||||||
|
const subDistrict = `${env.API_URI}/metadata/sub-district/`;
|
||||||
|
const prefix = `${env.API_URI}/metadata/prefix/`;
|
||||||
|
const bloodGroup = `${env.API_URI}/metadata/blood-group/`;
|
||||||
|
const educationLevel = `${env.API_URI}/metadata/education-level/`;
|
||||||
|
const gender = `${env.API_URI}/metadata/gender/`;
|
||||||
|
const relationship = `${env.API_URI}/metadata/relationship/`;
|
||||||
|
const religion = `${env.API_URI}/metadata/religion/`;
|
||||||
|
|
||||||
|
const orgRelationship = `${env.API_URI}/org/metadata/relationship/`;
|
||||||
|
const orgPrefix = `${env.API_URI}/org/metadata/prefix/`;
|
||||||
|
const orgRank = `${env.API_URI}/org/metadata/rank/`;
|
||||||
|
const orgBloodGroup = `${env.API_URI}/org/metadata/bloodGroup/`;
|
||||||
|
const orgGender = `${env.API_URI}/org/metadata/gender/`;
|
||||||
|
const orgReligion = `${env.API_URI}/org/metadata/religion/`;
|
||||||
|
const orgEducationLevel = `${env.API_URI}/org/metadata/educationLevel/`;
|
||||||
|
|
||||||
|
const orgProvince = `${env.API_URI}/org/metadata/province`;
|
||||||
|
const orgDistrict = `${env.API_URI}/org/metadata/district`;
|
||||||
|
const orgSubDistrict = `${env.API_URI}/org/metadata/subDistrict`;
|
||||||
|
|
||||||
|
export default {
|
||||||
|
person: `${person}person`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api จังหวัด
|
||||||
|
*/
|
||||||
|
province,
|
||||||
|
listProvinceHistory: `${province}history`,
|
||||||
|
listProvinceHistoryId: (id: string) => `${province}history/${id}`,
|
||||||
|
listProvincePublished: `${province}history/published`,
|
||||||
|
listProvincePublishedHistory: `${province}history/published-history`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api เขต
|
||||||
|
*/
|
||||||
|
listDistrict: (id: string) => `${district}${id}`,
|
||||||
|
listDistrictHistory: `${district}history`,
|
||||||
|
listDistrictHistoryId: (id: string | string[]) => `${district}history/${id}`,
|
||||||
|
listDistrictPublishedId: (id: string) => `${district}history/published/${id}`,
|
||||||
|
listDistrictPublishedHistory: (id: string | string[]) =>
|
||||||
|
`${district}history/published-history/${id}`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api แขวง
|
||||||
|
*/
|
||||||
|
listSubDistrict: (id: string) => `${subDistrict}${id}`,
|
||||||
|
listSubDistrictHistory: `${subDistrict}history`,
|
||||||
|
listSubDistrictHistoryProvinceId: (
|
||||||
|
provinceId: string | string[],
|
||||||
|
district: string | string[]
|
||||||
|
) => `${subDistrict}history/${provinceId}/${district}`,
|
||||||
|
listSubDistrictHistoryId: (id: string | string[]) =>
|
||||||
|
`${subDistrict}history/${id}`,
|
||||||
|
listSubDistrictPublishedId: (id: string) =>
|
||||||
|
`${subDistrict}history/published/${id}`,
|
||||||
|
listSubDistrictPublishedHistory: (id: string | string[]) =>
|
||||||
|
`${subDistrict}history/published-history/${id}`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api คำนำหน้าชื่อ
|
||||||
|
*/
|
||||||
|
prefix,
|
||||||
|
listPrefixHistory: `${prefix}history`,
|
||||||
|
listPrefixHistoryId: (id: string) => `${prefix}history/${id}`,
|
||||||
|
listPrefixPublished: `${prefix}history/published`,
|
||||||
|
listPrefixPublishedHistory: `${prefix}history/published-history`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api เพศ
|
||||||
|
*/
|
||||||
|
gender,
|
||||||
|
listGenderHistory: `${gender}history`,
|
||||||
|
listGenderHistoryId: (id: string) => `${gender}history/${id}`,
|
||||||
|
listGenderPublished: `${gender}history/published`,
|
||||||
|
listGenderPublishedHistory: `${gender}history/published-history`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api สถานภาพ
|
||||||
|
*/
|
||||||
|
relationship,
|
||||||
|
listRelationshipHistory: `${relationship}history`,
|
||||||
|
listRelationshipHistoryId: (id: string) => `${relationship}history/${id}`,
|
||||||
|
listRelationshipPublished: `${relationship}history/published`,
|
||||||
|
listRelationshipPublishedHistory: `${relationship}history/published-history`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api กลุ่มเลือด
|
||||||
|
*/
|
||||||
|
bloodGroup,
|
||||||
|
listBloodGroupHistory: `${bloodGroup}history`,
|
||||||
|
listBloodGroupHistoryId: (id: string) => `${bloodGroup}history/${id}`,
|
||||||
|
listBloodGroupPublished: `${bloodGroup}history/published`,
|
||||||
|
listBloodGroupPublishedHistory: `${bloodGroup}history/published-history`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api ศาสนา
|
||||||
|
*/
|
||||||
|
religion,
|
||||||
|
listReligionHistory: `${religion}history`,
|
||||||
|
listReligionHistoryId: (id: string) => `${religion}history/${id}`,
|
||||||
|
listReligionPublished: `${religion}history/published`,
|
||||||
|
listReligionPublishedHistory: `${religion}history/published-history`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api ระดับการศึกษา
|
||||||
|
*/
|
||||||
|
educationLevel,
|
||||||
|
listEducationLevelHistory: `${educationLevel}history`,
|
||||||
|
listEducationLevelHistoryId: (id: string) => `${educationLevel}history/${id}`,
|
||||||
|
listEducationLevelPublished: `${educationLevel}history/published`,
|
||||||
|
listEducationLevelPublishedHistory: `${educationLevel}history/published-history`,
|
||||||
|
|
||||||
|
// API ใหม่
|
||||||
|
orgRelationship,
|
||||||
|
orgRelationshipId: (id: string) => `${orgRelationship}${id}`,
|
||||||
|
orgPrefix,
|
||||||
|
orgPrefixId: (id: string) => `${orgPrefix}${id}`,
|
||||||
|
orgRank,
|
||||||
|
orgRankId: (id: string) => `${orgRank}${id}`,
|
||||||
|
orgBloodGroup,
|
||||||
|
orgBloodGroupId: (id: string) => `${orgBloodGroup}${id}`,
|
||||||
|
orgGender,
|
||||||
|
orgGenderId: (id: string) => `${orgGender}${id}`,
|
||||||
|
orgReligion,
|
||||||
|
orgReligionId: (id: string) => `${orgReligion}${id}`,
|
||||||
|
orgEducationLevel,
|
||||||
|
orgEducationLevelId: (id: string) => `${orgEducationLevel}${id}`,
|
||||||
|
|
||||||
|
orgProvince,
|
||||||
|
orgDistrict,
|
||||||
|
orgSubDistrict,
|
||||||
|
};
|
||||||
105
src/api/manage/api.position.ts
Normal file
105
src/api/manage/api.position.ts
Normal file
|
|
@ -0,0 +1,105 @@
|
||||||
|
/**
|
||||||
|
* api ระบบจัดการข้อมูลหลัก
|
||||||
|
* เมนูย่อย: ข้อมูลตำแหน่งของข้าราชการกรุงเทพมหานคร
|
||||||
|
*/
|
||||||
|
import env from "../index";
|
||||||
|
const position = `${env.API_URI}/metadata/main/`;
|
||||||
|
const positionExecutiveSide = `${env.API_URI}/metadata/position-executive-side/`;
|
||||||
|
const positionLevel = `${env.API_URI}/metadata/position-level/`;
|
||||||
|
const positionPath = `${env.API_URI}/metadata/position-path/`;
|
||||||
|
const positionSide = `${env.API_URI}/metadata/position-path-side/`;
|
||||||
|
const positionType = `${env.API_URI}/metadata/position-type/`;
|
||||||
|
const positionStatus = `${env.API_URI}/metadata/position-status/`;
|
||||||
|
const positionLine = `${env.API_URI}/metadata/position-line/`;
|
||||||
|
const positionExecutive = `${env.API_URI}/metadata/position-executive/`;
|
||||||
|
|
||||||
|
const orgPosType = `${env.API_URI}/org/pos/type/`;
|
||||||
|
const orgPosLevel = `${env.API_URI}/org/pos/level/`;
|
||||||
|
export default {
|
||||||
|
position: `${position}position`,
|
||||||
|
/**
|
||||||
|
* api ด้านทางการบริหาร
|
||||||
|
*/
|
||||||
|
positionExecutiveSide,
|
||||||
|
listPositionExecutiveSideHistory: `${positionExecutiveSide}history`,
|
||||||
|
listPositionExecutiveSideHistoryId: (id: string) =>
|
||||||
|
`${positionExecutiveSide}history/${id}`,
|
||||||
|
listPositionExecutiveSidePublished: `${positionExecutiveSide}history/published`,
|
||||||
|
listPositionExecutiveSidePublishedHistory: `${positionExecutiveSide}history/published-history`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api ตำแหน่งในสายงาน
|
||||||
|
*/
|
||||||
|
// listPositionHistory: `${position}history`,
|
||||||
|
// listPositionHistoryId: (id: string) => `${position}history/${id}`,
|
||||||
|
// listPositionPublished: `${position}history/published`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api ระดับตำแหน่ง
|
||||||
|
*/
|
||||||
|
positionLevel,
|
||||||
|
listPositionLevelHistory: `${positionLevel}history`,
|
||||||
|
listPositionLevelHistoryId: (id: string) => `${positionLevel}history/${id}`,
|
||||||
|
listPositionLevelPublished: `${positionLevel}history/published`,
|
||||||
|
listPositionLevelPublishedHistory: `${positionLevel}history/published-history`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api ตำแหน่งในสายงาน
|
||||||
|
*/
|
||||||
|
positionPath,
|
||||||
|
listPositionPathHistory: `${positionPath}history`,
|
||||||
|
listPositionPathHistoryId: (id: string) => `${positionPath}history/${id}`,
|
||||||
|
listPositionPathPublished: `${positionPath}history/published`,
|
||||||
|
listPositionPathPublishedHistory: `${positionPath}history/published-history`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api ด้าน/สาขา
|
||||||
|
*/
|
||||||
|
positionSide,
|
||||||
|
listPositionSideHistory: `${positionSide}history`,
|
||||||
|
listPositionSideHistoryId: (id: string) => `${positionSide}history/${id}`,
|
||||||
|
listPositionSidePublished: `${positionSide}history/published`,
|
||||||
|
listPositionSidePublishedHistory: `${positionSide}history/published-history`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api ประเภทตำแหน่ง
|
||||||
|
*/
|
||||||
|
positionType,
|
||||||
|
listPositionTypeHistory: `${positionType}history`,
|
||||||
|
listPositionTypeHistoryId: (id: string) => `${positionType}history/${id}`,
|
||||||
|
listPositionTypePublished: `${positionType}history/published`,
|
||||||
|
listPositionTypePublishedHistory: `${positionType}history/published-history`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api สถานะของตำแหน่ง
|
||||||
|
*/
|
||||||
|
positionStatus,
|
||||||
|
listPositionStatusHistory: `${positionStatus}history`,
|
||||||
|
listPositionStatusHistoryId: (id: string) => `${positionStatus}history/${id}`,
|
||||||
|
listPositionStatusPublished: `${positionStatus}history/published`,
|
||||||
|
listPositionStatusPublishedHistory: `${positionStatus}history/published-history`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api สายงานของตำแหน่ง
|
||||||
|
*/
|
||||||
|
positionLine,
|
||||||
|
listPositionLineHistory: `${positionLine}history`,
|
||||||
|
listPositionLineHistoryId: (id: string) => `${positionLine}history/${id}`,
|
||||||
|
listPositionLinePublished: `${positionLine}history/published`,
|
||||||
|
listPositionLinePublishedHistory: `${positionLine}history/published-history`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api ตำแหน่งทางการบริหาร
|
||||||
|
*/
|
||||||
|
positionExecutive,
|
||||||
|
listPositionExecutiveHistory: `${positionExecutive}history`,
|
||||||
|
listPositionExecutiveHistoryId: (id: string) =>
|
||||||
|
`${positionExecutive}history/${id}`,
|
||||||
|
listPositionExecutivePublished: `${positionExecutive}history/published`,
|
||||||
|
listPositionExecutivePublishedHistory: `${positionExecutive}history/published-history`,
|
||||||
|
|
||||||
|
orgPosType,
|
||||||
|
orgPosTypeId: (id: string) => `${orgPosType}${id}`,
|
||||||
|
orgPosLevel,
|
||||||
|
orgPosLevelId: (id: string) => `${orgPosLevel}${id}`,
|
||||||
|
};
|
||||||
75
src/api/manage/api.positionEmployee.ts
Normal file
75
src/api/manage/api.positionEmployee.ts
Normal file
|
|
@ -0,0 +1,75 @@
|
||||||
|
/**
|
||||||
|
* api ระบบจัดการข้อมูลหลัก
|
||||||
|
* เมนูย่อย: ข้อมูลตำแหน่งของลูกจ้างกรุงเทพมหานคร
|
||||||
|
*/
|
||||||
|
import env from "../index";
|
||||||
|
const positionEmployee = `${env.API_URI}/metadata/main/`;
|
||||||
|
const positionEmployeePosition = `${env.API_URI}/metadata/position-employee-position/`;
|
||||||
|
const positionEmployeePositionSide = `${env.API_URI}/metadata/position-employee-position-side/`;
|
||||||
|
const positionEmployeeGroup = `${env.API_URI}/metadata/position-employee-group/`;
|
||||||
|
const positionEmployeeLine = `${env.API_URI}/metadata/position-employee-line/`;
|
||||||
|
const positionEmployeeLevel = `${env.API_URI}/metadata/position-employee-level/`;
|
||||||
|
const positionEmployeeStatus = `${env.API_URI}/metadata/position-employee-status/`;
|
||||||
|
|
||||||
|
export default {
|
||||||
|
positionEmployeeStatus: `${positionEmployeeStatus}`,
|
||||||
|
positionEmployee: `${positionEmployee}positionEmployee`,
|
||||||
|
/**
|
||||||
|
* api ตำแหน่ง
|
||||||
|
*/
|
||||||
|
positionEmployeePosition,
|
||||||
|
listPositionEmployeePositionHistory: `${positionEmployeePosition}history`,
|
||||||
|
listPositionEmployeePositionHistoryId: (id: string) =>
|
||||||
|
`${positionEmployeePosition}history/${id}`,
|
||||||
|
listPositionEmployeePositionPublished: `${positionEmployeePosition}history/published`,
|
||||||
|
listPositionEmployeePositionPublishedHistory: `${positionEmployeePosition}history/published-history`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api ด้านของตำแหน่ง
|
||||||
|
*/
|
||||||
|
positionEmployeePositionSide,
|
||||||
|
listPositionEmployeePositionSideHistory: `${positionEmployeePositionSide}history`,
|
||||||
|
listPositionEmployeePositionSideHistoryId: (id: string) =>
|
||||||
|
`${positionEmployeePositionSide}history/${id}`,
|
||||||
|
listPositionEmployeePositionSidePublished: `${positionEmployeePositionSide}history/published`,
|
||||||
|
listPositionEmployeePositionSidePublishedHistory: `${positionEmployeePositionSide}history/published-history`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api กลุ่มงาน
|
||||||
|
*/
|
||||||
|
positionEmployeeGroup,
|
||||||
|
listPositionEmployeeGroupHistory: `${positionEmployeeGroup}history`,
|
||||||
|
listPositionEmployeeGroupHistoryId: (id: string) =>
|
||||||
|
`${positionEmployeeGroup}history/${id}`,
|
||||||
|
listPositionEmployeeGroupPublished: `${positionEmployeeGroup}history/published`,
|
||||||
|
listPositionEmployeeGroupPublishedHistory: `${positionEmployeeGroup}history/published-history`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api สายงาน
|
||||||
|
*/
|
||||||
|
positionEmployeeLine,
|
||||||
|
listPositionEmployeeLineHistory: `${positionEmployeeLine}history`,
|
||||||
|
listPositionEmployeeLineHistoryId: (id: string) =>
|
||||||
|
`${positionEmployeeLine}history/${id}`,
|
||||||
|
listPositionEmployeeLinePublished: `${positionEmployeeLine}history/published`,
|
||||||
|
listPositionEmployeeLinePublishedHistory: `${positionEmployeeLine}history/published-history`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api ระดับชั้นงาน
|
||||||
|
*/
|
||||||
|
positionEmployeeLevel,
|
||||||
|
listPositionEmployeeLevelHistory: `${positionEmployeeLevel}history`,
|
||||||
|
listPositionEmployeeLevelHistoryId: (id: string) =>
|
||||||
|
`${positionEmployeeLevel}history/${id}`,
|
||||||
|
listPositionEmployeeLevelPublished: `${positionEmployeeLevel}history/published`,
|
||||||
|
listPositionEmployeeLevelPublishedHistory: `${positionEmployeeLevel}history/published-history`,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* api สถานะของตำแหน่ง
|
||||||
|
*/
|
||||||
|
listPositionEmployeeStatusHistory: `${positionEmployeeStatus}history`,
|
||||||
|
listPositionEmployeeStatusHistoryId: (id: string) =>
|
||||||
|
`${positionEmployeeStatus}history/${id}`,
|
||||||
|
listPositionEmployeeStatusPublished: `${positionEmployeeStatus}history/published`,
|
||||||
|
listPositionEmployeeStatusPublishedHistory: `${positionEmployeeStatus}history/published-history`,
|
||||||
|
};
|
||||||
219
src/api/registry/api.profile.ts
Normal file
219
src/api/registry/api.profile.ts
Normal file
|
|
@ -0,0 +1,219 @@
|
||||||
|
/**
|
||||||
|
* api สรรหา - สอบแข่งขัน
|
||||||
|
*/
|
||||||
|
import env from "../index";
|
||||||
|
const profile = `${env.API_URI_PROFILE_SERVICE}/profile/`;
|
||||||
|
const report = `${env.API_REPORT_URI}/report/profile/`;
|
||||||
|
|
||||||
|
const organizationRoot = `${env.API_URI}/profile/organization/list/root`;
|
||||||
|
const registryNew = `${env.API_URI}/org/profile/`;
|
||||||
|
export default {
|
||||||
|
/**
|
||||||
|
* api สังกัด ทะเบียนประวัติเงินเดือน
|
||||||
|
*/
|
||||||
|
organizationRoot,
|
||||||
|
profileUser: `${profile}user`,
|
||||||
|
profileValidateId: (profileId: string) => `${profile}validate/${profileId}`,
|
||||||
|
profilePaperDownloadId: (id: string) => `${profile}paper/download/${id}`,
|
||||||
|
profilePaperId: (id: string) => `${profile}paper/${id}`,
|
||||||
|
|
||||||
|
profileMultiId: (id: string) => `${profile}multi-paper/${id}`,
|
||||||
|
profileMultiOId: (id: string) => `${profile}multi-paper-other/${id}`,
|
||||||
|
profileMultiKId: (id: string) => `${profile}multi-paper-kk1/${id}`,
|
||||||
|
|
||||||
|
profileHistoryselfId: (profileId: string) =>
|
||||||
|
`${profile}/historyself${profileId}`,
|
||||||
|
|
||||||
|
profileOrganiNameId: (id: string) => `${profile}organization/name/${id}`,
|
||||||
|
profileOrganiId: (id: string) => `${profile}organization/${id}`,
|
||||||
|
profileOrganiSelectId: (id: string) => `${profile}organization/select/${id}`,
|
||||||
|
profileOrganiRootId: (id: string) => `${profile}organization/root/${id}`,
|
||||||
|
|
||||||
|
profileLeaveOrganiId: (id: string) => `${profile}leave/organization/${id}`,
|
||||||
|
|
||||||
|
profileSearchNewOcId: (id: string) => `${profile}search/new/oc/${id}`,
|
||||||
|
profileSearchNewOcIdType: (id: string, type: string) =>
|
||||||
|
`${profile}search/new/oc/${id}/${type}`,
|
||||||
|
profileSearchId: (id: string) => `${profile}search/${id}`,
|
||||||
|
profileSearchOcId: (id: string) => `${profile}search/oc/${id}`,
|
||||||
|
profileSearchNewOcLeaveId: (id: string) =>
|
||||||
|
`${profile}search/new/oc/leave/${id}`,
|
||||||
|
profileSearchNewOcLeaveIdType: (id: string, type: string) =>
|
||||||
|
`${profile}search/new/oc/leave/${id}/${type}`,
|
||||||
|
profileSearchOcLeaveId: (id: string) => `${profile}search/oc/leave/${id}`,
|
||||||
|
profileSearchNewEmOcId: (id: string) =>
|
||||||
|
`${profile}search/new-employee/oc/${id}`,
|
||||||
|
profileSearchNewEmOcLeaveId: (id: string) =>
|
||||||
|
`${profile}search/new-employee/oc/leave/${id}`,
|
||||||
|
profileSearchPersonal: () => `${profile}search-personal`,
|
||||||
|
profileEmployeeTempId: (id: string) => `${profile}employee/temp/${id}`,
|
||||||
|
|
||||||
|
profileCoupleId: (profileId: string) => `${profile}couple/${profileId}`,
|
||||||
|
|
||||||
|
profileFatherId: (profileId: string) => `${profile}father/${profileId}`,
|
||||||
|
|
||||||
|
profileMotherId: (profileId: string) => `${profile}mother/${profileId}`,
|
||||||
|
|
||||||
|
profileAdsId: (profileId: string) => `${profile}address/current/${profileId}`,
|
||||||
|
profileAdsCurAdrsId: (profileId: string) =>
|
||||||
|
`${profile}address/currentAdrs/${profileId}`,
|
||||||
|
profileAdsRegisId: (profileId: string) =>
|
||||||
|
`${profile}address/registration/${profileId}`,
|
||||||
|
|
||||||
|
profileInsignId: (profileId: string) => `${profile}insignia/${profileId}`,
|
||||||
|
profileInsignHisId: (profileId: string) =>
|
||||||
|
`${profile}insignia/history/${profileId}`,
|
||||||
|
profileInsignInsignId: (profileId: string) =>
|
||||||
|
`${profile}insignia/insigniadiocesan/${profileId}`,
|
||||||
|
profileInsignToolList: `${profile}insignia/tool/list`,
|
||||||
|
|
||||||
|
profileChildId: (profileId: string) => `${profile}children/${profileId}`,
|
||||||
|
|
||||||
|
profileAssessmentId: (profileId: string) =>
|
||||||
|
`${profile}assessment/${profileId}`,
|
||||||
|
profileAssessmentHisId: (profileId: string) =>
|
||||||
|
`${profile}assessment/history/${profileId}`,
|
||||||
|
|
||||||
|
profileHonorId: (profileId: string) => `${profile}honor/${profileId}`,
|
||||||
|
profileHonorHisId: (profileId: string) =>
|
||||||
|
`${profile}honor/history/${profileId}`,
|
||||||
|
|
||||||
|
profileCertId: (profileId: string) => `${profile}certificate/${profileId}`,
|
||||||
|
profileCertHisId: (profileId: string) =>
|
||||||
|
`${profile}certificate/history/${profileId}`,
|
||||||
|
|
||||||
|
profileAbiliId: (profileId: string) => `${profile}ability/${profileId}`,
|
||||||
|
profileAbiliHisId: (profileId: string) =>
|
||||||
|
`${profile}ability/history/${profileId}`,
|
||||||
|
|
||||||
|
profileDutyId: (profileId: string) => `${profile}duty/${profileId}`,
|
||||||
|
profileDutyHisId: (profileId: string) =>
|
||||||
|
`${profile}duty/history/${profileId}`,
|
||||||
|
|
||||||
|
profileOtherId: (profileId: string) => `${profile}other/${profileId}`,
|
||||||
|
profileOtherHisId: (profileId: string) =>
|
||||||
|
`${profile}other/history/${profileId}`,
|
||||||
|
|
||||||
|
profileNopaidId: (profileId: string) => `${profile}nopaid/${profileId}`,
|
||||||
|
profileNopaidHisId: (profileId: string) =>
|
||||||
|
`${profile}nopaid/history/${profileId}`,
|
||||||
|
|
||||||
|
profileAvaId: (profileId: string) => `${profile}avatar/${profileId}`,
|
||||||
|
profileAvaCurId: (profileId: string) =>
|
||||||
|
`${profile}avatar/current/${profileId}`,
|
||||||
|
|
||||||
|
profileEduId: (profileId: string) => `${profile}education/${profileId}`,
|
||||||
|
profileEduHisId: (profileId: string) =>
|
||||||
|
`${profile}education/history/${profileId}`,
|
||||||
|
|
||||||
|
profileSwapEducation: `${profile}swap_education`,
|
||||||
|
|
||||||
|
profileTrainId: (profileId: string) => `${profile}training/${profileId}`,
|
||||||
|
profileTrainHisId: (profileId: string) =>
|
||||||
|
`${profile}training/history/${profileId}`,
|
||||||
|
|
||||||
|
profileDisId: (profileId: string) => `${profile}discipline/${profileId}`,
|
||||||
|
profileDisHisId: (profileId: string) =>
|
||||||
|
`${profile}discipline/history/${profileId}`,
|
||||||
|
|
||||||
|
profileSwapDiscipline: `${profile}swap_discipline`,
|
||||||
|
|
||||||
|
profileLeaveId: (leaveId: string) => `${profile}leave/${leaveId}`,
|
||||||
|
profileLeaveHisId: (profileId: string) =>
|
||||||
|
`${profile}leave/history/${profileId}`,
|
||||||
|
profileLeaveTotalId: (profileId: string) =>
|
||||||
|
`${profile}leave/total/${profileId}`,
|
||||||
|
|
||||||
|
profileSalaryId: (profileId: string) => `${profile}salary/${profileId}`,
|
||||||
|
profileSalaryHisId: (profileId: string) =>
|
||||||
|
`${profile}salary/history/${profileId}`,
|
||||||
|
profileSalarySwapId: (id: string, direction: string) =>
|
||||||
|
`${profile}salary/swap/${id}/${direction}`,
|
||||||
|
profileSalaryCopyId: (profileId: string) =>
|
||||||
|
`${profile}salary-copy/${profileId}`,
|
||||||
|
|
||||||
|
// ************************************
|
||||||
|
profileSalaryEmployeeId: (profileId: string) =>
|
||||||
|
`${profile}salary/employee/${profileId}`,
|
||||||
|
profileSalaryEmployeeHisId: (profileId: string) =>
|
||||||
|
`${profile}salary/employee/history/${profileId}`,
|
||||||
|
// ************************************
|
||||||
|
|
||||||
|
profileInforId: (profileId: string) => `${profile}information/${profileId}`,
|
||||||
|
profileInforHisId: (profileId: string) =>
|
||||||
|
`${profile}information/history/${profileId}`,
|
||||||
|
|
||||||
|
profileGovId: (profileId: string) => `${profile}government/${profileId}`,
|
||||||
|
profileGovHisId: (profileId: string) =>
|
||||||
|
`${profile}government/history/${profileId}`,
|
||||||
|
|
||||||
|
profileCalGovId: (profileId: string) => `${profile}cal/gov/${profileId}`,
|
||||||
|
|
||||||
|
profileFamiId: (profileId: string) => `${profile}family/${profileId}`,
|
||||||
|
profileFamiHisId: (profileId: string) =>
|
||||||
|
`${profile}family/history/${profileId}`,
|
||||||
|
|
||||||
|
profileAdrsId: (profileId: string) => `${profile}address/${profileId}`,
|
||||||
|
profileAdrsHisId: (profileId: string) =>
|
||||||
|
`${profile}address/history/${profileId}`,
|
||||||
|
searchProfileByOcId: (OcId: string, type: string) =>
|
||||||
|
`${profile}search/new/oc/${OcId}/${type}`,
|
||||||
|
searchProfileTemp: (type: string) => `${profile}search/new/oc/${type}`,
|
||||||
|
|
||||||
|
profileAvatarId: (profileId: string) => `${profile}avatar/${profileId}`,
|
||||||
|
profileAvatarHistoryId: (profileId: string) =>
|
||||||
|
`${profile}avatar/history/${profileId}`,
|
||||||
|
|
||||||
|
profileCheckId: (profileId: string) => `${profile}check/${profileId}`,
|
||||||
|
|
||||||
|
profileOrganizRoot: `${profile}organization/root`,
|
||||||
|
|
||||||
|
profileCalRetire: `${profile}cal/retire`,
|
||||||
|
profilePositionNumber: `${profile}position-number`,
|
||||||
|
organizationName: (ocId: string) => `${profile}organization/${ocId}`,
|
||||||
|
profileDeactive: (profileId: string) => `${profile}deactive/${profileId}`,
|
||||||
|
profileReactive: (profileId: string) => `${profile}reactive/${profileId}`,
|
||||||
|
|
||||||
|
profileReportId: (profileId: string) => `${report}kk1/${profileId}`,
|
||||||
|
profileKp7ShortId: (profileId: string) => `${report}kp7-short/${profileId}`,
|
||||||
|
|
||||||
|
profileChangeNameId: (profileId: string) =>
|
||||||
|
`${profile}changeName/${profileId}`,
|
||||||
|
profileChangeNameHisId: (profileId: string) =>
|
||||||
|
`${profile}changeName/history/${profileId}`,
|
||||||
|
|
||||||
|
profileCitizenId: (citizenId: string) => `${profile}citizenId/${citizenId}`,
|
||||||
|
profileEmployeeIn: `${profile}information/employee`,
|
||||||
|
|
||||||
|
profileHistory: (type: string) => `${profile}search/history/oc/${type}`,
|
||||||
|
|
||||||
|
//ระบบ ลูกจ้างชั่คราว
|
||||||
|
employmentId: (profileId: string) => `${profile}employment/${profileId}`,
|
||||||
|
employmentHistoryId: (employmentId: string) =>
|
||||||
|
`${profile}employment/history/${employmentId}`,
|
||||||
|
|
||||||
|
searchPersonal: () => `${profile}search-personal`,
|
||||||
|
|
||||||
|
//สร้างข้อมูลราชการ
|
||||||
|
createProfileOfficer: () => `${profile}information/officer`,
|
||||||
|
|
||||||
|
// verify
|
||||||
|
profileVerified: (profileId: string) => `${profile}verified/${profileId}`,
|
||||||
|
profileVerifiedUnlock: (profileId: string) =>
|
||||||
|
`${profile}not-verified/${profileId}`,
|
||||||
|
profileSendVerified: (profileId: string) =>
|
||||||
|
`${profile}send-verified/${profileId}`,
|
||||||
|
listVerified: () => `${profile}list-verified`,
|
||||||
|
registryNew,
|
||||||
|
registryNewId: (id: string) => `${registryNew}${id}`,
|
||||||
|
profileNewCitizenId: (citizenId: string) =>
|
||||||
|
`${registryNew}citizenId/${citizenId}`,
|
||||||
|
|
||||||
|
/**ปรับรายการเงินเดือนขึ้น-ลง*/
|
||||||
|
salarySwap: (dierction: string, id: string) =>
|
||||||
|
`${profile}salary/swap/${dierction}/${id}`,
|
||||||
|
listProfileNew:(id:string,page:number,pageSize:number)=>`${profile}search/new-page/oc/${id}/officer?page=${page}&pageSize=${pageSize}`,
|
||||||
|
|
||||||
|
|
||||||
|
orgProfileAvatar:`${registryNew}avatar`
|
||||||
|
};
|
||||||
180
src/api/registry/api.registry.ts
Normal file
180
src/api/registry/api.registry.ts
Normal file
|
|
@ -0,0 +1,180 @@
|
||||||
|
import env from "../index";
|
||||||
|
|
||||||
|
const registryNew = `${env.API_URI}/org/profile`;
|
||||||
|
const metadata = `${env.API_URI}/org/metadata/`;
|
||||||
|
|
||||||
|
export default {
|
||||||
|
registryNew: (type: string) => `${registryNew}${type}`,
|
||||||
|
registryNewByProfileId: (profileId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/${profileId}`,
|
||||||
|
|
||||||
|
// metadata
|
||||||
|
profileNewMetaMain: `${metadata}main/person`,
|
||||||
|
profileNewProvince: `${metadata}province`,
|
||||||
|
profileNewDistrictByPId: (id: string) => `${metadata}province/${id}`,
|
||||||
|
profileNewSubDistrictByDId: (id: string) => `${metadata}district/${id}`,
|
||||||
|
|
||||||
|
// ประวัติส่วนตัว
|
||||||
|
profileNewProfileById: (dataId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/${dataId}`,
|
||||||
|
profileNewProfileHisById: (dataId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/history/${dataId}`,
|
||||||
|
|
||||||
|
// ข้อมูลที่อยู่
|
||||||
|
profileNewAddressByProfileId: (profileId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/address/${profileId}`,
|
||||||
|
profileNewAddressById: (dataId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/address/${dataId}`,
|
||||||
|
profileNewAddressHisById: (dataId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/address/history/${dataId}`,
|
||||||
|
|
||||||
|
// บันทึกวันที่ไม่ได้รับเงินเดือนฯ
|
||||||
|
profileNewNoPaid: (type: string) => `${registryNew}${type}/nopaid`,
|
||||||
|
profileNewNoPaidByProfileId: (profileId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/nopaid/${profileId}`,
|
||||||
|
profileNewNoPaidById: (dataId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/nopaid/${dataId}`,
|
||||||
|
profileNewNoPaidHisById: (dataId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/nopaid/history/${dataId}`,
|
||||||
|
|
||||||
|
// เครื่องราชฯ
|
||||||
|
profileNewInsign: (type: string) => `${registryNew}${type}/insignia`,
|
||||||
|
profileNewInsignByProfileId: (profileId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/insignia/${profileId}`,
|
||||||
|
profileNewInsignById: (dataId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/insignia/${dataId}`,
|
||||||
|
profileNewInsignHisById: (dataId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/insignia/history/${dataId}`,
|
||||||
|
|
||||||
|
// ประกาศเกียรติคุณ
|
||||||
|
profileNewHonor: (type: string) => `${registryNew}${type}/honor`,
|
||||||
|
profileNewHonorByProfileId: (profileId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/honor/${profileId}`,
|
||||||
|
profileNewHonorById: (dataId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/honor/${dataId}`,
|
||||||
|
profileNewHonorHisById: (dataId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/honor/history/${dataId}`,
|
||||||
|
|
||||||
|
// ผลการประเมินการปฏิบัติราชการ
|
||||||
|
profileNewAssessments: (type: string) => `${registryNew}${type}/assessments`,
|
||||||
|
profileNewAssessmentsByProfileId: (profileId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/assessments/${profileId}`,
|
||||||
|
profileNewAssessmentsById: (dataId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/assessments/${dataId}`,
|
||||||
|
profileNewAssessmentsHisById: (dataId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/assessments/history/${dataId}`,
|
||||||
|
|
||||||
|
// การฝึกอบรม
|
||||||
|
profileNewTraining: (type: string) => `${registryNew}${type}/training`,
|
||||||
|
profileNewTrainingByProfileId: (profileId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/training/${profileId}`,
|
||||||
|
profileNewTrainingByTrainingId: (trainingId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/training/${trainingId}`,
|
||||||
|
profileNewTrainingHisByTrainingId: (trainingId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/training/history/${trainingId}`,
|
||||||
|
|
||||||
|
// ประวัติการศึกษา
|
||||||
|
profileNewEducation: (type: string) => `${registryNew}${type}/educations`,
|
||||||
|
profileNewEducationByProfileId: (profileId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/educations/${profileId}`,
|
||||||
|
profileNewEducationByEducationId: (educationId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/educations/${educationId}`,
|
||||||
|
profileNewEducationHisByEducationId: (educationsId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/educations/history/${educationsId}`,
|
||||||
|
|
||||||
|
// ความสามารถพิเศษ
|
||||||
|
profileNewAbility: (type: string) => `${registryNew}${type}/ability`,
|
||||||
|
profileNewAbilityByProfileId: (profileId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/ability/${profileId}`,
|
||||||
|
profileNewAbilityByAbilityId: (abilityId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/ability/${abilityId}`,
|
||||||
|
profileNewAbilityHisByAbilityId: (abilityId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/ability/history/${abilityId}`,
|
||||||
|
|
||||||
|
// ใบอนุญาตประกอบวิชาชีพ
|
||||||
|
profileNewCertificate: (type: string) => `${registryNew}${type}/certificate`,
|
||||||
|
profileNewCertificateByProfileId: (profileId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/certificate/${profileId}`,
|
||||||
|
profileNewCertificateByCertificateId: (certificateId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/certificate/${certificateId}`,
|
||||||
|
profileNewCertificateHisByCertificateId: (
|
||||||
|
certificateId: string,
|
||||||
|
type: string
|
||||||
|
) => `${registryNew}${type}/certificate/history/${certificateId}`,
|
||||||
|
|
||||||
|
// ข้อมูลอื่นๆ
|
||||||
|
profileNewOther: (type: string) => `${registryNew}${type}/other`,
|
||||||
|
profileNewOtherByProfileId: (profileId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/other/${profileId}`,
|
||||||
|
profileNewOtherById: (dataId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/other/${dataId}`,
|
||||||
|
profileNewOtherHisById: (dataId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/other/history/${dataId}`,
|
||||||
|
|
||||||
|
// ข้อมูลครอบครัว
|
||||||
|
profileNewFamily: (type: string) => `${registryNew}${type}/family`,
|
||||||
|
profileNewFamilyByProfileId: (profileId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/family/${profileId}`,
|
||||||
|
profileNewFamilyByFamilyId: (familyId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/family/${familyId}`,
|
||||||
|
profileNewFamilyHisByFamilyId: (familyId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/family/history/${familyId}`,
|
||||||
|
|
||||||
|
// วินัย
|
||||||
|
profileNewDiscipline: (type: string) => `${registryNew}${type}/discipline`,
|
||||||
|
profileNewDisciplineByProfileId: (profileId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/discipline/${profileId}`,
|
||||||
|
profileNewDisciplineByDisciplineId: (disciplineId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/discipline/${disciplineId}`,
|
||||||
|
profileNewDisciplineHisByDisciplineId: (disciplineId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/discipline/history/${disciplineId}`,
|
||||||
|
|
||||||
|
// ปฏิบัติราชการพิเศษ
|
||||||
|
profileNewDuty: (type: string) => `${registryNew}${type}/duty`,
|
||||||
|
profileNewDutyByProfileId: (profileId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/duty/${profileId}`,
|
||||||
|
profileNewDutyByDutyId: (dutyId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/duty/${dutyId}`,
|
||||||
|
profileNewDutyHisByDutyId: (dutyId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/duty/history/${dutyId}`,
|
||||||
|
|
||||||
|
//ข้อมูลราชการ
|
||||||
|
profileNewGovernment: (type: string) => `${registryNew}${type}/government`,
|
||||||
|
profileNewGovernmentById: (id: string, type: string) =>
|
||||||
|
`${registryNew}${type}/government/${id}`,
|
||||||
|
profileNewGovernmentHistory: (id: string, type: string) =>
|
||||||
|
`${registryNew}${type}/government/history/${id}`,
|
||||||
|
|
||||||
|
//การลา
|
||||||
|
profileNewLeave: (type: string) => `${registryNew}${type}/leave`,
|
||||||
|
profileNewLeaveById: (id: string, type: string) =>
|
||||||
|
`${registryNew}${type}/leave/${id}`,
|
||||||
|
profileNewLeaveHistory: (id: string, type: string) =>
|
||||||
|
`${registryNew}${type}/leave/history/${id}`,
|
||||||
|
profileCheckDate: () => `${env.API_URI}/leave/user/check`,
|
||||||
|
profileNewLeaveType: () => `${env.API_URI}/leave/type`,
|
||||||
|
|
||||||
|
/** ตำแหน่งเงินเดือน*/
|
||||||
|
profileSalaryNew: (type: string) => `${registryNew}${type}/salary`,
|
||||||
|
profileListSalaryNew: (id: string, type: string) =>
|
||||||
|
`${registryNew}${type}/salary/${id}`,
|
||||||
|
profileListSalaryHistoryNew: (profileId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/salary/history/${profileId}`,
|
||||||
|
profileSalarySwapNew: (type: string, id: string, type2: string) =>
|
||||||
|
`${registryNew}${type2}/salary/swap/${type}/${id}`,
|
||||||
|
|
||||||
|
// ประวัติการเปลี่ยนชื่อ-นามสกุล
|
||||||
|
profileNewChangeName: (type: string) => `${registryNew}${type}/changeName`,
|
||||||
|
profileNewChangeNameByProfileId: (profileId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/changeName/${profileId}`,
|
||||||
|
profileNewChangeNameByChangeNameId: (changeNameId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/changeName/${changeNameId}`,
|
||||||
|
profileNewChangeNameHisByChangeNameId: (changeNameId: string, type: string) =>
|
||||||
|
`${registryNew}${type}/changeName/history/${changeNameId}`,
|
||||||
|
|
||||||
|
//ข้อมูลครอบครับ
|
||||||
|
profileFamily: (empType: string, type: string) =>
|
||||||
|
`${registryNew}${empType}/family/${type}`,
|
||||||
|
profileFamilyHistory: (id: string, empType: string, type: string) =>
|
||||||
|
`${registryNew}${empType}/family/${type}/history/${id}`,
|
||||||
|
};
|
||||||
49
src/api/reports/api.report.ts
Normal file
49
src/api/reports/api.report.ts
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
/**
|
||||||
|
* api รายงานทั้งหมด
|
||||||
|
*/
|
||||||
|
import env from "../index";
|
||||||
|
const reportOrder = `${env.API_REPORT2_URI}/report/order`;
|
||||||
|
const reportRetire = `${env.API_REPORT2_URI}/report/retire`;
|
||||||
|
const reportProbation = `${env.API_REPORT2_URI}/report/probation`;
|
||||||
|
const reportResign = `${env.API_REPORT2_URI}/report/resign/33`;
|
||||||
|
const reportTransfer = `${env.API_REPORT2_URI}/report/transfer`;
|
||||||
|
const reportDeceased = `${env.API_REPORT2_URI}/report/deceased`;
|
||||||
|
const reportTemplate = `${env.API_REPORT_TEMPLATE_URI}`;
|
||||||
|
|
||||||
|
export default {
|
||||||
|
reportOrderCover: (fileType: string, id: string, commandCode: string) =>
|
||||||
|
`${reportOrder}/${commandCode}/cover/${fileType}/${id}`,
|
||||||
|
reportOrderAttachment: (fileType: string, id: string, commandCode: string) =>
|
||||||
|
`${reportOrder}/${commandCode}/attachment/${fileType}/${id}`,
|
||||||
|
reportRetireList: (fileType: string, id: string) =>
|
||||||
|
`${reportRetire}/${fileType}/${id}`,
|
||||||
|
reportResignList: (fileType: string, id: string) =>
|
||||||
|
`${reportResign}/${fileType}/${id}`,
|
||||||
|
|
||||||
|
fileCover: (format: string, fileType: string, id: string) =>
|
||||||
|
`${reportOrder}/${format}/cover/${fileType}/${id}`,
|
||||||
|
fileAttachment: (format: string, fileType: string, id: string) =>
|
||||||
|
`${reportOrder}/${format}/attachment/${fileType}/${id}`,
|
||||||
|
|
||||||
|
//ระบบทดลองงาน
|
||||||
|
reportAssign: (type: string, id: string) =>
|
||||||
|
`${reportProbation}/13/${type}/${id}`,
|
||||||
|
reportEvaluateRecord1: (type: string, id: string) =>
|
||||||
|
`${reportProbation}/14/${type}/${id}`,
|
||||||
|
// reportEvaluateRecord2:(type:string, id:string) => `${reportProbation}/15/${type}/${id}`,
|
||||||
|
reportEvaluate: (type: string, id: string) =>
|
||||||
|
`${reportProbation}/16/${type}/${id}`,
|
||||||
|
reportEvaluateChairman: (type: string, id: string) =>
|
||||||
|
`${reportProbation}/17/${type}/${id}`,
|
||||||
|
reportEvaluateResult: (type: string, id: string) =>
|
||||||
|
`${reportProbation}/19/${type}/${id}`,
|
||||||
|
// reportSurvey:(type:string, id:string) => `${reportProbation}/19/${type}/${id}`,
|
||||||
|
|
||||||
|
//filetransfer
|
||||||
|
reportTransferFile: (no: number, type: string, id: string) =>
|
||||||
|
`${reportTransfer}/${no}/${type}/${id}`,
|
||||||
|
|
||||||
|
DeceasedReport: (type: string, id: string) =>
|
||||||
|
`${reportDeceased}/36/${type}/${id}`,
|
||||||
|
reportTemplate,
|
||||||
|
};
|
||||||
70
src/app.config.ts
Normal file
70
src/app.config.ts
Normal file
|
|
@ -0,0 +1,70 @@
|
||||||
|
/**ใช้รวมไฟล์ย่อยๆ ของ api แต่ละไฟล์ */
|
||||||
|
|
||||||
|
/** API Metadata */
|
||||||
|
import manageOrganization from "./api/manage/api.organization";
|
||||||
|
import managePerson from "./api/manage/api.person";
|
||||||
|
import managePosition from "./api/manage/api.position";
|
||||||
|
import managePositionEmployee from "./api/manage/api.positionEmployee";
|
||||||
|
import manageInsignia from "./api/manage/api.insignia";
|
||||||
|
import manageHoliday from "./api/manage/api.holiday";
|
||||||
|
|
||||||
|
/** API Tree List */
|
||||||
|
import organizationTreeList from "./api/02_organizational/api.treelist";
|
||||||
|
|
||||||
|
/** API Structure & Org Chart */
|
||||||
|
import organizationChart from "./api/02_organizational/api.chart";
|
||||||
|
|
||||||
|
/** API Profile List */
|
||||||
|
import profile from "./api/registry/api.profile";
|
||||||
|
import registry from "./api/registry/api.registry";
|
||||||
|
|
||||||
|
/** API dashboard */
|
||||||
|
import message from "./api/00_dashboard/api.message";
|
||||||
|
|
||||||
|
/** API reports */
|
||||||
|
import reports from "./api/reports/api.report";
|
||||||
|
|
||||||
|
/** API โครงสร้างอัตรากำลัง*/
|
||||||
|
import organization from "./api/02_organizational/api.organization";
|
||||||
|
|
||||||
|
import file from "./api/file/api.file";
|
||||||
|
|
||||||
|
// environment variables
|
||||||
|
export const compettitivePanel = import.meta.env.VITE_COMPETITIVE_EXAM_PANEL;
|
||||||
|
export const qualifyDisableExamPanel = import.meta.env
|
||||||
|
.VITE_QUALIFY_DISABLE_EMAM_PANEL;
|
||||||
|
export const qualifyExamPanel = import.meta.env.VITE_QUALIFY_EXAM_PANEL;
|
||||||
|
|
||||||
|
const API = {
|
||||||
|
//Metadata
|
||||||
|
...manageOrganization,
|
||||||
|
...managePerson,
|
||||||
|
...managePosition,
|
||||||
|
...managePositionEmployee,
|
||||||
|
...manageInsignia,
|
||||||
|
...manageHoliday,
|
||||||
|
|
||||||
|
// โครงสร้างอัตรากำลัง
|
||||||
|
...organization,
|
||||||
|
|
||||||
|
//Tree List
|
||||||
|
...organizationTreeList,
|
||||||
|
...organizationChart,
|
||||||
|
|
||||||
|
//profile
|
||||||
|
...profile,
|
||||||
|
...registry,
|
||||||
|
|
||||||
|
//dashboard
|
||||||
|
...message,
|
||||||
|
|
||||||
|
//reports
|
||||||
|
...reports,
|
||||||
|
|
||||||
|
/*file*/
|
||||||
|
...file,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
API: API,
|
||||||
|
};
|
||||||
BIN
src/assets/05_modules.pdf
Normal file
BIN
src/assets/05_modules.pdf
Normal file
Binary file not shown.
BIN
src/assets/avatar_user.jpg
Normal file
BIN
src/assets/avatar_user.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
0
src/assets/base.css
Normal file
0
src/assets/base.css
Normal file
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
1
src/assets/logo.svg
Normal file
1
src/assets/logo.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69" xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||||
|
After Width: | Height: | Size: 308 B |
35
src/assets/main.css
Normal file
35
src/assets/main.css
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
/* @import './base.css'; */
|
||||||
|
|
||||||
|
/* #app {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
.green {
|
||||||
|
text-decoration: none;
|
||||||
|
color: hsla(160, 100%, 37%, 1);
|
||||||
|
transition: 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (hover: hover) {
|
||||||
|
a:hover {
|
||||||
|
background-color: hsla(160, 100%, 37%, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
} */
|
||||||
170
src/components/CardProfile.vue
Normal file
170
src/components/CardProfile.vue
Normal file
|
|
@ -0,0 +1,170 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, watch } from "vue";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
|
||||||
|
/** importType*/
|
||||||
|
import type { FormProfile } from "@/interface/main";
|
||||||
|
import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
|
||||||
|
|
||||||
|
/** importComponents*/
|
||||||
|
import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
|
||||||
|
|
||||||
|
/** impoerStore*/
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
||||||
|
/** use*/
|
||||||
|
const $q = useQuasar();
|
||||||
|
const { messageError, findOrgNameOld, findOrgName } = useCounterMixin();
|
||||||
|
|
||||||
|
/** propsDataProfile*/
|
||||||
|
const props = defineProps({
|
||||||
|
data: { type: Object, required: true },
|
||||||
|
type: { type: String, default: "" },
|
||||||
|
});
|
||||||
|
|
||||||
|
const profile = reactive<FormProfile>({
|
||||||
|
id: "",
|
||||||
|
avatar: "",
|
||||||
|
fullName: "",
|
||||||
|
position: "",
|
||||||
|
positionLevel: "",
|
||||||
|
organization: "",
|
||||||
|
});
|
||||||
|
const modalPersonal = ref<boolean>(false);
|
||||||
|
|
||||||
|
const profileId = ref<string | null>("");
|
||||||
|
|
||||||
|
function fetchDataProfile(data: DataProfile) {
|
||||||
|
if (data.profileId) {
|
||||||
|
fetchProfile(data.profileId);
|
||||||
|
}
|
||||||
|
profile.id = data.profileId;
|
||||||
|
profile.fullName = `${data.prefix ?? ""}${data.firstName ?? ""} ${
|
||||||
|
data.lastName ?? ""
|
||||||
|
} `;
|
||||||
|
|
||||||
|
if (data["posTypeNameOld"] !== undefined) {
|
||||||
|
profile.position =
|
||||||
|
data.positionOld == "" || data.positionOld == null
|
||||||
|
? "-"
|
||||||
|
: data.positionOld;
|
||||||
|
if (data.posTypeNameOld && data.posLevelNameOld) {
|
||||||
|
profile.positionLevel = `${data.posTypeNameOld} (${data.posLevelNameOld})`;
|
||||||
|
} else if (data.posTypeNameOld) {
|
||||||
|
profile.positionLevel = `${data.posTypeNameOld}`;
|
||||||
|
} else if (data.posLevelNameOld) {
|
||||||
|
profile.positionLevel = `(${data.posLevelNameOld})`;
|
||||||
|
} else profile.positionLevel = "-";
|
||||||
|
profile.organization = findOrgNameOld(data);
|
||||||
|
} else {
|
||||||
|
profile.position =
|
||||||
|
data.position == "" || data.position == null ? "-" : data.position;
|
||||||
|
if (data.posTypeName && data.posLevelName) {
|
||||||
|
profile.positionLevel = `${data.posTypeName} (${data.posLevelName})`;
|
||||||
|
} else if (data.posTypeName) {
|
||||||
|
profile.positionLevel = `${data.posTypeName}`;
|
||||||
|
} else if (data.posLevelName) {
|
||||||
|
profile.positionLevel = `(${data.posLevelName})`;
|
||||||
|
} else profile.positionLevel = "-";
|
||||||
|
profile.organization = findOrgName(data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function fetchProfile(id: string) {
|
||||||
|
if (profile.avatar === "") {
|
||||||
|
http
|
||||||
|
.get(
|
||||||
|
config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, `profile-${id}`)
|
||||||
|
)
|
||||||
|
.then(async (res) => {
|
||||||
|
profile.avatar = res.data.downloadUrl;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updatemodalPersonal(modal: boolean) {
|
||||||
|
modalPersonal.value = modal;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onclickViewinfo() {
|
||||||
|
modalPersonal.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.data,
|
||||||
|
() => {
|
||||||
|
const dataMain = props.data as DataProfile;
|
||||||
|
profileId.value = dataMain.profileId;
|
||||||
|
fetchDataProfile(dataMain);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<q-card bordered class="row col-12 text-dark">
|
||||||
|
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||||
|
<div class="q-pl-sm text-weight-bold text-subtitle2">
|
||||||
|
{{ profile.fullName }}
|
||||||
|
</div>
|
||||||
|
<q-space />
|
||||||
|
<q-btn
|
||||||
|
v-if="profileId"
|
||||||
|
outline
|
||||||
|
color="blue"
|
||||||
|
dense
|
||||||
|
icon-right="mdi-open-in-new"
|
||||||
|
class="q-px-sm"
|
||||||
|
label="ดูข้อมูลทะเบียนประวัติ"
|
||||||
|
@click="onclickViewinfo()"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-12"><q-separator /></div>
|
||||||
|
<div class="row col-12 q-pa-md">
|
||||||
|
<div class="col-12 row bg-white q-col-gutter-md">
|
||||||
|
<div class="col-xs-3 col-sm-2 col-md-1 row">
|
||||||
|
<q-img :src="profile.avatar" v-if="profile.avatar !== ''" />
|
||||||
|
<q-img src="@/assets/avatar_user.jpg" v-else />
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 row items-center">
|
||||||
|
<div class="col-12 q-pl-md">
|
||||||
|
<div class="col-12 text-top">
|
||||||
|
{{ props.type == "employee" ? "ตำแหน่ง" : "ตำแหน่งในสายงาน" }}
|
||||||
|
</div>
|
||||||
|
<div class="col-12 text-detail">
|
||||||
|
{{ profile.position }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 row items-center">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="col-12 text-top">
|
||||||
|
{{ props.type == "employee" ? "กลุ่มงาน" : "ประเภทตำแหน่ง" }}
|
||||||
|
</div>
|
||||||
|
<div class="col-12 text-detail">
|
||||||
|
{{ profile.positionLevel }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 row items-center">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="col-12 text-top">สังกัด</div>
|
||||||
|
<div class="col-12 text-detail">
|
||||||
|
{{ profile.organization }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
|
||||||
|
<PopupPersonal
|
||||||
|
:modal="modalPersonal"
|
||||||
|
:id="profile.id"
|
||||||
|
@update:modal="updatemodalPersonal"
|
||||||
|
:type="props.type"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
60
src/components/CurruncyInput.vue
Normal file
60
src/components/CurruncyInput.vue
Normal file
|
|
@ -0,0 +1,60 @@
|
||||||
|
<template>
|
||||||
|
<q-input
|
||||||
|
ref="inputRef"
|
||||||
|
v-model="formattedValue"
|
||||||
|
:dense="dense"
|
||||||
|
:outlined="edit"
|
||||||
|
:class="
|
||||||
|
edit == true
|
||||||
|
? 'full-width inputgreen cursor-pointer'
|
||||||
|
: 'full-width cursor-pointer'
|
||||||
|
"
|
||||||
|
:readonly="!edit"
|
||||||
|
:borderless="!edit"
|
||||||
|
hide-bottom-space
|
||||||
|
>
|
||||||
|
<template v-for="slot in slots">
|
||||||
|
<slot :name="slot" />
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useCurrencyInput } from "vue-currency-input";
|
||||||
|
import { ref, useSlots, watch } from "vue";
|
||||||
|
|
||||||
|
const slots = ref<any>(useSlots());
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
modelValue: {
|
||||||
|
type: Number,
|
||||||
|
default: undefined,
|
||||||
|
},
|
||||||
|
dense: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
edit: {
|
||||||
|
type: Boolean,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const { inputRef, formattedValue, setValue } = useCurrencyInput({
|
||||||
|
locale: "th-TH",
|
||||||
|
currency: "THB",
|
||||||
|
currencyDisplay: "hidden" as any,
|
||||||
|
hideCurrencySymbolOnFocus: true,
|
||||||
|
hideGroupingSeparatorOnFocus: true,
|
||||||
|
hideNegligibleDecimalDigitsOnFocus: true,
|
||||||
|
autoDecimalDigits: false,
|
||||||
|
useGrouping: true,
|
||||||
|
accountingSign: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.modelValue,
|
||||||
|
(value: any) => {
|
||||||
|
setValue(value);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
</script>
|
||||||
90
src/components/CustomDialog.vue
Normal file
90
src/components/CustomDialog.vue
Normal file
|
|
@ -0,0 +1,90 @@
|
||||||
|
<template>
|
||||||
|
<q-dialog ref="dialogRef" @hide="onDialogHide" persistent>
|
||||||
|
<q-card class="q-pa-sm">
|
||||||
|
<q-card-section class="row">
|
||||||
|
<div class="q-pr-md">
|
||||||
|
<q-avatar
|
||||||
|
:icon="icon"
|
||||||
|
size="lg"
|
||||||
|
font-size="25px"
|
||||||
|
color="blue-1"
|
||||||
|
:text-color="color"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col text-dark">
|
||||||
|
<span class="text-bold">{{ title }}</span>
|
||||||
|
<br />
|
||||||
|
<span>{{ message }}</span>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
|
||||||
|
<q-card-actions
|
||||||
|
align="right"
|
||||||
|
class="bg-white text-teal"
|
||||||
|
v-if="onlycancel"
|
||||||
|
>
|
||||||
|
<q-btn label="ตกลง" flat color="grey-8" @click="onDialogCancel" />
|
||||||
|
<!-- <q-btn :label="textOk" :color="color" @click="onOKClick" /> -->
|
||||||
|
</q-card-actions>
|
||||||
|
<q-card-actions align="right" class="bg-white text-teal" v-else>
|
||||||
|
<q-btn label="ยกเลิก" flat color="grey-8" @click="onDialogCancel" />
|
||||||
|
<q-btn :label="textOk" :color="color" @click="onOKClick" />
|
||||||
|
</q-card-actions>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useDialogPluginComponent } from "quasar";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: "primary",
|
||||||
|
},
|
||||||
|
textOk: {
|
||||||
|
type: String,
|
||||||
|
default: "ตกลง",
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: "หัวข้อ?",
|
||||||
|
},
|
||||||
|
message: {
|
||||||
|
type: String,
|
||||||
|
default: "ข้อความ",
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
default: "question_mark",
|
||||||
|
},
|
||||||
|
onlycancel: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
defineEmits([
|
||||||
|
// REQUIRED; need to specify some events that your
|
||||||
|
// component will emit through useDialogPluginComponent()
|
||||||
|
...useDialogPluginComponent.emits,
|
||||||
|
]);
|
||||||
|
|
||||||
|
const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
|
||||||
|
useDialogPluginComponent();
|
||||||
|
// dialogRef - Vue ref to be applied to QDialog
|
||||||
|
// onDialogHide - Function to be used as handler for @hide on QDialog
|
||||||
|
// onDialogOK - Function to call to settle dialog with "ok" outcome
|
||||||
|
// example: onDialogOK() - no payload
|
||||||
|
// example: onDialogOK({ /*...*/ }) - with payload
|
||||||
|
// onDialogCancel - Function to call to settle dialog with "cancel" outcome
|
||||||
|
|
||||||
|
// this is part of our example (so not required)
|
||||||
|
function onOKClick() {
|
||||||
|
// on OK, it is REQUIRED to
|
||||||
|
// call onDialogOK (with optional payload)
|
||||||
|
onDialogOK();
|
||||||
|
// or with payload: onDialogOK({ ... })
|
||||||
|
// ...and it will also hide the dialog automatically
|
||||||
|
}
|
||||||
|
</script>
|
||||||
670
src/components/DialogAddEmployee.vue
Normal file
670
src/components/DialogAddEmployee.vue
Normal file
|
|
@ -0,0 +1,670 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, watch, computed } from "vue";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import config from "@/app.config";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import moment from "moment";
|
||||||
|
import type { QForm } from "quasar";
|
||||||
|
|
||||||
|
import Header from "@/components/DialogHeader.vue";
|
||||||
|
import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
const profileStore = useProfileDataStore();
|
||||||
|
const { changeRetireText, changeBirth } = profileStore;
|
||||||
|
const {
|
||||||
|
date2Thai,
|
||||||
|
dialogMessage,
|
||||||
|
showLoader,
|
||||||
|
hideLoader,
|
||||||
|
messageError,
|
||||||
|
dateToISO,
|
||||||
|
dialogConfirm,
|
||||||
|
success,
|
||||||
|
convertDate,
|
||||||
|
} = useCounterMixin();
|
||||||
|
const $q = useQuasar();
|
||||||
|
|
||||||
|
const dateBefore = ref<Date>(new Date());
|
||||||
|
|
||||||
|
const informaData = ref<any>({
|
||||||
|
cardid: null,
|
||||||
|
age: null,
|
||||||
|
prefix: null,
|
||||||
|
prefixId: null,
|
||||||
|
firstname: null,
|
||||||
|
lastname: null,
|
||||||
|
birthDate: "",
|
||||||
|
genderId: null,
|
||||||
|
bloodId: null,
|
||||||
|
nationality: "ไทย",
|
||||||
|
ethnicity: "ไทย",
|
||||||
|
statusId: null,
|
||||||
|
religionId: "ceaec498-71b4-4f82-b5a2-7d6ec988b753",
|
||||||
|
tel: null,
|
||||||
|
employeeType: null,
|
||||||
|
employeeClass: null,
|
||||||
|
profileType: null,
|
||||||
|
});
|
||||||
|
|
||||||
|
const Ops = ref<any>({
|
||||||
|
prefixOps: [],
|
||||||
|
prefixOldOps: [],
|
||||||
|
genderOps: [],
|
||||||
|
bloodOps: [],
|
||||||
|
statusOps: [],
|
||||||
|
religionOps: [],
|
||||||
|
employeeClassOps: [],
|
||||||
|
employeeTypeOps: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
// ข้อมูลเมื่อเลือกแล้ว
|
||||||
|
const OpsFilter = ref<any>({
|
||||||
|
prefixOps: [],
|
||||||
|
prefixOldOps: [],
|
||||||
|
genderOps: [],
|
||||||
|
bloodOps: [],
|
||||||
|
statusOps: [],
|
||||||
|
religionOps: [],
|
||||||
|
employeeClassOps: [],
|
||||||
|
employeeTypeOps: [],
|
||||||
|
});
|
||||||
|
const modal = defineModel<boolean>("modal", { required: true });
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => modal.value,
|
||||||
|
() => {
|
||||||
|
modal.value && fetchPerson();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// ตรวจสอบเลขประจำตัวประชาชน
|
||||||
|
const defaultCitizenData = ref<string>("");
|
||||||
|
const changeCardID = async (value: string | number | null) => {
|
||||||
|
if (value != null && typeof value == "string") {
|
||||||
|
if (value.length == 13 && value != defaultCitizenData.value) {
|
||||||
|
await checkCitizen(value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const checkCitizen = async (id: string) => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.profileCitizenId(id))
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result.citizen;
|
||||||
|
|
||||||
|
if (!data) {
|
||||||
|
dialogMessage(
|
||||||
|
$q,
|
||||||
|
"ข้อความแจ้งเตือน",
|
||||||
|
"เลขประจำตัวประชาชนนี้มีการใช้งานแล้ว",
|
||||||
|
"warning",
|
||||||
|
undefined,
|
||||||
|
"orange",
|
||||||
|
undefined,
|
||||||
|
undefined,
|
||||||
|
true
|
||||||
|
);
|
||||||
|
informaData.value.cardid = defaultCitizenData.value;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// filter list ข้อมูลต่างๆ
|
||||||
|
const filterSelector = (val: any, update: Function, refData: string) => {
|
||||||
|
switch (refData) {
|
||||||
|
case "prefixOps":
|
||||||
|
update(() => {
|
||||||
|
Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
|
||||||
|
(v: any) => v.name.indexOf(val) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "genderOps":
|
||||||
|
update(() => {
|
||||||
|
Ops.value.genderOps = OpsFilter.value.genderOps.filter(
|
||||||
|
(v: any) => v.name.indexOf(val) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "bloodOps":
|
||||||
|
update(() => {
|
||||||
|
Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
|
||||||
|
(v: any) => v.name.indexOf(val) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "statusOps":
|
||||||
|
update(() => {
|
||||||
|
Ops.value.statusOps = OpsFilter.value.statusOps.filter(
|
||||||
|
(v: any) => v.name.indexOf(val) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "religionOps":
|
||||||
|
update(() => {
|
||||||
|
Ops.value.religionOps = OpsFilter.value.religionOps.filter(
|
||||||
|
(v: any) => v.name.indexOf(val) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const calculateMaxDate = () => {
|
||||||
|
const today = new Date();
|
||||||
|
today.setDate(today.getDate() - 1);
|
||||||
|
return today;
|
||||||
|
};
|
||||||
|
|
||||||
|
// เช็คเรื่องการเกษียณ
|
||||||
|
const calRetire = async (birth: Date) => {
|
||||||
|
const body = {
|
||||||
|
birthDate: dateToISO(birth),
|
||||||
|
};
|
||||||
|
if (dateToISO(dateBefore.value) != dateToISO(birth)) {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.post(config.API.profileCalRetire, body)
|
||||||
|
.then((res: any) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
informaData.value.age = data.age;
|
||||||
|
informaData.value.birthDate = birth;
|
||||||
|
changeRetireText(data.retireDate);
|
||||||
|
dateBefore.value = birth;
|
||||||
|
})
|
||||||
|
.catch((e: any) => {
|
||||||
|
messageError($q, e);
|
||||||
|
inputBirthDate.value = "";
|
||||||
|
informaData.value.birthDate = "";
|
||||||
|
informaData.value.age = "";
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// หลังจากกดปุ่มบันทึกเช็ค validate ก่อน
|
||||||
|
const myform = ref<QForm | null>(null);
|
||||||
|
const saveData = async () => {
|
||||||
|
if (myform.value != null) {
|
||||||
|
await myform.value.validate().then(async (saveDataTest: Boolean) => {
|
||||||
|
if (saveDataTest) {
|
||||||
|
if (inputBirthDate.value === "") dayChecked.value = true;
|
||||||
|
else dialogConfirm($q, () => addData()); // validate ผ่านส่งไปบันทึกที่ api
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const fileData = ref<any>();
|
||||||
|
const addData = async () => {
|
||||||
|
const formData = new FormData();
|
||||||
|
if (fileData.value != null) formData.append("File", fileData.value); //แก้ไขรูป
|
||||||
|
if (informaData.value.cardid != undefined)
|
||||||
|
formData.append("citizenId", informaData.value.cardid);
|
||||||
|
if (informaData.value.prefixId != undefined)
|
||||||
|
formData.append("prefixId", informaData.value.prefixId);
|
||||||
|
if (informaData.value.firstname != undefined)
|
||||||
|
formData.append("firstName", informaData.value.firstname);
|
||||||
|
if (informaData.value.lastname != undefined)
|
||||||
|
formData.append("lastName", informaData.value.lastname);
|
||||||
|
if (informaData.value.genderId != undefined)
|
||||||
|
formData.append("genderId", informaData.value.genderId);
|
||||||
|
if (informaData.value.nationality != undefined)
|
||||||
|
formData.append("nationality", informaData.value.nationality);
|
||||||
|
if (informaData.value.ethnicity != undefined)
|
||||||
|
formData.append("race", informaData.value.ethnicity);
|
||||||
|
if (informaData.value.religionId != undefined)
|
||||||
|
formData.append("religionId", informaData.value.religionId);
|
||||||
|
if (informaData.value.birthDate != "")
|
||||||
|
formData.append("birthDate", dateToISO(informaData.value.birthDate));
|
||||||
|
if (informaData.value.bloodId != undefined)
|
||||||
|
formData.append("bloodGroupId", informaData.value.bloodId);
|
||||||
|
if (informaData.value.statusId != undefined)
|
||||||
|
formData.append("relationshipId", informaData.value.statusId);
|
||||||
|
if (informaData.value.tel != undefined)
|
||||||
|
formData.append("telephoneNumber", informaData.value.tel);
|
||||||
|
if (informaData.value.employeeType != undefined)
|
||||||
|
formData.append("employeeType", informaData.value.employeeType);
|
||||||
|
if (informaData.value.employeeClass != undefined)
|
||||||
|
formData.append("employeeClass", informaData.value.employeeClass);
|
||||||
|
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.post(config.API.createProfileOfficer(), formData)
|
||||||
|
.then((res) => {
|
||||||
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
|
clearForm();
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
modal.value = false;
|
||||||
|
await changeBirth(informaData.value.birthDate ?? new Date());
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
function clearForm() {
|
||||||
|
informaData.value = {
|
||||||
|
cardid: null,
|
||||||
|
age: null,
|
||||||
|
prefix: null,
|
||||||
|
prefixId: null,
|
||||||
|
firstname: null,
|
||||||
|
lastname: null,
|
||||||
|
birthDate: null,
|
||||||
|
genderId: null,
|
||||||
|
bloodId: null,
|
||||||
|
nationality: "ไทย",
|
||||||
|
ethnicity: "ไทย",
|
||||||
|
statusId: null,
|
||||||
|
religionId: "ceaec498-71b4-4f82-b5a2-7d6ec988b753",
|
||||||
|
tel: null,
|
||||||
|
employeeType: null,
|
||||||
|
employeeClass: null,
|
||||||
|
profileType: null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/*** get รายการข้อมูลเกี่ยวกับบุคคล (dropdown list) */
|
||||||
|
const fetchPerson = async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.person)
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
let optionbloodGroups: any[] = [];
|
||||||
|
data.bloodGroups.map((r: any) => {
|
||||||
|
optionbloodGroups.push({
|
||||||
|
id: r.id.toString(),
|
||||||
|
name: r.name.toString(),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
Ops.value.bloodOps = optionbloodGroups;
|
||||||
|
OpsFilter.value.bloodOps = optionbloodGroups;
|
||||||
|
|
||||||
|
let optiongenders: any[] = [];
|
||||||
|
data.genders.map((r: any) => {
|
||||||
|
optiongenders.push({
|
||||||
|
id: r.id.toString(),
|
||||||
|
name: r.name.toString(),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
Ops.value.genderOps = optiongenders;
|
||||||
|
OpsFilter.value.genderOps = optiongenders;
|
||||||
|
|
||||||
|
let optionprefixs: any[] = [];
|
||||||
|
data.prefixs.map((r: any) => {
|
||||||
|
optionprefixs.push({
|
||||||
|
id: r.id.toString(),
|
||||||
|
name: r.name.toString(),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
Ops.value.prefixOps = optionprefixs;
|
||||||
|
OpsFilter.value.prefixOps = optionprefixs;
|
||||||
|
|
||||||
|
let optionrelationships: any[] = [];
|
||||||
|
data.relationships.map((r: any) => {
|
||||||
|
optionrelationships.push({
|
||||||
|
id: r.id.toString(),
|
||||||
|
name: r.name.toString(),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
Ops.value.statusOps = optionrelationships;
|
||||||
|
OpsFilter.value.statusOps = optionrelationships;
|
||||||
|
|
||||||
|
let optionreligions: any[] = [];
|
||||||
|
data.religions.map((r: any) => {
|
||||||
|
optionreligions.push({
|
||||||
|
id: r.id.toString(),
|
||||||
|
name: r.name.toString(),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
Ops.value.religionOps = optionreligions;
|
||||||
|
OpsFilter.value.religionOps = optionreligions;
|
||||||
|
})
|
||||||
|
.catch((e: any) => {})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// change date input
|
||||||
|
const inputBirthDate = ref<string>("");
|
||||||
|
const dayChecked = ref<boolean>(false);
|
||||||
|
watch(
|
||||||
|
() => inputBirthDate.value,
|
||||||
|
(value: string) => {
|
||||||
|
if (value.length === 10) {
|
||||||
|
const dateVal = convertDate(value);
|
||||||
|
|
||||||
|
if (dateVal.isValid) {
|
||||||
|
dayChecked.value = false;
|
||||||
|
calRetire(new Date(dateVal.value));
|
||||||
|
} else {
|
||||||
|
dayChecked.value = true;
|
||||||
|
inputBirthDate.value = "";
|
||||||
|
informaData.value.age = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<q-dialog v-model="modal">
|
||||||
|
<q-card style="min-width: 75vw">
|
||||||
|
<Header
|
||||||
|
tittle="เพิ่มข้อมูลทะเบียนประวัติข้าราชการ กทม.สามัญ"
|
||||||
|
:close="() => (modal = false)"
|
||||||
|
/>
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
|
<q-card-section class="q-pt-none">
|
||||||
|
<HeaderTop header="ข้อมูลส่วนตัว" icon="mdi-account" />
|
||||||
|
<q-form ref="myform" class="col-12 q-pt-md">
|
||||||
|
<div class="row">
|
||||||
|
<div class="row col-12 q-col-gutter-x-sm q-mb-xs">
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||||
|
<q-input
|
||||||
|
hide-bottom-space
|
||||||
|
outlined
|
||||||
|
v-model="informaData.cardid"
|
||||||
|
dense
|
||||||
|
@update:model-value="changeCardID"
|
||||||
|
for="#cardId"
|
||||||
|
lazy-rules
|
||||||
|
:rules="[
|
||||||
|
(val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
|
||||||
|
(val: string) =>
|
||||||
|
val.length >= 13 ||
|
||||||
|
`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
|
||||||
|
]"
|
||||||
|
label="เลขประจำตัวประชาชน"
|
||||||
|
maxlength="13"
|
||||||
|
mask="#############"
|
||||||
|
/>
|
||||||
|
<!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,]" -->
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||||
|
<selector
|
||||||
|
for="#prefixId"
|
||||||
|
hide-bottom-space
|
||||||
|
outlined
|
||||||
|
:rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
v-model="informaData.prefixId"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
option-label="name"
|
||||||
|
:options="Ops.prefixOps"
|
||||||
|
option-value="id"
|
||||||
|
:label="`${'คำนำหน้าชื่อ'}`"
|
||||||
|
use-input
|
||||||
|
input-debounce="0"
|
||||||
|
@filter="(inputValue: any, doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||||
|
<q-input
|
||||||
|
for="#firstname"
|
||||||
|
hide-bottom-space
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
v-model="informaData.firstname"
|
||||||
|
:rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
|
||||||
|
:label="`${'ชื่อ'}`"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||||
|
<q-input
|
||||||
|
for="#lastname"
|
||||||
|
hide-bottom-space
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
v-model="informaData.lastname"
|
||||||
|
:rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
|
||||||
|
:label="`${'นามสกุล'}`"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row col-12 q-col-gutter-x-sm q-mb-xs">
|
||||||
|
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||||
|
<!-- <datepicker
|
||||||
|
v-model="informaData.birthDate"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
:max-date="calculateMaxDate()"
|
||||||
|
@update:model-value="calRetire"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
for="#birthDate"
|
||||||
|
hide-bottom-space
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
:model-value="
|
||||||
|
informaData.birthDate == null
|
||||||
|
? null
|
||||||
|
: date2Thai(informaData.birthDate)
|
||||||
|
"
|
||||||
|
:rules="[(val: string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
|
||||||
|
:label="`${'วัน/เดือน/ปี เกิด'}`"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon
|
||||||
|
name="event"
|
||||||
|
class="cursor-pointer"
|
||||||
|
style="color: var(--q-primary)"
|
||||||
|
>
|
||||||
|
</q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker> -->
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
v-model="inputBirthDate"
|
||||||
|
label="วัน/เดือน/ปี เกิด"
|
||||||
|
mask="##/##/####"
|
||||||
|
dense
|
||||||
|
:error="dayChecked"
|
||||||
|
error-message="กรุณากรอกวัน/เดือน/ปี เกิด"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||||
|
<q-input
|
||||||
|
hide-bottom-space
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
readonly
|
||||||
|
borderless
|
||||||
|
style="padding: 0 12px"
|
||||||
|
:model-value="informaData.age"
|
||||||
|
:label="`${'อายุ'}`"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||||
|
<selector
|
||||||
|
for="#genderId"
|
||||||
|
hide-bottom-space
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
v-model="informaData.genderId"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
option-label="name"
|
||||||
|
:options="Ops.genderOps"
|
||||||
|
option-value="id"
|
||||||
|
:label="`${'เพศ'}`"
|
||||||
|
use-input
|
||||||
|
input-debounce="0"
|
||||||
|
@filter="(inputValue: any,
|
||||||
|
doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
|
||||||
|
)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||||
|
<selector
|
||||||
|
for="#statusId"
|
||||||
|
hide-bottom-space
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
v-model="informaData.statusId"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
option-label="name"
|
||||||
|
:options="Ops.statusOps"
|
||||||
|
option-value="id"
|
||||||
|
:label="`${'สถานภาพ'}`"
|
||||||
|
use-input
|
||||||
|
input-debounce="0"
|
||||||
|
@filter="(inputValue: any,
|
||||||
|
doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
|
||||||
|
)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||||
|
<q-input
|
||||||
|
for="#nationality"
|
||||||
|
hide-bottom-space
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
v-model="informaData.nationality"
|
||||||
|
:label="`${'สัญชาติ'}`"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||||
|
<q-input
|
||||||
|
for="#ethnicity"
|
||||||
|
hide-bottom-space
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
v-model="informaData.ethnicity"
|
||||||
|
:label="`${'เชื้อชาติ'}`"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row col-12 q-col-gutter-x-sm q-mb-xs">
|
||||||
|
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||||
|
<selector
|
||||||
|
for="#religionId"
|
||||||
|
hide-bottom-space
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
v-model="informaData.religionId"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
option-label="name"
|
||||||
|
:options="Ops.religionOps"
|
||||||
|
option-value="id"
|
||||||
|
:label="`${'ศาสนา'}`"
|
||||||
|
use-input
|
||||||
|
input-debounce="0"
|
||||||
|
@filter="(inputValue: any,
|
||||||
|
doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
|
||||||
|
)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||||
|
<selector
|
||||||
|
for="#bloodId"
|
||||||
|
hide-bottom-space
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
v-model="informaData.bloodId"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
option-label="name"
|
||||||
|
:options="Ops.bloodOps"
|
||||||
|
option-value="id"
|
||||||
|
:label="`${'หมู่เลือด'}`"
|
||||||
|
use-input
|
||||||
|
input-debounce="0"
|
||||||
|
@filter="(inputValue: any,
|
||||||
|
doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
|
||||||
|
)"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||||
|
<q-input
|
||||||
|
for="#tel"
|
||||||
|
hide-bottom-space
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
type="tel"
|
||||||
|
v-model="informaData.tel"
|
||||||
|
:label="`${'เบอร์โทร'}`"
|
||||||
|
mask="##########"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-form>
|
||||||
|
<!-- <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div> -->
|
||||||
|
<!-- <div class="row col-12"> -->
|
||||||
|
<!-- <q-space /> -->
|
||||||
|
<!-- <q-btn
|
||||||
|
for="#submitForm"
|
||||||
|
unelevated
|
||||||
|
dense
|
||||||
|
class="q-px-md items-center"
|
||||||
|
color="light-blue-10"
|
||||||
|
label="บันทึก"
|
||||||
|
@click="saveData"
|
||||||
|
/> -->
|
||||||
|
<!-- </div> -->
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
|
<q-card-actions align="right" class="bg-white text-teal">
|
||||||
|
<!-- <q-btn flat label="OK" v-close-popup /> -->
|
||||||
|
<q-btn
|
||||||
|
for="#submitForm"
|
||||||
|
unelevated
|
||||||
|
dense
|
||||||
|
class="q-px-md items-center"
|
||||||
|
color="light-blue-10"
|
||||||
|
label="บันทึก"
|
||||||
|
@click="saveData"
|
||||||
|
/>
|
||||||
|
</q-card-actions>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
29
src/components/DialogHeader.vue
Normal file
29
src/components/DialogHeader.vue
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
<template>
|
||||||
|
<q-toolbar>
|
||||||
|
<q-toolbar-title class="text-subtitle2 text-bold">{{
|
||||||
|
tittle
|
||||||
|
}}</q-toolbar-title>
|
||||||
|
<q-btn
|
||||||
|
icon="close"
|
||||||
|
unelevated
|
||||||
|
round
|
||||||
|
dense
|
||||||
|
@click="close"
|
||||||
|
style="color: #ff8080; background-color: #ffdede"
|
||||||
|
/>
|
||||||
|
</q-toolbar>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, useAttrs } from "vue";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
tittle: String,
|
||||||
|
close: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const close = async () => {
|
||||||
|
props.close();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
334
src/components/Dialogs/AddPersonal.vue
Normal file
334
src/components/Dialogs/AddPersonal.vue
Normal file
|
|
@ -0,0 +1,334 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, watch } from "vue";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
import type { ResponsePreson } from "@/interface/response/listPerson";
|
||||||
|
import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";
|
||||||
|
|
||||||
|
const mainStore = useDisciplineMainStore();
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const { dialogMessageNotify, showLoader, hideLoader } = mixin;
|
||||||
|
|
||||||
|
interface typeOp {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface tableType {
|
||||||
|
personId: string;
|
||||||
|
idcard: string;
|
||||||
|
prefix: string;
|
||||||
|
firstName: string;
|
||||||
|
lastName: string;
|
||||||
|
position: string;
|
||||||
|
positionLevel: string;
|
||||||
|
organization: string;
|
||||||
|
salary: string;
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const rows = ref<tableType[]>([]);
|
||||||
|
const type = ref<string>("idcard");
|
||||||
|
const search = ref<string>("");
|
||||||
|
const selected = ref<any>([]);
|
||||||
|
|
||||||
|
const typeOps = ref<typeOp[]>([
|
||||||
|
{ id: "idcard", name: "เลขประจำตัวประชาชน" },
|
||||||
|
{ id: "firstname", name: "ชื่อ" },
|
||||||
|
{ id: "lastname", name: "นามสกุล" },
|
||||||
|
]);
|
||||||
|
|
||||||
|
/** รับค่ามาจาก หน้าหลัก */
|
||||||
|
const props = defineProps({
|
||||||
|
modal: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
btnTitle: {
|
||||||
|
type: String,
|
||||||
|
default: "เพิ่ม",
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
desc: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
selectedData: {
|
||||||
|
type: Array,
|
||||||
|
default: [],
|
||||||
|
},
|
||||||
|
close: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
save: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
selecetSwitch: {
|
||||||
|
type: String,
|
||||||
|
default: "multiple",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
/**ส่งค่ากลับหน้าหลัก */
|
||||||
|
const emit = defineEmits(["returnData"]);
|
||||||
|
|
||||||
|
/** ปิด dialog */
|
||||||
|
async function close() {
|
||||||
|
console.log("close");
|
||||||
|
props.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** เปิด dialog ยืนยัน */
|
||||||
|
function savePost() {
|
||||||
|
if (selected.value.length != 0) {
|
||||||
|
// dialogConfirm($q, () => saveData());
|
||||||
|
saveData();
|
||||||
|
} else {
|
||||||
|
dialogMessageNotify($q, "กรุณาเลือกอย่างน้อย 1 รายการ");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** save data หลังจาก ยืนยัน */
|
||||||
|
function saveData() {
|
||||||
|
props.save();
|
||||||
|
emit("returnData", selected.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
const searchRef = ref<any>(null);
|
||||||
|
/** input ค้นหา */
|
||||||
|
async function searchInput() {
|
||||||
|
searchRef.value.validate();
|
||||||
|
if (!searchRef.value.hasError) {
|
||||||
|
showLoader();
|
||||||
|
const body = {
|
||||||
|
fieldName: type.value,
|
||||||
|
keyword: search.value,
|
||||||
|
};
|
||||||
|
await http
|
||||||
|
.post(config.API.orgSearchPersonal(), body)
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
const list = data.map((e: any) => ({
|
||||||
|
personId: e.id,
|
||||||
|
idcard: e.idcard,
|
||||||
|
prefix: e.prefix,
|
||||||
|
firstName: e.firstName,
|
||||||
|
lastName: e.lastName,
|
||||||
|
name: `${e.prefix}${e.firstName} ${e.lastName}`,
|
||||||
|
posNo: e.posNo ?? "-",
|
||||||
|
position: e.position ?? "-",
|
||||||
|
positionLevel: e.positionLevelName ?? "-",
|
||||||
|
salary: e.salary ?? "-",
|
||||||
|
organization: e.organization ?? "-",
|
||||||
|
phone: e.phone ?? "-",
|
||||||
|
email: e.email ?? "-",
|
||||||
|
root: e.root,
|
||||||
|
rootId: e.rootId,
|
||||||
|
rootShortName: e.rootShortName,
|
||||||
|
child1: e.child1,
|
||||||
|
child1Id: e.child1Id,
|
||||||
|
child1ShortName: e.child1ShortName,
|
||||||
|
child2: e.child2,
|
||||||
|
child2Id: e.child2Id,
|
||||||
|
child2ShortName: e.child2ShortName,
|
||||||
|
child3: e.child3,
|
||||||
|
child3Id: e.child3Id,
|
||||||
|
child3ShortName: e.child3ShortName,
|
||||||
|
child4: e.child4,
|
||||||
|
child4Id: e.child4Id,
|
||||||
|
child4ShortName: e.child4ShortName,
|
||||||
|
posMasterNo: e.posMasterNo,
|
||||||
|
posTypeId: e.posTypeId,
|
||||||
|
posTypeName: e.posTypeName,
|
||||||
|
posLevelId: e.posLevelId,
|
||||||
|
posLevelName: e.posLevelName,
|
||||||
|
}));
|
||||||
|
|
||||||
|
rows.value = list;
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** update เมื่อเปลี่ยน option */
|
||||||
|
function updateSelect() {
|
||||||
|
search.value = "";
|
||||||
|
}
|
||||||
|
watch(
|
||||||
|
() => props.selectedData,
|
||||||
|
() => {
|
||||||
|
if (props.selectedData) {
|
||||||
|
selected.value = props.selectedData;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<q-dialog v-model="props.modal" persistent>
|
||||||
|
<q-card style="min-width: 60vw">
|
||||||
|
<q-toolbar>
|
||||||
|
<q-toolbar-title class="text-subtitle2 text-bold">{{
|
||||||
|
props.title
|
||||||
|
}}</q-toolbar-title>
|
||||||
|
<q-btn
|
||||||
|
icon="close"
|
||||||
|
unelevated
|
||||||
|
round
|
||||||
|
dense
|
||||||
|
@click="close"
|
||||||
|
style="color: #ff8080; background-color: #ffdede"
|
||||||
|
/>
|
||||||
|
</q-toolbar>
|
||||||
|
<q-separator />
|
||||||
|
<q-card-section class="q-pa-md">
|
||||||
|
<div class="row col-12 q-col-gutter-sm items-start">
|
||||||
|
<div class="col-12 col-sm-5 col-md-3">
|
||||||
|
<q-select
|
||||||
|
label="ค้นหาจาก"
|
||||||
|
v-model="type"
|
||||||
|
:options="typeOps"
|
||||||
|
emit-value
|
||||||
|
dense
|
||||||
|
@update:model-value="updateSelect"
|
||||||
|
map-options
|
||||||
|
outlined
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 col-sm-7 col-md-9">
|
||||||
|
<q-input
|
||||||
|
ref="searchRef"
|
||||||
|
v-model="search"
|
||||||
|
outlined
|
||||||
|
clearable
|
||||||
|
dense
|
||||||
|
label="คำค้น"
|
||||||
|
:rules="[(val) => !!val || `กรุณากรอกคำค้น`]"
|
||||||
|
>
|
||||||
|
<template v-slot:after>
|
||||||
|
<q-btn
|
||||||
|
color="primary"
|
||||||
|
icon="search"
|
||||||
|
label="ค้นหา"
|
||||||
|
outline
|
||||||
|
class="full-width q-py-sm q-px-md"
|
||||||
|
@click="searchInput()"
|
||||||
|
>
|
||||||
|
</q-btn>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="full-width">
|
||||||
|
<d-table
|
||||||
|
ref="table"
|
||||||
|
:columns="mainStore.columnsRespondent"
|
||||||
|
:rows="rows"
|
||||||
|
row-key="personId"
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
:paging="true"
|
||||||
|
dense
|
||||||
|
class="custom-header-table"
|
||||||
|
:visible-columns="mainStore.visibleColumnsRespondent"
|
||||||
|
:selection="props.selecetSwitch"
|
||||||
|
v-model:selected="selected"
|
||||||
|
>
|
||||||
|
<template v-slot:header-selection="scope">
|
||||||
|
<q-checkbox
|
||||||
|
keep-color
|
||||||
|
color="primary"
|
||||||
|
dense
|
||||||
|
v-model="scope.checkBox"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<template v-slot:header="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-th class="text-center">
|
||||||
|
<q-checkbox
|
||||||
|
keep-color
|
||||||
|
color="primary"
|
||||||
|
dense
|
||||||
|
v-model="props.selected"
|
||||||
|
/>
|
||||||
|
</q-th>
|
||||||
|
<q-th
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
style="color: #000000; font-weight: 500"
|
||||||
|
>
|
||||||
|
<span class="text-weight-medium">{{ col.label }}</span>
|
||||||
|
</q-th>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
|
<td class="text-center">
|
||||||
|
<q-checkbox
|
||||||
|
keep-color
|
||||||
|
color="primary"
|
||||||
|
dense
|
||||||
|
v-model="props.selected"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
|
<div v-if="col.name == 'no'">
|
||||||
|
{{ props.rowIndex + 1 }}
|
||||||
|
</div>
|
||||||
|
<div v-if="col.name === 'fullName'">
|
||||||
|
{{ props.prefix }}
|
||||||
|
</div>
|
||||||
|
<div v-else-if="col.name === 'salary'">
|
||||||
|
{{ props.row.salary.toLocaleString() }}
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
{{ col.value }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</d-table>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
|
<div class="row justify-end q-px-md q-py-sm items-center">
|
||||||
|
<q-btn
|
||||||
|
dense
|
||||||
|
color="public"
|
||||||
|
id="onSubmit"
|
||||||
|
class="q-px-md q-py-xs"
|
||||||
|
@click="savePost"
|
||||||
|
>
|
||||||
|
<!-- <q-icon left name="add" /> -->
|
||||||
|
<div>{{ props.btnTitle }}</div>
|
||||||
|
<!-- icon="mdi-content-save-outline" -->
|
||||||
|
<q-tooltip>{{ props.btnTitle }}</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
901
src/components/Dialogs/DialogOrgSelect.vue
Normal file
901
src/components/Dialogs/DialogOrgSelect.vue
Normal file
|
|
@ -0,0 +1,901 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import DialogHeader from "@/components/DialogHeader.vue";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import { ref, watch, reactive } from "vue";
|
||||||
|
import type { QTableProps } from "quasar";
|
||||||
|
import CardPosition from "@/modules/05_placement/components/PersonalList/CardPosition.vue";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
|
||||||
|
import type {
|
||||||
|
OrgTree,
|
||||||
|
DataTree,
|
||||||
|
PositionMain,
|
||||||
|
PositionNo,
|
||||||
|
Positions,
|
||||||
|
DataPositionNo,
|
||||||
|
FormActive,
|
||||||
|
TreeMain,
|
||||||
|
} from "@/interface/request/orgSelect/org";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
dataRows: {
|
||||||
|
type: Object,
|
||||||
|
require: true,
|
||||||
|
},
|
||||||
|
onSubmit: Function,
|
||||||
|
});
|
||||||
|
const $q = useQuasar();
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const {
|
||||||
|
dialogConfirm,
|
||||||
|
showLoader,
|
||||||
|
messageError,
|
||||||
|
hideLoader,
|
||||||
|
date2Thai,
|
||||||
|
dialogMessageNotify,
|
||||||
|
} = mixin;
|
||||||
|
|
||||||
|
const modal = defineModel<boolean>("modal", { required: true });
|
||||||
|
const title = defineModel<string>("title", { required: true });
|
||||||
|
const type = defineModel<any>("type", { required: true });
|
||||||
|
|
||||||
|
const posType = defineModel<any>("posType", { required: true });
|
||||||
|
const posLevel = defineModel<any>("posLevel", { required: true });
|
||||||
|
const position = defineModel<any>("position", { required: true });
|
||||||
|
|
||||||
|
const orgRevisionId = ref<string>("");
|
||||||
|
const filter = ref<string>("");
|
||||||
|
const isAll = ref<boolean>(false);
|
||||||
|
const isBlank = ref<boolean>(false);
|
||||||
|
const posMasterMain = ref<any>([]);
|
||||||
|
const positionNo = ref<DataPositionNo[]>();
|
||||||
|
const itemTaps = ref<string[]>();
|
||||||
|
const filters = ref<string>("");
|
||||||
|
const positionId = ref<string>("");
|
||||||
|
const selectedPos = ref<any[]>([]);
|
||||||
|
const seletcId = ref<string>("");
|
||||||
|
const datePos = ref<Date>(new Date());
|
||||||
|
const rowsPosition = ref<Positions[]>([]);
|
||||||
|
const positionData = ref<any>();
|
||||||
|
/** active form */
|
||||||
|
const formActive = reactive<FormActive>({
|
||||||
|
activeId: "",
|
||||||
|
activeName: "",
|
||||||
|
draftId: "",
|
||||||
|
draftName: "",
|
||||||
|
orgPublishDate: null,
|
||||||
|
isPublic: false,
|
||||||
|
});
|
||||||
|
/** node */
|
||||||
|
const nodes = ref<Array<OrgTree>>([]);
|
||||||
|
const lazy = ref(nodes);
|
||||||
|
const expanded = ref<string[]>([]);
|
||||||
|
const nodeLevel = ref<number>(0);
|
||||||
|
const nodeId = ref<string>(""); // id ของ Tree
|
||||||
|
|
||||||
|
/** columns*/
|
||||||
|
const columns = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "isPosition",
|
||||||
|
align: "left",
|
||||||
|
label: "",
|
||||||
|
sortable: true,
|
||||||
|
field: "isPosition",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "no",
|
||||||
|
align: "left",
|
||||||
|
label: "ลำดับ",
|
||||||
|
sortable: true,
|
||||||
|
field: "no",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "posMasterNo",
|
||||||
|
align: "left",
|
||||||
|
label: "เลขที่ตำแหน่ง",
|
||||||
|
sortable: true,
|
||||||
|
field: "posMasterNo",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionName",
|
||||||
|
align: "left",
|
||||||
|
label: "ตำแหน่งในสายงาน",
|
||||||
|
field: "positionName",
|
||||||
|
sortable: true,
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "posTypeName",
|
||||||
|
align: "left",
|
||||||
|
label: "ประเภทตำแหน่ง",
|
||||||
|
sortable: true,
|
||||||
|
field: "posTypeName",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "posLevelName",
|
||||||
|
align: "left",
|
||||||
|
label: "ระดับตำแหน่ง",
|
||||||
|
sortable: true,
|
||||||
|
field: "posLevelName",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionIsSelected",
|
||||||
|
align: "left",
|
||||||
|
label: "คนครอง",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionIsSelected",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const columnsPostition = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "no",
|
||||||
|
align: "left",
|
||||||
|
label: "ลำดับ",
|
||||||
|
sortable: false,
|
||||||
|
field: "no",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionName",
|
||||||
|
align: "left",
|
||||||
|
label: "ตำแหน่งในสายงาน",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionName",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionField",
|
||||||
|
align: "left",
|
||||||
|
label: "สายงาน",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionField",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "posTypeName",
|
||||||
|
align: "left",
|
||||||
|
label: "ประเภทตำเเหน่ง",
|
||||||
|
sortable: true,
|
||||||
|
field: "posTypeName",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "posLevelName",
|
||||||
|
align: "left",
|
||||||
|
label: "ระดับตำแหน่ง",
|
||||||
|
sortable: true,
|
||||||
|
field: "posLevelName",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "posExecutiveName",
|
||||||
|
align: "left",
|
||||||
|
label: "ตำแหน่งทางการบริหาร",
|
||||||
|
sortable: true,
|
||||||
|
field: "posExecutiveName",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionExecutiveField",
|
||||||
|
align: "left",
|
||||||
|
label: "ด้านทางการบริหาร",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionExecutiveField",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionArea",
|
||||||
|
align: "left",
|
||||||
|
label: "ด้าน/สาขา",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionArea",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const visibleColumns = ref<string[]>([
|
||||||
|
"isPosition",
|
||||||
|
"no",
|
||||||
|
"posMasterNo",
|
||||||
|
"positionName",
|
||||||
|
"posTypeName",
|
||||||
|
"posLevelName",
|
||||||
|
"positionIsSelected",
|
||||||
|
]);
|
||||||
|
|
||||||
|
/** ปิด dialog */
|
||||||
|
function close() {
|
||||||
|
modal.value = false;
|
||||||
|
|
||||||
|
type.value = null;
|
||||||
|
filter.value = "";
|
||||||
|
isAll.value = false;
|
||||||
|
isBlank.value = false;
|
||||||
|
|
||||||
|
nodes.value = [];
|
||||||
|
expanded.value = [];
|
||||||
|
nodeLevel.value = 0;
|
||||||
|
nodeId.value = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getDataTable(id: string, level: number = 0) {
|
||||||
|
showLoader();
|
||||||
|
|
||||||
|
const body = {
|
||||||
|
node: level,
|
||||||
|
nodeId: id,
|
||||||
|
typeCommand: type.value,
|
||||||
|
position: posType.value ? posType.value : "",
|
||||||
|
posLevel: posLevel.value ? posLevel.value : "",
|
||||||
|
posType: position.value ? position.value : "",
|
||||||
|
isAll: isAll.value,
|
||||||
|
isBlank: isBlank.value,
|
||||||
|
};
|
||||||
|
|
||||||
|
await http
|
||||||
|
.post(config.API.orgPosPlacement, body)
|
||||||
|
.then((res) => {
|
||||||
|
const dataMain: PositionMain[] = [];
|
||||||
|
posMasterMain.value = res.data.result.data;
|
||||||
|
|
||||||
|
res.data.result.data.forEach((e: PositionNo) => {
|
||||||
|
const p = e.positions;
|
||||||
|
if (p.length !== 0) {
|
||||||
|
const a = p.find((el: Positions) => el.positionIsSelected === true);
|
||||||
|
const { id, ...rest } = a ? a : p[0];
|
||||||
|
const data: any = { ...e, ...rest };
|
||||||
|
dataMain.push(data);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const listPosNo: DataPositionNo[] = dataMain.map((e: PositionMain) => ({
|
||||||
|
id: e.id,
|
||||||
|
isPosition: e.isPosition,
|
||||||
|
posMasterNo:
|
||||||
|
e.orgShortname +
|
||||||
|
(e.posMasterNoPrefix != null ? e.posMasterNoPrefix : "") +
|
||||||
|
e.posMasterNo +
|
||||||
|
(e.posMasterNoSuffix != null ? e.posMasterNoSuffix : ""),
|
||||||
|
positionName: e.positionName,
|
||||||
|
posTypeName: e.posTypeName,
|
||||||
|
posLevelName: e.posLevelName,
|
||||||
|
positionIsSelected: e.positionIsSelected
|
||||||
|
? e.fullNameCurrentHolder
|
||||||
|
: "-",
|
||||||
|
isSit: e.isSit,
|
||||||
|
positions: e.positions,
|
||||||
|
node: e.node,
|
||||||
|
nodeId: e.nodeId,
|
||||||
|
}));
|
||||||
|
|
||||||
|
positionNo.value = listPosNo;
|
||||||
|
positionData.value = listPosNo;
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
hideLoader();
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* funtion เลือกข้อมูล Tree
|
||||||
|
* @param data ข่อมูล Tree
|
||||||
|
*/
|
||||||
|
function updateSelected(data: DataTree) {
|
||||||
|
if (props?.dataRows?.nodeId === data.orgTreeId) {
|
||||||
|
positionId.value = props?.dataRows?.posmasterId;
|
||||||
|
seletcId.value = props?.dataRows?.positionId;
|
||||||
|
datePos.value = props?.dataRows?.reportingDateFullDate;
|
||||||
|
} else {
|
||||||
|
positionId.value = "";
|
||||||
|
seletcId.value = "";
|
||||||
|
selectedPos.value = [];
|
||||||
|
datePos.value = new Date();
|
||||||
|
}
|
||||||
|
|
||||||
|
nodeId.value = data.orgTreeId ? data.orgTreeId : "";
|
||||||
|
nodeLevel.value = data.orgLevel;
|
||||||
|
getDataTable(data.orgTreeId, data.orgLevel);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ดึงข้อมูล active */
|
||||||
|
async function getActive() {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.activeOrganization)
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
|
||||||
|
formActive.activeId = data.activeId;
|
||||||
|
formActive.activeName = data.activeName;
|
||||||
|
formActive.draftId = data.draftId;
|
||||||
|
formActive.draftName = data.draftName;
|
||||||
|
formActive.orgPublishDate = data.orgPublishDate;
|
||||||
|
formActive.isPublic = data.isPublic;
|
||||||
|
|
||||||
|
getTreeData(data.activeId);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ดึงข้อมูล หน่วยงาน */
|
||||||
|
async function getTreeData(id: string) {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.orgByid(id))
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
nodes.value = data;
|
||||||
|
filterItemsTaps(data);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function filterItemsTaps(data: TreeMain[]) {
|
||||||
|
let orgTreeIds: string[] = [];
|
||||||
|
for (const child of data) {
|
||||||
|
orgTreeIds.push(child.orgTreeId);
|
||||||
|
if (child.children) {
|
||||||
|
orgTreeIds = orgTreeIds.concat(filterItemsTaps(child.children));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
itemTaps.value = orgTreeIds;
|
||||||
|
return orgTreeIds;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function เลือกเลขที่ตำแหน่ง
|
||||||
|
* @param id เลชที่ตำแหน่ง
|
||||||
|
*/
|
||||||
|
async function onClickSelectPos(id: string) {
|
||||||
|
positionData.value = positionNo.value;
|
||||||
|
positionId.value = id;
|
||||||
|
selectedPos.value = [];
|
||||||
|
const position: DataPositionNo = positionData.value.find(
|
||||||
|
(e: DataPositionNo) => e.id === id
|
||||||
|
);
|
||||||
|
|
||||||
|
// หาตำแหน่ง
|
||||||
|
if (position) {
|
||||||
|
rowsPosition.value = position.positions;
|
||||||
|
if (seletcId.value) {
|
||||||
|
selectedPos.value = rowsPosition.value.filter(
|
||||||
|
(e) => e.id === seletcId.value
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function fetch ข้อมูล expanded tree
|
||||||
|
* @param level levelTree
|
||||||
|
* @param id treeId
|
||||||
|
*/
|
||||||
|
async function fetchPosFind(level: number, id: string) {
|
||||||
|
showLoader();
|
||||||
|
const body = {
|
||||||
|
node: level,
|
||||||
|
nodeId: id,
|
||||||
|
};
|
||||||
|
await http
|
||||||
|
.post(config.API.orgPosFind, body)
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
expanded.value = data;
|
||||||
|
nodeId.value = id;
|
||||||
|
positionId.value = props?.dataRows?.posmasterId;
|
||||||
|
seletcId.value = props?.dataRows?.positionId;
|
||||||
|
datePos.value = props?.dataRows?.reportingDateFullDate;
|
||||||
|
|
||||||
|
getDataTable(nodeId.value, level);
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => modal.value,
|
||||||
|
async (n) => {
|
||||||
|
if (n == true) {
|
||||||
|
getActive();
|
||||||
|
if (props?.dataRows?.node !== null && props?.dataRows?.nodeId !== null) {
|
||||||
|
await fetchPosFind(props?.dataRows?.node, props?.dataRows?.nodeId);
|
||||||
|
if (positionId.value) {
|
||||||
|
setTimeout(async () => {
|
||||||
|
await onClickSelectPos(positionId.value);
|
||||||
|
}, 200);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
expanded.value = [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => isAll.value,
|
||||||
|
(value, oldVal) => {
|
||||||
|
if (value !== oldVal) {
|
||||||
|
getDataTable(nodeId.value, nodeLevel.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => isBlank.value,
|
||||||
|
(value, oldVal) => {
|
||||||
|
if (value !== oldVal) {
|
||||||
|
getDataTable(nodeId.value, nodeLevel.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => positionId.value,
|
||||||
|
(n) => {
|
||||||
|
if (n) {
|
||||||
|
onClickSelectPos(n);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
function onSubmit() {
|
||||||
|
const dataPosMaster = posMasterMain.value?.find(
|
||||||
|
(e: any) => e.id === positionId.value
|
||||||
|
);
|
||||||
|
|
||||||
|
console.log(dataPosMaster);
|
||||||
|
if (selectedPos.value.length === 0) {
|
||||||
|
dialogMessageNotify($q, "กรุณาเลือกตำแหน่ง");
|
||||||
|
} else {
|
||||||
|
dialogConfirm($q, async () => {
|
||||||
|
const body = {
|
||||||
|
personalId: props?.dataRows?.id,
|
||||||
|
node: dataPosMaster.node,
|
||||||
|
nodeId: dataPosMaster.nodeId,
|
||||||
|
orgRevisionId: formActive.activeId,
|
||||||
|
positionId: selectedPos.value[0].id,
|
||||||
|
posMasterNo: dataPosMaster.posMasterNo, //เลขที่ตำแหน่ง(เลขอย่่างเดียว)
|
||||||
|
positionName: selectedPos.value[0].positionName, //ชื่อตำแหน่ง
|
||||||
|
positionField: selectedPos.value[0].positionField, //ชื่อตำแหน่ง
|
||||||
|
posTypeId: selectedPos.value[0].posTypeId, //ชื่อตำแหน่ง
|
||||||
|
posTypeName: selectedPos.value[0].posTypeName, //ชื่อตำแหน่ง
|
||||||
|
posLevelId: selectedPos.value[0].posLevelId, //ชื่อตำแหน่ง
|
||||||
|
posLevelName: selectedPos.value[0].posLevelName, //ชื่อตำแหน่ง
|
||||||
|
reportingDate: datePos.value,
|
||||||
|
posmasterId: dataPosMaster.id,
|
||||||
|
typeCommand: type.value,
|
||||||
|
};
|
||||||
|
props.onSubmit?.(body);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<q-dialog v-model="modal" persistent full-width>
|
||||||
|
<q-card class="no-scroll">
|
||||||
|
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||||
|
<DialogHeader :tittle="title" :close="close" />
|
||||||
|
<q-separator />
|
||||||
|
<q-card-section style="max-height: 80vh" class="scroll">
|
||||||
|
<div class="row">
|
||||||
|
<q-card
|
||||||
|
bordered
|
||||||
|
class="col-12 col-sm-3 scroll q-pa-sm"
|
||||||
|
style="height: 75vh"
|
||||||
|
>
|
||||||
|
<q-toolbar style="padding: 0">
|
||||||
|
<q-toolbar-title class="text-subtitle2 text-bold"
|
||||||
|
>เลือกหน่วยงาน/ส่วนราชการ</q-toolbar-title
|
||||||
|
>
|
||||||
|
</q-toolbar>
|
||||||
|
|
||||||
|
<q-input dense outlined v-model="filter" label="ค้นหา">
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon
|
||||||
|
v-if="filter !== ''"
|
||||||
|
name="clear"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="filter = ''"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
<q-tree
|
||||||
|
class="q-pa-sm q-gutter-sm"
|
||||||
|
dense
|
||||||
|
:nodes="lazy"
|
||||||
|
node-key="orgTreeId"
|
||||||
|
label-key="orgTreeName"
|
||||||
|
:filter="filter"
|
||||||
|
no-results-label="ไม่พบข้อมูลที่ค้นหา"
|
||||||
|
no-nodes-label="ไม่มีข้อมูล"
|
||||||
|
v-model:expanded="expanded"
|
||||||
|
>
|
||||||
|
<template v-slot:default-header="prop">
|
||||||
|
<q-item
|
||||||
|
@click.stop="updateSelected(prop.node)"
|
||||||
|
clickable
|
||||||
|
:active="nodeId == prop.node.orgTreeId"
|
||||||
|
active-class="my-list-link text-primary text-weight-medium"
|
||||||
|
class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div class="text-weight-medium">
|
||||||
|
{{ prop.node.orgTreeName }}
|
||||||
|
</div>
|
||||||
|
<div class="text-weight-light">
|
||||||
|
{{
|
||||||
|
prop.node.orgCode == null ? null : prop.node.orgCode
|
||||||
|
}}
|
||||||
|
{{
|
||||||
|
prop.node.orgTreeShortName == null
|
||||||
|
? null
|
||||||
|
: prop.node.orgTreeShortName
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-item>
|
||||||
|
</template>
|
||||||
|
</q-tree>
|
||||||
|
</q-card>
|
||||||
|
<q-card bordered class="col-12 col-sm-9 q-pa-sm">
|
||||||
|
<q-tab-panels
|
||||||
|
v-model="nodeId"
|
||||||
|
animated
|
||||||
|
transition-prev="jump-up"
|
||||||
|
transition-next="jump-up"
|
||||||
|
>
|
||||||
|
<q-tab-panel
|
||||||
|
v-for="(item, index) in itemTaps"
|
||||||
|
:key="index"
|
||||||
|
:name="item"
|
||||||
|
>
|
||||||
|
<div class="column q-col-gutter-sm" style="height: 70vh">
|
||||||
|
<!-- เลือกเลขที่ตำแหน่ง -->
|
||||||
|
<div class="col-7">
|
||||||
|
<q-card
|
||||||
|
bordered
|
||||||
|
style="height: 100%; border: 1px solid #d6dee1"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
|
||||||
|
>
|
||||||
|
เลือกเลขที่ตำแหน่ง
|
||||||
|
</div>
|
||||||
|
<div class="col-12"><q-separator /></div>
|
||||||
|
<div class="col-12 q-pa-md">
|
||||||
|
<q-toolbar style="padding: 0px">
|
||||||
|
<div class="row q-gutter-md">
|
||||||
|
<q-checkbox
|
||||||
|
keep-color
|
||||||
|
v-model="isBlank"
|
||||||
|
label="แสดงเฉพาะตำแหน่งว่าง"
|
||||||
|
color="primary"
|
||||||
|
>
|
||||||
|
<q-tooltip>แสดงเฉพาะตำแหน่งว่าง </q-tooltip>
|
||||||
|
</q-checkbox>
|
||||||
|
</div>
|
||||||
|
<q-space />
|
||||||
|
|
||||||
|
<div class="row q-gutter-md">
|
||||||
|
<q-checkbox
|
||||||
|
keep-color
|
||||||
|
v-model="isAll"
|
||||||
|
label="แสดงตำแหน่งทั้งหมด"
|
||||||
|
color="primary"
|
||||||
|
>
|
||||||
|
<q-tooltip
|
||||||
|
>แสดงตำแหน่งทั้งหมดภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
|
||||||
|
>
|
||||||
|
</q-checkbox>
|
||||||
|
<div>
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
v-model="filters"
|
||||||
|
label="ค้นหา"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon name="search" color="grey-5" />
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<q-select
|
||||||
|
v-model="visibleColumns"
|
||||||
|
multiple
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
options-dense
|
||||||
|
emit-value
|
||||||
|
:display-value="$q.lang.table.columns"
|
||||||
|
map-options
|
||||||
|
:options="columns"
|
||||||
|
option-value="name"
|
||||||
|
options-cover
|
||||||
|
style="min-width: 180px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-toolbar>
|
||||||
|
<d-table
|
||||||
|
ref="table"
|
||||||
|
:columns="columns"
|
||||||
|
:rows="positionData"
|
||||||
|
:filter="filters"
|
||||||
|
row-key="id"
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
:paging="true"
|
||||||
|
dense
|
||||||
|
:rows-per-page-options="[10, 25, 50, 100]"
|
||||||
|
class="tableTb"
|
||||||
|
:visible-columns="visibleColumns"
|
||||||
|
>
|
||||||
|
<template v-slot:header="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-th
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
>
|
||||||
|
<span class="text-weight-medium">{{
|
||||||
|
col.label
|
||||||
|
}}</span>
|
||||||
|
</q-th>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
|
<q-td
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
@click="onClickSelectPos(props.row.id)"
|
||||||
|
:class="
|
||||||
|
props.row.id === positionId
|
||||||
|
? 'bg-blue-2'
|
||||||
|
: ''
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div v-if="col.name == 'no'">
|
||||||
|
{{ props.rowIndex + 1 }}
|
||||||
|
</div>
|
||||||
|
<div v-else-if="col.name === 'posMasterNo'">
|
||||||
|
{{
|
||||||
|
props.row.isSit
|
||||||
|
? col.value + " " + "(ทับที่)"
|
||||||
|
: col.value
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<div v-else-if="col.name === 'isPosition'">
|
||||||
|
<div v-if="col.value">
|
||||||
|
<q-icon
|
||||||
|
name="done"
|
||||||
|
color="primary"
|
||||||
|
size="24px"
|
||||||
|
>
|
||||||
|
<q-tooltip>ตรงตามตำแหน่ง </q-tooltip>
|
||||||
|
</q-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else>
|
||||||
|
{{ col.value ? col.value : "-" }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</d-table>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- เลือกตำแหน่ง -->
|
||||||
|
<div class="col-5">
|
||||||
|
<q-card
|
||||||
|
bordered
|
||||||
|
style="height: 100%; border: 1px solid #d6dee1"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
|
||||||
|
>
|
||||||
|
เลือกตำแหน่ง
|
||||||
|
</div>
|
||||||
|
<div class="col-12"><q-separator /></div>
|
||||||
|
<q-tab-panels
|
||||||
|
v-model="positionId"
|
||||||
|
animated
|
||||||
|
swipeable
|
||||||
|
vertical
|
||||||
|
transition-prev="jump-up"
|
||||||
|
transition-next="jump-up"
|
||||||
|
>
|
||||||
|
<q-tab-panel
|
||||||
|
v-for="(item, index) in positionData"
|
||||||
|
:key="index"
|
||||||
|
:name="item.id"
|
||||||
|
>
|
||||||
|
<div class="col-12">
|
||||||
|
<q-toolbar style="padding: 0px">
|
||||||
|
<datepicker
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="datePos"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
borderless
|
||||||
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
:min-date="datePos"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
ref="dateRef"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
hide-bottom-space
|
||||||
|
:model-value="
|
||||||
|
datePos != null
|
||||||
|
? date2Thai(datePos)
|
||||||
|
: null
|
||||||
|
"
|
||||||
|
label="วันที่รายงานตัว"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon
|
||||||
|
name="event"
|
||||||
|
class="cursor-pointer"
|
||||||
|
style="color: var(--q-primary)"
|
||||||
|
>
|
||||||
|
</q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
</q-toolbar>
|
||||||
|
<d-table
|
||||||
|
ref="table"
|
||||||
|
:columns="columnsPostition"
|
||||||
|
:rows="rowsPosition"
|
||||||
|
row-key="id"
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
:paging="true"
|
||||||
|
dense
|
||||||
|
:rows-per-page-options="[10, 25, 50, 100]"
|
||||||
|
class="tableTb"
|
||||||
|
selection="single"
|
||||||
|
v-model:selected="selectedPos"
|
||||||
|
>
|
||||||
|
<template v-slot:header-selection="scope">
|
||||||
|
<q-checkbox
|
||||||
|
keep-color
|
||||||
|
color="primary"
|
||||||
|
dense
|
||||||
|
v-model="scope.checkBox"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<template v-slot:header="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-th auto-width />
|
||||||
|
<q-th
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
>
|
||||||
|
<span class="text-weight-medium">{{
|
||||||
|
col.label
|
||||||
|
}}</span>
|
||||||
|
</q-th>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
|
<q-td>
|
||||||
|
<q-checkbox
|
||||||
|
keep-color
|
||||||
|
color="primary"
|
||||||
|
dense
|
||||||
|
v-model="props.selected"
|
||||||
|
/>
|
||||||
|
</q-td>
|
||||||
|
<q-td
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
>
|
||||||
|
<div v-if="col.name == 'no'">
|
||||||
|
{{ props.rowIndex + 1 }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-else-if="col.name === 'posMasterNo'"
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
props.row.isSit
|
||||||
|
? col.value + " " + "(ทับที่)"
|
||||||
|
: col.value
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else>
|
||||||
|
{{ col.value ? col.value : "-" }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</d-table>
|
||||||
|
</div>
|
||||||
|
</q-tab-panel>
|
||||||
|
</q-tab-panels>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-tab-panel>
|
||||||
|
</q-tab-panels>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
|
<q-card-actions align="right" class="bg-white text-teal">
|
||||||
|
<q-btn label="บันทึก" color="secondary" type="submit"
|
||||||
|
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
||||||
|
>
|
||||||
|
</q-card-actions>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
<style scoped>
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
880
src/components/Dialogs/DialogOrgSelectEmployee.vue
Normal file
880
src/components/Dialogs/DialogOrgSelectEmployee.vue
Normal file
|
|
@ -0,0 +1,880 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import DialogHeader from "@/components/DialogHeader.vue";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import { ref, watch, reactive } from "vue";
|
||||||
|
import type { QTableProps } from "quasar";
|
||||||
|
import CardPosition from "@/modules/05_placement/components/PersonalList/CardPosition.vue";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
|
||||||
|
import type {
|
||||||
|
OrgTree,
|
||||||
|
DataTree,
|
||||||
|
PositionMain,
|
||||||
|
PositionNo,
|
||||||
|
Positions,
|
||||||
|
DataPositionNo,
|
||||||
|
FormActive,
|
||||||
|
TreeMain,
|
||||||
|
} from "@/interface/request/orgSelect/org";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
dataRows: {
|
||||||
|
type: Object,
|
||||||
|
require: true,
|
||||||
|
},
|
||||||
|
onSubmit: Function,
|
||||||
|
});
|
||||||
|
const $q = useQuasar();
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const {
|
||||||
|
dialogConfirm,
|
||||||
|
showLoader,
|
||||||
|
messageError,
|
||||||
|
hideLoader,
|
||||||
|
date2Thai,
|
||||||
|
dialogMessageNotify,
|
||||||
|
} = mixin;
|
||||||
|
|
||||||
|
const modal = defineModel<boolean>("modal", { required: true });
|
||||||
|
const title = defineModel<string>("title", { required: true });
|
||||||
|
const type = defineModel<any>("type", { required: true });
|
||||||
|
const posType = defineModel<any>("posType", { required: true });
|
||||||
|
const posLevel = defineModel<any>("posLevel", { required: true });
|
||||||
|
const position = defineModel<any>("position", { required: true });
|
||||||
|
|
||||||
|
const orgRevisionId = ref<string>("");
|
||||||
|
const filter = ref<string>("");
|
||||||
|
const isAll = ref<boolean>(false);
|
||||||
|
const isBlank = ref<boolean>(false);
|
||||||
|
const posMasterMain = ref<any>([]);
|
||||||
|
const positionNo = ref<DataPositionNo[]>();
|
||||||
|
const itemTaps = ref<string[]>();
|
||||||
|
const filters = ref<string>("");
|
||||||
|
const positionId = ref<string>("");
|
||||||
|
const selectedPos = ref<any[]>([]);
|
||||||
|
const seletcId = ref<string>("");
|
||||||
|
const datePos = ref<Date>(new Date());
|
||||||
|
const rowsPosition = ref<Positions[]>([]);
|
||||||
|
const positionData = ref<any>();
|
||||||
|
/** active form */
|
||||||
|
const formActive = reactive<FormActive>({
|
||||||
|
activeId: "",
|
||||||
|
activeName: "",
|
||||||
|
draftId: "",
|
||||||
|
draftName: "",
|
||||||
|
orgPublishDate: null,
|
||||||
|
isPublic: false,
|
||||||
|
});
|
||||||
|
/** node */
|
||||||
|
const nodes = ref<Array<OrgTree>>([]);
|
||||||
|
const lazy = ref(nodes);
|
||||||
|
const expanded = ref<string[]>([]);
|
||||||
|
const nodeLevel = ref<number>(0);
|
||||||
|
const nodeId = ref<string>(""); // id ของ Tree
|
||||||
|
|
||||||
|
/** columns*/
|
||||||
|
const columns = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "isPosition",
|
||||||
|
align: "left",
|
||||||
|
label: "",
|
||||||
|
sortable: true,
|
||||||
|
field: "isPosition",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "no",
|
||||||
|
align: "left",
|
||||||
|
label: "ลำดับ",
|
||||||
|
sortable: true,
|
||||||
|
field: "no",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "posMasterNo",
|
||||||
|
align: "left",
|
||||||
|
label: "เลขที่ตำแหน่ง",
|
||||||
|
sortable: true,
|
||||||
|
field: "posMasterNo",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionName",
|
||||||
|
align: "left",
|
||||||
|
label: "ตำแหน่ง",
|
||||||
|
field: "positionName",
|
||||||
|
sortable: true,
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "posTypeName",
|
||||||
|
align: "left",
|
||||||
|
label: "กลุ่มงาน",
|
||||||
|
sortable: true,
|
||||||
|
field: "posTypeName",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "posLevelName",
|
||||||
|
align: "left",
|
||||||
|
label: "ระดับชั้นงาน",
|
||||||
|
sortable: true,
|
||||||
|
field: "posLevelName",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionIsSelected",
|
||||||
|
align: "left",
|
||||||
|
label: "คนครอง",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionIsSelected",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const columnsPostition = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "no",
|
||||||
|
align: "left",
|
||||||
|
label: "ลำดับ",
|
||||||
|
sortable: false,
|
||||||
|
field: "no",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionName",
|
||||||
|
align: "left",
|
||||||
|
label: "ตำแหน่ง",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionName",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionField",
|
||||||
|
align: "left",
|
||||||
|
label: "สายงาน",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionField",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "posTypeName",
|
||||||
|
align: "left",
|
||||||
|
label: "กลุ่มงาน",
|
||||||
|
sortable: true,
|
||||||
|
field: "posTypeName",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "posLevelName",
|
||||||
|
align: "left",
|
||||||
|
label: "ระดับชั้นงาน",
|
||||||
|
sortable: true,
|
||||||
|
field: "posLevelName",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionArea",
|
||||||
|
align: "left",
|
||||||
|
label: "ด้าน/สาขา",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionArea",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const visibleColumns = ref<string[]>([
|
||||||
|
"isPosition",
|
||||||
|
"no",
|
||||||
|
"posMasterNo",
|
||||||
|
"positionName",
|
||||||
|
"posTypeName",
|
||||||
|
"posLevelName",
|
||||||
|
"positionIsSelected",
|
||||||
|
]);
|
||||||
|
|
||||||
|
/** ปิด dialog */
|
||||||
|
function close() {
|
||||||
|
modal.value = false;
|
||||||
|
filter.value = "";
|
||||||
|
isAll.value = false;
|
||||||
|
isBlank.value = false;
|
||||||
|
type.value = null;
|
||||||
|
nodes.value = [];
|
||||||
|
expanded.value = [];
|
||||||
|
nodeLevel.value = 0;
|
||||||
|
nodeId.value = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getDataTable(id: string, level: number = 0) {
|
||||||
|
showLoader();
|
||||||
|
|
||||||
|
const body = {
|
||||||
|
node: level,
|
||||||
|
nodeId: id,
|
||||||
|
position: position.value ? position.value : "",
|
||||||
|
posLevel: posLevel.value ? posLevel.value : "",
|
||||||
|
posType: posType.value ? posType.value : "",
|
||||||
|
isAll: isAll.value,
|
||||||
|
isBlank: isBlank.value,
|
||||||
|
typeCommand: type.value,
|
||||||
|
};
|
||||||
|
|
||||||
|
await http
|
||||||
|
.post(config.API.orgPosPlacemenTemp, body)
|
||||||
|
.then((res) => {
|
||||||
|
const dataMain: PositionMain[] = [];
|
||||||
|
posMasterMain.value = res.data.result.data;
|
||||||
|
|
||||||
|
res.data.result.data.forEach((e: PositionNo) => {
|
||||||
|
const p = e.positions;
|
||||||
|
if (p.length !== 0) {
|
||||||
|
const a = p.find((el: Positions) => el.positionIsSelected === true);
|
||||||
|
const { id, ...rest } = a ? a : p[0];
|
||||||
|
const data: any = { ...e, ...rest };
|
||||||
|
dataMain.push(data);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const listPosNo: DataPositionNo[] = dataMain.map((e: PositionMain) => ({
|
||||||
|
id: e.id,
|
||||||
|
isPosition: e.isPosition,
|
||||||
|
posMasterNo:
|
||||||
|
e.orgShortname +
|
||||||
|
(e.posMasterNoPrefix != null ? e.posMasterNoPrefix : "") +
|
||||||
|
e.posMasterNo +
|
||||||
|
(e.posMasterNoSuffix != null ? e.posMasterNoSuffix : ""),
|
||||||
|
positionName: e.positionName,
|
||||||
|
posTypeName: e.posTypeName,
|
||||||
|
posLevelName: e.posLevelName,
|
||||||
|
positionIsSelected: e.positionIsSelected
|
||||||
|
? e.fullNameCurrentHolder
|
||||||
|
: "-",
|
||||||
|
isSit: e.isSit,
|
||||||
|
positions: e.positions,
|
||||||
|
node: e.node,
|
||||||
|
nodeId: e.nodeId,
|
||||||
|
}));
|
||||||
|
|
||||||
|
positionNo.value = listPosNo;
|
||||||
|
positionData.value = listPosNo;
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
hideLoader();
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* funtion เลือกข้อมูล Tree
|
||||||
|
* @param data ข่อมูล Tree
|
||||||
|
*/
|
||||||
|
function updateSelected(data: DataTree) {
|
||||||
|
if (props?.dataRows?.nodeId === data.orgTreeId) {
|
||||||
|
positionId.value = props?.dataRows?.posmasterId;
|
||||||
|
seletcId.value = props?.dataRows?.positionId;
|
||||||
|
datePos.value = props?.dataRows?.reportingDateFullDate;
|
||||||
|
} else {
|
||||||
|
positionId.value = "";
|
||||||
|
seletcId.value = "";
|
||||||
|
selectedPos.value = [];
|
||||||
|
datePos.value = new Date();
|
||||||
|
}
|
||||||
|
|
||||||
|
nodeId.value = data.orgTreeId ? data.orgTreeId : "";
|
||||||
|
nodeLevel.value = data.orgLevel;
|
||||||
|
getDataTable(data.orgTreeId, data.orgLevel);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ดึงข้อมูล active */
|
||||||
|
async function getActive() {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.activeOrganization)
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
|
||||||
|
formActive.activeId = data.activeId;
|
||||||
|
formActive.activeName = data.activeName;
|
||||||
|
formActive.draftId = data.draftId;
|
||||||
|
formActive.draftName = data.draftName;
|
||||||
|
formActive.orgPublishDate = data.orgPublishDate;
|
||||||
|
formActive.isPublic = data.isPublic;
|
||||||
|
|
||||||
|
getTreeData(data.activeId);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ดึงข้อมูล หน่วยงาน */
|
||||||
|
async function getTreeData(id: string) {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.orgByid(id))
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
nodes.value = data;
|
||||||
|
filterItemsTaps(data);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function filterItemsTaps(data: TreeMain[]) {
|
||||||
|
let orgTreeIds: string[] = [];
|
||||||
|
for (const child of data) {
|
||||||
|
orgTreeIds.push(child.orgTreeId);
|
||||||
|
if (child.children) {
|
||||||
|
orgTreeIds = orgTreeIds.concat(filterItemsTaps(child.children));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
itemTaps.value = orgTreeIds;
|
||||||
|
return orgTreeIds;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function เลือกเลขที่ตำแหน่ง
|
||||||
|
* @param id เลชที่ตำแหน่ง
|
||||||
|
*/
|
||||||
|
async function onClickSelectPos(id: string) {
|
||||||
|
positionData.value = positionNo.value;
|
||||||
|
positionId.value = id;
|
||||||
|
selectedPos.value = [];
|
||||||
|
const position: DataPositionNo = positionData.value.find(
|
||||||
|
(e: DataPositionNo) => e.id === id
|
||||||
|
);
|
||||||
|
|
||||||
|
// หาตำแหน่ง
|
||||||
|
if (position) {
|
||||||
|
rowsPosition.value = position.positions;
|
||||||
|
if (seletcId.value) {
|
||||||
|
selectedPos.value = rowsPosition.value.filter(
|
||||||
|
(e) => e.id === seletcId.value
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function fetch ข้อมูล expanded tree
|
||||||
|
* @param level levelTree
|
||||||
|
* @param id treeId
|
||||||
|
*/
|
||||||
|
async function fetchPosFind(level: number, id: string) {
|
||||||
|
showLoader();
|
||||||
|
const body = {
|
||||||
|
node: level,
|
||||||
|
nodeId: id,
|
||||||
|
};
|
||||||
|
await http
|
||||||
|
.post(config.API.orgPosFind, body)
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
expanded.value = data;
|
||||||
|
nodeId.value = id;
|
||||||
|
positionId.value = props?.dataRows?.posmasterId;
|
||||||
|
seletcId.value = props?.dataRows?.positionId;
|
||||||
|
datePos.value = props?.dataRows?.reportingDateFullDate;
|
||||||
|
|
||||||
|
getDataTable(nodeId.value, level);
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => modal.value,
|
||||||
|
async (n) => {
|
||||||
|
if (n == true) {
|
||||||
|
getActive();
|
||||||
|
if (props?.dataRows?.node !== null && props?.dataRows?.nodeId !== null) {
|
||||||
|
await fetchPosFind(props?.dataRows?.node, props?.dataRows?.nodeId);
|
||||||
|
if (positionId.value) {
|
||||||
|
setTimeout(async () => {
|
||||||
|
await onClickSelectPos(positionId.value);
|
||||||
|
}, 200);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
expanded.value = [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => isAll.value,
|
||||||
|
(value, oldVal) => {
|
||||||
|
if (value !== oldVal) {
|
||||||
|
getDataTable(nodeId.value, nodeLevel.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => isBlank.value,
|
||||||
|
(value, oldVal) => {
|
||||||
|
if (value !== oldVal) {
|
||||||
|
getDataTable(nodeId.value, nodeLevel.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => positionId.value,
|
||||||
|
(n) => {
|
||||||
|
if (n) {
|
||||||
|
onClickSelectPos(n);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
function onSubmit() {
|
||||||
|
const dataPosMaster = posMasterMain.value?.find(
|
||||||
|
(e: any) => e.id === positionId.value
|
||||||
|
);
|
||||||
|
|
||||||
|
console.log(dataPosMaster);
|
||||||
|
if (selectedPos.value.length === 0) {
|
||||||
|
dialogMessageNotify($q, "กรุณาเลือกตำแหน่ง");
|
||||||
|
} else {
|
||||||
|
dialogConfirm($q, async () => {
|
||||||
|
const body = {
|
||||||
|
personalId: props?.dataRows?.id,
|
||||||
|
node: dataPosMaster.node,
|
||||||
|
nodeId: dataPosMaster.nodeId,
|
||||||
|
orgRevisionId: formActive.activeId,
|
||||||
|
positionId: selectedPos.value[0].id,
|
||||||
|
posMasterNo: dataPosMaster.posMasterNo, //เลขที่ตำแหน่ง(เลขอย่่างเดียว)
|
||||||
|
positionName: selectedPos.value[0].positionName, //ชื่อตำแหน่ง
|
||||||
|
positionField: selectedPos.value[0].positionField, //ชื่อตำแหน่ง
|
||||||
|
posTypeId: selectedPos.value[0].posTypeId, //ชื่อตำแหน่ง
|
||||||
|
posTypeName: selectedPos.value[0].posTypeName, //ชื่อตำแหน่ง
|
||||||
|
posLevelId: selectedPos.value[0].posLevelId, //ชื่อตำแหน่ง
|
||||||
|
posLevelName: selectedPos.value[0].posLevelName, //ชื่อตำแหน่ง
|
||||||
|
reportingDate: datePos.value,
|
||||||
|
posmasterId: dataPosMaster.id,
|
||||||
|
typeCommand: type.value,
|
||||||
|
};
|
||||||
|
props.onSubmit?.(body);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<q-dialog v-model="modal" persistent full-width>
|
||||||
|
<q-card class="no-scroll">
|
||||||
|
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||||
|
<DialogHeader :tittle="title" :close="close" />
|
||||||
|
<q-separator />
|
||||||
|
<q-card-section style="max-height: 80vh" class="scroll">
|
||||||
|
<div class="row">
|
||||||
|
<q-card
|
||||||
|
bordered
|
||||||
|
class="col-12 col-sm-3 scroll q-pa-sm"
|
||||||
|
style="height: 75vh"
|
||||||
|
>
|
||||||
|
<q-toolbar style="padding: 0">
|
||||||
|
<q-toolbar-title class="text-subtitle2 text-bold"
|
||||||
|
>เลือกหน่วยงาน/ส่วนราชการ</q-toolbar-title
|
||||||
|
>
|
||||||
|
</q-toolbar>
|
||||||
|
|
||||||
|
<q-input dense outlined v-model="filter" label="ค้นหา">
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon
|
||||||
|
v-if="filter !== ''"
|
||||||
|
name="clear"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="filter = ''"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
<q-tree
|
||||||
|
class="q-pa-sm q-gutter-sm"
|
||||||
|
dense
|
||||||
|
:nodes="lazy"
|
||||||
|
node-key="orgTreeId"
|
||||||
|
label-key="orgTreeName"
|
||||||
|
:filter="filter"
|
||||||
|
no-results-label="ไม่พบข้อมูลที่ค้นหา"
|
||||||
|
no-nodes-label="ไม่มีข้อมูล"
|
||||||
|
v-model:expanded="expanded"
|
||||||
|
>
|
||||||
|
<template v-slot:default-header="prop">
|
||||||
|
<q-item
|
||||||
|
@click.stop="updateSelected(prop.node)"
|
||||||
|
clickable
|
||||||
|
:active="nodeId == prop.node.orgTreeId"
|
||||||
|
active-class="my-list-link text-primary text-weight-medium"
|
||||||
|
class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div class="text-weight-medium">
|
||||||
|
{{ prop.node.orgTreeName }}
|
||||||
|
</div>
|
||||||
|
<div class="text-weight-light">
|
||||||
|
{{
|
||||||
|
prop.node.orgCode == null ? null : prop.node.orgCode
|
||||||
|
}}
|
||||||
|
{{
|
||||||
|
prop.node.orgTreeShortName == null
|
||||||
|
? null
|
||||||
|
: prop.node.orgTreeShortName
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-item>
|
||||||
|
</template>
|
||||||
|
</q-tree>
|
||||||
|
</q-card>
|
||||||
|
<q-card bordered class="col-12 col-sm-9 q-pa-sm">
|
||||||
|
<q-tab-panels
|
||||||
|
v-model="nodeId"
|
||||||
|
animated
|
||||||
|
transition-prev="jump-up"
|
||||||
|
transition-next="jump-up"
|
||||||
|
>
|
||||||
|
<q-tab-panel
|
||||||
|
v-for="(item, index) in itemTaps"
|
||||||
|
:key="index"
|
||||||
|
:name="item"
|
||||||
|
>
|
||||||
|
<div class="column q-col-gutter-sm" style="height: 70vh">
|
||||||
|
<!-- เลือกเลขที่ตำแหน่ง -->
|
||||||
|
<div class="col-7">
|
||||||
|
<q-card
|
||||||
|
bordered
|
||||||
|
style="height: 100%; border: 1px solid #d6dee1"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
|
||||||
|
>
|
||||||
|
เลือกเลขที่ตำแหน่ง
|
||||||
|
</div>
|
||||||
|
<div class="col-12"><q-separator /></div>
|
||||||
|
<div class="col-12 q-pa-md">
|
||||||
|
<q-toolbar style="padding: 0px">
|
||||||
|
<div class="row q-gutter-md">
|
||||||
|
<q-checkbox
|
||||||
|
keep-color
|
||||||
|
v-model="isBlank"
|
||||||
|
label="แสดงเฉพาะตำแหน่งว่าง"
|
||||||
|
color="primary"
|
||||||
|
>
|
||||||
|
<q-tooltip>แสดงเฉพาะตำแหน่งว่าง </q-tooltip>
|
||||||
|
</q-checkbox>
|
||||||
|
</div>
|
||||||
|
<q-space />
|
||||||
|
|
||||||
|
<div class="row q-gutter-md">
|
||||||
|
<q-checkbox
|
||||||
|
keep-color
|
||||||
|
v-model="isAll"
|
||||||
|
label="แสดงตำแหน่งทั้งหมด"
|
||||||
|
color="primary"
|
||||||
|
>
|
||||||
|
<q-tooltip
|
||||||
|
>แสดงตำแหน่งทั้งหมดภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
|
||||||
|
>
|
||||||
|
</q-checkbox>
|
||||||
|
<div>
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
v-model="filters"
|
||||||
|
label="ค้นหา"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon name="search" color="grey-5" />
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<q-select
|
||||||
|
v-model="visibleColumns"
|
||||||
|
multiple
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
options-dense
|
||||||
|
emit-value
|
||||||
|
:display-value="$q.lang.table.columns"
|
||||||
|
map-options
|
||||||
|
:options="columns"
|
||||||
|
option-value="name"
|
||||||
|
options-cover
|
||||||
|
style="min-width: 180px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-toolbar>
|
||||||
|
<d-table
|
||||||
|
ref="table"
|
||||||
|
:columns="columns"
|
||||||
|
:rows="positionData"
|
||||||
|
:filter="filters"
|
||||||
|
row-key="id"
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
:paging="true"
|
||||||
|
dense
|
||||||
|
:rows-per-page-options="[10, 25, 50, 100]"
|
||||||
|
class="tableTb"
|
||||||
|
:visible-columns="visibleColumns"
|
||||||
|
>
|
||||||
|
<template v-slot:header="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-th
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
>
|
||||||
|
<span class="text-weight-medium">{{
|
||||||
|
col.label
|
||||||
|
}}</span>
|
||||||
|
</q-th>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
|
<q-td
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
@click="onClickSelectPos(props.row.id)"
|
||||||
|
:class="
|
||||||
|
props.row.id === positionId
|
||||||
|
? 'bg-blue-2'
|
||||||
|
: ''
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div v-if="col.name == 'no'">
|
||||||
|
{{ props.rowIndex + 1 }}
|
||||||
|
</div>
|
||||||
|
<div v-else-if="col.name === 'posMasterNo'">
|
||||||
|
{{
|
||||||
|
props.row.isSit
|
||||||
|
? col.value + " " + "(ทับที่)"
|
||||||
|
: col.value
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<div v-else-if="col.name === 'isPosition'">
|
||||||
|
<div v-if="col.value">
|
||||||
|
<q-icon
|
||||||
|
name="done"
|
||||||
|
color="primary"
|
||||||
|
size="24px"
|
||||||
|
>
|
||||||
|
<q-tooltip>ตรงตามตำแหน่ง </q-tooltip>
|
||||||
|
</q-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else>
|
||||||
|
{{ col.value ? col.value : "-" }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</d-table>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- เลือกตำแหน่ง -->
|
||||||
|
<div class="col-5">
|
||||||
|
<q-card
|
||||||
|
bordered
|
||||||
|
style="height: 100%; border: 1px solid #d6dee1"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
|
||||||
|
>
|
||||||
|
เลือกตำแหน่ง
|
||||||
|
</div>
|
||||||
|
<div class="col-12"><q-separator /></div>
|
||||||
|
<q-tab-panels
|
||||||
|
v-model="positionId"
|
||||||
|
animated
|
||||||
|
swipeable
|
||||||
|
vertical
|
||||||
|
transition-prev="jump-up"
|
||||||
|
transition-next="jump-up"
|
||||||
|
>
|
||||||
|
<q-tab-panel
|
||||||
|
v-for="(item, index) in positionData"
|
||||||
|
:key="index"
|
||||||
|
:name="item.id"
|
||||||
|
>
|
||||||
|
<div class="col-12">
|
||||||
|
<q-toolbar style="padding: 0px">
|
||||||
|
<datepicker
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="datePos"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
borderless
|
||||||
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
:min-date="datePos"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
ref="dateRef"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
hide-bottom-space
|
||||||
|
:model-value="
|
||||||
|
datePos != null
|
||||||
|
? date2Thai(datePos)
|
||||||
|
: null
|
||||||
|
"
|
||||||
|
label="วันที่รายงานตัว"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon
|
||||||
|
name="event"
|
||||||
|
class="cursor-pointer"
|
||||||
|
style="color: var(--q-primary)"
|
||||||
|
>
|
||||||
|
</q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
</q-toolbar>
|
||||||
|
<d-table
|
||||||
|
ref="table"
|
||||||
|
:columns="columnsPostition"
|
||||||
|
:rows="rowsPosition"
|
||||||
|
row-key="id"
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
:paging="true"
|
||||||
|
dense
|
||||||
|
:rows-per-page-options="[10, 25, 50, 100]"
|
||||||
|
class="tableTb"
|
||||||
|
selection="single"
|
||||||
|
v-model:selected="selectedPos"
|
||||||
|
>
|
||||||
|
<template v-slot:header-selection="scope">
|
||||||
|
<q-checkbox
|
||||||
|
keep-color
|
||||||
|
color="primary"
|
||||||
|
dense
|
||||||
|
v-model="scope.checkBox"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<template v-slot:header="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-th auto-width />
|
||||||
|
<q-th
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
>
|
||||||
|
<span class="text-weight-medium">{{
|
||||||
|
col.label
|
||||||
|
}}</span>
|
||||||
|
</q-th>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
|
<q-td>
|
||||||
|
<q-checkbox
|
||||||
|
keep-color
|
||||||
|
color="primary"
|
||||||
|
dense
|
||||||
|
v-model="props.selected"
|
||||||
|
/>
|
||||||
|
</q-td>
|
||||||
|
<q-td
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
>
|
||||||
|
<div v-if="col.name == 'no'">
|
||||||
|
{{ props.rowIndex + 1 }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-else-if="col.name === 'posMasterNo'"
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
props.row.isSit
|
||||||
|
? col.value + " " + "(ทับที่)"
|
||||||
|
: col.value
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else>
|
||||||
|
{{ col.value ? col.value : "-" }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</d-table>
|
||||||
|
</div>
|
||||||
|
</q-tab-panel>
|
||||||
|
</q-tab-panels>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-tab-panel>
|
||||||
|
</q-tab-panels>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
|
<q-card-actions align="right" class="bg-white text-teal">
|
||||||
|
<q-btn label="บันทึก" color="secondary" type="submit"
|
||||||
|
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
||||||
|
>
|
||||||
|
</q-card-actions>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
<style scoped>
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
577
src/components/Dialogs/DialogOrgSelectOneStep.vue
Normal file
577
src/components/Dialogs/DialogOrgSelectOneStep.vue
Normal file
|
|
@ -0,0 +1,577 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import DialogHeader from "@/components/DialogHeader.vue";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import { ref, watch, reactive } from "vue";
|
||||||
|
import type { QInput, QTableProps } from "quasar";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
|
||||||
|
import type {
|
||||||
|
OrgTree,
|
||||||
|
DataTree,
|
||||||
|
Positions,
|
||||||
|
DataPositionNo,
|
||||||
|
FormActive,
|
||||||
|
TreeMain,
|
||||||
|
} from "@/interface/request/orgSelect/org";
|
||||||
|
|
||||||
|
const rows = ref<any[]>([]);
|
||||||
|
const filterRef = ref<QInput>();
|
||||||
|
const filterModal = ref<string>("");
|
||||||
|
const props = defineProps({
|
||||||
|
dataRows: {
|
||||||
|
type: Object,
|
||||||
|
require: true,
|
||||||
|
},
|
||||||
|
onSubmit: Function,
|
||||||
|
saveData: Function,
|
||||||
|
});
|
||||||
|
const $q = useQuasar();
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const {
|
||||||
|
dialogConfirm,
|
||||||
|
showLoader,
|
||||||
|
messageError,
|
||||||
|
hideLoader,
|
||||||
|
date2Thai,
|
||||||
|
dialogMessageNotify,
|
||||||
|
} = mixin;
|
||||||
|
|
||||||
|
const modal = defineModel<boolean>("modal", { required: true });
|
||||||
|
const title = defineModel<string>("title", { required: true });
|
||||||
|
const selectedModal = defineModel<any[]>("selectedModal");
|
||||||
|
|
||||||
|
const filter = ref<string>("");
|
||||||
|
const isAll = ref<boolean>(false);
|
||||||
|
const isBlank = ref<boolean>(false);
|
||||||
|
const positionNo = ref<DataPositionNo[]>();
|
||||||
|
const itemTaps = ref<string[]>();
|
||||||
|
const positionId = ref<string>("");
|
||||||
|
const selectedPos = ref<any[]>([]);
|
||||||
|
const seletcId = ref<string>("");
|
||||||
|
const datePos = ref<Date>(new Date());
|
||||||
|
const rowsPosition = ref<Positions[]>([]);
|
||||||
|
const positionData = ref<any>();
|
||||||
|
/** active form */
|
||||||
|
const formActive = reactive<FormActive>({
|
||||||
|
activeId: "",
|
||||||
|
activeName: "",
|
||||||
|
draftId: "",
|
||||||
|
draftName: "",
|
||||||
|
orgPublishDate: null,
|
||||||
|
isPublic: false,
|
||||||
|
});
|
||||||
|
/** node */
|
||||||
|
const nodes = ref<Array<OrgTree>>([]);
|
||||||
|
const lazy = ref(nodes);
|
||||||
|
const expanded = ref<string[]>([]);
|
||||||
|
const nodeLevel = ref<number>(0);
|
||||||
|
const nodeId = ref<string>(""); // id ของ Tree
|
||||||
|
|
||||||
|
const columns = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "no",
|
||||||
|
align: "left",
|
||||||
|
label: "ลำดับ",
|
||||||
|
field: "no",
|
||||||
|
sortable: true,
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "citizenId",
|
||||||
|
align: "left",
|
||||||
|
label: "เลขประจำตัวประชาชน",
|
||||||
|
field: "citizenId",
|
||||||
|
sortable: true,
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "name",
|
||||||
|
align: "left",
|
||||||
|
label: "ชื่อ-นามสกุล",
|
||||||
|
field: "name",
|
||||||
|
sortable: true,
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "position",
|
||||||
|
align: "left",
|
||||||
|
label: "ตำแหน่ง",
|
||||||
|
field: "position",
|
||||||
|
sortable: true,
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const visibleColumns = ref<String[]>(["no", "citizenId", "name", "position"]);
|
||||||
|
|
||||||
|
/** ปิด dialog */
|
||||||
|
function close() {
|
||||||
|
modal.value = false;
|
||||||
|
filter.value = "";
|
||||||
|
isAll.value = false;
|
||||||
|
isBlank.value = false;
|
||||||
|
|
||||||
|
nodes.value = [];
|
||||||
|
expanded.value = [];
|
||||||
|
nodeLevel.value = 0;
|
||||||
|
nodeId.value = "";
|
||||||
|
|
||||||
|
rows.value = [];
|
||||||
|
selectedModal.value = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getDataTable(id: string, level: number = 0) {
|
||||||
|
//new
|
||||||
|
showLoader();
|
||||||
|
http
|
||||||
|
.post(config.API.orgDeceasedProfile, {
|
||||||
|
nodeId: id,
|
||||||
|
node: level,
|
||||||
|
isAll: isAll.value,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result.data;
|
||||||
|
|
||||||
|
rows.value = data;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
//old
|
||||||
|
// showLoader();
|
||||||
|
|
||||||
|
// const body = {
|
||||||
|
// node: level,
|
||||||
|
// nodeId: id,
|
||||||
|
// typeCommand: type.value,
|
||||||
|
// position: posType.value ? posType.value : "",
|
||||||
|
// posLevel: posLevel.value ? posLevel.value : "",
|
||||||
|
// posType: position.value ? position.value : "",
|
||||||
|
// isAll: isAll.value,
|
||||||
|
// isBlank: isBlank.value,
|
||||||
|
// };
|
||||||
|
|
||||||
|
// await http
|
||||||
|
// .post(config.API.orgPosPlacement, body)
|
||||||
|
// .then((res) => {
|
||||||
|
// const dataMain: PositionMain[] = [];
|
||||||
|
// posMasterMain.value = res.data.result.data;
|
||||||
|
|
||||||
|
// res.data.result.data.forEach((e: PositionNo) => {
|
||||||
|
// const p = e.positions;
|
||||||
|
// if (p.length !== 0) {
|
||||||
|
// const a = p.find((el: Positions) => el.positionIsSelected === true);
|
||||||
|
// const { id, ...rest } = a ? a : p[0];
|
||||||
|
// const data: any = { ...e, ...rest };
|
||||||
|
// dataMain.push(data);
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// const listPosNo: DataPositionNo[] = dataMain.map((e: PositionMain) => ({
|
||||||
|
// id: e.id,
|
||||||
|
// isPosition: e.isPosition,
|
||||||
|
// posMasterNo:
|
||||||
|
// e.orgShortname +
|
||||||
|
// (e.posMasterNoPrefix != null ? e.posMasterNoPrefix : "") +
|
||||||
|
// e.posMasterNo +
|
||||||
|
// (e.posMasterNoSuffix != null ? e.posMasterNoSuffix : ""),
|
||||||
|
// positionName: e.positionName,
|
||||||
|
// posTypeName: e.posTypeName,
|
||||||
|
// posLevelName: e.posLevelName,
|
||||||
|
// positionIsSelected: e.positionIsSelected
|
||||||
|
// ? e.fullNameCurrentHolder
|
||||||
|
// : "-",
|
||||||
|
// isSit: e.isSit,
|
||||||
|
// positions: e.positions,
|
||||||
|
// node: e.node,
|
||||||
|
// nodeId: e.nodeId,
|
||||||
|
// }));
|
||||||
|
|
||||||
|
// positionNo.value = listPosNo;
|
||||||
|
// positionData.value = listPosNo;
|
||||||
|
// })
|
||||||
|
// .catch((err) => {
|
||||||
|
// messageError($q, err);
|
||||||
|
// })
|
||||||
|
// .finally(() => {
|
||||||
|
// setTimeout(() => {
|
||||||
|
// hideLoader();
|
||||||
|
// }, 1000);
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* funtion เลือกข้อมูล Tree
|
||||||
|
* @param data ข่อมูล Tree
|
||||||
|
*/
|
||||||
|
function updateSelected(data: DataTree) {
|
||||||
|
positionId.value = "";
|
||||||
|
seletcId.value = "";
|
||||||
|
selectedPos.value = [];
|
||||||
|
datePos.value = new Date();
|
||||||
|
|
||||||
|
nodeId.value = data.orgTreeId ? data.orgTreeId : "";
|
||||||
|
nodeLevel.value = data.orgLevel;
|
||||||
|
getDataTable(data.orgTreeId, data.orgLevel);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ดึงข้อมูล active */
|
||||||
|
async function getActive() {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.activeOrganization)
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
|
||||||
|
formActive.activeId = data.activeId;
|
||||||
|
formActive.activeName = data.activeName;
|
||||||
|
formActive.draftId = data.draftId;
|
||||||
|
formActive.draftName = data.draftName;
|
||||||
|
formActive.orgPublishDate = data.orgPublishDate;
|
||||||
|
formActive.isPublic = data.isPublic;
|
||||||
|
|
||||||
|
getTreeData(data.activeId);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ดึงข้อมูล หน่วยงาน */
|
||||||
|
async function getTreeData(id: string) {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.orgByid(id))
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
nodes.value = data;
|
||||||
|
filterItemsTaps(data);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function filterItemsTaps(data: TreeMain[]) {
|
||||||
|
let orgTreeIds: string[] = [];
|
||||||
|
for (const child of data) {
|
||||||
|
orgTreeIds.push(child.orgTreeId);
|
||||||
|
if (child.children) {
|
||||||
|
orgTreeIds = orgTreeIds.concat(filterItemsTaps(child.children));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
itemTaps.value = orgTreeIds;
|
||||||
|
return orgTreeIds;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function เลือกเลขที่ตำแหน่ง
|
||||||
|
* @param id เลชที่ตำแหน่ง
|
||||||
|
*/
|
||||||
|
async function onClickSelectPos(id: string) {
|
||||||
|
positionData.value = positionNo.value;
|
||||||
|
positionId.value = id;
|
||||||
|
selectedPos.value = [];
|
||||||
|
const position: DataPositionNo = positionData.value.find(
|
||||||
|
(e: DataPositionNo) => e.id === id
|
||||||
|
);
|
||||||
|
|
||||||
|
// หาตำแหน่ง
|
||||||
|
if (position) {
|
||||||
|
rowsPosition.value = position.positions;
|
||||||
|
if (seletcId.value) {
|
||||||
|
selectedPos.value = rowsPosition.value.filter(
|
||||||
|
(e) => e.id === seletcId.value
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function fetch ข้อมูล expanded tree
|
||||||
|
* @param level levelTree
|
||||||
|
* @param id treeId
|
||||||
|
*/
|
||||||
|
async function fetchPosFind(level: number, id: string) {
|
||||||
|
showLoader();
|
||||||
|
const body = {
|
||||||
|
node: level,
|
||||||
|
nodeId: id,
|
||||||
|
};
|
||||||
|
await http
|
||||||
|
.post(config.API.orgPosFind, body)
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
expanded.value = data;
|
||||||
|
nodeId.value = id;
|
||||||
|
positionId.value = props?.dataRows?.posmasterId;
|
||||||
|
seletcId.value = props?.dataRows?.positionId;
|
||||||
|
datePos.value = props?.dataRows?.reportingDateFullDate;
|
||||||
|
|
||||||
|
getDataTable(nodeId.value, level);
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => modal.value,
|
||||||
|
async (n) => {
|
||||||
|
if (n == true) {
|
||||||
|
getActive();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => isAll.value,
|
||||||
|
(value, oldVal) => {
|
||||||
|
if (value !== oldVal) {
|
||||||
|
getDataTable(nodeId.value, nodeLevel.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => isBlank.value,
|
||||||
|
(value, oldVal) => {
|
||||||
|
if (value !== oldVal) {
|
||||||
|
getDataTable(nodeId.value, nodeLevel.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => positionId.value,
|
||||||
|
(n) => {
|
||||||
|
if (n) {
|
||||||
|
onClickSelectPos(n);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
function onSubmit() {
|
||||||
|
if (nodeId.value == "") {
|
||||||
|
dialogMessageNotify($q, "กรุณาเลือกตำแหน่ง");
|
||||||
|
} else {
|
||||||
|
dialogConfirm($q, async () => {
|
||||||
|
props.saveData?.();
|
||||||
|
close();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetFilter() {
|
||||||
|
filter.value = "";
|
||||||
|
filterRef.value!.focus();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<q-dialog v-model="modal" persistent full-width>
|
||||||
|
<q-card class="no-scroll">
|
||||||
|
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||||
|
<DialogHeader :tittle="title" :close="close" />
|
||||||
|
<q-separator />
|
||||||
|
<q-card-section style="max-height: 80vh" class="scroll">
|
||||||
|
<div class="row">
|
||||||
|
<q-card
|
||||||
|
bordered
|
||||||
|
class="col-12 col-sm-3 scroll q-pa-sm"
|
||||||
|
style="height: 75vh"
|
||||||
|
>
|
||||||
|
<q-input dense outlined v-model="filter" label="ค้นหา">
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon
|
||||||
|
v-if="filter !== ''"
|
||||||
|
name="clear"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="filter = ''"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
<q-tree
|
||||||
|
class="q-pa-sm q-gutter-sm"
|
||||||
|
dense
|
||||||
|
:nodes="lazy"
|
||||||
|
node-key="orgTreeId"
|
||||||
|
label-key="orgTreeName"
|
||||||
|
:filter="filter"
|
||||||
|
no-results-label="ไม่พบข้อมูลที่ค้นหา"
|
||||||
|
no-nodes-label="ไม่มีข้อมูล"
|
||||||
|
v-model:expanded="expanded"
|
||||||
|
>
|
||||||
|
<template v-slot:default-header="prop">
|
||||||
|
<q-item
|
||||||
|
@click.stop="updateSelected(prop.node)"
|
||||||
|
clickable
|
||||||
|
:active="nodeId == prop.node.orgTreeId"
|
||||||
|
active-class="my-list-link text-primary text-weight-medium"
|
||||||
|
class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div class="text-weight-medium">
|
||||||
|
{{ prop.node.orgTreeName }}
|
||||||
|
</div>
|
||||||
|
<div class="text-weight-light">
|
||||||
|
{{
|
||||||
|
prop.node.orgCode == null ? null : prop.node.orgCode
|
||||||
|
}}
|
||||||
|
{{
|
||||||
|
prop.node.orgTreeShortName == null
|
||||||
|
? null
|
||||||
|
: prop.node.orgTreeShortName
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-item>
|
||||||
|
</template>
|
||||||
|
</q-tree>
|
||||||
|
</q-card>
|
||||||
|
<q-card bordered class="col-12 col-sm-9 q-pa-sm">
|
||||||
|
<div class="col-12 row q-py-sm items-center q-col-gutter-sm">
|
||||||
|
<q-space />
|
||||||
|
<div class="items-center" style="display: flex">
|
||||||
|
<q-checkbox
|
||||||
|
keep-color
|
||||||
|
v-model="isAll"
|
||||||
|
label="แสดงทั้งหมด"
|
||||||
|
color="primary"
|
||||||
|
>
|
||||||
|
<q-tooltip>แสดงทั้งหมด</q-tooltip>
|
||||||
|
</q-checkbox>
|
||||||
|
<q-input
|
||||||
|
standout
|
||||||
|
dense
|
||||||
|
v-model="filterModal"
|
||||||
|
ref="filterRef"
|
||||||
|
outlined
|
||||||
|
debounce="300"
|
||||||
|
placeholder="ค้นหา"
|
||||||
|
style="max-width: 200px"
|
||||||
|
class="q-ml-sm"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon v-if="filterModal == ''" name="search" />
|
||||||
|
<q-icon
|
||||||
|
v-if="filterModal !== ''"
|
||||||
|
name="clear"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="resetFilter"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
|
||||||
|
<q-select
|
||||||
|
v-model="visibleColumns"
|
||||||
|
:display-value="$q.lang.table.columns"
|
||||||
|
multiple
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
:options="columns"
|
||||||
|
options-dense
|
||||||
|
option-value="name"
|
||||||
|
map-options
|
||||||
|
emit-value
|
||||||
|
style="min-width: 150px"
|
||||||
|
class="gt-xs q-ml-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<d-table
|
||||||
|
:rows="rows"
|
||||||
|
:columns="columns"
|
||||||
|
:visible-columns="visibleColumns"
|
||||||
|
:filter="filterModal"
|
||||||
|
row-key="id"
|
||||||
|
selection="multiple"
|
||||||
|
v-model:selected="selectedModal"
|
||||||
|
:rows-per-page-options="[10, 25, 50, 100]"
|
||||||
|
>
|
||||||
|
<template v-slot:header="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-th auto-width>
|
||||||
|
<q-checkbox
|
||||||
|
keep-color
|
||||||
|
color="primary"
|
||||||
|
dense
|
||||||
|
v-model="props.selected"
|
||||||
|
/>
|
||||||
|
</q-th>
|
||||||
|
<q-th
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
style="color: #000000; font-weight: 500"
|
||||||
|
>
|
||||||
|
<span class="text-weight-medium">{{
|
||||||
|
col.label
|
||||||
|
}}</span>
|
||||||
|
</q-th>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
|
<q-td auto-width>
|
||||||
|
<q-checkbox
|
||||||
|
keep-color
|
||||||
|
color="primary"
|
||||||
|
dense
|
||||||
|
v-model="props.selected"
|
||||||
|
/>
|
||||||
|
</q-td>
|
||||||
|
<q-td
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
>
|
||||||
|
<div v-if="col.name == 'no'">
|
||||||
|
{{ props.rowIndex + 1 }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else>
|
||||||
|
{{ col.value }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</d-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
|
<q-card-actions align="right" class="bg-white text-teal">
|
||||||
|
<q-btn label="บันทึก" color="secondary" type="submit"
|
||||||
|
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
||||||
|
>
|
||||||
|
</q-card-actions>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
<style scoped>
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
39
src/components/Dialogs/Information.vue
Normal file
39
src/components/Dialogs/Information.vue
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import DialogHeader from "@/components/DialogHeader.vue";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
modal: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
desc: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
clickClose: {
|
||||||
|
type: Function
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<q-dialog v-model="props.modal" persistent>
|
||||||
|
<q-card style="width: 35vw; max-width: 35vw">
|
||||||
|
<q-form ref="myForm">
|
||||||
|
<DialogHeader :tittle="props.title" :close="clickClose" />
|
||||||
|
<q-separator />
|
||||||
|
<q-card-section class="q-pa-md bg-grey-1">
|
||||||
|
<div class="row col-12">
|
||||||
|
|
||||||
|
{{ props.desc }}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
406
src/components/Dialogs/PopupPersonal.vue
Normal file
406
src/components/Dialogs/PopupPersonal.vue
Normal file
|
|
@ -0,0 +1,406 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, watch } from "vue";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
|
||||||
|
/** importType*/
|
||||||
|
import type { PersonalImformation } from "@/components/information/interface/response/Information";
|
||||||
|
import type { Goverment } from "@/components/information/interface/response/Government";
|
||||||
|
import type { Avatar } from "@/components/information/interface/response/avatar";
|
||||||
|
|
||||||
|
/** importStore*/
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
||||||
|
/** use*/
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const $q = useQuasar();
|
||||||
|
|
||||||
|
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
|
||||||
|
|
||||||
|
/** props*/
|
||||||
|
const props = defineProps({
|
||||||
|
id: {
|
||||||
|
type: String,
|
||||||
|
requier: true,
|
||||||
|
},
|
||||||
|
modal: {
|
||||||
|
type: Boolean,
|
||||||
|
requier: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
/** emit*/
|
||||||
|
const emit = defineEmits(["update:modal"]);
|
||||||
|
|
||||||
|
/** interface*/
|
||||||
|
interface StatusLoad {
|
||||||
|
val: boolean;
|
||||||
|
val2: boolean;
|
||||||
|
val3: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ตัวแปร*/
|
||||||
|
const modal = ref<boolean>(false);
|
||||||
|
const statusLoad = ref<StatusLoad>({ val: false, val2: false, val3: false }); // เช็คสถานะการโหลด
|
||||||
|
const avatar = reactive<Avatar>({
|
||||||
|
avatar: "",
|
||||||
|
fullname: "",
|
||||||
|
position: "",
|
||||||
|
});
|
||||||
|
const imformation = reactive<PersonalImformation>({
|
||||||
|
prefix: "",
|
||||||
|
citizenId: "",
|
||||||
|
firstName: "",
|
||||||
|
lastName: "",
|
||||||
|
birthDate: "",
|
||||||
|
age: "",
|
||||||
|
gender: "",
|
||||||
|
});
|
||||||
|
const goverment = reactive<Goverment>({
|
||||||
|
oc: "",
|
||||||
|
posNo: "",
|
||||||
|
position: "",
|
||||||
|
positionPathSide: "",
|
||||||
|
positionLine: "",
|
||||||
|
positionType: "",
|
||||||
|
positionLevel: "",
|
||||||
|
positionExecutive: "",
|
||||||
|
positionExecutiveSide: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function เรียกข้อมูลรูปภาพ
|
||||||
|
* @param id profileID
|
||||||
|
*/
|
||||||
|
async function fetchAvatar(id: string) {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.profileAvatarId(id))
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
avatar.avatar = data.avatar;
|
||||||
|
avatar.fullname = data.fullname;
|
||||||
|
avatar.position = data.position ?? "-";
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
statusLoad.value.val = true;
|
||||||
|
loaderFunction();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function เรียกข้อมูลส่วนตัว
|
||||||
|
* @param id profileID
|
||||||
|
*/
|
||||||
|
async function fetchInformation(id: string) {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.profileInforId(id))
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
imformation.prefix = data.prefix;
|
||||||
|
imformation.citizenId = data.citizenId;
|
||||||
|
imformation.firstName = data.firstName;
|
||||||
|
imformation.lastName = data.lastName;
|
||||||
|
imformation.birthDate = data.birthDate ? date2Thai(data.birthDate) : "";
|
||||||
|
imformation.age = data.age;
|
||||||
|
imformation.gender = data.gender;
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
statusLoad.value.val2 = true;
|
||||||
|
loaderFunction();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function เรียกข้อมูลข้อมูลราชการ
|
||||||
|
* @param id profileID
|
||||||
|
*/
|
||||||
|
async function fetchProfileGov(id: string) {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.profileGovId(id))
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
goverment.oc = data.oc ?? "-";
|
||||||
|
goverment.posNo = data.posNo ?? "-";
|
||||||
|
goverment.position = data.position ?? "-";
|
||||||
|
goverment.positionPathSide = data.positionPathSide ?? "-";
|
||||||
|
goverment.positionLine = data.positionLine ?? "-";
|
||||||
|
goverment.positionType = data.positionType ?? "-";
|
||||||
|
goverment.positionLevel = data.positionLevel ?? "-";
|
||||||
|
goverment.positionExecutive = data.positionExecutive ?? "-";
|
||||||
|
goverment.positionExecutiveSide = data.positionExecutiveSide ?? "-";
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
statusLoad.value.val3 = true;
|
||||||
|
loaderFunction();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** functoion เช็คการโหลดของข้อมูล*/
|
||||||
|
function loaderFunction() {
|
||||||
|
const allTrue = Object.values(statusLoad.value).every((val) => val);
|
||||||
|
allTrue && hideLoader();
|
||||||
|
}
|
||||||
|
|
||||||
|
function redirecToRegistry() {
|
||||||
|
window.open(`/registry/${props.id}`, "_blank");
|
||||||
|
modal.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.modal,
|
||||||
|
async () => {
|
||||||
|
modal.value = props.modal ? props.modal : false;
|
||||||
|
modal.value &&
|
||||||
|
props.id &&
|
||||||
|
(await fetchAvatar(props.id),
|
||||||
|
await fetchInformation(props.id),
|
||||||
|
await fetchProfileGov(props.id));
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(modal, (newValue) => {
|
||||||
|
if (!newValue) {
|
||||||
|
emit("update:modal", false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<q-dialog v-model="modal" position="right" :maximized="true">
|
||||||
|
<q-card style="width: 420px; overflow: visible">
|
||||||
|
<q-toolbar>
|
||||||
|
<q-toolbar-title class="text-subtitle1 text-bold"
|
||||||
|
>ทะเบียนประวัติ</q-toolbar-title
|
||||||
|
>
|
||||||
|
<q-btn
|
||||||
|
icon="close"
|
||||||
|
unelevated
|
||||||
|
round
|
||||||
|
dense
|
||||||
|
@click="emit('update:modal', false)"
|
||||||
|
style="color: red; background-color: #ffdede"
|
||||||
|
/>
|
||||||
|
</q-toolbar>
|
||||||
|
<!-- <q-card-section>
|
||||||
|
<div class="text-bold text-h6 text-center">ข้อมูลทะเบียนประวัติ</div>
|
||||||
|
<q-space />
|
||||||
|
|
||||||
|
</q-card-section> -->
|
||||||
|
|
||||||
|
<q-card-section class="col q-pt-none bg-grey-12">
|
||||||
|
<div class="q-gutter-md">
|
||||||
|
<q-card bordered class="text-center bg-grey-12">
|
||||||
|
<div>
|
||||||
|
<q-avatar size="120px" color="grey-4">
|
||||||
|
<img
|
||||||
|
v-if="avatar.avatar"
|
||||||
|
:src="avatar.avatar"
|
||||||
|
class="bg-grey-3"
|
||||||
|
style="object-fit: cover"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
v-else
|
||||||
|
src="@/assets/avatar_user.jpg"
|
||||||
|
class="bg-grey-3"
|
||||||
|
style="object-fit: cover"
|
||||||
|
/>
|
||||||
|
</q-avatar>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="q-mt-md text-subtitle2 text-bold"
|
||||||
|
style="font-size: 18px"
|
||||||
|
>
|
||||||
|
{{ avatar.fullname }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="avatar.position != '-'"
|
||||||
|
class="q-mb-xs text-center text-grey"
|
||||||
|
>
|
||||||
|
{{ avatar.position }}
|
||||||
|
</div>
|
||||||
|
<div class="q-mt-md">
|
||||||
|
<q-btn
|
||||||
|
class="bg-white"
|
||||||
|
outline
|
||||||
|
rounded
|
||||||
|
label="ดูรายละเอียดเพิ่มเติมทั้งหมด"
|
||||||
|
color="secondary"
|
||||||
|
@click.prevent="redirecToRegistry"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
|
||||||
|
<q-scroll-area style="height: 65vh; max-width: 100%">
|
||||||
|
<div class="q-gutter-md q-pa-sm">
|
||||||
|
<q-card bordered style="border: 1px solid #d6dee1">
|
||||||
|
<div class="q-pa-md">
|
||||||
|
<div class="text-weight-bold row items-center">
|
||||||
|
<q-icon name="mdi-account" color="grey-7" />
|
||||||
|
<span class="q-ml-md">ข้อมูลส่วนตัว </span>
|
||||||
|
</div>
|
||||||
|
<div class="row q-pa-sm">
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="imformation.citizenId"
|
||||||
|
label="เลขประจำตัวประชาชน"
|
||||||
|
></q-input>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="imformation.prefix"
|
||||||
|
label="คำนำหน้าชื่อ"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="imformation.firstName"
|
||||||
|
label="ชื่่อ"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="imformation.lastName"
|
||||||
|
label="นามสกุล"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="imformation.birthDate"
|
||||||
|
label="วัน/เดือน/ปีเกิด"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="imformation.gender"
|
||||||
|
label="เพศ"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="imformation.age"
|
||||||
|
label="อายุ"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
|
||||||
|
<q-card bordered style="border: 1px solid #d6dee1">
|
||||||
|
<div class="q-pa-md">
|
||||||
|
<div class="text-weight-bold row items-center">
|
||||||
|
<q-icon name="mdi-account-tie" color="grey-7" />
|
||||||
|
<span class="q-ml-md">ข้อมูลราชการ </span>
|
||||||
|
</div>
|
||||||
|
<div class="row q-pa-sm">
|
||||||
|
<div class="col-xs-12 col-md-12">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="goverment.oc === '' ? '-' : goverment.oc"
|
||||||
|
label="สังกัด"
|
||||||
|
autogrow
|
||||||
|
></q-input>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="goverment.posNo"
|
||||||
|
label="ตำแหน่งเลขที่"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="goverment.position"
|
||||||
|
label="ตำแหน่ง"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="goverment.positionPathSide"
|
||||||
|
label="ด้าน/สาขา"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="goverment.positionLine"
|
||||||
|
label="สายงาน"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="goverment.positionType"
|
||||||
|
label="ประเภทตำแหน่ง"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="goverment.positionLevel"
|
||||||
|
label="ระดับตำแหน่ง"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="goverment.positionExecutive"
|
||||||
|
label="ตำแหน่งทางการบริหาร"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="goverment.positionExecutiveSide"
|
||||||
|
label="ด้านตำแหน่งทางการบริหาร"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</q-scroll-area>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
420
src/components/Dialogs/PopupPersonalNew.vue
Normal file
420
src/components/Dialogs/PopupPersonalNew.vue
Normal file
|
|
@ -0,0 +1,420 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, watch, onMounted } from "vue";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
import { useRouter, useRoute } from "vue-router";
|
||||||
|
|
||||||
|
/** importType*/
|
||||||
|
import type { PersonalImformation } from "@/components/information/interface/response/Information";
|
||||||
|
import type { Goverment } from "@/components/information/interface/response/Government";
|
||||||
|
import type { Avatar } from "@/components/information/interface/response/avatar";
|
||||||
|
|
||||||
|
/** importStore*/
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
||||||
|
/** use*/
|
||||||
|
const route = useRoute();
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const router = useRouter();
|
||||||
|
const $q = useQuasar();
|
||||||
|
const retireDate = ref<Date>();
|
||||||
|
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
|
||||||
|
const empType = ref<string>(
|
||||||
|
route.name !== "appoint-employee-detail" ? "" : "-employee"
|
||||||
|
);
|
||||||
|
/** props*/
|
||||||
|
const props = defineProps({
|
||||||
|
id: {
|
||||||
|
type: String,
|
||||||
|
requier: true,
|
||||||
|
},
|
||||||
|
modal: {
|
||||||
|
type: Boolean,
|
||||||
|
requier: true,
|
||||||
|
},
|
||||||
|
type: { type: String, default: "" },
|
||||||
|
});
|
||||||
|
|
||||||
|
/** emit*/
|
||||||
|
const emit = defineEmits(["update:modal"]);
|
||||||
|
|
||||||
|
/** ตัวแปร*/
|
||||||
|
const modal = ref<boolean>(false);
|
||||||
|
const avatar = reactive<Avatar>({
|
||||||
|
avatar: "",
|
||||||
|
fullname: "",
|
||||||
|
position: "",
|
||||||
|
});
|
||||||
|
const imformation = reactive<PersonalImformation>({
|
||||||
|
prefix: "",
|
||||||
|
citizenId: "",
|
||||||
|
firstName: "",
|
||||||
|
lastName: "",
|
||||||
|
birthDate: "",
|
||||||
|
age: "",
|
||||||
|
gender: "",
|
||||||
|
});
|
||||||
|
const goverment = reactive<Goverment>({
|
||||||
|
oc: "",
|
||||||
|
posNo: "",
|
||||||
|
position: "",
|
||||||
|
positionPathSide: "",
|
||||||
|
positionLine: "",
|
||||||
|
positionType: "",
|
||||||
|
positionLevel: "",
|
||||||
|
positionExecutive: "",
|
||||||
|
positionExecutiveSide: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
function calculateAge(birthDate: Date | null) {
|
||||||
|
if (!birthDate) return null;
|
||||||
|
const birthDateTimeStamp = new Date(birthDate).getTime();
|
||||||
|
const now = new Date();
|
||||||
|
const diff = now.getTime() - birthDateTimeStamp;
|
||||||
|
|
||||||
|
const ageDate = new Date(diff);
|
||||||
|
const years = ageDate.getUTCFullYear() - 1970;
|
||||||
|
const months = ageDate.getUTCMonth();
|
||||||
|
const days = ageDate.getUTCDate() - 1;
|
||||||
|
const retire = new Date(birthDate);
|
||||||
|
retire.setFullYear(retire.getFullYear() + 60);
|
||||||
|
retireDate.value = retire;
|
||||||
|
|
||||||
|
if (years > 60) {
|
||||||
|
return "อายุเกิน 60 ปี";
|
||||||
|
}
|
||||||
|
|
||||||
|
return `${years} ปี ${months} เดือน ${days} วัน`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function เรียกข้อมูลส่วนตัว
|
||||||
|
* @param id profileID
|
||||||
|
*/
|
||||||
|
async function fetchInformation(id: string) {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.orgProfileById(id, empType.value))
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
imformation.prefix = data.prefix ? data.prefix : "-";
|
||||||
|
imformation.citizenId = data.citizenId ? data.citizenId : "-";
|
||||||
|
imformation.firstName = data.firstName ? data.firstName : "-";
|
||||||
|
imformation.lastName = data.lastName ? data.lastName : "-";
|
||||||
|
imformation.birthDate = data.birthDate ? date2Thai(data.birthDate) : "-";
|
||||||
|
imformation.age = data.birthDate ? calculateAge(data.birthDate) : "-";
|
||||||
|
imformation.gender = data.gender ?? "-";
|
||||||
|
|
||||||
|
avatar.fullname = `${data.prefix}${data.firstName} ${data.lastName}`;
|
||||||
|
|
||||||
|
avatar.position = data.position ? data.position : "-";
|
||||||
|
if (data.avatarName) {
|
||||||
|
fetchProfile(data.id as string, data.avatarName);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function เรียกข้อมูลข้อมูลราชการ
|
||||||
|
* @param id profileID
|
||||||
|
*/
|
||||||
|
async function fetchProfileGov(id: string) {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.profileNewGovernmentById(id, empType.value))
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
goverment.oc = data.org !== "" ? data.org : "-";
|
||||||
|
goverment.posNo = data.posMasterNo !== "" ? data.posMasterNo : "-";
|
||||||
|
goverment.position = data.position !== "" ? data.position : "-";
|
||||||
|
goverment.positionPathSide =
|
||||||
|
data.positionArea !== "" ? data.positionArea : "-";
|
||||||
|
goverment.positionLine =
|
||||||
|
data.positionField !== "" ? data.positionField : "-";
|
||||||
|
goverment.positionType = data.posType !== "" ? data.posType : "-";
|
||||||
|
goverment.positionLevel = data.posLevel !== "" ? data.posLevel : "-";
|
||||||
|
goverment.positionExecutive =
|
||||||
|
data.posExecutive !== null ? data.posExecutive : "-";
|
||||||
|
goverment.positionExecutiveSide =
|
||||||
|
data.positionExecutiveField !== "" ? data.positionExecutiveField : "-";
|
||||||
|
})
|
||||||
|
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function redirecToRegistry() {
|
||||||
|
router.push(`/registry-new${empType.value}/${props.id}`);
|
||||||
|
modal.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.modal,
|
||||||
|
async () => {
|
||||||
|
modal.value = props.modal ? props.modal : false;
|
||||||
|
if (modal.value) {
|
||||||
|
if (props.id) {
|
||||||
|
fetchInformation(props.id);
|
||||||
|
fetchProfileGov(props.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(modal, (newValue) => {
|
||||||
|
if (!newValue) {
|
||||||
|
emit("update:modal", false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
async function fetchProfile(id: string, avatarName: string) {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, avatarName))
|
||||||
|
.then(async (res) => {
|
||||||
|
avatar.avatar = res.data.downloadUrl;
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<q-dialog v-model="modal" position="right" :maximized="true">
|
||||||
|
<q-card style="width: 420px; overflow: visible">
|
||||||
|
<q-toolbar>
|
||||||
|
<q-toolbar-title class="text-subtitle1 text-bold"
|
||||||
|
>ทะเบียนประวัติ</q-toolbar-title
|
||||||
|
>
|
||||||
|
<q-btn
|
||||||
|
icon="close"
|
||||||
|
unelevated
|
||||||
|
round
|
||||||
|
dense
|
||||||
|
@click="emit('update:modal', false)"
|
||||||
|
style="color: red; background-color: #ffdede"
|
||||||
|
/>
|
||||||
|
</q-toolbar>
|
||||||
|
|
||||||
|
<q-card-section class="col q-pt-none bg-grey-12">
|
||||||
|
<div class="q-gutter-md">
|
||||||
|
<q-card bordered class="text-center bg-grey-12">
|
||||||
|
<div>
|
||||||
|
<q-avatar size="120px" color="grey-4">
|
||||||
|
<img
|
||||||
|
v-if="avatar.avatar"
|
||||||
|
:src="avatar.avatar"
|
||||||
|
class="bg-grey-3"
|
||||||
|
style="object-fit: cover"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
v-else
|
||||||
|
src="@/assets/avatar_user.jpg"
|
||||||
|
class="bg-grey-3"
|
||||||
|
style="object-fit: cover"
|
||||||
|
/>
|
||||||
|
</q-avatar>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="q-mt-md text-subtitle2 text-bold"
|
||||||
|
style="font-size: 18px"
|
||||||
|
>
|
||||||
|
{{ avatar.fullname }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="avatar.position != '-'"
|
||||||
|
class="q-mb-xs text-center text-grey"
|
||||||
|
>
|
||||||
|
{{ avatar.position }}
|
||||||
|
</div>
|
||||||
|
<div class="q-mt-md">
|
||||||
|
<q-btn
|
||||||
|
class="bg-white"
|
||||||
|
outline
|
||||||
|
rounded
|
||||||
|
label="ดูรายละเอียดเพิ่มเติมทั้งหมด"
|
||||||
|
color="secondary"
|
||||||
|
@click.prevent="redirecToRegistry"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
|
||||||
|
<q-scroll-area style="height: 65vh; max-width: 100%">
|
||||||
|
<div class="q-gutter-md q-pa-sm">
|
||||||
|
<q-card bordered style="border: 1px solid #d6dee1">
|
||||||
|
<div class="q-pa-md">
|
||||||
|
<div class="text-weight-bold row items-center">
|
||||||
|
<q-icon name="mdi-account" color="grey-7" />
|
||||||
|
<span class="q-ml-md">ข้อมูลส่วนตัว </span>
|
||||||
|
</div>
|
||||||
|
<div class="row q-pa-sm">
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="imformation.citizenId"
|
||||||
|
label="เลขประจำตัวประชาชน"
|
||||||
|
></q-input>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="imformation.prefix"
|
||||||
|
label="คำนำหน้าชื่อ"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="imformation.firstName"
|
||||||
|
label="ชื่่อ"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="imformation.lastName"
|
||||||
|
label="นามสกุล"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="imformation.birthDate"
|
||||||
|
label="วัน/เดือน/ปีเกิด"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="imformation.gender"
|
||||||
|
label="เพศ"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="imformation.age"
|
||||||
|
label="อายุ"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
|
||||||
|
<q-card bordered style="border: 1px solid #d6dee1">
|
||||||
|
<div class="q-pa-md">
|
||||||
|
<div class="text-weight-bold row items-center">
|
||||||
|
<q-icon name="mdi-account-tie" color="grey-7" />
|
||||||
|
<span class="q-ml-md">ข้อมูลราชการ </span>
|
||||||
|
</div>
|
||||||
|
<div class="row q-pa-sm">
|
||||||
|
<div class="col-xs-12 col-md-12">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="goverment.oc === '' ? '-' : goverment.oc"
|
||||||
|
label="สังกัด"
|
||||||
|
autogrow
|
||||||
|
></q-input>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="goverment.posNo"
|
||||||
|
label="ตำแหน่งเลขที่"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="goverment.position"
|
||||||
|
label="ตำแหน่ง"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="goverment.positionPathSide"
|
||||||
|
label="ด้าน/สาขา"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="goverment.positionLine"
|
||||||
|
label="สายงาน"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="goverment.positionType"
|
||||||
|
label="ประเภทตำแหน่ง"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="goverment.positionLevel"
|
||||||
|
label="ระดับตำแหน่ง"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="col-xs-6 col-md-6"
|
||||||
|
v-if="props.type !== 'employee'"
|
||||||
|
>
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="goverment.positionExecutive"
|
||||||
|
label="ตำแหน่งทางการบริหาร"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="col-xs-6 col-md-6"
|
||||||
|
v-if="props.type !== 'employee'"
|
||||||
|
>
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:model-value="goverment.positionExecutiveSide"
|
||||||
|
label="ด้านตำแหน่งทางการบริหาร"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</q-scroll-area>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
96
src/components/Dialogs/PopupReason.vue
Normal file
96
src/components/Dialogs/PopupReason.vue
Normal file
|
|
@ -0,0 +1,96 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, watch } from "vue";
|
||||||
|
import DialogHeader from "@/components/DialogHeader.vue";
|
||||||
|
|
||||||
|
const reason = ref<string | undefined>("");
|
||||||
|
const modal = defineModel<boolean>("modal", { required: true });
|
||||||
|
const props = defineProps({
|
||||||
|
// modal: {
|
||||||
|
// type: Boolean,
|
||||||
|
// default: false,
|
||||||
|
// },
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
// clickClose: {
|
||||||
|
// type: Function,
|
||||||
|
// default: () => {},
|
||||||
|
// },
|
||||||
|
savaForm: {
|
||||||
|
type: Function,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
textReport: {
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
watch(props, () => {
|
||||||
|
if (modal.value === true && props.textReport == "") {
|
||||||
|
reason.value = "";
|
||||||
|
} else {
|
||||||
|
reason.value = props.textReport;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const myForm = ref<any>();
|
||||||
|
const submit = () => {
|
||||||
|
myForm.value.validate().then((result: boolean) => {
|
||||||
|
if (result) {
|
||||||
|
props.savaForm(reason.value);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
function closeModal() {
|
||||||
|
modal.value = false
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<q-dialog v-model="modal" persistent>
|
||||||
|
<q-card style="width: 40vw; max-width: 40vw">
|
||||||
|
<q-form ref="myForm">
|
||||||
|
<DialogHeader :tittle="props.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">
|
||||||
|
<div class="col-12 row q-py-sm items-center q-col-gutter-sm">
|
||||||
|
<q-input
|
||||||
|
type="textarea"
|
||||||
|
class="full-width inputgreen cursor-pointer"
|
||||||
|
hide-bottom-space
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
:rules="[(val) => !!val || `กรุณากรอก${label}`]"
|
||||||
|
v-model="reason"
|
||||||
|
:label="`${label}`"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
<q-card-actions align="right">
|
||||||
|
<q-btn
|
||||||
|
dense
|
||||||
|
unelevated
|
||||||
|
label="บันทึก"
|
||||||
|
color="public"
|
||||||
|
@click="submit"
|
||||||
|
class="q-px-md"
|
||||||
|
>
|
||||||
|
<!-- icon="mdi-content-save-outline" -->
|
||||||
|
<q-tooltip>บันทึก</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-card-actions>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
111
src/components/Dialogs/PopupReplyInbox.vue
Normal file
111
src/components/Dialogs/PopupReplyInbox.vue
Normal file
|
|
@ -0,0 +1,111 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, watch } from "vue";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
|
||||||
|
import DialogHeader from "@/components/DialogHeader.vue";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
||||||
|
const $q = useQuasar();
|
||||||
|
|
||||||
|
const { showLoader, hideLoader, success, messageError } = mixin;
|
||||||
|
|
||||||
|
const myForm = ref<any>();
|
||||||
|
const props = defineProps({
|
||||||
|
modal: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
idInbox: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
clickClose: {
|
||||||
|
type: Function,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const subject = ref<string>("");
|
||||||
|
const body = ref<string>("");
|
||||||
|
async function submit() {
|
||||||
|
myForm.value.validate().then(async (result: boolean) => {
|
||||||
|
if (result) {
|
||||||
|
// props.savaForm(reason.value);
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.put(config.API.replyMessage(props.idInbox), {
|
||||||
|
subject: subject.value,
|
||||||
|
body: body.value,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
props.clickClose()
|
||||||
|
success($q, "ส่งข้อความสำเร็จ");
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<q-dialog v-model="props.modal" persistent>
|
||||||
|
<q-card style="width: 40vw; max-width: 40vw">
|
||||||
|
<q-form ref="myForm">
|
||||||
|
<DialogHeader tittle="ส่งข้อความ" :close="clickClose" />
|
||||||
|
<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">
|
||||||
|
<div class="col-12 row q-py-sm items-center q-col-gutter-sm">
|
||||||
|
<q-input
|
||||||
|
class="full-width inputgreen cursor-pointer"
|
||||||
|
hide-bottom-space
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
:rules="[(val) => !!val || 'กรุณากรอกหัวข้อ']"
|
||||||
|
v-model="subject"
|
||||||
|
label="หัวข้อ"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
type="textarea"
|
||||||
|
class="full-width inputgreen cursor-pointer"
|
||||||
|
hide-bottom-space
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
:rules="[(val) => !!val || 'กรุณากรอกข้อความ']"
|
||||||
|
v-model="body"
|
||||||
|
label="ข้อความ"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
<q-card-actions align="right">
|
||||||
|
<q-btn
|
||||||
|
dense
|
||||||
|
unelevated
|
||||||
|
label="ส่งข้อความ"
|
||||||
|
color="public"
|
||||||
|
@click="submit"
|
||||||
|
class="q-px-md"
|
||||||
|
>
|
||||||
|
<!-- icon="mdi-content-save-outline" -->
|
||||||
|
<q-tooltip>บันทึก</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-card-actions>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
16
src/components/DropDownNoResultMsg.vue
Normal file
16
src/components/DropDownNoResultMsg.vue
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
<!-- =============================== -->
|
||||||
|
<!-- Component Show No Result Found Message -->
|
||||||
|
<!-- When filtering Drodown(q-select) -->
|
||||||
|
<!-- ข้อความที่จะแสดงเวลาค้นหาข้อมูลในดรอบดาวน์ไม่เจอ -->
|
||||||
|
<!-- ใช้หลายที่ จะได้จัด css ที่เดียว -->
|
||||||
|
<!-- =============================== -->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<q-item>
|
||||||
|
<q-item-section class="text-black"> ไม่พบข้อมูลที่ค้นหา </q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts"></script>
|
||||||
|
|
||||||
|
<style lang="scss"></style>
|
||||||
24
src/components/FullLoader.vue
Normal file
24
src/components/FullLoader.vue
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
<!-- แสดง ui การโหลด -->
|
||||||
|
<template>
|
||||||
|
<q-inner-loading :showing="loaderVisibility" class="loader">
|
||||||
|
<q-spinner-cube size="80px" color="primary" />
|
||||||
|
</q-inner-loading>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { watch, ref } from "vue";
|
||||||
|
const props = defineProps({
|
||||||
|
visibility: Boolean,
|
||||||
|
});
|
||||||
|
|
||||||
|
const loaderVisibility = ref<boolean>(props.visibility);
|
||||||
|
|
||||||
|
watch(props, (count, prevCount) => {
|
||||||
|
loaderVisibility.value = props.visibility;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="sass">
|
||||||
|
.loader
|
||||||
|
z-index: 1000
|
||||||
|
</style>
|
||||||
213
src/components/PopupCheckFeatures.vue
Normal file
213
src/components/PopupCheckFeatures.vue
Normal file
|
|
@ -0,0 +1,213 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import DialogHeader from "@/components/DialogHeader.vue";
|
||||||
|
import { ref, useAttrs } from "vue";
|
||||||
|
import type { QTableProps } from "quasar";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
modal: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: "ตรวจสอบคุณสมบัติ",
|
||||||
|
},
|
||||||
|
desc: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
clickClose: {
|
||||||
|
type: Function,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: "Expert",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const attrs = ref<any>(useAttrs());
|
||||||
|
const currentPage = ref<number>(1);
|
||||||
|
const pageSize = ref<number>(10);
|
||||||
|
const maxPage = ref<number>(1);
|
||||||
|
const page = ref<number>(1);
|
||||||
|
const filter = ref<string>("");
|
||||||
|
const rowsPerPage = ref<number>(10);
|
||||||
|
|
||||||
|
/**
|
||||||
|
*pagination ของตาราง
|
||||||
|
*/
|
||||||
|
const pagination = ref({
|
||||||
|
descending: false,
|
||||||
|
page: page.value,
|
||||||
|
rowsPerPage: rowsPerPage.value,
|
||||||
|
});
|
||||||
|
|
||||||
|
const rows = ref<any[]>([]);
|
||||||
|
const columns = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "degree",
|
||||||
|
align: "left",
|
||||||
|
label: "คุณวุฒิ",
|
||||||
|
sortable: false,
|
||||||
|
field: "degree",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "level",
|
||||||
|
align: "center",
|
||||||
|
label: "ระดับ",
|
||||||
|
sortable: true,
|
||||||
|
field: "level",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Expert",
|
||||||
|
align: "center",
|
||||||
|
label: "ชำนาญการ",
|
||||||
|
sortable: false,
|
||||||
|
field: "Expert",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const visibleColumns = ref<String[]>(["degree", "level", "Expert"]);
|
||||||
|
const columnsSpecial = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "degree",
|
||||||
|
align: "left",
|
||||||
|
label: "คุณวุฒิ",
|
||||||
|
sortable: false,
|
||||||
|
field: "degree",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "level",
|
||||||
|
align: "center",
|
||||||
|
label: "ระดับ",
|
||||||
|
sortable: true,
|
||||||
|
field: "level",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Special",
|
||||||
|
align: "center",
|
||||||
|
label: "ชำนาญการพิเศษ",
|
||||||
|
sortable: false,
|
||||||
|
field: "Special",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const visibleColumnsSpecial = ref<String[]>(["degree", "level", "Special"]);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<q-dialog v-model="props.modal" persistent>
|
||||||
|
<q-card style="width: 35vw; max-width: 35vw" v-if="props.type === 'EXPERT'">
|
||||||
|
<DialogHeader :tittle="props.title" :close="clickClose" />
|
||||||
|
<q-separator />
|
||||||
|
<q-card-section class="q-pa-sm bg-grey-1">
|
||||||
|
<d-table
|
||||||
|
ref="table"
|
||||||
|
:columns="columns"
|
||||||
|
:rows="rows"
|
||||||
|
:filter="filter"
|
||||||
|
row-key="interrogated"
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
:paging="true"
|
||||||
|
dense
|
||||||
|
class="custom-header-table"
|
||||||
|
v-bind="attrs"
|
||||||
|
:visible-columns="visibleColumns"
|
||||||
|
v-model:pagination="pagination"
|
||||||
|
>
|
||||||
|
<template v-slot:header="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-th auto-width></q-th>
|
||||||
|
<q-th
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
style="color: #000000; font-weight: 500"
|
||||||
|
>
|
||||||
|
<span class="text-weight-medium">{{ col.label }}</span>
|
||||||
|
</q-th>
|
||||||
|
<!-- <q-th auto-width></q-th> -->
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
|
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
|
<div v-if="col.name == 'no'">
|
||||||
|
{{ props.rowIndex + 1 }}
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
{{ col.value }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</d-table>
|
||||||
|
</q-card-section>
|
||||||
|
</q-card>
|
||||||
|
<q-card style="width: 35vw; max-width: 35vw" v-else>
|
||||||
|
<DialogHeader :tittle="props.title" :close="clickClose" />
|
||||||
|
<q-separator />
|
||||||
|
<q-card-section class="q-pa-sm bg-grey-1">
|
||||||
|
<d-table
|
||||||
|
ref="table"
|
||||||
|
:columns="columnsSpecial"
|
||||||
|
:rows="rows"
|
||||||
|
:filter="filter"
|
||||||
|
row-key="interrogated"
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
:paging="true"
|
||||||
|
dense
|
||||||
|
class="custom-header-table"
|
||||||
|
v-bind="attrs"
|
||||||
|
:visible-columns="visibleColumnsSpecial"
|
||||||
|
v-model:pagination="pagination"
|
||||||
|
>
|
||||||
|
<template v-slot:header="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-th auto-width></q-th>
|
||||||
|
<q-th
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
style="color: #000000; font-weight: 500"
|
||||||
|
>
|
||||||
|
<span class="text-weight-medium">{{ col.label }}</span>
|
||||||
|
</q-th>
|
||||||
|
<!-- <q-th auto-width></q-th> -->
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
|
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
|
<div v-if="col.name == 'no'">
|
||||||
|
{{ props.rowIndex + 1 }}
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
{{ col.value }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</d-table>
|
||||||
|
</q-card-section>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
19
src/components/Selector.vue
Normal file
19
src/components/Selector.vue
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
<template>
|
||||||
|
<q-select v-bind="attrs">
|
||||||
|
<template v-for="(_, slot) in slots" v-slot:[slot]="scope">
|
||||||
|
<slot :name="slot" v-bind="scope || {}" />
|
||||||
|
</template>
|
||||||
|
<template v-slot:no-option>
|
||||||
|
<q-item>
|
||||||
|
<q-item-section class="text-black">
|
||||||
|
ไม่พบข้อมูลที่ค้นหา
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</template>
|
||||||
|
</q-select>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, useAttrs, useSlots } from "vue";
|
||||||
|
const attrs = ref<any>(useAttrs());
|
||||||
|
const slots = ref<any>(useSlots());
|
||||||
|
</script>
|
||||||
90
src/components/Table.vue
Normal file
90
src/components/Table.vue
Normal file
|
|
@ -0,0 +1,90 @@
|
||||||
|
<template>
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<template v-slot:pagination="scope">
|
||||||
|
ทั้งหมด {{ attrs.rows.length }} รายการ
|
||||||
|
<q-pagination
|
||||||
|
v-model="pagination.page"
|
||||||
|
active-color="primary"
|
||||||
|
color="dark"
|
||||||
|
:max="scope.pagesNumber"
|
||||||
|
:max-pages="5"
|
||||||
|
size="sm"
|
||||||
|
boundary-links
|
||||||
|
direction-links
|
||||||
|
></q-pagination>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-for="(_, slot) in slots" v-slot:[slot]="scope">
|
||||||
|
<slot :name="slot" v-bind="scope || {}" />
|
||||||
|
</template>
|
||||||
|
</q-table>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, useAttrs, useSlots } from "vue";
|
||||||
|
const attrs = ref<any>(useAttrs());
|
||||||
|
const slots = ref<any>(useSlots());
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
paging: {
|
||||||
|
type: Boolean,
|
||||||
|
defualt: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
const pagination = ref({
|
||||||
|
sortBy: "desc",
|
||||||
|
descending: false,
|
||||||
|
page: 1,
|
||||||
|
rowsPerPage: 10,
|
||||||
|
});
|
||||||
|
|
||||||
|
const paginationLabel = (start: string, end: string, total: string) => {
|
||||||
|
if (props.paging == true)
|
||||||
|
return " " + start + " ถึง " + end + " จากจำนวน " + total + " รายการ";
|
||||||
|
else return start + "-" + end + " ใน " + total;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.icon-color {
|
||||||
|
color: #4154b3;
|
||||||
|
}
|
||||||
|
.custom-header-table {
|
||||||
|
height: auto;
|
||||||
|
.q-table tr:nth-child(odd) td {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
.q-table tr:nth-child(even) td {
|
||||||
|
background: #f8f8f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-table thead tr {
|
||||||
|
background: #ecebeb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-table thead tr th {
|
||||||
|
position: sticky;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
/* this will be the loading indicator */
|
||||||
|
.q-table thead tr:last-child th {
|
||||||
|
/* height of all previous header rows */
|
||||||
|
top: 48px;
|
||||||
|
}
|
||||||
|
.q-table thead tr:first-child th {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
227
src/components/TableHistory.vue
Normal file
227
src/components/TableHistory.vue
Normal file
|
|
@ -0,0 +1,227 @@
|
||||||
|
<template>
|
||||||
|
<q-dialog :model-value="modal" persistent>
|
||||||
|
<q-card style="min-width: 70vw">
|
||||||
|
<q-form ref="myForm">
|
||||||
|
<div class="row items-center q-pa-sm">
|
||||||
|
<div class="row">
|
||||||
|
<div class="text-bold">{{ tittle }}</div>
|
||||||
|
</div>
|
||||||
|
<q-space />
|
||||||
|
<q-btn
|
||||||
|
icon="close"
|
||||||
|
unelevated
|
||||||
|
round
|
||||||
|
dense
|
||||||
|
style="color: #ff8080; background-color: #ffdede"
|
||||||
|
size="12px"
|
||||||
|
@click="close"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<q-separator />
|
||||||
|
<div class="q-pa-sm">
|
||||||
|
<!-- header บน table มี ค้นหา แสดงคอลัมน์ (status nornmalData true) -->
|
||||||
|
<div class="col-12 row q-pb-sm">
|
||||||
|
<!-- <q-select
|
||||||
|
hide-bottom-space
|
||||||
|
@update:model-value="updateHistory"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
borderless
|
||||||
|
:model-value="history"
|
||||||
|
:label="`${'วันที่'}`"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
option-label="publishedDate"
|
||||||
|
:options="optionsHistory"
|
||||||
|
option-value="id"
|
||||||
|
/> -->
|
||||||
|
<q-space />
|
||||||
|
<div class="items-center" style="display: flex">
|
||||||
|
<!-- ค้นหาข้อความใน table -->
|
||||||
|
<q-input
|
||||||
|
standout
|
||||||
|
dense
|
||||||
|
:model-value="inputfilter"
|
||||||
|
ref="filterRef"
|
||||||
|
@update:model-value="updateInput"
|
||||||
|
outlined
|
||||||
|
debounce="300"
|
||||||
|
placeholder="ค้นหา"
|
||||||
|
style="max-width: 200px"
|
||||||
|
class="q-ml-sm"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon v-if="inputfilter == ''" name="search" />
|
||||||
|
<q-icon
|
||||||
|
v-if="inputfilter !== ''"
|
||||||
|
name="clear"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="resetFilter"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
<!-- แสดงคอลัมน์ใน table -->
|
||||||
|
<q-select
|
||||||
|
:model-value="inputvisible"
|
||||||
|
@update:model-value="updateVisible"
|
||||||
|
:display-value="$q.lang.table.columns"
|
||||||
|
multiple
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
:options="attrs.columns"
|
||||||
|
options-dense
|
||||||
|
option-value="name"
|
||||||
|
map-options
|
||||||
|
emit-value
|
||||||
|
style="min-width: 150px"
|
||||||
|
class="gt-xs q-ml-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<q-table
|
||||||
|
ref="table"
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
class="custom-header-table"
|
||||||
|
v-bind="attrs"
|
||||||
|
virtual-scroll
|
||||||
|
:virtual-scroll-sticky-size-start="48"
|
||||||
|
dense
|
||||||
|
:pagination-label="paginationLabel"
|
||||||
|
v-model:pagination="pagination"
|
||||||
|
>
|
||||||
|
<template v-slot:header="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-th auto-width v-if="boss == true" />
|
||||||
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
|
<span class="text-weight-medium">{{ col.label }}</span>
|
||||||
|
</q-th>
|
||||||
|
<q-th auto-width v-if="history == true" />
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
<!-- สำหรับเรียกใช้ template ตัวข้างนอก -->
|
||||||
|
<template #body="props">
|
||||||
|
<slot v-bind="props" name="columns"></slot>
|
||||||
|
</template>
|
||||||
|
<template v-slot:pagination="scope">
|
||||||
|
<q-pagination
|
||||||
|
v-model="pagination.page"
|
||||||
|
active-color="primary"
|
||||||
|
color="dark"
|
||||||
|
:max="scope.pagesNumber"
|
||||||
|
:max-pages="5"
|
||||||
|
size="sm"
|
||||||
|
boundary-links
|
||||||
|
direction-links
|
||||||
|
></q-pagination>
|
||||||
|
</template>
|
||||||
|
</q-table>
|
||||||
|
</div>
|
||||||
|
<q-separator />
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, useAttrs, computed } from "vue";
|
||||||
|
import type { Pagination } from "@/modules/01_metadata/interface/index/Main";
|
||||||
|
|
||||||
|
const rows = ref<any>([]);
|
||||||
|
const attrs = ref<any>(useAttrs());
|
||||||
|
const filterRef = ref<any>(null);
|
||||||
|
// const history = ref<string>("");
|
||||||
|
const initialPagination = ref<Pagination>({
|
||||||
|
// descending: false,
|
||||||
|
rowsPerPage: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
const pagination = ref({
|
||||||
|
sortBy: "desc",
|
||||||
|
descending: false,
|
||||||
|
page: 1,
|
||||||
|
rowsPerPage: 10,
|
||||||
|
});
|
||||||
|
|
||||||
|
const pagesNumber = computed(() => {
|
||||||
|
return Math.ceil(rows.value.length / pagination.value.rowsPerPage);
|
||||||
|
});
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
tittle: String,
|
||||||
|
inputfilter: String,
|
||||||
|
// history: String,
|
||||||
|
inputvisible: Array,
|
||||||
|
modal: Boolean,
|
||||||
|
boss: {
|
||||||
|
type: Boolean,
|
||||||
|
defualt: false,
|
||||||
|
},
|
||||||
|
history: {
|
||||||
|
type: Boolean,
|
||||||
|
defualt: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits([
|
||||||
|
"update:inputfilter",
|
||||||
|
"update:inputvisible",
|
||||||
|
"update:modal",
|
||||||
|
// "update:history",
|
||||||
|
]);
|
||||||
|
|
||||||
|
const updateInput = (value: string | number | null) => {
|
||||||
|
emit("update:inputfilter", value);
|
||||||
|
};
|
||||||
|
const updateVisible = (value: []) => {
|
||||||
|
emit("update:inputvisible", value);
|
||||||
|
};
|
||||||
|
const close = () => {
|
||||||
|
emit("update:modal", false);
|
||||||
|
};
|
||||||
|
// const updateHistory = (value: string) => {
|
||||||
|
// emit("update:history", value);
|
||||||
|
// props.updateHistory();
|
||||||
|
// };
|
||||||
|
|
||||||
|
const paginationLabel = (start: string, end: string, total: string) => {
|
||||||
|
return start + "-" + end + " ใน " + total;
|
||||||
|
};
|
||||||
|
|
||||||
|
const resetFilter = () => {
|
||||||
|
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
|
||||||
|
emit("update:inputfilter", "");
|
||||||
|
filterRef.value.focus();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.icon-color {
|
||||||
|
color: #4154b3;
|
||||||
|
}
|
||||||
|
.custom-header-table {
|
||||||
|
max-height: 64vh;
|
||||||
|
.q-table tr:nth-child(odd) td {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
.q-table tr:nth-child(even) td {
|
||||||
|
background: #f8f8f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-table thead tr {
|
||||||
|
background: #ecebeb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-table thead tr th {
|
||||||
|
position: sticky;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
/* this will be the loading indicator */
|
||||||
|
.q-table thead tr:last-child th {
|
||||||
|
/* height of all previous header rows */
|
||||||
|
top: 48px;
|
||||||
|
}
|
||||||
|
.q-table thead tr:first-child th {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
570
src/components/TableView.vue
Normal file
570
src/components/TableView.vue
Normal file
|
|
@ -0,0 +1,570 @@
|
||||||
|
<template>
|
||||||
|
<div class="q-px-md q-pb-md">
|
||||||
|
<!-- header บน table มี ค้นหา แสดงคอลัมน์ ปุ่มแก้ไข เพิ่ม เผยแพร่ข้อมูล ยกเลิก (status nornmalData false) -->
|
||||||
|
<div class="col-12 row q-py-sm" v-if="nornmalData == false">
|
||||||
|
<q-btn
|
||||||
|
v-if="!editvisible == true && publicNoBtn == false"
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
:disabled="editvisible == true"
|
||||||
|
:color="editvisible == true ? 'grey-7' : 'primary'"
|
||||||
|
@click="edit"
|
||||||
|
icon="mdi-pencil-outline"
|
||||||
|
>
|
||||||
|
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<!-- ยกเลิก แสดงเมื่อ กดปุ่มแก้ไข -->
|
||||||
|
<q-btn
|
||||||
|
v-else
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
:disabled="editvisible == false"
|
||||||
|
:outline="editvisible == false"
|
||||||
|
:color="editvisible == false ? 'grey-7' : 'red'"
|
||||||
|
@click="cancel()"
|
||||||
|
icon="mdi-undo"
|
||||||
|
>
|
||||||
|
<q-tooltip>ยกเลิก</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<!-- <q-separator vertical /> -->
|
||||||
|
<div class="q-px-sm">
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
:disabled="editvisible == false"
|
||||||
|
:color="editvisible == false ? 'grey-7' : 'add'"
|
||||||
|
@click="add"
|
||||||
|
icon="mdi-plus"
|
||||||
|
>
|
||||||
|
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
|
||||||
|
<!-- บันทึกร่าง แสดงเมื่อ กดปุ่มแก้ไข ข้อมูลมีการเป็นแปลงหรือ ยังไม่เผยแพร่ข้อมูล -->
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
:disabled="!(editvisible == true && updateData == true)"
|
||||||
|
:color="
|
||||||
|
!(editvisible == true && updateData == true) ? 'grey-7' : 'public'
|
||||||
|
"
|
||||||
|
@click="checkSave"
|
||||||
|
v-if="saveNoDraft == false"
|
||||||
|
icon="mdi-content-save-outline"
|
||||||
|
>
|
||||||
|
<q-tooltip>บันทึกร่าง</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<!-- ลบบันทึกร่าง แสดงเมื่อ บันทึกร่างแล้ว -->
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
:disabled="publicData == true"
|
||||||
|
:color="publicData == true ? 'grey-7' : 'deep-orange'"
|
||||||
|
@click="DeleteModal"
|
||||||
|
icon="mdi-file-remove-outline"
|
||||||
|
v-if="publicNoBtn == false"
|
||||||
|
>
|
||||||
|
<q-tooltip>ลบบันทึกร่าง</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- เผยแพร่ -->
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
:disabled="!(publicData == false || updateData == true)"
|
||||||
|
:color="
|
||||||
|
!(publicData == false || updateData == true) ? 'grey-7' : 'public'
|
||||||
|
"
|
||||||
|
@click="publishModal"
|
||||||
|
icon="mdi-cloud-upload-outline"
|
||||||
|
v-if="publicNoBtn == false"
|
||||||
|
>
|
||||||
|
<q-tooltip>เผยแพร่</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<div class="items-center" style="display: flex">
|
||||||
|
<div
|
||||||
|
class="row items-center"
|
||||||
|
style="display: flex"
|
||||||
|
v-if="publicData == false && publicNoBtn == false"
|
||||||
|
>
|
||||||
|
<div class="text-public text-body2 text-weight-medium q-px-sm">
|
||||||
|
ข้อมูลยังไม่เผยแพร่
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<q-space />
|
||||||
|
<div class="items-center" style="display: flex">
|
||||||
|
<!-- ข้อความสถานะเผยแพร่ โดยใช้ parameter publicData เป็นตัวกำหนดข้อความ -->
|
||||||
|
<!-- <div class="row items-center" style="display: flex" v-if="publicData == true">
|
||||||
|
<q-icon cener size="20px" name="label_important" class="icon-color" />
|
||||||
|
<div class="text-size">ข้อมูลเผยแพร่แล้ว</div>
|
||||||
|
</div> -->
|
||||||
|
<div
|
||||||
|
class="row items-center"
|
||||||
|
style="display: flex"
|
||||||
|
v-if="publicData == false && publicNoBtn == false"
|
||||||
|
>
|
||||||
|
<!-- <q-icon cener size="20px" name="label_important" color="amber" />
|
||||||
|
<div class="text-grey-7 text-body2 text-weight-medium q-px-sm">
|
||||||
|
ข้อมูลยังไม่เผยแพร่
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
<!-- ค้นหาข้อความใน table -->
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon v-if="inputfilter == ''" name="search" />
|
||||||
|
<q-icon
|
||||||
|
v-if="inputfilter !== ''"
|
||||||
|
name="clear"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="resetFilter"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
<!-- แสดงคอลัมน์ใน table -->
|
||||||
|
<q-select
|
||||||
|
:model-value="inputvisible"
|
||||||
|
@update:model-value="updateVisible"
|
||||||
|
:display-value="$q.lang.table.columns"
|
||||||
|
multiple
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
:options="attrs.columns"
|
||||||
|
options-dense
|
||||||
|
option-value="name"
|
||||||
|
map-options
|
||||||
|
emit-value
|
||||||
|
style="min-width: 150px"
|
||||||
|
class="gt-xs q-ml-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- header บน table มี ค้นหา แสดงคอลัมน์ (status nornmalData true) -->
|
||||||
|
<div class="col-12 row q-py-sm items-center" v-if="nornmalData == true">
|
||||||
|
<span class="text-subtitle1">{{ titleText }}</span>
|
||||||
|
<!-- <q-select
|
||||||
|
:model-value="inputvisibleFilter"
|
||||||
|
:options="optionsFilter"
|
||||||
|
style="min-width: 150px"
|
||||||
|
class="gt-xs q-ml-sm"
|
||||||
|
/> -->
|
||||||
|
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
:model-value="inputvisibleFilter"
|
||||||
|
:options="optionsFilter"
|
||||||
|
class="col-xs-12 col-sm-4 col-md-3"
|
||||||
|
option-value="id"
|
||||||
|
option-label="name"
|
||||||
|
map-options
|
||||||
|
emit-value
|
||||||
|
@update:model-value="updateVisibleFilter"
|
||||||
|
v-if="optionsFilter != undefined && optionsFilter.length > 0"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<q-space />
|
||||||
|
<div class="items-center" style="display: flex">
|
||||||
|
<!-- ค้นหาข้อความใน table -->
|
||||||
|
<q-input
|
||||||
|
standout
|
||||||
|
dense
|
||||||
|
:model-value="inputfilter"
|
||||||
|
ref="filterRef"
|
||||||
|
@update:model-value="updateInput"
|
||||||
|
outlined
|
||||||
|
debounce="300"
|
||||||
|
placeholder="ค้นหา"
|
||||||
|
style="max-width: 200px"
|
||||||
|
class="q-ml-sm"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon v-if="inputfilter == ''" name="search" />
|
||||||
|
<q-icon
|
||||||
|
v-if="inputfilter !== ''"
|
||||||
|
name="clear"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="resetFilter"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
<!-- แสดงคอลัมน์ใน table -->
|
||||||
|
<q-select
|
||||||
|
:model-value="inputvisible"
|
||||||
|
@update:model-value="updateVisible"
|
||||||
|
:display-value="$q.lang.table.columns"
|
||||||
|
multiple
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
:options="attrs.columns"
|
||||||
|
options-dense
|
||||||
|
option-value="name"
|
||||||
|
map-options
|
||||||
|
emit-value
|
||||||
|
style="min-width: 150px"
|
||||||
|
class="gt-xs q-ml-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<q-table
|
||||||
|
ref="table"
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
class="custom-header-table"
|
||||||
|
v-bind="attrs"
|
||||||
|
virtual-scroll
|
||||||
|
:virtual-scroll-sticky-size-start="48"
|
||||||
|
dense
|
||||||
|
:pagination-label="paginationLabel"
|
||||||
|
v-model:pagination="pagination"
|
||||||
|
>
|
||||||
|
<!-- :rows-per-page-options="paging == true ? [25, 50, 100, 500] : []" -->
|
||||||
|
<!-- :rows-per-page-options="[0]" -->
|
||||||
|
<template v-slot:header="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-th auto-width v-if="boss == true" />
|
||||||
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
|
<span class="text-weight-medium">{{ col.label }}</span>
|
||||||
|
</q-th>
|
||||||
|
<q-th
|
||||||
|
auto-width
|
||||||
|
v-if="
|
||||||
|
editvisible == true || nextPageVisible == true || history == true
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
<template v-slot:pagination="scope">
|
||||||
|
<q-pagination
|
||||||
|
v-model="pagination.page"
|
||||||
|
active-color="primary"
|
||||||
|
color="dark"
|
||||||
|
:max="scope.pagesNumber"
|
||||||
|
:max-pages="5"
|
||||||
|
size="sm"
|
||||||
|
boundary-links
|
||||||
|
direction-links
|
||||||
|
></q-pagination>
|
||||||
|
</template>
|
||||||
|
<!-- สำหรับเรียกใช้ template ตัวข้างนอก -->
|
||||||
|
<template #body="props">
|
||||||
|
<slot v-bind="props" name="columns"></slot>
|
||||||
|
</template>
|
||||||
|
</q-table>
|
||||||
|
</div>
|
||||||
|
<!-- ข้อมูลการเผยแพร่ข้อมูล -->
|
||||||
|
<!-- <notifyPublishDraft v-model:showModal="modalPublish" :ok="publish" /> -->
|
||||||
|
<!-- <q-dialog v-model="modalPublish" persistent>
|
||||||
|
<q-card class="q-pa-sm">
|
||||||
|
<q-card-section class="row">
|
||||||
|
<div class="q-pr-md">
|
||||||
|
<q-avatar
|
||||||
|
icon="public"
|
||||||
|
size="lg"
|
||||||
|
font-size="25px"
|
||||||
|
color="blue-1"
|
||||||
|
text-color="public"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col text-dark">
|
||||||
|
<span class="text-bold">ต้องการเผยแพร่ข้อมูลนี้หรือไม่?</span>
|
||||||
|
<br />
|
||||||
|
<span>ข้อมูลที่กำลังถูกเผยแพร่นี้จะมีผลใช้งานทันที</span>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
|
||||||
|
<q-card-actions align="right" class="bg-white text-teal">
|
||||||
|
<q-btn label="ยกเลิก" flat color="grey-8" v-close-popup />
|
||||||
|
<q-btn
|
||||||
|
label="เผยแพร่"
|
||||||
|
color="public"
|
||||||
|
@click="publish()"
|
||||||
|
v-close-popup
|
||||||
|
/>
|
||||||
|
</q-card-actions>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog> -->
|
||||||
|
|
||||||
|
<!-- ข้อมูลการลบเผยแพร่ข้อมูล -->
|
||||||
|
<!-- <notifyDeleteDraft v-model:showModal="modalDelete" :ok="deleted" /> -->
|
||||||
|
<!-- <q-dialog v-model="modalDelete" persistent>
|
||||||
|
<q-card class="q-pa-sm">
|
||||||
|
<q-card-section class="row">
|
||||||
|
<div class="q-pr-md">
|
||||||
|
<q-avatar
|
||||||
|
icon="mdi-file-remove-outline"
|
||||||
|
size="lg"
|
||||||
|
font-size="25px"
|
||||||
|
color="red-1"
|
||||||
|
text-color="deep-orange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col text-dark">
|
||||||
|
<span class="text-bold">ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?</span>
|
||||||
|
<br />
|
||||||
|
<span>ข้อมูลบันทึกร่างที่กำลังถูกลบนี้จะมีผลใช้งานทันที</span>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
|
||||||
|
<q-card-actions align="right" class="bg-white text-teal">
|
||||||
|
<q-btn label="ยกเลิก" flat color="grey-8" v-close-popup />
|
||||||
|
<q-btn label="ลบบันทึก" color="red" @click="deleted()" v-close-popup />
|
||||||
|
</q-card-actions>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog> -->
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, useAttrs, computed } from "vue";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
||||||
|
const { dialogMessage } = mixin;
|
||||||
|
const rows = ref<any>([]);
|
||||||
|
const attrs = ref<any>(useAttrs());
|
||||||
|
const table = ref<any>(null);
|
||||||
|
const filterRef = ref<any>(null);
|
||||||
|
const modalPublish = ref<boolean>(false);
|
||||||
|
const modalDelete = ref<boolean>(false);
|
||||||
|
|
||||||
|
const pagination = ref({
|
||||||
|
sortBy: "desc",
|
||||||
|
descending: false,
|
||||||
|
page: 1,
|
||||||
|
rowsPerPage: 10,
|
||||||
|
});
|
||||||
|
|
||||||
|
const pagesNumber = computed(() => {
|
||||||
|
return Math.ceil(rows.value.length / pagination.value.rowsPerPage);
|
||||||
|
});
|
||||||
|
|
||||||
|
const paginationLabel = (start: string, end: string, total: string) => {
|
||||||
|
if (props.paging == true)
|
||||||
|
return " " + start + " ถึง " + end + " จากจำนวน " + total + " รายการ";
|
||||||
|
else return start + "-" + end + " ใน " + total;
|
||||||
|
};
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
inputfilter: String,
|
||||||
|
inputvisible: Array,
|
||||||
|
inputvisibleFilter: String,
|
||||||
|
editvisible: Boolean,
|
||||||
|
titleText: String,
|
||||||
|
optionsFilter: {
|
||||||
|
type: Array,
|
||||||
|
defualt: [],
|
||||||
|
},
|
||||||
|
boss: {
|
||||||
|
type: Boolean,
|
||||||
|
defualt: false,
|
||||||
|
},
|
||||||
|
saveNoDraft: {
|
||||||
|
type: Boolean,
|
||||||
|
defualt: false,
|
||||||
|
},
|
||||||
|
history: {
|
||||||
|
type: Boolean,
|
||||||
|
defualt: false,
|
||||||
|
},
|
||||||
|
paging: {
|
||||||
|
type: Boolean,
|
||||||
|
defualt: false,
|
||||||
|
},
|
||||||
|
nornmalData: {
|
||||||
|
type: Boolean,
|
||||||
|
defualt: false,
|
||||||
|
},
|
||||||
|
refreshData: {
|
||||||
|
type: Boolean,
|
||||||
|
defualt: false,
|
||||||
|
},
|
||||||
|
nextPageVisible: {
|
||||||
|
type: Boolean,
|
||||||
|
defualt: false,
|
||||||
|
},
|
||||||
|
publicData: {
|
||||||
|
type: Boolean,
|
||||||
|
defualt: true,
|
||||||
|
required: false,
|
||||||
|
},
|
||||||
|
updateData: {
|
||||||
|
type: Boolean,
|
||||||
|
defualt: true,
|
||||||
|
required: false,
|
||||||
|
},
|
||||||
|
publicNoBtn: {
|
||||||
|
type: Boolean,
|
||||||
|
defualt: false,
|
||||||
|
},
|
||||||
|
add: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
edit: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
save: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
deleted: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
cancel: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
publish: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
validate: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const initialPagination = ref<any>({
|
||||||
|
// descending: false,
|
||||||
|
rowsPerPage: props.paging == true ? 25 : 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits([
|
||||||
|
"update:inputfilter",
|
||||||
|
"update:inputvisible",
|
||||||
|
"update:editvisible",
|
||||||
|
"update:titleText",
|
||||||
|
"update:inputvisibleFilter",
|
||||||
|
]);
|
||||||
|
|
||||||
|
const updateEdit = (value: any) => {
|
||||||
|
emit("update:editvisible", value);
|
||||||
|
};
|
||||||
|
const updateInput = (value: any) => {
|
||||||
|
emit("update:inputfilter", value);
|
||||||
|
};
|
||||||
|
const updateVisible = (value: any) => {
|
||||||
|
emit("update:inputvisible", value);
|
||||||
|
};
|
||||||
|
const updateVisibleFilter = (value: any) => {
|
||||||
|
emit("update:inputvisibleFilter", value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const checkSave = () => {
|
||||||
|
props.validate();
|
||||||
|
props.save();
|
||||||
|
// if (myForm.value !== null) {
|
||||||
|
// myForm.value.validate().then((success) => {
|
||||||
|
// if (success) {
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
};
|
||||||
|
|
||||||
|
const publishModal = () => {
|
||||||
|
props.validate();
|
||||||
|
const filter = attrs.value.rows.filter((r: any) => r.name == "");
|
||||||
|
|
||||||
|
if (filter.length == 0 || attrs.value.rows.length == 0) {
|
||||||
|
// modalPublish.value = true;
|
||||||
|
dialogMessage(
|
||||||
|
$q,
|
||||||
|
"ต้องการเผยแพร่ข้อมูลนี้หรือไม่?",
|
||||||
|
"ข้อมูลที่กำลังถูกเผยแพร่นี้จะมีผลใช้งานทันที",
|
||||||
|
"public",
|
||||||
|
"เผยแพร่",
|
||||||
|
"public",
|
||||||
|
props.publish,
|
||||||
|
undefined
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const DeleteModal = () => {
|
||||||
|
// modalDelete.value = true;
|
||||||
|
dialogMessage(
|
||||||
|
$q,
|
||||||
|
"ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?",
|
||||||
|
"ข้อมูลบันทึกร่างที่กำลังถูกลบนี้จะมีผลใช้งานทันที",
|
||||||
|
"mdi-file-remove-outline",
|
||||||
|
"ลบบันทึก",
|
||||||
|
"red",
|
||||||
|
props.deleted,
|
||||||
|
undefined
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const edit = async () => {
|
||||||
|
updateEdit(!props.editvisible);
|
||||||
|
props.edit();
|
||||||
|
};
|
||||||
|
|
||||||
|
const add = async () => {
|
||||||
|
// if (myForm.value !== null) {
|
||||||
|
// myForm.value.validate();
|
||||||
|
// }
|
||||||
|
props.validate();
|
||||||
|
props.add();
|
||||||
|
await table.value.lastPage();
|
||||||
|
await table.value.scrollTo(attrs.value.rows.length - 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
const deleted = async () => {
|
||||||
|
// const deletedF = () => {
|
||||||
|
if (props.publicNoBtn === false) {
|
||||||
|
updateEdit(false);
|
||||||
|
}
|
||||||
|
props.deleted();
|
||||||
|
};
|
||||||
|
|
||||||
|
const resetFilter = () => {
|
||||||
|
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
|
||||||
|
emit("update:inputfilter", "");
|
||||||
|
filterRef.value.focus();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.icon-color {
|
||||||
|
color: #4154b3;
|
||||||
|
}
|
||||||
|
.custom-header-table {
|
||||||
|
max-height: 64vh;
|
||||||
|
.q-table tr:nth-child(odd) td {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
.q-table tr:nth-child(even) td {
|
||||||
|
background: #f8f8f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-table thead tr {
|
||||||
|
background: #ecebeb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-table thead tr th {
|
||||||
|
position: sticky;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
/* this will be the loading indicator */
|
||||||
|
.q-table thead tr:last-child th {
|
||||||
|
/* height of all previous header rows */
|
||||||
|
top: 48px;
|
||||||
|
}
|
||||||
|
.q-table thead tr:first-child th {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
412
src/components/TableView1.vue
Normal file
412
src/components/TableView1.vue
Normal file
|
|
@ -0,0 +1,412 @@
|
||||||
|
<template>
|
||||||
|
<div class="q-px-md q-pb-md">
|
||||||
|
<!-- header บน table มี ค้นหา แสดงคอลัมน์ ปุ่มแก้ไข เพิ่ม เผยแพร่ข้อมูล ยกเลิก-->
|
||||||
|
<div class="col-12 row q-py-sm q-col-gutter-sm">
|
||||||
|
<q-btn-group flat>
|
||||||
|
<q-btn
|
||||||
|
:push="!editvisible"
|
||||||
|
:outline="editvisible"
|
||||||
|
dense
|
||||||
|
:disabled="editvisible == true"
|
||||||
|
:color="editvisible == true ? 'grey-7' : 'primary'"
|
||||||
|
label="แก้ไข"
|
||||||
|
@click="edit"
|
||||||
|
icon="mdi-pencil-outline"
|
||||||
|
class="q-px-sm"
|
||||||
|
>
|
||||||
|
<!-- <q-tooltip>แก้ไขข้อมูล</q-tooltip> -->
|
||||||
|
</q-btn>
|
||||||
|
<!-- <q-separator vertical /> -->
|
||||||
|
<q-btn
|
||||||
|
:push="editvisible"
|
||||||
|
:outline="!editvisible"
|
||||||
|
dense
|
||||||
|
:disabled="editvisible == false"
|
||||||
|
:color="editvisible == false ? 'grey-7' : 'primary'"
|
||||||
|
label="เพิ่ม"
|
||||||
|
@click="add"
|
||||||
|
icon="mdi-plus"
|
||||||
|
class="q-px-sm"
|
||||||
|
>
|
||||||
|
<!-- <q-tooltip>เพิ่มข้อมูล</q-tooltip> -->
|
||||||
|
</q-btn>
|
||||||
|
</q-btn-group>
|
||||||
|
<q-btn-group flat>
|
||||||
|
<!-- เผยแพร่ -->
|
||||||
|
<q-btn
|
||||||
|
dense
|
||||||
|
:push="publicData == false || updateData == true"
|
||||||
|
:outline="!(publicData == false || updateData == true)"
|
||||||
|
:disabled="!(publicData == false || updateData == true)"
|
||||||
|
:color="
|
||||||
|
!(publicData == false || updateData == true) ? 'grey-7' : 'public'
|
||||||
|
"
|
||||||
|
label="เผยแพร่"
|
||||||
|
@click="publishModal"
|
||||||
|
icon="mdi-file-upload-outline"
|
||||||
|
class="q-px-sm"
|
||||||
|
>
|
||||||
|
<!-- <q-tooltip>เผยแพร่</q-tooltip> -->
|
||||||
|
</q-btn>
|
||||||
|
<!-- บันทึกร่าง แสดงเมื่อ กดปุ่มแก้ไข ข้อมูลมีการเป็นแปลงหรือ ยังไม่เผยแพร่ข้อมูล -->
|
||||||
|
<q-btn
|
||||||
|
dense
|
||||||
|
:push="
|
||||||
|
editvisible == true && (publicData == false || updateData == true)
|
||||||
|
"
|
||||||
|
:outline="
|
||||||
|
!(
|
||||||
|
editvisible == true &&
|
||||||
|
(publicData == false || updateData == true)
|
||||||
|
)
|
||||||
|
"
|
||||||
|
:disabled="
|
||||||
|
!(
|
||||||
|
editvisible == true &&
|
||||||
|
(publicData == false || updateData == true)
|
||||||
|
)
|
||||||
|
"
|
||||||
|
:color="
|
||||||
|
!(
|
||||||
|
editvisible == true &&
|
||||||
|
(publicData == false || updateData == true)
|
||||||
|
)
|
||||||
|
? 'grey-7'
|
||||||
|
: 'public'
|
||||||
|
"
|
||||||
|
label="บันทึกร่าง"
|
||||||
|
@click="checkSave"
|
||||||
|
icon="mdi-file-check-outline"
|
||||||
|
class="q-px-sm"
|
||||||
|
>
|
||||||
|
<!-- <q-tooltip>บันทึกร่าง</q-tooltip> -->
|
||||||
|
</q-btn>
|
||||||
|
|
||||||
|
<!-- ลบบันทึกร่าง แสดงเมื่อ บันทึกร่างแล้ว -->
|
||||||
|
<q-btn
|
||||||
|
dense
|
||||||
|
:push="!publicData"
|
||||||
|
:disabled="publicData == true"
|
||||||
|
:outline="publicData == true"
|
||||||
|
label="ลบร่าง"
|
||||||
|
:color="publicData == true ? 'grey-7' : 'public'"
|
||||||
|
@click="deleted()"
|
||||||
|
icon="mdi-file-remove-outline"
|
||||||
|
class="q-px-sm"
|
||||||
|
>
|
||||||
|
<!-- <q-tooltip>ลบบันทึกร่าง</q-tooltip> -->
|
||||||
|
</q-btn>
|
||||||
|
</q-btn-group>
|
||||||
|
|
||||||
|
<q-btn-group flat>
|
||||||
|
<!-- ยกเลิก แสดงเมื่อ กดปุ่มแก้ไข -->
|
||||||
|
<q-btn
|
||||||
|
dense
|
||||||
|
:push="editvisible"
|
||||||
|
:disabled="editvisible == false"
|
||||||
|
:outline="editvisible == false"
|
||||||
|
label="ยกเลิก"
|
||||||
|
:color="editvisible == false ? 'grey-7' : 'red'"
|
||||||
|
@click="cancel()"
|
||||||
|
icon="mdi-close"
|
||||||
|
class="q-px-sm"
|
||||||
|
>
|
||||||
|
<!-- <q-tooltip>ยกเลิก</q-tooltip> -->
|
||||||
|
</q-btn>
|
||||||
|
</q-btn-group>
|
||||||
|
<q-space />
|
||||||
|
<div class="items-center" style="display: flex">
|
||||||
|
<!-- ข้อความสถานะเผยแพร่ โดยใช้ parameter publicData เป็นตัวกำหนดข้อความ -->
|
||||||
|
<!-- <div class="row items-center" style="display: flex" v-if="publicData == true">
|
||||||
|
<q-icon cener size="20px" name="label_important" class="icon-color" />
|
||||||
|
<div class="text-size">ข้อมูลเผยแพร่แล้ว</div>
|
||||||
|
</div> -->
|
||||||
|
<div
|
||||||
|
class="row items-center"
|
||||||
|
style="display: flex"
|
||||||
|
v-if="publicData == false"
|
||||||
|
>
|
||||||
|
<q-icon cener size="15px" name="label_important" color="amber" />
|
||||||
|
<div class="text-caption text-grey-7 text-weight-medium q-px-sm">
|
||||||
|
ข้อมูลยังไม่เผยแพร่
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- ค้นหาข้อความใน table -->
|
||||||
|
<q-input
|
||||||
|
standout
|
||||||
|
dense
|
||||||
|
:model-value="inputfilter"
|
||||||
|
@update:model-value="updateInput"
|
||||||
|
outlined
|
||||||
|
debounce="300"
|
||||||
|
placeholder="ค้นหา"
|
||||||
|
style="max-width: 200px"
|
||||||
|
class="q-ml-sm"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon name="search" />
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
<!-- แสดงคอลัมน์ใน table -->
|
||||||
|
<q-select
|
||||||
|
:model-value="inputvisible"
|
||||||
|
@update:model-value="updateVisible"
|
||||||
|
:display-value="$q.lang.table.columns"
|
||||||
|
multiple
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
:options="attrs.columns"
|
||||||
|
options-dense
|
||||||
|
option-value="name"
|
||||||
|
map-options
|
||||||
|
emit-value
|
||||||
|
style="min-width: 150px"
|
||||||
|
class="gt-xs q-ml-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<q-table
|
||||||
|
ref="table"
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
class="custom-header-table"
|
||||||
|
v-bind="attrs"
|
||||||
|
virtual-scroll
|
||||||
|
:rows-per-page-options="[0]"
|
||||||
|
:virtual-scroll-sticky-size-start="48"
|
||||||
|
dense
|
||||||
|
><!-- :pagination="initialPagination"
|
||||||
|
:pagination-label="paginationLabel" -->
|
||||||
|
<template v-slot:header="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
|
<span class="text-weight-medium">{{ col.label }}</span>
|
||||||
|
</q-th>
|
||||||
|
<q-th
|
||||||
|
auto-width
|
||||||
|
v-if="editvisible == true || nextPageVisible == true"
|
||||||
|
/>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
<!-- สำหรับเรียกใช้ template ตัวข้างนอก -->
|
||||||
|
<template #body="props">
|
||||||
|
<slot v-bind="props" name="columns"></slot>
|
||||||
|
</template>
|
||||||
|
</q-table>
|
||||||
|
</div>
|
||||||
|
<!-- ข้อมูลการเผยแพร่ข้อมูล -->
|
||||||
|
<q-dialog v-model="modal" persistent>
|
||||||
|
<q-card class="q-pa-sm">
|
||||||
|
<q-card-section class="row">
|
||||||
|
<div class="q-pr-md">
|
||||||
|
<q-avatar
|
||||||
|
icon="public"
|
||||||
|
size="lg"
|
||||||
|
font-size="25px"
|
||||||
|
color="blue-1"
|
||||||
|
text-color="public"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col text-dark">
|
||||||
|
<span class="text-bold">ต้องการเผยแพร่ข้อมูลนี้หรือไม่?</span>
|
||||||
|
<br />
|
||||||
|
<span>ข้อมูลที่กำลังถูกเผยแพร่นี้จะมีผลใช้งานทันที</span>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
|
||||||
|
<q-card-actions align="right" class="bg-white text-teal">
|
||||||
|
<q-btn label="ยกเลิก" flat color="grey-8" v-close-popup />
|
||||||
|
<q-btn
|
||||||
|
label="เผยแพร่"
|
||||||
|
color="public"
|
||||||
|
@click="publish()"
|
||||||
|
v-close-popup
|
||||||
|
/>
|
||||||
|
</q-card-actions>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
<q-dialog
|
||||||
|
:model-value="modalError"
|
||||||
|
persistent
|
||||||
|
@update:model-value="updateClose"
|
||||||
|
>
|
||||||
|
<q-card class="q-pa-sm">
|
||||||
|
<q-card-section class="row items-center">
|
||||||
|
<div class="q-pr-md">
|
||||||
|
<q-avatar
|
||||||
|
icon="mdi-alert-circle-outline"
|
||||||
|
font-size="25px"
|
||||||
|
size="lg"
|
||||||
|
color="red-1"
|
||||||
|
text-color="red"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col text-dark">
|
||||||
|
<span class="text-bold">{{ modalErrorTittle }}</span>
|
||||||
|
<br />
|
||||||
|
<span>{{ modalErrorDetail }}</span>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
|
||||||
|
<q-card-actions align="right" class="bg-white text-teal">
|
||||||
|
<q-btn
|
||||||
|
label="ตกลง"
|
||||||
|
color="primary"
|
||||||
|
@click="updateClose"
|
||||||
|
v-close-popup
|
||||||
|
/>
|
||||||
|
</q-card-actions>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, useAttrs } from "vue";
|
||||||
|
|
||||||
|
const attrs = ref<any>(useAttrs());
|
||||||
|
const table = ref<any>(null);
|
||||||
|
|
||||||
|
const modal = ref<boolean>(false);
|
||||||
|
const initialPagination = ref<any>({
|
||||||
|
descending: false,
|
||||||
|
rowsPerPage: 10,
|
||||||
|
});
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
inputfilter: String,
|
||||||
|
inputvisible: Array,
|
||||||
|
editvisible: Boolean,
|
||||||
|
nextPageVisible: {
|
||||||
|
type: Boolean,
|
||||||
|
defualt: false,
|
||||||
|
},
|
||||||
|
modalError: Boolean,
|
||||||
|
modalErrorTittle: String,
|
||||||
|
modalErrorDetail: String,
|
||||||
|
publicData: {
|
||||||
|
type: Boolean,
|
||||||
|
defualt: true,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
updateData: {
|
||||||
|
type: Boolean,
|
||||||
|
defualt: true,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
add: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
edit: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
save: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
deleted: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
cancel: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
publish: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits([
|
||||||
|
"update:inputfilter",
|
||||||
|
"update:inputvisible",
|
||||||
|
"update:editvisible",
|
||||||
|
"update:modalError",
|
||||||
|
"update:modalErrorTittle",
|
||||||
|
"update:modalErrorDetail",
|
||||||
|
]);
|
||||||
|
|
||||||
|
const updateEdit = (value: any) => {
|
||||||
|
emit("update:editvisible", value);
|
||||||
|
};
|
||||||
|
const updateInput = (value: any) => {
|
||||||
|
emit("update:inputfilter", value);
|
||||||
|
};
|
||||||
|
const updateVisible = (value: any) => {
|
||||||
|
emit("update:inputvisible", value);
|
||||||
|
};
|
||||||
|
const updateClose = (value: any) => {
|
||||||
|
// props.modalError = false;
|
||||||
|
emit("update:modalError", false);
|
||||||
|
emit("update:modalErrorTittle", "");
|
||||||
|
emit("update:modalErrorDetail", "");
|
||||||
|
};
|
||||||
|
|
||||||
|
const paginationLabel = (start: string, end: string, total: string) => {
|
||||||
|
return start + "-" + end + " ใน " + total;
|
||||||
|
};
|
||||||
|
|
||||||
|
const checkSave = () => {
|
||||||
|
props.save();
|
||||||
|
// if (myForm.value !== null) {
|
||||||
|
// myForm.value.validate().then((success) => {
|
||||||
|
// if (success) {
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
};
|
||||||
|
|
||||||
|
const publishModal = () => {
|
||||||
|
const filter = attrs.value.rows.filter((r: any) => r.name == "");
|
||||||
|
|
||||||
|
if (filter.length == 0 && attrs.value.rows.length !== 0) {
|
||||||
|
modal.value = true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const edit = async () => {
|
||||||
|
updateEdit(!props.editvisible);
|
||||||
|
props.edit();
|
||||||
|
};
|
||||||
|
|
||||||
|
const add = async () => {
|
||||||
|
// if (myForm.value !== null) {
|
||||||
|
// myForm.value.validate();
|
||||||
|
// }
|
||||||
|
props.add();
|
||||||
|
await table.value.lastPage();
|
||||||
|
await table.value.scrollTo(attrs.value.rows.length - 1);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.icon-color {
|
||||||
|
color: #4154b3;
|
||||||
|
}
|
||||||
|
.custom-header-table {
|
||||||
|
max-height: 38vh;
|
||||||
|
.q-table tr:nth-child(odd) td {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
.q-table tr:nth-child(even) td {
|
||||||
|
background: #f8f8f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-table thead tr {
|
||||||
|
background: #ecebeb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-table thead tr th {
|
||||||
|
position: sticky;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
/* this will be the loading indicator */
|
||||||
|
.q-table thead tr:last-child th {
|
||||||
|
/* height of all previous header rows */
|
||||||
|
top: 48px;
|
||||||
|
}
|
||||||
|
.q-table thead tr:first-child th {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
0
src/components/ViewPDF.vue
Normal file
0
src/components/ViewPDF.vue
Normal file
11
src/components/__tests__/HelloWorld.spec.ts
Normal file
11
src/components/__tests__/HelloWorld.spec.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { describe, it, expect } from "vitest";
|
||||||
|
|
||||||
|
import { mount } from "@vue/test-utils";
|
||||||
|
// import HelloWorld from '../HelloWorld.vue'
|
||||||
|
|
||||||
|
describe("HelloWorld", () => {
|
||||||
|
it("renders properly", () => {
|
||||||
|
// const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } })
|
||||||
|
// expect(wrapper.text()).toContain('Hello Vitest')
|
||||||
|
});
|
||||||
|
});
|
||||||
7
src/components/icons/IconCommunity.vue
Normal file
7
src/components/icons/IconCommunity.vue
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
<template>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
7
src/components/icons/IconDocumentation.vue
Normal file
7
src/components/icons/IconDocumentation.vue
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
<template>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
7
src/components/icons/IconEcosystem.vue
Normal file
7
src/components/icons/IconEcosystem.vue
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
<template>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
7
src/components/icons/IconSupport.vue
Normal file
7
src/components/icons/IconSupport.vue
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
<template>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
19
src/components/icons/IconTooling.vue
Normal file
19
src/components/icons/IconTooling.vue
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
|
||||||
|
<template>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
aria-hidden="true"
|
||||||
|
role="img"
|
||||||
|
class="iconify iconify--mdi"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
preserveAspectRatio="xMidYMid meet"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
|
||||||
|
fill="currentColor"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
873
src/components/information/Address.vue
Normal file
873
src/components/information/Address.vue
Normal file
|
|
@ -0,0 +1,873 @@
|
||||||
|
<template>
|
||||||
|
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
|
||||||
|
<HeaderTop
|
||||||
|
v-model:edit="edit"
|
||||||
|
header="ข้อมูลที่อยู่"
|
||||||
|
icon="mdi-map-marker"
|
||||||
|
:save="saveData"
|
||||||
|
:history="!statusAdd()"
|
||||||
|
:changeBtn="changeBtn"
|
||||||
|
:disable="statusEdit"
|
||||||
|
:cancel="refreshData"
|
||||||
|
:historyClick="clickHistory"
|
||||||
|
:addEmployee="statusAdd()"
|
||||||
|
/>
|
||||||
|
<q-form ref="myform">
|
||||||
|
<div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
|
||||||
|
<div class="col-xs-12">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
hide-bottom-space
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
type="textarea"
|
||||||
|
autogrow
|
||||||
|
:readonly="!edit"
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="addressData.address"
|
||||||
|
:rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
|
||||||
|
:label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||||
|
<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="addressData.provinceId"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
option-label="name"
|
||||||
|
:options="Ops.provinceOps"
|
||||||
|
option-value="id"
|
||||||
|
:label="`${'จังหวัด'}`"
|
||||||
|
@update:model-value="(value:string) => selectProvince(value, '1')"
|
||||||
|
use-input
|
||||||
|
input-debounce="0"
|
||||||
|
@filter="(inputValue:string,
|
||||||
|
doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
|
||||||
|
) "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||||
|
<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="addressData.districtId"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
option-label="name"
|
||||||
|
:options="Ops.districtOps"
|
||||||
|
option-value="id"
|
||||||
|
:label="`${'เขต / อำเภอ'}`"
|
||||||
|
@update:model-value="(value:string) => selectDistrict(value, '1')"
|
||||||
|
use-input
|
||||||
|
input-debounce="0"
|
||||||
|
@filter="(inputValue:string,
|
||||||
|
doneFn:Function) => filterSelector(inputValue, doneFn,'districtOps'
|
||||||
|
) "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||||
|
<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="addressData.subdistrictId"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
option-label="name"
|
||||||
|
:options="Ops.subdistrictOps"
|
||||||
|
option-value="id"
|
||||||
|
:label="`${'แขวง / ตำบล '}`"
|
||||||
|
@update:model-value="(value:string) => selectSubDistrict(value, '1')"
|
||||||
|
use-input
|
||||||
|
input-debounce="0"
|
||||||
|
@filter="(inputValue:string,
|
||||||
|
doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictOps'
|
||||||
|
) "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
hide-bottom-space
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
readonly
|
||||||
|
borderless
|
||||||
|
v-model="codep"
|
||||||
|
:style="!edit ? '' : 'padding:0 12px;'"
|
||||||
|
:label="`${'รหัสไปรษณีย์'}`"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 q-pt-lg"><q-separator /></div>
|
||||||
|
<div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
|
||||||
|
<label class="text-bold"
|
||||||
|
>ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label
|
||||||
|
>
|
||||||
|
<q-radio
|
||||||
|
v-model="addressData.same"
|
||||||
|
checked-icon="task_alt"
|
||||||
|
unchecked-icon="panorama_fish_eye"
|
||||||
|
val="1"
|
||||||
|
label="ใช่"
|
||||||
|
dense
|
||||||
|
:disable="!edit"
|
||||||
|
/>
|
||||||
|
<q-radio
|
||||||
|
v-model="addressData.same"
|
||||||
|
checked-icon="task_alt"
|
||||||
|
unchecked-icon="panorama_fish_eye"
|
||||||
|
val="0"
|
||||||
|
label="ไม่"
|
||||||
|
dense
|
||||||
|
:disable="!edit"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-xs-12" v-if="addressData.same == '0'">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
hide-bottom-space
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
type="textarea"
|
||||||
|
autogrow
|
||||||
|
:readonly="!edit"
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="addressData.addressC"
|
||||||
|
:rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
|
||||||
|
:label="`${'ที่อยู่ปัจจุบัน'}`"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
|
||||||
|
<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="addressData.provinceIdC"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
option-label="name"
|
||||||
|
:options="Ops.provinceOps"
|
||||||
|
option-value="id"
|
||||||
|
:label="`${'จังหวัด'}`"
|
||||||
|
@update:model-value="(value:string) => selectProvince(value, '2')"
|
||||||
|
use-input
|
||||||
|
input-debounce="0"
|
||||||
|
@filter="(inputValue:string,
|
||||||
|
doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
|
||||||
|
) "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
|
||||||
|
<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="addressData.districtIdC"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
option-label="name"
|
||||||
|
:options="Ops.districtCOps"
|
||||||
|
option-value="id"
|
||||||
|
:label="`${'เขต / อำเภอ'}`"
|
||||||
|
@update:model-value="(value:string) => selectDistrict(value, '2')"
|
||||||
|
use-input
|
||||||
|
input-debounce="0"
|
||||||
|
@filter="(inputValue:string,
|
||||||
|
doneFn:Function) => filterSelector(inputValue, doneFn,'districtCOps'
|
||||||
|
) "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
|
||||||
|
<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="addressData.subdistrictIdC"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
option-label="name"
|
||||||
|
:options="Ops.subdistrictCOps"
|
||||||
|
option-value="id"
|
||||||
|
:label="`${'แขวง / ตำบล '}`"
|
||||||
|
@update:model-value="(value:string) => selectSubDistrict(value, '2')"
|
||||||
|
use-input
|
||||||
|
input-debounce="0"
|
||||||
|
@filter="(inputValue:string,
|
||||||
|
doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictCOps'
|
||||||
|
) "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
hide-bottom-space
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
readonly
|
||||||
|
borderless
|
||||||
|
v-model="codec"
|
||||||
|
:style="!edit ? '' : 'padding:0 12px;'"
|
||||||
|
:label="`${'รหัสไปรษณีย์'}`"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-form>
|
||||||
|
</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>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted } from "vue";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
import type {
|
||||||
|
Address,
|
||||||
|
DataOption,
|
||||||
|
zipCodeOption,
|
||||||
|
} from "@/components/information/interface/profileType";
|
||||||
|
import { defaultAddress } from "@/components/information/interface/profileType";
|
||||||
|
import HeaderTop from "@/components/information/top.vue";
|
||||||
|
import type { RequestItemsHistoryObject } from "@/components/information/interface/request/Address";
|
||||||
|
import type { ResponseObject } from "@/components/information/interface/response/Address";
|
||||||
|
import HistoryTable from "@/components/TableHistory.vue";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
import type { AddressOps } from "@/components/information/interface/index/Main";
|
||||||
|
import type { QTableProps } from "quasar";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
statusEdit: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
statusAdd: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const emit = defineEmits(["update:statusEdit"]);
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const $q = useQuasar();
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
|
||||||
|
const edit = ref<boolean>(false);
|
||||||
|
const addressData = ref<Address>(defaultAddress);
|
||||||
|
const myform = ref<any>();
|
||||||
|
const codep = 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>({
|
||||||
|
provinceOps: [],
|
||||||
|
districtOps: [],
|
||||||
|
districtCOps: [],
|
||||||
|
subdistrictOps: [],
|
||||||
|
subdistrictCOps: [],
|
||||||
|
});
|
||||||
|
const OpsFilter = ref<AddressOps>({
|
||||||
|
provinceOps: [],
|
||||||
|
districtOps: [],
|
||||||
|
districtCOps: [],
|
||||||
|
subdistrictOps: [],
|
||||||
|
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 () => {
|
||||||
|
await getNewData();
|
||||||
|
emit("update:statusEdit", false);
|
||||||
|
defaultAdd();
|
||||||
|
});
|
||||||
|
|
||||||
|
const statusAdd = () => props.statusAdd;
|
||||||
|
|
||||||
|
const defaultAdd = () => {
|
||||||
|
if (props.statusAdd) {
|
||||||
|
edit.value = props.statusAdd;
|
||||||
|
addressData.value = {
|
||||||
|
address: null,
|
||||||
|
provinceId: null,
|
||||||
|
districtId: null,
|
||||||
|
subdistrictId: null,
|
||||||
|
addressC: null,
|
||||||
|
provinceIdC: null,
|
||||||
|
districtIdC: null,
|
||||||
|
subdistrictIdC: null,
|
||||||
|
same: "0",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const filterSelector = (val: any, update: Function, refData: string) => {
|
||||||
|
switch (refData) {
|
||||||
|
case "provinceOps":
|
||||||
|
update(() => {
|
||||||
|
Ops.value.provinceOps = OpsFilter.value.provinceOps.filter(
|
||||||
|
(v: DataOption) => v.name.indexOf(val) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "districtOps":
|
||||||
|
update(() => {
|
||||||
|
Ops.value.districtOps = OpsFilter.value.districtOps.filter(
|
||||||
|
(v: DataOption) => v.name.indexOf(val) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "districtCOps":
|
||||||
|
update(() => {
|
||||||
|
Ops.value.districtCOps = OpsFilter.value.districtCOps.filter(
|
||||||
|
(v: DataOption) => v.name.indexOf(val) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "subdistrictOps":
|
||||||
|
update(() => {
|
||||||
|
Ops.value.subdistrictOps = OpsFilter.value.subdistrictOps.filter(
|
||||||
|
(v: DataOption) => v.name.indexOf(val) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "subdistrictCOps":
|
||||||
|
update(() => {
|
||||||
|
Ops.value.subdistrictCOps = OpsFilter.value.subdistrictCOps.filter(
|
||||||
|
(v: DataOption) => v.name.indexOf(val) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
|
||||||
|
*/
|
||||||
|
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 () => {
|
||||||
|
myform.value.reset();
|
||||||
|
await getNewData();
|
||||||
|
};
|
||||||
|
|
||||||
|
const getNewData = async () => {
|
||||||
|
await fetchData();
|
||||||
|
await fetchProvince();
|
||||||
|
await fetchDistrict(addressData.value.provinceId, "1");
|
||||||
|
await fetchDistrict(addressData.value.provinceIdC, "2");
|
||||||
|
await fetchSubDistrict(addressData.value.districtId, "1");
|
||||||
|
await fetchSubDistrict(addressData.value.districtIdC, "2");
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchData = async () => {
|
||||||
|
if (route.params.id) {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.profileAdrsId(route.params.id.toString()))
|
||||||
|
.then((res) => {
|
||||||
|
const data: ResponseObject = res.data.result;
|
||||||
|
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) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
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 addData = async () => {
|
||||||
|
// 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 () => {
|
||||||
|
await myform.value.validate().then(async (success: boolean) => {
|
||||||
|
if (success) {
|
||||||
|
if (props.statusAdd) {
|
||||||
|
await addData();
|
||||||
|
} else {
|
||||||
|
await editData();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectProvince = async (e: string | null, name: string) => {
|
||||||
|
if (e != null) {
|
||||||
|
if (name == "1") {
|
||||||
|
addressData.value.districtId = "";
|
||||||
|
addressData.value.subdistrictId = "";
|
||||||
|
codep.value = "";
|
||||||
|
} else {
|
||||||
|
addressData.value.districtIdC = "";
|
||||||
|
addressData.value.subdistrictIdC = "";
|
||||||
|
codec.value = "";
|
||||||
|
}
|
||||||
|
myform.value.resetValidation();
|
||||||
|
await fetchDistrict(e, name);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectDistrict = async (e: string | null, name: string) => {
|
||||||
|
if (e != null) {
|
||||||
|
if (name == "1") {
|
||||||
|
addressData.value.subdistrictId = "";
|
||||||
|
codep.value = "";
|
||||||
|
} else {
|
||||||
|
addressData.value.subdistrictIdC = "";
|
||||||
|
codec.value = "";
|
||||||
|
}
|
||||||
|
myform.value.resetValidation();
|
||||||
|
await fetchSubDistrict(e, name);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectSubDistrict = (e: string | null, name: string) => {
|
||||||
|
if (e != null) {
|
||||||
|
if (name == "1") {
|
||||||
|
const findcode = Ops.value.subdistrictOps.filter((r) => r.id == e);
|
||||||
|
const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
|
||||||
|
codep.value = namecode;
|
||||||
|
} else {
|
||||||
|
const findcode = Ops.value.subdistrictCOps.filter((r) => r.id == e);
|
||||||
|
const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
|
||||||
|
codec.value = namecode;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchProvince = async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.province)
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
let option: DataOption[] = [];
|
||||||
|
data.map((r: any) => {
|
||||||
|
option.push({ id: r.id.toString(), name: r.name.toString() });
|
||||||
|
});
|
||||||
|
Ops.value.provinceOps = option;
|
||||||
|
OpsFilter.value.provinceOps = option;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchDistrict = async (id: string | null, position: string) => {
|
||||||
|
if (id != null && id != "") {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.listDistrict(id))
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
let option: DataOption[] = [];
|
||||||
|
data.map((r: any) => {
|
||||||
|
option.push({ id: r.id.toString(), name: r.name.toString() });
|
||||||
|
});
|
||||||
|
if (position == "1") {
|
||||||
|
Ops.value.districtOps = option;
|
||||||
|
OpsFilter.value.districtOps = option;
|
||||||
|
} else {
|
||||||
|
Ops.value.districtCOps = option;
|
||||||
|
OpsFilter.value.districtCOps = option;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchSubDistrict = async (id: string | null, position: string) => {
|
||||||
|
if (id != null && id != "") {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.listSubDistrict(id))
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
let option: zipCodeOption[] = [];
|
||||||
|
data.map((r: any) => {
|
||||||
|
option.push({
|
||||||
|
id: r.id.toString(),
|
||||||
|
name: r.name.toString(),
|
||||||
|
zipCode: r.zipCode.toString(),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
if (position == "1") {
|
||||||
|
Ops.value.subdistrictOps = option;
|
||||||
|
OpsFilter.value.subdistrictOps = option;
|
||||||
|
} else {
|
||||||
|
Ops.value.subdistrictCOps = option;
|
||||||
|
OpsFilter.value.subdistrictCOps = option;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const changeBtn = async () => {
|
||||||
|
if (edit.value == true) {
|
||||||
|
if (props.statusEdit === true) {
|
||||||
|
edit.value = false;
|
||||||
|
} else {
|
||||||
|
emit("update:statusEdit", true);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
emit("update:statusEdit", false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getClass = (val: boolean) => {
|
||||||
|
return {
|
||||||
|
"full-width inputgreen cursor-pointer": val,
|
||||||
|
"full-width cursor-pointer": !val,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
</script>
|
||||||
980
src/components/information/Assessment.vue
Normal file
980
src/components/information/Assessment.vue
Normal file
|
|
@ -0,0 +1,980 @@
|
||||||
|
<!-- card ผลการประเมินการปฏิบัติราชการ -->
|
||||||
|
<template>
|
||||||
|
<q-card flat bordered class="col-12 q-px-lg q-pa-md">
|
||||||
|
<q-form ref="myForm">
|
||||||
|
<ProfileTable
|
||||||
|
:rows="rows"
|
||||||
|
:columns="columns"
|
||||||
|
:filter="filter"
|
||||||
|
:visible-columns="visibleColumns"
|
||||||
|
v-model:inputfilter="filter"
|
||||||
|
v-model:inputvisible="visibleColumns"
|
||||||
|
:add="clickAdd"
|
||||||
|
name="ผลการประเมินการปฏิบัติราชการ"
|
||||||
|
icon="mdi-clipboard-text"
|
||||||
|
:statusEdit="statusEdit"
|
||||||
|
>
|
||||||
|
<template #columns="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-td
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
@click="selectData(props)"
|
||||||
|
class="cursor-pointer"
|
||||||
|
>
|
||||||
|
<div v-if="col.name == 'date'" class="table_ellipsis">
|
||||||
|
{{ date2Thai(col.value) }}
|
||||||
|
</div>
|
||||||
|
<div v-else-if="col.name == 'name'" class="table_ellipsis">
|
||||||
|
{{ textPoint(props.row.pointSum) }}
|
||||||
|
{{ textRangePoint(props.row.pointSum) }}
|
||||||
|
</div>
|
||||||
|
<div v-else class="table_ellipsis">
|
||||||
|
{{ col.value }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
<q-td auto-width>
|
||||||
|
<q-btn
|
||||||
|
color="info"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
round
|
||||||
|
size="14px"
|
||||||
|
icon="mdi-history"
|
||||||
|
@click="clickHistory(props.row)"
|
||||||
|
/>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</ProfileTable>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
<!-- popup Edit window-->
|
||||||
|
<q-dialog v-model="modal" persistent>
|
||||||
|
<q-card style="width: 600px">
|
||||||
|
<q-form ref="myForm">
|
||||||
|
<DialogHeader
|
||||||
|
tittle="ผลการประเมินการปฏิบัติราชการ"
|
||||||
|
:close="clickClose"
|
||||||
|
/>
|
||||||
|
<q-separator />
|
||||||
|
<q-card-section class="q-p-sm">
|
||||||
|
<div
|
||||||
|
class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
|
||||||
|
>
|
||||||
|
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||||
|
<datepicker
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
:readonly="!edit"
|
||||||
|
v-model="date"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
:enableTimePicker="false"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
week-start="0"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
|
<template #year-overlay-value="{ value }">{{
|
||||||
|
parseInt(value + 543)
|
||||||
|
}}</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
:borderless="!edit"
|
||||||
|
:model-value="date2Thai(date)"
|
||||||
|
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'วันที่ได้รับ'}`"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon
|
||||||
|
name="event"
|
||||||
|
class="cursor-pointer"
|
||||||
|
:style="
|
||||||
|
edit
|
||||||
|
? 'color: var(--q-primary)'
|
||||||
|
: 'color: var(--q-grey)'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
</q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="col-6">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
:readonly="!edit"
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="point"
|
||||||
|
:rules="[(val) => !!val || `${'กรุณากรอกคะแนน'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'คะแนน'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
type="number"
|
||||||
|
/>
|
||||||
|
</div> -->
|
||||||
|
<div class="col-6">
|
||||||
|
<q-input
|
||||||
|
input-class="text-right"
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
:readonly="!edit"
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="point1Total"
|
||||||
|
:rules="[(val) => !!val || `${'กรุณากรอกส่วนที่1 (คะแนน)'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'ส่วนที่1 (คะแนน)'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
type="number"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<q-input
|
||||||
|
input-class="text-right"
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
:readonly="!edit"
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="point1"
|
||||||
|
:rules="[
|
||||||
|
(val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่1 (คะแนน)'}`,
|
||||||
|
]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'ผลประเมินส่วนที่1 (คะแนน)'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
type="number"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<q-input
|
||||||
|
input-class="text-right"
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
:readonly="!edit"
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="point2Total"
|
||||||
|
:rules="[(val) => !!val || `${'กรุณากรอกส่วนที่2 (คะแนน)'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'ส่วนที่2 (คะแนน)'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
type="number"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<q-input
|
||||||
|
input-class="text-right"
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
:readonly="!edit"
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="point2"
|
||||||
|
:rules="[
|
||||||
|
(val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่2 (คะแนน)'}`,
|
||||||
|
]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'ผลประเมินส่วนที่2 (คะแนน)'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
type="number"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<q-input
|
||||||
|
input-class="text-right"
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
:readonly="!edit"
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="pointSumTotal"
|
||||||
|
:rules="[(val) => !!val || `${'กรุณากรอกผลรวม (คะแนน)'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'ผลรวม (คะแนน)'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
type="number"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<q-input
|
||||||
|
input-class="text-right"
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
:readonly="!edit"
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="pointSum"
|
||||||
|
:rules="[
|
||||||
|
(val) => !!val || `${'กรุณากรอกผลประเมินรวม (คะแนน)'}`,
|
||||||
|
]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'ผลประเมินรวม (คะแนน)'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
type="number"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="text-subtitle2 col-12 row items-center">
|
||||||
|
<q-space></q-space>
|
||||||
|
ผลการประเมิน:
|
||||||
|
<div class="text-bold items-center q-px-sm">
|
||||||
|
{{ textPoint(pointSum) }}
|
||||||
|
</div>
|
||||||
|
{{ textRangePoint(pointSum) }}
|
||||||
|
</div>
|
||||||
|
<!-- <div class="col-12">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
:readonly="!edit"
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="name"
|
||||||
|
:rules="[(val) => !!val || `${'กรุณากรอกชื่อแบบประเมิน'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'ชื่อแบบประเมิน'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
/>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
<DialogFooter
|
||||||
|
:cancel="clickCancel"
|
||||||
|
:edit="clickEdit"
|
||||||
|
:save="clickSave"
|
||||||
|
:validate="validateData"
|
||||||
|
:clickNext="clickNext"
|
||||||
|
:clickPrevious="clickPrevious"
|
||||||
|
:clickDelete="clickDelete"
|
||||||
|
v-model:editvisible="edit"
|
||||||
|
v-model:next="next"
|
||||||
|
v-model:previous="previous"
|
||||||
|
v-model:modalEdit="modalEdit"
|
||||||
|
/>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
<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 == 'date' || col.name == 'createdAt'"
|
||||||
|
class="table_ellipsis"
|
||||||
|
>
|
||||||
|
{{ date2Thai(col.value) }}
|
||||||
|
</div>
|
||||||
|
<div v-else-if="col.name == 'name'" class="table_ellipsis">
|
||||||
|
{{ textPoint(props.row.pointSum) }}
|
||||||
|
{{ textRangePoint(props.row.pointSum) }}
|
||||||
|
</div>
|
||||||
|
<div v-else class="table_ellipsis">
|
||||||
|
{{ col.value }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</HistoryTable>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, ref, watch } from "vue";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
import { useProfileDataStore } from "@/modules/04_registry/store";
|
||||||
|
|
||||||
|
import ProfileTable from "@/modules/04_registry/components/Table.vue";
|
||||||
|
import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
|
||||||
|
import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import type {
|
||||||
|
RequestItemsObject,
|
||||||
|
DataProps,
|
||||||
|
} from "@/modules/04_registry/interface/request/Assessment";
|
||||||
|
import type { ResponseObject } from "@/modules/04_registry/interface/response/Assessment";
|
||||||
|
import type { DataOption } from "@/modules/04_registry/interface/index/Main";
|
||||||
|
import HistoryTable from "@/components/TableHistory.vue";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
import type { QTableProps } from "quasar";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
statusEdit: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
profileType: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const store = useProfileDataStore();
|
||||||
|
const { profileData, changeProfileColumns } = store;
|
||||||
|
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
|
||||||
|
mixin;
|
||||||
|
const route = useRoute();
|
||||||
|
const id = ref<string>("");
|
||||||
|
const name = ref<string>();
|
||||||
|
const point1Total = ref<number>();
|
||||||
|
const point1 = ref<number>();
|
||||||
|
const point2Total = ref<number>();
|
||||||
|
const point2 = ref<number>();
|
||||||
|
const pointSumTotal = ref<number>();
|
||||||
|
const pointSum = ref<number>();
|
||||||
|
const date = ref<Date>(new Date());
|
||||||
|
const myForm = ref<any>(); //form data input
|
||||||
|
const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
|
||||||
|
const modal = ref<boolean>(false); //modal add detail
|
||||||
|
const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
|
||||||
|
const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
|
||||||
|
const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
|
||||||
|
const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
|
||||||
|
const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
|
||||||
|
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
|
||||||
|
const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
|
||||||
|
const tittleHistory = ref<string>("ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ"); //
|
||||||
|
const filterHistory = ref<string>(""); //search data table history
|
||||||
|
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
|
||||||
|
const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
|
||||||
|
const profileId = ref<string>(
|
||||||
|
route.params.id ? route.params.id.toString() : ""
|
||||||
|
);
|
||||||
|
const rows = ref<RequestItemsObject[]>([]);
|
||||||
|
const filter = ref<string>(""); //search data table
|
||||||
|
const visibleColumns = ref<String[]>([]);
|
||||||
|
profileData.assessment.columns.length == 0
|
||||||
|
? (visibleColumns.value = [
|
||||||
|
"point1Total",
|
||||||
|
"point1",
|
||||||
|
"point2Total",
|
||||||
|
"point2",
|
||||||
|
"pointSumTotal",
|
||||||
|
"pointSum",
|
||||||
|
"name",
|
||||||
|
"date",
|
||||||
|
])
|
||||||
|
: (visibleColumns.value = profileData.assessment.columns);
|
||||||
|
const columns = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "date",
|
||||||
|
align: "left",
|
||||||
|
label: "วันที่ได้รับ",
|
||||||
|
sortable: true,
|
||||||
|
field: "date",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "point1Total",
|
||||||
|
align: "left",
|
||||||
|
label: "ส่วนที่1 (คะแนน)",
|
||||||
|
sortable: true,
|
||||||
|
field: "point1Total",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "point1",
|
||||||
|
align: "left",
|
||||||
|
label: "ผลประเมินส่วนที่1 (คะแนน)",
|
||||||
|
sortable: true,
|
||||||
|
field: "point1",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "point2Total",
|
||||||
|
align: "left",
|
||||||
|
label: "ส่วนที่2 (คะแนน)",
|
||||||
|
sortable: true,
|
||||||
|
field: "point2Total",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "point2",
|
||||||
|
align: "left",
|
||||||
|
label: "ผลประเมินส่วนที่2 (คะแนน)",
|
||||||
|
sortable: true,
|
||||||
|
field: "point2",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "pointSumTotal",
|
||||||
|
align: "left",
|
||||||
|
label: "ผลรวม (คะแนน)",
|
||||||
|
sortable: true,
|
||||||
|
field: "pointSumTotal",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "pointSum",
|
||||||
|
align: "left",
|
||||||
|
label: "ผลประเมินรวม (คะแนน)",
|
||||||
|
sortable: true,
|
||||||
|
field: "pointSum",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "name",
|
||||||
|
align: "left",
|
||||||
|
label: "ผลประเมิน",
|
||||||
|
sortable: true,
|
||||||
|
field: "name",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const columnsHistory = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "point1Total",
|
||||||
|
align: "left",
|
||||||
|
label: "ส่วนที่1 (คะแนน)",
|
||||||
|
sortable: true,
|
||||||
|
field: "point1Total",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "point1",
|
||||||
|
align: "left",
|
||||||
|
label: "ผลประเมินส่วนที่1 (คะแนน)",
|
||||||
|
sortable: true,
|
||||||
|
field: "point1",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "point2Total",
|
||||||
|
align: "left",
|
||||||
|
label: "ส่วนที่2 (คะแนน)",
|
||||||
|
sortable: true,
|
||||||
|
field: "point2Total",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "point2",
|
||||||
|
align: "left",
|
||||||
|
label: "ผลประเมินส่วนที่2 (คะแนน)",
|
||||||
|
sortable: true,
|
||||||
|
field: "point2",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "pointSumTotal",
|
||||||
|
align: "left",
|
||||||
|
label: "ผลรวม (คะแนน)",
|
||||||
|
sortable: true,
|
||||||
|
field: "pointSumTotal",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "pointSum",
|
||||||
|
align: "left",
|
||||||
|
label: "ผลประเมินรวม (คะแนน)",
|
||||||
|
sortable: true,
|
||||||
|
field: "pointSum",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "name",
|
||||||
|
align: "left",
|
||||||
|
label: "ผลประเมิน",
|
||||||
|
sortable: true,
|
||||||
|
field: "name",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "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[]>([
|
||||||
|
"point1Total",
|
||||||
|
"point1",
|
||||||
|
"point2Total",
|
||||||
|
"point2",
|
||||||
|
"pointSumTotal",
|
||||||
|
"pointSum",
|
||||||
|
"name",
|
||||||
|
"date",
|
||||||
|
"createdFullName",
|
||||||
|
"createdAt",
|
||||||
|
]);
|
||||||
|
|
||||||
|
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
|
||||||
|
await changeProfileColumns("assessment", count);
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
|
||||||
|
const fetchData = async () => {
|
||||||
|
if (profileId.value) {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.profileAssessmentId(profileId.value))
|
||||||
|
.then((res) => {
|
||||||
|
let data = res.data.result;
|
||||||
|
rows.value = [];
|
||||||
|
data.map((e: ResponseObject) => {
|
||||||
|
rows.value.push({
|
||||||
|
id: e.id,
|
||||||
|
name: e.name,
|
||||||
|
point1Total: e.point1Total,
|
||||||
|
point1: e.point1,
|
||||||
|
point2Total: e.point2Total,
|
||||||
|
point2: e.point2,
|
||||||
|
pointSumTotal: e.pointSumTotal,
|
||||||
|
pointSum: e.pointSum,
|
||||||
|
date: new Date(e.date),
|
||||||
|
createdAt: new Date(e.createdAt),
|
||||||
|
createdFullName: e.createdFullName,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดดูข้อมูลก่อนหน้า
|
||||||
|
*/
|
||||||
|
const clickPrevious = async () => {
|
||||||
|
edit.value = false;
|
||||||
|
rowIndex.value -= 1;
|
||||||
|
await getData();
|
||||||
|
await checkRowPage();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดดูข้อมูลต่อไป
|
||||||
|
*/
|
||||||
|
const clickNext = async () => {
|
||||||
|
edit.value = false;
|
||||||
|
rowIndex.value += 1;
|
||||||
|
await getData();
|
||||||
|
await checkRowPage();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดดูข้อมูลต่อไป
|
||||||
|
*/
|
||||||
|
const getData = () => {
|
||||||
|
const row = rows.value[rowIndex.value];
|
||||||
|
name.value = row.name;
|
||||||
|
point1Total.value = row.point1Total;
|
||||||
|
point1.value = row.point1;
|
||||||
|
point2Total.value = row.point2Total;
|
||||||
|
point2.value = row.point2;
|
||||||
|
pointSumTotal.value = row.pointSumTotal;
|
||||||
|
pointSum.value = row.pointSum;
|
||||||
|
date.value = row.date;
|
||||||
|
id.value = row.id;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
|
||||||
|
*/
|
||||||
|
const checkRowPage = () => {
|
||||||
|
editRow.value = false;
|
||||||
|
next.value = true;
|
||||||
|
previous.value = true;
|
||||||
|
if (rowIndex.value + 1 >= rows.value.length) {
|
||||||
|
next.value = false;
|
||||||
|
}
|
||||||
|
if (rowIndex.value - 1 < 0) {
|
||||||
|
previous.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปุ่มแก้ไขใน dialog
|
||||||
|
*/
|
||||||
|
const clickEdit = () => {
|
||||||
|
editRow.value = false;
|
||||||
|
next.value = false;
|
||||||
|
previous.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปุ่มเพิ่มด้านบน table
|
||||||
|
*/
|
||||||
|
const clickAdd = async () => {
|
||||||
|
editRow.value = false;
|
||||||
|
await addData();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดบันทึกใน dialog
|
||||||
|
*/
|
||||||
|
const clickSave = async () => {
|
||||||
|
myForm.value.validate().then(async (result: boolean) => {
|
||||||
|
if (result) {
|
||||||
|
if (modalEdit.value) {
|
||||||
|
await editData();
|
||||||
|
} else {
|
||||||
|
await saveData();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* บันทึกเพิ่มข้อมูล
|
||||||
|
*/
|
||||||
|
const saveData = async () => {
|
||||||
|
if (profileId.value) {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.post(config.API.profileAssessmentId(profileId.value), {
|
||||||
|
id: id.value,
|
||||||
|
name: name.value,
|
||||||
|
point1Total: point1Total.value,
|
||||||
|
point1: point1.value,
|
||||||
|
point2Total: point2Total.value,
|
||||||
|
point2: point2.value,
|
||||||
|
pointSumTotal: pointSumTotal.value,
|
||||||
|
pointSum: pointSum.value,
|
||||||
|
date: dateToISO(date.value),
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
|
modal.value = false;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* บันทึกแก้ไขข้อมูล
|
||||||
|
*/
|
||||||
|
const editData = async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.put(config.API.profileAssessmentId(id.value), {
|
||||||
|
id: id.value,
|
||||||
|
name: name.value,
|
||||||
|
point1Total: point1Total.value,
|
||||||
|
point1: point1.value,
|
||||||
|
point2Total: point2Total.value,
|
||||||
|
point2: point2.value,
|
||||||
|
pointSumTotal: pointSumTotal.value,
|
||||||
|
pointSum: pointSum.value,
|
||||||
|
date: dateToISO(date.value),
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
|
modal.value = false;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ลบลบข้อมูล
|
||||||
|
*/
|
||||||
|
const clickDelete = async () => {
|
||||||
|
$q.dialog({
|
||||||
|
title: `ลบข้อมูล`,
|
||||||
|
message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
|
||||||
|
cancel: "ยกเลิก",
|
||||||
|
ok: "ยืนยัน",
|
||||||
|
persistent: true,
|
||||||
|
})
|
||||||
|
.onOk(async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.delete(config.API.profileAssessmentId(id.value))
|
||||||
|
.then((res) => {
|
||||||
|
success($q, "ลบข้อมูลสำเร็จ");
|
||||||
|
modal.value = false;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.onCancel(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปิด dialog
|
||||||
|
*/
|
||||||
|
const clickClose = async () => {
|
||||||
|
if (editRow.value == true) {
|
||||||
|
$q.dialog({
|
||||||
|
title: `ข้อมูลมีการแก้ไข`,
|
||||||
|
message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
|
||||||
|
cancel: "ยกเลิก",
|
||||||
|
ok: "ยืนยัน",
|
||||||
|
persistent: true,
|
||||||
|
}).onOk(async () => {
|
||||||
|
modal.value = false;
|
||||||
|
next.value = false;
|
||||||
|
previous.value = false;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
modal.value = false;
|
||||||
|
next.value = false;
|
||||||
|
previous.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดเลือกข้อมูลที่จะแก้ไข
|
||||||
|
* @param props ค่า props ใน row ที่เลือก
|
||||||
|
*/
|
||||||
|
const selectData = async (props: DataProps) => {
|
||||||
|
modalEdit.value = true;
|
||||||
|
modal.value = true;
|
||||||
|
edit.value = false;
|
||||||
|
rawItem.value = props.row;
|
||||||
|
rowIndex.value = props.rowIndex;
|
||||||
|
name.value = props.row.name;
|
||||||
|
point1Total.value = props.row.point1Total;
|
||||||
|
point1.value = props.row.point1;
|
||||||
|
point2Total.value = props.row.point2Total;
|
||||||
|
point2.value = props.row.point2;
|
||||||
|
pointSumTotal.value = props.row.pointSumTotal;
|
||||||
|
pointSum.value = props.row.pointSum;
|
||||||
|
date.value = props.row.date;
|
||||||
|
id.value = props.row.id;
|
||||||
|
await checkRowPage();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปุ่มเพิ่มบน table
|
||||||
|
*/
|
||||||
|
const addData = () => {
|
||||||
|
modalEdit.value = false;
|
||||||
|
modal.value = true;
|
||||||
|
edit.value = true;
|
||||||
|
name.value = "";
|
||||||
|
point1Total.value = 0;
|
||||||
|
point1.value = 0;
|
||||||
|
point2Total.value = 0;
|
||||||
|
point2.value = 0;
|
||||||
|
pointSumTotal.value = 0;
|
||||||
|
pointSum.value = 0;
|
||||||
|
date.value = new Date();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
|
||||||
|
*/
|
||||||
|
const clickCancel = async () => {
|
||||||
|
if (editRow.value == true) {
|
||||||
|
$q.dialog({
|
||||||
|
title: `ข้อมูลมีการแก้ไข`,
|
||||||
|
message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
|
||||||
|
cancel: "ยกเลิก",
|
||||||
|
ok: "ยืนยัน",
|
||||||
|
persistent: true,
|
||||||
|
}).onOk(async () => {
|
||||||
|
edit.value = false;
|
||||||
|
await checkRowPage();
|
||||||
|
await getData();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
edit.value = false;
|
||||||
|
await checkRowPage();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* เช็คว่ามีการแก้ไขข้อมูล
|
||||||
|
*/
|
||||||
|
const clickEditRow = () => {
|
||||||
|
editRow.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
|
||||||
|
* @param row ข้อมูล row ที่ดูประวัติการแก้ไข
|
||||||
|
*/
|
||||||
|
const clickHistory = async (row: RequestItemsObject) => {
|
||||||
|
tittleHistory.value = "ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ";
|
||||||
|
modalHistory.value = true;
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.profileAssessmentHisId(row.id))
|
||||||
|
.then((res) => {
|
||||||
|
let data = res.data.result;
|
||||||
|
rowsHistory.value = [];
|
||||||
|
data.map((e: ResponseObject) => {
|
||||||
|
rowsHistory.value.push({
|
||||||
|
id: e.id,
|
||||||
|
name: e.name,
|
||||||
|
point1Total: e.point1Total,
|
||||||
|
point1: e.point1,
|
||||||
|
point2Total: e.point2Total,
|
||||||
|
point2: e.point2,
|
||||||
|
pointSumTotal: e.pointSumTotal,
|
||||||
|
pointSum: e.pointSum,
|
||||||
|
date: new Date(e.date),
|
||||||
|
createdAt: new Date(e.createdAt),
|
||||||
|
createdFullName: e.createdFullName,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* validate input ใน dialog
|
||||||
|
*/
|
||||||
|
const validateData = async () => {
|
||||||
|
checkValidate.value = true;
|
||||||
|
await myForm.value.validate().then((result: boolean) => {
|
||||||
|
if (result == false) {
|
||||||
|
checkValidate.value = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
|
||||||
|
* @param val ข้อมูล input สำหรับแก้ไขหรือไม่
|
||||||
|
*/
|
||||||
|
const getClass = (val: boolean) => {
|
||||||
|
return {
|
||||||
|
"full-width inputgreen cursor-pointer": val,
|
||||||
|
"full-width cursor-pointer": !val,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const textRangePoint = (val: number | undefined) => {
|
||||||
|
if (val == undefined) val = -1;
|
||||||
|
if (val >= 0 && val <= 60) return "(ต่ำกว่าร้อยละ 60)";
|
||||||
|
if (val >= 60 && val <= 69) return "(ร้อยละ 60 – 69)";
|
||||||
|
if (val >= 70 && val <= 79) return "(ร้อยละ 70 – 79)";
|
||||||
|
if (val >= 80 && val <= 89) return "(ร้อยละ 80 – 89)";
|
||||||
|
if (val >= 90 && val <= 100) return "(ร้อยละ 90 - 100)";
|
||||||
|
else return "";
|
||||||
|
};
|
||||||
|
|
||||||
|
const textPoint = (val: number | undefined) => {
|
||||||
|
if (val == undefined) val = -1;
|
||||||
|
if (val >= 0 && val <= 60) return "ต้องปรับปรุง";
|
||||||
|
if (val >= 60 && val <= 69) return "พอใช้";
|
||||||
|
if (val >= 70 && val <= 79) return "ดี";
|
||||||
|
if (val >= 80 && val <= 89) return "ดีมาก";
|
||||||
|
if (val >= 90 && val <= 100) return "ดีเด่น";
|
||||||
|
else return "-";
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.modalfix {
|
||||||
|
position: fixed !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
827
src/components/information/Certicate.vue
Normal file
827
src/components/information/Certicate.vue
Normal file
|
|
@ -0,0 +1,827 @@
|
||||||
|
<!-- card ใบอนุญาตประกอบอาชีพ -->
|
||||||
|
<template>
|
||||||
|
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
|
||||||
|
<q-form ref="myForm">
|
||||||
|
<ProfileTable
|
||||||
|
:rows="rows"
|
||||||
|
:columns="columns"
|
||||||
|
:filter="filter"
|
||||||
|
:visible-columns="visibleColumns"
|
||||||
|
v-model:inputfilter="filter"
|
||||||
|
v-model:inputvisible="visibleColumns"
|
||||||
|
:add="clickAdd"
|
||||||
|
:name="
|
||||||
|
profileType == 'employee'
|
||||||
|
? 'ใบอนุญาตของลูกจ้าง'
|
||||||
|
: 'ใบอนุญาตประกอบอาชีพ'
|
||||||
|
"
|
||||||
|
icon="mdi-book"
|
||||||
|
:statusEdit="statusEdit"
|
||||||
|
>
|
||||||
|
<template #columns="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-td
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
@click="selectData(props)"
|
||||||
|
class="cursor-pointer"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-if="col.name == 'issueDate' || col.name == 'expireDate'"
|
||||||
|
class="table_ellipsis"
|
||||||
|
>
|
||||||
|
{{ date2Thai(col.value) }}
|
||||||
|
</div>
|
||||||
|
<div v-else class="table_ellipsis">
|
||||||
|
{{ col.value }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
<q-td auto-width>
|
||||||
|
<q-btn
|
||||||
|
color="info"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
round
|
||||||
|
size="14px"
|
||||||
|
icon="mdi-history"
|
||||||
|
@click="clickHistory(props.row)"
|
||||||
|
/>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</ProfileTable>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
<!-- popup Edit window-->
|
||||||
|
<q-dialog v-model="modal" persistent>
|
||||||
|
<q-card style="width: 600px">
|
||||||
|
<q-form ref="myForm">
|
||||||
|
<DialogHeader
|
||||||
|
:tittle="
|
||||||
|
profileType == 'employee'
|
||||||
|
? 'ใบอนุญาตของลูกจ้าง'
|
||||||
|
: 'ใบอนุญาตประกอบอาชีพ'
|
||||||
|
"
|
||||||
|
:close="clickClose"
|
||||||
|
/>
|
||||||
|
<q-separator />
|
||||||
|
<q-card-section class="q-p-sm">
|
||||||
|
<div
|
||||||
|
class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
|
||||||
|
>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
:readonly="!edit"
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="certificateType"
|
||||||
|
:rules="[(val) => !!val || `${'กรุณากรอกชื่อใบอนุญาต'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'ชื่อใบอนุญาต'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
:readonly="!edit"
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="issuer"
|
||||||
|
:rules="[
|
||||||
|
(val) => !!val || `${'กรุณากรอกหน่วยงานผู้ออกใบอนุญาต'}`,
|
||||||
|
]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'หน่วยงานผู้ออกใบอนุญาต'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
:readonly="!edit"
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="certificateNo"
|
||||||
|
:rules="[(val) => !!val || `${'กรุณากรอกเลขที่ใบอนุญาต'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'เลขที่ใบอนุญาต'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<datepicker
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
:readonly="!edit"
|
||||||
|
v-model="issueDate"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
:enableTimePicker="false"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
week-start="0"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
|
<template #year-overlay-value="{ value }">{{
|
||||||
|
parseInt(value + 543)
|
||||||
|
}}</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
:borderless="!edit"
|
||||||
|
:model-value="date2Thai(issueDate)"
|
||||||
|
:rules="[
|
||||||
|
(val) => !!val || `${'กรุณาเลือกวันที่ออกใบอนุญาต'}`,
|
||||||
|
]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'วันที่ออกใบอนุญาต'}`"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon
|
||||||
|
name="event"
|
||||||
|
class="cursor-pointer"
|
||||||
|
:style="
|
||||||
|
edit
|
||||||
|
? 'color: var(--q-primary)'
|
||||||
|
: 'color: var(--q-grey)'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
</q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<datepicker
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="expireDate"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
:enableTimePicker="false"
|
||||||
|
:min-date="minDate"
|
||||||
|
:readonly="!edit"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
week-start="0"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
|
<template #year-overlay-value="{ value }">{{
|
||||||
|
parseInt(value + 543)
|
||||||
|
}}</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
:borderless="!edit"
|
||||||
|
:model-value="date2Thai(expireDate)"
|
||||||
|
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่หมดอายุ'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'วันที่หมดอายุ'}`"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon
|
||||||
|
name="event"
|
||||||
|
class="cursor-pointer"
|
||||||
|
:style="
|
||||||
|
edit
|
||||||
|
? 'color: var(--q-primary)'
|
||||||
|
: 'color: var(--q-grey)'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
</q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
<DialogFooter
|
||||||
|
:cancel="clickCancel"
|
||||||
|
:edit="clickEdit"
|
||||||
|
:save="clickSave"
|
||||||
|
:validate="validateData"
|
||||||
|
:clickNext="clickNext"
|
||||||
|
:clickPrevious="clickPrevious"
|
||||||
|
:clickDelete="clickDelete"
|
||||||
|
v-model:editvisible="edit"
|
||||||
|
v-model:next="next"
|
||||||
|
v-model:previous="previous"
|
||||||
|
v-model:modalEdit="modalEdit"
|
||||||
|
/>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
<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 == 'expireDate' ||
|
||||||
|
col.name == 'issueDate' ||
|
||||||
|
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>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, ref, watch } from "vue";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
import { useComponentProfileDataStore } from "@/components/information/store/store";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
||||||
|
import ProfileTable from "@/components/information/Table.vue";
|
||||||
|
import DialogHeader from "@/components/information/DialogHeader.vue";
|
||||||
|
import DialogFooter from "@/components/information/DialogFooter.vue";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import type {
|
||||||
|
RequestItemsObject,
|
||||||
|
DataProps,
|
||||||
|
} from "@/components/information/interface/request/Certificate";
|
||||||
|
import type { ResponseObject } from "@/components/information/interface/response/Certificate";
|
||||||
|
import HistoryTable from "@/components/TableHistory.vue";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
import type { QTableProps } from "quasar";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
statusEdit: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
profileType: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const store = useComponentProfileDataStore();
|
||||||
|
const { profileData, changeProfileColumns } = store;
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
|
||||||
|
mixin;
|
||||||
|
const route = useRoute();
|
||||||
|
const id = ref<string>("");
|
||||||
|
const certificateNo = ref<string>();
|
||||||
|
const issuer = ref<string>();
|
||||||
|
const issueDate = ref<Date>(new Date());
|
||||||
|
const expireDate = ref<Date>(new Date());
|
||||||
|
const certificateType = ref<string>();
|
||||||
|
const minDate = ref<Date>();
|
||||||
|
const myForm = ref<any>(); //form data input
|
||||||
|
const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
|
||||||
|
const modal = ref<boolean>(false); //modal add detail
|
||||||
|
const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
|
||||||
|
const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
|
||||||
|
const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
|
||||||
|
const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
|
||||||
|
const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
|
||||||
|
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
|
||||||
|
const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
|
||||||
|
const tittleHistory = ref<string>("ประวัติแก้ไขใบอนุญาตประกอบอาชีพ"); //
|
||||||
|
const filterHistory = ref<string>(""); //search data table history
|
||||||
|
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
|
||||||
|
const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
|
||||||
|
const profileId = ref<string>(
|
||||||
|
route.params.id ? route.params.id.toString() : ""
|
||||||
|
);
|
||||||
|
const rows = ref<RequestItemsObject[]>([]);
|
||||||
|
const filter = ref<string>(""); //search data table
|
||||||
|
const visibleColumns = ref<String[]>([]);
|
||||||
|
profileData.certicate.columns.length == 0
|
||||||
|
? (visibleColumns.value = [
|
||||||
|
"certificateType",
|
||||||
|
"certificateNo",
|
||||||
|
"issuer",
|
||||||
|
"issueDate",
|
||||||
|
"expireDate",
|
||||||
|
])
|
||||||
|
: (visibleColumns.value = profileData.certicate.columns);
|
||||||
|
const columns = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "certificateType",
|
||||||
|
align: "left",
|
||||||
|
label: "ชื่อใบอนุญาต",
|
||||||
|
sortable: true,
|
||||||
|
field: "certificateType",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "issuer",
|
||||||
|
align: "left",
|
||||||
|
label: "หน่วยงานผู้ออกใบอนุญาต",
|
||||||
|
sortable: true,
|
||||||
|
field: "issuer",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "certificateNo",
|
||||||
|
align: "left",
|
||||||
|
label: "เลขที่ใบอนุญาต",
|
||||||
|
sortable: true,
|
||||||
|
field: "certificateNo",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "issueDate",
|
||||||
|
align: "left",
|
||||||
|
label: "วันที่ออกใบอนุญาต",
|
||||||
|
sortable: true,
|
||||||
|
field: "issueDate",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "expireDate",
|
||||||
|
align: "left",
|
||||||
|
label: "วันที่หมดอายุ",
|
||||||
|
sortable: true,
|
||||||
|
field: "expireDate",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const columnsHistory = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "certificateType",
|
||||||
|
align: "left",
|
||||||
|
label: "ชื่อใบอนุญาต",
|
||||||
|
sortable: true,
|
||||||
|
field: "certificateType",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "issuer",
|
||||||
|
align: "left",
|
||||||
|
label: "หน่วยงานผู้ออกใบอนุญาต",
|
||||||
|
sortable: true,
|
||||||
|
field: "issuer",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "certificateNo",
|
||||||
|
align: "left",
|
||||||
|
label: "เลขที่ใบอนุญาต",
|
||||||
|
sortable: true,
|
||||||
|
field: "certificateNo",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "issueDate",
|
||||||
|
align: "left",
|
||||||
|
label: "วันที่ออกใบอนุญาต",
|
||||||
|
sortable: true,
|
||||||
|
field: "issueDate",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "expireDate",
|
||||||
|
align: "left",
|
||||||
|
label: "วันที่หมดอายุ",
|
||||||
|
sortable: true,
|
||||||
|
field: "expireDate",
|
||||||
|
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[]>([
|
||||||
|
"certificateType",
|
||||||
|
"certificateNo",
|
||||||
|
"issuer",
|
||||||
|
"issueDate",
|
||||||
|
"expireDate",
|
||||||
|
"createdFullName",
|
||||||
|
"createdAt",
|
||||||
|
]);
|
||||||
|
|
||||||
|
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
|
||||||
|
await changeProfileColumns("certicate", count);
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
|
||||||
|
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();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดดูข้อมูลก่อนหน้า
|
||||||
|
*/
|
||||||
|
const clickPrevious = async () => {
|
||||||
|
edit.value = false;
|
||||||
|
rowIndex.value -= 1;
|
||||||
|
await getData();
|
||||||
|
await checkRowPage();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดดูข้อมูลต่อไป
|
||||||
|
*/
|
||||||
|
const clickNext = async () => {
|
||||||
|
edit.value = false;
|
||||||
|
rowIndex.value += 1;
|
||||||
|
await getData();
|
||||||
|
await checkRowPage();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดดูข้อมูลต่อไป
|
||||||
|
*/
|
||||||
|
const getData = () => {
|
||||||
|
const row = rows.value[rowIndex.value];
|
||||||
|
certificateNo.value = row.certificateNo;
|
||||||
|
issuer.value = row.issuer;
|
||||||
|
issueDate.value = row.issueDate;
|
||||||
|
expireDate.value = row.expireDate;
|
||||||
|
certificateType.value = row.certificateType;
|
||||||
|
id.value = row.id;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
|
||||||
|
*/
|
||||||
|
const checkRowPage = () => {
|
||||||
|
editRow.value = false;
|
||||||
|
next.value = true;
|
||||||
|
previous.value = true;
|
||||||
|
if (rowIndex.value + 1 >= rows.value.length) {
|
||||||
|
next.value = false;
|
||||||
|
}
|
||||||
|
if (rowIndex.value - 1 < 0) {
|
||||||
|
previous.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปุ่มแก้ไขใน dialog
|
||||||
|
*/
|
||||||
|
const clickEdit = () => {
|
||||||
|
editRow.value = false;
|
||||||
|
next.value = false;
|
||||||
|
previous.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปุ่มเพิ่มด้านบน table
|
||||||
|
*/
|
||||||
|
const clickAdd = async () => {
|
||||||
|
editRow.value = false;
|
||||||
|
await addData();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดบันทึกใน dialog
|
||||||
|
*/
|
||||||
|
const clickSave = async () => {
|
||||||
|
myForm.value.validate().then(async (result: boolean) => {
|
||||||
|
if (result) {
|
||||||
|
if (modalEdit.value) {
|
||||||
|
await editData();
|
||||||
|
} else {
|
||||||
|
await saveData();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* บันทึกเพิ่มข้อมูล
|
||||||
|
*/
|
||||||
|
const saveData = async () => {
|
||||||
|
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();
|
||||||
|
await http
|
||||||
|
.put(config.API.profileCertId(id.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 clickDelete = async () => {
|
||||||
|
$q.dialog({
|
||||||
|
title: `ลบข้อมูล`,
|
||||||
|
message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
|
||||||
|
cancel: "ยกเลิก",
|
||||||
|
ok: "ยืนยัน",
|
||||||
|
persistent: true,
|
||||||
|
})
|
||||||
|
.onOk(async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.delete(config.API.profileCertId(id.value))
|
||||||
|
.then((res) => {
|
||||||
|
success($q, "ลบข้อมูลสำเร็จ");
|
||||||
|
modal.value = false;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.onCancel(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปิด dialog
|
||||||
|
*/
|
||||||
|
const clickClose = async () => {
|
||||||
|
if (editRow.value == true) {
|
||||||
|
$q.dialog({
|
||||||
|
title: `ข้อมูลมีการแก้ไข`,
|
||||||
|
message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
|
||||||
|
cancel: "ยกเลิก",
|
||||||
|
ok: "ยืนยัน",
|
||||||
|
persistent: true,
|
||||||
|
}).onOk(async () => {
|
||||||
|
modal.value = false;
|
||||||
|
next.value = false;
|
||||||
|
previous.value = false;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
modal.value = false;
|
||||||
|
next.value = false;
|
||||||
|
previous.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดเลือกข้อมูลที่จะแก้ไข
|
||||||
|
* @param props ค่า props ใน row ที่เลือก
|
||||||
|
*/
|
||||||
|
const selectData = async (props: DataProps) => {
|
||||||
|
modalEdit.value = true; //กดสำหรับแก้ไขข้อมูล
|
||||||
|
modal.value = true; //modal ที่เด้งขึ้นมา
|
||||||
|
edit.value = false; //ปุ่ม edit ใน modal
|
||||||
|
rawItem.value = props.row;
|
||||||
|
rowIndex.value = props.rowIndex;
|
||||||
|
certificateNo.value = props.row.certificateNo;
|
||||||
|
issuer.value = props.row.issuer;
|
||||||
|
issueDate.value = props.row.issueDate;
|
||||||
|
expireDate.value = props.row.expireDate;
|
||||||
|
certificateType.value = props.row.certificateType;
|
||||||
|
id.value = props.row.id;
|
||||||
|
await checkRowPage();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปุ่มเพิ่มบน table
|
||||||
|
*/
|
||||||
|
const addData = () => {
|
||||||
|
modalEdit.value = false;
|
||||||
|
modal.value = true;
|
||||||
|
edit.value = true;
|
||||||
|
certificateNo.value = "";
|
||||||
|
issuer.value = "";
|
||||||
|
issueDate.value = new Date();
|
||||||
|
expireDate.value = new Date();
|
||||||
|
certificateType.value = "";
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
|
||||||
|
*/
|
||||||
|
const clickCancel = async () => {
|
||||||
|
if (editRow.value == true) {
|
||||||
|
$q.dialog({
|
||||||
|
title: `ข้อมูลมีการแก้ไข`,
|
||||||
|
message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
|
||||||
|
cancel: "ยกเลิก",
|
||||||
|
ok: "ยืนยัน",
|
||||||
|
persistent: true,
|
||||||
|
}).onOk(async () => {
|
||||||
|
edit.value = false;
|
||||||
|
await checkRowPage();
|
||||||
|
await getData();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
edit.value = false;
|
||||||
|
await checkRowPage();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* เช็คว่ามีการแก้ไขข้อมูล
|
||||||
|
*/
|
||||||
|
const clickEditRow = () => {
|
||||||
|
editRow.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
|
||||||
|
* @param row ข้อมูล row ที่ดูประวัติการแก้ไข
|
||||||
|
*/
|
||||||
|
const clickHistory = async (row: RequestItemsObject) => {
|
||||||
|
tittleHistory.value =
|
||||||
|
props.profileType == "employee"
|
||||||
|
? "ประวัติแก้ไขใบอนุญาตของลูกจ้าง"
|
||||||
|
: "ประวัติแก้ไขใบอนุญาตประกอบอาชีพ";
|
||||||
|
modalHistory.value = true;
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.profileCertHisId(row.id))
|
||||||
|
.then((res) => {
|
||||||
|
let data = res.data.result;
|
||||||
|
rowsHistory.value = [];
|
||||||
|
data.map((e: ResponseObject) => {
|
||||||
|
rowsHistory.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();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* validate input ใน dialog
|
||||||
|
*/
|
||||||
|
const validateData = async () => {
|
||||||
|
checkValidate.value = true;
|
||||||
|
await myForm.value.validate().then((result: boolean) => {
|
||||||
|
if (result == false) {
|
||||||
|
checkValidate.value = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
|
||||||
|
* @param val ข้อมูล input สำหรับแก้ไขหรือไม่
|
||||||
|
*/
|
||||||
|
const getClass = (val: boolean) => {
|
||||||
|
return {
|
||||||
|
"full-width inputgreen cursor-pointer": val,
|
||||||
|
"full-width cursor-pointer": !val,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.modalfix {
|
||||||
|
position: fixed !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
838
src/components/information/Coin.vue
Normal file
838
src/components/information/Coin.vue
Normal file
|
|
@ -0,0 +1,838 @@
|
||||||
|
<!-- card ประกาศเกียรติคุณ -->
|
||||||
|
<template>
|
||||||
|
<q-card flat bordered class="col-12 q-px-lg q-pa-md">
|
||||||
|
<q-form ref="myForm">
|
||||||
|
<ProfileTable
|
||||||
|
:rows="rows"
|
||||||
|
:columns="columns"
|
||||||
|
:filter="filter"
|
||||||
|
:visible-columns="visibleColumns"
|
||||||
|
v-model:inputfilter="filter"
|
||||||
|
v-model:inputvisible="visibleColumns"
|
||||||
|
:add="clickAdd"
|
||||||
|
:name="
|
||||||
|
profileType == 'employee' ? 'ประกาศลูกจ้างดีเด่น' : 'ประกาศเกียรติคุณ'
|
||||||
|
"
|
||||||
|
icon="mdi-script-text"
|
||||||
|
:statusEdit="statusEdit"
|
||||||
|
>
|
||||||
|
<template #columns="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-td
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
@click="selectData(props)"
|
||||||
|
class="cursor-pointer"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-if="col.name == 'issueDate' || col.name == 'refCommandDate'"
|
||||||
|
class="table_ellipsis"
|
||||||
|
>
|
||||||
|
{{ col.value == null ? null : date2Thai(col.value) }}
|
||||||
|
</div>
|
||||||
|
<div v-else class="table_ellipsis">
|
||||||
|
{{ col.value }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
<q-td auto-width>
|
||||||
|
<q-btn
|
||||||
|
color="info"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
round
|
||||||
|
size="14px"
|
||||||
|
icon="mdi-history"
|
||||||
|
@click="clickHistory(props.row)"
|
||||||
|
/>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</ProfileTable>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
<!-- popup Edit window-->
|
||||||
|
<q-dialog v-model="modal" persistent>
|
||||||
|
<q-card style="width: 600px">
|
||||||
|
<q-form ref="myForm">
|
||||||
|
<DialogHeader
|
||||||
|
:tittle="
|
||||||
|
profileType == 'employee'
|
||||||
|
? 'ประกาศลูกจ้างดีเด่น'
|
||||||
|
: 'ประกาศเกียรติคุณ'
|
||||||
|
"
|
||||||
|
:close="clickClose"
|
||||||
|
/>
|
||||||
|
<q-separator />
|
||||||
|
<q-card-section class="q-p-sm">
|
||||||
|
<div
|
||||||
|
class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
|
||||||
|
>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<datepicker
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
:readonly="!edit"
|
||||||
|
v-model="issueDate"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
:enableTimePicker="false"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
week-start="0"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
|
<template #year-overlay-value="{ value }">{{
|
||||||
|
parseInt(value + 543)
|
||||||
|
}}</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
:borderless="!edit"
|
||||||
|
:model-value="date2Thai(issueDate)"
|
||||||
|
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'วันที่ได้รับ'}`"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon
|
||||||
|
name="event"
|
||||||
|
class="cursor-pointer"
|
||||||
|
:style="
|
||||||
|
edit
|
||||||
|
? 'color: var(--q-primary)'
|
||||||
|
: 'color: var(--q-grey)'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
</q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
autogrow
|
||||||
|
lazy-rules
|
||||||
|
:readonly="!edit"
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="issuer"
|
||||||
|
:rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'ผู้มีอำนาจลงนาม'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
autogrow
|
||||||
|
lazy-rules
|
||||||
|
:readonly="!edit"
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="detail"
|
||||||
|
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'รายละเอียด'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
:readonly="!edit"
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="refCommandNo"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'เลขที่คำสั่ง'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon
|
||||||
|
name="mdi-file"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="resetFilter"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<datepicker
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
:readonly="!edit"
|
||||||
|
v-model="refCommandDate"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
:enableTimePicker="false"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
week-start="0"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
|
<template #year-overlay-value="{ value }">{{
|
||||||
|
parseInt(value + 543)
|
||||||
|
}}</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
:borderless="!edit"
|
||||||
|
:model-value="
|
||||||
|
refCommandDate == null ? null : date2Thai(refCommandDate)
|
||||||
|
"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon
|
||||||
|
name="event"
|
||||||
|
class="cursor-pointer"
|
||||||
|
:style="
|
||||||
|
edit
|
||||||
|
? 'color: var(--q-primary)'
|
||||||
|
: 'color: var(--q-grey)'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
</q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
<DialogFooter
|
||||||
|
:cancel="clickCancel"
|
||||||
|
:edit="clickEdit"
|
||||||
|
:save="clickSave"
|
||||||
|
:validate="validateData"
|
||||||
|
:clickNext="clickNext"
|
||||||
|
:clickPrevious="clickPrevious"
|
||||||
|
:clickDelete="clickDelete"
|
||||||
|
v-model:editvisible="edit"
|
||||||
|
v-model:next="next"
|
||||||
|
v-model:previous="previous"
|
||||||
|
v-model:modalEdit="modalEdit"
|
||||||
|
/>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
<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 == 'issueDate' ||
|
||||||
|
col.name == 'createdAt' ||
|
||||||
|
col.name == 'refCommandDate'
|
||||||
|
"
|
||||||
|
class="table_ellipsis"
|
||||||
|
>
|
||||||
|
{{ col.value == null ? null : date2Thai(col.value) }}
|
||||||
|
</div>
|
||||||
|
<div v-else class="table_ellipsis">
|
||||||
|
{{ col.value }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</HistoryTable>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, ref, watch } from "vue";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
import { useComponentProfileDataStore } from "@/components/information/store/store";
|
||||||
|
|
||||||
|
import ProfileTable from "@/components/information/Table.vue";
|
||||||
|
import DialogHeader from "@/components/information/DialogHeader.vue";
|
||||||
|
import DialogFooter from "@/components/information/DialogFooter.vue";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import type {
|
||||||
|
RequestItemsObject,
|
||||||
|
Columns,
|
||||||
|
DataProps,
|
||||||
|
} from "@/components/information/interface/request/Coin";
|
||||||
|
import type { ResponseObject } from "@/components/information/interface/response/Coin";
|
||||||
|
import HistoryTable from "@/components/TableHistory.vue";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
import type { QTableProps } from "quasar";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
statusEdit: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
profileType: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const store = useComponentProfileDataStore();
|
||||||
|
const { profileData, changeProfileColumns } = store;
|
||||||
|
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
|
||||||
|
mixin;
|
||||||
|
const route = useRoute();
|
||||||
|
const id = ref<string>("");
|
||||||
|
const issuer = ref<string>();
|
||||||
|
const detail = ref<string>();
|
||||||
|
const issueDate = ref<Date>(new Date());
|
||||||
|
const refCommandNo = ref<string>();
|
||||||
|
const refCommandDate = ref<Date | null>(new Date());
|
||||||
|
const myForm = ref<any>(); //form data input
|
||||||
|
const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
|
||||||
|
const modal = ref<boolean>(false); //modal add detail
|
||||||
|
const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
|
||||||
|
const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
|
||||||
|
const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
|
||||||
|
const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
|
||||||
|
const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
|
||||||
|
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
|
||||||
|
const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
|
||||||
|
const tittleHistory = ref<string>("ประวัติแก้ไขประกาศเกียรติคุณ"); //
|
||||||
|
const filterHistory = ref<string>(""); //search data table history
|
||||||
|
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
|
||||||
|
const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
|
||||||
|
const profileId = ref<string>(
|
||||||
|
route.params.id ? route.params.id.toString() : ""
|
||||||
|
);
|
||||||
|
const rows = ref<RequestItemsObject[]>([]);
|
||||||
|
const filter = ref<string>(""); //search data table
|
||||||
|
const visibleColumns = ref<String[]>([]);
|
||||||
|
profileData.coined.columns.length == 0
|
||||||
|
? (visibleColumns.value = [
|
||||||
|
"issuer",
|
||||||
|
"detail",
|
||||||
|
"issueDate",
|
||||||
|
"refCommandNo",
|
||||||
|
"refCommandDate",
|
||||||
|
])
|
||||||
|
: (visibleColumns.value = profileData.coined.columns);
|
||||||
|
const columns = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "issueDate",
|
||||||
|
align: "left",
|
||||||
|
label: "วันที่ได้รับ",
|
||||||
|
sortable: true,
|
||||||
|
field: "issueDate",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "issuer",
|
||||||
|
align: "left",
|
||||||
|
label: "ผู้มีอำนาจลงนาม",
|
||||||
|
sortable: true,
|
||||||
|
field: "issuer",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "detail",
|
||||||
|
align: "left",
|
||||||
|
label: "รายละเอียด",
|
||||||
|
sortable: true,
|
||||||
|
field: "detail",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "refCommandNo",
|
||||||
|
align: "left",
|
||||||
|
label: "เลขที่คำสั่ง",
|
||||||
|
sortable: true,
|
||||||
|
field: "refCommandNo",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "refCommandDate",
|
||||||
|
align: "left",
|
||||||
|
label: "เอกสารอ้างอิง (ลงวันที่)",
|
||||||
|
sortable: true,
|
||||||
|
field: "refCommandDate",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const columnsHistory = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "issueDate",
|
||||||
|
align: "left",
|
||||||
|
label: "วันที่ได้รับ",
|
||||||
|
sortable: true,
|
||||||
|
field: "issueDate",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "issuer",
|
||||||
|
align: "left",
|
||||||
|
label: "ผู้มีอำนาจลงนาม",
|
||||||
|
sortable: true,
|
||||||
|
field: "issuer",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "detail",
|
||||||
|
align: "left",
|
||||||
|
label: "รายละเอียด",
|
||||||
|
sortable: true,
|
||||||
|
field: "detail",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "refCommandNo",
|
||||||
|
align: "left",
|
||||||
|
label: "เลขที่คำสั่ง",
|
||||||
|
sortable: true,
|
||||||
|
field: "refCommandNo",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "refCommandDate",
|
||||||
|
align: "left",
|
||||||
|
label: "เอกสารอ้างอิง (ลงวันที่)",
|
||||||
|
sortable: true,
|
||||||
|
field: "refCommandDate",
|
||||||
|
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[]>([
|
||||||
|
"issuer",
|
||||||
|
"detail",
|
||||||
|
"issueDate",
|
||||||
|
"refCommandNo",
|
||||||
|
"refCommandDate",
|
||||||
|
"createdFullName",
|
||||||
|
"createdAt",
|
||||||
|
]);
|
||||||
|
|
||||||
|
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
|
||||||
|
await changeProfileColumns("coined", count);
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
|
||||||
|
const fetchData = async () => {
|
||||||
|
if (profileId.value) {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.profileHonorId(profileId.value))
|
||||||
|
.then((res) => {
|
||||||
|
let data = res.data.result;
|
||||||
|
rows.value = [];
|
||||||
|
data.map((e: ResponseObject) => {
|
||||||
|
rows.value.push({
|
||||||
|
id: e.id,
|
||||||
|
issuer: e.issuer,
|
||||||
|
detail: e.detail,
|
||||||
|
issueDate: new Date(e.issueDate),
|
||||||
|
refCommandNo: e.refCommandNo,
|
||||||
|
refCommandDate:
|
||||||
|
e.refCommandDate == null ? null : new Date(e.refCommandDate),
|
||||||
|
createdAt: new Date(e.createdAt),
|
||||||
|
createdFullName: e.createdFullName,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดดูข้อมูลก่อนหน้า
|
||||||
|
*/
|
||||||
|
const clickPrevious = async () => {
|
||||||
|
edit.value = false;
|
||||||
|
rowIndex.value -= 1;
|
||||||
|
await getData();
|
||||||
|
await checkRowPage();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดดูข้อมูลต่อไป
|
||||||
|
*/
|
||||||
|
const clickNext = async () => {
|
||||||
|
edit.value = false;
|
||||||
|
rowIndex.value += 1;
|
||||||
|
await getData();
|
||||||
|
await checkRowPage();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดดูข้อมูลต่อไป
|
||||||
|
*/
|
||||||
|
const getData = () => {
|
||||||
|
const row = rows.value[rowIndex.value];
|
||||||
|
issuer.value = row.issuer;
|
||||||
|
detail.value = row.detail;
|
||||||
|
issueDate.value = row.issueDate;
|
||||||
|
refCommandNo.value = row.refCommandNo;
|
||||||
|
refCommandDate.value = row.refCommandDate;
|
||||||
|
id.value = row.id;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
|
||||||
|
*/
|
||||||
|
const checkRowPage = () => {
|
||||||
|
editRow.value = false;
|
||||||
|
next.value = true;
|
||||||
|
previous.value = true;
|
||||||
|
if (rowIndex.value + 1 >= rows.value.length) {
|
||||||
|
next.value = false;
|
||||||
|
}
|
||||||
|
if (rowIndex.value - 1 < 0) {
|
||||||
|
previous.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปุ่มแก้ไขใน dialog
|
||||||
|
*/
|
||||||
|
const clickEdit = () => {
|
||||||
|
editRow.value = false;
|
||||||
|
next.value = false;
|
||||||
|
previous.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปุ่มเพิ่มด้านบน table
|
||||||
|
*/
|
||||||
|
const clickAdd = async () => {
|
||||||
|
editRow.value = false;
|
||||||
|
await addData();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดบันทึกใน dialog
|
||||||
|
*/
|
||||||
|
const clickSave = async () => {
|
||||||
|
myForm.value.validate().then(async (result: boolean) => {
|
||||||
|
if (result) {
|
||||||
|
if (modalEdit.value) {
|
||||||
|
await editData();
|
||||||
|
} else {
|
||||||
|
await saveData();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* บันทึกเพิ่มข้อมูล
|
||||||
|
*/
|
||||||
|
const saveData = async () => {
|
||||||
|
if (profileId.value) {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.post(config.API.profileHonorId(profileId.value), {
|
||||||
|
id: id.value,
|
||||||
|
issuer: issuer.value,
|
||||||
|
detail: detail.value,
|
||||||
|
issueDate: dateToISO(issueDate.value),
|
||||||
|
refCommandNo: refCommandNo.value,
|
||||||
|
refCommandDate:
|
||||||
|
refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
|
modal.value = false;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* บันทึกแก้ไขข้อมูล
|
||||||
|
*/
|
||||||
|
const editData = async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.put(config.API.profileHonorId(id.value), {
|
||||||
|
id: id.value,
|
||||||
|
issuer: issuer.value,
|
||||||
|
detail: detail.value,
|
||||||
|
issueDate: dateToISO(issueDate.value),
|
||||||
|
refCommandNo: refCommandNo.value,
|
||||||
|
refCommandDate:
|
||||||
|
refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
|
modal.value = false;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ลบลบข้อมูล
|
||||||
|
*/
|
||||||
|
const clickDelete = async () => {
|
||||||
|
$q.dialog({
|
||||||
|
title: `ลบข้อมูล`,
|
||||||
|
message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
|
||||||
|
cancel: "ยกเลิก",
|
||||||
|
ok: "ยืนยัน",
|
||||||
|
persistent: true,
|
||||||
|
})
|
||||||
|
.onOk(async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.delete(config.API.profileHonorId(id.value))
|
||||||
|
.then((res) => {
|
||||||
|
success($q, "ลบข้อมูลสำเร็จ");
|
||||||
|
modal.value = false;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.onCancel(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปิด dialog
|
||||||
|
*/
|
||||||
|
const clickClose = async () => {
|
||||||
|
if (editRow.value == true) {
|
||||||
|
$q.dialog({
|
||||||
|
title: `ข้อมูลมีการแก้ไข`,
|
||||||
|
message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
|
||||||
|
cancel: "ยกเลิก",
|
||||||
|
ok: "ยืนยัน",
|
||||||
|
persistent: true,
|
||||||
|
}).onOk(async () => {
|
||||||
|
modal.value = false;
|
||||||
|
next.value = false;
|
||||||
|
previous.value = false;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
modal.value = false;
|
||||||
|
next.value = false;
|
||||||
|
previous.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดเลือกข้อมูลที่จะแก้ไข
|
||||||
|
* @param props ค่า props ใน row ที่เลือก
|
||||||
|
*/
|
||||||
|
const selectData = async (props: DataProps) => {
|
||||||
|
modalEdit.value = true;
|
||||||
|
modal.value = true;
|
||||||
|
edit.value = false;
|
||||||
|
rawItem.value = props.row;
|
||||||
|
rowIndex.value = props.rowIndex;
|
||||||
|
issuer.value = props.row.issuer;
|
||||||
|
detail.value = props.row.detail;
|
||||||
|
issueDate.value = props.row.issueDate;
|
||||||
|
refCommandNo.value = props.row.refCommandNo;
|
||||||
|
refCommandDate.value = props.row.refCommandDate;
|
||||||
|
id.value = props.row.id;
|
||||||
|
await checkRowPage();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปุ่มเพิ่มบน table
|
||||||
|
*/
|
||||||
|
const addData = () => {
|
||||||
|
modalEdit.value = false;
|
||||||
|
modal.value = true;
|
||||||
|
edit.value = true;
|
||||||
|
issuer.value = "";
|
||||||
|
detail.value = "";
|
||||||
|
issueDate.value = new Date();
|
||||||
|
refCommandNo.value = "";
|
||||||
|
refCommandDate.value = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
|
||||||
|
*/
|
||||||
|
const clickCancel = async () => {
|
||||||
|
if (editRow.value == true) {
|
||||||
|
$q.dialog({
|
||||||
|
title: `ข้อมูลมีการแก้ไข`,
|
||||||
|
message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
|
||||||
|
cancel: "ยกเลิก",
|
||||||
|
ok: "ยืนยัน",
|
||||||
|
persistent: true,
|
||||||
|
}).onOk(async () => {
|
||||||
|
edit.value = false;
|
||||||
|
await checkRowPage();
|
||||||
|
await getData();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
edit.value = false;
|
||||||
|
await checkRowPage();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* เช็คว่ามีการแก้ไขข้อมูล
|
||||||
|
*/
|
||||||
|
const clickEditRow = () => {
|
||||||
|
editRow.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
|
||||||
|
* @param row ข้อมูล row ที่ดูประวัติการแก้ไข
|
||||||
|
*/
|
||||||
|
const clickHistory = async (row: RequestItemsObject) => {
|
||||||
|
tittleHistory.value =
|
||||||
|
props.profileType == "employee"
|
||||||
|
? "ประวัติแก้ไขประกาศลูกจ้างดีเด่น"
|
||||||
|
: "ประวัติแก้ไขประกาศเกียรติคุณ";
|
||||||
|
modalHistory.value = true;
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.profileHonorHisId(row.id))
|
||||||
|
.then((res) => {
|
||||||
|
let data = res.data.result;
|
||||||
|
rowsHistory.value = [];
|
||||||
|
data.map((e: ResponseObject) => {
|
||||||
|
rowsHistory.value.push({
|
||||||
|
id: e.id,
|
||||||
|
issuer: e.issuer,
|
||||||
|
detail: e.detail,
|
||||||
|
issueDate: new Date(e.issueDate),
|
||||||
|
refCommandNo: e.refCommandNo,
|
||||||
|
refCommandDate:
|
||||||
|
e.refCommandDate == null ? null : new Date(e.refCommandDate),
|
||||||
|
createdAt: new Date(e.createdAt),
|
||||||
|
createdFullName: e.createdFullName,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* validate input ใน dialog
|
||||||
|
*/
|
||||||
|
const validateData = async () => {
|
||||||
|
checkValidate.value = true;
|
||||||
|
await myForm.value.validate().then((result: boolean) => {
|
||||||
|
if (result == false) {
|
||||||
|
checkValidate.value = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
|
||||||
|
* @param val ข้อมูล input สำหรับแก้ไขหรือไม่
|
||||||
|
*/
|
||||||
|
const getClass = (val: boolean) => {
|
||||||
|
return {
|
||||||
|
"full-width inputgreen cursor-pointer": val,
|
||||||
|
"full-width cursor-pointer": !val,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const resetFilter = () => {};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.modalfix {
|
||||||
|
position: fixed !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
135
src/components/information/DialogFooter.vue
Normal file
135
src/components/information/DialogFooter.vue
Normal file
|
|
@ -0,0 +1,135 @@
|
||||||
|
<template>
|
||||||
|
<q-card-actions class="text-primary q-py-sm">
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
icon="mdi-menu-left"
|
||||||
|
@click="clickPrevious"
|
||||||
|
v-if="modalEdit == true"
|
||||||
|
:disable="previous == false"
|
||||||
|
:color="!previous ? 'grey-7' : 'public'"
|
||||||
|
/>
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
icon="mdi-menu-right"
|
||||||
|
@click="clickNext"
|
||||||
|
v-if="modalEdit == true"
|
||||||
|
:disable="next == false"
|
||||||
|
:color="!next ? 'grey-7' : 'public'"
|
||||||
|
/>
|
||||||
|
<q-space />
|
||||||
|
<q-btn
|
||||||
|
v-if="modalEdit == true"
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
color="red"
|
||||||
|
@click="clickDelete"
|
||||||
|
icon="mdi-delete"
|
||||||
|
>
|
||||||
|
<q-tooltip>ลบข้อมูล</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn
|
||||||
|
v-if="!editvisible"
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
:disabled="editvisible"
|
||||||
|
:color="editvisible ? 'grey-7' : 'primary'"
|
||||||
|
@click="edit"
|
||||||
|
icon="mdi-pencil-outline"
|
||||||
|
>
|
||||||
|
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<div v-else>
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
:disabled="!editvisible"
|
||||||
|
:outline="!editvisible"
|
||||||
|
:color="!editvisible ? 'grey-7' : 'red'"
|
||||||
|
@click="cancel()"
|
||||||
|
icon="mdi-undo"
|
||||||
|
v-if="modalEdit == true"
|
||||||
|
>
|
||||||
|
<q-tooltip>ยกเลิก</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
:disabled="!editvisible"
|
||||||
|
:color="!editvisible ? 'grey-7' : 'public'"
|
||||||
|
@click="checkSave"
|
||||||
|
icon="mdi-content-save-outline"
|
||||||
|
>
|
||||||
|
<q-tooltip>บันทึก</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
</q-card-actions>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
const props = defineProps({
|
||||||
|
editvisible: Boolean,
|
||||||
|
next: Boolean,
|
||||||
|
previous: Boolean,
|
||||||
|
modalEdit: Boolean,
|
||||||
|
clickNext: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
clickPrevious: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
cancel: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
edit: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
save: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
validate: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
clickDelete: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const emit = defineEmits([
|
||||||
|
"update:editvisible",
|
||||||
|
"update:next",
|
||||||
|
"update:previous",
|
||||||
|
]);
|
||||||
|
|
||||||
|
const updateEdit = (value: Boolean) => {
|
||||||
|
emit("update:editvisible", value);
|
||||||
|
};
|
||||||
|
const cancel = async () => {
|
||||||
|
props.cancel();
|
||||||
|
};
|
||||||
|
const clickDelete = async () => {
|
||||||
|
props.clickDelete();
|
||||||
|
};
|
||||||
|
const edit = async () => {
|
||||||
|
updateEdit(!props.editvisible);
|
||||||
|
props.edit();
|
||||||
|
};
|
||||||
|
const checkSave = () => {
|
||||||
|
props.validate();
|
||||||
|
props.save();
|
||||||
|
};
|
||||||
|
|
||||||
|
const clickNext = async () => {
|
||||||
|
await props.clickNext();
|
||||||
|
};
|
||||||
|
|
||||||
|
const clickPrevious = async () => {
|
||||||
|
await props.clickPrevious();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
27
src/components/information/DialogHeader.vue
Normal file
27
src/components/information/DialogHeader.vue
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
<template>
|
||||||
|
<q-toolbar>
|
||||||
|
<q-toolbar-title class="text-subtitle2 text-bold">{{
|
||||||
|
tittle
|
||||||
|
}}</q-toolbar-title>
|
||||||
|
<q-btn
|
||||||
|
icon="close"
|
||||||
|
unelevated
|
||||||
|
round
|
||||||
|
dense
|
||||||
|
@click="close"
|
||||||
|
style="color: #ff8080; background-color: #ffdede"
|
||||||
|
/>
|
||||||
|
</q-toolbar>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
const props = defineProps({
|
||||||
|
tittle: String,
|
||||||
|
close: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const close = async () => {
|
||||||
|
props.close();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
45
src/components/information/DialogHistory.vue
Normal file
45
src/components/information/DialogHistory.vue
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
<template>
|
||||||
|
<q-dialog :model-value="modal" persistent>
|
||||||
|
<q-card style="width: 600px">
|
||||||
|
<DialogHeader :tittle="props.title" :close="close" />
|
||||||
|
<q-separator />
|
||||||
|
<q-card-section
|
||||||
|
:class="props.fix ? 'q-pa-md scroll' : 'q-pa-md'"
|
||||||
|
:style="props.fix ? 'height: 50vh' : ''"
|
||||||
|
>
|
||||||
|
<slot name="body" />
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
<q-card-actions class="text-primary">
|
||||||
|
<slot name="footer" />
|
||||||
|
</q-card-actions>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import DialogHeader from "@/components/information/DialogHeader.vue";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
title: {
|
||||||
|
required: true,
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
modal: {
|
||||||
|
required: true,
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
fix: {
|
||||||
|
required: true,
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(["update:modal"]);
|
||||||
|
|
||||||
|
const close = async () => {
|
||||||
|
emit("update:modal", false);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
941
src/components/information/Discipline.vue
Normal file
941
src/components/information/Discipline.vue
Normal file
|
|
@ -0,0 +1,941 @@
|
||||||
|
<!-- card วินัย -->
|
||||||
|
<template>
|
||||||
|
<q-card flat bordered class="col-12 q-px-lg q-py-md">
|
||||||
|
<q-form ref="myForm">
|
||||||
|
<ProfileTable
|
||||||
|
:rows="rows"
|
||||||
|
:columns="columns"
|
||||||
|
:filter="filter"
|
||||||
|
:visible-columns="visibleColumns"
|
||||||
|
v-model:inputfilter="filter"
|
||||||
|
v-model:inputvisible="visibleColumns"
|
||||||
|
:add="clickAdd"
|
||||||
|
name="วินัย"
|
||||||
|
icon="mdi-scale-balance"
|
||||||
|
:statusEdit="statusEdit"
|
||||||
|
>
|
||||||
|
<template #columns="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-td
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
@click="selectData(props)"
|
||||||
|
class="cursor-pointer"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-if="col.name == 'refCommandDate' || col.name == 'date'"
|
||||||
|
class="table_ellipsis"
|
||||||
|
>
|
||||||
|
{{ col.value == null ? null : date2Thai(col.value) }}
|
||||||
|
</div>
|
||||||
|
<div v-else class="table_ellipsis">
|
||||||
|
{{ col.value }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
<q-td auto-width>
|
||||||
|
<q-btn
|
||||||
|
color="info"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
round
|
||||||
|
size="14px"
|
||||||
|
icon="mdi-history"
|
||||||
|
@click="clickHistory(props.row)"
|
||||||
|
/>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</ProfileTable>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
<!-- popup Edit window-->
|
||||||
|
<q-dialog v-model="modal" persistent>
|
||||||
|
<q-card style="width: 600px">
|
||||||
|
<q-form ref="myForm">
|
||||||
|
<DialogHeader tittle="วินัย" :close="clickClose" />
|
||||||
|
<q-separator />
|
||||||
|
<q-card-section class="q-p-sm">
|
||||||
|
<div
|
||||||
|
class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
|
||||||
|
>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<datepicker
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
:readonly="!edit"
|
||||||
|
v-model="date"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
:enableTimePicker="false"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
week-start="0"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
|
<template #year-overlay-value="{ value }">{{
|
||||||
|
parseInt(value + 543)
|
||||||
|
}}</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
:borderless="!edit"
|
||||||
|
:model-value="date2Thai(date)"
|
||||||
|
:rules="[(val:string) => !!val || `${'กรุณาเลือกวัน เดือน ปี'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'วัน เดือน ปี'}`"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon
|
||||||
|
name="event"
|
||||||
|
class="cursor-pointer"
|
||||||
|
:style="
|
||||||
|
edit
|
||||||
|
? 'color: var(--q-primary)'
|
||||||
|
: 'color: var(--q-grey)'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
</q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
:readonly="!edit"
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="detail"
|
||||||
|
:rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'รายละเอียด'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<selector
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
:readonly="!edit"
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="level"
|
||||||
|
:rules="[(val:string) => !!val || `${'กรุณาเลือกระดับการลงโทษทางวินัย'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'ระดับการลงโทษทางวินัย'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
option-label="name"
|
||||||
|
:options="Ops.levelOptions"
|
||||||
|
option-value="id"
|
||||||
|
use-input
|
||||||
|
input-debounce="0"
|
||||||
|
@filter="(inputValue:string,
|
||||||
|
doneFn:Function) => filterSelector(inputValue, doneFn,'levelOptions'
|
||||||
|
) "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
:readonly="!edit"
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="unStigma"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'ล้างมลทิน'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
:readonly="!edit"
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="refCommandNo"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'เลขที่คำสั่ง'}`"
|
||||||
|
:rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon
|
||||||
|
name="mdi-file"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="resetFilter"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<datepicker
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
:readonly="!edit"
|
||||||
|
v-model="refCommandDate"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
:enableTimePicker="false"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
week-start="0"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
|
<template #year-overlay-value="{ value }">{{
|
||||||
|
parseInt(value + 543)
|
||||||
|
}}</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
:borderless="!edit"
|
||||||
|
:model-value="
|
||||||
|
refCommandDate == null ? null : date2Thai(refCommandDate)
|
||||||
|
"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon
|
||||||
|
name="event"
|
||||||
|
class="cursor-pointer"
|
||||||
|
:style="
|
||||||
|
edit
|
||||||
|
? 'color: var(--q-primary)'
|
||||||
|
: 'color: var(--q-grey)'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
</q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
<DialogFooter
|
||||||
|
:cancel="clickCancel"
|
||||||
|
:edit="clickEdit"
|
||||||
|
:save="clickSave"
|
||||||
|
:validate="validateData"
|
||||||
|
:clickNext="clickNext"
|
||||||
|
:clickPrevious="clickPrevious"
|
||||||
|
:clickDelete="clickDelete"
|
||||||
|
v-model:editvisible="edit"
|
||||||
|
v-model:next="next"
|
||||||
|
v-model:previous="previous"
|
||||||
|
v-model:modalEdit="modalEdit"
|
||||||
|
/>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
<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 == 'date' ||
|
||||||
|
col.name == 'refCommandDate' ||
|
||||||
|
col.name == 'createdAt'
|
||||||
|
"
|
||||||
|
class="table_ellipsis"
|
||||||
|
>
|
||||||
|
{{ col.value == null ? null : date2Thai(col.value) }}
|
||||||
|
</div>
|
||||||
|
<div v-else class="table_ellipsis">
|
||||||
|
{{ col.value }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</HistoryTable>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, ref, watch } from "vue";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
import { useComponentProfileDataStore } from "@/components/information/store/store";
|
||||||
|
|
||||||
|
import ProfileTable from "@/components/information/Table.vue";
|
||||||
|
import DialogHeader from "@/components/information/DialogHeader.vue";
|
||||||
|
import DialogFooter from "@/components/information/DialogFooter.vue";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import type {
|
||||||
|
RequestItemsObject,
|
||||||
|
DataProps,
|
||||||
|
} from "@/components/information/interface/request/Discipline";
|
||||||
|
import type { ResponseObject } from "@/components/information/interface/response/Discipline";
|
||||||
|
import type {
|
||||||
|
DisciplineOps,
|
||||||
|
DataOption,
|
||||||
|
} from "@/components/information/interface/index/Main";
|
||||||
|
import HistoryTable from "@/components/TableHistory.vue";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
import type { QTableProps } from "quasar";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
statusEdit: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const store = useComponentProfileDataStore();
|
||||||
|
const { profileData, changeProfileColumns } = store;
|
||||||
|
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
|
||||||
|
mixin;
|
||||||
|
const route = useRoute();
|
||||||
|
const id = ref<string>("");
|
||||||
|
const level = ref<string>();
|
||||||
|
const Ops = ref<DisciplineOps>({
|
||||||
|
levelOptions: [
|
||||||
|
{
|
||||||
|
name: "ภาคทัณฑ์",
|
||||||
|
id: "ภาคทัณฑ์",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "ตัดเงินเดือน",
|
||||||
|
id: "ตัดเงินเดือน",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "ลดขั้นเงินเดือน",
|
||||||
|
id: "ลดขั้นเงินเดือน",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "ปลดออก",
|
||||||
|
id: "ปลดออก",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "ไล่ออก",
|
||||||
|
id: "ไล่ออก",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
const OpsFilter = ref<DisciplineOps>({
|
||||||
|
levelOptions: [
|
||||||
|
{
|
||||||
|
name: "ภาคทัณฑ์",
|
||||||
|
id: "ภาคทัณฑ์",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "ตัดเงินเดือน",
|
||||||
|
id: "ตัดเงินเดือน",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "ลดขั้นเงินเดือน",
|
||||||
|
id: "ลดขั้นเงินเดือน",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "ปลดออก",
|
||||||
|
id: "ปลดออก",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "ไล่ออก",
|
||||||
|
id: "ไล่ออก",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
const detail = ref<string>();
|
||||||
|
const unStigma = ref<string>();
|
||||||
|
const refCommandNo = ref<string>();
|
||||||
|
const refCommandDate = ref<Date | null>(new Date());
|
||||||
|
const date = ref<Date>(new Date());
|
||||||
|
const myForm = ref<any>(); //form data input
|
||||||
|
const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
|
||||||
|
const modal = ref<boolean>(false); //modal add detail
|
||||||
|
const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
|
||||||
|
const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
|
||||||
|
const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
|
||||||
|
const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
|
||||||
|
const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
|
||||||
|
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
|
||||||
|
const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
|
||||||
|
const tittleHistory = ref<string>("ประวัติแก้ไขวินัย"); //
|
||||||
|
const filterHistory = ref<string>(""); //search data table history
|
||||||
|
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
|
||||||
|
const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
|
||||||
|
const profileId = ref<string>(
|
||||||
|
route.params.id ? route.params.id.toString() : ""
|
||||||
|
);
|
||||||
|
const rows = ref<RequestItemsObject[]>([]);
|
||||||
|
const filter = ref<string>(""); //search data table
|
||||||
|
const visibleColumns = ref<String[]>([]);
|
||||||
|
profileData.discipline.columns.length == 0
|
||||||
|
? (visibleColumns.value = [
|
||||||
|
"level",
|
||||||
|
"detail",
|
||||||
|
"unStigma",
|
||||||
|
"refCommandNo",
|
||||||
|
"refCommandDate",
|
||||||
|
"date",
|
||||||
|
])
|
||||||
|
: (visibleColumns.value = profileData.discipline.columns);
|
||||||
|
const columns = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "date",
|
||||||
|
align: "left",
|
||||||
|
label: "วัน เดือน ปี",
|
||||||
|
sortable: true,
|
||||||
|
field: "date",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "detail",
|
||||||
|
align: "left",
|
||||||
|
label: "รายละเอียด",
|
||||||
|
sortable: true,
|
||||||
|
field: "detail",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "level",
|
||||||
|
align: "left",
|
||||||
|
label: "ระดับการลงโทษทางวินัย",
|
||||||
|
sortable: true,
|
||||||
|
field: "level",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "unStigma",
|
||||||
|
align: "left",
|
||||||
|
label: "ล้างมลทิน",
|
||||||
|
sortable: true,
|
||||||
|
field: "unStigma",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "refCommandNo",
|
||||||
|
align: "left",
|
||||||
|
label: "เลขที่คำสั่ง",
|
||||||
|
sortable: true,
|
||||||
|
field: "refCommandNo",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "refCommandDate",
|
||||||
|
align: "left",
|
||||||
|
label: "เอกสารอ้างอิง (ลงวันที่)",
|
||||||
|
sortable: true,
|
||||||
|
field: "refCommandDate",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const columnsHistory = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "date",
|
||||||
|
align: "left",
|
||||||
|
label: "วัน เดือน ปี",
|
||||||
|
sortable: true,
|
||||||
|
field: "date",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "detail",
|
||||||
|
align: "left",
|
||||||
|
label: "รายละเอียด",
|
||||||
|
sortable: true,
|
||||||
|
field: "detail",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "level",
|
||||||
|
align: "left",
|
||||||
|
label: "ระดับการลงโทษทางวินัย",
|
||||||
|
sortable: true,
|
||||||
|
field: "level",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "unStigma",
|
||||||
|
align: "left",
|
||||||
|
label: "ล้างมลทิน",
|
||||||
|
sortable: true,
|
||||||
|
field: "unStigma",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "refCommandNo",
|
||||||
|
align: "left",
|
||||||
|
label: "เลขที่คำสั่ง",
|
||||||
|
sortable: true,
|
||||||
|
field: "refCommandNo",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "refCommandDate",
|
||||||
|
align: "left",
|
||||||
|
label: "เอกสารอ้างอิง (ลงวันที่)",
|
||||||
|
sortable: true,
|
||||||
|
field: "refCommandDate",
|
||||||
|
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[]>([
|
||||||
|
"level",
|
||||||
|
"detail",
|
||||||
|
"unStigma",
|
||||||
|
"refCommandNo",
|
||||||
|
"refCommandDate",
|
||||||
|
"date",
|
||||||
|
"createdFullName",
|
||||||
|
"createdAt",
|
||||||
|
]);
|
||||||
|
|
||||||
|
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
|
||||||
|
await changeProfileColumns("discipline", count);
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
|
||||||
|
const filterSelector = (val: string, update: Function, refData: string) => {
|
||||||
|
switch (refData) {
|
||||||
|
case "levelOptions":
|
||||||
|
update(() => {
|
||||||
|
Ops.value.levelOptions = OpsFilter.value.levelOptions.filter(
|
||||||
|
(v: DataOption) => v.name.indexOf(val) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchData = async () => {
|
||||||
|
if (profileId.value) {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.profileDisId(profileId.value))
|
||||||
|
.then((res) => {
|
||||||
|
let data = res.data.result;
|
||||||
|
rows.value = [];
|
||||||
|
data.map((e: ResponseObject) => {
|
||||||
|
rows.value.push({
|
||||||
|
id: e.id,
|
||||||
|
level: e.level,
|
||||||
|
detail: e.detail,
|
||||||
|
unStigma: e.unStigma,
|
||||||
|
refCommandNo: e.refCommandNo,
|
||||||
|
refCommandDate:
|
||||||
|
e.refCommandDate == null ? null : new Date(e.refCommandDate),
|
||||||
|
date: new Date(e.date),
|
||||||
|
createdFullName: e.createdFullName,
|
||||||
|
createdAt: new Date(e.createdAt),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดดูข้อมูลก่อนหน้า
|
||||||
|
*/
|
||||||
|
const clickPrevious = async () => {
|
||||||
|
edit.value = false;
|
||||||
|
rowIndex.value -= 1;
|
||||||
|
await getData();
|
||||||
|
await checkRowPage();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดดูข้อมูลต่อไป
|
||||||
|
*/
|
||||||
|
const clickNext = async () => {
|
||||||
|
edit.value = false;
|
||||||
|
rowIndex.value += 1;
|
||||||
|
await getData();
|
||||||
|
await checkRowPage();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดดูข้อมูลต่อไป
|
||||||
|
*/
|
||||||
|
const getData = () => {
|
||||||
|
const row = rows.value[rowIndex.value];
|
||||||
|
level.value = row.level;
|
||||||
|
detail.value = row.detail;
|
||||||
|
unStigma.value = row.unStigma;
|
||||||
|
refCommandNo.value = row.refCommandNo;
|
||||||
|
refCommandDate.value = row.refCommandDate;
|
||||||
|
date.value = row.date;
|
||||||
|
id.value = row.id;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
|
||||||
|
*/
|
||||||
|
const checkRowPage = () => {
|
||||||
|
editRow.value = false;
|
||||||
|
next.value = true;
|
||||||
|
previous.value = true;
|
||||||
|
if (rowIndex.value + 1 >= rows.value.length) {
|
||||||
|
next.value = false;
|
||||||
|
}
|
||||||
|
if (rowIndex.value - 1 < 0) {
|
||||||
|
previous.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปุ่มแก้ไขใน dialog
|
||||||
|
*/
|
||||||
|
const clickEdit = () => {
|
||||||
|
editRow.value = false;
|
||||||
|
next.value = false;
|
||||||
|
previous.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปุ่มเพิ่มด้านบน table
|
||||||
|
*/
|
||||||
|
const clickAdd = async () => {
|
||||||
|
editRow.value = false;
|
||||||
|
await addData();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดบันทึกใน dialog
|
||||||
|
*/
|
||||||
|
const clickSave = async () => {
|
||||||
|
myForm.value.validate().then(async (result: boolean) => {
|
||||||
|
if (result) {
|
||||||
|
if (modalEdit.value) {
|
||||||
|
await editData();
|
||||||
|
} else {
|
||||||
|
await saveData();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* บันทึกเพิ่มข้อมูล
|
||||||
|
*/
|
||||||
|
const saveData = async () => {
|
||||||
|
if (profileId.value) {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.post(config.API.profileDisId(profileId.value), {
|
||||||
|
id: id.value,
|
||||||
|
level: level.value,
|
||||||
|
detail: detail.value,
|
||||||
|
unStigma: unStigma.value,
|
||||||
|
refCommandNo: refCommandNo.value,
|
||||||
|
refCommandDate:
|
||||||
|
refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
|
||||||
|
date: dateToISO(date.value),
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
|
modal.value = false;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* บันทึกแก้ไขข้อมูล
|
||||||
|
*/
|
||||||
|
const editData = async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.put(config.API.profileDisId(id.value), {
|
||||||
|
id: id.value,
|
||||||
|
level: level.value,
|
||||||
|
detail: detail.value,
|
||||||
|
unStigma: unStigma.value,
|
||||||
|
refCommandNo: refCommandNo.value,
|
||||||
|
refCommandDate:
|
||||||
|
refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
|
||||||
|
date: dateToISO(date.value),
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
|
modal.value = false;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ลบลบข้อมูล
|
||||||
|
*/
|
||||||
|
const clickDelete = async () => {
|
||||||
|
$q.dialog({
|
||||||
|
title: `ลบข้อมูล`,
|
||||||
|
message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
|
||||||
|
cancel: "ยกเลิก",
|
||||||
|
ok: "ยืนยัน",
|
||||||
|
persistent: true,
|
||||||
|
})
|
||||||
|
.onOk(async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.delete(config.API.profileDisId(id.value))
|
||||||
|
.then((res) => {
|
||||||
|
success($q, "ลบข้อมูลสำเร็จ");
|
||||||
|
modal.value = false;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.onCancel(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปิด dialog
|
||||||
|
*/
|
||||||
|
const clickClose = async () => {
|
||||||
|
if (editRow.value == true) {
|
||||||
|
$q.dialog({
|
||||||
|
title: `ข้อมูลมีการแก้ไข`,
|
||||||
|
message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
|
||||||
|
cancel: "ยกเลิก",
|
||||||
|
ok: "ยืนยัน",
|
||||||
|
persistent: true,
|
||||||
|
}).onOk(async () => {
|
||||||
|
modal.value = false;
|
||||||
|
next.value = false;
|
||||||
|
previous.value = false;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
modal.value = false;
|
||||||
|
next.value = false;
|
||||||
|
previous.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดเลือกข้อมูลที่จะแก้ไข
|
||||||
|
* @param props ค่า props ใน row ที่เลือก
|
||||||
|
*/
|
||||||
|
const selectData = async (props: DataProps) => {
|
||||||
|
modalEdit.value = true;
|
||||||
|
modal.value = true;
|
||||||
|
edit.value = false;
|
||||||
|
rawItem.value = props.row;
|
||||||
|
rowIndex.value = props.rowIndex;
|
||||||
|
level.value = props.row.level;
|
||||||
|
detail.value = props.row.detail;
|
||||||
|
unStigma.value = props.row.unStigma;
|
||||||
|
refCommandNo.value = props.row.refCommandNo;
|
||||||
|
refCommandDate.value = props.row.refCommandDate;
|
||||||
|
date.value = props.row.date;
|
||||||
|
id.value = props.row.id;
|
||||||
|
await checkRowPage();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปุ่มเพิ่มบน table
|
||||||
|
*/
|
||||||
|
const addData = () => {
|
||||||
|
modalEdit.value = false;
|
||||||
|
modal.value = true;
|
||||||
|
edit.value = true;
|
||||||
|
level.value = "";
|
||||||
|
detail.value = "";
|
||||||
|
unStigma.value = "";
|
||||||
|
refCommandNo.value = "";
|
||||||
|
refCommandDate.value = null;
|
||||||
|
date.value = new Date();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
|
||||||
|
*/
|
||||||
|
const clickCancel = async () => {
|
||||||
|
if (editRow.value == true) {
|
||||||
|
$q.dialog({
|
||||||
|
title: `ข้อมูลมีการแก้ไข`,
|
||||||
|
message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
|
||||||
|
cancel: "ยกเลิก",
|
||||||
|
ok: "ยืนยัน",
|
||||||
|
persistent: true,
|
||||||
|
}).onOk(async () => {
|
||||||
|
edit.value = false;
|
||||||
|
await checkRowPage();
|
||||||
|
await getData();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
edit.value = false;
|
||||||
|
await checkRowPage();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* เช็คว่ามีการแก้ไขข้อมูล
|
||||||
|
*/
|
||||||
|
const clickEditRow = () => {
|
||||||
|
editRow.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
|
||||||
|
* @param row ข้อมูล row ที่ดูประวัติการแก้ไข
|
||||||
|
*/
|
||||||
|
const clickHistory = async (row: RequestItemsObject) => {
|
||||||
|
modalHistory.value = true;
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.profileDisHisId(row.id))
|
||||||
|
.then((res) => {
|
||||||
|
let data = res.data.result;
|
||||||
|
rowsHistory.value = [];
|
||||||
|
data.map((e: ResponseObject) => {
|
||||||
|
rowsHistory.value.push({
|
||||||
|
id: e.id,
|
||||||
|
level: e.level,
|
||||||
|
detail: e.detail,
|
||||||
|
unStigma: e.unStigma,
|
||||||
|
refCommandNo: e.refCommandNo,
|
||||||
|
refCommandDate:
|
||||||
|
e.refCommandDate == null ? null : new Date(e.refCommandDate),
|
||||||
|
date: new Date(e.date),
|
||||||
|
createdFullName: e.createdFullName,
|
||||||
|
createdAt: new Date(e.createdAt),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* validate input ใน dialog
|
||||||
|
*/
|
||||||
|
const validateData = async () => {
|
||||||
|
checkValidate.value = true;
|
||||||
|
await myForm.value.validate().then((result: boolean) => {
|
||||||
|
if (result == false) {
|
||||||
|
checkValidate.value = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
|
||||||
|
* @param val ข้อมูล input สำหรับแก้ไขหรือไม่
|
||||||
|
*/
|
||||||
|
const getClass = (val: boolean) => {
|
||||||
|
return {
|
||||||
|
"full-width inputgreen cursor-pointer": val,
|
||||||
|
"full-width cursor-pointer": !val,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const resetFilter = () => {};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.modalfix {
|
||||||
|
position: fixed !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
269
src/components/information/Document.vue
Normal file
269
src/components/information/Document.vue
Normal file
|
|
@ -0,0 +1,269 @@
|
||||||
|
<template>
|
||||||
|
<q-card flat bordered class="col-12 row q-px-lg q-py-md">
|
||||||
|
<HeaderTop
|
||||||
|
v-model:edit="edit"
|
||||||
|
header="เอกสารหลักฐาน"
|
||||||
|
icon="mdi-file-document"
|
||||||
|
:history="false"
|
||||||
|
:changeBtn="changeBtn"
|
||||||
|
:disable="statusEdit"
|
||||||
|
:save="uploadData"
|
||||||
|
/>
|
||||||
|
<div class="row col-12 q-pt-sm">
|
||||||
|
<q-card bordered flat class="full-width">
|
||||||
|
<q-list separator>
|
||||||
|
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label class="full-width ellipsis">
|
||||||
|
{{ file.fileName }}
|
||||||
|
</q-item-label>
|
||||||
|
|
||||||
|
<q-item-label caption> </q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section top side>
|
||||||
|
<div class="row col-12">
|
||||||
|
<q-btn
|
||||||
|
class="gt-xs"
|
||||||
|
size="12px"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
round
|
||||||
|
color="blue"
|
||||||
|
icon="mdi-download-outline"
|
||||||
|
@click="downloadData(file.file)"
|
||||||
|
/>
|
||||||
|
<q-btn
|
||||||
|
class="gt-xs"
|
||||||
|
size="12px"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
round
|
||||||
|
color="red"
|
||||||
|
icon="mdi-delete-outline"
|
||||||
|
v-show="edit"
|
||||||
|
@click="deleteData(file.id)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-card>
|
||||||
|
<q-input
|
||||||
|
v-if="edit"
|
||||||
|
class="q-mt-sm col-12 q-pb-xs"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
v-model="name"
|
||||||
|
hide-bottom-space
|
||||||
|
:rules="[(val) => !!val || `${'กรุณากรอกชื่อเอกสาร'}`]"
|
||||||
|
:label="`${'ชื่อเอกสาร'}`"
|
||||||
|
/>
|
||||||
|
<q-uploader
|
||||||
|
v-if="edit"
|
||||||
|
color="gray"
|
||||||
|
type="file"
|
||||||
|
flat
|
||||||
|
@factory="uploadData"
|
||||||
|
ref="uploader"
|
||||||
|
class="full-width"
|
||||||
|
text-color="white"
|
||||||
|
:max-size="10000000"
|
||||||
|
accept=".jpg,.png,.pdf,.csv,.doc,.docx"
|
||||||
|
bordered
|
||||||
|
label="[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]"
|
||||||
|
@added="fileAdd"
|
||||||
|
>
|
||||||
|
<template v-slot:header="scope">
|
||||||
|
<div class="row no-wrap items-center q-pa-sm q-gutter-xs">
|
||||||
|
<q-btn
|
||||||
|
v-if="scope.queuedFiles.length > 0"
|
||||||
|
icon="clear_all"
|
||||||
|
@click="scope.removeQueuedFiles"
|
||||||
|
round
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
>
|
||||||
|
<q-tooltip>ลบทั้งหมด</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn
|
||||||
|
v-if="scope.uploadedFiles.length > 0"
|
||||||
|
icon="done_all"
|
||||||
|
@click="scope.removeUploadedFiles"
|
||||||
|
round
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
>
|
||||||
|
<q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<q-spinner v-if="scope.isUploading" class="q-uploader__spinner" />
|
||||||
|
<div class="col">
|
||||||
|
<div class="q-uploader__title">
|
||||||
|
{{ "[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]" }}
|
||||||
|
</div>
|
||||||
|
<div class="q-uploader__subtitle">
|
||||||
|
{{ scope.uploadSizeLabel }} / {{ scope.uploadProgressLabel }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<q-btn
|
||||||
|
v-if="scope.canAddFiles"
|
||||||
|
type="a"
|
||||||
|
icon="add_box"
|
||||||
|
@click="scope.pickFiles"
|
||||||
|
round
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
>
|
||||||
|
<q-uploader-add-trigger />
|
||||||
|
<q-tooltip>เลือกไฟล์</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn
|
||||||
|
v-if="scope.isUploading"
|
||||||
|
icon="clear"
|
||||||
|
@click="scope.abort"
|
||||||
|
round
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
>
|
||||||
|
<q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</q-uploader>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, computed, ref, watch } from "vue";
|
||||||
|
import { useQuasar, QForm } from "quasar";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
|
||||||
|
import HeaderTop from "@/components/information/top.vue";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
statusEdit: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
notiNoEdit: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const emit = defineEmits(["update:statusEdit"]);
|
||||||
|
|
||||||
|
const $q = useQuasar(); // show dialog
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const route = useRoute();
|
||||||
|
const { success, messageError, showLoader, hideLoader } = mixin;
|
||||||
|
const profileId = ref<string>(
|
||||||
|
route.params.id ? route.params.id.toString() : ""
|
||||||
|
);
|
||||||
|
const edit = ref<boolean>(false);
|
||||||
|
const uploader = ref<any>();
|
||||||
|
const files = ref<any>([]);
|
||||||
|
const file = ref<any>([]);
|
||||||
|
const name = ref<string>("");
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await getData();
|
||||||
|
});
|
||||||
|
|
||||||
|
const getData = async () => {
|
||||||
|
if (profileId.value) {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.profilePaperId(profileId.value))
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
files.value = data;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const deleteData = async (id: string) => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.delete(config.API.profilePaperId(id))
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await getData();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const uploadData = async () => {
|
||||||
|
if (profileId.value) {
|
||||||
|
if (file.value.length > 0) {
|
||||||
|
const blob = file.value.slice(0, file.value[0].size);
|
||||||
|
const newFile = new File(blob, name.value, {
|
||||||
|
type: file.value[0].type,
|
||||||
|
});
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append("avatar", newFile);
|
||||||
|
formData.append("moss", "newFile");
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.post(config.API.profilePaperId(profileId.value), formData)
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
uploader.value.reset();
|
||||||
|
name.value = "";
|
||||||
|
edit.value = false;
|
||||||
|
emit("update:statusEdit", false);
|
||||||
|
await getData();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// modalError(
|
||||||
|
// $q,
|
||||||
|
// "ไม่สามารถอัปโหลดไฟล์ได้",
|
||||||
|
// "กรุณาเลือกไฟล์ที่ต้องการอัปโหลด"
|
||||||
|
// );
|
||||||
|
getData();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const fileAdd = async (val: any) => {
|
||||||
|
name.value = val[0].name;
|
||||||
|
file.value = val;
|
||||||
|
};
|
||||||
|
|
||||||
|
const downloadData = async (path: string) => {
|
||||||
|
window.open(path);
|
||||||
|
};
|
||||||
|
|
||||||
|
const changeBtn = async () => {
|
||||||
|
name.value = "";
|
||||||
|
if (edit.value == true) {
|
||||||
|
if (props.statusEdit === true) {
|
||||||
|
edit.value = false;
|
||||||
|
props.notiNoEdit();
|
||||||
|
} else {
|
||||||
|
emit("update:statusEdit", true);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
emit("update:statusEdit", false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
1561
src/components/information/Education.vue
Normal file
1561
src/components/information/Education.vue
Normal file
File diff suppressed because it is too large
Load diff
1511
src/components/information/Family.vue
Normal file
1511
src/components/information/Family.vue
Normal file
File diff suppressed because it is too large
Load diff
761
src/components/information/Government.vue
Normal file
761
src/components/information/Government.vue
Normal file
|
|
@ -0,0 +1,761 @@
|
||||||
|
<template>
|
||||||
|
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
|
||||||
|
<HeaderTop
|
||||||
|
v-model:edit="edit"
|
||||||
|
header="ข้อมูลราชการ"
|
||||||
|
icon="mdi-account-tie"
|
||||||
|
:save="saveData"
|
||||||
|
:history="true"
|
||||||
|
:changeBtn="changeBtn"
|
||||||
|
:disable="statusEdit"
|
||||||
|
:cancel="refreshData"
|
||||||
|
:historyClick="clickHistory"
|
||||||
|
/>
|
||||||
|
<q-form ref="myform" class="col-12">
|
||||||
|
<div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
|
||||||
|
<div class="col-xs-12">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(false)"
|
||||||
|
hide-bottom-space
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
readonly
|
||||||
|
borderless
|
||||||
|
:model-value="govermentData.ocId"
|
||||||
|
:label="`${'สังกัด'}`"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3" v-if="employeeClass != 'temp'">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(false)"
|
||||||
|
hide-bottom-space
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
readonly
|
||||||
|
borderless
|
||||||
|
:model-value="govermentData.numberId"
|
||||||
|
:label="`${'ตำแหน่งเลขที่'}`"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(false)"
|
||||||
|
hide-bottom-space
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
readonly
|
||||||
|
borderless
|
||||||
|
:model-value="govermentData.positionId"
|
||||||
|
:label="`${'ตำแหน่ง'}`"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(false)"
|
||||||
|
hide-bottom-space
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
readonly
|
||||||
|
borderless
|
||||||
|
:model-value="govermentData.positionPathSide"
|
||||||
|
:label="`${'ด้าน/สาขา'}`"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(false)"
|
||||||
|
hide-bottom-space
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
readonly
|
||||||
|
borderless
|
||||||
|
:model-value="govermentData.positionLine"
|
||||||
|
:label="`${'สายงาน'}`"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(false)"
|
||||||
|
hide-bottom-space
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
readonly
|
||||||
|
borderless
|
||||||
|
:model-value="govermentData.positionType"
|
||||||
|
:label="`${'ประเภท'}`"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3" v-if="employeeClass != 'temp'">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(false)"
|
||||||
|
hide-bottom-space
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
readonly
|
||||||
|
borderless
|
||||||
|
:model-value="govermentData.positionLevel"
|
||||||
|
:label="`${'ระดับ'}`"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(false)"
|
||||||
|
hide-bottom-space
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
readonly
|
||||||
|
borderless
|
||||||
|
:model-value="govermentData.positionExecutive"
|
||||||
|
:label="`${'ตำแหน่งทางการบริหาร'}`"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(false)"
|
||||||
|
hide-bottom-space
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
readonly
|
||||||
|
borderless
|
||||||
|
:model-value="govermentData.positionExecutiveSide"
|
||||||
|
:label="`${'ด้านตำแหน่งทางการบริหาร'}`"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 q-py-md"><q-separator /></div>
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||||
|
<datepicker
|
||||||
|
v-model="govermentData.containDate"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
:max-date="new Date()"
|
||||||
|
:disabled="!edit"
|
||||||
|
@update:model-value="handleDate"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
hide-bottom-space
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
:readonly="!edit"
|
||||||
|
:borderless="!edit"
|
||||||
|
:model-value="date2Thai(new Date(govermentData.containDate))"
|
||||||
|
:rules="[
|
||||||
|
(val) =>
|
||||||
|
!!val ||
|
||||||
|
`${
|
||||||
|
profileType == 'officer'
|
||||||
|
? 'กรุณาเลือกวันที่บรรจุ'
|
||||||
|
: 'กรุณาเลือกวันที่แต่งตั้ง'
|
||||||
|
}`,
|
||||||
|
]"
|
||||||
|
:label="`${
|
||||||
|
profileType == 'officer' ? 'วันที่บรรจุ' : 'วันที่แต่งตั้ง'
|
||||||
|
}`"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon
|
||||||
|
name="event"
|
||||||
|
class="cursor-pointer"
|
||||||
|
:style="
|
||||||
|
edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
</q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||||
|
<datepicker
|
||||||
|
v-model="govermentData.workDate"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
:max-date="new Date()"
|
||||||
|
:disabled="!edit"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
hide-bottom-space
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
:readonly="!edit"
|
||||||
|
:borderless="!edit"
|
||||||
|
:model-value="date2Thai(new Date(govermentData.workDate))"
|
||||||
|
:rules="[
|
||||||
|
(val) =>
|
||||||
|
!!val ||
|
||||||
|
`${
|
||||||
|
profileType == 'officer'
|
||||||
|
? 'กรุณาเลือกเริ่มปฎิบัติราชการ'
|
||||||
|
: 'กรุณาเลือกวันที่จ้างและแต่งตั้งมีผล'
|
||||||
|
}`,
|
||||||
|
]"
|
||||||
|
:label="`${
|
||||||
|
profileType == 'officer'
|
||||||
|
? 'เริ่มปฎิบัติราชการ'
|
||||||
|
: 'วันที่จ้างและแต่งตั้งมีผล'
|
||||||
|
}`"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon
|
||||||
|
name="event"
|
||||||
|
class="cursor-pointer"
|
||||||
|
:style="
|
||||||
|
edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
</q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6" v-if="profileType == 'officer'">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
hide-bottom-space
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
stack-label
|
||||||
|
:readonly="!edit"
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="govermentData.reasonSameDate"
|
||||||
|
:label="`${'เหตุผลกรณีไม่ตรงวัน'}`"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(false)"
|
||||||
|
hide-bottom-space
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
readonly
|
||||||
|
borderless
|
||||||
|
:model-value="govermentData.retireDate"
|
||||||
|
:label="`${'วันเกษียณอายุ'}`"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(false)"
|
||||||
|
hide-bottom-space
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
readonly
|
||||||
|
borderless
|
||||||
|
:model-value="govermentData.ageAll"
|
||||||
|
:label="`${'อายุราชการ'}`"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(false)"
|
||||||
|
hide-bottom-space
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
readonly
|
||||||
|
borderless
|
||||||
|
:model-value="govermentData.absent"
|
||||||
|
:label="`${'ขาดราชการ'}`"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(false)"
|
||||||
|
hide-bottom-space
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
readonly
|
||||||
|
borderless
|
||||||
|
:model-value="govermentData.age"
|
||||||
|
:label="`${'อายุราชการเกื้อกูล'}`"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-form>
|
||||||
|
</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 == 'dateStart' ||
|
||||||
|
col.name == 'dateAppoint' ||
|
||||||
|
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>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, ref, watch } from "vue";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import type { Goverment } from "@/components/information/interface/profileType";
|
||||||
|
import { defaultGoverment } from "@/components/information/interface/profileType";
|
||||||
|
import HeaderTop from "@/components/information/top.vue";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
import HistoryTable from "@/components/TableHistory.vue";
|
||||||
|
import type { RequestItemsHistoryObject } from "@/components/information/interface/request/Government";
|
||||||
|
import type { ResponseObject } from "@/components/information/interface/response/Government";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
import { useComponentProfileDataStore } from "@/components/information/store/store";
|
||||||
|
import { storeToRefs } from "pinia";
|
||||||
|
import type { QTableProps } from "quasar";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
statusEdit: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
profileType: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
employeeClass: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const emit = defineEmits(["update:statusEdit"]);
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const $q = useQuasar();
|
||||||
|
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
|
||||||
|
mixin;
|
||||||
|
const profileStore = useComponentProfileDataStore();
|
||||||
|
const { birthDate, retireText } = storeToRefs(profileStore);
|
||||||
|
const edit = ref<boolean>(false);
|
||||||
|
const govermentData = ref<Goverment>(defaultGoverment);
|
||||||
|
const myform = ref<any>();
|
||||||
|
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 columnsHistory = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "oc",
|
||||||
|
align: "left",
|
||||||
|
label: "สังกัด",
|
||||||
|
sortable: true,
|
||||||
|
field: "oc",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionPathSide",
|
||||||
|
align: "left",
|
||||||
|
label: "ตำแหน่ง",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionPathSide",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "position",
|
||||||
|
align: "left",
|
||||||
|
label: "ด้าน/สาขา",
|
||||||
|
sortable: true,
|
||||||
|
field: "position",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "posNo",
|
||||||
|
align: "left",
|
||||||
|
label: "ตำแหน่งเลขที่",
|
||||||
|
sortable: true,
|
||||||
|
field: "posNo",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionLine",
|
||||||
|
align: "left",
|
||||||
|
label: "สายงาน",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionLine",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionType",
|
||||||
|
align: "left",
|
||||||
|
label: "ประเภทตำแหน่ง",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionType",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionLevel",
|
||||||
|
align: "left",
|
||||||
|
label: "ระดับตำแหน่ง",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionLevel",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionExecutive",
|
||||||
|
align: "left",
|
||||||
|
label: "ตำแหน่งทางการบริหาร",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionExecutive",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionExecutiveSide",
|
||||||
|
align: "left",
|
||||||
|
label: "ด้านทางการบริหาร",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionExecutiveSide",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "dateAppoint",
|
||||||
|
align: "left",
|
||||||
|
label: "วันที่บรรจุ",
|
||||||
|
sortable: true,
|
||||||
|
field: "dateAppoint",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "dateStart",
|
||||||
|
align: "left",
|
||||||
|
label: "เริ่มปฎิบัติราชการ",
|
||||||
|
sortable: true,
|
||||||
|
field: "dateStart",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "retireDate",
|
||||||
|
align: "left",
|
||||||
|
label: "วันเกษียณอายุ",
|
||||||
|
sortable: true,
|
||||||
|
field: "retireDate",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "govAge",
|
||||||
|
align: "left",
|
||||||
|
label: "อายุราชการ",
|
||||||
|
sortable: true,
|
||||||
|
field: "govAge",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "govAgeAbsent",
|
||||||
|
align: "left",
|
||||||
|
label: "ขาดราชการ",
|
||||||
|
sortable: true,
|
||||||
|
field: "govAgeAbsent",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "govAgePlus",
|
||||||
|
align: "left",
|
||||||
|
label: "อายุราชการเกื้อกูล",
|
||||||
|
sortable: true,
|
||||||
|
field: "govAgePlus",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "reasonSameDate",
|
||||||
|
align: "left",
|
||||||
|
label: "เหตุผลกรณีไม่ตรงวัน",
|
||||||
|
sortable: true,
|
||||||
|
field: "reasonSameDate",
|
||||||
|
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[]>([
|
||||||
|
"oc",
|
||||||
|
"position",
|
||||||
|
"positionPathSide",
|
||||||
|
"posNo",
|
||||||
|
"positionLine",
|
||||||
|
"positionType",
|
||||||
|
"positionLevel",
|
||||||
|
"positionexecutive",
|
||||||
|
"positionExecutiveSide",
|
||||||
|
"dateAppoint",
|
||||||
|
"dateStart",
|
||||||
|
"retireDate",
|
||||||
|
"govAge",
|
||||||
|
"govAgeAbsent",
|
||||||
|
"govAgePlus",
|
||||||
|
"reasonSameDate",
|
||||||
|
"createdFullName",
|
||||||
|
"createdAt",
|
||||||
|
]);
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await fetchData();
|
||||||
|
emit("update:statusEdit", false);
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(birthDate, async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(retireText, async () => {
|
||||||
|
govermentData.value.retireDate = retireText.value;
|
||||||
|
});
|
||||||
|
|
||||||
|
const fetchData = async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.profileGovId(route.params.id.toString()))
|
||||||
|
.then((res) => {
|
||||||
|
const data: ResponseObject = res.data.result;
|
||||||
|
govermentData.value.ocId = data.oc;
|
||||||
|
govermentData.value.positionId = data.position;
|
||||||
|
govermentData.value.positionPathSide = data.positionPathSide;
|
||||||
|
govermentData.value.positionLine = data.positionLine;
|
||||||
|
govermentData.value.positionType = data.positionType;
|
||||||
|
govermentData.value.positionLevel = data.positionLevel;
|
||||||
|
govermentData.value.numberId = data.posNo;
|
||||||
|
govermentData.value.positionExecutive = data.positionExecutive;
|
||||||
|
govermentData.value.positionExecutiveSide = data.positionExecutiveSide;
|
||||||
|
govermentData.value.containDate = new Date(data.dateAppoint);
|
||||||
|
govermentData.value.workDate = new Date(data.dateStart);
|
||||||
|
govermentData.value.retireDate = data.retireDate;
|
||||||
|
govermentData.value.absent = data.govAgeAbsent;
|
||||||
|
govermentData.value.age = data.govAgePlus;
|
||||||
|
govermentData.value.ageAll = data.govAge;
|
||||||
|
govermentData.value.reasonSameDate = data.reasonSameDate;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const refreshData = async () => {
|
||||||
|
myform.value.reset();
|
||||||
|
await fetchData();
|
||||||
|
};
|
||||||
|
|
||||||
|
const editData = async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.put(config.API.profileGovId(route.params.id.toString()), {
|
||||||
|
dateAppoint: dateToISO(govermentData.value.containDate),
|
||||||
|
dateStart: dateToISO(govermentData.value.workDate),
|
||||||
|
reasonSameDate: govermentData.value.reasonSameDate,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
emit("update:statusEdit", false);
|
||||||
|
edit.value = false;
|
||||||
|
await refreshData();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveData = async () => {
|
||||||
|
await myform.value.validate().then(async (success: boolean) => {
|
||||||
|
if (success) {
|
||||||
|
await editData();
|
||||||
|
} else {
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDate = async (modelData: Date) => {
|
||||||
|
govermentData.value.containDate = modelData;
|
||||||
|
await fetchCalAgeGov(modelData);
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchCalAgeGov = async (date: Date) => {
|
||||||
|
showLoader();
|
||||||
|
const body = {
|
||||||
|
dateAppoint: date,
|
||||||
|
};
|
||||||
|
await http
|
||||||
|
.post(config.API.profileCalGovId(route.params.id.toString()), body)
|
||||||
|
.then((res) => {
|
||||||
|
const result = res.data.result;
|
||||||
|
govermentData.value.ageAll = result;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
|
||||||
|
*/
|
||||||
|
const clickHistory = async () => {
|
||||||
|
modalHistory.value = true;
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.profileGovHisId(route.params.id.toString()))
|
||||||
|
.then((res) => {
|
||||||
|
let data = res.data.result;
|
||||||
|
rowsHistory.value = [];
|
||||||
|
data.map((e: RequestItemsHistoryObject) => {
|
||||||
|
rowsHistory.value.push({
|
||||||
|
oc: e.oc,
|
||||||
|
position: e.position,
|
||||||
|
positionPathSide: e.positionPathSide,
|
||||||
|
posNo: e.posNo,
|
||||||
|
positionLine: e.positionLine,
|
||||||
|
positionType: e.positionType,
|
||||||
|
positionLevel: e.positionLevel,
|
||||||
|
positionExecutive: e.positionExecutive,
|
||||||
|
positionExecutiveSide: e.positionExecutiveSide,
|
||||||
|
dateAppoint: new Date(e.dateAppoint),
|
||||||
|
dateStart: new Date(e.dateStart),
|
||||||
|
retireDate: e.retireDate,
|
||||||
|
govAge: e.govAge,
|
||||||
|
govAgeAbsent: e.govAgeAbsent,
|
||||||
|
govAgePlus: e.govAgePlus,
|
||||||
|
reasonSameDate: e.reasonSameDate,
|
||||||
|
createdFullName: e.createdFullName,
|
||||||
|
createdAt: new Date(e.createdAt),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const changeBtn = async () => {
|
||||||
|
if (edit.value == true) {
|
||||||
|
if (props.statusEdit === true) {
|
||||||
|
edit.value = false;
|
||||||
|
} else {
|
||||||
|
emit("update:statusEdit", true);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
emit("update:statusEdit", false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getClass = (val: boolean) => {
|
||||||
|
return {
|
||||||
|
"full-width inputgreen cursor-pointer": val,
|
||||||
|
"full-width cursor-pointer": !val,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
</script>
|
||||||
453
src/components/information/Image.vue
Normal file
453
src/components/information/Image.vue
Normal file
|
|
@ -0,0 +1,453 @@
|
||||||
|
<template>
|
||||||
|
<q-page-sticky
|
||||||
|
position="top"
|
||||||
|
expand
|
||||||
|
class="bg-grey-2 text-white"
|
||||||
|
style="z-index: 99; padding: 0% 1% 0% 1%"
|
||||||
|
>
|
||||||
|
<div class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center">
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
class="bg-teal-1 full-height"
|
||||||
|
color="primary"
|
||||||
|
icon="mdi-chevron-left"
|
||||||
|
dense
|
||||||
|
@click="router.go(-1)"
|
||||||
|
>
|
||||||
|
</q-btn>
|
||||||
|
<q-avatar
|
||||||
|
v-if="imageUrl == null"
|
||||||
|
size="65px"
|
||||||
|
rounded
|
||||||
|
class="containerimage"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="@/assets/avatar_user.jpg"
|
||||||
|
class="bg-grey-3"
|
||||||
|
style="object-fit: cover"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
|
||||||
|
@click="clickImage()"
|
||||||
|
>
|
||||||
|
<q-icon name="mdi-camera" size="18px" color="blue">
|
||||||
|
<q-tooltip>อัปเดตรูปภาพ</q-tooltip>
|
||||||
|
</q-icon>
|
||||||
|
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
style="display: none"
|
||||||
|
ref="inputImage"
|
||||||
|
accept="image/*"
|
||||||
|
@change="uploadImage"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-avatar>
|
||||||
|
<q-avatar v-else size="65px" rounded class="containerimage">
|
||||||
|
<img :src="imageUrl" class="bg-grey-3" style="object-fit: cover" />
|
||||||
|
<div
|
||||||
|
class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
|
||||||
|
@click="clickImage()"
|
||||||
|
>
|
||||||
|
<q-icon name="mdi-camera" size="18px" color="blue">
|
||||||
|
<q-tooltip>อัปเดตรูปภาพ</q-tooltip>
|
||||||
|
</q-icon>
|
||||||
|
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
style="display: none"
|
||||||
|
ref="inputImage"
|
||||||
|
accept="image/*"
|
||||||
|
@change="uploadImage"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-avatar>
|
||||||
|
<div class="row items-center text-dark q-ml-md">
|
||||||
|
<div class="column">
|
||||||
|
<div class="text-bold q-pb-xs text-name">
|
||||||
|
{{ fullname }}
|
||||||
|
</div>
|
||||||
|
<div>{{ position }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<q-space />
|
||||||
|
|
||||||
|
<slot name="button-right" />
|
||||||
|
</div>
|
||||||
|
</q-page-sticky>
|
||||||
|
<!---------------------------------------- Dialog เลือก Image ---------------------------------------->
|
||||||
|
<q-dialog v-model="dialogImage" persistent>
|
||||||
|
<q-card style="width: 100vw; max-width: 60vw">
|
||||||
|
<q-card-section class="q-py-sm row">
|
||||||
|
<div class="text-h6">เลือกรูปภาพ</div>
|
||||||
|
<q-space />
|
||||||
|
<q-btn
|
||||||
|
icon="close"
|
||||||
|
unelevated
|
||||||
|
round
|
||||||
|
dense
|
||||||
|
@click="closeImage"
|
||||||
|
style="color: #ff8080; background-color: #ffdede"
|
||||||
|
>
|
||||||
|
<q-tooltip>ปิดหน้านี้</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
<q-card-section class="col-12 row">
|
||||||
|
<div
|
||||||
|
class="row wrap items-start col-12 q-col-gutter-sm"
|
||||||
|
style="height: 320px; overflow: auto"
|
||||||
|
>
|
||||||
|
<div class="col-3" @click="addNewImage">
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
height: 160px;
|
||||||
|
max-width: 15vw;
|
||||||
|
display: flex !important;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
"
|
||||||
|
class="column rounded-borders cursor-pointer bg-active-image text-white"
|
||||||
|
>
|
||||||
|
<q-icon name="add" size="60px" color="white" />
|
||||||
|
<strong>อัปโหลดรูปภาพ</strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-for="n in images"
|
||||||
|
:key="n"
|
||||||
|
class="col-3"
|
||||||
|
@click="imageActive(n)"
|
||||||
|
>
|
||||||
|
<div :class="getClass(n)">
|
||||||
|
<q-img
|
||||||
|
v-if="n.avatar != null"
|
||||||
|
:src="n.avatar"
|
||||||
|
:class="imageClass(n)"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="absolute-bottom col-12 cursor-pointer flex justify-between items-center"
|
||||||
|
style="padding: 5px"
|
||||||
|
>
|
||||||
|
{{ date2Thai(n.createdDate) }}
|
||||||
|
|
||||||
|
<q-btn
|
||||||
|
v-if="!n.isActive"
|
||||||
|
icon="delete"
|
||||||
|
unelevated
|
||||||
|
dense
|
||||||
|
@click="deletePhoto(n.id)"
|
||||||
|
class="bg-white"
|
||||||
|
style="color: #ff8080"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-img>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
<q-card-actions align="right">
|
||||||
|
<q-btn
|
||||||
|
icon="check"
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
@click="selectAvatarHistory"
|
||||||
|
color="positive"
|
||||||
|
>
|
||||||
|
<q-tooltip>เลือกรูปภาพ</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-card-actions>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted } from "vue";
|
||||||
|
import { useRoute, useRouter } from "vue-router";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
fetchData: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
fetchSave: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
fetchDelete: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
fetchUpload: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const {
|
||||||
|
date2Thai,
|
||||||
|
dateToISO,
|
||||||
|
messageError,
|
||||||
|
dialogMessage,
|
||||||
|
success,
|
||||||
|
showLoader,
|
||||||
|
hideLoader,
|
||||||
|
} = mixin;
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const fullname = ref<string>("");
|
||||||
|
const position = ref<string>("");
|
||||||
|
|
||||||
|
const imageUrl = ref<any>(null);
|
||||||
|
const inputImage = ref<any>(null);
|
||||||
|
const activeImage = ref<any | null>(null);
|
||||||
|
|
||||||
|
const dialogImage = ref<boolean>(false);
|
||||||
|
|
||||||
|
const images = ref<any>([]);
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
|
||||||
|
const closeImage = () => {
|
||||||
|
dialogImage.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const clickImage = async () => {
|
||||||
|
// ***************************************************************************************************
|
||||||
|
// ****************** fetch data รูปภาพทั้งหมด ******************
|
||||||
|
// ***************************************************************************************************
|
||||||
|
await fetchAvatarHistory();
|
||||||
|
dialogImage.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const uploadImage = async (e: any) => {
|
||||||
|
let input = e.target.files;
|
||||||
|
if (input.length > 0) {
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append("FileData", input[0]);
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.post(config.API.profileAvatarId(route.params.id.toString()), formData)
|
||||||
|
.then((res) => {})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await fetchData();
|
||||||
|
dialogImage.value = false;
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectAvatarHistory = async () => {
|
||||||
|
if (activeImage.value == null) {
|
||||||
|
dialogMessage(
|
||||||
|
$q,
|
||||||
|
"ไม่สามารถเปลี่ยนรูปได้",
|
||||||
|
"กรุณาเลือกรูปที่ต้องการเปลี่ยน",
|
||||||
|
"warning",
|
||||||
|
undefined,
|
||||||
|
"orange",
|
||||||
|
undefined,
|
||||||
|
undefined,
|
||||||
|
true
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.put(config.API.profileAvatarId(route.params.id.toString()), {
|
||||||
|
avatar: activeImage.value.avatarId,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
dialogImage.value = false;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
// ***************************************************************************************************
|
||||||
|
// ****************** fetch data เปลี่ยนรูปภาพ ส่ง ID กลับ******************
|
||||||
|
// ***************************************************************************************************
|
||||||
|
};
|
||||||
|
|
||||||
|
const imageActive = (n: any) => {
|
||||||
|
activeImage.value = n;
|
||||||
|
};
|
||||||
|
|
||||||
|
const addNewImage = () => {
|
||||||
|
inputImage.value.click();
|
||||||
|
imageActive(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const deletePhoto = async (id: string) => {
|
||||||
|
dialogMessage(
|
||||||
|
$q,
|
||||||
|
"ลบข้อมูล",
|
||||||
|
"ต้องการทำการลบข้อมูลนี้ใช่หรือไม่",
|
||||||
|
"delete",
|
||||||
|
undefined,
|
||||||
|
"red",
|
||||||
|
async () => await fetchDataDelete(id),
|
||||||
|
undefined,
|
||||||
|
false
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchDataDelete = async (id: string) => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.delete(config.API.profileAvatarHistoryId(id))
|
||||||
|
.then((res) => {
|
||||||
|
success($q, "ลบรูปภาพสำเร็จ");
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await fetchData();
|
||||||
|
await clickImage();
|
||||||
|
// dialogImage.value = false;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchData = async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.profileAvatarId(route.params.id.toString()))
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
fullname.value = data.fullname;
|
||||||
|
imageUrl.value = data.avatar;
|
||||||
|
position.value = data.position;
|
||||||
|
// profileType.value = data.profileType;
|
||||||
|
// employeeClass.value =
|
||||||
|
// data.employeeClass == null ? "" : data.employeeClass;
|
||||||
|
// const reason = reasonOptions.value.filter(
|
||||||
|
// (r: DataOption) => r.id == data.leaveReason
|
||||||
|
// );
|
||||||
|
// if (reason.length > 0) {
|
||||||
|
// leaveReason.value = ` (พ้นจากราชการด้วยสาเหตุ: ${reason[0].name})`;
|
||||||
|
// } else {
|
||||||
|
// leaveReason.value = "";
|
||||||
|
// }
|
||||||
|
// reasonStatus.value = reason.length > 0 ? true : false;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchAvatarHistory = async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.profileAvatarHistoryId(route.params.id.toString()))
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
images.value = [];
|
||||||
|
data.map((e: any) => {
|
||||||
|
images.value.push({
|
||||||
|
id: e.id,
|
||||||
|
avatar: e.avatar,
|
||||||
|
avatarId: e.avatarId,
|
||||||
|
createdDate: new Date(e.createdDate),
|
||||||
|
isActive: e.isActive,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const imageClass = (n: any) => {
|
||||||
|
const val = n == activeImage.value;
|
||||||
|
return {
|
||||||
|
"rounded-borders bg-grey-2 image-size-default": val,
|
||||||
|
"rounded-borders bg-grey-2 image-size-full": !val,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const getClass = (n: any) => {
|
||||||
|
const val = n == activeImage.value;
|
||||||
|
return {
|
||||||
|
"rounded-borders border-green shadow-1": val,
|
||||||
|
"rounded-borders shadow-1": !val,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.image-size-default {
|
||||||
|
height: 150px;
|
||||||
|
max-width: 15vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-size-full {
|
||||||
|
height: 160px;
|
||||||
|
max-width: 15vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-green {
|
||||||
|
border: 5px solid #52c688;
|
||||||
|
}
|
||||||
|
|
||||||
|
.area-div {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-header {
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.containerimage {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.containerimage:hover .overlay {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
background-color: #e4f2ffd2 !important;
|
||||||
|
opacity: 0;
|
||||||
|
padding: 2px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.information:target {
|
||||||
|
padding-top: 84px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-custom {
|
||||||
|
border: 0.5px solid #c3c3c3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-active-image {
|
||||||
|
background-color: #52c688;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-name {
|
||||||
|
font-size: 1.25em;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
1141
src/components/information/Information.vue
Normal file
1141
src/components/information/Information.vue
Normal file
File diff suppressed because it is too large
Load diff
1339
src/components/information/Insignia.vue
Normal file
1339
src/components/information/Insignia.vue
Normal file
File diff suppressed because it is too large
Load diff
1266
src/components/information/Leave.vue
Normal file
1266
src/components/information/Leave.vue
Normal file
File diff suppressed because it is too large
Load diff
973
src/components/information/OldName.vue
Normal file
973
src/components/information/OldName.vue
Normal file
|
|
@ -0,0 +1,973 @@
|
||||||
|
<!-- card ประวัติการเปลี่ยนชื่อ-นามสกุล -->
|
||||||
|
<template>
|
||||||
|
<div class="col-12">
|
||||||
|
<q-form ref="myForm">
|
||||||
|
<div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
|
||||||
|
<ProfileTable
|
||||||
|
:rows="rows"
|
||||||
|
:columns="columns"
|
||||||
|
:filter="filter"
|
||||||
|
:visible-columns="visibleColumns"
|
||||||
|
v-model:inputfilter="filter"
|
||||||
|
v-model:inputvisible="visibleColumns"
|
||||||
|
:add="clickAdd"
|
||||||
|
name="ประวัติการเปลี่ยนชื่อ-นามสกุล"
|
||||||
|
icon="mdi-book"
|
||||||
|
:statusEdit="!statusEdit"
|
||||||
|
>
|
||||||
|
<template #columns="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-td
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
@click="statusEdit ? selectData(props) : ''"
|
||||||
|
class="cursor-pointer"
|
||||||
|
>
|
||||||
|
<div v-if="col.name == 'status'" class="table_ellipsis">
|
||||||
|
{{ typeChangeName(col.value) }}
|
||||||
|
</div>
|
||||||
|
<div v-else class="table_ellipsis">
|
||||||
|
{{ col.value }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
<q-td auto-width>
|
||||||
|
<q-btn
|
||||||
|
v-if="props.row.file != null"
|
||||||
|
color="green"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
round
|
||||||
|
size="14px"
|
||||||
|
icon="mdi-file-document-outline"
|
||||||
|
@click="openFile(props.row.file)"
|
||||||
|
/>
|
||||||
|
<q-btn
|
||||||
|
color="info"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
round
|
||||||
|
size="14px"
|
||||||
|
icon="mdi-history"
|
||||||
|
@click="clickHistory(props.row)"
|
||||||
|
/>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</ProfileTable>
|
||||||
|
</q-form>
|
||||||
|
</div>
|
||||||
|
<!-- popup Edit window-->
|
||||||
|
<q-dialog v-model="modal" persistent>
|
||||||
|
<q-card style="width: 600px">
|
||||||
|
<q-form ref="myForm">
|
||||||
|
<DialogHeader tittle="เปลี่ยนชื่อ-นามสกุล" :close="clickClose" />
|
||||||
|
<q-separator />
|
||||||
|
<q-card-section class="q-p-sm">
|
||||||
|
<div
|
||||||
|
class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
|
||||||
|
>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<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="status"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
option-label="name"
|
||||||
|
:options="Ops.statusOps"
|
||||||
|
option-value="id"
|
||||||
|
:label="`${'สถานะการเปลี่ยนชื่อ'}`"
|
||||||
|
use-input
|
||||||
|
input-debounce="0"
|
||||||
|
@filter="(inputValue:any,
|
||||||
|
doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
|
||||||
|
) "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<q-space class="col-6" />
|
||||||
|
<div class="col-xs-4 col-sm-4 col-md-4">
|
||||||
|
<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="prefixId"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
option-label="name"
|
||||||
|
:options="Ops.prefixOps"
|
||||||
|
option-value="id"
|
||||||
|
:label="`${'คำนำหน้าชื่อ'}`"
|
||||||
|
use-input
|
||||||
|
input-debounce="0"
|
||||||
|
@filter="(inputValue:any,
|
||||||
|
doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
|
||||||
|
) "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4 col-sm-4 col-md-4">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
:readonly="!edit || status == 'lastName'"
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="firstName"
|
||||||
|
:rules="[(val) => !!val || `${'กรุณากรอกชื่อ'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'ชื่อ'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4 col-sm-4 col-md-4">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
:readonly="!edit || status == 'firstName'"
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="lastName"
|
||||||
|
:rules="[(val) => !!val || `${'กรุณากรอกนามสกุล'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'นามสกุล'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<q-btn
|
||||||
|
v-if="file != null && !edit"
|
||||||
|
color="green"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
round
|
||||||
|
size="14px"
|
||||||
|
icon="mdi-file-document-outline"
|
||||||
|
@click="openFile(file)"
|
||||||
|
/>
|
||||||
|
<q-uploader
|
||||||
|
v-if="edit"
|
||||||
|
color="gray"
|
||||||
|
type="file"
|
||||||
|
flat
|
||||||
|
ref="uploader"
|
||||||
|
class="full-width"
|
||||||
|
text-color="white"
|
||||||
|
:max-size="10000000"
|
||||||
|
accept=".jpg,.png,.pdf,.csv,.doc,.docx"
|
||||||
|
bordered
|
||||||
|
label="[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]"
|
||||||
|
@added="fileAdd"
|
||||||
|
>
|
||||||
|
<template v-slot:header="scope">
|
||||||
|
<div class="row no-wrap items-center q-pa-sm q-gutter-xs">
|
||||||
|
<q-btn
|
||||||
|
v-if="scope.queuedFiles.length > 0"
|
||||||
|
icon="clear_all"
|
||||||
|
@click="scope.removeQueuedFiles"
|
||||||
|
round
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
>
|
||||||
|
<q-tooltip>ลบทั้งหมด</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn
|
||||||
|
v-if="scope.uploadedFiles.length > 0"
|
||||||
|
icon="done_all"
|
||||||
|
@click="scope.removeUploadedFiles"
|
||||||
|
round
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
>
|
||||||
|
<q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<q-spinner
|
||||||
|
v-if="scope.isUploading"
|
||||||
|
class="q-uploader__spinner"
|
||||||
|
/>
|
||||||
|
<div class="col">
|
||||||
|
<div class="q-uploader__title">
|
||||||
|
{{ "[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]" }}
|
||||||
|
</div>
|
||||||
|
<div class="q-uploader__subtitle">
|
||||||
|
{{ scope.uploadSizeLabel }} /
|
||||||
|
{{ scope.uploadProgressLabel }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<q-btn
|
||||||
|
v-if="scope.canAddFiles"
|
||||||
|
type="a"
|
||||||
|
icon="add_box"
|
||||||
|
@click="scope.pickFiles"
|
||||||
|
round
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
>
|
||||||
|
<q-uploader-add-trigger />
|
||||||
|
<q-tooltip>เลือกไฟล์</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn
|
||||||
|
v-if="scope.isUploading"
|
||||||
|
icon="clear"
|
||||||
|
@click="scope.abort"
|
||||||
|
round
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
>
|
||||||
|
<q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</q-uploader>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
<DialogFooter
|
||||||
|
:cancel="clickCancel"
|
||||||
|
:edit="clickEdit"
|
||||||
|
:save="clickSave"
|
||||||
|
:validate="validateData"
|
||||||
|
:clickNext="clickNext"
|
||||||
|
:clickPrevious="clickPrevious"
|
||||||
|
:clickDelete="clickDelete"
|
||||||
|
v-model:editvisible="edit"
|
||||||
|
v-model:next="next"
|
||||||
|
v-model:previous="previous"
|
||||||
|
v-model:modalEdit="modalEdit"
|
||||||
|
/>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
<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"
|
||||||
|
:history="true"
|
||||||
|
>
|
||||||
|
<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 == 'status'" class="table_ellipsis">
|
||||||
|
{{ typeChangeName(col.value) }}
|
||||||
|
</div>
|
||||||
|
<div v-else class="table_ellipsis">
|
||||||
|
{{ col.value }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
<q-td auto-width>
|
||||||
|
<q-btn
|
||||||
|
v-if="props.row.file != null"
|
||||||
|
color="green"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
round
|
||||||
|
size="14px"
|
||||||
|
icon="mdi-file-document-outline"
|
||||||
|
@click="openFile(props.row.file)"
|
||||||
|
/>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</HistoryTable>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, ref, watch } from "vue";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
import { useComponentProfileDataStore } from "@/components/information/store/store";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
||||||
|
import ProfileTable from "@/components/information/Table.vue";
|
||||||
|
import DialogHeader from "@/components/information/DialogHeader.vue";
|
||||||
|
import DialogFooter from "@/components/information/DialogFooter.vue";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import type {
|
||||||
|
RequestItemsObject,
|
||||||
|
DataProps,
|
||||||
|
} from "@/components/information/interface/request/OldName";
|
||||||
|
import type { ResponseObject } from "@/components/information/interface/response/OldName";
|
||||||
|
import type {
|
||||||
|
OldNameOps,
|
||||||
|
DataOption,
|
||||||
|
} from "@/components/information/interface/index/Main";
|
||||||
|
import HistoryTable from "@/components/TableHistory.vue";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
import type { QTableProps } from "quasar";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
statusEdit: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
fetchDataInformation: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
perfixId: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
firstname: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
lastname: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const store = useComponentProfileDataStore();
|
||||||
|
const { profileData, changeProfileColumns } = store;
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const {
|
||||||
|
date2Thai,
|
||||||
|
success,
|
||||||
|
dateToISO,
|
||||||
|
messageError,
|
||||||
|
typeChangeName,
|
||||||
|
dialogMessage,
|
||||||
|
showLoader,
|
||||||
|
hideLoader,
|
||||||
|
} = mixin;
|
||||||
|
const route = useRoute();
|
||||||
|
const id = ref<string>("");
|
||||||
|
const prefixId = ref<string>();
|
||||||
|
const firstName = ref<string>();
|
||||||
|
const lastName = ref<string>();
|
||||||
|
const status = ref<string>();
|
||||||
|
const nameFile = ref<string>("");
|
||||||
|
const minDate = ref<Date>();
|
||||||
|
const myForm = ref<any>(); //form data input
|
||||||
|
const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
|
||||||
|
const modal = ref<boolean>(false); //modal add detail
|
||||||
|
const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
|
||||||
|
const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
|
||||||
|
const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
|
||||||
|
const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
|
||||||
|
const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
|
||||||
|
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
|
||||||
|
const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
|
||||||
|
const tittleHistory = ref<string>("ประวัติแก้ไขประวัติการเปลี่ยนชื่อ-นามสกุล"); //
|
||||||
|
const filterHistory = ref<string>(""); //search data table history
|
||||||
|
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
|
||||||
|
const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
|
||||||
|
const profileId = ref<string>(route.params.id.toString());
|
||||||
|
const file = ref<string | null>(null);
|
||||||
|
const fileUpload = ref<any>([]);
|
||||||
|
const rows = ref<RequestItemsObject[]>([]);
|
||||||
|
const filter = ref<string>(""); //search data table
|
||||||
|
const visibleColumns = ref<String[]>([]);
|
||||||
|
const Ops = ref<OldNameOps>({
|
||||||
|
prefixOps: [],
|
||||||
|
statusOps: [
|
||||||
|
{
|
||||||
|
id: "firstName",
|
||||||
|
name: "เปลี่ยนชื่อ",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "lastName",
|
||||||
|
name: "เปลี่ยนนามสกุล",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "all",
|
||||||
|
name: "เปลี่ยนชื่อ-นามสกุล",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
const OpsFilter = ref<OldNameOps>({
|
||||||
|
prefixOps: [],
|
||||||
|
statusOps: [
|
||||||
|
{
|
||||||
|
id: "firstName",
|
||||||
|
name: "เปลี่ยนชื่อ",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "lastName",
|
||||||
|
name: "เปลี่ยนนามสกุล",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "all",
|
||||||
|
name: "เปลี่ยนชื่อ-นามสกุล",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
profileData.oldName.columns.length == 0
|
||||||
|
? (visibleColumns.value = ["prefix", "firstName", "lastName", "status"])
|
||||||
|
: (visibleColumns.value = profileData.oldName.columns);
|
||||||
|
const columns = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
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: "status",
|
||||||
|
align: "left",
|
||||||
|
label: "สถานะการเปลี่ยนชื่อ",
|
||||||
|
sortable: true,
|
||||||
|
field: "status",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const columnsHistory = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
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: "status",
|
||||||
|
align: "left",
|
||||||
|
label: "สถานะการเปลี่ยนชื่อ",
|
||||||
|
sortable: true,
|
||||||
|
field: "status",
|
||||||
|
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[]>([
|
||||||
|
"prefix",
|
||||||
|
"firstName",
|
||||||
|
"lastName",
|
||||||
|
"status",
|
||||||
|
"createdFullName",
|
||||||
|
"createdAt",
|
||||||
|
]);
|
||||||
|
|
||||||
|
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
|
||||||
|
await changeProfileColumns("oldName", count);
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await fetchPerson();
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
|
||||||
|
const fetchData = async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.profileChangeNameId(profileId.value))
|
||||||
|
.then((res) => {
|
||||||
|
let data = res.data.result;
|
||||||
|
rows.value = [];
|
||||||
|
data.map((e: ResponseObject) => {
|
||||||
|
rows.value.push({
|
||||||
|
id: e.id,
|
||||||
|
prefix: e.prefix,
|
||||||
|
prefixId: e.prefixId,
|
||||||
|
firstName: e.firstName,
|
||||||
|
lastName: e.lastName,
|
||||||
|
status: e.status,
|
||||||
|
file: e.file,
|
||||||
|
createdFullName: e.createdFullName,
|
||||||
|
createdAt: new Date(e.createdAt),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* get รายการ ข้อมูลเกี่ยวกับบุคคล
|
||||||
|
*/
|
||||||
|
const fetchPerson = async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.person)
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
let optionprefixs: DataOption[] = [];
|
||||||
|
data.prefixs.map((r: any) => {
|
||||||
|
optionprefixs.push({
|
||||||
|
id: r.id.toString(),
|
||||||
|
name: r.name.toString(),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
Ops.value.prefixOps = optionprefixs;
|
||||||
|
OpsFilter.value.prefixOps = optionprefixs;
|
||||||
|
})
|
||||||
|
.catch((e: any) => {})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดดูข้อมูลก่อนหน้า
|
||||||
|
*/
|
||||||
|
const clickPrevious = async () => {
|
||||||
|
edit.value = false;
|
||||||
|
rowIndex.value -= 1;
|
||||||
|
await getData();
|
||||||
|
await checkRowPage();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดดูข้อมูลต่อไป
|
||||||
|
*/
|
||||||
|
const clickNext = async () => {
|
||||||
|
edit.value = false;
|
||||||
|
rowIndex.value += 1;
|
||||||
|
await getData();
|
||||||
|
await checkRowPage();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดดูข้อมูลต่อไป
|
||||||
|
*/
|
||||||
|
const getData = () => {
|
||||||
|
const row = rows.value[rowIndex.value];
|
||||||
|
prefixId.value = row.prefixId;
|
||||||
|
firstName.value = row.firstName;
|
||||||
|
lastName.value = row.lastName;
|
||||||
|
status.value = row.status;
|
||||||
|
file.value = row.file;
|
||||||
|
id.value = row.id;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
|
||||||
|
*/
|
||||||
|
const checkRowPage = () => {
|
||||||
|
editRow.value = false;
|
||||||
|
next.value = true;
|
||||||
|
previous.value = true;
|
||||||
|
if (rowIndex.value + 1 >= rows.value.length) {
|
||||||
|
next.value = false;
|
||||||
|
}
|
||||||
|
if (rowIndex.value - 1 < 0) {
|
||||||
|
previous.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปุ่มแก้ไขใน dialog
|
||||||
|
*/
|
||||||
|
const clickEdit = () => {
|
||||||
|
editRow.value = false;
|
||||||
|
next.value = false;
|
||||||
|
previous.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปุ่มเพิ่มด้านบน table
|
||||||
|
*/
|
||||||
|
const clickAdd = async () => {
|
||||||
|
editRow.value = false;
|
||||||
|
await addData();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดบันทึกใน dialog
|
||||||
|
*/
|
||||||
|
const clickSave = async () => {
|
||||||
|
myForm.value.validate().then(async (result: boolean) => {
|
||||||
|
if (result) {
|
||||||
|
if (modalEdit.value) {
|
||||||
|
await editData();
|
||||||
|
} else {
|
||||||
|
await saveData();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* บันทึกเพิ่มข้อมูล
|
||||||
|
*/
|
||||||
|
const saveData = async () => {
|
||||||
|
if (fileUpload.value.length > 0) {
|
||||||
|
const blob = fileUpload.value.slice(0, fileUpload.value[0].size);
|
||||||
|
const newFile = new File(blob, nameFile.value, {
|
||||||
|
type: fileUpload.value[0].type,
|
||||||
|
});
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append("", newFile);
|
||||||
|
if (prefixId.value != undefined)
|
||||||
|
formData.append("prefixId", prefixId.value);
|
||||||
|
if (firstName.value != undefined)
|
||||||
|
formData.append("firstName", firstName.value);
|
||||||
|
if (lastName.value != undefined)
|
||||||
|
formData.append("lastName", lastName.value);
|
||||||
|
if (status.value != undefined) formData.append("status", status.value);
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.post(config.API.profileChangeNameId(profileId.value), formData)
|
||||||
|
.then((res) => {
|
||||||
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
|
modal.value = false;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await fetchData();
|
||||||
|
await props.fetchDataInformation();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
dialogMessage(
|
||||||
|
$q,
|
||||||
|
"ไม่สามารถบันทึกข้อมูลได้",
|
||||||
|
"กรุณาอัปโหลดเอกสารหลักฐาน",
|
||||||
|
"warning",
|
||||||
|
undefined,
|
||||||
|
"orange",
|
||||||
|
undefined,
|
||||||
|
undefined,
|
||||||
|
true
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* บันทึกแก้ไขข้อมูล
|
||||||
|
*/
|
||||||
|
const editData = async () => {
|
||||||
|
const formData = new FormData();
|
||||||
|
if (fileUpload.value.length > 0) {
|
||||||
|
const blob = fileUpload.value.slice(0, fileUpload.value[0].size);
|
||||||
|
const newFile = new File(blob, nameFile.value, {
|
||||||
|
type: fileUpload.value[0].type,
|
||||||
|
});
|
||||||
|
formData.append("", newFile);
|
||||||
|
}
|
||||||
|
if (prefixId.value != undefined) formData.append("prefixId", prefixId.value);
|
||||||
|
if (firstName.value != undefined)
|
||||||
|
formData.append("firstName", firstName.value);
|
||||||
|
if (lastName.value != undefined) formData.append("lastName", lastName.value);
|
||||||
|
if (status.value != undefined) formData.append("status", status.value);
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.put(config.API.profileChangeNameId(id.value), formData)
|
||||||
|
.then((res) => {
|
||||||
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
|
modal.value = false;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await fetchData();
|
||||||
|
await props.fetchDataInformation();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ลบลบข้อมูล
|
||||||
|
*/
|
||||||
|
const clickDelete = async () => {
|
||||||
|
$q.dialog({
|
||||||
|
title: `ลบข้อมูล`,
|
||||||
|
message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
|
||||||
|
cancel: "ยกเลิก",
|
||||||
|
ok: "ยืนยัน",
|
||||||
|
persistent: true,
|
||||||
|
})
|
||||||
|
.onOk(async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.delete(config.API.profileChangeNameId(id.value))
|
||||||
|
.then((res) => {
|
||||||
|
success($q, "ลบข้อมูลสำเร็จ");
|
||||||
|
modal.value = false;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.onCancel(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปิด dialog
|
||||||
|
*/
|
||||||
|
const clickClose = async () => {
|
||||||
|
if (editRow.value == true) {
|
||||||
|
$q.dialog({
|
||||||
|
title: `ข้อมูลมีการแก้ไข`,
|
||||||
|
message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
|
||||||
|
cancel: "ยกเลิก",
|
||||||
|
ok: "ยืนยัน",
|
||||||
|
persistent: true,
|
||||||
|
}).onOk(async () => {
|
||||||
|
modal.value = false;
|
||||||
|
next.value = false;
|
||||||
|
previous.value = false;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
modal.value = false;
|
||||||
|
next.value = false;
|
||||||
|
previous.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดเลือกข้อมูลที่จะแก้ไข
|
||||||
|
* @param props ค่า props ใน row ที่เลือก
|
||||||
|
*/
|
||||||
|
const selectData = async (props: DataProps) => {
|
||||||
|
modalEdit.value = true; //กดสำหรับแก้ไขข้อมูล
|
||||||
|
modal.value = true; //modal ที่เด้งขึ้นมา
|
||||||
|
edit.value = false; //ปุ่ม edit ใน modal
|
||||||
|
rawItem.value = props.row;
|
||||||
|
rowIndex.value = props.rowIndex;
|
||||||
|
prefixId.value = props.row.prefixId;
|
||||||
|
firstName.value = props.row.firstName;
|
||||||
|
lastName.value = props.row.lastName;
|
||||||
|
status.value = props.row.status;
|
||||||
|
file.value = props.row.file;
|
||||||
|
id.value = props.row.id;
|
||||||
|
await checkRowPage();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปุ่มเพิ่มบน table
|
||||||
|
*/
|
||||||
|
const addData = () => {
|
||||||
|
modalEdit.value = false;
|
||||||
|
modal.value = true;
|
||||||
|
edit.value = true;
|
||||||
|
prefixId.value = props.perfixId;
|
||||||
|
firstName.value = props.firstname;
|
||||||
|
lastName.value = props.lastname;
|
||||||
|
status.value = "";
|
||||||
|
file.value = "";
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
|
||||||
|
*/
|
||||||
|
const clickCancel = async () => {
|
||||||
|
if (editRow.value == true) {
|
||||||
|
$q.dialog({
|
||||||
|
title: `ข้อมูลมีการแก้ไข`,
|
||||||
|
message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
|
||||||
|
cancel: "ยกเลิก",
|
||||||
|
ok: "ยืนยัน",
|
||||||
|
persistent: true,
|
||||||
|
}).onOk(async () => {
|
||||||
|
edit.value = false;
|
||||||
|
await checkRowPage();
|
||||||
|
await getData();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
edit.value = false;
|
||||||
|
await checkRowPage();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* เช็คว่ามีการแก้ไขข้อมูล
|
||||||
|
*/
|
||||||
|
const clickEditRow = () => {
|
||||||
|
editRow.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
|
||||||
|
* @param row ข้อมูล row ที่ดูประวัติการแก้ไข
|
||||||
|
*/
|
||||||
|
const clickHistory = async (row: RequestItemsObject) => {
|
||||||
|
modalHistory.value = true;
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.profileChangeNameHisId(row.id))
|
||||||
|
.then((res) => {
|
||||||
|
let data = res.data.result;
|
||||||
|
rowsHistory.value = [];
|
||||||
|
data.map((e: ResponseObject) => {
|
||||||
|
rowsHistory.value.push({
|
||||||
|
id: e.id,
|
||||||
|
prefix: e.prefix,
|
||||||
|
prefixId: e.prefixId,
|
||||||
|
firstName: e.firstName,
|
||||||
|
lastName: e.lastName,
|
||||||
|
status: e.status,
|
||||||
|
file: e.file,
|
||||||
|
createdFullName: e.createdFullName,
|
||||||
|
createdAt: new Date(e.createdAt),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const filterSelector = (val: any, update: Function, refData: string) => {
|
||||||
|
switch (refData) {
|
||||||
|
case "prefixOps":
|
||||||
|
update(() => {
|
||||||
|
Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
|
||||||
|
(v: DataOption) => v.name.indexOf(val) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "statusOps":
|
||||||
|
update(() => {
|
||||||
|
Ops.value.statusOps = OpsFilter.value.statusOps.filter(
|
||||||
|
(v: DataOption) => v.name.indexOf(val) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const fileAdd = async (val: any) => {
|
||||||
|
nameFile.value = val[0].name;
|
||||||
|
fileUpload.value = val;
|
||||||
|
};
|
||||||
|
|
||||||
|
const openFile = async (val: string | null) => {
|
||||||
|
if (val != null) window.open(val);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* validate input ใน dialog
|
||||||
|
*/
|
||||||
|
const validateData = async () => {
|
||||||
|
checkValidate.value = true;
|
||||||
|
await myForm.value.validate().then((result: boolean) => {
|
||||||
|
if (result == false) {
|
||||||
|
checkValidate.value = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
|
||||||
|
* @param val ข้อมูล input สำหรับแก้ไขหรือไม่
|
||||||
|
*/
|
||||||
|
const getClass = (val: boolean) => {
|
||||||
|
return {
|
||||||
|
"full-width inputgreen cursor-pointer": val,
|
||||||
|
"full-width cursor-pointer": !val,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.modalfix {
|
||||||
|
position: fixed !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
619
src/components/information/Other.vue
Normal file
619
src/components/information/Other.vue
Normal file
|
|
@ -0,0 +1,619 @@
|
||||||
|
<!-- card อื่นๆ -->
|
||||||
|
<template>
|
||||||
|
<q-card flat bordered class="col-12 q-px-lg q-py-md">
|
||||||
|
<q-form ref="myForm">
|
||||||
|
<ProfileTable
|
||||||
|
:rows="rows"
|
||||||
|
:columns="columns"
|
||||||
|
:filter="filter"
|
||||||
|
:visible-columns="visibleColumns"
|
||||||
|
v-model:inputfilter="filter"
|
||||||
|
v-model:inputvisible="visibleColumns"
|
||||||
|
:add="clickAdd"
|
||||||
|
name="อื่นๆ"
|
||||||
|
icon="mdi-bookmark"
|
||||||
|
:statusEdit="statusEdit"
|
||||||
|
>
|
||||||
|
<template #columns="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-td
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
@click="selectData(props)"
|
||||||
|
class="cursor-pointer"
|
||||||
|
>
|
||||||
|
<div v-if="col.name == 'date'" class="table_ellipsis">
|
||||||
|
{{ date2Thai(col.value) }}
|
||||||
|
</div>
|
||||||
|
<div v-else class="table_ellipsis">
|
||||||
|
{{ col.value }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
<q-td auto-width>
|
||||||
|
<q-btn
|
||||||
|
color="info"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
round
|
||||||
|
size="14px"
|
||||||
|
icon="mdi-history"
|
||||||
|
@click="clickHistory(props.row)"
|
||||||
|
/>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</ProfileTable>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
<!-- popup Edit window-->
|
||||||
|
<q-dialog v-model="modal" persistent>
|
||||||
|
<q-card style="width: 600px">
|
||||||
|
<q-form ref="myForm">
|
||||||
|
<DialogHeader tittle="อื่นๆ" :close="clickClose" />
|
||||||
|
<q-separator />
|
||||||
|
<q-card-section class="q-p-sm">
|
||||||
|
<div
|
||||||
|
class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
|
||||||
|
>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<datepicker
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
:readonly="!edit"
|
||||||
|
v-model="date"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
:enableTimePicker="false"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
week-start="0"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
|
<template #year-overlay-value="{ value }">{{
|
||||||
|
parseInt(value + 543)
|
||||||
|
}}</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
|
||||||
|
:borderless="!edit"
|
||||||
|
:model-value="date2Thai(date)"
|
||||||
|
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'วันที่'}`"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon
|
||||||
|
name="event"
|
||||||
|
class="cursor-pointer"
|
||||||
|
:style="
|
||||||
|
edit
|
||||||
|
? 'color: var(--q-primary)'
|
||||||
|
: 'color: var(--q-grey)'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
</q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
autogrow
|
||||||
|
:readonly="!edit"
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="detail"
|
||||||
|
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'รายละเอียด'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
<DialogFooter
|
||||||
|
:cancel="clickCancel"
|
||||||
|
:edit="clickEdit"
|
||||||
|
:save="clickSave"
|
||||||
|
:validate="validateData"
|
||||||
|
:clickNext="clickNext"
|
||||||
|
:clickPrevious="clickPrevious"
|
||||||
|
:clickDelete="clickDelete"
|
||||||
|
v-model:editvisible="edit"
|
||||||
|
v-model:next="next"
|
||||||
|
v-model:previous="previous"
|
||||||
|
v-model:modalEdit="modalEdit"
|
||||||
|
/>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
<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 == 'date' || 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>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, ref, watch } from "vue";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
import { useComponentProfileDataStore } from "@/components/information/store/store";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
||||||
|
import ProfileTable from "@/components/information/Table.vue";
|
||||||
|
import DialogHeader from "@/components/information/DialogHeader.vue";
|
||||||
|
import DialogFooter from "@/components/information/DialogFooter.vue";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import type {
|
||||||
|
RequestItemsObject,
|
||||||
|
DataProps,
|
||||||
|
} from "@/components/information/interface/request/Other";
|
||||||
|
import type { ResponseObject } from "@/components/information/interface/response/Other";
|
||||||
|
import HistoryTable from "@/components/TableHistory.vue";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
import type { QTableProps } from "quasar";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
statusEdit: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const store = useComponentProfileDataStore();
|
||||||
|
const { profileData, changeProfileColumns } = store;
|
||||||
|
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
|
||||||
|
const route = useRoute();
|
||||||
|
const id = ref<string>("");
|
||||||
|
const date = ref<Date>(new Date());
|
||||||
|
const detail = ref<string>();
|
||||||
|
const myForm = ref<any>(); //form data input
|
||||||
|
const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
|
||||||
|
const modal = ref<boolean>(false); //modal add detail
|
||||||
|
const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
|
||||||
|
const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
|
||||||
|
const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
|
||||||
|
const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
|
||||||
|
const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
|
||||||
|
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
|
||||||
|
const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
|
||||||
|
const tittleHistory = ref<string>("ประวัติแก้ไขอื่นๆ"); //
|
||||||
|
const filterHistory = ref<string>(""); //search data table history
|
||||||
|
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
|
||||||
|
const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
|
||||||
|
const profileId = ref<string>(
|
||||||
|
route.params.id ? route.params.id.toString() : ""
|
||||||
|
);
|
||||||
|
const rows = ref<RequestItemsObject[]>([]);
|
||||||
|
const filter = ref<string>(""); //search data table
|
||||||
|
const visibleColumns = ref<String[]>([]);
|
||||||
|
profileData.other.columns.length == 0
|
||||||
|
? (visibleColumns.value = ["date", "detail"])
|
||||||
|
: (visibleColumns.value = profileData.other.columns);
|
||||||
|
const columns = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "date",
|
||||||
|
align: "left",
|
||||||
|
label: "วันที่",
|
||||||
|
sortable: true,
|
||||||
|
field: "date",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px; width: 50px;",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "detail",
|
||||||
|
align: "left",
|
||||||
|
label: "รายละเอียด",
|
||||||
|
sortable: true,
|
||||||
|
field: "detail",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const columnsHistory = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "date",
|
||||||
|
align: "left",
|
||||||
|
label: "วันที่",
|
||||||
|
sortable: true,
|
||||||
|
field: "date",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px; width: 50px;",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "detail",
|
||||||
|
align: "left",
|
||||||
|
label: "รายละเอียด",
|
||||||
|
sortable: true,
|
||||||
|
field: "detail",
|
||||||
|
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[]>([
|
||||||
|
"date",
|
||||||
|
"detail",
|
||||||
|
"createdFullName",
|
||||||
|
"createdAt",
|
||||||
|
]);
|
||||||
|
|
||||||
|
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
|
||||||
|
await changeProfileColumns("other", count);
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
|
||||||
|
const fetchData = async () => {
|
||||||
|
if (profileId.value) {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.profileOtherId(profileId.value))
|
||||||
|
.then((res) => {
|
||||||
|
let data = res.data.result;
|
||||||
|
rows.value = [];
|
||||||
|
data.map((e: ResponseObject) => {
|
||||||
|
rows.value.push({
|
||||||
|
id: e.id,
|
||||||
|
date: new Date(e.date),
|
||||||
|
detail: e.detail,
|
||||||
|
createdFullName: e.createdFullName,
|
||||||
|
createdAt: new Date(e.createdAt),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดดูข้อมูลก่อนหน้า
|
||||||
|
*/
|
||||||
|
const clickPrevious = async () => {
|
||||||
|
edit.value = false;
|
||||||
|
rowIndex.value -= 1;
|
||||||
|
await getData();
|
||||||
|
await checkRowPage();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดดูข้อมูลต่อไป
|
||||||
|
*/
|
||||||
|
const clickNext = async () => {
|
||||||
|
edit.value = false;
|
||||||
|
rowIndex.value += 1;
|
||||||
|
await getData();
|
||||||
|
await checkRowPage();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดดูข้อมูลต่อไป
|
||||||
|
*/
|
||||||
|
const getData = () => {
|
||||||
|
const row = rows.value[rowIndex.value];
|
||||||
|
date.value = row.date;
|
||||||
|
detail.value = row.detail;
|
||||||
|
id.value = row.id;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
|
||||||
|
*/
|
||||||
|
const checkRowPage = () => {
|
||||||
|
editRow.value = false;
|
||||||
|
next.value = true;
|
||||||
|
previous.value = true;
|
||||||
|
if (rowIndex.value + 1 >= rows.value.length) {
|
||||||
|
next.value = false;
|
||||||
|
}
|
||||||
|
if (rowIndex.value - 1 < 0) {
|
||||||
|
previous.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปุ่มแก้ไขใน dialog
|
||||||
|
*/
|
||||||
|
const clickEdit = () => {
|
||||||
|
editRow.value = false;
|
||||||
|
next.value = false;
|
||||||
|
previous.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปุ่มเพิ่มด้านบน table
|
||||||
|
*/
|
||||||
|
const clickAdd = async () => {
|
||||||
|
editRow.value = false;
|
||||||
|
await addData();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดบันทึกใน dialog
|
||||||
|
*/
|
||||||
|
const clickSave = async () => {
|
||||||
|
myForm.value.validate().then(async (result: boolean) => {
|
||||||
|
if (result) {
|
||||||
|
if (modalEdit.value) {
|
||||||
|
await editData();
|
||||||
|
} else {
|
||||||
|
await saveData();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* บันทึกเพิ่มข้อมูล
|
||||||
|
*/
|
||||||
|
const saveData = async () => {
|
||||||
|
if (profileId.value) {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.post(config.API.profileOtherId(profileId.value), {
|
||||||
|
id: id.value,
|
||||||
|
date: date.value,
|
||||||
|
detail: detail.value,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
|
modal.value = false;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* บันทึกแก้ไขข้อมูล
|
||||||
|
*/
|
||||||
|
const editData = async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.put(config.API.profileOtherId(id.value), {
|
||||||
|
id: id.value,
|
||||||
|
date: date.value,
|
||||||
|
detail: detail.value,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
|
modal.value = false;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ลบลบข้อมูล
|
||||||
|
*/
|
||||||
|
const clickDelete = async () => {
|
||||||
|
$q.dialog({
|
||||||
|
title: `ลบข้อมูล`,
|
||||||
|
message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
|
||||||
|
cancel: "ยกเลิก",
|
||||||
|
ok: "ยืนยัน",
|
||||||
|
persistent: true,
|
||||||
|
})
|
||||||
|
.onOk(async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.delete(config.API.profileOtherId(id.value))
|
||||||
|
.then((res) => {
|
||||||
|
success($q, "ลบข้อมูลสำเร็จ");
|
||||||
|
modal.value = false;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.onCancel(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปิด dialog
|
||||||
|
*/
|
||||||
|
const clickClose = async () => {
|
||||||
|
if (editRow.value == true) {
|
||||||
|
$q.dialog({
|
||||||
|
title: `ข้อมูลมีการแก้ไข`,
|
||||||
|
message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
|
||||||
|
cancel: "ยกเลิก",
|
||||||
|
ok: "ยืนยัน",
|
||||||
|
persistent: true,
|
||||||
|
}).onOk(async () => {
|
||||||
|
modal.value = false;
|
||||||
|
next.value = false;
|
||||||
|
previous.value = false;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
modal.value = false;
|
||||||
|
next.value = false;
|
||||||
|
previous.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดเลือกข้อมูลที่จะแก้ไข
|
||||||
|
* @param props ค่า props ใน row ที่เลือก
|
||||||
|
*/
|
||||||
|
const selectData = async (props: DataProps) => {
|
||||||
|
modalEdit.value = true;
|
||||||
|
modal.value = true;
|
||||||
|
edit.value = false;
|
||||||
|
rawItem.value = props.row;
|
||||||
|
rowIndex.value = props.rowIndex;
|
||||||
|
date.value = props.row.date;
|
||||||
|
detail.value = props.row.detail;
|
||||||
|
id.value = props.row.id;
|
||||||
|
await checkRowPage();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปุ่มเพิ่มบน table
|
||||||
|
*/
|
||||||
|
const addData = () => {
|
||||||
|
modalEdit.value = false;
|
||||||
|
modal.value = true;
|
||||||
|
edit.value = true;
|
||||||
|
date.value = new Date();
|
||||||
|
detail.value = "";
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
|
||||||
|
*/
|
||||||
|
const clickCancel = async () => {
|
||||||
|
if (editRow.value == true) {
|
||||||
|
$q.dialog({
|
||||||
|
title: `ข้อมูลมีการแก้ไข`,
|
||||||
|
message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
|
||||||
|
cancel: "ยกเลิก",
|
||||||
|
ok: "ยืนยัน",
|
||||||
|
persistent: true,
|
||||||
|
}).onOk(async () => {
|
||||||
|
edit.value = false;
|
||||||
|
await checkRowPage();
|
||||||
|
await getData();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
edit.value = false;
|
||||||
|
await checkRowPage();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* เช็คว่ามีการแก้ไขข้อมูล
|
||||||
|
*/
|
||||||
|
const clickEditRow = () => {
|
||||||
|
editRow.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
|
||||||
|
* @param row ข้อมูล row ที่ดูประวัติการแก้ไข
|
||||||
|
*/
|
||||||
|
const clickHistory = async (row: RequestItemsObject) => {
|
||||||
|
modalHistory.value = true;
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.profileOtherHisId(row.id))
|
||||||
|
.then((res) => {
|
||||||
|
let data = res.data.result;
|
||||||
|
rowsHistory.value = [];
|
||||||
|
data.map((e: ResponseObject) => {
|
||||||
|
rowsHistory.value.push({
|
||||||
|
id: e.id,
|
||||||
|
date: e.date,
|
||||||
|
detail: e.detail,
|
||||||
|
createdFullName: e.createdFullName,
|
||||||
|
createdAt: new Date(e.createdAt),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* validate input ใน dialog
|
||||||
|
*/
|
||||||
|
const validateData = async () => {
|
||||||
|
checkValidate.value = true;
|
||||||
|
await myForm.value.validate().then((result: boolean) => {
|
||||||
|
if (result == false) {
|
||||||
|
checkValidate.value = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
|
||||||
|
* @param val ข้อมูล input สำหรับแก้ไขหรือไม่
|
||||||
|
*/
|
||||||
|
const getClass = (val: boolean) => {
|
||||||
|
return {
|
||||||
|
"full-width inputgreen cursor-pointer": val,
|
||||||
|
"full-width cursor-pointer": !val,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
</script>
|
||||||
824
src/components/information/Record.vue
Normal file
824
src/components/information/Record.vue
Normal file
|
|
@ -0,0 +1,824 @@
|
||||||
|
<!-- card บันทึกวันที่ไม่ได้รับเงินเดือนหรือได้รับเงินเดือนไม่เต็มหรือวันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประดาศใช้กฏอัยการศึก -->
|
||||||
|
<template>
|
||||||
|
<q-card flat bordered class="col-12 q-px-lg q-py-md">
|
||||||
|
<q-form ref="myForm">
|
||||||
|
<ProfileTable
|
||||||
|
:rows="rows"
|
||||||
|
:columns="columns"
|
||||||
|
:filter="filter"
|
||||||
|
:visible-columns="visibleColumns"
|
||||||
|
v-model:inputfilter="filter"
|
||||||
|
v-model:inputvisible="visibleColumns"
|
||||||
|
:add="clickAdd"
|
||||||
|
name="วันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้กฎอัยการศึก"
|
||||||
|
icon="mdi-calendar-remove"
|
||||||
|
:statusEdit="statusEdit"
|
||||||
|
>
|
||||||
|
<template #columns="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-td
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
@click="selectData(props)"
|
||||||
|
class="cursor-pointer"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-if="col.name == 'date' || col.name == 'refCommandDate'"
|
||||||
|
class="table_ellipsis"
|
||||||
|
>
|
||||||
|
{{ col.value == null ? null : date2Thai(col.value) }}
|
||||||
|
</div>
|
||||||
|
<div v-else class="table_ellipsis">
|
||||||
|
{{ col.value }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
<q-td auto-width>
|
||||||
|
<q-btn
|
||||||
|
color="info"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
round
|
||||||
|
size="14px"
|
||||||
|
icon="mdi-history"
|
||||||
|
@click="clickHistory(props.row)"
|
||||||
|
/>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</ProfileTable>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
<!-- popup Edit window-->
|
||||||
|
<q-dialog v-model="modal" persistent>
|
||||||
|
<q-card style="width: 600px">
|
||||||
|
<q-form ref="myForm">
|
||||||
|
<DialogHeader
|
||||||
|
tittle="วันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้กฎอัยการศึก"
|
||||||
|
:close="clickClose"
|
||||||
|
/>
|
||||||
|
<q-separator />
|
||||||
|
<q-card-section class="q-p-sm">
|
||||||
|
<div
|
||||||
|
class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
|
||||||
|
>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<datepicker
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
:readonly="!edit"
|
||||||
|
v-model="date"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
:enableTimePicker="false"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
week-start="0"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
|
<template #year-overlay-value="{ value }">{{
|
||||||
|
parseInt(value + 543)
|
||||||
|
}}</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
:borderless="!edit"
|
||||||
|
:model-value="date2Thai(date)"
|
||||||
|
:rules="[(val) => !!val || `${'กรุณาเลือกวัน เดือน ปี'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'วัน เดือน ปี'}`"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon
|
||||||
|
name="event"
|
||||||
|
class="cursor-pointer"
|
||||||
|
:style="
|
||||||
|
edit
|
||||||
|
? 'color: var(--q-primary)'
|
||||||
|
: 'color: var(--q-grey)'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
</q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
autogrow
|
||||||
|
lazy-rules
|
||||||
|
:readonly="!edit"
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="reference"
|
||||||
|
:rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'เอกสารอ้างอิง'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
autogrow
|
||||||
|
lazy-rules
|
||||||
|
:readonly="!edit"
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="detail"
|
||||||
|
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'รายละเอียด'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
:readonly="!edit"
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="refCommandNo"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'เลขที่คำสั่ง'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon
|
||||||
|
name="mdi-file"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="resetFilter"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<datepicker
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
:readonly="!edit"
|
||||||
|
v-model="refCommandDate"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
:enableTimePicker="false"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
week-start="0"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
|
<template #year-overlay-value="{ value }">{{
|
||||||
|
parseInt(value + 543)
|
||||||
|
}}</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
:borderless="!edit"
|
||||||
|
:model-value="
|
||||||
|
refCommandDate == null ? null : date2Thai(refCommandDate)
|
||||||
|
"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon
|
||||||
|
name="event"
|
||||||
|
class="cursor-pointer"
|
||||||
|
:style="
|
||||||
|
edit
|
||||||
|
? 'color: var(--q-primary)'
|
||||||
|
: 'color: var(--q-grey)'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
</q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
<DialogFooter
|
||||||
|
:cancel="clickCancel"
|
||||||
|
:edit="clickEdit"
|
||||||
|
:save="clickSave"
|
||||||
|
:validate="validateData"
|
||||||
|
:clickNext="clickNext"
|
||||||
|
:clickPrevious="clickPrevious"
|
||||||
|
:clickDelete="clickDelete"
|
||||||
|
v-model:editvisible="edit"
|
||||||
|
v-model:next="next"
|
||||||
|
v-model:previous="previous"
|
||||||
|
v-model:modalEdit="modalEdit"
|
||||||
|
/>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
<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 == 'date' ||
|
||||||
|
col.name == 'createdAt' ||
|
||||||
|
col.name == 'refCommandDate'
|
||||||
|
"
|
||||||
|
class="table_ellipsis"
|
||||||
|
>
|
||||||
|
{{ col.value == null ? null : date2Thai(col.value) }}
|
||||||
|
</div>
|
||||||
|
<div v-else class="table_ellipsis">
|
||||||
|
{{ col.value }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</HistoryTable>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, ref, watch } from "vue";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
import { useComponentProfileDataStore } from "@/components/information/store/store";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
||||||
|
import ProfileTable from "@/components/information/Table.vue";
|
||||||
|
import DialogHeader from "@/components/information/DialogHeader.vue";
|
||||||
|
import DialogFooter from "@/components/information/DialogFooter.vue";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import type {
|
||||||
|
RequestItemsObject,
|
||||||
|
DataProps,
|
||||||
|
} from "@/components/information/interface/request/Record";
|
||||||
|
import type { ResponseObject } from "@/components/information/interface/response/Record";
|
||||||
|
import HistoryTable from "@/components/TableHistory.vue";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
import type { QTableProps } from "quasar";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
statusEdit: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const store = useComponentProfileDataStore();
|
||||||
|
const { profileData, changeProfileColumns } = store;
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
|
||||||
|
mixin;
|
||||||
|
const route = useRoute();
|
||||||
|
const id = ref<string>("");
|
||||||
|
const date = ref<Date>(new Date());
|
||||||
|
const detail = ref<string>();
|
||||||
|
const reference = ref<string>();
|
||||||
|
const refCommandNo = ref<string>();
|
||||||
|
const refCommandDate = ref<Date | null>(new Date());
|
||||||
|
const myForm = ref<any>(); //form data input
|
||||||
|
const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
|
||||||
|
const modal = ref<boolean>(false); //modal add detail
|
||||||
|
const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
|
||||||
|
const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
|
||||||
|
const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
|
||||||
|
const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
|
||||||
|
const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
|
||||||
|
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
|
||||||
|
const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
|
||||||
|
const tittleHistory = ref<string>(
|
||||||
|
"ประวัติแก้ไขวันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้กฎอัยการศึก"
|
||||||
|
);
|
||||||
|
const filterHistory = ref<string>(""); //search data table history
|
||||||
|
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
|
||||||
|
const profileId = ref<string>(
|
||||||
|
route.params.id ? route.params.id.toString() : ""
|
||||||
|
);
|
||||||
|
const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
|
||||||
|
const rows = ref<RequestItemsObject[]>([]);
|
||||||
|
const filter = ref<string>(""); //search data table
|
||||||
|
const visibleColumns = ref<String[]>([]);
|
||||||
|
profileData.record.columns.length == 0
|
||||||
|
? (visibleColumns.value = [
|
||||||
|
"date",
|
||||||
|
"detail",
|
||||||
|
"reference",
|
||||||
|
"refCommandNo",
|
||||||
|
"refCommandDate",
|
||||||
|
])
|
||||||
|
: (visibleColumns.value = profileData.record.columns);
|
||||||
|
const columns = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "date",
|
||||||
|
align: "left",
|
||||||
|
label: "วัน เดือน ปี",
|
||||||
|
sortable: true,
|
||||||
|
field: "date",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "reference",
|
||||||
|
align: "left",
|
||||||
|
label: "เอกสารอ้างอิง",
|
||||||
|
sortable: true,
|
||||||
|
field: "reference",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "detail",
|
||||||
|
align: "left",
|
||||||
|
label: "รายละเอียด",
|
||||||
|
sortable: true,
|
||||||
|
field: "detail",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "refCommandNo",
|
||||||
|
align: "left",
|
||||||
|
label: "เลขที่คำสั่ง",
|
||||||
|
sortable: true,
|
||||||
|
field: "refCommandNo",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "refCommandDate",
|
||||||
|
align: "left",
|
||||||
|
label: "เอกสารอ้างอิง (ลงวันที่)",
|
||||||
|
sortable: true,
|
||||||
|
field: "refCommandDate",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const columnsHistory = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "date",
|
||||||
|
align: "left",
|
||||||
|
label: "วัน เดือน ปี",
|
||||||
|
sortable: true,
|
||||||
|
field: "date",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "reference",
|
||||||
|
align: "left",
|
||||||
|
label: "เอกสารอ้างอิง",
|
||||||
|
sortable: true,
|
||||||
|
field: "reference",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "detail",
|
||||||
|
align: "left",
|
||||||
|
label: "รายละเอียด",
|
||||||
|
sortable: true,
|
||||||
|
field: "detail",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "refCommandNo",
|
||||||
|
align: "left",
|
||||||
|
label: "เลขที่คำสั่ง",
|
||||||
|
sortable: true,
|
||||||
|
field: "refCommandNo",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "refCommandDate",
|
||||||
|
align: "left",
|
||||||
|
label: "เอกสารอ้างอิง (ลงวันที่)",
|
||||||
|
sortable: true,
|
||||||
|
field: "refCommandDate",
|
||||||
|
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[]>([
|
||||||
|
"date",
|
||||||
|
"detail",
|
||||||
|
"reference",
|
||||||
|
"refCommandNo",
|
||||||
|
"refCommandDate",
|
||||||
|
"createdFullName",
|
||||||
|
"createdAt",
|
||||||
|
]);
|
||||||
|
|
||||||
|
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
|
||||||
|
await changeProfileColumns("record", count);
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
|
||||||
|
const fetchData = async () => {
|
||||||
|
if (profileId.value != "") {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.profileNopaidId(profileId.value))
|
||||||
|
.then((res) => {
|
||||||
|
let data = res.data.result;
|
||||||
|
rows.value = [];
|
||||||
|
data.map((e: ResponseObject) => {
|
||||||
|
rows.value.push({
|
||||||
|
id: e.id,
|
||||||
|
date: new Date(e.date),
|
||||||
|
detail: e.detail,
|
||||||
|
reference: e.reference,
|
||||||
|
refCommandNo: e.refCommandNo,
|
||||||
|
refCommandDate:
|
||||||
|
e.refCommandDate == null ? null : new Date(e.refCommandDate),
|
||||||
|
createdFullName: e.createdFullName,
|
||||||
|
createdAt: new Date(e.createdAt),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดดูข้อมูลก่อนหน้า
|
||||||
|
*/
|
||||||
|
const clickPrevious = async () => {
|
||||||
|
edit.value = false;
|
||||||
|
rowIndex.value -= 1;
|
||||||
|
await getData();
|
||||||
|
await checkRowPage();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดดูข้อมูลต่อไป
|
||||||
|
*/
|
||||||
|
const clickNext = async () => {
|
||||||
|
edit.value = false;
|
||||||
|
rowIndex.value += 1;
|
||||||
|
await getData();
|
||||||
|
await checkRowPage();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดดูข้อมูลต่อไป
|
||||||
|
*/
|
||||||
|
const getData = () => {
|
||||||
|
const row = rows.value[rowIndex.value];
|
||||||
|
date.value = row.date;
|
||||||
|
detail.value = row.detail;
|
||||||
|
reference.value = row.reference;
|
||||||
|
refCommandNo.value = row.refCommandNo;
|
||||||
|
refCommandDate.value = row.refCommandDate;
|
||||||
|
id.value = row.id;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
|
||||||
|
*/
|
||||||
|
const checkRowPage = () => {
|
||||||
|
editRow.value = false;
|
||||||
|
next.value = true;
|
||||||
|
previous.value = true;
|
||||||
|
if (rowIndex.value + 1 >= rows.value.length) {
|
||||||
|
next.value = false;
|
||||||
|
}
|
||||||
|
if (rowIndex.value - 1 < 0) {
|
||||||
|
previous.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปุ่มแก้ไขใน dialog
|
||||||
|
*/
|
||||||
|
const clickEdit = () => {
|
||||||
|
editRow.value = false;
|
||||||
|
next.value = false;
|
||||||
|
previous.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปุ่มเพิ่มด้านบน table
|
||||||
|
*/
|
||||||
|
const clickAdd = async () => {
|
||||||
|
editRow.value = false;
|
||||||
|
await addData();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดบันทึกใน dialog
|
||||||
|
*/
|
||||||
|
const clickSave = async () => {
|
||||||
|
myForm.value.validate().then(async (result: boolean) => {
|
||||||
|
if (result) {
|
||||||
|
if (modalEdit.value) {
|
||||||
|
await editData();
|
||||||
|
} else {
|
||||||
|
await saveData();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* บันทึกเพิ่มข้อมูล
|
||||||
|
*/
|
||||||
|
const saveData = async () => {
|
||||||
|
if (profileId.value) {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.post(config.API.profileNopaidId(profileId.value), {
|
||||||
|
id: id.value,
|
||||||
|
date: dateToISO(date.value),
|
||||||
|
detail: detail.value,
|
||||||
|
reference: reference.value,
|
||||||
|
refCommandNo: refCommandNo.value,
|
||||||
|
refCommandDate:
|
||||||
|
refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
|
modal.value = false;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* บันทึกแก้ไขข้อมูล
|
||||||
|
*/
|
||||||
|
const editData = async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.put(config.API.profileNopaidId(id.value), {
|
||||||
|
id: id.value,
|
||||||
|
date: dateToISO(date.value),
|
||||||
|
detail: detail.value,
|
||||||
|
reference: reference.value,
|
||||||
|
refCommandNo: refCommandNo.value,
|
||||||
|
refCommandDate:
|
||||||
|
refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
|
modal.value = false;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ลบลบข้อมูล
|
||||||
|
*/
|
||||||
|
const clickDelete = async () => {
|
||||||
|
$q.dialog({
|
||||||
|
title: `ลบข้อมูล`,
|
||||||
|
message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
|
||||||
|
cancel: "ยกเลิก",
|
||||||
|
ok: "ยืนยัน",
|
||||||
|
persistent: true,
|
||||||
|
})
|
||||||
|
.onOk(async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.delete(config.API.profileNopaidId(id.value))
|
||||||
|
.then((res) => {
|
||||||
|
success($q, "ลบข้อมูลสำเร็จ");
|
||||||
|
modal.value = false;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.onCancel(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปิด dialog
|
||||||
|
*/
|
||||||
|
const clickClose = async () => {
|
||||||
|
if (editRow.value == true) {
|
||||||
|
$q.dialog({
|
||||||
|
title: `ข้อมูลมีการแก้ไข`,
|
||||||
|
message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
|
||||||
|
cancel: "ยกเลิก",
|
||||||
|
ok: "ยืนยัน",
|
||||||
|
persistent: true,
|
||||||
|
}).onOk(async () => {
|
||||||
|
modal.value = false;
|
||||||
|
next.value = false;
|
||||||
|
previous.value = false;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
modal.value = false;
|
||||||
|
next.value = false;
|
||||||
|
previous.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดเลือกข้อมูลที่จะแก้ไข
|
||||||
|
* @param props ค่า props ใน row ที่เลือก
|
||||||
|
*/
|
||||||
|
const selectData = async (props: DataProps) => {
|
||||||
|
modalEdit.value = true;
|
||||||
|
modal.value = true;
|
||||||
|
edit.value = false;
|
||||||
|
rawItem.value = props.row;
|
||||||
|
rowIndex.value = props.rowIndex;
|
||||||
|
date.value = props.row.date;
|
||||||
|
detail.value = props.row.detail;
|
||||||
|
reference.value = props.row.reference;
|
||||||
|
refCommandNo.value = props.row.refCommandNo;
|
||||||
|
refCommandDate.value = props.row.refCommandDate;
|
||||||
|
id.value = props.row.id;
|
||||||
|
await checkRowPage();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปุ่มเพิ่มบน table
|
||||||
|
*/
|
||||||
|
const addData = () => {
|
||||||
|
modalEdit.value = false;
|
||||||
|
modal.value = true;
|
||||||
|
edit.value = true;
|
||||||
|
date.value = new Date();
|
||||||
|
detail.value = "";
|
||||||
|
reference.value = "";
|
||||||
|
refCommandNo.value = "";
|
||||||
|
refCommandDate.value = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
|
||||||
|
*/
|
||||||
|
const clickCancel = async () => {
|
||||||
|
if (editRow.value == true) {
|
||||||
|
$q.dialog({
|
||||||
|
title: `ข้อมูลมีการแก้ไข`,
|
||||||
|
message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
|
||||||
|
cancel: "ยกเลิก",
|
||||||
|
ok: "ยืนยัน",
|
||||||
|
persistent: true,
|
||||||
|
}).onOk(async () => {
|
||||||
|
edit.value = false;
|
||||||
|
await checkRowPage();
|
||||||
|
await getData();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
edit.value = false;
|
||||||
|
await checkRowPage();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* เช็คว่ามีการแก้ไขข้อมูล
|
||||||
|
*/
|
||||||
|
const clickEditRow = () => {
|
||||||
|
editRow.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
|
||||||
|
* @param row ข้อมูล row ที่ดูประวัติการแก้ไข
|
||||||
|
*/
|
||||||
|
const clickHistory = async (row: RequestItemsObject) => {
|
||||||
|
modalHistory.value = true;
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.profileNopaidHisId(row.id))
|
||||||
|
.then((res) => {
|
||||||
|
let data = res.data.result;
|
||||||
|
rowsHistory.value = [];
|
||||||
|
data.map((e: ResponseObject) => {
|
||||||
|
rowsHistory.value.push({
|
||||||
|
id: e.id,
|
||||||
|
date: new Date(e.date),
|
||||||
|
detail: e.detail,
|
||||||
|
reference: e.reference,
|
||||||
|
refCommandNo: e.refCommandNo,
|
||||||
|
refCommandDate:
|
||||||
|
e.refCommandDate == null ? null : new Date(e.refCommandDate),
|
||||||
|
createdFullName: e.createdFullName,
|
||||||
|
createdAt: new Date(e.createdAt),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* validate input ใน dialog
|
||||||
|
*/
|
||||||
|
const validateData = async () => {
|
||||||
|
checkValidate.value = true;
|
||||||
|
await myForm.value.validate().then((result: boolean) => {
|
||||||
|
if (result == false) {
|
||||||
|
checkValidate.value = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
|
||||||
|
* @param val ข้อมูล input สำหรับแก้ไขหรือไม่
|
||||||
|
*/
|
||||||
|
const getClass = (val: boolean) => {
|
||||||
|
return {
|
||||||
|
"full-width inputgreen cursor-pointer": val,
|
||||||
|
"full-width cursor-pointer": !val,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const resetFilter = () => {};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.modalfix {
|
||||||
|
position: fixed !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
2078
src/components/information/Salary.vue
Normal file
2078
src/components/information/Salary.vue
Normal file
File diff suppressed because it is too large
Load diff
2009
src/components/information/SalaryEmployee.vue
Normal file
2009
src/components/information/SalaryEmployee.vue
Normal file
File diff suppressed because it is too large
Load diff
2039
src/components/information/SalaryEmployeeTemp.vue
Normal file
2039
src/components/information/SalaryEmployeeTemp.vue
Normal file
File diff suppressed because it is too large
Load diff
215
src/components/information/Table.vue
Normal file
215
src/components/information/Table.vue
Normal file
|
|
@ -0,0 +1,215 @@
|
||||||
|
<template>
|
||||||
|
<div class="q-pb-sm row">
|
||||||
|
<HeaderTop
|
||||||
|
v-model:edit="editBtn"
|
||||||
|
:header="name"
|
||||||
|
:icon="icon"
|
||||||
|
:add="checkAdd"
|
||||||
|
:addleave="checkAddLeave"
|
||||||
|
:addData="true"
|
||||||
|
:history="false"
|
||||||
|
:disable="statusEdit"
|
||||||
|
:iconAdd="iconAdd"
|
||||||
|
/>
|
||||||
|
<q-space />
|
||||||
|
<div class="items-center" style="display: flex" v-if="headerShow">
|
||||||
|
<!-- ค้นหาข้อความใน table -->
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon v-if="inputfilter == ''" name="search" />
|
||||||
|
<q-icon
|
||||||
|
v-if="inputfilter !== ''"
|
||||||
|
name="clear"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="resetFilter"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
<!-- แสดงคอลัมน์ใน table -->
|
||||||
|
<q-select
|
||||||
|
:model-value="inputvisible"
|
||||||
|
@update:model-value="updateVisible"
|
||||||
|
:display-value="$q.lang.table.columns"
|
||||||
|
multiple
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
:options="attrs.columns"
|
||||||
|
options-dense
|
||||||
|
option-value="name"
|
||||||
|
map-options
|
||||||
|
emit-value
|
||||||
|
style="min-width: 150px"
|
||||||
|
class="gt-xs q-ml-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<q-table
|
||||||
|
ref="table"
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
class="custom-header-table"
|
||||||
|
v-bind="attrs"
|
||||||
|
virtual-scroll
|
||||||
|
:virtual-scroll-sticky-size-start="48"
|
||||||
|
dense
|
||||||
|
:pagination-label="paginationLabel"
|
||||||
|
:pagination="initialPagination"
|
||||||
|
:rows-per-page-options="[0]"
|
||||||
|
>
|
||||||
|
<template v-slot:header="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
|
<span class="text-weight-medium">{{ col.label }}</span>
|
||||||
|
</q-th>
|
||||||
|
<q-th auto-width />
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
<template #body="props">
|
||||||
|
<slot v-bind="props" name="columns"></slot>
|
||||||
|
</template>
|
||||||
|
</q-table>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, useAttrs } from "vue";
|
||||||
|
import HeaderTop from "@/components/information/top.vue";
|
||||||
|
import type { Pagination } from "@/components/information/interface/store/main";
|
||||||
|
|
||||||
|
const attrs = ref<any>(useAttrs());
|
||||||
|
const table = ref<any>(null);
|
||||||
|
const filterRef = ref<any>(null);
|
||||||
|
const editBtn = ref<boolean>(false);
|
||||||
|
const initialPagination = ref<Pagination>({
|
||||||
|
rowsPerPage: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
inputfilter: String,
|
||||||
|
name: String,
|
||||||
|
icon: String,
|
||||||
|
iconAdd: {
|
||||||
|
type: String,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
inputvisible: Array,
|
||||||
|
editvisible: Boolean,
|
||||||
|
headerShow: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
statusEdit: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
edit: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
add: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
addleave: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
cancel: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
validate: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits([
|
||||||
|
"update:inputfilter",
|
||||||
|
"update:inputvisible",
|
||||||
|
"update:editvisible",
|
||||||
|
]);
|
||||||
|
|
||||||
|
const updateEdit = (value: Boolean) => {
|
||||||
|
emit("update:editvisible", value);
|
||||||
|
};
|
||||||
|
const updateInput = (value: string | number | null) => {
|
||||||
|
emit("update:inputfilter", value);
|
||||||
|
};
|
||||||
|
const updateVisible = (value: []) => {
|
||||||
|
emit("update:inputvisible", value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const paginationLabel = (start: string, end: string, total: string) => {
|
||||||
|
return start + "-" + end + " ใน " + total;
|
||||||
|
};
|
||||||
|
|
||||||
|
const checkAddLeave = () => {
|
||||||
|
props.addleave();
|
||||||
|
};
|
||||||
|
|
||||||
|
const checkAdd = () => {
|
||||||
|
props.add();
|
||||||
|
};
|
||||||
|
|
||||||
|
const edit = async () => {
|
||||||
|
updateEdit(!props.editvisible);
|
||||||
|
props.edit();
|
||||||
|
};
|
||||||
|
|
||||||
|
const cancel = async () => {
|
||||||
|
updateEdit(!props.editvisible);
|
||||||
|
props.cancel();
|
||||||
|
};
|
||||||
|
|
||||||
|
const resetFilter = () => {
|
||||||
|
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
|
||||||
|
emit("update:inputfilter", "");
|
||||||
|
filterRef.value.focus();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.icon-color {
|
||||||
|
color: #4154b3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-header-table {
|
||||||
|
max-height: 64vh;
|
||||||
|
|
||||||
|
.q-table tr:nth-child(odd) td {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-table tr:nth-child(even) td {
|
||||||
|
background: #f8f8f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-table thead tr {
|
||||||
|
background: #ecebeb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-table thead tr th {
|
||||||
|
position: sticky;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* this will be the loading indicator */
|
||||||
|
.q-table thead tr:last-child th {
|
||||||
|
/* height of all previous header rows */
|
||||||
|
top: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-table thead tr:first-child th {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
692
src/components/information/TableProfile.vue
Normal file
692
src/components/information/TableProfile.vue
Normal file
|
|
@ -0,0 +1,692 @@
|
||||||
|
<template>
|
||||||
|
<q-table
|
||||||
|
ref="table"
|
||||||
|
flat
|
||||||
|
:class="
|
||||||
|
$q.screen.gt.xs
|
||||||
|
? 'q-px-md custom-header-table2'
|
||||||
|
: 'q-px-sm custom-header-table2 custom-table-height'
|
||||||
|
"
|
||||||
|
v-bind="attrs"
|
||||||
|
dense
|
||||||
|
virtual-scroll
|
||||||
|
:virtual-scroll-sticky-size-start="48"
|
||||||
|
:pagination-label="paginationLabel"
|
||||||
|
:pagination="initialPagination"
|
||||||
|
:rows-per-page-options="[0]"
|
||||||
|
>
|
||||||
|
<template v-slot:top="props">
|
||||||
|
<div class="q-py-sm col-12 row">
|
||||||
|
<q-space />
|
||||||
|
<div class="items-center row col-12 q-gutter-x-sm">
|
||||||
|
<q-btn
|
||||||
|
size="13px"
|
||||||
|
color="grey-7"
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
@click="onTab"
|
||||||
|
class="shadow-1"
|
||||||
|
icon="chevron_right"
|
||||||
|
v-if="!isTab"
|
||||||
|
>
|
||||||
|
<q-tooltip>เปิด</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn
|
||||||
|
size="12px"
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
color="blue"
|
||||||
|
@click="clickSearchPanel"
|
||||||
|
icon="mdi-filter-variant"
|
||||||
|
v-show="searchPanel == false"
|
||||||
|
>
|
||||||
|
<q-tooltip>ค้นหาขั้นสูง</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<q-space />
|
||||||
|
<q-input
|
||||||
|
v-show="searchPanel == false"
|
||||||
|
standout
|
||||||
|
dense
|
||||||
|
:model-value="inputfilter"
|
||||||
|
ref="filterRef"
|
||||||
|
@update:model-value="updateInput"
|
||||||
|
outlined
|
||||||
|
debounce="300"
|
||||||
|
placeholder="ค้นหา"
|
||||||
|
style="max-width: 200px"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon v-if="inputfilter == ''" name="search" />
|
||||||
|
<q-icon
|
||||||
|
v-if="inputfilter !== ''"
|
||||||
|
name="clear"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="resetFilter"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
<!-- แสดงคอลัมน์ใน table -->
|
||||||
|
<q-select
|
||||||
|
:model-value="inputvisible"
|
||||||
|
@update:model-value="updateVisible"
|
||||||
|
:display-value="$q.lang.table.columns"
|
||||||
|
multiple
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
:options="attrs.columns"
|
||||||
|
options-dense
|
||||||
|
option-value="name"
|
||||||
|
map-options
|
||||||
|
emit-value
|
||||||
|
style="min-width: 150px"
|
||||||
|
class="gt-xs q-ml-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="items-center">
|
||||||
|
<q-slide-transition
|
||||||
|
v-show="searchPanel"
|
||||||
|
class="q-mb-sm"
|
||||||
|
:duration="150"
|
||||||
|
>
|
||||||
|
<div class="my-content">
|
||||||
|
<div
|
||||||
|
class="row q-pa-xs items-center bg-blue-1"
|
||||||
|
style="border-radius: 4px 4px 0px 0px"
|
||||||
|
>
|
||||||
|
<q-icon
|
||||||
|
size="20px"
|
||||||
|
color="blue-9"
|
||||||
|
name="mdi-filter-variant"
|
||||||
|
class="q-mx-sm"
|
||||||
|
/>
|
||||||
|
<div class="text-blue-9 text-subtitle2 text-weight-medium">
|
||||||
|
<span>ค้นหาข้อมูลทะเบียนประวัติ</span>
|
||||||
|
</div>
|
||||||
|
<q-space />
|
||||||
|
<q-btn
|
||||||
|
color="blue-9"
|
||||||
|
icon="mdi-close"
|
||||||
|
size="12px"
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
dense
|
||||||
|
@click="clickSearchPanel"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<q-separator color="blue-1" />
|
||||||
|
<div class="dialog-card-contain">
|
||||||
|
<q-card-section class="q-pa-md">
|
||||||
|
<div class="row col-12 q-col-gutter-sm">
|
||||||
|
<div
|
||||||
|
:class="
|
||||||
|
$q.screen.lt.md
|
||||||
|
? ' row col-12 q-col-gutter-xs'
|
||||||
|
: 'no-wrap row col-12 q-col-gutter-xs'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<selector
|
||||||
|
class="col-3"
|
||||||
|
hide-bottom-space
|
||||||
|
:rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภท'}`]"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
:model-value="employeeClass"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
:options="employeeClassOps"
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
|
:label="`${'ประเภท'}`"
|
||||||
|
use-input
|
||||||
|
input-debounce="0"
|
||||||
|
@update:model-value="updateEmployeeClass"
|
||||||
|
/>
|
||||||
|
<!-- @filter="(inputValue:any,
|
||||||
|
doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
|
||||||
|
) " -->
|
||||||
|
<q-input
|
||||||
|
class="col-3"
|
||||||
|
clearable
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
:model-value="profileId"
|
||||||
|
hide-bottom-space
|
||||||
|
label="เลขประจำตัวประชาชน"
|
||||||
|
@update:model-value="updateProfileId"
|
||||||
|
type="number"
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
class="col-2"
|
||||||
|
clearable
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
:model-value="fullName"
|
||||||
|
hide-bottom-space
|
||||||
|
label="ชื่อ-นามสกุล"
|
||||||
|
@update:model-value="updateFullname"
|
||||||
|
/>
|
||||||
|
<datepicker
|
||||||
|
class="col-2"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
:model-value="retireYear"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
year-picker
|
||||||
|
:enableTimePicker="false"
|
||||||
|
@update:model-value="updateRetireYear"
|
||||||
|
clearable
|
||||||
|
>
|
||||||
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
|
<template #year-overlay-value="{ value }">{{
|
||||||
|
parseInt(value + 543)
|
||||||
|
}}</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
class="inputgreen cursor-pointer q-mb-sm"
|
||||||
|
hide-bottom-space
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
borderless
|
||||||
|
:model-value="
|
||||||
|
retireYear == null ? null : retireYear + 543
|
||||||
|
"
|
||||||
|
:label="`${'ปีเกษียณ'}`"
|
||||||
|
clearable
|
||||||
|
@clear="clearDate"
|
||||||
|
>
|
||||||
|
<!-- <template v-slot:prepend>
|
||||||
|
<q-icon
|
||||||
|
name="event"
|
||||||
|
class="cursor-pointer"
|
||||||
|
style="color: var(--q-primary)"
|
||||||
|
>
|
||||||
|
</q-icon>
|
||||||
|
</template> -->
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
<q-input
|
||||||
|
class="col-2"
|
||||||
|
clearable
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
:model-value="govAge"
|
||||||
|
hide-bottom-space
|
||||||
|
label="อายุราชการ(ปี)"
|
||||||
|
type="number"
|
||||||
|
@update:model-value="updateGovAge"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
:class="
|
||||||
|
$q.screen.lt.md
|
||||||
|
? ' row col-12 q-col-gutter-xs'
|
||||||
|
: 'no-wrap row col-12 q-col-gutter-xs'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<q-input
|
||||||
|
v-if="employeeClass == 'officer'"
|
||||||
|
clearable
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
:model-value="positionPath"
|
||||||
|
hide-bottom-space
|
||||||
|
label="ตำแหน่งในสายงาน"
|
||||||
|
@update:model-value="updatePositionPath"
|
||||||
|
class="col-3"
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
v-if="employeeClass == 'officer'"
|
||||||
|
clearable
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
:model-value="positionLevel"
|
||||||
|
hide-bottom-space
|
||||||
|
label="ระดับตำแหน่ง"
|
||||||
|
@update:model-value="updatePositionLevel"
|
||||||
|
class="col-3"
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
v-if="employeeClass == 'officer'"
|
||||||
|
clearable
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
:model-value="positionExecutive"
|
||||||
|
hide-bottom-space
|
||||||
|
label="ตำแหน่งทางการบริหาร"
|
||||||
|
@update:model-value="updatePositionExecutive"
|
||||||
|
class="col-3"
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
v-if="employeeClass != 'officer'"
|
||||||
|
clearable
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
:model-value="employeePosition"
|
||||||
|
hide-bottom-space
|
||||||
|
label="ตำแหน่ง"
|
||||||
|
@update:model-value="updateEmployeePosition"
|
||||||
|
class="col-3"
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
v-if="employeeClass != 'officer'"
|
||||||
|
clearable
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
:model-value="employeeLevel"
|
||||||
|
hide-bottom-space
|
||||||
|
label="ระดับชั้นงาน"
|
||||||
|
@update:model-value="updateEmployeeLevel"
|
||||||
|
class="col-3"
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
clearable
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
:model-value="posNo"
|
||||||
|
hide-bottom-space
|
||||||
|
label="ตำแหน่งเลขที่"
|
||||||
|
@update:model-value="updatePosNo"
|
||||||
|
class="col-3"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
:class="
|
||||||
|
$q.screen.lt.md
|
||||||
|
? ' row col-12 q-col-gutter-xs'
|
||||||
|
: 'no-wrap row col-12 q-col-gutter-xs'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<datepicker
|
||||||
|
class="col-2"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
:model-value="reportYear"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
year-picker
|
||||||
|
:enableTimePicker="false"
|
||||||
|
@update:model-value="updateReportYear"
|
||||||
|
clearable
|
||||||
|
>
|
||||||
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
|
<template #year-overlay-value="{ value }">{{
|
||||||
|
parseInt(value + 543)
|
||||||
|
}}</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
class="inputgreen cursor-pointer q-mb-sm"
|
||||||
|
hide-bottom-space
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
borderless
|
||||||
|
:model-value="
|
||||||
|
reportYear == null ? null : reportYear + 543
|
||||||
|
"
|
||||||
|
:label="`${'ปีงบประมาณ'}`"
|
||||||
|
clearable
|
||||||
|
@clear="clearReportDate"
|
||||||
|
>
|
||||||
|
<!-- <template v-slot:prepend>
|
||||||
|
<q-icon
|
||||||
|
name="event"
|
||||||
|
class="cursor-pointer"
|
||||||
|
style="color: var(--q-primary)"
|
||||||
|
>
|
||||||
|
</q-icon>
|
||||||
|
</template> -->
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
<q-input
|
||||||
|
clearable
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
:model-value="reportNo"
|
||||||
|
hide-bottom-space
|
||||||
|
label="เลขที่คำสั่ง"
|
||||||
|
@update:model-value="updateReportNo"
|
||||||
|
class="col-3"
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
clearable
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
:model-value="reportType"
|
||||||
|
hide-bottom-space
|
||||||
|
label="ประเภทคำสั่ง"
|
||||||
|
@update:model-value="updateReportType"
|
||||||
|
class="col-3"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 row items-center">
|
||||||
|
<q-toggle
|
||||||
|
dense
|
||||||
|
:model-value="isShowRetire"
|
||||||
|
color="primary"
|
||||||
|
@update:model-value="updateIsShowRetire"
|
||||||
|
class="q-pr-md"
|
||||||
|
>
|
||||||
|
แสดงข้อมูลผู้พ้นจากราชการ
|
||||||
|
</q-toggle>
|
||||||
|
<q-toggle
|
||||||
|
dense
|
||||||
|
:model-value="isProbation"
|
||||||
|
color="primary"
|
||||||
|
@update:model-value="updateIsProbation"
|
||||||
|
>
|
||||||
|
ทดลองปฏิบัติหน้าที่ราชการ
|
||||||
|
</q-toggle>
|
||||||
|
<q-space />
|
||||||
|
<div>
|
||||||
|
<q-btn
|
||||||
|
dense
|
||||||
|
color="primary"
|
||||||
|
icon="mdi-magnify"
|
||||||
|
label="ค้นหา"
|
||||||
|
class="q-px-md"
|
||||||
|
@click="doSearch"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="col-12 row q-col-gutter-y-md">
|
||||||
|
<div class="row q-gutter-md">
|
||||||
|
<q-radio
|
||||||
|
dense
|
||||||
|
:model-value="profileType"
|
||||||
|
val="officer"
|
||||||
|
label="ข้าราชการสามัญ"
|
||||||
|
class="q-pt-sm"
|
||||||
|
@update:model-value="updateProfileType"
|
||||||
|
/>
|
||||||
|
<q-radio
|
||||||
|
dense
|
||||||
|
:model-value="profileType"
|
||||||
|
val="employee"
|
||||||
|
class="q-pt-sm"
|
||||||
|
@update:model-value="updateProfileType"
|
||||||
|
>
|
||||||
|
ลูกจ้าง
|
||||||
|
</q-radio>
|
||||||
|
</div>
|
||||||
|
<q-space />
|
||||||
|
<div>
|
||||||
|
<q-btn
|
||||||
|
dense
|
||||||
|
color="primary"
|
||||||
|
icon="mdi-magnify"
|
||||||
|
label="ค้นหา"
|
||||||
|
class="q-px-md"
|
||||||
|
@click="doSearch"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-slide-transition>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-slot:header="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
|
<span class="text-weight-medium">{{ col.label }}</span>
|
||||||
|
</q-th>
|
||||||
|
<q-th auto-width />
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
<template #body="props">
|
||||||
|
<slot v-bind="props" name="columns"></slot>
|
||||||
|
</template>
|
||||||
|
</q-table>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, useAttrs } from "vue";
|
||||||
|
import type {
|
||||||
|
Pagination,
|
||||||
|
DataOption,
|
||||||
|
} from "@/components/information/interface/store/main";
|
||||||
|
|
||||||
|
const attrs = ref<any>(useAttrs());
|
||||||
|
const table = ref<any>(null);
|
||||||
|
const filterRef = ref<any>(null);
|
||||||
|
const searchPanel = ref<boolean>(true);
|
||||||
|
const initialPagination = ref<Pagination>({
|
||||||
|
rowsPerPage: 0,
|
||||||
|
});
|
||||||
|
const employeeClassOps = ref<DataOption[]>([
|
||||||
|
{ id: "officer", name: "ข้าราชการ กทม.สามัญ" },
|
||||||
|
// { id: "employee", name: "ลูกจ้าง(ทั้งหมด)" },
|
||||||
|
{ id: "perm", name: "ลูกจ้างประจำ" },
|
||||||
|
{ id: "temp", name: "ลูกจ้างชั่วคราว" },
|
||||||
|
]);
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
inputfilter: String,
|
||||||
|
inputvisible: Array,
|
||||||
|
profileId: String,
|
||||||
|
employeeClass: String,
|
||||||
|
fullName: String,
|
||||||
|
oldFullName: String,
|
||||||
|
isShowRetire: Boolean,
|
||||||
|
isProbation: Boolean,
|
||||||
|
// profileType: String,
|
||||||
|
retireYear: Number || null,
|
||||||
|
govAge: Number || null,
|
||||||
|
positionPath: String,
|
||||||
|
positionLevel: String,
|
||||||
|
positionExecutive: String,
|
||||||
|
employeePosition: String,
|
||||||
|
employeeLevel: String,
|
||||||
|
posNo: String,
|
||||||
|
reportYear: Number || null,
|
||||||
|
reportNo: String,
|
||||||
|
reportType: String,
|
||||||
|
isTab: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
doSearch: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
onExport: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
onTab: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits([
|
||||||
|
"update:inputfilter",
|
||||||
|
"update:inputvisible",
|
||||||
|
"update:profileId",
|
||||||
|
"update:employeeClass",
|
||||||
|
"update:fullName",
|
||||||
|
"update:oldFullName",
|
||||||
|
"update:oldName",
|
||||||
|
"update:retireYear",
|
||||||
|
"update:govAge",
|
||||||
|
"update:isShowRetire",
|
||||||
|
// "update:profileType",
|
||||||
|
"update:isProbation",
|
||||||
|
"update:positionPath",
|
||||||
|
"update:positionLevel",
|
||||||
|
"update:positionExecutive",
|
||||||
|
"update:employeePosition",
|
||||||
|
"update:employeeLevel",
|
||||||
|
"update:posNo",
|
||||||
|
"update:reportYear",
|
||||||
|
"update:reportNo",
|
||||||
|
"update:reportType",
|
||||||
|
]);
|
||||||
|
|
||||||
|
const updateInput = (value: string | number | null) => {
|
||||||
|
emit("update:inputfilter", value);
|
||||||
|
};
|
||||||
|
const updateVisible = (value: []) => {
|
||||||
|
emit("update:inputvisible", value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateProfileId = (value: string | number | null) => {
|
||||||
|
emit("update:profileId", value);
|
||||||
|
};
|
||||||
|
const updateEmployeeClass = (value: string | number | null) => {
|
||||||
|
emit("update:employeeClass", value);
|
||||||
|
};
|
||||||
|
const updateFullname = (value: string | number | null) => {
|
||||||
|
emit("update:fullName", value);
|
||||||
|
};
|
||||||
|
const updateRetireYear = (value: string | number | null) => {
|
||||||
|
emit("update:retireYear", value);
|
||||||
|
};
|
||||||
|
const updateGovAge = (value: string | number | null) => {
|
||||||
|
emit("update:govAge", value);
|
||||||
|
};
|
||||||
|
const updateIsShowRetire = (value: string | number | null) => {
|
||||||
|
emit("update:isShowRetire", value);
|
||||||
|
};
|
||||||
|
const updateIsProbation = (value: string | number | null) => {
|
||||||
|
emit("update:isProbation", value);
|
||||||
|
};
|
||||||
|
const updatePositionPath = (value: string | number | null) => {
|
||||||
|
emit("update:positionPath", value);
|
||||||
|
};
|
||||||
|
const updatePositionLevel = (value: string | number | null) => {
|
||||||
|
emit("update:positionLevel", value);
|
||||||
|
};
|
||||||
|
const updatePositionExecutive = (value: string | number | null) => {
|
||||||
|
emit("update:positionExecutive", value);
|
||||||
|
};
|
||||||
|
const updateEmployeePosition = (value: string | number | null) => {
|
||||||
|
emit("update:employeePosition", value);
|
||||||
|
};
|
||||||
|
const updateEmployeeLevel = (value: string | number | null) => {
|
||||||
|
emit("update:employeeLevel", value);
|
||||||
|
};
|
||||||
|
const updatePosNo = (value: string | number | null) => {
|
||||||
|
emit("update:posNo", value);
|
||||||
|
};
|
||||||
|
const updateReportYear = (value: string | number | null) => {
|
||||||
|
emit("update:reportYear", value);
|
||||||
|
};
|
||||||
|
const updateReportNo = (value: string | number | null) => {
|
||||||
|
emit("update:reportNo", value);
|
||||||
|
};
|
||||||
|
const updateReportType = (value: string | number | null) => {
|
||||||
|
emit("update:reportType", value);
|
||||||
|
};
|
||||||
|
// const updateProfileType = (value: string | number | null) => {
|
||||||
|
// emit("update:profileType", value);
|
||||||
|
// };
|
||||||
|
|
||||||
|
const clearDate = () => {
|
||||||
|
emit("update:retireYear", null);
|
||||||
|
};
|
||||||
|
const clearReportDate = () => {
|
||||||
|
emit("update:reportYear", null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const clickSearchPanel = () => {
|
||||||
|
emit("update:retireYear", null);
|
||||||
|
emit("update:govAge", null);
|
||||||
|
emit("update:oldName", null);
|
||||||
|
emit("update:oldFullName", null);
|
||||||
|
emit("update:fullName", null);
|
||||||
|
emit("update:profileId", null);
|
||||||
|
emit("update:employeeClass", null);
|
||||||
|
searchPanel.value = !searchPanel.value;
|
||||||
|
};
|
||||||
|
|
||||||
|
const paginationLabel = (start: string, end: string, total: string) => {
|
||||||
|
return start + "-" + end + " ใน " + total;
|
||||||
|
};
|
||||||
|
|
||||||
|
const doSearch = () => {
|
||||||
|
props.doSearch();
|
||||||
|
};
|
||||||
|
|
||||||
|
const onExport = () => {
|
||||||
|
props.onExport();
|
||||||
|
};
|
||||||
|
|
||||||
|
const onTab = () => {
|
||||||
|
props.onTab();
|
||||||
|
};
|
||||||
|
|
||||||
|
const resetFilter = () => {
|
||||||
|
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
|
||||||
|
emit("update:inputfilter", "");
|
||||||
|
filterRef.value.focus();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.icon-color {
|
||||||
|
color: #4154b3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-content {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid rgba(133, 133, 133, 0.2);
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.custom-table-height {
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
.custom-header-table2 {
|
||||||
|
.q-table__top {
|
||||||
|
padding: 0px !important;
|
||||||
|
}
|
||||||
|
.q-table__bottom {
|
||||||
|
border-top: none !important;
|
||||||
|
}
|
||||||
|
.q-table__middle {
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px solid rgba(133, 133, 133, 0.2) !important;
|
||||||
|
}
|
||||||
|
.q-table tr:nth-child(odd) td {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-table tr:nth-child(even) td {
|
||||||
|
background: #f8f8f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-table thead tr {
|
||||||
|
background: #ecebeb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-table thead tr th {
|
||||||
|
position: sticky;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* this will be the loading indicator */
|
||||||
|
.q-table thead tr:last-child th {
|
||||||
|
/* height of all previous header rows */
|
||||||
|
top: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-table thead tr:first-child th {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
683
src/components/information/Talent.vue
Normal file
683
src/components/information/Talent.vue
Normal file
|
|
@ -0,0 +1,683 @@
|
||||||
|
<!-- card ความสามารถพิเศษ -->
|
||||||
|
<template>
|
||||||
|
<q-card flat bordered class="col-12 q-px-lg q-py-md">
|
||||||
|
<q-form ref="myForm">
|
||||||
|
<ProfileTable
|
||||||
|
:rows="rows"
|
||||||
|
:columns="columns"
|
||||||
|
:filter="filter"
|
||||||
|
:visible-columns="visibleColumns"
|
||||||
|
v-model:inputfilter="filter"
|
||||||
|
v-model:inputvisible="visibleColumns"
|
||||||
|
:add="clickAdd"
|
||||||
|
name="ความสามารถพิเศษ"
|
||||||
|
icon="mdi-folder-star"
|
||||||
|
:statusEdit="statusEdit"
|
||||||
|
>
|
||||||
|
<template #columns="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-td
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
@click="selectData(props)"
|
||||||
|
class="cursor-pointer"
|
||||||
|
>
|
||||||
|
<div class="table_ellipsis">
|
||||||
|
{{ col.value }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
<q-td auto-width>
|
||||||
|
<q-btn
|
||||||
|
color="info"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
round
|
||||||
|
size="14px"
|
||||||
|
icon="mdi-history"
|
||||||
|
@click="clickHistory(props.row)"
|
||||||
|
/>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</ProfileTable>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
<!-- popup Edit window-->
|
||||||
|
<q-dialog v-model="modal" persistent>
|
||||||
|
<q-card style="width: 600px">
|
||||||
|
<q-form ref="myForm">
|
||||||
|
<DialogHeader tittle="ความสามารถพิเศษ" :close="clickClose" />
|
||||||
|
<q-separator />
|
||||||
|
<q-card-section class="q-p-sm">
|
||||||
|
<div
|
||||||
|
class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
|
||||||
|
>
|
||||||
|
<div class="col-6">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
:readonly="!edit"
|
||||||
|
autogrow
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="field"
|
||||||
|
:rules="[(val) => !!val || `${'กรุณากรอกด้าน'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'ด้าน'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
:readonly="!edit"
|
||||||
|
autogrow
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="detail"
|
||||||
|
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'รายละเอียด'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
:readonly="!edit"
|
||||||
|
autogrow
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="remark"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'หมายเหตุ'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
:readonly="!edit"
|
||||||
|
autogrow
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="reference"
|
||||||
|
:rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'เอกสารอ้างอิง'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
<DialogFooter
|
||||||
|
:cancel="clickCancel"
|
||||||
|
:edit="clickEdit"
|
||||||
|
:save="clickSave"
|
||||||
|
:validate="validateData"
|
||||||
|
:clickNext="clickNext"
|
||||||
|
:clickPrevious="clickPrevious"
|
||||||
|
:clickDelete="clickDelete"
|
||||||
|
v-model:editvisible="edit"
|
||||||
|
v-model:next="next"
|
||||||
|
v-model:previous="previous"
|
||||||
|
v-model:modalEdit="modalEdit"
|
||||||
|
/>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
<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 class="table_ellipsis">
|
||||||
|
{{ col.value }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</HistoryTable>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, ref, watch } from "vue";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
import { useComponentProfileDataStore } from "@/components/information/store/store";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
import ProfileTable from "@/components/information/Table.vue";
|
||||||
|
import DialogHeader from "@/components/information/DialogHeader.vue";
|
||||||
|
import DialogFooter from "@/components/information/DialogFooter.vue";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import type {
|
||||||
|
RequestItemsObject,
|
||||||
|
DataProps,
|
||||||
|
} from "@/components/information/interface/request/Talent";
|
||||||
|
import type { ResponseObject } from "@/components/information/interface/response/Talent";
|
||||||
|
import HistoryTable from "@/components/TableHistory.vue";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
import type { QTableProps } from "quasar";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
statusEdit: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const store = useComponentProfileDataStore();
|
||||||
|
const { profileData, changeProfileColumns } = store;
|
||||||
|
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
|
||||||
|
mixin;
|
||||||
|
const route = useRoute();
|
||||||
|
const id = ref<string>("");
|
||||||
|
const field = ref<string>();
|
||||||
|
const detail = ref<string>();
|
||||||
|
const remark = ref<string>();
|
||||||
|
const reference = ref<string>();
|
||||||
|
const myForm = ref<any>(); //form data input
|
||||||
|
const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
|
||||||
|
const modal = ref<boolean>(false); //modal add detail
|
||||||
|
const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
|
||||||
|
const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
|
||||||
|
const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
|
||||||
|
const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
|
||||||
|
const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
|
||||||
|
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
|
||||||
|
const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
|
||||||
|
const tittleHistory = ref<string>("ประวัติแก้ไขความสามารถพิเศษ"); //
|
||||||
|
const filterHistory = ref<string>(""); //search data table history
|
||||||
|
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
|
||||||
|
const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
|
||||||
|
const profileId = ref<string>(
|
||||||
|
route.params.id ? route.params.id.toString() : ""
|
||||||
|
);
|
||||||
|
const rows = ref<RequestItemsObject[]>([]);
|
||||||
|
const filter = ref<string>(""); //search data table
|
||||||
|
const visibleColumns = ref<String[]>([]);
|
||||||
|
profileData.talent.columns.length == 0
|
||||||
|
? (visibleColumns.value = ["field", "detail", "remark", "reference"])
|
||||||
|
: (visibleColumns.value = profileData.talent.columns);
|
||||||
|
const columns = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "field",
|
||||||
|
align: "left",
|
||||||
|
label: "ด้าน",
|
||||||
|
sortable: true,
|
||||||
|
field: "field",
|
||||||
|
headerStyle: "font-size: 14px; width: 50px;",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "detail",
|
||||||
|
align: "left",
|
||||||
|
label: "รายละเอียด",
|
||||||
|
sortable: true,
|
||||||
|
field: "detail",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "remark",
|
||||||
|
align: "left",
|
||||||
|
label: "หมายเหตุ",
|
||||||
|
sortable: true,
|
||||||
|
field: "remark",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "reference",
|
||||||
|
align: "left",
|
||||||
|
label: "เอกสารอ้างอิง",
|
||||||
|
sortable: true,
|
||||||
|
field: "reference",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const columnsHistory = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "field",
|
||||||
|
align: "left",
|
||||||
|
label: "ด้าน",
|
||||||
|
sortable: true,
|
||||||
|
field: "field",
|
||||||
|
headerStyle: "font-size: 14px; width: 50px;",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "detail",
|
||||||
|
align: "left",
|
||||||
|
label: "รายละเอียด",
|
||||||
|
sortable: true,
|
||||||
|
field: "detail",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "remark",
|
||||||
|
align: "left",
|
||||||
|
label: "หมายเหตุ",
|
||||||
|
sortable: true,
|
||||||
|
field: "remark",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "reference",
|
||||||
|
align: "left",
|
||||||
|
label: "เอกสารอ้างอิง",
|
||||||
|
sortable: true,
|
||||||
|
field: "reference",
|
||||||
|
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[]>([
|
||||||
|
"field",
|
||||||
|
"detail",
|
||||||
|
"remark",
|
||||||
|
"reference",
|
||||||
|
"createdFullName",
|
||||||
|
"createdAt",
|
||||||
|
]);
|
||||||
|
|
||||||
|
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
|
||||||
|
await changeProfileColumns("talent", count);
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
|
||||||
|
const fetchData = async () => {
|
||||||
|
if (profileId.value) {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.profileAbiliId(profileId.value))
|
||||||
|
.then((res) => {
|
||||||
|
let data = res.data.result;
|
||||||
|
rows.value = [];
|
||||||
|
data.map((e: ResponseObject) => {
|
||||||
|
rows.value.push({
|
||||||
|
id: e.id,
|
||||||
|
field: e.field,
|
||||||
|
detail: e.detail,
|
||||||
|
remark: e.remark,
|
||||||
|
reference: e.reference,
|
||||||
|
createdFullName: e.createdFullName,
|
||||||
|
createdAt: new Date(e.createdAt),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดดูข้อมูลก่อนหน้า
|
||||||
|
*/
|
||||||
|
const clickPrevious = async () => {
|
||||||
|
edit.value = false;
|
||||||
|
rowIndex.value -= 1;
|
||||||
|
await getData();
|
||||||
|
await checkRowPage();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดดูข้อมูลต่อไป
|
||||||
|
*/
|
||||||
|
const clickNext = async () => {
|
||||||
|
edit.value = false;
|
||||||
|
rowIndex.value += 1;
|
||||||
|
await getData();
|
||||||
|
await checkRowPage();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดดูข้อมูลต่อไป
|
||||||
|
*/
|
||||||
|
const getData = () => {
|
||||||
|
const row = rows.value[rowIndex.value];
|
||||||
|
field.value = row.field;
|
||||||
|
detail.value = row.detail;
|
||||||
|
remark.value = row.remark;
|
||||||
|
reference.value = row.reference;
|
||||||
|
id.value = row.id;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
|
||||||
|
*/
|
||||||
|
const checkRowPage = () => {
|
||||||
|
editRow.value = false;
|
||||||
|
next.value = true;
|
||||||
|
previous.value = true;
|
||||||
|
if (rowIndex.value + 1 >= rows.value.length) {
|
||||||
|
next.value = false;
|
||||||
|
}
|
||||||
|
if (rowIndex.value - 1 < 0) {
|
||||||
|
previous.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปุ่มแก้ไขใน dialog
|
||||||
|
*/
|
||||||
|
const clickEdit = () => {
|
||||||
|
editRow.value = false;
|
||||||
|
next.value = false;
|
||||||
|
previous.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปุ่มเพิ่มด้านบน table
|
||||||
|
*/
|
||||||
|
const clickAdd = async () => {
|
||||||
|
editRow.value = false;
|
||||||
|
await addData();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดบันทึกใน dialog
|
||||||
|
*/
|
||||||
|
const clickSave = async () => {
|
||||||
|
myForm.value.validate().then(async (result: boolean) => {
|
||||||
|
if (result) {
|
||||||
|
if (modalEdit.value) {
|
||||||
|
await editData();
|
||||||
|
} else {
|
||||||
|
await saveData();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* บันทึกเพิ่มข้อมูล
|
||||||
|
*/
|
||||||
|
const saveData = async () => {
|
||||||
|
if (profileId.value) {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.post(config.API.profileAbiliId(profileId.value), {
|
||||||
|
id: id.value,
|
||||||
|
field: field.value,
|
||||||
|
detail: detail.value,
|
||||||
|
remark: remark.value,
|
||||||
|
reference: reference.value,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
|
modal.value = false;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* บันทึกแก้ไขข้อมูล
|
||||||
|
*/
|
||||||
|
const editData = async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.put(config.API.profileAbiliId(id.value), {
|
||||||
|
id: id.value,
|
||||||
|
field: field.value,
|
||||||
|
detail: detail.value,
|
||||||
|
remark: remark.value,
|
||||||
|
reference: reference.value,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
|
modal.value = false;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ลบลบข้อมูล
|
||||||
|
*/
|
||||||
|
const clickDelete = async () => {
|
||||||
|
$q.dialog({
|
||||||
|
title: `ลบข้อมูล`,
|
||||||
|
message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
|
||||||
|
cancel: "ยกเลิก",
|
||||||
|
ok: "ยืนยัน",
|
||||||
|
persistent: true,
|
||||||
|
})
|
||||||
|
.onOk(async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.delete(config.API.profileAbiliId(id.value))
|
||||||
|
.then((res) => {
|
||||||
|
success($q, "ลบข้อมูลสำเร็จ");
|
||||||
|
modal.value = false;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.onCancel(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปิด dialog
|
||||||
|
*/
|
||||||
|
const clickClose = async () => {
|
||||||
|
if (editRow.value == true) {
|
||||||
|
$q.dialog({
|
||||||
|
title: `ข้อมูลมีการแก้ไข`,
|
||||||
|
message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
|
||||||
|
cancel: "ยกเลิก",
|
||||||
|
ok: "ยืนยัน",
|
||||||
|
persistent: true,
|
||||||
|
}).onOk(async () => {
|
||||||
|
modal.value = false;
|
||||||
|
next.value = false;
|
||||||
|
previous.value = false;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
modal.value = false;
|
||||||
|
next.value = false;
|
||||||
|
previous.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดเลือกข้อมูลที่จะแก้ไข
|
||||||
|
* @param props ค่า props ใน row ที่เลือก
|
||||||
|
*/
|
||||||
|
const selectData = async (props: DataProps) => {
|
||||||
|
modalEdit.value = true;
|
||||||
|
modal.value = true;
|
||||||
|
edit.value = false;
|
||||||
|
rawItem.value = props.row;
|
||||||
|
rowIndex.value = props.rowIndex;
|
||||||
|
field.value = props.row.field;
|
||||||
|
detail.value = props.row.detail;
|
||||||
|
remark.value = props.row.remark;
|
||||||
|
reference.value = props.row.reference;
|
||||||
|
id.value = props.row.id;
|
||||||
|
await checkRowPage();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปุ่มเพิ่มบน table
|
||||||
|
*/
|
||||||
|
const addData = () => {
|
||||||
|
modalEdit.value = false;
|
||||||
|
modal.value = true;
|
||||||
|
edit.value = true;
|
||||||
|
field.value = "";
|
||||||
|
detail.value = "";
|
||||||
|
remark.value = "";
|
||||||
|
reference.value = "";
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
|
||||||
|
*/
|
||||||
|
const clickCancel = async () => {
|
||||||
|
if (editRow.value == true) {
|
||||||
|
$q.dialog({
|
||||||
|
title: `ข้อมูลมีการแก้ไข`,
|
||||||
|
message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
|
||||||
|
cancel: "ยกเลิก",
|
||||||
|
ok: "ยืนยัน",
|
||||||
|
persistent: true,
|
||||||
|
}).onOk(async () => {
|
||||||
|
edit.value = false;
|
||||||
|
await checkRowPage();
|
||||||
|
await getData();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
edit.value = false;
|
||||||
|
await checkRowPage();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* เช็คว่ามีการแก้ไขข้อมูล
|
||||||
|
*/
|
||||||
|
const clickEditRow = () => {
|
||||||
|
editRow.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
|
||||||
|
* @param row ข้อมูล row ที่ดูประวัติการแก้ไข
|
||||||
|
*/
|
||||||
|
const clickHistory = async (row: RequestItemsObject) => {
|
||||||
|
modalHistory.value = true;
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.profileAbiliHisId(row.id))
|
||||||
|
.then((res) => {
|
||||||
|
let data = res.data.result;
|
||||||
|
rowsHistory.value = [];
|
||||||
|
data.map((e: ResponseObject) => {
|
||||||
|
rowsHistory.value.push({
|
||||||
|
id: e.id,
|
||||||
|
field: e.field,
|
||||||
|
detail: e.detail,
|
||||||
|
remark: e.remark,
|
||||||
|
reference: e.reference,
|
||||||
|
createdFullName: e.createdFullName,
|
||||||
|
createdAt: new Date(e.createdAt),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* validate input ใน dialog
|
||||||
|
*/
|
||||||
|
const validateData = async () => {
|
||||||
|
checkValidate.value = true;
|
||||||
|
await myForm.value.validate().then((result: boolean) => {
|
||||||
|
if (result == false) {
|
||||||
|
checkValidate.value = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
|
||||||
|
* @param val ข้อมูล input สำหรับแก้ไขหรือไม่
|
||||||
|
*/
|
||||||
|
const getClass = (val: boolean) => {
|
||||||
|
return {
|
||||||
|
"full-width inputgreen cursor-pointer": val,
|
||||||
|
"full-width cursor-pointer": !val,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
</script>
|
||||||
1128
src/components/information/Train.vue
Normal file
1128
src/components/information/Train.vue
Normal file
File diff suppressed because it is too large
Load diff
907
src/components/information/Work.vue
Normal file
907
src/components/information/Work.vue
Normal file
|
|
@ -0,0 +1,907 @@
|
||||||
|
<!-- card ปฏิบัติราชการพิเศษ -->
|
||||||
|
<template>
|
||||||
|
<q-card flat bordered class="col-12 q-px-lg q-py-md">
|
||||||
|
<q-form ref="myForm">
|
||||||
|
<ProfileTable
|
||||||
|
:rows="rows"
|
||||||
|
:columns="columns"
|
||||||
|
:filter="filter"
|
||||||
|
:visible-columns="visibleColumns"
|
||||||
|
v-model:inputfilter="filter"
|
||||||
|
v-model:inputvisible="visibleColumns"
|
||||||
|
:add="clickAdd"
|
||||||
|
name="ปฏิบัติราชการพิเศษ"
|
||||||
|
icon="mdi-bookmark"
|
||||||
|
:statusEdit="statusEdit"
|
||||||
|
>
|
||||||
|
<template #columns="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-td
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
@click="selectData(props)"
|
||||||
|
class="cursor-pointer"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-if="
|
||||||
|
col.name == 'dateStart' ||
|
||||||
|
col.name == 'dateEnd' ||
|
||||||
|
col.name == 'refCommandDate'
|
||||||
|
"
|
||||||
|
class="table_ellipsis"
|
||||||
|
>
|
||||||
|
{{ col.value == null ? null : date2Thai(col.value) }}
|
||||||
|
</div>
|
||||||
|
<div v-else class="table_ellipsis">
|
||||||
|
{{ col.value }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
<q-td auto-width>
|
||||||
|
<q-btn
|
||||||
|
color="info"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
round
|
||||||
|
size="14px"
|
||||||
|
icon="mdi-history"
|
||||||
|
@click="clickHistory(props.row)"
|
||||||
|
/>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</ProfileTable>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
<!-- popup Edit window-->
|
||||||
|
<q-dialog v-model="modal" persistent>
|
||||||
|
<q-card style="width: 600px">
|
||||||
|
<q-form ref="myForm">
|
||||||
|
<DialogHeader tittle="ปฏิบัติราชการพิเศษ" :close="clickClose" />
|
||||||
|
<q-separator />
|
||||||
|
<q-card-section class="q-p-sm">
|
||||||
|
<div
|
||||||
|
class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
|
||||||
|
>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<datepicker
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
:readonly="!edit"
|
||||||
|
v-model="dateStart"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
:enableTimePicker="false"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
week-start="0"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
|
<template #year-overlay-value="{ value }">{{
|
||||||
|
parseInt(value + 543)
|
||||||
|
}}</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
|
||||||
|
:borderless="!edit"
|
||||||
|
:model-value="date2Thai(dateStart)"
|
||||||
|
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'วันที่เริ่มต้น'}`"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon
|
||||||
|
name="event"
|
||||||
|
class="cursor-pointer"
|
||||||
|
:style="
|
||||||
|
edit
|
||||||
|
? 'color: var(--q-primary)'
|
||||||
|
: 'color: var(--q-grey)'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
</q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<datepicker
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="dateEnd"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
:enableTimePicker="false"
|
||||||
|
:min-date="minDate"
|
||||||
|
:readonly="!edit"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
week-start="0"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
|
<template #year-overlay-value="{ value }">{{
|
||||||
|
parseInt(value + 543)
|
||||||
|
}}</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
|
||||||
|
:borderless="!edit"
|
||||||
|
:model-value="date2Thai(dateEnd)"
|
||||||
|
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'วันที่สิ้นสุด'}`"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon
|
||||||
|
name="event"
|
||||||
|
class="cursor-pointer"
|
||||||
|
:style="
|
||||||
|
edit
|
||||||
|
? 'color: var(--q-primary)'
|
||||||
|
: 'color: var(--q-grey)'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
</q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
autogrow
|
||||||
|
:readonly="!edit"
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="reference"
|
||||||
|
:rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'เอกสารอ้างอิง'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
autogrow
|
||||||
|
:readonly="!edit"
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="detail"
|
||||||
|
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'รายละเอียด'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
:readonly="!edit"
|
||||||
|
:borderless="!edit"
|
||||||
|
v-model="refCommandNo"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'เลขที่คำสั่ง'}`"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon
|
||||||
|
name="mdi-file"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="resetFilter"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<datepicker
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
:readonly="!edit"
|
||||||
|
v-model="refCommandDate"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
:enableTimePicker="false"
|
||||||
|
@update:modelValue="clickEditRow"
|
||||||
|
week-start="0"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
|
<template #year-overlay-value="{ value }">{{
|
||||||
|
parseInt(value + 543)
|
||||||
|
}}</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
:class="getClass(edit)"
|
||||||
|
:outlined="edit"
|
||||||
|
dense
|
||||||
|
|
||||||
|
:borderless="!edit"
|
||||||
|
:model-value="
|
||||||
|
refCommandDate == null ? null : date2Thai(refCommandDate)
|
||||||
|
"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon
|
||||||
|
name="event"
|
||||||
|
class="cursor-pointer"
|
||||||
|
:style="
|
||||||
|
edit
|
||||||
|
? 'color: var(--q-primary)'
|
||||||
|
: 'color: var(--q-grey)'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
</q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
<DialogFooter
|
||||||
|
:cancel="clickCancel"
|
||||||
|
:edit="clickEdit"
|
||||||
|
:save="clickSave"
|
||||||
|
:validate="validateData"
|
||||||
|
:clickNext="clickNext"
|
||||||
|
:clickPrevious="clickPrevious"
|
||||||
|
:clickDelete="clickDelete"
|
||||||
|
v-model:editvisible="edit"
|
||||||
|
v-model:next="next"
|
||||||
|
v-model:previous="previous"
|
||||||
|
v-model:modalEdit="modalEdit"
|
||||||
|
/>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
<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 == 'dateStart' ||
|
||||||
|
col.name == 'dateEnd' ||
|
||||||
|
col.name == 'createdAt' ||
|
||||||
|
col.name == 'refCommandDate'
|
||||||
|
"
|
||||||
|
class="table_ellipsis"
|
||||||
|
>
|
||||||
|
{{ col.value == null ? null : date2Thai(col.value) }}
|
||||||
|
</div>
|
||||||
|
<div v-else class="table_ellipsis">
|
||||||
|
{{ col.value }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</HistoryTable>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, ref, watch } from "vue";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
import { useComponentProfileDataStore } from "@/components/information/store/store";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
||||||
|
import ProfileTable from "@/components/information/Table.vue";
|
||||||
|
import DialogHeader from "@/components/information/DialogHeader.vue";
|
||||||
|
import DialogFooter from "@/components/information/DialogFooter.vue";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import type {
|
||||||
|
RequestItemsObject,
|
||||||
|
DataProps,
|
||||||
|
} from "@/components/information/interface/request/Work";
|
||||||
|
import type { ResponseObject } from "@/components/information/interface/response/Work";
|
||||||
|
import HistoryTable from "@/components/TableHistory.vue";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
import type { QTableProps } from "quasar";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
statusEdit: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const store = useComponentProfileDataStore();
|
||||||
|
const { profileData, changeProfileColumns } = store;
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
|
||||||
|
mixin;
|
||||||
|
const route = useRoute();
|
||||||
|
const id = ref<string>("");
|
||||||
|
const dateStart = ref<Date>(new Date());
|
||||||
|
const dateEnd = ref<Date>(new Date());
|
||||||
|
const detail = ref<string>();
|
||||||
|
const reference = ref<string>();
|
||||||
|
const minDate = ref<Date>();
|
||||||
|
const refCommandNo = ref<string>();
|
||||||
|
const refCommandDate = ref<Date | null>(new Date());
|
||||||
|
const myForm = ref<any>(); //form data input
|
||||||
|
const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
|
||||||
|
const modal = ref<boolean>(false); //modal add detail
|
||||||
|
const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
|
||||||
|
const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
|
||||||
|
const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
|
||||||
|
const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
|
||||||
|
const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
|
||||||
|
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
|
||||||
|
const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
|
||||||
|
const tittleHistory = ref<string>("ประวัติแก้ไขปฏิบัติราชการพิเศษ"); //
|
||||||
|
const filterHistory = ref<string>(""); //search data table history
|
||||||
|
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
|
||||||
|
const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
|
||||||
|
const profileId = ref<string>(
|
||||||
|
route.params.id ? route.params.id.toString() : ""
|
||||||
|
);
|
||||||
|
const rows = ref<RequestItemsObject[]>([]);
|
||||||
|
const filter = ref<string>(""); //search data table
|
||||||
|
const visibleColumns = ref<String[]>([]);
|
||||||
|
profileData.work.columns.length == 0
|
||||||
|
? (visibleColumns.value = [
|
||||||
|
"dateStart",
|
||||||
|
"dateEnd",
|
||||||
|
"detail",
|
||||||
|
"reference",
|
||||||
|
"refCommandNo",
|
||||||
|
"refCommandDate",
|
||||||
|
])
|
||||||
|
: (visibleColumns.value = profileData.work.columns);
|
||||||
|
const columns = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "dateStart",
|
||||||
|
align: "left",
|
||||||
|
label: "เริ่มต้น",
|
||||||
|
sortable: true,
|
||||||
|
field: "dateStart",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "dateEnd",
|
||||||
|
align: "left",
|
||||||
|
label: "สิ้นสุด",
|
||||||
|
sortable: true,
|
||||||
|
field: "dateEnd",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "reference",
|
||||||
|
align: "left",
|
||||||
|
label: "เอกสารอ้างอิง",
|
||||||
|
sortable: true,
|
||||||
|
field: "reference",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "detail",
|
||||||
|
align: "left",
|
||||||
|
label: "รายละเอียด",
|
||||||
|
sortable: true,
|
||||||
|
field: "detail",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "refCommandNo",
|
||||||
|
align: "left",
|
||||||
|
label: "เลขที่คำสั่ง",
|
||||||
|
sortable: true,
|
||||||
|
field: "refCommandNo",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "refCommandDate",
|
||||||
|
align: "left",
|
||||||
|
label: "เอกสารอ้างอิง (ลงวันที่)",
|
||||||
|
sortable: true,
|
||||||
|
field: "refCommandDate",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const columnsHistory = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "dateStart",
|
||||||
|
align: "left",
|
||||||
|
label: "เริ่มต้น",
|
||||||
|
sortable: true,
|
||||||
|
field: "dateStart",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "dateEnd",
|
||||||
|
align: "left",
|
||||||
|
label: "สิ้นสุด",
|
||||||
|
sortable: true,
|
||||||
|
field: "dateEnd",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "reference",
|
||||||
|
align: "left",
|
||||||
|
label: "เอกสารอ้างอิง",
|
||||||
|
sortable: true,
|
||||||
|
field: "reference",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "detail",
|
||||||
|
align: "left",
|
||||||
|
label: "รายละเอียด",
|
||||||
|
sortable: true,
|
||||||
|
field: "detail",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "refCommandNo",
|
||||||
|
align: "left",
|
||||||
|
label: "เลขที่คำสั่ง",
|
||||||
|
sortable: true,
|
||||||
|
field: "refCommandNo",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "refCommandDate",
|
||||||
|
align: "left",
|
||||||
|
label: "เอกสารอ้างอิง (ลงวันที่)",
|
||||||
|
sortable: true,
|
||||||
|
field: "refCommandDate",
|
||||||
|
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[]>([
|
||||||
|
"dateStart",
|
||||||
|
"dateEnd",
|
||||||
|
"detail",
|
||||||
|
"reference",
|
||||||
|
"refCommandNo",
|
||||||
|
"refCommandDate",
|
||||||
|
"createdFullName",
|
||||||
|
"createdAt",
|
||||||
|
]);
|
||||||
|
|
||||||
|
watch(dateStart, (count, prevCount) => {
|
||||||
|
minDate.value = new Date(dateStart.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
|
||||||
|
await changeProfileColumns("work", count);
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
|
||||||
|
const fetchData = async () => {
|
||||||
|
if (profileId.value) {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.profileDutyId(profileId.value))
|
||||||
|
.then((res) => {
|
||||||
|
let data = res.data.result;
|
||||||
|
rows.value = [];
|
||||||
|
data.map((e: ResponseObject) => {
|
||||||
|
rows.value.push({
|
||||||
|
id: e.id,
|
||||||
|
dateStart: new Date(e.dateStart),
|
||||||
|
dateEnd: new Date(e.dateEnd),
|
||||||
|
detail: e.detail,
|
||||||
|
reference: e.reference,
|
||||||
|
refCommandNo: e.refCommandNo,
|
||||||
|
refCommandDate:
|
||||||
|
e.refCommandDate == null ? null : new Date(e.refCommandDate),
|
||||||
|
createdFullName: e.createdFullName,
|
||||||
|
createdAt: new Date(e.createdAt),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดดูข้อมูลก่อนหน้า
|
||||||
|
*/
|
||||||
|
const clickPrevious = async () => {
|
||||||
|
edit.value = false;
|
||||||
|
rowIndex.value -= 1;
|
||||||
|
await getData();
|
||||||
|
await checkRowPage();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดดูข้อมูลต่อไป
|
||||||
|
*/
|
||||||
|
const clickNext = async () => {
|
||||||
|
edit.value = false;
|
||||||
|
rowIndex.value += 1;
|
||||||
|
await getData();
|
||||||
|
await checkRowPage();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดดูข้อมูลต่อไป
|
||||||
|
*/
|
||||||
|
const getData = () => {
|
||||||
|
const row = rows.value[rowIndex.value];
|
||||||
|
dateStart.value = row.dateStart;
|
||||||
|
dateEnd.value = row.dateEnd;
|
||||||
|
detail.value = row.detail;
|
||||||
|
reference.value = row.reference;
|
||||||
|
refCommandNo.value = row.refCommandNo;
|
||||||
|
refCommandDate.value = row.refCommandDate;
|
||||||
|
id.value = row.id;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
|
||||||
|
*/
|
||||||
|
const checkRowPage = () => {
|
||||||
|
editRow.value = false;
|
||||||
|
next.value = true;
|
||||||
|
previous.value = true;
|
||||||
|
if (rowIndex.value + 1 >= rows.value.length) {
|
||||||
|
next.value = false;
|
||||||
|
}
|
||||||
|
if (rowIndex.value - 1 < 0) {
|
||||||
|
previous.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปุ่มแก้ไขใน dialog
|
||||||
|
*/
|
||||||
|
const clickEdit = () => {
|
||||||
|
editRow.value = false;
|
||||||
|
next.value = false;
|
||||||
|
previous.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปุ่มเพิ่มด้านบน table
|
||||||
|
*/
|
||||||
|
const clickAdd = async () => {
|
||||||
|
editRow.value = false;
|
||||||
|
await addData();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดบันทึกใน dialog
|
||||||
|
*/
|
||||||
|
const clickSave = async () => {
|
||||||
|
myForm.value.validate().then(async (result: boolean) => {
|
||||||
|
if (result) {
|
||||||
|
if (modalEdit.value) {
|
||||||
|
await editData();
|
||||||
|
} else {
|
||||||
|
await saveData();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* บันทึกเพิ่มข้อมูล
|
||||||
|
*/
|
||||||
|
const saveData = async () => {
|
||||||
|
if (profileId.value) {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.post(config.API.profileDutyId(profileId.value), {
|
||||||
|
id: id.value,
|
||||||
|
dateStart: dateToISO(dateStart.value),
|
||||||
|
dateEnd: dateToISO(dateEnd.value),
|
||||||
|
detail: detail.value,
|
||||||
|
reference: reference.value,
|
||||||
|
refCommandNo: refCommandNo.value,
|
||||||
|
refCommandDate:
|
||||||
|
refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
|
modal.value = false;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* บันทึกแก้ไขข้อมูล
|
||||||
|
*/
|
||||||
|
const editData = async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.put(config.API.profileDutyId(id.value), {
|
||||||
|
id: id.value,
|
||||||
|
dateStart: dateToISO(dateStart.value),
|
||||||
|
dateEnd: dateToISO(dateEnd.value),
|
||||||
|
detail: detail.value,
|
||||||
|
reference: reference.value,
|
||||||
|
refCommandNo: refCommandNo.value,
|
||||||
|
refCommandDate:
|
||||||
|
refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
|
modal.value = false;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ลบลบข้อมูล
|
||||||
|
*/
|
||||||
|
const clickDelete = async () => {
|
||||||
|
$q.dialog({
|
||||||
|
title: `ลบข้อมูล`,
|
||||||
|
message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
|
||||||
|
cancel: "ยกเลิก",
|
||||||
|
ok: "ยืนยัน",
|
||||||
|
persistent: true,
|
||||||
|
})
|
||||||
|
.onOk(async () => {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.delete(config.API.profileDutyId(id.value))
|
||||||
|
.then((res) => {
|
||||||
|
success($q, "ลบข้อมูลสำเร็จ");
|
||||||
|
modal.value = false;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.onCancel(async () => {
|
||||||
|
await fetchData();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปิด dialog
|
||||||
|
*/
|
||||||
|
const clickClose = async () => {
|
||||||
|
if (editRow.value == true) {
|
||||||
|
$q.dialog({
|
||||||
|
title: `ข้อมูลมีการแก้ไข`,
|
||||||
|
message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
|
||||||
|
cancel: "ยกเลิก",
|
||||||
|
ok: "ยืนยัน",
|
||||||
|
persistent: true,
|
||||||
|
}).onOk(async () => {
|
||||||
|
modal.value = false;
|
||||||
|
next.value = false;
|
||||||
|
previous.value = false;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
modal.value = false;
|
||||||
|
next.value = false;
|
||||||
|
previous.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดเลือกข้อมูลที่จะแก้ไข
|
||||||
|
* @param props ค่า props ใน row ที่เลือก
|
||||||
|
*/
|
||||||
|
const selectData = async (props: DataProps) => {
|
||||||
|
modalEdit.value = true;
|
||||||
|
modal.value = true;
|
||||||
|
edit.value = false;
|
||||||
|
rawItem.value = props.row;
|
||||||
|
rowIndex.value = props.rowIndex;
|
||||||
|
dateStart.value = props.row.dateStart;
|
||||||
|
dateEnd.value = props.row.dateEnd;
|
||||||
|
detail.value = props.row.detail;
|
||||||
|
reference.value = props.row.reference;
|
||||||
|
refCommandNo.value = props.row.refCommandNo;
|
||||||
|
refCommandDate.value = props.row.refCommandDate;
|
||||||
|
id.value = props.row.id;
|
||||||
|
await checkRowPage();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* กดปุ่มเพิ่มบน table
|
||||||
|
*/
|
||||||
|
const addData = () => {
|
||||||
|
modalEdit.value = false;
|
||||||
|
modal.value = true;
|
||||||
|
edit.value = true;
|
||||||
|
dateStart.value = new Date();
|
||||||
|
dateEnd.value = new Date();
|
||||||
|
detail.value = "";
|
||||||
|
reference.value = "";
|
||||||
|
refCommandNo.value = "";
|
||||||
|
refCommandDate.value = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
|
||||||
|
*/
|
||||||
|
const clickCancel = async () => {
|
||||||
|
if (editRow.value == true) {
|
||||||
|
$q.dialog({
|
||||||
|
title: `ข้อมูลมีการแก้ไข`,
|
||||||
|
message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
|
||||||
|
cancel: "ยกเลิก",
|
||||||
|
ok: "ยืนยัน",
|
||||||
|
persistent: true,
|
||||||
|
}).onOk(async () => {
|
||||||
|
edit.value = false;
|
||||||
|
await checkRowPage();
|
||||||
|
await getData();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
edit.value = false;
|
||||||
|
await checkRowPage();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* เช็คว่ามีการแก้ไขข้อมูล
|
||||||
|
*/
|
||||||
|
const clickEditRow = () => {
|
||||||
|
editRow.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
|
||||||
|
* @param row ข้อมูล row ที่ดูประวัติการแก้ไข
|
||||||
|
*/
|
||||||
|
const clickHistory = async (row: RequestItemsObject) => {
|
||||||
|
modalHistory.value = true;
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.profileDutyHisId(row.id))
|
||||||
|
.then((res) => {
|
||||||
|
let data = res.data.result;
|
||||||
|
rowsHistory.value = [];
|
||||||
|
data.map((e: ResponseObject) => {
|
||||||
|
rowsHistory.value.push({
|
||||||
|
id: e.id,
|
||||||
|
dateStart: new Date(e.dateStart),
|
||||||
|
dateEnd: new Date(e.dateEnd),
|
||||||
|
detail: e.detail,
|
||||||
|
reference: e.reference,
|
||||||
|
refCommandNo: e.refCommandNo,
|
||||||
|
refCommandDate:
|
||||||
|
e.refCommandDate == null ? null : new Date(e.refCommandDate),
|
||||||
|
createdFullName: e.createdFullName,
|
||||||
|
createdAt: new Date(e.createdAt),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* validate input ใน dialog
|
||||||
|
*/
|
||||||
|
const validateData = async () => {
|
||||||
|
checkValidate.value = true;
|
||||||
|
await myForm.value.validate().then((result: boolean) => {
|
||||||
|
if (result == false) {
|
||||||
|
checkValidate.value = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
|
||||||
|
* @param val ข้อมูล input สำหรับแก้ไขหรือไม่
|
||||||
|
*/
|
||||||
|
const getClass = (val: boolean) => {
|
||||||
|
return {
|
||||||
|
"full-width inputgreen cursor-pointer": val,
|
||||||
|
"full-width cursor-pointer": !val,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const resetFilter = () => {};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.modalfix {
|
||||||
|
position: fixed !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
84
src/components/information/interface/index/Main.ts
Normal file
84
src/components/information/interface/index/Main.ts
Normal file
|
|
@ -0,0 +1,84 @@
|
||||||
|
import type { zipCodeOption } from "@/components/information/interface/index/profileType";
|
||||||
|
interface Pagination {
|
||||||
|
rowsPerPage: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DataOption {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
disable?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DataOptionLeave {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
totalLeave: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DataOptionInsignia {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
typeName: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface treeTab {
|
||||||
|
id: string;
|
||||||
|
label: string;
|
||||||
|
children: treeTab[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface InformationOps {
|
||||||
|
prefixOps: DataOption[];
|
||||||
|
prefixOldOps: DataOption[];
|
||||||
|
genderOps: DataOption[];
|
||||||
|
bloodOps: DataOption[];
|
||||||
|
statusOps: DataOption[];
|
||||||
|
religionOps: DataOption[];
|
||||||
|
employeeClassOps: DataOption[];
|
||||||
|
employeeTypeOps: DataOption[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface OldNameOps {
|
||||||
|
prefixOps: DataOption[];
|
||||||
|
statusOps: DataOption[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface AddressOps {
|
||||||
|
provinceOps: DataOption[];
|
||||||
|
districtOps: DataOption[];
|
||||||
|
districtCOps: DataOption[];
|
||||||
|
subdistrictOps: zipCodeOption[];
|
||||||
|
subdistrictCOps: zipCodeOption[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface FamilyOps {
|
||||||
|
prefixOps: DataOption[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface EduOps {
|
||||||
|
levelOptions: DataOption[];
|
||||||
|
positionPathOptions: DataOption[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface InsigniaOps {
|
||||||
|
insigniaOptions: DataOptionInsignia[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DisciplineOps {
|
||||||
|
levelOptions: DataOption[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export type {
|
||||||
|
Pagination,
|
||||||
|
DataOption,
|
||||||
|
DataOptionInsignia,
|
||||||
|
treeTab,
|
||||||
|
InformationOps,
|
||||||
|
OldNameOps,
|
||||||
|
AddressOps,
|
||||||
|
FamilyOps,
|
||||||
|
EduOps,
|
||||||
|
InsigniaOps,
|
||||||
|
DisciplineOps,
|
||||||
|
DataOptionLeave,
|
||||||
|
};
|
||||||
210
src/components/information/interface/index/profileType.ts
Normal file
210
src/components/information/interface/index/profileType.ts
Normal file
|
|
@ -0,0 +1,210 @@
|
||||||
|
//interface class array object {name string ,id number}
|
||||||
|
|
||||||
|
import type { childrenFamily } from "@/modules/04_registry/interface/response/Family";
|
||||||
|
interface ChangeActive {
|
||||||
|
name: string;
|
||||||
|
id: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
//ข้อมูลส่วนตัว
|
||||||
|
interface Information {
|
||||||
|
cardid: string | null;
|
||||||
|
prefix: string | null;
|
||||||
|
age: string | null;
|
||||||
|
prefixId: string | null;
|
||||||
|
firstname: string | null;
|
||||||
|
lastname: string | null;
|
||||||
|
birthDate: Date | null;
|
||||||
|
genderId: string | null;
|
||||||
|
bloodId: string | null;
|
||||||
|
nationality: string | null;
|
||||||
|
ethnicity: string | null;
|
||||||
|
statusId: string | null;
|
||||||
|
religionId: string | null;
|
||||||
|
tel: string | null;
|
||||||
|
employeeType: string | null;
|
||||||
|
employeeClass: string | null;
|
||||||
|
profileType: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Family {
|
||||||
|
prefixC: string | null; // couple
|
||||||
|
prefixIdC: string | null;
|
||||||
|
firstnameC: string | null;
|
||||||
|
lastnameC: string | null;
|
||||||
|
lastnameCOld: string | null;
|
||||||
|
occupationC: string | null;
|
||||||
|
citizenIdC: string | null;
|
||||||
|
liveC: string | null;
|
||||||
|
prefixM: string | null; // male
|
||||||
|
prefixIdM: string | null;
|
||||||
|
firstnameM: string | null;
|
||||||
|
lastnameM: string | null;
|
||||||
|
occupationM: string | null;
|
||||||
|
citizenIdM: string | null;
|
||||||
|
liveM: string | null;
|
||||||
|
prefixF: string | null; // female
|
||||||
|
prefixIdF: string | null;
|
||||||
|
firstnameF: string | null;
|
||||||
|
lastnameF: string | null;
|
||||||
|
occupationF: string | null;
|
||||||
|
citizenIdF: string | null;
|
||||||
|
liveF: string | null;
|
||||||
|
same: string | null;
|
||||||
|
childrens: childrenFamily[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Address {
|
||||||
|
address: string | null;
|
||||||
|
provinceId: string | null;
|
||||||
|
districtId: string | null;
|
||||||
|
subdistrictId: string | null;
|
||||||
|
addressC: string | null;
|
||||||
|
provinceIdC: string | null;
|
||||||
|
districtIdC: string | null;
|
||||||
|
subdistrictIdC: string | null;
|
||||||
|
same: string | null;
|
||||||
|
codec: string | null;
|
||||||
|
codep: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Goverment {
|
||||||
|
ocId: string | null;
|
||||||
|
positionId: string | null;
|
||||||
|
positionPathSide: string | null;
|
||||||
|
positionLine: string | null;
|
||||||
|
positionType: string | null;
|
||||||
|
positionLevel: string | null;
|
||||||
|
numberId: string | null;
|
||||||
|
positionExecutive: string | null;
|
||||||
|
positionExecutiveSide: string | null;
|
||||||
|
containDate: Date;
|
||||||
|
workDate: Date;
|
||||||
|
retireDate: string | null;
|
||||||
|
absent: number | null;
|
||||||
|
age: number | null;
|
||||||
|
ageAll: string | null;
|
||||||
|
reasonSameDate: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DataOption {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
zipCode?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface zipCodeOption {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
zipCode: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaultGoverment: Goverment = {
|
||||||
|
ocId: null,
|
||||||
|
positionId: null,
|
||||||
|
positionPathSide: null,
|
||||||
|
positionLine: null,
|
||||||
|
positionType: null,
|
||||||
|
positionLevel: null,
|
||||||
|
numberId: null,
|
||||||
|
positionExecutive: null,
|
||||||
|
positionExecutiveSide: null,
|
||||||
|
containDate: new Date(),
|
||||||
|
workDate: new Date(),
|
||||||
|
retireDate: null,
|
||||||
|
absent: 0,
|
||||||
|
age: 0,
|
||||||
|
ageAll: null,
|
||||||
|
reasonSameDate: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
const defaultAddress: Address = {
|
||||||
|
address: null,
|
||||||
|
provinceId: null,
|
||||||
|
districtId: null,
|
||||||
|
subdistrictId: null,
|
||||||
|
addressC: null,
|
||||||
|
provinceIdC: null,
|
||||||
|
districtIdC: null,
|
||||||
|
subdistrictIdC: null,
|
||||||
|
codec: null,
|
||||||
|
codep: null,
|
||||||
|
same: "0",
|
||||||
|
};
|
||||||
|
|
||||||
|
const defaultInformation: Information = {
|
||||||
|
cardid: null,
|
||||||
|
age: null,
|
||||||
|
prefix: null,
|
||||||
|
prefixId: null,
|
||||||
|
firstname: null,
|
||||||
|
lastname: null,
|
||||||
|
birthDate: null,
|
||||||
|
genderId: null,
|
||||||
|
bloodId: null,
|
||||||
|
nationality: null,
|
||||||
|
ethnicity: null,
|
||||||
|
statusId: null,
|
||||||
|
religionId: null,
|
||||||
|
tel: null,
|
||||||
|
employeeType: null,
|
||||||
|
employeeClass: null,
|
||||||
|
profileType: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
const defaultTempInformation: any = {
|
||||||
|
employeeMoneyIncrease: null,
|
||||||
|
employeeMoneyAllowance: null,
|
||||||
|
employeeMoneyEmployee: null,
|
||||||
|
employeeMoneyEmployer: null,
|
||||||
|
positionEmployeeGroupId: null,
|
||||||
|
positionEmployeePositionId: null,
|
||||||
|
positionEmployeeLineId: null,
|
||||||
|
employeeTypeIndividual: null,
|
||||||
|
employeeOc: null,
|
||||||
|
employeeWage: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
const defaultFamily: Family = {
|
||||||
|
prefixC: null,
|
||||||
|
prefixIdC: null,
|
||||||
|
firstnameC: null,
|
||||||
|
lastnameC: null,
|
||||||
|
lastnameCOld: null,
|
||||||
|
occupationC: null,
|
||||||
|
citizenIdC: null,
|
||||||
|
liveC: "1",
|
||||||
|
prefixM: null,
|
||||||
|
prefixIdM: null,
|
||||||
|
firstnameM: null,
|
||||||
|
lastnameM: null,
|
||||||
|
occupationM: null,
|
||||||
|
citizenIdM: null,
|
||||||
|
liveM: "1",
|
||||||
|
prefixF: null,
|
||||||
|
prefixIdF: null,
|
||||||
|
firstnameF: null,
|
||||||
|
lastnameF: null,
|
||||||
|
occupationF: null,
|
||||||
|
citizenIdF: null,
|
||||||
|
liveF: "1",
|
||||||
|
same: "0",
|
||||||
|
childrens: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
export {
|
||||||
|
defaultInformation,
|
||||||
|
defaultFamily,
|
||||||
|
defaultAddress,
|
||||||
|
defaultGoverment,
|
||||||
|
defaultTempInformation,
|
||||||
|
};
|
||||||
|
export type {
|
||||||
|
ChangeActive,
|
||||||
|
Information,
|
||||||
|
Family,
|
||||||
|
Address,
|
||||||
|
Goverment,
|
||||||
|
DataOption,
|
||||||
|
zipCodeOption,
|
||||||
|
};
|
||||||
187
src/components/information/interface/profileType.ts
Normal file
187
src/components/information/interface/profileType.ts
Normal file
|
|
@ -0,0 +1,187 @@
|
||||||
|
//interface class array object {name string ,id number}
|
||||||
|
|
||||||
|
import type { childrenFamily } from "@/modules/04_registry/interface/response/Family";
|
||||||
|
interface ChangeActive {
|
||||||
|
name: string;
|
||||||
|
id: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
//ข้อมูลส่วนตัว
|
||||||
|
interface Information {
|
||||||
|
cardid: string | null;
|
||||||
|
prefix: string | null;
|
||||||
|
age: string | null;
|
||||||
|
prefixId: string | null;
|
||||||
|
firstname: string | null;
|
||||||
|
lastname: string | null;
|
||||||
|
birthDate: Date | null;
|
||||||
|
genderId: string | null;
|
||||||
|
bloodId: string | null;
|
||||||
|
nationality: string | null;
|
||||||
|
ethnicity: string | null;
|
||||||
|
statusId: string | null;
|
||||||
|
religionId: string | null;
|
||||||
|
tel: string | null;
|
||||||
|
employeeType: string | null;
|
||||||
|
employeeClass: string | null;
|
||||||
|
profileType: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Family {
|
||||||
|
prefixC: string | null; // couple
|
||||||
|
prefixIdC: string | null;
|
||||||
|
firstnameC: string | null;
|
||||||
|
lastnameC: string | null;
|
||||||
|
lastnameCOld: string | null;
|
||||||
|
occupationC: string | null;
|
||||||
|
citizenIdC: string | null;
|
||||||
|
liveC: string | null;
|
||||||
|
prefixM: string | null; // male
|
||||||
|
prefixIdM: string | null;
|
||||||
|
firstnameM: string | null;
|
||||||
|
lastnameM: string | null;
|
||||||
|
occupationM: string | null;
|
||||||
|
citizenIdM: string | null;
|
||||||
|
liveM: string | null;
|
||||||
|
prefixF: string | null; // female
|
||||||
|
prefixIdF: string | null;
|
||||||
|
firstnameF: string | null;
|
||||||
|
lastnameF: string | null;
|
||||||
|
occupationF: string | null;
|
||||||
|
citizenIdF: string | null;
|
||||||
|
liveF: string | null;
|
||||||
|
same: string | null;
|
||||||
|
childrens: childrenFamily[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Address {
|
||||||
|
address: string | null;
|
||||||
|
provinceId: string | null;
|
||||||
|
districtId: string | null;
|
||||||
|
subdistrictId: string | null;
|
||||||
|
addressC: string | null;
|
||||||
|
provinceIdC: string | null;
|
||||||
|
districtIdC: string | null;
|
||||||
|
subdistrictIdC: string | null;
|
||||||
|
same: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Goverment {
|
||||||
|
ocId: string | null;
|
||||||
|
positionId: string | null;
|
||||||
|
positionPathSide: string | null;
|
||||||
|
positionLine: string | null;
|
||||||
|
positionType: string | null;
|
||||||
|
positionLevel: string | null;
|
||||||
|
numberId: string | null;
|
||||||
|
positionExecutive: string | null;
|
||||||
|
positionExecutiveSide: string | null;
|
||||||
|
containDate: Date;
|
||||||
|
workDate: Date;
|
||||||
|
retireDate: string | null;
|
||||||
|
absent: number | null;
|
||||||
|
age: number | null;
|
||||||
|
ageAll: string | null;
|
||||||
|
reasonSameDate: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DataOption {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
zipCode?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface zipCodeOption {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
zipCode: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaultGoverment: Goverment = {
|
||||||
|
ocId: null,
|
||||||
|
positionId: null,
|
||||||
|
positionPathSide: null,
|
||||||
|
positionLine: null,
|
||||||
|
positionType: null,
|
||||||
|
positionLevel: null,
|
||||||
|
numberId: null,
|
||||||
|
positionExecutive: null,
|
||||||
|
positionExecutiveSide: null,
|
||||||
|
containDate: new Date(),
|
||||||
|
workDate: new Date(),
|
||||||
|
retireDate: null,
|
||||||
|
absent: 0,
|
||||||
|
age: 0,
|
||||||
|
ageAll: null,
|
||||||
|
reasonSameDate: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
const defaultAddress: Address = {
|
||||||
|
address: null,
|
||||||
|
provinceId: null,
|
||||||
|
districtId: null,
|
||||||
|
subdistrictId: null,
|
||||||
|
addressC: null,
|
||||||
|
provinceIdC: null,
|
||||||
|
districtIdC: null,
|
||||||
|
subdistrictIdC: null,
|
||||||
|
same: "0",
|
||||||
|
};
|
||||||
|
|
||||||
|
const defaultInformation: Information = {
|
||||||
|
cardid: null,
|
||||||
|
age: null,
|
||||||
|
prefix: null,
|
||||||
|
prefixId: null,
|
||||||
|
firstname: null,
|
||||||
|
lastname: null,
|
||||||
|
birthDate: null,
|
||||||
|
genderId: null,
|
||||||
|
bloodId: null,
|
||||||
|
nationality: null,
|
||||||
|
ethnicity: null,
|
||||||
|
statusId: null,
|
||||||
|
religionId: null,
|
||||||
|
tel: null,
|
||||||
|
employeeType: null,
|
||||||
|
employeeClass: null,
|
||||||
|
profileType: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
const defaultFamily: Family = {
|
||||||
|
prefixC: null,
|
||||||
|
prefixIdC: null,
|
||||||
|
firstnameC: null,
|
||||||
|
lastnameC: null,
|
||||||
|
lastnameCOld: null,
|
||||||
|
occupationC: null,
|
||||||
|
citizenIdC: null,
|
||||||
|
liveC: "1",
|
||||||
|
prefixM: null,
|
||||||
|
prefixIdM: null,
|
||||||
|
firstnameM: null,
|
||||||
|
lastnameM: null,
|
||||||
|
occupationM: null,
|
||||||
|
citizenIdM: null,
|
||||||
|
liveM: "1",
|
||||||
|
prefixF: null,
|
||||||
|
prefixIdF: null,
|
||||||
|
firstnameF: null,
|
||||||
|
lastnameF: null,
|
||||||
|
occupationF: null,
|
||||||
|
citizenIdF: null,
|
||||||
|
liveF: "1",
|
||||||
|
same: "0",
|
||||||
|
childrens: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
export { defaultInformation, defaultFamily, defaultAddress, defaultGoverment };
|
||||||
|
export type {
|
||||||
|
ChangeActive,
|
||||||
|
Information,
|
||||||
|
Family,
|
||||||
|
Address,
|
||||||
|
Goverment,
|
||||||
|
DataOption,
|
||||||
|
zipCodeOption,
|
||||||
|
};
|
||||||
55
src/components/information/interface/request/Address.ts
Normal file
55
src/components/information/interface/request/Address.ts
Normal file
|
|
@ -0,0 +1,55 @@
|
||||||
|
interface DataProps {
|
||||||
|
row: RequestItemsObject;
|
||||||
|
rowIndex: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
//ข้อมูล
|
||||||
|
interface RequestItemsObject {
|
||||||
|
currentAddress: String | null;
|
||||||
|
currentDistrictId: String | null;
|
||||||
|
currentProvinceId: String | null;
|
||||||
|
currentSubDistrictId: String | null;
|
||||||
|
currentZipCode: String | null;
|
||||||
|
registrationAddress: String | null;
|
||||||
|
registrationDistrictId: String | null;
|
||||||
|
registrationProvinceId: String | null;
|
||||||
|
registrationSame: Boolean | null;
|
||||||
|
registrationSubDistrictId: String | null;
|
||||||
|
registrationZipCode: String | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface RequestItemsHistoryObject {
|
||||||
|
currentAddress: String | null;
|
||||||
|
currentDistrict: String | null;
|
||||||
|
currentProvince: String | null;
|
||||||
|
currentSubDistrict: String | null;
|
||||||
|
currentZipCode: String | null;
|
||||||
|
registrationAddress: String | null;
|
||||||
|
registrationDistrict: String | null;
|
||||||
|
registrationProvince: String | null;
|
||||||
|
registrationSame: Boolean | null;
|
||||||
|
registrationSubDistrict: String | null;
|
||||||
|
registrationZipCode: String | null;
|
||||||
|
createdFullName: String | null;
|
||||||
|
createdAt: Date;
|
||||||
|
}
|
||||||
|
|
||||||
|
//columns
|
||||||
|
interface Columns {
|
||||||
|
[index: number]: {
|
||||||
|
name: String;
|
||||||
|
align: String;
|
||||||
|
label: String;
|
||||||
|
sortable: Boolean;
|
||||||
|
field: String;
|
||||||
|
headerStyle: String;
|
||||||
|
style: String;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export type {
|
||||||
|
RequestItemsObject,
|
||||||
|
Columns,
|
||||||
|
DataProps,
|
||||||
|
RequestItemsHistoryObject,
|
||||||
|
};
|
||||||
34
src/components/information/interface/request/Assessment.ts
Normal file
34
src/components/information/interface/request/Assessment.ts
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
interface DataProps {
|
||||||
|
row: RequestItemsObject;
|
||||||
|
rowIndex: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
//ข้อมูล
|
||||||
|
interface RequestItemsObject {
|
||||||
|
id: string;
|
||||||
|
point1Total: number;
|
||||||
|
point1: number;
|
||||||
|
point2Total: number;
|
||||||
|
point2: number;
|
||||||
|
pointSumTotal: number;
|
||||||
|
pointSum: number;
|
||||||
|
name: string;
|
||||||
|
date: Date;
|
||||||
|
createdFullName: string;
|
||||||
|
createdAt: Date;
|
||||||
|
}
|
||||||
|
|
||||||
|
//columns
|
||||||
|
interface Columns {
|
||||||
|
[index: number]: {
|
||||||
|
name: String;
|
||||||
|
align: String;
|
||||||
|
label: String;
|
||||||
|
sortable: Boolean;
|
||||||
|
field: String;
|
||||||
|
headerStyle: String;
|
||||||
|
style: String;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export type { RequestItemsObject, Columns, DataProps };
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue