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

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>