first commit
This commit is contained in:
kanyarat2001
commit
6e3c1a90f7
31 changed files with 14083 additions and 0 deletions
28
.gitignore
vendored
Normal file
28
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
# 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?
|
||||||
132
README.md
Normal file
132
README.md
Normal file
|
|
@ -0,0 +1,132 @@
|
||||||
|
# ระบบ BMA eHR (eHR กรุงเทพมหานคร)
|
||||||
|
สำหรับ User
|
||||||
|
|
||||||
|
## โครงสร้างโฟลเดอร์
|
||||||
|
|
||||||
|
ภายใต้ src จะประกอบด้วยโฟลเดอร์ที่จำเป็นดังนี้
|
||||||
|
|
||||||
|
1. **assets** : สำหรับเก็บไฟล์ภาพกราฟิก + css
|
||||||
|
2. **components** : สำหรับเก็บ Component ส่วนกลางที่สามารถเรียกใช้จากระบบใดก็ได้
|
||||||
|
3. **helpers** : สำหรับเก็บ filter, composable ที่เรียกใช้จากระบบใดก็ได้
|
||||||
|
4. **modules** : สำหรับเก็บไฟล์โค้ดหลัก ภายในจะแบ่งเป็นโฟลเดอร์ย่อยของระบบต่าง ๆ ทั้ง 17 ระบบ 17 โฟลเดอร์ ภายใต้โฟลเดอร์ย่อยของระบบจะเป็นโครงสร้างแบบเดียวกับ vue template เช่น ภายใต้โฟลเดอร์ 01_metadata (ระบบข้อมูลหลัก) ประกอบด้วยโฟลเดอร์
|
||||||
|
- **components** : โฟลเดอร์เก็บ Component ที่ใช้เฉพาะระบบข้อมูลหลัก
|
||||||
|
- **views** : โฟลเดอร์เก็บ View/Layout ที่ใช้เฉพาะระบบข้อมูลหลัก
|
||||||
|
|
||||||
|
## การกำหนดค่าตัวแปร Environment Variable
|
||||||
|
1. สร้างไฟล์ .env.local ที่ root ของ Project โดยกำหนดค่าตามนี้ ซึ่งไฟล์นี้จะใช้สำหรับให้ App อ่านค่าตัวแปรเพื่อนำไปใช้ตอน run dev
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
VITE_COMPETITIVE_EXAM_PANEL= "https://bma-dashboard.frappet.synology.me/goto/e15Slas4z?orgId=1"
|
||||||
|
VITE_QUALIFY_DISABLE_EMAM_PANEL= "https://bma-dashboard.frappet.synology.me/goto/r19B_asVz?orgId=1"
|
||||||
|
VITE_QUALIFY_EXAM_PANEL= "https://bma-dashboard.frappet.synology.me/goto/9DWylasVk?orgId=1"
|
||||||
|
|
||||||
|
```
|
||||||
|
2.สร้างไฟล์ .env.production ที่ root ของ Project โดยกำหนดค่าตามนี้ ซึ่งไฟล์นี้จะใช้สำหรับการ build App เพื่อที่จะได้นำค่าไปใส่ใน javascript แล้วใช้คำสั่งในการ Replace ค่าจาก environment variable ใน yaml file
|
||||||
|
|
||||||
|
```
|
||||||
|
VITE_COMPETITIVE_EXAM_PANEL=VITE_COMPETITIVE_EXAM_PANEL
|
||||||
|
VITE_QUALIFY_DISABLE_EMAM_PANEL=VITE_QUALIFY_DISABLE_EMAM_PANEL
|
||||||
|
VITE_QUALIFY_EXAM_PANEL=VITE_QUALIFY_EXAM_PANEL
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
## รูปแบบ SFC ที่แนะนำให้ใช้ใน Vue 3
|
||||||
|
|
||||||
|
ลำดับการวางโค้ดใน Vue 3 จะย้ายแท็ก script ขึ้นก่อนแท็ก template ส่วนแท็ก style จะอยู่ลำดับล่างสุดเหมือนเดิม
|
||||||
|
|
||||||
|
- แท็ก script ควรมี setup และ lang="ts" บอกเสมอ
|
||||||
|
- แท็ก style ควรกำหนด lang และ scoped ด้วย
|
||||||
|
|
||||||
|
ตัวอย่างด้านล่าง
|
||||||
|
```
|
||||||
|
<script setup lang="ts">
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
## การอ้างอิง Path
|
||||||
|
|
||||||
|
Vue Template ได้สร้าง shortcut ไว้ให้แล้วด้วยการใส่เครื่องหมาย '@' นำหน้า ซึ่ง @ แทน src ดังนั้นพาธใด ๆ ก็ต้องจะอยู่ภายใน @ ทั้งหมด เช่น ต้องการเรียก src/components ให้ใส่ว่า "@/components" ถ้าเป็นไปได้ไม่ควรใช้ relative path
|
||||||
|
|
||||||
|
|
||||||
|
## ชื่อภาษาอังกฤษที่ใช้ในระบบต่าง ๆ
|
||||||
|
1. ระบบข้อมูลหลัก = **metadata**
|
||||||
|
2. ระบบโครงสร้างหน่วยงานและกรอบอัตรากำลัง = **organizational**
|
||||||
|
3. ระบบการสรรหา = **recruiting**
|
||||||
|
4. ระบบทะเบียนประวัติ = **registry**
|
||||||
|
5. ระบบการบรรจุ แต่งตั้ง ย้าย โอน
|
||||||
|
6. ระบบการพ้นจากราชการ
|
||||||
|
7. ระบบงานเครื่องราชอิสริยภรณ์
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Recommended IDE Setup
|
||||||
|
|
||||||
|
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
|
||||||
|
|
||||||
|
## Type Support for `.vue` Imports in TS
|
||||||
|
|
||||||
|
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
|
||||||
|
|
||||||
|
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
|
||||||
|
|
||||||
|
1. Disable the built-in TypeScript Extension
|
||||||
|
1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
|
||||||
|
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
|
||||||
|
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
|
||||||
|
|
||||||
|
## Customize configuration
|
||||||
|
|
||||||
|
See [Vite Configuration Reference](https://vitejs.dev/config/).
|
||||||
|
|
||||||
|
## Project Setup
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compile and Hot-Reload for Development
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Type-Check, Compile and Minify for Production
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Run Unit Tests with [Vitest](https://vitest.dev/)
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run test:unit
|
||||||
|
```
|
||||||
|
|
||||||
|
### Run End-to-End Tests with [Cypress](https://www.cypress.io/)
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run test:e2e:dev
|
||||||
|
```
|
||||||
|
|
||||||
|
This runs the end-to-end tests against the Vite development server.
|
||||||
|
It is much faster than the production build.
|
||||||
|
|
||||||
|
But it's still recommended to test the production build with `test:e2e` before deploying (e.g. in CI environments):
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run build
|
||||||
|
npm run test:e2e
|
||||||
|
```
|
||||||
|
|
||||||
|
### Lint with [ESLint](https://eslint.org/)
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run lint
|
||||||
|
```
|
||||||
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')
|
||||||
1
env.d.ts
vendored
Normal file
1
env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
/// <reference types="vite/client" />
|
||||||
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>
|
||||||
12973
package-lock.json
generated
Normal file
12973
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
55
package.json
Normal file
55
package.json
Normal file
|
|
@ -0,0 +1,55 @@
|
||||||
|
{
|
||||||
|
"name": "ehr",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "run-p type-check 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.1.8",
|
||||||
|
"@fullcalendar/daygrid": "^6.1.8",
|
||||||
|
"@fullcalendar/interaction": "^6.1.8",
|
||||||
|
"@fullcalendar/list": "^6.1.8",
|
||||||
|
"@fullcalendar/timegrid": "^6.1.8",
|
||||||
|
"@fullcalendar/vue3": "^6.1.8",
|
||||||
|
"@quasar/extras": "^1.15.8",
|
||||||
|
"@vuepic/vue-datepicker": "^5.2.1",
|
||||||
|
"pinia": "^2.1.4",
|
||||||
|
"quasar": "^2.11.1",
|
||||||
|
"vue": "^3.2.45",
|
||||||
|
"vue-router": "^4.1.6"
|
||||||
|
},
|
||||||
|
"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",
|
||||||
|
"npm-run-all": "^4.1.5",
|
||||||
|
"prettier": "^2.7.1",
|
||||||
|
"sass": "^1.32.12",
|
||||||
|
"start-server-and-test": "^1.15.2",
|
||||||
|
"typescript": "~4.7.4",
|
||||||
|
"vite": "^4.0.0",
|
||||||
|
"vitest": "^0.25.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 |
16
src/App.vue
Normal file
16
src/App.vue
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
// import { RouterLink, RouterView } from "vue-router";
|
||||||
|
// import HelloWorld from "./components/HelloWorld.vue";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div id="azay-admin-app">
|
||||||
|
<router-view v-slot="{ Component }">
|
||||||
|
<transition>
|
||||||
|
<component :is="Component" />
|
||||||
|
</transition>
|
||||||
|
</router-view>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
BIN
src/assets/1.png
Normal file
BIN
src/assets/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
BIN
src/assets/avatar_user.jpg
Normal file
BIN
src/assets/avatar_user.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
186
src/components/Table.vue
Normal file
186
src/components/Table.vue
Normal file
|
|
@ -0,0 +1,186 @@
|
||||||
|
<template>
|
||||||
|
<div class="q-pb-sm row">
|
||||||
|
<div>
|
||||||
|
<q-btn
|
||||||
|
size="14px"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
color="blue"
|
||||||
|
@click="add"
|
||||||
|
icon="mdi-plus"
|
||||||
|
>
|
||||||
|
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
<q-space />
|
||||||
|
<div class="items-center q-gutter-sm" style="display: flex">
|
||||||
|
<!-- ค้นหาข้อความใน table -->
|
||||||
|
<q-input
|
||||||
|
standout
|
||||||
|
dense
|
||||||
|
:model-value="inputfilter"
|
||||||
|
ref="filterRef"
|
||||||
|
@update:model-value="updateInput"
|
||||||
|
outlined
|
||||||
|
debounce="300"
|
||||||
|
placeholder="ค้นหา"
|
||||||
|
style="max-width: 200px"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon v-if="inputfilter == ''" name="search" />
|
||||||
|
<q-icon
|
||||||
|
v-if="inputfilter !== ''"
|
||||||
|
name="clear"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="resetFilter"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
<!-- แสดงคอลัมน์ใน table -->
|
||||||
|
<q-select
|
||||||
|
:model-value="inputvisible"
|
||||||
|
@update:model-value="updateVisible"
|
||||||
|
:display-value="$q.lang.table.columns"
|
||||||
|
multiple
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
:options="attrs.columns"
|
||||||
|
options-dense
|
||||||
|
option-value="name"
|
||||||
|
map-options
|
||||||
|
emit-value
|
||||||
|
style="min-width: 150px"
|
||||||
|
class="gt-xs"
|
||||||
|
>
|
||||||
|
<template> </template>
|
||||||
|
</q-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<q-table
|
||||||
|
ref="table"
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
class="custom-table2"
|
||||||
|
v-bind="attrs"
|
||||||
|
virtual-scroll
|
||||||
|
:virtual-scroll-sticky-size-start="48"
|
||||||
|
dense
|
||||||
|
:pagination-label="paginationLabel"
|
||||||
|
:pagination="initialPagination"
|
||||||
|
:rows-per-page-options="[0]"
|
||||||
|
>
|
||||||
|
<template v-slot:header="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
|
<span class="text-weight-medium" v-html="col.label" />
|
||||||
|
</q-th>
|
||||||
|
<q-th auto-width v-if="inputShow" />
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
<template #body="props">
|
||||||
|
<slot v-bind="props" name="columns"></slot>
|
||||||
|
</template>
|
||||||
|
</q-table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, useAttrs } from "vue";
|
||||||
|
const attrs = ref<any>(useAttrs());
|
||||||
|
const table = ref<any>(null);
|
||||||
|
const filterRef = ref<any>(null);
|
||||||
|
const initialPagination = ref({
|
||||||
|
rowsPerPage: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
count: Number,
|
||||||
|
pass: Number,
|
||||||
|
notpass: Number,
|
||||||
|
|
||||||
|
inputfilter: String,
|
||||||
|
name: String,
|
||||||
|
icon: String,
|
||||||
|
inputvisible: Array,
|
||||||
|
editvisible: Boolean,
|
||||||
|
|
||||||
|
inputShow: Boolean,
|
||||||
|
|
||||||
|
add: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits([
|
||||||
|
"update:inputfilter",
|
||||||
|
"update:inputvisible",
|
||||||
|
"update:editvisible",
|
||||||
|
]);
|
||||||
|
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 resetFilter = () => {
|
||||||
|
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
|
||||||
|
emit("update:inputfilter", "");
|
||||||
|
filterRef.value.focus();
|
||||||
|
};
|
||||||
|
|
||||||
|
const add = () => {
|
||||||
|
props.add();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.icon-color {
|
||||||
|
color: #4154b3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-table2 {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-table td:nth-of-type(2) {
|
||||||
|
z-index: 3 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.q-table th:nth-of-type(2),
|
||||||
|
.q-table td:nth-of-type(2) {
|
||||||
|
position: sticky;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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>
|
||||||
32
src/main.ts
Normal file
32
src/main.ts
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
import { createApp, defineAsyncComponent } from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
import { Dialog, Notify, Quasar } from "quasar";
|
||||||
|
import th from "quasar/lang/th";
|
||||||
|
import quasarUserOptions from "./quasar-user-options"
|
||||||
|
import { createPinia } from "pinia";
|
||||||
|
import "@vuepic/vue-datepicker/dist/main.css";
|
||||||
|
|
||||||
|
import 'quasar/src/css/index.sass'
|
||||||
|
|
||||||
|
// import './assets/main.css'
|
||||||
|
|
||||||
|
const app = createApp(App);
|
||||||
|
const pinia = createPinia();
|
||||||
|
|
||||||
|
app.use(router);
|
||||||
|
|
||||||
|
app.use(Quasar, {
|
||||||
|
plugins: {
|
||||||
|
Notify,
|
||||||
|
Dialog
|
||||||
|
},
|
||||||
|
lang: th,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
app.component(
|
||||||
|
"datepicker",
|
||||||
|
defineAsyncComponent(() => import("@vuepic/vue-datepicker"))
|
||||||
|
);
|
||||||
|
app.mount('#app');
|
||||||
110
src/modules/01_metadata/views/Main.vue
Normal file
110
src/modules/01_metadata/views/Main.vue
Normal file
|
|
@ -0,0 +1,110 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div class="q-px-md q-py-sm text-subtitle1 text-white bg-primary text-weight-medium">
|
||||||
|
ข้อมูลหลัก
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="q-pa-md col-12">
|
||||||
|
<div class="text-weight-medium">วัตถุประสงค์ของการพัฒนา
|
||||||
|
<q-card class="card1 q-pa-md text-weight-regular">
|
||||||
|
<li>
|
||||||
|
ระบบที่มีวัตถุประสงค์เพื่อจัดการข้อมูลทรัพยากรบุคคล ช่วยให้สามารถจัดเก็บข้อมูลของพนักงานทั้งหมดได้อย่างมีระบบเกี่ยวข้องกับข้อมูลเกี่ยวกับบุคคล, ข้อมูลโครงสร้างหน่วยงาน ข้อมูลข้าราชการ ข้อมูลลูกจ้าง วันลา และข้อมูลอื่นๆ ที่เกี่ยวข้องกับการจัดการทรัพยากรบุคคล
|
||||||
|
</li>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
<div class="col-12" style="margin-top: 30px;"><q-separator color="grey-3" /></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="q-pa-md col-12" style="padding-top: 0px;">
|
||||||
|
<div class="text-weight-medium">ขอบเขตการดูแลระบบ
|
||||||
|
<q-card class="card1 q-pa-md text-weight-regular">
|
||||||
|
<li>
|
||||||
|
เจ้าหน้าที่ทรัพยากรบุคคลต้องรับผิดชอบในการเก็บรวบรวม บันทึก และบริหารจัดการข้อมูลทรัพยากรบุคคลของพนักงานนอกจากนี้พวกเขาต้องรักษา
|
||||||
|
ความถูกต้องและปลอดภัยของข้อมูลทรัพยากรบุคคลและปฏิบัติตามนโยบายความเป็นส่วนตัว
|
||||||
|
</li>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
<div class="col-12" style="margin-top: 30px;"><q-separator color="grey-3" /></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="q-pa-md col-12" style="padding-top: 0px;">
|
||||||
|
<div class="text-weight-medium">รายละเอียดและขั้นตอนการดูแลระบบ
|
||||||
|
<q-card class="card1 q-pa-md text-weight-regular">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="text-weight-medium">1.) ความปลอดภัยของข้อมูล</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
มีมาตรการที่เข้มงวดเพื่อรักษาความปลอดภัยของข้อมูลที่เกี่ยวข้องกับทรัพยากรบุคคล รวมถึงการใช้เทคโนโลยีการรักษาความปลอดภัย การให้สิทธิ์การ
|
||||||
|
เข้าถึงข้อมูล, และการป้องกันการใช้ข้อมูลที่ไม่ถูกต้อง
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="text-weight-medium">2.) การจัดการสิทธิ์การเข้าถึง</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
กำหนดสิทธิ์การเข้าถึงข้อมูลทรัพยากรบุคคลให้แต่ละบุคคลในองค์กรการควบคุมสิทธิ์จะช่วยลดความเสี่ยงที่เกี่ยวข้องกับการเข้าถึงข้อมูลโดยไม่ได้รับอนุญาต
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="text-weight-medium">3.) การตรวจสอบและการพัฒนาระบบ</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
ตรวจสอบและบำรุงรักษาข้อมูลเพื่อให้มั่นใจว่าข้อมูลทรัพยากรบุคคลมีความถูกต้อง,ครบถ้วน และอับเดต ทำการตรวจสอบการป้องกันข้อมูลไม่ถูกส่ง
|
||||||
|
หลายครั้ง และดูแลให้มีการบันทึกข้อมูลทรัพยากรบุคคลตลอดเวลา
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
<div class="col-12" style="margin-top: 30px;"><q-separator color="grey-3" /></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="q-pa-md col-12" style="padding-top: 0px;">
|
||||||
|
<div class="text-weight-medium">คำถามที่พบบ่อย
|
||||||
|
<q-card class="card1 q-pa-md text-weight-regular">
|
||||||
|
<div class="col-12 row">
|
||||||
|
|
||||||
|
<div class="text-weight-medium" style="color: #02A998;">ข้อมูลส่วนบุคคลถูกปกปิดหรือปล่อยไว้หรือไม่?</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
มีมาตรการที่เข้มงวดเพื่อรักษาความปลอดภัยของข้อมูลที่เกี่ยวข้องกับทรัพยากรบุคคล รวมถึงการใช้เทคโนโลยีการรักษาความปลอดภัย การให้สิทธิ์การ
|
||||||
|
เข้าถึงข้อมูล, และการป้องกันการใช้ข้อมูลที่ไม่ถูกต้อง
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="text-weight-medium">2.) การจัดการสิทธิ์การเข้าถึง</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
กำหนดสิทธิ์การเข้าถึงข้อมูลทรัพยากรบุคคลให้แต่ละบุคคลในองค์กรการควบคุมสิทธิ์จะช่วยลดความเสี่ยงที่เกี่ยวข้องกับการเข้าถึงข้อมูลโดยไม่ได้รับอนุญาต
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="text-weight-medium">3.) การตรวจสอบและการพัฒนาระบบ</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
ตรวจสอบและบำรุงรักษาข้อมูลเพื่อให้มั่นใจว่าข้อมูลทรัพยากรบุคคลมีความถูกต้อง,ครบถ้วน และอับเดต ทำการตรวจสอบการป้องกันข้อมูลไม่ถูกส่ง
|
||||||
|
หลายครั้ง และดูแลให้มีการบันทึกข้อมูลทรัพยากรบุคคลตลอดเวลา
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
<div class="col-12" style="margin-top: 30px;"><q-separator color="grey-3" /></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.card1{
|
||||||
|
margin-top:15px;
|
||||||
|
background-color:#F8F8F8;
|
||||||
|
border-color: #EDEDED !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
110
src/modules/02_organizational/views/Main.vue
Normal file
110
src/modules/02_organizational/views/Main.vue
Normal file
|
|
@ -0,0 +1,110 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div class="q-px-md q-py-sm text-subtitle1 text-white bg-primary text-weight-medium">
|
||||||
|
ข้อมูลหลัก
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="q-pa-md col-12">
|
||||||
|
<div class="text-weight-medium">วัตถุประสงค์ของการพัฒนา
|
||||||
|
<q-card class="card1 q-pa-md text-weight-regular">
|
||||||
|
<li>
|
||||||
|
ระบบที่มีวัตถุประสงค์เพื่อจัดการข้อมูลทรัพยากรบุคคล ช่วยให้สามารถจัดเก็บข้อมูลของพนักงานทั้งหมดได้อย่างมีระบบเกี่ยวข้องกับข้อมูลเกี่ยวกับบุคคล, ข้อมูลโครงสร้างหน่วยงาน ข้อมูลข้าราชการ ข้อมูลลูกจ้าง วันลา และข้อมูลอื่นๆ ที่เกี่ยวข้องกับการจัดการทรัพยากรบุคคล
|
||||||
|
</li>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
<div class="col-12" style="margin-top: 30px;"><q-separator color="grey-3" /></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="q-pa-md col-12" style="padding-top: 0px;">
|
||||||
|
<div class="text-weight-medium">ขอบเขตการดูแลระบบ
|
||||||
|
<q-card class="card1 q-pa-md text-weight-regular">
|
||||||
|
<li>
|
||||||
|
เจ้าหน้าที่ทรัพยากรบุคคลต้องรับผิดชอบในการเก็บรวบรวม บันทึก และบริหารจัดการข้อมูลทรัพยากรบุคคลของพนักงานนอกจากนี้พวกเขาต้องรักษา
|
||||||
|
ความถูกต้องและปลอดภัยของข้อมูลทรัพยากรบุคคลและปฏิบัติตามนโยบายความเป็นส่วนตัว
|
||||||
|
</li>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
<div class="col-12" style="margin-top: 30px;"><q-separator color="grey-3" /></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="q-pa-md col-12" style="padding-top: 0px;">
|
||||||
|
<div class="text-weight-medium">รายละเอียดและขั้นตอนการดูแลระบบ
|
||||||
|
<q-card class="card1 q-pa-md text-weight-regular">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="text-weight-medium">1.) ความปลอดภัยของข้อมูล</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
มีมาตรการที่เข้มงวดเพื่อรักษาความปลอดภัยของข้อมูลที่เกี่ยวข้องกับทรัพยากรบุคคล รวมถึงการใช้เทคโนโลยีการรักษาความปลอดภัย การให้สิทธิ์การ
|
||||||
|
เข้าถึงข้อมูล, และการป้องกันการใช้ข้อมูลที่ไม่ถูกต้อง
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="text-weight-medium">2.) การจัดการสิทธิ์การเข้าถึง</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
กำหนดสิทธิ์การเข้าถึงข้อมูลทรัพยากรบุคคลให้แต่ละบุคคลในองค์กรการควบคุมสิทธิ์จะช่วยลดความเสี่ยงที่เกี่ยวข้องกับการเข้าถึงข้อมูลโดยไม่ได้รับอนุญาต
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="text-weight-medium">3.) การตรวจสอบและการพัฒนาระบบ</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
ตรวจสอบและบำรุงรักษาข้อมูลเพื่อให้มั่นใจว่าข้อมูลทรัพยากรบุคคลมีความถูกต้อง,ครบถ้วน และอับเดต ทำการตรวจสอบการป้องกันข้อมูลไม่ถูกส่ง
|
||||||
|
หลายครั้ง และดูแลให้มีการบันทึกข้อมูลทรัพยากรบุคคลตลอดเวลา
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
<div class="col-12" style="margin-top: 30px;"><q-separator color="grey-3" /></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="q-pa-md col-12" style="padding-top: 0px;">
|
||||||
|
<div class="text-weight-medium">คำถามที่พบบ่อย
|
||||||
|
<q-card class="card1 q-pa-md text-weight-regular">
|
||||||
|
<div class="col-12 row">
|
||||||
|
|
||||||
|
<div class="text-weight-medium" style="color: #02A998;">ข้อมูลส่วนบุคคลถูกปกปิดหรือปล่อยไว้หรือไม่?</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
มีมาตรการที่เข้มงวดเพื่อรักษาความปลอดภัยของข้อมูลที่เกี่ยวข้องกับทรัพยากรบุคคล รวมถึงการใช้เทคโนโลยีการรักษาความปลอดภัย การให้สิทธิ์การ
|
||||||
|
เข้าถึงข้อมูล, และการป้องกันการใช้ข้อมูลที่ไม่ถูกต้อง
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="text-weight-medium">2.) การจัดการสิทธิ์การเข้าถึง</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
กำหนดสิทธิ์การเข้าถึงข้อมูลทรัพยากรบุคคลให้แต่ละบุคคลในองค์กรการควบคุมสิทธิ์จะช่วยลดความเสี่ยงที่เกี่ยวข้องกับการเข้าถึงข้อมูลโดยไม่ได้รับอนุญาต
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="text-weight-medium">3.) การตรวจสอบและการพัฒนาระบบ</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
ตรวจสอบและบำรุงรักษาข้อมูลเพื่อให้มั่นใจว่าข้อมูลทรัพยากรบุคคลมีความถูกต้อง,ครบถ้วน และอับเดต ทำการตรวจสอบการป้องกันข้อมูลไม่ถูกส่ง
|
||||||
|
หลายครั้ง และดูแลให้มีการบันทึกข้อมูลทรัพยากรบุคคลตลอดเวลา
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
<div class="col-12" style="margin-top: 30px;"><q-separator color="grey-3" /></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.card1{
|
||||||
|
margin-top:15px;
|
||||||
|
background-color:#F8F8F8;
|
||||||
|
border-color: #EDEDED !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
11
src/quasar-user-options.ts
Normal file
11
src/quasar-user-options.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
// import "./styles/quasar.scss"
|
||||||
|
import "@quasar/extras/material-icons/material-icons.css"
|
||||||
|
import "@quasar/extras/material-icons-outlined/material-icons-outlined.css"
|
||||||
|
import "@quasar/extras/fontawesome-v5/fontawesome-v5.css"
|
||||||
|
import "@quasar/extras/mdi-v4/mdi-v4.css"
|
||||||
|
|
||||||
|
// To be used on app.use(Quasar, { ... })
|
||||||
|
export default {
|
||||||
|
config: {},
|
||||||
|
plugins: {},
|
||||||
|
}
|
||||||
30
src/router/index.ts
Normal file
30
src/router/index.ts
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
|
||||||
|
const MainLayout = () => import("@/views/MainLayout.vue");
|
||||||
|
const Metadata = () => import("@/modules/01_metadata/views/Main.vue");
|
||||||
|
const Organizational = () => import("@/modules/02_organizational/views/Main.vue");
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(import.meta.env.BASE_URL),
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'home',
|
||||||
|
component: MainLayout,
|
||||||
|
children:[
|
||||||
|
{
|
||||||
|
path: "/metadata",
|
||||||
|
name: "metadata",
|
||||||
|
component: Metadata,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/organizational",
|
||||||
|
name: "organizational",
|
||||||
|
component: Organizational
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router;
|
||||||
13
src/router/loader.ts
Normal file
13
src/router/loader.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
/**
|
||||||
|
***** DEPRECATED - Must be delete later *****
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**โหลดหน้าแบบ async/await
|
||||||
|
* @param view "ชี่อไฟล์".vue
|
||||||
|
* @param folder "folderในsrc" [Ex. /src/"folder"] default=views เมื่อไม่ส่งค่า
|
||||||
|
*/
|
||||||
|
export function load(view: string, folder: string = "views") {
|
||||||
|
// console.log(`@/${folder}/${view}.vue`);
|
||||||
|
return async () => await import(`@/${folder}/${view}.vue`);
|
||||||
|
}
|
||||||
|
|
||||||
31
src/style/quasar-variables.sass
Normal file
31
src/style/quasar-variables.sass
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
// FILE (create it): src/quasar-variables.sass
|
||||||
|
|
||||||
|
$primary: #02A998
|
||||||
|
$secondary: #016987
|
||||||
|
$accent: #9C27B0
|
||||||
|
|
||||||
|
// $dark: #1D1D1D
|
||||||
|
$dark: #35473C
|
||||||
|
|
||||||
|
$positive: #21BA45
|
||||||
|
$negative: #C10015
|
||||||
|
$info: #31CCEC
|
||||||
|
$warning: #F2C037
|
||||||
|
|
||||||
|
$add: #00aa86
|
||||||
|
|
||||||
|
.bg-white-btn
|
||||||
|
background: #ffffff20 !important
|
||||||
|
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100;200;300;400;500;600;700;800;900&display=swap')
|
||||||
|
|
||||||
|
$noto-thai: 'Noto Sans Thai', sans-serif
|
||||||
|
|
||||||
|
#azay-app,
|
||||||
|
div
|
||||||
|
font-family: $noto-thai !important
|
||||||
|
text-rendering: optimizeLegibility
|
||||||
|
-webkit-font-smoothing: antialiased
|
||||||
|
-moz-osx-font-smoothing: grayscale
|
||||||
|
|
||||||
|
$separator-color: #EDEDED !default
|
||||||
179
src/views/MainLayout.vue
Normal file
179
src/views/MainLayout.vue
Normal file
|
|
@ -0,0 +1,179 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, ref, watch } from "vue";
|
||||||
|
import { useRoute, useRouter } from "vue-router";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
|
||||||
|
const currentRouteName = ref('home');
|
||||||
|
const text = ref('');
|
||||||
|
const menuList = [
|
||||||
|
{text:'ข้อมูลหลัก',path: 'metadata'},
|
||||||
|
{text:'โครงสร้างอัตรากำลัง',path: 'organizational'},
|
||||||
|
];
|
||||||
|
|
||||||
|
const mainmenu = [
|
||||||
|
{text: 'ข้อมูลหลัก', icon:'mdi-account-outline', path: 'metadata'},
|
||||||
|
{text: 'โครงสร้างอัตรากำลัง', icon:'mdi-account-outline',path: 'organizational'},
|
||||||
|
{text: 'โครงสร้างอัตรากำลัง', icon:'mdi-account-outline',path: 'organizational'},
|
||||||
|
{text: 'โครงสร้างอัตรากำลัง', icon:'mdi-account-outline',path: 'organizational'},
|
||||||
|
{text: 'โครงสร้างอัตรากำลัง', icon:'mdi-account-outline',path: 'organizational'},
|
||||||
|
];
|
||||||
|
|
||||||
|
const clickMain = (val: string) => {
|
||||||
|
router.push(val)
|
||||||
|
currentRouteName.value = val
|
||||||
|
};
|
||||||
|
|
||||||
|
const goHome = () => {
|
||||||
|
router.push('/')
|
||||||
|
currentRouteName.value = 'home'
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<!-- โครงเว็บ -->
|
||||||
|
<template>
|
||||||
|
<q-layout view="hHh LpR fFr">
|
||||||
|
<!-- header -->
|
||||||
|
<q-header flat class="text-dark col-12 bg-header bg-transparent" height-hint="7">
|
||||||
|
<q-toolbar class="q-my-xs items-center" :style="$q.screen.gt.xs ? 'padding: 1% 2%;': 'padding: 1% 4%;'">
|
||||||
|
<div class="row items-center no-wrap" v-if="$q.screen.gt.xs">
|
||||||
|
<q-img src="@/assets/logo.png" spinner-color="white" style="height: 35px; max-width: 35px" class=" cursor-pointer" @click="goHome" />
|
||||||
|
<q-separator vertical inset class="q-ml-md" />
|
||||||
|
<div class="row q-ml-md items-center q-pt-xs">
|
||||||
|
<div
|
||||||
|
style="color: #ffffff; letter-spacing: 1px; line-height:10px;"
|
||||||
|
class="text-body2 text-weight-bolder col-12"
|
||||||
|
>
|
||||||
|
ระบบ<span class="text-primary">ทรัพยากรบุคคล</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-caption text-white">SUPPORT</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else class="row items-center">
|
||||||
|
<img src="@/assets/logo.png" style="height: 35px; max-width: 35px" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</q-toolbar>
|
||||||
|
</q-header>
|
||||||
|
|
||||||
|
<div class="bg-top" :style="$q.screen.gt.xs ? 'height: 240px;': 'height: 240px;'" />
|
||||||
|
<!-- end header -->
|
||||||
|
|
||||||
|
<q-page-container class="bg-grey-2 q-pb-md">
|
||||||
|
<q-page :style="$q.screen.gt.xs ? 'padding: 1.8% 2%; margin-top: -250px;': 'padding: 5% 4%; margin-top: -250px;'">
|
||||||
|
<div class="col-12 row justify-center">
|
||||||
|
<div class="col-xs-10 col-md-8 text-h6 text-white">
|
||||||
|
<div class="q-pb-md">เราจะช่วยคุณได้อย่างไร</div>
|
||||||
|
<q-input outlined bg-color="white" label="ค้นหา" v-model="text" dense>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="search" />
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-10 col-md-8 row q-col-gutter-md" style=" margin-top: 80px;" v-if="currentRouteName == 'home'">
|
||||||
|
<div class="col-12 row justify-center text-h6 text-dark">ระบบทรัพยากรบุคคล</div>
|
||||||
|
<div class="col-12"><q-separator color="grey-4" /></div>
|
||||||
|
<div class="col-12 row q-col-gutter-lg">
|
||||||
|
<div class="col-xs-12 col-sm-4"
|
||||||
|
v-for="(menu , index) in mainmenu"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<q-card class="q-pa-md row col-12 items-center text-dark cursor-pointer cardmenu" @click="clickMain(menu.path)" ><!-- router.push({ name: `${}`}) -->
|
||||||
|
<q-icon size="20px" :name="`${menu.icon}`" />
|
||||||
|
<div class="q-pl-md">{{ menu.text }}</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-11 row q-col-gutter-md" style=" margin-top: 80px;" v-else>
|
||||||
|
<div class="col-3 row">
|
||||||
|
<q-card class="q-px-sm col-12">
|
||||||
|
<q-list dense bordered padding class="rounded-borders text-grey-8">
|
||||||
|
<q-item
|
||||||
|
v-for="(menuItem, index) in menuList" :key="index"
|
||||||
|
class="rounded-borders text-weight-light"
|
||||||
|
clickable
|
||||||
|
v-ripple
|
||||||
|
:to="{ name: `${menuItem.path}`}"
|
||||||
|
active-class="text-blue-7 text-weight-medium bg-blue-1"
|
||||||
|
>
|
||||||
|
<q-item-section class="q-py-sm">
|
||||||
|
{{ menuItem.text }}
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
<div class="col-9 row">
|
||||||
|
<q-card class="col-12">
|
||||||
|
<router-view :key="$route.fullPath" />
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-page>
|
||||||
|
</q-page-container>
|
||||||
|
</q-layout>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.bg-drawer{
|
||||||
|
background: #242a3d;
|
||||||
|
}
|
||||||
|
.menu {
|
||||||
|
padding-bottom: 5px;
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
.tabsHome .q-tab__icon{
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
.border-100{
|
||||||
|
border-radius: 100px;
|
||||||
|
}
|
||||||
|
.bg-header{
|
||||||
|
background:rgba(39, 50, 56, 0)8 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-top{
|
||||||
|
/* background: #273238; */
|
||||||
|
background-image: url("@/assets/1.png");
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.header-br{
|
||||||
|
border-bottom: 1px solid #fdfdfd31;
|
||||||
|
}
|
||||||
|
.menuActive {
|
||||||
|
background: #1e2234;
|
||||||
|
border-radius: 0 100px 100px 0;
|
||||||
|
margin-right: 4%;
|
||||||
|
}
|
||||||
|
.q-card {
|
||||||
|
box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) !important;
|
||||||
|
border: 1px solid #eeeded;
|
||||||
|
}
|
||||||
|
.q-menu {
|
||||||
|
box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
|
||||||
|
}
|
||||||
|
.toptitle {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 1.2%;
|
||||||
|
}
|
||||||
|
.q-field--outlined .q-field__control{
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.q-field--outlined .q-field__control:before {
|
||||||
|
border-color: #C8D3DB;
|
||||||
|
}
|
||||||
|
.q-field--outlined .q-icon{
|
||||||
|
color: #7474747f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardmenu:hover{
|
||||||
|
border-color: #02A998;
|
||||||
|
color: #02A998 !important;
|
||||||
|
box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
12
tsconfig.app.json
Normal file
12
tsconfig.app.json
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
{
|
||||||
|
"extends": "@vue/tsconfig/tsconfig.web.json",
|
||||||
|
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||||
|
"exclude": ["src/**/__tests__/*"],
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
8
tsconfig.config.json
Normal file
8
tsconfig.config.json
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"extends": "@vue/tsconfig/tsconfig.node.json",
|
||||||
|
"include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"types": ["node"]
|
||||||
|
}
|
||||||
|
}
|
||||||
24
tsconfig.json
Normal file
24
tsconfig.json
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.config.json"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.app.json"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.vitest.json"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"compilerOptions": {
|
||||||
|
/* other configs */
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"./*",
|
||||||
|
// r
|
||||||
|
]
|
||||||
|
},
|
||||||
|
/* other configs */
|
||||||
|
}
|
||||||
|
}
|
||||||
9
tsconfig.vitest.json
Normal file
9
tsconfig.vitest.json
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
{
|
||||||
|
"extends": "./tsconfig.app.json",
|
||||||
|
"exclude": [],
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"lib": [],
|
||||||
|
"types": ["node", "jsdom"]
|
||||||
|
}
|
||||||
|
}
|
||||||
20
vite.config.ts
Normal file
20
vite.config.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
import { fileURLToPath, URL } from 'node:url'
|
||||||
|
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import vueJsx from '@vitejs/plugin-vue-jsx'
|
||||||
|
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue({
|
||||||
|
template: { transformAssetUrls }
|
||||||
|
}), quasar({
|
||||||
|
sassVariables: 'src/style/quasar-variables.sass'
|
||||||
|
}), vueJsx()],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
Loading…
Add table
Add a link
Reference in a new issue