manual v2
This commit is contained in:
kanyarat
parent
e63ba4b3cd
commit
2cf968ae7e
74 changed files with 913 additions and 21656 deletions
207
package-lock.json
generated
207
package-lock.json
generated
|
|
@ -15,11 +15,17 @@
|
||||||
"@fullcalendar/react": "^6.0.1",
|
"@fullcalendar/react": "^6.0.1",
|
||||||
"@fullcalendar/timegrid": "^6.0.2",
|
"@fullcalendar/timegrid": "^6.0.2",
|
||||||
"@fullcalendar/vue3": "^6.0.1",
|
"@fullcalendar/vue3": "^6.0.1",
|
||||||
|
"@peaceroad/markdown-it-figure-with-p-caption": "^0.6.1",
|
||||||
"@quasar/extras": "^1.15.8",
|
"@quasar/extras": "^1.15.8",
|
||||||
"@tato30/vue-pdf": "^1.5.1",
|
"@tato30/vue-pdf": "^1.5.1",
|
||||||
|
"@types/markdown-it": "^14.1.1",
|
||||||
|
"@types/markdown-it-anchor": "^7.0.0",
|
||||||
"@vuepic/vue-datepicker": "^3.6.3",
|
"@vuepic/vue-datepicker": "^3.6.3",
|
||||||
"bma-org-chart": "^0.0.8",
|
"bma-org-chart": "^0.0.8",
|
||||||
"keycloak-js": "^20.0.2",
|
"keycloak-js": "^20.0.2",
|
||||||
|
"markdown-it": "^14.1.0",
|
||||||
|
"markdown-it-anchor": "^9.0.1",
|
||||||
|
"markdown-it-image-figures": "^2.1.1",
|
||||||
"moment": "^2.29.4",
|
"moment": "^2.29.4",
|
||||||
"pinia": "^2.0.29",
|
"pinia": "^2.0.29",
|
||||||
"quasar": "^2.11.1",
|
"quasar": "^2.11.1",
|
||||||
|
|
@ -1281,6 +1287,14 @@
|
||||||
"integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==",
|
"integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/@peaceroad/markdown-it-figure-with-p-caption": {
|
||||||
|
"version": "0.6.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@peaceroad/markdown-it-figure-with-p-caption/-/markdown-it-figure-with-p-caption-0.6.1.tgz",
|
||||||
|
"integrity": "sha512-+3FKDFOSJMC4L2DGaU7up9+oMSxQcojD/3OL5hv7ixu4VGqwhzfiXJCeKpgYZz4uOnfd/eMcCcsngHRf//TWig==",
|
||||||
|
"dependencies": {
|
||||||
|
"p7d-markdown-it-p-captions": "^0.13.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@quasar/extras": {
|
"node_modules/@quasar/extras": {
|
||||||
"version": "1.16.5",
|
"version": "1.16.5",
|
||||||
"resolved": "https://registry.npmjs.org/@quasar/extras/-/extras-1.16.5.tgz",
|
"resolved": "https://registry.npmjs.org/@quasar/extras/-/extras-1.16.5.tgz",
|
||||||
|
|
@ -1388,6 +1402,34 @@
|
||||||
"integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==",
|
"integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/@types/linkify-it": {
|
||||||
|
"version": "5.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
|
||||||
|
"integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q=="
|
||||||
|
},
|
||||||
|
"node_modules/@types/markdown-it": {
|
||||||
|
"version": "14.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.1.tgz",
|
||||||
|
"integrity": "sha512-4NpsnpYl2Gt1ljyBGrKMxFYAYvpqbnnkgP/i/g+NLpjEUa3obn1XJCur9YbEXKDAkaXqsR1LbDnGEJ0MmKFxfg==",
|
||||||
|
"dependencies": {
|
||||||
|
"@types/linkify-it": "^5",
|
||||||
|
"@types/mdurl": "^2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@types/markdown-it-anchor": {
|
||||||
|
"version": "7.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/markdown-it-anchor/-/markdown-it-anchor-7.0.0.tgz",
|
||||||
|
"integrity": "sha512-kFehISVfgSePSp6JWGWrcgKIPoPpAsZAqTLUt0Wq9+MNiGdnWdXQy8UerwhmD2afmjux1TWf8XCmlpL2/6ax/A==",
|
||||||
|
"deprecated": "This is a stub types definition. markdown-it-anchor provides its own type definitions, so you do not need this installed.",
|
||||||
|
"dependencies": {
|
||||||
|
"markdown-it-anchor": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@types/mdurl": {
|
||||||
|
"version": "2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
|
||||||
|
"integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg=="
|
||||||
|
},
|
||||||
"node_modules/@types/node": {
|
"node_modules/@types/node": {
|
||||||
"version": "18.17.9",
|
"version": "18.17.9",
|
||||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.17.9.tgz",
|
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.17.9.tgz",
|
||||||
|
|
@ -2263,8 +2305,7 @@
|
||||||
"node_modules/argparse": {
|
"node_modules/argparse": {
|
||||||
"version": "2.0.1",
|
"version": "2.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
|
||||||
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
|
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
|
||||||
"dev": true
|
|
||||||
},
|
},
|
||||||
"node_modules/array-buffer-byte-length": {
|
"node_modules/array-buffer-byte-length": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
|
|
@ -3580,7 +3621,6 @@
|
||||||
"version": "4.5.0",
|
"version": "4.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
|
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
|
||||||
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
|
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
|
||||||
"dev": true,
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=0.12"
|
"node": ">=0.12"
|
||||||
},
|
},
|
||||||
|
|
@ -5731,6 +5771,14 @@
|
||||||
"node": ">= 0.8.0"
|
"node": ">= 0.8.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/linkify-it": {
|
||||||
|
"version": "5.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
|
||||||
|
"integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
|
||||||
|
"dependencies": {
|
||||||
|
"uc.micro": "^2.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/listr2": {
|
"node_modules/listr2": {
|
||||||
"version": "3.14.0",
|
"version": "3.14.0",
|
||||||
"resolved": "https://registry.npmjs.org/listr2/-/listr2-3.14.0.tgz",
|
"resolved": "https://registry.npmjs.org/listr2/-/listr2-3.14.0.tgz",
|
||||||
|
|
@ -6057,6 +6105,47 @@
|
||||||
"integrity": "sha512-CkYQrPYZfWnu/DAmVCpTSX/xHpKZ80eKh2lAkyA6AJTef6bW+6JpbQZN5rofum7da+SyN1bi5ctTm+lTfcCW3g==",
|
"integrity": "sha512-CkYQrPYZfWnu/DAmVCpTSX/xHpKZ80eKh2lAkyA6AJTef6bW+6JpbQZN5rofum7da+SyN1bi5ctTm+lTfcCW3g==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/markdown-it": {
|
||||||
|
"version": "14.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
|
||||||
|
"integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
|
||||||
|
"dependencies": {
|
||||||
|
"argparse": "^2.0.1",
|
||||||
|
"entities": "^4.4.0",
|
||||||
|
"linkify-it": "^5.0.0",
|
||||||
|
"mdurl": "^2.0.0",
|
||||||
|
"punycode.js": "^2.3.1",
|
||||||
|
"uc.micro": "^2.1.0"
|
||||||
|
},
|
||||||
|
"bin": {
|
||||||
|
"markdown-it": "bin/markdown-it.mjs"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/markdown-it-anchor": {
|
||||||
|
"version": "9.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-9.0.1.tgz",
|
||||||
|
"integrity": "sha512-cBt7aAzmkfX8X7FqAe8EBryiKmToXgMQEEMqkXzWCm0toDtfDYIGboKeTKd8cpNJArJtutrf+977wFJTsvNGmQ==",
|
||||||
|
"peerDependencies": {
|
||||||
|
"@types/markdown-it": "*",
|
||||||
|
"markdown-it": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/markdown-it-image-figures": {
|
||||||
|
"version": "2.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/markdown-it-image-figures/-/markdown-it-image-figures-2.1.1.tgz",
|
||||||
|
"integrity": "sha512-mwXSQ2nPeVUzCMIE3HlLvjRioopiqyJLNph0pyx38yf9mpqFDhNGnMpAXF9/A2Xv0oiF2cVyg9xwfF0HNAz05g==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"markdown-it": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/mdurl": {
|
||||||
|
"version": "2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
|
||||||
|
"integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w=="
|
||||||
|
},
|
||||||
"node_modules/memorystream": {
|
"node_modules/memorystream": {
|
||||||
"version": "0.3.1",
|
"version": "0.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
|
||||||
|
|
@ -6639,6 +6728,11 @@
|
||||||
"url": "https://github.com/sponsors/sindresorhus"
|
"url": "https://github.com/sponsors/sindresorhus"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/p7d-markdown-it-p-captions": {
|
||||||
|
"version": "0.13.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/p7d-markdown-it-p-captions/-/p7d-markdown-it-p-captions-0.13.0.tgz",
|
||||||
|
"integrity": "sha512-7Bv2IOr1XRaOSFkcnGCcIDjFtOE4K47FLsIrclLk0jymmXQhESJwellU5VTPVUXNx1304RFQa6ij6mnfdxBxfQ=="
|
||||||
|
},
|
||||||
"node_modules/panzoom": {
|
"node_modules/panzoom": {
|
||||||
"version": "9.4.3",
|
"version": "9.4.3",
|
||||||
"resolved": "https://registry.npmjs.org/panzoom/-/panzoom-9.4.3.tgz",
|
"resolved": "https://registry.npmjs.org/panzoom/-/panzoom-9.4.3.tgz",
|
||||||
|
|
@ -7025,6 +7119,14 @@
|
||||||
"node": ">=6"
|
"node": ">=6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/punycode.js": {
|
||||||
|
"version": "2.3.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
|
||||||
|
"integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/qs": {
|
"node_modules/qs": {
|
||||||
"version": "6.10.4",
|
"version": "6.10.4",
|
||||||
"resolved": "https://registry.npmjs.org/qs/-/qs-6.10.4.tgz",
|
"resolved": "https://registry.npmjs.org/qs/-/qs-6.10.4.tgz",
|
||||||
|
|
@ -8273,6 +8375,11 @@
|
||||||
"node": ">=4.2.0"
|
"node": ">=4.2.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/uc.micro": {
|
||||||
|
"version": "2.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
|
||||||
|
"integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A=="
|
||||||
|
},
|
||||||
"node_modules/unbox-primitive": {
|
"node_modules/unbox-primitive": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
|
||||||
|
|
@ -9818,6 +9925,14 @@
|
||||||
"integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==",
|
"integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"@peaceroad/markdown-it-figure-with-p-caption": {
|
||||||
|
"version": "0.6.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@peaceroad/markdown-it-figure-with-p-caption/-/markdown-it-figure-with-p-caption-0.6.1.tgz",
|
||||||
|
"integrity": "sha512-+3FKDFOSJMC4L2DGaU7up9+oMSxQcojD/3OL5hv7ixu4VGqwhzfiXJCeKpgYZz4uOnfd/eMcCcsngHRf//TWig==",
|
||||||
|
"requires": {
|
||||||
|
"p7d-markdown-it-p-captions": "^0.13.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"@quasar/extras": {
|
"@quasar/extras": {
|
||||||
"version": "1.16.5",
|
"version": "1.16.5",
|
||||||
"resolved": "https://registry.npmjs.org/@quasar/extras/-/extras-1.16.5.tgz",
|
"resolved": "https://registry.npmjs.org/@quasar/extras/-/extras-1.16.5.tgz",
|
||||||
|
|
@ -9903,6 +10018,33 @@
|
||||||
"integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==",
|
"integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"@types/linkify-it": {
|
||||||
|
"version": "5.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
|
||||||
|
"integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q=="
|
||||||
|
},
|
||||||
|
"@types/markdown-it": {
|
||||||
|
"version": "14.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.1.tgz",
|
||||||
|
"integrity": "sha512-4NpsnpYl2Gt1ljyBGrKMxFYAYvpqbnnkgP/i/g+NLpjEUa3obn1XJCur9YbEXKDAkaXqsR1LbDnGEJ0MmKFxfg==",
|
||||||
|
"requires": {
|
||||||
|
"@types/linkify-it": "^5",
|
||||||
|
"@types/mdurl": "^2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@types/markdown-it-anchor": {
|
||||||
|
"version": "7.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/markdown-it-anchor/-/markdown-it-anchor-7.0.0.tgz",
|
||||||
|
"integrity": "sha512-kFehISVfgSePSp6JWGWrcgKIPoPpAsZAqTLUt0Wq9+MNiGdnWdXQy8UerwhmD2afmjux1TWf8XCmlpL2/6ax/A==",
|
||||||
|
"requires": {
|
||||||
|
"markdown-it-anchor": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@types/mdurl": {
|
||||||
|
"version": "2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
|
||||||
|
"integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg=="
|
||||||
|
},
|
||||||
"@types/node": {
|
"@types/node": {
|
||||||
"version": "18.17.9",
|
"version": "18.17.9",
|
||||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.17.9.tgz",
|
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.17.9.tgz",
|
||||||
|
|
@ -10542,8 +10684,7 @@
|
||||||
"argparse": {
|
"argparse": {
|
||||||
"version": "2.0.1",
|
"version": "2.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
|
||||||
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
|
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
|
||||||
"dev": true
|
|
||||||
},
|
},
|
||||||
"array-buffer-byte-length": {
|
"array-buffer-byte-length": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
|
|
@ -11525,8 +11666,7 @@
|
||||||
"entities": {
|
"entities": {
|
||||||
"version": "4.5.0",
|
"version": "4.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
|
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
|
||||||
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
|
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
|
||||||
"dev": true
|
|
||||||
},
|
},
|
||||||
"error-ex": {
|
"error-ex": {
|
||||||
"version": "1.3.2",
|
"version": "1.3.2",
|
||||||
|
|
@ -13102,6 +13242,14 @@
|
||||||
"type-check": "~0.4.0"
|
"type-check": "~0.4.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"linkify-it": {
|
||||||
|
"version": "5.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
|
||||||
|
"integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
|
||||||
|
"requires": {
|
||||||
|
"uc.micro": "^2.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"listr2": {
|
"listr2": {
|
||||||
"version": "3.14.0",
|
"version": "3.14.0",
|
||||||
"resolved": "https://registry.npmjs.org/listr2/-/listr2-3.14.0.tgz",
|
"resolved": "https://registry.npmjs.org/listr2/-/listr2-3.14.0.tgz",
|
||||||
|
|
@ -13342,6 +13490,36 @@
|
||||||
"integrity": "sha512-CkYQrPYZfWnu/DAmVCpTSX/xHpKZ80eKh2lAkyA6AJTef6bW+6JpbQZN5rofum7da+SyN1bi5ctTm+lTfcCW3g==",
|
"integrity": "sha512-CkYQrPYZfWnu/DAmVCpTSX/xHpKZ80eKh2lAkyA6AJTef6bW+6JpbQZN5rofum7da+SyN1bi5ctTm+lTfcCW3g==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"markdown-it": {
|
||||||
|
"version": "14.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
|
||||||
|
"integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
|
||||||
|
"requires": {
|
||||||
|
"argparse": "^2.0.1",
|
||||||
|
"entities": "^4.4.0",
|
||||||
|
"linkify-it": "^5.0.0",
|
||||||
|
"mdurl": "^2.0.0",
|
||||||
|
"punycode.js": "^2.3.1",
|
||||||
|
"uc.micro": "^2.1.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"markdown-it-anchor": {
|
||||||
|
"version": "9.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-9.0.1.tgz",
|
||||||
|
"integrity": "sha512-cBt7aAzmkfX8X7FqAe8EBryiKmToXgMQEEMqkXzWCm0toDtfDYIGboKeTKd8cpNJArJtutrf+977wFJTsvNGmQ==",
|
||||||
|
"requires": {}
|
||||||
|
},
|
||||||
|
"markdown-it-image-figures": {
|
||||||
|
"version": "2.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/markdown-it-image-figures/-/markdown-it-image-figures-2.1.1.tgz",
|
||||||
|
"integrity": "sha512-mwXSQ2nPeVUzCMIE3HlLvjRioopiqyJLNph0pyx38yf9mpqFDhNGnMpAXF9/A2Xv0oiF2cVyg9xwfF0HNAz05g==",
|
||||||
|
"requires": {}
|
||||||
|
},
|
||||||
|
"mdurl": {
|
||||||
|
"version": "2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
|
||||||
|
"integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w=="
|
||||||
|
},
|
||||||
"memorystream": {
|
"memorystream": {
|
||||||
"version": "0.3.1",
|
"version": "0.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
|
||||||
|
|
@ -13775,6 +13953,11 @@
|
||||||
"aggregate-error": "^3.0.0"
|
"aggregate-error": "^3.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"p7d-markdown-it-p-captions": {
|
||||||
|
"version": "0.13.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/p7d-markdown-it-p-captions/-/p7d-markdown-it-p-captions-0.13.0.tgz",
|
||||||
|
"integrity": "sha512-7Bv2IOr1XRaOSFkcnGCcIDjFtOE4K47FLsIrclLk0jymmXQhESJwellU5VTPVUXNx1304RFQa6ij6mnfdxBxfQ=="
|
||||||
|
},
|
||||||
"panzoom": {
|
"panzoom": {
|
||||||
"version": "9.4.3",
|
"version": "9.4.3",
|
||||||
"resolved": "https://registry.npmjs.org/panzoom/-/panzoom-9.4.3.tgz",
|
"resolved": "https://registry.npmjs.org/panzoom/-/panzoom-9.4.3.tgz",
|
||||||
|
|
@ -14026,6 +14209,11 @@
|
||||||
"integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
|
"integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"punycode.js": {
|
||||||
|
"version": "2.3.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
|
||||||
|
"integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA=="
|
||||||
|
},
|
||||||
"qs": {
|
"qs": {
|
||||||
"version": "6.10.4",
|
"version": "6.10.4",
|
||||||
"resolved": "https://registry.npmjs.org/qs/-/qs-6.10.4.tgz",
|
"resolved": "https://registry.npmjs.org/qs/-/qs-6.10.4.tgz",
|
||||||
|
|
@ -14937,6 +15125,11 @@
|
||||||
"integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
|
"integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
|
||||||
"devOptional": true
|
"devOptional": true
|
||||||
},
|
},
|
||||||
|
"uc.micro": {
|
||||||
|
"version": "2.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
|
||||||
|
"integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A=="
|
||||||
|
},
|
||||||
"unbox-primitive": {
|
"unbox-primitive": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
|
||||||
|
|
|
||||||
|
|
@ -21,11 +21,17 @@
|
||||||
"@fullcalendar/react": "^6.0.1",
|
"@fullcalendar/react": "^6.0.1",
|
||||||
"@fullcalendar/timegrid": "^6.0.2",
|
"@fullcalendar/timegrid": "^6.0.2",
|
||||||
"@fullcalendar/vue3": "^6.0.1",
|
"@fullcalendar/vue3": "^6.0.1",
|
||||||
|
"@peaceroad/markdown-it-figure-with-p-caption": "^0.6.1",
|
||||||
"@quasar/extras": "^1.15.8",
|
"@quasar/extras": "^1.15.8",
|
||||||
"@tato30/vue-pdf": "^1.5.1",
|
"@tato30/vue-pdf": "^1.5.1",
|
||||||
|
"@types/markdown-it": "^14.1.1",
|
||||||
|
"@types/markdown-it-anchor": "^7.0.0",
|
||||||
"@vuepic/vue-datepicker": "^3.6.3",
|
"@vuepic/vue-datepicker": "^3.6.3",
|
||||||
"bma-org-chart": "^0.0.8",
|
"bma-org-chart": "^0.0.8",
|
||||||
"keycloak-js": "^20.0.2",
|
"keycloak-js": "^20.0.2",
|
||||||
|
"markdown-it": "^14.1.0",
|
||||||
|
"markdown-it-anchor": "^9.0.1",
|
||||||
|
"markdown-it-image-figures": "^2.1.1",
|
||||||
"moment": "^2.29.4",
|
"moment": "^2.29.4",
|
||||||
"pinia": "^2.0.29",
|
"pinia": "^2.0.29",
|
||||||
"quasar": "^2.11.1",
|
"quasar": "^2.11.1",
|
||||||
|
|
|
||||||
64
public/chapter-1-admin-login.md
Normal file
64
public/chapter-1-admin-login.md
Normal file
|
|
@ -0,0 +1,64 @@
|
||||||
|
# การเข้าสู่ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||||
|
|
||||||
|
|
||||||
|
- เปิดโปรแกรม Google Chrome เวอร์ชั่น 20 ขึ้นไป หรือ Firefox เวอร์ชั่น 14 ขึ้นไป กรอก URL: [https://bma-ehr.frappet.com](https://bma-ehr.frappet.com) ลงในช่อง Address จากนั้นกดแป้น Enter ที่คีย์บอร์ด 1 ครั้ง
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## การเข้าสู่ระบบโดยใช้ User name และ Password
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> หมายเลข 1 ช่องสำหรับกรอกชื่อผู้ใช้งาน
|
||||||
|
> หมายเลข 2 ช่องสำหรับกรอกรหัสผ่านใช้งาน
|
||||||
|
> หมายเลข 3 ปุ่มสำหรับคลิกเข้าสู่ระบบใช้งาน
|
||||||
|
> หมายเลข 4 ช่องสำหรับคลิก หากต้องการให้ระบบจดจำการเข้าสู่ระบบ
|
||||||
|
> หมายเลข 5ช่องสำหรับคลิกหากลืมรหัสผ่านเพื่อให้ทำระบบทำการรีเซ็ตรหัสผ่านใหม่
|
||||||
|
> หมายเลข 6 ช่องสำหรับคลิกเพื่อลงทะเบียนผู้ใช้งานใหม่
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## ddd
|
||||||
|
|
||||||
|
- สามารถกดเลือกไอคอน  ในช่อง “ชื่อ-นามสกุล” เพื่อลบข้อมูลเก่าออก และทำการกรอกข้อมูลใหม่ลงไป
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> หมายเลข 1 ช่องสำหรับกรอกชื่อ-นามสกุลที่ต้องการค้นหา
|
||||||
|
> หมายเลข 2 ช่องสำหรับแสดงผลการค้นหาโดยการกรอกชื่อ-นามสกุล
|
||||||
|
|
||||||
|
## d2
|
||||||
|
|
||||||
|
- สามารถกดเลือกไอคอน  ในช่อง “ชื่อ-นามสกุล” เพื่อลบข้อมูลเก่าออก และทำการกรอกข้อมูลใหม่ลงไป
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> หมายเลข 1 ช่องสำหรับกรอกชื่อ-นามสกุลที่ต้องการค้นหา
|
||||||
|
> หมายเลข 2 ช่องสำหรับแสดงผลการค้นหาโดยการกรอกชื่อ-นามสกุล
|
||||||
|
|
||||||
|
> หมายเลข 1 ช่องสำหรับกรอกชื่อ-นามสกุลที่ต้องการค้นหา
|
||||||
|
> หมายเลข 2 ช่องสำหรับแสดงผลการค้นหาโดยการกรอกชื่อ-นามสกุล
|
||||||
|
> หมายเลข 1 ช่องสำหรับกรอกชื่อ-นามสกุลที่ต้องการค้นหา
|
||||||
|
> หมายเลข 2 ช่องสำหรับแสดงผลการค้นหาโดยการกรอกชื่อ-นามสกุล
|
||||||
|
> หมายเลข 1 ช่องสำหรับกรอกชื่อ-นามสกุลที่ต้องการค้นหา
|
||||||
|
> หมายเลข 2 ช่องสำหรับแสดงผลการค้นหาโดยการกรอกชื่อ-นามสกุล
|
||||||
|
> หมายเลข 1 ช่องสำหรับกรอกชื่อ-นามสกุลที่ต้องการค้นหา
|
||||||
|
> หมายเลข 2 ช่องสำหรับแสดงผลการค้นหาโดยการกรอกชื่อ-นามสกุล
|
||||||
|
> หมายเลข 1 ช่องสำหรับกรอกชื่อ-นามสกุลที่ต้องการค้นหา
|
||||||
|
> หมายเลข 2 ช่องสำหรับแสดงผลการค้นหาโดยการกรอกชื่อ-นามสกุล
|
||||||
|
> หมายเลข 1 ช่องสำหรับกรอกชื่อ-นามสกุลที่ต้องการค้นหา
|
||||||
|
> หมายเลข 2 ช่องสำหรับแสดงผลการค้นหาโดยการกรอกชื่อ-นามสกุล
|
||||||
|
> หมายเลข 1 ช่องสำหรับกรอกชื่อ-นามสกุลที่ต้องการค้นหา
|
||||||
|
> หมายเลข 2 ช่องสำหรับแสดงผลการค้นหาโดยการกรอกชื่อ-นามสกุล
|
||||||
|
> หมายเลข 1 ช่องสำหรับกรอกชื่อ-นามสกุลที่ต้องการค้นหา
|
||||||
|
> หมายเลข 2 ช่องสำหรับแสดงผลการค้นหาโดยการกรอกชื่อ-นามสกุล
|
||||||
|
> หมายเลข 2 ช่องสำหรับแสดงผลการค้นหาโดยการกรอกชื่อ-นามสกุล
|
||||||
|
> หมายเลข 2 ช่องสำหรับแสดงผลการค้นหาโดยการกรอกชื่อ-นามสกุล
|
||||||
|
> หมายเลข 2 ช่องสำหรับแสดงผลการค้นหาโดยการกรอกชื่อ-นามสกุล
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
31
public/chapter-2-admin-metadata.md
Normal file
31
public/chapter-2-admin-metadata.md
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
# การเข้าสู่ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||||
|
|
||||||
|
|
||||||
|
- เปิดโปรแกรม Google Chrome เวอร์ชั่น 20 ขึ้นไป หรือ Firefox เวอร์ชั่น 14 ขึ้นไป กรอก URL: [https://bma-ehr.frappet.com](https://bma-ehr.frappet.com) ลงในช่อง Address จากนั้นกดแป้น Enter ที่คีย์บอร์ด 1 ครั้ง
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## การเข้าสู่ระบบโดยใช้ User name และ Password
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> หมายเลข 1 ช่องสำหรับกรอกชื่อผู้ใช้งาน
|
||||||
|
> หมายเลข 2 ช่องสำหรับกรอกรหัสผ่านใช้งาน
|
||||||
|
> หมายเลข 3 ปุ่มสำหรับคลิกเข้าสู่ระบบใช้งาน
|
||||||
|
> หมายเลข 4 ช่องสำหรับคลิก หากต้องการให้ระบบจดจำการเข้าสู่ระบบ
|
||||||
|
> หมายเลข 5ช่องสำหรับคลิกหากลืมรหัสผ่านเพื่อให้ทำระบบทำการรีเซ็ตรหัสผ่านใหม่
|
||||||
|
> หมายเลข 6 ช่องสำหรับคลิกเพื่อลงทะเบียนผู้ใช้งานใหม่
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## ddd
|
||||||
|
|
||||||
|
- สามารถกดเลือกไอคอน  ในช่อง “ชื่อ-นามสกุล” เพื่อลบข้อมูลเก่าออก และทำการกรอกข้อมูลใหม่ลงไป
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> หมายเลข 1 ช่องสำหรับกรอกชื่อ-นามสกุลที่ต้องการค้นหา
|
||||||
|
> หมายเลข 2 ช่องสำหรับแสดงผลการค้นหาโดยการกรอกชื่อ-นามสกุล
|
||||||
BIN
public/images/button/close-grey.png
Normal file
BIN
public/images/button/close-grey.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 632 B |
BIN
public/images/chapter1/chapter1_1.png
Normal file
BIN
public/images/chapter1/chapter1_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 228 KiB |
BIN
public/images/chapter1/chapter1_2.png
Normal file
BIN
public/images/chapter1/chapter1_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 306 KiB |
BIN
public/images/chapter1/chapter1_3.png
Normal file
BIN
public/images/chapter1/chapter1_3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
public/images/chapter2/chapter2_1.png
Normal file
BIN
public/images/chapter2/chapter2_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 380 KiB |
BIN
public/images/chapter2/chapter2_2.png
Normal file
BIN
public/images/chapter2/chapter2_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
BIN
public/out.docx
Normal file
BIN
public/out.docx
Normal file
Binary file not shown.
BIN
public/ref.docx
Normal file
BIN
public/ref.docx
Normal file
Binary file not shown.
10
public/toc.json
Normal file
10
public/toc.json
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"label": "ระบบข้อมูลหลัก",
|
||||||
|
"path": "/manual/chapter-1-admin-login"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "การเข้าสู่ระบบ",
|
||||||
|
"path": "/manual/chapter-2-admin-metadata"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
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')
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,524 +1,19 @@
|
||||||
import { readonly } from "vue"
|
import { ref } from "vue";
|
||||||
interface ScrollType {
|
|
||||||
position: number
|
|
||||||
direction: string
|
|
||||||
directionChanged: boolean
|
|
||||||
inflectionPoint: number
|
|
||||||
delta: number
|
|
||||||
}
|
|
||||||
|
|
||||||
interface tabType {
|
export const menuList = ref([
|
||||||
key: number
|
{
|
||||||
label: string
|
icon: "mdi-home-variant-outline",
|
||||||
tag: string
|
activeIcon: "mdi-home-variant",
|
||||||
}
|
label: "หน้าแรก",
|
||||||
interface childrenType {
|
path: "/",
|
||||||
key: number
|
},
|
||||||
label: string
|
{
|
||||||
path?: string
|
icon: "mdi-file-outline",
|
||||||
}
|
activeIcon: "mdi-file",
|
||||||
|
label: "คู่มือการใช้งาน",
|
||||||
interface menuType {
|
children: [] as {
|
||||||
key: number
|
label: string;
|
||||||
icon: string
|
path: string;
|
||||||
activeIcon: string
|
}[],
|
||||||
label: string
|
},
|
||||||
path: string
|
]);
|
||||||
children?: childrenType[]
|
|
||||||
}
|
|
||||||
|
|
||||||
interface notiType {
|
|
||||||
id: string
|
|
||||||
sender: string
|
|
||||||
body: string
|
|
||||||
timereceive: Date
|
|
||||||
}
|
|
||||||
|
|
||||||
interface optionType {
|
|
||||||
icon: string
|
|
||||||
label: string
|
|
||||||
value: string
|
|
||||||
color: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const menuList = readonly<any[]>([
|
|
||||||
{
|
|
||||||
key: 1,
|
|
||||||
icon: "mdi-home-variant-outline",
|
|
||||||
activeIcon: "mdi-home-variant",
|
|
||||||
label: "หน้าแรก",
|
|
||||||
path: "dashboard",
|
|
||||||
role: "dashboard",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 2,
|
|
||||||
icon: "mdi-file-outline",
|
|
||||||
activeIcon: "document",
|
|
||||||
label: "คู่มือการใช้งาน",
|
|
||||||
path: "",
|
|
||||||
role: "metadata",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
key: 2.1,
|
|
||||||
label: "การเข้าสู่ระบบ",
|
|
||||||
path: "/login",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 2.2,
|
|
||||||
label: "ระบบข้อมูลหลัก",
|
|
||||||
path: "/datamain",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 2.3,
|
|
||||||
label: "ระบบโครงสร้างอัตรากำลัง",
|
|
||||||
path: "/structuremain",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 2.4,
|
|
||||||
label: "ระบบทะเบียนประวัติ",
|
|
||||||
path: "/registrationmain",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 2.5,
|
|
||||||
label: "ระบบการสรรหาบุคคล",
|
|
||||||
path: "/recruitmain",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 2.6,
|
|
||||||
label: "ระบบทะเบียนประวัติลูกจ้าง",
|
|
||||||
path: "/Employeehistorymain",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 2.7,
|
|
||||||
label: "ระบบออกคำสั่ง",
|
|
||||||
path: "commandsmain",
|
|
||||||
},
|
|
||||||
|
|
||||||
],
|
|
||||||
},
|
|
||||||
])
|
|
||||||
const tabListLogin = readonly<any[]>([
|
|
||||||
{
|
|
||||||
no: 1,
|
|
||||||
label: "การเข้าสู่หน้าระบบ",
|
|
||||||
tag: "Mainlogin",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 2,
|
|
||||||
label: "การเข้าสู่ระบบโดยใช้ User name และ Password",
|
|
||||||
tag: "login",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 3,
|
|
||||||
label: "การเปลี่ยนรหัสผ่านผู้ใช้งาน",
|
|
||||||
tag: "Password",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 4,
|
|
||||||
label: "การลงทะเบียนผู้ใช้งานใหม่",
|
|
||||||
tag: "newuser",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 5,
|
|
||||||
label: "การออกจากระบบ",
|
|
||||||
tag: "logout",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 6,
|
|
||||||
label: "การแสดงแจ้งเตือน",
|
|
||||||
tag: "noti",
|
|
||||||
},
|
|
||||||
])
|
|
||||||
const tabListDatamain = readonly<any[]>([
|
|
||||||
{
|
|
||||||
no: 1,
|
|
||||||
label: "การเข้าสู่ระบบข้อมูลหลัก",
|
|
||||||
tag: "MainData",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 2,
|
|
||||||
label: "ข้อมูลเกี่ยวกับบุคคล",
|
|
||||||
tag: "About",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 3,
|
|
||||||
label: "ข้อมูลโครงสร้างหน่วยงาน",
|
|
||||||
tag: "gov",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 4,
|
|
||||||
label: "ข้อมูลตำแหน่งของข้าราชการ",
|
|
||||||
tag: "officer",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 5,
|
|
||||||
label: "ข้อมูลตำแหน่งของลูกจ้าง",
|
|
||||||
tag: "employee",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 6,
|
|
||||||
label: "ข้อมูลปฏิทินวันหยุด",
|
|
||||||
tag: "calender",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 7,
|
|
||||||
label: "ข้อมูลเครื่องราชอิสริยาภรณ์",
|
|
||||||
tag: "insignia",
|
|
||||||
},
|
|
||||||
])
|
|
||||||
const tabStructuremain = readonly<any[]>([
|
|
||||||
{
|
|
||||||
no: 1,
|
|
||||||
label: "การเข้าสู่ระบบโครงสร้างอัตรากำลัง",
|
|
||||||
tag: "structuremain",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 2,
|
|
||||||
label: "จัดการตำแหน่ง",
|
|
||||||
tag: "position",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 3,
|
|
||||||
label: "แผนภูมิโครงสร้าง",
|
|
||||||
tag: "structure",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 4,
|
|
||||||
label: "แผนภูมิองค์กร",
|
|
||||||
tag: "organchart",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 5,
|
|
||||||
label: "ผังโครงสร้าง",
|
|
||||||
tag: "chartstru",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 6,
|
|
||||||
label: "จัดการบัญชี 2",
|
|
||||||
tag: "account2",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 7,
|
|
||||||
label: "รายงานบัญชี",
|
|
||||||
tag: "report",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 8,
|
|
||||||
label: "ผังโครงสร้างลูกจ้าง",
|
|
||||||
tag: "chartemploy",
|
|
||||||
},
|
|
||||||
])
|
|
||||||
const tabRegistration = readonly<any[]>([
|
|
||||||
{
|
|
||||||
no: 1,
|
|
||||||
label: "การเข้าสู่หน้าระบบทะเบียนประวัติ",
|
|
||||||
tag: "registrationmain",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 2,
|
|
||||||
label: "การค้นหาข้อมูลทะเบียนประวัติ",
|
|
||||||
tag: "registrationFind",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 3,
|
|
||||||
label: "การดูรายละเอียดข้อมูลทะเบียน",
|
|
||||||
tag: "registrationDetail",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 4,
|
|
||||||
label: "การเพิ่ม แก้ไข ดูประวัติแก้ไขข้อมูล",
|
|
||||||
tag: "registrationEdit",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 5,
|
|
||||||
label: "การค้นหาข้อมูลส่วนตัว การเลือกคอลัมน์แสดงผลข้อมูล",
|
|
||||||
tag: "registrationSelect",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 6,
|
|
||||||
label: "การปรับหน้าต่างแสดงผลหน้าข้อมูลส่วนตัว",
|
|
||||||
tag: "registrationWindow",
|
|
||||||
},
|
|
||||||
])
|
|
||||||
const tabRecruit = readonly<any[]>([
|
|
||||||
{
|
|
||||||
no: 1,
|
|
||||||
label: "การเข้าสู่หน้าระบบสรรหา",
|
|
||||||
tag: "recruitmain",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 2,
|
|
||||||
label: "การตั้งค่าเว็บไซต์ระบบสรรหา",
|
|
||||||
tag: "recruitSetting",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 3,
|
|
||||||
label: "สอบแข่งขัน",
|
|
||||||
tag: "recruitManagemain",
|
|
||||||
childern: [
|
|
||||||
{
|
|
||||||
no: 3.1,
|
|
||||||
label: "จัดการรอบสอบการแข่งขัน",
|
|
||||||
tag: "recruitManage",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 3.2,
|
|
||||||
label: "สถิติสมัครสอบแข่งขัน",
|
|
||||||
tag: "recruitstati",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 4,
|
|
||||||
label: "คัดเลือก",
|
|
||||||
tag: "recruitQualifiersmain",
|
|
||||||
childern: [
|
|
||||||
{
|
|
||||||
no: 4.1,
|
|
||||||
label: "จัดการรอบคัดเลือก",
|
|
||||||
tag: "recruitQualifiers",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 4.2,
|
|
||||||
label: "จัดการรอบคัดเลือกคนพิการ",
|
|
||||||
tag: "recruitDisabilities",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 4.3,
|
|
||||||
label: "จัดการรายชื่อคัดเลือก",
|
|
||||||
tag: "recruitSelection",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
])
|
|
||||||
|
|
||||||
const tabList = readonly<any[]>([
|
|
||||||
{
|
|
||||||
no: 1,
|
|
||||||
label: "การเข้าสู่ระบบ",
|
|
||||||
path: "/manual",
|
|
||||||
childern: [
|
|
||||||
{
|
|
||||||
no: 1.1,
|
|
||||||
label: "การเข้าสู่หน้าระบบ",
|
|
||||||
path: "/manual",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 1.2,
|
|
||||||
label: "การเข้าสู่ระบบโดยใช้ User name และ Password",
|
|
||||||
path: "/login/log",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 1.3,
|
|
||||||
label: "การเปลี่ยนรหัสผ่านผู้ใช้งาน",
|
|
||||||
path: "/login/password",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 1.4,
|
|
||||||
label: "การลงทะเบียนผู้ใช้งานใหม่",
|
|
||||||
path: "/login/newuser",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 1.5,
|
|
||||||
label: "การออกจากระบบ",
|
|
||||||
path: "/login/logout",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 1.6,
|
|
||||||
label: "การแสดงแจ้งเตือน",
|
|
||||||
path: "/login/noti",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
no: 2,
|
|
||||||
label: "ระบบข้อมูลหลัก",
|
|
||||||
path: "/Datamain",
|
|
||||||
childern: [
|
|
||||||
{
|
|
||||||
no: 2.1,
|
|
||||||
label: "การเข้าสู่ระบบข้อมูลหลัก",
|
|
||||||
path: "/Datamain",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 2.2,
|
|
||||||
label: "ข้อมูลเกี่ยวกับบุคคล",
|
|
||||||
path: "/Data/about",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 2.3,
|
|
||||||
label: "ข้อมูลโครงสร้างหน่วยงาน",
|
|
||||||
path: "/Data/gov",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 2.4,
|
|
||||||
label: "ข้อมูลตำแหน่งของข้าราชการ",
|
|
||||||
path: "/Data/officer",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 2.5,
|
|
||||||
label: "ข้อมูลตำแหน่งของลูกจ้าง",
|
|
||||||
path: "/Data/employee",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 2.6,
|
|
||||||
label: "ข้อมูลปฏิทินวันหยุด",
|
|
||||||
path: "/Data/calendar",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 2.7,
|
|
||||||
label: "ข้อมูลเครื่องราชอิสริยาภรณ์",
|
|
||||||
path: "/Data/insignia",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
no: 3,
|
|
||||||
label: "ระบบโครงสร้างอัตรากำลัง",
|
|
||||||
path: "/Structuremain",
|
|
||||||
childern: [
|
|
||||||
{
|
|
||||||
no: 3.1,
|
|
||||||
label: "การเข้าสู่ระบบโครงสร้างอัตรากำลัง",
|
|
||||||
path: "/Structuremain",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 3.2,
|
|
||||||
label: "จัดการตำแหน่ง",
|
|
||||||
path: "/Structure/Position",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 3.3,
|
|
||||||
label: "แผนภูมิโครงสร้าง",
|
|
||||||
path: "/Structure/Structure",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 3.4,
|
|
||||||
label: "แผนภูมิองค์กร",
|
|
||||||
path: "/Structure/Organchart",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 3.5,
|
|
||||||
label: "ผังโครงสร้าง",
|
|
||||||
path: "/Structure/Chartstru",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 3.6,
|
|
||||||
label: "จัดการบัญชี 2",
|
|
||||||
path: "/Structure/Account2",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 3.7,
|
|
||||||
label: "รายงานบัญชี",
|
|
||||||
path: "/Structure/Report",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 3.8,
|
|
||||||
label: "ผังโครงสร้างลูกจ้าง",
|
|
||||||
path: "/Structure/Chartemploy",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
no: 4,
|
|
||||||
label: "ระบบทะเบียนประวัติ",
|
|
||||||
path: "/Registrationmain",
|
|
||||||
childern: [
|
|
||||||
{
|
|
||||||
no: 4.1,
|
|
||||||
label: "การเข้าสู่หน้าระบบทะเบียนประวัติ",
|
|
||||||
path: "/Registrationmain",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 4.2,
|
|
||||||
label: "การค้นหาข้อมูลทะเบียนประวัติ",
|
|
||||||
path: "/Registration/find",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 4.3,
|
|
||||||
label: "การดูรายละเอียดข้อมูลทะเบียน",
|
|
||||||
path: "/Registration/detail",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 4.4,
|
|
||||||
label: "การเพิ่ม แก้ไข ดูประวัติแก้ไขข้อมูล",
|
|
||||||
path: "/Registration/edit",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 4.5,
|
|
||||||
label: "การค้นหาข้อมูลส่วนตัว การเลือกคอลัมน์แสดงผลข้อมูล",
|
|
||||||
path: "/Registration/select",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 4.6,
|
|
||||||
label: "การปรับหน้าต่างแสดงผลหน้าข้อมูลส่วนตัว",
|
|
||||||
path: "/Registration/window",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
no: 5,
|
|
||||||
label: "ระบบการสรรหาบุคคล",
|
|
||||||
path: "/Recruitmain",
|
|
||||||
childern: [
|
|
||||||
{
|
|
||||||
no: 5.1,
|
|
||||||
label: "การเข้าสู่หน้าระบบสรรหา",
|
|
||||||
path: "/Recruitmain",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 5.2,
|
|
||||||
label: "การตั้งค่าเว็บไซต์ระบบสรรหา",
|
|
||||||
path: "/Recruit/setting",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 5.3,
|
|
||||||
label: "สอบแข่งขัน",
|
|
||||||
path: "",
|
|
||||||
childern: [
|
|
||||||
{
|
|
||||||
no: 5.31,
|
|
||||||
label: "จัดการรอบสอบการแข่งขัน",
|
|
||||||
path: "/Recruit/managecompet",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 5.32,
|
|
||||||
label: "สถิติสมัครสอบแข่งขัน",
|
|
||||||
path: "/Recruit/staticompet",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 5.4,
|
|
||||||
label: "คัดเลือก",
|
|
||||||
path: "",
|
|
||||||
childern: [
|
|
||||||
{
|
|
||||||
no: 5.41,
|
|
||||||
label: "จัดการรอบคัดเลือก",
|
|
||||||
path: "/Recruit/qualifiers",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 5.42,
|
|
||||||
label: "จัดการรอบคัดเลือกคนพิการ",
|
|
||||||
path: "/Recruit/disabilities",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
no: 5.43,
|
|
||||||
label: "จัดการรายชื่อคัดเลือก",
|
|
||||||
path: "/Recruit/selection",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
])
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export { menuList, tabList, tabListLogin, tabListDatamain, tabStructuremain, tabRegistration, tabRecruit }
|
|
||||||
export type { ScrollType, tabType, menuType, notiType, optionType }
|
|
||||||
|
|
|
||||||
|
|
@ -1,46 +0,0 @@
|
||||||
//response api เกี่ยวกับ status code กับ error
|
|
||||||
interface RequestHistoryObject {
|
|
||||||
message: String;
|
|
||||||
result: ResultHistoryObject;
|
|
||||||
status: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
//rusult แนบ id version mongo
|
|
||||||
interface ResultHistoryObject {
|
|
||||||
id: String;
|
|
||||||
items: RequestPrefixHistoryObject;
|
|
||||||
version: String;
|
|
||||||
}
|
|
||||||
|
|
||||||
//ข้อมูล คำนำหน้าชื่อ
|
|
||||||
interface RequestPrefixHistoryObject {
|
|
||||||
createdAt?: Date;
|
|
||||||
createdFullName: String;
|
|
||||||
createdUserId: String;
|
|
||||||
id: String;
|
|
||||||
isActive: Boolean;
|
|
||||||
lastUpdateFullName: String;
|
|
||||||
lastUpdateUserId: String;
|
|
||||||
lastUpdatedAt?: Date;
|
|
||||||
name: String;
|
|
||||||
}
|
|
||||||
|
|
||||||
//columns
|
|
||||||
interface PrefixColumns {
|
|
||||||
[index: number]: {
|
|
||||||
name: String;
|
|
||||||
align: String;
|
|
||||||
label: String;
|
|
||||||
sortable: Boolean;
|
|
||||||
field: String;
|
|
||||||
headerStyle: String;
|
|
||||||
style: String;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export type {
|
|
||||||
RequestHistoryObject,
|
|
||||||
ResultHistoryObject,
|
|
||||||
RequestPrefixHistoryObject,
|
|
||||||
PrefixColumns,
|
|
||||||
};
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
interface ResponseInbox {
|
|
||||||
body: string;
|
|
||||||
createdAt: Date;
|
|
||||||
createdFullName: string;
|
|
||||||
createdUserId: string;
|
|
||||||
id: string;
|
|
||||||
isOpen: boolean;
|
|
||||||
lastUpdateFullName: string;
|
|
||||||
lastUpdateUserId: string;
|
|
||||||
lastUpdatedAt: Date;
|
|
||||||
openDate: Date | null;
|
|
||||||
payload: string;
|
|
||||||
receiveDate: Date;
|
|
||||||
receiverUserId: string;
|
|
||||||
subject: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface DataInbox {
|
|
||||||
no: string;
|
|
||||||
sender: string;
|
|
||||||
subject: string;
|
|
||||||
timereceive: Date;
|
|
||||||
body: string;
|
|
||||||
ratingModel: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export type { ResponseInbox, DataInbox };
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
//ข้อมูล คำนำหน้าชื่อ
|
|
||||||
interface ResponsePrefixHistoryObject {
|
|
||||||
createdAt?: Date;
|
|
||||||
createdFullName: String;
|
|
||||||
createdUserId: String;
|
|
||||||
id: String;
|
|
||||||
isActive: Boolean;
|
|
||||||
lastUpdateFullName: String;
|
|
||||||
lastUpdateUserId: String;
|
|
||||||
lastUpdatedAt?: Date;
|
|
||||||
name: String;
|
|
||||||
}
|
|
||||||
|
|
||||||
export type { ResponsePrefixHistoryObject };
|
|
||||||
|
|
@ -7,7 +7,6 @@ import quasarUserOptions from "./quasar-user-options";
|
||||||
import "quasar/src/css/index.sass";
|
import "quasar/src/css/index.sass";
|
||||||
import th from "quasar/lang/th";
|
import th from "quasar/lang/th";
|
||||||
|
|
||||||
import http from "./plugins/http";
|
|
||||||
import { createPinia } from "pinia";
|
import { createPinia } from "pinia";
|
||||||
// organization
|
// organization
|
||||||
// position
|
// position
|
||||||
|
|
@ -19,6 +18,7 @@ import { createPinia } from "pinia";
|
||||||
|
|
||||||
// Import GlobalFilters
|
// Import GlobalFilters
|
||||||
import filters from "./plugins/filters";
|
import filters from "./plugins/filters";
|
||||||
|
import http from "./plugins/http";
|
||||||
|
|
||||||
const app = createApp(App);
|
const app = createApp(App);
|
||||||
const pinia = createPinia();
|
const pinia = createPinia();
|
||||||
|
|
|
||||||
239
src/modules/01_manual/MainPage.vue
Normal file
239
src/modules/01_manual/MainPage.vue
Normal file
|
|
@ -0,0 +1,239 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { nextTick, onMounted, onUnmounted, ref, watch } from "vue";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
import MarkdownIt, { type Token } from "markdown-it";
|
||||||
|
|
||||||
|
// @ts-expect-error
|
||||||
|
import mditFigureWithPCaption from "markdown-it-image-figures";
|
||||||
|
import mditAnchor from "markdown-it-anchor";
|
||||||
|
import { useManualStore } from "@/stores/manual";
|
||||||
|
import { storeToRefs } from "pinia";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
const md = new MarkdownIt().use(mditAnchor).use(mditFigureWithPCaption, {
|
||||||
|
figcaption: "alt",
|
||||||
|
});
|
||||||
|
|
||||||
|
const quasar = useQuasar();
|
||||||
|
const route = useRoute();
|
||||||
|
const manual = useManualStore();
|
||||||
|
const { toc } = storeToRefs(manual);
|
||||||
|
|
||||||
|
const text = ref("");
|
||||||
|
const parsed = ref<Token[]>([]);
|
||||||
|
const chapter = ref(0);
|
||||||
|
const found = ref(false);
|
||||||
|
const active = ref("");
|
||||||
|
|
||||||
|
function onScroll() {
|
||||||
|
let current = "";
|
||||||
|
document.querySelectorAll("h2").forEach((v) => {
|
||||||
|
if (
|
||||||
|
window.top &&
|
||||||
|
window.top.scrollY + window.innerHeight / 2 > v.offsetTop
|
||||||
|
) {
|
||||||
|
current = v.id;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
active.value = current;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onResize() {
|
||||||
|
if (window.innerWidth > 1024) {
|
||||||
|
toc.value = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function scrollTo(id: string) {
|
||||||
|
const pos = document.getElementById(id)?.offsetTop;
|
||||||
|
await nextTick(() => {
|
||||||
|
if (window.innerWidth < 1024) toc.value = false;
|
||||||
|
});
|
||||||
|
if (pos)
|
||||||
|
window.scrollTo({
|
||||||
|
top: pos,
|
||||||
|
behavior: "smooth",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
window.addEventListener("scroll", onScroll);
|
||||||
|
window.addEventListener("resize", onResize);
|
||||||
|
|
||||||
|
if (typeof route.params.name === "string") {
|
||||||
|
const res = await fetch(`/${route.params.name}.md`);
|
||||||
|
if (res && res.ok) {
|
||||||
|
text.value = await res.text();
|
||||||
|
found.value = true;
|
||||||
|
chapter.value = +route.params.name.slice(8, 9) - 1;
|
||||||
|
parsed.value = md.parse(text.value, {});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.removeEventListener("scroll", onScroll);
|
||||||
|
window.removeEventListener("resize", onResize);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div v-if="found" style="display: flex" class="markdown">
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
width: 100%;
|
||||||
|
flex: 1;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
border: 1px solid #e1e1e9;
|
||||||
|
padding: 1rem;
|
||||||
|
"
|
||||||
|
v-html="md.render(text.replaceAll('images/', '/images/'))"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<q-drawer
|
||||||
|
v-if="toc"
|
||||||
|
side="right"
|
||||||
|
class="bg-grey-2"
|
||||||
|
show-if-above
|
||||||
|
v-model="toc"
|
||||||
|
:width="250"
|
||||||
|
:behavior="$q.screen.width > 1024 ? 'desktop' : 'mobile'"
|
||||||
|
>
|
||||||
|
<q-scroll-area class="fit">
|
||||||
|
<q-list padding>
|
||||||
|
<template v-for="(token, idx) in parsed">
|
||||||
|
<q-item
|
||||||
|
class="tabNative"
|
||||||
|
active-class="text-blue-7 active-item text-weight-medium tabActive"
|
||||||
|
:active="active === token.attrGet('id')"
|
||||||
|
@click="scrollTo(token.attrGet('id') || '')"
|
||||||
|
v-if="token.tag === 'h2' && token.type === 'heading_open'"
|
||||||
|
clickable
|
||||||
|
v-ripple
|
||||||
|
dense
|
||||||
|
exact
|
||||||
|
>
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label>
|
||||||
|
<q-icon size="11px" name="mdi-circle-medium" />
|
||||||
|
<span class="q-pl-xs">{{ parsed[idx + 1].content }}</span>
|
||||||
|
</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</template>
|
||||||
|
</q-list>
|
||||||
|
</q-scroll-area>
|
||||||
|
</q-drawer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.toc {
|
||||||
|
top: 4rem;
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
.markdown {
|
||||||
|
counter-set: h1 v-bind(chapter);
|
||||||
|
counter-reset: h1;
|
||||||
|
}
|
||||||
|
.markdown :deep(:where(h1, h2, h3, h4, h5, h6)) {
|
||||||
|
line-height: 1.5;
|
||||||
|
padding-block: 1rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(h1) {
|
||||||
|
counter-reset: h2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(h2) {
|
||||||
|
counter-reset: h3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(h3) {
|
||||||
|
counter-reset: h4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(h1:before) {
|
||||||
|
counter-increment: h1;
|
||||||
|
content: counter(h1) ". ";
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(h2:before) {
|
||||||
|
counter-increment: h2;
|
||||||
|
content: counter(h1) "." counter(h2) ". ";
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(h3:before) {
|
||||||
|
counter-increment: h3;
|
||||||
|
content: counter(h1) "." counter(h2) "." counter(h3) ". ";
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(h4:before) {
|
||||||
|
counter-increment: h4;
|
||||||
|
content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". ";
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(blockquote) {
|
||||||
|
background-color: #ecebeb;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 8px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(blockquote > p:last-child) {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(img) {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(p img) {
|
||||||
|
padding-inline: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(figure) {
|
||||||
|
margin: 0;
|
||||||
|
text-align: center;
|
||||||
|
padding: 1rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(figure img) {
|
||||||
|
max-width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(p:has(img:only-child) img) {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(.abc) {
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(h1) {
|
||||||
|
text-align: left;
|
||||||
|
margin-top: -1rem;
|
||||||
|
margin-inline: -1rem;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
background-color: #ecebeb;
|
||||||
|
border-radius: 8px 8px 0px 0px;
|
||||||
|
padding: 0px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(figcaption) {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown :deep(h2) {
|
||||||
|
text-align: left;
|
||||||
|
margin-block: 0;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0px 16px;
|
||||||
|
color: #02a998;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,359 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
const rightDrawerOpen = ref(false);
|
|
||||||
const text = ref("");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="row col-12">
|
|
||||||
<div></div>
|
|
||||||
<div class="col-12">
|
|
||||||
<!-- <div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="custom-topic text-dark">
|
|
||||||
<div style="font-size: 16px; font-weight: 700">
|
|
||||||
การเข้าสู่ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="border-radius: 0px 0px 8px 8px"
|
|
||||||
>
|
|
||||||
<div class="col-12 text16">
|
|
||||||
เปิดโปรแกรม Google Chrome เวอร์ชั่น 20 ขึ้นไป หรือ Firefox เวอร์ชั่น
|
|
||||||
14 ขึ้นไป กรอก
|
|
||||||
<span class="text-green">URL: https://bma-ehr.frappet.com</span>
|
|
||||||
ลงในช่อง Address จากนั้นกดแป้น Enter ที่คีย์บอร์ด 1 ครั้ง ดังรูป
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/01_login/1_main/1-1.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 1–1 แสดงการเข้าสู่เว็บไซต์
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- <div class="col-3 row justify-center" style="position: relative">
|
|
||||||
<q-list
|
|
||||||
dense
|
|
||||||
padding
|
|
||||||
class="col-12"
|
|
||||||
style="max-width: 328px; position: absolute; top: 50px"
|
|
||||||
>
|
|
||||||
<q-expansion-item label="การเข้าสู่ระบบ">
|
|
||||||
<q-list dense>
|
|
||||||
<q-item dense clickable v-ripple>
|
|
||||||
<q-item-section
|
|
||||||
avatar
|
|
||||||
class="q-pa-none"
|
|
||||||
style="min-width: 36px; margin-left: 30px"
|
|
||||||
>
|
|
||||||
</q-item-section>
|
|
||||||
<q-item-section class="text-grey-7"
|
|
||||||
>การเข้าสู่ระบบโดยใช้ User name และ Password</q-item-section
|
|
||||||
>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item dense clickable v-ripple>
|
|
||||||
<q-item-section
|
|
||||||
avatar
|
|
||||||
class="q-pa-none"
|
|
||||||
style="min-width: 36px; margin-left: 30px"
|
|
||||||
>
|
|
||||||
</q-item-section>
|
|
||||||
<q-item-section class="text-grey-7"
|
|
||||||
>การเปลี่ยนรหัสผ่านผู้ใช้งาน</q-item-section
|
|
||||||
>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item dense clickable v-ripple>
|
|
||||||
<q-item-section
|
|
||||||
avatar
|
|
||||||
class="q-pa-none"
|
|
||||||
style="min-width: 36px; margin-left: 30px"
|
|
||||||
>
|
|
||||||
</q-item-section>
|
|
||||||
<q-item-section class="text-grey-7"
|
|
||||||
>การลงทะเบียนผู้ใช้งานใหม่</q-item-section
|
|
||||||
>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item dense clickable v-ripple>
|
|
||||||
<q-item-section
|
|
||||||
avatar
|
|
||||||
class="q-pa-none"
|
|
||||||
style="min-width: 36px; margin-left: 30px"
|
|
||||||
>
|
|
||||||
</q-item-section>
|
|
||||||
<q-item-section class="text-grey-7">การออกจากระบบ</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item dense clickable v-ripple>
|
|
||||||
<q-item-section
|
|
||||||
avatar
|
|
||||||
class="q-pa-none"
|
|
||||||
style="min-width: 36px; margin-left: 30px"
|
|
||||||
>
|
|
||||||
</q-item-section>
|
|
||||||
<q-item-section class="text-grey-7"
|
|
||||||
>การแสดงแจ้งเตือน</q-item-section
|
|
||||||
>
|
|
||||||
</q-item>
|
|
||||||
</q-list>
|
|
||||||
</q-expansion-item>
|
|
||||||
|
|
||||||
<q-expansion-item label="ระบบข้อมูลหลัก" class="text-grey-7">
|
|
||||||
<q-list dense>
|
|
||||||
<q-item dense clickable v-ripple>
|
|
||||||
<q-item-section
|
|
||||||
avatar
|
|
||||||
class="q-pa-none"
|
|
||||||
style="min-width: 36px; margin-left: 30px"
|
|
||||||
>
|
|
||||||
</q-item-section>
|
|
||||||
<q-item-section class="text-grey-7"
|
|
||||||
>การเข้าสู่ระบบโดยใช้ User name และ Password</q-item-section
|
|
||||||
>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item dense clickable v-ripple>
|
|
||||||
<q-item-section
|
|
||||||
avatar
|
|
||||||
class="q-pa-none"
|
|
||||||
style="min-width: 36px; margin-left: 30px"
|
|
||||||
>
|
|
||||||
</q-item-section>
|
|
||||||
<q-item-section class="text-grey-7"
|
|
||||||
>การเปลี่ยนรหัสผ่านผู้ใช้งาน</q-item-section
|
|
||||||
>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item dense clickable v-ripple>
|
|
||||||
<q-item-section
|
|
||||||
avatar
|
|
||||||
class="q-pa-none"
|
|
||||||
style="min-width: 36px; margin-left: 30px"
|
|
||||||
>
|
|
||||||
</q-item-section>
|
|
||||||
<q-item-section class="text-grey-7"
|
|
||||||
>การลงทะเบียนผู้ใช้งานใหม่</q-item-section
|
|
||||||
>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item dense clickable v-ripple>
|
|
||||||
<q-item-section
|
|
||||||
avatar
|
|
||||||
class="q-pa-none"
|
|
||||||
style="min-width: 36px; margin-left: 30px"
|
|
||||||
>
|
|
||||||
</q-item-section>
|
|
||||||
<q-item-section class="text-grey-7">การออกจากระบบ</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item dense clickable v-ripple>
|
|
||||||
<q-item-section
|
|
||||||
avatar
|
|
||||||
class="q-pa-none"
|
|
||||||
style="min-width: 36px; margin-left: 30px"
|
|
||||||
>
|
|
||||||
</q-item-section>
|
|
||||||
<q-item-section class="text-grey-7"
|
|
||||||
>การแสดงแจ้งเตือน</q-item-section
|
|
||||||
>
|
|
||||||
</q-item>
|
|
||||||
</q-list>
|
|
||||||
</q-expansion-item>
|
|
||||||
|
|
||||||
<q-expansion-item label="ระบบโครงสร้างอัตรากำลัง" class="text-grey-7">
|
|
||||||
<q-list dense>
|
|
||||||
<q-item dense clickable v-ripple>
|
|
||||||
<q-item-section
|
|
||||||
avatar
|
|
||||||
class="q-pa-none"
|
|
||||||
style="min-width: 36px; margin-left: 30px"
|
|
||||||
>
|
|
||||||
</q-item-section>
|
|
||||||
<q-item-section class="text-grey-7">จัดการตำแหน่ง</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item dense clickable v-ripple>
|
|
||||||
<q-item-section
|
|
||||||
avatar
|
|
||||||
class="q-pa-none"
|
|
||||||
style="min-width: 36px; margin-left: 30px"
|
|
||||||
>
|
|
||||||
</q-item-section>
|
|
||||||
<q-item-section class="text-grey-7"
|
|
||||||
>แผนภูมิโครงสร้าง</q-item-section
|
|
||||||
>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item dense clickable v-ripple>
|
|
||||||
<q-item-section
|
|
||||||
avatar
|
|
||||||
class="q-pa-none"
|
|
||||||
style="min-width: 36px; margin-left: 30px"
|
|
||||||
>
|
|
||||||
</q-item-section>
|
|
||||||
<q-item-section class="text-grey-7">แผนภูมิองค์กร</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item dense clickable v-ripple>
|
|
||||||
<q-item-section
|
|
||||||
avatar
|
|
||||||
class="q-pa-none"
|
|
||||||
style="min-width: 36px; margin-left: 30px"
|
|
||||||
>
|
|
||||||
</q-item-section>
|
|
||||||
<q-item-section class="text-grey-7">ผังโครงสร้าง</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item dense clickable v-ripple>
|
|
||||||
<q-item-section
|
|
||||||
avatar
|
|
||||||
class="q-pa-none"
|
|
||||||
style="min-width: 36px; margin-left: 30px"
|
|
||||||
>
|
|
||||||
</q-item-section>
|
|
||||||
<q-item-section class="text-grey-7">จัดการบัญชี 2</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item dense clickable v-ripple>
|
|
||||||
<q-item-section
|
|
||||||
avatar
|
|
||||||
class="q-pa-none"
|
|
||||||
style="min-width: 36px; margin-left: 30px"
|
|
||||||
>
|
|
||||||
</q-item-section>
|
|
||||||
<q-item-section class="text-grey-7">รายงานบัญชี</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item dense clickable v-ripple>
|
|
||||||
<q-item-section
|
|
||||||
avatar
|
|
||||||
class="q-pa-none"
|
|
||||||
style="min-width: 36px; margin-left: 30px"
|
|
||||||
>
|
|
||||||
</q-item-section>
|
|
||||||
<q-item-section class="text-grey-7">จัดการบัญชี 2</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
</q-list>
|
|
||||||
</q-expansion-item>
|
|
||||||
|
|
||||||
<q-expansion-item
|
|
||||||
label="หน้าจัดการระบบทะเบียนประวัติ"
|
|
||||||
class="text-grey-7"
|
|
||||||
>
|
|
||||||
<q-list dense>
|
|
||||||
<q-item dense clickable v-ripple>
|
|
||||||
<q-item-section
|
|
||||||
avatar
|
|
||||||
class="q-pa-none"
|
|
||||||
style="min-width: 36px; margin-left: 30px"
|
|
||||||
>
|
|
||||||
</q-item-section>
|
|
||||||
<q-item-section class="text-grey-7"
|
|
||||||
>การเข้าสู่หน้าระบบทะเบียนประวัติ</q-item-section
|
|
||||||
>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item dense clickable v-ripple>
|
|
||||||
<q-item-section
|
|
||||||
avatar
|
|
||||||
class="q-pa-none"
|
|
||||||
style="min-width: 36px; margin-left: 30px"
|
|
||||||
>
|
|
||||||
</q-item-section>
|
|
||||||
<q-item-section class="text-grey-7"
|
|
||||||
>การค้นหาข้อมูลทะเบียนประวัติ</q-item-section
|
|
||||||
>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item dense clickable v-ripple>
|
|
||||||
<q-item-section
|
|
||||||
avatar
|
|
||||||
class="q-pa-none"
|
|
||||||
style="min-width: 36px; margin-left: 30px"
|
|
||||||
>
|
|
||||||
</q-item-section>
|
|
||||||
<q-item-section class="text-grey-7"
|
|
||||||
>การดูรายละเอียดข้อมูลทะเบียนประวัติ</q-item-section
|
|
||||||
>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item dense clickable v-ripple>
|
|
||||||
<q-item-section
|
|
||||||
avatar
|
|
||||||
class="q-pa-none"
|
|
||||||
style="min-width: 36px; margin-left: 30px"
|
|
||||||
>
|
|
||||||
</q-item-section>
|
|
||||||
<q-item-section class="text-grey-7"
|
|
||||||
>การเพิ่ม แก้ไข
|
|
||||||
ดูประวัติแก้ไขข้อมูลทะเบียนประวัติ</q-item-section
|
|
||||||
>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item dense clickable v-ripple>
|
|
||||||
<q-item-section
|
|
||||||
avatar
|
|
||||||
class="q-pa-none"
|
|
||||||
style="min-width: 36px; margin-left: 30px"
|
|
||||||
>
|
|
||||||
</q-item-section>
|
|
||||||
<q-item-section class="text-grey-7"
|
|
||||||
>การค้นหาข้อมูลส่วนตัว
|
|
||||||
การเลือกคอลัมน์แสดงผลข้อมูล</q-item-section
|
|
||||||
>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item dense clickable v-ripple>
|
|
||||||
<q-item-section
|
|
||||||
avatar
|
|
||||||
class="q-pa-none"
|
|
||||||
style="min-width: 36px; margin-left: 30px"
|
|
||||||
>
|
|
||||||
</q-item-section>
|
|
||||||
<q-item-section class="text-grey-7"
|
|
||||||
>การปรับหน้าต่างแสดงผลหน้าข้อมูลส่วนตัว</q-item-section
|
|
||||||
>
|
|
||||||
</q-item>
|
|
||||||
</q-list>
|
|
||||||
</q-expansion-item>
|
|
||||||
</q-list>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.q-item__section--side .q-icon {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,103 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
const rightDrawerOpen = ref(false);
|
|
||||||
const text = ref("");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- <div class="row col-12">
|
|
||||||
<div class="col-9"> -->
|
|
||||||
<!-- <div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<!-- <q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
> -->
|
|
||||||
<!-- <div class="custom-topic text-dark"> -->
|
|
||||||
<!-- <div style="font-size: 16px; font-weight: 700">
|
|
||||||
การเข้าสู่ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div> -->
|
|
||||||
<!-- </div> -->
|
|
||||||
<!-- </q-card> -->
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="border-radius: 0px 0px 8px 8px"
|
|
||||||
>
|
|
||||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
|
||||||
1.1 การเข้าสู่ระบบโดยใช้ User name และ Password
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/01_login/2_login/1-2.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 1 – 2 การเข้าสู่ระบบโดยการกรอกชื่อผู้ใช้งานและรหัสผ่าน
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับกรอกชื่อผู้ใช้งาน <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับกรอกรหัสผ่านใช้งาน <br />
|
|
||||||
หมายเลข 3 ปุ่มสำหรับคลิกเข้าสู่ระบบใช้งาน <br />
|
|
||||||
หมายเลข 4 ช่องสำหรับคลิก หากต้องการให้ระบบจดจำการเข้าสู่ระบบ <br />
|
|
||||||
หมายเลข 5
|
|
||||||
ช่องสำหรับคลิกหากลืมรหัสผ่านเพื่อให้ทำระบบทำการรีเซ็ตรหัสผ่านใหม่
|
|
||||||
<br />
|
|
||||||
หมายเลข 6 ช่องสำหรับคลิกเพื่อลงทะเบียนผู้ใช้งานใหม่ <br />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12 text16" style="margin-top: 40px; margin-left: 10px">
|
|
||||||
- เมื่อเข้าสู่ระบบบริหารทรัพยากรบุคคลกรุงเทพมหานคร
|
|
||||||
ระบบแสดงหน้าจอของระบบบริหารทรัพยากรบุคคลกรุงเทพมหานครของเจ้าหน้าที่ดูแลระบบ
|
|
||||||
</div>
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/01_login/2_login/1-3.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 1 – 3 การเข้าสู่ระบบหลังจากกรอกชื่อผู้ใช้งาน
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
<!-- </div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.custom-topic {
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,132 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
const rightDrawerOpen = ref(false);
|
|
||||||
const text = ref("");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- <div class="row col-12">
|
|
||||||
<div class="col-9">
|
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<!-- <q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="custom-topic text-dark">
|
|
||||||
<div style="font-size: 16px; font-weight: 700">
|
|
||||||
การเข้าสู่ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card> -->
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="border-radius: 0px 0px 8px 8px"
|
|
||||||
>
|
|
||||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
|
||||||
1.2 การเปลี่ยนรหัสผ่านผู้ใช้งาน
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="col-12 text16 q-gutter-xs"
|
|
||||||
style="margin-top: 20px; margin-left: 10px"
|
|
||||||
>
|
|
||||||
- หากลืมรหัสผ่านผู้ใช้งานให้ทำการใช้เมาส์คลิก
|
|
||||||
<span
|
|
||||||
class="dd text-red"
|
|
||||||
>
|
|
||||||
ลืมรหัสผ่าน
|
|
||||||
</span>
|
|
||||||
|
|
||||||
จากนั้นระบบจะหน้า “ลืมรหัสผ่าน”
|
|
||||||
ให้ทำการกรอกชื่อผู้ใช้งานหรือที่อยู่อีเมลของผู้ใช้งานลงไป
|
|
||||||
จากนั้นทำการคลิก
|
|
||||||
<span
|
|
||||||
style="
|
|
||||||
background-color: #00aa86;
|
|
||||||
border: 1px solid #00aa86;
|
|
||||||
color: white;
|
|
||||||
font-size: 13px;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0px 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
ยืนยัน
|
|
||||||
</span>
|
|
||||||
ระบบจะทำการรีเซ็ตรหัสผ่านใหม่ให้โดยการส่งคำแนะนำไปทางอีเมลของผู้ใช้งานหรือหากไม่ต้องการ
|
|
||||||
ให้ทำการใช้เมาส์คลิก
|
|
||||||
<span
|
|
||||||
style="
|
|
||||||
background-color: #ffffff;
|
|
||||||
border: 1px solid hsl(0, 100%, 50%);
|
|
||||||
color: red;
|
|
||||||
font-size: 13px;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0px 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
« กลับหน้าเข้าสู่ระบบ
|
|
||||||
</span>
|
|
||||||
เพื่อกลับไปยังหน้าเข้าสู่ระบบเพื่อใช้งาน
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/01_login/3_password/1-4.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 1 – 4 แสดงการกรอกข้อมูลหากลืมรหัสผ่านใช้งาน
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับกรอกชื่อหรืออีเมลของผู้ใช้งาน <br />
|
|
||||||
หมายเลข 2ปุ่มสำหรับคลิกเพื่อยืนยันการให้ระบบส่งข้อมูลการรีเซ็ตรหัสผ่านให้<br />
|
|
||||||
หมายเลข 3 ปุ่มสำหรับคลิกเพื่อย้อนกลับไปหน้าเข้าสู่ระบบ <br />
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
<!-- </div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.dd {
|
|
||||||
background-color: rgb(255, 255, 255);
|
|
||||||
border: 1px solid red;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0px 5px;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,129 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
const rightDrawerOpen = ref(false);
|
|
||||||
const text = ref("");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- <div class="row col-12">
|
|
||||||
<div class="col-9">
|
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<!-- <q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="custom-topic text-dark">
|
|
||||||
<div style="font-size: 16px; font-weight: 700">
|
|
||||||
การเข้าสู่ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card> -->
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="border-radius: 0px 0px 8px 8px"
|
|
||||||
>
|
|
||||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
|
||||||
1.3 การลงทะเบียนผู้ใช้งานใหม่
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="col-12 q-gutter-xs"
|
|
||||||
style="margin-top: 20px; margin-left: 10px"
|
|
||||||
>
|
|
||||||
-
|
|
||||||
หากเป็นผู้ใช้งานใหม่ต้องการที่จะลงทะเบียนเพื่อใช้งานระบบทรัพยากรบุคคคลกรุงเทพมหานครให้ทำการใช้เมาส์คลิก
|
|
||||||
<span
|
|
||||||
style="
|
|
||||||
color: #0082ca;
|
|
||||||
background-color: #ffffff;
|
|
||||||
border: 1px solid #0082ca;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0px 5px;
|
|
||||||
font-size: 13px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
ลงทะเบียน
|
|
||||||
</span>
|
|
||||||
|
|
||||||
จากนั้นระบบแสดงหน้าลงทะเบียนผู้ใช้งาน
|
|
||||||
ทำการกรอกข้อมูลให้ครบตามที่ระบบแนะนำ จากนั้นทำการใช้เมาส์คลิก
|
|
||||||
<span
|
|
||||||
style="
|
|
||||||
background-color: #00aa86;
|
|
||||||
border: 1px solid #00aa86;
|
|
||||||
color: white;
|
|
||||||
font-size: 13px;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0px 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
ลงทะเบียน
|
|
||||||
</span>
|
|
||||||
หรือหากไม่ต้องการลงทะเบียนผู้ใช้งานแล้วให้ทำการคลิกที่
|
|
||||||
<span
|
|
||||||
style="
|
|
||||||
background-color: #ffffff;
|
|
||||||
border: 1px solid #0082ca;
|
|
||||||
color: #0082ca;
|
|
||||||
font-size: 13px;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0px 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
« กลับหน้าเข้าสู่ระบบ
|
|
||||||
</span>
|
|
||||||
เพื่อยกเลิกการลงทะเบียนผู้ใช้งานใหม่หรือย้อนกลับไปยังหน้าเข้าสู่ระบบ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/01_login/4_newuser/1-5.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 1 – 5 แสดงการกรอกข้อมูลลงทะเบียนผู้ใช้งานใหม่
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับกรอกชื่อผู้ลงทะเบียนใช้งาน <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับกรอกนามสกุลผู้ลงทะเบียนใช้งาน <br />
|
|
||||||
หมายเลข 3 ช่องสำหรับกรอกอีเมลผู้ลงทะเบียนใช้งาน <br />
|
|
||||||
หมายเลข 4 ช่องสำหรับกรอกชื่อผู้ใช้งานของผู้ลงทะเบียนใช้งาน <br />
|
|
||||||
หมายเลข 5 ช่องสำหรับกรอกตั้งรหัสผ่านสำหรับใช้งานระบบ <br />
|
|
||||||
หมายเลข 6 ช่องสำหรับกรอกยืนยันรหัสผ่านสำหรับใช้งานระบบ <br />
|
|
||||||
หมายเลข 7 ปุ่มสำหรับคลิกยืนยันการลงทะเบียนผู้ใช้งาน <br />
|
|
||||||
หมายเลข 8 ปุ่มสำหรับคลิกเพื่อย้อนกลับหน้าเข้าสู่ระบบ <br />
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
<!-- </div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,91 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
const rightDrawerOpen = ref(false);
|
|
||||||
const text = ref("");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- <div class="row col-12">
|
|
||||||
<div class="col-9">
|
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<!-- <q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="custom-topic text-dark">
|
|
||||||
<div style="font-size: 16px; font-weight: 700">
|
|
||||||
การเข้าสู่ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card> -->
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="border-radius: 0px 0px 8px 8px"
|
|
||||||
>
|
|
||||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
|
||||||
1.4 การออกจากระบบ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12 drop" style="margin-top: 20px; margin-left: 10px; align-items: center;">
|
|
||||||
- หากต้องการออกจากระบบหลังจากที่ใช้งานเสร็จแล้ว ให้ทำการใช้เมาส์คลิก
|
|
||||||
<q-icon name="arrow_drop_down" size="sm"/>
|
|
||||||
ระบบแสดงเมนูย่อยให้ทำการคลิก
|
|
||||||
<span
|
|
||||||
style="
|
|
||||||
background-color: #00aa86;
|
|
||||||
border: 1px solid #00aa86;
|
|
||||||
color: white;
|
|
||||||
font-size: 13px;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0px 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
ออกจากระบบ
|
|
||||||
</span>
|
|
||||||
เพื่อออกจากระบบ ดังรูป
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/01_login/5_logout/1-6.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 1 – 6 แสดงการออกจากระบบผู้ใช้งาน
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</q-card>
|
|
||||||
<!-- </div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.drop {
|
|
||||||
margin-left: 0px;
|
|
||||||
margin-top: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,186 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
const rightDrawerOpen = ref(false);
|
|
||||||
const text = ref("");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- <div class="row col-12">
|
|
||||||
<div class="col-9">
|
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="custom-topic text-dark">
|
|
||||||
<div style="font-size: 16px; font-weight: 700">
|
|
||||||
การเข้าสู่ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card> -->
|
|
||||||
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="border-radius: 0px 0px 8px 8px"
|
|
||||||
>
|
|
||||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
|
||||||
1.5 การแสดงแจ้งเตือน
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12 q-gutter-xs" style="margin-top: 20px; margin-left: 10px; align-items: center;">
|
|
||||||
- ระบบจะทำการแจ้งเตือนการขอคำร้องแก้ไขข้อมูลต่างๆ ให้ทำการใช้เมาส์คลิก
|
|
||||||
<q-icon name="mdi-bell" class="bell" style="margin: 0 5px;"/>
|
|
||||||
เพื่อดูการแจ้งเตือนหรือการขอคำร้องต่างๆ จากนั้นทำการคลิกเข้าไปในการขอคำร้อง
|
|
||||||
ระบบจะทำการแสดงข้อมูลรายละเอียดการขอคำร้องต่างๆ ให้ โดยที่สามารถทำการคลิก
|
|
||||||
<q-icon name="mdi-close" style="margin: 0 5px;"/> เพื่อลบแจ้งเตือนข้อมูลคำร้องทิ้งเพื่อลบแจ้งเตือนข้อมูลคำร้องทิ้ง
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/01_login/6_noti/1-7.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 1 – 7 แสดงการดูการแจ้งเตือนคำร้องขอต่างๆ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12 q-gutter-xs" style="margin-top: 50px; margin-left: 10px; align-items: center;">
|
|
||||||
- หากต้องการดูข้อมูลการร้องขอต่างๆ ให้ทำการใช้เมาส์คลิกเลือกการแจ้งเตือนจากนั้นระบบจะทำการแสดงข้อมูลการแจ้งเตือนเป็นกล่องข้อความ โดยที่สามารถทำการลบข้อมูลร้องขอโดยการคลิก
|
|
||||||
|
|
||||||
<q-icon name="mdi-trash-can" style="margin: 0 5px;"/>
|
|
||||||
หรือหากต้องการจัดการข้อมูลคำร้องอื่นๆ ให้ทำการคลิก
|
|
||||||
<q-icon name="mdi-dots-vertical" style="margin: 0 5px;"/>
|
|
||||||
หรือหากจะย้อนกลับก็ทำการคลิก
|
|
||||||
<q-icon name="mdi-reply" style="margin: 0 5px;"/>
|
|
||||||
เพื่อย้อนกลับไปยังหน้าข้อมูลก่อนหน้านี้
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/01_login/6_noti/1-8.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 1 – 8 แสดงการดูรายละเอียดการแจ้งเตือน
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับแสดงข้อความการแจ้งเตือนคำร้องขอต่างๆ <br>
|
|
||||||
หมายเลข 2 ช่องแสดงข้อมูลรายละเอียดข้อความ <br>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12"
|
|
||||||
style="margin-top: 50px; margin-left: 10px; align-items: center;">
|
|
||||||
- การดาวน์โหลดไฟล์เอกสารแนบคำร้องขอต่างๆ เพื่อดูเอกสารเพิ่มเติมการร้องขอให้ทำการใช้เมาส์คลิก
|
|
||||||
<span
|
|
||||||
style="
|
|
||||||
background-color: #E4F2FD;
|
|
||||||
border: 1px solid #E4F2FD;
|
|
||||||
color: #0082CA;
|
|
||||||
font-size: 13px;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0px 5px;
|
|
||||||
margin-left: 5px;
|
|
||||||
margin-right: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
ดาวน์โหลดทั้งหมด
|
|
||||||
</span>
|
|
||||||
จากนั้นระบบทำการดาวน์โหลดไฟล์เอกสารแนบหรือหากคำร้องขอไหนที่สำคัญสามารถทำการใช้เมาส์คลิก
|
|
||||||
<q-icon name="mdi-star" style="margin: 0 5px; color: #919191;"/>
|
|
||||||
ให้เป็น
|
|
||||||
<q-icon name="mdi-star" style="margin: 0 5px; color: #ffee00;"/>
|
|
||||||
เพื่อให้ข้อความคำร้องนี้ขึ้นไปอยู่บนสุดของกล่องข้อความหรือให้ความสำคัญกับกล่องข้อความนี้ก่อน
|
|
||||||
</div>
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/01_login/6_noti/1-9.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 1 – 9 แสดงการดาวน์โหลดไฟล์เอกสารแนบคำร้อง
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ปุ่มดาวสำหรับคลิกเพื่อดันข้อความไว้บนสุด <br>
|
|
||||||
หมายเลข 2 ปุ่มสำหรับคลิกดาวน์โหลดไฟล์เอกสารแนบคำร้อง <br>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</q-card>
|
|
||||||
<!-- </div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bell{
|
|
||||||
background-color: rgba(217, 217, 217, 0.33);
|
|
||||||
border-radius: 50%;
|
|
||||||
padding: 5px;
|
|
||||||
color: #0909098c}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,70 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import Mainlogin1 from "../1_login/01_Main.vue";
|
|
||||||
import login from "../1_login/02_login.vue";
|
|
||||||
import Password from "../1_login/03_Password.vue";
|
|
||||||
import newuser from "../1_login/04_newuser.vue";
|
|
||||||
import logout from "../1_login/05_logout.vue";
|
|
||||||
import noti from "../1_login/06_noti.vue";
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div class="col-12 row">
|
|
||||||
<div
|
|
||||||
class="toptitle text-dark col-12 row items-center"
|
|
||||||
style="padding-top: 20px"
|
|
||||||
>
|
|
||||||
คู่มือการเข้าสู่ระบบ
|
|
||||||
</div>
|
|
||||||
<div class="row col-12 q-gutter-xs">
|
|
||||||
<div
|
|
||||||
id="Mainlogin"
|
|
||||||
name="1"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<Mainlogin1 />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="login"
|
|
||||||
name="2"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<login />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="Password"
|
|
||||||
name="3"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<Password />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="newuser"
|
|
||||||
name="4"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<newuser />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="logout"
|
|
||||||
name="5"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<logout />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="noti"
|
|
||||||
name="6"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<noti />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
|
||||||
|
|
@ -1,141 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
const rightDrawerOpen = ref(false);
|
|
||||||
const text = ref("");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- <div class="row col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="custom-topic text-dark">
|
|
||||||
<div style="font-size: 16px; font-weight: 700">ระบบข้อมูลหลัก</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="border-radius: 0px 0px 8px 8px"
|
|
||||||
>
|
|
||||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
|
||||||
- เมื่อเข้าสู่ระบบทรัพยากรบุคคล
|
|
||||||
ปรากฏหน้าจอหน้าแรกของระบบทรัพยาการบุคคล ให้กดเลือกแถบเมนู “ข้อมูลหลัก”
|
|
||||||
ดังรูปภาพ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/1_main/2-1.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
width: 255px;
|
|
||||||
height: 495px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 1 เมนูข้อมูลหลัก
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="col-12 "
|
|
||||||
style="margin-top: 50px; margin-left: 10px; align-items: center"
|
|
||||||
>
|
|
||||||
- เมื่อกดเลือกเมนู “ข้อมูลหลัก” ระบบปรากฏหน้าจัดการข้อมูลหลักดังรูปภาพ
|
|
||||||
</div>
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/1_main/2-2.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 2 หน้าจัดการข้อมูลหลัก
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
margin-left: 0px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
จากรูปที่ 2 - 2 แต่ละหมายเลขมีรายละเอียด ดังนี้ <br>
|
|
||||||
<div style="margin-left: 50px;">
|
|
||||||
หมายเลข 1 แถบเมนูหลักในหน้าจัดการข้อมูลหลัก <br>
|
|
||||||
หมายเลข 2 สรุปจำนวนข้อมูล <br>
|
|
||||||
หมายเลข 3 แถบเมนูย่อยของแต่ละเมนูหลัก <br>
|
|
||||||
หมายเลข 4 แถบเมนูเพิ่ม ลบหรือแก้ไขข้อมูล <br>
|
|
||||||
หมายเลข 5 รายละเอียดของเมนูย่อย <br>
|
|
||||||
หมายเลข 6 ดูประวัติแก้ไข <br>
|
|
||||||
หมายเลข 7 ช่องค้นหา เพื่อสืบค้นข้อมูลที่ต้องการ <br>
|
|
||||||
หมายเลข 8 คอลัมน์ กดเลือกรายการเพื่อให้ข้อมูลที่เลือกถูกซ่อน <br>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="col-12 "
|
|
||||||
style="margin-top: 50px; margin-left: 10px; align-items: center"
|
|
||||||
>
|
|
||||||
- เมื่อกดไอคอน
|
|
||||||
<q-icon name="mdi-pin" style="margin: 0 5px; color: #000000;"/>
|
|
||||||
แถบเมนูจัดการข้อมูลหลักและสรุปจำนวนข้อมูลจะถูกซ่อนดังรูปภาพ และเมื่อกดไอคอน
|
|
||||||
<q-icon name="mdi-pin" style="margin: 0 5px; color: #000000; transform: rotate(90deg);"/>
|
|
||||||
แถบเมนูจัดการข้อมูลหลักและสรุปจำนวนข้อมูลจะกลับมาแสดงเหมือนเดิม ดังรูปภาพที่ 2 – 2 ที่หมายเลข1 และ หมายเลข2
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/1_main/2-3.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 3 ซ่อนแถบเมนูและสรุปจำนวนข้อมูล
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</q-card>
|
|
||||||
<!-- </div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
@ -1,985 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
const rightDrawerOpen = ref(false);
|
|
||||||
const text = ref("");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- <div class="row col-12">
|
|
||||||
<div class="col-9">
|
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="custom-topic text-dark">
|
|
||||||
<div style="font-size: 16px; font-weight: 700">ระบบข้อมูลหลัก</div>
|
|
||||||
</div>
|
|
||||||
</q-card> -->
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="border-radius: 0px 0px 8px 8px"
|
|
||||||
>
|
|
||||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
|
||||||
2.1 ข้อมูลเกี่ยวกับบุคคล
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:20px;
|
|
||||||
margin-left: 10px">
|
|
||||||
|
|
||||||
- เมื่อกดเลือกเมนู “ข้อมูลเกี่ยวกับบุคคล” จะปรากฏรายละเอียดดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
|
|
||||||
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/2_about/2-4.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 4 รายละเอียดข้อมูลเกี่ยวกับบุคคล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12 ">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
|
|
||||||
- เลือกกดแถบเมนูย่อย “คำนำหน้าชื่อ, กลุ่มเลือด, เพศ, ศาสนา, สถานภาพ,
|
|
||||||
ระดับการศึกษา หรือจังหวัด” ระบบแสดงข้อมูล ซึ่งจะสามารถเพิ่ม
|
|
||||||
ลบหรือแก้ไขข้อมูลได้ดังรูปภาพ
|
|
||||||
ซึ่งเมนูย่อยอื่นๆสามารถทำตามขั้นตอนดังต่อไปนี้ได้
|
|
||||||
เนื่องจากมีวิธีการทำและการแสดงหน้าจอเหมือนกันและในกรอบสีแดงที่ช่องค้นหาสามารถสืบค้นข้อมูลและช่องคอลัมน์
|
|
||||||
สามารถเลือกรายการเพื่อซ่อน
|
|
||||||
</p>
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/2_about/2-5.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 5 แถบเมนูย่อยข้อมูลเกี่ยวกับบุคคล
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 แถบเมนูย่อยของข้อมูลเกี่ยวกับบุคคล ประกอบด้วย
|
|
||||||
คำนำหน้าชื่อ, กลุ่มเลือด,เพศ, ศาสนา, สถานภาพ,
|
|
||||||
ระดับการศึกษาและจังหวัด <br />
|
|
||||||
หมายเลข 2 ช่องค้นหาซึ่งสามารถสืบค้นข้อมูลที่ต้องการ
|
|
||||||
และช่องคอลัมน์สามารถกดเลือกแต่ละรายการที่ต้องการซ่อนได้ <br />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-pencil-outline"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
/>
|
|
||||||
เพื่อเพิ่ม ลบหรือแก้ไขข้อมูล ระบบแสดงดังรูปภาพ
|
|
||||||
โดยสามารถแก้ไขรายการที่มีอยู่ได้เลย
|
|
||||||
</p>
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/2_about/2-6.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 – 6 แก้ไขข้อมูล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon name="mdi-plus" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
|
||||||
เพื่อเพิ่มข้อมูลระบบจะปรากฏช่องเพื่อให้เพิ่มข้อมูลดังรูปภาพและเมื่อกรอกเพื่อเพิ่มข้อมูลเรียบร้อยแล้วให้กดไอคอน
|
|
||||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
|
||||||
เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการ-เผยแพร่) โดยการบันทึกเฉพาะข้อมูลร่างนั้นจะมีเพียงผู้ดูแลระบบเท่านั้นที่เห็นได้ สามารถกดไอคอน
|
|
||||||
<q-icon name="mdi-file-remove-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
|
||||||
เพื่อลบบันทึกร่างและสามารถกดไอคอน
|
|
||||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
|
||||||
เพื่อเผยแพร่ข้อมูล โดยในส่วนการเผยแพร่ข้อมูลนั้นผู้ดูแลระบบมีการตรวจสอบความถูกต้องเรียบร้อยแล้ว และได้ทำการเผยแพร่ให้เจ้าหน้าที่ทุกคนเห็นข้อมูล
|
|
||||||
</p>
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/2_about/2-7.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 7 เพิ่มข้อมูลในช่องที่ปรากฏ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ระบบแสดงช่องเพื่อให้เพิ่มข้อมูล
|
|
||||||
<div style="margin-left: 50px;">
|
|
||||||
- เมื่อไม่ต้องการเพิ่มข้อมูลแล้วให้กดไอคอน
|
|
||||||
<q-icon name="mdi-trash-can-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
|
||||||
เพื่อลบช่องเพิ่มข้อมูล <br>
|
|
||||||
- เมื่อต้องการปิดสถานะให้กดตรงไอคอน
|
|
||||||
<div class="q-toggle__inner relative-position non-selectable q-toggle__inner--truthy text-positive" aria-hidden="true"
|
|
||||||
style="font-size: 24px; display: inline-block; padding: 0 0.3em !important ; height: 0.35em;">
|
|
||||||
<div class="q-toggle__thumb absolute flex flex-center no-wrap" style="top: -0.07em;"></div>
|
|
||||||
<div class="q-toggle__track"></div>
|
|
||||||
</div>
|
|
||||||
เพื่อที่จะไม่แสดงข้อมูลนั้นในหน้าอื่นจากนั้นให้กดไอคอน
|
|
||||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
|
||||||
เพื่อบันทึกร่าง และกดไอคอน
|
|
||||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
|
||||||
เพื่อเผยแพร่ข้อมูล
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- เมื่อกดไอคอน
|
|
||||||
<q-icon name="mdi-plus" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
|
||||||
เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการเผยแพร่) ระบบจะปรากฏป้าย “บันทึกข้อมูลร่างสำเร็จ” ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/2_about/2-8.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 8 ป้าย “บันทึกข้อมูลร่างสำเร็จ
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon name="mdi-file-remove-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
|
||||||
เพื่อลบบันทึกร่าง ระบบจะขึ้นป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?” ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
<q-img class="col-12"
|
|
||||||
src="@/assets/manual/02_data/2_about/2-9.png"
|
|
||||||
style="
|
|
||||||
max-width: 70%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 9 ป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?”
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- เมื่อกดปุ่ม “ลบบันทึก” ระบบปรากฏป้าย “ลบข้อมูลร่างสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม “ยกเลิก” ระบบจะไม่ทำการลบข้อมูลร่าง
|
|
||||||
</p>
|
|
||||||
<q-img class="col-12"
|
|
||||||
src="@/assets/manual/02_data/2_about/2-10.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 10 ป้าย “ลบข้อมูลร่างสำเร็จ”
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ระบบแสดงสถานะ “บันทึกข้อมูลร่างสำเร็จ” เมื่อทำการกดคลิกบันทึกข้อมูล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
|
||||||
เพื่อเผยแพร่ข้อมูลระบบปรากฏป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?” ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
<q-img class="col-12"
|
|
||||||
src="@/assets/manual/02_data/2_about/2-11.png"
|
|
||||||
style="
|
|
||||||
max-width: 70%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 11 ป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?”
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- เมื่อกดปุ่ม “เผยแพร่” ระบบปรากฏป้าย “เผยแพร่ข้อมูลสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการเผยแพร่ข้อมูล
|
|
||||||
</p>
|
|
||||||
<q-img class="col-12"
|
|
||||||
src="@/assets/manual/02_data/2_about/2-12.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 12 ป้าย “เผยแพร่ข้อมูลสำเร็จ”
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ระบบแสดงสถานะ “เผยแพร่ข้อมูลสำเร็จ” เมื่อทำการกดคลิกเผยแพร่
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon name="mdi-history" style="margin: 0 5px; color: #31ccec;" size="xs"/>
|
|
||||||
เพื่อดูประวัติข้อมูลแก้ไข ดังรูปภาพ ในกรอบสีแดงสามารถกรอกที่ช่องค้นหาเพื่อสืบค้นข้อมูลหรือที่ช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
|
|
||||||
</p>
|
|
||||||
<q-img class="col-12"
|
|
||||||
src="@/assets/manual/02_data/2_about/2-13.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 13 ประวัติแก้ไขข้อมูล
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับค้นหาและเลือกแสดงคอลัมน์ข้อมูลประวัติแก้ไขคำนำหน้าชื่อ
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- กดแถบเมนูย่อย “จังหวัด” ระบบจะแสดงข้อมูลระดับจังหวัด ซึ่งจะสามารถเพิ่ม ลบหรือแก้ไขข้อมูลจังหวัด ได้ดังรูปภาพ และในกรอบสีแดงที่ช่องค้นหาสามารถสืบค้นข้อมูลและช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน ซึ่งในหน้าข้อมูลนี้สามารถกดเลือกรายการจังหวัดเพื่อทำการเพิ่มลบหรือแก้ไขเขต/อำเภอและแขวง/ตำบลได้
|
|
||||||
</p>
|
|
||||||
<q-img class="col-12"
|
|
||||||
src="@/assets/manual/02_data/2_about/2-14.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 14 หน้ารายละเอียดจังหวัด
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon name="mdi-pencil-outline" style="margin: 0 5px; color: #00aa86"/>
|
|
||||||
เพื่อเพิ่ม ลบหรือแก้ไขข้อมูล ระบบแสดงดังรูป โดยสามารถเลือกแก้ไขรายการที่มีอยู่ได้
|
|
||||||
</p>
|
|
||||||
<q-img class="col-12"
|
|
||||||
src="@/assets/manual/02_data/2_about/2-15.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 15 แก้ไขจังหวัด
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon name="mdi-plus" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
|
||||||
เพื่อเพิ่มข้อมูลระบบจะปรากฏช่องเพื่อให้เพิ่มข้อมูลดังรูปภาพและเมื่อกรอกเพื่อเพิ่มข้อมูลเรียบร้อยแล้วให้กดไอคอน
|
|
||||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
|
||||||
เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการ-เผยแพร่) โดยการบันทึกเฉพาะข้อมูลร่างนั้นจะมีเพียงผู้ดูแลระบบเท่านั้นที่เห็นได้ สามารถกดไอคอน
|
|
||||||
<q-icon name="mdi-file-remove-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
|
||||||
เพื่อลบบันทึกร่างและสามารถกดไอคอน
|
|
||||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
|
||||||
เพื่อเผยแพร่ข้อมูล โดยในส่วนการเผยแพร่ข้อมูลนั้นผู้ดูแลระบบมีการตรวจสอบความถูกต้องเรียบร้อยแล้ว และได้ทำการเผยแพร่ให้เจ้าหน้าที่ทุกคนเห็นข้อมูล
|
|
||||||
</p>
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/2_about/2-16.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 16 เพิ่มข้อมูลจังหวัดในช่องที่ปรากฏ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับกรอกเพิ่มข้อมูลจังหวัด
|
|
||||||
<div style="margin-left: 50px;">
|
|
||||||
- เมื่อไม่ต้องการเพิ่มข้อมูลแล้วให้กดไอคอน
|
|
||||||
<q-icon name="mdi-trash-can-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
|
||||||
เพื่อลบช่องเพิ่มข้อมูล <br>
|
|
||||||
- เมื่อต้องการปิดสถานะให้กดตรงไอคอน
|
|
||||||
<div class="q-toggle__inner relative-position non-selectable q-toggle__inner--truthy text-positive" aria-hidden="true"
|
|
||||||
style="font-size: 24px; display: inline-block; padding: 0 0.3em !important ; height: 0.35em;">
|
|
||||||
<div class="q-toggle__thumb absolute flex flex-center no-wrap" style="top: -0.07em;"></div>
|
|
||||||
<div class="q-toggle__track"></div>
|
|
||||||
</div>
|
|
||||||
เพื่อที่จะไม่แสดงข้อมูลนั้นในหน้าอื่นจากนั้นให้กดไอคอน
|
|
||||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
|
||||||
เพื่อบันทึกร่าง และกดไอคอน
|
|
||||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
|
||||||
เพื่อเผยแพร่ข้อมูล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- เมื่อกดไอคอน
|
|
||||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
|
||||||
เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการเผยแพร่) ระบบปรากฏป้าย “บันทึกข้อมูลร่างสำเร็จ” ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
<q-img class="col-12"
|
|
||||||
src="@/assets/manual/02_data/2_about/2-17.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 17 ป้าย “บันทึกข้อมูลร่างสำเร็จ”
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon name="mdi-file-remove-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
|
||||||
เพื่อลบบันทึกร่าง ระบบปรากฏป้าย “ต้องการลบข้อมูลร่างนี้หรือไม่?” ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<q-img class="col-12"
|
|
||||||
src="@/assets/manual/02_data/2_about/2-18.png"
|
|
||||||
style="
|
|
||||||
max-width: 70%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 18 ป้าย “ต้องการลบข้อมูลร่างนี้หรือไม่?”
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- เมื่อกดปุ่ม “ลบบันทึก” ระบบปรากฏป้าย “ลบข้อมูลร่างสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม “ยกเลิก” ระบบจะไม่ทำการลบข้อมูลร่าง
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<q-img class="col-12"
|
|
||||||
src="@/assets/manual/02_data/2_about/2-19.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 19 ป้าย “ลบข้อมูลร่างสำเร็จ”
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ระบบแสดงสถานะ “ลบข้อมูลร่างสำเร็จ” เมื่อทำการกดคลิกยืนยันการลบข้อมูลร่าง
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
|
||||||
เพื่อเผยแพร่ข้อมูลระบบปรากฏป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?” ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<q-img class="col-12"
|
|
||||||
src="@/assets/manual/02_data/2_about/2-20.png"
|
|
||||||
style="
|
|
||||||
max-width: 70%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 20 ป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?”
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- เมื่อกดปุ่ม “เผยแพร่” ระบบระบบปรากฏ “เผยแพร่ข้อมูลสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการเผยแพร่ข้อมูล
|
|
||||||
</p>
|
|
||||||
<q-img class="col-12"
|
|
||||||
src="@/assets/manual/02_data/2_about/2-21.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 21 ป้าย “เผยแพร่ข้อมูลสำเร็จ”
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ระบบแสดงสถานะ “เผยแพร่ข้อมูลสำเร็จ” เมื่อทำการทำคลิกเผยแพร่ข้อมูล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon name="mdi-history" style="margin: 0 5px; color: #31ccec;" size="xs"/>
|
|
||||||
เพื่อดูประวัติข้อมูลแก้ไข ดังรูปภาพ ในกรอบสีแดงสามารถกรอกที่ช่องค้นหาเพื่อสืบค้นข้อมูลหรือที่ช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
|
|
||||||
</p>
|
|
||||||
<q-img class="col-12"
|
|
||||||
src="@/assets/manual/02_data/2_about/2-22.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 22 ประวัติแก้ไขจังหวัด
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับกรอกค้นหาและเลือกคอลัมน์สำหรับแสดงข้อมูลประวัติแก้ไขจังหวัด
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon name="mdi-chevron-right" style="margin: 0 5px; color: hsl(0, 0%, 0%);" size="xs"/>
|
|
||||||
ที่แถบรายการจังหวัดเพื่อดูรายการเขต/อำเภอของจังหวัดนั้นๆ ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
<q-img class="col-12"
|
|
||||||
src="@/assets/manual/02_data/2_about/2-23.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 23 เลือกรายการเพื่อดูข้อมูลเขต/อำเภอ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 รายชื่อสำหรับคลิกเพื่อดูข้อมูลเพิ่มเติมของจังหวัดนั้นๆ ที่ทำการคลิกเลือก
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon name="mdi-chevron-right" style="margin: 0 5px; color: hsl(0, 0%, 0%);" size="xs"/>
|
|
||||||
ที่แถบรายการจังหวัดเพื่อดูรายการเขต/อำเภอของจังหวัดนั้นๆ ระบบจะแสดงรายการเขต/อำเภอ ดังรูปภาพและในกรอบสีแดงที่ช่องค้นหาสามารถสืบค้นข้อมูลและช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
|
|
||||||
</p>
|
|
||||||
<q-img class="col-12"
|
|
||||||
src="@/assets/manual/02_data/2_about/2-24.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 24 รายการเขต/อำเภอ
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon name="mdi-pencil-outline" style="margin: 0 5px; color: #02A998;" size="xs"/>
|
|
||||||
เพื่อเพิ่ม ลบหรือแก้ไขข้อมูล ระบบแสดงดังรูป โดยสามารถเลือกแก้ไขรายการที่มีอยู่ได้
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<q-img class="col-12"
|
|
||||||
src="@/assets/manual/02_data/2_about/2-25.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 25 แก้ไขเขต/อำเภอ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับค้นหาและเลือกแสดงคอลัมน์ข้อมูลประวัติแก้ไขคำนำหน้าชื่อ
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon name="mdi-plus" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
|
||||||
เพื่อเพิ่มข้อมูลระบบจะปรากฏช่องเพื่อให้เพิ่มข้อมูลดังรูปภาพ เมื่อกรอกเพื่อเพิ่มข้อมูลเรียบร้อยแล้วให้กดไอคอน
|
|
||||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
|
||||||
เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการเผยแพร่) โดยการบันทึกเฉพาะข้อมูลร่างนั้นจะมีเพียงผู้ดูแลระบบเท่านั้นที่เห็นได้ สามารถกดไอคอน
|
|
||||||
<q-icon name="mdi-file-remove-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
|
||||||
เพื่อลบบันทึกร่างและสามารถกดไอคอน
|
|
||||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
|
||||||
เพื่อเผยแพร่ข้อมูลโดยในส่วนการเผยแพร่ข้อมูลนั้นผู้ดูแลระบบมีการตรวจสอบความถูกต้องเรียบร้อยแล้ว และได้ทำการเผยแพร่ให้เจ้าหน้าที่ทุกคนเห็นข้อมูล
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/2_about/2-26.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 26 เพิ่มข้อมูลเขต/อำเภอในช่องที่ปรากฏ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับกรอกเพื่อเพิ่มข้อมูลเขต
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon name="mdi-chevron-right" style="margin: 0 5px; color: hsl(0, 0%, 0%);" size="xs"/>
|
|
||||||
ที่แถบรายการเขต/อำเภอเพื่อดูรายการแขวง/ตำบลของจังหวัดนั้นๆ ดังภาพ
|
|
||||||
</p>
|
|
||||||
<q-img class="col-12"
|
|
||||||
src="@/assets/manual/02_data/2_about/2-27.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 27 เลือกรายการเพื่อดูข้อมูลแขวง/ตำบล
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 รายชื่อสำหรับคลิกเพื่อดูข้อมูลเพิ่มเติมของเขต/อำเภอนั้นๆ ที่ทำการคลิกเลือก
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon name="mdi-chevron-right" style="margin: 0 5px; color: hsl(0, 0%, 0%);" size="xs"/>
|
|
||||||
ที่แถบรายการเขต/อำเภอเพื่อดูรายการแขวง/ตำบลของเขต/อำเภอนั้นๆระบบจะแสดงรายการแขวง/ตำบล ดังรูปภาพ และในกรอบสีแดงที่ช่องค้นหาสามารถสืบค้นข้อมูลและช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<q-img class="col-12"
|
|
||||||
src="@/assets/manual/02_data/2_about/2-28.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 28 รายการแขวง/ตำบล
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 แถบสำหรับการเข้าถึงในส่วนของการจัดการข้อมูลจังหวัด การจัดการข้อมูลเขต และการจัดการข้อมูลแขวง/ตำบล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon name="mdi-pencil-outline" style="margin: 0 5px; color: #02A998;" size="xs"/>
|
|
||||||
เพื่อเพิ่ม ลบหรือแก้ไขข้อมูล ระบบแสดงดังรูปภาพ โดยสามารถเลือกแก้ไขรายการที่มีอยู่ได้
|
|
||||||
</p>
|
|
||||||
<q-img class="col-12"
|
|
||||||
src="@/assets/manual/02_data/2_about/2-29.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 29 แก้ไขแขวง/ตำบล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon name="mdi-plus" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
|
||||||
เพื่อเพิ่มข้อมูลระบบจะปรากฏช่องเพื่อให้เพิ่มข้อมูลดังรูปภาพ เมื่อกรอกเพื่อเพิ่มข้อมูลเรียบร้อยแล้วให้กดไอคอน
|
|
||||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
|
||||||
เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการเผยแพร่) โดยการบันทึกเฉพาะข้อมูลร่างนั้นจะมีเพียงผู้ดูแลระบบเท่านั้นที่เห็นได้ สามารถกดไอคอน
|
|
||||||
<q-icon name="mdi-file-remove-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
|
||||||
เพื่อลบบันทึกร่างและสามารถกดไอคอน
|
|
||||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
|
||||||
เพื่อเผยแพร่ข้อมูลโดยในส่วนการเผยแพร่ข้อมูลนั้นผู้ดูแลระบบมีการตรวจสอบความถูกต้องเรียบร้อยแล้ว และได้ทำการเผยแพร่ให้เจ้าหน้าที่ทุกคนเห็นข้อมูล
|
|
||||||
</p>
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/2_about/2-30.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 30 เพิ่มข้อมูลแขวง/ตำบลในช่องที่ปรากฏ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับกรอกเพิ่มข้อมูลแขวง/ตำบล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
<!-- </div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bell {
|
|
||||||
background-color: #dadada;
|
|
||||||
border-radius: 50%;
|
|
||||||
padding: 5px;
|
|
||||||
color: #747474;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,381 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
const rightDrawerOpen = ref(false);
|
|
||||||
const text = ref("");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- <div class="row col-12">
|
|
||||||
<div class="col-9">
|
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="custom-topic text-dark">
|
|
||||||
<div style="font-size: 16px; font-weight: 700">ระบบข้อมูลหลัก</div>
|
|
||||||
</div>
|
|
||||||
</q-card> -->
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="border-radius: 0px 0px 8px 8px"
|
|
||||||
>
|
|
||||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
|
||||||
2.2 ข้อมูลโครงสร้างหน่วยงาน
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
|
||||||
- เมื่อกดเลือกเมนู “ข้อมูลโครงสร้างหน่วยงาน” จะปรากฏรายละเอียดดังรูปภาพ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/3_gov/2-31.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 31 รายละเอียดข้อมูลโครงสร้างหน่วยงาน
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p>
|
|
||||||
- เลือกกดแถบเมนูย่อย “ชื่อหน่วยงาน/ส่วนราชการ, ชื่อย่อหน่วยงาน/ส่วนราชการ, ประเภทของหน่วยงาน/ส่วนราชการ, ระดับของหน่วยงาน/ส่วนราชการ,สถานะของหน่วยงาน/ส่วนราชการ, หมายเลขโทรศัพท์ที่ติดต่อจากภายในหน่วยงาน/ส่วนราชการ,
|
|
||||||
หมายเลขโทรศัพท์ที่ติดต่อจากภายนอกหน่วยงาน/ส่วนราชการหรือหมายเลขโทรสาร” ระบบแสดงข้อมูล
|
|
||||||
เลือกซึ่งจะสามารถเพิ่ม ลบหรือแก้ไขข้อมูลได้ดังรูปภาพ ซึ่งเมนูย่อยอื่นๆสามารถทำตามขั้นตอนดังต่อไปนี้ได้ เนื่องจากมีวิธีการทำและการแสดงหน้าจอเหมือนกันและในกรอบสีแดง
|
|
||||||
ที่ช่องค้นหาสามารถสืบค้นข้อมูลและช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/3_gov/2-32.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 32 แถบเมนูย่อยข้อมูลโครงสร้างหน่วยงาน
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12"
|
|
||||||
style="margin-top: -;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: rgb(243, 243, 243);
|
|
||||||
font-size: 14px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 คอลัมน์แสดงชื่อคอลัมน์แสดงข้อมูลย่อยของข้อมูลโครงสร้างหน่วยงาน <br>
|
|
||||||
หมายเลข 2 ช่องสำหรับกรอกค้นหาและเลือกคอลัมน์แสดงข้อมูลตามที่ได้ได้การค้นหา
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon name="mdi-pencil-outline" style="margin: 0 5px; color: #02A998;" size="xs"/>
|
|
||||||
เพื่อเพิ่ม ลบหรือแก้ไขข้อมูล ระบบแสดงดังรูปภาพ โดยสามารถแก้ไขรายการที่มีอยู่ได้เลย
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/3_gov/2-33.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 – 33 แก้ไขข้อมูล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12" >
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon name="mdi-plus" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
|
||||||
เพื่อเพิ่มข้อมูล ระบบจะปรากฏช่องเพื่อให้เพิ่มข้อมูลดังรูปภาพ เพื่อเพิ่มข้อมูลระบบจะปรากฏช่องเพื่อให้เพิ่มข้อมูลดังรูปภาพและเมื่อกรอกเพื่อเพิ่มข้อมูลเรียบร้อยแล้วให้กดไอคอน
|
|
||||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
|
||||||
เพื่อบันทึกร่าง(ข้อมูลยังไม่มีการเผยแพร่) สามารถกดไอคอน
|
|
||||||
<q-icon name="mdi-trash-can-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
|
||||||
เพื่อลบบันทึกร่างและสามารถกดไอคอน
|
|
||||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
|
||||||
เพื่อเผยแพร่ข้อมูล
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/3_gov/2-34.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 34 เพิ่มข้อมูลหน่วยงานในช่องที่ปรากฏ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับกรอกเพิ่มข้อมูลชื่อหน่วยงาน/หน่วยงานต้นสังกัด/ส่วนรายการต้นสังกัด
|
|
||||||
<div style="margin-left: 50px;">
|
|
||||||
- เมื่อไม่ต้องการเพิ่มข้อมูลแล้วให้กดไอคอน
|
|
||||||
<q-icon name="mdi-trash-can-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
|
||||||
เพื่อลบช่องเพิ่มข้อมูล <br>
|
|
||||||
- เมื่อต้องการปิดสถานะให้กดตรงไอคอน
|
|
||||||
<div class="q-toggle__inner relative-position non-selectable q-toggle__inner--truthy text-positive" aria-hidden="true"
|
|
||||||
style="font-size: 24px; display: inline-block; padding: 0 0.3em !important ; height: 0.35em;">
|
|
||||||
<div class="q-toggle__thumb absolute flex flex-center no-wrap" style="top: -0.08em;"></div>
|
|
||||||
<div class="q-toggle__track"></div>
|
|
||||||
</div>
|
|
||||||
เพื่อที่จะไม่แสดงข้อมูลนั้นในหน้าอื่นจากนั้นให้กดไอคอน
|
|
||||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
|
||||||
เพื่อบันทึกร่าง และกดไอคอน
|
|
||||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
|
||||||
เพื่อเผยแพร่ข้อมูล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p>
|
|
||||||
- เมื่อกดไอคอน
|
|
||||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
|
||||||
เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการเผยแพร่) ระบบปรากฏป้าย “บันทึกข้อมูลร่างสำเร็จ”
|
|
||||||
ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/3_gov/2-35.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 35 ป้าย “บันทึกข้อมูลร่างสำเร็จ”
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12"
|
|
||||||
style="margin-top: -;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: rgb(243, 243, 243);
|
|
||||||
font-size: 14px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ระบบแสดงสถานะ “บันทึกข้อมูลร่างสำเร็จ” หลังจากทำการกรอกเพิ่มข้อมูลและทำการกดคลิกบันทึกข้อมูล <br>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12"
|
|
||||||
style="margin-top: 50px; margin-left: 10px; ">
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon name="mdi-file-remove-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
|
||||||
เพื่อลบบันทึกร่าง ระบบจะขึ้นป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?” ดังรูปภาพ
|
|
||||||
|
|
||||||
|
|
||||||
<q-img class="col-12"
|
|
||||||
src="@/assets/manual/02_data/3_gov/2-36.png"
|
|
||||||
style="
|
|
||||||
max-width: 70%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 36 ป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?”
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p>
|
|
||||||
- เมื่อกดปุ่ม “ลบบันทึก” ระบบปรากฏป้าย “ลบข้อมูลร่างสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม “ยกเลิก” ระบบจะไม่ทำการลบข้อมูลร่าง
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/3_gov/2-37.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 37 ป้าย “ลบข้อมูลร่างสำเร็จ”
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12"
|
|
||||||
style="margin-top: -;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: rgb(243, 243, 243);
|
|
||||||
font-size: 14px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ระบบแสดงสถานะ “ลบข้อมูลสสำเร็จ” หลังจากคลิกยืนยันการลบข้อมูลร่าง </div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p>
|
|
||||||
- เมื่อกดปุ่ม “ลบบันทึก” ระบบปรากฏป้าย “ลบข้อมูลร่างสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม “ยกเลิก” ระบบจะไม่ทำการลบข้อมูลร่าง
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/3_gov/2-38.png"
|
|
||||||
style="
|
|
||||||
max-width: 70%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 38 ป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?” </div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p>
|
|
||||||
- เมื่อกดปุ่ม “เผยแพร่” ระบบปรากฏป้าย “เผยแพร่ข้อมูลสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการเผยแพร่ข้อมูล
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/3_gov/2-39.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 39 ป้าย “เผยแพร่ข้อมูลสำเร็จ”
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12"
|
|
||||||
style="margin-top: -;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: rgb(243, 243, 243);
|
|
||||||
font-size: 14px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ระบบแสดงสถานะ “เผยแพร่ข้อมูลสำเร็จ” หลังจากคลิกยืนยันการเผยแพร่ข้อมูล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p>
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon name="mdi-history" style="margin: 0 5px; color: #31ccec;" size="xs"/>
|
|
||||||
เพื่อดูประวัติข้อมูลแก้ไข ดังรูปภาพ ในกรอบสีแดงสามารถกรอกที่ช่องค้นหาเพื่อสืบค้นข้อมูลหรือที่ช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน </p>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/3_gov/2-40.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 40 หน้าประวัติแก้ไขข้อมูล
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12"
|
|
||||||
style="margin-top: -;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: rgb(243, 243, 243);
|
|
||||||
font-size: 14px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับกรอกค้นหาและเลือกคอลัมน์แสดงข้อมูลประวัติแก้ไขชื่อหน่วยงาน </div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</q-card>
|
|
||||||
<!-- </div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
@ -1,195 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue"
|
|
||||||
const rightDrawerOpen = ref(false)
|
|
||||||
const text = ref("")
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- <div class="row col-12">
|
|
||||||
<div class="col-9">
|
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="custom-topic text-dark">
|
|
||||||
<div style="font-size: 16px; font-weight: 700">ระบบข้อมูลหลัก</div>
|
|
||||||
</div>
|
|
||||||
</q-card> -->
|
|
||||||
|
|
||||||
<q-card flat bordered class="col-12 q-pa-md" style="border-radius: 0px 0px 8px 8px">
|
|
||||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">2.3 ข้อมูลตำแหน่งของข้าราชการ</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">- เมื่อกดเลือกเมนู “ข้อมูลตำแหน่งของข้าราชการ” จะปรากฏรายละเอียดดังรูปภาพ</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img src="@/assets/manual/02_data/4_officer/2-41.png" style="display: block; margin: 0 auto; border-radius: 20px; margin-top: 20px" />
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">รูปภาพที่ 2 - 41 รายละเอียดข้อมูลตำแหน่งของข้าราชการ</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p>
|
|
||||||
- เลือกกดแถบเมนูย่อย “ตำแหน่งประเภท, ชื่อสายงาน, ชื่อตำแหน่งสายงาน, ด้าน/สาขาของสายงาน, ระดับตำแหน่ง, ชื่อตำแหน่งทางการบริหาร, ด้านทางการบริหารหรือ สถานะของตำแหน่ง”
|
|
||||||
ระบบแสดงข้อมูลโดยสามารถเพิ่ม ลบหรือแก้ไขข้อมูลได้ดังรูปภาพ ซึ่งเมนูย่อยอื่นๆสามารถทำตามขั้นตอนดังต่อไปนี้ได้เนื่องจากมีวิธีการทำและการแสดง
|
|
||||||
หน้าจอเหมือนกันและในกรอบสีแดงที่ช่องค้นหาสามารถสืบค้นข้อมูลและช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img src="@/assets/manual/02_data/4_officer/2-42.png" style="display: block; margin: 0 auto; border-radius: 20px; margin-top: 20px" />
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">รูปภาพที่ 2 - 42 แถบเมนูข้อมูลตำแหน่งของข้าราชการ</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: -; padding: 10px; background-color: rgb(243, 243, 243); font-size: 14px; margin-top: 20px; border-radius: 5px">
|
|
||||||
หมายเลข 1 คอลัมน์แสดงชื่อคอลัมน์แสดงข้อมูลย่อยของข้อมูลตำแหน่งของข้าราชการ <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับกรอกค้นหาและเลือกคอลัมน์แสดงข้อมูลตามที่ได้ได้การค้นหา
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon name="mdi-pencil-outline" style="margin: 0 5px; color: #02a998" size="xs" />
|
|
||||||
เพื่อเพิ่ม ลบหรือแก้ไขข้อมูล ระบบแสดงดังรูปภาพ โดยสามารถแก้ไขรายการที่มีอยู่ได้เลย
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img src="@/assets/manual/02_data/4_officer/2-43.png" style="display: block; margin: 0 auto; border-radius: 20px; margin-top: 20px" />
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">รูปภาพที่ 2 - 43 แก้ไขหรือลบข้อมูล</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon name="mdi-plus" style="margin: 0 5px; color: #00aa86" size="xs" />
|
|
||||||
เพื่อเพิ่มข้อมูลระบบจะปรากฏช่องเพื่อให้เพิ่มข้อมูลดังรูปภาพและเมื่อกรอกเพื่อเพิ่มข้อมูลเรียบร้อยแล้วให้กดไอคอน
|
|
||||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435f" size="xs" />
|
|
||||||
เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการ-เผยแพร่) โดยการบันทึกเฉพาะข้อมูลร่างนั้นจะมีเพียงผู้ดูแลระบบเท่านั้นที่เห็นได้ สามารถกดไอคอน
|
|
||||||
<q-icon name="mdi-file-remove-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%)" size="xs" />
|
|
||||||
เพื่อลบบันทึกร่างและสามารถกดไอคอน
|
|
||||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435f" size="xs" />
|
|
||||||
เพื่อเผยแพร่ข้อมูล โดยในส่วนการเผยแพร่ข้อมูลนั้นผู้ดูแลระบบมีการตรวจสอบความถูกต้องเรียบร้อยแล้ว และได้ทำการเผยแพร่ให้เจ้าหน้าที่ทุกคนเห็นข้อมูล
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<q-img src="@/assets/manual/02_data/4_officer/2-44.png" style="max-width: 100%; display: block; margin: 0 auto; border-radius: 20px; margin-top: 20px; border: 1px solid #97b2de" />
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">รูปภาพที่ 2 - 44 เพิ่มข้อมูลในช่องที่ปรากฏ</div>
|
|
||||||
|
|
||||||
<div style="margin-top: 20px; padding: 10px; background-color: #f3f3f3; font-size: 14px; color: #000000; border-radius: 5px">
|
|
||||||
หมายเลข 1 ช่องสำหรับกรอกเพิ่มข้อมูลชื่อหน่วยงาน/หน่วยงานต้นสังกัด/ส่วนรายการต้นสังกัด
|
|
||||||
<div style="margin-left: 50px">
|
|
||||||
- เมื่อไม่ต้องการเพิ่มข้อมูลแล้วให้กดไอคอน
|
|
||||||
<q-icon name="mdi-trash-can-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%)" size="xs" />
|
|
||||||
เพื่อลบช่องเพิ่มข้อมูล <br />
|
|
||||||
- เมื่อต้องการปิดสถานะให้กดตรงไอคอน
|
|
||||||
<div
|
|
||||||
class="q-toggle__inner relative-position non-selectable q-toggle__inner--truthy text-positive"
|
|
||||||
aria-hidden="true"
|
|
||||||
style="font-size: 24px; display: inline-block; padding: 0 0.3em !important ; height: 0.35em"
|
|
||||||
>
|
|
||||||
<div class="q-toggle__thumb absolute flex flex-center no-wrap" style="top: -0.08em"></div>
|
|
||||||
<div class="q-toggle__track"></div>
|
|
||||||
</div>
|
|
||||||
เพื่อที่จะไม่แสดงข้อมูลนั้นในหน้าอื่นจากนั้นให้กดไอคอน
|
|
||||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435f" size="xs" />
|
|
||||||
เพื่อบันทึกร่าง และกดไอคอน
|
|
||||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435f" size="xs" />
|
|
||||||
เพื่อเผยแพร่ข้อมูล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p>
|
|
||||||
- เมื่อกดไอคอน
|
|
||||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435f" size="xs" />
|
|
||||||
เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการเผยแพร่) ระบบปรากฏป้าย “บันทึกข้อมูลร่างสำเร็จ” ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img src="@/assets/manual/02_data/4_officer/2-45.png" style="display: block; margin: 0 auto; border-radius: 20px; margin-top: 20px" />
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">รูปภาพที่ 2 - 45 ป้าย “บันทึกข้อมูลร่างสำเร็จ”</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: -; padding: 10px; background-color: rgb(243, 243, 243); font-size: 14px; margin-top: 20px; border-radius: 5px">
|
|
||||||
หมายเลข 1 ระบบแสดงสถานะ “บันทึกข้อมูลร่างสำเร็จ” หลังจากกดบันทึกเพิ่มข้อมูลตำแหน่งของข้าราชการ
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon name="mdi-file-remove-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%)" size="xs" />
|
|
||||||
เพื่อลบบันทึกร่าง ระบบจะขึ้นป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?” ดังรูปภาพ
|
|
||||||
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/02_data/4_officer/2-46.png"
|
|
||||||
style="max-width: 70%; display: block; margin: 0 auto; border-radius: 20px; margin-top: 20px; border: 1px solid #97b2de"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">รูปภาพที่ 2 - 46 ป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?”</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p>- เมื่อกดปุ่ม “ลบบันทึก” ระบบปรากฏป้าย “ลบข้อมูลร่างสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม “ยกเลิก” ระบบจะไม่ทำการลบข้อมูลร่าง</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img src="@/assets/manual/02_data/4_officer/2-47.png" style="display: block; margin: 0 auto; border-radius: 20px; margin-top: 20px" />
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">รูปภาพที่ 2 - 47 ป้าย “ลบข้อมูลร่างสำเร็จ”</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: -; padding: 10px; background-color: rgb(243, 243, 243); font-size: 14px; margin-top: 20px; border-radius: 5px">
|
|
||||||
หมายเลข 1 ระบบแสดงสถานะ “ลบข้อมูลสำเร็จ” หลังจากคลิกยืนยันการลบข้อมูลตำแหน่งของข้าราชการ
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p>
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435f" size="xs" />
|
|
||||||
เพื่อเผยแพร่ข้อมูลระบบปรากฏป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?” ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img src="@/assets/manual/02_data/4_officer/2-48.png" style="max-width: 70%; display: block; margin: 0 auto; border-radius: 20px; margin-top: 20px; border: 1px solid #97b2de" />
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">รูปภาพที่ 2 - 48 ป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?”</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p>- เมื่อกดปุ่ม “เผยแพร่” ระบบปรากฏป้าย “เผยแพร่ข้อมูลสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการเผยแพร่ข้อมูล</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img src="@/assets/manual/02_data/4_officer/2-49.png" style="display: block; margin: 0 auto; border-radius: 20px; margin-top: 20px" />
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">รูปภาพที่ 2 - 49 ป้าย “เผยแพร่ข้อมูลสำเร็จ”</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: -; padding: 10px; background-color: rgb(243, 243, 243); font-size: 14px; margin-top: 20px; border-radius: 5px">
|
|
||||||
หมายเลข 1 ระบบแสดงสถานะ “เผยแพร่ข้อมูลสำเร็จ” หลังจากคลิกเผยแพร่ข้อมูลตำแหน่ง
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p>
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon name="mdi-history" style="margin: 0 5px; color: #31ccec" size="xs" />
|
|
||||||
เพื่อดูประวัติข้อมูลแก้ไข ดังรูปภาพ ในกรอบสีแดงสามารถกรอกที่ช่องค้นหาเพื่อสืบค้นข้อมูลหรือที่ช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img src="@/assets/manual/02_data/4_officer/2-50.png" style="display: block; margin: 0 auto; border-radius: 20px; margin-top: 20px" />
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">รูปภาพที่ 2 - 50 หน้าประวัติแก้ไขข้อมูล</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: -; padding: 10px; background-color: rgb(243, 243, 243); font-size: 14px; margin-top: 20px; border-radius: 5px">
|
|
||||||
หมายเลข 1 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาและเลือกคอลัมน์แสดงข้อมูลประวัติแก้ไขชื่อตำแหน่งของข้าราชการที่ทำการกรอกค้นหา
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
<!-- </div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,374 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
const rightDrawerOpen = ref(false);
|
|
||||||
const text = ref("");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- <div class="row col-12">
|
|
||||||
<div class="col-9">
|
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="custom-topic text-dark">
|
|
||||||
<div style="font-size: 16px; font-weight: 700">ระบบข้อมูลหลัก</div>
|
|
||||||
</div>
|
|
||||||
</q-card> -->
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="border-radius: 0px 0px 8px 8px"
|
|
||||||
>
|
|
||||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
|
||||||
2.4 ข้อมูลตำแหน่งของลูกจ้าง
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
|
||||||
- เมื่อกดเลือกเมนู “ข้อมูลตำแหน่งของลูกจ้าง” จะปรากฏรายละเอียดดังรูปภาพ </div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/5_employee/2-51.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 51 รายละเอียดข้อมูลตำแหน่งของลูกจ้าง
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p>
|
|
||||||
- เลือกกดแถบเมนูย่อย “ชื่อตำแหน่ง, ด้านของตำแหน่ง, กลุ่มงาน, สายงาน, ระดับชั้นงานหรือสถานะของตำแหน่ง” ระบบแสดงข้อมูลเมนูย่อยทำการเลือก ซึ่งจะสามารถเพิ่ม
|
|
||||||
ลบหรือแก้ไขข้อมูลได้ดังรูปภาพ ซึ่งเมนูย่อยอื่นๆสามารถทำตามขั้นตอนดังต่อไปนี้ได้ เนื่องจากมีวิธีการทำและการแสดงหน้าจอเหมือนกัน และในกรอบสีแดงที่ช่องค้นหาสามารถ
|
|
||||||
สืบค้นข้อมูลและช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/5_employee/2-52.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 52 แถบเมนูข้อมูลตำแหน่งของลูกจ้าง
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12"
|
|
||||||
style="margin-top: -;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: rgb(243, 243, 243);
|
|
||||||
font-size: 14px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 คอลัมน์แสดงชื่อคอลัมน์แสดงข้อมูลย่อยของข้อมูลตำแหน่งของลูกจ้าง <br>
|
|
||||||
หมายเลข 2 ช่องสำหรับกรอกค้นหาและเลือกคอลัมน์แสดงข้อมูลตามที่ได้ได้การค้นหา
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon name="mdi-pencil-outline" style="margin: 0 5px; color: #02A998;" size="xs"/>
|
|
||||||
เพื่อเพิ่ม ลบหรือแก้ไขข้อมูล ระบบแสดงดังรูปภาพ โดยสามารถแก้ไขรายการที่มีอยู่ได้เลย
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/5_employee/2-53.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 53 เพิ่ม ลบหรือแก้ไขข้อมูล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12" >
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon name="mdi-plus" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
|
||||||
เพื่อเพิ่มข้อมูลระบบจะปรากฏช่องเพื่อให้เพิ่มข้อมูลดังรูปภาพและเมื่อกรอกเพื่อเพิ่มข้อมูลเรียบร้อยแล้วให้กดไอคอน
|
|
||||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
|
||||||
เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการ-เผยแพร่) โดยการบันทึกเฉพาะข้อมูลร่างนั้นจะมีเพียงผู้ดูแลระบบเท่านั้นที่เห็นได้ สามารถกดไอคอน
|
|
||||||
<q-icon name="mdi-file-remove-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
|
||||||
เพื่อลบบันทึกร่างและสามารถกดไอคอน
|
|
||||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
|
||||||
เพื่อเผยแพร่ข้อมูล โดยในส่วนการเผยแพร่ข้อมูลนั้นผู้ดูแลระบบมีการตรวจสอบความถูกต้องเรียบร้อยแล้ว และได้ทำการเผยแพร่ให้เจ้าหน้าที่ทุกคนเห็นข้อมูล
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/5_employee/2-54.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 54 เพิ่มข้อมูลในช่องที่ปรากฏ
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับกรอกเพิ่มข้อมูลชื่อหน่วยงาน/หน่วยงานต้นสังกัด/ส่วนรายการต้นสังกัด
|
|
||||||
<div style="margin-left: 50px;">
|
|
||||||
- เมื่อไม่ต้องการเพิ่มข้อมูลแล้วให้กดไอคอน
|
|
||||||
<q-icon name="mdi-trash-can-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
|
||||||
เพื่อลบช่องเพิ่มข้อมูล <br>
|
|
||||||
- เมื่อต้องการปิดสถานะให้กดตรงไอคอน
|
|
||||||
<div class="q-toggle__inner relative-position non-selectable q-toggle__inner--truthy text-positive" aria-hidden="true" style="font-size: 24px; display: inline-block;">
|
|
||||||
<div class="q-toggle__track"></div>
|
|
||||||
<div class="q-toggle__thumb absolute flex flex-center no-wrap"></div>
|
|
||||||
</div>
|
|
||||||
เพื่อที่จะไม่แสดงข้อมูลนั้นในหน้าอื่นจากนั้นให้กดไอคอน
|
|
||||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
|
||||||
เพื่อบันทึกร่าง และกดไอคอน
|
|
||||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
|
||||||
เพื่อเผยแพร่ข้อมูล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p>
|
|
||||||
- เมื่อกดไอคอน
|
|
||||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
|
||||||
เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการเผยแพร่) ระบบปรากฏป้าย “บันทึกข้อมูลร่างสำเร็จ” ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/5_employee/2-55.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 55 ป้าย “บันทึกข้อมูลร่างสำเร็จ”
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12"
|
|
||||||
style="margin-top: -;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: rgb(243, 243, 243);
|
|
||||||
font-size: 14px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ระบบแสดงสถานะ “บันทึกข้อมูลสำเร็จ” หลังจากคลิกบันทึกการเพิ่มข้อมูลตำแหน่งของลูกจ้าง
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12"
|
|
||||||
style="margin-top: 50px; margin-left: 10px; ">
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon name="mdi-file-remove-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
|
||||||
เพื่อลบบันทึกร่าง ระบบจะขึ้นป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?” ดังรูปภาพ
|
|
||||||
|
|
||||||
|
|
||||||
<q-img class="col-12"
|
|
||||||
src="@/assets/manual/02_data/5_employee/2-56.png"
|
|
||||||
style="
|
|
||||||
max-width: 70%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 56 ป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?”
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p>
|
|
||||||
- เมื่อกดปุ่ม “ลบบันทึก” ระบบปรากฏป้าย “ลบข้อมูลร่างสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม “ยกเลิก” ระบบจะไม่ทำการลบข้อมูลร่าง
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/5_employee/2-57.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 57 ป้าย “ลบข้อมูลร่างสำเร็จ”
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12"
|
|
||||||
style="margin-top: -;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: rgb(243, 243, 243);
|
|
||||||
font-size: 14px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ระบบแสดงสถานะ “ลบข้อมูลร่างสำเร็จ” หลังจากคลิกยืนยันการลบข้อมูลร่างตำแหน่งของลูกจ้าง </div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p>
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
|
||||||
เพื่อเผยแพร่ข้อมูลระบบปรากฏป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?” ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/5_employee/2-58.png"
|
|
||||||
style="
|
|
||||||
max-width: 70%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 58 ป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?” </div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p>
|
|
||||||
- เมื่อกดปุ่ม “เผยแพร่” ระบบปรากฏป้าย “เผยแพร่ข้อมูลสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการเผยแพร่ข้อมูล
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/5_employee/2-59.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 59 ป้าย “เผยแพร่ข้อมูลสำเร็จ”
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12"
|
|
||||||
style="margin-top: -;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: rgb(243, 243, 243);
|
|
||||||
font-size: 14px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ระบบแสดงสถานะ “เผยแพร่ข้อมูลสำเร็จ” หลังจากที่คลิกยืนยันการเผยแพร่ข้อมูลตำแหน่งงานของลูกจ้าง
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p>
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon name="mdi-history" style="margin: 0 5px; color: #31ccec;" size="xs"/>
|
|
||||||
เพื่อดูประวัติข้อมูลแก้ไข ดังรูปภาพ ในกรอบสีแดงสามารถกรอกที่ช่องค้นหาเพื่อสืบค้นข้อมูลหรือที่ช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/5_employee/2-60.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 60 หน้าประวัติแก้ไขข้อมูล
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12"
|
|
||||||
style="margin-top: -;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: rgb(243, 243, 243);
|
|
||||||
font-size: 14px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาและช่องสำหรับเลือกคอลัมน์แสดงข้อมูลการค้นหาประวัติแก้ไขชื่อตำแหน่งของลูกจ้าง
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</q-card>
|
|
||||||
<!-- </div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
@ -1,596 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
const rightDrawerOpen = ref(false);
|
|
||||||
const text = ref("");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- <div class="row col-12">
|
|
||||||
<div class="col-9">
|
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="custom-topic text-dark">
|
|
||||||
<div style="font-size: 16px; font-weight: 700">ระบบข้อมูลหลัก</div>
|
|
||||||
</div>
|
|
||||||
</q-card> -->
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="border-radius: 0px 0px 8px 8px"
|
|
||||||
>
|
|
||||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
|
||||||
2.5 ข้อมูลปฏิทินวันหยุด
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
|
||||||
- เมื่อกดเลือกเมนู “ข้อมูลปฏิทินวันหยุด” จะปรากฏรายละเอียดดังรูปภาพ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/6_calendar/2-61.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 61 รายละเอียดข้อมูลปฏิทินวันหยุด
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12"
|
|
||||||
style="margin-top: -;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: rgb(243, 243, 243);
|
|
||||||
font-size: 14px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
|
|
||||||
หมายเลข 1 การสรุปวันหยุดในแต่ละเดือนประจำปีนั้นๆ โดยยึดวันหยุดของการทำงาน 5 วัน <br>
|
|
||||||
หมายเลข 2 สามารถกดเลือกเดือนและปี ที่ต้องการให้ระบบแสดง <br>
|
|
||||||
หมายเลข 3 ไอคอนบวกเป็นการเพิ่มวันหยุด และไอคอนสี่เหลี่นมซ้อนเป็นการคัดลอกวันหยุด <br>
|
|
||||||
หมายเลข 4 เป็นการแสดงปฏิทินแบบตาราง <br>
|
|
||||||
หมายเลข 5 เป็นการแสดงรายการวันหยุดของการทำงาน 5 วัน และ 6 วัน <br>
|
|
||||||
หมายเลข 6 เป็นการอธิบายแถบสี โดยสีน้ำเงินจะเป้นแถบสีของการทำงานวันจันทร์-ศุกร์(5วัน) และสีส้มแถบสีของการทำงานวันจันทร์-วันเสาร์(6วัน) <br>
|
|
||||||
หมายเลข 7 รายละเอียดวันหยุดที่มีการเพิ่ม
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- เมื่อกดไอคอน
|
|
||||||
<span
|
|
||||||
style="
|
|
||||||
background-color: hsl(0, 0%, 100%);
|
|
||||||
border: 1px solid #C8D3DB;
|
|
||||||
color: #000000;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 3px 10px;
|
|
||||||
border-radius: 5px;
|
|
||||||
margin-left: 10px;
|
|
||||||
margin-right: 10px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<q-icon name="mdi-calendar" style="color: #00aa86;" size="xs"/>
|
|
||||||
|
|
||||||
ก.ค 2566
|
|
||||||
</span>
|
|
||||||
ระบบจะแสดงข้อมูลให้เลือกเดือนหรือสามารถกดไอคอน หรือเพื่อเลื่อนเลือกปี ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/6_calendar/2-62.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 52 แถบเมนูข้อมูลตำแหน่งของลูกจ้าง
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12"
|
|
||||||
style="margin-top: -;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: rgb(243, 243, 243);
|
|
||||||
font-size: 14px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
|
|
||||||
หมายเลข 1 ช่องสำหรับคลิกเลือกเดือนและคลิกเลือกปี <br>
|
|
||||||
หมายเลข 2 ปุ่มสำหรับคลิกเลือกเดือนและปีก่อนหน้านี้ <br>
|
|
||||||
หมายเลข 3 ปุ่มสำหรับคลิกเลือกเดือนและปีถัดไป
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- เมื่อกดไอคอน
|
|
||||||
<q-icon name="mdi-plus" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
|
||||||
ระบบจะแสดงเพื่อให้เพิ่มวันหยุด โดยสามารถกดเลือกว่าเป็นวันหยุดของทำงาน 5 วัน หรือ 6 วัน หรือทั้งหมดจากนั้นให้กดไอคอน
|
|
||||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
|
||||||
เพื่อบันทึก ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/6_calendar/2-63.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 63 เพิ่มวันหยุด
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12"
|
|
||||||
style="margin-top: -;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: rgb(243, 243, 243);
|
|
||||||
font-size: 14px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
|
|
||||||
หมายเลข 1 ช่องสำหรับคลิกเลือกวัน เดือน ปี ที่ต้องการเพิ่มวันหยุด <br>
|
|
||||||
หมายเลข 2 ช่องสำหรับกรอกข้อมูลรายละเอียกคำอธิบายการเพิ่มวันหยุด <br>
|
|
||||||
หมายเลข 3 ช่องสำหรับคลิกเลือกวันหยุดของการทำงาน <br>
|
|
||||||
หมายเลข 4 ปุ่มสำหรับคลิกเพื่อบันทึกข้อมูลการเพิ่มวันหยุด
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12" >
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- ในการเพิ่มวันหยุดมีอีกหนึ่งวิธี โดยการกดเลือกช่องวันที่ ที่ต้องการเพิ่มวันหยุดได้ ดังรูปภาพเมื่อกดที่ช่องวันที่จะปรากฏรายละเอียดให้กรอก ดังรูปภาพก่อนหน้า
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/6_calendar/2-64.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 – 64 เพิ่มวันหยุด
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 เลือกคลิกช่องวันที่เพื่อเพิ่มรายละเอียดข้อมูลวันหยุด
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p>
|
|
||||||
- เมื่อเพิ่มวันหยุดเรียบร้อยแล้วและกดไอคอน
|
|
||||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
|
||||||
เพื่อบันทึก ระบบปรากฏป้าย “เพิ่มวันหยุดสำเร็จ” ดังรูปภาพ และปรากฏวันหยุดที่เพิ่มล่าสุด
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/6_calendar/2-65.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 65 ป้าย “เพิ่มวันหยุดสำเร็จ”
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12"
|
|
||||||
style="margin-top: -;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: rgb(243, 243, 243);
|
|
||||||
font-size: 14px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับแสดงข้อมูลวันหยุดในวันที่ที่ได้ทำการเพิ่ม <br>
|
|
||||||
หมายเลข 2 ระบบแสดงสถานะ “เพิ่มวันหยุดสำเร็จ” หลังจากคลิกบันทึกการเพิ่มข้อมูลวันหยุดเพิ่ม
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12"
|
|
||||||
style="margin-top: 50px; margin-left: 10px; ">
|
|
||||||
- เมื่อกดไอคอน
|
|
||||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
|
||||||
ระบบจะแสดงเพื่อให้คัดลอกวันหยุดปีที่คัดลอกวันหยุด และปีที่ลงวันหยุดคัดลอก จากนั้นกดไอคอน
|
|
||||||
<q-icon name="mdi-content-copy" style="margin: 0 5px; color: hwb(0 0% 100%);" size="xs"/>
|
|
||||||
เพื่อบันทึก ดังรูปภาพ
|
|
||||||
|
|
||||||
<q-img class="col-12"
|
|
||||||
src="@/assets/manual/02_data/6_calendar/2-66.png"
|
|
||||||
style="
|
|
||||||
max-width: 70%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 66 คัดลอกวันหยุด
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12"
|
|
||||||
style="margin-top: -;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: rgb(243, 243, 243);
|
|
||||||
font-size: 14px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ปุ่มสำหรับคัดลอกวันหยุดก่อนปีหน้าไปยยังปีถัดไป <br>
|
|
||||||
หมายเลข 2 ช่องสำหรับคลิกเลือกปีที่คัดลอกวันหยุดและช่องสำหรับคลิกเลือกปีที่ลงวันหยุดคัดลอก
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p>
|
|
||||||
- เมื่อเลือกปีที่คัดลอกวันหยุด และปีที่ลงวันหยุดคัดลอกเรียบร้อยแล้ว และกดไอคอน
|
|
||||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
|
||||||
ระบบปรากฏป้าย “คัดลอกวันหยุดสำเร็จ” ดังรูปภาพs
|
|
||||||
|
|
||||||
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/6_calendar/2-67.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 67 ป้าย “คัดลอกวันหยุดสำเร็จ”
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12"
|
|
||||||
style="margin-top: -;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: rgb(243, 243, 243);
|
|
||||||
font-size: 14px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ระบบแสดงสถานะ “คัดลอกวันหยุดสำเร็จ” หลังจากคลิกบันทึกข้อมูลคัดลอกวันหยุด
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p>
|
|
||||||
- เมื่อกดเลือกไอคอน
|
|
||||||
<q-icon name="mdi-calendar-month" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
|
||||||
ระบบจะแสดงปฏิทินดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/6_calendar/2-68.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 68 ปฏิทินวันหยุด
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p>
|
|
||||||
- เมื่อกดเลือกไอคอน
|
|
||||||
<q-icon name="mdi-format-list-bulleted" style="margin: 0 5px; color: hsl(0, 0%, 78%);" size="xs"/>
|
|
||||||
ระบบจะแสดงรายการวันหยุดโดยสามารถเลือกได้ว่าต้องการดูรายการวันหยุดของการทำงาน 5 วัน และ 6 วัน หากกดเลือกทำงาน 5 วัน ระบบจะแสดง ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/6_calendar/2-69.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 69 รายการวันหยุด 5 วัน
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12"
|
|
||||||
style="margin-top: -;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: rgb(243, 243, 243);
|
|
||||||
font-size: 14px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อให้ระบบแสดงรายการปฏิทิน
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p>
|
|
||||||
- หากกดเลือกทำงาน 6 วัน ระบบจะแสดงรายการดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/6_calendar/2-70.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 70 รายการวันหยุด 6 วัน
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p>
|
|
||||||
- ในรายการแสดงวันหยุดของการทำงาน 5 วัน และ 6 วัน สามารถแก้ไขหรือลบวันหยุดได้โดย กดไอคอน
|
|
||||||
<q-icon name="mdi-dots-vertical" style="margin: 0 5px; color: hwb(0 31% 69%);" size="xs"/>
|
|
||||||
ระบบจะขึ้นให้เลือกเมนูแก้ไขวันหยุด หรือลบวันหยุดดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/6_calendar/2-71.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 71 การแก้ไขหรือลบวันหยุด
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12"
|
|
||||||
style="margin-top: -;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: rgb(243, 243, 243);
|
|
||||||
font-size: 14px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 เมนูย่อยแก้ไขวันหยุดหรือลบวันหยุด
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p>
|
|
||||||
- เมื่อกดเลือกเมนู “แก้ไขวันหยุด” ระบบจะแสดงให้แก้ไขข้อมูลดังรูปภาพ และเมื่อแก้ไขข้อมูลเรียบร้อยแล้วให้กดไอคอน
|
|
||||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
|
||||||
เพื่อบันทึก
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/6_calendar/2-72.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 – 72 แก้ไขวันหยุด
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12"
|
|
||||||
style="margin-top: -;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: rgb(243, 243, 243);
|
|
||||||
font-size: 14px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับคลิกเลือกวันที่ที่ต้องการแก้ไขวันหยุด <br>
|
|
||||||
หมายเลข 2 ช่องสำหรับกรอกคำแก้ไขอธิบายวันหยุด <br>
|
|
||||||
หมายเลข 3 ปุ่มสำหรับกดคลิกบันทึกการแก้ไขข้อมูลวันหยุด
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p>
|
|
||||||
- เมื่อกดไอคอน
|
|
||||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
|
||||||
เพื่อบันทึก ระบบปรากฏป้าย “แก้ไขข้อมูลสำเร็จ” ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/6_calendar/2-73.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 73 ป้าย “แก้ไขข้อมูลสำเร็จ”
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12"
|
|
||||||
style="margin-top: -;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: rgb(243, 243, 243);
|
|
||||||
font-size: 14px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ระบบแสดงสถานะ “แก้ไขข้อมูลสำเร็จ” หลังจากที่ทำการคลิกบันทึกการแก้ไขข้อมูลวันหยุด
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p>
|
|
||||||
- เมื่อกดเลือกเมนู “ลบวันหยุด” ระบบปรากฏป้าย “ต้องการลบวันหยุดหรือไม่” ดังรูปภาพ
|
|
||||||
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
|
|
||||||
<q-img class="col-12"
|
|
||||||
src="@/assets/manual/02_data/6_calendar/2-74.png"
|
|
||||||
style="
|
|
||||||
max-width: 70%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 74 ป้าย “ต้องการลบวันหยุดหรือไม่” </div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p>
|
|
||||||
- เมื่อกดปุ่ม “ตกลง” ระบบปรากฏป้าย “ลบข้อมูลสำเร็จ” ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
|
|
||||||
<q-img class="col-12"
|
|
||||||
src="@/assets/manual/02_data/6_calendar/2-75.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 75 ป้าย “ลบข้อมูลสำเร็จ”
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12"
|
|
||||||
style="margin-top: -;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: rgb(243, 243, 243);
|
|
||||||
font-size: 14px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ระบบแสดงสถานะ “ลบข้อมูลสำเร็จ” หลังจากที่ทำการคลิกยืนยันการลบข้อมูลวันหยุด</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</q-card>
|
|
||||||
<!-- </div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
@ -1,454 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
const rightDrawerOpen = ref(false);
|
|
||||||
const text = ref("");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- <div class="row col-12">
|
|
||||||
<div class="col-9">
|
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="custom-topic text-dark">
|
|
||||||
<div style="font-size: 16px; font-weight: 700">ระบบข้อมูลหลัก</div>
|
|
||||||
</div>
|
|
||||||
</q-card> -->
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="border-radius: 0px 0px 8px 8px"
|
|
||||||
>
|
|
||||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
|
||||||
2.6 ข้อมูลเครื่องราชอิสริยาภรณ์
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
|
||||||
- เมื่อกดเลือกเมนู “ข้อมูลเครื่องราชอิสริยาภรณ์”
|
|
||||||
จะปรากฏรายละเอียดดังรูปภาพ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/7_insignia/2-76.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 76 รายละเอียดข้อมูลเครื่องราชอิสริยาภรณ์
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- เลือกกดแถบเมนูย่อย “ลำดับชั้นเครื่องราชฯหรือชื่อเครื่องราชฯ”
|
|
||||||
ระบบจะแสดงข้อมูล ซึ่งจะสามารถเพิ่ม
|
|
||||||
ลบหรือแก้ไขข้อมูลได้ดังรูปภาพซึ่งเมนูย่อย อื่นๆสามารถทำตามขั้นตอน
|
|
||||||
ดังต่อไปนี้ได้เนื่องจากมีวิธีการทำและการแสดงหน้าจอเหมือนกันและในกรอบสีแดงที่ช่องค้นหาสามารถสืบค้นข้อมูลและช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/7_insignia/2-77.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 77 รายละเอียดข้อมูลเครื่องราชอิสริยาภรณ์
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="col-12"
|
|
||||||
style="
|
|
||||||
margin-top: -;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: rgb(243, 243, 243);
|
|
||||||
font-size: 14px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 คอลัมน์สำหรับคลิกเลือกเพื่อแสดงข้อมูลตามรายชื่อที่ทำการคลิก
|
|
||||||
<br />
|
|
||||||
หมายเลข 2
|
|
||||||
ช่องสำหรับกรอกข้อมูลเพื่อค้นหาและช่องคอลัมน์สำหรับเลือกเพื่อแสดงข้อมูลตามที่ทำการค้นหา
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-pencil-outline"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อเพิ่ม ลบหรือแก้ไขข้อมูล ระบบแสดงดังรูปภาพ
|
|
||||||
โดยสามารถเลือกแก้ไขรายการที่มีอยู่ได้เลย
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/7_insignia/2-78.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 78 แก้ไขข้อมูลเครื่องราชอิสริยาภรณ์
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-plus"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อเพิ่มข้อมูลระบบจะปรากฏช่องเพื่อให้เพิ่มข้อมูลดังรูปภาพและเมื่อกรอกเพื่อเพิ่มข้อมูลเรียบร้อยแล้วให้กดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-content-save-outline"
|
|
||||||
style="margin: 0 5px; color: #01435f"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการ-เผยแพร่)
|
|
||||||
โดยการบันทึกเฉพาะข้อมูลร่างนั้นจะมีเพียงผู้ดูแลระบบเท่านั้นที่เห็นได้
|
|
||||||
สามารถกดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-file-remove-outline"
|
|
||||||
style="margin: 0 5px; color: hsl(0, 100%, 50%)"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อลบบันทึกร่างและสามารถกดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-cloud-upload-outline"
|
|
||||||
style="margin: 0 5px; color: #01435f"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อเผยแพร่ข้อมูล เพื่อเผยแพร่ข้อมูล
|
|
||||||
โดยในส่วนการเผยแพร่ข้อมูลนั้นผู้ดูแลระบบมีการตรวจสอบความถูกต้องเรียบร้อยแล้ว
|
|
||||||
และได้ทำการเผยแพร่ให้เจ้าหน้าที่ทุกคนเห็นข้อมูล
|
|
||||||
และได้ทำการเผยแพร่ให้เจ้าหน้าที่ทุกคนเห็นข้อมูล
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/7_insignia/2-79.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 79 เพิ่มข้อมูลในช่องที่ปรากฏ
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1
|
|
||||||
ช่องสำหรับกรอกเพิ่มข้อมูลชื่อหน่วยงาน/หน่วยงานต้นสังกัด/ส่วนรายการต้นสังกัด
|
|
||||||
<div style="margin-left: 50px">
|
|
||||||
- เมื่อไม่ต้องการเพิ่มข้อมูลแล้วให้กดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-trash-can-outline"
|
|
||||||
style="margin: 0 5px; color: hsl(0, 100%, 50%)"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อลบช่องเพิ่มข้อมูล <br />
|
|
||||||
- เมื่อต้องการปิดสถานะให้กดตรงไอคอน
|
|
||||||
<div
|
|
||||||
class="q-toggle__inner relative-position non-selectable q-toggle__inner--truthy text-positive"
|
|
||||||
aria-hidden="true"
|
|
||||||
style="
|
|
||||||
font-size: 24px;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0 0.3em !important ;
|
|
||||||
height: 0.35em;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="q-toggle__thumb absolute flex flex-center no-wrap"
|
|
||||||
style="top: -0.08em"
|
|
||||||
></div>
|
|
||||||
<div class="q-toggle__track"></div>
|
|
||||||
</div>
|
|
||||||
เพื่อที่จะไม่แสดงข้อมูลนั้นในหน้าอื่นจากนั้นให้กดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-content-save-outline"
|
|
||||||
style="margin: 0 5px; color: #01435f"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อบันทึกร่าง และกดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-cloud-upload-outline"
|
|
||||||
style="margin: 0 5px; color: #01435f"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อเผยแพร่ข้อมูล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- เมื่อกดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-content-save-outline"
|
|
||||||
style="margin: 0 5px; color: #01435f"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการเผยแพร่) ระบบปรากฏป้าย
|
|
||||||
“บันทึกข้อมูลร่างสำเร็จ” ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/7_insignia/2-80.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 80 ป้าย “บันทึกข้อมูลร่างสำเร็จ”
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="col-12"
|
|
||||||
style="
|
|
||||||
margin-top: -;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: rgb(243, 243, 243);
|
|
||||||
font-size: 14px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ระบบแสดงสถานะ “บันทึกข้อมูลร่างสำเร็จ”
|
|
||||||
หลังจากคลิกบันทึกการเพิ่มข้อมูลเครื่องราชอิสริยาภรณ์
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-file-remove-outline"
|
|
||||||
style="margin: 0 5px; color: hsl(0, 100%, 50%)"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อลบบันทึกร่าง ระบบจะขึ้นป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?”
|
|
||||||
ดังรูปภาพ
|
|
||||||
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/02_data/7_insignia/2-81.png"
|
|
||||||
style="
|
|
||||||
max-width: 70%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 81 ป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?”
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p>
|
|
||||||
- เมื่อกดปุ่ม “ลบบันทึก” ระบบปรากฏป้าย “ลบข้อมูลร่างสำเร็จ” ดังรูปภาพ
|
|
||||||
และเมื่อกดปุ่ม “ยกเลิก” ระบบจะไม่ทำการลบข้อมูลร่าง
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/02_data/7_insignia/2-82.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 82 ป้าย “ลบข้อมูลร่างสำเร็จ”
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="col-12"
|
|
||||||
style="
|
|
||||||
margin-top: -;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: rgb(243, 243, 243);
|
|
||||||
font-size: 14px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ระบบแสดงสถานะ “ลบข้อมูลร่างสำเร็จ”
|
|
||||||
หลังจากที่ทำการคลิกยืนยันการลบข้อมูลร่างของข้อมูลเครื่องราชอิสริยาภรณ์
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p>
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-cloud-upload-outline"
|
|
||||||
style="margin: 0 5px; color: #01435f"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อเผยแพร่ข้อมูลระบบปรากฏป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?”
|
|
||||||
ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/7_insignia/2-83.png"
|
|
||||||
style="
|
|
||||||
max-width: 70%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 83 ป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?”
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p>
|
|
||||||
- เมื่อกดปุ่ม “เผยแพร่” ระบบปรากฏป้าย “เผยแพร่ข้อมูลสำเร็จ” ดังรูปภาพ
|
|
||||||
และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการเผยแพร่ข้อมูล
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/02_data/7_insignia/2-84.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 84 ป้าย “เผยแพร่ข้อมูลสำเร็จ”
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="col-12"
|
|
||||||
style="
|
|
||||||
margin-top: -;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: rgb(243, 243, 243);
|
|
||||||
font-size: 14px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ระบบแสดงสถานะ “เผยแพร่ข้อมูลสำเร็จ”
|
|
||||||
หลังจากที่ทำการคลิกยืนยันการเผยแพร่ข้อมูลเครื่องราชอิสริยาภรณ์
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p>
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-history"
|
|
||||||
style="margin: 0 5px; color: #31ccec"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อดูประวัติข้อมูลแก้ไข ดังรูปภาพ
|
|
||||||
ในกรอบสีแดงสามารถกรอกที่ช่องค้นหาเพื่อสืบค้นข้อมูลหรือที่ช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/02_data/7_insignia/2-85.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 2 - 85 หน้าประวัติแก้ไขข้อมูล
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="col-12"
|
|
||||||
style="
|
|
||||||
margin-top: -;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: rgb(243, 243, 243);
|
|
||||||
font-size: 14px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1
|
|
||||||
ช่องสำหรับกรอกข้อมูลเพื่อค้นหาและช่องสำหรับคลิกเลือกคอลัมน์แสดงข้อมูล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
<!-- </div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,79 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import MainData from "../2_data/21_Main.vue";
|
|
||||||
import About from "../2_data/22_About.vue";
|
|
||||||
import gov from "../2_data/23_Gov.vue";
|
|
||||||
import officer from "../2_data/24_Officer.vue";
|
|
||||||
import employee from "../2_data/25_Employee.vue";
|
|
||||||
import calender from "../2_data/26_Calendar.vue";
|
|
||||||
import insignia from "../2_data/27_Insignia.vue";
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div class="col-12 row">
|
|
||||||
<div
|
|
||||||
class="toptitle text-dark col-12 row items-center"
|
|
||||||
style="padding-top: 40px"
|
|
||||||
>
|
|
||||||
คู่มือการใช้งานระบบข้อมูลหลัก
|
|
||||||
</div>
|
|
||||||
<div class="row col-12 q-gutter-xs">
|
|
||||||
<div
|
|
||||||
id="MainData"
|
|
||||||
name="1"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<MainData />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="About"
|
|
||||||
name="2"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<About />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="gov"
|
|
||||||
name="3"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<gov />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="officer"
|
|
||||||
name="4"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<officer />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="employee"
|
|
||||||
name="5"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<employee />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="calender"
|
|
||||||
name="6"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<calender />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="insignia"
|
|
||||||
name="6"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<insignia />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
|
|
@ -1,84 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
const rightDrawerOpen = ref(false);
|
|
||||||
const text = ref("");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- <div class="row col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="custom-topic text-dark">
|
|
||||||
<div style="font-size: 16px; font-weight: 700">
|
|
||||||
ระบบโครงสร้างอัตรากำลัง
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="border-radius: 0px 0px 8px 8px"
|
|
||||||
>
|
|
||||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
|
||||||
- เมื่อเข้าสู่ระบบทรัพยากรบุคคล ปรากฏหน้าจอหน้าแรกของระบบทรัพยาการบุคคล
|
|
||||||
ให้กดเลือกแถบเมนู “ข้อมูลหลัก” ดังรูปภาพ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/03_structure/1_main/3-1.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
width: 255px;
|
|
||||||
height: 392.06px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 1 เมนูโครงสร้างอัตรากำลัง
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="col-12"
|
|
||||||
style="margin-top: 50px; margin-left: 10px; align-items: center"
|
|
||||||
>
|
|
||||||
- ระบบปรากฏเมนูย่อยของโครงสร้างอัตรากำลัง ดังรูปภาพ
|
|
||||||
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/03_structure/1_main/3-2.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
width: 255px;
|
|
||||||
height: 571.37px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 2 เมนูย่อยของโครงสร้างอัตรากำลัง
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
<!-- </div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,418 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
const rightDrawerOpen = ref(false);
|
|
||||||
const text = ref("");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- <div class="row col-12">
|
|
||||||
<div class="col-9">
|
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<!-- <q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="custom-topic text-dark">
|
|
||||||
<div style="font-size: 16px; font-weight: 700">ระบบโครงสร้างอัตรากำลัง</div>
|
|
||||||
</div>
|
|
||||||
</q-card> -->
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="border-radius: 0px 0px 8px 8px"
|
|
||||||
>
|
|
||||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
|
||||||
3.1 จัดการตำแหน่ง
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
|
||||||
- กดเลือกแถบเมนูย่อยของโครงสร้างอัตรากำลัง “จัดการตำแหน่ง”
|
|
||||||
ระบบแสดงหน้าจอดังรูปภาพ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/03_structure/2_position/3-3.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 3 หน้าจัดการตำแหน่ง
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
จากรูปที่ 3 - 3 แต่ละหมายเลขมีรายละเอียด ดังนี้ <br />
|
|
||||||
<div style="margin-left: 50px">
|
|
||||||
หมายเลข 3 ช่องค้นหา เพื่อสืบค้นข้อมูลที่ต้องการ <br />
|
|
||||||
หมายเลข 4 คอลัมน์ กดเลือกรายการเพื่อให้ข้อมูลที่เลือกถูกซ่อน
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-pencil-outline"
|
|
||||||
style="margin: 0 5px; color: #02a998"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อเพิ่ม ลบหรือแก้ไขข้อมูล ระบบแสดงดังรูปภาพ
|
|
||||||
โดยเลือกกดรายการจัดการตำแหน่งที่ต้องการจัดการ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/03_structure/2_position/3-4.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 4 แก้ไขข้อมูลจัดการตำแหน่ง
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- เมื่อกดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-pencil-outline"
|
|
||||||
style="margin: 0 5px; color: #02a998"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
จะสามารถกดเลือกรายการจัดการตำแหน่งเพื่อแก้ไขข้อมูลได้
|
|
||||||
เมื่อกดเลือกรายการจัดการตำแหน่ง ระบบแสดงดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/03_structure/2_position/3-5.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 5 แก้ไขข้อมูลที่มีอยู่
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับคลิกเลือกข้อมูลตำแหน่งประเภท <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับคลิกเลือกข้อมูลตำแหน่ง <br />
|
|
||||||
หมายเลข 3 ช่องสำหรับคลิกเลือกตำแหน่งทางการบริหาร <br />
|
|
||||||
หมายเลข 4 ช่องสำหรับคลิกเลือกระดับ <br />
|
|
||||||
หมายเลข 5 ช่องสำหรับคลิกเลือกสายงาน <br />
|
|
||||||
หมายเลข 6 ช่องสำหรับคลิกเลือกด้าน/สาขา <br />
|
|
||||||
หมายเลข 7 ช่องสำหรับคลิกเลือกด้านทางการบริหาร <br />
|
|
||||||
หมายเลข 8 ช่องสำหรับคลิกเลือกสถานภาพของตำแหน่ง <br />
|
|
||||||
หมายเลข 9 ช่องสำหรับกรอกข้อมูลศึกษาศาสตรบัณฑิต <br />
|
|
||||||
หมายเลข 10 ช่องสำหรับกรอกข้อมูลเงื่อนไขตำแหน่ง <br />
|
|
||||||
หมายเลข 11 ช่องสำหรับกรอกข้อมูลหมายเหตุ <br />
|
|
||||||
หมายเลข 12 ช่องสำหรับคลิกเลือกเพื่อแสดงสถานะการเป็นหัวหน้างาน <br />
|
|
||||||
หมายเลข 13 ปุ่มบันทึก
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- เมื่อแก้ไขข้อมูลเรียบร้อยแล้วให้กดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-content-save-outline"
|
|
||||||
style="margin: 0 5px; color: #01435f"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อบันทึกข้อมูลร่าง ระบบปรากฏป้าย“บันทึกข้อมูลร่างสำเร็จ” ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/03_structure/2_position/3-6.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 6 ป้าย “บันทึกข้อมูลร่างสำเร็จ”
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ระบบแสดงสถานะ “บันทึกข้อมูลร่างสำเร็จ”
|
|
||||||
หลังจากคลิกยืนยันการแก้ไขข้อมูล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- เมื่อไม่ต้องแก้ไขหรือยกเลิกแก้ไขให้กดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-file-remove-outline"
|
|
||||||
style="margin: 0 5px; color: hsl(0, 100%, 50%)"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อยกเลิกแบบร่างที่แก้ไขล่าสุดระบบปรากฏป้าย
|
|
||||||
“ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?” ดังรูปภาพ
|
|
||||||
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/2_position/3-7.png"
|
|
||||||
style="
|
|
||||||
max-width: 70%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 7 ป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?”
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- เมื่อกดปุ่ม “ลบบันทึก” ระบบปรากฏป้าย “ลบข้อมูลร่างสำเร็จ” ดังรูปภาพ
|
|
||||||
และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการลบข้อมูลร่าง
|
|
||||||
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/2_position/3-8.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 8 ป้าย “ลบข้อมูลร่างสำเร็จ”
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ระบบแสดงสถานะ “ลบข้อมูลร่างสำเร็จ”
|
|
||||||
หลังจากที่ทำการคลิกยืนยันการลบข้อมูลร่างการจัดตำแหน่ง
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
<p>
|
|
||||||
- เมื่อแก้ไข และกดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-content-save-outline"
|
|
||||||
style="margin: 0 5px; color: #01435f"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อบันทึกข้อมูลร่างให้กดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-cloud-upload-outline"
|
|
||||||
style="margin: 0 5px; color: #01435f"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อเผยแพร่ข้อมูลระบบจะขึ้นป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?”
|
|
||||||
ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/03_structure/2_position/3-9.png"
|
|
||||||
style="
|
|
||||||
max-width: 70%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพ 3 - 9 ป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?”
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- เมื่อกดปุ่ม “เผยแพร่” ระบบปรากฏป้าย “เผยแพร่ข้อมูลสำเร็จ” ดังรูปภาพ
|
|
||||||
และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการเผยแพร่ข้อมูล
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/2_position/3-10.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 10 ป้าย “เผยแพร่ข้อมูลสำเร็จ”
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ระบบแสดงสถานะ “เผยแพร่ข้อมูลสำเร็จ”
|
|
||||||
หลังจากที่ทำการคลิกยืนยันการเผยแพร่ข้อมูลจัดการตำแหน่ง
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon name="mdi-plus" style="margin: 0 5px; color: #00aa86" size="xs" />
|
|
||||||
เพื่อเพิ่มข้อมูล ระบบจะปรากฏฟอร์มเพื่อให้เพิ่มข้อมูลดังรูปภาพ
|
|
||||||
เมื่อกรอกเพื่อเพิ่มข้อมูลเรียบร้อยแล้วให้กดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-content-save-outline"
|
|
||||||
style="margin: 0 5px; color: #01435f"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อบันทึกร่าง(ข้อมูลยังไม่มีการเผยแพร่)
|
|
||||||
เมื่อกดบันทึกร่างระบบจะแสดงดังรูปภาพที่ 3 – 6
|
|
||||||
โดยการบันทึกเฉพาะข้อมูลร่างนั้นจะมีเพียงผู้ดูแลระบบเท่านั้นที่เห็นได้
|
|
||||||
สามารถกดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-file-remove-outline"
|
|
||||||
style="margin: 0 5px; color: hsl(0, 100%, 50%)"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อลบบันทึกร่างเมื่อกดลบบันทึกร่างระบบจะแสดงดังรูปภาพที่ 3 – 7 และ 3 – 8
|
|
||||||
และสามารถกดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-cloud-upload-outline"
|
|
||||||
style="margin: 0 5px; color: #01435f"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อเผยแพร่ข้อมูลระบบจะแสดงดังรูปภาพที่ 3 – 9 และ 3 – 10
|
|
||||||
โดยในส่วนการเผยแพร่ข้อมูลนั้นผู้ดูแลระบบ
|
|
||||||
มีการตรวจสอบความถูกต้องเรียบร้อยแล้ว
|
|
||||||
และได้ทำการเผยแพร่ให้เจ้าหน้าที่ทุกคนเห็นข้อมูล เมื่อกดเลือกที่ “หัวหน้า”
|
|
||||||
ระบบปรากฏไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-bookmark"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
กำกับ
|
|
||||||
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/2_position/3-11.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 11 ฟอร์มสร้างโครงสร้างและกรอบอัตรากำลัง
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับคลิกเลือกตำแหน่งประเภท <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับคลิกเลือกตำแหน่ง <br />
|
|
||||||
หมายเลข 3 ช่องสำหรับคลิกเลือกตำแหน่งทางการบริหาร <br />
|
|
||||||
หมายเลข 4 ช่องสำหรับคลิกเลือกระดับ <br />
|
|
||||||
หมายเลข 5 ช่องสำหรับคลิกสายงาน <br />
|
|
||||||
หมายเลข 6 ช่องสำหรับคลิกเลือกด้าน/สาขา <br />
|
|
||||||
หมายเลข 7 ช่องสำหรับคลิกเลือกด้นทางการบริหาร <br />
|
|
||||||
หมายเลข 8 ช่องสำหรับคลิกเลือกสถานภาพของตำแหน่ง <br />
|
|
||||||
หมายเลข 9 ช่องสำหรับกรอกรายละเอียกข้อมูลคุณวุฒิ <br />
|
|
||||||
หมายเลข 10 ช่องสำหรับกรอกข้อมูลเงื่อนไขตำแหน่ง <br />
|
|
||||||
หมายเลข 11 ช่องสำหรับกรอกข้อมูลรายละเอียดหมายเหตุ <br />
|
|
||||||
หมายเลข 12 ช่องสำหรับคลิกเพื่อกำหนดการเป็นหัวหน้างาน <br />
|
|
||||||
หมายเลข 13 ปุ่มสำหรับคลิกบันทึกข้อมูล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
<!-- </div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,398 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
const rightDrawerOpen = ref(false);
|
|
||||||
const text = ref("");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- <div class="row col-12">
|
|
||||||
<div class="col-9">
|
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="custom-topic text-dark">
|
|
||||||
<div style="font-size: 16px; font-weight: 700">
|
|
||||||
ระบบโครงสร้างอัตรากำลัง
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="border-radius: 0px 0px 8px 8px"
|
|
||||||
>
|
|
||||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
|
||||||
3.2 แผนภูมิโครงสร้าง
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
|
||||||
- กดเลือกแถบเมนูย่อยของโครงสร้างอัตรากำลัง “แผนภูมิโครงสร้าง”
|
|
||||||
ระบบแสดงหน้าจอดังรูปภาพ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/03_structure/3_structure/3-12.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 12 หน้าแผนภูมิโครงสร้าง
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ดาวน์โหลดรูปภาพเป็นไฟล์ PNG <br />
|
|
||||||
หมายเลข 2 ดาวน์โหลดไฟล์เป็นไฟล์ PDF <br />
|
|
||||||
หมายเลข 3 การเข้าถึงของแต่ละหัวข้อหลัก <br />
|
|
||||||
หมายเลข 4 รายละเอียดแผนภูมิโครงสร้าง
|
|
||||||
โดยสามารถเข้าถึงแต่ละหัวข้อเพื่อให้แสดงข้อมูล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- เมื่อต้องการดูข้อมูลให้เล็กลงสามารถกดเลือกแต่ละหัวข้อต่างๆได้
|
|
||||||
ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/03_structure/3_structure/3-13.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 13 รายละเอียดโครงสร้าง
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- เมื่อกดเลือกหัวข้อที่ต้องการ ระบบจะแสดงเฉพาะข้อมูลที่เลือก
|
|
||||||
โดยจะมีการบอกหัวข้อที่มีการเข้าถึง ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/03_structure/3_structure/3-14.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 14 รายละเอียดโครงสร้างที่แสดงเฉพาะข้อมูลที่ทำการเลือก
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 คอลัมน์แสดงการเข้าถึงของแต่ละหน้า <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับแสดงรายละเอียดข้อมูลหน่วยงานที่ได้ทำการเข้าถึง
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- สามารถกดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-image-area"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อดาวน์โหลดไฟล์ PNG โดยจะได้ไฟล์รูปภาพ ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/03_structure/3_structure/3-15.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 15 ดาวน์โหลดไฟล์ PNG
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ไอคอนสำหรับคลิกเพื่อดาวน์โหลดไฟล์รูปภาพ PNG
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- ไฟล์รูปภาพที่ได้จากการดาวน์โหลดไฟล์ PNG ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/3_structure/3-16.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 16 ไฟล์ PNG ที่ได้จากการดาวน์โหลด
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- ไฟล์รูปภาพที่ได้จากการดาวน์โหลดไฟล์ PNG ดังรูปภาพ - โดยสามารถคลิกไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-image-area"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อดาวน์โหลดไฟล์ PNG ในแต่ละหัวข้อที่ต้องการได้
|
|
||||||
ดังรูปภาพสามารถเข้าถึงหัวข้อที่ต้องการ เพื่อดาวน์โหลดได้
|
|
||||||
</p>
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/3_structure/3-17.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 17 ดาวน์โหลดไฟล์ PNG ที่มีการเข้าถึงหัวข้อที่ต้องการ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ไอคอนสำหรับคลิกดาวน์โหลดไฟล์ภาพ PNG
|
|
||||||
(ข้อมูลเฉพาะที่มีการเข้าถึงหน่วยงานนั้นๆ)
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- ไฟล์รูปภาพที่ได้จากการดาวน์โหลดไฟล์ PNG
|
|
||||||
ที่มีการเข้าถึงหัวข้อที่ต้องการ ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/03_structure/3_structure/3-18.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 18 ไฟล์ PNG จากการดาวน์โหลดที่มีการเข้าถึงหัวข้อที่ต้องการ
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- สามารถคลิกไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-file-pdf-box"
|
|
||||||
style="margin: 0 5px; color: hsl(0, 100%, 50%)"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อดาวน์โหลดไฟล์ PDF โดยจะได้ไฟล์รูปภาพ ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/3_structure/3-19.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 19 ดาวน์โหลดไฟล์ PDF
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ไอคอนสำหรับคลิกเพื่อดาวน์โหลดไฟล์รูปภาพเป็นไฟล์ข้อมูล PDF
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- ไฟล์รูปภาพที่ได้จากการดาวน์โหลดไฟล์ PDF ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/3_structure/3-20.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 20 ไฟล์ PDF ที่ได้จากการดาวน์โหลด
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- โดยสามารถคลิกไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-file-pdf-box"
|
|
||||||
style="margin: 0 5px; color: hsl(0, 100%, 50%)"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อดาวน์โหลดไฟล์ PNG ในแต่ละหัวข้อที่ต้องการได้
|
|
||||||
ดังรูปภาพสามารถเข้าถึงหัวข้อที่ต้องการ เพื่อดาวน์โหลดได้
|
|
||||||
</p>
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/3_structure/3-21.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 21 ดาวน์โหลดไฟล์ PNG ที่มีการเข้าถึงหัวข้อที่ต้องการ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ไอคอนสำหรับคลิกเพื่อดาวน์โหลดรูปภาพเป็นไฟล์ PNG
|
|
||||||
(ข้อมูลเฉพาะที่มีการเข้าถึงหน่วยงานนั้นๆ)
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- ไฟล์รูปภาพที่ได้จากการดาวน์โหลดไฟล์ PNG
|
|
||||||
ที่มีการเข้าถึงหัวข้อที่ต้องการ ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/3_structure/3-22.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 22 ไฟล์ PNG จากการดาวน์โหลดที่มีการเข้าถึงหัวข้อที่ต้องการ
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
<!-- </div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,311 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
const rightDrawerOpen = ref(false);
|
|
||||||
const text = ref("");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- <div class="row col-12">
|
|
||||||
<div class="col-9">
|
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<!-- <q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="custom-topic text-dark">
|
|
||||||
<div style="font-size: 16px; font-weight: 700">ระบบโครงสร้างอัตรากำลัง</div>
|
|
||||||
</div>
|
|
||||||
</q-card> -->
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="border-radius: 0px 0px 8px 8px"
|
|
||||||
>
|
|
||||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
|
||||||
3.3 แผนภูมิองค์กร
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
|
||||||
- กดเลือกแถบเมนูย่อยของโครงสร้างอัตรากำลัง “แผนภูมิองค์กร”
|
|
||||||
ระบบแสดงดังรูปภาพ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/03_structure/4_organchart/3-23.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 23 หน้าแผนภูมิองค์กร
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ดาวน์โหลดรูปภาพเป็นไฟล์ PNG <br />
|
|
||||||
หมายเลข 2 ดาวน์โหลดไฟล์เป็นไฟล์ PDF <br />
|
|
||||||
หมายเลข 3 รายละเอียดแผนภูมิโครงสร้าง
|
|
||||||
โดยสามารถเข้าถึงแต่ละหัวข้อเพื่อให้ข้อมูลที่แสดงเป็นข้อมูลเล็กลง
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- สามารถกดเลือกไอคอน
|
|
||||||
<span class="circle-icon" style="margin-left: 10px">
|
|
||||||
<span
|
|
||||||
class="triangle"
|
|
||||||
style="border-top-width: 8px; transform: rotate(-90deg)"
|
|
||||||
>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
ของแต่ละหัวข้อเมื่อต้องการดูข้อมูลเพิ่มเติม ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/03_structure/4_organchart/3-24.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 24 เลือกดูข้อมูลเพิ่มเติม
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- เมื่อกดไอคอน
|
|
||||||
<span class="circle-icon" style="margin-left: 10px">
|
|
||||||
<span
|
|
||||||
class="triangle"
|
|
||||||
style="border-top-width: 8px; transform: rotate(-90deg)"
|
|
||||||
>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
ของแต่ละหัวข้อเมื่อต้องการดูข้อมูลเพิ่มเติม ไอคอนจะเปลี่ยนเป็น
|
|
||||||
<span class="circle-icon" style="margin-left: 10px">
|
|
||||||
<span
|
|
||||||
class="triangle"
|
|
||||||
style="border-top-width: 8px; transform: rotate(180deg)"
|
|
||||||
>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
ดังรูปภาพ และจะแสดงข้อมูลเพิ่มเติมของหัวข้อที่เลือก
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/03_structure/4_organchart/3-25.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 25 เลือกดูข้อมูลเพิ่มเติมของหัวข้อที่เลือก
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องแสดงข้อมูลแผนภูมิองค์กรเมื่อมีการกดคลิกแสดงตำแหน่งย่อย
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- สามารถกดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-image-area"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อดาวน์โหลดไฟล์ PNG โดยจะได้ไฟล์รูปภาพ ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/4_organchart/3-26.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 26 ดาวน์โหลดไฟล์ PNG
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ไอคอนสำหรับคลิกเพื่อดาวน์โหลดรูปภาพไฟล์ PNG <br />
|
|
||||||
หมายเลข 2 แถบการเข้าถึงไฟล์รูปภาพที่ได้ทำการดาวน์โหลด
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- ไฟล์รูปภาพที่ได้จากการดาวน์โหลดไฟล์ PNG ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/4_organchart/3-27.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 27 ไฟล์ PNG ที่ได้จากการดาวน์โหลด
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- สามารถคลิกไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-file-pdf-box"
|
|
||||||
style="margin: 0 5px; color: hsl(0, 100%, 50%)"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อดาวน์โหลดไฟล์ PDF โดยจะได้ไฟล์รูปภาพ ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/4_organchart/3-28.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 28 ดาวน์โหลดไฟล์ PDF
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ไอคอนสำหรับคลิกเพื่อดาวน์โหลดรูปภาพเป็นไฟล์ข้อมูล PDF <br />
|
|
||||||
หมายเลข 2 แถบการเข้าถึงข้อมูลไฟล์รูปภาพที่ได้ทำการดาวน์โหลด
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- ไฟล์รูปภาพที่ได้จากการดาวน์โหลดไฟล์ PNG ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/4_organchart/3-29.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 29 ไฟล์ PDF ที่ได้จากการดาวน์โหลด
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
<!-- </div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.circle-icon {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
background-color: #efefef;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-right: 10px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.triangle {
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-left: 5px solid transparent; /* ปรับความกว้างลง */
|
|
||||||
border-right: 5px solid transparent; /* ปรับความกว้างลง */
|
|
||||||
border-bottom: 5px solid #000000; /* ปรับความสูงลง */
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,686 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
const rightDrawerOpen = ref(false);
|
|
||||||
const text = ref("");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- <div class="row col-12">
|
|
||||||
<div class="col-9">
|
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<!-- <q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="custom-topic text-dark">
|
|
||||||
<div style="font-size: 16px; font-weight: 700">ระบบโครงสร้างอัตรากำลัง</div>
|
|
||||||
</div>
|
|
||||||
</q-card> -->
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="border-radius: 0px 0px 8px 8px"
|
|
||||||
>
|
|
||||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
|
||||||
3.4 ผังโครงสร้าง
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
|
||||||
- กดเลือกแถบเมนูย่อยของโครงสร้างอัตรากำลัง “แผนภูมิองค์กร”
|
|
||||||
ระบบแสดงหน้าจอดังรูปภาพ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/03_structure/5_chartstru/3-30.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 30 หน้าผังโครงสร้าง
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 แถบเมนูเพิ่ม ลบหรือแก้ไขข้อมูล <br />
|
|
||||||
หมายเลข 2 ข้อมูลประวัติแก้ไขผังโครงสร้าง <br />
|
|
||||||
หมายเลข 3 รายละเอียดผังโครงสร้างของหน่วยงาน <br />
|
|
||||||
หมายเลข 4 วันเดือนปีและเวลาที่เผยแพร่ข้อมูลโครงสร้าง <br />
|
|
||||||
หมายเลข 5 ช่องค้นหาข้อมูลผังโครงสร้าง
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="
|
|
||||||
margin-top: 50px;
|
|
||||||
margin-left: 10px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-pencil-outline"
|
|
||||||
style="margin: 0 5px; color: #02a998"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อเพิ่ม ลบหรือแก้ไขข้อมูล ระบบแสดงดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/03_structure/5_chartstru/3-31.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 31 เพิ่ม ลบหรือแก้ไขข้อมูล
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ไอคอนดินสอสำหรับคลิกเพื่อแก้ไขข้อมูลหน่วยงาน
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- เมื่อกดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-plus"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อเพิ่มข้อมูล ระบบจะปรากฏหน้าจอดังรูปภาพ จากนั้นให้กดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-plus"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อเพิ่มหน่วยงานภายใต้หน่วยงานกรุงเทพมหานคร
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/03_structure/5_chartstru/3-33.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 33 เพิ่มหน่วยงาน
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1
|
|
||||||
ปุ่มสำหรับคลิกเพื่อเพิ่มข้อมูลของหน่วยงานภายใต้หน่วยงานกรุงเทพมหานคร
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- เมื่อกดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-plus"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อเพิ่มหน่วยงาน ระบบจะปรากฏช่องเพื่อให้เพิ่มข้อมูลหน่วยงาน ดังรูปภาพ
|
|
||||||
เมื่อกรอกเพื่อเพิ่มข้อมูลเรียบร้อยแล้วให้กดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-content-save-outline"
|
|
||||||
style="margin: 0 5px; color: #01435f"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการเผยแพร่)
|
|
||||||
โดยการบันทึกเฉพาะข้อมูลร่างนั้นจะมีเพียงผู้ดูแลระบบเท่านั้นที่เห็นได้
|
|
||||||
สามารถกดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-file-remove-outline"
|
|
||||||
style="margin: 0 5px; color: hsl(0, 100%, 50%)"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อลบบันทึกร่าง และสามารถกดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-cloud-upload-outline"
|
|
||||||
style="margin: 0 5px; color: #01435f"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อเผยแพร่ข้อมูล
|
|
||||||
โดยในส่วนการเผยแพร่ข้อมูลนั้นผู้ดูแลระบบมีการตรวจสอบความถูกต้องเรียบร้อยแล้ว
|
|
||||||
และได้ทำการเผยแพร่ให้เจ้าหน้าที่ทุกคนเห็นข้อมูล
|
|
||||||
</p>
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/5_chartstru/3-34.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 34 เพิ่มข้อมูลหน่วยงาน
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับคลกเลือกหน่วยงาน <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับคลิกเลือกรหัสหน่วยงาน <br />
|
|
||||||
หมายเลข 3 ช่องสำหรับคลิกเลือกรหัสส่วนราชการ <br />
|
|
||||||
หมายเลข 4 ช่องสำหรับแสดงชื่อย่อหน่วยงาน <br />
|
|
||||||
หมายเลข 5 ช่องสำหรับกรอกเลขที่หน่วยงาน <br />
|
|
||||||
หมายเลข 6 ช่องสำหรับกรอกเลขที่ส่วนราชการ <br />
|
|
||||||
หมายเลข 7 ช่องสำหรับกรอกเลขที่ฝ่าย/ส่วน <br />
|
|
||||||
หมายเลข 8 ช่องสำหรับกรอกเลขที่กอง <br />
|
|
||||||
หมายเลข 9 ช่องสำหรับคลิกเลือกประเภทหน่วยงาน <br />
|
|
||||||
หมายเลข 10 ช่องสำหรับคลิกเลือกระดับหน่วยงาน <br />
|
|
||||||
หมายเลข 11 ช่องสำหรับคลิกเลือกหน่วยงานต้นสังกัด <br />
|
|
||||||
หมายเลข 12 ช่องสำหรับคลิกเลือกส่วนราชการต้นสังกัด <br />
|
|
||||||
หมายเลข 13 ช่องสำหรับกรอกข้อมูลลำดับผังโครงสร้าง <br />
|
|
||||||
หมายเลข 14 ช่องสำหรับคลิกเลือกหมายเลขโทรศัพท์ติดต่อจากภายนอก <br />
|
|
||||||
หมายเลข 15 ช่องสำหรับคลิกเลือกหมายเลขโทรศัพท์ติดต่อจากภายใน <br />
|
|
||||||
หมายเลข 16 ช่องสำหรับคลิกเลือกหมายเลขโทรสาร <br />
|
|
||||||
หมายเลข 17 ช่องสำหรับกรอกข้อมูลรายละเอียดหน้าที่รับผิดชอบ <br />
|
|
||||||
หมายเลข 18 ปุ่มสำหรับคลิกเพื่อบันทึกข้อมูล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- เมื่อกรอกข้อมูลเรียบร้อยแล้วให้กดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-content-save-outline"
|
|
||||||
style="margin: 0 5px; color: #01435f"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อบันทึกร่าง(ข้อมูลยังไม่มีการเผยแพร่)ระบบแสดงป้าย
|
|
||||||
“บันทึกข้อมูลร่างสำเร็จ” ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/5_chartstru/3-35.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 35 ป้าย “บันทึกข้อมูลร่างสำเร็จ”
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ระบบแสดงสถานะ “บันทึกข้อมูลร่างสำเร็จ”
|
|
||||||
หลังจากที่กดบันทึกข้อมูลเพิ่มหน่วยงานภายใต้หน่วยงานกรุงเทพมหานคร
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- กดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-cloud-upload-outline"
|
|
||||||
style="margin: 0 5px; color: #01435f"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อเผยแพร่ข้อมูลระบบปรากฏป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?”
|
|
||||||
ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/5_chartstru/3-36.png"
|
|
||||||
style="
|
|
||||||
max-width: 70%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 36 ป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?”
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- เมื่อกดปุ่ม “เผยแพร่” ระบบปรากฏป้าย“เผยแพร่ข้อมูลสำเร็จ” ดังรูปภาพ
|
|
||||||
และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการเผยแพร่ข้อมูล
|
|
||||||
โดยมีป้ายต้องการโหลดข้อมูลใหม่ขึ้นมาเพื่อสอบถามความต้องการ ให้กดปุ่ม
|
|
||||||
“ตกลง” เมื่อต้องการอัปโหลดข้อมูลใหม่ และปุ่ม “ยกเลิก”
|
|
||||||
เมื่อไม่ต้องการอัปโหลดข้อมูล
|
|
||||||
</p>
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/5_chartstru/3-37.png"
|
|
||||||
style="
|
|
||||||
max-width: 70%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 37 ป้าย “เผยแพร่ข้อมูลสำเร็จ”
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- เมื่อต้องการลบหน่วยงานให้กดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-trash-can-outline"
|
|
||||||
style="margin: 0 5px; color: hsl(0, 100%, 50%)"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
ระบบปรากฏป้าย “ยืนยันลบหน่วยงาน” ดังรูป
|
|
||||||
</p>
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/5_chartstru/3-38.png"
|
|
||||||
style="
|
|
||||||
max-width: 70%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 38 ป้าย “ยืนยันลบหน่วยงาน”
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- เมื่อกดปุ่ม “ตกลง” ระบบปรากฏป้าย “ลบข้อมูลสำเร็จ” ดังรูปภาพ
|
|
||||||
และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการเผยแพร่ข้อมูลและให้กดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-cloud-upload-outline"
|
|
||||||
style="margin: 0 5px; color: #01435f"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อเผยแพร่ข้อมูลอีกครั้ง
|
|
||||||
</p>
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/5_chartstru/3-39.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 39 ป้าย “ลบข้อมูลสำเร็จ”
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ระบบแจ้งเตือนสถานะ “ลบข้อมูลสำเร็จ”
|
|
||||||
หลังจากที่ทำการกดคลิกยืนยันเพื่อลบข้อมูลหน่วยงานภายใต้หน่วยงานกรุงเทพมหานคร
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- เมื่อมีการเพิ่มหรือแก้ไข สามารถกดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-file-remove-outline"
|
|
||||||
style="margin: 0 5px; color: hsl(0, 100%, 50%)"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อลบบันทึกร่างข้อมูลที่มีการเพิ่มหรือแก้-ไขได้ดังรูปภาพ หากกดปุ่ม
|
|
||||||
“ลบบันทึก” จะปรากฏป้ายเตือนบริเวณมุมขวาล่าง “ลบข้อมูลร่างสำเร็จ”
|
|
||||||
และเมื่อกดปุ่ม “ยกเลิก” ระบบจะไม่ทำการลบข้อมูลร่าง
|
|
||||||
</p>
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/5_chartstru/3-40.png"
|
|
||||||
style="
|
|
||||||
max-width: 70%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 40 ป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?”
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- สามารถเลือกกดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-plus"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อเพิ่มข้อมูลหน่วยงานและตำแหน่ง ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/5_chartstru/3-41.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 41 เพิ่มหน่วยงานและตำแหน่ง
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ปุ่มสำหรับเพิ่มข้อมูลหน่วยงานหรือตำแหน่งภายใต้สำนักงานการคลัง
|
|
||||||
<br />
|
|
||||||
หมายเลข 2 ปุ่มสำหรับเพิ่มข้อมูลหน่วยงานหรือตำแหน่งภายใต้กองคลัง
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- เมื่อเลือกกดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-plus"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อเพิ่มข้อมูลหน่วยงานและตำแหน่ง
|
|
||||||
โดยจะมีข้อมูลกำกับว่าเพิ่มโครงสร้างอัตรากำลังภายใต้หน่วยงานใด ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/5_chartstru/3-42.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 42 เพิ่มข้อมูลหน่วยงานและตำแหน่ง
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1
|
|
||||||
ช่องสำหรับแสดงชื่อสำนักงานที่ทำงานเพิ่มข้อมูลหน่วยงานและตำแหน่ง <br />
|
|
||||||
หมายเลข 2 ปุ่มสำหรับคลิกเพื่อเพิ่มข้อมูลหน่วยงาน <br />
|
|
||||||
หมายเลข 3 ปุ่มสำหรับคลิกเพื่อเพิ่มข้อมูลตำแหน่ง
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- เมื่อกดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-plus"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
ที่เพิ่มหน่วยงานและตำแหน่ง ระบบปรากฎดังรูปภาพ เพื่อกรอกข้อมูลหน่วย
|
|
||||||
งานสำหรับการกรอกข้อมูลหน่วยงานสามารถดูได้ตามรายละเอียดในรูปภาพ ที่ 3 –34
|
|
||||||
และกรอกข้อมูลตำแหน่งในรูปภาพที่ 3 – 44 เมื่อกรอกเรียบร้อยแล้วให้กดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-content-save-outline"
|
|
||||||
style="margin: 0 5px; color: #01435f"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อบันทึกข้อมูลร่าง
|
|
||||||
โดยการบันทึกเฉพาะข้อมูลร่างนั้นจะมีเพียงผู้ดูแลระบบเท่านั้นที่เห็นได้เมื่อต้องการลบข้อมูลร่างให้กดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-file-remove-outline"
|
|
||||||
style="margin: 0 5px; color: hsl(0, 100%, 50%)"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
และเมื่อต้องการเผยแพร่ให้กดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-cloud-upload-outline"
|
|
||||||
style="margin: 0 5px; color: #01435f"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อเผยแพร่ไปหน้าอื่น
|
|
||||||
ในส่วนการเผยแพร่ข้อมูลนั้นผู้ดูแลระบบมีการตรวจสอบความถูกต้องเรียบร้อยแล้ว
|
|
||||||
และได้ทำการเผยแพร่ให้เจ้าหน้าที่ทุกคนเห็นข้อมูล
|
|
||||||
และเมื่อไม่ต้องการเพิ่มหน่วยงานหรือตำแหน่งสามารถกดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-trash-can-outline"
|
|
||||||
style="margin: 0 5px; color: hsl(0, 100%, 50%)"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อลบช่องที่ปรากฏให้เพิ่มหน่วยงานหรือตำแหน่ง
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/5_chartstru/3-43.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 43 เพิ่มข้อมูลหน่วยงาน
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px"></p>
|
|
||||||
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/5_chartstru/3-44.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 44 เพิ่มข้อมูลตำแหน่ง
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับคลิกเลือกตำแหน่งงาน <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับคลิกเพิ่ม/ลดจำนวนหรือกรอกจำนวนตัวเลข <br />
|
|
||||||
หมายเลข 3 ช่องสำหรับกรอกข้อมูลรายละเอียดหมายเหตุ <br />
|
|
||||||
หมายเลข 4 ช่องสำหรับคลิกเลือกข้อมูลปกติหรือติดเงือนไข <br />
|
|
||||||
หมายเลข 5 ช่องสำหรับกรอกรายละเอียดเงื่อนไข <br />
|
|
||||||
หมายเลข 6 ปุ่มสำหรับคลิกเพื่อบันทึกข้อมูลร่างเพิ่มตำแหน่ง <br />
|
|
||||||
หมายเลข 7 ปุ่มสำหรับคลิกเพื่อลบข้อมูลร่างการเพิ่มตำแหน่ง
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- สามารถเลือกกดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-pencil-outline"
|
|
||||||
style="margin: 0 5px; color: #02a998"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อแก้ไขข้อมูล และสามารถเลือกกดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-trash-can-outline"
|
|
||||||
style="margin: 0 5px; color: hsl(0, 100%, 50%)"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อลบข้อมูลดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/5_chartstru/3-45.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 45 แก้ไขและลบข้อมูล
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ไอคอนสำหรับคลิกเพื่อทำการแก้ไขรายละเอียดข้อมูลหน่วยงาน <br />
|
|
||||||
หมายเลข 2 ไอคอนสำหรับคลิกเพื่อทำการลบข้อมูลหน่วยงาน
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
<!-- </div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,345 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
const rightDrawerOpen = ref(false);
|
|
||||||
const text = ref("");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- <div class="row col-12">
|
|
||||||
<div class="col-9">
|
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<!-- <q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="custom-topic text-dark">
|
|
||||||
<div style="font-size: 16px; font-weight: 700">ระบบโครงสร้างอัตรากำลัง</div>
|
|
||||||
</div>
|
|
||||||
</q-card> -->
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="border-radius: 0px 0px 8px 8px"
|
|
||||||
>
|
|
||||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
|
||||||
3.5 จัดการบัญชี 2
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
|
||||||
- กดเลือกแถบเมนูย่อยของโครงสร้างอัตรากำลัง “แผนภูมิองค์กร”
|
|
||||||
ระบบแสดงหน้าจอดังรูป
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/03_structure/6_account2/3-46.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 46 หน้าผังโครงสร้าง
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 แถบเมนูหน่วยงานหรือสำนักงาน <br />
|
|
||||||
หมายเลข 2 ไอคอนซ่อนแถบเมนูหน่วยงานหรือสำนักงาน <br />
|
|
||||||
หมายเลข 3 การยืนยันออกคำสั่ง <br />
|
|
||||||
หมายเลข 4 ประวัติบัญชีจัดข้าราชการกรุงเทพฯสามัญเข้าตำแหน่งประเภท สายงาน
|
|
||||||
และระดับตำแหน่ง <br />
|
|
||||||
หมายเลข 5 ข้อมูลรายละเอียดจัดการบัญชี2 กรณีไม่มี ชื่อ-นามสกุล คือ
|
|
||||||
เลขที่ตำแหน่งนั้นยังไม่มีการถือครองหรือว่าง <br />
|
|
||||||
หมายเลข 6 ช่องค้นหา เพื่อสืบค้นข้อมูลที่ต้องการ <br />
|
|
||||||
หมายเลข 7 คอลัมน์ กดเลือกรายการเพื่อให้ข้อมูลที่เลือกถูกซ่อน
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- สามารถกดเลือกแถบเมนูหน่วยงานหรือสำนักงาน
|
|
||||||
ระบบจะแสดงรายละเอียดเฉพาะที่เลือกดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/03_structure/6_account2/3-47.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 47 รายละเอียดที่ได้ทำการเลือก
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- สามารถกดเลือกไอคอน
|
|
||||||
<span class="circle-icon" style="margin-left: 10px">
|
|
||||||
<span
|
|
||||||
style="
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 10px;
|
|
||||||
display: inline-flex; /* เพื่อให้สามารถใช้ transform ได้ */
|
|
||||||
transform: rotate(180deg); /* หมุน 90 องศาทางขวา */
|
|
||||||
"
|
|
||||||
>
|
|
||||||
>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
แถบเมนูหน่วยงานหรือสำนักงานจะถูกซ่อน ดังรูปภาพ
|
|
||||||
และเมื่อต้องการให้แสดงเหมือนเดิมให้กดไอคอน
|
|
||||||
<span class="circle-icon" style="margin-left: 10px">
|
|
||||||
<span
|
|
||||||
style="
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 10px;
|
|
||||||
display: inline-flex; /* เพื่อให้สามารถใช้ transform ได้ */
|
|
||||||
transform: rotate(0deg); /* หมุน 90 องศาทางขวา */
|
|
||||||
"
|
|
||||||
>
|
|
||||||
>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/03_structure/6_account2/3-48.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 48 ซ่อนแถบเมนูหน่วยงานหรือสำนักงาน
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px; display: flex">
|
|
||||||
- สามารถคลิกไอคอน
|
|
||||||
<span
|
|
||||||
class="q-btn__content text-center col items-center q-anchor--skip justify-center row"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="q-icon notranslate material-icons"
|
|
||||||
aria-hidden="true"
|
|
||||||
role="img"
|
|
||||||
>assignment_turned_in</i
|
|
||||||
>
|
|
||||||
</span>
|
|
||||||
เพื่อเพิ่มข้อมูลหน่วยงานและตำแหน่ง ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/6_account2/3-49.png"
|
|
||||||
style="
|
|
||||||
max-width: 70%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 49 ออกคำสั่ง
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- เมื่อกดปุ่ม “ยืนยัน” จะปรากฏป้ายเตือนบริเวณมุมขวาล่างดังรูปภาพ
|
|
||||||
และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการยืนยันเพื่อเอาไปออกคำสั่ง
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/03_structure/6_account2/3-50.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 50 ป้าย “ยืนยันเพื่อเอาไปออกคำสั่ง”
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 แถบเมนูหน่วยงานหรือสำนักงาน <br />
|
|
||||||
หมายเลข 2 ไอคอนซ่อนแถบเมนูหน่วยงานหรือสำนักงาน <br />
|
|
||||||
หมายเลข 3 การยืนยันออกคำสั่ง <br />
|
|
||||||
หมายเลข 4 ประวัติบัญชีจัดข้าราชการกรุงเทพฯสามัญเข้าตำแหน่งประเภท สายงาน
|
|
||||||
และระดับตำแหน่ง <br />
|
|
||||||
หมายเลข 5 ข้อมูลรายละเอียดจัดการบัญชี2 กรณีไม่มี ชื่อ-นามสกุล คือ
|
|
||||||
เลขที่ตำแหน่งนั้นยังไม่มีการถือครองหรือว่าง <br />
|
|
||||||
หมายเลข 6 ช่องค้นหา เพื่อสืบค้นข้อมูลที่ต้องการ <br />
|
|
||||||
หมายเลข 7 คอลัมน์ กดเลือกรายการเพื่อให้ข้อมูลที่เลือกถูกซ่อน
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="
|
|
||||||
margin-top: 50px;
|
|
||||||
margin-left: 10px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
- สามารถคลิกไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-plus"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อดูประวัติบัญชีจัดการข้าราชการกรุงเทพฯ ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/6_account2/3-51.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 51 ซ่อนแถบเมนูหน่วยงานหรือสำนักงาน
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="
|
|
||||||
margin-top: 50px;
|
|
||||||
margin-left: 10px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
- สามารถสืบค้นข้อมูลที่ช่องค้นหา
|
|
||||||
และทีช่องคอลัมน์สามารถเลือกรายการที่ต้องการซ่อนได้ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/6_account2/3-52.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 52 รายละเอียดที่ได้ทำการเลือก
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1
|
|
||||||
ช่องสำหรับกรอกเพื่อค้นหาข้อมูลจัดการบัญชีที่ต้องการรายละเอียดข้อมูล
|
|
||||||
<br />
|
|
||||||
หมายเลข 2
|
|
||||||
ช่องสำหรับคลิกเลือกหัวคอลัมแสดงตารางข้อมูลตามที่ได้ทำการคลิกเลือกคอมลัมน์แสดงข้อมูลไว้
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
<!-- </div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.circle-icon {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
background-color: hwb(0 100% 0%);
|
|
||||||
border: 1px solid hwb(0 86% 14% / 0.611);
|
|
||||||
border-radius: 50%;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-right: 10px;
|
|
||||||
vertical-align: middle;
|
|
||||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงา */
|
|
||||||
}
|
|
||||||
|
|
||||||
.col,
|
|
||||||
.col-xs {
|
|
||||||
flex: 0 0 5%;
|
|
||||||
color: #00aa86;
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,390 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
const rightDrawerOpen = ref(false);
|
|
||||||
const text = ref("");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- <div class="row col-12">
|
|
||||||
<div class="col-9">
|
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<!-- <q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="custom-topic text-dark">
|
|
||||||
<div style="font-size: 16px; font-weight: 700">ระบบโครงสร้างอัตรากำลัง</div>
|
|
||||||
</div>
|
|
||||||
</q-card> -->
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="border-radius: 0px 0px 8px 8px"
|
|
||||||
>
|
|
||||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
|
||||||
3.6 รายงานบัญชี
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
|
||||||
- กดเลือกแถบเมนูย่อยของโครงสร้างอัตรากำลัง “รายงานบัญชี” ระบบแสดงดังรูปภาพ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/03_structure/7_report/3-53.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 53 หน้ารายงานบัญชี
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 แถบบัญชี <br />
|
|
||||||
หมายเลข 2 เลือกรายการหน่วยงานหรือส่วนราชการที่ต้องการออกรายงาน <br />
|
|
||||||
หมายเลข 3 ดาวน์โหลดรายงาน
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- กดเลือกบัญชี 1 เพื่อออกรายงานหน่วยงาน ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/03_structure/7_report/3-54.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 54 เลือกหน่วยงานเพื่อออกรายงาน
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="
|
|
||||||
margin-top: 50px;
|
|
||||||
margin-left: 10px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
- เมื่อเลือกหน่วยงานที่ต้องการออกรายงานได้แล้วให้กดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-download"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อดาวน์โหลดไฟล์โดยไฟล์ที่ได้จะเป็นไฟล์ PDF ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/7_report/3-55.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 55 กดดาวน์โหลดไฟล์
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อดาวน์โหลดไฟล์ข้อมูลรายงานนบัญชี
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="
|
|
||||||
margin-top: 50px;
|
|
||||||
margin-left: 10px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
- โดยจะได้รายงานเป็นไฟล์ PDF ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/7_report/3-56.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 56 ไฟล์รายงานบัญชีของหน่วยงานที่เลือก
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="
|
|
||||||
margin-top: 50px;
|
|
||||||
margin-left: 10px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
- กดเลือกบัญชี2 เพื่อออกรายงานส่วนราชการ ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/7_report/3-57.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 57 เลือกส่วนราชการเพื่อออกรายงาน
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="
|
|
||||||
margin-top: 50px;
|
|
||||||
margin-left: 10px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
- เมื่อเลือกหน่วยงานที่ต้องการออกรายงานได้แล้วให้กดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-download"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อดาวน์โหลดไฟล์โดยไฟล์ที่ได้จะเป็นไฟล์ PDF ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/7_report/3-58.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 58 กดดาวน์โหลดไฟล์
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อดาวน์โหลดไฟล์ข้อมูลรายงานนบัญชี 2
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="
|
|
||||||
margin-top: 50px;
|
|
||||||
margin-left: 10px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
- โดยจะได้รายงานเป็นไฟล์ PDF ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/7_report/3-59.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 59 ไฟล์รายงานบัญชีของส่วนราชการที่เลือก
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="
|
|
||||||
margin-top: 50px;
|
|
||||||
margin-left: 10px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
- กดเลือกบัญชี 3 เพื่อออกรายงานส่วนราชการ ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/7_report/3-60.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 60 เลือกส่วนราชการเพื่อออกรายงาน
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="
|
|
||||||
margin-top: 50px;
|
|
||||||
margin-left: 10px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
- เมื่อเลือกหน่วยงานที่ต้องการออกรายงานได้แล้วให้กดไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-download"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อดาวน์โหลดไฟล์โดยไฟล์ที่ได้จะเป็นไฟล์ PDF ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/7_report/3-61.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 61 กดดาวน์โหลดไฟล์
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อดาวน์โหลดไฟล์ข้อมูลรายงานนบัญชี 3
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="
|
|
||||||
margin-top: 50px;
|
|
||||||
margin-left: 10px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
- โดยจะได้รายงานเป็นไฟล์ PDF ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
<q-img
|
|
||||||
class="col-12"
|
|
||||||
src="@/assets/manual/03_structure/7_report/3-62.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 - 62 ไฟล์รายงานบัญชีของส่วนราชการที่เลือก
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
<!-- </div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,265 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
const rightDrawerOpen = ref(false);
|
|
||||||
const text = ref("");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- <div class="row col-12">
|
|
||||||
<div class="col-9">
|
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<!-- <q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="custom-topic text-dark">
|
|
||||||
<div style="font-size: 16px; font-weight: 700">ระบบโครงสร้างอัตรากำลัง</div>
|
|
||||||
</div>
|
|
||||||
</q-card> -->
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="border-radius: 0px 0px 8px 8px"
|
|
||||||
>
|
|
||||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
|
||||||
3.7 ผังโครงสร้างลูกจ้าง
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px"></div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/03_structure/8_chartemploy/3-63.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 – 63 หน้าผังโครงสร้างลูกจ้าง
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 รายการผังโครงสร้างลูกจ้าง <br />
|
|
||||||
หมายเลข 2 ไอคอนบวก เพื่อสร้างโครงสร้างและกรอบอัตรกำลัง <br />
|
|
||||||
หมายเลข 3 ช่องค้นหา เพื่อสืบค้นข้อมูลที่ต้องการ <br />
|
|
||||||
หมายเลข 4 คอลัมน์ กดเลือกรายการเพื่อให้ข้อมูลที่เลือกถูกซ่อน <br />
|
|
||||||
หมายเลข 5 ไอคอนถังขยะ สามารถคลิกเพื่อลบรายการผังโครงสร้างลูกจ้าง
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- เมื่อต้องการสร้างโครงสร้างและกรอบอัตรากำลัง ให้คลิกไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-plus"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
ระบบแสดงกล่องเพื่อให้กรอบข้อมูลดังรูป
|
|
||||||
เมื่อกรอกข้อมูลเรียบร้อยแล้วให้กดไอคอนบันทึกข้อมูล
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/03_structure/8_chartemploy/3-64.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 – 64 กรอกข้อมูลโครงสร้างหน่วยงาน
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับเลือกหน่วยงาน <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับเลือกรหัสหน่วยงาน <br />
|
|
||||||
หมายเลข 3 ช่องสำหรับเลือกรหัสส่วนราชการ <br />
|
|
||||||
หมายเลข 4 ช่องสำหรับชื่อย่อหน่วยงาน <br />
|
|
||||||
หมายเลข 5 ช่องสำหรับกรอกเลขที่หน่วยงาน <br />
|
|
||||||
หมายเลข 6 ช่องสำหรับกรอกเลขที่ส่วนราชการ <br />
|
|
||||||
หมายเลข 7 ช่องสำหรับกรอกเลขที่ฝ่าย/ส่วน <br />
|
|
||||||
หมายเลข 8 ช่องสำหรับกรอกเลขที่กอง <br />
|
|
||||||
หมายเลข 9 ช่องสำหรับเลือกประเภทหน่วยงาน <br />
|
|
||||||
หมายเลข 10 ช่องสำหรับเลือกระดับหน่วยงาน <br />
|
|
||||||
หมายเลข 11 ช่องสำหรับเลือกหน่วยงานต้นสังกัด <br />
|
|
||||||
หมายเลข 12 ช่องสำหรับเลือกหน่วยราชการต้นสังกัด <br />
|
|
||||||
หมายเลข 13 ช่องสำหรับเลือกลำดับผังโครงสร้าง <br />
|
|
||||||
หมายเลข 14 ช่องสำหรับเลือกหมายเลขโทรศัพท์ติดต่อจากภายนอก <br />
|
|
||||||
หมายเลข 15 ช่องสำหรับเลือกหมายเลขโทรศัพท์ติดต่อจากภายใน <br />
|
|
||||||
หมายเลข 16 ช่องสำหรับเลือกหมายเลขโทรสาร <br />
|
|
||||||
หมายเลข 17 ช่องสำหรับเลือกกรอกหน้าที่รับผิดชอบ
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px"></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/03_structure/8_chartemploy/3-65.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 – 65 กรอกข้อมูลโครงสร้างตำแหน่ง
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับเลือกสายงาน <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับเลือกตำแหน่ง <br />
|
|
||||||
หมายเลข 3 ช่องสำหรับเลือกด้าน/สาขา <br />
|
|
||||||
หมายเลข 4 ช่องสำหรับเลือกระดับ <br />
|
|
||||||
หมายเลข 5 ช่องสำหรับเลือกสถานภาพของตำแหน่ง <br />
|
|
||||||
หมายเลข 6 ช่องสำหรับเลือกเลขที่ตำแหน่ง <br />
|
|
||||||
หมายเลข 7 ช่องสำหรับกรอกคุณวุฒิ <br />
|
|
||||||
หมายเลข 8 ช่องสำหรับกรอกเงื่อนไขตำแหน่ง <br />
|
|
||||||
หมายเลข 9 ช่องสำหรับกรอกหมายเหตุ <br />
|
|
||||||
หมายเลข 10 ช่องสำหรับเลือหัวหน้า
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px"></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/03_structure/8_chartemploy/3-66.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 – 66 กรอกข้อมูลโครงสร้างตำแหน่ง(ต่อ)
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 กดเลือกปกติหรือติดเงื่อนไข <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับกรอกรายละเอียดเงื่อนไข <br />
|
|
||||||
หมายเลข 3 ปุ่มบันทึก
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- เมื่อต้องแก้ไขโครงสร้างและกรอบอัตรากำลัง
|
|
||||||
ให้คลิกเลือกรายการผังโครงสร้างลูกจ้าง
|
|
||||||
ระบบแสดงกล่องเพื่อให้แก้ไขข้อมูลดังรูป
|
|
||||||
เมื่อแก้ไขข้อมูลเรียบร้อยแล้วให้กดไอคอน บันทึกข้อมูล
|
|
||||||
โดยสามารถดูรายละเอียดตามรูปที่ 3 – 64, 3 – 65 และ3 - 66
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/03_structure/8_chartemploy/3-67.png"
|
|
||||||
style="
|
|
||||||
max-width: 70%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 3 – 67 แก้ไขข้อมูลโครงสร้างตำแหน่ง
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 กดเลือกปกติหรือติดเงื่อนไข <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับกรอกรายละเอียดเงื่อนไข <br />
|
|
||||||
หมายเลข 3 ปุ่มบันทึก
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
<!-- </div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,88 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import structuremain from "./31_Main.vue";
|
|
||||||
import position from "./32_Position.vue";
|
|
||||||
import structure from "./33_Structure.vue";
|
|
||||||
import organchart from "./34_organchart.vue";
|
|
||||||
import chartstru from "./35_chartstru.vue";
|
|
||||||
import account2 from "./36_account2.vue";
|
|
||||||
import report from "./37_report.vue";
|
|
||||||
import chartemploy from "./38_chartemploy.vue";
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div class="col-12 row">
|
|
||||||
<div
|
|
||||||
class="toptitle text-dark col-12 row items-center"
|
|
||||||
style="padding-top: 40px"
|
|
||||||
>
|
|
||||||
คู่มือการใช้งานระบบโครงสร้างอัตรากำลัง
|
|
||||||
</div>
|
|
||||||
<div class="row col-12 q-gutter-xs">
|
|
||||||
<div
|
|
||||||
id="structuremain"
|
|
||||||
name="1"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<structuremain />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="position"
|
|
||||||
name="2"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<position />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="structure"
|
|
||||||
name="3"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<structure />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="organchart"
|
|
||||||
name="4"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<organchart />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="chartstru"
|
|
||||||
name="5"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<chartstru />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="account2"
|
|
||||||
name="6"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<account2 />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="report"
|
|
||||||
name="7"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<report />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="chartemploy"
|
|
||||||
name="8"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<chartemploy />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
|
|
@ -1,129 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
const rightDrawerOpen = ref(false);
|
|
||||||
const text = ref("");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- <div class="row col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div> -->
|
|
||||||
<!--
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="custom-topic text-dark">
|
|
||||||
<div style="font-size: 16px; font-weight: 700">
|
|
||||||
ระบบทะเบียนประวัติ
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card> -->
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="border-radius: 0px 0px 8px 8px"
|
|
||||||
>
|
|
||||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
|
||||||
4.1 การเข้าสู่หน้าระบบทะเบียนประวัติ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
|
||||||
- เมื่อต้องการดูข้อมูลประวัติของข้าราชการกรุงเทพมหานครให้ทำการคลิกแถบเมนู “ทะเบียนประวัติ” ทางด้านซ้ายของระบบ ดังรูป
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/04_regist/1_main/4-1.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
width: 255px;
|
|
||||||
height: 307.73px;
|
|
||||||
|
|
||||||
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 4 – 1 แสดงการเลือกแถบเมนู หน้าระบบทะเบียนประวัติ ของข้อมูลข้าราชการกรุงเทพฯ
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- ระบบแสดงหน้าต่าง “ข้อมูลทะเบียนประวัติ” ดังรูป
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/04_regist/1_main/4-2.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 4 – 2 แสดงหน้าต่างข้อมูลทะเบียนประวัติ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 หัวข้อเมนูสำหรับเลือกหน่วยงานกรุงเทพฯ ที่ต้องการข้อมูลทะเบียนประวัติ <br>
|
|
||||||
หมายเลข 2 ช่องสำหรับการเลือกประเภทข้อมูลลูกจ้างที่ต้องการข้อมูล <br>
|
|
||||||
หมายเลข 3 ช่องสำหรับการกรอกจำนวนตัวเลขของเลขบัตรประจำตัวประชาชน <br>
|
|
||||||
หมายเลข 4 ช่องสำหรับกรอก ชื่อ-นามสกุลของลูกจ้างที่ต้องการค้นหา <br>
|
|
||||||
หมายเลข 5 ช่องสำหรับเลือกปีเกษียณที่ต้องการข้อมูล <br>
|
|
||||||
หมายเลข 6 ช่องสำหรับเลือกหัวข้อคอลัมน์ที่ต้องการให้ตารางแสดงข้อมูลตามคอลัมน์ที่เลือก <br>
|
|
||||||
หมายเลข 7 ช่องสำหรับเลือกหรือกรอกข้อมูลอายุราชการ <br>
|
|
||||||
หมายเลข 8 ปุ่มสำหรับคลิกเพื่อแสดงข้อมูลผู้พ้นจากราชการ <br>
|
|
||||||
หมายเลข 9 ปุ่มสำหรับแสดดงข้อมูลลูกจ้างที่ทดลองปฏิบัติหน้าที่ราชการ <br>
|
|
||||||
หมายเลข 10 ปุ่มสำหรับคลิกค้นหาหลังจากทำการกรอกข้อมูล หรือเลือกประเภทข้อมูลที่ต้องการ <br>
|
|
||||||
หมายเลข 11 ช่องสำหรับแสดงข้อมูลทะเบียนประวัติรายชื่อ
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</q-card>
|
|
||||||
<!-- </div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,530 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
const rightDrawerOpen = ref(false);
|
|
||||||
const text = ref("");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- <div class="row col-12">
|
|
||||||
<div class="col-9">
|
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<!-- <q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="custom-topic text-dark">
|
|
||||||
<div style="font-size: 16px; font-weight: 700">
|
|
||||||
ระบบทะเบียนประวัติ
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card> -->
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="border-radius: 0px 0px 8px 8px"
|
|
||||||
>
|
|
||||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
|
||||||
4.2 การค้นหาข้อมูลทะเบียนประวัติ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
|
||||||
<p>
|
|
||||||
- เมื่อเข้าสู่หน้า ทะเบียนประวัติ สามารถทำการค้นหารายชื่อข้อมูลต่างๆ
|
|
||||||
ได้จากการคลิกเมาส์เลือกประเภทข้อมูลของลูกจ้าง ดังในรูป
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/04_regist/2_find/4-3.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 4 – 3 แสดงช่องเลือกประเภทลูกจ้าง
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับคลิกเลือกประเภทลูกจ้างที่ต้องการข้อมูล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- ทำการใช้เมาส์คลิกเลือกประเภทข้อมูลลูกจ้างที่ต้องการข้อมูล
|
|
||||||
และทำการใช้เมาส์คลิกปุ่มค้นหา
|
|
||||||
จากนั้นระบบจะแสดงข้อมูลรายชื่อประวัติทะเบียนตามประเภทลูกจ้างที่ทำการเลือก
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/04_regist/2_find/4-4.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 4 – 4 แสดงการเลือกประเภทข้อมูลทะเบียนของลูกจ้าง
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับคลิกเลือกเมนูย่อยประเภทของลูกจ้างที่ต้องการข้อมูล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- ทำการใช้เมาส์คลิกช่อง “เลขประจำตัวประชาชน”
|
|
||||||
แล้วกรอกเลขบัตรประจำตัวประชาชนที่ต้องการค้นหาข้อมูลทะเบียนประวัติ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/04_regist/2_find/4-5.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 4 – 5 แสดงช่องกรอกเลขประจำตัวประชาชน
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับกรอกข้อมูลเลขบัตรประจำตัวประชาชนเพื่อค้นหา
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- ทำการใช้เมาส์คลิกปุ่ม “ค้นหา”
|
|
||||||
ระบบแสดงข้อมูลตรงตามเลขประจำตัวประชาชนที่กรอก
|
|
||||||
และหากต้องการค้นหาข้อมูลอื่นเพิ่มให้ทำการใช้เมาส์คลิกในช่อง
|
|
||||||
“เลขประจำตัวประชาชน” เพื่อลบข้อมูลเก่าออก และทำการกรอกข้อมูลใหม่ลงไป
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/04_regist/2_find/4-6.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 4 – 6 แสดงการกรอกเลขบัตรประจำตัวประชาชนเพื่อค้นหา
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับกรอกหมายเลขประจำตัวประชาชนที่ต้องการค้นหา <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับแสดงผลการค้นหาโดยการกรอกหมายเลขประจำตัวประชาชน
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 50px;
|
|
||||||
margin-left: 10px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
- สามารถกดเลือกไอคอน
|
|
||||||
|
|
||||||
<i
|
|
||||||
class="q-icon mdi mdi-close"
|
|
||||||
style="
|
|
||||||
color: white;
|
|
||||||
background-color: #d1d1d1;
|
|
||||||
margin-right: 10px;
|
|
||||||
margin-left: 10px;
|
|
||||||
border-radius: 20px;
|
|
||||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
|
||||||
"
|
|
||||||
>
|
|
||||||
</i>
|
|
||||||
|
|
||||||
ในช่อง “ชื่อ-นามสกุล” เพื่อลบข้อมูลเก่าออก และทำการกรอกข้อมูลใหม่ลงไป
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/04_regist/2_find/4-7.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 4 – 7 แสดงการกรอกชื่อ-นามสกุลเพื่อค้นหา
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับกรอกชื่อ-นามสกุลที่ต้องการค้นหา <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับแสดงผลการค้นหาโดยการกรอกชื่อ-นามสกุล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<div style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- ทำการใช้เมาส์คลิกช่อง “ปีเกษียณ”
|
|
||||||
และทำการกรอกหรือเลือกปีเกษียณของผู้ที่ต้องการข้อมูลทะเบียนประวัติ
|
|
||||||
และทำการคลิกปุ่ม “ค้นหา” ระบบแสดงข้อมูลตรงตามปีเกษียณที่เลือก
|
|
||||||
และหากต้องการค้นหาข้อมูลเพิ่มให้ทำการใช้เมาส์คลิก
|
|
||||||
|
|
||||||
<i
|
|
||||||
class="q-icon mdi mdi-close"
|
|
||||||
style="
|
|
||||||
color: white;
|
|
||||||
background-color: #d1d1d1;
|
|
||||||
margin-right: 10px;
|
|
||||||
margin-left: 10px;
|
|
||||||
border-radius: 20px;
|
|
||||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
|
||||||
"
|
|
||||||
>
|
|
||||||
</i>
|
|
||||||
|
|
||||||
ในช่อง “ปีเกษียณ” เพื่อลบข้อมูลเก่าออก
|
|
||||||
และทำการเลือกข้อมูลปีเกษียณใหม่ลงไป
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/04_regist/2_find/4-8.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 4 – 8 แสดงการเลือกและกรอกข้อมูลปีเกษียณเพื่อค้นหา
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับคลิกเลือกปีเกษียณที่ต้องการค้นหา <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับแสดงรายชื่อปีเกษียณที่ทำการคลิกเลือกค้นหา
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<div style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- ทำการใช้เมาส์คลิกช่อง “อายุราชการ”
|
|
||||||
และทำการกรอกหรือใช้เมาส์คลิกลูกศรขึ้นเพื่อเพิ่มตัวเลขจำนวนปีของผู้ที่ต้องการข้อมูลทะเบียนประวัติ
|
|
||||||
และทำการคลิกปุ่ม “ค้นหา” ระบบแสดงข้อมูลรายชื่อตรงตามปีเกษียณตามที่กรอก
|
|
||||||
และหากต้องการค้นหาข้อมูลอื่นเพิ่มให้ทำการใช้เมาส์คลิก
|
|
||||||
|
|
||||||
<i
|
|
||||||
class="q-icon mdi mdi-close"
|
|
||||||
style="
|
|
||||||
color: white;
|
|
||||||
background-color: #d1d1d1;
|
|
||||||
margin-right: 10px;
|
|
||||||
margin-left: 10px;
|
|
||||||
border-radius: 20px;
|
|
||||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
|
||||||
"
|
|
||||||
>
|
|
||||||
</i>
|
|
||||||
ในช่อง “ปีเกษียณ” เพื่อลบข้อมูลเก่าออก และทำการกรอกข้อมูลใหม่ลงไป
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/04_regist/2_find/4-9.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 4 – 9 แสดงการกรอกหรือคลิกเพิ่มตัวเลขของปีอายุราชการเพื่อค้นหา
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับกรอกอายุราชการเพื่อทำการค้นหารายชื่อที่ต้องการ
|
|
||||||
<br />
|
|
||||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลรายชื่อที่อายุราชการตรงตามที่กรอกค้นหา
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- ทำการใช้เมาส์คลิกช่อง “คอลัมน์”
|
|
||||||
เพื่อทำการเลือกหัวข้อคอลัมน์แสดงข้อมูลที่ต้องการ
|
|
||||||
หากต้องการให้ตารางแสดงข้อมูลเพียง ชื่อ-สกุล, ตำแหน่ง,
|
|
||||||
ตำแหน่งทางการบริหาร, เงินเดือน
|
|
||||||
ให้ใช้เมาส์ทำการคลิกหัวข้อคอลัมน์ที่เหลือให้กลายเป็นสีดำ
|
|
||||||
และหัวข้อที่ต้องการให้แสดงหรือหัวข้อคอลัมน์ที่เลือกจะเป็นสีเขียว
|
|
||||||
ดังในรูป
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/04_regist/2_find/4-10.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 4 – 10 แสดงการเลือกหัวข้อคอลัมน์ที่ต้องให้แสดง
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1
|
|
||||||
เมนูย่อยของช่องคอลัมน์สามารถทำการคลิกเลือกรายชื่อคอลัมน์สำหรับการแสดงข้อมูล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
-
|
|
||||||
ระบบแสดงตารางแสดงรายชื่อข้อมูลมูลทะเบียนประวัติตามหัวข้อคอลัมน์ที่ทำการเลือก
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/04_regist/2_find/4-11.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 4 – 11 แสดงรายชื่อข้อมูลทะเบียนประวัติตามหัวข้อคอลัมน์ที่เลือก
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องแสดงผลคอลัมน์ที่ทำการเลือกเพื่อแสดงข้อมูล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<div style="margin-top: 50px; margin-left: 10px; display: inline-block">
|
|
||||||
- ทำการใช้เมาส์คลิกปุ่ม
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="q-toggle__inner relative-position non-selectable q-toggle__inner--falsy"
|
|
||||||
aria-hidden="true"
|
|
||||||
style="
|
|
||||||
font-size: 24px;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0 0.3em !important ;
|
|
||||||
height: 0.45em;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="q-toggle__track"></div>
|
|
||||||
<div
|
|
||||||
class="q-toggle__thumb absolute flex flex-center no-wrap"
|
|
||||||
style="top: -0.07em"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
ให้กลายเป็น
|
|
||||||
<div
|
|
||||||
class="q-toggle__inner relative-position non-selectable q-toggle__inner--truthy text-positive"
|
|
||||||
aria-hidden="true"
|
|
||||||
style="
|
|
||||||
font-size: 24px;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0 0.3em !important ;
|
|
||||||
height: 0.45em;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="q-toggle__thumb absolute flex flex-center no-wrap"
|
|
||||||
style="top: -0.07em"
|
|
||||||
></div>
|
|
||||||
<div class="q-toggle__track"></div>
|
|
||||||
</div>
|
|
||||||
ในช่อง “แสดงข้อมูลผู้พ้นจากราชการ”
|
|
||||||
เพื่อแสดงข้อมูลรายชื่อทะเบียนประวัติผู้พ้นจากราชการ
|
|
||||||
จากนั้นใช้เมาส์คลิกปุ่ม “ค้นหา”
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/04_regist/2_find/4-12.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 4 – 12 แสดงรายชื่อข้อมูลผู้พ้นจากราชการ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับคลิกเลือกเพื่อดูข้อมูลผู้พ้นจากราชการ <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลรายชื่อผู้พ้นจากราชการ
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
<!-- </div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,483 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
const rightDrawerOpen = ref(false);
|
|
||||||
const text = ref("");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- <div class="row col-12">
|
|
||||||
<div class="col-9">
|
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<!-- <q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="custom-topic text-dark">
|
|
||||||
<div style="font-size: 16px; font-weight: 700">
|
|
||||||
ระบบทะเบียนประวัติ
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card> -->
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="border-radius: 0px 0px 8px 8px"
|
|
||||||
>
|
|
||||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
|
||||||
4.3 การดูรายละเอียดข้อมูลทะเบียนประวัติ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
|
||||||
<p>
|
|
||||||
- เมื่อเข้าสู้หน้าทะเบียนประวัติ
|
|
||||||
ให้ใช้เมาส์ทำการคลิกข้อมูลรายชื่อรายชื่อที่ต้องการดูรายละเอียด
|
|
||||||
ระบบจะแสดงข้อมูลตามหัวข้อย่อยตามตารางข้อมูลส่วนตัว ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/04_regist/3_detail/4-13.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 4 – 13 แสดงหน้าต่างทะเบียนประวัติ ข้อมูลส่วนตัว
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อทำการแก้ไขรายละเอียดข้อมูลส่วนตัว <br />
|
|
||||||
หมายเลข 2 ปุ่มสำหรับคลิกเพื่อกรอกข้อมูลออกจากราชการ <br />
|
|
||||||
หมายเลข 3 ปุ่มสำหรับคลิกเพื่อดูประวัติข้อมูลส่วนตัว <br />
|
|
||||||
หมายเลข 4 ปุ่มสำหรับคลิกเพื่อดาวน์โหลดไฟล์
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- ระบบจะแสดงข้อมูลตามหัวข้อย่อยตารางข้อมูลราชการ ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/04_regist/3_detail/4-14.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 4 – 14 แสดงหน้าต่างทะเบียนประวัติ ข้อมูลราชการ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อทำการแก้ไขรายละเอียดข้อมูลราชการ <br />
|
|
||||||
หมายเลข 2 ปุ่มสำหรับคลิกเพื่อดูประวัติข้อมูลราชการ
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- ระบบจะแสดงข้อมูลตามหัวข้อย่อยตารางข้อมูลที่อยู่ ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/04_regist/3_detail/4-15.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 4 – 15 แสดงหน้าต่างทะเบียนประวัติ ข้อมูลที่อยู่
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อทำการแก้ไขรายละเอียดข้อมูลที่อยู่ <br />
|
|
||||||
หมายเลข 2 ปุ่มสำหรับคลิกเพื่อดูประวัติข้อมูลที่อยู่
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- ระบบจะแสดงข้อมูลตามหัวข้อย่อยตารางข้อมูลครอบครัว ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/04_regist/3_detail/4-16.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 4 – 16 แสดงหน้าต่างทะเบียนประวัติ ข้อมูลครอบครัว
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อทำการแก้ไขรายละเอียดข้อมูลครอบครัว <br />
|
|
||||||
หมายเลข 2 ปุ่มสำหรับคลิกเพื่อดูประวัติข้อมูลครอบครัว
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="
|
|
||||||
margin-top: 50px;
|
|
||||||
margin-left: 10px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
- ระบบจะแสดงข้อมูลตามหัวข้อย่อยตารางข้อมูลใบอนุญาตประกอบอาชีพ,
|
|
||||||
ประวัติการศึกษาและการฝึกอบรม/ดูงาน ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/04_regist/3_detail/4-17.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 4 – 17 แสดงหน้าต่างทะเบียนประวัติข้อมูลใบอนุญาตประกอบอาชีพ
|
|
||||||
ประวัติการศึกษา การอบรม
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1
|
|
||||||
ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลใบอนุญาตประกอบอาชีพ
|
|
||||||
<br />
|
|
||||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลใบอนุญาตประกอบอาชีพ <br />
|
|
||||||
หมายเลข 3 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาใบประกอบอาชีพ <br />
|
|
||||||
หมายเลข 4 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลใบประกอบอาชีพ <br />
|
|
||||||
หมายเลข 5
|
|
||||||
ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลประวัติการศึกษา
|
|
||||||
<br />
|
|
||||||
หมายเลข 6 ช่องสำหรับแสดงข้อมูลประวัติการศึกษา <br />
|
|
||||||
หมายเลข 7 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาประวัติการศึกษา <br />
|
|
||||||
หมายเลข 8 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลประวัติการศึกษา <br />
|
|
||||||
หมายเลข 9
|
|
||||||
ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลการฝึกอบรมดูงาน
|
|
||||||
<br />
|
|
||||||
หมายเลข 10 ช่องสำหรับแสดงข้อมูลการฝึกอบรมดูงาน <br />
|
|
||||||
หมายเลข 11 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาการฝึกอบรมดูงาน <br />
|
|
||||||
หมายเลข 12 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลการฝึกอบรมดูงาน
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- ระบบจะแสดงข้อมูลตามหัวข้อย่อยตารางข้อมูลเครื่องราชอิสริยาภรณ์,
|
|
||||||
ประกาศเกียรติคุณและผลการประเมินการปฏิบัติราชการ ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/04_regist/3_detail/4-18.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 4 – 18 แสดงหน้าต่างทะเบียนประวัติข้อมูลเครื่องราชฯ
|
|
||||||
ประกาศเกียรติคุณ ผลการประเมิน
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1
|
|
||||||
ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลเครื่องราชอิสริยาภรณ์
|
|
||||||
<br />
|
|
||||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลเครื่องราชอิสริยาภรณ์ <br />
|
|
||||||
หมายเลข 3 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาเครื่องราชอิสริยาภรณ์ <br />
|
|
||||||
หมายเลข 4 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลเครื่องราชอิสริยาภรณ์
|
|
||||||
<br />
|
|
||||||
หมายเลข 5
|
|
||||||
ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลประกาศเกียรติคุณ
|
|
||||||
<br />
|
|
||||||
หมายเลข 6 ช่องสำหรับแสดงข้อมูลประกาศเกียรติคุณ <br />
|
|
||||||
หมายเลข 7 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาประกาศเกียรติคุณ <br />
|
|
||||||
หมายเลข 8 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลประกาศเกียรติคุณ <br />
|
|
||||||
หมายเลข 9
|
|
||||||
ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลผลการประเมินการปฏิบัติราชการ
|
|
||||||
<br />
|
|
||||||
หมายเลข 10 ช่องสำหรับแสดงข้อมูลผลการประเมินการปฏิบัติราชการ <br />
|
|
||||||
หมายเลข 11 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาผลการประเมินการปฏิบัติราชการ
|
|
||||||
<br />
|
|
||||||
หมายเลข 12
|
|
||||||
ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลผลการประเมินการปฏิบัติราชการ
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- ระบบจะแสดงข้อมูลตามหัวข้อย่อยตารางข้อมูลตำแหน่งเงินเดือน,
|
|
||||||
วินัยและการลา ดังรูปรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/04_regist/3_detail/4-19.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 4 – 19 แสดงหน้าต่างทะเบียนประวัติข้อมูลตำแหน่งเงินเดือน,
|
|
||||||
วินัยและการลา
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1
|
|
||||||
ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลตำแหน่งเงินเดือน
|
|
||||||
<br />
|
|
||||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลตำแหน่งเงินเดือน <br />
|
|
||||||
หมายเลข 3 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาข้อมูลตำแหน่งเงินเดือน <br />
|
|
||||||
หมายเลข 4 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลตำแหน่งเงินเดือน <br />
|
|
||||||
หมายเลข 5 ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลวินัย
|
|
||||||
<br />
|
|
||||||
หมายเลข 6 ช่องสำหรับแสดงข้อมูลวินัย <br />
|
|
||||||
หมายเลข 7 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาข้อมูลเกี่ยวกับวินัย <br />
|
|
||||||
หมายเลข 8 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลวินัย <br />
|
|
||||||
หมายเลข 9 ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลการลา
|
|
||||||
<br />
|
|
||||||
หมายเลข 10 ปุ่มสำหรับแสดงข้อมูลสรุปวันลา <br />
|
|
||||||
หมายเลข 11 ช่องสำหรับแสดงข้อมูลการลา <br />
|
|
||||||
หมายเลข 12 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาข้อมูลการลา <br />
|
|
||||||
หมายเลข 13 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลการลา
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- ระบบจะแสดงข้อมูลตามหัวข้อย่อยตารางข้อมูลความสามารถพิเศษ,
|
|
||||||
ปฏิบัติราชการพิเศษและวันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้อัยการศึก
|
|
||||||
ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/04_regist/3_detail/4-20.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 4 – 20 แสดงหน้าต่างทะเบียนประวัติข้อมูลความสามารถพิเศษ,
|
|
||||||
ปฏิบัติราชการพิเศษฯ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1
|
|
||||||
ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลความสามารถพิเศษ
|
|
||||||
<br />
|
|
||||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลความสามารถพิเศษ <br />
|
|
||||||
หมายเลข 3 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาความสามารถพิเศษ <br />
|
|
||||||
หมายเลข 4 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลความสามารถพิเศษ <br />
|
|
||||||
หมายเลข 5
|
|
||||||
ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลปฏิบัติราชการพิเศษ
|
|
||||||
<br />
|
|
||||||
หมายเลข 6 ช่องสำหรับแสดงข้อมูลปฏิบัติราชการพิเศษ <br />
|
|
||||||
หมายเลข 7 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาปฏิบัติราชการพิเศษ <br />
|
|
||||||
หมายเลข 8 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลปฏิบัติราชการพิเศษ
|
|
||||||
<br />
|
|
||||||
หมายเลข 9
|
|
||||||
ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลผลการประเมินการปฏิบัติราชการ
|
|
||||||
<br />
|
|
||||||
หมายเลข 10
|
|
||||||
ช่องสำหรับแสดงข้อมูลวันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้อัยการศึก
|
|
||||||
<br />
|
|
||||||
หมายเลข 11
|
|
||||||
ช่องสำหรับกรอกข้อมูลเพื่อค้นหาข้อมูลวันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้อัยการศึก
|
|
||||||
<br />
|
|
||||||
หมายเลข 12
|
|
||||||
ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลวันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้อัยการศึก
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- ระบบจะแสดงข้อมูลตามหัวข้อย่อยตารางข้อมูลอื่นๆ และเอกสารหลักฐาน
|
|
||||||
ดังรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/04_regist/3_detail/4-21.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 4 – 21 แสดงหน้าต่างทะเบียนประวัติข้อมูลอื่นๆ และเอกสารหลักฐาน
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หหมายเลข 1 ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลอื่นๆ
|
|
||||||
<br />
|
|
||||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลอื่นๆ <br />
|
|
||||||
หมายเลข 3 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาข้อมูลอื่นๆ <br />
|
|
||||||
หมายเลข 4 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลอื่นๆ <br />
|
|
||||||
หมายเลข 5
|
|
||||||
ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขอัปโหลดไฟล์เอกสารเพิ่มเติม
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
<!-- </div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,138 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
const rightDrawerOpen = ref(false);
|
|
||||||
const text = ref("");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- <div class="row col-12">
|
|
||||||
<div class="col-9">
|
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<!-- <q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="custom-topic text-dark">
|
|
||||||
<div style="font-size: 16px; font-weight: 700">
|
|
||||||
ระบบทะเบียนประวัติ
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card> -->
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="border-radius: 0px 0px 8px 8px"
|
|
||||||
>
|
|
||||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
|
||||||
4.5 การค้นหาข้อมูลส่วนตัว การเลือกคอลัมน์แสดงผลข้อมูล
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 20px; margin-left: 10px">
|
|
||||||
- หากต้องการค้นหาข้อมูลในหัวข้อต่างๆ
|
|
||||||
ในหน้าข้อมูลส่วนตัวที่ทำการบันทึกให้ทำการคลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-magnify"
|
|
||||||
style="margin: 0 5px; color: #afafaf"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
ที่ช่องค้นหาของแต่ละหัวข้อและทำการกรอกข้อมูลที่เกี่ยวข้องกับบันทึกก่อนหน้า
|
|
||||||
นี้ลงไประบบจะแสดงข้อมูลที่ทำการค้นหา
|
|
||||||
แต่หากต้องการยกเลิกการดูข้อมูลที่ทำการค้นหาให้ทำการใช้เมาส์คลิกที่
|
|
||||||
<q-icon
|
|
||||||
name="mdi-close"
|
|
||||||
style="margin: 0 5px; color: #afafaf"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
ในช่องกรอกข้อมูลค้นหาเพื่อยกเลิกค้นหาข้อมูล
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/04_regist/5_select/4-81.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 4 – 81 แสดงตารางการค้นหาข้อมูล
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับกรอกข้อมูลสำหรับการค้นหา <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลจากการกรอกค้นหา
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- หากต้องการให้ตารางแสดงคอลัมน์ข้อมูลตามที่ต้องการให้ใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-menu-down"
|
|
||||||
style="margin: 0 5px; color: #afafaf"
|
|
||||||
size="sm"
|
|
||||||
/>
|
|
||||||
ในช่องคอลัมน์เพื่อทำการเลือกหัวข้อคอลัมน์แสดงข้อมูลของตารางที่ต้องการข้อมูลและหากหัวคอลัมน์
|
|
||||||
แสดงข้อมูลไม่ครบและต้องการให้คอลัมน์แสดงผลเพิ่มขึ้นและลดลงหรือให้ตารางทำการแสดงหัวข้อคอลัมน์เหมือนเดิมให้ทำการใช้เมาส์คลิกที่รายชื่อหัวข้อตารางให้กลับมาเป็นสีเขียว
|
|
||||||
เหมือนเดิมหัวข้อคอลัมน์ก็จะแสดงเหมือนเดิม
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/04_regist/5_select/4-82.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 4 – 82 แสดงตารางการเลือกคอลัมน์แสดงข้อมูล
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับคลิกเพื่อเลือกหัวคอลัมน์แสดงข้อมูล <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลหัวคอลัมน์ที่ใช้ในการเลือกแสดงข้อมูล
|
|
||||||
<br />
|
|
||||||
หมายเลข 3 ช่องสำหรับแสดงตารางข้อมูลตามคอลัมน์ที่ทำการเลือก
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
<!-- </div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,256 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
const rightDrawerOpen = ref(false);
|
|
||||||
const text = ref("");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- <div class="row col-12">
|
|
||||||
<div class="col-9">
|
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<!-- <q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="custom-topic text-dark">
|
|
||||||
<div style="font-size: 16px; font-weight: 700">
|
|
||||||
ระบบทะเบียนประวัติ
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card> -->
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="border-radius: 0px 0px 8px 8px"
|
|
||||||
>
|
|
||||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
|
||||||
4.6 การปรับหน้าต่างแสดงผลหน้าข้อมูลส่วนตัว
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div style="margin-top: 20px; margin-left: 10px">
|
|
||||||
-
|
|
||||||
หากต้องการให้หน้าแสดงผลหน้าข้อมูลส่วนตัวของพนักงานแสดงข้อมูลเต็มจอให้ใช้เมาส์คลิก
|
|
||||||
<i
|
|
||||||
class="q-icon mdi mdi-backburger"
|
|
||||||
style="
|
|
||||||
color: #747474;
|
|
||||||
background-color: #dadada;
|
|
||||||
margin-right: 5px;
|
|
||||||
margin-left: 5px;
|
|
||||||
border-radius: 20px;
|
|
||||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
|
||||||
"
|
|
||||||
>
|
|
||||||
</i>
|
|
||||||
เพื่อให้แถบเมนูด้านข้างของหน้าจอพับเก็บเข้าด้านข้าง และระบบจะแสดง
|
|
||||||
ข้อมูลของพนักงานเต็มจอ
|
|
||||||
และหากต้องการให้ระบบแสดงแถบเมนูเหมือนเดิมให้ใช้เมาส์ทำการคลิก
|
|
||||||
<i
|
|
||||||
class="q-icon mdi mdi-backburger"
|
|
||||||
style="
|
|
||||||
color: #747474;
|
|
||||||
background-color: #dadada;
|
|
||||||
margin-right: 5px;
|
|
||||||
margin-left: 5px;
|
|
||||||
border-radius: 20px;
|
|
||||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
|
||||||
"
|
|
||||||
>
|
|
||||||
</i>
|
|
||||||
เพื่อให้แถบเมนูแสดงเหมือนเดิม
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/04_regist/6_window/4-83.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 4 – 83 แสดงการพับแถบเมนูด้ายซ้ายเพื่อให้ข้อมูลแสดงเต็มจอ
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อเปิด-ปิด แถบเมนูด้านข้าง
|
|
||||||
เพื่อให้ระบบแสดงข้อมูลส่วนกว้างขึ้น
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
-
|
|
||||||
สามารถทำการคลิกเลือกหัวข้อเมนูตารางเพื่อให้ระบบเลื่อนตารางให้อัตโนมัติด้วยการคลิกชื่อหัวตารางจากแถบเมนูด้านขวาได้
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/04_regist/6_window/4-84.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 4 – 84 แสดงแถบหัวข้อเมนูตาราง
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 แถบหัวข้อเมนูตารางข้อมูลส่วนตัวสำหรับกดคลิกชื่อตาราง
|
|
||||||
เพื่อให้ระบบเลื่อนไปยังตารางนั้นๆได้
|
|
||||||
เพื่อให้ง่ายต่อการดูข้อมูลและแก้ไขข้อมูล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- หากต้องการดาวน์โหลดไฟล์เอกสาร ก.พ.7/ก.ก.1 และ
|
|
||||||
และวัติแบบย่อให้ใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-file-eye-outline"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อดาวน์โหลดข้อมูลของพนักงาน
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/04_regist/6_window/4-85.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 4 – 85 แสดงหน้าดาวน์โหลดไฟล์เอกสารของพนักงาน
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1
|
|
||||||
ข้อความสำหรับคลิกเลือกเพื่อดาวน์โหลดชนิดของเอกสารที่ต้องการดาวน์โหลด
|
|
||||||
โดยระบบแสดงการเลือกการดาวน์โหลดไฟล์เอกสาร ก.พ.7/ก.ก.1 และ
|
|
||||||
ประวัติแบบย่อของพนักงาน
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- และหากต้องการทำการบันทึกการออกจากราชการของพนักงานให้ใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-home-export-outline"
|
|
||||||
style="margin: 0 5px; color: hsl(0, 100%, 50%)"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
จากนั้นระบบจะทำการแสดงตาราง “ประเภทการพ้นราชการ”
|
|
||||||
ให้ทำการบันทึกข้อมูลให้ครบตามที่ระบบแนะนำ
|
|
||||||
หลังจากกรอกข้อมูลเสร็จแล้วให้ทำการคลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-content-save-outline"
|
|
||||||
style="margin: 0 5px; color: #01435f"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อยืนยันการบันทึกข้อมูล
|
|
||||||
และถ้าหากต้องการยกเลิกการเพิ่มข้อมูลให้ใช้เมาส์คลิก
|
|
||||||
<i
|
|
||||||
class="q-icon mdi mdi-close"
|
|
||||||
style="
|
|
||||||
color: red;
|
|
||||||
background-color: #ffe5e6;
|
|
||||||
margin-right: 5px;
|
|
||||||
margin-left: 5px;
|
|
||||||
border-radius: 20px;
|
|
||||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
|
||||||
"
|
|
||||||
>
|
|
||||||
</i>
|
|
||||||
เพื่อยกเลิกการบันทึกข้อมูล
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/04_regist/6_window/4-86.png"
|
|
||||||
style="
|
|
||||||
max-width: 70%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 4 – 86 แสดงตารางการเพิ่มข้อมูลประเภทการพ้นราชการ
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับคลิกเลือกประเภทการพ้นราชการ <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับคลิกเลือกวันที่พ้นราชการ <br />
|
|
||||||
หมายเลข 3 ช่องสำหรับกรอกข้อมูลรายละเอียดสาเหตุ/เหตุผลของการพ้นจากราชการ
|
|
||||||
<br />
|
|
||||||
หมายเลข 4 ช่องสำหรับกรอกข้อมูลคำสั่ง/เอกสารอ้างอิง <br />
|
|
||||||
หมายเลข 5 ช่องสำหรับคลิกเลือกวัน เดือน ปีที่ออกคำสั่ง
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
<!-- </div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,70 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import registrationmain from "./41_main.vue";
|
|
||||||
import registrationFind from "./42_find.vue";
|
|
||||||
import registrationDetail from "./43_detail.vue";
|
|
||||||
import registrationEdit from "./44_edit.vue";
|
|
||||||
import registrationSelect from "./45_select.vue";
|
|
||||||
import registrationWindow from "./46_window.vue";
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div class="col-12 row">
|
|
||||||
<div
|
|
||||||
class="toptitle text-dark col-12 row items-center"
|
|
||||||
style="padding-top: 40px"
|
|
||||||
>
|
|
||||||
คู่มือการใช้งานระบบทะเบียนประวัติ
|
|
||||||
</div>
|
|
||||||
<div class="row col-12 q-gutter-xs">
|
|
||||||
<div
|
|
||||||
id="registrationmain"
|
|
||||||
name="1"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<registrationmain />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="registrationFind"
|
|
||||||
name="2"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<registrationFind />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="registrationDetail"
|
|
||||||
name="3"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<registrationDetail />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="registrationEdit"
|
|
||||||
name="4"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<registrationEdit />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="registrationSelect"
|
|
||||||
name="5"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<registrationSelect />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="registrationWindow"
|
|
||||||
name="6"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<registrationWindow />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
|
|
@ -1,105 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
const rightDrawerOpen = ref(false);
|
|
||||||
const text = ref("");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- <div class="row col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="custom-topic text-dark">
|
|
||||||
<div style="font-size: 16px; font-weight: 700">
|
|
||||||
ระบบการสรรหาบุคคล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="border-radius: 0px 0px 8px 8px"
|
|
||||||
>
|
|
||||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
|
||||||
5.1 การเข้าสู่หน้าระบบสรรหา
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
|
||||||
- เมื่อต้องการเข้าหน้าระบบสรรหาเพื่อจัดการรอบการสอบ รอบคัดเลือก หรือการตั้งค่าเว็บสรรหาให้ทำการคลิกแถบเมนู “สรรหา” ทางด้านซ้ายของระบบ ดังรูป </div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/1_main/5-1.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
width: 255px;
|
|
||||||
height: 336.54px;
|
|
||||||
|
|
||||||
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพ 5 – 1 แสดงการเข้าหน้าระบบสรรหา
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- สามารถทำการตั้งค่าเว็บสรรหาได้โดยการใช้เมาส์คลิกเมนูย่อยของระบบสรรหา “ตั้งค่าเว็บสรรหา” ได้ตามรูปภาพ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/1_main/5-2.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
width: 255px;
|
|
||||||
height: 402.12px;
|
|
||||||
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพ 5 – 2 แสดงการเข้าหน้าตั้งค่าเว็บสรรหา
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</q-card>
|
|
||||||
<!-- </div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,613 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
const rightDrawerOpen = ref(false);
|
|
||||||
const text = ref("");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- <div class="row col-12">
|
|
||||||
<div class="col-9">
|
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<!-- <q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="custom-topic text-dark">
|
|
||||||
<div style="font-size: 16px; font-weight: 700">
|
|
||||||
ระบบทะเบียนประวัติ
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card> -->
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="border-radius: 0px 0px 8px 8px"
|
|
||||||
>
|
|
||||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
|
||||||
5.2 การตั้งค่าเว็บไซต์ระบบสรรหา
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div style="margin-top: 20px; margin-left: 10px">
|
|
||||||
- เมื่อต้องการตั้งค่าเว็บไซต์ระบบสรรหาให้ใช้เมาส์คลิก
|
|
||||||
|
|
||||||
<span
|
|
||||||
style="
|
|
||||||
background-color: #00aa86;
|
|
||||||
border: 1px solid #00aa86;
|
|
||||||
color: #ffffff;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0px 5px 0 2px;
|
|
||||||
margin-left: 5px;
|
|
||||||
margin-right: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<q-icon name="mdi-plus" style="color: #ffffff" size="xs" />
|
|
||||||
เพิ่มโลโก้
|
|
||||||
</span>
|
|
||||||
|
|
||||||
เพื่อเพิ่มโลโก้ของระบบ และหากยืนยันการใช้รูปภาพให้ทำการคลิก
|
|
||||||
<span
|
|
||||||
style="
|
|
||||||
background-color: #00aa86;
|
|
||||||
border: 1px solid #00aa86;
|
|
||||||
color: #ffffff;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0px 10px 0 5px;
|
|
||||||
margin-left: 0px;
|
|
||||||
margin-right: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-cloud-upload"
|
|
||||||
style="margin: 0 2px 0 2px; color: #ffffff"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
อัปโหลดไฟล์
|
|
||||||
</span>
|
|
||||||
เพื่อให้โลโก้แสดงที่ระบบสรรหา
|
|
||||||
และหากต้องการเพิ่มหรือเปลี่ยนรูปภาพแบนเนอร์หน้าหลักให้ใช้เมาส์คลิก
|
|
||||||
<span
|
|
||||||
style="
|
|
||||||
background-color: #2196f3;
|
|
||||||
border: 1px solid #2196f3;
|
|
||||||
color: #ffffff;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0px 5px;
|
|
||||||
margin-left: 5px;
|
|
||||||
margin-right: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<q-icon name="mdi-plus" style="color: #ffffff" size="xs" />
|
|
||||||
เพิ่มแบนเนอร์
|
|
||||||
</span>
|
|
||||||
<br />และหากยืนยันการใช้รูปภาพให้ทำการคลิก
|
|
||||||
<span
|
|
||||||
style="
|
|
||||||
background-color: #2196f3;
|
|
||||||
border: 1px solid #2196f3;
|
|
||||||
color: #ffffff;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0px 10px 0 5px;
|
|
||||||
margin-left: 5px;
|
|
||||||
margin-right: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-cloud-upload"
|
|
||||||
style="margin: 0 2px 0 2px; color: #ffffff"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
อัปโหลดแบนเนอร์
|
|
||||||
</span>
|
|
||||||
เพื่อให้รูปภาพแบนเนอร์หน้าหลักแสดงที่ระบบสรรหาดังรูป
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/2_setting/5-3.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพ 5 – 3 แสดงการเพิ่มโลโก้เว็บไซต์และแบนเนอร์หน้าหลัก
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- หากต้องการเพิ่มรายละเอียดของเว็บไซต์ให้ทำการใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-pencil-outline"
|
|
||||||
style="margin: 0 5px; color: #02a998"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
ที่ “รายละเอียดเว็บ” จากนั้นทำการกรอกข้อมูลรายละเอียดให้ครบ
|
|
||||||
จากนั้นทำการใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-content-save-outline"
|
|
||||||
style="margin: 0 5px; color: #01435f"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อยืนยันการบันทึกข้อมูล
|
|
||||||
แต่หากจะยกเลิกการแก้ไขหรือเพิ่มข้อมูลให้ใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-undo"
|
|
||||||
style="margin: 0 5px; color: hsl(0, 100%, 50%)"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อยกเลิกการแก้ไขหรือเพิ่ม
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/2_setting/5-4.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพ 5 – 4 แสดงการเพิ่มข้อมูลรายละเอียดเว็บ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับกรอกชื่อเว็บภาษาไทย <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับกรอกชื่อเว็บภาษาอังกฤษ <br />
|
|
||||||
หมายเลข 3 ช่องสำหรับกรอกข้อมูลผู้จัดโดย <br />
|
|
||||||
หมายเลข 4 ช่องสำหรับกรอกข้อมูลเว็บโดยย่อ
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- หากต้องการเพิ่มรายละเอียดข้อมูลเกี่ยวกับเว็บให้ทำการใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi mdi-plus"
|
|
||||||
style="margin: 0 5px; color: #02a998"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
ที่ “ข้อมูลเกี่ยวกับเรา” จากนั้นทำการเพิ่มข้อความหรือข้อมูลที่ต้องการ
|
|
||||||
โดยสามารถทำการจัดรูปแบบ ตัวหนังสือหรือรูปแบบฟอนต์จากในระบบได้เลย
|
|
||||||
จากนั้นทำการใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-content-save-outline"
|
|
||||||
style="margin: 0 5px; color: #01435f"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อยืนยันการบันทึกข้อมูล
|
|
||||||
แต่หากจะยกเลิกการแก้ไขหรือเพิ่มข้อมูลให้ใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-undo"
|
|
||||||
style="margin: 0 5px; color: hsl(0, 100%, 50%)"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อยกเลิกการแก้ไขหรือเพิ่ม
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/2_setting/5-5.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพ 5 – 5 แสดงการเพิ่มข้อมูลเกี่ยวกับเรา
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
-
|
|
||||||
หากต้องการเพิ่มรายละเอียดข้อมูลที่อยู่ให้ทำการใช้เมาส์คลิกช่องที่อยู่เพื่อเพิ่มข้อมูล
|
|
||||||
ในช่องตาราง “ข้อมูลเกี่ยวกับเรา” และทำการกรอกข้อมูลให้ครบตามที่ระบบแนะนำ
|
|
||||||
และกรอก ข้อมูลเบอร์โทรติดต่อสำนักงาน จากนั้นทำการใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-content-save-outline"
|
|
||||||
style="margin: 0 5px; color: #01435f"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อยืนยันการบันทึกข้อมูล
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/2_setting/5-6.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพ 5 – 6 แสดงการเพิ่มข้อมูลที่อยู่ของสำนักงาน
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับกรอกข้อมูลที่อยู่สำนักงาน <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับคลิกเลือกจังหวัด <br />
|
|
||||||
หมายเลข 3 ช่องสำหรับคลิกเลือกเขตหรืออำเภอ <br />
|
|
||||||
หมายเลข 4 ช่องสำหรับคลิกเลือกตำบลหรือแขวง <br />
|
|
||||||
หมายเลข 5 ช่องสำหรับแสดงรหัสไปรษณีย์หลังจากคลิกเลือกข้อมูลจังหวัด อำเภอ
|
|
||||||
และตำบล <br />
|
|
||||||
หมายเลข 6 ช่องสำหรับกรอกข้อมูลเบอร์โทรของสำนักงาน
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- หากต้องการเพิ่มข้อมูลส่วนราชการให้ทำการใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-pencil-outline"
|
|
||||||
style="margin: 0 5px; color: #02a998"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
ที่ตาราง “ส่วนราชการ”
|
|
||||||
จากนั้นทำการกรอกข้อมูลส่วนราชการให้ครบตามที่ระบบแนะนำ
|
|
||||||
หลังจากที่ทำการกรอก ข้อมูลเสร็จแล้วให้ทำกาใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-content-save-outline"
|
|
||||||
style="margin: 0 5px; color: #01435f"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อยืนยันการเพิ่มและบันทึกข้อมูล
|
|
||||||
และถ้าหากต้องการยกเลิกการเพิ่มหรือบันทึกข้อมูลให้ใช้เมาส์คลิก
|
|
||||||
<i
|
|
||||||
class="q-icon mdi mdi-close"
|
|
||||||
style="
|
|
||||||
color: red;
|
|
||||||
background-color: #ffe5e6;
|
|
||||||
margin-right: 5px;
|
|
||||||
margin-left: 5px;
|
|
||||||
border-radius: 20px;
|
|
||||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
|
||||||
"
|
|
||||||
>
|
|
||||||
</i>
|
|
||||||
เพื่อยกเลิกการบันทึกข้อมูล
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/2_setting/5-7.png"
|
|
||||||
style="
|
|
||||||
max-width: 70%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 7 แสดงตารางการเพิ่มข้อมูลส่วนราชการ
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับเพิ่มชื่อส่วนราชการที่ต้องการเพิ่มข้อมูล <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับเพิ่มลิงค์เว็บไซต์ของส่วนราชการที่ทำการเพิ่ม
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- หากต้องการค้นหาข้อมูลเพิ่มส่วนราชการที่ทำการบันทึกให้ทำการคลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-magnify"
|
|
||||||
style="margin: 0 5px; color: #afafaf"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
ที่ช่องค้นหาและทำการกรอกข้อมูลที่เกี่ยวข้องกับบันทึกก่อนหน้านี้ลงไประบบจะแสดงข้อมูล
|
|
||||||
ที่ทำการค้นหา
|
|
||||||
แต่หากต้องการยกเลิกการดูข้อมูลที่ทำการค้นหาให้ทำการใช้เมาส์คลิกที่
|
|
||||||
<q-icon
|
|
||||||
name="mdi-close"
|
|
||||||
style="margin: 0 5px; color: #afafaf"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
ในช่องกรอกข้อมูลค้นหาเพื่อยกเลิกค้นหาข้อมูล
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/2_setting/5-8.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 8 แสดงตารางการค้นหาข้อมูลเพิ่มส่วนราชการ
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับกรอกข้อมูลเพิ่มส่วนราชการสำหรับการค้นหา <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลส่วนราชการจากการกรอกข้อมูลเพื่อค้นหา
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- หากต้องการให้ตารางแสดงคอลัมน์ข้อมูลตามที่ต้องการให้ใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-menu-down"
|
|
||||||
style="margin: 0 5px; color: #afafaf"
|
|
||||||
size="sm"
|
|
||||||
/>
|
|
||||||
ในช่องคอลัมน์เพื่อทำการเลือกหัวข้อคอลัมน์แสดงข้อมูลของตาราง “ส่วนราชการ”
|
|
||||||
ที่ต้องการและ
|
|
||||||
หากต้องการให้ตารางแสดงหัวข้อคอลัมน์เพิ่มขึ้นหรือให้ตารางทำการแสดงหัวข้อคอลัมน์เหมือนเดิมให้ทำการใช้เมาส์คลิกที่รายชื่อหัวข้อตารางให้กลับมาเป็นสีเขียวเหมือนเดิมหัวข้อ
|
|
||||||
คอลัมน์ก็จะแสดงเหมือนเดิม
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/2_setting/5-9.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 9 แสดงตารางการเลือกคอลัมน์แสดงข้อมูลส่วนราชการ
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับคลิกเพื่อเลือกหัวคอลัมน์แสดงข้อมูลส่วนราชการ <br />
|
|
||||||
หมายเลข 2
|
|
||||||
ช่องสำหรับแสดงข้อมูลหัวคอลัมน์ที่ใช้ในการเลือกแสดงข้อมูลส่วนราชการ
|
|
||||||
<br />
|
|
||||||
หมายเลข 3 ช่องสำหรับแสดงตารางข้อมูลส่วนราชการตามคอลัมน์ที่ทำการเลือก
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- หากต้องการเพิ่มข้อมูลหน่วยงานให้ทำการใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-plus"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
ที่ตาราง “หน่วยงาน” จากนั้นทำการกรอกข้อมูลหน่วยงานให้ครบตามที่ระบบแนะนำ
|
|
||||||
หลังจากที่ทำการกรอกข้อมูล เสร็จแล้วให้ทำการใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-content-save-outline"
|
|
||||||
style="margin: 0 5px; color: #01435f"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อยืนยันการเพิ่มและบันทึกข้อมูล
|
|
||||||
และถ้าหากต้องการยกเลิกการเพิ่มหรือบันทึกข้อมูลให้ใช้เมาส์คลิก
|
|
||||||
<i
|
|
||||||
class="q-icon mdi mdi-close"
|
|
||||||
style="
|
|
||||||
color: red;
|
|
||||||
background-color: #ffe5e6;
|
|
||||||
margin-right: 5px;
|
|
||||||
margin-left: 5px;
|
|
||||||
border-radius: 20px;
|
|
||||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
|
||||||
"
|
|
||||||
>
|
|
||||||
</i>
|
|
||||||
เพื่อยกเลิกการบันทึกข้อมูล
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/2_setting/5-7.png"
|
|
||||||
style="
|
|
||||||
max-width: 70%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 10 แสดงตารางการเพิ่มข้อมูลหน่วยงาน
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับเพิ่มชื่อหน่วยงานที่ต้องการเพิ่มข้อมูล <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับเพิ่มลิงค์เว็บไซต์ของหน่วยงานที่ทำการเพิ่ม
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- หากต้องการค้นหาข้อมูลหน่วยงานทำการบันทึกให้ทำการคลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-magnify"
|
|
||||||
style="margin: 0 5px; color: #afafaf"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
ที่ช่องค้นหาและทำการกรอกข้อมูลที่เกี่ยวข้องกับบันทึกก่อนหน้านี้ลงไประบบจะแสดงข้อมูลที่ทำการค้นหา
|
|
||||||
แต่หากต้องการยกเลิกการดูข้อมูลที่ทำการค้นหาให้ทำการใช้เมาส์คลิกที่
|
|
||||||
<q-icon
|
|
||||||
name="mdi-close"
|
|
||||||
style="margin: 0 5px; color: #afafaf"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
ในช่องกรอกข้อมูลค้นหาเพื่อยกเลิกค้นหาข้อมูล
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/2_setting/5-11.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 11 แสดงตารางการค้นหาข้อมูลหน่วยงาน
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับกรอกข้อมูลหน่วยงานสำหรับการค้นหา <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลหน่วยงานจากการกรอกข้อมูลเพื่อค้นหา
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- หากต้องการให้ตารางแสดงคอลัมน์ข้อมูลตามที่ต้องการให้ใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-menu-down"
|
|
||||||
style="margin: 0 5px; color: #afafaf"
|
|
||||||
size="sm"
|
|
||||||
/>
|
|
||||||
ในช่องคอลัมน์เพื่อทำการเลือกหัวข้อคอลัมน์แสดงข้อมูลของตาราง “หน่วยงาน”
|
|
||||||
ที่ต้องการ
|
|
||||||
และหากต้องการให้ตารางแสดงหัวข้อคอลัมน์เพิ่มขึ้นหรือให้ตารางทำการแสดงหัวข้อคอลัมน์เหมือนเดิมให้ทำการใช้เมาส์คลิกที่รายชื่อหัวข้อตารางให้กลับมาเป็นสีเขียวเหมือนเดิมหัวข้อคอลัมน์ก็จะแสดงเหมือนเดิม
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/2_setting/5-12.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 12 แสดงตารางการเลือกคอลัมน์แสดงข้อมูลหน่วยงาน
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับคลิกเพื่อเลือกหัวคอลัมน์แสดงข้อมูลหน่วยงาน <br />
|
|
||||||
หมายเลข 2
|
|
||||||
ช่องสำหรับแสดงข้อมูลหัวคอลัมน์ที่ใช้ในการเลือกแสดงข้อมูลหน่วยงาน <br />
|
|
||||||
หมายเลข 3 ช่องสำหรับแสดงตารางข้อมูลหน่วยงานตามคอลัมน์ที่ทำการเลือก
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
<!-- </div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,879 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
const rightDrawerOpen = ref(false);
|
|
||||||
const text = ref("");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- <div class="row col-12">
|
|
||||||
<div class="col-9">
|
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<!-- <q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="custom-topic text-dark">
|
|
||||||
<div style="font-size: 16px; font-weight: 700">
|
|
||||||
ระบบการสรรหาบุคคล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card> -->
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="border-radius: 0px 0px 8px 8px"
|
|
||||||
>
|
|
||||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
|
||||||
5.3 สอบแข่งขัน
|
|
||||||
<span class="text-dark" style="font-weight: bold; font-size: 15px">
|
|
||||||
จัดการรอบสอบการแข่งขัน
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
|
||||||
- การเข้าสู่หน้าจัดการรอบสอบแข่งขันให้ใช้เมาส์คลิก “สอบแข่งขัน”
|
|
||||||
จากนั้นระบบจะแสดงเมนูย่อยให้ใช้เมาส์ทำการคลิกที่ “จัดการรอบสอบแข่งขัน”
|
|
||||||
อีกทีเพื่อเข้าสู่หน้าจัดการรอบ สอบแข่งขันต่างๆ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/3_managecompet/5-13.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
width: 255px;
|
|
||||||
height: 336.54px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 13 แสดงการเข้าสู่หน้าจัดการรอบสอบแข่งขัน
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- การเพิ่มรอบการสอบแข่งขันให้ทำการใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-plus"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
ที่หน้า “จัดการรอบสอบการแข่งขัน”
|
|
||||||
จากนั้นทำการกรอกข้อมูลเพื่อเพิ่มรอบสอบการแข่งขันให้ครบตามที่ระบบแนะนำ
|
|
||||||
หลังจากทำการกรอกข้อมูลเสร็จแล้วให้ทำการใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-content-save-outline"
|
|
||||||
style="margin: 0 5px; color: #01435f"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อยืนยันการเพิ่มและบันทึกข้อมูล
|
|
||||||
และถ้าหากต้องการยกเลิกการเพิ่มหรือบันทึกข้อมูลให้ใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-arrow-left"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อย้อนกลับไปยังหน้าแรก “จัดการรอบสอบแข่งขัน” หรือยกเลิกการเพิ่มข้อมูล
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/3_managecompet/5-14.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 14 แสดงตารางการเพิ่มข้อมูลเพิ่มรอบสอบแข่งขัน
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับกรอกชื่อรอบสอบแข่งขัน <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับกรอกรอบการสอบ(ครั้ง) <br />
|
|
||||||
หมายเลข 3 ช่องสำหรับกรอกปีงบประมาณ <br />
|
|
||||||
หมายเลข 4 ช่องสำหรับกรอกค่าธรรมเนียม <br />
|
|
||||||
หมายเลข 5 ช่องสำหรับกรอกวันที่สอบ <br />
|
|
||||||
หมายเลข 6 ช่องสำหรับกรอกวันที่ประกาศ <br />
|
|
||||||
หมายเลข 7 ช่องสำหรับกรอกวันที่สมัคร <br />
|
|
||||||
หมายเลข 8 ช่องสำหรับกรอกวันที่ชำระเงิน <br />
|
|
||||||
หมายเลข 9 ช่องสำหรับกรอกวันที่ประกาศผล <br />
|
|
||||||
หมายเลข 10 ช่องสำหรับเพิ่มรูปภาพประกอบ <br />
|
|
||||||
หมายเลข 11 ช่องสำหรับเพิ่มเอกสารประกอบ
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- หากต้องการแก้ไขข้อมูลรอบสอบแข่งขันให้ทำการใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-pencil-outline"
|
|
||||||
style="margin: 0 5px; color: #02a998"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อทำการแก้ไขข้อมูลหลังจากแก้ไขข้อมูลเสร็จเรียบร้อยแล้วให้ทำการใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-content-save-outline"
|
|
||||||
style="margin: 0 5px; color: #01435f"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อยืนยันการบันทึกข้อมูล
|
|
||||||
แต่หากจะลบข้อมูลรอบสอบแข่งขันรายการใดรายหารหนึ่งให้ทำการคลิกที่
|
|
||||||
<q-icon
|
|
||||||
name="mdi-delete"
|
|
||||||
style="margin: 0 5px; color: hsl(0, 100%, 50%)"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
และทำการยืนยันการลบข้อมูล
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/3_managecompet/5-15.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 15 แสดงตารางการแก้ไขและการลบรายการสอบแข่งขัน
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ไอคอนสำหรับคลิกเพื่อแก้ไขข้อมูลรอบสอบแข่งขัน <br />
|
|
||||||
หมายเลข 2 ไอคอนสำหรับคลิกเพื่อลบรอบสอบการแข่งขัน
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- หากต้องการค้นหาข้อมูลรายการสอบแข่งขันที่ทำการบันทึกให้ทำการคลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-magnify"
|
|
||||||
style="margin: 0 5px; color: #afafaf"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
ที่ช่องค้นหาและทำการกรอกข้อมูลที่เกี่ยวข้องกับบันทึกก่อนหน้านี้ลงไประบบจะแสดงข้อมูล
|
|
||||||
ที่ทำการค้นหา
|
|
||||||
แต่หากต้องการยกเลิกการดูข้อมูลที่ทำการค้นหาให้ทำการใช้เมาส์คลิกที่
|
|
||||||
<q-icon
|
|
||||||
name="mdi-close"
|
|
||||||
style="margin: 0 5px; color: #afafaf"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
ในช่องกรอกข้อมูลค้นหาเพื่อยกเลิกค้นหาข้อมูล
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/3_managecompet/5-16.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 16 แสดงตารางการค้นหาข้อมูลรายการสอบแข่งขัน
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับกรอกข้อมูลรายการสอบแข่งขันสำหรับการค้นหา <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลรายการสอบแข่งขันจากการกรอกข้อมูลเพื่อค้นหา
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- หากต้องการให้ตารางแสดงคอลัมน์ข้อมูลตามที่ต้องการให้ใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-menu-down"
|
|
||||||
style="margin: 0 5px; color: #afafaf"
|
|
||||||
size="sm"
|
|
||||||
/>
|
|
||||||
ในช่องคอลัมน์เพื่อทำการเลือกหัวข้อคอลัมน์แสดงข้อมูลของตาราง
|
|
||||||
“จัดการรอบสอบแข่งขัน”
|
|
||||||
ที่ต้องการและหากต้องการให้ตารางแสดงหัวข้อคอลัมน์เพิ่มขึ้นหรือให้ตารางทำการแสดงหัวข้อคอลัมน์เหมือนเดิมให้ทำการใช้เมาส์คลิกที่รายชื่อหัวข้อตารางให้กลับมาเป็นสีเขียวเหมือนเดิมหัวข้อคอลัมน์ก็จะแสดงเหมือนเดิม
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/3_managecompet/5-17.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 17 แสดงตารางการเลือกคอลัมน์แสดงข้อมูลจัดการรอบสอบแข่งขัน
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1
|
|
||||||
ช่องสำหรับคลิกเพื่อเลือกหัวคอลัมน์แสดงข้อมูลจัดการรอบสอบแข่งขัน <br />
|
|
||||||
หมายเลข 2
|
|
||||||
ช่องสำหรับแสดงข้อมูลหัวคอลัมน์ที่ใช้ในการเลือกแสดงข้อมูลจัดการรอบสอบแข่งขัน
|
|
||||||
<br />
|
|
||||||
หมายเลข 3
|
|
||||||
ช่องสำหรับแสดงตารางข้อมูลจัดการรอบสอบแข่งขันตามคอลัมน์ที่ทำการเลือก
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<div style="margin-top: 50px; margin-left: 10px">
|
|
||||||
-
|
|
||||||
หากต้องการดูข้อมูลประวัติการนำเข้าข้อมูลรายการสอบแข่งขันให้ใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-history"
|
|
||||||
style="margin: 0 5px; color: #31ccec"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
ในรายชื่อการสอบแข่งขันในช่องตาราง “จัดการรอบสอบแข่งขัน”
|
|
||||||
ที่ต้องการดูประวัติการนำ เข้าข้อมูลจากนั้นระบบจะแสดงตาราง
|
|
||||||
“ประวัติการนำเข้าข้อมูล”
|
|
||||||
และหากต้องการยกเลิกการดูประวัติการนำเข้าข้อมูลให้ทำการใช้เมาส์คลิก
|
|
||||||
<i
|
|
||||||
class="q-icon mdi mdi-close"
|
|
||||||
style="
|
|
||||||
color: red;
|
|
||||||
background-color: #ffe5e6;
|
|
||||||
margin-right: 5px;
|
|
||||||
margin-left: 5px;
|
|
||||||
border-radius: 20px;
|
|
||||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
|
||||||
"
|
|
||||||
>
|
|
||||||
</i>
|
|
||||||
เพื่อออกจากหน้าหรือยกเลิกการดูประวัติการนำเข้าข้อมูล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/3_managecompet/5-18.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 18 แสดงตารางประวัติการนำเข้าข้อมูล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
-
|
|
||||||
หากต้องการค้นหาประวัติการนำเข้าข้อมูลที่ทำการบันทึกก่อนหน้านี้ให้ทำการคลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-magnify"
|
|
||||||
style="margin: 0 5px; color: #afafaf"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
ที่ช่องค้นหาและทำการกรอกข้อมูลที่เกี่ยวข้องกับบันทึกก่อนหน้านี้ลงไประบบจะแสดงข้อมูล
|
|
||||||
ที่ทำการค้นหา
|
|
||||||
แต่หากต้องการยกเลิกการดูข้อมูลที่ทำการค้นหาให้ทำการใช้เมาส์คลิกที่
|
|
||||||
<q-icon
|
|
||||||
name="mdi-close"
|
|
||||||
style="margin: 0 5px; color: #afafaf"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
ในช่องกรอกข้อมูลค้นหาเพื่อยกเลิกค้นหาข้อมูล
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/3_managecompet/5-19.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 19 แสดงตารางประวัติการนำเข้าข้อมูล
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับกรอกข้อมูลประวัติการนำเข้าข้อมูลสำหรับการค้นหา
|
|
||||||
<br />
|
|
||||||
หมายเลข 2
|
|
||||||
ช่องสำหรับแสดงประวัติการการนำเข้าข้อมูลจากการกรอกข้อมูลเพื่อค้นหา
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- หากต้องการให้ตารางแสดงคอลัมน์ข้อมูลตามที่ต้องการให้ใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-menu-down"
|
|
||||||
style="margin: 0 5px; color: #afafaf"
|
|
||||||
size="sm"
|
|
||||||
/>
|
|
||||||
ในช่องคอลัมน์เพื่อทำการเลือกหัวข้อคอลัมน์แสดงข้อมูลของตาราง
|
|
||||||
“ประวัติการนำเข้าข้อมูล”
|
|
||||||
ที่ต้องการและหากต้องการให้ตารางแสดงหัวข้อคอลัมน์เพิ่มขึ้นหรือให้ตารางทำการแสดงหัวข้อคอลัมน์เหมือนเดิมให้ทำการใช้เมาส์คลิกที่รายชื่อหัวข้อตารางให้กลับมาเป็นสีเขียว
|
|
||||||
เหมือนเดิมหัวข้อคอลัมน์ก็จะแสดงเหมือนเดิม
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/3_managecompet/5-20.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 20
|
|
||||||
แสดงตารางการเลือกหัวข้อคอลัมน์แสดงประวัติการนำเข้าข้อมูล
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับคลิกเพื่อเลือกหัวคอลัมน์ประวัติการนำเข้าข้อมูล
|
|
||||||
<br />
|
|
||||||
หมายเลข 2 ช่องสำหรับเลือกหัวคอลัมน์ประวัติการนำเข้าข้อมูลที่ต้องการ
|
|
||||||
<br />
|
|
||||||
หมายเลข 3
|
|
||||||
ช่องสำหรับแสดงข้อมูลประวัติการนำเข้าข้อมูลตามคอลัมน์ที่ทำการเลือก
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<div style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- การดาวน์โหลดไฟล์รายชื่อผู้มีสิทธิ์สอบทั้งหมด
|
|
||||||
ให้ทำการใช้เมาส์ดับเบิ้ลคลิกที่
|
|
||||||
<i
|
|
||||||
class="q-icon mdi mdi-download"
|
|
||||||
style="
|
|
||||||
color: #02a998;
|
|
||||||
background-color: #e8f4f3;
|
|
||||||
margin-right: 5px;
|
|
||||||
margin-left: 5px;
|
|
||||||
border-radius: 20px;
|
|
||||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
|
||||||
"
|
|
||||||
>
|
|
||||||
</i>
|
|
||||||
รายการสอบที่ต้องการ จากนั้นทำการคลิก ระบบแสดงเมนูย่อย ทำการเลือก
|
|
||||||
“ส่งออกข้อมูล ผู้มีสิทธิ์สอบ” จากนั้นนำไฟล์อัปโหลดเพื่อแสดงข้อมูลต่อไป
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/3_managecompet/5-21.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 21 แสดงไฟล์รายชื่อผู้มีสิทธิ์สอบ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ชื่อไฟล์ต้องแสดงว่า “รายชื่อผู้มีสิทธิ์สอบ” <br />
|
|
||||||
หมายเลข 2 แสดงรายชื่อผู้มีสิทธิ์สอบในรอบที่ทำการเลือกโหลดไฟล์ออกมา
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- สามารถทำการดาวน์โหลดไฟล์รายชื่อผู้มีสิทธิ์สอบโดยการใช้เมาส์คลิกที่
|
|
||||||
<q-icon
|
|
||||||
name="mdi-clipboard-arrow-down"
|
|
||||||
style="margin: 0 5px; color: #3f51b5"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
ในคอลัมน์“จำนวนผู้สอบทั้งหมด” เพื่อทำการดาวน์โหลดไฟล์
|
|
||||||
หลังจากการคลิกระบบจะทำการโหลด ไฟล์รายชื่อผู้มีสิทธิ์สอบในรูปแบบไฟล์ pdf
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/3_managecompet/5-23.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 23 แสดงตารางการอัปโหลดไฟล์รายชื่อผู้สมัครสอบ
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องคอลัมน์ของ “จำนวนผู้สอบทั้งหมด” <br />
|
|
||||||
หมายเลข 2 ไอคอนสำหรับคลิกเพื่อดาวน์โหลดไฟล์รายชื่อผู้มีสิทธิ์สอบ <br />
|
|
||||||
หมายเลข 3 ตัวเลขแสดงจำนวนรายชื่อผู้สมัครสอบสอบ
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- หากต้องการนำเข้าไฟล์ผลคะแนนสอบให้ทำการใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-file-excel-outline"
|
|
||||||
style="margin: 0 5px; color: #4caf50"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
ที่ช่องคอลัมน์ “จำนวนผู้สอบทั้งหมด” จากนั้นทำการเลือกไฟล์ผลคะแนนสอบ ไฟล์
|
|
||||||
xlsx จากนั้นทำการใช้ เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-content-save-outline"
|
|
||||||
style="margin: 0 5px; color: #01435f"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อยืนยันการอัปโหลดไฟล์และบันทึกไฟล์
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/3_managecompet/5-24.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 24 แสดงตารางการอัปโหลดไฟล์ผลคะแนนสอบ
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องคอลัมน์ของ “จำนวนที่บันทึกผลสอบ” <br />
|
|
||||||
หมายเลข 2 ไอคอนสำหรับคลิกเพื่อนำเข้าไฟล์ผลคะแนนสอบ
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- สามารถทำการดาวน์โหลดไฟล์รายชื่อผู้สอบแข่งขันได้โดยการใช้เมาส์คลิกที่
|
|
||||||
<q-icon
|
|
||||||
name="mdi-clipboard-arrow-down"
|
|
||||||
style="margin: 0 5px; color: #3f51b5"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
ในคอลัมน์ “จำนวนที่บันทึกผลสอบ” เพื่อทำการดาวน์โหลดไฟล์
|
|
||||||
หลังจากการคลิกระบบจะทำการ โหลดไฟล์รายชื่อผู้สอบแข่งขันได้ในรูปแบบไฟล์
|
|
||||||
pdf
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/3_managecompet/5-25.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 25 แสดงตารางการดาวน์โหลดไฟล์รายชื่อผู้สอบแข่งขันได้
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องคอลัมน์ของ “จำนวนที่บันทึกผลสอบ” <br />
|
|
||||||
หมายเลข 2 ไอคอนสำหรับคลิกเพื่อดาวน์โหลดไฟล์รายชื่อผู้สอบแข่งขันได้
|
|
||||||
<br />
|
|
||||||
หมายเลข 3 ตัวเลขแสดงจำนวนรายชื่อที่บันทึกผลสอบ
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
-
|
|
||||||
สามารถทำการคลิกรายชื่อการสอบแข่งขันเพื่อดูรายชื่อผู้สมัครสอบทั้งหมดได้โดยการดับเบิ้ลคลิกที่รายการสอบแข่งขันที่ต้องการดูข้อมูล
|
|
||||||
จากนั้นระบบจะแสดงข้อมูลรายชื่อของ
|
|
||||||
ผู้สมัครสอบแข่งขันและแสดงผลสรูปจำนวนผู้สมัครสอบ
|
|
||||||
ผู้ที่สอบผ่านและสอบไม่ผ่านให้
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/3_managecompet/5-26.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 26 แสดงตารางรายชื่อผู้สมัครสอบแข่งขัน
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ชื่อตารางการสอบแข่งขัน <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับแสดงจำนวนตัวเลขผู้สมัครสอบ <br />
|
|
||||||
หมายเลข 3 ช่องสำหรับแสดงจำนวนตัวเลขผู้ที่สอบผ่าน <br />
|
|
||||||
หมายเลข 4 ช่องสำหรับแสดงจำนวนตัวเลขผู้ที่สอบไม่ผ่าน <br />
|
|
||||||
หมายเลข 5 ช่องสำหรับกรอกค้นหาข้อมูลรายชื่อบุคคล/ตำแหน่งที่สมัคร <br />
|
|
||||||
หมายเลข 6 ช่องสำหรับเลือกหัวคอลัมน์แสดงข้อมูล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- หากต้องการค้นหาข้อมูลที่เกี่ยวข้องกับผู้สมัครให้ทำการคลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-magnify"
|
|
||||||
style="margin: 0 5px; color: #afafaf"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
ที่ช่องค้นหาและทำการกรอกข้อมูลที่เกี่ยวข้องกับผู้สมัครหรือตำแหน่งที่สมัครลงไประบบจะแสดงข้อมูลที่ทำ
|
|
||||||
การค้นหา
|
|
||||||
แต่หากต้องการยกเลิกการดูข้อมูลที่ทำการค้นหาให้ทำการใช้เมาส์คลิกที่
|
|
||||||
<q-icon
|
|
||||||
name="mdi-close"
|
|
||||||
style="margin: 0 5px; color: #afafaf"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
ในช่องกรอกข้อมูลค้นหาเพื่อยกเลิกค้นหาข้อมูล
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/3_managecompet/5-27.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 27 แสดงตารางการค้นหาข้อมูลของผู้สมัครสอบแข่งขัน
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับกรอกข้อมูลที่เกี่ยวข้องกับผู้สมัครสำหรับการค้นหา
|
|
||||||
<br />
|
|
||||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลผู้สมัครจากการกรอกข้อมูลเพื่อค้นหา
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- หากต้องการให้ตารางแสดงคอลัมน์ข้อมูลตามที่ต้องการให้ใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-menu-down"
|
|
||||||
style="margin: 0 5px; color: #afafaf"
|
|
||||||
size="sm"
|
|
||||||
/>
|
|
||||||
ในช่องคอลัมน์เพื่อทำการเลือกหัวข้อคอลัมน์แสดงข้อมูลของตาราง
|
|
||||||
“รายชื่อผู้สมัครสอบแข่งขัน” ที่ต้องการ
|
|
||||||
และหากต้องการให้ตารางแสดงหัวข้อคอลัมน์เพิ่มขึ้นหรือให้ตารางทำการแสดงหัวข้อคอลัมน์เหมือนเดิมให้ทำการใช้เมาส์คลิกที่รายชื่อหัวข้อตารางให้กลับมาเป็นสีเขียว
|
|
||||||
เหมือนเดิมหัวข้อคอลัมน์ก็จะแสดงเหมือนเดิม
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/3_managecompet/5-28.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 28
|
|
||||||
แสดงตารางการเลือกคอลัมน์แสดงข้อมูลรายชื่อผู้สมัครสอบแข่งขัน
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1
|
|
||||||
ช่องสำหรับคลิกเพื่อเลือกหัวคอลัมน์แสดงข้อมูลรายชื่อผู้สมัครสอบแข่งขัน
|
|
||||||
<br />
|
|
||||||
หมายเลข 2
|
|
||||||
ช่องสำหรับแสดงข้อมูลหัวคอลัมน์ที่ใช้ในการเลือกแสดงข้อมูลรายชื่อผู้สมัครสอบแข่งขัน
|
|
||||||
<br />
|
|
||||||
หมายเลข 3
|
|
||||||
ช่องสำหรับแสดงตารางข้อมูลรายชื่อผู้สมัครสอบแข่งขันตามคอลัมน์ที่ทำการเลือก
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
-
|
|
||||||
สามารถคลิกเข้าดูรายละเอียดข้อมูลผู้สมัครสอบได้โดยการดับเบิ้ลคลิกที่รายชื่อผู้สมัครสอบที่ต้องการ
|
|
||||||
จากนั้นระบบจะแสดงรายละเอียดข้อมูลทั่วไป ผลคะแนนสอบและผลการสอบ
|
|
||||||
ของผู้สมัครให้
|
|
||||||
และหากต้องการดาวน์โหลดไฟล์ข้อมูลผู้สมัครให้ทำการใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-download"
|
|
||||||
style="margin: 0 5px; color: #2196f3"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
จากนั้นระบบจะทำการดาวน์โหลดไฟล์
|
|
||||||
หรือหากทำการดาวน์โหลดไฟล์ข้อมูลของผู้สมัครเสร็จแล้ว
|
|
||||||
ต้องการออกจากหน้าแสดงข้อมูลผู้สมัครให้ทำการคลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-arrow-left"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อย้อนกลับออกไปก่อนหน้านี้
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/3_managecompet/5-29.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 29 แสดงตารางการแสดงข้อมูลผู้สมัครสอบแข่งขัน
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ไอคอนสำหรับคลิกเพื่อย้อนกลับไปหน้าระบบก่อนหน้านี้ <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลทั่วไปของผู้สมัครสอบแข่งขัน <br />
|
|
||||||
หมายเลข 3 ช่องสำหรับแสดงผลคะแนนสอบของผู้สมัครสอบแข่งขัน <br />
|
|
||||||
หมายเลข 4 ช่องสำหรับแสดงผลการสอบของผู้สมัครสอบแข่งขัน <br />
|
|
||||||
หมายเลข 5 ปุ่มสำหรับคลิกเพื่อดาวน์โหลดข้อมูลของผู้สมัครสอบแข่งขัน
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- สามารถทำการดาวน์โหลดไฟล์ข้อมูลผู้มีสิทธิ์สอบ ข้อมูลผู้สอบผ่านภาค ก.
|
|
||||||
และข้อมูลผู้สอบแข่งขันโดยใช้เมาส์คลิก
|
|
||||||
<i
|
|
||||||
class="q-icon mdi mdi-download"
|
|
||||||
style="
|
|
||||||
color: #02a998;
|
|
||||||
background-color: #e8f4f3;
|
|
||||||
margin-right: 5px;
|
|
||||||
margin-left: 5px;
|
|
||||||
border-radius: 20px;
|
|
||||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
|
||||||
"
|
|
||||||
>
|
|
||||||
</i>
|
|
||||||
จากนั้นทำการเลือกการส่งออกข้อมูลของผู้สมัครหลังจากคลิกเลือกแล้วระบบจะทำการดาวน์โหลดไฟล์
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/3_managecompet/5-30.png"
|
|
||||||
style="
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 30 แสดงตารางการส่งออกข้อมูลผู้สมัครสอบแข่งขัน
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับคลิกเลือกข้อมูลเอกสารที่ต้องการดาวน์โหลด
|
|
||||||
โดยมีส่งออกข้อมูลผู้มีสิทธิ์สอบ, ส่งออกข้อมูลผู้สอบผ่านภาค ก.
|
|
||||||
และส่งออกข้อมูลผู้สอบแข่งขัน
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
<!-- </div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,232 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
const rightDrawerOpen = ref(false);
|
|
||||||
const text = ref("");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- <div class="row col-12">
|
|
||||||
<div class="col-9">
|
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<!-- <q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="custom-topic text-dark">
|
|
||||||
<div style="font-size: 16px; font-weight: 700">
|
|
||||||
ระบบการสรรหาบุคคล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card> -->
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="border-radius: 0px 0px 8px 8px"
|
|
||||||
>
|
|
||||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
|
||||||
5.3 สอบแข่งขัน
|
|
||||||
<span class="text-dark" style="font-weight: bold; font-size: 15px">
|
|
||||||
สถิติสมัครสอบแข่งขัน
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
|
||||||
- การเข้าสู่หน้าสถิติการสมัครสอบแข่งขันให้ใช้เมาส์คลิก “สอบแข่งขัน”
|
|
||||||
จากนั้นระบบจะแสดงเมนูย่อยให้ใช้เมาส์ทำการคลิกที่ “สถิติสมัครสอบแข่งขัน”
|
|
||||||
อีกที่เพื่อเข้าสู่หน้าข้อมูลสถิติ การสอบแข่งในต่างๆ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/4_staticompet/5-31.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
width: 255px;
|
|
||||||
height: 224.92px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 31 แสดงการเข้าสู่หน้าสถิติสมัครสอบแข่งขัน
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- การเลือกแสดงข้อมูลของรอบการสอบตามที่ต้องการ
|
|
||||||
ให้ใช้เมาส์คลิกช่องรอบการสอบเพื่อทำการเลือกรอบการสอบเพื่อแสดงข้อมูลสถิติสมัครสอบแข่งขันที่ต้องการทราบข้อมูล
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/4_staticompet/5-32.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 32 แสดงการเลือกรอบการทดสอบ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ตำแหน่งแสดงชื่อหน้าสถิติสมัครสอบแข่งขัน <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับเลือกรอบการสอบสมัครสอบแข่งขันสำหรับแสดงข้อมูลสถิติ
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- การดาวน์โหลดข้อมูลสถิติต่างๆ ออกมาในรูปแบบไฟล์ xlsx
|
|
||||||
เพื่อเอาข้อมูลไปต่อยอดการใช้งานโดยให้ใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-dots-vertical"
|
|
||||||
style="margin: 0 5px; color: hsl(0, 0%, 18%)"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
มุมขวาบนในช่องข้อมูลสถิติที่ต้องการดาวน์ไฟล์ข้อมูล คลิกเลือก Inspect >>
|
|
||||||
Data ระบบจะแสดงข้อมูลออกมาในรูปแบบตาราง ให้ทำการใช้เมาส์คลิก
|
|
||||||
<span
|
|
||||||
style="
|
|
||||||
background-color: #2196f3;
|
|
||||||
border: 1px solid #2196f3;
|
|
||||||
color: #ffffff;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0px 10px 0 10px;
|
|
||||||
margin-left: 5px;
|
|
||||||
margin-right: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
Download CSV
|
|
||||||
</span>
|
|
||||||
และหากต้องการให้หน้าต่างแสดงข้อมูลเต็มจอให้ทำการใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="chevron_left"
|
|
||||||
style="margin: 0 5px; color: hsl(0, 0%, 18%)"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
หรือหากต้องการยกเลิกการดูข้อมูลให้ทำการคลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-close"
|
|
||||||
style="margin: 0 5px; color: hsl(0, 0%, 18%)"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อออกจากหน้าต่างแสดงผลข้อมูลในรูปแบบตาราง
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/4_staticompet/5-33.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 33 แสดงการเลือกรอบการทดสอบ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1
|
|
||||||
ปุ่มสำหรับคลิกขยายหน้าจอข้อมูลและปุ่มสำหรับคลิกออกจากหน้าดูข้อมูล <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลจากรูปแบบกราฟมาเป็นข้อมูลแบบตารางข้อมูล
|
|
||||||
<br />
|
|
||||||
หมายเลข 3 ปุ่มสำหรับคลิกดาวน์โหลดไฟล์ข้อมูลออกมาในรูปแบบไฟล์ xlsx
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- การดาวน์โหลดข้อมูลสถิติต่างๆ
|
|
||||||
ออกมาในรูปแบบไฟล์รูปภาพเพื่อเอาข้อมูลไปต่อยอดการใช้งานโดยให้ใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-dots-vertical"
|
|
||||||
style="margin: 0 5px; color: hsl(0, 0%, 18%)"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
มุมขวาบนในช่องข้อมูลสถิติที่ต้องการดาวน์ไฟล์ข้อมูล คลิกเลือก Share
|
|
||||||
>>Link >> Direct link rendered image
|
|
||||||
จากนั้นระบบจะทำการดาวน์โหลดข้อมูลสถิติที่ทำการเลือกข้อมูดาวน์โหลดออกมาในรูปแบบไฟล์รูปภาพ
|
|
||||||
และหากต้องการ
|
|
||||||
<q-icon
|
|
||||||
name="mdi-close"
|
|
||||||
style="margin: 0 5px; color: hsl(0, 0%, 18%)"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อออกจากหน้าต่างการดาวน์โหลดข้อมูล
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/4_staticompet/5-34.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 34 แสดงการดาวน์โหลดข้อมูลสถิติออกเป็นมาเป็นข้อมูลรูปภาพ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
ปุ่มสำหรับคลิกเพื่อบันทึกข้อมูลสถิติเป็นไฟล์รูปภาพ
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
<!-- </div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,488 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
const rightDrawerOpen = ref(false);
|
|
||||||
const text = ref("");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- <div class="row col-12">
|
|
||||||
<div class="col-9">
|
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div> -->
|
|
||||||
<!--
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="custom-topic text-dark">
|
|
||||||
<div style="font-size: 16px; font-weight: 700">
|
|
||||||
ระบบการสรรหาบุคคล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card> -->
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="border-radius: 0px 0px 8px 8px"
|
|
||||||
>
|
|
||||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
|
||||||
5.4 คัดเลือก
|
|
||||||
<span class="text-dark" style="font-weight: bold; font-size: 15px">
|
|
||||||
จัดการรอบคัดเลือก
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
|
||||||
- เมื่อต้องการเข้าหน้าระบบสรรหาเพื่อจัดการรอบการสอบ รอบคัดเลือก
|
|
||||||
หรือการตั้งค่าเว็บสรรหาให้ทำการคลิกแถบเมนู “สรรหา” ทางด้านซ้ายของระบบ
|
|
||||||
ดังรูป
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/5_qualifiers/5-35.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
width: 255px;
|
|
||||||
height: 315.39px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 35 แสดงการเข้าสู่หน้าจัดการรอบคัดเลือก
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- การเพิ่มรอบการคัดเลือกให้ทำการใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-plus"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
ที่หน้า “จัดการรอบคัดเลือก”
|
|
||||||
จากนั้นทำการกรอกข้อมูลเพื่อเพิ่มรอบสอบการคัดเลือกให้ครบตามที่ระบบแนะนำ
|
|
||||||
หรือหาก
|
|
||||||
ต้องการแก้ไขข้อมูลในภายหน้าให้ทำการดับเบิ้ลคลิกที่รายชื่อสมัครสอบคัดเลือกที่ต้องการแก้ไขข้อมูลและถ้าหากต้องการยกเลิกการเพิ่มหรือบันทึกข้อมูลให้ใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-arrow-left"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อย้อนกลับไปยังหน้าแรก “จัดการรอบคัดเลือก” หรือยกเลิกการเพิ่มข้อมูล
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/5_qualifiers/5-36.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 36 แสดงเพิ่มข้อมูลเพิมรอบคัดเลือก
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับกรอกชื่อรอบคัดเลือก/ชื่อประกาศ <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับกรอกรอบการสอบ(ครั้ง) <br />
|
|
||||||
หมายเลข 3 ช่องสำหรับกรอกค่าธรรมเนียมสมัครสอบคัดเลือก <br />
|
|
||||||
หมายเลข 4 ช่องสำหรับคลิกเลือกปีงบประมาณ <br />
|
|
||||||
หมายเลข 5 ช่องสำหรับคลิกเลือกวันที่สอบคัดเลือก <br />
|
|
||||||
หมายเลข 6 ช่องสำหรับคลิกเลือกวันที่ประกาศรับสมัครคัดเลือก <br />
|
|
||||||
หมายเลข 7 ช่องสำหรับคลิกเลือกวันที่สมัครสอบคัดเลือก <br />
|
|
||||||
หมายเลข 8 ช่องสำหรับคลิกเลือกวันที่ชำระเงิน <br />
|
|
||||||
หมายเลข 9 ช่องสำหรับคลิกเลือกวันที่ประกาศผลสอบ <br />
|
|
||||||
หมายเลข 10 ช่องสำหรับคลิกเลือกรหัสส่วนราชการ <br />
|
|
||||||
หมายเลข 11 ช่องสำหรับคลิกเลือกหน่วยงาน <br />
|
|
||||||
หมายเลข 12
|
|
||||||
ปุ่มสำหรับคลิกเพื่อย้อนกลับหรือคลิกเพื่อยกเลิกการเพิ่มข้อมูลรอบคัดเลือก
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- การเพิ่มข้อมูลตำแหน่งที่จะทำการสอบคัดเลือกให้ทำการใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-plus"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
ในช่องตาราง “ตำแหน่ง” จากนั้นทำการกรอกข้อมูลตำแหน่งให้ครบตามที่ระบบแนะนำ
|
|
||||||
หรือหากทำการ
|
|
||||||
บันทึกข้อมูลไปก่อนหน้านี้แล้วต้องการลบข้อมูลตำแหน่งทิ้งให้ทำการเลื่อนลงมาที่ตาราง
|
|
||||||
“ตำแหน่ง” และทำการใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-delete"
|
|
||||||
style="margin: 0 5px; color: hsl(0, 100%, 50%)"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อลบตำแหน่งที่ต้องการสมัครคัดเลือกออก
|
|
||||||
และทำการเลือกวิธีการชำระเงินสมัครสอบคัดเลือกด้วยการคลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-radiobox-marked"
|
|
||||||
style="margin: 0 5px; color: #2196f3"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เลือกในช่องวิธีการชำระเงินที่ต้องการในตาราง “เลือกวิธีการชำระเงิน”
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/5_qualifiers/5-37.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 37 แสดงตารางการเพิ่มตำแหน่งที่ต้องการสมัครคัดเลือก
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับคลิกเลือกตำแหน่งที่จะเปิดสมัครสอบคัดเลือก <br />
|
|
||||||
หมายเลข 2
|
|
||||||
ช่องคลิกเลือกว่าต้องการวุฒิปริญญาตรีในการสมัครสอบคัดเลือกหรือไม่ <br />
|
|
||||||
หมายเลข 3 ช่องสำหรับคลิกเลือกประเภทแบบฟอร์มการสมัครคัดเลือก <br />
|
|
||||||
หมายเลข 4
|
|
||||||
ปุ่มสำหรับคลิกเพื่อลบข้อมูลการเพิ่มตำแหน่งที่รับสมัครสอบคัดเลือก <br />
|
|
||||||
หมายเลข 5 ช่องสำหรับคลิกเลือกวิธีการชำระเงินการสมัครสอบคัดเลือก
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- การเพิ่มข้อมูลรูปภาพประกอบหรือเอกสารประกอบให้ทำการใช้เมาส์คลิก
|
|
||||||
ที่ตาราง
|
|
||||||
<q-icon
|
|
||||||
name="mdi-plus"
|
|
||||||
style="
|
|
||||||
margin: 0 5px;
|
|
||||||
color: #00aa86;
|
|
||||||
border: 1px solid #00aa86;
|
|
||||||
border-radius: 2px;
|
|
||||||
"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
“รูปภาพประกอบ” และช่อง “เอกสารประกอบ”
|
|
||||||
หรือหากต้องการเพิ่มรายละเอียดข้อมูลการ
|
|
||||||
สมัครสอบคัดเลือกเพิ่มเติมให้ทำการกรอกข้อมูลที่ตาราง “รายละเอียด”
|
|
||||||
โดยสามารถจัดเรียงรูปแบบฟอนต์จากในระบบได้
|
|
||||||
หรือหากต้องการกรอกรายละเอียดหมายเหตุก็ทำการคลิกกรอก ได้ที่ตารางหมายเหตุ
|
|
||||||
หลังจากที่ได้ทำการกรอกข้อมูลเพิ่มรอบคัดเลือกเสร็จสิ้นหมดแล้ว
|
|
||||||
ให้ทำการใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-content-save-outline"
|
|
||||||
style="margin: 0 5px; color: #01435f"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อยืนยันการบันทึกข้อมูลการเพิ่มหรือแก้ไขรอบคัดเลือก
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/5_qualifiers/5-38.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 38 แสดงตารางการเพิ่มตำแหน่งที่ต้องการสมัครคัดเลือก
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับคลิกเพิ่มรูปภาพประกอบการสมัครคัดเลือก <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับคลิกเพิ่มเอกสารประกอบ <br />
|
|
||||||
หมายเลข 3 ช่องสำหรับกรอกข้อมูลรายละเอียดเพิ่มเติมการสมัครคัดเลือก <br />
|
|
||||||
หมายเลข 4 ช่องสำหรับกรอกข้อมูลหมายเหตุการณ์สมัครคัดเลือก
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- หากต้องการลบรายการรอบสอบคัดเลือก ให้ทำการใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-delete"
|
|
||||||
style="margin: 0 5px; color: hsl(0, 100%, 50%)"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
และยืนยันการลบข้อมูลรายการสอบสมัครคัดเลือก ดังรูป
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/5_qualifiers/5-39.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 39 แสดงการลบรายการข้อมูลสมัครสอบคัดเลือก
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อลบรายการสอบคัดเลือก
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12 row">
|
|
||||||
<div style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- และหากต้องการโพสต์เพื่อประกาศข่าวไม่มีการสมัครสอบใดๆ
|
|
||||||
ให้ทำการใช้เมาส์คลิก
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="q-toggle__inner relative-position non-selectable q-toggle__inner--falsy"
|
|
||||||
aria-hidden="true"
|
|
||||||
style="
|
|
||||||
font-size: 24px;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0 0.3em !important ;
|
|
||||||
height: 0.45em;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="q-toggle__track"></div>
|
|
||||||
<div
|
|
||||||
class="q-toggle__thumb absolute flex flex-center no-wrap"
|
|
||||||
style="top: -0.07em"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
ที่ “ประกาศข่าวทั่วไป” ให้เป็น
|
|
||||||
<div
|
|
||||||
class="q-toggle__inner relative-position non-selectable q-toggle__inner--truthy text-positive"
|
|
||||||
aria-hidden="true"
|
|
||||||
style="
|
|
||||||
font-size: 24px;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0 0.3em !important ;
|
|
||||||
height: 0.45em;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="q-toggle__thumb absolute flex flex-center no-wrap"
|
|
||||||
style="top: -0.07em"
|
|
||||||
></div>
|
|
||||||
<div class="q-toggle__track"></div>
|
|
||||||
</div>
|
|
||||||
จากนั้นระบบจะแสดงหน้ากรอกข้อมูลเพื่อประกาศ
|
|
||||||
และให้ทำการกรอกข้อมูลรายละเอียดที่ต้องกรประกาศ
|
|
||||||
และหลังจากที่กรอกข้อมูลประกาศข่าวทั่วไปเสร็จเรียบร้อยแล้ว
|
|
||||||
ให้ทำการใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-content-save-outline"
|
|
||||||
style="margin: 0 5px; color: #01435f"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อยืนยันการบันทึกข้อมูลประกาศ ข่าวทั่วไป
|
|
||||||
หรือต้องการยกเลิกการประกาศข่าวทั่วไปหรือยกเลิกการกรอกข้อมูลให้ทำการใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-arrow-left"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อย้อนกลับไปยังหน้าแรก
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/5_qualifiers/5-40.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 40 แสดงการเพิ่มข้อมูลประกาศข่าวทั่วไป
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ปุ่มสำหรับเปิดเพื่อประกาศข่าวทั่วไป
|
|
||||||
หรือปิดเพื่อประกาศสอบคัดเลือก <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับกรอกชื่อรอบคัดเลือก/ชื่อประกาศ <br />
|
|
||||||
หมายเลข 3 ช่องสำหรับคลิกเลือกวันที่ประกาศขาวทั่วไป <br />
|
|
||||||
หมายเลข 4 ช่องสำหรับเพิ่มรูปภาพประกอบประกาศข่าวทั่วไป <br />
|
|
||||||
หมายเลข 5 ช่องสำหรับเพิ่มเอกสารประกอบประกาศข่าวทั่วไป
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
-
|
|
||||||
หากต้องการค้นหาข้อมูลรายการสอบคัดเลือกหรือประกาศข่าวทั่วไปที่ทำการบันทึกให้ทำการคลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-magnify"
|
|
||||||
style="margin: 0 5px; color: #afafaf"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
ที่ช่องค้นหาและทำการกรอกข้อมูลที่เกี่ยวข้องกับบันทึกก่อนหน้านี้ลงไประบบ
|
|
||||||
จะแสดงข้อมูลที่ทำการค้นหา
|
|
||||||
แต่หากต้องการยกเลิกการดูข้อมูลที่ทำการค้นหาให้ทำการใช้เมาส์คลิกที่
|
|
||||||
<q-icon
|
|
||||||
name="mdi-close"
|
|
||||||
style="margin: 0 5px; color: #afafaf"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
ในช่องกรอกข้อมูลค้นหาเพื่อยกเลิกค้นหาข้อมูล
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/5_qualifiers/5-41.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 41 แสดงตารางการค้นหาข้อมูลจัดการรอบคัดเลือก
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับกรอกข้อมูลรายการรอบคัดเลือกขันสำหรับการค้นหา <br />
|
|
||||||
หมายเลข 2
|
|
||||||
ช่องสำหรับแสดงข้อมูลรายการรอบคัดเลือกจากการกรอกข้อมูลเพื่อค้นหา
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- หากต้องการให้ตารางแสดงคอลัมน์ข้อมูลตามที่ต้องการให้ใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-menu-down"
|
|
||||||
style="margin: 0 5px; color: #afafaf"
|
|
||||||
size="sm"
|
|
||||||
/>
|
|
||||||
ในช่องคอลัมน์เพื่อทำการเลือกหัวข้อคอลัมน์แสดงข้อมูลของตาราง
|
|
||||||
“จัดการรอบคัดเลือก”
|
|
||||||
ที่ต้องการและหากต้องการให้ตารางแสดงหัวข้อคอลัมน์เพิ่มขึ้นหรือให้ตารางทำการแสดงหัวข้อคอลัมน์เหมือนเดิมให้ทำการใช้เมาส์คลิกที่รายชื่อหัวข้อตารางให้กลับมาเป็นสีเขียวเหมือนเดิมหัวข้อคอลัมน์ก็จะแสดงเหมือนเดิม
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/5_qualifiers/5-42.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 42 แสดงตารางการเลือกคอลัมน์แสดงข้อมูลจัดการรอบคัดเลือก
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับคลิกเพื่อเลือกหัวคอลัมน์แสดงข้อมูลจัดการรอบคัดเลือก
|
|
||||||
<br />
|
|
||||||
หมายเลข 2
|
|
||||||
ช่องสำหรับแสดงข้อมูลหัวคอลัมน์ที่ใช้ในการเลือกแสดงข้อมูลจัดการรอบคัดเลือก
|
|
||||||
<br />
|
|
||||||
หมายเลข 3
|
|
||||||
ช่องสำหรับแสดงตารางข้อมูลจัดการรอบคัดเลือกตามคอลัมน์ที่ทำการเลือก
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
<!-- </div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,110 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
const rightDrawerOpen = ref(false);
|
|
||||||
const text = ref("");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- <div class="row col-12">
|
|
||||||
<div class="col-9">
|
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<!-- <q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="custom-topic text-dark">
|
|
||||||
<div style="font-size: 16px; font-weight: 700">
|
|
||||||
ระบบการสรรหาบุคคล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card> -->
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="border-radius: 0px 0px 8px 8px"
|
|
||||||
>
|
|
||||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
|
||||||
5.4 คัดเลือก
|
|
||||||
<span class="text-dark" style="font-weight: bold; font-size: 15px">
|
|
||||||
จัดการรอบคัดเลือกคนพิการ
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 20px; margin-left: 10px">
|
|
||||||
- การเพิ่มรอบการคัดเลือกคนพิการให้ทำการใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-plus"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
ที่หน้า “จัดการรอบคัดเลือกคนพิการ”
|
|
||||||
จากนั้นทำการกรอกข้อมูลเพื่อเพิ่มรอบสอบการคัดเลือกคนพิการให้ครบตาม
|
|
||||||
ที่ระบบแนะนำ
|
|
||||||
หรือหากต้องการแก้ไขข้อมูลในภายหน้าให้ทำการดับเบิ้ลคลิกที่รายชื่อสมัครสอบคัดเลือกที่ต้องการแก้ไขข้อมูล
|
|
||||||
และถ้าหากต้องการยกเลิกการเพิ่มหรือบันทึกข้อมูลให้ใช้ เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-arrow-left"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อย้อนกลับไปยังหน้าแรก “จัดการรอบคัดเลือก” หรือยกเลิกการเพิ่มข้อมูล
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/6_disabilities/5-43.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 43 แสดงตารางการเพิ่มข้อมูลการคัดเลือกคนพิการ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับการกรอกชื่อรอบคัดเลือกคนพิการ <br />
|
|
||||||
หมายเลข 2 ช่องสำหรับคลิกเพื่อเพิ่มหรือคลิกกรอกรอบการสอบ (ครั้ง) <br />
|
|
||||||
หมายเลข 3 ช่องสำหรับคลิกเลือกปีงบประมาณ <br />
|
|
||||||
หมายเลข 4 ช่องสำหรับกรอกค่าธรรมเนียมการสอบคัดเลือก <br />
|
|
||||||
หมายเลข 5 ช่องสำหรับคลิกเลือกวันที่สอบคัดเลือกคนพิการ <br />
|
|
||||||
หมายเลข 6 ช่องสำหรับคลิกเลือกวันที่ประกาศการสอบคัดเลือกคนพิการ <br />
|
|
||||||
หมายเลข 7 ช่องสำหรับคลิกเลือกวันที่สมัครสอบคัดเลือกคนพิการ <br />
|
|
||||||
หมายเลข 8 ช่องสำหรับคลิกเลือกวันที่ชำระเงินสอบคัดเลือกคนพิการ <br />
|
|
||||||
หมายเลข 9 ช่องสำหรับคลิกเลือกวันที่ประกาศผลสอบคัดเลือกคนพิการ <br />
|
|
||||||
หมายเลข 10
|
|
||||||
ช่องสำหรับคลิกเพิ่มรูปภาพประกอบการประกาศสมัครสอบรอบคัดเลือกคนพิการ
|
|
||||||
<br />
|
|
||||||
หมายเลข 11
|
|
||||||
ช่องสำหรับคลิกเพิ่มเอกสารประกอบการประกาศสมัครสอบรอบคัดเลือกคนพิการ
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
<!-- </div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,533 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
const rightDrawerOpen = ref(false);
|
|
||||||
const text = ref("");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- <div class="row col-12">
|
|
||||||
<div class="col-9">
|
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<!-- <q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="custom-topic text-dark">
|
|
||||||
<div style="font-size: 16px; font-weight: 700">
|
|
||||||
ระบบการสรรหาบุคคล
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card> -->
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="border-radius: 0px 0px 8px 8px"
|
|
||||||
>
|
|
||||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
|
||||||
5.4 คัดเลือก
|
|
||||||
<span class="text-dark" style="font-weight: bold; font-size: 15px;">
|
|
||||||
จัดการรายชื่อคัดเลือก
|
|
||||||
</span>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:20px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- หากต้องการที่จะจัดการรายชื่อผู้สมัครคัดเลือกเป็นการยืนยันการสมัครคัดเลือกหรือการตรวจสอบข้อมูลการคัดเลือก การยืนยันการโอนชำระเงินต่างๆ ให้ทำการใช้เมาส์ดับเบิ้ลคลิก
|
|
||||||
ที่รายการสอบคัดเลือก เพื่อให้ระบบแสดงรายชื่อผู้สมัครสอบคัดเลือก และแสดงสถานะการสมัครสอบคัดเลือกของผู้สมัคร
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/7_selection/5-44.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 44 แสดงตารางการจัดการรายชื่อคัดเลือก
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อย้อนกลับหน้าจัดการรายชื่อคัดเลือก <br>
|
|
||||||
หมายเลข 2 ช่องสำหรับแสดงชื่อรอบการคัดเลือกของข้อมูลที่เข้ามาดูข้อมูล <br>
|
|
||||||
หมายเลข 3 ช่องสำหรับเลือกวันที่สรุปจำนวนผู้สมัครคัดเลือกตามวันที่ที่เลือก <br>
|
|
||||||
หมายเลข 4 ปุ่มสำหรับคลิกดาวน์โหลดสรุปข้อมูลสมัครสอบ <br>
|
|
||||||
หมายเลข 5 ปุ่มสำหรับคลิกดาวน์โหลดรายชื่อผู้มีสิทธิสอบ <br>
|
|
||||||
หมายเลข 6 ปุ่มสำหรับคลิกดาวน์โหลดรายชื่อผู้สอบแข่งขันได้ <br>
|
|
||||||
หมายเลข 7 ช่องสำหรับแสดงตัวเลขจำนวนผู้สมัครคัดเลือกทั้งหมด <br>
|
|
||||||
หมายเลข 8 ช่องสำหรับแสดงตัวเลขจำนวนผู้มีสิทธิ์เข้ารับคัดเลือกทั้งหมด <br>
|
|
||||||
หมายเลข 9 ช่องสำหรับแสดงตัวเลขจำนวนผู้เข้ารับการคัดเลือก <br>
|
|
||||||
หมายเลข 10 ช่องสำหรับแสดงตัวเลขผู้ที่ผ่านการสอบ <br>
|
|
||||||
หมายเลข 11 ช่องสำหรับแสดงตัวเลขผู้ที่ไม่ผ่านการสอบ <br>
|
|
||||||
หมายเลข 12 ช่องสำหรับแสดงตัวเลขผู้สมัครคัดเลือกเพศชาย <br>
|
|
||||||
หมายเลข 13 ช่องสำหรับแสดงตัวเลขผู้สมัครคัดเลือกเพศหญิง <br>
|
|
||||||
หมายเลข 14 ช่องสำหรับคลิกเลือกแสดงข้อมูลสถานะของผู้สมัครสอบคัดเลือก <br>
|
|
||||||
หมายเลข 15 ช่องสำหรับเลือกไฟล์อัปโหลดไฟล์จัดที่นั่งสอบ และเลือกไฟล์อัปโหลดไฟล์คะแนนสอบ <br>
|
|
||||||
หมายเลข 16 ปุ่มสำหรับคลิกอัปโหลดไฟล์จัดที่นั่งสอบ และปุ่มสำหรับคลิกอัปโหลดไฟล์คะแนนสอบ <br>
|
|
||||||
หมายเลข 17 ปุ่มสำหรับคลิกดาวน์โหลดไฟล์ข้อมูลผู้สมัครสอบคัดเลือก <br>
|
|
||||||
หมายเลข 18 ช่องสำหรับแสดงข้อมูลรายชื่อผู้สมัครสอบคัดเลือก <br>
|
|
||||||
หมายเลข 19 ช่องสำหรับค้นหารายชื่อผู้สมัครรายบุคคล <br>
|
|
||||||
หมายเลข 20 ช่องสำหรับเลือกหัวคอลัมน์แสดงข้อมูลตาราง <br>
|
|
||||||
หมายเลข 21 ปุ่มสำหรับคลิกเปิด-ปิดแสดงตารางสรุปจำนวนผู้สมัครคัดเลือก
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- การเลือกวันที่เพื่อดูสรุปจำนวนผู้สมัครคัดเลือกในแต่ละวันหรือวันที่ที่ทำการเลือก ให้ทำการใช้เมาส์คลิก
|
|
||||||
<q-icon name="mdi-download" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
|
||||||
เลือกวันที่ในช่องปฏิทินโดยเลือกวันที่ เดือน ปี จากนั้นทำการเมาส์คลิก “ดาวน์โหลดข้อมูลผู้สมัครสอบ” จากนั้นระบบจะทำการดาวน์โหลดไฟล์ xlsx ข้อมูลของผู้สมัครในวันที่ที่ทำการเลือก
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/7_selection/5-45.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 45 แสดงตารางการเลือกวันที่เพื่อดูสรุปจำนวนผู้สมัครคัดเลือก
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับคลิกเพื่อเลือกวันที่ <br>
|
|
||||||
หมายเลข 2 ช่องสำหรับคลิกเลือกวันที่ เดือน ปี
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div style="margin-top: 50px; margin-left: 10px;">
|
|
||||||
- เมื่อต้องการตั้งค่าเว็บไซต์ระบบสรรหาให้ใช้เมาส์คลิก
|
|
||||||
|
|
||||||
<span
|
|
||||||
style="
|
|
||||||
background-color: hsl(0, 0%, 100%);
|
|
||||||
border: 1px solid #00aa86;
|
|
||||||
color: #2196f3;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0px 5px 0 5px;
|
|
||||||
margin-left: 5px;
|
|
||||||
margin-right: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
ตรวจสอบข้อมูลสมัครสอบ
|
|
||||||
</span>
|
|
||||||
|
|
||||||
จากนั้นระบบจะแสดงข้อมูลของผู้สมัครสามารถทำการแก้ไขข้อมูลได้ และหลังจากทำการแก้ไขข้อมูลเสร็จสิ้นแล้ว ให้ทำการกดคลิก
|
|
||||||
<i class="q-icon mdi mdi-content-save-outline"
|
|
||||||
style="color: #2196f3;
|
|
||||||
background-color: #d5e4f07e;
|
|
||||||
margin-right: 5px;
|
|
||||||
margin-left: 5px;
|
|
||||||
border-radius: 20px;
|
|
||||||
padding: 4px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
|
||||||
">
|
|
||||||
</i>
|
|
||||||
เพื่อบันทึกข้อมูลแก้ไข หรือหาตรวจสอบข้อมูลของผู้สมัครเสร็จเรียบร้อยแล้วให้ทำการคลิกปุ่ม
|
|
||||||
<i class="q-icon mdi mdi-check"
|
|
||||||
style="color: #02A998;
|
|
||||||
background-color: hwb(174 82% 2% / 0.624);
|
|
||||||
margin-right: 5px;
|
|
||||||
margin-left: 5px;
|
|
||||||
border-radius: 20px;
|
|
||||||
padding: 4px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
|
||||||
">
|
|
||||||
</i>
|
|
||||||
เพื่อยืนยันการตรวจสอบคุณสมบัติข้อมูลของผู้สมัครเรียบร้อย
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/7_selection/5-46.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 46 แสดงตารางการตรวจสอบคุณสมบัติผู้สมัครสอบคัดเลือก
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อบันทึกข้อมูล ในกรณีแก้ไขข้อมูลของผู้สมัครสอบ <br>
|
|
||||||
หมายเลข 2 ปุ่มสำหรับยืนยันการตรวจสอบข้อมูลของผู้สมัครสอบ
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div style="margin-top: 50px; margin-left: 10px;">
|
|
||||||
- การตรวจสอบหลักฐานชำระเงินให้ทำการใชเมาส์คลิก
|
|
||||||
|
|
||||||
<span
|
|
||||||
style="
|
|
||||||
background-color: hsl(0, 0%, 100%);
|
|
||||||
border: 1px solid #00aa86;
|
|
||||||
color: #2196f3;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0px 5px 0 5px;
|
|
||||||
margin-left: 5px;
|
|
||||||
margin-right: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
ตรวจสอบหลักฐานชำระเงิน
|
|
||||||
</span>
|
|
||||||
|
|
||||||
ที่คอลัมน์สถานะของผู้สมัคร จากนั้นทำการตรวจสอบข้อมูลพร้อมตรวจสอบหลักบานการโอนเงิน หากตรวจสอบเสร็จสิ้นแล้วให้ทำการใช้เมาส์คลิก
|
|
||||||
<span
|
|
||||||
style="
|
|
||||||
background-color: #00aa86;
|
|
||||||
border: 1px solid #00aa86;
|
|
||||||
color: #ffffff;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0px 10px 0 5px;
|
|
||||||
margin-left: 5px;
|
|
||||||
margin-right: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<q-icon name="mdi-check" style="margin: 0 1px 0 5px; color: #ffffff;" size="xs"/>
|
|
||||||
ตรวจสอบข้อมูล
|
|
||||||
</span>
|
|
||||||
เพื่อยืนยันการตรวจสอบการชำระเงินเสร็จแล้ว
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/7_selection/5-47.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 47 แสดงตารางการตรวจสอบการชำระเงินของผู้สมัครสอบคัดเลือก
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อยืนยันการตรวจสอบข้อมูลการชำระเงินของผู้สมัครสอบ
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- การดาวน์โหลดไฟล์ข้อมูลผู้สมัครสอบคัดเลือกเพื่อจัดที่นั่งสอบ ให้ทำการใช้เมาส์คลิก
|
|
||||||
<q-icon name="mdi-download" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
|
||||||
ในรายการจากนั้นระบบแสดงเมนูย่อย แล้วทำการคลิก “ดาวน์โหลดจัดการรายชื่อผู้สมัคร” จากนั้นระบบจะทำการดาวน์โหลดไฟล์ xlsx ให้ แล้วทำการกรอกเลขที่นั่งสอบจากนั้นกดบันทึกไฟล์ และนำไปอัปโหลดในระบบ
|
|
||||||
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/7_selection/5-48.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 48 แสดงตารางการเพิ่มเลขที่นั่งสอบ
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ชื่อไฟล์การดาวน์โหลดจัดการรายชื่อผู้สมัคร <br>
|
|
||||||
หมายเลข 2 ช่องสำหรับการกรอกเลขที่นั่งสอบของผู้สมัครและทำการบันทึกก่อนนำไฟล์อัปโหลดเข้าระบบ
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- การจัดที่นั่งสอบให้ทำการใช้เมาส์คลิก
|
|
||||||
<q-icon name="mdi-download" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
|
||||||
“ดาวน์โหลดจัดการรายชื่อผู้สมัคร” ที่ตารางแสดงรายชื่อผู้สมัคร ระบบจะทำการดาวน์โหลดไฟล์ xlsx จากนั้นทำการเปิดไฟล์ และกรอก
|
|
||||||
ข้อมูลเลขที่นั่งสอบของผู้สมัครให้ครบ จากนั้นทำการบันทึก จากนั้นทำการคลิกอัปโหลดไฟล์ที่นั่งสอบในช่อง “อัปโหลดที่นั่งสอบ” จากนั้นคลิก
|
|
||||||
<q-icon name="mdi-upload" style="margin: 0 5px; color: #2196f3;" size="xs"/>
|
|
||||||
เพื่ออัปโหลดไฟล์
|
|
||||||
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/7_selection/5-49.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 49 แสดงตารางการจัดที่นั่งสอบ
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ปุ่มสำหรับคลิกดาวน์โหลดไฟล์จัดการรายชื่อผู้สมัคร <br>
|
|
||||||
หมายเลข 2 ช่องสำหรับอัปโหลดไฟล์จัดที่นั่งสอบ
|
|
||||||
หมายเลข 3 ปุ่มสำหรับคลิกเพื่ออัปโหลดไฟล์ที่นั่งสอบ
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- การดาวน์โหลดไฟล์ข้อมูลผู้สมัครสอบคัดเลือกเพื่ออัปโหลดคะแนนสอบ ให้ทำการใช้เมาส์คลิก
|
|
||||||
<q-icon name="mdi-download" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
|
||||||
ในรายการจากนั้นระบบแสดงเมนูย่อย แล้วทำการคลิก “ดาวน์โหลด
|
|
||||||
จัดการรายชื่อผู้สมัคร” จากนั้นระบบจะทำการดาวน์โหลดไฟล์ xlsx ให้ โดยไฟล์ที่โหลดมาต้องมีข้อมูลผู้สมัครรวมถึงเลขที่นั่งสอบที่ทำการกรอกก่อนหน้านี้ด้วย จากนั้นทำการกรอกข้อมูล
|
|
||||||
คะแนนแล้วทำการบันทึกไฟล์ และอัปโหลดเข้าระบบ
|
|
||||||
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/7_selection/5-50.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 50 แสดงตารางการเพิ่มเลขที่นั่งสอบ
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ชื่อไฟล์การดาวน์โหลดจัดการรายชื่อผู้สมัคร <br>
|
|
||||||
หมายเลข 2 ช่องสำหรับการกรอกคะแนนสอบของผู้สมัครและทำการบันทึกก่อนนำไฟล์อัปโหลดเข้าระบบ
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p
|
|
||||||
style="margin-top:50px;
|
|
||||||
margin-left: 10px">
|
|
||||||
- การสรุปคะแนนสอบให้ทำการใช้เมาส์คลิก
|
|
||||||
<q-icon name="mdi-download" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
|
||||||
“ดาวน์โหลดข้อมูลผู้สมัคร” ที่ตารางแสดงรายชื่อผู้สมัคร ระบบจะทำการดาวน์โหลดไฟล์ xlsx จากนั้นทำการเปิดไฟล์ และกรอกข้อมูลคะแนนสอบของผู้สมัครให้ครบ จากนั้นทำการบันทึก จากนั้นทำการคลิกอัปโหลดไฟล์คะแนนสอบในช่อง “อัปโหลดคะแนนสอบ” จากนั้นคลิกปุ่ม
|
|
||||||
<q-icon name="mdi-upload" style="margin: 0 5px; color: #2196f3;" size="xs"/>
|
|
||||||
เพื่ออัปโหลดไฟล์
|
|
||||||
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/05_recruitment/7_selection/5-51.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97B2DE; ;
|
|
||||||
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 5 – 51 แสดงตารางการอัปโหลดคะแนนสอบ
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ปุ่มสำหรับคลิกดาวน์โหลดไฟล์จัดการรายชื่อผู้สมัคร <br>
|
|
||||||
หมายเลข 2 ช่องสำหรับอัปโหลดไฟล์คะแนนสอบ <br>
|
|
||||||
หมายเลข 3 ปุ่มสำหรับคลิกเพื่ออัปโหลดไฟล์คะแนนสอบ
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</q-card>
|
|
||||||
<!-- </div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,87 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import recruitmain from "@/modules/01_manual/components/5_recruitment/51_main.vue";
|
|
||||||
import recruitSetting from "@/modules/01_manual/components/5_recruitment/52_setting.vue";
|
|
||||||
import recruitManage from "@/modules/01_manual/components/5_recruitment/53_managecompet.vue";
|
|
||||||
import recruitstati from "@/modules/01_manual/components/5_recruitment/54_staticompet.vue";
|
|
||||||
import recruitQualifiers from "@/modules/01_manual/components/5_recruitment/55_qualifiers.vue";
|
|
||||||
import recruitDisabilities from "@/modules/01_manual/components/5_recruitment/56_disabilities.vue";
|
|
||||||
import recruitSelection from "@/modules/01_manual/components/5_recruitment/57_selection.vue";
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div class="col-12 row">
|
|
||||||
<div
|
|
||||||
class="toptitle text-dark col-12 row items-center"
|
|
||||||
style="padding-top: 40px"
|
|
||||||
>
|
|
||||||
คู่มือการใช้งานระบบจัดการระบบสรรหา
|
|
||||||
</div>
|
|
||||||
<div class="row col-12 q-gutter-xs">
|
|
||||||
<div
|
|
||||||
id="recruitmain"
|
|
||||||
name="1"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<recruitmain />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="recruitSetting"
|
|
||||||
name="2"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<recruitSetting />
|
|
||||||
</div>
|
|
||||||
<!-- <div
|
|
||||||
id="recruitManage"
|
|
||||||
name="3"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
สอบแข่งขัน
|
|
||||||
</div> -->
|
|
||||||
<div
|
|
||||||
id="recruitManage"
|
|
||||||
name="3"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<recruitManage />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="recruitstati"
|
|
||||||
name="4"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<recruitstati />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="recruitQualifiers"
|
|
||||||
name="5"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<recruitQualifiers />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="recruitDisabilities"
|
|
||||||
name="6"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<recruitDisabilities />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="recruitSelection"
|
|
||||||
name="7"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<recruitSelection />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,736 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
const rightDrawerOpen = ref(false);
|
|
||||||
const text = ref("");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- <div class="row col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
|
||||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="
|
|
||||||
background-color: #ecebeb;
|
|
||||||
border-radius: 8px 8px 0px 0px;
|
|
||||||
padding: 10px 16px 10px 16px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="custom-topic text-dark">
|
|
||||||
<div style="font-size: 16px; font-weight: 700">
|
|
||||||
ออกคำสั่ง
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
|
|
||||||
<q-card
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
class="col-12 q-pa-md"
|
|
||||||
style="border-radius: 0px 0px 8px 8px"
|
|
||||||
>
|
|
||||||
<!-- <div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
|
||||||
5.1 การเข้าสู่หน้าระบบสรรหา
|
|
||||||
</div>
|
|
||||||
-->
|
|
||||||
|
|
||||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
|
||||||
- เมื่อเข้าสู่ระบบทรัพยากรบุคคล ปรากฏหน้าจอหน้าแรกของระบบทรัพยากรบุคคล ให้คลิกเลือกแถบเมนู “ออกคำสั่ง” โดยระบบแสดงหน้าตารางออกคำสั่งพร้อมรายการออกคำสั่งต่าง ๆ ดังรูปภาพ
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/07_commands/1_main/7-1.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
width: 255px;
|
|
||||||
height: 380px;
|
|
||||||
border: 1px solid #97B2DE;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 7 – 1 ระบบออกคำสั่ง
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- หากเข้าสู่ระบบออกคำสั่ง ระบบจะแสดงตารางรายงานออกคำสั่งต่าง ๆ ที่ทำการออกรายงานและ
|
|
||||||
แสดงสถานะการอออกคำสั่งของรายงาน โดยสามารถเพิ่มรายงานคำสั่งต่าง ๆ ได้ ดังรูปภาพ
|
|
||||||
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/07_commands/1_main/7-2.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
border: 1px solid #97B2DE;
|
|
||||||
|
|
||||||
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 7 – 2 รายการออกคำสั่ง
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับคลิกเลือกปีงบประมาณ <br>
|
|
||||||
หมายเลข 2 ไอคอนสำหรับคลิกเพื่อเพิ่มข้อมูลรายงานออกคำสั่ง <br>
|
|
||||||
หมายเลข 3 ช่องสำหรับคลิกเลือกประเภทรายงานการแสดงข้อมูลในตาราง <br>
|
|
||||||
หมายเลข 4 ช่องสำหรับคลิกเลือกสถานะรายงานการแสดงข้อมูลในตาราง <br>
|
|
||||||
หมายเลข 5 ช่องตารางสำหรับแสดงรายงานคำสั่งและข้อมูลที่เกี่ยวข้อง <br>
|
|
||||||
หมายเลข 6 ช่องสำหรับคลิกเพื่อกรอกข้อมูลค้นหารายงานคำสั่ง <br>
|
|
||||||
หมายเลข 7 ไอคอนสำหรับคลิกเพื่อแสดงประวัติออกคำสั่ง <br>
|
|
||||||
หมายเลข 8 สถานะ “ออกคำสั่ง” หมายถึง ได้ทำการออกคำสั่งรายงานเสร็จสิ้นทุกขั้นตอน <br>
|
|
||||||
หมายเลข 9 สถานะ “บัญชีแนบท้าย” หมายถึง อยู่ในหน้าเพิ่มไฟล์คำสั่งและบัญชีแนบท้าย/ขั้นตอนที่ 4 <br>
|
|
||||||
หมายเลข 10 สถานะ “เลือกผู้รับสำเนา” หมายถึง อยู่ในหน้าเลือกรายชื่อส่งสำเนา/ขั้นตอนที่ 3 <br>
|
|
||||||
หมายเลข 11 สถานะ “จัดทำร่างคำสั่ง” หมายถึง อยู่ในหน้ากรอกรายละเอียดการออกคำสั่ง/ขั้นตอนที่ 1 <br>
|
|
||||||
หมายเลข 12 สถานะ “รอผู้มีอำนาจลงนาม” หมายถึง รอคลิก “ออกคำสั่ง” /ขั้นตอนที่ 4
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- ประเภทคำสั่งปัจจุบันมีทั้งหมด 24 คำสั่ง ได้แก่
|
|
||||||
<br />
|
|
||||||
<div style="margin-left: 20px;">
|
|
||||||
1.) C-PM-01 คำสั่งบรรจุและแต่งตั้ง: สำหรับผู้สอบแข่งขันได้
|
|
||||||
<br />
|
|
||||||
2.) C-PM-02 คำสั่งบรรจุและแต่งตั้ง: สำหรับผู้ได้รับคัดเลือก
|
|
||||||
<br />
|
|
||||||
3.) C-PM-03 คำสั่งแต่งตั้ง: สำหรับข้าราชการ กทม. เดิม
|
|
||||||
<br />
|
|
||||||
4.) C-PM-04 คำสั่งย้าย: สำหรับข้าราชการ กทม. เดิม
|
|
||||||
<br />
|
|
||||||
5.) C-PM-05 คำสั่งแต่งตั้ง
|
|
||||||
<br />
|
|
||||||
6.) C-PM-06 คำสั่งเลื่อน
|
|
||||||
<br />
|
|
||||||
7.) C-PM-07 คำสั่งย้าย
|
|
||||||
<br />
|
|
||||||
8.) C-PM-08 คำสั่งบรรจุและแต่งตั้งข้าราชการฯ กลับเข้ารับราชการ
|
|
||||||
<br />
|
|
||||||
9.) C-PM-09 คำสั่งบรรจุและแต่งตั้งผู้ออกไปรับราชการทหารกลับเข้ารับราชการ
|
|
||||||
<br />
|
|
||||||
10.) C-PM-10 คำสั่งแต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
|
|
||||||
<br />
|
|
||||||
11.) C-PM-11 คำสั่งให้ข้าราชการที่มีผลการทดลองปฏิบัติหน้าที่ราชการไม่ต่ำกว่ามาตรฐาน
|
|
||||||
ที่กำหนดรับราชการต่อไป
|
|
||||||
<br />
|
|
||||||
12.) C-PM-12 คำสั่งให้ข้าราชการออกจากราชการเพราะผลการทดลองปฏิบัติหน้าที่
|
|
||||||
ราชการต่ำกว่ามาตรฐานที่กำหนด
|
|
||||||
<br />
|
|
||||||
13.) C-PM-13 คำสั่งให้โอนข้าราชการกรุงเทพมหานครสามัญ
|
|
||||||
<br />
|
|
||||||
14.) C-PM-14 คำสั่งรับโอนข้าราชการกรุงเทพมหานครสามัญ
|
|
||||||
<br />
|
|
||||||
15.) C-PM-15 คำสั่งให้ช่วยราชการ
|
|
||||||
<br />
|
|
||||||
16.) C-PM-16 คำสั่งส่งตัวกลับ
|
|
||||||
<br />
|
|
||||||
17.) C-PM-17 คำสั่งอนุญาตให้ข้าราชการลาออกจากราชการ
|
|
||||||
<br />
|
|
||||||
18.) C-PM-18 คำสั่งให้ออกจากราชการ
|
|
||||||
<br />
|
|
||||||
19.) C-PM-19 คำสั่งปลดออกจากราชการ
|
|
||||||
<br />
|
|
||||||
20.) C-PM-20 คำสั่งไล่ออกจากราชการ
|
|
||||||
<br />
|
|
||||||
21.) C-PM-21 คำสั่งแต่งตั้งลูกจ้างชั่วคราวเป็นลูกจ้างประจำ
|
|
||||||
<br />
|
|
||||||
22.) C-PM-22 คำสั่งปรับระดับชั้นงาน
|
|
||||||
<br />
|
|
||||||
23.) C-PM-23 คำสั่งให้ลูกจ้างออกจากราชการ
|
|
||||||
<br />
|
|
||||||
24.) C-PM-24 คำสั่งย้ายลูกจ้างประจำ
|
|
||||||
</div>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12" >
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- ตัวอย่างการการออกคำสั่ง C-PM-01 คำสั่งบรรจุและแต่งตั้ง: สำหรับผู้สอบแข่งขันได้ รายชื่อจะ
|
|
||||||
สามารถออกคำสั่งได้ต่อเมื่อระบบ “สรรหา” ส่งรายชื่อมาออกคำสั่งเสร็จแล้วเท่านั้น หากไม่ได้ทำการส่งรายชื่อออกคำสั่ง ในระบ “ออกคำสั่ง” จะไม่มีรายชื่อเพื่อดำเนินการต่อ หากทำการกรอกข้อมูลเสร็จสิ้นตามระบบแนะนำเสร็จแล้ว ทำการคลิก
|
|
||||||
<span
|
|
||||||
style="
|
|
||||||
background-color: #01435F;
|
|
||||||
border: 1px solid #01435F;
|
|
||||||
color: white;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0px 5px;
|
|
||||||
border-radius: 2px;
|
|
||||||
margin: 0px 5px 0px 5px;
|
|
||||||
|
|
||||||
"
|
|
||||||
>
|
|
||||||
บันทึก
|
|
||||||
</span>
|
|
||||||
และยืนยันการบันทึกข้อมูล เพื่อไปยังขั้นตอนที่ 2
|
|
||||||
|
|
||||||
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/07_commands/1_main/7-3.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
border: 1px solid #97B2DE;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 7 – 3 กรอกรายละเอียดการออกคำสั่ง
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องแสดงขั้นตอนการออกคำสั่ง ขั้นตอนที่ 1 การกรอกรายละเอียดคำสั่ง <br>
|
|
||||||
หมายเลข 2 ช่องสำหรับคลิกเลือกประเภทคำสั่ง<br>
|
|
||||||
หมายเลข 3 ช่องสำหรับแสดงคำสั่งเรื่อง<br>
|
|
||||||
หมายเลข 4 ช่องสำหรับคลิกกรอกคำสั่งเลขที่ <br>
|
|
||||||
หมายเลข 5 ช่องสำหรับคลิกเลือกปี พ.ศ.<br>
|
|
||||||
หมายเลข 6 ช่องสำหรับคลิกเลือกวันที่คำสั่งมีผล<br>
|
|
||||||
หมายเลข 7 ช่องสำหรับคลิกกรอกหรือเลือกคำสั่งโดย<br>
|
|
||||||
หมายเลข 8 ช่องสำหรับคลิกกรอกหรือคลิกเลือกผู้มีอำนาจลงนาม<br>
|
|
||||||
หมายเลข 9 ช่องสำหรับคลิกกรอกหรือคลิกเลือกตำแหน่งผู้มีอำนาจลงนาม<br>
|
|
||||||
หมายเลข 10 ช่องสำหรับคลิกเลือกรอบการสอบ<br>
|
|
||||||
หมายเลข 11 ช่องสำหรับคลิกกรอก มติ กก. ครั้งที่ (เรื่อง สมัครสอบฯ)<br>
|
|
||||||
หมายเลข 12 ช่องสำหรับคลิกเลือกวันที่ (เรื่อง รับสมัครสอบฯ)<br>
|
|
||||||
หมายเลข 13 ช่องสำหรับคลิกกรอก มติ กก. ครั้งที่ (เรื่อง ผลการสอบ)<br>
|
|
||||||
หมายเลข 14 ช่องสำหรับคลิกเลือกวันที่ (เรื่อง ผลการสอบ)<br>
|
|
||||||
หมายเลข 15 ปุ่มสำหรับคลิกบันทึกข้อมูลการออกคำสั่ง
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
การเลือกรายชื่อเพื่อออกคำสั่ง ให้ทำการใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-plus"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
จากนั้นทำการคลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-checkbox-marked"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อเลือกรายชื่อออกคำสั่ง หากทำการคลิกเลือกรายชื่อสำเร็จ ให้ทำการคลิก
|
|
||||||
<span
|
|
||||||
style="
|
|
||||||
background-color: #01435F;
|
|
||||||
border: 1px solid #01435F;
|
|
||||||
color: white;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0px 5px;
|
|
||||||
border-radius: 2px;
|
|
||||||
margin: 0px 5px 0px 5px;
|
|
||||||
|
|
||||||
"
|
|
||||||
>
|
|
||||||
บันทึก
|
|
||||||
</span>
|
|
||||||
และยืนยันการบันทึกข้อมูลเพื่อบันทึกรายชื่อที่เลือก หรือหากยกเลิกการเลือกรายชื่อให้ทำการคลิก
|
|
||||||
<i
|
|
||||||
class="q-icon mdi mdi-close"
|
|
||||||
style="
|
|
||||||
color: red;
|
|
||||||
background-color: #ffe5e6;
|
|
||||||
margin-right: 5px;
|
|
||||||
margin-left: 5px;
|
|
||||||
border-radius: 20px;
|
|
||||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
|
||||||
"
|
|
||||||
>
|
|
||||||
</i>
|
|
||||||
ระบบจะแสดงหน้าขั้นตอนที่ 2 หน้าเลือกรายชื่อ โดยไม่มีรายชื่อที่เลือก หากทำการเลือกรายชื่อเสร็จแล้ว ให้ทำการกรอกข้อมูลเงินเดือนทุกครั้ง โดยการใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-cash-multiple"
|
|
||||||
style="margin: 0 5px; color:rgb(49, 204, 236)"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
จากนั้นทำการกรอกข้อมูลเงินเดือน หากไม่ทำการกรอกข้อมูลเงินเดือน ในส่วนของการออกคำสั่ง รายงานการออกคำสั่งจะไม่ปรากฏเงินเดือน หรือการต้องการลบรายชื่อผู้สอบแข่งขันได้ที่ทำการเลือกรายชื่อ ให้ทำการคลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-delete"
|
|
||||||
style="margin: 0 5px; color:hsl(0, 100%, 50%)"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
รายชื่อที่ต้องการลบ และยืนยันการลบข้อมูล รายชื่อที่ถูกลบจะปรากฏอยู่ในตารางการเพิ่มรายชื่อ หากจะเพิ่มรายชื่อใหม่ก็ทำการคลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-plus"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
แล้วเพิ่มรายชื่อเข้ามาใหม่ได้
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/07_commands/1_main/7-4.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 7 – 4 เลือกรายชื่อออกรายงานคำสั่ง
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องแสดงขั้นตอนการออกคำสั่ง ขั้นตอนที่ 2 การเลือกรายชื่อ <br>
|
|
||||||
หมายเลข 2 ไอคอนสำหรับคลิกเพื่อเลือกรายชื่อ<br>
|
|
||||||
หมายเลข 3 ตารางแสดงรายชื่อที่ทำการเลือกรายชื่อมา<br>
|
|
||||||
หมายเลข 4 ไอคอนสำหรับคลิกเพื่อจัดเรียงรายชื่อขึ้น-ลง<br>
|
|
||||||
หมายเลข 5 ไอคอนสำหรับคลิกเพื่อกรอกข้อมูลเงินเดือน<br>
|
|
||||||
หมายเลข 6 ไอคอนสำหรับคลิกเพื่อลบรายชื่อออกจากการออกคำสั่งแต่งตั้ง<br>
|
|
||||||
หมายเลข 7 ช่องสำหรับคลิกกรอกข้อมูลเพื่อค้นหารายชื่อ<br>
|
|
||||||
หมายเลข 8 ปุ่มสำหรับคลิกเพื่อย้อนกลับไปขั้นตอนกรอกรายละเอียดก่อนหน้านี้<br>
|
|
||||||
หมายเลข 9 ปุ่มสำหรับคลิกเพื่อบันทึกข้อมูลการเลือกรายชื่อ
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- ขั้นตอนที่ 3 การเลือกรายชื่อส่งสำเราคำสั่ง เพิ่มรายชื่อตามหน่วยงาน ให้ทำการใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-plus"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
จากนั้นทำการเลือกรายชื่อที่ต้องการเพิ่มเพื่อส่งสำเนาคำสั่ง หากเลือกรายชื่อเสร็จแล้ว รายชื่อจะปรากฏในหน้าตารางของ ขั้นตอนที่ 3 เลือกรายชื่อออกคำสั่ง ให้ทำการคลิก
|
|
||||||
<span
|
|
||||||
style="
|
|
||||||
background-color: #01435F;
|
|
||||||
border: 1px solid #01435F;
|
|
||||||
color: white;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0px 5px;
|
|
||||||
border-radius: 2px;
|
|
||||||
margin: 0px 5px 0px 5px;
|
|
||||||
|
|
||||||
"
|
|
||||||
>
|
|
||||||
บันทึก
|
|
||||||
</span>
|
|
||||||
และยืนยันการบันทึกข้อมูล หรือหากต้องการลบรายชื่อ ให้ทำการใช้เมาส์คลิก
|
|
||||||
<i
|
|
||||||
class="q-icon mdi mdi-close"
|
|
||||||
style="
|
|
||||||
color: red;
|
|
||||||
background-color: #ffe5e6;
|
|
||||||
margin-right: 5px;
|
|
||||||
margin-left: 5px;
|
|
||||||
border-radius: 20px;
|
|
||||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
|
||||||
"
|
|
||||||
>
|
|
||||||
</i>
|
|
||||||
และยืนยันการลบข้อมูลรายชื่อ โดยระบบสามารถคลิกเพื่อเพิ่มรายชื่อส่งสำเนาคำสั่งได้เรื่อย ๆ
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/07_commands/1_main/7-5.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 7 – 5 แสดงรายชื่อหน่วยงานส่งสำเนาคำสั่ง
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องแสดงขั้นตอนการออกคำสั่ง ขั้นตอนที่ 3 การเลือกรายชื่อส่งสำเนาคำสั่ง <br>
|
|
||||||
หมายเลข 2 ไอคอนสำหรับคลิกเพื่อเพิ่มรายชื่อส่งสำเนาคำสั่ง<br>
|
|
||||||
หมายเลข 3 ช่องตารางแสดงรายชื่อที่เลือกส่งสำเราคำสั่ง<br>
|
|
||||||
หมายเลข 4 ช่องสำหรับคลิกเลือกช่องทางการส่งสำเนาคำสั่ง<br>
|
|
||||||
หมายเลข 5 ไอคอนสำหรับคลิกเพื่อลบรายชื่อการส่งสำเนาคำสั่ง<br>
|
|
||||||
หมายเลข 6 ช่องสำหรับคลิกเพื่อกรอกข้อมูลค้นหารายชื่อส่งสำเนาคำสั่ง<br>
|
|
||||||
หมายเลข 7 ปุ่มสำหรับคลิกเพื่อกลับไปเลือกรายชื่อ ขั้นตอนที่ 2<br>
|
|
||||||
หมายเลข 8 ปุ่มสำหรับคลิกเพื่อบันทึกข้อมูลรายชื่อส่งสำเนาคำสั่ง
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- การเลือกรายชื่อส่งสำเนาคำสั่ง ให้ทำการใช้เมาส์คลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-plus"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
ระบบแสดงตาราง “เลือกรายชื่อตามหน่วยงาน” จากนั้นทำการใช้เมาส์คลิกเลือกหน่วยงานก่อน จากนั้นระบบจะแสดงรายชื่อบุคคลของหน่วยงานนั้น ๆ ให้ จากนั้นทำการคลิก
|
|
||||||
<q-icon
|
|
||||||
name="mdi-checkbox-marked"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
เพื่อเลือกรายชื่อส่งสำเนาคำสั่ง หากทำการคลิกเลือกรายชื่อเสร็จสิ้นแล้ว ให้ทำการใช้เมาส์คลิก
|
|
||||||
<span
|
|
||||||
style="
|
|
||||||
background-color: #01435F;
|
|
||||||
border: 1px solid #01435F;
|
|
||||||
color: white;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0px 5px;
|
|
||||||
border-radius: 2px;
|
|
||||||
margin: 0px 5px 0px 5px;
|
|
||||||
|
|
||||||
"
|
|
||||||
>
|
|
||||||
บันทึก
|
|
||||||
</span>
|
|
||||||
และยืนยันการบันทึกข้อมูลการเพิ่มรายชื่อส่งสำเนาคำสั่ง และหากต้องการยกเลิกการเลือกรายชื่อ ให้คลิก
|
|
||||||
<i
|
|
||||||
class="q-icon mdi mdi-close"
|
|
||||||
style="
|
|
||||||
color: red;
|
|
||||||
background-color: #ffe5e6;
|
|
||||||
margin-right: 5px;
|
|
||||||
margin-left: 5px;
|
|
||||||
border-radius: 20px;
|
|
||||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
|
||||||
"
|
|
||||||
>
|
|
||||||
</i>
|
|
||||||
ระบบจะแสดงหน้าก่อนหน้านี้ หรือหน้าขั้นตอนที่ 3 เลือกรายชื่อส่งสำเนาคำสั่ง
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/07_commands/1_main/7-6.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 7 – 6 เลือกรายชื่อหน่วยงานส่งสำเนาคำสั่ง
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องสำหรับคลิกเพื่อกรอกข้อมูลค้นหาหน่วยงาน <br>
|
|
||||||
หมายเลข 2 ช่องสำหรับคลิกเลือกและแสดงหน่วยงานต่าง ๆ <br>
|
|
||||||
หมายเลข 3 ช่องตารางสำหรับแสดงรายชื่อของหน่วยงานที่ทำการคลิกเลือก/คลิกเลือกรายชื่อ<br>
|
|
||||||
หมายเลข 4 ช่องสำหรับกรอกข้อมูลค้นหารายชื่อที่ต้องการส่งสำเนาคำสั่ง<br>
|
|
||||||
หมายเลข 5 ปุ่มสำหรับคลิกบันทึกข้อมูลรายชื่อส่งสำเนาคำสั่ง<br>
|
|
||||||
หมายเลข 6 ไอคอนสำหรับคลิกเพื่อยกเลิกการเพิ่มรายชื่อส่งสำเนาคำสั่ง
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
- ขั้นตอนที่ 4 รายละเอียดคำสั่งและแนบท้าย ให้ทำการคลิกเลือก “วันที่ลงนาม” ในตาราง “รายละเอียด” และทำการคลิก
|
|
||||||
<span
|
|
||||||
style="
|
|
||||||
background-color: #01435F;
|
|
||||||
border: 1px solid #01435F;
|
|
||||||
color: white;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0px 5px;
|
|
||||||
border-radius: 2px;
|
|
||||||
margin: 0px 5px 0px 5px;
|
|
||||||
|
|
||||||
"
|
|
||||||
>
|
|
||||||
บันทึก
|
|
||||||
</span>
|
|
||||||
เพื่อให้เอกสารคำสั่งลงวันที่ลงนามในเอกสาร จากนั้นทำการคลิกในหัวข้อ “คำสั่ง” และ “เอกสารแนบท้าย” และทำการดาวน์โหลดไฟล์ PDF ต่อไปทำการเอาไฟล์คำสั่ง PDF ที่ทำการดาวน์โหลดมาอัปโหลดลงในตาราง “คำสั่ง” ไฟล์คำสั่งและไฟล์เอกสารแนบท้าย จากนั้นและคลิก
|
|
||||||
<span
|
|
||||||
style="
|
|
||||||
background-color: #01435F;
|
|
||||||
border: 1px solid #01435F;
|
|
||||||
color: white;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0px 5px;
|
|
||||||
border-radius: 2px;
|
|
||||||
margin: 0px 5px 0px 5px;
|
|
||||||
|
|
||||||
"
|
|
||||||
>
|
|
||||||
บันทึก
|
|
||||||
</span>
|
|
||||||
หากทำการคลิกบันทึกเสร็จแล้ว ระบบจะปรากฏไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-eye"
|
|
||||||
style="margin: 0 5px; color: #00aa86"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
สำหรับดูเอกสารที่อัปโหลด และไอคอน
|
|
||||||
<q-icon
|
|
||||||
name="mdi-download"
|
|
||||||
style="margin: 0 5px; color: red"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
สำหรับดาวน์โหลดเอกสาร หากบันทึกและตรวจสอบเอกสารเสร็จสิ้นหมดแล้ว ให้ทำการใช้เมาส์คลิก
|
|
||||||
<span
|
|
||||||
style="
|
|
||||||
background-color: #01435F;
|
|
||||||
border: 1px solid #01435F;
|
|
||||||
color: white;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0px 5px;
|
|
||||||
border-radius: 2px;
|
|
||||||
margin: 0px 5px 0px 5px;
|
|
||||||
|
|
||||||
"
|
|
||||||
>
|
|
||||||
ออกคำสั่ง
|
|
||||||
</span>
|
|
||||||
เลือก “ออกคำสั่งทันที” หากทำการคลิกออกคำสั่งเสร็จแล้ว จะไม่สามารถแก้ไขเอกสารคำสั่งได้อีก และหากคลิกออกคำสั่งเสร็จสิ้นแล้ว รายชื่อผู้สอบแข่งขันจะปรากฏในทะเบียนประวัติ ข้าราชการ กทม. สามัญ
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/07_commands/1_main/7-7.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 7 – 7 คำสั่งและแนบท้ายรายงานออกคำสั่ง
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #000000;
|
|
||||||
border-radius: 5px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
หมายเลข 1 ช่องแสดงขั้นตอนการออกคำสั่ง ขั้นตอนที่ 4 การเลือกรายชื่อส่งสำเนาคำสั่ง <br>
|
|
||||||
หมายเลข 2 ช่องสำหรับแสดงตัวอย่างเอกสารคำสั่ง <br>
|
|
||||||
หมายเลข 3 ช่องสำหรับกรอกเลขที่คำสั่ง <br>
|
|
||||||
หมายเลข 4 ช่องสำหรับคลิกเลือกปีที่ออกคำสั่ง <br>
|
|
||||||
หมายเลข 5 ไอคอนสำหรับคลิกเพื่อดูตัวอย่างเอกสารเต็มจอ <br>
|
|
||||||
หมายเลข 6 ไอคอนสำหรับคลิกเพื่อเลื่อนดูหน้าตัวอย่างเอกสารซ้าย-ขวา <br>
|
|
||||||
หมายเลข 7 ไอคอนสำหรับดาวน์โหลดเอกสารคำสั่ง (ไฟล์ PDF, xlsx) <br>
|
|
||||||
หมายเลข 8 ไอคอนสำหรับดาวน์โหลดเอกสารแนบท้าย (ไฟล์ PDF, xlsx) <br>
|
|
||||||
หมายเลข 9 ช่องสำหรับคลิกเลือกไฟล์คำสั่งเพื่ออัปโหลด <br>
|
|
||||||
หมายเลข 10 ไอคอนสำหรับดูเอกสารที่อัปโหลด และไอคอนดาวน์โหลดเอกสารที่อัปโหลด <br>
|
|
||||||
หมายเลข 11 ช่องสำหรับคลิกเลือกไฟล์เอกสารแนบท้ายเพื่ออัปโหลด <br>
|
|
||||||
หมายเลข 12 ไอคอนสำหรับดูเอกสารแนบท้ายที่อัปโหลด และไอคอนดาวน์โหลดเอกสารที่อัปโหลด <br>
|
|
||||||
หมายเลข 13 ปุ่มสำหรับคลิกบันทึกเพื่ออัปโหลดเอกสารคำสั่งและเอกสารแนบท้าย <br>
|
|
||||||
หมายเลข 14 ปุ่มสำหรับคลิกเพื่อย้อนไปขั้นตอนที่ 3 เลือกรายชื่อส่งสำเนา <br>
|
|
||||||
หมายเลข 15 ปุ่มสำหรับคลิกเพื่อออกคำสั่งเอกสาร
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/07_commands/1_main/7-8.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 7 – 8 ตัวอย่างเอกสารรายงานคำสั่ง
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<p style="margin-top: 50px; margin-left: 10px">
|
|
||||||
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<q-img
|
|
||||||
src="@/assets/manual/07_commands/1_main/7-9.png"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #97b2de;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
|
||||||
รูปภาพที่ 7 – 9 ตัวอย่างเอกสารแนบท้ายคำสั่ง
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</q-card>
|
|
||||||
<!-- </div>
|
|
||||||
</div> -->
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,843 +0,0 @@
|
||||||
<template>
|
|
||||||
<div :class="$style.div">
|
|
||||||
<div :class="$style.inner">
|
|
||||||
<div :class="$style.groupChild" />
|
|
||||||
</div>
|
|
||||||
<div :class="$style.child" />
|
|
||||||
<div :class="$style.item" />
|
|
||||||
<div :class="$style.rectangleDiv" />
|
|
||||||
<img :class="$style.image1Icon" alt="" src="/image-1@2x.png" />
|
|
||||||
<div :class="$style.child1" />
|
|
||||||
<div :class="$style.rectangleParent">
|
|
||||||
<div :class="$style.groupItem" />
|
|
||||||
<div :class="$style.caption">ค้นหา</div>
|
|
||||||
<img :class="$style.vectorIcon" alt="" src="/vector.svg" />
|
|
||||||
</div>
|
|
||||||
<div :class="$style.rectangleGroup">
|
|
||||||
<div :class="$style.groupInner" />
|
|
||||||
<div :class="$style.groupParent">
|
|
||||||
<div :class="$style.rectangleContainer">
|
|
||||||
<div :class="$style.groupChild1" />
|
|
||||||
<div :class="$style.div1">โครงสร้างอัตรากำลัง</div>
|
|
||||||
</div>
|
|
||||||
<div :class="$style.groupDiv">
|
|
||||||
<div :class="$style.groupChild1" />
|
|
||||||
<div :class="$style.div1">ทะเบียนประวัติ</div>
|
|
||||||
</div>
|
|
||||||
<div :class="$style.rectangleParent1">
|
|
||||||
<div :class="$style.groupChild1" />
|
|
||||||
<div :class="$style.div1">ทะเบียนประวัติลูกจ้าง</div>
|
|
||||||
</div>
|
|
||||||
<div :class="$style.rectangleParent2">
|
|
||||||
<div :class="$style.groupChild1" />
|
|
||||||
<div :class="$style.div1">สรรหาบุคคล</div>
|
|
||||||
</div>
|
|
||||||
<div :class="$style.rectangleParent3">
|
|
||||||
<div :class="$style.groupChild1" />
|
|
||||||
<div :class="$style.div1">ออกคำสั่ง</div>
|
|
||||||
</div>
|
|
||||||
<div :class="$style.rectangleParent4">
|
|
||||||
<div :class="$style.groupChild1" />
|
|
||||||
<div :class="$style.div1">บรรจุ แต่งตั้ง ย้าย โอน</div>
|
|
||||||
</div>
|
|
||||||
<div :class="$style.rectangleParent5">
|
|
||||||
<div :class="$style.groupChild1" />
|
|
||||||
<div :class="$style.div1">พ้นจากราชการ</div>
|
|
||||||
</div>
|
|
||||||
<div :class="$style.rectangleParent6">
|
|
||||||
<div :class="$style.groupChild1" />
|
|
||||||
<div :class="$style.div1">เครื่องราชอิสริยาภรณ์</div>
|
|
||||||
</div>
|
|
||||||
<div :class="$style.rectangleParent7">
|
|
||||||
<div :class="$style.groupChild1" />
|
|
||||||
<div :class="$style.div1">การลา</div>
|
|
||||||
</div>
|
|
||||||
<div :class="$style.rectangleParent8">
|
|
||||||
<div :class="$style.groupChild1" />
|
|
||||||
<div :class="$style.div10">วินัย</div>
|
|
||||||
</div>
|
|
||||||
<div :class="$style.rectangleParent9">
|
|
||||||
<div :class="$style.groupChild1" />
|
|
||||||
<div :class="$style.div1">ความสามารถพิเศษ</div>
|
|
||||||
</div>
|
|
||||||
<div :class="$style.rectangleParent10">
|
|
||||||
<div :class="$style.groupChild12" />
|
|
||||||
<div :class="$style.div12">ข้อมูลหลัก</div>
|
|
||||||
</div>
|
|
||||||
<div :class="$style.rectangleParent11">
|
|
||||||
<div :class="$style.groupChild1" />
|
|
||||||
<div :class="$style.div10">ปฏิบัติราชการพิเศษ</div>
|
|
||||||
</div>
|
|
||||||
<div :class="$style.rectangleParent12">
|
|
||||||
<div :class="$style.groupChild1" />
|
|
||||||
<div :class="$style.div10">บันทึกวันที่ไม่ได้รับเงินเดือนฯ</div>
|
|
||||||
</div>
|
|
||||||
<div :class="$style.rectangleParent13">
|
|
||||||
<div :class="$style.groupChild1" />
|
|
||||||
<div :class="$style.div1">อื่นๆ</div>
|
|
||||||
</div>
|
|
||||||
<div :class="$style.rectangleParent14">
|
|
||||||
<div :class="$style.groupChild1" />
|
|
||||||
<div :class="$style.div1">เอกสารหลักฐาน</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div :class="$style.captionParent">
|
|
||||||
<div :class="$style.caption1">
|
|
||||||
<span>ระบบ</span>
|
|
||||||
<span :class="$style.span">ทรัพยากรบุคคล</span>
|
|
||||||
</div>
|
|
||||||
<div :class="$style.caption2">Support</div>
|
|
||||||
<div :class="$style.lineDiv" />
|
|
||||||
</div>
|
|
||||||
<div :class="$style.div17">เราจะช่วยคุณได้อย่างไร</div>
|
|
||||||
<div :class="$style.div18">ข้อมูลหลัก</div>
|
|
||||||
<img :class="$style.rectangleIcon" alt="" src="/rectangle-3464303@2x.png" />
|
|
||||||
<div :class="$style.groupContainer">
|
|
||||||
<div :class="$style.parent">
|
|
||||||
<div :class="$style.div19">ขอบเขตของระบบข้อมูล</div>
|
|
||||||
<div :class="$style.wrapper">
|
|
||||||
<div :class="$style.div20">
|
|
||||||
<ul :class="$style.ul">
|
|
||||||
<li :class="$style.li">
|
|
||||||
ระบบจัดการข้อมูลหลักเกี่ยวกับทรัพยากรบุคคลมีขอบเขตที่รวมถึงข้อมูลทั้งหมดที่เกี่ยวข้องกับพนักงานในองค์กร
|
|
||||||
ข้อมูลเกี่ยวกับบุคคล, ข้อมูลโครงสร้าง
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<p :class="$style.p">
|
|
||||||
หน่วยงาน, ข้อมูลข้าราชการ ข้อมูลลูกจ้าง, วันลา, และข้อมูลอื่นๆ
|
|
||||||
ที่เกี่ยวข้องกับการจัดการทรัพยากรบุคคล
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div :class="$style.frameParent">
|
|
||||||
<div :class="$style.container">
|
|
||||||
<div :class="$style.div21">
|
|
||||||
<ul :class="$style.ul">
|
|
||||||
<li :class="$style.li">
|
|
||||||
<span :class="$style.span1"
|
|
||||||
>การเข้าถึงและบริหารจัดการข้อมูล</span
|
|
||||||
>
|
|
||||||
<span :class="$style.span2"> : </span>
|
|
||||||
<span
|
|
||||||
>การตรวจสอบและรักษาความปลอดภัยในการเข้าถึงข้อมูล การสร้าง,
|
|
||||||
การอัปเดต, การลบข้อมูลตามความเหมาะสม
|
|
||||||
และการจัดการสิทธิ์ในการเข้าถึงข้อมูลของบุคคลในองค์กร</span
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li :class="$style.li">
|
|
||||||
<span :class="$style.span1">การดูแลรักษาความเสถียร :</span>
|
|
||||||
<span :class="$style.span4">
|
|
||||||
การควบคุมฐานข้อมูล
|
|
||||||
หรือระบบให้มีประสิทธิภาพและเสถียรภาพตลอดเวลา</span
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span :class="$style.span1">การสำรองข้อมูล :</span>
|
|
||||||
<span :class="$style.span2"> </span>
|
|
||||||
<span :class="$style.span4"
|
|
||||||
>การสำรองข้อมูลเพื่อป้องกันข้อมูลไม่สูญหายในกรณีของภัยคุกคามหรือปัญหาทางเทคนิคที่อาจเกิดขึ้น</span
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div :class="$style.div22">ขั้นตอนการดูแลระบบ</div>
|
|
||||||
</div>
|
|
||||||
<div :class="$style.frameChild" />
|
|
||||||
<div :class="$style.frameItem" />
|
|
||||||
<div :class="$style.group">
|
|
||||||
<div :class="$style.div23">คำถามที่พบบ่อย</div>
|
|
||||||
<div :class="$style.rectangleParent15">
|
|
||||||
<div :class="$style.groupChild17" />
|
|
||||||
<img :class="$style.layer1Icon" alt="" src="/layer-1.svg" />
|
|
||||||
<div :class="$style.div24">
|
|
||||||
วิธีเข้าถึงและปรับปรุงข้อมูลส่วนตัวของพนักงานคืออย่างไร?
|
|
||||||
</div>
|
|
||||||
<div :class="$style.div25">
|
|
||||||
<ul :class="$style.ul">
|
|
||||||
<li :class="$style.li">
|
|
||||||
พนักงานสามารถเข้าถึงและปรับปรุงข้อมูลส่วนตัวของตนได้ผ่านระบบส่วนบุคคลบนพอร์ทัลล์ของพนักงาน
|
|
||||||
การเข้าถึงข้อมูลส่วนตัวจะต้องผ่านการ
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<p :class="$style.p">ตรวจสอบตัวตนและการสอบถามเพื่อความปลอดภัย</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div :class="$style.rectangleParent16">
|
|
||||||
<div :class="$style.groupChild18" />
|
|
||||||
<img :class="$style.layer1Icon" alt="" src="/layer-11.svg" />
|
|
||||||
<div :class="$style.div24">
|
|
||||||
มีข้อมูลที่สูญหายหรือข้อมูลที่ถูกลบโดยไม่ตั้งใจหรือไม่?
|
|
||||||
</div>
|
|
||||||
<div :class="$style.div27">
|
|
||||||
<ul :class="$style.ul">
|
|
||||||
ทางเรามีมาตรการความปลอดภัยที่เข้มงวดเพื่อป้องกันการสูญหายข้อมูล
|
|
||||||
และมีการบันทึกการเข้าถึงและการดำเนินการกับข้อมูลทุกครั้ง
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div :class="$style.rectangleParent17">
|
|
||||||
<div :class="$style.groupChild19" />
|
|
||||||
<img :class="$style.layer1Icon" alt="" src="/layer-12.svg" />
|
|
||||||
<div :class="$style.div24">
|
|
||||||
มีมาตรการความปลอดภัยในการจัดเก็บและใช้ข้อมูลบุคคลหรือไม่?
|
|
||||||
</div>
|
|
||||||
<div :class="$style.div29">
|
|
||||||
<ul :class="$style.ul">
|
|
||||||
<li :class="$style.li">
|
|
||||||
เรามีมาตรการความปลอดภัยที่เข้มงวดเพื่อป้องกันการเข้าถึงข้อมูลบุคคลภายนอกโดยไม่ได้รับอนุญาต
|
|
||||||
มีการใช้เทคโนโลยีการเข้ารหัสและระบบการ
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<p :class="$style.p">ตรวจสอบตัวตนเพื่อปกป้องข้อมูล</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent } from "vue";
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: "Frame",
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style module>
|
|
||||||
.groupChild {
|
|
||||||
position: absolute;
|
|
||||||
top: 89px;
|
|
||||||
left: 0px;
|
|
||||||
background-color: var(--color-white);
|
|
||||||
box-shadow: 0px 4px 20px rgba(224, 235, 240, 0.4);
|
|
||||||
width: 1920px;
|
|
||||||
height: 89px;
|
|
||||||
}
|
|
||||||
.inner {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 1920px;
|
|
||||||
height: 89px;
|
|
||||||
}
|
|
||||||
.child {
|
|
||||||
position: absolute;
|
|
||||||
top: 396px;
|
|
||||||
left: calc(50% - 422px);
|
|
||||||
border-radius: var(--br-5xs);
|
|
||||||
background-color: var(--color-white);
|
|
||||||
box-shadow: 0px 4px 22px rgba(200, 211, 219, 0.22);
|
|
||||||
border: 1px solid var(--color-whitesmoke-300);
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 1166px;
|
|
||||||
height: 709px;
|
|
||||||
}
|
|
||||||
.item {
|
|
||||||
position: absolute;
|
|
||||||
top: 396px;
|
|
||||||
left: calc(50% - 422px);
|
|
||||||
border-radius: var(--br-5xs) var(--br-5xs) 0px 0px;
|
|
||||||
background-color: var(--color-lightseagreen);
|
|
||||||
box-shadow: 0px 4px 22px rgba(200, 211, 219, 0.22);
|
|
||||||
border: 1px solid var(--color-whitesmoke-300);
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 1166px;
|
|
||||||
height: 59px;
|
|
||||||
}
|
|
||||||
.rectangleDiv {
|
|
||||||
position: absolute;
|
|
||||||
top: 89px;
|
|
||||||
left: calc(50% - 960px);
|
|
||||||
background-color: var(--color-darkslategray-100);
|
|
||||||
box-shadow: 0px 4px 22px rgba(200, 211, 219, 0.22);
|
|
||||||
border: 1px solid var(--color-whitesmoke-300);
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 1920px;
|
|
||||||
height: 262px;
|
|
||||||
}
|
|
||||||
.image1Icon {
|
|
||||||
position: absolute;
|
|
||||||
top: 90px;
|
|
||||||
left: 0px;
|
|
||||||
width: 1921px;
|
|
||||||
height: 261px;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
.child1 {
|
|
||||||
position: absolute;
|
|
||||||
top: 90px;
|
|
||||||
left: 0px;
|
|
||||||
background: linear-gradient(
|
|
||||||
90deg,
|
|
||||||
#273238 15.1%,
|
|
||||||
#273238 30.73%,
|
|
||||||
rgba(39, 50, 56, 0.91) 41.67%,
|
|
||||||
rgba(39, 50, 56, 0.87) 50%,
|
|
||||||
rgba(39, 50, 56, 0.69) 66.67%,
|
|
||||||
rgba(39, 50, 56, 0.33) 77.08%,
|
|
||||||
rgba(39, 50, 56, 0) 88.02%
|
|
||||||
);
|
|
||||||
width: 1920px;
|
|
||||||
height: 261px;
|
|
||||||
}
|
|
||||||
.groupItem {
|
|
||||||
position: absolute;
|
|
||||||
height: 100%;
|
|
||||||
top: 0%;
|
|
||||||
bottom: 0%;
|
|
||||||
left: calc(50% - 608.5px);
|
|
||||||
border-radius: 10px;
|
|
||||||
background-color: #f8f8f8;
|
|
||||||
border: 1px solid var(--input-outline-default);
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 1217px;
|
|
||||||
}
|
|
||||||
.caption {
|
|
||||||
position: absolute;
|
|
||||||
top: 25.81%;
|
|
||||||
left: 6.14%;
|
|
||||||
line-height: 150%;
|
|
||||||
}
|
|
||||||
.vectorIcon {
|
|
||||||
position: absolute;
|
|
||||||
height: 38.71%;
|
|
||||||
width: 2%;
|
|
||||||
top: 30.65%;
|
|
||||||
right: 95.64%;
|
|
||||||
bottom: 30.65%;
|
|
||||||
left: 2.37%;
|
|
||||||
max-width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
max-height: 100%;
|
|
||||||
}
|
|
||||||
.rectangleParent {
|
|
||||||
position: absolute;
|
|
||||||
height: 5.17%;
|
|
||||||
top: 18.08%;
|
|
||||||
bottom: 76.75%;
|
|
||||||
left: calc(50% - 608px);
|
|
||||||
width: 1217px;
|
|
||||||
color: rgba(116, 116, 116, 0.52);
|
|
||||||
font-family: var(--font-noto-sans);
|
|
||||||
}
|
|
||||||
.groupInner {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: calc(50% - 145.5px);
|
|
||||||
border-radius: var(--br-5xs);
|
|
||||||
background-color: var(--color-white);
|
|
||||||
border: 1px solid var(--color-whitesmoke-300);
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 291px;
|
|
||||||
height: 554px;
|
|
||||||
}
|
|
||||||
.groupChild1 {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
border-radius: var(--br-8xs);
|
|
||||||
background-color: var(--color-whitesmoke-100);
|
|
||||||
width: 274px;
|
|
||||||
height: 44px;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
.div1 {
|
|
||||||
position: absolute;
|
|
||||||
top: 10.1px;
|
|
||||||
left: 26px;
|
|
||||||
line-height: 24px;
|
|
||||||
font-weight: 300;
|
|
||||||
display: inline-block;
|
|
||||||
width: 161px;
|
|
||||||
height: 24.52px;
|
|
||||||
}
|
|
||||||
.rectangleContainer {
|
|
||||||
position: absolute;
|
|
||||||
top: 50px;
|
|
||||||
left: 0px;
|
|
||||||
width: 274px;
|
|
||||||
height: 44px;
|
|
||||||
}
|
|
||||||
.groupDiv {
|
|
||||||
position: absolute;
|
|
||||||
top: 99px;
|
|
||||||
left: 0px;
|
|
||||||
width: 274px;
|
|
||||||
height: 44px;
|
|
||||||
}
|
|
||||||
.rectangleParent1 {
|
|
||||||
position: absolute;
|
|
||||||
top: 148px;
|
|
||||||
left: 0px;
|
|
||||||
width: 274px;
|
|
||||||
height: 44px;
|
|
||||||
}
|
|
||||||
.rectangleParent2 {
|
|
||||||
position: absolute;
|
|
||||||
top: 198px;
|
|
||||||
left: 0px;
|
|
||||||
width: 274px;
|
|
||||||
height: 44px;
|
|
||||||
}
|
|
||||||
.rectangleParent3 {
|
|
||||||
position: absolute;
|
|
||||||
top: 247px;
|
|
||||||
left: 0px;
|
|
||||||
width: 274px;
|
|
||||||
height: 44px;
|
|
||||||
}
|
|
||||||
.rectangleParent4 {
|
|
||||||
position: absolute;
|
|
||||||
top: 296px;
|
|
||||||
left: 0px;
|
|
||||||
width: 274px;
|
|
||||||
height: 44px;
|
|
||||||
}
|
|
||||||
.rectangleParent5 {
|
|
||||||
position: absolute;
|
|
||||||
top: 345px;
|
|
||||||
left: 0px;
|
|
||||||
width: 274px;
|
|
||||||
height: 44px;
|
|
||||||
}
|
|
||||||
.rectangleParent6 {
|
|
||||||
position: absolute;
|
|
||||||
top: 394px;
|
|
||||||
left: 0px;
|
|
||||||
width: 274px;
|
|
||||||
height: 44px;
|
|
||||||
}
|
|
||||||
.rectangleParent7 {
|
|
||||||
position: absolute;
|
|
||||||
top: 443px;
|
|
||||||
left: 0px;
|
|
||||||
width: 274px;
|
|
||||||
height: 44px;
|
|
||||||
}
|
|
||||||
.div10 {
|
|
||||||
position: absolute;
|
|
||||||
top: 10.1px;
|
|
||||||
left: 26px;
|
|
||||||
line-height: 24px;
|
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
.rectangleParent8 {
|
|
||||||
position: absolute;
|
|
||||||
top: 493px;
|
|
||||||
left: 0px;
|
|
||||||
width: 274px;
|
|
||||||
height: 44px;
|
|
||||||
}
|
|
||||||
.rectangleParent9 {
|
|
||||||
position: absolute;
|
|
||||||
top: 689px;
|
|
||||||
left: 0px;
|
|
||||||
width: 274px;
|
|
||||||
height: 44px;
|
|
||||||
}
|
|
||||||
.groupChild12 {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
border-radius: var(--br-8xs);
|
|
||||||
background-color: rgba(0, 137, 226, 0.04);
|
|
||||||
border: 1px solid #fafafa;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 274px;
|
|
||||||
height: 44px;
|
|
||||||
}
|
|
||||||
.div12 {
|
|
||||||
position: absolute;
|
|
||||||
top: 13px;
|
|
||||||
left: 26px;
|
|
||||||
line-height: 24px;
|
|
||||||
font-weight: 500;
|
|
||||||
display: inline-block;
|
|
||||||
width: 130px;
|
|
||||||
height: 24.52px;
|
|
||||||
}
|
|
||||||
.rectangleParent10 {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 274px;
|
|
||||||
height: 44px;
|
|
||||||
color: #0089e2;
|
|
||||||
}
|
|
||||||
.rectangleParent11 {
|
|
||||||
position: absolute;
|
|
||||||
top: 738px;
|
|
||||||
left: 0px;
|
|
||||||
width: 274px;
|
|
||||||
height: 44px;
|
|
||||||
}
|
|
||||||
.rectangleParent12 {
|
|
||||||
position: absolute;
|
|
||||||
top: 787px;
|
|
||||||
left: 0px;
|
|
||||||
width: 274px;
|
|
||||||
height: 44px;
|
|
||||||
}
|
|
||||||
.rectangleParent13 {
|
|
||||||
position: absolute;
|
|
||||||
top: 836px;
|
|
||||||
left: 0px;
|
|
||||||
width: 274px;
|
|
||||||
height: 44px;
|
|
||||||
}
|
|
||||||
.rectangleParent14 {
|
|
||||||
position: absolute;
|
|
||||||
top: 885px;
|
|
||||||
left: 0px;
|
|
||||||
width: 274px;
|
|
||||||
height: 44px;
|
|
||||||
}
|
|
||||||
.groupParent {
|
|
||||||
position: absolute;
|
|
||||||
top: 7.09px;
|
|
||||||
left: 8px;
|
|
||||||
width: 274px;
|
|
||||||
height: 538.29px;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
.rectangleGroup {
|
|
||||||
position: absolute;
|
|
||||||
top: 396px;
|
|
||||||
left: calc(50% - 744px);
|
|
||||||
box-shadow: 0px 4px 22px rgba(200, 211, 219, 0.22);
|
|
||||||
width: 291px;
|
|
||||||
height: 554px;
|
|
||||||
font-size: var(--body-2-light-size);
|
|
||||||
}
|
|
||||||
.span {
|
|
||||||
color: var(--color-lightseagreen);
|
|
||||||
}
|
|
||||||
.caption1 {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 14px;
|
|
||||||
font-weight: 900;
|
|
||||||
display: inline-block;
|
|
||||||
width: 181px;
|
|
||||||
height: 24px;
|
|
||||||
}
|
|
||||||
.caption2 {
|
|
||||||
position: absolute;
|
|
||||||
top: 27px;
|
|
||||||
left: 14px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #818181;
|
|
||||||
}
|
|
||||||
.lineDiv {
|
|
||||||
position: absolute;
|
|
||||||
top: 8px;
|
|
||||||
left: -1px;
|
|
||||||
border-right: 2px solid var(--text-body-black);
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 2px;
|
|
||||||
height: 38px;
|
|
||||||
}
|
|
||||||
.captionParent {
|
|
||||||
position: absolute;
|
|
||||||
top: 20px;
|
|
||||||
left: 205px;
|
|
||||||
width: 195px;
|
|
||||||
height: 48px;
|
|
||||||
color: var(--color-darkslategray-100);
|
|
||||||
}
|
|
||||||
.div17 {
|
|
||||||
position: absolute;
|
|
||||||
top: 162px;
|
|
||||||
left: 352px;
|
|
||||||
font-size: 32px;
|
|
||||||
letter-spacing: 0.03em;
|
|
||||||
line-height: 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--color-white);
|
|
||||||
}
|
|
||||||
.div18 {
|
|
||||||
position: absolute;
|
|
||||||
top: 415px;
|
|
||||||
left: 588px;
|
|
||||||
letter-spacing: 0.03em;
|
|
||||||
line-height: 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--color-white);
|
|
||||||
}
|
|
||||||
.rectangleIcon {
|
|
||||||
position: absolute;
|
|
||||||
top: 25px;
|
|
||||||
left: 142px;
|
|
||||||
border-radius: 126px;
|
|
||||||
width: 44px;
|
|
||||||
height: 44px;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
.div19 {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
letter-spacing: 0.03em;
|
|
||||||
line-height: 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.li {
|
|
||||||
margin-bottom: 0px;
|
|
||||||
}
|
|
||||||
.ul {
|
|
||||||
margin: 0;
|
|
||||||
padding-left: var(--padding-2xl);
|
|
||||||
}
|
|
||||||
.p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.div20 {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
left: 24px;
|
|
||||||
letter-spacing: 0.03em;
|
|
||||||
line-height: 24px;
|
|
||||||
display: inline-block;
|
|
||||||
width: 1032px;
|
|
||||||
}
|
|
||||||
.wrapper {
|
|
||||||
position: absolute;
|
|
||||||
top: 49px;
|
|
||||||
left: 0px;
|
|
||||||
border-radius: var(--br-5xs);
|
|
||||||
background-color: var(--color-whitesmoke-200);
|
|
||||||
box-shadow: 0px 4px 22px rgba(200, 211, 219, 0.22);
|
|
||||||
border: 1px solid var(--color-whitesmoke-300);
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 1070px;
|
|
||||||
height: 68px;
|
|
||||||
overflow: hidden;
|
|
||||||
font-size: var(--font-inherit);
|
|
||||||
font-family: var(--font-inherit);
|
|
||||||
}
|
|
||||||
.parent {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 27px;
|
|
||||||
width: 1070px;
|
|
||||||
height: 117px;
|
|
||||||
}
|
|
||||||
.span1 {
|
|
||||||
font-weight: 600;
|
|
||||||
font-family: var(--body-2-light);
|
|
||||||
}
|
|
||||||
.span2 {
|
|
||||||
font-weight: 500;
|
|
||||||
font-family: var(--body-2-light);
|
|
||||||
}
|
|
||||||
.span4 {
|
|
||||||
font-family: var(--body-2-light);
|
|
||||||
}
|
|
||||||
.div21 {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
left: 26px;
|
|
||||||
letter-spacing: 0.03em;
|
|
||||||
line-height: 24px;
|
|
||||||
display: inline-block;
|
|
||||||
width: 1014px;
|
|
||||||
}
|
|
||||||
.container {
|
|
||||||
position: absolute;
|
|
||||||
top: 49px;
|
|
||||||
left: 0px;
|
|
||||||
border-radius: var(--br-5xs);
|
|
||||||
background-color: var(--color-whitesmoke-200);
|
|
||||||
box-shadow: 0px 4px 22px rgba(200, 211, 219, 0.22);
|
|
||||||
border: 1px solid var(--color-whitesmoke-300);
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 1070px;
|
|
||||||
height: 116px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.div22 {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
font-size: var(--font-size-lg);
|
|
||||||
letter-spacing: 0.03em;
|
|
||||||
line-height: 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.frameParent {
|
|
||||||
position: absolute;
|
|
||||||
top: 187px;
|
|
||||||
left: 27px;
|
|
||||||
width: 1070px;
|
|
||||||
height: 165px;
|
|
||||||
font-size: var(--font-inherit);
|
|
||||||
}
|
|
||||||
.frameChild {
|
|
||||||
position: absolute;
|
|
||||||
top: 157.5px;
|
|
||||||
left: -0.5px;
|
|
||||||
border-top: 1px solid var(--color-whitesmoke-300);
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 1121px;
|
|
||||||
height: 1px;
|
|
||||||
}
|
|
||||||
.frameItem {
|
|
||||||
position: absolute;
|
|
||||||
top: 390.5px;
|
|
||||||
left: 1.5px;
|
|
||||||
border-top: 1px solid var(--color-whitesmoke-300);
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 1121px;
|
|
||||||
height: 1px;
|
|
||||||
}
|
|
||||||
.div23 {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 2px;
|
|
||||||
font-size: var(--font-size-lg);
|
|
||||||
letter-spacing: 0.03em;
|
|
||||||
line-height: 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--text-body-black);
|
|
||||||
}
|
|
||||||
.groupChild17 {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: calc(50% - 535px);
|
|
||||||
border-radius: var(--br-5xs);
|
|
||||||
background-color: var(--color-whitesmoke-200);
|
|
||||||
box-shadow: 0px 4px 22px rgba(200, 211, 219, 0.22);
|
|
||||||
width: 1070px;
|
|
||||||
height: 104px;
|
|
||||||
}
|
|
||||||
.layer1Icon {
|
|
||||||
position: absolute;
|
|
||||||
top: 19px;
|
|
||||||
left: 27px;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.div24 {
|
|
||||||
position: absolute;
|
|
||||||
top: 14px;
|
|
||||||
left: 61px;
|
|
||||||
letter-spacing: 0.03em;
|
|
||||||
line-height: 24px;
|
|
||||||
font-weight: 500;
|
|
||||||
display: inline-block;
|
|
||||||
width: 819px;
|
|
||||||
}
|
|
||||||
.div25 {
|
|
||||||
position: absolute;
|
|
||||||
top: 47px;
|
|
||||||
left: 52px;
|
|
||||||
font-size: var(--font-inherit);
|
|
||||||
letter-spacing: 0.03em;
|
|
||||||
line-height: 24px;
|
|
||||||
font-family: var(--font-inherit);
|
|
||||||
color: var(--text-body-black);
|
|
||||||
display: inline-block;
|
|
||||||
width: 970px;
|
|
||||||
height: 51px;
|
|
||||||
}
|
|
||||||
.rectangleParent15 {
|
|
||||||
position: absolute;
|
|
||||||
top: 49px;
|
|
||||||
left: calc(50% - 535px);
|
|
||||||
width: 1070px;
|
|
||||||
height: 104px;
|
|
||||||
}
|
|
||||||
.groupChild18 {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: calc(50% - 535px);
|
|
||||||
border-radius: var(--br-5xs);
|
|
||||||
background-color: var(--color-whitesmoke-200);
|
|
||||||
box-shadow: 0px 4px 22px rgba(200, 211, 219, 0.22);
|
|
||||||
width: 1070px;
|
|
||||||
height: 86px;
|
|
||||||
}
|
|
||||||
.div27 {
|
|
||||||
position: absolute;
|
|
||||||
top: 47px;
|
|
||||||
left: 52px;
|
|
||||||
font-size: var(--font-inherit);
|
|
||||||
letter-spacing: 0.03em;
|
|
||||||
line-height: 24px;
|
|
||||||
font-family: var(--font-inherit);
|
|
||||||
color: var(--text-body-black);
|
|
||||||
display: inline-block;
|
|
||||||
width: 978px;
|
|
||||||
height: 25px;
|
|
||||||
}
|
|
||||||
.rectangleParent16 {
|
|
||||||
position: absolute;
|
|
||||||
top: 178px;
|
|
||||||
left: calc(50% - 535px);
|
|
||||||
width: 1070px;
|
|
||||||
height: 86px;
|
|
||||||
}
|
|
||||||
.groupChild19 {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: calc(50% - 535px);
|
|
||||||
border-radius: var(--br-5xs);
|
|
||||||
background-color: var(--color-whitesmoke-200);
|
|
||||||
box-shadow: 0px 4px 22px rgba(200, 211, 219, 0.22);
|
|
||||||
width: 1070px;
|
|
||||||
height: 106px;
|
|
||||||
}
|
|
||||||
.div29 {
|
|
||||||
position: absolute;
|
|
||||||
top: 47px;
|
|
||||||
left: 52px;
|
|
||||||
font-size: var(--font-inherit);
|
|
||||||
letter-spacing: 0.03em;
|
|
||||||
line-height: 24px;
|
|
||||||
font-family: var(--font-inherit);
|
|
||||||
color: var(--text-body-black);
|
|
||||||
display: inline-block;
|
|
||||||
width: 978px;
|
|
||||||
height: 55px;
|
|
||||||
}
|
|
||||||
.rectangleParent17 {
|
|
||||||
position: absolute;
|
|
||||||
top: 289px;
|
|
||||||
left: calc(50% - 535px);
|
|
||||||
width: 1070px;
|
|
||||||
height: 106px;
|
|
||||||
}
|
|
||||||
.group {
|
|
||||||
position: absolute;
|
|
||||||
top: 424px;
|
|
||||||
left: 27px;
|
|
||||||
width: 1070px;
|
|
||||||
height: 395px;
|
|
||||||
font-size: var(--body-2-light-size);
|
|
||||||
color: var(--color-lightseagreen);
|
|
||||||
}
|
|
||||||
.groupContainer {
|
|
||||||
position: absolute;
|
|
||||||
top: 484px;
|
|
||||||
left: 561px;
|
|
||||||
width: 1122px;
|
|
||||||
height: 621px;
|
|
||||||
overflow: auto;
|
|
||||||
font-size: var(--font-size-lg);
|
|
||||||
}
|
|
||||||
.div {
|
|
||||||
position: relative;
|
|
||||||
background-color: #f7f9fa;
|
|
||||||
box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.12);
|
|
||||||
width: 100%;
|
|
||||||
height: 1200px;
|
|
||||||
text-align: left;
|
|
||||||
font-size: var(--font-size-xl);
|
|
||||||
color: var(--text-body-black);
|
|
||||||
font-family: var(--body-2-light);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,85 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import commandsmain from "@/modules/01_manual/components/7_commands/71_main.vue"
|
|
||||||
import ehrtry from "@/modules/01_manual/components/7_commands/72_try.vue"
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div class="col-12 row">
|
|
||||||
<div
|
|
||||||
class="toptitle text-dark col-12 row items-center"
|
|
||||||
style="padding-top: 40px"
|
|
||||||
>
|
|
||||||
คู่มือการใช้งานระบบจัดการระบบสรรหา
|
|
||||||
</div>
|
|
||||||
<div class="row col-12 q-gutter-xs">
|
|
||||||
<div
|
|
||||||
id="recruitmain"
|
|
||||||
name="1"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<commandsmain />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
id="recruitSetting"
|
|
||||||
name="2"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<ehrtry />
|
|
||||||
</div>
|
|
||||||
<!-- <div
|
|
||||||
id="recruitManage"
|
|
||||||
name="3"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
สอบแข่งขัน
|
|
||||||
</div> -->
|
|
||||||
<div
|
|
||||||
id="recruitManage"
|
|
||||||
name="3"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<recruitManage />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="recruitstati"
|
|
||||||
name="4"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<recruitstati />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="recruitQualifiers"
|
|
||||||
name="5"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<recruitQualifiers />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="recruitDisabilities"
|
|
||||||
name="6"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<recruitDisabilities />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="recruitSelection"
|
|
||||||
name="7"
|
|
||||||
class="row col-12 information"
|
|
||||||
style="padding-bottom: 60px"
|
|
||||||
>
|
|
||||||
<recruitSelection />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
|
|
@ -1,502 +1,9 @@
|
||||||
const viewLogin = () => import("@/modules/01_manual/components/1_login/view.vue")
|
import type { RouteRecordRaw } from "vue-router";
|
||||||
const Mainlogin = () => import("@/modules/01_manual/components/1_login/01_Main.vue");
|
|
||||||
const MainLog = () => import("@/modules/01_manual/components/1_login/02_login.vue");
|
|
||||||
const Mainpass = () => import("@/modules/01_manual/components/1_login/03_Password.vue");
|
|
||||||
const Mainuser = () => import("@/modules/01_manual/components/1_login/04_newuser.vue");
|
|
||||||
const Mainlogout = () => import("@/modules/01_manual/components/1_login/05_logout.vue");
|
|
||||||
const Mainnoti = () => import("@/modules/01_manual/components/1_login/06_noti.vue");
|
|
||||||
|
|
||||||
|
|
||||||
const viewDatamain = () => import("@/modules/01_manual/components/2_data/view.vue")
|
|
||||||
const Datamain = () => import("@/modules/01_manual/components/2_data/21_Main.vue");
|
|
||||||
const Dataabout = () => import("@/modules/01_manual/components/2_data/22_About.vue");
|
|
||||||
const Datagov = () => import("@/modules/01_manual/components/2_data/23_Gov.vue");
|
|
||||||
const Dataofficer = () => import("@/modules/01_manual/components/2_data/24_Officer.vue");
|
|
||||||
const Dataemployee = () => import("@/modules/01_manual/components/2_data/25_Employee.vue");
|
|
||||||
const Datacalendar = () => import("@/modules/01_manual/components/2_data/26_Calendar.vue");
|
|
||||||
const Datalnsignia = () => import("@/modules/01_manual/components/2_data/27_Insignia.vue");
|
|
||||||
|
|
||||||
const viewStructure = () => import("@/modules/01_manual/components/3_Structure/view.vue")
|
|
||||||
const Structuremain = () => import("@/modules/01_manual/components/3_Structure/31_Main.vue");
|
|
||||||
const Structureposition = () => import("@/modules/01_manual/components/3_Structure/32_Position.vue");
|
|
||||||
const Structurestructure = () => import("@/modules/01_manual/components/3_Structure/33_Structure.vue");
|
|
||||||
const Structureorganchart = () => import("@/modules/01_manual/components/3_Structure/34_organchart.vue");
|
|
||||||
const Structurechartstru = () => import("@/modules/01_manual/components/3_Structure/35_chartstru.vue");
|
|
||||||
const Structureaccount2 = () => import("@/modules/01_manual/components/3_Structure/36_account2.vue");
|
|
||||||
const Structurereport = () => import("@/modules/01_manual/components/3_Structure/37_report.vue");
|
|
||||||
const Structurechartemploy = () => import("@/modules/01_manual/components/3_Structure/38_chartemploy.vue");
|
|
||||||
|
|
||||||
|
|
||||||
const viewRegist = () => import("@/modules/01_manual/components/4_registration/view.vue")
|
|
||||||
// const registmain = () => import("@/modules/01_manual/components/4_ registration/41_main.vue");
|
|
||||||
// const registfind = () => import("@/modules/01_manual/components/4_ registration/42_find.vue");
|
|
||||||
// const registdetail = () => import("@/modules/01_manual/components/4_ registration/43_detail.vue");
|
|
||||||
// const registedit = () => import("@/modules/01_manual/components/4_ registration/44_edit.vue");
|
|
||||||
// const registselect = () => import("@/modules/01_manual/components/4_ registration/45_select.vue");
|
|
||||||
// const registwindow = () => import("@/modules/01_manual/components/4_ registration/46_window.vue");
|
|
||||||
|
|
||||||
|
|
||||||
const viewRecruit = () => import("@/modules/01_manual/components/5_recruitment/view.vue")
|
|
||||||
const recruitmain = () => import("@/modules/01_manual/components/5_recruitment/51_main.vue");
|
|
||||||
const recruitsetting = () => import("@/modules/01_manual/components/5_recruitment/52_setting.vue");
|
|
||||||
|
|
||||||
const recruitmanagecompet = () => import("@/modules/01_manual/components/5_recruitment/53_managecompet.vue");
|
|
||||||
const recruitstaticompet = () => import("@/modules/01_manual/components/5_recruitment/54_staticompet.vue");
|
|
||||||
|
|
||||||
const recruitqualifiers = () => import("@/modules/01_manual/components/5_recruitment/55_qualifiers.vue");
|
|
||||||
const recruitdisabilities = () => import("@/modules/01_manual/components/5_recruitment/56_disabilities.vue");
|
|
||||||
const recruitselection = () => import("@/modules/01_manual/components/5_recruitment/57_selection.vue");
|
|
||||||
|
|
||||||
|
|
||||||
const employeehistorymain = () => import("@/modules/01_manual/components/6_employeehistory/61_main.vue");
|
|
||||||
|
|
||||||
|
|
||||||
const commandsmain = () => import("@/modules/01_manual/components/7_commands/71_main.vue");
|
|
||||||
const ehrtry = () => import("@/modules/01_manual/components/7_commands/72_try.vue");
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/****** 1 ********/
|
|
||||||
|
|
||||||
export default [
|
export default [
|
||||||
{
|
{
|
||||||
path: "/login",
|
path: "/manual/:name",
|
||||||
name: "login",
|
name: "Manual",
|
||||||
component: viewLogin,
|
component: () => import("@/modules/01_manual/MainPage.vue"),
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [10],
|
|
||||||
Role: "order",
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
// {
|
] satisfies RouteRecordRaw[];
|
||||||
// path: "/manual",
|
|
||||||
// name: "manual",
|
|
||||||
// component: Mainlogin,
|
|
||||||
// meta: {
|
|
||||||
// Auth: true,
|
|
||||||
// Key: [10],
|
|
||||||
// Role: "order",
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
|
|
||||||
{
|
|
||||||
path: "/login/log",
|
|
||||||
name: "mainLog",
|
|
||||||
component: MainLog,
|
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [10],
|
|
||||||
Role: "order",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
path: "/login/password",
|
|
||||||
name: "mainpassword",
|
|
||||||
component: Mainpass,
|
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [10],
|
|
||||||
Role: "order",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
path: "/login/newuser",
|
|
||||||
name: "mainnewuser",
|
|
||||||
component: Mainuser,
|
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [10],
|
|
||||||
Role: "order",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
path: "/login/logout",
|
|
||||||
name: "mainlogout",
|
|
||||||
component: Mainlogout,
|
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [10],
|
|
||||||
Role: "order",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
path: "/login/noti",
|
|
||||||
name: "mainnoti",
|
|
||||||
component: Mainnoti,
|
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [10],
|
|
||||||
Role: "order",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/****** 2 ********/
|
|
||||||
|
|
||||||
|
|
||||||
{
|
|
||||||
path: "/datamain",
|
|
||||||
name: "datamain",
|
|
||||||
component: viewDatamain,
|
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [10],
|
|
||||||
Role: "order",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
path: "/Data/about",
|
|
||||||
name: "Dataabout",
|
|
||||||
component: Dataabout,
|
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [10],
|
|
||||||
Role: "order",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
{
|
|
||||||
path: "/Data/gov",
|
|
||||||
name: "Datagov",
|
|
||||||
component: Datagov,
|
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [10],
|
|
||||||
Role: "order",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
{
|
|
||||||
path: "/Data/officer",
|
|
||||||
name: "Dataofficer",
|
|
||||||
component: Dataofficer,
|
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [10],
|
|
||||||
Role: "order",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
path: "/Data/employee",
|
|
||||||
name: "Dataemployee",
|
|
||||||
component: Dataemployee,
|
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [10],
|
|
||||||
Role: "order",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
path: "/Data/calendar",
|
|
||||||
name: "Datacalendar",
|
|
||||||
component: Datacalendar,
|
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [10],
|
|
||||||
Role: "order",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
path: "/Data/insignia",
|
|
||||||
name: "Datalnsignia",
|
|
||||||
component: Datalnsignia,
|
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [10],
|
|
||||||
Role: "order",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
/****** 3 ********/
|
|
||||||
|
|
||||||
|
|
||||||
{
|
|
||||||
path: "/structuremain",
|
|
||||||
name: "structuremain",
|
|
||||||
component: viewStructure,
|
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [10],
|
|
||||||
Role: "order",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
path: "/Structure/Position",
|
|
||||||
name: "Structureposition",
|
|
||||||
component: Structureposition,
|
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [10],
|
|
||||||
Role: "order",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
path: "/Structure/Structure",
|
|
||||||
name: "Structurestructure",
|
|
||||||
component: Structurestructure,
|
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [10],
|
|
||||||
Role: "order",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
path: "/Structure/Organchart",
|
|
||||||
name: "Structureorganchart",
|
|
||||||
component: Structureorganchart,
|
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [10],
|
|
||||||
Role: "order",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
path: "/Structure/Chartstru",
|
|
||||||
name: "Structurechartstru",
|
|
||||||
component: Structurechartstru,
|
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [10],
|
|
||||||
Role: "order",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
path: "/Structure/Account2",
|
|
||||||
name: "Structureaccount2",
|
|
||||||
component: Structureaccount2,
|
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [10],
|
|
||||||
Role: "order",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
path: "/Structure/Report",
|
|
||||||
name: "Structurereport",
|
|
||||||
component: Structurereport,
|
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [10],
|
|
||||||
Role: "order",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
path: "/Structure/Chartemploy",
|
|
||||||
name: "Structurechartemploy",
|
|
||||||
component: Structurechartemploy,
|
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [10],
|
|
||||||
Role: "order",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/****** 4 ********/
|
|
||||||
|
|
||||||
{
|
|
||||||
path: "/registrationmain",
|
|
||||||
name: "registmain",
|
|
||||||
component: viewRegist,
|
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [10],
|
|
||||||
Role: "order",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
// {
|
|
||||||
// path: "/Registration/find",
|
|
||||||
// name: "registfind",
|
|
||||||
// component: registfind,
|
|
||||||
// meta: {
|
|
||||||
// Auth: true,
|
|
||||||
// Key: [10],
|
|
||||||
// Role: "order",
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
|
|
||||||
|
|
||||||
// {
|
|
||||||
// path: "/Registration/detail",
|
|
||||||
// name: "registdetail",
|
|
||||||
// component: registdetail,
|
|
||||||
// meta: {
|
|
||||||
// Auth: true,
|
|
||||||
// Key: [10],
|
|
||||||
// Role: "order",
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
|
|
||||||
// {
|
|
||||||
// path: "/Registration/edit",
|
|
||||||
// name: "registedit",
|
|
||||||
// component: registedit,
|
|
||||||
// meta: {
|
|
||||||
// Auth: true,
|
|
||||||
// Key: [10],
|
|
||||||
// Role: "order",
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
|
|
||||||
// {
|
|
||||||
// path: "/Registration/select",
|
|
||||||
// name: "registselect",
|
|
||||||
// component: registselect,
|
|
||||||
// meta: {
|
|
||||||
// Auth: true,
|
|
||||||
// Key: [10],
|
|
||||||
// Role: "order",
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
|
|
||||||
// {
|
|
||||||
// path: "/Registration/window",
|
|
||||||
// name: "registwindow",
|
|
||||||
// component: registwindow,
|
|
||||||
// meta: {
|
|
||||||
// Auth: true,
|
|
||||||
// Key: [10],
|
|
||||||
// Role: "order",
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/****** 5 ********/
|
|
||||||
|
|
||||||
{
|
|
||||||
path: "/recruitmain",
|
|
||||||
name: "recruitmain",
|
|
||||||
component: viewRecruit,
|
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [10],
|
|
||||||
Role: "order",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
path: "/Recruit/setting",
|
|
||||||
name: "recruitsetting",
|
|
||||||
component: recruitsetting,
|
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [10],
|
|
||||||
Role: "order",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
path: "/Recruit/managecompet",
|
|
||||||
name: "recruitmanagecompet",
|
|
||||||
component: recruitmanagecompet,
|
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [10],
|
|
||||||
Role: "order",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
{
|
|
||||||
path: "/Recruit/staticompet",
|
|
||||||
name: "recruitstaticompet",
|
|
||||||
component: recruitstaticompet,
|
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [10],
|
|
||||||
Role: "order",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
path: "/Recruit/qualifiers",
|
|
||||||
name: "recruitqualifiers",
|
|
||||||
component: recruitqualifiers,
|
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [10],
|
|
||||||
Role: "order",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
path: "/Recruit/disabilities",
|
|
||||||
name: "recruitdisabilities",
|
|
||||||
component: recruitdisabilities,
|
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [10],
|
|
||||||
Role: "order",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
path: "/Recruit/selection",
|
|
||||||
name: "recruitselection",
|
|
||||||
component: recruitselection,
|
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [10],
|
|
||||||
Role: "order",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
path: "/Commandsmain",
|
|
||||||
name: "commandsmain",
|
|
||||||
component: commandsmain,
|
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [10],
|
|
||||||
Role: "order",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
path: "/Employeehistorymain",
|
|
||||||
name: "employeehistorymain",
|
|
||||||
component: employeehistorymain,
|
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [10],
|
|
||||||
Role: "order",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{
|
|
||||||
path: "/ehrtry",
|
|
||||||
name: "ehrtry",
|
|
||||||
component: ehrtry,
|
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [10],
|
|
||||||
Role: "order",
|
|
||||||
},
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,11 @@
|
||||||
import axios from "axios"
|
import axios from "axios";
|
||||||
import config from "process"
|
|
||||||
// import { dotnetPath } from "../path/axiosPath";
|
|
||||||
// import { getToken } from "@baloise/vue-keycloak";
|
|
||||||
import keycloak from "../plugins/keycloak"
|
|
||||||
|
|
||||||
const axiosInstance = axios.create({
|
const axiosInstance = axios.create({
|
||||||
withCredentials: false,
|
withCredentials: false,
|
||||||
})
|
});
|
||||||
|
|
||||||
// axiosInstance.defaults.baseURL = dotnetPath;
|
axiosInstance.interceptors.request.use((error) => {
|
||||||
axiosInstance.interceptors.request.use(
|
Promise.reject(error);
|
||||||
async (config) => {
|
});
|
||||||
const token = await keycloak.token
|
|
||||||
config.headers = {
|
|
||||||
Authorization: `Bearer ${token}`,
|
|
||||||
}
|
|
||||||
return config
|
|
||||||
},
|
|
||||||
(error) => {
|
|
||||||
Promise.reject(error)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
export default axiosInstance
|
export default axiosInstance;
|
||||||
|
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
// /**
|
|
||||||
// * front connect to keycloak
|
|
||||||
// */
|
|
||||||
// import Keycloak from "keycloak-js";
|
|
||||||
// // import config from "../app.config";
|
|
||||||
// // import http from "../shared/http";
|
|
||||||
// // import router from "../router";
|
|
||||||
|
|
||||||
// const initOptions = {
|
|
||||||
// // url: "https://keycloak.frappet.synology.me/auth/",
|
|
||||||
// realm: "bma-ehr",
|
|
||||||
// clientId: "bma-ehr-vue3",
|
|
||||||
// url: "https://id.frappet.synology.me/",
|
|
||||||
// // realm: "bma-ehr-exam",
|
|
||||||
// // clientId: "bma-ehr-exam-vue3",
|
|
||||||
// }; //option keycloak ที่จะ connect
|
|
||||||
|
|
||||||
// const keycloak = Keycloak(initOptions);
|
|
||||||
|
|
||||||
// keycloak.onAuthSuccess = () => {}; //เพิ่มlogin สำเร็จจะมาทำฟังก์ชันนี้
|
|
||||||
|
|
||||||
// await keycloak.init({ onLoad: "check-sso", checkLoginIframe: false }); //ทำการ connect keycloak
|
|
||||||
// export default keycloak;
|
|
||||||
10
src/stores/manual.ts
Normal file
10
src/stores/manual.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { defineStore } from "pinia";
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
export const useManualStore = defineStore("manual", () => {
|
||||||
|
const toc = ref(true);
|
||||||
|
|
||||||
|
return {
|
||||||
|
toc,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
@ -1,30 +1,18 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts"></script>
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- page:หน้าแรก -->
|
<!-- page:หน้าแรก -->
|
||||||
<template>
|
<template>
|
||||||
<!--<div class="toptitle text-dark">คู่มือการใช้งานระบบ</div>-->
|
<!--<div class="toptitle text-dark">คู่มือการใช้งานระบบ</div>-->
|
||||||
<q-card
|
<q-card flat bordered class="col-12 q-pa-md" style="border-radius: 8px">
|
||||||
flat
|
<q-img
|
||||||
bordered
|
src="@/assets/manual/bg/bg1.jpg"
|
||||||
class="col-12 q-pa-md"
|
style="
|
||||||
style="border-radius: 8px"
|
max-width: 100%;
|
||||||
|
display: block;
|
||||||
>
|
margin: 0 auto;
|
||||||
<q-img
|
margin-top: 5px;
|
||||||
src="@/assets/manual/bg/bg1.jpg"
|
border: 8px;
|
||||||
style="
|
"
|
||||||
max-width: 100%;
|
/>
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
margin-top: 5px;
|
|
||||||
border: 8px;
|
|
||||||
|
|
||||||
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
</q-card>
|
</q-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,710 +1,371 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted, onUnmounted, watch } from "vue"
|
import { onMounted, ref, watch } from "vue";
|
||||||
// import keycloak from "@/plugins/keycloak";
|
import { useDataStore } from "@/stores/data";
|
||||||
import { useRoute, useRouter } from "vue-router"
|
import { useManualStore } from "@/stores/manual";
|
||||||
import { useDataStore } from "@/stores/data"
|
import { storeToRefs } from "pinia";
|
||||||
import { storeToRefs } from "pinia"
|
|
||||||
import { scroll, useQuasar } from "quasar"
|
|
||||||
|
|
||||||
import type { ScrollType } from "../interface/request/main/main"
|
import { menuList } from "../interface/request/main/main";
|
||||||
import { menuList, tabListLogin, tabListDatamain, tabStructuremain, tabRegistration, tabRecruit, tabList } from "../interface/request/main/main"
|
|
||||||
|
|
||||||
const { setVerticalScrollPosition } = scroll
|
const dataStore = useDataStore();
|
||||||
const store = useDataStore()
|
const manualStore = useManualStore();
|
||||||
const route = useRoute()
|
const { toc } = storeToRefs(manualStore);
|
||||||
const router = useRouter()
|
const { loader } = storeToRefs(dataStore);
|
||||||
const link = ref<string>("")
|
|
||||||
|
|
||||||
const $q = useQuasar()
|
const drawerMini = ref(false);
|
||||||
const { tabData, loader } = storeToRefs(store)
|
const drawerMain = ref(false);
|
||||||
const { changeTab } = store
|
const search = ref('');
|
||||||
const miniState = ref<boolean>(false)
|
|
||||||
const drawerR = ref<boolean>(false)
|
|
||||||
const rightActive = ref<boolean>(false)
|
|
||||||
const resize = ref<number>(0)
|
|
||||||
const active = ref<number>(0)
|
|
||||||
const drawerL = ref<boolean>(false)
|
|
||||||
const fullname = ref<string>("")
|
|
||||||
const role = ref<string[]>([])
|
|
||||||
const menuRight = ref<boolean>(false)
|
|
||||||
|
|
||||||
const listTab = ref<any>([])
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* toggleBtnRight ปุ่มย่อ ขยาย drawer ขวา
|
* ปุ่มย่อ ขยาย สารบัญทางขวาของคู่มือ
|
||||||
*/
|
*/
|
||||||
const toggleBtnRight = () => {
|
const toggleManualToc = () => {
|
||||||
drawerR.value = !drawerR.value
|
toc.value = !toc.value;
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* toggleBtnLeft ปุ่มย่อ ขยาย drawer ซ้าย เมื่อหน้าจอ ย่อถึงขนาด 1024 px
|
* toggleBtnLeft ปุ่มย่อ ขยาย drawer ซ้าย เมื่อหน้าจอ ย่อถึงขนาด 1024 px
|
||||||
* ปกติเป็นการย่อโดยใช้ Ministate
|
* ปกติเป็นการย่อโดยใช้ Ministate
|
||||||
*/
|
*/
|
||||||
const toggleBtnLeft = () => {
|
const toggleBtnLeft = () => {
|
||||||
if (window.innerWidth < 1024) {
|
if (window.innerWidth < 1024) {
|
||||||
drawerL.value = !drawerL.value
|
drawerMain.value = !drawerMain.value;
|
||||||
} else {
|
} else {
|
||||||
miniState.value = !miniState.value
|
drawerMini.value = !drawerMini.value;
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
|
||||||
* updateScroll เป็น function active แทปด้านขวา
|
|
||||||
*/
|
|
||||||
const updateScroll = (position: number) => {
|
|
||||||
// console.log(position);
|
|
||||||
|
|
||||||
// เมื่อ position เป็น undifind ให้ position เป็น ตำแหน่ง top ที่ scroll
|
|
||||||
if (position === void 0) {
|
|
||||||
position = document.documentElement.scrollTop || document.body.scrollTop
|
|
||||||
}
|
|
||||||
|
|
||||||
let last
|
|
||||||
/**
|
|
||||||
* วนหา id ของ div นั้น
|
|
||||||
*/
|
|
||||||
for (const i in listTab.value) {
|
|
||||||
const section = listTab.value[i]
|
|
||||||
const item = document.getElementById(section.tag)
|
|
||||||
// console.log(section.childern);
|
|
||||||
if (section.childern) {
|
|
||||||
for (const x in section.childern) {
|
|
||||||
const sectionchildern = section.childern[x]
|
|
||||||
const itemchildern = document.getElementById(sectionchildern.tag)
|
|
||||||
console.log(sectionchildern)
|
|
||||||
|
|
||||||
if (itemchildern === null) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
if (itemchildern.offsetTop >= position + 155) {
|
|
||||||
console.log(last)
|
|
||||||
if (last === void 0) {
|
|
||||||
last = sectionchildern.tag
|
|
||||||
}
|
|
||||||
break
|
|
||||||
} else {
|
|
||||||
last = sectionchildern.tag
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* วนหา id ของ div หน้านั้น
|
|
||||||
* เมื่อหาไม่เจอให้ไปต่อตัวต่อไป
|
|
||||||
* เมื่อเจอแล้ว ให้ ตำแหน่งบนสุดของ div นั้น มากกว่าหรือเท่ากับ ตำแหน่ง top ที่ scroll บวกกับ แทปด้านบน 155
|
|
||||||
* ถ้า last เป็น undifind ให้ last เท่ากับ tag แล้ว หยุดลูป
|
|
||||||
* ถ้าไม่ใช้ undifind ให้ last เท่ากับ tag แล้ว ลูปหาต่อ กรณี div นั้นยาว
|
|
||||||
*/
|
|
||||||
if (item === null) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
if (item.offsetTop >= position + 155) {
|
|
||||||
if (last === void 0) {
|
|
||||||
last = section.tag
|
|
||||||
}
|
|
||||||
break
|
|
||||||
} else {
|
|
||||||
last = section.tag
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* ถ้า last ไม่เท่ากับ undifind
|
|
||||||
* ใช้ เซ็ท active ให้เป็นแทปสีฟ้า
|
|
||||||
* และใช้ scrollIntoView ย้ายตำแหน่ง activeโดยการเลื่อนไปหา
|
|
||||||
*/
|
|
||||||
|
|
||||||
if (last !== void 0) {
|
|
||||||
changeTab(last)
|
|
||||||
const tocEl = document.getElementById("tab--" + last)
|
|
||||||
if (tocEl) {
|
|
||||||
tocEl.scrollIntoView({ block: "nearest" })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ให้แสดง แทปด้านขวา เมื่อเข้าหน้า รายละเอียดทะเบียนประวัติ และ rightActive เท่ากับ true
|
|
||||||
*/
|
|
||||||
const activeBtn = () => {
|
|
||||||
return route.name == "login" && rightActive.value
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* เมื่อเริ่มต้นโปรแกรมให้ฟัง event resize และ function myEventHandler
|
|
||||||
* set function myEventHandler เพราะ state ยังไม่เซ็ท , state เซ็ทเมื่อ หน้าจอเริ่ม ขยับหน้าจอ
|
|
||||||
* เริ่มเข้ามา state rightActive เป็น state ที่โชว์ ปุ่มขวา
|
|
||||||
* ยังจับ boolean ผิด จึงต้อง set
|
|
||||||
*/
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
myEventHandler(null, false)
|
const data = await fetch("/toc.json").then((r) => r.json());
|
||||||
window.addEventListener("resize", (e: any) => {
|
menuList.value[1].children = data;
|
||||||
myEventHandler(e, true)
|
});
|
||||||
})
|
|
||||||
await setListTab()
|
|
||||||
})
|
|
||||||
|
|
||||||
const setListTab = () => {
|
|
||||||
menuRight.value = true
|
|
||||||
if (route.name == "login") {
|
|
||||||
listTab.value = tabListLogin
|
|
||||||
} else if (route.name == "datamain") {
|
|
||||||
listTab.value = tabListDatamain
|
|
||||||
} else if (route.name == "structuremain") {
|
|
||||||
listTab.value = tabStructuremain
|
|
||||||
} else if (route.name == "registmain") {
|
|
||||||
listTab.value = tabRegistration
|
|
||||||
} else if (route.name == "recruitmain") {
|
|
||||||
listTab.value = tabRecruit
|
|
||||||
} else if (route.name == "commandsmain") {
|
|
||||||
listTab.value = tabRecruit
|
|
||||||
}
|
|
||||||
changeTab(listTab.value[0].tag)
|
|
||||||
|
|
||||||
if (route.name == "dashboard") {
|
|
||||||
listTab.value = []
|
|
||||||
menuRight.value = false
|
|
||||||
}
|
|
||||||
window.scrollTo(0, 0)
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(route, () => {
|
|
||||||
setListTab()
|
|
||||||
})
|
|
||||||
|
|
||||||
/**
|
|
||||||
* เมื่อออกจากโปรแกรม ให้ ยกเลิกการฟัง event resize
|
|
||||||
*/
|
|
||||||
onUnmounted(() => {
|
|
||||||
window.removeEventListener("resize", (e: any) => {
|
|
||||||
myEventHandler(e, true)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param e event ของ resize
|
|
||||||
* @param setSCroll เช็คว่ามาจาก event หรือป่าว
|
|
||||||
* set state resize = ความกว้างหน้าเว็ป
|
|
||||||
* เมื่อความกว้าง น้อยกว่า 1024( เท่ากับ น้อยกว่า 1023) ให้ rightActive เป็น true แต่ถ้า rightActive true อยู่แล้วไม่ต้อง set
|
|
||||||
* เมื่อความกว้าง มากกว่าหรือเท่ากับ 1024 และเมื่อ rightActive เป็น true
|
|
||||||
* และ drawerR เป็น true ให้ rightActive เป็น true ถ้า drawerR เป็น false ให้ rightActive เป็น false
|
|
||||||
* rightActive = true ; แสดงปุ่ม drawer ด้าน ขวา
|
|
||||||
* rightActive = false; ไม่แสดงปุ่ม drawer ด้าน ขวา
|
|
||||||
*/
|
|
||||||
const myEventHandler = (e: any, setSCroll: boolean) => {
|
|
||||||
if (setSCroll) {
|
|
||||||
resize.value = e.target.innerWidth
|
|
||||||
} else {
|
|
||||||
resize.value = window.innerWidth
|
|
||||||
}
|
|
||||||
if (resize.value < 1024) {
|
|
||||||
if (!rightActive.value) {
|
|
||||||
rightActive.value = true
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (rightActive.value) {
|
|
||||||
if (drawerR.value) {
|
|
||||||
rightActive.value = true
|
|
||||||
} else {
|
|
||||||
rightActive.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ตรวจสอบ path นั้นๆ ว่ายังอยู่ที่ path นั้น แม้จะเป็น path ที่มี child แท็ปก็ยังจะ active อยู่เช่น
|
|
||||||
* ปกติ path จะ active เมื่อ path นั้นมีค่า ตรงตัวมันเช่น /main
|
|
||||||
* แต่จะไม่ active เมื่อ path นั้น มี child path /main/อื่นๆ
|
|
||||||
* @param path string
|
|
||||||
*/
|
|
||||||
const activeMenu = (path: string) => {
|
|
||||||
if (path == "dashboard" && route.fullPath == "/") return true
|
|
||||||
// if (path != "registry" && path == "registryEmployee" && route.fullPath == "/registryEmployee") return true;
|
|
||||||
const bool = route.fullPath.includes(`/${path}`)
|
|
||||||
|
|
||||||
return bool
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* เป็นฟังก์ชันที่รันตลอด เพื่อให้ active ตรงตามเงื่อนไขให้เป็น true
|
|
||||||
* @param tag string เป็นชื่อของ ตัวนั้นๆ
|
|
||||||
*/
|
|
||||||
const activeTab = (tag: string) => {
|
|
||||||
return tabData.value === tag
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* คลิกเพื่อให้ router หรือ scroll ไปยังตำแหน่งนั้นๆ
|
|
||||||
* @param tag string เป็นชื่อของ ตัวนั้นๆ
|
|
||||||
*/
|
|
||||||
const tagClick = (tag: string) => {
|
|
||||||
const hash = `#${tag}`
|
|
||||||
const items = document.getElementById(tag)
|
|
||||||
const offset = Math.max(0, items == null ? 0 : items.offsetTop - 84)
|
|
||||||
// router.replace({ hash });
|
|
||||||
if (route.hash !== hash) {
|
|
||||||
const check = activeBtn()
|
|
||||||
if (check) {
|
|
||||||
// router.replace({ hash, position: { x: 0, y: 0 } });
|
|
||||||
// router.replace({ hash }).then(() => {
|
|
||||||
// setVerticalScrollPosition(window, offset, 300);
|
|
||||||
// });
|
|
||||||
drawerR.value = !drawerR.value
|
|
||||||
setVerticalScrollPosition(window, offset, 300)
|
|
||||||
} else {
|
|
||||||
setVerticalScrollPosition(window, offset, 300)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
setVerticalScrollPosition(window, offset, 300)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const activeBtnPlacement = () => {
|
|
||||||
return route.name == "PlacementPersonalDetail" && rightActive.value
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* logout keycloak
|
|
||||||
* confirm ก่อนออกจากระบบ
|
|
||||||
*/
|
|
||||||
const doLogout = () => {
|
|
||||||
$q.dialog({
|
|
||||||
title: "ยืนยันการออกจากระบบ",
|
|
||||||
message: `ต้องการออกจากระบบใช้หรือไม่?`,
|
|
||||||
cancel: "ยกเลิก",
|
|
||||||
ok: "ยืนยัน",
|
|
||||||
persistent: true,
|
|
||||||
}).onOk(() => {
|
|
||||||
// keycloak.logout();
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ดิงชื่อผู้ใช้งานจาก keycloak
|
|
||||||
*/
|
|
||||||
// if (keycloak.tokenParsed != null) {
|
|
||||||
// fullname.value = keycloak.tokenParsed.name;
|
|
||||||
// role.value = keycloak.tokenParsed.role;
|
|
||||||
// }
|
|
||||||
|
|
||||||
const onScroll = (scroll: ScrollType) => {
|
|
||||||
const { position } = scroll
|
|
||||||
updateScroll(position)
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- โครงเว็บ -->
|
<!-- โครงเว็บ -->
|
||||||
<template>
|
<template>
|
||||||
<!-- แบบเก่า design แรก -->
|
<!-- แบบเก่า design แรก -->
|
||||||
<!-- <q-layout view="lHh Lpr lff"> -->
|
<!-- <q-layout view="lHh Lpr lff"> -->
|
||||||
<!-- ปรับให้กับหน้า รายละเอียดทะเบียนประวัติ -->
|
<!-- ปรับให้กับหน้า รายละเอียดทะเบียนประวัติ -->
|
||||||
<q-layout view="lHh LpR lff" @scroll="onScroll">
|
<q-layout view="lHh LpR lff">
|
||||||
<!-- header -->
|
<!-- header -->
|
||||||
<q-header flat class="bg-grey-2 text-dark" height-hint="7">
|
<q-header flat class="bg-grey-2 text-dark" height-hint="7">
|
||||||
<q-toolbar style="padding: 0 2%">
|
<q-toolbar style="padding: 0 2%">
|
||||||
<q-btn size="13px" class="bg-grey-3" flat dense round @click="toggleBtnLeft" aria-label="Menu">
|
<q-btn
|
||||||
<q-icon :name="miniState == false ? 'mdi-backburger' : 'mdi-menu-open'" size="20px" color="grey-7" />
|
size="13px"
|
||||||
</q-btn>
|
class="bg-grey-3"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
round
|
||||||
|
@click="toggleBtnLeft"
|
||||||
|
aria-label="Menu"
|
||||||
|
>
|
||||||
|
<q-icon
|
||||||
|
:name="drawerMini == false ? 'mdi-backburger' : 'mdi-menu-open'"
|
||||||
|
size="20px"
|
||||||
|
color="grey-7"
|
||||||
|
/>
|
||||||
|
</q-btn>
|
||||||
|
|
||||||
<q-space />
|
<q-space />
|
||||||
|
|
||||||
<q-btn size="13px" class="bg-blue-1" v-if="activeBtn() || activeBtnPlacement()" flat dense round @click="toggleBtnRight" aria-label="Menu">
|
<q-btn
|
||||||
<q-icon name="mdi-menu" class="rotate-180" size="20px" color="blue" />
|
size="13px"
|
||||||
</q-btn>
|
class="bg-blue-1"
|
||||||
</q-toolbar>
|
v-if="$route.path.startsWith('/manual') && $q.screen.width < 1024"
|
||||||
</q-header>
|
flat
|
||||||
<!-- end header -->
|
dense
|
||||||
|
round
|
||||||
|
@click="toggleManualToc"
|
||||||
|
aria-label="Menu"
|
||||||
|
>
|
||||||
|
<q-icon name="mdi-menu" class="rotate-180" size="20px" color="blue" />
|
||||||
|
</q-btn>
|
||||||
|
</q-toolbar>
|
||||||
|
</q-header>
|
||||||
|
<!-- end header -->
|
||||||
|
|
||||||
<!-- drawer -->
|
<!-- drawer -->
|
||||||
<q-drawer side="left" class="text-white" style="background: #273238" v-model="drawerL" show-if-above :width="260" :breakpoint="1023" :mini="miniState">
|
<q-drawer
|
||||||
<!-- ส่วนของเมนู mini -->
|
side="left"
|
||||||
<template v-slot:mini>
|
class="text-white"
|
||||||
<q-scroll-area class="fit mini-slot cursor-pointer">
|
style="background: #273238"
|
||||||
<q-toolbar class="q-py-md">
|
v-model="drawerMain"
|
||||||
<q-img src="@/assets/logo.png" spinner-color="white" style="height: 32px; max-width: 32px" />
|
show-if-above
|
||||||
</q-toolbar>
|
:width="260"
|
||||||
<q-separator color="grey-9" />
|
:breakpoint="1023"
|
||||||
<!-- เมนูย่อย ตอนย่อ -->
|
:mini="drawerMini"
|
||||||
<q-list padding>
|
>
|
||||||
<div v-for="(menuItem, index) in menuList" :key="index">
|
<!-- ส่วนของเมนู mini -->
|
||||||
<!-- <div v-if="role.includes(menuItem.role)"> -->
|
<template v-slot:mini>
|
||||||
<q-item
|
<q-scroll-area class="fit mini-slot cursor-pointer">
|
||||||
clickable
|
<q-toolbar class="q-py-md">
|
||||||
v-ripple
|
<q-img
|
||||||
:active="link === menuItem.label"
|
src="@/assets/logo.png"
|
||||||
@click="link = menuItem.label"
|
spinner-color="white"
|
||||||
active-class="text-primary menuActiveMini text-weight-medium"
|
style="height: 32px; max-width: 32px"
|
||||||
v-if="menuItem.key == 3 || menuItem.key == 5"
|
/>
|
||||||
>
|
</q-toolbar>
|
||||||
<div class="row items-center no-wrap">
|
<q-separator color="grey-9" />
|
||||||
<q-icon :name="menuItem.icon" size="20px" class="q-ml-md" />
|
<!-- เมนูย่อย ตอนย่อ -->
|
||||||
<q-icon name="mdi-dots-vertical" size="13px" color="grey-6" />
|
<q-list padding>
|
||||||
</div>
|
<div v-for="(menuItem, index) in menuList" :key="index">
|
||||||
<q-tooltip anchor="center right" self="center left" :offset="[10, 10]">
|
<q-item
|
||||||
{{ menuItem.label }}
|
clickable
|
||||||
</q-tooltip>
|
v-ripple
|
||||||
<q-menu anchor="top right" self="top left" :offset="[5, 0]" style="background: #273238; z-index: 9000">
|
:to="menuItem.path"
|
||||||
<q-list class="text-white q-py-sm">
|
:active="
|
||||||
<div v-for="(subMenu, i) in menuItem.children" :key="i" :to="{ name: `${subMenu.path}` }">
|
$route.path === menuItem.path ||
|
||||||
<!-- เมนูย่อย 2 ชั้น -->
|
($route.path !== '/' && menuItem.path?.includes($route.path))
|
||||||
<div v-if="menuItem.key == 5">
|
"
|
||||||
<q-item dense clickable v-if="subMenu.key !== 5.1">
|
active-class="text-primary menuActiveMini"
|
||||||
<q-item-section>{{ subMenu.label }} </q-item-section>
|
>
|
||||||
<q-item-section side>
|
<q-item-section avatar>
|
||||||
<q-icon name="keyboard_arrow_right" />
|
<q-avatar size="md" font-size="20px">
|
||||||
</q-item-section>
|
<q-icon :name="menuItem.icon" />
|
||||||
|
</q-avatar>
|
||||||
|
</q-item-section>
|
||||||
|
<q-tooltip
|
||||||
|
anchor="center right"
|
||||||
|
self="center left"
|
||||||
|
:offset="[10, 10]"
|
||||||
|
>
|
||||||
|
{{ menuItem.label }}
|
||||||
|
</q-tooltip>
|
||||||
|
</q-item>
|
||||||
|
</div>
|
||||||
|
</q-list>
|
||||||
|
</q-scroll-area>
|
||||||
|
</template>
|
||||||
|
<!-- จบส่วนของเมนู mini -->
|
||||||
|
|
||||||
<q-menu anchor="top end" self="top start" :offset="[5, 0]" style="background: #273238; z-index: 9000">
|
<!-- ส่วนของเมนู -->
|
||||||
<q-list class="text-white q-py-sm">
|
<q-scroll-area class="fit">
|
||||||
<q-item
|
<q-toolbar class="q-py-md">
|
||||||
v-for="subMenu2 in subMenu.children"
|
<q-toolbar-title shrink class="row items-center no-wrap">
|
||||||
:key="subMenu2.label"
|
<q-img
|
||||||
:to="{ name: `${subMenu2.path}` }"
|
src="@/assets/logo.png"
|
||||||
dense
|
spinner-color="white"
|
||||||
class="q-pl-md text-body2"
|
style="height: 40px; max-width: 40px"
|
||||||
active-class="text-primary active-item text-weight-medium"
|
/>
|
||||||
clickable
|
<div class="row q-ml-md">
|
||||||
>
|
<div
|
||||||
<q-item-section>
|
style="color: #ffffff; letter-spacing: 1px"
|
||||||
<q-item-label>{{ subMenu2.label }}</q-item-label>
|
class="text-body2 text-weight-bolder"
|
||||||
</q-item-section>
|
>
|
||||||
</q-item>
|
ระบบ<span class="text-primary">ทรัพยากรบุคคล</span>
|
||||||
</q-list>
|
</div>
|
||||||
</q-menu>
|
<div class="text-caption text-white"> กรุงเทพมหานคร</div>
|
||||||
</q-item>
|
</div>
|
||||||
|
</q-toolbar-title>
|
||||||
|
</q-toolbar>
|
||||||
|
<q-separator inset color="grey-9" />
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 q-pa-md">
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
bg-color="white"
|
||||||
|
label="ค้นหา"
|
||||||
|
v-model="search"
|
||||||
|
dense
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="search" />
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<q-list padding>
|
||||||
|
<div v-for="(menuItem, index) in menuList" :key="index">
|
||||||
|
<!-- เมนูย่อย -->
|
||||||
|
<q-expansion-item
|
||||||
|
v-if="menuItem.children && menuItem.children.length > 0"
|
||||||
|
class="menuSub"
|
||||||
|
expand-icon="mdi-chevron-down"
|
||||||
|
expanded-icon="mdi-chevron-up"
|
||||||
|
>
|
||||||
|
<template v-slot:header>
|
||||||
|
<q-item-section avatar>
|
||||||
|
<q-avatar :icon="menuItem.icon" size="md" font-size="20px" />
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section>{{ menuItem.label }}</q-item-section>
|
||||||
|
</template>
|
||||||
|
|
||||||
<q-item
|
<!-- เมนูย่อย 1 ชั้น -->
|
||||||
v-else
|
<q-item
|
||||||
dense
|
dense
|
||||||
class="q-pl-md q-pr-xl text-body2"
|
class="menuSubHover"
|
||||||
active-class="text-primary active-item text-weight-medium"
|
active-class="text-primary active-item text-weight-bold menuSubAct"
|
||||||
clickable
|
clickable
|
||||||
:to="{ name: `${subMenu.path}` }"
|
v-for="child in menuItem.children"
|
||||||
>
|
:key="child.path"
|
||||||
<q-item-section>
|
:to="child.path"
|
||||||
<q-item-label>{{ subMenu.label }}</q-item-label>
|
>
|
||||||
</q-item-section>
|
<q-item-section>
|
||||||
</q-item>
|
<q-item-label class="font-400">
|
||||||
</div>
|
{{ child.label }}
|
||||||
<!-- เมนูย่อย 1 ชั้น -->
|
</q-item-label>
|
||||||
<div v-else>
|
</q-item-section>
|
||||||
<q-item dense class="q-pl-md q-pr-xl text-body2" active-class="text-primary active-item text-weight-medium" clickable :to="{ name: `${subMenu.path}` }">
|
</q-item>
|
||||||
<q-item-section>
|
</q-expansion-item>
|
||||||
<q-item-label>{{ subMenu.label }}</q-item-label>
|
<q-item
|
||||||
</q-item-section>
|
v-else
|
||||||
</q-item>
|
class="text-weight-medium menu"
|
||||||
</div>
|
:active="$route.path === menuItem.path"
|
||||||
</div>
|
active-class="text-primary active-item text-weight-bold menuActive"
|
||||||
</q-list>
|
:to="menuItem.path"
|
||||||
</q-menu>
|
clickable
|
||||||
</q-item>
|
v-ripple
|
||||||
<q-item
|
dense
|
||||||
clickable
|
exact
|
||||||
v-ripple
|
>
|
||||||
:to="{ name: `${menuItem.path}` }"
|
<q-item-section avatar>
|
||||||
:active="link === menuItem.label"
|
<q-avatar size="md" font-size="20px">
|
||||||
@click="link = menuItem.label"
|
<q-icon
|
||||||
active-class="text-primary menuActiveMini"
|
:name="
|
||||||
v-else
|
$route.path === menuItem.path
|
||||||
>
|
? menuItem.activeIcon
|
||||||
<q-item-section avatar>
|
: menuItem.icon
|
||||||
<q-avatar size="md" font-size="20px">
|
"
|
||||||
<q-icon :name="menuItem.icon" />
|
/>
|
||||||
</q-avatar>
|
</q-avatar>
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
<q-tooltip anchor="center right" self="center left" :offset="[10, 10]">
|
|
||||||
{{ menuItem.label }}
|
|
||||||
</q-tooltip>
|
|
||||||
</q-item>
|
|
||||||
<!-- </div> -->
|
|
||||||
</div>
|
|
||||||
</q-list>
|
|
||||||
</q-scroll-area>
|
|
||||||
</template>
|
|
||||||
<!-- จบส่วนของเมนู mini -->
|
|
||||||
|
|
||||||
<!-- ส่วนของเมนู -->
|
<q-item-section>
|
||||||
<q-scroll-area class="fit">
|
<q-item-label>{{ menuItem.label }}</q-item-label>
|
||||||
<q-toolbar class="q-py-md">
|
</q-item-section>
|
||||||
<q-toolbar-title shrink class="row items-center no-wrap">
|
</q-item>
|
||||||
<q-img src="@/assets/logo.png" spinner-color="white" style="height: 40px; max-width: 40px" />
|
</div>
|
||||||
<div class="row q-ml-md">
|
</q-list>
|
||||||
<div style="color: #ffffff; letter-spacing: 1px" class="text-body2 text-weight-bolder">ระบบ<span class="text-primary">ทรัพยากรบุคคล</span></div>
|
</q-scroll-area>
|
||||||
<div class="text-caption text-white"> กรุงเทพมหานคร</div>
|
</q-drawer>
|
||||||
</div>
|
|
||||||
</q-toolbar-title>
|
|
||||||
</q-toolbar>
|
|
||||||
<q-separator inset color="grey-9" />
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-12 q-pa-md">
|
|
||||||
<q-input outlined bg-color="white" label="ค้นหา" v-model="text" dense>
|
|
||||||
<template v-slot:prepend>
|
|
||||||
<q-icon name="search" />
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<q-list padding>
|
|
||||||
<div v-for="(menuItem, index) in menuList" :key="index">
|
|
||||||
<!-- เมนูย่อย -->
|
|
||||||
<!-- <div v-if="role.includes(menuItem.role)"> -->
|
|
||||||
<q-expansion-item group="somegroup" class="menuSub" expand-icon="mdi-chevron-down" expanded-icon="mdi-chevron-up" v-if="menuItem.key == 2">
|
|
||||||
<template v-slot:header>
|
|
||||||
<q-item-section avatar>
|
|
||||||
<q-avatar :icon="menuItem.icon" size="md" font-size="20px" />
|
|
||||||
</q-item-section>
|
|
||||||
<q-item-section>{{ menuItem.label }}</q-item-section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- เมนูย่อย 2 ชั้น (สรรหา) -->
|
<!-- drawer page login -->
|
||||||
<div v-if="menuItem.key == 5">
|
|
||||||
<div v-for="(subMenu, i) in menuItem.children" :key="i">
|
|
||||||
<q-expansion-item switch-toggle-side dense-toggle :label="subMenu.label" v-if="subMenu.key !== 5.1" class="expan2" dense>
|
|
||||||
<q-item
|
|
||||||
dense
|
|
||||||
class="menuSubHover"
|
|
||||||
active-class="text-primary active-item text-weight-bold menuSubAct"
|
|
||||||
clickable
|
|
||||||
v-for="subMenu2 in subMenu.children"
|
|
||||||
:key="subMenu2.key"
|
|
||||||
:to="{ name: `${subMenu2.path}` }"
|
|
||||||
>
|
|
||||||
<q-item-section>
|
|
||||||
<q-item-label class="font-400 subLabel">{{ subMenu2.label }} </q-item-label>
|
|
||||||
</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
</q-expansion-item>
|
|
||||||
<q-item v-else dense class="menuSubHover" active-class="text-primary active-item text-weight-bold menuSubAct" clickable :to="{ name: `${subMenu.path}` }">
|
|
||||||
<q-item-section>
|
|
||||||
<q-item-label>{{ subMenu.label }}</q-item-label>
|
|
||||||
</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- เมนูย่อย 1 ชั้น -->
|
|
||||||
<q-item
|
|
||||||
v-else
|
|
||||||
dense
|
|
||||||
class="menuSubHover"
|
|
||||||
active-class="text-primary active-item text-weight-bold menuSubAct"
|
|
||||||
clickable
|
|
||||||
v-for="(subMenu, j) in menuItem.children"
|
|
||||||
:key="j"
|
|
||||||
:to="subMenu.path"
|
|
||||||
>
|
|
||||||
<q-item-section>
|
|
||||||
<q-item-label class="font-400">{{ subMenu.label }}</q-item-label>
|
|
||||||
</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
</q-expansion-item>
|
|
||||||
|
|
||||||
<!-- เมนูปกติ -->
|
<q-page-container class="bg-grey-2">
|
||||||
|
<q-page style="padding: 0 2%">
|
||||||
<q-item
|
<router-view :key="$route.fullPath" />
|
||||||
class="text-weight-medium menu"
|
</q-page>
|
||||||
:active="activeMenu(menuItem.path)"
|
</q-page-container>
|
||||||
active-class="text-primary active-item text-weight-bold menuActive"
|
<full-loader :visibility="loader" />
|
||||||
:to="{ name: `${menuItem.path}` }"
|
</q-layout>
|
||||||
clickable
|
|
||||||
v-ripple
|
|
||||||
dense
|
|
||||||
exact
|
|
||||||
v-else
|
|
||||||
>
|
|
||||||
<q-item-section avatar>
|
|
||||||
<q-avatar size="md" font-size="20px">
|
|
||||||
<q-icon :name="menuItem.key === active ? menuItem.activeIcon : menuItem.icon" />
|
|
||||||
</q-avatar>
|
|
||||||
</q-item-section>
|
|
||||||
|
|
||||||
<q-item-section>
|
|
||||||
<q-item-label>{{ menuItem.label }}</q-item-label>
|
|
||||||
</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
<!-- </div> -->
|
|
||||||
</div>
|
|
||||||
</q-list>
|
|
||||||
</q-scroll-area>
|
|
||||||
</q-drawer>
|
|
||||||
|
|
||||||
<!-- drawer page login -->
|
|
||||||
<q-drawer v-if="menuRight" side="right" class="bg-grey-2" show-if-above v-model="drawerR" :width="250" :breakpoint="1023">
|
|
||||||
<q-scroll-area class="fit">
|
|
||||||
<q-list padding>
|
|
||||||
<div v-for="(tabItem, index) in listTab" :key="index">
|
|
||||||
<q-item
|
|
||||||
:id="'tab--' + tabItem.tag"
|
|
||||||
class="tabNative"
|
|
||||||
active-class="text-blue-7 active-item text-weight-medium tabActive"
|
|
||||||
:active="activeTab(tabItem.tag)"
|
|
||||||
clickable
|
|
||||||
v-ripple
|
|
||||||
dense
|
|
||||||
exact
|
|
||||||
@click="tagClick(tabItem.tag)"
|
|
||||||
>
|
|
||||||
<q-item-section>
|
|
||||||
<q-item-label
|
|
||||||
><q-icon size="11px" name="mdi-circle-medium" />
|
|
||||||
<span class="q-pl-xs">{{ tabItem.label }}</span>
|
|
||||||
</q-item-label>
|
|
||||||
</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
<div v-if="route.name == 'recruitmain'">
|
|
||||||
<q-item
|
|
||||||
v-if="route.name == 'recruitmain'"
|
|
||||||
v-for="(childItem, childIndex) in tabItem.childern"
|
|
||||||
:key="'child-' + childIndex"
|
|
||||||
:id="'tab--' + childItem.tag"
|
|
||||||
class="tabNative child-tab"
|
|
||||||
active-class="text-blue-7 active-item text-weight-medium tabActive"
|
|
||||||
:active="activeTab(childItem.tag)"
|
|
||||||
clickable
|
|
||||||
v-ripple
|
|
||||||
dense
|
|
||||||
exact
|
|
||||||
@click="tagClick(childItem.tag)"
|
|
||||||
>
|
|
||||||
<q-item-section>
|
|
||||||
<q-item-label>
|
|
||||||
<!-- <q-icon size="11px" name="mdi-circle-small" /> -->
|
|
||||||
<span class="q-pl-xl">{{ childItem.label }}</span>
|
|
||||||
</q-item-label>
|
|
||||||
</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-list>
|
|
||||||
</q-scroll-area>
|
|
||||||
</q-drawer>
|
|
||||||
|
|
||||||
<q-page-container class="bg-grey-2">
|
|
||||||
<q-page style="padding: 0 2%">
|
|
||||||
<router-view :key="$route.fullPath" />
|
|
||||||
</q-page>
|
|
||||||
</q-page-container>
|
|
||||||
<full-loader :visibility="loader" />
|
|
||||||
</q-layout>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.menuSub .q-item__section--avatar,
|
.menuSub .q-item__section--avatar,
|
||||||
.menu .q-item__section--avatar {
|
.menu .q-item__section--avatar {
|
||||||
min-width: 0px;
|
min-width: 0px;
|
||||||
}
|
}
|
||||||
.menu {
|
.menu {
|
||||||
padding-bottom: 5px;
|
padding-bottom: 5px;
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
border-radius: 0 100px 100px 0;
|
border-radius: 0 100px 100px 0;
|
||||||
margin-right: 2%;
|
margin-right: 2%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menuActive {
|
.menuActive {
|
||||||
background: #212a2f;
|
background: #212a2f;
|
||||||
border-radius: 0 100px 100px 0;
|
border-radius: 0 100px 100px 0;
|
||||||
margin-right: 2%;
|
margin-right: 2%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menuActiveMini {
|
.menuActiveMini {
|
||||||
background: #212a2f;
|
background: #212a2f;
|
||||||
}
|
}
|
||||||
.menuSub .q-item {
|
.menuSub .q-item {
|
||||||
border-radius: 0 100px 100px 0;
|
border-radius: 0 100px 100px 0;
|
||||||
margin-right: 2%;
|
margin-right: 2%;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
.expan2 .q-item {
|
.expan2 .q-item {
|
||||||
padding-left: 10%;
|
padding-left: 10%;
|
||||||
}
|
}
|
||||||
.subLabel {
|
.subLabel {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
width: 160px;
|
width: 160px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
.font-400 {
|
.font-400 {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
.expan2 .menuSubHover {
|
.expan2 .menuSubHover {
|
||||||
padding-left: 30%;
|
padding-left: 30%;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
}
|
}
|
||||||
.menuSubHover {
|
.menuSubHover {
|
||||||
padding-left: 25%;
|
padding-left: 25%;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
}
|
}
|
||||||
.menuSub .q-expansion-item__content {
|
.menuSub .q-expansion-item__content {
|
||||||
background: #212a2f;
|
background: #212a2f;
|
||||||
padding: 5px 0px;
|
padding: 5px 0px;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
.tabNative {
|
.tabNative {
|
||||||
color: grey;
|
color: grey;
|
||||||
padding-left: 8%;
|
padding-left: 8%;
|
||||||
border-radius: 100px 0px 0px 100px;
|
border-radius: 100px 0px 0px 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabActive {
|
.tabActive {
|
||||||
padding-left: 8%;
|
padding-left: 8%;
|
||||||
background: #e4f2ff;
|
background: #e4f2ff;
|
||||||
border-radius: 100px 0px 0px 100px;
|
border-radius: 100px 0px 0px 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.q-card {
|
.q-card {
|
||||||
box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) !important;
|
box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) !important;
|
||||||
}
|
}
|
||||||
.q-card--bordered {
|
.q-card--bordered {
|
||||||
border: 1px solid #ededed;
|
border: 1px solid #ededed;
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
}
|
}
|
||||||
.q-menu {
|
.q-menu {
|
||||||
box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
|
box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toptitle {
|
.toptitle {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-bottom: 1%;
|
margin-bottom: 1%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.q-field--outlined .q-field__control {
|
.q-field--outlined .q-field__control {
|
||||||
border-radius: 50px;
|
border-radius: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.q-field--outlined .q-field__control:before {
|
.q-field--outlined .q-field__control:before {
|
||||||
border-color: #c8d3db;
|
border-color: #c8d3db;
|
||||||
}
|
}
|
||||||
.btnManu {
|
.btnManu {
|
||||||
min-height: 48px;
|
min-height: 48px;
|
||||||
border-radius: 0px 100px 100px 0px;
|
border-radius: 0px 100px 100px 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.q-field--outlined .q-icon {
|
.q-field--outlined .q-icon {
|
||||||
color: #7474747f;
|
color: #7474747f;
|
||||||
}
|
}
|
||||||
.q-card__actions .q-btn--rectangle {
|
.q-card__actions .q-btn--rectangle {
|
||||||
padding: 0 14px !important;
|
padding: 0 14px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* custom scrollbar */
|
/* custom scrollbar */
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: 12px;
|
width: 12px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
::-webkit-scrollbar-track {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
background-color: #d6dee1;
|
background-color: #d6dee1;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
border: 3px solid transparent;
|
border: 3px solid transparent;
|
||||||
background-clip: content-box;
|
background-clip: content-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
::-webkit-scrollbar-thumb:hover {
|
||||||
background-color: #a8bbbf;
|
background-color: #a8bbbf;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,249 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div>TEST VIEW</div>
|
|
||||||
<q-btn color="primary" label="TEST" @click="testCancel" />
|
|
||||||
<data-table
|
|
||||||
:rows="rows"
|
|
||||||
:columns="columns"
|
|
||||||
:filter="filter"
|
|
||||||
:visible-columns="visibleColumns"
|
|
||||||
v-model:inputfilter="filter"
|
|
||||||
v-model:inputvisible="visibleColumns"
|
|
||||||
>
|
|
||||||
<!-- :nornmalData="true" -->
|
|
||||||
<template #columns="props">
|
|
||||||
<q-tr :props="props">
|
|
||||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
|
||||||
{{ col.value }}
|
|
||||||
</q-td>
|
|
||||||
</q-tr>
|
|
||||||
</template>
|
|
||||||
</data-table>
|
|
||||||
|
|
||||||
<FullCalendar
|
|
||||||
ref="fullCalendar"
|
|
||||||
class="demo-app-calendar"
|
|
||||||
:options="calendarOptions"
|
|
||||||
>
|
|
||||||
<template v-slot:eventContent="arg">
|
|
||||||
<b>{{ arg.timeText }}</b>
|
|
||||||
<i>{{ arg.event.title }}</i>
|
|
||||||
</template>
|
|
||||||
</FullCalendar>
|
|
||||||
<!-- publicData เป็นสถานะ "เผยแพร่" ต้องใส่ตลอด(ถ้าไม่ใส่ จะเป็นสถานะ"ยังไม่เผยแพร่") จัดการที่ state child ได้เลย -->
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { defineComponent, ref } from "vue";
|
|
||||||
import { useQuasar } from "quasar";
|
|
||||||
// import { useCounterStore } from "@/stores/data";
|
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
|
||||||
import FullCalendar from "@fullcalendar/vue3";
|
|
||||||
import dayGridPlugin from "@fullcalendar/daygrid";
|
|
||||||
import timeGridPlugin from "@fullcalendar/timegrid";
|
|
||||||
import interactionPlugin from "@fullcalendar/interaction";
|
|
||||||
import allLocales from "@fullcalendar/core/locales-all";
|
|
||||||
import listPlugin from "@fullcalendar/list";
|
|
||||||
|
|
||||||
const props = defineProps({});
|
|
||||||
|
|
||||||
const mixin = useCounterMixin();
|
|
||||||
const { success } = mixin;
|
|
||||||
const $q = useQuasar();
|
|
||||||
const columns = ref<any>([
|
|
||||||
{
|
|
||||||
name: "name",
|
|
||||||
label: "Dessert (100g serving)",
|
|
||||||
align: "left",
|
|
||||||
field: (row: any) => row.name,
|
|
||||||
format: (val: any) => `${val}`,
|
|
||||||
sortable: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "calories",
|
|
||||||
align: "center",
|
|
||||||
label: "Calories",
|
|
||||||
field: "calories",
|
|
||||||
sortable: true,
|
|
||||||
},
|
|
||||||
{ name: "fat", label: "Fat (g)", field: "fat", sortable: true },
|
|
||||||
{ name: "carbs", label: "Carbs (g)", field: "carbs" },
|
|
||||||
{ name: "protein", label: "Protein (g)", field: "protein" },
|
|
||||||
{ name: "sodium", label: "Sodium (mg)", field: "sodium" },
|
|
||||||
{
|
|
||||||
name: "calcium",
|
|
||||||
label: "Calcium (%)",
|
|
||||||
field: "calcium",
|
|
||||||
sortable: true,
|
|
||||||
sort: (a: any, b: any) => parseInt(a, 10) - parseInt(b, 10),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "iron",
|
|
||||||
label: "Iron (%)",
|
|
||||||
field: "iron",
|
|
||||||
sortable: true,
|
|
||||||
sort: (a: any, b: any) => parseInt(a, 10) - parseInt(b, 10),
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
const rows = ref<any>([
|
|
||||||
{
|
|
||||||
name: "Frozen Yogurt",
|
|
||||||
calories: 159,
|
|
||||||
fat: 6.0,
|
|
||||||
carbs: 24,
|
|
||||||
protein: 4.0,
|
|
||||||
sodium: 87,
|
|
||||||
calcium: "14%",
|
|
||||||
iron: "1%",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Ice cream sandwich",
|
|
||||||
calories: 237,
|
|
||||||
fat: 9.0,
|
|
||||||
carbs: 37,
|
|
||||||
protein: 4.3,
|
|
||||||
sodium: 129,
|
|
||||||
calcium: "8%",
|
|
||||||
iron: "1%",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Eclair",
|
|
||||||
calories: 262,
|
|
||||||
fat: 16.0,
|
|
||||||
carbs: 23,
|
|
||||||
protein: 6.0,
|
|
||||||
sodium: 337,
|
|
||||||
calcium: "6%",
|
|
||||||
iron: "7%",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Cupcake",
|
|
||||||
calories: 305,
|
|
||||||
fat: 3.7,
|
|
||||||
carbs: 67,
|
|
||||||
protein: 4.3,
|
|
||||||
sodium: 413,
|
|
||||||
calcium: "3%",
|
|
||||||
iron: "8%",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Gingerbread",
|
|
||||||
calories: 356,
|
|
||||||
fat: 16.0,
|
|
||||||
carbs: 49,
|
|
||||||
protein: 3.9,
|
|
||||||
sodium: 327,
|
|
||||||
calcium: "7%",
|
|
||||||
iron: "16%",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Jelly bean",
|
|
||||||
calories: 375,
|
|
||||||
fat: 0.0,
|
|
||||||
carbs: 94,
|
|
||||||
protein: 0.0,
|
|
||||||
sodium: 50,
|
|
||||||
calcium: "0%",
|
|
||||||
iron: "0%",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Lollipop",
|
|
||||||
calories: 392,
|
|
||||||
fat: 0.2,
|
|
||||||
carbs: 98,
|
|
||||||
protein: 0,
|
|
||||||
sodium: 38,
|
|
||||||
calcium: "0%",
|
|
||||||
iron: "2%",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Honeycomb",
|
|
||||||
calories: 408,
|
|
||||||
fat: 3.2,
|
|
||||||
carbs: 87,
|
|
||||||
protein: 6.5,
|
|
||||||
sodium: 562,
|
|
||||||
calcium: "0%",
|
|
||||||
iron: "45%",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Donut",
|
|
||||||
calories: 452,
|
|
||||||
fat: 25.0,
|
|
||||||
carbs: 51,
|
|
||||||
protein: 4.9,
|
|
||||||
sodium: 326,
|
|
||||||
calcium: "2%",
|
|
||||||
iron: "22%",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "KitKat",
|
|
||||||
calories: 518,
|
|
||||||
fat: 26.0,
|
|
||||||
carbs: 65,
|
|
||||||
protein: 7,
|
|
||||||
sodium: 54,
|
|
||||||
calcium: "12%",
|
|
||||||
iron: "6%",
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
const filter = ref<string>("");
|
|
||||||
const visibleColumns = ref<String[]>([]);
|
|
||||||
["name", "calories", "fat", "carbs", "protein", "sodium", "calcium", "iron"];
|
|
||||||
const edit = ref<boolean>(false);
|
|
||||||
const calendarOptions = ref<any>({
|
|
||||||
plugins: [
|
|
||||||
dayGridPlugin,
|
|
||||||
timeGridPlugin,
|
|
||||||
interactionPlugin, // needed for dateClick
|
|
||||||
],
|
|
||||||
headerToolbar: {
|
|
||||||
left: "prev,next today",
|
|
||||||
center: "title",
|
|
||||||
right: "dayGridMonth,timeGridWeek,timeGridDay",
|
|
||||||
},
|
|
||||||
initialView: "dayGridMonth",
|
|
||||||
initialEvents: [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
title:
|
|
||||||
"All-day eventAll-day eventAll-day eventAll-day eventAll-day eventAll-day eventAll-day eventAll-day eventAll-day eventAll-day eventAll-day eventAll-day eventAll-day eventAll-day event",
|
|
||||||
start: new Date().toISOString().replace(/T.*$/, ""),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
title:
|
|
||||||
"Timed event Timed eventTimed eventTimed eventTimed eventTimed eventTimed eventTimed eventTimed event Timed eventTimed eventTimed eventTimed event",
|
|
||||||
start: new Date().toISOString().replace(/T.*$/, "") + "T12:00:00",
|
|
||||||
},
|
|
||||||
], // alternatively, use the `events` setting to fetch from a feed
|
|
||||||
editable: true,
|
|
||||||
selectable: true,
|
|
||||||
selectMirror: true,
|
|
||||||
dayMaxEvents: true,
|
|
||||||
weekends: true,
|
|
||||||
// select: this.handleDateSelect,
|
|
||||||
// eventClick: this.handleEventClick,
|
|
||||||
// eventsSet: this.handleEvents
|
|
||||||
/* you can update a remote database when these fire:
|
|
||||||
eventAdd:
|
|
||||||
eventChange:
|
|
||||||
eventRemove:
|
|
||||||
*/
|
|
||||||
});
|
|
||||||
|
|
||||||
const testAdd = () => {
|
|
||||||
// console.log("test");
|
|
||||||
};
|
|
||||||
const testCancel = () => {
|
|
||||||
edit.value = false;
|
|
||||||
console.log("testCancel");
|
|
||||||
success($q, "asd");
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.fc-event {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -8,6 +8,6 @@
|
||||||
"paths": {
|
"paths": {
|
||||||
"@/*": ["./src/*"]
|
"@/*": ["./src/*"]
|
||||||
},
|
},
|
||||||
"lib": ["dom", "es2015", "es2018", "es2018.promise"]
|
"lib": ["dom", "es2021", "es2021.promise"]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,11 @@
|
||||||
{
|
{
|
||||||
"extends": "@vue/tsconfig/tsconfig.node.json",
|
"extends": "@vue/tsconfig/tsconfig.node.json",
|
||||||
"include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
|
"include": [
|
||||||
|
"vite.config.*",
|
||||||
|
"vitest.config.*",
|
||||||
|
"cypress.config.*",
|
||||||
|
"playwright.config.*"
|
||||||
|
],
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"composite": true,
|
"composite": true,
|
||||||
"types": ["node"]
|
"types": ["node"]
|
||||||
|
|
|
||||||
|
|
@ -11,15 +11,15 @@
|
||||||
"path": "./tsconfig.vitest.json"
|
"path": "./tsconfig.vitest.json"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
/* other configs */
|
/* other configs */
|
||||||
"paths": {
|
"paths": {
|
||||||
"@/*": [
|
"@/*": [
|
||||||
"./*",
|
"./*"
|
||||||
// r
|
// r
|
||||||
]
|
]
|
||||||
},
|
}
|
||||||
/* other configs */
|
/* other configs */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,30 +1,30 @@
|
||||||
import { fileURLToPath, URL } from "node:url"
|
import { fileURLToPath, URL } from "node:url";
|
||||||
|
|
||||||
import { defineConfig } from "vite"
|
import { defineConfig } from "vite";
|
||||||
import vue from "@vitejs/plugin-vue"
|
import vue from "@vitejs/plugin-vue";
|
||||||
import vueJsx from "@vitejs/plugin-vue-jsx"
|
import vueJsx from "@vitejs/plugin-vue-jsx";
|
||||||
import { quasar, transformAssetUrls } from "@quasar/vite-plugin"
|
import { quasar, transformAssetUrls } from "@quasar/vite-plugin";
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [
|
plugins: [
|
||||||
vue({
|
vue({
|
||||||
template: { transformAssetUrls },
|
template: { transformAssetUrls },
|
||||||
}),
|
}),
|
||||||
quasar({
|
quasar({
|
||||||
sassVariables: "src/style/quasar-variables.sass",
|
sassVariables: "src/style/quasar-variables.sass",
|
||||||
}),
|
}),
|
||||||
vueJsx(),
|
vueJsx(),
|
||||||
],
|
],
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
"@": fileURLToPath(new URL("./src", import.meta.url)),
|
"@": fileURLToPath(new URL("./src", import.meta.url)),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
build: {
|
build: {
|
||||||
target: "esnext",
|
target: "esnext",
|
||||||
},
|
},
|
||||||
server: {
|
server: {
|
||||||
port: 3008,
|
port: 3008,
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue