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,9 +219,7 @@ 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(
@ -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,9 +1241,10 @@ onMounted(async () => {
</div> </div>
</q-card> </q-card>
</div> </div>
<div class="col-xs-12 col-sm-3">
<q-input <q-input
:class="inputEdit(isReadonly)"
:readonly="isReadonly" :readonly="isReadonly"
class="col-xs-12 col-sm-3"
dense dense
outlined outlined
ref="disciplinaryCaseFaultRef" ref="disciplinaryCaseFaultRef"
@ -1257,10 +1256,11 @@ onMounted(async () => {
lazy-rules lazy-rules
@update:model-value="changeFormData()" @update:model-value="changeFormData()"
/> />
</div>
<div class="col-xs-12 col-sm-3">
<q-input <q-input
:class="inputEdit(isReadonly)"
:readonly="isReadonly" :readonly="isReadonly"
class="col-xs-12 col-sm-3"
dense dense
hide-bottom-space hide-bottom-space
outlined outlined
@ -1272,11 +1272,13 @@ onMounted(async () => {
lazy-rules lazy-rules
@update:model-value="changeFormData()" @update:model-value="changeFormData()"
/> />
</div>
<div class="col-xs-12 col-sm-3">
<q-select <q-select
:class="inputEdit(isReadonly)"
:readonly="isReadonly" :readonly="isReadonly"
dense dense
class="col-xs-12 col-sm-3"
outlined outlined
for="#faultLevel" for="#faultLevel"
ref="disciplinaryFaultLevelRef" ref="disciplinaryFaultLevelRef"
@ -1288,17 +1290,20 @@ onMounted(async () => {
hide-bottom-space hide-bottom-space
:options="investigateDis.optionsfaultLevel" :options="investigateDis.optionsfaultLevel"
label="ระดับโทษความผิด" label="ระดับโทษความผิด"
:rules="[(val) => !!val || `${'กรุณาเลือกระดับโทษความผิด'}`]" :rules="[
(val) => !!val || `${'กรุณาเลือกระดับโทษความผิด'}`,
]"
lazy-rules lazy-rules
group-label="group" group-label="group"
group-values="options" group-values="options"
@update:model-value="changeFormData()" @update:model-value="changeFormData()"
> >
</q-select> </q-select>
</div>
<div class="col-xs-12 col-sm-3">
<q-input <q-input
:class="inputEdit(isReadonly)"
:readonly="isReadonly" :readonly="isReadonly"
class="col-xs-12 col-sm-3"
dense dense
for="#refLaw" for="#refLaw"
hide-bottom-space hide-bottom-space
@ -1312,10 +1317,11 @@ onMounted(async () => {
lazy-rules lazy-rules
@update:model-value="changeFormData()" @update:model-value="changeFormData()"
/> />
</div>
<div class="col-xs-12 col-sm-6">
<q-input <q-input
:readonly="isReadonly" :readonly="isReadonly"
class="col-xs-12 col-sm-6" :class="inputEdit(isReadonly)"
dense dense
outlined outlined
for="#evidence" for="#evidence"
@ -1328,10 +1334,12 @@ onMounted(async () => {
lazy-rules lazy-rules
@update:model-value="changeFormData()" @update:model-value="changeFormData()"
/> />
</div>
<div class="col-xs-12 col-sm-6">
<q-input <q-input
:readonly="isReadonly" :readonly="isReadonly"
class="col-xs-12 col-sm-6" :class="inputEdit(isReadonly)"
dense dense
outlined outlined
ref="disciplinaryRecordAccuserRef" ref="disciplinaryRecordAccuserRef"
@ -1344,10 +1352,11 @@ onMounted(async () => {
lazy-rules lazy-rules
@update:model-value="changeFormData()" @update:model-value="changeFormData()"
/> />
</div>
<div class="col-xs-12 col-sm-6">
<q-input <q-input
:readonly="isReadonly" :readonly="isReadonly"
class="col-xs-12 col-sm-6" :class="inputEdit(isReadonly)"
dense dense
outlined outlined
for="#witnesses" for="#witnesses"
@ -1360,10 +1369,12 @@ onMounted(async () => {
lazy-rules lazy-rules
@update:model-value="changeFormData()" @update:model-value="changeFormData()"
/> />
</div>
<div class="col-xs-12 col-sm-6">
<q-input <q-input
:readonly="isReadonly" :readonly="isReadonly"
class="col-xs-12 col-sm-6" :class="inputEdit(isReadonly)"
dense dense
outlined outlined
for="#InvestResults" for="#InvestResults"
@ -1376,6 +1387,7 @@ onMounted(async () => {
lazy-rules lazy-rules
@update:model-value="changeFormData()" @update:model-value="changeFormData()"
/> />
</div>
<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,9 +367,10 @@ onMounted(async () => {});
</div> </div>
</q-card> </q-card>
</div> </div>
<div class="col-12">
<q-input <q-input
:class="inputEdit(isReadonly)"
type="textarea" type="textarea"
class="col-12"
dense dense
outlined outlined
ref="detailRef" ref="detailRef"
@ -376,6 +384,7 @@ onMounted(async () => {});
/> />
</div> </div>
</div> </div>
</div>
<q-separator /> <q-separator />
<div class="row col-12 q-pa-sm"> <div class="row col-12 q-pa-sm">
<q-space /> <q-space />

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