Template สำหรับลงในตำแหน่ง/เงินเดือน API
This commit is contained in:
STW_TTTY\stwtt
parent
4c4cd03f0b
commit
1267b04af3
3 changed files with 194 additions and 126 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, reactive } from "vue";
|
||||
import { ref, onMounted, reactive, watch } from "vue";
|
||||
import { useQuasar, type QTableProps } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
|
|
@ -9,12 +9,13 @@ import { useCounterMixin } from "@/stores/mixin";
|
|||
import { useDataStore } from "@/modules/05_command/stores/main";
|
||||
|
||||
import type {
|
||||
ActiveOptions,
|
||||
CommandSysType,
|
||||
ListTemplateSalary,
|
||||
DateOption,
|
||||
ActiveOptions,
|
||||
} from "@/modules/05_command/interface/index/Main";
|
||||
|
||||
import Header from "@/components/DialogHeader.vue";
|
||||
import { options } from "@fullcalendar/core/preact";
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
|
|
@ -28,20 +29,39 @@ const {
|
|||
messageError,
|
||||
} = mixin;
|
||||
|
||||
const filter = ref<string>(""); // ตัวแปร ฟิลเตอร์
|
||||
const listOrder = ref<DateOption[]>([]);
|
||||
const activeOrderId = ref<string>(""); // ตัวแปรเก็บ id เพื่อเอาไป = class
|
||||
const total = ref<number>(0);
|
||||
const totalList = ref<number>(1);
|
||||
const pagination = ref({
|
||||
sortBy: "createdAt",
|
||||
descending: true,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
});
|
||||
|
||||
const filter = ref<string>(""); // ตัวแปร ฟิลเตอร์
|
||||
const listOrder = ref<CommandSysType[]>([]);
|
||||
const activeOrderId = ref<string>(""); // ตัวแปรเก็บ id เพื่อเอาไป = class
|
||||
const isActive = ref<boolean>(true); // สถานะการใช้งาน
|
||||
const isActiveOption = ref<ActiveOptions[]>([
|
||||
{
|
||||
value: true,
|
||||
label: "ใช้งาน",
|
||||
},
|
||||
{
|
||||
value: false,
|
||||
label: "ไม่ได้ใช้งาน",
|
||||
},
|
||||
]);
|
||||
const dataForm = reactive<ListTemplateSalary>({
|
||||
id: null,
|
||||
id: '',
|
||||
name: "",
|
||||
status: false,
|
||||
isActive: false,
|
||||
});
|
||||
const isEdit = ref<boolean>(false); //เก็บ true/false เช็คแก้ไข
|
||||
const dialogForm = ref<boolean>(false); // model คำสั่ง
|
||||
|
||||
const rows = ref<ListTemplateSalary[]>([]);
|
||||
const visibleColumns = ref<String[]>(["no", "name", "status"]);
|
||||
const visibleColumns = ref<String[]>(["no", "name", "isActive"]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
|
|
@ -55,7 +75,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
{
|
||||
name: "name",
|
||||
align: "left",
|
||||
label: "ชื่อ",
|
||||
label: "ข้อความ Template สำหรับลงในตำแหน่ง/เงินเดือน",
|
||||
sortable: true,
|
||||
field: "name",
|
||||
headerStyle: "font-size: 14px",
|
||||
|
|
@ -64,11 +84,11 @@ const columns = ref<QTableProps["columns"]>([
|
|||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "status",
|
||||
name: "isActive",
|
||||
align: "center",
|
||||
label: "สถานะการใช้งาน",
|
||||
sortable: false,
|
||||
field: "status",
|
||||
field: "isActive",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
|
|
@ -86,7 +106,7 @@ function onDialogAdd() {
|
|||
function onDialogEdit(data: ListTemplateSalary) {
|
||||
dataForm.id = data.id;
|
||||
dataForm.name = data.name;
|
||||
dataForm.status = data.status;
|
||||
dataForm.isActive = data.isActive;
|
||||
|
||||
isEdit.value = true;
|
||||
dialogForm.value = true;
|
||||
|
|
@ -98,21 +118,27 @@ function onDialogEdit(data: ListTemplateSalary) {
|
|||
*/
|
||||
function onDelete(id: string) {
|
||||
dialogRemove($q, () => {
|
||||
// http
|
||||
// .delete(config.API.)
|
||||
// .then((res) => {})
|
||||
// .catch((e) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(() => {});
|
||||
showLoader();
|
||||
http
|
||||
.delete(config.API.commandSalaryById(id))
|
||||
.then(async (res) => {
|
||||
success($q, "ลบข้อมูลเสร็จสิ้น");
|
||||
await fetchSalaryList();
|
||||
hideLoader();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
hideLoader();
|
||||
})
|
||||
.finally(() => {});
|
||||
});
|
||||
}
|
||||
|
||||
/** ปิด dialog */
|
||||
function closeDialog() {
|
||||
dataForm.id = null;
|
||||
dataForm.id = "";
|
||||
dataForm.name = "";
|
||||
dataForm.status = false;
|
||||
dataForm.isActive = false;
|
||||
|
||||
isEdit.value = false;
|
||||
dialogForm.value = false;
|
||||
|
|
@ -120,13 +146,33 @@ function closeDialog() {
|
|||
|
||||
/** บันทึกข้อมูล dialog */
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, () => {});
|
||||
dialogConfirm($q, () => {
|
||||
const url = isEdit.value
|
||||
? config.API.commandSalaryById(dataForm.id)
|
||||
: config.API.commandSalary;
|
||||
showLoader();
|
||||
http[isEdit.value ? "put" : "post"](url, {
|
||||
name: dataForm.name,
|
||||
commandSysId: activeOrderId.value,
|
||||
isActive: dataForm.isActive,
|
||||
})
|
||||
.then(async (res) => {
|
||||
closeDialog();
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
await fetchSalaryList();
|
||||
hideLoader();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
hideLoader();
|
||||
})
|
||||
.finally(() => {});
|
||||
});
|
||||
}
|
||||
|
||||
/** เก็บ id list คำสั่งที่เลือก เพื่อใช้ class */
|
||||
function selectInbox(data: DateOption) {
|
||||
function selectInbox(data: CommandSysType) {
|
||||
activeOrderId.value = data.id;
|
||||
|
||||
fetchSalaryList();
|
||||
}
|
||||
|
||||
|
|
@ -135,96 +181,62 @@ function selectInbox(data: DateOption) {
|
|||
*/
|
||||
async function fetchSalaryList() {
|
||||
showLoader();
|
||||
setTimeout(() => {
|
||||
rows.value = [
|
||||
{
|
||||
id: 1,
|
||||
name: "เลื่อนเงินเดือน",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "เลื่อนเงินเดือน (ดีเด่น)",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "เลื่อนเงินเดือน (เพิ่มเติม)",
|
||||
status: false,
|
||||
},
|
||||
|
||||
{
|
||||
id: 4,
|
||||
name: "ปรับเงินเดือน",
|
||||
status: true,
|
||||
},
|
||||
|
||||
{
|
||||
id: 5,
|
||||
name: "ปรับเงินเดือนเพิ่มเติมตามคุณวุฒิการศึกษา",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "ปรับเงินเดือนเพิ่มเติมตามคุณวุฒิการศึกษา (เพิ่มเติม)",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "เลื่อนเงินเดือนและให้ข้าราชการ กทม. สามัญได้รับเงินเดือนสูงกว่าขั้นสูงของตำแหน่งที่ได้รับแต่งตั้ง",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: "เลื่อนเงินเดือนกรณีพิเศษให้แก่ผู้ปฏิบัติงานด้านยาเสพติด",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: "{ประเภทตำแหน่ง} {ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
name: "แต่งตั้งข้าราชการ {ประเภทตำแหน่ง} {ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
name: "แก้ไขคำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
|
||||
status: true,
|
||||
},
|
||||
];
|
||||
hideLoader();
|
||||
}, 1000);
|
||||
// showLoader();
|
||||
// await http
|
||||
// .get(config.API.commandType)
|
||||
// .then(async (res) => {
|
||||
// lists.value = res.data.result.map((item: any) => {
|
||||
// return {
|
||||
// id: item.id,
|
||||
// name: item.name,
|
||||
// status: true,
|
||||
// };
|
||||
// });
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// messageError($q, err);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// hideLoader();
|
||||
// });
|
||||
await http
|
||||
.get(
|
||||
config.API.commandSalaryDetail(
|
||||
pagination.value.page,
|
||||
pagination.value.rowsPerPage,
|
||||
isActive.value,
|
||||
activeOrderId.value
|
||||
)
|
||||
)
|
||||
.then(async (res) => {
|
||||
totalList.value = Math.ceil(
|
||||
res.data.result.total / pagination.value.rowsPerPage
|
||||
);
|
||||
total.value = res.data.result.total;
|
||||
rows.value = res.data.result.commandSalarys;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/** ดึงข้อมูล list */
|
||||
async function getMainData() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.commandSysList)
|
||||
.then(async (res) => {
|
||||
const data = await res.data.result;
|
||||
listOrder.value = data;
|
||||
hideLoader();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
hideLoader();
|
||||
})
|
||||
.finally(() => {});
|
||||
}
|
||||
|
||||
function updatePagination(newPagination: any) {
|
||||
pagination.value.page = 1;
|
||||
pagination.value.rowsPerPage = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => pagination.value.rowsPerPage,
|
||||
async () => {
|
||||
await fetchSalaryList();
|
||||
}
|
||||
);
|
||||
|
||||
/** เริ่มเมื่อโหลดหน้านี้*/
|
||||
onMounted(() => {
|
||||
const data = [
|
||||
{ id: "1", name: "บรรจุ แต่งตั้ง" },
|
||||
{ id: "2", name: "เงินเดือน" },
|
||||
{ id: "3", name: "ลงโทษวินัย" },
|
||||
];
|
||||
listOrder.value = data;
|
||||
getMainData();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -253,7 +265,7 @@ onMounted(() => {
|
|||
>
|
||||
<q-item-section>
|
||||
<q-item-label>
|
||||
{{ item.name }}
|
||||
{{ item.sysName }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
|
@ -269,6 +281,21 @@ onMounted(() => {
|
|||
<div class="row q-pa-sm q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<div class="row q-gutter-sm">
|
||||
<div class="col-3">
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
v-model="isActive"
|
||||
class="inputgreen"
|
||||
label="สถานะการใช้งาน"
|
||||
:options="isActiveOption"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
emit-value
|
||||
map-options
|
||||
@update:model-value="fetchSalaryList"
|
||||
></q-select>
|
||||
</div>
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
|
|
@ -323,8 +350,25 @@ onMounted(() => {
|
|||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
:rows-per-page-options="[1, 25, 50, 100]"
|
||||
@update:pagination="updatePagination"
|
||||
:visible-columns="visibleColumns"
|
||||
>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ total }} รายการ
|
||||
<q-pagination
|
||||
v-model="pagination.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(totalList)"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
:max-pages="5"
|
||||
@update:model-value="fetchSalaryList"
|
||||
></q-pagination>
|
||||
</template>
|
||||
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th auto-width></q-th>
|
||||
|
|
@ -366,16 +410,17 @@ onMounted(() => {
|
|||
:props="props"
|
||||
>
|
||||
<div v-if="col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
{{
|
||||
(pagination.page - 1) * pagination.rowsPerPage +
|
||||
props.rowIndex +
|
||||
1
|
||||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'status'">
|
||||
<div v-else-if="col.name == 'isActive'">
|
||||
<q-icon
|
||||
:color="props.row.status ? 'green' : 'orange'"
|
||||
:name="
|
||||
props.row.status
|
||||
? 'mdi-check-circle'
|
||||
: 'mdi-minus-circle'
|
||||
"
|
||||
size="sm"
|
||||
:color="props.row.isActive ? 'teal' : 'orange'"
|
||||
:name="props.row.isActive ? 'mdi-check' : 'mdi-close'"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
|
|
@ -411,7 +456,9 @@ onMounted(() => {
|
|||
<q-card class="col-12" style="min-width: 30%">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<Header
|
||||
:tittle="isEdit ? 'แก้ไขคำสั่ง' : 'เพิ่มคำสั่ง'"
|
||||
:tittle="`${
|
||||
isEdit ? 'แก้ไข' : 'เพิ่ม'
|
||||
} Template สำหรับลงในตำแหน่ง/เงินเดือน`"
|
||||
:close="closeDialog"
|
||||
/>
|
||||
<q-separator />
|
||||
|
|
@ -433,7 +480,7 @@ onMounted(() => {
|
|||
<div class="row items-center justify-between border_custom">
|
||||
<p class="q-ma-none">สถานะการใช้งาน</p>
|
||||
<label :class="`toggle-control`">
|
||||
<input type="checkbox" v-model="dataForm.status" />
|
||||
<input type="checkbox" v-model="dataForm.isActive" />
|
||||
<span class="control"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue