update UI - แสดงรายชื่อผู้สอบผ่านในรอบของการสอบคัดเลือก/แข่งขันที่ได้จากระบบ
ปรับในส่วนของการแสดงผลข้อมูลให้ครบตาม design ปรับให้เป็นหน้าฟอร์มกรณีอยู่ในโหมดแก้ไข ปรับการแสดงสถานะและ Action ให้ถกต้อง
This commit is contained in:
parent
b958dfad20
commit
312642f8f6
9 changed files with 576 additions and 575 deletions
514
src/modules/05_placement/components/pass/Table.vue
Normal file
514
src/modules/05_placement/components/pass/Table.vue
Normal file
|
|
@ -0,0 +1,514 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import Table from "@/modules/05_placement/components/pass/TableView.vue";
|
||||
import { useQuasar, QForm } from "quasar";
|
||||
import type { TableName } from "@/modules/05_placement/interface/request/placement";
|
||||
import { usePlacementDataStore } from "@/modules/05_placement/store";
|
||||
import type { QTableProps } from "quasar";
|
||||
import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
|
||||
import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
||||
const editvisible = ref<boolean>(false);
|
||||
const myForm = ref<QForm | null>(null);
|
||||
const edit = ref<boolean>(false);
|
||||
const visibleColumns = ref<String[]>([]);
|
||||
const store = usePlacementDataStore();
|
||||
const filter = ref<string>("");
|
||||
const { placementData } = store;
|
||||
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
|
||||
const modal = ref<boolean>(false); //modal add detail
|
||||
const modal_right = ref<boolean>(false); //modal add detail
|
||||
const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
|
||||
const Name = ref<string>();
|
||||
const positionMasterUserNote = ref<string>();
|
||||
const $q = useQuasar(); // show dialog
|
||||
const files = ref<File[]>([]);
|
||||
const appointModal = ref<boolean>(false);
|
||||
const appoint = ref<any>({
|
||||
Code: '',
|
||||
UnitName: '',
|
||||
PositionNo: '',
|
||||
PositionType: '',
|
||||
PositionManage: '',
|
||||
PositionTypeManage: '',
|
||||
PositionLine: '',
|
||||
Major: '',
|
||||
PositionLevel: ''
|
||||
});
|
||||
|
||||
const saveAppoint = () => {
|
||||
console.log("save appoint===>", appoint.value);
|
||||
}
|
||||
|
||||
const savePostpone = () => {
|
||||
const dataPost = { note: positionMasterUserNote.value, files: files }
|
||||
console.log("save postpone===>", dataPost);
|
||||
positionMasterUserNote.value = '';
|
||||
modal_right.value = false;
|
||||
}
|
||||
|
||||
const saveDisclaim = () => {
|
||||
const dataPost = { note: positionMasterUserNote.value }
|
||||
console.log("save disclaim===>", dataPost);
|
||||
positionMasterUserNote.value = '';
|
||||
modal_right.value = false;
|
||||
}
|
||||
|
||||
const clickEditRow = () => {
|
||||
editRow.value = true;
|
||||
};
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
"full-width inputgreen cursor-pointer": val,
|
||||
"full-width cursor-pointer": !val,
|
||||
};
|
||||
};
|
||||
const selectData = (props: TableName) => {
|
||||
if (editvisible.value == true) {
|
||||
// editRow.value = false;
|
||||
// modalEdit.value = true;
|
||||
modal.value = false;
|
||||
// edit.value = true;
|
||||
// position.value = props.position;
|
||||
Name.value = props.Name;
|
||||
// ExamOrder.value = props.ExamOrder;
|
||||
// Unit.value = props.Unit;
|
||||
// ReportingDate.value = props.ReportingDate;
|
||||
// BMAOfficer.value = props.BMAOfficer;
|
||||
// Status.value = props.Status;
|
||||
// checkList.value = props.checkList;
|
||||
} else {
|
||||
// editRow.value = false;
|
||||
// modalEdit.value = true;
|
||||
modal.value = true;
|
||||
// edit.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
const getNumFile = ref(0);
|
||||
const editDetail = (props: TableName, action: "cancel" | "wait") => {
|
||||
|
||||
if (action === "cancel") {
|
||||
getNumFile.value = 0;
|
||||
editRow.value = false;
|
||||
modalEdit.value = false;
|
||||
modal_right.value = true;
|
||||
edit.value = true;
|
||||
Name.value = props.Name;
|
||||
} else if (action === "wait") {
|
||||
getNumFile.value = 1;
|
||||
editRow.value = false;
|
||||
modalEdit.value = true;
|
||||
modal_right.value = true;
|
||||
edit.value = true;
|
||||
Name.value = props.Name;
|
||||
}
|
||||
|
||||
};
|
||||
placementData.mappingPosition.columns.length == 0
|
||||
? (visibleColumns.value = [
|
||||
"position",
|
||||
"Name",
|
||||
"ExamOrder",
|
||||
"Unit",
|
||||
"ReportingDate",
|
||||
"BMAOfficer",
|
||||
"Status",
|
||||
"checkList",
|
||||
])
|
||||
: (visibleColumns.value = placementData.mappingPosition.columns);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "position",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: true,
|
||||
field: "position",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "Name",
|
||||
align: "left",
|
||||
label: "ชื่อ-สกุล",
|
||||
sortable: true,
|
||||
field: "Name",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "ExamOrder",
|
||||
align: "left",
|
||||
label: "ลำดับที่สอบได้",
|
||||
sortable: true,
|
||||
field: "ExamOrder",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "Unit",
|
||||
align: "left",
|
||||
label: "หน่วยงานที่รับการบรรจุ",
|
||||
sortable: true,
|
||||
field: "Unit",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "ReportingDate",
|
||||
align: "left",
|
||||
label: "วันที่รายงานตัว",
|
||||
sortable: true,
|
||||
field: "ReportingDate",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "BMAOfficer",
|
||||
align: "left",
|
||||
label: "ข้าราชการฯ กทม.",
|
||||
sortable: true,
|
||||
field: "BMAOfficer",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "Status",
|
||||
align: "left",
|
||||
label: "สถานะการบรรจุ",
|
||||
sortable: true,
|
||||
field: "Status",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
const rows = ref<TableName[]>([
|
||||
{
|
||||
Id: "4016500103241",
|
||||
position: 1,
|
||||
Name: "นางสาวกัณฐิมา กาฬสินธุ์",
|
||||
ExamOrder: 1,
|
||||
unitId: "",
|
||||
UnitGroup: "",
|
||||
Unit: "",
|
||||
ReportingDate: "-", //วันที่รายงานตัว
|
||||
BMAOfficer: true,
|
||||
Status: "สละสิทธิ์",
|
||||
checkList: null,
|
||||
},
|
||||
{
|
||||
Id: "4016500092355",
|
||||
position: 2,
|
||||
Name: "นางสาวรัชภรณ์ ภักดี",
|
||||
ExamOrder: 2,
|
||||
unitId: "",
|
||||
UnitGroup: "",
|
||||
Unit: "",
|
||||
ReportingDate: "", //วันที่รายงานตัว
|
||||
BMAOfficer: false,
|
||||
Status: "ยังไม่บรรจุ",
|
||||
checkList: null,
|
||||
},
|
||||
{
|
||||
Id: "4016500086436",
|
||||
position: 3,
|
||||
Name: "นางสาวภาพรรณ ลออ",
|
||||
ExamOrder: 3,
|
||||
unitId: "",
|
||||
UnitGroup: "",
|
||||
Unit: "",
|
||||
ReportingDate: "", //วันที่รายงานตัว
|
||||
BMAOfficer: true,
|
||||
Status: "ยังไม่บรรจุ",
|
||||
checkList: null,
|
||||
},
|
||||
|
||||
{
|
||||
Id: "4016500073585",
|
||||
position: 4,
|
||||
Name: "นางกติมา พนมเทียน",
|
||||
ExamOrder: 4,
|
||||
unitId: "",
|
||||
UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
|
||||
Unit: "นักทรัพยากรบุคคล (กบห.1)",
|
||||
ReportingDate: "2023-05-30", //วันที่รายงานตัว
|
||||
BMAOfficer: true,
|
||||
Status: "เตรียมบรรจุ",
|
||||
checkList: null,
|
||||
},
|
||||
|
||||
{
|
||||
Id: "4016500053234",
|
||||
position: 5,
|
||||
Name: "นางสาววิยฎา ทองเอียด",
|
||||
ExamOrder: 5,
|
||||
unitId: "",
|
||||
UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
|
||||
Unit: "นักทรัพยากรบุคคล (กบห.2)",
|
||||
ReportingDate: "2023-05-30", //วันที่รายงานตัว
|
||||
BMAOfficer: true,
|
||||
Status: "เตรียมบรรจุ",
|
||||
checkList: null,
|
||||
},
|
||||
{
|
||||
Id: "4016500042345",
|
||||
position: 6,
|
||||
Name: "นายศรุณ เจริญเมือง",
|
||||
ExamOrder: 6,
|
||||
unitId: "",
|
||||
UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
|
||||
Unit: "นักทรัพยากรบุคคล (กบห.3)",
|
||||
ReportingDate: "2023-05-30", //วันที่รายงานตัว
|
||||
BMAOfficer: true,
|
||||
Status: "เตรียมบรรจุ",
|
||||
checkList: null,
|
||||
},
|
||||
{
|
||||
Id: "401650002245",
|
||||
position: 7,
|
||||
Name: "นายอภินัน บอบู่",
|
||||
ExamOrder: 7,
|
||||
unitId: "",
|
||||
UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
|
||||
Unit: "นักทรัพยากรบุคคล (กบห.4)",
|
||||
ReportingDate: "2023-05-30", //วันที่รายงานตัว
|
||||
BMAOfficer: true,
|
||||
Status: "บรรจุเเล้ว",
|
||||
checkList: null,
|
||||
},
|
||||
]);
|
||||
|
||||
const clickCancel = async () => {
|
||||
editvisible.value = false;
|
||||
};
|
||||
|
||||
const openAppointModal = (value: any) => {
|
||||
appointModal.value = true
|
||||
editRow.value = true;
|
||||
};
|
||||
|
||||
const clickClose = async () => {
|
||||
if (editRow.value == true) {
|
||||
$q.dialog({
|
||||
title: `ข้อมูลมีการแก้ไข`,
|
||||
message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
|
||||
cancel: "ยกเลิก",
|
||||
ok: "ยืนยัน",
|
||||
persistent: true,
|
||||
}).onOk(async () => {
|
||||
modal_right.value = false;
|
||||
modal.value = false;
|
||||
appointModal.value = false;
|
||||
});
|
||||
} else {
|
||||
modal_right.value = false;
|
||||
modal.value = false;
|
||||
appointModal.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const save = () => {
|
||||
console.log("rows===>", rows.value)
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<q-form ref="myForm">
|
||||
<Table :rows="rows" :columns="columns" :filter="filter" :visible-columns="visibleColumns" v-model:inputfilter="filter"
|
||||
v-model:inputvisible="visibleColumns" v-model:editvisible="editvisible" :cancel="clickCancel" :history="true"
|
||||
:boss="true" :saveNoDraft="true" :add="save">
|
||||
<template #columns="props">
|
||||
<q-tr :props="props">
|
||||
<q-icon class="q-mr-sm" size="15px" color="primary" name="mdi-bookmark" v-if="props.row.isDirector"></q-icon>
|
||||
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props.row)"
|
||||
class="cursor-pointer">
|
||||
<div v-if="col.name == 'BMAOfficer'" class="table_ellipsis">
|
||||
<div>
|
||||
<q-icon v-if="col.value == false" name="mdi-close" color="grey-5" class="text-h5" />
|
||||
<q-icon v-else name="mdi-check" color="positive" class="text-h5" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="col.name == 'Name'" class="table_ellipsis">
|
||||
{{ col.value }}
|
||||
<p>{{ props.row.Id }}</p>
|
||||
</div>
|
||||
<div v-else-if="col.name == 'Unit'" class="table_ellipsis">
|
||||
|
||||
<div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
|
||||
<div @click="openAppointModal">
|
||||
<q-input hide-bottom-space outlined dense lazy-rules v-model="props.row.Unit">
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="bookmark" color="primary" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="props.row.Status == 'ยังไม่บรรจุ' || props.row.Status == 'สละสิทธิ์'">-</div>
|
||||
<div v-else>
|
||||
{{ props.row.UnitGroup }}
|
||||
<p>{{ col.value }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="col.name == 'ReportingDate' && col.value != '-'" class="table_ellipsis">
|
||||
<div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
|
||||
<datepicker :locale="'th'" autoApply :enableTimePicker="false" week-start="0"
|
||||
v-model="props.row.ReportingDate">
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input hide-bottom-space outlined dense lazy-rules :model-value="mixin.date2Thai(col.value)">
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div v-else-if="props.row.Status == 'ยังไม่บรรจุ' || props.row.Status == 'สละสิทธิ์'">-</div>
|
||||
<div v-else>
|
||||
{{ mixin.date2Thai(col.value) }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="table_ellipsis">
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<div v-if="props.row.Status === 'บรรจุเเล้ว' || props.row.Status === 'สละสิทธิ์'">
|
||||
<div></div>
|
||||
</div>
|
||||
<div v-else-if="props.row.Status === 'ยังไม่บรรจุ'">
|
||||
<q-btn color="blue" flat dense round size="14px" icon="mdi-account-alert"
|
||||
@click="editDetail(props.row, 'wait')" />
|
||||
<q-btn color="red" flat dense round size="14px" icon="mdi-account-remove"
|
||||
@click="editDetail(props.row, 'cancel')" />
|
||||
</div>
|
||||
<div v-else align="right">
|
||||
<q-btn color="red" flat dense round size="14px" icon="mdi-account-remove"
|
||||
@click="editDetail(props.row, 'cancel')" />
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</Table>
|
||||
</q-form>
|
||||
|
||||
<q-dialog v-model="appointModal" persistent>
|
||||
<q-card style="width: 800px">
|
||||
<q-form ref="myForm">
|
||||
<DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="clickClose" />
|
||||
<q-separator />
|
||||
<q-card-section>
|
||||
|
||||
<div class="row q-col-gutter-xs">
|
||||
<div class="col">
|
||||
<q-select outlined dense v-model="appoint.Code" label="รหัสส่วนราชการ" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-select outlined dense v-model="appoint.UnitName" label="ชื่อหน่วยงาน" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-col-gutter-xs q-pt-xs">
|
||||
<div class="col">
|
||||
<q-select outlined dense v-model="appoint.PositionNo" label="ตำแหน่งเลขที่" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-select outlined dense v-model="appoint.PositionType" label="ประเภทตำแหน่ง" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-col-gutter-xs q-pt-xs">
|
||||
<div class="col">
|
||||
<q-select outlined dense v-model="appoint.PositionManage" label="ตำแหน่งทางการบริหาร" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-select outlined dense v-model="appoint.PositionTypeManage" label="ด้านทางบริหาร" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-col-gutter-xs q-pt-xs">
|
||||
<div class="col">
|
||||
<q-select outlined dense v-model="appoint.PositionLine" label="ตำแหน่งในสายงาน" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-select outlined dense v-model="appoint.Major" label="ด้าน/สาขา" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-col-gutter-xs q-pt-xs">
|
||||
<div class="col-6">
|
||||
<q-select outlined dense v-model="appoint.PositionLevel" label="ระดับตำแหน่ง" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</q-card-section>
|
||||
|
||||
<q-separator />
|
||||
<DialogFooter v-model:editvisible="edit" v-model:modalEdit="modalEdit" :save="saveAppoint" />
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="width: 800px">
|
||||
<q-form ref="myForm">
|
||||
<!-- :title="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
|
||||
<DialogHeader :title="`รายละเอียดของ${Name}`" :close="clickClose" />
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-sm"> text 5 </q-card-section>
|
||||
<q-separator />
|
||||
<DialogFooter v-model:editvisible="edit" v-model:modalEdit="modalEdit" />
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<q-dialog v-model="modal_right" persistent>
|
||||
<q-card style="width: 800px">
|
||||
<q-form ref="myForm">
|
||||
<!-- :title="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
|
||||
<DialogHeader :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`" :close="clickClose" />
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-sm">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules :readonly="!edit"
|
||||
:borderless="!edit" v-model="positionMasterUserNote" :label="`${'กรอกเหตุผล'}`"
|
||||
@update:modelValue="clickEditRow" type="textarea" />
|
||||
<q-file v-if="getNumFile == 1" v-model="files" dense :label="'เลือกไฟล์เอกสารหลักฐาน'" outlined use-chips
|
||||
multiple class="q-py-sm">
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
<!-- :rules="[(val) => !!val || `${'กรุณากรอกเงื่อนไขตำแหน่ง'}`]" -->
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<DialogFooter v-model:editvisible="edit" v-model:modalEdit="modalEdit"
|
||||
:save="modalEdit ? savePostpone : saveDisclaim" />
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.q-table p {
|
||||
margin-bottom: 0;
|
||||
color: #818181;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue