add login keycloak
This commit is contained in:
Kittapath
parent
4b73b98d35
commit
6c3c9384d9
12 changed files with 457 additions and 292 deletions
34
src/api/index.ts
Normal file
34
src/api/index.ts
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
/**config api */
|
||||||
|
import { ref } from "vue"
|
||||||
|
|
||||||
|
const env = ref<string>(process.env.NODE_ENV || "development")
|
||||||
|
// if (process.env.VUE_APP_TEST) {
|
||||||
|
// env = "test";
|
||||||
|
// }
|
||||||
|
|
||||||
|
const config = ref<any>({
|
||||||
|
development: {
|
||||||
|
// API_URI: "https://localhost:7260/api",
|
||||||
|
API_URI: "https://bma-ehr.frappet.synology.me/api/v1",
|
||||||
|
MEET_URI: "meet.frappet.com",
|
||||||
|
},
|
||||||
|
test: {
|
||||||
|
API_URI: "http://localhost:5010/api/v1",
|
||||||
|
MEET_URI: "meet.frappet.com",
|
||||||
|
},
|
||||||
|
production: {
|
||||||
|
API_URI: `${window.location.protocol}//${window.location.host}/api/v1`,
|
||||||
|
API_URI_ORG_TREE: "https://s3cluster.frappet.com/bma-ehr-fpt/organization/strueture/tree_20230707_115124.json",
|
||||||
|
MEET_URI: "meet.frappet.com",
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const API_URI = ref<string>(config.value[env.value].API_URI)
|
||||||
|
const MEET_URI = ref<string>(config.value[env.value].MEET_URI)
|
||||||
|
|
||||||
|
export default {
|
||||||
|
env: env.value,
|
||||||
|
config: config.value,
|
||||||
|
API_URI: API_URI.value,
|
||||||
|
MEET_URI: MEET_URI.value,
|
||||||
|
}
|
||||||
11
src/api/test/api.test.ts
Normal file
11
src/api/test/api.test.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
/**
|
||||||
|
* API Structure + Org Chart
|
||||||
|
*/
|
||||||
|
import env from "../index"
|
||||||
|
|
||||||
|
const tttt = `${env.API_URI}/test`
|
||||||
|
|
||||||
|
export default {
|
||||||
|
gettttt: `${tttt}`,
|
||||||
|
puttttt: (id: string) => `${tttt}/${id}`,
|
||||||
|
}
|
||||||
12
src/app.config.ts
Normal file
12
src/app.config.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
/**ใช้รวมไฟล์ย่อยๆ ของ api แต่ละไฟล์ */
|
||||||
|
|
||||||
|
/** API Metadata */
|
||||||
|
import testtest from "./api/test/api.test"
|
||||||
|
|
||||||
|
const API = {
|
||||||
|
...testtest,
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
API: API,
|
||||||
|
}
|
||||||
|
|
@ -8,6 +8,7 @@ import { createPinia } from "pinia"
|
||||||
import "@vuepic/vue-datepicker/dist/main.css"
|
import "@vuepic/vue-datepicker/dist/main.css"
|
||||||
|
|
||||||
import "quasar/src/css/index.sass"
|
import "quasar/src/css/index.sass"
|
||||||
|
import http from "./plugins/http"
|
||||||
|
|
||||||
// import './assets/main.css'
|
// import './assets/main.css'
|
||||||
|
|
||||||
|
|
@ -29,4 +30,7 @@ app.component(
|
||||||
"datepicker",
|
"datepicker",
|
||||||
defineAsyncComponent(() => import("@vuepic/vue-datepicker"))
|
defineAsyncComponent(() => import("@vuepic/vue-datepicker"))
|
||||||
)
|
)
|
||||||
|
|
||||||
|
app.config.globalProperties.$http = http
|
||||||
|
|
||||||
app.mount("#app")
|
app.mount("#app")
|
||||||
|
|
|
||||||
|
|
@ -1,174 +1,149 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { QTableProps } from "quasar";
|
import type { QTableProps } from "quasar"
|
||||||
import { ref } from "vue";
|
import { ref } from "vue"
|
||||||
import { useQuasar } from "quasar";
|
import { useQuasar } from "quasar"
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router"
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter()
|
||||||
const $q = useQuasar();
|
const $q = useQuasar()
|
||||||
|
|
||||||
import Table from "@/components/Table.vue";
|
import Table from "@/components/Table.vue"
|
||||||
|
|
||||||
const filter = ref<string>("");
|
const filter = ref<string>("")
|
||||||
const rows = ref<any>([
|
const rows = ref<any>([
|
||||||
{date: '02/02/2566',position: 'นักจัดการงานทั่วไป',noPos: 'กบห.2',level: 'ปฏิบัติการ',salary: '15920',transfer: 'กองบริหารทั่วไป/ฝ่ายการคลัง', status: 'รอดำเนินการ'},
|
{ date: "02/02/2566", position: "นักจัดการงานทั่วไป", noPos: "กบห.2", level: "ปฏิบัติการ", salary: "15920", transfer: "กองบริหารทั่วไป/ฝ่ายการคลัง", status: "รอดำเนินการ" },
|
||||||
{date: '02/02/2565',position: 'นักจัดการงานทั่วไป',noPos: 'กบห.2',level: 'ปฏิบัติการ',salary: '15920',transfer: 'กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร', status: 'เสร็จสิ้น'},
|
{ date: "02/02/2565", position: "นักจัดการงานทั่วไป", noPos: "กบห.2", level: "ปฏิบัติการ", salary: "15920", transfer: "กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร", status: "เสร็จสิ้น" },
|
||||||
{date: '10/01/2565',position: 'นักจัดการงานทั่วไป',noPos: 'กบห.2',level: 'ปฏิบัติการ',salary: '15920',transfer: 'กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร', status: 'เสร็จสิ้น'},
|
{ date: "10/01/2565", position: "นักจัดการงานทั่วไป", noPos: "กบห.2", level: "ปฏิบัติการ", salary: "15920", transfer: "กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร", status: "เสร็จสิ้น" },
|
||||||
]);
|
])
|
||||||
const initialPagination = ref({
|
const initialPagination = ref({
|
||||||
rowsPerPage: 0,
|
rowsPerPage: 0,
|
||||||
});
|
})
|
||||||
const visibleColumns = ref<String[]>([
|
const visibleColumns = ref<String[]>(["no", "date", "position", "noPos", "level", "salary", "transfer", "status"])
|
||||||
"no",
|
|
||||||
"date",
|
|
||||||
"position",
|
|
||||||
"noPos",
|
|
||||||
"level",
|
|
||||||
"salary",
|
|
||||||
"transfer",
|
|
||||||
"status",
|
|
||||||
]);
|
|
||||||
|
|
||||||
const columns = ref<QTableProps["columns"]>([
|
const columns = ref<QTableProps["columns"]>([
|
||||||
{
|
{
|
||||||
name: "no",
|
name: "no",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "ลำดับ",
|
label: "ลำดับ",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
field: "no",
|
field: "no",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px; width:5px;",
|
style: "font-size: 14px; width:5px;",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "date",
|
name: "date",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "วันที่",
|
label: "วันที่",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
field: "date",
|
field: "date",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px; width:15%;",
|
style: "font-size: 14px; width:15%;",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "position",
|
name: "position",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "ตำแหน่ง",
|
label: "ตำแหน่ง",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
field: "position",
|
field: "position",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px; width:15%;",
|
style: "font-size: 14px; width:15%;",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "noPos",
|
name: "noPos",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "ตำแหน่งเลขที่",
|
label: "ตำแหน่งเลขที่",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
field: "noPos",
|
field: "noPos",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "level",
|
name: "level",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "อันดับ/ระดับ",
|
label: "อันดับ/ระดับ",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
field: "level",
|
field: "level",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "salary",
|
name: "salary",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "เงินเดือน",
|
label: "เงินเดือน",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
field: "salary",
|
field: "salary",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "transfer",
|
name: "transfer",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "โอนไปสังกัด",
|
label: "โอนไปสังกัด",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
field: "transfer",
|
field: "transfer",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "status",
|
name: "status",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "สถานะ",
|
label: "สถานะ",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
field: "status",
|
field: "status",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px; width:10%;",
|
style: "font-size: 14px; width:10%;",
|
||||||
},
|
},
|
||||||
]);
|
])
|
||||||
const clickAdd = async () => {
|
const clickAdd = async () => {
|
||||||
router.push(`/transfer/add`);
|
router.push(`/transfer/add`)
|
||||||
};
|
}
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="col-12 row justify-center">
|
<div class="col-12 row justify-center">
|
||||||
<div class="col-xs-12 col-sm-12 col-md-11">
|
<div class="col-xs-12 col-sm-12 col-md-11">
|
||||||
<div class="toptitle text-white col-12 row items-center">
|
<div class="toptitle text-white col-12 row items-center">
|
||||||
<q-btn
|
<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
|
||||||
icon="mdi-arrow-left"
|
เรื่องขอโอน
|
||||||
unelevated
|
</div>
|
||||||
round
|
<div class="col-12">
|
||||||
dense
|
<q-card bordered class="q-pa-md">
|
||||||
flat
|
<Table
|
||||||
color="primary"
|
style="max-height: 80vh"
|
||||||
class="q-mr-sm"
|
:rows="rows"
|
||||||
@click="router.go(-1)"
|
:columns="columns"
|
||||||
/>
|
:filter="filter"
|
||||||
เรื่องขอโอน
|
:visible-columns="visibleColumns"
|
||||||
</div>
|
v-model:inputfilter="filter"
|
||||||
<div class="col-12">
|
v-model:inputvisible="visibleColumns"
|
||||||
<q-card bordered class="q-pa-md">
|
:pagination="initialPagination"
|
||||||
<Table
|
:inputShow="false"
|
||||||
style="max-height: 80vh"
|
:add="clickAdd"
|
||||||
:rows="rows"
|
:titleText="''"
|
||||||
:columns="columns"
|
>
|
||||||
:filter="filter"
|
<template #columns="props">
|
||||||
:visible-columns="visibleColumns"
|
<q-tr :props="props" class="cursor-pointer" @click="router.push(`/transfer/1`)">
|
||||||
v-model:inputfilter="filter"
|
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
v-model:inputvisible="visibleColumns"
|
<div v-if="col.name == 'no'">
|
||||||
:pagination="initialPagination"
|
{{ props.rowIndex + 1 }}
|
||||||
:inputShow="false"
|
</div>
|
||||||
:add="clickAdd"
|
<div v-else-if="col.name == 'status'">
|
||||||
:titleText="''"
|
<q-icon size="20px" v-if="props.row.status == 'รอดำเนินการ'" name="mdi-timer-sand" color="deep-orange">
|
||||||
>
|
<q-tooltip>รอดำเนินการ</q-tooltip>
|
||||||
<template #columns="props">
|
</q-icon>
|
||||||
<q-tr :props="props" class="cursor-pointer" @click="router.push(`/transfer/1`)">
|
<q-icon size="20px" v-else name="mdi-check" color="teal">
|
||||||
<q-td
|
<q-tooltip>เสร็จสิ้น</q-tooltip>
|
||||||
v-for="col in props.cols"
|
</q-icon>
|
||||||
:key="col.name"
|
</div>
|
||||||
:props="props"
|
<div v-else>
|
||||||
>
|
{{ col.value }}
|
||||||
<div v-if="col.name == 'no'">
|
</div>
|
||||||
{{ props.rowIndex + 1 }}
|
</q-td>
|
||||||
</div>
|
</q-tr>
|
||||||
<div v-else-if="col.name == 'status'">
|
</template>
|
||||||
<q-icon size="20px" v-if="props.row.status == 'รอดำเนินการ'" name="mdi-timer-sand" color="deep-orange">
|
</Table>
|
||||||
<q-tooltip>รอดำเนินการ</q-tooltip>
|
</q-card>
|
||||||
</q-icon>
|
</div>
|
||||||
<q-icon size="20px" v-else name="mdi-check" color="teal">
|
</div>
|
||||||
<q-tooltip>เสร็จสิ้น</q-tooltip>
|
</div>
|
||||||
</q-icon>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div v-else>
|
|
||||||
{{ col.value }}
|
|
||||||
</div>
|
|
||||||
</q-td>
|
|
||||||
</q-tr>
|
|
||||||
</template>
|
|
||||||
</Table>
|
|
||||||
</q-card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<style>
|
<style></style>
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
25
src/plugins/axios.ts
Normal file
25
src/plugins/axios.ts
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
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({
|
||||||
|
withCredentials: false,
|
||||||
|
})
|
||||||
|
|
||||||
|
// axiosInstance.defaults.baseURL = dotnetPath;
|
||||||
|
axiosInstance.interceptors.request.use(
|
||||||
|
async (config) => {
|
||||||
|
const token = await keycloak.token
|
||||||
|
config.headers = {
|
||||||
|
Authorization: `Bearer ${token}`,
|
||||||
|
}
|
||||||
|
return config
|
||||||
|
},
|
||||||
|
(error) => {
|
||||||
|
Promise.reject(error)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
export default axiosInstance
|
||||||
22
src/plugins/filters.ts
Normal file
22
src/plugins/filters.ts
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
/**
|
||||||
|
* GLOABL Filters
|
||||||
|
* - ไฟล์นี้จะไว้เก็บฟังก์ชันง่าย ๆ พวก Helper Functions ทั้งหลาย
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
const filters = {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชัน compactNumber ใช้แปลงตัวเลขยาว ๆ ให้กลายเป็นเลขสั้น ๆ แบบที่พวก Social Media ชอบใช้กัน เช่น 1,000 แปลงเป็น 1K หรือ 1,000,000 แปลงเป็น 1M
|
||||||
|
* วิธีใช้ : {{ $filters.compactNumber(value) }}
|
||||||
|
*
|
||||||
|
* @param val รับค่าพารามิเตอร์เป็นตัวแปรชนิดตัวเลข
|
||||||
|
* @returns คืนค่าเป็นตัวเลขที่แปลงค่าแล้ว
|
||||||
|
*/
|
||||||
|
compactNumber (val: number) {
|
||||||
|
const formatter = Intl.NumberFormat('en', { notation: 'compact'})
|
||||||
|
return formatter.format(val)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default filters;
|
||||||
45
src/plugins/http.ts
Normal file
45
src/plugins/http.ts
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
import Axios, { type AxiosRequestConfig, type AxiosResponse } from "axios";
|
||||||
|
import keycloak from "./keycloak";
|
||||||
|
|
||||||
|
const http = Axios.create({
|
||||||
|
timeout: 1000000000, // เพิ่มค่า timeout
|
||||||
|
headers: {
|
||||||
|
"X-Requested-With": "XMLHttpRequest",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
http.interceptors.request.use(
|
||||||
|
async function (config: AxiosRequestConfig<any>) {
|
||||||
|
await keycloak.updateToken(1);
|
||||||
|
config.headers = config.headers ?? {};
|
||||||
|
const token = keycloak.token;
|
||||||
|
// const token = localStorage.getItem("access_token")
|
||||||
|
// const token =
|
||||||
|
// "eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICIxU2VKV2dVRFVlNXZwNS13Q1ZHaG9lT2l4bDJTTkdKemthLU5ZN211NXZJIn0.eyJleHAiOjE2NzI0MTI1NDksImlhdCI6MTY3MjM3NjU0OSwiYXV0aF90aW1lIjoxNjcyMzc2NTQ5LCJqdGkiOiI1MTVhY2IwNC1jODQ3LTQzM2YtYjUxOC03ODUzMzJhY2ZjNWYiLCJpc3MiOiJodHRwczovL2tleWNsb2FrLmZyYXBwZXQuc3lub2xvZ3kubWUvYXV0aC9yZWFsbXMvYm1hLWVociIsImF1ZCI6ImFjY291bnQiLCJzdWIiOiJlZmM5YjRlMC1mZGU2LTQ1NDQtYmU1OS1lMTA0MjEwMjUzZjAiLCJ0eXAiOiJCZWFyZXIiLCJhenAiOiJibWEtZWhyIiwibm9uY2UiOiI3NjMyMGI3ZS0xZTMxLTQ5ODYtYWIzOC1iOTUyYjFlODY3OGYiLCJzZXNzaW9uX3N0YXRlIjoiMDZlNTBkZjktNzAyNi00ZGIwLTkxMjgtMWY3Y2FiYTRkNDEyIiwiYWNyIjoiMSIsImFsbG93ZWQtb3JpZ2lucyI6WyJodHRwczovL2xvY2FsaG9zdDo3MDA2Il0sInJlYWxtX2FjY2VzcyI6eyJyb2xlcyI6WyJkZWZhdWx0LXJvbGVzLWJtYS1laHIiLCJvZmZsaW5lX2FjY2VzcyIsImFkbWluIiwidW1hX2F1dGhvcml6YXRpb24iXX0sInJlc291cmNlX2FjY2VzcyI6eyJhY2NvdW50Ijp7InJvbGVzIjpbIm1hbmFnZS1hY2NvdW50IiwibWFuYWdlLWFjY291bnQtbGlua3MiLCJ2aWV3LXByb2ZpbGUiXX19LCJzY29wZSI6Im9wZW5pZCBlbWFpbCBwcm9maWxlIiwic2lkIjoiMDZlNTBkZjktNzAyNi00ZGIwLTkxMjgtMWY3Y2FiYTRkNDEyIiwiZW1haWxfdmVyaWZpZWQiOnRydWUsInJvbGUiOlsiZGVmYXVsdC1yb2xlcy1ibWEtZWhyIiwib2ZmbGluZV9hY2Nlc3MiLCJhZG1pbiIsInVtYV9hdXRob3JpemF0aW9uIl0sIm5hbWUiOiJTeXN0ZW0gQWRtaW5pc3RyYXRvciIsInByZWZlcnJlZF91c2VybmFtZSI6ImFkbWluIiwiZ2l2ZW5fbmFtZSI6IlN5c3RlbSIsImZhbWlseV9uYW1lIjoiQWRtaW5pc3RyYXRvciIsImVtYWlsIjoiYWRtaW5AbG9jYWxob3N0In0.xmfJ3pzI-jLYsaiFXyjTW7gfAEpvUmMVsp9BsB1CfRCVOKiGBbuZhnQY8W-1SWVAx1NjJ55L-zMHPK6hk1dRPLbEse3DlIBZw04W9j8m-Wz3eqdHf_UCjmrXb8qAwkeq0Iaxq9mVfJJeQWeKhFBi-Ff8ek4hCXTYDICXS8ny_BaC5WkyrefHQ2xBqQjwRyoxsg4IoVMjXYNb8L9A-4BNlRfs928SqgFYCRlF5h6zw_rC0XoLrGTmqeacBdpey-r3j2g_lTqWy8mQg2T9s65IDqW3kFPOsr0SVO88sjlFbN9Et0L57RmiqORk_RwzbWg-_Yb6dOuolXsnjBOhOoTzkA";
|
||||||
|
if (token) config.headers.Authorization = `Bearer ${token}`;
|
||||||
|
return config;
|
||||||
|
},
|
||||||
|
function (error: any) {
|
||||||
|
return Promise.reject(error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
http.interceptors.response.use(
|
||||||
|
function (response: AxiosResponse<any, any>) {
|
||||||
|
return response;
|
||||||
|
},
|
||||||
|
function (error: any) {
|
||||||
|
if (typeof error !== undefined) {
|
||||||
|
// eslint-disable-next-line no-prototype-builtins
|
||||||
|
if (error.hasOwnProperty("response")) {
|
||||||
|
if (error.response.status === 401 || error.response.status === 403) {
|
||||||
|
// Store.commit("SET_ERROR_MESSAGE", error.response.data.message);
|
||||||
|
// Store.commit("REMOVE_ACCESS_TOKEN")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return Promise.reject(error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
export default http;
|
||||||
23
src/plugins/keycloak.ts
Normal file
23
src/plugins/keycloak.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
/**
|
||||||
|
* 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://identity.frappet.com/",
|
||||||
|
// realm: "bma-ehr-exam",
|
||||||
|
// clientId: "bma-ehr-exam-vue3",
|
||||||
|
}; //option keycloak ที่จะ connect
|
||||||
|
|
||||||
|
const keycloak = Keycloak(initOptions);
|
||||||
|
|
||||||
|
keycloak.onAuthSuccess = () => {}; //เพิ่มlogin สำเร็จจะมาทำฟังก์ชันนี้
|
||||||
|
|
||||||
|
await keycloak.init({ checkLoginIframe: false }); //ทำการ connect keycloak
|
||||||
|
export default keycloak;
|
||||||
|
|
@ -6,6 +6,9 @@ const Dashboard = () => import("@/modules/01_dashboard/views/Dashboard.vue")
|
||||||
import ModuleTransfer from "@/modules/02_transfer/router.ts"
|
import ModuleTransfer from "@/modules/02_transfer/router.ts"
|
||||||
import ModuleLeave from "@/modules/03_leave/router.ts"
|
import ModuleLeave from "@/modules/03_leave/router.ts"
|
||||||
|
|
||||||
|
// TODO: ใช้หรือไม่?
|
||||||
|
import keycloak from "@/plugins/keycloak"
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
history: createWebHistory(import.meta.env.BASE_URL),
|
history: createWebHistory(import.meta.env.BASE_URL),
|
||||||
routes: [
|
routes: [
|
||||||
|
|
@ -18,6 +21,10 @@ const router = createRouter({
|
||||||
path: "/",
|
path: "/",
|
||||||
name: "dashboard",
|
name: "dashboard",
|
||||||
component: Dashboard,
|
component: Dashboard,
|
||||||
|
meta: {
|
||||||
|
Auth: true,
|
||||||
|
Key: [7],
|
||||||
|
},
|
||||||
},
|
},
|
||||||
...ModuleTransfer,
|
...ModuleTransfer,
|
||||||
...ModuleLeave,
|
...ModuleLeave,
|
||||||
|
|
@ -26,4 +33,20 @@ const router = createRouter({
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
|
|
||||||
|
router.beforeEach((to, from, next) => {
|
||||||
|
if (to.meta.Auth) {
|
||||||
|
if (!keycloak.authenticated) {
|
||||||
|
keycloak.login({
|
||||||
|
redirectUri: `${window.location.protocol}//${window.location.host}${to.path}`,
|
||||||
|
locale: "th",
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
next()
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
next()
|
||||||
|
}
|
||||||
|
// next();
|
||||||
|
})
|
||||||
|
|
||||||
export default router
|
export default router
|
||||||
|
|
|
||||||
|
|
@ -1,49 +1,69 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted, ref, watch } from "vue";
|
import http from "@/plugins/http"
|
||||||
import { useRoute, useRouter } from "vue-router";
|
import config from "@/app.config"
|
||||||
import { useQuasar } from "quasar";
|
import { onMounted, ref, watch } from "vue"
|
||||||
|
import { useRoute, useRouter } from "vue-router"
|
||||||
|
import { useQuasar } from "quasar"
|
||||||
|
import keycloak from "@/plugins/keycloak"
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute()
|
||||||
const router = useRouter();
|
const router = useRouter()
|
||||||
|
|
||||||
const $q = useQuasar();
|
const $q = useQuasar()
|
||||||
const link = ref<string>("");
|
const link = ref<string>("")
|
||||||
|
|
||||||
const fullname = ref<string>("นางสาวธัญลักษณ์ รอดกูล");
|
const fullname = ref<string>("นางสาวธัญลักษณ์ รอดกูล")
|
||||||
const notiList = [
|
const notiList = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
sender: "นัดหมาย",
|
sender: "นัดหมาย",
|
||||||
body: "เพิ่มการนัดหมาย",
|
body: "เพิ่มการนัดหมาย",
|
||||||
timereceive: "13/06/2566",
|
timereceive: "13/06/2566",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
sender: "นัดหมาย",
|
sender: "นัดหมาย",
|
||||||
body: "เพิ่มการนัดหมาย",
|
body: "เพิ่มการนัดหมาย",
|
||||||
timereceive: "14/06/2566",
|
timereceive: "14/06/2566",
|
||||||
},
|
},
|
||||||
];
|
]
|
||||||
const notiTrigger = ref(false);
|
const notiTrigger = ref(false)
|
||||||
const currentRouteName = router.currentRoute.value.name
|
const currentRouteName = router.currentRoute.value.name
|
||||||
const tab = ref(currentRouteName);
|
const tab = ref(currentRouteName)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
|
||||||
|
*/
|
||||||
|
onMounted(async () => {
|
||||||
|
console.log(config.API.gettttt)
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* logout keycloak
|
||||||
|
* confirm ก่อนออกจากระบบ
|
||||||
|
*/
|
||||||
|
const doLogout = () => {
|
||||||
|
$q.dialog({
|
||||||
|
title: "ยืนยันการออกจากระบบ",
|
||||||
|
message: `ต้องการออกจากระบบใช้หรือไม่?`,
|
||||||
|
cancel: "ยกเลิก",
|
||||||
|
ok: "ยืนยัน",
|
||||||
|
persistent: true,
|
||||||
|
}).onOk(() => {
|
||||||
|
keycloak.logout()
|
||||||
|
})
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<!-- โครงเว็บ -->
|
<!-- โครงเว็บ -->
|
||||||
<template>
|
<template>
|
||||||
<q-layout view="hHh LpR fFr">
|
<q-layout view="hHh LpR fFr">
|
||||||
<!-- header -->
|
<!-- header -->
|
||||||
<q-header flat class="text-dark col-12 bg-top header-br" height-hint="7">
|
<q-header flat class="text-dark col-12 bg-top header-br" height-hint="7">
|
||||||
<q-toolbar class="q-my-xs items-center" :style="$q.screen.gt.xs ? 'padding: 1% 2%;': 'padding: 1% 4%;'">
|
<q-toolbar class="q-my-xs items-center" :style="$q.screen.gt.xs ? 'padding: 1% 2%;' : 'padding: 1% 4%;'">
|
||||||
<div class="row items-center no-wrap" v-if="$q.screen.gt.xs">
|
<div class="row items-center no-wrap" v-if="$q.screen.gt.xs">
|
||||||
<q-img src="@/assets/logo.png" spinner-color="white" style="height: 35px; max-width: 35px" />
|
<q-img src="@/assets/logo.png" spinner-color="white" style="height: 35px; max-width: 35px" />
|
||||||
<div class="row q-ml-md items-center q-pt-xs">
|
<div class="row q-ml-md items-center q-pt-xs">
|
||||||
<div
|
<div style="color: #ffffff; letter-spacing: 1px; line-height: 10px" class="text-body2 text-weight-bolder col-12">ระบบ<span class="text-primary">ทรัพยากรบุคคล</span></div>
|
||||||
style="color: #ffffff; letter-spacing: 1px; line-height:10px;"
|
|
||||||
class="text-body2 text-weight-bolder col-12"
|
|
||||||
>
|
|
||||||
ระบบ<span class="text-primary">ทรัพยากรบุคคล</span>
|
|
||||||
</div>
|
|
||||||
<div class="text-caption text-white">กรุงเทพมหานคร</div>
|
<div class="text-caption text-white">กรุงเทพมหานคร</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -51,182 +71,143 @@ const tab = ref(currentRouteName);
|
||||||
<img src="@/assets/logo.png" style="height: 35px; max-width: 35px" />
|
<img src="@/assets/logo.png" style="height: 35px; max-width: 35px" />
|
||||||
</div>
|
</div>
|
||||||
<div v-if="$q.screen.gt.xs">
|
<div v-if="$q.screen.gt.xs">
|
||||||
<q-tabs
|
<q-tabs v-model="tab" align="justify" indicator-color="transparent" active-color="white bg-white-btn border-100" dense inline-label class="text-grey-5 tabsHome">
|
||||||
v-model="tab"
|
<q-tab class="border-100" name="dashboard" label="หน้าแรก" icon="mdi-view-dashboard-outline" @click="router.push(`/`)" />
|
||||||
align="justify"
|
|
||||||
indicator-color="transparent"
|
|
||||||
active-color="white bg-white-btn border-100"
|
|
||||||
dense
|
|
||||||
inline-label
|
|
||||||
class="text-grey-5 tabsHome"
|
|
||||||
>
|
|
||||||
<q-tab class="border-100" name="dashboard" label="หน้าแรก" icon="mdi-view-dashboard-outline" @click="router.push(`/`)" />
|
|
||||||
<q-tab class="border-100" name="time" label="ลงเวลางาน" icon="mdi-map-marker-check-outline" />
|
<q-tab class="border-100" name="time" label="ลงเวลางาน" icon="mdi-map-marker-check-outline" />
|
||||||
<q-tab class="border-100" name="leave" label="การลา" icon="mdi-calendar-blank-outline" />
|
<q-tab class="border-100" name="leave" label="การลา" icon="mdi-calendar-blank-outline" />
|
||||||
</q-tabs>
|
</q-tabs>
|
||||||
</div>
|
</div>
|
||||||
<q-space />
|
<q-space />
|
||||||
<!-- Notification -->
|
<!-- Notification -->
|
||||||
<q-btn
|
<q-btn round dense flat size="13px" :class="$q.screen.gt.xs ? 'bg-white-btn q-mx-md' : 'q-mr-sm'" :color="notiList.length === 0 ? 'grey-6' : 'grey-8'" :disable="notiList.length === 0">
|
||||||
round
|
|
||||||
dense
|
|
||||||
flat
|
|
||||||
size="13px"
|
|
||||||
:class="$q.screen.gt.xs ? 'bg-white-btn q-mx-md': 'q-mr-sm'"
|
|
||||||
:color="notiList.length === 0 ? 'grey-6' : 'grey-8'"
|
|
||||||
:disable="notiList.length === 0"
|
|
||||||
>
|
|
||||||
<q-icon name="mdi-bell-outline" size="22px" color="white" />
|
<q-icon name="mdi-bell-outline" size="22px" color="white" />
|
||||||
<q-badge
|
<q-badge rounded v-show="notiList.length > 0" color="negative" text-color="white" floating>{{ notiList.length }}</q-badge>
|
||||||
rounded
|
|
||||||
v-show="notiList.length > 0"
|
|
||||||
color="negative"
|
|
||||||
text-color="white"
|
|
||||||
floating
|
|
||||||
>{{ notiList.length }}</q-badge
|
|
||||||
>
|
|
||||||
<q-menu v-model="notiTrigger" max-width="480px" :offset="[0, 10]">
|
<q-menu v-model="notiTrigger" max-width="480px" :offset="[0, 10]">
|
||||||
<div class="q-px-md q-py-sm row col-12 items-center">
|
<div class="q-px-md q-py-sm row col-12 items-center">
|
||||||
<div class="text-subtitle1 text-weight-medium">การแจ้งเตือน</div>
|
<div class="text-subtitle1 text-weight-medium">การแจ้งเตือน</div>
|
||||||
<q-space />
|
<q-space />
|
||||||
<q-btn label="ล้างข้อมูล" color="pink" dense class="text-caption" flat />
|
<q-btn label="ล้างข้อมูล" color="pink" dense class="text-caption" flat />
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<q-list style="min-width: 300px" v-for="(n, index) in notiList" :key="index">
|
<q-list style="min-width: 300px" v-for="(n, index) in notiList" :key="index">
|
||||||
<q-item v-ripple class="mytry q-py-sm" dense>
|
<q-item v-ripple class="mytry q-py-sm" dense>
|
||||||
<q-item-section avatar top style="min-width: 40px">
|
<q-item-section avatar top style="min-width: 40px">
|
||||||
<q-avatar rounded color="primary" size="25px" text-color="white">
|
<q-avatar rounded color="primary" size="25px" text-color="white">
|
||||||
<span class="text-weight-medium text-uppercase">{{n.sender[0]}}</span>
|
<span class="text-weight-medium text-uppercase">{{ n.sender[0] }}</span>
|
||||||
</q-avatar>
|
</q-avatar>
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
<q-item-section>
|
<q-item-section>
|
||||||
<q-item-label caption class="text-black">{{n.body}}</q-item-label>
|
<q-item-label caption class="text-black">{{ n.body }}</q-item-label>
|
||||||
<q-item-label caption class="row items-center text-grey-7" style="font-size: 12px;">{{ n.timereceive }}</q-item-label>
|
<q-item-label caption class="row items-center text-grey-7" style="font-size: 12px">{{ n.timereceive }}</q-item-label>
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
<div>
|
<div>
|
||||||
<q-btn
|
<q-btn size="sm" unelevated dense icon="mdi-close" class="mybtn q-mx-xs" v-close-popup></q-btn>
|
||||||
size="sm"
|
|
||||||
unelevated
|
|
||||||
dense
|
|
||||||
icon="mdi-close"
|
|
||||||
class="mybtn q-mx-xs"
|
|
||||||
v-close-popup
|
|
||||||
></q-btn>
|
|
||||||
</div>
|
</div>
|
||||||
</q-item>
|
</q-item>
|
||||||
<q-separator class="q-my-xs" color="grey-2" v-if="index + 1 < notiList.length" :key="index" />
|
<q-separator class="q-my-xs" color="grey-2" v-if="index + 1 < notiList.length" :key="index" />
|
||||||
</q-list>
|
</q-list>
|
||||||
</q-menu>
|
</q-menu>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
|
|
||||||
<!-- User -->
|
<!-- User -->
|
||||||
<q-btn-dropdown
|
<q-btn-dropdown v-if="$q.screen.gt.xs" rounded dense flat :class="$q.screen.gt.xs ? 'bg-white-btn' : ''" color="white" class="q-pr-sm border-10" dropdown-icon="mdi-chevron-down">
|
||||||
v-if="$q.screen.gt.xs"
|
|
||||||
rounded
|
|
||||||
dense
|
|
||||||
flat
|
|
||||||
:class="$q.screen.gt.xs ? 'bg-white-btn': ''"
|
|
||||||
color="white"
|
|
||||||
class="q-pr-sm border-10"
|
|
||||||
dropdown-icon="mdi-chevron-down">
|
|
||||||
<template v-slot:label>
|
<template v-slot:label>
|
||||||
<q-item dense v-close-popup class="q-pa-none q-pl-xs">
|
<q-item dense v-close-popup class="q-pa-none q-pl-xs">
|
||||||
<q-item-section avatar class="q-pa-none " style="min-width:30px;">
|
<q-item-section avatar class="q-pa-none" style="min-width: 30px">
|
||||||
<q-img src="@/assets/avatar_user.jpg" class="border-100" spinner-color="white" style="height: 30px; max-width: 30px;" />
|
<q-img src="@/assets/avatar_user.jpg" class="border-100" spinner-color="white" style="height: 30px; max-width: 30px" />
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
<q-item-section class="text-left text-white q-pa-none q-pl-sm" >
|
<q-item-section class="text-left text-white q-pa-none q-pl-sm">
|
||||||
<q-item-label class="text-caption text-weight-medium">{{fullname}}</q-item-label>
|
<q-item-label class="text-caption text-weight-medium">{{ fullname }}</q-item-label>
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
</q-item>
|
</q-item>
|
||||||
</template>
|
</template>
|
||||||
<q-list>
|
<q-list>
|
||||||
<q-item clickable v-close-popup >
|
<q-item clickable v-close-popup>
|
||||||
<q-item-section avatar style="min-width:30px;">
|
<q-item-section avatar style="min-width: 30px">
|
||||||
<q-icon color="orange-9" size="18px" name="mdi-lock-outline" />
|
<q-icon color="orange-9" size="18px" name="mdi-lock-outline" />
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
<q-item-section><q-item-label>เปลี่ยนรหัสผ่าน</q-item-label></q-item-section>
|
<q-item-section><q-item-label>เปลี่ยนรหัสผ่าน</q-item-label></q-item-section>
|
||||||
</q-item>
|
</q-item>
|
||||||
|
|
||||||
<q-item clickable v-close-popup >
|
<q-item clickable v-close-popup>
|
||||||
<q-item-section avatar style="min-width:30px;">
|
<q-item-section avatar style="min-width: 30px">
|
||||||
<q-icon color="primary" size="18px" name="mdi-logout-variant" />
|
<q-icon color="primary" size="18px" name="mdi-logout-variant" />
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
<q-item-section><q-item-label>ออกจากระบบ</q-item-label></q-item-section>
|
<q-item-section><q-item-label @click="doLogout">ออกจากระบบ</q-item-label></q-item-section>
|
||||||
</q-item>
|
</q-item>
|
||||||
</q-list>
|
</q-list>
|
||||||
</q-btn-dropdown>
|
</q-btn-dropdown>
|
||||||
<div v-else class="q-ml-sm" style="width: 30px;">
|
<div v-else class="q-ml-sm" style="width: 30px">
|
||||||
<q-img src="@/assets/avatar_user.jpg" class="border-100" spinner-color="white" style="height: 30px; max-width: 30px;" />
|
<q-img src="@/assets/avatar_user.jpg" class="border-100" spinner-color="white" style="height: 30px; max-width: 30px" />
|
||||||
</div>
|
</div>
|
||||||
</q-toolbar>
|
</q-toolbar>
|
||||||
</q-header>
|
</q-header>
|
||||||
<div class="bg-top" :style="$q.screen.gt.xs ? 'height: 200px;': 'height: 200px;'" />
|
<div class="bg-top" :style="$q.screen.gt.xs ? 'height: 200px;' : 'height: 200px;'" />
|
||||||
<!-- end header -->
|
<!-- end header -->
|
||||||
|
|
||||||
<q-footer class="bg-top" v-if="!$q.screen.gt.xs">
|
<q-footer class="bg-top" v-if="!$q.screen.gt.xs">
|
||||||
<q-toolbar style="padding: 2% 2%;">
|
<q-toolbar style="padding: 2% 2%">
|
||||||
<div class="row col-12 justify-around">
|
<div class="row col-12 justify-around">
|
||||||
<q-btn flat round class="bg-white-btn" color="white" icon="mdi-view-dashboard-outline" />
|
<q-btn flat round class="bg-white-btn" color="white" icon="mdi-view-dashboard-outline" />
|
||||||
<q-btn flat round color="white" icon="mdi-map-marker-check-outline" />
|
<q-btn flat round color="white" icon="mdi-map-marker-check-outline" />
|
||||||
<q-btn flat round color="white" icon="mdi-calendar-blank-outline"/>
|
<q-btn flat round color="white" icon="mdi-calendar-blank-outline" />
|
||||||
<q-btn flat round color="white" icon="mdi-account-outline" />
|
<q-btn flat round color="white" icon="mdi-account-outline" />
|
||||||
</div>
|
</div>
|
||||||
</q-toolbar>
|
</q-toolbar>
|
||||||
</q-footer>
|
</q-footer>
|
||||||
|
|
||||||
<q-page-container class="bg-grey-2 q-pb-md">
|
<q-page-container class="bg-grey-2 q-pb-md">
|
||||||
<q-page :style="$q.screen.gt.xs ? 'padding: 1.8% 2%; margin-top: -200px;': 'padding: 5% 4%; margin-top: -200px;'">
|
<q-page :style="$q.screen.gt.xs ? 'padding: 1.8% 2%; margin-top: -200px;' : 'padding: 5% 4%; margin-top: -200px;'">
|
||||||
<router-view :key="$route.fullPath" />
|
<router-view :key="$route.fullPath" />
|
||||||
</q-page>
|
</q-page>
|
||||||
</q-page-container>
|
</q-page-container>
|
||||||
</q-layout>
|
</q-layout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.bg-drawer{
|
.bg-drawer {
|
||||||
background: #242a3d;
|
background: #242a3d;
|
||||||
}
|
}
|
||||||
.menu {
|
.menu {
|
||||||
padding-bottom: 5px;
|
padding-bottom: 5px;
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
}
|
}
|
||||||
.tabsHome .q-tab__icon{
|
.tabsHome .q-tab__icon {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
.border-100{
|
.border-100 {
|
||||||
border-radius: 100px;
|
border-radius: 100px;
|
||||||
}
|
}
|
||||||
.bg-top{
|
.bg-top {
|
||||||
background: #273238;
|
background: #273238;
|
||||||
}
|
}
|
||||||
.header-br{
|
.header-br {
|
||||||
border-bottom: 1px solid #fdfdfd31;
|
border-bottom: 1px solid #fdfdfd31;
|
||||||
}
|
}
|
||||||
.menuActive {
|
.menuActive {
|
||||||
background: #1e2234;
|
background: #1e2234;
|
||||||
border-radius: 0 100px 100px 0;
|
border-radius: 0 100px 100px 0;
|
||||||
margin-right: 4%;
|
margin-right: 4%;
|
||||||
}
|
}
|
||||||
.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;
|
||||||
border: 1px solid #eeeded;
|
border: 1px solid #eeeded;
|
||||||
}
|
}
|
||||||
.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.2%;
|
margin-bottom: 1.2%;
|
||||||
}
|
}
|
||||||
.q-field--outlined .q-field__control{
|
.q-field--outlined .q-field__control {
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
.q-field--outlined .q-field__control:before {
|
.q-field--outlined .q-field__control:before {
|
||||||
border-color: #C8D3DB;
|
border-color: #c8d3db;
|
||||||
}
|
}
|
||||||
.q-field--outlined .q-icon{
|
.q-field--outlined .q-icon {
|
||||||
color: #7474747f;
|
color: #7474747f;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,20 +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: [vue({
|
plugins: [
|
||||||
template: { transformAssetUrls }
|
vue({
|
||||||
}), quasar({
|
template: { transformAssetUrls },
|
||||||
sassVariables: 'src/style/quasar-variables.sass'
|
}),
|
||||||
}), vueJsx()],
|
quasar({
|
||||||
resolve: {
|
sassVariables: "src/style/quasar-variables.sass",
|
||||||
alias: {
|
}),
|
||||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
vueJsx(),
|
||||||
}
|
],
|
||||||
}
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
"@": fileURLToPath(new URL("./src", import.meta.url)),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
build: {
|
||||||
|
target: "esnext",
|
||||||
|
},
|
||||||
|
server: {
|
||||||
|
port: 3007,
|
||||||
|
},
|
||||||
})
|
})
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue