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

ออกคำสั่ง step4

Browse source
This commit is contained in:
Thanit Konmek 2023-06-28 12:10:47 +07:00
parent 82fc9de64b
commit a3db00af0a
5 changed files with 235 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="toptitle text-dark col-12 row items-center">ออกคำสั่งบรรจุ</div>
<div class="toptitle text-dark col-12 row items-center">ออกคำสั่ง</div>
<div>
<q-card flat bordered class="col-12 q-mt-sm">
<div class="row q-pa-md">
@ -23,15 +23,20 @@
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-6">
<q-btn
size="12px"
flat
round
color="add"
@click="clickAdd"
icon="mdi-plus"
>
<q-btn size="12px" flat round color="add" icon="mdi-plus">
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
<q-menu>
<q-list style="min-width: 100px">
<q-item clickable v-close-popup disable>
<q-item-section
>ลายเซ็นอิเล็กทรอนิกส์ (ออนไลน์)</q-item-section
>
</q-item>
<q-item clickable @click="clickAdd">
<q-item-section>ลายเซ็นชื่อ (ออฟไลน์)</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
<div class="col-xs-12 col-sm-3 col-md-2">

4
src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
View file

@ -10,7 +10,7 @@
class="q-mr-sm"
@click="router.go(-1)"
/>
ออกคำสั่งบรรจุ
ออกคำสั่ง
</div>
<q-card flat bordered class="col-12 q-my-sm q-mt-sm">
<q-stepper
@ -38,7 +38,7 @@
<q-step
:name="3"
title="เลือก"
title="เลือกรายชื่อส่งสำเนาคำสั่ง"
prefix="3"
:done="step > 3"
:header-nav="step > 3"

80
src/modules/05_placement/components/OrderPlacement/step/step01.vue
View file

