ปรับ ui วินัย กรรมการ
This commit is contained in:
setthawutttty
parent
bc2d7b8ebf
commit
ce3ad087de
8 changed files with 590 additions and 120 deletions
|
|
@ -19,7 +19,7 @@ import DialogAddPersonal from "@/components/Dialogs/AddPersonal.vue";
|
|||
|
||||
const $q = useQuasar();
|
||||
const fileDocDataUpload = ref<File[]>([]);
|
||||
const channelOptions = ref<DataOption[]>([]);
|
||||
const channelOptions = ref<DataOption[]>([]);
|
||||
/** เรียกใช้ store */
|
||||
const mixin = useCounterMixin();
|
||||
const mainStore = useDisciplineMainStore();
|
||||
|
|
@ -522,6 +522,7 @@ onMounted(() => {
|
|||
</div>
|
||||
<div v-else-if="col.name == 'info'">
|
||||
<router-link
|
||||
target="_blank"
|
||||
:to="`/registry/${props.row.personId}`"
|
||||
><q-icon name="info" color="info" size="sm"
|
||||
><q-tooltip
|
||||
|
|
|
|||
|
|
@ -148,6 +148,7 @@ const objectInvestigate: MyObjectInvestigateRef = {
|
|||
};
|
||||
|
||||
const rows = ref([]);
|
||||
const rowsChack = ref([]);
|
||||
const statusStep = computed(() => {
|
||||
return route.name === "/discipline-disciplinaryEdit" ? true : false;
|
||||
});
|
||||
|
|
@ -161,9 +162,7 @@ const dateEndInputStyle = computed(() => {
|
|||
new Date(currentDate.getTime() + 7 * 24 * 60 * 60 * 1000);
|
||||
|
||||
console.log(isInNext7Days);
|
||||
return isInNext7Days
|
||||
? { textDecoration: "underline", color: "red", borderColor: "red" }
|
||||
: {};
|
||||
return isInNext7Days ? "input-alert" : "";
|
||||
});
|
||||
|
||||
const initialPagination = ref<any>({
|
||||
|
|
@ -307,10 +306,10 @@ watch(props.data, async () => {
|
|||
email: item.email,
|
||||
phone: item.phone,
|
||||
duty: item.duty,
|
||||
check: "props",
|
||||
}));
|
||||
|
||||
rows.value = dataMap;
|
||||
|
||||
const dataList = dataMap.map((item: any) => item.id);
|
||||
formData.directors = dataList;
|
||||
}
|
||||
|
|
@ -481,6 +480,7 @@ async function getList() {
|
|||
function returnDirector(data: any) {
|
||||
const dataList = data.map((item: any) => item.id);
|
||||
formData.directors = dataList;
|
||||
|
||||
rows.value = data;
|
||||
changeFormData();
|
||||
clickClose();
|
||||
|
|
@ -759,21 +759,14 @@ onMounted(async () => {
|
|||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'info'">
|
||||
<q-btn
|
||||
size="14px"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
color="info"
|
||||
icon="info"
|
||||
@click="
|
||||
router.push(
|
||||
`/registry/${props.row.personId}`
|
||||
)
|
||||
"
|
||||
><q-tooltip
|
||||
>ดูข้อมูลในทะเบียนประวัติ</q-tooltip
|
||||
></q-btn
|
||||
<router-link
|
||||
target="_blank"
|
||||
:to="`/registry/${props.row.personId}`"
|
||||
><q-icon name="info" color="info" size="sm"
|
||||
><q-tooltip
|
||||
>ดูข้อมูลในทะเบียนประวัติ</q-tooltip
|
||||
>
|
||||
</q-icon></router-link
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -1019,6 +1012,11 @@ onMounted(async () => {
|
|||
</div>
|
||||
<div class="col-3">
|
||||
<datepicker
|
||||
:class="
|
||||
formData.status !== 'NEW'
|
||||
? ''
|
||||
: dateEndInputStyle
|
||||
"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.investigationDateEnd"
|
||||
:readonly="
|
||||
|
|
@ -1063,7 +1061,6 @@ onMounted(async () => {
|
|||
`${'กรุณาเลือกวันที่สิ้นสุดการสืบสวน'}`,
|
||||
]"
|
||||
:label="`${'วันที่สิ้นสุดการสืบสวน'}`"
|
||||
:input-style="dateEndInputStyle"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
@ -1168,10 +1165,10 @@ onMounted(async () => {
|
|||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td>
|
||||
<q-td class="text-right">
|
||||
<!-- แก้ไขกรรมการ -->
|
||||
<q-btn
|
||||
v-if="!isReadonly"
|
||||
v-if="!isReadonly && props.row.check === 'props'"
|
||||
dense
|
||||
size="12px"
|
||||
flat
|
||||
|
|
@ -1598,7 +1595,6 @@ onMounted(async () => {
|
|||
</template>
|
||||
|
||||
<style scope>
|
||||
|
||||
.q-banner {
|
||||
min-height: 25px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -183,7 +183,7 @@ const dateEndInputStyle = computed(() => {
|
|||
new Date(currentDate.getTime() + 7 * 24 * 60 * 60 * 1000);
|
||||
|
||||
console.log(isInNext7Days);
|
||||
return isInNext7Days ? { textDecoration: "underline", color: "red" } : {};
|
||||
return isInNext7Days ? "input-alert" : "";
|
||||
});
|
||||
|
||||
/** เปิด dialog */
|
||||
|
|
@ -339,6 +339,7 @@ async function fetchDatadetail() {
|
|||
email: item.email,
|
||||
phone: item.phone,
|
||||
duty: item.duty,
|
||||
check: 'props',
|
||||
}));
|
||||
|
||||
rows.value = dataMap;
|
||||
|
|
@ -766,21 +767,14 @@ onMounted(async () => {
|
|||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'info'">
|
||||
<q-btn
|
||||
size="14px"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
color="info"
|
||||
icon="info"
|
||||
@click="
|
||||
router.push(
|
||||
`/registry/${props.row.personId}`
|
||||
)
|
||||
"
|
||||
><q-tooltip
|
||||
>ดูข้อมูลในทะเบียนประวัติ</q-tooltip
|
||||
></q-btn
|
||||
<router-link
|
||||
target="_blank"
|
||||
:to="`/registry/${props.row.personId}`"
|
||||
><q-icon name="info" color="info" size="sm"
|
||||
><q-tooltip
|
||||
>ดูข้อมูลในทะเบียนประวัติ</q-tooltip
|
||||
>
|
||||
</q-icon></router-link
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -1071,6 +1065,8 @@ onMounted(async () => {
|
|||
|
||||
<div class="col-3">
|
||||
<datepicker
|
||||
:class="
|
||||
isReadonly ? '' : dateEndInputStyle "
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.disciplinaryDateEnd"
|
||||
:readonly="
|
||||
|
|
@ -1117,7 +1113,6 @@ onMounted(async () => {
|
|||
`${'กรุณาเลือกวันที่สิ้นสุดการสอบสวน'}`,
|
||||
]"
|
||||
:label="`${'วันที่สิ้นสุดการสอบสวน'}`"
|
||||
:input-style="dateEndInputStyle"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
@ -1325,10 +1320,10 @@ onMounted(async () => {
|
|||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td>
|
||||
<q-td class="text-right">
|
||||
<!-- แก้ไขกรรมการ -->
|
||||
<q-btn
|
||||
v-if="!isReadonly"
|
||||
v-if="!isReadonly && props.row.check ==='props'"
|
||||
dense
|
||||
size="12px"
|
||||
flat
|
||||
|
|
|
|||
|
|
@ -351,20 +351,15 @@ function confirmDelete(docid: string) {
|
|||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'info'">
|
||||
<q-btn
|
||||
size="14px"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
color="info"
|
||||
icon="info"
|
||||
@click="
|
||||
router.push(`/registry/${props.row.personId}`)
|
||||
"
|
||||
><q-tooltip
|
||||
>ดูข้อมูลในทะเบียนประวัติ</q-tooltip
|
||||
></q-btn
|
||||
>
|
||||
<router-link
|
||||
target="_blank"
|
||||
:to="`/registry/${props.row.personId}`"
|
||||
><q-icon name="info" color="info" size="sm"
|
||||
><q-tooltip
|
||||
>ดูข้อมูลในทะเบียนประวัติ</q-tooltip
|
||||
>
|
||||
</q-icon></router-link
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="col.name === 'organization'"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,197 @@
|
|||
<script setup lang="ts">
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
watchEffect,
|
||||
watch,
|
||||
type PropType,
|
||||
onMounted,
|
||||
} from "vue";
|
||||
import { QForm, useQuasar } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { showLoader, success, messageError, dialogConfirm, hideLoader } = mixin;
|
||||
const listCheck = ref<string>("");
|
||||
const props = defineProps({
|
||||
modal: Boolean,
|
||||
title: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
close: Function,
|
||||
});
|
||||
const dataList = ref<any>();
|
||||
const listInvestigateDetail = [
|
||||
{
|
||||
id: "1",
|
||||
title: "test1",
|
||||
type: "x1",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "test2",
|
||||
type: "x2",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "test3",
|
||||
type: "x3",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "test4",
|
||||
type: "x4",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "test5",
|
||||
type: "x5",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
title: "test6",
|
||||
type: "x6",
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
title: "test7",
|
||||
type: "x7",
|
||||
},
|
||||
];
|
||||
|
||||
function clickList(id: string, type: string) {
|
||||
const data = [
|
||||
{
|
||||
id: "1",
|
||||
title: "นาย 1",
|
||||
type: "x1",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "นาย 2",
|
||||
type: "x1",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "นาย 3",
|
||||
type: "x2",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "นาย 4",
|
||||
type: "x2",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "นาย 5",
|
||||
type: "x3",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
title: "นาย 6",
|
||||
type: "x3",
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
title: "นาย 7",
|
||||
type: "x4",
|
||||
},
|
||||
];
|
||||
dataList.value = data.filter((r) => r.type == type);
|
||||
listCheck.value = id;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="props.modal" persistent>
|
||||
<q-card style="min-width: 40vw">
|
||||
<q-form ref="myForm">
|
||||
<DialogHeader :title="props.title" :close="props.close" />
|
||||
<q-separator />
|
||||
<q-card-section>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-5">
|
||||
<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"
|
||||
>
|
||||
รายการเรื่องร้องเรียน
|
||||
</div>
|
||||
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<q-scroll-area
|
||||
style="height: 300px; max-width: 300px"
|
||||
class="bg-white rounded-borders q-px-sm row col-12"
|
||||
>
|
||||
<q-list
|
||||
v-for="(item, index) in listInvestigateDetail"
|
||||
:key="item.id"
|
||||
bordered
|
||||
separator
|
||||
>
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
:active="listCheck === item.id"
|
||||
active-class="my-menu-link"
|
||||
@click="clickList(item.id, item.type)"
|
||||
>
|
||||
<q-item-section>{{ item.title }}</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-scroll-area>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<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"
|
||||
>
|
||||
รายชื่อกรรมการ
|
||||
</div>
|
||||
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<q-scroll-area
|
||||
style="height: 300px"
|
||||
class="bg-white rounded-borders q-px-sm row col-12"
|
||||
>
|
||||
<q-list
|
||||
v-for="(item, index) in dataList"
|
||||
:key="item.id"
|
||||
bordered
|
||||
separator
|
||||
>
|
||||
<q-item clickable v-ripple>
|
||||
<q-item-section>{{ item.title }}</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-scroll-area>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.my-menu-link {
|
||||
background: #ebf9f7 !important;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #1bb19ab8;
|
||||
color: #1bb19ab8 !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,21 +2,26 @@
|
|||
import { ref, reactive, watch } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useQuasar } from "quasar";
|
||||
import type { QTableProps } from "quasar";
|
||||
import type {
|
||||
FormData,
|
||||
FormRef,
|
||||
typeOp,
|
||||
ResponsePreson,
|
||||
tableType,
|
||||
} from "@/modules/11_discipline/interface/request/director";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";
|
||||
|
||||
const qualification = ref<string>('')
|
||||
const mainStore = useDisciplineMainStore();
|
||||
const searchRef = ref<any>(null);
|
||||
const rows = ref<tableType[]>([]);
|
||||
const search = ref<string>("");
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
messageError,
|
||||
showLoader,
|
||||
dialogMessageNotify,
|
||||
hideLoader,
|
||||
} = mixin;
|
||||
const { messageError, showLoader, dialogMessageNotify, hideLoader } = mixin;
|
||||
/**
|
||||
* รับ props มาจาก page หลัก
|
||||
*/
|
||||
|
|
@ -30,6 +35,12 @@ const props = defineProps({
|
|||
default: () => "",
|
||||
},
|
||||
});
|
||||
const type = ref<string>("idcard");
|
||||
const typeOps = ref<typeOp[]>([
|
||||
{ id: "idcard", name: "เลขประจำตัวประชาชน" },
|
||||
{ id: "firstname", name: "ชื่อ" },
|
||||
{ id: "lastname", name: "นามสกุล" },
|
||||
]);
|
||||
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
|
||||
const emit = defineEmits(["formDataReturn"]);
|
||||
/**
|
||||
|
|
@ -65,7 +76,6 @@ watch(props.data, async () => {
|
|||
formData.position = props.data.position;
|
||||
formData.phone = props.data.phone;
|
||||
formData.email = props.data.email;
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
|
|
@ -82,14 +92,111 @@ const formRef: FormRef = {
|
|||
firstname: firstnameRef,
|
||||
lastname: lastnameRef,
|
||||
position: positionRef,
|
||||
phone: phoneRef,
|
||||
email: emailRef,
|
||||
// phone: phoneRef,
|
||||
// email: emailRef,
|
||||
};
|
||||
|
||||
const columnsRespondent = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "info",
|
||||
align: "center",
|
||||
label: "",
|
||||
sortable: false,
|
||||
field: "info",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: false,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
// {
|
||||
// name: "idcard",
|
||||
// align: "left",
|
||||
// label: "เลขบัตรประชาชน",
|
||||
// sortable: true,
|
||||
// field: "idcard",
|
||||
// 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: "posNo",
|
||||
// align: "left",
|
||||
// label: "ตำแหน่งเลขที่",
|
||||
// sortable: true,
|
||||
// field: "posNo",
|
||||
// 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: "positionLevel",
|
||||
// align: "left",
|
||||
// label: "ระดับ",
|
||||
// sortable: true,
|
||||
// field: "positionLevel",
|
||||
// headerStyle: "font-size: 14px",
|
||||
// style: "font-size: 14px",
|
||||
// },
|
||||
// {
|
||||
// name: "salary",
|
||||
// align: "left",
|
||||
// label: "เงินเดือน",
|
||||
// sortable: true,
|
||||
// field: "salary",
|
||||
// headerStyle: "font-size: 14px",
|
||||
// style: "font-size: 14px",
|
||||
// },
|
||||
{
|
||||
name: "organization",
|
||||
align: "left",
|
||||
label: "หน่วยงาน",
|
||||
sortable: true,
|
||||
field: "organization",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
|
||||
/** หัวข้อที่เเสดงในตารางผู้ถูกร้องเรียน */
|
||||
const visibleColumnsRespondent = ref<string[]>([
|
||||
"info",
|
||||
"no",
|
||||
// "idcard",
|
||||
"name",
|
||||
// "posNo",
|
||||
"position",
|
||||
// "positionLevel",
|
||||
// "salary",
|
||||
"organization",
|
||||
]);
|
||||
|
||||
/**
|
||||
* เพิ่มบุคลากร
|
||||
*/
|
||||
function addEmployee() {
|
||||
function addEmployee() {
|
||||
if (idCard.value.length === 13) {
|
||||
console.log("idCard===>", idCard.value);
|
||||
showLoader();
|
||||
|
|
@ -150,6 +257,59 @@ function inputEdit(val: boolean) {
|
|||
"full-width cursor-pointer inputgreen": !val,
|
||||
};
|
||||
}
|
||||
|
||||
/** update เมื่อเปลี่ยน option */
|
||||
function updateSelect() {
|
||||
search.value = "";
|
||||
}
|
||||
|
||||
async function searchInput() {
|
||||
searchRef.value.validate();
|
||||
if (!searchRef.value.hasError) {
|
||||
showLoader();
|
||||
const body = {
|
||||
fieldName: type.value,
|
||||
keyword: search.value,
|
||||
};
|
||||
await http
|
||||
.post(config.API.searchPersonal(), body)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
const list = data.map((e: ResponsePreson) => ({
|
||||
personId: e.personId,
|
||||
idcard: e.idcard,
|
||||
prefix: e.prefix,
|
||||
firstName: e.firstName,
|
||||
lastName: e.lastName,
|
||||
name: `${e.prefix}${e.firstName} ${e.lastName}`,
|
||||
posNo: e.posNo ?? "-",
|
||||
position: e.position ?? "-",
|
||||
positionLevel: e.positionLevel ?? "-",
|
||||
salary: e.salaries ?? "-",
|
||||
organization: e.organization ?? "-",
|
||||
phone: e.phone ?? "-",
|
||||
email: e.email ?? "-",
|
||||
}));
|
||||
|
||||
rows.value = list;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function returnDetail(data: any) {
|
||||
formData.prefix = data.prefix;
|
||||
formData.firstname = data.firstName;
|
||||
formData.lastname = data.lastName;
|
||||
formData.position = data.position;
|
||||
formData.phone = data.phone;
|
||||
formData.email = data.email;
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<form @submit.prevent.stop="onValidate">
|
||||
|
|
@ -157,44 +317,99 @@ function inputEdit(val: boolean) {
|
|||
<div class="col-12 row q-pa-md">
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="row col-12" v-if="data === null">
|
||||
<q-card
|
||||
<div class="row col-12 q-col-gutter-sm items-start">
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<q-select
|
||||
label="ค้นหาจาก"
|
||||
v-model="type"
|
||||
:options="typeOps"
|
||||
emit-value
|
||||
dense
|
||||
@update:model-value="updateSelect"
|
||||
map-options
|
||||
outlined
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-6 col-md-6">
|
||||
<q-input
|
||||
ref="searchRef"
|
||||
v-model="search"
|
||||
outlined
|
||||
clearable
|
||||
dense
|
||||
label="คำค้น"
|
||||
:rules="[(val) => !!val || `กรุณากรอกคำค้น`]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-6 col-md-2">
|
||||
<q-btn
|
||||
color="primary"
|
||||
icon="search"
|
||||
label="ค้นหา"
|
||||
class="full-width q-pa-sm"
|
||||
@click="searchInput()"
|
||||
>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="columnsRespondent"
|
||||
:rows="rows"
|
||||
row-key="personId"
|
||||
flat
|
||||
bordered
|
||||
class="row col-12"
|
||||
style="border: 1px solid #d6dee1"
|
||||
:paging="true"
|
||||
dense
|
||||
class="custom-header-table"
|
||||
:visible-columns="visibleColumnsRespondent"
|
||||
>
|
||||
<div
|
||||
class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
|
||||
>
|
||||
ค้นหาบุคคลากรที่อยู่ในระบบ
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="col-xs-12 q-pa-sm row">
|
||||
<div class="col-6">
|
||||
<q-input
|
||||
:class="inputEdit(isReadonly)"
|
||||
dense
|
||||
outlined
|
||||
v-model="idCard"
|
||||
label="รหัสบัตรประชาชน"
|
||||
ref="idCardRef"
|
||||
for="idCardRef"
|
||||
hide-bottom-space
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกรหัสบัตรประชาชน'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-btn
|
||||
unelevated
|
||||
dense
|
||||
color="primary"
|
||||
class="q-px-md q-py-sm q-ml-sm"
|
||||
@click="addEmployee"
|
||||
label="เพิ่มบุคลากร"
|
||||
id="addCustomer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
style="color: #000000; font-weight: 500"
|
||||
>
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
</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="returnDetail(props.row)"
|
||||
>
|
||||
<div v-if="col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'info'">
|
||||
<router-link
|
||||
target="_blank"
|
||||
:to="`/registry/${props.row.personId}`"
|
||||
><q-icon name="info" color="info" size="sm"
|
||||
><q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
|
||||
</q-icon></router-link
|
||||
>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-input
|
||||
|
|
@ -260,7 +475,6 @@ function inputEdit(val: boolean) {
|
|||
type="tel"
|
||||
mask="##########"
|
||||
hide-bottom-space
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกเบอร์โทร'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
|
|
@ -273,7 +487,15 @@ function inputEdit(val: boolean) {
|
|||
ref="emailRef"
|
||||
hide-bottom-space
|
||||
for="emailRef"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกอีเมล'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
label="คุณวุฒิ"
|
||||
type="textarea"
|
||||
dense
|
||||
outlined
|
||||
v-model="qualification"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,17 +5,19 @@ import { useQuasar } from "quasar";
|
|||
import { useDisciplineDirectorDataStore } from "@/modules/11_discipline/store/DirectorStore";
|
||||
import config from "@/app.config";
|
||||
import http from "@/plugins/http";
|
||||
import DialogTotal from '@/modules/11_discipline/components/6_BasicInformation/Director/DialogInvestigateTotal.vue'
|
||||
|
||||
const $q = useQuasar();
|
||||
const dataStore = useDisciplineDirectorDataStore();
|
||||
const mixin = useCounterMixin();
|
||||
const { messageError, showLoader, hideLoader, dialogRemove, success } = mixin;
|
||||
|
||||
const titleInvestigate = ref<string>("");
|
||||
const currentPage = ref<number>(1);
|
||||
const maxPage = ref<number>(1);
|
||||
const page = ref<number>(1);
|
||||
const rowsPerPage = ref<number>(10);
|
||||
|
||||
const modalDetail = ref<boolean>(false);
|
||||
/**
|
||||
* ค้นหาในตาราง
|
||||
*/
|
||||
|
|
@ -109,10 +111,18 @@ function filterFn() {
|
|||
console.log("enter", filterKeyword.value);
|
||||
}
|
||||
|
||||
function openDetail(title: string) {
|
||||
titleInvestigate.value = title;
|
||||
modalDetail.value = true;
|
||||
}
|
||||
|
||||
function closeDetail(){
|
||||
modalDetail.value = false
|
||||
}
|
||||
/**เมื่อเริ่มโหลดหน้า
|
||||
* ส่งข้อมูลจำลองไปยัง store
|
||||
*/
|
||||
onMounted(() => {
|
||||
onMounted(() => {
|
||||
getList();
|
||||
// get ข้อมูลแล้วโยนใส่ store
|
||||
});
|
||||
|
|
@ -210,16 +220,29 @@ function filterFn() {
|
|||
</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="$router.push(`/discipline/director/${props.row.id}`)"
|
||||
>
|
||||
<div v-if="col.name == 'no'">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div
|
||||
v-if="col.name == 'no'"
|
||||
@click="$router.push(`/discipline/director/${props.row.id}`)"
|
||||
>
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else>
|
||||
<div
|
||||
v-else-if="col.name == 'totalInvestigate'"
|
||||
@click="openDetail('รายการการสืบสวน')"
|
||||
>
|
||||
{{ props.row.totalInvestigate }}
|
||||
</div>
|
||||
<div
|
||||
v-else-if="col.name == 'totalDisciplinary'"
|
||||
@click="openDetail('รายการการสอบสวน')"
|
||||
>
|
||||
{{ props.row.totalDisciplinary }}
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
@click="$router.push(`/discipline/director/${props.row.id}`)"
|
||||
>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
|
|
@ -241,4 +264,10 @@ function filterFn() {
|
|||
</d-table>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<DialogTotal
|
||||
:modal="modalDetail"
|
||||
:title="titleInvestigate"
|
||||
:close="closeDetail"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
interface FormData {
|
||||
personalId:string
|
||||
personalId: string
|
||||
prefix: string;
|
||||
firstname: string;
|
||||
lastname: string;
|
||||
|
|
@ -8,7 +8,7 @@ interface FormData {
|
|||
email: string;
|
||||
}
|
||||
interface FormDataPost {
|
||||
personalId:string
|
||||
personalId: string
|
||||
prefix: string;
|
||||
firstname: string;
|
||||
lastname: string;
|
||||
|
|
@ -21,13 +21,48 @@ interface FormRef {
|
|||
firstname: object | null;
|
||||
lastname: object | null;
|
||||
position: object | null;
|
||||
phone: object | null;
|
||||
email: object | null;
|
||||
// phone: object | null;
|
||||
// email: object | null;
|
||||
[key: string]: any;
|
||||
}
|
||||
interface typeOp {
|
||||
id: string
|
||||
name: string
|
||||
}
|
||||
|
||||
interface ResponsePreson {
|
||||
personId: string; //id อ้างอิง profile
|
||||
idcard: string; //รหัสบัตรประชาชน
|
||||
prefix: string; //คำนำหน้า
|
||||
firstName: string; //ชื่อ
|
||||
lastName: string; //นามสกุล
|
||||
posNo: string; //เลขที่ตำแหน่ง
|
||||
position: string; //ตำแหน่ง
|
||||
positionLevel: string; //ระดับ
|
||||
salaries: number; //เงินเดือน
|
||||
organization: string; //สังกัด
|
||||
email: string; //อีเมล
|
||||
phone: string; //เบอร์โทรศัพท์
|
||||
}
|
||||
|
||||
interface tableType {
|
||||
personId: string;
|
||||
idcard: string;
|
||||
prefix: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
position: string;
|
||||
positionLevel: string;
|
||||
organization: string;
|
||||
salary: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export type {
|
||||
FormData,
|
||||
FormRef,
|
||||
FormDataPost
|
||||
FormDataPost,
|
||||
typeOp,
|
||||
ResponsePreson,
|
||||
tableType
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue