ปรับ UI

This commit is contained in:
setthawutttty 2023-12-22 10:05:18 +07:00
parent 4cbf6fa473
commit 6323d1cb41
5 changed files with 251 additions and 21 deletions

View file

@ -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 -->