ปรับ ui ระบบวินัยเพิ่มเติม

This commit is contained in:
Tanyalak 2024-01-30 15:07:25 +07:00
parent ea655acefb
commit b2d6f24547
6 changed files with 1599 additions and 1590 deletions

View file

@ -655,229 +655,225 @@ onMounted(async () => {
</q-banner>
<q-separator />
</div>
<form @submit.prevent="validateForm">
<form @submit.prevent="validateForm" class="col-12 row">
<div class="col-12 row">
<div class="col-sm-12 col-md-9 row no-wrap">
<div class="col-12 row q-pa-md">
<div class="row q-col-gutter-md">
<div class="col-xs-12 row q-col-gutter-md">
<div class="col-xs-12 col-sm-3" id="respondentType">
<q-select
:class="inputEdit(isReadonly)"
for="SelectrespondentType"
v-model="formData.respondentType"
ref="respondentTypeRef"
dense
outlined
:readonly="isReadonly"
label="ผู้ถูกร้องเรียน"
option-value="id"
option-label="name"
emit-value
use-input
map-options
hide-bottom-space
:options="investigateFactStore.respondentTypeOps"
@filter="(inputValue: any,
doneFn: Function) => investigateFactStore.filterSelector(inputValue, doneFn, 'filterrespondentType'
)"
@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"
<div class="col-12 row q-pl-md q-py-md">
<div class="row col-12 q-col-gutter-md">
<div class="col-xs-12 col-sm-5" id="respondentType">
<q-select
:class="inputEdit(isReadonly)"
for="SelectrespondentType"
v-model="formData.respondentType"
ref="respondentTypeRef"
dense
outlined
:readonly="isReadonly"
label="ผู้ถูกร้องเรียน"
option-value="id"
option-label="name"
emit-value
use-input
map-options
hide-bottom-space
:options="investigateFactStore.respondentTypeOps"
@filter="(inputValue: any,
doneFn: Function) => investigateFactStore.filterSelector(inputValue, doneFn, 'filterrespondentType'
)"
@update:model-value="changeFormData()"
>
<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="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>
<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-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
v-if="formData.investigationDetail === 'OTHER'"
class="col-12"
@ -1368,7 +1364,7 @@ onMounted(async () => {
</div>
</div>
</div>
<div class="col-12 row"><q-separator vertical /></div>
<div class="row"><q-separator vertical /></div>
</div>
<div class="col-xs-12 col-sm-12 col-md-3">
<div class="q-col-gutter-md row q-pa-md">
@ -1378,87 +1374,91 @@ onMounted(async () => {
ปโหลดไฟลเอกสารทเกยวของกบการสบสวน
</div>
<div class="col-12"><q-separator /></div>
<div
v-if="!isReadonly && formData.id !== ''"
class="col-12 q-pa-sm row"
>
<q-file
class="col-11"
for="#evidenceFiles"
outlined
dense
v-model="formData.evidenceFiles"
label="เอกสารที่เกี่ยวข้องกับการสืบสวน"
hide-bottom-space
<div class="row col-12 q-col-gutter-y-sm q-pa-sm">
<div
v-if="!isReadonly && formData.id !== ''"
class="col-12 row"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
<template v-slot:after>
<q-btn
v-if="formData.evidenceFiles"
size="14px"
flat
round
dense
color="add"
icon="mdi-upload"
@click="uploadFileRelevant"
><q-tooltip>ปโหลดเอกสาร</q-tooltip></q-btn>
</template>
</q-file>
</div>
<div
v-if="props.data.disciplineInvestigateRelevantDocs.length > 0"
class="col-xs-12 q-pa-sm row"
>
<q-list
v-for="file in props.data.disciplineInvestigateRelevantDocs"
:key="file.id"
class="full-width"
bordered
separator
<q-file
class="col-12"
for="#evidenceFiles"
outlined
dense
v-model="formData.evidenceFiles"
label="เอกสารที่เกี่ยวข้องกับการสืบสวน"
hide-bottom-space
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
<template v-slot:after>
<q-btn
v-if="formData.evidenceFiles"
size="14px"
flat
round
dense
color="add"
icon="mdi-upload"
@click="uploadFileRelevant"
><q-tooltip>ปโหลดเอกสาร</q-tooltip></q-btn>
</template>
</q-file>
</div>
<div
v-if="props.data.disciplineInvestigateRelevantDocs.length > 0"
class="col-xs-12 row"
>
<q-item clickable v-ripple>
<q-item-section>{{ file.fileName }}</q-item-section>
<q-item-section avatar>
<div class="row">
<div>
<q-btn
dense
flat
round
size="12px"
color="blue"
icon="mdi-download-outline"
@click="downloadFileRelevant(file.pathName)"
>
<q-tooltip>ดาวนโหลดไฟล</q-tooltip>
</q-btn>
<q-list
class="full-width rounded-borders"
bordered
separator
>
<q-item
v-for="file in props.data.disciplineInvestigateRelevantDocs"
:key="file.id"
clickable
v-ripple
>
<q-item-section>{{ file.fileName }}</q-item-section>
<q-item-section avatar>
<div class="row">
<div>
<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>
<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>
</q-item-section>
</q-item>
</q-list>
</div>
</q-item-section>
</q-item>
</q-list>
</div>
<div class="col-12 q-pa-sm" v-else>
<q-card class="q-pa-md" bordered> ไมรายการเอกสาร </q-card>
<div class="col-12" v-else>
<q-card class="q-pa-md" bordered> ไมรายการเอกสาร </q-card>
</div>
</div>
</q-card>
</div>
@ -1468,90 +1468,93 @@ onMounted(async () => {
ปโหลดไฟลเอกสารหลกฐาน
</div>
<div class="col-12"><q-separator /></div>
<div
v-if="!isReadonly && formData.id !== ''"
class="col-12 q-pa-sm row"
>
<q-file
for="inputFiles"
class="col-11"
outlined
dense
v-model="formData.documentFile"
@added="uploadFile"
label="ไฟล์เอกสารหลักฐาน"
accept=".pdf,.xlsx,.doc"
clearable
<div class="row col-12 q-col-gutter-y-sm q-pa-sm">
<div
v-if="!isReadonly && formData.id !== ''"
class="col-12 row"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
<div class="col-1 self-center">
<q-btn
v-if="formData.documentFile"
size="14px"
flat
round
<q-file
for="inputFiles"
class="col-12"
outlined
dense
color="add"
icon="mdi-upload"
@click="uploadFile"
><q-tooltip>ปโหลดไฟล</q-tooltip></q-btn
v-model="formData.documentFile"
@added="uploadFile"
label="ไฟล์เอกสารหลักฐาน"
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
v-if="props.data.disciplineInvestigateDocs.length > 0"
class="col-xs-12 q-pa-sm row"
>
<q-list
v-for="file in props.data.disciplineInvestigateDocs"
:key="file.id"
class="full-width"
bordered
separator
<div
v-if="props.data.disciplineInvestigateDocs.length > 0"
class="col-xs-12 row"
>
<q-item clickable v-ripple>
<q-item-section>{{ file.fileName }}</q-item-section>
<q-item-section avatar>
<div class="row">
<div>
<q-btn
dense
flat
round
size="12px"
color="blue"
icon="mdi-download-outline"
@click="downloadFile(file.pathName)"
>
<q-tooltip>ดาวนโหลดไฟล</q-tooltip>
</q-btn>
<q-list
class="full-width rounded-borders"
bordered
separator
>
<q-item
v-for="file in props.data.disciplineInvestigateDocs"
:key="file.id"
clickable
v-ripple>
<q-item-section>{{ file.fileName }}</q-item-section>
<q-item-section avatar>
<div class="row">
<div>
<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>
<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>
</q-item-section>
</q-item>
</q-list>
</div>
</q-item-section>
</q-item>
</q-list>
</div>
<div class="col-12 q-pa-sm" v-else>
<q-card class="q-pa-md" bordered> ไมรายการเอกสาร </q-card>
<div class="col-12" v-else>
<q-card class="q-pa-md" bordered> ไมรายการเอกสาร </q-card>
</div>
</div>
</q-card>
</div>