inputgreen

This commit is contained in:
setthawutttty 2023-12-08 14:00:02 +07:00
parent 6d12f50399
commit a5335df0b6
6 changed files with 206 additions and 158 deletions

View file

@ -375,6 +375,7 @@ onMounted(() => {
<div class="col-xs-12 col-sm-12 row q-col-gutter-md"> <div class="col-xs-12 col-sm-12 row 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)"
for="SelectrespondentType" for="SelectrespondentType"
v-model="formData.respondentType" v-model="formData.respondentType"
ref="respondentTypeRef" ref="respondentTypeRef"
@ -412,6 +413,7 @@ onMounted(() => {
id="organizationId" id="organizationId"
> >
<q-select <q-select
:class="inputEdit(isReadonly)"
for="inputOffice" for="inputOffice"
name="organizationId" name="organizationId"
ref="organizationIdRef" ref="organizationIdRef"
@ -434,6 +436,7 @@ onMounted(() => {
<div class="col-xs-12 col-sm-4" id="consideredAgency"> <div class="col-xs-12 col-sm-4" id="consideredAgency">
<q-select <q-select
:class="inputEdit(isReadonly)"
ref="consideredAgencyRef" ref="consideredAgencyRef"
for="selectAgency" for="selectAgency"
dense dense
@ -576,6 +579,7 @@ onMounted(() => {
for="inputTopicComplaint" for="inputTopicComplaint"
ref="titleRef" ref="titleRef"
dense dense
:class="inputEdit(isReadonly)"
outlined outlined
:readonly="isReadonly" :readonly="isReadonly"
hide-bottom-space hide-bottom-space
@ -591,6 +595,7 @@ onMounted(() => {
<div class="col-xs-12 col-sm-12" id="description"> <div class="col-xs-12 col-sm-12" id="description">
<q-input <q-input
:class="inputEdit(isReadonly)"
for="inputDetail" for="inputDetail"
ref="descriptionRef" ref="descriptionRef"
dense dense
@ -660,6 +665,7 @@ onMounted(() => {
<div class="col-xs-12 col-sm-3" id="levelConsideration"> <div class="col-xs-12 col-sm-3" id="levelConsideration">
<q-select <q-select
:class="inputEdit(isReadonly)"
for="selectConsiderationLevel" for="selectConsiderationLevel"
ref="levelConsiderationRef" ref="levelConsiderationRef"
dense dense
@ -737,6 +743,7 @@ onMounted(() => {
<div class="col-xs-12 col-sm-3" id="offenseDetails"> <div class="col-xs-12 col-sm-3" id="offenseDetails">
<q-select <q-select
:class="inputEdit(isReadonly)"
for="selectOffenseDescription" for="selectOffenseDescription"
ref="offenseDetailsRef" ref="offenseDetailsRef"
dense dense
@ -810,6 +817,7 @@ onMounted(() => {
<div class="col-xs-12 col-sm-3" id="complaintFrom"> <div class="col-xs-12 col-sm-3" id="complaintFrom">
<q-select <q-select
:class="inputEdit(isReadonly)"
for="selectReceivecomplaints" for="selectReceivecomplaints"
ref="complaintFromRef" ref="complaintFromRef"
dense dense
@ -833,6 +841,7 @@ onMounted(() => {
<div class="col-xs-12 col-sm-12" id="appellant"> <div class="col-xs-12 col-sm-12" id="appellant">
<q-input <q-input
:class="inputEdit(isReadonly)"
for="inputPetitioner" for="inputPetitioner"
ref="appellantRef" ref="appellantRef"
dense dense
@ -850,6 +859,7 @@ onMounted(() => {
</div> </div>
<div class="col-xs-12 col-sm-12"> <div class="col-xs-12 col-sm-12">
<q-input <q-input
:class="inputEdit(isReadonly)"
:readonly="isReadonly" :readonly="isReadonly"
for="result" for="result"
ref="resultRef" ref="resultRef"

View file

@ -487,7 +487,15 @@ function calendarOpen() {
calendarModal.value = true; calendarModal.value = true;
} }
function inputEdit(val: boolean) {
function inputEdit(val:boolean){
return {
"full-width cursor-pointer ": val,
"full-width cursor-pointer inputgreen": !val,
};
}
function inputEditExtend(val: boolean) {
if (formData.investigationExtendHistory.length > 0) { if (formData.investigationExtendHistory.length > 0) {
return { return {
"full-width cursor-pointer ": val, "full-width cursor-pointer ": val,
@ -525,6 +533,7 @@ onMounted(async () => {
<div class="col-xs-12 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"> <div class="col-xs-12 col-sm-3" id="respondentType">
<q-select <q-select
:class="inputEdit(isReadonly)"
for="SelectrespondentType" for="SelectrespondentType"
v-model="formData.respondentType" v-model="formData.respondentType"
ref="respondentTypeRef" ref="respondentTypeRef"
@ -562,6 +571,7 @@ onMounted(async () => {
id="organizationId" id="organizationId"
> >
<q-select <q-select
:class="inputEdit(isReadonly)"
for="inputOffice" for="inputOffice"
name="organizationId" name="organizationId"
ref="organizationIdRef" ref="organizationIdRef"
@ -699,6 +709,7 @@ onMounted(async () => {
<div class="col-xs-12 col-sm-3"> <div class="col-xs-12 col-sm-3">
<q-select <q-select
:class="inputEdit(isReadonly)"
:readonly="isReadonly" :readonly="isReadonly"
for="#investigationDetail" for="#investigationDetail"
outlined outlined
@ -737,9 +748,9 @@ onMounted(async () => {
class="col-12" class="col-12"
> >
<q-input <q-input
:class="inputEdit(isReadonly)"
:readonly="isReadonly" :readonly="isReadonly"
for="#investigationDetailOther" for="#investigationDetailOther"
class="full-width cursor-pointer"
outlined outlined
ref="investigationDetailOtherRef" ref="investigationDetailOtherRef"
dense dense
@ -813,6 +824,7 @@ onMounted(async () => {
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<div v-if="investigationExtendStatus" class="col-3"> <div v-if="investigationExtendStatus" class="col-3">
<q-select <q-select
:class="inputEdit(isReadonly)"
:readonly="isReadonly" :readonly="isReadonly"
for="#daysExtend" for="#daysExtend"
outlined outlined
@ -867,7 +879,7 @@ onMounted(async () => {
<template #trigger> <template #trigger>
<q-input <q-input
for="#date" for="#date"
:class="inputEdit(isReadonly)" :class="inputEditExtend(isReadonly)"
ref="dateRef" ref="dateRef"
:readonly=" :readonly="
isReadonly || isReadonly ||
@ -929,7 +941,7 @@ onMounted(async () => {
<q-input <q-input
for="#dateEnd" for="#dateEnd"
ref="dateEndRef" ref="dateEndRef"
:class="inputEdit(isReadonly)" :class="inputEditExtend(isReadonly)"
:readonly=" :readonly="
isReadonly || isReadonly ||
formData.investigationExtendHistory.length > formData.investigationExtendHistory.length >
@ -1078,9 +1090,9 @@ onMounted(async () => {
<div class="col-12"> <div class="col-12">
<q-input <q-input
:class="inputEdit(isReadonly)"
:readonly="isReadonly" :readonly="isReadonly"
for="#investigationDescription" for="#investigationDescription"
class="full-width cursor-pointer"
outlined outlined
ref="investigationDescriptionRef" ref="investigationDescriptionRef"
dense dense
@ -1113,6 +1125,7 @@ onMounted(async () => {
<div class="row col-12 q-col-gutter-md"> <div class="row col-12 q-col-gutter-md">
<div class="col-3"> <div class="col-3">
<q-select <q-select
:class="inputEdit(isReadonly)"
for="#fault" for="#fault"
outlined outlined
dense dense
@ -1151,6 +1164,7 @@ onMounted(async () => {
class="col-3" class="col-3"
> >
<q-select <q-select
:class="inputEdit(isReadonly)"
:readonly="isReadonly" :readonly="isReadonly"
for="#fault" for="#fault"
outlined outlined
@ -1182,7 +1196,7 @@ onMounted(async () => {
<div class="row col-12"> <div class="row col-12">
<q-input <q-input
class="full-width cursor-pointer" :class="inputEdit(isReadonly)"
outlined outlined
ref="resultRef" ref="resultRef"
:readonly="isReadonly" :readonly="isReadonly"

View file

@ -219,14 +219,12 @@ function onSubmit() {
formData.disciplinaryDateStart !== null && formData.disciplinaryDateStart !== null &&
formData.disciplinaryDateEnd !== null formData.disciplinaryDateEnd !== null
) { ) {
const disciplinaryDateStart = new Date( const disciplinaryDateStart = new Date(formData.disciplinaryDateStart);
formData.disciplinaryDateStart
);
const disciplinaryDateEnd = new Date(formData.disciplinaryDateEnd); const disciplinaryDateEnd = new Date(formData.disciplinaryDateEnd);
formData.disciplinaryDateStart = moment(disciplinaryDateStart).format( formData.disciplinaryDateStart = moment(disciplinaryDateStart).format(
"YYYY-MM-DD" "YYYY-MM-DD"
) ; );
formData.disciplinaryDateEnd = formData.disciplinaryDateEnd =
moment(disciplinaryDateEnd).format("YYYY-MM-DD"); moment(disciplinaryDateEnd).format("YYYY-MM-DD");
} }
@ -465,7 +463,7 @@ function resetExtend() {
formData.daysExtend = 0; formData.daysExtend = 0;
} }
function inputEdit(val:boolean){ function inputEdit(val: boolean) {
return { return {
"full-width cursor-pointer ": val, "full-width cursor-pointer ": val,
"full-width cursor-pointer inputgreen": !val, "full-width cursor-pointer inputgreen": !val,
@ -488,7 +486,6 @@ function inputEditExtend(val: boolean) {
onMounted(async () => { onMounted(async () => {
mainStore.rowsAdd = []; mainStore.rowsAdd = [];
await fetchOrganization(); await fetchOrganization();
}); });
</script> </script>
<template> <template>
@ -513,6 +510,7 @@ onMounted(async () => {
<div class="row col-12 q-col-gutter-x-md"> <div class="row col-12 q-col-gutter-x-md">
<div class="col-xs-12 col-sm-3"> <div class="col-xs-12 col-sm-3">
<q-select <q-select
:class="inputEdit(isReadonly)"
:readonly="isReadonly" :readonly="isReadonly"
for="SelectrespondentType" for="SelectrespondentType"
v-model="formData.respondentType" v-model="formData.respondentType"
@ -743,7 +741,6 @@ onMounted(async () => {
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
@ -874,6 +871,7 @@ onMounted(async () => {
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<div v-if="extendStatus" class="col-3"> <div v-if="extendStatus" class="col-3">
<q-select <q-select
:class="inputEdit(isReadonly)"
:readonly="isReadonly" :readonly="isReadonly"
for="#daysExtend" for="#daysExtend"
outlined outlined
@ -1243,139 +1241,153 @@ onMounted(async () => {
</div> </div>
</q-card> </q-card>
</div> </div>
<q-input <div class="col-xs-12 col-sm-3">
:readonly="isReadonly" <q-input
class="col-xs-12 col-sm-3" :class="inputEdit(isReadonly)"
dense :readonly="isReadonly"
outlined dense
ref="disciplinaryCaseFaultRef" outlined
v-model="formData.disciplinaryCaseFault" ref="disciplinaryCaseFaultRef"
for="#casefault" v-model="formData.disciplinaryCaseFault"
label="กรณีมีความผิด" for="#casefault"
hide-bottom-space label="กรณีมีความผิด"
:rules="[(val) => !!val || `${'กรุณากรอกกรณีมีความผิด'}`]" hide-bottom-space
lazy-rules :rules="[(val) => !!val || `${'กรุณากรอกกรณีมีความผิด'}`]"
@update:model-value="changeFormData()" lazy-rules
/> @update:model-value="changeFormData()"
/>
</div>
<div class="col-xs-12 col-sm-3">
<q-input
:class="inputEdit(isReadonly)"
:readonly="isReadonly"
dense
hide-bottom-space
outlined
for="#whereInvestigate"
ref="disciplinaryInvestigateAtRef"
v-model="formData.disciplinaryInvestigateAt"
label="สอบสวนที่"
:rules="[(val) => !!val || `${'กรุณากรอกสอบสวนที่'}`]"
lazy-rules
@update:model-value="changeFormData()"
/>
</div>
<q-input <div class="col-xs-12 col-sm-3">
:readonly="isReadonly" <q-select
class="col-xs-12 col-sm-3" :class="inputEdit(isReadonly)"
dense :readonly="isReadonly"
hide-bottom-space dense
outlined outlined
for="#whereInvestigate" for="#faultLevel"
ref="disciplinaryInvestigateAtRef" ref="disciplinaryFaultLevelRef"
v-model="formData.disciplinaryInvestigateAt" v-model="formData.disciplinaryFaultLevel"
label="สอบสวนที่" option-label="name"
:rules="[(val) => !!val || `${'กรุณากรอกสอบสวนที่'}`]" option-value="id"
lazy-rules emit-value
@update:model-value="changeFormData()" map-options
/> hide-bottom-space
:options="investigateDis.optionsfaultLevel"
label="ระดับโทษความผิด"
:rules="[
(val) => !!val || `${'กรุณาเลือกระดับโทษความผิด'}`,
]"
lazy-rules
group-label="group"
group-values="options"
@update:model-value="changeFormData()"
>
</q-select>
</div>
<div class="col-xs-12 col-sm-3">
<q-input
:class="inputEdit(isReadonly)"
:readonly="isReadonly"
dense
for="#refLaw"
hide-bottom-space
outlined
ref="disciplinaryRefLawRef"
v-model="formData.disciplinaryRefLaw"
label="อ้างอิงมาตราตามกฎหมาย"
:rules="[
(val) => !!val || `${'กรุณากรอกอ้างอิงมาตราตามกฎหมาย'}`,
]"
lazy-rules
@update:model-value="changeFormData()"
/>
</div>
<div class="col-xs-12 col-sm-6">
<q-input
:readonly="isReadonly"
:class="inputEdit(isReadonly)"
dense
outlined
for="#evidence"
ref="disciplinarySummaryEvidenceRef"
hide-bottom-space
v-model="formData.disciplinarySummaryEvidence"
label="สรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
type="textarea"
:rules="[(val:string) => !!val || `${'กรุณากรอกสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา'}`]"
lazy-rules
@update:model-value="changeFormData()"
/>
</div>
<q-select <div class="col-xs-12 col-sm-6">
:readonly="isReadonly" <q-input
dense :readonly="isReadonly"
class="col-xs-12 col-sm-3" :class="inputEdit(isReadonly)"
outlined dense
for="#faultLevel" outlined
ref="disciplinaryFaultLevelRef" ref="disciplinaryRecordAccuserRef"
v-model="formData.disciplinaryFaultLevel" for="#recordAccuser"
option-label="name" v-model="formData.disciplinaryRecordAccuser"
option-value="id" label="บันทึกถ้อยคำของผู้กล่าวหา"
emit-value hide-bottom-space
map-options type="textarea"
hide-bottom-space :rules="[(val:string) => !!val || `${'กรุณากรอกบันทึกถ้อยคำของผู้กล่าวหา'}`]"
:options="investigateDis.optionsfaultLevel" lazy-rules
label="ระดับโทษความผิด" @update:model-value="changeFormData()"
:rules="[(val) => !!val || `${'กรุณาเลือกระดับโทษความผิด'}`]" />
lazy-rules </div>
group-label="group" <div class="col-xs-12 col-sm-6">
group-values="options" <q-input
@update:model-value="changeFormData()" :readonly="isReadonly"
> :class="inputEdit(isReadonly)"
</q-select> dense
outlined
for="#witnesses"
ref="disciplinaryWitnessesRef"
v-model="formData.disciplinaryWitnesses"
label="พยานและบันทึกถ้อยคำพยาน"
hide-bottom-space
type="textarea"
:rules="[(val:string) => !!val || `${'กรุณากรอกพยานและบันทึกถ้อยคำพยาน'}`]"
lazy-rules
@update:model-value="changeFormData()"
/>
</div>
<q-input <div class="col-xs-12 col-sm-6">
:readonly="isReadonly" <q-input
class="col-xs-12 col-sm-3" :readonly="isReadonly"
dense :class="inputEdit(isReadonly)"
for="#refLaw" dense
hide-bottom-space outlined
outlined for="#InvestResults"
ref="disciplinaryRefLawRef" ref="resultRef"
v-model="formData.disciplinaryRefLaw" v-model="formData.result"
label="อ้างอิงมาตราตามกฎหมาย" label="ผลการสอบสวน"
:rules="[ hide-bottom-space
(val) => !!val || `${'กรุณากรอกอ้างอิงมาตราตามกฎหมาย'}`, type="textarea"
]" :rules="[(val:string) => !!val || `${'กรุณากรอกผลการสอบสวน'}`]"
lazy-rules lazy-rules
@update:model-value="changeFormData()" @update:model-value="changeFormData()"
/> />
</div>
<q-input
:readonly="isReadonly"
class="col-xs-12 col-sm-6"
dense
outlined
for="#evidence"
ref="disciplinarySummaryEvidenceRef"
hide-bottom-space
v-model="formData.disciplinarySummaryEvidence"
label="สรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
type="textarea"
:rules="[(val:string) => !!val || `${'กรุณากรอกสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา'}`]"
lazy-rules
@update:model-value="changeFormData()"
/>
<q-input
:readonly="isReadonly"
class="col-xs-12 col-sm-6"
dense
outlined
ref="disciplinaryRecordAccuserRef"
for="#recordAccuser"
v-model="formData.disciplinaryRecordAccuser"
label="บันทึกถ้อยคำของผู้กล่าวหา"
hide-bottom-space
type="textarea"
:rules="[(val:string) => !!val || `${'กรุณากรอกบันทึกถ้อยคำของผู้กล่าวหา'}`]"
lazy-rules
@update:model-value="changeFormData()"
/>
<q-input
:readonly="isReadonly"
class="col-xs-12 col-sm-6"
dense
outlined
for="#witnesses"
ref="disciplinaryWitnessesRef"
v-model="formData.disciplinaryWitnesses"
label="พยานและบันทึกถ้อยคำพยาน"
hide-bottom-space
type="textarea"
:rules="[(val:string) => !!val || `${'กรุณากรอกพยานและบันทึกถ้อยคำพยาน'}`]"
lazy-rules
@update:model-value="changeFormData()"
/>
<q-input
:readonly="isReadonly"
class="col-xs-12 col-sm-6"
dense
outlined
for="#InvestResults"
ref="resultRef"
v-model="formData.result"
label="ผลการสอบสวน"
hide-bottom-space
type="textarea"
:rules="[(val:string) => !!val || `${'กรุณากรอกผลการสอบสวน'}`]"
lazy-rules
@update:model-value="changeFormData()"
/>
<div class="row col-12"> <div class="row col-12">
<q-card <q-card
@ -1395,6 +1407,7 @@ onMounted(async () => {
<div class="row col-12 q-col-gutter-md"> <div class="row col-12 q-col-gutter-md">
<div class="col-3"> <div class="col-3">
<q-select <q-select
:class="inputEdit(isReadonly)"
for="#fault" for="#fault"
outlined outlined
dense dense
@ -1433,6 +1446,7 @@ onMounted(async () => {
class="col-3" class="col-3"
> >
<q-select <q-select
:class="inputEdit(isReadonly)"
:readonly="isReadonly" :readonly="isReadonly"
for="#fault" for="#fault"
outlined outlined
@ -1464,6 +1478,7 @@ onMounted(async () => {
<div class="row col-12"> <div class="row col-12">
<q-input <q-input
:class="inputEdit(isReadonly)"
:readonly="isReadonly" :readonly="isReadonly"
class="full-width cursor-pointer" class="full-width cursor-pointer"
outlined outlined

View file

@ -120,6 +120,7 @@ const dataInvestigatefacts = reactive<FormInvestigateFact>({
respondentType: "", respondentType: "",
organizationId: "", organizationId: "",
persons: [], persons: [],
investigationExtendHistory:[]
}); });
/** function เรียกรายละเอียดสืบสวนข้อเท็จจริง*/ /** function เรียกรายละเอียดสืบสวนข้อเท็จจริง*/
async function fetchDetailInvestigate() { async function fetchDetailInvestigate() {

View file

@ -162,6 +162,13 @@ watch(
} }
); );
function inputEdit(val: boolean) {
return {
"full-width cursor-pointer ": val,
"full-width cursor-pointer inputgreen": !val,
};
}
/** ฟังก์ชั่นเช็คการแก้ไขฟอร์มแล้วไม่ได้กดบันทึก */ /** ฟังก์ชั่นเช็คการแก้ไขฟอร์มแล้วไม่ได้กดบันทึก */
function changeFormData() { function changeFormData() {
isSave.value = true; isSave.value = true;
@ -360,20 +367,22 @@ onMounted(async () => {});
</div> </div>
</q-card> </q-card>
</div> </div>
<q-input <div class="col-12">
type="textarea" <q-input
class="col-12" :class="inputEdit(isReadonly)"
dense type="textarea"
outlined dense
ref="detailRef" outlined
v-model="formData.resultDescription" ref="detailRef"
for="#detail" v-model="formData.resultDescription"
label="สรุปผลการพิจารณา" for="#detail"
hide-bottom-space label="สรุปผลการพิจารณา"
:rules="[(val) => !!val || `${'กรุณากรอกสรุปผลการพิจารณา'}`]" hide-bottom-space
lazy-rules :rules="[(val) => !!val || `${'กรุณากรอกสรุปผลการพิจารณา'}`]"
@update:model-value="changeFormData()" lazy-rules
/> @update:model-value="changeFormData()"
/>
</div>
</div> </div>
</div> </div>
<q-separator /> <q-separator />

View file

@ -486,7 +486,6 @@ onMounted(async () => {
</div> </div>
<div class="col-12"> <div class="col-12">
<q-input <q-input
:class="getClass(edit)"
:outlined="edit" :outlined="edit"
dense dense
readonly readonly