@ -187,6 +187,52 @@
<div class="col-12">
<q-separator />
</div>
<div class="col-xs-12 col-md-6">
<selector
:class="getClass(true)"
outlined
dense
lazy-rules
v-model="test"
:rules="[(val:string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]"
hide-bottom-space
:label="`${'รอบการสอบ'}`"
@update:modelValue="clickEditRow"
emit-value
map-options
option-label="name"
:options="testOption"
option-value="id"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'testOption'
) "
/>
</div>
<div class="col-xs-12 col-md-6">
<selector
:class="getClass(true)"
outlined
dense
lazy-rules
v-model="position"
:rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่งรับสมัคร'}`]"
hide-bottom-space
:label="`${'ตำแหน่งรับสมัคร'}`"
@update:modelValue="clickEditRow"
emit-value
map-options
option-label="name"
:options="positionOption"
option-value="id"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'positionOption'
) "
/>
</div>
<div class="col-xs-12 col-md-6">
<selector
:class="getClass(true)"
@ -319,29 +365,6 @@
</template>
</datepicker>
</div>
<div class="col-xs-12 col-md-6">
<selector
:class="getClass(true)"
outlined
dense
lazy-rules
v-model="position"
:rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่งรับสมัคร'}`]"
hide-bottom-space
:label="`${'ตำแหน่งรับสมัคร'}`"
@update:modelValue="clickEditRow"
emit-value
map-options
option-label="name"
:options="positionOption"
option-value="id"
use-input
input-debounce="0"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'positionOption'
) "
/>
</div>
</div>
</q-form>
</div>
@ -420,6 +443,10 @@ const position = ref<string>("");
const positionOption = ref<DataOption[]>([]);
const positionOptionFilter = ref<DataOption[]>([]);
const test = ref<string>("");
const testOption = ref<DataOption[]>([]);
const testOptionFilter = ref<DataOption[]>([]);
const clickEditRow = () => (editRow.value = true);
const filterSelector = (val: any, update: Function, filtername: string) => {
@ -462,6 +489,13 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
);
});
break;
case "testOption":
update(() => {
testOption.value = testOptionFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
default:
break;
}

162
src/modules/05_placement/components/OrderPlacement/step/step04.vue
View file

@ -1,6 +1,97 @@
<template>
<div>
<div class="q-pa-md" style="min-height: 70vh; overflow-y: scroll">04</div>
<div style="min-height: 70vh">
<q-splitter v-model="splitterModel" style="height: 70vh">
<template v-slot:before>
<div class="space">
<div @click="setTab('main')" :class="getClass(tab == 'main')">
<label>คำสั่ง</label>
<q-btn
size="12px"
flat
round
icon="mdi-download"
:disable="tab !== 'main'"
:color="tab !== 'main' ? 'grey' : 'add'"
>
<q-tooltip>ดาวน์โหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 100px">
<q-item clickable v-close-popup>
<q-item-section>ไฟล์ .PDF</q-item-section>
</q-item>
<q-item clickable v-close-popup>
<q-item-section>ไฟล์ .docx</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
<div @click="setTab('second')" :class="getClass(tab == 'second')">
<label>เอกสารแนบท้าย</label>
<q-btn
size="12px"
flat
round
:color="tab !== 'second' ? 'grey' : 'add'"
icon="mdi-download"
:disable="tab !== 'second'"
>
<q-tooltip>ดาวน์โหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 100px">
<q-item clickable v-close-popup>
<q-item-section>ไฟล์ .PDF</q-item-section>
</q-item>
<q-item clickable v-close-popup>
<q-item-section>ไฟล์ .docx</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
</div>
<div class="card-pdf q-ma-md q-pa-md">asd</div>
</template>
<template v-slot:separator>
<q-avatar
color="primary"
text-color="white"
size="30px"
icon="drag_indicator"
/>
</template>
<template v-slot:after>
<div class="q-pa-md">
<fieldset class="border q-pa-lg">
<legend class="text-header">อัปโหลดไฟล์</legend>
<div>
<label class="text-file">คำสั่ง</label>
<q-file outlined v-model="fileOrder" label="เลือกไฟล์คำสั่ง">
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
<div class="q-py-lg" />
<label class="text-file">เอกสารแนบท้าย</label>
<q-file
outlined
v-model="fileOrder"
label="เลือกไฟล์เอกสารแนบท้าย"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
</div>
</fieldset>
</div>
</template>
</q-splitter>
</div>
<q-separator />
<div class="flex justify-end q-px-md q-gutter-sm">
<q-btn
@ -37,4 +128,73 @@ const props = defineProps({
const next = () => props.next();
const previous = () => props.previous();
const splitterModel = ref<number>(50);
const tab = ref<string>("main");
const fileOrder = ref<any>(null);
const fileTailer = ref<any>(null);
const getClass = (val: boolean) => {
return {
"card-header-active q-px-lg q-py-md cursor-pointer": val,
"card-header q-px-lg q-py-md cursor-pointer": !val,
};
};
const setTab = (val: string) => {
tab.value = val;
};
</script>
<style lang="scss" scoped>
.border {
border-radius: 10px;
border: 1px solid #e9eaec;
}
.text-header {
color: #34373c;
font-size: 1.2rem;
font-weight: normal;
}
.text-file {
color: #34373c;
font-size: 1.1rem;
font-weight: bold;
}
.space {
background-color: #e9eaec;
display: flex;
}
.card-header {
margin-top: 5px;
background-color: #e9eaec;
border-radius: 10px 10px 0px 0px;
width: 200px;
display: flex;
justify-content: center;
font-weight: normal;
align-items: center;
}
.card-header-active {
margin-top: 5px;
background-color: white;
border-radius: 10px 10px 0px 0px;
border: 1px solid #e9eaec;
width: 200px;
display: flex;
justify-content: center;
border-bottom-style: none;
font-weight: bold;
align-items: center;
}
.card-pdf {
border-radius: 10px;
border: 1px solid #e9eaec;
background-color: #e9eaec;
height: 60vh;
}
</style>