354 lines
9.9 KiB
Vue
354 lines
9.9 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch } from "vue";
|
|
import { useQuasar } from "quasar";
|
|
import { useRoute } from "vue-router";
|
|
import { checkPermission } from "@/utils/permissions";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
|
|
/** importType*/
|
|
import type { QTableProps } from "quasar";
|
|
import type { Director } from "@/modules/11_discipline/interface/request/disciplinary";
|
|
import type { Directors } from "@/modules/12_evaluatePersonal/interface/response/Main";
|
|
|
|
/** importComponents*/
|
|
import DialogDirector from "@/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogDirector.vue";
|
|
import DialogDuty from "@/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogDuty.vue";
|
|
|
|
/**use*/
|
|
const $q = useQuasar();
|
|
const route = useRoute();
|
|
const mixin = useCounterMixin();
|
|
const {
|
|
showLoader,
|
|
hideLoader,
|
|
messageError,
|
|
dialogConfirm,
|
|
success,
|
|
dialogRemove,
|
|
} = mixin;
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Array,
|
|
default: [],
|
|
},
|
|
fetchData: {
|
|
type: Function,
|
|
default: () => "",
|
|
},
|
|
});
|
|
|
|
const id = ref<string>(route.params.id as string);
|
|
|
|
/** Table กรรมการ */
|
|
const rows = ref<Director[]>([]);
|
|
const columns = ref<QTableProps["columns"]>([
|
|
{
|
|
name: "no",
|
|
align: "left",
|
|
label: "ลำดับ",
|
|
sortable: false,
|
|
field: "no",
|
|
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",
|
|
},
|
|
{
|
|
name: "position",
|
|
align: "left",
|
|
label: "ตำแหน่ง",
|
|
sortable: true,
|
|
field: "position",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
},
|
|
{
|
|
name: "duty",
|
|
align: "left",
|
|
label: "หน้าที่ของกรรมการ",
|
|
sortable: true,
|
|
field: "duty",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
},
|
|
{
|
|
name: "email",
|
|
align: "left",
|
|
label: "อีเมล",
|
|
sortable: true,
|
|
field: "email",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
},
|
|
{
|
|
name: "phone",
|
|
align: "left",
|
|
label: "เบอร์โทรศัพท์",
|
|
sortable: true,
|
|
field: "phone",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
},
|
|
]);
|
|
|
|
//เลือกรายชื่อกรรมการ
|
|
const modalAddDirector = ref<boolean>(false); // popup เพิ่มรายชื่อกรรมการ
|
|
const filter = ref<string>(""); //ค้นหารายชื่อกรรมการ
|
|
const page = ref<number>(1); //หน้า
|
|
const rowsPerPage = ref<number>(10); //จำนวนต่อหน้า
|
|
const maxPage = ref<number>(1); //จำนนวนหน้าทั้งหมด
|
|
const listDirector = ref<Directors[]>([]); //รายชื่อกรรมการ
|
|
const listDirectorData = ref<Directors[]>([]); //รายชื่อกรรมการ
|
|
|
|
/**
|
|
* ฟังก์เปิด popup เพิ่มรายชื่อกรรมการ
|
|
*/
|
|
async function onClickAdd() {
|
|
modalAddDirector.value = true;
|
|
getList();
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ปิด popup เพิ่มรายชื่อกรรมการ
|
|
*/
|
|
function onClickClose() {
|
|
modalAddDirector.value = false;
|
|
}
|
|
|
|
/**
|
|
* function อัดเดท Paging กรรมการ
|
|
* @param rpp ต่อหน้า
|
|
* @param p หน้า
|
|
*/
|
|
async function updatePaging(rpp: number, p: number) {
|
|
page.value = p;
|
|
rowsPerPage.value = rpp;
|
|
}
|
|
|
|
/**
|
|
* function return รายชื่อกรรมการที่เลือก
|
|
* @param data รายชื่อกรรมการที่เลือก
|
|
*/
|
|
function returnDirector(data: Directors[]) {
|
|
const dataList = data.map((item: Directors) => item.id);
|
|
dialogConfirm($q, () => {
|
|
showLoader();
|
|
http
|
|
.put(config.API.evaluationChooseDirectors(id.value), {
|
|
directors: dataList,
|
|
})
|
|
.then(async () => {
|
|
await props.fetchData();
|
|
await success($q, "บันทึกสำเร็จ");
|
|
onClickClose();
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
});
|
|
}
|
|
|
|
/**
|
|
* function เรียกรายชื่อกรรมการ
|
|
*/
|
|
async function getList() {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.evaluateDirectorMain() + `/admin`)
|
|
.then(async (res) => {
|
|
const data = await res.data.result;
|
|
const listData = data.map((item: Directors) => ({
|
|
id: item.id,
|
|
name: `${item.prefix}${item.firstName} ${item.lastName}`,
|
|
createdAt: item.createdAt,
|
|
createdUserId: item.createdUserId,
|
|
lastUpdatedAt: item.lastUpdatedAt,
|
|
lastUpdateUserId: item.lastUpdateUserId,
|
|
createdFullName: item.createdFullName,
|
|
lastUpdateFullName: item.lastUpdateFullName,
|
|
prefix: item.prefix,
|
|
firstName: item.firstName,
|
|
lastName: item.lastName,
|
|
phone: item.phone == "" ? "-" : item.phone,
|
|
email: item.email == "" ? "-" : item.email,
|
|
position: item.position == "" ? "-" : item.position,
|
|
}));
|
|
listDirector.value = listData;
|
|
listDirectorData.value = listData;
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
const directorData = ref<Director>(); //ข้อมูลกรรมการที่ต้องการแก่ไขหน้าที่
|
|
const modalDuty = ref<boolean>(false); //Dailog แก้ไขข้อมูลหน้าที่กรรมการ
|
|
/**
|
|
* เปิด Dialog แก้ไขข้อมูลหน้าที่กรรมการ
|
|
* @param data ข้อมูลกรรมการที่ต้องการแก่ไขหน้าที่
|
|
*/
|
|
function onEditDuty(data: Director) {
|
|
directorData.value = data;
|
|
modalDuty.value = true;
|
|
}
|
|
|
|
function handleDelete(id: string) {
|
|
dialogRemove($q, async () => {
|
|
showLoader();
|
|
try {
|
|
await http.delete(config.API.evaluationMain() + `/del-director/${id}`);
|
|
await props.fetchData();
|
|
await success($q, "ลบสำเร็จ");
|
|
} catch (error) {
|
|
messageError($q, error);
|
|
} finally {
|
|
hideLoader();
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* ทำงานเมื่อ props.data มีการเปลี่ยนแปลง
|
|
*/
|
|
watch(
|
|
() => props.data,
|
|
() => {
|
|
if (props.data) {
|
|
rows.value = props.data.map((item: any) => ({
|
|
id: item.id,
|
|
name: `${item.prefix}${item.firstName} ${item.lastName}`,
|
|
prefix: item.prefix,
|
|
firstName: item.firstName,
|
|
lastName: item.lastName,
|
|
phone: item.phone == "" ? "-" : item.phone,
|
|
email: item.email == "" ? "-" : item.email,
|
|
position: item.position == "" ? "-" : item.position,
|
|
positionName: item.positionName == "-" ? "-" : item.positionName,
|
|
duty: !item.duty ? "-" : item.duty,
|
|
}));
|
|
}
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
|
|
<div
|
|
class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
|
|
>
|
|
กรรมการ
|
|
<q-btn
|
|
v-if="checkPermission($route)?.attrIsUpdate"
|
|
size="12px"
|
|
flat
|
|
round
|
|
dense
|
|
color="primary"
|
|
class="q-ml-sm"
|
|
icon="mdi-plus"
|
|
@click="onClickAdd"
|
|
>
|
|
<q-tooltip>เพิ่มกรรมการ</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
<div class="col-12"><q-separator /></div>
|
|
<div class="col-12 q-pa-sm row">
|
|
<d-table
|
|
ref="table"
|
|
flat
|
|
bordered
|
|
dense
|
|
class="col-12"
|
|
:columns="columns"
|
|
:rows="rows"
|
|
row-key="id"
|
|
:paging="true"
|
|
>
|
|
<template v-slot:header="props">
|
|
<q-tr :props="props">
|
|
<q-th auto-width />
|
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
|
<span class="text-weight-medium">{{ col.label }}</span>
|
|
</q-th>
|
|
</q-tr>
|
|
</template>
|
|
<template v-slot:body="props">
|
|
<q-tr :props="props">
|
|
<q-td auto-width>
|
|
<q-btn
|
|
v-if="checkPermission($route)?.attrIsUpdate"
|
|
flat
|
|
round
|
|
dense
|
|
icon="edit"
|
|
color="edit"
|
|
@click.stop.prevent="onEditDuty(props.row)"
|
|
>
|
|
<q-tooltip>แก้ไขหน้าที่</q-tooltip>
|
|
</q-btn>
|
|
|
|
<q-btn
|
|
v-if="checkPermission($route)?.attrIsDelete"
|
|
flat
|
|
round
|
|
dense
|
|
icon="delete"
|
|
color="red"
|
|
@click="handleDelete(props.row.id)"
|
|
>
|
|
<q-tooltip>ลบ</q-tooltip>
|
|
</q-btn>
|
|
</q-td>
|
|
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
|
<div v-if="col.name == 'no'">
|
|
{{ props.rowIndex + 1 }}
|
|
</div>
|
|
<div v-else>
|
|
{{ col.value ?? "-" }}
|
|
</div>
|
|
</q-td>
|
|
</q-tr>
|
|
</template>
|
|
</d-table>
|
|
</div>
|
|
</q-card>
|
|
|
|
<DialogDirector
|
|
@update:pagination="updatePaging"
|
|
@return-director="returnDirector"
|
|
v-model:Modal="modalAddDirector"
|
|
v-model:filter-keyword2="filter"
|
|
:click-close="onClickClose"
|
|
v-model:rows="listDirector"
|
|
v-model:rows-data="listDirectorData"
|
|
:rows-per-page="rowsPerPage"
|
|
:page="page"
|
|
:max-page="maxPage"
|
|
:selected-row="rows"
|
|
/>
|
|
|
|
<!-- แก้ไขหน้าที่ของกรรมการ -->
|
|
<DialogDuty
|
|
v-model:modal="modalDuty"
|
|
:data="directorData"
|
|
:fetch-data="props.fetchData"
|
|
/>
|
|
</template>
|
|
|
|
<style scoped></style>
|