hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

เเก้ UIรายการสืบสวนข้อเท็จจริง

Browse source
This commit is contained in:
setthawutttty 2023-11-06 15:13:36 +07:00
parent e0b3f385a9
commit 52e7ef1541
8 changed files with 605 additions and 469 deletions
Download patch file Download diff file Expand all files Collapse all files

485
src/modules/11_discipline/components/2_InvestigateFacts/AddPage.vue
View file

@ -1,467 +1,32 @@
<script setup lang="ts"> <script setup lang="ts">
import router from "@/router"; import Form from "@/modules/11_discipline/components/2_InvestigateFacts/Form.vue";
import { onMounted, ref, watch, reactive } from "vue"; import { useRoute, useRouter } from "vue-router";
import { useQuasar } from "quasar"; const router = useRouter();
import { useCounterMixin } from "@/stores/mixin";
import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
import type {
FormData,
MyObjectInvestigateRef,
} from "@/modules/11_discipline/interface/request/investigate";
const investigateFactStore = useInvestigateFactStore();
const { filterFnOptionsType } = investigateFactStore;
const mixin = useCounterMixin(); // บันทึกข้อมูล
const { const onSubmit = async () => {
messageError, // post
showLoader, console.log("add");
hideLoader, router.push(`/discipline/investigatefacts`);
date2Thai,
dialogConfirm,
success,
} = mixin;
const $q = useQuasar();
const complaintRef = ref<Object | null>(null);
const complaintdetailRef = ref<Object | null>(null);
const detailRef = ref<Object | null>(null);
const faultRef = ref<Object | null>(null);
const resultsRef = ref<Object | null>(null);
const otherRef = ref<Object | null>(null);
const evidenceFilesRef = ref<Object | null>(null);
const fileComplaintRef = ref<Object | null>(null);
const clickTimeRef = ref<Object | null>(null);
const dateRef = ref<Object | null>(null);
const dateEndRef = ref<Object | null>(null);
const investigationRef = ref<Object | null>(null);
const daysExtendRef = ref<Object | null>(null);
const formData = reactive<FormData>({
complaint: "",
complaintdetail: "",
detail: "",
fault: "",
results: "",
other: "",
evidenceFiles: null,
fileComplaint: null,
clickTime: false,
date: null,
dateEnd: null,
investigation: "",
daysExtend: "",
});
const objectInvestigate: MyObjectInvestigateRef = {
complaint: complaintRef,
complaintdetail: complaintdetailRef,
detail: detailRef,
fault: faultRef,
results: resultsRef,
other: otherRef,
evidenceFiles: evidenceFilesRef,
fileComplaint: fileComplaintRef,
date: dateRef,
dateEnd: dateEndRef,
investigation: investigationRef,
daysExtend: daysExtendRef,
}; };
function validateForm() {
const hasError = [];
for (const key in objectInvestigate) {
if (Object.prototype.hasOwnProperty.call(objectInvestigate, key)) {
const property = objectInvestigate[key];
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate();
hasError.push(isValid);
}
}
}
if (hasError.every((result) => result === true)) {
onSubmit();
} else {
console.log("ไม่ผ่าน ");
console.log(hasError);
}
}
function onSubmit() {
dialogConfirm(
$q,
async () => {
console.log(formData);
},
"ยืนยันการบันทึกข้อมูล",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
);
}
</script> </script>
<template> <template>
<div class="toptitle text-dark col-12 row items-center"> <div class="col-xs-12 col-sm-12 col-md-11">
<q-btn <div class="toptitle text-dark col-12 row items-center">
for="#backMaininvestigate" <q-btn
icon="mdi-arrow-left" for="#backMaininvestigate"
unelevated icon="mdi-arrow-left"
round unelevated
dense round
flat dense
color="primary" flat
class="q-mr-sm" color="primary"
@click="router.go(-1)" class="q-mr-sm"
/> @click="router.go(-1)"
เพิ่มรายการสืบสวนข้อเท็จจริง />
</div> เพิ่มรายการสืบสวนข้อเท็จจริง
<q-card flat bordered class="col-12 q-mt-sm">
<div class="q-pa-md">
<form @submit.prevent="validateForm">
<div class="row col-12">
<div class="col-12 row bg-white q-col-gutter-md">
<div class="col-xs-12 row items-center">
<div class="col-12">
<q-input
for="#complaint"
class="full-width inputgreen cursor-pointer"
ref="complaintRef"
outlined
dense
lazy-rules
borderless
v-model="formData.complaint"
:rules="[(val) => !!val || `${'กรุณากรอกเรื่องร้องเรียน'}`]"
hide-bottom-space
:label="`${'เรื่องร้องเรียน'}`"
type="textarea"
/>
</div>
<div class="row no-wrap col-12">
<div class="col-4 q-my-md q-mr-xs">
<q-select
for="#fault"
outlined
dense
ref="faultRef"
v-model="formData.fault"
:rules="[(val) => !!val || `${'กรุณาเลือกลักษณะความผิด'}`]"
:options="investigateFactStore.faultOp"
label="ลักษณะความผิด"
emit-value
map-options
option-label="name"
option-value="id"
use-input
@filter="(inputValue: any,
doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'faultOp'
)"
><template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไม่มีข้อมูล
</q-item-section>
</q-item>
</template>
</q-select>
</div>
<div class="col-4 q-my-md q-mr-xs">
<q-select
for="#investigation"
outlined
dense
ref="investigationRef"
:rules="[
(val) => !!val || `${'กรุณาเลือกลักษณะการสืบสวน'}`,
]"
v-model="formData.investigation"
:options="investigateFactStore.investigationOp"
label="ลักษณะการสืบสวน"
emit-value
map-options
option-label="name"
option-value="id"
use-input
@filter="(inputValue: any,
doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'investigationOp'
)"
><template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไม่มีข้อมูล
</q-item-section>
</q-item>
</template>
</q-select>
</div>
</div>
<div
v-if="formData.investigation === '003'"
class="col-12 q-mb-md"
>
<q-input
for="#other"
class="full-width inputgreen cursor-pointer"
outlined
ref="otherRef"
dense
borderless
v-model="formData.other"
hide-bottom-space
:label="`${'รายการอื่นๆ(โปรดระบุ)'}`"
type="textarea"
:rules="[
(val) =>
formData.investigation === '003'
? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
: true,
]"
/>
</div>
<div class="row items-start col-12">
<p
class="text-weight-medium q-ma-none text-center align-top q-pt-sm"
>
วันที่สืบสวน
</p>
<q-checkbox
for="#clickTime"
size="md"
v-model="formData.clickTime"
label="ขยายเวลา"
color="primary"
class="text-weight-medium q-ml-sm"
keep-color
/>
<div v-if="formData.clickTime !== true" class="self-start row">
<div class="q-mx-xs">
<datepicker
menu-class-name="modalfix"
v-model="formData.date"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
for="#date"
class="full-width inputgreen cursor-pointer"
ref="dateRef"
outlined
dense
lazy-rules
borderless
:model-value="
formData.date ? date2Thai(formData.date) : null
"
:rules="[
(val) =>
!!val || `${'กรุณาเลือกวันที่เริ่มการสอบสวน'}`,
]"
:label="`${'วันที่เริ่มการสอบสวน'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
color="primary"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="q-mx-xs q-">
<datepicker
menu-class-name="modalfix"
v-model="formData.dateEnd"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
for="#dateEnd"
ref="dateEndRef"
class="full-width inputgreen cursor-pointer"
outlined
dense
lazy-rules
borderless
:model-value="
formData.dateEnd
? date2Thai(formData.dateEnd)
: null
"
:rules="[
(val) =>
!!val || `${'กรุณาเลือกวันที่สิ้นสุดการสอบสวน'}`,
]"
:label="`${'วันที่สิ้นสุดการสอบสวน'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
color="primary"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
<div v-else class="q-mx-xs">
<q-select
for="#daysExtend"
outlined
dense
lazy-rules
ref="daysExtendRef"
v-model="formData.daysExtend"
:options="investigateFactStore.daysExtendOp"
label="จำนวนวันที่ต้องการขยาย"
emit-value
map-options
:rules="[
(val) =>
formData.clickTime === true
? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
: true,
]"
option-label="name"
option-value="id"
use-input
@filter="(inputValue: any,
doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'daysExtendOp'
)"
><template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไม่มีข้อมูล
</q-item-section>
</q-item>
</template>
</q-select>
</div>
</div>
<div class="col-12 q-my-xs">
<q-input
for="#complaintdetail"
class="full-width inputgreen cursor-pointer"
outlined
ref="complaintdetailRef"
dense
lazy-rules
borderless
v-model="formData.complaintdetail"
:rules="[
(val) => !!val || `${'กรุณากรอกรายละเอียดเรื่องร้องเรียน'}`,
]"
hide-bottom-space
:label="`${'รายละเอียดเรื่องร้องเรียน'}`"
type="textarea"
/>
</div>
<div class="col-12 q-my-sm">
<q-file
for="#fileComplaint"
outlined
ref="fileComplaintRef"
dense
v-model="formData.fileComplaint"
label="ไฟล์เอกสารหลักฐานเรื่องร้องเรียน"
lazy-rules
:rules="[(val) => !!val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
hide-bottom-space
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-12 q-my-sm">
<q-input
for="#detail"
class="full-width inputgreen cursor-pointer"
outlined
ref="detailRef"
dense
lazy-rules
borderless
v-model="formData.detail"
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
hide-bottom-space
:label="`${'รายละเอียด'}`"
type="textarea"
/>
</div>
<div class="col-12 q-my-xs">
<q-file
for="#evidenceFiles"
outlined
dense
ref="evidenceFilesRef"
v-model="formData.evidenceFiles"
label="ไฟล์หลักฐานการรับ"
lazy-rules
:rules="[(val) => !!val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
hide-bottom-space
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="row col-12 items-start q-mt-sm">
<div class="col-4">
<q-input
for="#results"
standout
dense
ref="resultsRef"
:rules="[(val) => !!val || `${'กรุณากรอกผลการสืบสวน'}`]"
v-model="formData.results"
outlined
debounce="300"
placeholder="ผลการสืบสวน"
>
</q-input>
</div>
<div class="col-4">
<q-btn
id="#confirm"
label="ยืนยันผลการสืบสวน"
color="public"
class="q-py-sm q-ml-sm"
>
<q-tooltip>ยืนยันผลการสืบสวน</q-tooltip>
</q-btn>
</div>
</div>
</div>
</div>
</div>
<q-separator />
<div class="row col-12 q-pa-sm">
<q-space />
<q-btn
id="onSubmit"
type="submit"
flat
round
color="secondary"
icon="mdi-content-save-outline"
><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
>
</div>
</form>
</div> </div>
</q-card>
<Form :on-submit="onSubmit" />
</div>
</template> </template>

72
src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue Normal file
View file

@ -0,0 +1,72 @@
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import Form from "@/modules/11_discipline/components/2_InvestigateFacts/Form.vue";
import type { FormData } from "@/modules/11_discipline/interface/request/investigate";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const id = ref<string>(route.params.id as string);
onMounted(() => {
fetchData();
});
// get ข้อมูลเก่ากรณีแก้ไขข้อมูล
const data = reactive<FormData>({
complaint: "",
complaintdetail: "",
detail: "",
fault: "",
results: "",
other: "",
evidenceFiles: null,
fileComplaint: null,
clickTime: false,
date: null,
dateEnd: null,
investigation: "",
daysExtend: "",
});
const fetchData = async () => {
// ดึงค่าจาก api
data.complaint = "เรื่องที่ 1";
data.complaintdetail = "รายละเอียด";
data.detail = "รายละเอียด";
data.fault = "001";
data.results = "test";
data.other = "";
data.evidenceFiles = null;
data.fileComplaint = null;
data.clickTime = false;
data.date = new Date("2023-11-07T14:58:00");
data.dateEnd = new Date("2023-11-08T14:58:00");
data.investigation = "002";
data.daysExtend = "";
};
// แก้ไขข้อมูล
const onSubmit = async (id: string) => {
// put
console.log("edit");
router.push(`/discipline/investigatefacts`);
};
</script>
<template>
<div class="col-xs-12 col-sm-12 col-md-11">
<div class="toptitle col-12 row items-center">
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="$router.push(`/discipline/investigatefacts`)"
/>
แก้ไขรายการสืบสวนข้อเท็จจริง {{ id }}#id
</div>
<Form :on-submit="onSubmit" :data="data" />
</div>
</template>

