currencyInput
This commit is contained in:
Thanit Konmek
parent
ac74a83dad
commit
f6958b5251
4 changed files with 111 additions and 52 deletions
40
package-lock.json
generated
40
package-lock.json
generated
|
|
@ -25,6 +25,7 @@
|
|||
"quasar": "^2.11.1",
|
||||
"structure-chart": "^0.0.9",
|
||||
"vue": "^3.2.45",
|
||||
"vue-currency-input": "^3.0.5",
|
||||
"vue-router": "^4.1.6",
|
||||
"vue3-datepicker": "^0.3.4",
|
||||
"vue3-pdfjs": "^0.1.6"
|
||||
|
|
@ -3952,20 +3953,6 @@
|
|||
"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
|
||||
"devOptional": true
|
||||
},
|
||||
"node_modules/fsevents": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
|
||||
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/function-bind": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
|
||||
|
|
@ -7722,7 +7709,7 @@
|
|||
},
|
||||
"node_modules/vue": {
|
||||
"version": "3.2.47",
|
||||
// "resolved": "https://npm.joolsoft.com/vue/-/vue-3.2.47.tgz",
|
||||
"resolved": "https://npm.joolsoft.com/vue/-/vue-3.2.47.tgz",
|
||||
"integrity": "sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==",
|
||||
"dependencies": {
|
||||
"@vue/compiler-dom": "3.2.47",
|
||||
|
|
@ -7732,6 +7719,14 @@
|
|||
"@vue/shared": "3.2.47"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-currency-input": {
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/vue-currency-input/-/vue-currency-input-3.0.5.tgz",
|
||||
"integrity": "sha512-HG1hKvAvUDt/mklm+2nEEOuvMNxXVd+O2v2PPOia0iNAs4a7B0fWEsHSoca60Ah9EA4nR0Do5UQUkR5Wqhcb/g==",
|
||||
"peerDependencies": {
|
||||
"vue": "^2.7 || ^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-eslint-parser": {
|
||||
"version": "9.1.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.1.0.tgz",
|
||||
|
|
@ -11086,13 +11081,6 @@
|
|||
"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
|
||||
"devOptional": true
|
||||
},
|
||||
"fsevents": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
|
||||
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"function-bind": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
|
||||
|
|
@ -13787,7 +13775,7 @@
|
|||
},
|
||||
"vue": {
|
||||
"version": "3.2.47",
|
||||
// "resolved": "https://npm.joolsoft.com/vue/-/vue-3.2.47.tgz",
|
||||
"resolved": "https://npm.joolsoft.com/vue/-/vue-3.2.47.tgz",
|
||||
"integrity": "sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==",
|
||||
"requires": {
|
||||
"@vue/compiler-dom": "3.2.47",
|
||||
|
|
@ -13797,6 +13785,12 @@
|
|||
"@vue/shared": "3.2.47"
|
||||
}
|
||||
},
|
||||
"vue-currency-input": {
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/vue-currency-input/-/vue-currency-input-3.0.5.tgz",
|
||||
"integrity": "sha512-HG1hKvAvUDt/mklm+2nEEOuvMNxXVd+O2v2PPOia0iNAs4a7B0fWEsHSoca60Ah9EA4nR0Do5UQUkR5Wqhcb/g==",
|
||||
"requires": {}
|
||||
},
|
||||
"vue-eslint-parser": {
|
||||
"version": "9.1.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.1.0.tgz",
|
||||
|
|
|
|||
62
src/components/CurruncyInput.vue
Normal file
62
src/components/CurruncyInput.vue
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
<template>
|
||||
<q-input
|
||||
ref="inputRef"
|
||||
v-model="formattedValue"
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:class="className"
|
||||
:readonly="readonly"
|
||||
:borderless="borderless"
|
||||
>
|
||||
<template v-for="(_, slot) in slots" v-slot:[slot]="scope">
|
||||
<slot :name="slot" v-bind="scope || {}" />
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useCurrencyInput } from "vue-currency-input";
|
||||
import { ref, useSlots, watch } from "vue";
|
||||
|
||||
const slots = ref<any>(useSlots());
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: Number,
|
||||
dense: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
outlined: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
borderless: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
className: String,
|
||||
});
|
||||
|
||||
const { inputRef, formattedValue, setValue } = useCurrencyInput({
|
||||
locale: "en-US",
|
||||
currency: "EUR",
|
||||
currencyDisplay: "hidden",
|
||||
hideCurrencySymbolOnFocus: true,
|
||||
hideGroupingSeparatorOnFocus: true,
|
||||
hideNegligibleDecimalDigitsOnFocus: true,
|
||||
autoDecimalDigits: false,
|
||||
useGrouping: true,
|
||||
accountingSign: false,
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(value) => {
|
||||
setValue(value);
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
|
@ -574,6 +574,7 @@ import { useQuasar } from "quasar";
|
|||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
|
||||
import CurruncyInput from "@/components/CurruncyInput.vue";
|
||||
|
||||
import type { QTableProps, QForm } from "quasar";
|
||||
import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
|
||||
|
|
@ -615,6 +616,8 @@ const title = ref<ResponseTitle>({
|
|||
positionTypeOld: "",
|
||||
});
|
||||
|
||||
const value = ref<number>(123554);
|
||||
|
||||
const myForm = ref<QForm | null>(null);
|
||||
const edit = ref<boolean>(false);
|
||||
|
||||
|
|
|
|||
|
|
@ -79,34 +79,34 @@ const options = ref<optionType[]>([
|
|||
},
|
||||
]);
|
||||
|
||||
// const getDataNotification = async () => {
|
||||
// showLoader();
|
||||
// await http
|
||||
// .get(config.API.msgNotificate)
|
||||
// .then((res: any) => {
|
||||
// const response = res.data.result;
|
||||
// // console.log("response", response);
|
||||
// let list: notiType[] = [];
|
||||
// response.map((e: any) => {
|
||||
// list.push({
|
||||
// id: e.id,
|
||||
// sender:
|
||||
// e.createdFullName == "" || e.createdFullName == null
|
||||
// ? "เจ้าหน้าที่"[0]
|
||||
// : e.createdFullName[0],
|
||||
// body: e.body ?? "",
|
||||
// timereceive: new Date(e.createdAt),
|
||||
// });
|
||||
// });
|
||||
// notiList.value = list;
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// // messageError($q, e);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// hideLoader();
|
||||
// });
|
||||
// };
|
||||
const getDataNotification = async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.msgNotificate)
|
||||
.then((res: any) => {
|
||||
const response = res.data.result;
|
||||
// console.log("response", response);
|
||||
let list: notiType[] = [];
|
||||
response.map((e: any) => {
|
||||
list.push({
|
||||
id: e.id,
|
||||
sender:
|
||||
e.createdFullName == "" || e.createdFullName == null
|
||||
? "เจ้าหน้าที่"[0]
|
||||
: e.createdFullName[0],
|
||||
body: e.body ?? "",
|
||||
timereceive: new Date(e.createdAt),
|
||||
});
|
||||
});
|
||||
notiList.value = list;
|
||||
})
|
||||
.catch((e) => {
|
||||
// messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* ให้แสดง แทปด้านขวา เมื่อเข้าหน้า รายละเอียดทะเบียนประวัติ
|
||||
|
|
@ -211,7 +211,7 @@ const activeBtn = () => {
|
|||
* ยังจับ boolean ผิด จึงต้อง set
|
||||
*/
|
||||
onMounted(async () => {
|
||||
await getDataNotification();
|
||||
// await getDataNotification();
|
||||
myEventHandler(null, false);
|
||||
window.addEventListener("resize", (e: any) => {
|
||||
myEventHandler(e, true);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue