Merge branch 'develop' into devTee

This commit is contained in:
setthawutttty 2023-11-23 10:13:31 +07:00
commit 005cfd37c2
9 changed files with 1209 additions and 329 deletions

View file

@ -1,6 +1,7 @@
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import Form from "@/modules/11_discipline/components/1_Complaint/Form.vue";
import Popup from "@/modules/11_discipline/components/1_Complaint/Popup.vue";
import { useRouter, useRoute } from "vue-router";
import { useQuasar } from "quasar";
import type {
@ -17,6 +18,8 @@ const router = useRouter();
const route = useRoute();
const id = ref<string>(route.params.id as string);
const modalPopup = ref<boolean>(false);
/** ข้อมูล v-model ของฟอร์ม */
const personOj = reactive<ArrayPerson>({
idcard: "",
@ -126,12 +129,17 @@ async function onSubmit() {
/** ยืนยัน มีมูลส่งไปสืบสวน */
function sentInvestigate() {
dialogConfirm(
$q,
() => confirmSentInvestigate(),
"ยืนยันส่งไปสืบสวน",
"ต้องการยืนยันส่งไปสืบสวนใช่หรือไม่?"
);
modalPopup.value = true;
// dialogConfirm(
// $q,
// () => confirmSentInvestigate(),
// "",
// "?"
// );
}
function closePopup() {
modalPopup.value = false;
}
/** ยืนยัน ยุติเรื่อง */
@ -212,5 +220,7 @@ onMounted(() => {
</div>
<Form :on-submit="onSubmit" :data="data" />
<Popup :modal="modalPopup" :close="closePopup" />
</div>
</template>

View file

@ -0,0 +1,239 @@
<script setup lang="ts">
import { ref, watch } from "vue";
import { useQuasar } from "quasar";
import type { QTableProps } from "quasar";
const $q = useQuasar();
import { useCounterMixin } from "@/stores/mixin";
import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
const complainstStore = useComplainstDataStore();
const mixin = useCounterMixin();
const { dialogConfirm, success } = mixin;
const props = defineProps({
modal: {
type: Boolean,
require: true,
},
close: {
type: Function,
require: true,
},
});
/** หัวตาราง */
const columns = ref<QTableProps["columns"]>([
{
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: "positionNo",
align: "left",
label: "ตำแหน่งเลขที่",
sortable: true,
field: "positionNo",
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 visibleColumns = ref<string[]>([
"no",
"idcard",
"name",
"positionNo",
"position",
"positionLevel",
"salary",
"organization",
]);
const selected = ref<any>([]);
const inspectionResults = ref<string>("");
const inputRef = ref<any>(null);
function onclickSend() {
inputRef.value.validate();
if (!inputRef.value.hasError) {
dialogConfirm(
$q,
async () => {
success($q, "ส่งข้อมูลไปสืบสวนสำเร็จ");
console.log(selected.value);
props.close?.();
},
"ยืนยันการส่งไปสืบสวน",
"ต้องการยืนยันการส่งไปสืบสวนหรือไม่"
);
}
}
function onClickClose() {
props.close?.();
}
watch([() => props.modal], () => {
inspectionResults.value = props.modal ? "" : "";
selected.value.push(complainstStore.rowsAdd);
});
</script>
<template>
<q-dialog v-model="props.modal">
<q-card style="width: 700px; max-width: 80vw">
<q-toolbar class="q-py-md">
<q-toolbar-title class="header-text">ลสงไปสบสวน </q-toolbar-title>
<q-btn
icon="close"
unelevated
round
dense
@click="onClickClose"
style="color: #ff8080; background-color: #ffdede"
/>
</q-toolbar>
<q-separator />
<q-card-section class="q-pt-none q-mt-md">
<d-table
ref="table"
:columns="columns"
:rows="complainstStore.rowsAdd"
row-key="id"
flat
bordered
:paging="true"
dense
class="custom-header-table"
:visible-columns="visibleColumns"
selection="multiple"
v-model:selected="selected"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width>
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
</q-th>
<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>
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
<div class="col-xs-12 col-sm-12 q-mt-sm">
<q-input
for="inputInspectionResults"
ref="inputRef"
dense
outlined
hide-bottom-space
v-model="inspectionResults"
:rules="[(val) => !!val || 'กรุณากรอกผลการตรวจสอบเรื่องร้องเรียน']"
lazy-rules
label="ผลการตรวจสอบเรื่องร้องเรียน"
type="textarea"
rows="5"
/>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white text-teal">
<q-btn label="ส่งไปสืบสวน" color="public" @click="onclickSend" />
</q-card-actions>
</q-card>
</q-dialog>
</template>
<style scoped></style>

View file

@ -152,7 +152,7 @@ onMounted(() => {
/>
</div>
</div>
<q-card flat bordered class="col-12">
<q-card flat class="col-12">
<q-tabs
v-model="store.tabMenu"
dense
@ -180,3 +180,9 @@ onMounted(() => {
<!-- <Form :on-submit="onSubmit" :data="data" /> -->
</div>
</template>
<style scoped>
.q-tab-panel {
padding: 0;
background-color: #f0f3f3;
}
</style>

View file

@ -1,8 +1,11 @@
<script setup lang="ts">
import router from "@/router";
import { onMounted, ref, watch, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { onMounted, ref, watch, reactive, computed } from "vue";
import { useQuasar } from "quasar";
import Dialogbody from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue";
import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/DirectorTable.vue";
import { useCounterMixin } from "@/stores/mixin";
import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
import type {
FormData,
@ -11,12 +14,14 @@ import type {
import { diffDates } from "@fullcalendar/core/internal";
const $q = useQuasar();
const route = useRoute();
/**เรียกใช้ store */
const investigateFactStore = useInvestigateFactStore();
const mixin = useCounterMixin();
const { filterFnOptionsType } = investigateFactStore;
const { date2Thai, dialogConfirm } = mixin;
const investigateDis = useInvestigateDisStore();
const complaintsOptions = ref<any>([]);
const isUpdate = ref<boolean>(false);
@ -49,6 +54,8 @@ const props = defineProps({
},
});
const filter = ref<string>("");
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<FormData>({
complaint: "",
@ -67,6 +74,7 @@ const formData = reactive<FormData>({
causeText: "",
complaintStatus: "",
});
const evidenceFiles = ref<any>([{ name: "ชื่อไฟล" }, { name: "ชื่อไฟล" }]);
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const objectInvestigate: MyObjectInvestigateRef = {
@ -85,6 +93,14 @@ const objectInvestigate: MyObjectInvestigateRef = {
causeText: causeTextRef,
};
const rows = ref([]);
const statusStep = computed(() => {
return route.name === "/discipline-disciplinaryEdit" ? true : false;
});
const initialPagination = ref<any>({
rowsPerPage: 0,
});
/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
function validateForm() {
const hasError = [];
@ -151,8 +167,23 @@ async function fetchDataDetail() {
formData.causeText = props.data.results;
}
}
const modal = ref<boolean>(false);
const filterKeyword2 = ref<string>("");
const type = ref<string>("");
/** เปิด dialog */
function onClickOpenPopup() {
modal.value = true;
filterKeyword2.value = "";
}
/** ฟังชั่นปิด dialog */
function clickClose() {
modal.value = false;
}
onMounted(async () => {
await fetchDataDetail();
console.log(route.name);
});
/**
@ -181,11 +212,11 @@ watch(props.data, async () => {
});
</script>
<template>
<q-card flat bordered class="q-mt-sm">
<q-card flat class="q-mt-sm">
<form @submit.prevent="validateForm">
<div class="q-pa-md q-col-gutter-md">
<div class="col-xs-12 row items-center q-col-gutter-md">
<div class="col-6">
<!-- <div class="col-6">
<q-select
for="#fault"
outlined
@ -212,9 +243,9 @@ watch(props.data, async () => {
</q-item>
</template>
</q-select>
</div>
</div> -->
<div class="col-3">
<!-- <div class="col-3">
<q-select
for="#fault"
outlined
@ -241,10 +272,12 @@ watch(props.data, async () => {
</q-item>
</template>
</q-select>
</div>
</div> -->
<div class="col-3">
<q-select
:readonly="statusStep"
:disable="statusStep"
for="#investigation"
outlined
hide-bottom-space
@ -301,7 +334,7 @@ watch(props.data, async () => {
>
นทบสวน
<q-checkbox
v-if="data != null"
v-if="formData.clickTime != null && statusStep === false"
for="#clickTime"
size="md"
v-model="formData.clickTime"
@ -318,7 +351,7 @@ watch(props.data, async () => {
<div class="col-3" v-if="!formData.clickTime">
<datepicker
menu-class-name="modalfix"
:readonly="isUpdate"
:readonly="isUpdate && statusStep"
v-model="formData.date"
:locale="'th'"
autoApply
@ -334,7 +367,7 @@ watch(props.data, async () => {
for="#date"
class="full-width cursor-pointer"
ref="dateRef"
:readonly="isUpdate"
:readonly="statusStep && isUpdate"
outlined
dense
lazy-rules
@ -345,9 +378,9 @@ watch(props.data, async () => {
"
:rules="[
(val) =>
!!val || `${'กรุณาเลือกวันที่เริ่มการสบสวน'}`,
!!val || `${'กรุณาเลือกวันที่เริ่มการสบสวน'}`,
]"
:label="`${'วันที่เริ่มการสบสวน'}`"
:label="`${'วันที่เริ่มการสบสวน'}`"
>
<template v-slot:prepend>
<q-icon
@ -399,7 +432,7 @@ watch(props.data, async () => {
<datepicker
menu-class-name="modalfix"
v-model="formData.dateEnd"
:readonly="isUpdate"
:readonly="statusStep && isUpdate"
:locale="'th'"
autoApply
:enableTimePicker="false"
@ -414,7 +447,7 @@ watch(props.data, async () => {
for="#dateEnd"
ref="dateEndRef"
class="full-width cursor-pointer"
:readonly="isUpdate"
:readonly="statusStep && isUpdate"
outlined
dense
lazy-rules
@ -425,9 +458,9 @@ watch(props.data, async () => {
"
:rules="[
(val) =>
!!val || `${'กรุณาเลือกวันที่สิ้นสุดการสบสวน'}`,
!!val || `${'กรุณาเลือกวันที่สิ้นสุดการสบสวน'}`,
]"
:label="`${'วันที่สิ้นสุดการสบสวน'}`"
:label="`${'วันที่สิ้นสุดการสบสวน'}`"
>
<template v-slot:prepend>
<q-icon
@ -446,7 +479,75 @@ watch(props.data, async () => {
</q-card>
</div>
<div class="col-12">
<div class="row col-12">
<q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
<div
class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
>
กรรมการ
<q-btn
size="12px"
flat
round
dense
color="add"
class="q-ml-sm"
icon="mdi-plus"
@click="onClickOpenPopup"
>
<q-tooltip>เพมกรรมการ</q-tooltip>
</q-btn>
</div>
<div class="col-12"><q-separator /></div>
<div class="col-xs-12 q-pa-sm row">
<Table
class="col-12"
style="max-height: 80vh"
:rows="rows"
:columns="investigateDis.columnsDirector"
:filter="filter"
:visible-columns="investigateDis.visibleColumnsDirector"
v-model:inputfilter="filter"
v-model:inputvisible="investigateDis.visibleColumnsDirector"
:pagination="initialPagination"
:nornmalData="true"
:paging="true"
:titleText="''"
>
<template #columns="props">
<q-tr :props="props" class="cursor-pointer">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<div v-if="col.name == 'no'" class="table_ellipsis2">
{{ props.rowIndex + 1 }}
</div>
<div v-else class="table_ellipsis2">
{{ col.value }}
</div>
</q-td>
<q-td>
<q-btn
dense
size="12px"
flat
round
color="red"
icon="mdi-delete"
>
<q-tooltip>ลบขอม</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
</Table>
</div>
</q-card>
</div>
<!-- <div class="col-12">
<q-input
for="#complaintdetail"
class="full-width cursor-pointer"
@ -463,9 +564,9 @@ watch(props.data, async () => {
:label="`${'รายละเอียดเรื่องร้องเรียน'}`"
type="textarea"
/>
</div>
</div> -->
<div class="col-12">
<!-- <div class="col-12">
<q-file
for="#fileComplaint"
outlined
@ -481,7 +582,7 @@ watch(props.data, async () => {
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
</div> -->
<div class="col-12">
<q-input
@ -500,30 +601,13 @@ watch(props.data, async () => {
/>
</div>
<div class="col-12">
<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 q-col-gutter-md">
<div class="col-3">
<q-select
for="#fault"
outlined
dense
:readonly="statusStep"
lazy-rules
ref="statusResultRef"
v-model="formData.statusResult"
@ -578,14 +662,99 @@ watch(props.data, async () => {
<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
<q-btn id="onSubmit" type="submit" label="บันทึก" color="secondary"
><q-tooltip>นท</q-tooltip></q-btn
>
</div>
</form>
</q-card>
<div class="col-12 row q-col-gutter-md q-mt-sm">
<div class="row col-12">
<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>
<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 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>
</q-item-section>
</q-item>
</q-list>
</div>
</q-card>
</div>
</div>
<Dialogbody
v-model:Modal="modal"
:clickClose="clickClose"
:rows2="investigateDis.rows2"
v-model:filterKeyword2="filterKeyword2"
v-model:type="type"
/>
</template>

View file

@ -158,7 +158,7 @@ onMounted(async () => {
/>
</div>
</div>
<q-card flat bordered class="col-12">
<q-card flat class="col-12">
<q-tabs
v-model="store.tabMenu"
dense
@ -176,10 +176,10 @@ onMounted(async () => {
<q-separator />
<q-tab-panels v-model="store.tabMenu" animated>
<q-tab-panel name="complaints">
<FormComplaints :on-submit="onSubmit" />
<FormComplaints :on-submit="onSubmit" :data="data" />
</q-tab-panel>
<q-tab-panel name="investigatefacts">
<FormInvestigatefacts :on-submit="onSubmit" />
<FormInvestigatefacts :on-submit="onSubmit" :data="data" />
</q-tab-panel>
<q-tab-panel name="disciplinary">
<FormDisciplinary :on-submit="onSubmit" :data="data" />
@ -189,3 +189,10 @@ onMounted(async () => {
<!-- <Form :on-submit="onSubmit" :data="data" /> -->
</div>
</template>
<style scoped>
.q-tab-panel {
padding: 0;
background-color: #f0f3f3;
}
</style>

View file

@ -88,12 +88,16 @@ const formData = reactive<FormData>({
recordAccuser: "",
witnesses: "",
InvestResults: "",
complaintStatus:"",
complaintStatus: "",
filesEvidence: null,
filesRecordAccuser: null,
filesWitnesses: null,
filesEtc: null,
});
const filesEvidence = ref<any>([{ name: "ชื่อไฟล" }, { name: "ชื่อไฟล" }]);
const filesRecordAccuser = ref<any>([{ name: "ชื่อไฟล" }, { name: "ชื่อไฟล" }]);
const filesWitnesses = ref<any>([{ name: "ชื่อไฟล" }, { name: "ชื่อไฟล" }]);
const filesEtc = ref<any>([{ name: "ชื่อไฟล" }, { name: "ชื่อไฟล" }]);
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const objectdisciplinary: disciplinaryRef = {
@ -156,6 +160,7 @@ async function fileUploadDoc(files: any) {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file);
});
console.log(fileDocDataUpload.value);
}
/**
@ -230,6 +235,10 @@ watch(props.data, async () => {
formData.filesEtc = props.data.filesEtc;
});
function uploadData() {
console.log("อัปโหลไฟล");
}
/**
* งขอมลจำลองไปย store
*/
@ -260,10 +269,10 @@ onMounted(async () => {
<div class="col-xs-12 col-sm-12 col-md-11">
<form @submit.prevent="validateForm">
<div class="col-12">
<q-card bordered>
<q-card>
<div class="col-12 row q-pa-md">
<div class="col-12 row q-col-gutter-md">
<div class="col-12">
<!-- <div class="col-12">
<q-select
for="#fault"
outlined
@ -286,9 +295,9 @@ onMounted(async () => {
</q-item>
</template>
</q-select>
</div>
</div> -->
<datepicker
<!-- <datepicker
menu-class-name="modalfix"
v-model="dateInvestigate"
ref="dateInvestigateRef"
@ -330,14 +339,14 @@ onMounted(async () => {
</template>
</q-input>
</template>
</datepicker>
</datepicker> -->
<datepicker
menu-class-name="modalfix"
ref="dateAllegationRef"
for="#dateAllegation"
v-model="dateAllegation"
class="col-xs-12 col-sm-4"
class="col-xs-12 col-sm-6"
:locale="'th'"
autoApply
borderless
@ -384,7 +393,7 @@ onMounted(async () => {
v-model="dateEvident"
:locale="'th'"
autoApply
class="col-xs-12 col-sm-4"
class="col-xs-12 col-sm-6"
borderless
:enableTimePicker="false"
week-start="0"
@ -499,7 +508,7 @@ onMounted(async () => {
</q-card>
</div>
<q-input
class="col-xs-12 col-sm-6"
class="col-xs-12 col-sm-3"
dense
outlined
ref="casefaultRef"
@ -512,7 +521,7 @@ onMounted(async () => {
/>
<q-input
class="col-xs-12 col-sm-6"
class="col-xs-12 col-sm-3"
dense
hide-bottom-space
outlined
@ -524,7 +533,7 @@ onMounted(async () => {
lazy-rules
/>
<q-select
<!-- <q-select
dense
class="col-xs-12 col-sm-3"
outlined
@ -538,7 +547,7 @@ onMounted(async () => {
hide-bottom-space
:options="investigateDis.optionsTypefault"
label="ลักษณะความผิด"
/>
/> -->
<q-select
dense
@ -557,7 +566,7 @@ onMounted(async () => {
/>
<q-input
class="col-xs-12 col-sm-6"
class="col-xs-12 col-sm-3"
dense
for="#refLaw"
hide-bottom-space
@ -571,7 +580,7 @@ onMounted(async () => {
lazy-rules
/>
<q-input
<!-- <q-input
class="col-12"
dense
outlined
@ -582,9 +591,9 @@ onMounted(async () => {
label="รายละเอียดเรื่องร้องเรียน"
type="textarea"
:rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดเรื่องร้องเรียน'}`]"
/>
/> -->
<q-input
<!-- <q-input
class="col-12"
dense
outlined
@ -595,148 +604,49 @@ onMounted(async () => {
label="รายละเอียดสืบสวนข้อเท็จจริง"
type="textarea"
:rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดสืบสวนข้อเท็จจริง'}`]"
/> -->
<q-input
class="col-xs-12 col-sm-6"
dense
outlined
for="#evidence"
ref="evidenceRef"
hide-bottom-space
v-model="formData.evidence"
label="สรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
type="textarea"
:rules="[(val:string) => !!val || `${'กรุณากรอกสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา'}`]"
/>
<div class="row col-12">
<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>
<div class="col-xs-12 q-pa-sm row">
<q-input
class="col-12"
dense
outlined
for="#evidence"
ref="evidenceRef"
hide-bottom-space
v-model="formData.evidence"
label="สรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
type="textarea"
:rules="[(val:string) => !!val || `${'กรุณากรอกสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา'}`]"
/>
<q-file
class="col-12 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>
</q-card>
</div>
<div class="row col-12">
<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>
<div class="col-xs-12 q-pa-sm row">
<q-input
class="col-12"
dense
outlined
ref="recordAccuserRef"
for="#recordAccuser"
v-model="formData.recordAccuser"
label="บันทึกถ้อยคำของผู้กล่าวหา"
hide-bottom-space
type="textarea"
:rules="[(val:string) => !!val || `${'กรุณากรอกบันทึกถ้อยคำของผู้กล่าวหา'}`]"
/>
<q-file
class="col-12 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>
</q-card>
</div>
<div class="row col-12">
<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>
<div class="col-xs-12 q-pa-sm row">
<q-input
class="col-12"
dense
outlined
for="#witnesses"
ref="witnessesRef"
v-model="formData.witnesses"
label="พยานและการบันทึกถ้อยคำ"
hide-bottom-space
type="textarea"
:rules="[(val:string) => !!val || `${'กรุณากรอกพยานและการบันทึกถ้อยคำ'}`]"
/>
<q-file
class="col-12 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>
</q-card>
</div>
<q-input
class="col-12"
class="col-xs-12 col-sm-6"
dense
outlined
ref="recordAccuserRef"
for="#recordAccuser"
v-model="formData.recordAccuser"
label="บันทึกถ้อยคำของผู้กล่าวหา"
hide-bottom-space
type="textarea"
:rules="[(val:string) => !!val || `${'กรุณากรอกบันทึกถ้อยคำของผู้กล่าวหา'}`]"
/>
<q-input
class="col-xs-12 col-sm-6"
dense
outlined
for="#witnesses"
ref="witnessesRef"
v-model="formData.witnesses"
label="พยานและการบันทึกถ้อยคำ"
hide-bottom-space
type="textarea"
:rules="[(val:string) => !!val || `${'กรุณากรอกพยานและการบันทึกถ้อยคำ'}`]"
/>
<q-input
class="col-xs-12 col-sm-6"
dense
outlined
for="#InvestResults"
@ -747,24 +657,6 @@ onMounted(async () => {
type="textarea"
:rules="[(val:string) => !!val || `${'กรุณากรอกผลการสอบสวน'}`]"
/>
<q-file
class="col-12"
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>
</div>
<q-separator />
@ -780,6 +672,356 @@ onMounted(async () => {
>
</div>
</q-card>
<div class="col-12 row q-col-gutter-md q-mt-sm">
<div class="row col-12">
<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>
<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 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>
</q-item-section>
</q-item>
</q-list>
</div>
</q-card>
</div>
<div class="row col-12">
<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>
<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 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>
</q-item-section>
</q-item>
</q-list>
</div>
</q-card>
</div>
<div class="row col-12">
<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>
<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 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>
</q-item-section>
</q-item>
</q-list>
</div>
</q-card>
</div>
<div class="row col-12">
<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>
<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 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>
</q-item-section>
</q-item>
</q-list>
</div>
</q-card>
</div>
</div>
</div>
</form>
</div>