469
src/modules/11_discipline/components/2_InvestigateFacts/Form.vue Normal file
View file

@ -0,0 +1,469 @@
<script setup lang="ts">
import router from "@/router";
import { onMounted, ref, watch, reactive } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
import type {
FormData,
MyObjectInvestigateRef,
} from "@/modules/11_discipline/interface/request/investigate";
const investigateFactStore = useInvestigateFactStore();
const { filterFnOptionsType } = investigateFactStore;
const mixin = useCounterMixin();
const { date2Thai, dialogConfirm } = mixin;
const props = defineProps({
data: {
type: Object,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
});
const $q = useQuasar();
const complaintRef = ref<Object | null>(null);
const complaintdetailRef = ref<Object | null>(null);
const detailRef = ref<Object | null>(null);
const faultRef = ref<Object | null>(null);
const resultsRef = ref<Object | null>(null);
const otherRef = ref<Object | null>(null);
const evidenceFilesRef = ref<Object | null>(null);
const fileComplaintRef = ref<Object | null>(null);
const clickTimeRef = ref<Object | null>(null);
const dateRef = ref<Object | null>(null);
const dateEndRef = ref<Object | null>(null);
const investigationRef = ref<Object | null>(null);
const daysExtendRef = ref<Object | null>(null);
const formData = reactive<FormData>({
complaint: "",
complaintdetail: "",
detail: "",
fault: "",
results: "",
other: "",
evidenceFiles: null,
fileComplaint: null,
clickTime: false,
date: null,
dateEnd: null,
investigation: "",
daysExtend: "",
});
const objectInvestigate: MyObjectInvestigateRef = {
complaint: complaintRef,
complaintdetail: complaintdetailRef,
detail: detailRef,
fault: faultRef,
results: resultsRef,
other: otherRef,
evidenceFiles: evidenceFilesRef,
fileComplaint: fileComplaintRef,
date: dateRef,
dateEnd: dateEndRef,
investigation: investigationRef,
daysExtend: daysExtendRef,
};
function validateForm() {
const hasError = [];
for (const key in objectInvestigate) {
if (Object.prototype.hasOwnProperty.call(objectInvestigate, key)) {
const property = objectInvestigate[key];
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate();
hasError.push(isValid);
}
}
}
if (hasError.every((result) => result === true)) {
onSubmit();
} else {
console.log("ไม่ผ่าน ");
console.log(hasError);
}
}
function onSubmit() {
dialogConfirm(
$q,
async () => {
console.log(formData);
props.onSubmit();
},
"ยืนยันการบันทึกข้อมูล",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
);
}
watch(props.data, async () => {
formData.complaint = props.data.complaint;
formData.complaintdetail = props.data.complaintdetail;
formData.detail = props.data.detail;
formData.fault = props.data.fault;
formData.results = props.data.results;
formData.other = props.data.other;
formData.evidenceFiles = props.data.evidenceFiles;
formData.fileComplaint = props.data.fileComplaint;
formData.clickTime = props.data.clickTime;
formData.date = props.data.date;
formData.dateEnd = props.data.dateEnd;
formData.investigation = props.data.investigation;
formData.daysExtend = props.data.daysExtend;
});
</script>
<template>
<q-card flat bordered class="col-12 q-mt-sm">
<div class="q-pa-md">
<form @submit.prevent="validateForm">
<div class="row col-12">
<div class="col-12 row bg-white q-col-gutter-md">
<div class="col-xs-12 row items-center">
<div class="col-12">
<q-input
for="#complaint"
class="full-width inputgreen cursor-pointer"
ref="complaintRef"
outlined
dense
lazy-rules
borderless
v-model="formData.complaint"
:rules="[(val) => !!val || `${'กรุณากรอกเรื่องร้องเรียน'}`]"
hide-bottom-space
:label="`${'เรื่องร้องเรียน'}`"
type="textarea"
/>
</div>
<div class="row no-wrap col-12">
<div class="col-4 q-my-md q-mr-xs">
<q-select
for="#fault"
outlined
dense
ref="faultRef"
v-model="formData.fault"
:rules="[(val) => !!val || `${'กรุณาเลือกลักษณะความผิด'}`]"
:options="investigateFactStore.faultOp"
label="ลักษณะความผิด"
emit-value
map-options
option-label="name"
option-value="id"
use-input
@filter="(inputValue: any,
doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'faultOp'
)"
><template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไม่มีข้อมูล
</q-item-section>
</q-item>
</template>
</q-select>
</div>
<div class="col-4 q-my-md q-mr-xs">
<q-select
for="#investigation"
outlined
dense
ref="investigationRef"
:rules="[
(val) => !!val || `${'กรุณาเลือกลักษณะการสืบสวน'}`,
]"
v-model="formData.investigation"
:options="investigateFactStore.investigationOp"
label="ลักษณะการสืบสวน"
emit-value
map-options
option-label="name"
option-value="id"
use-input
@filter="(inputValue: any,
doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'investigationOp'
)"
><template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไม่มีข้อมูล
</q-item-section>
</q-item>
</template>
</q-select>
</div>
</div>
<div
v-if="formData.investigation === '003'"
class="col-12 q-mb-md"
>
<q-input
for="#other"
class="full-width inputgreen cursor-pointer"
outlined
ref="otherRef"
dense
borderless
v-model="formData.other"
hide-bottom-space
:label="`${'รายการอื่นๆ(โปรดระบุ)'}`"
type="textarea"
:rules="[
(val) =>
formData.investigation === '003'
? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
: true,
]"
/>
</div>
<div class="row items-start col-12">
<p
class="text-weight-medium q-ma-none text-center align-top q-pt-sm"
>
วันที่สืบสวน
</p>
<q-checkbox
for="#clickTime"
size="md"
v-model="formData.clickTime"
label="ขยายเวลา"
color="primary"
class="text-weight-medium q-ml-sm"
keep-color
/>
<div v-if="formData.clickTime !== true" class="self-start row">
<div class="q-mx-xs">
<datepicker
menu-class-name="modalfix"
v-model="formData.date"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
for="#date"
class="full-width inputgreen cursor-pointer"
ref="dateRef"
outlined
dense
lazy-rules
borderless
:model-value="
formData.date ? date2Thai(formData.date) : null
"
:rules="[
(val) =>
!!val || `${'กรุณาเลือกวันที่เริ่มการสอบสวน'}`,
]"
:label="`${'วันที่เริ่มการสอบสวน'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
color="primary"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="q-mx-xs q-">
<datepicker
menu-class-name="modalfix"
v-model="formData.dateEnd"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
for="#dateEnd"
ref="dateEndRef"
class="full-width inputgreen cursor-pointer"
outlined
dense
lazy-rules
borderless
:model-value="
formData.dateEnd
? date2Thai(formData.dateEnd)
: null
"
:rules="[
(val) =>
!!val || `${'กรุณาเลือกวันที่สิ้นสุดการสอบสวน'}`,
]"
:label="`${'วันที่สิ้นสุดการสอบสวน'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
color="primary"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
<div v-else class="q-mx-xs">
<q-select
for="#daysExtend"
outlined
dense
lazy-rules
ref="daysExtendRef"
v-model="formData.daysExtend"
:options="investigateFactStore.daysExtendOp"
label="จำนวนวันที่ต้องการขยาย"
emit-value
map-options
:rules="[
(val) =>
formData.clickTime === true
? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
: true,
]"
option-label="name"
option-value="id"
use-input
@filter="(inputValue: any,
doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'daysExtendOp'
)"
><template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไม่มีข้อมูล
</q-item-section>
</q-item>
</template>
</q-select>
</div>
</div>
<div class="col-12 q-my-xs">
<q-input
for="#complaintdetail"
class="full-width inputgreen cursor-pointer"
outlined
ref="complaintdetailRef"
dense
lazy-rules
borderless
v-model="formData.complaintdetail"
:rules="[
(val) => !!val || `${'กรุณากรอกรายละเอียดเรื่องร้องเรียน'}`,
]"
hide-bottom-space
:label="`${'รายละเอียดเรื่องร้องเรียน'}`"
type="textarea"
/>
</div>
<div class="col-12 q-my-sm">
<q-file
for="#fileComplaint"
outlined
ref="fileComplaintRef"
dense
v-model="formData.fileComplaint"
label="ไฟล์เอกสารหลักฐานเรื่องร้องเรียน"
lazy-rules
:rules="[(val) => !!val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
hide-bottom-space
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-12 q-my-sm">
<q-input
for="#detail"
class="full-width inputgreen cursor-pointer"
outlined
ref="detailRef"
dense
lazy-rules
borderless
v-model="formData.detail"
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
hide-bottom-space
:label="`${'รายละเอียด'}`"
type="textarea"
/>
</div>
<div class="col-12 q-my-xs">
<q-file
for="#evidenceFiles"
outlined
dense
ref="evidenceFilesRef"
v-model="formData.evidenceFiles"
label="ไฟล์หลักฐานการรับ"
lazy-rules
:rules="[(val) => !!val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
hide-bottom-space
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="row col-12 items-start q-mt-sm">
<div class="col-4">
<q-input
for="#results"
standout
dense
ref="resultsRef"
:rules="[(val) => !!val || `${'กรุณากรอกผลการสืบสวน'}`]"
v-model="formData.results"
outlined
debounce="300"
placeholder="ผลการสืบสวน"
>
</q-input>
</div>
<div class="col-4">
<q-btn
id="#confirm"
label="ยืนยันผลการสืบสวน"
color="public"
class="q-py-sm q-ml-sm"
>
<q-tooltip>ยืนยันผลการสืบสวน</q-tooltip>
</q-btn>
</div>
</div>
</div>
</div>
</div>
<q-separator />
<div class="row col-12 q-pa-sm">
<q-space />
<q-btn id="onSubmit" type="submit" label="บันทึก" color="secondary"
><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
>
</div>
</form>
</div>
</q-card>
</template>

