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

Merge branch 'develop' into devTee

Browse source
This commit is contained in:
setthawutttty 2024-01-30 15:12:36 +07:00
commit 2ac556dcd6
9 changed files with 1688 additions and 1615 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/modules/02_organizationalNew/components/DialogFormAgency.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, watch } from "vue"; import { ref, reactive, watch, computed } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
@ -211,19 +211,37 @@ watch(
formData.orgPhoneIn = props.dataNode.orgTreePhoneIn; formData.orgPhoneIn = props.dataNode.orgTreePhoneIn;
formData.orgFax = props.dataNode.orgTreeFax; formData.orgFax = props.dataNode.orgTreeFax;
formData.orgLevel = props.dataNode.orgTreeRank; formData.orgLevel = props.dataNode.orgTreeRank;
orgLevelOption.value = orgLevelOptionMain.value; orgLevelOption.value = orgLevelOptionMain.value.slice(1, 4);
} }
} }
} }
} }
); );
const tittleName = computed(() => {
let name = "";
if (actionType.value === "ADD") {
if (level.value === 1) {
name = "เพิ่มหน่วยงาน";
} else {
name = "เพิ่มส่วนราชการ";
}
} else {
if (level.value === 0) {
name = "แก้ไขหน่วยงาน";
} else {
name = "แก้ไขเพิ่มส่วนราชการ";
}
}
return name;
});
</script> </script>
<template> <template>
<template> <template>
<q-dialog v-model="props.modal" persistent> <q-dialog v-model="props.modal" persistent>
<q-card style="min-width: 50vw"> <q-card style="min-width: 50vw">
<form @submit.prevent="validateForm"> <form @submit.prevent="validateForm">
<DialogHeader :tittle="`เพิ่มหน่วยงาน`" :close="closeClear" /> <DialogHeader :tittle="tittleName" :close="closeClear" />
<q-separator /> <q-separator />
<q-card-section> <q-card-section>
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
@ -246,9 +264,9 @@ watch(
dense dense
outlined outlined
for="#shortName" for="#shortName"
label="ชื่อย่อ" label="อักษรย่อ"
hide-bottom-space hide-bottom-space
:rules="[(val) => !!val || `${'กรุณากรอกชื่อย่อ'}`]" :rules="[(val) => !!val || `${'กรุณากรอกอักษรย่อ'}`]"
/> />
</div> </div>
<div class="col-2"> <div class="col-2">

71
src/modules/02_organizationalNew/components/StructureDetail.vue
View file

@ -1,31 +1,60 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, watch } from "vue"; import { ref, reactive, watch } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin"; import http from "@/plugins/http";
import config from "@/app.config";
import type { HistoryType } from "@/modules/02_organizationalNew/interface/index/Main"; import type { HistoryType } from "@/modules/02_organizationalNew/interface/index/Main";
import DialogHeader from "@/components/DialogHeader.vue"; import DialogHeader from "@/components/DialogHeader.vue";
import http from "@/plugins/http"; import { useCounterMixin } from "@/stores/mixin";
import config from "@/app.config"; import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
const modal = defineModel<boolean>("structureDetail", { required: true });
const $q = useQuasar(); const $q = useQuasar();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const store = useOrganizational();
const { showLoader, hideLoader, messageError, date2Thai } = mixin; const { showLoader, hideLoader, messageError, date2Thai } = mixin;
const modal = defineModel<boolean>("structureDetail", { required: true });
const treeId = defineModel<string>("treeId", { required: true });
const orgLevel = defineModel<number>("orgLevel", { required: true });
const formData = reactive<any>({ const formData = reactive<any>({
orgName: "สำนักงาน ก.ก.", orgName: "",
agencyName: "กลุ่มงานสารสนเทศฯศูนย์สารสนเทศ", //*ส่วนราชการ agencyName: "", //*ส่วนราชการ
orgType: "ส่วนราชการ", //*ประเภท orgType: "", //*ประเภท
orgLevel: "กลุ่มงาน", //*ระดับ orgLevel: "", //*ระดับ
status: "ปกติ", //*สถานะ status: "", //*สถานะ
orgPhoneEx: "0111111111", //หมายเลขโทรศัพท์ที่ติดต่อจากภายนอก orgPhoneEx: "", //หมายเลขโทรศัพท์ที่ติดต่อจากภายนอก
orgPhoneIn: "0333333333", //หมายเลขโทรศัพท์ที่ติดต่อจากภายใน orgPhoneIn: "", //หมายเลขโทรศัพท์ที่ติดต่อจากภายใน
orgFax: "023123456", //หมายเลขโทรสาร orgFax: "", //หมายเลขโทรสาร
orgShortName: "",
}); });
async function fetchDetailTree(id: string, type: string) {
await http
.get(config.API.orgLevelByid(type.toLocaleLowerCase(), id))
.then((res) => {
const data = res.data.result;
formData.orgName = data[`org${type}Name`];
formData.agencyName = data[`org${type}Name`];
formData.orgType = data[`org${type}Name`];
formData.orgLevel = data[`org${type}Rank`];
formData.status = data[`org${type}Name`];
formData.orgPhoneEx = data[`org${type}PhoneEx`];
formData.orgPhoneIn = data[`org${type}PhoneIn`];
formData.orgFax = data[`org${type}Fax`];
formData.orgShortName = data[`org${type}ShortName`];
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
function close() { function close() {
modal.value = false; modal.value = false;
} }
@ -34,6 +63,8 @@ watch(
() => modal.value, () => modal.value,
() => { () => {
if (modal.value == true) { if (modal.value == true) {
const type = store.checkLevel(orgLevel.value);
fetchDetailTree(treeId.value, type);
} }
} }
); );
@ -53,7 +84,7 @@ watch(
</div> </div>
</div> </div>
<div class="col-8 text-grey-8"> <div class="col-8 text-grey-8">
<p>{{ formData.orgName }}</p> <p>{{ formData.orgName }} ({{ formData.orgShortName }})</p>
</div> </div>
</div> </div>
<div class="row q-col-gutter-sm q-mb-xs"> <div class="row q-col-gutter-sm q-mb-xs">
@ -103,13 +134,21 @@ watch(
</div> </div>
</div> </div>
<div class="col-8 text-grey-8"> <div class="col-8 text-grey-8">
<p class="q-ma-none">{{ formData.orgPhoneEx ? `ภายนอก ${formData.orgPhoneEx}`:'' }}</p> <p class="q-ma-none">
{{
formData.orgPhoneEx ? `ภายนอก ${formData.orgPhoneEx}` : ""
}}
</p>
</div> </div>
</div> </div>
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<div class="offset-4 col-8 text-grey-8"> <div class="offset-4 col-8 text-grey-8">
<p>{{ formData.orgPhoneIn ? `ภายใน ${formData.orgPhoneIn}`:'' }}</p> <p>
{{
formData.orgPhoneIn ? `ภายใน ${formData.orgPhoneIn}` : ""
}}
</p>
</div> </div>
</div> </div>

15
src/modules/02_organizationalNew/components/mainTree.vue
View file

@ -242,6 +242,8 @@ function searchAndReplace(
const dialogAgency = ref<boolean>(false); const dialogAgency = ref<boolean>(false);
const actionType = ref<string>(""); const actionType = ref<string>("");
const dataNode = ref<any>(); const dataNode = ref<any>();
const treeId = ref<string>("");
function onClickAgency(level: number, node: any) { function onClickAgency(level: number, node: any) {
dialogAgency.value = !dialogAgency.value; dialogAgency.value = !dialogAgency.value;
orgLevel.value = level; orgLevel.value = level;
@ -250,9 +252,10 @@ function onClickAgency(level: number, node: any) {
} }
const dialogDetail = ref<boolean>(false); const dialogDetail = ref<boolean>(false);
function onClickDetail() { function onClickDetail(id: string, level: number) {
console.log(dialogDetail.value); treeId.value = id;
dialogDetail.value = !dialogDetail.value; dialogDetail.value = !dialogDetail.value;
orgLevel.value = level;
} }
async function onClickEdit(node: any) { async function onClickEdit(node: any) {
@ -403,7 +406,7 @@ onMounted(async () => {
: item.type === 'ADD' : item.type === 'ADD'
? onClickAgency(prop.node.orgLevel + 1, prop.node) ? onClickAgency(prop.node.orgLevel + 1, prop.node)
: item.type === 'DETAIL' : item.type === 'DETAIL'
? onClickDetail() ? onClickDetail(prop.node.orgTreeId, prop.node.orgLevel)
: item.type === 'DEL' : item.type === 'DEL'
? onClickDel(prop.node.orgLevel, prop.node.orgTreeId) ? onClickDel(prop.node.orgLevel, prop.node.orgTreeId)
: null : null
@ -478,7 +481,11 @@ onMounted(async () => {
/> />
<!-- รายละเอียดโครงสร้าง --> <!-- รายละเอียดโครงสร้าง -->
<DialogStructureDetail v-model:structure-detail="dialogDetail" /> <DialogStructureDetail
v-model:structure-detail="dialogDetail"
v-model:treeId="treeId"
v-model:orgLevel="orgLevel"
/>
</template> </template>
<style scoped></style> <style scoped></style>

318
src/modules/11_discipline/components/1_Complaint/Form.vue
View file

@ -373,11 +373,11 @@ onMounted(() => {
<q-separator /> <q-separator />
</div> </div>
<form @submit.prevent="validateForm"> <form @submit.prevent="validateForm" class="col-12 row">
<div class="col-12 row"> <div class="col-12 row">
<div class="col-sm-12 col-md-9 row no-wrap"> <div class="col-sm-12 col-md-9 row no-wrap">
<div class="col-12 row q-pa-md"> <div class="col-12 row q-pl-md q-py-md">
<div class="row q-col-gutter-md"> <div class="row col-12 q-col-gutter-md">
<div class="col-xs-12 col-sm-4" id="respondentType"> <div class="col-xs-12 col-sm-4" id="respondentType">
<q-select <q-select
:class="inputEdit(isReadonly)" :class="inputEdit(isReadonly)"
@ -413,7 +413,7 @@ onMounted(() => {
</div> </div>
<div <div
class="col-xs-12 col-sm-4" class="col-xs-12 col-sm-8"
v-if="formData.respondentType === 'ORGANIZATION'" v-if="formData.respondentType === 'ORGANIZATION'"
id="organizationId" id="organizationId"
> >
@ -439,7 +439,7 @@ onMounted(() => {
/> />
</div> </div>
<div class="col-xs-12 col-sm-4" id="consideredAgency"> <div class="col-xs-12 col-sm-8" id="consideredAgency">
<q-select <q-select
:class="inputEdit(isReadonly)" :class="inputEdit(isReadonly)"
ref="consideredAgencyRef" ref="consideredAgencyRef"
@ -502,87 +502,87 @@ onMounted(() => {
</div> </div>
<div class="col-12"><q-separator /></div> <div class="col-12"><q-separator /></div>
<div class="col-xs-12 q-pa-sm"> <div class="col-12 row q-pa-sm">
<d-table <d-table
ref="table" ref="table"
:columns="mainStore.columnsRespondent" :columns="mainStore.columnsRespondent"
:rows="mainStore.rowsAdd" :rows="mainStore.rowsAdd"
row-key="idcard" row-key="idcard"
flat flat
bordered bordered
:paging="true" :paging="true"
dense dense
class="custom-header-table" class="col-12"
:visible-columns="mainStore.visibleColumnsRespondent" :visible-columns="mainStore.visibleColumnsRespondent"
> >
<template v-slot:header="props"> <template v-slot:header="props">
<q-tr :props="props"> <q-tr :props="props">
<q-th auto-width></q-th> <q-th auto-width></q-th>
<q-th <q-th
v-for="col in props.cols" v-for="col in props.cols"
:key="col.name" :key="col.name"
:props="props" :props="props"
style="color: #000000; font-weight: 500" style="color: #000000; font-weight: 500"
>
<span class="text-weight-medium">{{
col.label
}}</span>
</q-th>
<q-th auto-width></q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<td>
<q-btn
dense
flat
round
color="info"
icon="info"
@click="onclickViewinfo(props.row.personId)"
> >
<q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip> <span class="text-weight-medium">{{
</q-btn> col.label
</td> }}</span>
<q-td </q-th>
v-for="col in props.cols" <q-th auto-width></q-th>
:key="col.name" </q-tr>
:props="props" </template>
> <template v-slot:body="props">
<div v-if="col.name == 'no'"> <q-tr :props="props" class="cursor-pointer">
{{ props.rowIndex + 1 }} <td>
</div> <q-btn
<div dense
v-else-if="col.name === 'organization'" flat
class="table_ellipsis" round
color="info"
icon="info"
@click="onclickViewinfo(props.row.personId)"
>
<q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
</q-btn>
</td>
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
> >
{{ props.row.organization }} <div v-if="col.name == 'no'">
</div> {{ props.rowIndex + 1 }}
<div v-else-if="col.name === 'salary'"> </div>
{{ props.row.salary.toLocaleString() }} <div
</div> v-else-if="col.name === 'organization'"
<div v-else> class="table_ellipsis"
{{ col.value }} >
</div> {{ props.row.organization }}
</q-td> </div>
<q-td auto-width> <div v-else-if="col.name === 'salary'">
<q-btn {{ props.row.salary.toLocaleString() }}
v-if="!isReadonly" </div>
size="12px" <div v-else>
flat {{ col.value }}
round </div>
dense </q-td>
color="red" <q-td auto-width>
class="q-ml-sm" <q-btn
icon="mdi-delete-outline" v-if="!isReadonly"
@click="deletePerson(props.row.personId)" size="12px"
><q-tooltip>ลบผู้ถูกร้องเรียน</q-tooltip></q-btn flat
> round
</q-td> dense
</q-tr> color="red"
</template> class="q-ml-sm"
</d-table> icon="mdi-delete-outline"
@click="deletePerson(props.row.personId)"
><q-tooltip>ลบผู้ถูกร้องเรียน</q-tooltip></q-btn
>
</q-td>
</q-tr>
</template>
</d-table>
</div> </div>
</q-card> </q-card>
</div> </div>
@ -883,7 +883,7 @@ onMounted(() => {
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 row"><q-separator vertical /></div> <div class="row"><q-separator vertical /></div>
</div> </div>
<!-- อัพโหลดไฟล์ --> <!-- อัพโหลดไฟล์ -->
@ -902,82 +902,90 @@ onMounted(() => {
}} }}
</div> </div>
<div class="col-12"><q-separator /></div> <div class="col-12"><q-separator /></div>
<div class="row col-12 q-col-gutter-y-sm q-pa-sm">
<div <div
v-if="!isReadonly && formData.id !== ''" v-if="!isReadonly && formData.id !== ''"
class="col-12 q-pa-sm row" class="col-12 row"
>
<q-file
for="inputFiles"
class="col-12"
outlined
dense
v-model="formData.documentFile"
@added="fileUploadDoc"
label="ไฟล์เอกสารหลักฐาน"
hide-bottom-space
lazy-rules
accept=".pdf,.xlsx,.docx,.png,.jpg"
clearable
> >
<template v-slot:prepend> <q-file
<q-icon name="attach_file" color="primary" /> for="inputFiles"
</template> class="col-12"
<template v-slot:after> outlined
<q-btn
size="14px"
flat
round
dense dense
color="add" v-model="formData.documentFile"
icon="mdi-upload" @added="fileUploadDoc"
@click="upLoadFileDoc()" label="ไฟล์เอกสารหลักฐาน"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn> hide-bottom-space
</template> lazy-rules
</q-file> accept=".pdf,.xlsx,.docx,.png,.jpg"
clearable
<!-- <div class="col-1 self-center" v-if="formData.documentFile"></div> --> >
</div> <template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
<div v-if="fileList.length > 0" class="col-xs-12 q-pa-sm row"> </template>
<q-list <template v-slot:after>
v-for="data in fileList" <q-btn
:key="data.id" size="14px"
class="full-width" v-if="formData.documentFile"
bordered
separator
>
<q-item clickable v-ripple>
<q-item-section>{{ data.fileName }}</q-item-section>
<q-space />
<q-btn
size="12px"
flat flat
round round
dense dense
color="blue" color="add"
icon="mdi-download" icon="mdi-upload"
@click="downloadFile(data.pathName)" @click="upLoadFileDoc()"
><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn>
> </template>
<q-btn </q-file>
v-if="!isReadonly"
size="12px"
flat
round
dense
color="red"
class="q-ml-sm"
icon="mdi-delete-outline"
@click="deleteFile(data.id)"
><q-tooltip>ลบไฟล์</q-tooltip></q-btn
>
</q-item>
</q-list>
</div>
<div class="col-12 q-pa-sm" v-else> <!-- <div class="col-1 self-center" v-if="formData.documentFile"></div> -->
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card> </div>
<div v-if="fileList.length > 0" class="col-xs-12 row">
<q-list
class="full-width rounded-borders"
bordered
separator
>
<q-item
clickable
v-ripple
v-for="data in fileList"
:key="data.id"
class="items-center"
>
<q-item-section>{{ data.fileName }}</q-item-section>
<q-space />
<div>
<q-btn
size="12px"
flat
round
dense
color="blue"
icon="mdi-download"
@click="downloadFile(data.pathName)"
><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
>
<q-btn
v-if="!isReadonly"
size="12px"
flat
round
dense
color="red"
class="q-ml-sm"
icon="mdi-delete-outline"
@click="deleteFile(data.id)"
><q-tooltip>ลบไฟล์</q-tooltip></q-btn
>
</div>
</q-item>
</q-list>
</div>
<div class="col-12" v-else>
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
</div>
</div> </div>
</q-card> </q-card>
</div> </div>

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

@ -655,229 +655,225 @@ onMounted(async () => {
</q-banner> </q-banner>
<q-separator /> <q-separator />
</div> </div>
<form @submit.prevent="validateForm"> <form @submit.prevent="validateForm" class="col-12 row">
<div class="col-12 row"> <div class="col-12 row">
<div class="col-sm-12 col-md-9 row no-wrap"> <div class="col-sm-12 col-md-9 row no-wrap">
<div class="col-12 row q-pa-md"> <div class="col-12 row q-pl-md q-py-md">
<div class="row q-col-gutter-md"> <div class="row col-12 q-col-gutter-md">
<div class="col-xs-12 row q-col-gutter-md"> <div class="col-xs-12 col-sm-5" id="respondentType">
<div class="col-xs-12 col-sm-3" id="respondentType"> <q-select
<q-select :class="inputEdit(isReadonly)"
:class="inputEdit(isReadonly)" for="SelectrespondentType"
for="SelectrespondentType" v-model="formData.respondentType"
v-model="formData.respondentType" ref="respondentTypeRef"
ref="respondentTypeRef" dense
dense outlined
outlined :readonly="isReadonly"
:readonly="isReadonly" label="ผู้ถูกร้องเรียน"
label="ผู้ถูกร้องเรียน" option-value="id"
option-value="id" option-label="name"
option-label="name" emit-value
emit-value use-input
use-input map-options
map-options hide-bottom-space
hide-bottom-space :options="investigateFactStore.respondentTypeOps"
:options="investigateFactStore.respondentTypeOps" @filter="(inputValue: any,
@filter="(inputValue: any, doneFn: Function) => investigateFactStore.filterSelector(inputValue, doneFn, 'filterrespondentType'
doneFn: Function) => investigateFactStore.filterSelector(inputValue, doneFn, 'filterrespondentType' )"
)" @update:model-value="changeFormData()"
@update:model-value="changeFormData()"
>
<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-xs-12 col-sm-3"
v-if="formData.respondentType === 'ORGANIZATION'"
id="organizationId"
> >
<q-select <template v-slot:no-option>
:class="inputEdit(isReadonly)" <q-item>
for="inputOffice" <q-item-section class="text-grey">
name="organizationId" ไม่มีข้อมูล
ref="organizationIdRef" </q-item-section>
dense </q-item>
hide-bottom-space </template>
:readonly="isReadonly" </q-select>
outlined
option-label="name"
option-value="id"
emit-value
map-options
v-model="formData.organizationId"
:options="investigateFactStore.organizationIdOp"
label="เลือกสำนักงาน"
clearable
@update:model-value="changeFormData()"
/>
</div>
<div
class="col-xs-12 col-sm-4"
v-if="
route.name === 'disciplineInvestigatefactsEdit' &&
mainStore.rowsCheck.length > 0
"
>
<q-btn
class="q-pa-sm"
color="orange"
label="ส่งรายชื่อไปออกคำสั่งยุติเรื่อง"
@click="openModal"
/>
</div>
<div
class="row col-12"
v-if="formData.respondentType === 'PERSON'"
>
<q-card
bordered
class="row col-12"
style="border: 1px solid #d6dee1"
>
<div
class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
>
ผู้ถูกร้องเรียน
<q-btn
v-if="!isReadonly"
size="12px"
flat
round
dense
color="add"
class="q-ml-sm"
@click="toggleModal"
icon="mdi-plus"
>
<q-tooltip>เพิ่มผู้ถูกร้องเรียน</q-tooltip>
</q-btn>
</div>
<div class="col-12"><q-separator /></div>
<div class="col-xs-12 q-pa-sm">
<d-table
ref="table"
:columns="mainStore.columnsRespondent"
:rows="mainStore.rowsAdd"
row-key="idcard"
flat
bordered
:paging="true"
dense
class="custom-header-table"
:visible-columns="mainStore.visibleColumnsRespondent"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width></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-th auto-width></q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<td>
<q-btn
dense
flat
round
color="info"
icon="info"
@click="onclickViewinfo(props.row.personId)"
>
<q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
</q-btn>
</td>
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div
v-else-if="col.name === 'organization'"
class="table_ellipsis"
>
{{ props.row.organization }}
</div>
<div v-else-if="col.name === 'salary'">
{{ props.row.salary.toLocaleString() }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
v-if="!isReadonly && props.row.isAncestorDNA === false"
size="12px"
flat
round
dense
color="red"
class="q-ml-sm"
icon="mdi-delete-outline"
@click="deletePerson(props.row.personId)"
><q-tooltip>ลบผู้ถูกร้องเรียน</q-tooltip></q-btn
>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</q-card>
</div>
<div class="col-xs-12 col-sm-3">
<q-select
:class="inputEdit(isReadonly)"
:readonly="isReadonly"
for="#investigationDetail"
outlined
hide-bottom-space
dense
ref="investigationDetailRef"
v-model="formData.investigationDetail"
:options="investigateFactStore.investigationDetailOp"
label="ลักษณะการสืบสวน"
emit-value
map-options
clearable
option-label="name"
option-value="id"
use-input
@filter="(inputValue: any,
doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'investigationOp'
)"
@update:model-value="changeFormData()"
><template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไม่มีข้อมูล
</q-item-section>
</q-item>
</template>
</q-select>
</div>
</div> </div>
<div
class="col-xs-12 col-sm-7"
v-if="formData.respondentType === 'ORGANIZATION'"
id="organizationId"
>
<q-select
:class="inputEdit(isReadonly)"
for="inputOffice"
name="organizationId"
ref="organizationIdRef"
dense
hide-bottom-space
:readonly="isReadonly"
outlined
option-label="name"
option-value="id"
emit-value
map-options
v-model="formData.organizationId"
:options="investigateFactStore.organizationIdOp"
label="เลือกสำนักงาน"
clearable
@update:model-value="changeFormData()"
/>
</div>
<div
class="col-xs-12 col-sm-4"
v-if="
route.name === 'disciplineInvestigatefactsEdit' &&
mainStore.rowsCheck.length > 0
"
>
<q-btn
class="q-pa-sm"
color="orange"
label="ส่งรายชื่อไปออกคำสั่งยุติเรื่อง"
@click="openModal"
/>
</div>
<div class="col-xs-12 col-sm-5">
<q-select
:class="inputEdit(isReadonly)"
:readonly="isReadonly"
for="#investigationDetail"
outlined
hide-bottom-space
dense
ref="investigationDetailRef"
v-model="formData.investigationDetail"
:options="investigateFactStore.investigationDetailOp"
label="ลักษณะการสืบสวน"
emit-value
map-options
clearable
option-label="name"
option-value="id"
use-input
@filter="(inputValue: any,
doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'investigationOp'
)"
@update:model-value="changeFormData()"
><template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไม่มีข้อมูล
</q-item-section>
</q-item>
</template>
</q-select>
</div>
<div
class="row col-12"
v-if="formData.respondentType === 'PERSON'"
>
<q-card
bordered
class="row col-12"
style="border: 1px solid #d6dee1"
>
<div
class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
>
ผู้ถูกร้องเรียน
<q-btn
v-if="!isReadonly"
size="12px"
flat
round
dense
color="add"
class="q-ml-sm"
@click="toggleModal"
icon="mdi-plus"
>
<q-tooltip>เพิ่มผู้ถูกร้องเรียน</q-tooltip>
</q-btn>
</div>
<div class="col-12"><q-separator /></div>
<div class="col-xs-12 q-pa-sm">
<d-table
ref="table"
:columns="mainStore.columnsRespondent"
:rows="mainStore.rowsAdd"
row-key="idcard"
flat
bordered
:paging="true"
dense
class="custom-header-table"
:visible-columns="mainStore.visibleColumnsRespondent"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width></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-th auto-width></q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<td>
<q-btn
dense
flat
round
color="info"
icon="info"
@click="onclickViewinfo(props.row.personId)"
>
<q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
</q-btn>
</td>
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div
v-else-if="col.name === 'organization'"
class="table_ellipsis"
>
{{ props.row.organization }}
</div>
<div v-else-if="col.name === 'salary'">
{{ props.row.salary.toLocaleString() }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
v-if="!isReadonly && props.row.isAncestorDNA === false"
size="12px"
flat
round
dense
color="red"
class="q-ml-sm"
icon="mdi-delete-outline"
@click="deletePerson(props.row.personId)"
><q-tooltip>ลบผู้ถูกร้องเรียน</q-tooltip></q-btn
>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</q-card>
</div>
<div <div
v-if="formData.investigationDetail === 'OTHER'" v-if="formData.investigationDetail === 'OTHER'"
class="col-12" class="col-12"
@ -1368,7 +1364,7 @@ onMounted(async () => {
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 row"><q-separator vertical /></div> <div class="row"><q-separator vertical /></div>
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-3"> <div class="col-xs-12 col-sm-12 col-md-3">
<div class="q-col-gutter-md row q-pa-md"> <div class="q-col-gutter-md row q-pa-md">
@ -1378,87 +1374,91 @@ onMounted(async () => {
อัปโหลดไฟล์เอกสารที่เกี่ยวข้องกับการสืบสวน อัปโหลดไฟล์เอกสารที่เกี่ยวข้องกับการสืบสวน
</div> </div>
<div class="col-12"><q-separator /></div> <div class="col-12"><q-separator /></div>
<div class="row col-12 q-col-gutter-y-sm q-pa-sm">
<div <div
v-if="!isReadonly && formData.id !== ''" v-if="!isReadonly && formData.id !== ''"
class="col-12 q-pa-sm row" class="col-12 row"
>
<q-file
class="col-11"
for="#evidenceFiles"
outlined
dense
v-model="formData.evidenceFiles"
label="เอกสารที่เกี่ยวข้องกับการสืบสวน"
hide-bottom-space
> >
<template v-slot:prepend> <q-file
<q-icon name="attach_file" color="primary" /> class="col-12"
</template> for="#evidenceFiles"
<template v-slot:after> outlined
<q-btn dense
v-if="formData.evidenceFiles" v-model="formData.evidenceFiles"
size="14px" label="เอกสารที่เกี่ยวข้องกับการสืบสวน"
flat hide-bottom-space
round >
dense <template v-slot:prepend>
color="add" <q-icon name="attach_file" color="primary" />
icon="mdi-upload" </template>
@click="uploadFileRelevant" <template v-slot:after>
><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn> <q-btn
</template> v-if="formData.evidenceFiles"
</q-file> size="14px"
</div> flat
round
<div dense
v-if="props.data.disciplineInvestigateRelevantDocs.length > 0" color="add"
class="col-xs-12 q-pa-sm row" icon="mdi-upload"
> @click="uploadFileRelevant"
<q-list ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn>
v-for="file in props.data.disciplineInvestigateRelevantDocs" </template>
:key="file.id" </q-file>
class="full-width" </div>
bordered
separator <div
v-if="props.data.disciplineInvestigateRelevantDocs.length > 0"
class="col-xs-12 row"
> >
<q-item clickable v-ripple> <q-list
<q-item-section>{{ file.fileName }}</q-item-section> class="full-width rounded-borders"
<q-item-section avatar> bordered
<div class="row"> separator
<div> >
<q-btn <q-item
dense v-for="file in props.data.disciplineInvestigateRelevantDocs"
flat :key="file.id"
round clickable
size="12px" v-ripple
color="blue" >
icon="mdi-download-outline" <q-item-section>{{ file.fileName }}</q-item-section>
@click="downloadFileRelevant(file.pathName)" <q-item-section avatar>
> <div class="row">
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip> <div>
</q-btn> <q-btn
dense
flat
round
size="12px"
color="blue"
icon="mdi-download-outline"
@click="downloadFileRelevant(file.pathName)"
>
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
</q-btn>
</div>
<div>
<q-btn
v-if="!isReadonly"
dense
flat
round
size="12px"
color="red"
icon="mdi-delete-outline"
@click="deleteFileRelevant(file.id)"
><q-tooltip>ลบไฟล์</q-tooltip></q-btn
>
</div>
</div> </div>
<div> </q-item-section>
<q-btn </q-item>
v-if="!isReadonly" </q-list>
dense </div>
flat
round
size="12px"
color="red"
icon="mdi-delete-outline"
@click="deleteFileRelevant(file.id)"
><q-tooltip>ลบไฟล์</q-tooltip></q-btn
>
</div>
</div>
</q-item-section>
</q-item>
</q-list>
</div>
<div class="col-12 q-pa-sm" v-else> <div class="col-12" v-else>
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card> <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
</div>
</div> </div>
</q-card> </q-card>
</div> </div>
@ -1468,90 +1468,93 @@ onMounted(async () => {
อัปโหลดไฟล์เอกสารหลักฐาน อัปโหลดไฟล์เอกสารหลักฐาน
</div> </div>
<div class="col-12"><q-separator /></div> <div class="col-12"><q-separator /></div>
<div <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
v-if="!isReadonly && formData.id !== ''" <div
class="col-12 q-pa-sm row" v-if="!isReadonly && formData.id !== ''"
> class="col-12 row"
<q-file
for="inputFiles"
class="col-11"
outlined
dense
v-model="formData.documentFile"
@added="uploadFile"
label="ไฟล์เอกสารหลักฐาน"
accept=".pdf,.xlsx,.doc"
clearable
> >
<template v-slot:prepend> <q-file
<q-icon name="attach_file" color="primary" /> for="inputFiles"
</template> class="col-12"
</q-file> outlined
<div class="col-1 self-center">
<q-btn
v-if="formData.documentFile"
size="14px"
flat
round
dense dense
color="add" v-model="formData.documentFile"
icon="mdi-upload" @added="uploadFile"
@click="uploadFile" label="ไฟล์เอกสารหลักฐาน"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn accept=".pdf,.xlsx,.doc"
clearable
> >
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
<template v-slot:after>
<q-btn
v-if="formData.documentFile"
size="14px"
flat
round
dense
color="add"
icon="mdi-upload"
@click="uploadFile"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
</template>
</q-file>
</div> </div>
</div>
<div <div
v-if="props.data.disciplineInvestigateDocs.length > 0" v-if="props.data.disciplineInvestigateDocs.length > 0"
class="col-xs-12 q-pa-sm row" class="col-xs-12 row"
>
<q-list
v-for="file in props.data.disciplineInvestigateDocs"
:key="file.id"
class="full-width"
bordered
separator
> >
<q-item clickable v-ripple> <q-list
<q-item-section>{{ file.fileName }}</q-item-section> class="full-width rounded-borders"
<q-item-section avatar> bordered
<div class="row"> separator
<div> >
<q-btn <q-item
dense v-for="file in props.data.disciplineInvestigateDocs"
flat :key="file.id"
round clickable
size="12px" v-ripple>
color="blue" <q-item-section>{{ file.fileName }}</q-item-section>
icon="mdi-download-outline" <q-item-section avatar>
@click="downloadFile(file.pathName)" <div class="row">
> <div>
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip> <q-btn
</q-btn> dense
flat
round
size="12px"
color="blue"
icon="mdi-download-outline"
@click="downloadFile(file.pathName)"
>
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
</q-btn>
</div>
<div>
<q-btn
v-if="!isReadonly"
dense
flat
round
size="12px"
color="red"
icon="mdi-delete-outline"
@click="deleteFile(file.id)"
><q-tooltip>ลบไฟล์</q-tooltip></q-btn
>
</div>
</div> </div>
<div> </q-item-section>
<q-btn </q-item>
v-if="!isReadonly" </q-list>
dense </div>
flat
round
size="12px"
color="red"
icon="mdi-delete-outline"
@click="deleteFile(file.id)"
><q-tooltip>ลบไฟล์</q-tooltip></q-btn
>
</div>
</div>
</q-item-section>
</q-item>
</q-list>
</div>
<div class="col-12 q-pa-sm" v-else> <div class="col-12" v-else>
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card> <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
</div>
</div> </div>
</q-card> </q-card>
</div> </div>

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

@ -696,87 +696,86 @@ onMounted(async () => {
</q-banner> </q-banner>
<q-separator /> <q-separator />
</div> </div>
<form @submit.prevent="validateForm"> <form @submit.prevent="validateForm" class="col-12 row">
<div class="col-12 row"> <div class="col-12 row">
<div class="col-sm-12 col-md-9 row no-wrap"> <div class="col-sm-12 col-md-9 row no-wrap">
<div class="col-12 row q-pa-md"> <div class="col-12 row q-pl-md q-py-md">
<div class="row q-col-gutter-md"> <div class="row col-12 q-col-gutter-md">
<div class="row col-12 q-col-gutter-x-md"> <div class="col-xs-12 col-sm-4">
<div class="col-xs-12 col-sm-4"> <q-select
<q-select :class="inputEdit(isReadonly)"
:class="inputEdit(isReadonly)" :readonly="isReadonly"
:readonly="isReadonly" for="SelectrespondentType"
for="SelectrespondentType" v-model="formData.respondentType"
v-model="formData.respondentType" ref="respondentTypeRef"
ref="respondentTypeRef" dense
dense outlined
outlined label="ผู้ถูกร้องเรียน"
label="ผู้ถูกร้องเรียน" option-value="id"
option-value="id" option-label="name"
option-label="name" emit-value
emit-value use-input
use-input map-options
map-options hide-bottom-space
hide-bottom-space :options="complainstStore.complainantoptions"
:options="complainstStore.complainantoptions" @update:model-value="
@update:model-value=" selectComplainant(formData.respondentType);
selectComplainant(formData.respondentType); changeFormData();
changeFormData();
"
@filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'filterrespondentType'
)"
>
<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-xs-12 col-sm-4"
v-if="formData.respondentType === 'ORGANIZATION'"
id="organizationId"
>
<q-select
:readonly="isReadonly"
for="inputOffice"
name="organizationId"
ref="organizationIdRef"
dense
hide-bottom-space
outlined
option-label="name"
option-value="id"
emit-value
map-options
v-model="formData.organizationId"
:options="organizationOption"
label="เลือกสำนักงาน"
@update:model-value="changeFormData()"
/>
</div>
<div
class="col-xs-12 col-sm-4"
v-if="
route.name === 'disciplineDisciplinaryEdit' &&
props.data &&
props.data.status === 'NEW' &&
mainStore.rowsCheck.length > 0
" "
@filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'filterrespondentType'
)"
> >
<q-btn <template v-slot:no-option>
class="q-pa-sm" <q-item>
color="orange" <q-item-section class="text-grey">
label="ส่งรายชื่อไปออกคำสั่งยุติเรื่อง" ไม่มีข้อมูล
@click="openModal" </q-item-section>
/> </q-item>
</div> </template>
</q-select>
</div>
<div
class="col-xs-12 col-sm-8"
v-if="formData.respondentType === 'ORGANIZATION'"
id="organizationId"
>
<q-select
:readonly="isReadonly"
for="inputOffice"
name="organizationId"
ref="organizationIdRef"
dense
hide-bottom-space
outlined
option-label="name"
option-value="id"
emit-value
map-options
v-model="formData.organizationId"
:options="organizationOption"
label="เลือกสำนักงาน"
@update:model-value="changeFormData()"
/>
</div>
<div
class="col-xs-12 col-sm-4"
v-if="
route.name === 'disciplineDisciplinaryEdit' &&
props.data &&
props.data.status === 'NEW' &&
mainStore.rowsCheck.length > 0
"
>
<q-btn
class="q-pa-sm"
color="orange"
label="ส่งรายชื่อไปออกคำสั่งยุติเรื่อง"
@click="openModal"
outline
/>
</div> </div>
<div <div
class="row col-12" class="row col-12"
@ -891,250 +890,248 @@ onMounted(async () => {
</q-card> </q-card>
</div> </div>
<div class="row col-12 q-col-gutter-x-md"> <datepicker
<datepicker :readonly="isReadonly"
:readonly="isReadonly" menu-class-name="modalfix"
menu-class-name="modalfix" for="#dateAllegation"
for="#dateAllegation" v-model="formData.disciplinaryDateInvestigation"
v-model="formData.disciplinaryDateInvestigation" class="col-xs-12 col-sm-3"
class="col-xs-12 col-sm-3" :locale="'th'"
:locale="'th'" autoApply
autoApply borderless
borderless :enableTimePicker="false"
:enableTimePicker="false" week-start="0"
week-start="0" @update:model-value="changeFormData()"
@update:model-value="changeFormData()" >
> <template #year="{ year }">
<template #year="{ year }"> {{ year + 543 }}
{{ year + 543 }} </template>
</template> <template #year-overlay-value="{ value }">
<template #year-overlay-value="{ value }"> {{ parseInt(value + 543) }}
{{ parseInt(value + 543) }} </template>
</template> <template #trigger>
<template #trigger> <q-input
<q-input :readonly="isReadonly"
:readonly="isReadonly" outlined
outlined dense
dense :class="inputEdit(isReadonly)"
:class="inputEdit(isReadonly)" hide-bottom-space
hide-bottom-space :model-value="
:model-value=" formData.disciplinaryDateInvestigation != null
formData.disciplinaryDateInvestigation != null ? date2Thai(formData.disciplinaryDateInvestigation)
? date2Thai(formData.disciplinaryDateInvestigation) : null
: null "
" :label="`${'วันที่มีคำสั่งให้สอบสวน'}`"
:label="`${'วันที่มีคำสั่งให้สอบสวน'}`" >
> <template v-slot:prepend>
<template v-slot:prepend> <q-icon
<q-icon name="event"
name="event" class="cursor-pointer"
class="cursor-pointer" style="color: var(--q-primary)"
style="color: var(--q-primary)"
>
</q-icon>
</template>
<template
v-if="
formData.disciplinaryDateInvestigation &&
isReadonly === false
"
v-slot:append
> >
<q-icon </q-icon>
name="cancel" </template>
@click.stop.prevent=" <template
formData.disciplinaryDateInvestigation = null v-if="
" formData.disciplinaryDateInvestigation &&
class="cursor-pointer" isReadonly === false
/> "
</template> v-slot:append
</q-input> >
</template> <q-icon
</datepicker> name="cancel"
@click.stop.prevent="
formData.disciplinaryDateInvestigation = null
"
class="cursor-pointer"
/>
</template>
</q-input>
</template>
</datepicker>
<datepicker <datepicker
:readonly="isReadonly" :readonly="isReadonly"
menu-class-name="modalfix" menu-class-name="modalfix"
for="#dateAllegation" for="#dateAllegation"
v-model="formData.disciplinaryDateAllegation" v-model="formData.disciplinaryDateAllegation"
class="col-xs-12 col-sm-3" class="col-xs-12 col-sm-3"
:locale="'th'" :locale="'th'"
autoApply autoApply
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
@update:model-value="changeFormData()" @update:model-value="changeFormData()"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
:readonly="isReadonly" :readonly="isReadonly"
ref="disciplinaryDateAllegationRef" ref="disciplinaryDateAllegationRef"
outlined outlined
:class="inputEdit(isReadonly)" :class="inputEdit(isReadonly)"
dense dense
hide-bottom-space hide-bottom-space
:model-value=" :model-value="
formData.disciplinaryDateAllegation != null formData.disciplinaryDateAllegation != null
? date2Thai(formData.disciplinaryDateAllegation) ? date2Thai(formData.disciplinaryDateAllegation)
: null : null
" "
:label="`${'วันที่รับทราบข้อกล่าวหา'}`" :label="`${'วันที่รับทราบข้อกล่าวหา'}`"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--q-primary)" style="color: var(--q-primary)"
>
</q-icon>
</template>
<template
v-if="
formData.disciplinaryDateAllegation &&
isReadonly === false
"
v-slot:append
> >
<q-icon </q-icon>
name="cancel" </template>
@click.stop.prevent=" <template
formData.disciplinaryDateAllegation = null v-if="
" formData.disciplinaryDateAllegation &&
class="cursor-pointer" isReadonly === false
/>
</template>
</q-input>
</template>
</datepicker>
<datepicker
:readonly="isReadonly"
menu-class-name="modalfix"
for="#dateEvident"
v-model="formData.disciplinaryDateEvident"
:locale="'th'"
autoApply
class="col-xs-12 col-sm-3"
borderless
:enableTimePicker="false"
week-start="0"
@update:model-value="changeFormData()"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
:readonly="isReadonly"
ref="disciplinaryDateEvidentRef"
outlined
dense
hide-bottom-space
:class="inputEdit(isReadonly)"
:model-value="
formData.disciplinaryDateEvident != null
? date2Thai(formData.disciplinaryDateEvident)
: null
" "
:label="`${'วันที่สรุปพยานหลักฐาน'}`" v-slot:append
> >
<template v-slot:prepend> <q-icon
<q-icon name="cancel"
name="event" @click.stop.prevent="
class="cursor-pointer" formData.disciplinaryDateAllegation = null
color="primary"
>
</q-icon>
</template>
<template
v-if="
formData.disciplinaryDateEvident &&
isReadonly === false
" "
v-slot:append class="cursor-pointer"
/>
</template>
</q-input>
</template>
</datepicker>
<datepicker
:readonly="isReadonly"
menu-class-name="modalfix"
for="#dateEvident"
v-model="formData.disciplinaryDateEvident"
:locale="'th'"
autoApply
class="col-xs-12 col-sm-3"
borderless
:enableTimePicker="false"
week-start="0"
@update:model-value="changeFormData()"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
:readonly="isReadonly"
ref="disciplinaryDateEvidentRef"
outlined
dense
hide-bottom-space
:class="inputEdit(isReadonly)"
:model-value="
formData.disciplinaryDateEvident != null
? date2Thai(formData.disciplinaryDateEvident)
: null
"
:label="`${'วันที่สรุปพยานหลักฐาน'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
color="primary"
> >
<q-icon </q-icon>
name="cancel" </template>
@click.stop.prevent=" <template
formData.disciplinaryDateEvident = null v-if="
" formData.disciplinaryDateEvident &&
class="cursor-pointer" isReadonly === false
/> "
</template> v-slot:append
</q-input> >
</template> <q-icon
</datepicker> name="cancel"
@click.stop.prevent="
<datepicker formData.disciplinaryDateEvident = null
:readonly="isReadonly" "
menu-class-name="modalfix" class="cursor-pointer"
for="#dateResult" />
v-model="formData.disciplinaryDateResult" </template>
:locale="'th'" </q-input>
autoApply </template>
class="col-xs-12 col-sm-3" </datepicker>
borderless
:enableTimePicker="false" <datepicker
week-start="0" :readonly="isReadonly"
@update:model-value="changeFormData()" menu-class-name="modalfix"
> for="#dateResult"
<template #year="{ year }"> v-model="formData.disciplinaryDateResult"
{{ year + 543 }} :locale="'th'"
</template> autoApply
<template #year-overlay-value="{ value }"> class="col-xs-12 col-sm-3"
{{ parseInt(value + 543) }} borderless
</template> :enableTimePicker="false"
week-start="0"
@update:model-value="changeFormData()"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger> <template #trigger>
<q-input <q-input
:readonly="isReadonly" :readonly="isReadonly"
ref="disciplinaryDateResultRef" ref="disciplinaryDateResultRef"
outlined outlined
:class="inputEdit(isReadonly)" :class="inputEdit(isReadonly)"
dense dense
hide-bottom-space hide-bottom-space
:model-value=" :model-value="
formData.disciplinaryDateResult != null formData.disciplinaryDateResult != null
? date2Thai(formData.disciplinaryDateResult) ? date2Thai(formData.disciplinaryDateResult)
: null : null
" "
:label="`${'วันที่รายงานผลการสอบสวน'}`" :label="`${'วันที่รายงานผลการสอบสวน'}`"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
color="primary" color="primary"
>
</q-icon>
</template>
<template
v-if="
formData.disciplinaryDateResult &&
isReadonly === false
"
v-slot:append
> >
<q-icon </q-icon>
name="cancel" </template>
@click.stop.prevent=" <template
formData.disciplinaryDateResult = null v-if="
" formData.disciplinaryDateResult &&
class="cursor-pointer" isReadonly === false
/> "
</template> v-slot:append
</q-input> >
</template> <q-icon
</datepicker> name="cancel"
</div> @click.stop.prevent="
formData.disciplinaryDateResult = null
"
class="cursor-pointer"
/>
</template>
</q-input>
</template>
</datepicker>
<div class="row col-12"> <div class="row col-12">
<q-card <q-card
bordered bordered
@ -1508,86 +1505,84 @@ onMounted(async () => {
</div> </div>
</q-card> </q-card>
</div> </div>
<div class="row col-12 q-col-gutter-sm"> <div class="col-xs-12 col-sm-3">
<div class="col-xs-12 col-sm-3"> <q-input
<q-input :class="inputEdit(isReadonly)"
:class="inputEdit(isReadonly)" :readonly="isReadonly"
:readonly="isReadonly" dense
dense outlined
outlined ref="disciplinaryCaseFaultRef"
ref="disciplinaryCaseFaultRef" v-model="formData.disciplinaryCaseFault"
v-model="formData.disciplinaryCaseFault" for="#casefault"
for="#casefault" label="กรณีมีความผิด"
label="กรณีมีความผิด" hide-bottom-space
hide-bottom-space @update:model-value="changeFormData()"
@update:model-value="changeFormData()" />
/> </div>
</div>
<div class="col-xs-12 col-sm-3"> <div class="col-xs-12 col-sm-3">
<q-input <q-input
:class="inputEdit(isReadonly)" :class="inputEdit(isReadonly)"
:readonly="isReadonly" :readonly="isReadonly"
dense dense
hide-bottom-space hide-bottom-space
outlined outlined
for="#whereInvestigate" for="#whereInvestigate"
ref="disciplinaryInvestigateAtRef" ref="disciplinaryInvestigateAtRef"
v-model="formData.disciplinaryInvestigateAt" v-model="formData.disciplinaryInvestigateAt"
label="สอบสวนที่" label="สอบสวนที่"
@update:model-value="changeFormData()" @update:model-value="changeFormData()"
/> />
</div> </div>
<div class="col-xs-12 col-sm-3"> <div class="col-xs-12 col-sm-3">
<q-select <q-select
:class="inputEdit(isReadonly)" :class="inputEdit(isReadonly)"
:readonly="isReadonly" :readonly="isReadonly"
dense dense
outlined outlined
for="#faultLevel" for="#faultLevel"
ref="disciplinaryFaultLevelRef" ref="disciplinaryFaultLevelRef"
v-model="formData.disciplinaryFaultLevel" v-model="formData.disciplinaryFaultLevel"
option-label="name" option-label="name"
option-value="id" option-value="id"
emit-value emit-value
map-options map-options
hide-bottom-space hide-bottom-space
:options="investigateDis.optionsfaultLevel" :options="investigateDis.optionsfaultLevel"
label="ระดับโทษความผิด" label="ระดับโทษความผิด"
group-label="group" group-label="group"
group-values="options" group-values="options"
clearable clearable
@update:model-value="changeFormData()" @update:model-value="changeFormData()"
>
</q-select>
</div>
<div
class="col-3"
v-if="formData.disciplinaryFaultLevel === 'อื่นๆ'"
> >
<q-input </q-select>
:class="inputEdit(isReadonly)" </div>
outlined <div
dense class="col-3"
label="ระดับโทษความผิดอื่นๆ" v-if="formData.disciplinaryFaultLevel === 'อื่นๆ'"
v-model="formData.disciplinaryFaultLevelOther" >
/> <q-input
</div> :class="inputEdit(isReadonly)"
<div class="col-xs-12 col-sm-3"> outlined
<q-input dense
:class="inputEdit(isReadonly)" label="ระดับโทษความผิดอื่นๆ"
:readonly="isReadonly" v-model="formData.disciplinaryFaultLevelOther"
dense />
for="#refLaw" </div>
hide-bottom-space <div class="col-xs-12 col-sm-3">
outlined <q-input
ref="disciplinaryRefLawRef" :class="inputEdit(isReadonly)"
v-model="formData.disciplinaryRefLaw" :readonly="isReadonly"
label="อ้างอิงมาตราตามกฎหมาย" dense
@update:model-value="changeFormData()" for="#refLaw"
/> hide-bottom-space
</div> outlined
ref="disciplinaryRefLawRef"
v-model="formData.disciplinaryRefLaw"
label="อ้างอิงมาตราตามกฎหมาย"
@update:model-value="changeFormData()"
/>
</div> </div>
<div class="col-xs-12 col-sm-6"> <div class="col-xs-12 col-sm-6">
@ -1751,11 +1746,11 @@ onMounted(async () => {
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 row"><q-separator vertical /></div> <div class="row"><q-separator vertical /></div>
</div> </div>
<!-- อัพโหลดไฟล์ --> <!-- อัพโหลดไฟล์ -->
<div class="col-sm-12 col-md-3 q-col-gutter-md q-pa-md"> <div class="col-sm-12 col-md-3 q-col-gutter-y-md q-pa-md">
<!-- ยังไม่มี api --> <!-- ยังไม่มี api -->
<UploadFile <UploadFile
title="อัปโหลดไฟล์เอกสารที่เกี่ยวข้องกับการสอบสวน" title="อัปโหลดไฟล์เอกสารที่เกี่ยวข้องกับการสอบสวน"

655
src/modules/11_discipline/components/4_Result/Form.vue
View file

@ -259,7 +259,7 @@ function updatemodalPersonal(modal: boolean) {
} }
</script> </script>
<template> <template>
<div class="row q-col-gutter-sm"> <div class="row col-12 bg-white">
<div v-if="isSave" class=" col-12"> <div v-if="isSave" class=" col-12">
<q-banner <q-banner
inline-actions inline-actions
@ -272,341 +272,338 @@ function updatemodalPersonal(modal: boolean) {
</q-banner> </q-banner>
<q-separator /> <q-separator />
</div> </div>
<form @submit.prevent="validateForm"> <form @submit.prevent="validateForm" class="col-12 row">
<q-card bordered> <div class="col-12 row">
<div class="col-12 row"> <div class="col-sm-12 col-md-9 row no-wrap">
<div class="col-sm-12 col-md-9 row no-wrap"> <div class=" col-12 q-pa-md">
<div class="row col-12 q-pa-md"> <div class="row col-12 q-col-gutter-md">
<div class="row q-col-gutter-md">
<div class="col-xs-12 col-sm-4">
<div class="col-xs-12 col-sm-4"> <q-select
<q-select readonly
readonly for="SelectrespondentType"
for="SelectrespondentType" v-model="respondentType"
v-model="respondentType" ref="respondentTypeRef"
ref="respondentTypeRef" dense
dense outlined
outlined label="ผู้ถูกร้องเรียน"
label="ผู้ถูกร้องเรียน" option-value="id"
option-value="id" option-label="name"
option-label="name" emit-value
emit-value use-input
use-input map-options
map-options hide-bottom-space
hide-bottom-space :options="dataStore.complainantoptions"
:options="dataStore.complainantoptions" @update:model-value="selectComplainant(respondentType)"
@update:model-value="selectComplainant(respondentType)" @filter="(inputValue: any,
@filter="(inputValue: any, doneFn: Function) => dataStore.filterSelector(inputValue, doneFn, 'filterrespondentType'
doneFn: Function) => dataStore.filterSelector(inputValue, doneFn, 'filterrespondentType' )"
)" >
> <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
class="col-xs-12 col-sm-3"
v-if="respondentType === 'ORGANIZATION'"
id="organizationId"
>
<q-select
for="inputOffice"
name="organizationId"
ref="organizationIdRef"
dense
hide-bottom-space
outlined
option-label="name"
option-value="id"
emit-value
map-options
v-model="organizationId"
:options="organizationOption"
label="เลือกสำนักงาน"
/>
</div>
<div class="row col-12" v-if="respondentType === 'PERSON'">
<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">
<d-table
ref="table"
:columns="mainStore.columnsRespondent"
:rows="mainStore.rowsAdd"
row-key="idcard"
flat
bordered
:paging="true"
dense
class="custom-header-table"
:visible-columns="mainStore.visibleColumnsRespondent"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width></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">
<td>
<q-btn
dense
flat
round
color="info"
icon="info"
@click="onclickViewinfo(props.row.personId)"
>
<q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
</q-btn>
</td>
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="openDetial(props.row.personId)"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div
v-else-if="col.name === 'organization'"
class="table_ellipsis"
>
{{ props.row.organization }}
</div>
<div v-else-if="col.name === 'salary'">
{{ props.row.salary.toLocaleString() }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</q-card>
</div>
<div class="col-12">
<q-input
:class="inputEdit(isReadonly)"
type="textarea"
dense
outlined
ref="detailRef"
v-model="formData.resultDescription"
for="#detail"
label="สรุปผลการพิจารณา"
hide-bottom-space
@update:model-value="changeFormData()"
/>
</div>
<div class="col-12">
<div class="row q-col-gutter-sm">
<div class="col-3">
<q-input
v-model="formData.disciplineType"
dense
:class="inputEdit(isReadonly)"
outlined
label="ประเภทวินัย"
/>
</div>
<div class="col-3">
<q-input
v-model="formData.titleType"
dense
outlined
:class="inputEdit(isReadonly)"
label="ประเภทของเรื่อง"
/>
</div>
<div class="col-4">
<q-input
v-model="formData.oc"
dense
outlined
:class="inputEdit(isReadonly)"
label="หน่วยงาน/ส่วนราชการ"
/>
</div>
<div class="col-2">
<datepicker
menu-class-name="modalfix"
v-model="formData.year"
class="col-2"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
:class="inputEdit(isReadonly)"
outlined
:model-value="
formData.year === 0
? null
: Number(formData.year) + 543
"
:label="`${'ปีงบประมาณ'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
<template v-if="formData.year" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="formData.year = 0"
class="cursor-pointer"
/>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
</div>
</div>
</div> </div>
<div class="col-12 row"><q-separator vertical /></div> <div
</div> class="col-xs-12 col-sm-3"
v-if="respondentType === 'ORGANIZATION'"
<!-- อัพโหลดไฟล์ --> id="organizationId"
<div class="col-sm-12 col-md-3 q-pa-md"> >
<q-card bordered class="row col-12" style="border: 1px solid #d6dee1"> <q-select
<div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"> for="inputOffice"
อัปโหลดไฟล์เอกสารหลักฐาน name="organizationId"
</div> ref="organizationIdRef"
<div class="col-12"><q-separator /></div> dense
<div class="col-12 q-pa-sm row"> hide-bottom-space
<q-file outlined
for="inputFiles" option-label="name"
class="col-12" option-value="id"
outlined emit-value
dense map-options
v-model="formData.file" v-model="organizationId"
@added="uploadFile" :options="organizationOption"
label="ไฟล์เอกสารหลักฐาน" label="เลือกสำนักงาน"
hide-bottom-space />
accept=".pdf,.xlsx,.docx,.png,.jpg" </div>
clearable <div class="row col-12" v-if="respondentType === 'PERSON'">
<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"
> >
<template v-slot:prepend> ผู้ถูกร้องเรียน
<q-icon name="attach_file" color="primary" /> </div>
</template> <div class="col-12"><q-separator /></div>
<template v-slot:after> <div class="col-xs-12 q-pa-sm">
<q-btn <d-table
v-if="formData.file" ref="table"
size="14px" :columns="mainStore.columnsRespondent"
:rows="mainStore.rowsAdd"
row-key="idcard"
flat
bordered
:paging="true"
dense
class="custom-header-table"
:visible-columns="mainStore.visibleColumnsRespondent"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width></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">
<td>
<q-btn
dense
flat
round
color="info"
icon="info"
@click="onclickViewinfo(props.row.personId)"
>
<q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
</q-btn>
</td>
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="openDetial(props.row.personId)"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div
v-else-if="col.name === 'organization'"
class="table_ellipsis"
>
{{ props.row.organization }}
</div>
<div v-else-if="col.name === 'salary'">
{{ props.row.salary.toLocaleString() }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</q-card>
</div>
<div class="col-12">
<q-input
:class="inputEdit(isReadonly)"
type="textarea"
dense
outlined
ref="detailRef"
v-model="formData.resultDescription"
for="#detail"
label="สรุปผลการพิจารณา"
hide-bottom-space
@update:model-value="changeFormData()"
/>
</div>
<div class="col-3">
<q-input
v-model="formData.disciplineType"
dense
:class="inputEdit(isReadonly)"
outlined
label="ประเภทวินัย"
/>
</div>
<div class="col-3">
<q-input
v-model="formData.titleType"
dense
outlined
:class="inputEdit(isReadonly)"
label="ประเภทของเรื่อง"
/>
</div>
<div class="col-4">
<q-input
v-model="formData.oc"
dense
outlined
:class="inputEdit(isReadonly)"
label="หน่วยงาน/ส่วนราชการ"
/>
</div>
<div class="col-2">
<datepicker
menu-class-name="modalfix"
v-model="formData.year"
class="col-2"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
:class="inputEdit(isReadonly)"
outlined
:model-value="
formData.year === 0
? null
: Number(formData.year) + 543
"
:label="`${'ปีงบประมาณ'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
<template v-if="formData.year" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="formData.year = 0"
class="cursor-pointer"
/>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
</div>
<div class="row"><q-separator vertical /></div>
</div>
<!-- อัพโหลดไฟล์ -->
<div class="col-sm-12 col-md-3 q-pa-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="row col-12 q-col-gutter-y-sm q-pa-sm">
<div class="col-12 row">
<q-file
for="inputFiles"
class="col-12"
outlined
dense
v-model="formData.file"
@added="uploadFile"
label="ไฟล์เอกสารหลักฐาน"
hide-bottom-space
accept=".pdf,.xlsx,.docx,.png,.jpg"
clearable
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
<template v-slot:after>
<q-btn
v-if="formData.file"
size="14px"
flat
round
dense
color="add"
icon="mdi-upload"
@click="uploadFile"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn>
</template>
</q-file>
</div>
</div>
<div
v-if="formData.disciplineDisciplinary_DocResults.length > 0"
class="col-xs-12 row"
>
<q-list
class="full-width"
bordered
separator
>
<q-item
v-for="data in formData.disciplineDisciplinary_DocResults"
:key="data.id"
clickable
v-ripple>
<q-item-section>{{ data.fileName }}</q-item-section>
<q-space />
<q-btn
size="12px"
flat flat
round round
dense dense
color="add" color="blue"
icon="mdi-upload" icon="mdi-download"
@click="uploadFile" @click="downloadFile(data.pathName)"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn> ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
</template> >
</q-file> <q-btn
</div> size="12px"
<div flat
v-if="formData.disciplineDisciplinary_DocResults.length > 0" round
class="col-xs-12 q-pa-sm row" dense
> color="red"
<q-list class="q-ml-sm"
v-for="data in formData.disciplineDisciplinary_DocResults" icon="mdi-delete-outline"
:key="data.id" @click="deleteFile(data.id)"
class="full-width" ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
bordered >
separator </q-item>
> </q-list>
<q-item clickable v-ripple> </div>
<q-item-section>{{ data.fileName }}</q-item-section> <div class="col-12 q-pa-sm" v-else>
<q-space /> <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
<q-btn
size="12px"
flat
round
dense
color="blue"
icon="mdi-download"
@click="downloadFile(data.pathName)"
><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
>
<q-btn
size="12px"
flat
round
dense
color="red"
class="q-ml-sm"
icon="mdi-delete-outline"
@click="deleteFile(data.id)"
><q-tooltip>ลบไฟล์</q-tooltip></q-btn
>
</q-item>
</q-list>
</div>
<div class="col-12 q-pa-sm" v-else>
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
</div>
</q-card>
</div> </div>
</q-card>
<div class="col-12 "><q-separator /></div> </div>
<div class="row col-12 q-pa-sm">
<q-space /> <div class="col-12 "><q-separator /></div>
<q-btn <div class="row col-12 q-pa-sm">
for="ButtonOnSubmit" <q-space />
id="formSubmit" <q-btn
color="secondary" for="ButtonOnSubmit"
label="บันทึก" id="formSubmit"
type="submit" color="secondary"
><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn label="บันทึก"
> type="submit"
</div> ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
</div> >
</q-card> </div>
</form> </div>
</div> </form>
</div>
<PopupPersonal <PopupPersonal
:modal="modalPersonal" :modal="modalPersonal"

614
src/modules/11_discipline/components/8_AppealComplain/Form.vue
View file

@ -339,336 +339,340 @@ onMounted(() => {
</script> </script>
<template> <template>
<div class="row q-col-gutter-xs"> <div class="row q-col-gutter-xs">
<div class="col-12"> <form @submit.prevent="validateForm" class="col-12 row">
<form @submit.prevent="validateForm"> <q-card bordered class="col-12 row">
<q-card bordered> <div class="col-12 row">
<div class="q-pa-md"> <div :class="isReadonly== true ? 'col-sm-12 col-md-9 row no-wrap': 'col-12'">
<div class="q-gutter-y-sm"> <div class=" col-12 q-pa-md">
<div class="row q-gutter-x-sm"> <div class="q-gutter-y-sm">
<div class="col-3"> <div class="row q-gutter-x-sm">
<q-select <div class="col-3">
ref="typeRef" <q-select
:class="inputEdit(isReadonly)" ref="typeRef"
v-model="formData.type" :class="inputEdit(isReadonly)"
label="ประเภท" v-model="formData.type"
dense label="ประเภท"
outlined dense
emit-value outlined
map-options emit-value
option-label="name" map-options
option-value="id" option-label="name"
:options="dataStore.typeOptions" option-value="id"
:rules="[(val) => !!val || `${'กรุณาเลือกประเภท'}`]" :options="dataStore.typeOptions"
lazy-rules :rules="[(val) => !!val || `${'กรุณาเลือกประเภท'}`]"
hide-bottom-space lazy-rules
/> hide-bottom-space
/>
</div>
<div class="col-3" v-if="isReadonly">
<q-select
ref="statusRef"
v-model="formData.status"
:class="inputEdit(isReadonly)"
label="สถานะ"
dense
bg-color="white"
outlined
emit-value
:rules="[(val) => !!val || `${'กรุณาเลือกสถานะ'}`]"
map-options
hide-bottom-space
option-label="name"
option-value="id"
:options="dataStore.statusOptionsEdit"
/>
</div>
<div class="col-2 self-center" v-if="isReadonly">
<q-btn
size="16px"
flat
round
dense
color="info"
class="q-ml-sm"
icon="mdi-history"
@click="historyStatus"
>
<q-tooltip>ประวัติแก้ไขสถานะ</q-tooltip>
</q-btn>
</div>
</div> </div>
<div class="col-3" v-if="isReadonly"> <div class="row col-12">
<q-select <q-card
ref="statusRef" bordered
v-model="formData.status" class="row col-12"
:class="inputEdit(isReadonly)" style="border: 1px solid #d6dee1"
label="สถานะ"
dense
bg-color="white"
outlined
emit-value
:rules="[(val) => !!val || `${'กรุณาเลือกสถานะ'}`]"
map-options
hide-bottom-space
option-label="name"
option-value="id"
:options="dataStore.statusOptionsEdit"
/>
</div>
<div class="col-2 self-center" v-if="isReadonly">
<q-btn
size="16px"
flat
round
dense
color="info"
class="q-ml-sm"
icon="mdi-history"
@click="historyStatus"
> >
<q-tooltip>ประวัติแก้ไขสถานะ</q-tooltip> <div
</q-btn> class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
>
ผู้ยื่นอุทธณ์/ร้องทุกข์
<q-btn
v-if="!isReadonly"
size="12px"
flat
round
dense
color="add"
class="q-ml-sm"
icon="mdi-plus"
@click="toggleModal"
>
<q-tooltip>เพิ่มผู้ยื่นอุทธณ์/ร้องทุกข์</q-tooltip>
</q-btn>
</div>
<div class="col-12"><q-separator /></div>
<div class="col-xs-12 q-pa-sm">
<q-table
ref="table"
:columns="dataStore.columns"
:rows="dataStore.rowsAdd"
row-key="idcard"
flat
bordered
dense
hide-bottom
class="custom-header-table"
:visible-columns="dataStore.visibleColumns"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
style="color: #000000; font-weight: 500"
>
<span class="text-weight-medium">{{
col.label
}}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div
v-else-if="col.name === 'oc'"
class="table_ellipsis"
>
{{ props.row.oc }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</q-table>
</div>
</q-card>
</div>
<div class="row col-12">
<div class="col-12" id="title">
<q-input
ref="titleRef"
dense
:class="inputEdit(isReadonly)"
outlined
hide-bottom-space
v-model="formData.title"
:rules="[(val) => !!val || 'กรุณากรอกเรื่องอุทธรณ์/ร้องทุกข์']"
lazy-rules
label="เรื่องอุทธรณ์/ร้องทุกข์"
/>
</div>
</div>
<div class="col-xs-12 col-sm-12" id="detail">
<q-input
ref="descriptionRef"
dense
:class="inputEdit(isReadonly)"
outlined
hide-bottom-space
v-model="formData.description"
:rules="[
(val) => !!val || 'กรุณากรอกรายละเอียดอุทธรณ์/ร้องทุกข์',
]"
lazy-rules
label="รายละเอียดอุทธรณ์/ร้องทุกข์"
type="textarea"
rows="5"
/>
</div>
<div class="row q-gutter-x-sm">
<div class="col-3">
<datepicker
menu-class-name="modalfix"
v-model="formData.year"
class="col-2"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
:class="inputEdit(isReadonly)"
lazy-rules
outlined
:model-value="Number(formData.year) + 543"
:label="`${'ปีงบประมาณ'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-3">
<q-input
ref="caseTypeRef"
:class="inputEdit(isReadonly)"
v-model="formData.caseType"
dense
outlined
:rules="[(val) => !!val || 'กรุณากรอกประเภทคดี']"
lazy-rules
hide-bottom-space
label="ประเภทคดี"
/>
</div>
<div class="col-3">
<q-input
ref="caseNumberRef"
:class="inputEdit(isReadonly)"
v-model="formData.caseNumber"
dense
outlined
:rules="[(val) => !!val || 'กรุณากรอกเลขที่คดี']"
lazy-rules
label="เลขที่คดี"
hide-bottom-space
/>
</div>
</div> </div>
</div> </div>
<div class="row col-12"> </div>
<q-card <div class="row"><q-separator vertical /></div>
bordered </div>
class="row col-12" <!-- อัพโหลดไฟล์ -->
style="border: 1px solid #d6dee1" <div v-if="isReadonly" class="col-sm-12 col-md-3 q-pa-md">
> <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
<div <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
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="row col-12 q-col-gutter-y-sm q-pa-sm">
<div class="col-12 row">
<q-file
for="inputFiles"
class="col-12"
outlined
dense
v-model="formData.file"
@added="uploadFile"
label="ไฟล์เอกสารหลักฐาน"
hide-bottom-space
lazy-rules
accept=".pdf,.xlsx,.doc"
clearable
> >
ผู้ยื่นอุทธณ์/ร้องทุกข์ <template v-slot:prepend>
<q-btn <q-icon name="attach_file" color="primary" />
v-if="!isReadonly" </template>
size="12px" <template v-slot:after>
<q-btn
v-if="formData.file && isReadonly"
size="14px"
flat flat
round round
dense dense
color="add" color="add"
class="q-ml-sm" icon="mdi-upload"
icon="mdi-plus" @click="uploadFile"
@click="toggleModal" ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn>
>
<q-tooltip>เพิ่มผู้ยื่นอุทธณ์/ร้องทุกข์</q-tooltip>
</q-btn>
</div>
<div class="col-12"><q-separator /></div>
<div class="col-xs-12 q-pa-sm">
<q-table
ref="table"
:columns="dataStore.columns"
:rows="dataStore.rowsAdd"
row-key="idcard"
flat
bordered
dense
hide-bottom
class="custom-header-table"
:visible-columns="dataStore.visibleColumns"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
style="color: #000000; font-weight: 500"
>
<span class="text-weight-medium">{{
col.label
}}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div
v-else-if="col.name === 'oc'"
class="table_ellipsis"
>
{{ props.row.oc }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</q-table>
</div>
</q-card>
</div>
<div class="row col-12">
<div class="col-12" id="title">
<q-input
ref="titleRef"
dense
:class="inputEdit(isReadonly)"
outlined
hide-bottom-space
v-model="formData.title"
:rules="[(val) => !!val || 'กรุณากรอกเรื่องอุทธรณ์/ร้องทุกข์']"
lazy-rules
label="เรื่องอุทธรณ์/ร้องทุกข์"
/>
</div>
</div>
<div class="col-xs-12 col-sm-12" id="detail">
<q-input
ref="descriptionRef"
dense
:class="inputEdit(isReadonly)"
outlined
hide-bottom-space
v-model="formData.description"
:rules="[
(val) => !!val || 'กรุณากรอกรายละเอียดอุทธรณ์/ร้องทุกข์',
]"
lazy-rules
label="รายละเอียดอุทธรณ์/ร้องทุกข์"
type="textarea"
rows="5"
/>
</div>
<div class="row q-gutter-x-sm">
<div class="col-3">
<datepicker
menu-class-name="modalfix"
v-model="formData.year"
class="col-2"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
:class="inputEdit(isReadonly)"
lazy-rules
outlined
:model-value="Number(formData.year) + 543"
:label="`${'ปีงบประมาณ'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template> </template>
</datepicker> </q-file>
</div> </div>
<div class="col-3"> <div
<q-input v-if="formData.disciplineComplaint_Appeal_Docs.length > 0"
ref="caseTypeRef" class="col-xs-12 row"
:class="inputEdit(isReadonly)" >
v-model="formData.caseType" <q-list
dense v-for="data in formData.disciplineComplaint_Appeal_Docs"
outlined :key="data.id"
:rules="[(val) => !!val || 'กรุณากรอกประเภทคดี']" class="full-width"
lazy-rules bordered
hide-bottom-space separator
label="ประเภทคดี" >
/> <q-item clickable v-ripple>
<q-item-section>{{ data.fileName }}</q-item-section>
<q-space />
<q-btn
size="12px"
flat
round
dense
color="blue"
icon="mdi-download"
@click="downloadFile(data.pathName)"
><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
>
<q-btn
size="12px"
flat
round
dense
color="red"
class="q-ml-sm"
icon="mdi-delete-outline"
@click="deleteFile(data.id)"
><q-tooltip>ลบไฟล์</q-tooltip></q-btn
>
</q-item>
</q-list>
</div> </div>
<div class="col-3"> <div class="col-12" v-else>
<q-input <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
ref="caseNumberRef"
:class="inputEdit(isReadonly)"
v-model="formData.caseNumber"
dense
outlined
:rules="[(val) => !!val || 'กรุณากรอกเลขที่คดี']"
lazy-rules
label="เลขที่คดี"
hide-bottom-space
/>
</div> </div>
</div> </div>
</div> </q-card>
</div> </div>
<q-separator /> <div class="col-12"><q-separator /></div>
<div class="row col-12 q-pa-sm"> <div class="row col-12 q-pa-sm">
<q-space /> <q-space />
<q-btn id="onSubmit" type="submit" label="บันทึก" color="secondary" <q-btn id="onSubmit" type="submit" label="บันทึก" color="secondary"
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
> >
</div> </div>
</div>
</q-card> </q-card>
</form> </form>
</div>
<!-- อัพโหลดไฟล์ -->
<div v-if="isReadonly" class="col-sm-12 col-md-3">
<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-12 q-pa-sm row">
<q-file
for="inputFiles"
class="col-11"
outlined
dense
v-model="formData.file"
@added="uploadFile"
label="ไฟล์เอกสารหลักฐาน"
hide-bottom-space
lazy-rules
accept=".pdf,.xlsx,.doc"
clearable
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
<div class="col-1 self-center text-center">
<q-btn
v-if="formData.file && isReadonly"
size="14px"
flat
round
dense
color="add"
icon="mdi-upload"
@click="uploadFile"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
</div>
</div>
<div
v-if="formData.disciplineComplaint_Appeal_Docs.length > 0"
class="col-xs-12 q-pa-sm row"
>
<q-list
v-for="data in formData.disciplineComplaint_Appeal_Docs"
:key="data.id"
class="full-width"
bordered
separator
>
<q-item clickable v-ripple>
<q-item-section>{{ data.fileName }}</q-item-section>
<q-space />
<q-btn
size="12px"
flat
round
dense
color="blue"
icon="mdi-download"
@click="downloadFile(data.pathName)"
><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
>
<q-btn
size="12px"
flat
round
dense
color="red"
class="q-ml-sm"
icon="mdi-delete-outline"
@click="deleteFile(data.id)"
><q-tooltip>ลบไฟล์</q-tooltip></q-btn
>
</q-item>
</q-list>
</div>
<div class="col-12 q-pa-sm" v-else>
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
</div>
</q-card>
</div>
</div> </div>
<DialogAddPersonal <DialogAddPersonal

80
src/modules/11_discipline/components/UploadFile.vue
View file

@ -133,49 +133,49 @@ function downloadFile(link: string) {
{{ title }} {{ title }}
</div> </div>
<div class="col-12"><q-separator /></div> <div class="col-12"><q-separator /></div>
<div v-if="!isReadonly" class="row"> <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
<div class="col-12 q-px-sm q-pt-sm row"> <div v-if="!isReadonly" class="col-12">
<q-file <q-file
class="col-12" outlined
outlined dense
dense ref="fileRef"
ref="fileRef" for="#files"
for="#files" v-model="file"
v-model="file" :label="label"
:label="label" hide-bottom-space
hide-bottom-space lazy-rules
lazy-rules accept=".pdf,.xlsx,.docx,.png,.jpg"
accept=".pdf,.xlsx,.docx,.png,.jpg" >
> <template v-slot:prepend>
<template v-slot:prepend> <q-icon name="attach_file" />
<q-icon name="attach_file" /> </template>
</template> <template v-slot:after>
<template v-slot:after> <q-btn
<q-btn v-if="file"
v-if="file" size="14px"
size="14px" flat
flat round
round dense
dense color="add"
color="add" icon="mdi-upload"
icon="mdi-upload" @click="uploadFile()"
@click="uploadFile()" ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn >
> </template>
</template> </q-file>
</q-file>
</div> </div>
</div>
<div v-if="props.files.length > 0" class="col-xs-12 q-pa-sm row"> <div v-if="props.files.length > 0" class="col-xs-12 row">
<q-list <q-list
v-for="(f, index) in props.files"
:key="index"
bordered bordered
separator separator
class="full-width" class="full-width rounded-borders"
> >
<q-item clickable v-ripple> <q-item
v-for="(f, index) in props.files"
:key="index"
clickable
v-ripple>
<q-item-section>{{ f.fileName }}</q-item-section> <q-item-section>{{ f.fileName }}</q-item-section>
<q-item-section avatar> <q-item-section avatar>
<div class="row"> <div class="row">
@ -210,10 +210,12 @@ function downloadFile(link: string) {
</q-item> </q-item>
</q-list> </q-list>
</div> </div>
<div class="col-12 q-pa-sm" v-if="props.files.length == 0"> <div class="col-12" v-if="props.files.length == 0">
<q-card class="q-py-sm q-px-md" bordered> ไม่มีรายการเอกสาร </q-card> <q-card class="q-py-sm q-px-md" bordered> ไม่มีรายการเอกสาร </q-card>
</div> </div>
</div>
</q-card> </q-card>
</div> </div>
</template> </template>