ปรับ UI
This commit is contained in:
parent
4cbf6fa473
commit
6323d1cb41
5 changed files with 251 additions and 21 deletions
|
|
@ -1,20 +1,45 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { ref, reactive } from "vue";
|
||||
import ViewPDF from "@/modules/12_evaluatePersonal/components/Detail/viewstep/viewPDF.vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import type { FormCommand } from "@/modules/12_evaluatePersonal/interface/index/evalute";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, showLoader, hideLoader, messageError, success } = mixin;
|
||||
const AnnouncementDate = ref<string | null>(date2Thai(new Date()));
|
||||
const fileEvaluation1 = ref<any>();
|
||||
|
||||
const pdfSrc = ref<any>();
|
||||
|
||||
const modalView = ref<boolean>(false);
|
||||
const emit = defineEmits(["update:form"]);
|
||||
const formCommand = reactive<FormCommand>({
|
||||
elementaryFullName: "",
|
||||
elementaryPosition: "",
|
||||
abovelevelFullname: "",
|
||||
abovelevelPosition: "",
|
||||
});
|
||||
|
||||
function onClickViewPDF(file: any) {
|
||||
pdfSrc.value = file.webkitRelativePath;
|
||||
modalView.value = true;
|
||||
}
|
||||
|
||||
const updateInput = (value: any) => {
|
||||
emit("update:form", value, ref);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col-12">
|
||||
<q-banner class="text-weight-bold text-red-14 bg-red-2 text-center">
|
||||
<div class="text-weight-bold">
|
||||
<q-icon name="info_outline" color="red-14" size="24px" />
|
||||
ประกาศเมื่อวันที่ {{ AnnouncementDate }}
|
||||
</div>
|
||||
</q-banner>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<q-card bordered style="border: 1px solid #d6dee1">
|
||||
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
|
||||
|
|
@ -73,6 +98,82 @@ function onClickViewPDF(file: any) {
|
|||
</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
|
||||
ref="elementaryFullNameRef"
|
||||
dense
|
||||
class="col-xs-12 col-sm-6"
|
||||
outlined
|
||||
label="ชื่อ-นามสกุล"
|
||||
v-model="formCommand.elementaryFullName"
|
||||
@update:model-value="updateInput(formCommand)"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-input
|
||||
ref="elementaryPositonRef"
|
||||
class="col-xs-12 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
v-model="formCommand.elementaryPosition"
|
||||
@update:model-value="updateInput(formCommand)"
|
||||
label="ตำแหน่ง"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
|
||||
</div>
|
||||
<div class="row col-12 q-col-gutter-md q-pa-sm">
|
||||
<q-input
|
||||
ref="abovelevelFullnameRef"
|
||||
dense
|
||||
class="col-xs-12 col-sm-6"
|
||||
outlined
|
||||
v-model="formCommand.abovelevelFullname"
|
||||
label="ชื่อ-นามสกุล"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
|
||||
lazy-rules
|
||||
@update:model-value="updateInput(formCommand)"
|
||||
/>
|
||||
<q-input
|
||||
ref="abovelevelPositionRef"
|
||||
class="col-xs-12 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
v-model="formCommand.abovelevelPosition"
|
||||
label="ตำแหน่ง"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
|
||||
lazy-rules
|
||||
@update:model-value="updateInput(formCommand)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dialog Full Screen -->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue