no message

This commit is contained in:
setthawutttty 2023-08-18 14:50:33 +07:00
parent a321b87321
commit 2907bc012e

View file

@ -9,20 +9,51 @@ div
<q-space />
<div class="items-center" style="display: flex">
<!-- นหาขอความใน table -->
<q-input standout dense v-model="filter" ref="filterRef" outlined debounce="300" placeholder="ค้นหา"
style="max-width: 200px" class="q-ml-sm">
<q-input
standout
dense
v-model="filter"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
style="max-width: 200px"
class="q-ml-sm"
>
<template v-slot:append>
<q-icon v-if="filter == ''" name="search" />
<q-icon v-if="filter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
<q-icon
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<!-- แสดงคอลมนใน table -->
<q-select v-model="visibleColumns" :display-value="$q.lang.table.columns" multiple outlined dense
:options="columns" options-dense option-value="name" map-options emit-value style="min-width: 150px"
class="gt-xs q-ml-sm" />
<q-select
v-model="visibleColumns"
:display-value="$q.lang.table.columns"
multiple
outlined
dense
:options="columns"
options-dense
option-value="name"
map-options
emit-value
style="min-width: 150px"
class="gt-xs q-ml-sm"
/>
</div>
</div>
<d-table :rows="rows" :columns="columns" :visible-columns="visibleColumns" :filter="filter" row-key="name">
<d-table
:rows="rows"
:columns="columns"
:visible-columns="visibleColumns"
:filter="filter"
row-key="name"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
@ -32,27 +63,79 @@ div
<q-th auto-width />
<q-th auto-width />
<q-th auto-width />
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectModal(props.row)">{{ col.name ==
"no" ? props.rowIndex + 1 : col.value }}</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">{{
col.name == "no" ? props.rowIndex + 1 : col.value
}}</q-td>
<q-td auto-width>
<q-btn dense size="12px" flat round :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
:disable="props.rowIndex + 1 == 1" @click="upDown(props)" icon="mdi-arrow-up-bold">
<q-btn
dense
size="12px"
flat
round
:color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
:disable="props.rowIndex + 1 == 1"
@click="upDown(props)"
icon="mdi-arrow-up-bold"
>
<!-- <q-tooltip>เลอนลำดบข</q-tooltip> -->
</q-btn>
</q-td>
<q-td auto-width>
<q-btn dense size="12px" flat round :color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
:disable="rows.length == props.rowIndex + 1" @click="upDown(props, false)" icon="mdi-arrow-down-bold">
<q-btn
dense
size="12px"
flat
round
:color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
:disable="rows.length == props.rowIndex + 1"
@click="upDown(props, false)"
icon="mdi-arrow-down-bold"
>
<!-- <q-tooltip>เลอนลำดบลง</q-tooltip> -->
</q-btn>
</q-td>
<q-td auto-width>
<q-btn dense size="12px" flat round color="red" @click="dialogDeleteData(props.row.personalId)"
icon="mdi-delete">
<q-btn
v-if="props.row.salaryAmount === null"
dense
size="12px"
flat
round
color="blue"
@click="selectModal(props.row)"
icon="mdi-cash-multiple"
>
<q-tooltip>เงนเดอน</q-tooltip>
</q-btn>
<q-btn
v-else
dense
size="12px"
flat
round
color="primary"
@click="selectModal(props.row)"
icon="mdi-information-outline"
>
<q-tooltip>เงนเดอน</q-tooltip>
</q-btn>
</q-td>
<q-td auto-width>
<q-btn
dense
size="12px"
flat
round
color="red"
@click="dialogDeleteData(props.row.personalId)"
icon="mdi-delete"
>
<q-tooltip>ลบขอม</q-tooltip>
</q-btn>
</q-td>
@ -62,9 +145,24 @@ div
</div>
<q-separator />
<div class="flex justify-end q-pa-sm q-gutter-sm">
<q-btn dense outline color="primary" icon="chevron_left" @click="previous" class="q-pr-md" label="กรอกรายละเอียด">
<q-btn
dense
outline
color="primary"
icon="chevron_left"
@click="previous"
class="q-pr-md"
label="กรอกรายละเอียด"
>
</q-btn>
<q-btn dense unelevated label="บันทึก" color="public" @click="save" class="q-px-md"><!-- icon="mdi-content-save-outline"
<q-btn
dense
unelevated
label="บันทึก"
color="public"
@click="save"
class="q-px-md"
><!-- icon="mdi-content-save-outline"
<q-tooltip>นท</q-tooltip> -->
</q-btn>
<!-- <q-btn dense flat round color="primary" icon="chevron_right" @click="next">
@ -83,22 +181,44 @@ div
<div class="col-xs-12">
<div class="col-12 row q-py-sm items-center q-col-gutter-sm">
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input outlined dense lazy-rules v-model="modalData.salaryAmount"
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]" :label="`${'เงินเดือน'}`" type="number"
hide-bottom-space />
<q-input
outlined
dense
lazy-rules
v-model.number="modalData.salaryAmount"
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
:label="`${'เงินเดือน'}`"
type="text"
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input outlined dense lazy-rules v-model="modalData.positionSalaryAmount"
:label="`${'เงินประจำตำแหน่ง'}`" type="number" hide-bottom-space />
<q-input
outlined
dense
lazy-rules
v-model="modalData.positionSalaryAmount"
:label="`${'เงินประจำตำแหน่ง'}`"
type="number"
hide-bottom-space
/>
<!-- :rules="[
(val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
]" -->
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input outlined dense lazy-rules v-model="modalData.mouthSalaryAmount"
:label="`${'เงินค่าตอบแทนรายเดือน'}`" type="number" hide-bottom-space />
<q-input
outlined
dense
lazy-rules
v-model="modalData.mouthSalaryAmount"
:label="`${'เงินค่าตอบแทนรายเดือน'}`"
type="number"
hide-bottom-space
/>
<!-- :rules="[
(val) => !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
]" -->
@ -109,7 +229,14 @@ div
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn dense unelevated label="บันทึก" color="public" @click="saveModal" class="q-px-md"><!-- icon="mdi-content-save-outline"
<q-btn
dense
unelevated
label="บันทึก"
color="public"
@click="saveModal"
class="q-px-md"
><!-- icon="mdi-content-save-outline"
<q-tooltip>นท</q-tooltip> -->
</q-btn>
</q-card-actions>
@ -123,12 +250,24 @@ div
<DialogHeader tittle="รายชื่อในการออกคำสั่ง" :close="modalAddChange" />
<q-separator />
<q-card-section class="q-pa-sm bg-grey-1">
<d-table :rows="rows2" :columns="columns" :visible-columns="visibleColumns" :filter="filter" row-key="name"
selection="multiple" v-model:selected="selected">
<d-table
:rows="rows2"
:columns="columns"
:visible-columns="visibleColumns"
:filter="filter"
row-key="name"
selection="multiple"
v-model:selected="selected"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width>
<q-checkbox keep-color color="primary" dense v-model="props.selected" />
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
</q-th>
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
@ -138,17 +277,33 @@ div
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td>
<q-checkbox keep-color color="primary" dense v-model="props.selected" />
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">{{ col.name == "no" ? props.rowIndex + 1 :
col.value }}</q-td>
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>{{ col.name == "no" ? props.rowIndex + 1 : col.value }}</q-td
>
</q-tr>
</template>
</d-table>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn dense unelevated label="บันทึก" color="public" @click="saveModalAdd" class="q-px-md"><!-- icon="mdi-content-save-outline"
<q-btn
dense
unelevated
label="บันทึก"
color="public"
@click="saveModalAdd"
class="q-px-md"
><!-- icon="mdi-content-save-outline"
<q-tooltip>นท</q-tooltip> -->
</q-btn>
</q-card-actions>
@ -183,15 +338,25 @@ const props = defineProps({
const next = () => props.next();
const previous = () => props.previous();
const mixin = useCounterMixin(); //
const { dialogMessageNotify, dialogConfirm, dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
const {
dialogMessageNotify,
dialogConfirm,
dialogRemove,
messageError,
showLoader,
hideLoader,
success,
} = mixin;
const route = useRoute();
const $q = useQuasar();
const salaryAmount = ref<number>();
const positionSalaryAmount = ref<number>();
const mouthSalaryAmount = ref<number>();
const modalData = ref<any>({
salaryAmount: 0,
positionSalaryAmount: 0,
mouthSalaryAmount: 0,
salaryAmount: null,
positionSalaryAmount: null,
mouthSalaryAmount: null,
});
const myForm = ref<QForm | null>(null);
const myFormAdd = ref<QForm | null>(null);
@ -251,8 +416,8 @@ const conditionData = async () => {
const id = route.params.orderid
? route.params.orderid.toString()
: localStorage.getItem("orderId")
? localStorage.getItem("orderId")
: null;
? localStorage.getItem("orderId")
: null;
if (id !== null) {
await getData(id);
}
@ -275,9 +440,12 @@ const getData = async (id: string) => {
selectStatus: r.selectStatus !== null ? r.selectStatus : false,
sequence: r.sequence !== null ? r.sequence : 0,
refRecordId: r.refRecordId,
salaryAmount: r.salaryAmount !== 0 ? r.salaryAmount : null,
positionSalaryAmount: r.positionSalaryAmount!== 0 ? r.positionSalaryAmount : null,
monthSalaryAmount: r.monthSalaryAmount!== 0 ? r.monthSalaryAmount : null,
});
});
// console.log("list", list);
console.log("list", list);
rows.value = list;
selected.value = rows.value;
})
@ -306,10 +474,7 @@ const getData = async (id: string) => {
// };
const dialogDeleteData = async (id: string) => {
dialogRemove(
$q,
() => deleteData(id),
);
dialogRemove($q, () => deleteData(id));
};
const deleteData = async (id: string) => {
@ -415,12 +580,13 @@ const fetchSalary = async (personalId: string) => {
.get(config.API.salaryOrder(personalId))
.then((res: any) => {
console.log(res);
let salary = res.data.result;
const data = res.data.result;
modalData.value = {
salaryAmount: salary.salaryAmount,
positionSalaryAmount: salary.positionSalaryAmount,
mouthSalaryAmount: salary.monthSalaryAmount,
salaryAmount: data.salaryAmount !== 0 ? data.salaryAmount:null,
positionSalaryAmount: data.positionSalaryAmount !== 0 ? data.salaryAmount:null,
mouthSalaryAmount: data.monthSalaryAmount !== 0 ? data.salaryAmount:null,
};
console.log("data", modalData.value);
})
.catch((e) => {
console.log(e);
@ -436,27 +602,24 @@ const putSalary = async (salary: any) => {
positionSalaryAmount: Number(salary.positionSalaryAmount),
monthSalaryAmount: Number(salary.mouthSalaryAmount),
};
dialogConfirm(
$q,
async () => {
showLoader()
await http
.put(config.API.salaryOrder(personalId.value), modalData.value)
.then((res: any) => {
console.log(res);
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((e) => {
console.log(e);
messageError($q, e);
})
.finally(async () => {
await conditionData();
modal.value = false;
hideLoader()
});
},
);
dialogConfirm($q, async () => {
showLoader();
await http
.put(config.API.salaryOrder(personalId.value), modalData.value)
.then((res: any) => {
console.log(res);
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((e) => {
console.log(e);
messageError($q, e);
})
.finally(async () => {
await conditionData();
modal.value = false;
hideLoader();
});
});
};
const modalAddChange = async () => {
@ -465,8 +628,8 @@ const modalAddChange = async () => {
const id = route.params.orderid
? route.params.orderid.toString()
: localStorage.getItem("orderId")
? localStorage.getItem("orderId")
: null;
? localStorage.getItem("orderId")
: null;
if (id !== null) {
await fetchaddlist(id);
}
@ -512,9 +675,8 @@ const saveModalAdd = () => {
addlist(data);
},
"ยืนยันการเพิ่มรายชื่อออกคำสั่ง",
"ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?",
"ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?"
);
}
});
}
@ -523,8 +685,8 @@ const addlist = async (data: Object) => {
const id = route.params.orderid
? route.params.orderid.toString()
: localStorage.getItem("orderId")
? localStorage.getItem("orderId")
: null;
? localStorage.getItem("orderId")
: null;
if (id !== null) {
await http
.post(config.API.personsOrder(id), data)
@ -548,19 +710,12 @@ const click = (e: any) => {
const save = () => {
if (selected.value.length > 0) {
dialogConfirm(
$q,
() => {
success($q, "บันทึกข้อมูลสำเร็จ");
next();
},
);
dialogConfirm($q, () => {
success($q, "บันทึกข้อมูลสำเร็จ");
next();
});
} else {
dialogMessageNotify(
$q,
"กรุณาเลือกรายชื่อ",
);
dialogMessageNotify($q, "กรุณาเลือกรายชื่อ");
}
};
@ -583,4 +738,4 @@ const getClass = (val: boolean) => {
};
};
</script>
<style lang="scss"></style>
<style lang="scss"></style>