33
src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
View file

@ -41,13 +41,13 @@ const pagination = ref({
rowsPerPage: 10, rowsPerPage: 10,
}); });
const clickAdd = () => { const clickAdd = () => {
router.push(`/discipline/investigatefacts/add`); router.push(`/discipline/investigatefacts/add`);
}; };
onMounted(async() => { onMounted(async () => {
await fecthList([ await fecthList([
{ {
id: "001",
subject: "ทุจริตในหน้าที่", subject: "ทุจริตในหน้าที่",
interrogated: "ศิรินภา คงน้อยี่", interrogated: "ศิรินภา คงน้อยี่",
fault: "1", fault: "1",
@ -55,6 +55,7 @@ onMounted(async() => {
active: "1", active: "1",
}, },
{ {
id: "002",
subject: "ทุจริตในหน้าที่", subject: "ทุจริตในหน้าที่",
interrogated: "นายนครชัย วันดี", interrogated: "นายนครชัย วันดี",
fault: "1", fault: "1",
@ -62,6 +63,7 @@ onMounted(async() => {
active: "1", active: "1",
}, },
{ {
id: "003",
subject: "กระทำทุจริตเงินกองทุน", subject: "กระทำทุจริตเงินกองทุน",
interrogated: "นายกัณฐิมา กาฬสินธ์ุ", interrogated: "นายกัณฐิมา กาฬสินธ์ุ",
fault: "0", fault: "0",
@ -69,6 +71,7 @@ onMounted(async() => {
active: "1", active: "1",
}, },
{ {
id: "004",
subject: "พูดจาไม่สุภาพ", subject: "พูดจาไม่สุภาพ",
interrogated: "นายปิยรมย์ ศิริธาราฟ", interrogated: "นายปิยรมย์ ศิริธาราฟ",
fault: "0", fault: "0",
@ -77,6 +80,9 @@ onMounted(async() => {
}, },
]); ]);
}); });
function editPage(id: string) {
router.push(`/discipline/investigatefacts/${id}`);
}
</script> </script>
<template> <template>
<div class="toptitle text-dark col-12 row items-center"> <div class="toptitle text-dark col-12 row items-center">
@ -86,7 +92,7 @@ onMounted(async() => {
<div class="row col-12 q-col-gutter-sm q-mb-sm"> <div class="row col-12 q-col-gutter-sm q-mb-sm">
<div> <div>
<q-btn <q-btn
for="#addInvestigatefacts" for="#addInvestigatefacts"
@click="clickAdd()" @click="clickAdd()"
size="12px" size="12px"
flat flat
@ -100,7 +106,7 @@ onMounted(async() => {
<q-space /> <q-space />
<q-input <q-input
for="#search" for="#search"
class="col-xs-12 col-sm-3 col-md-2" class="col-xs-12 col-sm-3 col-md-2"
standout standout
dense dense
@ -122,7 +128,7 @@ onMounted(async() => {
</q-input> </q-input>
<q-select <q-select
for="#select" for="#select"
v-model="dataInvestigate.visibleColumns" v-model="dataInvestigate.visibleColumns"
multiple multiple
outlined outlined
@ -170,7 +176,12 @@ onMounted(async() => {
</template> </template>
<template v-slot:body="props"> <template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer"> <q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.name" :props="props"> <q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="editPage(props.row.id)"
>
<div v-if="col.name == 'no'"> <div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }} {{ props.rowIndex + 1 }}
</div> </div>
@ -178,7 +189,11 @@ onMounted(async() => {
{{ col.value }} {{ col.value }}
</div> </div>
</q-td> </q-td>
<q-td auto-width style="font-size: 14px; width: 10%;"> <q-td
auto-width
style="font-size: 14px; width: 10%"
@click="editPage(props.row.id)"
>
{{ props.row.active }} {{ props.row.active }}
</q-td> </q-td>
<q-td auto-width> <q-td auto-width>
@ -187,7 +202,7 @@ onMounted(async() => {
v-if="props.row.status === 'ยุติเรื่อง'" v-if="props.row.status === 'ยุติเรื่อง'"
for="#cancel" for="#cancel"
dense dense
unelevated unelevated
color="primary" color="primary"
class="q-px-sm" class="q-px-sm"
>ยกเลิกยุติเรื่อง</q-btn >ยกเลิกยุติเรื่อง</q-btn

1
src/modules/11_discipline/interface/index/Main.ts
View file

@ -3,6 +3,7 @@ interface DataOption {
name: string; name: string;
} }
interface investigatefactsDataRowType { interface investigatefactsDataRowType {
id:string,
subject: string; subject: string;
interrogated: string; interrogated: string;
fault: string | undefined; fault: string | undefined;

1
src/modules/11_discipline/interface/request/director.ts
View file

@ -5,6 +5,7 @@ interface FormData {
position: string; position: string;
phone: string; phone: string;
email: string; email: string;
responsibilities:string
} }
interface FormRef { interface FormRef {
prefix: object | null; prefix: object | null;

12
src/modules/11_discipline/router.ts
View file

@ -4,6 +4,8 @@ const factsMain = () =>
import("@/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue"); import("@/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue");
const investigatefactsAdd = () => const investigatefactsAdd = () =>
import("@/modules/11_discipline/components/2_InvestigateFacts/AddPage.vue"); import("@/modules/11_discipline/components/2_InvestigateFacts/AddPage.vue");
const investigatefactsEdit = () =>
import("@/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue");
const disciplinaryMain = () => const disciplinaryMain = () =>
import( import(
"@/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue" "@/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue"
@ -165,6 +167,16 @@ export default [
Role: "coin", Role: "coin",
}, },
}, },
{
path: "/discipline/investigatefacts/:id",
name: "/discipline-investigatefactsEdit",
component: investigatefactsEdit,
meta: {
Auth: true,
Key: [11.2],
Role: "coin",
},
},
{ {
path: "/discipline/InvestigateDisciplinary/add", path: "/discipline/InvestigateDisciplinary/add",
name: "/discipline-InvestigateDisciplinaryAdd", name: "/discipline-InvestigateDisciplinaryAdd",

1
src/modules/11_discipline/store/InvestigateFactStore.ts
View file

@ -108,6 +108,7 @@ export const useInvestigateFactStore = defineStore("DisciplineInvestigateFact",
function fecthList(data: investigatefactsDataRowType[]) { function fecthList(data: investigatefactsDataRowType[]) {
let datalist: investigatefactsDataRowType[] = data.map((e: investigatefactsDataRowType) => { let datalist: investigatefactsDataRowType[] = data.map((e: investigatefactsDataRowType) => {
return { return {
id:e.id,
subject: e.subject, subject: e.subject,
interrogated: e.interrogated, interrogated: e.interrogated,
fault: e.fault ? convertFault(e.fault):'-', fault: e.fault ? convertFault(e.fault):'-',