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

update ฟอร์มสืบสวน สอบสวนวินัย

Browse source
This commit is contained in:
Warunee Tamkoo 2023-11-23 15:47:14 +07:00
parent 422ea07f4d
commit b5cc5c9cb7
12 changed files with 768 additions and 564 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/modules/11_discipline/components/1_Complaint/Popup.vue
View file

@ -15,6 +15,10 @@ const $q = useQuasar();
const { dialogConfirm, dialogMessageNotify, success } = mixin; const { dialogConfirm, dialogMessageNotify, success } = mixin;
const props = defineProps({ const props = defineProps({
title: {
type: String,
require: 'ส่งไปสืบสวน',
},
modal: { modal: {
type: Boolean, type: Boolean,
require: true, require: true,
@ -128,13 +132,13 @@ function onclickSend() {
dialogConfirm( dialogConfirm(
$q, $q,
async () => { async () => {
success($q, "ส่งข้อมูลไปสืบสวนสำเร็จ"); success($q, `ส่งข้อมูล${props.title}สำเร็จ`);
console.log(selected.value); console.log(selected.value);
props.close?.(); props.close?.();
}, },
"ยืนยันการส่งไปสืบสวน", `ยืนยันการส่ง${props.title}`,
"ต้องการยืนยันการส่งไปสืบสวนหรือไม่" `ต้องการยืนยันการส่ง${props.title}หรือไม่`
); );
} else { } else {
dialogMessageNotify($q, "กรุณาเลือกรายชื่อ"); dialogMessageNotify($q, "กรุณาเลือกรายชื่อ");
@ -155,7 +159,7 @@ watch([() => props.modal], () => {
<template> <template>
<q-dialog v-model="props.modal"> <q-dialog v-model="props.modal">
<q-card style="width: 820px; max-width: 80vw"> <q-card style="width: 820px; max-width: 80vw">
<DialogHeader tittle="มีมูลส่งไปสืบสวน" :close="onClickClose" /> <DialogHeader :tittle="props.title" :close="onClickClose" />
<q-separator /> <q-separator />
@ -277,7 +281,7 @@ watch([() => props.modal], () => {
</q-card-section> </q-card-section>
<q-separator /> <q-separator />
<q-card-actions align="right" class="bg-white text-teal"> <q-card-actions align="right" class="bg-white text-teal">
<q-btn label="ส่งไปสืบสวน" color="public" @click="onclickSend" /> <q-btn :label="props.title" color="public" @click="onclickSend" />
</q-card-actions> </q-card-actions>
</q-card> </q-card>
</q-dialog> </q-dialog>

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

@ -2,11 +2,12 @@
import { onMounted, reactive, ref } from "vue"; import { onMounted, reactive, ref } from "vue";
import FormComplaints from "@/modules/11_discipline/components/1_Complaint/Form.vue"; //เรื่องร้องเรียน import FormComplaints from "@/modules/11_discipline/components/1_Complaint/Form.vue"; //เรื่องร้องเรียน
import FormInvestigatefacts from "@/modules/11_discipline/components/2_InvestigateFacts/Form.vue"; //สืบสวนข้อเท็จจริง import FormInvestigatefacts 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"; import { useRouter, useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore"; import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import Popup from "@/modules/11_discipline/components/1_Complaint/Popup.vue";
import type { FormData } from "@/modules/11_discipline/interface/request/investigateFact";
const $q = useQuasar(); const $q = useQuasar();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
@ -32,7 +33,8 @@ const data = reactive<FormData>({
daysExtend: null, daysExtend: null,
statusResult: "", statusResult: "",
causeText: "", causeText: "",
complaintStatus: "NEW", complaintStatus: "",
reason: "",
}); });
/** จำลองข้อมูลจาก api */ /** จำลองข้อมูลจาก api */
@ -48,10 +50,11 @@ const fetchData = async () => {
data.clickTime = false; data.clickTime = false;
data.date = new Date("2023-11-07T14:58:00"); data.date = new Date("2023-11-07T14:58:00");
data.dateEnd = new Date("2023-11-08T14:58:00"); data.dateEnd = new Date("2023-11-08T14:58:00");
data.investigation = "002"; data.investigation = "appoint_directors";
data.daysExtend = null; data.daysExtend = null;
data.statusResult = "ไม่ระบุ"; data.statusResult = "not_specified";
data.causeText = ""; data.causeText = "";
data.complaintStatus = "NEW";
}; };
/** /**
@ -64,14 +67,20 @@ async function onSubmit(id: string) {
router.push(`/discipline/investigatefacts`); router.push(`/discipline/investigatefacts`);
} }
const modalPopup = ref<boolean>(false);
/** ยืนยัน ส่งไปสอบสวน */ /** ยืนยัน ส่งไปสอบสวน */
function sentInvestigate() { function sentInvestigate() {
dialogConfirm( modalPopup.value = true;
$q, // dialogConfirm(
() => confirmSentInvestigate(), // $q,
"ยืนยันส่งไปสอบสวน", // () => confirmSentInvestigate(),
"ต้องการยืนยันส่งไปสอบสวนใช่หรือไม่?" // "ยืนยันส่งไปสอบสวน",
); // "ต้องการยืนยันส่งไปสอบสวนใช่หรือไม่?"
// );
}
function closePopup() {
modalPopup.value = false;
} }
/** ยืนยัน ยุติเรื่อง */ /** ยืนยัน ยุติเรื่อง */
@ -177,7 +186,7 @@ onMounted(() => {
</q-tab-panels> </q-tab-panels>
</q-card> </q-card>
<!-- <Form :on-submit="onSubmit" :data="data" /> --> <Popup :modal="modalPopup" :close="closePopup" title="ส่งไปสอบสวน"/>
</div> </div>
</template> </template>
<style scoped> <style scoped>

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

@ -10,8 +10,7 @@ import { useInvestigateFactStore } from "@/modules/11_discipline/store/Investiga
import type { import type {
FormData, FormData,
MyObjectInvestigateRef, MyObjectInvestigateRef,
} from "@/modules/11_discipline/interface/request/investigate"; } from "@/modules/11_discipline/interface/request/investigateFact";
import { diffDates } from "@fullcalendar/core/internal";
const $q = useQuasar(); const $q = useQuasar();
const route = useRoute(); const route = useRoute();
@ -23,7 +22,7 @@ const { filterFnOptionsType } = investigateFactStore;
const { date2Thai, dialogConfirm } = mixin; const { date2Thai, dialogConfirm } = mixin;
const investigateDis = useInvestigateDisStore(); const investigateDis = useInvestigateDisStore();
const complaintsOptions = ref<any>([]); // const complaintsOptions = ref<any>([]);
const isUpdate = ref<boolean>(false); const isUpdate = ref<boolean>(false);
/** ตัวแปร ref สำหรับแสดง validate */ /** ตัวแปร ref สำหรับแสดง validate */
@ -41,6 +40,7 @@ const investigationRef = ref<Object | null>(null);
const daysExtendRef = ref<Object | null>(null); const daysExtendRef = ref<Object | null>(null);
const statusResultRef = ref<Object | null>(null); const statusResultRef = ref<Object | null>(null);
const causeTextRef = ref<Object | null>(null); const causeTextRef = ref<Object | null>(null);
const reasonRef = ref<Object | null>(null);
/** รับ props มาจากหน้าหลัก */ /** รับ props มาจากหน้าหลัก */
const props = defineProps({ const props = defineProps({
@ -70,11 +70,12 @@ const formData = reactive<FormData>({
dateEnd: new Date(), dateEnd: new Date(),
investigation: "", investigation: "",
daysExtend: null, daysExtend: null,
statusResult: "ยังไม่ระบุ", statusResult: "",
causeText: "", causeText: "",
complaintStatus: "", complaintStatus: "",
reason: "",
}); });
const evidenceFiles = ref<any>([{ name: "ชื่อไฟล" }, { name: "ชื่อไฟล" }]); const evidenceFiles = ref<any>([{ name: "ชื่อไฟล์" }, { name: "ชื่อไฟล์" }]);
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */ /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const objectInvestigate: MyObjectInvestigateRef = { const objectInvestigate: MyObjectInvestigateRef = {
@ -91,6 +92,7 @@ const objectInvestigate: MyObjectInvestigateRef = {
daysExtend: daysExtendRef, daysExtend: daysExtendRef,
statusResult: statusResultRef, statusResult: statusResultRef,
causeText: causeTextRef, causeText: causeTextRef,
reason: reasonRef,
}; };
const rows = ref([]); const rows = ref([]);
@ -163,7 +165,7 @@ async function fetchDataDetail() {
formData.dateEnd = props.data.dateEnd; formData.dateEnd = props.data.dateEnd;
formData.investigation = props.data.investigation; formData.investigation = props.data.investigation;
formData.daysExtend = props.data.daysExtend; formData.daysExtend = props.data.daysExtend;
formData.statusResult = props.data.results; formData.statusResult = props.data.statusResult;
formData.causeText = props.data.results; formData.causeText = props.data.results;
} }
} }
@ -601,61 +603,162 @@ watch(props.data, async () => {
/> />
</div> </div>
<div class="row col-12 q-col-gutter-md"> <div class="row col-12">
<div class="col-3"> <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
<q-select <div
for="#fault" class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
outlined >
dense ผลการสืบสวน
:readonly="statusStep" </div>
lazy-rules
ref="statusResultRef" <div class="col-12"><q-separator /></div>
v-model="formData.statusResult"
:rules="[(val) => !!val || `${'กรุณาเลือกผลการสืบสวน'}`]" <div class="col-xs-12 q-pa-sm row">
:options="investigateFactStore.statusResultOptions" <div class="row col-12 q-col-gutter-md">
label="ผลการสืบสวน" <div class="col-3">
emit-value <q-select
map-options for="#fault"
option-label="name" outlined
option-value="id" dense
use-input :readonly="statusStep"
@filter="(inputValue: any, lazy-rules
ref="statusResultRef"
v-model="formData.statusResult"
:rules="[(val) => !!val || `${'กรุณาเลือกผลการสืบสวน'}`]"
:options="investigateFactStore.statusResultOptions"
label="ผลการสืบสวน"
emit-value
map-options
option-label="name"
option-value="id"
use-input
@filter="(inputValue: any,
doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'faultOp' doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'faultOp'
)" )"
><template v-slot:no-option> ><template v-slot:no-option>
<q-item> <q-item>
<q-item-section class="text-grey"> <q-item-section class="text-grey">
ไม่มีข้อมูล ไม่มีข้อมูล
</q-item-section> </q-item-section>
</q-item> </q-item>
</template> </template>
</q-select> </q-select>
</div> </div>
<div v-if="formData.statusResult == 'have_cause'" class="col-3"> <div v-if="formData.statusResult == 'have_cause'" class="col-3">
<q-select <q-select
for="#fault" for="#fault"
outlined outlined
dense dense
ref="causeTextRef" ref="causeTextRef"
v-model="formData.causeText" v-model="formData.causeText"
:rules="[(val) => !!val || `${'กรุณาเลือกร้ายแรง/ไม่ร้ายแรง'}`]" :rules="[
:options="investigateFactStore.causeTextOptions" (val) => !!val || `${'กรุณาเลือกร้ายแรง/ไม่ร้ายแรง'}`,
label="ร้ายแรง/ไม่ร้ายแรง" ]"
emit-value :options="investigateFactStore.causeTextOptions"
map-options label="ร้ายแรง/ไม่ร้ายแรง"
option-label="name" emit-value
option-value="id" map-options
use-input option-label="name"
><template v-slot:no-option> option-value="id"
<q-item> use-input
<q-item-section class="text-grey"> ><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="row col-12">
<q-input
class="full-width cursor-pointer"
outlined
ref="reasonRef"
dense
lazy-rules
borderless
v-model="formData.reason"
:rules="[(val) => !!val || `${'กรุณากรอกเหตุผล'}`]"
hide-bottom-space
:label="`${'เหตุผล'}`"
type="textarea"
/>
</div>
</div>
<div class="col-xs-12 q-pa-sm row">
<q-file
class="col-11"
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 class="col-1 self-center">
<q-btn
size="14px"
flat
round
dense
color="add"
class="q-ml-sm"
icon="mdi-upload"
><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
>
</div>
<q-list bordered separator class="full-width q-mt-md">
<q-item
clickable
v-ripple
v-for="(file, index) in evidenceFiles"
:key="index"
>
<q-item-section>{{ file.name + (index + 1) }}</q-item-section>
<q-item-section avatar>
<div class="row">
<div>
<q-btn
dense
flat
round
size="12px"
color="blue"
icon="mdi-download-outline"
>
<q-tooltip>ดาวน์โหลด</q-tooltip>
</q-btn>
</div>
<div>
<q-btn
dense
flat
round
size="12px"
color="red"
icon="mdi-delete-outline"
><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
>
</div>
</div>
</q-item-section> </q-item-section>
</q-item> </q-item>
</template> </q-list>
</q-select> </div>
</div> </q-card>
</div> </div>
</div> </div>
@ -668,87 +771,88 @@ watch(props.data, async () => {
</div> </div>
</form> </form>
</q-card> </q-card>
<div class="col-12 row q-col-gutter-md q-mt-sm">
<div class="row col-12"> <q-card flat class="q-pa-md q-mt-sm">
<q-card bordered class="row col-12" style="border: 1px solid #d6dee1"> <div class="col-12 row q-col-gutter-md">
<div <div class="row col-12">
class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md" <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
> <div class="col-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">
<q-file
class="col-11 q-mt-sm"
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 class="col-1 self-center">
<q-btn
size="14px"
flat
round
dense
color="add"
class="q-ml-sm q-mt-sm"
icon="mdi-upload"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
</div> </div>
</div> <div class="col-12"><q-separator /></div>
<div class="col-xs-12 q-pa-sm row"> <div class="col-xs-12 q-pa-sm row">
<q-list bordered separator class="full-width"> <q-file
<q-item class="col-11 q-mt-sm"
clickable for="#evidenceFiles"
v-ripple outlined
v-for="(file, index) in evidenceFiles" dense
:key="index" ref="evidenceFilesRef"
v-model="formData.evidenceFiles"
label="ไฟล์เอกสารหลักฐาน"
lazy-rules
:rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']"
hide-bottom-space
> >
<q-item-section>{{ file.name + (index + 1) }}</q-item-section> <template v-slot:prepend>
<q-item-section avatar> <q-icon name="attach_file" color="primary" />
<div class="row"> </template>
<div> </q-file>
<q-btn <div class="col-1 self-center">
dense <q-btn
flat size="14px"
round flat
size="12px" round
color="blue" dense
icon="mdi-download-outline" color="add"
> class="q-ml-sm q-mt-sm"
<q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip> icon="mdi-upload"
</q-btn> ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
</div>
</div>
<div class="col-xs-12 q-pa-sm row">
<q-list bordered separator class="full-width">
<q-item
clickable
v-ripple
v-for="(file, index) in evidenceFiles"
:key="index"
>
<q-item-section>{{ file.name + (index + 1) }}</q-item-section>
<q-item-section avatar>
<div class="row">
<div>
<q-btn
dense
flat
round
size="12px"
color="blue"
icon="mdi-download-outline"
>
<q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
</q-btn>
</div>
<div>
<q-btn
dense
flat
round
size="12px"
color="red"
icon="mdi-delete-outline"
><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
>
</div>
</div> </div>
<div> </q-item-section>
<q-btn </q-item>
dense </q-list>
flat </div>
round </q-card>
size="12px" </div>
color="red"
icon="mdi-delete-outline"
><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
>
</div>
</div>
</q-item-section>
</q-item>
</q-list>
</div>
</q-card>
</div> </div>
</div> </q-card>
<Dialogbody <Dialogbody
v-model:Modal="modal" v-model:Modal="modal"

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

@ -64,34 +64,13 @@ onMounted(async () => {
{ {
id: "001", id: "001",
subject: "ทุจริตในหน้าที่", subject: "ทุจริตในหน้าที่",
interrogated: "ศิรินภา คงน้อยี่", interrogated: "บุคคล",
fault: "1", complaintOffenseDetails: "NOT_SPECIFIED",
status: "0", investigationDetail: "appoint_directors",
active: "1", startDate: new Date ("2023-11-20"),
}, endDate: new Date ("2023-11-25"),
{ statusResult: "not_specified",
id: "002", status: "new"
subject: "ทุจริตในหน้าที่",
interrogated: "นายนครชัย วันดี",
fault: "1",
status: "1",
active: "1",
},
{
id: "003",
subject: "กระทำทุจริตเงินกองทุน",
interrogated: "นายกัณฐิมา กาฬสินธ์ุ",
fault: "0",
status: "1",
active: "1",
},
{
id: "004",
subject: "พูดจาไม่สุภาพ",
interrogated: "นายปิยรมย์ ศิริธาราฟ",
fault: "0",
status: "1",
active: "1",
}, },
]); ]);
}); });

658
src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
View file

@ -673,355 +673,369 @@ onMounted(async () => {
</div> </div>
</q-card> </q-card>
<div class="col-12 row q-col-gutter-md q-mt-sm"> <q-card flat class="q-pa-md q-mt-sm">
<div class="row col-12"> <div class="col-12 row q-col-gutter-md">
<q-card <div class="row col-12">
bordered <q-card
class="row col-12" bordered
style="border: 1px solid #d6dee1" 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 text-weight-medium bg-grey-1 q-py-sm q-px-md"
<div class="col-12"><q-separator /></div>
<div class="col-xs-12 q-pa-sm row">
<q-file
class="col-11 q-mt-sm"
outlined
dense
ref="filesEvidenceRef"
for="#filesEvidence"
v-model="formData.filesEvidence"
@added="fileUploadDoc"
label="ไฟล์เอกสารหลักฐานสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
hide-bottom-space
lazy-rules
accept=".pdf,.xlsx,.doc"
> >
<template v-slot:prepend> อัปโหลดหลักฐานสนับสนุนข้อกล่าวหา
<q-icon name="attach_file" />
</template>
</q-file>
<div class="col-1 self-center">
<q-btn
size="14px"
flat
round
dense
color="add"
class="q-ml-sm q-mt-sm"
icon="mdi-upload"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
</div> </div>
</div> <div class="col-12"><q-separator /></div>
<div class="col-xs-12 q-pa-sm row"> <div class="col-xs-12 q-pa-sm row">
<q-list bordered separator class="full-width"> <q-file
<q-item class="col-11 q-mt-sm"
clickable outlined
v-ripple dense
v-for="(file, index) in filesEvidence" ref="filesEvidenceRef"
:key="index" for="#filesEvidence"
v-model="formData.filesEvidence"
@added="fileUploadDoc"
label="ไฟล์เอกสารหลักฐานสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
hide-bottom-space
lazy-rules
accept=".pdf,.xlsx,.doc"
> >
<q-item-section>{{ <template v-slot:prepend>
file.name + (index + 1) <q-icon name="attach_file" />
}}</q-item-section> </template>
<q-item-section avatar> </q-file>
<div class="row"> <div class="col-1 self-center">
<div> <q-btn
<q-btn size="14px"
dense flat
flat round
round dense
size="12px" color="add"
color="blue" class="q-ml-sm q-mt-sm"
icon="mdi-download-outline" icon="mdi-upload"
> ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
<q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip> >
</q-btn> </div>
</div>
<div class="col-xs-12 q-pa-sm row">
<q-list bordered separator class="full-width">
<q-item
clickable
v-ripple
v-for="(file, index) in filesEvidence"
:key="index"
>
<q-item-section>{{
file.name + (index + 1)
}}</q-item-section>
<q-item-section avatar>
<div class="row">
<div>
<q-btn
dense
flat
round
size="12px"
color="blue"
icon="mdi-download-outline"
>
<q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
</q-btn>
</div>
<div>
<q-btn
dense
flat
round
size="12px"
color="red"
icon="mdi-delete-outline"
><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
>
</div>
</div> </div>
<div> </q-item-section>
<q-btn </q-item>
dense </q-list>
flat </div>
round </q-card>
size="12px" </div>
color="red"
icon="mdi-delete-outline"
><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
>
</div>
</div>
</q-item-section>
</q-item>
</q-list>
</div>
</q-card>
</div> </div>
</q-card>
<div class="row col-12"> <q-card flat class="q-pa-md q-mt-sm">
<q-card <div class="col-12 row q-col-gutter-md">
bordered <div class="row col-12">
class="row col-12" <q-card
style="border: 1px solid #d6dee1" bordered
> class="row col-12"
<div style="border: 1px solid #d6dee1"
class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
> >
อัปโหลดบันทึกถ้อยคำของผู้กล่าวหา <div
</div> class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
<div class="col-12"><q-separator /></div>
<div class="col-xs-12 q-pa-sm row">
<q-file
class="col-11 q-mt-sm"
outlined
dense
ref="filesRecordAccuserRef"
for="#filesRecordAccuser"
v-model="formData.filesRecordAccuser"
@added="fileUploadDoc"
label="ไฟล์เอกสารบันทึกถ้อยคำของผู้กล่าวหา"
hide-bottom-space
lazy-rules
accept=".pdf,.xlsx,.doc"
> >
<template v-slot:prepend> อัปโหลดบันทึกถ้อยคำของผู้กล่าวหา
<q-icon name="attach_file" />
</template>
</q-file>
<div class="col-1 self-center">
<q-btn
size="14px"
flat
round
dense
color="add"
class="q-ml-sm q-mt-sm"
icon="mdi-upload"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
</div> </div>
</div> <div class="col-12"><q-separator /></div>
<div class="col-xs-12 q-pa-sm row"> <div class="col-xs-12 q-pa-sm row">
<q-list bordered separator class="full-width"> <q-file
<q-item class="col-11 q-mt-sm"
clickable outlined
v-ripple dense
v-for="(file, index) in filesRecordAccuser" ref="filesRecordAccuserRef"
:key="index" for="#filesRecordAccuser"
v-model="formData.filesRecordAccuser"
@added="fileUploadDoc"
label="ไฟล์เอกสารบันทึกถ้อยคำของผู้กล่าวหา"
hide-bottom-space
lazy-rules
accept=".pdf,.xlsx,.doc"
> >
<q-item-section>{{ <template v-slot:prepend>
file.name + (index + 1) <q-icon name="attach_file" />
}}</q-item-section> </template>
<q-item-section avatar> </q-file>
<div class="row"> <div class="col-1 self-center">
<div> <q-btn
<q-btn size="14px"
dense flat
flat round
round dense
size="12px" color="add"
color="blue" class="q-ml-sm q-mt-sm"
icon="mdi-download-outline" icon="mdi-upload"
> ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
<q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip> >
</q-btn> </div>
</div>
<div class="col-xs-12 q-pa-sm row">
<q-list bordered separator class="full-width">
<q-item
clickable
v-ripple
v-for="(file, index) in filesRecordAccuser"
:key="index"
>
<q-item-section>{{
file.name + (index + 1)
}}</q-item-section>
<q-item-section avatar>
<div class="row">
<div>
<q-btn
dense
flat
round
size="12px"
color="blue"
icon="mdi-download-outline"
>
<q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
</q-btn>
</div>
<div>
<q-btn
dense
flat
round
size="12px"
color="red"
icon="mdi-delete-outline"
><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
>
</div>
</div> </div>
<div> </q-item-section>
<q-btn </q-item>
dense </q-list>
flat </div>
round </q-card>
size="12px" </div>
color="red"
icon="mdi-delete-outline"
><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
>
</div>
</div>
</q-item-section>
</q-item>
</q-list>
</div>
</q-card>
</div> </div>
</q-card>
<div class="row col-12"> <q-card flat class="q-pa-md q-mt-sm">
<q-card <div class="col-12 row q-col-gutter-md">
bordered <div class="row col-12">
class="row col-12" <q-card
style="border: 1px solid #d6dee1" bordered
> class="row col-12"
<div style="border: 1px solid #d6dee1"
class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
> >
อัปโหลดพยานและการบันทึกถ้อยคำ <div
</div> class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
<div class="col-12"><q-separator /></div>
<div class="col-xs-12 q-pa-sm row">
<q-file
class="col-11 q-mt-sm"
outlined
dense
ref="filesWitnessesRef"
for="#filesWitnesses"
v-model="formData.filesWitnesses"
@added="fileUploadDoc"
label="ไฟล์เอกสารพยานและการบันทึกถ้อยคำ"
hide-bottom-space
lazy-rules
accept=".pdf,.xlsx,.doc"
> >
<template v-slot:prepend> อัปโหลดพยานและการบันทึกถ้อยคำ
<q-icon name="attach_file" />
</template>
</q-file>
<div class="col-1 self-center">
<q-btn
size="14px"
flat
round
dense
color="add"
class="q-ml-sm q-mt-sm"
icon="mdi-upload"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
</div> </div>
</div> <div class="col-12"><q-separator /></div>
<div class="col-xs-12 q-pa-sm row"> <div class="col-xs-12 q-pa-sm row">
<q-list bordered separator class="full-width"> <q-file
<q-item class="col-11 q-mt-sm"
clickable outlined
v-ripple dense
v-for="(file, index) in filesWitnesses" ref="filesWitnessesRef"
:key="index" for="#filesWitnesses"
v-model="formData.filesWitnesses"
@added="fileUploadDoc"
label="ไฟล์เอกสารพยานและการบันทึกถ้อยคำ"
hide-bottom-space
lazy-rules
accept=".pdf,.xlsx,.doc"
> >
<q-item-section>{{ <template v-slot:prepend>
file.name + (index + 1) <q-icon name="attach_file" />
}}</q-item-section> </template>
<q-item-section avatar> </q-file>
<div class="row"> <div class="col-1 self-center">
<div> <q-btn
<q-btn size="14px"
dense flat
flat round
round dense
size="12px" color="add"
color="blue" class="q-ml-sm q-mt-sm"
icon="mdi-download-outline" icon="mdi-upload"
> ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
<q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip> >
</q-btn> </div>
</div>
<div class="col-xs-12 q-pa-sm row">
<q-list bordered separator class="full-width">
<q-item
clickable
v-ripple
v-for="(file, index) in filesWitnesses"
:key="index"
>
<q-item-section>{{
file.name + (index + 1)
}}</q-item-section>
<q-item-section avatar>
<div class="row">
<div>
<q-btn
dense
flat
round
size="12px"
color="blue"
icon="mdi-download-outline"
>
<q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
</q-btn>
</div>
<div>
<q-btn
dense
flat
round
size="12px"
color="red"
icon="mdi-delete-outline"
><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
>
</div>
</div> </div>
<div> </q-item-section>
<q-btn </q-item>
dense </q-list>
flat </div>
round </q-card>
size="12px" </div>
color="red"
icon="mdi-delete-outline"
><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
>
</div>
</div>
</q-item-section>
</q-item>
</q-list>
</div>
</q-card>
</div> </div>
</q-card>
<div class="row col-12"> <q-card flat class="q-pa-md q-mt-sm">
<q-card <div class="col-12 row q-col-gutter-md">
bordered <div class="row col-12">
class="row col-12" <q-card
style="border: 1px solid #d6dee1" bordered
> class="row col-12"
<div style="border: 1px solid #d6dee1"
class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
> >
อัปโหลดไฟล์เอกสารหลักฐานอื่น ๆ <div
</div> class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
<div class="col-12"><q-separator /></div>
<div class="col-xs-12 q-pa-sm row">
<q-file
class="col-11 q-mt-sm"
outlined
dense
ref="filesEtcRef"
for="#filesEtc"
v-model="formData.filesEtc"
@added="fileUploadDoc"
label="ไฟล์เอกสารหลักฐานอื่น ๆ"
hide-bottom-space
lazy-rules
accept=".pdf,.xlsx,.doc"
> >
<template v-slot:prepend> อัปโหลดไฟล์เอกสารหลักฐานอื่น ๆ
<q-icon name="attach_file" />
</template>
</q-file>
<div class="col-1 self-center">
<q-btn
size="14px"
flat
round
dense
color="add"
class="q-ml-sm q-mt-sm"
icon="mdi-upload"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
</div> </div>
</div> <div class="col-12"><q-separator /></div>
<div class="col-xs-12 q-pa-sm row"> <div class="col-xs-12 q-pa-sm row">
<q-list bordered separator class="full-width"> <q-file
<q-item class="col-11 q-mt-sm"
clickable outlined
v-ripple dense
v-for="(file, index) in filesEtc" ref="filesEtcRef"
:key="index" for="#filesEtc"
v-model="formData.filesEtc"
@added="fileUploadDoc"
label="ไฟล์เอกสารหลักฐานอื่น ๆ"
hide-bottom-space
lazy-rules
accept=".pdf,.xlsx,.doc"
> >
<q-item-section>{{ <template v-slot:prepend>
file.name + (index + 1) <q-icon name="attach_file" />
}}</q-item-section> </template>
<q-item-section avatar> </q-file>
<div class="row"> <div class="col-1 self-center">
<div> <q-btn
<q-btn size="14px"
dense flat
flat round
round dense
size="12px" color="add"
color="blue" class="q-ml-sm q-mt-sm"
icon="mdi-download-outline" icon="mdi-upload"
> ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
<q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip> >
</q-btn> </div>
</div>
<div class="col-xs-12 q-pa-sm row">
<q-list bordered separator class="full-width">
<q-item
clickable
v-ripple
v-for="(file, index) in filesEtc"
:key="index"
>
<q-item-section>{{
file.name + (index + 1)
}}</q-item-section>
<q-item-section avatar>
<div class="row">
<div>
<q-btn
dense
flat
round
size="12px"
color="blue"
icon="mdi-download-outline"
>
<q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
</q-btn>
</div>
<div>
<q-btn
dense
flat
round
size="12px"
color="red"
icon="mdi-delete-outline"
><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
>
</div>
</div> </div>
<div> </q-item-section>
<q-btn </q-item>
dense </q-list>
flat </div>
round </q-card>
size="12px" </div>
color="red"
icon="mdi-delete-outline"
><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
>
</div>
</div>
</q-item-section>
</q-item>
</q-list>
</div>
</q-card>
</div> </div>
</div> </q-card>
</div> </div>
</form> </form>
</div> </div>

13
src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
View file

@ -4,7 +4,7 @@ import { useQuasar } from "quasar";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue"; import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import { useInvestigateDisStore } from "../../store/InvestigateDisStore"; import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
import type { Pagination } from "@/modules/03_recruiting/interface/index/Main"; import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
const $q = useQuasar(); // show dialog const $q = useQuasar(); // show dialog
@ -117,17 +117,6 @@ onMounted(async () => {
{{ col.value }} {{ col.value }}
</div> </div>
</q-td> </q-td>
<q-td style="font-size: 14px; width: 10rem">
<q-btn
v-if="props.row.active === 'ยืนยันผล'"
color="primary"
class="q-px-md"
dense
unelevated
>ยืนยันผล</q-btn
>
<span v-else>{{ props.row.active }}</span>
</q-td>
</q-tr> </q-tr>
</template> </template>
</Table> </Table>

1
src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
View file

@ -133,7 +133,6 @@ function resetFilter() {
<q-th v-for="col in props.cols" :key="col.name" :props="props"> <q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium" v-html="col.label" /> <span class="text-weight-medium" v-html="col.label" />
</q-th> </q-th>
<q-th auto-width v-if="nornmalData == true" />
</q-tr> </q-tr>
</template> </template>
<template #body="props"> <template #body="props">

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

@ -8,13 +8,15 @@ interface DataNumberOption {
name: string; name: string;
} }
interface investigatefactsDataRowType { interface InvestigatefactsDataRowType {
id:string, id:string,
subject: string; subject: string;
interrogated: string; interrogated: string;
fault: string | undefined; complaintOffenseDetails: string,
status: string | undefined; investigationDetail: string,
active: string | undefined; dateInvestigate: string,
statusResult: string,
status: string
} }
interface investigateDisDataRowType { interface investigateDisDataRowType {
@ -40,7 +42,7 @@ interface directorType {
export type { export type {
DataOption, DataOption,
investigatefactsDataRowType, InvestigatefactsDataRowType,
investigateDisDataRowType, investigateDisDataRowType,
directorType, directorType,
DataNumberOption DataNumberOption

2
src/modules/11_discipline/interface/request/investigate.ts
View file

@ -14,6 +14,7 @@ interface FormData {
statusResult: string; statusResult: string;
causeText: string; causeText: string;
complaintStatus:string complaintStatus:string
reason: string
} }
interface MyObjectInvestigateRef { interface MyObjectInvestigateRef {
complaint: object | null; complaint: object | null;
@ -28,6 +29,7 @@ interface MyObjectInvestigateRef {
daysExtend: object | null; daysExtend: object | null;
statusResult: object | null; statusResult: object | null;
causeText: object | null; causeText: object | null;
reason: object | null;
[key: string]: any; [key: string]: any;
} }
export type { FormData, MyObjectInvestigateRef }; export type { FormData, MyObjectInvestigateRef };

35
src/modules/11_discipline/interface/request/investigateFact.ts Normal file
View file

@ -0,0 +1,35 @@
interface FormData {
complaint: string;
complaintdetail: string;
detail: string;
fault: string;
other: string;
evidenceFiles: File | null;
fileComplaint: File | null;
clickTime: boolean;
date: Date | null;
dateEnd: Date;
daysExtend: number | null;
investigation: string;
statusResult: string;
causeText: string;
complaintStatus:string
reason: string
}
interface MyObjectInvestigateRef {
complaint: object | null;
complaintdetail: object | null;
detail: object | null;
fault: object | null;
evidenceFiles: object | null;
fileComplaint: object | null;
date: object | null;
dateEnd: object | null;
investigation: object | null;
daysExtend: object | null;
statusResult: object | null;
causeText: object | null;
reason: object | null;
[key: string]: any;
}
export type { FormData, MyObjectInvestigateRef };

13
src/modules/11_discipline/interface/response/investigate.ts Normal file
View file

@ -0,0 +1,13 @@
interface ListData {
id: string;
subject: string;
interrogated: string;
complaintOffenseDetails: string;
investigationDetail: string;
startDate: Date | null;
endDate: Date | null;
statusResult: string;
status: string;
}
export type { ListData };

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

@ -1,18 +1,23 @@
import { defineStore } from "pinia"; import { defineStore } from "pinia";
import { ref } from "vue"; import { ref } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
import type { import type {
investigatefactsDataRowType, InvestigatefactsDataRowType,
DataOption, DataOption,
DataNumberOption, DataNumberOption,
} from "@/modules/11_discipline/interface/index/Main"; } from "@/modules/11_discipline/interface/index/Main";
import type { ListData } from "@/modules/11_discipline/interface/response/investigate";
const mixin = useCounterMixin();
const { date2Thai } = mixin;
/*** store ของข้อมูลสืบสวนข้อเท็จจริง */ /*** store ของข้อมูลสืบสวนข้อเท็จจริง */
export const useInvestigateFactStore = defineStore( export const useInvestigateFactStore = defineStore(
"DisciplineInvestigateFact", "DisciplineInvestigateFact",
() => { () => {
const tabMenu = ref<string>("investigatefacts"); const tabMenu = ref<string>("investigatefacts");
const rows = ref<investigatefactsDataRowType[]>([]);
const daysExtendOps = ref<DataNumberOption[]>([ const daysExtendOps = ref<DataNumberOption[]>([
{ id: 15, name: "15 วัน" }, { id: 15, name: "15 วัน" },
@ -20,15 +25,21 @@ export const useInvestigateFactStore = defineStore(
{ id: 45, name: "45 วัน" }, { id: 45, name: "45 วัน" },
{ id: 60, name: "60 วัน" }, { id: 60, name: "60 วัน" },
]); ]);
const offenseDetailsOps = ref<DataOption[]>([
{ id: "NOT_SPECIFIED", name: "ยังไม่ระบุ" },
{ id: "NOT_DEADLY", name: "ไม่ร้ายแรง" },
{ id: "DEADLY", name: "ร้ายแรง" },
]);
const investigationOps = ref<DataOption[]>([ const investigationOps = ref<DataOption[]>([
{ id: "001", name: "แต่งตั้งกรรมการสืบสวน" }, { id: "appoint_directors", name: "แต่งตั้งกรรมการสืบสวน" },
{ id: "002", name: "สืบสวนทางลับ" }, { id: "secret_investigation", name: "สืบสวนทางลับ" },
{ id: "003", name: "อื่นๆ" }, { id: "other", name: "อื่นๆ" },
]); ]);
const faultOps = ref<DataOption[]>([ const faultOps = ref<DataOption[]>([
{ id: "001", name: "ยังไม่ระบุ" }, { id: "new", name: "กำลังสืบสวน" },
{ id: "002", name: "ไม่ร้ายเเรง" }, { id: "stop", name: "ยุติเรื่อง" },
{ id: "003", name: "ร้ายเเรง" }, { id: "complete", name: "ส่งไปสอบสวน" },
]); ]);
const statusResultOptions = ref<DataOption[]>([ const statusResultOptions = ref<DataOption[]>([
{ id: "not_specified", name: "ยังไม่ระบุ" }, { id: "not_specified", name: "ยังไม่ระบุ" },
@ -47,7 +58,10 @@ export const useInvestigateFactStore = defineStore(
"no", "no",
"subject", "subject",
"interrogated", "interrogated",
"fault", "complaintOffenseDetails",
"investigationDetail",
"dateInvestigate",
"statusResult",
"status", "status",
]); ]);
@ -65,7 +79,7 @@ export const useInvestigateFactStore = defineStore(
{ {
name: "subject", name: "subject",
align: "left", align: "left",
label: "เรื่อง", label: "เรื่องร้องเรียน",
sortable: true, sortable: true,
field: "subject", field: "subject",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
@ -83,11 +97,44 @@ export const useInvestigateFactStore = defineStore(
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
{ {
name: "fault", name: "complaintOffenseDetails",
align: "left", align: "left",
label: "ลักษณะความผิด", label: "ลักษณะความผิด",
sortable: true, sortable: true,
field: "fault", field: "complaintOffenseDetails",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "investigationDetail",
align: "left",
label: "ลักษณะการสืบสวน",
sortable: true,
field: "investigationDetail",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "dateInvestigate",
align: "left",
label: "วันที่สืบสวน",
sortable: true,
field: "dateInvestigate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "statusResult",
align: "left",
label: "ผลการสืบสวน",
sortable: true,
field: "statusResult",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) => sort: (a: string, b: string) =>
@ -103,6 +150,7 @@ export const useInvestigateFactStore = defineStore(
style: "font-size: 14px", style: "font-size: 14px",
}, },
]); ]);
function filterFnOptionsType( function filterFnOptionsType(
val: string | number, val: string | number,
update: any, update: any,
@ -124,45 +172,51 @@ export const useInvestigateFactStore = defineStore(
} }
}); });
} }
function fecthList(data: investigatefactsDataRowType[]) {
let datalist: investigatefactsDataRowType[] = data.map( const rows = ref<InvestigatefactsDataRowType[]>();
(e: investigatefactsDataRowType) => { async function fecthList(data: ListData[]) {
return { rows.value = await data.map((e: ListData) => {
id: e.id, return {
subject: e.subject, id: e.id,
interrogated: e.interrogated, subject: e.subject,
fault: e.fault ? convertFault(e.fault) : "-", interrogated: e.interrogated,
status: e.status ? convertSatatus(e.status) : "-", complaintOffenseDetails: convertOffenseDetails(
active: e.active ? activeStatus(e.active) : "-", e.complaintOffenseDetails
}; ),
} investigationDetail: convertInvestigationDetail(
); e.investigationDetail
rows.value = datalist; ),
dateInvestigate:
e.startDate && e.endDate
? `${date2Thai(e.startDate)} - ${date2Thai(e.endDate)}`
: "-",
statusResult: activeStatusResult(e.statusResult),
status: convertStatus(e.status),
};
});
} }
function convertFault(val: string) {
switch (val) { function convertOffenseDetails(val: string) {
case "0": const result = offenseDetailsOps.value.find((x: any) => x.id == val)?.name;
return "ความผิดวินัยไม่ร้ายแรง"; return result ? result : "-";
case "1":
return "ความผิดวินัยร้ายแรง";
}
} }
function convertSatatus(val: string) {
switch (val) { function convertInvestigationDetail(val: string) {
case "0": const result = investigationOps.value.find((x: any) => x.id == val)?.name;
return "ยุติเรื่อง"; return result ? result : "-";
case "1":
return "เสร็จสิ้นเเล้ว";
}
} }
function activeStatus(val: string) {
switch (val) { function convertStatus(val: string) {
case "0": const result = faultOps.value.find((x: any) => x.id == val)?.name;
return "ยังไม่ได้ยืนยันผล"; return result ? result : "-";
case "1":
return "ยืนยันผลเเล้ว";
}
} }
function activeStatusResult(val: string) {
const result = statusResultOptions.value.find(
(x: any) => x.id == val
)?.name;
return result ? result : "-";
}
return { return {
tabMenu, tabMenu,
fecthList, fecthList,