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

ปรับ css stepper และ ui step ภขุ

Browse source
This commit is contained in:
Tanyalak 2024-01-17 10:37:30 +07:00
parent bdc60b3661
commit 0a0a21e707
7 changed files with 399 additions and 464 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/modules/06_evaluate/components/DialogMain.vue
View file

@ -51,7 +51,7 @@ watch(props, () => {
<template>
<q-dialog v-model="props.modal">
<q-card style="width: 800px; max-width: 90vw; border-radius: 20px">
<q-card style="width: 800px; max-width: 90vw; border-radius: 8px">
<DialogHeader
class="text-center text-edit"
:tittle="`ขั้นตอนการ${props.menu ? props.menu.label : ''}`"

315
src/modules/06_evaluate/components/EvaluateStepMain.vue
View file

@ -577,34 +577,36 @@ onMounted(async () => {
<div class="col-xs-12 col-sm-12 col-md-11 row">
<div class="col-12 row">
<q-card bordered class="col-12 row caedNone">
<div class="col-xs-12 col-sm-3">
<div class="col-xs-12 col-sm-3 row">
<div class="col-12 row no-wrap">
<div class="col-12 row q-py-md q-px-lg" >
<div class="col-12 row items-center no-wrap">
<div class="toptitle2">
{{
route.params.type === "expert"
? "ประเมินชำนาญการ"
: "ประเมินชำนาญการพิเศษ"
}}
<div class="col-12">
<div class="col-12 row items-center no-wrap">
<div class="toptitle2">
{{
route.params.type === "expert"
? "ประเมินชำนาญการ"
: "ประเมินชำนาญการพิเศษ"
}}
</div>
<q-space/>
<div>
<q-btn
flat
round
dense
color="primary"
icon="history"
@click="onClickPopupHistory"
>
<q-tooltip>ประวัติการประเมิน</q-tooltip>
</q-btn>
</div>
</div>
<q-space/>
<div>
<q-btn
flat
round
dense
color="primary"
icon="history"
@click="onClickPopupHistory"
>
<q-tooltip>ประวัติการประเมิน</q-tooltip>
</q-btn>
<Stepper />
</div>
</div>
<div>
<Stepper />
</div>
</div>
<div class="col-12 row">
<q-separator vertical/>
@ -612,148 +614,149 @@ onMounted(async () => {
</div>
</div>
<div class="col-xs-12 col-sm-9 q-pa-md" v-if="showLoadStatus">
<div class="col-12 row items-center">
<div class="col-9">
<div class="col-xs-12 col-sm-9 q-pa-md row" v-if="showLoadStatus">
<div class="col-12">
<div class="col-12 row items-center">
<div class="toptitle2">
{{ store.step }}.{{ store.title[store.step - 1] }}
</div>
</div>
<div class="col-3 text-right">
<q-btn
v-if="store.step === 1"
:href="externalLink"
target="_blank"
outline
color="blue"
dense
class="q-px-md"
no-caps
>
ตรวจสอบคุณสมบัติกับ ก.พ.
</q-btn>
</div>
</div>
<div class="row q-col-gutter-md col-12 q-pt-sm">
<div
:class="
store.step === 2 ||
store.step === 4 ||
store.step === 5 ||
store.step === 6 ||
store.step === 8 ||
store.step === 9
? 'col-xs-12 col-sm-12 row'
: 'col-xs-12 col-sm-5 row'
"
>
<q-card flat bordered class="col-12 shadow-0">
<Step1
v-if="store.step === 1"
@update:spec="updateCheckSpec"
:data="formDataStep1"
:educations="formDetail?.educations"
/>
<Step2
v-if="store.step === 2"
@update:form="updateformCommand"
/>
<Step3
v-if="store.step === 3"
@update:file="updateFilePDF"
/>
<Step4 v-if="store.step === 4" />
<Step5 v-if="store.step === 5" />
<Step6
v-if="store.step === 6"
@update:form="updateformCommand"
/>
<Step7
v-if="store.step === 7"
@update:file="updateFilePDF"
/>
<Step8 v-if="store.step === 8" />
<Step9 v-if="store.step === 9" />
</q-card>
</div>
<div
class="col-xs-12 col-sm-7 row"
v-if="store.step === 1 || store.step === 3 || store.step === 7"
>
<div class="col-12 ">
<ViewStep1
<q-space/>
<div>
<q-btn
v-if="store.step === 1"
@update:formDeital="updateFormDetail"
:data="formDataStep1"
/>
<ViewStep3
v-if="store.step === 3 && pdfSrc"
:pdfSrc="pdfSrc"
:urlDownloadFile="urlDownloadFile"
/>
<ViewStep7
v-if="store.step === 7 && pdfSrc"
:pdfSrc="pdfSrc"
:urlDownloadFile="urlDownloadFile"
/>
:href="externalLink"
target="_blank"
outline
color="blue"
dense
class="q-px-md"
no-caps
>
ตรวจสอบคุณสมบัติกับ ก.พ.
</q-btn>
</div>
</div>
</div>
<div class="q-pt-sm q-gutter-md" align="right">
<q-btn
v-if="
store.step >= store.currentStep &&
store.statusUpload === false &&
store.step !== 3 &&
store.step !== 4 &&
store.step !== 5 &&
store.step !== 7 &&
store.step !== 8 &&
store.step !== 9
"
unelevated
:label="
store.step === 2 || store.step === 6
? 'บันทึกข้อมูล'
: 'ดำเนินการต่อ'
"
color="public"
@click="onCilckNextStep()"
/>
<div class="row q-col-gutter-md col-12 q-pt-sm">
<div
:class="
store.step === 2 ||
store.step === 4 ||
store.step === 5 ||
store.step === 6 ||
store.step === 8 ||
store.step === 9
? 'col-xs-12 col-sm-12 row'
: 'col-xs-12 col-sm-5 row'
"
>
<q-card flat bordered class="col-12 shadow-0">
<Step1
v-if="store.step === 1"
@update:spec="updateCheckSpec"
:data="formDataStep1"
:educations="formDetail?.educations"
/>
<Step2
v-if="store.step === 2"
@update:form="updateformCommand"
/>
<Step3
v-if="store.step === 3"
@update:file="updateFilePDF"
/>
<Step4 v-if="store.step === 4" />
<Step5 v-if="store.step === 5" />
<Step6
v-if="store.step === 6"
@update:form="updateformCommand"
/>
<Step7
v-if="store.step === 7"
@update:file="updateFilePDF"
/>
<Step8 v-if="store.step === 8" />
<Step9 v-if="store.step === 9" />
</q-card>
</div>
<div
class="col-xs-12 col-sm-7 row"
v-if="store.step === 1 || store.step === 3 || store.step === 7"
>
<div class="col-12 ">
<ViewStep1
v-if="store.step === 1"
@update:formDeital="updateFormDetail"
:data="formDataStep1"
/>
<ViewStep3
v-if="store.step === 3 && pdfSrc"
:pdfSrc="pdfSrc"
:urlDownloadFile="urlDownloadFile"
/>
<ViewStep7
v-if="store.step === 7 && pdfSrc"
:pdfSrc="pdfSrc"
:urlDownloadFile="urlDownloadFile"
/>
</div>
</div>
</div>
<div class="q-pt-md q-gutter-md" align="right">
<q-btn
v-if="
store.step >= store.currentStep &&
store.statusUpload === false &&
store.step !== 3 &&
store.step !== 4 &&
store.step !== 5 &&
store.step !== 7 &&
store.step !== 8 &&
store.step !== 9
"
unelevated
:label="
store.step === 2 || store.step === 6
? 'บันทึกข้อมูล'
: 'ดำเนินการต่อ'
"
color="public"
@click="onCilckNextStep()"
/>
<q-btn
v-else-if="
store.step >= store.currentStep &&
(store.step == 3 || store.step == 7)
"
unelevated
label="ยื่นเอกสาร"
color="public"
@click="onCilckNextStep()"
/>
<q-btn
v-else-if="
store.step >= store.currentStep &&
(store.step == 3 || store.step == 7)
"
unelevated
label="ยื่นเอกสาร"
color="public"
@click="onCilckNextStep()"
/>
<q-btn
v-if="
store.step >= store.currentStep &&
store.step == 2 &&
store.statusUpload
"
unelevated
label="ดำเนินการต่อ"
color="public"
@click="onCilckNextStep()"
/>
<q-btn
v-if="
store.step >= store.currentStep &&
store.step == 6 &&
store.statusUpload
"
unelevated
label="ดำเนินการต่อ"
color="public"
@click="onCilckNextStep()"
/>
<q-btn
v-if="
store.step >= store.currentStep &&
store.step == 2 &&
store.statusUpload
"
unelevated
label="ดำเนินการต่อ"
color="public"
@click="onCilckNextStep()"
/>
<q-btn
v-if="
store.step >= store.currentStep &&
store.step == 6 &&
store.statusUpload
"
unelevated
label="ดำเนินการต่อ"
color="public"
@click="onCilckNextStep()"
/>
</div>
</div>
</div>
</q-card>

131
src/modules/06_evaluate/components/Stepper.vue
View file

@ -15,7 +15,7 @@ const store = useEvaluateStore();
:bordered="false"
header-nav
dense
class="stepEva"
class="stepEva text-grey-8"
>
<q-step
keep-alive
@ -108,106 +108,6 @@ const store = useEvaluateStore();
>
</q-step>
</q-stepper>
<!-- <q-stepper
v-model="store.step"
dense
vertical
animated
flat
ref="stepper"
class="stepEva"
>
<q-step
keep-alive
:name="1"
prefix="1"
title="ตรวจสอบคุณสมบัติ"
:done="store.currentStep >= 1"
:disable="store.currentStep < 1"
class="subStep"
>
</q-step>
<q-step
:name="2"
prefix="2"
title="จัดเตรียมเอกสารเล่ม 1"
:done="store.currentStep >= 2"
:disable="store.currentStep < 2"
class="subStep"
>
</q-step>
<q-step
:name="3"
prefix="3"
title="ตรวจสอบเอกสารเล่ม 1"
:done="store.currentStep >= 3"
:disable="store.currentStep < 3"
class="subStep"
>
</q-step>
<q-step
:name="4"
prefix="4"
title="รอตรวจสอบคุณสมบัติ"
:done="store.currentStep >= 4"
:disable="store.currentStep < 4"
class="subStep"
>
</q-step>
<q-step
:name="5"
prefix="5"
title="ประกาศบนเว็บไซต์"
:done="store.currentStep >= 5"
:disable="store.currentStep < 5"
class="subStep"
>
</q-step>
<q-step
:name="6"
prefix="6"
title="จัดเตรียมเอกสารเล่ม 2"
:done="store.currentStep >= 6"
:disable="store.currentStep < 6"
class="subStep"
>
</q-step>
<q-step
:name="7"
prefix="7"
title="รอพิจารณาผลการประเมิน 2"
:done="store.currentStep >= 7"
:disable="store.currentStep < 7"
class="subStep"
>
</q-step>
<q-step
:name="8"
prefix="8"
title="ตรวจสอบความถูกต้องของเอกสารเล่ม 2"
:done="store.currentStep >= 8"
:disable="store.currentStep < 8"
class="subStep"
>
</q-step>
<q-step
:name="9"
prefix="9"
title="เสร็จสิ้น"
:done="store.currentStep >= 9"
:disable="store.currentStep < 9"
class="subStep"
>
</q-step>
</q-stepper> -->
</template>
<style>
@ -219,4 +119,33 @@ const store = useEvaluateStore();
border-radius: 8px;
font-size: 0.9rem;
}
/* steppe active */
.stepEva .q-stepper__tab--active .q-stepper__title{
color: #34373C !important;
font-weight: 500 !important;
}
.stepEva .q-stepper__tab--active .q-stepper__dot{
color: white !important;
border: 1.5px solid #02A998;
}
.stepEva .q-stepper__tab--active .q-stepper__dot span{
color: #02A998;
}
/* steppe done */
.stepEva .q-stepper__tab--done .q-stepper__dot{
color: #02A998 ;
}
.stepEva.q-stepper--vertical .q-stepper__dot:before, .stepEva.q-stepper--vertical .q-stepper__dot:after {
width: 1px;
background: #C8D3DB;
}
.stepEva .q-stepper__tab .q-stepper__title {
color: #9a9a9a;
font-weight: 400;
}
</style>

2
src/modules/06_evaluate/components/step/step4.vue
View file

@ -5,7 +5,7 @@ const status = ref<string>("WAIT_CHECK_DOC_V1");
</script>
<template>
<div class="col-12 row justify-center">
<div class="col-12 row q-pa-md justify-center">
<q-badge
v-if="status == 'WAIT_CHECK_DOC_V1'"
outline

154
src/modules/06_evaluate/components/step/step5.vue
View file

@ -80,85 +80,87 @@ onMounted(async () => {
</script>
<template>
<div class="row q-gutter-md">
<div class="col-12 text-center">
<q-banner class="text-weight-bold text-red-14 bg-red-2">
<div class="text-weight-bold">
<q-icon name="info_outline" color="red-14" size="24px" />
ประกาศเมื่อวันที่ {{ dateStartAnnounce }} ถึง {{ dateEndAnnounce }}
</div>
</q-banner>
</div>
<!-- เอกสารประกาศผลการคัดเลือกบุคคล -->
<div class="col-12">
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
เอกสารประกาศผลการคัดเลือกบุคคล
</div>
<div class="col-12"><q-separator /></div>
<div class="row q-pa-md">
<div class="col-12">
<q-list>
<q-item v-for="(item, index) in items" :key="index">
<q-item-section>
<q-item-label>{{ item.label }}</q-item-label>
</q-item-section>
<q-item-section side top>
<q-btn
flat
round
color="primary"
icon="mdi-clipboard-outline"
@click="onClickfetchDocument(item.fileName, 'COPPY')"
>
<q-tooltip>คัดลอกลิงก์</q-tooltip>
</q-btn>
</q-item-section>
</q-item>
</q-list>
<div class="row col-12 q-pa-md">
<div class="row q-col-gutter-sm">
<div class="col-12 text-center">
<q-banner rounded class="text-weight-bold text-red-14 bg-red-1">
<div class="text-weight-bold">
<q-icon name="info_outline" color="red-14" size="24px" />
ประกาศเมื่อวันที่ {{ dateStartAnnounce }} ถึง {{ dateEndAnnounce }}
</div>
</div>
</q-card>
</div>
</q-banner>
</div>
<!-- บันทึกแจ้งผลการประกาศคัดเลือก -->
<div class="col-12" v-if="statusFile">
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
บันทึกแจ้งผลการประกาศคัดเลือก
</div>
<div class="col-12"><q-separator /></div>
<div class="row q-pa-md">
<div class="col-12">
<q-list>
<q-item>
<q-item-section>
<q-item-label>บันทึกแจ้งผลการประกาศคัดเลือก</q-item-label>
</q-item-section>
<q-item-section side top>
<q-btn
flat
round
color="primary"
icon="mdi-clipboard-outline"
@click="
onClickfetchDocument(
'บันทึกแจ้งผลการประกาศคัดเลือก',
'COPPY'
)
"
>
<q-tooltip>คัดลอกลิงก์</q-tooltip>
</q-btn>
</q-item-section>
</q-item>
</q-list>
<!-- เอกสารประกาศผลการคัดเลือกบุคคล -->
<div class="col-12">
<q-card bordered class="shadow-0" style="border: 1px solid #d6dee1">
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
เอกสารประกาศผลการคัดเลือกบุคคล
</div>
</div>
</q-card>
<div class="col-12"><q-separator /></div>
<div class="row q-pa-sm">
<div class="col-12">
<q-list>
<q-item v-for="(item, index) in items" :key="index">
<q-item-section>
<q-item-label>{{ item.label }}</q-item-label>
</q-item-section>
<q-item-section side top>
<q-btn
flat
round
color="primary"
icon="mdi-clipboard-outline"
@click="onClickfetchDocument(item.fileName, 'COPPY')"
>
<q-tooltip>คัดลอกลิงก์</q-tooltip>
</q-btn>
</q-item-section>
</q-item>
</q-list>
</div>
</div>
</q-card>
</div>
<!-- บันทึกแจ้งผลการประกาศคัดเลือก -->
<div class="col-12" v-if="statusFile">
<q-card bordered class="shadow-0" style="border: 1px solid #d6dee1">
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
บันทึกแจ้งผลการประกาศคัดเลือก
</div>
<div class="col-12"><q-separator /></div>
<div class="row q-pa-sm">
<div class="col-12">
<q-list dense>
<q-item>
<q-item-section>
<q-item-label>บันทึกแจ้งผลการประกาศคัดเลือก</q-item-label>
</q-item-section>
<q-item-section side top>
<q-btn
flat
round
color="primary"
icon="mdi-clipboard-outline"
@click="
onClickfetchDocument(
'บันทึกแจ้งผลการประกาศคัดเลือก',
'COPPY'
)
"
>
<q-tooltip>คัดลอกลิงก์</q-tooltip>
</q-btn>
</q-item-section>
</q-item>
</q-list>
</div>
</div>
</q-card>
</div>
</div>
</div>
</template>

257
src/modules/06_evaluate/components/step/step6.vue
View file

@ -241,23 +241,23 @@ watch(
</script>
<template>
<div class="row q-col-gutter-md">
<div class="col-12 text-center">
<q-banner class="text-weight-bold text-red-14 bg-red-2">
<div class="text-weight-bold">
<q-icon name="info_outline" color="red-14" size="24px" />
วันสุดท้ายของการส่งผลงานคือวันที่ {{ dateEndPrepareDoc2 }}
</div>
</q-banner>
</div>
<div class="row col-12 q-pa-md">
<div class="row q-col-gutter-sm">
<div class="col-12 text-center">
<q-banner rounded class="text-weight-bold text-red-14 bg-red-1">
<div class="text-weight-bold">
<q-icon name="info_outline" color="red-14" size="24px" />
วันสุดท้ายของการส่งผลงานคือวันที่ {{ dateEndPrepareDoc2 }}
</div>
</q-banner>
</div>
<!-- ผลงาน -->
<div class="col-12">
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">ผลงาน</div>
<div class="col-12"><q-separator /></div>
<div class="row">
<div class="col-12 q-pa-sm">
<!-- ผลงาน -->
<div class="col-12">
<q-card bordered class="shadow-0" style="border: 1px solid #d6dee1">
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">ผลงาน</div>
<div class="col-12"><q-separator /></div>
<div class="col-12">
<div class="row q-col-gutter-md col-12">
<div class="col-xs-12 col-sm-12 row">
<div class="row col-12 q-col-gutter-md q-pa-sm">
@ -271,6 +271,7 @@ watch(
v-model="formCommand.subject"
@update:model-value="updateInput(formCommand)"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
hide-bottom-space
lazy-rules
/>
<q-input
@ -282,6 +283,7 @@ watch(
v-model="formCommand.author"
@update:model-value="updateInput(formCommand)"
label="เจ้าของผลงาน"
hide-bottom-space
:rules="[(val) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`]"
lazy-rules
/>
@ -294,6 +296,7 @@ watch(
v-model="formCommand.assignedPosition"
@update:model-value="updateInput(formCommand)"
label="ตำแหน่งที่ได้รับ"
hide-bottom-space
:rules="[
(val) => !!val || `${'กรุณากรอกตำแหน่งที่ได้รับ'}`,
]"
@ -303,52 +306,50 @@ watch(
</div>
</div>
</div>
</div>
</q-card>
</div>
</q-card>
</div>
<!-- เลือกผู้เซ็นเอกสาร -->
<div class="col-12">
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
เลือกผู้เซ็นเอกสาร
</div>
<div class="col-12"><q-separator /></div>
<div class="row">
<div class="col-12 q-pa-sm">
<div class="row q-col-gutter-md col-12">
<div class="col-xs-12 col-sm-12 row">
<div class="text-weight-medium q-py-sm">
ผู้บังคับบัญชาชั้นต้น
</div>
<div class="row col-12 q-col-gutter-md q-pa-sm">
<q-input
:readonly="store.currentStep != 6"
ref="commanderFullnameRef"
dense
class="col-xs-12 col-sm-6"
outlined
label="ชื่อ-นามสกุล"
v-model="formCommand.commanderFullname"
@update:model-value="updateInput(formCommand)"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
lazy-rules
/>
<q-input
:readonly="store.currentStep != 6"
ref="commanderPositionRef"
class="col-xs-12 col-sm-6"
dense
outlined
v-model="formCommand.commanderPosition"
@update:model-value="updateInput(formCommand)"
label="ตำแหน่ง"
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
lazy-rules
/>
<!-- เลือกผู้เซ็นเอกสาร -->
<div class="col-12">
<q-card bordered class="shadow-0" style="border: 1px solid #d6dee1">
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
เลือกผู้เซ็นเอกสาร
</div>
<div class="col-12"><q-separator /></div>
<div class="col-12">
<div class="row q-col-gutter-md col-12">
<div class="col-xs-12 col-sm-12 row">
<div class="text-weight-medium q-py-sm">
ผู้บังคับบัญชาชั้นต้น
</div>
<div class="row col-12 q-col-gutter-md q-pa-sm">
<q-input
:readonly="store.currentStep != 6"
ref="commanderFullnameRef"
dense
class="col-xs-12 col-sm-6"
outlined
label="ชื่อ-นามสกุล"
v-model="formCommand.commanderFullname"
@update:model-value="updateInput(formCommand)"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
lazy-rules
/>
<q-input
:readonly="store.currentStep != 6"
ref="commanderPositionRef"
class="col-xs-12 col-sm-6"
dense
outlined
v-model="formCommand.commanderPosition"
@update:model-value="updateInput(formCommand)"
label="ตำแหน่ง"
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
lazy-rules
/>
</div>
</div>
</div>
</div>
<div class="row q-col-gutter-md col-12">
<div class="col-xs-12 col-sm-12 row">
@ -384,80 +385,80 @@ watch(
</div>
</div>
</div>
</div>
</q-card>
</div>
</q-card>
</div>
<!-- อัปไฟล์ -->
<div class="col-6" v-if="store.currentStep === 6">
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
เอกสารเล่ม 2
</div>
<div class="col-12"><q-separator /></div>
<div class="row">
<div class="col-12 q-pa-sm">
<div class="row q-col-gutter-md col-12">
<div class="col-xs-12 col-sm-6 row">
<q-btn
v-if="downloadUrl"
:href="downloadUrl"
target="_blank"
class="col-12"
outline
icon="visibility"
label="ดูไฟล์เอกสาร"
color="primary"
>
<q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-10 row">
<!-- :rules="[(val) => !!val || 'เลือกไฟล']" -->
<!-- อัปไฟล์ -->
<div class="col-12" v-if="store.currentStep === 6">
<q-card bordered class="shadow-0" style="border: 1px solid #d6dee1">
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
เอกสารเล่ม 2
</div>
<div class="col-12"><q-separator /></div>
<div class="row">
<div class="col-12 q-pa-sm">
<div class="row q-col-gutter-md col-12">
<div class="col-xs-12 col-sm-6 row">
<q-btn
v-if="downloadUrl"
:href="downloadUrl"
target="_blank"
class="col-12"
outline
icon="visibility"
label="ดูไฟล์เอกสาร"
color="primary"
>
<q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-10 row">
<!-- :rules="[(val) => !!val || 'เลือกไฟล']" -->
<q-file
:disable="!store.statusUpload"
ref="fileEvaluation1Ref"
v-model="fileEvaluation1"
class="col-12"
outlined
dense
lazy-rules
accept=".pdf"
:rules="
downloadUrl === ''
? [(val) => !!val || 'กรุณาเลือกไฟล์']
: []
"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
</div>
<div class="col-2 self-center text-center q-pl-none">
<q-btn
:disable="!store.statusUpload"
flat
round
dense
color="primary"
icon="mdi-upload"
@click="
fetchPathUpload(
'เล่ม 2',
evaluateId,
'1-เอกสารเล่ม 2',
fileEvaluation1
)
"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
<q-file
:disable="!store.statusUpload"
ref="fileEvaluation1Ref"
v-model="fileEvaluation1"
class="col-12"
outlined
dense
lazy-rules
accept=".pdf"
:rules="
downloadUrl === ''
? [(val) => !!val || 'กรุณาเลือกไฟล์']
: []
"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
</div>
<div class="col-2 self-center text-center q-pl-none">
<q-btn
:disable="!store.statusUpload"
flat
round
dense
color="primary"
icon="mdi-upload"
@click="
fetchPathUpload(
'เล่ม 2',
evaluateId,
'1-เอกสารเล่ม 2',
fileEvaluation1
)
"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
</div>
</div>
</div>
</div>
</div>
</q-card>
</q-card>
</div>
</div>
</div>

2
src/modules/06_evaluate/components/viewstep/viewStep3.vue
View file

@ -21,7 +21,7 @@ const tabPanels = store.tabPanels
<template>
<q-card bordered class="col-12 row shadow-0" :style="$q.screen.lt.sm ? '' : 'height: 60vh; overflow: scroll;' ">
<div class="col-12 row items-center q-px-sm q-py-xs">
<div class="col-12 row items-center q-px-sm q-pb-xs">
<div class="q-pl-sm text-weight-medium" >เอกสารที่อัปโหลด</div>
<q-space />
<q-btn