PlacementDetail page.(Layout)

This commit is contained in:
setthawutttty 2023-06-06 14:32:36 +07:00
parent 9be531bd01
commit 99714c555e
5 changed files with 699 additions and 3 deletions

View file

@ -1,5 +1,95 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import { reactive } from "vue";
import { defineAsyncComponent } from "@vue/runtime-core";
const itemTop = reactive([
{
id: 1,
num: 7,
title: "จำนวนทั้งหมด",
color: "#016987",
},
{
id: 2,
num: 3,
title: "ยังไม่บรรจุ",
color: "#02A998",
},
{
id: 3,
num: 3,
title: "เตรียมบรรจุ",
color: "#2EA0FF",
},
{
id: 4,
num: 3,
title: "บรรจุเเล้ว",
color: "#4154B3",
},
{
id: 5,
num: 3,
title: "สละสิทธิ์",
color: "#FF5C5F",
},
]);
const AddTablePosition = defineAsyncComponent(
() => import("@/modules/05_placement/components/PlacementTable.vue")
);
</script>
<template>
<h1>test</h1>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row">
<div class="q-py-md row col-12 no-wrap">
<hr
class="q-separator q-separator--vertical gt-sm"
aria-orientation="vertical"
style="width: 2px"
/>
<div class="col-12 row bg-white">
<div class="fit q-pa-md">
<div class="row col-12 q-col-gutter-md fit">
<div
class=""
v-for="item in itemTop"
:key="item.id"
style="width: 15%"
>
<div
class="q-card q-card--bordered q-card--flat no-shadow row fit cardNum items-center q-pa-sm"
>
<div class="col-12 row items-center q-pa-sm">
<div
class="col-12 text-h5 text-weight-bold"
:style="{ color: item.color }"
>
{{ item.num }}
</div>
<div class="col-12 text-dark ellipsis">
{{ item.title }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
<div>
<AddTablePosition class="q-pa-none" />
</div>
</q-card>
</template>
<style lang="scss"></style>
<style lang="scss">
.cardNum {
border-radius: 5px;
/* border-left: 3px solid #016987 !important; */
padding-left: 8px;
}
</style>

View file

@ -0,0 +1,143 @@
<script setup lang="ts">
import { ref, defineComponent, h } from "vue";
import Table from "@/modules/05_placement/components/PlacementTableView.vue";
import { useQuasar, QForm } from "quasar";
import type { TableName } from "@/modules/05_placement/interface/request/placement";
import type { QTableProps } from "quasar";
const editvisible = ref<boolean>(false);
const myForm = ref<QForm | null>(null);
const edit = ref<boolean>(false);
const columns = ref<QTableProps["columns"]>([
{
name: "position",
align: "left",
label: "ลำดับ",
sortable: true,
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
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",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
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",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
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" }),
},
{
name: "chackList",
align: "left",
label: "",
sortable: true,
field: "chackList",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const rows = [{
position: 1,
Name: "setthawut",
ExamOrder: 1,
Unit: "chamomind",
ReportingDate: "30 พ.ค. 2566", //
BMAOfficer: true,
Status: "บรรจุเเล้ว",
chackList: "เว้นไว้"
},
{
position: 1,
Name: "setthawut",
ExamOrder: 1,
Unit: "chamomind",
ReportingDate: "30 พ.ค. 2566", //
BMAOfficer: true,
Status: "บรรจุเเล้ว",
chackList: "เว้นไว้"
},
];
const clickCancel = async () => {
editvisible.value = false;
};
</script>
<template>
<q-form ref="myForm">
<Table
:rows="rows"
:columns="columns"
v-model:editvisible="editvisible"
:cancel="clickCancel"
:history="true"
:boss="true"
:saveNoDraft="true"
/>
</q-form>
</template>

View file

@ -0,0 +1,425 @@
<template>
<div class="q-px-md q-pb-md">
<div class="col-12 row q-py-sm" v-if="nornmalData == false">
<q-btn
v-if="!editvisible == true && publicNoBtn == false"
flat
round
:disabled="editvisible == true"
:color="editvisible == true ? 'grey-7' : 'primary'"
@click="edit"
icon="mdi-pencil-outline"
>
<q-tooltip>แกไขขอม</q-tooltip>
</q-btn>
<q-btn
v-else
flat
round
:disabled="editvisible == false"
:outline="editvisible == false"
:color="editvisible == false ? 'grey-7' : 'red'"
@click="cancel()"
icon="mdi-undo"
>
<q-tooltip>ยกเล</q-tooltip>
</q-btn>
<div class="q-px-sm">
<q-btn
flat
round
:disabled="editvisible == false"
:color="editvisible == false ? 'grey-7' : 'public'"
@click="add"
icon="mdi-content-save-outline"
>
<q-tooltip>นทกขอม</q-tooltip>
</q-btn>
</div>
<q-space />
<div class="items-center" style="display: flex">
<div
class="row items-center"
style="display: flex"
v-if="publicData == false && publicNoBtn == false"
>
</div>
<q-input
standout
dense
:model-value="inputfilter"
ref="filterRef"
@update:model-value="updateInput"
outlined
debounce="300"
placeholder="ค้นหา"
style="max-width: 200px"
class="q-ml-sm"
>
<template v-slot:append>
<q-icon v-if="inputfilter == ''" name="search" />
<q-icon
v-if="inputfilter !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<!-- แสดง table ใน คอลมน -->
<q-select
:model-value="inputvisible"
@update:model-value="updateVisible"
:display-value="$q.lang.table.columns"
multiple
outlined
dense
:options="attrs.columns"
options-dense
option-value="name"
map-options
emit-value
style="min-width: 150px"
class="gt-xs q-ml-sm"
/>
</div>
</div>
<!-- header บน table นหา แสดงคอลมน (status nornmalData true) -->
<div class="col-12 row q-py-sm items-center" v-if="nornmalData == true">
<span class="text-subtitle1">{{ titleText }}</span>
<!-- <q-select
:model-value="inputvisibleFilter"
:options="optionsFilter"
style="min-width: 150px"
class="gt-xs q-ml-sm"
/> -->
<q-select
dense
outlined
:model-value="inputvisibleFilter"
:options="optionsFilter"
class="col-xs-12 col-sm-4 col-md-3"
option-value="id"
option-label="name"
map-options
emit-value
@update:model-value="updateVisibleFilter"
v-if="optionsFilter != undefined && optionsFilter.length > 0"
/>
<q-space />
<div class="items-center" style="display: flex">
<!-- นหาขอความใน table -->
<q-input
standout
dense
:model-value="inputfilter"
ref="filterRef"
@update:model-value="updateInput"
outlined
debounce="300"
placeholder="ค้นหา"
style="max-width: 200px"
class="q-ml-sm"
>
<template v-slot:append>
<q-icon v-if="inputfilter == ''" name="search" />
<q-icon
v-if="inputfilter !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<!-- แสดงคอลมนใน table -->
<q-select
:model-value="inputvisible"
@update:model-value="updateVisible"
:display-value="$q.lang.table.columns"
multiple
outlined
dense
:options="attrs.columns"
options-dense
option-value="name"
map-options
emit-value
style="min-width: 150px"
class="gt-xs q-ml-sm"
/>
</div>
</div>
<q-table
ref="table"
flat
bordered
class="custom-header-table"
v-bind="attrs"
virtual-scroll
:virtual-scroll-sticky-size-start="48"
dense
:pagination-label="paginationLabel"
:pagination="initialPagination"
:rows-per-page-options="paging == true ? [25, 50, 100, 500] : []"
>
<!-- :pagination="initialPagination" -->
<!-- :rows-per-page-options="[0]" -->
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width v-if="boss == true" />
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th
auto-width
v-if="
editvisible == true || nextPageVisible == true || history == true
"
/>
</q-tr>
</template>
<!-- สำหรบเรยกใช template วขางนอก -->
<template #body="props">
<slot v-bind="props" name="columns"></slot>
</template>
</q-table>
</div>
</template>
<script setup lang="ts">
import { ref, useAttrs } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
const $q = useQuasar();
const mixin = useCounterMixin(); //
const { dialogMessage } = mixin;
const attrs = ref<any>(useAttrs());
const table = ref<any>(null);
const filterRef = ref<any>(null);
const modalPublish = ref<boolean>(false);
const modalDelete = ref<boolean>(false);
const props = defineProps({
inputfilter: String,
inputvisible: Array,
inputvisibleFilter: String,
editvisible: Boolean,
titleText: String,
optionsFilter: {
type: Array,
defualt: [],
},
boss: {
type: Boolean,
defualt: false,
},
saveNoDraft: {
type: Boolean,
defualt: false,
},
history: {
type: Boolean,
defualt: false,
},
paging: {
type: Boolean,
defualt: false,
},
nornmalData: {
type: Boolean,
defualt: false,
},
nextPageVisible: {
type: Boolean,
defualt: false,
},
publicData: {
type: Boolean,
defualt: true,
required: false,
},
updateData: {
type: Boolean,
defualt: true,
required: false,
},
publicNoBtn: {
type: Boolean,
defualt: false,
},
add: {
type: Function,
default: () => console.log("not function"),
},
edit: {
type: Function,
default: () => console.log("not function"),
},
save: {
type: Function,
default: () => console.log("not function"),
},
deleted: {
type: Function,
default: () => console.log("not function"),
},
cancel: {
type: Function,
default: () => console.log("not function"),
},
publish: {
type: Function,
default: () => console.log("not function"),
},
validate: {
type: Function,
default: () => console.log("not function"),
},
});
const initialPagination = ref<any>({
// descending: false,
rowsPerPage: props.paging == true ? 25 : 0,
});
const emit = defineEmits([
"update:inputfilter",
"update:inputvisible",
"update:editvisible",
"update:titleText",
"update:inputvisibleFilter",
]);
const updateEdit = (value: any) => {
emit("update:editvisible", value);
};
const updateInput = (value: any) => {
emit("update:inputfilter", value);
};
const updateVisible = (value: any) => {
emit("update:inputvisible", value);
};
const updateVisibleFilter = (value: any) => {
emit("update:inputvisibleFilter", value);
};
const paginationLabel = (start: string, end: string, total: string) => {
if (props.paging == true)
return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
else return start + "-" + end + " ใน " + total;
};
const checkSave = () => {
props.validate();
props.save();
// if (myForm.value !== null) {
// myForm.value.validate().then((success) => {
// if (success) {
// }
// });
// }
};
const publishModal = () => {
props.validate();
const filter = attrs.value.rows.filter((r: any) => r.name == "");
if (filter.length == 0 || attrs.value.rows.length == 0) {
// modalPublish.value = true;
dialogMessage(
$q,
"ต้องการเผยแพร่ข้อมูลนี้หรือไม่?",
"ข้อมูลที่กำลังถูกเผยแพร่นี้จะมีผลใช้งานทันที",
"public",
"เผยแพร่",
"public",
props.publish,
undefined
);
}
};
const DeleteModal = () => {
// modalDelete.value = true;
dialogMessage(
$q,
"ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?",
"ข้อมูลบันทึกร่างที่กำลังถูกลบนี้จะมีผลใช้งานทันที",
"mdi-file-remove-outline",
"ลบบันทึก",
"red",
props.deleted,
undefined
);
};
const edit = async () => {
updateEdit(!props.editvisible);
props.edit();
};
const add = async () => {
// if (myForm.value !== null) {
// myForm.value.validate();
// }
props.validate();
props.add();
await table.value.lastPage();
await table.value.scrollTo(attrs.value.rows.length - 1);
};
const deleted = async () => {
// const deletedF = () => {
if (props.publicNoBtn === false) {
updateEdit(false);
}
props.deleted();
};
const resetFilter = () => {
// reset X
emit("update:inputfilter", "");
filterRef.value.focus();
};
</script>
<style lang="scss">
.icon-color {
color: #4154b3;
}
.custom-header-table {
max-height: 64vh;
.q-table tr:nth-child(odd) td {
background: white;
}
.q-table tr:nth-child(even) td {
background: #f8f8f8;
}
.q-table thead tr {
background: #ecebeb;
}
.q-table thead tr th {
position: sticky;
z-index: 1;
}
/* this will be the loading indicator */
.q-table thead tr:last-child th {
/* height of all previous header rows */
top: 48px;
}
.q-table thead tr:first-child th {
top: 0;
}
}
</style>

View file

@ -0,0 +1,10 @@
interface DataNumObject {
id: number;
count: number;
name: string;
color: string;
}
export type {
DataNumObject,
};

View file

@ -0,0 +1,28 @@
interface TableName {
position: string;
Name: string;
ExamOrder: number;
Unit: string;
ReportingDate: string; //วันที่รายงานตัว
BMAOfficer: boolean;
Status: string;
chackList: any;
}
interface RequestReport2 {
organizationShortNameId: string;
organizationOrganizationId: string;
positionNumId: string;
positionTypeId: string;
positionExecutiveId: string;
positionExecutiveSideId: string;
positionPathId: string;
positionPathSideId: string;
positionLevelId: string;
status: string | null;
}
export type {
TableName,
RequestReport2,
};